/* ProMode Comic teması — ders/ky HTML widget'larına ortak görünüm.
   Widget'ların kendi <style>'ındaki CSS değişkenlerini ezer; <head> sonuna
   <link> ile (kendi style'dan SONRA) eklendiğinden cascade'de kazanır. */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap');

:root {
  color-scheme: light;
  --bg: #F6F9F7;
  --surface: #FFFFFF;
  --surface-2: #EFF4F1;
  --surface-3: #E4EBE7;
  --text: #12332F;
  --text-2: #12332F;
  --text-3: rgba(40, 30, 20, 0.55);
  --border: rgba(18, 51, 47, 0.18);
  --border-2: rgba(18, 51, 47, 0.32);
  --info-bg: rgba(23, 75, 72, 0.10);
  --info-text: #174B48;
  --danger-bg: rgba(213, 92, 113, 0.12);
  --danger-text: #D55C71;
  /* grafik/accent renkleri */
  --blu: #174B48;
  --cor: #C97A3E;
  --des: #6b3a55;
  --radius: 16px;
  --radius-sm: 14px;
  --font: 'Nunito', ui-sans-serif, system-ui, sans-serif;
}

/* Koyu mod widget'larını da comic-kâğıt görünümünde sabitle */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #F6F9F7; --surface: #FFFFFF; --surface-2: #EFF4F1; --surface-3: #E4EBE7;
    --text: #12332F; --text-2: #12332F; --text-3: rgba(40,30,20,0.55);
    --border: rgba(18, 51, 47,0.18); --border-2: rgba(18, 51, 47,0.32);
    --info-bg: rgba(23, 75, 72,0.10); --info-text: #174B48;
    --danger-bg: rgba(213,92,113,0.12); --danger-text: #D55C71;
  }
}

body {
  background-color: var(--bg) !important;
  background-image: radial-gradient(rgba(18, 51, 47, 0.06) 1px, transparent 1px) !important;
  background-size: 22px 22px !important;
  font-family: 'Nunito', ui-sans-serif, system-ui, sans-serif !important;
  color: var(--text);
}

h1, h2, h3, .kicker, .serif, .hand,
.head h1, .title, .sec-title {
  font-family: Nunito, ui-sans-serif, system-ui, sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em;
}
h1 { color: #12332F; }
.kicker { color: var(--info-text) !important; }

.card {
  background: var(--surface);
  border: 1.8px solid var(--border) !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 0 rgba(18, 51, 47, 0.04), 0 8px 20px -14px rgba(18, 51, 47, 0.25) !important;
}

button {
  font-family: Nunito, ui-sans-serif, system-ui, sans-serif !important;
  font-size: 15px !important;
  border-radius: 999px !important;
  border: 1.6px solid var(--border) !important;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
button:hover { transform: translateY(-1px); border-color: var(--text) !important; }
button.on, button[aria-pressed="true"] {
  background: var(--info-bg) !important;
  border-color: var(--info-text) !important;
  color: var(--info-text) !important;
}

input, textarea, select {
  font-family: 'Nunito', sans-serif !important;
  border-radius: 10px !important;
  border: 1.6px solid var(--border) !important;
}
input:focus, textarea:focus, select:focus { border-color: var(--cor) !important; outline: none; }

input[type="range"] { accent-color: var(--info-text); }
b, strong { font-weight: 700; }
