/* ============ css_oke.css — aurora + glassmorphism (mobile-first) ============ */

/* Base reset */
* { box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  line-height: 1.55;
  color: #0f172a; /* slate-900 */
  background: #0b1220;
}

/* Aurora BG */
.bg-aurora {
  --aurora-1: rgba(59,130,246,0.25);   /* blue */
  --aurora-2: rgba(99,102,241,0.18);   /* indigo */
  --aurora-3: rgba(236,72,153,0.12);   /* pink */
  background:
    radial-gradient(60vw 40vh at 20% -10%, var(--aurora-1), transparent 60%),
    radial-gradient(50vw 45vh at 90% 0%, var(--aurora-2), transparent 60%),
    radial-gradient(60vw 40vh at 40% 110%, var(--aurora-3), transparent 60%),
    #0b1220;
  background-attachment: fixed;
}

/* Container */
.container {
  width: 100%;
  max-width: 1100px;
  margin: 80px auto 32px; /* header sticky offset */
  padding: 0 16px;
}

/* Headings */
.title {
  margin: 0 0 16px;
  font-size: clamp(22px, 4.2vw, 32px);
  font-weight: 800;
  letter-spacing: 0.2px;
  color: #e5e7eb; /* gray-200 */
  text-shadow: 0 1px 0 rgba(0,0,0,.2);
}

/* Glass + Cards */
.glass {
  --glass-bg: rgba(255,255,255,0.07);
  --glass-br: 14px;
  --glass-bd: 1px solid rgba(255,255,255,0.12);
  --glass-blur: saturate(140%) blur(8px);
  background: var(--glass-bg);
  border: var(--glass-bd);
  border-radius: var(--glass-br);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

.card {
  padding: 16px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
  border-color: rgba(255,255,255,0.18);
}
.card h3 {
  margin: 0 0 8px;
  color: #f1f5f9; /* slate-100 */
  font-weight: 700;
  font-size: 16px;
}
.card p { margin: 0 0 6px; color: #cbd5e1; }
.price {
  font-size: clamp(20px, 5vw, 28px);
  font-weight: 800;
  color: #e2e8f0;
}

/* Grid (mobile-first) */
.grid {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr; /* phones */
}
@media (min-width: 640px) { /* tablets */
  .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) { /* desktop */
  .grid { grid-template-columns: repeat(3, 1fr); }
}

/* Header / Nav */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  margin: 0;
  border-radius: 0 0 16px 16px;
}
.brand {
  font-weight: 800;
  font-size: 16px;
  color: #f8fafc;
  letter-spacing: .2px;
}
.nav .btn {
  margin-left: 8px;
}

/* Buttons */
.btn {
  --btn-bg: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  --btn-bd: 1px solid rgba(255,255,255,.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  min-height: 40px;            /* touch target */
  border-radius: 12px;
  border: var(--btn-bd);
  background: var(--btn-bg);
  color: #e5e7eb;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: .2px;
  transition: transform .06s ease, filter .2s ease, box-shadow .2s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 4px 12px rgba(0,0,0,.25);
  -webkit-tap-highlight-color: transparent;
}
.btn:active {
  transform: scale(.98);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 2px 8px rgba(0,0,0,.25);
}
.btn:hover { filter: brightness(1.08); }

/* Utility spacing on the Menu buttons wrap */
.card .btn { margin-bottom: 6px; }

/* Links inside cards */
.card a { color: #93c5fd; }
.card a:hover { text-decoration: underline; }

/* Responsive tweaks: make two KPI cards span full width on small screens for readability */
@media (max-width: 380px) {
  .brand { font-size: 15px; }
  .btn { padding: 9px 12px; min-height: 38px; font-size: 14px; }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .btn, .card { transition: none; }
}

/* Dark-mode friendly text colors (just in case) */
@media (prefers-color-scheme: dark) {
  body { color: #e5e7eb; }
  .card p { color: #cbd5e1; }
}

/* Tables (if any in other admin pages) */
.table {
  width: 100%;
  border-collapse: collapse;
  background: rgba(255,255,255,.03);
  border-radius: 12px;
  overflow: hidden;
}
.table th, .table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: #e2e8f0;
  text-align: left;
  white-space: nowrap;
}
.table th { font-weight: 700; font-size: 14px; }
.table tr:hover { background: rgba(255,255,255,.04); }
.table td:last-child, .table th:last-child { text-align: right; }
@media (max-width: 640px) {
  .table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Forms (for other admin pages) */
.input, select, textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: #f1f5f9;
  outline: none;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.input:focus, select:focus, textarea:focus {
  border-color: rgba(147,197,253,.6);
  box-shadow: 0 0 0 3px rgba(59,130,246,.25);
}
.label {
  display: block;
  margin: 10px 0 6px;
  font-weight: 600;
  color: #e5e7eb;
  font-size: 14px;
}
.help {
  font-size: 12px;
  color: #cbd5e1;
  opacity: .9;
}

/* Footer (if needed later) */
.footer {
  margin: 24px auto;
  max-width: 1100px;
  padding: 0 16px 24px;
  color: #94a3b8;
  font-size: 13px;
  text-align: center;
}

/* ===== ARTICLE / SEO READABILITY (Global) ===== */
.article-body{
  font-size: 18px;              /* nyaman dibaca */
  line-height: 1.65;            /* spasi paragraf lega */
  color: #e5e7eb;               /* kontras di dark */
  word-wrap: break-word;
}

/* Paragraf & enter */
.article-body p{ margin: 0 0 18px; }
.article-body br{ display:block; content:""; margin-bottom:10px; }

/* Heading hierarchy (pakai H1 sekali per halaman) */
.article-body h1,
.article-body h2,
.article-body h3,
.article-body h4{
  font-weight: 700;
  line-height: 1.3;
  color: #f1f5f9;
  margin: 22px 0 12px;
}
.article-body h1{ font-size: 26px; }
.article-body h2{ font-size: 22px; }
.article-body h3{ font-size: 19px; }
.article-body h4{ font-size: 17px; }

/* List rapi */
.article-body ul,
.article-body ol{ margin: 0 0 18px; padding-left: 1.4em; }
.article-body li{ margin: 6px 0; }

/* Figure, Image, Caption */
.article-body figure{ margin: 0 0 18px; }
.article-body img{
  display:block;
  width:100%;           /* full width container */
  height:auto;
  border-radius:12px;
  margin:6px 0;
}
.article-body figcaption{
  font-size:14px;
  color:#94a3b8;
  text-align:center;
  margin-top:6px;
}

/* Kutipan (hadis/ayat) */
.article-body blockquote{
  margin:12px 0 18px;
  padding:12px 16px;
  border-left:4px solid #60a5fa;
  background:rgba(255,255,255,.05);
  border-radius:8px;
  color:#f1f5f9;
  font-style:italic;
}

/* Link di dalam artikel */
.article-body a{ color:#93c5fd; text-decoration:underline; }
.article-body a:hover{ color:#bfdbfe; }

/* Strong & Emphasis */
.article-body strong{ color:#fef08a; font-weight:700; }
.article-body em{ color:#fcd34d; font-style:italic; }

/* Video / Iframe responsif */
.article-body iframe,
.article-body video{
  display:block;
  width:100%;
  max-width:100%;
  aspect-ratio:16/9;
  height:auto;
  border:0;
  border-radius:12px;
  margin:12px 0;
  background:#0b1220;
}

/* Tabel responsif khusus artikel (biar gak bentrok .table admin) */
.article-body table{
  width:100%;
  border-collapse:collapse;
  margin:16px 0;
  font-size:16px;
  background:rgba(255,255,255,.03);
  border-radius:10px;
  overflow:hidden;
}
.article-body th,
.article-body td{
  border:1px solid rgba(255,255,255,.15);
  padding:10px 12px;
  text-align:left;
  color:#e2e8f0;
}
.article-body th{
  background:rgba(255,255,255,.08);
  font-weight:600;
}

/* CTA box opsional */
.article-body .cta-box{
  margin:16px 0 20px;
  padding:14px 16px;
  border-radius:12px;
  background:linear-gradient(180deg, rgba(59,130,246,.10), rgba(99,102,241,.08));
  border:1px solid rgba(147,197,253,.28);
}

/* Mobile fine-tune */
@media (max-width:480px){
  .article-body{ font-size:17px; line-height:1.6; }
  .article-body h1{ font-size:24px; }
  .article-body h2{ font-size:21px; }
  .article-body h3{ font-size:18px; }
}