/* PULSE WORKOUT LAB — ortak tasarim dili
   Kaynak: docs/marka-yenileme/PULSE-TASARIM-DILI.md (v1, 06.10.2026)
   ve prototip/pulse-ana-sayfa-prototipi.html satir ici <style> blogu.

   SERT KURALLAR (tests/marka-tokenlar.spec.js bunlari OLCUYOR):
     - Kose 0 her yerde. Golge yok, parlama yok.
     - Cyan YALNIZ DOLGU; yazi/cizgi rengi olarak kullanilmaz
       (beyaz ustunde kontrast ~1,4:1 - okunmuyor).
     - Tek tema: acik. prefers-color-scheme blogu YOK.
   Bir kurali delmek istersen once o testi degistirmen gerekir; bu
   bilerek boyle - tasarim kurali yaziyla kalirsa sessizce delinir.

   Surum: her degisiklikte sayfalardaki ?v= ARTIRILIR. HTML no-cache,
   CSS degil; onbellek ayrismasi bu projede daha once yasandi. */

/* Düzen: 1Rebel akışı — kayan şerit, ortalanmış logolu menü, tam genişlik karusel, bantlar halinde dizilen bölümler. Tek görünüm (açık zemin) bilinçli seçim: sitenin kendisi açık. Cyan yalnız dolgu, üstünde siyah yazı. */
:root{
  color-scheme:light;
  --paper:#F7F8F8; --white:#FFFFFF; --ink:#0B0C0D; --ink-2:#3B3F43; --mute:#767B80; --line:#D8DBDD; --band:#EEF0F1;
  --cyan:#00E5FF; --cyan-tint:#E4FAFD; --night:#0D1013; --night-2:#1A1F24;
  --display:'Big Shoulders Display','Arial Narrow',Impact,sans-serif;
  --body:'Hanken Grotesk','Helvetica Neue',Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  --wrap:1200px; --gut:clamp(16px,4vw,40px);
  --t-fast:.2s; --t-btn:.3s; --t-card:.7s; --t-slide:1s; --ease:cubic-bezier(.4,0,.2,1);
}
*{box-sizing:border-box}
/* [hidden] HER ZAMAN GIZLER. 06.10.2026'da olculdu: `.arac-alanlar .alan
   {display:flex}` gibi sinif kurallari tarayicinin [hidden] varsayilanini
   eziyordu ve `hidden` konan alan EKRANDA KALIYORDU (hesaplayicida kalca
   alani erkekte de gorunuyordu). Testte yakalandi. */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
/* KOYU BOLUMLERDE ODAK (inceleme bulgusu O-5). Murekkep halka murekkep
   zeminde ~1,0:1 - klavyeyle gezen kisi nerede oldugunu GOREMIYOR.
   Kahraman, kartlar ve video bandi koyu; oralarda halka beyaz. */
.kahraman :focus-visible,.kart :focus-visible,.video :focus-visible,
.kart-izgara :focus-visible{outline-color:var(--white)}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.lab{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase}
h1,h2,h3{font-family:var(--display);font-weight:800;text-transform:uppercase;margin:0;line-height:.92;letter-spacing:.005em;text-wrap:balance}
h1{font-size:clamp(52px,7.4vw,96px)}
h2{font-size:clamp(42px,5.2vw,68px)}
h3{font-size:30px}
p{margin:0}

/* Düğmeler — keskin köşe, mono yazı */
/* white-space:nowrap — 390px telefonda menudeki "Uye ol" IKI SATIRA
   kiriliyordu (06.10.2026'da olculdu: dugme 57px, satir yuksekligi 18.6px).
   Tasarim dili §7'ye "Dugme - ortak" kurali olarak eklendi. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;white-space:nowrap;font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;padding:13px 20px;border:1px solid var(--ink);background:transparent;cursor:pointer;transition:background var(--t-btn) var(--ease),color var(--t-btn) var(--ease),border-color var(--t-btn) var(--ease)}
.btn:hover{background:var(--ink);color:var(--white)}
.btn-cyan{background:var(--cyan);border-color:var(--cyan);color:var(--ink)}
.btn-cyan:hover{background:var(--ink);border-color:var(--ink);color:var(--cyan)}
.btn-white{background:var(--white);border-color:var(--white);color:var(--ink)}
.btn-white:hover{background:var(--cyan);border-color:var(--cyan);color:var(--ink)}
.chip{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;background:var(--cyan);color:var(--ink);padding:5px 9px}

/* Kayan şerit */
.serit{background:var(--cyan);color:var(--ink);overflow:hidden;white-space:nowrap;height:30px;display:flex;align-items:center}
.serit-ic{display:inline-flex;gap:56px;padding-left:56px;animation:kay 60s linear infinite}
.serit span{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase}
@keyframes kay{to{transform:translateX(-50%)}}

/* Menü */
.menu{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:var(--white);border-bottom:1px solid var(--line)}
.menu .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:64px;gap:16px}
.menu ul{display:flex;gap:24px;list-style:none;margin:0;padding:0}
.menu li a{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;position:relative;padding-block:6px}
.menu li a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--ink);transition:right var(--t-btn) var(--ease)}
.menu li a:hover::after{right:0}
.menu .sag{justify-content:flex-end;align-items:center}
.menu .sag li a.lnk{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase}
@media (max-width:1180px){.menu ul{gap:16px}.menu li a{letter-spacing:.1em}}
.logo{display:block;color:var(--ink)}
.logo svg{display:block;height:26px;width:auto}
.hesap{width:20px;height:20px;display:block}
.burger{display:none;background:none;border:0;padding:6px;cursor:pointer}
.burger i{display:block;width:22px;height:2px;background:var(--ink);margin:5px 0}

/* Kahraman karusel */
.kahraman{position:relative;background:var(--night);color:var(--white);min-height:clamp(520px,68vw,700px);overflow:hidden}
.slayt{position:absolute;inset:0;opacity:0;transition:opacity var(--t-slide) var(--ease);display:flex;align-items:center}
.slayt.aktif{opacity:1;z-index:1}
.foto{position:absolute;inset:0;overflow:hidden}
.foto::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,10,12,.82) 0%,rgba(8,10,12,.45) 45%,rgba(8,10,12,0) 75%)}
/* KAHRAMAN GORSELLERI (Paket 8/a). Kirpim noktasi varlik belgesinden
   geliyor (docs/marka-yenileme/gorseller/kahraman/OKUBENI.md): konu sagda,
   sol yari baslik icin karanlik. ORTALAMA KIRPIM FIGURU KESIYOR — kahraman
   kutusunun orani ekrana gore 1,8:1 ile 2,7:1 arasinda degisiyor, o yuzden
   gorsel 2:1 birakildi ve kirpim CSS'te yapiliyor. */
.foto{background-repeat:no-repeat;background-size:cover;background-position:70% 40%}
/* SLAYT GÖRSELLERİ BURADA DEĞİL. Paket 8/b'den beri slaytlar panelden
   yönetiliyor; hangi slaytın olacağı önceden bilinmediği için `background-image`
   kuralları `api/vitrin_render.php` tarafından sayfanın <head>'ine üretiliyor.
   BURAYA GERİ YAZMAYIN: kabuk `basEk`i pulse.css'ten ÖNCE basıyor, yani
   buradaki bir kural üretileni EZER ve panel etkisiz kalır. */
.foto .ton{position:absolute;inset:0}
.cekim{position:absolute;right:var(--gut);bottom:64px;z-index:2;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.62);max-width:280px;text-align:right;border-top:1px solid rgba(255,255,255,.25);padding-top:8px}
.slayt .wrap{position:relative;z-index:2;width:100%}
.slayt-ic{max-width:560px;display:grid;gap:20px;justify-items:start;transform:translateY(14px);transition:transform var(--t-slide) var(--ease)}
.slayt.aktif .slayt-ic{transform:none}
.slayt p.ozet{font-size:17px;color:rgba(255,255,255,.86);max-width:46ch}
.ilerleme{position:absolute;left:0;right:0;bottom:28px;z-index:3;display:flex;justify-content:center;gap:10px}
.ilerleme button{width:60px;height:2px;border:0;padding:0;background:rgba(255,255,255,.3);cursor:pointer;position:relative;overflow:hidden}
.ilerleme button::after{content:"";position:absolute;inset:0;background:var(--white);transform:scaleX(0);transform-origin:left}
.ilerleme button.aktif::after{animation:dol 7s linear forwards}
.ilerleme button.gecti::after{transform:scaleX(1)}
@keyframes dol{to{transform:scaleX(1)}}

/* Manifesto */
.manifesto{padding-block:96px 48px;text-align:center}
.manifesto .wrap{display:grid;gap:22px;justify-items:center}
.manifesto p.metin{max-width:62ch;color:var(--ink-2);font-size:17px}

/* Konsept kartları */
.kartlar{padding-block:24px 96px}
.kart-izgara{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.kart{position:relative;aspect-ratio:4/5;max-width:100%;overflow:hidden;color:var(--white);display:block;background:var(--night)}
.kart .ton{position:absolute;inset:0;transition:transform var(--t-card) var(--ease)}
.kart:hover .ton,.kart:hover img.hz-foto{transform:scale(1.05)}
.kart::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,10,12,.85) 0%,rgba(8,10,12,0) 55%)}
.kart-ic{position:absolute;left:22px;right:22px;bottom:22px;z-index:2;display:grid;gap:8px}
.kart-ic .alt{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.kart-ic .daha{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;margin-top:8px;display:flex;align-items:center;gap:8px}
.kart-ic .daha::after{content:"";width:18px;height:1px;background:currentColor;transition:width var(--t-btn) var(--ease)}
.kart:hover .daha::after{width:36px}
.kart .cekim{bottom:auto;top:16px;right:16px;max-width:200px;font-size:10px}

/* Randevu bandı (eski bülten satırının dili) */
.randevu{background:var(--band);padding-block:52px 32px}
.randevu form{display:grid;gap:16px}
.rf-bas{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap}
.rf-bas p{color:var(--ink-2);font-size:15px}
.rf-alanlar{display:grid;grid-template-columns:repeat(6,minmax(0,1fr)) auto;gap:10px}
.rf-alanlar input,.rf-alanlar select,
.arac-alanlar input,.arac-alanlar select,
.kf-alanlar input,.kf-alanlar select,.atr-suzgec select,.sayfa-govde>.alan textarea,.kf-kod input{border:1px solid var(--ink);background-color:var(--white);padding:12px;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;border-radius:0;min-width:0;width:100%;appearance:none;-webkit-appearance:none;color:var(--ink)}
.rf-alanlar select,.arac-alanlar select,.kf-alanlar select,.atr-suzgec select{background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 15px) 52%,calc(100% - 10px) 52%;background-size:5px 5px;background-repeat:no-repeat;padding-right:28px}
.rf-alanlar input:focus,.rf-alanlar select:focus,
.arac-alanlar input:focus,.arac-alanlar select:focus,
.kf-alanlar input:focus,.kf-alanlar select:focus,.atr-suzgec select:focus,.sayfa-govde>.alan textarea:focus,.kf-kod input:focus{outline:2px solid var(--ink);outline-offset:0;border-color:var(--ink)}
.rf-kvkk{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--ink-2);cursor:pointer;max-width:80ch}
.rf-kvkk input{appearance:none;-webkit-appearance:none;flex:none;width:18px;height:18px;margin:1px 0 0;border:1px solid var(--ink);background:var(--white);border-radius:0;cursor:pointer;display:grid;place-items:center}
.rf-kvkk input:checked{background:var(--cyan)}
.rf-kvkk input:checked::after{content:"";width:5px;height:9px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg) translate(-1px,-1px)}
.rf-hata{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:#B3261E}
.randevu .tesekkur{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
@media (max-width:1100px){.rf-alanlar{grid-template-columns:repeat(3,minmax(0,1fr))}.rf-alanlar .btn{grid-column:1/-1}}
@media (max-width:600px){.rf-alanlar{grid-template-columns:minmax(0,1fr)}}
/* Harita + şubeler */
.subeler{padding-block:88px;background:var(--white)}
.subeler .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,6vw,88px);align-items:center}
/* isolation: HARITANIN IC KATMANLARI KUTUNUN DISINA TASMASIN.
   Leaflet kendi karo/isaret/kontrol katmanlarina 200..1000 arasi
   z-index veriyor. Bu kutu yigilanma baglami OLUSTURMAZSA o degerler
   SAYFA KOKUNDE gecerli oluyor ve kendinden kucuk olan her seyi
   eziyor: .cerez-bant (60) ve sticky .menu (30).
   10.10.2026'da canli sitede ekran goruntusuyle olculdu (1536x796):
   harita hem cerez bandinin hem menunun UZERINE biniyordu.
   TUZAK: `elementFromPoint` bu kusuru GORMUYOR — hit-test bandi
   dondururken ekranda harita cizili. Olcum ekran goruntusuyle
   yapilmali, hit-test ile DEGIL. */
.harita{background:#EDEFF0;aspect-ratio:4/3;max-width:100%;position:relative;overflow:hidden;isolation:isolate}
.harita svg{position:absolute;inset:0;width:100%;height:100%}
.sube-metin{display:grid;gap:20px;justify-items:start}
.sube-metin p{color:var(--ink-2);max-width:44ch}
.sube-liste{display:grid;gap:0;width:100%;border-top:1px solid var(--line)}
.sube-liste div{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}

/* Deneyim */
.deneyim{padding-block:96px}
.deneyim .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,6vw,88px);align-items:start}
.akordeon{border-top:1px solid var(--ink);margin-top:28px}
.ak{border-bottom:1px solid var(--ink)}
.ak button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;background:none;border:0;padding:16px 4px;cursor:pointer;text-align:left}
.ak button .lab{font-size:12px}
.ak .ok{width:12px;height:12px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:rotate(45deg) translate(-3px,-3px);transition:transform var(--t-btn) var(--ease);flex:none}
.ak.acik .ok{transform:rotate(-135deg) translate(-3px,-3px)}
.ak-ic{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-fast) var(--ease)}
.ak.acik .ak-ic{grid-template-rows:1fr}
.ak-ic > div{overflow:hidden}
.ak-ic p{padding:0 4px 18px;color:var(--ink-2);max-width:48ch}
.den-gorsel{position:relative;aspect-ratio:4/5;max-width:100%;background:var(--night);overflow:hidden}
.den-gorsel .ton{position:absolute;inset:0;opacity:0;transition:opacity .6s var(--ease)}
.den-gorsel .ton.aktif{opacity:1}
/* Akordeon maddesiyle eslesen gorsel. Sol alt kose varlikta karanlik
   birakildi, sayac oraya oturuyor. */
.den-gorsel .kare{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .6s var(--ease)}
.den-gorsel .kare.aktif{opacity:1}
.sayac{position:absolute;left:18px;bottom:16px;z-index:2;color:var(--white);font-family:var(--mono);font-size:12px;letter-spacing:.14em}
.den-gorsel .cekim{bottom:16px}

/* Video bandı */
/* 08.10.2026: bant ACIK. Burak: "arka fon siyah yapmayalim bu sefer, acik
   renk gidelim". --band sayfanin kagidindan bir ton koyu, boylece bant
   serit olarak okunuyor ve video yuklenirken gorunur bir ek yeri kalmiyor:
   videonun kendi zemini de AYNI --band degeri (reklam/src/bant/tokenlar.ts,
   reklam/src/site-uyumu.test.ts ikisini karsilastiriyor). */
.video{position:relative;height:clamp(320px,48vw,620px);background:var(--band);overflow:hidden;color:var(--ink)}
.video .ton{position:absolute;inset:0;animation:nefes 8s ease-in-out infinite alternate}
/* ORTALANIR (50% 50%). Eskiden 50% 20% idi, cunku kaynak 16:9 bir stok
   fotografti ve ortalaninca antrenorun basi kesiliyordu. Yeni bant kaynagi
   kendi orani icin tasarlandi (genis 1920x760, dar 1280x800) ve icerigi
   ORTADA; 20% onu asagi itip kirpiyor. */
.video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
@keyframes nefes{to{transform:scale(1.06)}}
.video .orta{position:absolute;inset:0;display:grid;place-items:center;z-index:2;text-align:center;gap:14px;align-content:center}
.oynat{width:64px;height:64px;border:1px solid rgba(255,255,255,.7);display:grid;place-items:center}
.oynat::before{content:"";border-left:14px solid var(--white);border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px}

/* Altbilgi */
footer{background:var(--white);padding-block:64px 32px;border-top:1px solid var(--line)}
.alt-izgara{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.alt-izgara h4{margin:0 0 14px;font-family:var(--mono);font-weight:500;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;padding-bottom:14px;border-bottom:1px solid var(--line)}
.alt-izgara a{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;padding:8px 0;color:var(--ink-2)}
.alt-izgara a:hover{color:var(--ink)}
.alt-son{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:48px;padding-top:24px;border-top:1px solid var(--line)}
.alt-son .logo svg{height:20px}
.alt-son span{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--mute)}
/* Hukuki metinler tek grup: .alt-son space-between oldugu icin uc bagimsiz
   bag kutuyu dagitiyordu. Grup, logo ve telif arasinda tek oge gibi durur. */
.alt-son nav{display:flex;gap:18px;flex-wrap:wrap}

/* Fotoğraf tonları (çekim gelene kadar yer tutucu) */
.t1{background:radial-gradient(70% 90% at 72% 40%,#2B3A44 0%,#11171C 55%,#090B0D 100%)}
.t2{background:radial-gradient(60% 80% at 65% 30%,#1D4A55 0%,#0E1B21 55%,#07090B 100%)}
.t3{background:radial-gradient(70% 80% at 70% 60%,#3A3F45 0%,#16191C 60%,#0A0B0C 100%)}
.t4{background:linear-gradient(160deg,#24303A 0%,#0C0F12 70%)}
.t5{background:linear-gradient(200deg,#16444F 0%,#0A1114 70%)}
.t6{background:linear-gradient(140deg,#3A3D41 0%,#0D0E10 70%)}
.ton::before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px)}

/* Rezervasyon akışı */
.rez{padding-block:96px;background:var(--paper);border-top:1px solid var(--line)}
.rez-bas{text-align:center;display:grid;gap:16px;justify-items:center;margin-bottom:44px}
.suzgec{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:12px;align-items:end}
.suzgec .lab{grid-column:1/-1;margin-bottom:4px}
.secim{border:1px solid var(--ink);background:var(--white);padding:13px 14px;display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.secim::after{content:"";width:7px;height:7px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:rotate(45deg) translateY(-2px)}
/* Gun sekmeleri: referansta (1rebel /reserve) SABIT genislikte ve soldan
   diziliyor. `1fr` ust sinirla birakilsaydi iki gunluk bir takvimde iki
   sekme ekrani ortadan bolerdi - olculdu. 160px ust sinir cok gunde de
   az gunde de ayni gorunumu verir; tasarsa yatay kayiyor. */
.gunler{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(96px,160px);justify-content:start;overflow-x:auto;margin-top:36px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--white);scrollbar-width:thin}
.gun{background:none;border:0;border-right:1px solid var(--line);padding:16px 8px 14px;cursor:pointer;display:grid;gap:4px;justify-items:center;position:relative}
.gun b{font-family:var(--body);font-weight:500;font-size:22px;letter-spacing:.08em;color:var(--mute)}
.gun span{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--mute)}
.gun.aktif b,.gun.aktif span{color:var(--ink)}
.gun.aktif::before{content:"";position:absolute;left:0;right:0;top:-1px;height:3px;background:var(--cyan)}
/* SUZGEC ACILIRI. `.secim` prototipte bir DIV'di ve oku `::after` ile
   ciziliyordu; gercek bir <select> degistirilmis oge oldugu icin ::after
   almaz. Cozum bileseni degistirmek degil, select'i `.secim`in ICINE koyup
   kendi gorunumunu kapatmak - ok ve cerceve oldugu gibi kaliyor. */
.secim{padding:0}
.secim select{appearance:none;-webkit-appearance:none;background:none;border:0;
  font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;
  width:100%;padding:13px 14px;cursor:pointer}
.secim select:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
/* Takvim bos durumu: bos tablo degil, ne yapacagini soyleyen bir cumle. */
.dersler .bos{padding:28px 0;color:var(--ink-2);line-height:1.6}
.dersler .bos .btn{margin-top:14px}
.ders .dolu{display:none}
/* ---- ÇEREZ ONAY BANDI (Paket 7) ---------------------------------------
   REDDET ve KABUL ESIT AGIRLIKTA: ayni dolgu, ayni yazi boyu. Reddet
   dugmesini silik yapmak onayi tasarimla zorlamaktir. */
.cerez-bant{position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--ink);color:var(--white);border-top:3px solid var(--cyan);
  padding:18px 20px;display:grid;gap:14px;align-items:center;
  grid-template-columns:minmax(0,1fr) auto}
.cerez-bant[hidden]{display:none}
.cerez-bant p{font-size:14px;line-height:1.55;max-width:78ch;color:rgba(255,255,255,.88)}
/* BAGLANTI CYAN DEGIL BEYAZ. Tasarim yasasi: cyan YALNIZ dolgu. Bandin
   zemini koyu oldugu icin cyan yazi okunur olurdu, ama kurali blok
   basina olcen test (marka-tokenlar.spec.js) ust ogenin zeminini
   goremiyor ve hakli olarak kirmizi verdi. Kurali gevsetmek yerine
   baglantiyi beyaz + alti cizili yaptim: koyu zeminde zaten en yuksek
   kontrast, ve cyan bantta dolgu olarak (ust cizgi + Kabul dugmesi)
   zaten var. */
.cerez-bant a{color:var(--white);text-decoration:underline}
.cerez-dugmeler{display:flex;gap:10px;flex-wrap:wrap}
/* `.btn` koyu zeminde beyaz cerceve alir; reddet dugmesi DOLGULU kalir ki
   kabul ile ayni agirlikta dursun (olcum: tests/cerez-onay.spec.js). */
.cerez-bant .reject{background:var(--white);color:var(--ink);border-color:var(--white)}
.cerez-bant .reject:hover{background:rgba(255,255,255,.86)}
.cerez-bant :focus-visible{outline:2px solid var(--white);outline-offset:2px}
@media (max-width:720px){
  /* Telefonda bant ekranin ucte birinden fazlasini kaplamamali: onay
     istemek sayfayi gizlemek degil. Olcen test bunu pinliyor. */
  .cerez-bant{grid-template-columns:minmax(0,1fr);padding:14px 16px;gap:10px}
  .cerez-bant p{font-size:13px;line-height:1.45}
  .cerez-dugmeler .btn{flex:1 1 0;justify-content:center}
}
/* ---- KAMPANYALAR (Paket 7) --------------------------------------------
   Kart bileseni ORTAK: `.kart` + `.kart-izgara`. Kampanyaya ozel olan tek
   sey tarih satiri (spec §11.2 "detayda kahraman + tarih mono"). */
.kmp-tarih{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mute)}
.kart .kmp-tarih{color:rgba(255,255,255,.75)}
.kmp-bos{padding:28px 0}
.kmp-ust{display:grid;gap:8px;margin-bottom:22px}
.kmp-ust .kmp-tarih{color:var(--ink-2)}
.kmp-gorsel{display:block;width:100%;height:auto;margin:8px 0 26px;border:1px solid var(--line)}
.kmp-ayrinti p + p{margin-top:14px}
.dilim{display:flex;gap:8px;margin:20px 0;flex-wrap:wrap}
.dilim button{background:none;border:1px solid var(--line);padding:8px 12px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.dilim button.aktif{border-color:var(--ink);background:var(--ink);color:var(--white)}
.dersler{border-top:1px solid var(--ink)}
.ders{display:grid;grid-template-columns:90px minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) auto;gap:16px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line)}
.ders .saat{font-family:var(--display);font-weight:800;font-size:30px;line-height:1}
.ders .saat small{display:block;font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.1em;color:var(--mute);margin-top:4px}
.ders .ad{font-family:var(--display);font-weight:800;font-size:24px;text-transform:uppercase;line-height:1.1}
/* PANELDEN GELEN METIN BOSLUKSUZ OLABILIR. 375px'te 90 karakterlik tek
   kelimelik bir ders adi satiri tasiriyordu (olculdu). Kutuyu
   `overflow:hidden` ile kesmek de cozum degil: kullanici adi okuyamaz.
   `anywhere` kelimeyi bolerek sarar; tasma da kesilme de olmaz. */
.ders .ad,.ders .bilgi,#dersTanim h3,#dersTanim .alt{overflow-wrap:anywhere}
.ders .bilgi{font-size:14px;color:var(--ink-2)}
.ders .yer{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase}
.ders .yer.az{color:var(--ink);font-weight:500}
/* KOMPAKT TAKVIM — ana sayfa (08.10.2026). Tam takvim /grup-dersi.html'de;
   ana sayfa yalnizca "ders var mi" sorusunu cevaplayip oraya goturuyor.
   Gun seridi olmadigi icin GUN satira yaziliyor ve ızgaraya bir sutun
   ekleniyor; antrenor sutunu dusuyor, cunku dort satirlik bir ozette
   secimi belirleyen bilgi degil. */
.dersler.kompakt .ders{grid-template-columns:96px 78px minmax(0,1.6fr) minmax(0,1fr) auto}
/* ANTRENOR SUTUNU DUSUYOR: dort satirlik bir ozette secimi belirleyen
   bilgi degil, ve kalmasi ızgaraya altinci ogeyi sokup AYIRT'i alt
   satira dusuruyordu. `>` SART: sube adi da `.bilgi` ama o `orta`nin
   ICINDE, dogrudan cocuk degil. */
.dersler.kompakt .ders > .bilgi{display:none}
.dersler.kompakt .ders .gun-etiket{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.dersler.kompakt .ders .saat{font-size:26px}
.dersler.kompakt .ders .ad{font-size:20px}
@media(max-width:760px){
  /* Telefonda bes sutun sigmaz: gun+saat ustte, ad altta, dugme sagda. */
  .dersler.kompakt .ders{grid-template-columns:auto 1fr auto;gap:10px 14px}
  .dersler.kompakt .ders .gun-etiket{grid-column:1}
  .dersler.kompakt .ders .saat{grid-column:2}
  .dersler.kompakt .ders>div:nth-child(3){grid-column:1/4}
}
.ders .yer.az::before{content:"";display:inline-block;width:8px;height:8px;background:var(--cyan);margin-right:8px;vertical-align:middle}

/* 900 KIRILIMI — PROTOTIPIN ASLI (spec §6).
   DUZELTME (06.10.2026, tum dal incelemesi): bu blok ile asagidaki azaltilmis
   hareket blogu prototipte ZATEN VARDI. Blok-silme mantigim "Tasarim sistemi"
   yorumundan DOSYA SONUNA kadar sildigi icin ikisini de goturmus; ben de
   "prototipte hic yoktu" diye yeniden yazmistim. YANLISTI.

   Aslinin ustunlugu olculdu: `.cekim{display:none}` (benimkinde YOKTU ve
   375px'te cekim brifi CTA'nin ustune biniyordu) ve `.ders` uc sutunlu kaliyor
   (benimki tek sutuna dusuruyordu). `.etkinlik`/`.etk-baslik` satirlari
   CIKARILDI: o bolum uretime girmiyor.

   EKLENEN tek sey hamburger paneli - prototipte dugme vardi ama acilan bir
   panel YOKTU (inceleme bulgusu K-1). */
@media (max-width:900px){
  /* MOBIL KAHRAMAN. Masaustu karesi 2:1; telefonda konu kadrajdan cikiyor.
     Varlik 3:4 ayri uretildi: konu ust yarida, alt yari karanlik — baslik
     ALTTAN hizalaniyor ve degrade alttan yukari (varlik belgesi). */
  .foto{background-position:50% 0}
  /* Mobil slayt görselleri de üretiliyor (yukarıdaki nota bak). */
  .foto::after{background:linear-gradient(0deg,rgba(8,10,12,.88) 0%,rgba(8,10,12,.55) 42%,rgba(8,10,12,0) 78%)}
  .kahraman{min-height:600px}
  .slayt{align-items:flex-end}
  .slayt .wrap{padding-bottom:64px}
  .menu ul.sol{display:none}
  .burger{display:block}
  .menu .sag a.lnk{display:none}
  /* SUTUN SAYISI SABIT YAZILAMAZ. `repeat(6,...)` iken serit her zaman 6
     sutun genisligindeydi: iki kartli bir seritte kullanici 1197px BOS
     ALANA kaydirabiliyordu (07.10.2026, tarayicida olculdu). `auto-flow`
     ile sutun sayisi KART SAYISINA uyar.
     IZ GENISLIGI SABIT 240px — `minmax(240px,1fr)` DENENDI VE GERI ALINDI:
     kaydirma kabinda `1fr` serbest alani max-content'ten hesaplatiyor, grid
     kendi kabina sigmiyor ve SAYFA 161px yatay tasiyordu (antrenorler.html
     ve sube.php 375px testleri yakaladi). Eski kural da 900px altinda her
     zaman 240px veriyordu (6*240 + boslukLar > 900), yani bu DEGISIKLIK
     DEGIL, ayni genisligin hayalet sutunsuz hali.
     Ortak bilesen: hizmetler, antrenor ve ders tanim seritleri. */
  .kart-izgara{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:240px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
  .kart{scroll-snap-align:start}
  .subeler .wrap,.deneyim .wrap{grid-template-columns:minmax(0,1fr)}
  .alt-izgara{grid-template-columns:minmax(0,1fr)}
  .suzgec{grid-template-columns:minmax(0,1fr)}
  .ders{grid-template-columns:70px minmax(0,1fr) auto}
  .ders .bilgi,.ders .yer{grid-column:2}
  .ders .btn{grid-row:1;grid-column:3}
  .blok{grid-template-columns:minmax(0,1fr);gap:16px}
  .yazi{grid-template-columns:minmax(0,1fr);gap:6px}
  .cekim{display:none}
  /* ACIK HAL: cubugun KENDISI buyur, ogeler satir satir YIGILIR.
     Ilk denemede panel mutlak konumlanmis ve `.sag` sarmisti; cubuk
     yukseklik degistirince hamburger YER DEGISTIRIYORDU - tarayicida
     olculdu, Playwright da kararsiz oge gorup tiklayamadi. Simdi hamburger
     1. satirda sabit kaliyor, baglantilar 2. ve 3. satira iniyor. */
  .menu.acik .wrap{height:auto;row-gap:12px;padding-bottom:16px;align-items:center}
  .menu.acik ul.sol{display:flex;flex-direction:column;gap:2px;grid-column:1/-1;grid-row:2}
  .menu.acik ul.sag{flex-direction:column;align-items:flex-start;gap:6px;grid-column:1/-1;grid-row:3;justify-content:flex-start}
  .menu.acik .sag a.lnk{display:inline}
}

/* AZALTILMIS HAREKET — PROTOTIPIN ASLI (spec §8).
   Benim yazdigim surum `.kart:hover .foto` ve `img` hedefliyordu; IKISI DE
   sayfada YOK, yani buyume efekti hic kapanmiyordu. Aslinin hedefleri
   gercekte animasyonlu olan ogeler. */
@media (prefers-reduced-motion:reduce){
  .video .ton{animation:none}
  .serit-ic,.video .ton{animation:none}
  .slayt,.slayt-ic,.kart .ton,.kart img.hz-foto{transition:none}
  html{scroll-behavior:auto}
}

/* ===== KIRINTI ve SAYFA BAŞLIĞI (spec §11.1) ================================
   AÇIK başlık, koyu foto bandı DEĞİL — Burak'ın kararı 06.10.2026.
   1Rebel'in üç sayfa tipinde de (privacy, trainers, concepts/ride) ölçüldü:
   ortalanmış, açık zeminde, mono üst etiket + H1 + mono alt satır.
   Koyu foto bandı YALNIZ ana sayfa karuselinde kalıyor.
   Ana sayfada bu blok HİÇ basılmaz (kendi karuseli var). */
.kirinti{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute);max-width:var(--wrap);margin:0 auto;padding:18px var(--gut) 0}
.kirinti a{color:var(--mute)}
.kirinti a:hover{color:var(--ink)}
.kirinti .ayrac{margin:0 8px;opacity:.6}

.sayfa-bas{background:var(--paper);padding:34px 0 46px;text-align:center}
.sayfa-bas .ust{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mute);margin:0 0 18px}
/* Ana sayfanın h1'i 52-96px; sayfa başlığı daha sakin olmalı ki içerik öne çıksın. */
.sayfa-bas h1{font-size:clamp(40px,5.6vw,68px)}
.sayfa-bas .alt{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute);margin:18px 0 0}

/* Üretilen sayfaların gövde metni: ana sayfa bölüm bölüm kuruluyor, alt
   sayfaların çoğu düz metin. Okunur ölçü ve nefes payı. */
.sayfa-govde{max-width:760px;margin:0 auto;padding:46px var(--gut) 72px}
.sayfa-govde h2{font-size:clamp(24px,2.6vw,32px);margin:38px 0 14px}
.sayfa-govde h3{font-size:clamp(18px,2vw,22px);margin:28px 0 10px}
.sayfa-govde p,.sayfa-govde li{color:var(--ink-2);line-height:1.65;margin:0 0 14px}
.sayfa-govde ul,.sayfa-govde ol{padding-left:22px;margin:0 0 18px}
.sayfa-govde a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
/* Cerez adlari ve tarayici ayar adresleri: tiklanabilir degil, kopyalanabilir
   olmali (chrome:// gibi adresler sayfadan bag ile acilamiyor). */
.sayfa-govde code{font-family:var(--mono);font-size:.88em;background:var(--band);
  padding:2px 6px;word-break:break-all}
@media (max-width:900px){
  .sayfa-bas{padding:26px 0 34px}
  .sayfa-govde{padding:34px var(--gut) 56px}
}

/* ===========================================================================
   FİYAT PAKET KARTLARI (spec §11.2: "beyaz, 1px çerçeve, Big Shoulders fiyat,
   mono maddeler, tek cyan Üye ol"). fiyatlar.php ÜRETİLMİYOR — kabuğu çalışma
   anında require ediyor — ve sayfa-icerik/ sunucuya çıkmıyor; bu yüzden bu
   bileşen sayfaya özel dosyaya değil BURAYA yazılıyor.
   =========================================================================== */
.blk{border-top:1px solid var(--line);padding:46px 0 0;margin-top:46px}
.blk:first-of-type{border-top:0;margin-top:0;padding-top:8px}
.blk h2{margin-bottom:14px}
.lede{color:var(--ink-2);max-width:68ch;line-height:1.65}

.fiy{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:26px}
.fk{position:relative;background:var(--white);border:1px solid var(--line);padding:24px 20px;display:flex;flex-direction:column}
/* DUGMELER HER KARTTA AYNI HIZADA. Kartlarin ICERIK yuksekligi esit degil
   (1 aylik uyelikte "ayda ..." satiri yok, grup tarafinda "Tek Ders"te
   "ders basi ..." yok); dugme son ogenin altinda dururken kartlar arasi
   asagi yukari kayiyordu. margin-top:auto onu kartin DIBINE sabitler. */
.fk .fk-eylem{margin-top:auto;padding-top:18px;display:flex;flex-wrap:wrap;gap:8px}
.fk.one{border-color:var(--ink)}
.fk .flag{position:absolute;top:-1px;right:-1px;background:var(--cyan);color:var(--ink);
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:5px 9px}
.fk .ad{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:22px;line-height:1;margin-bottom:6px}
.fk .seans,.fk .birim,.fk .gun{font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mute)}
.fk .fiyat{font-family:var(--display);font-weight:800;font-size:clamp(32px,4vw,44px);
  line-height:1;margin:14px 0 8px}
.fk .gun{margin-top:10px}
.fk .ozet{margin-top:12px;font-size:13.5px;color:var(--ink-2);line-height:1.5}

.tekli{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  border:1px solid var(--line);background:var(--white);padding:20px;margin-top:16px}
.tekli .sol b{display:block;font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:20px}
.tekli .sol span{color:var(--ink-2);font-size:14px}
.tekli .sag{font-family:var(--display);font-weight:800;font-size:30px}

.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}

/* SSS: native <details> — JS'siz de çalışsın diye .akordeon yerine bu.
   Görünüm .akordeon ile aynı dilde: üstte çizgi, mono etiket, ok işareti. */
.sss{border-top:1px solid var(--ink);margin-top:22px}
.sss details{border-bottom:1px solid var(--ink)}
.sss summary{list-style:none;cursor:pointer;padding:16px 4px;display:flex;
  justify-content:space-between;align-items:center;gap:16px;
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.sss summary::-webkit-details-marker{display:none}
.sss summary::after{content:"";flex:none;width:11px;height:11px;
  border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);
  transform:rotate(45deg) translate(-3px,-3px);transition:transform var(--t-fast) var(--ease)}
.sss details[open] summary::after{transform:rotate(225deg) translate(-3px,-3px)}
.sss details p{padding:0 4px 18px;margin:0;color:var(--ink-2);max-width:60ch}

/* ===========================================================================
   HİZMET SAYFALARI (spec §11.2) — hub + detay. Kart bileşeni .kart/.kart-izgara
   (ana sayfadakinin aynısı); burada yalnız hizmete özgü yerleşim var.
   araclar/hizmet_uret.php tablodan üretiyor, bu yüzden sayfaya özel dosya
   değil pulse.css.
   =========================================================================== */
.hz-grup{padding:14px 0 34px}
.hz-grup h2{margin-bottom:10px}
.hz-ozet{color:var(--ink-2);max-width:68ch;margin:0 0 22px;line-height:1.6}
.hz-izgara{grid-template-columns:repeat(3,minmax(0,1fr))}
.kart img.hz-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform var(--t-card) var(--ease)}
/* Fotoğrafın üstüne okunur bir perde: kart metni beyaz. */
.kart img.hz-foto + .kart-ic::before{content:"";position:absolute;inset:-22px;z-index:-1;
  background:linear-gradient(0deg,rgba(8,10,12,.88) 0%,rgba(8,10,12,.35) 60%,rgba(8,10,12,0) 100%)}

/* Kart ozeti UC SATIR: meta aciklamalar farkli uzunlukta, kirpilmazsa
   kartlar ayni izgarada farkli agirlikta duruyor. */
.hz-izgara .kart-ic .alt{display:-webkit-box;-webkit-line-clamp:3;
  -webkit-box-orient:vertical;overflow:hidden}

.hz-detay h2{margin-top:38px}
.hz-giris-metin{font-size:17px;color:var(--ink-2);line-height:1.65}
.hz-adimlar{list-style:none;padding:0;counter-reset:adim;border-top:1px solid var(--line)}
.hz-adimlar li{counter-increment:adim;display:grid;grid-template-columns:38px minmax(0,1fr);
  gap:14px;padding:16px 0;border-bottom:1px solid var(--line);margin:0}
.hz-adimlar li::before{content:counter(adim,decimal-leading-zero);
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--mute);padding-top:3px}
/* grid-column:2 — BASLIK VE ACIKLAMA AYNI GENIS SUTUNDA.
   `li` iki sutunlu grid (38px sayi + 1fr metin) ama UC grid ogesi var:
   `::before` (sayi), `b` (baslik), `span` (aciklama). Sutun belirtilmezse
   ucuncu oge ALT SATIRIN ILK sutununa, yani 38px'lik sayi sutununa duser.
   11.10.2026'da canlida olculdu: li sutunlari `38px 606px`, span genisligi
   `38px` — aciklama kelime kelime alt alta akiyordu. Burak bildirdi
   (not defteri madde 10). Testi: tests/hizmetler.spec.js "ADIM LISTESI". */
.hz-adimlar li b{grid-column:2;font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:18px;line-height:1.1;display:block}
.hz-adimlar li span{grid-column:2;display:block;margin-top:5px;color:var(--ink-2);line-height:1.55}
.hz-cagri{margin-top:36px}

@media (max-width:900px){
  /* SERITTEN CIKIS TAM OLMALI: tasiyici `.kart-izgara` kurali 900px altinda
     `grid-auto-flow:column` kuruyor. Yalniz `grid-template-columns`u geri
     almak yetmez — fazla kartlar 240px'lik ortuk SUTUNLARA dusup sayfayi
     yatay tasirir (07.10.2026 olculdu: antrenorler ve sube 375px testleri). */
  .hz-izgara{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row;overflow:visible}
}
@media (max-width:560px){
  .hz-izgara{grid-template-columns:minmax(0,1fr);grid-auto-flow:row}
}

/* ===========================================================================
   ANTRENÖR KARTI — antrenorler.html ve sube.php'nin İKİSİ de kullanıyor,
   bu yüzden sayfaya özel dosyada değil burada. Kart gövdesi .kart/.kart-izgara
   (ana sayfanın aynısı); burada yalnız kart İÇİ var.
   =========================================================================== */
/* Kart içi: ad + uzmanlık + (varsa) rozetler ve kısa tanıtım.
   Tanıtım iki satıra kırpılıyor — kart 4:5 oranında ve uzun metin
   fotoğrafın üstünü kaplıyordu. */
.atr-rozetler{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.75);margin-top:2px}
.atr-bio{font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.8);margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Baş harfler: fotoğraf yokken. Ana sayfadaki .ton yer tutucusunun üstünde. */
.atr-harf{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:800;font-size:64px;color:rgba(255,255,255,.22);
  letter-spacing:.04em}
.kart img.atr-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.atr-bos{border:1px solid var(--line);background:var(--white);padding:34px 24px;
  text-align:center;color:var(--ink-2);grid-column:1/-1}
.atr-bos p{margin:0 0 14px}
.atr-bos p:last-child{margin:0}

/* ===========================================================================
   ŞUBE BİLEŞENLERİ (spec §11.2, §12.5) — subeler.html ve sube.php'nin
   İKİSİ de kullanıyor, bu yüzden sayfaya özel dosyada değil burada.
   sube.php ÜRETİLMİYOR (kabuğu çalışma anında require ediyor) ve
   sayfa-icerik/ sunucuya çıkmıyor.
   =========================================================================== */
/* Şubeler — harita + şube satırları + galeri (spec §11.2, §12.5).
   Harita Leaflet; işaretçi divIcon ile çizilen cyan kare + mürekkep çerçeve,
   yani Leaflet'in kendi PNG işaretçisi hiç istenmiyor. */

.sb-giris p{font-size:17px}

.sb-harita-bant{padding:6px 0 0}
.sb-harita{height:420px;border:1px solid var(--ink);background:var(--band)}
.sb-atif{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  color:var(--mute);margin:8px 0 0}
.sb-atif a{color:var(--mute);text-decoration:underline;text-underline-offset:2px}

/* Leaflet'in kendi kutuları: köşe 0, gölge yok — tasarım yasası.
   Kütüphanenin varsayılanı yuvarlak köşe ve gölgeli. */
.sb-harita .leaflet-container{background:var(--band);font-family:var(--body)}
.sb-harita .leaflet-control-zoom a,
.sb-harita .leaflet-control-zoom a:first-child,
.sb-harita .leaflet-control-zoom a:last-child{border-radius:0;color:var(--ink);
  border:1px solid var(--line);background:var(--white);box-shadow:none}
.sb-harita .leaflet-control-zoom a:hover{background:var(--ink);color:var(--white)}
.sb-harita .leaflet-control-attribution{display:none}  /* atıf haritanın ALTINDA, mono satırda */
.sb-harita .leaflet-popup-content-wrapper,
.sb-harita .leaflet-popup-tip{border-radius:0;box-shadow:none;border:1px solid var(--ink)}
.sb-harita .leaflet-popup-content{margin:12px 14px;font-family:var(--body)}
.sb-harita .leaflet-popup-content b{font-family:var(--display);font-weight:800;
  text-transform:uppercase;font-size:17px;display:block;margin-bottom:4px}

.sb-isaret{width:16px;height:16px;background:var(--cyan);border:1.5px solid var(--ink)}

.sb-liste-bant{padding:46px 0 10px}
.sb-liste{border-top:1px solid var(--ink);margin-top:20px}
.sb-sube{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;
  align-items:start;padding:24px 0;border-bottom:1px solid var(--line)}
.sb-sube h3{font-size:clamp(22px,2.6vw,30px);margin:0 0 6px}
.sb-ilce{font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute);margin:0 0 12px}
.sb-bilgi{list-style:none;padding:0;margin:0}
.sb-bilgi li{display:grid;grid-template-columns:86px minmax(0,1fr);gap:12px;
  margin:0 0 6px;font-family:var(--mono);font-size:12px;line-height:1.6;color:var(--ink-2)}
.sb-bilgi li b{font-weight:400;color:var(--mute);letter-spacing:.12em;text-transform:uppercase}
.sb-bilgi a{color:var(--ink)}
.sb-dugmeler{display:flex;flex-direction:column;gap:10px;align-items:stretch}
.sb-dugmeler .btn{white-space:nowrap}

.sb-kanal-bant{padding:40px 0 6px}
.sb-kanal-not{color:var(--ink-2);max-width:62ch;margin:8px 0 18px}
/* Dugmeler kendi genisliginde ve sarmalanabilir: telefonda uc dugme alt
   alta duser, masaustunde yan yana. Yeni bir dugme dili YAZILMADI —
   .btn ve .btn-cyan zaten var. */
.sb-kanallar{display:flex;flex-wrap:wrap;gap:12px}
.sb-galeri-bant{padding:30px 0 6px}
.sb-galeri-bant[hidden]{display:none}
.sb-galeri{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:18px}
.sb-galeri a{display:block;position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--night)}
.sb-galeri img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.sb-son{padding-top:38px}

@media (max-width:900px){
  .sb-harita{height:320px}
  .sb-sube{grid-template-columns:minmax(0,1fr)}
  .sb-dugmeler{flex-direction:row;flex-wrap:wrap}
  .sb-galeri{grid-template-columns:repeat(2,minmax(0,1fr))}
}

.sb-bos{border:1px solid var(--line);background:var(--white);padding:26px 22px;
  color:var(--ink-2);margin-top:18px}

/* Karolar gri tonlu ve acik: tasarim dili acik gri harita istiyor, OSM'in
   standart karolari renkli geliyor. Filtre yalnizca karo katmanina —
   isaretci ve kontroller etkilenmesin. */
.sb-harita .leaflet-tile-pane{filter:grayscale(1) contrast(.92) brightness(1.06)}

/* Şube DETAYINA özgü: bilgi tablosu + harita yan yana, çağrı düğmeleri. */
.sb-detay{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:26px;
  align-items:start;margin-top:20px}
.sb-detay .sb-bilgi li{grid-template-columns:96px minmax(0,1fr)}
.sb-eylem{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
@media (max-width:900px){ .sb-detay{grid-template-columns:minmax(0,1fr)} }