/* ══════════════════════════════════════════════════════════════════════════
   İSTASYON — ARAÇ SAYFALARI KABUĞU
   ──────────────────────────────────────────────────────────────────────────
   Bu dosya style.css'ten SONRA yüklenir ve 13 aracı vitrinle aynı tasarım
   sistemine taşır.

   NEDEN YENİDEN YAZMAK DEĞİL DE YENİDEN TEMALAMAK
   Araç sayfaları çalışan mantık içeriyor (EXIF çözümleyici, WebSerial
   akışı, WebHID protokolü, dönüştürücü kuyruğu). Denetimde hepsinin ana
   iş akışı GERÇEKTEN ÇALIŞTIĞI doğrulandı. On sekiz HTML dosyasını elle
   yeniden yazmak çalışan davranışı kırma riskini bedava üretirdi.

   style.css tokenları tutarlı kullandığı için (--ink, --canvas, --accent…)
   tokenları yeniden tanımlamak sayfaların büyük kısmını tek hamlede
   taşıyor. Kalan kısım aşağıda tek tek ele alınıyor: kabuk, denetimler,
   alanlar, durum yüzeyleri.

   Ölçülen kontrastlar vitrinle aynı (script ile doğrulandı):
     ink 15.2–18.4 · muted 10.3–12.5 · faint 5.9–7.1
     mavi 5.9–7.1 · nane 10.4–12.6 · kehribar 9.3–11.3 · kırmızı 6.6–8.0
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: dark;

  /* ── Uzay ─────────────────────────────────────────────────────────── */
  --canvas:        #050505;
  --canvas-soft:   #0a0a0d;
  --surface:       #101016;
  --paper-lift:    #16161d;

  /* ── Mürekkep ─────────────────────────────────────────────────────── */
  --ink:           #f5f5f5;
  --text-muted:    #c8c8c8;
  --text-faint:    #969696;

  /* ── Sinyaller ────────────────────────────────────────────────────── */
  --accent:        #ffffff;
  --accent-weak:   #d6d6d6;
  --accent-bg:     rgba(255, 255, 255, 0.12);
  --tint-blue:     #ffffff;
  --tint-cyan:     #ffffff;
  --tint-mint:     #d6d6d6;
  --tint-lavender: #ffffff;
  --tint-coral:    #a8a8a8;

  /* ── Kurallar: koyu zeminde AÇIK saç teli (tersine çevrildi) ──────── */
  --hairline:       rgba(255, 255, 255, 0.2);
  --hairline-soft:  rgba(255, 255, 255, 0.11);
  --hairline-faint: rgba(255, 255, 255, 0.06);

  --status-success: #d6d6d6;
  --status-warning: #a8a8a8;
  --status-danger:  #ffffff;

  --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-pill: 8px;
  --ease-instr: cubic-bezier(0.22, 1, 0.36, 1);

  --glass: rgba(24, 24, 24, 0.55);
  --glass-edge: rgba(255, 255, 255, 0.08);
  --glass-edge-top: rgba(255, 255, 255, 0.15);
}

/* ── Mekân ────────────────────────────────────────────────────────────
   Vitrinle AYNI çevresel ışık. Araç sayfasına geçen kullanıcı başka bir
   ürüne düştüğünü hissetmemeli. */
/* Zemin DUZ — vitrinle ayni karar. Radyal isiklar kaldirildi;
   kure yonunde bosluk dokusuz kalir. */
body {
  background: var(--canvas) !important;
  color: var(--ink) !important;
  background-image: none !important;
}

::selection { background: rgba(255, 255, 255, 0.3); color: var(--ink); }

::-webkit-scrollbar-track { background: var(--canvas); }
::-webkit-scrollbar-thumb {
  background: #232329;
  border: 3px solid var(--canvas);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: #303038; }

:focus-visible {
  outline: 2px solid var(--tint-cyan) !important;
  outline-offset: 2px !important;
}

/* Sayfaların kendi dekoratif ışıklarını söndür — mekânın ışığı zaten
   gövdeden geliyor; ikisi üst üste binince zemin lekeleniyordu. */
.ambient-glow, .orb { display: none !important; }

/* ── UYGULAMA ÇUBUĞU ──────────────────────────────────────────────────
   Vitrindeki cam rayın aynısı. Araç bir "sayfa" değil, açılmış bir
   uygulama: üstte sabit bir çubuk, solda çıkış, sağda dil. */
.main-header {
  position: sticky !important;
  top: 0;
  z-index: 100;
  display: flex !important;
  align-items: center !important;
  gap: 1rem;
  min-height: 60px;
  margin-bottom: 2rem !important;
  padding: 0.6rem 0 !important;
  background: rgba(5, 5, 5, 0.82);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid var(--hairline-soft) !important;
}

/* Marka kilidi — vitrindekiyle AYNI: "RedRiverLab", ek yok. */
.app-mark {
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
  color: var(--ink) !important;
  margin-right: 0.9rem;
  white-space: nowrap;
  text-decoration: none;
}
.app-mark:hover { color: var(--accent) !important; }
@media (max-width: 560px) { .app-mark { font-size: 0.9375rem; margin-right: 0.5rem; } }

/* Geri bağlantısı: ikon-metin, gerçek bir düğme gibi hedef alanı olan. */
.nav-back {
  display: inline-flex !important;
  align-items: center;
  gap: 0.5rem;
  min-height: 38px;
  padding: 0 0.85rem 0 0.7rem !important;
  border-radius: var(--r-sm);
  border: 1px solid var(--hairline-soft);
  background: rgba(255, 255, 255, 0.025) !important;
  color: var(--text-muted) !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: nowrap;
  transition: color .16s var(--ease-instr), border-color .16s var(--ease-instr);
}
.nav-back::before {
  content: "←";
  font-size: 0.95em;
  opacity: 0.8;
}
.nav-back:hover {
  color: var(--ink) !important;
  border-color: var(--accent) !important;
  background: var(--accent-bg) !important;
}

.lang-switcher {
  margin-left: auto !important;
  display: flex;
  gap: 0.1rem;
}

.lang-btn {
  min-width: 34px;
  min-height: 32px;
  padding: 0 0.4rem !important;
  border: 0 !important;
  border-radius: var(--r-xs) !important;
  background: transparent !important;
  color: var(--text-faint) !important;
  font-family: var(--font-mono) !important;
  font-size: 0.6875rem !important;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: color .16s var(--ease-instr);
}
.lang-btn:hover { color: var(--text-muted) !important; }
.lang-btn.active { color: var(--accent) !important; font-weight: 600 !important; }

/* ── BAŞLIK ALANI ────────────────────────────────────────────────────
   Her araç aynı yerde aynı şeyi söyler: ne olduğu ve ne işe yaradığı. */
.main-header + main h1,
.meta-header h1, .dl-page h1, h1 {
  letter-spacing: -0.028em;
  font-weight: 600;
  color: var(--ink);
}

/* ── YÜZEYLER ─────────────────────────────────────────────────────────
   Kutu değil PANEL: üst kenarda ışık, altta gölge. */
.module-box, .legal-box, .result-card, .card,
.glass-panel, .panel, .info-box {
  background: var(--glass) !important;
  backdrop-filter: blur(18px) saturate(1.35);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  border: 1px solid var(--glass-edge) !important;
  border-top-color: var(--glass-edge-top) !important;
  border-radius: var(--r-md) !important;
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.045) inset,
    0 18px 44px -22px rgba(0, 0, 0, 0.85) !important;
  color: var(--text-muted);
}

@supports not (backdrop-filter: blur(1px)) {
  .module-box, .legal-box, .result-card, .card,
  .glass-panel, .panel, .info-box {
    background: #1a1a1a !important;
  }
}

/* ── BIRAKMA ALANI ────────────────────────────────────────────────────
   Aracın birincil eylemi. En büyük, en net yüzey. */
.dropzone, .dropZone, .drop-zone, .upload-area {
  background: rgba(0, 0, 0, 0.28) !important;
  border: 1.5px dashed var(--hairline) !important;
  border-radius: var(--r-md) !important;
  color: var(--text-muted) !important;
  transition: border-color .2s var(--ease-instr), background-color .2s var(--ease-instr);
}
.dropzone:hover, .dropZone:hover, .drop-zone:hover, .upload-area:hover,
.dropzone.dragover, .dropZone.dragover, .drop-zone.dragover {
  border-color: var(--accent) !important;
  background: var(--accent-bg) !important;
}
.dropzone h3, .dropZone h3, .drop-zone h3 { color: var(--ink) !important; }
.dropzone p, .dropZone p, .drop-zone p { color: var(--text-faint) !important; }
.dropzone i, .dropZone i, .drop-zone i { color: var(--accent) !important; }

/* ── DENETİMLER ───────────────────────────────────────────────────────
   Vitrinle aynı üç kademe. Birincil eylem dolu ve tek. */
.btn, button.btn, .btn-fetch, .convert-btn, .ela-btn, .sanitizer-btn,
#btnScan, .wiz-btn, .format-btn, .btn-reset, .btn-action, .btn-cancel {
  border-radius: var(--r-sm) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  transition:
    background-color .16s var(--ease-instr),
    border-color .16s var(--ease-instr),
    color .16s var(--ease-instr),
    transform .16s var(--ease-instr) !important;
}
.btn:active, .btn-fetch:active, .convert-btn:active,
#btnScan:active, .wiz-btn:active, .btn-action:active { transform: translateY(1px); }

/* Birincil */
.btn-fetch, .convert-btn, #btnScan, .wiz-btn.primary,
.btn-action:not(.secondary), .btn.primary, .btn-primary {
  background: var(--accent) !important;
  border: 1px solid var(--accent) !important;
  color: #050505 !important;
  font-weight: 600 !important;
}
.btn-fetch:hover, .convert-btn:hover, #btnScan:hover, .wiz-btn.primary:hover,
.btn-action:not(.secondary):hover, .btn.primary:hover, .btn-primary:hover {
  background: #ffffff !important;
  border-color: #ffffff !important;
}

/* İkincil / anahatlı */
.btn, .ela-btn, .sanitizer-btn, .btn-reset, .format-btn,
.wiz-btn:not(.primary), .btn-secondary, .btn-outline-info {
  background: rgba(255, 255, 255, 0.025) !important;
  border: 1px solid var(--hairline) !important;
  color: var(--ink) !important;
}
.btn:hover, .ela-btn:hover, .sanitizer-btn:hover, .btn-reset:hover,
.format-btn:hover, .wiz-btn:not(.primary):hover, .btn-secondary:hover {
  border-color: var(--accent) !important;
  background: var(--accent-bg) !important;
}

/* İptal / yıkıcı — kırmızı YALNIZCA burada */
.btn-cancel, .btn-danger {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  color: var(--status-danger) !important;
}
.btn-cancel:hover, .btn-danger:hover {
  background: rgba(255, 255, 255, 0.18) !important;
}

.btn:disabled, button:disabled, .btn[disabled] {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* Seçili biçim/sekme */
.format-btn.active, .fmt-option.active, .tab-btn.active {
  border-color: var(--accent) !important;
  background: var(--accent-bg) !important;
  color: var(--ink) !important;
}

/* ── ALANLAR ──────────────────────────────────────────────────────────
   Gömülü görünürler: düğmeler yükselir, alanlar çöker. */
input[type="text"], input[type="url"], input[type="password"],
input[type="search"], input[type="number"], input[type="email"],
textarea, select, .url-input, .form-control {
  background: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid var(--hairline-soft) !important;
  border-radius: var(--r-sm) !important;
  color: var(--ink) !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5) inset !important;
  transition: border-color .16s var(--ease-instr), box-shadow .16s var(--ease-instr);
}
input::placeholder, textarea::placeholder { color: var(--text-faint) !important; }
input:focus, textarea:focus, select:focus, .url-input:focus {
  outline: none !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-bg) !important;
}
input[aria-invalid="true"] {
  border-color: var(--status-danger) !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.14) !important;
}

select option { background: var(--surface); color: var(--ink); }

input[type="range"] { accent-color: var(--accent); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }

/* ── DURUM YÜZEYLERİ ──────────────────────────────────────────────────
   Yükleniyor / sonuç / hata — üçü de tasarlanmış, üçü de aynı dilde. */
.log-line, .terminal, .term, .console-out, .log-box, pre, code {
  background: rgba(0, 0, 0, 0.42) !important;
  border-color: var(--hairline-faint) !important;
  color: var(--text-muted) !important;
  border-radius: var(--r-sm);
}
.log-system { color: var(--tint-cyan) !important; }
.log-success, .success { color: var(--status-success) !important; }
.log-error, .error { color: var(--status-danger) !important; }
.log-warn, .warning { color: var(--status-warning) !important; }

/* İlerleme — belirsiz süre için sürekli kayma, atlama yok */
progress, .progress, .progress-bar-outer {
  background: rgba(255, 255, 255, 0.08) !important;
  border-radius: 99px !important;
  overflow: hidden;
}
.progress-bar, .progress-bar-inner, progress::-webkit-progress-value {
  background: var(--accent) !important;
  border-radius: 99px !important;
}
progress::-webkit-progress-bar { background: rgba(255, 255, 255, 0.08); }

/* Uyarı kutusu: kehribar yalnızca gerçek uyarı için */
.legal-box, .warning-box, .alert {
  border-left: 2px solid var(--status-warning) !important;
}
.legal-box strong, .warning-box strong { color: var(--status-warning) !important; }

/* Metin renkleri */
.text-muted, .hero-sub, .fmt-desc, small { color: var(--text-faint) !important; }
.text-white { color: var(--ink) !important; }
p, li, td, dd, label, span { color: inherit; }
a { color: var(--accent); }
a:hover { color: #ffffff; }

/* Tablolar */
table { border-color: var(--hairline-soft) !important; }
th { color: var(--text-muted) !important; border-color: var(--hairline-soft) !important; }
td { border-color: var(--hairline-faint) !important; }
tr:hover td { background: rgba(255, 255, 255, 0.03); }

/* Harita (Leaflet) koyu zeminde beyaz çerçeve gösteriyordu */
.leaflet-container {
  background: var(--surface) !important;
  border-radius: var(--r-sm);
}
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: var(--surface) !important;
  color: var(--ink) !important;
}

/* ── DOKUNMA HEDEFLERİ ────────────────────────────────────────────────
   Denetimde dil düğmeleri 24px idi — parmakla ıskalanıyordu. */
@media (max-width: 768px) {
  .btn, button, .lang-btn, .nav-back, .format-btn, .tab-btn {
    min-height: 44px;
  }
  .main-header { flex-wrap: wrap; }
}

/* ── HAREKET AZALTMA ─────────────────────────────────────────────────
   Durum bildiren hareket (ilerleme) korunur; dekoratif olan durur. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .progress-bar, .progress-bar-inner {
    animation-duration: 2.4s !important;
    animation-iteration-count: infinite !important;
  }
}

/* ── YASAL / UYARI BAŞLIKLARI ──────────────────────────────────────────
   Araç sayfaları yasal kutu başlıklarını kendi CSS'lerinde büyük harfe
   çeviriyordu (text-transform: uppercase). İki sorun: (1) sistem
   genelinde büyük-harf gürültüsü kaldırıldı, mono etiket dili terk
   edildi; (2) Türkçe'de uppercase "i"yi noktalı "İ"ye çevirip
   "YASAL KULLANİM" gibi bozuk sonuç üretiyordu. Tek yerden düzeltilir. */
.legal-box h5, .legal-box h5 span,
.disclaimer-title, .warn-title, .warning-box h4, .warning-box h5,
[class*="disc"] h4, [class*="disc"] h5,
[class*="legal"] h4, [class*="legal"] h5 {
  text-transform: none !important;
  letter-spacing: normal !important;
  font-family: var(--font-text) !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
}
/* Yasal gövde metni: sakin, okunur, mono değil */
.legal-box p, [class*="legal"] p, [class*="disc"] p {
  font-family: var(--font-text) !important;
  color: var(--text-muted) !important;
}
.legal-box strong, [class*="legal"] strong, [class*="disc"] strong {
  color: var(--ink) !important;
  font-weight: 600 !important;
}

/* ── STATİK İSTASYON NAVİGASYONU (about.html) ─────────────────────────
   about.html statik bir sayfa; React nav bileşenini kullanamıyor. Bu,
   vitrindeki .nav'ın birebir görsel/işlevsel eşi: aynı marka kilidi,
   aynı Araçlar/Yaklaşım/Haberler bağlantıları, aynı dil dizisi. Böylece
   Hakkında sayfası da tek üründe geziniyormuş gibi hissettiriyor. */
.app-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 64px;
  display: flex;
  align-items: center;
  background: rgba(5, 5, 5, 0.72);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid var(--hairline-soft);
}
.app-nav-inner {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: clamp(16px, 3vw, 48px);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.app-nav .app-mark { margin-right: auto; }
.app-nav-links { display: none; align-items: center; gap: 0.35rem; }
@media (min-width: 720px) { .app-nav-links { display: flex; } }
.app-nav-links a {
  position: relative;
  padding: 0.45rem 0.8rem;
  border-radius: var(--r-sm);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-muted) !important;
  text-decoration: none;
  transition: color .16s var(--ease-instr), background-color .16s var(--ease-instr);
}
.app-nav-links a:hover { color: var(--ink) !important; background: rgba(255,255,255,0.05); }
.app-nav-links a[aria-current="page"] { color: var(--ink) !important; }
.app-nav-links a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0.8rem; right: 0.8rem; bottom: 0.15rem;
  height: 1.5px; border-radius: 99px;
  background: var(--accent);
}
.app-nav .lang-switcher { margin-left: 0 !important; }

/* ══════════════════════════════════════════════════════════════════════════
   YAPISAL KATMAN — paylaşılan uygulama kabuğu
   ──────────────────────────────────────────────────────────────────────────
   Bu bölüme kadar yapılanlar RENK katmanıydı (token yeniden tanımı).
   Sayfaların YAPISI hâlâ eskiydi ve denetimde ölçüldü:
     ── başlık ölçüsü üç farklı: 28.8px / 39.68px / hiç
     ── ham tarayıcı dosya girdisi (flasher)
     ── büyük harf etiketler (Baud Rate, Flash Adresi…)
     ── format kartlarında emoji + mono metin
     ── boşken 280px yer kaplayan günlük kutuları
   Bu katman bunları tek bir uygulama diline oturtur. Her aracın kendi
   iş akışı korunur — ortaklık YAPI ve ÖLÇÜDEN gelir, düzeni aynılaştırmaktan
   değil.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. UYGULAMA BAŞLIĞI: tek ölçü ────────────────────────────────────── */
main h1, .meta-header h1, .dl-page h1, .hero-card h1, .cv-header h1,
main > .container > h2:first-of-type, #xbox-diag-title {
  font-size: clamp(1.65rem, 2.6vw, 2.05rem) !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.022em !important;
  color: var(--ink) !important;
  margin-bottom: 0.45rem !important;
}
/* Başlık altı açıklama — her araçta aynı ton ve ölçü */
main h1 + p, .hero-sub, .meta-header p, .dl-page > p:first-of-type {
  font-size: 0.9375rem !important;
  line-height: 1.6 !important;
  color: var(--text-muted) !important;
  font-family: var(--font-text) !important;
  max-width: 60ch;
}

/* ── 2. ALAN ETİKETLERİ: sans, normal büyüklük ────────────────────────── */
label, .form-label, .field-label {
  text-transform: none !important;
  letter-spacing: normal !important;
  font-family: var(--font-text) !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  color: var(--text-muted) !important;
}

/* ── 3. DOSYA GİRDİSİ: ham tarayıcı denetimi değil, sistem düğmesi ────── */
input[type="file"] {
  font-family: var(--font-text) !important;
  font-size: 0.875rem !important;
  color: var(--text-faint) !important;
  padding: 0.55rem 0.7rem !important;
}
input[type="file"]::file-selector-button {
  margin-right: 0.85rem;
  padding: 0.5rem 0.9rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .16s var(--ease-instr), border-color .16s var(--ease-instr);
}
input[type="file"]::file-selector-button:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: var(--hairline);
}
input[type="file"]:disabled::file-selector-button { opacity: 0.45; cursor: not-allowed; }

/* ── 4. SEÇENEK KARTLARI: bölümlü denetim, mono değil ─────────────────── */
.fmt-option, .format-btn, .quality-option {
  border-radius: var(--r-sm) !important;
  padding: 0.7rem 0.85rem !important;
  text-align: left !important;
  transition: border-color .16s var(--ease-instr), background-color .16s var(--ease-instr) !important;
}
.fmt-name, .fmt-option .fmt-name {
  font-family: var(--font-text) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  letter-spacing: -0.005em !important;
  margin-bottom: 0.15rem !important;
}
.fmt-desc, .fmt-option .fmt-desc {
  font-family: var(--font-text) !important;
  font-size: 0.8125rem !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  color: var(--text-faint) !important;
  letter-spacing: normal !important;
}
.fmt-option.active, .format-btn.active {
  border-color: var(--accent) !important;
  background: var(--accent-bg) !important;
}
.fmt-option.active .fmt-name { color: var(--ink) !important; }

/* ── 5. GÜNLÜK / ÇIKTI ALANI ──────────────────────────────────────────
   Boşken 280px yükseklik ölü alan üretiyordu. İçerik geldikçe büyür,
   boşken yalnızca boş-durum satırı kadar yer kaplar. */
.term-body, #terminal, .log-box, .console-out {
  height: auto !important;
  min-height: 84px !important;
  max-height: 340px !important;
  font-family: var(--font-mono) !important;   /* çıktı GERÇEK teknik içerik */
  font-size: 0.8125rem !important;
  line-height: 1.65 !important;
}
/* Günlük BAŞLIĞI bir etikettir — sans. Yalnızca içerik mono kalır. */
.term-title, .term-header span, .term-header .term-title {
  font-family: var(--font-text) !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  color: var(--text-muted) !important;
}
/* Boş-durum satırı da okunur bir cümledir, makine çıktısı değil */
#terminal .log-line[data-i18n="dl_log_idle"] {
  font-family: var(--font-text) !important;
  color: var(--text-faint) !important;
}
/* Pencere noktaları: dekoratif trafik ışığı yerine sessiz işaret */
.term-dot { width: 7px !important; height: 7px !important; }
.term-dot.r, .term-dot.y, .term-dot.g,
.dot-red, .dot-yellow, .dot-green { background: var(--hairline) !important; }

/* ── 6. YÜKLENİYOR / DURUM METİNLERİ: sans ──────────────────────────────
   Bunlar kullanıcıya söylenen CÜMLELERDİR, makine çıktısı değil.
   Gerçek çıktı (terminal gövdesi) mono kalır — ayrım bilinçli. */
.loading-text, .status-text, .progress-label, .loading-subtext,
[class*="loading"] h3, [class*="loading"] p, [class*="status"] h4 {
  font-family: var(--font-text) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* ── 7. BÖLÜM RİTMİ: kartlar arası tutarlı boşluk ─────────────────────── */
.hero-card, .module-box, .term-card, .legal-box, .input-card,
.meta-container, .result-card {
  margin-bottom: 1.25rem !important;
}
.legal-box { margin-bottom: 0 !important; }

/* ── 8. MOBİL: dokunma hedefi ve taşma ────────────────────────────────── */
@media (max-width: 560px) {
  .fmt-option, .format-btn { min-height: 52px; }
  input[type="file"]::file-selector-button { padding: 0.6rem 0.8rem; }
  .term-body, #terminal { max-height: 240px !important; }
}

/* ── 9. DÜĞME METNİ: büyük harf değil ──────────────────────────────────
   Araç sayfaları düğmeleri text-transform:uppercase ile büyütüyordu
   (BAĞLAN / FLASHLA / İNDİR / DÖNÜŞTÜR). Sistem düğme dili normal
   büyüklüktedir; ayrıca Türkçe'de büyük harf "i"yi bozar. Dil kodları
   (EN/TR/DE/ES) istisna — onlar zaten kısaltma. */
button:not(.lang-btn), .btn, .btn-action, .btn-fetch, .convert-btn,
.wiz-btn, .ela-btn, .sanitizer-btn, .btn-reset, .btn-cancel,
input[type="submit"] {
  text-transform: none !important;
  letter-spacing: normal !important;
  font-family: var(--font-text) !important;
}

/* ── 10. SEÇENEK KARTI DÜZENİ ──────────────────────────────────────────
   Ad ve açıklama blok olarak alt alta durmalı. Bazı araçlarda kart
   içeriği yan yana akıp "Max Quality4K/1080p" gibi bitişik okunuyordu. */
.fmt-name, .fmt-desc { display: block !important; width: 100%; }
.fmt-option { display: block !important; }
.fmt-option label, .fmt-option > div { display: block; }

/* ── 11. YASAL KUTU: metin kenara yapışmasın ──────────────────────────
   Sol vurgu çizgisi eklenen kutularda iç pay çizginin altında kalıyor
   ve metin kenardan taşıyor gibi görünüyordu. */
.legal-box, [class*="legal"], [class*="disc"] {
  padding: 1.1rem 1.25rem !important;
  border-radius: var(--r-md) !important;
}
.legal-box h5, [class*="legal"] h5 { margin-bottom: 0.5rem !important; }

/* ── 12. DÜĞME İÇİ İKON HİZASI ────────────────────────────────────────
   Çeviri değerleri <i> ikonu + metin taşıyor; ikon ile metin arası
   boşluk yoktu ("İNDİR" bitişik okunuyordu). */
button i, .btn i, .btn-fetch i, .btn-action i { margin-right: 0.45rem; }
button i:only-child, .btn i:only-child { margin-right: 0; }

/* ── DİL SEÇİCİ: vitrinle AYNI görünüm ────────────────────────────────
   Ölçülen fark: vitrin .nav-lang (sans, 12px/600, küçük harf, <a>);
   lab .lang-btn (mono, 11px/400, BÜYÜK HARF, <button>). İki ayrı dil
   gibi okunuyordu. Görünüm tek biçime çekiliyor.

   about.html'de ayrıca düğmeler İŞLEVSİZDİ (sayfada data-i18n yok):
   gerçek bağlantılara çevrildi — .app-langs. */
.app-langs { display: flex; gap: 0.1rem; margin-left: auto; }
/* Ölçülen vitrin değerleri: pasif 400 / rgb(130, 130, 130), aktif 600 /
   aksan, 12px, 0.02em, 28px yükseklik. Yalnızca AKTİF dil kalınlaşır —
   hepsini kalın yapmak seçili olanı görünmez kılıyordu. */
.app-langs a,
.lang-switcher .lang-btn {
  font-family: var(--font-text) !important;
  font-size: 0.75rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  text-transform: lowercase !important;
  color: rgb(130, 130, 130) !important;
  padding: 0 0.4rem !important;
  min-width: 22px;
  /* başka bir kuralın min-height:32px'i height'ı eziyordu — ikisi birlikte */
  height: 28px !important;
  min-height: 28px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0 !important;
  background: transparent !important;
  border-radius: var(--r-xs);
  text-decoration: none !important;
  cursor: pointer;
  transition: color .16s var(--ease-instr);
}
.app-langs a:hover,
.lang-switcher .lang-btn:hover { color: var(--text-muted) !important; }
.app-langs a[aria-current],
.lang-switcher .lang-btn.active {
  color: var(--accent) !important;
  font-weight: 600 !important;
}

/* dokunmatikte hedef alanı büyür (style.css'teki pointer:coarse kuralıyla uyumlu) */
@media (pointer: coarse) {
  .app-langs a, .lang-switcher .lang-btn {
    height: 36px !important; min-height: 36px !important;
  }
}

/* ── DURUM AYRIMI TEK RENKLİ TEMADA ───────────────────────────────────
   Palet beyaza indiği için hue artık ayırt edemiyor. Ayrım parlaklık
   ve ağırlıkla kuruluyor: hata en parlak + en kalın, uyarı orta,
   başarı sakin. Metin etiketleri zaten yerinde — bilgi hiçbir zaman
   yalnız görsel sinyale bağlı değil (WCAG 1.4.1). */
.log-error, .error, .state[data-kind="error"] strong { font-weight: 600 !important; }
.log-warn, .warning, .state[data-kind="warn"] strong { font-weight: 500 !important; }
.log-success, .success { font-weight: 500 !important; }