/* Default: Flash Profesional Payung Geulis Tasikmalaya */
body.theme-payung-geulis {
    --primary: #be185d;
    --primary-dark: #9d174d;
    --accent: #fbbf24;
}

body.theme-payung-geulis .topbar {
    background: linear-gradient(135deg, #be185d, #f472b6);
}

/* Flash Profesional Batik Tasikmalaya */
body.theme-batik-tasikmalaya {
    --primary: #6d28d9;
    --primary-dark: #5b21b6;
    --accent: #f59e0b;
}

body.theme-batik-tasikmalaya .topbar {
    background: linear-gradient(135deg, #4c1d95, #7c3aed, #f59e0b);
}

/* Flash Elegan Cagar Budaya Indonesia */
body.theme-elegan-cagar-budaya {
    --primary: #166534;
    --primary-dark: #14532d;
    --accent: #d97706;
}

body.theme-elegan-cagar-budaya .topbar {
    background: linear-gradient(135deg, #052e16, #166534, #d97706);
}

/* Flash News Heritage */
body.theme-news-heritage {
    --primary: #1d4ed8;
    --primary-dark: #1e40af;
    --accent: #dc2626;
}

body.theme-news-heritage .topbar {
    background: linear-gradient(135deg, #172554, #1d4ed8, #dc2626);
}

/* Flash News Magazine */
body.theme-news-magazine {
    --primary: #0f172a;
    --primary-dark: #020617;
    --accent: #f97316;
}

body.theme-news-magazine .topbar {
    background: linear-gradient(135deg, #020617, #0f172a, #f97316);
}

/* Flash Newspaper */
body.theme-newspaper {
    --primary: #374151;
    --primary-dark: #111827;
    --accent: #b45309;
}

body.theme-newspaper .topbar {
    background: linear-gradient(135deg, #111827, #374151, #b45309);
}

/* ============================================================
   PORTAL THEME-ROOT (scope .sip-portal-root) + DROPDOWN SLIDE-FADE
   Bekerja di admin shell (login) maupun public shell (logout).
   ============================================================ */

/* ---- variabel default (dipakai bila tema tak cocok) ---- */
.sip-portal-root{
  --p-bg:#f6f8fb; --p-surface:#ffffff; --p-text:#0f172a; --p-muted:#64748b;
  --p-border:#e2e8f0; --p-accent:#0f766e; --p-accent-2:#134e4a; --p-on-accent:#ffffff;
  --p-hero-grad:linear-gradient(135deg,var(--p-accent),var(--p-accent-2));
  --p-nav-bg:#ffffff; --p-nav-text:#0f172a; --p-sub-bg:#ffffff;
  background:var(--p-bg); color:var(--p-text); padding:0 0 28px;
}
.sip-portal-root .card,
.sip-portal-root .item-card,
.sip-portal-root .stat-box{ background:var(--p-surface); color:var(--p-text); border:1px solid var(--p-border); }
.sip-portal-root .card h2, .sip-portal-root .item-card h3, .sip-portal-root .stat-box strong{ color:var(--p-text); }
.sip-portal-root .item-card h3 a, .sip-portal-root a{ color:var(--p-accent); }
.sip-portal-root .item-card small, .sip-portal-root .stat-box span, .sip-portal-root .sip-portal-filters{ color:var(--p-muted); }
.sip-portal-root .btn{ background:var(--p-accent); color:var(--p-on-accent); border-color:var(--p-accent); }
.sip-portal-root .btn-outline{ background:transparent; color:var(--p-accent); border-color:var(--p-accent); }
.sip-portal-root .sip-portal-filters .btn.active{ background:var(--p-accent); color:var(--p-on-accent)!important; }
.sip-portal-root .portal-cta{ background:var(--p-surface); }

/* ---- HERO per tema (gradien + pola, tanpa gambar eksternal) ---- */
.sip-portal-root .portal-hero{ background:var(--p-hero-grad); color:var(--p-on-accent); border:0; position:relative; overflow:hidden; }
.sip-portal-root .portal-hero h1, .sip-portal-root .portal-hero p{ color:var(--p-on-accent); }
.sip-portal-root .portal-hero .btn{ background:var(--p-on-accent); color:var(--p-accent); border-color:var(--p-on-accent); }
.sip-portal-root .portal-hero .btn-outline{ background:transparent; color:var(--p-on-accent); border-color:rgba(255,255,255,.6); }
.sip-portal-root .portal-hero-badge{ background:rgba(255,255,255,.18); color:var(--p-on-accent); border:1px solid rgba(255,255,255,.3); }
.sip-portal-root .portal-hero::before{ content:""; position:absolute; inset:0; opacity:.18; pointer-events:none;
  background-image:var(--p-pattern, none); background-size:var(--p-pattern-size, 40px 40px); }

/* ============ 6 TEMA ============ */
.sip-portal-root.theme-batik-tasikmalaya{
  --p-accent:#7c2d12; --p-accent-2:#b45309; --p-on-accent:#fff7ed;
  --p-hero-grad:linear-gradient(135deg,#7c2d12,#b45309 55%,#f59e0b);
  --p-pattern:repeating-linear-gradient(45deg,#fff 0 6px,transparent 6px 14px),repeating-linear-gradient(-45deg,#fff 0 6px,transparent 6px 14px);
  --p-pattern-size:28px 28px;
}
.sip-portal-root.theme-payung-geulis{
  --p-accent:#0e7490; --p-accent-2:#155e75; --p-on-accent:#ecfeff;
  --p-hero-grad:linear-gradient(135deg,#0e7490,#22d3ee 60%,#0891b2);
  --p-pattern:radial-gradient(circle at 12px 12px,rgba(255,255,255,.5) 2px,transparent 3px);
  --p-pattern-size:24px 24px;
}
.sip-portal-root.theme-elegan-cagar-budaya{
  --p-accent:#3f3f46; --p-accent-2:#18181b; --p-on-accent:#fefce8;
  --p-hero-grad:linear-gradient(135deg,#1c1917,#44403c 55%,#a16207);
  --p-pattern:repeating-linear-gradient(90deg,rgba(250,204,21,.25) 0 2px,transparent 2px 22px);
  --p-pattern-size:auto;
}
.sip-portal-root.theme-news-heritage{
  --p-accent:#1d4ed8; --p-accent-2:#1e3a8a; --p-on-accent:#eff6ff;
  --p-hero-grad:linear-gradient(135deg,#1e3a8a,#2563eb 60%,#0ea5e9);
  --p-pattern:repeating-linear-gradient(0deg,rgba(255,255,255,.12) 0 1px,transparent 1px 6px);
  --p-pattern-size:auto;
}
.sip-portal-root.theme-news-magazine{
  --p-accent:#be123c; --p-accent-2:#881337; --p-on-accent:#fff1f2;
  --p-hero-grad:linear-gradient(135deg,#881337,#e11d48 55%,#fb7185);
  --p-pattern:radial-gradient(circle at 20px 20px,rgba(255,255,255,.18) 3px,transparent 4px);
  --p-pattern-size:40px 40px;
}
.sip-portal-root.theme-newspaper{
  --p-accent:#0f172a; --p-accent-2:#334155; --p-on-accent:#f8fafc;
  --p-hero-grad:linear-gradient(135deg,#0f172a,#334155 60%,#64748b);
  --p-pattern:repeating-linear-gradient(90deg,rgba(255,255,255,.10) 0 1px,transparent 1px 4px);
  --p-pattern-size:auto;
}

/* ============ DROPDOWN NAV + SLIDE-FADE ============ */
.sip-portal-nav{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  background:var(--p-nav-bg); border:1px solid var(--p-border);
  border-radius:14px; padding:6px 10px; margin:0 0 16px;
  box-shadow:0 8px 24px rgba(15,23,42,.08);
}
.sip-pnav-burger{ display:none; flex-direction:column; gap:4px; background:transparent; border:1px solid var(--p-border); border-radius:10px; padding:8px 10px; cursor:pointer; }
.sip-pnav-burger span{ width:20px; height:2px; background:var(--p-nav-text); display:block; border-radius:2px; }
.sip-pnav-list{ list-style:none; display:flex; flex-wrap:wrap; gap:2px; margin:0; padding:0; flex:1; }
.sip-pnav-item{ position:relative; }
.sip-pnav-trigger{
  display:inline-flex; align-items:center; gap:6px;
  background:transparent; border:0; cursor:pointer;
  color:var(--p-nav-text); font-weight:700; font-size:14px;
  padding:9px 12px; border-radius:10px; text-decoration:none; white-space:nowrap;
  transition:background .2s ease,color .2s ease;
}
.sip-pnav-trigger:hover, .sip-pnav-item.open > .sip-pnav-trigger{ background:var(--p-accent); color:var(--p-on-accent); text-decoration:none; }
.sip-pnav-ico{ font-size:15px; line-height:1; }
.sip-pnav-caret{ font-size:11px; opacity:.8; transition:transform .25s ease; }
.sip-pnav-item.open > .sip-pnav-trigger .sip-pnav-caret,
.sip-pnav-item:hover > .sip-pnav-trigger .sip-pnav-caret{ transform:rotate(180deg); }

/* submenu: slide (max-height + translateY) + fade (opacity) */
.sip-pnav-sub{
  list-style:none; margin:6px 0 0; padding:0;
  position:absolute; top:100%; left:0; min-width:248px; z-index:70;
  background:var(--p-sub-bg); border:1px solid var(--p-border); border-radius:12px;
  box-shadow:0 14px 34px rgba(15,23,42,.16);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  max-height:0; overflow:hidden;
  transition:opacity .26s ease, transform .26s ease, max-height .32s ease, visibility 0s linear .32s;
}
.sip-pnav-item:hover > .sip-pnav-sub,
.sip-pnav-item.open > .sip-pnav-sub{
  opacity:1; visibility:visible; transform:translateY(0); max-height:560px;
  transition:opacity .26s ease, transform .26s ease, max-height .34s ease, visibility 0s;
}
.sip-pnav-sub li{ margin:0; }
.sip-pnav-sublink{
  display:block; padding:9px 14px; color:var(--p-nav-text); text-decoration:none;
  font-size:13.5px; font-weight:600; border-left:3px solid transparent;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.sip-pnav-sublink:hover{ background:rgba(15,118,110,.10); border-left-color:var(--p-accent); color:var(--p-accent); text-decoration:none; }
.sip-pnav-sub li:first-child .sip-pnav-sublink{ border-top-left-radius:11px; border-top-right-radius:11px; }
.sip-pnav-sub li:last-child  .sip-pnav-sublink{ border-bottom-left-radius:11px; border-bottom-right-radius:11px; }

/* mobile */
@media (max-width: 980px){
  .sip-pnav-burger{ display:inline-flex; }
  .sip-pnav-list{ display:none; flex-direction:column; width:100%; }
  .sip-pnav-list.pnav-open{ display:flex; }
  .sip-pnav-item{ width:100%; }
  .sip-pnav-trigger{ width:100%; justify-content:flex-start; }
  .sip-pnav-sub{ position:static; box-shadow:none; border:0; border-left:2px solid var(--p-border); border-radius:0; min-width:0; margin:0 0 4px 10px; }
  .sip-pnav-item:hover > .sip-pnav-sub{ opacity:0; visibility:hidden; max-height:0; }   /* mati hover di mobile */
  .sip-pnav-item.open > .sip-pnav-sub{ opacity:1; visibility:visible; max-height:560px; }
}

/* hormati prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .sip-pnav-sub, .sip-pnav-caret{ transition:none !important; }
}