/* ============================================================
   TF Antar Member — Desain MERAH / PUTIH / HITAM
   Ringan (tanpa font & ikon eksternal), responsif, aksesibel
   Dipakai oleh: inc/layout.php & index.php  (link: /assets/app.css)
   ============================================================ */
:root{
  --merah:#dc2626; --merah-gelap:#b91c1c; --merah-terang:#ef4444; --merah-lembut:#fef2f2;
  --hitam:#0a0a0a; --hitam-2:#171717; --hitam-3:#262626;
  --putih:#ffffff; --abu-bg:#f6f6f7; --abu-line:#e7e7e9; --abu-teks:#6b7280;
  --teks:#171717; --ok:#15803d; --ok-bg:#f0fdf4; --warn:#b45309; --warn-bg:#fffbeb;
  --radius:12px; --radius-sm:9px;
  --shadow:0 1px 2px rgba(0,0,0,.06);
  --shadow-md:0 8px 24px rgba(0,0,0,.08);
  --font:'Segoe UI',Roboto,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Consolas,'Courier New',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);font-size:14px;color:var(--teks);background:var(--abu-bg);line-height:1.55}
a{color:var(--merah);text-decoration:none}
a:hover{text-decoration:underline}
code,.mono{font-family:var(--mono);font-size:.92em}
:focus-visible{outline:2px solid var(--merah);outline-offset:2px}

/* ---------------- Struktur panel ---------------- */
body.app{display:flex;min-height:100vh}
.sidebar{width:252px;flex:0 0 252px;background:var(--hitam);color:#d4d4d4;display:flex;flex-direction:column;
  position:fixed;inset:0 auto 0 0;z-index:50;overflow-y:auto}
.sidebar .brand{display:flex;gap:11px;align-items:center;padding:18px 16px;border-bottom:1px solid #262626}
.sidebar .brand b{display:block;color:#fff;font-size:14.5px;letter-spacing:.2px}
.sidebar .brand small{color:#8a8a8a;font-size:11px}
.logo{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;flex:0 0 36px;
  border-radius:10px;background:linear-gradient(135deg,var(--merah-terang),var(--merah-gelap));color:#fff;
  font-weight:800;font-size:12.5px;letter-spacing:.5px}
.sidebar nav{flex:1;padding:10px 8px;display:flex;flex-direction:column;gap:2px}
.sidebar nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-sm);
  color:#cfcfcf;font-size:13.4px;text-decoration:none}
.sidebar nav a:hover{background:#1d1d1d;color:#fff;text-decoration:none}
.sidebar nav a.on{background:linear-gradient(135deg,var(--merah-terang),var(--merah-gelap));color:#fff;font-weight:600;
  box-shadow:0 6px 18px rgba(220,38,38,.35)}
.sidebar nav .ic{display:inline-flex;width:18px;height:18px;flex:0 0 18px}
.sidebar nav .ic svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.side-foot{border-top:1px solid #262626;padding:14px}
.side-foot .who small{display:block;color:#8a8a8a;font-size:11px}
.side-foot .who b{display:block;color:#fff;font-size:13px;word-break:break-word}
.side-foot .who span{display:block;color:#9a9a9a;font-size:11px;word-break:break-word}
.btn-logout{display:block;text-align:center;margin-top:10px;padding:9px;border-radius:var(--radius-sm);
  background:#1f1f1f;color:#fca5a5;font-size:13px}
.btn-logout:hover{background:var(--merah-gelap);color:#fff;text-decoration:none}

.main{flex:1;min-width:0;margin-left:252px;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;padding:13px 22px 13px 19px;
  background:rgba(255,255,255,.93);border-bottom:1px solid var(--abu-line)}
.topbar::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--merah)}
.topbar h1{font-size:16.5px;font-weight:700}
.burger{display:none;background:none;border:0;cursor:pointer;color:var(--hitam);padding:4px}
.burger svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2}
.content{padding:20px;flex:1}
.foot{padding:16px 22px;color:var(--abu-teks);font-size:12px;text-align:center}

/* ---------------- Kartu ---------------- */
.card{background:var(--putih);border:1px solid var(--abu-line);border-radius:var(--radius);
  padding:18px;margin-bottom:16px;box-shadow:var(--shadow)}
.card>h2,.card>h3{font-size:14.5px;font-weight:700;margin-bottom:10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.card>h2::before{content:'';width:3px;height:16px;border-radius:2px;background:var(--merah)}
.card .sub{color:var(--abu-teks);font-size:12.6px;margin-bottom:12px;line-height:1.65}
.grid{display:grid;gap:13px}
.grid.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid.g3{grid-template-columns:repeat(auto-fit,minmax(225px,1fr))}
.grid.g4{grid-template-columns:repeat(auto-fit,minmax(195px,1fr))}

.stat{position:relative;background:var(--putih);border:1px solid var(--abu-line);border-radius:var(--radius);
  padding:15px 16px 15px 18px;overflow:hidden;box-shadow:var(--shadow)}
.stat::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--merah)}
.stat.c-green::before{background:var(--ok)}
.stat.c-red::before{background:var(--merah)}
.stat.c-amber::before{background:#d97706}
.stat.c-black::before{background:var(--hitam)}
.stat.c-blue::before{background:var(--hitam-3)}
.stat small{display:block;color:var(--abu-teks);font-size:11.6px;margin-bottom:6px;text-transform:uppercase;letter-spacing:.4px}
.stat b{display:block;font-size:20px;line-height:1.25;letter-spacing:-.3px}
.stat span{display:block;color:var(--abu-teks);font-size:11.6px;margin-top:3px}

/* ---------------- Tabel ---------------- */
.table-wrap{overflow-x:auto;border:1px solid var(--abu-line);border-radius:var(--radius);background:var(--putih);
  -webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:13px}
th{background:#fafafa;text-align:left;padding:10px 12px;font-size:11.4px;text-transform:uppercase;letter-spacing:.4px;
  color:var(--abu-teks);border-bottom:1px solid var(--abu-line);white-space:nowrap;font-weight:700}
td{padding:10px 12px;border-bottom:1px solid #f2f2f3;vertical-align:top}
tbody tr:hover{background:#fcfcfc}
tbody tr:last-child td{border-bottom:0}
.empty{padding:32px;text-align:center;color:var(--abu-teks)}

.badge{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11.4px;font-weight:700;white-space:nowrap}
.b-ok{background:var(--ok-bg);color:var(--ok)}
.b-err{background:var(--merah-lembut);color:var(--merah-gelap)}
.b-warn{background:var(--warn-bg);color:var(--warn)}
.b-gray{background:#f4f4f5;color:#525252}
.b-info{background:#f4f4f5;color:var(--hitam)}

/* ---------------- Form ---------------- */
label{display:block;font-size:12.4px;font-weight:600;color:#3f3f46;margin-bottom:5px}
input[type=text],input[type=email],input[type=password],input[type=number],select,textarea{
  width:100%;padding:10px 12px;border:1.5px solid #dcdce0;border-radius:var(--radius-sm);font-size:13.6px;
  font-family:inherit;background:#fcfcfd;color:var(--teks);outline:none;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{border-color:var(--merah);background:#fff;box-shadow:0 0 0 3px rgba(220,38,38,.12)}
textarea{min-height:110px;resize:vertical;line-height:1.65}
textarea.code{min-height:270px;font-family:var(--mono);font-size:12.4px}
.fg{margin-bottom:13px}
.hint{font-size:11.6px;color:var(--abu-teks);margin-top:5px;line-height:1.6}
.row{display:grid;gap:13px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}

.btn{display:inline-block;padding:10px 16px;border:0;border-radius:var(--radius-sm);cursor:pointer;
  background:linear-gradient(135deg,var(--merah-terang),var(--merah-gelap));color:#fff;font-size:13.4px;
  font-weight:600;font-family:inherit;text-decoration:none;transition:filter .12s,transform .12s;line-height:1.4}
.btn:hover{filter:brightness(1.06);text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn-sm{padding:6px 11px;font-size:12.2px;border-radius:8px}
.btn-sec{background:#f4f4f5;color:#27272a;border:1px solid #e4e4e7}
.btn-sec:hover{background:#eaeaea}
.btn-ok{background:linear-gradient(135deg,#22c55e,#15803d)}
.btn-err{background:linear-gradient(135deg,var(--merah-terang),var(--merah-gelap))}
.btn-warn{background:linear-gradient(135deg,#f59e0b,#b45309)}
.btn-group{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

.alert{padding:12px 14px;border-radius:var(--radius-sm);margin-bottom:15px;font-size:13px;line-height:1.6;
  border-left:4px solid var(--merah)}
.alert-success{background:var(--ok-bg);border-color:var(--ok);color:#14532d}
.alert-error{background:var(--merah-lembut);border-color:var(--merah);color:#7f1d1d}
.alert-info{background:#fafafa;border-color:var(--hitam-3);color:#27272a}
.alert-warning{background:var(--warn-bg);border-color:#d97706;color:#78350f}

/* ---------------- Halaman auth ---------------- */
body.auth{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px;
  background:radial-gradient(1100px 520px at 12% -8%,#3f0b0b 0%,rgba(63,11,11,0) 62%),
             linear-gradient(140deg,#0a0a0a 0%,#171717 58%,#450a0a 100%)}
.auth-box{width:100%;max-width:430px;background:var(--putih);border-radius:16px;padding:26px;
  box-shadow:0 24px 60px rgba(0,0,0,.45);border-top:4px solid var(--merah)}
.auth-head{text-align:center;margin-bottom:18px}
.auth-head .logo{margin-bottom:10px;width:44px;height:44px;flex:0 0 44px;font-size:14px}
.auth-head h1{font-size:18.5px}
.auth-head p{color:var(--abu-teks);font-size:12.4px;margin-top:4px}
.auth-alt{text-align:center;font-size:12.4px;color:var(--abu-teks);margin-top:13px}
.tabs{display:flex;gap:5px;background:#f4f4f5;padding:4px;border-radius:10px;margin-bottom:16px}
.tabs a{flex:1;text-align:center;padding:8px;border-radius:7px;font-size:12.8px;color:var(--abu-teks);font-weight:600}
.tabs a:hover{text-decoration:none;color:var(--hitam)}
.tabs a.on{background:var(--putih);color:var(--merah);box-shadow:0 1px 4px rgba(0,0,0,.09)}

/* ---------------- Halaman depan ---------------- */
.hero{max-width:1020px;margin:0 auto;padding:56px 20px}
.hero h1{font-size:clamp(21px,3.4vw,31px);color:#fff;margin-bottom:10px;line-height:1.25;letter-spacing:-.4px}
.hero p{color:#d4d4d4;font-size:14.5px;max-width:660px;line-height:1.75}
.hero-cards{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin-top:30px}
.feat{margin-top:30px;background:var(--putih);border-radius:16px;padding:22px;box-shadow:var(--shadow-md)}
.feat h3{font-size:15.5px;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.feat h3::before{content:'';width:3px;height:16px;border-radius:2px;background:var(--merah)}
.feat ol{margin-left:19px;line-height:2;font-size:13.4px;color:#3f3f46}
.hero .logo{width:44px;height:44px;flex:0 0 44px;font-size:14px}

/* ---------------- Responsif ---------------- */
@media(max-width:900px){
  .sidebar{transform:translateX(-100%);transition:transform .22s ease}
  .sidebar.open{transform:none;box-shadow:0 0 0 100vmax rgba(0,0,0,.45)}
  .main{margin-left:0}
  .burger{display:inline-flex}
  .content{padding:14px}
  .stat b{font-size:18px}
  .hero{padding:34px 16px}
}
@media(max-width:520px){
  .card{padding:14px}
  .grid.g4,.grid.g3{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .topbar{padding:11px 14px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media print{.sidebar,.topbar,.btn,.btn-group{display:none}.main{margin-left:0}}