/* ============================================================
   KYOTO ENERJİ — ortak stil dosyası
   Tipografi : Roboto (gövde) / Roboto Condensed (başlık, etiket) / EB Garamond italik (vurgu)
   Yaklaşım  : çizgi ve kutu yerine boşluk ve fotoğrafla ayrım
   ============================================================ */

/* ---------- 1. jetonlar ---------- */
:root{
  /* Beyazlar saf (#FFFFFF): eski soğuk nane kademeleri kaldırıldı.
     Kart yüzeyi için yansız açık gri kullanılıyor.
     Kırmızı kademeler logonun shu (朱) vermilyonuna demirlendi: #EA290A =
     hsl(8,92%,48%). Tüm aile 8-12° tonunda kalır, doygunluk %60-92 arası
     gezinir — eski paletin %20-50'lik kroması kiremit/gül kurusuna kaçıyordu.
     Açıklık merdiveni: 13 → 22 → 42 → 45 → 75.
     Kâğıt 160°, kırmızı 8° — iki farklı sıcaklık, bilinçli tercih. */
  --paper:#FFFFFF;        /* saf beyaz — sayfa zemini */
  --paper-2:#F5F5F5;      /* yansız açık gri — beyaz zeminde kart yüzeyi */
  /* Yazı kademeleri siyaha yakın nötr. Eskiden kırmızı ailesinden
     türetiliyordu (#38110A / #5E2015 / #9A4E3E); zemin saf beyaza dönünce
     o kahverengi tonlar soluk ve bulanık duruyordu. İçlerinde bir tık
     sıcaklık var — vermilyonla yan yana durunca soğuk gri gibi çarpmasın.
     Beyaz üstünde kontrast: 18:1 · 12:1 · 5.8:1 */
  --ink:#141110;          /* gövde metni ve başlıklar */
  --ink-2:#3A3533;        /* paragraf, lede — ikincil */
  --ink-3:#6B6462;        /* etiket, üstbilgi — soluk */
  --hair:rgba(20,17,16,.13);

  /* Koyu bantlar kırmızı ailesinde KALIYOR: marka rengi orada duruyor,
     siyaha çekilen yalnızca açık zemindeki yazı. */
  --field:#38110A;        /* 900 — koyu bant zemini */
  --field-2:#5E2015;      /* 800 */
  --field-ink:#FFFFFF;    /* koyu bant üstündeki yazı */
  --field-muted:#DFA598;  /* 500 · hsl(11,52%,74%) — koyu bantta 8.0:1 */
  --field-hair:rgba(255,255,255,.16);

  /* --accent hem metin rengi hem düğme zemini olarak kullanılıyor, yani iki
     yönde de 4.5:1 tutmak zorunda; #C22E1F ikisinde de 5.1:1 veriyor.
     --accent-parlak logonun ham vermilyonu: metin değil, grafik öğe (alt çizgi,
     odak halkası, işaret) — orada eşik 3:1, o da 3.9:1 ile geçiyor. */
  --accent:#C22E1F;       /* hsl(7,72%,44%) */
  --accent-text:#C22E1F;
  --accent-parlak:#EA290A; /* logo kırmızısı · hsl(8,92%,48%) */
  --accent-on:#FFFFFF;

  /* koyu kırmızı bantlarda ters vurgu: somon düğme, koyu kırmızı yazı */
  --accent-inv:#FF9E86;   /* 400 · koyu bantta 8.4:1 */
  --accent-inv-parlak:#FF8468;
  --accent-inv-on:#38110A;

  /* başlık şeridi: sayfayla aynı beyaz */
  --hd-bg:#FFFFFF;
  --hd-line:rgba(20,17,16,.10);
  --hd-h:6.5rem;          /* hero üstünde saydamken */
  --hd-h-kucuk:4.6rem;    /* kaydırınca ve iç sayfalarda */

  --sans:'Roboto',"Segoe UI",-apple-system,system-ui,Helvetica,Arial,sans-serif;
  --cond:'Roboto Condensed','Roboto',"Segoe UI","Arial Narrow",Helvetica,Arial,sans-serif;
  --serif:'EB Garamond',Georgia,"Times New Roman",serif;
  /* Başlık menüsü ve hero: Sparc düzeninin yazı tipi */
  --pop:'Poppins','Roboto',"Segoe UI",Helvetica,Arial,sans-serif;

  --wrap:80rem;
  --pad:clamp(1.35rem,5vw,4rem);
  --gap:clamp(4.5rem,9vw,8rem);
}

/* Otomatik koyu kip kapalı: telefon koyu kipteyken site komple bordoya
   dönüyor, masaüstündeki açık palet ile aynı görünmüyordu. Koyu palet
   duruyor ama yalnızca <html data-theme="dark"> ile açık biçimde
   seçilirse devreye girer. */
:root[data-theme="dark"]{
  --paper:#1C0A05; --paper-2:#38110A;
  --ink:#FFFFFF; --ink-2:#DFA598; --ink-3:#C4796A;
  --hair:rgba(255,255,255,.12);
  --field:#1C0A05; --field-2:#38110A;
  --field-ink:#FFFFFF; --field-muted:#DFA598; --field-hair:rgba(255,255,255,.11);
  --accent:#FF8468; --accent-text:#FF8468; --accent-parlak:#FF8468; --accent-on:#1C0A05;
  --hd-bg:#38110A; --hd-line:rgba(255,255,255,.13);
}

/* ---------- 2. temel ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;scrollbar-gutter:stable;}
body{
  /* kaydırma çubuğu genişliği: 100vw viewport, 100% ise çubuk hariç genişliktir */
  --sb:calc(100vw - 100%);
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* Bağlantı hedefleri sabit başlığın altında kalmasın */
[id]{scroll-margin-top:calc(var(--hd-h-kucuk) + 1.25rem);}
img{display:block;max-width:100%;}
a{color:inherit;}
button{font:inherit;color:inherit;}
h1,h2,h3,h4{margin:0;font-family:var(--cond);font-weight:700;text-wrap:balance;letter-spacing:-.005em;line-height:1.08;}
/* Gösterim kademesi — h1 ve h2 Poppins: geniş, hafif, negatif harf aralıklı.
   Hero ve "Hizmetlerimiz" başlığının dili artık bütün sayfalarda geçerli.
   h3/h4 Roboto Condensed'de KALIYOR: onlar kart başlığı ve etiket
   ölçüsünde (1.05–1.6rem) kullanılıyor, Poppins 400 o boyutlarda cılız
   duruyor ve etiket karakterini kaybediyor.
   Poppins, Condensed'e göre belirgin geniş: aynı puntoda satır ~%25 daha
   uzun sürüyor, bu yüzden başlıklar daha çok satıra kırılır. text-wrap
   dengeyi kuruyor. */
h1,h2{font-family:var(--pop);font-weight:400;letter-spacing:-.022em;line-height:1.13;}
p{margin:0;}
:focus-visible{outline:2px solid var(--accent-parlak);outline-offset:4px;}

.skip{position:absolute;left:-999px;top:0;z-index:200;background:var(--accent);color:var(--accent-on);padding:.7rem 1.1rem;}
.skip:focus{left:0;}

/* ---------- 3. yardımcılar ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad);}
.band{padding-block:var(--gap);}
.band--top0{padding-top:0;}
.field{
  background:var(--field);color:var(--field-ink);
  --paper:var(--field);--paper-2:var(--field-2);--ink:var(--field-ink);
  --ink-2:var(--field-muted);--ink-3:var(--field-muted);--hair:var(--field-hair);
  --accent-text:var(--accent);
}

/* Koyu kırmızı zeminli tüm bantlarda vurgu somona döner: düğme somon, üstündeki
   yazı koyu kırmızı. Parlak kademe de birlikte dönmeli, yoksa dekoratif çizgiler
   koyu zeminde kaybolur. */
/* .aside-box da bu listede: koyu kırmızı zeminli bir kutu ve içinde .btn
   var. Vurguyu devretmezse cam düğme kırmızı üstünde kırmızı yazıya
   düşüyor (2.96:1) ve okunmuyor. */
.field,.phead,.reach,.ft,.aside-box{
  --accent:var(--accent-inv);
  --accent-text:var(--accent-inv);
  --accent-parlak:var(--accent-inv-parlak);
  --accent-on:var(--accent-inv-on);
}

.kicker{
  font-family:var(--cond);font-size:.8rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:1.5rem;
}
h2{font-size:clamp(2.05rem,4.5vw,3.8rem);}
.lede{font-size:clamp(1.05rem,1.6vw,1.22rem);color:var(--ink-2);max-width:42rem;}

.open-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,6vw,5rem);align-items:end;}
.open-grid h2{font-size:clamp(1.8rem,3.6vw,2.9rem);}
/* --ters: görsel sıra ters, paragraf solda başlık sağda. DOM'da h2 önce kalıyor,
   çünkü belge yapısı ve ekran okuyucular için başlık paragraftan önce gelmeli.
   Değiştirici sınıf: kalan .open-grid bölümleri normal sırada kalsın diye. */
.open-grid--ters h2{grid-area:1/2;}
.open-grid--ters .lede{grid-area:1/1;}
/* --genis: başlığın elle konan satır kırılımı bozulmasın diye o sütun
   geniş tutulur. Kırılım korunacağı için otomatik dengeleme de kapatılır. */
.open-grid--genis{grid-template-columns:minmax(0,1.22fr) minmax(0,1.5fr);}
/* Harf aralığı bir tık sıkılıyor: punto aynı kalırken ikinci satır
   kısalıyor, böylece başlık sütunu daralıp sağa kayabiliyor. */
.open-grid--genis h2{text-wrap:normal;letter-spacing:-.02em;}
@media (max-width:56rem){
  .open-grid{grid-template-columns:1fr;gap:1.5rem;align-items:start;}
  /* Tek sütuna inince yerleşim sıfırlanır: başlık üstte, paragraf altta. */
  .open-grid--ters h2,.open-grid--ters .lede{grid-area:auto;}
}

/* Cam hap düğme. Yüzey currentColor'dan değil doğrudan --accent'ten
   türetiliyor; böylece koyu bantlarda vurgu somona döndüğünde düğme de
   kendiliğinden somon cama dönüyor, ayrı kural gerekmiyor.

   Doluluk %12'de tutuldu: daha koyu bir cam üzerine vurgu renkli yazı
   4.5:1'in altına düşüyordu. Şu hâliyle beyaz zeminde 4.6:1, koyu
   bantta 6.6:1.

   color-mix desteklenmezse arka plan saydam kalır ve düğme çerçeveli bir
   anahat düğmesine dönüşür — okunur, yalnız camsı değil. */
.btn{
  display:inline-flex;align-items:center;gap:.65rem;
  font-family:var(--cond);font-size:.85rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  padding:.95rem 1.7rem;text-decoration:none;cursor:pointer;
  border-radius:999px;
  color:var(--accent-text);
  background:transparent;
  background:color-mix(in srgb,var(--accent) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);
  -webkit-backdrop-filter:blur(10px) saturate(1.3);
  backdrop-filter:blur(10px) saturate(1.3);
  transition:background-color .25s ease,border-color .25s ease,color .25s ease;
}
.btn:hover{
  background:color-mix(in srgb,var(--accent) 22%,transparent);
  border-color:color-mix(in srgb,var(--accent) 58%,transparent);
}
.btn i{font-style:normal;transition:transform .2s ease;}
.btn:hover i{transform:translateX(4px);}

.more{
  display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;
  font-family:var(--cond);font-size:.85rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink);padding-bottom:.35rem;
  box-shadow:inset 0 -2px 0 var(--accent-parlak);
  transition:gap .2s ease;
}
.more:hover{gap:1rem;}

/* ============================================================
   4. BAŞLIK — hero'nun üstünde saydam, kaydırınca zemin alan şerit
   Yerleşim: solda menü grubu · ortada logo · sağda menü + hap düğme.
   Üstteyken saydam ve krem yazılı; sayfa kaydırılınca yüksekliği
   kısalır, soluk beyaz zemin ve mürekkep yazıya döner.

   ÖNCEKİ TASARIMLAR (siteye bağlı değil):
   · v1 hero-v1.css · v2 baslik-v2.css · v3 baslik-v3.css
   · v4 + hero v2  : yedek/2026-08-15-baslik-v4-hero-v2/
   ============================================================ */
.hd{
  position:fixed;top:0;left:0;right:0;z-index:90;
  display:flex;align-items:center;
  height:var(--hd-h);
  /* Açılır panelin zemini şeridin tepesine kadar uzanacak; hangi
     yükseklikte olduğumuzu tek yerden okusun diye değişkende tutuluyor. */
  --hd-simdiki:var(--hd-h);
  color:var(--field-ink);
  transition:height .28s ease,background-color .28s ease,box-shadow .28s ease,color .28s ease;
}
/* Kaydırılmış hâl ve panel açıkken aynı görünüm.
   Şerit buzlu cam: zemin yarı saydam, arkası bulanık. %72 opaklık
   ölçüyle seçildi — altından geçen en koyu bant bile şeridi yeterince
   açık bırakıyor, koyu menü yazısı 7:1'in üstünde kalıyor. Daha
   saydamı koyu bölümlerde menüyü okunmaz yapıyor.

   İki background satırı bilinçli: color-mix'i tanımayan tarayıcı
   ikinciyi atlayıp düz zemine düşer, backdrop-filter yoksa da bulanık
   olmadan saydam kalır — ikisi de okunur. */
/* Yükseklik YALNIZ kaydırınca değişir, panel açılınca değil.
   Panel açılışında da kısaltılınca şerit 104px'ten 74px'e iniyor,
   menü öğeleri 15px yukarı kayıyordu: imleç öğenin alt kenarına yakınsa
   kısalmadan sonra dışarıda kalıyor ve yana kaydırınca komşu başlığın
   pointerenter'ı hiç tetiklenmiyordu — açık panel değişmiyordu. */
.hd[data-kaydi]{height:var(--hd-h-kucuk);--hd-simdiki:var(--hd-h-kucuk);}
.hd[data-kaydi],.hd[data-panel]{
  background:var(--hd-bg);
  background:color-mix(in srgb,var(--hd-bg) 72%,transparent);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  backdrop-filter:blur(16px) saturate(150%);
  color:var(--ink);
  box-shadow:0 1px 0 var(--hd-line),0 18px 40px -30px rgba(20,17,16,.55);
}
/* Doğrudan çocuk seçicisi şart: açılır panelin iç kabı da "wrap"
   sınıfını taşıyor, .hd .wrap onu da yakalardı. */
/* max-width verilmiyor: 80rem'lik ortalı kap menüyü ekranın ortasına
   sıkıştırıyordu. Gruplar böylece sol ve sağ kenara yaklaşıyor. */
.hd > .wrap{
  display:grid;align-items:center;
  grid-template-columns:1fr auto 1fr;
  gap:clamp(1rem,2vw,2.5rem);
  width:100%;max-width:none;
}

/* ---- marka: ortada yatay kilit ---- */
/* Sütun ve satır açıkça verilmezse otomatik yerleşim logoyu alt satıra atıyor */
.brand{position:relative;display:flex;align-items:center;gap:.6rem;text-decoration:none;color:inherit;grid-column:2;grid-row:1;justify-self:center;}
.brand picture{display:flex;flex:none;}
.brand-mark{width:auto;height:1.55rem;flex:none;}
.brand-tip{width:auto;height:1.05rem;}
/* Saydam hâlde krem, zeminli hâlde koyu logo görünür.
   Yerleşim burada tanımlı; markup'ta satır içi stil kullanılırsa
   bu kurallar ezilir ve iki logo birden görünür. */
/* İki logo üst üste duruyor; görünürlük opaklıkla, başlığın zemin
   geçişiyle aynı sürede değişiyor. display ile yapıldığında koyu logo
   zemin gelmeden görünüp fotoğrafın üstünde kayboluyordu. */
.brand .acik,.brand .koyu{
  display:flex;align-items:center;gap:.6rem;
  transition:opacity .28s ease;
}
.brand .koyu{position:absolute;left:0;top:0;height:100%;opacity:0;pointer-events:none;}
.hd[data-kaydi] .brand .acik,.hd[data-panel] .brand .acik{opacity:0;}
.hd[data-kaydi] .brand .koyu,.hd[data-panel] .brand .koyu{opacity:1;}

/* ---- menü grupları ----
   Geniş ekranda saran kaplar kalkar, .nav-sol / .brand / .nav-sag
   doğrudan başlığın ızgarasına yerleşir. */
.nav,.nav-govde{display:contents;}
.nav-baslik,.nav-sosyal-blok,.nav-alt{display:none;}
.nav-sol{grid-column:1;grid-row:1;justify-self:start;}
/* Sütun esnetiliyor ve .dil'e margin-inline:auto veriliyor: artan boşluk hapın
   iki yanına eşit bölünür, hap logo ile "İletişim"in tam ortasına oturur,
   menü de sağ kenarda kalır. */
.nav-sag{grid-column:3;grid-row:1;justify-self:stretch;display:flex;align-items:center;}
.nav-sag > .dil{margin-inline:auto;}

/* ---- dil seçici ----
   Hap düğme: yuvarlak bayrak + dil adı + ok. Üzerine gelince (ya da klavyeyle
   odaklanınca) altında aynı yapıda bir liste açılır. Renkler currentColor'dan
   türetiliyor; böylece başlık saydamken krem, kaydırılmışken mürekkep,
   footer'da koyu zeminde açık ton olarak kendiliğinden uyuyor. */
/* ---- üst menüdeki arama girişi ----
   Geniş ekranda yalnız büyüteç; "Ara" yazısı ekran okuyucuya kalır ama
   çekmece kipinde görünür olur, çünkü orada ikon tek başına anlaşılmıyor. */
.nav-ara a{gap:.45rem;}
.nav-ara svg{width:1.2rem;height:1.2rem;flex:none;}
.nav-ara-yazi{display:none;}

.dil{position:relative;flex:none;}
.dil-btn{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.42rem .62rem .42rem .42rem;
  border-radius:999px;cursor:pointer;color:inherit;font:inherit;
  background:color-mix(in srgb,currentColor 7%,transparent);
  border:1px solid color-mix(in srgb,currentColor 26%,transparent);
  transition:background-color .25s ease,border-color .25s ease;
}
.dil-bayrak{width:1.45rem;height:1.45rem;flex:none;border-radius:50%;}
.dil-ad{font-family:var(--sans);font-size:.92rem;font-weight:500;white-space:nowrap;}
.dil-ok{width:1.05rem;height:1.05rem;flex:none;transition:transform .25s ease,opacity .2s ease;}
.dil:hover .dil-btn,.dil:focus-within .dil-btn{
  background:color-mix(in srgb,currentColor 13%,transparent);
  border-color:color-mix(in srgb,currentColor 46%,transparent);
}
.dil:hover .dil-btn .dil-ok,.dil:focus-within .dil-btn .dil-ok{transform:translateX(.15rem);}
/* hap ile liste arasındaki boşlukta fare kaybolmasın diye görünmez köprü */
.dil::after{content:"";position:absolute;left:0;right:0;top:100%;height:.65rem;}
.dil-liste{
  position:absolute;top:calc(100% + .55rem);left:50%;translate:-50% 0;
  min-width:100%;width:max-content;z-index:5;
  margin:0;padding:.35rem;list-style:none;
  border-radius:1.15rem;background:var(--paper-2);color:var(--ink);
  box-shadow:0 18px 44px -24px rgba(20,17,16,.6),0 0 0 1px var(--hair) inset;
  opacity:0;visibility:hidden;transform:translateY(-.35rem);
  transition:opacity .22s ease,transform .22s ease,visibility .22s;
}
.dil:hover .dil-liste,.dil:focus-within .dil-liste{opacity:1;visibility:visible;transform:none;}
.dil-liste a{
  display:flex;align-items:center;gap:.55rem;
  padding:.5rem .7rem;border-radius:999px;
  text-decoration:none;color:inherit;transition:background-color .2s ease;
}
.dil-liste a:hover{background:var(--hair);}
.dil-liste .dil-ok{margin-left:auto;opacity:.5;}
.dil-liste a:hover .dil-ok{opacity:1;transform:translateX(.15rem);}

/* Hero üstünde başlık saydamken liste de cam olur.
   Zemin bilerek KOYU seçiliyor: hap gibi currentColor'dan türetseydik krem
   bir yüzeye krem yazı gelirdi ve videonun aydınlık karelerinde okunmazdı.
   Koyu cam + bulanıklık her karede güvenli.
   Panel açıkken kural geçmez — o hâlde başlık zaten zeminli ve yazı koyu. */
.hd:not([data-kaydi]):not([data-panel]) .dil-liste{
  background:rgba(24,10,6,.55);
  color:var(--field-ink);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
  backdrop-filter:blur(14px) saturate(1.15);
  box-shadow:0 18px 44px -24px rgba(0,0,0,.7),
             0 0 0 1px color-mix(in srgb,var(--field-ink) 22%,transparent) inset;
}
.hd:not([data-kaydi]):not([data-panel]) .dil-liste a:hover{
  background:color-mix(in srgb,var(--field-ink) 16%,transparent);
}

/* Footer'da da aynı dil: liste hapla aynı currentColor karışımından
   türetiliyor, böylece ikisi tek parça gibi duruyor. Eskiden düz --field-2
   bloğuydu; koyu zeminde yamalı görünüyordu ve --hair footer'da
   devredilmediği için üzerine gelme vurgusu da görünmüyordu. */
.ft .dil{margin-top:.3rem;}
.ft .dil-liste{
  background:color-mix(in srgb,currentColor 12%,transparent);
  color:inherit;
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  box-shadow:0 18px 44px -24px rgba(0,0,0,.55),
             0 0 0 1px color-mix(in srgb,currentColor 24%,transparent) inset;
}
.ft .dil-liste a:hover{background:color-mix(in srgb,currentColor 16%,transparent);}
/* görsel olarak gizli, ekran okuyucuya açık */
.gizli{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;}
.menu{display:flex;align-items:center;gap:clamp(.9rem,2.1vw,2.4rem);list-style:none;margin:0;padding:0;}
.menu > li{position:static;}
.menu > li > a,.menu > li > button{
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--pop);font-size:clamp(1.05rem,1.2vw,1.5rem);font-weight:500;line-height:1.2;
  color:inherit;background:none;border:0;padding:.45rem 0;margin:0;
  text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:opacity .2s ease,color .2s ease;
}
.menu > li > a:hover,.menu > li > button:hover,
.menu > li.acik > a,.menu > li.here > a{opacity:.62;}
.hd[data-kaydi] .menu > li > a:hover,.hd[data-kaydi] .menu > li > button:hover,
.hd[data-kaydi] .menu > li.acik > a,.hd[data-kaydi] .menu > li.here > a,
.hd[data-panel] .menu > li > a:hover,.hd[data-panel] .menu > li > button:hover,
.hd[data-panel] .menu > li.acik > a,.hd[data-panel] .menu > li.here > a{opacity:1;color:var(--accent-text);}

/* ---- hap düğme ---- */
.cta{
  display:inline-flex;align-items:center;gap:.5rem;
  border-radius:999px;padding:.8rem 1.6rem;
  background:var(--field);color:var(--field-ink);
  font-family:var(--pop);font-size:clamp(1rem,1.05vw,1.25rem);font-weight:500;line-height:1.2;
  text-decoration:none;white-space:nowrap;
  transition:transform .3s ease,box-shadow .3s ease;
}
.cta:hover{transform:translateY(-2px);box-shadow:0 18px 32px -18px rgba(20,17,16,.75);}

/* ---- açılır panel ---- */
.drop{
  position:absolute;left:0;right:0;top:100%;
  color:var(--ink);
  padding:clamp(1.25rem,2vw,1.75rem) 0 clamp(1.5rem,2.5vw,2.25rem);
  opacity:0;visibility:hidden;
  transition:opacity .25s ease,visibility .25s;
}
/* Zemin yukarı doğru başlığın arkasına kadar uzanır ve üstten açılır */
.drop::before{
  content:"";position:absolute;left:0;right:0;top:calc(-1 * var(--hd-simdiki));bottom:0;z-index:-1;
  background:var(--hd-bg);
  box-shadow:0 26px 44px -30px rgba(20,17,16,.5);
  transform:scaleY(0);transform-origin:top;
  transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.drop::after{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--hair);
}
.menu > li.acik > .drop{opacity:1;visibility:visible;}
.menu > li.acik > .drop::before{transform:scaleY(1);}
/* Bir üst menüden diğerine geçerken geçişler kapanır: eskisi anında gider,
   yenisi anında gelir. Açıkken fareyi menü boyunca gezdirince zeminin
   küçülüp yeniden büyümesi yanıp sönme gibi görünüyordu.
   site.js bu niteliği yalnız geçiş anında koyuyor; ilk açılış ve tam
   kapanış yumuşak kalıyor. */
.hd[data-gecis] .drop,
.hd[data-gecis] .drop::before{transition:none;}

.drop-in{
  display:grid;align-items:start;
  grid-template-columns:minmax(0,18rem) minmax(0,17rem) minmax(0,1fr);
  gap:clamp(1.5rem,3vw,3rem);
}
.drop-in h3{font-size:clamp(1.25rem,1.8vw,1.6rem);margin-bottom:.7rem;}
/* Üç satırla sınırlı: uzun açıklamalar paneli aşağı doğru uzatmasın */
.drop-in > .drop-metin p{
  font-size:.94rem;line-height:1.55;color:var(--ink-2);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.drop-list h5{
  column-span:all;
  margin:0 0 .7rem;font-family:var(--cond);font-size:.7rem;font-weight:700;
  letter-spacing:.19em;text-transform:uppercase;color:var(--ink-3);
}
/* İki sütun: aynı bağlantı sayısı yarı yükseklikte sığar.
   Başlık iki sütunu birden kaplar, yoksa listenin ortasına düşer. */
.drop-list{columns:2;column-gap:1.75rem;}
.drop-list a{
  display:block;padding:.18rem 0;text-decoration:none;
  font-size:.97rem;font-weight:500;color:var(--ink);
  break-inside:avoid;
  transition:color .2s ease;
}
.drop-list a:hover{color:var(--accent-text);}

/* kare görsel kartlar */
.drop-kart{display:flex;flex-wrap:wrap;gap:clamp(.9rem,1.6vw,1.5rem);}
.drop-kart a{
  position:relative;display:flex;align-items:flex-end;
  width:clamp(7rem,9.3vw,10.5rem);aspect-ratio:4/3;
  overflow:hidden;border-radius:.5rem;
  padding:.7rem .8rem;text-decoration:none;
}
.drop-kart img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .3s ease;
}
.drop-kart a:hover img{transform:scale(1.05);}
.drop-kart a::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(24,13,11,.55),rgba(24,13,11,.06));
}
/* İki satır güvenlik ağı: ileride uzun bir başlık girilirse kart taşmasın */
.drop-kart b{
  position:relative;font-family:var(--pop);font-size:1rem;font-weight:500;
  line-height:1.3;color:var(--field-ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* Çekmece eşiğine yakın genişliklerde menü sıkışır, taşmaz. */
@media (min-width:74.01rem) and (max-width:90rem){
  .hd > .wrap{gap:1.25rem;}
  .menu{gap:1.1rem;}
  .menu > li > a,.menu > li > button{font-size:clamp(.95rem,1.1vw,1.5rem);}
  .cta{padding:.7rem 1.25rem;}
}

/* ---- hamburger ---- */
.burger{
  display:none;width:2.6rem;height:2.6rem;padding:0;
  background:none;border:0;cursor:pointer;color:inherit;
  align-items:center;justify-content:center;justify-self:end;
}
.burger svg{width:1.65rem;height:1.65rem;}
.burger .kapat{display:none;}
body.nav-open .burger .ac{display:none;}
body.nav-open .burger .kapat{display:block;}

/* ============================================================
   Çekmece menü — 68rem altı ve dokunmatik cihazlar
   Açık zeminli tam ekran panel: üstte logo ve kapatma, altında
   iki sütun (menü / bizi takip edin), en altta dil hapı.
   Eşik site.js içindeki `dar` sorgusuyla birebir aynı olmalı.
   ============================================================ */
@media (max-width:74rem), (pointer: coarse){
  .hd > .wrap{grid-template-columns:auto 1fr;gap:1rem;}
  /* Marka masaüstünde ORTA sütunda (grid-column:2). Burada iki sütun var ve
     2. sütunu hamburger kullanıyor; marka açıkça 1. sütuna alınmazsa ikisi
     aynı hücreye biniyor ve ilk sütun 0px kalıyor. */
  .brand{grid-column:1;justify-self:start;}
  .burger{display:flex;grid-column:2;}
  .nav{
    position:fixed;inset:0;z-index:95;
    background:var(--hd-bg);color:var(--ink);
    display:flex;flex-direction:column;
    padding:calc(var(--hd-h-kucuk) + 1.25rem) var(--pad) 2.5rem;
    overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    opacity:0;visibility:hidden;transform:translateY(-1.25rem);
    transition:opacity .3s ease,transform .3s ease,visibility .3s;
  }
  body.nav-open .nav{opacity:1;visibility:visible;transform:none;}
  /* Çekmece açıkken marka ve kapatma düğmesi üstte kalsın.

     .nav, marka ve hamburgerle AYNI .wrap içinde kardeştir. .nav
     konumlandırılmış ve z-index:95; marka ile düğme ise akışta (z-index:auto).
     Bu yüzden çekmece ikisini de örtüyordu ve menü açılınca kapatacak hiçbir
     şey görünmüyordu. Kaptaki ya da başlıktaki z-index bunu çözmez — iki
     öğenin AYNI bağlam içinde çekmecenin üstüne çıkması gerekir. */
  /* backdrop-filter KAPATILIYOR. Kaydırılmış başlık cam efekti için
     backdrop-filter alıyor; boş olmayan bir filtre, öğeyi içindeki
     position:fixed torunlar için KAPSAYAN BLOK yapar. Çekmece (.nav) başlığın
     içinde olduğu için viewport yerine 74px'lik şeride hapsoluyordu: menü
     sayfa başındayken açılıyor, aşağı inildiğinde açılmıyordu.
     Ölçüm: tepede 489x804, kaydırılmışken 489x134. */
  body.nav-open .hd{
    background:var(--hd-bg);color:var(--ink);height:var(--hd-h-kucuk);
    -webkit-backdrop-filter:none;backdrop-filter:none;
  }
  body.nav-open .brand,
  body.nav-open .burger{position:relative;z-index:96;}
  body.nav-open .brand .acik{opacity:0;}
  body.nav-open .brand .koyu{opacity:1;}

  /* Çekmece her genişlikte TEK sütun. İki sütunken sağ yarıyı sosyal blok
     tutuyordu; o blok boş olduğu için tablette koca bir boşluk kalıyordu. */
  .nav-govde{
    display:grid;grid-template-columns:1fr;gap:1.5rem;
    padding-top:1.5rem;box-shadow:inset 0 1px 0 var(--hair);
    /* Izgara, çekmecede artan yüksekliği satırlara paylaştırıyordu: dil ile
       arama, arama ile menü arasında yüz pikselden fazla ölü boşluk çıkıyordu.
       Satırlar içeriğe göre yığılsın. */
    align-content:start;
  }
  /* Çekmecede: solda menü (İletişim listenin devamı olarak altında),
     sağda sosyal bağlantılar; hap düğme en altta tek kez görünür. */
  .nav-baslik,.nav-sosyal-blok,.nav-alt{display:block;}
  .nav-hap{display:none !important;}
  /* Çekmecede sıra: önce eylem kümesi (dil, arama, teklif), sonra menü.
     "MENÜ" başlığı da kalkıyor — açılan panelin menü olduğu zaten belli. */
  .nav-sol{grid-column:1;grid-row:2;}
  .nav-sol > .nav-baslik{display:none;}
  /* Üst eylem satırı: solda dil, sağda teklif; hemen altında tam genişlikte
     arama. dil ile teklif düğmesi farklı kaplarda (.dil doğrudan burada,
     teklif ise ul.menu içinde bir li) — ul display:contents ile şeffaflaşınca
     ikisi de aynı ızgaranın öğesi olabiliyor. */
  .nav-sag{
    grid-column:1;grid-row:1;margin-top:0;
    display:grid;grid-template-columns:auto minmax(0,1fr);
    gap:1rem;align-items:center;
  }
  .nav-sag > .dil{margin:0;grid-column:1;grid-row:1;justify-self:start;}
  .nav-sag > .menu{display:contents;}
  .nav-hap{display:block !important;grid-column:2;grid-row:1;justify-self:end;}
  .nav-hap > a{width:auto;}
  .nav-ara{grid-column:1/-1;grid-row:2;}
  /* Kalan üst menü öğeleri (İletişim) tam satır kaplayıp ana listeyle
     aynı hizada aksın. */
  .nav-sag > .menu > li:not(.nav-ara):not(.nav-hap){grid-column:1/-1;}

  /* Arama uzun bir hap, teklif ise dolu düğme.
     Seçiciler .nav-sag ile başlıyor: .menu > li > a kuralı (sınıf 1 + öğe 2)
     sade .nav-ara > a'yı (sınıf 1 + öğe 1) eziyor ve ikisini de düz yazıya
     çeviriyordu. İki sınıflı seçici öne geçiyor. */
  .nav-sag .nav-ara > a{
    width:100%;justify-content:center;gap:.7rem;color:var(--ink);
    padding:.85rem 1.2rem;border:1px solid var(--hair);border-radius:999px;
    background:var(--paper-2);font-size:1.05rem;
  }
  .nav-sag .nav-ara > a svg{width:1.15rem;height:1.15rem;flex:none;}
  .nav-sag .nav-hap > a{
    width:auto;padding:.72rem 1.5rem;border-radius:999px;
    background:var(--field);color:var(--field-ink);
    font-size:1.02rem;white-space:nowrap;
  }

  /* Alttaki ikinci teklif düğmesi artık üstte; iki kez çıkmasın. */
  .nav-alt{display:none;}
  /* Çekmecede büyüteç tek başına anlaşılmıyor, yazısı da görünür olur. */
  .nav-ara-yazi{display:inline;}
  .nav-sosyal-blok{grid-column:1;grid-row:3;}
  .nav-baslik{
    margin:0 0 1.1rem;font-family:var(--cond);font-size:.74rem;font-weight:700;
    letter-spacing:.19em;text-transform:uppercase;color:var(--ink-3);
  }
  .nav-sol,.nav-sag{justify-self:stretch;}
  .nav-sag{grid-column:1;}
  .menu{flex-direction:column;align-items:stretch;gap:0;width:100%;}
  .menu > li{width:100%;}
  /* Çekmecede başlıklar ortalı. */
  .menu > li > a,.menu > li > button{
    width:100%;justify-content:center;text-align:center;
    font-size:1.35rem;font-weight:500;padding:.62rem 0;color:var(--ink);
  }
  .menu > li[data-drop] > a::after{
    content:"\203A";font-size:1.5rem;line-height:1;margin-left:.15rem;
    transition:transform .25s ease;
  }
  .menu > li.acik > a::after{transform:rotate(90deg);}

  /* Panel çekmece içinde alt liste olur */
  .drop{
    position:static;opacity:1;visibility:visible;display:none;
    padding:.1rem 0 .9rem;
  }
  .drop::before,.drop::after{display:none;}
  .menu > li.acik > .drop{display:block;}
  .drop .wrap{padding-inline:0;}
  .drop-in{grid-template-columns:1fr;gap:.35rem;}
  .drop-metin,.drop-kart,.drop-list h5{display:none;}
  .drop-list a{font-size:1.02rem;font-weight:400;color:var(--ink-2);padding:.42rem 0;text-align:center;}

  .nav-sosyal{display:flex;flex-direction:column;gap:0;}
  .nav-sosyal a{
    font-family:var(--sans);font-size:1.35rem;font-weight:500;
    color:var(--ink);text-decoration:none;padding:.62rem 0;
    transition:color .2s ease;
  }
  .nav-sosyal a:hover{color:var(--accent-text);}

  /* Teklif düğmesi de yukarı: eskiden margin-top:auto ile en alta itiliyordu. */
  .nav-alt{order:-1;margin-top:0;padding-top:0;padding-bottom:1.5rem;}
  .nav-alt .cta{margin-top:1.1rem;display:inline-flex;}
}
@media (max-width:30rem){
  .nav-govde{grid-template-columns:1fr;gap:0;}
  /* Tek sütuna inince dil hapı menü listesine yapışıyordu: üstteki blok onu
     -.62rem ile yukarı çekiyor, orada iki sütun olduğu için sorun olmuyordu. */
  .nav-sag{grid-column:1;grid-row:1;margin-top:0;}
  .nav-sosyal-blok{grid-column:1;grid-row:3;margin-top:1.5rem;}
}

/* ============================================================
   5. ANASAYFA HERO — tam ekran fotoğraf, üstte iri başlık,
   altta slogan ve "keşfedin" bağlantısı.
   ============================================================ */
/* Sabit en-boy oranı yok: hero hangi cihazda açılırsa o ekranın tamamını
   kaplar. svh kullanılıyor — mobilde adres çubuğu görünürken de tam ekran
   olur; dvh kaydırma sırasında yeniden boyutlanıp videoyu zıplatıyordu.
   min-height olduğu için içerik taşarsa bölüm büyümeye devam eder. */
.hero{
  position:relative;display:flex;flex-direction:column;
  width:100%;
  min-height:100vh;
  min-height:100svh;
  padding:var(--hd-h) 0 clamp(2.5rem,6vh,5rem);
  color:var(--field-ink);overflow:hidden;
  background:var(--field);
}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
/* Başlık şeridinin arkasına gelen bant.
   Zemin 720p bir video: H.264 koyu ve düz alanlara en az biti ayırır,
   görüntü tam ekrana büyütülünce makroblokları belli olur ve oynarken
   titrer. Logo ile menü doğrudan o gürültünün üstünde durunca bozukluk
   logodan sanılıyor. Bu bant gürültüyü şeridin olduğu yerde bastırır ve
   aşağı doğru tamamen kaybolur; hero'nun geri kalanı olduğu gibi kalır.
   Kalıcı çözüm videoyu daha yüksek kalitede yeniden kodlamak. */
.hero::before{
  content:"";
  position:absolute;left:0;right:0;top:0;z-index:1;
  height:calc(var(--hd-h) + 4rem);
  background:linear-gradient(to bottom,
    rgba(24,13,11,.60) 0%,
    rgba(24,13,11,.34) 45%,
    rgba(24,13,11,0)   100%);
  pointer-events:none;
}
/* İki katmanlı perde: yazının okunurluğu için üstte ve altta koyulaşır */
.hero-perde{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to top,rgba(24,13,11,.10),rgba(24,13,11,.52)),
    rgba(56,17,10,.20);
}
/* .wrap kullanılmıyor: ortalı 80rem kap yazıyı ekranın ortasına itiyordu.
   Sadece kenar payı verilerek alttaki slogan ile aynı hizaya alınıyor. */
.hero-in{
  position:relative;z-index:2;flex:1;   /* bant .hero::before ile aynı katmanda: yazı üstte kalsın */
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  gap:clamp(1.75rem,3.5vw,3rem);
  padding-inline:var(--pad);
  padding-bottom:clamp(1.5rem,5vh,4rem);
}
/* Sparc'ta başlık geniş ve orta kalınlıkta; sıkışık yazı tipi kullanılmıyor */
.hero h1{
  max-width:24ch;margin:0;
  font-family:var(--pop);font-weight:500;
  font-size:clamp(2rem,4.2vw,3.9rem);line-height:1.12;letter-spacing:-.025em;
  text-wrap:balance;
}
/* Vurgu aynı yazı tipi ailesinden; farklı bir serif karışmıyor */
.hero h1 em{font-style:italic;font-weight:400;}

/* Hap düğme: solda yazı, sağda yuvarlak ok; üstüne gelince
   krem dolgu sağdan sola süpürerek geliyor. */
/* Hero çağrı düğmesi — bordo hap, solda yazı, sağda beyaz yuvarlak ok.
   Hapın içindeki açık öğeler beyaz (--accent-inv yerel olarak eziliyor);
   diğer koyu bantlardaki düğmeler bundan etkilenmez.

   Hover'da zemin BOYANMIYOR: ne beyaz ne kırmızı dolgu hapı süpürüyor.
   Geri bildirim üç sessiz hareketle veriliyor — zemin bir tık açılır,
   hap hafifçe kalkar, ok sağa kayar. Süpüren dolgu ve onu taşıyan
   .hap-dolgu öğesi kaldırıldı. */
.hap{
  --accent-inv:var(--field-ink);
  position:relative;display:inline-flex;align-items:center;justify-content:space-between;
  min-width:min(22rem,86vw);padding:.45rem;border-radius:999px;
  /* Buzlu cam: bordo zemin yarı saydam, arkasındaki video bulanıklaşarak geçer.
     Saçtan ince açık iç çerçeve camın kenarını belli eder — referans
     kartlarındaki (.ref) cam yüzeyle aynı dil. */
  background:color-mix(in srgb,var(--field) 66%,transparent);
  -webkit-backdrop-filter:blur(16px) saturate(135%);
  backdrop-filter:blur(16px) saturate(135%);
  color:var(--accent-inv);text-decoration:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 20px 45px -26px rgba(24,13,11,.8);
  transition:background-color .3s ease,transform .3s ease,box-shadow .3s ease;
}
.hap:hover,.hap:focus-visible{
  background:color-mix(in srgb,var(--field-2) 78%,transparent);
  transform:translateY(-2px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),0 24px 50px -26px rgba(24,13,11,.85);
}
/* backdrop-filter desteklenmiyorsa cam etkisi oluşmaz ve yarı saydam zemin
   videonun üstünde yazıyı okunmaz kılar; o durumda zemin opaklaşır. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hap{background:var(--field);}
  .hap:hover,.hap:focus-visible{background:var(--field-2);}
}
.hap:focus-visible{outline:2px solid var(--field-ink);outline-offset:3px;}
.hap > span{
  position:relative;padding:0 1.25rem 0 1.6rem;
  font-family:var(--pop);font-size:clamp(1rem,1.05vw,1.25rem);font-weight:500;
}
.hap i{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:3.4rem;height:3.4rem;flex:none;border-radius:999px;
  background:var(--accent-inv);color:var(--accent-inv-on);
  font-style:normal;font-size:1.1rem;
  transition:transform .3s ease;
}
.hap:hover i,.hap:focus-visible i{transform:translateX(.2rem);}
@media (prefers-reduced-motion:reduce){
  .hap,.hap i{transition:none;}
  .hap:hover,.hap:focus-visible{transform:none;}
}

/* İki öğe alt kenarlarından hizalanır; böylece başlık iki satıra çıksa da
   "Keşfedin" ile aynı taban çizgisinde kalır. */
.hero-alt{
  position:relative;z-index:2;
  display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;
  padding-inline:var(--pad);
}
.hero-alt h2{
  max-width:18ch;margin:0;
  font-family:var(--pop);font-weight:500;
  font-size:clamp(1.35rem,2.1vw,2.1rem);line-height:1.28;letter-spacing:-.015em;
}
.kesfet{
  display:inline-flex;align-items:center;gap:1.1rem;
  background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--pop);font-size:clamp(1.35rem,2vw,2rem);font-weight:500;color:inherit;
  transition:opacity .2s ease;
}
.kesfet:hover{opacity:.65;}
/* Ok, aşağıda devam eden içeriği işaret etmek için yavaşça iner çıkar */
.kesfet svg{width:2.2rem;height:2.2rem;animation:okZipla 1.9s ease-in-out infinite;}
.kesfet:hover svg{animation-duration:1.1s;}
@keyframes okZipla{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(.4rem);}
}
@media (prefers-reduced-motion:reduce){
  .kesfet svg{animation:none;}
}

/* Hero da çekmece eşiğiyle aynı noktada sabit orandan çıkar */
@media (max-width:74rem){
  .hero{padding-top:calc(var(--hd-h-kucuk) + 2rem);}
  .hero-in{padding-block:clamp(2rem,7vw,3.5rem);}
  .hero-alt{flex-direction:column;align-items:flex-start;gap:1.5rem;}
}
@media (max-width:40rem){
  .hero h1{max-width:none;}
  .hero-alt h2{font-size:1.3rem;}
  .kesfet{font-size:1.2rem;gap:.85rem;}
  .kesfet svg{width:1.8rem;height:1.8rem;}
  .hap{min-width:100%;}
  .hap > span{font-size:1rem;padding:0 1rem 0 1.25rem;}
  .hap i{width:3rem;height:3rem;}
}

/* ============================================================
   6. İÇ SAYFA BAŞLIĞI
   ============================================================ */
.phead{
  position:relative;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  background:var(--field);color:var(--field-ink);overflow:hidden;
}
.phead-say{
  --ink:var(--field-ink);--ink-2:var(--field-muted);--accent-text:var(--accent);
  position:relative;z-index:2;
  display:flex;flex-direction:column;justify-content:center;gap:1.1rem;
  padding:calc(var(--hd-h) + clamp(2rem,4vw,3.5rem)) clamp(2rem,4vw,4rem) clamp(3.5rem,6vw,5rem);
  padding-left:max(var(--pad),calc((100vw - var(--sb) - var(--wrap)) / 2 + var(--pad)));
  min-height:clamp(19rem,34vw,27rem);
}
.phead h1{font-size:clamp(2rem,3.9vw,3.5rem);line-height:1.03;letter-spacing:-.015em;max-width:18ch;}
.phead h1 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--accent);letter-spacing:0;}
.phead p{color:var(--field-muted);max-width:34rem;font-size:clamp(1rem,1.2vw,1.12rem);}
.phead-pic{position:relative;overflow:hidden;}
.phead-pic img{width:100%;height:100%;object-fit:cover;}
.phead-pic::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,var(--field) 0%,rgba(56,17,10,.45) 18%,rgba(56,17,10,0) 52%),
    linear-gradient(to bottom,rgba(24,13,11,.5) 0%,rgba(24,13,11,0) 30%);
}
.phead--plain{grid-template-columns:1fr;}
.phead--plain .phead-say{padding-right:max(var(--pad),calc((100vw - var(--sb) - var(--wrap)) / 2 + var(--pad)));}
@media (max-width:62rem){
  .phead{grid-template-columns:1fr;}
  .phead-pic{order:-1;aspect-ratio:16/9;min-height:13rem;}
  .phead-pic::after{background:linear-gradient(to bottom,rgba(24,13,11,.55) 0%,rgba(24,13,11,0) 40%,var(--field) 99%);}
  .phead-say{padding:2.2rem var(--pad) 3rem;min-height:0;}
}

.crumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;
  font-family:var(--cond);font-size:.76rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;
  color:var(--field-muted);
}
.crumb a{text-decoration:none;opacity:.85;transition:opacity .2s ease,color .2s ease;}
.crumb a:hover{opacity:1;color:var(--ink);}
.crumb span{opacity:.5;}
.crumb b{font-weight:500;color:var(--ink);}

/* ============================================================
   7. ANASAYFA BÖLÜMLERİ
   ============================================================ */
.figs{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.5rem,4vw,3.5rem);margin-top:clamp(3rem,7vw,5.5rem);}
.figs--flat{margin-top:0;}
.fig b{display:block;font-family:var(--cond);font-weight:700;font-size:clamp(2.5rem,6vw,4.4rem);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.fig b i{font-style:normal;font-size:.34em;color:var(--accent-text);letter-spacing:.02em;margin-left:.15em;}
.fig span{display:block;margin-top:.7rem;font-family:var(--cond);font-size:.8rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-2);}
@media (max-width:52rem){.figs{grid-template-columns:1fr 1fr;gap:2.5rem 1.5rem;}}

/* ------------------------------------------------------------
   ÇALIŞMA SAHAMIZ — dönen küre + dev başlık + rakam kartları
   Küre bir <canvas>; bölümün arkasına mutlak konumlanır, içerik
   üstünde akar. Küre bölümün altından taşar ve .saha tarafından
   kırpılır — üst kavis başlığın arkasında, alt kavis kartların
   altında kalır.
   ------------------------------------------------------------ */
/* min-height: rakam kartları girilmemişken de kürenin yeterince büyük bir
   parçası görünsün, alt kırpma tesadüf değil tercih gibi dursun. */
.saha{position:relative;overflow:hidden;min-height:min(78vw,54rem);
  padding-block:clamp(4.5rem,10vw,9rem) clamp(4rem,8vw,7rem);}
.saha-kure{
  position:absolute;left:50%;top:clamp(1.5rem,4vw,4rem);
  width:min(96vw,120rem);aspect-ratio:1;transform:translateX(-50%);
  pointer-events:none;
  /* kure.js bu dört değeri okuyup 256 renklik bir palet kurar; tema
     değişince yeniden okunur.
       disk = deniz · kiyi = kıyı şeridi · kara = iç kesim · saha = leke
     Kara, denizden AÇIK olacak şekilde seçilir: kıta içleri parlar,
     kıyılar koyu bir kontur gibi çıkar. */
  --kure-disk:#EDF2F0;
  --kure-kiyi:#B9B4B0;
  --kure-kara:#FFFFFF;
  --kure-saha:var(--accent-parlak);
}
:root[data-theme="dark"] .saha-kure{
  --kure-disk:#1D0B05;--kure-kiyi:#3B180E;--kure-kara:#7A4534;--kure-saha:#FF4A2B;
}
.saha-ic{position:relative;}

/* Poppins 400 — örnek alınan tasarımdaki ince geniş dev tipografi.
   Condensed 700 buradaydı ama sıkışık ve ağır kalıyordu; hem referansa
   hem sitenin yeni gösterim kademesine bu daha yakın. Poppins geniş
   olduğu için punto bir tık kısıldı. */
.saha-baslik{
  font-family:var(--pop);font-weight:400;
  font-size:clamp(2.9rem,11.5vw,8.4rem);line-height:.98;letter-spacing:-.035em;
  text-transform:uppercase;margin:0;
}
.saha-baslik span{display:block;}
.saha-baslik .vur{color:var(--accent-text);}
.saha-lede{
  margin-top:clamp(1.5rem,3vw,2.2rem);max-width:26rem;
  font-size:clamp(1rem,1.3vw,1.12rem);color:var(--ink-2);
}

/* Başlık ve metin blok olarak ortalanır ama içeride sola dayalı kalır —
   referansın kompozisyonu bu; küre simetrik olduğu için ortalama şart. */
.saha-yazi{width:fit-content;margin-inline:auto;}

.saha-kartlar{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1rem,2vw,1.6rem);margin-top:clamp(3.5rem,9vw,7rem);
}
.saha-kart{
  display:flex;flex-direction:column;
  border:1px solid var(--hair);background:var(--paper-2);
  /* Izgara öğesinin varsayılan min-width'i auto'dur: içeriğinden dar
     olamaz. Büyük punto sayı dar ekranda kartı 1fr'ın dışına taşırıyordu. */
  min-width:0;
}
.saha-kart-ust{padding:clamp(1.4rem,2.4vw,2rem);flex:1;}
.saha-kart-ikon{
  display:grid;place-items:center;
  width:clamp(2.6rem,4vw,3.4rem);aspect-ratio:1;border-radius:50%;
  border:1px solid var(--hair);color:var(--ink-2);
}
.saha-kart-ikon svg{width:52%;height:52%;}
.saha-kart b{
  display:block;margin-top:clamp(1.6rem,4vw,3rem);
  font-family:var(--cond);font-weight:700;
  font-size:clamp(2.6rem,6.5vw,4.6rem);line-height:1;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.saha-kart b i{font-style:normal;color:var(--accent-text);}
.saha-kart-alt{
  border-top:1px solid var(--hair);padding:clamp(1rem,1.8vw,1.4rem) clamp(1.4rem,2.4vw,2rem);
  font-size:.92rem;color:var(--ink-2);
}

@media (max-width:60rem){
  .saha{min-height:min(150vw,34rem);}
  .saha-kure{width:min(150vw,44rem);}
  .saha-lede{max-width:none;}
  .saha-kartlar{grid-template-columns:1fr;gap:.9rem;}
  /* Dar ekranda kart yatar: solda ikon + sayı, sağda etiket.
     min-width:0 şart — flex öğeleri varsayılan olarak içeriklerinden
     daha dar olamaz, o yüzden büyük punto sayı kartı taşırıyordu. */
  .saha-kart{flex-direction:row;align-items:stretch;}
  .saha-kart-ust{flex:0 0 auto;display:flex;align-items:center;gap:1.1rem;padding:1.1rem 1.3rem;}
  .saha-kart b{margin-top:0;font-size:clamp(1.9rem,8vw,2.8rem);}
  .saha-kart-alt{
    border-top:0;border-left:1px solid var(--hair);
    display:flex;align-items:center;flex:1 1 0;min-width:0;
    padding:1.1rem 1.3rem;font-size:.88rem;
  }
}

/* Telefonda yatay kartta etikete kalan sütun iyice daralıyor ve iki üç
   satıra kırılıyor. Bu genişlikten sonra ikon + sayı yan yana kalır ama
   etiket alta iner; satır sonu derdi biter. */
@media (max-width:30rem){
  .saha-kart{flex-direction:column;}
  .saha-kart-ust{padding:1.1rem 1.2rem .9rem;}
  .saha-kart-alt{
    border-left:0;border-top:1px solid var(--hair);
    padding:.85rem 1.2rem;
  }
}

.duo{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1fr);gap:clamp(2rem,6vw,5.5rem);align-items:center;}
.duo img{width:100%;aspect-ratio:4/5;object-fit:cover;}
.duo-text{display:flex;flex-direction:column;gap:1.4rem;}
.duo-text p{color:var(--ink-2);}
.duo-text .first{color:var(--ink);font-size:clamp(1.12rem,1.9vw,1.35rem);line-height:1.55;}
.duo-text .more{align-self:flex-start;margin-top:.6rem;}
.duo--flip{grid-template-columns:minmax(0,1fr) minmax(0,.82fr);}
.duo--flip img{order:2;}
@media (max-width:56rem){
  .duo,.duo--flip{grid-template-columns:1fr;}
  .duo img,.duo--flip img{aspect-ratio:3/2;order:0;}
}

.creed{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.75rem,4vw,3rem);margin-top:clamp(3rem,7vw,5rem);}
.creed h3{font-size:1.12rem;margin-bottom:.55rem;}
.creed p{font-size:.96rem;color:var(--ink-2);line-height:1.6;}
@media (max-width:64rem){.creed{grid-template-columns:1fr 1fr;}}
@media (max-width:38rem){.creed{grid-template-columns:1fr;}}

.three{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3.5vw,2.75rem);}
.three a{text-decoration:none;display:flex;flex-direction:column;gap:1.15rem;}
.three .ph{overflow:hidden;}
.three img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1);}
.three a:hover img{transform:scale(1.05);}
.three h3{font-size:1.35rem;transition:color .2s ease;}
.three a:hover h3{color:var(--accent);}
.three p{font-size:.97rem;color:var(--ink-2);line-height:1.6;}
@media (max-width:60rem){.three{grid-template-columns:1fr;max-width:34rem;}}

.rest{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,3vw,2.5rem) clamp(2rem,6vw,5rem);margin-top:clamp(3rem,7vw,5rem);}
.rest--full{margin-top:0;}
.rest a{text-decoration:none;display:block;}
.rest h4{font-size:1.08rem;font-weight:700;margin-bottom:.3rem;transition:color .2s ease;}
.rest a:hover h4{color:var(--accent);}
.rest p{font-size:.93rem;color:var(--ink-2);line-height:1.55;}
@media (max-width:52rem){.rest{grid-template-columns:1fr;}}

/* ---- .rest--resimli: her satırda görsel kutusu ----
   Kutular dışa bakar: sol sütunda solda, sağ sütunda sağda. Izgara satır
   satır dolduğu için tek sıradakiler (1,3,5…) sol sütunda, çift sıradakiler
   (2,4,6…) sağ sütunda kalıyor; çift olanlarda satır yönü tersine çevrilerek
   kutu sağa geçiriliyor. Böylece görseller sayfanın iki dış kenarına dizilir,
   metinler ortada toplanır. */
.rest--resimli a{display:flex;align-items:center;gap:clamp(.9rem,1.8vw,1.4rem);}
.rest--resimli a:nth-child(even){flex-direction:row-reverse;}
.rest--resimli .rest-ph{
  flex:none;overflow:hidden;border-radius:.75rem;
  width:clamp(4.5rem,7vw,6.25rem);aspect-ratio:1;
  background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--hair);
}
.rest--resimli .rest-ph img{
  display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.3,1);
}
.rest--resimli a:hover .rest-ph img{transform:scale(1.06);}
/* min-width:0 şart: flex öğeleri varsayılan olarak içeriklerinden küçülmez,
   uzun hizmet adları kutuyu ezip taşardı. */
.rest--resimli .rest-metin{min-width:0;}

/* ---- .rest--buyuk: hizmetler sayfasının tam dizini ----
   Liste tek başına bir sayfayı taşıdığı için kutular ve yazılar ~%30
   büyütülüp blok ortalanıyor. Ayrı değiştirici sınıf, çünkü .rest 404 ve
   /hizmet-bolgelerimiz sayfalarında da kullanılıyor.

   Açıklama metni %30 değil %15 büyüdü: %30'da başlıkla neredeyse eşitleniyor
   ve başlık-açıklama ayrımı kayboluyor. */
.rest--buyuk{
  max-width:64rem;margin-inline:auto;
  gap:clamp(2rem,4vw,3.25rem) clamp(2.5rem,7vw,6rem);
}
.rest--buyuk h4{font-size:1.4rem;margin-bottom:.42rem;}
.rest--buyuk p{font-size:1.07rem;}
.rest--buyuk.rest--resimli .rest-ph{width:clamp(5.9rem,9.1vw,8.15rem);}
.rest--buyuk.rest--resimli a{gap:clamp(1.15rem,2.3vw,1.8rem);}

@media (max-width:52rem){
  /* Tek sütuna inince "sağ sütun" diye bir şey kalmaz; hepsi sola hizalanır. */
  .rest--resimli a:nth-child(even){flex-direction:row;}
}

/* ---- hizmet kaydırıcısı: resimli kutucuklar, yatay şerit ----
   Ölçüler Viamaster'ın "Discover More" bloğundan alındı: kutu oranı
   3/3.5, mobilde 3/4.5; başlık 35 → 30 → 28 → 23 px; iç boşluk
   40 → 30 → 25 px; fotoğrafın üstünde dipten yukarı açılan örtü.

   Kaydırma tarayıcının kendi scroll-snap'i ile yapılıyor: dokunmatikte
   parmak, masaüstünde oklar, klavyede yön tuşları. Kütüphane yok. */
/* Kap sitenin kendi ölçüsünde bırakıldı (80rem): ilk kutucuk, sayfadaki
   diğer bölümlerin metniyle aynı hizadan başlıyor. Ekran kenarına dayanan
   hâli denendi, sayfanın geri kalanıyla uyuşmadı. Şeridin iç boşluğu da
   .wrap ile aynı değişkenleri okuduğu için başlıkla hizalı kalır. */
.hzm-bas{
  display:flex;align-items:center;
  /* Referansta başlıkla oklar arası ~15vw; bitişik durmuyorlar. */
  gap:clamp(1.5rem,13vw,15rem);
  margin-bottom:clamp(1.75rem,3vw,2.5rem);
}
/* Referanstaki gibi tek satır, iri ve hafif; üstünde etiket, altında
   açıklama yok. Poppins'in en ince kesimi 400. */
.hzm-bas h2{
  margin:0;
  font-family:var(--pop);font-weight:400;
  font-size:clamp(2.4rem,5.6vw,5.5rem);
  line-height:1.04;letter-spacing:-.03em;
}

.hzm-oklar{display:flex;gap:.85rem;flex:none;}
/* Referansta daire, başlığın büyük harf yüksekliğinden bir tık iri. */
.hzm-ok{
  display:grid;place-items:center;flex:none;
  width:clamp(3.5rem,5.5vw,6.5rem);aspect-ratio:1;
  padding:0;border-radius:50%;cursor:pointer;
  background:transparent;color:inherit;
  border:1px solid currentColor;
  transition:background-color .2s ease,color .2s ease,opacity .2s ease;
}
.hzm-ok svg{width:36%;height:36%;display:block;}
/* --ink ile --paper koyu bantta ters çevriliyor, tek kural iki zeminde
   de doğru sonucu veriyor. */
.hzm-ok:hover{background:var(--ink);color:var(--paper);}
.hzm-ok[disabled]{opacity:.3;cursor:default;}
.hzm-ok[disabled]:hover{background:transparent;color:inherit;}

/* ---- şeridin üstündeki kaydırma okları ----
   Kutucukların üstünde, sol ve sağ kenarda duran buzlu cam düğmeler.
   Kaydırma yönergesi kaydırılan şeyin kendisinde olsun diye başlığın
   yanından buraya alındılar. Zemin fotoğraf olduğu için renk sabit
   koyu/açık seçiliyor; --ink temaya göre dönseydi açık fotoğrafta
   kaybolurdu. */
.hzm-sarmal{position:relative;}
.hzm-ok--ustte{
  position:absolute;top:50%;z-index:3;
  width:clamp(2.9rem,4vw,4.25rem);
  color:#EFF5F3;
  background:color-mix(in srgb,#180D0B 38%,transparent);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
  border:1px solid rgba(239,245,243,.34);
  box-shadow:0 14px 34px -18px rgba(24,13,11,.9);
  transition:background-color .25s ease,border-color .25s ease,opacity .25s ease;
}
.hzm-ok--ustte svg{width:40%;height:40%;}
.hzm-ok--ustte:hover{
  background:color-mix(in srgb,#180D0B 62%,transparent);
  border-color:rgba(239,245,243,.6);
  color:#EFF5F3;
}
/* Sağ ok başlangıçta görünür olmalı: liste sağa doğru devam ediyor.
   Sol ok başta pasif; site.js scrollLeft'e göre disabled yönetiyor. */
.hzm-ok--sol{left:clamp(.5rem,1.5vw,1.5rem);}
.hzm-ok--sag{right:clamp(.5rem,1.5vw,1.5rem);}
.hzm-ok--ustte[disabled]{opacity:0;pointer-events:none;}
.hzm-ok--ustte[disabled]:hover{background:color-mix(in srgb,#180D0B 38%,transparent);}

/* Kaydırılabilir olduğunu anlatan hafif salınım. Dikey ortalama transform
   ile yapıldığı için kare içinde translateY(-50%) korunuyor; yoksa düğme
   aşağı kayardı. Etkin olan ok salınır, pasif olan durur. */
@keyframes hzm-salin-sag{
  0%,72%,100%{transform:translate(0,-50%);}
  84%{transform:translate(.3rem,-50%);}
}
@keyframes hzm-salin-sol{
  0%,72%,100%{transform:translate(0,-50%);}
  84%{transform:translate(-.3rem,-50%);}
}
.hzm-ok--ustte{transform:translateY(-50%);}
.hzm-ok--sag:not([disabled]){animation:hzm-salin-sag 3.4s ease-in-out infinite;}
.hzm-ok--sol:not([disabled]){animation:hzm-salin-sol 3.4s ease-in-out infinite;}
/* İmleç üstündeyken salınım durur, kullanıcı zaten farkında. */
.hzm-ok--ustte:hover{animation-play-state:paused;}
@media (prefers-reduced-motion:reduce){
  .hzm-ok--sag:not([disabled]),.hzm-ok--sol:not([disabled]){animation:none;}
}
/* Dokunmatikte parmakla kaydırma doğal; oklar küçülüp geri çekiliyor. */
@media (pointer:coarse){
  .hzm-ok--ustte{width:2.75rem;background:color-mix(in srgb,#180D0B 46%,transparent);}
}

.hzm-ray{
  display:flex;
  gap:clamp(.55rem,.9vw,1rem);
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
  /* Kabın dışına taşar: ilk kutu .wrap'ın soluyla hizalanır, sağdakiler
     ekran kenarından taşarak listenin devam ettiğini gösterir. */
  padding-inline:max(var(--pad),calc(50% - var(--wrap) / 2 + var(--pad)));
  scroll-padding-inline:max(var(--pad),calc(50% - var(--wrap) / 2 + var(--pad)));
}
.hzm-ray::-webkit-scrollbar{display:none;}

.hzm-kart{
  /* Kap içinde ~2,5 kutucuk görünecek genişlik; sağdaki taşan kutucuk
     listenin devam ettiğini gösteriyor. */
  position:relative;flex:0 0 clamp(17rem,30vw,29rem);
  aspect-ratio:3 / 3.5;
  scroll-snap-align:start;
  overflow:hidden;text-decoration:none;
  background:var(--field);
}
.hzm-kart img{
  position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;
  transition:transform .25s ease-in-out,opacity .25s ease-in-out;
}
/* Perde yalnızca yazının oturduğu dibi karartır. Önceden kartın
   %72'sine kadar çıkıyor, fotoğrafın öznesi bordonun altında kalıyordu.
   Şimdi alt %20 güçlü, %55'ten sonra tamamen bitiyor. */
.hzm-kart::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,
    rgba(56,17,10,.92) 0%,
    rgba(56,17,10,.70) 20%,
    rgba(56,17,10,.26) 38%,
    rgba(56,17,10,0)   58%);
}
/* Üzerine gelince açıklama açılıyor, metin alanı büyüyor: ikinci bir
   kademe devreye girip yazının altını fotoğraftan ayırıyor. Gradyanın
   kendisi yumuşak geçmediği için ayrı katman opaklıkla açılıyor. */
.hzm-kart::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  opacity:0;transition:opacity .3s ease;
  background:linear-gradient(0deg,
    rgba(56,17,10,.94) 0%,
    rgba(56,17,10,.72) 32%,
    rgba(56,17,10,.22) 55%,
    rgba(56,17,10,0)   78%);
}
/* Resmin üstünde beliren ufak yazı: sıra numarası. */
.hzm-kart-no{
  position:absolute;z-index:2;top:0;left:0;
  font-family:var(--cond);font-size:.82rem;font-weight:700;
  letter-spacing:.2em;color:rgba(255,255,255,.9);
}
.hzm-kart-bas,.hzm-kart-no{padding:40px;}
.hzm-kart-bas{position:absolute;left:0;right:0;bottom:0;z-index:2;}
.hzm-kart h3{
  margin:0;color:#fff;
  font-family:var(--pop);font-weight:500;
  font-size:35px;line-height:1.14;letter-spacing:-.015em;
}
/* Açıklama, başlığın altından yukarı doğru açılıyor. 0fr → 1fr geçişi
   yüksekliği bilmeden yumuşak açılım verir; max-height tahmini gerekmez. */
.hzm-kart-ozet{
  display:grid;grid-template-rows:1fr;
  transition:grid-template-rows .3s ease;
}
/* Boşluk padding ile veriliyor: margin satırın dışında kalıp kapalıyken
   de yer kaplardı, açıklama gizliyken kutucuğun dibinde boşluk olurdu. */
.hzm-kart-ozet > span{
  overflow:hidden;min-height:0;
  display:block;padding-top:.75rem;
  font-size:.95rem;line-height:1.5;color:rgba(255,255,255,.86);
  transition:opacity .25s ease,padding-top .3s ease;
}
.hzm-kart:hover img{transform:scale(1.04);}
.hzm-kart:focus-visible{outline:2px solid var(--accent-parlak);outline-offset:3px;}

/* İmleci olan cihazlarda numara ve açıklama gizli durur, üzerine
   gelince açılır. Dokunmatikte hover diye bir şey olmadığı için
   ikisi de baştan görünür kalır — orada kutucuk zaten daha uzun. */
@media (hover:hover) and (pointer:fine){
  .hzm-kart-no{opacity:0;transform:translateY(-.4rem);
    transition:opacity .25s ease,transform .25s ease;}
  .hzm-kart-ozet{grid-template-rows:0fr;}
  /* Dolgu da sıfırlanıyor: min-height:0 onu kısaltmıyor, kapalı satırda
     birkaç piksellik artık boşluk bırakırdı. */
  .hzm-kart-ozet > span{opacity:0;padding-top:0;}
  .hzm-kart:hover .hzm-kart-no,
  .hzm-kart:focus-visible .hzm-kart-no{opacity:1;transform:none;}
  .hzm-kart:hover .hzm-kart-ozet,
  .hzm-kart:focus-visible .hzm-kart-ozet{grid-template-rows:1fr;}
  .hzm-kart:hover .hzm-kart-ozet > span,
  .hzm-kart:focus-visible .hzm-kart-ozet > span{opacity:1;}
  .hzm-kart:hover::after,
  .hzm-kart:focus-visible::after{opacity:1;}
}

@media (max-width:1060px){
  .hzm-kart-bas,.hzm-kart-no{padding:30px;}
  .hzm-kart h3{font-size:30px;}
}
@media (max-width:760px){
  .hzm-bas{flex-direction:column;align-items:flex-start;gap:1.5rem;}
  .hzm-kart{flex-basis:min(78vw,22rem);aspect-ratio:3 / 4.5;}
  .hzm-kart-bas,.hzm-kart-no{padding:25px;}
  .hzm-kart h3{font-size:28px;}
  .hzm-kart-ozet > span{font-size:.9rem;}
}
@media (max-width:560px){
  .hzm-kart h3{font-size:23px;}
}
@media (prefers-reduced-motion:reduce){
  .hzm-kart img,.hzm-kart-ozet,.hzm-kart-ozet > span,
  .hzm-kart-no,.hzm-kart::after{transition:none;}
}

/* Görsel sütunu içeriğe göre boyutlanır (auto): fotoğraf kendi doğal
   genişliğini aşmadığı için büyütmeden doğan bulanıklık olmuyor. */
.case{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(2rem,6vw,5rem);align-items:center;}
/* Öne çıkan proje görseli 2:1 çekilmiş fotoğraflara göre ayarlı;
   böylece kırpma olmuyor. Genişlik kaynağın doğal ölçüsüyle sınırlı. */
.case img{width:min(100%,22rem);aspect-ratio:2/1;object-fit:cover;background:var(--paper-2);}
.case-text{display:flex;flex-direction:column;gap:1.3rem;}
.case-text p{color:var(--ink-2);}
.case-figs{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:.8rem;}
.case-figs b{display:block;font-family:var(--cond);font-weight:700;font-size:clamp(1.7rem,3.4vw,2.4rem);line-height:1;font-variant-numeric:tabular-nums;}
.case-figs b i{font-style:normal;font-size:.42em;color:var(--accent-text);margin-left:.15em;}
.case-figs span{display:block;margin-top:.5rem;font-family:var(--cond);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);}
.case-text .more{align-self:flex-start;margin-top:.5rem;}
@media (max-width:60rem){.case{grid-template-columns:1fr;}}

/* Filtre hapları — saydam kenarlı kutucuklar.
   Durgun hâlde zemin yok, yalnızca saçtan ince yarı saydam bir çerçeve;
   seçili olan mürekkep zeminle doluyor. Hem yazı filtresinde (bağlantı,
   aria-current) hem proje filtresinde (düğme, aria-pressed) aynı görünüm. */
.tabs{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:clamp(2.5rem,5vw,3.5rem);}
.tab{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.72rem 1.2rem;border-radius:999px;
  background:transparent;border:1px solid var(--hair);
  cursor:pointer;text-decoration:none;
  font-family:var(--cond);font-size:.82rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-2);
  transition:background-color .2s ease,border-color .2s ease,color .2s ease;
}
.tab:hover{border-color:var(--ink-3);color:var(--ink);}
.tab:focus-visible{outline:2px solid var(--accent-parlak);outline-offset:2px;}
/* Sayı hapın içinde, bir tık soluk ve dar aralıklı; başlıkla yarışmasın. */
.tab-sayi{
  font-weight:500;letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
  color:var(--ink-3);transition:color .2s ease;
}
.tab[aria-current],.tab[aria-pressed="true"]{
  background:var(--ink);border-color:var(--ink);color:var(--paper);
}
.tab[aria-current] .tab-sayi,.tab[aria-pressed="true"] .tab-sayi{color:rgba(255,255,255,.66);}
.tab[aria-current]:hover,.tab[aria-pressed="true"]:hover{color:var(--paper);}

/* Kaynak fotoğraflar 284–350px geniş. Kart genişliği bunun üstüne çıkarsa
   görsel büyütülüp bulanıklaşıyor; bu yüzden sütunlar dar tutulup sayıları
   ekrana göre artırılıyor (geniş ekranda dört, tablette iki, telefonda bir). */
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr));gap:clamp(2rem,4vw,3.25rem) clamp(1.5rem,3vw,2.5rem);}
.gal > a{text-decoration:none;display:flex;flex-direction:column;gap:1.1rem;}

.gal .ph{overflow:hidden;}
.gal img{width:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.3,1);}
.gal > a:hover img{transform:scale(1.045);}
/* Oranlar kaynak fotoğraflarla birebir; hiçbir kartta kırpma olmuyor */
.gal .tall img{aspect-ratio:1/1;}
.gal .wide img{aspect-ratio:2/1;}
.gal .state{font-family:var(--cond);font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);}
.gal .state.live{color:var(--accent-text);}
.gal h3{font-size:clamp(1.2rem,2.2vw,1.6rem);transition:color .2s ease;}
.gal > a:hover h3{color:var(--accent);}
.gal .meta{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;font-family:var(--cond);font-size:.85rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);}
@media (max-width:44rem){
  .gal{gap:2.5rem;}
}

.marks{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(2rem,4vw,3rem) clamp(1.5rem,3vw,2.5rem);align-items:center;}
.marks span{
  font-family:var(--cond);font-size:clamp(.9rem,1.5vw,1.1rem);font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;text-align:center;
  color:var(--ink-2);opacity:.55;transition:opacity .2s ease;
}
.marks span:hover{opacity:1;}
@media (max-width:56rem){.marks{grid-template-columns:repeat(3,1fr);}}

.say{max-width:44rem;margin-top:clamp(3.5rem,8vw,6rem);}
.say--flat{margin-top:0;}
.say blockquote{margin:0;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(1.5rem,3.4vw,2.5rem);line-height:1.32;}
.say .by{margin-top:1.6rem;font-family:var(--cond);font-size:.85rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2);}
.say .by b{color:var(--ink);font-weight:700;}

/* ---------- Bilgi Merkezi satırları ----------
   Viamaster'ın "News and Insights" bloğunun düzeni, bizim renklerimizle.
   Ölçüler oradan: görsel 5/3, 12 sütunluk ızgarada 6+6, ok halkası 6.25rem,
   nokta 8px. Satırın tamamı bağlantı; .haberler .wrap dışında durduğu için
   imleçle gelince koyu bant kenardan kenara boyanır. */
.haberler{border-top:1px solid var(--hair);}
.haber{border-bottom:1px solid var(--hair);transition:background-color .3s ease;}
.haber a{
  display:block;text-decoration:none;color:var(--ink);
  padding-block:clamp(2.2rem,4.5vw,4rem);
  transition:color .3s ease;
}
/* Kendi kabı var, .wrap kullanmıyor: site geneli 80rem/4rem payla çalışıyor,
   burada görsel sola yaklaşsın ve büyüsün diye Viamaster'ın ölçüsü alındı. */
.haber-ic{
  width:100%;margin-inline:auto;
  max-width:103.125rem;
  padding-inline:clamp(1.25rem,2.5vw,2.5rem);
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 1rem;align-items:center;
}
.haber-gorsel{grid-column:1 / span 7;grid-row:1;padding-right:clamp(1rem,3vw,3rem);}
.haber-gorsel img{display:block;width:100%;aspect-ratio:5/3;object-fit:cover;}
.haber-metin{grid-column:8 / span 5;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;}
/* Satırlar dönüşümlü: 1. görsel solda, 2. sağda, 3. yine solda...
   Yer değişimi yalnızca ızgarada; markup'ta sıra (görsel → metin) aynı
   kaldığı için okuma ve sekme sırası bozulmuyor.
   grid-row:1 şart: sütun elle verilince otomatik yerleşim geri saramıyor,
   metni bir alt satıra atıyordu. */
.haber:nth-child(even) .haber-gorsel{
  grid-column:6 / span 7;
  padding-right:0;padding-left:clamp(1rem,3vw,3rem);
}
.haber:nth-child(even) .haber-metin{grid-column:1 / span 5;}
/* nokta + etiket: nokta logo kırmızısı, grafik öğe olduğu için 3:1 eşiği geçerli */
.haber-etiket{
  position:relative;margin:0 0 1.3rem;padding-left:2.5rem;
  font-family:var(--cond);font-size:.95rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
}
.haber-etiket::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:.5rem;height:.5rem;border-radius:50%;background:var(--accent-parlak);
}
.haber-metin h3{margin:0 0 1.1rem;font-size:clamp(1.45rem,2.7vw,2.5rem);line-height:1.14;}
.haber-ozet{margin:0;font-size:clamp(1rem,1.1vw,1.2rem);color:var(--ink-2);transition:color .3s ease;}
.haber-ok{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:clamp(3.6rem,5.6vw,6.25rem);height:clamp(3.6rem,5.6vw,6.25rem);
  margin-top:clamp(1.8rem,3.5vw,3rem);
  border:1px solid var(--ink-3);border-radius:50%;
  transition:border-color .3s ease;
}
.haber-ok svg{width:clamp(1.25rem,1.6vw,1.6rem);height:auto;transition:transform .3s ease;}
/* satırın herhangi bir yerine gelince zemin koyu banda döner */
.haber:hover{background:var(--field);}
.haber:hover a{color:var(--field-ink);}
.haber:hover .haber-ozet{color:var(--field-muted);}
.haber:hover .haber-ok{border-color:var(--accent-parlak);}
/* doğrudan halkanın üstüne gelince ok döner — Viamaster'daki mikro etkileşim */
.haber-ok:hover svg{transform:rotate(45deg);}
@media (max-width:60rem){
  /* Tek sütuna inince dönüşüm anlamsız; nth-child kuralları buradaki
     sade kuraldan daha özgül olduğu için ayrıca geri alınıyor. */
  .haber-gorsel,.haber-metin,
  .haber:nth-child(even) .haber-gorsel,
  .haber:nth-child(even) .haber-metin{grid-column:1/-1;grid-row:auto;}
  .haber-gorsel,
  .haber:nth-child(even) .haber-gorsel{padding-right:0;padding-left:0;margin-bottom:1.6rem;}
  .haber-metin{padding-right:0;}
}

/* ---------- arama ----------
   Sonuç satırları .haberler düzenini görselsiz kullanıyor: aynı kap, aynı
   ayraç ritmi, aynı koyu bant hover'ı, aynı ok halkası. Görsel olmadığı için
   metin tüm genişliği alır; dönüşümlü yerleşim de devreye girmez. */
.ara-form{
  display:flex;align-items:center;gap:.75rem;
  padding:.5rem .5rem .5rem 1.25rem;
  border-radius:999px;background:var(--paper-2);
  box-shadow:inset 0 0 0 1px var(--hair);
  transition:box-shadow .25s ease;
}
.ara-form:focus-within{box-shadow:inset 0 0 0 2px var(--accent-parlak);}
.ara-ikon{width:1.35rem;height:1.35rem;flex:none;color:var(--ink-3);}
.ara-form input{
  flex:1;min-width:0;border:0;background:none;outline:none;
  font-family:var(--pop);font-size:clamp(1rem,1.4vw,1.2rem);color:var(--ink);
  padding-block:.85rem;
}
.ara-form input::placeholder{color:var(--ink-3);}
/* Tarayıcının kendi temizleme çarpısı hapın yuvarlağını bozuyor */
.ara-form input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;}
.ara-form button{
  flex:none;border:0;cursor:pointer;border-radius:999px;
  padding:.8rem 1.6rem;background:var(--accent);color:var(--accent-on);
  font-family:var(--cond);font-size:.9rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  transition:background-color .25s ease;
}
.ara-form button:hover{background:var(--accent-parlak);}
.ara-durum{margin-top:1.6rem;font-size:1.05rem;color:var(--ink-2);}
.ara-durum b{color:var(--ink);}
.ara-oneri{margin-top:.6rem;font-size:.98rem;color:var(--ink-2);}
.ara-oneri a{color:var(--accent-text);text-decoration:none;box-shadow:inset 0 -1px 0 var(--accent-parlak);margin-inline:.3rem;}
.ara-liste{margin-top:clamp(2rem,4vw,3rem);}
.ara-liste .haber a{padding-block:clamp(1.5rem,2.8vw,2.3rem);}
.ara-ic{display:flex;align-items:center;gap:1.5rem;}
.ara-liste .haber-metin{flex:1;min-width:0;padding-right:0;}
.ara-liste .haber-etiket{margin-bottom:.7rem;}
.ara-baslik{
  display:block;margin-bottom:.5rem;
  font-family:var(--cond);font-weight:700;
  font-size:clamp(1.25rem,2.1vw,1.85rem);line-height:1.15;
}
.ara-liste .haber-ok{flex:none;margin-top:0;}
@media (max-width:36rem){
  .ara-form{padding-left:1rem;gap:.5rem;}
  .ara-form button{padding:.75rem 1.1rem;font-size:.8rem;}
}

.reads{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.75rem,4vw,3rem);}
.reads a{text-decoration:none;display:flex;flex-direction:column;gap:1rem;}
.reads .ph{overflow:hidden;}
.reads img{width:100%;aspect-ratio:16/11;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1);}
.reads a:hover img{transform:scale(1.05);}
.reads .when{font-family:var(--cond);font-size:.78rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);}
.reads .when em{font-style:normal;color:var(--accent-text);font-weight:700;}
.reads h3{font-size:1.18rem;line-height:1.25;transition:color .2s ease;}
.reads a:hover h3{color:var(--accent);}
@media (max-width:60rem){.reads{grid-template-columns:1fr;max-width:32rem;}}

/* S.S.S. */
.qa{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);gap:clamp(2rem,6vw,5rem);align-items:start;}
details{border-bottom:1px solid var(--hair);}
details:first-of-type{border-top:1px solid var(--hair);}
/* Soru satırı: üzerine gelince koyu bordo zemine döner, açılınca
   yeniden kâğıt rengine geçer. Yan boşluklar negatif kenar boşluğuyla
   dışarı taşırılıyor ki zemin metnin hizasından biraz genişçe dursun. */
summary{
  list-style:none;cursor:pointer;position:relative;
  padding:1.35rem 3.25rem 1.35rem 1rem;
  margin-inline:-1rem;
  border-radius:.75rem;
  font-family:var(--cond);font-size:1.15rem;font-weight:700;line-height:1.3;
  transition:background-color .25s ease,color .25s ease;
}
summary::-webkit-details-marker{display:none;}
summary:hover{background:var(--field);color:var(--field-ink);}
/* Açıkken zemin kalkar: soru yine sayfanın kendi rengi üstünde durur */
details[open] > summary,details[open] > summary:hover{background:transparent;color:inherit;}

summary::before,summary::after{content:"";position:absolute;right:1.1rem;background:var(--accent-parlak);transition:transform .25s ease,background-color .25s ease;}
summary::before{top:calc(1.35rem + .62em);width:14px;height:2px;}
summary::after{top:calc(1.35rem + .62em - 6px);right:calc(1.1rem + 6px);width:2px;height:14px;}
/* Koyu zeminde artı işareti krem olur, yoksa okunmaz */
summary:hover::before,summary:hover::after{background:var(--field-ink);}
details[open] > summary::before,details[open] > summary::after,
details[open] > summary:hover::before,details[open] > summary:hover::after{background:var(--accent-parlak);}
details[open] summary::after{transform:scaleY(0);}

/* Cevap yumuşakça açılır (destekleyen tarayıcılarda) */
details > p{padding:0 2.5rem 1.5rem 0;color:var(--ink-2);font-size:1rem;}
@supports (interpolate-size:allow-keywords){
  details{interpolate-size:allow-keywords;}
  details::details-content{
    block-size:0;overflow:hidden;
    transition:block-size .35s cubic-bezier(.2,.7,.3,1),content-visibility .35s allow-discrete;
  }
  details[open]::details-content{block-size:auto;}
}
@media (prefers-reduced-motion:reduce){
  summary{transition:none;}
  details::details-content{transition:none;}
}
@media (max-width:56rem){.qa{grid-template-columns:1fr;}}

/* İletişim bandı */
.reach{
  position:relative;overflow:hidden;background:var(--field);color:var(--field-ink);
  --ink:var(--field-ink);--ink-2:var(--field-muted);--ink-3:var(--field-muted);
  --hair:var(--field-hair);--accent-text:var(--accent);
}
.reach > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.reach::after{content:"";position:absolute;inset:0;background:linear-gradient(85deg,rgba(56,17,10,.95) 0%,rgba(56,17,10,.88) 45%,rgba(56,17,10,.74) 100%);}
.reach .wrap{position:relative;z-index:1;}
.reach-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:clamp(2.5rem,7vw,6rem);align-items:start;}
.reach h2{max-width:14ch;}
.lines{margin:2.5rem 0 0;display:flex;flex-direction:column;gap:1.5rem;}
.lines div{display:flex;flex-direction:column;gap:.3rem;}
.lines dt{font-family:var(--cond);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--field-muted);}
.lines dd{margin:0;font-size:1.02rem;}
.lines a{text-decoration:none;box-shadow:inset 0 -1px 0 rgba(255,255,255,.32);transition:box-shadow .2s ease;}
.lines a:hover{box-shadow:inset 0 -1px 0 var(--accent-parlak);}
@media (max-width:60rem){.reach-grid{grid-template-columns:1fr;}}

/* form */
form{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.fld{display:flex;flex-direction:column;gap:.5rem;}
.full{grid-column:1/-1;}
label{font-family:var(--cond);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);}
input,select,textarea{
  font-family:var(--sans);font-size:1rem;
  background-color:rgba(20,17,16,.05);color:var(--ink);
  border:0;padding:.9rem 1rem;
  transition:background-color .2s ease,box-shadow .2s ease;
}
.field input,.field select,.field textarea,
.reach input,.reach select,.reach textarea{background-color:rgba(255,255,255,.08);color:var(--field-ink);}
input:hover,select:hover,textarea:hover{background-color:rgba(20,17,16,.08);}
.field input:hover,.reach input:hover,.field select:hover,.reach select:hover,.field textarea:hover,.reach textarea:hover{background-color:rgba(255,255,255,.12);}
input:focus,select:focus,textarea:focus{outline:none;box-shadow:inset 0 -2px 0 var(--accent-parlak);}
select option{background:var(--paper);color:var(--ink);}
.field select option,.reach select option{background:#38110A;color:#FFFFFF;}

/* ---- açılır liste ----
   appearance:none yoktu: tarayıcının kendi kontrolü çiziliyor, yerli ok
   görünüyor ve kutu input'lardan 2px daha yüksek oluyordu. Ok artık SVG
   olarak arka planda; sağdaki iç boşluk ona yer açıyor. Yükseklik de
   input'larla aynı iç boşluğu paylaştığı için eşitlendi. */
select{
  appearance:none;-webkit-appearance:none;
  cursor:pointer;padding-right:2.9rem;
  /* base-select açıkken select gerçek bir düğmeye dönüşüp gövdenin
     line-height:1.7 değerini miras alıyor ve input'lardan 6px uzun
     kalıyordu; input'lar gibi normal'a sabitleniyor. */
  line-height:normal;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6462' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1.05rem center;
  background-size:1.15rem;
}
/* Koyu bantta ok da açık tona döner */
.field select,.reach select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DFA598' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");}
select:focus{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6462' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");}
.field select:focus,.reach select:focus{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DFA598' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");}

/* Açılan listenin kendisi normalde işletim sistemi tarafından çiziliyor ve
   CSS'e kapalı; sistem yazı tipi ve mavi seçim rengi oradan geliyordu.
   Tek istisna base-select: destekleyen tarayıcıda liste de siteyle aynı
   dile giriyor. Desteklemeyende bu blok tamamen yok sayılır, yerli liste
   kullanılmaya devam eder — yani hiçbir tarayıcıda bozulma riski yok. */
@supports (appearance:base-select){
  select,::picker(select){appearance:base-select;}
  /* Kendi SVG okumuz duruyor; base-select'in eklediği ikon gizleniyor,
     yoksa sağda iki ok üst üste binerdi. */
  select::picker-icon{display:none;}
  select{text-align:left;}
  ::picker(select){
    border:1px solid var(--hair);border-radius:.9rem;
    background:var(--paper);padding:.35rem;
    margin-block-start:.4rem;
    box-shadow:0 26px 54px -26px rgba(20,17,16,.5);
  }
  ::picker(select) option{
    display:block;padding:.65rem .85rem;border-radius:.55rem;
    font-family:var(--sans);font-size:.98rem;line-height:1.4;
    color:var(--ink);background:transparent;cursor:pointer;
    transition:background-color .15s ease,color .15s ease;
  }
  ::picker(select) option:hover{background:var(--paper-2);}
  ::picker(select) option:checked{background:var(--accent);color:#FFFFFF;}
  /* Seçili olan zemin rengiyle belli oluyor; onay işareti gereksiz. */
  ::picker(select) option::checkmark{display:none;}
}

textarea{resize:vertical;min-height:5.5rem;}
.agree{grid-column:1/-1;display:flex;gap:.8rem;align-items:flex-start;font-size:.88rem;color:var(--ink-2);line-height:1.55;cursor:pointer;}
.agree input{width:1.05rem;height:1.05rem;margin-top:.28rem;accent-color:var(--accent-parlak);flex:none;padding:0;}
.send{grid-column:1/-1;display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;margin-top:.5rem;}
.send small{font-family:var(--cond);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);}
.done{grid-column:1/-1;display:none;flex-direction:column;gap:.4rem;background:rgba(115,48,38,.10);padding:1.15rem 1.3rem;}
form.sent .done{display:flex;}
.done b{font-family:var(--cond);font-size:1.1rem;}
.done small{font-size:.82rem;color:var(--ink-2);}
@media (max-width:44rem){form{grid-template-columns:1fr;}}

/* footer */
.ft{
  position:relative;
  /* Cam katmanı KENDİ koyu tabanının üstünde duruyor, sayfanın nane kâğıdının
     değil. Önceki sürüm rgba(56,17,10,.84) ile doğrudan kâğıdın üstündeydi:
     %16 nane sızınca doygunluk %70'ten %26'ya düşüp açıklık ikiye katlanıyor,
     sonuç #5B3D36 — gül kurusu. Katmanlar üst üste bindirilince renk marka
     bordosunda kalıyor, saydamlığın verdiği derinlik de korunuyor.

     backdrop-filter kaldırıldı: footer'ın arkasında düz renkten başka bir şey
     yok, düz rengi bulanıklaştırmak hiçbir şey değiştirmiyordu. */
  background:
    /* üstten aşağı inen cam parlaması */
    linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0) 20rem),
    /* sol üstten gelen sıcak ışık huzmesi */
    radial-gradient(130% 100% at 12% 0%,rgba(234,41,10,.12),transparent 62%),
    /* Yarı saydam cam katmanı. Düz rgba() olarak yazılamaz: background
       kısayolunda renk yalnızca en sonda ve tek kez bulunabilir, ortada
       geçen bir renk tüm bildirimi geçersiz kılar. İki duraklı degrade
       aynı işi görüyor ve geçerli bir katman oluyor. */
    linear-gradient(rgba(56,17,10,.9),rgba(56,17,10,.9)),
    /* koyu taban — kâğıdın sızmasını kesen katman */
    #2B0D06;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
  color:var(--field-ink);
  padding-block:clamp(3.5rem,7vw,5.5rem) 0;
  --ink:var(--field-ink);
  /* Gül kurusu yerine soluk beyaz: alt bilgideki tüm yazılar beyaz
     ailesinde kalsın, ayrım renkle değil saydamlıkla verilsin. */
  --ink-2:rgba(255,255,255,.80);
}
.ft-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:clamp(2rem,4vw,3rem);}
.ft-lead{max-width:23rem;display:flex;flex-direction:column;gap:1.2rem;}
.brand--ft{color:var(--field-ink);align-self:flex-start;}
.brand--ft .brand-mark{height:1.6rem;}
.brand--ft .brand-tip{height:1.32rem;}
/* Alt bilgideki kilit hâlâ MÜHENDİSLİK alt satırını taşıyor. Başlık Sparc
   düzenine geçerken bu stiller kalkmıştı; alt bilgiye özel geri konuyor.
   Alt satır, logotip genişliğine yakın dursun diye geniş harf aralıklı;
   son harften sonraki boşluk negatif kenar boşluğuyla geri alınıyor. */
.brand--ft .brand-txt{display:flex;flex-direction:column;align-items:flex-start;gap:.34rem;}
.brand--ft .brand-txt > span{
  font-family:var(--cond);font-size:.58rem;font-weight:500;
  letter-spacing:.42em;margin-right:-.42em;line-height:1;
  color:rgba(239,245,243,.62);
}
.ft-lead p{font-family:var(--pop);font-size:.95rem;color:rgba(255,255,255,.82);}
.ft-lead .certs{font-family:var(--cond);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.62);}
/* Başlıklar Poppins 600, normal kutu — referanstaki gibi iri ve net.
   Altındaki ince çizgi sütunu bağlantılardan ayırıyor. */
.ft h4{
  font-family:var(--pop);font-size:1.02rem;font-weight:600;letter-spacing:-.01em;
  color:var(--field-ink);margin-bottom:1.35rem;padding-bottom:1.1rem;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.18);
}
/* :not(.dil-liste) şart — dil seçicinin açılır listesi de bir <ul>. Bu genel
   kurallar ona da uyduğunda panelin iç boşluğunu sıfırlıyor (satır vurgusu
   kutunun kenarına dayanıyor), satır aralığını değiştiriyor ve üzerine
   gelince yazıyı vurgu rengine çeviriyordu. Dil listesinin kendi kuralları
   var; buradan muaf tutuluyor. */
.ft ul:not(.dil-liste){list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.65rem;}
.ft ul:not(.dil-liste) a{font-family:var(--pop);font-size:.95rem;font-weight:400;text-decoration:none;opacity:.88;transition:opacity .2s ease,color .2s ease;}
.ft ul:not(.dil-liste) a:hover{opacity:1;color:var(--accent);}
.ft-end{
  margin-top:clamp(3rem,6vw,4.5rem);padding-block:1.6rem;
  border-top:1px solid var(--field-hair);
  display:flex;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap;
  font-family:var(--cond);font-size:.8rem;letter-spacing:.1em;color:rgba(255,255,255,.7);
}
.ft-end nav{display:flex;gap:1.6rem;flex-wrap:wrap;}
.ft-end a{text-decoration:none;}
.ft-end a:hover{color:var(--accent);}
/* Alt bilgi telefonda da İKİ sütunda kalır. Tek sütuna inince bağlantılar
   dümdüz aşağı akıp footer'ı gereksiz uzatıyordu; listeler kısa olduğu için
   390px'de iki sütun rahat sığıyor. */
/* İki sütuna düşünce: solda Kurumsal ve İletişim alt alta, sağda uzun
   Hizmetler listesi iki satır boyunca. Böylece sütun altları hizalanıyor. */
@media (max-width:68rem){
  /* minmax(0,1fr): uzun hizmet adları sütunu taşırmasın, içeride sarsın. */
  .ft-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:1.5rem;align-items:start;}
  .ft-lead{grid-column:1/-1;}
  .ft-kurumsal{grid-column:1;grid-row:2;}
  .ft-hizmetler{grid-column:2;grid-row:2/span 2;}
  .ft-iletisim{grid-column:1;grid-row:3;}
}
@media (max-width:36rem){.ft-grid{column-gap:1.25rem;row-gap:1.35rem;}}

/* ============================================================
   8. İÇ SAYFA BİLEŞENLERİ
   ============================================================ */

/* içerik + yan sütun */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,20rem);gap:clamp(2.5rem,6vw,5rem);align-items:start;}
@media (max-width:64rem){.split{grid-template-columns:1fr;}}

.aside{display:flex;flex-direction:column;gap:2.25rem;position:sticky;top:7rem;}
.aside h4{font-family:var(--cond);font-size:.76rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin-bottom:1rem;}
.aside ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem;}
.aside ul a{font-size:.96rem;text-decoration:none;color:var(--ink-2);transition:color .2s ease,padding-left .2s ease;display:block;}
.aside ul a:hover{color:var(--accent-text);padding-left:.3rem;}
.aside ul a.on{color:var(--ink);font-weight:500;box-shadow:inset 2px 0 0 var(--accent);padding-left:.7rem;}
/* Teklif kutusu — oval köşeli, camsı koyu yüzey, beyaz yazı.
   Zemin tam opak değil: arkasındaki sayfa hafifçe geçiyor, üst kenardaki
   ince açık çizgi ve yumuşak gölge cam hissini veriyor. */
.aside-box{
  position:relative;
  border-radius:1.75rem;
  padding:1.9rem 1.75rem;
  background:color-mix(in srgb,var(--field) 88%,transparent);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 28px 55px -32px rgba(56,17,10,.6),inset 0 1px 0 rgba(255,255,255,.14);
  color:#FFFFFF;
  display:flex;flex-direction:column;gap:.9rem;
  overflow:hidden;
}
/* color-mix'i tanımayan tarayıcıda düz koyu zemine düşer, okunurluk aynı. */
@supports not (background:color-mix(in srgb,red 50%,transparent)){
  .aside-box{background:var(--field);}
}
.aside-box h4{color:#FFFFFF;margin-bottom:0;}
.aside-box p{font-size:.94rem;color:#FFFFFF;}
/* Düğme camın üstünde: beyaz dolgu, koyu yazı — kutunun içindeki en net öğe. */
.aside-box .btn{
  align-self:flex-start;margin-top:.5rem;
  border-radius:999px;
  background:#FFFFFF;color:var(--field);
}
.aside-box .btn:hover{background:rgba(255,255,255,.86);color:var(--field);}
@media (max-width:64rem){.aside{position:static;}}

/* uzun metin */
.prose{max-width:44rem;display:flex;flex-direction:column;gap:1.35rem;}
.prose p{color:var(--ink-2);}
.prose > p.first{color:var(--ink);font-size:clamp(1.12rem,1.8vw,1.32rem);line-height:1.55;}
.prose h2{font-size:clamp(1.5rem,2.6vw,2rem);margin-top:1.6rem;}
.prose h3{font-size:1.25rem;margin-top:1.2rem;}
.prose ul,.prose ol{margin:0;padding-left:1.3rem;display:flex;flex-direction:column;gap:.55rem;color:var(--ink-2);}
.prose li::marker{color:var(--accent);}
.prose img{width:100%;margin-block:.8rem;}
.prose figure{margin:0;display:flex;flex-direction:column;gap:.7rem;}
.prose figcaption{font-family:var(--cond);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);}
.prose blockquote{
  margin:1rem 0;font-family:var(--serif);font-style:italic;font-size:clamp(1.25rem,2.4vw,1.7rem);
  line-height:1.35;color:var(--ink);box-shadow:inset 3px 0 0 var(--accent);padding-left:1.4rem;
}
.prose a{color:var(--accent-text);}

/* numaralı süreç */
.steps{display:grid;gap:1.6rem;counter-reset:step;}
.steps li{list-style:none;display:grid;grid-template-columns:2.6rem 1fr;gap:1.2rem;counter-increment:step;}
.steps li::before{
  content:counter(step,decimal-leading-zero);
  font-family:var(--cond);font-size:.85rem;font-weight:700;letter-spacing:.1em;
  color:var(--accent-text);padding-top:.32rem;
}
.steps h4{font-size:1.05rem;margin-bottom:.25rem;}
.steps p{font-size:.96rem;color:var(--ink-2);line-height:1.6;}

/* teknik künye */
.spec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem 2.5rem;}
.spec div{display:flex;flex-direction:column;gap:.25rem;}
.spec dt{font-family:var(--cond);font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);}
.spec dd{margin:0;font-size:1.02rem;}
@media (max-width:44rem){.spec{grid-template-columns:1fr;gap:1.1rem;}}
/* İletişim sayfasındaki bilgi bloğu: satır sayısını azaltmak için
   telefonlar ve e-postalar tek satırda yan yana dizilir. */
.spec--sik{gap:1.35rem 2.5rem;}
.yanyana{display:flex;flex-wrap:wrap;gap:.35rem 1.75rem;}
.tel-btns{display:flex;flex-wrap:wrap;gap:.6rem;}
/* Telefon ve WhatsApp düğmeleri: siyah beyaz, yuvarlatılmış kutu, ikonlu.
   Sayfadaki diğer düğmeler kırmızı camsı hap; bu ikisi arama eylemleri
   olduğu için ayrı ve nötr duruyor. Renkler jetondan geldiği için koyu
   temada kendiliğinden tersine dönüyor, yine siyah beyaz kalıyor. */
.ikon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:3.25rem;height:3.25rem;flex:none;
  border-radius:.85rem;
  background:var(--paper);border:1px solid var(--ink);color:var(--ink);
  text-decoration:none;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}
.ikon-btn svg{width:1.2rem;height:1.2rem;flex:none;display:block;}
.ikon-btn:hover{background:var(--ink);color:var(--paper);}
.ikon-btn:focus-visible{outline:2px solid var(--accent-parlak);outline-offset:2px;}
.yanyana span{display:flex;align-items:baseline;gap:.45rem;}
.yanyana a{text-decoration:none;box-shadow:inset 0 -1px 0 var(--hair);transition:box-shadow .2s ease;}
.yanyana a:hover{box-shadow:inset 0 -1px 0 var(--accent-parlak);}
.yanyana i{
  font-style:normal;font-family:var(--cond);font-size:.68rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
}
@media (max-width:32rem){.yanyana{gap:.45rem 1.1rem;}}

/* kadro */
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.5rem,3vw,2.5rem);}
.team .ph{overflow:hidden;background:var(--paper-2);}
.team img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:grayscale(1);transition:filter .5s ease,transform .7s cubic-bezier(.2,.7,.3,1);}
.team li:hover img{filter:grayscale(0);transform:scale(1.04);}
.team li{list-style:none;display:flex;flex-direction:column;gap:.85rem;}
.team h3{font-size:1.1rem;}
.team .role{font-family:var(--cond);font-size:.78rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--accent-text);margin-top:-.5rem;}
.team p{font-size:.92rem;color:var(--ink-2);line-height:1.55;}
@media (max-width:64rem){.team{grid-template-columns:1fr 1fr;}}
/* Kısa içerikli ızgaralar telefonda da İKİ sütunda kalır; tek sütuna
   inince sayfa gereksiz uzuyordu. Paragraf taşıyan ızgaralar (.creed,
   .rest, .reads) tek sütunda bırakıldı — 390px'de iki sütun onlar için
   satır başına üç dört kelime demek. */
@media (max-width:38rem){.team{grid-template-columns:1fr 1fr;gap:1.5rem 1.1rem;max-width:none;}}

/* belgeler */
.certs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.25rem,3vw,2rem);list-style:none;margin:0;padding:0;}
.certs-grid li{background:var(--paper-2);padding:1.5rem;display:flex;flex-direction:column;gap:.5rem;}
.certs-grid h3{font-size:1.05rem;}
.certs-grid .who{font-family:var(--cond);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);}
.certs-grid p{font-size:.92rem;color:var(--ink-2);line-height:1.55;}
.certs-grid .more{margin-top:.6rem;align-self:flex-start;font-size:.78rem;}
@media (max-width:60rem){.certs-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:40rem){.certs-grid{grid-template-columns:1fr 1fr;gap:1.5rem 1.1rem;}}

/* pozisyonlar */
.jobs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.jobs li{border-bottom:1px solid var(--hair);}
.jobs li:first-child{border-top:1px solid var(--hair);}
.jobs a{
  display:grid;grid-template-columns:minmax(0,1fr) 10rem 8rem 2rem;gap:1.5rem;align-items:center;
  padding:1.4rem 0;text-decoration:none;transition:padding-left .25s ease;
}
.jobs a:hover{padding-left:.6rem;}
.jobs h3{font-size:1.12rem;transition:color .2s ease;}
.jobs a:hover h3{color:var(--accent);}
.jobs .w{font-family:var(--cond);font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);}
.jobs .go{font-family:var(--cond);color:var(--ink-3);justify-self:end;transition:transform .25s ease,color .2s ease;}
.jobs a:hover .go{color:var(--accent);transform:translateX(4px);}
@media (max-width:56rem){
  .jobs a{grid-template-columns:1fr;gap:.35rem;}
  .jobs .go{display:none;}
}

/* alt gezinme */
.pager{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-top:clamp(3rem,6vw,4.5rem);}
.pager a{
  display:flex;flex-direction:column;gap:.4rem;text-decoration:none;max-width:22rem;
}
.pager small{font-family:var(--cond);font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);}
.pager b{font-family:var(--cond);font-size:1.15rem;font-weight:700;line-height:1.25;transition:color .2s ease;}
.pager a:hover b{color:var(--accent);}
.pager a:last-child{text-align:right;align-items:flex-end;}

/* not kutusu */
.note{background:var(--paper-2);padding:1.4rem 1.6rem;display:flex;flex-direction:column;gap:.5rem;}
.note b{font-family:var(--cond);font-size:1rem;}
.note p{font-size:.95rem;color:var(--ink-2);}

/* harita yer tutucu */
.map{
  aspect-ratio:21/9;background:var(--paper-2);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--cond);font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
  background-image:repeating-linear-gradient(45deg,transparent 0 13px,rgba(20,17,16,.04) 13px 14px);
}

/* etiket satırı */
.tagline{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;font-family:var(--cond);font-size:.82rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2);}
.tagline em{font-style:normal;color:var(--accent-text);font-weight:700;}

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

/* ============================================================
   9. DUYARLI DAVRANIŞ SERTLEŞTİRMESİ
   Aşağıdaki kurallar, dar ekranlarda taşma ve okunabilirlik
   sorunlarını önlemek için eklenmiştir.
   ============================================================ */

/* --- taşma koruması --- */
html,body{max-width:100%;}
img,video,iframe,svg{max-width:100%;height:auto;}
p,li,dd,dt,h1,h2,h3,h4,summary,blockquote,figcaption,.lede,.meta,.tagline{overflow-wrap:anywhere;word-break:normal;}
.prose a,.lines dd a,.aside a{overflow-wrap:anywhere;}
.prose table{display:block;width:100%;overflow-x:auto;border-collapse:collapse;}
pre,code{overflow-wrap:anywhere;white-space:pre-wrap;}

/* --- dokunma hedefleri: en az 44px --- */
.hero-arrows button{width:2.9rem;height:2.9rem;}
.tab{min-height:2.75rem;display:inline-flex;align-items:center;}
.crumb a,.ft ul:not(.dil-liste) a,.aside ul a,.drop-list a{padding-block:.15rem;}

/* ============================================================
   Tablet — 48rem ile 70rem arası
   ============================================================ */
@media (max-width:70rem){
  .figs{gap:2rem 1.5rem;}
}

/* ============================================================
   Küçük tablet ve büyük telefon — 52rem altı
   ============================================================ */
@media (max-width:52rem){
  .case-figs{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;}
  .case-figs > div:last-child:nth-child(odd){grid-column:1/-1;}
  .pager{gap:1.75rem;}
  .pager a,.pager a:last-child{max-width:100%;text-align:left;align-items:flex-start;}
  .say blockquote{font-size:clamp(1.3rem,5.5vw,1.8rem);}
  .qa summary{padding-right:2.25rem;font-size:1.05rem;}
  .aside{gap:1.75rem;}
  .aside-box{padding:1.35rem;}
}

/* ============================================================
   Telefon — 40rem altı
   ============================================================ */
@media (max-width:40rem){
  :root{--gap:clamp(3.25rem,10vw,4.5rem);}

  :root{--hd-h:5.2rem;}
  .brand{gap:.5rem;}
  .brand-mark{height:1.35rem;}
  .brand-tip{height:.92rem;}
  .burger{width:2.75rem;height:2.75rem;}

  /* .menu'nin üst dolgusu kaldırıldı: eski çekmece tasarımından kalmaydı ve
     .nav zaten kendi üst boşluğunu veriyor. İki .menu listesi de (dil/arama
     ve ana menü) 92px ölü boşlukla başlıyordu. */
  .menu > li > a{font-size:1.35rem;padding:.7rem 0;}
  .drop-feat b{font-size:.98rem;}

  .hero-pic{aspect-ratio:4/3;min-height:14rem;}
  .hero-say{padding:2.25rem var(--pad) 3rem;gap:1.75rem;}
  .tell h1,.tell .tell-baslik{font-size:clamp(1.95rem,8.5vw,2.6rem);}
  .tell p{font-size:1rem;}
  .tell .acts{gap:1rem;margin-top:1.6rem;}
  .tell .acts .btn{width:100%;justify-content:center;}
  .hero-ctrl{gap:1rem;}

  .phead-pic{aspect-ratio:4/3;min-height:11rem;}
  .phead h1{font-size:clamp(1.8rem,8vw,2.4rem);}
  .phead-say{padding:1.9rem var(--pad) 2.5rem;}

  .figs{grid-template-columns:1fr 1fr;gap:1.9rem 1.25rem;}
  .fig b{font-size:clamp(2rem,9vw,2.7rem);}
  .fig span{font-size:.72rem;letter-spacing:.1em;}

  .case-figs{grid-template-columns:1fr 1fr;}
  .marks{grid-template-columns:repeat(2,1fr);gap:1.5rem 1rem;}
  .marks span{font-size:.85rem;letter-spacing:.14em;}

  .tabs{gap:.85rem 1.1rem;margin-bottom:2rem;}
  .tab{font-size:.78rem;letter-spacing:.1em;}

  .gal{gap:2.5rem;}
  .gal h3{font-size:1.15rem;}
  .gal .meta{gap:.3rem 1rem;font-size:.78rem;}

  .reads h3{font-size:1.08rem;}
  .three h3{font-size:1.2rem;}

  .spec{gap:1rem;}
  .steps li{grid-template-columns:2.1rem 1fr;gap:.9rem;}

  .lines{gap:1.2rem;}
  .send{gap:1rem;}
  .send .btn{width:100%;justify-content:center;}
  .agree{font-size:.85rem;}

  .say .by{font-size:.8rem;}
  .team{gap:2rem;}
  .map{aspect-ratio:4/3;}

  .ft-end{flex-direction:column;align-items:flex-start;gap:.9rem;}
  .ft-end nav{gap:1rem;}
}

/* ============================================================
   Dar telefon — 26rem (416px) altı
   ============================================================ */
@media (max-width:26rem){
  :root{--pad:1.1rem;}
  
1fr 1fr
  
1fr 1fr
  .marks{grid-template-columns:1fr 1fr;}
  .tell h1,.tell .tell-baslik{font-size:clamp(1.75rem,9vw,2.2rem);}
  .phead h1{font-size:clamp(1.6rem,8.5vw,2rem);}
  .crumb{font-size:.7rem;gap:.4rem;}
  .brand-mark{height:1.2rem;}
  .brand-tip{height:.82rem;}
  .hero-ctrl{flex-wrap:wrap;}
}

/* ============================================================
   Yatay telefon — alçak ekranlarda hero tam ekran olmasın
   ============================================================ */
@media (max-height:34rem) and (orientation:landscape){
  /* Yatay telefonda ekran çok alçak: hero yine tam kaplar ama
     yazılar küçülür, yoksa içerik ekranı taşırıyor. */
  .hero{padding-top:calc(var(--hd-h-kucuk) + 1rem);}
  .hero h1{font-size:clamp(1.5rem,5vw,2.2rem);}
  .hero-in{gap:1.1rem;padding-block:1rem;}
  .hero-alt h2{font-size:1.05rem;}
  .kesfet{font-size:1rem;}
  .kesfet svg{width:1.4rem;height:1.4rem;}
  .hero-say{min-height:0;padding-block:2.25rem 2.25rem;}
  .hero-pic{aspect-ratio:16/9;}
  .tell h1,.tell .tell-baslik{font-size:clamp(1.7rem,4.5vw,2.4rem);}
  .menu{justify-content:flex-start;}
  .menu > li > a{font-size:1.15rem;padding:.55rem 0;}
}

/* ============================================================
   Yazdırma
   ============================================================ */
@media print{
  .hd,.ft,.reach,.tabs,.pager,.hero-ctrl,.skip,.aside-box{display:none !important;}
  body{background:#fff;color:#000;font-size:11pt;}
  .band{padding-block:1rem;}
  a[href^="/"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555;}
  .split,.duo,.case,.qa{grid-template-columns:1fr !important;}
}

/* ============================================================
   9b. REFERANS ŞERİDİ — her referans için bir yuvarlak, sonsuz akış
   Daireler sağdan sola yavaşça akar. İmleç şeridin üstüne gelince
   akış durur; üzerinde durulan dairenin açıklaması içeride aşağıdan
   yukarıya doğru açılır.

   Sonsuz döngü: liste markup'ta iki kez basılıyor, şerit tam yarısı
   kadar kayınca görüntü başlangıçla birebir aynı oluyor ve animasyon
   başa dönerken sıçrama olmuyor. Tek bir transform anahtar karesi —
   her karede JS ile konum düzeltmekten hem akıcı hem de ucuz.
   ============================================================ */
/* Şerit .wrap'ın dışında, doğrudan bölümün çocuğu: ekran genişliğini
   kendiliğinden alır. 100vw + negatif kenar boşluğu denendi, kaydırma
   çubuğunu da sayıp taşırıyordu. */
/* Akış artık CSS animasyonu değil, yerel yatay kaydırma (site.js sürüyor).
   Sebep: kullanıcı da elle kaydırabilsin. Bu yolla dokunmatik kaydırma,
   touchpad'de yatay tekerlek ve klavye tuşları bedavaya geliyor;
   transform animasyonuyla bunların hepsini elle yazmak gerekirdi.
   Sonsuz döngü yine listenin iki kez basılmasıyla: şerit yarıya
   gelince scrollLeft yarı genişlik kadar geri alınıyor, görüntü
   birebir aynı olduğu için sıçrama görünmüyor. */
.rmar{
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-ms-overflow-style:none;
  overscroll-behavior-x:contain;
  cursor:grab;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.rmar::-webkit-scrollbar{display:none;}
/* Sürüklerken imleç kapalı ele döner ve metin seçimi engellenir. */
.rmar[data-suruklu]{cursor:grabbing;user-select:none;}
.rmar-ray{
  display:flex;width:max-content;
  gap:clamp(1rem,2vw,1.75rem);
}

.rmar-daire{
  position:relative;flex:none;margin:0;
  width:clamp(13.5rem,21vw,19rem);aspect-ratio:1;
  border-radius:50%;overflow:hidden;
  background:var(--field);
}
.rmar-daire img{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;
  transition:transform .5s ease;
}
/* Perde hafif: fotoğraf boğulmasın. Yalnız dibe doğru koyulaşıp adın
   arkasını tutuyor, üst yarısı neredeyse açık. */
.rmar-daire::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,
    rgba(56,17,10,.86) 0%,
    rgba(56,17,10,.68) 30%,
    rgba(56,17,10,.26) 62%,
    rgba(56,17,10,0)   100%);
  transition:opacity .4s ease;
}
/* Açıklama açılırken zemin bir kademe koyulaşıyor. */
.rmar-daire::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  opacity:0;transition:opacity .4s ease;
  background:linear-gradient(0deg,
    rgba(56,17,10,.92) 0%,
    rgba(56,17,10,.86) 45%,
    rgba(56,17,10,.62) 75%,
    rgba(56,17,10,.34) 100%);
}

.rmar-ic{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;
  /* Dibe değil, ekvatorun biraz altına yaslanır: dairenin daralan
     ucunda yazı kalmasın. */
  padding:0 17% 20%;
  text-align:center;
}
.rmar-daire h3{
  margin:0;
  font-family:var(--pop);font-weight:500;
  font-size:clamp(1.35rem,1.85vw,1.75rem);
  line-height:1.18;letter-spacing:-.015em;
  color:#fff;text-wrap:balance;
  transition:transform .45s cubic-bezier(.4,0,.2,1);
}
/* Açıklama aşağıdan yukarı doğru açılıyor: satır yüksekliği 0fr'den
   1fr'e giderken metin de yerine kayıyor. */
.rmar-ozet{
  display:grid;grid-template-rows:1fr;width:100%;
  transition:grid-template-rows .45s cubic-bezier(.4,0,.2,1);
}
/* Satır sınırı şart: daire aşağı doğru daraldığı için uzun bir açıklama
   yuvarlağın dışına taşardı. Üç satır, en dar dairede bile içeride kalıyor. */
.rmar-ozet > span{
  overflow:hidden;min-height:0;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;
  padding-top:.6rem;
  font-size:clamp(.82rem,1vw,.95rem);line-height:1.5;
  color:rgba(255,255,255,.94);
  transition:opacity .35s ease .05s,transform .45s cubic-bezier(.4,0,.2,1),padding-top .45s ease;
}
.rmar-daire:focus-visible{outline:2px solid var(--accent-parlak);outline-offset:4px;}

/* İmleci olan cihazlarda açıklama gizli bekler, üzerine gelince açılır.
   Dokunmatikte hover yok; orada baştan görünür. */
@media (hover:hover) and (pointer:fine){
  .rmar-ozet{grid-template-rows:0fr;}
  .rmar-ozet > span{opacity:0;transform:translateY(.8rem);padding-top:0;}
  .rmar-daire:hover .rmar-ozet,
  .rmar-daire:focus-visible .rmar-ozet{grid-template-rows:1fr;}
  .rmar-daire:hover .rmar-ozet > span,
  .rmar-daire:focus-visible .rmar-ozet > span{opacity:1;transform:none;padding-top:.6rem;}
  .rmar-daire:hover::after,
  .rmar-daire:focus-visible::after{opacity:1;}
  .rmar-daire:hover img,
  .rmar-daire:focus-visible img{transform:scale(1.06);}
}

@media (max-width:760px){
  .rmar-daire{width:clamp(12rem,58vw,15rem);}
  /* Dar dairede metin hem daraltılıp hem yukarı alınıyor: dibe yaklaştıkça
     yuvarlak hızla daralıyor, kutunun köşeleri dışarı taşıyordu. */
  .rmar-ic{padding:0 16% 18%;}
  /* Uzun ad dört satıra çıkıp dibe dayanıyordu. */
  .rmar-daire h3{font-size:1.15rem;}
}
/* Dokunmatikte açıklama sürekli görünür; iki satır, dairenin daralan
   dibine dayanmadan sığan en fazla miktar. */
@media (hover:none){
  .rmar-ozet > span{-webkit-line-clamp:2;}
}
@media (prefers-reduced-motion:reduce){
  /* Akış kapanınca şerit elle kaydırılabilir kalsın. */
  .rmar{overflow-x:auto;}
  .rmar-ray{animation:none;}
  .rmar-daire img,.rmar-daire h3,.rmar-ozet,.rmar-ozet > span,
  .rmar-daire::before,.rmar-daire::after{transition:none;}
}

/* ============================================================
   10. REFERANS LİSTESİ
   Alt alta akan kayıtlar: ortalanmış fotoğraf, altında ad ve sektör,
   en altta iki yana yaslı açıklama. Fotoğraflar ölçülü tutuldu —
   kaynak görseller küçük, büyütülünce bulanıklaşıyor.
   ============================================================ */
.refs{
  display:flex;flex-direction:column;
  gap:clamp(3rem,6vw,5rem);
  max-width:52rem;margin-inline:auto;
}
.ref{
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
}
/* İnce kırmızımsı çerçeve; fotoğraf ortalı ve ölçülü */
.ref-ph{
  margin:0 0 clamp(1.25rem,2.5vw,1.75rem);
  width:min(100%,26rem);
  aspect-ratio:3/2;overflow:hidden;
  border-radius:.9rem;
  box-shadow:
    inset 0 0 0 1px rgba(194,46,31,.28),
    0 18px 34px -26px rgba(56,17,10,.45);
}
.ref-ph img{
  width:100%;height:100%;display:block;
  object-fit:cover;object-position:center 32%;
  transition:transform .7s cubic-bezier(.2,.7,.3,1);
}
.ref:hover .ref-ph img{transform:scale(1.03);}

.ref-say{max-width:44rem;}
.ref-no{
  display:block;margin-bottom:.5rem;
  font-family:var(--pop);font-size:.82rem;font-weight:500;
  letter-spacing:.14em;color:var(--accent-text);
  font-variant-numeric:tabular-nums;
}
.ref h3{
  font-family:var(--pop);font-weight:600;
  font-size:clamp(1.25rem,2vw,1.65rem);line-height:1.25;letter-spacing:-.015em;
  color:var(--ink);
}
.ref-sektor{
  margin-top:.45rem;
  font-family:var(--pop);font-size:.8rem;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);
}
/* İki yana yaslı: kurumsal metin görünümü. Tireleme açık,
   yoksa yaslama kelimeler arasında geniş boşluklar bırakıyor. */
.ref-metin{
  margin-top:clamp(.9rem,1.8vw,1.25rem);
  font-family:var(--pop);font-size:1rem;font-weight:400;line-height:1.75;
  color:var(--ink-2);
  text-align:justify;text-justify:inter-word;
  hyphens:auto;
}
/* Görseli olmayan referans yalnızca metniyle görünür */
.ref-ph--bos{display:none;}

@media (max-width:40rem){
  .refs{gap:2.75rem;}
  .ref-ph{width:100%;aspect-ratio:16/10;}
  .ref-metin{font-size:.96rem;line-height:1.7;text-align:left;hyphens:none;}
}
/* Küçük kaynak görsellerin proje detayında bulanıklaşmasını önle */
/* Kaynak en fazla 350px geniş; büyütülüp bulanıklaşmasın diye sınırlanıyor */
.prose figure img{max-width:22rem;}

/* ---------- tablet aralığı: tek sütuna düşmesin ---------- */
@media (min-width:40.01rem) and (max-width:60rem){
  .three{grid-template-columns:1fr 1fr;max-width:none;}
  .reads{grid-template-columns:1fr 1fr;max-width:none;}
}

/* ============================================================
   KURUMSAL BÖLÜMÜ — solda numaralı liste, sağda fotoğraf
   Bir satırın üzerine gelince sağdaki fotoğrafın yerine, aynı alanı
   kaplayan yuvarlak köşeli beyaz bir kart açılır: üstte koyu kırmızı
   başlık ve metin, altta o başlığa ait fotoğraf.
   ============================================================ */
.kurum{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:stretch;
}
.kurum-sol{display:flex;flex-direction:column;justify-content:center;}
.kurum-sol h2{margin-bottom:clamp(1.75rem,3.5vw,2.75rem);}

.kurum-liste{list-style:none;margin:0;padding:0;}
.kurum-liste > li + li{box-shadow:inset 0 1px 0 var(--hair);}
.kurum-liste a{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:clamp(1rem,2.5vw,2rem);
  padding:clamp(1.05rem,1.9vw,1.45rem) 0;
  text-decoration:none;color:var(--ink);
}
.kurum-liste em{
  font-style:normal;font-family:var(--pop);font-weight:500;
  font-size:clamp(1.1rem,1.5vw,1.45rem);
  color:var(--ink-3);opacity:.55;
  font-variant-numeric:tabular-nums;
  transition:color .25s ease,opacity .25s ease;
}
.kurum-liste b{
  font-family:var(--pop);font-weight:500;
  font-size:clamp(1.02rem,1.35vw,1.3rem);line-height:1.3;
}
/* Ok aşağı değil yana bakar */
.kurum-liste i{
  font-style:normal;font-size:1.25rem;line-height:1;color:var(--ink-3);
  transition:transform .3s cubic-bezier(.2,.7,.3,1),color .25s ease;
}
.kurum-liste > li.secili em,.kurum-liste > li.secili i{color:var(--accent-text);opacity:1;}
.kurum-liste > li.secili i{transform:translateX(.45rem);}

/* ---- sağ sütun: fotoğraf ve üstünde açılan kartlar ---- */
.kurum-sag{position:relative;min-height:clamp(24rem,42vw,34rem);}
.kurum-gorsel{position:absolute;inset:0;overflow:hidden;border-radius:1.5rem;}
.kurum-gorsel img{width:100%;height:100%;object-fit:cover;}

/* Kart fotoğrafın tamamını kaplar: küçük baloncuk değil, alanın kendisi */
.kurum-kart{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;
  padding:clamp(1.5rem,2.4vw,2.25rem);
  border-radius:1.5rem;
  background:var(--paper-2);
  color:var(--ink);text-decoration:none;
  box-shadow:
    inset 0 0 0 1px rgba(194,46,31,.3),
    0 30px 60px -34px rgba(56,17,10,.6);
  opacity:0;visibility:hidden;
  transform:scale(.985);
  transition:opacity .35s ease,transform .4s cubic-bezier(.2,.7,.3,1),visibility .4s;
}
.kurum-kart.acik{opacity:1;visibility:visible;transform:none;}

.kurum-kart-ust{display:block;}
.kurum-kart em{
  display:block;font-style:normal;font-family:var(--pop);font-weight:500;
  font-size:.95rem;letter-spacing:.06em;color:var(--accent-text);
  margin-bottom:.6rem;font-variant-numeric:tabular-nums;
}
.kurum-kart h3{
  font-family:var(--pop);font-weight:500;
  font-size:clamp(1.25rem,1.8vw,1.7rem);line-height:1.22;
  color:var(--ink);margin-bottom:.75rem;
}
.kurum-kart p{font-size:clamp(.95rem,1.05vw,1.05rem);line-height:1.6;color:var(--ink-2);}
.kurum-git{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:1.1rem;
  font-family:var(--pop);font-size:.92rem;font-weight:500;color:var(--ink);
}
/* Ok grafik öğe olduğu için vurgulu kırmızıda kalır */
.kurum-git i{font-style:normal;color:var(--accent-text);transition:transform .25s ease;}
.kurum-kart:hover .kurum-git i{transform:translateX(.3rem);}

/* Alttaki fotoğraf kalan boşluğu doldurur */
.kurum-kart-ph{
  display:block;flex:1;min-height:6rem;
  margin-top:clamp(1.1rem,2vw,1.6rem);
  overflow:hidden;border-radius:.9rem;
}
.kurum-kart-ph img{width:100%;height:100%;object-fit:cover;}

@media (max-width:64rem){
  .kurum{grid-template-columns:1fr;gap:clamp(2rem,5vw,3rem);}
  .kurum-sag{order:-1;min-height:0;aspect-ratio:16/10;}
}
/* Dokunmatikte ve dar ekranda kart açılmaz: satırlar bağlantı olarak çalışır */
@media (max-width:74rem),(pointer:coarse){
  .kurum-kart{display:none;}
}

/* ============================================================
   SEKTÖR BLOĞU — ekranın tamamını kaplayan, arka planı fotoğraflı bant
   Fotoğraf siyah-beyaz ve hafifçe bulanık: ne olduğu seçiliyor ama
   metnin önüne geçmiyor. İçerik yumuşak hücrelere ayrılıyor; sert
   çerçeveli kutular yerine ince ayraçlar ve saydam zemin kullanılıyor.
   ============================================================ */
.sektor{
  position:relative;isolation:isolate;overflow:hidden;
  padding-block:clamp(4rem,8vw,7rem);
  color:var(--field-ink);
}
.sektor-bg{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;
  /* Blur çok az: fotoğrafın ne olduğu belli kalsın */
  filter:grayscale(1) blur(2.5px) contrast(1.05);
  transform:scale(1.04);   /* blur kenarlarda saydamlık bırakmasın */
}
.sektor-perde{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(56,17,10,.82),rgba(56,17,10,.9)),
    rgba(56,17,10,.2);
}
.sektor-ust{max-width:44rem;margin-bottom:clamp(2.5rem,5vw,3.5rem);}
.sektor-ust .kicker{color:var(--accent-inv);}
.sektor-ust h2{color:var(--field-ink);}
.sektor-ust .lede{color:rgba(239,245,243,.82);margin-top:1.1rem;}

.sektor-liste{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:1px;
  background:rgba(239,245,243,.16);   /* ayraç çizgileri boşluktan doğuyor */
  border-radius:1.25rem;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(239,245,243,.16);
}
/* Hücre: kutu değil, saydam bir yüzey. Üzerine gelince biraz aydınlanır. */
.sektor-hucre{
  background:rgba(56,17,10,.42);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  padding:clamp(1.35rem,2.2vw,1.9rem);
  transition:background-color .3s ease;
}
.sektor-hucre:hover{background:rgba(56,17,10,.18);}
.sektor-hucre h3{
  font-family:var(--pop);font-weight:600;
  font-size:clamp(1.02rem,1.3vw,1.2rem);line-height:1.3;letter-spacing:-.01em;
  color:var(--field-ink);margin-bottom:.5rem;
}
.sektor-hucre p{font-family:var(--pop);font-size:.93rem;line-height:1.6;color:rgba(239,245,243,.78);}

@media (max-width:40rem){
  .sektor-liste{border-radius:1rem;}
  .sektor-hucre{padding:1.15rem;}
}

/* ============================================================
   KAPANIŞ BANDI — koyu bölümden alt bilgiye yumuşak geçiş
   Doğrudan koyu bloktan koyu footer'a inmek sert duruyordu.
   ============================================================ */
.kapanis{
  background:var(--paper-2);
  padding-block:clamp(3.5rem,7vw,5.5rem);
  text-align:center;
}
.kapanis h2{max-width:20ch;margin-inline:auto;}
.kapanis .lede{max-width:46rem;margin:1.2rem auto 0;}
.kapanis-eylem{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(1.2rem,3vw,2.2rem);margin-top:clamp(2rem,4vw,2.75rem);
}

/* Alt bilgideki iletişim düğmesi — numara yerine geçen çağrı.
   Cam görünümlü hap: alt bilgi zemini saydam olduğu için dolu bir
   düğme ağır duruyordu. */
/* Alt bilgide zemin koyu: kutu saydam, kenar ve ikon açık renkte.
   --paper burada hâlâ beyaz olduğu için .ikon-btn'in varsayılanı
   beyaz kutu + beyaz ikon verirdi, yani görünmez olurdu. */
.ikon-btn--ft{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.42);   /* 3.90:1 — ikon-only düğmenin sınırı görünür kalmalı */
  color:var(--field-ink);
}
.ikon-btn--ft:hover{background:var(--field-ink);color:var(--field);border-color:var(--field-ink);}
.ft-btns{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.35rem;}

/* Alt bilgideki bölge kapsamı cümlesi — il listesinin yerini aldı */
.ft-bolge{
  font-family:var(--pop);font-size:.93rem;line-height:1.6;
  color:rgba(239,245,243,.78);margin-bottom:1rem;max-width:16rem;
}