/* =====================================================================
   SERVİS SAYFALARI — namaz · puan · yol · gazete · burç
   theme/classic/assets/css/services.css

   Beşinin ortak noktası: uzak bir servisten gelen, yavaş değişen,
   TABLO ya da IZGARA biçiminde veri. Ayrı beş dosya yerine tek dosya,
   çünkü durum satırı, tablo kabuğu ve boş durum hepsinde aynı.

   Sayfa kapağı, boş durum ve rozet pages.css'ten geliyor; burada
   yalnızca bu beş sayfaya özgü olan var.
   ===================================================================== */

/* ---------------------------------------------------------------------
   DURUM SATIRI  (parts/service_note.php)
   Verinin ne zaman ve nereden alındığını söylüyor. Sessiz duruyor —
   sayfanın konusu bu değil, ama gizlenmesi de doğru olmazdı.
   --------------------------------------------------------------------- */
.hp-svc-not {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--hp-outline);
  margin: 18px 0 0;
}
.hp-svc-not .hp-ico { flex: 0 0 auto; }
.hp-svc-not time { font-variant-numeric: tabular-nums; }

/* Tazeleme sürerken ikon dönüyor — okur bir şeyin olduğunu görsün. */
.hp-svc-not.is-tazeleniyor .hp-ico { animation: hp-svc-don 1s linear infinite; }
@keyframes hp-svc-don { to { transform: rotate(360deg); } }

/* Şehir seçici formu */
.hp-svc-sehir { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hp-svc-sehir .hp-input { min-width: 160px; }

/* ---------------------------------------------------------------------
   ORTAK TABLO KABUĞU
   Puan cetveli ve aylık namaz cetveli aynı tablo. Dar ekranda tablo
   KENDİ kutusunda kayıyor — sayfa gövdesi asla yatay kaymıyor.
   --------------------------------------------------------------------- */
.hp-tablo-kaydir {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--hp-surface-lowest);
  border-radius: 14px;
  box-shadow: rgba(0,0,0,.08) 0 1px 3px;
}
.hp-tablo {
  width: 100%; border-collapse: collapse;
  font-size: 14px; font-variant-numeric: tabular-nums;
  margin: 0;
}
.hp-tablo caption { caption-side: top; }
.hp-tablo thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--hp-surface-high);
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--hp-on-surface-variant);
  padding: 11px 10px; text-align: center; white-space: nowrap;
}
.hp-tablo tbody th, .hp-tablo tbody td {
  padding: 11px 10px; text-align: center;
  border-top: 1px solid var(--hp-outline-variant);
  color: var(--hp-on-surface);
}
.hp-tablo tbody tr:hover { background: var(--hp-surface-low); }
.hp-tablo abbr { text-decoration: none; border: 0; }

/* Bugünün satırı aylık cetvelde — renk TEK BAŞINA bilgi değil,
   tarih hücresi ayrıca kalın. */
.hp-tablo tbody tr.is-bugun { background: var(--hp-surface-low); }
.hp-tablo tbody tr.is-bugun th { font-weight: 800; color: var(--hp-primary); }

/* ---------------------------------------------------------------------
   PUAN CETVELİ
   --------------------------------------------------------------------- */
.hp-pns-takim { text-align: left !important; font-weight: 700; white-space: nowrap; }
.hp-pns-sira  { width: 46px; }
.hp-pns-p     { font-weight: 800; color: var(--hp-on-surface); }

.hp-pns-rozet {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 8px;
  font-size: 12px; font-weight: 700;
  background: var(--hp-surface-high); color: var(--hp-on-surface-variant);
}
/* Avrupa hattı ve düşme hattı — cetvelin okunma nedeni. Sıra rakamı
   rozetin İÇİNDE yazılı, yani renk tek başına bilgi taşımıyor. */
.hp-pns-rozet.is-ust { background: var(--hp-primary); color: var(--hp-on-primary); }
.hp-pns-rozet.is-alt { background: var(--hp-on-surface); color: var(--hp-surface-lowest); }

/* ---------------------------------------------------------------------
   NAMAZ VAKİTLERİ
   --------------------------------------------------------------------- */
.hp-nmz-sayac {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 20px 22px; border-radius: 16px;
  background: var(--hp-surface-lowest);
  box-shadow: rgba(0,0,0,.08) 0 1px 3px;
  margin-bottom: 18px;
}
.hp-nmz-kalan {
  font-family: var(--hp-font-headline);
  font-size: clamp(24px, 3.4vw, 34px); line-height: 1;
  color: var(--hp-primary);
}
.hp-nmz-saat {
  margin-left: auto;
  font-size: 20px; font-weight: 800; color: var(--hp-on-surface);
  font-variant-numeric: tabular-nums;
}

.hp-nmz-kartlar {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.hp-nmz-kart {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 16px 12px; border-radius: 14px;
  background: var(--hp-surface-lowest);
  box-shadow: rgba(0,0,0,.08) 0 1px 3px;
}
.hp-nmz-kart .hp-ico { color: var(--hp-outline-variant); }
.hp-nmz-ad    { font-size: 12px; font-weight: 600; color: var(--hp-on-surface-variant); }
.hp-nmz-vakit { font-size: 22px; font-weight: 800; color: var(--hp-on-surface); font-variant-numeric: tabular-nums; }

/* Sıradaki vakit: hem renk hem YAZILI etiket. */
.hp-nmz-kart.is-siradaki { background: var(--hp-primary); }
.hp-nmz-kart.is-siradaki .hp-ico,
.hp-nmz-kart.is-siradaki .hp-nmz-ad,
.hp-nmz-kart.is-siradaki .hp-nmz-vakit { color: var(--hp-on-primary); }
.hp-nmz-etiket {
  position: absolute; top: 8px; right: 8px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 999px;
  background: rgba(255,255,255,.22); color: var(--hp-on-primary);
}

.hp-nmz-aylik { margin-top: 20px; }
.hp-nmz-aylik > summary {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; border-radius: 14px;
  background: var(--hp-surface-lowest);
  box-shadow: rgba(0,0,0,.08) 0 1px 3px;
  font-size: 15px; font-weight: 700; color: var(--hp-on-surface);
  cursor: pointer; list-style: none;
}
.hp-nmz-aylik > summary::-webkit-details-marker { display: none; }
.hp-nmz-aylik > summary .hp-sy-rozet { margin-left: auto; }
.hp-nmz-aylik[open] > summary { border-radius: 14px 14px 0 0; }
.hp-nmz-aylik .hp-tablo-kaydir { border-radius: 0 0 14px 14px; max-height: 60vh; }

/* ---------------------------------------------------------------------
   YOL DURUMU
   Numaralı liste: bülten Karayolları'nda da numaralı ve okur bir
   maddeyi telefonla tarif ederken o numarayı söylüyor.
   --------------------------------------------------------------------- */
.hp-yol-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.hp-yol-oge {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 18px; border-radius: 14px;
  background: var(--hp-surface-lowest);
  box-shadow: rgba(0,0,0,.08) 0 1px 3px;
}
.hp-yol-no {
  flex: 0 0 auto;
  min-width: 30px; height: 30px; padding: 0 8px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
  background: var(--hp-surface-high); color: var(--hp-on-surface-variant);
}
.hp-yol-metin { margin: 0; font-size: 15px; line-height: 1.65; color: var(--hp-on-surface); }
.hp-yol-oge[hidden] { display: none; }
.hp-yol-bos { margin-top: 18px; font-size: 14px; color: var(--hp-on-surface-variant); text-align: center; }

/* Aranan kelime vurgusu — zemin + kalın, renk tek başına değil. */
.hp-yol-metin mark {
  background: rgba(var(--hp-primary-rgb, 214 40 40), .2);
  color: inherit; font-weight: 700; padding: 0 2px; border-radius: 3px;
}

/* ---------------------------------------------------------------------
   GAZETE MANŞETLERİ
   Kapak oranı A serisi (1 / 1.41) ve CSS'te SABİT: görsel uzak
   sunucudan geç gelse bile ızgara zıplamıyor (CLS).
   --------------------------------------------------------------------- */
.hp-gzs-izgara {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.hp-gzs-kart { display: flex; flex-direction: column; gap: 8px; text-decoration: none; }
.hp-gzs-kapak {
  display: block; aspect-ratio: 1 / 1.41; overflow: hidden;
  border-radius: 10px;
  background: var(--hp-surface-high);
  box-shadow: rgba(0,0,0,.1) 0 2px 8px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.hp-gzs-kapak img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp-gzs-kart:hover .hp-gzs-kapak { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(16,20,26,.18); }
.hp-gzs-ad {
  font-size: 12.5px; font-weight: 700; text-align: center;
  color: var(--hp-on-surface-variant);
}
.hp-gzs-kart:hover .hp-gzs-ad { color: var(--hp-primary); }

.hp-gzs-tek { margin: 0 0 8px; }
.hp-gzs-tek img {
  width: 100%;  height: auto; display: block;
  border-radius: 12px; box-shadow: 0 10px 30px rgba(16,20,26,.16);
  cursor: zoom-in;
}
.hp-gzs-tek figcaption { margin-top: 10px; }

/* ---------------------------------------------------------------------
   BURÇ
   --------------------------------------------------------------------- */
.hp-bc-yorum {
  padding: 22px; border-radius: 16px;
  background: var(--hp-surface-lowest);
  box-shadow: rgba(0,0,0,.08) 0 1px 3px;
}
.hp-bc-basi {
  display: flex; align-items: center; gap: 16px;
  padding-bottom: 16px; margin-bottom: 16px;
  border-bottom: 1px solid var(--hp-outline-variant);
}
.hp-bc-simge { flex: 0 0 auto; width: 72px; height: 72px; }
.hp-bc-ad {
  display: block;
  font-family: var(--hp-font-headline); font-size: 26px; line-height: 1.1;
  text-transform: uppercase; color: var(--hp-on-surface);
}

.hp-bc-izgara {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
}
.hp-bc-kart {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 18px 12px; border-radius: 14px;
  background: var(--hp-surface-lowest);
  box-shadow: rgba(0,0,0,.08) 0 1px 3px;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.hp-bc-kart:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(16,20,26,.12); }
.hp-bc-gorsel { width: 64px; height: 64px; }
.hp-bc-gorsel img { width: 100%; height: 100%; object-fit: contain; display: block; }
.hp-bc-kart-ad { font-size: 15px; font-weight: 700; color: var(--hp-on-surface); }
.hp-bc-kart:hover .hp-bc-kart-ad { color: var(--hp-primary); }
.hp-bc-kart-tarih { font-size: 11px; color: var(--hp-outline); text-align: center; }
.hp-bc-rozet {
  position: absolute; top: 8px; right: 8px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 999px;
  background: var(--hp-primary); color: var(--hp-on-primary);
}

@media (max-width: 575.98px) {
  .hp-nmz-kartlar { grid-template-columns: repeat(2, 1fr); }
  .hp-nmz-saat { margin-left: 0; }
  .hp-gzs-izgara { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .hp-bc-izgara { grid-template-columns: repeat(2, 1fr); }
  .hp-bc-yorum { padding: 18px; }
  .hp-yol-oge { padding: 14px; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .hp-gzs-kart:hover .hp-gzs-kapak,
  .hp-bc-kart:hover { transform: none; }
  .hp-svc-not.is-tazeleniyor .hp-ico { animation: none; }
}