/* ===========================================================================
   ELT Fiyat Listesi — frontend tablo.

   Görsel dil meridyen soft-skin paleti ve offer-v7 ile uyumludur, ama eklenti
   KENDİ KENDİNE YETERLİDİR: tema değişse de tablo okunur kalır. Token'lar
   .eltfl altında yerel olarak tanımlanır, temanın :root'una bağımlı değildir.
   =========================================================================== */

.eltfl {
  --eltfl-navy: #2b3d66;
  --eltfl-navy-900: #1a2742;
  --eltfl-navy-50: #eaedf5;
  --eltfl-ink: #1d2230;
  --eltfl-muted: #6b7180;
  --eltfl-line: #e8e5dd;
  --eltfl-line-2: #efece4;
  --eltfl-card: #ffffff;
  --eltfl-cream: #faf8f3;
  --eltfl-red: #ca2628;
  --eltfl-radius: 16px;
  --eltfl-shadow: 0 1px 2px rgba(60, 48, 28, .04), 0 18px 46px -22px rgba(60, 48, 28, .18);
  /* Yapışan satırların SABİT yükseklikleri (dolgu + line-height + kenarlık).
     Her kademe bir üstündekinin tam altında durur: thead → şube → bölüm.
     Yükseklik ile `top` ayrı yerlerde hesaplanırsa arada boşluk ya da üst
     üste binme olur; bu yüzden hepsi buradaki değişkenlerden türetilir ve
     yapışan satırlarda metin kaydırılmaz (nowrap). */
  --eltfl-cell-py: .7rem;
  --eltfl-head-lh: 1.2rem;
  --eltfl-head-h: calc(var(--eltfl-cell-py) * 2 + var(--eltfl-head-lh));
  --eltfl-school-pt: 1.1rem;
  --eltfl-school-lh: 1.4rem;
  --eltfl-school-h: calc(2px + var(--eltfl-school-pt) + var(--eltfl-school-lh) + var(--eltfl-cell-py) + 1px);
  --eltfl-section-lh: 1.2rem;

  margin: 1.8rem 0;
  color: var(--eltfl-ink);
  font-size: 1rem;
  line-height: 1.5;
}

.eltfl *,
.eltfl *::before,
.eltfl *::after { box-sizing: border-box; }

/* Yatay kaydırma SARMALAYICIDA kalır; sayfa gövdesi kaymaz. */
.eltfl__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--eltfl-card);
  border: 1px solid var(--eltfl-line);
  border-radius: var(--eltfl-radius);
  box-shadow: var(--eltfl-shadow);
}

/* meridyen core.js tabloyu .table-scroll ile sarar; temanın verdiği dikey
   margin kartın içinde üstte ve altta sabit beyaz şerit bırakır. Kaydırma
   ipucu gradyanı (background-image) korunur, yalnız margin sıfırlanır. */
.eltfl .eltfl__scroll .table-scroll { margin: 0; }

/* Klavyeyle kaydırılabilir bölge olduğu için odak görünür olmalı. */
.eltfl__scroll:focus-visible {
  outline: 3px solid var(--eltfl-navy);
  outline-offset: 2px;
}

.eltfl-table {
  width: 100%;
  min-width: 560px;
  /* separate + 0 aralık: collapse'ta kenarlık tabloya ait olur ve yapışan
     hücrenin çizgisi içerikle birlikte kayıp gider. Görünüm aynıdır. */
  border-collapse: separate;
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.eltfl-table__caption {
  caption-side: top;
  text-align: left;
  padding: 1.1rem 1.2rem .8rem;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--eltfl-navy-900);
}

.eltfl-table th,
.eltfl-table td {
  padding: var(--eltfl-cell-py) .9rem;
  text-align: left;
  border-bottom: 1px solid var(--eltfl-line-2);
  vertical-align: top;
}

/* Özgüllük (0,2,3) bilerek: meridyen core.js tabloyu .table-scroll ile sarar ve
   `.entry-content .table-scroll thead th{background:var(--bg)}` (0,2,2) basar.
   Daha zayıf seçicide lacivert zemin kremleşir, beyaz başlık okunmaz olur. */
.eltfl .eltfl-table thead tr th {
  position: sticky;
  top: 0;
  z-index: 3;
  height: var(--eltfl-head-h);
  line-height: var(--eltfl-head-lh);
  background: var(--eltfl-navy);
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
  border-bottom: 0;
}

.eltfl-table tbody tr:last-child th,
.eltfl-table tbody tr:last-child td { border-bottom: 0; }

.eltfl-table tbody tr:hover td,
.eltfl-table tbody tr:hover th { background: var(--eltfl-cream); }

.eltfl-table tbody th[scope="row"] {
  font-weight: 600;
  color: var(--eltfl-navy-900);
  min-width: 220px;
}

/* Bölüm başlığı satırı (Eğitim / Konaklama / Diğer Masraflar).
   Üstündeki yapışan satırın hemen altına YAPIŞIR: tek şubelik tabloda thead,
   çok şubelik tabloda şube satırı. Sonraki bölüm gelince öncekinin üstüne
   biner; zemin bu yüzden opaktır. */
.eltfl .eltfl-table tbody tr.eltfl-section th {
  position: sticky;
  top: var(--eltfl-head-h);
  z-index: 1;
  line-height: var(--eltfl-section-lh);
  white-space: nowrap;
}
.eltfl .eltfl-table--multi tbody tr.eltfl-section th {
  top: calc(var(--eltfl-head-h) + var(--eltfl-school-h));
}
.eltfl-section th {
  background: var(--eltfl-navy-50);
  color: var(--eltfl-navy-900);
  font-size: .8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.eltfl-table tbody tr.eltfl-section:hover th { background: var(--eltfl-navy-50); }

/* Okulsuz fiyat tablosunda şube başlığı satırı — bölüm satırının bir üst
   kademesi: daha büyük yazı ve üstte kalın bir ayırıcı.
   thead'in hemen altına YAPIŞIR: aşağı inildikçe hangi okulun fiyatlarına
   bakıldığı kaybolmaz. Sonraki şube satırı gelince öncekinin üstüne biner
   (aynı z-index, DOM'da sonra gelen üstte); zemin bu yüzden opaktır. */
.eltfl .eltfl-table tbody tr.eltfl-school th {
  position: sticky;
  top: var(--eltfl-head-h);
  z-index: 2;
  padding-top: var(--eltfl-school-pt);
  line-height: var(--eltfl-school-lh);
  white-space: nowrap;
}
.eltfl-school th {
  background: var(--eltfl-cream);
  color: var(--eltfl-navy-900);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.01em;
  border-top: 2px solid var(--eltfl-navy);
}
/* İlk şubenin çizgisi gizlenir ama KALINLIĞI korunur — kaldırılsa bu satır
   2px kısalır ve altına yapışan bölüm satırıyla arasında boşluk kalırdı. */
.eltfl-table tbody tr.eltfl-school:first-child th { border-top-color: transparent; }
.eltfl-table tbody tr.eltfl-school:hover th { background: var(--eltfl-cream); }

/* Hafta kolonları sayısal → sağa hizalı ve dar. */
.eltfl-table .eltfl-col--week { text-align: right; white-space: nowrap; }
.eltfl-table thead .eltfl-col--week { text-align: right; }

.eltfl-table .eltfl-col--price { text-align: right; white-space: nowrap; }
.eltfl-table .eltfl-col--programId { color: var(--eltfl-muted); }
.eltfl-table .eltfl-col--url a { color: var(--eltfl-navy); font-weight: 600; }
.eltfl-table .eltfl-col--url a:hover { color: var(--eltfl-red); }
.eltfl-table .eltfl-col--termsLink a { color: var(--eltfl-navy); font-weight: 600; }

/* Okul/bölüm adına tanımlanmış bağlantı (madde 5). */
.eltfl-link {
  color: var(--eltfl-navy);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.eltfl-link:hover,
.eltfl-link:focus-visible { color: var(--eltfl-red); }

/* Sayısal okul alanları sağa hizalı. */
.eltfl-table .eltfl-col--programCount { text-align: right; white-space: nowrap; }
.eltfl-table .eltfl-col--rankQsWorld,
.eltfl-table .eltfl-col--rankTimes { text-align: right; white-space: nowrap; }

/* Para: tutar ve birim satır sonunda AYRILMAZ. */
.eltfl-money { white-space: nowrap; }
.eltfl-money__currency {
  margin-left: .25em;
  font-size: .82em;
  font-weight: 600;
  color: var(--eltfl-muted);
}

/* Boş hücre — "fiyat yok". 0 (ücretsiz) bundan farklı görünür: 0 gerçek bir
   değerdir ve normal tutar gibi basılır. */
.eltfl-empty { color: #c9c6bd; }

/* ---------------------------------------------------------------------------
   "Tabloyu büyüt" (eltfl.js): düğme yalnız geniş ekranda ve tablo kutusuna
   sığmadığında eklenir; tabloyu ekranı kaplayan bir pencereye taşır.
   --------------------------------------------------------------------------- */

/* Düğme kartın sağ üst köşesine, başlık satırının hizasına oturur. Kaydırılan
   içeriğin DIŞINDADIR (karta göre konumlanır): tablo yana ya da aşağı
   kaydırılsa da yerinde kalır. Sağdan boşluk dikey kaydırma çubuğunu açıkta
   bırakır. `[data-eltfl]` bilerek: aynı sınıfı taşıyan pencereye (dialog)
   `position` verilirse tarayıcının `fixed` konumu ezilirdi. */
.eltfl[data-eltfl] { position: relative; }

.eltfl__tools {
  position: absolute;
  top: .7rem;
  right: 1.5rem;
  z-index: 5;
}
.eltfl__tools[hidden] { display: none; }

.eltfl__expand,
.eltfl-dialog__close {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .8rem;
  border: 1px solid var(--eltfl-line);
  border-radius: 999px;
  background: var(--eltfl-card);
  color: var(--eltfl-navy);
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}

/* Yalnız ikon, yarı saydam: aşağı kaydırıldığında altından geçen başlık
   satırını kapatmaz; üzerine gelince ya da odaklanınca tam görünür olur. */
.eltfl__expand {
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  opacity: .65;
  transition: opacity .15s;
}
.eltfl__expand:hover,
.eltfl__expand:focus-visible { opacity: 1; }
.eltfl__expand span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.eltfl__expand:hover,
.eltfl-dialog__close:hover { border-color: var(--eltfl-navy); background: var(--eltfl-navy-50); }
.eltfl__expand:focus-visible,
.eltfl-dialog__close:focus-visible { outline: 3px solid var(--eltfl-navy); outline-offset: 2px; }

html.eltfl-dialog-open { overflow: hidden; }

.eltfl-dialog {
  width: min(96vw, 1700px);
  max-width: none;
  max-height: 92vh;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--eltfl-radius);
  background: var(--eltfl-card);
  color: var(--eltfl-ink);
  box-shadow: 0 30px 80px -20px rgba(20, 26, 44, .55);
  overflow: hidden;
}
/* `display` yalnız açıkken verilir; aksi hâlde kapalı pencere de görünürdü. */
.eltfl-dialog[open] { display: flex; flex-direction: column; }
.eltfl-dialog::backdrop { background: rgba(20, 26, 44, .6); }

.eltfl-dialog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 1.2rem;
  border-bottom: 1px solid var(--eltfl-line);
}
.eltfl-dialog__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--eltfl-navy-900);
}

.eltfl-dialog__body {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* Pencerede TEK kaydırma konteyneri .eltfl__scroll'dur; yapışan başlıklar ona
   göre yapışır. Temanın sarmalayıcısı (.table-scroll) burada kaydırmaz. */
.eltfl-dialog .eltfl__scroll {
  flex: 1;
  min-width: 0;
  overflow: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.eltfl-dialog .eltfl__scroll .table-scroll {
  max-height: none;
  margin: 0;
  overflow: visible;
}
/* Başlık pencerenin üst şeridinde durur; tablonun içinde tekrarlanmaz. */
.eltfl-dialog .eltfl-table__caption { display: none; }

@media print {
  .eltfl__tools { display: none; }
}

/* Yalnız yöneticiye görünen hata kutusu. */
.eltfl-notice {
  margin: 1.5rem 0;
  padding: .9rem 1.1rem;
  background: #fcf9e8;
  border-left: 4px solid #dba617;
  border-radius: 6px;
  font-size: .92rem;
  color: #4a3f18;
}

@media (max-width: 640px) {
  .eltfl { --eltfl-cell-py: .6rem; }
  .eltfl-table th,
  .eltfl-table td { padding: var(--eltfl-cell-py) .7rem; font-size: .9rem; }
  .eltfl-table tbody th[scope="row"] { min-width: 170px; }
  .eltfl-table__caption { padding: .9rem 1rem .7rem; font-size: 1rem; }
}

@media print {
  .eltfl__scroll { overflow: visible; box-shadow: none; }
  .eltfl-table { min-width: 0; }
  .eltfl .eltfl-table thead tr th,
  .eltfl .eltfl-table tbody tr.eltfl-school th,
  .eltfl .eltfl-table tbody tr.eltfl-section th { position: static; }
  .eltfl .eltfl-table thead tr th { background: #eee; color: #000; }
}