/* =====================================================================
   4) MODULES  ·  Tüm haber modülleri
   ---------------------------------------------------------------------
   Her modül bağımsızdır: HTML'de yerini değiştirmek, çoğaltmak veya
   silmek diğerlerini etkilemez. Modüller `data-modul` ile çağrılır.
   ===================================================================== */

/* =====================================================================
   4.0 Modül kabuğu ve başlığı
   ===================================================================== */
.modul { min-width: 0; }
.modul--kutu {
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: var(--r3);
  padding: var(--b5);
}
/* Güvenlik ağı: sürümlü modüllerin çoğu kendi kutusunu çizer
   (.kutu--cerceve, .kutu--golge…). Böyle bir modül .modul--kutu içine
   konursa çerçeve içinde çerçeve oluşur. Bu durumda dış kap kendini
   siler; işaretlemede fazlalık kalsa da görüntü bozulmaz. */
.modul--kutu:has(> .kutu:not(.kutu--sade)) {
  background: none; border: 0; border-radius: 0; padding: 0;
}

.modul-baslik {
  display: flex; align-items: center; gap: var(--b3);
  margin-bottom: var(--b4);
}
.modul-baslik__ad {
  font-size: var(--fs-buyuk);
  font-weight: var(--fw-siyah);
  letter-spacing: -.015em;
  color: var(--kat, var(--marka));
  white-space: nowrap;
}
/* dar sütunda başlık sarabilsin */
.yan-sutun .modul-baslik__ad,
.modul--kutu .modul-baslik__ad { white-space: normal; font-size: var(--fs-orta); }
.modul-baslik__alt {
  font-size: var(--fs-mini); color: var(--yazi-3);
  padding-left: var(--b1); white-space: nowrap;
}
/* başlıkla sağdaki araçlar arasını dolduran ince çizgi */
.modul-baslik__cizgi { flex: 1; height: 1px; background: var(--cizgi-koyu); min-width: 16px; }
.modul-baslik__link {
  font-size: var(--fs-mini); font-weight: var(--fw-kalin);
  color: var(--yazi-2); letter-spacing: .02em;
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
}
.modul-baslik__link:hover { color: var(--kat, var(--marka)); }

/* dolu (renk zeminli) başlık çeşidi */
.modul-baslik--dolu {
  background: var(--kat, var(--marka));
  border-radius: var(--r2) var(--r2) 0 0;
  padding: 9px var(--b4); margin-bottom: 0;
}
.modul-baslik--dolu .modul-baslik__ad { color: #fff; font-size: var(--fs-orta); }
.modul-baslik--dolu .modul-baslik__cizgi { background: rgba(255,255,255,.3); }
.modul-baslik--dolu .modul-baslik__link { color: rgba(255,255,255,.9); }

/* Modül içi oklar */
.ray-araclar { display: flex; gap: 4px; }
.ray-ok {
  width: 30px; height: 30px; border-radius: var(--r2);
  background: var(--marka); color: #fff;
  display: grid; place-items: center;
  transition: background var(--gecis-hizli);
}
.ray-ok:hover { background: var(--marka-koyu); color: #fff; }
.ray-ok[disabled] { opacity: .35; cursor: default; }

/* =====================================================================
   4.1 KART  ·  Tüm modüllerin ortak yapı taşı
   ===================================================================== */
.kart { display: grid; gap: var(--b2); min-width: 0; align-content: start; }
.kart__govde, .kart__ic { display: grid; gap: 6px; min-width: 0; align-content: start; }
.kart__baslik, .kart__spot { display: block; }
.kart__baslik {
  font-family: var(--f-baslik);
  /* Boyut ve renk başlığı zaten öne çıkarıyor; 700 tüm kartları
     aynı ağırlığa getirip hiyerarşiyi siliyordu. */
  font-weight: var(--fw-orta);
  font-size: var(--fs-normal);
  line-height: 1.3;
  color: var(--yazi);
}
.kart:hover .kart__baslik { color: var(--marka); }
.kart__spot { font-size: var(--fs-kucuk); color: var(--yazi-2); line-height: 1.5; }
.kart__ust { display: flex; align-items: center; gap: var(--b2); }

/* Boyut çeşitleri */
.kart--dev  .kart__baslik { font-size: var(--fs-h2); }
.kart--buyuk .kart__baslik { font-size: var(--fs-h3); }
.kart--orta .kart__baslik { font-size: var(--fs-orta); }
.kart--mini .kart__baslik { font-size: var(--fs-kucuk); }

/* Yatay kart: solda küçük görsel */
.kart--yatay {
  grid-template-columns: 96px minmax(0, 1fr);
  gap: var(--b3); align-items: start;
}
.kart--yatay .gorsel { --oran: 4 / 3; }
.kart--yatay-genis { grid-template-columns: 150px minmax(0, 1fr); }
.kart--yatay-ters { grid-template-columns: minmax(0, 1fr) 96px; }
.kart--yatay-ters .gorsel { order: 2; }

/* Kapak kartı: yazı görselin üstünde */
.kart--kapak { position: relative; display: block; border-radius: var(--r3); overflow: hidden; }
.kart--kapak .gorsel { border-radius: 0; }
.kart--kapak .kart__ic {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--b5); color: #fff; z-index: 2;
  display: grid; gap: var(--b2);
}
.kart--kapak .kart__baslik { color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.kart--kapak:hover .kart__baslik { color: #fff; }
.kart--kapak .kart__spot { color: rgba(255,255,255,.86); }
.kart--kapak .meta { color: rgba(255,255,255,.75); }

/* Çerçeveli kart */
.kart--kutulu {
  background: var(--kart); border: 1px solid var(--cizgi);
  border-radius: var(--r3); overflow: hidden; gap: 0;
  transition: box-shadow var(--gecis), transform var(--gecis);
}
.kart--kutulu:hover { box-shadow: var(--golge-2); transform: translateY(-2px); }
.kart--kutulu .gorsel { border-radius: 0; }
.kart--kutulu .kart__ic { padding: var(--b4); display: grid; gap: var(--b2); }

/* Görselsiz metin kartı */
.kart--metin {
  border-left: 3px solid var(--kat, var(--marka));
  padding-left: var(--b3);
}

/* =====================================================================
   4.2 SON DAKİKA ŞERİDİ (ticker)
   ===================================================================== */
.serit-sondakika {
  display: flex; align-items: stretch;
  background: var(--kart); border: 1px solid var(--cizgi);
  border-left: 0; border-right: 0;
  overflow: hidden;
}
.serit-sondakika__etiket {
  display: flex; align-items: center; gap: var(--b2);
  background: var(--sondakika); color: #fff;
  padding: 0 var(--b4);
  font-size: var(--fs-mini); font-weight: var(--fw-siyah);
  text-transform: uppercase; letter-spacing: .06em;
  white-space: nowrap; position: relative;
  /* Etiket akan yazının ÜSTÜNDE durmalı. Eğik uç (::after) pencerenin ilk
     10px'ine taşar; z-index verilmezse pencere DOM'da sonra geldiği için
     yazının üstünde boyanır ve başlıklar kırmızı üçgenin önünden geçer.
     Doğru görüntü, yazının etiketin ARKASINA girip kaybolmasıdır. */
  z-index: 2;
}
.serit-sondakika__etiket::after {
  content: ""; position: absolute; right: -10px; top: 0; bottom: 0;
  width: 20px; background: var(--sondakika);
  transform: skewX(-16deg);
}
.serit-sondakika__nokta {
  width: 7px; height: 7px; border-radius: 50%; background: #fff;
  animation: nabiz 1.1s infinite;
}
.serit-sondakika__pencere { flex: 1; overflow: hidden; padding-left: var(--b8); }

/* Akan yazı, eğik SON DAKİKA etiketinin kenarında sert kesiliyordu:
   harfler etikete değince şerit bozuk görünüyordu. Etiketin bittiği yerde
   kısa bir geçişle içeri girer. Dolgu tek başına yetmez — akış kayarken
   yazı dolgunun içine de girer, kırpma kabın kendisinde olmalı.

   Geçiş YALNIZCA etiketi olan ve yatay kayan sürümlerde uygulanır:
     · etiketsiz sürümde korunacak bir kenar yok, ilk başlık boşuna solardı;
     · dikey kayan sürümde yatay geçişin karşılığı yok;
     · statik sürümde yazı hiç kaymaz, ilk başlık kalıcı olarak soluk kalırdı.
   Yön de sabit değil: etiket sağdayken (--sag) geçiş sağ kenara geçer,
   yoksa solma etiketin olmadığı tarafta durur ve metin sağda etikete
   sertçe çarpardı. */
/* Yumuşak geçiş kaldırıldı. Sorun yazının etikete sert çarpması değil,
   KATMAN SIRASIYDI: eğik uç yazının altında kalıyordu. Etiket üste
   alınınca (z-index) yazı doğal biçimde etiketin arkasına girip kayboluyor
   ve maskeye gerek kalmıyor. Maske aslında yanlış katmanlamayı örten bir
   yamaydı; sürüme göre yanlış kenarda kalabiliyordu. */
.serit-sondakika__akis {
  display: flex; align-items: center; gap: var(--b8);
  height: 42px; width: max-content;
  animation: kaydir 42s linear infinite;
}
.serit-sondakika:hover .serit-sondakika__akis { animation-play-state: paused; }
.serit-sondakika__akis a {
  display: inline-flex; align-items: center; gap: var(--b2);
  font-size: var(--fs-kucuk); font-weight: var(--fw-orta); white-space: nowrap;
}
.serit-sondakika__akis time { color: var(--marka); font-weight: var(--fw-orta); }
.serit-sondakika__kontrol {
  display: flex; align-items: center; border-left: 1px solid var(--cizgi);
}
.serit-sondakika__kontrol button { padding: 0 12px; color: var(--yazi-2); }
.serit-sondakika__kontrol button:hover { color: var(--marka); }

@keyframes kaydir {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.serit-sondakika--durdu .serit-sondakika__akis { animation-play-state: paused; }

/* =====================================================================
   4.3 MANŞET  ·  klasik 1 büyük + 2 yan + alt şerit
   ===================================================================== */
.manset { display: grid; gap: var(--sutun-bosluk); }
.manset__ust {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  gap: var(--sutun-bosluk);
  align-items: stretch;
}
.manset__ana-kap {
  position: relative;           /* dikey numara şeridi buna göre konumlanır */
  display: grid; grid-template-rows: minmax(0, 1fr) auto; min-width: 0;
}
.manset__alt {
  display: grid;
  grid-template-columns: repeat(var(--alt-sutun, 5), minmax(0, 1fr));
  gap: var(--sutun-bosluk);
}
.manset__alt .kart__baslik {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* Beş sütuna bölünen şeritte kart 160px kalıyor; uzun bir kategori adı
   ("KÜLTÜR-SANAT") ile saat aynı satıra sığmıyor ve alt satıra düşüyor.
   Kırpmak yerine sarmasına izin veriyoruz — ama satır arası kapatılıp
   ayraç noktası gizleniyor, yoksa nokta satır sonunda tek başına asılı
   kalıyor ve kartların altı tırtıklı görünüyordu. */
.manset__alt .meta { row-gap: 0; column-gap: var(--b2); }
.manset__alt .meta__ayrac { display: none; }

/* --- ana manşet --- */
.manset-ana { position: relative; display: block; overflow: hidden; border-radius: var(--r2) var(--r2) 0 0; }
.manset-ana .gorsel { --oran: 16 / 9; border-radius: 0; }
.manset-ana__ic {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: var(--b7) var(--b5) var(--b5);
  display: grid; gap: var(--b3); justify-items: start;
}
/* ortalanan/serbest hizalanan öğeler kabı aşmasın */
.manset-ana__ic > *,
.surmanset__ic > * { max-width: 100%; min-width: 0; }
.manset-ana__baslik {
  font-family: var(--f-baslik);
  font-size: var(--fs-manset);
  font-weight: var(--fw-siyah);
  line-height: 1.12;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0,0,0,.5);
  letter-spacing: -.025em;
}
.manset-ana__spot {
  font-size: var(--fs-normal); color: rgba(255,255,255,.88);
  max-width: 62ch; line-height: 1.5;
}
.manset-ana:hover .manset-ana__baslik { color: #fff; }

/* --- manşet numara şeridi --- */
.manset__numaralar {
  display: flex; align-self: end;
  border: 1px solid var(--cizgi); border-top: 0;
  border-radius: 0 0 var(--r2) var(--r2);
  overflow: hidden; background: var(--kart);
}
.manset__no {
  flex: 1; min-width: 0; height: 34px;
  display: grid; place-items: center;
  font-size: var(--fs-mini); font-weight: var(--fw-kalin);
  color: var(--yazi-2);
  border-right: 1px solid var(--cizgi);
  transition: background var(--gecis-hizli), color var(--gecis-hizli);
}
.manset__no:last-child { border-right: 0; }
.manset__no:hover { background: var(--kart-2); color: var(--marka); }
.manset__no--aktif, .manset__no--aktif:hover { background: var(--marka); color: #fff; }
.manset__no--tumu { background: var(--lacivert); color: #fff; flex: 0 0 40px; }
.manset__no--tumu:hover { background: var(--marka); color: #fff; }

/* --- yan manşetler: yazı görselin altında beyaz şeritte --- */
.manset__yan {
  display: grid; grid-auto-rows: 1fr;
  gap: var(--sutun-bosluk); align-content: stretch;
}
.manset-yan {
  display: grid; grid-template-rows: minmax(0, 1fr) auto;
  border: 1px solid var(--cizgi); border-radius: var(--r2);
  overflow: hidden; background: var(--kart); min-height: 0;
}
.manset-yan .gorsel { --oran: 16 / 9; border-radius: 0; }
/* masaüstünde görsel kendi doğal yüksekliğini dayatmasın, satırı kaplasın */
@media (min-width: 861px) {
  .manset-yan .gorsel { --oran: auto; position: relative; height: 100%; min-height: 0; }
  .manset-yan .gorsel img { position: absolute; inset: 0; width: 100%; height: 100%; }
}
.manset-yan__ic { padding: 10px var(--b3) 12px; }
.manset-yan__baslik {
  font-family: var(--f-baslik);
  font-size: var(--fs-normal); font-weight: var(--fw-kalin);
  line-height: 1.3; color: var(--yazi);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.manset-yan:hover .manset-yan__baslik { color: var(--marka); }

/* =====================================================================
   4.3b SÜRMANŞET  ·  tam genişlik afiş + dikey numaralar
   ===================================================================== */
.surmanset { position: relative; border-radius: var(--r2); overflow: hidden; }
.surmanset__sahne { display: block; position: relative; }
.surmanset__sahne .gorsel { --oran: 21 / 9; border-radius: 0; }
.surmanset__ic {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: var(--b7) var(--b6) var(--b5);
  display: grid; gap: var(--b3); justify-items: start;
}
.surmanset__baslik {
  font-family: var(--f-baslik);
  font-size: clamp(24px, 3vw, 40px); font-weight: var(--fw-siyah);
  color: #fff; line-height: 1.1; letter-spacing: -.025em;
  text-shadow: 0 2px 14px rgba(0,0,0,.5); max-width: 24ch;
}
.surmanset__noktalar {
  position: absolute; top: var(--b4); right: var(--b4); z-index: 3;
  display: grid; gap: 5px;
}
.surmanset__nokta {
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(10,14,20,.6); color: #fff;
  font-size: var(--fs-mikro); font-weight: var(--fw-kalin);
  display: grid; place-items: center;
  transition: background var(--gecis-hizli);
}
.surmanset__nokta:hover { background: rgba(10,14,20,.85); color: #fff; }
.surmanset__nokta--aktif { background: var(--marka); color: #fff; }

/* Manşet varyantı: sağda liste, görsel yok */
.manset--liste .manset__ust { grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); }
.manset-liste {
  background: var(--kart); border: 1px solid var(--cizgi);
  border-radius: var(--r3); overflow: hidden;
}
.manset-liste { align-self: stretch; }
.manset-liste__baslik {
  background: var(--lacivert); color: #fff;
  padding: 10px var(--b4); font-size: var(--fs-kucuk);
  font-weight: var(--fw-siyah); text-transform: uppercase; letter-spacing: .06em;
  display: flex; justify-content: space-between; align-items: center;
}
.manset-liste li { border-bottom: 1px solid var(--cizgi); }
.manset-liste li:last-child { border-bottom: 0; }
.manset-liste a {
  display: grid; grid-template-columns: 18px minmax(0, 1fr);
  gap: var(--b3); padding: 11px var(--b4);
  font-size: var(--fs-kucuk); font-weight: var(--fw-orta); line-height: 1.35;
}
.manset-liste a:hover { background: var(--kart-2); }
.manset-liste__no {
  color: var(--marka); font-weight: var(--fw-siyah); font-size: var(--fs-kucuk);
}

/* =====================================================================
   4.4 MOZAİK  ·  farklı boyutlarda kart ızgarası
   ===================================================================== */
.mozaik {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 168px;
  gap: var(--sutun-bosluk);
}
.mozaik > * { position: relative; overflow: hidden; border-radius: var(--r3); }
.mozaik > *:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.mozaik > *:nth-child(6),
.mozaik > *:nth-child(7) { grid-column: span 2; }
.mozaik .gorsel { --oran: auto; height: 100%; border-radius: 0; }
.mozaik .gorsel img { height: 100%; }
.mozaik .kart__ic { padding: var(--b4); }
.mozaik > *:nth-child(1) .kart__baslik { font-size: var(--fs-h3); }

/* =====================================================================
   4.5 ŞERİT  ·  n'li eşit kart dizisi
   ===================================================================== */
.serit { display: grid; grid-template-columns: repeat(var(--adet, 5), minmax(0, 1fr)); gap: var(--sutun-bosluk); }
.serit--ayirici > * + * { border-left: 1px solid var(--cizgi); padding-left: var(--sutun-bosluk); }

/* =====================================================================
   4.6 KATEGORİ BLOĞU  ·  1 büyük + n liste
   ===================================================================== */
.kategori-blok {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--sutun-bosluk);
}
.kategori-blok__liste { display: grid; gap: var(--b4); align-content: start; }
.kategori-blok__liste > * + * { border-top: 1px solid var(--cizgi); padding-top: var(--b4); }
.kategori-blok--ters { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.kategori-blok--ters .kategori-blok__ana { order: 2; }

/* =====================================================================
   4.7 NUMARALI LİSTE  ·  Çok okunanlar
   ===================================================================== */
.numarali { display: grid; }
.numarali li { border-bottom: 1px dashed var(--cizgi); }
.numarali li:last-child { border-bottom: 0; }
.numarali a {
  display: grid; grid-template-columns: 34px minmax(0, 1fr);
  gap: var(--b3); align-items: center; padding: 11px 0;
}
.numarali__no {
  font-family: var(--f-baslik);
  font-size: 22px; font-weight: var(--fw-siyah);
  color: var(--cizgi-koyu); text-align: center; line-height: 1;
  transition: color var(--gecis-hizli);
}
.numarali a:hover .numarali__no { color: var(--marka); }
.numarali li:nth-child(-n+3) .numarali__no { color: var(--marka); }
.numarali__baslik { font-family: var(--f-baslik); font-size: var(--fs-kucuk); font-weight: var(--fw-orta); line-height: 1.35; }
.numarali--gorselli a { grid-template-columns: 34px 70px minmax(0, 1fr); }
.numarali--gorselli .gorsel { --oran: 4 / 3; }

/* =====================================================================
   4.8 SEKMELİ BLOK
   ===================================================================== */
.sekmeler {
  display: flex; gap: 0; border-bottom: 2px solid var(--cizgi);
  margin-bottom: var(--b4); overflow-x: auto; scrollbar-width: none;
}
.sekmeler::-webkit-scrollbar { display: none; }
.sekme {
  padding: 9px 16px;
  font-size: var(--fs-kucuk); font-weight: var(--fw-kalin);
  text-transform: uppercase; letter-spacing: .03em;
  color: var(--yazi-3); white-space: nowrap;
  border-bottom: 3px solid transparent; margin-bottom: -2px;
  transition: color var(--gecis-hizli), border-color var(--gecis-hizli);
}
.sekme:hover { color: var(--yazi); }
.sekme[aria-selected="true"] { color: var(--marka); border-bottom-color: var(--marka); }
.sekme-panel[hidden] { display: none; }

/* =====================================================================
   4.9 YAZARLAR
   ===================================================================== */
.yazar-serit {
  display: grid; grid-template-columns: repeat(var(--sutun, 4), minmax(0, 1fr));
  gap: var(--b5);
}
.yazar {
  display: grid; grid-template-columns: 62px minmax(0, 1fr);
  gap: var(--b3); align-items: center;
  padding-right: var(--b4); border-right: 1px solid var(--cizgi);
}
.yazar:last-child { border-right: 0; }
.yazar__avatar {
  width: 62px; height: 62px; border-radius: 50%;
  background: linear-gradient(140deg, var(--marka), var(--lacivert));
  color: #fff; display: grid; place-items: center;
  font-size: 22px; font-weight: var(--fw-siyah);
  border: 3px solid var(--kart); box-shadow: 0 0 0 1px var(--cizgi-koyu);
  overflow: hidden; flex: none;
}

/* Fotoğraf varsa kabı tamamen doldurur; yoksa baş harfler görünür.
   Tüm avatar kapları aynı kuralı paylaşır. */
.yazar__avatar img,
.kadro-kart__avatar img,
.profil-avatar img,
.kose-one__avatar img,
.yazar-buyuk__avatar img,
.yazi-yazar__avatar img,
.ekip-kart__avatar img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: inherit; display: block;
}
.yazar__ad { display: block; font-size: var(--fs-kucuk); font-weight: var(--fw-siyah); }
.yazar__alan {
  display: block; font-size: var(--fs-mikro); color: var(--yazi-3);
  text-transform: uppercase; letter-spacing: .05em;
}
.yazar__yazi { display: block; font-size: var(--fs-kucuk); color: var(--yazi-2); margin-top: 5px; line-height: 1.35; }
.yazar:hover .yazar__yazi { color: var(--marka); }

/* Sağ sütun yazar listesi */
.yazar-liste li { display: flex; gap: var(--b3); padding: var(--b3) 0; border-bottom: 1px solid var(--cizgi); align-items: center; }
.yazar-liste li:last-child { border-bottom: 0; }
.yazar-liste .yazar__avatar { width: 44px; height: 44px; font-size: 16px; }

/* =====================================================================
   4.10 VİDEO BLOĞU
   ===================================================================== */
.video-blok {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--sutun-bosluk);
  background: #0d1117; border-radius: var(--r3);
  padding: var(--b5); color: #fff;
}
.video-blok .modul-baslik { border-bottom-color: rgba(255,255,255,.15); }
.video-blok .modul-baslik__ad { color: #fff; }
.video-blok__oynatma { position: relative; border-radius: var(--r2); overflow: hidden; }
.video-blok__baslik { font-size: var(--fs-h3); font-weight: var(--fw-siyah); color: #fff; margin-top: var(--b3); line-height: 1.2; }
.video-blok__spot { color: #97a3b4; font-size: var(--fs-kucuk); margin-top: var(--b2); }
.video-blok__liste { display: grid; gap: var(--b3); align-content: start; max-height: 420px; overflow-y: auto; padding-right: 4px; }
.video-blok__liste::-webkit-scrollbar { width: 5px; }
.video-blok__liste::-webkit-scrollbar-thumb { background: #333c4b; border-radius: var(--rtam); }
.video-oge {
  display: grid; grid-template-columns: 108px minmax(0, 1fr);
  gap: var(--b3); align-items: center;
  padding: 6px; border-radius: var(--r2);
  transition: background var(--gecis-hizli);
}
.video-oge:hover, .video-oge--aktif { background: rgba(255,255,255,.08); }
.video-oge__baslik { font-size: var(--fs-mini); font-weight: var(--fw-orta); color: #e8edf4; line-height: 1.35; }
.video-oge .gorsel { --oran: 16 / 9; }
.video-oge__sure {
  position: absolute; right: 4px; bottom: 4px; z-index: 2;
  background: rgba(0,0,0,.8); color: #fff;
  font-size: 10px; padding: 1px 5px; border-radius: var(--r1);
}

/* =====================================================================
   4.11 FOTO GALERİ ŞERİDİ
   ---------------------------------------------------------------------
   Kartın kendi görünümü pages.css > 5.4 bölümündedir; burada yalnızca
   rayın ölçüsü ayarlanır (aynı kart hem rayda hem ızgarada kullanılır).
   ===================================================================== */
.galeri-ray { position: relative; }
.galeri-ray .ray > * { width: 280px; }

/* =====================================================================
   4.12 PİYASA
   ===================================================================== */
.piyasa-serit {
  display: flex; align-items: center; gap: 0;
  background: var(--kart); border: 1px solid var(--cizgi);
  border-radius: var(--r3); overflow: hidden;
}
.piyasa-serit__etiket {
  background: var(--lacivert); color: #fff; align-self: stretch;
  display: flex; align-items: center; padding: 0 var(--b4);
  font-size: var(--fs-mini); font-weight: var(--fw-siyah);
  text-transform: uppercase; letter-spacing: .06em; white-space: nowrap;
}
.piyasa-serit__ic { display: flex; overflow-x: auto; flex: 1; scrollbar-width: none; }
.piyasa-serit__ic::-webkit-scrollbar { display: none; }
.piyasa-oge {
  display: flex; align-items: baseline; gap: var(--b2);
  padding: 11px var(--b4); border-right: 1px solid var(--cizgi);
  white-space: nowrap; font-size: var(--fs-kucuk);
}
.piyasa-oge__ad { color: var(--yazi-3); font-size: var(--fs-mini); font-weight: var(--fw-kalin); letter-spacing: .04em; }
.piyasa-oge__deger { font-weight: var(--fw-siyah); font-variant-numeric: tabular-nums; }
.piyasa-oge__fark { font-size: var(--fs-mini); font-weight: var(--fw-orta); }
.piyasa-oge--yukari .piyasa-oge__fark { color: var(--yukari); }
.piyasa-oge--asagi  .piyasa-oge__fark { color: var(--asagi); }
.piyasa-oge--yukari .piyasa-oge__fark::before { content: "▲ "; font-size: 8px; }
.piyasa-oge--asagi  .piyasa-oge__fark::before { content: "▼ "; font-size: 8px; }

/* Sağ sütun piyasa kutusu */
.piyasa-kutu li {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; border-bottom: 1px solid var(--cizgi); font-size: var(--fs-kucuk);
}
.piyasa-kutu li:last-child { border-bottom: 0; }

/* =====================================================================
   4.13 HAVA DURUMU
   ===================================================================== */
.hava-kart {
  background: linear-gradient(150deg, #1d6fd4, #0e3f80);
  color: #fff; border-radius: var(--r3); padding: var(--b5);
  /* Yan yana duran kartların içerikleri farklı uzunlukta; kart kabı
     doldurmazsa yükseklikler tutmuyordu. Kart ızgara hücresini doldurur,
     gün şeridi de daima alta yaslanır. */
  height: 100%; display: flex; flex-direction: column;
}
.hava-kart__ust { display: flex; align-items: center; justify-content: space-between; gap: var(--b3); }
.hava-kart__derece { font-size: 44px; font-weight: var(--fw-siyah); line-height: 1; }
.hava-kart__ikon { font-size: 46px; line-height: 1; }
.hava-kart__sehir { font-size: var(--fs-orta); font-weight: var(--fw-kalin); }
.hava-kart__durum { font-size: var(--fs-mini); opacity: .85; }
.hava-kart__detay {
  display: flex; gap: var(--b4); margin-top: var(--b3);
  font-size: var(--fs-mini); opacity: .9;
}
.hava-kart__gunler {
  display: grid; grid-template-columns: repeat(var(--gun, 5), 1fr);
  gap: var(--b2); margin-top: auto;
  padding-top: var(--b4); border-top: 1px solid rgba(255,255,255,.22);
  text-align: center; font-size: var(--fs-mikro);
}
.hava-kart__gunler b { display: block; font-size: var(--fs-kucuk); }
.hava-kart__gunler span { font-size: 20px; display: block; margin: 2px 0; }

/* =====================================================================
   4.14 NAMAZ VAKİTLERİ
   ===================================================================== */
.namaz-kart li {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 0; border-bottom: 1px solid var(--cizgi); font-size: var(--fs-kucuk);
}
.namaz-kart li:last-child { border-bottom: 0; }
.namaz-kart li b { font-variant-numeric: tabular-nums; }
.namaz-kart li.aktif { color: var(--marka); font-weight: var(--fw-kalin); }
.namaz-kart li.aktif::after { content: "şimdi"; font-size: 10px; }

/* =====================================================================
   4.15 ANKET
   ===================================================================== */
.anket__soru { font-size: var(--fs-normal); font-weight: var(--fw-kalin); margin-bottom: var(--b4); line-height: 1.35; }
.anket__secenek { display: block; width: 100%; text-align: left; margin-bottom: var(--b3); }
.anket__ust { display: flex; justify-content: space-between; font-size: var(--fs-kucuk); margin-bottom: 5px; }
.anket__bar { height: 8px; background: var(--kart-2); border-radius: var(--rtam); overflow: hidden; }
.anket__dolgu {
  height: 100%; width: 0; border-radius: var(--rtam);
  background: var(--marka); transition: width .7s cubic-bezier(.2,.8,.3,1);
}
.anket__secenek:nth-child(2) .anket__dolgu { background: var(--kat-dunya); }
.anket__secenek:nth-child(3) .anket__dolgu { background: var(--kat-spor); }
.anket__secenek:nth-child(4) .anket__dolgu { background: var(--kat-kultur); }
.anket__toplam { font-size: var(--fs-mini); color: var(--yazi-3); margin-top: var(--b3); }
.anket--oylandi .anket__secenek { cursor: default; }

/* =====================================================================
   4.16 SPOR  ·  puan durumu & canlı skor
   ===================================================================== */
.puan-tablo { width: 100%; border-collapse: collapse; font-size: var(--fs-kucuk); }
.puan-tablo th {
  text-align: right; font-size: var(--fs-mikro); color: var(--yazi-3);
  text-transform: uppercase; letter-spacing: .05em;
  padding: 6px 4px; border-bottom: 1px solid var(--cizgi); font-weight: var(--fw-kalin);
}
.puan-tablo th:nth-child(2) { text-align: left; }
.puan-tablo td { padding: 8px 4px; text-align: right; border-bottom: 1px solid var(--cizgi); font-variant-numeric: tabular-nums; }
.puan-tablo td:nth-child(2) { text-align: left; font-weight: var(--fw-orta); }
.puan-tablo tr:last-child td { border-bottom: 0; }
.puan-tablo__sira { font-weight: var(--fw-orta);
  display: inline-grid; place-items: center;
  width: 20px; height: 20px; border-radius: var(--r1);
  background: var(--kart-2); font-size: var(--fs-mini); font-weight: var(--fw-kalin);
}
.puan-tablo tr:nth-child(-n+2) .puan-tablo__sira { background: var(--kat-spor); color: #fff; }
.puan-tablo td:last-child { font-weight: var(--fw-siyah); }

.skor-kart {
  border: 1px solid var(--cizgi); border-radius: var(--r2);
  padding: var(--b3); margin-bottom: var(--b2); background: var(--kart);
}
.skor-kart__ust {
  display: flex; justify-content: space-between; align-items: center;
  font-size: var(--fs-mikro); color: var(--yazi-3); margin-bottom: var(--b2);
}
.skor-kart__dk { font-weight: var(--fw-kalin); }
.skor-kart--canli .skor-kart__dk { color: var(--canli); }
.skor-kart--canli { border-left: 3px solid var(--canli); }
.skor-kart__satir {
  display: grid; grid-template-columns: minmax(0, 1fr) 28px;
  align-items: center; font-size: var(--fs-kucuk); padding: 3px 0;
}
.skor-kart__satir b { text-align: right; font-variant-numeric: tabular-nums; }

/* =====================================================================
   4.17 BÜLTEN & SOSYAL
   ===================================================================== */
.bulten {
  background: linear-gradient(140deg, var(--lacivert), var(--lacivert-2));
  color: #fff; border-radius: var(--r3); padding: var(--b6);
}
.bulten h3 { font-size: var(--fs-buyuk); margin-bottom: var(--b2); }
.bulten p { font-size: var(--fs-kucuk); color: #b6c4d6; margin-bottom: var(--b4); }
.bulten__form { display: flex; gap: var(--b2); flex-wrap: wrap; }
.bulten__form input {
  flex: 1 1 160px; min-width: 0;
  height: 40px; padding: 0 14px; border-radius: var(--r2);
  border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.1); color: #fff;
}
.bulten__form .btn { flex: 0 0 auto; }
.bulten__form input::placeholder { color: rgba(255,255,255,.55); }
.bulten__kvkk { font-size: 10px; color: #8ea0b6; margin-top: var(--b3); }
.bulten__basarili { font-size: var(--fs-kucuk); color: #7ee2a8; margin-top: var(--b3); }

.takip-izgara { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--b2); }
.takip-kutu {
  display: grid; place-items: center; gap: 4px;
  padding: var(--b3); border: 1px solid var(--cizgi); border-radius: var(--r2);
  font-size: var(--fs-mikro); text-align: center;
}
.takip-kutu:hover { border-color: var(--marka); color: var(--marka); }
.takip-kutu b { font-size: var(--fs-kucuk); }

/* =====================================================================
   4.18 ETİKET BULUTU
   ===================================================================== */
.etiket-bulut { display: flex; flex-wrap: wrap; gap: var(--b2); }
.etiket {
  display: inline-block; padding: 5px 11px;
  background: var(--kart-2); border: 1px solid var(--cizgi);
  border-radius: var(--rtam); font-size: var(--fs-mini);
  color: var(--yazi-2); transition: all var(--gecis-hizli);
}
.etiket:hover { background: var(--marka); border-color: var(--marka); color: #fff; }
.etiket::before { content: "#"; opacity: .5; margin-right: 1px; }

/* =====================================================================
   4.19 REKLAM ALANLARI
   ===================================================================== */
.reklam {
  display: grid; place-items: center;
  background: repeating-linear-gradient(45deg, var(--kart-2), var(--kart-2) 10px, var(--zemin) 10px, var(--zemin) 20px);
  border: 1px dashed var(--cizgi-koyu);
  border-radius: var(--r2);
  color: var(--yazi-3); font-size: var(--fs-mini);
  text-transform: uppercase; letter-spacing: .12em;
  min-height: 90px; position: relative;
}
.reklam::after {
  content: attr(data-olcu); position: absolute; bottom: 6px; right: 8px;
  font-size: 10px; letter-spacing: 0; opacity: .6;
}
.reklam--masthead { min-height: 100px; }
.reklam--yatay { min-height: 92px; }
.reklam--kare { min-height: 250px; }
.reklam--dikey { min-height: 600px; }

/* =====================================================================
   4.20 RESMİ İLANLAR
   ===================================================================== */
.ilan-liste li { border-bottom: 1px solid var(--cizgi); }
.ilan-liste li:last-child { border-bottom: 0; }
.ilan-liste a { display: grid; gap: 4px; padding: var(--b3) 0; }
.ilan-liste__kurum {
  font-size: var(--fs-mikro); color: var(--kat-ilan);
  text-transform: uppercase; letter-spacing: .06em; font-weight: var(--fw-kalin);
}
.ilan-liste__baslik { font-size: var(--fs-kucuk); font-weight: var(--fw-orta); line-height: 1.35; }

/* =====================================================================
   4.21 AKIŞ  ·  dakika dakika son haberler
   ===================================================================== */
.akis { position: relative; padding-left: var(--b5); }
.akis::before {
  content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px;
  width: 2px; background: var(--cizgi);
}
.akis li { position: relative; padding: 0 0 var(--b4); }
.akis li::before {
  content: ""; position: absolute; left: calc(var(--b5) * -1 + 1px); top: 6px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--kart); border: 2px solid var(--cizgi-koyu);
}
.akis li:first-child::before { border-color: var(--marka); background: var(--marka); }
.akis a { display: block; }   /* dokunma alanı satırın tamamı olsun */
.akis__saat {
  font-size: var(--fs-mini); font-weight: var(--fw-orta); color: var(--marka);
  font-variant-numeric: tabular-nums;
  display: inline-block; margin-right: 8px;
}
.akis__baslik { font-size: var(--fs-kucuk); font-weight: var(--fw-orta); line-height: 1.4; }

/* =====================================================================
   4.22 DAHA FAZLA YÜKLE / sayfalama
   ===================================================================== */
.daha-fazla { display: grid; place-items: center; padding-top: var(--b5); }
.sayfalama { display: flex; gap: var(--b2); justify-content: center; padding-top: var(--b6); flex-wrap: wrap; }
.sayfalama a, .sayfalama span {
  min-width: 36px; height: 36px; padding: 0 10px;
  display: grid; place-items: center;
  border: 1px solid var(--cizgi); border-radius: var(--r2);
  font-size: var(--fs-kucuk); font-weight: var(--fw-orta); background: var(--kart);
}
.sayfalama a:hover { border-color: var(--marka); color: var(--marka); }
.sayfalama .aktif { background: var(--marka); border-color: var(--marka); color: #fff; }

/* =====================================================================
   4.23 Duyarlılık
   ===================================================================== */
@media (max-width: 1100px) {
  .manset__alt { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .yazar-serit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yazar { border-right: 0; }
  .video-blok { grid-template-columns: minmax(0, 1fr); }
  .mozaik { grid-auto-rows: 150px; }
}
@media (max-width: 860px) {
  .manset__ust { grid-template-columns: minmax(0, 1fr); }
  .manset__yan { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kategori-blok, .kategori-blok--ters { grid-template-columns: minmax(0, 1fr); }
  .kategori-blok--ters .kategori-blok__ana { order: 0; }
  .serit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .serit--ayirici > * + * { border-left: 0; padding-left: 0; }
  .mozaik { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mozaik > *:nth-child(6) { grid-column: span 1; }
}
/* Dar telefonlar (≤480): başlıklar sarsın, yatay kartlar daralsın */
@media (max-width: 480px) {
  .modul-baslik { flex-wrap: wrap; row-gap: var(--b2); }
  .modul-baslik__cizgi { min-width: 0; }
  .modul-baslik__ad { white-space: normal; }
  .kart--yatay-genis { grid-template-columns: 110px minmax(0, 1fr); }
  .kart--yatay { grid-template-columns: 84px minmax(0, 1fr); }
  .numarali--gorselli a { grid-template-columns: 28px 60px minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .manset__yan, .manset__alt { grid-template-columns: minmax(0, 1fr); }
  .serit { grid-template-columns: minmax(0, 1fr); }
  .yazar-serit { grid-template-columns: minmax(0, 1fr); }
  .mozaik { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 200px; }
  .mozaik > *:nth-child(1) { grid-column: span 1; grid-row: span 1; }
  /* 390px'te etiket 116px yer kaplıyor, haber başlığına 200px kalıyordu ve
     başlık yarım okunuyordu. Dar ekranda yazı gizlenir, yanıp sönen nokta
     kalır; ad ekran okuyucu için görünmez metinde durur. */
  .modul-baslik__ad { font-size: var(--fs-orta); }
}

/* =====================================================================
   TAKIM ARMASI  ·  takimlar.js
   Armalar gerçek kulüp armaları değildir; kulüp renklerinden türetilmiş
   temsilî kalkanlardır (marka hakkı nedeniyle).
   ===================================================================== */
.takim {
  display: inline-flex; align-items: center; gap: 8px;
  min-width: 0; vertical-align: middle;
}
/* takım profiline bağlanan satır (puan tablosu, skor kartı) */
a.takim--bag { color: inherit; }
a.takim--bag:hover .takim__ad { color: var(--marka); }
.takim__ad {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.arma { flex: none; display: block; }
img.arma { object-fit: contain; }

/* skor kartında ad solda, skor sağda kalsın */
.skor-kart__satir .takim { flex: 1 1 auto; }

@media (max-width: 560px) {
  .takim { gap: 6px; }
}

/* =====================================================================
   KATEGORİ İKONU  ·  IKON.kategori()
   Kategori renginden boyanır; ayrı renk tanımı gerekmez.
   ===================================================================== */
.kat-ikon { color: var(--kat, var(--marka)); flex: none; }
.kat-ikon--sonuk { opacity: .75; }

/* piyasa simgeleri — bayrak ve altın kendi renginde */
.piyasa-simge { flex: none; vertical-align: middle; }
.piyasa-oge { display: inline-flex; align-items: center; gap: 7px; }
.piyasa-kutu__ad { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.piyasa-kutu__ad > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) { .piyasa-oge { gap: 5px; } }

/* =====================================================================
   HABER BAŞLIĞI ROZETLERİ  ·  .hb-rozet
   Kategori, tür ve şeffaflık etiketleri aynı görsel dili paylaşır:
   eşit yükseklikte hap, 13px ikon, aynı iç boşluk. Renk `--ie` ile gelir.
   ===================================================================== */
.haber-basi__ust { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.hb-rozet,
.ic-etiket__dugme {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px; padding: 5px 13px;
  border-radius: var(--rtam);
  font-size: var(--fs-mini); font-weight: var(--fw-orta);
  letter-spacing: .02em; line-height: 1;
  border: 1px solid transparent; text-decoration: none;
  white-space: nowrap;
}
.hb-rozet svg, .ic-etiket__dugme svg { flex: none; }

/* kategori — dolu, kendi renginde */
.hb-rozet--kat {
  background: var(--ie, var(--marka)); color: #fff;
  border-color: var(--ie, var(--marka));
}
.hb-rozet--kat:hover { filter: brightness(1.08); }

/* tür (video, galeri) — nötr çerçeveli */
.hb-rozet--tur {
  background: var(--kart-2); color: var(--yazi-2); border-color: var(--cizgi);
}

/* son dakika — canlı nokta */
.hb-rozet--sondakika {
  background: var(--marka); color: #fff; border-color: var(--marka);
}
.hb-rozet__nokta {
  width: 7px; height: 7px; border-radius: 50%; background: #fff;
  animation: hb-nabiz 1.4s ease-in-out infinite;
}
@keyframes hb-nabiz { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .hb-rozet__nokta { animation: none; } }

/* =====================================================================
   İÇERİK ETİKETİ VE İPUCU  ·  .ic-etiket
   Şeffaflık etiketleri (yapay zekâ, sponsorlu, analiz, doğrulama…).
   Tür tablosu: sablonlar.js › ICERIK_ETIKETLERI

   İpucu yalnızca :hover ile açılsaydı dokunmatik ve klavye kullanıcısı
   göremezdi; bu yüzden etiket odaklanabilir bir düğmedir ve ipucu
   :focus-visible ile de açılır.
   ===================================================================== */
.ic-etiket { position: relative; display: inline-flex; }

.ic-etiket__dugme {
  background: color-mix(in srgb, var(--ie) 12%, var(--kart));
  color: var(--ie);
  border-color: color-mix(in srgb, var(--ie) 32%, transparent);
  cursor: help;
}
.ic-etiket__dugme:hover,
.ic-etiket__dugme:focus-visible {
  background: var(--ie); color: #fff; border-color: var(--ie);
}

.ic-etiket__ipucu {
  position: absolute; bottom: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: max-content; max-width: 290px;
  background: var(--lacivert); color: #fff;
  font-size: var(--fs-kucuk); font-weight: var(--fw-normal);
  line-height: 1.5; text-align: left; white-space: normal;
  padding: 10px 14px; border-radius: var(--r2);
  box-shadow: var(--golge-2);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
  z-index: 40;
}
.ic-etiket__ipucu::after {
  content: ""; position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--lacivert);
}
.ic-etiket:hover .ic-etiket__ipucu,
.ic-etiket__dugme:focus-visible + .ic-etiket__ipucu {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
@media (prefers-reduced-motion: reduce) { .ic-etiket__ipucu { transition: none; } }

/* Görsel üzerindeki YZ işareti — yalnızca görselin kendisi yapay zekâ
   ile üretildiyse basılır (bkz. sablonlar.js › rozetler). */
.rozet--yz {
  background: #7b1fa2; color: #fff;
  display: inline-flex; align-items: center; gap: 4px;
}

@media (max-width: 560px) {
  .haber-basi__ust { gap: 6px; }
  .hb-rozet, .ic-etiket__dugme { padding: 5px 11px; }
  /* Balon dar ekranda etikete değil SATIRIN tamamına yaslanır.
     Etikete yaslamak, etiket satırın ortasında durduğunda balonu sağ
     kenardan taşırıyordu: sol kenarı etiketten başlıyor ama genişliği
     yalnızca ekran genişliğine göre sınırlanıyordu (100vw - 40px), bu da
     etiketin soldaki uzaklığını hesaba katmıyordu. Satıra yaslanınca
     genişlik iki kenardan da bağlanır, taşma matematiksel olarak imkânsız.
     Kaynağı gösteren ok bu düzende yanlış yeri işaret edeceği için kalkar. */
  .haber-basi__ust { position: relative; }
  .ic-etiket { position: static; }
  .ic-etiket__ipucu {
    left: 0; right: 0; width: auto; max-width: none;
    transform: translateY(4px);
  }
  .ic-etiket__ipucu::after { display: none; }
  .ic-etiket:hover .ic-etiket__ipucu,
  .ic-etiket__dugme:focus-visible + .ic-etiket__ipucu {
    transform: translateY(0);
  }
}

/* =====================================================================
   ÖZEL AÇILIR SEÇİCİ  ·  .secici
   Yerleşik <select> ekranda gizli kalır ama DOM'da durur: form gönderimi
   ve change olayı aynen çalışır, JS kapalıysa kullanıcı onu görür.
   ===================================================================== */
.secici { position: relative; display: inline-block; min-width: 0; }

/* asıl <select>: erişilebilirlik ağacından çıkarılmaz, yalnızca gizlenir */
.secici__asil {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* JS çalışmazsa yerleşik seçici görünür kalsın */
.secici:not(:has(.secici__dugme)) .secici__asil {
  position: static; width: auto; height: auto; margin: 0; clip: auto;
}

.secici__dugme {
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: var(--b3); width: 100%; min-height: 40px;
  padding: 8px 14px; border-radius: var(--r2);
  background: var(--kart); border: 1px solid var(--cizgi);
  color: var(--yazi-1); font-family: inherit; font-size: var(--fs-kucuk);
  text-align: left; cursor: pointer;
  transition: border-color .15s;
}
.secici__dugme:hover { border-color: var(--cizgi-koyu); }
.secici--acik .secici__dugme { border-color: var(--marka); }
.secici__deger { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.secici__ok { flex: none; color: var(--yazi-3); transition: transform .18s; }
.secici--acik .secici__ok { transform: rotate(180deg); }

.secici__liste {
  position: absolute; z-index: 60; top: calc(100% + 6px); left: 0;
  min-width: 100%; max-height: 288px; overflow-y: auto;
  margin: 0; padding: 6px; list-style: none;
  background: var(--kart); border: 1px solid var(--cizgi);
  border-radius: var(--r2); box-shadow: var(--golge-2);
}
.secici__oge {
  padding: 9px 12px; border-radius: var(--r1, 6px);
  font-size: var(--fs-kucuk); color: var(--yazi-2);
  cursor: pointer; white-space: nowrap; min-height: 38px;
  display: flex; align-items: center;
}
.secici__oge:hover,
.secici__oge:focus-visible {
  background: var(--kart-2); color: var(--yazi-1); outline: none;
}
.secici__oge--secili {
  background: color-mix(in srgb, var(--marka) 10%, var(--kart));
  color: var(--marka);
}
.secici__oge--secili::after {
  content: "✓"; margin-left: auto; padding-left: var(--b3);
}

/* --- sade: kategori sırala çubuğu --- */
.secici--sade .secici__dugme {
  background: none; border-color: transparent; padding-inline: 8px;
  color: var(--yazi-1);
}
.secici--sade .secici__dugme:hover { background: var(--kart-2); }

/* --- gökyüzü: namaz vakitleri kartı üzerinde --- */
.secici--gokyuzu .secici__dugme {
  background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.28);
  color: #fff; border-radius: var(--rtam); padding: 9px 16px;
}
.secici--gokyuzu .secici__dugme:hover { background: rgba(255,255,255,.22); }
.secici--gokyuzu .secici__ok { color: rgba(255,255,255,.75); }
.secici--gokyuzu .secici__liste { min-width: 190px; }

/* sıralama alanı */
.siralama__alan { display: inline-flex; align-items: center; gap: var(--b2); }
.siralama__alan > span { font-size: var(--fs-mini); color: var(--yazi-3); }

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

/* =====================================================================
   PUAN DURUMU — hat renkleri ve form şeridi
   Sol kenardaki renk çubuğu takımın hangi hatta olduğunu gösterir.
   ===================================================================== */
.puan-tablo__satir td:first-child { position: relative; }
.puan-tablo__satir--sampiyon td:first-child::before,
.puan-tablo__satir--avrupa td:first-child::before,
.puan-tablo__satir--play td:first-child::before,
.puan-tablo__satir--kume td:first-child::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px;
  border-radius: 2px;
}
.puan-tablo__satir--sampiyon td:first-child::before { background: #d1a02f; }
.puan-tablo__satir--avrupa  td:first-child::before { background: #2b93d4; }
.puan-tablo__satir--play    td:first-child::before { background: #0f7a3d; }
.puan-tablo__satir--kume    td:first-child::before { background: var(--marka); }

.puan-tablo__p { font-weight: var(--fw-orta); color: var(--yazi-1); }
.puan-tablo__av { color: var(--yazi-2); font-variant-numeric: tabular-nums; }

/* form şeridi: son maçlar */
.form-serit { display: inline-flex; gap: 3px; }
.form-nokta {
  width: 18px; height: 18px; border-radius: 4px;
  display: grid; place-items: center;
  font-size: 10px; font-style: normal; color: #fff; line-height: 1;
}
.form-nokta--g { background: #0f7a3d; }
.form-nokta--b { background: #8a94a0; }
.form-nokta--m { background: var(--marka); }

.puan-lejant {
  display: flex; flex-wrap: wrap; gap: var(--b3) var(--b5);
  margin-top: var(--b4); padding-top: var(--b4);
  border-top: 1px solid var(--cizgi);
  font-size: var(--fs-mini); color: var(--yazi-3);
}
.puan-lejant span { display: inline-flex; align-items: center; gap: 6px; }
.puan-lejant__renk { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.puan-lejant__renk--sampiyon { background: #d1a02f; }
.puan-lejant__renk--avrupa   { background: #2b93d4; }
.puan-lejant__renk--play     { background: #0f7a3d; }
.puan-lejant__renk--kume     { background: var(--marka); }

@media (max-width: 860px) {
  /* dar ekranda gol ve form sütunlarını gizle, tablo okunur kalsın */
  .puan-tablo th:nth-child(7), .puan-tablo td:nth-child(7),
  .puan-tablo th:nth-child(8), .puan-tablo td:nth-child(8),
  .puan-tablo th:nth-child(10), .puan-tablo td:nth-child(10) { display: none; }
}

/* =====================================================================
   4.x SAYILARLA  ·  büyük rakam kartları
   ===================================================================== */
.sayilarla {
  display: flex; flex-wrap: wrap; gap: var(--b5);
  align-items: stretch;
}
.sayilarla__oge {
  flex: 1 1 130px; min-width: 0;
  display: grid; gap: 2px; align-content: start;
}
.sayilarla__deger {
  font-family: var(--f-baslik);
  font-size: clamp(28px, 4.4vw, 42px); line-height: 1.05;
  letter-spacing: -.03em; font-weight: var(--fw-siyah);
  color: var(--kat, var(--marka));
  /* Rakamlar alt alta hizalansın diye eşit genişlikli rakam */
  font-variant-numeric: tabular-nums;
}
.sayilarla__etiket {
  font-size: var(--fs-kucuk); color: var(--yazi-2); line-height: 1.35;
}
.sayilarla__degisim {
  font-size: var(--fs-mini); font-weight: var(--fw-kalin);
  color: var(--yazi-3);
}
.sayilarla__degisim--yukari { color: var(--yukari); }
.sayilarla__degisim--asagi  { color: var(--asagi, #d3122a); }

.sayilarla--izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sayilarla--cizgili .sayilarla__oge + .sayilarla__oge {
  border-left: 1px solid var(--cizgi); padding-left: var(--b5);
}
.sayilarla--renkli .sayilarla__deger,
.sayilarla--koyu .sayilarla__deger { color: inherit; }
.sayilarla--koyu .sayilarla__etiket { color: rgba(255,255,255,.75); }
.sayilarla--dev { flex-direction: column; }
.sayilarla--dev .sayilarla__deger { font-size: clamp(46px, 9vw, 82px); }

@media (max-width: 560px) {
  .sayilarla { gap: var(--b4); }
  .sayilarla__oge { flex-basis: calc(50% - var(--b4)); }
  .sayilarla--cizgili .sayilarla__oge + .sayilarla__oge {
    border-left: 0; padding-left: 0;
  }
}

/* =====================================================================
   4.x ALINTI  ·  öne çıkan söz
   ===================================================================== */
.alinti {
  margin: 0; display: grid; gap: var(--b3);
  justify-items: start;
}
.alinti__soz {
  margin: 0;
  font-family: var(--f-vurgu, var(--f-baslik));
  font-size: clamp(18px, 2.4vw, 24px); line-height: 1.42;
  letter-spacing: -.015em; color: var(--yazi);
  text-wrap: balance;
}
.alinti__kim {
  display: grid; gap: 1px;
  font-size: var(--fs-kucuk); color: var(--yazi-2);
}
.alinti__kim b { color: var(--yazi); font-weight: var(--fw-kalin); }
.alinti__kim span { font-size: var(--fs-mini); color: var(--yazi-3); }

.alinti--tirnak .alinti__soz::before {
  content: "“"; display: block;
  font-size: 56px; line-height: .7; color: var(--kat, var(--marka));
  margin-bottom: 4px;
}
.alinti--cubuk { border-left: 3px solid var(--kat, var(--marka)); padding-left: var(--b4); }
.alinti--portre { grid-template-columns: 72px minmax(0, 1fr); align-items: start; column-gap: var(--b4); }
.alinti--portre .alinti__soz,
.alinti--portre .alinti__kim { grid-column: 2; }
.alinti__portre { grid-row: span 2; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.alinti--koyu .alinti__soz { color: #fff; }
.alinti--koyu .alinti__kim { color: rgba(255,255,255,.75); }
.alinti--koyu .alinti__kim b { color: #fff; }
.alinti--genis .alinti__soz { font-size: clamp(22px, 3.2vw, 32px); }

@media (max-width: 560px) {
  .alinti--portre { grid-template-columns: minmax(0, 1fr); }
  .alinti--portre .alinti__soz, .alinti--portre .alinti__kim { grid-column: 1; }
  .alinti__portre { grid-row: auto; }
}

/* =====================================================================
   4.x SON DEPREMLER
   ---------------------------------------------------------------------
   Renk kodu okumayı kolaylaştırmak içindir, panik dili kurmaz: 4.0+
   vurgulanır, 5.0+ daha belirgin olur, altı nötr kalır.
   ===================================================================== */
.deprem { display: grid; gap: var(--b3); }
.deprem__kaynak {
  margin: 0; font-size: var(--fs-mini); color: var(--yazi-3);
}
.deprem__kaynak a { color: inherit; text-decoration: underline; }
.deprem__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--b2); }
.deprem__oge {
  display: grid; grid-template-columns: 48px minmax(0, 1fr);
  gap: var(--b3); align-items: center;
  padding: var(--b2) 0;
  border-bottom: 1px dashed var(--cizgi);
}
.deprem__oge:last-child { border-bottom: 0; }
.deprem__buyukluk {
  font-family: var(--f-baslik);
  font-size: var(--fs-orta); font-weight: var(--fw-siyah);
  line-height: 1; text-align: center;
  padding: 7px 0; border-radius: var(--r2);
  background: var(--kart-2); color: var(--yazi-2);
  font-variant-numeric: tabular-nums;
}
.deprem__bilgi { display: grid; gap: 1px; min-width: 0; }
.deprem__yer {
  font-size: var(--fs-kucuk); font-weight: var(--fw-orta); color: var(--yazi);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.deprem__alt { font-size: var(--fs-mini); color: var(--yazi-3); }

.deprem--orta  .deprem__buyukluk { background: var(--vurgu-zemin); color: #9a5b12; }
.deprem--guclu .deprem__buyukluk { background: var(--marka-acik); color: var(--marka-koyu); }

/* Rozet sürümü: büyüklük dolu zeminde */
.deprem--rozet .deprem__buyukluk { background: var(--lacivert); color: #fff; }
.deprem--rozet .deprem--orta  .deprem__buyukluk,
.deprem--rozet .deprem__oge.deprem--orta .deprem__buyukluk { background: #9a5b12; color: #fff; }
.deprem--rozet .deprem__oge.deprem--guclu .deprem__buyukluk { background: var(--marka); color: #fff; }

/* Tek büyük son deprem */
.deprem--tek .deprem__oge { grid-template-columns: minmax(0, 1fr); gap: var(--b1); border: 0; }
.deprem--tek .deprem__buyukluk {
  font-size: clamp(34px, 6vw, 52px); padding: 0; background: none;
  text-align: left; color: var(--kat, var(--marka));
}
.deprem--tek .deprem__yer { font-size: var(--fs-orta); white-space: normal; }

/* Tablo */
.deprem--tablo .deprem__oge { grid-template-columns: 56px minmax(0, 1fr); }
.deprem--tablo .deprem__buyukluk { background: none; text-align: left; padding: 0; }

/* Kompakt şerit */
.deprem--kompakt .deprem__liste { gap: 0; }
.deprem--kompakt .deprem__oge { grid-template-columns: 40px minmax(0, 1fr); padding: 5px 0; }
.deprem--kompakt .deprem__buyukluk { font-size: var(--fs-kucuk); padding: 4px 0; }
.deprem--kompakt .deprem__alt { display: none; }

/* Bayat veri */
.deprem__uyari {
  margin: 0; padding: var(--b3) var(--b4);
  background: var(--vurgu-zemin); border-left: 3px solid #9a5b12;
  border-radius: 0 var(--r2) var(--r2) 0;
  font-size: var(--fs-kucuk); color: var(--yazi-2); line-height: 1.5;
}

/* Koyu kutuda deprem metni. Modül kendi zeminini bilmez; kutu stilini
   sar() veriyor, bu yüzden renk düzeltmesi kutu sınıfına bağlanır.
   Yoksa koyu zeminde koyu yazı çıkıyor ve yer adları okunmuyordu. */
.kutu--koyu .deprem__yer { color: #fff; }
.kutu--koyu .deprem__alt,
.kutu--koyu .deprem__kaynak { color: rgba(255,255,255,.7); }
.kutu--koyu .deprem__oge { border-bottom-color: rgba(255,255,255,.14); }
.kutu--koyu .deprem__buyukluk { background: rgba(255,255,255,.12); color: #fff; }
.kutu--koyu .deprem__oge.deprem--orta  .deprem__buyukluk { background: #b8791f; color: #fff; }
.kutu--koyu .deprem__oge.deprem--guclu .deprem__buyukluk { background: var(--marka); color: #fff; }


/* =====================================================================
   4.x NÖBETÇİ ECZANE
   ---------------------------------------------------------------------
   Adres ve telefon burada süs değil, işlevin kendisidir: gece yola
   çıkan okur bu iki satırı okuyacak. Bu yüzden hiçbir sürümde
   kısaltılmaz, yalnızca yerleşimi değişir.
   ===================================================================== */
.eczane { display: grid; gap: var(--b3); }
.eczane__ust {
  display: flex; flex-wrap: wrap; gap: 4px var(--b3);
  align-items: baseline; justify-content: space-between;
  margin: 0; padding-bottom: var(--b2);
  border-bottom: 1px solid var(--cizgi);
}
.eczane__yer { font-weight: 700; font-size: var(--fs-kucuk); color: var(--yazi-1); }
/* Nöbet saati — listenin üstünde bir kez, ilçe adının yanında */
.eczane__nobet {
  font-weight: 400; color: var(--yazi-3);
  font-variant-numeric: tabular-nums;
}
.eczane__tarih { font-size: var(--fs-mini); color: var(--yazi-3); }
.eczane__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--b2); }
.eczane__oge {
  display: grid; gap: 3px; min-width: 0;
  padding: var(--b2) 0; border-bottom: 1px solid var(--cizgi);
}
.eczane__oge:last-child { border-bottom: 0; padding-bottom: 0; }
.eczane__ad { font-size: var(--fs-kucuk); font-weight: 700; line-height: 1.3; }
.eczane__adres { font-size: var(--fs-mini); color: var(--yazi-2); line-height: 1.45; }
.eczane__alt {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--b3);
  font-size: var(--fs-mini); color: var(--yazi-3); margin-top: 2px;
}
/* Telefon dokunmatik ekranda tek dokunuşla aranır; görsel olarak da
   bağ gibi durmalı ki dokunulabilir olduğu anlaşılsın. */
.eczane__tel { color: var(--marka); font-weight: 700; text-decoration: none; }
.eczane__tel:hover { text-decoration: underline; }
.eczane__tel--yok { color: var(--yazi-3); font-weight: 400; font-style: italic; }
.eczane__harita { color: inherit; text-decoration: underline; }
.eczane__kaynak { margin: 0; font-size: var(--fs-mini); color: var(--yazi-3); }
.eczane__kaynak a { color: inherit; text-decoration: underline; }

/* Kart — her eczane kendi çerçevesinde */
.eczane--kart .eczane__liste { gap: var(--b3); }
.eczane--kart .eczane__oge {
  border: 1px solid var(--cizgi); border-radius: var(--r2);
  padding: var(--b3); background: var(--zemin-1);
}
.eczane--kart .eczane__oge:last-child { padding-bottom: var(--b3); }

/* Tek eczane — yan sütunda tek satırlık yer kaplar, bilgi eksilmez */
.eczane--tek .eczane__ad { font-size: var(--fs-orta); }
.eczane--tek .eczane__adres { font-size: var(--fs-kucuk); }

/* Kompakt — yan sütun için iki satır: ad ile telefon yan yana, adres
   altta. Bilgi eksilmez, yalnızca sıkışır; yan sütunda dikey yer
   pahalıdır ve telefon zaten en çok dokunulan öge. */
.eczane--kompakt .eczane__liste { gap: 0; }
.eczane--kompakt .eczane__oge {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline; column-gap: var(--b2); padding: 7px 0;
}
.eczane--kompakt .eczane__ad { grid-column: 1; grid-row: 1; }
.eczane--kompakt .eczane__alt { grid-column: 2; grid-row: 1; margin: 0; }
.eczane--kompakt .eczane__adres {
  grid-column: 1 / -1; grid-row: 2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Yan sütunda harita bağı satırı taşırır; adres ve telefon yeterli,
   tam liste zaten bir tık uzakta. */
.eczane--kompakt .eczane__harita { display: none; }

/* Tarih tutmayan liste */
.eczane__uyari {
  margin: 0; padding: var(--b3) var(--b4);
  background: var(--vurgu-zemin); border-left: 3px solid #9a5b12;
  border-radius: 0 var(--r2) var(--r2) 0;
  font-size: var(--fs-kucuk); color: var(--yazi-2); line-height: 1.5;
}
.eczane__uyari a { color: var(--marka); font-weight: 700; }

/* Koyu kutu — depremde olduğu gibi, zemin bilgisini kutu taşır */
.kutu--koyu .eczane__ad,
.kutu--koyu .eczane__yer { color: #fff; }
.kutu--koyu .eczane__adres { color: rgba(255,255,255,.82); }
.kutu--koyu .eczane__alt,
.kutu--koyu .eczane__tarih,
.kutu--koyu .eczane__kaynak { color: rgba(255,255,255,.7); }
.kutu--koyu .eczane__oge,
.kutu--koyu .eczane__ust { border-color: rgba(255,255,255,.14); }
.kutu--koyu .eczane__tel { color: #fff; text-decoration: underline; }
.kutu--koyu .eczane--kart .eczane__oge { background: rgba(255,255,255,.06); }


/* =====================================================================
   4.x DÖVİZ ÇEVİRİCİ
   ---------------------------------------------------------------------
   Piyasa şeridi kuru gösterir, bu modül kullandırır. Sonuç ekranın en
   büyük ögesidir: okur buraya tek bir sayı için gelir.
   ===================================================================== */
/* Çevirici geniş sütunda da dar durur: tek satırlık bir hesap için
   1200px'lik bir form kutusu okura yardımcı olmaz. */
.cevirici { display: grid; gap: var(--b3); max-width: 520px; }
.cevirici__satir {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--b2);
}
.cevirici__alan { display: grid; gap: 4px; flex: 1 1 120px; min-width: 0; }
.cevirici__alan > span {
  font-size: var(--fs-mini); font-weight: 700; color: var(--yazi-3);
  text-transform: uppercase; letter-spacing: .04em;
}
.cevirici__alan input,
.cevirici__alan select {
  width: 100%; padding: 9px 10px;
  border: 1px solid var(--cizgi); border-radius: var(--r2);
  background: var(--zemin-0); color: var(--yazi-1);
  font: inherit; font-size: var(--fs-kucuk);
}
.cevirici__alan input { font-variant-numeric: tabular-nums; }
.cevirici__alan input:focus-visible,
.cevirici__alan select:focus-visible {
  outline: 2px solid var(--marka); outline-offset: 1px;
}
/* Değiştir düğmesi alanlarla aynı hizada dursun diye alt kenara oturur */
.cevirici__degistir {
  flex: 0 0 auto; width: 38px; height: 38px;
  border: 1px solid var(--cizgi); border-radius: var(--r2);
  background: var(--zemin-1); color: var(--yazi-2);
  font-size: 16px; line-height: 1; cursor: pointer;
}
.cevirici__degistir:hover { border-color: var(--marka); color: var(--marka); }

/* Sonuç — sayfanın cevabı. Tabular rakam: yazarken sayı zıplamasın. */
.cevirici__sonuc {
  display: block; font-size: var(--fs-buyuk); font-weight: 800;
  line-height: 1.2; color: var(--yazi-1);
  font-variant-numeric: tabular-nums; min-height: 1.2em;
  word-break: break-word;
}
.cevirici__damga { margin: 0; font-size: var(--fs-mini); color: var(--yazi-3); }
.cevirici__not {
  margin: 0; font-size: var(--fs-mini); color: var(--yazi-3); line-height: 1.5;
}
.cevirici__uyari {
  margin: 0; padding: var(--b3) var(--b4);
  background: var(--vurgu-zemin); border-left: 3px solid #9a5b12;
  border-radius: 0 var(--r2) var(--r2) 0;
  font-size: var(--fs-kucuk); color: var(--yazi-2); line-height: 1.5;
}

/* ---------------------------------------------------------------------
   Satır içi — haber metninin arasına girer. Sonuç da aynı satırda durur:
   "100 dolar kaç lira" sorusunun cevabı okuma akışını kesmeden görünsün.
   Etiketler gizlenir ama `aria-label` kalır; ekran okuyucu alanın ne
   olduğunu yine söyler.
   --------------------------------------------------------------------- */
.cevirici--satir {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--b2);
  /* İçeriği kadar geniş: metin arasına giren bir şerit, sütunun
     tamamını kaplayınca araya sıkışmış bir form gibi duruyordu. */
  width: fit-content; max-width: 100%; padding: var(--b2) var(--b3);
  border: 1px solid var(--cizgi); border-radius: 999px;
  background: var(--zemin-1);
}
.cevirici--satir .cevirici__satir { flex: 1 1 auto; gap: var(--b1); }
.cevirici--satir .cevirici__alan > span { display: none; }
.cevirici--satir .cevirici__alan { flex: 0 1 auto; }
.cevirici--satir .cevirici__alan--tutar { flex: 0 0 84px; }
.cevirici--satir .cevirici__alan input,
.cevirici--satir .cevirici__alan select { padding: 6px 9px; border-radius: 999px; }
.cevirici--satir .cevirici__degistir { width: 30px; height: 30px; border-radius: 999px; }
.cevirici--satir .cevirici__sonuc {
  flex: 0 0 auto; font-size: var(--fs-orta); padding-left: var(--b2);
  border-left: 1px solid var(--cizgi);
}
/* Şerit biçiminde damga ve not yer kaplar; kaynak bilgisi damgada kalır,
   uzun uyarı metni tam sürümlerde okunur. */
.cevirici--satir .cevirici__damga { flex: 0 0 auto; }
.cevirici--satir .cevirici__not { display: none; }
@media (max-width: 640px) {
  /* Dar ekranda yuvarlak şerit kırılır; kutuya döner. */
  .cevirici--satir { border-radius: var(--r2); }
  .cevirici--satir .cevirici__sonuc { border-left: 0; padding-left: 0; }
}

/* ---------------------------------------------------------------------
   Kompakt — yan sütun için. Tutar üstte tek başına, iki birim altta yan
   yana: 300px'lik sütunda üç alanı bir satıra sıkıştırmak açılır
   kutuları okunmaz hale getiriyordu.
   --------------------------------------------------------------------- */
.cevirici--kompakt { gap: var(--b2); max-width: 340px; }
.cevirici--kompakt .cevirici__satir { gap: 6px; }
/* SIRA ÖNEMLİ: iki kuralın ağırlığı eşit, sonra gelen kazanır. Genel
   kural önce yazılır ki tutar alanının kendi satırı iptal olmasın. */
.cevirici--kompakt .cevirici__alan { flex: 1 1 0; min-width: 0; }
.cevirici--kompakt .cevirici__alan--tutar { flex: 1 1 100%; }
.cevirici--kompakt .cevirici__alan > span { font-size: 10px; }
.cevirici--kompakt .cevirici__alan input,
.cevirici--kompakt .cevirici__alan select { padding: 7px 8px; }
.cevirici--kompakt .cevirici__degistir {
  width: 30px; height: 30px; align-self: flex-end; margin-bottom: 1px;
}
.cevirici--kompakt .cevirici__sonuc { font-size: var(--fs-orta); }
.cevirici--kompakt .cevirici__not { display: none; }

/* Koyu kutu */
.kutu--koyu .cevirici__sonuc { color: #fff; }
.kutu--koyu .cevirici__damga,
.kutu--koyu .cevirici__not { color: rgba(255,255,255,.7); }
.kutu--koyu .cevirici__alan input,
.kutu--koyu .cevirici__alan select,
.kutu--koyu .cevirici__degistir {
  background: rgba(255,255,255,.08); color: #fff;
  border-color: rgba(255,255,255,.18);
}


/* =====================================================================
   4.x KRONOLOJİ
   ---------------------------------------------------------------------
   Dikey çizgi olayları birbirine bağlar; dönüm noktaları çizgi üzerinde
   dolu bir noktayla ayrılır. Vurgu abartılmaz: her kayıt önemliyse
   hiçbiri önemli değildir.
   ===================================================================== */
.kronoloji { display: grid; gap: var(--b3); }
.kronoloji__giris {
  margin: 0; font-size: var(--fs-kucuk); color: var(--yazi-2); line-height: 1.5;
}
.kronoloji__liste {
  list-style: none; margin: 0; padding: 0 0 0 var(--b4);
  display: grid; gap: var(--b4); position: relative;
}
/* Çizgi listenin kendisinden çizilir; her öge kendi parçasını çizseydi
   son ögenin altında boşlukta asılı kalan bir uç kalırdı. */
.kronoloji__liste::before {
  content: ''; position: absolute; left: 4px; top: 6px; bottom: 6px;
  width: 2px; background: var(--cizgi);
}
.kronoloji__oge { position: relative; display: grid; gap: 3px; }
.kronoloji__oge::before {
  content: ''; position: absolute; left: calc(-1 * var(--b4) + 1px); top: 6px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--zemin-0); border: 2px solid var(--cizgi);
}
.kronoloji__oge--donum::before {
  background: var(--marka); border-color: var(--marka);
}
.kronoloji__tarih {
  font-size: var(--fs-mini); font-weight: 700; color: var(--yazi-3);
  text-transform: uppercase; letter-spacing: .03em;
}
.kronoloji__oge--donum .kronoloji__tarih { color: var(--marka); }
.kronoloji__baslik { font-size: var(--fs-kucuk); line-height: 1.35; }
.kronoloji__metin {
  margin: 0; font-size: var(--fs-mini); color: var(--yazi-2); line-height: 1.5;
}
.kronoloji__bag {
  font-size: var(--fs-mini); color: var(--marka); font-weight: 700;
  text-decoration: none; justify-self: start;
}
.kronoloji__bag:hover { text-decoration: underline; }
.kronoloji__alt { margin: 0; font-size: var(--fs-mini); color: var(--yazi-3); }
.kronoloji__alt a { color: var(--marka); font-weight: 700; }

/* ---------------------------------------------------------------------
   Yatay kaydırmalı — uzun dosyalarda dikey liste sayfayı boyuna uzatır.
   Kaydırma kutunun kendi içinde kalır; sayfa gövdesi yana kaymaz.
   --------------------------------------------------------------------- */
.kronoloji--yatay .kronoloji__liste {
  grid-auto-flow: column; grid-auto-columns: minmax(180px, 220px);
  padding: var(--b4) 0 var(--b2); overflow-x: auto;
  scroll-snap-type: x proximity;
}
.kronoloji--yatay .kronoloji__liste::before {
  left: 6px; right: 6px; top: 4px; bottom: auto; width: auto; height: 2px;
}
.kronoloji--yatay .kronoloji__oge {
  scroll-snap-align: start; padding-right: var(--b3);
}
.kronoloji--yatay .kronoloji__oge::before {
  left: 0; top: calc(-1 * var(--b4) + 1px);
}

/* Katlanabilir — <details>, JavaScript'siz de çalışır */
.kronoloji--katli { display: block; }
.kronoloji--katli .kronoloji__ozet {
  cursor: pointer; font-weight: 700; font-size: var(--fs-kucuk);
  padding-bottom: var(--b3); list-style-position: outside;
}
.kronoloji--katli .kronoloji__ozet span {
  font-weight: 400; color: var(--yazi-3); font-size: var(--fs-mini);
}
.kronoloji--katli .kronoloji__liste { margin-bottom: var(--b3); }

/* Kompakt — yan sütun; metin gizlenmez, aralıklar daralır */
.kronoloji--kompakt .kronoloji__liste { gap: var(--b3); }
.kronoloji--kompakt .kronoloji__metin { display: none; }
.kronoloji--kompakt .kronoloji__giris { display: none; }

/* Koyu kutu */
.kutu--koyu .kronoloji__baslik { color: #fff; }
.kutu--koyu .kronoloji__metin { color: rgba(255,255,255,.82); }
.kutu--koyu .kronoloji__giris,
.kutu--koyu .kronoloji__alt,
.kutu--koyu .kronoloji__tarih { color: rgba(255,255,255,.7); }
.kutu--koyu .kronoloji__liste::before { background: rgba(255,255,255,.18); }
.kutu--koyu .kronoloji__oge::before {
  background: var(--lacivert); border-color: rgba(255,255,255,.3);
}


/* =====================================================================
   ANKET · GELİŞMİŞ
   ---------------------------------------------------------------------
   Sonuç grafiği oy verildikten SONRA açılır: önce göstermek okurun
   kararını etkiler. Kendi oyu işaretlenir — okur oyunun sayıldığını
   görmeli.
   ===================================================================== */
.anket__adim {
  margin: 0 0 var(--b2); font-size: var(--fs-mini); font-weight: 700;
  color: var(--yazi-3); text-transform: uppercase; letter-spacing: .04em;
}
.anket__secenekler { display: grid; gap: var(--b2); }
.anket__secenek[disabled] { opacity: .55; cursor: not-allowed; }
.anket__sonuc { list-style: none; margin: 0 0 var(--b2); padding: 0; display: grid; gap: var(--b2); }
.anket__satir { display: grid; gap: 3px; }
.anket__satir .anket__ust {
  display: flex; justify-content: space-between; gap: var(--b2);
  font-size: var(--fs-kucuk);
}
.anket__satir--benim .anket__ust { font-weight: 700; }
.anket__isaret {
  font-style: normal; font-size: var(--fs-mini); font-weight: 400;
  color: var(--marka);
}
.anket__satir .anket__yuzde { font-variant-numeric: tabular-nums; }
.anket__satir .anket__bar {
  display: block; height: 6px; border-radius: 999px;
  background: var(--zemin-2); overflow: hidden;
}
.anket__satir .anket__dolgu {
  display: block; height: 100%; border-radius: 999px;
  background: var(--marka); transition: width .35s ease;
}
.anket__satir--benim .anket__dolgu { background: var(--kat-magazin, var(--marka)); }
.anket__adet { font-size: var(--fs-mini); color: var(--yazi-3); font-variant-numeric: tabular-nums; }
.anket__durum {
  margin: var(--b2) 0 0; font-size: var(--fs-mini); color: var(--yazi-3);
}
.anket__not {
  margin: var(--b2) 0 0; font-size: var(--fs-mini); color: var(--yazi-3);
  line-height: 1.45; opacity: .85;
}
/* Bar biçimi sürümlere göre değişir; sonuç satırı da onlara uyar. */
.anket--kalin .anket__satir .anket__bar { height: 12px; }
.anket--ince .anket__satir .anket__bar { height: 3px; }
.anket--barsiz .anket__satir .anket__bar { display: none; }
.anket--barsiz .anket__adet { display: none; }
.anket--yatay .anket__sonuc { grid-template-columns: 1fr 1fr; gap: var(--b2) var(--b3); }
.anket--yatay .anket__secenekler { grid-template-columns: 1fr 1fr; }

/* Koyu kutu */
.kutu--koyu .anket__satir .anket__bar { background: rgba(255,255,255,.14); }
.kutu--koyu .anket__adim,
.kutu--koyu .anket__adet,
.kutu--koyu .anket__durum,
.kutu--koyu .anket__not { color: rgba(255,255,255,.7); }


/* =====================================================================
   4.x CANLI ANLATIM
   ---------------------------------------------------------------------
   Zaman çizgisi soldan akar, saatler hizalı durur: okur gözünü sola
   sabitleyip aşağı iner. Yanıp sönen nokta yalnızca gerçekten süren
   anlatımda vardır — "canlı" etiketi kapanmış bir yayında yanıltıcıdır.
   ===================================================================== */
.canli { display: grid; gap: var(--b3); }
.canli__ust {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--b2) var(--b3);
  padding-bottom: var(--b2); border-bottom: 1px solid var(--cizgi);
}
.canli__durum {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 999px;
  font-size: var(--fs-mini); font-weight: 800; letter-spacing: .05em;
}
.canli__durum--canli { background: var(--marka); color: #fff; }
.canli__durum--duraklatildi { background: var(--vurgu-zemin); color: #9a5b12; }
.canli__durum--bitti { background: var(--zemin-2); color: var(--yazi-3); }
.canli__nokta {
  width: 7px; height: 7px; border-radius: 50%; background: #fff;
  animation: canliYanip 1.6s ease-in-out infinite;
}
@keyframes canliYanip { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }
@media (prefers-reduced-motion: reduce) {
  /* Yanıp sönen öge bazı okurlarda baş dönmesi ve odaklanma güçlüğü
     yapar; hareketi azaltılmış tercihte nokta sabit kalır. */
  .canli__nokta { animation: none; }
}
.canli__sayac, .canli__bitti { font-size: var(--fs-mini); color: var(--yazi-3); }
.canli__ozet {
  margin: 0 0 var(--b3); font-size: var(--fs-kucuk);
  color: var(--yazi-2); line-height: 1.55;
}

/* "N yeni giriş" — yeni girişler kendiliğinden eklenmez */
.canli__yeni {
  display: block; width: 100%; padding: 9px var(--b3);
  border: 1px solid var(--marka); border-radius: var(--r2);
  background: var(--marka-acik, var(--zemin-1)); color: var(--marka);
  font: inherit; font-size: var(--fs-kucuk); font-weight: 700; cursor: pointer;
}
.canli__yeni:hover { background: var(--marka); color: #fff; }

.canli__liste {
  list-style: none; margin: 0; padding: 0 0 0 var(--b4);
  display: grid; gap: var(--b4); position: relative;
}
.canli__liste::before {
  content: ''; position: absolute; left: 4px; top: 8px; bottom: 8px;
  width: 2px; background: var(--cizgi);
}
.canli__oge { position: relative; display: grid; gap: 4px; }
.canli__oge::before {
  content: ''; position: absolute; left: calc(-1 * var(--b4) + 1px); top: 7px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--zemin-0); border: 2px solid var(--cizgi);
}
.canli__oge--onemli::before { background: var(--marka); border-color: var(--marka); }
.canli__saat {
  font-size: var(--fs-mini); font-weight: 800; color: var(--yazi-3);
  font-variant-numeric: tabular-nums;
}
.canli__oge--onemli .canli__saat { color: var(--marka); }
.canli__govde { display: grid; gap: 4px; }
.canli__baslik { font-size: var(--fs-kucuk); line-height: 1.35; }
.canli__metin {
  margin: 0; font-size: var(--fs-kucuk); color: var(--yazi-2); line-height: 1.55;
}
.canli__gorsel { width: 100%; height: auto; border-radius: var(--r2); margin-top: 4px; }
.canli__yazar { font-size: var(--fs-mini); color: var(--yazi-3); }

/* Düzeltme izi — giriş silinmez, ne değiştiği yazılır */
.canli__duzeltme {
  margin: 4px 0 0; padding: var(--b2) var(--b3);
  background: var(--vurgu-zemin); border-left: 3px solid #9a5b12;
  border-radius: 0 var(--r1, 4px) var(--r1, 4px) 0;
  font-size: var(--fs-mini); color: var(--yazi-2); line-height: 1.5;
}
.canli__duzeltme-etiket { font-weight: 800; color: #9a5b12; letter-spacing: .04em; }
.canli__alt { margin: 0; font-size: var(--fs-mini); }
.canli__alt a { color: var(--marka); font-weight: 700; }

/* Kart listesi — her giriş kendi çerçevesinde, çizgi yok */
.canli--kart .canli__liste { padding-left: 0; gap: var(--b3); }
.canli--kart .canli__liste::before { display: none; }
.canli--kart .canli__oge {
  padding: var(--b3); border: 1px solid var(--cizgi); border-radius: var(--r2);
  background: var(--zemin-1);
}
.canli--kart .canli__oge::before { display: none; }
.canli--kart .canli__oge--onemli { border-left: 3px solid var(--marka); }

/* Kompakt — yan sütun; yazar satırı gizlenir, aralık daralır */
.canli--kompakt .canli__liste { gap: var(--b3); padding-left: var(--b3); }
.canli--kompakt .canli__liste::before { left: 3px; }
.canli--kompakt .canli__oge::before { left: calc(-1 * var(--b3) + 1px); }
.canli--kompakt .canli__metin {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Özet + tam liste */
.canli--ozet .canli__liste { gap: var(--b4); }

/* Koyu kutu */
.kutu--koyu .canli__baslik { color: #fff; }
.kutu--koyu .canli__metin { color: rgba(255,255,255,.82); }
.kutu--koyu .canli__saat,
.kutu--koyu .canli__yazar,
.kutu--koyu .canli__sayac,
.kutu--koyu .canli__ozet { color: rgba(255,255,255,.7); }
.kutu--koyu .canli__liste::before,
.kutu--koyu .canli__ust { border-color: rgba(255,255,255,.14); }
.kutu--koyu .canli__oge::before {
  background: var(--lacivert); border-color: rgba(255,255,255,.3);
}
.kutu--koyu .canli--kart .canli__oge { background: rgba(255,255,255,.06); }

/* Sonradan eklenen giriş kısa süre vurgulanır: okur neyin yeni geldiğini
   görmeli, ama vurgu kalıcı olursa liste alacalı bulacalı olur. */
.canli__oge--yeni { animation: canliYeni 2.4s ease-out 1; }
@keyframes canliYeni {
  0% { background: var(--marka-acik, var(--vurgu-zemin)); }
  100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) { .canli__oge--yeni { animation: none; } }


/* =====================================================================
   4.x AKARYAKIT FİYATLARI
   ---------------------------------------------------------------------
   Değişim yönü önce işaretle (▲ ▼ +/-), sonra renkle anlatılır: renk
   körlüğünde yeşil ve kırmızı ayırt edilmez, işaret renkten bağımsız
   okunur.
   ===================================================================== */
.akaryakit { display: grid; gap: var(--b3); }
.akaryakit__ust {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 4px var(--b3); margin: 0;
  padding-bottom: var(--b2); border-bottom: 1px solid var(--cizgi);
}
.akaryakit__il { font-weight: 700; font-size: var(--fs-kucuk); }
.akaryakit__ust time { font-size: var(--fs-mini); color: var(--yazi-3); }
.akaryakit__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--b2); }
.akaryakit__oge {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: baseline; gap: var(--b2) var(--b3);
  padding: var(--b2) 0; border-bottom: 1px solid var(--cizgi);
}
.akaryakit__oge:last-child { border-bottom: 0; }
.akaryakit__ad { font-size: var(--fs-kucuk); color: var(--yazi-2); }
.akaryakit__fiyat { font-size: var(--fs-orta); font-variant-numeric: tabular-nums; }
.akaryakit__fiyat small {
  font-size: var(--fs-mini); font-weight: 400; color: var(--yazi-3);
}
.akaryakit__fark {
  font-size: var(--fs-mini); font-weight: 700;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.akaryakit__oge--artti  .akaryakit__fark { color: var(--marka); }
.akaryakit__oge--azaldi .akaryakit__fark { color: var(--yesil, #1a7f37); }
.akaryakit__oge--ayni   .akaryakit__fark { color: var(--yazi-3); }
.akaryakit__kaynak { margin: 0; font-size: var(--fs-mini); color: var(--yazi-3); }
.akaryakit__uyari {
  margin: 0; padding: var(--b3) var(--b4);
  background: var(--vurgu-zemin); border-left: 3px solid #9a5b12;
  border-radius: 0 var(--r2) var(--r2) 0;
  font-size: var(--fs-kucuk); color: var(--yazi-2); line-height: 1.5;
}

/* Kart — her yakıt kendi kutusunda, yan yana */
.akaryakit--kart .akaryakit__liste {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.akaryakit--kart .akaryakit__oge {
  grid-template-columns: 1fr; text-align: center; gap: 2px;
  padding: var(--b3); border: 1px solid var(--cizgi);
  border-radius: var(--r2); background: var(--zemin-1);
}

/* Şerit — tek satır, dar alanlar için */
.akaryakit--serit .akaryakit__liste { display: flex; flex-wrap: wrap; gap: var(--b2) var(--b4); }
.akaryakit--serit .akaryakit__oge {
  display: flex; align-items: baseline; gap: 6px; padding: 0; border: 0;
}
.akaryakit--serit .akaryakit__fiyat { font-size: var(--fs-kucuk); }
.akaryakit--serit .akaryakit__fiyat small { display: none; }

/* Tek yakıt — büyük rakam */
.akaryakit--tek .akaryakit__oge { grid-template-columns: 1fr auto; }
.akaryakit--tek .akaryakit__fiyat { font-size: var(--fs-buyuk); }

/* Koyu kutu */
.kutu--koyu .akaryakit__il,
.kutu--koyu .akaryakit__fiyat { color: #fff; }
.kutu--koyu .akaryakit__ad,
.kutu--koyu .akaryakit__kaynak,
.kutu--koyu .akaryakit__ust time { color: rgba(255,255,255,.72); }
.kutu--koyu .akaryakit__oge,
.kutu--koyu .akaryakit__ust { border-color: rgba(255,255,255,.14); }
.kutu--koyu .akaryakit--kart .akaryakit__oge { background: rgba(255,255,255,.06); }


/* =====================================================================
   4.x DOĞRULUK KONTROLÜ
   ---------------------------------------------------------------------
   Karar rozeti renkle DESTEKLENİR ama renkle ANLATILMAZ: metnin kendisi
   ("YANLIŞ", "KANIT YETERSİZ") kararı taşır. Renk körlüğünde ya da
   siyah-beyaz baskıda karar yine okunur.

   "Kanıt yetersiz" nötr gridir, kırmızı değil: iddianın yanlış olduğunu
   söylemiyoruz, doğrulayacak belge bulunmadığını söylüyoruz.
   ===================================================================== */
.dogruluk { display: grid; gap: var(--b3); }
.dogruluk__ust {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--b2) var(--b3);
}
.dogruluk__karar {
  display: inline-block; padding: 4px 11px; border-radius: 999px;
  font-size: var(--fs-mini); font-weight: 800; letter-spacing: .05em;
  white-space: nowrap;
}
.dogruluk__karar--dogru    { background: #0f7a3d; color: #fff; }
.dogruluk__karar--kismen   { background: #9a5b12; color: #fff; }
.dogruluk__karar--yanlis   { background: #b42318; color: #fff; }
.dogruluk__karar--yetersiz { background: var(--zemin-2); color: var(--yazi-2); }
.dogruluk__sahip { font-size: var(--fs-mini); color: var(--yazi-3); }
.dogruluk__iddia {
  margin: 0; padding: 0 0 0 var(--b3);
  border-left: 3px solid var(--cizgi);
  font-size: var(--fs-orta); font-weight: 600; line-height: 1.45;
}
.dogruluk__ozet {
  margin: 0; font-size: var(--fs-kucuk); color: var(--yazi-2); line-height: 1.6;
}
.dogruluk__kaynaklar { font-size: var(--fs-mini); color: var(--yazi-2); }
.dogruluk__kaynaklar b {
  display: block; margin-bottom: 4px; color: var(--yazi-3);
  text-transform: uppercase; letter-spacing: .04em;
}
.dogruluk__kaynaklar ol { margin: 0; padding-left: 1.2em; display: grid; gap: 3px; }
.dogruluk__kaynaklar a { color: var(--marka); }
.dogruluk__kunye {
  margin: 0; padding-top: var(--b2); border-top: 1px solid var(--cizgi);
  font-size: var(--fs-mini); color: var(--yazi-3);
}
.dogruluk__kunye a { color: inherit; font-weight: 700; }

/* Büyük karar kartı — rozet ve iddia öne çıkar */
.dogruluk--kart .dogruluk__karar { font-size: var(--fs-kucuk); padding: 6px 14px; }
.dogruluk--kart .dogruluk__iddia { font-size: var(--fs-buyuk); font-weight: 700; }

/* Satır içi — özet yok, tek satırlık bir işaret */
.dogruluk--satir {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--b2) var(--b3);
  padding: var(--b2) var(--b3);
  border: 1px solid var(--cizgi); border-radius: var(--r2);
  background: var(--zemin-1);
}
.dogruluk--satir .dogruluk__iddia {
  flex: 1 1 220px; border: 0; padding: 0; font-size: var(--fs-kucuk); font-weight: 600;
}
.dogruluk--satir .dogruluk__kaynaklar,
.dogruluk--satir .dogruluk__kunye { flex: 1 1 100%; }
.dogruluk--satir .dogruluk__kunye { border: 0; padding: 0; }

/* Haber içi kutu */
.dogruluk--gomulu .dogruluk__iddia { font-size: var(--fs-kucuk); }

/* Liste sürümü */
.dogruluk-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--b2); }
.dogruluk-liste__oge {
  display: grid; gap: 3px;
  padding: var(--b2) 0; border-bottom: 1px solid var(--cizgi);
}
.dogruluk-liste__oge:last-child { border-bottom: 0; }
.dogruluk-liste__oge > a {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--b2);
  color: inherit; text-decoration: none;
}
.dogruluk-liste__oge > a:hover .dogruluk-liste__iddia { color: var(--marka); }
.dogruluk-liste__iddia { flex: 1 1 160px; font-size: var(--fs-kucuk); line-height: 1.4; }
.dogruluk-liste__tarih { font-size: var(--fs-mini); color: var(--yazi-3); }

/* Koyu kutu */
.kutu--koyu .dogruluk__iddia { color: #fff; border-left-color: rgba(255,255,255,.2); }
.kutu--koyu .dogruluk__ozet,
.kutu--koyu .dogruluk__kaynaklar { color: rgba(255,255,255,.82); }
.kutu--koyu .dogruluk__sahip,
.kutu--koyu .dogruluk__kunye { color: rgba(255,255,255,.7); }
.kutu--koyu .dogruluk__kunye { border-top-color: rgba(255,255,255,.14); }
.kutu--koyu .dogruluk__karar--yetersiz { background: rgba(255,255,255,.14); color: #fff; }


/* =====================================================================
   4.x BU TARİHTE
   ---------------------------------------------------------------------
   Yıl rozeti her kayıtta durur ve göze ilk o çarpar: arşiv haberinin
   bugünün haberiyle karıştırılması, düzeltme gerektiren bir yanılgıdır.
   ===================================================================== */
.butarihte { display: grid; gap: var(--b3); }
.butarihte__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--b3); }
.butarihte__oge {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: var(--b3); align-items: start;
  padding-bottom: var(--b3); border-bottom: 1px solid var(--cizgi);
}
.butarihte__oge:last-child { border-bottom: 0; padding-bottom: 0; }
.butarihte__yil {
  padding: 3px 8px; border-radius: var(--r1, 4px);
  background: var(--zemin-2); color: var(--yazi-2);
  font-size: var(--fs-mini); font-weight: 800;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.butarihte__govde { display: grid; gap: 3px; min-width: 0; }
.butarihte__govde img { width: 100%; height: auto; border-radius: var(--r2); }
.butarihte__kat {
  font-size: var(--fs-mini); font-weight: 800; color: var(--ie, var(--marka));
  text-transform: uppercase; letter-spacing: .04em;
}
.butarihte__baslik { font-size: var(--fs-kucuk); line-height: 1.35; }
.butarihte__tarih { font-size: var(--fs-mini); color: var(--yazi-3); }

/* Kart — görselli, yıl rozeti üstte */
.butarihte--kart .butarihte__liste {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.butarihte--kart .butarihte__oge {
  grid-template-columns: 1fr; gap: var(--b2);
  padding: 0; border-bottom: 0;
}
.butarihte--kart .butarihte__yil { justify-self: start; }

/* Tek haber — büyük görsel */
.butarihte--tek .butarihte__oge { grid-template-columns: 1fr; gap: var(--b2); }
.butarihte--tek .butarihte__yil { justify-self: start; }
.butarihte--tek .butarihte__baslik { font-size: var(--fs-orta); }

/* Koyu kutu */
.kutu--koyu .butarihte__baslik { color: #fff; }
.kutu--koyu .butarihte__tarih { color: rgba(255,255,255,.7); }
.kutu--koyu .butarihte__oge { border-bottom-color: rgba(255,255,255,.14); }
.kutu--koyu .butarihte__yil { background: rgba(255,255,255,.14); color: #fff; }


/* =====================================================================
   4.x SESLİ DİNLE
   ---------------------------------------------------------------------
   Oynat düğmesi ögenin en belirgin parçasıdır; hız seçimi ve ilerleme
   ona eşlik eder, onu bastırmaz.
   ===================================================================== */
.ses { display: grid; gap: var(--b2); }
.ses__satir { display: flex; align-items: center; gap: var(--b3); }
.ses__oynat {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border: 0; border-radius: 999px;
  background: var(--marka); color: #fff;
  font: inherit; font-size: var(--fs-kucuk); font-weight: 700; cursor: pointer;
  white-space: nowrap;
}
.ses__oynat:hover { filter: brightness(1.08); }
.ses__oynat svg { display: block; fill: currentColor; }
.ses__ilerleme {
  flex: 1 1 60px; height: 5px; min-width: 40px;
  border-radius: 999px; background: var(--zemin-2); overflow: hidden;
}
.ses__ilerleme > span {
  display: block; width: 0; height: 100%;
  background: var(--marka); border-radius: 999px; transition: width .2s linear;
}
.ses__hiz select {
  padding: 5px 8px; border: 1px solid var(--cizgi); border-radius: var(--r2);
  background: var(--zemin-0); color: var(--yazi-2);
  font: inherit; font-size: var(--fs-mini);
}
.ses__not {
  margin: 0; font-size: var(--fs-mini); color: var(--yazi-3); line-height: 1.45;
}

/* Satır içi — haber gövdesinin başında, tek satır */
.ses--satir .ses__not { display: none; }
.ses--satir .ses__oynat { padding: 6px 12px; }

/* Kart */
.ses--kart { gap: var(--b3); }

/* Yapışkan alt çubuk — ekranın altında sabit durur */
.ses--yapiskan {
  position: sticky; bottom: 0; z-index: 30;
  margin: var(--b4) calc(-1 * var(--b3)) 0;
  padding: var(--b3); gap: 6px;
  background: var(--zemin-0); border-top: 1px solid var(--cizgi);
  box-shadow: 0 -6px 18px rgba(0,0,0,.06);
}
.ses--yapiskan .ses__not { font-size: 10px; }

/* Koyu kutu */
.kutu--koyu .ses__not { color: rgba(255,255,255,.7); }
.kutu--koyu .ses__ilerleme { background: rgba(255,255,255,.18); }
.kutu--koyu .ses__hiz select {
  background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.2);
}


/* =====================================================================
   4.x OKUMA LİSTEM
   ===================================================================== */
.okuma { display: grid; gap: var(--b3); }
.okuma__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--b2); }
.okuma__oge {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--b2); align-items: start;
  padding-bottom: var(--b2); border-bottom: 1px solid var(--cizgi);
}
.okuma__oge:last-child { border-bottom: 0; padding-bottom: 0; }
.okuma__oge > a { display: grid; gap: 3px; color: inherit; text-decoration: none; min-width: 0; }
.okuma__oge > a:hover .okuma__baslik { color: var(--marka); }
.okuma__oge img { width: 100%; height: auto; border-radius: var(--r2); margin-bottom: 4px; }
.okuma__kat {
  font-size: var(--fs-mini); font-weight: 800; color: var(--ie, var(--marka));
  text-transform: uppercase; letter-spacing: .04em;
}
.okuma__baslik { font-size: var(--fs-kucuk); line-height: 1.35; }
/* Kaldır düğmesi göze batmaz ama bulunabilir: yıkıcı bir eylem, kazara
   basılmamalı; yine de listeyi yan sütunda düzenleyebilmek gerekir. */
.okuma__kaldir {
  width: 24px; height: 24px; padding: 0;
  border: 1px solid var(--cizgi); border-radius: 50%;
  background: none; color: var(--yazi-3);
  font-size: 15px; line-height: 1; cursor: pointer;
}
.okuma__kaldir:hover { border-color: var(--marka); color: var(--marka); }
.okuma__bos, .okuma__not {
  margin: 0; font-size: var(--fs-mini); color: var(--yazi-3); line-height: 1.5;
}
.okuma__alt { margin: 0; font-size: var(--fs-mini); }
.okuma__alt a { color: var(--marka); font-weight: 700; }

/* Kart — görselli */
.okuma--kart .okuma__liste { gap: var(--b3); }

/* Kompakt — sık satırlar, kategori gizli */
.okuma--kompakt .okuma__liste { gap: 0; }
.okuma--kompakt .okuma__oge { padding: 6px 0; }
.okuma--kompakt .okuma__kat { display: none; }

/* Koyu kutu */
.kutu--koyu .okuma__baslik { color: #fff; }
.kutu--koyu .okuma__bos,
.kutu--koyu .okuma__not { color: rgba(255,255,255,.7); }
.kutu--koyu .okuma__oge { border-bottom-color: rgba(255,255,255,.14); }
.kutu--koyu .okuma__kaldir { border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.7); }


/* =====================================================================
   4.x HİKÂYE (STORY)
   ---------------------------------------------------------------------
   Kapak halkaları yatay kayar; kaydırma kendi kutusunda kalır.
   ===================================================================== */
.hikaye { display: grid; gap: var(--b2); }
.hikaye__serit {
  list-style: none; margin: 0; padding: 4px 0;
  display: flex; gap: var(--b3); overflow-x: auto;
  scroll-snap-type: x proximity;
}
.hikaye__oge { flex: 0 0 auto; scroll-snap-align: start; }
.hikaye__kapak {
  display: grid; gap: 6px; justify-items: center; width: 78px;
  padding: 0; border: 0; background: none; cursor: pointer; color: inherit;
}
.hikaye__halka {
  display: block; width: 68px; height: 68px; border-radius: 50%;
  padding: 3px; background: var(--marka);
}
.hikaye__halka img {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--zemin-0);
}
.hikaye__ad {
  font-size: var(--fs-mini); line-height: 1.25; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 78px; color: var(--yazi-2);
}
.hikaye__kapak:hover .hikaye__ad { color: var(--marka); }
.hikaye__kapak:focus-visible .hikaye__halka { outline: 2px solid var(--marka); outline-offset: 2px; }

/* Kare kapaklar */
.hikaye--kare .hikaye__halka { border-radius: var(--r2); width: 72px; height: 72px; }
.hikaye--kare .hikaye__halka img { border-radius: var(--r2); }

/* Kutulu — yan sütun için dikey liste */
.hikaye--kutulu .hikaye__serit { flex-direction: column; overflow: visible; gap: var(--b2); }
.hikaye--kutulu .hikaye__kapak {
  grid-template-columns: auto minmax(0, 1fr); width: 100%;
  justify-items: start; align-items: center; gap: var(--b3);
}
.hikaye--kutulu .hikaye__halka { width: 46px; height: 46px; }
.hikaye--kutulu .hikaye__ad { max-width: none; text-align: left; font-size: var(--fs-kucuk); }

/* ---------------------------------------------------------------------
   Tam ekran oynatıcı
   --------------------------------------------------------------------- */
body.hikaye-acik { overflow: hidden; }
.hikaye-tam {
  /* Katman sayfanın TAMAMINI kaplamalı; yapışkan menü (--z-menu: 500)
     sabit sayı verilirse üstte kalıyor ve oynatıcının başlık çubuğunu
     kesiyordu. Kat değerleri tokens.css'te tanımlı, elle sayı yazmak
     bu tür çakışmaları davet ediyor. */
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: grid; place-items: center;
  background: rgba(9, 14, 24, .92); padding: var(--b3);
}
.hikaye-tam__kutu {
  position: relative; width: min(420px, 100%); height: min(760px, 92vh);
  display: grid; grid-template-rows: auto auto minmax(0, 1fr);
  background: #0b1220; border-radius: var(--r3); overflow: hidden;
}
.hikaye-tam__cubuk { display: flex; gap: 3px; padding: 10px 10px 0; }
.hikaye-tam__cubuk i {
  flex: 1; height: 3px; border-radius: 999px; background: rgba(255,255,255,.25);
}
.hikaye-tam__cubuk i.gecti { background: rgba(255,255,255,.85); }
.hikaye-tam__cubuk i.simdi { background: var(--marka); }
.hikaye-tam__ust {
  display: flex; align-items: center; gap: var(--b2);
  padding: 10px var(--b3); color: #fff;
}
.hikaye-tam__baslik { font-size: var(--fs-kucuk); font-weight: 700; flex: 1 1 auto; }
.hikaye-tam__durum {
  font-size: var(--fs-mini); color: rgba(255,255,255,.7);
  font-variant-numeric: tabular-nums;
}
.hikaye-tam__arac {
  width: 30px; height: 30px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: rgba(255,255,255,.14);
  color: #fff; cursor: pointer;
}
.hikaye-tam__arac svg { fill: currentColor; }
.hikaye-tam__arac:hover { background: rgba(255,255,255,.26); }
.hikaye-tam__govde { position: relative; min-height: 0; overflow: hidden; }
/* Görsel sarmalayıcısı (span.gorsel) kendi en-boy oranını dayatır;
   burada çerçeveyi doldurması gerekiyor, yoksa karenin altında boş
   siyah bir alan kalıyor. */
.hikaye-tam__govde .gorsel {
  position: absolute; inset: 0; display: block;
  aspect-ratio: auto; padding: 0; background: none;
}
.hikaye-tam__govde img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hikaye-tam__yazi {
  position: absolute; inset: auto 0 0 0; display: grid; gap: 6px;
  padding: var(--b5) var(--b4) var(--b4);
  background: linear-gradient(to top, rgba(0,0,0,.85), transparent);
  color: #fff;
}
.hikaye-tam__kat {
  font-size: var(--fs-mini); font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: rgba(255,255,255,.85);
}
.hikaye-tam__metin { margin: 0; font-size: var(--fs-orta); font-weight: 700; line-height: 1.3; }
.hikaye-tam__bag {
  justify-self: start; margin-top: 4px; padding: 7px 14px;
  border-radius: 999px; background: #fff; color: #111;
  font-size: var(--fs-kucuk); font-weight: 700; text-decoration: none;
}
/* İleri/geri düğmeleri her adımda görünür: jest tek başına yeterli değil. */
.hikaye-tam__ok {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: rgba(0,0,0,.45);
  color: #fff; cursor: pointer;
}
.hikaye-tam__ok svg { fill: currentColor; }
.hikaye-tam__ok:hover { background: rgba(0,0,0,.7); }
.hikaye-tam__ok--sol { left: 8px; }
.hikaye-tam__ok--sag { right: 8px; }
.hikaye-tam__ok:focus-visible,
.hikaye-tam__arac:focus-visible,
.hikaye-tam__bag:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }


/* =====================================================================
   4.x GAZETE MANŞETLERİ
   ---------------------------------------------------------------------
   Kapak görseli yoksa (varsayılan) gazetenin baş harfi gösterilir.
   Amaç boşluğu doldurmak değil, listenin okunur kalması: adlar tek
   sütunda hizalanınca göz kayıyor.
   ===================================================================== */
.gazete { display: grid; gap: var(--b3); }
.gazete__tarih { margin: 0; font-size: var(--fs-mini); color: var(--yazi-3); }
.gazete__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--b2); }
.gazete__oge { border-bottom: 1px solid var(--cizgi); }
.gazete__oge:last-child { border-bottom: 0; }
.gazete__oge > a {
  display: grid; grid-template-columns: 42px minmax(0, 1fr);
  gap: var(--b3); align-items: center;
  padding: var(--b2) 0; color: inherit; text-decoration: none;
}
.gazete__oge > a:hover .gazete__ad { color: var(--marka); }
.gazete__kapaksiz {
  display: grid; place-items: center; width: 42px; height: 54px;
  border: 1px solid var(--cizgi); border-radius: var(--r1, 4px);
  background: var(--zemin-1); color: var(--yazi-3);
  font-size: var(--fs-orta); font-weight: 800;
}
.gazete__kapak {
  width: 42px; height: 54px; object-fit: cover;
  border: 1px solid var(--cizgi); border-radius: var(--r1, 4px);
}
.gazete__bilgi { display: grid; gap: 2px; min-width: 0; }
.gazete__ad { font-size: var(--fs-kucuk); line-height: 1.25; }
.gazete__manset {
  font-size: var(--fs-mini); color: var(--yazi-2); line-height: 1.4;
}
.gazete__not {
  margin: 0; font-size: var(--fs-mini); color: var(--yazi-3); line-height: 1.45;
}

/* Izgara — kapaksız kutular yan yana */
.gazete--izgara .gazete__liste {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--b3);
}
.gazete--izgara .gazete__oge { border-bottom: 0; }
.gazete--izgara .gazete__oge > a {
  grid-template-columns: 1fr; gap: var(--b2); padding: var(--b3);
  border: 1px solid var(--cizgi); border-radius: var(--r2);
  background: var(--zemin-1); height: 100%;
}
.gazete--izgara .gazete__kapaksiz,
.gazete--izgara .gazete__kapak { width: 46px; height: 60px; }

/* Kompakt — yalnızca adlar, yan sütun için */
.gazete--kompakt .gazete__liste { gap: 0; }
.gazete--kompakt .gazete__oge > a { grid-template-columns: 1fr; padding: 7px 0; }
.gazete--kompakt .gazete__kapaksiz,
.gazete--kompakt .gazete__kapak { display: none; }
.gazete--kompakt .gazete__manset {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Koyu kutu */
.kutu--koyu .gazete__ad { color: #fff; }
.kutu--koyu .gazete__manset { color: rgba(255,255,255,.82); }
.kutu--koyu .gazete__tarih,
.kutu--koyu .gazete__not { color: rgba(255,255,255,.7); }
.kutu--koyu .gazete__oge { border-bottom-color: rgba(255,255,255,.14); }
.kutu--koyu .gazete__kapaksiz {
  background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.2);
}


/* =====================================================================
   4.x VEFAT İLANLARI
   ---------------------------------------------------------------------
   Ölçülü ve sade. Vefat ilanı reklam değildir: rozet, marka rengi,
   gölge, gradyan ya da "öne çıkan" vurgusu kullanılmaz. İlanları
   birbirinden ayıran tek şey ince bir çizgi ve boşluktur.

   Durum ve bilgi RENKLE anlatılmaz; her satırın kendi yazılı etiketi
   vardır ("Cenaze töreni", "Defin yeri"), böylece renk ayrımı
   yapamayan okur için de eksiksiz okunur.
   ===================================================================== */
.vefat-liste { display: grid; gap: var(--b4); }

.vefat {
  display: flex; gap: var(--b4); align-items: flex-start;
  padding-bottom: var(--b4); border-bottom: 1px solid var(--cizgi);
}
.vefat:last-of-type { padding-bottom: 0; border-bottom: 0; }
.vefat__ic { flex: 1 1 auto; min-width: 0; display: grid; gap: var(--b1); }

/* Fotoğraf yalnızca ayrı rızası varsa gelir (bkz. Veri.vefat). */
.vefat__foto { flex: 0 0 auto; }
.vefat__foto img {
  display: block; width: 96px; height: 120px; object-fit: cover;
  border: 1px solid var(--cizgi); border-radius: var(--r1);
}

.vefat__ad {
  margin: 0; font-family: var(--f-serif);
  font-size: var(--fs-orta); font-weight: var(--fw-kalin);
  line-height: var(--lh-sik); color: var(--yazi-1);
}
.vefat__ozet { margin: 0; font-size: var(--fs-kucuk); color: var(--yazi-2); }

.vefat__bilgi { display: grid; gap: 2px; margin-top: var(--b2); }
.vefat__satir {
  display: grid; grid-template-columns: 128px minmax(0, 1fr);
  gap: var(--b2); font-size: var(--fs-mini); line-height: var(--lh-normal);
}
.vefat__etiket { color: var(--yazi-3); }
.vefat__deger { color: var(--yazi-1); }

.vefat__bag { margin: var(--b2) 0 0; font-size: var(--fs-mini); }
.vefat__bag a { color: var(--yazi-2); text-decoration: underline; }
.vefat__bag a:hover { color: var(--marka); }

.vefat-liste__gizli { margin: 0; font-size: var(--fs-mini); }
.vefat-liste__gizli a { color: var(--yazi-2); text-decoration: underline; }
.vefat-liste__not {
  margin: 0; padding-top: var(--b3); border-top: 1px solid var(--cizgi);
  font-size: var(--fs-mini); color: var(--yazi-3);
  line-height: var(--lh-normal);
}

/* Sürüm 2 · Kart — ilanlar yan yana kutularda */
.vefat-liste--kart { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.vefat-liste--kart .vefat {
  padding: var(--b4); border: 1px solid var(--cizgi);
  border-radius: var(--r2); background: var(--kart);
}
.vefat-liste--kart .vefat:last-of-type {
  padding: var(--b4); border-bottom: 1px solid var(--cizgi);
}
.vefat-liste--kart .vefat-liste__gizli,
.vefat-liste--kart .vefat-liste__not { grid-column: 1 / -1; }

/* Sürüm 3 · Kompakt yan sütun — etiket ve değer alt alta */
.vefat-liste--kompakt { gap: var(--b3); }
.vefat-liste--kompakt .vefat { padding-bottom: var(--b3); }
.vefat-liste--kompakt .vefat__ad { font-size: var(--fs-kucuk); }
.vefat-liste--kompakt .vefat__satir { grid-template-columns: 1fr; gap: 0; }

/* Sürüm 4 · Tek ilan */
.vefat-liste--tek .vefat__ad { font-size: var(--fs-h3); }

@media (max-width: 640px) {
  .vefat__satir { grid-template-columns: 1fr; gap: 0; }
}

/* Koyu kutu */
.kutu--koyu .vefat { border-bottom-color: rgba(255,255,255,.14); }
.kutu--koyu .vefat__ad,
.kutu--koyu .vefat__deger { color: #fff; }
.kutu--koyu .vefat__ozet { color: rgba(255,255,255,.82); }
.kutu--koyu .vefat__etiket,
.kutu--koyu .vefat-liste__not { color: rgba(255,255,255,.7); }
.kutu--koyu .vefat-liste__not { border-top-color: rgba(255,255,255,.14); }
.kutu--koyu .vefat__bag a,
.kutu--koyu .vefat-liste__gizli a { color: rgba(255,255,255,.85); }


/* =====================================================================
   4.x SERİ İLANLAR
   ---------------------------------------------------------------------
   İletişim satırı maskeli hâlde de açık hâlde de AYNI satırı kaplar:
   numaraya basınca liste zıplarsa okur baktığı ilanı kaybeder.

   Ticari/bireysel ayrımı renkle DEĞİL sözcükle taşınır (renk körlüğü);
   buradaki renk yalnızca sözcüğü destekler.
   ===================================================================== */
.seri-ilan { display: grid; gap: var(--b3); }
.seri-ilan__liste {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 0;
}
.seri-ilan__oge {
  display: grid; gap: var(--b2);
  padding: var(--b3) 0; border-bottom: 1px solid var(--cizgi);
}
.seri-ilan__oge:last-child { border-bottom: 0; }

.seri-ilan__ust {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--b2);
}
.seri-ilan__kat {
  font-size: var(--fs-mikro); font-weight: var(--fw-siyah);
  color: var(--marka); text-transform: uppercase; letter-spacing: .04em;
}
.seri-ilan__tur {
  font-size: var(--fs-mikro); color: var(--yazi-3);
  border: 1px solid var(--cizgi); border-radius: var(--rtam);
  padding: 1px var(--b2);
}
.seri-ilan__fiyat {
  margin-left: auto; font-size: var(--fs-kucuk);
  font-weight: var(--fw-kalin); color: var(--yazi-1);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* Fiyatı bilinmeyen ilan: sıfır TL yazılmaz, "Belirtilmemiş" yazılır ve
   sayı gibi görünmesin diye tonu düşürülür. */
.seri-ilan__fiyat--yok {
  font-weight: var(--fw-normal); color: var(--yazi-3);
}

.seri-ilan__baslik {
  font-size: var(--fs-kucuk); line-height: var(--lh-sik);
  font-weight: var(--fw-kalin); color: var(--yazi-1);
}
.seri-ilan__aciklama {
  margin: 0; font-size: var(--fs-mini); color: var(--yazi-2);
  line-height: var(--lh-normal);
}
.seri-ilan__alt {
  display: flex; flex-wrap: wrap; gap: var(--b2);
  font-size: var(--fs-mini); color: var(--yazi-3);
}
.seri-ilan__tarih { font-variant-numeric: tabular-nums; }

/* --- İletişim ------------------------------------------------------- */
.seri-ilan__iletisim {
  display: flex; flex-wrap: wrap; gap: var(--b2) var(--b3);
}
.seri-ilan__kutu {
  display: inline-flex; align-items: center; flex-wrap: wrap;
  gap: var(--b1) var(--b2); min-height: 26px;
}
.seri-ilan__maske {
  font-family: var(--f-mono); font-size: var(--fs-mini);
  color: var(--yazi-3); letter-spacing: .02em;
}
.seri-ilan__goster {
  border: 1px solid var(--cizgi); border-radius: var(--r2);
  background: var(--kart-2); color: var(--marka);
  font-size: var(--fs-mikro); font-weight: var(--fw-orta);
  padding: 2px var(--b2); cursor: pointer;
  transition: background var(--gecis-hizli), color var(--gecis-hizli);
}
.seri-ilan__goster:hover { background: var(--marka); color: #fff; }
.seri-ilan__bag {
  font-family: var(--f-mono); font-size: var(--fs-mini);
  color: var(--yazi-1); font-weight: var(--fw-orta);
}
a.seri-ilan__bag { color: var(--marka); text-decoration: underline; }
/* Açıldıktan sonra NEDEN gizlendiği yazılır: sessiz bir kısıtlama,
   kırık bir arayüz gibi görünür. */
.seri-ilan__neden {
  flex: 1 1 100%; font-size: var(--fs-mikro); color: var(--yazi-3);
  line-height: var(--lh-normal);
}

/* --- 6563 m.3 sağlayıcı künyesi ------------------------------------- */
.seri-ilan__saglayici {
  display: grid; gap: 2px;
  padding: var(--b2); border-left: 3px solid var(--cizgi-koyu);
  background: var(--kart-2);
  font-size: var(--fs-mikro); color: var(--yazi-2);
  line-height: var(--lh-normal);
}

.seri-ilan__gizli { margin: 0; font-size: var(--fs-mini); }
.seri-ilan__gizli a { color: var(--marka); font-weight: var(--fw-orta); }
.seri-ilan__not {
  margin: 0; font-size: var(--fs-mikro); color: var(--yazi-3);
  line-height: var(--lh-normal);
}

/* --- Sürüm 2 · kart ızgara ------------------------------------------ */
.seri-ilan--izgara .seri-ilan__liste {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--b3);
}
.seri-ilan--izgara .seri-ilan__oge {
  border-bottom: 0; padding: var(--b3);
  border: 1px solid var(--cizgi); border-radius: var(--r3);
  background: var(--kart); align-content: start;
}

/* --- Sürüm 3 · kompakt (yan sütun) ---------------------------------- */
.seri-ilan--kompakt .seri-ilan__oge { padding: var(--b2) 0; gap: var(--b1); }
.seri-ilan--kompakt .seri-ilan__tur { display: none; }
.seri-ilan--kompakt .seri-ilan__baslik {
  font-size: var(--fs-mini); line-height: var(--lh-sik);
}

/* --- Sürüm 4 · tek kategori ----------------------------------------- */
.seri-ilan--tekkat .seri-ilan__kat { display: none; }

/* Koyu kutu */
.kutu--koyu .seri-ilan__baslik { color: #fff; }
.kutu--koyu .seri-ilan__aciklama { color: rgba(255,255,255,.82); }
.kutu--koyu .seri-ilan__alt,
.kutu--koyu .seri-ilan__not,
.kutu--koyu .seri-ilan__maske { color: rgba(255,255,255,.7); }
.kutu--koyu .seri-ilan__oge { border-bottom-color: rgba(255,255,255,.14); }
.kutu--koyu .seri-ilan__saglayici {
  background: rgba(255,255,255,.06); color: rgba(255,255,255,.82);
  border-left-color: rgba(255,255,255,.24);
}


/* =====================================================================
   4.x RÖPORTAJ  (modül listesi)
   ---------------------------------------------------------------------
   Listede konuk ve röportajı yapan birlikte görünür: söyleşinin
   değeri "kim konuştu" kadar "kim sordu"dur. Konuk fotoğrafı lisans
   olmadan basılmadığı için varsayılan görünüm baş harf dairesidir.
   ===================================================================== */
.roportaj { display: grid; gap: var(--b3); }
.roportaj__liste {
  list-style: none; margin: 0; padding: 0; display: grid; gap: var(--b3);
}
.roportaj__oge { padding-bottom: var(--b3); border-bottom: 1px solid var(--cizgi); }
.roportaj__oge:last-child { border-bottom: 0; padding-bottom: 0; }
.roportaj__bag { display: grid; gap: var(--b2); color: inherit; text-decoration: none; }
.roportaj__bag:hover .roportaj__baslik { color: var(--marka); }
.roportaj__konuk {
  display: grid; grid-template-columns: 34px minmax(0, 1fr);
  gap: var(--b2); align-items: center;
}
.roportaj__harf {
  display: grid; place-items: center; width: 34px; height: 34px;
  border: 1px solid var(--cizgi); border-radius: var(--rtam);
  background: var(--kart-2); color: var(--yazi-2);
  font-size: var(--fs-kucuk); font-weight: var(--fw-siyah);
}
.roportaj__konuk-bilgi { display: grid; min-width: 0; }
.roportaj__konuk-ad { font-size: var(--fs-kucuk); line-height: 1.2; }
.roportaj__konuk-gorev { font-size: var(--fs-mini); color: var(--yazi-3); line-height: 1.3; }
.roportaj__baslik {
  font-size: var(--fs-normal); font-weight: var(--fw-kalin); line-height: 1.3;
}
.roportaj__spot { font-size: var(--fs-kucuk); color: var(--yazi-2); line-height: 1.45; }
.roportaj__meta {
  display: flex; align-items: center; gap: var(--b1);
  font-size: var(--fs-mini); color: var(--yazi-3);
}
.roportaj__sure { display: inline-flex; align-items: center; gap: 3px; }
.roportaj__meta svg { fill: currentColor; }
.roportaj__yapan { margin: 0; font-size: var(--fs-mini); color: var(--yazi-2); }
.roportaj__yapan a { color: inherit; text-decoration: underline; }
.roportaj__gizli { margin: 0; font-size: var(--fs-mini); }
.roportaj__gizli a { color: var(--marka); font-weight: var(--fw-kalin); }

/* Kart — spot görünür, öğeler kutulanır */
.roportaj--kart .roportaj__oge {
  padding: var(--b3); border: 1px solid var(--cizgi);
  border-radius: var(--r2); background: var(--kart);
}
.roportaj--kart .roportaj__oge:last-child { padding: var(--b3); border: 1px solid var(--cizgi); }

/* Kompakt — yan sütun için: görev ve spot gizlenir, başlık kalır */
.roportaj--kompakt .roportaj__liste { gap: 0; }
.roportaj--kompakt .roportaj__oge { padding: var(--b2) 0; }
.roportaj--kompakt .roportaj__konuk { grid-template-columns: 28px minmax(0, 1fr); }
.roportaj--kompakt .roportaj__harf { width: 28px; height: 28px; font-size: var(--fs-mini); }
.roportaj--kompakt .roportaj__konuk-gorev,
.roportaj--kompakt .roportaj__spot { display: none; }

/* Koyu kutu */
.kutu--koyu .roportaj__konuk-ad,
.kutu--koyu .roportaj__baslik { color: #fff; }
.kutu--koyu .roportaj__konuk-gorev,
.kutu--koyu .roportaj__meta { color: rgba(255,255,255,.7); }
.kutu--koyu .roportaj__spot,
.kutu--koyu .roportaj__yapan { color: rgba(255,255,255,.82); }
.kutu--koyu .roportaj__oge { border-bottom-color: rgba(255,255,255,.14); }
.kutu--koyu .roportaj__harf {
  background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.2);
}


/* =====================================================================
   4.x FİRMA REHBERİ
   ---------------------------------------------------------------------
   Durum etiketi METNİ taşır, renk yalnızca destekler: renk körlüğünde
   yeşil ve kırmızı ayırt edilmez ama "ŞU AN AÇIK" yazısı okunur. Bu
   yüzden etiketin çerçevesi de currentColor'dan gelir — renk kaybolsa
   bile etiket bir etiket gibi görünmeye devam eder.
   ===================================================================== */
.rehber { display: grid; gap: var(--b3); }
.rehber__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.rehber__oge {
  display: grid; gap: 4px; padding: var(--b3) 0;
  border-bottom: 1px solid var(--cizgi);
}
.rehber__oge:last-child { border-bottom: 0; }

.rehber__ust {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--b2);
}
.rehber__ad {
  font-size: var(--fs-kucuk); font-weight: var(--fw-kalin);
  line-height: 1.3; color: inherit; text-decoration: none;
}
a.rehber__ad:hover { color: var(--marka); }

.rehber__durum {
  padding: 2px 6px; border: 1px solid currentColor; border-radius: var(--r1);
  font-size: var(--fs-mikro); font-weight: var(--fw-siyah);
  letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.rehber__durum--acik       { color: var(--yukari); }
.rehber__durum--kapali     { color: var(--asagi); }
.rehber__durum--bilinmiyor { color: var(--yazi-3); }

.rehber__kunye { font-size: var(--fs-mini); color: var(--yazi-3); }
.rehber__adres {
  font-size: var(--fs-mini); color: var(--yazi-2); line-height: 1.45;
}
.rehber__alt {
  display: flex; flex-wrap: wrap; gap: var(--b3); font-size: var(--fs-mini);
}
.rehber__tel { color: var(--marka); font-weight: var(--fw-kalin); }
.rehber__harita { color: var(--yazi-2); text-decoration: underline; }
/* Bildirilmemiş bilgi bağ gibi görünmemeli: altı çizilmez, sönük durur. */
.rehber__tel--yok, .rehber__harita--yok {
  color: var(--yazi-3); font-weight: var(--fw-normal); text-decoration: none;
}

.rehber__saatler {
  margin: var(--b2) 0 0; display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 2px var(--b3); font-size: var(--fs-mini);
}
.rehber__saatler dt { color: var(--yazi-3); }
.rehber__saatler dd {
  margin: 0; color: var(--yazi-2); font-variant-numeric: tabular-nums;
}
.rehber__saatler .rehber__bugun {
  color: var(--yazi-1); font-weight: var(--fw-kalin);
}

.rehber__not, .rehber__kaynak {
  margin: 0; font-size: var(--fs-mini); color: var(--yazi-3); line-height: 1.5;
}
.rehber__kirpma {
  margin: 0; padding-top: var(--b2); border-top: 1px solid var(--cizgi);
  font-size: var(--fs-mini);
}
.rehber__kirpma a { color: var(--marka); font-weight: var(--fw-kalin); }

/* Kart — her firma kendi kutusunda */
.rehber--kart .rehber__liste { gap: var(--b3); }
.rehber--kart .rehber__oge {
  padding: var(--b3); border: 1px solid var(--cizgi);
  border-radius: var(--r2); background: var(--kart-2);
}

/* Kompakt — yan sütun. Satırlar sıkışır; gizlenen bir bilgi yoktur,
   adres ve telefon zaten basılmaz ve ad firmanın kendi kaydına gider. */
.rehber--kompakt .rehber__oge { padding: 7px 0; gap: 2px; }

/* Koyu kutu */
.kutu--koyu .rehber__ad { color: #fff; }
.kutu--koyu .rehber__adres { color: rgba(255,255,255,.82); }
.kutu--koyu .rehber__kunye,
.kutu--koyu .rehber__not,
.kutu--koyu .rehber__kaynak,
.kutu--koyu .rehber__saatler dt { color: rgba(255,255,255,.7); }
.kutu--koyu .rehber__saatler dd { color: rgba(255,255,255,.85); }
.kutu--koyu .rehber__saatler .rehber__bugun { color: #fff; }
.kutu--koyu .rehber__oge { border-bottom-color: rgba(255,255,255,.14); }


/* =====================================================================
   4.x BİYOGRAFİ (KİM KİMDİR)
   ---------------------------------------------------------------------
   Portre çoğu zaman yoktur (lisans dayanağı olmadan basılmaz); o zaman
   baş harfler gösterilir. Amaç boşluk doldurmak değil, satırların
   birbirine karışmaması.
   ===================================================================== */
.biyo { display: grid; gap: var(--b3); }
.biyo__ust {
  display: grid; grid-template-columns: 56px minmax(0, 1fr);
  gap: var(--b3); align-items: center;
}
.biyo__avatar {
  display: grid; place-items: center; width: 56px; height: 56px;
  border-radius: 50%; overflow: hidden;
  border: 1px solid var(--cizgi); background: var(--kart-2);
  color: var(--yazi-2); font-size: var(--fs-orta); font-weight: 800;
}
.biyo__avatar img { width: 100%; height: 100%; object-fit: cover; }
.biyo__kimlik { display: grid; gap: 2px; min-width: 0; }
.biyo__ad { margin: 0; font-size: var(--fs-orta); line-height: 1.25; }
.biyo__ad a { color: inherit; text-decoration: none; }
.biyo__ad a:hover { color: var(--marka); }
.biyo__gorev { font-size: var(--fs-mini); color: var(--yazi-2); }
.biyo__kunye {
  margin: 0; display: flex; flex-wrap: wrap; gap: var(--b1) var(--b3);
  font-size: var(--fs-mini); color: var(--yazi-2);
}
/* Yalnızca yıl gösterildiğinde bunun bir karar olduğu yazılı durur;
   rengi değil metni taşır (renk körlüğü). */
.biyo__dogum-not {
  display: block; font-style: normal;
  font-size: var(--fs-mikro); color: var(--yazi-3);
}
.biyo__ozet { margin: 0; font-size: var(--fs-kucuk); line-height: 1.6; }
.biyo__metin { display: grid; gap: var(--b3); }
.biyo__metin p {
  margin: 0; font-family: var(--f-serif);
  font-size: var(--fs-normal); line-height: var(--lh-genis);
}
.biyo__egitim, .biyo__kaynaklar {
  padding-top: var(--b3); border-top: 1px solid var(--cizgi);
  font-size: var(--fs-mini); color: var(--yazi-2);
}
.biyo__egitim b, .biyo__kaynaklar b {
  display: block; margin-bottom: var(--b2);
  font-size: var(--fs-mikro); text-transform: uppercase;
  letter-spacing: .05em; color: var(--yazi-3);
}
.biyo__egitim ul, .biyo__kaynaklar ol {
  margin: 0; padding-left: var(--b4); display: grid; gap: var(--b1);
  line-height: 1.5;
}
.biyo__egitim ul { list-style: none; padding-left: 0; }
.biyo__yil { color: var(--yazi-3); font-variant-numeric: tabular-nums; }
.biyo__kaynaklar a { color: var(--marka); }
.biyo__kaynaklar time { color: var(--yazi-3); }
.biyo__guncelleme, .biyo__kvkk {
  margin: 0; font-size: var(--fs-mikro); color: var(--yazi-3); line-height: 1.5;
}
.biyo__duzeltme { margin: 0; font-size: var(--fs-mini); }
.biyo__duzeltme a { color: var(--marka); font-weight: 700; }

/* Haber içi kutu — sol vurgulu kutunun içinde daralır */
.biyo--gomulu .biyo__metin { display: none; }
.biyo--gomulu .biyo__ust { grid-template-columns: 44px minmax(0, 1fr); }
.biyo--gomulu .biyo__avatar { width: 44px; height: 44px; font-size: var(--fs-kucuk); }

/* Liste / kart sürümleri */
.biyo-liste { display: grid; gap: var(--b3); }
.biyo-liste__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.biyo-liste__oge { border-bottom: 1px solid var(--cizgi); }
.biyo-liste__oge:last-child { border-bottom: 0; }
.biyo-liste__oge > a {
  display: grid; grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--b3); align-items: center;
  padding: var(--b2) 0; color: inherit; text-decoration: none;
}
.biyo-liste__oge > a:hover .biyo-liste__ad { color: var(--marka); }
.biyo-liste__avatar {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; overflow: hidden;
  border: 1px solid var(--cizgi); background: var(--kart-2);
  color: var(--yazi-2); font-size: var(--fs-kucuk); font-weight: 800;
}
.biyo-liste__avatar img { width: 100%; height: 100%; object-fit: cover; }
.biyo-liste__bilgi { display: grid; gap: 2px; min-width: 0; }
.biyo-liste__ad { font-size: var(--fs-kucuk); line-height: 1.3; }
.biyo-liste__gorev, .biyo-liste__ozet {
  font-size: var(--fs-mini); color: var(--yazi-2); line-height: 1.4;
}
.biyo-liste__kaynak { font-size: var(--fs-mikro); color: var(--yazi-3); }
.biyo-liste__gizli { margin: 0; font-size: var(--fs-mini); }
.biyo-liste__gizli a { color: var(--marka); font-weight: 700; }
.biyo-liste__kvkk {
  margin: 0; font-size: var(--fs-mikro); color: var(--yazi-3); line-height: 1.5;
}

/* Kart sürümü — özet de görünür, satırlar kutulanır */
.biyo-liste--kart .biyo-liste__liste { gap: var(--b3); }
.biyo-liste--kart .biyo-liste__oge { border-bottom: 0; }
.biyo-liste--kart .biyo-liste__oge > a {
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: start; padding: var(--b3);
  border: 1px solid var(--cizgi); border-radius: var(--r3);
  background: var(--kart-2);
}
.biyo-liste--kart .biyo-liste__avatar { width: 56px; height: 56px; }

/* Koyu kutu */
.kutu--koyu .biyo-liste__ad, .kutu--koyu .biyo__ad { color: #fff; }
.kutu--koyu .biyo-liste__gorev, .kutu--koyu .biyo-liste__ozet {
  color: rgba(255,255,255,.82);
}
.kutu--koyu .biyo-liste__oge { border-bottom-color: rgba(255,255,255,.14); }
.kutu--koyu .biyo-liste__avatar {
  background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.2);
}


/* =====================================================================
   4.x E-GAZETE  (modül)
   ---------------------------------------------------------------------
   Kapak dikey bir gazete sayfasıdır; kare 3:4 tutulur ve görsel
   `contain` ile yerleştirilir. `cover` kullanılsaydı sayfanın manşeti
   kırpılır, kapak tanınmaz olurdu.
   ===================================================================== */
.egazete { display: grid; gap: var(--b3); }

.egazete__izgara {
  display: grid; gap: var(--b3);
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
}

.egazete-kapak {
  display: grid; gap: var(--b2); color: inherit; text-decoration: none;
  min-width: 0;
}
.egazete-kapak__kare {
  position: relative; display: block;
  aspect-ratio: 3 / 4; background: var(--zemin-1, var(--kart-2));
  border: 1px solid var(--cizgi); border-radius: var(--r2);
  overflow: hidden;
}
.egazete-kapak__kare img {
  width: 100%; height: 100%; object-fit: contain; display: block;
}
.egazete-kapak:hover .egazete-kapak__kare { border-color: var(--marka); }
.egazete-kapak:focus-visible .egazete-kapak__kare { outline: 2px solid var(--marka); }

/* Açık sayının etiketi: durum renkle değil YAZIYLA anlatılır. */
.egazete-kapak__etiket {
  position: absolute; inset: auto 0 0 0;
  padding: 3px var(--b2);
  background: var(--marka); color: #fff;
  font-size: var(--fs-mikro); font-weight: var(--fw-kalin);
  text-align: center;
}
.egazete-kapak--acik .egazete-kapak__kare { border-color: var(--marka); }

.egazete-kapak__bilgi { display: grid; gap: 2px; min-width: 0; }
.egazete-kapak__tarih { font-size: var(--fs-kucuk); line-height: 1.25; }
.egazete-kapak__kunye { font-size: var(--fs-mini); color: var(--yazi-3); }

.egazete__not,
.egazete__gizli {
  margin: 0; font-size: var(--fs-mini); color: var(--yazi-3); line-height: 1.45;
}
.egazete__gizli a { color: var(--marka); }

/* Son sayı kartı — tek kapak, geniş */
.egazete--tek .egazete__izgara { grid-template-columns: 1fr; }
.egazete--tek .egazete-kapak__tarih { font-size: var(--fs-normal); }

/* Kompakt — görselsiz tarih listesi, dar sütun için */
.egazete--kompakt .egazete__liste {
  list-style: none; margin: 0; padding: 0; display: grid;
}
.egazete--kompakt .egazete__satir { border-bottom: 1px solid var(--cizgi); }
.egazete--kompakt .egazete__satir:last-child { border-bottom: 0; }
.egazete--kompakt .egazete__satir > a {
  display: flex; justify-content: space-between; gap: var(--b2);
  align-items: baseline; padding: 7px 0;
  color: inherit; text-decoration: none; font-size: var(--fs-kucuk);
}
.egazete--kompakt .egazete__satir > a:hover time { color: var(--marka); }
.egazete--kompakt .egazete__kunye {
  font-size: var(--fs-mini); color: var(--yazi-3); white-space: nowrap;
}

/* Koyu kutu */
.kutu--koyu .egazete-kapak__tarih { color: #fff; }
.kutu--koyu .egazete-kapak__kunye,
.kutu--koyu .egazete__not { color: rgba(255,255,255,.7); }
.kutu--koyu .egazete__satir { border-bottom-color: rgba(255,255,255,.14); }


/* =====================================================================
   4.x BURÇ YORUMLARI
   ---------------------------------------------------------------------
   Burç simgesi unicode işarettir; ekran okuyucuya burcun adı okunur
   (bkz. sablonlar.js › burcSimge). İşaret marka rengiyle basılır ama
   ANLAM RENKTE DEĞİLDİR: ad ve tarih aralığı her kartta metin olarak
   durur, renk körlüğü olan okur da aynı bilgiyi görür.

   "Eğlence amaçlıdır" notu her sürümde gövdenin içindedir; kutu
   dışına taşınmaz, çünkü modül yan sütunda tek başına da görünür.
   ===================================================================== */
.burc { display: grid; gap: var(--b3); }
.burc__tarih {
  margin: 0; font-size: var(--fs-mini); color: var(--yazi-3);
  font-variant-numeric: tabular-nums;
}
.burc__izgara {
  display: grid; gap: var(--b2);
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.burc__not,
.burc__uyari {
  margin: 0; font-size: var(--fs-mini); color: var(--yazi-3); line-height: 1.5;
}
/* Uyarı bir bilgi kutusudur: yalnız rengiyle değil, kenar çizgisi ve
   metniyle de ayrılır. */
.burc__uyari {
  padding: var(--b3); border-left: 3px solid var(--marka);
  border-radius: 0 var(--r2) var(--r2) 0;
  background: var(--vurgu-zemin); color: var(--yazi-1);
  font-size: var(--fs-kucuk); font-weight: 600;
}
.burc__gizli,
.burc__tumu { margin: 0; font-size: var(--fs-kucuk); }
.burc__gizli a,
.burc__tumu a { color: var(--marka); font-weight: 700; }

.burc-kart {
  display: grid; gap: 6px; padding: var(--b3);
  border: 1px solid var(--cizgi); border-radius: var(--r2);
  background: var(--kart-2); color: inherit; text-decoration: none;
}
a.burc-kart:hover .burc-kart__ad { color: var(--marka); }
a.burc-kart:focus-visible { outline: 2px solid var(--marka); outline-offset: 2px; }
.burc-kart__ust {
  display: grid; grid-template-columns: 26px minmax(0, 1fr);
  gap: var(--b2); align-items: center;
}
.burc-kart__kunye { display: grid; gap: 1px; min-width: 0; }
.burc__simge { font-size: var(--fs-h3); line-height: 1; color: var(--marka); }
.burc-kart__ad { font-size: var(--fs-kucuk); font-weight: 700; line-height: 1.2; }
.burc-kart__aralik { font-size: var(--fs-mikro); color: var(--yazi-3); }
.burc-kart__ozet {
  font-size: var(--fs-mini); color: var(--yazi-2); line-height: 1.45;
}

/* Şerit — yan yana kayan kartlar. Kaydırma çubuğu gizlenmez: okur
   listenin devam ettiğini görebilmeli. */
.burc--serit .burc__izgara {
  display: flex; gap: var(--b2); overflow-x: auto;
  padding-bottom: var(--b2); scroll-snap-type: x proximity;
}
.burc--serit .burc-kart {
  flex: 0 0 auto; width: 170px; scroll-snap-align: start;
}

/* Kompakt — yan sütun için tek sütun liste */
.burc--kompakt .burc__izgara { grid-template-columns: 1fr; gap: 0; }
.burc--kompakt .burc-kart {
  border: 0; border-bottom: 1px solid var(--cizgi); border-radius: 0;
  background: none; padding: var(--b2) 0;
}
.burc--kompakt .burc-kart:last-child { border-bottom: 0; }
.burc--kompakt .burc__simge { font-size: var(--fs-buyuk); }

/* Tek burç — dört başlıklı tam yorum */
.burc-detay { display: grid; gap: var(--b3); }
.burc-detay__ust {
  display: grid; grid-template-columns: 40px minmax(0, 1fr);
  gap: var(--b3); align-items: center;
}
.burc-detay__ust .burc__simge { font-size: var(--fs-h2); }
.burc-detay__kunye { display: grid; gap: 2px; min-width: 0; }
.burc-detay__ad { font-size: var(--fs-orta); line-height: 1.2; }
.burc-detay__aralik { font-size: var(--fs-mini); color: var(--yazi-3); }
.burc-detay__liste { margin: 0; display: grid; gap: var(--b2); }
.burc-detay__baslik {
  font-size: var(--fs-mikro); font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--marka);
}
.burc-detay__metin {
  margin: 0 0 var(--b2); font-size: var(--fs-kucuk);
  color: var(--yazi-1); line-height: 1.55;
}
/* Sağlık notu metnin hemen altındadır: tıbbi tavsiye izlenimi, metnin
   okunduğu yerde kırılmalı. */
.burc-detay__saglik-not {
  margin: 0; padding-top: var(--b2); border-top: 1px solid var(--cizgi);
  font-size: var(--fs-mini); color: var(--yazi-3); line-height: 1.5;
}

/* Koyu kutu */
.kutu--koyu .burc-kart {
  background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16);
}
.kutu--koyu .burc-kart__ad { color: #fff; }
.kutu--koyu .burc-kart__ozet { color: rgba(255,255,255,.82); }
.kutu--koyu .burc-kart__aralik,
.kutu--koyu .burc__tarih,
.kutu--koyu .burc__not { color: rgba(255,255,255,.7); }

@media (max-width: 640px) {
  .burc__izgara { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}


/* =====================================================================
   4.x PAYLAŞIM SAYACI  ·  .paysayac
   ---------------------------------------------------------------------
   Kırılım satırında ORAN METİNDİR, çubuk yalnızca yardımcıdır: renk
   körlüğü olan ya da çubuğu göremeyen okur da hangi kanalın önde
   olduğunu okuyabilmeli. Bu yüzden çubuk aria-hidden ve yüzde ayrı bir
   metin olarak basılır.

   Sayılar tabular-nums ile hizalanır; alt alta duran rakamların
   kaymasi okuma sırasında karşılaştırmayı zorlaştırıyor.
   ===================================================================== */
.paysayac { display: grid; gap: var(--b3); }

.paysayac__toplam {
  margin: 0; display: flex; align-items: baseline;
  gap: 6px; flex-wrap: wrap;
}
.paysayac__sayi {
  font-size: var(--fs-buyuk); font-weight: 800;
  font-variant-numeric: tabular-nums; color: var(--marka);
  /* Tam sayı title'da duruyor; imleç bunu haber versin. */
  cursor: help;
}
.paysayac__etiket { font-size: var(--fs-kucuk); color: var(--yazi-2); }

.paysayac__ara {
  margin: 0; font-size: var(--fs-mini); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--yazi-3);
}

.paysayac__kirilim {
  list-style: none; margin: 0; padding: 0; display: grid; gap: var(--b2);
}
.paysayac__oge {
  display: grid; align-items: baseline;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 2px var(--b2);
}
.paysayac__ag {
  font-size: var(--fs-kucuk); color: var(--yazi); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.paysayac__adet {
  font-size: var(--fs-kucuk); font-weight: 700;
  font-variant-numeric: tabular-nums; cursor: help;
}
.paysayac__oran {
  font-size: var(--fs-mini); color: var(--yazi-3);
  font-variant-numeric: tabular-nums; min-width: 34px; text-align: right;
}
.paysayac__bar {
  grid-column: 1 / -1; height: 5px; border-radius: var(--rtam);
  background: var(--kart-2); border: 1px solid var(--cizgi); overflow: hidden;
}
.paysayac__bar > i {
  display: block; height: 100%; background: var(--marka);
}

.paysayac__eksik,
.paysayac__senin,
.paysayac__not {
  margin: 0; font-size: var(--fs-mini); color: var(--yazi-3); line-height: 1.45;
}
.paysayac__senin { color: var(--yazi-2); }

/* --- Satır içi: haber gövdesinin akışında, tek satır ----------------- */
.paysayac--satir { gap: var(--b2); padding: var(--b3) 0; border-top: 1px solid var(--cizgi); border-bottom: 1px solid var(--cizgi); }
.paysayac--satir .paysayac__sayi { font-size: var(--fs-orta); }
.paysayac--satir .paysayac__ara { display: none; }
.paysayac--satir .paysayac__kirilim {
  grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  gap: var(--b3); overflow-x: auto;
}
.paysayac--satir .paysayac__bar { display: none; }

/* --- Kompakt: yan sütun; kırılım tek satırlık rakamlar --------------- */
.paysayac--kompakt { gap: var(--b2); }
.paysayac--kompakt .paysayac__sayi { font-size: var(--fs-orta); }
.paysayac--kompakt .paysayac__bar { display: none; }
.paysayac--kompakt .paysayac__kirilim { gap: 4px; }

/* --- Koyu kutu ------------------------------------------------------- */
.kutu--koyu .paysayac__ag,
.kutu--koyu .paysayac__adet { color: #fff; }
.kutu--koyu .paysayac__etiket,
.kutu--koyu .paysayac__senin { color: rgba(255,255,255,.82); }
.kutu--koyu .paysayac__ara,
.kutu--koyu .paysayac__oran,
.kutu--koyu .paysayac__eksik,
.kutu--koyu .paysayac__not { color: rgba(255,255,255,.7); }
.kutu--koyu .paysayac__bar {
  background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.2);
}


/* =====================================================================
   4.x PİYASA GRAFİĞİ  ·  kıvılcım grafiği + değer
   ---------------------------------------------------------------------
   Çizim satır içi SVG'dir; oranı esnetilir ki dar yan sütunda da geniş
   ana sütunda da kabı doldursun. Çizgi kalınlığı esnememesi için
   vector-effect kullanılıyor (bkz. sablonlar.js › piyasaGrafik).

   Renk YALNIZCA destekler: yön bilgisi metinde ▲ ▼ ve +/- ile de durur,
   renk körlüğünde ayırt edilememesi bilgiyi kaybettirmez.
   ===================================================================== */
.piyasa-grafik { display: grid; gap: var(--b2); }
.piyasa-grafik__damga,
.piyasa-grafik__not,
.piyasa-grafik__gizli {
  margin: 0; font-size: var(--fs-mini); color: var(--yazi-3); line-height: 1.45;
}
.piyasa-grafik__gizli a { color: inherit; }
.piyasa-grafik__uyari {
  margin: 0; padding: var(--b3);
  border: 1px solid var(--cizgi); border-radius: var(--r2);
  background: var(--kart-2);
  font-size: var(--fs-kucuk); color: var(--yazi-2); line-height: 1.5;
}
.piyasa-grafik__liste { list-style: none; margin: 0; padding: 0; display: grid; }
.piyasa-grafik__oge { border-bottom: 1px solid var(--cizgi); }
.piyasa-grafik__oge:last-child { border-bottom: 0; }
.piyasa-grafik__bag {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) auto;
  grid-template-areas: "ad cizim deger" "ad cizim fark";
  gap: 2px var(--b3); align-items: center;
  padding: var(--b3) 0; color: inherit; text-decoration: none;
}
.piyasa-grafik__bag:hover .piyasa-grafik__ad { color: var(--marka); }
.piyasa-grafik__ad {
  grid-area: ad; align-self: center;
  font-size: var(--fs-kucuk); font-weight: var(--fw-orta); line-height: 1.25;
}
.piyasa-grafik__deger {
  grid-area: deger; justify-self: end;
  font-size: var(--fs-normal); font-variant-numeric: tabular-nums;
}
.piyasa-grafik__deger small { font-size: var(--fs-mikro); color: var(--yazi-3); }
.piyasa-grafik__fark {
  grid-area: fark; justify-self: end;
  font-size: var(--fs-mini); font-variant-numeric: tabular-nums;
  color: var(--yazi-2);
}
.piyasa-grafik__oge--yukari .piyasa-grafik__fark { color: var(--yukari); }
.piyasa-grafik__oge--asagi  .piyasa-grafik__fark { color: var(--asagi); }

/* Çizim kabı: SVG kabın enini alır, boyu sürüme göre değişir. */
.piyasa-cizim { grid-area: cizim; display: block; width: 100%; min-width: 0; }
.piyasa-cizim svg { display: block; width: 100%; height: 46px; overflow: visible; }
.piyasa-cizim__cizgi {
  fill: none; stroke: var(--cizim, var(--marka)); stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round;
}
.piyasa-cizim__alan { fill: var(--cizim, var(--marka)); opacity: .10; stroke: none; }
.piyasa-cizim--yukari { --cizim: var(--yukari); }
.piyasa-cizim--asagi  { --cizim: var(--asagi); }
.piyasa-cizim--ayni   { --cizim: var(--yazi-3); }

/* Satır sürümü — yatay şerit, yan sütun dışında da durabilir */
.piyasa-grafik--satir .piyasa-grafik__liste {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--b3);
}
.piyasa-grafik--satir .piyasa-grafik__oge {
  border-bottom: 0; border: 1px solid var(--cizgi);
  border-radius: var(--r2); background: var(--kart);
}
.piyasa-grafik--satir .piyasa-grafik__bag {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "ad deger" "cizim cizim" "fark fark";
  padding: var(--b3);
}
.piyasa-grafik--satir .piyasa-grafik__fark { justify-self: start; }
.piyasa-grafik--satir .piyasa-cizim svg { height: 40px; }

/* Kompakt sürüm — yalnızca ad, minik çizim ve değer */
.piyasa-grafik--kompakt .piyasa-grafik__bag {
  grid-template-columns: minmax(0, 1fr) 84px auto;
  grid-template-areas: "ad cizim deger" "ad cizim fark";
  padding: var(--b2) 0;
}
.piyasa-grafik--kompakt .piyasa-cizim svg { height: 26px; }
.piyasa-grafik--kompakt .piyasa-grafik__deger { font-size: var(--fs-kucuk); }
.piyasa-grafik--kompakt .piyasa-grafik__fark { font-size: var(--fs-mikro); }

/* Koyu kutu */
.kutu--koyu .piyasa-grafik__ad,
.kutu--koyu .piyasa-grafik__deger { color: #fff; }
.kutu--koyu .piyasa-grafik__damga,
.kutu--koyu .piyasa-grafik__not,
.kutu--koyu .piyasa-grafik__gizli { color: rgba(255,255,255,.7); }
.kutu--koyu .piyasa-grafik__oge { border-bottom-color: rgba(255,255,255,.14); }

/* ---------------------------------------------------------------------
   PİYASA TABLOSU  ·  grafiğin metin karşılığı
   Süs değil, eşit: grafikteki her nokta burada bir satırdır. Başlık
   satırı <caption> ile verilir ki ekran okuyucu tabloya girmeden ne
   olduğunu söylesin.
   --------------------------------------------------------------------- */
.piyasa-tablo { width: 100%; border-collapse: collapse; font-size: var(--fs-kucuk); }
.piyasa-tablo caption {
  text-align: left; padding-bottom: var(--b2);
  font-size: var(--fs-mini); color: var(--yazi-3);
}
.piyasa-tablo th, .piyasa-tablo td {
  padding: 6px var(--b2); border-bottom: 1px solid var(--cizgi);
  text-align: right; font-variant-numeric: tabular-nums;
}
.piyasa-tablo thead th {
  border-bottom: 2px solid var(--cizgi-koyu);
  font-size: var(--fs-mini); color: var(--yazi-2); font-weight: var(--fw-orta);
}
.piyasa-tablo th[scope="row"], .piyasa-tablo thead th:first-child {
  text-align: left; font-weight: var(--fw-normal); color: var(--yazi-2);
}
.piyasa-tablo__deger { font-weight: var(--fw-orta); }
.piyasa-tablo__fark--yukari { color: var(--yukari); }
.piyasa-tablo__fark--asagi  { color: var(--asagi); }
.piyasa-tablo__fark--yok, .piyasa-tablo__fark--ayni { color: var(--yazi-3); }


/* =====================================================================
   4.x FORM KORUMA  ·  bot ayıklama (CAPTCHA'sız)
   ---------------------------------------------------------------------
   Tuzak alan `display:none` DEĞİLDİR: bazı otomatik doldurucular
   gizlenmiş alanı atlar, o zaman tuzak hiç kurulmamış olur. Alan bunun
   yerine ekranın dışına taşınır — soldan taşma LTR yerleşimde yatay
   kaydırma çubuğu üretmez. Konumlandırma `absolute` olduğu için alan
   flex ve grid formların akışından da çıkar, yerleşimi bozmaz.

   Uyarı kutusu ve dip not forma ÇOCUK olarak eklenir: bülten kutusu
   gönderim sonrası formu `hidden` yaptığında ikisi de onunla birlikte
   kaybolur; başarı mesajının altında asılı kalmaz.
   ===================================================================== */
.koruma-tuzak {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* flex (bülten) ve grid (kurumsal formlar) kaplarda tam satır kaplar */
.form-koruma__uyari, .form-koruma__not { flex: 1 0 100%; grid-column: 1 / -1; }

.form-koruma__uyari {
  margin: var(--b3) 0 0; padding: var(--b3);
  border: 1px solid var(--asagi); border-left-width: 3px;
  border-radius: var(--r2); background: var(--vurgu-zemin);
  color: var(--yazi-1); font-size: var(--fs-kucuk); line-height: var(--lh-normal);
}
/* Karar renkle değil sözle anlatılır: renk körü okur da "Gönderilmedi"
   yazısını okur. */
.form-koruma__etiket { display: block; font-weight: var(--fw-kalin); }
.form-koruma__metin { display: block; }

.form-koruma__not {
  margin: var(--b2) 0 0; font-size: var(--fs-mikro);
  color: var(--yazi-3); line-height: var(--lh-normal);
}
/* Bülten kutusu koyu zeminde durur; sönük gri orada okunmaz. */
.bulten .form-koruma__not { color: rgba(255, 255, 255, .6); }


/* =====================================================================
   4.x ŞEHRİM  ·  yerel haber modülü
   ---------------------------------------------------------------------
   Üç durumu var: seçim çağrısı, haberi olmayan il, liste. Üçünde de
   veri notu (KVKK) en altta durur — yer darsa küçülür, kaldırılmaz.
   Durumlar renkle değil METİNLE ayrılır; renk yalnızca vurgu.
   ===================================================================== */
.sehrim { display: grid; gap: var(--b3); }
.sehrim__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.sehrim__oge { border-bottom: 1px solid var(--cizgi); }
.sehrim__oge:last-child { border-bottom: 0; }
.sehrim__oge > a {
  display: grid; gap: 3px; padding: var(--b2) 0;
  color: inherit; text-decoration: none;
}
.sehrim__oge > a:hover .sehrim__baslik { color: var(--marka); }
.sehrim__kat {
  font-size: var(--fs-mini); font-weight: 800; color: var(--ie, var(--marka));
  text-transform: uppercase; letter-spacing: .04em;
}
.sehrim__baslik { font-size: var(--fs-kucuk); line-height: 1.35; }
.sehrim__tarih { font-size: var(--fs-mini); color: var(--yazi-3); }

/* Seçim çağrısı — boş kutu yerine ne yapılacağını söyleyen ekran */
.sehrim__cagri {
  margin: 0; font-size: var(--fs-kucuk); color: var(--yazi-2); line-height: 1.5;
}
.sehrim__iller {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--b2);
}
.sehrim__iller a {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 5px 10px; border: 1px solid var(--cizgi); border-radius: 999px;
  background: var(--zemin-1); color: inherit; text-decoration: none;
  font-size: var(--fs-mini);
}
.sehrim__iller a:hover { border-color: var(--marka); color: var(--marka); }
.sehrim__il-ad { font-weight: 700; }
.sehrim__sayi { color: var(--yazi-3); }
.sehrim__bos {
  margin: 0; font-size: var(--fs-kucuk); color: var(--yazi-2); line-height: 1.5;
}
.sehrim__alt { margin: 0; font-size: var(--fs-mini); }
.sehrim__alt a { color: var(--marka); font-weight: 700; }
.sehrim__not {
  margin: 0; padding-top: var(--b2); border-top: 1px solid var(--cizgi);
  font-size: var(--fs-mini); color: var(--yazi-3); line-height: 1.45;
}

/* Kart sürümü — görselli, tek sütun */
.sehrim--kart .sehrim__oge > a { gap: var(--b2); padding: var(--b3) 0; }
.sehrim--kart .gorsel { border-radius: var(--r2); overflow: hidden; }

/* Kompakt — yan sütun için: tarih satırı gizlenmez, küçülür */
.sehrim--kompakt .sehrim__oge > a { padding: 6px 0; }
.sehrim--kompakt .sehrim__baslik {
  font-size: var(--fs-mini); line-height: 1.3;
}

/* Koyu kutu */
.kutu--koyu .sehrim__baslik { color: #fff; }
.kutu--koyu .sehrim__cagri,
.kutu--koyu .sehrim__bos { color: rgba(255,255,255,.85); }
.kutu--koyu .sehrim__tarih,
.kutu--koyu .sehrim__not { color: rgba(255,255,255,.7); }
.kutu--koyu .sehrim__oge { border-bottom-color: rgba(255,255,255,.14); }
.kutu--koyu .sehrim__not { border-top-color: rgba(255,255,255,.14); }
.kutu--koyu .sehrim__iller a {
  background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2);
  color: #fff;
}