:root{
  --bg:#0b0b0d; --fg:#fafafa; --muted:#b7b7c2; --line:#222;
  --accent:#EC4104; --accent2:#EC4104;
  --glass:rgba(255,255,255,.08); --blur:16px;
  /* Kart yükseklikleri (desktop/tablet/mobil) */
  --mediaH-d:42vh; --mediaH-t:46vh; --mediaH-m:58svh;
  --box-grad-a: rgba(38,41,58,.26); --box-grad-b: rgba(12,14,22,.26);
  --glass-strong: rgba(255,255,255,.12); --glass-border: rgba(255,255,255,.22); --glass-line: rgba(255,255,255,.06);
  --navH: 56px; --navH-m: 68px;
}

*{box-sizing:border-box} html,body{height:100%}
body{margin:0;background:
  radial-gradient(1200px 600px at 80% -10%, rgba(255,255,255,.035), transparent 60%),
  radial-gradient(900px 500px at 10% 110%, rgba(255,255,255,.025), transparent 60%),
  linear-gradient(180deg, #111216 0%, #0d0f13 40%, #0b0c10 100%);
  color:var(--fg);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.container{max-width:1180px;margin:0 auto;padding:0 12px}

.hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}

/* === Lock horizontal scroll on mobile Safari (prevent side pan/white gutters) === */
html{background:#0b0b0d; width:100%; max-width:100%; overflow-x:clip}
body{overflow-x:clip}
main#root{overflow-x:clip; touch-action:pan-y; overscroll-behavior-x:none}
/* Fixed background layers sometimes create phantom width on iOS; ensure they never exceed viewport */
.bg, .bg__overlay, .bg__confetti, .bg__noise, .bg__glow{max-width:100vw; overflow-x:clip}
/* Media safety: never allow visuals to push layout wider than the viewport */
img, svg, canvas, video{max-width:100%; height:auto}
/* Containers should not grow beyond viewport width due to transforms/reflections */
.mock, .media, .icon-list, .media-list{max-width:100%;}

/* SwiftUI GlassBackground (kod) */
.bg__glass{position:fixed;inset:0;z-index:-3;overflow:hidden;
  background:linear-gradient(to bottom right, rgba(75,0,130,.30), rgba(0,0,255,.30), rgba(128,0,128,.30));
  filter:blur(18px) saturate(.85)}
.bg__glass::before,.bg__glass::after{content:"";position:absolute;border-radius:50%}
.bg__glass::before{width:260px;height:260px;background:rgba(128,0,128,.22);top:-90px;left:-70px}
.bg__glass::after{width:240px;height:240px;background:rgba(0,0,255,.22);top:-40px;right:60px}
.bg__circle-extra{position:absolute;width:240px;height:240px;border-radius:50%;background:rgba(75,0,130,.22);bottom:120px;left:40px}
.bg__glass{display:none !important}

/* Arka plan yardımcı katmanlar */
.bg{position:fixed;inset:0;z-index:-2}
.bg__overlay{position:absolute;inset:0;background:linear-gradient(to bottom, rgba(0,0,0,.20), transparent 30%, transparent 70%, rgba(0,0,0,.22))}
.bg__confetti{pointer-events:none;position:absolute;inset:0;background:repeating-conic-gradient(from 0deg, transparent 0 9deg, rgba(255,255,255,.06) 9deg 10deg);opacity:.045;animation:spin 18s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.bg__noise{position:absolute;inset:0;opacity:.03;mix-blend:overlay}
.bg__glow{position:absolute;inset:auto -20% -10% -20%;height:200px;background:radial-gradient(ellipse at center, rgba(236,65,4,.32), transparent 70%);filter:blur(26px)}

/* NAV + progress */
.nav{position:sticky;top:0;z-index:40;backdrop-filter:saturate(160%) blur(12px);
  background: linear-gradient(to bottom, rgba(255,255,255,.06), rgba(255,255,255,.02)), var(--glass);
  border-bottom:1px solid var(--glass-line);
  padding-top: env(safe-area-inset-top, 0px);
}
.nav__inner{display:flex;align-items:center;justify-content:space-between;height:var(--navH);padding:0 12px}
.brand{font-family:'Concert One', Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;font-weight:400;letter-spacing:.2px;font-size:22px;color:#EC4104}
.nav__links a{margin:0 8px;color:color-mix(in oklab,var(--fg) 85%, transparent)}
.nav__links{display:flex;align-items:center;gap:8px;overflow:auto;-webkit-overflow-scrolling:touch}
.nav__links a{white-space:nowrap;padding:6px 8px;border-radius:10px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.14);color:var(--fg);cursor:pointer;white-space:nowrap}
.btn--sm{padding:7px 10px;border-radius:10px;font-size:14px}
.glass{background:var(--glass);backdrop-filter:blur(var(--blur))}
.btn.glass{ 
  background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.06)) , var(--glass-strong);
  border-color: var(--glass-border);
  backdrop-filter: blur(calc(var(--blur) + 6px)) saturate(1.25);
  box-shadow: 0 6px 22px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.14);
}
.btn.glass.btn--sm{box-shadow: 0 4px 16px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.14)}

/* Dark solid download buttons (no glass) */
.btn--dark{
  background: linear-gradient(180deg, #1b1e26 0%, #14171d 60%, #101318 100%);
  border-color: #2a2e36;
  color: var(--fg);
  box-shadow: 0 10px 26px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
}
.btn--dark:hover{
  box-shadow: 0 12px 32px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.08);
  transform: translateY(-1px);
}
.btn--dark:active{
  transform: translateY(0);
  box-shadow: 0 8px 22px rgba(0,0,0,.40), inset 0 0 0 rgba(255,255,255,0);
}

/* Generic reflection helper (WebKit) */
.reflect{ -webkit-box-reflect: below 8px linear-gradient(transparent, rgba(0,0,0,.28)); }
/* Stronger reflection for dark download buttons */
.btn--dark.reflect{ -webkit-box-reflect: below 12px linear-gradient(transparent, rgba(0,0,0,.32)); }

/* progress bar */
.scrollbar{height:2px;background:transparent}
.scrollbar #scrollbar{display:block;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent2));width:0}

/* Layout ritmi */
.snap{scroll-snap-type:y mandatory}
.screen{min-height:100svh;display:flex;flex-direction:column;justify-content:center}
.screen--stack{min-height:auto;padding-block:4px}
.tight{padding-block:8px}
.section__title{font-size:24px;margin:0 0 8px 0}
main#root{position:relative;z-index:0;padding-top:calc(var(--navH) + env(safe-area-inset-top, 0px))}
main#root::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background: radial-gradient(1200px 600px at 80% -10%, rgba(255,255,255,.035), transparent 60%),
              radial-gradient(900px 500px at 10% 110%, rgba(255,255,255,.025), transparent 60%),
              linear-gradient(180deg, rgba(255,255,255,.04), transparent 35%);
  backdrop-filter: blur(8px) saturate(1.2);
}

/* HERO */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:16px;align-items:center}
.hero__title{font-size:28px;line-height:1.2;margin:0 0 8px 0}
.hero__lead{margin:0 0 8px 0;color:var(--muted)}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.mock{border-radius:18px;border:1px solid rgba(255,255,255,.1);overflow:hidden;position:relative}
.mock--phone{width:clamp(320px,46vw,720px);max-width:100%;aspect-ratio:520/1024;margin-left:auto;margin-right:auto}

.mock--phone img{width:100%;height:100%;object-fit:contain}

/* --- HERO BLEND / STAGE --- */
#home .hero{position:relative}
/* Ambient gradient on the right side so phone merges with page */
#home .hero::before{
  content:""; position:absolute; inset:-8% -8% -8% 38%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(58% 48% at 76% 46%, rgba(236,65,4,.18), transparent 62%),
    radial-gradient(44% 40% at 84% 60%, rgba(236,65,4,.08), transparent 70%);
  filter:blur(26px) saturate(1.02);
  mix-blend-mode:soft-light; opacity:.9;
}
/* Subtle vignette + ground shadow under the phone */
.hero__mock{position:relative}
.hero__mock::before{
  content:""; position:absolute; left:8%; right:8%; bottom:6%; height:22%; pointer-events:none;
  background:radial-gradient(50% 60% at 50% 60%, rgba(0,0,0,.55) 0, rgba(0,0,0,.25) 45%, transparent 80%);
  filter:blur(12px);
  z-index:0;
  backdrop-filter: blur(2px) saturate(.9); box-shadow: 0 22px 80px rgba(18,12,14,.38);
}
/* Edge-vignette around the device to avoid cut-out look */
.hero__mock::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:24px;
  box-shadow: inset 0 0 80px rgba(0,0,0,.42), inset 0 -46px 90px rgba(0,0,0,.26);
}
/* Stronger drop shadow on the device itself */
.mock--phone{filter: drop-shadow(0 30px 60px rgba(0,0,0,.55))}

.mock--phone::before{
  content:""; position:absolute; inset:-2px; border-radius:inherit; pointer-events:none;
  background: linear-gradient(90deg, rgba(255,255,255,.05), transparent 22%, transparent 78%, rgba(255,255,255,.04));
  mix-blend-mode:overlay; opacity:.9;
}

/* Tone down overly vivid reds/greys on hero mock and feature images */
.mock--tone img{filter:saturate(.86) contrast(.96) brightness(.985)}
.mock--tone::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:
    radial-gradient(120% 60% at 50% 18%, rgba(12,14,22,.22), transparent 60%),
    linear-gradient(180deg, rgba(12,14,22,.16), rgba(12,14,22,.08) 42%, transparent 70%);
  mix-blend:multiply;
}

/* Apply a gentler tone to other screenshots as well */
.media__img{filter:saturate(.92) contrast(.97) brightness(.99)}
.media__img-wrap::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background: linear-gradient(180deg, rgba(12,14,22,.12), transparent 55%);
  mix-blend:multiply;
}
.float{animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.parallax{will-change:transform}

/* MEDIA (image left, text right, eşit yükseklik, sıkı boşluk) */
.media{display:grid;align-items:stretch;grid-template-columns:minmax(220px,48%) 1fr;gap:10px;padding:10px;border:1px solid var(--glass-line);border-radius:16px;overflow:hidden;background:linear-gradient(to bottom, rgba(255,255,255,.06), rgba(255,255,255,.02)), var(--glass);backdrop-filter:blur(calc(var(--blur) + 2px)) saturate(1.2)}
.media-list{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.media__img-wrap{border-radius:14px;overflow:hidden;position:relative;height:var(--mediaH-d);background:rgba(255,255,255,.02)}
.media__img{display:block;width:100%;height:100%;object-fit:contain}
.media__right{min-height:var(--mediaH-d);display:flex;flex-direction:column;justify-content:center}
.media__title{font-size:20px;margin:0 0 6px 0}
.media__desc{margin:0;color:var(--muted)}

/* Grid yardımcıları */
.grid{display:grid}
.grid--2{grid-template-columns:repeat(2,1fr)}
.gap-tight{gap:10px}

/* Kartlar */
.card{border:1px solid var(--glass-line);border-radius:16px;padding:14px;background:linear-gradient(to bottom, rgba(255,255,255,.06), rgba(255,255,255,.02)), var(--glass);backdrop-filter:blur(calc(var(--blur) + 2px)) saturate(1.2)}

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

/* Footer */
.footer{border-top:1px solid var(--glass-line); 
  background: linear-gradient(to top, rgba(255,255,255,.05), transparent), var(--glass);
  backdrop-filter: blur(10px) saturate(1.4)}
.footer__inner{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;padding-block:12px}
.links a{margin-left:6px}

/* === Deeplink Overlay === */
.deeplink-overlay{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:rgba(0,0,0,.45);backdrop-filter:blur(6px)}
.deeplink-overlay .deeplink-card{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:260px;max-width:90vw;padding:14px 16px;border-radius:14px;border:1px solid var(--glass-line);background:linear-gradient(to bottom, rgba(255,255,255,.06), rgba(255,255,255,.02)), var(--glass);backdrop-filter:blur(calc(var(--blur) + 2px)) saturate(1.2);text-align:center}
.deeplink-overlay .deeplink-card p{margin:0}
.deeplink-overlay .deeplink-card small{color:var(--muted)}
.deeplink-overlay .loader{width:18px;height:18px;border:2px solid rgba(255,255,255,.28);border-top-color:#EC4104;border-radius:50%;animation:spin 1s linear infinite}

/* === Responsive === */
@media (max-width:1024px){
  :root{ --navH: 60px }
  .hero{grid-template-columns:1fr;text-align:center}
  .hero__mock{margin:16px auto 0;max-width:380px}
  .hero__title{font-size:22px}
  .media__img-wrap{height:var(--mediaH-t)}
  .media__right{min-height:var(--mediaH-t)}
  .media-list{grid-template-columns:1fr}
}
@media (max-width:768px){
  .media{grid-template-columns:minmax(140px,46%) 1fr}
}
@media (max-width:540px){
  :root{ --navH: var(--navH-m) }
  .nav__links .btn--sm{display:none}
  .brand{font-size:18px;color:#EC4104}
  .media__img-wrap{height:var(--mediaH-m)}
  .media__right{min-height:var(--mediaH-m)}
  .media-list{gap:8px}
  .hero__title{font-size:20px}
  .btn{font-size:14px;padding:8px 10px}
  .media__title{font-size:18px}
  .media__desc{font-size:14px}

  /* Hero blend fine-tuning for mobile */
  #home .hero::before{ inset:-10% -12% -10% 24%; filter:blur(22px); opacity:.85 }
  .hero__mock::before{ left:6%; right:6%; bottom:7%; height:24%; box-shadow: 0 16px 60px rgba(18,12,14,.34) }
  .mock--phone{ filter: drop-shadow(0 22px 46px rgba(0,0,0,.5)) }
}

/* Scroll reveal animation directions */
.reveal {opacity:0; transform:translateY(12px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in {opacity:1; transform:none;}

.reveal-left {transform:translateX(-72px);}
.reveal-left.in {transform:none;}

.reveal-right {transform:translateX(72px);}
.reveal-right.in {transform:none;}

.reveal-up {transform:translateY(72px);}
.reveal-up.in {transform:none;}

.reveal-down {transform:translateY(-72px);}
.reveal-down.in {transform:none;}

/* === ICON LIST (sol ikon – sağ metin, kompakt) === */
.icon-list{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.icon-item{display:grid;grid-template-columns:40px 1fr;align-items:center;column-gap:10px;padding:10px;border:1px solid var(--glass-line);border-radius:16px;min-height:80px;background:linear-gradient(to bottom, rgba(255,255,255,.06), rgba(255,255,255,.02)), var(--glass);backdrop-filter:blur(calc(var(--blur) + 2px)) saturate(1.2)}
.icon-item__icon{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg, rgba(38,41,58,.35), rgba(12,14,22,.35)), var(--glass);backdrop-filter:blur(var(--blur));display:grid;place-items:center;color:color-mix(in oklab,var(--fg) 85%, transparent)}
.icon-item__icon svg{width:20px;height:20px}
.icon-item__body h3{margin:0 0 4px 0;font-size:18px}
.icon-item__body p{margin:0;color:var(--muted);font-size:14px}

@media (max-width:1024px){.icon-list{grid-template-columns:repeat(2,1fr)}.icon-item{grid-template-columns:36px 1fr;min-height:76px}}
@media (max-width:540px){.icon-list{grid-template-columns:1fr}.icon-item{grid-template-columns:34px 1fr;min-height:72px}.icon-item__icon{width:32px;height:32px}.icon-item__icon svg{width:16px;height:16px}}