/* Article Directory – Frontend UI (Deluxe Light Edition) */
/* Code By.DestraWeb */
:root{
  --ad-bg:#f9fafb;        /* background halaman */
  --ad-card:#ffffff;      /* kartu putih elegan */
  --ad-accent:#4f46e5;    /* indigo elegan */
  --ad-accent-2:#0ea5e9;  /* biru muda */
  --ad-text:#1e293b;      /* slate-800 */
  --ad-muted:#64748b;     /* slate-500 */
  --ad-border:#e2e8f0;    /* abu soft */
  --ad-danger:#dc2626;    /* merah */
  --ad-success:#16a34a;   /* hijau */
}

*{box-sizing:border-box}
body{background:var(--ad-bg);}

/* container */
.ad-wrap{
  max-width:920px;margin:32px auto;padding:24px;
  background:var(--ad-card);
  border:1px solid var(--ad-border);
  border-radius:18px;color:var(--ad-text);
  box-shadow:0 10px 30px rgba(0,0,0,.05);
}

/* heading */
.ad-title{margin:0 0 14px;font-size:28px;font-weight:700;color:var(--ad-accent);}
.ad-subtitle{margin:28px 0 10px;font-size:20px;color:var(--ad-muted)}
.ad-note{color:var(--ad-muted);margin-top:6px}

/* form */
.ad-form label{display:block;margin:.75rem 0 .3rem;color:#334155}
.ad-form input[type=text],
.ad-form input[type=email],
.ad-form input[type=password],
.ad-form textarea,
.ad-form select{
  width:100%;padding:12px 14px;border-radius:12px;
  border:1px solid var(--ad-border);
  background:#f8fafc;color:var(--ad-text);outline:none;
  transition:border .2s, box-shadow .2s;
}
.ad-form input:focus,
.ad-form textarea:focus,
.ad-form select:focus{
  border-color:var(--ad-accent-2);
  box-shadow:0 0 0 3px rgba(14,165,233,.25);
}
.ad-form textarea{resize:vertical}
.ad-form .ad-inline{display:inline-flex;align-items:center;gap:.5rem;margin:10px 0}

/* button */
.ad-btn{
  display:inline-block;margin-top:14px;padding:12px 18px;border-radius:12px;
  background:linear-gradient(90deg,var(--ad-accent),var(--ad-accent-2));
  color:white;text-decoration:none;font-weight:700;border:none;cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.08);transition:all .2s;
}
.ad-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}

/* alert & success */
.ad-alert,.ad-success{
  margin:10px 0;padding:12px 14px;border-radius:12px;font-weight:600
}
.ad-alert{
  background:#fee2e2;border:1px solid #fecaca;color:var(--ad-danger)
}
.ad-success{
  background:#dcfce7;border:1px solid #bbf7d0;color:var(--ad-success)
}

/* dashboard grid */
.ad-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:10px 0 18px}
.ad-card{
  background:#fdfdfd;border:1px solid var(--ad-border);
  border-radius:14px;padding:16px;text-align:center
}
.ad-metric{font-size:28px;font-weight:800;color:var(--ad-accent)}
.ad-label{color:var(--ad-muted)}
.ad-actions{margin:10px 0 8px}

/* table */
.ad-table{margin-top:10px}
.ad-tr{
  display:grid;grid-template-columns:4fr 1.5fr 2fr 2fr;
  gap:10px;align-items:center;padding:10px;
  border-bottom:1px solid var(--ad-border);background:#ffffff
}
.ad-tr-head{font-weight:700;background:#f1f5f9;border-radius:10px}
.ad-link{color:var(--ad-accent-2);font-weight:600}
.ad-link:hover{text-decoration:underline}
.ad-muted{color:var(--ad-muted)}

/* responsive */
@media (max-width:720px){
  .ad-grid{grid-template-columns:1fr}
  .ad-tr{grid-template-columns:1fr}
}