/*!
 * İnsya Sayfa ilkelleri (önek: iu-page, iu-titlebar, iu-note). Detay / bölüm sayfalarının ortak iskeleti: her görünüm
 * elle kenar boşluğu, başlık çubuğu ya da açıklama kutusu tanımlamaz; PHP yardımcıları (helpers/insya_ui_helper.php)
 * bu sınıfları üretir. Renkler insya-ui.css belirteçlerinden (--iu-*) gelir: masaüstü teması ve karanlık mod otomatik uyar.
 *
 *   iu-page         Sayfa sarmalayıcısı: her kenarda aynı boşluk (--iu-page-gutter), en geniş ölçü (--iu-page-max).
 *     iu-page-body  Kart gövdesi (yüzey, çizgi, yuvarlak köşe, iç boşluk); tablolar kenara yapışmaz.
 *   iu-page--aside  Yan panelli yerleşim (CSS grid): iu-page-main + iu-page-aside--left | --right. Genişlik
 *                   --iu-page-aside-w ile (iu_page_aside_open ayarlar); dar ekranda paneller ana sütunun altına düşer.
 *   iu-titlebar     Bölüm başlık çubuğu: simge + iu-titlebar-title, sağda iu-titlebar-meta ("KM NO: 2058"),
 *                   isteğe bağlı iu-titlebar-actions.
 *   iu-note         Açıklama / ipucu kutusu: simge, isteğe bağlı iu-note-title, metin ya da iu-note-list maddeleri.
 *                   Tonlar: iu-note--info | --ok | --warn | --danger. <details class="iu-note"> ile katlanabilir.
 *
 *   PHP:  iu_page_open() / iu_page_close(), iu_page_main_open() / _close(), iu_page_aside_open($side, $width) / _close(), iu_titlebar($title, $icon, $meta, $actions_html),
 *         iu_note($items, ['title' => …, 'tone' => 'warn', 'collapsible' => true]), iu_note_history_hint()
 *
 * TODO(tasarım): kart gövdesi iç boşluğu ve başlık çubuğu yazı tipi ölçüsü masaüstü pencerelerinde gözle ayarlanmalı.
 */

/* ---------------- Sayfa ---------------- */
.iu-page {
  --iu-page-gutter: 16px;
  --iu-page-max: 1680px;
  box-sizing: border-box;
  width: 100%;
  max-width: var(--iu-page-max);
  margin: 0 auto;
  padding: var(--iu-page-gutter);
  color: var(--iu-ink);
}

.iu-page-body {
  box-sizing: border-box;
  min-width: 0;
  padding: 20px;
  background: var(--iu-surface);
  border: 1px solid var(--iu-line);
  border-radius: calc(var(--iu-radius) + 2px);
}

@media (max-width: 640px) {
  .iu-page { --iu-page-gutter: 8px; }
  .iu-page-body { padding: 12px; }
}

/* ---------------- Yan panelli yerleşim ----------------
 * Sütunlar auto / 1fr / auto: boş yan sütun 0 genişlikte kalır, boşluk panelin kendi kenar payından gelir.
 * Konum DOM sırasından değil sınıftan gelir. */
.iu-page--aside {
  --iu-page-aside-gap: 20px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
}

.iu-page-main { grid-column: 2; grid-row: 1; min-width: 0; }

.iu-page-aside {
  box-sizing: border-box;
  grid-row: 1;
  width: var(--iu-page-aside-w, 290px);
  min-width: 0;
  padding: 12px 14px;
  background: var(--iu-surface-2);
  border: 1px solid var(--iu-line);
  border-radius: calc(var(--iu-radius) + 2px);
}

.iu-page-aside[hidden] { display: none; }
.iu-page-aside--left { grid-column: 1; margin-right: var(--iu-page-aside-gap); }
.iu-page-aside--right { grid-column: 3; margin-left: var(--iu-page-aside-gap); }

@media (max-width: 960px) {
  .iu-page--aside { grid-template-columns: minmax(0, 1fr); }
  .iu-page-main, .iu-page-aside { grid-column: 1; width: auto; margin: 0; }
  .iu-page-main { grid-row: 1; }
  .iu-page-aside { grid-row: auto; margin-top: var(--iu-page-aside-gap); }
}

/* ---------------- Bölüm başlık çubuğu ---------------- */
.iu-titlebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin: 0 0 16px;
  padding: 0 0 10px;
  border-bottom: 1px dashed var(--iu-line-strong);
}

.iu-titlebar-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font: 700 12px / 1.4 var(--iu-mono);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--iu-ink-soft);
}

.iu-titlebar-title .fa { margin-right: 4px; color: var(--iu-muted); }

.iu-titlebar-meta {
  flex: 0 0 auto;
  padding: 2px 8px;
  font: 600 11px / 1.5 var(--iu-mono);
  color: var(--iu-muted);
  background: var(--iu-surface-2);
  border: 1px solid var(--iu-line);
  border-radius: var(--iu-radius-sm);
}

.iu-titlebar-actions { display: flex; flex: 0 0 auto; gap: 6px; }

/* ---------------- Açıklama kutusu ---------------- */
.iu-note {
  --iu-note-tone: var(--iu-info);
  --iu-note-bg: var(--iu-info-soft);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 20px 0 4px;
  padding: 10px 14px;
  font-size: var(--iu-font);
  line-height: 1.5;
  color: var(--iu-ink);
  background: var(--iu-note-bg);
  border: 1px solid color-mix(in srgb, var(--iu-note-tone) 35%, var(--iu-line));
  border-radius: var(--iu-radius);
}

.iu-note--ok { --iu-note-tone: var(--iu-ok); --iu-note-bg: var(--iu-ok-soft); }
.iu-note--warn { --iu-note-tone: var(--iu-warn); --iu-note-bg: var(--iu-warn-soft); }
.iu-note--danger { --iu-note-tone: var(--iu-danger); --iu-note-bg: var(--iu-danger-soft); }

.iu-note-icon { flex: 0 0 auto; margin-top: 2px; font-size: 15px; color: var(--iu-note-tone); }
.iu-note-body { min-width: 0; flex: 1 1 auto; }
.iu-note-title { display: block; margin-bottom: 2px; font-weight: 600; color: var(--iu-note-tone); }
.iu-note-text, .iu-note-list { margin: 0; }
.iu-note-list { padding-left: 18px; }
.iu-note-list li + li { margin-top: 2px; }

/* Katlanabilir: başlık satırı tıklanır, gövde altında açılır */
details.iu-note { display: block; }
.iu-note-head { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; }
.iu-note-head::-webkit-details-marker { display: none; }
/* Aç/kapa oku: Lucide chevron (insya-icons.css), açıkken ters çevrilir */
.iu-note-head::after { content: ""; flex: none; margin-left: auto; width: 14px; height: 14px; background-color: var(--iu-muted); -webkit-mask: var(--iu-icon-chevron-down) center / contain no-repeat; mask: var(--iu-icon-chevron-down) center / contain no-repeat; }
details.iu-note[open] > .iu-note-head::after { transform: rotate(180deg); }
details.iu-note > .iu-note-body { margin: 6px 0 0 25px; }