/* GES Stüdyo — 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 ─────────────────────────────────────────────────────────── */

.dark { color-scheme: dark; }

.dark .bg-background              { background-color: #191713; }
.dark .bg-surface                 { background-color: var(--c-surface, #12211C); }
.dark .bg-surface-container-lowest{ background-color: #14120f; }
.dark .bg-surface-container-low   { background-color: var(--c-background, #0B1613); }
.dark .bg-surface-container       { background-color: var(--c-surface-container, #172A24); }
.dark .bg-surface-container-high  { background-color: var(--c-surface-container, #172A24); }
.dark .bg-surface-container-highest{background-color: #332f29; }
.dark .bg-primary                 { background-color: #6fa98c; }
.dark .bg-primary-fixed           { background-color: var(--c-primary-fixed, #123830); }
.dark .bg-primary-container       { background-color: #2f5c4a; }
.dark .bg-secondary-container     { background-color: #8a4a1e; }
.dark .bg-tertiary-container      { background-color: #2c6b47; }
.dark .bg-outline                 { background-color: var(--c-outline, #6C7F76); }

.dark .text-on-surface            { color: var(--c-inverse-on-surface, #EAF3EE); }
.dark .text-on-surface-variant    { color: var(--c-on-surface-variant, #93AFA2); }
.dark .text-outline               { color: var(--c-on-surface-variant, #476153); }
.dark .text-primary               { color: #8dbda8; }
.dark .text-on-primary            { color: var(--c-on-primary, #10231B); }
.dark .text-on-primary-fixed      { color: #cfe6da; }
.dark .text-secondary             { color: #e08a4e; }
.dark .text-tertiary-container    { color: #7fc9a1; }
.dark .text-error                 { color: #e0684a; }

.dark .border-outline-variant     { border-color: var(--c-outline-variant, #24382F); }
.dark .divide-outline-variant > * + * { border-color: var(--c-outline-variant, #24382F); }
.dark .border-primary             { border-color: #6fa98c; }
.dark .border-secondary           { border-color: #e08a4e; }
.dark .border-error               { border-color: #e0684a; }

/* 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, #172A24) !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: kullanıcı "tok renkler,
     gradyanlı" dedi ve haklıydı — düz krem hem soğuk paletle
     çakışıyordu hem yassı duruyordu. */
  background-image: linear-gradient(180deg,
    rgba(0, 128, 111, .05) 0%, rgba(0, 128, 111, 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;
  color: #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ı ── */
.dark .panel-header { background-color: var(--c-surface-container, #172A24); border-bottom-color: var(--c-outline-variant, #24382F); color: var(--c-inverse-on-surface, #EAF3EE); }
.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. Böylece koyu tema grafiklere de geçer.

   Değerler Stitch'in KENDİ grafik CSS'inden alındı (.chart-line-1,
   .chart-zone, .chart-grid, .chart-x-axis). İlk sürümde eksen ve ızgara
   için genel gri (rgba(128,128,128,…)) kullanmıştım — çizgi renkleri
   doğruydu ama ızgara ve eksen tasarımın dışındaydı. */
:root {
  --ges-cizgi-1: #c2622a;      /* .chart-line-1 */
  --ges-cizgi-2: #1f4d3d;      /* .chart-line-2 */
  --ges-izgara:  var(--c-outline-variant, #DBE7E1);      /* .chart-grid */
  --ges-eksen:   var(--c-outline-variant, #DBE7E1);      /* .chart-x-axis üst çizgisi */
  --ges-eksen-yazi: #414944;
  --ges-isaret:  #141310;      /* .chart-marker */
  --ges-isi:     140, 47, 22;  /* .chart-zone — ısı rampasının tabanı */
  --ges-belirsiz: var(--c-outline, #7A9488);     /* belirsizlik bantları: palette outline */
}
.dark {
  --ges-cizgi-1: #e08a4e;
  --ges-cizgi-2: #6fa98c;
  --ges-izgara:  var(--c-outline-variant, #24382F);
  --ges-eksen:   var(--c-outline-variant, #24382F);
  --ges-eksen-yazi: var(--c-on-surface-variant, #93AFA2);
  --ges-isaret:  var(--c-inverse-on-surface, #EAF3EE);
  --ges-isi:     224, 104, 74;
  --ges-belirsiz: var(--c-on-surface-variant, #476153);
}

/* İ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. */
.kahraman { position: relative; }
.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, #F5F9F7);
  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 at 84% 62%,
      rgba(0, 128, 111, .085) 0%, rgba(255, 255, 255, 0) 60%),
    radial-gradient(circle, rgba(0, 128, 111, .10) 1px, transparent 1.6px);
  background-size: 100% 100%, 100% 100%, 20px 20px;
  background-attachment: fixed;
}

[data-palet="gece"] body, .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 */
    radial-gradient(at top left, #0A5F52 0%, #04100E 100%);
  background-size: 100% 100%, 20px 20px, 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%);
}

/* ── 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;
}
/* 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;
  opacity: .58; 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(70, 200, 170, .40) 0%, rgba(30, 132, 112, .20) 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: .72; }
.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: .78; }

/* Ö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;
}

/* ── 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;
  background:
    radial-gradient(circle at 22% 0%,
      rgba(0, 128, 111, .10) 0%, rgba(255, 255, 255, 0) 58%),
    var(--c-surface-container, #F1F7F4);
  border-top: 1px solid var(--c-outline-variant, #DBE7E1);
}
.bant-bento .bolum-basligi {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-on-surface-variant, #476153); margin-bottom: 12px;
}

/* ── 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ı. */
.bento.derin {
  background: #04100E;
  color: #DCEDE6;
  border: 1px solid rgba(255, 255, 255, .06);
}
.bento.derin::after {
  background:
    /* 1 — çekirdek: küçük ve parlak */
    radial-gradient(circle at var(--ix, 84%) var(--iy, 16%),
      var(--cekirdek, rgba(255, 236, 200, .92)) 0%,
      rgba(255, 255, 255, 0) 7%),
    /* 2 — hale: dışarıda zirve yapar */
    radial-gradient(circle at var(--ix, 84%) var(--iy, 16%),
      rgba(0, 0, 0, 0) 4%,
      var(--hale-ic, #7A4A12) 26%,
      var(--hale, #7A4A12) 42%,
      rgba(0, 0, 0, 0) 62%),
    /* 3 — etek: hızla siyaha */
    radial-gradient(circle at var(--ix, 84%) var(--iy, 16%),
      rgba(0, 0, 0, 0) 52%, rgba(4, 16, 14, .92) 78%);
}
.bento .tuval {
  position: absolute; inset: auto 0 0 0; height: 62%;
  width: 100%; opacity: .9; pointer-events: none;
}
.bento .icerik { position: relative; z-index: 1; }

/* Işıma konumu ve hue kart başına. Konumlar da ölçümden: Apollo
   merkezleri köşelere ve alt-ortaya koyuyor, kartın tam ortasına değil —
   ortadaki ışıma metni okunmaz yapıyor. */
.bento.i-gunes  { --ix: 86%; --iy: 14%; --hale: #7A4A12; --hale-ic: #593410;
                  --cekirdek: rgba(255, 232, 186, .95); }
.bento.i-marka  { --ix: 18%; --iy: 82%; --hale: #0D5449; --hale-ic: #0A3F37;
                  --cekirdek: rgba(196, 245, 232, .90); }
.bento.i-deniz  { --ix: 78%; --iy: 84%; --hale: #1B4269; --hale-ic: #14314E;
                  --cekirdek: rgba(198, 226, 250, .88); }
.bento.i-zeytin { --ix: 22%; --iy: 18%; --hale: #3D5A22; --hale-ic: #2C411A;
                  --cekirdek: rgba(224, 244, 190, .88); }

/* ══════════════════════════════════════════════════════════════════════
   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%;
  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 biraz DAHA TOK: soluk yıkamalar kaldırıldı, yerine
   tek ve daha doygun bir taban. Alt taraftaki boş bölge artık zeminle
   aynı tonda ve "yarım kalmış" görünmüyor. */
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(0, 128, 111, .085) 1px, transparent 1.6px);
  background-size: 100% 100%, 20px 20px;
}