:root{
  --bg:#F5F5FA; --ink:#12172B; --ink2:#5D6476; --line:rgba(18,23,43,.10);
  --surface:#FFFFFF; --glass:rgba(255,255,255,.62); --glass-line:rgba(255,255,255,.75);
  --primary:#F43D5E; --primary-strong:#D22A4C; --grad-a:#F85C77; --grad-b:#E02B4F;
  --trust:#0FA372; --trust-soft:rgba(15,163,114,.12);
  --amber:#B96A10; --amber-soft:rgba(242,153,74,.18);
  --blob1:rgba(248,59,96,.30); --blob2:rgba(91,92,255,.22); --blob3:rgba(242,153,74,.22);
  --phone-edge:#1B2033; --shadow:0 30px 60px -20px rgba(18,23,43,.35);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0B0E17; --ink:#F0F2F8; --ink2:#9AA2B8; --line:rgba(255,255,255,.09);
    --surface:#151A28; --glass:rgba(23,28,44,.62); --glass-line:rgba(255,255,255,.08);
    --primary:#FB6B84; --primary-strong:#F84A68;
    --trust:#36C492; --trust-soft:rgba(54,196,146,.16);
    --amber:#E89A4E; --amber-soft:rgba(232,154,78,.18);
    --blob1:rgba(248,59,96,.22); --blob2:rgba(91,92,255,.20); --blob3:rgba(242,153,74,.12);
    --phone-edge:#2A3046; --shadow:0 30px 70px -20px rgba(0,0,0,.7);
    color-scheme:dark;
  }
}
*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:"Plus Jakarta Sans", system-ui, sans-serif; font-size:16.5px; line-height:1.6; overflow-x:hidden }
img{ display:block; max-width:100% }
a{ color:var(--primary-strong) }
h1,h2,h3{ font-family:"Baloo 2", system-ui, sans-serif; line-height:1.12; margin:0; letter-spacing:-.01em }
main{ position:relative; z-index:1 }

/* arka plan ışık lekeleri */
.bgfx{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden }
.bgfx span{ position:absolute; border-radius:50%; filter:blur(80px); animation:drift 28s ease-in-out infinite alternate }
.bgfx span:nth-child(1){ width:46vw; height:46vw; background:var(--blob1); top:-12vw; right:-8vw }
.bgfx span:nth-child(2){ width:40vw; height:40vw; background:var(--blob2); top:30vh; left:-14vw; animation-duration:32s }
.bgfx span:nth-child(3){ width:30vw; height:30vw; background:var(--blob3); bottom:-10vw; right:20vw; animation-duration:26s }
@keyframes drift{ to{ transform:translate(4vw,6vh) scale(1.1) } }

/* üst bar */
.nav{ position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px max(16px, calc((100vw - 1160px)/2)); backdrop-filter:blur(16px) saturate(1.4); -webkit-backdrop-filter:blur(16px) saturate(1.4); background:color-mix(in srgb, var(--bg) 70%, transparent); border-bottom:1px solid var(--line) }
.brand img{ width:62px; height:auto }
.nav nav{ display:flex; align-items:center; gap:22px }
.nav nav a{ color:var(--ink); text-decoration:none; font-weight:600; font-size:15px }
.nav nav a:hover{ color:var(--primary-strong) }
.nav .pill{ background:var(--ink); color:var(--bg) !important; padding:8px 16px; border-radius:999px }

section{ padding:0 max(16px, calc((100vw - 1160px)/2)) }

/* hero */
.hero{ display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; min-height:min(calc(100vh - 90px), 820px); padding-top:40px; padding-bottom:60px }
.badge-demo{ display:inline-block; background:var(--amber-soft); color:var(--amber); font-weight:700; font-size:13px; padding:6px 12px; border-radius:999px; margin-bottom:18px }
.hero h1{ font-size:clamp(44px, 6.4vw, 84px); font-weight:800 }
.hero h1::after{ content:" ♥"; color:var(--primary); font-size:.8em }
.lead{ font-size:clamp(17px, 1.6vw, 20px); color:var(--ink2); max-width:540px; margin:18px 0 26px }
.lead b{ color:var(--ink) }
.stores{ display:flex; flex-wrap:wrap; gap:12px }
.store{ display:inline-flex; align-items:center; gap:10px; background:var(--ink); color:var(--bg); padding:10px 18px 10px 14px; border-radius:14px; opacity:.92; cursor:default }
.store svg{ width:24px; height:24px; fill:currentColor }
.store span{ display:flex; flex-direction:column; font-family:"Baloo 2", system-ui, sans-serif; font-weight:700; font-size:18px; line-height:1.05 }
.store small{ font-family:"Plus Jakarta Sans", system-ui, sans-serif; font-weight:500; font-size:11px; opacity:.75 }
.mini-points{ list-style:none; padding:0; margin:26px 0 0; display:grid; gap:8px; color:var(--ink2); font-weight:500; font-size:15px }

.hero-visual{ position:relative; height:680px; display:flex; justify-content:center; align-items:center }
.phone{ position:relative; border-radius:46px; padding:10px; background:var(--phone-edge); box-shadow:var(--shadow), inset 0 0 0 2px rgba(255,255,255,.06) }
.phone img{ border-radius:37px; width:100%; height:auto }
.phone::before{ content:""; position:absolute; top:20px; left:50%; transform:translateX(-50%); width:30%; height:24px; background:#000; border-radius:20px; z-index:2 }
.phone-main{ width:min(300px, 64vw); z-index:2 }
.phone-back{ position:absolute; width:min(250px, 52vw); right:2%; top:12%; z-index:1; opacity:.96 }
.tilt-l{ transform:rotate(-4deg); animation:floatA 7s ease-in-out infinite }
.tilt-r{ transform:rotate(7deg); animation:floatB 8s ease-in-out infinite }
@keyframes floatA{ 50%{ transform:rotate(-4deg) translateY(-12px) } }
@keyframes floatB{ 50%{ transform:rotate(7deg) translateY(10px) } }
.hero-visual .phone-main{ margin-right:28% }
.float-chip{ position:absolute; z-index:3; background:var(--glass); border:1px solid var(--glass-line); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); padding:10px 16px; border-radius:16px; font-weight:700; font-size:14.5px; box-shadow:0 10px 30px -10px rgba(18,23,43,.3) }
.chip-swipe{ left:0; bottom:18% }
.chip-thanks{ right:0; bottom:6%; font-family:"Baloo 2", system-ui, sans-serif; font-size:17px }

/* bant */
.band{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:90px }
.band > div{ background:var(--glass); border:1px solid var(--glass-line); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-radius:20px; padding:20px 22px }
.band b{ display:block; font-family:"Baloo 2", system-ui, sans-serif; font-size:30px; color:var(--primary-strong) }
.band span{ color:var(--ink2); font-size:14.5px; font-weight:500 }

/* nasıl */
.how{ text-align:center; margin-bottom:110px }
.how h2, .trust h2, .gallery h2, .faq h2{ font-size:clamp(32px, 4vw, 50px) }
.sub{ color:var(--ink2); max-width:620px; margin:12px auto 44px; font-size:18px }
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; text-align:left }
.step{ position:relative; background:var(--glass); border:1px solid var(--glass-line); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-radius:28px; padding:26px 24px 28px; overflow:hidden }
.step .phone-sm{ width:72%; margin:0 auto 22px }
.num{ position:absolute; top:18px; left:20px; width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg, var(--grad-a), var(--grad-b)); color:#fff; font-family:"Baloo 2", system-ui, sans-serif; font-weight:800; font-size:20px; display:grid; place-items:center; z-index:3 }
.step h3{ font-size:24px; margin-bottom:6px }
.step p{ color:var(--ink2); margin:0; font-size:15.5px }
.phone-sm{ border-radius:34px; padding:7px }
.phone-sm img{ border-radius:28px }
.phone-sm::before{ top:14px; height:16px }

/* özellikler */
.features{ display:grid; gap:120px; margin-bottom:120px }
.feature{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center }
.feature.reverse .feature-copy{ order:2 }
.eyebrow{ display:inline-block; color:var(--primary-strong); font-weight:700; font-size:14px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:10px }
.feature h2{ font-size:clamp(30px, 3.6vw, 46px); margin-bottom:14px }
.feature p{ color:var(--ink2); font-size:17.5px; max-width:520px }
.ticks{ list-style:none; padding:0; margin:18px 0 0; display:grid; gap:10px }
.ticks li{ padding-left:30px; position:relative; font-weight:600 }
.ticks li::before{ content:"✓"; position:absolute; left:0; top:1px; width:22px; height:22px; border-radius:50%; background:var(--trust-soft); color:var(--trust); font-size:13px; display:grid; place-items:center }
.feature-visual{ display:flex; justify-content:center; position:relative }
.feature-visual::before{ content:""; position:absolute; width:80%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, var(--blob1), transparent 65%); top:50%; left:50%; transform:translate(-50%,-50%); z-index:-1 }
.phone-md{ width:min(290px, 70vw) }
.duo{ gap:18px }
.duo .phone-md{ width:min(250px, 42vw) }
.duo .offset{ margin-top:70px }

/* güven */
.trust{ margin-bottom:120px; text-align:center }
.trust-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin:40px 0 26px; text-align:left }
.tcard{ background:var(--surface); border:1px solid var(--line); border-radius:24px; padding:24px }
.tcard span{ display:grid; place-items:center; width:46px; height:46px; border-radius:14px; background:var(--trust-soft); color:var(--trust); font-size:22px; margin-bottom:14px; font-weight:800 }
.tcard h3{ font-size:21px; margin-bottom:6px }
.tcard p{ color:var(--ink2); font-size:15px; margin:0 }
.honest{ max-width:760px; margin:0 auto; background:var(--amber-soft); color:var(--ink); border-radius:16px; padding:14px 18px; font-size:15px }

/* galeri */
.gallery{ margin-bottom:110px }
.gallery h2{ text-align:center; margin-bottom:36px }
.rail{ display:flex; gap:26px; overflow-x:auto; scroll-snap-type:x mandatory; padding:10px 4px 30px; scrollbar-width:thin }
.rail figure{ margin:0; flex:0 0 auto; width:220px; scroll-snap-align:center; text-align:center }
.rail figcaption{ margin-top:14px; font-weight:700; color:var(--ink2) }

/* sss */
.faq{ max-width:820px; margin:0 auto 110px }
.faq h2{ text-align:center; margin-bottom:28px }
.faq details{ background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:4px 20px; margin-bottom:12px }
.faq summary{ cursor:pointer; font-weight:700; font-size:17px; padding:14px 0; list-style:none; position:relative; padding-right:30px }
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{ content:"+"; position:absolute; right:0; top:10px; font-size:24px; color:var(--primary-strong); transition:transform .2s }
.faq details[open] summary::after{ transform:rotate(45deg) }
.faq details p{ color:var(--ink2); margin:0 0 16px }

/* cta */
.cta{ text-align:center; margin:0 auto 90px; max-width:720px; padding:50px 24px; border-radius:36px; background:var(--glass); border:1px solid var(--glass-line); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px) }
.cta img{ width:130px; height:auto; margin:0 auto 18px }
.cta h2{ font-size:clamp(30px, 4vw, 46px) }
.cta p{ color:var(--ink2); font-size:18px; margin:8px 0 0 }

/* alt bilgi */
.foot{ position:relative; z-index:1; display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; padding:28px max(16px, calc((100vw - 1160px)/2)); border-top:1px solid var(--line); color:var(--ink2); font-size:14px }
.foot img{ width:48px; height:auto; margin-bottom:6px }
.foot p{ margin:0 }
.foot nav{ display:flex; flex-wrap:wrap; gap:18px }
.foot nav a{ color:var(--ink2); text-decoration:none; font-weight:600 }
.foot nav a:hover{ color:var(--primary-strong) }

/* telefon genişliği */
@media (max-width: 900px){
  .hero{ grid-template-columns:1fr; min-height:auto; text-align:left; padding-top:24px }
  .hero-visual{ height:auto; padding:20px 0 30px; margin-top:10px }
  .hero-visual .phone-main{ margin-right:30% }
  .phone-back{ top:14% }
  .band{ grid-template-columns:repeat(2,1fr); margin-bottom:70px }
  .steps{ grid-template-columns:1fr; gap:20px }
  .step .phone-sm{ width:60% }
  .features{ gap:80px; margin-bottom:90px }
  .feature, .feature.reverse{ grid-template-columns:1fr; gap:30px }
  .feature.reverse .feature-copy{ order:0 }
  .trust-grid{ grid-template-columns:1fr 1fr }
  .nav nav a:not(.pill){ display:none }
}
@media (max-width: 520px){
  body{ font-size:16px }
  .band b{ font-size:24px }
  .trust-grid{ grid-template-columns:1fr }
  .chip-swipe{ bottom:10% }
  .chip-thanks{ bottom:0 }
  .duo .phone-md{ width:43vw }
  .duo .offset{ margin-top:40px }
  .rail figure{ width:180px }
}
@media (prefers-reduced-motion: reduce){
  .bgfx span, .tilt-l, .tilt-r{ animation:none }
  html{ scroll-behavior:auto }
}