/* Sunable AI — tema katmanı ve küçük düzeltmeler.
 *
 * Tailwind yapılandırması TEK bir palet taşıyor (Stitch açık tema üretti).
 * Koyu tema için markup'ın her yerine `dark:` varyantı serpmek yerine,
 * kullanılan token sınıfları burada `.dark` altında yeniden tanımlanır.
 * Sınıf listesi kısa ve tek yerde durduğu için bu, yüzlerce satıra varyant
 * eklemekten hem daha az hem de daha denetlenebilir.
 *
 * Palet SICAK kalır. Mavi-siyah bir koyu tema, açık temanın kireçtaşı
 * zeminiyle aynı ürün gibi durmazdı.
 */

/* Yazı tipi yüklenene kadar metin görünmez kalmasın. */
html { font-synthesis-weight: none; }

/* Material Symbols: fonts.css'teki @font-face'i kullanır. Yazı tipi
   yoksa ligatür adı (ör. "settings") olduğu gibi görünür — bu kabul
   edilebilir bir bozulma; ikon yerine boş kutu çıkmasından iyidir. */
.material-symbols-outlined {
  font-family: "Material Symbols Outlined", sans-serif;
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  vertical-align: -0.15em;
}

/* Sayı sütunlarında rakamlar hizalı olmalı; aksi halde göz karşılaştırma
   yapamaz ve bu üründe okunacak asıl şey sayılardır. */
.font-data-mono, input[type="number"] { font-variant-numeric: tabular-nums; }

/* Sayı girişlerindeki artırma okları yoğun formda yer kaplıyor. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }

/* ── Koyu tema ─────────────────────────────────────────────────────────── */

/* Renkler ARTIK BURADA TANIMLI DEĞİL, hepsi palet.css'teki `.dark`
   değişkenlerinden geliyor. Önceki hâlinde bir kısmı sabit hex'ti ve
   ölçüldü: gövde #191713 (çoktan terk edilmiş sıcak bir paletten
   kalma kahve-siyah), paneller yeşil, palet değişkenleri ise hâlâ
   AÇIK temanınki. Aynı ekranda üç ayrı renk ailesi vardı ve hiçbiri
   diğerini bilmiyordu.

   `color-scheme` de palet.css'e taşındı — tema ile beraber tanımlı
   olması gereken bir şey. */

.dark .bg-background              { background-color: var(--c-background); }
.dark .bg-surface                 { background-color: var(--c-surface); }
.dark .bg-surface-container-lowest{ background-color: var(--c-surface-container-lowest); }
.dark .bg-surface-container-low   { background-color: var(--c-surface-container-low); }
.dark .bg-surface-container       { background-color: var(--c-surface-container); }
.dark .bg-surface-container-high  { background-color: var(--c-surface-container-high); }
.dark .bg-surface-container-highest{background-color: var(--c-surface-container-highest); }
.dark .bg-primary                 { background-color: var(--c-primary); }
.dark .bg-primary-fixed           { background-color: var(--c-primary-fixed); }
.dark .bg-primary-container       { background-color: var(--c-primary-container); }
.dark .bg-secondary-container     { background-color: var(--c-secondary-container); }
.dark .bg-tertiary-container      { background-color: var(--c-tertiary-container); }
.dark .bg-outline                 { background-color: var(--c-outline); }

.dark .text-on-surface            { color: var(--c-on-surface); }
.dark .text-on-surface-variant    { color: var(--c-on-surface-variant); }
.dark .text-outline               { color: var(--c-outline); }
.dark .text-primary               { color: var(--c-primary); }
.dark .text-on-primary            { color: var(--c-on-primary); }
.dark .text-on-primary-fixed      { color: var(--c-on-primary-fixed); }
.dark .text-secondary             { color: var(--c-secondary); }
.dark .text-tertiary-container    { color: var(--c-tertiary); }
.dark .text-error                 { color: var(--c-error); }

.dark .border-outline-variant     { border-color: var(--c-outline-variant); }
.dark .divide-outline-variant > * + * { border-color: var(--c-outline-variant); }
.dark .border-primary             { border-color: var(--c-primary); }
.dark .border-secondary           { border-color: var(--c-secondary); }
.dark .border-error               { border-color: var(--c-error); }

/* Isı haritası ve gölge gülü hücreleri koyu zeminde kaybolmasın:
   arkaplanı biraz açarak sıfır değerin de bir dokusu olsun. */
.dark [style*="background:transparent"] { background: var(--c-surface-container) !important; }

/* İkon yazı tipi yüklenemediğinde (kurumsal ağ, ilk kurulum) ligatür adı
   çıplak metin olarak görünür — "inventory_2", "precision_manufacturing".
   Eksik ikondan kötüdür: arayüz bozuk değil, ÖZENSİZ görünür. app.js
   yazı tipini gerçekten yüklenmiş mi diye sorar ve yüklenmemişse
   <html> üzerine `ikonsuz` koyar. Burada ikonlar nötr bir kareye düşer;
   yerleşim kaymaz çünkü kare aynı genişlikte durur. */
.ikonsuz .material-symbols-outlined {
  font-size: 0 !important;
  width: 1em;
  height: 1em;
  border: 1px solid currentColor;
  opacity: .35;
  border-radius: 1px;
}

/* ══════════════════════════════════════════════════════════════════════
   STITCH BİLEŞEN KATMANI

   Bu sınıflar Stitch'in mockup'larında <style> bloklarında tanımlıydı ve
   ilk aktarımda GÖZDEN KAÇTI: yalnızca Tailwind yardımcı sınıflarını
   taşımıştım. Ölçüldü — Stitch 633 farklı sınıf kullanıyor, bende 200
   vardı ve ortak olan yalnızca 143'tü.

   Kaçanların çoğu tesadüfi değil, tasarımın KARAKTERİYDİ: 3px köşe,
   150 ms geçişler, panel başlığı/gövdesi ayrımı, saç teli ızgara,
   tabular rakamlar, ince kaydırma çubuğu. Bunlar olmadan arayüz "aynı
   renklerde ama başka bir ürün" gibi duruyor.

   theme() çağrıları gerçek değerlerle yazıldı; bu dosya Tailwind
   derlemesinden geçmiyor.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Kenarlık yardımcıları ── */
.tech-border    { border: 1px solid var(--c-outline-variant, #DBE7E1); }
.tech-border-b  { border-bottom: 1px solid var(--c-outline-variant, #DBE7E1); }
.tech-border-r  { border-right: 1px solid var(--c-outline-variant, #DBE7E1); }
.tech-border-t  { border-top: 1px solid var(--c-outline-variant, #DBE7E1); }
.tech-radius    { border-radius: 3px; }
.cizgi, .border-cizgi { border-color: var(--c-outline-variant, #DBE7E1); }

/* ── Panel: başlık + gövde ──
   Stitch'in her kutusu bu ikiliden oluşuyor. Başlık daha koyu zeminli ve
   alt çizgili; gövde 12px dolgulu. Ben bunu her seferinde elle
   yazıyordum ve tutarsızlaşıyordu. */
.panel-header {
  /* Düz renk yerine çok hafif bir gradyan: düz dolgu yassı duruyor.
     Yıkama NÖTR; önce turkuazdı ve açık tema renksiz nötre geçince
     panel başlıkları sayfada kalan tek yeşilimsi yüzey oldu. */
  background-image: linear-gradient(180deg,
    rgba(22, 25, 29, .035) 0%, rgba(22, 25, 29, 0) 100%);
  padding: 12px;
  border-bottom: 1px solid var(--c-outline-variant, #DBE7E1);
  background-color: var(--c-surface-container, #EDF3F0);
  font-family: "Public Sans", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  /* SABİT SİYAH DEĞİL. Stitch'ten devralınan `#1d1b18` açık temada
     doğruydu ama koyu temada koyu yeşilin üstünde koyu gri kalıyordu:
     ölçüldü, kontrast 1,34 — okunmuyor. Panel başlığı sayfanın en çok
     tekrar eden öğesi, yani hata her sayfada on kere görünüyordu. */
  color: var(--c-on-surface, #1d1b18);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.panel-content { padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.panel-border  { border: 1px solid var(--c-outline-variant, #DBE7E1); }

/* ── Yoğun ızgara ──
   Hücreler arasında 1px boşluk bırakıp zemini çizgi rengine boyamak,
   ayrı ayrı kenarlık vermeden saç teli bir ızgara üretir. Gölge yerine
   çizgi kuralının en ekonomik hâli. */
.dense-grid { gap: 1px; background-color: var(--c-outline-variant, #DBE7E1); }
.grid-cell      { border-bottom: 1px solid var(--c-outline-variant, #DBE7E1); padding: 8px 12px; }
.grid-cell-end  { padding: 8px 12px; }

/* ── Sayılar ──
   Tabular rakamlar olmadan sütunlar kayar ve bu üründe okunacak asıl şey
   sayılardır. */
.data-number { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }

/* ── Satır ve seçim ── */
.table-row-hover:hover { background-color: rgba(230, 226, 220, .3); }
.selected { background-color: var(--c-primary-fixed, #D6F0EA); border-left: 2px solid var(--c-primary, #00806F); }

/* ── Form satırı ── */
.form-row {
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--c-outline-variant, #DBE7E1); padding: 6px 0;
}
.form-row:last-child { border-bottom: none; }
.form-label { font-family: "Public Sans", system-ui, sans-serif; font-size: 13px; color: #414944; }
.form-value { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; text-align: right; }

/* ── KPI satırı ── */
.kpi-row {
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--c-outline-variant, #DBE7E1); padding-bottom: 8px; margin-bottom: 8px;
}
.kpi-row:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

/* ── Özet şeridi ── */
.summary-bar {
  padding: 8px 16px; background-color: var(--c-surface-container, #EDF3F0);
  border-top: 1px solid var(--c-outline-variant, #DBE7E1);
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px;
}

/* ── Kontroller ── */
.tech-checkbox {
  appearance: none; width: 14px; height: 14px;
  border: 1px solid var(--c-outline, #7A9488); border-radius: 2px;
  background-color: #fff; position: relative; cursor: pointer;
  flex-shrink: 0;
}
.tech-checkbox:checked { background-color: var(--c-primary, #00806F); border-color: var(--c-primary, #00806F); }
.tech-checkbox:checked::after {
  content: ""; position: absolute; left: 4px; top: 1px;
  width: 4px; height: 8px; border: solid #fff;
  border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.tech-checkbox:disabled { opacity: .5; cursor: not-allowed; }
.tech-focus:focus { outline: none; border-color: var(--c-primary, #00806F); }

/* ── İkon boyu ── */
.icon-sm { font-size: 16px; }
.fill, .filled-icon { font-variation-settings: "FILL" 1; }
.tooltip-icon { color: #ba1a1a; cursor: help; font-size: 16px; margin-left: 4px; vertical-align: middle; }

/* ── İnce kaydırma çubuğu ──
   Yoğun bir arayüzde kalın kaydırma çubuğu yer yiyor ve tasarımın
   "alet" karakterini bozuyor. */
.custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: #fff; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: var(--c-outline-variant, #DBE7E1); border-radius: 3px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: var(--c-outline, #7A9488); }

/* ── Koyu tema karşılıkları ── */
/* `--c-inverse-on-surface` DEĞİL. O token "ters yüzeyin üstündeki
   yazı" demek — açık bir çipin üstüne konacak koyu metin. Koyu temada
   normal bir panel başlığına verilince metin zeminin rengine eşitleniyor
   ve başlık kayboluyor: ölçüldü, kontrast 1,34. Panel başlığı sayfanın
   en çok tekrar eden öğesi, yani hata her sayfada on kere görünüyordu. */
.dark .panel-header {
  background-color: var(--c-surface-container);
  border-bottom-color: var(--c-outline-variant);
  color: var(--c-on-surface);
}
.dark .tech-border, .dark .panel-border { border-color: var(--c-outline-variant, #24382F); }
.dark .tech-border-b { border-bottom-color: var(--c-outline-variant, #24382F); }
.dark .tech-border-r { border-right-color: var(--c-outline-variant, #24382F); }
.dark .tech-border-t { border-top-color: var(--c-outline-variant, #24382F); }
.dark .cizgi, .dark .border-cizgi { border-color: var(--c-outline-variant, #24382F); }
.dark .dense-grid { background-color: var(--c-outline-variant, #24382F); }
.dark .grid-cell { border-bottom-color: var(--c-outline-variant, #24382F); }
.dark .table-row-hover:hover { background-color: rgba(58, 53, 44, .45); }
.dark .selected { background-color: var(--c-primary-fixed, #123830); border-left-color: #6fa98c; }
.dark .form-row, .dark .kpi-row { border-bottom-color: var(--c-outline-variant, #24382F); }
.dark .form-label { color: var(--c-on-surface-variant, #93AFA2); }
.dark .summary-bar { background-color: var(--c-surface-container, #172A24); border-top-color: var(--c-outline-variant, #24382F); }
.dark .tech-checkbox { background-color: var(--c-surface, #12211C); border-color: var(--c-outline, #6C7F76); }
.dark .tech-checkbox:checked { background-color: #6fa98c; border-color: #6fa98c; }
.dark .tech-checkbox:checked::after { border-color: var(--c-on-primary, #10231B); }
.dark .tech-focus:focus { border-color: #6fa98c; }
.dark .custom-scrollbar::-webkit-scrollbar-track { background: var(--c-background, #0B1613); }
.dark .custom-scrollbar::-webkit-scrollbar-thumb { background: var(--c-outline-variant, #24382F); }

/* ── Grafik renkleri ──
   Canvas CSS sınıfı kullanamaz, bu yüzden renkler özel değişken olarak
   tanımlanır ve JS bunları okur.

   BURADA TANIMLI DEĞİLLER ARTIK. Değerler tek yerde: viewer/palet.css.
   Bu blok Stitch'in eski sıcak paletinden kalma sabit renkler taşıyordu
   (#c2622a, #e08a4e, #6fa98c) ve app.css palet.css'ten SONRA yüklendiği
   için onları eziyordu — yani grafikler, arayüzün geri kalanı yeşile
   geçtikten sonra bile eski kahverengi-turuncu çizgilerle çiziliyordu.
   `--ges-isaret` de `--c-inverse-on-surface` okuyordu: koyu temada
   işaret zeminin rengine eşitleniyor, yani kayboluyordu. */


/* İKON LİGATÜRÜ VE text-transform.
   Material Symbols, ikon adını LİGATÜR olarak çözer ve adlar küçük
   harftir ("check", "close"). Üstündeki bir `uppercase` kuralı metni
   "CHECK" yapar, ligatür eşleşmez ve ekranda ikon yerine ÇIPLAK METİN
   görünür. Görsel denetimde tam olarak bu çıktı.
   Aynısı letter-spacing için de geçerli: harfler arası boşluk ligatürü
   böler. */
.material-symbols-outlined {
  text-transform: none !important;
  letter-spacing: normal !important;
  font-variant-ligatures: normal;
}

/* ── Stitch'in grafik ve yerleşim CSS'i ──
   Bileşen katmanını aktarırken .chart-* kurallarını atlamıştım ve
   Enerji Akış Diyagramı paneli BOŞ çıkıyordu. Bunlar CSS ile çizilmiş
   şematik grafikler; veri taşımazlar ama panelin kendisi onlarsız
   boş bir kutu oluyor. */
.app-container { display: flex; height: 100vh; overflow: hidden; }
.chart-container { position: relative; height: 160px; border: 1px solid var(--c-outline-variant, #DBE7E1); border-bottom: none; }
.chart-zone-label { position: absolute; top: 4px; left: 4px; font-family: 'IBM Plex Sans', sans-serif; font-size: 11px; color: #8c2f16; }
.main-content { display: flex; flex-direction: column; flex: 1; margin-left: 220px; margin-top: 48px; height: calc(100vh - 48px); }
.panel-header-border { border-bottom: 1px solid theme('colors.outline-variant'); }
.progress-animate { animation: progress 1.5s ease-out forwards; }
.workspace { display: flex; flex: 1; overflow: hidden; }

/* ══════════════════════════════════════════════════════════════════════
   YAZDIRMA

   Rapor sayfasındaki "PDF" düğmesi tarayıcının kendi yazdırma yoluna
   bağlı. Ekran yerleşimi olduğu gibi yazdırılırsa kâğıda kenar çubuğu,
   üst şerit ve düğmeler basılır; belge ciddiyetsiz görünür ve içerik
   sütunu daralır.

   Renkleri zorlamıyoruz: `print-color-adjust: exact` yazmak, mürekkep
   yakan koyu zeminleri kâğıda taşır. Bunun yerine zemin beyaza,
   mürekkep siyaha çekiliyor.
   ══════════════════════════════════════════════════════════════════════ */
@media print {
  /* Gezinme ve eylem öğeleri kâğıda basılmaz. */
  #kenar, #ust, [data-mock-uyari], button, select,
  .no-print { display: none !important; }

  #sayfa {
    margin: 0 !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* Kaydırma kapsayıcıları kâğıtta kesilmesin: içerik akmalı. */
  .overflow-auto, .overflow-hidden, .overflow-y-auto, .overflow-x-auto {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
  }

  body, #sayfa, .bg-surface, .bg-surface-container-low, .bg-surface-bright {
    background: #fff !important;
    color: #000 !important;
  }

  /* Tablo başlıkları her sayfada tekrarlansın — çok sayfalı bir kayıp
     dökümünde sütunun ne olduğunu ikinci sayfada da bilmek gerekir. */
  thead { display: table-header-group; }
  tr, .panel-border, table { break-inside: avoid; }

  a[href]::after { content: ""; }
}

/* ══════════════════════════════════════════════════════════════════════
   YÖNETİCİ BİLEŞENLERİ

   apollo.eco'dan ÖLÇÜLEN yapı, bizim paletimizle. Ölçüm:
     köşe    5px rozet · 10–16px kart · 9999px hap
     gölge   iki katlı ve yumuşak, rgba(16,24,40,.08) 0 12px 16px −4px
     ölçek   büyük teşhir sayısı + 11–14px yardımcı metin

   Mevcut "Stitch bileşen katmanı" DEĞİŞTİRİLMEDİ; bu katman onun
   üstünde, yalnızca karar sayfalarında kullanılıyor. İki sistem yan
   yana yaşıyor çünkü mühendislik sayfalarının yoğunluğu bilinçli.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Koyu kahraman bandı ── */
/* Kahraman artık `.bant-koyu` içinde yaşıyor: kendi zemini ve köşesi
   yok, yalnızca tipografiyi taşıyor. */
/* z-index: enerji hatları ile fabrika düğümü bandın içinde 0. katmanda
   duruyor; kahramanın içindekiler (yazı ve 3B şerit) onların ÜSTÜNDE
   kalmalı. Kablo modelin önünden geçseydi varlıklar kâğıda basılmış
   gibi düzleşirdi. */
.kahraman { position: relative; z-index: 1; }
.kahraman .goz {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-vurgu, #C97A16);
  margin-bottom: 10px;
}
/* Teşhir sayısı: sayfanın tek en büyük öğesi. Hiyerarşi punto ile
   kuruluyor, çerçeveyle değil. */
.kahraman .tesir {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: clamp(34px, 4.4vw, 54px);
  line-height: 1.02; letter-spacing: -.03em; font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.kahraman .tesir .birim {
  font-size: .38em; letter-spacing: 0; opacity: .62; margin-left: .35em;
}

/* ── Büyük KPI kartı ── */
.kpi-buyuk {
  background: var(--c-surface, #fff);
  border: 1px solid var(--c-outline-variant, #DBE7E1);
  border-radius: 14px;
  /* Gölge apollo.eco'nun kendi CSS'inden alındı: iki katlı ve yumuşak.
     Tek katlı sert gölge kartı yapıştırılmış gösteriyor. */
  box-shadow: var(--golge-kart);
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0;
}
.kpi-buyuk .etiket {
  font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--c-on-surface-variant, #476153);
  display: flex; align-items: center; gap: 7px;
}
.kpi-buyuk .deger {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 30px; line-height: 1.06; letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
  color: var(--c-on-surface, #12211B);
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
}
.kpi-buyuk .deger .birim {
  font-size: 13px; letter-spacing: 0;
  color: var(--c-on-surface-variant, #476153);
}
.kpi-buyuk .alt {
  font-size: 12px; color: var(--c-on-surface-variant, #476153);
}

/* ── Delta hapı ── */
.delta {
  display: inline-flex; align-items: center; gap: 3px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; padding: 1px 7px; border-radius: 999px;
  border: 1px solid currentColor; white-space: nowrap;
}
.delta.artis { color: var(--k-kazanc, #6E8C3A); }
.delta.azalis { color: var(--k-kayip, #C25A3E); }
.delta.notr  { color: var(--c-on-surface-variant, #476153); }

/* ── Canlı rozeti ── */
.canli {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px;
  background: var(--c-vurgu-soluk, #FBEBD4);
  color: var(--c-vurgu, #C97A16);
}
.canli::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; animation: canli-nabiz 2s ease-in-out infinite;
}
@keyframes canli-nabiz {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.75); }
}
/* Hareket hassasiyeti: nabız süs, bilgi değil — kapatılabilir olmalı. */
@media (prefers-reduced-motion: reduce) {
  .canli::before { animation: none; }
}

/* ── Bento kutusu ──
   Her modül kendi gradyanını alır. Modüller birbirinden RENKLE ayrışır,
   çerçeveyle değil; bu, Apollo'nun en aktarılabilir kararıydı. */
.bento {
  border-radius: 16px; padding: 20px;
  color: #fff; position: relative; overflow: hidden;
  min-height: 148px;
  display: flex; flex-direction: column; justify-content: space-between;
  text-decoration: none;
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.bento:hover, .bento:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--golge-kart-ustunde);
}
.bento:focus-visible { outline: 2px solid var(--c-vurgu, #C97A16); outline-offset: 2px; }
.bento h3 { font-size: 17px; font-weight: 600; margin: 0 0 5px; }
.bento p  { font-size: 12.5px; margin: 0; opacity: .88; line-height: 1.5; }
.bento .sayi {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 24px; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.bento.gunes  { background: var(--g-gunes); }
.bento.deniz  { background: var(--g-deniz); }
.bento.zeytin { background: var(--g-zeytin); }
.bento.marka  { background: var(--g-marka); }
/* Gradyanın üstüne ince bir doku: düz gradyan plastik görünüyor. */
.bento::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 88% 8%,
              rgba(255,255,255,.20) 0%, rgba(255,255,255,0) 60%);
}

/* ── Hap düğme ── */
.hap {
  display: inline-flex; align-items: center; gap: 7px;
  border-radius: 999px; padding: 8px 18px;
  font-size: 13px; font-weight: 600; border: 1px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: filter 150ms ease;
}
.hap.dolu { background: var(--c-primary, #00806F); color: #fff; }
.hap.bos  {
  background: transparent; color: var(--c-on-surface, #12211B);
  border-color: var(--c-outline-variant, #DBE7E1);
}
.hap:hover { filter: brightness(1.08); }
.hap:focus-visible { outline: 2px solid var(--c-vurgu, #C97A16); outline-offset: 2px; }

/* ── Kıvılcım grafik kabı ── */
.kivilcim { width: 100%; height: 34px; display: block; }

/* ══════════════════════════════════════════════════════════════════════
   ZEMİN VE RİTİM — apollo.eco'nun HAM CSS'inden ölçüldü

   Önce hesaplanmış stillere bakıp çizgi ızgara yazmıştım; yanlıştı.
   Stil dosyalarını indirince (38 dosya, 1,1 MB) gerçek teknikler çıktı:

     · desen ÇİZGİ DEĞİL NOKTA
       radial-gradient(circle, RENK 1.5px, transparent 2px) / 20px 20px
     · açık bölümlerde YUMUŞAK RADYAL YIKAMA — 30 kez kullanılmış
       radial-gradient(circle at 80% 40%, rgba(hue,.15) 0%, transparent 60%)
       Açık zeminin düz görünmemesinin sebebi bu tek satır.
     · koyu kahraman
       radial-gradient(at top left, #008547 0%, #022925 100%)
       Parlak köşeden neredeyse siyaha; düz bir koyu renk değil.
     · kenar sönümleme MASKE ile
       linear-gradient(to right, transparent 0%, black 10%, black 90%,
                       transparent 100%)
     · gölge iki katlı
       0 4px 8px -2px rgba(16,24,40,.06), 0 2px 4px -2px rgba(16,24,40,.04)

   Aşağısı aynı teknikler, bizim tonlarımızla. Tonlar palette zaten
   tanımlı; burada uydurulmadı.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --gunes-x: 50%;
  --gunes-y: 18%;
  --gunes-guc: 0.5;
  --gunes-gece: 0;
  --golge-kart: rgba(16, 24, 40, .06) 0 4px 8px -2px,
                rgba(16, 24, 40, .04) 0 2px 4px -2px;
  --golge-kart-ustunde: rgba(16, 24, 40, .10) 0 12px 20px -6px,
                        rgba(16, 24, 40, .05) 0 4px 8px -2px;
}

/* Açık gövde: nokta deseni + güneşe göre yıkama. */
body {
  background-color: var(--c-background, #F3F4F6);
  background-image:
    radial-gradient(circle at var(--gunes-x) var(--gunes-y),
      rgba(201, 122, 22, calc(0.11 * var(--gunes-guc))) 0%,
      rgba(255, 255, 255, 0) 58%),
    radial-gradient(circle, rgba(22, 25, 29, .06) 1px, transparent 1.6px);
  background-size: 100% 100%, 20px 20px;
  background-attachment: fixed;
}

.dark body {
  background-image:
    radial-gradient(circle at var(--gunes-x) var(--gunes-y),
      rgba(232, 163, 61, calc(0.14 * var(--gunes-guc))) 0%,
      rgba(0, 0, 0, 0) 58%),
    radial-gradient(circle at 84% 62%,
      rgba(79, 211, 184, .10) 0%, rgba(0, 0, 0, 0) 60%),
    radial-gradient(circle, rgba(159, 214, 199, .11) 1px, transparent 1.6px);
  background-size: 100% 100%, 100% 100%, 20px 20px;
}

/* ── Tam genişlik koyu bant ── */
.bant-koyu {
  margin: calc(-1 * var(--p-lg, 20px)) calc(-1 * var(--p-lg, 20px)) 0;
  padding: 34px var(--p-lg, 20px) 38px;
  color: #DCEDE6;
  position: relative;
  background-color: #04100E;
  background-image:
    /* güneş: sahanın o anki konumundan */
    radial-gradient(circle at var(--gunes-x) 4%,
      rgba(232, 163, 61, calc(0.26 * var(--gunes-guc))) 0%,
      rgba(0, 0, 0, 0) 46%),
    /* nokta deseni — vurgu renginde, seyrek */
    radial-gradient(circle, rgba(79, 211, 184, .13) 1.2px, transparent 1.8px),
    /* NOT: modellerin arkasındaki ışık BURADA DEĞİL.
       Önce bandın kendi zeminine yüzdeyle konumlanmış bir yıkama
       koymuştum ve tutmuyordu: yüzde bandın genişliğine göre, model ise
       kahramanın yerleşimine göre duruyor ve ikisi ekran genişliğiyle
       birlikte birbirinden kayıyordu. Işık artık modelin KENDİ
       kutusunda (.kaynak.one::before, .varlik-isik) — hizası tanım
       gereği doğru. */
    /* taban: parlak köşeden neredeyse siyaha. Tek köşeden gelen geçiş
       bandın sağını —şeridin ve düğümün durduğu yeri— neredeyse siyah
       bırakıyordu ve varlıklar boşlukta asılı duruyordu; ikinci bir
       yumuşak havuz orayı da zemine bağlıyor. */
    radial-gradient(120% 150% at 78% 118%,
      rgba(14, 122, 103, .40) 0%, rgba(6, 46, 40, .18) 42%,
      rgba(0, 0, 0, 0) 70%),
    radial-gradient(at top left, #0A5F52 0%, #04100E 100%);
  background-size: 100% 100%, 20px 20px, 100% 100%, 100% 100%;
}
/* Nokta deseni kenarlarda sönümlenir; sert kesilen bir desen kartı
   "duvar kâğıdı kaplanmış" gösteriyor. Maske tekniği de onlardan. */
.bant-koyu::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(79, 211, 184, .10) 1.2px,
                              transparent 1.8px);
  background-size: 20px 20px;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%,
                                      black 88%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 12%,
                              black 88%, transparent 100%);
}

/* ── Arz / yük çubuğu ──
   Operasyonun tamamı tek bir ilişki: arz yükün üstünde mi. Marj bir sayı
   olarak duruyordu ve sayı, "ne kadar payım var" sorusunu bir bakışta
   cevaplamıyor — çubuk cevaplıyor. Yük çizgisi arzın içinden geçiyor;
   çizginin sağında kalan yeşil pay marjın kendisi.

   Kaynak renkleri bandın 3B varlıklarıyla aynı sırada: güneş, gaz,
   şebeke. Aynı şeyin iki gösterimi farklı renk kullanırsa ikisi ayrı
   şeyler sanılır. */
.arz-sarmal { position: relative; padding-top: 15px; }
.arz-cubuk {
  position: relative; height: 34px; border-radius: 3px;
  background: var(--c-surface-container-highest);
  display: flex; overflow: hidden;
}
.arz-cubuk .pay { height: 100%; transition: width .5s ease; }
/* Yük çizgisinin sağında kalan pay: marjın kendisi, kaynağın değil
   marjın renginde. Kaynak payının üstüne biniyor — o bölgede
   "hangi kaynak" sorusu ikincil, "ne kadar payım var" birincil. */
.arz-cubuk .marj-pay {
  position: absolute; top: 0; bottom: 0;
  background: var(--e-marj);
  transition: left .5s ease, width .5s ease;
}
/* Çubuk ve efsane AYNI kuraldan besleniyor. Önce efsanenin rengi
   JS'te satır içi yazılıyordu ve iki yerde ayrı ayrı değiştirmek
   gerekiyordu — biri unutulunca efsane çubuğa yalan söylüyordu. */
.pay.gunes  { background: var(--e-gunes); }
.pay.gaz    { background: var(--e-gaz); }
.pay.sebeke { background: var(--e-sebeke); }
.arz-efsane .marj      { color: var(--e-marj); font-weight: 600; }
.arz-efsane .marj.eksi { color: var(--e-acik); }
/* Yük çizgisi çubuğun DIŞINDA duruyor: içerideyken `overflow:hidden`
   etiketini kırpıyordu ve "yük 1150 kW" hiç görünmüyordu. */
.arz-sarmal .yuk {
  position: absolute; top: 12px; bottom: 0; width: 2px;
  background: var(--yuk-cizgi); box-shadow: 0 0 0 1px var(--yuk-halo);
}
.arz-sarmal .yuk::after {
  content: attr(data-etiket); position: absolute; left: 6px; top: -13px;
  font: 500 10px/1 ui-monospace, monospace; letter-spacing: .08em;
  color: var(--c-on-surface); white-space: nowrap;
}
.arz-efsane {
  display: flex; gap: 16px; flex-wrap: wrap; margin-top: 9px;
  font: 400 11px/1 ui-monospace, monospace;
  color: var(--c-on-surface-variant);
}
.arz-efsane span { display: inline-flex; align-items: center; gap: 6px; }
.arz-efsane i {
  width: 8px; height: 8px; border-radius: 2px; display: inline-block;
  font-style: normal;
}

/* ── Operasyon durumu ──
   Manşet yuvasının rengi durumdan gelir. Kural: VERİ YOK asla yeşil ya
   da kehribar olamaz — veri akmazken güvende GÖRÜNEN bir ekran, hiç
   olmayan ekrandan tehlikelidir: operatör ona güvenir, jeneratörü
   başlatmaz, hat durur. Bu kural tests/test_durum_renkleri.py ile
   zorlanıyor, yorumla değil.

   Renkler BANDA ÖZGÜ ve açık tonda; palet token'ı DEĞİL. Sebebi
   ölçüldü: `--c-error` açık zemin için tasarlanmış koyu bir kırmızı
   (#D02E1F) ve #04100E üstünde neredeyse okunmuyordu — en tehlikeli
   durumun en kritik mesajı, ekrandaki en okunmaz şey oluyordu. Bant
   zaten zeminini ve metnini palete bakmadan sabitliyor (yukarıya bak);
   durum renkleri de aynı mantıkla banda ait.

   tests/test_durum_renkleri.py bu değerlerin TONUNU sınıyor: VERİ YOK
   kırmızı ailesinde kalmak zorunda, yeşile ya da kehribara kayamaz. */
.bant-koyu[data-durum="GUVENDE"]   { --durum-renk: #4FE0C6; }
.bant-koyu[data-durum="IZLEME"]    { --durum-renk: #FFC25C; }
.bant-koyu[data-durum="UYARI"]     { --durum-renk: #FFA92E; }
.bant-koyu[data-durum="KRITIK"]    { --durum-renk: #FF6B57; }
.bant-koyu[data-durum="GAZ_AKTIF"] { --durum-renk: #4FE0C6; }
/* Güneş dışı saat: alarm GEÇERSİZ, arıza değil. Rengi bu yüzden
   ne yeşil (güvende demek) ne kırmızı (alarm demek) — sakin bir
   mavi-yeşil, "şu an bu ekranın işi yok" diyor. */
.bant-koyu[data-durum="GUNES_DISI"] { --durum-renk: #8FB3A7; }
.bant-koyu[data-durum="VERI_YOK"]  { --durum-renk: #FF9E90; filter: saturate(.4); }

.bant-koyu[data-durum] .goz { color: var(--durum-renk); }

/* Kaynak işareti: bandın ne olduğunu söyleyen tek satır. Küçük ve
   sakin — bir uyarı değil, bir künye. Ama gizli de değil: simüle bir
   durumu ölçülmüş sanmak bu üründe yapılabilecek en pahalı hata. */
.kaynak-imi {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 6px; opacity: .8;
}
.kaynak-imi::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--durum-renk, #4FE0C6);
}
.kaynak-imi[data-simule="true"] {
  color: #E8A33D;
}
.kaynak-imi[data-simule="true"]::before { background: #E8A33D; }
.kaynak-imi[data-simule="false"] { color: #8FB3A7; }
.bant-koyu[data-durum="UYARI"]  .tesir,
.bant-koyu[data-durum="KRITIK"] .tesir { color: var(--durum-renk); }

/* Nabız süs değil: sakin durumda ekranın donmadığının TEK kanıtı.
   Gösterilecek başka hiçbir hareket yok ve donmuş bir alarm ekranı,
   yanlış alarm verenden tehlikelidir. */
.nabiz {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--durum-renk, var(--c-inverse-primary));
  box-shadow: 0 0 9px var(--durum-renk, var(--c-inverse-primary));
  animation: nabiz-at 2.4s ease-in-out infinite;
}
@keyframes nabiz-at { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }
@media (prefers-reduced-motion: reduce) { .nabiz { animation: none } }

/* ── Fabrikanın enerji kaynakları ──
   Üç 3B varlık yan yana; hepsi kart DEĞİL, bandın üstünde duran nesne.
   Güneş ortada, büyük ve önde: ürünün konusu o. Yanındaki ikisi bilinçli
   olarak küçük ve geride — hiyerarşi ölçekle kuruluyor, çerçeveyle
   değil. */
.kaynak-seridi {
  display: flex; align-items: flex-end; justify-content: flex-end;
  gap: 0; flex: 1 1 0; min-width: 0; flex-wrap: nowrap;
  margin: -22px 0 -18px;
}
/* Sol sütun SABİT. İçeriğe göre serbest bırakılmıştı ve gerekçe satırı
   ("23 dk sonra risk görünüyor — eylem penceresi henüz açılmadı")
   uzun olduğunda sütun 420'den 665 px'e çıkıyordu; kalan yeri alan
   şerit de 752'den 507'ye düşüyordu. Tek senaryo gösterilirken bu
   görünmezdi — demo döngüsü açılınca üç model her 30 saniyede boyut
   atlamaya başladı. Sabit sütunda uzun gerekçe alt satıra iniyor.
   Yüzde, dar ekranda da oranı koruyor; alt sınır tesir sayısının
   ("1.331 kW şu an") sığdığı en dar ölçü. */
.kahraman-sol {
  flex: 0 0 clamp(340px, 34%, 470px); min-width: 0;
}
/* Varlıklar SABİT PİKSEL DEĞİL, sığdıkları kadar.
   Sabit genişlik verdiğimde şerit dar ekranda alt satıra düşüyor ve
   kahramanın sağında kocaman bir boşluk kalıyordu. Artık daralarak
   yerinde kalıyorlar: en-boy oranı sabit olduğu için modeller
   orantısını korur. */
.kaynak { flex: 0 1 auto; min-width: 0; }
.kaynak .cerceve { aspect-ratio: 1.28; height: auto; }
.kaynak { position: relative; text-align: center; }
/* Çerçeve kutusu ölçüyü taşıyor; iframe onu tamamen dolduruyor.
   Ölçüyü doğrudan iframe'e vermek, ışık katmanının (::before) hizasını
   iframe'in kendi kutusuna bağlıyordu ve iki farklı ölçü kaynağı
   çıkıyordu. */
.kaynak .cerceve { position: relative; width: 100%; }
.kaynak iframe {
  display: block; width: 100%; height: 100%; background: transparent;
  position: relative; z-index: 1;
}
.kaynak .ad { white-space: nowrap;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: #9ED3BF; opacity: .82; margin-top: -14px;
}
.kaynak .deger { white-space: nowrap;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em; line-height: 1.15;
}

/* Öndeki: güneş. Kendi ışığını taşıyor ki iki komşusunun arasından
   ayrışsın — kenar çizgisi yok, sadece zeminin orada açılması. */
.kaynak.one { flex-basis: 470px; max-width: 470px; z-index: 2; }

.kaynak.one .deger { font-size: 20px; }
/* ── IŞIK ÜRETENE GİDER ──
   Hâle önceden güneşe SABİT bağlıydı. Doğru olan bu değil: bandın
   anlattığı şey fabrikayı o an hangi kaynağın taşıdığı. Işık artık bir
   DURUM — `etkin` sınıfı, kaynağın gücü sıfırın üstündeyken konuyor.
   Gece güneş söner, PLC bağlanınca çalışan santral yanar.

   Katman sırası: ışık modelin ARKASINDA ama bandın zemininin ÖNÜNDE
   olmalı. Önce z-index:-1 vermiştim; o, öğeyi ebeveynin kendi zemininin
   de arkasına atıyor ve hâle hiç görünmüyordu. */
.kaynak::before,
.varlik-isik::before {
  content: ""; position: absolute; inset: -8% -16% 6%;
  border-radius: 50%; z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity .6s ease;
  background: radial-gradient(ellipse at 50% 46%,
    rgba(84, 224, 190, .52) 0%, rgba(34, 150, 128, .26) 42%,
    rgba(0, 0, 0, 0) 74%);
}
.kaynak.etkin::before, .kaynak.etkin .varlik-isik::before { opacity: 1; }
/* Güneş etkinken bir tık daha parlak: ürünün konusu o ve şeridin
   ortasında duruyor. */
.kaynak.one::before {
  background: radial-gradient(ellipse at 50% 44%,
    rgba(78, 219, 184, .52) 0%, rgba(34, 148, 125, .26) 40%,
    rgba(14, 74, 63, .10) 60%, rgba(0, 0, 0, 0) 76%);
}

/* Geridekiler: doğalgaz ve şebeke. Ölçüldü — aynı boyda üçlü sıra
   "üç eşit seçenek" gibi okunuyordu; oysa fabrikanın hikâyesi güneşin
   diğer ikisinin yerini alması. */
/* Komşular hafifçe BİNİYOR. Dört varlık 1240 px'lik kahramana yan yana
   sığmıyordu ve rüzgâr alt satıra düşüyordu; küçültmek yerine
   bindirmek, ayrı ayrı duran üç ikon yerine tek bir tesis kümesi
   okunmasını da sağlıyor. */
.kaynak.geri {
  flex-basis: 356px; max-width: 356px; margin-bottom: 16px;
}
.kaynak.geri.sol { margin-right: -4.2%; }
.kaynak.geri.sag { margin-left: -4.2%; }

.kaynak.geri .deger { font-size: 14px; opacity: .92; }
.kaynak.geri .ad { margin-top: -10px; }

/* Rüzgâr: aynı şeritte, güneşin bir tık gerisinde. */
.kaynak.hava { flex-basis: 402px; max-width: 402px;
  margin: 0 0 16px 6px; }

.kaynak.hava .deger { font-size: 14px; opacity: .9; }

/* Ölçüm yokken: değer soluk ve KÜÇÜK harf — bir sayı olmadığı, bir
   durum notu olduğu tipografiden anlaşılsın. */
.kaynak .deger.bekliyor {
  font-size: 10px !important; letter-spacing: .08em;
  text-transform: uppercase; opacity: .42;
}

/* ── ENERJİ HATLARI VE FABRİKA DÜĞÜMÜ ────────────────────────────────
   Şerit dört varlık gösteriyor ama fabrikayı ÜÇÜ besliyor: doğalgaz,
   güneş, şebeke. Üçünden de logoya bir hat iniyor ve hat o kaynağın
   yüke kattığı payı taşıyor — kalınlık pay, akış hızı da pay. Şeritte
   dört tabela okumak yerine göz tek bakışta kimin taşıdığını görüyor.

   Rüzgârdan hat YOK. Rüzgâr bir arz değil, hava; bulut taşımasını
   belirlediği için şeritte duruyor ama fabrikayı beslemiyor. Dördüncü
   bir hat çekmek olmayan bir kaynağı varmış gibi gösterirdi.

   Renkler arz çubuğununkilerin AYNISI (--e-gunes / --e-gaz / --e-sebeke;
   .bant-koyu bunları koyu zemin tonlarıyla yeniden tanımlıyor). Ayrı bir
   palet seçmek aynı kaynağı iki yerde iki renkle çizip ikisini ayrı
   şeyler sandırırdı. */

/* Düğüm için dip payı. Bandın kendi 38px'i düğümü alttaki bölüme
   taşırıyordu; hatlar da sıkışıp neredeyse dik iniyordu — hat kaynak
   etiketlerinin ALTINDAN başlıyor (üstünden geçen hat "1,41 MW"
   yazısını ortadan kesiyordu) ve kalan boşluk hem hattın okunur
   uzunluğunu hem üç katlı düğümü taşımalı.

   Pay BANDA değil ŞERİDE veriliyor. Banda `padding-bottom` olarak
   koymuştum: bandın boyu iki sütunun uzun olanına göre belirlendiği
   için, kahraman metni uzayıp sol sütun öne geçtiğinde o pay ikinci
   kez ekleniyordu ve bandın altında 200 px'lik boş bir alan kalıyordu.
   Şeride verilince pay yalnızca düğümün bulunduğu sütunu büyütüyor. */
.bant-dugumlu .kaynak-seridi { margin-bottom: clamp(120px, 16vw, 210px); }

.enerji-hatti {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; overflow: visible;
}

/* İZ hep duruyor. Bir kaynak 0 kW'ken hattı SİLMEK o bağlantının hiç
   olmadığını söylerdi; oysa şebeke bağlı, yalnızca o an akmıyor.
   Akarken iz de aydınlanıyor: yalnızca kesikler parlayınca hat
   karanlıkta asılı boncuklar gibi duruyordu, kablo görünmüyordu. */
.enerji-hatti .iz {
  fill: none; stroke: var(--hat-renk, #4FE0C6);
  stroke-width: calc(var(--hat-kalinlik, 1.6) * .62);
  stroke-linecap: round;
  opacity: var(--iz-parlaklik, .22);
  filter: drop-shadow(0 0 calc(6px * var(--hat-parlaklik, 0))
                      var(--hat-renk, #4FE0C6));
  transition: opacity .8s ease, stroke-width .8s ease;
}

/* Varış: enerjinin fabrikaya girdiği nokta. Hatlar logonun kenarında
   öylece bitiyordu ve bağlantı yerine kesik gibi okunuyordu. */
.enerji-hatti .varis {
  fill: var(--hat-renk, #4FE0C6);
  opacity: calc(.34 + .5 * var(--hat-parlaklik, 0));
  filter: drop-shadow(0 0 calc(4px + 10px * var(--hat-parlaklik, 0))
                      var(--hat-renk, #4FE0C6));
  transition: opacity .8s ease, r .8s ease;
}

/* AKIŞ yalnızca güç varken. Parlaklığı ve süresi çizim sırasında
   yazılıyor; geçiş yumuşak çünkü senaryo değiştiğinde değerler bir
   anda sıçrıyor ve sert kesme "veri bozuldu" gibi okunuyordu. */
.enerji-hatti .akis {
  fill: none; stroke: var(--hat-renk, #4FE0C6);
  stroke-width: var(--hat-kalinlik, 2); stroke-linecap: round;
  opacity: var(--hat-parlaklik, 0);
  /* Kısa kesikler yuvarlak uçla birleşince boncuk dizisine dönüşüyor
     ve akan bir hat değil noktalı bir ayraç gibi okunuyordu; kesik
     kalınlığın birkaç katı olunca hat hâlâ hat kalıyor. */
  stroke-dasharray: 15 13;
  /* İki katlı parıltı: yakın halka kabloyu neon yapıyor, geniş olan
     bandın zeminine ışık düşürüyor. Tek katmanda hat düz ve sönük
     kalıyordu. */
  filter: drop-shadow(0 0 5px var(--hat-renk, #4FE0C6))
          drop-shadow(0 0 14px var(--hat-renk, #4FE0C6));
  transition: opacity .8s ease, stroke-width .8s ease;
  animation: enerji-ak var(--hat-sure, 3s) linear infinite;
}
/* Kayma EKSİ: desen yolun sonuna, yani logoya doğru ilerliyor. Artı
   değer akışı kaynağa geri döndürür ve fabrika enerji üretiyormuş gibi
   görünürdü. Tur bir tam desen katı (2 × 22px), yoksa döngü başa
   dönerken zıplıyor (2 × 28px). */
@keyframes enerji-ak { to { stroke-dashoffset: var(--hat-tur, -56); } }

/* Düğüm üç katlı: marka, fabrika, toplam. Sıra bilinçli — logo KİM,
   çizim NE, sayı NE KADAR. Hatlar markanın üst kenarına giriyor. */
.jti-dugum {
  position: absolute; z-index: 0; pointer-events: none;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.fabrika-cizim {
  display: block; width: 100%; height: auto;
  /* Marka parlarken fabrika da parlıyor: ikisi tek nesne. Çizimin
     kendi parıltısı daha zayıf, yoksa gri gövde yeşile boyanıyor. */
  filter: drop-shadow(0 0 calc(3px + 14px * var(--dugum-guc, 0))
                      rgba(0, 177, 133, calc(.12 + .34 * var(--dugum-guc, 0))));
  transition: filter 1.2s ease;
}
/* Toplam: şerit değerleriyle AYNI tipografi — aynı cinsten sayılar. */
.dugum-toplam {
  display: flex; align-items: baseline; gap: 6px; white-space: nowrap;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums; font-size: 19px;
  color: #F4FDFA; line-height: 1.1; letter-spacing: -.01em;
  text-shadow: 0 0 calc(10px * var(--dugum-guc, 0))
               rgba(64, 232, 186, .55);
}
.dugum-toplam i {
  font-style: normal; font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; opacity: .55;
}
/* Marka çizimden bir tık DAR: eşit genişlikte logo, altındaki
   fabrikayı eziyordu ve çizim gri bir lekeye dönüşüyordu. */
.jti-dugum .jti-marka {
  display: block; width: 74%; height: auto;
  /* Parıltı GÜCE bağlı: fabrikayı besleyen enerji arttıkça logo
     aydınlanıyor. Sabit bir parıltı süs olurdu; bu, hatların taşıdığı
     şeyin nereye gittiğini söylüyor. */
  filter:
    drop-shadow(0 0 calc(4px + 26px * var(--dugum-guc, 0))
                rgba(0, 177, 133, calc(.18 + .55 * var(--dugum-guc, 0))))
    brightness(calc(1 + .16 * var(--dugum-guc, 0)));
  transition: filter 1.2s ease;
}
/* Hale logonun ARKASINDA: markanın kendi rengi (#00B185) bandın koyu
   yeşiliyle aynı aileden, o yüzden hale rengi değil AÇIKLIK katıyor. */
.jti-dugum::before {
  content: ""; position: absolute; z-index: -1; inset: -34% -46%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 48%,
    rgba(64, 232, 186, calc(.30 * var(--dugum-guc, 0))) 0%,
    rgba(0, 177, 133, calc(.20 * var(--dugum-guc, 0))) 30%,
    rgba(0, 140, 110, calc(.09 * var(--dugum-guc, 0))) 54%,
    rgba(0, 0, 0, 0) 76%);
  animation: dugum-nefes 4.2s ease-in-out infinite;
}
@keyframes dugum-nefes {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.09); opacity: .74; }
}

@media (prefers-reduced-motion: reduce) {
  /* Akış ve nefes durur; iz, kalınlık ve parlaklık KALIR. Bilgi
     hareketten değil kalınlıktan geliyor — hareketi kapatmak veriyi
     değil yalnızca dikkat çekmeyi kaldırıyor. */
  .enerji-hatti .akis { animation: none; }
  .jti-dugum::before { animation: none; }
}

/* ── Bento bandı ── */
.bant-bento {
  margin: 0 calc(-1 * var(--p-lg, 20px)) calc(-1 * var(--p-lg, 20px));
  padding: 28px var(--p-lg, 20px) 32px;
  /* Yıkama NÖTR. Turkuaz radyal, açık tema renksiz nötre geçtikten
     sonra sayfanın altında tek başına yeşil bir bant bırakıyordu. */
  background:
    radial-gradient(circle at 22% 0%,
      rgba(22, 25, 29, .05) 0%, rgba(255, 255, 255, 0) 58%),
    var(--c-surface-container);
  border-top: 1px solid var(--c-outline-variant, #DBE7E1);
}
/* ── BÖLÜM BAŞLIĞI ──
   Dokuz yerde kullanılıyor ama kuralı YALNIZCA `.bant-bento` içinde
   vardı; dışarıdaki sekizi tarayıcının varsayılanıyla çiziliyordu —
   16 px düz siyah gövde metni, kartın üstünde hizasız duran bir
   cümle gibi. Kural artık genel, bento'dakiyle aynı dil.

   Küçük ve sakin: bu bir manşet değil, altındaki bloğun ne olduğunu
   söyleyen bir künye. Alt boşluk kartın kenarına bağlanacak kadar
   dar tutuldu; ferah bırakınca başlık kartla değil üstündeki bölümle
   ilişkili görünüyordu. */
.bolum-basligi {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-on-surface-variant, #476153);
  margin: 0 0 10px 2px;
}
.dark .bolum-basligi { color: #8FB3A7; }

/* ── Bento: ÖLÇÜLEN ışıma reçetesi ──
   Apollo'nun kart zeminlerini indirip ışımanın yarıçap profilini
   çıkardım. Beklediğimden farklı çıktı ve ezbere yazsaydım tutmazdı:

     finwise (mor), ışıma merkezi %99 x / %15 y
       %0   #F8F7F8   minik beyaz-sıcak çekirdek
       %12  #302441
       %25  #463069
       %40  #55377D   HALE BURADA ZİRVE — merkezde değil
       %55  #000000   ani düşüş, saf siyah

   Yani düz bir radyal gradyan değil, üç katman: küçük parlak çekirdek,
   dışarıda zirve yapan bir hale, ve hızla siyaha inen bir etek. Zenginlik
   buradan geliyor; tek katlı gradyan plastik görünüyor.

   Zirve parlaklıkları da ölçüldü: #55377D ve #0A444C — yani hale KOYU
   kalıyor (L* ≈ 25-29). Kartı aydınlatan şey hale değil, çekirdek.

   Aşağısı aynı yapının bizim tonlarımızla yazılmış hâli. Renkler
   paletten geliyor, o an uydurulmadı. */
/* Kart, döşemelerle AYNI dile bağlandı: koyu-doygun gradyan ve tek
   parlak vurgu. Önceki sürüm üç katmanlı bir "ışıma" kurgusuydu
   (çekirdek + hale + etek) ve altına da veriden üretilmiş bir tuval
   çiziliyordu. İkisi birbiriyle yarışıyordu: hale çizimi bulandırıyor,
   çizim sayıyı okutmuyordu. İkisi de kalktı. */
.bento.derin {
  --bk: #34E3C4; --ba: #06463C; --bb: #063049;
  background: linear-gradient(145deg, var(--ba) 0%, var(--bb) 100%);
  color: #E4F2EC;
  border: 1px solid color-mix(in srgb, var(--bk) 30%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    0 10px 26px -16px color-mix(in srgb, var(--bk) 75%, transparent);
}
.bento.derin .sayi { color: var(--bk); }
.bento.derin p { color: #A8C7BD; opacity: 1; }

/* Amblem: kartın konusu. Köşede, büyük ve SÖNÜK — okunacak şey o
   değil, başlık ve sayı. Görev tanıma yardımı, dekorasyon değil. */
.bento .amblem {
  position: absolute; right: -6px; top: -8px;
  font-size: 108px; line-height: 1;
  color: var(--bk); opacity: .16; pointer-events: none;
  z-index: 0;
}
.bento .icerik { position: relative; z-index: 1; }

.bento.b-saha   { --bk: #FFB347; --ba: #5E3E08; --bb: #33220A; }
.bento.b-getiri { --bk: #34E3C4; --ba: #06463C; --bb: #063049; }
.bento.b-hava   { --bk: #57A9FF; --ba: #0C3560; --bb: #0A2145; }
.bento.b-guven  { --bk: #B3E051; --ba: #2E4A08; --bb: #1A2E07; }

/* ══════════════════════════════════════════════════════════════════════
   KOYU KABUK

   Açık tema tek başına çok soluktu: zemin #F5F9F7, üstüne soluk yıkamalar
   binince alt taraf "bitmemiş" görünüyordu ve beyaz kenar çubuğu düzeni
   tutmuyordu.

   Apollo'da açık bölümler KISA ve koyu bölümler tarafından çerçeveleniyor.
   Bizde sayfa uzun olduğu için aynı ritmi kuramayız; onun yerine KABUĞU
   koyulaştırıyoruz. Kenar çubuğu ve üst şerit derin yeşil, içerik alanı
   açık — kontrast oradan geliyor ve içerik "bir şeyin içinde" duruyor.

   Kartlar açık kalıyor: okunacak asıl şey sayılar ve koyu zeminde
   tabular rakam okumak yorucu.
   ══════════════════════════════════════════════════════════════════════ */

nav.fixed.left-0 {
  background-color: #071A17;
  background-image:
    radial-gradient(circle at 12% 4%,
      rgba(79, 211, 184, .13) 0%, rgba(0, 0, 0, 0) 46%),
    radial-gradient(circle, rgba(79, 211, 184, .07) 1px, transparent 1.5px),
    linear-gradient(180deg, #0A231F 0%, #061512 100%);
  background-size: 100% 100%, 20px 20px, 100% 100%, 100% 100%;
  border-right-color: rgba(255, 255, 255, .08);
  color: #C9DED6;
}
nav.fixed.left-0 a { color: #B6CEC5; }
nav.fixed.left-0 a:hover { background-color: rgba(255, 255, 255, .05); }
/* Aktif madde: marka renginde ince bir şerit + hafif zemin. Dolu bir
   blok, koyu kabukta çok baskın duruyordu. */
nav.fixed.left-0 .menu-oge.bg-primary-fixed {
  background-color: rgba(79, 211, 184, .12) !important;
  color: #EAF7F2 !important;
  box-shadow: inset 2px 0 0 var(--c-inverse-primary, #4FD3B8);
}
nav.fixed.left-0 .text-on-surface,
nav.fixed.left-0 .text-on-surface-variant { color: #B6CEC5 !important; }
/* Aktif maddenin metin sınıfı da koyu kabukta okunmuyordu: Tailwind
    açık zemin için koyu bir renk veriyor. */
nav.fixed.left-0 .menu-oge.text-on-primary-fixed { color: #EAF7F2 !important; }
nav.fixed.left-0 .text-outline { color: #7F998F !important; }
nav.fixed.left-0 .text-primary { color: #4FD3B8 !important; }
nav.fixed.left-0 [class*="border-outline"] { border-color: rgba(255,255,255,.08) !important; }

header.fixed.top-0 {
  background-color: #071A17;
  background-image: linear-gradient(180deg, #0A231F 0%, #071A17 100%);
  border-bottom-color: rgba(255, 255, 255, .08);
  color: #C9DED6;
}
header.fixed.top-0 .text-on-surface,
header.fixed.top-0 .text-on-surface-variant { color: #B6CEC5 !important; }
header.fixed.top-0 select {
  background-color: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .14);
  color: #DCEDE6;
}
header.fixed.top-0 button { color: #B6CEC5; }

/* İçerik zemini: ÜSTTE BEYAZ, AŞAĞI DOĞRU GRİ.
   Önce tek bir soluk yeşil dolguydu ve iki sorunu vardı: sayfayı
   yeşile boyuyordu (bkz. palet.css'teki nötr kararı) ve düz bir
   dolgu olduğu için uzun sayfalarda alt taraf "yarım kalmış"
   görünüyordu. Dikey geçiş ikisini birden çözüyor — içerik beyazdan
   çıkıyor, sayfa aşağı indikçe zemin hafifçe koyulaşıyor.
   Nokta deseni de nötre döndü; yeşil noktalar zeminden çekilen
   yeşili geri getiriyordu. Güneş yıkaması kalıyor: o dekoratif
   değil, sahanın o anki güneş konumunu gösteriyor. */
body {
  background-image:
    radial-gradient(circle at var(--gunes-x) var(--gunes-y),
      rgba(201, 122, 22, calc(0.07 * var(--gunes-guc))) 0%,
      rgba(255, 255, 255, 0) 52%),
    radial-gradient(circle, rgba(22, 25, 29, .055) 1px, transparent 1.6px),
    linear-gradient(180deg, #FAFBFC 0%, var(--c-background) 58%);
  background-size: 100% 100%, 20px 20px, 100% 100%, 100% 100%;
}

/* ── Durum kartları (Duruş Önleme) ──
   Altı hâl aynı görünen altı kutuydu ve tek tip bir listeye dönüşmüştü.
   Renk, panoda o durumda GERÇEKTEN görülecek renkle aynı: kartla ekran
   arasında bağ kurmayan bir renk seçimi öğretmez, karıştırır. */
.durum-kart {
  display: flex; align-items: flex-start; gap: 10px;
  /* `flex` kısayolu KALDIRILDI: kart artık ızgara hücresinde duruyor
     ve esneme temeli hücre genişliğiyle çakışıyordu. */
  min-width: 0;
  padding: 12px 14px;
  background: var(--c-surface);
  border: 1px solid var(--c-outline-variant);
  border-left: 3px solid var(--kart-renk);
  border-radius: 3px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.durum-kart:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px -6px rgba(16, 32, 26, .28);
  border-color: var(--kart-renk);
}
.durum-kart:focus-visible { outline: 2px solid var(--kart-renk); outline-offset: 2px; }
.durum-ikon { color: var(--kart-renk); font-size: 20px; flex: none; margin-top: 1px; }
.durum-ad {
  display: block; font-weight: 600; font-size: 14px;
  color: var(--c-on-surface); line-height: 1.3;
}
.durum-aciklama {
  display: block; font-size: 11px; line-height: 1.45;
  color: var(--c-outline); margin-top: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .durum-kart { transition: none; }
  .durum-kart:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   "BU SİSTEM NE KAZANDIRIYOR" — ürünün tek satış cümlesi

   Bu bölüm daha önce gri bir kutuydu ve içinde "Ayarlar → Duruş
   maliyeti" yazıyordu: ürünün en önemli sayısının durduğu yerde,
   okuyanı başka bir sayfaya gönderen bir çıkmaz.

   Renkler burada BİLEREK doygun. Arayüzün geri kalanında disiplin
   "nötrler sakin, vurgu az yerde" ve o doğru; ama bu bölüm sayfanın
   %5'i ve taşıdığı şey karar değil ikna. Doygunluk anlam taşıdığı
   yerde harcanıyor.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Çatal: aynı bulut, iki farklı gün sonu ──
   Tek sıra bir zincir "2 saat kayıp" sonucunu kaçınılmaz gösteriyordu.
   Oysa ürünün sattığı şey tam olarak o iki saatin OLMAMASI. Ortak
   gövde ikiye ayrılıyor ve fark tek bir şey: uyarının önceden
   gelmesi. */
.kazanc-catal { margin-bottom: 14px; }
.kazanc-catal .govde {
  display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.kazanc-catal .halka {
  flex: 1 1 190px; min-width: 0;
  border-radius: 12px; padding: 14px 16px;
  background: linear-gradient(160deg,
    rgba(79,211,184,.12), rgba(79,211,184,.04));
  border: 1px solid rgba(79,211,184,.26);
  color: #0E7A66;
  display: flex; flex-direction: column; gap: 2px;
}
.dark .kazanc-catal .halka { color: #4FD3B8; }
.kazanc-catal .halka .material-symbols-outlined {
  font-size: 22px; margin-bottom: 4px;
}
.kazanc-catal .halka .ad {
  font-family: "Public Sans", system-ui, sans-serif;
  font-size: 13px; font-weight: 600;
}
.kazanc-catal .halka .alt { font-size: 11px; opacity: .8; }
.kazanc-catal .ok { align-self: center; font-size: 18px; opacity: .4; }

.kazanc-catal .dallar {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.kazanc-catal .dal {
  border-radius: 12px; padding: 14px 16px;
  border: 1px solid transparent;
  display: flex; flex-direction: column; gap: 8px;
}
.kazanc-catal .dal .etiket {
  display: flex; align-items: center; gap: 7px;
  font-family: "Public Sans", system-ui, sans-serif;
  font-size: 13px; font-weight: 600;
}
.kazanc-catal .dal .etiket .material-symbols-outlined { font-size: 19px; }
.kazanc-catal .dal .adimlar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12px; opacity: .88;
}
.kazanc-catal .dal .adimlar > span {
  display: inline-flex; align-items: center; gap: 5px;
}
.kazanc-catal .dal .adimlar .material-symbols-outlined { font-size: 17px; }
.kazanc-catal .dal .sonuc {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 20px; letter-spacing: -.01em;
}
/* İyi dal yeşil, kötü dal mercan. İkisi yan yana duruyor ve fark
   renkle değil ÖNCE görülüyor: aynı bulut, iki sonuç. */
.kazanc-catal .dal[data-tur="iyi"] {
  background: linear-gradient(150deg, rgba(0,168,142,.16), rgba(0,168,142,.05));
  border-color: rgba(0,168,142,.38); color: #00806F;
}
.kazanc-catal .dal[data-tur="kotu"] {
  background: linear-gradient(150deg, rgba(224,71,42,.16), rgba(224,71,42,.05));
  border-color: rgba(224,71,42,.38); color: #C2381F;
}
.dark .kazanc-catal .dal[data-tur="iyi"]  { color: #34E3C4; }
.dark .kazanc-catal .dal[data-tur="kotu"] { color: #FF8B70; }

/* ── Kahraman: yılda kurtarılan para ── */
.kazanc-kahraman {
  position: relative; overflow: hidden;
  border-radius: 16px; padding: 22px 24px;
  color: #EAF7F2;
  background:
    radial-gradient(ellipse at 12% 10%, rgba(79,211,184,.28) 0%, rgba(0,0,0,0) 58%),
    radial-gradient(ellipse at 92% 92%, rgba(232,163,61,.20) 0%, rgba(0,0,0,0) 55%),
    linear-gradient(150deg, #0A5F52 0%, #063A32 48%, #04211D 100%);
  border: 1px solid rgba(79,211,184,.30);
  box-shadow: 0 18px 46px -18px rgba(4,33,29,.75);
}
/* Işıltı: kartın kendi ışığı. Sabit bir dikdörtgen yerine köşeden
   gelen bir aydınlanma, kutuyu yüzey değil hacim gösteriyor. */
.kazanc-kahraman::after {
  content: ""; position: absolute; inset: -40% -10% auto -30%;
  height: 180%; pointer-events: none;
  background: radial-gradient(ellipse at 30% 0%,
    rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 62%);
}
.kazanc-kahraman .ust {
  display: flex; align-items: center; gap: 9px;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: #9FE3D0; margin-bottom: 6px;
}
.kazanc-kahraman .ust .material-symbols-outlined { font-size: 20px; }
.kazanc-kahraman .dev {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: clamp(38px, 5.4vw, 64px); line-height: 1.02;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 24px rgba(79,211,184,.35);
}
.kazanc-kahraman .ipucu {
  font-size: 13px; line-height: 1.6; opacity: .84; margin-top: 8px;
  max-width: 76ch;
}
.kazanc-kahraman .ipucu b { color: #7FE8CE; }

/* Bekleyen hâl: sayı yerine sorunun kendisi duruyor. */
.kazanc-kahraman.bekleyen .dev { opacity: .5; }
.kazanc-kahraman .soru {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 12px;
}
.kazanc-kahraman .soru label {
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: #9FE3D0;
}
.kazanc-kahraman .soru input {
  width: 150px; padding: 7px 10px; border-radius: 8px;
  background: rgba(255,255,255,.10); color: #EAF7F2;
  border: 1px solid rgba(159,227,208,.40);
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 14px;
}
.kazanc-kahraman .soru input::placeholder { color: rgba(234,247,242,.45); }
.kazanc-kahraman .soru input:focus {
  outline: none; border-color: #4FD3B8;
  box-shadow: 0 0 0 3px rgba(79,211,184,.22);
}
.kazanc-kahraman .soru .birim { font-size: 12px; opacity: .6; }
.kazanc-kahraman .soru button {
  padding: 8px 16px; border-radius: 8px; cursor: pointer;
  background: linear-gradient(135deg, #4FD3B8 0%, #00A88E 100%);
  color: #04211D; border: none;
  font-family: "Public Sans", system-ui, sans-serif;
  font-size: 13px; font-weight: 600;
}
.kazanc-kahraman .soru button:hover { filter: brightness(1.08); }

/* ── Dört destek kartı ── */
.kazanc-izgara {
  display: grid; gap: 12px; margin-top: 12px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
/* Bu kartlar da kendi renklerini taşıyor. `--kk` zaten her kartın
   konusuna göre ayarlı (para, üretim, zaman, eşik); önce yalnızca
   ikonu ve rakamı boyuyordu, kart gövdesi düz beyazdı. Aynı ölçü
   burada da geçerli: renk üstte toplanıyor, alt yarı beyaz kalıyor. */
/* Döşemelerle AYNI karar: açık sayfa üstünde koyu-doygun çip.
   `--ka`/`--kb` gradyanın iki ucu, `--kk` parlak vurgu (ikon ve
   rakam). Üçü de iki temada aynı; değişen yalnızca altındaki sayfa. */
.kazanc-kart {
  /* Varsayılanlar şart: bir tür eşleşmezse color-mix geçersiz olur
     ve kenarlık da zemin de tamamen düşer. */
  --kk: #34E3C4; --ka: #06463C; --kb: #063049;

  --c-on-surface:         #EDF7F3;
  --c-on-surface-variant: #A0C1B6;

  border-radius: 12px; padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--kk) 32%, transparent);
  background: linear-gradient(145deg, var(--ka) 0%, var(--kb) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    0 10px 26px -16px color-mix(in srgb, var(--kk) 75%, transparent);
  display: flex; flex-direction: column; gap: 2px;
}
.kazanc-kart .material-symbols-outlined { font-size: 22px; margin-bottom: 6px; }
.kazanc-kart .deger {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 26px; line-height: 1.1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.kazanc-kart .baslik {
  font-family: "Public Sans", system-ui, sans-serif;
  font-size: 13px; font-weight: 600; color: var(--c-on-surface);
}
.kazanc-kart .alt { font-size: 11px; color: var(--c-on-surface-variant); }
.kazanc-kart[data-tur="para"]   { --kk: #34E3C4; --ka: #06463C; --kb: #063049; }
.kazanc-kart[data-tur="uretim"] { --kk: #57A9FF; --ka: #0C3560; --kb: #0A2145; }
.kazanc-kart[data-tur="zaman"]  { --kk: #FFB347; --ka: #5E3E08; --kb: #33220A; }
.kazanc-kart[data-tur="esik"]   { --kk: #B3E051; --ka: #2E4A08; --kb: #1A2E07; }
.kazanc-kart .material-symbols-outlined, .kazanc-kart .deger { color: var(--kk); }

/* Kaynak künyesi: hangi sayı ölçüldü, hangisi varsayım. */
.kazanc-kahraman .kaynaklar {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px;
}
.kazanc-kahraman .kaynaklar span {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px; letter-spacing: .04em;
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid transparent;
}
.kazanc-kahraman .kaynaklar span[data-tur="saha"] {
  background: rgba(79,211,184,.14); border-color: rgba(79,211,184,.34);
  color: #9FE3D0;
}
.kazanc-kahraman .kaynaklar span[data-tur="varsayim"] {
  background: rgba(232,163,61,.16); border-color: rgba(232,163,61,.40);
  color: #F0C078;
}
.kazanc-kart[data-tur="gunes"] { --kk: #FFC25C; --ka: #63430A; --kb: #35240B; }

/* ── Harita ipucu ──
   İmlecin altındaki hücrenin bulut künyesi. Ventusky'de olan şey bu;
   bizde bir satır fazlası var: o bulutun sahaya ne zaman geleceği.
   Harita bir hava sitesi değil, bir karar ekranı. */
.harita-ipucu {
  position: absolute; z-index: 5; pointer-events: none;
  min-width: 196px; max-width: 250px;
  padding: 10px 12px; border-radius: 10px;
  background: rgba(4, 22, 19, .94);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(159, 227, 208, .28);
  box-shadow: 0 12px 34px -10px rgba(0, 0, 0, .7);
  color: #DCEDE6;
  font-family: "Public Sans", system-ui, sans-serif;
  font-size: 11px; line-height: 1.5;
}
.harita-ipucu .bas {
  font-weight: 600; font-size: 12px; margin-bottom: 6px;
  padding-bottom: 6px; border-bottom: 1px solid rgba(159,227,208,.18);
}
/* Türün rengi ŞİDDETİNDEN geliyor: alçak bulut hattı durduran tür ve
   listede aynı griyle durması onu diğerlerinden ayırt edilemez yapardı. */
.harita-ipucu .bas[data-siddet="3"] { color: #FF8B70; }
.harita-ipucu .bas[data-siddet="2"] { color: #FFC25C; }
.harita-ipucu .bas[data-siddet="1"] { color: #9FE3D0; }
.harita-ipucu .bas[data-siddet="0"] { color: #8FB3A7; }
.harita-ipucu .satir {
  display: flex; justify-content: space-between; gap: 12px;
}
.harita-ipucu .satir span { opacity: .68; }
.harita-ipucu .satir b {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 500; font-variant-numeric: tabular-nums;
}
.harita-ipucu .varis {
  margin-top: 7px; padding-top: 6px;
  border-top: 1px solid rgba(159,227,208,.18);
  color: #4FD3B8; font-weight: 600;
}
.harita-ipucu .etki { margin-top: 4px; opacity: .62; font-size: 10px; }
/* Pano widget'ında kutu daha dar ve sıkı: kart 642 piksel ve geniş bir
   ipucu haritanın yarısını kapatıyor. */
.harita-ipucu.dar { min-width: 168px; max-width: 200px; padding: 8px 10px; }
.harita-ipucu.dar .satir { font-size: 10px; }

/* ══════════════════════════════════════════════════════════════════════
   ENERJİ SÜREKLİLİĞİ — OPERASYON DÖŞEMELERİ

   Önceki sürüm bir pazarlama slaytıydı: döngüde stok video, slogan
   başlık, radar süpürmesi. Kullanıcı düzeltti — burası bir pano.

   Döşeme düzeni her kartta AYNI ve bu kasıtlı: üst satırda numara,
   adım adı ve durum rozeti; altında konu; sonra tek büyük sayı; sonra
   o sayıyı bağlama oturtan küçük bir grafik; sonra dört satır
   anahtar-değer; en altta sayının kaynağı. Göz bir kez öğreniyor,
   dördünü birden okuyabiliyor. Her karta farklı bir düzen vermek
   "dört ayrı şey" izlenimi bırakırdı.
   ══════════════════════════════════════════════════════════════════════ */
/* ── SAYFANIN RİTMİ ──
   Açık temada ÜÇ ayrı koyu blok üst üste geliyordu: kahraman bandı,
   bu şerit ve para kutusu. Aralarındaki açık zemin bölüm gibi değil
   BOŞLUK gibi okunuyordu; sayfa ne açık ne koyuydu.

   Bu şerit temaya uyuyor artık. Koyu kalan iki blok var ve ikisi de
   bilinçli: en üstteki kahraman bandı (kimlik) ve tek para kutusu
   (sayfanın tek "vay be" anı). Ritim: koyu → açık → koyu vurgu →
   açık. İki koyu blok arasındaki açık bölge nefes alıyor.

   Açık temada zemin gri değil DOYGUN AMA AÇIK bir turkuaz yıkaması:
   bölge renkli okunuyor, döşemeler beyaz kaldığı için ferah kalıyor.
   Renk zeminde geniş ve zayıf, döşeme kenarında dar ve tok. */
.op-serit {
  border-radius: 14px; padding: 18px 20px 20px;
  background: linear-gradient(180deg, #FAFBFD 0%, #EDEFF3 100%);
  border: 1px solid var(--c-outline-variant);
  color: var(--c-on-surface);
}
.dark .op-serit {
  background: linear-gradient(160deg, #0A2A24 0%, #061E1A 100%);
  border-color: rgba(120, 200, 180, .16);
  color: #DFF3EC;
}
.op-basliklar {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px 28px; flex-wrap: wrap; margin-bottom: 22px;
}
/* Üstteki bölüm başlığı kalkınca bu satır bölümün ADI oldu; bir alt
   etiket değil, künye. Küçük ve harf aralıklı kalıyor ama manşetle
   arasındaki mesafe açıldı: 10 px'lik göz ile 17 px'lik cümle arasında
   sıçrama yoktu ve ikisi tek blok gibi okunuyordu. */
.op-goz {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--c-primary); opacity: .9; margin-bottom: 10px;
}
.dark .op-goz { color: #6FBFA8; }
/* Manşet bölümün TEK cümlesi: durum makinesinin gerekçesi. Punto ve
   ağırlık ona göre — 17 px düz gövde metni, dört kartın üstünde
   başlıksız bir paragraf gibi duruyordu. */
.op-ozet {
  font-family: "Public Sans", system-ui, sans-serif;
  font-size: 21px; font-weight: 500; line-height: 1.28;
  letter-spacing: -.018em;
  color: var(--c-on-surface); max-width: 46ch;
}
.dark .op-ozet { color: #EEFAF5; }
.op-durum {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 13px; border-radius: 8px;
  border: 1px solid var(--renk, #8FB3A7);
  background: #FFFFFF;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px;
}
.dark .op-durum { background: rgba(255, 255, 255, .04); }
.op-durum .nokta {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--renk, #8FB3A7);
  box-shadow: 0 0 9px var(--renk, #8FB3A7);
}
.op-durum .ad { color: var(--renk, #8FB3A7); text-transform: uppercase;
  letter-spacing: .1em; }
.op-durum .ayrac { width: 1px; height: 15px;
  background: var(--c-outline-variant); }
.op-durum .ayrac[hidden], .op-durum .t[hidden] { display: none; }
.dark .op-durum .ayrac { background: rgba(120, 200, 180, .25); }
.op-durum .t { color: var(--c-on-surface); font-weight: 600; }
.dark .op-durum .t { color: #EEFAF5; }

.op-dosemeler {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
}
/* KART ZEMİNİ GERÇEKTEN RENKLİ.
   İki aşamada buraya gelindi. Önce dördü de düz beyazdı: şerit doğru
   ama sessizdi, renk yalnızca üst çizgide ve manşet rakamındaydı.
   Sonra beyaza inen ince bir yıkama kondu ve kullanıcı bunu "yalandan
   biraz hafif renklendirme" diye tarif etti — haklıydı: %14'lük bir
   fısıltı, renk kararı vermek değil renk kararından kaçınmaktır.

   Kart artık BAŞTAN SONA kendi renginde. Açık temada bu AÇIK bir
   renk: kendi tonunun beyazla karışımı, yani pastel ama net. Üstte
   biraz daha yoğun, altta hafifliyor — düz bir dolgu kartı yassı
   gösteriyordu. Yazı hâlâ koyu ve zemin hâlâ açık olduğu için
   okunurluk düşmüyor; değişen şey kartın renksiz olmaktan çıkması. */
/* ── KART: AÇIK SAYFA ÜSTÜNDE KOYU-DOYGUN ÇİP ──
 *
 * Bu karara dört denemede gelindi ve üçü de yanlıştı:
 *   1. düz beyaz kart          → doğru ama sessiz
 *   2. beyaza inen ince yıkama → "yalandan hafif renklendirme"
 *   3. açık pastel gradyan     → renkli ama donuk, doygun değil
 *   4. KOYU DOYGUN GRADYAN     → burası
 *
 * Yanılgı, "açık tema" ile "her şey açık olmalı"yı aynı şey sanmaktı.
 * Değiller. Sayfa zemini açık kalıyor — ferahlığı o veriyor — ama
 * kartlar koyu ve doygun: orman yeşili, derin turkuaz, koyu mavi,
 * pas kırmızısı. Açık zemin üstünde koyu bir renk, açık bir renkten
 * çok daha doygun okunur; pastel bir yüzeyde doygunluk fiziksel
 * olarak mümkün değil, çünkü beyaz katmak kromayı düşürür.
 *
 * Kart iki temada da AYNI. Değişen tek şey altındaki sayfa. Bu aynı
 * zamanda ikinci bir sorunu bitiriyor: dört kartın metni, grafiği ve
 * mürekkebi artık tek bir zemin varsayımına göre ayarlanıyor. */
.op-dosem {
  /* Kartın İÇİ kendi küçük koyu dünyası. Alt öğeler bu jetonları
     okuyor; yoksa her biri ayrı ayrı geçersiz kılınmak zorundaydı. */
  --c-on-surface:         #EDF7F3;
  --c-on-surface-variant: #A0C1B6;
  --c-outline:            #7EA096;
  --c-outline-variant:    rgba(255, 255, 255, .15);

  border-radius: 11px;
  padding: 13px 15px 12px;
  /* Zemin İKİ UÇLU GRADYAN. Uçlar komşu hue'lar (derin turkuaz→gece
     mavisi gibi) ve geçiş çapraz: renk yüzey boyunca hareket edince
     kart canlı okunuyor, düz dolgu donuk kalıyor.
     Alttaki renkli gölge kartı açık zeminden ayırıyor ve rengi
     kenarın dışına taşıyor. */
  background: linear-gradient(145deg, var(--g-a) 0%, var(--g-b) 100%);
  border: 1px solid color-mix(in srgb, var(--renk) 34%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    0 10px 26px -16px color-mix(in srgb, var(--renk) 75%, transparent);
  display: flex; flex-direction: column;
  /* Üstte ince bir renk şeridi: adımın kimliği. Tüm kenarı boyamak
     dört kutuyu birbiriyle yarıştırıyordu. */
  border-top: 2px solid var(--renk);
}
.op-dosem .ust {
  display: flex; align-items: center; gap: 8px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
}
.op-dosem .ust .no { color: var(--renk); font-weight: 600; }
.op-dosem .ust .ad { color: var(--c-on-surface-variant); }
.op-dosem .ust .rozet {
  margin-left: auto; padding: 2px 7px; border-radius: 999px;
  border: 1px solid var(--renk); color: var(--renk);
  background: var(--renk-yumusak);
  font-size: 9px; letter-spacing: .08em; white-space: nowrap;
}
.op-dosem .konu {
  font-family: "Public Sans", system-ui, sans-serif;
  font-size: 15px; font-weight: 600; color: var(--c-on-surface);
  margin: 7px 0 2px;
}
.op-dosem .manset {
  display: flex; align-items: baseline; gap: 6px; margin-bottom: 8px;
}
.op-dosem .manset b {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 30px; line-height: 1.05; letter-spacing: -.025em;
  font-variant-numeric: tabular-nums; color: var(--renk);
}
.op-dosem .manset span {
  font-size: 11px;
  color: var(--c-on-surface-variant);
}
.op-dosem .grafik { height: 52px; margin-bottom: 10px; }
.op-dosem .grafik canvas { width: 100%; height: 100%; display: block; }

/* Anahtar-değer: iki sütun, rakamlar sağda ve tabular. Hizasız bir
   sütunda göz karşılaştırma yapamıyor ve bu döşemelerde okunacak asıl
   şey rakamlar. */
.op-dosem .satirlar {
  margin: 0; display: grid; grid-template-columns: 1fr auto;
  gap: 3px 10px; font-size: 11.5px;
  padding-top: 9px;
  border-top: 1px solid color-mix(in srgb, var(--renk) 38%, transparent);
}
.op-dosem .satirlar dt { color: var(--c-on-surface-variant); }
.op-dosem .satirlar dd {
  margin: 0; text-align: right; color: var(--c-on-surface);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}
.op-dosem .kaynak {
  margin-top: auto; padding-top: 9px;
  font-size: 10px; color: var(--c-outline); line-height: 1.4;
  /* İKİ SATIRLIK YER BAŞTAN AYRILIR — yoksa pano titriyor.
     Künye iskelette "—" ile başlıyor (tek satır, 23 px) ve veri gelince
     "Open-Meteo · DWD ICON (11 km, saatlik) · 2026-…" olup ikinci satıra
     sarıyor (37 px). Şerit her tazelemede yeniden kurulduğu için bu 14 px
     her turda gidip geliyordu: döşeme 385↔399, ızgara satırı onunla,
     sayfa boyu 2744↔2758 ve iç kaydırıcının çubuğu sürekli gelip
     gidiyordu. Ölçülen iki satır yüksekliği: 9 px dolgu + 2 × 1,4 em.
     Üç satır gerekirse yine büyür; gözlenen salınım 1↔2 satırdı. */
  min-height: calc(2.8em + 9px);
}

/* ── Hava haritası: zaman çubuğu ve renk skalası ──
   Ventusky'nin alt şeridi ve sağ skalası. İkisi de süs değil: zaman
   çubuğu olmadan "bulut nereden geliyor" sorusu cevapsız kalıyor,
   skala olmadan renk bir sayıya bağlanmıyor. */
.zaman-cubugu {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 14px; border-radius: 10px;
  background: var(--c-surface-container);
  border: 1px solid var(--c-outline-variant);
}
.zaman-cubugu button[data-oynat] {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border: 1px solid var(--c-outline-variant);
  background: var(--c-surface); color: var(--c-primary);
}
.zaman-cubugu button[data-oynat]:hover { border-color: var(--c-primary); }
.zaman-cubugu .serit { flex: 1 1 auto; min-width: 0; position: relative; }
.zaman-cubugu input[type="range"] {
  width: 100%; margin: 0; accent-color: var(--c-primary);
  /* Şeridin kendisi renkli: gün boyu ışınımın gidişi. Düz gri bir
     kaydırıcı, kaydırılan şeyin ZAMAN olduğunu söylemiyordu. */
  height: 4px; -webkit-appearance: none; appearance: none;
  background: linear-gradient(90deg,
    #0E3B33 0%, #F2B23C 26%, #FFE9A8 50%, #F2B23C 74%, #0E3B33 100%);
  border-radius: 2px; cursor: pointer;
}
.zaman-cubugu input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 13px; height: 13px; border-radius: 50%;
  background: #EEFAF5; border: 2px solid var(--c-primary);
  box-shadow: 0 0 10px rgba(79, 211, 184, .6); cursor: pointer;
}
.zaman-cubugu .isaretler {
  position: relative; height: 14px; margin-top: 4px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 9px; color: var(--c-on-surface-variant);
}
.zaman-cubugu .isaretler span {
  position: absolute; transform: translateX(-50%); white-space: nowrap;
}
.zaman-cubugu .okuma {
  flex: 0 0 auto; text-align: right; line-height: 1.25;
  font-family: "JetBrains Mono", ui-monospace, monospace;
}
.zaman-cubugu .okuma span {
  display: block; font-size: 10px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--c-on-surface-variant);
}
.zaman-cubugu .okuma b { font-size: 14px; color: var(--c-on-surface); }

.renk-skalasi {
  display: flex; align-items: center; gap: 8px; flex-wrap: nowrap;
}
.renk-skalasi .ad { white-space: nowrap; }
.renk-skalasi .serit {
  width: 132px; height: 9px; border-radius: 3px;
  border: 1px solid var(--c-outline-variant);
}
.renk-skalasi .uc {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px; white-space: nowrap;
}

/* ── Döşeme görsel şeridi ──
   Bir tur önce kaldırılmıştı: "pazarlama değil pano olsun" denince
   görselleri de birlikte atmıştım ve bu fazla ileri gitmekti. Görsel
   bağlamı veriyor, altındaki rakamlar kararı — ikisi çelişmiyor.

   Geri gelmeyen şey YANLIŞ BEYAN: "CAM 01 · REC" etiketi ve yanıp sönen
   kayıt noktası, olmayan bir kamera yayını ima ediyordu. Şeritte
   yalnızca adımın adı var. Tarama çizgileri ve radar da geri gelmedi;
   onlar kontrol odası taklidiydi ve okumayı zorlaştırıyordu. */
.op-dosem .sahne {
  position: relative; margin: -13px -15px 11px;
  height: 92px; overflow: hidden;
  /* Zemin, poster karesi gelene kadarki bekleme rengi. Açık temada
     siyah bir dikdörtgen beyaz kartın ortasında delik gibi duruyordu. */
  background: #071F1A 50% 45% / cover no-repeat;
  /* ALT KENARLIK YOK. Açık kart döneminden kalan ince beyaz çizgi,
     kart koyulaşınca görüntüyle gövde arasında bir DİKİŞ hâline
     geldi. Ayırıcıya gerek de yok: solum katmanı görüntünün altını
     zaten karartıyor ve iki yüzey birbirine akıyor. */
}
/* Video, KARE ÇİZENE KADAR görünmez. Donan bir çözücü siyah bir
   dikdörtgen boyuyor ve altındaki poster karesini örtüyordu. */
.op-dosem .sahne video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 45%;
  filter: saturate(.72) contrast(1.04) brightness(.8);
  opacity: 0; transition: opacity .45s ease;
}
.op-dosem .sahne video.cizdi { opacity: 1; }
/* Alttan yukarı koyulaşan kat: şeridin altındaki başlık satırı
   görüntünün üstüne binmeden okunsun. */
.op-dosem .sahne .solum {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(6,26,22,.28) 0%,
    rgba(6,26,22,.04) 45%, rgba(6,26,22,.82) 100%);
}
.op-dosem .sahne .etiket {
  position: absolute; left: 11px; bottom: 8px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px; letter-spacing: .16em;
  /* Etiket FOTOĞRAFIN üstünde duruyor, kartın zemininde değil.
     Bu yüzden temadan bağımsız olarak PARLAK ton kullanıyor: açık
     temanın koyulaştırılmış tonu (beyaz zemin için doğru olan)
     görüntünün karanlık alt kenarında kayboluyordu. */
  color: var(--renk-parlak, var(--renk));
  text-shadow: 0 1px 6px rgba(0, 0, 0, .85), 0 0 2px rgba(0, 0, 0, .7);
}

/* ── Grafik göstergeleri ──
   Örnekler ÇİZİLİYOR, yazı karakteriyle taklit edilmiyor. Önceki
   sürüm ■ ┄ ▨ kullanıyordu: kutu-çizim karakterleri yazı tipine göre
   farklı genişlikte geliyor, hizalanmıyor ve "┄" kırık bir tire gibi
   görünüyordu. Örnek artık grafiğin kendisiyle aynı biçimi taşıyor —
   dolgu dolu, kesikli kesikli, tarama taralı. */
.gosterge { display: inline-flex; align-items: center; gap: 7px; }
.gosterge .ornek {
  width: 20px; height: 10px; border-radius: 2px;
  display: inline-block; flex: none;
}
.gosterge .ornek.dolgu {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--k-uretim) 62%, transparent) 0%,
    color-mix(in srgb, var(--k-uretim) 10%, transparent) 100%);
  border-top: 2px solid var(--k-uretim);
}
.gosterge .ornek.kesik {
  height: 0; border-radius: 0; border-top: 2px dashed currentColor;
}
.gosterge .ornek.kesik.berrak { border-top-color: var(--k-isinim); }
.gosterge .ornek.kesik.yuk    { border-top-color: var(--k-kayip); }
.gosterge .ornek.tarama {
  background: repeating-linear-gradient(45deg,
    color-mix(in srgb, var(--k-kayip) 34%, transparent) 0 3px,
    transparent 3px 6px);
  border: 1px solid color-mix(in srgb, var(--k-kayip) 34%, transparent);
}

/* Açılır başlık oku: tek glif, açık durumda çevriliyor.
   İki ayrı ikon adı kullanılamıyor — yerel alt kümede "expand_less"
   yok ve ligatür çözülmeyince ad ham metin olarak ekrana düşüyor. */
.material-symbols-outlined.kivrim {
  transition: transform 160ms ease;
}
.material-symbols-outlined.kivrim.acik { transform: rotate(180deg); }

/* Kahraman bandı YATAYDA KAYDIRILMAZ.
   Kaynak şeridindeki ışık haleleri (`::before`, inset -8% -16% 6%)
   kutularının dışına taşıyor — kasıtlı, hâle nesnenin etrafında
   olmalı. Ama en sağdaki varlığın halesi şeridin de dışına çıkıp
   sayfaya 41 piksellik yatay kaydırma ekliyordu. `clip`, kaydırmayı
   engelliyor ama `hidden`ın aksine dikey taşmayı serbest bırakıyor;
   kırpılan yer zaten görünür alanın dışında. */
.bant-koyu { overflow-x: clip; }

/* Sürüm çipi: sekmedeki arayüz sunucudakinden eski kaldığında çıkar.
   Sağ altta duruyor — panonun hiçbir kontrolünü örtmüyor ve tıklanana
   kadar da hiçbir şey yapmıyor; yenilemek kullanıcının kararı. */
.surum-cip {
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
  padding: 9px 14px; border-radius: 999px; cursor: pointer;
  font-family: "Public Sans", system-ui, sans-serif; font-size: 12.5px;
  font-weight: 600; letter-spacing: .01em;
  color: var(--c-on-primary); background: var(--c-primary);
  border: 1px solid color-mix(in srgb, var(--c-primary) 70%, #000);
  box-shadow: 0 8px 22px -10px rgba(0, 0, 0, .55);
}
.surum-cip:hover { filter: brightness(1.08); }

/* ── Canlı şerit (header) ──
   Sahanın o anki hâli: gökyüzü, taşıyıcı rüzgâr, üretilen güç. Bu köşe
   önce "koşu 1.9 sn" yazıyordu — hesabın süresi, yani bir geliştirme
   ölçüsü. Panonun en görünür köşesi ölçülen değere ayrıldı.

   Bant HER ZAMAN KOYU zeminde duruyor (header koyu bant), o yüzden
   renkleri temaya bağlı değil. */
.canli-serit {
  display: flex; align-items: center; gap: 18px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
}
/* HİZA İKİ KADEMELİ.
   Tek bir esnek satırda ikon ile iki farklı boydaki yazıyı aynı anda
   hizalamak olmuyordu: `baseline` verince ikon aşağı kaçıyor, `center`
   verince rakam ile birimi taban hizasını kaybediyordu. Yazı kendi
   kutusuna alındı — ikon O KUTUYA göre ortalanıyor, rakam ile birim de
   kendi aralarında taban hizasında kalıyor. */
.canli-serit .oge {
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap; cursor: default;
}
.canli-serit .yazi {
  display: inline-flex; align-items: baseline; gap: 6px;
}
.canli-serit img {
  width: 26px; height: 26px; display: block;
  /* Hafif gölge: ikonlar koyu bandın üstünde yüzüyor gibi dursun. */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45));
}
.canli-serit b {
  font-size: 14px; font-weight: 600; color: #EAF6F1;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.canli-serit i {
  font-style: normal; font-size: 10.5px; color: #8FA898;
  letter-spacing: .02em;
}
/* Üretim vurgulu: şeridin okunacak asıl sayısı o. */
.canli-serit .uretim b { color: var(--e-gunes); font-size: 15px; }

@media (max-width: 1100px) {
  /* Dar ekranda yalnızca üretim kalıyor: üçünü sıkıştırmak yerine
     birini okunur bırakmak daha iyi. */
  .canli-serit .oge:not(.uretim) { display: none; }
}

/* ── Hava haritası: başlık satırı ──
   Denetleyiciler başlıkla aynı satırda, sağ kenara sıkışmış hâlde
   duruyordu: ortada kocaman bir boşluk, sağda sekiz düğme dip dibe ve
   iki grubun arasında hiçbir ayrım yok. Şimdi gruplar kendi
   kutularında, aralarında bir ayraçla; satır dolarsa alta iniyorlar
   ve sıkışmıyorlar. */
.harita-ust {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.harita-denetim {
  display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap;
  padding: 10px 14px; border-radius: 10px;
  background: var(--c-surface-container);
  border: 1px solid var(--c-outline-variant);
}
.harita-denetim .oykum { display: flex; flex-direction: column; gap: 5px; }
.harita-denetim .baslik {
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-on-surface-variant);
}
/* Ayraç: iki grubun ayrı sorular sorduğunu söylüyor — biri "neyi
   göster", diğeri "neyin üstünde". */
.harita-denetim .ayrac {
  width: 1px; align-self: stretch; margin: 2px 0;
  background: var(--c-outline-variant);
}
@media (max-width: 900px) {
  .harita-denetim .ayrac { display: none; }
}

/* Skala satırı: renk ölçeği, akış çizgisi notu ve atıf. Üçü tek satırda
   dip dibeydi; artık aralarında pay var ve atıf sağa yaslı. */
.harita-alt [data-atif] { margin-left: auto; opacity: .75; }

/* ── KARAR PENCERESİ ──────────────────────────────────────────────────
   Şeridin sağındaki boşluk, düğümün yanı. Dört sayı da `/api/durum`
   yanıtında zaten vardı ve hiçbiri ekranda değildi: kesişim ile son
   başlatma yalnızca UYARI'da ve GÖRELİ olarak ("23 dk sonra") geçiyordu
   — operatör duvardaki saate bakıp karşılaştırıyor, saat lazım.

   Kutu tıklanmıyor: bir okuma, bir denetim değil. */
.karar-kutusu { position: absolute; z-index: 0; pointer-events: none; }
.karar-kutusu[hidden] { display: none; }
.karar-baslik {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
  color: #7FC9B3; opacity: .8; margin-bottom: 9px;
}
/* Dar bandta tek kolona iniyor; iki sıkışık kolon, hiç olmamasından
   kötü okunuyordu. */
.karar-izgara {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
}
/* Hücreler düz gri şeffaflıktı ve bandın üstünde sönük duruyordu.
   Zemin bandın yeşil ailesinden, üstten alta hafif açılan bir geçiş —
   kutular böylece bandın üstünde DURUYOR, içine gömülmüyor. */
.karar-hucre {
  padding: 9px 11px 10px; border-radius: 9px;
  background: linear-gradient(180deg,
    rgba(104, 224, 190, .17), rgba(10, 44, 38, .34));
  border: 1px solid rgba(122, 226, 196, .27);
  box-shadow: inset 0 1px 0 rgba(180, 255, 235, .07);
}
/* Geri sayım varken: o an ekranda karar gerektiren tek sayı bu. Renk
   durumdan geliyor, ayrı bir uyarı rengi tanımlanmıyor — bant zaten
   UYARI'da amber, KRİTİK'te kırmızı. */
.karar-hucre.acil {
  border-color: color-mix(in srgb, var(--durum-renk, #4FE0C6) 55%,
                          transparent);
  background: color-mix(in srgb, var(--durum-renk, #4FE0C6) 9%,
                        transparent);
}
.karar-hucre.acil .karar-deger { color: var(--durum-renk, #4FE0C6); }
.karar-ad {
  font-size: 9px; letter-spacing: .13em; text-transform: uppercase;
  color: #8FD3BE; opacity: .85; margin-bottom: 3px;
}
.karar-deger {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums; font-size: 17px;
  color: #F2FBF8; line-height: 1.15;
  display: flex; align-items: baseline; gap: 6px; white-space: nowrap;
}
.karar-deger em { font-style: normal; font-size: 12px; opacity: .5; }
.karar-deger i {
  font-style: normal; font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; opacity: .48;
}

/* ── KAYIP KARTLARI VE ÖLÇÜ KUTULARI ─────────────────────────────────
   Enerji Akışı sayfasının kartları düz beyaz kutulardı: aynı ürünün
   panosunda koyu, doygun, renk aileli döşemeler dururken burada
   `bg-surface panel-border` vardı ve iki sayfa aynı üründen değilmiş
   gibi okunuyordu.

   Döşeme dili aynen taşınıyor (bkz. sureklilik.js ADIMLAR): koyu
   gradyan, üstte renkli kenar, göz satırı, büyük renkli rakam. Video
   şeridi TAŞINMIYOR — orada adımın konusunu anlatıyordu, burada
   anlatacağı bir şey yok ve yalnızca yer kaplardı.

   Kart zemini iki temada da koyu ve bu bilinçli: beyaz katmak kromayı
   düşürür, yani "açık ve doygun" aynı anda mümkün değil. Sayfa zemini
   açık kalıyor, kart onun üstünde koyu bir çip. */
.kayip-izgara {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
}
/* Kart KENDİ genişliğine göre yerleşiyor (container sorgusu), sayfanın
   genişliğine göre değil: JTI sahasında iki kalem var, pilot sahada üç.
   İkideyken her kart ~950 px'e geriliyordu ve kısa bir paragraf o alanı
   dolduramıyordu — rakam boş bir tarlanın ortasında duruyordu. Geniş
   kartta açıklama sağa, ayraçlı ikinci kolona geçiyor. */
.kayip-kart {
  container-type: inline-size;
  position: relative; overflow: hidden;
  border-radius: 14px; padding: 16px 18px 18px;
  background: linear-gradient(157deg, var(--g-a) 0%, var(--g-b) 100%);
  border: 1px solid rgba(255, 255, 255, .10);
  color: #EEF6F2;
}
/* Üst kenar: kartın hangi aileden olduğunu bir bakışta söyleyen tek
   çizgi. Kenarlığın tamamını renklendirmek kutuyu çerçeveye çeviriyor
   ve içindeki rakamla yarışıyordu. */
.kayip-kart::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: var(--renk);
}
.kayip-kart .ust {
  display: flex; align-items: center; gap: 9px; margin-bottom: 10px;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase;
}
.kayip-kart .ust .no { color: var(--renk); font-weight: 600; }
.kayip-kart .ust .ad { opacity: .72; }
.kayip-kart .ust .rozet {
  margin-left: auto; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--renk); color: var(--renk);
  font-size: 9px; letter-spacing: .1em; white-space: nowrap;
}
.kayip-kart .konu {
  font-family: "Public Sans", system-ui, sans-serif;
  font-size: 16px; font-weight: 600; letter-spacing: -.01em;
  margin-bottom: 2px;
}
.kayip-kart .manset {
  display: flex; align-items: baseline; gap: 7px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}
.kayip-kart .manset b {
  font-size: 30px; font-weight: 600; letter-spacing: -.02em;
  color: var(--renk); line-height: 1.1;
}
.kayip-kart .manset span { font-size: 12px; opacity: .6; }
/* Pay çubuğu: kalemin geri kazanılabilir toplam içindeki ağırlığı.
   Üç rakamı birbiriyle karşılaştırmak için göz, üç kartın arasında
   gidip geliyordu; çubuk bunu tek bakışta veriyor. */
.kayip-kart .pay {
  height: 4px; border-radius: 999px; margin: 12px 0 6px;
  background: rgba(255, 255, 255, .12); overflow: hidden;
}
.kayip-kart .pay i { display: block; height: 100%; background: var(--renk); }
.kayip-kart .pay-not, .kayip-kart .aciklama {
  font-size: 11px; line-height: 1.5; opacity: .68;
}
.kayip-kart .aciklama { margin-top: 10px; }

@container (min-width: 520px) {
  .kayip-kart {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 30px; align-content: start;
  }
  .kayip-kart .ust { grid-column: 1 / -1; }
  .kayip-kart .konu, .kayip-kart .manset,
  .kayip-kart .pay, .kayip-kart .pay-not { grid-column: 1; }
  .kayip-kart .aciklama {
    grid-column: 2; grid-row: 2 / -1; align-self: center;
    margin-top: 0; padding-left: 26px; font-size: 12px;
    border-left: 1px solid rgba(255, 255, 255, .13);
  }
}

/* Ölçü kutuları: aynı dilin küçük hâli. Dört kutu da düz beyazdı ve
   sayfanın en üstünde, kartlardan önce görülüyorlardı. */
.olcu-kutu {
  border-radius: 11px; padding: 10px 13px;
  background: linear-gradient(160deg, #0D3830 0%, #071F1B 100%);
  border: 1px solid rgba(120, 200, 180, .18);
  display: flex; flex-direction: column; justify-content: center;
}
.olcu-kutu .ad {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 9px; letter-spacing: .13em; text-transform: uppercase;
  color: #8FD3BE; opacity: .85; margin-bottom: 3px;
}
.olcu-kutu .deger {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums; font-size: 20px; font-weight: 600;
  letter-spacing: -.02em; color: #F2FBF8;
}
.olcu-kutu .deger.eksi { color: #FF7A66; }

/* ── KİRLENME BÖLÜMÜ ──────────────────────────────────────────────────
   İki panel yan yana ve ikisi BİLEREK farklı görünüyor: soldaki
   hesaplanan, sağdaki kavram. Aynı kabı paylaşsalardı okuyucu ikisini
   de aynı güvenle okurdu ve kavram panelindeki temsilî tarih ölçülmüş
   sanılırdı — bu üründe yapılabilecek en pahalı hata. */
.kirlenme-izgara {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.kirlenme-panel {
  position: relative; border-radius: 14px; padding: 16px 18px 18px;
  background: linear-gradient(157deg, #5A3D0B 0%, #2E210C 100%);
  border: 1px solid rgba(255, 255, 255, .10);
  color: #F3EEE4; --renk: #F2B23C;
}
.kirlenme-panel::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: var(--renk);
}
/* Kavram paneli koyu griye çekiliyor ve kesik kenarlık alıyor: hesabın
   rengi yok, çünkü hesap yok. */
.kirlenme-panel.kavram {
  background: linear-gradient(157deg, #24303A 0%, #141C24 100%);
  border-style: dashed; border-color: rgba(150, 180, 210, .28);
  --renk: #8FB6D8;
}
.kirlenme-panel .damga {
  display: inline-block; margin-bottom: 10px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(143, 182, 216, .16);
  border: 1px solid rgba(143, 182, 216, .45);
  color: #BBD7EE;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
}
.kirlenme-panel .ust {
  display: flex; align-items: center; gap: 9px; margin-bottom: 8px;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase;
}
.kirlenme-panel .ust .no { color: var(--renk); font-weight: 600; }
.kirlenme-panel .ust .ad { opacity: .66; }
.kirlenme-panel .konu {
  font-family: "Public Sans", system-ui, sans-serif;
  font-size: 16px; font-weight: 600; letter-spacing: -.01em;
}
.kirlenme-panel .manset {
  display: flex; align-items: baseline; gap: 8px; margin-top: 2px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}
.kirlenme-panel .manset b {
  font-size: 30px; font-weight: 600; letter-spacing: -.02em;
  color: var(--renk); line-height: 1.1;
}
.kirlenme-panel .manset span { font-size: 12px; opacity: .6; }
.kirlenme-panel .not { font-size: 12px; line-height: 1.55;
  opacity: .82; margin-top: 10px; }
.kirlenme-panel .not b { color: var(--renk); font-weight: 600; }
.kirlenme-panel .alt { font-size: 11px; line-height: 1.5;
  opacity: .6; margin-top: 12px; }

/* On iki aylık çubuk: sayı okumadan mevsimi gösteriyor. */
.kirlenme-panel .aylar {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: 3px; height: 62px; margin-top: 14px; align-items: end;
}
.kirlenme-panel .ay {
  display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end; height: 100%; gap: 4px;
}
.kirlenme-panel .ay i {
  display: block; width: 100%; border-radius: 3px 3px 0 0;
  background: rgba(242, 178, 60, .34);
}
.kirlenme-panel .ay.secili i { background: var(--renk); }
.kirlenme-panel .ay span {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 8px; opacity: .5;
}
.kirlenme-panel .ay.secili span { opacity: 1; color: var(--renk); }

/* Kavram eğrisi: ölçülen kısım düz, tahmin bandı yayılan. */
.kirlenme-panel .egri { margin-top: 14px; }
.kirlenme-panel .egri svg { display: block; width: 100%; height: 92px; }
.kirlenme-panel .egri .bant { fill: rgba(143, 182, 216, .18); stroke: none; }
.kirlenme-panel .egri .cizgi {
  fill: none; stroke: var(--renk); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.kirlenme-panel .egri .simdi {
  stroke: rgba(255, 255, 255, .45); stroke-width: 1; stroke-dasharray: 3 3;
}
.kirlenme-panel .efsane {
  display: flex; justify-content: space-between; margin-top: 4px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 8px; letter-spacing: .1em; text-transform: uppercase;
  opacity: .45;
}

/* Bölüm başlığındaki öncü çizgi: başlık koyu kartların üstünde açık
   zeminde tek başına duruyordu ve neyin başlığı olduğu okunmuyordu.
   Kısa renkli bir çizgi onu altındaki bloğa bağlıyor. */
.bolum-basligi {
  display: flex; align-items: center; gap: 9px;
}
.bolum-basligi::before {
  content: ""; width: 16px; height: 2px; border-radius: 2px;
  background: var(--c-primary, #0E8F55); opacity: .75; flex: none;
}
.dark .bolum-basligi::before { background: #4FE0C6; }

/* Kart notu: kartlara asılı uyarı satırı. Düz paragrafken koyu
   kartların altında sayfaya ait olmayan bir metin gibi duruyordu. */
.kart-notu {
  margin-top: 14px; padding: 12px 16px;
  border-left: 2px solid var(--c-primary, #0E8F55);
  border-radius: 0 8px 8px 0;
  background: var(--c-surface-container, rgba(14, 143, 85, .05));
  color: var(--c-on-surface-variant, #476153);
  font-family: "Public Sans", system-ui, sans-serif;
  font-size: 12px; line-height: 1.6;
}
.dark .kart-notu {
  border-left-color: #4FE0C6;
  background: rgba(79, 224, 198, .07);
  color: #A9CFC3;
}

/* ── İŞLETME: KÂR VE BAKIM ───────────────────────────────────────────
   Üç panel, üç soru: bugüne kadar ne kazandım, yılda ne kazanıyorum,
   ne zaman bakım gerekiyor. Kayıp kartlarıyla aynı döşeme dili ama
   yeşil ailede — orada kayıp anlatılıyor, burada kâr. */
.isletme-izgara {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(292px, 1fr));
}
.isletme-panel {
  position: relative; border-radius: 14px; padding: 16px 18px 18px;
  border: 1px solid rgba(255, 255, 255, .10);
  color: #EAF6F1;
  background: linear-gradient(157deg, #0C4A3C 0%, #062621 100%);
  --renk: #4FE0C6;
}
.isletme-panel::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: var(--renk);
}
/* Bakım paneli ayrı aile: bir kazanç değil, bir İŞ. */
.isletme-panel.bakim {
  background: linear-gradient(157deg, #4A3A0C 0%, #2A2109 100%);
  --renk: #F2B23C;
}
.isletme-panel .ust {
  display: flex; align-items: baseline; gap: 9px; margin-bottom: 8px;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase;
}
.isletme-panel .ust .no { color: var(--renk); font-weight: 600; }
.isletme-panel .ust .ad { opacity: .6; letter-spacing: .08em; }
.isletme-panel .konu {
  font-family: "Public Sans", system-ui, sans-serif;
  font-size: 14px; font-weight: 600; opacity: .82;
}
.isletme-panel .manset {
  display: flex; align-items: baseline; gap: 8px; margin-top: 1px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}
.isletme-panel .manset b {
  font-size: 30px; font-weight: 600; letter-spacing: -.025em;
  color: var(--renk); line-height: 1.12;
}
.isletme-panel .manset span { font-size: 11px; opacity: .58; }
.isletme-panel .satirlar {
  margin-top: 14px; display: grid; gap: 6px;
  border-top: 1px solid rgba(255, 255, 255, .10); padding-top: 12px;
}
.isletme-panel .satirlar > div {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; font-size: 12px;
}
.isletme-panel .satirlar span { opacity: .62; }
.isletme-panel .satirlar b {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap;
}
.isletme-panel .ilerleme { margin-top: 14px; }
.isletme-panel .cubuk {
  height: 5px; border-radius: 999px; overflow: hidden;
  background: rgba(255, 255, 255, .13);
}
.isletme-panel .cubuk i {
  display: block; height: 100%; background: var(--renk);
  transition: width .8s ease;
}
.isletme-panel .ilerleme-not, .isletme-panel .marj {
  font-size: 11px; line-height: 1.5; opacity: .68; margin-top: 7px;
}
.isletme-panel .marj { margin-top: 14px; }
.isletme-panel .marj b { color: var(--renk); font-weight: 600; }

/* Başabaş alanı: panodaki "önlenen duruş değeri" alanıyla aynı fikir —
   varsayımı okuyucu giriyor, sonuç anında değişiyor. */
.kirlenme-panel .basabas {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.kirlenme-panel .basabas label {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  opacity: .72;
  font-family: "JetBrains Mono", ui-monospace, monospace;
}
.kirlenme-panel .para-kutu {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 5px 10px; border-radius: 8px;
  background: rgba(0, 0, 0, .26);
  border: 1px solid rgba(255, 255, 255, .18);
  color: var(--renk); font-size: 13px;
}
.kirlenme-panel .para-kutu input {
  width: 8ch; background: none; border: 0; outline: none; color: inherit;
  font: inherit; font-variant-numeric: tabular-nums;
}
.kirlenme-panel .para-kutu:focus-within {
  border-color: var(--renk);
  box-shadow: 0 0 0 3px rgba(242, 178, 60, .16);
}
.kirlenme-panel .basabas .sonuc {
  margin-top: 9px; font-size: 12px; line-height: 1.55; opacity: .88;
}
.kirlenme-panel .basabas .sonuc b { color: var(--renk); font-weight: 600; }

/* ── TASARIM · YERLEŞİM ──────────────────────────────────────────────
   Sayfa panodaki döşeme dilini kullanıyor: koyu doygun kartlar, üstte
   renkli kenar, göz satırı, büyük renkli rakam. Eski iskelet açık gri
   panellerdi ve panonun geri kalanıyla aynı üründen değilmiş gibi
   duruyordu; kopuk bir başlık bandı ve iki satıra sarkan bir değer
   satırı da vardı. */
.yer-serit {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.yer-olcu {
  position: relative; overflow: hidden;
  border-radius: 12px; padding: 13px 15px 14px;
  background: linear-gradient(158deg, #0C4136 0%, #061E1A 100%);
  border: 1px solid rgba(255, 255, 255, .09);
  color: #EAF6F1;
}
.yer-olcu::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: var(--renk, #4FE0C6);
}
.yer-olcu .ad {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--renk, #4FE0C6); opacity: .95; margin-bottom: 4px;
}
.yer-olcu .deger {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums; font-size: 25px; font-weight: 600;
  letter-spacing: -.025em; line-height: 1.1; color: #F2FBF8;
}
.yer-olcu .deger i { font-style: normal; font-size: 12px; opacity: .55; }
.yer-olcu .alt { font-size: 10.5px; opacity: .6; margin-top: 4px;
  line-height: 1.4; }

/* Plan solda geniş, künye sağda dar: plan sayfanın konusu. */
.yer-ust {
  display: grid; gap: 12px; align-items: stretch;
  grid-template-columns: minmax(0, 1.9fr) minmax(280px, .85fr);
}
@media (max-width: 1100px) {
  .yer-ust { grid-template-columns: 1fr; }
}
.yer-plan {
  position: relative; min-height: 420px; border-radius: 12px;
  overflow: hidden; background: #061E1A;
  border: 1px solid rgba(255, 255, 255, .09);
}
.yer-plan canvas { position: absolute; inset: 0;
  width: 100%; height: 100%; display: block; }
.yer-plan .plan-etiket {
  position: absolute; top: 10px; right: 14px; z-index: 2;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px; color: #A9CFC3; letter-spacing: .04em;
}
.yer-plan .plan-lejant {
  position: absolute; left: 14px; bottom: 14px; z-index: 2;
  display: grid; gap: 5px; padding: 10px 12px; border-radius: 9px;
  background: rgba(4, 16, 14, .72);
  border: 1px solid rgba(255, 255, 255, .12);
  font-size: 11px; color: #DDEFE8;
}
.yer-plan .plan-lejant div {
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
}
.yer-plan .plan-lejant i {
  width: 11px; height: 11px; border-radius: 2px; flex: none;
}
.yer-plan .plan-lejant i.tarali {
  background-image: repeating-linear-gradient(45deg,
    transparent, transparent 2px, #C4643F 2px, #C4643F 4px);
}
.yer-plan .plan-hata {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; text-align: center; padding: 24px;
  color: #A9CFC3; font-size: 13px; line-height: 1.6;
}

/* Künye: bir tablo değil, bir liste. Etiket solda, değer sağda ve
   değer ASLA sarkmıyor — eski sayfada "Modül" satırının değeri iki
   satıra iniyor, etiketi ortada asılı kalıyordu. */
.yer-kunye, .yer-tarama {
  border-radius: 12px; padding: 15px 17px 17px;
  background: linear-gradient(158deg, #0A3A31 0%, #051B18 100%);
  border: 1px solid rgba(255, 255, 255, .09);
  color: #E6F4EF;
}
.yer-kunye .ust, .yer-tarama .ust {
  display: flex; align-items: baseline; gap: 9px; margin-bottom: 12px;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px;
  letter-spacing: .15em; text-transform: uppercase;
}
.yer-kunye .ust .no, .yer-tarama .ust .no { color: #4FE0C6; font-weight: 600; }
.yer-kunye .ust .ad, .yer-tarama .ust .ad { opacity: .55; }
.yer-kunye dl { display: grid; gap: 0; }
.yer-kunye dl > div {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.yer-kunye dl > div:last-child { border-bottom: 0; }
.yer-kunye dt { font-size: 12px; opacity: .62; }
.yer-kunye dd {
  margin: 0; text-align: right; white-space: nowrap;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums; font-size: 13px; color: #F2FBF8;
}

/* Tarama: grafik solda, tablo sağda; ikisi aynı taramadan. */
.tarama-govde {
  display: grid; gap: 16px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
}
@media (max-width: 1100px) {
  .tarama-govde { grid-template-columns: 1fr; }
}
.tarama-grafik { min-width: 0; }
.tarama-grafik canvas { display: block; width: 100%; height: 190px; }
.tarama-grafik .eksen, .tarama-grafik .efsane {
  display: flex; justify-content: space-between; margin-top: 6px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 9.5px; opacity: .55;
}
.tarama-grafik .efsane {
  justify-content: flex-start; gap: 16px; flex-wrap: wrap;
  margin-top: 10px; opacity: .8;
}
.tarama-grafik .efsane span {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.tarama-grafik .efsane i {
  width: 9px; height: 3px; border-radius: 2px; flex: none;
}
.tarama-tablo { min-width: 0; overflow-x: auto; }
.tarama-tablo table {
  width: 100%; border-collapse: collapse;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums; font-size: 11.5px;
}
.tarama-tablo th {
  text-align: right; padding: 6px 8px; font-weight: 500;
  font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  color: #8FD3BE; border-bottom: 1px solid rgba(255, 255, 255, .14);
  white-space: nowrap;
}
.tarama-tablo th:first-child, .tarama-tablo td:first-child
  { text-align: left; }
.tarama-tablo td {
  text-align: right; padding: 7px 8px; white-space: nowrap;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
/* Bu çatının gerçek aralığına en yakın satır. */
.tarama-tablo tr.secili td {
  background: rgba(79, 224, 198, .10);
  color: #F2FBF8;
  box-shadow: inset 2px 0 0 #4FE0C6;
}
.tarama-karar {
  margin-top: 14px; font-family: "Public Sans", system-ui, sans-serif;
  font-size: 14px; line-height: 1.5; color: #F0FAF6;
}
.yer-tarama .kart-notu {
  border-left-color: #4FE0C6;
  background: rgba(79, 224, 198, .07);
  color: #A9CFC3;
}
.tarama-grafik .efsane b { color: #F2FBF8; font-weight: 600;
  font-variant-numeric: tabular-nums; }

/* ── TASARIM · GÖLGE ─────────────────────────────────────────────────
   Yerleşim sekmesiyle aynı dil: koyu döşemeler, renkli üst kenar, göz
   satırı. İki sekme aynı sayfanın iki yüzü, ayrı görünmemeleri gerekir. */
.gol-serit {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.gol-ust {
  display: grid; gap: 12px;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr);
}
.gol-alt {
  display: grid; gap: 12px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
@media (max-width: 1150px) {
  .gol-ust, .gol-alt { grid-template-columns: 1fr; }
}
.gol-panel {
  border-radius: 12px; padding: 15px 17px 17px;
  background: linear-gradient(158deg, #0A3A31 0%, #051B18 100%);
  border: 1px solid rgba(255, 255, 255, .09);
  color: #E6F4EF; min-width: 0;
}
.gol-panel .ust {
  display: flex; align-items: baseline; gap: 9px; margin-bottom: 12px;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px;
  letter-spacing: .15em; text-transform: uppercase;
}
.gol-panel .ust .no { color: #4FE0C6; font-weight: 600; }
.gol-panel .ust .ad { opacity: .55; }
.gol-panel .ust .sag { margin-left: auto; opacity: .5;
  letter-spacing: .06em; text-transform: none; }
.gol-panel .not {
  margin: 12px 0 0; font-family: "Public Sans", system-ui, sans-serif;
  font-size: 11.5px; line-height: 1.55; opacity: .68;
}
.gol-panel canvas { display: block; width: 100%; }

/* Isı haritası: saat ekseni solda MUTLAK konumlu, satırlarla hizalı. */
.gol-isi canvas { height: 210px; }
.gol-isi .isi-eksen { position: relative; }
.gol-isi .isi-eksen .y {
  position: absolute; left: -34px; top: -212px; bottom: 2px; width: 30px;
}
.gol-isi .isi-eksen .y span {
  position: absolute; right: 0; transform: translateY(-50%);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 9px; opacity: .5;
}
.gol-isi .isi-eksen .x {
  display: flex; justify-content: space-between; margin-top: 5px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 9px; opacity: .5;
}
.gol-isi { padding-left: 46px; }
.gol-isi .rampa {
  display: flex; align-items: center; gap: 9px; margin-top: 12px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 9px; opacity: .55; text-transform: uppercase;
  letter-spacing: .08em;
}
.gol-isi .rampa i { flex: 1; height: 7px; border-radius: 3px; }

.gol-gul canvas { height: 168px; }
.gol-gul .gul-eksen {
  display: flex; justify-content: space-between; margin-top: 5px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 9px; opacity: .5;
}

/* Aylık: iki çubuk yan yana — gölge oranı ve o ayın ışınımı. */
.gol-ay .ay-izgara {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 5px;
  height: 120px; align-items: end;
}
.gol-ay .ay {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  height: 100%; justify-content: flex-end;
}
.gol-ay .cubuklar {
  display: flex; align-items: flex-end; gap: 2px;
  width: 100%; height: 100%;
}
.gol-ay .cubuklar i { flex: 1; border-radius: 2px 2px 0 0; }
.gol-ay .cubuklar .golge { background: #4FE0C6; }
.gol-ay .cubuklar .isin { background: rgba(255, 197, 61, .55); }
.gol-ay .ay span {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 9px; opacity: .5;
}

/* En kötü tablalar: sıralama değil, eylem listesi. */
.gol-kotu table {
  width: 100%; border-collapse: collapse;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums; font-size: 11.5px;
}
.gol-kotu th {
  text-align: right; padding: 5px 8px; font-weight: 500;
  font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  color: #8FD3BE; border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.gol-kotu th:first-child, .gol-kotu td:first-child { text-align: left; }
.gol-kotu td {
  text-align: right; padding: 7px 8px; white-space: nowrap;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.gol-kotu td.cubuk-h { width: 34%; padding-left: 12px; }
.gol-kotu td.cubuk-h i {
  display: block; height: 5px; border-radius: 999px; background: #FF8A3D;
}

/* Mühendislik varsayımları: etiket solda, değer sağda ve aralarında
   1400 px boşluk vardı — göz hangi değerin hangi etikete ait olduğunu
   satır boyunca izlemek zorunda kalıyordu. Okunur bir genişliğe
   çekiliyor ve satırlar ikiye bölünüyor. */
.ayar-satirlar {
  display: grid; gap: 0 40px;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}
.ayar-satirlar .form-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 9px 0;
  border-bottom: 1px solid var(--c-outline-variant, #DBE7E1);
}
.ayar-satirlar .form-row .form-label { flex: 0 1 auto; }
.ayar-satirlar .form-row select { max-width: 260px; }

/* Katman listesindeki uyarı künyesi: doğruluğu ölçülmemiş bir katmanın
   adı yanında durur. Onay kutusu öntanımlı kapalı; künye açıldığında
   ne görüldüğünü söyler. */
.kat-uyari {
  display: inline-block; margin-left: 6px; padding: 0 5px;
  border-radius: 999px; font-size: 8.5px; letter-spacing: .06em;
  text-transform: uppercase; white-space: nowrap; vertical-align: middle;
  color: #B36A00; border: 1px solid rgba(179, 106, 0, .45);
  background: rgba(232, 163, 61, .14);
}
.dark .kat-uyari { color: #E8A33D; border-color: rgba(232,163,61,.5); }