/* =====================================================================
   MERT METAL — KARANLIK MOD (html.dark)
   Site geneli koyu tema katmani. app.css + animations.css'ten SONRA yuklenir.
   Yaklasim: sablonlara dokunmadan, kullanilan Tailwind renk siniflarini
   html.dark altinda yeniden esler. Yazilar her zaman okunabilir tutulur.
   ===================================================================== */

:root {
  --mm-d-bg:       #0b1220; /* sayfa zemini (koyu lacivert) */
  --mm-d-surface:  #151d2c; /* kart / panel yuzeyi */
  --mm-d-surface2: #0f1828; /* hafif farkli bolum zemini */
  --mm-d-elev:     #1b2435; /* yukseltilmis yuzey */
  --mm-d-green:    var(--mm-b300, #b3cb78); /* koyu zeminde okunur acik yesil (marka) */
}

/* ---- Temel zemin + metin ---- */
html.dark body { background-color: var(--mm-d-bg) !important; color: #dbe2ec; }

/* ---- Yuzeyler (solid; /opacity'li olanlara DOKUNMAZ) ---- */
html.dark .bg-white    { background-color: var(--mm-d-surface) !important; }
html.dark .bg-slate-50 { background-color: var(--mm-d-surface2) !important; }
html.dark .bg-slate-100{ background-color: var(--mm-d-elev) !important; }
html.dark .bg-slate-200{ background-color: #243044 !important; }
html.dark .bg-slate-300{ background-color: #2d3a50 !important; }

/* ---- Metin renkleri ---- */
html.dark .text-slate-900 { color: #e8edf5 !important; }
html.dark .text-slate-800 { color: #dbe2ec !important; }
html.dark .text-slate-700 { color: #c4cdda !important; }
html.dark .text-slate-600 { color: #9fabbb !important; }
html.dark .text-slate-500 { color: #8b98a9 !important; }
html.dark .text-slate-400 { color: #74808f !important; }

/* Marka (koyu yesil) metinler -> koyu zeminde acik yesile cevrilir */
html.dark .text-brand-900,
html.dark .text-brand-800,
html.dark .text-brand-700,
html.dark .text-brand-600 { color: var(--mm-d-green) !important; }

/* Marka acik-yesil zeminler -> koyu yesil tint */
html.dark .bg-brand-50  { background-color: rgb(var(--mm-b500-rgb, 118 140 58)/.16) !important; }
html.dark .bg-brand-100 { background-color: rgb(var(--mm-b500-rgb, 118 140 58)/.24) !important; }

/* ---- Kenarliklar ---- */
html.dark .border-slate-100 { border-color: rgba(255,255,255,.07) !important; }
html.dark .border-slate-200 { border-color: rgba(255,255,255,.10) !important; }
html.dark .border-slate-300 { border-color: rgba(255,255,255,.16) !important; }
html.dark .divide-slate-100 > * + * { border-color: rgba(255,255,255,.07) !important; }

/* ---- Bilesenler (input.css @layer components) ---- */
html.dark .card {
  background-color: var(--mm-d-surface) !important;
  border-color: rgba(255,255,255,.08) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.45);
}
html.dark .placeholder-img {
  background-color: var(--mm-d-elev) !important;
  color: #9fabbb !important;
  border-color: rgba(255,255,255,.08) !important;
}
html.dark .btn-outline { border-color: var(--mm-b600, #5a6e2c) !important; color: var(--mm-d-green) !important; }
html.dark .btn-outline:hover { background-color: rgb(var(--mm-b500-rgb, 118 140 58)/.16) !important; }

/* ---- Hover yuzeyleri ---- */
html.dark .hover\:bg-slate-50:hover  { background-color: rgba(255,255,255,.05) !important; }
html.dark .hover\:bg-slate-100:hover { background-color: rgba(255,255,255,.07) !important; }

/* ---- Yesil/Kirmizi durum mesajlari ---- */
html.dark .bg-green-50    { background-color: rgba(34,197,94,.12) !important; }
html.dark .text-green-700,
html.dark .text-green-800 { color: #86efac !important; }
html.dark .border-green-300 { border-color: rgba(34,197,94,.30) !important; }
html.dark .text-red-500   { color: #f87171 !important; }

/* ---- Header (buzlu cam) koyu hali — animations.css'i ezer ---- */
html.dark .mm-site-header { background-color: rgba(13,18,28,.90) !important; }
html.dark .mm-site-header.mm-header-scrolled { background-color: rgba(13,18,28,.97) !important; }
html.dark .mm-site-header.mm-ov {
  background-color: rgba(13,18,28,.55) !important;
  border-bottom-color: rgba(255,255,255,.10) !important;
}
html.dark .mm-mega-panel {
  background: rgba(16,22,34,.92) !important;
  box-shadow: 0 20px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06) !important;
}
html.dark .mm-mobile-panel { background-color: rgba(13,18,28,.94) !important; }

/* ---- Formlar (@tailwindcss/forms beyaz inputlari) ---- */
html.dark input,
html.dark textarea,
html.dark select {
  background-color: var(--mm-d-surface2) !important;
  border-color: rgba(255,255,255,.15) !important;
  color: #e8edf5 !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder { color: #74808f !important; }

/* ---- prose (markdown/blog) ---- */
html.dark .prose { color: #c4cdda; }
html.dark .prose :where(h1,h2,h3,h4,strong){ color: #e8edf5; }
html.dark .prose a { color: var(--mm-d-green); }

/* ---- Tema degistirme ikon/etiket gorunurlugu ---- */
.mm-icon-sun  { display: none; }
.mm-icon-moon { display: block; }
html.dark .mm-icon-sun  { display: block; }
html.dark .mm-icon-moon { display: none; }
.mm-theme-label-dark { display: none; }
html.dark .mm-theme-label-dark  { display: inline; }
html.dark .mm-theme-label-light { display: none; }