/* ================================================================
   Ilmu Sholat — main.css
   Design system lengkap: token, layout, komponen, Arab, print
   ================================================================ */

/* ── DESIGN TOKENS ─────────────────────────────────────────────── */
:root {
  /* Warna background */
  --bg:          #ffffff;
  --bg-2:        #f9fafb;
  --bg-3:        #f3f4f6;

  /* Warna teks */
  --txt-1:       #111827;
  --txt-2:       #4b5563;
  --txt-3:       #6b7280;

  /* Border */
  --bdr:         #e5e7eb;
  --bdr-light:   #f3f4f6;

  /* Aksen hijau Islam */
  --accent:      #1a5c38;
  --accent-2:    #22763f;
  --accent-bg:   #f0fdf4;
  --accent-bdr:  #86efac;

  /* Status warna */
  --info:        #1d4ed8;   --info-bg:    #eff6ff;   --info-bdr:   #bfdbfe;
  --success:     #15803d;   --success-bg: #f0fdf4;   --success-bdr:#86efac;
  --warning:     #b45309;   --warning-bg: #fffbeb;   --warning-bdr:#fcd34d;
  --danger:      #b91c1c;   --danger-bg:  #fef2f2;   --danger-bdr: #fca5a5;

  /* Tipografi */
  --font-ui:     'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-arabic: 'Amiri', 'Traditional Arabic', 'Scheherazade New', serif;

  /* Spacing */
  --sp-xs: 4px;   --sp-sm: 8px;   --sp-md: 14px;
  --sp-lg: 20px;  --sp-xl: 28px;  --sp-2xl: 40px;

  /* Radius */
  --r-sm: 6px;   --r-md: 10px;   --r-lg: 14px;   --r-xl: 20px;

  /* Lebar konten */
  --max-w: 860px;

  /* Shadow */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,.10);
}

/* ── RESET ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-ui);
  background: var(--bg-2);
  color: var(--txt-1);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
ul { list-style: none; }

/* ── LAYOUT ─────────────────────────────────────────────────────── */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--sp-lg);
}
.site-main {
  min-height: 70vh;
  padding: var(--sp-xl) 0 var(--sp-2xl);
}

/* ── HEADER ─────────────────────────────────────────────────────── */
.site-header {
  background: var(--accent);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.site-header__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--sp-lg);
  height: 60px;
  display: flex;
  align-items: center;
  gap: var(--sp-md);
}

/* Logo */
.site-logo {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  text-decoration: none;
  flex-shrink: 0;
  margin-right: auto;
}
.site-logo__ar {
  font-family: var(--font-arabic);
  font-size: 18px;
  color: #fff;
  letter-spacing: .02em;
}
.site-logo__id {
  font-size: 10px;
  color: rgba(255,255,255,.75);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
}

/* Nav */
.site-nav__list {
  display: flex;
  gap: var(--sp-xs);
  align-items: center;
}
.site-nav__list a {
  color: rgba(255,255,255,.88);
  font-size: 13px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: var(--r-sm);
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.site-nav__list a:hover { background: rgba(255,255,255,.15); color: #fff; text-decoration: none; }

/* Header action buttons */
.hdr-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,.85);
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
  flex-shrink: 0;
}
.hdr-btn:hover { background: rgba(255,255,255,.18); color: #fff; }

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  margin-left: auto;
}
.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .25s, opacity .25s;
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Search drawer */
.search-drawer {
  background: #155a33;
  padding: var(--sp-sm) var(--sp-lg);
}
.search-form {
  display: flex;
  gap: var(--sp-sm);
  align-items: center;
  max-width: var(--max-w);
  margin: 0 auto;
}
.search-form__input {
  flex: 1;
  padding: 9px 14px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: var(--r-md);
  background: rgba(255,255,255,.12);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 14px;
  outline: none;
}
.search-form__input::placeholder { color: rgba(255,255,255,.55); }
.search-form__input:focus { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.6); }
.search-form__btn {
  background: rgba(255,255,255,.2);
  border: none;
  color: #fff;
  padding: 9px 14px;
  border-radius: var(--r-md);
  cursor: pointer;
  display: flex;
  align-items: center;
}
.search-form__btn:hover { background: rgba(255,255,255,.3); }
.search-form--page { max-width: 520px; margin: 0 0 var(--sp-xl); }
.search-form--page .search-form__input {
  background: var(--bg); color: var(--txt-1); border-color: var(--bdr);
}
.search-form--page .search-form__input::placeholder { color: var(--txt-3); }

/* ── HERO ──────────────────────────────────────────────────────── */
.hero {
  text-align: center;
  padding: var(--sp-2xl) var(--sp-lg) var(--sp-xl);
}
.hero__title {
  font-size: clamp(22px, 5vw, 34px);
  font-weight: 700;
  color: var(--txt-1);
  margin-bottom: var(--sp-sm);
}
.hero__sub {
  font-size: clamp(14px, 3vw, 17px);
  color: var(--txt-2);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ── FILTER BAR ────────────────────────────────────────────────── */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
  margin-bottom: var(--sp-xl);
  padding-bottom: var(--sp-md);
  border-bottom: 1px solid var(--bdr);
}
.filter-btn {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: var(--r-xl);
  border: 1.5px solid var(--bdr);
  background: var(--bg);
  color: var(--txt-2);
  cursor: pointer;
  transition: all .15s;
  text-decoration: none;
  display: inline-block;
}
.filter-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); text-decoration: none; }
.filter-btn--active { background: var(--accent); border-color: var(--accent); color: #fff !important; }
.filter-btn--active:hover { background: var(--accent-2); }

/* ── GRID PANDUAN ──────────────────────────────────────────────── */
.panduan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sp-lg);
  margin-bottom: var(--sp-xl);
}
.panduan-card {
  background: var(--bg);
  border: 1px solid var(--bdr);
  border-radius: var(--r-lg);
  transition: box-shadow .2s, transform .2s, border-color .2s;
  overflow: hidden;
}
.panduan-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: var(--accent-bdr);
}
.panduan-card__link {
  display: flex;
  flex-direction: column;
  padding: var(--sp-lg);
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.panduan-card__cat {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--accent);
  background: var(--accent-bg);
  padding: 3px 8px;
  border-radius: var(--r-sm);
  margin-bottom: var(--sp-sm);
}
.panduan-card__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--txt-1);
  margin-bottom: var(--sp-sm);
  line-height: 1.4;
  flex: 1;
}
.panduan-card__excerpt {
  font-size: 13px;
  color: var(--txt-3);
  line-height: 1.6;
  margin-bottom: var(--sp-md);
}
.panduan-card__cta {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  margin-top: auto;
}

/* ── ARCHIVE HEADER ────────────────────────────────────────────── */
.archive-header {
  margin-bottom: var(--sp-xl);
  padding-bottom: var(--sp-md);
  border-bottom: 1px solid var(--bdr);
}
.archive-header__pre {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--accent);
  margin-bottom: 4px;
}
.archive-header__title { font-size: clamp(22px, 5vw, 30px); font-weight: 700; margin-bottom: 6px; }
.archive-header__desc { color: var(--txt-2); font-size: 15px; }

/* ── BREADCRUMB ─────────────────────────────────────────────────── */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--txt-3);
  margin-bottom: var(--sp-lg);
}
.breadcrumb a { color: var(--accent); }
.bc-sep { color: var(--txt-3); }

/* ── SINGLE PANDUAN ─────────────────────────────────────────────── */
.panduan-header { margin-bottom: var(--sp-xl); }
.panduan-header__cat {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--accent);
  background: var(--accent-bg);
  padding: 3px 10px;
  border-radius: var(--r-sm);
  margin-bottom: var(--sp-md);
  text-decoration: none;
}
.panduan-header__title {
  font-size: clamp(24px, 5vw, 34px);
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: var(--sp-sm);
}
.panduan-header__excerpt { font-size: 16px; color: var(--txt-2); line-height: 1.7; }

/* ── INFO BOXES ─────────────────────────────────────────────────── */
.info-box {
  border-radius: var(--r-md);
  padding: 12px var(--sp-md);
  margin-bottom: var(--sp-lg);
  font-size: 13px;
  line-height: 1.7;
}
.info-box--blue  { background: var(--info-bg);    border: 1px solid var(--info-bdr);    color: var(--info); }
.info-box--green { background: var(--success-bg); border: 1px solid var(--success-bdr); color: var(--success); }
.info-box--yellow{ background: var(--warning-bg); border: 1px solid var(--warning-bdr); color: var(--warning); }

/* ── KARTU KONTEN ───────────────────────────────────────────────── */
.panduan-item-card {
  background: var(--bg);
  border: 1px solid var(--bdr);
  border-radius: var(--r-lg);
  padding: var(--sp-lg);
  margin-bottom: var(--sp-md);
}
.pic-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-sm);
  margin-bottom: var(--sp-md);
}
.pic-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--txt-1);
}

/* Badges */
.badge {
  display: inline-block;
  font-size: 11px;
  padding: 3px 9px;
  border-radius: var(--r-xl);
  font-weight: 700;
  letter-spacing: .04em;
}
.badge--default { background: var(--bg-3); color: var(--txt-2); border: 1px solid var(--bdr); }
.badge--success { background: var(--success-bg); color: var(--success); }
.badge--info    { background: var(--info-bg);    color: var(--info); }
.badge--warning { background: var(--warning-bg); color: var(--warning); }
.badge--danger  { background: var(--danger-bg);  color: var(--danger); }

/* Variant block */
.variant-block {
  padding-bottom: var(--sp-md);
  margin-bottom: var(--sp-md);
  border-bottom: 1px solid var(--bdr-light);
}
.variant-block:last-of-type { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.variant-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--txt-3);
  margin-bottom: var(--sp-sm);
}

/* Arab / Latin / Terjemah */
.alt-arabic {
  font-family: var(--font-arabic);
  font-size: clamp(20px, 5vw, 24px);
  line-height: 2.4;
  direction: rtl;
  text-align: right;
  color: var(--txt-1);
  margin-bottom: 6px;
  word-break: break-word;
}
.alt-latin {
  font-size: 13px;
  color: var(--txt-2);
  font-style: italic;
  line-height: 1.9;
  margin-bottom: 4px;
}
.alt-terjemah {
  font-size: 13px;
  color: var(--txt-3);
  line-height: 1.8;
}

/* Dalil box */
.dalil-box {
  background: var(--bg-2);
  border-radius: var(--r-md);
  padding: 10px var(--sp-md);
  margin-top: var(--sp-md);
  font-size: 13px;
  color: var(--txt-2);
  line-height: 1.7;
}
.dalil-box__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--txt-3);
  margin-bottom: 4px;
}

/* Catatan box */
.catatan-box {
  border-left: 3px solid var(--bdr);
  padding: 6px 10px;
  font-size: 12px;
  color: var(--txt-3);
  line-height: 1.6;
  margin-top: var(--sp-sm);
}

/* No content */
.no-content-notice {
  background: var(--bg-2);
  border: 1px dashed var(--bdr);
  border-radius: var(--r-lg);
  padding: var(--sp-2xl);
  text-align: center;
  color: var(--txt-3);
  font-size: 14px;
}

/* ── POST NAV ───────────────────────────────────────────────────── */
.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-md);
  margin-top: var(--sp-2xl);
  padding-top: var(--sp-xl);
  border-top: 1px solid var(--bdr);
}
.post-nav__link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--sp-md);
  background: var(--bg);
  border: 1px solid var(--bdr);
  border-radius: var(--r-lg);
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s;
}
.post-nav__link:hover { border-color: var(--accent-bdr); box-shadow: var(--shadow-sm); text-decoration: none; }
.post-nav__link--next { text-align: right; }
.post-nav__dir { font-size: 12px; color: var(--txt-3); font-weight: 600; }
.post-nav__title { font-size: 14px; font-weight: 700; color: var(--txt-1); line-height: 1.4; }

/* ── PAGINATION ─────────────────────────────────────────────────── */
.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
  justify-content: center;
  margin-top: var(--sp-xl);
}
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--bdr);
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 600;
  color: var(--txt-2);
  text-decoration: none;
  background: var(--bg);
  transition: all .15s;
}
.pagination .page-numbers:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.pagination .page-numbers.current { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ── BUTTONS ────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: var(--r-md);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: all .15s;
}
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-2); text-decoration: none; color: #fff; }
.btn--secondary { background: var(--bg); border: 1.5px solid var(--bdr); color: var(--txt-2); }
.btn--secondary:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

/* ── NO RESULTS ─────────────────────────────────────────────────── */
.no-results {
  text-align: center;
  padding: var(--sp-2xl) var(--sp-lg);
  color: var(--txt-3);
}
.no-results__icon { font-size: 48px; margin-bottom: var(--sp-md); }
.no-results p { font-size: 15px; margin-bottom: var(--sp-lg); }

/* ── ERROR 404 ──────────────────────────────────────────────────── */
.error-404 {
  text-align: center;
  padding: var(--sp-2xl) var(--sp-lg);
}
.error-404__icon { font-size: 64px; margin-bottom: var(--sp-lg); }
.error-404__title { font-size: 28px; font-weight: 700; margin-bottom: var(--sp-md); }

/* ── FOOTER ─────────────────────────────────────────────────────── */
.site-footer {
  background: var(--txt-1);
  color: rgba(255,255,255,.65);
  padding: var(--sp-xl) 0;
  margin-top: var(--sp-2xl);
}
.site-footer__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--sp-lg);
  text-align: center;
}
.site-footer__name { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 6px; }
.site-footer__note { font-size: 12px; line-height: 1.7; }
.site-footer__note a { color: rgba(255,255,255,.7); }
.site-footer__note a:hover { color: #fff; }

/* ── PAGE CONTENT ───────────────────────────────────────────────── */
.page-title { font-size: 28px; font-weight: 700; margin-bottom: var(--sp-xl); }
.page-body { font-size: 15px; line-height: 1.8; color: var(--txt-2); }
.page-body h2 { font-size: 20px; margin: var(--sp-xl) 0 var(--sp-md); color: var(--txt-1); }
.page-body p { margin-bottom: var(--sp-md); }

/* ── RESPONSIVE ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
  :root { --sp-lg: 14px; --sp-xl: 20px; --sp-2xl: 28px; }

  .site-header__inner { height: 54px; }
  .site-logo__ar { font-size: 16px; }

  /* Mobile nav */
  .hamburger { display: flex; }
  .site-nav {
    display: none;
    position: absolute;
    top: 54px;
    left: 0;
    right: 0;
    background: #144d2f;
    padding: var(--sp-md) var(--sp-lg);
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
  }
  .site-nav.is-open { display: block; }
  .site-nav__list { flex-direction: column; gap: 2px; }
  .site-nav__list a { font-size: 15px; padding: 10px 12px; border-radius: var(--r-md); display: block; }

  .panduan-grid { grid-template-columns: 1fr; gap: var(--sp-md); }
  .post-nav { grid-template-columns: 1fr; }

  .alt-arabic { font-size: 20px; line-height: 2.2; }

  .filter-btn { font-size: 12px; padding: 6px 12px; }

  .panduan-item-card { padding: var(--sp-md); }
}

@media (min-width: 641px) and (max-width: 900px) {
  .panduan-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── PRINT ──────────────────────────────────────────────────────── */
@media print {
  .site-header, .site-footer, .filter-bar, .filter-bar,
  .breadcrumb, .post-nav, .pagination,
  .btn-print, .btn-search-toggle, .hamburger,
  .search-drawer, .hero, .no-results { display: none !important; }

  body { font-size: 12pt; color: #000; background: #fff; }
  .site-main { padding: 0; min-height: auto; }
  .container { max-width: 100%; padding: 0; }

  .panduan-header__title { font-size: 20pt; margin-bottom: 8pt; }
  .panduan-item-card {
    border: 1pt solid #ccc;
    border-radius: 4pt;
    padding: 10pt;
    margin-bottom: 8pt;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .alt-arabic { font-size: 18pt; line-height: 2; }
  .alt-latin  { font-size: 10pt; }
  .alt-terjemah { font-size: 10pt; }
  .badge { border: 1pt solid #999; }
  .dalil-box { background: #f5f5f5; border: 1pt solid #ddd; }
  a::after { content: none !important; }
  @page { margin: 1.5cm; }
}