/* Shelvo tanıtım sitesi — apps/web/assets/landing.css
   ÜRETİLMİŞ DEĞİL, elle yazılır. Sayfalar apps/web/build.mjs ile üretilir.
   Fontlar SELF-HOST: Google Fonts ziyaretçi IP'sini Google'a gönderir ve
   gizlilik politikasına beşinci bir işleyici eklemek gerekirdi. */
@font-face{font-family:'Outfit';font-weight:700;font-style:normal;font-display:swap;
  src:url('/fonts/outfit-700.woff2') format('woff2')}
@font-face{font-family:'Outfit';font-weight:600;font-style:normal;font-display:swap;
  src:url('/fonts/outfit-600.woff2') format('woff2')}
@font-face{font-family:'Work Sans';font-weight:400;font-style:normal;font-display:swap;
  src:url('/fonts/worksans-400.woff2') format('woff2')}
@font-face{font-family:'Work Sans';font-weight:600;font-style:normal;font-display:swap;
  src:url('/fonts/worksans-600.woff2') format('woff2')}


:root{
  --ground:#0A0C10; --panel:#12151B; --panel-2:#171B22; --ink:#F5F6F8; --ink-soft:#8A93A3;
  --ink-faint:#2E343E; --hair:#1C212A; --blue:#3B82F6; --amber:#FFC107; --red:#F04E48;
  --accent:var(--blue); --accent-ink:#0E1116; --shelf:#2A323D;
  --display:'Outfit',ui-sans-serif,system-ui,sans-serif;
  --body:'Work Sans',ui-sans-serif,system-ui,sans-serif;
  --s--1:.8125rem; --s-0:1.0625rem; --s-1:1.25rem;
  --hero:clamp(3rem,7.4vw,6.4rem);
  --wrap:74rem; --measure:34rem; --gap:clamp(6rem,13vw,12rem);
}
@media (prefers-color-scheme:light){
  :root{--ground:#FAFAF7;--panel:#FFFFFF;--panel-2:#F3F2EC;--ink:#14181F;--ink-soft:#4A5261;
    --hair:#E4E3DC;--ink-faint:#D5D3CA;--blue:#2563EB;--red:#E53935;--shelf:#D8D6CD;--accent-ink:#FFFFFF}
}
:root[data-theme="light"]{--ground:#FAFAF7;--panel:#FFFFFF;--panel-2:#F3F2EC;--ink:#14181F;
  --ink-soft:#4A5261;--hair:#E4E3DC;--ink-faint:#D5D3CA;--blue:#2563EB;--red:#E53935;--shelf:#D8D6CD;--accent-ink:#FFFFFF}
:root[data-theme="dark"]{--ground:#0A0C10;--panel:#12151B;--panel-2:#171B22;--ink:#F5F6F8;
  --ink-soft:#8A93A3;--ink-faint:#2E343E;--hair:#1C212A;--blue:#3B82F6;--red:#F04E48;--shelf:#2A323D;--accent-ink:#0E1116}

*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);
  font:400 var(--s-0)/1.65 var(--body);-webkit-text-size-adjust:100%;overflow-x:hidden}
p{margin:0}
a{color:var(--accent);text-underline-offset:.18em;text-decoration-thickness:.06em}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

.rail{position:fixed;inset:0 0 auto 0;height:4px;z-index:60;display:grid;grid-template-columns:1fr 1fr 1fr}
.rail i:nth-child(1){background:var(--blue)}
.rail i:nth-child(2){background:var(--amber)}
.rail i:nth-child(3){background:var(--red)}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(1.25rem,5vw,3rem)}
.measure{max-width:var(--measure)}

header.site{position:sticky;top:4px;z-index:50;
  background:color-mix(in srgb,var(--ground) 86%,transparent);
  backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--hair)}
header.site .wrap{display:flex;align-items:center;gap:.9rem;padding-block:.85rem;min-height:56px}
.mark{display:flex;align-items:center;color:var(--ink);text-decoration:none}
.mark svg{height:19px;width:auto;display:block}
.spacer{flex:1}
.chip{font:600 var(--s--1)/1 var(--body);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);border:1px solid var(--hair);border-radius:999px;padding:.45rem .75rem;
  white-space:nowrap;display:inline-flex;align-items:center;gap:.45rem}
.chip::before{content:"";width:6px;height:6px;border-radius:99px;background:var(--amber)}
.lang{display:flex;gap:.15rem;font:600 var(--s--1)/1 var(--body)}
.lang a{padding:.45rem .55rem;border-radius:6px;text-decoration:none;color:var(--ink-soft)}
.lang a[aria-current]{color:var(--ink);background:var(--panel);border:1px solid var(--hair)}
.lang a:hover{color:var(--ink)}

main>section{padding-block:var(--gap)}
.eyebrow{font:600 var(--s--1)/1 var(--body);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:1.2rem;display:flex;align-items:center;gap:.6rem}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--accent);flex:none}

h1{font:700 var(--hero)/0.98 var(--display);letter-spacing:-.042em;margin:0;text-wrap:balance}
h1 em{font-style:normal;color:var(--accent)}
h2{font:700 clamp(2.1rem,4.4vw,3.4rem)/1.04 var(--display);letter-spacing:-.038em;
  margin:0 0 .9rem;text-wrap:balance}
.lede{font-size:clamp(1rem,1.4vw,1.2rem);color:var(--ink-soft);margin-top:1.3rem;max-width:31rem}
.body{color:var(--ink-soft);margin-top:.9rem}

/* ——— HERO ——— */
.hero{padding-top:clamp(2.5rem,5vw,4rem);overflow:hidden}
.hero-grid{display:grid;gap:3rem;grid-template-columns:1fr;align-items:center}
@media (min-width:62rem){.hero-grid{grid-template-columns:1.02fr .98fr;gap:2rem}}
/* RESMİ MAĞAZA ROZETLERİ (31.08.2026).
   Rozetler Apple ve Google'ın kendi marka sayfalarından; kural onları
   DEĞİŞTİRMEMEK ve çevresinde boşluk bırakmak. Bu yüzden burada renk/oran
   filtresi YOK, yalnız yerleşim var.
   Google'ın PNG'si kendi iç boşluğuyla dağıtılıyor; Apple ile aynı GÖRÜNÜR
   yüksekliğe gelsin diye ona biraz büyük yükseklik veriliyor. */
.badge-row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin-top:1.9rem}
.badge{display:inline-flex;align-items:center;text-decoration:none;
  border-radius:10px;transition:opacity .2s ease}
.badge:hover{opacity:.82}
.badge:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.badge img{display:block;width:auto}
.badge-apple img{height:52px}
.badge-google img{height:66px;margin:-7px}
.cta-row{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;margin-top:1.9rem}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;
  padding:0 1.5rem;border-radius:12px;border:1px solid transparent;cursor:pointer;
  font:600 var(--s-0)/1 var(--body);text-decoration:none;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:color-mix(in srgb,var(--accent) 82%,var(--ink))}
.btn-ghost{border-color:var(--hair);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink-soft)}
.platform{font-size:var(--s--1);color:var(--ink-soft);margin-top:.9rem}

.stats{display:flex;flex-wrap:wrap;gap:.6rem 2rem;margin-top:2.2rem;padding-top:1.3rem;
  border-top:1px solid var(--hair);font:400 var(--s--1)/1.5 var(--body);color:var(--ink-soft)}
.stats b{font-family:var(--display);font-weight:700;font-size:1.35rem;color:var(--ink);
  display:block;font-variant-numeric:tabular-nums;letter-spacing:-.02em}

.hero-art{display:flex;justify-content:center;align-items:center;padding-block:1rem}

/* ——— Telefon mockup'ı — uygulamanın GERÇEK token'larıyla (tokens.ts) ——— */
.phone{--app-bg:#F2F4F7;--app-surface:#FFFFFF;--app-ink:#0F172A;--app-dim:#5B677A;--app-line:#E2E8F0;
  width:min(290px,74vw);aspect-ratio:9/18.6;flex:none;background:#0B0E13;border-radius:36px;
  padding:8px;box-shadow:0 30px 70px -26px rgba(0,0,0,.75),0 0 0 1px var(--hair);
  position:relative;z-index:1}
.phone::before{content:"";position:absolute;top:8px;left:50%;translate:-50% 0;width:88px;
  height:18px;background:#0B0E13;border-radius:0 0 11px 11px;z-index:2}
.screen{width:100%;height:100%;background:var(--app-bg);border-radius:29px;overflow:hidden;
  display:flex;flex-direction:column;font-family:var(--body);color:var(--app-ink);
  font-size:11px;line-height:1.45}
.scr-top{height:24px;flex:none}
.scr-pad{padding:0 12px}
.scr-title{font:700 17px/1.2 var(--display);letter-spacing:-.02em;margin:2px 0 8px}
.scr-sub{font-size:10px;color:var(--app-dim)}
.scr-field{background:var(--app-surface);border:1px solid var(--app-line);border-radius:12px;
  padding:7px 10px;font-size:11px;display:flex;gap:6px;align-items:center}
.scr-field span{color:var(--app-dim)}
.chips{display:flex;gap:5px;margin:8px 0 9px;flex-wrap:wrap}
.chips i{font-style:normal;font-size:9.5px;padding:4px 8px;border-radius:999px;
  border:1px solid var(--app-line);background:var(--app-surface);color:var(--app-dim)}
.chips i.on{background:#2563EB;border-color:#2563EB;color:#fff}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.gcard{background:var(--app-surface);border-radius:12px;overflow:hidden}
.gcard .ph{height:52px;background:#E8EDF4;position:relative}
.gcard .ph::after{content:"";position:absolute;inset:auto 0 0 0;height:4px;background:#2563EB}
.gcard.y .ph::after{background:#FFC107}.gcard.r .ph::after{background:#E53935}
.gcard .t{padding:6px 7px 8px}
.gcard b{display:block;font:600 10px/1.3 var(--body)}
.gcard em{font-style:normal;font-size:9px;color:var(--app-dim)}
.row{display:flex;gap:9px;align-items:center;background:var(--app-surface);border-radius:12px;
  padding:8px;margin-bottom:7px}
.thumb{width:42px;height:32px;border-radius:8px;flex:none;position:relative;overflow:hidden;background:#E8EDF4}
.thumb::after{content:"";position:absolute;inset:auto 0 0 0;height:4px;background:#2563EB}
.thumb.y::after{background:#FFC107}.thumb.r::after{background:#E53935}
.row b{display:block;font:600 11px/1.3 var(--body)}
.row em{font-style:normal;font-size:9.5px;color:var(--app-dim);font-variant-numeric:tabular-nums}
.hero-img{height:126px;background:#E8EDF4;position:relative;flex:none}
.hero-img::after{content:"";position:absolute;inset:auto 0 0 0;height:6px;
  background:linear-gradient(90deg,#2563EB 0 33.3%,#FFC107 33.3% 66.6%,#E53935 66.6% 100%)}
.card{background:var(--app-surface);border-radius:16px;padding:10px;margin-bottom:8px}
.mini{display:grid;grid-template-columns:repeat(12,1fr);gap:3px;margin-top:7px}
.mini span{aspect-ratio:1;border-radius:2px;border:1px solid var(--app-line)}
.mini span.f{border-color:transparent;background:#0F172A}
.mini span.f.b{background:#2563EB}.mini span.f.y{background:#FFC107}
.spec{display:flex;justify-content:space-between;padding:6px 0;border-top:1px solid var(--app-line);font-size:10px}
.spec b{font-weight:600;color:var(--app-dim);font-size:9px;letter-spacing:.06em;text-transform:uppercase}
.spec em{font-style:normal;font-variant-numeric:tabular-nums}
.banner{height:50px;background:linear-gradient(120deg,#2563EB,#0F172A);flex:none;position:relative}
.avatar{width:42px;height:42px;border-radius:999px;background:#FFC107;border:3px solid var(--app-bg);
  position:absolute;left:12px;bottom:-21px}
.stats-mini{display:flex;gap:12px;margin:8px 0 10px}
.stats-mini div b{display:block;font:700 14px/1.1 var(--display);font-variant-numeric:tabular-nums}
.stats-mini div em{font-style:normal;font-size:9px;color:var(--app-dim)}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.tiles i{aspect-ratio:3/4;border-radius:8px;background:var(--app-surface);border:1px solid var(--app-line);
  position:relative;overflow:hidden;display:block}
.tiles i::after{content:"";position:absolute;inset:auto 0 0 0;height:3px;background:#2563EB}
.tiles i:nth-child(2)::after{background:#FFC107}
.tiles i:nth-child(3)::after{background:#E53935}
.scr-label{font:600 9px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;
  color:var(--app-dim);margin:11px 0 6px}
.tabbar{margin-top:auto;height:42px;background:var(--app-surface);border-top:1px solid var(--app-line);
  display:flex;align-items:center;justify-content:space-around;flex:none}
.tabbar u{text-decoration:none;width:16px;height:16px;border-radius:5px;background:var(--app-line);display:block}
.tabbar u.on{background:#2563EB}

/* ——— Bölümler ——— */
.split{display:grid;gap:2.5rem clamp(2rem,5vw,4rem);grid-template-columns:1fr;align-items:center}
@media (min-width:62rem){.split{grid-template-columns:1fr 1fr}
  .split.rev>div:first-child{order:2}}
.shot{display:flex;justify-content:center}
.shot-note{text-align:center;font-size:var(--s--1);color:var(--ink-soft);margin-top:1rem}

.lines{border-top:1px solid var(--hair);margin-top:1.5rem}
.lines p{padding-block:1.35rem;border-bottom:1px solid var(--hair);
  font:600 clamp(1.1rem,2.1vw,1.45rem)/1.35 var(--display);letter-spacing:-.02em;text-wrap:balance}

.facts{list-style:none;padding:0;margin:1.4rem 0 0;display:grid;gap:0}
.facts li{padding-block:.75rem;border-bottom:1px solid var(--hair);display:flex;gap:1rem;align-items:baseline}
.facts b{font:600 var(--s--1)/1.5 var(--body);letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft);min-width:8rem;flex:none}
.facts span{color:var(--ink)}

.cards{display:grid;gap:1rem;grid-template-columns:1fr;margin-top:2rem}
@media (min-width:44rem){.cards{grid-template-columns:1fr 1fr}}
@media (min-width:66rem){.cards{grid-template-columns:repeat(3,1fr)}}
.c{background:var(--panel);border:1px solid var(--hair);border-radius:16px;padding:1.35rem}
.c h3{font:600 var(--s-1)/1.3 var(--display);letter-spacing:-.015em;margin:.7rem 0 .4rem}
.c p{color:var(--ink-soft);font-size:var(--s--1);line-height:1.6}
.c .tag{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  font:700 .8rem/1 var(--display);background:color-mix(in srgb,var(--blue) 16%,transparent);color:var(--blue)}
.c:nth-child(2) .tag{background:color-mix(in srgb,var(--amber) 22%,transparent);color:var(--amber)}
.c:nth-child(3) .tag{background:color-mix(in srgb,var(--red) 16%,transparent);color:var(--red)}

.brands{width:100%;border-collapse:collapse;margin-top:1.6rem;font-size:var(--s--1)}
.brands th{text-align:left;font:600 var(--s--1)/1.5 var(--body);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-soft);padding:.6rem .5rem;border-bottom:2px solid var(--hair);white-space:nowrap}
.brands td{padding:.6rem .5rem;border-bottom:1px solid var(--hair)}
.brands td+td{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink-soft)}
.table-scroll{overflow-x:auto}

.beta{border:1px solid var(--hair);border-radius:20px;background:var(--panel);padding:clamp(1.6rem,4vw,2.75rem)}
/* `hidden` özniteliği yazar kurallarına yenik düşmesin: aşağıdaki `form`
   kuralı `display:grid` verdiği için `form.hidden = true` görsel olarak
   HİÇBİR ŞEY yapmıyordu ve gönderim sonrası form ekranda kalıyordu. */
[hidden]{display:none!important}
form{margin-top:1.6rem;display:grid;gap:.85rem;max-width:30rem}
label{font:600 var(--s--1)/1.4 var(--body);letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-soft);display:block;margin-bottom:.35rem}
input[type=email],textarea{width:100%;min-height:48px;padding:.75rem .9rem;border:1px solid var(--hair);
  border-radius:10px;background:var(--ground);color:var(--ink);font:400 var(--s-0)/1.5 var(--body)}
textarea{min-height:84px;resize:vertical}
input::placeholder,textarea::placeholder{color:var(--ink-soft);opacity:.7}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fine{font-size:var(--s--1);color:var(--ink-soft);margin-top:1rem;max-width:30rem}
.status{font-size:var(--s-0);margin-top:.4rem;min-height:1.5rem}
.preview-note{margin-top:1.1rem;padding:.7rem .9rem;border:1px dashed var(--hair);border-radius:8px;
  color:var(--ink-soft);font-size:var(--s--1)}

footer.site{border-top:1px solid var(--hair);padding-block:2.4rem 3.4rem;color:var(--ink-soft);font-size:var(--s--1)}
footer.site .wrap{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center}
footer nav{display:flex;flex-wrap:wrap;gap:1.1rem}


/* Dropset kaydı: devasa soluk kelime + tek satır alt başlık */
.bigrow{display:grid;gap:clamp(3.5rem,7vw,6rem)}
.bigrow div{max-width:38rem}
.bigrow h3{font:700 clamp(2.4rem,6.6vw,4.6rem)/0.98 var(--display);letter-spacing:-.045em;
  margin:0 0 .2rem;color:var(--ink-faint);transition:color .3s ease}
.bigrow div:hover h3,.bigrow div:focus-within h3{color:var(--ink)}
.bigrow p{font-size:clamp(1rem,1.5vw,1.2rem);color:var(--ink-soft);max-width:30rem}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}