/* ════════════════════════════════════════════════
   YEMENPEDIA — Light White Theme
   Primary: #a68d66 | Background: #ffffff
   ════════════════════════════════════════════════ */

:root {
  --gold:    #a68d66;
  --gold-lt: #c4aa82;
  --gold-dk: #876f4e;
  --gold-glow: rgba(166,141,102,.2);

  /* Renamed "dark" variables now map to light equivalents */
  --dark-0:  #f8f5f0;
  --dark-1:  #ffffff;
  --dark-2:  #f5f1ec;
  --dark-3:  #ede7de;
  --dark-4:  #e4ddd3;
  --dark-5:  #d8d0c4;
  --dark-6:  #ccc3b5;
  --dark-card: #faf7f3;
  --dark-hover: #f0ebe3;

  --text-1:  #1a1208;
  --text-2:  #3d3020;
  --text-3:  #7a6a54;
  --text-4:  #a0907a;

  --brd:     rgba(166,141,102,.3);
  --brd-lt:  rgba(166,141,102,.15);

  --g-gold:  linear-gradient(135deg, #876f4e 0%, #a68d66 55%, #c4aa82 100%);
  --g-dark:  linear-gradient(180deg, #ffffff 0%, #f5f1ec 100%);
  --g-card:  linear-gradient(180deg, #faf7f3 0%, #f5f1ec 100%);

  --s1: 0 2px 8px rgba(166,141,102,.12);
  --s2: 0 6px 24px rgba(166,141,102,.18);
  --s3: 0 12px 40px rgba(166,141,102,.22);
  --ease: cubic-bezier(.25,.46,.45,.94);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth }
body {
  font-family: 'Cairo','Tajawal', sans-serif;
  color: var(--text-1);
  background: var(--dark-1);
  direction: rtl;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width:100%; height:auto; display:block }
a { text-decoration:none; color:inherit }
ul { list-style:none }
button { cursor:pointer; border:none; background:none; font-family:inherit }

/* ── MUSNAD STRIP ── */
.musnad-strip {
  position:relative; width:100%; height:44px;
  background: linear-gradient(90deg, var(--dark-1), var(--dark-4), var(--dark-1));
  border-bottom: 1px solid var(--brd);
  overflow:hidden; display:flex; align-items:center;
}
.musnad-strip::before {
  content:''; position:absolute; top:0; bottom:0; right:0;
  width:80px; z-index:2; pointer-events:none;
  background: linear-gradient(to left, var(--dark-1), transparent);
}
.musnad-strip::after {
  content:''; position:absolute; top:0; bottom:0; left:0;
  width:80px; z-index:2; pointer-events:none;
  background: linear-gradient(to right, var(--dark-1), transparent);
}
.musnad-track {
  display:flex; align-items:center;
  animation: msScroll 50s linear infinite; white-space:nowrap;
}
.musnad-glyph {
  font-family:'Amiri',serif; font-size:20px;
  color: rgba(166,141,102,.3); letter-spacing:10px;
  padding:0 30px; user-select:none; line-height:1;
}
.musnad-dot { color:rgba(166,141,102,.4); font-size:8px; padding:0 16px }
@keyframes msScroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* ── TOPBAR ── */
.topbar {
  background: var(--dark-2);
  border-bottom: 1px solid var(--brd-lt);
  height:38px; display:flex; align-items:center;
  position:relative; z-index:100;
}
.topbar-inner {
  max-width:1280px; margin:0 auto; padding:0 24px;
  width:100%; display:flex; justify-content:space-between; align-items:center;
}
.topbar-date { font-size:.76rem; color:var(--text-3); font-family:'Tajawal',sans-serif }
.support-btn {
  display:inline-flex; align-items:center; gap:6px;
  background: var(--g-gold);
  color:#fff; padding:4px 14px; border-radius:4px;
  font-size:.74rem; font-weight:700; transition:opacity .2s;
  box-shadow: 0 1px 6px var(--gold-glow);
}
.support-btn:hover { opacity:.88 }

/* ── HEADER ── */
.site-header {
  position:sticky; top:0; z-index:200;
  background: var(--dark-2);
  border-bottom: 2px solid var(--gold);
  height:70px; display:flex; align-items:center;
  box-shadow: 0 2px 20px rgba(0,0,0,.5);
  transition: box-shadow .25s;
}
.site-header.scrolled { box-shadow: 0 4px 30px rgba(0,0,0,.7) }
.header-inner {
  max-width:1280px; margin:0 auto; padding:0 24px;
  display:flex; align-items:center; gap:16px; width:100%;
}

/* Logo using uploaded image */
.site-logo {
  display:flex; align-items:center; flex-shrink:0;
  transition:opacity .2s;
}
.site-logo:hover { opacity:.88 }
.logo-img {
  height:48px; width:auto; max-width:200px;
  object-fit:contain; filter:brightness(1.05);
}

/* Desktop Search in header */
.header-search {
  flex:1; max-width:520px; margin:0 auto;
  display:flex; align-items:center;
  background: var(--dark-4); border:1px solid var(--brd);
  border-radius:8px; overflow:hidden;
  transition: border-color .2s, box-shadow .2s;
}
.header-search:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-glow);
}
.header-search input {
  flex:1; background:none; border:none; outline:none;
  padding:10px 16px; color:var(--text-1); font-size:.9rem;
  font-family:'Cairo',sans-serif; direction:rtl;
}
.header-search input::placeholder { color:var(--text-3) }
.header-search button {
  padding:10px 16px; color:var(--gold);
  background: var(--dark-5); border-right:1px solid var(--brd);
  transition: background .2s;
}
.header-search button:hover { background:var(--dark-6) }

/* Desktop Nav */
.main-nav { display:flex; align-items:center }
.nav-list { display:flex; align-items:center; gap:4px }
.nav-link {
  padding:8px 14px; border-radius:6px;
  color:var(--text-2); font-size:.88rem; font-weight:600;
  transition: color .2s, background .2s;
  display:flex; align-items:center; gap:5px;
}
.nav-link:hover { color:var(--gold); background:var(--brd-lt) }
.nav-link.active { color:var(--gold) }

/* Dropdown */
.has-dropdown { position:relative }
.dropdown-menu {
  position:absolute; top:calc(100% + 8px); right:0;
  background:var(--dark-3); border:1px solid var(--brd);
  border-radius:10px; min-width:280px;
  padding:12px; box-shadow:var(--s3);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition: all .2s var(--ease); z-index:300;
}
.has-dropdown:hover .dropdown-menu { opacity:1; visibility:visible; transform:translateY(0) }
.dropdown-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px }
.dropdown-item {
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:8px;
  color:var(--text-2); font-size:.85rem;
  transition: background .2s, color .2s;
}
.dropdown-item:hover { background:var(--dark-5); color:var(--gold) }
.di-icon { font-size:1.2rem }
.di-name { flex:1; font-weight:600 }
.di-count {
  font-size:.74rem; color:var(--text-3);
  background:var(--dark-5); padding:2px 7px; border-radius:10px;
}

/* Mobile toggle */
.mobile-menu-btn {
  display:none; flex-direction:column; gap:5px;
  padding:8px; border-radius:6px; margin-right:auto;
  transition:background .2s;
}
.mobile-menu-btn:hover { background:var(--brd-lt) }
.hamburger-line {
  width:22px; height:2px; background:var(--text-1);
  display:block; border-radius:2px; transition:all .3s;
}

/* Mobile nav */
.mobile-nav {
  display:none; position:fixed; inset:0; z-index:500;
  background:rgba(10,25,24,.97); backdrop-filter:blur(10px);
  overflow-y:auto; padding:80px 0 40px;
  transform:translateX(100%); transition:transform .35s var(--ease);
}
.mobile-nav.open { transform:translateX(0) }
.mobile-close-btn {
  position:fixed; top:20px; left:20px;
  width:40px; height:40px; border-radius:50%;
  background:var(--dark-5); color:var(--text-1);
  font-size:1.4rem; display:flex; align-items:center; justify-content:center;
  z-index:501; transition:background .2s;
}
.mobile-close-btn:hover { background:var(--gold); color:var(--dark-1) }
.mobile-nav-inner { max-width:340px; margin:0 auto; padding:0 24px }
.mobile-search {
  display:flex; gap:8px; margin-bottom:24px;
}
.mobile-search input {
  flex:1; background:var(--dark-4); border:1px solid var(--brd);
  border-radius:8px; padding:10px 14px; color:var(--text-1);
  font-family:'Cairo',sans-serif; outline:none; font-size:.9rem;
}
.mobile-search input:focus { border-color:var(--gold) }
.mobile-search button {
  background:var(--g-gold); color:#fff; padding:10px 16px;
  border-radius:8px; font-family:'Cairo',sans-serif; font-weight:700;
  font-size:.85rem;
}
.mobile-nav-link {
  display:block; padding:14px 0; color:var(--text-2);
  font-size:1rem; font-weight:600; border-bottom:1px solid var(--brd-lt);
  transition:color .2s, padding .2s;
}
.mobile-nav-link:hover { color:var(--gold); padding-right:8px }
.mobile-cats-label {
  padding:16px 0 8px; color:var(--text-3);
  font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:1px;
}
.mobile-cat-link { font-size:.9rem; padding:11px 0 }
.mobile-support-btn {
  display:block; margin-top:20px; padding:13px;
  background:var(--g-gold); color:#fff; text-align:center;
  border-radius:10px; font-weight:700; font-size:.9rem;
}

/* ── CONTAINER ── */
.container { max-width:1280px; margin:0 auto; padding:0 24px }

/* ── HERO ── */
.hero-section {
  background: var(--g-dark);
  padding:72px 24px 56px; text-align:center;
  position:relative; overflow:hidden;
  border-bottom: 1px solid var(--brd);
}
.hero-section::before {
  content:''; position:absolute; inset:0;
  background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(166,141,102,.08) 0%, transparent 70%);
  pointer-events:none;
}
.hero-logo-wrap {
  margin-bottom:28px; display:flex; justify-content:center;
}
.hero-logo-img {
  height:80px; width:auto; max-width:320px;
  object-fit:contain; filter:drop-shadow(0 4px 20px rgba(166,141,102,.3));
}
.hero-title {
  font-size:2.8rem; font-weight:800; color:var(--gold);
  font-family:'Amiri',serif; margin-bottom:10px;
  text-shadow: 0 2px 20px var(--gold-glow);
  display:none; /* Hide if logo shown */
}
.hero-subtitle {
  font-size:1rem; color:var(--text-2); margin-bottom:32px;
  max-width:560px; margin-left:auto; margin-right:auto;
  line-height:1.7;
}
.hero-search {
  max-width:640px; margin:0 auto 28px;
}
.hero-search .search-wrapper {
  display:flex; background:var(--dark-4);
  border:2px solid var(--brd); border-radius:50px;
  overflow:hidden; transition: border-color .2s, box-shadow .2s;
}
.hero-search .search-wrapper:focus-within {
  border-color:var(--gold); box-shadow:0 0 0 4px var(--gold-glow);
}
.hero-search input {
  flex:1; background:none; border:none; outline:none;
  padding:14px 22px; color:var(--text-1);
  font-size:1rem; font-family:'Cairo',sans-serif; direction:rtl;
}
.hero-search input::placeholder { color:var(--text-3) }
.hero-search button {
  background:var(--g-gold); color:#fff; border:none;
  padding:12px 24px; font-size:.9rem; font-weight:700;
  font-family:'Cairo',sans-serif; cursor:pointer;
  transition:opacity .2s; display:flex; align-items:center; gap:8px;
}
.hero-search button:hover { opacity:.9 }

/* Category pills in hero */
.hero-cats {
  display:flex; flex-wrap:wrap; gap:10px;
  justify-content:center; margin-top:4px;
}
.hero-cat-pill {
  padding:8px 18px; border-radius:50px;
  background:var(--dark-4); border:1px solid var(--brd);
  color:var(--text-2); font-size:.85rem; font-weight:600;
  transition: all .2s; display:flex; align-items:center; gap:6px;
}
.hero-cat-pill:hover {
  background:var(--gold); border-color:var(--gold);
  color:var(--dark-1); transform:translateY(-2px);
}

/* Stats */
.hero-stats {
  display:flex; align-items:center; justify-content:center;
  gap:0; margin-bottom:28px; flex-wrap:wrap;
}
.stat-item { padding:0 24px; text-align:center }
.stat-number {
  display:block; font-size:1.6rem; font-weight:800;
  color:var(--gold); font-family:'Cairo',sans-serif;
}
.stat-label { font-size:.78rem; color:var(--text-3); margin-top:2px; display:block }
.stat-divider { width:1px; height:36px; background:var(--brd) }

/* ── CATEGORIES NAV BAR ── */
.categories-nav {
  background:var(--dark-2); border-bottom:1px solid var(--brd);
  padding:0; overflow:hidden; position:sticky; top:70px; z-index:150;
}
.cat-scroll {
  display:flex; gap:4px; overflow-x:auto; padding:10px 0;
  scrollbar-width:none; -ms-overflow-style:none;
}
.cat-scroll::-webkit-scrollbar { display:none }
.cat-pill {
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 18px; border-radius:50px; white-space:nowrap;
  color:var(--text-2); font-size:.83rem; font-weight:600;
  border:1px solid var(--brd-lt); transition:all .2s;
  flex-shrink:0;
}
.cat-pill:hover { background:var(--dark-5); color:var(--gold); border-color:var(--brd) }
.cat-pill.active { background:var(--gold); color:var(--dark-1); border-color:var(--gold); font-weight:700 }
.cat-icon { font-size:1rem }

/* ── SECTION ── */
.section { padding:52px 0 }
.section-header {
  display:flex; align-items:center; gap:14px; margin-bottom:28px;
}
.section-label {
  font-size:.74rem; font-weight:700; color:var(--gold);
  text-transform:uppercase; letter-spacing:1.5px;
  padding:4px 12px; background:var(--gold-glow); border-radius:4px;
  white-space:nowrap;
}
.section-title {
  font-size:1.4rem; font-weight:800; color:var(--text-1);
  flex:1;
}
.section-line { flex:1; height:1px; background:var(--brd-lt) }
.section-more {
  font-size:.82rem; color:var(--gold); font-weight:600;
  padding:6px 14px; border:1px solid var(--brd); border-radius:6px;
  transition:all .2s; white-space:nowrap;
}
.section-more:hover { background:var(--gold); color:var(--dark-1) }

/* ── SUGGESTION CARDS (Saudipedia style colored cards) ── */
.suggestion-section { padding:40px 0 }
.suggestion-grid {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;
}
.suggestion-card {
  border-radius:14px; padding:24px 20px;
  display:flex; align-items:center; gap:14px;
  transition:transform .2s, box-shadow .2s; cursor:pointer;
  border:1px solid transparent;
}
.suggestion-card:hover { transform:translateY(-3px); box-shadow:var(--s2); border-color:rgba(255,255,255,.1) }
.suggestion-card.clr-1 { background:linear-gradient(135deg, #a68d66, #7a6344) }
.suggestion-card.clr-2 { background:linear-gradient(135deg, #8c7455, #614f38) }
.suggestion-card.clr-3 { background:linear-gradient(135deg, #b89c72, #8a6f48) }
.suggestion-card.clr-4 { background:linear-gradient(135deg, #7a6344, #52412c) }
.suggestion-card.clr-5 { background:linear-gradient(135deg, #c4aa82, #96784f) }
.suggestion-card.clr-6 { background:linear-gradient(135deg, #967852, #6b5538) }
.sg-icon {
  width:52px; height:52px; border-radius:12px;
  background:rgba(255,255,255,.1); display:flex; align-items:center;
  justify-content:center; font-size:1.6rem; flex-shrink:0;
}
.sg-body { flex:1 }
.sg-title { font-size:.95rem; font-weight:700; color:#fff; margin-bottom:4px; text-shadow:0 1px 4px rgba(0,0,0,.25) }
.sg-desc { font-size:.8rem; color:rgba(255,255,255,.82); line-height:1.5 }
.sg-arrow { color:rgba(255,255,255,.7); transition:transform .2s }
.suggestion-card:hover { border-color:rgba(255,255,255,.25) }
.suggestion-card:hover .sg-arrow { transform:translateX(-4px); color:#fff }

/* ── FEATURED GRID ── */
.featured-grid {
  display:grid; grid-template-columns:2fr 1fr;
  grid-template-rows:auto auto; gap:16px;
}
.featured-hero {
  grid-row:1 / 3; border-radius:14px; overflow:hidden;
  background:var(--dark-card); border:1px solid var(--brd-lt);
  transition:transform .2s, box-shadow .2s; display:flex; flex-direction:column;
}
.featured-hero:hover { transform:translateY(-3px); box-shadow:var(--s2) }
.featured-side {
  border-radius:14px; overflow:hidden;
  background:var(--dark-card); border:1px solid var(--brd-lt);
  transition:transform .2s, box-shadow .2s; display:flex; flex-direction:column;
}
.featured-side:hover { transform:translateY(-3px); box-shadow:var(--s2) }

/* Article card image */
.article-image-wrap {
  overflow:hidden; background:var(--dark-5);
  position:relative;
}
.featured-hero .article-image-wrap { height:260px }
.featured-side .article-image-wrap { height:140px }
.article-image-wrap img {
  width:100%; height:100%; object-fit:cover;
  transition:transform .4s var(--ease);
}
article:hover .article-image-wrap img { transform:scale(1.04) }
.article-no-image {
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  font-size:2.5rem; opacity:.4;
}
.featured-hero .article-no-image { font-size:3.5rem }

/* Article card body */
.article-body { padding:20px; flex:1; display:flex; flex-direction:column }
.featured-hero .article-body { padding:24px }
.article-cat-badge {
  display:inline-flex; align-items:center; gap:5px;
  font-size:.72rem; font-weight:700; color:var(--gold);
  background:var(--gold-glow); padding:3px 10px; border-radius:4px;
  margin-bottom:10px;
}
.article-title {
  font-size:1.05rem; font-weight:700; color:var(--text-1);
  line-height:1.5; margin-bottom:8px;
  transition:color .2s;
}
.featured-hero .article-title { font-size:1.3rem; margin-bottom:12px }
article:hover .article-title { color:var(--gold) }
.article-excerpt {
  font-size:.85rem; color:var(--text-3); line-height:1.7;
  flex:1; margin-bottom:12px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.featured-hero .article-excerpt { -webkit-line-clamp:4 }
.article-meta {
  display:flex; align-items:center; gap:12px;
  font-size:.76rem; color:var(--text-4); padding-top:12px;
  border-top:1px solid var(--brd-lt);
}
.article-meta span { display:flex; align-items:center; gap:4px }
.article-link { display:contents; color:inherit }

/* ── ARTICLE GRID (recent) ── */
.article-grid {
  display:grid; grid-template-columns:repeat(4, 1fr); gap:16px;
}
.article-card {
  border-radius:12px; overflow:hidden;
  background:var(--dark-card); border:1px solid var(--brd-lt);
  transition:transform .2s, box-shadow .2s; display:flex; flex-direction:column;
}
.article-card:hover { transform:translateY(-3px); box-shadow:var(--s2); border-color:var(--brd) }
.article-card .article-image-wrap { height:150px }
.article-card .article-body { padding:16px }
.article-card .article-title { font-size:.9rem; -webkit-line-clamp:2 }
.article-card .article-excerpt { font-size:.8rem; -webkit-line-clamp:2; margin-bottom:8px }

/* ── HORIZONTAL ARTICLE LIST ── */
.article-list-item {
  display:flex; align-items:center; gap:16px;
  padding:16px 0; border-bottom:1px solid var(--brd-lt);
  transition:transform .2s;
}
.article-list-item:hover { transform:translateX(-4px) }
.article-list-item:last-child { border-bottom:none }
.ali-image {
  width:80px; height:64px; border-radius:8px;
  overflow:hidden; flex-shrink:0; background:var(--dark-5);
}
.ali-image img { width:100%; height:100%; object-fit:cover }
.ali-no-img {
  width:100%; height:100%; display:flex; align-items:center;
  justify-content:center; font-size:1.4rem; opacity:.4;
}
.ali-body { flex:1 }
.ali-title { font-size:.9rem; font-weight:700; color:var(--text-1); margin-bottom:4px; transition:color .2s }
.article-list-item:hover .ali-title { color:var(--gold) }
.ali-meta { font-size:.75rem; color:var(--text-4); display:flex; gap:8px; align-items:center }

/* ── SIDEBAR ── */
.content-with-sidebar {
  display:grid; grid-template-columns:1fr 320px; gap:28px; align-items:start;
}
.sidebar-widget {
  background:var(--dark-card); border:1px solid var(--brd-lt);
  border-radius:14px; padding:20px; margin-bottom:20px;
}
.widget-title {
  font-size:.9rem; font-weight:800; color:var(--gold);
  margin-bottom:16px; padding-bottom:10px;
  border-bottom:1px solid var(--brd-lt);
  display:flex; align-items:center; gap:8px;
}
.widget-title::before {
  content:''; width:4px; height:16px;
  background:var(--gold); border-radius:2px; display:inline-block;
}

/* ── SEARCH PAGE ── */
.search-results-header {
  padding:32px 0 20px;
}
.search-query-title {
  font-size:1.4rem; font-weight:800; color:var(--text-1); margin-bottom:6px;
}
.search-query-title span { color:var(--gold) }
.search-count { font-size:.85rem; color:var(--text-3) }

/* ── ARTICLE PAGE ── */
.article-page-wrap {
  padding:40px 0 60px;
}
.article-header-bar {
  padding-bottom:20px; margin-bottom:28px;
  border-bottom:1px solid var(--brd);
}
.article-page-title {
  font-size:2rem; font-weight:800; color:var(--text-1);
  line-height:1.4; margin-bottom:12px; font-family:'Amiri',serif;
}
.article-page-meta {
  display:flex; flex-wrap:wrap; gap:12px; align-items:center;
  font-size:.82rem; color:var(--text-3);
}
.article-page-meta .badge {
  padding:4px 12px; border-radius:20px; font-weight:700;
  background:var(--gold-glow); color:var(--gold); font-size:.78rem;
}
.article-content {
  color:var(--text-2); line-height:1.9; font-size:1rem;
}
.article-content h2 {
  font-size:1.3rem; font-weight:800; color:var(--gold);
  margin:28px 0 12px; padding-bottom:8px; border-bottom:1px solid var(--brd-lt);
}
.article-content h3 {
  font-size:1.1rem; font-weight:700; color:var(--text-1); margin:22px 0 10px;
}
.article-content p { margin-bottom:16px }
.article-content ul, .article-content ol { padding-right:20px; margin-bottom:16px }
.article-content li { margin-bottom:6px }
.article-content blockquote {
  border-right:4px solid var(--gold); padding:12px 20px;
  margin:20px 0; background:var(--dark-3); border-radius:0 8px 8px 0;
  font-style:italic; color:var(--text-2);
}

/* ── BREADCRUMB ── */
.breadcrumb {
  display:flex; align-items:center; gap:8px;
  font-size:.8rem; color:var(--text-3); padding:14px 0;
  flex-wrap:wrap;
}
.breadcrumb a { color:var(--text-3); transition:color .2s }
.breadcrumb a:hover { color:var(--gold) }
.breadcrumb-sep { color:var(--text-4) }
.breadcrumb-current { color:var(--text-2); font-weight:600 }

/* ── PAGINATION ── */
.pagination {
  display:flex; gap:6px; justify-content:center;
  padding:32px 0;
}
.page-btn {
  min-width:38px; height:38px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:.85rem; font-weight:600; color:var(--text-2);
  background:var(--dark-4); border:1px solid var(--brd-lt);
  transition:all .2s;
}
.page-btn:hover { background:var(--dark-5); color:var(--gold); border-color:var(--brd) }
.page-btn.active { background:var(--gold); color:var(--dark-1); border-color:var(--gold) }

/* ── GLOBAL SEARCH BAR ── */
.global-search-bar {
  background:var(--dark-3); border-bottom:1px solid var(--brd);
  padding:12px 0;
}
.big-search-form { width:100% }
.big-search-inner {
  display:flex; align-items:center; gap:0;
  background:var(--dark-5); border:1px solid var(--brd);
  border-radius:10px; overflow:hidden;
  transition:border-color .2s, box-shadow .2s;
}
.big-search-inner:focus-within {
  border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-glow);
}
.big-search-icon { padding:0 16px; color:var(--text-3); flex-shrink:0 }
.big-search-inner input {
  flex:1; background:none; border:none; outline:none;
  padding:13px 4px; color:var(--text-1);
  font-size:.95rem; font-family:'Cairo',sans-serif; direction:rtl;
}
.big-search-inner input::placeholder { color:var(--text-3) }
.big-search-inner button {
  background:var(--g-gold); color:#fff; border:none;
  padding:13px 24px; font-family:'Cairo',sans-serif;
  font-weight:700; font-size:.88rem; cursor:pointer;
  transition:opacity .2s;
}
.big-search-inner button:hover { opacity:.9 }

/* ── FOOTER ── */
.site-footer {
  background:var(--dark-2); border-top:1px solid var(--brd);
  padding:48px 0 0; margin-top:60px;
}
.footer-grid {
  display:grid; grid-template-columns:2fr 1fr 1fr 1.5fr; gap:40px;
  padding-bottom:40px; border-bottom:1px solid var(--brd-lt);
}
.footer-brand .footer-logo { height:50px; width:auto; margin-bottom:16px; object-fit:contain }
.footer-desc { font-size:.85rem; color:var(--text-3); line-height:1.7; margin-bottom:20px }
.footer-social { display:flex; gap:10px }
.social-btn {
  width:36px; height:36px; border-radius:8px;
  background:var(--dark-5); border:1px solid var(--brd-lt);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-3); font-size:.9rem; transition:all .2s;
}
.social-btn:hover { background:var(--gold); color:var(--dark-1); border-color:var(--gold) }
.footer-heading {
  font-size:.82rem; font-weight:800; color:var(--gold);
  text-transform:uppercase; letter-spacing:1px; margin-bottom:16px;
}
.footer-links { display:flex; flex-direction:column; gap:10px }
.footer-link {
  font-size:.85rem; color:var(--text-3); transition:color .2s;
  display:flex; align-items:center; gap:6px;
}
.footer-link:hover { color:var(--gold) }
.footer-link::before { content:'›'; color:var(--gold); font-size:.9rem }

/* Newsletter */
.newsletter-form { display:flex; gap:8px; margin-top:12px }
.newsletter-input {
  flex:1; background:var(--dark-5); border:1px solid var(--brd-lt);
  border-radius:8px; padding:10px 14px; color:var(--text-1);
  font-family:'Cairo',sans-serif; outline:none; font-size:.85rem;
}
.newsletter-input:focus { border-color:var(--gold) }
.newsletter-btn {
  background:var(--g-gold); color:#fff; padding:10px 16px;
  border-radius:8px; font-family:'Cairo',sans-serif;
  font-weight:700; font-size:.82rem; white-space:nowrap;
}

/* Footer bottom */
.footer-bottom {
  padding:16px 0; display:flex; justify-content:space-between;
  align-items:center; flex-wrap:wrap; gap:10px;
}
.footer-copy { font-size:.78rem; color:var(--text-4) }
.footer-copy a { color:var(--gold) }
.footer-bottom-links { display:flex; gap:16px }
.footer-bottom-links a { font-size:.78rem; color:var(--text-4); transition:color .2s }
.footer-bottom-links a:hover { color:var(--gold) }

/* ── SKIP LINK ── */
.skip-link {
  position:absolute; top:-40px; right:0;
  background:var(--gold); color:var(--dark-1); padding:8px 16px;
  font-weight:700; z-index:9999; transition:top .2s;
}
.skip-link:focus { top:0 }

/* ── LOADING / EMPTY STATES ── */
.empty-state {
  text-align:center; padding:60px 20px; color:var(--text-3);
}
.empty-state-icon { font-size:3rem; margin-bottom:16px; opacity:.5 }
.empty-state-title { font-size:1.1rem; font-weight:700; color:var(--text-2); margin-bottom:8px }

/* ── ALERTS ── */
.alert {
  padding:14px 18px; border-radius:10px; margin-bottom:16px;
  font-size:.88rem; display:flex; align-items:center; gap:10px;
}
.alert-success { background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.3); color:#4ade80 }
.alert-error { background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.3); color:#f87171 }
.alert-info { background:var(--gold-glow); border:1px solid var(--brd); color:var(--gold) }

/* ── ADMIN ── */
.admin-body { background:var(--dark-1) }
.admin-sidebar {
  width:260px; background:var(--dark-2); border-left:1px solid var(--brd);
  position:fixed; top:0; right:0; bottom:0; z-index:100;
  overflow-y:auto; padding:0;
}
.admin-sidebar-logo {
  padding:20px 20px 16px; border-bottom:1px solid var(--brd);
  display:flex; align-items:center; gap:10px;
}
.admin-sidebar-logo img { height:36px; width:auto; object-fit:contain }
.admin-nav-section {
  padding:8px 12px 4px; font-size:.7rem; font-weight:800;
  color:var(--text-4); text-transform:uppercase; letter-spacing:1.5px;
  margin-top:8px;
}
.admin-nav-link {
  display:flex; align-items:center; gap:10px;
  padding:10px 16px; border-radius:8px; margin:2px 8px;
  color:var(--text-2); font-size:.88rem; font-weight:600;
  transition:all .2s;
}
.admin-nav-link:hover { background:var(--dark-4); color:var(--gold) }
.admin-nav-link.active { background:var(--gold-glow); color:var(--gold) }
.admin-nav-icon { font-size:1rem; width:20px; text-align:center; flex-shrink:0 }
.admin-main { margin-right:260px; padding:28px; min-height:100vh }
.admin-topbar {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:28px; padding-bottom:20px; border-bottom:1px solid var(--brd-lt);
}
.admin-page-title { font-size:1.4rem; font-weight:800; color:var(--text-1) }
.admin-user-info { display:flex; align-items:center; gap:10px; color:var(--text-2); font-size:.85rem }
.admin-avatar {
  width:36px; height:36px; border-radius:50%;
  background:var(--g-gold); display:flex; align-items:center;
  justify-content:center; color:var(--dark-1); font-weight:800; font-size:.9rem;
}

/* Admin stats cards */
.admin-stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:28px }
.admin-stat-card {
  background:var(--dark-card); border:1px solid var(--brd-lt);
  border-radius:12px; padding:20px;
  display:flex; align-items:center; gap:16px;
}
.admin-stat-icon {
  width:48px; height:48px; border-radius:10px;
  background:var(--gold-glow); display:flex; align-items:center;
  justify-content:center; font-size:1.4rem; flex-shrink:0;
}
.admin-stat-num { font-size:1.6rem; font-weight:800; color:var(--text-1) }
.admin-stat-label { font-size:.8rem; color:var(--text-3) }

/* Admin table */
.admin-table-wrap {
  background:var(--dark-card); border:1px solid var(--brd-lt);
  border-radius:12px; overflow:hidden;
}
.admin-table-header {
  padding:16px 20px; border-bottom:1px solid var(--brd-lt);
  display:flex; justify-content:space-between; align-items:center;
}
.admin-table-title { font-size:1rem; font-weight:700; color:var(--text-1) }
.admin-table { width:100%; border-collapse:collapse }
.admin-table th {
  padding:12px 16px; text-align:right; font-size:.78rem;
  font-weight:700; color:var(--text-3); text-transform:uppercase;
  letter-spacing:.8px; background:var(--dark-3);
  border-bottom:1px solid var(--brd-lt);
}
.admin-table td {
  padding:14px 16px; font-size:.88rem; color:var(--text-2);
  border-bottom:1px solid var(--brd-lt);
}
.admin-table tr:last-child td { border-bottom:none }
.admin-table tr:hover td { background:var(--dark-hover) }

/* Admin form */
.admin-form-card {
  background:var(--dark-card); border:1px solid var(--brd-lt);
  border-radius:14px; padding:28px;
}
.form-group { margin-bottom:20px }
.form-label {
  display:block; font-size:.85rem; font-weight:700;
  color:var(--text-2); margin-bottom:8px;
}
.form-control {
  width:100%; background:var(--dark-5); border:1px solid var(--brd-lt);
  border-radius:8px; padding:11px 14px; color:var(--text-1);
  font-family:'Cairo',sans-serif; font-size:.9rem; outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.form-control:focus { border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-glow) }
.form-control::placeholder { color:var(--text-4) }
textarea.form-control { resize:vertical; min-height:120px }
select.form-control { cursor:pointer }
.form-hint { font-size:.76rem; color:var(--text-4); margin-top:4px }

/* Buttons */
.btn {
  display:inline-flex; align-items:center; gap:7px;
  padding:10px 20px; border-radius:8px; font-family:'Cairo',sans-serif;
  font-size:.88rem; font-weight:700; cursor:pointer; transition:all .2s;
  border:1px solid transparent;
}
.btn-primary { background:var(--g-gold); color:#fff; box-shadow:0 2px 8px var(--gold-glow) }
.btn-primary:hover { opacity:.9; transform:translateY(-1px) }
.btn-outline { background:none; border-color:var(--brd); color:var(--text-2) }
.btn-outline:hover { border-color:var(--gold); color:var(--gold); background:var(--gold-glow) }
.btn-danger { background:rgba(239,68,68,.15); border-color:rgba(239,68,68,.3); color:#f87171 }
.btn-danger:hover { background:rgba(239,68,68,.25) }
.btn-sm { padding:7px 14px; font-size:.8rem }
.btn-lg { padding:13px 28px; font-size:.95rem }

/* Badges */
.badge-published { background:rgba(34,197,94,.15); color:#4ade80; padding:3px 10px; border-radius:20px; font-size:.75rem; font-weight:700 }
.badge-draft { background:rgba(234,179,8,.15); color:#facc15; padding:3px 10px; border-radius:20px; font-size:.75rem; font-weight:700 }
.badge-featured { background:var(--gold-glow); color:var(--gold); padding:3px 10px; border-radius:20px; font-size:.75rem; font-weight:700 }

/* ── IMAGE UPLOAD ── */
.image-upload-area {
  border:2px dashed var(--brd); border-radius:10px;
  padding:32px; text-align:center; cursor:pointer;
  transition:all .2s; background:var(--dark-5);
}
.image-upload-area:hover { border-color:var(--gold); background:var(--gold-glow) }
.image-upload-area.drag-over { border-color:var(--gold); background:var(--gold-glow) }
.upload-icon { font-size:2.5rem; margin-bottom:10px; opacity:.6 }
.upload-text { font-size:.88rem; color:var(--text-3) }
.upload-text strong { color:var(--gold) }
.image-preview-wrap {
  position:relative; display:inline-block; margin-top:12px;
}
.image-preview-wrap img { max-height:180px; border-radius:8px }
.remove-image-btn {
  position:absolute; top:-8px; left:-8px; width:24px; height:24px;
  background:#ef4444; color:#fff; border-radius:50%; font-size:.8rem;
  display:flex; align-items:center; justify-content:center;
}

/* ── RESPONSIVE ── */
@media (max-width:1024px) {
  .article-grid { grid-template-columns:repeat(3,1fr) }
  .footer-grid { grid-template-columns:1fr 1fr; gap:28px }
  .admin-stats-grid { grid-template-columns:repeat(2,1fr) }
  .suggestion-grid { grid-template-columns:repeat(2,1fr) }
}

@media (max-width:768px) {
  .main-nav, .header-search { display:none }
  .mobile-menu-btn { display:flex }
  .mobile-nav { display:block }
  
  .hero-logo-img { height:60px }
  .hero-subtitle { font-size:.88rem }
  
  .article-grid { grid-template-columns:repeat(2,1fr) }
  .featured-grid { grid-template-columns:1fr; grid-template-rows:auto }
  .featured-hero { grid-row:auto }
  .suggestion-grid { grid-template-columns:1fr }
  .content-with-sidebar { grid-template-columns:1fr }
  
  .footer-grid { grid-template-columns:1fr }
  .footer-bottom { flex-direction:column; text-align:center }
  
  .admin-sidebar { transform:translateX(100%); transition:transform .3s }
  .admin-sidebar.open { transform:translateX(0) }
  .admin-main { margin-right:0; padding:16px }
  .admin-stats-grid { grid-template-columns:repeat(2,1fr) }
  
  .topbar-date { display:none }
  .categories-nav { top:0 }
}

@media (max-width:480px) {
  .article-grid { grid-template-columns:1fr }
  .hero-stats { gap:0 }
  .stat-item { padding:0 14px }
  .admin-stats-grid { grid-template-columns:1fr }
  .newsletter-form { flex-direction:column }
}

/* ── TRANSITIONS ── */
* { transition-timing-function:var(--ease) }

/* ── PAGINATION ── */
.page-btn {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:40px; height:40px; padding:0 14px;
  background:var(--dark-2); border:1px solid var(--brd-lt);
  border-radius:8px; color:var(--text-2); font-size:.88rem;
  text-decoration:none; transition:.18s
}
.page-btn:hover { border-color:var(--gold); color:var(--gold) }
.page-btn.active { background:var(--gold); color:#1a1208; font-weight:700; border-color:var(--gold) }

/* ── GLOBAL SEARCH PAGE ── */
.global-search-bar { padding:0 }
.big-search-form { width:100% }
.big-search-inner {
  display:flex; align-items:center;
  background:var(--dark-2); border:2px solid var(--brd);
  border-radius:50px; overflow:hidden; transition:.2s
}
.big-search-inner:focus-within { border-color:var(--gold); box-shadow:0 0 0 4px var(--gold-glow) }
.big-search-icon { padding:0 16px; color:var(--text-3); flex-shrink:0 }
.big-search-inner input {
  flex:1; padding:14px 0; background:transparent;
  border:none; outline:none; font-size:1rem;
  font-family:inherit; color:var(--text-1); text-align:right
}
.big-search-inner input::placeholder { color:var(--text-3) }
.big-search-inner button {
  background:var(--g-gold); color:#1a1208; border:none;
  padding:0 28px; height:52px; font-size:.95rem; font-weight:700;
  font-family:inherit; cursor:pointer; flex-shrink:0; transition:opacity .18s
}
.big-search-inner button:hover { opacity:.88 }

/* ── LIGHT THEME OVERRIDES ── */
/* Shadow adjustments for white background */
.site-header.scrolled { box-shadow: 0 4px 20px rgba(166,141,102,.2) !important }
.article-card:hover { box-shadow: var(--s2) }
.admin-body { background: var(--dark-0) !important }

/* Musnad strip on light bg */
.musnad-glyph { color: rgba(166,141,102,.5) !important }

/* Hero section light */
.hero-section {
  background: linear-gradient(180deg, #f8f4ef 0%, #ffffff 100%) !important;
}
.hero-section::before {
  background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(166,141,102,.12) 0%, transparent 70%) !important;
}

/* Mobile nav on light */
.mobile-nav { background: rgba(255,255,255,.98) !important }
.mobile-nav-link { color: var(--text-2) !important }

/* Footer on light */
.site-footer { background: #f5f0e8 !important; border-top: 1px solid var(--brd) }

/* Categories nav light */
.categories-nav { background: #fff !important; border-bottom: 1px solid var(--brd-lt) !important }

/* Card improvements for light */
.article-card { box-shadow: 0 2px 12px rgba(166,141,102,.08) }
.article-card:hover { box-shadow: 0 8px 32px rgba(166,141,102,.18) }

/* Suggestion card borders */
.suggestion-card { border: 1px solid var(--brd-lt) }

/* Search bar light */
.hero-search .search-wrapper { background: #fff !important; border: 2px solid var(--brd) !important }
.hero-search input { color: var(--text-1) !important }

/* ==========================================
   SPONSOR BANNER
   ========================================== */
.sponsor-banner {
  background: linear-gradient(135deg, var(--teal) 0%, #0f3d2e 100%);
  border-top: 2px solid var(--gold);
  padding: 14px 0;
}
.sponsor-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.sponsor-label {
  font-size: .75rem;
  color: rgba(255,255,255,.6);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.sponsor-logo {
  height: 32px;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.sponsor-text {
  color: #fff;
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  transition: .2s;
}
.sponsor-text:hover { color: var(--gold-lt) }

/* Admin toggle switches */
.settings-section-header {
  font-weight: 700;
  color: var(--gold);
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--brd);
  font-size: .95rem;
}
.settings-section-body {
  padding: 20px;
}