/* Lumii Design köprüsü — kabuk, kart ve nesneler.
 *
 * app.css'ten SONRA yüklenir ve onun koyu-yeşil (apollo) katmanını Lumii
 * görünümüne çevirir: düz yüzey, 1 px çizgi, köşe `--radius-card`,
 * kategori rengi yalnızca kartın üst kenarında ve rakamda. app.css'e
 * dokunulmadı; bu dosya kaldırılırsa eski görünüm aynen döner.
 *
 * Seçici öneki `html:root` BİLİNÇLİ: app.css'teki `.dark .x` (0,2,0)
 * kurallarını, `!important` yağdırmadan geçmek için (0,2,1) özgüllük.
 * Renk değerleri hep Lumii rol/temel token'larından; sabit renk yok. */

/* ── Yazı ── */
html:root body {
  font-family: var(--font);
  font-variant-numeric: tabular-nums;   /* mono yerine hizalı rakam */
  color: var(--ink);
  background: var(--bg);
  background-image: none;
}
html:root .font-data-mono, html:root .font-data-mono-lg,
html:root .font-ui-body, html:root .font-ui-sm, html:root .font-ui-label-bold,
html:root .font-doc-header-md, html:root .font-doc-header-lg,
html:root .font-mono {
  font-family: var(--font);
}

/* ── Kabuk: Lumii `o-app-shell` yan menüsü ── */
html:root nav.fixed.left-0 {
  background: var(--surface);
  background-image: none;
  border-right: 1px solid var(--line);
  color: var(--ink);
}
html:root nav.fixed.left-0 a { color: var(--ink); }
html:root nav.fixed.left-0 a:hover { background-color: var(--line-soft); }
html:root nav.fixed.left-0 .menu-oge.bg-primary-fixed {
  background-color: var(--accent-minor-fill) !important;
  color: var(--accent-minor-front) !important;
  box-shadow: inset 3px 0 0 var(--accent-major-fill);
}
html:root nav.fixed.left-0 .menu-oge.text-on-primary-fixed { color: var(--accent-minor-front) !important; }
html:root nav.fixed.left-0 .text-on-surface,
html:root nav.fixed.left-0 .text-on-surface-variant { color: var(--muted) !important; }
html:root nav.fixed.left-0 .menu-oge .font-ui-body { color: inherit; }
html:root nav.fixed.left-0 .text-outline { color: var(--muted) !important; }
html:root nav.fixed.left-0 .text-primary { color: var(--primary) !important; }
html:root nav.fixed.left-0 [class*="border-outline"] { border-color: var(--line) !important; }

.mod-anahtari { display: flex; margin: 4px 12px 10px; }
.mod-anahtari > label { flex: 1; }
.mod-anahtari > label > span { flex: 1; justify-content: center; padding: 0 .5rem; }

/* ── Üst çubuk ── */
html:root header.fixed.top-0 {
  background: var(--surface);
  background-image: none;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
html:root header.fixed.top-0 .text-on-surface,
html:root header.fixed.top-0 .text-on-surface-variant { color: var(--muted) !important; }
html:root header.fixed.top-0 #ust-baslik { color: var(--ink) !important; font-weight: 700; }
html:root header.fixed.top-0 button { color: var(--muted); }
html:root .canli-serit b { color: var(--ink); }
html:root .canli-serit i { color: var(--muted); }
html:root .canli-serit .uretim b { color: var(--ink); }
.canli-serit .oge { align-items: center; }
.veri-rozeti { margin-left: 6px; font-size: 10px; letter-spacing: .04em; }

.saha-sabit { font-size: var(--text-s); color: var(--muted); }
.saha-secici { position: relative; display: inline-block; }
html:root .saha-secici > select {
  height: 2rem; min-width: 14rem; padding: 0 2.25rem 0 .5rem;
  font-size: var(--text-s); color: var(--ink);
  background: var(--line-soft); border: 0; border-bottom: 1px solid var(--muted);
  border-radius: var(--radius-control);
}
.saha-secici::after { right: .5rem; }

/* ── Bölüm başlığı: Lumii başlık ölçeği, süs çizgisi yok ── */
html:root .bolum-basligi { color: var(--muted); letter-spacing: .04em; }
html:root .bolum-basligi::before { display: none; }

/* ── Notlar: Lumii `a-notification` nötr görünümü ── */
html:root .ges-not,
html:root .kart-notu,
html:root .yer-tarama .kart-notu {
  background: var(--line-soft);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-control);
  color: var(--ink);
}
/* Satır kırpma dolgu alanına taşar (overflow dolgu kenarında kesiliyor)
   ve üçüncü satırın üst yarısı görünüyordu. Alt dolgu aynı renkte bir
   kenarlığa dönüşür: kenarlık kırpılan alanın DIŞINDA. */
.katli {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; position: relative; cursor: pointer;
  padding-right: 84px !important;
  padding-bottom: 0 !important;
  border-bottom: 12px solid var(--line-soft) !important;
}
.katli::after {
  content: "devamı ▾"; position: absolute; right: 12px; bottom: 8px;
  font-size: 12px; font-weight: 600; color: var(--primary);
  background: var(--line-soft); padding-left: 6px;
}
.katli.acik { display: block; -webkit-line-clamp: unset; }
.katli.acik::after { content: "kapat ▴"; }

/* ── Kartlar: koyu-doygun kutular → Lumii `m-card` ──
   Kategori rengi (--renk) üst kenarda ve rakamda kalır. Açık zeminde
   parlak tonlar okunmuyordu; metinde mürekkeple karıştırılır, dolgu
   (çubuk, kenar) olduğu gibi kalır. */
html:root :is(.op-dosem, .kayip-kart, .olcu-kutu, .kirlenme-panel,
  .isletme-panel, .yer-olcu, .yer-kunye, .yer-tarama, .gol-panel,
  .bento, .kazanc-kart, .op-serit, .op-durum) {
  --renk-metin: color-mix(in oklab, var(--renk, var(--primary)) 62%, var(--ink));
  --c-on-surface: var(--ink);
  --c-on-surface-variant: var(--muted);
  --c-outline: var(--muted);
  --c-outline-variant: var(--line);
  background: var(--surface);
  background-image: none;
  border: 1px solid var(--line);
  border-top: 3px solid var(--renk, var(--primary));
  border-radius: var(--radius-card);
  box-shadow: none;
  color: var(--ink);
}
html:root :is(.kayip-kart, .kirlenme-panel, .isletme-panel, .yer-olcu)::before { display: none; }
html:root :is(.bento, .kayip-kart, .kirlenme-panel, .isletme-panel)::after { display: none; }

/* Kart içindeki metin: koyu zemin tonları → Lumii */
html:root :is(.op-dosem, .kayip-kart, .kirlenme-panel, .isletme-panel, .yer-kunye, .yer-tarama, .gol-panel)
  :is(.ust .no, .manset b, .not b, .marj b, .sonuc b, .para-kutu) { color: var(--renk-metin); }
html:root :is(.op-dosem, .kayip-kart) .ust .rozet {
  color: var(--renk-metin); border-color: var(--renk-metin);
  background: color-mix(in srgb, var(--renk, var(--primary)) 12%, var(--surface));
}
html:root :is(.yer-kunye, .yer-tarama, .gol-panel) .ust .no { color: var(--primary); }
html:root .yer-olcu .ad { color: var(--renk-metin); }
html:root :is(.yer-olcu, .olcu-kutu) .deger,
html:root .yer-kunye dd,
html:root .tarama-karar,
html:root .tarama-grafik .efsane b,
html:root .tarama-tablo tr.secili td { color: var(--ink); }
html:root .olcu-kutu .ad,
html:root .tarama-tablo th { color: var(--muted); opacity: 1; }
html:root .olcu-kutu .deger.eksi { color: var(--err); }
html:root .tarama-tablo th { border-bottom-color: var(--line); }
html:root .tarama-tablo td { border-bottom-color: var(--line-soft); }
html:root .tarama-tablo tr.secili td { background: var(--accent-minor-fill); }
html:root .yer-kunye dl > div { border-bottom-color: var(--line-soft); }
html:root :is(.kayip-kart .aciklama) { border-left-color: var(--line); color: var(--muted); }
html:root :is(.isletme-panel .satirlar, .kirlenme-panel .basabas, .op-dosem .satirlar) { border-top-color: var(--line); }
html:root :is(.kayip-kart .pay, .isletme-panel .cubuk) { background: var(--line-soft); }
html:root .kirlenme-panel .ay i { background: color-mix(in srgb, var(--renk) 30%, var(--surface)); }
html:root .kirlenme-panel .ay.secili span { color: var(--renk-metin); }
html:root .kirlenme-panel .para-kutu { background: var(--surface); border-color: var(--line); }
html:root .kirlenme-panel.kavram { border-style: dashed; border-top-style: solid; }
html:root .kirlenme-panel .damga {
  background: var(--line-soft); border-color: var(--line); color: var(--muted);
}
html:root .bento, html:root .bento.derin { color: var(--ink); }
html:root .bento p, html:root .bento.derin p { color: var(--muted); opacity: 1; }

/* Yerleşim planı: çizim koyu zeminde okunuyor; Lumii grafit zemin */
html:root .yer-plan {
  background: #13181c;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}

/* ── Duruş Önleme durum kartları → Lumii `a-tile` ── */
html:root .durum-kart {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--kart-renk);
  border-radius: var(--radius-card);
  box-shadow: none;
}
html:root .durum-kart:hover { background: var(--line-soft); box-shadow: none; }
.demo-katli > summary { cursor: pointer; font-weight: 600; }

/* ── Senaryolar: yön rengi ── */
html:root .yon-iyi { color: var(--ok) !important; font-weight: 700; }
html:root .yon-kotu { color: var(--err) !important; font-weight: 700; }

/* ── Genel köşe ölçeği: Lumii `data-radius` ayarını izler ── */
html:root .tech-radius { border-radius: var(--radius-card); }
html:root .hap { border-radius: var(--radius-control); }
html:root .hap.dolu { background: var(--accent-major-fill); color: var(--accent-major-front); }

/* ── Kahraman bandı: Lumii grafit ──
   Yeşil (apollo) zemin → Lumii koyu nötr. Güneş konumundan gelen ışıma
   korunuyor (veri: sahanın o anki güneşi); nokta deseni nötr. */
html:root .bant-koyu {
  color: var(--ink);
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at var(--gunes-x) 4%,
      color-mix(in srgb, var(--warn-line) calc(22% * var(--gunes-guc)), transparent) 0%,
      transparent 46%),
    radial-gradient(circle, rgb(255 255 255 / .06) 1.2px, transparent 1.8px),
    radial-gradient(120% 150% at 78% 118%,
      color-mix(in srgb, var(--primary) 22%, transparent) 0%, transparent 65%),
    linear-gradient(160deg, #1b2228 0%, var(--bg) 100%);
  background-size: 100% 100%, 20px 20px, 100% 100%, 100% 100%;
}
html:root .bant-koyu::before {
  background: radial-gradient(circle, rgb(255 255 255 / .05) 1.2px, transparent 1.8px);
  background-size: 20px 20px;
}
html:root .karar-hucre {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: none;
}
html:root .karar-baslik, html:root .karar-ad { color: var(--muted); opacity: 1; }
html:root .karar-deger { color: var(--ink); }

/* Genel Bakış döşemelerinin görsel şeridi (video) — grafit zemin */
html:root .op-dosem .sahne { background-color: #13181c; }
html:root .op-dosem .sahne .solum { background: linear-gradient(180deg, transparent 40%, rgb(0 0 0 / .45) 100%); }