@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/PlusJakartaSans_400Regular.ttf') format('truetype'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/PlusJakartaSans_600SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/PlusJakartaSans_700Bold.ttf') format('truetype'); }
:root { --bg: #f4f4f5; --band: #ffe6d3; --brand-top: #ffdcc4; --surface: #ffffff; --fam-baby-band: #faedf2; --fam-baby-ink: #af2267; --fam-baby-edge: #ffb8d0; --fam-health-band: #e4f1fb; --fam-health-ink: #00668c; --fam-health-edge: #a6dbff; --fam-nutrition-band: #eaf6f2; --fam-nutrition-ink: #006b54; --fam-nutrition-edge: #7ee4c4; --fam-community-band: #f5eefa; --fam-community-ink: #7349aa; --fam-community-edge: #d2bbff; --fam-brand-band: #ffe6d3; --fam-brand-ink: #006e1c; --fam-brand-edge: #ffb781; --fam-growth-band: #f4f4f5; --fam-growth-ink: #006e1c; --fam-growth-edge: #a9d291; --prem-ground: #1f1409; --prem-deep: #170e06; --prem-top: #26180b; --prem-glow: #4c2c0f; --prem-glow-rgba: rgba(255,142,38,0.2); --prem-title: #ffffff; --prem-body: #d7d5d3; --prem-body-on-top: #d8d5d3; --prem-body-on-glow: #dfd9d4; --prem-leaf: #73bc6e; --prem-chip: rgba(255,255,255,0.12); --prem-edge: #1f1409; --text: #1c1c1c; --muted: #474747; --link: #006e1c; --focus: #006e1c; --cta-ink: #703800; --wm-ink: #006e1c; --wm-fruit: #ff8e26; --porty-leaf: #006e1c; --porty-wave: #474747; --blob-a: #ffc79f; --blob-b: #c4efac; --glow: #ffdcc4; --band-bg: #ff8e26; --band-ink: #3c1e00; --store-bg: #ff8e26; --store-ink: #3c1e00; --store-soon-ink: #1c1c1c; --store-soon-edge: #474747; --balloon-bg: #ffffff; --balloon-ink: #1c1c1c; --balloon-edge: transparent; --note-edge: #ff8e26; --chip-bg: #c4efac; --chip-ink: #295017; --mark-bg: #ffdcc4; --mark-ink: #3c1e00; --phone-bezel: #1c1c1c; --phone-edge: #1c1c1c; --shot-bg: #ffe6d3; --shot-ink: #474747; --note-bg: #fff4e2; --note-ink: #3c1e00; --callout-bg: #e9f5ea; --callout-ink: #0d3a2f; --line: color-mix(in srgb, var(--text) 13%, transparent); --shadow: 0 1px 2px rgba(60,30,0,.05), 0 12px 32px -20px rgba(60,30,0,.28); --device-shadow: 0 2px 6px rgba(0,0,0,.16), 0 40px 80px -40px rgba(60,30,0,.6); --ease: cubic-bezier(.22,.61,.36,1); color-scheme: light dark; }
@media (prefers-color-scheme: dark) { :root { --bg: #0b0b0b; --band: #25180b; --brand-top: #1f1409; --surface: #222222; --fam-baby-band: #1d0d15; --fam-baby-ink: #ffb0cc; --fam-baby-edge: rgba(255, 176, 203, 0.3); --fam-health-band: #091f27; --fam-health-ink: #8acffa; --fam-health-edge: rgba(139, 206, 251, 0.3); --fam-nutrition-band: #091b17; --fam-nutrition-ink: #80d7bb; --fam-nutrition-edge: rgba(128, 215, 187, 0.3); --fam-community-band: #191321; --fam-community-ink: #dbb8ff; --fam-community-edge: rgba(210, 187, 255, 0.3); --fam-brand-band: #25180b; --fam-brand-ink: #73bc6e; --fam-brand-edge: rgba(255, 142, 38, 0.3); --fam-growth-band: #0b0b0b; --fam-growth-ink: #82da80; --fam-growth-edge: rgba(130, 218, 128, 0.31); --prem-ground: #1f1409; --prem-deep: #170e06; --prem-top: #26180b; --prem-glow: #4c2c0f; --prem-glow-rgba: rgba(255,142,38,0.2); --prem-title: #ffffff; --prem-body: #d7d5d3; --prem-body-on-top: #d8d5d3; --prem-body-on-glow: #dfd9d4; --prem-leaf: #73bc6e; --prem-chip: rgba(255,255,255,0.12); --prem-edge: #73bc6e; --text: #e2e2e2; --muted: #c6c6c6; --link: #82da80; --focus: #82da80; --cta-ink: #ff973e; --wm-ink: #73bc6e; --wm-fruit: #ff8e26; --porty-leaf: #82da80; --porty-wave: #c6c6c6; --blob-a: #4d2600; --blob-b: #1c2a14; --glow: #3a2412; --band-bg: #ff8e26; --band-ink: #3c1e00; --store-bg: #ff8e26; --store-ink: #3c1e00; --store-soon-ink: #e2e2e2; --store-soon-edge: #c6c6c6; --balloon-bg: #3d2b17; --balloon-ink: #ffdcc4; --balloon-edge: #ff8e26; --note-edge: #ff8e26; --chip-bg: #295017; --chip-ink: #c4efac; --mark-bg: #703800; --mark-ink: #ffdcc4; --phone-bezel: #0b0b0b; --phone-edge: #919191; --shot-bg: #25180b; --shot-ink: #c6c6c6; --note-bg: #2a2016; --note-ink: #fff4e2; --callout-bg: #12281f; --callout-ink: #cdeccf; --shadow: none; --device-shadow: 0 40px 80px -40px rgba(0,0,0,.8); } }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { overflow-wrap: break-word; margin: 0; background: var(--bg); color: var(--text); font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 1.0625rem; line-height: 1.65; -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { text-wrap: balance; min-width: 0; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--surface); color: var(--text); padding: 12px 16px; z-index: 10; }
.skip:focus { left: 16px; top: 16px; }
.band { background: var(--band-bg); color: var(--band-ink); font-weight: 700; font-size: 0.9375rem; padding: 10px 16px; text-align: center; }
.wrap { max-width: 64rem; margin: 0 auto; padding: 0 1.5rem; }
/* ---- başlık ---- */
header.site { padding: 1.25rem 0; }
header.site .inner { max-width: 64rem; margin: 0 auto; padding: 0 1.5rem; display: flex; align-items: center; gap: 8px 16px; }
.brand { display: inline-flex; padding: 6px 0; margin-right: auto; }
.wordmark-head { height: 30px; width: auto; display: block; overflow: visible; }
header.site nav { display: none; }
header.site nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 0 2px; }
header.site nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--muted); font-weight: 600; font-size: 0.9375rem; text-decoration: none; border-radius: 10px; }
header.site nav a:hover { color: var(--text); background: var(--band); }
.langs { list-style: none; margin: 0; padding: 3px; display: flex; gap: 2px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--surface) 60%, transparent); }
.langs li { margin: 0; }
.langs a { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 38px; padding: 0 8px; color: var(--muted); font-weight: 700; font-size: 0.8125rem; letter-spacing: .06em; text-decoration: none; border-radius: 9px; }
.langs a[aria-current="page"] { background: var(--band); color: var(--text); }
@media (min-width: 720px) { header.site nav { display: block; } }
/* ---- yasal sayfa ---- */
main.legal { max-width: 46rem; margin: 0 auto; padding: 1.5rem 1.5rem 4rem; }
main.legal article { background: var(--surface); border-radius: 16px; padding: 24px 20px; box-shadow: var(--shadow); }
main.legal h1 { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.4rem); line-height: 1.12; letter-spacing: -.025em; margin: 0 0 8px; }
main.legal h2 { font-size: 1.25rem; line-height: 1.35; margin: 2em 0 0.5em; letter-spacing: -.01em; }
main.legal h3 { font-size: 1.0625rem; line-height: 1.4; margin: 1.5em 0 0.4em; }
p, ul { margin: 0 0 1em; }
ul { padding-left: 1.25em; }
li { margin-bottom: 0.5em; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.875em; overflow-wrap: anywhere; }
.meta { color: var(--muted); font-size: 0.9375rem; margin: 0 0 1.25em; }
nav.toc { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 12px 0; margin-bottom: 8px; }
nav.toc h2 { font-size: 1rem; margin: 0 0 6px; }
nav.toc ul { margin: 0; padding: 0; list-style: none; }
nav.toc li { margin-bottom: 2px; }
mark.ph { background: var(--mark-bg); color: var(--mark-ink); padding: 0 3px; border-radius: 3px; font-weight: 700; }
.note, .callout { border-radius: 12px; padding: 12px 14px; margin: 0 0 1em; font-size: 0.9375rem; }
.note { background: var(--note-bg); color: var(--note-ink); border-left: 4px solid var(--note-edge); }
.note p, .callout p { margin: 0; }
.note .note-label { font-weight: 700; margin-bottom: 4px; }
.note mark.ph { background: transparent; color: inherit; padding: 0; font-weight: 400; }
.callout { background: var(--callout-bg); color: var(--callout-ink); }
li .note, li .callout { margin-top: 0.5em; }
.doclist { list-style: none; padding: 0; }
.doclist li { margin-bottom: 12px; font-size: 1.125rem; }
/* destek sayfası: aynı makale, kıl çizgili satırlar */
.topics { list-style: none; padding: 0; margin: 1.5em 0; border-top: 1px solid var(--line); }
.topics li { margin: 0; padding: 1rem 0; border-bottom: 1px solid var(--line); }
main.legal .topics h2 { margin: 0 0 .25rem; font-size: 1.0625rem; }
.topics p { margin: 0; color: var(--muted); }
.contact { font-size: 1.125rem; font-weight: 700; }
/* ---- dipnot ---- */
footer.site { padding: 3rem 0 4rem; color: var(--muted); font-size: 0.9375rem; border-top: 1px solid var(--line); }
footer.site .inner { max-width: 64rem; margin: 0 auto; padding: 0 1.5rem; }
footer.site ul.links { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 0 20px; }
footer.site ul.links li { margin: 0; }
footer.site ul.links a { display: inline-flex; min-height: 44px; align-items: center; color: var(--muted); }
footer.site ul.links a:hover { color: var(--text); }
footer.site p { margin: 0 0 6px; }
footer.site .langs { display: inline-flex; margin-top: 12px; }
/* ---- tanıtım (#1313) — hodierna dili, PortyCare kimliği ---- */
.glow { position: fixed; top: -28vh; left: 50%; z-index: -1; pointer-events: none; width: min(150vw, 1200px); height: min(150vw, 1200px); border-radius: 50%; background: radial-gradient(circle closest-side, color-mix(in srgb, var(--glow) 55%, transparent), transparent 72%); transform: translate3d(-50%, 0, 0); }
main.landing section { padding: 6rem 0; }
main.landing section.tinted { background: var(--surface); padding: 5rem 0; }
main.landing h1 { font-size: clamp(2.3rem, 1.3rem + 3.2vw, 3.9rem); line-height: 1.06; letter-spacing: -.035em; font-weight: 700; margin: 0; }
main.landing h2 { font-size: clamp(1.8rem, 1.2rem + 1.9vw, 2.75rem); line-height: 1.1; letter-spacing: -.025em; font-weight: 700; margin: 0 0 .7rem; }
main.landing h3 { font-size: 1.125rem; line-height: 1.35; letter-spacing: -.01em; margin: 0; }
main.landing p { max-width: 60ch; }
.lede { font-size: 1.15rem; color: var(--muted); margin: 0; }
.hero { min-height: min(calc(100svh - 6rem), 56rem); display: flex; align-items: center; padding: 2rem 0 4rem !important; }
.hero > .wrap { width: 100%; }
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3.5rem; align-items: center; }
.hero .lede { margin-top: 1.25rem; font-size: 1.2rem; max-width: 40ch; }
.cta { margin-top: 2rem; }
.stores { display: flex; flex-wrap: wrap; gap: .75rem; }
.store { display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 1.1rem; border-radius: 14px; font-weight: 700; font-size: .9375rem; text-decoration: none; transition: transform .2s var(--ease), filter .2s var(--ease); }
.store .icon { flex: none; }
.store-live { background: var(--store-bg); color: var(--store-ink); }
a.store-live:hover { transform: translateY(-2px); filter: brightness(1.05); }
.store-soon { border: 1.5px solid var(--store-soon-edge); color: var(--store-soon-ink); cursor: default; }
/* Resmî rozetler (tur 5): değiştirilmeden; Apple 48 px (≥ 40), Google'ın
   PNG'si 63 px ve kendi saydam payı (≈ %11,6 üst/alt) negatif kenarla geri
   alınıyor → görünen ≈ 48,4 px, Apple'la aynı ya da büyük (Google kuralı).
   Aradaki boşluk rozet yüksekliğinin ¼'ü (12 px, iki kural da). */
.stores:has(.store-badge) { gap: 12px 12px; }
.store-badge { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; }
.store-badge img { width: auto; display: block; }
.badge-apple img { height: 48px; }
.badge-play img { height: 63px; margin: -7.3px 0; }
.store-badge-soon { cursor: default; }
.badge-soon { font-size: .8125rem; font-weight: 600; line-height: 1; color: var(--muted); }
.trademarks { font-size: .8125rem; }
.note-sm { font-size: .9375rem; color: var(--muted); margin: 1rem 0 0; }
.trust { list-style: none; margin: 2.25rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.trust li { margin: 0; }
.trust a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--muted); font-weight: 600; font-size: .9375rem; text-decoration: none; }
.trust a:hover { color: var(--text); }
.trust .icon { flex: none; color: var(--link); }
/* açılışın sağı: koyu cihaz + iki leke + Porty */
.hero-shot { position: relative; isolation: isolate; display: flex; justify-content: center; padding: 0 0 3rem; min-width: 0; }
.hero-shot::before, .hero-shot::after { content: ''; position: absolute; z-index: -1; pointer-events: none; aspect-ratio: 1; }
.hero-shot::before { width: min(80%, 22rem); left: 0; top: 2%; background: var(--blob-a); border-radius: 58% 42% 55% 45% / 48% 60% 40% 52%; }
.hero-shot::after { width: min(62%, 17rem); right: 0; bottom: 8%; background: var(--blob-b); border-radius: 45% 55% 40% 60% / 55% 45% 58% 42%; }
.device { position: relative; width: min(72vw, 17.5rem); padding: .5rem; border-radius: 2.4rem; background: var(--phone-bezel); box-shadow: var(--device-shadow); outline: 1px solid var(--phone-edge); outline-offset: -1px; }
.screens { position: relative; border-radius: 1.95rem; overflow: hidden; background: var(--shot-bg); aspect-ratio: 1206 / 2622; }
.screens > * { position: absolute; inset: 0; opacity: 0; }
.screens > [data-on] { opacity: 1; }
.screens img { width: 100%; height: 100%; object-fit: cover; display: block; }
.screen-missing { display: flex; align-items: center; justify-content: center; text-align: center; color: var(--shot-ink); padding: 16px; font-size: .8125rem; background: var(--shot-bg); }
.screen-missing p { margin: 0; }
.screen-dots { display: none; position: absolute; left: 0; right: 0; bottom: -2.75rem; justify-content: center; gap: .25rem; }
.js .screen-dots { display: flex; }
.screen-dots button { appearance: none; border: 0; background: none; padding: 0; cursor: pointer; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; }
.screen-dots button::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); opacity: .35; transition: opacity .25s ease, transform .25s ease, background-color .25s ease; }
.screen-dots button:hover::after { opacity: .6; }
.screen-dots button[aria-pressed="true"]::after { background: var(--link); opacity: 1; transform: scale(1.2); }
.hero-porty { position: absolute; left: -.5rem; bottom: 1rem; width: 9.5rem; display: flex; flex-direction: column; align-items: flex-start; z-index: 2; }
/* Görüntüsüz açılış (yayında hiç görüntü yoksa cihaz çizilmez): Porty ortada, büyük */
.hero-shot.no-device { align-items: center; padding: 1rem 0 2rem; }
.hero-shot.no-device .hero-porty { position: relative; left: auto; bottom: auto; width: min(56vw, 14rem); align-items: center; }
.hero-shot.no-device .greeting { max-width: 15rem; align-self: flex-start; }
.greeting { position: relative; max-width: 11rem; background: var(--balloon-bg); color: var(--balloon-ink); border: 1px solid var(--balloon-edge); font-weight: 600; font-size: .875rem; line-height: 1.4; border-radius: 16px; padding: 10px 14px; margin: 0 0 6px; box-shadow: var(--shadow); }
.porty { width: 100%; height: auto; display: block; }
/* nedir + kıl çizgili özellik satırları */
.moments { margin-top: 3rem; border-top: 1px solid var(--line); }
.moment { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: .35rem 2rem; padding: 1.4rem 0; border-bottom: 1px solid var(--line); }
.moment h3 { display: flex; align-items: center; gap: .6rem; }
.moment h3 .icon { flex: none; color: var(--link); }
.moment p { margin: 0; color: var(--muted); max-width: none !important; }
/* ekran galerisi — yatay, parmakla */
.shots { --edge: max(1.5rem, calc((100% - 64rem) / 2 + 1.5rem)); list-style: none; margin: 3rem 0 0; padding: .25rem var(--edge) 1rem; display: grid; grid-auto-flow: column; grid-auto-columns: min(62vw, 15.5rem); gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--edge); overscroll-behavior-x: contain; scrollbar-width: thin; }
.shots li { margin: 0; scroll-snap-align: start; }
.shots figure { margin: 0; }
.shot { border-radius: 1.5rem; overflow: hidden; aspect-ratio: 1206 / 2622; background: var(--shot-bg); outline: 1px solid var(--line); outline-offset: -1px; }
.shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shots figcaption { margin: .85rem 0 0; font-size: .9375rem; color: var(--muted); }
/* kaynaklar */
.badges { list-style: none; padding: 0; margin: 2rem 0 1.25rem; display: flex; flex-wrap: wrap; gap: 8px; }
.badges li { margin: 0; }
.abbr { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; height: 32px; padding: 0 10px; border-radius: 9px; background: var(--chip-bg); color: var(--chip-ink); font-weight: 700; font-size: .875rem; }
.in-app { display: flex; gap: 8px; align-items: flex-start; font-weight: 600; margin: 0 0 1rem !important; }
.in-app .icon { flex: none; margin-top: 4px; color: var(--link); }
details.src-all { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
details summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 56px; }
details summary::-webkit-details-marker { display: none; }
details summary::after { content: '+'; color: var(--muted); font-weight: 400; font-size: 1.4rem; line-height: 1; }
details[open] summary::after { content: '−'; }
.src-groups { display: grid; gap: 8px 32px; padding: 8px 0 16px; }
.src-group h3 { margin: 8px 0 12px !important; font-size: 1rem !important; color: var(--muted); }
.src-list { list-style: none; padding: 0; margin: 0; }
.src-list li { display: flex; flex-direction: column; margin: 0 0 14px; break-inside: avoid; }
.src-name { font-weight: 600; line-height: 1.4; }
.src-provides { color: var(--muted); font-size: .9375rem; line-height: 1.5; }
/* ---- tur 2: uygulamanın renk aileleri ---- */
.fam-baby { --fam-band: var(--fam-baby-band); --fam-ink: var(--fam-baby-ink); --fam-edge: var(--fam-baby-edge); }
.fam-health { --fam-band: var(--fam-health-band); --fam-ink: var(--fam-health-ink); --fam-edge: var(--fam-health-edge); }
.fam-nutrition { --fam-band: var(--fam-nutrition-band); --fam-ink: var(--fam-nutrition-ink); --fam-edge: var(--fam-nutrition-edge); }
.fam-community { --fam-band: var(--fam-community-band); --fam-ink: var(--fam-community-ink); --fam-edge: var(--fam-community-edge); }
.fam-brand { --fam-band: var(--fam-brand-band); --fam-ink: var(--fam-brand-ink); --fam-edge: var(--fam-brand-edge); }
.fam-growth { --fam-band: var(--fam-growth-band); --fam-ink: var(--fam-growth-ink); --fam-edge: var(--fam-growth-edge); }
/* açılış ve kapanış: marka anı (açılışın sabah geçişi) */
.hero { background: linear-gradient(180deg, var(--brand-top), var(--band) 70%, var(--bg)); }
main.landing section.tinted.closing-band { background: linear-gradient(180deg, var(--bg), var(--band) 35%, var(--brand-top)); }
/* genel bakış: her sekme bir kart, kenarı ve ikonu o sekmenin renginde */
.overview { padding-bottom: 4rem !important; }
.ov-grid { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.75rem), 1fr)); gap: .75rem; }
.ov-grid li { margin: 0; }
.ov-card { display: flex; flex-direction: column; gap: .35rem; height: 100%; min-height: 8rem; padding: 1rem; border-radius: 16px; background: var(--surface); border: 1px solid var(--fam-edge); box-shadow: var(--shadow); color: var(--text); text-decoration: none; transition: transform .2s var(--ease); }
.ov-card:hover { transform: translateY(-3px); }
.ov-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--fam-band); color: var(--fam-ink); margin-bottom: .35rem; }
.ov-eyebrow { font-size: .8125rem; font-weight: 700; letter-spacing: .04em; color: var(--fam-ink); }
.ov-title { font-weight: 700; font-size: 1.0625rem; line-height: 1.3; }
/* özellik bölümleri */
main.landing section.sec { padding: 5.5rem 0; }
main.landing section.sec.banded { background: var(--fam-band); }
.eyebrow { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 .9rem !important; font-weight: 700; font-size: .9375rem; color: var(--fam-ink); }
.eyebrow .icon { flex: none; }
.sec-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; align-items: center; }
.sec-shot { display: flex; justify-content: center; }
.device-sm { width: min(64vw, 16rem); }
.rows { list-style: none; margin: 2rem 0 0; padding: 0; border-top: 1px solid var(--line); }
.rows li, .row-cards li { display: flex; gap: .9rem; align-items: flex-start; margin: 0; }
.rows li { padding: 1rem 0; border-bottom: 1px solid var(--line); }
.row-icon { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--fam-ink); background: var(--surface); border: 1px solid var(--fam-edge); }
.rows h3, .row-cards h3 { font-size: 1.0625rem !important; margin: .1rem 0 .2rem !important; }
.rows p, .row-cards p { margin: 0; color: var(--muted); font-size: .9875rem; max-width: 52ch !important; }
.row-cards { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.row-cards li { background: var(--surface); border: 1px solid var(--fam-edge); border-radius: 16px; padding: 1.25rem; box-shadow: var(--shadow); }
/* yer tutucu: bölümün renginde sakin bir yüzey */
.screens .screen-missing { position: absolute; inset: 0; height: 100%; justify-content: center; }
.screen-missing { flex-direction: column; gap: .6rem; background: linear-gradient(180deg, var(--surface), var(--fam-band, var(--band))) !important; }
.ph-icon { width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center; color: var(--fam-ink, var(--link)); background: var(--surface); border: 1px solid var(--fam-edge, var(--line)); }
.ph-title { margin: 0 !important; font-weight: 700; color: var(--text); font-size: .9375rem; }
.ph-note { margin: 0 !important; font-size: .6875rem; line-height: 1.4; color: var(--shot-ink); }
.ph-note mark.ph { background: transparent; color: inherit; font-weight: 600; padding: 0; }
.ph-note code { font-size: .625rem; opacity: .8; }
@media (min-width: 640px) { .row-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 56rem) {
  .sec-split { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 4.5rem; }
  .sec.flip .sec-shot { order: -1; }
}
/* ---- tur 3: Premium — uygulamanın premium yüzeyi (CardGround), iki temada aynı ---- */
.fam-premium { --fam-band: var(--prem-ground); --fam-ink: var(--prem-leaf); --fam-edge: var(--prem-edge); }
main.landing section.prem { --text: var(--prem-title); --muted: var(--prem-body); --link: var(--prem-leaf); --focus: var(--prem-leaf); --line: rgba(255,255,255,.14); color: var(--text); background: radial-gradient(45% 70% at 82% 45%, var(--prem-glow-rgba), transparent 100%), linear-gradient(135deg, var(--prem-deep), var(--prem-ground) 60%, var(--prem-top)); border-block: 1px solid var(--prem-edge); }
.prem-brand { position: relative; display: block; width: fit-content; margin: 0 0 1.25rem !important; line-height: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.prem-lead { font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem) !important; color: var(--prem-title) !important; max-width: 36ch; }
.prem-brand svg { width: min(20rem, 80vw); height: auto; display: block; }
.prem-tag { position: absolute; left: 0; right: 0; bottom: 3%; text-align: center; font-size: clamp(.7rem, .55rem + .5vw, .875rem); line-height: 1; font-weight: 700; letter-spacing: .3em; padding-left: .3em; color: var(--prem-title); opacity: .92; }
.prem h3 { font-size: 1.125rem !important; margin: 0 0 1rem !important; }
.prem-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; margin-top: 2.5rem; }
.prem-rows { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; }
.prem-rows li { display: flex; gap: .9rem; align-items: flex-start; margin: 0; padding: 1rem 1.1rem; border-radius: 16px; background: var(--prem-top); border: 1px solid rgba(115,188,110,.28); }
.prem-rows .row-icon { background: var(--prem-ground); border-color: rgba(115,188,110,.35); color: var(--prem-leaf); }
.prem-rows h4 { margin: .1rem 0 .25rem; font-size: 1.0625rem; color: var(--prem-title); line-height: 1.3; }
.prem-rows p { margin: 0; color: var(--prem-body-on-top); font-size: .9875rem; }
.prem-free { align-self: start; padding: 1.4rem; border-radius: 16px; border: 1px solid var(--line); background: rgba(255,255,255,.04); }
.prem-free h3 { display: flex; gap: .5rem; align-items: center; color: var(--prem-leaf); }
.prem-free > p { margin: 0 0 1rem; color: var(--muted); font-size: .9375rem; }
.prem-free ul { list-style: none; margin: 0; padding: 0; }
.prem-free li { display: flex; gap: .6rem; align-items: flex-start; margin: 0; padding: .55rem 0; border-top: 1px solid var(--line); font-size: .9375rem; line-height: 1.45; }
.prem-free li .icon { flex: none; color: var(--prem-leaf); margin-top: .1rem; }
.prem-note { margin: 2rem 0 0 !important; color: var(--muted); font-size: .9375rem; }
.prem-chip { display: inline-flex; align-items: center; vertical-align: middle; margin-left: .4rem; padding: .15rem .6rem; min-height: 24px; border-radius: 999px; font-size: .75rem; font-weight: 700; letter-spacing: .02em; text-decoration: none; background: var(--prem-ground); color: var(--prem-leaf); border: 1px solid var(--prem-edge); }
.ov-card.fam-premium { background: linear-gradient(135deg, var(--prem-deep), var(--prem-ground) 60%, var(--prem-top)); color: var(--prem-title); border-color: var(--prem-edge); }
.ov-card.fam-premium .ov-icon { background: var(--prem-top); }
@media (min-width: 56rem) { .prem-split { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 2.5rem; } }
/* gizlilik bandı */
.promise { font-size: clamp(1.3rem, 1rem + 1vw, 1.75rem); line-height: 1.3; font-weight: 700; letter-spacing: -.015em; max-width: 34ch !important; margin: 0 0 2.5rem; text-wrap: balance; }
.pillars { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--line); }
.pillars li { margin: 0; padding: 1.25rem 0; border-bottom: 1px solid var(--line); }
.pillars h3 { display: flex; gap: .6rem; align-items: center; margin-bottom: .3rem !important; }
.pillars .icon { color: var(--link); flex: none; }
/* tur 6: güven bölümünün üst başlığı yaprak yeşili (bağlantı rengi, sayfada ölçülü) */
.trust-eyebrow { color: var(--link); }
.pillars p { margin: 0; color: var(--muted); font-size: .9375rem; }
.lang-note { color: var(--muted); font-size: .875rem; }
.section-link a { font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; }
/* ne değildir */
.not { list-style: none; margin: 2.5rem 0 0; padding: 0; }
.not li { font-size: clamp(1.15rem, 1rem + .7vw, 1.45rem); line-height: 1.4; color: var(--muted); padding: 1.1rem 0; margin: 0; border-top: 1px solid var(--line); max-width: 36em; }
.not li:last-child { border-bottom: 1px solid var(--line); }
.not strong { color: var(--text); font-weight: 700; }
/* SSS */
.faq { margin-top: 2rem; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq details p { margin: 0 0 1.1rem; color: var(--muted); font-size: .9875rem; }
/* kapanış */
.close-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: center; }
main.landing .close-split h2 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.2rem); line-height: 1.06; letter-spacing: -.035em; }
.close-split .cta { margin-top: 1.75rem; }
.porty-closing { width: 11rem; justify-self: center; }
/* beliriş — yalnız JS varken ve hareket isteniyorsa (boot.js → anim sınıfı);
   betik hiç çalışmazsa 4 sn'de görünür (failsafe). */
@keyframes failsafe { to { opacity: 1; transform: none; } }
@keyframes blob { from { border-radius: 58% 42% 55% 45% / 48% 60% 40% 52%; transform: rotate(0); } to { border-radius: 42% 58% 45% 55% / 58% 42% 60% 40%; transform: rotate(8deg); } }
@keyframes drift { from { transform: translate3d(-50%, 0, 0) scale(1); } to { transform: translate3d(calc(-50% + 3rem), 4rem, 0) scale(1.16); } }
.anim .reveal { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity .85s var(--ease), transform .85s var(--ease); animation: failsafe 0s 4s forwards; }
.anim .reveal.in { opacity: 1; transform: none; animation: none; }
.anim .stagger > .reveal:nth-child(2) { transition-delay: 70ms; }
.anim .stagger > .reveal:nth-child(3) { transition-delay: 140ms; }
.anim .stagger > .reveal:nth-child(4) { transition-delay: 210ms; }
.anim .stagger > .reveal:nth-child(5) { transition-delay: 280ms; }
.anim .stagger > .reveal:nth-child(6) { transition-delay: 350ms; }
.anim .hero-shot::before { animation: blob 18s ease-in-out infinite alternate; }
.anim .hero-shot::after { animation: blob 22s ease-in-out infinite alternate-reverse; }
.anim .glow { animation: drift 28s ease-in-out infinite alternate; }
.anim .screens > * { transition: opacity .9s var(--ease); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .reveal { opacity: 1 !important; transform: none !important; } .glow { display: none; } }
/* sayfalar arası geçiş — kelime markası yerinde kalır */
@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }
.brand { view-transition-name: brand; }
@media (max-width: 640px) {
  main.landing section { padding: 4rem 0; }
  main.landing section.tinted { padding: 4rem 0; }
  .hero { min-height: 0; display: block; padding: 1.5rem 0 3rem !important; }
  .hero .lede { font-size: 1.05rem; max-width: 34ch; }
  .stores { width: 100%; }
  .store { flex: 1 1 100%; justify-content: center; padding: 0 .9rem; min-width: 0; min-height: 52px; }
  .hero-porty { width: 7.5rem; left: 0; }
  .greeting { max-width: 9rem; font-size: .8125rem; }
}
@media (min-width: 640px) {
  main.legal article { padding: 36px 40px; }
  .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2.5rem; }
}
@media (min-width: 52rem) {
  .moment { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); padding: 1.6rem 0; }
  .src-groups { grid-template-columns: 1fr 1fr; }
  .src-groups > :first-child { grid-column: 1 / -1; }
  .src-groups > :first-child .src-list { columns: 2; column-gap: 32px; }
}
@media (min-width: 56rem) {
  .split { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 4rem; }
  .device { width: 18.5rem; }
  .hero-porty { left: -2.5rem; bottom: 2rem; width: 10.5rem; }
  .close-split { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 4rem; }
  .porty-closing { width: 13rem; }
}
@media print { .band, header.site, nav.toc, footer.site, .hero-shot, .glow, .shots { display: none; } main.legal article { padding: 0; box-shadow: none; } body { background: #fff; color: #000; } .reveal { opacity: 1 !important; transform: none !important; } }