/* ═══════════════════════════════════════════════════════════════════════════
   resta.run AÇILIŞ SAYFASI v2 (2026-10-30, 2026-10-31 genişletildi) — includes/landing/v2.php
   Zemin: gece yeşili · Vurgu: nane · Üyelik: altın · Başlık: Bricolage Grotesque
   Gövde: Inter (ürün arayüzüyle aynı). Panel görselleri gerçek ürün ekranları;
   akış/kurye/pazar yeri/arayan sahneleri demo verili çizimler.
   Sahne animasyonları yalnız görünürken/etkinken çalışır; hareket azaltmada son kare durur.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --gece:#06110e;
  --gece-2:#082520;
  --marka:#0f766e;
  --nane:#7ee0c8;
  --nane-2:#a9f1df;
  --altin:#e9bd6a;
  --kagit:#f3f6f3;
  --murekkep:#0c1714;
  --gri:#55665f;
  --gri-k:rgba(255,255,255,.66);
  --cizgi:rgba(12,23,20,.1);
  --cizgi-k:rgba(255,255,255,.1);
  --cay:#9a2c0b;
  --baslik:'Bricolage Grotesque', Inter, system-ui, sans-serif;
  --govde:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --kap:1200px;
  --yan:20px;
  --egri:cubic-bezier(.2,.8,.2,1);
}
@media (max-width:600px){ :root{ --yan:16px } }

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:84px }
body{
  margin:0; background:var(--gece); color:var(--murekkep);
  font:400 17px/1.6 var(--govde);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ max-width:100%; height:auto; display:block }
a{ color:inherit }
h1,h2,h3,h4{ font-family:var(--baslik); font-weight:800; letter-spacing:-.03em; line-height:1.02; margin:0; text-wrap:balance }
p{ margin:0 }
main{ overflow-x:clip }
.kap{ width:100%; max-width:calc(var(--kap) + var(--yan) * 2); margin:0 auto; padding:0 var(--yan) }
:focus-visible{ outline:2px solid var(--nane); outline-offset:3px; border-radius:6px }

/* Bölüm başlıkları ortak ölçek */
.uyelik__bas h2, .panel__bas h2, .akis__bas h2, .moduller__bas h2, .kurye__metin h2,
.entegrasyon__bas h2, .rakamlar__bas h2, .ekosistem__bas h2{ font-size:clamp(38px, 5.4vw, 74px) }
.uyelik__bas p, .panel__bas p, .akis__bas p, .moduller__bas p, .kurye__alt,
.entegrasyon__bas p, .rakamlar__bas p, .ekosistem__bas p, .uygulamalar__bas p{ margin-top:20px; max-width:620px; font-size:clamp(17px, 1.5vw, 20px) }

/* İşaretli liste */
.tikli{ list-style:none; margin:24px 0 0; padding:0; display:grid; gap:12px }
.tikli li{ position:relative; padding-left:30px; font-size:16.5px; line-height:1.5 }
.tikli li::before{
  content:''; position:absolute; left:0; top:.2em; width:19px; height:19px; border-radius:50%;
  background:var(--nane) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%2306110e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.canli{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--nane) }
.canli::before{ content:''; width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 0 0 currentColor; animation:canli 2s infinite }
@keyframes canli{ 0%{ box-shadow:0 0 0 0 rgba(126,224,200,.6) } 70%{ box-shadow:0 0 0 7px rgba(126,224,200,0) } 100%{ box-shadow:0 0 0 0 rgba(126,224,200,0) } }

/* ── Düğmeler ───────────────────────────────────────────────────────────── */
.dugme{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:52px; padding:0 26px; border-radius:999px; border:0; cursor:pointer;
  font:600 16px/1 var(--govde); text-decoration:none; white-space:nowrap;
  transition:transform .2s var(--egri), background-color .2s, box-shadow .2s, color .2s;
}
.dugme:active{ transform:scale(.97) }
.dugme--nane{ background:var(--nane); color:var(--gece); box-shadow:0 12px 32px -12px rgba(126,224,200,.6) }
.dugme--nane:hover{ background:var(--nane-2) }
.dugme--cizgi{ color:#fff; background:transparent; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28) }
.dugme--cizgi:hover{ box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.65) }
.dugme--koyu{ background:var(--gece); color:#fff }
.dugme--cizgi-koyu{ color:var(--murekkep); box-shadow:inset 0 0 0 1.5px rgba(12,23,20,.18) }
.dugme--cizgi-koyu:hover{ box-shadow:inset 0 0 0 1.5px rgba(12,23,20,.5) }
.dugme--kucuk{ min-height:40px; padding:0 18px; font-size:14.5px }

/* ── Üst bar ────────────────────────────────────────────────────────────── */
.ust{ position:fixed; inset:0 0 auto; z-index:50; transition:background-color .3s, box-shadow .3s }
.ust.is-dolu, .ust.is-acik{
  background:rgba(6,17,14,.8);
  -webkit-backdrop-filter:saturate(1.4) blur(14px); backdrop-filter:saturate(1.4) blur(14px);
  box-shadow:0 1px 0 var(--cizgi-k);
}
.ust__ic{ display:flex; align-items:center; gap:28px; height:72px }
.ust__logo img{ height:27px; width:auto }
.ust__menu{ display:flex; align-items:center; gap:24px; margin-left:auto }
.ust__menu a{ color:rgba(255,255,255,.75); text-decoration:none; font-size:15px; font-weight:500; transition:color .2s }
.ust__menu a:hover{ color:#fff }
.ust__burger{ display:none }
@media (max-width:1060px){
  .ust__ic{ gap:12px; height:64px }
  .ust__menu{
    position:fixed; inset:64px 0 auto; flex-direction:column; align-items:stretch; gap:0;
    padding:8px var(--yan) 20px; background:rgba(6,17,14,.97);
    opacity:0; visibility:hidden; transform:translateY(-6px);
    transition:opacity .25s, transform .25s var(--egri), visibility .25s;
  }
  .ust__menu a{ font-size:18px; padding:13px 0; border-bottom:1px solid var(--cizgi-k) }
  .ust.is-acik .ust__menu{ opacity:1; visibility:visible; transform:none }
  .ust__cta{ margin-left:auto }
  .ust__burger{
    display:inline-flex; flex-direction:column; justify-content:center; gap:6px;
    width:44px; height:44px; padding:12px 11px; margin-right:-8px;
    background:none; border:0; cursor:pointer;
  }
  .ust__burger span{ height:2px; background:#fff; border-radius:2px; transition:transform .25s var(--egri) }
  .ust.is-acik .ust__burger span:first-child{ transform:translateY(4px) rotate(45deg) }
  .ust.is-acik .ust__burger span:last-child{ transform:translateY(-4px) rotate(-45deg) }
}

/* ── Giriş ──────────────────────────────────────────────────────────────── */
.giris{
  position:relative; padding:132px 0 84px; color:#fff;
  background:
    radial-gradient(1100px 620px at 72% -12%, rgba(15,118,110,.5), transparent 62%),
    radial-gradient(760px 520px at -6% 34%, rgba(126,224,200,.1), transparent 62%),
    var(--gece);
}
.giris__metin{ display:flex; flex-direction:column; align-items:center; text-align:center }
.giris__yeni{
  display:inline-flex; align-items:center; gap:10px; margin-bottom:28px;
  padding:5px 16px 5px 5px; border-radius:999px; text-decoration:none;
  font-size:14px; color:rgba(255,255,255,.82);
  background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
  transition:background-color .2s;
}
.giris__yeni:hover{ background:rgba(255,255,255,.1) }
.giris__yeni b{ padding:4px 11px; border-radius:999px; font-size:12.5px; font-weight:700; color:#2b1a02; background:var(--altin) }
.giris__baslik{ font-size:clamp(46px, 8vw, 104px); line-height:.95; letter-spacing:-.045em }
.giris__baslik em{ font-style:normal; color:var(--nane) }
.tek-satir{ white-space:nowrap }
.giris__alt{ margin-top:26px; max-width:640px; font-size:clamp(17px, 1.6vw, 20px); line-height:1.55; color:rgba(255,255,255,.72) }
.giris__cta{ margin-top:34px; display:flex; flex-wrap:wrap; justify-content:center; gap:12px }
.giris__not{ margin-top:16px; font-size:14px; color:rgba(255,255,255,.48) }

.giris__sahne{ --egim:1; --tel-w:clamp(118px, 23vw, 286px); position:relative; margin-top:56px; perspective:2000px; perspective-origin:50% 0 }
.tarayici{
  border-radius:14px; overflow:hidden; background:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.07), 0 50px 120px -40px rgba(0,0,0,.85), 0 30px 70px -40px rgba(15,118,110,.55);
}
.tarayici__ust{ display:flex; align-items:center; gap:7px; height:34px; padding:0 14px; background:#eef1ef; border-bottom:1px solid #dfe5e1 }
.tarayici__ust i{ width:11px; height:11px; border-radius:50%; background:#d3dad6 }
.tarayici__ust span{ margin:0 auto; transform:translateX(-24px); padding:3px 44px; border-radius:7px; font:500 12.5px/1.4 var(--govde); color:#6b7a75; background:#fff }
.tarayici--giris{
  max-width:1120px; margin:0 auto; transform-origin:50% 0;
  transform:
    rotateX(calc(var(--egim) * 14deg + var(--my, 0) * -2deg))
    rotateY(calc(var(--mx, 0) * 3deg))
    scale(calc(1 - var(--egim) * .04));
  will-change:transform;
}
.giris__sayilar{
  list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:20px clamp(28px, 5vw, 64px);
  margin-top:120px; padding-top:30px; border-top:1px solid var(--cizgi-k);
  font-size:15px; color:rgba(255,255,255,.58);
}
.giris__sayilar b{ display:block; font:800 clamp(26px, 3vw, 38px)/1.1 var(--baslik); letter-spacing:-.02em; color:#fff; font-variant-numeric:tabular-nums }

/* ── Telefon çerçevesi ──────────────────────────────────────────────────── */
.telefon{
  --w:300px; --durum-h:calc(var(--w) * .1);
  width:var(--w); padding:calc(var(--w) * .03); border-radius:calc(var(--w) * .16);
  background:linear-gradient(150deg, #24302d, #060a09 55%);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.14), 0 40px 90px -30px rgba(0,0,0,.8);
}
.telefon__ekran{ position:relative; overflow:hidden; border-radius:calc(var(--w) * .13); background:#fefefe }
.telefon__ekran img{ width:100% }
.telefon__durum{
  position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between;
  height:var(--durum-h); padding:0 calc(var(--w) * .08) 0 calc(var(--w) * .1);
  font:600 calc(var(--w) * .04)/1 var(--govde); color:#0c1714; background:#fefefe;
  transition:background-color .45s, color .45s;
}
.telefon__ada{ position:absolute; left:50%; top:calc(var(--w) * .022); width:calc(var(--w) * .27); height:calc(var(--w) * .068); transform:translateX(-50%); border-radius:999px; background:#000 }
.telefon__simge{ display:flex; align-items:flex-end; gap:calc(var(--w) * .006) }
.telefon__simge b{ width:calc(var(--w) * .009); border-radius:1px; background:currentColor }
.telefon__simge b:nth-child(1){ height:calc(var(--w) * .014) }
.telefon__simge b:nth-child(2){ height:calc(var(--w) * .022) }
.telefon__simge b:nth-child(3){ height:calc(var(--w) * .03) }
.telefon__simge em{ width:calc(var(--w) * .06); height:calc(var(--w) * .028); margin-left:calc(var(--w) * .014); border-radius:3px; background:currentColor; box-shadow:inset 0 0 0 1px currentColor }

.telefon--giris{
  --w:var(--tel-w);
  position:absolute; right:max(0px, calc(50% - 600px)); bottom:calc(var(--w) * -.32);
  transform:
    translate3d(calc(var(--mx, 0) * -10px), calc(var(--egim) * 80px), 0)
    rotateY(calc(-14deg + var(--mx, 0) * 4deg))
    rotateX(calc(var(--egim) * 8deg + 2deg))
    rotateZ(3deg);
  will-change:transform;
}

/* Giriş telefonu slaytı: QR menünün ekranları uygulamadaki gibi sağdan itilerek gelir */
.slayt{ position:relative; aspect-ratio:780 / 1688; overflow:hidden; background:#f4f6f5; touch-action:pan-y; cursor:pointer }
.slayt img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:translate3d(100%, 0, 0); z-index:0; visibility:hidden;
}
.slayt img.is-on{ transform:none; z-index:2; visibility:visible; transition:transform .75s var(--egri); box-shadow:-18px 0 40px -18px rgba(0,0,0,.35) }
.slayt img.is-cik{ transform:translate3d(-28%, 0, 0); z-index:1; visibility:visible; filter:brightness(.82); transition:transform .75s var(--egri), filter .75s var(--egri) }
.slayt.is-geri img.is-on{ box-shadow:none }
.slayt.is-geri img.is-cik{ transform:translate3d(100%, 0, 0); z-index:3; filter:none }
.slayt.is-geri img.is-on.is-gelen{ animation:slaytGeri .75s var(--egri) both }
@keyframes slaytGeri{ from{ transform:translate3d(-28%, 0, 0); filter:brightness(.82) } }

/* Etiket: telefonun solunda, hangi ekranın gösterildiğini anlatır */
.ekran-etiket{
  --sure:3.6s;
  position:absolute; z-index:3; width:250px;
  right:calc(max(0px, 50% - 600px) + var(--tel-w) * 1.02 + 22px); bottom:calc(var(--tel-w) * .36);
  padding:14px 16px 15px; border-radius:18px; color:#fff;
  background:rgba(8,20,17,.72); backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1), 0 24px 50px -24px rgba(0,0,0,.7);
  transform:translate3d(calc(var(--mx, 0) * -6px), calc(var(--egim) * 80px), 0);
}
.ekran-etiket__cubuk{ display:flex; gap:4px }
.ekran-etiket__cubuk button{ flex:1; height:16px; margin:-6px 0; padding:6px 0; border:0; background:none; cursor:pointer }
.ekran-etiket__cubuk i{ display:block; height:4px; border-radius:99px; background:rgba(255,255,255,.2); overflow:hidden; position:relative }
.ekran-etiket__cubuk i::after{ content:''; position:absolute; inset:0; border-radius:inherit; background:var(--nane); transform:scaleX(0); transform-origin:0 50% }
.ekran-etiket__cubuk .is-gecti i::after{ transform:none }
.ekran-etiket__cubuk [aria-current] i::after{ transform:none }
.ekran-etiket.is-oynuyor .ekran-etiket__cubuk [aria-current] i::after{ animation:etiketDol var(--sure) linear both }
.ekran-etiket.is-durdu .ekran-etiket__cubuk [aria-current] i::after{ animation-play-state:paused }
@keyframes etiketDol{ from{ transform:scaleX(0) } to{ transform:none } }
.ekran-etiket__cubuk button:focus-visible{ outline:2px solid var(--nane); outline-offset:2px; border-radius:4px }
.ekran-etiket__metin{ margin:12px 0 0; display:grid; gap:3px }
.ekran-etiket__metin b{ font:700 17px/1.2 var(--baslik); letter-spacing:-.01em }
.ekran-etiket__metin span{ font-size:13.5px; line-height:1.4; color:rgba(255,255,255,.66) }
.ekran-etiket__metin.is-yeni{ animation:etiketMetin .5s var(--egri) both }
@keyframes etiketMetin{ from{ opacity:0; transform:translateY(6px) } }

/* ── Üyelik: işletmenin dostu ───────────────────────────────────────────── */
.uyelik{
  padding:150px 0 110px; color:#fff;
  background:
    radial-gradient(700px 520px at 78% 40%, rgba(233,189,106,.1), transparent 65%),
    linear-gradient(180deg, var(--gece) 0%, var(--gece-2) 32%, var(--gece-2) 100%);
}
.uyelik__bas{ max-width:780px }
.uyelik__bas h2 span{ color:var(--altin) }
.uyelik__bas p{ color:var(--gri-k) }

.hikaye{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:48px; margin-top:40px }
.hikaye__adimlar{ list-style:none; margin:0; padding:0 }
.hikaye__adim{ min-height:66vh; display:flex; flex-direction:column; justify-content:center; padding:24px 0; opacity:.3; transition:opacity .5s var(--egri) }
.hikaye__adim.is-on{ opacity:1 }
.hikaye__no{
  display:inline-grid; place-items:center; width:34px; height:34px; margin-bottom:18px; border-radius:50%;
  font:700 15px/1 var(--govde); color:#2b1a02; background:var(--altin);
}
.hikaye__adim h3{ font-size:clamp(34px, 4.2vw, 56px) }
.hikaye__adim p{ margin-top:14px; max-width:450px; font-size:18px; color:rgba(255,255,255,.72) }
.hikaye__mobil{ display:none }
.hikaye__sahne{ position:sticky; top:calc(50vh - 330px); height:660px; display:grid; place-items:center; perspective:1600px }
.hikaye__sahne::before{
  content:''; position:absolute; width:440px; height:440px; border-radius:50%;
  background:radial-gradient(circle, rgba(233,189,106,.24), transparent 66%);
}
.telefon--hikaye{
  --w:290px; position:relative;
  transform:rotateY(var(--hy, -10deg)) rotateX(4deg);
  transition:transform 1s var(--egri);
}
.telefon--hikaye .telefon__ekran img + img{ position:absolute; left:0; top:var(--durum-h) }
.telefon--hikaye .telefon__ekran img{ opacity:0; transform:scale(1.02); transition:opacity .5s var(--egri), transform .7s var(--egri) }
.telefon--hikaye .telefon__ekran img.is-on{ opacity:1; transform:none }
.telefon--hikaye.is-karartma .telefon__durum{ background:#848484; color:#fff }

.katmanlar{ list-style:none; margin:72px 0 0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px }
.katmanlar li{ padding:24px 24px 26px; border-radius:20px; background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px rgba(233,189,106,.18) }
.katmanlar b{ display:block; font:800 26px/1 var(--baslik); letter-spacing:-.02em; color:var(--altin) }
.katmanlar li:first-child b{ color:var(--nane) }
.katmanlar li:last-child{ background:linear-gradient(150deg, rgba(233,189,106,.16), rgba(233,189,106,.04)) }
.katmanlar span{ display:block; margin-top:10px; font-size:15.5px; line-height:1.5; color:var(--gri-k) }
.katmanlar__not{ margin-top:14px; font-size:14px; color:rgba(255,255,255,.5) }

/* ── Tek panel ──────────────────────────────────────────────────────────── */
.panel{ padding:140px 0 120px; background:var(--kagit) }
.panel__bas{ max-width:780px; margin:0 auto; text-align:center }
.panel__bas p{ margin-left:auto; margin-right:auto; color:var(--gri) }
.sekmeler{
  display:flex; gap:4px; width:max-content; max-width:100%; margin:44px auto 0; padding:5px;
  border-radius:999px; background:#fff; box-shadow:0 0 0 1px var(--cizgi), 0 12px 30px -20px rgba(12,23,20,.35);
  overflow-x:auto; scrollbar-width:none;
}
.sekmeler::-webkit-scrollbar{ display:none }
.sekmeler button{
  flex:none; appearance:none; border:0; background:transparent; cursor:pointer;
  padding:11px 20px; border-radius:999px; font:600 15px/1 var(--govde); color:var(--gri);
  transition:background-color .25s, color .25s;
}
.sekmeler button:hover{ color:var(--murekkep) }
.sekmeler button[aria-selected="true"]{ background:var(--gece); color:#fff }
.vitrin{ margin-top:36px; perspective:2200px }
.tarayici--vitrin{
  max-width:1100px; margin:0 auto; transform-origin:50% 0; overflow:visible;
  box-shadow:0 0 0 1px var(--cizgi), 0 50px 100px -50px rgba(6,17,14,.55);
  transition:transform 1.1s var(--egri);
}
.tarayici--vitrin .tarayici__ust{ border-radius:14px 14px 0 0 }
.js .vitrin.belir .tarayici--vitrin{ transform:rotateX(16deg) scale(.96) }
.js .vitrin.is-gorundu .tarayici--vitrin{ transform:none }
.vitrin__kareler{ position:relative; background:#f8faf9; border-radius:0 0 14px 14px }
.vitrin__kareler img{ width:100%; border-radius:0 0 14px 14px }
.vitrin__kareler img + img{ position:absolute; inset:0 }
.vitrin__kareler img{ opacity:0; transform:scale(1.012); transition:opacity .45s var(--egri), transform .7s var(--egri) }
.vitrin__kareler img.is-on{ opacity:1; transform:none }

/* Ekran üstündeki numaralı işaretler */
.noktalar{ position:absolute; inset:0; visibility:hidden }
.noktalar.is-on{ visibility:visible }
.nokta{
  position:absolute; left:var(--x); top:var(--y); z-index:1;
  width:30px; height:30px; margin:-15px 0 0 -15px; padding:0; border:0; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; font:700 13px/1 var(--govde); color:var(--gece);
  background:var(--nane); box-shadow:0 0 0 4px rgba(6,17,14,.85), 0 10px 22px -6px rgba(6,17,14,.6);
  transition:transform .25s var(--egri), background-color .2s;
}
.nokta::before{ content:''; position:absolute; inset:-4px; border-radius:50%; border:2px solid var(--nane); opacity:0 }
.nokta em{
  position:absolute; bottom:calc(100% + 12px); left:50%; z-index:2;
  width:max-content; max-width:240px; padding:8px 12px; border-radius:10px;
  font:500 13.5px/1.35 var(--govde); font-style:normal; text-align:left; color:#fff; background:var(--gece);
  box-shadow:0 14px 30px -12px rgba(6,17,14,.6);
  opacity:0; transform:translate(-50%, 6px); pointer-events:none; transition:opacity .2s, transform .25s var(--egri);
}
.nokta--sag em{ left:auto; right:-8px; transform:translateY(6px) }
.nokta--sol em{ left:-8px; transform:translateY(6px) }
.nokta--alt em{ bottom:auto; top:calc(100% + 12px) }
.nokta:hover, .nokta.is-vurgu{ transform:scale(1.14); background:#fff; z-index:3 }
.nokta:hover em, .nokta.is-vurgu em{ opacity:1; transform:translate(-50%, 0) }
.nokta--sag:hover em, .nokta--sag.is-vurgu em, .nokta--sol:hover em, .nokta--sol.is-vurgu em{ transform:none }
.js .noktalar .nokta{ opacity:0; transform:scale(.4) }
.js .noktalar.is-on .nokta{ animation:noktaGel .55s var(--egri) calc(var(--d) + .25s) both }
.js .noktalar.is-on .nokta::before{ animation:noktaHalka 1.4s ease-out calc(var(--d) + .6s) 2 }
.js .noktalar.is-on .nokta:hover, .js .noktalar.is-on .nokta.is-vurgu{ animation:none; opacity:1; transform:scale(1.14) }
@keyframes noktaGel{ from{ opacity:0; transform:scale(.4) } to{ opacity:1; transform:none } }
@keyframes noktaHalka{ from{ opacity:.9; transform:scale(1) } to{ opacity:0; transform:scale(1.9) } }

.vitrin__alt{ max-width:1000px; margin:30px auto 0 }
.vitrin__not{ min-height:3.2em; text-align:center; font-size:18px; color:var(--gri) }
.vitrin__liste{ list-style:none; margin:20px 0 0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px 24px }
.vitrin__liste[hidden]{ display:none }
.vitrin__liste li{ display:flex; align-items:baseline; gap:10px; padding:8px 10px; border-radius:10px; font-size:15px; line-height:1.45; color:var(--murekkep); cursor:default; transition:background-color .2s }
.vitrin__liste li:hover, .vitrin__liste li.is-vurgu{ background:#fff; box-shadow:0 0 0 1px var(--cizgi) }
.vitrin__liste span{ flex:none; display:grid; place-items:center; width:22px; height:22px; border-radius:50%; font:700 12px/1 var(--govde); color:var(--gece); background:var(--nane) }

/* ── Akış: bir siparişin yolculuğu ──────────────────────────────────────── */
.akis{ padding:130px 0 120px; background:#fff }
.akis__bas{ max-width:820px }
.akis__bas h2 span{ color:var(--marka) }
.akis__bas p{ color:var(--gri) }
.akis__govde{ display:grid; grid-template-columns:minmax(0, 1.08fr) minmax(0, .92fr); gap:64px; margin-top:40px }
.akis__sahne{ position:sticky; top:calc(50vh - 280px); height:560px }
.akis__adimlar{ list-style:none; margin:0; padding:0 }
.akis__adim{ min-height:56vh; display:flex; flex-direction:column; justify-content:center; padding:24px 0; opacity:.28; transition:opacity .5s var(--egri) }
.akis__adim.is-on{ opacity:1 }
.akis__no{ display:inline-grid; place-items:center; width:34px; height:34px; margin-bottom:16px; border-radius:50%; font:700 15px/1 var(--govde); color:#fff; background:var(--marka) }
.akis__adim h3{ font-size:clamp(32px, 3.8vw, 50px) }
.akis__adim p{ margin-top:12px; max-width:440px; font-size:18px; color:var(--gri) }

.akis__cerceve{
  position:relative; height:100%; overflow:hidden; border-radius:30px; color:#fff; font-size:16px;
  background:
    radial-gradient(520px 380px at 80% 0%, rgba(126,224,200,.16), transparent 70%),
    radial-gradient(420px 300px at 0% 100%, rgba(233,189,106,.1), transparent 70%),
    var(--gece-2);
  box-shadow:0 50px 90px -50px rgba(6,17,14,.65);
}
.kare{
  position:absolute; inset:0; padding:2.4em; display:flex; flex-direction:column; justify-content:center; align-items:center;
  opacity:0; transform:translateY(16px) scale(.98); transition:opacity .5s var(--egri), transform .6s var(--egri);
}
.kare.is-on{ opacity:1; transform:none }
.kare__baslik{ align-self:stretch; display:flex; justify-content:space-between; align-items:baseline; margin-bottom:1.1em }
.kare__baslik b{ font:700 1.2em/1 var(--baslik); letter-spacing:-.01em }
.kare__baslik span:not(.canli){ font-size:.8em; color:var(--gri-k) }
.kare__dip{ align-self:stretch; margin-top:1.2em; font-size:.88em; color:var(--gri-k) }
.kare__dip b{ color:#fff }

/* fiş */
.fis{ position:relative; width:13.5em; padding:1em 1.1em; border-radius:16px; color:var(--murekkep); background:#fff; box-shadow:0 24px 50px -24px rgba(0,0,0,.6) }
.fis--genis{ width:19em }
.fis__ust{ display:flex; flex-direction:column; gap:2px; padding-bottom:.7em; border-bottom:1px dashed var(--cizgi) }
.fis__ust b{ font:800 1.15em/1.1 var(--baslik) }
.fis__ust span{ font-size:.75em; color:var(--gri) }
.fis__kalem{ list-style:none; margin:.6em 0 0; padding:0; display:grid; gap:.42em }
.fis__kalem li{ display:grid; grid-template-columns:auto 1fr auto; gap:.5em; font-size:.84em }
.fis__kalem i{ font-style:normal; color:var(--gri) }
.fis__kalem span{ font-variant-numeric:tabular-nums }
.fis__top{ display:flex; justify-content:space-between; margin-top:.8em; padding-top:.7em; border-top:1px solid var(--cizgi); font-size:.85em; color:var(--gri) }
.fis__top b{ font:800 1.25em/1 var(--baslik); color:var(--murekkep) }

.kare--kanal{ flex-direction:row; gap:0; padding:2.4em 2em }
.kanallar{ list-style:none; margin:0; padding:0; height:17.5em; display:grid; grid-template-rows:repeat(4, 1fr); align-items:center; flex:none }
.kanallar li{ display:flex; flex-direction:column; padding:.55em .85em; border-radius:12px; background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08) }
.kanallar b{ font-size:.86em; font-weight:600 }
.kanallar span{ font-size:.72em; color:var(--gri-k) }
.hatlar{ flex:1; min-width:2em; height:17.5em }
.hatlar path{ fill:none; stroke:var(--nane); stroke-opacity:.45; stroke-width:1.6; vector-effect:non-scaling-stroke; stroke-dasharray:4 7 }
.kare--kanal.is-on .hatlar path{ animation:hatAk 1s linear infinite }
@keyframes hatAk{ to{ stroke-dashoffset:-22 } }
.kare--kanal .fis{ flex:none }
.kare--kanal.is-on .fis__kalem li{ animation:belirAsagi .5s var(--egri) both }
.kare--kanal.is-on .fis__kalem li:nth-child(1){ animation-delay:.35s }
.kare--kanal.is-on .fis__kalem li:nth-child(2){ animation-delay:.75s }
.kare--kanal.is-on .fis__kalem li:nth-child(3){ animation-delay:1.15s }
.kare--kanal.is-on .fis__top{ animation:belirAsagi .5s var(--egri) 1.5s both }
@keyframes belirAsagi{ from{ opacity:0; transform:translateY(-6px) } to{ opacity:1; transform:none } }

/* mutfak */
.kds{ position:relative; width:30em; max-width:100%; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:.625em }
.kds__sutun{ display:flex; flex-direction:column; gap:.5em; min-height:12em; padding:.625em; border-radius:14px; background:rgba(255,255,255,.05) }
.kds__sutun > p{ font-size:.75em; font-weight:600; color:var(--gri-k) }
.kds__fis{ display:flex; flex-direction:column; gap:2px; min-height:4.1em; padding:.55em .7em; border-radius:10px; font-size:.78em; color:var(--murekkep); background:#fff; border-left:4px solid #f59e0b }
.kds__fis b{ font-weight:700 }
.kds__fis span, .kds__fis em{ color:var(--gri); font-style:normal }
.kds__fis--hazir{ border-left-color:#10b981 }
.kds__sutun:nth-child(2) .kds__fis{ border-left-color:#3b82f6 }
.kds__fis--hayalet{ background:transparent; border:1.5px dashed rgba(255,255,255,.18) }
.kds__gezgin{
  position:absolute; left:.625em; top:2.35em; width:calc((100% - 1.25em) / 3 - 1.25em); min-height:4.1em;
  display:flex; flex-direction:column; gap:2px; padding:.55em .7em; border-radius:10px; font-size:.78em;
  color:var(--murekkep); background:#fff; border-left:4px solid #f59e0b; box-shadow:0 14px 30px -10px rgba(0,0,0,.6);
}
.kds__gezgin span{ color:var(--gri) }
.kds__gezgin em{ font-style:normal; font-weight:600; color:#b45309 }
.kare--mutfak.is-on .kds__gezgin{ animation:kdsGez 5.4s var(--egri) .2s both }
@keyframes kdsGez{
  0%{ opacity:0; transform:translateY(-18px) }
  8%, 34%{ opacity:1; transform:none; border-left-color:#f59e0b }
  46%, 70%{ opacity:1; transform:translateX(calc(100% + 1.25em + .625em)); border-left-color:#3b82f6 }
  82%, 100%{ opacity:1; transform:translateX(calc(200% + 2.5em + 1.25em)); border-left-color:#10b981 }
}
.zil{ display:inline-block; width:.6em; height:.6em; margin-right:.5em; border-radius:50%; background:var(--altin); vertical-align:.05em }
.kare--mutfak.is-on .zil{ animation:zil 1s ease-out 3 }
@keyframes zil{ 0%{ box-shadow:0 0 0 0 rgba(233,189,106,.7) } 100%{ box-shadow:0 0 0 10px rgba(233,189,106,0) } }

/* garson cebi */
.cep{
  width:15em; height:25em; padding:2.2em 1em 1em; border-radius:2.4em; text-align:center;
  background:linear-gradient(170deg, #1d5a4f, #0a2520 70%);
  box-shadow:inset 0 0 0 .45em #050a09, inset 0 0 0 .55em rgba(255,255,255,.12), 0 30px 60px -28px rgba(0,0,0,.8);
}
.cep__saat{ font:600 3.4em/1 var(--govde); letter-spacing:-.03em }
.cep__tarih{ margin-top:.4em; font-size:.82em; color:var(--gri-k) }
.bildirim{ margin-top:2em; padding:.8em .9em; border-radius:1.1em; text-align:left; color:var(--murekkep); background:rgba(255,255,255,.92); box-shadow:0 14px 30px -14px rgba(0,0,0,.6) }
.bildirim__ust{ display:flex; justify-content:space-between; font-size:.7em; color:var(--gri) }
.bildirim__ust b{ color:var(--marka) }
.bildirim__baslik{ margin-top:.25em; font-weight:700; font-size:.95em }
.bildirim__metin{ font-size:.78em; color:var(--gri) }
.kare--garson.is-on .cep{ animation:titre .5s ease-in-out .9s 2 }
.kare--garson.is-on .bildirim{ animation:bildirimGel .6s var(--egri) .7s both }
@keyframes bildirimGel{ from{ opacity:0; transform:translateY(-22px) scale(.96) } to{ opacity:1; transform:none } }
@keyframes titre{ 0%, 100%{ transform:rotate(0) } 25%{ transform:rotate(-2.2deg) } 75%{ transform:rotate(2.2deg) } }

/* hesap */
.odeme{ display:flex; gap:3px; height:.7em; margin-top:.9em; border-radius:999px; overflow:hidden; background:#edf1ee }
.odeme i{ display:block; height:100% }
.odeme__nakit{ width:46.9%; background:var(--marka) }
.odeme__kart{ width:53.1%; background:var(--altin) }
.kare--hesap.is-on .odeme i{ animation:dolBar .8s var(--egri) both }
.kare--hesap.is-on .odeme__nakit{ animation-delay:.4s }
.kare--hesap.is-on .odeme__kart{ animation-delay:1s }
@keyframes dolBar{ from{ transform:scaleX(0); transform-origin:0 50% } to{ transform:none; transform-origin:0 50% } }
.odeme__acik{ display:flex; justify-content:space-between; margin-top:.5em; font-size:.74em; color:var(--gri) }
.odeme__acik i{ display:inline-block; width:.7em; height:.7em; margin-right:.35em; border-radius:3px; vertical-align:-.05em }
.odeme__acik .nakit{ background:var(--marka) }
.odeme__acik .kart{ background:var(--altin) }
.fis__dugmeler{ display:grid; grid-template-columns:repeat(3, 1fr); gap:.4em; margin-top:.9em }
.fis__dugmeler span{ padding:.55em 0; border-radius:9px; text-align:center; font-size:.74em; font-weight:600; background:#edf1ee }
.fis__dugmeler .is-bas{ color:#fff; background:var(--gece) }
.kare--hesap.is-on .is-bas{ animation:bas .35s ease-in-out 2s both }
@keyframes bas{ 50%{ transform:scale(.92) } }
.damga{
  position:absolute; right:.8em; top:1.6em; padding:.25em .7em; border:2px solid var(--marka); border-radius:8px;
  font:800 1.05em/1 var(--baslik); letter-spacing:.02em; color:var(--marka); transform:rotate(-8deg); opacity:0;
}
.kare--hesap.is-on .damga{ animation:damga .45s cubic-bezier(.3,1.6,.5,1) 2.35s both }
@keyframes damga{ from{ opacity:0; transform:rotate(-8deg) scale(1.8) } to{ opacity:1; transform:rotate(-8deg) } }

/* stok */
.kare--stok, .kare--defter{ align-items:stretch }
.stok{ list-style:none; margin:0; padding:0; display:grid; gap:.8em }
.stok li{
  display:grid; grid-template-columns:6.6em minmax(0, 1fr) 5.6em 3.2em; align-items:center; gap:.8em;
  padding:.75em .9em; border-radius:14px; background:rgba(255,255,255,.05); font-size:.86em;
}
.stok b{ font-weight:600 }
.stok i{ height:.5em; border-radius:999px; background:rgba(255,255,255,.1); overflow:hidden }
.stok em{ display:block; height:100%; width:var(--a); border-radius:inherit; background:var(--nane); transition:width 1s var(--egri) }
.kare--stok.is-on .stok em{ width:var(--b); transition-delay:calc(var(--d) + .7s) }
.stok > li > span{ position:relative; display:inline-grid; justify-content:end; white-space:nowrap; text-align:right; font-variant-numeric:tabular-nums }
.stok s, .stok u{ grid-area:1 / 1; text-decoration:none; transition:opacity .4s }
.stok u{ opacity:0 }
.kare--stok.is-on .stok s{ opacity:0; transition-delay:calc(var(--d) + .7s) }
.kare--stok.is-on .stok u{ opacity:1; transition-delay:calc(var(--d) + .7s) }
.stok small{ justify-self:end; padding:.15em .45em; border-radius:6px; font-size:.82em; font-weight:700; color:#fecaca; background:rgba(239,68,68,.18); opacity:0 }
.kare--stok.is-on .stok small{ animation:belirAsagi .4s var(--egri) calc(var(--d) + .7s) both }

/* defter */
.defter{ list-style:none; margin:0; padding:0; display:grid; gap:.6em }
.defter li{ display:grid; grid-template-columns:minmax(0, 1fr) auto; grid-template-rows:auto auto; column-gap:1em; padding:.8em 1em; border-radius:14px; background:rgba(255,255,255,.05) }
.defter b{ font-size:.9em; font-weight:600 }
.defter span{ grid-row:2; font-size:.74em; color:var(--gri-k) }
.defter em{ grid-row:1 / 3; grid-column:2; align-self:center; font-style:normal; font-weight:700; font-variant-numeric:tabular-nums; color:var(--nane) }
.kare--defter.is-on .defter li{ animation:belirSola .5s var(--egri) calc(var(--d) + .3s) both }
@keyframes belirSola{ from{ opacity:0; transform:translateX(18px) } to{ opacity:1; transform:none } }
.defter__ozet{ display:flex; justify-content:space-between; align-items:baseline; margin-top:1em; padding-top:1em; border-top:1px solid var(--cizgi-k) }
.defter__ozet span{ font-size:.85em; color:var(--gri-k) }
.defter__ozet b{ font:800 2em/1 var(--baslik); letter-spacing:-.02em }

/* ── Modüller ───────────────────────────────────────────────────────────── */
.moduller{ padding:130px 0 130px; background:var(--kagit) }
.moduller__bas{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:20px 60px }
.moduller__bas p{ max-width:440px; margin-top:0; color:var(--gri) }
.suzgec{ display:flex; flex-wrap:wrap; gap:8px; margin-top:40px }
.suzgec button{
  appearance:none; border:0; cursor:pointer; padding:10px 16px; border-radius:999px;
  font:600 14.5px/1 var(--govde); color:var(--murekkep); background:#fff; box-shadow:inset 0 0 0 1px var(--cizgi);
  transition:background-color .2s, color .2s, box-shadow .2s;
}
.suzgec button span{ margin-left:4px; font-weight:500; color:var(--gri) }
.suzgec button:hover{ box-shadow:inset 0 0 0 1px rgba(12,23,20,.35) }
.suzgec button[aria-pressed="true"]{ color:#fff; background:var(--gece); box-shadow:none }
.suzgec button[aria-pressed="true"] span{ color:var(--nane) }
.modul-izgara{ list-style:none; margin:24px 0 0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px }
.modul{
  position:relative; display:flex; flex-direction:column; padding:24px 24px 22px; border-radius:20px; background:#fff;
  box-shadow:0 0 0 1px var(--cizgi); transition:transform .3s var(--egri), box-shadow .3s;
}
.modul:hover{ transform:translateY(-3px); box-shadow:0 0 0 1px rgba(12,23,20,.14), 0 22px 40px -26px rgba(6,17,14,.45) }
.modul[hidden]{ display:none }
.modul.is-gelen{ animation:modulGel .5s var(--egri) calc(var(--s, 0) * 40ms) both }
@keyframes modulGel{ from{ opacity:0; transform:translateY(12px) scale(.98) } to{ opacity:1; transform:none } }
.modul__kat{ font-size:13px; font-weight:600; color:var(--marka) }
.modul__kat b{ margin-left:6px; padding:2px 8px; border-radius:999px; font-size:11.5px; color:#2b1a02; background:var(--altin) }
.modul h3{ margin-top:10px; font-size:22px; line-height:1.15; letter-spacing:-.02em }
.modul__ds{ flex:1; margin-top:10px; font-size:15px; line-height:1.55; color:var(--gri) }
.modul__git{ align-self:flex-start; margin-top:16px; font-size:14px; font-weight:600; text-decoration:none; color:var(--marka) }
.modul__git span{ display:inline-block; transition:transform .2s var(--egri) }
.modul__git:hover span{ transform:translateX(3px) }

/* ── Kurye ──────────────────────────────────────────────────────────────── */
.kurye{ padding:140px 0 130px; color:#fff; background:radial-gradient(800px 520px at 90% 30%, rgba(15,118,110,.32), transparent 65%), var(--gece) }
.kurye__ic{ display:grid; grid-template-columns:minmax(0, .95fr) minmax(0, 1.05fr); align-items:center; gap:64px }
.kurye__metin h2 span{ color:var(--nane) }
.kurye__alt{ color:var(--gri-k) }
.kurye .tikli li{ color:rgba(255,255,255,.86) }
.ag-kart{ margin-top:34px; padding:22px 24px; border-radius:20px; background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px var(--cizgi-k) }
.ag-kart h3{ font-size:22px; letter-spacing:-.02em }
.ag-kart p{ margin-top:8px; font-size:15.5px; color:var(--gri-k) }
.ag-kart__lnk{ display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:14px }
.ag-kart__lnk a{ font-size:15px; font-weight:600; color:var(--nane); text-decoration:none }
.ag-kart__lnk a:hover{ text-decoration:underline }
.kurye__sahne{ position:relative; padding-bottom:70px }
.harita{ border-radius:28px; overflow:hidden; background:#0b1f1a; box-shadow:inset 0 0 0 1px var(--cizgi-k), 0 50px 90px -50px rgba(0,0,0,.9) }
.harita svg{ display:block; width:100%; height:auto }
.harita__sokak path{ fill:none; stroke:#123029; stroke-width:12; stroke-linecap:square }
.harita__sokak .harita__ana{ stroke:#16382f; stroke-width:20 }
.harita__park{ fill:rgba(126,224,200,.07) }
.harita__rota{ fill:none; stroke:rgba(126,224,200,.22); stroke-width:6; stroke-linecap:round; stroke-linejoin:round }
.harita__iz{ fill:none; stroke:var(--nane); stroke-width:6; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:100; stroke-dashoffset:100 }
.kurye__sahne.is-oynar .harita__iz{ animation:iz 11s linear infinite; animation-play-state:var(--oyun, running) }
@keyframes iz{ to{ stroke-dashoffset:0 } }
.harita__pin circle{ fill:#fff }
.harita__pin path{ fill:none; stroke:var(--gece); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.harita__pin--ev circle{ fill:var(--nane) }
.harita__kurye > circle{ fill:var(--altin); stroke:rgba(233,189,106,.35); stroke-width:8 }
.harita__kurye .harita__kurye-ic{ fill:var(--gece); stroke:none }
.takip{
  position:absolute; right:-14px; bottom:0; width:min(320px, 82%); padding:18px; border-radius:20px;
  color:var(--murekkep); background:#fff; box-shadow:0 30px 60px -24px rgba(0,0,0,.75);
}
.takip__ust{ display:flex; justify-content:space-between; align-items:baseline }
.takip__ust b{ font:800 19px/1.1 var(--baslik); letter-spacing:-.02em }
.takip__ust span{ font-size:13px; color:var(--gri) }
.takip__adim{ list-style:none; margin:14px 0 0; padding:0; display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; font-size:11.5px; font-weight:600; color:var(--gri) }
.takip__adim li::before{ content:''; display:block; height:4px; margin-bottom:6px; border-radius:999px; background:#e5ebe8 }
.takip__adim .is-tamam::before{ background:var(--marka) }
.takip__adim .is-simdi{ color:var(--murekkep) }
.takip__adim .is-simdi::before{ background:linear-gradient(90deg, var(--altin) 50%, #e5ebe8 50%); background-size:200% 100%; animation:yolda 1.6s linear infinite }
@keyframes yolda{ from{ background-position:100% 0 } to{ background-position:0 0 } }
.takip__kurye{ display:flex; align-items:center; gap:12px; margin-top:16px; padding-top:14px; border-top:1px solid var(--cizgi) }
.takip__avatar{ flex:none; display:grid; place-items:center; width:40px; height:40px; border-radius:50%; font:700 14px/1 var(--govde); color:#fff; background:var(--marka) }
.takip__kurye p{ display:flex; flex-direction:column; font-size:12.5px; color:var(--gri) }
.takip__kurye p b{ font-size:15px; color:var(--murekkep) }
.takip__sure{ margin-left:auto; text-align:right }
.takip__sure b{ font:800 28px/1 var(--baslik) !important }

/* ── Entegrasyonlar ─────────────────────────────────────────────────────── */
.entegrasyon{ padding:130px 0 120px; background:#fff }
.entegrasyon__bas{ max-width:820px }
.entegrasyon__bas p{ color:var(--gri) }
.entegrasyon__izgara{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:20px; margin-top:48px }
.akan{ padding:22px; border-radius:24px; color:#fff; background:var(--gece) }
.akan__ust{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px }
.akan__ust b{ font:700 18px/1 var(--baslik) }
.akan__liste{ list-style:none; margin:0; padding:0; display:grid; gap:8px }
.akan__satir{
  display:grid; grid-template-columns:104px 84px minmax(0, 1fr) auto; align-items:center; gap:12px;
  padding:11px 12px; border-radius:12px; font-size:14px; background:rgba(255,255,255,.05);
}
.akan__satir b{ font-weight:600; font-variant-numeric:tabular-nums }
.akan__urun{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--gri-k) }
.akan__satir em{ font-style:normal; font-size:12.5px; color:var(--gri-k) }
.akan__rozet{ justify-self:start; padding:4px 9px; border-radius:7px; font-size:12px; font-weight:700; white-space:nowrap; color:#fff; background:var(--k, #475569) }
.kanal--trendyol{ --k:#f27a1a }
.kanal--getir{ --k:#5d3ebc }
.kanal--qr{ --k:#0f766e }
.kanal--telefon{ --k:#475569 }
.kanal--garson{ --k:#a16207 }
.js .akan .akan__satir{ opacity:0 }
.js .akan.is-gorundu .akan__satir{ animation:satirDus .6s var(--egri) calc(var(--d) + .3s) both }
@keyframes satirDus{ from{ opacity:0; transform:translateY(-14px) } to{ opacity:1; transform:none } }
.pazar{ list-style:none; margin:0; padding:0; display:grid; gap:10px; align-content:start }
.pazar li{ display:grid; grid-template-columns:112px minmax(0, 1fr) auto; align-items:center; gap:16px; padding:14px 18px 14px 14px; border-radius:18px; background:var(--kagit) }
.pazar__logo{ display:grid; place-items:center; height:56px; padding:8px 12px; border-radius:12px; background:#fff; box-shadow:0 0 0 1px var(--cizgi) }
.pazar__logo img{ max-height:36px; width:auto; object-fit:contain }
.pazar p{ display:flex; flex-direction:column }
.pazar p b{ font-size:16px }
.pazar p span{ font-size:13.5px; color:var(--gri) }
.durum{ padding:5px 11px; border-radius:999px; font-size:12.5px; font-weight:700; font-style:normal }
.durum--canli{ color:#065f46; background:#d1fae5 }
.durum--yakinda{ color:var(--gri); background:#e5ebe8 }
.logolar{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:18px; margin-top:20px }
.logolar__grup{ padding:20px; border-radius:20px; box-shadow:inset 0 0 0 1px var(--cizgi) }
.logolar__grup h3{ font:600 14px/1.3 var(--govde); letter-spacing:0; color:var(--gri) }
.logolar__grup ul{ list-style:none; margin:14px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px }
.logolar__grup li{ display:grid; place-items:center; height:44px; padding:6px 10px; border-radius:10px; background:#fff; box-shadow:0 0 0 1px var(--cizgi) }
.logolar__grup img{ max-height:28px; max-width:96px; width:auto; object-fit:contain }
.logolar__grup p{ margin-top:12px; font-size:13.5px; color:var(--gri) }
.entegrasyon__dip{ margin-top:24px; font-size:15px; color:var(--gri) }

/* ── Turist modu ve arayan kimliği ──────────────────────────────────────── */
.ikili{ padding:120px 0; background:var(--kagit) }
.ikili__ic{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:20px }
.ikili__kart{ display:flex; flex-direction:column; padding:44px 40px 40px; border-radius:30px; background:#fff; box-shadow:0 0 0 1px var(--cizgi) }
.ikili__kart h2{ font-size:clamp(32px, 3.6vw, 48px) }
.ikili__kart > p{ margin-top:16px; font-size:17px; color:var(--gri) }
.ikili__kart--koyu{ color:#fff; background:var(--gece-2); box-shadow:none }
.ikili__kart--koyu > p{ color:var(--gri-k) }
.dil-sec{ display:flex; flex-wrap:wrap; gap:6px; margin-top:28px }
.dil-sec button{
  appearance:none; border:0; cursor:pointer; padding:10px 16px; border-radius:999px; font:600 14.5px/1 var(--govde);
  color:var(--murekkep); background:var(--kagit); transition:background-color .2s, color .2s;
}
.dil-sec button:hover{ background:#e4ebe7 }
.dil-sec button[aria-pressed="true"]{ color:#fff; background:var(--gece) }
.menu-ornek{ margin-top:18px; padding:18px; border-radius:22px; background:var(--kagit) }
.menu-ornek [data-m]{ transition:opacity .22s }
.menu-ornek.is-degisiyor [data-m]{ opacity:0 }
.menu-ornek__ara{ padding:11px 16px; border-radius:999px; font-size:14px; color:#8a9a93; background:#fff; box-shadow:0 0 0 1px var(--cizgi) }
.menu-ornek__kat{ margin:16px 0 8px; font:700 13px/1 var(--govde); color:var(--marka) }
.menu-ornek__urun{ padding:14px 16px; border-radius:16px; background:#fff }
.menu-ornek__urun + .menu-ornek__urun{ margin-top:8px }
.menu-ornek__ad{ display:flex; justify-content:space-between; gap:12px; font-weight:700; font-size:16.5px }
.menu-ornek__ad b{ font-variant-numeric:tabular-nums; color:var(--marka) }
.menu-ornek__ds{ margin-top:4px; min-height:2.9em; font-size:14px; line-height:1.45; color:var(--gri) }
.menu-ornek__alerjen{ margin-top:6px; font-size:12.5px; color:#a16207 }
.menu-ornek__dugme{ display:inline-block; margin-top:12px; padding:9px 16px; border-radius:999px; font-size:13.5px; font-weight:600; color:#fff; background:var(--gece) }

.cagri{ position:relative; display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:center; gap:16px; margin-top:30px; min-height:190px }
.cagri__tel{
  display:flex; flex-direction:column; align-items:center; gap:4px; width:118px; padding:18px 10px 16px; border-radius:24px; text-align:center;
  background:#0a1916; box-shadow:inset 0 0 0 1px var(--cizgi-k);
}
.cagri__tel i{ position:relative; width:40px; height:40px; margin-bottom:8px; border-radius:50%; background:#22c55e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15 15 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1z' fill='%23fff'/%3E%3C/svg%3E") center / 20px no-repeat }
.cagri__tel b{ font-size:13px }
.cagri__tel span{ font-size:11.5px; color:var(--gri-k); white-space:nowrap }
.cagri.is-cal .cagri__tel i{ animation:titre .3s ease-in-out 0s 4, zilYesil 1.2s ease-out 0s 2 }
@keyframes zilYesil{ from{ box-shadow:0 0 0 0 rgba(34,197,94,.6) } to{ box-shadow:0 0 0 16px rgba(34,197,94,0) } }
.cagri__kart{ padding:16px; border-radius:18px; color:var(--murekkep); background:#fff; box-shadow:0 24px 50px -24px rgba(0,0,0,.8) }
.js .cagri__kart{ opacity:0; transform:translateX(20px) }
.cagri.is-cal .cagri__kart{ animation:kartGel .6s var(--egri) 1.2s both }
@keyframes kartGel{ from{ opacity:0; transform:translateX(20px) } to{ opacity:1; transform:none } }
.cagri__ust{ display:flex; justify-content:space-between; align-items:center; font-size:12.5px; color:var(--gri) }
.cagri__ust b{ color:var(--murekkep) }
.cagri__ust .canli{ color:#16a34a }
.cagri__kisi{ display:flex; align-items:center; gap:10px; margin-top:12px }
.cagri__kisi p{ display:flex; flex-direction:column; font-size:12.5px; color:#a16207 }
.cagri__kisi p b{ font-size:16px; color:var(--murekkep) }
.cagri__bilgi{ margin-top:10px; font-size:13px; color:var(--gri) }
.cagri__dugme{ display:inline-block; margin-top:12px; padding:9px 16px; border-radius:999px; font-size:13.5px; font-weight:600; color:var(--gece); background:var(--nane) }
.cagri.is-cal .cagri__dugme{ animation:bas .4s ease-in-out 2.4s both }
.tikli--acik li{ color:inherit }
.ikili__kart--koyu .tikli li{ color:rgba(255,255,255,.86) }
.tekrar{
  align-self:flex-start; margin-top:22px; padding:0; border:0; background:none; cursor:pointer;
  font:600 14.5px/1.4 var(--govde); color:var(--nane); text-decoration:underline; text-underline-offset:3px;
}

/* ── Rakamlar: stok, maliyet, muhasebe ──────────────────────────────────── */
.rakamlar{ padding:140px 0 130px; color:#fff; background:radial-gradient(800px 560px at 10% 10%, rgba(233,189,106,.08), transparent 65%), var(--gece) }
.rakamlar__bas{ max-width:820px }
.rakamlar__bas h2 span{ color:var(--altin) }
.rakamlar__bas p{ color:var(--gri-k) }
.rakamlar__izgara{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:20px 56px; margin-top:56px; align-items:center }
.rakamlar__metin h3{ font-size:clamp(26px, 2.6vw, 34px) }
.rakamlar__metin .tikli li{ color:rgba(255,255,255,.86) }
.rakamlar__not{ margin-top:18px; font-size:14.5px; color:var(--gri-k) }
.rapor{ padding:26px; border-radius:26px; background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px var(--cizgi-k) }
.rapor__ust{ display:flex; justify-content:space-between; align-items:baseline; gap:12px }
.rapor__ust b{ font:700 19px/1.1 var(--baslik) }
.rapor__ust span{ font-size:13px; color:var(--gri-k) }
.tukenme{ list-style:none; margin:18px 0 0; padding:0; display:grid; gap:10px }
.tukenme li{ display:grid; grid-template-columns:minmax(0, 1fr) auto; grid-template-rows:auto auto auto; column-gap:12px; padding:14px 16px; border-radius:16px; background:rgba(255,255,255,.05) }
.tukenme b{ font-size:15.5px; font-weight:600 }
.tukenme span{ font-size:13px; color:var(--gri-k) }
.tukenme i{ grid-column:1; height:6px; margin-top:10px; border-radius:999px; background:rgba(255,255,255,.1); overflow:hidden }
.tukenme em{ display:block; height:100%; width:var(--g); border-radius:inherit; background:var(--nane); transition:width 1.2s var(--egri) .4s }
.tukenme li:nth-child(1) em{ background:#f87171 }
.tukenme li:nth-child(2) em{ background:var(--altin) }
.js .rapor:not(.is-gorundu) .tukenme em{ width:0 }
.tukenme strong{ grid-row:1 / 4; grid-column:2; align-self:center; font:800 22px/1 var(--baslik); font-variant-numeric:tabular-nums }
.olcu{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-top:12px }
.olcu p{ display:flex; flex-direction:column; padding:14px 16px; border-radius:16px; background:rgba(255,255,255,.05) }
.olcu b{ font:800 26px/1.1 var(--baslik); font-variant-numeric:tabular-nums }
.olcu span{ font-size:12.5px; color:var(--gri-k) }
.rapor__not{ margin-top:12px; padding:14px 16px; border-radius:16px; font-size:14px; line-height:1.5; color:#fde68a; background:rgba(233,189,106,.1) }
.tahsilat{ display:grid; grid-template-columns:118px minmax(0, 1fr); grid-template-rows:auto auto; column-gap:22px; align-items:center; margin-top:18px }
.halka{ grid-row:1 / 3; width:118px; height:118px; transform:rotate(-90deg) }
.halka circle{ fill:none; stroke:rgba(255,255,255,.1); stroke-width:12 }
.halka .halka__dolu{ stroke:var(--nane); stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:19; transition:stroke-dashoffset 1.4s var(--egri) .3s }
.js .rapor:not(.is-gorundu) .halka__dolu{ stroke-dashoffset:100 }
.tahsilat > p{ display:flex; flex-direction:column }
.tahsilat > p b{ font:800 34px/1 var(--baslik) }
.tahsilat > p span{ font-size:13px; color:var(--gri-k) }
.tahsilat ul{ list-style:none; margin:12px 0 0; padding:0; display:grid; gap:4px }
.tahsilat li{ display:flex; justify-content:space-between; gap:10px; font-size:14px; color:var(--gri-k) }
.tahsilat li b{ color:#fff; font-variant-numeric:tabular-nums }
.hareket{ list-style:none; margin:18px 0 0; padding:0; display:grid; gap:8px }
.hareket li{ display:grid; grid-template-columns:minmax(0, 1fr) auto; column-gap:12px; padding:12px 14px; border-radius:14px; background:rgba(255,255,255,.05) }
.hareket b{ font-size:14.5px; font-weight:600 }
.hareket span{ grid-row:2; font-size:12.5px; color:var(--gri-k) }
.hareket em{ grid-row:1 / 3; grid-column:2; align-self:center; font-style:normal; font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--gri-k) }
.hareket .eksi{ color:#fca5a5 }
.hareket .arti{ color:var(--nane) }

/* ── Uygulamalar ────────────────────────────────────────────────────────── */
.uygulamalar{ padding:130px 0 120px; background:#fff }
.uygulamalar__bas{ max-width:760px }
.uygulamalar__bas h2{ font-size:clamp(38px, 5.4vw, 74px) }
.uygulamalar__bas p{ color:var(--gri) }
.uygulama-izgara{ list-style:none; margin:44px 0 0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px }
.uygulama-izgara li{ display:flex; flex-direction:column; padding:24px; border-radius:22px; background:var(--kagit) }
.uygulama__platform{ align-self:flex-start; padding:4px 10px; border-radius:999px; font-size:12.5px; font-weight:700; color:var(--marka); background:#fff; box-shadow:0 0 0 1px var(--cizgi) }
.uygulama-izgara h3{ margin-top:16px; font-size:22px; letter-spacing:-.02em }
.uygulama-izgara p{ margin-top:10px; font-size:15px; line-height:1.55; color:var(--gri) }
.uygulamalar__lnk{ margin-top:24px }
.uygulamalar__lnk a{ font-weight:600; color:var(--marka); text-decoration:none }
.uygulamalar__lnk a:hover{ text-decoration:underline }

/* ── Fiyat: günde bir çay parası ───────────────────────────────────────── */
.fiyat{ padding:130px 0 120px; background:linear-gradient(180deg, #e9f0eb, #dfe9e3) }
.fiyat__bas{ display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:center; gap:clamp(24px, 5vw, 64px); max-width:1040px; margin:0 auto }
.cay{ width:clamp(150px, 19vw, 240px); height:auto; overflow:visible }
.cay__dolu{ transition:transform 2.2s cubic-bezier(.3,.7,.2,1) .35s }
.js .fiyat__bas:not(.is-gorundu) .cay__dolu{ transform:translateY(134px) }
.cay__buhar{ fill:none; stroke:#5f6f68; stroke-opacity:.45; stroke-width:2.6; stroke-linecap:round; opacity:0 }
.fiyat__bas.is-gorundu .cay__buhar{ animation:cayBuhar 4.2s ease-in-out 2.4s infinite }
.fiyat__bas.is-gorundu .cay__buhar--2{ animation-delay:3.6s }
.fiyat__bas.is-gorundu .cay__buhar--3{ animation-delay:4.6s }
.no-js .cay__buhar, html:not(.js) .cay__buhar{ opacity:.5 }
@keyframes cayBuhar{ 0%{ opacity:0; transform:translateY(10px) } 35%{ opacity:1 } 100%{ opacity:0; transform:translateY(-14px) } }
.fiyat h2{ font-size:clamp(42px, 6.2vw, 88px) }
.fiyat__rakam{ margin-top:14px; font:800 clamp(40px, 5.4vw, 72px)/1 var(--baslik); letter-spacing:-.03em; color:var(--cay) }
.fiyat__rakam span{ font:500 18px/1 var(--govde); letter-spacing:0; color:var(--gri); vertical-align:.35em }
.fiyat__rakam small{ font:600 20px/1 var(--govde); letter-spacing:0; color:var(--gri) }
.fiyat__acik{ margin-top:16px; max-width:640px; font-size:16px; color:var(--gri) }
.planlar{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px; margin-top:68px }
.plan{ position:relative; display:flex; flex-direction:column; padding:30px 24px 24px; border-radius:22px; background:#fff; box-shadow:0 0 0 1px var(--cizgi) }
.plan--one{ color:#fff; background:var(--gece); box-shadow:0 34px 70px -34px rgba(6,17,14,.7) }
.plan__rozet{ position:absolute; top:-12px; left:24px; padding:5px 12px; border-radius:999px; font-size:12.5px; font-weight:700; color:#2b1a02; background:var(--altin) }
.plan h3{ font-size:22px; letter-spacing:-.02em }
.plan__fiyat{ margin-top:16px; font:800 40px/1 var(--baslik); letter-spacing:-.03em }
.plan__fiyat small{ margin-left:4px; font:500 16px/1 var(--govde); letter-spacing:0; opacity:.6 }
.plan__fiyat--teklif{ font-size:34px }
.plan__yil{ margin-top:9px; font-size:13.5px; font-weight:600; color:var(--marka) }
.plan--one .plan__yil{ color:var(--nane) }
.plan__ds{ flex:1; margin-top:16px; font-size:14.5px; line-height:1.5; color:var(--gri) }
.plan--one .plan__ds{ color:rgba(255,255,255,.66) }
.plan__ek{ margin:18px 0 20px; padding-top:14px; border-top:1px solid var(--cizgi); font-size:13.5px; line-height:1.5; color:var(--gri) }
.plan__ek b{ color:var(--murekkep) }
.plan--one .plan__ek{ border-color:var(--cizgi-k); color:rgba(255,255,255,.72) }
.plan--one .plan__ek b{ color:#fff }
.plan .dugme{ width:100% }
.plan--one .dugme--koyu{ color:var(--gece); background:var(--nane) }
.plan--one .dugme--koyu:hover{ background:var(--nane-2) }
.fiyat__dip{ margin-top:28px; text-align:center; font-size:14px; color:var(--gri) }

/* ── Ekosistem: üç taraf ────────────────────────────────────────────────── */
.ekosistem{ padding:140px 0 130px; color:#fff; background:radial-gradient(900px 520px at 50% 0%, rgba(15,118,110,.3), transparent 65%), var(--gece-2) }
.ekosistem__bas{ max-width:820px }
.ekosistem__bas h2 span{ color:var(--nane) }
.ekosistem__bas p{ color:var(--gri-k) }
.taraflar{ display:grid; grid-template-columns:1fr 1.25fr 1fr; gap:16px; margin-top:52px; align-items:stretch }
.taraf{ display:flex; flex-direction:column; padding:30px 28px 28px; border-radius:26px; background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px var(--cizgi-k) }
.taraf h3{ font-size:26px; letter-spacing:-.02em }
.taraf > p{ margin-top:12px; font-size:15.5px; color:var(--gri-k) }
.taraf .tikli{ flex:1; align-content:start }
.taraf .tikli li{ font-size:15px; color:rgba(255,255,255,.86) }
.taraf > .dugme{ margin-top:26px; align-self:flex-start }
.taraf--bayi{ background:linear-gradient(160deg, rgba(233,189,106,.14), rgba(233,189,106,.03)); box-shadow:inset 0 0 0 1px rgba(233,189,106,.3) }
.taraf__lnk{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 20px; margin-top:26px }
.taraf__lnk > a:not(.dugme){ font-size:15px; font-weight:600; color:var(--nane); text-decoration:none }
.taraf__lnk > a:not(.dugme):hover{ text-decoration:underline }
.hesap{ margin-top:22px; padding:20px; border-radius:20px; background:rgba(6,17,14,.4) }
.hesap label{ display:flex; justify-content:space-between; align-items:baseline; font-size:15px; font-weight:600 }
.hesap output{ font:800 26px/1 var(--baslik); color:var(--altin); font-variant-numeric:tabular-nums }
.hesap input[type="range"]{ width:100%; margin:16px 0 4px; accent-color:var(--altin); cursor:pointer }
.hesap__sonuc{ display:flex; flex-direction:column; margin-top:10px }
.hesap__sonuc span{ font-size:13px; color:var(--gri-k) }
.hesap__sonuc b{ font:800 clamp(26px, 2.6vw, 34px)/1.15 var(--baslik); letter-spacing:-.02em; font-variant-numeric:tabular-nums }
.hesap__sonuc small{ font-size:13.5px; color:var(--gri-k) }
.hesap__not{ margin-top:14px; font-size:12.5px; line-height:1.5; color:rgba(255,255,255,.5) }

/* ── Blog ───────────────────────────────────────────────────────────────── */
.blog{ padding:120px 0 110px; background:var(--kagit) }
.blog__bas{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:12px 24px }
.blog__bas h2{ font-size:clamp(32px, 4vw, 52px) }
.blog__bas a{ font-weight:600; color:var(--marka); text-decoration:none }
.blog__liste{
  list-style:none; margin:36px 0 0; padding:0 0 12px; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(280px, calc((100% - 32px) / 3)); gap:16px;
  overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:thin;
}
.blog__liste li{ scroll-snap-align:start }
.blog__liste a{ display:flex; flex-direction:column; height:100%; padding:12px 12px 20px; border-radius:22px; text-decoration:none; background:#fff; box-shadow:0 0 0 1px var(--cizgi); transition:box-shadow .25s, transform .25s var(--egri) }
.blog__liste a:hover{ transform:translateY(-3px); box-shadow:0 0 0 1px rgba(12,23,20,.16), 0 20px 40px -26px rgba(6,17,14,.4) }
.blog__gorsel{ display:block; aspect-ratio:16 / 10; border-radius:14px; overflow:hidden; background:#e4ebe7 }
.blog__gorsel img{ width:100%; height:100%; object-fit:cover }
.blog__liste time{ margin:14px 8px 0; font-size:13px; color:var(--gri) }
.blog__liste h3{ margin:6px 8px 0; font-size:20px; line-height:1.2; letter-spacing:-.02em }
.blog__liste p{ margin:8px 8px 0; font-size:14.5px; line-height:1.5; color:var(--gri) }

/* ── SSS ────────────────────────────────────────────────────────────────── */
.sss{ padding:120px 0; background:#fff }
.sss__ic{ display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr); align-items:start; gap:56px }
.sss h2{ position:sticky; top:110px; font-size:clamp(34px, 4.4vw, 58px) }
.sss details{ border-bottom:1px solid var(--cizgi) }
.sss summary{
  display:flex; justify-content:space-between; gap:20px; padding:22px 0; cursor:pointer; list-style:none;
  font:600 18px/1.4 var(--govde); color:var(--murekkep);
}
.sss summary::-webkit-details-marker{ display:none }
.sss summary::after{
  content:''; flex:none; width:14px; height:14px; margin-top:6px;
  background:linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
             linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
  transition:transform .3s var(--egri);
}
.sss details[open] summary::after{ transform:rotate(45deg) }
.sss details p{ max-width:680px; padding:0 0 24px; font-size:16.5px; color:var(--gri) }
.sss__dip{ margin-top:28px; color:var(--gri) }
.sss__dip a{ font-weight:600; color:var(--marka) }

/* ── Son söz ────────────────────────────────────────────────────────────── */
.son{
  padding:150px 0 130px; text-align:center; color:#fff;
  background:radial-gradient(900px 520px at 50% 108%, rgba(15,118,110,.55), transparent 70%), var(--gece);
}
.son__cumle{ font:600 clamp(20px, 2.2vw, 28px)/1.3 var(--baslik); letter-spacing:-.01em; color:rgba(255,255,255,.76) }
.son__marka{ margin-top:34px }
.son__marka img{ width:min(1040px, 100%); margin:0 auto; filter:drop-shadow(0 30px 60px rgba(4,214,214,.18)) }
.son__cta{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:44px }

/* ── Alt bilgi ──────────────────────────────────────────────────────────── */
.alt{ padding:72px 0 28px; font-size:15px; color:rgba(255,255,255,.6); background:var(--gece); border-top:1px solid var(--cizgi-k) }
.alt__ic{ display:grid; grid-template-columns:1.4fr repeat(3, 1fr); gap:40px }
.alt__marka img{ height:26px; width:auto }
.alt__marka p{ max-width:300px; margin-top:16px }
.alt__sutun{ display:flex; flex-direction:column; gap:10px }
.alt__sutun h4{ margin-bottom:6px; font:600 14px/1.3 var(--govde); letter-spacing:0; color:#fff }
.alt__sutun a, .alt__yasal a{ text-decoration:none; transition:color .2s }
.alt__sutun a:hover, .alt__yasal a:hover{ color:#fff }
.alt__yasal{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; margin-top:56px; padding-top:24px; border-top:1px solid var(--cizgi-k); font-size:13.5px }
.alt__yasal nav{ display:flex; flex-wrap:wrap; gap:8px 18px }

.wa-yuzen{
  position:fixed; right:20px; bottom:max(20px, env(safe-area-inset-bottom)); z-index:40;
  display:grid; place-items:center; width:56px; height:56px; border-radius:50%;
  color:#fff; background:#25d366; box-shadow:0 14px 32px -10px rgba(0,0,0,.5);
  transition:transform .2s var(--egri);
}
.wa-yuzen:hover{ transform:scale(1.06) }

/* ── Belirme ve açılış ──────────────────────────────────────────────────── */
.js .belir{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--egri), transform .9s var(--egri) }
.js .belir.is-gorundu{ opacity:1; transform:none }
.js .giris__metin > *{ opacity:0; transform:translateY(18px) }
.js .giris__sahne{ opacity:0; translate:0 70px }
.is-hazir .giris__metin > *{ opacity:1; transform:none; transition:opacity .7s var(--egri), transform .8s var(--egri) }
.is-hazir .giris__metin > :nth-child(2){ transition-delay:.06s }
.is-hazir .giris__metin > :nth-child(3){ transition-delay:.14s }
.is-hazir .giris__metin > :nth-child(4){ transition-delay:.2s }
.is-hazir .giris__metin > :nth-child(5){ transition-delay:.26s }
.is-hazir .giris__sahne{ opacity:1; translate:0 0; transition:opacity 1s var(--egri) .3s, translate 1.4s var(--egri) .3s }

/* ── Duyarlı ────────────────────────────────────────────────────────────── */
@media (max-width:1060px){
  .planlar{ grid-template-columns:repeat(2, minmax(0, 1fr)); row-gap:28px }
  .modul-izgara{ grid-template-columns:repeat(2, minmax(0, 1fr)) }
  .uygulama-izgara{ grid-template-columns:repeat(2, minmax(0, 1fr)) }
  .logolar{ grid-template-columns:repeat(2, minmax(0, 1fr)) }
  .taraflar{ grid-template-columns:1fr; max-width:640px }
  .vitrin__liste{ grid-template-columns:repeat(2, minmax(0, 1fr)) }
  .akis__govde{ gap:40px }
  .akis__cerceve{ font-size:14px }
}
@media (max-width:900px){
  .hikaye{ grid-template-columns:1fr; margin-top:28px }
  .hikaye__sahne{ display:none }
  .hikaye__adim{ min-height:0; padding:34px 0; opacity:1; border-top:1px solid var(--cizgi-k) }
  .hikaye__adim:first-child{ border-top:0 }
  .hikaye__mobil{
    display:block; width:min(260px, 68vw); margin:28px auto 0; border-radius:30px;
    box-shadow:0 0 0 7px #0a0f0e, 0 0 0 8.5px rgba(255,255,255,.14), 0 34px 70px -24px rgba(0,0,0,.75);
  }
  .katmanlar{ grid-template-columns:1fr; margin-top:40px }
  .akis__govde{ grid-template-columns:1fr; gap:0; margin-top:28px }
  .akis__sahne{ top:76px; z-index:2; height:min(118vw, 430px) }
  .akis__cerceve{ font-size:clamp(10.5px, 3vw, 15px); border-radius:24px }
  .akis__adim{ min-height:62vh; justify-content:flex-start; padding:36px 0 0 }
  .kurye__ic, .entegrasyon__izgara, .ikili__ic, .rakamlar__izgara{ grid-template-columns:1fr }
  .kurye__ic{ gap:48px }
  .rakamlar__izgara{ gap:24px }
  .rakamlar__izgara > :nth-child(3){ order:4 }
  .rakamlar__izgara > :nth-child(4){ order:3 }
  .sss__ic{ grid-template-columns:1fr; gap:20px }
  .sss h2{ position:static }
  .alt__ic{ grid-template-columns:repeat(3, 1fr) }
  .alt__marka{ grid-column:1 / -1 }
}
@media (max-width:700px){
  .nokta{ width:22px; height:22px; margin:-11px 0 0 -11px; font-size:11px; box-shadow:0 0 0 3px rgba(6,17,14,.85) }
  .nokta em{ display:none }
  .vitrin__liste{ grid-template-columns:1fr }
}
@media (max-width:600px){
  body{ font-size:16px }
  .giris{ padding:118px 0 64px }
  .giris__yeni{ font-size:13px }
  .giris__cta{ flex-direction:column; align-items:stretch; width:100% }
  .giris__sahne{ margin-top:48px }
  .tarayici__ust{ height:24px; gap:5px; padding:0 9px }
  .tarayici__ust i{ width:7px; height:7px }
  .tarayici__ust span{ padding:1px 18px; font-size:10px; transform:none }
  .telefon--giris{ right:6px }
  .ekran-etiket{ right:calc(6px + var(--tel-w) + 12px); bottom:auto; top:calc(100% - var(--tel-w) * 1.05); width:auto; left:6px; max-width:200px; padding:10px 12px 11px; border-radius:14px }
  .ekran-etiket__metin{ margin-top:9px }
  .ekran-etiket__metin b{ font-size:14.5px }
  .ekran-etiket__metin span{ font-size:12px }
  .giris__sayilar{ margin-top:84px; gap:18px 28px }
  .uyelik, .panel, .akis, .moduller, .kurye, .entegrasyon, .rakamlar, .uygulamalar, .ekosistem{ padding:96px 0 84px }
  .ikili, .blog{ padding:84px 0 }
  .ikili__ic{ gap:14px }
  .ikili__kart{ padding:30px 20px 26px; border-radius:24px }
  .sekmeler{ justify-content:flex-start; width:100% }
  .vitrin__not{ font-size:16.5px }
  .modul-izgara, .uygulama-izgara, .logolar{ grid-template-columns:1fr }
  .kare{ padding:1.6em 1.2em }
  .kare--kanal{ padding:1.6em 1em }
  .akan{ padding:16px }
  .akan__satir{ grid-template-columns:auto minmax(0, 1fr) auto; gap:4px 10px }
  .akan__satir b{ grid-column:2 }
  .akan__urun{ grid-column:1 / -1; grid-row:2 }
  .akan__satir em{ grid-column:3; grid-row:1 }
  .pazar li{ grid-template-columns:84px minmax(0, 1fr); gap:12px }
  .pazar .durum{ grid-column:2; justify-self:start }
  .pazar__logo{ height:48px; padding:6px 8px }
  .takip{ position:relative; right:auto; width:auto; margin:-40px 12px 0 }
  .kurye__sahne{ padding-bottom:0 }
  .cagri{ grid-template-columns:1fr; min-height:0 }
  .cagri__tel{ flex-direction:row; width:auto; padding:12px 14px; gap:10px; text-align:left }
  .cagri__tel i{ margin:0 }
  .tahsilat{ grid-template-columns:92px minmax(0, 1fr); column-gap:16px }
  .halka{ width:92px; height:92px }
  .olcu b{ font-size:22px }
  .rapor{ padding:18px; border-radius:22px }
  .fiyat{ padding:96px 0 90px }
  .fiyat__bas{ grid-template-columns:1fr; gap:10px; justify-items:start }
  .cay{ width:150px }
  .planlar{ grid-template-columns:1fr; margin-top:48px }
  .taraf{ padding:24px 20px }
  .blog__liste{ grid-auto-columns:82% }
  .sss{ padding:90px 0 }
  .son{ padding:110px 0 100px }
  .son__cta{ flex-direction:column; align-items:stretch }
  .alt__ic{ grid-template-columns:1fr 1fr; gap:32px 20px }
  .alt__yasal{ flex-direction:column }
  .wa-yuzen{ width:52px; height:52px; right:16px }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  .giris__sahne{ --egim:0 }
  .js .belir, .js .giris__metin > *, .js .giris__sahne{ opacity:1; transform:none; translate:none; transition:none }
  .js .vitrin.belir .tarayici--vitrin{ transform:none }
  .tarayici--giris, .telefon--giris, .telefon--hikaye{ transition:none }
  .slayt img.is-on, .slayt img.is-cik{ transition:none }
  .slayt img.is-cik{ visibility:hidden }
  .hikaye__adim, .akis__adim, .vitrin__kareler img, .telefon--hikaye .telefon__ekran img, .kare{ transition:none }
  *, *::before, *::after{ animation-duration:.01ms !important; animation-delay:0s !important; animation-iteration-count:1 !important }
  .canli::before{ animation:none !important }
  .js .noktalar .nokta, .js .akan .akan__satir, .js .cagri__kart{ opacity:1; transform:none }
  .js .fiyat__bas:not(.is-gorundu) .cay__dolu{ transform:none }
  .cay__buhar{ animation:none !important; opacity:.45 }
  .stok em, .tukenme em, .halka__dolu, .cay__dolu{ transition:none !important }
}