:root{
  --blue:#2563EB; --blue-hover:#1D4ED8; --blue-light:#3B82F6;
  --bg:#F8FAFC; --surface:#F1F5F9; --card:#FFFFFF; --border:#E2E8F0; --border-strong:#CBD5E1;
  --text:#0F172A; --text-2:#475569; --muted:#64748B;
  --accent-bg:#DBEAFE; --accent-on:#1E3A8A;
  --dark-1:#0B1220; --dark-2:#111827; --dark-3:#1F2937;
  --shell:#0F172A; --shell-text:#F1F5F9; --shell-muted:#CBD5E1;
  --radius:14px; --wrap:1200px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0B1220; --surface:#111827; --card:#111827; --border:#1F2937; --border-strong:#334155;
    --text:#F1F5F9; --text-2:#CBD5E1; --muted:#94A3B8;
    --accent-bg:#172554; --accent-on:#DBEAFE;
    --shell:#111827; --shell-text:#F1F5F9; --shell-muted:#CBD5E1;
  }
  :root:not([data-theme="light"]) .store--apple, :root:not([data-theme="light"]) .store--play{background:#F1F5F9; color:#0F172A}
  :root:not([data-theme="light"]) .store--apple:hover, :root:not([data-theme="light"]) .store--play:hover{background:#fff; color:#0F172A}
  :root:not([data-theme="light"]) .phone{background:#1F2937; box-shadow:0 22px 50px rgba(0,0,0,.45)}
  /* Sistem koyu temadayken (kullanıcı henüz seçim yapmamış) ikon da koyu duruma uysun */
  :root:not([data-theme="light"]) .theme-icon--sun{display:none}
  :root:not([data-theme="light"]) .theme-icon--moon{display:block}
}
:root[data-theme="dark"]{
  --bg:#0B1220; --surface:#111827; --card:#111827; --border:#1F2937; --border-strong:#334155;
  --text:#F1F5F9; --text-2:#CBD5E1; --muted:#94A3B8;
  --accent-bg:#172554; --accent-on:#DBEAFE;
  --shell:#111827; --shell-text:#F1F5F9; --shell-muted:#CBD5E1;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto} *{animation:none!important;transition:none!important}}
body{
  margin:0; background:var(--bg); color:var(--text); font-family:var(--font);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
h1,h2,h3{margin:0; letter-spacing:-0.02em; line-height:1.15; text-wrap:pretty}
p{margin:0; text-wrap:pretty}
a{color:var(--blue); text-decoration:none}
a:hover{color:var(--blue-hover); text-decoration:underline}
:focus-visible{outline:3px solid var(--blue-light); outline-offset:2px; border-radius:6px}

.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 20px}
.skip{position:absolute; left:-9999px; top:0; background:var(--blue); color:#fff; padding:12px 18px; z-index:100}
.skip:focus{left:12px; top:12px; text-decoration:none}
.section{padding:56px 0}
.section--alt{background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.section__title{font-size:28px; font-weight:700}
.section__lead{margin-top:8px; color:var(--muted); font-size:16.5px}
.section__head{margin-bottom:28px}

/* header */
.header{
  position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:saturate(1.6) blur(10px); border-bottom:1px solid var(--border);
}
.header__inner{display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:64px}
.brand{display:flex; align-items:center; gap:10px; color:var(--text); font-weight:700; font-size:18px; letter-spacing:-0.01em}
.brand:hover{text-decoration:none; color:var(--text)}
.brand img{width:32px; height:32px; border-radius:8px}
.header__actions{display:flex; align-items:center; gap:10px}
.iconbtn{
  width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border-strong); border-radius:9px; background:transparent; color:var(--text-2); cursor:pointer;
}
.iconbtn:hover{border-color:var(--blue); color:var(--blue)}
.iconbtn svg{width:18px; height:18px}
.theme-icon--moon{display:none}
:root[data-theme="dark"] .theme-icon--sun{display:none}
:root[data-theme="dark"] .theme-icon--moon{display:block}
.lang{display:flex; border:1px solid var(--border-strong); border-radius:9px; overflow:hidden; font-size:13px; font-weight:600}
.lang a,.lang span{padding:10px 12px; min-height:40px; display:inline-flex; align-items:center}
.lang a{color:var(--text-2)}
.lang a:hover{background:var(--surface); color:var(--blue); text-decoration:none}
.lang [aria-current]{background:var(--blue); color:#fff}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px;
  padding:11px 18px; border-radius:10px; background:var(--blue); color:#fff; font-size:15px; font-weight:600;
}
.btn:hover{background:var(--blue-hover); color:#fff; text-decoration:none}

/* hero */
.hero{padding:44px 0 8px}
.hero__grid{display:grid; gap:36px; align-items:center}
.pill{
  display:inline-block; padding:6px 12px; border-radius:999px;
  background:var(--accent-bg); color:var(--accent-on); font-size:13px; font-weight:600;
}
.hero h1{margin:16px 0 12px; font-size:clamp(32px,7vw,54px); line-height:1.08; letter-spacing:-0.025em}
.hero__sub{font-size:clamp(17px,3.4vw,21px); font-weight:600; line-height:1.4; color:var(--text)}
.hero__text{margin-top:12px; font-size:16.5px; color:var(--text-2); max-width:54ch}

/* store badges */
.stores{display:flex; flex-wrap:wrap; gap:12px; margin-top:26px}
.store{
  display:inline-flex; align-items:center; gap:10px; min-height:52px; padding:9px 18px;
  border-radius:10px; border:1px solid transparent; background:var(--shell); color:#fff;
}
.store:hover{background:#000; color:#fff; text-decoration:none}
:root[data-theme="dark"] .store--apple, :root[data-theme="dark"] .store--play, .store--invert{background:#F1F5F9; color:#0F172A}
:root[data-theme="dark"] .store--apple:hover, :root[data-theme="dark"] .store--play:hover, .store--invert:hover{background:#fff; color:#0F172A}
:root[data-theme="dark"] .phone{background:#1F2937; box-shadow:0 22px 50px rgba(0,0,0,.45)}
.store svg{flex:none}
.store__line{display:flex; flex-direction:column; line-height:1.15; text-align:left}
.store__top{font-size:11px; opacity:.9}
.store__name{font-size:17px; font-weight:600}
.store--soon{
  background:var(--surface); color:var(--text-2); border-color:var(--border-strong); cursor:default;
  font:inherit;
}
.store--soon .store__top{color:var(--muted)}

/* phones */
.phone{background:#0F172A; border-radius:38px; padding:9px; box-shadow:0 22px 50px rgba(15,23,42,.18)}
.phone img{width:100%; height:100%; border-radius:30px; object-fit:cover; object-position:top}
.hero__phone{display:flex; justify-content:center}
.hero__phone .phone{width:min(280px,78vw)}
.hero__phone .phone img{aspect-ratio:9/19.5}

/* steps */
.grid{display:grid; gap:16px}
.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:24px}
.step__num{
  width:34px; height:34px; border-radius:999px; background:var(--accent-bg); color:var(--accent-on);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; margin-bottom:14px;
}
.card h3{font-size:18px; font-weight:650; margin-bottom:6px}
.card p{font-size:15px; color:var(--text-2)}
.card svg{width:24px; height:24px; color:var(--blue); margin-bottom:12px}

/* guest list */
.checks{display:grid; gap:12px; margin-top:24px}
.check{display:flex; gap:12px; align-items:flex-start; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:16px 18px}
.check svg{flex:none; width:20px; height:20px; color:var(--blue); margin-top:3px}
.check b{display:block; font-size:15.5px; font-weight:650; margin-bottom:2px}
.check span{font-size:14.5px; color:var(--text-2)}
.guest__phones{display:flex; gap:16px; justify-content:center; margin-top:32px}
.guest__phones .phone{width:min(210px,42vw); border-radius:30px; padding:7px}
.guest__phones .phone img{aspect-ratio:9/19.5; border-radius:24px}

/* screenshot strip */
.strip{display:flex; gap:20px; overflow-x:auto; padding:4px 20px 20px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch}
.strip::-webkit-scrollbar{height:8px}
.strip::-webkit-scrollbar-thumb{background:var(--border-strong); border-radius:99px}
.shot{flex:none; width:210px; scroll-snap-align:center}
.shot .phone{width:210px; border-radius:30px; padding:8px}
.shot .phone img{aspect-ratio:9/19.5; border-radius:23px}
.shot figcaption{margin-top:10px; font-size:14px; font-weight:600}

/* privacy */
.privacy{background:var(--accent-bg); border-radius:20px; padding:32px 24px; color:var(--accent-on)}
.privacy h2{font-size:clamp(24px,5vw,34px); color:var(--accent-on)}
.privacy__tag{
  display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:999px;
  background:var(--accent-on); color:var(--accent-bg); font-size:13px; font-weight:600; margin-bottom:16px;
}
.privacy__tag svg{width:14px; height:14px}
.privacy__lead{margin:14px 0 20px; font-size:16.5px; color:var(--accent-on)}
.privacy__points{display:grid; gap:12px}
.privacy__points li{list-style:none; background:var(--card); border-radius:12px; padding:16px 18px; font-size:15px; color:var(--text)}
.privacy__points b{color:var(--text)}
.privacy ul{margin:0; padding:0}
.privacy__link{display:inline-block; margin-top:16px; font-weight:600; color:var(--accent-on); text-decoration:underline}
.privacy__link:hover{color:var(--accent-on)}

/* faq */
.faq{max-width:780px; margin:0 auto}
.faq details{border-bottom:1px solid var(--border)}
.faq details:first-of-type{border-top:1px solid var(--border)}
.faq summary{
  display:flex; justify-content:space-between; align-items:flex-start; gap:16px; cursor:pointer;
  padding:18px 2px; font-size:17px; font-weight:650; list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--blue)}
.faq summary svg{flex:none; width:18px; height:18px; color:var(--blue); margin-top:4px; transition:transform .18s ease}
.faq details[open] summary svg{transform:rotate(180deg)}
.faq p{padding:0 2px 20px; font-size:15.5px; color:var(--text-2); max-width:66ch}

/* download + footer */
.download{background:var(--shell); color:var(--shell-text); text-align:center; padding:56px 0}
.download img.mark{width:44px; height:44px; border-radius:11px; margin:0 auto 18px}
.download h2{font-size:clamp(24px,5vw,34px); color:var(--shell-text)}
.download p{margin-top:12px; color:var(--shell-muted); font-size:16.5px}
.download .stores{justify-content:center}
.download .store--soon{background:var(--dark-3); border-color:#334155; color:#CBD5E1}
.download .store--soon .store__top{color:#94A3B8}
.download__contact{margin-top:22px; font-size:15.5px; color:var(--shell-muted)}
.download__contact a{color:var(--blue-light)}
.footer{background:var(--dark-1); color:#94A3B8; border-top:1px solid var(--dark-3); padding:24px 0; font-size:14.5px}
.footer__inner{display:flex; flex-direction:column; gap:14px}
.footer nav{display:flex; flex-wrap:wrap; gap:8px 22px}
.footer a{color:#CBD5E1}
.footer a:hover{color:#fff}

@media (min-width:760px){
  .section{padding:72px 0}
  .section__title{font-size:34px}
  .grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .checks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .privacy{padding:48px 44px}
  .strip{padding-left:max(20px,calc((100vw - var(--wrap))/2 + 20px))}
  .shot{width:240px}
  .shot .phone{width:240px}
  .footer__inner{flex-direction:row; justify-content:space-between; align-items:center}
}
@media (min-width:980px){
  .hero{padding:64px 0 16px}
  .hero__grid{grid-template-columns:1.05fr .95fr; gap:56px}
  .hero__phone .phone{width:300px}
  .features{grid-template-columns:repeat(3,minmax(0,1fr))}
  .guest{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
  .guest__phones{margin-top:0}
  .guest__phones .phone{width:220px}
  .checks{grid-template-columns:1fr}
  .privacy__grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center}
}