/* =============================================================
   BAYOGLU DIJITAL — TASARIM SISTEMI v3 (21 Agu 2026 revizyonu)
   -------------------------------------------------------------
   RENK KAYNAGI: FINAL logo dosyalarindan piksel ornekleme
     lacivert #012456 · turuncu #FD9E11  (tahmin degil, olcum)
   Katmanlar: 1 ham palet -> 2 anlam tokenlari -> 3 yuzey kapsami
   Bilesenlerde sabit renk kodu YOKTUR (cihaz kasalari haric:
   metal/donanim renkleri marka paleti degildir).
   Tipografi: Manrope (UI/govde) + Fraunces (buyuk marka basliklari).
   CIHAZ SISTEMI: TEK telefon kasasi + TEK laptop kasasi. Icerik
   "olcek-alan"da yasar; iframe GERCEK viewport'ta (tel 390 /
   laptop 1280) render edilir, JS kasaya gore olcekler (app.js).
============================================================= */

/* ============ 1 — HAM PALET (logodan) ============ */
:root{
  --renk-gece-950:#020A18;
  --renk-gece-900:#041531;
  --renk-gece-800:#032049;
  --renk-lacivert:#012456;          /* logo laciverti */
  --renk-gece-600:#0A3A78;

  --renk-ivory-50:#FDFBF7;
  --renk-ivory-100:#FBF7F1;
  --renk-ivory-200:#F2ECE2;

  --renk-tas-400:#9AABC4;
  --renk-tas-600:#5E6F86;

  --renk-vurgu-500:#FD9E11;         /* logo turuncusu */
  --renk-vurgu-400:#FFB53F;
  --renk-vurgu-700:#9A5F00;         /* acik zeminde okunur turuncu */
}

/* ============ 2 — ANLAM TOKENLARI ============ */
:root{
  --bo-1:4px; --bo-2:8px; --bo-3:12px; --bo-4:16px; --bo-5:24px;
  --bo-6:32px; --bo-7:48px; --bo-8:64px; --bo-9:96px;

  --kap-en:1240px;
  --kap-pad:clamp(20px,5vw,56px);
  --bolum-y:clamp(56px,7.5vw,104px);
  --baslik-y:74px;

  --yuvarlak-sm:6px;
  --yuvarlak:10px;
  --yuvarlak-lg:18px;
  /* cihaz radiuslari UI radiuslarindan ayri tokenlardir */
  --tel-r:46px;            /* telefon kasa kose yumusakligi */
  --tel-pad:8px;           /* kasa ceperi (ekranla kasa arasi) */
  --laptop-r:16px;

  /* TEK AILE: Manrope. Serif denendi (21 Agu) ve Halid'in karariyla
     GERI ALINDI — fazla kurumsal/editorial durdu, marka karakteri
     Manrope'un modern sikiligindan geliyor. Serif geri getirilmeyecek. */
  --yazi:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --yazi-baslik:var(--yazi);

  --olcek-ustbaslik:clamp(10px,1vw,11px);
  --olcek-govde:clamp(15px,1.1vw,16.5px);
  --olcek-govde-lg:clamp(16px,1.25vw,18.5px);
  --olcek-h2:clamp(26px,3.3vw,44px);
  /* hero 3 satirli kurgu (sablonda <br>): en uzun satir kolona
     SIGACAK olcekte — 5 satira bolunme olmaz */
  --olcek-hero:clamp(30px,4.3vw,54px);

  --yumusak:cubic-bezier(.22,.9,.24,1);
  --sure-kisa:.26s;
  --sure:.6s;
  --sure-uzun:1s;
}

/* ============ 3 — YUZEYLER ============ */
[data-yuzey="koyu"]{
  --zemin:var(--renk-gece-900);
  --zemin-2:var(--renk-gece-800);
  --metin:var(--renk-ivory-100);
  --metin-2:var(--renk-tas-400);
  --cizgi:rgba(251,247,241,.10);
  --cizgi-guclu:rgba(251,247,241,.22);
  /* etkilesimli kenarlar icin guclu cizgi: dekoratif hairline
     3:1 kontrast barajini gecemiyor (olculdu) */
  --cizgi-etkilesim:rgba(251,247,241,.36);
  --vurgu:var(--renk-vurgu-500);
  --vurgu-yazi:var(--renk-vurgu-400);
}
[data-yuzey="acik"]{
  --zemin:var(--renk-ivory-100);
  --zemin-2:var(--renk-ivory-200);
  --metin:var(--renk-gece-800);
  --metin-2:var(--renk-tas-600);
  --cizgi:rgba(1,36,86,.13);
  --cizgi-guclu:rgba(1,36,86,.28);
  --cizgi-etkilesim:rgba(1,36,86,.44);
  --vurgu:var(--renk-vurgu-500);
  --vurgu-yazi:var(--renk-vurgu-700);
}

/* ============ TEMEL ============ */
*,*::before,*::after{box-sizing:border-box}
html{
  color-scheme:only light;
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--baslik-y) + 16px);
}
/* once hidden (eski tarayici guvencesi), sonra clip: yatay kaymayi
   kod da tetikleyemez */
html,body{max-width:100%;overflow-x:hidden;overflow-x:clip}
body{
  margin:0;
  background:var(--renk-gece-900);
  color:var(--renk-ivory-100);
  font-family:var(--yazi);
  font-size:var(--olcek-govde);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
body.kilit{overflow:hidden}
img,svg,video,iframe{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
p,h1,h2,h3,figure,dl,dd{margin:0}
::selection{background:var(--renk-vurgu-500);color:var(--renk-gece-950)}
:focus-visible{outline:2px solid var(--renk-vurgu-400);outline-offset:3px;border-radius:var(--yuvarlak-sm)}

.atla{
  position:absolute;left:-9999px;top:0;z-index:300;
  background:var(--renk-vurgu-500);color:var(--renk-gece-950);
  padding:12px 18px;font-weight:700;border-radius:0 0 var(--yuvarlak) 0;
}
.atla:focus{left:0}

.kap{width:100%;max-width:var(--kap-en);margin-inline:auto;padding-inline:var(--kap-pad);position:relative}
.bolum{background:var(--zemin);color:var(--metin);padding-block:var(--bolum-y);position:relative}

.ustbaslik{
  font-size:var(--olcek-ustbaslik);font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--vurgu-yazi);
  display:flex;align-items:center;gap:12px;line-height:1.4;
}
.ustbaslik::before{content:'';width:24px;height:1px;flex:none;background:currentColor;opacity:.55}

.bolum-h2{
  font-size:var(--olcek-h2);font-weight:700;letter-spacing:-.02em;line-height:1.12;
  color:var(--metin);margin-top:var(--bo-4);max-width:24ch;
}
.bolum-alt{
  margin-top:var(--bo-4);
  font-size:var(--olcek-govde-lg);color:var(--metin-2);line-height:1.7;max-width:52ch;
}

/* ============ DUGMELER / BAGLAR ============ */
.dugme{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:50px;padding:0 26px;
  border:1px solid transparent;border-radius:var(--yuvarlak);
  font-size:15px;font-weight:700;letter-spacing:.01em;text-align:center;
  transition:background var(--sure-kisa) var(--yumusak),
             border-color var(--sure-kisa) var(--yumusak),
             color var(--sure-kisa) var(--yumusak),
             transform var(--sure-kisa) var(--yumusak);
}
.dugme-kucuk{min-height:42px;padding:0 18px;font-size:14px}
.dugme-birincil{background:var(--renk-ivory-100);border-color:var(--renk-ivory-100);color:var(--renk-gece-950)}
.dugme-birincil:hover{background:var(--renk-vurgu-400);border-color:var(--renk-vurgu-400);transform:translateY(-1px)}
.dugme-hayalet{border-color:var(--cizgi-etkilesim);color:var(--metin)}
.dugme-hayalet:hover{border-color:var(--vurgu);color:var(--vurgu-yazi);transform:translateY(-1px)}
.dugme:active{transform:translateY(0)}
.dugme-ok svg{width:15px;height:10px;flex:none;transition:transform var(--sure-kisa) var(--yumusak)}
.dugme-ok:hover svg{transform:translateX(4px)}

.metin-bag{
  display:inline-flex;align-items:center;gap:10px;
  font-size:15px;font-weight:700;color:var(--metin);
  padding-bottom:4px;border-bottom:1px solid var(--cizgi-guclu);
  transition:color var(--sure-kisa) var(--yumusak),border-color var(--sure-kisa) var(--yumusak);
}
.metin-bag .ok-sag{width:16px;height:10px;transition:transform var(--sure-kisa) var(--yumusak)}
.metin-bag:hover{color:var(--vurgu-yazi);border-color:var(--vurgu)}
.metin-bag:hover .ok-sag{transform:translateX(4px)}

/* =============================================================
   BASLIK — ince, sakin
============================================================= */
.baslik{
  position:fixed;inset:0 0 auto 0;z-index:100;height:var(--baslik-y);
  display:flex;align-items:center;
  border-bottom:1px solid transparent;
  transition:background var(--sure) var(--yumusak),border-color var(--sure) var(--yumusak);
}
.baslik.inildi{background:rgba(2,10,24,.92);border-bottom-color:rgba(251,247,241,.1)}
.baslik-ic{
  width:100%;max-width:var(--kap-en);margin-inline:auto;padding-inline:var(--kap-pad);
  display:flex;align-items:center;gap:var(--bo-6);
}
/* logo header'da GUCLU durur (Halid'in istegi: marka 2 sn'de anlasilsin) */
.marka{flex:none;display:block}
.marka img{height:66px;width:auto}

.menu{display:flex;align-items:center;gap:var(--bo-5);margin-right:auto}
.menu-bag{
  font-size:14px;font-weight:600;color:var(--renk-tas-400);
  padding-block:8px;transition:color var(--sure-kisa) var(--yumusak);
}
.menu-bag:hover{color:var(--renk-ivory-100)}
/* bulunulan sayfa (app.js isaretler): ince turuncu alt cizgi */
.menu-bag.is-burada{color:var(--renk-ivory-100);box-shadow:inset 0 -2px 0 var(--renk-vurgu-500)}

.baslik-sag{display:flex;align-items:center;gap:var(--bo-4);flex:none;margin-left:auto}
.menu-dugme{
  display:none;width:44px;height:44px;margin-right:-10px;
  align-items:center;justify-content:center;flex-direction:column;gap:6px;
}
.menu-cizgi{
  width:22px;height:1.5px;background:var(--renk-ivory-100);
  transition:transform var(--sure-kisa) var(--yumusak);
}
.menu-dugme[aria-expanded="true"] .menu-cizgi:first-child{transform:translateY(3.75px) rotate(45deg)}
.menu-dugme[aria-expanded="true"] .menu-cizgi:last-child{transform:translateY(-3.75px) rotate(-45deg)}

/* MOBIL MENU — standart "navbar listesi" degil: numarali, buyuk,
   sirayla giren baglar + altta CTA ve dogrudan iletisim. */
.mobil-menu{
  position:fixed;inset:0;z-index:95;
  background:
    radial-gradient(ellipse 90% 50% at 80% 0%, rgba(1,36,86,.55), transparent 60%),
    var(--renk-gece-950);
  padding:calc(var(--baslik-y) + 20px) var(--kap-pad) 32px;overflow-y:auto;
  opacity:0;
  transition:opacity var(--sure) var(--yumusak);
}
.mobil-menu[hidden]{display:none}
.mobil-menu.acik{opacity:1}
.mobil-menu-ic{
  min-height:100%;display:flex;flex-direction:column;
  justify-content:space-between;gap:var(--bo-6);
}
.mobil-baglar{display:flex;flex-direction:column;padding-top:var(--bo-4)}
.mobil-bag{
  display:flex;align-items:baseline;gap:16px;
  font-size:clamp(28px,8vw,34px);font-weight:700;letter-spacing:-.02em;
  color:var(--renk-ivory-100);
  padding:18px 0;border-bottom:1px solid rgba(251,247,241,.1);
  opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--yumusak),transform .5s var(--yumusak);
  transition-delay:calc(.07s + var(--g,0) * .06s);
}
.mobil-bag b{
  font-size:11px;font-weight:700;letter-spacing:.2em;
  color:var(--renk-vurgu-500);flex:none;
}
.mobil-menu.acik .mobil-bag{opacity:1;transform:none}
.mobil-alt{display:flex;flex-direction:column;gap:var(--bo-4)}
.mobil-cta{width:100%}
.mobil-iletisim{display:flex;justify-content:center;gap:var(--bo-6)}
.mobil-iletisim .alt-bag{color:var(--renk-tas-400)}

/* =============================================================
   HERO — solda marka mesaji, sagda orbit carki
============================================================= */
.hero{
  position:relative;overflow:hidden;
  /* masaustu: sade lacivert atmosfer (dikey gorsel masaustunde denendi,
     Halid'in karariyla KALDIRILDI — yalniz mobil hero'da kullaniliyor) */
  background:
    radial-gradient(ellipse 62% 58% at 72% 46%, rgba(1,36,86,.6), transparent 66%),
    linear-gradient(178deg, var(--renk-gece-800) 0%, var(--renk-gece-900) 52%, var(--renk-gece-950) 100%);
  min-height:min(92svh,860px);
  display:flex;align-items:center;
  padding-top:calc(var(--baslik-y) + clamp(40px,7vh,80px));
  padding-bottom:clamp(48px,8vh,96px);
}
.hero-isik{
  position:absolute;pointer-events:none;
  left:-12vw;bottom:-34vh;width:70vw;height:80vh;max-width:880px;
  background:radial-gradient(ellipse at 35% 75%, rgba(253,158,17,.17), transparent 62%);
}

.hero-ic{
  display:grid;
  grid-template-columns:minmax(0,52fr) minmax(0,48fr);
  align-items:center;
  gap:clamp(24px,3vw,56px);
}
.hero-metin{max-width:600px;min-width:0}
.hero-metin .ustbaslik{margin-bottom:var(--bo-4)}

.hero-baslik{
  font-size:var(--olcek-hero);font-weight:800;letter-spacing:-.025em;line-height:1.08;
  color:var(--renk-ivory-100);margin-bottom:var(--bo-5);
}
/* markanin tek buyuk vurgu ani: son cumle logo turuncusunda */
.hero-vurgu{
  font-style:normal;font-weight:800;
  color:var(--renk-vurgu-400);
}
/* hero marka satiri: ivory-turuncu mini sembol + BAYOGLU DIJITAL */
.ustbaslik--marka{gap:10px}
.ustbaslik--marka::before{display:none}
.ustbaslik--marka img{height:22px;width:auto;flex:none}
.hero-p{
  font-size:var(--olcek-govde-lg);color:var(--renk-tas-400);line-height:1.7;
  max-width:52ch;margin-bottom:var(--bo-6);
}
.hero-dugmeler{display:flex;flex-wrap:wrap;gap:var(--bo-3)}

/* =============================================================
   ORBIT HERO — 8 hizmet paneli 3D cark uzerinde.
   21 Agu: cark surekli ve yavas doner (hareket app.js'te);
   burada yalnizca gorunum ve durum renkleri (.is-on) var.
============================================================= */
.gorunmez-liste{position:absolute;left:-9999px}
.hero-orbit{position:relative;min-width:0}
.orbit-alan{
  position:relative;
  height:clamp(380px,52vh,470px);
  perspective:1020px;perspective-origin:52% 50%;
  cursor:grab;
}
.orbit-alan.tutuluyor{cursor:grabbing}
.orbit-scene{position:absolute;inset:0;transform-style:preserve-3d}

.orbit-panel{
  position:absolute;left:50%;top:50%;
  transform-style:preserve-3d;will-change:transform,opacity,filter;
  backface-visibility:hidden;
}
.orbit-panel::before{
  content:'';position:absolute;inset:-64% -30%;pointer-events:none;
  opacity:0;transition:opacity .55s var(--yumusak);
  background:
    radial-gradient(ellipse 52% 50% at 50% 50%, rgba(10,58,120,.55) 0%, rgba(3,32,73,.28) 42%, transparent 72%),
    radial-gradient(ellipse 30% 26% at 46% 52%, rgba(253,158,17,.06) 0%, transparent 70%);
}
.orbit-panel.is-on::before{opacity:1}
.panel-plaka{
  position:relative;transform-style:preserve-3d;backface-visibility:hidden;
  padding:18px 26px 18px 23px;
  border:1px solid rgba(251,247,241,.07);border-radius:12px;
  background:linear-gradient(118deg, rgba(3,30,68,.5) 0%, rgba(2,17,42,.36) 58%, rgba(2,10,26,.26) 100%);
  box-shadow:inset 0 1px 0 rgba(251,247,241,.05), 0 20px 44px rgba(1,3,9,.35);
  /* kartlar birbirinin onunden gecerken yumusak (katı degil) gecis */
  transition:background .9s ease,box-shadow .9s ease,border-color .9s ease;
}
.orbit-panel.is-on .panel-plaka{
  border-color:rgba(253,158,17,.3);
  background:linear-gradient(118deg, rgba(6,45,98,.99) 0%, rgba(3,29,66,.985) 58%, rgba(2,18,44,.98) 100%);
  box-shadow:inset 0 1px 0 rgba(251,247,241,.12), inset 1px 0 0 rgba(253,158,17,.22), 0 34px 78px rgba(1,3,9,.62);
}
.panel-mark{
  position:absolute;left:0;top:18px;bottom:18px;width:2px;border-radius:2px;
  background:linear-gradient(to bottom, rgba(253,158,17,.12), var(--renk-vurgu-500) 45%, rgba(253,158,17,.12));
}
.panel-kenar{
  position:absolute;left:0;right:0;bottom:-6px;height:6px;
  transform-origin:top center;transform:rotateX(-86deg);
  border-radius:0 0 12px 12px;
  background:linear-gradient(180deg, rgba(3,28,64,.95), rgba(2,10,24,.6));
}
.panel-ustcizgi{
  position:absolute;left:26px;right:26px;top:0;height:1px;
  background:linear-gradient(90deg, transparent, rgba(251,247,241,.16) 45%, transparent);
}
.panel-bas{display:flex;align-items:baseline;gap:15px}
.panel-no{
  font-size:11px;font-weight:700;letter-spacing:.22em;
  color:rgba(253,158,17,.72);transition:color .35s ease;
}
.orbit-panel.is-on .panel-no{color:var(--renk-vurgu-500)}
.panel-ad{
  font-size:clamp(17px,1.55vw,23px);font-weight:700;letter-spacing:-.015em;line-height:1.16;
  color:rgba(251,247,241,.72);text-wrap:balance;transition:color .35s ease;
}
.orbit-panel.is-on .panel-ad{color:var(--renk-ivory-50)}
.panel-m{
  margin:8px 0 0 26px;font-size:12.5px;line-height:1.5;
  color:var(--renk-tas-400);max-width:34ch;
}

/* ipucu rozeti: ilk dokunusta kaybolur; yalniz masaustunde gorunur.
   (hero-orbit'e gore konumlanir — cark alaninin disinda durur) */
.orbit-ipucu{
  position:absolute;right:16px;bottom:2px;z-index:400;
  display:flex;align-items:center;gap:12px;
  padding:9px 16px;border:1px solid rgba(251,247,241,.13);border-radius:999px;
  background:rgba(2,10,24,.5);
  font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(251,247,241,.6);
  transition:opacity .6s ease;pointer-events:none;
}
.ipucu-oklar{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--renk-vurgu-500)}
.ipucu-oklar span{font-size:8px;line-height:1}

/* =============================================================
   CIHAZ SISTEMI — TEK telefon, TEK laptop. Tum projeler ayni
   kasayi kullanir; proje icerigi "olcek-alan"da yasar.
   -------------------------------------------------------------
   IKI KANITLANMIS TUZAK (15 Agu'da olculdu, SILINMEYECEK):
   1) overflow:hidden + border-radius tek basina iframe'i KIRPMIYOR;
      transform:translateZ(0) + isolation:isolate sart.
   2) temeldeki iframe{max-width:100%} kurali genisletmeyi ezer;
      olcekli iframe'de max-width:none sart.
============================================================= */
.cihaz-etiket{
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--metin-2);margin-bottom:var(--bo-3);display:block;
}
.cihaz-telefon{width:100%}
.cihaz-cumle{margin-top:10px;font-size:12.5px;color:var(--metin-2);line-height:1.5;max-width:34ch}

.telefon-govde{
  position:relative;width:100%;
  aspect-ratio:390/800;
  padding:var(--tel-pad);
  border-radius:var(--tel-r);
  /* metal kasa: yan raylarda isik, ortada koyu (donanim rengi) */
  background:linear-gradient(96deg,
    #0a111e 0%, #5b6880 2.5%, #1c2534 7%,
    #121a29 50%,
    #1c2534 93%, #5b6880 97.5%, #0a111e 100%);
  box-shadow:
    0 0 0 1px rgba(2,10,24,.9),
    0 34px 64px -28px rgba(1,10,30,.7),
    0 8px 20px -10px rgba(1,10,30,.45);
}
/* yan tuslar: solda ses, sagda guc */
.telefon-govde::before,
.telefon-govde::after{
  content:'';position:absolute;width:2.5px;border-radius:2px;
  background:linear-gradient(180deg,#414c60,#18202e);
}
.telefon-govde::before{left:-2px;top:23%;height:13%}
.telefon-govde::after{right:-2px;top:28%;height:11%}

.telefon-ekran{
  position:relative;width:100%;height:100%;
  border-radius:calc(var(--tel-r) - var(--tel-pad));overflow:hidden;
  background:var(--renk-gece-950);
  box-shadow:0 0 0 1px rgba(2,10,24,.95) inset;
  transform:translateZ(0);
  isolation:isolate;
}

.laptop-govde{position:relative;width:100%}
.laptop-kapak{
  position:relative;
  padding:14px 12px;
  border-radius:var(--laptop-r) var(--laptop-r) 5px 5px;
  background:linear-gradient(162deg,#2a3346 0%,#141c2b 100%);
  box-shadow:
    0 0 0 1px rgba(2,10,24,.85),
    0 30px 60px -30px rgba(1,10,30,.6);
}
.laptop-kamera{
  position:absolute;top:6px;left:50%;transform:translateX(-50%);
  width:5px;height:5px;border-radius:50%;
  background:#070d18;box-shadow:0 0 0 1px rgba(251,247,241,.09);
}
.laptop-ekran{
  position:relative;border-radius:6px;overflow:hidden;
  background:var(--renk-gece-950);
  box-shadow:0 0 0 1px rgba(2,10,24,.9) inset;
  transform:translateZ(0);isolation:isolate;
}
.laptop-taban{
  position:relative;height:13px;
  width:112%;margin-inline:-6%;
  border-radius:0 0 13px 13px;
  background:linear-gradient(180deg,#59657c 0%,#39435a 42%,#1d2634 100%);
  box-shadow:0 14px 26px -14px rgba(1,10,30,.6);
}
.laptop-taban::before{
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:15%;height:5px;border-radius:0 0 7px 7px;
  background:rgba(2,10,24,.5);
}
.tarayici-bar{
  display:flex;align-items:center;gap:6px;
  padding:9px 14px;border-bottom:1px solid rgba(251,247,241,.08);
  background:var(--renk-gece-950);
}
.tarayici-bar span{width:9px;height:9px;border-radius:50%;background:rgba(251,247,241,.18)}
.tarayici-adres{
  margin-left:10px;font-style:normal;font-size:11.5px;color:var(--renk-tas-400);
  background:rgba(251,247,241,.06);border-radius:6px;padding:3px 10px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70%;
}

/* OLCEK ALANI: poster + tikla-baslat dugmesi; iframe app.js'te
   olusturulur, gercek viewport'ta render edilir ve olceklenir. */
.olcek-alan{position:relative;width:100%;height:100%;overflow:hidden}
.olcek-alan--laptop{height:auto;aspect-ratio:1280/800}
.olcek-alan .demo-iframe{
  position:absolute;top:0;left:0;border:0;
  max-width:none;                 /* SART — temel kural ezilir */
  background:var(--renk-ivory-50);
  transform-origin:0 0;
}
.demo-poster{
  position:absolute;inset:0;z-index:1;
  width:100%;height:100%;object-fit:cover;object-position:top center;
  transition:opacity .5s var(--yumusak);
}
.olcek-alan.yuklendi .demo-poster{opacity:0;pointer-events:none}

/* DAVETIYE SLAYTI (ana sayfa): telefonun icinde etkilesimsiz, yumusak
   gecisli konsept turu — her kare 4.5 sn, hafif yaklasma hareketi */
.slayt{position:relative}
.slayt-kare{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:top center;
  opacity:0;transform:scale(1.05);
  animation:slaytGec calc(var(--n,4) * 4.5s) ease-in-out infinite;
  animation-delay:calc(var(--i,0) * 4.5s);
  will-change:opacity,transform;
}
@keyframes slaytGec{
  0%{opacity:0;transform:scale(1.05)}
  5%{opacity:1}
  23%{opacity:1;transform:scale(1)}
  28%{opacity:0;transform:scale(1)}
  100%{opacity:0}
}

.demo-btn{
  position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:2;
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(2,10,24,.86);color:var(--renk-ivory-100);
  border:1px solid rgba(251,247,241,.3);
  border-radius:999px;padding:11px 18px;min-height:44px;
  font-size:13px;font-weight:700;white-space:nowrap;
  transition:background var(--sure-kisa),border-color var(--sure-kisa),transform var(--sure-kisa);
}
.demo-btn::before{
  content:'';width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--renk-vurgu-500);
}
.demo-btn:hover{background:rgba(2,10,24,.95);border-color:var(--renk-vurgu-500);transform:translateX(-50%) translateY(-1px)}
.demo-btn.bekliyor{opacity:.6;pointer-events:none}

.demo-alt{
  margin-top:var(--bo-6);
  display:flex;align-items:baseline;justify-content:space-between;
  flex-wrap:wrap;gap:var(--bo-4);
}
.demo-not{font-size:13px;color:var(--metin-2);max-width:52ch}

/* =============================================================
   PROJE SUNUM ORTAKLARI
============================================================= */
.proje-bas{max-width:74ch;margin-bottom:clamp(32px,4vw,52px)}
.proje-bas--orta{margin-inline:auto;text-align:center}
.proje-bas--orta .bolum-h2,.proje-bas--orta .bolum-alt{margin-inline:auto}
.ustbaslik--orta{justify-content:center}
.ustbaslik--orta::after{content:'';width:24px;height:1px;background:currentColor;opacity:.55}

/* kanitlar: 2-4 mini editorial etiket. Kart degil; ince ayracli satir */
.kanitlar{
  margin-top:var(--bo-5);
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;
}
.kanitlar li{
  display:flex;align-items:center;gap:9px;
  font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--metin);
}
.kanitlar li::before{
  content:'';width:5px;height:5px;border-radius:50%;flex:none;
  background:var(--vurgu);
}
.kanitlar--kucuk{margin-top:var(--bo-4);gap:6px 14px}
.kanitlar--kucuk li{font-size:12px;color:var(--metin-2)}
.kanitlar--orta{justify-content:center}

.yonerge{
  margin-top:var(--bo-5);
  display:inline-flex;align-items:center;gap:10px;
  font-size:14px;font-weight:600;color:var(--vurgu-yazi);
  background:rgba(253,158,17,.09);
  border:1px solid rgba(253,158,17,.25);
  border-radius:999px;padding:9px 16px;
}
.yonerge svg{width:15px;height:15px;flex:none}

/* mobil sekmeler (ENO): masaustunde gizli */
.sekmeler{display:none;gap:8px;margin-bottom:var(--bo-4)}
.sekme{
  flex:1;min-height:44px;border-radius:999px;
  border:1px solid var(--cizgi-etkilesim);
  font-size:14px;font-weight:700;color:var(--metin-2);
  transition:background var(--sure-kisa),color var(--sure-kisa),border-color var(--sure-kisa);
}
.sekme.is-sel{background:var(--metin);color:var(--zemin);border-color:var(--metin)}

.stage-alt{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--bo-4);
  padding-top:var(--bo-4);
}
.stage-ad{font-size:clamp(18px,1.9vw,23px);font-weight:700;letter-spacing:-.01em;color:var(--metin)}
.stage-cumle{font-size:13.5px;color:var(--metin-2);margin-top:4px;max-width:52ch}
.stage-bag{flex:none;font-size:13.5px}

/* =============================================================
   NELER YAPIYORUZ — solda 6 satir, sagda iskambil destesi
============================================================= */
.tanim-ic{
  display:grid;grid-template-columns:minmax(0,50fr) minmax(0,50fr);
  gap:clamp(32px,5vw,80px);align-items:center;
}
.tanim-metin{max-width:52ch}
.tanim-satirlar{margin-top:clamp(28px,3.5vw,44px)}
.tanim-satir{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;
  padding:12px 0;border-top:1px solid var(--cizgi-guclu);
}
.tanim-no{font-size:10.5px;font-weight:700;letter-spacing:.08em;color:var(--vurgu-yazi);flex:none}
.tanim-ad{font-size:15.5px;font-weight:700;letter-spacing:-.01em;color:var(--metin);flex:none}
.tanim-m{font-size:13.5px;color:var(--metin-2);line-height:1.55}
.js .tanim-satir:nth-child(2){transition-delay:.06s}
.js .tanim-satir:nth-child(3){transition-delay:.12s}
.js .tanim-satir:nth-child(4){transition-delay:.18s}
.js .tanim-satir:nth-child(5){transition-delay:.24s}
.js .tanim-satir:nth-child(6){transition-delay:.3s}

/* iskambil destesi: kartlar ortak pivottan yelpaze gibi acilir.
   Sirasi gelen kart BUYUMEZ, yalnizca kafasini yukari uzatir
   (translateY) — deste dizilisi bozulmaz, z-index'e DOKUNULMAZ. */
.tanim-deste{
  --n:8;--ac:4.5deg;--adim:11%;
  position:relative;
  width:100%;max-width:540px;margin-inline:auto;
  aspect-ratio:1/.82;
}
.tanim-kart{
  position:absolute;left:50%;bottom:6%;
  width:38%;aspect-ratio:5/7;              /* iskambil orani */
  margin:0 0 0 -19%;
  transform-origin:50% 132%;
  --s:calc(var(--i) - (var(--n) - 1) / 2);
  --kalk:0px;
  transform:translateX(calc(var(--s) * var(--adim)))
            rotate(calc(var(--s) * var(--ac)))
            translateY(var(--kalk));
  border-radius:13px;overflow:hidden;
  background:var(--renk-gece-950);
  border:1px solid rgba(1,36,86,.2);
  box-shadow:0 2px 4px rgba(1,20,50,.1), 0 20px 40px -18px rgba(1,20,50,.4);
  transition:transform .7s var(--yumusak), box-shadow .7s var(--yumusak);
}
.tanim-kart img{
  width:100%;height:100%;object-fit:cover;object-position:top center;
}
.tanim-kart.is-on{
  --kalk:-24px;
  box-shadow:0 4px 10px rgba(1,20,50,.16), 0 30px 56px -20px rgba(1,20,50,.5);
}

/* =============================================================
   SECILI PROJELER (ana sayfa) — 4 proje, donusumlu sag/sol ritim
============================================================= */
.secili-akis{display:flex;flex-direction:column;gap:clamp(64px,8vw,112px)}
.secili-proje{
  display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);
  gap:clamp(28px,4.5vw,88px);align-items:center;
}
.secili-proje--ters .secili-sahne{order:-1}
.secili-no{
  font-size:11px;font-weight:700;letter-spacing:.22em;
  color:var(--vurgu-yazi);margin-bottom:var(--bo-3);
}
.secili-ad{
  font-size:clamp(22px,2.5vw,33px);font-weight:800;letter-spacing:-.02em;line-height:1.12;
  color:var(--metin);
}
.secili-cumle{
  margin-top:var(--bo-3);
  font-size:var(--olcek-govde-lg);color:var(--metin-2);line-height:1.65;max-width:44ch;
}
.secili-etiketler{margin-top:var(--bo-4)}
.secili-baglar{margin-top:var(--bo-5);display:flex;flex-wrap:wrap;gap:12px 28px}
.secili-canli{color:var(--metin-2);font-weight:600}
.secili-cihaz{width:min(100%,330px);margin-inline:auto}
.secili-cihaz--laptop{width:min(100%,640px)}
/* ENO ana sayfada IKI telefon (musteri + panel) */
.secili-proje--eno{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.eno-sahne--secili{max-width:640px;gap:clamp(16px,2.5vw,40px)}
.eno-sahne--secili .cihaz-telefon{max-width:290px}
.yonerge--secili{margin-top:var(--bo-4);font-size:13px}
.secili-proje .sekmeler{margin-bottom:var(--bo-4);max-width:420px;margin-inline:auto}
.secili-tumu{margin-top:clamp(48px,6vw,80px);display:flex;justify-content:center}

/* =============================================================
   YAKLASIM — 5 adim, koyu KOMPAKT band (ana sayfada dev acik blok
   yerine; "koyu -> aniden dev beyaz dikdortgen" gecisi yapilmaz)
============================================================= */
.yaklasim{
  background:var(--renk-gece-950);
  border-block:1px solid rgba(251,247,241,.08);
  padding-block:clamp(48px,6vw,84px);
}
.adimlar{
  margin-top:clamp(28px,3.5vw,48px);
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:var(--bo-5);
}
.adim{border-top:1px solid var(--cizgi-guclu)}
/* kaydirinca sirayla ve asagidan gelir (boyut/hareket hissi) */
.js .adim{transition-delay:calc(var(--g,0) * .12s);transform:translateY(30px)}
.adim-ic{
  padding:16px 14px 18px;margin:0 -14px;border-radius:var(--yuvarlak);
  transition:transform .55s var(--yumusak),background .55s var(--yumusak),box-shadow .55s var(--yumusak);
}
/* fare/parmak yaklasinca kart hafifce kalkar — glow yok */
.adim-ic:hover{
  transform:translateY(-6px);
  background:rgba(251,247,241,.035);
  box-shadow:0 22px 44px -28px rgba(1,3,9,.9);
}
.adim-ic:hover .adim-no{color:var(--renk-vurgu-500)}
.adim-no{font-size:10.5px;font-weight:700;letter-spacing:.14em;color:var(--vurgu-yazi);transition:color .4s}
.adim-ad{font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--metin);margin-top:6px}
.adim-m{font-size:13.5px;color:var(--metin-2);line-height:1.55;margin-top:4px}

/* =============================================================
   CANLI KANIT — gercek adresler + telefona eklenebilir sahnesi
============================================================= */
/* gecis tasarlanmis hissettirsin: 900'den 950'ye yumusak akis */
.canli{background:linear-gradient(180deg,var(--renk-gece-900) 0%,var(--renk-gece-950) 85%)}
.canli-ic{max-width:900px}          /* yalniz liste (telefon sahnesi .cepte'ye tasindi) */
.canli-liste{margin-top:clamp(28px,3.5vw,44px)}
.canli-satir{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;
  padding:13px 0;border-top:1px solid var(--cizgi);
}
.canli-nokta{
  width:6px;height:6px;border-radius:50%;flex:none;align-self:center;
  background:var(--vurgu);box-shadow:0 0 8px rgba(253,158,17,.55);
}
.canli-ad{font-size:15px;font-weight:700;color:var(--metin);flex:none}
.canli-not{font-size:12.5px;color:var(--metin-2);margin-right:auto}
.canli-alan{
  display:inline-flex;align-items:center;gap:8px;min-height:32px;
  font-size:13px;font-weight:600;color:var(--renk-tas-400);
  transition:color var(--sure-kisa);
}
.canli-alan .ok-sag{width:13px;height:9px;transition:transform var(--sure-kisa)}
.canli-alan:hover{color:var(--vurgu-yazi)}
.canli-alan:hover .ok-sag{transform:translateX(3px)}

.canli-cep{display:flex;flex-direction:column;gap:var(--bo-5)}
.cepte-baslik{font-size:clamp(19px,1.8vw,24px);font-weight:700;letter-spacing:-.01em;color:var(--metin)}
.cepte-alt{margin-top:8px;font-size:14px;color:var(--metin-2);line-height:1.65}
.cepte-not{
  margin-top:var(--bo-3);font-size:12.5px;font-weight:600;color:var(--vurgu-yazi);
  display:inline-flex;align-items:center;gap:9px;
}
.cepte-not::before{content:'';width:22px;height:1px;background:currentColor;opacity:.6}
/* TELEFONA EKLENEBILIR — bagimsiz, vurgulu bolum. Arka plan Halid'in
   bulutlu gorseli (lacivert perde ile: metin okunur, sagda gorsel acilir);
   telefonun ana ekraninda Halid'in dikey lacivert-altin duvar kagidi. */
.cepte{
  position:relative;overflow:hidden;
  border-block:1px solid rgba(251,247,241,.08);
  background:
    linear-gradient(90deg, rgba(2,10,24,.96) 0%, rgba(2,10,24,.84) 38%, rgba(2,10,24,.38) 100%),
    var(--cepte-arka) center/cover no-repeat;
  padding-block:clamp(56px,7vw,96px);
}
.cepte-ic{
  display:grid;grid-template-columns:minmax(0,7fr) minmax(260px,300px);
  gap:clamp(32px,5vw,96px);align-items:center;
}
.cepte .bolum-h2{max-width:20ch}
.cepte-ekran{width:100%;max-width:300px;margin-inline:auto}
.cepte-telefon{aspect-ratio:390/700}
.cepte-govde{
  background:
    linear-gradient(180deg, rgba(2,10,24,.2) 0%, rgba(2,10,24,.04) 35%, rgba(2,10,24,.32) 100%),
    var(--duvar) center top/cover no-repeat;
  padding:54px 20px 0;
}
.cepte-ada{
  position:absolute;top:13px;left:50%;transform:translateX(-50%);
  width:31%;height:22px;border-radius:999px;background:#03070f;z-index:2;
}
.cepte-saat{
  position:absolute;top:19px;left:26px;z-index:2;
  font-size:12px;font-weight:700;color:rgba(251,247,241,.9);
}
.cepte-izgara{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:20px 10px;justify-items:center;
  padding-top:14px;
}
.cepte-ikon{display:flex;flex-direction:column;align-items:center;gap:7px}
.cepte-ikon img{
  width:54px;height:54px;border-radius:13px;
  box-shadow:0 8px 20px rgba(0,0,0,.45), 0 1px 0 rgba(251,247,241,.08) inset;
}
.cepte-ikon i{
  font-style:normal;font-size:10px;font-weight:600;color:rgba(251,247,241,.92);
  white-space:nowrap;max-width:80px;overflow:hidden;text-overflow:ellipsis;
  text-shadow:0 1px 3px rgba(0,0,0,.5);
}
.cepte-cizgi{
  position:absolute;left:50%;bottom:10px;transform:translateX(-50%);
  width:34%;height:4px;border-radius:999px;background:rgba(251,247,241,.34);
}

/* =============================================================
   ENO — flagship vaka (iki telefon yan yana)
============================================================= */
.eno-sahne{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(24px,4vw,64px);
  align-items:start;justify-items:center;
  max-width:800px;margin-inline:auto;
}
.eno-sahne .cihaz-telefon{max-width:330px}

/* =============================================================
   WAFFNUTS + EFENDIOGLU
============================================================= */
.waff-ic{
  display:grid;grid-template-columns:minmax(0,6fr) minmax(300px,370px);
  gap:clamp(32px,5vw,80px);align-items:center;
}
.waff-telefon{max-width:340px;margin-inline:auto}

.efe-panel{
  margin-top:clamp(40px,5vw,64px);
  background:var(--zemin);color:var(--metin);
  border-radius:calc(var(--yuvarlak-lg) + 10px);
  padding:clamp(24px,3.5vw,52px);
}
.efe-ic{
  display:grid;grid-template-columns:minmax(280px,330px) minmax(0,1fr);
  gap:clamp(28px,4vw,64px);align-items:center;
}
.efe-telefon{max-width:330px;margin-inline:auto}
.bolum-h2--kucuk{font-size:clamp(22px,2.4vw,32px)}
.efe-omurga{margin:var(--bo-5) 0 0}
.efe-omurga .om-blok{padding-block:10px;border-top:1px solid var(--cizgi)}
.efe-omurga dt{
  display:flex;align-items:baseline;gap:10px;
  font-size:13px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--metin);
}
.efe-omurga dt b{font-size:10.5px;color:var(--vurgu-yazi);letter-spacing:.08em}
.efe-omurga dd{margin:2px 0 0 26px;font-size:13.5px;color:var(--metin-2);line-height:1.55}

/* =============================================================
   KURUMSAL — MMT laptop + VYRON telefon/panel gecisi
============================================================= */
.kurumsal .ustbaslik{margin-bottom:clamp(24px,3vw,40px)}
.mmt-sahne{margin-bottom:clamp(48px,6vw,84px)}
.mmt-bas{max-width:72ch;margin-bottom:var(--bo-5)}
.mmt-cihaz{max-width:1000px}
.mmt-alt-satir{
  display:flex;align-items:baseline;justify-content:space-between;
  flex-wrap:wrap;gap:var(--bo-4);margin-top:var(--bo-4);max-width:1000px;
}
.vyron-ic{
  display:grid;grid-template-columns:minmax(300px,370px) minmax(0,6fr);
  gap:clamp(32px,5vw,80px);align-items:center;
}
.vyron-ic--alt{
  border-top:1px solid var(--cizgi);
  padding-top:clamp(40px,5vw,64px);
}
.vyron-telefon{max-width:340px;margin-inline:auto}
.cihaz-swap{display:flex;gap:8px;margin-top:var(--bo-3)}
.swap-btn{
  flex:1;min-height:44px;border-radius:999px;
  border:1px solid var(--cizgi-etkilesim);
  font-size:13px;font-weight:700;color:var(--metin-2);
  transition:background var(--sure-kisa),color var(--sure-kisa),border-color var(--sure-kisa);
}
.swap-btn.is-sel{background:var(--metin);color:var(--zemin);border-color:var(--metin)}

/* =============================================================
   DAVETIYE + DIGER PROJELER
============================================================= */
.deneyim{background:var(--renk-gece-950)}
.davetiye-sahne{
  display:grid;grid-template-columns:repeat(2,minmax(270px,330px));
  justify-content:center;gap:clamp(28px,5vw,80px);
}
.davetiye-telefon .cihaz-cumle{text-align:center;margin-inline:auto}
.demo-not--orta{text-align:center;margin-top:var(--bo-5);margin-inline:auto}

.diger .ustbaslik{margin-bottom:clamp(24px,3vw,40px)}
.diger-izgara{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(24px,3vw,44px);align-items:start;
}
.diger-telefon{max-width:300px}
.diger-stage .stage-alt{max-width:640px}

/* =============================================================
   /projeler VITRIN IZGARASI — farkli boyutlarda kontrollu grid.
   Genis ogeler tam satir (ENO cift telefon, MMT laptop), digerleri
   yarim. Telefonlar PhoneMockup, masaustu siteler LaptopMockup.
============================================================= */
.vitrin{padding-top:0}          /* giris bolumu boslugu zaten veriyor */
.vitrin-izgara{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(48px,6vw,88px) clamp(28px,3.5vw,52px);
}
.vitrin-oge{min-width:0}
.vitrin-oge--genis{grid-column:1 / -1}
.vitrin-oge .cihaz-telefon{max-width:300px;margin-inline:auto}
.vitrin-oge--genis .cihaz-laptop{max-width:1000px;margin-inline:auto}
.vitrin-oge .stage-alt{max-width:640px;margin-inline:auto;width:100%}
.vitrin-oge .kanitlar--kucuk{justify-content:center}
.vitrin-oge--genis .stage-alt,.vitrin-oge--genis .kanitlar--kucuk{max-width:1000px}
.vitrin-oge--genis .kanitlar--kucuk{justify-content:flex-start}
.vitrin-bas{display:flex;align-items:baseline;justify-content:space-between;gap:var(--bo-4);flex-wrap:wrap;max-width:1000px;margin-inline:auto;margin-bottom:var(--bo-5)}
.vitrin-oge .eno-sahne{margin-top:var(--bo-4)}
.vitrin-oge .yonerge{margin-bottom:var(--bo-3)}
.yonerge + .sekmeler{margin-top:var(--bo-4)}
.vitrin-oge .cihaz-swap{max-width:300px;margin-inline:auto}

/* =============================================================
   /projeler + /bayoglu sayfa girisleri
============================================================= */
.galeri-giris,.karakter-giris{padding-top:calc(var(--baslik-y) + clamp(48px,7vw,84px))}
.galeri-bas{max-width:70ch}
.karakter-p{max-width:64ch}
.karakter-p + .karakter-p{margin-top:var(--bo-4)}

.dizin{
  margin-top:clamp(28px,4vw,44px);padding-top:var(--bo-4);
  border-top:1px solid var(--cizgi);
  display:flex;flex-wrap:wrap;gap:0 26px;
}
.dizin-bag{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:13.5px;font-weight:700;color:var(--metin-2);
  transition:color var(--sure-kisa);
}
.dizin-bag:hover{color:var(--vurgu-yazi)}

/* /bayoglu — uretim alanlari */
.alan-izgara{
  margin-top:clamp(28px,3.5vw,44px);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(32px,4vw,56px) clamp(28px,3.5vw,48px);
}
.alan-no{font-size:10.5px;color:var(--vurgu-yazi);letter-spacing:.08em;margin-right:10px}
.yaklasim--sayfa{padding-top:0}
.karakter-sonuc{
  margin-top:clamp(48px,6vw,80px);max-width:58ch;
  border-top:1px solid var(--cizgi-guclu);padding-top:var(--bo-5);
}
.karakter-sonuc-metin{
  font-size:var(--olcek-govde-lg);color:var(--metin-2);line-height:1.7;
  margin:10px 0 18px;
}

/* =============================================================
   DEGER BLOKLARI — "Bu projede" / "Isletmenize gore"
============================================================= */
.deger{
  margin-top:var(--bo-6);
  /* min(230px,100%): dar kapsayicida sutun 230px'e ZORLANMAZ, tek
     sutuna duser (mobilde olculmus tasma fix'i) */
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));
  gap:var(--bo-5) var(--bo-7);
  max-width:760px;
}
.deger-baslik{
  font-size:10.5px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  color:var(--metin);padding-bottom:9px;margin-bottom:4px;
  border-bottom:1px solid var(--cizgi-guclu);
}
.deger-baslik span{color:var(--vurgu-yazi);letter-spacing:.1em}
.deger-blok--ops .deger-baslik{color:var(--metin-2)}
.deger-liste{counter-reset:dl}
.deger-liste li{
  counter-increment:dl;
  display:flex;align-items:baseline;gap:12px;
  padding:7px 0;border-bottom:1px solid var(--cizgi);
  font-size:14px;font-weight:600;color:var(--metin);
}
.deger-liste li::before{
  content:counter(dl,decimal-leading-zero);
  font-size:10.5px;font-weight:700;color:var(--vurgu-yazi);
  letter-spacing:.08em;flex:none;
}
/* NET hiyerarsi: BU PROJEDE = 15px/700 guclu,
   ISLETMENIZE GORE = 13.5px/500 sakin */
.deger-blok:not(.deger-blok--ops) .deger-liste li{font-size:15px;font-weight:700;color:var(--metin)}
.deger-liste--ops li{font-size:13.5px;font-weight:500;color:var(--metin-2)}
.deger-liste--ops li::before{color:var(--metin-2);opacity:.7}

/* =============================================================
   KAPANIS + SON CTA + FOOTER
============================================================= */
.kapanis{background:var(--renk-gece-950);overflow:hidden;position:relative}
.kapanis-ic{display:flex;flex-direction:column;align-items:center;text-align:center}
.kapanis-capa{display:block;height:0}
.kapanis-baslik{margin-top:clamp(40px,5vw,72px)}
.kapanis .bayoglu-logo{width:min(540px,78vw)}
.kapanis .bayoglu-metin{margin-top:clamp(22px,3vw,36px)}

.bayoglu-isik{
  position:absolute;inset:auto 0 -40% 0;height:90%;pointer-events:none;
  background:radial-gradient(ellipse 55% 60% at 50% 100%, rgba(253,158,17,.10), transparent 65%);
}
.bayoglu-logo{width:min(620px,82vw);height:auto}
.bayoglu-metin{
  font-size:var(--olcek-govde-lg);color:var(--renk-tas-400);line-height:1.75;
  max-width:56ch;
}

.soncta{
  background:linear-gradient(182deg,var(--renk-gece-900) 0%,var(--renk-gece-950) 75%);
  border-top:1px solid var(--cizgi);
  padding-block:clamp(84px,11vw,150px);
  overflow:hidden;
}
.soncta--kisa{padding-block:clamp(64px,8vw,100px)}
.soncta-ic{text-align:center;max-width:760px}
.soncta-baslik{
  font-size:clamp(30px,4.6vw,56px);font-weight:800;letter-spacing:-.025em;line-height:1.06;
  color:var(--renk-ivory-100);margin-bottom:var(--bo-5);
}
.soncta-metin{
  font-size:var(--olcek-govde-lg);color:var(--renk-tas-400);line-height:1.72;
  max-width:52ch;margin-inline:auto;margin-bottom:var(--bo-7);
}
.soncta-dugmeler{display:flex;justify-content:center;flex-wrap:wrap;gap:var(--bo-3)}

.alt{background:var(--renk-gece-950);border-top:1px solid rgba(251,247,241,.08);padding-block:clamp(40px,5vw,64px) clamp(22px,3vw,32px)}
.alt-ust{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--bo-6)}
.alt-marka img{height:66px;width:auto}
.alt-sag{display:flex;flex-direction:column;align-items:flex-end;gap:var(--bo-3)}
.alt-baglar{display:flex;flex-wrap:wrap;gap:var(--bo-5)}
.alt-bag{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:14px;font-weight:600;color:var(--renk-tas-400);
  transition:color var(--sure-kisa);
}
.alt-bag:hover{color:var(--renk-ivory-100)}
.alt-iletisim{display:flex;flex-wrap:wrap;gap:var(--bo-5)}
.alt-bag--iletisim{color:var(--renk-tas-600)}
.alt-taban{
  margin-top:clamp(26px,3.5vw,40px);padding-top:var(--bo-4);
  border-top:1px solid rgba(251,247,241,.08);
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--bo-3);
}
.alt-telif{font-size:12.5px;color:var(--renk-tas-400)}
.alt-yasal{display:flex;gap:var(--bo-4)}

/* =============================================================
   ORTAM DOKUSU — sabit, cok hafif film taneciği (animasyon yok)
============================================================= */
body::after{
  content:'';position:fixed;inset:0;z-index:260;pointer-events:none;
  opacity:.022;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:220px 220px;
}

/* kapanis isigi nefes alir: bolum basina TEK fisilti-seviye canli oge */
.bayoglu-isik{animation:isikNefes 9s ease-in-out -3s infinite alternate}
@keyframes isikNefes{from{opacity:.72}to{opacity:1}}

/* sekme gorunmuyorken tum animasyonlar durur (pil/performans) */
body.duraklat *,body.duraklat *::before,body.duraklat *::after{
  animation-play-state:paused!important;
}

/* =============================================================
   HAREKET — js yoksa her sey gorunur kalir
============================================================= */
.js .ac-1,.js .ac-2,.js .ac-3{
  opacity:0;transform:translateY(14px);
  transition:opacity var(--sure) var(--yumusak),transform var(--sure) var(--yumusak);
}
.js .hazir .ac-1,.js .hazir .ac-2,.js .hazir .ac-3{opacity:1;transform:none}
.js .hazir .ac-1{transition-delay:.03s}
.js .hazir .ac-2{transition-delay:.12s}
.js .hazir .ac-3{transition-delay:.2s}

.js [data-ac]{
  opacity:0;transform:translateY(18px);
  transition:opacity .8s var(--yumusak),transform .8s var(--yumusak);
}
.js [data-ac].gorunur{opacity:1;transform:none}

/* giris koreografisi: liste ogeleri 60-90ms arayla sirayla gelir */
.js .kanitlar li,.js .deger-liste li,.js .canli-satir{
  opacity:0;transform:translateY(10px);
  transition:opacity .55s var(--yumusak),transform .55s var(--yumusak);
}
.js .kanitlar.gorunur li,.js .gorunur .deger-liste li,.js .canli-liste.gorunur .canli-satir{opacity:1;transform:none}
.js .kanitlar li:nth-child(2),.js .deger-liste li:nth-child(2),.js .canli-satir:nth-child(2){transition-delay:.07s}
.js .kanitlar li:nth-child(3),.js .deger-liste li:nth-child(3),.js .canli-satir:nth-child(3){transition-delay:.14s}
.js .kanitlar li:nth-child(4),.js .deger-liste li:nth-child(4),.js .canli-satir:nth-child(4){transition-delay:.21s}
.js .kanitlar li:nth-child(5),.js .deger-liste li:nth-child(5),.js .canli-satir:nth-child(5){transition-delay:.28s}
.js .kanitlar li:nth-child(6),.js .deger-liste li:nth-child(6),.js .canli-satir:nth-child(6){transition-delay:.35s}
.js .canli-satir:nth-child(7){transition-delay:.42s}

/* =============================================================
   MOBIL — 390 px gercek tasarim
============================================================= */
@media (max-width:1080px){
  .menu{display:none}
  .baslik-cta{display:none}
  .menu-dugme{display:flex}
}

@media (max-width:960px){
  /* HERO: tek kolon; cark metnin altina iner. Dokunmatikte surukleme
     kapali (app.js) — kart genisligi ekrana gore olculur, tasma olmaz. */
  /* MOBIL HERO ARKA PLANI: Halid'in dikey lacivert-altin gorseli
     (ustte metin icin koyu perde, altta carkin oturdugu altin kivrimlar) */
  .hero{
    background:
      linear-gradient(180deg, rgba(2,10,24,.62) 0%, rgba(3,20,52,.38) 40%, rgba(2,10,24,.55) 78%, rgba(2,10,24,.96) 100%),
      url('/varlik/hero-mobil.jpg') center top/cover no-repeat;
  }
  .hero-isik{display:none}
  /* butonlardan sonra nefes; cark daha az perspektifli (daha onden),
     ustunde hafif perde ile hero'ya dogal baglanir */
  .hero-ic{grid-template-columns:1fr;gap:56px}
  .orbit-alan{height:300px;cursor:default;perspective:1500px;perspective-origin:50% 50%}
  /* (ust perde 21 Agu: Halid kaldirdi — arka planda tabaka gibi duruyordu) */
  .orbit-ipucu{display:none}
  .panel-plaka{padding:14px 18px 14px 16px}
  .panel-ad{font-size:17px}
  .panel-m{font-size:12px;margin-left:22px;margin-top:6px}

  /* CIHAZLAR: mobilde TELEFONLAR KUCULUR — proje TEK BAKISTA gorunur
     (Halid'in hedefi: 290-310px bandi). TUM telefonlar ayni olcu. */
  :root{--tel-r:32px;--tel-pad:6px}
  /* Halid (21 Agu, son tur): "telefonlar mobilde devasa" -> ~250px,
     cevresinde rahat hareket alani kalir */
  .cihaz-telefon{max-width:min(64vw,250px);margin-inline:auto}
  .eno-sahne .cihaz-telefon,.waff-telefon,.efe-telefon,.vyron-telefon,
  .secili-cihaz,.diger-telefon{max-width:min(64vw,250px)}
  .cepte-ekran{max-width:min(58vw,230px)}
  /* LAPTOP mobilde de YATAY kalir; yalnizca butun olarak kuculur.
     Genislik kabin genisligi (~%90 ekran), yukseklik orandan gelir. */
  .secili-cihaz--laptop{width:100%}

  .tanim-metin{max-width:none}
  /* NELER YAPIYORUZ mobilde kompakt (Halid: yazi kalabaligi) */
  .tanim-satir{padding:9px 0;gap:4px 10px}
  .tanim-ad{font-size:14.5px}
  .tanim-m{font-size:12.5px;line-height:1.45}
  .tanim-satirlar{margin-top:var(--bo-5)}
  .tanim-deste{max-width:330px;--ac:3.6deg;--adim:8%}
  .tanim-kart{width:42%;margin-left:-21%}
  .tanim-kart.is-on{--kalk:-18px}
  .js .tanim-satir{transition-delay:0s!important}

  /* ENO: sekmeli tek cihaz — iki cihaz alt alta YIGILMAZ */
  .sekmeler{display:flex;max-width:420px}
  .eno-sahne{grid-template-columns:1fr;gap:var(--bo-6)}
  .eno-sahne [data-sekme-icerik]{display:none}
  .eno-sahne [data-sekme-icerik].is-acik{display:block}

  .adimlar{grid-template-columns:1fr;gap:var(--bo-4)}
  .js .adim{transition-delay:calc(var(--g,0) * .06s)}
  .adim-ic{margin:0;padding:14px 4px 16px}
  /* bulutlu arka plan mobilde ustten alta perde ile */
  .cepte{
    background:
      linear-gradient(180deg, rgba(2,10,24,.94) 0%, rgba(2,10,24,.6) 55%, rgba(2,10,24,.9) 100%),
      var(--cepte-arka-mobil) center/cover no-repeat;
  }

  .davetiye-sahne{grid-template-columns:minmax(0,300px)}
  .diger-izgara{grid-template-columns:1fr;gap:clamp(40px,8vw,64px)}
  .alan-izgara{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:640px){
  :root{--baslik-y:64px;--tel-r:28px;--tel-pad:5px}
  .marka img{height:44px}

  .hero{min-height:auto;padding-top:calc(var(--baslik-y) + 40px);padding-bottom:28px}
  .hero-baslik{line-height:1.12;margin-bottom:var(--bo-4)}
  .hero-p{font-size:15.5px;margin-bottom:var(--bo-5)}
  /* sablon butonu hissi yok: tek guclu CTA + sade metin bagi */
  .hero-dugmeler{flex-direction:row;align-items:center;flex-wrap:wrap;gap:14px 22px}
  .hero-dugmeler .dugme{width:auto}
  .hero-dugmeler .dugme-hayalet{
    min-height:44px;padding:0;border:0;border-radius:0;
    border-bottom:1px solid var(--cizgi-guclu);color:var(--renk-tas-400);
  }
  .hero-dugmeler .dugme-hayalet:hover{transform:none;color:var(--renk-ivory-100);border-color:var(--renk-vurgu-500)}
  .orbit-alan{height:290px}
  .panel-ad{font-size:16.5px}

  .secili-baglar{flex-direction:column;align-items:flex-start;gap:12px}
  .secili-tumu .dugme{width:100%}

  .stage-alt{flex-direction:column;gap:8px;align-items:flex-start}
  .alan-izgara{grid-template-columns:1fr}

  .alt-ust{flex-direction:column;align-items:flex-start}
  .alt-sag{align-items:flex-start}
  .alt-taban{flex-direction:column;align-items:flex-start}

  .soncta-dugmeler{flex-direction:column;align-items:stretch}
  .soncta-dugmeler .dugme{width:100%}
}

/* =============================================================
   EKRAN GORUNTUSU MODU (?ss=1) — deterministik cikti
============================================================= */
.ss .ac-1,.ss .ac-2,.ss .ac-3,.ss [data-ac],
.ss .kanitlar li,.ss .deger-liste li,.ss .canli-satir{opacity:1!important;transform:none!important;transition:none!important}
.ss .hero{min-height:860px}
.ss .slayt-kare{animation:none;opacity:0}
.ss .slayt-kare:first-child{opacity:1;transform:none}

/* =============================================================
   ERISILEBILIRLIK
============================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    transition-delay:0ms !important;
  }
  .js .ac-1,.js .ac-2,.js .ac-3,.js [data-ac],
  .js .kanitlar li,.js .deger-liste li,.js .canli-satir{opacity:1;transform:none}
  .bayoglu-isik{animation:none}
  .slayt-kare{animation:none;opacity:0}
  .slayt-kare:first-child{opacity:1;transform:none}
}

/* dokunmatik cihazlarda kucuk hedefler buyur (yerlesim degismeden) */
@media (pointer:coarse){
  .demo-btn{min-height:46px}
  .metin-bag{min-height:44px;align-items:center}
}

/* =============================================================
   MOBIL YERLESIM KILIDI — DOSYANIN EN SONUNDA DURMALI
   -------------------------------------------------------------
   Ortadaki medya sorgularini ayni ozgullukteki masaustu kurallari
   ezebiliyor (olculmus hata). Tek sutuna dusen kapsayicilar burada
   minmax(0,1fr) ile yeniden bildirilir. minmax(0,1fr) sart: duz
   "1fr" icerigin min-content'inin altina INEMEZ.
   Yeni iki kolonlu bolum eklenirse bu listeye eklenmeli.
============================================================= */
@media (max-width:960px){
  .eno-sahne,
  .waff-ic,
  .efe-ic,
  .vyron-ic,
  .canli-ic,
  .cepte-ic,
  .secili-proje,
  .secili-proje--eno,
  .diger-izgara,
  .vitrin-izgara,
  .tanim-ic,
  .hero-ic{
    grid-template-columns:minmax(0,1fr);
  }
  .vitrin-oge--genis .kanitlar--kucuk{justify-content:center}
  /* mobil siralama: metin ustte, cihaz altta */
  .secili-proje--ters .secili-sahne{order:0}
  .vyron-telefon{order:2}
}