/* =========================================================
   ANESTHUB - ORTAK TASARIM (CSS) DOSYASI
   Tüm sayfalardaki temalar, menüler ve ortak kartlar buradan yönetilir.
========================================================= */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
:root { --font: 'Inter', 'Nunito', 'Calibri', sans-serif; --mono: 'JetBrains Mono', 'Consolas', monospace; }

/* ── TEMALAR ── */
[data-theme="light"] {
  --bg:#f0f4f8; --bg2:#fff; --bg3:#e4edf5; --bg4:#f8fbfd;
  --border:#ccdbe8; --border2:#b0c8d8;
  --text:#1a2a35; --text2:#4a6578; --text3:#8aa5b5;
  --accent:#1a8a6e; --abg:rgba(26,138,110,.08); --aborder:rgba(26,138,110,.3); --accent-bg:rgba(26,138,110,.08); --accent-border:rgba(26,138,110,.3);
  --blue:#1a6abf; --bbg:rgba(26,106,191,.08); --blue-bg:rgba(26,106,191,.08);
  --orange:#c8620a; --obg:rgba(200,98,10,.08); --orange-bg:rgba(200,98,10,.08);
  --red:#cc2222; --rbg:rgba(204,34,34,.08); --red-bg:rgba(204,34,34,.08);
  --yellow:#b08000; --ybg:rgba(176,128,0,.08); --yellow-bg:rgba(176,128,0,.08);
  --purple:#7a3acd; --pbg:rgba(122,58,205,.08); --purple-bg:rgba(122,58,205,.08);
  --pink:#c0186a; --pkbg:rgba(192,24,106,.08);
  --teal:#0d7a90; --tbg:rgba(13,122,144,.08);
  --shadow:0 2px 10px rgba(0,0,0,.08);
}
[data-theme="dark"] {
  --bg:#0f1419; --bg2:#161d25; --bg3:#1c2630; --bg4:#0a1018;
  --border:#26343f; --border2:#2e4050;
  --text:#e2ecf2; --text2:#7fa0b2; --text3:#3d5a6a;
  --accent:#2dd4a8; --abg:rgba(45,212,168,.09); --aborder:rgba(45,212,168,.25); --accent-bg:rgba(45,212,168,.08); --accent-border:rgba(45,212,168,.25);
  --blue:#4da6ff; --bbg:rgba(77,166,255,.09); --blue-bg:rgba(77,166,255,.08);
  --orange:#ff8c42; --obg:rgba(255,140,66,.09); --orange-bg:rgba(255,140,66,.08);
  --red:#ff5c5c; --rbg:rgba(255,92,92,.09); --red-bg:rgba(255,92,92,.08);
  --yellow:#ffc94d; --ybg:rgba(255,201,77,.09); --yellow-bg:rgba(255,201,77,.08);
  --purple:#b07aff; --pbg:rgba(176,122,255,.09); --purple-bg:rgba(176,122,255,.08);
  --pink:#ff6eb4; --pkbg:rgba(255,110,180,.09);
  --teal:#22d3ee; --tbg:rgba(34,211,238,.09);
  --shadow:0 2px 14px rgba(0,0,0,.35);
}
[data-theme="navy"] {
  --bg:#0d1b2a; --bg2:#112336; --bg3:#162d44; --bg4:#08121c;
  --border:#1e3a52; --border2:#2a4f6e;
  --text:#daeaf8; --text2:#7aabbf; --text3:#345a72;
  --accent:#38bdf8; --abg:rgba(56,189,248,.08); --aborder:rgba(56,189,248,.28);
  --blue:#60a5fa; --bbg:rgba(96,165,250,.08);
  --orange:#fb923c; --obg:rgba(251,146,60,.08);
  --red:#f87171; --rbg:rgba(248,113,113,.08);
  --yellow:#fbbf24; --ybg:rgba(251,191,36,.08);
  --purple:#a78bfa; --pbg:rgba(167,139,250,.08);
  --pink:#f472b6; --pkbg:rgba(244,114,182,.08);
  --teal:#2dd4bf; --tbg:rgba(45,212,191,.08);
  --shadow:0 2px 12px rgba(0,0,0,.4);
}
[data-theme="cream"] {
  --bg:#faf7f2; --bg2:#fff; --bg3:#f2ece0; --bg4:#fff;
  --border:#ddd4c0; --border2:#c8bba2;
  --text:#2c2218; --text2:#6b5740; --text3:#a89070;
  --accent:#7c5c28; --abg:rgba(124,92,40,.08); --aborder:rgba(124,92,40,.28);
  --blue:#2e6da4; --bbg:rgba(46,109,164,.08);
  --orange:#c05c10; --obg:rgba(192,92,16,.08);
  --red:#b82020; --rbg:rgba(184,32,32,.08);
  --yellow:#8a6800; --ybg:rgba(138,104,0,.08);
  --purple:#6b3aad; --pbg:rgba(107,58,173,.08);
  --pink:#9e1a5c; --pkbg:rgba(158,26,92,.08);
  --teal:#0d7a6e; --tbg:rgba(13,122,110,.08);
  --shadow:0 2px 10px rgba(0,0,0,.07);
}
[data-theme="forest"] {
  --bg:#0e1a12; --bg2:#14221a; --bg3:#1a2c22; --bg4:#091210;
  --border:#24402e; --border2:#2e5438;
  --text:#d8f0e2; --text2:#6da882; --text3:#2e5c3e;
  --accent:#4ade80; --abg:rgba(74,222,128,.08); --aborder:rgba(74,222,128,.26);
  --blue:#5eead4; --bbg:rgba(94,234,212,.08);
  --orange:#fb923c; --obg:rgba(251,146,60,.08);
  --red:#f87171; --rbg:rgba(248,113,113,.08);
  --yellow:#facc15; --ybg:rgba(250,204,21,.08);
  --purple:#c084fc; --pbg:rgba(192,132,252,.08);
  --pink:#f472b6; --pkbg:rgba(244,114,182,.08);
  --teal:#22d3ee; --tbg:rgba(34,211,238,.08);
  --shadow:0 2px 12px rgba(0,0,0,.38);
}

body { font-family: var(--font); background: var(--bg); color: var(--text); transition: background .25s, color .25s; }

/* ── TEMA SEÇİCİ ── */
.theme-picker { position: relative; }
.theme-picker-btn { height: 32px; padding: 0 10px; border-radius: 7px; background: var(--bg3); border: 1px solid var(--border); color: var(--text2); cursor: pointer; display: flex; align-items: center; gap: 6px; font-family: var(--font); font-size: 12px; font-weight: 700; transition: all .2s; white-space: nowrap; }
.theme-picker-btn:hover { border-color: var(--accent); color: var(--accent); }
.tp-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.theme-dropdown { display: none; position: absolute; right: 0; top: calc(100% + 6px); background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); padding: 6px; z-index: 300; min-width: 155px; }
.theme-dropdown.open { display: block; }
.theme-option { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 7px; cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--text2); transition: all .15s; }
.theme-option:hover { background: var(--abg); color: var(--text); }
.theme-option.active { background: var(--abg); color: var(--accent); }
.to-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; border: 1.5px solid rgba(255,255,255,0.12); }

/* ── AKILLI KART (X KAPATMA BUTONU) ── */
.grid2, .grid3, .drug-grid, .cards, .mode-grid { align-items: start !important; }
.card.open, .drug-card.open { grid-column: 1 / -1 !important; border-color: var(--accent) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.18) !important; transition: all 0.25s ease; }
.close-x-btn { display: none; background: var(--red, #cc2222); color: #fff; border: none; width: 24px; height: 24px; border-radius: 50%; font-size: 12px; font-weight: 800; cursor: pointer; align-items: center; justify-content: center; margin-left: auto; flex-shrink: 0; transition: transform 0.15s, background 0.15s; }
.card.open .close-x-btn, .drug-card.open .close-x-btn { display: flex !important; }
.close-x-btn:hover { transform: scale(1.1); background: #ff0000; }