/* =========================================================
   PPKPT AKTAN BOEKITTINGGI — Shared Design System
   ========================================================= */

:root{
    --clr-primary-950:#210538;
    --clr-primary-900:#2E0A4F;
    --clr-primary-800:#3B0F66;
    --clr-primary-700:#4C1580;
    --clr-primary-600:#5F229B;
    --clr-primary-500:#7735B5;
    --clr-primary-400:#9457C9;
    --clr-primary-100:#EFE6FA;
    --clr-primary-50:#F7F3FC;

    --clr-accent:#C9A227;
    --clr-accent-dark:#A9860E;
    --clr-accent-light:#F1D97A;

    --clr-ink:#241a30;
    --clr-muted:#6b6178;
    --clr-line:#e7dff2;

    --radius-sm:10px;
    --radius-md:16px;
    --radius-lg:24px;
    --radius-pill:999px;

    --shadow-sm:0 4px 14px rgba(46,10,79,.08);
    --shadow-md:0 14px 34px rgba(46,10,79,.12);
    --shadow-lg:0 22px 55px rgba(46,10,79,.18);

    --font-heading:'Poppins',sans-serif;
    --font-body:'Inter',sans-serif;
}

*{ box-sizing:border-box; }

body{
    font-family:var(--font-body);
    color:var(--clr-ink);
    background:var(--clr-primary-50);
    scroll-behavior:smooth;
}

h1,h2,h3,h4,h5,h6{
    font-family:var(--font-heading);
}

a{ text-decoration:none; }

/* ---------- Utility section rhythm ---------- */
.section{ padding:96px 20px; }
.section-alt{ background:var(--clr-primary-100); }
.section-tag{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:var(--clr-primary-100);
    color:var(--clr-primary-700);
    font-weight:600;
    font-size:13px;
    letter-spacing:.06em;
    text-transform:uppercase;
    padding:8px 18px;
    border-radius:var(--radius-pill);
    margin-bottom:18px;
}
.section-title{
    font-weight:700;
    color:var(--clr-primary-900);
    margin-bottom:14px;
}
.section-lead{
    color:var(--clr-muted);
    max-width:680px;
    margin-left:auto;
    margin-right:auto;
}

/* ---------- Navbar ---------- */
.navbar{
    background:linear-gradient(90deg,var(--clr-primary-950),var(--clr-primary-800));
    box-shadow:0 6px 24px rgba(33,5,56,.25);
    padding-top:10px;
    padding-bottom:10px;
}
.navbar .navbar-brand{
    display:flex;
    align-items:center;
    gap:10px;
    color:#fff !important;
    font-family:var(--font-heading);
    font-weight:700;
    letter-spacing:.02em;
}
.navbar .navbar-brand img{
    height:38px;
    width:auto;
    border-radius:6px;
    background:#fff;
    padding:2px;
}
.navbar .nav-link{
    color:rgba(255,255,255,.85) !important;
    font-weight:500;
    margin:0 4px;
    position:relative;
}
.navbar .nav-link:hover{ color:#fff !important; }

/* ---------- Buttons ---------- */
.btn-brand{
    background:linear-gradient(135deg,var(--clr-accent),var(--clr-accent-dark));
    color:#2b1c00;
    border:none;
    font-weight:700;
    border-radius:var(--radius-pill);
    padding:12px 26px;
    box-shadow:0 10px 24px rgba(201,162,39,.35);
    transition:.25s;
}
.btn-brand:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 30px rgba(201,162,39,.45);
    color:#2b1c00;
}
.btn-brand-outline{
    background:transparent;
    border:1.5px solid rgba(255,255,255,.65);
    color:#fff;
    font-weight:600;
    border-radius:var(--radius-pill);
    padding:11px 24px;
    transition:.25s;
}
.btn-brand-outline:hover{
    background:rgba(255,255,255,.12);
    color:#fff;
    border-color:#fff;
}
.btn-primary-solid{
    background:var(--clr-primary-700);
    border:none;
    color:#fff;
    font-weight:600;
    border-radius:var(--radius-md);
    padding:12px 20px;
    transition:.2s;
}
.btn-primary-solid:hover{
    background:var(--clr-primary-800);
    color:#fff;
}

/* ---------- Hero ---------- */
.hero{
    position:relative;
    background:
        radial-gradient(circle at 15% 20%, rgba(255,255,255,.08) 0, transparent 45%),
        radial-gradient(circle at 85% 80%, rgba(255,255,255,.06) 0, transparent 40%),
        linear-gradient(150deg,var(--clr-primary-950) 0%,var(--clr-primary-700) 60%,var(--clr-primary-500) 100%);
    color:#fff;
    padding:150px 20px 130px;
    text-align:center;
    overflow:hidden;
}
.hero::before{
    content:'';
    position:absolute;
    inset:0;
    background-image:radial-gradient(rgba(255,255,255,.14) 1.4px, transparent 1.4px);
    background-size:26px 26px;
    opacity:.35;
    pointer-events:none;
}
.hero::after{
    content:'';
    position:absolute;
    bottom:0; left:0;
    width:100%; height:90px;
    background:var(--clr-primary-50);
    border-top-left-radius:50% 42px;
    border-top-right-radius:50% 42px;
}
.hero .hero-inner{ position:relative; z-index:2; }
.hero .hero-logo{
    height:76px;
    width:auto;
    margin-bottom:22px;
    filter:drop-shadow(0 8px 18px rgba(0,0,0,.25));
}
.hero h1{
    font-size:44px;
    font-weight:700;
    letter-spacing:-.01em;
    margin-bottom:14px;
}
.hero p.lead-text{
    font-size:18px;
    color:rgba(255,255,255,.85);
    max-width:640px;
    margin:0 auto 30px;
}
.hero .hero-badge{
    display:inline-block;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.25);
    color:#fff;
    padding:7px 18px;
    border-radius:var(--radius-pill);
    font-size:13px;
    font-weight:600;
    letter-spacing:.04em;
    margin-bottom:20px;
}

/* smaller page header (non-home pages) */
.page-header{
    position:relative;
    background:linear-gradient(135deg,var(--clr-primary-900),var(--clr-primary-600));
    color:#fff;
    padding:80px 20px 100px;
    text-align:center;
}
.page-header::after{
    content:'';
    position:absolute;
    bottom:0; left:0; width:100%; height:60px;
    background:var(--clr-primary-50);
    border-top-left-radius:50% 34px;
    border-top-right-radius:50% 34px;
}
.page-header h1{ font-weight:700; font-size:32px; }
.page-header p{ color:rgba(255,255,255,.85); margin-bottom:0; }

/* ---------- Generic cards ---------- */
.card-clean{
    border:none;
    border-radius:var(--radius-lg);
    background:#fff;
    box-shadow:var(--shadow-sm);
    transition:.3s;
}
.card-clean:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-md);
}
.icon-badge{
    width:62px; height:62px;
    display:flex; align-items:center; justify-content:center;
    border-radius:18px;
    background:var(--clr-primary-100);
    color:var(--clr-primary-700);
    font-size:26px;
    margin:0 auto 16px;
}

/* ---------- Stepper (Alur Pengaduan) ---------- */
.flow-steps{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:0;
    counter-reset:step;
    margin-top:40px;
}
.flow-step{
    flex:1 1 220px;
    max-width:260px;
    position:relative;
    text-align:center;
    padding:0 16px;
}
.flow-step .flow-circle{
    width:64px; height:64px;
    border-radius:50%;
    background:#fff;
    border:2px solid var(--clr-primary-200,#d9c6f0);
    color:var(--clr-primary-700);
    display:flex; align-items:center; justify-content:center;
    font-size:24px;
    margin:0 auto 16px;
    box-shadow:var(--shadow-sm);
    position:relative;
    z-index:2;
}
.flow-step .flow-num{
    position:absolute;
    top:-6px; right:6px;
    background:var(--clr-accent);
    color:#2b1c00;
    font-size:11px;
    font-weight:700;
    width:20px; height:20px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    z-index:3;
}
.flow-step h6{ font-weight:700; color:var(--clr-primary-900); margin-bottom:6px; }
.flow-step p{ color:var(--clr-muted); font-size:14px; margin:0; }
.flow-step:not(:last-child)::after{
    content:'';
    position:absolute;
    top:32px; right:-10%;
    width:calc(100% - 44px);
    height:2px;
    background:repeating-linear-gradient(90deg,var(--clr-primary-400) 0 8px,transparent 8px 16px);
    z-index:1;
}
@media (max-width:767px){
    .flow-step:not(:last-child)::after{ display:none; }
}

/* ---------- Team / struktur ---------- */
.team-card{
    border:none;
    border-radius:var(--radius-lg);
    background:#fff;
    box-shadow:var(--shadow-sm);
    padding:34px 22px;
    text-align:center;
    transition:.3s;
    height:100%;
}
.team-card:hover{
    transform:translateY(-8px);
    box-shadow:var(--shadow-md);
}
.avatar-initials{
    width:96px; height:96px;
    border-radius:50%;
    margin:0 auto 18px;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-heading);
    font-weight:700;
    font-size:28px;
    color:#fff;
    background:linear-gradient(135deg,var(--clr-primary-600),var(--clr-primary-400));
    box-shadow:0 8px 20px rgba(95,34,155,.35);
}
.role-badge{
    display:inline-block;
    padding:5px 16px;
    border-radius:var(--radius-pill);
    font-size:12px;
    font-weight:700;
    letter-spacing:.03em;
    margin-bottom:12px;
}
.role-badge.ketua{ background:var(--clr-accent-light); color:#5c4600; }
.role-badge.sekretaris{ background:var(--clr-primary-100); color:var(--clr-primary-700); }
.role-badge.anggota{ background:#e5f6ee; color:#1c7c4f; }

/* ---------- Legal / dasar hukum ---------- */
.legal-card{
    border:none;
    border-left:4px solid var(--clr-accent);
    border-radius:var(--radius-md);
    background:#fff;
    box-shadow:var(--shadow-sm);
    padding:30px 26px;
    transition:.3s;
    text-align:left;
    height:100%;
}
.legal-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }

/* ---------- Kegiatan placeholder ---------- */
.kegiatan-placeholder{
    border:2px dashed var(--clr-line);
    border-radius:var(--radius-lg);
    background:#fff;
    padding:60px 30px;
    text-align:center;
    color:var(--clr-muted);
}
.kegiatan-placeholder i{
    font-size:40px;
    color:var(--clr-primary-400);
    margin-bottom:16px;
}

/* ---------- CTA banner ---------- */
.cta-banner{
    position:relative;
    background:linear-gradient(135deg,var(--clr-primary-900),var(--clr-primary-600));
    color:#fff;
    text-align:center;
    padding:80px 20px;
    overflow:hidden;
}
.cta-banner h2{ font-weight:700; margin-bottom:10px; }
.cta-banner p{ color:rgba(255,255,255,.85); margin-bottom:26px; }

/* ---------- Contact ---------- */
.contact-item{ text-align:center; }
.contact-item .icon-badge{ background:var(--clr-primary-100); }

/* ---------- Footer ---------- */
.site-footer{
    background:var(--clr-primary-950);
    color:rgba(255,255,255,.75);
    text-align:center;
    padding:34px 20px;
}
.site-footer strong{ color:#fff; }
.site-footer .footer-divider{
    width:60px; height:2px;
    background:var(--clr-accent);
    margin:14px auto;
    border-radius:2px;
}

/* ---------- Forms ---------- */
.form-box{
    background:#fff;
    border-radius:var(--radius-lg);
    padding:36px;
    box-shadow:var(--shadow-md);
}
.form-control,.form-select{
    border-radius:var(--radius-sm);
    padding:12px 14px;
    border:1px solid var(--clr-line);
}
.form-control:focus,.form-select:focus{
    border-color:var(--clr-primary-500);
    box-shadow:0 0 0 .18rem rgba(95,34,155,.15);
}
label{ font-weight:600; color:var(--clr-ink); font-size:14px; margin-bottom:6px; }

/* ---------- Admin shared ---------- */
.admin-navbar{
    background:linear-gradient(90deg,var(--clr-primary-950),var(--clr-primary-800));
}
.admin-card{
    border:none;
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm);
    background:#fff;
}
.stat-card{
    border-radius:var(--radius-md);
    padding:22px;
    color:#fff;
}
.stat-card h5{ font-weight:500; opacity:.9; font-size:14px; text-transform:uppercase; letter-spacing:.04em; }
.stat-card h2{ font-weight:700; margin:0; }
.stat-1{ background:linear-gradient(135deg,var(--clr-primary-800),var(--clr-primary-600)); }
.stat-2{ background:linear-gradient(135deg,var(--clr-primary-600),var(--clr-primary-400)); }
.stat-3{ background:linear-gradient(135deg,#8a4fc9,#b17fe0); }
.stat-4{ background:linear-gradient(135deg,var(--clr-accent),var(--clr-accent-dark)); color:#2b1c00; }

/* =========================================================
   PPID-specific components
   ========================================================= */

/* ---------- Stat counters (beranda) ---------- */
.stat-counter{
    text-align:center;
    padding:26px 16px;
}
.stat-counter .num{
    font-family:var(--font-heading);
    font-weight:700;
    font-size:34px;
    color:var(--clr-primary-800);
    display:block;
}
.stat-counter .lbl{
    color:var(--clr-muted);
    font-size:14px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.04em;
}

/* ---------- Category tab pills (Informasi Publik) ---------- */
.tab-pill-group{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    justify-content:center;
    margin-bottom:34px;
}
.tab-pill{
    border:1.5px solid var(--clr-line);
    background:#fff;
    color:var(--clr-primary-700);
    font-weight:600;
    font-size:14px;
    padding:9px 20px;
    border-radius:var(--radius-pill);
    transition:.2s;
    cursor:pointer;
}
.tab-pill:hover{ border-color:var(--clr-primary-400); }
.tab-pill.active{
    background:var(--clr-primary-700);
    border-color:var(--clr-primary-700);
    color:#fff;
}

/* ---------- Document / DIP card ---------- */
.doc-card{
    display:flex;
    align-items:flex-start;
    gap:16px;
    background:#fff;
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-sm);
    padding:22px;
    transition:.25s;
}
.doc-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); }
.doc-card .doc-icon{
    width:52px; height:52px;
    flex:none;
    border-radius:14px;
    background:var(--clr-primary-100);
    color:var(--clr-primary-700);
    display:flex; align-items:center; justify-content:center;
    font-size:22px;
}
.doc-cat{
    display:inline-block;
    font-size:11px;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
    padding:3px 10px;
    border-radius:var(--radius-pill);
    background:var(--clr-primary-100);
    color:var(--clr-primary-700);
    margin-bottom:8px;
}
.doc-card h6{ font-weight:700; color:var(--clr-ink); margin-bottom:4px; }
.doc-card .doc-date{ font-size:12px; color:var(--clr-muted); }
.doc-empty{
    border:2px dashed var(--clr-line);
    border-radius:var(--radius-lg);
    background:#fff;
    padding:50px 30px;
    text-align:center;
    color:var(--clr-muted);
}
.doc-empty i{ font-size:34px; color:var(--clr-primary-400); margin-bottom:14px; }

/* ---------- FAQ accordion ---------- */
.faq-accordion .accordion-item{
    border:none;
    border-radius:var(--radius-md) !important;
    overflow:hidden;
    margin-bottom:14px;
    box-shadow:var(--shadow-sm);
}
.faq-accordion .accordion-button{
    font-weight:600;
    color:var(--clr-primary-900);
    background:#fff;
}
.faq-accordion .accordion-button:not(.collapsed){
    background:var(--clr-primary-100);
    color:var(--clr-primary-800);
    box-shadow:none;
}
.faq-accordion .accordion-button:focus{ box-shadow:none; }
.faq-accordion .accordion-body{ color:var(--clr-muted); }

/* ---------- Timeline step (permohonan status) ---------- */
.status-pill{
    display:inline-block;
    padding:8px 18px;
    border-radius:var(--radius-pill);
    font-weight:700;
    font-size:13px;
}
.status-diajukan{ background:#ffe9a8; color:#6b4e00; }
.status-diproses{ background:#bfe9f7; color:#075166; }
.status-selesai{ background:#c7f0da; color:#0f5a34; }
.status-ditolak{ background:#f8cdd3; color:#7c101d; }

/* ---------- Info banner (procedure notice) ---------- */
.info-banner{
    background:var(--clr-primary-100);
    border-left:4px solid var(--clr-primary-600);
    border-radius:var(--radius-md);
    padding:20px 24px;
    color:var(--clr-primary-900);
}