/* ===================================================================
   MODÜL360 — Yönetim Paneli teması (vitrin ile aynı dil)
   Fonts: Fraunces (display), Manrope (body), IBM Plex Mono (etiket)
=================================================================== */
:root{
  --bg:#070a14; --bg2:#0a1020; --panel:#0e1426;
  --ink:#eef2ff; --mut:#8a93b6; --line:rgba(255,255,255,.09);
  --glass:rgba(255,255,255,.04); --glass-br:rgba(255,255,255,.10);
  --cyan:#28e0e0; --brand:#3b74ff; --brand2:#8b5cf6; --violet:#8b5cf6; --amber:#f3b34d;
  --ok:#34e0a6; --warn:#f3b34d; --err:#ff6b6b; --info:#7c9bff; --chip:rgba(255,255,255,.06);
  --grad:linear-gradient(135deg,#28e0e0,#5b7bff 55%,#8b5cf6);
  --grad-soft:linear-gradient(135deg,rgba(40,224,224,.16),rgba(139,92,246,.16));
  --radius:14px; font-size:15px;
}
*{box-sizing:border-box}
body{margin:0;font-family:"Manrope",system-ui,Arial,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h2,h3{font-family:"Fraunces",serif;font-weight:600}
.bg-spot{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(50vw 40vh at 0% 0%,rgba(40,224,224,.10),transparent 60%),
             radial-gradient(50vw 50vh at 100% 100%,rgba(139,92,246,.13),transparent 60%)}

/* ---------- LOGIN ---------- */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px}
.login-card{width:400px;max-width:92vw;background:var(--glass);border:1px solid var(--glass-br);
  border-radius:22px;padding:34px;backdrop-filter:blur(10px);box-shadow:0 30px 80px -30px #000}
.login-card .brand{font-size:24px;font-weight:800;margin-bottom:4px;display:flex;align-items:center;gap:10px}
.login-card .sub{color:var(--mut);margin-bottom:22px;font-size:13px}

/* ---------- LAYOUT ---------- */
.layout{display:flex;min-height:100vh}
.sidebar{width:256px;background:rgba(14,20,38,.72);backdrop-filter:blur(10px);border-right:1px solid var(--line);
  flex-shrink:0;padding:18px 12px;position:sticky;top:0;height:100vh;overflow:auto}
.brand{font-size:19px;font-weight:800;display:flex;align-items:center;gap:9px;padding:4px 8px 14px}
.brand b{color:var(--cyan)}
.brand .logo,.logo{background:var(--grad);color:#04121a;font-family:"IBM Plex Mono",monospace;
  font-size:12px;font-weight:700;padding:5px 7px;border-radius:8px}
.tenant-badge{font-size:12px;color:var(--mut);background:var(--chip);border:1px solid var(--line);
  padding:8px 11px;border-radius:9px;margin:0 4px 14px;font-family:"IBM Plex Mono",monospace}
.menu{display:flex;flex-direction:column;gap:2px}
.menu a{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:10px;color:var(--mut);font-size:13.5px;transition:.15s}
.menu a .mi{width:18px;text-align:center;opacity:.95}
.menu a:hover{background:var(--glass);color:var(--ink)}
.menu a.on{background:var(--grad-soft);color:#fff;border:1px solid var(--glass-br)}
.menu a.soon{opacity:.55}
.menu a em{margin-left:auto;font-size:10px;font-style:normal;background:var(--chip);padding:2px 6px;border-radius:6px;color:var(--mut)}
.menu-sep{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--mut);padding:14px 11px 6px;opacity:.7;font-family:"IBM Plex Mono",monospace}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:18px 28px;border-bottom:1px solid var(--line);
  background:rgba(7,10,20,.5);backdrop-filter:blur(8px);position:sticky;top:0;z-index:5}
.topbar .pt{font-family:"Fraunces",serif;font-size:1.3rem;font-weight:600}
.topbar .user{display:flex;align-items:center;gap:12px;color:var(--mut);font-size:.9rem}
.content{padding:28px;max-width:1200px;width:100%}
.page{font-size:1.7rem;margin:0 0 4px}
.lead{color:var(--mut);margin:0 0 22px}

/* ---------- CARD / GRID ---------- */
.card{background:var(--glass);border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin-bottom:20px}
.card h3{font-size:1.18rem;margin:0 0 14px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

/* KPI */
.kpis,.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}
.kpi-row{grid-template-columns:repeat(3,1fr)}
.kpi{background:var(--glass);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.kpi .n{font-family:"Fraunces",serif;font-size:1.9rem;font-weight:600;line-height:1}
.kpi .l{color:var(--mut);font-size:.86rem;margin-top:7px}

/* ---------- TABLE ---------- */
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);font-size:.9rem;vertical-align:top}
th{font-family:"IBM Plex Mono",monospace;font-weight:500;font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;color:var(--mut)}
tr:last-child td{border-bottom:none}
table tr:hover td{background:rgba(255,255,255,.02)}
.empty{text-align:center;color:var(--mut);padding:34px}
.note{color:var(--mut);font-size:.85rem}
code{font-family:"IBM Plex Mono",monospace;background:var(--chip);padding:2px 7px;border-radius:6px;font-size:.85rem}
table.kv td:first-child{color:var(--mut);width:38%;font-size:.85rem}

/* ---------- CHIPS ---------- */
.chip{display:inline-block;padding:3px 10px;border-radius:20px;font-size:.76rem;font-weight:600;background:var(--chip);border:1px solid var(--line)}
.chip.ok{background:rgba(52,224,166,.14);color:#7ef0c4;border-color:rgba(52,224,166,.3)}
.chip.warn{background:rgba(243,179,77,.14);color:#f3ca84;border-color:rgba(243,179,77,.3)}
.chip.info{background:rgba(124,155,255,.16);color:#aebcff;border-color:rgba(124,155,255,.3)}
.chip.err{background:rgba(255,107,107,.14);color:#ff9d9d;border-color:rgba(255,107,107,.3)}
.chip.mut{color:var(--mut)}

/* ---------- FORM ---------- */
label{display:block;font-size:.85rem;color:var(--mut);margin:12px 0 6px}
input,select,textarea{width:100%;background:var(--bg);border:1px solid var(--line);color:var(--ink);
  border-radius:11px;padding:11px 13px;font-family:inherit;font-size:.93rem;transition:.15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(40,224,224,.12)}

/* ---------- BUTTON ---------- */
.btn{display:inline-flex;align-items:center;gap:.5em;background:var(--grad);color:#04121a;font-weight:700;
  padding:11px 18px;border-radius:999px;border:none;cursor:pointer;font-size:.92rem;transition:.2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px -12px rgba(40,224,224,.5)}
.btn.sm{padding:7px 13px;font-size:.82rem}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--glass-br)}
.btn.ghost:hover{border-color:var(--cyan);background:rgba(40,224,224,.06)}
.btn-row{display:flex;gap:10px;align-items:center;margin-bottom:18px;flex-wrap:wrap}

/* ---------- ALERT ---------- */
.alert{padding:13px 16px;border-radius:11px;margin-bottom:18px;border:1px solid var(--line);font-size:.92rem}
.alert.success{background:rgba(52,224,166,.1);border-color:rgba(52,224,166,.4);color:#7ef0c4}
.alert.error{background:rgba(255,107,107,.1);border-color:rgba(255,107,107,.4);color:#ff9d9d}
.alert.warn{background:rgba(243,179,77,.1);border-color:rgba(243,179,77,.4);color:#f3ca84}

/* ---------- PAZARLAMA özel ---------- */
.copy-box{display:flex;gap:8px}
.copy-box input{font-family:"IBM Plex Mono",monospace;font-size:.84rem}
.tpl{margin-top:14px}
.tpl-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.tpl textarea{font-size:.86rem;line-height:1.5}
.notif{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;border:1px solid var(--line);border-radius:11px;margin-bottom:8px}
.notif.unseen{background:rgba(40,224,224,.05);border-color:rgba(40,224,224,.25)}

@media(max-width:860px){
  .sidebar{position:fixed;z-index:40;left:-280px;transition:.25s}
  .sidebar.open{left:0}
  .kpis,.kpi-row,.grid2,.grid3{grid-template-columns:1fr}
}