/* İframe ve statik tablo, tema kabından (1170px) taşarak tam genişliğe açılır.
   100vw kullanılmaz: Windows'ta kaydırma çubuğunu da sayar ve ~15px yatay
   taşma yaratır. --dp-vw değerini gomme.js clientWidth'ten yazar. */
.dp-tam {
  width: var(--dp-vw, 100%);
  max-width: var(--dp-vw, 100%);
  margin-left: calc(50% - var(--dp-vw, 100%) / 2);
  margin-right: calc(50% - var(--dp-vw, 100%) / 2);
}

/* margin kısayolu değil yalnız dikey uzun yazım: .dp-tam aynı elemanda
   margin-left/right'ı hesaplayarak taşırıyor (yukarı bakın); bir "margin: Ny
   0" kısayolu bu elemanla eşit özgüllükte olduğundan, kaynak sırasında
   sonra gelirse yatay marjini sıfırlayıp taşmayı iptal eder. Kısayol asla
   kullanılmaz ki kural sırası hiç önemli olmasın. */
.dp-cerceve { margin-top: 24px; margin-bottom: 24px; }
.dp-cerceve iframe {
  display: block;
  width: 100%;
  min-height: 760px;
  border: 0;
}

.dp-tablo-sarmal { margin-top: 24px; margin-bottom: 24px; overflow-x: auto; }

/* Statik tablo tam genişliğe açılır ama ekranın kenarlarına yapışmaz.
   Boşluk sarmalın kendi genişliğinden düşülür, padding ile verilmez: yatay
   kaydırma kutusunda sağ dolgu, kaydırma sonuna gelindiğinde tarayıcılar
   tarafından güvenilir biçimde gösterilmiyor.
   .dp-tam'dan daha özgül (iki sınıf) olduğu için genişliği ve marjini o
   kuraldan devralmaz — sıralamaya bağlı değildir. */
.dp-tablo-sarmal.dp-tam {
  --dp-kenar: 16px;
  width: calc(var(--dp-vw, 100%) - 2 * var(--dp-kenar));
  max-width: calc(var(--dp-vw, 100%) - 2 * var(--dp-kenar));
  margin-left: calc(50% - (var(--dp-vw, 100%) - 2 * var(--dp-kenar)) / 2);
  margin-right: calc(50% - (var(--dp-vw, 100%) - 2 * var(--dp-kenar)) / 2);
}

.dp-tablo {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  line-height: 1.45;
}
.dp-tablo caption {
  caption-side: top;
  text-align: left;
  font-weight: 700;
  padding: 0 0 8px;
}
.dp-tablo th,
.dp-tablo td {
  padding: 7px 10px;
  border-bottom: 1px solid #eee;
  border-right: 1px solid #ebebe8;
  text-align: left;
  white-space: nowrap;
}
.dp-tablo th {
  background: #ffb606;
  color: #4a3600;
  font-weight: 700;
  position: sticky;
  top: 0;
}
.dp-tablo tbody tr:nth-child(even) { background: #f6f6f4; }
.dp-not { font-size: 12px; color: #666; margin: 8px 0 0; }
.dp-uyari {
  padding: 10px 12px;
  border-left: 3px solid #d84315;
  background: #fdecea;
  font-size: 13px;
}

/* ---- başlatıcı kart ----
   Kart bilerek dp-tam değil: metin sütunu genişliğinde kalır. Tam genişliğe
   açılan tek şey veridir (tablo ve pano); bir çağrı kutusunun sayfanın
   kenarlarına yayılması ekran boyu bir banner gibi görünürdü. */
.dp-baslatici {
  /* Kutu içeriğiyle birlikte dursun. Açıklama zaten 62ch'de sarıyor; kutu
     serbest bırakılınca tam genişlikte bir sayfada içerik sol üst köşede
     kalıp sağda kocaman bir boşluk bırakıyordu. Metin sola hizalı kalır —
     iki satırlık akan metni ortalamak okumayı zorlaştırır ve soldaki amber
     vurgu çizgisiyle çelişir. */
  /* Genişliğe dolgu ve kenarlık dahil: tema box-sizing'i sıfırlamışsa kart
     760px'i aşıp ölçüyü kaydırmasın. */
  box-sizing: border-box;
  max-width: 760px;
  margin-top: 24px;
  margin-bottom: 24px;
  margin-left: auto;
  margin-right: auto;
  padding: 26px 28px 24px;
  border: 1px solid #e6e4de;
  border-left: 4px solid #ffb606;
  border-radius: 8px;
  background: linear-gradient(180deg, #fffdf6 0%, #fff 64%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.dp-baslatici-etiket {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9c7200;
}

.dp-baslatici-baslik {
  margin: 0 0 8px;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 700;
  color: #1b1b18;
}

.dp-baslatici-aciklama {
  margin: 0 0 18px;
  max-width: 62ch;
  font-size: 14px;
  line-height: 1.6;
  color: #55534c;
}

.dp-baslatici-sayilar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}
.dp-baslatici-sayilar li {
  margin: 0;
  padding: 5px 11px;
  border: 1px solid #ece9e0;
  border-radius: 999px;
  background: #fff;
  font-size: 12.5px;
  line-height: 1.4;
  color: #55534c;
  white-space: nowrap;
}
.dp-baslatici-sayilar strong { color: #1b1b18; font-weight: 700; }

.dp-baslatici-eylem {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin: 0;
}

/* Bağlantı seçicileri eleman adıyla nitelenir (a.dp-...): temalar çoğu zaman
   "a { color: ... }" yazıyor ve tek sınıflı bir kural onu yenemiyor. */
.dp-baslatici a.dp-baslatici-dugme {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 6px;
  background: #ffb606;
  color: #3d2c00;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  text-decoration: none;
  transition: background 0.15s ease;
}
.dp-baslatici a.dp-baslatici-dugme:hover,
.dp-baslatici a.dp-baslatici-dugme:focus {
  background: #f0a800;
  color: #3d2c00;
  text-decoration: none;
}
.dp-baslatici a.dp-baslatici-yeni {
  font-size: 13px;
  color: #6b6860;
  text-decoration: underline;
}

/* ---- tam ekran katman ----
   <dialog> + showModal(): odak tuzağı, ESC ve arka planın erişilebilirlik
   ağacından çıkarılması tarayıcıdan gelir; elle yazılan bir modalde bunların
   üçü de ayrı ayrı hataya açık. */
.dp-ortu {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: #fff;
  overflow: hidden;
}
/* Mobil tarayıcı çubuğu görünüp kaybolurken 100vh yanlış ölçüyor. */
@supports (height: 100dvh) {
  .dp-ortu { height: 100dvh; max-height: 100dvh; }
}
/* display yalnız açıkken: dialog kapalıyken UA "display: none" veriyor,
   koşulsuz bir flex kuralı katmanı kapalıyken de gösterirdi. */
.dp-ortu[open] { display: flex; flex-direction: column; }
.dp-ortu::backdrop { background: rgba(20, 18, 14, 0.6); }

.dp-ortu-bar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 12px;
  height: 48px;
  padding: 0 6px 0 16px;
  border-bottom: 1px solid #e6e4de;
  background: #fff;
}
.dp-ortu-baslik {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  color: #1b1b18;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dp-ortu a.dp-ortu-yeni {
  flex: 0 0 auto;
  font-size: 13px;
  color: #6b6860;
  text-decoration: underline;
  white-space: nowrap;
}
/* Kapatma kırmızı: katmanın tek çıkışı ve barın geri kalanı sessiz.
   Renk tek başına taşımaz — aria-label ve ✕ biçimi de var. */
.dp-ortu-kapat {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid #f3c8c4;
  border-radius: 6px;
  background: #fdeceb;
  color: #c92a1f;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.dp-ortu-kapat:hover,
.dp-ortu-kapat:focus {
  background: #c92a1f;
  border-color: #c92a1f;
  color: #fff;
}

.dp-ortu iframe {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
}

@media screen and (max-width: 767px) {
  .dp-cerceve iframe { min-height: 640px; }
  .dp-tablo { font-size: 12px; }
  .dp-tablo th, .dp-tablo td { padding: 6px 8px; }
  /* Dar ekranda geniş tablo zaten kaydırılıyor; boşluk görünür sütun
     sayısını daha fazla düşürmesin. */
  .dp-tablo-sarmal.dp-tam { --dp-kenar: 10px; }

  .dp-baslatici { padding: 20px 18px 18px; }
  .dp-baslatici-baslik { font-size: 19px; }
  .dp-baslatici a.dp-baslatici-dugme { display: block; text-align: center; }
  .dp-baslatici-eylem { display: block; }
  .dp-baslatici a.dp-baslatici-yeni { display: inline-block; margin-top: 12px; }

  .dp-ortu-bar { padding-left: 12px; }
  /* Dar ekranda başlık ve kapat düğmesi kalır; bağlantı yer kaplıyor. */
  .dp-ortu a.dp-ortu-yeni { display: none; }
}

@media print {
  /* İkisi de etkileşim öğesi: kâğıtta karşılığı olan statik tablodur. */
  .dp-baslatici,
  .dp-ortu { display: none !important; }
}