/* ============================================================
   Wowstage — Landing
   getkalder.com tarzi: beyaz/kirik-beyaz zemin, derin orman-yesili
   basliklar, lime accent, Albert Sans + Fragment Mono, dairesel-ok
   pill butonlar, acik-gri ikon cipleri, ortalanmis acik footer.
   ============================================================ */

:root {
  --bg: #FFFFFF;
  --bg-alt: #F7F4F0;
  --line: #E8E3DC;

  --ink: #17244F;          /* derin orman-yesili — basliklar */
  --green-dark: #17244F;   /* cok koyu yesil — pill butonlar */
  --green: #D4835F;        /* parlak yesil — sayilar, link, eyebrow */
  --green-soft: #FBF3EE;   /* cok acik yesil zemin */
  --lime: #F2CBB1;         /* pastel lime — highlight/ok */
  --lime-bright: #E29B72;  /* parlak lime — grafik dolgu */
  --muted: #4F505A;        /* govde metni — getkalder rgba(48,49,61,.85) beyaz uzeri */
  --muted-2: #9A9AA2;

  --maxw: 1320px;         /* getkalder icerik genisligi */
  --radius-sm: 12px;
  --radius: 16px;
  --radius-lg: 24px;
  --shadow-sm: 0 1px 3px rgba(23, 36, 79, .05);
  --shadow: 0 20px 50px -22px rgba(23, 36, 79, .22);
  --shadow-lg: 0 50px 100px -40px rgba(23, 36, 79, .35);

  --font: "Albert Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", system-ui, "Segoe UI", Roboto, Helvetica, sans-serif;
  --mono: "Fragment Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --num: "Manrope", "Albert Sans", system-ui, sans-serif;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  letter-spacing: -0.01em;       /* getkalder ~-0.2px sikilastirma */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Govde/prose metni: getkalder = SF Pro Text (sistem fontu), Light 300, LH 1.7 */
.hero__sub, .section__lead, .step p, .fcard p, .ticklist li, .faq__item p, .footer__tag {
  font-family: var(--body);
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: -0.2px;
}
.hero__sub strong, .section__lead strong { font-weight: 600; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
strong, b { font-weight: 700; }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(20px, 4vw, 40px); }
.container--narrow { max-width: 820px; }

.skip-link { position: absolute; left: -999px; top: 8px; z-index: 200; background: var(--green-dark); color: #fff; padding: 10px 16px; border-radius: 10px; }
.skip-link:focus { left: 12px; }

/* ───────── Eyebrow / typography helpers ───────── */
.eyebrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: .76rem;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 18px;
}
.grad { color: var(--green); }

/* ───────── Buttons (getkalder dark-green pill + lime circle arrow) ───────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: inherit; font-weight: 600; font-size: 1rem;
  padding: 12px 14px 12px 22px; border-radius: 100px; border: 1.5px solid transparent;
  cursor: pointer; transition: transform .2s var(--ease), background .2s, border-color .2s;
  white-space: nowrap; line-height: 1;
}
.btn--sm { font-size: .92rem; padding: 10px 12px 10px 18px; }
.btn--primary { background: var(--green-dark); color: #fff; }
.btn--primary::after {
  content: "\2192"; display: inline-grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--lime); color: var(--green-dark);
  font-size: 1rem; font-weight: 700; transition: transform .2s var(--ease);
}
.btn--sm.btn--primary::after { width: 22px; height: 22px; font-size: .9rem; }
.btn--primary:hover { transform: translateY(-2px); background: #0F1834; }
.btn--primary:hover::after { transform: translateX(3px); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); padding: 12px 22px; }
.btn--ghost:hover { border-color: var(--ink); transform: translateY(-2px); }

/* ───────── Store badges ───────── */
.store-badge {
  position: relative; display: inline-flex; align-items: center; gap: 12px;
  background: var(--green-dark); color: #fff;
  padding: 12px 22px 12px 18px; border-radius: 14px;
  transition: transform .2s var(--ease), box-shadow .2s; box-shadow: var(--shadow-sm);
}
.store-badge:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.store-badge svg { flex: none; }
.store-badge__txt { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.store-badge__txt small { font-size: .68rem; opacity: .8; font-weight: 500; }
.store-badge__txt b { font-size: 1.04rem; font-weight: 700; }
.store-badge__soon {
  position: absolute; top: -9px; right: -8px; background: var(--lime); color: var(--green-dark);
  font-family: var(--mono); font-size: .6rem; font-weight: 400; letter-spacing: .06em;
  padding: 3px 8px; border-radius: 100px; text-transform: uppercase;
}
.store-badge--light { background: var(--bg-alt); color: var(--ink); border: 1px solid var(--line); }
.store-badge--light .store-badge__txt small { opacity: .6; }

/* ───────── Nav ───────── */
.nav { position: sticky; top: 0; z-index: 100; transition: background .3s, box-shadow .3s, padding .3s; padding: 16px 0; }
.nav.is-scrolled { background: rgba(255, 255, 255, .82); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); box-shadow: 0 1px 0 var(--line); padding: 10px 0; }
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 1.3rem; letter-spacing: -.02em; text-transform: lowercase; }
.brand__logo { height: 52px; width: auto; display: block; mix-blend-mode: multiply; }
.brand__word { font-family: 'Lora', Georgia, serif; font-weight: 500; font-size: 1.75rem; letter-spacing: -.5px; color: #C97D54; }
.brand__word--light { color: #17244F; }
.footer__brand .brand__logo { height: 40px; }
.brand__mark { display: inline-flex; }
.brand--light { color: var(--ink); }
.nav__links { display: flex; gap: 32px; }
.nav__links a { font-weight: 500; font-size: .96rem; color: var(--ink); opacity: .82; transition: opacity .2s, color .2s; }
.nav__links a:hover { opacity: 1; color: var(--green); }
.nav__actions { display: flex; align-items: center; gap: 12px; }

/* Language switcher pill (nav right side) */
.nav__lang { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 32px; padding: 0 10px; border: 1px solid rgba(23, 36, 79, .18); border-radius: 100px; font-size: .78rem; font-weight: 700; letter-spacing: .04em; color: var(--ink); text-decoration: none; transition: border-color .2s, color .2s; }
.nav__lang:hover { border-color: var(--green); color: var(--green); }
.nav__actions { display: flex; align-items: center; gap: 10px; }

.nav__toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav__toggle span { width: 24px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .3s, opacity .3s; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav__mobile[hidden] { display: none; }
.nav__mobile { display: flex; flex-direction: column; gap: 6px; padding: 14px clamp(20px, 5vw, 48px) 22px; background: rgba(255, 255, 255, .97); backdrop-filter: blur(14px); border-top: 1px solid var(--line); }
.nav__mobile a { padding: 12px 4px; font-weight: 500; border-bottom: 1px solid var(--line); }
.nav__mobile a:last-child { border: 0; margin-top: 8px; }

/* ───────── Hero (getkalder kompozisyonu) ───────── */
.hero { position: relative; padding: clamp(36px, 5vw, 80px) 0 clamp(56px, 8vw, 104px); overflow: hidden; }
.hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 4vw, 52px); align-items: center; }
/* Editoryal dev tipografi: solid navy + terracotta vurgu kelime (iki-ton) */
.hero__title {
  font-size: clamp(2.3rem, 4.4vw, 3.5rem); font-weight: 700; line-height: 1.06; letter-spacing: -.04em; margin-bottom: 24px; color: var(--ink);
  text-wrap: balance;
}
.hero__title-em { color: var(--green); white-space: nowrap; }
.hero__sub { font-size: 1.0625rem; line-height: 1.7; color: var(--muted); max-width: 31em; margin-bottom: 32px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* Numaralı interaktif özellik rail'i (floating chip'lerin yerine) */
.hero__rail { display: grid; margin-top: 36px; max-width: 440px; }
.hero__feat { position: relative; display: flex; align-items: center; gap: 15px; width: 100%; text-align: left; font: inherit; cursor: pointer; background: transparent; border: 0; border-top: 1px solid var(--line); padding: 15px 8px; color: var(--ink); transition: padding-left .28s var(--ease); }
.hero__feat:last-child { border-bottom: 1px solid var(--line); }
.hero__feat::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%) scaleY(0); width: 3px; height: 62%; background: var(--green); border-radius: 3px; transition: transform .28s var(--ease); }
.hero__feat.is-active::before { transform: translateY(-50%) scaleY(1); }
.hero__feat.is-active, .hero__feat:hover { padding-left: 16px; }
.hero__feat-no { font-family: var(--num); font-size: .8rem; font-weight: 800; color: var(--muted-2); width: 24px; flex: none; transition: color .28s; }
.hero__feat-tx { display: flex; flex-direction: column; line-height: 1.25; }
.hero__feat-tx b { font-size: 1.04rem; font-weight: 700; letter-spacing: -.01em; transition: color .28s; }
.hero__feat-tx small { font-family: var(--body); font-weight: 300; font-size: .85rem; color: var(--muted); }
.hero__feat.is-active .hero__feat-no, .hero__feat.is-active .hero__feat-tx b { color: var(--green); }
.hero__feat:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 8px; }

/* Stage: telefon + eşmerkezli halkalar + yüzen kartlar */
/* Stage = sağ kolonun TAMAMI (getkalder'ın bounded section'ı) —
   çeyrekler böylece kolon kenarlarına kadar uzanan gerçek pasta dilimleri olur */
.hero__stage { position: relative; width: 100%; align-self: stretch; min-height: 640px; display: grid; place-items: center; }
/* getkalder konsantrik halkalar + arti-cizgiler KALDIRILDI (2026-07-29 ozgun tasarim):
   backdrop = ambient orb'lar (.hero::before/after) + telefon isik halesi (.hero__stage::before). */

/* Telefon ICI = gercek Wowstage app tasarimi (navy/terracotta/bej — app_theme.dart) */
/* 292px on every screen, narrower only when the screen itself is (2026-10-16): the mock's text and icons
   are fixed sizes, so the old 238px phone on mobile squeezed the same content into less room */
.phone {
  --app-navy: #17244F; --app-accent: #D4835F; --app-bg: #F2F0ED;
  --app-g800: #3D3A36; --app-g600: #7A7670; --app-g400: #ABA8A3; --app-g100: #F0EEEB; --app-line: #E2E0DC; --app-attbg: #FBF3EE;
  position: relative; z-index: 2; width: min(292px, 100%); aspect-ratio: 292 / 600; background: #fff; border-radius: 36px; overflow: hidden; box-shadow: 0 50px 110px -40px rgba(23, 36, 79, .55), 0 16px 40px -22px rgba(212, 131, 95, .28), 0 0 0 1px rgba(23, 36, 79, .05);
  transform: perspective(1800px) rotateY(-14deg) rotateX(4deg) rotateZ(-1.5deg); transition: transform .55s var(--ease);
}
.hero__stage:hover .phone { transform: perspective(1800px) rotateY(-6deg) rotateX(2deg) rotateZ(-.5deg); }
@media (prefers-reduced-motion: reduce) { .phone { transform: none; } }
.phone__screen { width: 100%; height: 100%; background: var(--app-bg); position: relative; overflow: hidden; }
.appbar { display: flex; gap: 16px; padding: 2px 4px 11px; border-bottom: 1px solid var(--line); }
.appbar__tab { font-size: .82rem; font-weight: 700; color: var(--muted-2); position: relative; }
.appbar__tab.is-on { color: var(--ink); }
.appbar__tab.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -11px; height: 2px; background: var(--green); border-radius: 2px; }
.appchips { display: flex; gap: 6px; }
.appchips span { font-size: .64rem; font-weight: 600; color: var(--muted); padding: 4px 11px; border-radius: 100px; background: var(--bg-alt); }
.appchips span.is-on { background: var(--green-soft); color: var(--green-dark); }
/* ── Gercek app ekranlari (ekran goruntulerine birebir) ── */
.jtop2 { display: flex; align-items: center; gap: 6px; padding: 2px 2px 8px; }
/* direct child only — the logo; icon imgs inside .jico spans must not inherit
   margin-right:auto (it shoved the vs icon to the circle's left edge) */
.jtop2 > img { height: 28px; width: auto; mix-blend-mode: multiply; margin-right: auto; }
.jico { position: relative; width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(23, 36, 79, .08); display: grid; place-items: center; color: var(--app-navy); }
.jico svg { width: 14px; height: 14px; }
/* real app asset (assets/images/vs.png), trimmed to its content box */
.jico--vs img { height: 15px; width: auto; display: block; }
.jico--bell em { position: absolute; top: -3px; right: -4px; background: #C97D54; color: #fff; font-style: normal; font-size: .5rem; font-weight: 700; padding: 1px 4px; border-radius: 100px; }
.jscope { display: flex; align-items: center; gap: 6px; padding-bottom: 8px; }
.jscope__tabs { flex: 1; display: flex; align-items: center; gap: 2px; background: #fff; border-radius: 100px; padding: 3px; box-shadow: 0 1px 3px rgba(23, 36, 79, .08); }
.jscope__tab { flex: 1; text-align: center; font-size: .55rem; font-weight: 600; color: var(--app-navy); padding: 5px 3px; border-radius: 100px; white-space: nowrap; }
.jscope__tab.is-active { background: var(--app-navy); color: #fff; font-weight: 700; }
.jscope__trend { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(23, 36, 79, .08); display: grid; place-items: center; color: var(--app-navy); }
.jscope__trend svg { width: 13px; height: 13px; }
.jstory { display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 14px; padding: 7px 9px; margin-bottom: 8px; box-shadow: 0 1px 3px rgba(23, 36, 79, .06); }
.jstory__av { position: relative; width: 30px; height: 30px; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--line); }
.jstory__plus { position: absolute; bottom: -2px; right: -2px; width: 13px; height: 13px; border-radius: 50%; background: var(--app-accent); color: #fff; font-style: normal; font-size: .6rem; font-weight: 700; line-height: 1; display: grid; place-items: center; border: 1.5px solid #fff; }
.jstory__txt { flex: 1; display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.jstory__txt b { font-size: .6rem; font-weight: 700; color: var(--app-navy); }
.jstory__txt small { font-size: .5rem; color: var(--muted-2); }
.jstory__btn { flex: none; background: var(--app-accent); color: #fff; font-size: .55rem; font-weight: 700; padding: 5px 12px; border-radius: 100px; }
.jchips { display: flex; gap: 6px; padding-bottom: 8px; }
.jchips span { font-size: .6rem; font-weight: 600; color: var(--app-g600); padding: 5px 12px; border-radius: 100px; background: #fff; box-shadow: 0 1px 3px rgba(23, 36, 79, .06); }
.jchips .is-on { background: var(--app-navy); color: #fff; }

/* Alt tab bar — gercek app: duz beyaz, kenardan kenara, ince ust cizgi */
.jtabbar { margin-top: auto; display: flex; justify-content: space-around; align-items: center; background: #fff; margin-inline: -13px; margin-bottom: -16px; padding: 9px 4px 13px; border-top: 1px solid #ECEAE6; }
.jtab { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: .48rem; font-weight: 600; color: var(--app-g400); }
.jtab svg { width: 16px; height: 16px; }
.jtab--on { color: var(--app-accent); }
.jtab__sq { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 7px; background: var(--app-accent); color: #fff; }
.jtab__sq svg { width: 12px; height: 12px; }
.jtab--on2 { color: var(--app-navy); }
.jfab { position: absolute; right: 16px; bottom: 58px; z-index: 3; width: 38px; height: 38px; border-radius: 13px; background: var(--app-navy); color: #fff; font-size: 1.3rem; font-weight: 500; display: grid; place-items: center; box-shadow: 0 8px 18px -6px rgba(23, 36, 79, .5); }

/* Cift katmanli skor cemberi (ince track + kalin yay + rozet) */
/* ScoreCircle birebir (gercek app): DIS ince acik-ton yay (r20, cevre 125.66)
   + IC kalin tam-renk skor yayi (r15, cevre 94.25); track'ler cok soluk;
   rozet sayinin hemen altinda. */
/* Referanstan PIKSEL-OLCULMUS geometri (viewBox=150 gercek birim):
   dis r=58 sw=6.5 (%34 ton) — cevre 364.42 · ic r=42 sw=6.5 (tam renk) — cevre 263.89 */
.jr2 { position: relative; width: 64px; height: 64px; display: grid; place-items: center; }
.jr2 svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.jr2 svg circle { fill: none; }
.jr2__t { stroke: color-mix(in srgb, var(--c) 7%, #fff); stroke-width: 6.5; }
.jr2__avg { stroke: color-mix(in srgb, var(--c) 34%, #fff); stroke-width: 6.5; stroke-linecap: round;
  stroke-dasharray: 364.42; stroke-dashoffset: calc(364.42 * (1 - var(--p2) / 100)); }
.jr2__t2 { stroke: color-mix(in srgb, var(--c) 8%, #fff); stroke-width: 6.5; }
.jr2__a { stroke: var(--c); stroke-width: 6.5; stroke-linecap: round;
  stroke-dasharray: 263.89; stroke-dashoffset: calc(263.89 * (1 - var(--p) / 100)); }
/* Oranlar referanstan: sayi/halka=0.22, rozet/halka=0.14, sayi merkez -%9, rozet +%21 */
.jr2 b { font-family: var(--num); font-weight: 800; font-size: .84rem; color: #3D3A36; margin-top: -9px; }
.jr2 i { position: absolute; top: 56%; left: 50%; transform: translateX(-50%); width: 11px; height: 11px; border-radius: 50%; font-style: normal; font-size: .42rem; font-weight: 800; display: grid; place-items: center; }
/* Like the app's score ring (score_circle.dart, 2026-10-17): a check at or above the average, nothing below it,
   and then the number sits in the middle. Muted tone must match the app's C.success. */
.jr2__ok { background: #6F9A7A; color: #fff; }
.jr2--plain b { margin-top: 0; }
/* The app writes the category above each ring (score_circle.dart: 11 px, weight 600, the category colour at 85%,
   6 px above the ring), scaled like the ring (76 to 64 px). */
.jscore { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.jscore__label { font-size: .58rem; font-weight: 600; line-height: 1.2; color: color-mix(in srgb, var(--c) 85%, #fff); }

/* Siralama foto grid'i (ranking_screen.dart birebir) */
.jrgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.jrc { background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 2px 8px rgba(23, 36, 79, .07); }
.jrc__ph { position: relative; aspect-ratio: 1 / 1.05; }
.jrc__rank { position: absolute; top: 7px; left: 7px; font-size: .56rem; font-weight: 700; color: #fff; padding: 2px 8px; border-radius: 100px; background: rgba(23, 36, 79, .6); }
.jrc__rank--top { background: var(--app-accent); }
.jrc__score { position: absolute; top: 7px; right: 7px; font-family: var(--num); font-size: .56rem; font-weight: 700; color: var(--app-navy); padding: 2px 7px; border-radius: 100px; background: rgba(255, 255, 255, .92); }
.jrc__score--top { color: var(--app-accent); }
.jrc__u { display: flex; align-items: center; gap: 5px; padding: 7px 9px; font-size: .58rem; font-weight: 600; color: var(--app-navy); }
.jav2 { width: 17px; height: 17px; border-radius: 50%; background: var(--app-bg); color: var(--app-navy); font-size: .48rem; font-weight: 700; display: grid; place-items: center; flex: none; }

/* Studyo / Benzer urunler sheet */
.pscreen--sheet { border-radius: 22px 22px 0 0; }
.jsheet__head { display: flex; align-items: center; gap: 8px; padding: 2px 2px 4px; }
.jsheet__spark { width: 28px; height: 28px; border-radius: 50%; background: var(--app-attbg); color: var(--app-accent); display: grid; place-items: center; font-size: .8rem; }
.jsheet__head b { flex: 1; font-size: .95rem; font-weight: 700; color: var(--app-navy); }
.jsheet__x { color: var(--app-g600); font-size: .8rem; }
.jseg { display: flex; background: #EBE9E5; border-radius: 100px; padding: 3px; }
.jseg span { flex: 1; text-align: center; font-size: .66rem; font-weight: 600; color: var(--app-g600); padding: 7px 0; border-radius: 100px; }
.jseg .is-on { background: #fff; color: var(--app-navy); box-shadow: 0 1px 4px rgba(23, 36, 79, .1); }
.jgrid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.jopt { background: #fff; border-radius: 16px; padding: 12px 8px 10px; display: flex; flex-direction: column; align-items: center; gap: 7px; box-shadow: 0 1px 5px rgba(23, 36, 79, .05); }
.jopt img { height: 46px; width: auto; mix-blend-mode: multiply; }
.jopt b { font-size: .62rem; font-weight: 600; color: var(--app-navy); }
.jgrid2--photos > div { aspect-ratio: 1; border-radius: 12px; }
.jhist { display: flex; align-items: center; justify-content: center; gap: 4px; background: #fff; color: var(--app-g800); font-size: .5rem; font-weight: 600; padding: 7px; border-radius: 12px; box-shadow: 0 1px 5px rgba(23, 36, 79, .07); }
.jhist svg { flex: none; width: 10px; height: 10px; color: var(--app-g600); }
.jhist--navy { background: var(--app-navy); color: #fff; }

/* Studyo: sagdan kayan panel + solda lavanta-golgeli feed */
.pscreen.pscreen--panelbg { padding: 0; }
.jdim { position: absolute; inset: 0; background: var(--app-bg); }
.jdim__veil { position: absolute; inset: 0; background: rgba(147, 152, 180, .55); }
.jpanel { position: absolute; top: 14px; bottom: 12px; right: 5px; width: 82%;
  background: #F2F0ED; border-radius: 20px; padding: 12px 11px 10px;
  display: flex; flex-direction: column; gap: 10px; line-height: 1.25; text-align: left;
  box-shadow: -14px 0 34px rgba(23, 36, 79, .28); }
/* Face options (2026-10-16): the app's tiles (0.84 tall, icon ~62% of the width, label under it) and its
   bottom buttons, the disabled Convert above Edit History with the free space above both. The panel's
   1.25 line height and tighter header spacing keep it all inside the smallest phone (238px). */
.jgrid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; }
.jgrid3 .jopt { aspect-ratio: .84; justify-content: flex-start; padding: 12% 4px 0; gap: 5px; border-radius: 13px; }
.jgrid3 .jopt img { width: 71%; height: auto; }
.jgrid3 .jopt b { font-size: .5rem; color: var(--app-g800); text-align: center; line-height: 1.15; }
.jfoot { margin-top: auto; display: flex; flex-direction: column; gap: 6px; }
.jconvert { text-align: center; background: var(--app-g100); color: var(--app-g400); font-size: .56rem; font-weight: 700; padding: 7px; border-radius: 12px; }
/* Genel Guzellestirme (2026-10-16): the app's full-width card above the face options and its divider */
.jglow { display: flex; align-items: center; gap: 7px; background: #fff; border: 1px solid var(--app-line); border-radius: 13px; padding: 6px 8px 6px 6px; box-shadow: 0 1px 5px rgba(23, 36, 79, .05); }
.jglow__tile { flex: none; width: 32px; height: 32px; border-radius: 9px; background: var(--app-attbg); display: grid; place-items: center; }
.jglow__tile img { height: 28px; width: auto; }
.jglow__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.jglow__txt b { font-size: .56rem; font-weight: 600; color: var(--app-g800); }
.jglow__txt small { font-size: .45rem; line-height: 1.25; color: var(--app-g600); }
.jglow__mark { flex: none; width: 12px; height: 12px; border-radius: 50%; border: 1.3px solid var(--app-g400); }
.jor { display: flex; align-items: center; gap: 6px; font-size: .47rem; font-weight: 600; color: var(--app-g600); }
.jor::before, .jor::after { content: ""; flex: 1; height: 1px; background: var(--app-line); }

/* Gercek ekran goruntusu (tam ekran; .pscreen taban padding'ini ezmek icin cift sinif) */
.pscreen.pscreen--shot { padding: 0; }
.pshot { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; border-radius: 34px; }

/* Kiyafet Analizi ekrani (segment overlay + navy sonuc paneli)
   Koyu zemin + yuvarlak koseli kartlar — telefonun radius'uyla uyumlu (gercek modal) */
.pscreen.pscreen--seg { padding: 10px 8px 8px; gap: 8px; background: #171A22; }
.jseg__photo { border-radius: 20px; overflow: hidden; }
.jseg__panel { border-radius: 20px; }
.mock-tea { background: radial-gradient(110% 80% at 28% 12%, rgba(255, 255, 255, .4), transparent 50%), linear-gradient(155deg, #A9C79B 0%, #7CA875 45%, #52805A 100%); }
.jseg__photo { position: relative; flex: 1; min-height: 0; }
.jseg__head { position: absolute; top: 0; left: 0; right: 0; z-index: 1; display: flex; align-items: center; gap: 8px; padding: 12px; background: linear-gradient(rgba(10, 14, 30, .55), transparent); color: #fff; font-size: .74rem; font-weight: 700; }
.jseg__x { width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, .2); display: grid; place-items: center; font-size: .58rem; flex: none; }
.jseg__count { margin-left: auto; background: rgba(255, 255, 255, .22); padding: 3px 9px; border-radius: 100px; font-size: .52rem; font-weight: 600; }
/* Real photo replaced the stylized figure (2026-07-30); tags sit on garments */
.jsegtag { position: absolute; transform: translate(-50%, -50%); font-size: .56rem; font-weight: 700; color: #fff; padding: 4px 10px; border-radius: 8px; white-space: nowrap; box-shadow: 0 2px 8px rgba(10, 14, 30, .28); }
.jsegtag--blue { background: #7C8CE4; }
.jsegtag--red { background: #D9705E; }
.jsegtag--amber { background: #D9A13E; }
.jsegtag--teal { background: #4CA88A; }
.jseg__panel { background: #1B2B57; padding: 12px 13px 14px; display: flex; flex-direction: column; gap: 10px; }
.jseg__title { color: #fff; font-size: .6rem; font-weight: 700; }
.jseg__title i { font-family: Georgia, "Times New Roman", serif; font-style: italic; color: var(--app-accent); font-size: .72rem; }
.jseg__title span { float: right; color: rgba(255, 255, 255, .55); font-weight: 500; font-size: .54rem; }
.jseg__res { width: 42%; aspect-ratio: 3 / 4; border-radius: 12px; display: flex; flex-direction: column; justify-content: flex-end; padding: 8px 9px; color: #fff;
  /* readable username over the real photo */
  box-shadow: inset 0 -38px 26px -12px rgba(10, 14, 30, .55); }
.jseg__res b { font-size: .56rem; font-weight: 700; }
.jseg__res small { font-size: .5rem; opacity: .85; }
.jseg__chips { display: flex; gap: 8px; }
.jseg__c { font-size: .52rem; font-weight: 700; padding: 5px 9px; border-radius: 100px; white-space: nowrap; }
.jseg__c--b { color: #A8B4F5; border: 1.5px solid #7C8CE4; }
.jseg__c--r { color: #fff; background: rgba(255, 255, 255, .12); }

.jtop { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 8px; }
.jtop img { height: 22px; width: auto; mix-blend-mode: multiply; }
.jtop__ic { font-size: .9rem; color: var(--app-navy); }
.jcard { background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 2px 10px rgba(23, 36, 79, .07); }
.jcard__photo { position: relative; aspect-ratio: 4 / 3.9; }
.jcard__photo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 64px; background: linear-gradient(to bottom, transparent, rgba(23, 36, 79, .5)); }
/* Gercek app cipleri: navy .55 zemin, beyaz Material ikon, ust uste iki cip */
.jchips2 { position: absolute; top: 9px; right: 9px; z-index: 1; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.jchip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 11px; border-radius: 100px; background: rgba(23, 36, 79, .55); border: 1px solid rgba(255, 255, 255, .14); color: #fff; font-size: .62rem; font-weight: 600; }
.jchip svg { width: 12px; height: 12px; flex: none; }
.jcard__user { position: absolute; left: 11px; right: 11px; bottom: 9px; z-index: 1; display: flex; align-items: center; gap: 7px; }
.jav { width: 26px; height: 26px; border-radius: 50%; background: #fff; color: var(--app-navy); font-size: .6rem; font-weight: 700; display: grid; place-items: center; }
.jcard__user b { flex: 1; color: #fff; font-size: .72rem; font-weight: 600; }
.jdots { color: rgba(255, 255, 255, .7); font-size: .8rem; }
.jcard__body { padding: 11px 11px 10px; display: flex; flex-direction: column; gap: 10px; }
.jvotes { display: flex; gap: 6px; }
.jv { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 3px; height: 30px; border-radius: 100px; background: #fff; border: 1.5px solid var(--app-line); color: var(--app-g600); font-size: .58rem; font-weight: 600; }
.jv--on { background: color-mix(in srgb, var(--c) 12%, #fff); border-color: color-mix(in srgb, var(--c) 40%, #fff); color: var(--c); }
.jscores { display: flex; justify-content: space-evenly; }
.jring { width: 46px; height: 46px; border-radius: 50%; border: 4px solid var(--c); display: grid; place-items: center; background: #fff; box-shadow: inset 0 0 0 2px #F0EEEB00; }
.jring b { font-family: var(--num); font-weight: 800; font-size: .86rem; color: var(--app-navy); }
.jcap { font-size: .62rem; color: var(--app-g600); }
.jcap b { color: var(--app-navy); font-weight: 700; }
.jmeta { display: flex; align-items: center; gap: 10px; font-size: .56rem; color: var(--app-g400); }
.jmeta__c { color: var(--app-g400); }
.jbook { color: var(--app-g400); font-size: .72rem; }

.pcard { background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 2px 10px rgba(23, 36, 79, .07); }
.pcard__photo { position: relative; aspect-ratio: 3 / 4; }
.pcard__rank { position: absolute; left: 10px; top: 10px; background: rgba(23, 36, 79, .75); color: #fff; font-size: .66rem; font-weight: 600; padding: 4px 10px; border-radius: 100px; }
.pcard__scores { display: flex; justify-content: space-around; padding: 12px 6px 4px; }
.pcard__votes { display: flex; gap: 5px; padding: 4px 10px 12px; }
.vote { flex: 1; font-family: inherit; font-size: .58rem; font-weight: 700; padding: 7px 3px; border-radius: 100px; border: 1.5px solid var(--line); background: #fff; color: var(--muted); }
.vote--on { background: var(--green-soft); border-color: var(--green); color: var(--green); }
/* Telefon ici siralama listesi */
.plist { display: flex; flex-direction: column; gap: 3px; }
.prow { display: flex; align-items: center; gap: 9px; padding: 7px 7px; border-radius: 12px; }
.prow { background: #fff; box-shadow: 0 1px 4px rgba(23, 36, 79, .05); }
.prow--lead { background: var(--app-attbg); }
.prow__rank { width: 15px; text-align: center; flex: none; font-family: var(--num); font-weight: 800; font-size: .74rem; color: var(--app-g400); }
.prow--lead .prow__rank { color: var(--app-accent); }
.prow__av { width: 34px; height: 34px; border-radius: 50%; flex: none; }
.prow__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.prow__meta b { font-size: .78rem; font-weight: 700; color: var(--app-navy); }
.prow__meta small { font-size: .58rem; color: var(--app-g600); }
.prow__score { flex: none; font-family: var(--num); font-weight: 800; font-size: .92rem; color: var(--app-navy); }
.prow--lead .prow__score { color: var(--app-accent); }

/* Yüzen kartlar */
.fchip { position: absolute; z-index: 3; display: flex; align-items: center; gap: 11px; background: rgba(255, 255, 255, .72); backdrop-filter: blur(16px) saturate(165%); -webkit-backdrop-filter: blur(16px) saturate(165%); border-radius: 16px; padding: 12px 15px; box-shadow: 0 24px 52px -20px rgba(23, 36, 79, .3), inset 0 1px 0 rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .6); animation: float 6s var(--ease) infinite; }
.fchip__txt { font-size: .82rem; font-weight: 700; line-height: 1.2; color: var(--ink); white-space: nowrap; }
.fchip__ic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--green-soft); color: var(--green); }
.fchip__ic svg { width: 18px; height: 18px; fill: currentColor; }
.fchip--green { background: #D4835F; border-color: transparent; box-shadow: 0 20px 44px -16px rgba(23, 36, 79, .55); }
.fchip--green .fchip__txt { color: #fff; }
.fchip--green .fchip__ic { background: #fff; color: #C06B43; }
.fchip--tl { top: 6%; left: -5%; }
.fchip--tr { top: 13%; right: -9%; animation-delay: -1.5s; }
.fchip--bl { bottom: 19%; left: -8%; animation-delay: -3s; }
.fchip--br { bottom: 11%; right: -7%; animation-delay: -4.5s; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* Yüzen özellik chip'leri artık INTERAKTİF tetikleyici (getkalder quad/qtint KALDIRILDI).
   Hover/focus/tap -> JS setActive -> telefon o ekranı gösterir + chip .is-active olur. */
button.fchip { font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fchip:hover { z-index: 4; }
.fchip:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 16px; }
.fchip.is-active { animation: none; background: #D4835F; border-color: transparent; box-shadow: 0 24px 48px -16px rgba(23, 36, 79, .6); transform: translateY(-3px) scale(1.04); }
.fchip.is-active .fchip__txt { color: #fff; }
.fchip.is-active .fchip__ic { background: #fff; color: #C06B43; }
.fchip.is-active { backdrop-filter: none; -webkit-backdrop-filter: none; }

/* ───────── Hero modern cila (2026-07-29): badge + ambient orb'lar + telefon halesi ───────── */
.hero__badge {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: .72rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); background: rgba(255, 255, 255, .66);
  backdrop-filter: blur(12px) saturate(150%); -webkit-backdrop-filter: blur(12px) saturate(150%);
  border: 1px solid var(--line); padding: 8px 15px 8px 13px; border-radius: 100px; margin-bottom: 22px;
  box-shadow: var(--shadow-sm);
}
.hero__badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(212, 131, 95, .5); animation: pulse-dot 2.4s var(--ease) infinite; }
@keyframes pulse-dot { 0% { box-shadow: 0 0 0 0 rgba(212, 131, 95, .45); } 70% { box-shadow: 0 0 0 8px rgba(212, 131, 95, 0); } 100% { box-shadow: 0 0 0 0 rgba(212, 131, 95, 0); } }

.hero::before { content: ""; position: absolute; z-index: 0; top: -14%; right: -10%; width: min(56vw, 760px); height: min(56vw, 760px); background: radial-gradient(circle at 58% 42%, rgba(212, 131, 95, .18), rgba(212, 131, 95, 0) 62%); filter: blur(14px); pointer-events: none; }
.hero::after { content: ""; position: absolute; z-index: 0; bottom: -24%; left: -14%; width: min(42vw, 600px); height: min(42vw, 600px); background: radial-gradient(circle, rgba(23, 36, 79, .07), rgba(23, 36, 79, 0) 60%); filter: blur(26px); pointer-events: none; }
.hero__stage::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(212, 131, 95, .20), rgba(212, 131, 95, 0) 66%); filter: blur(24px); z-index: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .hero__badge i { animation: none; }
}

/* Telefon ekran geçişleri (hover'da değişen görsel) */
.pscreen { position: absolute; inset: 0; padding: 16px 13px; display: flex; flex-direction: column; gap: 10px; opacity: 0; transform: scale(.985); transition: opacity .4s var(--ease), transform .4s var(--ease); pointer-events: none; }
.hero__stage[data-active="tl"] .pscreen--tl,
.hero__stage[data-active="tr"] .pscreen--tr,
.hero__stage[data-active="bl"] .pscreen--bl,
.hero__stage[data-active="br"] .pscreen--br { opacity: 1; transform: none; }

/* Ekran-içi bileşenler */
.ptabs { display: flex; gap: 16px; padding: 2px 4px 11px; border-bottom: 1px solid var(--app-line); }
.ptabs span { font-size: .82rem; font-weight: 700; color: var(--app-g400); position: relative; }
.ptabs .is-on { color: var(--app-navy); }
.ptabs .is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -11px; height: 2px; background: var(--app-navy); border-radius: 2px; }
.pchips { display: flex; gap: 6px; }
.pchips span { font-size: .62rem; font-weight: 600; color: var(--app-g600); padding: 4px 11px; border-radius: 100px; background: #fff; border: 1px solid var(--app-line); }
.pchips .is-on { background: var(--app-navy); color: #fff; border-color: var(--app-navy); }
.pscores { display: flex; justify-content: space-around; padding: 10px 4px 4px; }
.psc { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.psc__ring { width: 50px; height: 50px; border-radius: 50%; border: 4px solid var(--c); display: grid; place-items: center; }
.psc__ring b { font-family: var(--num); font-weight: 800; font-size: 1rem; color: var(--app-navy); }
.psc i { font-style: normal; font-size: .58rem; font-weight: 600; color: var(--app-g600); }
.pvotes { display: flex; gap: 5px; }
.pv { flex: 1; text-align: center; font-size: .58rem; font-weight: 700; padding: 7px 3px; border-radius: 100px; border: 1.5px solid var(--app-line); color: var(--app-g600); background: #fff; }
.pv--on { background: var(--app-navy); border-color: var(--app-navy); color: #fff; }
.ba2 { display: flex; gap: 8px; }
.ba2c { flex: 1; aspect-ratio: 3 / 4; border-radius: 12px; display: grid; place-items: end center; padding-bottom: 8px; }
.ba2c span { background: rgba(255, 255, 255, .92); color: var(--app-navy); font-family: var(--mono); font-size: .56rem; padding: 3px 10px; border-radius: 100px; text-transform: uppercase; }
.pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pgrid > div { aspect-ratio: 1; border-radius: 10px; }
.pmatch { margin-top: auto; text-align: center; background: var(--app-navy); color: #fff; font-size: .66rem; font-weight: 600; padding: 8px; border-radius: 100px; }

/* ───────── Score circles ───────── */
.score { position: relative; display: grid; place-items: center; text-align: center; }
.score svg { width: 58px; height: 58px; transform: rotate(-90deg); }
.score .track { fill: none; stroke: #ECEFEA; stroke-width: 7; }
.score .ring { fill: none; stroke: var(--c); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 213.6; stroke-dashoffset: 213.6; transition: stroke-dashoffset 1.1s var(--ease); }
.score__num { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: var(--num); font-weight: 800; font-size: .98rem; color: var(--ink); }
.score__lbl { font-size: .64rem; font-weight: 600; color: var(--muted); margin-top: 4px; }

/* ───────── Logo/values strip ───────── */
.band { padding: 26px 0; border-block: 1px solid var(--line); background: var(--bg-alt); }
.band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 30px; text-align: center; }
.band__lead { font-family: var(--mono); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }
.band__cats { display: flex; flex-wrap: wrap; gap: 10px; }
.cat-pill { font-size: .9rem; font-weight: 600; padding: 8px 18px; border-radius: 100px; background: #fff; border: 1px solid var(--line); }
.cat-pill--beauty { color: var(--ink); }
.cat-pill--attract { color: var(--green); }
.cat-pill--style { color: var(--muted); }

/* ───────── Section ───────── */
.section { padding: clamp(60px, 8vw, 110px) 0; }
.section--alt { background: var(--bg-alt); }
.section__head { max-width: 740px; margin: 0 auto clamp(40px, 6vw, 60px); text-align: center; }
.section__title { font-size: clamp(1.95rem, 3.4vw, 2.625rem); font-weight: 600; letter-spacing: -.025em; line-height: 1.14; color: var(--ink); }
.section__lead { font-size: 1.0625rem; color: var(--muted); margin-top: 16px; }

/* ───────── İletişim bölümü ───────── */
.contact { text-align: center; }
.contact .eyebrow { margin-bottom: 14px; }
.contact__mail { margin-top: 28px; }

/* Fine print under the account-deletion steps */
.fineprint { max-width: 62em; margin: clamp(28px, 4vw, 44px) auto 0; font-size: .92rem; line-height: 1.7; color: var(--muted); }
.fineprint p + p { margin-top: 12px; }

/* ───────── Doküman popup (yasal belgeler) ───────── */
body.modal-open { overflow: hidden; }
.modal[hidden] { display: none; }
.modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; }
.modal__overlay { position: absolute; inset: 0; background: rgba(23, 36, 79, .5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: mfade .2s ease; }
.modal__dialog { position: relative; z-index: 1; width: min(720px, 100%); max-height: 86vh; display: flex; flex-direction: column; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; animation: mrise .28s var(--ease); }
.modal__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 26px; border-bottom: 1px solid var(--line); }
.modal__title { font-size: 1.3rem; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.modal__close { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg-alt); color: var(--ink); cursor: pointer; font-size: .9rem; display: grid; place-items: center; transition: background .2s; }
.modal__close:hover { background: var(--line); }
.modal__body { padding: 22px 26px 30px; overflow-y: auto; }
.modal__body h3 { font-size: 1.05rem; font-weight: 700; color: var(--ink); margin: 24px 0 8px; letter-spacing: -.01em; }
.modal__body h3:first-child { margin-top: 0; }
.modal__body h4 { font-size: .94rem; font-weight: 700; color: var(--ink); margin: 16px 0 6px; }
.modal__body p { font-family: var(--body); font-weight: 300; font-size: .95rem; line-height: 1.7; color: var(--muted); margin-bottom: 10px; }
.modal__body ul { margin: 0 0 14px; padding-left: 20px; }
.modal__body li { font-family: var(--body); font-weight: 300; font-size: .95rem; line-height: 1.6; color: var(--muted); margin-bottom: 5px; }
.modal__body strong { color: var(--ink); font-weight: 600; }
.footer__nav a[data-doc] { cursor: pointer; }
@keyframes mfade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mrise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .modal__overlay, .modal__dialog { animation: none; } }

/* ───────── Steps ───────── */
.steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.5vw, 24px); }
.step { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px 28px; transition: transform .25s var(--ease), box-shadow .25s; }
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.step__no { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--green-soft); color: var(--green-dark); font-weight: 800; font-size: 1.15rem; margin-bottom: 18px; }
.step h3 { font-size: 1.22rem; font-weight: 700; margin-bottom: 8px; letter-spacing: -.01em; }
.step p { color: var(--muted); font-size: .97rem; }

/* ───────── Split ───────── */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 76px); align-items: center; }
.split--rev .split__media { order: 2; }
.split__copy .ticklist { margin-top: 22px; }
.ticklist { list-style: none; display: grid; gap: 12px; }
.ticklist li { position: relative; padding-left: 32px; color: var(--muted); font-size: 1rem; }
.ticklist li::before { content: ""; position: absolute; left: 0; top: 2px; width: 21px; height: 21px; border-radius: 50%; background: var(--green-soft); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23D4835F'%3E%3Cpath d='m9 16.2-3.5-3.5L4 14.2 9 19l11-11-1.4-1.4z'/%3E%3C/svg%3E"); background-size: 15px; background-repeat: no-repeat; background-position: center; }
.ticklist li b { color: var(--ink); }

/* Calculator panel (getkalder ROI tarzi) */
.calc { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 40px); box-shadow: var(--shadow); }
.calc__row { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.calc__row:first-child { padding-top: 0; }
.calc__head { display: flex; align-items: baseline; justify-content: space-between; }
.calc__head span { font-weight: 600; color: var(--ink); }
.calc__head b { font-family: var(--num); font-weight: 800; font-size: 1.1rem; color: var(--green); }
.calc__bar { height: 8px; border-radius: 100px; background: #ECEFEA; overflow: hidden; }
.calc__bar i { display: block; height: 100%; border-radius: 100px; background: linear-gradient(90deg, var(--green) 0%, var(--lime-bright) 100%); width: 0; transition: width 1.1s var(--ease); }
.reveal.in .calc__bar i { width: var(--v); }
.calc__total { display: flex; align-items: center; justify-content: space-between; padding-top: 22px; }
.calc__total span { font-weight: 600; color: var(--muted); }
.calc__total strong { font-family: var(--num); font-size: 2.3rem; font-weight: 800; letter-spacing: -.02em; color: var(--green); }

/* ───────── Features grid (getkalder icon-chip tarzi) ───────── */
.features { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 22px); }
.fcard { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; transition: transform .25s var(--ease), box-shadow .25s, border-color .25s; }
.fcard:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--green); }
.fcard__icon { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--bg-alt); color: var(--green-dark); font-size: 1.35rem; margin-bottom: 18px; }
.fcard h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 7px; letter-spacing: -.01em; }
.fcard p { font-size: .93rem; color: var(--muted); }

/* ───────── Bento grid (getkalder duzeni: 1/3+2/3 ust, 3 esit alt) ───────── */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(14px, 2vw, 24px); }
.bcard { grid-column: span 2; background: var(--bg-alt); border-radius: 24px; padding: clamp(24px, 3vw, 40px) clamp(20px, 2.6vw, 36px); text-align: center; display: flex; flex-direction: column; }
.bento > .bcard:nth-child(1) { grid-column: span 2; }
.bento > .bcard:nth-child(2) { grid-column: span 4; }
.bcard h3 { font-size: clamp(1.15rem, 1.8vw, 1.5rem); font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.bcard p { margin: 10px auto 22px; max-width: 34em; }
.bvis { margin-top: auto; }

/* A: akis */
.bvis--flow { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.bflow__ph { width: 74px; aspect-ratio: 3/4; border-radius: 14px; box-shadow: var(--shadow); }
.bflow__arrow { color: var(--green); font-size: 1.3rem; font-weight: 700; }
.bflow__scores { display: flex; gap: 6px; }
.bflow__scores b { font-family: var(--num); width: 38px; height: 38px; border-radius: 50%; border: 3px solid var(--c); display: grid; place-items: center; font-size: .82rem; color: var(--ink); background: #fff; }
.bflow__time { font-family: var(--mono); font-size: .7rem; color: var(--green); background: var(--green-soft); padding: 5px 10px; border-radius: 100px; }

/* B: panel + tablo (getkalder User Transactions dili) */
.bvis--panel { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px 18px 8px; text-align: left; box-shadow: var(--shadow-sm); }
.bstats { display: flex; gap: clamp(16px, 3vw, 44px); padding-bottom: 14px; }
.bstat small { display: block; font-size: .74rem; color: var(--muted); }
.bstat b { font-family: var(--num); font-size: clamp(1.2rem, 2vw, 1.7rem); font-weight: 800; color: var(--ink); }
.bstat em { display: block; font-style: normal; font-size: .74rem; font-weight: 700; color: var(--green); }
.btable { width: 100%; border-collapse: collapse; font-size: .8rem; }
.btable th { text-align: left; font-size: .68rem; font-weight: 600; color: var(--muted-2); padding: 8px 6px; border-top: 1px solid var(--line); }
.btable td { padding: 9px 6px; border-top: 1px solid var(--line); color: var(--ink); }
.bpill { font-size: .66rem; font-weight: 700; color: var(--green); background: var(--green-soft); padding: 3px 9px; border-radius: 100px; white-space: nowrap; }

/* C: duel */
.bvis--duel { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bduel__ph { aspect-ratio: 3/3.6; border-radius: 14px; }
.bduel__vs { position: absolute; top: 34%; left: 50%; transform: translate(-50%, -50%); width: 34px; height: 34px; border-radius: 50%; background: #fff; box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; }
.bduel__vs img { height: 18px; width: auto; display: block; }
.bduel__bar { grid-column: 1/-1; height: 8px; border-radius: 100px; background: #E4E0DA; overflow: hidden; }
.bduel__bar i { display: block; height: 100%; background: var(--green); border-radius: 100px; }
.bduel__meta { grid-column: 1/-1; display: flex; justify-content: space-between; font-size: .72rem; font-weight: 700; color: var(--muted); }

/* D: grafik */
.bvis--chart { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px 14px 10px; text-align: left; box-shadow: var(--shadow-sm); }
.bchart__head { display: flex; align-items: baseline; gap: 10px; padding-bottom: 8px; }
.bchart__head span { font-size: .74rem; color: var(--muted); }
.bchart__head b { font-family: var(--num); font-size: 1.4rem; font-weight: 800; color: var(--ink); }
.bchart__head em { font-style: normal; font-size: .7rem; font-weight: 700; color: var(--green); }
.bvis--chart svg { width: 100%; height: 84px; display: block; }
.bchart__x { display: flex; justify-content: space-between; font-size: .62rem; color: var(--muted-2); padding-top: 6px; }

/* E: try-on fan (2026-10-16): the side cards are wardrobe cards as the app draws them (the piece's
   photo with its outline, shots/wardrobe), the middle one the visitor wearing both pieces. Everything
   is in percent of the fan, at most 340px wide: the cards are as large as the card's width allows and
   the rotated side cards still fit on a 320px phone. */
.bvis--fan { position: relative; width: 100%; max-width: 340px; margin-inline: auto; aspect-ratio: 100 / 51; }
.bfan__c { position: absolute; top: 5.6%; left: 50%; width: 36%; aspect-ratio: 4 / 5; border-radius: 14px; background: #fff; box-shadow: var(--shadow); }
.bfan__c--l { transform: translateX(-125%) rotate(-10deg); }
.bfan__c--r { transform: translateX(25%) rotate(10deg); }
.bfan__c--m { transform: translateX(-50%) translateY(-5%); z-index: 1; }

@media (max-width: 980px) {
  .bento > .bcard, .bento > .bcard:nth-child(1), .bento > .bcard:nth-child(2) { grid-column: span 6; }
}

/* ───────── Before / After ───────── */
/* Hair / Outfit switch (2026-10-16): the after card holds both results and fades between them; in the
   outfit view the tried piece's wardrobe card rises behind the arrow. main.js turns it every 4 s while it
   is on screen, until the visitor picks one. */
.ba { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.ba__tabs { display: inline-flex; background: #EBE9E5; border-radius: 100px; padding: 4px; }
.ba__tab { font: inherit; font-size: .9rem; font-weight: 600; color: var(--muted); background: none; border: 0; padding: 8px 22px; border-radius: 100px; cursor: pointer; transition: background .25s, color .25s, box-shadow .25s; }
.ba__tab.is-on { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(23, 36, 79, .1); }
.ba__tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ba__row { display: flex; align-items: center; justify-content: center; gap: 22px; width: 100%; }
.ba__card { position: relative; width: 46%; aspect-ratio: 3 / 4; border-radius: var(--radius); box-shadow: var(--shadow); display: grid; place-items: end center; padding-bottom: 14px; }
.ba__card span { position: relative; background: rgba(255, 255, 255, .92); color: var(--ink); font-family: var(--mono); font-size: .72rem; font-weight: 400; padding: 5px 14px; border-radius: 100px; text-transform: uppercase; letter-spacing: .04em; }
.ba__img { position: absolute; inset: 0; border-radius: inherit; opacity: 0; transition: opacity .6s var(--ease); }
.ba[data-mode="hair"] .ba__img--hair, .ba[data-mode="outfit"] .ba__img--outfit { opacity: 1; }
.ba__mid { position: relative; flex: none; }
.ba__arrow { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--lime); color: var(--green-dark); font-size: 1.2rem; font-weight: 700; }
.ba__piece { position: absolute; left: 50%; bottom: 50%; width: 64px; aspect-ratio: 4 / 5; border-radius: 12px; border: 2px solid #fff; box-shadow: var(--shadow); opacity: 0; transform: translate(-50%, 10px) scale(.85); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.ba[data-mode="outfit"] .ba__piece { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 560px) {
  .ba__row { gap: 12px; }
  .ba__piece { width: 50px; }
}
@media (prefers-reduced-motion: reduce) { .ba__img, .ba__piece, .ba__tab { transition: none; } }

/* ───────── Stats (yesil sayilar, beyaz zemin) ───────── */
.stats { padding: clamp(50px, 6vw, 80px) 0; border-block: 1px solid var(--line); background: var(--bg-alt); }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.stat strong { display: block; font-family: var(--num); font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--green); }
.stat span { display: block; margin-top: 10px; color: var(--muted); font-size: .94rem; font-weight: 500; }

/* ───────── Discover ───────── */
.discover { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.discover__tile { aspect-ratio: 1 / 1; border-radius: 12px; }
.discover__badge { position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%); background: var(--green-dark); color: #fff; font-size: .8rem; font-weight: 600; padding: 9px 18px; border-radius: 100px; box-shadow: var(--shadow); white-space: nowrap; }

/* ───────── Sosyal ag panosu ───────── */
.social { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 14px; max-width: 420px; margin-inline: auto; }
.social__stories { display: flex; gap: 12px; }
.sst { width: 52px; height: 52px; border-radius: 50%; padding: 3px; background: linear-gradient(135deg, #D4835F, #17244F); }
.sst i { display: block; width: 100%; height: 100%; border-radius: 50%; border: 2px solid #fff; }
.sst--add { display: grid; place-items: center; background: var(--bg-alt); color: var(--muted); font-size: 1.2rem; font-weight: 600; border: 1.5px dashed var(--line); }
.social__row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--bg-alt); border-radius: 14px; }
.sav { width: 36px; height: 36px; border-radius: 50%; flex: none; }
.social__who { flex: 1; line-height: 1.2; }
.social__who b { font-size: .88rem; color: var(--ink); }
.social__who small { display: block; font-size: .74rem; color: var(--muted); }
.social__follow { background: #17244F; color: #fff; font-size: .74rem; font-weight: 700; padding: 7px 14px; border-radius: 100px; }
.social__bubble { align-self: flex-start; max-width: 85%; background: var(--bg-alt); border-radius: 16px 16px 16px 4px; padding: 10px 14px; font-size: .85rem; color: var(--ink); }
.social__bubble b { color: var(--green-dark); }
.social__bubble--me { align-self: flex-end; background: var(--green-soft); border-radius: 16px 16px 4px 16px; }
.social__typing { display: flex; align-items: center; gap: 4px; font-size: .74rem; color: var(--muted-2); }
.social__typing span { width: 5px; height: 5px; border-radius: 50%; background: var(--muted-2); animation: typing 1.2s infinite; }
.social__typing span:nth-child(2) { animation-delay: .2s; }
.social__typing span:nth-child(3) { animation-delay: .4s; margin-right: 4px; }
@keyframes typing { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* ───────── FAQ ───────── */
.faq { display: grid; gap: 12px; }
.faq__item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 24px; transition: box-shadow .2s, border-color .2s; }
.faq__item[open] { box-shadow: var(--shadow-sm); border-color: var(--green); }
.faq__item summary { list-style: none; cursor: pointer; font-weight: 700; font-size: 1.05rem; padding: 18px 36px 18px 0; position: relative; color: var(--ink); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 1.5rem; font-weight: 400; color: var(--green); transition: transform .25s; }
.faq__item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq__item p { color: var(--muted); padding-bottom: 20px; max-width: 62ch; }

/* ───────── Final CTA (acik, getkalder tarzi) ───────── */
.cta { padding: clamp(64px, 9vw, 120px) 0; text-align: center; }
.cta__inner { max-width: 720px; margin-inline: auto; }
.cta h2 { font-size: clamp(2rem, 4.5vw, 3.2rem); font-weight: 600; letter-spacing: -.025em; line-height: 1.05; color: var(--ink); }
.cta p { color: var(--muted); margin: 16px auto 32px; max-width: 40ch; font-size: 1.1rem; }
.cta__badges { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ───────── Footer (acik, ortalanmis — getkalder) ───────── */
.footer { background: var(--bg-alt); border-top: 1px solid var(--line); padding: clamp(54px, 7vw, 80px) 0 32px; text-align: center; }
.footer__brand { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 36px; }
.footer__tag { color: var(--muted); font-size: .96rem; }
.footer__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 28px; padding-bottom: 32px; border-bottom: 1px solid var(--line); }
.footer__nav a { color: var(--ink); opacity: .8; font-size: .95rem; font-weight: 500; transition: opacity .2s, color .2s; }
.footer__nav a:hover { opacity: 1; color: var(--green); }
.footer__bottom { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding-top: 24px; font-size: .88rem; color: var(--muted); }

/* ───────── Mock photos ───────── */
.mock-photo { background: radial-gradient(120% 90% at 30% 18%, rgba(255, 255, 255, .55), transparent 45%), radial-gradient(80% 70% at 72% 88%, rgba(23, 36, 79, .28), transparent 60%), linear-gradient(150deg, #e7c6b2 0%, #c9a98f 45%, #9aa39a 100%); }
.mock-photo--cool { background: radial-gradient(120% 90% at 30% 18%, rgba(255, 255, 255, .5), transparent 45%), linear-gradient(150deg, #cdd9cf 0%, #9bb6a4 48%, #5f8270 100%); }
.mock-photo--warm { background: radial-gradient(120% 90% at 30% 18%, rgba(255, 255, 255, .55), transparent 45%), linear-gradient(150deg, #e9e4b6 0%, #c7d68f 48%, #9fc06a 100%); }
/* real photo layer over the mock gradient (gradient stays as loading fallback);
   inline style carries the url so slots stay declarative in the HTML */
.rph { background-size: cover; background-position: center top; }

/* ───────── Reveal ───────── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ───────── Responsive ───────── */
@media (max-width: 980px) {
  .nav__links { display: none; }
  .nav__actions .btn--ghost { display: none; }
  .nav__toggle { display: flex; }
  .hero__inner { grid-template-columns: 1fr; text-align: center; }
  .hero__copy { order: 1; }
  .hero__stage { order: 2; margin-top: 10px; min-height: 520px; }
  .hero__cta, .hero__trust { justify-content: center; }
  .hero__sub { margin-inline: auto; }
  .hero__chip--ai { left: 1%; }
  .hero__chip--seg { right: 1%; }
  .split { grid-template-columns: 1fr; }
  .split--rev .split__media { order: 0; }
  .features { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; }
  .stats__grid { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
}
@media (max-width: 560px) {
  .features { grid-template-columns: 1fr; }
  .hero__title { font-size: clamp(1.9rem, 8.6vw, 2.4rem); }
  .hero__chip { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .score .ring, .calc__bar i { transition: none; }
}