/* =====================================================================
   CLASSIC — WIDGET STİLLERİ
   ---------------------------------------------------------------------
   theme.css'ten AYRI dosya. Gerekçe: theme.css 1900 satırı geçti ve
   içinde anasayfa blokları, sayfa şablonları ve widget'lar iç içeydi.
   Bir widget'ı düzeltmek için o dosyada arama yapmak gerekiyordu.

   Buradaki her kural `.hp-w` altında ya da `.hp-w-`/`.hp-ticker-`
   önekli — theme.css'teki bileşenlerle çakışma riski yok.

   YÜKLEME SIRASI: head.php'de theme.css'ten SONRA. Widget'lar
   .hp-card, .hp-num, .hp-table gibi ortak bileşenleri kullanıyor ve
   yer yer onları eziyor; önce yüklenseydi sessizce kaybolurdu
   (temada iki kez yaşanmış bir tuzak).
   ===================================================================== */

/* ---------------------------------------------------------------------
   KABUK — hpWidgetBas() / hpWidgetSon()
   --------------------------------------------------------------------- */
.hp-w {
  display: flex; flex-direction: column;
  background: var(--hp-surface-lowest);
  border-radius: var(--hp-radius-lg);
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  overflow: hidden;
}

.hp-w-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 14px;
  background: var(--hp-surface-low);
}
.hp-w-title {
  display: flex; align-items: center; gap: 8px;
  margin: 0;
  font-family: var(--hp-font-headline);
  font-size: 16px; line-height: 22px;
  text-transform: uppercase; letter-spacing: -0.02em;
  color: #222222;
  font-weight:var(--hp-fw-600);
}
.hp-w-ico {
  width: 26px; height: 26px; border-radius: var(--hp-radius);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--hp-primary); color: var(--hp-on-primary);
  flex: 0 0 auto;
}
.hp-w-head-sag { flex-shrink: 0; }

/* Dolgu 14px değil 10px 5px: tarayıcıda denendi, kutular yan çubukta
   daha derli toplu duruyor ve dar sütunda içerik nefes alıyor.
   Yatay dolgunun küçük olması listelerin kendi 6px iç dolgusuyla
   toplanıp doğru boşluğu veriyor. */
.hp-w-body { padding: 10px 5px; flex: 1 1 auto; }

/* FLUSH kipi: kendi zeminini/dolgusunu yöneten widget'lar için.
   E-bülten gibi koyu zeminli kutularda kabuğun dolgusu zeminin
   kenarında beyaz bir çerçeve bırakıyordu. */
.hp-w-flush > .hp-w-body { padding: 0; }
.hp-w-flush > .hp-w-head { display: none; }

.hp-w-foot {
  padding: 8px 14px;
  background: var(--hp-surface-low);
  text-align: right;
}
.hp-w-foot a {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 15px; font-weight: 600;
  color: var(--hp-primary);
}
.hp-w-foot a:hover { color: var(--hp-primary-container); }

/* Başlık şeridindeki küçük etiketler */
.hp-w-etiket {
  font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 999px;
  background: var(--hp-surface-container); color: var(--hp-on-surface-variant);
  white-space: nowrap;
}
.hp-w-ornek {
  font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 999px;
  background: var(--hp-surface-container); color: var(--hp-outline);
  white-space: nowrap;
}

/* ---------------------------------------------------------------------
   ORTAK LİSTE  —  en çok okunanlar, vefat, eczane
   --------------------------------------------------------------------- */
.hp-w-liste { display: flex; flex-direction: column; }
.hp-w-satir {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 8px 6px; border-radius: var(--hp-radius);
  transition: background-color .2s ease;
}
a.hp-w-satir:hover { background: var(--hp-surface-low); }
.hp-w-satir + .hp-w-satir { border-top: 1px solid var(--hp-surface-container); }

/* Vefat ve eczane satırlarında numara yok; sol kenarda ince bir işaret. */
.hp-w-vefat, .hp-w-eczane { border-left: 3px solid var(--hp-outline-variant); padding-left: 10px; }
.hp-w-vefat:hover { border-left-color: var(--hp-primary); }

/* ---------------------------------------------------------------------
   DÖVİZ
   --------------------------------------------------------------------- */
.hp-w-kur { display: flex; flex-direction: column; gap: 2px; }
.hp-w-kur-satir {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 8px; border-radius: var(--hp-radius);
  transition: background-color .2s ease;
}
.hp-w-kur-satir:hover { background: var(--hp-surface-low); }
.hp-w-kur-kod {
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  padding: 2px 6px; border-radius: var(--hp-radius);
  background: var(--hp-surface-container); color: var(--hp-on-surface-variant);
  flex: 0 0 auto; min-width: 34px; text-align: center;
}

/* ---------------------------------------------------------------------
   HAVA DURUMU
   --------------------------------------------------------------------- */
.hp-w-hava-ust {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 1px solid var(--hp-surface-container);
}
.hp-w-derece {
  font-family: var(--hp-font-headline);
  font-size: 40px; line-height: 1; color: var(--hp-on-surface);
}
.hp-w-hava-metrik {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; color: var(--hp-on-surface-variant); text-align: right;
}
.hp-w-hava-gunler { display: flex; justify-content: space-between; gap: 4px; }
.hp-w-hava-gun {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  flex: 1 1 0; min-width: 0; text-align: center;
}

/* ---------------------------------------------------------------------
   NAMAZ
   --------------------------------------------------------------------- */
.hp-w-namaz-sayac {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px; margin-bottom: 12px;
  background: var(--hp-surface-low); border-radius: var(--hp-radius-lg);
}
.hp-w-namaz { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.hp-w-vakit {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 4px; border-radius: var(--hp-radius);
  background: var(--hp-surface-low);
  font-size: 13px;
}
.hp-w-vakit.is-aktif {
  background: var(--hp-primary); color: var(--hp-on-primary);
}
.hp-w-vakit.is-aktif .hp-cap { color: inherit; }

/* ---------------------------------------------------------------------
   SOSYAL MEDYA
   --------------------------------------------------------------------- */
.hp-w-sosyal { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.hp-w-sos {
  display: flex; align-items: center; gap: 8px;
  padding: 10px; border-radius: var(--hp-radius);
  background: var(--hp-surface-low); color: var(--hp-on-surface);
  transition: background-color .2s ease, color .2s ease;
}
.hp-w-sos:hover { background: var(--hp-surface-container); color: var(--hp-primary); }

/* ---------------------------------------------------------------------
   GÜNÜN SÖZÜ
   --------------------------------------------------------------------- */
.hp-w-soz { margin: 0; }
.hp-w-soz p {
  margin: 0 0 10px; font-size: 16px; line-height: 1.6; font-style: italic;
  color: var(--hp-on-surface);
}
.hp-w-soz cite {
  font-size: 12px; font-style: normal; font-weight: 600;
  color: var(--hp-primary);
}

/* ---------------------------------------------------------------------
   KAYAN BANT (ticker)

   Kayma CSS animasyonuyla; JS yalnızca duraklatma düğmesi için.
   Liste iki kez basılıyor ve animasyon -50%'ye gidiyor: ikinci kopya
   tam birincinin yerini alınca şerit kesintisiz görünüyor.
   --------------------------------------------------------------------- */
.hp-ticker {
  display: flex; align-items: stretch;
  background: var(--hp-surface-lowest);
  border-radius: var(--hp-radius-lg);
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  overflow: hidden;
}
.hp-ticker-etiket {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px; flex: 0 0 auto;
  background: var(--hp-primary); color: var(--hp-on-primary);
  font-family: var(--hp-font-headline); font-size: 15px; letter-spacing: .06em;
}
.hp-ticker-yol { flex: 1 1 auto; overflow: hidden; display: flex; align-items: center; }
.hp-ticker-akis {
  display: flex; align-items: center; gap: 28px;
  white-space: nowrap;
  animation: hp-ticker-kay 38s linear infinite;
  will-change: transform;
}
.hp-ticker:hover .hp-ticker-akis,
.hp-ticker.is-durdu .hp-ticker-akis { animation-play-state: paused; }

.hp-ticker-kalem {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--hp-on-surface);
}
.hp-ticker-kalem strong { font-weight: 700; letter-spacing: .02em; }

.hp-ticker-dur {
  flex: 0 0 auto; border: 0; padding: 0 12px;
  background: var(--hp-surface-low); color: var(--hp-on-surface-variant);
}
.hp-ticker-dur:hover { color: var(--hp-primary); }
.hp-ticker.is-durdu .hp-ticker-dur { color: var(--hp-primary); }

@keyframes hp-ticker-kay {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Hareket azaltma tercihi: şerit durur, içerik yine okunur. */
@media (prefers-reduced-motion: reduce) {
  .hp-ticker-akis { animation: none; }
  .hp-ticker-yol { overflow-x: auto; }
}

/* ---------------------------------------------------------------------
   KATALOG SAYFASI  —  yalnızca widgets.php'de kullanılıyor
   --------------------------------------------------------------------- */
.hp-w-durum {
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.hp-w-durum.is-canli { background: var(--hp-secondary-container); color: var(--hp-on-secondary-container); }
.hp-w-durum.is-yer   { background: var(--hp-surface-container); color: var(--hp-outline); }

.hp-w-kod {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; padding: 1px 6px; border-radius: var(--hp-radius);
  background: var(--hp-surface-container); color: var(--hp-primary);
}
.hp-w-kod-not {
  margin: 8px 0 0; font-size: 12px; line-height: 18px;
  color: var(--hp-on-surface-variant);
}

@media (max-width: 575.98px) {
  .hp-w-sosyal { grid-template-columns: 1fr; }
  .hp-w-namaz { grid-template-columns: repeat(2, 1fr); }
}

/* Katalogda koşulu tutmayan widget'ın yeri — kutunun bozuk mu yoksa
   bilerek mi basılmadığı belli olsun diye. */
.hp-w-bos {
  border: 1px dashed var(--hp-outline-variant);
  box-shadow: none;
  background: transparent;
  min-height: 120px;
  justify-content: center;
}

/* ---------------------------------------------------------------------
   YAZARLAR
   Kaynak: C2'deki "Ekonomi Yazarları" bloğu; kategoriden bağımsız hâle
   getirildi ve ilk yazar öne çıkarıldı.
   --------------------------------------------------------------------- */
.hp-yz { display: flex; flex-direction: column; }

.hp-yz-satir {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 6px; border-radius: var(--hp-radius);
  transition: background-color .2s ease;
}
.hp-yz-satir:hover { background: var(--hp-surface-low); }
.hp-yz-satir + .hp-yz-satir { border-top: 1px solid var(--hp-surface-container); }

/* İlk yazar: daha büyük avatar, başlık iki satır. Beş eşit satır göz
   için tekdüzeydi; listenin bir girişi olması taramayı kolaylaştırıyor. */
.hp-yz-satir.is-one { padding-bottom: 14px; }
.hp-yz-satir.is-one .hp-yz-avatar { width: 56px; height: 56px; }
.hp-yz-satir.is-one .hp-yz-ad { font-size: 16px; }
.hp-yz-satir.is-one .hp-yz-yazi { -webkit-line-clamp: 2; font-size: 14px; }

.hp-yz-avatar {
  width: 44px; height: 44px; flex: 0 0 auto;
  border-radius: 999px; overflow: hidden; display: block;
  background: var(--hp-surface-container);
  box-shadow: 0 0 0 2px var(--hp-surface-highest);
  transition: box-shadow .2s ease;
}
.hp-yz-satir:hover .hp-yz-avatar { box-shadow: 0 0 0 2px var(--hp-primary); }
.hp-yz-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Görseli olmayan yazar için monogram. Renk addan türetiliyor, yani
   aynı yazar her sayfada aynı rengi alıyor. */
.hp-yz-mono {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--hp-font-headline);
  font-size: 17px; letter-spacing: .02em;
}

.hp-yz-govde { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }

.hp-yz-ad {
  font-size: 15px; font-weight: 700; line-height: 1.25;
  color: var(--hp-on-surface);
}
.hp-yz-ad:hover { color: var(--hp-primary); }

.hp-yz-yazi {
  font-size: 13px; line-height: 1.4;
  color: var(--hp-on-surface-variant);
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 1; overflow: hidden;
  transition: color .2s ease;
}
.hp-yz-satir:hover .hp-yz-yazi { color: var(--hp-primary); }

.hp-yz-tarih {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; color: var(--hp-outline); margin-top: 2px;
}

/* Alt düğme: tasarımda sağ üstte küçük bir "Tümü" bağlantısıydı;
   dokunmatikte hedef alanı çok küçüktü. */
.hp-yz-tum {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 12px; padding: 10px;
  border-radius: var(--hp-radius);
  border: 1px solid var(--hp-outline-variant);
  color: var(--hp-on-surface);
  font-family: var(--hp-font-headline);
  font-size: 16px; letter-spacing: .03em; text-transform: uppercase;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.hp-yz-tum:hover {
  background: var(--hp-primary); border-color: var(--hp-primary);
  color: var(--hp-on-primary);
}

/* ---------------------------------------------------------------------
   BURÇ YORUMLARI

   TEK IZGARA, İKİ BAĞLAM. `auto-fit` + minmax kapsayıcının genişliğine
   göre sütun sayısını kendi buluyor:
       yan çubuk (~330px)     → 3 sütun × 4 satır
       tam genişlik (~1236px) → 12 sütun × 1 satır (şerit)

   Medya sorgusu KULLANILMADI: sorgu ekranı ölçer, kapsayıcıyı değil.
   Aynı geniş ekranda widget bir yerde 330px bir yerde 1236px olabiliyor;
   ekran genişliğine bakan bir kural ikisini ayırt edemezdi.

   `auto-fill` değil `auto-fit`: geniş alanda boş sütunlar daralıyor ve
   12 burç eşit genişlikte yayılıyor, sağda boşluk kalmıyor.
   --------------------------------------------------------------------- */
.hp-burc {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 6px;
}

.hp-burc-kart {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  gap: 2px; padding: 10px 6px;
  border-radius: var(--hp-radius-lg);
  border: 1px solid transparent;
  text-align: center;
  transition: background-color .2s ease, border-color .2s ease, transform .15s ease;
}
.hp-burc-kart:hover {
  background: var(--hp-surface-low);
  border-color: var(--hp-outline-variant);
  transform: translateY(-2px);
}

.hp-burc-gorsel {
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--hp-surface-low);
  transition: background-color .2s ease;
}
.hp-burc-kart:hover .hp-burc-gorsel { background: var(--hp-surface-container); }
.hp-burc-gorsel img { width: 40px; height: 40px; display: block; }

.hp-burc-ad {
  font-family: var(--hp-font-headline);
  font-size: 17px; line-height: 1.2; letter-spacing: .02em;
  text-transform: uppercase; color: var(--hp-on-surface);
}
.hp-burc-kart:hover .hp-burc-ad { color: var(--hp-primary); }

/* Tarih aralığı dar sütunda taşıyor; sığmazsa gizleniyor. Bilgi
   yine `title` özniteliğinde duruyor, kaybolmuyor. */
.hp-burc-tarih {
  font-size: 10px; line-height: 13px;
  color: var(--hp-outline);
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; overflow: hidden;
}

/* İçinde bulunduğumuz burç işaretli — kutuyu tarayan okur için
   küçük ama gerçek bir bilgi. */
.hp-burc-kart.is-bugun {
  background: var(--hp-surface-low);
  border-color: var(--hp-primary);
}
.hp-burc-kart.is-bugun .hp-burc-gorsel {
  background: var(--hp-primary-fixed);
}
.hp-burc-rozet {
  position: absolute; top: -7px; left: 50%; transform: translateX(-50%);
  font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 1px 7px; border-radius: 999px;
  background: var(--hp-primary); color: var(--hp-on-primary);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .hp-burc-kart:hover { transform: none; }
}

/* Çok dar alanda (mobil yan çubuk) tarih satırı yer kaplamasın. */
@media (max-width: 400px) {
  .hp-burc-tarih { display: none; }
}

/* ---------------------------------------------------------------------
   E-BÜLTEN — koyu kart

   Anasayfadaki blokla aynı tavır: düz antrasit zemin + posta deseni.
   Gradyan YOK; zemin tek renk kalıyor, desen yalnızca üstüne biniyor.
   --------------------------------------------------------------------- */
.hp-nl-w {
  position: relative;
  isolation: isolate;            /* z-index:-1 katmanı karta hapsediyor */
  overflow: hidden;
  background: var(--hp-inverse-surface);
  color: var(--hp-inverse-on-surface);
  border-radius: var(--hp-radius-lg);
}
.hp-nl-w-art {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: -1; pointer-events: none;
}
.hp-nl-w-ic { padding: 20px 18px; display: flex; flex-direction: column; gap: 10px; }

.hp-nl-w-ikon {
  width: 42px; height: 42px; border-radius: var(--hp-radius);
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(158,0,31,.22); color: var(--hp-primary-fixed-dim);
}
.hp-nl-w-baslik {
  margin: 2px 0 0;
  font-family: var(--hp-font-headline);
  font-size: 21px; line-height: 1.15; text-transform: uppercase;
  color: var(--hp-inverse-on-surface);
}
.hp-nl-w-metin {
  margin: 0 0 4px;
  font-size: 13px; line-height: 1.5;
  color: rgba(239,240,246,.72);
}
.hp-nl-w-kvkk {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 11px; line-height: 16px;
  color: rgba(239,240,246,.72);
  cursor: pointer;
}
.hp-nl-w-kvkk input { margin-top: 2px; accent-color: var(--hp-primary); }

/* Koyu zeminde mesaj satırı: başarı açık pembe, hata daha canlı.
   theme.js rengi inline yazıyor, burada yalnızca boşluk veriliyor. */
.hp-nl-w [data-hp-newsletter-msg] { margin-top: 2px; }

/* Başlık şeridindeki şehir seçici. Tarayıcının kendi <select>'i —
   özel bir açılır liste bileşeni yazmak, klavye ve ekran okuyucu
   desteğini sıfırdan kurmak demekti. */
.hp-w-sehir {
  appearance: none; -webkit-appearance: none;
  border: 1px solid var(--hp-outline-variant);
  border-radius: var(--hp-radius);
  background: var(--hp-surface-lowest);
  color: var(--hp-on-surface);
  font-size: 12px; font-weight: 600;
  padding: 3px 22px 3px 8px;
  cursor: pointer;
  max-width: 120px;
  /* Ok işareti arka plan olarak: ayrı bir <svg> koymak seçicinin
     tıklama alanını bölüyordu. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23906f6e'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  background-size: 14px 14px;
}
.hp-w-sehir:hover { border-color: var(--hp-primary); }
.hp-w-sehir:focus-visible { outline: 2px solid var(--hp-primary); outline-offset: 1px; }

/* Seçici + "Örnek veri" etiketi yan yana; dar kutuda alta düşmesin. */
.hp-w-head-sag { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* ---------------------------------------------------------------------
   PUAN DURUMU — tam cetvel (18 takım)
   --------------------------------------------------------------------- */

/* Tablo kendi içinde kayıyor, SAYFA kaymıyor. Dar kutuya konursa bile
   yatay kaydırma çubuğu belgeye taşmıyor. */
.hp-puan-sar { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.hp-puan { width: 100%; border-collapse: collapse; font-size: 13px; }
.hp-puan th {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  color: var(--hp-on-surface-variant);
  padding: 6px 4px; text-align: center;
  border-bottom: 1px solid var(--hp-outline-variant);
  white-space: nowrap;
}
.hp-puan td {
  padding: 7px 4px; text-align: center;
  border-bottom: 1px solid var(--hp-surface-container);
  white-space: nowrap;
}
.hp-puan tbody tr:last-child td { border-bottom: 0; }
.hp-puan tbody tr:hover { background: var(--hp-surface-low); }

.hp-puan-sira {
  width: 34px; text-align: center !important;
  color: var(--hp-on-surface-variant); font-weight: 600;
  position: relative;
}
.hp-puan-takim {
  text-align: left !important; font-weight: 700;
  color: var(--hp-on-surface);
  padding-left: 10px !important;
  min-width: 116px;
}
.hp-puan-p { font-weight: 800; color: var(--hp-on-surface); }

/* Sıra bandı: sol kenarda ince renk şeridi. Satırın tamamını boyamak
   tabloyu alacalı gösteriyordu. */
.hp-puan tbody tr.is-sampiyon .hp-puan-sira::before,
.hp-puan tbody tr.is-avrupa   .hp-puan-sira::before,
.hp-puan tbody tr.is-kume     .hp-puan-sira::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px;
  width: 3px; border-radius: 999px;
}
.hp-puan tbody tr.is-sampiyon .hp-puan-sira::before { background: var(--hp-secondary); }
.hp-puan tbody tr.is-avrupa   .hp-puan-sira::before { background: var(--hp-tertiary); }
.hp-puan tbody tr.is-kume     .hp-puan-sira::before { background: var(--hp-error); }

/* Dar kutuda atılan sütunlar: attığımız ikisi (A/Y) averajdan zaten
   türetilebiliyor, yani bilgi kaybı yok. */
@media (max-width: 480px) {
  .hp-puan-gizle { display: none; }
}

.hp-puan-lejant {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 10px; padding: 0 4px;
  font-size: 11px; color: var(--hp-on-surface-variant);
}
.hp-puan-lejant span { display: inline-flex; align-items: center; gap: 5px; }
.hp-puan-lejant i { width: 10px; height: 3px; border-radius: 999px; display: inline-block; }
.hp-puan-lejant i.is-sampiyon { background: var(--hp-secondary); }
.hp-puan-lejant i.is-avrupa   { background: var(--hp-tertiary); }
.hp-puan-lejant i.is-kume     { background: var(--hp-error); }

/* ---------------------------------------------------------------------
   NÖBETÇİ ECZANELER

   Ad + telefon yetmiyor: nöbetçi eczane arayan biri gece yola çıkıyor,
   ihtiyacı adres ve yol tarifi. Her satırda harita ve arama düğmesi var.
   --------------------------------------------------------------------- */
.hp-ecz { display: flex; flex-direction: column; }
.hp-ecz-satir {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 6px;
  border-left: 3px solid var(--hp-outline-variant);
  border-radius: var(--hp-radius);
  transition: background-color .2s ease, border-color .2s ease;
}
.hp-ecz-satir:hover { background: var(--hp-surface-low); border-left-color: var(--hp-primary); }
.hp-ecz-satir + .hp-ecz-satir { margin-top: 4px; }

.hp-ecz-bilgi { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.hp-ecz-ad { font-size: 14px; font-weight: 700; color: var(--hp-on-surface); }
.hp-ecz-adres {
  font-size: 11px; line-height: 15px; color: var(--hp-on-surface-variant);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.hp-ecz-tel { font-size: 11px; font-weight: 600; color: var(--hp-outline); }

.hp-ecz-eylem { display: flex; gap: 4px; flex: 0 0 auto; }
.hp-ecz-btn {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--hp-radius);
  background: var(--hp-surface-container); color: var(--hp-on-surface-variant);
  transition: background-color .2s ease, color .2s ease, transform .1s ease;
}
.hp-ecz-btn:active { transform: scale(.94); }
.hp-ecz-btn.is-harita:hover { background: var(--hp-tertiary); color: var(--hp-on-tertiary); }
.hp-ecz-btn.is-tel:hover    { background: var(--hp-secondary); color: var(--hp-on-secondary); }

/* ---------------------------------------------------------------------
   YOL DURUMU

   Her güzergâh 80px yüksekliğinde kendi kutusunda ve kendi mini yol
   çizimini taşıyor. Çizim `currentColor` kullanıyor: kutunun durum
   rengi asfalta ve şeritlere kendiliğinden geçiyor, her durum için
   ayrı SVG tutmaya gerek kalmıyor.

   Renk TEK BAŞINA bilgi değil — her kutuda rozetin yazısı da var.
   --------------------------------------------------------------------- */
.hp-yol { display: flex; flex-direction: column; gap: 6px; }

.hp-yol-kart {
  --hp-yol-renk: var(--hp-outline);
  position: relative;
  display: flex; align-items: center; gap: 12px;
  height: 80px; padding: 0 12px 0 0;
  border-radius: var(--hp-radius-lg);
  background: var(--hp-surface-low);
  overflow: hidden;
  transition: background-color .2s ease, transform .15s ease;
}
.hp-yol-kart:hover { background: var(--hp-surface-container); transform: translateX(2px); }

.hp-yol-kart.is-akici  { --hp-yol-renk: var(--hp-secondary); }
.hp-yol-kart.is-yogun  { --hp-yol-renk: #b8860b; }
.hp-yol-kart.is-kapali { --hp-yol-renk: var(--hp-error); }

/* Çizim kutusu: renk buradan `currentColor` olarak SVG'ye iniyor. */
.hp-yol-cizim {
  width: 96px; height: 80px; flex: 0 0 auto;
  color: var(--hp-yol-renk);
  display: block;
}
.hp-yol-cizim svg { width: 100%; height: 100%; display: block; }

.hp-yol-bilgi { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.hp-yol-ad {
    font-weight: 600;
    font-family: var(--hp-font-headline);
    font-size: 12px;
    line-height: 1.15;
    letter-spacing: .01em;
    color: var(--hp-on-surface);
}
.hp-yol-kart:hover .hp-yol-ad { color: var(--hp-yol-renk); }
.hp-yol-aciklama {
  font-size: 11px; line-height: 15px; color: var(--hp-on-surface-variant);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}

.hp-yol-rozet {
  flex: 0 0 auto;
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  background: var(--hp-yol-renk); color: #fff;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .hp-yol-kart:hover { transform: none; }
}

/* Çok dar kutuda çizim daralıyor ama kaybolmuyor — durum rengini
   taşıyan tek görsel o. */
@media (max-width: 380px) {
  .hp-yol-cizim { width: 68px; }
  .hp-yol-aciklama { -webkit-line-clamp: 1; }
}

/* ---------------------------------------------------------------------
   GAZETE MANŞETLERİ

   TEK ŞERİT, İKİ BAĞLAM (burç widget'ıyla aynı yaklaşım): tam
   genişlikte çok kapak yan yana, yan çubukta aynı şerit daralıyor ve
   parmakla kaydırılıyor. Ayrı bir "dar sürüm" yok.

   Kaydırma CSS ile; ok düğmeleri yalnızca kolaylık. JS yokken de
   şerit parmakla ve klavyeyle (tabindex) kayıyor.
   --------------------------------------------------------------------- */
.hp-gz { position: relative; }

.hp-gz-yol {
  display: flex; gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 2px;
}
.hp-gz-yol::-webkit-scrollbar { display: none; }
.hp-gz-yol:focus-visible { outline: 2px solid var(--hp-primary); outline-offset: 2px; border-radius: var(--hp-radius); }

.hp-gz-kart {
  flex: 0 0 auto;
  width: 118px;
  scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 6px;
  color: var(--hp-on-surface);         /* kapak çizimi currentColor kullanıyor */
}

.hp-gz-kapak {
  position: relative; display: block;
  aspect-ratio: 3/4;
  border-radius: var(--hp-radius);
  overflow: hidden;
  background: var(--hp-surface-lowest);
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
  transition: box-shadow .2s ease, transform .2s ease;
}
.hp-gz-kapak svg { width: 100%; height: 100%; display: block; }
.hp-gz-kart:hover .hp-gz-kapak { box-shadow: 0 6px 16px rgba(0,0,0,.18); transform: translateY(-3px); }

.hp-gz-kart:hover { color: var(--hp-primary); }   /* kapak çizimi hover’da temaya boyanıyor */
/* Büyüteç: kapağın tıklanınca büyüyeceğini söylüyor. */
.hp-gz-buyut {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.45); color: #fff;
  opacity: 0; transition: opacity .2s ease;
}
.hp-gz-kart:hover .hp-gz-buyut,
.hp-gz-kart:focus-visible .hp-gz-buyut { opacity: 1; }

.hp-gz-ad {
  font-size: 12px; font-weight: 600; text-align: center;
  color: var(--hp-on-surface);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hp-gz-kart:hover .hp-gz-ad { color: var(--hp-primary); }

/* Ok düğmeleri şeridin ÜSTÜNDE; ayrı satır kaplasalardı dar kutuda
   yer israfı olurdu. JS yoksa `hidden` kalıyorlar. */
.hp-gz-ok {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 2; width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px;
  background: var(--hp-surface-lowest); color: var(--hp-on-surface);
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  transition: background-color .2s ease, color .2s ease, opacity .2s ease;
}
.hp-gz-ok:hover { background: var(--hp-primary); color: var(--hp-on-primary); }
.hp-gz-ok.is-sol { left: -6px; }
.hp-gz-ok.is-sag { right: -6px; }
.hp-gz-ok[disabled] { opacity: .3; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .hp-gz-yol { scroll-behavior: auto; }
  .hp-gz-kart:hover .hp-gz-kapak { transform: none; }
}

/* ---------------------------------------------------------------------
   OKUR YORUMLARI  (widgets/yorumlar.php)

   Tasarım C6'dan. Yan çubuk kutusu DEĞİL, içerik altına giren tam
   genişlik bölüm; bu yüzden `.hp-w` kabuğunu kullanmıyor, kendi
   iskeletini kuruyor. Yine de widgets/ altında: çağrı biçimi aynı
   (`hpWidget('yorumlar', [...])`) ve haber/yazı/galeri/video hepsinde
   aynı dosya kullanılıyor.

   Okuma genişliği 60rem ile sınırlı: yorum METİN, satır 100 karakteri
   geçince göz satır başını kaybediyor.
   --------------------------------------------------------------------- */
.hp-yrm { max-width: 60rem; margin: 0 auto; }

.hp-yrm-ust {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px; margin-bottom: 18px;
}
.hp-yrm-baslik { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.hp-yrm-sayi {
  font-size: 12px; font-weight: 700;
  padding: 2px 8px; border-radius: 4px;
  background: var(--hp-surface-highest); color: var(--hp-on-surface-variant);
}

.hp-yrm-mod {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--hp-outline);
}
.hp-yrm-mod .hp-ico { color: var(--hp-primary); }

/* ---------- form ---------- */
.hp-yrm-form-kutu {
  background: var(--hp-surface-low);
  /*border: 1px solid var(--hp-outline-variant);*/
  border-radius: 6px;
  padding: 20px;
  margin-bottom: 24px;
}
.hp-yrm-form-baslik {
  font-family: var(--hp-font-headline);
  font-size: 17px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; margin: 0 0 4px; color: var(--hp-on-surface);
}
.hp-yrm-form-not {
  font-size: 13px; line-height: 1.55; margin: 0 0 16px;
  color: var(--hp-on-surface-variant);
}

.hp-yrm-etiket {
  display: block; font-size: 11px; font-weight: 700;
  letter-spacing: .03em; margin-bottom: 4px;
  color: var(--hp-on-surface-variant);
}
.hp-yrm-metin { min-height: 108px; resize: vertical; }

/* Sayaç metin kutusunun SAĞ ALTINA hizalı; ayrı bir satır kaplasaydı
   forma bir satır daha eklerdi. */
.hp-yrm-sayac {
  display: block; text-align: right; font-size: 11px;
  color: var(--hp-outline); margin-top: 3px;
}
.hp-yrm-sayac.is-dolu { color: var(--hp-error, #ba1a1a); font-weight: 700; }

.hp-yrm-alt {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-top: 16px;
}
.hp-yrm-kvkk {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 12px; color: var(--hp-on-surface-variant);
}
.hp-yrm-kvkk input { width: 16px; height: 16px; accent-color: var(--hp-primary); flex: 0 0 auto; }

/* Yanıt kipi şeridi */
.hp-yrm-yanit-serit {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
  padding: 8px 12px; margin-bottom: 14px;
  border-radius: 8px; font-size: 13px;
  background: var(--hp-surface-highest); color: var(--hp-on-surface-variant);
  border-left: 3px solid var(--hp-primary);
}
.hp-yrm-iptal {
  border: 0; background: none; padding: 0;
  font-size: 12px; font-weight: 700; color: var(--hp-primary); cursor: pointer;
}
.hp-yrm-iptal:hover { text-decoration: underline; }

/* Sonuç mesajı — renk TEK başına bilgi değil, metin zaten durumu yazıyor. */
.hp-yrm-mesaj {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 14px 0 0; padding: 10px 12px;
  border-radius: 8px; font-size: 13px; line-height: 1.5;
}
.hp-yrm-mesaj.is-ok  { background: rgba(16,124,16,.10); color: #0b6b0b; }
.hp-yrm-mesaj.is-hata{ background: rgba(186,26,26,.10); color: var(--hp-error, #ba1a1a); }

/* ---------- akış ---------- */
.hp-yrm-akis { display: flex; flex-direction: column; gap: 14px; }

.hp-yrm-kart {
  background: var(--hp-surface-lowest);
  border: 1px solid var(--hp-surface-low);
  border-radius: 6px;
  padding: 16px 18px;
}

/* Katlama: fazlalık YALNIZCA JS sınıfı eklediğinde gizleniyor.
   JS yoksa hepsi görünür kalıyor ve düğme de basılmıyor. */
.hp-yrm-akis.is-katli .hp-yrm-kart.is-fazla { display: none; }

.hp-yrm-kafa { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }

.hp-yrm-avatar {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; letter-spacing: .02em;
}
.hp-yrm-avatar.is-kucuk { width: 30px; height: 30px; font-size: 12px; }

.hp-yrm-kim { min-width: 0; }
.hp-yrm-ad {
  font-size: 14px; font-weight: 700; margin: 0;
  color: var(--hp-on-surface); line-height: 1.3;
}
.hp-yrm-tarih { font-size: 11px; color: var(--hp-outline); }

.hp-yrm-metin-govde {
  font-size: 15px; line-height: 1.65; color: var(--hp-on-surface);
  overflow-wrap: anywhere;      /* bağlantı yapıştıran okur kutuyu taşırmasın */
}

.hp-yrm-eylem { margin-top: 10px; }
.hp-yrm-yanitla {
  display: inline-flex; align-items: center; gap: 5px;
  border: 0; background: none; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--hp-outline);
  transition: color .2s ease;
  /* Metnin kendisi 17px; parmakla vurulacak alan bu kadar küçük
     olamaz. Dolgu hedefi 40px'e çıkarıyor, negatif kenar boşluğu
     kartın hizasını bozmasını engelliyor — görünüm aynı kalıyor. */
  min-height: 40px; padding: 0 10px; margin: -11px -10px;
}
.hp-yrm-yanitla:hover { color: var(--hp-primary); }

/* Yanıtlar: soldan girinti + dikey çizgi. Girinti tek başına dar
   ekranda kaybolur, çizgi bağı görünür tutuyor. */
.hp-yrm-yanitlar {
  margin: 14px 0 0 12px; padding:5px 5px 5px 14px;
  border-left: 2px solid var(--hp-outline-variant);
  display: flex; flex-direction: column; gap: 12px;
  background: var(--hp-surface-low);
}
.hp-yrm-alt-kart .hp-yrm-metin-govde { font-size: 14px; }

.hp-yrm-bos {
  text-align: center; padding: 32px 16px;
  border: 1px dashed var(--hp-outline-variant); border-radius: 12px;
  color: var(--hp-on-surface-variant);
}
.hp-yrm-bos .hp-ico { color: var(--hp-outline-variant); display: block; margin: 0 auto 8px; }

.hp-yrm-daha { text-align: center; margin-top: 18px; }
.hp-yrm-daha .hp-btn { min-width: 260px; }

@media (max-width: 575.98px) {
  .hp-yrm-form-kutu { padding: 16px 14px; }
  .hp-yrm-kart { padding: 14px; }
  .hp-yrm-alt { flex-direction: column; align-items: stretch; }
  .hp-yrm-alt .hp-btn { width: 100%; }
  .hp-yrm-daha .hp-btn { min-width: 0; width: 100%; }
  .hp-yrm-yanitlar { margin-left: 0; padding-left: 10px; }
}

/* Katalogdaki bölüm ayracı. */
.hp-w-ayrac { border: 0; border-top: 1px solid var(--hp-outline-variant); margin: 32px 0 24px; opacity: 1; }

/* ---------------------------------------------------------------------
   PAYLAŞIM ÇUBUĞU  (widgets/paylas.php)

   Duruyorken çubuk SAKİN: hepsi tek nötr renk. Marka rengi yalnızca
   fare/odak gelince açılıyor (`--hp-marka` her düğmede ayrı). Yedi
   renkli düğme bir arada dururken hiçbiri okunmuyor ve içeriğin önüne
   geçiyorlar.
   --------------------------------------------------------------------- */
.hp-py {
  display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 8px 12px !important;
    /* border-top: 1px solid var(--hp-outline-variant); */
    /* border-bottom: 1px solid var(--hp-outline-variant); */
    background: #9a9daf;
    border-radius: 5px;

}
.hp-py-sol { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }

.hp-py-etiket {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--hp-on-primary);
  margin-right: 4px;
}

.hp-py-btn {
    position: relative;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0px solid var(--hp-outline-variant);
    border-radius: 5px;
    background: var(--hp-surface-lowest);
    color: #352653;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
}

.hp-py-btn .hp-ico { width: 19px; height: 19px; }

/* Marka rengi: zemin markanın kendisi, ikon beyaz. Yalnızca hover ve
   klavye odağında — odak da dahil, çünkü klavyeyle gezen okur da
   nerede olduğunu görmeli. */
.hp-py-btn:hover,
.hp-py-btn:focus-visible {
  background: var(--hp-marka); border-color: var(--hp-marka);
  color: #fff; transform: translateY(-2px);
}
.hp-py-btn:active { transform: translateY(0) scale(.94); }

/* Kopyalandı balonu. Eskiden yalnızca `title` değişiyordu; fare üstünde
   durmayan okur kopyalandığını hiç görmüyordu. */
.hp-py-btn.is-ok {
  background: var(--hp-secondary, #006c4c); border-color: var(--hp-secondary, #006c4c); color: #fff;
}
.hp-py-btn.is-ok::after {
  content: "Kopyalandı";
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  padding: 4px 9px; border-radius: 6px; white-space: nowrap;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  background: var(--hp-on-surface); color: var(--hp-surface-lowest);
  pointer-events: none;
}

/* Yazı boyutu — segment kumandası. Ortadaki "A" sıfırlıyor. */
.hp-py-font {
    display: inline-flex;
    align-items: stretch;
    border: 0px solid var(--hp-outline-variant);
    border-radius: 5px;
    overflow: hidden;
    background: var(--hp-surface-lowest);
}
.hp-py-font button {
    min-width: 38px;
    height: 38px;
    border: 0;
    background: none;
    cursor: pointer;
    font-family: var(--hp-font-headline);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    color: #352653;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1px;
    transition: background-color .18s ease, color .18s ease;
}
.hp-py-font button + button {
    border-left: 1px solid #35265330;
}
.hp-py-font button span { font-size: 11px; }
.hp-py-font button:hover,
.hp-py-font button:focus-visible { background: var(--hp-surface-highest); color: var(--hp-primary); }

/* Bulunulan kademe. Kök öznitelik `data-hp-okuma` theme.js tarafından
   yazılıyor; buradan hangi düğmenin "sınırda" olduğu işaretleniyor —
   okurun daha fazla küçültemeyeceğini anlaması için. */
/* Kademe 0 (17px) TABAN: küçültme düğmesi pasif. Öznitelik hiç
   yazılmamışsa da taban geçerli — :not() ile yakalanıyor. */
:root:not([data-hp-okuma]) .hp-py-font [data-hp-font-az],
[data-hp-okuma="0"] .hp-py-font [data-hp-font-az],
[data-hp-okuma="3"] .hp-py-font [data-hp-font-cok] { opacity: .35; pointer-events: none; }

[data-hp-okuma="1"] .hp-py-font [data-hp-font-sifir],
[data-hp-okuma="2"] .hp-py-font [data-hp-font-sifir],
[data-hp-okuma="3"] .hp-py-font [data-hp-font-sifir] { color: var(--hp-primary); }

/* Kompakt: dar alanlar (BİK ilanı, kart altı). */
.hp-py.is-kompakt { border: 0; padding: 0; justify-content: center; }
.hp-py.is-kompakt .hp-py-btn { width: 34px; height: 34px; border-radius: 9px; }
.hp-py.is-kompakt .hp-py-btn .hp-ico { width: 17px; height: 17px; }

@media (max-width: 575.98px) {
  .hp-py { justify-content: center; }
  .hp-py-etiket { display: none; }      /* dar ekranda düğmelere yer aç */
}

@media (prefers-reduced-motion: reduce) {
  .hp-py-btn:hover, .hp-py-btn:focus-visible { transform: none; }
}

/* ---------------------------------------------------------------------
   ŞEHİR DEĞİŞİRKEN — kutu tazeleniyor

   Kutu ajax ile yerinde yeniden çiziliyor (widgets.js). Bekleme kısa
   (yerel kopya varsa ~50 ms), ama hiçbir geri bildirim vermemek "tıkladım
   bir şey olmadı" hissi bırakıyor. Kutu hafifçe soluyor ve tıklamayı
   yutuyor — iki kez seçim yapılmasın.

   `opacity` seçildi çünkü yerleşimi değiştirmiyor: kutu yerinde duruyor,
   yan çubuk zıplamıyor.
   --------------------------------------------------------------------- */
.hp-w.is-yukleniyor { opacity: .55; pointer-events: none; transition: opacity .12s ease; }

@media (prefers-reduced-motion: reduce) {
  .hp-w.is-yukleniyor { transition: none; }
}

/* Servis tazeleme kancası — GÖRÜNMEZ AMA BASILIYOR.
   Yan bloktaki dar widget'larda (döviz, hava) "Son güncelleme … ·
   Kaynak …" satırı iki satıra taşıyor ve widget kadar yer
   kaplıyordu. Metin kaldırıldı; öğenin kendisi duruyor çünkü
   theme.js §18 arka plan tazelemeyi `[data-hp-svc]` seçicisiyle
   buluyor. display:none seçiciyi etkilemiyor. */
.hp-svc-gizli { display: none; }

/* =====================================================================
   ============  FNEX — PAYLAŞIM ÇUBUĞU  ============

   `.fx-py` MODİFİKATÖRÜ. Sınıf adları ve data-* öznitelikleri
   değişmedi: kopyala/yazdır/font motoru (theme.js §12), navigator.share
   açma (widgets.js) ve "Kopyalandı" balonu aynen çalışıyor — burada
   yalnızca KABUK değişiyor.

   NEDEN DEĞİŞTİ: önceki hâli düz gri (#9a9daf) bir şeritti; temanın
   hiçbir yerinde o gri yok ve çubuk "sonradan yapıştırılmış" duruyordu.

   FNEX'E ÖZGÜ ÜÇ KARAR

   1) HAP KABUK. Çubuk artık yüzen bir kapsül: yumuşak gölge, ince
      kenarlık, tam yuvarlak köşe. Temanın her yerindeki hap dili.

   2) BİRİNCİL EYLEM METİNLİ. WhatsApp Türkiye'de baskın paylaşım
      kanalı; ikon kalabalığında kaybolmasın diye metinli ve dolu renkli.
      Diğerleri dairesel ikon kalıyor. Bu asimetri çubuğu tanınır
      yapıyor — yedi eşit dairenin dizildiği standart çubuktan ayrışıyor.

   3) PASTEL MARKA TONU. Önceki sürümde düğmeler duruyorken tek renkti,
      marka rengi YALNIZCA hover'da geliyordu. Şimdi duruyorken de
      markanın çok açık tonu zemin, markanın kendisi ikon rengi;
      hover'da dolu renge geçiyor. "Yedi renkli düğme bağırıyor"
      sorununa düşmüyor çünkü tonlar pastel — ama çubuk renksiz de
      değil.

   `color-mix` DESTEKLENMEYEN TARAYICI: her kuralda önce düz bir yedek
   değer veriliyor, color-mix satırı onu eziyor. Safari 16.2 ve
   öncesinde çubuk eski sakin görünümüne düşüyor, bozulmuyor.
   (fnex header.php de ana rengi color-mix ile türetiyor.)
   ===================================================================== */

.fx-py {
  background: var(--hp-surface) !important;
  border: 1px solid var(--hp-outline-variant);
  /* 999px DEĞİL, 26px — ÖLÇÜLDÜ. Çubuk yüksekliği 52px (7+38+7), yani
     26px zaten TAM YUVARLAK: tek satırdayken 999px ile birebir aynı
     görünüyor. Farkı dar sütunda ortaya çıkıyor: çubuk iki-üç satıra
     sardığında 999px kabuğu koca bir hap balonuna çeviriyordu. Sabit
     26px sarınca da düzgün yuvarlak bir kutu bırakıyor.
     Medya sorgusuyla çözülemezdi — sorgu EKRANI ölçer, çubuğun
     sarmasını belirleyen ise İÇİNDE BULUNDUĞU SÜTUNUN genişliği. */
  border-radius: 26px;
  padding: 7px 10px 7px 8px !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.06);
  gap: 12px;
}

/* Etiket: ikonlu accent kapsül. */
.fx-py .fx-py-etiket {
  display: inline-flex; align-items: center; gap: 6px;
  margin-right: 2px; padding: 7px 13px;
  border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: .08em;
  color: var(--hp-primary);
  background: var(--hp-primary-fixed);
}

.fx-py .hp-py-sol { gap: 7px; }

/* Dairesel ikon düğmeleri — pastel marka tonu. */
.fx-py .hp-py-btn {
  width: 38px; height: 38px;
  border-radius: 999px;
  border: 0;
  background: var(--hp-surface-high);
  color: var(--hp-marka, var(--hp-on-surface));
  background: color-mix(in srgb, var(--hp-marka, #64748b) 12%, var(--hp-surface));
}
.fx-py .hp-py-btn:hover,
.fx-py .hp-py-btn:focus-visible {
  background: var(--hp-marka, var(--hp-primary));
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(15,23,42,.18);
}
.fx-py .hp-py-btn:active { transform: translateY(0) scale(.94); }

/* X'in marka rengi siyah: pastel tonu grileşiyor ve ikon okunmuyordu.
   Siyah düğme duruyorken de dolu — marka kimliği zaten bu. */
.fx-py .hp-py-btn.is-x {
  background: #0f172a; color: #fff;
}
.fx-py .hp-py-btn.is-x:hover { background: #000; }

/* BİRİNCİL: metinli hap, dolu marka rengi. */
.fx-py .fx-py-birincil {
  width: auto; height: 38px;
  padding: 0 16px 0 13px;
  gap: 8px;
  background: var(--hp-marka);
  color: #fff;
  font-size: 13px; font-weight: 700; letter-spacing: -.01em;
  box-shadow: 0 2px 8px rgba(37,211,102,.28);
}
.fx-py .fx-py-birincil:hover {
  background: var(--hp-marka);
  filter: brightness(1.06);
  box-shadow: 0 8px 20px rgba(37,211,102,.34);
}
.fx-py .fx-py-metin { white-space: nowrap; }

/* Yazı boyutu: segment kumanda görünümü. */
.fx-py .hp-py-font {
  background: var(--hp-surface-high);
  border: 0; border-radius: 999px;
  padding: 3px; gap: 2px;
  overflow: hidden;
}
.fx-py .hp-py-font button {
  border: 0; border-radius: 999px;
  min-width: 34px; height: 32px;
  background: transparent; color: var(--hp-on-surface-variant);
  font-weight: 700;
}
.fx-py .hp-py-font button + button { border-left: 0; }
.fx-py .hp-py-font button:hover,
.fx-py .hp-py-font button:focus-visible {
  background: var(--hp-surface); color: var(--hp-primary);
}

/* "Kopyalandı" balonu ortalanıyor — düğme artık daire, eski kare
   konumlandırma yana kaçıyordu. */
.fx-py .hp-py-btn.is-ok::after { left: 50%; transform: translateX(-50%); }

/* KOMPAKT KİP (BİK ilanı): hap kabuk yok, çubuk çıplak.
   İlan metninin yanında yüzen bir kapsül BİK'in sade sunum
   beklentisine uymuyor; orada yalnızca düğmeler kalıyor. */
.fx-py.is-kompakt {
  background: transparent !important;
  border: 0; box-shadow: none; padding: 0 !important;
}

/* "PAYLAŞ" kapsülü 1200px ALTINDA düşüyor. Sebep ölçüm: 1440px'de
   makale sütunu 824px ve çubuk tek satıra sığıyor; 1000px'de sütun
   ~610px'e inince etiket + birincil düğme + yedi daire + font kumandası
   üç satıra sarıyor. Etiket dekoratif — ilk feda edilecek öğe o. */
@media (max-width: 1199.98px) {
  .fx-py .fx-py-etiket { display: none; }
}

@media (max-width: 767.98px) {
  .fx-py { padding: 9px 10px !important; }
  .fx-py .fx-py-birincil { padding: 0 13px 0 11px; font-size: 12.5px; }
}

@media (max-width: 479.98px) {
  /* Çok dar ekranda WhatsApp metni de düşüyor, düğme daireye dönüyor —
     yedi düğme + metin tek satıra sığmıyordu. */
  .fx-py .fx-py-metin { display: none; }
  .fx-py .fx-py-birincil { width: 38px; padding: 0; }
}