/* Palet 2026-09-02'de kullanıcı kararıyla korundu: lacivert + turuncu.
   Yazı tipi kararı da onun: SİSTEM YIĞINI, dış kaynak yok. Google Fonts eklemek
   sayfa başına 2 dış istek demek ve acil arayan biri için hız doğrudan dönüşümdür.
   Bu yüzden aşağıda tek bir @import, @font-face veya CDN bağlantısı YOK. */
:root{
  --mur:#12304a;        /* lacivert — başlık, marka, gezinme */
  --mur-koyu:#0c2237;
  --vur:#c8511b;        /* turuncu — eylem */
  --vur-koyu:#a44113;
  --vur-zemin:#fdf3ee;
  --gri:#5b6670;
  --gri-acik:#78838e;
  --cizgi:#e2e6ea;
  --cizgi-koyu:#ccd4db;
  --zemin:#f6f8fa;
  --metin:#1c2429;
  --acil:#b3261e;       /* YALNIZ arama_niyeti_tipi: acil sayfalarında */
  --acil-zemin:#fdeceb;
  --olcu:41rem;         /* ~70 karakter satır — 46rem'de 87 karaktere çıkıyordu */
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
     color:var(--metin);background:#fff}
/* Ölçü tek yerden. Önce her çocuğa auto margin veriliyordu, ama `.alt` ve `.cta`
   kendi `margin` KISAYOLLARIYLA onu eziyordu (margin:.3rem 0 → left/right sıfır)
   ve üst bant sola yapışıyordu. İç sarmalayıcı bu çakışmayı tümden kaldırır. */
main,.kirinti,.kap{max-width:var(--olcu);margin-left:auto;margin-right:auto}
main,.kirinti,.ust,footer{padding-left:1.25rem;padding-right:1.25rem}

/* Klavye odağı — önceden hiç görünmüyordu */
a:focus-visible,button:focus-visible{outline:3px solid var(--vur);outline-offset:2px;
  border-radius:3px}

/* ── Üst bant ─────────────────────────────────────────────────────────── */
/* ── Enerji hattı — header'ın imzası, 2026-09-02 ──────────────────────────
   Konstrüktivist asimetri: gri ayırıcı kalktı, yerine kenarlara doğru
   saydamlaşan 1 px lacivert hat ve LOGO HİZASINDA 3 px'lik turuncu bir parça
   geldi. Turuncunun sağ ucu çapraz kesik — logodaki yıldırımın yönü.

   Turuncu parçanın yeri YÜZDEYLE verilemez. İçerik sütunu 41rem ve ORTALANMIŞ,
   yani logonun sol kenarı ekran genişliğine göre %5 ile %34 arasında geziyor
   (390 px'te %5, 1920 px'te %34 — ölçüldü). Sabit bir yüzde hiçbir ekranda
   logoyla hizalanmaz. Bu yüzden aynı ortalama hesabı calc() ile tekrarlanıyor:
   sütunun sol kenarı + gövde dolgusu. Genişlik de sabit — yüzde olsaydı
   telefonda 27 px'e düşer, geniş ekranda 134 px'e şişerdi. */
.ust{padding-top:1.4rem;padding-bottom:.9rem;border-bottom:0;position:relative}
.ust::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent 0%,
    rgba(18,48,74,.20) 10%,rgba(18,48,74,.20) 90%,transparent 100%)}
.ust::after{content:"";position:absolute;bottom:0;height:3px;width:78px;
  left:calc(max(0px, 50% - 20.5rem) + 1.25rem);
  background:var(--vur);
  clip-path:polygon(0 0, 100% 0, calc(100% - 7px) 100%, 0 100%)}
/* Marka kilidi: simge + iki satır metin. Metin gerçek metindir, görsel değil —
   her piksel yoğunluğunda net ve görsel yüklenmese de ad yerinde kalır.
   Büyük harf CSS ile veriliyor; HTML'de normal yazılı, yoksa ekran okuyucu adı
   harf harf okuyabilir ve NAP tutarlılığı bozulur. */
.marka{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;
       color:var(--mur)}
.marka-simge{display:block;width:88px;height:auto;flex:0 0 auto}
.marka-ad{display:flex;flex-direction:column;line-height:1}
.marka-ust{font-size:1.72rem;font-weight:800;letter-spacing:-.012em;
  text-transform:uppercase}
/* Alt satır: turuncu, geniş harf aralıklı, iki yanında marka çizgisi —
   özgün logodaki "ELEKTRİK" bandının karşılığı. Çizgiler flex:1 ile üstteki
   kelimenin genişliğine kendiliğinden uyuyor. */
.marka-alt{display:flex;align-items:center;gap:.3rem;margin-top:.22rem;
  font-size:.66rem;font-weight:700;color:var(--vur);letter-spacing:.3em;
  text-transform:uppercase;text-indent:.3em}
.marka-alt::before,.marka-alt::after{content:"";flex:1 1 auto;height:2px;
  background:var(--vur);min-width:.5rem}
.marka:hover .marka-ust{color:var(--mur-koyu)}
.ust .alt{margin:.3rem 0 .85rem;color:var(--gri);font-size:.9rem}

/* ── Arama düğmesi — üç kademe, arama_niyeti_tipi'nden türer ──────────── */
.cta{margin:0 0 .9rem;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.ara{display:inline-flex;align-items:center;gap:.45rem;background:var(--vur);
     color:#fff;text-decoration:none;padding:.65rem 1.15rem;border-radius:6px;
     font-weight:600;line-height:1.2}
.ara:hover{background:var(--vur-koyu)}
.ara.wa{background:#128c7e}
.ara.wa:hover{background:#0f7368}
.ara.eksik{background:var(--acil)}
.saat{color:var(--gri);font-size:.88rem}
/* Sakin kademe: bilgi ve karar sayfaları. Renk marka rengidir — çerçeveli beyaz
   hâli denendi ve 2026-09-02'de geri alındı: düğme düğme gibi görünmüyordu.
   Kademe farkı artık RENKTE değil ÖLÇÜDE: aynı turuncu, biraz daha küçük. */
.cta.sakin .ara{padding:.5rem .95rem;font-size:.95rem}
/* acil kademe */
.cta.acil .ara{background:var(--acil);font-size:1.05rem;padding:.75rem 1.3rem}
.cta.acil .ara:hover{background:#94201a}
.cta.acil .ara.wa{background:#128c7e}

/* ── Katman menüsü ────────────────────────────────────────────────────── */
/* Katman menüsü — geniş ekranda tek satır, 760 px altında İKİ SÜTUNLU IZGARA.
   Altı etiketin toplamı ~610 px; 390 px'lik telefonda tek satıra sığmıyor.
   Önce yatay kaydırma denendi ve 2026-09-02'de GERİ ALINDI: kullanıcı gerçek
   telefonda baktı, kaydırılabildiği anlaşılmıyordu ve kesilen etiket "bozuk"
   gibi okunuyordu. Izgarada altı bölüm de görünür, hiçbir yazı kesilmez,
   dokunuş gerekmez; bedeli header'da ~95 px dikey yer.
   Sıra korunur — ızgara soldan sağa, yukarıdan aşağı akar.
   Masaüstündeki nowrap+overflow kalıyor: 760–1000 px arasında sarmayı önleyen
   zararsız bir emniyet. */
.katmanlar{margin-top:.9rem}
.katmanlar ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:nowrap;
  gap:1.1rem;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain}
.katmanlar ul::-webkit-scrollbar{display:none}
.katmanlar li{margin:0;flex:0 0 auto}
.katmanlar a{color:var(--mur);text-decoration:none;font-weight:600;font-size:.93rem;
  padding:.2rem 0;border-bottom:2px solid transparent;display:inline-block;
  white-space:nowrap}
.katmanlar a:hover{border-bottom-color:var(--cizgi-koyu)}
/* Etkin katman göstergesi LACİVERT — 2026-09-02'de turuncudan çevrildi.
   Enerji hattının turuncu parçası nav'ın hemen altında ve AYNI sol kenarda;
   ikisi de turuncu kalınca on piksel arayla iki turuncu çubuk üst üste
   biniyordu. Turuncu artık tek şey demek: eylem ve imza. */
.katmanlar a[aria-current]{border-bottom-color:var(--mur);color:var(--mur)}

.kirinti{padding-top:.85rem;font-size:.83rem;color:var(--gri)}
.kirinti a{color:var(--gri)}
.kirinti a:hover{color:var(--vur)}
/* Kırıntıdaki katman ikonu — satırla aynı boy, hafif soluk. Sayfanın en
   üstündeki tek katman işareti bu; her sayfada ilk ekranda görünüyor. */
.kirinti .ikon{width:1.1em;height:1.1em;margin-right:.3rem;opacity:.66;
  vertical-align:-.17em}

/* Katman menüsündeki ikon MASAÜSTÜNDE GİZLİ. Orada menü tek satırlık dar bir
   metin dizisi; altı ikon eklemek satırı taşırır ve kalabalık yapar. Mobilde
   ise öğeler kart hâlinde ve ikonun yeri var — 760 px altında açılıyor. */
.katmanlar .ikon{display:none}

/* ── Ana sayfa banner'ı ───────────────────────────────────────────────────
   Masaüstü: görsel tam genişlik, metin SOL bölgede görselin üstünde.
   Mobil:    görsel kırpılır (usta + pano ortalanır), metin ALTINA iner.
   Metin bölgesi ölçüldü — görselin sol %28'i düz duvar (std 5–15) ve %84
   parlaklıkta; lacivert yazı orada okunuyor. Yine de beyaz bir perde
   konuyor: kırpma oranı değiştiğinde kontrastı garanti eden şey o. */
.banner{position:relative;margin:0 0 1.4rem;background:var(--zemin)}
.banner-gorsel{display:block;width:100%;height:auto;max-height:26rem;
  object-fit:cover;object-position:62% center}
.banner-metin{position:absolute;inset:0;display:flex;align-items:center;
  padding:0 1.25rem;
  background:linear-gradient(to right,
    rgba(255,255,255,.96) 0%,
    rgba(255,255,255,.93) 36%,
    rgba(255,255,255,.55) 53%,
    rgba(255,255,255,0)   72%)}
.banner-metin .kap{width:100%}
.banner-metin h1{margin:0 0 .4rem;max-width:15ch}
.banner-alt{margin:0 0 .7rem;color:var(--gri);font-size:.95rem;max-width:34ch}
.banner-guvence{margin:0;max-width:36ch;font-size:1rem;line-height:1.5;
  color:var(--metin);border-left:3px solid var(--vur);padding-left:.75rem}
/* Çalışma saati banner'da BASILMAZ: `.saat` düz renkli bir yazı ve perdenin
   bittiği yerde fotoğrafın üstüne düşüp okunmuyordu (tarayıcıda görüldü).
   Bilgi kaybolmuyor — üst bantta ve alt bantta zaten var. */
.banner .saat{display:none}
@media(max-width:760px){
  /* Metin görselin üstünden İNER: dar ekranda sol boş alan kalmıyor,
     kırpma ustayı ve panoyu merkeze alıyor. */
  .banner{background:none}
  .banner-gorsel{aspect-ratio:16/9;max-height:15rem;object-position:70% center}
  .banner-metin{position:static;background:none;padding:1.1rem 1.25rem 0;
    display:block}
  .banner-metin h1,.banner-alt{max-width:none}
  .banner-metin h1{margin-top:0}
}

/* ── Metin ────────────────────────────────────────────────────────────── */
main{padding-top:.4rem;padding-bottom:3rem}
h1{font-size:clamp(1.6rem,5.2vw,2.05rem);line-height:1.22;color:var(--mur);
   margin:.7rem 0 1.1rem;letter-spacing:-.015em;text-wrap:balance}
h2{font-size:1.32rem;line-height:1.3;color:var(--mur);margin:2.2rem 0 .7rem;
   letter-spacing:-.01em;text-wrap:balance}
/* ── Tipografi — İş 4, 2026-09-02 ────────────────────────────────────────
   İçerik ölçüldü: paragraf medyanı 20 kelime, liste medyanı 4 madde, sayfa
   başına 5 h3. Yazı zaten kısa ve düzenli; eksik olan RİTİM ve HİYERARŞİ idi.
   Dört dokunuş, hepsi CSS — HTML'e tek karakter eklenmedi. */

/* 1 · h3 gövdeden yalnız %7 büyüktü (1,07 / 1,00rem) ve bölümler kendini
   duyurmuyordu. %14'e çıkarıldı, üst boşluk arttı: sayfa başına beş bölüm
   var, ayrım oradan geliyor. */
h3{font-size:1.14rem;color:var(--mur);margin:1.95rem 0 .5rem;
   letter-spacing:-.006em;text-wrap:balance}

/* 2 · Yetim kelime önleme. 955 paragrafta son satıra tek kelime düşmesini
   engelliyor; desteklemeyen tarayıcıda sessizce yok sayılır. */
p{margin:0 0 1rem;text-wrap:pretty}

/* 3 · Giriş paragrafı — her sayfanın ilk paragrafı. Medyan 20 kelime, yani
   gerçekten bir açılış cümlesi; biraz büyütülüp koyulaştırıldı. */
main > p:first-of-type{font-size:1.08rem;line-height:1.55;color:var(--mur)}

/* 4 · Liste işaretçisi kare ve lacivert — 599 madde var, ritmi o taşıyor.
   Kare, gezinme modüllerinde kurulan şematik dilin devamı. Turuncu
   KULLANILMADI: bu sitede turuncu eylem ve imza demek. */
ul{list-style:square}
li::marker{color:var(--mur)}
a{color:var(--vur);text-underline-offset:2px}
a:hover{color:var(--vur-koyu)}
strong{font-weight:600;color:var(--mur)}
ul{padding-left:1.15rem}
li{margin:.35rem 0}
blockquote{border-left:3px solid var(--vur);margin:1.3rem 0;
  padding:.1rem 0 .1rem 1rem;color:var(--gri)}
blockquote p:last-child{margin-bottom:0}

/* Tablo — dar ekranda sayfayı yana kaydırmasın diye kendi kutusunda kayar */
.tablo-kutu{overflow-x:auto;margin:1.3rem 0;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:.93rem;min-width:19rem}
th,td{border:1px solid var(--cizgi);padding:.5rem .65rem;text-align:left}
th{background:var(--zemin);font-weight:600;color:var(--mur);white-space:nowrap}
td{font-variant-numeric:tabular-nums}

/* ── Model zinciri — ağın okuma yolu ──────────────────────────────────────
   Üç katman hub'ında görünür, bulunulan katman dolu. Dört düğümün üçü bağlantı,
   biri ("Muhtemel ihtiyaç") KESİKLİ ve bağlantısız — orası okurun kendi adımı,
   sitenin bir sayfası değil. Oklar CSS'ten; HTML'de ok karakteri yok. */
.model-zincir{margin:0 0 1.6rem}
.model-zincir ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  align-items:center;gap:.4rem .1rem}
.model-zincir li{display:flex;align-items:center;min-width:0}
.model-zincir li::after{content:"→";margin:0 .5rem;color:var(--gri-acik);
  font-size:.95rem;flex:0 0 auto}
.model-zincir li:last-child::after{content:none}
.model-zincir a,.model-zincir span{display:inline-block;font-size:.86rem;
  padding:.3rem .7rem;border:1px solid var(--cizgi-koyu);border-radius:4px;
  text-decoration:none;color:var(--mur);white-space:nowrap}
.model-zincir a:hover{border-color:var(--vur);color:var(--vur)}
.model-zincir .okur-adimi span{border-style:dashed;color:var(--gri);
  background:var(--zemin)}
.model-zincir li[aria-current] span{background:var(--mur);border-color:var(--mur);
  color:#fff;font-weight:600}
@media(max-width:520px){
  /* Dört düğüm 390 px'e tek satırda sığmıyor; dikeye dönüp ok aşağı bakıyor. */
  .model-zincir ol{flex-direction:column;align-items:flex-start;gap:0}
  .model-zincir li{flex-direction:column;align-items:flex-start}
  .model-zincir li::after{content:"↓";margin:.15rem 0 .15rem .9rem}
}

/* ── Süreç haritası — Aşama 2, İş 5 ───────────────────────────────────────
   Dört adımlı doğrusal zincir. Geniş ekranda yatay, 640 px altında dikey:
   "Müdahale Sonrası Kontrol" dört sütuna bölünmüş 390 px'e sığmıyor, dikeyde
   ise tam okunuyor. Düğüm numarası CSS sayacından — HTML'de numara yok. */
.surec-harita{margin:0 0 2rem;padding:1rem 0 .2rem;
  border-top:1px solid var(--cizgi);border-bottom:1px solid var(--cizgi)}
.surec-harita ol{list-style:none;margin:0;padding:0;display:flex;
  counter-reset:adim}
.surec-harita li{flex:1 1 0;counter-increment:adim;position:relative;
  padding:2.4rem .3rem .9rem;text-align:center;min-width:0}
/* bağlantı çizgisi — düğümlerin ardında, son öğede yok */
.surec-harita li::after{content:"";position:absolute;top:1.05rem;left:50%;
  width:100%;height:2px;background:var(--cizgi-koyu)}
.surec-harita li:last-child::after{display:none}
/* düğüm */
.surec-harita li::before{content:counter(adim);position:absolute;top:0;left:50%;
  transform:translateX(-50%);width:2.1rem;height:2.1rem;border-radius:50%;
  background:#fff;border:2px solid var(--cizgi-koyu);color:var(--gri);
  display:flex;align-items:center;justify-content:center;
  font-size:.82rem;font-weight:700;font-variant-numeric:tabular-nums;z-index:1}
.surec-harita a,.surec-harita span{font-size:.84rem;line-height:1.3;
  text-decoration:none;color:var(--gri);display:inline-block}
.surec-harita a:hover{color:var(--vur)}
/* bulunulan adım */
.surec-harita li[aria-current]::before{background:var(--mur);
  border-color:var(--mur);color:#fff}
.surec-harita li[aria-current] span{color:var(--mur);font-weight:600}

@media(max-width:640px){
  .surec-harita ol{flex-direction:column}
  .surec-harita li{flex:none;text-align:left;padding:.5rem 0 .5rem 3rem;
    min-height:2.6rem;display:flex;align-items:center}
  .surec-harita li::before{top:.35rem;left:0;transform:none}
  /* çizgi dikeye döner */
  .surec-harita li::after{top:2.4rem;left:1.05rem;width:2px;height:100%;
    transform:translateX(-50%)}
}

/* ── Gezinme blokları ─────────────────────────────────────────────────── */
.blok-bas{font-size:1.05rem;margin:0 0 .5rem;color:var(--mur)}
/* İkonlar — başlıkla aynı rengi alır (fill:currentColor), ayrı bir renk kararı
   yok. Turuncu bilerek kullanılmadı: turuncu bu sitede EYLEM ve İMZA demek;
   yapısal başlıklara da yayılsaydı o anlamı kaybederdi. */
.ikon{width:1.05em;height:1.05em;flex:0 0 auto;vertical-align:-.16em;
  margin-right:.45rem;opacity:.72}
h2 .ikon,h3 .ikon{margin-right:.4rem}
.karar h2 .ikon{opacity:.85}
.zincir{margin-top:2.4rem;padding-top:1.2rem;border-top:1px solid var(--cizgi);
  display:flex;flex-wrap:wrap;gap:.6rem}
.zincir-yer{flex-basis:100%;margin:0 0 .2rem;color:var(--gri);font-size:.82rem}
.zincir a{flex:1 1 12rem;border:1px solid var(--cizgi);border-radius:6px;
  padding:.55rem .85rem;text-decoration:none;font-weight:600;color:var(--mur)}
.zincir a:hover{border-color:var(--vur);color:var(--vur)}
.zincir a span{display:block;font-weight:400;color:var(--gri);font-size:.79rem;
  margin-bottom:.1rem}
.zincir .sonraki{text-align:right}
.zincir + .karar{margin-top:1.8rem}

.karar{margin-top:2.4rem;padding:1.05rem 1.15rem;background:var(--vur-zemin);
  border-left:3px solid var(--vur);border-radius:0 6px 6px 0}
.karar h2{font-size:1rem;margin:0 0 .6rem}
.karar ul,.kardes ul,.ilgili ul{list-style:none;padding:0;margin:0;display:flex;
  flex-wrap:wrap;gap:.45rem}
.karar li,.kardes li,.ilgili li{margin:0}
.karar a{display:inline-block;background:#fff;border:1px solid #eddbd0;
  border-radius:5px;padding:.35rem .7rem;text-decoration:none;font-size:.9rem;
  color:var(--mur)}
.karar a:hover{border-color:var(--vur);color:var(--vur)}
.karar + .ilgili{margin-top:1.8rem}

.kardes{margin-top:1.8rem}
.kardes h2{font-size:1.05rem;margin:0 0 .2rem}
.kardes-grup{margin:0 0 .5rem;color:var(--gri);font-size:.82rem}
.kardes a,.ilgili a{display:inline-block;border:1px solid var(--cizgi);
  border-radius:5px;padding:.35rem .7rem;text-decoration:none;font-size:.9rem;
  color:var(--mur)}
.kardes a:hover,.ilgili a:hover{border-color:var(--vur);color:var(--vur)}

.ilgili{margin-top:2.4rem;padding-top:1.2rem;border-top:1px solid var(--cizgi)}
.ilgili h2{font-size:1.05rem;margin:0 0 .5rem}
.ilgili h3{font-size:.78rem;font-weight:600;color:var(--gri);margin:1.1rem 0 .45rem;
  letter-spacing:.045em;text-transform:uppercase}
.ilgili h3:first-of-type{margin-top:.6rem}

/* ── Alt ──────────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--cizgi);padding-top:1.3rem;padding-bottom:2.6rem;
  color:var(--gri);font-size:.9rem;background:var(--zemin);margin-top:1rem}
footer strong{color:var(--mur)}
.kucuk{font-size:.84rem;color:var(--gri-acik)}
footer .cta{margin-top:.9rem}

/* ── Çerez rıza şeridi — 2026-09-02 ───────────────────────────────────────
   Altta sabit, dar bir şerit. İçeriği ÖRTMEZ: sayfa sonuna kadar okunabilsin
   diye body'ye ek dolgu verilmiyor, şerit karar verilir verilmez kayboluyor.
   Turuncu kullanılmadı — burada "eylem" yok, tercih var. */
.cerez{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--mur);
  color:#fff;padding:.9rem 1.25rem;box-shadow:0 -2px 14px rgba(0,0,0,.22)}
.cerez p{max-width:var(--olcu);margin:0 auto;font-size:.88rem;line-height:1.45}
.cerez strong{color:#fff}
.cerez a{color:#fff;text-underline-offset:3px}
.cerez-dugme{display:flex;gap:.6rem;margin-top:.7rem!important}
.cerez button{font:inherit;font-weight:600;font-size:.88rem;cursor:pointer;
  padding:.5rem 1.1rem;border-radius:5px;border:1px solid #fff;background:none;
  color:#fff}
.cerez button[data-kabul]{background:#fff;color:var(--mur)}
.cerez button:hover{opacity:.85}
.cerez button:focus-visible{outline:3px solid var(--vur);outline-offset:2px}
.cerez-sifirla{font:inherit;font-weight:600;font-size:.92rem;cursor:pointer;
  padding:.5rem 1.05rem;border-radius:5px;border:1px solid var(--cizgi-koyu);
  background:var(--zemin);color:var(--mur)}
.cerez-sifirla:hover:not(:disabled){border-color:var(--vur);color:var(--vur)}
.cerez-sifirla:disabled{opacity:.6;cursor:default}
/* Acil sayfalarda alt şerit zaten var — çerez şeridi onun ÜSTÜNE oturur,
   yoksa arama düğmesini kapatırdı. */
body.acil .cerez{bottom:4.2rem}
@media(min-width:641px){body.acil .cerez{bottom:0}}

/* ── Sabit arama şeridi — YALNIZ acil sayfalarında, YALNIZ dar ekranda ──
   Geniş ekranda üstteki düğme zaten görünür kalıyor; orada şerit yer kaplar. */
.sabit{display:none}
@media(max-width:760px){
  /* ── Sigorta modülleri ────────────────────────────────────────────────
     Menü öğeleri panodaki sigorta modüllerine benzetiliyor: kırık beyaz
     zemin, ince çerçeve, solda dikey turuncu mandal, sağ üstte devre
     numarası. Dokununca zemin laciverte döner ve mandal aşağı iner —
     kısa, mekanik bir "attı" hissi. Gölge yok, parıltı yok.

     Numaralar CSS sayacından geliyor; HTML'e tek karakter eklenmedi ve
     sıra DOM'dan türüyor, elle liste tutulmuyor.

     Dolgu ÖLÇÜLEREK belirlendi. Önerilen 19+30 px'te en uzun etiket
     ("Hizmet Ortamları", ≈120 px) 390 px'lik telefonda 118 px'e sıkışıp
     360 px'te taşıyordu. Sağ dolgu 22 px'e indi ve etiketin sarmasına
     izin verildi: taşmak yerine modül yükseliyor. */
  .katmanlar{counter-reset:devre}
  .katmanlar ul{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;
    overflow:visible}
  .katmanlar li{counter-increment:devre}
  .katmanlar .ikon{display:inline-block;width:1.1em;height:1.1em;
    margin-right:.42rem;opacity:.65}
  .katmanlar a[aria-current] .ikon{opacity:.9}
  .katmanlar a{position:relative;display:flex;align-items:center;min-height:48px;
    padding:.6rem 1.4rem .6rem 1.15rem;background:var(--zemin);
    border:1px solid var(--cizgi);border-bottom:1px solid var(--cizgi);
    border-radius:4px;white-space:normal;line-height:1.25;
    transition:background 120ms ease,color 120ms ease}
  /* mandal */
  .katmanlar a::before{content:"";position:absolute;left:7px;top:50%;
    width:3px;height:18px;margin-top:-9px;background:var(--vur);
    transition:transform 120ms ease}
  /* devre numarası */
  .katmanlar a::after{content:counter(devre,decimal-leading-zero);
    position:absolute;top:5px;right:6px;font-size:.62rem;font-weight:600;
    letter-spacing:.04em;color:var(--gri-acik);opacity:.6;
    font-variant-numeric:tabular-nums}
  .katmanlar a:active{background:var(--mur);color:#fff;border-color:var(--mur)}
  .katmanlar a:active::before{transform:translateY(4px)}
  .katmanlar a:active::after{color:#fff;opacity:.45}
  /* Bulunulan sayfa = devrede olan sigorta */
  .katmanlar a[aria-current]{background:var(--mur);color:#fff;
    border-color:var(--mur)}
  .katmanlar a[aria-current]::after{color:#fff;opacity:.5}
}
@media(max-width:640px){
  body.acil{padding-bottom:4.2rem}
  body.acil .sabit{display:block;position:fixed;left:0;right:0;bottom:0;z-index:10;
    background:var(--acil);box-shadow:0 -2px 12px rgba(0,0,0,.18)}
  body.acil .sabit a{display:flex;align-items:center;justify-content:center;gap:.5rem;
    color:#fff;text-decoration:none;font-weight:700;font-size:1.06rem;
    padding:.85rem 1rem}
  h2{margin-top:1.9rem}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}