/*==================================================
SI-PENA DESIGN SYSTEM
BKPSDM Kabupaten Padang Pariaman
==================================================*/

:root{

    /* ===============================
       COLOR
    =============================== */

    --primary:#2563EB;
    --primary-hover:#1D4ED8;
    --primary-light:#DBEAFE;

    --success:#10B981;
    --warning:#F59E0B;
    --danger:#EF4444;

    --purple:#8B5CF6;

    --dark:#0F172A;

    --text:#334155;

    --muted:#64748B;

    --border:#E2E8F0;

    --background:#F8FAFC;

    --card:#FFFFFF;

    /* ===============================
       RADIUS
    =============================== */

    --radius-xs:8px;
    --radius-sm:12px;
    --radius-md:18px;
    --radius-lg:24px;
    --radius-xl:32px;
    --radius-pill:999px;

    /* ===============================
       SHADOW
    =============================== */

    --shadow-sm:
        0 4px 12px rgba(15,23,42,.04);

    --shadow-md:
        0 10px 30px rgba(15,23,42,.06);

    --shadow-lg:
        0 20px 60px rgba(15,23,42,.08);

    --shadow-xl:
        0 30px 80px rgba(15,23,42,.12);

    /* ===============================
       TRANSITION
    =============================== */

    --transition:
        all .35s ease;

}

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--background);

    color:var(--text);

    font-family:'Plus Jakarta Sans',sans-serif;

    font-size:16px;

    line-height:1.7;

    overflow-x:hidden;

}

h1{

    font-size:64px;

    font-weight:800;

    color:var(--dark);

    line-height:1.1;

}

h2{

    font-size:42px;

    font-weight:700;

}

h3{

    font-size:32px;

    font-weight:700;

}

h4{

    font-size:24px;

}

h5{

    font-size:20px;

}

p{

    color:var(--muted);

}

.container-premium{

    width:min(1280px,92%);

    margin:auto;

}

.section{

    padding:100px 0;

}

.badge-premium{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 20px;

    border-radius:999px;

    background:#fff;

    border:1px solid var(--border);

    font-size:14px;

    font-weight:600;

    color:var(--primary);

    box-shadow:var(--shadow-sm);

}

.divider{

    width:100%;

    height:1px;

    background:var(--border);

}

.grid-2{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

}

.grid-4{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

}

.mt-1{margin-top:10px;}
.mt-2{margin-top:20px;}
.mt-3{margin-top:30px;}
.mt-4{margin-top:40px;}
.mt-5{margin-top:50px;}

.mb-1{margin-bottom:10px;}
.mb-2{margin-bottom:20px;}
.mb-3{margin-bottom:30px;}
.mb-4{margin-bottom:40px;}
.mb-5{margin-bottom:50px;}

.bg-white{

    background:#fff;

}

.bg-primary{

    background:var(--primary);

}

.bg-light{

    background:var(--background);

}

.glass{

    background:rgba(255,255,255,.7);

    backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.5);

}

::selection{

    background:var(--primary);

    color:white;

}