/* =====================================================================
   PORTAL THEME — Kankemenag Magetan  (halaman depan)
   ===================================================================== */
:root{
    --green-900:#062b1a; --green-800:#0a5232; --green-700:#0d7b3d; --green-600:#12894a;
    --green-100:#e7f1ea; --green-50:#f0f7f2;
    --gold-500:#e6a91e; --gold-400:#f0b429; --gold-300:#ffd46d;
    --orange:#c2410c;
    --cream:#f3f6f2; --ink:#1b2b22; --muted:#647a6d; --line:#e2ebe4;
    --shadow:0 10px 30px rgba(10,45,26,.10);
    --shadow-sm:0 4px 14px rgba(10,45,26,.07);
}
body{ background:var(--cream); color:var(--ink); font-family:'Plus Jakarta Sans',system-ui,sans-serif; }
.container{ max-width:1180px; }
a{ text-decoration:none; }

/* ---------- NAVBAR (gbr 7) ---------- */
.portal-navbar{
    display:flex; align-items:center; gap:12px; background:#fff; border-bottom:1px solid var(--line);
    min-height:56px; height:auto; padding:8px 22px 10px; position:sticky; top:0; z-index:1000; box-shadow:0 2px 12px rgba(10,45,26,.05);
}
.portal-navbar .brand{ display:flex; align-items:center; gap:11px; }
.portal-navbar .logo{ width:40px; height:auto; }
.portal-navbar .brand-title{ font-weight:800; font-size:13.5px; color:var(--green-800); line-height:1.15; }
.portal-navbar .brand-sub{ font-size:12px; color:var(--muted); }
.portal-navbar .nav-center{ display:flex; flex-wrap:wrap; gap:5px 3px; flex:1; justify-content:center; align-content:center; }
.portal-navbar .nav-center a{
    display:inline-flex; align-items:center; gap:5px; padding:7px 9px; border-radius:8px;
    color:#33473c; font-size:12.5px; font-weight:600; line-height:1.25; white-space:nowrap; transition:background .15s,color .15s;
}
.portal-navbar .nav-center a i{ font-size:15px; color:var(--green-700); }
.portal-navbar .nav-center a:hover{ background:var(--green-100); color:var(--green-800); }
.portal-navbar .nav-center a.active{ background:var(--green-700); color:#fff; }
.portal-navbar .nav-center a.active i{ color:var(--gold-300); }
.portal-navbar .nav-center a.datalink{ color:var(--green-800); }
.portal-navbar .nav-center a.dataset{ background:var(--gold-300); color:#5a4300; }
.portal-navbar .nav-center a.dataset i{ color:#5a4300; }
.portal-navbar .nav-center a.dataset.active{ background:var(--green-700); color:#fff; }
.portal-navbar .nav-right{ font-size:12.5px; color:var(--muted); font-weight:600; }

/* ---------- HERO ---------- */
.hero{ position:relative; min-height:340px; display:flex; align-items:center; justify-content:center;
    background:var(--green-800) url("../img/hero.jpg") center 30%/cover no-repeat; }
.hero-overlay{ position:absolute; inset:0;
    background:linear-gradient(180deg,rgba(6,43,26,.80),rgba(10,82,50,.72) 55%,rgba(6,43,26,.9)); }
.hero-pattern{ position:absolute; inset:0; opacity:.10; pointer-events:none;
    background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.5) 0 1px,transparent 1px 26px); }
.hero-content{ position:relative; z-index:5; width:100%; max-width:900px; padding:40px 24px 52px; text-align:center; color:#fff; }
.hero-logo{ width:64px; margin-bottom:14px; filter:drop-shadow(0 6px 16px rgba(0,0,0,.35)); }
.hero-badge{ display:inline-flex; align-items:center; gap:8px; margin-bottom:14px;
    background:rgba(255,212,109,.15); border:1px solid rgba(255,212,109,.5); color:var(--gold-300);
    font-size:13px; font-weight:600; padding:7px 16px; border-radius:40px; backdrop-filter:blur(4px); }
.hero h1{ font-family:'Lora',Georgia,serif; font-weight:700; font-size:34px; line-height:1.2; margin:0 0 14px; text-shadow:0 2px 20px rgba(0,0,0,.4); }
.hero h1 .accent{ color:var(--gold-300); }
.hero-desc{ font-size:15px; line-height:1.6; max-width:620px; margin:0 auto 22px; color:rgba(255,255,255,.92); }
.hero-search{ display:flex; align-items:center; position:relative; width:700px; max-width:100%; margin:0 auto;
    background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.4); padding:8px; border-radius:50px;
    backdrop-filter:blur(10px); box-shadow:0 14px 40px rgba(0,0,0,.28); }
.hero-search-icon{ position:absolute; left:26px; color:var(--green-800); font-size:18px; z-index:2; }
.hero-search input{ flex:1; border:none; outline:none; padding:15px 18px 15px 44px; border-radius:40px; font-size:15px; background:#fff; color:#222; }
.hero-search button{ display:inline-flex; align-items:center; gap:6px; margin-left:8px; padding:0 28px; height:52px; border:none;
    background:var(--gold-300); color:#5a4300; border-radius:40px; font-weight:700; cursor:pointer; transition:.2s; }
.hero-search button:hover{ background:var(--gold-500); color:#3a2c00; transform:translateY(-1px); }
.hero-chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:26px; }
.hero-chips a{ display:inline-flex; align-items:center; gap:7px; padding:9px 18px; border-radius:40px;
    background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28); color:#fff; font-size:14px; font-weight:500; transition:.2s; }
.hero-chips a:hover{ background:rgba(255,212,109,.22); border-color:var(--gold-300); color:var(--gold-300); }

/* ---------- QUICK STATS ---------- */
.quick-stats{ margin-top:28px; position:relative; z-index:20; }
.quick-stats > h3{ text-align:center; color:#0a5232; font-size:15px; letter-spacing:2px; text-transform:uppercase; font-weight:700; margin:0 0 22px; }
.stats-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:940px; margin:0 auto; }
.stat-link{ display:block; }
.stat-card{ background:#fff; border-radius:16px; padding:22px 20px; box-shadow:var(--shadow); border-top:4px solid var(--green-700);
    transition:transform .18s,box-shadow .18s; height:100%; }
.stat-card:hover{ transform:translateY(-4px); box-shadow:0 16px 40px rgba(10,45,26,.16); }
.stat-card.green{ border-top-color:#0d7b3d; } .stat-card.teal{ border-top-color:#0e9488; } .stat-card.gold{ border-top-color:var(--gold-500); }
.stat-icon{ width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:24px; margin-bottom:14px; background:var(--green-100); }
.stat-card.teal .stat-icon{ background:#e0f2f0; } .stat-card.gold .stat-icon{ background:#fdf3d9; }
.stat-value{ font-size:30px; font-weight:800; color:var(--ink); line-height:1; }
.stat-label{ font-size:14.5px; font-weight:700; color:#2c3f35; margin-top:6px; }
.stat-sub{ font-size:12.5px; color:var(--muted); margin-top:2px; }

/* ---------- SECTION HEAD ---------- */
.block{ margin-top:64px; }
.section-eyebrow{ text-align:center; color:var(--green-700); font-size:12px; letter-spacing:2px; font-weight:700; text-transform:uppercase; }
.section-title,.dashboard-section>h2,.dataset-section .section-header h2{ font-family:'Lora',Georgia,serif; color:var(--green-800); text-align:center; font-size:30px; font-weight:700; }
.section-lead{ text-align:center; color:var(--muted); max-width:640px; margin:6px auto 0; }

/* ---------- SEKSI PAGE (gbr 1 & 2) ---------- */
.seksi-wrap{ max-width:1180px; margin:0 auto; padding:40px 24px 20px; }
.seksi-head{ display:flex; align-items:center; gap:16px; margin-bottom:26px; }
.seksi-head .sh-icon{ width:58px; height:58px; border-radius:14px; background:var(--green-100); color:var(--green-700);
    display:flex; align-items:center; justify-content:center; font-size:28px; }
.seksi-head h1{ font-family:'Lora',serif; font-size:28px; color:var(--green-800); margin:0; }
.seksi-head p{ margin:2px 0 0; color:var(--muted); font-size:15px; }
.seksi-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:22px; }
.seksi-card{ background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:var(--shadow-sm);
    display:flex; flex-direction:column; transition:transform .18s,box-shadow .18s; }
.seksi-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.seksi-card .sc-top{ height:130px; display:flex; align-items:center; justify-content:center; font-size:52px;
    background:linear-gradient(135deg,#eaf5ef,#dbe8f2); }
.seksi-card .sc-body{ padding:20px 22px 24px; display:flex; flex-direction:column; flex:1; }
.seksi-card h3{ font-size:17px; color:#1c2b23; margin:0 0 8px; font-weight:700; }
.seksi-card p{ font-size:13.5px; color:#5a6b61; line-height:1.6; flex:1; margin:0 0 16px; }
.btn-buka{ display:inline-flex; align-items:center; gap:7px; align-self:flex-start; background:var(--green-700); color:#fff;
    border:none; padding:10px 22px; border-radius:9px; font-weight:700; font-size:14px; cursor:pointer; transition:background .18s; }
.btn-buka:hover{ background:var(--green-800); color:#fff; }
.seksi-empty{ background:#fff; border:1px dashed var(--line); border-radius:14px; padding:40px; text-align:center; color:var(--muted); }

/* ---------- MODAL EMBED (buka dashboard) ---------- */
.embed-modal{ position:fixed; inset:0; background:rgba(6,30,18,.72); z-index:2000; display:none; align-items:center; justify-content:center; padding:24px; }
.embed-modal.open{ display:flex; }
.embed-box{ background:#fff; width:100%; max-width:1100px; height:88vh; border-radius:16px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 30px 80px rgba(0,0,0,.4); }
.embed-bar{ background:var(--green-800); color:#fff; padding:14px 20px; display:flex; align-items:center; justify-content:space-between; }
.embed-bar strong{ font-size:16px; }
.embed-bar button{ background:rgba(255,255,255,.15); border:none; color:#fff; width:34px; height:34px; border-radius:8px; font-size:18px; cursor:pointer; }
.embed-bar button:hover{ background:rgba(255,255,255,.3); }
.embed-box iframe{ flex:1; width:100%; border:none; }
.embed-box .embed-empty{ flex:1; display:flex; align-items:center; justify-content:center; color:var(--muted); text-align:center; padding:30px; }

/* ---------- KATALOG DATASET (gbr 6) ---------- */
.katalog-wrap{ max-width:1180px; margin:0 auto; padding:40px 24px 40px; }
.katalog-head{ display:flex; align-items:center; gap:16px; margin-bottom:24px; }
.katalog-head .kh-icon{ width:58px; height:58px; border-radius:14px; background:#fdf3d9; display:flex; align-items:center; justify-content:center; font-size:28px; }
.katalog-head h1{ font-family:'Lora',serif; font-size:28px; color:var(--green-800); margin:0; }
.katalog-head p{ margin:2px 0 0; color:var(--muted); font-size:15px; }
.katalog-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:22px; }
.kstat{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px; text-align:center; box-shadow:var(--shadow-sm); }
.kstat.active{ background:linear-gradient(135deg,var(--green-800),var(--green-700)); border-color:transparent; }
.kstat .kn{ font-size:32px; font-weight:800; color:var(--green-800); line-height:1; }
.kstat.active .kn{ color:#fff; }
.kstat.gold .kn{ color:var(--orange); }
.kstat .kl{ margin-top:6px; font-size:13.5px; color:var(--muted); font-weight:600; }
.kstat.active .kl{ color:rgba(255,255,255,.9); }
.katalog-toolbar{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px; display:flex; gap:12px; margin-bottom:24px; flex-wrap:wrap; box-shadow:var(--shadow-sm); }
.katalog-toolbar .search{ flex:1; min-width:220px; position:relative; }
.katalog-toolbar .search i{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--muted); }
.katalog-toolbar .search input{ width:100%; padding:11px 14px 11px 38px; border:1px solid var(--line); border-radius:10px; font-size:14px; outline:none; }
.katalog-toolbar select{ padding:11px 14px; border:1px solid var(--line); border-radius:10px; font-size:14px; background:#fff; }
.btn-reset{ display:inline-flex; align-items:center; gap:6px; background:var(--green-100); color:var(--green-800); border:none; padding:0 18px; border-radius:10px; font-weight:600; cursor:pointer; }
.katalog-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; }
.kat-card{ background:#fff; border:1px solid var(--line); border-top:4px solid var(--green-700); border-radius:16px; padding:20px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; transition:transform .18s,box-shadow .18s; }
.kat-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.kat-card .kc-head{ display:flex; gap:12px; align-items:flex-start; margin-bottom:12px; }
.kat-card .kc-icon{ width:44px; height:44px; border-radius:11px; background:var(--green-100); display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; }
.kat-card h3{ font-size:15.5px; color:#1c2b23; margin:0 0 8px; font-weight:700; }
.kc-badges{ display:flex; flex-wrap:wrap; gap:6px; }
.kc-badges span{ font-size:11px; font-weight:700; padding:3px 9px; border-radius:20px; }
.badge-kat{ background:var(--green-100); color:var(--green-800); }
.badge-year{ background:#f0f0f0; color:#555; }
.badge-fmt{ background:#fdf3d9; color:#8a6d0f; }
.kat-card p.desc{ font-size:13px; color:#5a6b61; line-height:1.6; margin:0 0 14px; flex:1; }
.kc-source{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); margin-bottom:14px; }
.btn-detail{ align-self:flex-start; display:inline-flex; align-items:center; gap:6px; background:var(--orange); color:#fff; border:none; padding:9px 18px; border-radius:9px; font-weight:700; font-size:13.5px; cursor:pointer; }
.btn-detail:hover{ background:#9a3412; color:#fff; }

/* ---------- DASHBOARD GRID (home) ---------- */
.dashboard-section{ margin-top:64px; }
.dashboard-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:20px; margin-top:26px; }
.dash-card{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; transition:.18s; }
.dash-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.dash-icon{ width:48px; height:48px; border-radius:12px; background:var(--green-100); color:var(--green-700); display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:14px; }
.dash-card h3{ font-size:17px; color:var(--green-800); margin:0 0 8px; }
.dash-card p{ font-size:13.5px; color:#5a6b61; line-height:1.6; flex:1; }
.dash-footer button{ margin-top:14px; width:100%; border:none; background:var(--green-700); color:#fff; padding:11px; border-radius:10px; font-weight:700; cursor:pointer; }
.dash-footer button:hover{ background:var(--green-800); }

/* ---------- WELCOME ---------- */
.welcome-card{ display:grid; grid-template-columns:1fr 300px; gap:28px; align-items:stretch; margin-top:64px; background:#fff; border:1px solid var(--line); border-radius:20px; padding:38px; box-shadow:var(--shadow-sm); }
.welcome-badge{ display:inline-block; background:var(--green-100); color:var(--green-800); font-weight:700; font-size:12px; letter-spacing:1px; padding:6px 14px; border-radius:30px; margin-bottom:14px; }
.welcome-left h2{ font-family:'Lora',serif; color:var(--green-800); font-size:28px; margin:0 0 12px; }
.welcome-left p{ color:#44564c; line-height:1.7; }
.welcome-motto{ margin-top:18px; padding:14px 18px; border-left:4px solid var(--gold-500); background:#fbf6e7; border-radius:8px; font-style:italic; color:#6a5410; font-weight:600; }
.welcome-btns{ display:flex; gap:12px; margin-top:22px; flex-wrap:wrap; }
.btn-dashboard,.btn-katalog{ border:none; padding:12px 22px; border-radius:10px; font-weight:700; cursor:pointer; font-size:14px; }
.btn-dashboard{ background:var(--green-700); color:#fff; } .btn-dashboard:hover{ background:var(--green-800); }
.btn-katalog{ background:var(--gold-300); color:#5a4300; } .btn-katalog:hover{ background:var(--gold-500); }
.welcome-right{ display:flex; flex-direction:column; gap:14px; justify-content:center; align-items:stretch; }
.info-box .ib-ic{ font-size:22px; }
.info-box{ width:100%; background:linear-gradient(135deg,var(--green-800),var(--green-700)); color:#fff; border-radius:14px; padding:18px 22px; display:flex; align-items:center; gap:18px; min-height:72px; box-shadow:var(--shadow-sm); }
.info-number{ font-size:34px; font-weight:800; color:#ffd46d; line-height:1; min-width:64px; text-align:center; }
.info-title{ font-size:15px; font-weight:600; color:#ffffff; opacity:1; line-height:1.3; }

/* ---------- MAPS ---------- */
.maps-section{ margin-top:64px; }
.maps-section small{ display:block; text-align:center; color:var(--green-700); font-weight:700; letter-spacing:2px; font-size:12px; }
.maps-section h2{ font-family:'Lora',serif; color:var(--green-800); text-align:center; font-size:28px; }
.maps-section > .section-title > p,.maps-section > p{ text-align:center; color:var(--muted); }
.maps-wrapper{ display:grid; grid-template-columns:2.2fr 1fr; gap:20px; margin-top:24px; }
#map{ height:420px; border-radius:16px; box-shadow:var(--shadow-sm); }
.map-info{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px; box-shadow:var(--shadow-sm); }
.map-info label{ font-weight:700; color:var(--green-800); font-size:13px; }
.map-info select{ width:100%; padding:10px; border:1px solid var(--line); border-radius:10px; margin-top:8px; }
.map-info h3{ color:var(--green-800); font-size:16px; }

/* ---------- FOOTER ---------- */
.portal-footer{ margin-top:72px; background:var(--green-900); color:#cfe0d6; padding:44px 0 0; }
.portal-footer .foot-inner{ max-width:1180px; margin:0 auto; padding:0 24px 30px; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px; }
.portal-footer .foot-brand{ display:flex; gap:14px; align-items:flex-start; }
.portal-footer .foot-brand img{ width:56px; }
.portal-footer h4{ color:#fff; font-size:16px; margin:0 0 4px; }
.portal-footer .foot-sub{ font-size:13px; color:#9fbdac; }
.portal-footer .foot-motto{ color:var(--gold-300); font-style:italic; font-weight:600; margin-top:10px; }
.portal-footer h5{ color:#fff; font-size:14px; letter-spacing:1px; text-transform:uppercase; margin:0 0 12px; }
.portal-footer a{ color:#cfe0d6; display:block; margin-bottom:8px; font-size:14px; }
.portal-footer a:hover{ color:var(--gold-300); }
.portal-footer .foot-contact p{ font-size:14px; margin:0 0 8px; display:flex; gap:8px; }
.portal-footer .foot-bottom{ border-top:1px solid rgba(255,255,255,.12); text-align:center; padding:16px; font-size:13px; color:#9fbdac; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){ .welcome-card,.maps-wrapper{ grid-template-columns:1fr; } .katalog-stats{ grid-template-columns:repeat(2,1fr); } .portal-footer .foot-inner{ grid-template-columns:1fr; gap:22px; } .stats-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .stats-grid{ grid-template-columns:1fr; } }
@media (max-width:768px){
    .portal-navbar{ padding:10px 16px; } .portal-navbar .nav-right{ display:none; }
    .hero{ min-height:auto; } .hero-content{ padding:48px 18px 80px; } .hero h1{ font-size:30px; } .hero-logo{ width:72px; }
    .hero-search{ flex-direction:column; padding:14px; border-radius:18px; } .hero-search-icon{ display:none; }
    .hero-search input{ width:100%; padding-left:18px; border-radius:12px; } .hero-search button{ width:100%; margin:10px 0 0; height:48px; justify-content:center; }
    .katalog-stats{ grid-template-columns:1fr 1fr; }
}