/* ============================================================
   Aurora teması — gece (dark) ve gündüz (light) modu
   ============================================================ */
:root{
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --grad: linear-gradient(135deg, #6366f1, #8b5cf6);
  --radius: 18px;
}
/* GECE */
html[data-mode="dark"]{
  --bg:#0b0e1a; --bg2:#11152b;
  --panel:#141931; --panel2:#1b2142; --line:#252c4f;
  --txt:#eef1ff; --txt2:#a3abcf; --txt3:#6b7299;
  --accent:#6366f1; --accent-soft:rgba(99,102,241,.16); --accent-txt:#a5b4fc;
  --green:#34d399; --green-soft:rgba(52,211,153,.14);
  --amber:#fbbf24; --amber-soft:rgba(251,191,36,.14);
  --red:#fb7185;   --red-soft:rgba(251,113,133,.14);
  --purple:#a78bfa;--purple-soft:rgba(167,139,250,.16);
  --shadow:0 8px 30px rgba(0,0,0,.32);
}
/* GÜNDÜZ */
html[data-mode="light"]{
  --bg:#eef0f7; --bg2:#e6e9f4;
  --panel:#ffffff; --panel2:#f3f4fb; --line:#e2e5f0;
  --txt:#171b33; --txt2:#5a6088; --txt3:#9298b8;
  --accent:#6366f1; --accent-soft:rgba(99,102,241,.1); --accent-txt:#4f46e5;
  --green:#059669; --green-soft:rgba(5,150,105,.1);
  --amber:#d97706; --amber-soft:rgba(217,119,6,.1);
  --red:#dc2626;   --red-soft:rgba(220,38,38,.1);
  --purple:#7c3aed;--purple-soft:rgba(124,58,237,.1);
  --shadow:0 2px 8px rgba(60,60,120,.08), 0 8px 24px rgba(60,60,120,.06);
}
*{box-sizing:border-box;}
body{margin:0; font-family:var(--font); background:var(--bg); color:var(--txt); transition:background .25s,color .25s; -webkit-font-smoothing:antialiased;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1120px; margin:0 auto; padding:0 18px;}
.main{padding-top:22px; padding-bottom:40px;}

/* TOPBAR */
.topbar{position:sticky; top:0; z-index:30; background:var(--bg2); border-bottom:1px solid var(--line); backdrop-filter:blur(8px);}
.topbar-inner{display:flex; align-items:center; gap:18px; height:62px;}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:16px; letter-spacing:-.02em;}
.brand-ico{width:38px; height:38px; border-radius:11px; background:var(--grad); display:flex; align-items:center; justify-content:center; font-size:19px; box-shadow:var(--shadow);}
.mainnav{display:flex; gap:4px; margin-left:8px; flex:1;}
.mainnav a{font-size:14px; font-weight:600; color:var(--txt2); padding:8px 14px; border-radius:10px; transition:.15s;}
.mainnav a:hover{background:var(--panel2); color:var(--txt);}
.mainnav a.on{background:var(--accent-soft); color:var(--accent-txt);}
.topbar-right{display:flex; gap:7px; align-items:center;}
.icon-btn{width:38px; height:38px; border-radius:11px; border:1px solid var(--line); background:var(--panel); color:var(--txt); cursor:pointer; font-size:16px; display:flex; align-items:center; justify-content:center; transition:.15s;}
.icon-btn:hover{filter:brightness(1.1); border-color:var(--accent);}
.burger{display:none;}

/* CARD */
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);}
.card-pad{padding:20px;}

/* PAGE HEAD */
.page-head{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:22px;}
.page-title{font-size:23px; font-weight:800; letter-spacing:-.02em;}
.page-sub{font-size:13px; color:var(--txt2); margin-top:2px;}

/* BUTTONS */
.btn{font-family:var(--font); font-size:13.5px; font-weight:600; padding:9px 16px; border-radius:11px; border:1px solid var(--line); background:var(--panel2); color:var(--txt); cursor:pointer; transition:.15s; display:inline-flex; align-items:center; gap:6px;}
.btn:hover{filter:brightness(1.08); border-color:var(--accent);}
.btn-primary{background:var(--grad); border:none; color:#fff;}
.btn-primary:hover{filter:brightness(1.08);}
.btn-danger{color:var(--red); border-color:var(--red-soft);}
.btn-sm{padding:6px 11px; font-size:12.5px;}

/* METRIC */
.metrics{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin-bottom:16px;}
.metric{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow);}
.metric .lbl{font-size:12.5px; color:var(--txt2); font-weight:500; display:flex; justify-content:space-between;}
.metric .num{font-size:27px; font-weight:800; margin-top:8px; letter-spacing:-.02em;}
.metric .sub{font-size:11.5px; color:var(--txt3); margin-top:4px;}

/* DASH GRID */
.dash{display:grid; grid-template-columns:1.4fr 1fr; gap:14px; margin-bottom:20px;}

/* PILL */
.pill{font-size:11px; padding:3px 10px; border-radius:20px; font-weight:600; display:inline-block; white-space:nowrap;}
.pill.yesil{background:var(--green-soft); color:var(--green);}
.pill.sari{background:var(--amber-soft); color:var(--amber);}
.pill.kirmizi{background:var(--red-soft); color:var(--red);}
.pill.gri{background:var(--panel2); color:var(--txt3);}
.pill.domain{background:var(--accent-soft); color:var(--accent-txt);}
.pill.hosting{background:var(--purple-soft); color:var(--purple);}

/* PROGRESS */
.prog{height:7px; border-radius:6px; background:var(--line); overflow:hidden;}
.prog>div{height:100%; border-radius:6px;}

/* TABLE */
.tbl-wrap{overflow-x:auto; border-radius:var(--radius);}
table.tbl{border-collapse:collapse; width:100%;}
table.tbl th{font-size:11px; font-weight:600; text-align:left; padding:12px 14px; white-space:nowrap; text-transform:uppercase; letter-spacing:.04em; color:var(--txt3); border-bottom:1px solid var(--line);}
table.tbl td{padding:13px 14px; font-size:13.5px; border-top:1px solid var(--line); vertical-align:middle;}
table.tbl tr.row:hover{background:var(--panel2); cursor:pointer;}
.urun-ad{font-weight:600;}
.urun-firma{font-size:11px; color:var(--txt3);}

/* FORM */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.field{margin-bottom:4px;}
.field label{font-size:13px; color:var(--txt2); display:block; margin-bottom:6px; font-weight:500;}
input[type=text],input[type=password],input[type=date],input[type=number],input[type=email],input[type=url],select,textarea{
  width:100%; background:var(--panel2); border:1px solid var(--line); border-radius:11px; color:var(--txt);
  padding:10px 13px; font-size:14px; font-family:var(--font);}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
textarea{resize:vertical; min-height:70px;}

/* MODAL */
.modal-bg{position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:flex-start; justify-content:center; padding:30px 14px; overflow-y:auto; z-index:50;}
.modal{max-width:600px; width:100%; background:var(--panel); border-radius:var(--radius); box-shadow:var(--shadow);}

/* SCREENSHOT THUMB */
.ss-thumb{width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top; border-radius:12px; border:1px solid var(--line); background:var(--panel2);}
.logo-chip{width:22px; height:22px; border-radius:6px; object-fit:contain; vertical-align:-6px; margin-right:6px; background:#fff; padding:2px;}

/* liste thumbnail */
.list-thumb{width:54px; height:34px; border-radius:7px; object-fit:cover; object-position:top; border:1px solid var(--line); background:var(--panel2); flex-shrink:0;}
.list-thumb-ph{display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--accent-txt); background:var(--accent-soft); font-size:15px;}

/* ALERT */
.alert{padding:13px 16px; border-radius:13px; font-size:13.5px; margin-bottom:16px; display:flex; gap:10px; align-items:center;}
.alert-warn{background:var(--amber-soft); color:var(--amber);}
.alert-ok{background:var(--green-soft); color:var(--green);}
.alert-err{background:var(--red-soft); color:var(--red);}

/* TABS (filter) */
.tabs{display:flex; gap:6px; margin-bottom:18px; flex-wrap:wrap; border-bottom:1px solid var(--line); padding-bottom:8px;}
.tabs a{font-size:13.5px; font-weight:600; color:var(--txt2); padding:8px 14px; border-radius:10px;}
.tabs a:hover{background:var(--panel2); color:var(--txt);}
.tabs a.on{background:var(--accent-soft); color:var(--accent-txt);}

.foot{border-top:1px solid var(--line); padding:22px 0; text-align:center; font-size:12px; color:var(--txt3);}

/* LOGIN */
.login-box{max-width:380px; margin:8vh auto; }
.login-logo{width:60px; height:60px; border-radius:18px; background:var(--grad); display:flex; align-items:center; justify-content:center; font-size:30px; margin:0 auto 18px; box-shadow:var(--shadow);}

/* RESPONSIVE */
@media(max-width:760px){
  .dash{grid-template-columns:1fr;}
  .form-grid{grid-template-columns:1fr;}
}
@media(max-width:680px){
  .burger{display:flex;}
  .mainnav{position:absolute; top:62px; left:0; right:0; flex-direction:column; background:var(--bg2); border-bottom:1px solid var(--line); padding:10px 18px; gap:2px; display:none;}
  .mainnav.open{display:flex;}
  .mainnav{flex:0;}
  .brand-text{display:none;}
  /* tablo -> kart */
  table.tbl thead{display:none;}
  table.tbl tr.row{display:block; margin:0 0 12px; border:1px solid var(--line); border-radius:14px; padding:6px 4px; background:var(--panel);}
  table.tbl td{display:flex; justify-content:space-between; align-items:center; gap:14px; border:none; padding:8px 14px;}
  table.tbl td::before{content:attr(data-label); font-size:11px; color:var(--txt3); font-weight:600; text-transform:uppercase; letter-spacing:.03em;}
  table.tbl td.col-ad::before{display:none;}
  table.tbl td.col-ad{padding-top:12px;}
}