/* ===========================================================================
   Liste ve detay sayfaları — cemevi detayı, il/ilçe/ülke, hizmetler,
   hata ve çevrimdışı sayfaları. temel.css'ten SONRA yüklenir.

   YALNIZ bu dosyada çalışılır; renk/ölçü/boşluk DEĞERİ yazılmaz,
   temel.css'teki --token'lar kullanılır.

   Yeni eklenen tokenlar (--kart-zemin, --kart-kenar, --kart-golge …) hâlâ
   değişiyor olabileceği için `var(--yeni, var(--eski))` biçiminde yedekli
   yazıldı: token kaldırılırsa bileşen stilsiz kalmaz, bir önceki
   anlamsal role düşer.
   ======================================================================== */

/* ---------------------------------------------------------------------------
   1. CEMEVİ DETAYI — başlık bloğu
   Başlık ızgaranın DIŞINDA duruyor (bkz. cemevi.php): temel.css mobilde
   yan sütunu başa alıyor, başlık ızgaranın içinde kalsaydı telefonda
   önce harita, sonra cemevinin adı görünüyordu.
   ------------------------------------------------------------------------ */

.detay-kafa {
  margin-bottom: var(--bosluk-6);
}

.detay-kafa__rozetler {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bosluk-2);
  margin-bottom: var(--bosluk-3);
}

.detay-kafa h1 {
  margin-bottom: var(--bosluk-2);
}

.detay-kafa__alt {
  color: var(--metin-silik);
  font-size: var(--olcek-sm);
  margin-bottom: var(--bosluk-2);
}

.detay-kafa__konum {
  display: flex;
  align-items: flex-start;
  gap: var(--bosluk-2);
  color: var(--metin-yumusak);
  font-size: var(--olcek-md);
}

.detay-kafa__konum svg {
  flex: none;
  margin-top: 3px;
  color: var(--metin-silik);
}

.detay-kafa__konum a { color: var(--metin-yumusak); text-decoration: underline; }
.detay-kafa__konum a:hover { color: var(--vurgu); }
.detay-kafa__ayrac { color: var(--kenar-koyu); margin-inline: 2px; }

/* --- hızlı eylem şeridi ---
   Telefonda ilk ekranda görünen tek eylem satırı. Butonlar sarar; dar
   ekranda metin kırılır, yatay taşma olmaz. */

.hizli-eylem {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bosluk-2);
  margin-top: var(--bosluk-5);
}

.hizli-eylem .dugme { max-width: 100%; }

@media (max-width: 479px) {
  /* Tek sütun: 390 px'te iki buton yan yana sığmıyor ve metin kırpılıyordu. */
  .hizli-eylem .dugme { flex: 1 1 100%; }
}

/* --- kaynak ve tazelik satırı ---
   Verinin nereden geldiğini ve ne zaman güncellendiğini söyleyen TEK yer.
   Önceden aynı bilgi rozet + sarı uyarı kutusu + boş durum kartında üç kez
   tekrarlanıyordu; üçü birden sayfayı "bozuk" gösteriyordu. */

.kaynak-notu {
  display: flex;
  align-items: flex-start;
  gap: var(--bosluk-2);
  margin-top: var(--bosluk-4);
  padding: var(--bosluk-3) var(--bosluk-4);
  border: 1px solid var(--kart-kenar, var(--kenar));
  border-radius: var(--kose-md);
  background: var(--zemin-batik);
  color: var(--metin-yumusak);
  font-size: var(--olcek-sm);
  line-height: 1.6;
}

.kaynak-notu svg { flex: none; margin-top: 3px; color: var(--metin-silik); }
.kaynak-notu a { color: var(--vurgu); font-weight: 600; white-space: nowrap; }

/* Metin rengi --metin kalıyor: --yesil-800 gibi bir basamağa sabitlemek
   koyu temada koyu zemin üstünde koyu yazı (okunmaz) üretiyordu. Yalnız
   zemin, kenar ve ikon yeşile dönüyor; ikisi de temayla birlikte çevriliyor. */
.kaynak-notu--onayli {
  background: var(--iyi-acik);
  border-color: var(--iyi);
  color: var(--metin);
}

.kaynak-notu--onayli svg { color: var(--iyi); }

/* --- kapak görseli (galeri yokken) --- */

.detay-kapak {
  margin: 0;
  border-radius: var(--kose-lg);
  overflow: hidden;
  background: var(--zemin-batik);
  aspect-ratio: 16 / 10;
}

.detay-kapak img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------------------------------------------------------------------------
   2. OLGU ŞERİDİ — cem günleri, kuruluş, kapasite, bağlı kurum
   Yalnız DOLU alanlar için kutu üretilir; boş alan için kutu çizilmez.
   ------------------------------------------------------------------------ */

.olgu-serit {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--bosluk-3);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.olgu {
  display: flex;
  align-items: flex-start;
  gap: var(--bosluk-3);
  padding: var(--bosluk-4);
  background: var(--kart-zemin, var(--zemin-yukseltilmis));
  border: 1px solid var(--kart-kenar, var(--kenar));
  border-radius: var(--kose-lg);
  box-shadow: var(--kart-golge, var(--golge-xs));
}

.olgu__ikon {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: var(--kose-md);
  background: var(--vurgu-acik);
  color: var(--vurgu);
}

.olgu__govde { min-width: 0; }

.olgu__etiket {
  display: block;
  font-size: var(--olcek-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
  color: var(--metin-silik);
  margin-bottom: 2px;
}

.olgu__deger {
  display: block;
  font-size: var(--olcek-md);
  color: var(--metin);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------
   3. KATKI ÇAĞRISI — eksik alanı fırsata çeviren blok
   Kayıtların çoğunda ad ve konumdan başka veri yok. Boş kutu dizmek yerine
   "neyi bilmiyoruz" açıkça yazılıyor ve her eksik, formun O ALANINA giden
   bir bağlantıya dönüşüyor.
   ------------------------------------------------------------------------ */

/* Kart kenarı varsayılanda bırakıldı: --yesil-200 gibi bir basamak
   koyu temada açık yeşil bir çerçeveye dönüp kartı bağırtıyordu. */
.katki .kart__baslik {
  background: var(--vurgu-acik);
}

/* Kart başlığındaki sayaç ("3/6 alan dolu") dar ekranda iki satıra
   kırılıyordu; başlık daralsın, sayaç bütün kalsın. */
.katki .kart__baslik h2 { min-width: 0; }
.katki .kart__baslik > span { flex: none; white-space: nowrap; }

.katki__giris {
  margin-top: var(--bosluk-4);
  color: var(--metin-yumusak);
  font-size: var(--olcek-md);
}

/* Doluluk çubuğu — genişlik SINIFLA veriliyor.
   CSP 'unsafe-inline' yasak olduğu için style="width:%" sessizce düşerdi;
   onluk adımlar bu iş için yeterli çözünürlükte. */

.doluluk {
  height: 8px;
  border-radius: var(--kose-tam);
  background: var(--zemin-batik);
  overflow: hidden;
}

.doluluk__dolu {
  display: block;
  height: 100%;
  width: 0;
  border-radius: var(--kose-tam);
  background: var(--vurgu);
  transition: width var(--gecis-orta);
}

.doluluk--0   .doluluk__dolu { width: 0; }
.doluluk--10  .doluluk__dolu { width: 10%; }
.doluluk--20  .doluluk__dolu { width: 20%; }
.doluluk--30  .doluluk__dolu { width: 30%; }
.doluluk--40  .doluluk__dolu { width: 40%; }
.doluluk--50  .doluluk__dolu { width: 50%; }
.doluluk--60  .doluluk__dolu { width: 60%; }
.doluluk--70  .doluluk__dolu { width: 70%; }
.doluluk--80  .doluluk__dolu { width: 80%; }
.doluluk--90  .doluluk__dolu { width: 90%; }
.doluluk--100 .doluluk__dolu { width: 100%; }

.eksik-serit {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bosluk-2);
  margin-top: var(--bosluk-4);
}

.eksik-oge {
  display: inline-flex;
  align-items: center;
  gap: var(--bosluk-2);
  min-height: 40px;
  padding: var(--bosluk-2) var(--bosluk-4);
  border: 1px dashed var(--kenar-koyu);
  border-radius: var(--kose-md);
  background: var(--zemin-yukseltilmis);
  color: var(--metin-yumusak);
  font-size: var(--olcek-sm);
  font-weight: 600;
  transition: border-color var(--gecis-hizli), background var(--gecis-hizli),
              color var(--gecis-hizli);
}

.eksik-oge svg { flex: none; color: var(--metin-silik); }
.eksik-oge svg:last-child { color: var(--vurgu); }

.eksik-oge:hover,
.eksik-oge:focus-visible {
  border-style: solid;
  border-color: var(--vurgu);
  background: var(--vurgu-acik);
  color: var(--vurgu);
  text-decoration: none;
}

.eksik-oge:hover svg { color: var(--vurgu); }

/* ---------------------------------------------------------------------------
   4. YAN SÜTUN — koordinat ve dar boş durum
   ------------------------------------------------------------------------ */

.koordinat {
  font-size: var(--olcek-sm);
  color: var(--metin-yumusak);
}

.koordinat__deger {
  display: block;
  font-family: var(--yazi-mono);
  font-size: var(--olcek-sm);
  color: var(--metin);
  overflow-wrap: anywhere;
  margin-bottom: var(--bosluk-1);
}

.koordinat a { color: var(--vurgu); }

/* Kart içindeki boş durum tam sayfalık boşluk bırakmasın. */
.bos-durum--dar { padding: var(--bosluk-4) 0; }
.bos-durum--dar h2 { font-size: var(--olcek-lg); margin-bottom: var(--bosluk-2); }
/* `> svg` ŞART: alttaki düğmelerin kendi ikonları da .bos-durum içinde;
   genel `svg` seçicisi onların payını da bozuyor (temel.css'te aynı
   gerekçeyle yazılmış). */
.bos-durum--dar > svg { margin-bottom: var(--bosluk-3); }

.bos-durum__eylemler {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--bosluk-2);
  margin-top: var(--bosluk-6);
}

/* ---------------------------------------------------------------------------
   5. DEVAM BAĞLANTILARI — detay sayfası çıkmaz sokak olmasın
   ------------------------------------------------------------------------ */

.devam {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bosluk-2);
  padding-top: var(--bosluk-6);
  border-top: 1px solid var(--kenar);
}

.devam__oge {
  display: inline-flex;
  align-items: center;
  gap: var(--bosluk-2);
  min-height: 40px;
  padding: var(--bosluk-2) var(--bosluk-4);
  border: 1px solid var(--kenar);
  border-radius: var(--kose-tam);
  background: var(--kart-zemin, var(--zemin-yukseltilmis));
  color: var(--metin-yumusak);
  font-size: var(--olcek-sm);
  font-weight: 600;
}

.devam__oge svg { flex: none; color: var(--metin-silik); }

.devam__oge:hover {
  border-color: var(--vurgu);
  color: var(--vurgu);
  text-decoration: none;
}

.devam__oge:hover svg { color: var(--vurgu); }

/* ---------------------------------------------------------------------------
   6. YER KARTI — sitenin en çok tekrar eden bileşeni
   Fotoğrafsız kayıt için görsel alanı HİÇ çizilmiyor: kayıtların neredeyse
   tamamı fotoğrafsız ve her karta ~190 px'lik aynı gri yer tutucuyu koymak
   24 kartlık listeyi "aynı boş kutudan yirmi dört tane" yapıyordu.
   ------------------------------------------------------------------------ */

.yer-kart {
  position: relative;
  isolation: isolate;
}

/* Kartın tamamı tıklanabilir; kart içindeki diğer bağlantılar üstte kalır. */
.yer-kart__ad a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.yer-kart__alt a,
.yer-kart__konum a { position: relative; z-index: 2; }

.yer-kart__kafa {
  display: flex;
  align-items: flex-start;
  gap: var(--bosluk-3);
}

.yer-kart__isaret {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--kose-md);
  background: var(--vurgu-acik);
  color: var(--vurgu);
}

.yer-kart--sade .yer-kart__govde { gap: var(--bosluk-2); }

/* Açık harita verisinden gelen bazı adlar çok uzun ve BÜYÜK HARF
   ("KAĞITHANE HACI BEKTAŞ VELİ EĞİTİM VE KÜLTÜR DERNEĞİ…") — kartta dört
   satır kaplayıp ızgarayı bozuyordu. Üç satırda kesiliyor; tam adı kayıt
   sayfasında duruyor.
   NOT: bağlantının ::after kaplaması buradan ETKİLENMEZ; konumlandırma
   bloğu .yer-kart olduğu için mutlak konumlu katman bu overflow'dan
   kaçar (kart yine baştan sona tıklanabilir). */
.yer-kart__ad {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Sade kartta konum satırı, adın hizasından başlasın: ikon + ad bloğu
   40 px genişliğinde, metin kolonu onunla aynı sola oturuyor. */
@media (min-width: 420px) {
  .yer-kart--sade .yer-kart__konum { padding-inline-start: calc(40px + var(--bosluk-3)); }
}

.rozet--kaynak {
  background: transparent;
  border: 1px solid var(--kenar);
  color: var(--metin-silik);
  font-weight: 500;
}

/* Telefon rozeti bir EYLEM: dokunma hedefi büyütüldü. */
.rozet--eylem {
  min-height: 32px;
  padding-inline: var(--bosluk-3);
  border: 1px solid var(--kenar-koyu);
  background: var(--zemin-batik);
  color: var(--metin);
}

.rozet--eylem:hover {
  background: var(--vurgu);
  border-color: var(--vurgu);
  color: var(--vurgu-metin);
  text-decoration: none;
}

/* ---------------------------------------------------------------------------
   7. LİSTE SAYFALARI — başlık, ilçe şeridi, veri notu, sayfalama
   ------------------------------------------------------------------------ */

.liste-kafa {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--bosluk-4);
  margin-bottom: var(--bosluk-5);
}

.liste-kafa__metin { min-width: 0; flex: 1 1 320px; }

.liste-kafa__metin h1 {
  display: flex;
  align-items: center;
  gap: var(--bosluk-3);
}

.liste-kafa__ikon {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: var(--kose-md);
  background: var(--vurgu-acik);
  color: var(--vurgu);
}

.liste-kafa__metin p {
  margin-top: var(--bosluk-2);
  color: var(--metin-yumusak);
  font-size: var(--olcek-md);
}

.liste-kafa__metin a { color: var(--metin-yumusak); text-decoration: underline; }
.liste-kafa__metin a:hover { color: var(--vurgu); }

.liste-kafa__eylemler {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bosluk-2);
}

/* --- ilçe şeridi --- */

.yer-serit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bosluk-2);
}

.yer-serit__ogeler {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bosluk-2);
  min-width: 0;
}

@media (max-width: 619px) {
  /* 20 ilçe sarınca liste 400 px aşağı iniyordu; telefonda tek satır
     yatay kaydırma. Kaydırma çubuğu gizli ama dokunmayla kayar. */
  .yer-serit { flex-wrap: nowrap; align-items: baseline; }
  .yer-serit__etiket { flex: none; }

  .yer-serit__ogeler {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: var(--bosluk-1);
  }

  .yer-serit__ogeler::-webkit-scrollbar { display: none; }
  .yer-serit__oge { flex: none; }
}

.yer-serit__etiket {
  font-size: var(--olcek-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
  color: var(--metin-silik);
  margin-inline-end: var(--bosluk-1);
}

.yer-serit__oge {
  display: inline-flex;
  align-items: center;
  gap: var(--bosluk-2);
  min-height: 36px;
  padding: var(--bosluk-1) var(--bosluk-3);
  border: 1px solid var(--kenar);
  border-radius: var(--kose-tam);
  background: var(--kart-zemin, var(--zemin-yukseltilmis));
  color: var(--metin);
  font-size: var(--olcek-sm);
  font-weight: 600;
}

.yer-serit__oge:hover {
  border-color: var(--vurgu);
  background: var(--vurgu-acik);
  color: var(--vurgu);
  text-decoration: none;
}

.yer-serit__sayi {
  font-size: var(--olcek-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--metin-silik);
  background: var(--zemin-batik);
  border-radius: var(--kose-tam);
  padding: 1px var(--bosluk-2);
}

.yer-serit__oge:hover .yer-serit__sayi { color: var(--vurgu); }

/* --- veri durumu notu ---
   Listenin başında BİR KEZ söyleniyor; her karta uyarı rozeti basmaktan
   hem dürüst hem okunur. */

.liste-notu {
  display: flex;
  align-items: flex-start;
  gap: var(--bosluk-2);
  margin-bottom: var(--bosluk-4);
  color: var(--metin-silik);
  font-size: var(--olcek-sm);
  line-height: 1.6;
}

.liste-notu svg { flex: none; margin-top: 3px; }
.liste-notu a { color: var(--vurgu); font-weight: 600; }

/* --- numaralı sayfalama --- */

.sayfalama__numaralar {
  display: flex;
  align-items: center;
  gap: var(--bosluk-1);
  list-style: none;
  padding: 0;
  margin: 0;
}

.sayfalama__numara {
  display: grid;
  place-items: center;
  min-width: 36px;
  min-height: 36px;
  padding-inline: var(--bosluk-2);
  border-radius: var(--kose-sm);
  color: var(--metin-yumusak);
  font-size: var(--olcek-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

a.sayfalama__numara:hover {
  background: var(--vurgu-acik);
  color: var(--vurgu);
  text-decoration: none;
}

.sayfalama__numara--etkin {
  background: var(--vurgu);
  color: var(--vurgu-metin);
}

.sayfalama__atla {
  color: var(--metin-silik);
  padding-inline: var(--bosluk-1);
}

/* ---------------------------------------------------------------------------
   8. KIRILMA YOLU — telefonda tek satır
   ------------------------------------------------------------------------ */

.kirilma-sarmal {
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.kirilma-sarmal::-webkit-scrollbar { display: none; }
.kirilma-sarmal .kirilma { flex-wrap: nowrap; white-space: nowrap; }

@media (max-width: 619px) {
  /* Son adım sayfanın <h1>'i ile aynı; telefonda iki satır yiyordu.
     Seçici `li` ile birlikte yazıldı: temel.css'teki `.kirilma li`
     (display:flex) daha baskındı ve kural sessizce düşüyordu. */
  .kirilma li.kirilma__son { display: none; }
}

/* ---------------------------------------------------------------------------
   9. STATİK SAYFA TİPOGRAFİSİ
   Panelden gelen h2/h3/ul/table için gövde kuralı yoktu; sayfa duvar
   metni gibi çıkıyordu. Ölçü 72ch ile sınırlı ama SOLA YASLI — ortalanmış
   dar sütun istenmiyor.
   ------------------------------------------------------------------------ */

.metin-govde { max-width: 72ch; }

.metin-govde > * + * { margin-top: var(--bosluk-4); }

.metin-govde h2 {
  font-size: var(--olcek-xl);
  margin-top: var(--bosluk-8);
  padding-top: var(--bosluk-4);
  border-top: 1px solid var(--kenar);
}

.metin-govde h3 { font-size: var(--olcek-lg); margin-top: var(--bosluk-6); }
.metin-govde h4 { font-size: var(--olcek-md); margin-top: var(--bosluk-5); }

.metin-govde ul,
.metin-govde ol { padding-inline-start: var(--bosluk-6); }

.metin-govde li + li { margin-top: var(--bosluk-2); }
.metin-govde li { line-height: 1.72; }

.metin-govde a { color: var(--vurgu); text-decoration: underline; }

.metin-govde blockquote {
  padding: var(--bosluk-2) var(--bosluk-5);
  border-inline-start: 3px solid var(--vurgu);
  color: var(--metin-yumusak);
}

.metin-govde hr { border: 0; border-top: 1px solid var(--kenar); }

.metin-govde table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--olcek-sm);
  display: block;
  overflow-x: auto;
}

.metin-govde th,
.metin-govde td {
  padding: var(--bosluk-2) var(--bosluk-3);
  border-bottom: 1px solid var(--kenar);
  text-align: start;
}

.metin-govde th { color: var(--metin-silik); font-weight: 600; }

/* ---------------------------------------------------------------------------
   10. HATA VE ÇEVRİMDIŞI SAYFALARI
   Çıkmaz sokak olmasınlar: arama kutusu + rehberin giriş noktaları.
   ------------------------------------------------------------------------ */

.hata-sayfa {
  max-width: 560px;
  margin-inline: auto;
  padding-block: var(--bosluk-10);
  text-align: center;
}

.hata-sayfa__kod {
  display: block;
  font-family: var(--yazi-baslik, var(--yazi-govde));
  font-size: var(--olcek-4xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--kenar-koyu);
  margin-bottom: var(--bosluk-3);
}

.hata-sayfa__isaret {
  display: inline-grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: var(--kose-tam);
  background: var(--vurgu-acik);
  color: var(--vurgu);
  margin-bottom: var(--bosluk-4);
}

.hata-sayfa h1 { margin-bottom: var(--bosluk-3); }
.hata-sayfa > p { color: var(--metin-yumusak); }

.hata-sayfa__arama { margin-top: var(--bosluk-6); }

.hata-sayfa__eylemler {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--bosluk-2);
  margin-top: var(--bosluk-6);
}

/* --- yol listesi (404) --- */

.yol-listesi {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--bosluk-2);
  margin-top: var(--bosluk-6);
  text-align: start;
}

@media (min-width: 620px) {
  .yol-listesi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.yol-listesi__oge {
  display: flex;
  align-items: center;
  gap: var(--bosluk-3);
  padding: var(--bosluk-3) var(--bosluk-4);
  border: 1px solid var(--kart-kenar, var(--kenar));
  border-radius: var(--kose-lg);
  background: var(--kart-zemin, var(--zemin-yukseltilmis));
  color: var(--metin);
}

.yol-listesi__oge:hover {
  border-color: var(--vurgu);
  box-shadow: var(--golge-sm);
  text-decoration: none;
}

.yol-listesi__ikon {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--kose-md);
  background: var(--vurgu-acik);
  color: var(--vurgu);
}

.yol-listesi__govde { flex: 1; min-width: 0; }
.yol-listesi__govde strong { display: block; font-size: var(--olcek-md); }
.yol-listesi__govde small { color: var(--metin-silik); font-size: var(--olcek-xs); }
.yol-listesi__oge > svg:last-child { flex: none; color: var(--metin-silik); }

/* --- çevrimdışı notları --- */

.cevrimdisi-notlar {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--bosluk-3);
  margin-top: var(--bosluk-8);
  text-align: start;
}

.cevrimdisi-notlar li {
  display: flex;
  align-items: flex-start;
  gap: var(--bosluk-3);
  font-size: var(--olcek-sm);
  color: var(--metin-yumusak);
  line-height: 1.6;
}

.cevrimdisi-notlar svg { flex: none; margin-top: 3px; color: var(--metin-silik); }

/* --- hizmet dizini ara başlığı --- */

.bolum-ara-baslik {
  font-size: var(--olcek-xl);
  margin-bottom: var(--bosluk-2);
}

/* ---------------------------------------------------------------------------
   11. HAREKET AZALTMA
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .doluluk__dolu { transition: none; }
}