/* ==========================================================================
   Gym Strongers — Tasarım Sistemi
   Açık zemin · lacivert tipografi · altın #cdaf77 nadir vurgu
   ========================================================================== */

:root{
  --navy:#090529;
  --navy-2:#202559;
  --gold:#cdaf77;

  /* Buton ve üst şerit varsayılan olarak marka rengini İZLİYOR: aşağıdaki
     var() kullanım anında çözüldüğü için panelden --navy değişince bunlar
     da değişiyor. Panelden ayrıca renk verilirse markadan ayrılıyorlar. */
  --btn:var(--navy);
  --btn-2:var(--navy-2);
  --topbar:var(--navy);
  --topbar-fg:#ffffff;

  --bg:#ffffff;
  --bg-2:#f4f4f2;
  --fg:#090529;
  --fg-2:rgba(9,5,41,.64);
  --fg-3:rgba(9,5,41,.44);
  --line:rgba(9,5,41,.12);
  --line-2:rgba(9,5,41,.26);
  --surface:rgba(9,5,41,.04);

  --r-1:12px; --r-2:12px; --r-3:12px; --r-pill:999px;
  --ease:cubic-bezier(.16,1,.3,1);
  --dur:200ms;
  --maxw:1400px;
  --ust-h:80px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  font-family:'Jost',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  background:var(--bg);color:var(--fg);
  font-size:17px;line-height:1.62;font-weight:300;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.06;letter-spacing:-.025em;text-wrap:balance}
p{margin:0}
figure{margin:0}
ul{margin:0;padding:0;list-style:none}
.tabular{font-variant-numeric:tabular-nums}
::selection{background:var(--gold);color:var(--navy)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:var(--r-1)}
/* Popup kapanınca odak açan butona geri veriliyor (klavye kullanıcısı için
   şart). Ama popup içinde yazı yazıldığından tarayıcı son etkileşimi klavye
   sayıp butonda altın halka bırakıyordu; işaret odak ayrılana kadar duruyor. */
[data-odak-sessiz]:focus-visible{outline:none}
.gizli-erisim{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.kap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:28px}
@media(max-width:899px){ .kap{padding-inline:20px} }

/* ── Butonlar ─────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border:1px solid transparent;border-radius:var(--r-pill);
  padding:16px 34px;font-size:.97rem;font-weight:500;
  transition:transform var(--dur) var(--ease),background-color var(--dur) var(--ease),
             border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
@media(hover:hover){ .btn:hover{transform:translateY(-2px)} }
.btn:active{transform:translateY(0)}
.btn--beyaz{background:#fff;color:var(--navy);font-weight:600}
.btn--beyaz:hover{background:#efeef4}
.btn--lacivert{background:var(--btn);color:#fff;font-weight:600}
.btn--lacivert:hover{background:var(--btn-2)}
.btn--hat{border-color:var(--line-2);color:var(--fg)}
.btn--hat:hover{border-color:var(--fg);background:var(--surface)}
.btn--kucuk{padding:11px 22px;font-size:.86rem}

/* ==========================================================================
   HEADER — slider'ın içine gömülü başlar, kaydırınca beyaz sticky'ye döner
   ========================================================================== */
.ust{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:transparent;border-bottom:1px solid transparent;
  --u-fg:#ffffff;                 /* gömülü haldeki metin rengi */
  --u-fg-2:rgba(255,255,255,.82);
  --u-line:rgba(255,255,255,.28);
  --u-ters:var(--navy);           /* --u-fg zemin olduğunda üstüne binen renk */
  transition:background-color .35s var(--ease),border-color .35s var(--ease),
             box-shadow .35s var(--ease);
}
.ust.yapisik{
  background:#fff;border-bottom-color:var(--line);
  box-shadow:0 1px 30px rgba(9,5,41,.07);
  --u-fg:var(--navy);
  --u-fg-2:rgba(9,5,41,.64);
  --u-line:var(--line-2);
  --u-ters:#ffffff;
}
.ust-ic{display:flex;align-items:center;justify-content:space-between;gap:28px;
  height:var(--ust-h);transition:height .35s var(--ease)}
.ust.yapisik .ust-ic{height:58px}

/* logo — iki varyat üst üste, sticky'de çapraz geçiş */
.logo{position:relative;display:block;flex:none;line-height:0}
.logo img{height:26px;width:auto;transition:opacity .35s var(--ease),height .35s var(--ease)}
.ust.yapisik .logo img{height:19px}
.logo .logo--koyu{position:absolute;inset:0;opacity:0}
.ust.yapisik .logo .logo--acik{opacity:0}
.ust.yapisik .logo .logo--koyu{opacity:1}
@media(max-width:899px){ .logo img{height:21px} .ust.yapisik .logo img{height:17px} }
/* 375px'te 21px'lik logo 245px sürüyor — ekranın %65'i. Hamburger'e dayanıyor
   ve başlık gibi okunuyordu; marka işareti o kadar yer kaplamamalı. */
@media(max-width:560px){ .logo img{height:16px} .ust.yapisik .logo img{height:14px} }
/* Küçük telefonlarda (320-360px) 16px yine %58 sürüyor — oran her ölçüde
   yarım ekranın altında kalsın. */
@media(max-width:360px){ .logo img{height:14px} .ust.yapisik .logo img{height:13px} }

/* Menü başlıkları büyük harf — küçük punto + artırılmış harf aralığıyla dengeli */
.ana-menu{display:none;gap:30px;font-size:.82rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.09em}
.ana-menu > a,.menu-grup > a,.menu-grup__tetik{position:relative;display:block;padding-block:8px;
  color:var(--u-fg-2);transition:color var(--dur) var(--ease);
  /* Düğme, bağlantılarla aynı tipografiyi almalı — button font'u miras almaz */
  font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer}
.ana-menu > a:hover,.menu-grup > a:hover,.menu-grup__tetik:hover,
.ana-menu > a[aria-current],.menu-grup > a[aria-current],
.menu-grup__tetik[aria-current]{color:var(--u-fg)}
.ana-menu > a::after,.menu-grup > a::after,.menu-grup__tetik::after{content:"";position:absolute;left:0;right:0;bottom:2px;
  height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease)}
.ana-menu > a:hover::after,.menu-grup > a:hover::after,.menu-grup__tetik:hover::after,
.ana-menu a[aria-current]::after,.menu-grup__tetik[aria-current]::after{transform:scaleX(1)}
/* Çekmecedeki hizmet başlığı: bağlantı değil, altındaki listenin etiketi. */
.cekmece__baslik{display:block;color:var(--fg-2);cursor:default}
.ust-sag{display:flex;align-items:center;gap:14px}
.ust-cta{display:none;border:1px solid var(--u-line);color:var(--u-fg);
  padding:11px 24px;border-radius:var(--r-pill);font-size:.88rem;font-weight:500;
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease),
             border-color var(--dur) var(--ease),padding .35s var(--ease),font-size .35s var(--ease)}
.ust.yapisik .ust-cta{padding:9px 20px;font-size:.83rem}
.ust-cta:hover{background:var(--u-fg);color:var(--u-ters);border-color:var(--u-fg)}
/* ── Dil anahtarı ─────────────────────────────────────────────────────
   İki harf, arada ince ayraç. Renk kullanılmıyor: aktif dil ağırlıkla ve
   tam opaklıkla belli oluyor — palet kuralı gereği altın yalnızca nadir
   vurgu, dil anahtarı o kadar önemli değil. */
.dil-secim{display:none;align-items:center;gap:2px;font-size:.78rem;letter-spacing:.08em}
.dil-secim__oge{
  padding:6px 7px;color:var(--u-fg);opacity:.5;font-weight:500;
  transition:opacity var(--dur) var(--ease);
}
.dil-secim__oge:hover{opacity:.85}
.dil-secim__oge--aktif{opacity:1;font-weight:600}
.dil-secim__oge + .dil-secim__oge::before{
  content:"";display:inline-block;width:1px;height:10px;margin-right:9px;
  background:currentColor;opacity:.3;vertical-align:middle;
}
@media(min-width:1060px){ .ana-menu{display:flex} .ust-cta{display:inline-flex} .dil-secim{display:flex} }

/* Çekmecedeki hâli: menünün üstünde, her ölçüde görünür. */
/* Çekmecedeki dil şeridi. Seçici .cekmece ile başlıyor çünkü
   `.cekmece nav{display:grid}` daha özgül: şerit grid'e düşüp TR ile EN alt
   alta diziliyor, `.cekmece nav > a` da EN'e 1.15rem punto ve alt çizgi
   veriyordu — menü öğesi gibi duruyordu. */
.cekmece .dil-secim--cekmece{
  display:flex;align-items:center;gap:2px;
  padding:16px 28px 4px;font-size:.86rem;
}
.cekmece .dil-secim--cekmece .dil-secim__oge{
  display:inline-flex;align-items:center;
  padding:4px 8px;font-size:inherit;color:var(--navy);
  border-bottom:0;                      /* nav > a alt çizgisini iptal */
}

/* ── Kurumsal açılır menü — kompakt, tetiğin altında ──────────────────── */
.ana-menu .menu-grup--acilir{position:relative}   /* .menu-grup{static}'ı ez */
/* Açılır menü oku — SVG, tetikle aynı renkte ve açıkken 180° dönüyor */
.menu-grup__ok{display:inline-block;width:15px;height:15px;margin-left:6px;
  vertical-align:-3px;transition:transform .25s var(--ease)}
.menu-grup--acilir:hover .menu-grup__ok,
.menu-grup--acilir:focus-within .menu-grup__ok{transform:rotate(180deg)}
.acilir{position:absolute;top:100%;left:0;min-width:214px;margin-top:2px;padding:8px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-2);
  box-shadow:0 18px 44px rgba(9,5,41,.13);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .2s var(--ease),transform .22s var(--ease),visibility .2s;
  transition-delay:.2s;z-index:60}
/* Tetik ile panel arasındaki görünmez köprü — fare inerken menü kapanmasın */
.acilir::before{content:'';position:absolute;left:0;right:0;top:-12px;height:12px}
.menu-grup--acilir:hover .acilir,.menu-grup--acilir:focus-within .acilir{
  opacity:1;visibility:visible;transform:translateY(2px);transition-delay:0s}
/* Alt menü öğeleri normal yazımda — büyük harf yalnızca üst düzey başlıklarda */
.acilir a{display:block;padding:10px 14px;border-radius:8px;
  font-size:.94rem;font-weight:400;text-transform:none;letter-spacing:normal;
  color:var(--fg-2);white-space:nowrap}
.acilir a::after{content:none}
.acilir a:hover,.acilir a[aria-current]{background:var(--surface);color:var(--fg)}

/* ── Mega menü — panel DAİMA solid, şeffaf/glass değil ────────────────── */
.ust-ic{position:relative}
.menu-grup{position:static}
.mega{position:absolute;top:100%;left:0;right:0;
  background:#fff;border-radius:var(--r-3);
  box-shadow:0 34px 80px rgba(9,5,41,.18);overflow:hidden;
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .22s var(--ease),transform .24s var(--ease),visibility .22s;
  transition-delay:.25s}                       /* hover-intent: geç kapan */
/* Link ile panel arasındaki boşluğu dolduran görünmez köprü — fare inerken
   .menu-grup:hover düşüp menüyü kapatmasın */
.mega::before{content:'';position:absolute;left:0;right:0;top:-18px;height:18px}
/* Üçüncü seçici JS içindir: Safari düğmeye tıklamada odak VERMİYOR, o
   yüzden :focus-within tek başına yetmiyor — dokunmatikte ve Safari'de
   menü hiç açılmıyordu. */
.menu-grup:hover .mega,.menu-grup:focus-within .mega,.menu-grup--acik .mega{
  opacity:1;visibility:visible;transform:translateY(6px);transition-delay:0s}

/* Panelin sağ yarısını görsel baştan sona kaplıyor: pay yalnızca sol kolonda
   duruyor, kart panelin üst/alt/sağ kenarına sıfır oturuyor. Köşeleri .mega'nın
   overflow:hidden'ı kırpıyor, kartın kendi yarıçapı yok. */
.mega__ic{display:grid;grid-template-columns:1.72fr 1fr;align-items:stretch}
.mega__sol{display:flex;flex-direction:column;padding:24px 24px 22px 26px}

/* Kolon başlığı — mega menüde işlevsel etiket olarak serbest */
.mega__etiket{display:block;
  font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--fg-3)}

.mega__liste{margin-top:14px;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px}
/* Büyük harf yalnızca üst düzey menü başlıklarında — panel içeriği normal
   yazımda ve sade kalıyor (.ana-menu'den miras alınan dönüşümü sıfırlıyor). */
.mega,.acilir{text-transform:none;letter-spacing:normal;font-weight:400}
.mega__oge{display:flex;gap:15px;padding:13px;border-radius:var(--r-2);
  transition:background-color var(--dur) var(--ease)}
.mega__oge:hover,.mega__oge:focus-visible{background:var(--surface)}
.mega__ikon{flex:none;display:block;width:31px;height:31px;color:var(--gold)}
.mega__ikon svg{width:100%;height:100%;display:block}
.mega__oge b{display:block;font-size:.97rem;font-weight:500;letter-spacing:-.01em}
.mega__oge span{display:block;margin-top:3px;font-size:.85rem;line-height:1.42;color:var(--fg-2)}

/* Tek dönüşüm bağlantısı; sol kenarı "HİZMETLER" etiketiyle aynı hatta,
   liste kısalsa da alta yapışıyor */
.mega__alt{display:flex;margin-top:auto;padding:18px 0 0}

.mega__kart{position:relative;display:block;min-height:190px;
  overflow:hidden;background:var(--navy);isolation:isolate}
/* Mutlak konum: aksi hâlde görselin kendi oranı kartın yüksekliğini belirliyor
   ve sağ kolon soldaki metinden uzun kalıyordu. */
.mega__kart img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .35s var(--ease),transform .7s var(--ease)}
.mega__kart img.etkin{opacity:1}
.mega__kart:hover img{transform:scale(1.05)}
.mega__kart span{position:absolute;inset:auto 0 0 0;z-index:2;padding:34px 20px 16px;
  color:#fff;font-size:.92rem;
  background:linear-gradient(180deg,rgba(9,5,41,0),rgba(9,5,41,.88))}

@media(max-width:1200px){ .mega__oge span{display:none} }

/* mobil */
.menu-ac{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
  width:44px;height:44px;border-radius:var(--r-1);color:var(--u-fg)}
.menu-ac span{display:block;width:21px;height:1.6px;background:currentColor;border-radius:2px}
@media(min-width:1060px){ .menu-ac{display:none} }

.cekmece{position:fixed;inset:0 auto 0 0;width:min(100%,400px);z-index:80;background:#fff;
  transform:translateX(-100%);transition:transform .4s var(--ease);
  display:flex;flex-direction:column;padding:18px 24px 32px;overflow-y:auto}
.cekmece[data-acik="1"]{transform:translateX(0)}
.cekmece-ust{display:flex;align-items:center;justify-content:space-between;
  height:68px;margin-bottom:20px}
.cekmece-ust img{height:22px}
.cekmece nav{display:grid}
.cekmece nav > a{padding:15px 0;font-size:1.15rem;border-bottom:1px solid var(--line)}
.cekmece .alt{display:grid;padding-block:6px}
.cekmece .alt a{padding:10px 0 10px 18px;font-size:.96rem;color:var(--fg-2)}
.cekmece .btn{margin-top:26px}
.perde{position:fixed;inset:0;z-index:75;background:rgba(9,5,41,.45);
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s}
.perde[data-acik="1"]{opacity:1;visibility:visible}

/* ==========================================================================
   HERO — tek yatay video, sabit içerik
   ========================================================================== */
.hero{position:relative;height:100svh;min-height:580px;max-height:960px;
  overflow:hidden;background:var(--navy);isolation:isolate}

.hero__medya{position:absolute;inset:0;z-index:0}
.hero__medya video{width:100%;height:100%;object-fit:cover}
.hero__perde{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(9,5,41,.56) 0%,rgba(9,5,41,.20) 32%,
    rgba(9,5,41,.52) 72%,rgba(9,5,41,.76) 100%)}

.hero__ic{position:relative;z-index:2;height:100%;display:flex;align-items:flex-end;
  padding-top:var(--ust-h);padding-bottom:104px}
.hero__kutu{max-width:940px;color:#fff}
.hero h1{
  font-size:clamp(2.4rem,5.4vw,4.8rem);
  font-weight:400;letter-spacing:-.02em;line-height:1.08;color:#fff;
  max-width:none}
.hero__kutu p{margin-top:24px;font-size:clamp(1.02rem,1.35vw,1.22rem);font-weight:300;
  color:rgba(255,255,255,.86);max-width:760px}
.hero__kutu .btn{margin-top:36px}
@media(max-width:899px){
  .hero{height:82svh;min-height:520px}
  .hero__ic{padding-bottom:110px}   /* mobil sticky bar 74px — üstünde nefes payı kalsın */
  .hero__kutu p{margin-top:18px}
  .hero__kutu .btn{margin-top:28px}
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
/* Zemin ve metin token'ları .koyu sınıfından geliyor (site/layout/footer.php).
   Buradaki kurallar yalnızca footer'a özel açık-zemin varsayımlarını çevirir. */
footer.alt{border-top:1px solid var(--line);padding-block:72px 26px}
.alt-ust{display:grid;gap:42px;padding-bottom:52px}
@media(min-width:900px){ .alt-ust{grid-template-columns:1.5fr 1fr 1fr 1.25fr;gap:52px} }
.alt-marka img{height:26px;margin-bottom:20px}
.alt-marka p{color:var(--fg-2);font-size:.97rem;max-width:34ch}
.alt-sosyal{display:flex;gap:10px;margin-top:24px}
.alt-sosyal a{display:grid;place-items:center;width:42px;height:42px;border-radius:var(--r-pill);
  border:1px solid var(--line);color:var(--fg-2);
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease),
             background-color var(--dur) var(--ease)}
.alt-sosyal a:hover{border-color:#fff;color:#fff;background:var(--surface)}
.alt-sosyal svg{width:18px;height:18px}
footer.alt h4{font-size:.79rem;font-weight:500;letter-spacing:.11em;text-transform:uppercase;
  color:var(--fg-3);margin-bottom:18px}
.alt-lnk{display:grid;gap:11px}
.alt-lnk a{color:var(--fg-2);font-size:.96rem;transition:color var(--dur) var(--ease)}
.alt-lnk a:hover{color:var(--fg)}
.alt-saat{display:grid;gap:9px}
.alt-saat div{display:flex;justify-content:space-between;gap:16px;font-size:.94rem;color:var(--fg-2)}
.alt-saat b{font-weight:400;color:var(--fg)}
.alt-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;
  padding-top:26px;border-top:1px solid var(--line);color:var(--fg-3);font-size:.85rem}
.alt-bar nav{display:flex;flex-wrap:wrap;gap:20px;align-items:center}
.sd-imza{display:inline-flex;align-items:center;padding:10px 20px;border-radius:var(--r-pill);
  border:1px solid var(--line);
  transition:border-color var(--dur) var(--ease),opacity var(--dur) var(--ease);opacity:.6}
.sd-imza:hover{border-color:var(--line-2);opacity:1}
.sd-imza img{height:22px;width:auto}   /* logo zaten beyaz, invert gerekmiyor */

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .slayt__kutu{opacity:1;transform:none}
}

/* ==========================================================================
   BÖLÜM SİSTEMİ
   Koyu bölümler token'ları devrederek renk bağlamını çeviriyor —
   içerideki hiçbir bileşen kendi rengini bilmek zorunda değil.
   ========================================================================== */
.bolum{padding-block:112px}
@media(max-width:899px){ .bolum{padding-block:76px} }
/* Telefonun taşma payı artık .uygulama-bant'ın kendi üst boşluğunda —
   önceki bölüme ayrıca pay eklenmiyor, yoksa arada devasa boşluk kalıyor. */
.bolum--gri{background:var(--bg-2)}

/* Panelden renk verilebilen bantlar: --bant-* tanımlıysa o kazanıyor,
   tanımsızsa marka gradyanı olduğu gibi kalıyor. */
.koyu{
  background:linear-gradient(158deg,var(--bant-zemin-1,var(--navy)) 0%,var(--bant-zemin-2,var(--navy-2)) 100%);
  color:#fff;
  --fg:#ffffff;
  --fg-2:rgba(255,255,255,.72);
  --fg-3:rgba(255,255,255,.48);
  --line:rgba(255,255,255,.14);
  --line-2:rgba(255,255,255,.30);
  --surface:rgba(255,255,255,.05);
}

/* Tek başlık sistemi — sayfadaki her H2 buradan çıkar */
.bas h2{font-size:clamp(2rem,3.9vw,3.35rem);font-weight:400;letter-spacing:-.028em;color:var(--fg)}
.bas p{margin-top:16px;font-size:1.04rem;color:var(--fg-2);max-width:60ch}
.bas-satir{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:22px}
.bas-satir__yan{max-width:46ch}
.bas-satir__yan p{margin-top:0;font-size:.99rem}
.bas-satir__yan .baglanti{margin-top:18px}

.baglanti{display:inline-flex;align-items:center;gap:9px;flex:none;
  font-size:.95rem;color:var(--fg-2);border-bottom:1px solid var(--line-2);padding-bottom:6px;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.baglanti em{font-style:normal;color:var(--gold);transition:transform var(--dur) var(--ease)}
.baglanti:hover{color:var(--fg);border-color:var(--gold)}
.baglanti:hover em{transform:translateX(4px)}

.btn--hayalet{border-color:rgba(255,255,255,.42);color:#fff}
.btn--hayalet:hover{background:rgba(255,255,255,.12);border-color:#fff}

/* Tek reveal sözleşmesi — JS yoksa içerik olduğu gibi görünür (fail-safe) */
.js .gel{opacity:0;transform:translateY(26px)}
.js .gel.geldi{opacity:1;transform:none;
  transition:opacity .75s var(--ease),transform .75s var(--ease);
  transition-delay:calc(var(--g,0) * 70ms)}

/* Görsel kapları — her yerde aynı zoom ve scrim dili */
.ort{position:relative;overflow:hidden;background:var(--navy);isolation:isolate}
.ort img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
a.ort:hover img,a:hover > .ort img{transform:scale(1.05)}

/* ── Tanıtım — büyük görsel + hairline özellikler ─────────────────────── */
.neden{display:grid;gap:44px}
@media(min-width:1000px){
  .neden{grid-template-columns:1fr 1.06fr;gap:76px;align-items:center}
}
.neden__gorsel{aspect-ratio:1/1;border-radius:var(--r-3)}
@media(max-width:999px){ .neden__gorsel{aspect-ratio:1/1} }
.neden__metin > p{margin-top:20px;font-size:1.1rem;color:var(--fg-2);max-width:56ch}
.ozellikler{margin-top:40px;border-top:1px solid var(--line)}
.ozellik{display:grid;gap:5px;padding:20px 2px;border-bottom:1px solid var(--line)}
.ozellik b{font-weight:500;font-size:1.02rem}
.ozellik span{color:var(--fg-2);font-size:.95rem}
@media(min-width:600px){
  .ozellik{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:28px;align-items:baseline}
}

/* ── Hizmetler — üç sütunlu ızgara ────────────────────────────────────── */
/* Kartlar hairline çerçeveyle ayrılıyor (gölge yok, sade yüzey). İkon sol
   üstte, ad ve özet altta; aralarını margin-top:auto açıyor, böylece özet
   uzunluğu değişse de kartlar hizalı kalıyor. */
.hizmet-agi{display:grid;gap:14px;margin-top:46px;grid-template-columns:1fr}
/* Telefonda kartlar YAPIŞKAN: kaydırdıkça birbirinin üstüne biniyorlar,
   her kart bir öncekinden 10px aşağıda durup altındakinin üst kenarını
   gösteriyor. Boşluk sıfırlanıyor — yığın aralıksız olmalı.
   Yalnızca tek kolonda anlamlı; 600px'ten sonra ızgara iki kolona geçiyor
   ve kural devreye girmiyor. */
@media(max-width:599px){
  .hizmet-agi{gap:0}
  .hizmet-agi .hizmet{
    position:sticky;
    top:calc(var(--ust-h) + 12px + var(--s, 0) * 10px);
    margin-bottom:14px;
    /* Üstteki kart alttakinin arkasında kalmalı: sıra arttıkça z yükseliyor */
    z-index:calc(var(--s, 0) + 1);
    box-shadow:0 -8px 24px rgba(9,5,41,.06);
  }
  /* Son kartın altında yığının açılması için nefes payı */
  .hizmet-agi .hizmet:last-child{margin-bottom:0}
}
@media(min-width:600px){ .hizmet-agi{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1000px){ .hizmet-agi{grid-template-columns:repeat(3,1fr)} }

.hizmet{position:relative;display:flex;flex-direction:column;
  padding:26px 26px 24px;border-radius:var(--r-3);background:#fff;
  border:1px solid var(--line);
  transition:background-color .45s var(--ease),color .45s var(--ease),
             border-color .45s var(--ease)}

/* Kartın koyu hâli fareli cihazlarda hover'la, her cihazda klavye odağıyla
   geliyor. Dokunmatikte :hover bir kez dokununca yapışıp kalıyordu. */
@media(hover:hover){
  .hizmet:hover{
    background:linear-gradient(158deg,var(--navy) 0%,var(--navy-2) 100%);
    color:#fff;
    border-color:transparent;
    --fg:#ffffff;
    --fg-2:rgba(255,255,255,.72);
    --fg-3:rgba(255,255,255,.46);
  }
}
.hizmet:focus-visible{
  background:linear-gradient(158deg,var(--navy) 0%,var(--navy-2) 100%);
  color:#fff;
  border-color:transparent;
  --fg:#ffffff;
  --fg-2:rgba(255,255,255,.72);
  --fg-3:rgba(255,255,255,.46);
}
.hizmet__ikon{flex:none;display:block;width:34px;height:34px;color:var(--fg);
  transition:color .45s var(--ease)}
.hizmet__ikon svg{width:100%;height:100%;display:block}
.hizmet__yazi{display:grid;gap:6px;margin-top:44px;padding-right:34px}
.hizmet__yazi b{font-size:1.1rem;font-weight:500;letter-spacing:-.015em}
.hizmet__yazi > span{font-size:.94rem;line-height:1.5;color:var(--fg-2)}
.hizmet__no{position:absolute;top:26px;right:26px;font-size:.76rem;
  letter-spacing:.1em;color:var(--fg-3);transition:opacity .3s var(--ease)}
/* Ok yalnızca etkileşimde: durağan hâlde numara, hover'da yön göstergesi */
.hizmet__ok{position:absolute;right:26px;bottom:24px;font-style:normal;
  color:var(--gold);opacity:0;transform:translateX(-6px);
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
.hizmet:hover .hizmet__no{opacity:0}
.hizmet:hover .hizmet__ok{opacity:1;transform:none}
@media(max-width:699px){
  .hizmet{padding:22px 20px}
  .hizmet__no{top:22px;right:20px}
  .hizmet__ok{right:20px;bottom:20px}
}

/* ── Tesis — bento ızgara ─────────────────────────────────────────────── */
.ort__perde{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(9,5,41,0) 30%,rgba(9,5,41,.34) 58%,rgba(9,5,41,.86) 100%)}
.bento{display:grid;gap:12px;margin-top:52px;
  grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:212px}
.bento a{display:block;border-radius:var(--r-2)}
.bento .b1{grid-column:span 2;grid-row:span 2}
.bento .b4{grid-column:span 2}
@media(min-width:900px){
  .bento{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:286px;gap:14px}
  .bento .b1{grid-column:span 2;grid-row:span 2}
  .bento .b2{grid-column:span 2;grid-row:span 1}
  .bento .b3,.bento .b4{grid-column:span 1}
}
.bento .etiket{position:absolute;inset:auto 0 0 0;z-index:2;
  padding:38px 20px 17px;color:#fff;font-size:.95rem}
.bento .b1 .etiket{font-size:1.12rem;padding:52px 24px 22px}

/* ── Nasıl başlıyorsun — açık zemin, solda değişen kare ───────────────── */
/* Kareler üst üste duruyor, yalnızca .etkin olan görünür. Yükseklik ilk
   karenin oranından değil, kabın aspect-ratio'sundan geliyor; böylece geçiş
   sırasında blok zıplamıyor. */
.adim-blok{display:grid;gap:44px;align-items:center}
@media(min-width:960px){
  /* Masaüstünde iki sütun eşit yükseklikte ve alttan hizalı: görsel sabit kare
     oran yerine sağ içerik sütununun boyuna uzuyor (align-items:stretch). */
  .adim-blok{grid-template-columns:1fr 1.08fr;gap:74px;align-items:stretch}
  .adim-gorsel{grid-column:1;grid-row:1}
  .adim-blok__ic{grid-column:2;grid-row:1}
}
/* Kare oran yalnızca mobilde (tek sütun); masaüstünde yükseklik sağ sütundan gelir */
@media(max-width:959px){ .adim-gorsel{aspect-ratio:1/1} }
/* Telefonda adım görseli HİÇ basılmıyor. Kare, satırların üzerine gelince
   değişen bir görsel — dokunmatikte hover olmadığı için hiç değişmiyor ve
   yalnızca ~380px dikey yer kaplıyordu. Sayaç (02/03) da onunla gidiyor. */
@media(max-width:720px){ .adim-gorsel{display:none} }
.adim-gorsel{position:relative;border-radius:var(--r-3);
  overflow:hidden;background:var(--surface);isolation:isolate}
.adim-gorsel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.04);
  transition:opacity .6s var(--ease),transform .9s var(--ease)}
.adim-gorsel img.etkin{opacity:1;transform:none}

/* Sayaç — altın yalnızca burada, ince bir çerçeve içinde */
.adim-gorsel__sayac{position:absolute;left:20px;bottom:18px;z-index:2;
  padding:7px 15px;border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.34);background:rgba(9,5,41,.34);
  backdrop-filter:blur(6px);
  color:rgba(255,255,255,.72);font-size:.82rem;letter-spacing:.06em}
.adim-gorsel__sayac b{font-weight:500;color:#fff}

.adim-blok h2{font-size:clamp(1.85rem,3.1vw,2.7rem);font-weight:400;
  letter-spacing:-.028em;line-height:1.1;color:var(--fg)}
.adim-blok h2 b{font-weight:600}
.adim-blok__ic > .bas p{margin-top:16px;font-size:1.02rem;color:var(--fg-2);max-width:46ch}

/* Adım satırı: solda ikon rozeti, sağda metin. Etkin satır hairline yerine
   dolu lacivert rozetle işaretleniyor — renkle değil, kontrastla. */
.adimlar{margin:36px 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.adim{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;
  padding:22px 2px;border-bottom:1px solid var(--line);cursor:default}
.adim:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:var(--r-1)}
.adim__ikon{display:grid;place-items:center;width:48px;height:48px;flex:none;
  border-radius:var(--r-pill);border:1px solid var(--line-2);color:var(--fg-2);
  transition:background-color .4s var(--ease),border-color .4s var(--ease),
             color .4s var(--ease)}
.adim__ikon svg{width:22px;height:22px}
/* Etkin rozet YALNIZCA fareli cihazlarda: dokunmatikte "hover" bir kez
   dokununca yapışıyor ve rastgele bir satır koyu kalıyordu. Görsel de
   mobilde basılmadığı için işaretin anlatacağı bir şey kalmıyor. */
@media(hover:hover){
  .adim.etkin .adim__ikon{background:var(--navy);border-color:var(--navy);color:#fff}
}
.adim__yazi{display:grid;gap:5px;align-content:center}
.adim__yazi b{font-size:1.06rem;font-weight:500;letter-spacing:-.01em}
.adim__yazi > span{font-size:.95rem;line-height:1.55;color:var(--fg-2)}
.adim-blok__ic > .btn{margin-top:36px}

/* ── SSS — solda başlık, sağda sorular; aynı anda tek soru açık ───────── */
.sss-blok{display:grid;gap:40px}
@media(min-width:960px){
  .sss-blok{grid-template-columns:1fr 1.4fr;gap:78px;align-items:start}
  .sss-blok__bas{position:sticky;top:104px}
}

/* Sorular kart olarak duruyor: kapalı sönük yüzey, açık olan beyaza dönüp
   yükseliyor. Açma göstergesi dolu daire; açılınca 45° dönüp çarpıya kapanıyor. */
.sss{display:grid;gap:10px}
.sss details{border:1px solid transparent;border-radius:var(--r-3);background:var(--surface);
  transition:background-color .35s var(--ease),border-color .35s var(--ease),
             box-shadow .35s var(--ease)}
.sss details:hover{background:rgba(9,5,41,.065)}
.sss details[open]{background:#fff;border-color:var(--line);
  box-shadow:0 18px 44px rgba(9,5,41,.09)}
.sss details[open]:hover{background:#fff}

.sss summary{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:16px 16px 16px 26px;cursor:pointer;list-style:none;
  font-size:clamp(1rem,1.4vw,1.1rem);font-weight:400;line-height:1.35}
.sss summary::-webkit-details-marker{display:none}
.sss summary::after{content:"";flex:none;width:42px;height:42px;border-radius:50%;
  border:1px solid var(--navy);background-color:var(--navy);
  background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);
  background-size:13px 1.6px,1.6px 13px;
  background-position:center center;background-repeat:no-repeat;
  transition:transform .4s var(--ease),background-color .3s var(--ease),
             border-color .3s var(--ease)}
.sss details[open] summary::after{transform:rotate(45deg);
  background-color:transparent;border-color:var(--line-2);
  background-image:linear-gradient(var(--fg),var(--fg)),linear-gradient(var(--fg),var(--fg))}
.sss summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px;
  border-radius:var(--r-3)}
.sss details > p{padding:0 26px 26px;color:var(--fg-2);max-width:72ch}
@media(max-width:599px){
  .sss summary{padding:14px 14px 14px 20px}
  .sss summary::after{width:38px;height:38px}
  .sss details > p{padding:0 20px 22px}
}

/* ── İletişim — bilgi satırları + harita ──────────────────────────────── */
.iletisim{display:grid;gap:40px;margin-top:48px}
@media(min-width:960px){ .iletisim{grid-template-columns:1fr 1.12fr;gap:60px;align-items:start} }
.il-liste{border-top:1px solid var(--line)}
.il-satir{display:grid;gap:3px;padding:18px 2px;border-bottom:1px solid var(--line)}
.il-satir dt{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3)}
.il-satir dd{margin:0;font-size:1.04rem}
.il-satir dd a:hover{color:var(--gold)}
.il-saat{display:flex;justify-content:space-between;gap:18px;font-size:.97rem;color:var(--fg-2)}
.il-saat + .il-saat{margin-top:6px}
.il-butonlar{display:flex;flex-wrap:wrap;gap:11px;margin-top:30px}
.harita{aspect-ratio:4/3;border-radius:var(--r-3);overflow:hidden;
  border:1px solid var(--line);background:var(--surface)}
.harita iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(.28)}
@media(max-width:959px){ .harita{aspect-ratio:3/2} }

/* ── Uygulama — site genişliğinde koyu kart ───────────────────────────── */
/* Tam genişlik bant değil: zemin .kap içindeki karta ait, böylece sağ ve sol
   kenarı sitenin diğer bölümleriyle aynı hizada bitiyor. Telefon kartın üst
   kenarından taşıyor, o yüzden kart kırpılmıyor (overflow görünür). */
.uygulama-bant{padding-block:112px}
@media(max-width:899px){ .uygulama-bant{padding-block:76px} }
/* Telefonun taşma payı: üstteki bölümle çakışmasın diye kartın üstü boş bırakılıyor */
@media(min-width:960px){ .uygulama-bant{padding-top:150px} }

.uygulama{display:grid;align-items:center;border-radius:var(--r-3);
  padding-inline:clamp(24px,4vw,58px)}
@media(min-width:960px){
  /* Solda içerik, sağda telefon */
  .uygulama{grid-template-columns:1.04fr 1fr;column-gap:66px}
  .uygulama__ic{grid-column:1;grid-row:1}
  .uygulama__gorsel{grid-column:2;grid-row:1}
}
.uygulama__ic{padding-block:46px 50px}
@media(max-width:959px){ .uygulama__ic{padding-block:38px 32px} }

/* Kaynak PNG telefonu alttan düz kesik geliyor: kartın alt kenarına sıfır
   oturtuluyor, kesik kenar kartın dışında kalıyor. */
.uygulama__gorsel{
  --tel-g:320px;                        /* telefon genişliği */
  --tasma:calc(var(--tel-g) * .431);    /* yüksekliğin %25'i (PNG oranı 580:1000) */
  display:flex;align-items:flex-end;justify-content:flex-end;   /* kartın sağ kenarına hizalı */
  align-self:end;margin-top:calc(var(--tasma) * -1);pointer-events:none}
.uygulama__gorsel img{width:100%;max-width:var(--tel-g);height:auto}
@media(max-width:959px){
  /* Tek kolona düşünce telefon ORTALANIYOR. Sola yaslıyken sağda ~80px
     boşluk kalıyordu ve kart dengesiz görünüyordu; masaüstünde sağa
     yaslama iki kolonlu düzenin parçası, burada karşılığı yok. */
  .uygulama__gorsel{--tel-g:250px;--tasma:0px;justify-content:center}
}

/* Dört ayrı kutu yerine tek panel, içi hairline ile bölünmüş —
   zemin gradyanı hücrelerin arkasından kesintisiz geçiyor. */
.ozellik-kutu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  margin-top:30px;border-top:1px solid var(--line)}
.ozellik-kutu > div{display:flex;align-items:center;gap:14px;
  padding:17px 0;border-bottom:1px solid var(--line);font-size:1rem}
@media(min-width:520px){
  .ozellik-kutu > div:nth-child(odd){padding-right:26px}
  .ozellik-kutu > div:nth-child(even){padding-left:26px;border-left:1px solid var(--line)}
}
@media(max-width:519px){ .ozellik-kutu{grid-template-columns:1fr} }
.ozellik-kutu svg{flex:none;width:20px;height:20px;color:var(--gold)}
.rozetler{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* ── Kapanış bandı — footer'a yapışık, uygulama bandıyla aynı dil ─────── */
.kapanis{position:relative;overflow:hidden;background:var(--navy);isolation:isolate}
.kapanis__medya{position:absolute;inset:0;z-index:0}
.kapanis__medya img{width:100%;height:100%;object-fit:cover;opacity:.5}
.kapanis__perde{position:absolute;inset:0;z-index:1;
  background:linear-gradient(158deg,rgba(9,5,41,.88) 0%,rgba(32,37,89,.76) 100%)}
.kapanis__ic{position:relative;z-index:2;padding-block:108px;
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:36px}
.kapanis__ic > div{max-width:52ch}
.kapanis h2{font-size:clamp(2rem,3.9vw,3.35rem);font-weight:400;letter-spacing:-.028em;color:#fff}
.kapanis p{margin-top:16px;font-size:1.04rem;color:rgba(255,255,255,.78)}
@media(max-width:899px){ .kapanis__ic{padding-block:76px} }

/* ── Mobil sticky bar — dönüşümün üç yolu ─────────────────────────────── */
.mobil-bar{position:fixed;inset:auto 0 0 0;z-index:70;
  display:grid;grid-template-columns:1fr 1fr 1.35fr;gap:8px;align-items:center;
  padding:9px 12px calc(9px + env(safe-area-inset-bottom));
  background:#fff;border-top:1px solid var(--line);box-shadow:0 -2px 24px rgba(9,5,41,.09)}
.mobil-bar a{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:46px;border-radius:var(--r-pill);font-size:.88rem;font-weight:500;
  border:1px solid var(--line-2);color:var(--fg);
  transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.mobil-bar a:hover{background:var(--surface)}
.mobil-bar svg{width:17px;height:17px}
.mobil-bar .bar-cta{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:600}
.mobil-bar .bar-cta:hover{background:var(--navy-2);border-color:var(--navy-2)}
@media(min-width:1060px){ .mobil-bar{display:none} }
@media(max-width:1059px){ body{padding-bottom:74px} }

/* Hero'da iki buton */
.hero__butonlar{display:flex;flex-wrap:wrap;gap:13px;margin-top:36px}
.hero__butonlar .btn{margin-top:0}
@media(max-width:899px){ .hero__butonlar{margin-top:28px} }
/* Dar ekranda ALT ALTA DEĞİL yan yana: iki tam genişlik hapı (59px boy)
   hero'yu eziyor ve ikincil buton birincil kadar ağır görünüyordu.
   Birincil biraz geniş — hiyerarşi ölçüyle kuruluyor, renkle değil. */
@media(max-width:560px){
  .hero__butonlar{display:grid;grid-template-columns:1.35fr 1fr;gap:10px}
  .hero__butonlar .btn{padding:14px 16px;font-size:.92rem}
}
/* 340px'in altında yan yana sığmıyor — orada alt alta dönüyor. */
@media(max-width:339px){ .hero__butonlar{grid-template-columns:1fr} }

/* Hareket azaltma — reveal'ı tamamen devre dışı bırak, içerik hep görünür */
@media(prefers-reduced-motion:reduce){
  .js .gel,.js .gel.geldi{opacity:1;transform:none;transition:none}
}

/* ── Karusel — scroll-snap ray + iki ok. Tek bileşen, iki bölümde kullanılıyor.
   Sürükleme ve klavye tarayıcının kendi kaydırmasıyla çalışıyor; JS yalnızca
   okları ve otomatik ilerlemeyi ekliyor, kapalıyken de ray kaydırılabilir. ── */
.karusel{position:relative;margin-top:46px}
/* snap: proximity — mandatory'de son kartların hizalama noktası kaydırma
   sınırının ötesinde kaldığı için ray hiç kımıldamıyordu (tarayıcı her
   denemede 0'a geri çekiyordu). proximity yakınken hizalar, asla kilitlemez. */
.karusel__ray{display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;padding-block:4px}
.karusel__ray::-webkit-scrollbar{display:none}
.karusel__ray > *{scroll-snap-align:start;flex-grow:0;flex-shrink:0}
.karusel__ray:focus-visible{outline:2px solid var(--gold);outline-offset:6px;
  border-radius:var(--r-3)}

.karusel__ok{display:flex;gap:10px;margin-top:26px}
.karusel__ok button{display:grid;place-items:center;width:46px;height:46px;
  border-radius:var(--r-pill);border:1px solid var(--line-2);color:var(--fg-2);
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease),
             background-color var(--dur) var(--ease),opacity var(--dur) var(--ease)}
.karusel__ok button:hover{border-color:var(--fg);color:var(--fg);background:var(--surface)}
.karusel__ok button[disabled]{opacity:.34;pointer-events:none}
.karusel__ok em{font-style:normal;font-size:1.05rem;line-height:1}

/* ── Google yorumu ─────────────────────────────────────────────────── */
/* Kartlar rayda esneyerek eşitlenir; boyu EN UZUN kart belirler. Bu yüzden
   metin 4 satırda kesiliyor — sınırsızken tek uzun yorum bütün kartları
   iki katına çıkarıyor, içerik üstte kalıp altta boşluk açıyordu. */
.yorum{position:relative;flex:0 0 86%;display:flex;flex-direction:column;margin:0;
  padding:24px 26px 22px;border-radius:var(--r-3);
  background:#fff;border:1px solid var(--line)}
/* Sağ üstte kapanış tırnağı — dekoratif, düşük kontrast */
.yorum::after{content:'\201D';position:absolute;top:12px;right:22px;
  font-size:3rem;line-height:1;font-weight:600;color:rgba(9,5,41,.11);
  pointer-events:none}
/* Alt boşluk margin-bottom'da duruyor: figcaption'ın margin-top:auto'su
   ezilmesin diye burada veriliyor (daha spesifik bir seçici auto'yu geçersiz
   kılıyordu ve alt satır kısa yorumlarda yukarıda asılı kalıyordu). */
.yorum blockquote{margin:15px 0 18px;font-size:.97rem;line-height:1.6;color:var(--fg-2);
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
/* Alt satır hairline ile ayrılıyor: solda avatar, sağda isim + tarih.
   margin-top:auto — metin kaç satır olursa olsun her kartta aynı hizada. */
.yorum figcaption{display:flex;align-items:center;gap:11px;
  margin-top:auto;padding-top:15px;border-top:1px solid var(--line)}
.yorum--tumu::after{content:none}   /* yönlendirme kartında tırnak olmaz */
/* Ekranda tam kaç kart duracak: 2 sütun 640px'den, 3 sütun 1000px'den sonra.
   Kesik kart kalmıyor; JS adımı da bu sayıyı ölçüp sayfa sayfa kaydırıyor. */
@media(min-width:640px){  .yorum{flex-basis:calc((100% - 14px) / 2)} }
@media(min-width:1000px){ .yorum{flex-basis:calc((100% - 28px) / 3)} }

.yorum__foto{flex:none;width:38px;height:38px;border-radius:var(--r-pill);object-fit:cover;
  background:var(--surface)}
/* Profil fotoğrafı yoksa baş harf rozeti — dış kaynağa bağımlılık kalmıyor */
.yorum__foto--harf{display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--line);
  color:var(--fg-2);font-size:1rem;font-weight:500}
.yorum__kim{display:grid;gap:2px;min-width:0}
.yorum__kim b{font-weight:500;font-size:.95rem}
.yorum__kim span{font-size:.83rem;color:var(--fg-3)}

/* Rayın ilk kartı: yorum kartıyla aynı ölçü, ters kontrast — kaynağı
   en başta gösteriyor. Arkadaki G dekoratif filigran, metnin altında kalır. */
.yorum--tumu{justify-content:center;gap:8px;overflow:hidden;
  background:linear-gradient(158deg,var(--navy) 0%,var(--navy-2) 100%);
  border-color:transparent;color:#fff}
.yorum--tumu b{font-size:1.16rem;font-weight:400;letter-spacing:-.02em}
.yorum--tumu > span{font-size:.93rem;color:rgba(255,255,255,.72);max-width:26ch}
.yorum__ok{display:inline-flex;align-items:center;gap:9px;margin-top:16px;
  font-size:.87rem;color:rgba(255,255,255,.72);
  transition:color var(--dur) var(--ease)}
.yorum__ok em{font-style:normal;color:var(--gold);
  transition:transform var(--dur) var(--ease)}
.yorum--tumu:hover .yorum__ok{color:#fff}
.yorum--tumu:hover .yorum__ok em{transform:translateX(4px)}

/* Google G'si — sağ alttan taşan filigran, dört marka rengi yerine tek altın.
   Kardeşleri position:relative yapılıyor ki mutlak konumlu G metnin altında
   kalsın (positioned öğeler normalde static olanların üstüne boyanır). */
.yorum--tumu > :not(.yorum__g){position:relative}
.yorum__g{position:absolute;right:-34px;bottom:-40px;width:222px;height:222px;
  color:#fff;opacity:.13;pointer-events:none;
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.yorum--tumu:hover .yorum__g{opacity:.2;transform:translate(-5px,-5px)}

.yildiz{display:inline-flex;gap:3px}
.yildiz svg{width:15px;height:15px}
.yildiz .dolu{fill:var(--gold)}
.yildiz .bos{fill:var(--line-2)}

.yorum-ozet{display:flex;align-items:center;gap:12px;font-size:.94rem;color:var(--fg-2)}
.yorum-ozet b{font-size:1.24rem;font-weight:500;color:var(--fg)}

/* Yorum metni henüz yokken: puan zaten başlık satırında duruyor, burada
   yalnızca Google profiline yönlendiren tek satır kalıyor. Karusel açılınca
   bu blok yerini kartlara bırakıyor. */
.yorum-bos{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:20px;margin-top:44px;padding:30px 32px;
  border:1px solid var(--line);border-radius:var(--r-3);background:#fff}
.yorum-bos p{font-size:1.04rem;color:var(--fg-2);max-width:52ch}
@media(max-width:599px){ .yorum-bos{padding:24px} }

/* ── Instagram — açık zemin, 9:16 kartlar ─────────────────────────────── */
/* Kartlar zeminin üstünde yüzüyor, çerçeve yok.
   Metin kartın içinde, altta, scrim üzerinde duruyor — Instagram'ın kendi
   dili bu, dışarıdan gelen bir efekt değil. */
.insta__ust{display:flex;align-items:center;gap:16px}
.insta__rozet{display:grid;place-items:center;flex:none;width:52px;height:52px;
  border-radius:var(--r-2);border:1px solid var(--line-2);color:var(--fg)}
.insta__rozet svg{width:26px;height:26px}
.insta__kimlik{min-width:0}
.insta__kimlik h2{font-size:1.32rem;font-weight:600;letter-spacing:-.018em;color:var(--fg)}
.insta__kimlik p{margin-top:3px;font-size:.92rem;color:var(--fg-2)}
.insta__ok{margin:0 0 0 auto}
@media(max-width:599px){
  .insta__rozet{width:44px;height:44px}
  .insta__kimlik h2{font-size:1.12rem}
  .insta__ok{display:none}          /* dar ekranda parmakla kaydırılıyor */
}

.karusel--insta{margin-top:34px}
.karusel--insta .karusel__ray{gap:16px}
@media(max-width:599px){ .karusel--insta .karusel__ray{gap:12px} }

.insta-kart{position:relative;flex:0 0 min(290px,72%);aspect-ratio:9/16;
  display:block;border-radius:var(--r-3);overflow:hidden;
  background:var(--navy);isolation:isolate}
.insta-kart__medya{position:absolute;inset:0;z-index:0}
.insta-kart__medya img,.insta-kart__medya video{width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease)}
.insta-kart:hover .insta-kart__medya img,
.insta-kart:hover .insta-kart__medya video{transform:scale(1.04)}
.insta-kart__perde{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(9,5,41,.42) 0%,rgba(9,5,41,0) 26%,
    rgba(9,5,41,.28) 62%,rgba(9,5,41,.88) 100%)}

/* Tür etiketi — renk yok, koyu cam üzerinde harf aralığı açılmış küçük metin */
.insta-kart__tur{position:absolute;top:14px;left:14px;z-index:2;
  padding:6px 13px;border-radius:var(--r-pill);
  background:rgba(9,5,41,.55);backdrop-filter:blur(8px);
  color:#fff;font-size:.66rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase}
.insta-kart__metin{position:absolute;inset:auto 16px 16px 16px;z-index:2;
  color:#fff;font-size:.92rem;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media(min-width:900px){ .insta-kart{flex:0 0 290px} }

/* Alt bağlantı — ortalanmış, harf aralığı açık, hairline altı yok */
.insta__tumu{display:inline-flex;align-items:center;gap:12px;margin:38px auto 0;
  padding:4px 2px;
  font-size:.79rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-2);transition:color var(--dur) var(--ease)}
/* Alt bağlantının auto margin ile ortalanabilmesi için kolon akışı */
.insta .kap{display:flex;flex-direction:column;align-items:stretch}
.insta__tumu em{font-style:normal;color:var(--gold);letter-spacing:0;
  transition:transform var(--dur) var(--ease)}
.insta__tumu:hover{color:var(--fg)}
.insta__tumu:hover em{transform:translateX(5px)}

/* ── Yükleme perdesi ───────────────────────────────────────────────────
   Eski sitedeki "lacivert zemin + logo" fikri değil: zemin baştan var,
   logo maskeyle soldan sağa dolduruluyor, altındaki hairline yükleme
   ilerledikçe uzuyor. Bitince perde yukarı kalkıp hero'yu açıyor.
   JS yoksa hiç görünmez (html.js koşulu) — içerik asla perdenin altında kalmaz. */
.yukleme{display:none}
.js .yukleme{position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:linear-gradient(158deg,var(--navy) 0%,var(--navy-2) 100%);
  transition:transform .85s var(--ease),visibility .85s}
.js body.yuklendi{overflow:visible}
.js body:not(.yuklendi){overflow:hidden}
.js .yukleme[data-bitti="1"]{transform:translateY(-101%);visibility:hidden}

.yukleme__ic{display:grid;justify-items:center;gap:26px;width:min(340px,72vw)}
/* Logo: beyaz SVG'nin üstünden soldan sağa açılan maske geçiyor */
.yukleme__logo{width:100%;height:auto;
  -webkit-mask-image:linear-gradient(90deg,#000 0 var(--ilerleme,0%),rgba(0,0,0,.18) var(--ilerleme,0%) 100%);
          mask-image:linear-gradient(90deg,#000 0 var(--ilerleme,0%),rgba(0,0,0,.18) var(--ilerleme,0%) 100%);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  transition:-webkit-mask-image .4s linear,mask-image .4s linear}
.yukleme__cizgi{width:100%;height:1px;background:rgba(255,255,255,.18);overflow:hidden}
.yukleme__cizgi i{display:block;height:100%;width:var(--ilerleme,0%);
  background:var(--gold);transition:width .4s var(--ease)}

@media(prefers-reduced-motion:reduce){
  .js .yukleme{transition:opacity .2s linear}
  .js .yukleme[data-bitti="1"]{transform:none;opacity:0}
  .yukleme__logo{-webkit-mask-image:none;mask-image:none}
}

/* ══════════════════════════════════════════════════════════════════════
   BAŞVURU POPUP'I + YAPIŞKAN KENAR ÖĞELERİ
   ══════════════════════════════════════════════════════════════════════ */

/* Sağ kenarda dikey sekme. Mobilde gizli — orada alttaki sticky bar var. */
.yapiskan-cta{position:fixed;top:50%;right:0;z-index:65;
  transform:translateY(-50%) translateX(0);transform-origin:right center;
  padding:16px 13px;border-radius:var(--r-2) 0 0 var(--r-2);
  background:linear-gradient(158deg,var(--navy) 0%,var(--navy-2) 100%);
  color:#fff;box-shadow:0 14px 40px rgba(9,5,41,.28);
  transition:padding-right var(--dur) var(--ease)}
.yapiskan-cta span{display:block;writing-mode:vertical-rl;
  font-size:.82rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.yapiskan-cta:hover{padding-right:19px}

/* Sağ alt köşedeki sosyal yığın — Instagram üstte, WhatsApp altta.
   Konumu kapsayıcı taşıyor; butonlar akışta duruyor, böylece sıra değişse
   ya da üçüncü bir buton eklense hesaplama gerekmiyor. */
.kenar-dugme{position:fixed;right:22px;bottom:22px;z-index:65;
  display:flex;flex-direction:column;gap:12px}
.kenar-dugme > a{display:grid;place-items:center;width:56px;height:56px;
  border-radius:var(--r-pill);color:#fff;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.kenar-dugme > a:hover{transform:translateY(-3px)}
.kenar-dugme svg{width:30px;height:30px}

/* İkisi de üçüncü taraf marka işareti, kendi renklerinde duruyorlar.
   Paletteki "yeşil kullanılmaz" kuralının bilinçli istisnası budur;
   marka renkleri site paletine eklenmiş sayılmaz. */
.wa-dugme{background:#25d366;box-shadow:0 12px 32px rgba(37,211,102,.34)}
.wa-dugme:hover{box-shadow:0 18px 40px rgba(37,211,102,.42)}
.ig-dugme{background:linear-gradient(45deg,#f09433 0%,#dc2743 50%,#bc1888 100%);
  box-shadow:0 12px 32px rgba(188,24,136,.30)}
.ig-dugme:hover{box-shadow:0 18px 40px rgba(188,24,136,.40)}
.ig-dugme svg{width:28px;height:28px}

@media(max-width:1059px){ .yapiskan-cta,.kenar-dugme{display:none} }

/* ── Yasal sayfalar — koyu başlık bandı + hairline'lı okuma düzeni ────── */
.yasal-bas{padding:172px 0 64px}   /* zemin .koyu'dan geliyor */
.yasal-bas h1{font-size:clamp(1.9rem,3.4vw,2.9rem);font-weight:400;letter-spacing:-.028em}
.yasal-bas__tarih{margin-top:14px;font-size:.88rem;color:rgba(255,255,255,.55)}

/* Okuma kolonu sola yaslı: .kap'la AYNI elemandayken .kap'ın
   margin-inline:auto'su 760px'lik kolonu sayfanın ortasına itiyordu.
   Artık .kap dışta (site genişliği), kolon onun içinde ve sol kenarda —
   başlıkla ve header logosuyla aynı hatta başlıyor. */
.yasal__ic{max-width:760px;margin-inline:0}
.yasal__bolum{padding:30px 0;border-bottom:1px solid var(--line)}
.yasal__bolum:last-child{border-bottom:0}
.yasal__bolum h2{font-size:1.12rem;font-weight:500;letter-spacing:-.01em;color:var(--fg)}
.yasal__bolum h2 .tabular{margin-right:10px;font-weight:400;color:var(--gold)}
.yasal__bolum p{margin-top:12px;font-size:.99rem;line-height:1.75;color:var(--fg-2)}
/* KVKK metinlerindeki madde listeleri — haklar ve amaçlar maddeler hâlinde
   yazılı, tek paragrafa sıkıştırınca okunmuyordu */
.yasal__liste{margin-top:14px;padding-left:20px;display:grid;gap:8px}
.yasal__liste li{font-size:.99rem;line-height:1.7;color:var(--fg-2)}
.yasal__liste li::marker{color:var(--gold)}
.yasal__giris{margin-bottom:8px;font-size:1.02rem;line-height:1.8;color:var(--fg-2)}
.yasal__bolum p + p{margin-top:14px}

/* KVKK merkezinde ızgaranın üstünde başlık bloğu yok: .hizmet-agi'nin
   46px'lik üst boşluğu koyu bandın altında ikinci bir boşluk yaratıyordu */
.kvkk-agi{margin-top:0}

/* KVKK merkezi — kart ızgarasının altındaki başvuru satırı */
.kvkk-iletisim{max-width:760px;margin-top:46px;padding-top:26px;
  border-top:1px solid var(--line);font-size:.96rem;line-height:1.7;color:var(--fg-2)}

@media(max-width:699px){ .yasal-bas{padding:132px 0 48px} }

/* ── 404 — sade, ortalanmış koyu gradyan ─────────────────────────────── */
.hata{display:grid;place-items:center;min-height:78svh;padding:150px 0 110px;
  text-align:center;
  background:linear-gradient(158deg,var(--navy) 0%,var(--navy-2) 100%);color:#fff}
.hata__ic{max-width:560px;margin-inline:auto}
/* Küçük 404 etiketi — altın hairline vurgu, dev fon rakamı yerine */
.hata__etiket{display:inline-block;font-size:.8rem;font-weight:500;
  letter-spacing:.34em;color:var(--gold);margin-bottom:22px}
.hata__ic h1{font-size:clamp(2rem,4vw,3rem);font-weight:400;letter-spacing:-.028em;line-height:1.12}
.hata__ic p{margin:16px auto 0;font-size:1.03rem;line-height:1.62;
  color:rgba(255,255,255,.72);max-width:44ch}
.hata__butonlar{margin-top:32px}
/* Sık kullanılan sayfalar — ortalanmış hairline bağlantı satırı */
.hata__yollar{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 26px;
  margin-top:40px;padding-top:26px;border-top:1px solid rgba(255,255,255,.16)}
.hata__yollar a{font-size:.95rem;color:rgba(255,255,255,.74);
  transition:color var(--dur) var(--ease)}
.hata__yollar a:hover{color:#fff}
@media(max-width:699px){ .hata{padding:128px 0 84px} }

/* ── İç sayfa üst bandı (koyu) — eyebrow + başlık + giriş ─────────────── */
.ic-bas{padding:172px 0 64px}
.ic-bas__etiket{display:inline-block;font-size:.8rem;font-weight:500;
  letter-spacing:.28em;text-transform:uppercase;color:var(--bant-etiket,var(--gold));margin-bottom:18px}
.ic-bas h1{font-size:clamp(1.9rem,3.6vw,3rem);font-weight:400;letter-spacing:-.028em;line-height:1.1;
  color:var(--bant-baslik,inherit)}
.ic-bas p{margin-top:16px;font-size:1.04rem;line-height:1.62;
  color:var(--bant-metin,rgba(255,255,255,.72));max-width:52ch}
@media(max-width:699px){ .ic-bas{padding:132px 0 48px} }
/* ── Hakkımızda ───────────────────────────────────────────────────────── */
/* Anlatı: solda metin (başrol), sağda dikey görsel. Ana sayfadaki kare
   tanıtımdan bilinçli farklı — orada görsel, burada metin önde. */
.hk-anlati{display:grid;gap:40px}
@media(min-width:900px){
  .hk-anlati{grid-template-columns:1.15fr .85fr;gap:70px;align-items:start}
}
.hk-anlati__yazi h2{font-size:clamp(1.7rem,2.8vw,2.4rem);font-weight:400;
  letter-spacing:-.025em;line-height:1.14}
.hk-anlati__yazi p{margin-top:18px;font-size:1.04rem;line-height:1.72;color:var(--fg-2)}
.hk-anlati__gorsel{margin:0;border-radius:var(--r-3);overflow:hidden;background:var(--surface)}
.hk-anlati__gorsel img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/5}
@media(max-width:899px){ .hk-anlati__gorsel img{aspect-ratio:4/3} }

/* Sayı şeridi — hairline ızgara, metnin altında */
.hk-sayilar{display:grid;gap:0;margin-top:38px;border-top:1px solid var(--line)}
@media(min-width:560px){ .hk-sayilar{grid-template-columns:repeat(3,1fr)} }
.hk-sayilar > div{padding:20px 0;border-bottom:1px solid var(--line)}
@media(min-width:560px){
  .hk-sayilar > div{padding:20px 22px 20px 0;border-bottom:none}
  .hk-sayilar > div + div{padding-left:22px;border-left:1px solid var(--line)}
}
.hk-sayilar dt{font-size:2rem;font-weight:300;letter-spacing:-.03em;line-height:1}
.hk-sayilar dt em{font-style:normal;font-size:.5em;margin-left:3px;color:var(--fg-3)}
/* margin-left:0 şart: <dd>'nin tarayıcı varsayılanı 40px sol girinti,
   etiket sayının altında değil sağında başlıyordu. */
.hk-sayilar dd{margin:7px 0 0;font-size:.9rem;line-height:1.45;color:var(--fg-2)}

/* Değerler — gri zemin üstünde beyaz kutu, içi üç hairline sütun */
.hk-deger-kutu{background:#fff;border-radius:var(--r-3);
  padding:clamp(28px,4vw,56px)}
.hk-degerler{list-style:none;margin:40px 0 0;padding:0;display:grid;gap:0;
  border-top:1px solid var(--line)}
@media(min-width:820px){ .hk-degerler{grid-template-columns:repeat(3,1fr)} }
.hk-degerler li{padding:26px 0;border-bottom:1px solid var(--line)}
@media(min-width:820px){
  .hk-degerler li{padding:28px 26px 4px 0;border-bottom:none}
  .hk-degerler li + li{padding-left:26px;border-left:1px solid var(--line)}
}
.hk-degerler__no{display:block;font-size:.76rem;letter-spacing:.12em;color:var(--gold)}
.hk-degerler b{display:block;margin-top:12px;font-size:1.12rem;font-weight:500;letter-spacing:-.015em}
.hk-degerler li > span:last-child{display:block;margin-top:9px;font-size:.96rem;
  line-height:1.6;color:var(--fg-2)}

/* ── Hizmet detay ─────────────────────────────────────────────────────── */
.hd-bas{padding:150px 0 64px}
@media(max-width:699px){ .hd-bas{padding:124px 0 44px} }
.hd-bas__ic{display:grid;gap:34px;align-items:center}
@media(min-width:900px){ .hd-bas__ic{grid-template-columns:1.05fr .95fr;gap:60px} }
.hd-bas__geri{display:inline-flex;align-items:center;gap:8px;
  font-size:.86rem;color:rgba(255,255,255,.72);transition:color var(--dur) var(--ease)}
.hd-bas__geri:hover{color:#fff}
.hd-bas__geri em{font-style:normal;color:var(--gold)}
.hd-bas__ikon{display:block;width:40px;height:40px;margin:24px 0 16px;color:var(--gold)}
.hd-bas__ikon svg{width:100%;height:100%;display:block}
.hd-bas h1{font-size:clamp(1.9rem,3.4vw,2.8rem);font-weight:400;
  letter-spacing:-.028em;line-height:1.12}
.hd-bas p{margin-top:16px;font-size:1.04rem;line-height:1.66;
  color:rgba(255,255,255,.74);max-width:46ch}
/* Hero görseli yatay — dikey kullanılmıyor */
.hd-bas__gorsel{margin:0;border-radius:var(--r-3);overflow:hidden;
  background:rgba(255,255,255,.06)}
.hd-bas__gorsel img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}

/* Sayfa sonu SEO bloğu — gri zemin üstünde beyaz kutu.
   Solda başlık, sağda metin; başlık kutu boyunca yapışkan kalıyor. */
/* Bir önceki bölüm gri olduğu için kutu beyaz zeminde hairline çerçeveli —
   iki gri yüzey yan yana gelip birbirine karışmıyor. */
/* Kutu site genişliğinde — diğer bölümlerle aynı hizada başlayıp bitiyor. */
.hd-seo__kutu{background:#fff;border:1px solid var(--line);border-radius:var(--r-3);
  padding:clamp(28px,4vw,52px)}
.hd-seo__bas{font-size:clamp(1.45rem,2.3vw,1.95rem);font-weight:400;
  letter-spacing:-.025em;line-height:1.22;margin-bottom:24px}

/* İçerik kutuya gömülü: sabit yükseklik, kendi kaydırma çubuğu.
   overscroll-behavior — metnin sonuna gelince sayfa zıplamıyor. */
.hd-seo__metin{max-height:290px;overflow-y:auto;overscroll-behavior:contain;
  padding-right:28px;min-width:0;
  font-size:1.02rem;line-height:1.78;color:var(--fg-2);
  scrollbar-width:thin;scrollbar-color:var(--line-2) rgba(9,5,41,.08)}
.hd-seo__metin:focus-visible{outline:2px solid var(--gold);outline-offset:6px;
  border-radius:var(--r-1)}
.hd-seo__metin::-webkit-scrollbar{width:4px}
.hd-seo__metin::-webkit-scrollbar-track{background:rgba(9,5,41,.08);border-radius:4px}
.hd-seo__metin::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:4px}
.hd-seo__metin::-webkit-scrollbar-thumb:hover{background:var(--fg-3)}
@media(max-width:699px){ .hd-seo__metin{max-height:280px;padding-right:20px} }
.hd-seo__metin > * + *{margin-top:18px}
.hd-seo__metin h3{margin-top:32px;font-size:1.1rem;font-weight:500;
  letter-spacing:-.012em;color:var(--fg)}
.hd-seo__giris{font-size:1.06rem}
.hd-seo__yonlendirme{margin-top:30px;padding-top:22px;border-top:1px solid var(--line);
  font-size:.99rem}
.hd-seo__yonlendirme a{color:var(--fg);text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:var(--line-2);
  transition:text-decoration-color var(--dur) var(--ease)}
.hd-seo__yonlendirme a:hover{text-decoration-color:var(--gold)}

/* Neler Var — solda numaralı + ikonlu maddeler, sağda değişen yatay kare */
.hd-neler{display:grid;gap:34px;margin-top:44px}
@media(min-width:960px){
  .hd-neler{grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}
  .hd-neler__liste{grid-column:1;grid-row:1}
  .hd-neler__gorsel{grid-column:2;grid-row:1}
}
.hd-neler__liste{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.hd-madde{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:16px;
  align-items:start;padding:20px 4px;border-bottom:1px solid var(--line);cursor:default;
  transition:padding-left var(--dur) var(--ease)}
.hd-madde:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:var(--r-1)}
.hd-madde__no{font-size:.78rem;letter-spacing:.1em;color:var(--fg-3);padding-top:11px;
  transition:color .35s var(--ease)}
.hd-madde__ikon{display:grid;place-items:center;width:42px;height:42px;flex:none;
  border-radius:var(--r-pill);border:1px solid var(--line);color:var(--fg-2);
  transition:background-color .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease)}
.hd-madde__ikon svg{width:20px;height:20px}
.hd-madde__yazi b{display:block;font-size:1.04rem;font-weight:500;letter-spacing:-.012em}
.hd-madde__yazi > span{display:block;margin-top:5px;font-size:.95rem;line-height:1.55;color:var(--fg-2)}
/* Etkin madde: ikon dolu lacivert, numara altın — hangi kare gösteriliyor belli olsun */
.hd-madde.etkin{padding-left:10px}
.hd-madde.etkin .hd-madde__ikon{background:var(--navy);border-color:var(--navy);color:#fff}
.hd-madde.etkin .hd-madde__no{color:var(--gold)}

.hd-neler__gorsel{position:relative;aspect-ratio:3/2;border-radius:var(--r-3);
  overflow:hidden;background:var(--surface);isolation:isolate}
.hd-neler__gorsel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.04);
  transition:opacity .55s var(--ease),transform .85s var(--ease)}
.hd-neler__gorsel img.etkin{opacity:1;transform:none}

/* Karuseldeki hizmet kartları — ızgara sürümünde flex-basis yok, burada gerekiyor */
.karusel .hizmet{flex:0 0 84%}
@media(min-width:640px){  .karusel .hizmet{flex-basis:calc((100% - 14px) / 2)} }
@media(min-width:1000px){ .karusel .hizmet{flex-basis:calc((100% - 28px) / 3)} }

/* Yatay CTA — dark mavi kutu, arkada dev şeffaf hizmet ikonu.
   Üstte önceki bölümün boşluğu var; altta kendi payını bırakıyor ki
   sonraki gri bölüme yapışmasın. */
/* Üstte kendi payı var (önceki gri bölüm kutuya yapışmasın diye);
   altta yok — sonraki bölümün kendi üst boşluğu yeterli. */
.hd-cta{padding-top:96px;padding-bottom:0}
@media(max-width:899px){ .hd-cta{padding-top:70px} }
.hd-cta__kutu{position:relative;overflow:hidden;isolation:isolate;
  border-radius:var(--r-3);padding:clamp(38px,5vw,72px) clamp(28px,4vw,58px);
  min-height:280px;
  background:linear-gradient(158deg,var(--navy) 0%,var(--navy-2) 100%);color:#fff;
  /* Tek sütun: başlık, metin ve butonlar solda alt alta.
     Sağ taraf boş bırakılıyor — arkadaki dev hizmet ikonu orada duruyor. */
  display:flex;flex-direction:column;justify-content:center;gap:0}
@media(min-width:860px){ .hd-cta__kutu{min-height:320px} }
/* İkon dekoratif ama görünür olmalı: sağda taşıyor, metnin altında kalıyor.
   Çizgi ikon olduğu için opacity düşükken kayboluyordu — stroke kalınlaştırıldı. */
.hd-cta__fon{position:absolute;z-index:-1;right:-56px;top:50%;
  width:440px;height:440px;transform:translateY(-50%) rotate(-8deg);
  color:#fff;opacity:.16;pointer-events:none}
.hd-cta__fon svg{width:100%;height:100%;display:block}
@media(max-width:859px){
  .hd-cta__fon{width:300px;height:300px;right:-70px;opacity:.13}
}
.hd-cta__yazi h2{font-size:clamp(1.4rem,2.3vw,1.95rem);font-weight:400;
  letter-spacing:-.025em;line-height:1.2}
.hd-cta__yazi p{margin-top:12px;font-size:1rem;line-height:1.6;
  color:rgba(255,255,255,.74);max-width:44ch}
/* Metin bloğu sağa taşmıyor ki ikon için yer kalsın */
.hd-cta__yazi{max-width:56ch}
.hd-cta__butonlar{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hd-cta__butonlar .btn--hat{border-color:rgba(255,255,255,.38);color:#fff}
.hd-cta__butonlar .btn--hat:hover{border-color:#fff;background:rgba(255,255,255,.1)}

/* ── Galeri — filtre sekmeleri + dört sütunlu ızgara ─────────────────── */
.galeri-filtre{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:34px}
.galeri-filtre button{padding:10px 20px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:transparent;color:var(--fg-2);
  font:inherit;font-size:.9rem;cursor:pointer;
  transition:border-color var(--dur) var(--ease),background-color var(--dur) var(--ease),
             color var(--dur) var(--ease)}
.galeri-filtre button:hover{border-color:var(--line-2);color:var(--fg)}
.galeri-filtre button[aria-selected="true"]{background:var(--navy);border-color:var(--navy);color:#fff}

/* Kareler: çerçeve yok, hover'da kenar çizgisi ya da gölge oluşmuyor.
   Tek geri bildirim çok hafif bir parlaklık — tıklanabilir olduğu belli olsun. */
.galeri-agi{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
@media(min-width:700px){  .galeri-agi{grid-template-columns:repeat(3,1fr)} }
@media(min-width:1000px){ .galeri-agi{grid-template-columns:repeat(4,1fr);gap:14px} }
.galeri-kare{display:block;padding:0;border:0;background:var(--surface);
  border-radius:var(--r-2);overflow:hidden;cursor:zoom-in;line-height:0}
.galeri-kare img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block;
  transition:opacity var(--dur) var(--ease)}
.galeri-kare:hover img{opacity:.88}
.galeri-kare:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.galeri-kare[hidden]{display:none}
.galeri-bos{margin-top:24px;font-size:.98rem;color:var(--fg-2)}

/* ── Lightbox ─────────────────────────────────────────────────────────── */
.lightbox{position:fixed;inset:0;z-index:90;display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;
  padding:clamp(16px,4vw,48px);background:rgba(6,4,26,.94)}
.lightbox[hidden]{display:none}
/* Perde %94 opak; canlı renkli kenar butonları arkasından sızıyordu — açıkken gizle */
body.lightbox-acik .yapiskan-cta,
body.lightbox-acik .kenar-dugme,
body.lightbox-acik .bar{opacity:0;pointer-events:none}
.lightbox__ic{margin:0;min-width:0;display:flex;flex-direction:column;
  align-items:center;gap:14px}
.lightbox__ic img{max-width:100%;max-height:78vh;width:auto;height:auto;
  border-radius:var(--r-2);display:block}
.lightbox__ic figcaption{font-size:.92rem;color:rgba(255,255,255,.72);text-align:center}
.lightbox__kapat{position:absolute;top:clamp(12px,3vw,28px);right:clamp(12px,3vw,28px);
  display:grid;place-items:center;width:46px;height:46px;border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.24);background:transparent;color:#fff;cursor:pointer;
  transition:background-color var(--dur) var(--ease)}
.lightbox__kapat:hover{background:rgba(255,255,255,.12)}
.lightbox__kapat svg{width:22px;height:22px}
.lightbox__ok{display:grid;place-items:center;width:52px;height:52px;flex:none;
  border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.24);
  background:transparent;color:#fff;cursor:pointer;
  transition:background-color var(--dur) var(--ease)}
.lightbox__ok:hover{background:rgba(255,255,255,.12)}
.lightbox__ok svg{width:24px;height:24px}
@media(max-width:599px){
  .lightbox{grid-template-columns:1fr;grid-template-areas:'ic';gap:0}
  .lightbox__ic{grid-area:ic}
  .lightbox__ok{position:absolute;bottom:26px;width:46px;height:46px}
  .lightbox__ok--geri{left:26px}
  .lightbox__ok--ileri{right:26px}
}

/* ── Blog listesi — alt alta satırlar, çerçeve yok ───────────────────── */
/* Kart kutusu yerine hairline ayraçlı liste: solda görsel, sağda metin.
   Ferah dursun diye satır arası bol, ayırıcı tek bir ince çizgi. */
.blog-liste{max-width:960px;border-top:1px solid var(--line)}
.blog-satir{margin:0;border-bottom:1px solid var(--line)}
.blog-satir__baglanti{display:grid;gap:22px;padding:28px 0;align-items:center}
@media(min-width:640px){
  .blog-satir__baglanti{grid-template-columns:260px minmax(0,1fr);gap:34px;padding:32px 0}
}
.blog-satir__gorsel{display:block;overflow:hidden;border-radius:var(--r-2);
  background:var(--surface)}
/* height:auto şart — <img height="600"> özniteliği aspect-ratio'yu eziyor */
.blog-satir__gorsel img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block;
  transition:transform .6s var(--ease)}
.blog-satir__baglanti:hover .blog-satir__gorsel img{transform:scale(1.04)}
.blog-satir__ic{display:block;min-width:0}
.blog-satir__ust{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-size:.8rem;color:var(--fg-3)}
.blog-satir__ic b{display:block;margin-top:10px;font-size:clamp(1.16rem,1.7vw,1.42rem);
  font-weight:400;letter-spacing:-.02em;line-height:1.28;
  transition:color var(--dur) var(--ease)}
.blog-satir__ozet{display:block;margin-top:10px;font-size:.96rem;line-height:1.6;
  color:var(--fg-2);max-width:60ch}
.blog-satir__ok{display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  font-size:.88rem;color:var(--fg-2);transition:color var(--dur) var(--ease)}
.blog-satir__ok em{font-style:normal;color:var(--gold);
  transition:transform var(--dur) var(--ease)}
.blog-satir__baglanti:hover .blog-satir__ok{color:var(--fg)}
.blog-satir__baglanti:hover .blog-satir__ok em{transform:translateX(4px)}

/* ── Blog detay — %70 içerik / %30 yapışkan kenar sütunu ─────────────── */
.yazi-bas{padding:150px 0 64px}
@media(max-width:699px){ .yazi-bas{padding:124px 0 44px} }
/* Başlık ve kapak yan yana; kapak koyu alanın boş sağ tarafını dolduruyor */
.yazi-bas__ic{display:grid;gap:32px;align-items:center}
@media(min-width:900px){
  .yazi-bas__ic{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px}
}
.yazi-bas__geri{display:inline-flex;align-items:center;gap:8px;margin-bottom:20px;
  font-size:.86rem;color:rgba(255,255,255,.72);
  transition:color var(--dur) var(--ease)}
.yazi-bas__geri:hover{color:#fff}
.yazi-bas__geri em{font-style:normal;color:var(--gold)}
.yazi-bas h1{font-size:clamp(1.8rem,3.2vw,2.6rem);font-weight:400;
  letter-spacing:-.028em;line-height:1.14}
.yazi-bas__ust{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:18px;
  font-size:.88rem;color:rgba(255,255,255,.62)}

/* İki sütunlu gövdenin ölçüsü buradan sınırlanıyor; böylece %70 sütun okunur
   satır uzunluğunda kalıyor ve metinle kenar sütunu arasında boş şerit olmuyor. */
.yazi-duzen{max-width:1080px;margin-inline:auto}

/* Kapak — koyu başlık alanının sağında */
.yazi-kapak{margin:0;border-radius:var(--r-3);overflow:hidden;
  background:rgba(255,255,255,.06)}
.yazi-kapak img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;display:block}
@media(max-width:899px){ .yazi-kapak img{aspect-ratio:16/9} }

.yazi-duzen{display:grid;gap:44px}
@media(min-width:1000px){
  /* 70 / 30 — kenar sütunu sayfa kaydıkça aşağı iniyor (yapışkan).
     align-items:start yalnızca içerik sütununa uygulanıyor: aside satır
     yüksekliğine uzamazsa içindeki sticky öğenin gezinecek yeri kalmıyor
     ve hiç hareket etmiyor. */
  .yazi-duzen{grid-template-columns:minmax(0,7fr) minmax(0,3fr);gap:54px}
  .yazi-govde{align-self:start}
  .yazi-yan{align-self:stretch}
  .yazi-yan__ic{position:sticky;top:104px}
}

/* Gövde tipografisi — config'ten gelen sınırlı HTML'e uygulanıyor */
.yazi-govde{font-size:1.06rem;line-height:1.78;color:var(--fg-2)}
.yazi-govde > * + *{margin-top:20px}
.yazi-govde h2{margin-top:42px;font-size:clamp(1.35rem,2.2vw,1.7rem);font-weight:400;
  letter-spacing:-.022em;line-height:1.24;color:var(--fg)}
.yazi-govde h3{margin-top:32px;font-size:1.12rem;font-weight:500;
  letter-spacing:-.012em;color:var(--fg)}
.yazi-govde strong{font-weight:500;color:var(--fg)}
.yazi-govde ul{padding-left:0;list-style:none}
.yazi-govde li{position:relative;padding-left:26px}
.yazi-govde li + li{margin-top:10px}
.yazi-govde li::before{content:"";position:absolute;left:2px;top:.72em;
  width:9px;height:1.5px;background:var(--gold)}

/* Kenar sütunu */
.yan-kutu{padding:26px;border-radius:var(--r-3);
  background:linear-gradient(158deg,var(--navy) 0%,var(--navy-2) 100%);color:#fff}
.yan-kutu h2{font-size:1.24rem;font-weight:400;letter-spacing:-.02em}
.yan-kutu p{margin-top:10px;font-size:.94rem;line-height:1.6;color:rgba(255,255,255,.74)}
.yan-kutu__butonlar{display:grid;gap:10px;margin-top:20px}
.yan-kutu__butonlar .btn{width:100%}
.yan-kutu .btn--lacivert{background:#fff;color:var(--navy)}
.yan-kutu .btn--lacivert:hover{background:rgba(255,255,255,.88)}
.yan-kutu .btn--hat{border-color:rgba(255,255,255,.38);color:#fff}
.yan-kutu .btn--hat:hover{border-color:#fff;background:rgba(255,255,255,.1)}

.yan-liste{margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
.yan-liste__bas{display:block;font-size:.76rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg-3)}
.yan-liste a{display:block;margin-top:14px;font-size:.96rem;line-height:1.45;
  color:var(--fg-2);transition:color var(--dur) var(--ease)}
.yan-liste a:hover{color:var(--fg)}

/* ── Düz sayfa formu — İK başvurusu, geri bildirim ───────────────────── */
/* %50 / %50: solda başlık ve açıklama, sağda form. Başlık sütunu yapışkan,
   uzun formda ekranda kalıyor. */
.form-agi{display:grid;gap:36px}
@media(min-width:900px){
  .form-agi{grid-template-columns:1fr 1fr;gap:64px;align-items:start}
  .form-bas{position:sticky;top:112px}
}
.form-bas h2{font-size:clamp(1.5rem,2.4vw,2rem);font-weight:400;letter-spacing:-.025em;line-height:1.16}
.form-bas p{margin-top:12px;font-size:1rem;line-height:1.6;color:var(--fg-2);max-width:42ch}
.form-kap{min-width:0}
.duz-form{display:grid;gap:16px}
.duz-form .btn{margin-top:6px;width:100%}
.duz-form .alan > span{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
.duz-form textarea{min-height:110px;resize:vertical}

/* İsteğe bağlı alanları ayıran hairline başlık */
.form-ayrac{display:flex;align-items:center;gap:14px;margin-top:10px;
  font-size:.82rem;color:var(--fg-3)}
.form-ayrac::after{content:"";flex:1;height:1px;background:var(--line)}
.form-ayrac em{font-style:normal;opacity:.75}

/* Dosya alanı — native girdi JS varken gizleniyor, tetik butonu görünüyor */
.alan--dosya{display:grid;gap:7px}
.alan__etiket{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
.alan__ipucu{font-size:.82rem;color:var(--fg-3)}
.alan--dosya-js input[type="file"]{position:absolute;width:1px;height:1px;padding:0;
  margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}
.dosya-dugme{display:none;align-items:center;gap:12px;padding:14px 16px;
  border:1px dashed var(--line-2);border-radius:var(--r-2);cursor:pointer;
  color:var(--fg-2);font-size:.97rem;
  transition:border-color var(--dur) var(--ease),background-color var(--dur) var(--ease)}
.alan--dosya-js .dosya-dugme{display:flex}
.dosya-dugme:hover{border-color:var(--fg);background:var(--surface)}
.dosya-dugme svg{flex:none;width:20px;height:20px;color:var(--fg-3)}
.dosya-dugme b{font-weight:400;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.alan--dosya[data-dolu="true"] .dosya-dugme{border-style:solid;border-color:var(--fg)}
.alan--dosya[data-dolu="true"] .dosya-dugme b{font-weight:500;color:var(--fg)}
.alan--dosya[data-dolu="true"] .dosya-dugme svg{color:var(--fg)}
.alan--dosya-js input[type="file"][aria-invalid="true"] + .dosya-dugme{border-color:#b3261e}

.form-uyari{font-size:.9rem;line-height:1.5;color:#b3261e}

/* Gönderim sonrası teşekkür bloğu */
.form-tesekkur{padding:8px 0 34px}
.form-tesekkur svg{width:44px;height:44px;color:var(--gold)}
.form-tesekkur h3{margin-top:16px;font-size:1.4rem;font-weight:400;letter-spacing:-.02em}
.form-tesekkur p{margin-top:10px;font-size:1rem;line-height:1.6;color:var(--fg-2)}

/* İç sayfa metin gövdesi — İK, Blog gibi sade sayfalar */
.sayfa-metin{max-width:680px}
.sayfa-metin p{font-size:1.06rem;line-height:1.7;color:var(--fg-2)}
.sayfa-metin p + p{margin-top:18px}
.sayfa-butonlar{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

/* ── İletişim — solda bilgi+saatler, sağda form; altta harita ─────────── */
.iletisim-agi{display:grid;gap:26px}
@media(min-width:900px){ .iletisim-agi{grid-template-columns:1fr 1.05fr;gap:48px;align-items:start} }
.iletisim-kanallar{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:520px){ .iletisim-kanallar{grid-template-columns:repeat(2,1fr)} }
.iletisim-kart{display:flex;flex-direction:column;gap:9px;padding:22px;
  border:1px solid var(--line);border-radius:var(--r-3);background:#fff;
  transition:border-color .3s var(--ease)}
.iletisim-kart:hover,.iletisim-kart:focus-visible{border-color:var(--fg)}
.iletisim-kart svg{width:24px;height:24px;color:var(--navy);margin-bottom:6px}
.iletisim-kart b{font-weight:500;font-size:1.02rem}
.iletisim-kart span{color:var(--fg-2);font-size:.94rem;line-height:1.5}

/* Çalışma saatleri — minimal: bilgilerin altında ince satırlar, kutu yok */
.iletisim-saat{margin-top:22px;display:grid}
.iletisim-saat > div{display:flex;justify-content:space-between;gap:16px;
  padding:11px 2px;border-bottom:1px solid var(--line)}
.iletisim-saat > div:first-child{border-top:1px solid var(--line)}
.iletisim-saat dt{color:var(--fg-2);font-size:.92rem}
.iletisim-saat dd{font-size:.92rem;color:var(--fg)}

/* İletişim formu */
.iletisim-form-bas h2{font-size:clamp(1.5rem,2.4vw,2rem);font-weight:400;letter-spacing:-.02em}
.iletisim-form-bas p{margin-top:10px;font-size:.99rem;line-height:1.55;color:var(--fg-2);max-width:44ch}
.iletisim-form{display:grid;gap:16px;margin-top:24px}
.alan-ikili{display:grid;gap:16px}
@media(min-width:480px){ .alan-ikili{grid-template-columns:1fr 1fr} }
.alan > span em{font-style:normal;text-transform:none;letter-spacing:0;color:var(--fg-3);opacity:.8}
.alan textarea{width:100%;padding:14px 16px;font:inherit;font-size:.99rem;color:var(--fg);
  background:#fff;border:1px solid var(--line-2);border-radius:var(--r-2);resize:vertical;min-height:112px;
  transition:border-color var(--dur) var(--ease)}
.alan textarea::placeholder{color:var(--fg-3)}
.alan textarea:focus{outline:none;border-color:rgba(9,5,41,.34)}
.iletisim-form .btn{width:100%;margin-top:4px}
.iletisim-form__uyari{font-size:.9rem;color:#b3261e;margin-top:-4px}
.iletisim-form__tesekkur{display:none;flex-direction:column;align-items:flex-start;gap:12px;
  padding:34px 30px;border:1px solid var(--line);border-radius:var(--r-3);background:var(--surface);margin-top:24px}
.iletisim-form__tesekkur[hidden]{display:none}
.iletisim-form__tesekkur:not([hidden]){display:flex}
.iletisim-form__tesekkur svg{width:34px;height:34px;color:var(--navy)}
.iletisim-form__tesekkur h3{font-size:1.2rem;font-weight:500}
.iletisim-form__tesekkur p{font-size:.97rem;line-height:1.55;color:var(--fg-2)}

.iletisim-harita{margin:44px 0 0;overflow:hidden;border-radius:var(--r-3);
  border:1px solid var(--line);line-height:0}
.iletisim-harita iframe{width:100%;height:440px;border:0;display:block}
@media(max-width:560px){ .iletisim-harita iframe{height:340px} }

/* ── Popup ─────────────────────────────────────────────────────────── */
.basvuru-perde{position:fixed;inset:0;z-index:90;background:rgba(9,5,41,.62);
  opacity:0;transition:opacity .3s var(--ease)}
.basvuru-perde[data-acik="1"]{opacity:1}

/* [hidden] UA kuralını display:grid eziyordu: kapalı popup görünmezken
   sayfanın ortasını örtüyor, hizmet/adım satırlarının hover'ını yutuyordu. */
.basvuru[hidden],.basvuru-perde[hidden]{display:none}

.basvuru{position:fixed;z-index:95;left:50%;top:50%;
  width:min(940px,calc(100vw - 32px));max-height:calc(100svh - 32px);
  transform:translate(-50%,-50%) scale(.97);opacity:0;
  display:grid;grid-template-columns:1fr;
  border-radius:var(--r-3);overflow:hidden;background:#fff;
  box-shadow:0 40px 120px rgba(9,5,41,.4);
  transition:opacity .32s var(--ease),transform .32s var(--ease)}
.basvuru[data-acik="1"]{opacity:1;transform:translate(-50%,-50%) scale(1)}
@media(min-width:820px){ .basvuru{grid-template-columns:.82fr 1fr} }

.basvuru__gorsel{position:relative;display:none;background:var(--navy)}
@media(min-width:820px){ .basvuru__gorsel{display:block} }
.basvuru__gorsel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.basvuru__marka{position:absolute;inset:auto 0 0 0;z-index:2;padding:40px 28px 26px;
  background:linear-gradient(180deg,rgba(9,5,41,0),rgba(9,5,41,.86))}
.basvuru__marka img{position:static;width:auto;height:20px}
/* Logonun altındaki tek satır. Altın değil beyaz: altın "yalnızca nadir
   vurgu" kuralına bağlı ve logonun hemen altında ikinci bir renk
   markayı bölüyordu. Ayrım harf aralığı ve puntoyla kuruluyor. */
.basvuru__marka small{display:block;margin-top:10px;max-width:26ch;
  font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  line-height:1.6;color:rgba(255,255,255,.82)}

.basvuru__panel{position:relative;padding:34px 34px 32px;overflow-y:auto}
@media(max-width:599px){ .basvuru__panel{padding:26px 22px 24px} }

.basvuru__kapat{position:absolute;top:16px;right:16px;z-index:3;
  display:grid;place-items:center;width:38px;height:38px;border-radius:var(--r-pill);
  color:var(--fg-2);transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.basvuru__kapat:hover{background:var(--surface);color:var(--fg)}
.basvuru__kapat svg{width:19px;height:19px}

/* Sekmeler panelin içinde, formun üstünde — dışarıda gezinen etiket yok */
.basvuru__sekme{display:inline-flex;gap:2px;padding:3px;margin-bottom:24px;
  border-radius:var(--r-pill);background:var(--surface)}
.basvuru__sekme button{padding:9px 18px;border-radius:var(--r-pill);
  font-size:.87rem;font-weight:500;color:var(--fg-2);
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.basvuru__sekme button[aria-selected="true"]{background:var(--navy);color:#fff}

.basvuru__bas h2{font-size:clamp(1.5rem,2.6vw,1.95rem);font-weight:400;
  letter-spacing:-.025em;color:var(--fg)}
.basvuru__bas p{margin-top:10px;font-size:.98rem;color:var(--fg-2);max-width:42ch}

.basvuru__form{display:grid;gap:16px;margin-top:26px}
/* SİTE STANDARDI — form alan başlıkları alanın DIŞINDA görünmez; bilgi
   alanın İÇİNDE placeholder olarak durur. Etiketler ekran okuyucu ve özel
   açılır listenin aria-label'ı için DOM'da kalır. Yeni form yazarken
   <label class="alan"><span>Başlık</span><input placeholder="Başlık"> kalıbı
   korunduğu sürece bu kural kendiliğinden uygulanır. */
.alan > span:not(.alan__ipucu){position:absolute;width:1px;height:1px;padding:0;
  margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.alan{display:grid;gap:7px}
.alan > span{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
.alan input,.alan select{width:100%;padding:14px 16px;font:inherit;font-size:.99rem;
  color:var(--fg);background:#fff;
  border:1px solid var(--line-2);border-radius:var(--r-2);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.alan input::placeholder{color:var(--fg-3)}
.alan input:focus,.alan select:focus{outline:none;border-color:rgba(9,5,41,.34);
  box-shadow:none}
.alan input[aria-invalid="true"],.alan select[aria-invalid="true"]{border-color:#b3261e}

/* Özel açılır liste — native <select> menüsü işletim sisteminin (macOS'ta gri)
   olduğu için CSS'i yok sayıyordu. JS varsa native gizlenip bu beyaz zeminli,
   lacivert yazılı liste gösteriliyor; JS yoksa native select çalışmaya devam eder. */
.secim{position:relative}
.secim--js .secim__native{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);border:0}   /* gizli ama formda gönderilir */
.secim__dugme{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;font:inherit;font-size:.99rem;color:var(--fg);background:#fff;
  border:1px solid var(--line-2);border-radius:var(--r-2);cursor:pointer;text-align:left;
  transition:border-color var(--dur) var(--ease)}
.secim__dugme:focus-visible{outline:none;border-color:rgba(9,5,41,.34)}
.secim[data-acildi="true"] .secim__dugme{border-color:rgba(9,5,41,.34)}
.secim__deger--bos{color:var(--fg-3)}
.secim__dugme svg{width:18px;height:18px;color:var(--fg-3);flex:none;
  transition:transform .25s var(--ease)}
.secim[data-acildi="true"] .secim__dugme svg{transform:rotate(180deg)}
.secim__liste{position:absolute;z-index:20;top:calc(100% + 6px);left:0;right:0;
  margin:0;padding:6px;list-style:none;
  background:#fff;color:var(--navy);
  border:1px solid var(--line);border-radius:var(--r-2);
  box-shadow:0 16px 40px rgba(9,5,41,.14);
  max-height:288px;overflow-y:auto}
/* Aşağıda yer yoksa yukarı açılıyor — yönü ve yüksekliği JS yazıyor
   (popup overflow:hidden olduğu için liste alttan kesiliyordu). */
.secim[data-yon="yukari"] .secim__liste{top:auto;bottom:calc(100% + 6px)}
.secim__liste[hidden]{display:none}
.secim__sec{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 14px;border-radius:8px;font-size:.97rem;line-height:1.3;
  color:var(--navy);cursor:pointer}
.secim__sec:hover,.secim__sec[data-odak="true"]{background:rgba(9,5,41,.06)}
.secim__sec[aria-selected="true"]{font-weight:500}
.secim__sec[aria-selected="true"]::after{content:"";width:16px;height:16px;flex:none;
  background:no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23090529' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.secim__sec:not([aria-selected="true"])::after{content:"";width:16px;flex:none}

.onay{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;
  font-size:.88rem;line-height:1.5;color:var(--fg-2);cursor:pointer}
.onay input{width:19px;height:19px;margin-top:1px;accent-color:var(--navy)}

.basvuru__form .btn{margin-top:6px;width:100%}

/* Honeypot — ekran dışında; display:none yapılmıyor ki botlar doldursun */
.alan--sirket{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* KVKK onayındaki metin bağlantısı */
.onay a{text-decoration:underline;text-underline-offset:3px;color:var(--fg)}
.onay a:hover{color:var(--navy)}

/* Başarılı gönderim bloğu */
.basvuru__tesekkur{display:grid;justify-items:start;gap:14px;padding:26px 0 8px}
.basvuru__tesekkur[hidden]{display:none}
.basvuru__tesekkur svg{width:44px;height:44px;color:var(--navy)}
.basvuru__tesekkur h3{font-size:1.4rem;font-weight:500;letter-spacing:-.02em;color:var(--fg)}
.basvuru__tesekkur p{font-size:.98rem;line-height:1.6;color:var(--fg-2);max-width:40ch}
.basvuru__tesekkur .btn{margin-top:8px}
.basvuru__uyari{margin-top:2px;font-size:.87rem;color:#b3261e}

/* Küçük ekranda tam yükseklik sayfa gibi açılıyor */
@media(max-width:599px){
  .basvuru{width:100vw;max-height:100svh;height:100svh;top:0;left:0;
    transform:translateY(14px);border-radius:0}
  .basvuru[data-acik="1"]{transform:none}
}