/* ============================================================
   BOSPHORUS LAW FIRM — production design system
   Palet logodan: navy #0C1A34 · celik mavisi #2477A7 · gri #ABACAC
   Home = pinned scroll story; sub-pages = classical editorial
   ============================================================ */

:root{
  /* Notr olcek de logodan: logonun en acik tonu #DEDEDE, notr-soguk bir
     gri. Onceki krem (#FBF8F1) sicakti ve logoda karsiligi yoktu.
     Yeni zemin ayni gri ailesinden, vurgu mavisine dogru cok hafif
     egimli — govde metni 14.07:1, vurgu metni 4.57:1, form kenarligi
     3.27:1; hepsi eski krem degerleriyle ayni bantta. */
  --paper:#F4F7F9; --paper-2:#E8EEF3; --line:#DCE4EC; --line-strong:#4E8FBB;
  --navy:#14273D; --navy-deep:#0C1A34; --navy-soft:#4A5D72;
  /* Vurgu ailesi logodan turetildi. Logo lacivert + celik mavisi + gri;
     altin logoda hic yok, o yuzden altin palet kaldirildi.
     --accent koyu zeminde ve acik vurgu blogu (buton) olarak kullanilir:
     lacivert uzerinde 6.70:1, uzerine lacivert yazi da 6.70:1. */
  --accent:#7FB3D3; --accent-soft:#A7CBE2;
  /* acik zeminde okunacak mavi: logonun kendi tonu, krem ustunde 4.63:1.
     --accent acik zeminde METIN olarak kullanilamaz (krem ustunde 2.26:1). */
  --accent-ink:#2477A7;
  /* logonun ic karesindeki gri; koyu zeminde 7.61:1 */
  --stone:#ABACAC;
  /* koyu zeminde ikincil metin ve govde metni: alti ve iki yerde
     dogrudan hex olarak geciyordu, tona dokunmak imkansizdi */
  --mist:#9DB0C2; --ink-2:#2C4157;
  --lh-display:1.08; --lh-title:1.2; --lh-sub:1.32;
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Source Sans 3",system-ui,sans-serif;
  /* Ikinci yuzey. Site bastan sona tek zemin (--paper) uzerinde akiyordu;
     kart/levha ayrimi olmayinca her sayfa ayni duzlemde duruyor ve "duz"
     goruluyordu. Yeni renk DEGIL — zaten 17 yerde ham #fff olarak geciyordu,
     artik jetonu var. */
  --card:#fff;
  /* Acik zeminde 4.5:1 tutmayan yerler icin ayni celik mavisi ailesinden bir
     kademe koyu ton: --accent-ink #2477A7 paper-2 uzerinde 4.20:1 kaliyordu
     (.a-tablo baslik bandi) ve .chat-ft'te 1.93:1'e dusuyordu. #1F6690
     paper-2 uzerinde 5.34:1, beyaz uzerinde 6.25:1. */
  --accent-ink-2:#1F6690;
  /* Serif alt baslik olcusu. Cormorant'in x-yuksekligi 0,385em, Source Sans'in
     0,485em — %26 fark. Ayni puntoda serif belirgin kucuk gorunur ve 11 serif
     bilesenin 10'unda x-yuksekligi GOVDE METNININ ALTINDA kaliyordu: baslik
     kendi aciklamasindan kucuk basiliyordu, hiyerarsi optik olarak yoktu.
     Bu iki jeton telafiyi sisteme yaziyor. */
  --fs-lead:1.55rem; --fs-lead-sm:1.42rem;
  /* Yuzen dugme yiginin sayfa dibinde kapladigi yer. Rezerv artik body'de
     degil altbilgide: acik renkli body dolgusu lacivert altbilginin altinda
     88px'lik acik serit birakiyordu ve >760px'te rezerv hic yoktu (834px'te
     TBB sorumluluk uyarisi 164px ortuluyordu). */
  --fab-pay:7.8rem;
  /* Dijital duzlugu kiran cok ince tanecik. Tek bir SVG data-URI, harici
     istek yok (sifir ucuncu taraf kurali korunuyor), ~700 bayt.
     Yalniz koyu yuzeylerde ve %5'in altinda opaklikla kullanilir. */
  --grain:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.62" numOctaves="3" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/></filter><rect width="160" height="160" filter="url(%23n)" opacity="0.055"/></svg>');
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
/* .rv-r'nin translateX(44px) baslangic hali dar ekranda belgeyi viewport'tan
   genis yapiyordu: mobil tarayici sayfayi kucultup sigdiriyor (390 istenen
   ekranda 414 CSS px), sabit ogeler kenardan tasiyordu; Arapcada tasma sola
   dustugu icin sayfa 24px kayik goruluyordu. clip, hidden'in aksine kaydirma
   kabi yaratmaz — .prax-left'in position:sticky davranisi bozulmaz. */
html{overflow-x:clip}
body{margin:0;font-family:var(--sans);color:var(--navy);background:var(--paper);line-height:1.7;font-size:1.08rem;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block}
/* Almanca/Felemenkce bilesik adlar (Staatsburgerschaftsrecht,
   Ondernemingsrecht) dar ekranda satira sigmiyor — kirilmadan tasiyorlar */
h1,h2,h3,.ch .h,blockquote{overflow-wrap:break-word}
b,strong{font-weight:600}  /* 700 is not loaded — avoids synthetic bold */
a{text-decoration:none;color:var(--navy)}
/* odak halkasi altin uzerindeydi: krem zeminde 2.71:1 ile WCAG 1.4.11
   esigini (3:1) gecmiyordu — lacivert cift halka her zeminde okunuyor */
:focus-visible{outline:2px solid var(--navy);outline-offset:2px;
  box-shadow:0 0 0 4px var(--accent-soft)}
.skip{position:absolute;inset-inline-start:1rem;top:-4rem;z-index:100;
  background:var(--accent);color:var(--navy);font-weight:600;font-size:.9rem;
  padding:.7rem 1.2rem;transition:top .2s}
.skip:focus{top:1rem}

[id]{scroll-margin-top:90px}
.wrap{max-width:1140px;margin-inline:auto;padding-inline:clamp(1.2rem,4vw,2.4rem)}
.smallcaps{font-size:.8rem;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--accent-ink)}
/* koyu bilesenlerde vurgu metni: --accent-ink lacivert uzerinde 2.98:1 ile
   geri gider; orada acik ton dogru olan (--accent-soft, 8.85:1) */
.cta-final .smallcaps,.band .smallcaps,.quote .smallcaps,
.phero .smallcaps,.ch .smallcaps,footer.site .smallcaps,
.trust .smallcaps{color:var(--accent-soft)}
.orn{display:flex;align-items:center;justify-content:center;gap:.7rem;margin:.9rem 0}
.orn::before,.orn::after{content:"";height:1px;width:4.5rem;background:var(--accent-soft)}
.orn i{width:.4rem;height:.4rem;background:var(--accent);transform:rotate(45deg)}

/* ============================================================
   HEADER — KÜNYE (iki kat)
   1. kat .util : künye şeridi — adres · telefon · Ödeme. Kaydırınca kapanır.
   2. kat .hd   : asıl gezinti — logo · 6 madde · dil · WhatsApp. HİÇ kapanmaz.
   Kaydırma davranışı YÖN-DUYARLI DEĞİL: yalnız iki hal var (tepe / kaydırılmış),
   bu yüzden titremiyor ve öğrenilmesi gereken bir davranış yok.
   Yükseklik 90px -> kaydırılmışta 50px (bugün 76 -> 60).
   ============================================================ */

header.site{
  position:fixed;inset-inline:0;top:0;z-index:80;color:#fff;
  --util-h:34px; --hd-h:56px; --logo-h:38px;
  /* menü tipografisi akışkan: 1021px'te .80rem, 1400+'ta .90rem.
     Duz vw degil, clamp(min, Xrem + Yvw, max) — sistemin kurali. */
  --nav-fs:clamp(.80rem, .55rem + .38vw, .90rem);
  --nav-gap:clamp(.85rem, .2rem + .90vw, 1.5rem);
  transition:background .3s,box-shadow .3s;
}

/* LEVHA. Eski perde (.62 -> .30 -> seffaf) menu hizasinda ~.47 alfaya
   dusuyordu: gun batimi hero'sunun en parlak 16px yamasinda (rgb 242,197,164
   / L=0.6149) rgba(255,255,255,.85) menu metni 3.68:1 kaliyordu — WCAG 1.4.3
   BUGUN GECMIYOR. Iki satirli bir baslikta yukaridan acilan gradyan zaten
   ise yaramaz, cunku ikinci satir perdenin zayif ucuna duser. Levha ters
   yonde: tepe .86 (kucuk puntolu kunye satiri orada) -> baslik dibinde .74,
   sonra 34px'lik kuyrukta sifira. Fotograf altta bozulmadan devam ediyor. */
header.site::before{
  content:"";position:absolute;inset-inline:0;top:0;
  height:calc(100% + 34px);pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(12,26,52,.86) 0,
    rgba(12,26,52,.74) calc(100% - 34px),
    rgba(12,26,52,0)   100%);
  transition:opacity .3s}
header.site.scrolled::before{opacity:0}
header.site.scrolled{
  background:rgba(12,26,52,.94);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(127,179,211,.25)}

/* koyu zeminde lacivert odak halkasi GORUNMEZ (#14273D / #0C1A34 = 1.14:1).
   Genel kural acik zeminde dogru; burada koyu yuzeye kapsamli bir istisna. */
header.site :focus-visible,.drawer :focus-visible{
  outline:2px solid #fff;outline-offset:2px;
  box-shadow:0 0 0 4px var(--navy-deep)}

/* ---------- 1. kat: künye şeridi ---------- */
/* overflow:hidden burada DOGRU ve sart (yukseklik animasyonu icin).
   Sistemin "hidden yerine clip" kurali position:sticky iceren kaplar icin;
   bu serit sabit yukseklikte ve icinde sticky/acilir hicbir sey YOK.
   Dil paneli bilerek .hd'nin icinde — kirpilma riski sifir. */
.util{position:relative;z-index:1;height:var(--util-h);overflow:hidden;
  transition:height .28s ease,opacity .22s ease}
header.site.scrolled .util{height:0;opacity:0}
.util-in{display:flex;align-items:center;justify-content:space-between;
  gap:1rem;height:var(--util-h)}
.u-l,.u-r{display:flex;align-items:center;gap:.55rem;min-width:0}
.u-place{font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--stone);white-space:nowrap}                 /* 5.29:1 */
/* ayrac, sistemin kendi susu (.orn i) — baslik icin uydurulmus bir motif degil */
.u-dot{width:.34rem;height:.34rem;background:var(--accent);transform:rotate(45deg);flex:0 0 auto}
.util a{display:inline-flex;align-items:center;min-height:28px;padding-inline:.28rem;
  color:var(--accent-soft);white-space:nowrap;transition:color .2s}   /* 7.04:1 */
.util a:hover{color:#fff}
.u-tel{font-size:.76rem;font-weight:600;letter-spacing:.03em;font-variant-numeric:tabular-nums}
.u-pay{font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.util a[aria-current]{color:#fff;box-shadow:inset 0 -2px 0 var(--accent)}

/* ---------- 2. kat: gezinti ---------- */
.hd{position:relative;z-index:2;display:flex;align-items:center;gap:1.25rem;
  min-height:var(--hd-h);
  border-block-start:1px solid rgba(167,203,226,.20);   /* künye kural çizgisi */
  transition:min-height .28s ease,border-color .28s ease}
header.site.scrolled .hd{--hd-h:50px;--logo-h:31px;border-block-start-color:transparent}

.logo{display:block;line-height:0;flex:0 0 auto}
.logo img{display:block;width:auto;height:var(--logo-h);transition:height .28s ease}

/* BUYUK HARF + .16em harf araligindan vazgecildi. Olcum (gercek woff2,
   Source Sans 600): alti maddenin toplam genisligi RU 774 -> 508px,
   DE 756 -> 508, FR 754 -> 512. Kazanc %34 ve hicbir madde saklanmadi.
   Serif denendi ve REDDEDILDI: Cormorant 1.2rem sentence-case RU'da 606px,
   yani mevcut versal sanstan bile genis — is goren sey ikinci satir. */
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:var(--nav-gap);
  margin-inline-start:auto;min-width:0}
.nav a{position:relative;display:inline-flex;align-items:center;min-height:34px;
  font-size:var(--nav-fs);font-weight:600;letter-spacing:.02em;text-transform:none;
  color:#fff;white-space:nowrap;transition:color .2s}          /* 10.22:1 */
.nav a:hover{color:var(--accent-soft)}
.nav a.active{color:var(--accent-soft)}                        /*  5.98:1 */
/* aktif isaret RENKLE SINIRLI DEGIL: sozlesmelerdeki "degisiklik cizgisi" */
.nav a::after{content:"";position:absolute;inset-inline:0;bottom:-.3rem;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:inline-start;
  transition:transform .32s cubic-bezier(.2,.6,.2,1)}
.nav a:hover::after{transform:scaleX(1)}
.nav a.active::after{transform:scaleX(1)}

.hd-end{display:flex;align-items:center;gap:.55rem;flex:0 0 auto;
  margin-inline-start:1.1rem;padding-inline-start:1.1rem;
  border-inline-start:1px solid rgba(167,203,226,.22)}

/* ---------- dil: tek düğme + panel ---------- */
.langsel{position:relative;flex:none}
.langsel:not([open]) .langsel-menu{display:none}
.langsel summary{display:inline-flex;align-items:center;gap:.45rem;cursor:pointer;
  list-style:none;min-height:34px;padding:.3rem .7rem;
  border:1px solid rgba(167,203,226,.75);              /* 4.13:1 (eski .28 = 1.64) */
  color:#fff;font-size:.78rem;font-weight:600;letter-spacing:.04em;
  transition:border-color .25s,color .25s,background .25s}
.langsel summary::-webkit-details-marker{display:none}
.langsel summary::marker{content:""}
.langsel summary:hover,.langsel[open] summary{
  background:rgba(127,179,211,.16);border-color:var(--accent)}
/* karisik yazi: "Deutsch" ve "العربية" ayni dugmede — izolasyon sart */
.lg-nm{unicode-bidi:isolate}
.langsel summary i{width:.42rem;height:.42rem;border-inline-end:1px solid currentColor;
  border-block-end:1px solid currentColor;transform:rotate(45deg) translate(-1px,-1px);
  transition:transform .25s;flex:0 0 auto}
.langsel[open] summary i{transform:rotate(-135deg) translate(-2px,-2px)}

.langsel-menu{position:absolute;inset-block-start:calc(100% + .5rem);inset-inline-end:0;
  min-width:14rem;max-width:calc(100vw - 2.4rem);
  background:var(--navy-deep);border:1px solid rgba(127,179,211,.34);
  box-shadow:0 22px 54px -20px rgba(0,0,0,.6);
  padding:.35rem;z-index:5;display:grid;gap:1px}
.lg-h{margin:0 0 .2rem;padding:.15rem .7rem .4rem;font-size:.62rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--stone);   /* 7.61:1 */
  border-block-end:1px solid rgba(127,179,211,.22)}
.langsel-menu a,.langsel-menu span:not(.nm){display:flex;align-items:center;
  justify-content:space-between;gap:1rem;min-height:40px;padding:.35rem .7rem;
  font-size:.94rem;font-weight:400;letter-spacing:0;text-transform:none;
  color:#fff}                                                        /* 17.31:1 */
.langsel-menu .nm{unicode-bidi:isolate}
.langsel-menu em{font-style:normal;font-size:.66rem;font-weight:600;
  letter-spacing:.12em;color:var(--stone)}                           /*  7.61:1 */
.langsel-menu a:hover{background:rgba(127,179,211,.16)}
.langsel-menu a:hover em{color:var(--accent-soft)}
.langsel-menu .on{background:var(--accent);color:var(--navy)}        /*  6.70:1 */
.langsel-menu .on em{color:var(--navy)}
.langsel-menu .soon{opacity:.5;cursor:default}
/* Arapca ad Latin bir sayfada dogru fontla ciksin (Amiri zaten yuklu) */
.langsel-menu [lang="ar"],.drawer .langs [lang="ar"]{font-family:"IBM Plex Sans Arabic",system-ui,sans-serif}

/* ---------- başlıktaki TEK dolu öge ---------- */
.hd .cta{display:inline-flex;align-items:center;gap:.45rem;min-height:34px;
  padding:.34rem 1rem;font-size:.78rem;font-weight:600;letter-spacing:.08em;
  background:var(--accent);color:var(--navy);border:1px solid var(--accent);
  white-space:nowrap;transition:background .2s,border-color .2s}      /* metin 6.70:1,
                                              yuzey-perde ayrimi 4.52:1 (>=3) */
.hd .cta:hover{background:#fff;border-color:#fff;color:var(--navy-deep)}
.hd .cta svg{flex:0 0 auto}

.burger{display:none;align-items:center;justify-content:center;gap:4px;
  flex-direction:column;width:40px;height:36px;background:none;cursor:pointer;
  border:1px solid var(--accent-soft);color:var(--accent-soft)}       /* 5.98:1 */
.burger span{display:block;width:16px;height:2px;background:currentColor}
.burger:hover{border-color:#fff;color:#fff}

/* ---------- mobil çekmece ---------- */
/* KAYDIRILABILIR: eskiden justify-content:center + overflow yoktu; yatay
   tutulan bir telefonda veya %150 yakinlastirmada maddeler ekrandan tasip
   ERISILEMEZ oluyordu. Batiktaki tek gercek "baglantiya ulasilamiyor" hatasi. */
.drawer{position:fixed;inset:0;background:rgba(12,26,52,.98);z-index:90;
  display:none;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:1.05rem;text-align:center;padding:5.4rem 1.4rem 3rem;
  overflow-y:auto;overscroll-behavior:contain}
.drawer[hidden]{display:none}
.drawer.open{display:flex}
.drawer a{font-family:var(--serif);font-size:1.7rem;line-height:var(--lh-title);color:#fff}
.drawer a:hover{color:var(--accent-soft)}
.drawer a.active{color:var(--accent-soft)}
.d-mark{width:52px;height:auto;opacity:.9;margin-bottom:.4rem}
.drawer .close{position:absolute;top:1.2rem;inset-inline-end:1.4rem;background:none;
  border:none;color:var(--accent-soft);font-size:2rem;cursor:pointer;line-height:1;
  width:44px;height:44px}
.d-act{display:flex;flex-direction:column;align-items:center;gap:.7rem;margin-top:1.4rem}
.drawer .cta{font-family:var(--sans);font-size:.82rem;font-weight:600;letter-spacing:.1em;
  background:var(--accent);color:var(--navy);padding:.75rem 1.6rem;min-height:44px;
  display:inline-flex;align-items:center}
.drawer .cta:hover{background:#fff;color:var(--navy-deep)}
.d-tel{font-family:var(--sans);font-size:.95rem;font-weight:600;letter-spacing:.03em;
  color:var(--accent-soft);min-height:44px;display:inline-flex;align-items:center}
/* diller: iki harfli kod degil tam ad; hedef 44px; aktif isaret cift sinyal */
.drawer .langs{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));
  gap:2px;width:min(23rem,100%);margin-top:1.7rem}
.drawer .langs a,.drawer .langs>span{display:flex;align-items:center;
  justify-content:space-between;gap:.7rem;min-height:44px;padding:.4rem .8rem;
  font-family:var(--sans);font-size:.95rem;font-weight:400;letter-spacing:0;
  color:rgba(255,255,255,.9)}                                        /* 13.68:1 */
.drawer .langs .nm{unicode-bidi:isolate}
.drawer .langs em{font-style:normal;font-size:.66rem;font-weight:600;
  letter-spacing:.12em;color:var(--stone)}
.drawer .langs .on{background:var(--accent);color:var(--navy)}
.drawer .langs .on em{color:var(--navy)}
.drawer .langs .soon{opacity:.5;cursor:default}

@media(prefers-reduced-motion:reduce){
  .util,.hd,.logo img,.nav a::after{transition:none}
}

/* ---------- home: hero ----------
   Burasi 2026-08-12'ye kadar 320vh'lik sabitlenmis bir "hikaye"ydi: uc metin
   paneli kaydirma ilerlemesine gore birbirine devrediyordu. Pencereler bosluk
   kalmasin diye kasitli olarak cakisiyordu (JS'te W dizisi) — sonuc olarak
   gecis anlarinda iki metin ayni anda yari saydam duruyor, harfler ust uste
   biniyordu; hero kaydirmasinin ~%40'i hicbir metnin okunmadigi bir araliktı.
   Musteri "ic ice giriyor" dedi, hakliydi. Artik tek ekranlik sabit hero:
   video uzerinde tek metin, sayfa normal akiyor. Ikinci panelin icerigi
   zaten asagidaki Calisma Alanlari bolumunde vardi; ucuncusu .band olarak
   Calisma Alanlari'nin altina indi. */
.story{position:relative;z-index:0;isolation:isolate;background:var(--navy-deep)}
/* Fon yapiskan, uc metin blogu onun uzerinden geciyor. Ust uste binmeyi
   negatif margin kuruyor ama bunu FONDA degil ilk panelde yapmak sart:
   margin-block-end:-100svh yapiskan ogenin margin kutusunu kisaltiyor ve
   oge, kapsayicisinin 100svh disina kadar yolculuk edebiliyor — fon hikaye
   bittikten sonra da ekranda kalip Calisma Alanlari bolumunun ustune
   biniyordu (yapiskan konumlu oge, konumlandirilmamis bolumun uzerine
   boyanir). Negatif margin .ch1'e tasindi: fonun yolculugu tam hikaye
   yuksekliginde bitiyor.
   Kaydirma normal hizda ilerliyor, her metin tam opaklikta girip cikiyor —
   capraz gecis yok, dolayisiyla ic ice girme de yok. */
/* 'Kayma' kaldirildi (musteri onayi 2026-08-21, tum diller): fon artik
   yapiskan degil. Tek panel (.ch1) -100svh margin ile fonun uzerine biniyor;
   foto ve hero metni birlikte, tek ekran, normal akiyor. */
.st{position:relative;height:100vh;height:100svh;overflow:hidden;
  background:var(--navy-deep)}
.st img,.st video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.st .im-video{opacity:0;transition:opacity .9s ease}
.st .im-video.ready{opacity:1}
/* Perde dikey gradyandi ve TAM ORTADA en zayifti (%28) — metin de tam
   orada duruyor, gece fotografinin sehir isiklari da orada. Ustune
   merkeze oturan bir eliptik perde eklendi: metnin arkasi koyulasiyor,
   fotografin kenarlari acik kaliyor. */
.st .veil{position:absolute;inset:0;background:
  radial-gradient(ellipse 72% 60% at 50% 47%, rgba(12,26,52,.60), rgba(12,26,52,0) 74%),
  linear-gradient(0deg,rgba(12,26,52,.68),rgba(12,26,52,.30) 55%,rgba(12,26,52,.38))}
.ch{position:relative;z-index:1;min-height:100vh;min-height:100svh;
  display:flex;align-items:center;justify-content:center;text-align:center;padding:1.4rem;color:#fff}
/* Ilk panel fonun uzerine biniyor; hikaye = 3 x 100svh. */
.ch1{margin-block-start:-100vh;margin-block-start:-100svh}
.ch-in{max-width:820px;position:relative;isolation:isolate}
/* ch2 ve ch3'un kutusu yok, metin dogrudan goruntunun uzerinde: ucuncu bir
   cerceveli kutu "uc ozdes kutu" demek olurdu. Onun yerine kenari belli
   olmayan yumusak bir perde — metnin arkasi her zaman zemin buluyor. */
.ch:not(.ch1) .ch-in::before{content:"";position:absolute;inset:-14% -12%;z-index:-1;
  pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%, rgba(12,26,52,.62), rgba(12,26,52,0) 70%)}
.ch1 .ch-in{border:1px solid rgba(127,179,211,.55);background:rgba(12,26,52,.34);backdrop-filter:blur(3px);padding:clamp(2rem,5vh,3rem) clamp(1.4rem,4vw,3rem)}
.ch h1,.ch .h{font-family:var(--serif);font-weight:500;color:#fff;line-height:1.12;margin:.7rem 0 .8rem;letter-spacing:.01em}
.ch1 h1{font-size:clamp(2.35rem,1.44rem + 3.72vw,4.7rem)}
.ch .h{font-size:clamp(2.5rem,1.3rem + 4.9vw,5.6rem)}
.ch em{font-style:italic;color:var(--accent-soft)}
.ch p{color:#E5E9EC;font-size:1.2rem;max-width:34em;margin:0 auto 1.6rem}
.ch .cities{font-family:var(--sans);font-size:.92rem;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:var(--accent-soft)}
.btns{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap}
.b1{display:inline-block;background:var(--accent);color:var(--navy);font-weight:600;font-size:.88rem;letter-spacing:.14em;text-transform:uppercase;padding:.95rem 2rem;border:none;cursor:pointer;font-family:var(--sans)}
.b1:hover{background:var(--accent-soft);color:var(--navy)}
.b2{display:inline-block;border:1px solid rgba(255,255,255,.6);color:#fff;font-weight:600;font-size:.88rem;letter-spacing:.14em;text-transform:uppercase;padding:.95rem 2rem}
.b2:hover{border-color:var(--accent-soft);color:var(--accent-soft)}
.b2.dark{border-color:var(--navy);color:var(--navy)}
.b2.dark:hover{background:var(--navy);color:#fff}
/* left:auto, inset-inline:0'in mantiksal baslangicini eziyordu: oge icerige
   kadar buzusup SAG kenara yapisiyor ve yuzen dugmelerin altinda kaliyordu.
   inset-inline:0 tek basina tam genislik verir, align-items:center ortalar. */
.hint{position:absolute;bottom:2.2vh;inset-inline:0;transform:none;color:rgba(255,255,255,.75);font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;display:none;flex-direction:column;align-items:center;gap:.45rem}
.hint::after{content:"";width:1px;height:2.6rem;background:linear-gradient(rgba(127,179,211,.9),transparent);animation:drip 2.2s ease-in-out infinite}
/* Dar ekranda ipucu, yuzen dugmelerden kacmak icin yukari itiliyordu ve bu
   sefer hero kutusunun icine giriyordu. Telefonda kaydirma ipucu zaten
   gereksiz — gizle. */
@media(max-width:760px){.hint{display:none}}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}55%{transform:scaleY(1);transform-origin:top}100%{transform:scaleY(1);opacity:0}}


/* JavaScript yokken hero icin ayrica bir sey gerekmiyor: metin artik CSS ile
   gorunur, fotograf HTML'de src/srcset ile geliyor. (Eskiden paneller
   opacity:0 ile ust uste duruyordu ve yalnizca JS aciyordu.) */
html.no-js .hint{display:none}

/* ---------- stats band ---------- */
/* Serit once tek parca lacivert bir bant ve icinde ayraclarla bolunmus dort
   hucreydi; tablo gibi okunuyor, ustundeki hero fotografindan ayrismiyordu.
   Once ton degistirmeyi denedik (acik lacivert + kare izgara) — begenilmedi.
   Cozum yuzeyde degil nesnede: her sayi artik kendi levhasi. Zemin bir
   kademe koyulasti (--navy-deep), levhalar uzerinde acik bir tulle duruyor
   ve ust kenarlarindan isik aliyor. Yuvarlak kose ve neon yok: kare
   geometri ve mevcut celik mavisi. */
/* Serit hero'dan ayrissin/goze carpsin diye zemini bir tik acildi + ince ust
   ayrac (musteri onayi 2026-08-21, tum diller). */
.trust{background:linear-gradient(180deg,#1E3552,#152B47);color:#fff;
  border-block-start:1px solid rgba(167,203,226,.22)}
.trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);text-align:center;
  gap:clamp(.7rem,1.5vw,1.3rem);padding-block:clamp(2.8rem,5.2vw,4.2rem)}
.trust .cell{position:relative;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:clamp(2.6rem,4.2vw,3.6rem) 1rem;
  background:linear-gradient(180deg,rgba(167,203,226,.13),rgba(167,203,226,0) 55%);
  box-shadow:inset 0 0 0 1px rgba(167,203,226,.17)}
/* levhanin ust kenarindaki isik: ortada guclu, uclarda kayboluyor */
.trust .cell::after{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent) 30%,var(--accent) 70%,transparent);
  box-shadow:0 0 14px rgba(127,179,211,.45)}
/* Cormorant'ın eski usul rakamları tabular-nums ile birleşince "1"i "I"
   gösteriyordu; sayılar sans, harfler serif kalıyor */
.trust b{display:block;position:relative;font-family:var(--sans);font-size:clamp(2.4rem,1.2rem + 3.6vw,3.4rem);font-weight:400;color:#fff;line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:.01em;margin-block-end:1.1rem}
.trust b::after{content:"";position:absolute;inset-inline:0;margin:auto;inset-block-end:-.62rem;
  width:2rem;height:1px;background:var(--accent);opacity:.9}
.trust span{font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;color:var(--accent-soft)}

/* ---------- generic sections ---------- */
/* Her bolum ayni dolguyu aliyordu: sayfada hiyerarsi yoktu, kisa bir bolumun
   altinda da uzun bir bolumun altinda da ayni bosluk duruyordu ve sayfa
   "bos" goruluyordu. Uc kademe: ana bolum, alt blok, siki blok. */
section{padding:clamp(4rem,8vw,6.5rem) 0}
/* .sec-lg tabandan yalniz %7,7 farkliydi (104 -> 112px) — bosluk icin algi
   esigi ~%10-15, yani hicbir hiyerarsi uretmiyordu. */
.sec-lg{padding-block:clamp(5.2rem,10vw,8.5rem)}
/* Devam bolumu: ayni zeminde art arda gelen bolumler. Sablonlarda
   style="padding-top:0" olarak elle yaziliyordu; artik sinif. */
.sec-cont{padding-block:0 clamp(2.8rem,5.5vw,4.2rem)}
.sec-md{padding-block:clamp(2.8rem,5.5vw,4.2rem)}
.sec-sm{padding-block:clamp(1.8rem,3.5vw,2.6rem)}

/* NOT: plaka gorsellerinde height:auto SART. <img height="360"> nitelik
   ipucu CSS'te belirtilmis bir yukseklik sayiliyor ve aspect-ratio devre
   disi kaliyor — gorseller dikey uzuyordu. Nitelikler CLS icin duruyor. */
/* ---------- genis ekran ---------- */
/* .wrap 1140px'te donmustu: /tr/team/ belge yuksekligi 1600px'te de 2560px'te
   de TAM 3989px — 960px'lik fazla genislige duzen sifir tepki veriyordu ve
   2560'ta icerik viewport'un %41,6'sini tasiyordu. Okuma sutunu 36rem'de
   sabit kalir; genisleyen yalniz kaplar ve raylar. */
@media(min-width:1700px){
  .wrap{max-width:1280px}
  .a-shell{max-width:1560px;
    grid-template-columns:minmax(10rem,15rem) minmax(0,36rem) minmax(12rem,21rem)}
}

/* ---------- ikonlar ---------- */
/* Dokuz alanin ince cizgi seti. Sprite govdenin basinda bir kez basiliyor. */
.ico-sprite{position:absolute;width:0;height:0}
.ico{width:1.5rem;height:1.5rem;flex:0 0 auto;fill:none;stroke:currentColor;
  stroke-width:1.25;stroke-linecap:square;stroke-linejoin:miter;
  vector-effect:non-scaling-stroke}

/* ---------- durumlar: hover · odak · basili ----------
   Uc ayri sorun tek yerde cozuluyor:
   1. Dokunmatikte "yapiskan hover": sitede (any-hover:hover) korumasi HIC
      yoktu. .area bir <div> — dokununca hicbir yere gitmiyor ama hover
      satirda takili kaliyordu.
   2. Klavyede zenginlik yok: hover efektlerinin focus karsiligi eksikti.
      Klavye zoom'u fareden bir tik sakin (1.03) — iki girdi yolu ayrilir.
   3. Bes durumdan ikisi (:active, :visited) sistemde hic tanimli degildi.
   ---------------------------------------------------------------- */
@media (any-hover:hover){
  .a-plate:hover img{--zoom:1.04}
  .a-next a:hover .an-i{border-color:var(--line-strong);background:var(--navy);color:var(--accent-soft)}
  .a-next a:hover{padding-inline-start:.6rem}
  .in-card:hover .ic-plate img{--zoom:1.05}
  .area:hover .area-plate img{--zoom:1.04}
  .prow:hover .prow-i{border-color:var(--line-strong);background:var(--navy);color:var(--accent-soft)}
  .oth a:hover .oth-i{color:var(--accent-soft)}
  .a-toc a:hover{color:var(--navy);border-inline-start-color:var(--accent)}
}
.a-plate:focus-visible img,
.in-card:focus-within .ic-plate img,.area:focus-within .area-plate img{--zoom:1.03}
.a-toc a:focus-visible{color:var(--navy);border-inline-start-color:var(--accent)}
.oth a:focus-visible .oth-i{color:var(--accent-soft)}
.prow:focus-within .prow-i{border-color:var(--line-strong);background:var(--navy);color:var(--accent-soft)}
/* basili durum: renk degisimi, hareket degil — reduced-motion'da da guvenli */
.b1:active,.b2:active,.fab-chat:active,.chat-send:active,.in-card:active,
.a-next a:active,.prow:active,.oth a:active,.a-toc a:active,.a-plate:active,
.ins-more:active,.area a:active{filter:brightness(.94)}

/* ---------- kose isareti ---------- */
/* Logonun ic ice kare geometrisinden: levhanin iki karsit kosesine oturan
   ince L parcalari. Cerceve degil, isaret. */
.kose{position:relative}
.kose::before,.kose::after{content:"";position:absolute;width:13px;height:13px;
  border:1px solid var(--accent-ink);opacity:.85;pointer-events:none}
.kose::before{inset-block-start:-1px;inset-inline-start:-1px;border-inline-end:0;border-block-end:0}
.kose::after{inset-block-end:-1px;inset-inline-end:-1px;border-inline-start:0;border-block-start:0}
.kose-acik::before,.kose-acik::after{border-color:var(--accent-soft);opacity:.55}

/* ---------- doku ---------- */
/* Koyu yuzeylere %5,5'lik tanecik. Icerigin ustune binmemesi icin
   pointer-events yok ve z-index dusuk. */
.band,.trust,.quote,.cta-final,footer.site{position:relative;isolation:isolate}
.band::after,.trust::after,.cta-final::after,footer.site::after,
.phero:not(.has-plate)::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:var(--grain)}
/* Sade phero ~70 alt sayfanin acilis yuzeyi ve olculen sd'si TAM 0.000 idi —
   malzeme katmaninin atladigi en buyuk lacivert alan. .phero zaten
   position:relative; .phero .wrap z-index:2 oldugu icin cakisma yok. */
.phero:not(.has-plate){isolation:isolate}
.quote .wrap{position:relative;z-index:2}
.quote::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:var(--grain)}
.sec-h{text-align:center;max-width:680px;margin:0 auto 3rem}
.sec-h h2{font-family:var(--serif);font-weight:500;font-size:clamp(2.05rem,1.49rem + 2.3vw,3.5rem);line-height:var(--lh-display);margin:.4rem 0 .6rem}
.sec-h p{color:var(--navy-soft);margin:0}

/* reveals */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.6,.2,1),transform .8s cubic-bezier(.2,.6,.2,1)}
.rv.in{opacity:1;transform:none}
.rv-l{opacity:0;transform:translateX(-44px);transition:opacity .9s cubic-bezier(.2,.6,.2,1),transform .9s cubic-bezier(.2,.6,.2,1)}
.rv-r{opacity:0;transform:translateX(44px);transition:opacity .9s cubic-bezier(.2,.6,.2,1),transform .9s cubic-bezier(.2,.6,.2,1)}
.rv-l.in,.rv-r.in{opacity:1;transform:none}
html.no-js .rv,html.no-js .rv-l,html.no-js .rv-r{opacity:1;transform:none}

/* shores */
/* Iki sutun kendi icinde ayri akiyordu: soldaki baslik iki satira,
   aciklama uc satira dusunce liste asagi kayiyor ve sagdakiyle hizasi
   bozuluyordu. subgrid, iki sutunun dort satirini (etiket, baslik,
   aciklama, liste) ayni izgaraya bagliyor — en uzun icerik satir
   yuksekligini belirliyor, digeri ona hizalaniyor. */
.aud{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto auto auto 1fr;
  gap:0;border:1px solid var(--line);background:var(--card)}
.aud>div{display:grid;grid-template-rows:subgrid;grid-row:span 4;
  padding:clamp(1.7rem,1.2rem + 2.06vw,3rem)}
.aud>div+div{border-inline-start:1px solid var(--line)}
.aud h3{font-family:var(--serif);font-size:clamp(1.7rem,1.35rem + 1.4vw,2.05rem);line-height:var(--lh-title);font-weight:500;margin:.5rem 0 .6rem;align-self:start}
.aud p{color:var(--navy-soft);margin:0 0 1.2rem;align-self:start}
.aud ul{margin:0;padding:0;list-style:none}
.aud li{padding-block:.6rem;padding-inline:1.6rem 0;position:relative;border-top:1px solid var(--paper-2);font-size:1.04rem}
.aud li::before{content:"";position:absolute;inset-inline-start:.2rem;top:1.1em;width:.35rem;height:.35rem;background:var(--accent);transform:rotate(45deg)}

/* practice: sticky left + rows */
.prax{background:var(--card);border-block:1px solid var(--line)}
.prax-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2.4rem,6vw,5rem);align-items:start}
.prax-left{position:sticky;top:110px}
.prax-left h2{font-family:var(--serif);font-weight:500;font-size:clamp(2rem,1.46rem + 2.2vw,3.4rem);line-height:var(--lh-display);margin:.5rem 0 .8rem}
.prax-left p{color:var(--navy-soft);margin:0 0 1.4rem;max-width:26em}
.prax-left .orn{justify-content:flex-start}
.prax-left .orn::after{display:none}
.prow{display:grid;grid-template-columns:auto 1fr;gap:1.15rem;padding:1.35rem 0;border-top:1px solid var(--line);align-items:start;color:var(--navy)}
.prow:last-of-type{border-bottom:1px solid var(--line)}
/* Eskiden burada 0,55rem'lik bir baklava vardi ve dokuz satirin dokuzu da
   ayni isareti tasiyordu — liste tek bir gri blok gibi okunuyordu. Her alanin
   kendi ince cizgi ikonu var; sprite'tan geliyor, ek istek yok. */
.prow-i{display:flex;align-items:center;justify-content:center;
  width:2.6rem;height:2.6rem;margin-top:.1rem;color:var(--accent-ink);
  border:1px solid var(--line);background:var(--card);
  transition:border-color .25s,background .25s,color .25s}
.prow-i .ico{width:1.45rem;height:1.45rem}
/* .prax bandi beyaz: uzerindeki --card kutu 1.00:1 dolgu farkiyla "kutu"
   olarak okunmuyordu, ortada asili bir ikon gibi duruyordu. */
.prax .prow-i{background:var(--paper-2)}

.prow .g{color:var(--accent-ink);width:.55rem;height:.55rem;background:var(--accent);margin-top:.35rem;transform:rotate(45deg)}
.prow h3{font-family:var(--serif);font-size:1.65rem;line-height:var(--lh-title);font-weight:500;margin:0 0 .2rem;transition:color .2s}
.prow p{margin:0;font-size:1rem;color:var(--navy-soft)}
a.prow:hover h3{color:var(--accent-ink)}

/* quote band */
.quote{position:relative;overflow:hidden;color:#fff;text-align:center;padding:clamp(5rem,12vw,9rem) 0}
/* Fon burada degil .yuklu sinifinda: serit sayfanin cok asagisinda ve CSS fon
   goruntuleri gorunurlukten bagimsiz olarak ilk yukte iniyor. Sinifi
   bosphorus.js serit yaklasinca ekliyor. Kare 1920px/352 KB'dan 1280px/81 KB'a
   indi — uzerindeki %74 perde nedeniyle fark gorunmuyor. */
.quote .par{position:absolute;inset:-18% 0;background:center 40%/cover no-repeat;will-change:transform;transform:scale(1.12)}
.quote .par.yuklu{
  background-image:url(/assets/img/quote-night-1280.jpg);
  background-image:image-set(url(/assets/img/quote-night-1280.webp) type("image/webp"),
                             url(/assets/img/quote-night-1280.jpg) type("image/jpeg"));
}
.quote .veil{position:absolute;inset:0;background:rgba(12,26,52,.74)}
.quote .wrap{position:relative;z-index:2;max-width:880px}
.quote blockquote{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(1.8rem,1.22rem + 2.38vw,3.3rem);line-height:1.35;margin:1rem 0 0;color:#EDF2F6}
.quote blockquote em{color:var(--accent-soft)}

/* team grids */
.tgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem}
.t{text-align:center}
.t .ph{border:1px solid var(--line);padding:.5rem;background:var(--card)}
.t img{aspect-ratio:1/1;object-fit:cover;filter:grayscale(1) sepia(.08);width:100%;transition:transform .5s ease}
.t:hover img{transform:scale(1.03)}
.t .mono{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;background:var(--navy);color:var(--accent-soft);font-family:var(--serif);font-size:2.4rem;line-height:var(--lh-display)}
.t b{display:block;font-family:var(--serif);font-size:var(--fs-lead);line-height:var(--lh-sub);font-weight:600;margin-top:.9rem}
.t span{font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent-ink);font-weight:600}
.t-note{text-align:center;margin-top:2.2rem;color:var(--navy-soft);font-size:1.02rem}
.t-note a{color:var(--accent-ink);font-weight:600}

/* insights cards */
/* /insights/ alan suzgeci — JS yoksa gorunmez, liste tam gelir */
/* ---------- haberler (Makaleler sayfasinin ustunde) ---------- */
/* Ayri sayfa degil, tarihli blok. Kisa duyurulara sayfa acmak ince icerik
   uretiyor; burada tam metin duruyor ve her madde kendi capasiyla
   paylasilabiliyor (#slug). */
.wrap-narrow{max-width:760px}
.news-sec{padding-block:clamp(2.8rem,5.5vw,4.2rem) 0}
.news{list-style:none;margin:0;padding:0;display:grid;gap:2.4rem}
.news-item{padding-bottom:2.2rem;border-bottom:1px solid var(--line)}
.news-item:last-child{border-bottom:none;padding-bottom:0}
.news-item time{display:block;font-size:.78rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent-ink)}
.news-item h3{font-family:var(--serif);font-weight:500;font-size:1.85rem;
  line-height:var(--lh-title);margin:.5rem 0 .7rem;color:var(--navy)}
.news-body p{margin:0 0 .9rem}
.news-body p:last-child{margin-bottom:0}
.news-body a{color:var(--accent-ink);border-bottom:1px solid rgba(36,119,167,.4)}
.news-body a:hover{color:var(--navy);border-color:var(--navy)}
.news-src{margin:1rem 0 0;font-size:.92rem}
/* WCAG 2.2 SC 2.5.8: cumle icinde olmayan baglantida hedef en az 24x24 */
.news-src a{display:inline-block;padding-block:.22rem;color:var(--accent-ink);font-weight:600}
.news-src a:hover{color:var(--navy)}
@media(max-width:760px){
  .news{gap:2rem}
  .news-item h3{font-size:1.55rem}
}

/* ---------- imlece duyarli ince etkilesimler ---------- */
/* Musteri siteye "yapay zeka kokusu" dedi. Teshis "efekt yok" degil,
   HER SEYIN AYNI RITIMDE olmasi: ayni sure, ayni easing, ayni fade-up,
   imlecten habersiz yuzeyler. Buradaki mudahaleler gosterisli degil;
   yuzeyin imlecin NEREDE oldugunu bilmesi ve hareketin hiyerarsili
   olmasi uzerine. Hepsi prefers-reduced-motion ile kapaniyor. */

/* 1. Kartlar imleci "goruyor": cok hafif bir isik ve yon duyarli kenar.
   --mx/--my degerlerini bosphorus.js tek bir dinleyiciyle yaziyor. */
.lit{position:relative;isolation:isolate;
  transition:border-color .45s cubic-bezier(.2,.6,.2,1),
             transform .45s cubic-bezier(.2,.6,.2,1),
             box-shadow .45s cubic-bezier(.2,.6,.2,1)}
.lit::after{content:"";position:absolute;inset:0;z-index:-1;opacity:0;pointer-events:none;
  transition:opacity .4s ease;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),
             rgba(36,119,167,.07), transparent 62%)}
.lit:hover::after,.lit:focus-within::after{opacity:1}
.lit:hover,.lit:focus-within{border-color:var(--line-strong);
  transform:translateY(-2px);box-shadow:0 14px 34px -22px rgba(12,26,52,.5)}

/* 2. Baglantida ok yol aliyor, alt cizgi imlecin geldigi yonden ciziliyor.
   scaleX + transform-origin mantiksal: RTL'de kendiliginden ters calisir. */
.trav{position:relative;display:inline-block}
.trav::after{content:"";position:absolute;inset-inline:0;bottom:-3px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:inline-start;
  transition:transform .42s cubic-bezier(.2,.6,.2,1)}
.trav:hover::after,.trav:focus-visible::after{transform:scaleX(1)}
.trav .arw{display:inline-block;transition:transform .42s cubic-bezier(.2,.6,.2,1)}
.trav:hover .arw{transform:translateX(.28rem)}
html[dir="rtl"] .trav:hover .arw{transform:translateX(-.28rem)}


/* 4. Birincil butonun etiketi imlece dogru 2px kayiyor — farkedilmez ama
   yuzey "canli" hissettiriyor. Buton kendisi yerinden oynamiyor. */
.b1{--px:0px;--py:0px}
.b1 .lbl{display:inline-block;transition:transform .3s cubic-bezier(.2,.6,.2,1)}
.b1:hover .lbl{transform:translate(var(--px),var(--py))}

/* 5. Acılış perdesi: sayfa yuklenirken govde cok hafif yukselir.
   Tek seferlik, 480ms — "her sey ayni fade" hissini kiran ilk detay. */
@keyframes doc-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
html:not(.no-js) body>main{animation:doc-in .48s cubic-bezier(.2,.6,.2,1) both}

@media (prefers-reduced-motion:reduce){
  .lit,.lit::after,.trav::after,.trav .arw,.b1 .lbl,.nav a:not(.cta)::after{
    transition:none !important}
  .lit:hover,.lit:focus-within{transform:none;box-shadow:none}
  html:not(.no-js) body>main{animation:none}
}

/* "daha fazla makale" — liste 6 kartta katlaniyor */
.ins-more-wrap{display:flex;justify-content:center;margin-top:2rem}
.ins-more{font-family:var(--sans);font-size:.8rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-ink);background:none;
  border:1px solid var(--line-strong);padding:.85rem 2rem;cursor:pointer;
  transition:background .25s,color .25s,border-color .25s}
.ins-more:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.ins-more[hidden]{display:none}
html.no-js .ins-more-wrap{display:none}

.ins-filter{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 .9rem}
html.no-js .ins-filter{display:none}
.chip{font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--navy-soft);background:none;
  border:1px solid var(--line-strong);padding:.5rem .95rem;min-height:32px;cursor:pointer;
  transition:background .2s,color .2s,border-color .2s}
.chip:hover{border-color:var(--navy);color:var(--navy)}
.chip.on{background:var(--navy);border-color:var(--navy);color:var(--accent-soft)}
.ins-count{margin:0 0 1.4rem;font-size:.85rem;color:var(--navy-soft);min-height:1.3em}
.in-card[hidden]{display:none}

.ins{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
/* Kartlar "cansiz" bulundu (musteri, 2026-08-07). Sebebi efekt eksikligi
   degil BILGI eksikligiydi: kartta yalnizca baslik ve aciklama vardi.
   Eklenenler — okuma suresi (makale JSON'unda zaten duruyor), ustte
   imlecle cizilen vurgu cizgisi, ve kartin TAMAMININ tiklanabilir olmasi.
   Sonuncusu hem kullanilabilirlik hem canlilik: kart bir yuzey degil,
   bir dugme gibi davraniyor. */
.in-card{background:var(--card);border:1px solid var(--line);padding:1.7rem 1.6rem 1.5rem;
  display:flex;flex-direction:column;position:relative}
/* ustteki vurgu cizgisi: hover'da baslangictan sona cizilir (RTL'de ters) */
.in-card::before{content:"";position:absolute;inset-block-start:-1px;inset-inline:-1px;height:3px;
  background:var(--accent);transform:scaleX(0);transform-origin:inline-start;
  transition:transform .5s cubic-bezier(.2,.6,.2,1)}
.in-card:hover::before,.in-card:focus-within::before{transform:scaleX(1)}
/* 2026-08-09: karta alanin plaka seridi geldi. Yirmi kart yan yana
   duruyordu ve hepsi ayni beyaz dikdortgendi — liste bir metin yiginiydi.
   Serit kartin kendi kenarina tasiyor (negatif kenar bosluguyla), ustteki
   vurgu cizgisi de goruntunun uzerinde kaliyor. */
.ic-plate{display:block;margin:-1.7rem -1.6rem 1.25rem;overflow:hidden;
  border-bottom:1px solid var(--line);background:var(--navy-deep)}
.ic-plate img{width:100%;height:auto;aspect-ratio:16/6.4;object-fit:cover;--zoom:1;transform:scale(var(--zoom));
  transition:transform .6s cubic-bezier(.2,.6,.2,1)}

.ic-meta{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.in-card .smallcaps{letter-spacing:.22em}
.ic-min{font-size:.7rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--navy-soft);white-space:nowrap;flex:none}
.in-card h3{font-family:var(--serif);font-weight:500;font-size:1.78rem;line-height:1.26;
  margin:.65rem 0 .55rem}
.in-card p{font-size:1rem;color:var(--navy-soft);margin:0}
/* baglantiyi karta yay: yuzeyin her yeri tiklanabilir olur, alttaki
   metin yine de secilebilir kalsin diye p ve h3 uste birakiliyor */
.in-card a.in-link::before{content:"";position:absolute;inset:0;z-index:1}
.in-card h3,.in-card p,.in-card .ic-meta{position:relative;z-index:2}
.in-card a.in-link{position:relative;z-index:2}

/* uc kartin altindaki "tum makaleler" cikisi: kart ici "Makaleyi okuyun"
   baglantilariyla karismasin diye metin degil, ortalanmis cerceve buton */
.ins-all{text-align:center;margin-top:clamp(1.8rem,3.5vw,2.6rem)}

/* anasayfadaki haber seridi — kart degil, tarihli liste */
.hnews{margin-top:clamp(2.2rem,4vw,3.2rem);border-top:1px solid var(--line);padding-top:1.6rem}
.hnews h3{font-size:.74rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent-ink);margin:0 0 .3rem}
.hnews ol{list-style:none;margin:0;padding:0}
.hnews li{display:grid;grid-template-columns:9.5rem 1fr;gap:0 1.2rem;align-items:baseline;
  padding:.85rem 0;border-bottom:1px solid var(--line)}
.hnews time{font-size:.76rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--navy-soft);white-space:nowrap}
.hnews li a{font-family:var(--serif);font-size:1.32rem;line-height:var(--lh-sub);color:var(--navy)}
.hnews li a:hover{color:var(--accent-ink)}
.hnews>.in-link{margin-top:.2rem}
@media(max-width:760px){
  .hnews li{grid-template-columns:1fr;gap:.2rem}
  .hnews li a{font-size:1.18rem}
}

/* final CTA */
.cta-final{background:var(--navy);color:#fff;text-align:center}
.cta-final .smallcaps{color:var(--accent-soft)}
.cta-final h2{font-family:var(--serif);font-weight:500;font-size:clamp(2rem,1.38rem + 2.53vw,3.6rem);line-height:var(--lh-display);margin:.5rem 0 .7rem;color:#fff}
.cta-final p{color:var(--mist);max-width:34em;margin:0 auto 1.8rem}

/* ---------- sub-page hero ---------- */
/* Alt sayfa acilisi — tipografik.
   Ortalanmis fotograf + susleme yerine baslangica hizali bir kunye
   kompozisyonu: altin ust baslik, tam genislikte sac teli cizgi, buyuk
   Cormorant baslik. Anasayfa sinematik, alt sayfalar matbu. */
.phero{position:relative;min-height:clamp(300px,40vh,430px);display:flex;align-items:flex-end;
  overflow:hidden;background:var(--navy-deep);color:#fff;text-align:start}
.phero .wrap{position:relative;z-index:2;width:100%;padding-top:138px;padding-bottom:clamp(2.2rem,5vh,3.2rem)}
/* markanin kendi geometrisi mimari olcekte: ust uste binen iki kare —
   iki yaka, tek buro. CSS ile ciziliyor, indirilecek bir dosya yok. */
/* margin-block-start: kisa basliklarda phero'nun ortasi sabit basligin altina
   dusmuyor, isaretin ust karesi menunun icine giriyordu */
.ph-mark{position:absolute;inset-block-start:50%;inset-inline-end:2rem;margin-block-start:55px;
  width:min(38vh,310px);aspect-ratio:1;transform:translateY(-50%);pointer-events:none}
/* %70 + %70 = %40 ortusme: isaretin kendi orani */
.ph-mark i{position:absolute;display:block;width:70%;aspect-ratio:1;border:2px solid var(--accent-soft);opacity:.2}
.ph-mark i:first-child{inset-block-start:0;inset-inline-start:0}
.ph-mark i:last-child{inset-block-end:0;inset-inline-end:0;border-color:var(--accent);opacity:.28}
/* Alan plakasi. 190 alt sayfa AYNI kareyle acilmasin diye tipografik acilisa
   gecilmisti; simdi her calisma alaninin kendi soyut malzeme karesi var, yani
   tekrar yok. Perde metnin ustunde .90'dan asagi inmiyor — WCAG. */
.phero.has-plate .ph-bg{position:absolute;inset:0;z-index:0}
.phero .ph-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.ph-veil{position:absolute;inset:0;z-index:1;
  /* Olculdu: 9 plaka x 4 oge x 5 genislikte en kotu kontrast 6.98:1 idi,
     esik 4.5:1 — perde gereginden 1.55 kat koyuydu ve plakalar tonal bir
     bulaniklik olarak duruyordu. Yeni duraklarla en kotu 6.25:1, goruntu
     yapisi %35 artiyor. */
  background:linear-gradient(100deg,rgba(12,26,52,.86) 0%,rgba(12,26,52,.82) 40%,
    rgba(12,26,52,.60) 74%,rgba(12,26,52,.38) 100%)}
[dir="rtl"] .ph-veil{background:linear-gradient(260deg,rgba(12,26,52,.86) 0%,
  rgba(12,26,52,.82) 40%,rgba(12,26,52,.60) 74%,rgba(12,26,52,.38) 100%)}
/* dar ekranda metin tam genislige yayiliyor: perde her yerde koyu olmali */
@media(max-width:760px){
  .ph-veil,[dir="rtl"] .ph-veil{background:rgba(12,26,52,.82)}
}
.phero.has-plate::after{content:"";position:absolute;inset:0;z-index:1;
  pointer-events:none;background-image:var(--grain)}
.ph-rule{height:1px;background:rgba(127,179,211,.32);margin:.9rem 0 1.15rem}
.phero h1{font-family:var(--serif);font-weight:500;font-size:clamp(2.15rem,1.3rem + 3.5vw,4.6rem);
  line-height:var(--lh-display);margin:0 0 .55rem;color:#fff;max-width:11em}
.phero h1 em{font-style:italic;color:var(--accent-soft)}
.phero p{color:#D8DFE6;max-width:42em;margin:0;font-size:1.12rem}
@media(max-width:760px){
  /* dar ekranda metin tam genislikte akiyor: isaret arkada gurultu
     yapmasin diye kucultulup daha disari itiliyor */
  .ph-mark{width:min(34vh,215px);inset-inline-end:-26%;margin-block-start:38px}
  .ph-mark i{opacity:.11}
  .ph-mark i:last-child{opacity:.15}
}

/* ---------- calisma alani indeksi ---------- */
/* Dokuz satir da yalin metindi ve sag sutun bos duruyordu. Sol sutuna ikon +
   alanin kendi plaka kupuru geldi: liste artik editoryal bir indeks. */
.area-i{display:inline-flex;align-items:center;justify-content:center;
  width:2.5rem;height:2.5rem;margin-bottom:.75rem;color:var(--accent-ink);
  border:1px solid var(--line);background:var(--card)}
.area-i .ico{width:1.55rem;height:1.55rem}
.area-head{display:contents}
.area-plate{display:block;overflow:hidden;border:1px solid var(--line);
  background:var(--navy-deep)}
.area-plate img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;--zoom:1;transform:scale(var(--zoom));
  transition:transform .6s cubic-bezier(.2,.6,.2,1)}

/* alan sayfasi basligindaki ikon */
.a-hd-i{display:flex;align-items:center;justify-content:center;
  width:2.8rem;height:2.8rem;margin-bottom:.8rem;color:var(--accent-ink);
  border:1px solid var(--line);background:var(--card)}
.a-hd-i .ico{width:1.55rem;height:1.55rem}
/* "diger alanlar" izgarasi */
.oth a{display:grid;grid-template-columns:auto 1fr;gap:.15rem .8rem;align-items:center}
.oth-i{grid-row:span 2;width:1.5rem;height:1.5rem;color:var(--accent-ink);
  transition:color .25s}


/* expertise detail */
.area{display:grid;align-items:start;grid-template-columns:minmax(9em,14em) minmax(10em,15em) 1fr;gap:1rem clamp(1.6rem,3.4vw,3.2rem);padding:clamp(2rem,4vw,2.8rem) 0;border-top:1px solid var(--line)}
.area:last-of-type{border-bottom:1px solid var(--line)}
.area h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.55rem,1.24rem + 1.25vw,2.3rem);line-height:var(--lh-title);margin:0}
.area .tag{display:block;font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--accent-ink);margin-top:.5rem}
.area p{margin:0 0 1rem;color:var(--navy-soft)}
.area ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:.5rem 2rem}
.area li{padding-inline-start:1.4rem;position:relative;font-size:1rem}
.area li::before{content:"";position:absolute;inset-inline-start:.2rem;top:.62em;width:.35rem;height:.35rem;background:var(--accent);transform:rotate(45deg)}

/* team roster */
.roster{display:grid}
.r-item{display:grid;grid-template-columns:210px 1fr;gap:clamp(1.5rem,4vw,3rem);padding:clamp(2rem,4vw,2.8rem) 0;border-top:1px solid var(--line);align-items:start}
.r-item:last-of-type{border-bottom:1px solid var(--line)}
.r-item .ph{border:1px solid var(--line);padding:.45rem;background:var(--card)}
.r-item img{aspect-ratio:1/1;object-fit:cover;filter:grayscale(1) sepia(.08);width:100%}
.r-item .mono{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;background:var(--navy);color:var(--accent-soft);font-family:var(--serif);font-size:2.6rem;line-height:var(--lh-display)}
.r-item h2{font-family:var(--serif);font-size:1.9rem;line-height:var(--lh-title);font-weight:600;margin:0 0 .15rem}
.r-item .role{font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent-ink);font-weight:600;display:block;margin-bottom:.8rem}
.r-item p{margin:0;color:var(--navy-soft);max-width:56em}

/* process steps */
.steps{max-width:860px;margin-inline:auto}
.step{display:grid;grid-template-columns:5.2rem 1fr;gap:1.6rem;padding:clamp(1.8rem,3.5vw,2.4rem) 0;border-top:1px solid var(--line)}
.step:last-of-type{border-bottom:1px solid var(--line)}
.step .num{font-family:var(--serif);font-size:2.2rem;color:var(--accent-ink);font-weight:500;line-height:1;text-align:center}
.step h2{font-family:var(--serif);font-size:1.6rem;line-height:var(--lh-title);font-weight:600;margin:0 0 .3rem}
.step p{margin:0;color:var(--navy-soft)}
.faq{max-width:860px;margin-inline:auto}
.faq details{border-top:1px solid var(--line);padding:1.1rem 0}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{font-family:var(--serif);font-size:var(--fs-lead);line-height:var(--lh-sub);font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq summary::after{content:"+";color:var(--accent-ink);font-size:1.6rem;font-family:var(--sans)}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--navy-soft);margin:.7rem 0 0}

/* editions */
.eds{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.ed{background:var(--card);padding:1.1rem 1.2rem;transition:background .25s,color .25s}
.ed:hover{background:var(--navy)}
.ed:hover b,.ed:hover span{color:var(--accent-soft)}
.ed.on{background:var(--paper-2)}
.ed.on b{color:var(--navy)}
.ed b{display:block;font-family:var(--serif);font-size:1.15rem;line-height:var(--lh-sub);font-weight:600}
.ed span{font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--navy-soft)}
.ed.on span{color:var(--accent)}

/* contact */
.c-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2.4rem,6vw,4.5rem);align-items:start}
.c-list{display:grid;gap:1.4rem;margin-top:1.6rem}
.c-item strong{display:block;font-size:.74rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:.25rem}
.c-item a,.c-item span{color:var(--navy);font-size:1.05rem}
.c-item a:hover{color:var(--accent-ink)}
.form-card{background:var(--card);border:1px solid var(--line);padding:clamp(1.8rem,3.4vw,2.6rem)}
.form-card h3{font-family:var(--serif);font-size:1.7rem;line-height:var(--lh-title);font-weight:600;margin:0 0 1.2rem}
/* 1fr = minmax(auto,1fr): izgara ogesi min-content'in altina inemez ve
   input/textarea'nin varsayilan min-content geniligi (size/cols niteligi)
   sutunu sisiriyordu. Arapcada tasma sola dustugu icin alanlar kartin
   207px disina cikiyordu (1600px'te olculdu). */
.f-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.05rem}
.field{display:flex;flex-direction:column;gap:.35rem}
.field.full{grid-column:1/-1}
.field label{font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--navy-soft)}
/* kenarlik beyaz kart uzerinde 1.40:1 idi — kutular kagit uzerinde yok
   gibi duruyordu (WCAG 1.4.11 icin 3:1 gerekiyor) */
.field input,.field select,.field textarea{min-width:0;width:100%;font-family:var(--sans);font-size:1rem;color:var(--navy);background:var(--paper);border:1px solid var(--line-strong);padding:.75rem .85rem}
.field textarea{resize:vertical;min-height:120px}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid var(--navy);outline-offset:1px;box-shadow:0 0 0 3px var(--accent-soft)}
.lang-note{margin:1.8rem 0 0;font-size:.92rem;line-height:1.65;color:var(--navy-soft);
  border-inline-start:2px solid var(--line-strong);padding-inline-start:1rem;max-width:34em}
.f-note{font-size:.85rem;color:var(--navy-soft);margin:.95rem 0 0}
.f-warn{margin:.9rem 0 0;font-size:.86rem;line-height:1.6;color:var(--navy);
  border-inline-start:2px solid var(--accent);padding-inline-start:.9rem}
/* bal kupu: bot doldurur, insan gormez — display:none olsaydi
   botlar da atlardi, bu yuzden gorsel olarak kaciriliyor */
.field.trap{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}
.f-state{margin:.9rem 0 0;font-size:.92rem;font-weight:600;min-height:1.4em}
.f-state.busy{color:var(--navy-soft)}
.f-state.ok{color:#2E6B4F}
.f-state.err{color:#9B3B2E}
.f-wa{padding-block:.9rem}


/* payment */
.pkgs{display:grid;gap:0;border:1px solid var(--line);background:var(--card);margin-bottom:1.6rem}
.pkg{padding:1.15rem 1.3rem;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:.15rem}
.pkg:first-child{border-top:none}
.pkg b{font-family:var(--serif);font-size:1.3rem;line-height:var(--lh-sub);font-weight:600}
.pkg span{color:var(--navy-soft);font-size:.95rem}
.paytrust{display:grid;grid-template-columns:1fr 1fr;gap:.85rem 1.8rem;margin-top:1.6rem}
.pt-item{display:flex;align-items:flex-start;gap:.55rem;font-size:.86rem;line-height:1.5;color:var(--navy-soft)}
.pt-item svg{margin-top:.18rem}
.pt-item svg{color:var(--accent-ink);flex:none}

/* article */
/* ============================================================
   MAKALE — uc sutunlu editoryal kabuk (2026-08-09)
   Eskiden 760px'lik tek sutun 1600px ekranda ortalaniyordu: sag ve soldaki
   %45 alan hicbir is gormuyordu ve sayfa bastan sona duz metindi.
   Simdi sol ray icindekiler + okuma ilerlemesi, sag ray yapiskan CTA ve alan
   plakasi tasiyor. Okuma sutununun olcusu DEGISMEDI (44rem ~ 760px).
   overflow:hidden KULLANILMAZ — yapiskan raylari sessizce bozar.
   ============================================================ */
.a-shell{max-width:1360px;display:grid;align-items:start;
  gap:clamp(1.8rem,3.6vw,3.6rem);
  grid-template-areas:"toc art ask";
  grid-template-columns:minmax(10rem,13rem) minmax(0,36rem) minmax(12rem,17rem)}
.a-rail-l{grid-area:toc}
.a-rail-r{grid-area:ask}
.article{grid-area:art;min-width:0}
.a-rail{position:sticky;top:112px;align-self:start}

/* ---------- sol ray: icindekiler + ilerleme ---------- */
/* <details> bilerek acik dogar: JS yoksa liste tam gorunur, kimse icerik
   kaybetmez. Genis ekranda ozet gizleniyor, dar ekranda katlanabilir oluyor
   (kapatmayi JS yapiyor). */
.a-toc{font-size:.9rem}
.a-toc>summary{display:none}
.a-toc-eyebrow,.a-toc>summary{font-family:var(--sans);font-size:.68rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--accent-ink)}
.a-prog{position:relative;height:2px;background:var(--line);margin:.9rem 0 1.1rem}
.a-prog i{display:block;height:100%;width:0;background:var(--accent-ink)}
.a-toc nav{display:grid}
.a-toc a{display:grid;grid-template-columns:1.7rem 1fr;align-items:baseline;
  padding:.42rem 0 .42rem .95rem;border-inline-start:1px solid var(--line);
  color:var(--navy-soft);line-height:1.42;transition:color .2s,border-color .2s}
/* Hiyerarsi opaklikla degil TONLA kurulur: --accent-ink hicbir opaklikta
   4.5:1 tutmuyor (.60 -> 2.14:1 olculdu). Pasif rakam --navy-soft (6.30:1),
   aktif olan vurgu rengiyle ayrilir (4.57:1).
   Cormorant'in varsayilan rakamlari eski usul; kenar sayaci lining basiyordu,
   ayni yedi bolum icin iki rakam bicimi yan yana duruyordu. */
.a-toc a i{font-family:var(--serif);font-style:normal;font-size:.92em;
  color:var(--navy-soft);font-variant-numeric:lining-nums tabular-nums}

.a-toc a.on{color:var(--navy);border-inline-start-color:var(--accent-ink)}
.a-toc a.on i{color:var(--accent-ink)}

/* ---------- okuma sutunu ---------- */
.article .a-meta{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;font-size:.74rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:1.8rem}
/* Ust kuraldaki --accent-ink ve .18em hicbir seye uygulanmiyordu: uc cocugun
   ucu de <span>, hepsi asagidaki kuraldan gri aliyordu. */
.article .a-meta span{color:var(--navy-soft);letter-spacing:.1em}
.article .a-meta>span:first-child{color:var(--accent-ink);letter-spacing:.18em}
.article p{margin:0 0 1.25rem;color:var(--ink-2)}
/* govde ici baglanti govde metniyle ayni renkteydi — tiklanabilir oldugu
   anlasilmiyordu. Alt cizgi + logo mavisi (zeminde 4.63:1). Alti cizgi rengi
   eskiden ham altin rgba'siydi; jeton aramasi yakalamiyordu. */
.article p a,.article li a{color:var(--accent-ink);border-bottom:1px solid rgba(36,119,167,.38)}
.article p a:hover,.article li a:hover{color:var(--navy);border-color:var(--navy)}
.article h3{font-family:var(--serif);font-weight:600;font-size:var(--fs-lead);line-height:var(--lh-sub);margin:1.8rem 0 .6rem}
.article ul,.article ol{margin:0 0 1.25rem;padding-inline-start:1.4rem;color:var(--ink-2)}
.article li{margin-bottom:.45rem}
/* Govde listeleri tarayici varsayilani disc kullaniyordu; sistemdeki diger
   BES liste bileseni (.a-key, .a-docs, .aud, .area, .a-side) baklava. */
.a-body>ul{list-style:none;padding-inline-start:0}
.a-body>ul>li{position:relative;padding-inline-start:1.4rem}
.a-body>ul>li::before{content:"";position:absolute;inset-inline-start:.2rem;
  top:.72em;width:.35rem;height:.35rem;background:var(--accent);transform:rotate(45deg)}
.article blockquote{margin:2rem 0;padding:1.3rem 1.5rem;border-inline-start:3px solid var(--accent);background:var(--card);font-family:var(--serif);font-style:italic;font-size:1.24rem;line-height:var(--lh-sub);color:var(--navy)}

/* ilk paragraf: buyuk punto + versal. Arapcada harfler bitisik yazildigi
   icin ilk harfi kopartmak kelimeyi bozar — orada kapali. */
/* Olcu: 688px sutun + 17.28px Source Sans = satirda 94 karakter (Arapcada
   108) — okunabilirlik bandi 45-80. Sutun 36rem'e indi, punto buyudu; 74
   karaktere iniyor. max-width dar ekranlarda da tavani koruyor. */
.a-body{font-size:1.14rem;max-width:34em}
html[lang="ar"] .a-body{font-size:1.24rem;line-height:1.85;max-width:31em}
.a-body>p.a-lede{font-size:1.22rem;line-height:1.62;color:var(--navy)}
.a-body>p.a-lede::first-letter{float:inline-start;font-family:var(--serif);font-weight:500;
  font-size:3.4em;line-height:.84;margin-inline-end:.12em;margin-block-start:.04em;
  color:var(--accent-ink)}
[lang="ar"] .a-body>p.a-lede::first-letter{float:none;font-size:inherit;margin:0;
  line-height:inherit;color:inherit;font-family:inherit}

/* bolum basliklari numaralanir; rakam kenar bosluguna dusar. 120 makalenin
   6'sinda baslik metninde elle "1. " yaziyordu — build.py onlari temizliyor,
   yoksa numara ikilenirdi. */
.a-body{counter-reset:ab}
.a-body>h2{counter-increment:ab;position:relative;
  font-family:var(--serif);font-weight:500;font-size:clamp(1.5rem,1.18rem + 1.3vw,2.25rem);
  line-height:var(--lh-title);margin:2.6rem 0 .9rem}
.a-body>h2::before{content:counter(ab,decimal-leading-zero);position:absolute;
  inset-inline-end:calc(100% + 1.2rem);top:.18em;font-family:var(--serif);font-size:.62em;
  color:var(--accent-ink);letter-spacing:.02em;
  font-variant-numeric:lining-nums tabular-nums}
/* Arapca basimda bolum numaralari da Arap rakami: sayfanin geri kalani
   oyle (adimlar ١-٥ ile numaralaniyor). */
[lang="ar"] .a-body>h2::before{content:counter(ab,arabic-indic)}
.article h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.5rem,1.18rem + 1.3vw,2.25rem);line-height:var(--lh-title);margin:2.6rem 0 .9rem}

/* ---------- "Kisa cevap" levhasi ---------- */
/* 99 sayfada bu sinif vardi ve HIC kurali yoktu: .article h2'ye dusuyor,
   .a-body disinda oldugu icin kenar sayacini almiyor ve icindekilerde
   gorunmuyordu — numarali dizi sessizce kesiliyordu. Artik ayri bir
   seviye: bolum degil, bolum sonrasi blok basligi. */
.a-faq-h{font-family:var(--sans);font-size:.72rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent-ink);
  margin:3rem 0 .8rem}

.a-key{position:relative;background:var(--navy-deep);color:#fff;
  padding:clamp(1.4rem,3vw,2rem) clamp(1.5rem,3vw,2.1rem);margin:0 0 2.6rem;isolation:isolate}
.a-key::after{content:"";position:absolute;inset:0;z-index:-1;
  background-image:var(--grain);pointer-events:none}
.a-key .smallcaps{color:var(--accent-soft)}
.a-key ul{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.7rem}
.a-key li{position:relative;padding-inline-start:1.5rem;color:#E5EAEF;line-height:1.6}
.a-key li::before{content:"";position:absolute;inset-inline-start:.15rem;top:.72em;
  width:.38rem;height:.38rem;background:var(--accent);transform:rotate(45deg)}

/* ---------- govde bilesenleri (makale JSON'unda kullanilir) ---------- */
/* adim/zaman cizelgesi */
/* .article ol (0,1,1) bu kurali (0,1,0) eziyordu: adimlar govdeden 22.4px
   iceri kayiyor ve ust boslugunu kaybediyordu. Ozgullugu esitliyoruz. */
.article ol.a-steps{list-style:none;counter-reset:st;margin:2rem 0;
  padding-inline-start:0;display:grid;gap:0}
.article .a-steps li{margin-bottom:0}
.a-steps li{counter-increment:st;position:relative;padding:0 0 1.5rem 3.2rem;
  padding-inline:3.2rem 0}
.a-steps li::before{content:counter(st);position:absolute;inset-inline-start:0;top:0;
  width:2.1rem;height:2.1rem;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:1.05rem;color:var(--accent-ink-2);
  font-variant-numeric:lining-nums tabular-nums;
  border:1px solid var(--line-strong);background:var(--card);z-index:1}
.a-steps li::after{content:"";position:absolute;inset-inline-start:1.05rem;top:2.1rem;
  bottom:0;width:1px;background:var(--line)}
.a-steps li:last-child::after{display:none}
.a-steps b{display:block;font-family:var(--serif);font-size:var(--fs-lead);font-weight:600;
  line-height:var(--lh-sub);margin-bottom:.2rem}
.a-steps span{display:block;color:var(--navy-soft)}

/* karsilastirma tablosu — dar ekranda kendi kabinda kayar */
.a-tablo{margin:2rem 0;overflow-x:auto;border:1px solid var(--line);background:var(--card)}
.a-tablo table{width:100%;border-collapse:collapse;font-size:.99rem}
.a-tablo th,.a-tablo td{text-align:start;padding:.85rem 1.1rem;
  border-bottom:1px solid var(--line);vertical-align:top}
.a-tablo thead th{font-family:var(--sans);font-size:.7rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-ink-2);background:var(--paper-2);
  border-bottom:1px solid var(--line-strong)}
.a-tablo tbody th{font-weight:600;color:var(--navy);width:34%}
.a-tablo td{color:var(--ink-2)}
.a-tablo tr:last-child th,.a-tablo tr:last-child td{border-bottom:0}

/* belge kontrol listesi */
.a-docs{margin:2rem 0;padding:1.4rem 1.5rem;background:var(--card);border:1px solid var(--line)}
.a-docs>b{display:block;font-family:var(--sans);font-size:.7rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:.9rem}
.a-docs ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.a-docs li{position:relative;padding-inline-start:1.7rem;line-height:1.55;color:var(--ink-2)}
.a-docs li::before{content:"";position:absolute;inset-inline-start:0;top:.42em;
  width:.72rem;height:.72rem;border:1px solid var(--line-strong)}
.a-docs li::after{content:"";position:absolute;inset-inline-start:.2rem;top:.62em;
  width:.5rem;height:.28rem;border-inline-start:1.5px solid var(--accent-ink);
  border-bottom:1.5px solid var(--accent-ink);transform:rotate(-45deg)}
@media(min-width:720px){.a-docs ul{grid-template-columns:1fr 1fr;gap:.6rem 1.6rem}}

/* sure/uyari kutusu */
.a-callout{position:relative;margin:2rem 0;padding:1.15rem 1.3rem;background:var(--card);
  border:1px solid var(--line);border-inline-start:3px solid var(--accent-ink);
  color:var(--ink-2)}
.a-callout b{color:var(--navy)}
.a-callout p{margin:0}
.a-callout p+p{margin-top:.6rem}

/* NOT: .a-figure kaldirildi (2026-08-09) — hicbir makalede kullanilmadi
   ve sema gorevini .a-steps zaten goruyor. Gerekirse gecmisten geri alinir. */

/* ---------- yazi sonu imzasi ---------- */
/* Eskiden burada kuru bir "a-note" kutusu vardi ve sayfayi bos bir boslukla
   bitiriyordu. Imza hem bitis isareti hem kunye. */
.a-sign{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:start;
  margin:2.8rem 0 0;padding-top:1.5rem;border-top:1px solid var(--line)}
.a-sign img{width:36px;height:auto}
.a-sign b{display:block;font-family:var(--serif);font-size:var(--fs-lead-sm);font-weight:600;
  line-height:var(--lh-sub)}
.a-sign>div>span{display:block;font-size:.76rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent-ink);margin:.15rem 0 .7rem}
.a-sign p{margin:0;font-size:.92rem;line-height:1.6;color:var(--navy-soft)}

/* ---------- sag ray ---------- */
.a-ask{position:relative;background:var(--card);border:1px solid var(--line);
  padding:1.5rem 1.4rem}
.a-ask-i{display:block;color:var(--accent-ink);margin-bottom:.8rem}
.a-ask-i .ico{width:2rem;height:2rem}
.a-ask b{display:block;font-family:var(--serif);font-size:var(--fs-lead);font-weight:600;
  line-height:var(--lh-sub);margin-bottom:.35rem}
.a-ask p{margin:0 0 1.2rem;font-size:.95rem;line-height:1.55;color:var(--navy-soft)}
.a-ask .b1{display:block;text-align:center;font-size:.8rem;padding:.85rem 1rem}
.a-plate{position:relative;display:block;margin-top:1.1rem;overflow:hidden;
  border:1px solid var(--line)}
.a-plate img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;--zoom:1;transform:scale(var(--zoom));transition:transform .6s cubic-bezier(.2,.6,.2,1)}

.a-plate span{position:absolute;inset-block-end:0;inset-inline:0;
  background:linear-gradient(transparent,rgba(12,26,52,.88) 55%);
  padding:1.6rem .95rem .8rem;display:grid;gap:.1rem}
.a-plate em{font-style:normal;font-size:.62rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent-soft)}
.a-plate b{font-family:var(--serif);font-size:var(--fs-lead-sm);font-weight:600;line-height:1.25;color:#fff}

/* ---------- makale izgarasi: dar ekranlar ---------- */
@media(max-width:1300px){
  /* sol sutun: once icindekiler, altinda CTA; sag sutun makale */
  /* grid-template-rows verilmezse .article iki satiri kapsadigi icin
     yuksekligi satirlara esit dagiliyor ve icindekiler ile CTA karti
     arasinda 1670px bosluk aciliyordu (1180px'te olculdu). */
  .a-shell{max-width:1040px;grid-template-areas:"toc art" "ask art";
    grid-template-columns:minmax(11rem,15rem) minmax(0,36rem);
    grid-template-rows:auto 1fr;align-content:start}
  .a-rail-r{margin-top:1.8rem}
  .a-body>h2::before{position:static;display:block;margin-bottom:.15rem;font-size:.5em}
}
@media(max-width:1040px){
  .a-shell{max-width:760px;grid-template-areas:"toc" "art" "ask";
    grid-template-columns:minmax(0,1fr)}
  .a-rail{position:static}
  .a-rail-l{border:1px solid var(--line);background:var(--card);padding:1rem 1.2rem;
    margin-bottom:2rem}
  .a-toc>summary{display:flex;justify-content:space-between;align-items:center;
    cursor:pointer;list-style:none}
  .a-toc>summary::-webkit-details-marker{display:none}
  .a-toc>summary::after{content:"";width:.42rem;height:.42rem;border-inline-end:1px solid currentColor;
    border-bottom:1px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .25s}
  .a-toc[open]>summary::after{transform:rotate(-135deg) translateY(-1px)}
  .a-rail-r{margin-top:2.4rem;display:grid;gap:1.1rem}
  .a-rail-r .a-plate{margin-top:0}
}
/* insights linked cards */
a.in-link{display:inline-block;margin-top:auto;padding-top:1rem;font-weight:600;
  color:var(--accent-ink);font-size:.95rem;border-bottom:1px solid transparent}
a.in-link:hover{color:var(--navy);border-bottom-color:var(--accent)}

/* footer */
footer.site{background:var(--navy-deep);color:#7E92A6;padding:3.4rem 0 1.8rem;font-size:.92rem;border-top:1px solid rgba(127,179,211,.25)}
.f-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.2rem;margin-bottom:2.4rem}
footer.site .logo img{height:44px}
footer.site h2{font-size:.68rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);margin:0 0 .9rem}
footer.site ul{list-style:none;margin:0;padding:0;display:grid;gap:.12rem}
footer.site a{color:var(--mist)}
footer.site a:hover{color:#fff}
.f-bot{border-top:1px solid rgba(126,146,166,.2);padding-top:1.4rem;display:flex;flex-wrap:wrap;gap:.8rem 2rem;justify-content:space-between;font-size:.8rem}

/* whatsapp float */
.wa-float{position:fixed;inset-inline-end:1.2rem;bottom:1.2rem;z-index:70;width:52px;height:52px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 8px 26px -8px rgba(0,0,0,.45);transition:transform .2s}
.wa-float:hover{transform:scale(1.08);color:#fff}
/* Bilesenlerin kendi box-shadow'u :focus-visible'in dis halesini eziyordu. */
.wa-float:focus-visible,.fab-chat:focus-visible{
  box-shadow:0 8px 26px -8px rgba(0,0,0,.45),0 0 0 4px var(--accent-soft)}

/* cta band on sub-pages */
.band{background:var(--navy);color:#fff;text-align:center;padding:clamp(3.4rem,7vw,5.4rem) 0}
.band h2{font-family:var(--serif);font-weight:500;font-size:clamp(2rem,4vw,3rem);line-height:var(--lh-display);margin:.4rem 0 .6rem;color:#fff}
.band h2 em{font-style:italic;color:var(--accent-soft)}
.band p{color:var(--mist);max-width:34em;margin:0 auto 1.7rem}

.f-legal{display:flex;gap:1.2rem}
.f-legal a{color:var(--mist);border-bottom:1px solid rgba(157,176,194,.35)}
.f-legal a:hover{color:#fff;border-color:#fff}
.legal .l-updated{font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--navy-soft);margin:0 0 2rem}
.legal h2{font-size:clamp(1.35rem,2.2vw,1.7rem);margin-top:2.4rem}
.legal ul{margin:.6rem 0 1.2rem}
.legal li{margin:.5rem 0}
/* yanlis yazida olan okuyucuyu ilk ekranda dogru yazia gonderen not */
.a-jump{margin:0 0 1.8rem;padding:.9rem 0 .9rem 1rem;font-size:.95rem;line-height:1.6;
  color:var(--navy-soft);border-inline-start:2px solid var(--accent);padding-inline-start:1rem}
.a-jump a{font-weight:600;color:var(--accent-ink)}
.a-jump a:hover{color:var(--navy)}

/* makale sonu: her yazi cikmaz sokakti, ayni alandan uc kardes */
.a-next{margin:2.6rem 0 0;padding-top:1.4rem;border-top:1px solid var(--line)}
.a-next h2{font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent-ink);margin:0 0 .2rem}
.a-next ul{list-style:none;margin:0;padding:0}
.a-next li{border-top:1px solid var(--line)}
.a-next li:first-child{border-top:none}
.a-next a{display:grid;grid-template-columns:3.2rem 1fr;gap:.15rem 1.1rem;align-items:center;
  padding:1rem 0;transition:padding-inline-start .25s}

/* Eskiden 5.6rem'lik plaka kupuruydu; ayni kare sayfada zaten hero'da ve
   sag rayda duruyordu. Alan ikonu tekrari bitiriyor ve okunuyor. */
.an-i{display:flex;align-items:center;justify-content:center;
  width:3.2rem;height:3.2rem;color:var(--accent-ink);
  border:1px solid var(--line);background:var(--card);
  transition:border-color .25s,background .25s,color .25s}
.an-i .ico{width:1.6rem;height:1.6rem}

.an-txt{display:grid;gap:.15rem;min-width:0}
@media(max-width:520px){
  .a-next a{grid-template-columns:1fr}
  .an-i{display:none}
}
.a-next .smallcaps{font-size:.66rem;letter-spacing:.2em}
.a-next b{font-family:var(--serif);font-size:var(--fs-lead);line-height:var(--lh-sub);font-weight:600}
.a-next a:hover b{color:var(--accent-ink)}
.a-next em{font-style:normal;font-size:.8rem;color:var(--navy-soft)}

.a-area{margin:2.2rem 0 0;padding-top:1.2rem;border-top:1px solid var(--line);font-size:.92rem}
.a-area a{font-weight:600;letter-spacing:.04em;color:var(--accent-ink)}
.a-area a:hover{color:var(--navy)}

/* ---------- practice-area landing pages ---------- */
.crumbs{background:var(--paper-2);border-bottom:1px solid var(--line);font-size:.78rem;letter-spacing:.05em}
.crumbs .wrap{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;padding-block:.75rem;color:var(--navy-soft)}
.crumbs a{color:var(--navy-soft)}
.crumbs a:hover{color:var(--accent)}
/* WCAG 2.2 SC 2.5.8: cumle icinde olmayan baglantilarda hedef en az 24x24
   CSS px olmali. Kirinti, alt bilgi ve kenar cubugu baglantilari 21px idi. */
.crumbs a,.a-side-alt,footer.site ul a,.f-bot a,.a-area a{display:inline-block;padding-block:.22rem}
.crumbs [aria-current]{color:var(--navy);font-weight:600}
.crumbs span[aria-hidden]{color:var(--accent-soft)}

.a-split{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,.85fr);gap:clamp(2.2rem,5vw,4rem);align-items:start}
.handles{display:grid;gap:1.6rem;margin-top:1.4rem}
.handle{padding-inline-start:1.3rem;border-inline-start:2px solid var(--line)}
.handle h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.5rem,2.6vw,1.95rem);margin:0 0 .35rem;line-height:1.25}
.handle p{margin:0;color:var(--navy-soft)}
.handle:hover{border-inline-start-color:var(--accent-ink)}

.a-side{position:sticky;top:106px;background:var(--card);border:1px solid var(--line);padding:1.6rem 1.5rem}
.a-side h3{font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--accent-ink);margin:0 0 1rem}
.a-side ul{list-style:none;margin:0 0 1.5rem;padding:0;display:grid;gap:.7rem}
.a-side li{position:relative;padding-inline-start:1.1rem;font-size:.98rem;line-height:1.55}
.a-side li::before{content:"";position:absolute;inset-inline-start:0;top:.62em;width:.38rem;height:.38rem;background:var(--accent);transform:rotate(45deg)}
.a-side .b1{display:block;text-align:center}
.a-side-alt{display:block;margin-top:.8rem;text-align:center;font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--navy-soft)}
.a-side-alt:hover{color:var(--accent-ink)}

.oth{display:grid;grid-template-columns:repeat(auto-fill,minmax(264px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.oth-3{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.oth a{background:var(--card);padding:1.15rem 1.25rem;transition:background .25s}
.oth a:hover{background:var(--navy)}
.oth b{display:block;font-family:var(--serif);font-size:var(--fs-lead-sm);font-weight:600;line-height:1.2;margin-bottom:.2rem}
.oth span{display:block;font-size:.86rem;line-height:1.5;color:var(--navy-soft)}
.oth a:hover b{color:var(--accent-soft)}
.oth a:hover span{color:var(--mist)}

@media(max-width:900px){
  .a-split{grid-template-columns:1fr}
  .a-side{position:static}
}

/* ---------- site assistant ---------- */
.fabs{position:fixed;inset-inline-end:1.2rem;bottom:1.2rem;z-index:70;display:flex;flex-direction:column;align-items:flex-end;gap:.6rem}
/* sabit yigin mobilde son satirlarin ustune biniyordu; sayfanin
   dibine kendi yuksekligi kadar pay birak */
footer.site{padding-block:3.4rem calc(1.8rem + var(--fab-pay))}
@media(max-width:760px){:root{--fab-pay:8.5rem}
  .fabs{inset-inline-end:.8rem;bottom:.8rem}}
.wa-float{position:static}
.fab-chat{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--sans);font-size:.78rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent-soft);background:var(--navy-deep);
  border:1px solid var(--accent);padding:.7rem 1.05rem;cursor:pointer;box-shadow:0 8px 26px -8px rgba(0,0,0,.45);
  transition:background .25s,color .25s}
.fab-chat:hover{background:var(--accent);color:var(--navy)}
.fab-chat svg{flex:0 0 auto}
.fab-chat[aria-expanded="true"]{opacity:0;pointer-events:none}

.chat{padding:0;position:fixed;inset-inline-end:1.2rem;bottom:1.2rem;z-index:95;width:min(392px,calc(100vw - 2.4rem));
  max-height:min(660px,calc(100vh - 2.4rem));display:flex;flex-direction:column;background:var(--paper);
  border:1px solid var(--navy-deep);box-shadow:0 30px 70px -24px rgba(12,26,52,.55);
  animation:chat-in .32s cubic-bezier(.2,.7,.3,1)}
.chat[hidden]{display:none}
@keyframes chat-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.chat-hd{display:flex;align-items:center;gap:.75rem;padding:.85rem 1rem;background:var(--navy-deep);color:#fff;flex:0 0 auto}
.chat-hd img{width:30px;height:auto;flex:0 0 auto}
.chat-hd b{display:block;font-family:var(--serif);font-size:1.22rem;font-weight:600;line-height:1.15;color:#fff}
.chat-hd span{display:block;font-size:.62rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-soft)}
.chat-hd div{flex:1 1 auto;min-width:0}
.chat-x{background:none;border:none;color:var(--accent-soft);font-size:1.7rem;line-height:1;cursor:pointer;padding:0 .2rem}
.chat-x:hover{color:#fff}

.chat-log{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:1.1rem 1rem;display:flex;flex-direction:column;gap:.75rem}
.msg{display:flex}
.msg.u{justify-content:flex-end}
.bub{max-width:88%;padding:.7rem .9rem;font-size:.95rem;line-height:1.6;border:1px solid var(--line);background:var(--card)}
.msg.u .bub{background:var(--navy);border-color:var(--navy);color:#fff}
.bub p{margin:0 0 .55rem}
.bub p:last-child{margin:0}
.bub ul{margin:.2rem 0 .55rem;padding-inline-start:1.1rem}
.bub li{margin:.18rem 0}
.bub a{color:var(--accent-ink);border-bottom:1px solid rgba(36,119,167,.45)}
.bub a:hover{color:var(--navy);border-color:var(--navy)}
.bub strong{font-weight:600}
.bub .src{display:block;margin-top:.6rem;padding-top:.5rem;border-top:1px solid var(--line);
  font-size:.72rem;letter-spacing:.06em;color:var(--navy-soft)}
.bub.err{background:#FBF1EF;border-color:#E3C8C2}
/* asistan yanit veremediginde cikis kapisi: metin zaten WhatsApp diyordu
   ama tiklanacak bir sey yoktu */
.bub .bub-wa{display:inline-flex;align-items:center;min-height:32px;margin-top:.6rem;
  padding:.4rem .95rem;background:#25D366;color:#fff;border:none;font-size:.8rem;
  font-weight:600;letter-spacing:.06em}
.bub .bub-wa:hover{background:#1DA851;color:#fff;border:none}

.dots{display:inline-flex;gap:.28rem;padding:.15rem 0}
.dots i{width:.4rem;height:.4rem;background:var(--accent);border-radius:50%;animation:dot 1.1s ease-in-out infinite}
.dots i:nth-child(2){animation-delay:.16s}
.dots i:nth-child(3){animation-delay:.32s}
@keyframes dot{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.chips{display:flex;flex-wrap:wrap;gap:.4rem}
.chips button{font-family:var(--sans);font-size:.82rem;line-height:1.35;text-align:start;color:var(--navy);
  background:transparent;border:1px solid var(--line);padding:.45rem .7rem;cursor:pointer;transition:background .2s,border-color .2s}
.chips button:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.chat-live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.chat-in{display:flex;align-items:flex-end;gap:.5rem;padding:.7rem;border-top:1px solid var(--line);background:var(--card);flex:0 0 auto}
.chat-in textarea{flex:1 1 auto;resize:none;max-height:120px;font-family:var(--sans);font-size:.95rem;line-height:1.5;
  color:var(--navy);background:transparent;border:none;padding:.4rem .2rem}
.chat-in textarea:focus{outline:none}
.chat-send{flex:0 0 auto;background:var(--accent);color:var(--navy);border:none;width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s}
.chat-send:hover{background:var(--navy);color:var(--accent-soft)}
.chat-send:disabled{opacity:.4;cursor:default}
html[dir="rtl"] .chat-send svg,html[lang="ar"] .chat-send svg{transform:scaleX(-1)}

.chat-ft{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.3rem .8rem;
  padding:.6rem 1rem .7rem;background:var(--paper-2);border-top:1px solid var(--line);font-size:.7rem;line-height:1.5;color:var(--navy-soft);flex:0 0 auto}
.chat-ft a{color:var(--accent-ink-2);font-weight:600;white-space:nowrap}
.chat-ft a:hover{color:var(--navy)}

@media(max-width:560px){
  .chat{inset:0;width:100%;max-height:100%;border:none}
  .fab-chat span{display:none}
  .fab-chat{padding:.85rem;border-radius:50%;width:52px;height:52px;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  .chat{animation:none}
  .dots i{animation:none;opacity:.6}
}

/* ---------- responsive ---------- */
/* ---------- responsive ---------- */
/* 1560 ve 1280 kirilimlari SILINDI: birincisinin isini artik --nav-fs/--nav-gap
   clamp'i yapiyor, ikincisi 1021-1280 arasinda TAM MENU ILE BURGER'I AYNI ANDA
   gosteren bir hataydi (.nav ancak 1020'de gizleniyordu) ve artik markup'ta
   olmayan .langs.top'u gizliyordu. Tam menu 1020px'e kadar ayakta. */
@media(max-width:1200px){
  /* uc sutun 1200 altinda dar kaliyor; ucuncusu alta iner */
  .aud{grid-template-columns:1fr 1fr}
  .aud>div:first-child{grid-column:1/-1}
  header.site{--logo-h:34px}
  header.site.scrolled{--logo-h:30px}
}
@media(max-width:1020px){
  .nav{display:none}
  .hd-end{margin-inline-start:auto;padding-inline-start:0;border-inline-start:none}
  .burger{display:inline-flex}
  /* WhatsApp mobilde .fabs yuzen butonunda zaten var; baslikta DIL kaliyor —
     yedi dilli bir sitede 390px'te bile dil degistirilebilmeli */
  .hd .cta{display:none}
  header.site{--logo-h:32px;--hd-h:52px;--util-h:32px}
  header.site.scrolled{--logo-h:32px}
  .tgrid{grid-template-columns:1fr 1fr}
  .prax-grid{grid-template-columns:1fr}
  .prax-left{position:static}
  .ins{grid-template-columns:1fr}
  .f-cols{grid-template-columns:1fr 1fr}
  .c-grid{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr}
  .paytrust{grid-template-columns:1fr}
  .rv-l,.rv-r{transform:translateY(26px)}
  footer.site .logo img{height:38px}
}
@media(max-width:560px){
  /* seritte once ADRES dusuyor, Odeme degil: adres bir kunye bilgisi,
     Odeme bir hedef */
  .u-place,.u-dot{display:none}
}
/* ara adim: uc sutun 1020px altinda sikisiyor — plaka basligin ustune gecer */
@media(max-width:1020px){
  .area{grid-template-columns:minmax(10em,17em) 1fr}
  .area-head{display:block}
  .area-ttl{margin-top:1.1rem}
}
@media(max-width:760px){
  .aud{grid-template-columns:1fr;grid-template-rows:none}
  .aud>div{display:block;grid-row:auto}
  .aud>div+div{border-inline-start:none;border-top:1px solid var(--line)}
  .trust .wrap{grid-template-columns:1fr 1fr}
  .trust .cell{padding:2rem .8rem}
  /* uc sutun tek sutuna iner; sarmalayici izgaradan cikmayi birakir ki
     plaka ve baslik ust uste gelsin */
  .area{grid-template-columns:1fr}
  .area-head{display:block}
  .area-ttl{margin-top:1.1rem}
  .area ul{grid-template-columns:1fr}
  .r-item{grid-template-columns:132px 1fr;gap:1.2rem}
  .f-cols{grid-template-columns:1fr}
}
@media(max-width:480px){
  .r-item{grid-template-columns:1fr}
  .r-item .ph{max-width:230px}
  .tgrid{grid-template-columns:1fr 1fr;gap:1rem}
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  /* 2026-08-09 katmaninin dort zoom'u ve .a-next'in padding gecisi dort
     reduced-motion blogunun hicbirinde yoktu; padding gecisi ustelik
     LAYOUT animasyonu — bu kipte en rahatsiz eden tur. */
  .a-plate img,.ic-plate img,.area-plate img{--zoom:1 !important;transition:none}
  .a-next a,.a-toc a,.prow-i,.oth-i,.oth a{transition:none}
  .a-next a:hover{padding-inline-start:0}
  html{scroll-behavior:auto}
  /* Hero artik sabit — hareket azaltma kipinde ayrica duzlestirmeye gerek
     yok; yalnizca kaydirma ipucundaki damla animasyonu kaldiriliyor. */
  .hint{display:none}
  .rv,.rv-l,.rv-r{opacity:1;transform:none;transition:none}
  .quote .par{transform:none}
  .t img,.wa-float{transition:none}
}

/* ---------- Arabic (RTL) ---------- */
html[lang="ar"]{--serif:"Amiri",serif;--sans:"IBM Plex Sans Arabic",system-ui,sans-serif}
html[lang="ar"] .smallcaps,html[lang="ar"] .nav a,html[lang="ar"] .cities,
html[lang="ar"] .b1,html[lang="ar"] .b2,html[lang="ar"] .trust span,
/* footer.site h4 hicbir seyi eslesmiyordu: altbilgi basliklari <h2>.
   Bitisik nesih harflerini .24em aralik gorsel olarak koparıyordu. */
html[lang="ar"] .field label,html[lang="ar"] footer.site h2,html[lang="ar"] .role,
html[lang="ar"] .area .tag,html[lang="ar"] .ed span,
html[lang="ar"] .hint,html[lang="ar"] .t span,
html[lang="ar"] .a-next h2,html[lang="ar"] .a-toc>summary,html[lang="ar"] .lg-h,
html[lang="ar"] .a-plate em,html[lang="ar"] .u-place,html[lang="ar"] .u-pay,
html[lang="ar"] .a-sign>div>span,html[lang="ar"] .a-side-alt,html[lang="ar"] .hd .cta,
html[lang="ar"] .article .a-meta,html[lang="ar"] .article .a-meta span,
html[lang="ar"] .crumbs,html[lang="ar"] .crumbs a,html[lang="ar"] .a-area a,
html[lang="ar"] .ic-min,html[lang="ar"] .a-side h3,html[lang="ar"] .a-docs>b,
html[lang="ar"] .a-tablo thead th,html[lang="ar"] .chip,html[lang="ar"] .ins-more,
html[lang="ar"] .fab-chat{letter-spacing:0}
html[lang="ar"] .ch h1,html[lang="ar"] .ch .h,html[lang="ar"] .phero h1{line-height:1.35}
/* Amiri yalniz 400 ve 700 tasiyor (document.fonts ile dogrulandi): 500
   sessizce 400'e dusuyor, 600 ise 700'e cikiyor. Sonuc — Latin baskida serif
   kaydi 500->600 (bir kademe), Arapcada ayni kayit 400->700 (uc kademe):
   ana basliklar bir kademe HAFIF, alt basliklar bir kademe KALIN basiliyordu.
   Haritayi acikca kuruyoruz ki Arapcada da tek kademelik kontrast olsun. */
html[lang="ar"] .ch h1,html[lang="ar"] .ch .h,html[lang="ar"] .phero h1,
html[lang="ar"] .sec-h h2,html[lang="ar"] .band h2,html[lang="ar"] .cta-final h2,
html[lang="ar"] .prax-left h2,html[lang="ar"] .a-body>h2,html[lang="ar"] .article h2,
html[lang="ar"] .area h2,html[lang="ar"] .quote blockquote{font-weight:700}
html[lang="ar"] .a-sign b,html[lang="ar"] .a-ask b,html[lang="ar"] .a-next b,
html[lang="ar"] .oth b,html[lang="ar"] .faq summary,html[lang="ar"] .a-steps b,
html[lang="ar"] .t b,html[lang="ar"] .a-plate b{font-weight:400}
/* Amiri'nin em kutusu ~1,20em: 1,08 oraninda satirlar birbirinin icine
   giriyordu (olculdu, /ar/ ana sayfa .prax-left h2). */
html[lang="ar"]{--lh-display:1.34;--lh-title:1.42;--lh-sub:1.5}
html[lang="ar"] .in-card h3{line-height:1.42}
/* Amiri italigi egik naskh — Arapcada vurgu yatik yaziyla yapilmaz;
   vurguyu renk tasiyor, uc woff2 de yukleme zincirinden dusuyor */
html[lang="ar"] em,html[lang="ar"] i,html[lang="ar"] blockquote,
html[lang="ar"] .quote blockquote em{font-style:normal}