/**
 * Tag yazma geri bildirimi (TagDataService) — tüm temalarda okunur tonlar
 */
:root {
  --kb-write-success: 142 71% 38%;
  --kb-write-sent: 32 95% 44%;
  --kb-write-error: 0 72% 51%;
}

/**
 * Dört eşdüzey tema modeli için tamamlayıcı paletler.
 * - light: korubin.css :root
 * - dark (Gece): aşağıdaki html.dark — korubin-theme-final “Twilight” yüzeyleri (canvas #111214, derin #161719, kart #1a1b1e)
 * - marine: korubin-theme-final.html [data-theme="marine"] yüzeyleri (canvas #0a1628, kart #122138, marka #4a72bd)
 * - gruvbox: korubin.css’teki açık Gruvbox (krem zemin) — koyu Gruvbox değil; gece için “Gece” teması
 */
html[data-theme="marine"] {
  --kb-write-success: 152 55% 42%;
  --kb-write-sent: 38 92% 50%;
  --kb-write-error: 8 78% 52%;
  --background: 212 60% 10%;
  --foreground: 215 35% 93%;
  --card: 216 50% 15%;
  --card-foreground: 215 35% 93%;
  --popover: 212 55% 11%;
  --popover-foreground: 215 35% 93%;
  --primary: 219 47% 52%;
  --primary-foreground: 0 0% 100%;
  --secondary: 216 40% 19%;
  --secondary-foreground: 215 30% 92%;
  --muted: 216 45% 12%;
  --muted-foreground: 215 22% 68%;
  --accent: 217 44% 20%;
  --accent-foreground: 215 35% 92%;
  --destructive: 8 65% 51%;
  --destructive-foreground: 0 0% 100%;
  --border: 216 28% 22%;
  --input: 216 45% 14%;
  --ring: 219 47% 52%;
  --scrollbar-thumb: #2a3f5c;
  --scrollbar-hover: #3a5270;
}

html[data-theme="gruvbox"] {
  --kb-write-success: 106 45% 36%;
  --kb-write-sent: 30 90% 38%;
  --kb-write-error: 0 65% 45%;
  --background: 40 26% 95%;
  --foreground: 28 16% 20%;
  --card: 40 26% 98%;
  --card-foreground: 28 16% 20%;
  --popover: 40 26% 98%;
  --popover-foreground: 28 16% 20%;
  --primary: 39 67% 49%;
  --primary-foreground: 0 0% 100%;
  --secondary: 28 13% 88%;
  --secondary-foreground: 28 16% 20%;
  --muted: 28 13% 91%;
  --muted-foreground: 39 14% 35%;
  --accent: 106 34% 41%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 59% 51%;
  --destructive-foreground: 0 0% 100%;
  --border: 28 13% 85%;
  --input: 28 13% 85%;
  --ring: 39 67% 49%;
  --scrollbar-thumb: #e8d5c4;
  --scrollbar-hover: #d8c5b0;
}

/**
 * Gruvbox: semantic renk overrideları (Tailwind default success/danger/warning/info
 * tonları çok parlak ve Gruvbox'un retro paletine uymaz). Burada Tailwind'in
 * üreteceği bg/text/border/hover sınıflarını Gruvbox accent + primary + destructive
 * tonlarına yeniden eşliyoruz.
 *
 * Eşleme:
 *   success → accent (zeytin yeşili 106 34% 41%)
 *   warning → primary (gruvbox turuncusu 39 67% 49%)
 *   danger  → destructive (gruvbox kırmızısı 0 59% 51%)
 *   info    → accent muted varyantı
 */
html[data-theme="gruvbox"] .bg-success-50    { background-color: hsl(106 35% 88%); }
html[data-theme="gruvbox"] .bg-success-100   { background-color: hsl(106 34% 78%); }
html[data-theme="gruvbox"] .bg-success-200   { background-color: hsl(106 34% 68%); }
html[data-theme="gruvbox"] .bg-success-500   { background-color: hsl(106 34% 41%); }
html[data-theme="gruvbox"] .bg-success-600   { background-color: hsl(106 36% 35%); }
html[data-theme="gruvbox"] .bg-success-700   { background-color: hsl(106 38% 28%); }
html[data-theme="gruvbox"] .text-success-500 { color: hsl(106 34% 41%); }
html[data-theme="gruvbox"] .text-success-600 { color: hsl(106 36% 35%); }
html[data-theme="gruvbox"] .text-success-700 { color: hsl(106 38% 28%); }
html[data-theme="gruvbox"] .text-success-800 { color: hsl(106 42% 22%); }
html[data-theme="gruvbox"] .border-success-200 { border-color: hsl(106 34% 68%); }
html[data-theme="gruvbox"] .border-success-300 { border-color: hsl(106 34% 60%); }
html[data-theme="gruvbox"] .hover\:bg-success-50:hover  { background-color: hsl(106 35% 88%); }
html[data-theme="gruvbox"] .hover\:bg-success-100:hover { background-color: hsl(106 34% 78%); }
html[data-theme="gruvbox"] .hover\:bg-success-600:hover { background-color: hsl(106 36% 35%); }

html[data-theme="gruvbox"] .bg-warning-50    { background-color: hsl(39 70% 90%); }
html[data-theme="gruvbox"] .bg-warning-100   { background-color: hsl(39 70% 80%); }
html[data-theme="gruvbox"] .bg-warning-200   { background-color: hsl(39 70% 70%); }
html[data-theme="gruvbox"] .bg-warning-500   { background-color: hsl(39 67% 49%); }
html[data-theme="gruvbox"] .bg-warning-600   { background-color: hsl(39 68% 42%); }
html[data-theme="gruvbox"] .text-warning-500 { color: hsl(39 67% 49%); }
html[data-theme="gruvbox"] .text-warning-600 { color: hsl(39 68% 42%); }
html[data-theme="gruvbox"] .text-warning-700 { color: hsl(39 70% 34%); }
html[data-theme="gruvbox"] .border-warning-200 { border-color: hsl(39 70% 70%); }
html[data-theme="gruvbox"] .hover\:bg-warning-100:hover { background-color: hsl(39 70% 80%); }
html[data-theme="gruvbox"] .hover\:bg-warning-600:hover { background-color: hsl(39 68% 42%); }

html[data-theme="gruvbox"] .bg-danger-50     { background-color: hsl(0 60% 92%); }
html[data-theme="gruvbox"] .bg-danger-100    { background-color: hsl(0 60% 84%); }
html[data-theme="gruvbox"] .bg-danger-200    { background-color: hsl(0 60% 75%); }
html[data-theme="gruvbox"] .bg-danger-500    { background-color: hsl(0 59% 51%); }
html[data-theme="gruvbox"] .bg-danger-600    { background-color: hsl(0 62% 44%); }
html[data-theme="gruvbox"] .text-danger-500  { color: hsl(0 59% 51%); }
html[data-theme="gruvbox"] .text-danger-600  { color: hsl(0 62% 44%); }
html[data-theme="gruvbox"] .text-danger-700  { color: hsl(0 66% 36%); }
html[data-theme="gruvbox"] .border-danger-200 { border-color: hsl(0 60% 75%); }
html[data-theme="gruvbox"] .hover\:bg-danger-100:hover { background-color: hsl(0 60% 84%); }
html[data-theme="gruvbox"] .hover\:bg-danger-600:hover { background-color: hsl(0 62% 44%); }

html[data-theme="gruvbox"] .bg-info-50       { background-color: hsl(196 40% 88%); }
html[data-theme="gruvbox"] .bg-info-100      { background-color: hsl(196 40% 78%); }
html[data-theme="gruvbox"] .bg-info-500      { background-color: hsl(196 50% 40%); }
html[data-theme="gruvbox"] .bg-info-600      { background-color: hsl(196 52% 34%); }
html[data-theme="gruvbox"] .text-info-500    { color: hsl(196 50% 40%); }
html[data-theme="gruvbox"] .text-info-600    { color: hsl(196 52% 34%); }
html[data-theme="gruvbox"] .text-info-700    { color: hsl(196 54% 28%); }
html[data-theme="gruvbox"] .border-info-200  { border-color: hsl(196 40% 70%); }
html[data-theme="gruvbox"] .hover\:bg-info-100:hover { background-color: hsl(196 40% 78%); }
html[data-theme="gruvbox"] .hover\:bg-info-600:hover { background-color: hsl(196 52% 34%); }

/**
 * Tailwind'in DOĞRUDAN yeşil paleti (.bg-green-*, .text-green-*, .hover\:bg-green-*)
 * — birçok sayfada hardcoded olarak kullanılıyor (point menüleri, pointflow nodları,
 * bilgi screenleri). Gruvbox'ta hepsini accent zeytin yeşiline (106° HSL) eşle.
 */
html[data-theme="gruvbox"] .bg-green-50      { background-color: hsl(106 35% 88%) !important; }
html[data-theme="gruvbox"] .bg-green-100     { background-color: hsl(106 34% 78%) !important; }
html[data-theme="gruvbox"] .bg-green-200     { background-color: hsl(106 34% 68%) !important; }
html[data-theme="gruvbox"] .bg-green-300     { background-color: hsl(106 34% 58%) !important; }
html[data-theme="gruvbox"] .bg-green-400     { background-color: hsl(106 34% 50%) !important; }
html[data-theme="gruvbox"] .bg-green-500     { background-color: hsl(106 34% 41%) !important; }
html[data-theme="gruvbox"] .bg-green-600     { background-color: hsl(106 36% 35%) !important; }
html[data-theme="gruvbox"] .bg-green-700     { background-color: hsl(106 38% 28%) !important; }
html[data-theme="gruvbox"] .bg-green-800     { background-color: hsl(106 42% 22%) !important; }
html[data-theme="gruvbox"] .text-green-500   { color: hsl(106 34% 41%) !important; }
html[data-theme="gruvbox"] .text-green-600   { color: hsl(106 36% 35%) !important; }
html[data-theme="gruvbox"] .text-green-700   { color: hsl(106 38% 28%) !important; }
html[data-theme="gruvbox"] .text-green-800   { color: hsl(106 42% 22%) !important; }
html[data-theme="gruvbox"] .border-green-200 { border-color: hsl(106 34% 68%) !important; }
html[data-theme="gruvbox"] .border-green-300 { border-color: hsl(106 34% 60%) !important; }
html[data-theme="gruvbox"] .border-green-400 { border-color: hsl(106 34% 50%) !important; }
html[data-theme="gruvbox"] .border-green-500 { border-color: hsl(106 34% 41%) !important; }
html[data-theme="gruvbox"] .hover\:bg-green-50:hover  { background-color: hsl(106 35% 88%) !important; }
html[data-theme="gruvbox"] .hover\:bg-green-100:hover { background-color: hsl(106 34% 78%) !important; }
html[data-theme="gruvbox"] .hover\:bg-green-200:hover { background-color: hsl(106 34% 68%) !important; }
html[data-theme="gruvbox"] .hover\:bg-green-500:hover { background-color: hsl(106 34% 41%) !important; }
html[data-theme="gruvbox"] .hover\:bg-green-600:hover { background-color: hsl(106 36% 35%) !important; }
html[data-theme="gruvbox"] .hover\:bg-green-700:hover { background-color: hsl(106 38% 28%) !important; }
html[data-theme="gruvbox"] .hover\:text-green-500:hover { color: hsl(106 34% 41%) !important; }
html[data-theme="gruvbox"] .hover\:text-green-600:hover { color: hsl(106 36% 35%) !important; }
html[data-theme="gruvbox"] .hover\:text-green-700:hover { color: hsl(106 38% 28%) !important; }

/**
 * Gruvbox: hover:bg-accent ve varyantları MUTED ile değiştir.
 * Sebep: gruvbox --accent zaten zeytin yeşili (106° HSL). Birçok menü
 * (point-dynamic, alarm dropdown, navbar item'lar) hover'da bg-accent
 * kullanıyor — gruvbox'ta hover yeşil oluyor, kullanıcıyı rahatsız ediyor.
 * Vurgu/badge için bg-accent (hover olmadan) yeşil kalsın, sadece hover
 * gri muted tonuna iniyor.
 */
html[data-theme="gruvbox"] .hover\:bg-accent:hover       { background-color: hsl(var(--muted)) !important; }
html[data-theme="gruvbox"] .hover\:bg-accent\/5:hover    { background-color: hsl(var(--muted) / 0.45) !important; }
html[data-theme="gruvbox"] .hover\:bg-accent\/10:hover   { background-color: hsl(var(--muted) / 0.55) !important; }
html[data-theme="gruvbox"] .hover\:bg-accent\/15:hover   { background-color: hsl(var(--muted) / 0.65) !important; }
html[data-theme="gruvbox"] .hover\:bg-accent\/20:hover   { background-color: hsl(var(--muted) / 0.75) !important; }
html[data-theme="gruvbox"] .hover\:bg-accent\/30:hover   { background-color: hsl(var(--muted) / 0.85) !important; }
html[data-theme="gruvbox"] .hover\:bg-accent\/40:hover   { background-color: hsl(var(--muted) / 0.95) !important; }
html[data-theme="gruvbox"] .hover\:bg-accent\/50:hover   { background-color: hsl(var(--muted)) !important; }

/* hover:text-accent ve dataset'ler: vurgulu yazı yeşil yerine primary turuncusu */
html[data-theme="gruvbox"] .hover\:text-accent:hover            { color: hsl(var(--primary)) !important; }
html[data-theme="gruvbox"] .hover\:text-accent-foreground:hover { color: hsl(var(--primary)) !important; }

/* data-state="active/open" attribute'ları (Radix/HeadlessUI dropdown patterns) */
html[data-theme="gruvbox"] [data-state="open"].hover\:bg-accent,
html[data-theme="gruvbox"] [data-state="open"].bg-accent,
html[data-theme="gruvbox"] [data-state="checked"].bg-accent {
    background-color: hsl(var(--muted)) !important;
}

/* Nokta ekranı menü/aksiyon öğeleri hover durumunda yeşil olmasın */
html[data-theme="gruvbox"] .stn-nav-item:hover,
html[data-theme="gruvbox"] .stn-menu-toggle:hover,
html[data-theme="gruvbox"] .stn-nav-tab:hover,
html[data-theme="gruvbox"] .stn-action:hover,
html[data-theme="gruvbox"] .stn-mtab:hover {
    background-color: hsl(var(--muted)) !important;
    color: hsl(var(--foreground)) !important;
}

/* Tailwind v4 OKLCH CSS variable'ları (yeni Tailwind tema sistemi) — gruvbox'ta override */
html[data-theme="gruvbox"] {
    --color-green-50:  hsl(106 35% 88%);
    --color-green-100: hsl(106 34% 78%);
    --color-green-200: hsl(106 34% 68%);
    --color-green-300: hsl(106 34% 58%);
    --color-green-400: hsl(106 34% 50%);
    --color-green-500: hsl(106 34% 41%);
    --color-green-600: hsl(106 36% 35%);
    --color-green-700: hsl(106 38% 28%);
    --color-green-800: hsl(106 42% 22%);
    --color-green-900: hsl(106 46% 16%);
    /* Emerald (çok kullanılan diğer yeşil paleti) */
    --color-emerald-50:  hsl(106 35% 88%);
    --color-emerald-100: hsl(106 34% 78%);
    --color-emerald-200: hsl(106 34% 68%);
    --color-emerald-300: hsl(106 34% 58%);
    --color-emerald-400: hsl(106 34% 50%);
    --color-emerald-500: hsl(106 34% 41%);
    --color-emerald-600: hsl(106 36% 35%);
    --color-emerald-700: hsl(106 38% 28%);
    --color-emerald-800: hsl(106 42% 22%);
    --color-emerald-900: hsl(106 46% 16%);
}

/**
 * Gece modu — varsayılan slate-korubin html.dark yerine Twilight.
 * korubin.css yüklendikten sonra geldiği için bu blok baskın olur.
 */
html.dark {
  --kb-write-success: 144 61% 46%;
  --kb-write-sent: 38 92% 55%;
  --kb-write-error: 0 78% 58%;
  --background: 220 9% 7%;
  --foreground: 220 11% 96%;
  --card: 228 7% 11%;
  --card-foreground: 220 11% 96%;
  --popover: 225 6% 9%;
  --popover-foreground: 220 11% 96%;
  --primary: 219 43% 52%;
  --primary-foreground: 0 0% 100%;
  --secondary: 230 7% 14%;
  --secondary-foreground: 220 11% 96%;
  --muted: 225 6% 9%;
  --muted-foreground: 220 9% 64%;
  --accent: 230 7% 14%;
  --accent-foreground: 220 11% 96%;
  --destructive: 8 62% 52%;
  --destructive-foreground: 0 0% 100%;
  --border: 220 10% 17%;
  --input: 228 7% 13%;
  --ring: 219 43% 52%;
  --scrollbar-thumb: #3f4249;
  --scrollbar-hover: #565a63;
}

/**
 * Global native <select> ve <option> uyumluluğu
 *
 * Tarayıcılar `color-scheme` ayarına göre native dropdown panelini (option
 * listesi) otomatik koyu/aydınlık çiziyor. Tema-bazlı override yerine basitçe
 * her temada select'in renk şemasını doğru bildiriyoruz; böylece dark mod'da
 * popup beyaz değil, koyu zeminde okunur tonlarda görünüyor.
 */
:root,
html[data-theme="light"] { color-scheme: light; }
html.dark,
html[data-theme="dark"],
html[data-theme="marine"]   { color-scheme: dark; }

select,
input,
textarea { color-scheme: inherit; }

/* Tema renkleriyle native option'ları da hizala (Firefox/Edge fallback) */
html.dark select,
html[data-theme="dark"] select,
html[data-theme="marine"] select {
  background-color: hsl(var(--input));
  color: hsl(var(--foreground));
}
html.dark select option,
html[data-theme="dark"] select option,
html[data-theme="marine"] select option {
  background-color: hsl(var(--popover));
  color: hsl(var(--popover-foreground));
}

/**
 * ═══════════════════════════════════════════════════════════════════
 *  SEMANTIC TOKEN PATCH — info / success / warning / danger
 * ═══════════════════════════════════════════════════════════════════
 *
 * Bu projedeki sayfalar `bg-info/10`, `bg-success/30`, `border-warning/30`
 * gibi Tailwind opacity utility'leri kullanıyor; ama derlenmiş korubin.css
 * içinde --info / --success / --warning / --danger HSL token'ları TANIMLI
 * DEĞİL. Sonuç: bu sınıflar sessizce çalışmıyor — hiç background gelmiyor,
 * sayfa görsel olarak "düz" görünüyor.
 *
 * Burada eksik HSL token'larını her 4 tema için tanımlayıp eksik utility
 * class'larını elle yazıyoruz. Tailwind'i yeniden derlemeden kalıcı çözüm.
 *
 * Mevcut Tailwind compile'inda OLAN: bg-info-500/10 (color-mix tabanlı).
 * Bu shim'in ekledikleri: bg-info/{N}, bg-success/{N}, bg-warning/{N},
 * bg-danger/{N} ve border-* + hover:bg-* varyantları — hepsi --info /
 * --success / --warning / --danger token'ı üzerinden tema-aware.
 */

/* HSL split token'ları — Tailwind'in `var(--token) / opacity` patternine uygun */
:root {
  --info:    217 91% 60%;   /* Tailwind blue-500 */
  --success: 142 71% 45%;   /* Tailwind green-500 */
  --warning: 38 92% 50%;    /* Tailwind amber-500 */
  --danger:  0 84% 60%;     /* Tailwind red-500 */
}
html.dark {
  --info:    217 91% 65%;
  --success: 142 64% 52%;
  --warning: 38 92% 58%;
  --danger:  0 70% 62%;
}
html[data-theme="marine"] {
  --info:    199 75% 60%;
  --success: 152 55% 52%;
  --warning: 38 92% 58%;
  --danger:  8 78% 60%;
}
html[data-theme="gruvbox"] {
  --info:    196 50% 40%;
  --success: 106 34% 41%;
  --warning: 39 67% 49%;
  --danger:  0 59% 51%;
}

/* bg-{semantic}/{opacity} */
.bg-info\/5     { background-color: hsl(var(--info)    / 0.05); }
.bg-info\/10    { background-color: hsl(var(--info)    / 0.10); }
.bg-info\/15    { background-color: hsl(var(--info)    / 0.15); }
.bg-info\/20    { background-color: hsl(var(--info)    / 0.20); }
.bg-info\/30    { background-color: hsl(var(--info)    / 0.30); }
.bg-info\/50    { background-color: hsl(var(--info)    / 0.50); }
.bg-success\/5  { background-color: hsl(var(--success) / 0.05); }
.bg-success\/10 { background-color: hsl(var(--success) / 0.10); }
.bg-success\/15 { background-color: hsl(var(--success) / 0.15); }
.bg-success\/20 { background-color: hsl(var(--success) / 0.20); }
.bg-success\/30 { background-color: hsl(var(--success) / 0.30); }
.bg-success\/50 { background-color: hsl(var(--success) / 0.50); }
.bg-warning\/5  { background-color: hsl(var(--warning) / 0.05); }
.bg-warning\/10 { background-color: hsl(var(--warning) / 0.10); }
.bg-warning\/15 { background-color: hsl(var(--warning) / 0.15); }
.bg-warning\/20 { background-color: hsl(var(--warning) / 0.20); }
.bg-warning\/30 { background-color: hsl(var(--warning) / 0.30); }
.bg-warning\/50 { background-color: hsl(var(--warning) / 0.50); }
.bg-danger\/5   { background-color: hsl(var(--danger)  / 0.05); }
.bg-danger\/10  { background-color: hsl(var(--danger)  / 0.10); }
.bg-danger\/15  { background-color: hsl(var(--danger)  / 0.15); }
.bg-danger\/20  { background-color: hsl(var(--danger)  / 0.20); }
.bg-danger\/30  { background-color: hsl(var(--danger)  / 0.30); }
.bg-danger\/50  { background-color: hsl(var(--danger)  / 0.50); }

/* border-{semantic}/{opacity} */
.border-info\/30    { border-color: hsl(var(--info)    / 0.30); }
.border-info\/50    { border-color: hsl(var(--info)    / 0.50); }
.border-success\/30 { border-color: hsl(var(--success) / 0.30); }
.border-success\/50 { border-color: hsl(var(--success) / 0.50); }
.border-warning\/30 { border-color: hsl(var(--warning) / 0.30); }
.border-warning\/50 { border-color: hsl(var(--warning) / 0.50); }
.border-danger\/30  { border-color: hsl(var(--danger)  / 0.30); }
.border-danger\/50  { border-color: hsl(var(--danger)  / 0.50); }

/* hover:bg-{semantic}/{opacity} */
.hover\:bg-info\/10:hover    { background-color: hsl(var(--info)    / 0.10); }
.hover\:bg-info\/15:hover    { background-color: hsl(var(--info)    / 0.15); }
.hover\:bg-info\/20:hover    { background-color: hsl(var(--info)    / 0.20); }
.hover\:bg-info\/30:hover    { background-color: hsl(var(--info)    / 0.30); }
.hover\:bg-success\/10:hover { background-color: hsl(var(--success) / 0.10); }
.hover\:bg-success\/15:hover { background-color: hsl(var(--success) / 0.15); }
.hover\:bg-success\/20:hover { background-color: hsl(var(--success) / 0.20); }
.hover\:bg-warning\/10:hover { background-color: hsl(var(--warning) / 0.10); }
.hover\:bg-warning\/15:hover { background-color: hsl(var(--warning) / 0.15); }
.hover\:bg-warning\/20:hover { background-color: hsl(var(--warning) / 0.20); }
.hover\:bg-danger\/10:hover  { background-color: hsl(var(--danger)  / 0.10); }
.hover\:bg-danger\/15:hover  { background-color: hsl(var(--danger)  / 0.15); }
.hover\:bg-danger\/20:hover  { background-color: hsl(var(--danger)  / 0.20); }

/**
 * Dark / Marine: bright -50/-100/-200 → tinted token
 *
 * Tailwind'in default -50/-100/-200 shade'leri (eff6ff, dbeafe…) light
 * temalar için pastel; dark/marine zeminde "flashlight" gibi parlar.
 * Bu temalarda aynı renk hissini koruyan ama daha okunaklı tinted-semantic
 * varyanta düşür. Light tema'da overrider yok — Tailwind default kalır.
 */
html.dark .bg-info-50,
html[data-theme="marine"] .bg-info-50    { background-color: hsl(var(--info) / 0.12); }
html.dark .bg-info-100,
html[data-theme="marine"] .bg-info-100   { background-color: hsl(var(--info) / 0.18); }
html.dark .bg-info-200,
html[data-theme="marine"] .bg-info-200   { background-color: hsl(var(--info) / 0.26); }
html.dark .hover\:bg-info-50:hover,
html[data-theme="marine"] .hover\:bg-info-50:hover   { background-color: hsl(var(--info) / 0.14); }
html.dark .hover\:bg-info-100:hover,
html[data-theme="marine"] .hover\:bg-info-100:hover  { background-color: hsl(var(--info) / 0.22); }
html.dark .border-info-200,
html[data-theme="marine"] .border-info-200  { border-color: hsl(var(--info) / 0.35); }
html.dark .border-info-300,
html[data-theme="marine"] .border-info-300  { border-color: hsl(var(--info) / 0.45); }

html.dark .bg-success-50,
html[data-theme="marine"] .bg-success-50    { background-color: hsl(var(--success) / 0.12); }
html.dark .bg-success-100,
html[data-theme="marine"] .bg-success-100   { background-color: hsl(var(--success) / 0.18); }
html.dark .bg-success-200,
html[data-theme="marine"] .bg-success-200   { background-color: hsl(var(--success) / 0.26); }
html.dark .hover\:bg-success-50:hover,
html[data-theme="marine"] .hover\:bg-success-50:hover   { background-color: hsl(var(--success) / 0.14); }
html.dark .hover\:bg-success-100:hover,
html[data-theme="marine"] .hover\:bg-success-100:hover  { background-color: hsl(var(--success) / 0.22); }
html.dark .border-success-200,
html[data-theme="marine"] .border-success-200  { border-color: hsl(var(--success) / 0.35); }
html.dark .border-success-300,
html[data-theme="marine"] .border-success-300  { border-color: hsl(var(--success) / 0.45); }

html.dark .bg-warning-50,
html[data-theme="marine"] .bg-warning-50    { background-color: hsl(var(--warning) / 0.12); }
html.dark .bg-warning-100,
html[data-theme="marine"] .bg-warning-100   { background-color: hsl(var(--warning) / 0.18); }
html.dark .bg-warning-200,
html[data-theme="marine"] .bg-warning-200   { background-color: hsl(var(--warning) / 0.26); }
html.dark .hover\:bg-warning-50:hover,
html[data-theme="marine"] .hover\:bg-warning-50:hover   { background-color: hsl(var(--warning) / 0.14); }
html.dark .hover\:bg-warning-100:hover,
html[data-theme="marine"] .hover\:bg-warning-100:hover  { background-color: hsl(var(--warning) / 0.22); }
html.dark .border-warning-200,
html[data-theme="marine"] .border-warning-200  { border-color: hsl(var(--warning) / 0.35); }
html.dark .border-warning-300,
html[data-theme="marine"] .border-warning-300  { border-color: hsl(var(--warning) / 0.45); }

html.dark .bg-danger-50,
html[data-theme="marine"] .bg-danger-50    { background-color: hsl(var(--danger) / 0.12); }
html.dark .bg-danger-100,
html[data-theme="marine"] .bg-danger-100   { background-color: hsl(var(--danger) / 0.18); }
html.dark .bg-danger-200,
html[data-theme="marine"] .bg-danger-200   { background-color: hsl(var(--danger) / 0.26); }
html.dark .hover\:bg-danger-50:hover,
html[data-theme="marine"] .hover\:bg-danger-50:hover   { background-color: hsl(var(--danger) / 0.14); }
html.dark .hover\:bg-danger-100:hover,
html[data-theme="marine"] .hover\:bg-danger-100:hover  { background-color: hsl(var(--danger) / 0.22); }
html.dark .border-danger-200,
html[data-theme="marine"] .border-danger-200  { border-color: hsl(var(--danger) / 0.35); }
html.dark .border-danger-300,
html[data-theme="marine"] .border-danger-300  { border-color: hsl(var(--danger) / 0.45); }

/**
 * ═══════════════════════════════════════════════════════════════════
 *  MERGEN TEMASI (opsiyonel) — lacivert + marka mavisi (#3E6BC9) +
 *  Mergen altını (#E5A93A) imza aksanı. UI'ı kendi logosuna uydurur.
 *  TAMAMEN EK — mevcut light/dark/marine/gruvbox'a dokunmaz.
 *  GERİ ALMA: bu bloğu sil + index.html `C` dizisi + app.js THEMES/
 *  THEME_ICON/THEME_LABEL'dan 'mergen','mergen-dark' kayıtlarını çıkar.
 * ═══════════════════════════════════════════════════════════════════
 */
/* MERGEN GÜNDÜZ — mergenhub.envest.com.tr sitesinin "kâğıt + mürekkep + pirinç"
 * paleti: zemin #ECEFF0, metin #0A1E27, aksan #B9761A (pirinç), altın #E4A13C. */
html[data-theme="mergen"]{
  --kb-write-success: 161 65% 34%;
  --kb-write-sent: 36 76% 46%;
  --kb-write-error: 6 63% 46%;
  --background: 195 12% 93%;
  --foreground: 199 59% 10%;
  --card: 180 6% 97%;
  --card-foreground: 199 59% 10%;
  --popover: 0 0% 100%;
  --popover-foreground: 199 59% 10%;
  --primary: 35 75% 41%;
  --primary-foreground: 0 0% 100%;
  --secondary: 197 12% 88%;
  --secondary-foreground: 199 45% 14%;
  --muted: 195 12% 95%;
  --muted-foreground: 202 14% 42%;
  --accent: 195 12% 92%;
  --accent-foreground: 199 45% 14%;
  --destructive: 6 63% 46%;
  --destructive-foreground: 0 0% 100%;
  --border: 199 14% 85%;
  --input: 199 14% 85%;
  --ring: 35 75% 41%;
  --scrollbar-thumb: #c6ced2;
  --scrollbar-hover: #aeb9bf;
  --info: 202 24% 40%;
  --success: 161 65% 34%;
  --warning: 36 76% 46%;
  --danger: 6 63% 46%;
  --gold: 36 76% 56%;
  --gold-ink: 35 75% 41%;
}
/* MERGEN GECE — sitenin gece hali: derin mürekkep zemini + pirinç/altın aksan. */
html[data-theme="mergen-dark"]{
  --kb-write-success: 157 45% 55%;
  --kb-write-sent: 38 69% 65%;
  --kb-write-error: 8 70% 65%;
  --background: 205 44% 8%;
  --foreground: 200 30% 92%;
  --card: 203 42% 11%;
  --card-foreground: 200 30% 92%;
  --popover: 203 43% 10%;
  --popover-foreground: 200 30% 92%;
  --primary: 36 76% 56%;
  --primary-foreground: 199 59% 10%;
  --secondary: 202 37% 14%;
  --secondary-foreground: 200 30% 92%;
  --muted: 204 40% 10%;
  --muted-foreground: 202 16% 64%;
  --accent: 202 37% 15%;
  --accent-foreground: 200 30% 92%;
  --destructive: 8 70% 65%;
  --destructive-foreground: 0 0% 100%;
  --border: 200 34% 20%;
  --input: 202 37% 14%;
  --ring: 36 76% 56%;
  --scrollbar-thumb: #21333f;
  --scrollbar-hover: #2d4452;
  --info: 202 30% 66%;
  --success: 157 45% 55%;
  --warning: 38 69% 65%;
  --danger: 8 70% 65%;
  --gold: 38 69% 65%;
  --gold-ink: 36 76% 56%;
}

/* color-scheme (native select/scrollbar) */
html[data-theme="mergen"]      { color-scheme: light; }
html[data-theme="mergen-dark"] { color-scheme: dark; }
html[data-theme="mergen-dark"] select { background-color: hsl(var(--input)); color: hsl(var(--foreground)); }
html[data-theme="mergen-dark"] select option { background-color: hsl(var(--popover)); color: hsl(var(--popover-foreground)); }

/* ── Mergen imza aksanları (yalnız bu iki temada) ── */
/* aktif menü çubuğu: mavi yerine altın "isabet" işareti */
html[data-theme="mergen"]      .kpe-nav-it.on,
html[data-theme="mergen-dark"] .kpe-nav-it.on { box-shadow: inset 2.5px 0 0 hsl(var(--gold)); }
/* veri kolonları hizalı: tabular rakamlar */
html[data-theme="mergen"]      table,
html[data-theme="mergen-dark"] table { font-variant-numeric: tabular-nums; }
/* "CANLI/çevrimiçi" bağlantı göstergesi altın vurgulu (varsa) */
html[data-theme="mergen"]      .kg-conn .online,
html[data-theme="mergen-dark"] .kg-conn .online { color: hsl(var(--gold-ink)); }

/* Yerel fontlar — Mergen Gündüz/Gece temaları (offline sahalar için pakette) */
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/IBMPlexMono-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/IBMPlexMono-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/InterTight-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/InterTight-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/InterTight-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/InterTight-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* KORUBİN DİJİTAL — 7-segment / LCD gösterge yazı yüzü (SCADA yazı & sayısal göstergeler).
   TAMAMEN YEREL: dış istek YOK (CSP-sıkı, çevrimdışı saha kurulumları). woff (9 KB) birincil,
   ttf yedek. font-display:block → yükleme bitene kadar rakamlar sistem fontuyla "yanıp sönmez"
   (7-seg görünümü yarım saniye bile bozulmasın).
   NOT: Koru1000Web'deki özgün aile adı 'Korubin-digital_font'; oradan taşınan/yapıştırılan
   stiller de çalışsın diye o ad da aynı dosyaya takma-ad olarak tanımlıdır.
   Lisans: assets/fonts/KorubinDigital-NOTICE.txt (fontun kendi metadata'sı: Style-7 Digital-7 Mono). */
@font-face{font-family:'Korubin Digital';font-style:normal;font-weight:normal;font-display:block;src:url(/assets/fonts/KorubinDigital.woff) format('woff'),url(/assets/fonts/KorubinDigital.ttf) format('truetype')}
@font-face{font-family:'Korubin-digital_font';font-style:normal;font-weight:normal;font-display:block;src:url(/assets/fonts/KorubinDigital.woff) format('woff'),url(/assets/fonts/KorubinDigital.ttf) format('truetype')}

/* Mergen temaları: site ile aynı gövde yazı yüzü (Inter Tight) + mono değer hücreleri */
html[data-theme="mergen"] body, html[data-theme="mergen-dark"] body { font-family:'Inter Tight','Segoe UI',system-ui,-apple-system,sans-serif; }
html[data-theme="mergen"] [data-val], html[data-theme="mergen-dark"] [data-val],
html[data-theme="mergen"] [data-ts],  html[data-theme="mergen-dark"] [data-ts] { font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace; font-size:12px; }

/* CANLI DEĞER FLAŞI (tüm temalar): değer değişince kısa süre amber yanıp söner — sitedeki gibi */
.kg-vflash { color: hsl(var(--warning)) !important; }

/* ── Servisler sayfası: tema uyumu + daralınca kademeli sadeleşme ── */
.svc-tblwrap .kg-table td { vertical-align: middle; }
.svc-tblwrap .kg-table th:nth-child(5), .svc-tblwrap .kg-table td:nth-child(5) { text-align: center; }
@media (max-width: 1100px) {
  .svc-btxt { display: none; }                 /* butonlar ikona iner */
  .svc-tblwrap .kg-btn { padding: 6px 9px; }
}
@media (max-width: 900px) {
  .svc-metric { display: none; }               /* metrik kolonu gizlenir */
  .svc-tblwrap .kg-table th:nth-child(3) { display: none; }
}
@media (max-width: 700px) {
  .svc-run { display: none; }
  .svc-tblwrap .kg-table th:nth-child(4) { display: none; }
}
/* Uyarı eşiği girişleri tema renklerini kullanır */
#thrCpu, #thrRam, #thrDw, #thrDc {
  background: hsl(var(--input)); color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border));
}