/* WeldingDesk — koyu tema (neumorphic dark) + gecis animasyonu
   Stitch her sayfada farkli neumorphic class isimleri kullaniyor:
     home:     neu-flat / neu-pressed / neu-button           (zemin #E7E5E4)
     about:    neumorphic / neumorphic-inset                 (zemin #f7f9fb)
     articles: neumorphic / neumorphic-pressed / shadow-neumorphic(-pressed)
     library:  neumorphic + beyaz kartlar
   Hepsini tek dark zemine (#24272c) cekiyoruz.
*/

/* Filtre/tab degisiminde icerik kisalip dikey scrollbar kaybolunca
   sayfa birkac piksel saga kayiyordu (nav ortalamasi bozuluyordu).
   Scrollbar alanini sabit tutarak kaymayi onluyoruz. */
html { scrollbar-gutter: stable; overflow-y: scroll; }

/* max-w-container-max Tailwind CDN'de taninmiyor (maxWidth temasi
   spacing'den custom deger almiyor) — sonuc: nav/main/footer icerigi
   tum viewport genisligini kapliyor, logo sola/Subscribe saga yapisiyordu.
   Gercek sinir burada, tum sayfalarda tek noktadan. */
.max-w-container-max { max-width: 1200px !important; }

/* Nav logosu (font-headline-md/text-headline-md) her sayfanin kendi
   inline tailwind.config'inde farkli px degeri tasiyordu: Home 16px,
   digerleri 24px. Standart deger burada, tek noktadan. */
nav a[href="index.html"] { font-size: 24px !important; }

/* Gecis */
html, body { transition: background-color .25s ease, color .25s ease; }
.neu-flat, .neu-pressed, .neu-button,
.neumorphic, .neumorphic-inset, .neumorphic-pressed,
.shadow-neumorphic, .shadow-neumorphic-pressed,
nav, footer {
  transition: background-color .25s ease, box-shadow .25s ease, color .25s ease;
}

/* Dil butonu aktif durum */
[data-lang-btn] { cursor: pointer; }
[data-lang-btn].lang-active { color: #002b46 !important; font-weight: 700; }
html.dark [data-lang-btn].lang-active { color: #9ccbf8 !important; }

/* Tema butonu */
.wd-theme-btn { cursor: pointer; }

/* ================= DARK THEME ================= */
html.dark body { background-color: #24272c !important; color: #dfe3e7; }

/* --- Neumorphic RAISED (disa golge): flat / raised / buton --- */
html.dark .neu-flat,
html.dark .neumorphic,
html.dark .shadow-neumorphic {
  background: #24272c !important;
  box-shadow: 8px 8px 16px #191b1f, -8px -8px 16px #2f333a !important;
  border: 1px solid rgba(255,255,255,0.03);
}
html.dark .neu-button {
  background: #24272c !important;
  box-shadow: 4px 4px 8px #191b1f, -4px -4px 8px #2f333a !important;
  border: 1px solid rgba(255,255,255,0.03);
}
html.dark .neu-button:active {
  box-shadow: inset 4px 4px 8px #191b1f, inset -4px -4px 8px #2f333a !important;
}

/* --- Neumorphic PRESSED/INSET (ice golge) --- */
html.dark .neu-pressed,
html.dark .neumorphic-inset,
html.dark .neumorphic-pressed,
html.dark .shadow-neumorphic-pressed {
  background: #24272c !important;
  box-shadow: inset 8px 8px 16px #191b1f, inset -8px -8px 16px #2f333a !important;
  border: 1px solid transparent;
}

/* --- Tailwind surface zeminleri (beyaz/acik kartlar) --- */
html.dark .bg-white,
html.dark .bg-background,
html.dark .bg-surface,
html.dark .bg-surface-bright,
html.dark .bg-surface-container-lowest,
html.dark .bg-surface-container-low,
html.dark .bg-surface-container,
html.dark .bg-surface-container-high,
html.dark .bg-surface-container-highest,
html.dark .bg-surface-variant { background-color: #2b2f34 !important; }

/* Nav / footer arka plan (inline bg-[#E7E5E4]/80, bg-[#f7f9fb]/80 override) */
html.dark nav { background-color: #24272c !important; border-color: rgba(255,255,255,0.06) !important; }
html.dark footer { border-color: rgba(255,255,255,0.06) !important; }
html.dark [class*="border-white"] { border-color: rgba(255,255,255,0.06) !important; }

/* --- Metin renkleri: koyu zeminde okunur tonlar --- */
html.dark .text-primary,
html.dark .text-primary-container { color: #9ccbf8 !important; }
html.dark .text-on-surface,
html.dark .text-on-background { color: #dfe3e7 !important; }
html.dark .text-on-surface-variant { color: #aab2bb !important; }
html.dark .text-surface-tint { color: #b5d5f5 !important; }
html.dark .text-tertiary,
html.dark .text-steel-dark { color: #c7cdd4 !important; }

/* Input/textarea dark */
html.dark input, html.dark textarea, html.dark select {
  background-color: #1e2126 !important;
  color: #dfe3e7 !important;
  border-color: rgba(255,255,255,0.12) !important;
}
html.dark input::placeholder, html.dark textarea::placeholder { color: #7d858e !important; }

/* Gorseller koyu zeminde hafif karart */
html.dark .neu-pressed img, html.dark .neu-flat img,
html.dark .neumorphic img, html.dark .neumorphic-inset img { filter: brightness(0.92) contrast(1.02); }

/* ---- Baslik standardizasyonu (tum sayfalar ayni olcek) ----
   Sayfa basina uretilen Tailwind config'ler tutarsiz sonuc veriyordu
   (ornek: Home h1 16px, Library h1 48px). Tek kaynak buradan. */
main h1, body > section h1, .hero-copy h1 {
  font-family: 'Hanken Grotesk', system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(30px, 4.5vw, 48px) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
}
main h2 { font-family: 'Hanken Grotesk', system-ui, sans-serif !important; }
main h3 { font-family: 'Hanken Grotesk', system-ui, sans-serif !important; }

/* unify-nav fallback */
.shadow-neumorphic { box-shadow: 4px 4px 8px rgba(0,0,0,0.06), -4px -4px 8px rgba(255,255,255,0.7); }
.shadow-neumorphic-pressed { box-shadow: inset 4px 4px 8px rgba(0,0,0,0.08), inset -4px -4px 8px rgba(255,255,255,0.7); }
html.dark .shadow-neumorphic { box-shadow: 4px 4px 8px #191b1f, -4px -4px 8px #2f333a; }
html.dark .shadow-neumorphic-pressed { box-shadow: inset 4px 4px 8px #191b1f, inset -4px -4px 8px #2f333a; }
html.dark .bg-surface-container-low { background-color: #2b2f34 !important; }