/* Ye Gitsin — site v6 (müşteri + işletme ortak). 2026-10-26
   Uygulamayla aynı dil: Plus Jakarta Sans, marka turuncusu, krem zemin ve
   uygulamadaki köşe yarıçapları (çip 8, düğme 14, kart 20, pencere 28).
   Telefonlar: gerçek ekran görüntüleriyle 3B çizilmiş iPhone 17 Pro görselleri
   (tuşlar, yan yüzeyler, gölge görselin içinde; sayfada dönüşüm yok, görüntü keskin kalır).
   Adım fotoğraflarında ekranlar gerçek fotoğraftaki telefona oturtuldu. */

/* Yazı tipleri (OFL; siteyle birlikte barındırılır, ziyaretçi Google'a gitmez) */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/plus-jakarta-sans-400-800-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/plus-jakarta-sans-400-800-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  /* Uygulamanın renkleri (tasarim.dart) */
  --zemin:#FFFBF5; --zemin-2:#F7F1E8; --kum:#F2E8DA; --yuzey:#FFFFFF;
  --marka:#FF7A1A; --marka-koyu:#E85D04; --marka-metin:#C24A0B;
  --vurgu:#D2361F; --yesil:#276B47; --yesil-zemin:#E6F2EA;
  --murekkep:#17161C; --metin:#24242A; --soluk:#6B6560; --solgun:#9A938C;
  --ayirici:#EFE9E0; --cizgi:rgba(36,36,42,.11);
  /* Gece (kapanış ve alt bilgi; v4'ten) */
  --gece:#121922; --gece-2:#1B2430; --gece-cizgi:rgba(233,225,214,.14); --gece-metin:#ECE4D8; --gece-soluk:#A99E92; --kehribar:#F2B25C;
  --r1:8px; --r2:14px; --r3:20px; --r4:28px; --r5:40px;
  --golge-1:0 1px 2px rgba(61,46,30,.06),0 6px 18px -8px rgba(61,46,30,.16);
  --golge-2:0 2px 4px rgba(61,46,30,.06),0 26px 50px -22px rgba(61,46,30,.34);
  --kenar:max(clamp(16px,4.4vw,44px),env(safe-area-inset-left),env(safe-area-inset-right)); --icerik:1240px;
  --sans:'Plus Jakarta Sans',-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --yay:cubic-bezier(.2,.75,.15,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px;-webkit-tap-highlight-color:rgba(255,122,26,.16)}
a,button,summary,label,input,select{touch-action:manipulation}
body{margin:0;background:var(--zemin);color:var(--metin);font:400 17px/1.62 var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
p{margin:0 0 1em}
h1,h2,h3,h4{margin:0;color:var(--murekkep);font-family:var(--sans);font-weight:800;letter-spacing:-.035em;text-wrap:balance}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2.5px solid var(--murekkep);outline-offset:3px;border-radius:8px}
::selection{background:var(--marka);color:var(--murekkep)}
.gizli{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.atla{position:absolute;left:12px;top:-60px;z-index:200;background:var(--murekkep);color:#fff;padding:10px 16px;border-radius:10px;text-decoration:none}
.atla:focus{top:12px}
.wrap{width:min(100% - 2*var(--kenar),var(--icerik));margin-inline:auto}
.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ── Tipografi ──────────────────────────────────────────────────────────── */
.h1{font-size:clamp(42px,6.6vw,96px);line-height:.96;letter-spacing:-.045em}
.h2{font-size:clamp(34px,4.8vw,66px);line-height:1.03;letter-spacing:-.04em}
.h3{font-size:clamp(20px,1.7vw,23px);line-height:1.22;letter-spacing:-.028em;font-weight:750}
.h1 em,.h2 em{font-style:normal;color:var(--marka-koyu)}
/* Noktalama: yazı tipinin geniş yan boşluğu sıkı başlıkta delik gibi duruyor */
.nk{margin-left:-.085em}
.ap{margin-inline:-.045em}
.lead{font-size:clamp(17.5px,1.45vw,20.5px);line-height:1.58;color:var(--soluk);font-weight:450;max-width:36em}
.not{font-size:14px;color:var(--soluk)}
.kaynak{font-size:13px;color:var(--soluk)}

/* ── Düğmeler ───────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;
  border:1.5px solid transparent;font-weight:700;font-size:16px;letter-spacing:-.01em;text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .15s ease,background-color .2s ease,box-shadow .2s ease,color .2s ease,border-color .2s ease}
.btn:active{transform:scale(.97)}
.btn-ink{background:var(--murekkep);color:#FFF8EF;box-shadow:0 10px 22px -12px rgba(23,22,28,.6)}
.btn-ink:hover{background:#000}
.btn-marka{background:var(--marka);color:var(--murekkep)}
.btn-marka:hover{background:#FF8A33}
.btn-cizgi{border-color:rgba(23,22,28,.18);background:rgba(255,255,255,.5);color:var(--murekkep)}
.btn-cizgi:hover{border-color:var(--murekkep)}
.btn-kucuk{min-height:44px;padding:0 18px;font-size:15px}
.btn[disabled]{opacity:.6;cursor:progress}

/* ── Üst çubuk ──────────────────────────────────────────────────────────── */
.ust{position:sticky;top:0;z-index:50;background:rgba(255,251,245,.84);-webkit-backdrop-filter:saturate(1.3) blur(14px);backdrop-filter:saturate(1.3) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .25s ease}
.ust.kaydi{border-bottom-color:var(--cizgi)}
.ust .wrap{display:flex;align-items:center;gap:24px;min-height:72px}
.marka{display:inline-flex;align-items:center;gap:10px;min-height:48px;text-decoration:none;color:var(--murekkep);font:800 21px/1 var(--sans);letter-spacing:-.04em}
.marka img{width:36px;height:36px;border-radius:10px}
.marka .iki{display:flex;flex-direction:column;gap:3px}
.marka small{font:700 11px/1 var(--sans);letter-spacing:.02em;color:var(--marka-metin)}
.menu{display:none;gap:30px;margin-left:auto}
.menu a{text-decoration:none;font-size:15.5px;font-weight:600;color:var(--metin);padding:10px 0;min-width:44px;text-align:center;background:linear-gradient(currentColor,currentColor) left bottom/0 2px no-repeat;transition:background-size .25s ease}
.menu a:hover{background-size:100% 2px}
.ust-sag{display:flex;align-items:center;gap:10px;margin-left:auto}
.gizle-mobil{display:none}
.hamb{display:inline-grid;place-items:center;width:48px;height:48px;border:1.5px solid var(--cizgi);border-radius:var(--r2);background:transparent;cursor:pointer}
.mmenu{display:none;flex-direction:column;gap:2px;padding:6px var(--kenar) 20px;border-top:1px solid var(--cizgi)}
.mmenu.acik{display:flex}
.mmenu a{padding:14px 2px;text-decoration:none;font-size:18px;font-weight:600;border-bottom:1px solid var(--cizgi)}
.mmenu a.btn{margin-top:14px;border-bottom:1.5px solid var(--cizgi)}
@media (min-width:960px){
  .menu{display:flex}.ust-sag{margin-left:30px}.gizle-mobil{display:inline-flex}.hamb,.mmenu,.mmenu.acik{display:none}
}
/* Çok dar ekranda üstteki eylem düğmesi gizlenir (aynısı kahramanda var); marka tek satır kalır */
.marka{white-space:nowrap}
@media (max-width:360px){.ust-sag .btn-ink{display:none}}

/* ── Bölümler ───────────────────────────────────────────────────────────── */
.bolum{position:relative;padding:clamp(80px,10vw,140px) 0}
.bolum-kum{background:var(--zemin-2)}
.bolum-bas{max-width:780px;margin:0 auto clamp(40px,5vw,64px);text-align:center}
.bolum-bas .lead{margin:18px auto 0}

/* Kaydırınca belirme */
.js .bel{opacity:0;transform:translateY(24px);transition:opacity .8s var(--yay),transform .8s var(--yay)}
.js .bel.ici{opacity:1;transform:none}
.js .g1{transition-delay:.08s}.js .g2{transition-delay:.16s}.js .g3{transition-delay:.24s}

/* ── Kahraman ───────────────────────────────────────────────────────────── */
.kahraman{position:relative;padding:clamp(34px,6vw,80px) 0 0;overflow:hidden}
.kah-ic{display:flex;flex-direction:column;align-items:center;text-align:center}
.h1 .satir{display:block;overflow:hidden;padding-bottom:.07em}
.h1 .satir>span{display:block}
.kah-ic .lead{margin:clamp(18px,2.2vw,26px) auto clamp(24px,2.8vw,32px);max-width:33em}
.kah-ic .liste{width:min(100%,540px);text-align:left}
.eylem{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.magaza{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 12px;margin-top:22px}
.magaza img{height:44px;width:auto}
.magaza .not{flex-basis:100%;margin:0;text-align:center}

/* Sahne: 3B çizilmiş telefonlar tek görselde (gölgeleri dahil), altta kum rengi zemin.
   Görsel 2x çizildi; masaüstünde orta telefon ~320 px. Telefonda görsel ekrandan geniş tutulur,
   yandaki telefonlar kenarlardan taşar (kahraman kesitinde overflow gizli). */
.sahne{position:relative;margin-top:clamp(36px,5vw,64px);padding-bottom:clamp(30px,4vw,64px)}
.sahne-zemin{position:absolute;inset-inline:0;bottom:0;width:min(100% - 2*var(--kenar),var(--icerik));height:56%;margin-inline:auto;border-radius:var(--r5);
  background:radial-gradient(120% 100% at 50% 0%,#F6EEE2 0%,var(--kum) 62%)}
.sahne-gorsel{position:relative;width:min(100%,var(--sahne-gen,874px));margin-inline:auto}
.sahne-gorsel>img{width:100%;height:auto}
.sahne-gorsel .sahne-bant{position:absolute;max-width:none;height:auto;pointer-events:none;opacity:0;transition:opacity .55s ease}
.sahne-gorsel .sahne-bant.goster{opacity:1}
@media (max-width:640px){
  .sahne-gorsel{width:var(--sahne-mobil,150vw);max-width:none;margin-left:calc(50% - var(--sahne-mobil,150vw)/2)}
}
@media (prefers-reduced-motion:no-preference){
  .js .h1 .satir>span{animation:yuksel 1s var(--yay) both}
  .js .h1 .satir:nth-child(2)>span{animation-delay:.09s}
  .js .kah-ic .gir{animation:belir .9s .28s var(--yay) both}
  .js .kah-ic .gir2{animation-delay:.38s}
  .js .kah-ic .gir3{animation-delay:.48s}
  .js .sahne-gorsel{animation:telBelir 1.2s .35s var(--yay) both}
  .js .sahne-zemin{animation:soluk 1s .2s ease both}
}
@keyframes yuksel{from{transform:translateY(105%)}to{transform:none}}
@keyframes belir{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes soluk{from{opacity:0}}
@keyframes telBelir{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:none}}

/* ── Hap (uygulamadaki çipler) ──────────────────────────────────────────── */
.hap{display:inline-flex;align-items:center;gap:4px;min-height:24px;padding:0 9px;border-radius:999px;font-size:12px;font-weight:700;line-height:1;white-space:nowrap}
.hap-kirmizi{background:var(--vurgu);color:#fff}
.hap-beyaz{background:rgba(255,255,255,.95);color:var(--metin)}
.hap-yesil{background:var(--yesil-zemin);color:var(--yesil)}
.hap .yildiz{color:#E8A33D}

/* ── Bekleme listesi formu ──────────────────────────────────────────────── */
.liste{max-width:540px}
.liste-satir{display:flex;flex-direction:column;gap:10px}
.liste-satir input{flex:1;min-height:54px;padding:0 20px;border:1.5px solid var(--cizgi);border-radius:999px;background:#FFFFFF;font-size:16px}
.liste-satir input:focus{outline:none;border-color:var(--murekkep);box-shadow:0 0 0 4px rgba(23,22,28,.08)}
.onay{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:13.5px;line-height:1.5;color:var(--soluk);cursor:pointer}
.onay input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--murekkep)}
.mesaj{display:none;align-items:flex-start;gap:10px;margin-top:14px;padding:12px 14px;border-radius:var(--r2);font-size:14.5px}
.mesaj.goster{display:flex}
.mesaj svg{width:20px;height:20px;flex:none;margin-top:1px}
.mesaj.iyi{background:#E3F1E7;color:#1F5B37}
.mesaj.kotu{background:#FBE6DC;color:#8A3A0E}
@media (min-width:560px){.liste-satir{flex-direction:row;gap:0;padding:5px;border:1.5px solid var(--cizgi);border-radius:999px;background:#FFFFFF}
  .liste-satir:focus-within{border-color:var(--murekkep);box-shadow:0 0 0 4px rgba(23,22,28,.08)}
  .liste-satir input{border:0;background:transparent;min-height:50px;box-shadow:none!important}
  .liste-satir .btn{min-height:50px}}

/* ── Adımlar (gerçek fotoğraflar) ───────────────────────────────────────── */
.adimlar{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,28px)}
.adim figure{position:relative;margin:0;border-radius:var(--r4);overflow:hidden;aspect-ratio:4/5;background:var(--zemin-2)}
.adim img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--yay)}
.adim:hover img{transform:scale(1.035)}
.adim-ust{display:flex;align-items:center;gap:12px;margin:20px 0 8px}
.adim-no{display:inline-grid;place-items:center;width:32px;height:32px;flex:none;border-radius:50%;background:var(--murekkep);color:#FFF8EF;font-size:14px;font-weight:800}
.adim p{margin:0;color:var(--soluk);font-size:16px;line-height:1.55}
.kaydir-dugmeler{display:none;justify-content:center;gap:10px;margin-top:22px}
.kaydir-dugmeler button{display:inline-grid;place-items:center;width:48px;height:48px;border:1.5px solid var(--cizgi);border-radius:50%;background:var(--yuzey);cursor:pointer}
.kaydir-dugmeler button:hover{border-color:var(--murekkep)}
.kaydir-dugmeler button:disabled{opacity:.35;cursor:default}
@media (max-width:959px){
  .adimlar{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(80%,360px);overflow-x:auto;scroll-snap-type:x mandatory;
    margin-inline:calc(var(--kenar)*-1);padding:4px var(--kenar) 6px;scroll-padding-inline:var(--kenar);scrollbar-width:none}
  .adimlar::-webkit-scrollbar{display:none}
  .adim{scroll-snap-align:start}
  .kaydir-dugmeler{display:flex}
}

/* ── Kayan yazı şeridi (kategoriler) ────────────────────────────────────── */
.kayan-serit{position:relative;overflow:hidden;background:var(--murekkep);color:#FFF6EA;padding:clamp(20px,2.6vw,30px) 0}
.kayan{display:flex;width:max-content;animation:kay 42s linear infinite}
.kayan-serit:hover .kayan{animation-play-state:paused}
.kayan span{display:inline-flex;align-items:center;gap:clamp(20px,2.6vw,36px);padding-right:clamp(20px,2.6vw,36px);
  font-size:clamp(28px,3.8vw,52px);font-weight:800;letter-spacing:-.04em;line-height:1.1;white-space:nowrap}
.kayan span::after{content:"";width:.26em;height:.26em;border-radius:50%;background:var(--marka)}
@keyframes kay{to{transform:translateX(-50%)}}
/* Görünür durdurma düğmesi yok (kurucu kararı); dokununca/tıklayınca durur, hareket azaltmada hiç kaymaz */
.kayan-serit.durdu .kayan{animation-play-state:paused}

/* ── Ürün kartları (uygulamadaki kart) ──────────────────────────────────── */
.urun-bas{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(28px,3.4vw,44px)}
.urun-bas .bolum-bas{margin:0;text-align:left}
.urun-bas .bolum-bas .lead{margin-left:0}
.urun-oklar{display:none;gap:10px}
.urun-oklar button{display:inline-grid;place-items:center;width:52px;height:52px;border:1.5px solid var(--cizgi);border-radius:50%;background:var(--yuzey);cursor:pointer;transition:border-color .2s ease}
.urun-oklar button:hover{border-color:var(--murekkep)}
.urun-oklar button:disabled{opacity:.35;cursor:default}
@media (min-width:960px){.urun-oklar{display:flex}}
.urunler{list-style:none;margin:0;display:grid;grid-auto-flow:column;grid-auto-columns:clamp(248px,23vw,292px);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:8px var(--kenar) 30px;scroll-padding-inline:var(--kenar);scrollbar-width:none}
.urunler::-webkit-scrollbar{display:none}
@media (min-width:1328px){.urunler{padding-inline:calc((100% - var(--icerik))/2);scroll-padding-inline:calc((100% - var(--icerik))/2)}}
.urun{scroll-snap-align:start;display:flex;flex-direction:column;background:var(--yuzey);border-radius:var(--r3);box-shadow:var(--golge-1);overflow:hidden;
  transition:transform .3s var(--yay),box-shadow .3s ease}
.urun:hover{transform:translateY(-4px);box-shadow:var(--golge-2)}
.urun-foto{position:relative;aspect-ratio:4/3;margin:8px 8px 0;border-radius:var(--r2);overflow:hidden;background:var(--zemin-2)}
.urun-foto img{width:100%;height:100%;object-fit:cover}
.urun-foto .hap-kirmizi{position:absolute;left:10px;top:10px}
.urun-foto .hap-beyaz{position:absolute;right:10px;top:10px}
.urun-ic{display:flex;flex-direction:column;flex:1;padding:14px 16px 16px}
.urun h3{font-size:16.5px;font-weight:750;letter-spacing:-.025em}
.urun-ad{margin:3px 0 12px;font-size:14px;color:var(--soluk);line-height:1.4}
.urun-bilgi{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;color:var(--soluk);font-variant-numeric:tabular-nums}
.urun-bilgi span{display:inline-flex;align-items:center;gap:5px}
.urun-bilgi .i{width:14px;height:14px}
.urun-alt{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:14px}
.fiyat{display:inline-flex;align-items:baseline;gap:7px;font-variant-numeric:tabular-nums}
.fiyat s{font-size:13px;color:var(--solgun)}
.fiyat b{font-size:19px;font-weight:800;letter-spacing:-.03em;color:var(--murekkep)}
.urun-not{margin:6px 0 0;text-align:center}

/* ── Neden (kese kâğıdı ortada, faydalar çevresinde) ────────────────────── */
.torba-duzen{display:grid;gap:clamp(28px,4vw,48px);align-items:center}
.torba{margin:0 auto;width:min(100%,520px);aspect-ratio:1;border-radius:var(--r5);overflow:hidden;box-shadow:var(--golge-2);background:var(--zemin-2)}
.torba img{width:100%;height:100%;object-fit:cover}
.fayda{list-style:none;margin:0;padding:0;display:grid;gap:clamp(22px,3vw,40px)}
.fayda li{display:grid;grid-template-columns:52px 1fr;gap:4px 16px;align-items:start}
.fayda .ik{grid-row:span 2;display:inline-grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--yuzey);box-shadow:var(--golge-1);color:var(--marka-koyu)}
.fayda .ik .i{width:24px;height:24px}
.fayda b{font-size:19px;font-weight:750;letter-spacing:-.025em;color:var(--murekkep);line-height:1.3}
.fayda span{color:var(--soluk);font-size:16px;line-height:1.55}
@media (min-width:600px) and (max-width:1023px){.fayda{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){
  .torba-duzen{grid-template-columns:1fr minmax(380px,500px) 1fr}
  .fayda.sol{text-align:right}
  .fayda.sol li{grid-template-columns:1fr 52px}
  .fayda.sol .ik{grid-column:2;grid-row:1/3}
  .fayda.sol b,.fayda.sol span{grid-column:1}
}

/* ── Gece bandı (israf, hesap) ──────────────────────────────────────────── */
.gece{background:var(--gece);color:var(--gece-metin)}
.gece h2,.gece .h2,.gece h3{color:#FFF6EA}
.gece .h2 em{color:var(--kehribar)}
.gece .lead{color:#C9BFB2}
.gece .kaynak,.gece .not{color:var(--gece-soluk)}
.dev{display:flex;flex-direction:column;align-items:center;text-align:center}
.dev-rakam{margin:0;font-size:clamp(76px,15vw,200px);font-weight:800;line-height:.9;letter-spacing:-.06em;color:#FFF6EA;font-variant-numeric:tabular-nums}
.dev-rakam small{font-size:.36em;letter-spacing:-.04em;color:var(--kehribar)}
.dev-alt{margin:18px 0 0;font-size:clamp(22px,2.6vw,34px);font-weight:700;letter-spacing:-.03em;color:#FFF6EA}
.dev .lead{margin:22px auto 0;max-width:34em}
.rakamlar{display:grid;gap:22px;width:min(100%,760px);margin:clamp(40px,5vw,56px) auto 22px;padding-top:28px;border-top:1px solid var(--gece-cizgi)}
.rakam b{display:block;font-size:clamp(28px,3vw,40px);font-weight:800;line-height:1;letter-spacing:-.04em;color:#FFF6EA;margin-bottom:8px}
.rakam span{color:var(--gece-soluk);font-size:15.5px}
@media (min-width:720px){.rakamlar{grid-template-columns:1fr 1fr}}

/* ── Güvence (üç adım çizgisi) ──────────────────────────────────────────── */
.guvence-kart{display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(36px,6vw,80px) clamp(20px,5vw,72px);
  border-radius:var(--r5);background:var(--yuzey);box-shadow:var(--golge-1)}
.guvence-kart .h2{max-width:14em}
.akis{list-style:none;margin:clamp(34px,4vw,52px) 0 26px;padding:0;display:grid;gap:26px;width:100%;max-width:960px;counter-reset:akis}
.akis li{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;counter-increment:akis}
.akis li::before{content:counter(akis);display:inline-grid;place-items:center;width:44px;height:44px;margin-bottom:8px;border-radius:50%;background:var(--murekkep);color:#FFF8EF;font-weight:800}
.akis b{font-size:18px;font-weight:750;letter-spacing:-.02em;color:var(--murekkep)}
.akis span{max-width:17em;color:var(--soluk);font-size:15.5px}
@media (min-width:860px){
  .akis{grid-template-columns:repeat(3,1fr);gap:24px}
  .akis li:not(:last-child)::after{content:"";position:absolute;top:22px;left:calc(50% + 34px);right:calc(-50% + 34px);border-top:2px dashed rgba(23,22,28,.18)}
}

/* ── Köprü kartı (müşteri ↔ işletme) ────────────────────────────────────── */
.kopru-kart{position:relative;display:grid;border-radius:var(--r5);overflow:hidden;background:var(--gece);color:var(--gece-metin)}
.kopru-kart>img{width:100%;aspect-ratio:16/10;object-fit:cover}
.kopru-ic{padding:clamp(26px,4vw,44px)}
.kopru-ic .h2{color:#FFF6EA;font-size:clamp(30px,3.6vw,48px)}
.kopru-ic p{margin:14px 0 24px;color:#C9BFB2;max-width:30em}
@media (min-width:900px){
  .kopru-kart>img{aspect-ratio:16/8.4}
  .kopru-ic{position:absolute;left:clamp(20px,3vw,36px);bottom:clamp(20px,3vw,36px);width:min(460px,46%);border-radius:var(--r4);
    background:rgba(18,25,34,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
}
/* Dikey fotoğraflı köprü kartı (müşteri sitesi): masaüstünde solda metin, sağda fotoğraf */
.kopru-kart.dikey>img{aspect-ratio:1;object-position:50% 34%}
@media (min-width:900px){
  .kopru-kart.dikey{grid-template-columns:1fr minmax(0,.82fr);align-items:center}
  .kopru-kart.dikey>img{order:2;height:100%;min-height:500px;aspect-ratio:auto;object-position:50% 40%}
  .kopru-kart.dikey .kopru-ic{position:static;width:auto;padding:clamp(40px,5vw,80px);border-radius:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .kopru-kart.dikey .kopru-ic .h2{font-size:clamp(36px,4vw,56px)}
  .kopru-kart.dikey .kopru-ic p{font-size:18px}
}

/* ── SSS ────────────────────────────────────────────────────────────────── */
.sss{max-width:860px;margin-inline:auto}
.soru{border-bottom:1px solid var(--cizgi)}
.soru:first-child{border-top:1px solid var(--cizgi)}
.soru summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:66px;padding:16px 0;cursor:pointer;
  font:700 18px/1.35 var(--sans);letter-spacing:-.02em;color:var(--murekkep)}
.soru summary::-webkit-details-marker{display:none}
.soru summary:hover{color:var(--marka-metin)}
.soru .arti{display:inline-grid;place-items:center;width:36px;height:36px;flex:none;border-radius:50%;border:1.5px solid var(--cizgi);transition:transform .25s ease,background-color .25s ease}
.soru[open] .arti{transform:rotate(45deg);background:var(--murekkep);color:#FFF8EF;border-color:var(--murekkep)}
.soru .arti .i{width:16px;height:16px}
.cevap{padding:0 0 22px;color:var(--metin);max-width:44em}
.cevap p{margin:0}

/* ── Kapanış (gece vitrini; v4'te beğenilen bölümün yenilenmiş hâli) ──── */
.kapanis{position:relative;isolation:isolate;overflow:hidden;background:var(--gece);color:var(--gece-metin);padding:clamp(96px,12vw,168px) 0}
.kapanis-foto{position:absolute;inset:-12px;z-index:-2}
.kapanis-foto img{width:100%;height:100%;object-fit:cover;object-position:35% 50%;filter:blur(1.5px) saturate(1.1)}
.kapanis::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(12,17,25,.7)}
.kapanis-ic{display:flex;flex-direction:column;align-items:center;text-align:center}
.kapanis-ikon{width:76px;height:76px;margin-bottom:30px;border-radius:23%;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 18px 40px -12px rgba(0,0,0,.7)}
.kapanis .h2{color:#FFF6EA;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.kapanis .h2 em{color:var(--kehribar)}
.kapanis .lead{color:#DCD3C7;margin:20px auto 32px}
.kapanis .liste{width:min(100%,540px);text-align:left}
.kapanis .liste-satir,.kapanis .liste-satir input{background:#FFFDF9;color:var(--murekkep)}
.kapanis .onay{color:#BDB3A6}
.kapanis .onay input{accent-color:var(--kehribar)}
.kapanis .magaza .not{color:#BDB3A6}

/* ── Alt bilgi ──────────────────────────────────────────────────────────── */
.alt{background:var(--gece);color:var(--gece-soluk);padding:clamp(56px,7vw,88px) 0 28px;border-top:1px solid var(--gece-cizgi);font-size:15px}
.alt .marka{color:#FFF6EA}
.alt .marka small{color:var(--kehribar)}
.alt-izgara{display:grid;gap:36px}
.alt .alt-baslik{font-size:13px;font-weight:700;letter-spacing:.02em;color:#FFF6EA;margin-bottom:16px}
.alt nav{display:flex;flex-direction:column;gap:2px}
.alt nav a,.alt nav button{display:inline-flex;align-items:center;min-height:40px;padding:0;border:0;background:none;text-align:left;color:var(--gece-soluk);text-decoration:none;cursor:pointer}
.alt nav a:hover,.alt nav button:hover{color:#FFF6EA}
.alt p{margin:14px 0 0;max-width:24em}
.sosyal{display:flex;gap:10px;margin-top:20px}
.sosyal a{display:inline-grid;place-items:center;width:44px;height:44px;border:1px solid var(--gece-cizgi);border-radius:12px;color:var(--gece-metin)}
.sosyal a:hover{border-color:var(--gece-metin)}
.alt-son{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;margin-top:48px;padding-top:22px;border-top:1px solid var(--gece-cizgi);font-size:13px}
.alt-son a{display:inline-flex;align-items:center;min-height:40px;color:var(--gece-soluk)}
@media (min-width:860px){.alt-izgara{grid-template-columns:1.5fr 1fr 1fr 1fr}}

/* ── Hukuki metin penceresi ─────────────────────────────────────────────── */
.pencere{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;overscroll-behavior:contain}
.pencere[hidden]{display:none}
.pencere-zemin{position:absolute;inset:0;background:rgba(18,25,34,.55)}
.pencere-kart{position:relative;width:min(100%,460px);padding:32px 28px 26px;border-radius:var(--r4);background:var(--zemin);box-shadow:0 30px 80px -20px rgba(0,0,0,.5)}
.pencere-kart h3{font-size:24px;margin:0 40px 12px 0}
.pencere-kart .btn{margin-top:8px}
.pencere-x{position:absolute;right:14px;top:14px;display:inline-grid;place-items:center;width:44px;height:44px;border:0;border-radius:12px;background:transparent;cursor:pointer}
.pencere-alt{margin:16px 0 0;font-size:14px;color:var(--soluk)}

/* ═══ İŞLETME SİTESİNE ÖZEL ══════════════════════════════════════════════ */
.uc-gercek{display:grid;gap:0;width:min(100%,1040px);margin:0 auto;text-align:center}
.uc-gercek>div{padding:26px 10px;border-bottom:1px solid var(--cizgi)}
.uc-gercek>div:last-child{border-bottom:0}
.uc-gercek b{display:block;font-size:clamp(34px,3.7vw,50px);white-space:nowrap;font-weight:800;line-height:1;letter-spacing:-.05em;color:var(--murekkep);margin-bottom:10px}
.uc-gercek span{color:var(--soluk)}
@media (min-width:860px){.uc-gercek{grid-template-columns:repeat(3,1fr)}.uc-gercek>div{padding:10px 28px;border-bottom:0}
  .uc-gercek>div+div{border-left:1px solid var(--cizgi)}}

/* Panel: ortada telefon (3B görsel), çevresinde özellikler */
.panel-duzen{display:grid;gap:clamp(28px,4vw,48px);align-items:center;justify-items:center}
.panel-tel{margin:0;width:clamp(250px,25vw,330px)}
.panel-tel img{width:100%;height:auto}
@media (min-width:1024px){
  .panel-duzen{grid-template-columns:1fr auto 1fr}
  .panel-duzen .fayda{width:100%}
}

/* Sektör mozaiği */
.mozaik{display:grid;gap:12px;grid-template-columns:1fr 1fr}
.mozaik figure{position:relative;margin:0;border-radius:var(--r3);overflow:hidden;background:var(--zemin-2);aspect-ratio:4/5}
.mozaik img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--yay)}
.mozaik figure:hover img{transform:scale(1.035)}
.mozaik figcaption{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;min-height:34px;padding:0 14px;border-radius:999px;
  background:rgba(255,255,255,.95);font-weight:700;font-size:15px;color:var(--murekkep)}
.mozaik .m1{grid-column:1/-1;aspect-ratio:16/10}
@media (min-width:860px){
  .mozaik{grid-template-columns:repeat(4,1fr);grid-template-rows:auto auto;gap:16px}
  .mozaik .m1{grid-column:1/3;grid-row:1/3;aspect-ratio:auto}
  .mozaik figure:not(.m1){aspect-ratio:1}
}

/* Başvuru (gece bandı: fotoğraf + form) */
.basvuru-bant{background:var(--gece);color:var(--gece-metin)}
.basvuru{display:grid;gap:clamp(28px,4vw,48px);align-items:stretch}
.basvuru-foto{position:relative;margin:0;border-radius:var(--r4);overflow:hidden;min-height:320px;background:var(--gece-2)}
.basvuru-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:42% 40%}
.basvuru-metin .h2{color:#FFF6EA}
.basvuru-metin .h2 em{color:var(--kehribar)}
.basvuru-metin .lead{color:#C9BFB2;margin:18px 0 0}
.basvuru-sol{display:flex;flex-direction:column;gap:clamp(24px,3vw,34px)}
.basvuru-sol .basvuru-foto{flex:1}
@media (min-width:1024px){.basvuru{grid-template-columns:.95fr 1.05fr}.basvuru-foto{min-height:280px}}
.form-kart{position:relative;padding:clamp(22px,3.4vw,38px);border-radius:var(--r4);background:var(--zemin);color:var(--metin)}
.form-izgara{display:grid;gap:16px}
@media (min-width:560px){.form-izgara{grid-template-columns:1fr 1fr}.form-izgara .tam{grid-column:1/-1}}
.alan label{display:block;margin-bottom:7px;font-size:14px;font-weight:700;color:var(--murekkep)}
.alan input,.alan select{width:100%;min-height:52px;padding:0 16px;border:1.5px solid var(--cizgi);border-radius:var(--r2);background:#FFFFFF;color:var(--metin);font-size:16px}
.alan input:focus,.alan select:focus{outline:none;border-color:var(--murekkep);box-shadow:0 0 0 4px rgba(23,22,28,.08)}
.tuzak{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.turnstile{margin:22px 0 4px;min-height:65px}
.izin-grup{margin:10px 0 22px}
.form-kart .btn{width:100%}
.form-not{display:flex;align-items:center;gap:8px;margin:16px 0 0;font-size:13.5px;color:var(--soluk)}
.form-not .i{width:16px;height:16px}
.basari{display:none;text-align:left;padding:10px 0}
.basari .ik{display:inline-grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#E3F1E7;color:#1F5B37;margin-bottom:18px}
.basari h3{font-size:28px;margin-bottom:10px}

/* ── Hareket azaltma ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .bel{opacity:1;transform:none}
  .kayan{transform:none}
}
