/* ===========================================
   SKUT – Sidebar Glass Pro (rev: no-donut + dark tables)
   =========================================== */

:root{
  --bg:#070a14; --bg2:#0b1022;
  --pane:rgba(18,24,44,.78);
  --pane-2:rgba(16,22,40,.88);
  --solid:#0e1530;
  --b:rgba(150,175,220,.28);
  --tx:#edf2ff; --mut:#a7b4cf;
  --brand:#8b93ff; --brand2:#46deff;
  --ok:#2ad39b; --warn:#f5a623; --danger:#ff6b81;
  --r-xl:24px; --r-lg:18px; --r:14px;
  --shadow-1:0 10px 28px rgba(0,0,0,.35);
  --shadow-2:0 18px 48px rgba(0,0,0,.45);
  --glass:blur(12px) saturate(120%);
  --ring:0 0 0 2px rgba(139,147,255,.55), 0 0 0 9px rgba(139,147,255,.12);
}

/* ---- Ana Zemin ---- */
.skut{
  color:var(--tx);
  background:
    radial-gradient(70% 50% at 110% -10%, rgba(70,222,255,.15), transparent 60%),
    radial-gradient(70% 50% at -10% 10%, rgba(139,147,255,.12), transparent 60%),
    linear-gradient(135deg,var(--bg),var(--bg2) 66%);
  border-radius:var(--r-xl);
  padding:18px;
  box-shadow:var(--shadow-2);
  position:relative;
  overflow:hidden;
}

/* ---- Üst/Alt Bar ---- */
.skut-head,.skut-foot{
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.18));
  border:1px solid var(--b);
  border-radius:var(--r-lg);
  padding:10px 14px;
  backdrop-filter:var(--glass);
  box-shadow:var(--shadow-1);
}
.skut-title{
  display:flex;align-items:center;gap:10px;
  font-weight:900;font-size:16px;
}
.skut-title::before{
  content:"🏟️";
  width:30px;height:30px;border-radius:12px;
  display:grid;place-items:center;
  color:#06101e;
  background:conic-gradient(from 200deg,var(--brand),var(--brand2));
  box-shadow:0 8px 20px rgba(139,147,255,.34);
}
.skut-sub{font-size:12px;color:var(--mut)}
.skut-foot{margin-top:14px;font-size:12px;color:var(--mut)}

/* ---- KPI alanı (donut yok) ---- */
.skut-hero{margin:12px 0 14px;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.kpi{
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.16));
  border:1px solid var(--b);border-radius:16px;
  padding:14px;text-align:center;
  backdrop-filter:var(--glass);box-shadow:var(--shadow-1)
}
.kpi-num{font-size:22px;font-weight:900}
.kpi-label{font-size:12px;color:var(--mut)}
.kpi.ring,.ring-donut,.ring-center{display:none!important}

/* ---- Dikey Menü + Sağ Panel ---- */
.skut-tabs{display:grid;grid-template-columns:240px 1fr;gap:14px;align-items:start;margin-top:6px}
.skut-tabs>input{display:none}
.skut-tabs>label{
  display:block;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.20));
  border:1px solid var(--b);color:var(--tx);
  border-radius:16px;padding:12px 14px;margin:0 0 10px 0;
  font-size:14px;font-weight:800;cursor:pointer;
  backdrop-filter:var(--glass);box-shadow:var(--shadow-1);
  transition:transform .15s ease,box-shadow .25s ease,background .2s ease
}
.skut-tabs>label:hover{transform:translateX(2px);box-shadow:0 14px 28px rgba(139,147,255,.22)}
.skut-tabs>label:nth-of-type(1)::before{content:"👥 ";opacity:.95}
.skut-tabs>label:nth-of-type(2)::before{content:"💳 ";opacity:.95}
.skut-tabs>label:nth-of-type(3)::before{content:"🏋️ ";opacity:.95}
.skut-tabs>label:nth-of-type(4)::before{content:"📣 ";opacity:.95}
.skut-tabs>label:nth-of-type(5)::before{content:"🖼️ ";opacity:.95}
.skut-tabs>label:nth-of-type(6)::before{content:"📅 ";opacity:.95}
.skut-tabs>input:checked+label{
  color:#08111f;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  border-color:transparent;box-shadow:0 16px 34px rgba(139,147,255,.35);
  transform:translateX(2px)
}

/* ---- Sağ Panel ---- */
.skut-panels{
  grid-column:2/3;
  background:var(--pane-2);
  border:1px solid var(--b);
  border-radius:22px;padding:16px;min-height:420px;
  backdrop-filter:var(--glass);
  box-shadow:var(--shadow-1)
}
.skut-panel{display:none;animation:fade .3s ease}
@keyframes fade{from{opacity:.5;transform:translateY(4px)}to{opacity:1;transform:none}}
#skut-tab1:checked~.skut-panels .skut-panel:nth-child(1){display:block}
#skut-tab2:checked~.skut-panels .skut-panel:nth-child(2){display:block}
#skut-tab3:checked~.skut-panels .skut-panel:nth-child(3){display:block}
#skut-tab4:checked~.skut-panels .skut-panel:nth-child(4){display:block}
#skut-tab5:checked~.skut-panels .skut-panel:nth-child(5){display:block}
#skut-tab6:checked~.skut-panels .skut-panel:nth-child(6){display:block}
.skut-sec-title{font-weight:900;margin:2px 0 12px;font-size:16px;display:flex;align-items:center;gap:10px}
.skut-sec-title::before{content:"";width:12px;height:12px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--brand2));box-shadow:0 0 0 4px rgba(139,147,255,.18)}

/* ---- Formlar & Butonlar ---- */
.skut-form{display:flex;flex-wrap:wrap;gap:12px;margin:10px 0 14px}
.skut-form input[type=text],.skut-form input[type=email],.skut-form input[type=month],.skut-form select{
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.14));
  color:var(--tx);border:1px solid var(--b);
  border-radius:16px;padding:12px 14px;font-size:14px;outline:none;
  transition:.2s ease;box-shadow:inset 0 1px 0 rgba(255,255,255,.03)
}
.skut-form input:focus,.skut-form select:focus{box-shadow:var(--ring);border-color:transparent}
.skut-form input::placeholder{color:rgba(237,242,255,.45)}
.btn{--bg:linear-gradient(135deg,var(--brand),var(--brand2));background:var(--bg);color:#08111f;border:none;
  border-radius:999px;padding:11px 16px;font-weight:900;cursor:pointer;
  transition:transform .15s ease,box-shadow .25s ease;box-shadow:0 12px 30px rgba(139,147,255,.30)}
.btn:hover{transform:translateY(-1px);box-shadow:0 16px 38px rgba(139,147,255,.36)}
.btn.small{padding:8px 12px;font-size:12px}

/* ---- Tablo ---- */
.skut-table{width:100%;border-collapse:separate;border-spacing:0 10px}
.skut-table thead th{text-transform:uppercase;font-size:11px;letter-spacing:.6px;color:var(--mut);padding:0 12px 6px}
.skut-table tbody tr{
  background:var(--solid);
  border:1px solid var(--b);
  border-radius:18px;
  box-shadow:0 8px 18px rgba(0,0,0,.25)
}
.skut-table tbody td{
  color:var(--tx);
  padding:12px 12px;font-size:14px;vertical-align:middle
}
.skut-table tbody tr td:first-child{border-top-left-radius:18px;border-bottom-left-radius:18px}
.skut-table tbody tr td:last-child{border-top-right-radius:18px;border-bottom-right-radius:18px}

/* ---- Galeri ---- */
.skut-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.skut-img{
  border:1px solid var(--b);border-radius:18px;overflow:hidden;
  background:var(--solid);height:160px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-1);position:relative;transition:.25s ease
}
.skut-img:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(139,147,255,.24)}
.skut-img img{width:100%;height:100%;object-fit:cover}

/* ---- Responsive ---- */
@media(max-width:1024px){.skut-hero{grid-template-columns:repeat(3,minmax(0,1fr))}.skut-tabs{grid-template-columns:200px 1fr}}
@media(max-width:720px){
  .skut-tabs{grid-template-columns:1fr}
  .skut-tabs>label{display:inline-block;margin-right:8px;margin-bottom:8px;border-radius:999px}
  .skut-panels{grid-column:auto;min-height:0}
}
@media(max-width:480px){
  .skut{padding:14px}
  .btn{width:100%}
  .skut-table thead{display:none}
  .skut-table tbody tr{display:grid;grid-template-columns:1fr;gap:8px;padding:10px}
  .skut-table tbody td{padding:0}
}