:root {
    --pramuka-brown: #7a4819;
    --pramuka-brown-dark: #4d2d12;
    --pramuka-brown-soft: #9c6330;
    --pramuka-gold: #f7c948;
    --pramuka-gold-dark: #e0a900;
    --pramuka-green: #2f9e44;
    --pramuka-green-dark: #207032;
    --pramuka-cream: #fff8e7;
    --pramuka-paper: #fffdf7;
    --pramuka-muted: #6b5b4b;
    --pramuka-border: rgba(122, 72, 25, .14);
    --pramuka-shadow: 0 18px 45px rgba(77, 45, 18, .12);
}

* { box-sizing: border-box; }
body.pramuka-public,
body.pramuka-login,
body.pramuka-admin {
    font-family: 'Poppins', 'Source Sans Pro', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #2b2118;
}
body.pramuka-public,
body.pramuka-login {
    background:
        radial-gradient(circle at top left, rgba(247, 201, 72, .26), transparent 34rem),
        radial-gradient(circle at bottom right, rgba(47, 158, 68, .16), transparent 36rem),
        linear-gradient(135deg, #fff8e7 0%, #f7efe0 46%, #eef8e9 100%);
    min-height: 100vh;
}

.pramuka-navbar {
    background: rgba(255, 253, 247, .94) !important;
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--pramuka-border);
    box-shadow: 0 10px 30px rgba(77, 45, 18, .08);
}
.pramuka-navbar .navbar-brand {
    color: var(--pramuka-brown-dark) !important;
    font-weight: 800;
    letter-spacing: -.02em;
}
.pramuka-navbar .navbar-brand i { color: var(--pramuka-green); }
.pramuka-navbar .nav-link {
    color: #4d3827 !important;
    font-weight: 600;
    border-radius: 999px;
    padding: .55rem .95rem !important;
    margin: .1rem;
}
.pramuka-navbar .nav-link.active,
.pramuka-navbar .nav-link:hover {
    color: var(--pramuka-brown-dark) !important;
    background: rgba(247, 201, 72, .28);
}
.pramuka-navbar .navbar-toggler { border-color: rgba(122, 72, 25, .2); }
.pramuka-navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2877,45,18,1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.pramuka-hero {
    position: relative;
    overflow: hidden;
    padding: 5.5rem 0 4.25rem;
    background:
        linear-gradient(135deg, rgba(122,72,25,.96), rgba(156,99,48,.92) 48%, rgba(47,158,68,.9)),
        repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 12px, transparent 12px 24px);
    color: #fff;
    border-radius: 0 0 42px 42px;
    box-shadow: 0 24px 50px rgba(77,45,18,.2);
}
.pramuka-hero::before,
.pramuka-hero::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(247, 201, 72, .22);
    filter: blur(2px);
}
.pramuka-hero::before { width: 260px; height: 260px; right: -72px; top: -70px; }
.pramuka-hero::after { width: 180px; height: 180px; left: 7%; bottom: -90px; }
.pramuka-hero .container { position: relative; z-index: 2; }
.pramuka-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .85rem;
    border-radius: 999px;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.28);
    font-weight: 700;
    font-size: .86rem;
}
.pramuka-title {
    font-weight: 900;
    letter-spacing: -.045em;
    line-height: 1.02;
}
.pramuka-subtitle {
    color: rgba(255,255,255,.9);
    font-size: 1.08rem;
    line-height: 1.75;
}
.pramuka-card,
.course-card,
.coach-card,
.filter-bar,
.filter-sidebar,
.cert-card,
.login-card,
.admin-card {
    background: rgba(255,253,247,.96);
    border: 1px solid var(--pramuka-border);
    border-radius: 24px;
    box-shadow: var(--pramuka-shadow);
}
.pramuka-card-hover,
.course-card,
.coach-card {
    transition: transform .24s ease, box-shadow .24s ease;
}
.pramuka-card-hover:hover,
.course-card:hover,
.coach-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 26px 55px rgba(77,45,18,.16);
}
.pramuka-stat {
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 22px;
    padding: 1.25rem;
    backdrop-filter: blur(14px);
}
.pramuka-stat .number,
.stat-number {
    font-weight: 900;
    font-size: clamp(1.8rem, 4vw, 2.65rem);
    letter-spacing: -.04em;
}
.section-title {
    font-weight: 900;
    letter-spacing: -.035em;
    color: var(--pramuka-brown-dark);
}
.section-title::after {
    content: '';
    display: block;
    width: 76px;
    height: 5px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--pramuka-gold), var(--pramuka-green));
    margin: .75rem auto 0;
}
.section-title.text-start::after { margin-left: 0; }
.pramuka-icon-circle {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--pramuka-gold), #ffe9a7);
    color: var(--pramuka-brown-dark);
    box-shadow: 0 10px 25px rgba(247,201,72,.25);
}
.btn-pramuka,
.btn-custom,
.btn-filter,
.btn-register,
.search-box button {
    background: linear-gradient(135deg, var(--pramuka-gold), #ffd86f) !important;
    color: var(--pramuka-brown-dark) !important;
    border: 0 !important;
    font-weight: 800 !important;
    border-radius: 999px !important;
    box-shadow: 0 12px 22px rgba(247, 201, 72, .24);
}
.btn-pramuka:hover,
.btn-custom:hover,
.btn-filter:hover,
.btn-register:hover,
.search-box button:hover {
    filter: brightness(.98);
    transform: translateY(-1px);
}
.btn-pramuka-outline,
.btn-outline-custom {
    border: 2px solid rgba(255,255,255,.68) !important;
    color: #fff !important;
    border-radius: 999px !important;
    font-weight: 800 !important;
}
.btn-pramuka-outline:hover,
.btn-outline-custom:hover {
    background: rgba(255,255,255,.16) !important;
    color: #fff !important;
}
.pramuka-badge,
.course-badge,
.badge-pusdiklatda,
.badge-pusdiklatcab {
    border-radius: 999px;
    padding: .48rem .8rem;
    font-weight: 800;
    letter-spacing: .01em;
}
.badge-pusdiklatda,
.course-badge.da { background: linear-gradient(135deg, var(--pramuka-brown-soft), var(--pramuka-brown-dark)); }
.badge-pusdiklatcab,
.course-badge.cab { background: linear-gradient(135deg, var(--pramuka-green), var(--pramuka-green-dark)); }
.search-box {
    background: rgba(255,255,255,.98);
    border: 1px solid rgba(122,72,25,.12);
    border-radius: 999px;
    padding: .35rem;
    box-shadow: 0 18px 45px rgba(77,45,18,.14);
}
.search-box input,
.form-control,
.form-select {
    border-color: rgba(122,72,25,.16) !important;
    border-radius: 16px !important;
}
.search-box input { border: 0 !important; }
.form-control:focus,
.form-select:focus {
    border-color: rgba(247,201,72,.8) !important;
    box-shadow: 0 0 0 .22rem rgba(247,201,72,.22) !important;
}
.pramuka-footer,
.footer {
    color: #fff;
    background:
        linear-gradient(135deg, var(--pramuka-brown-dark), var(--pramuka-brown) 56%, var(--pramuka-green-dark));
    margin-top: 4rem;
    padding: 3.25rem 0 1.25rem;
}
.pramuka-footer a,
.footer a { color: rgba(255,255,255,.88) !important; }
.pramuka-footer a:hover,
.footer a:hover { color: var(--pramuka-gold) !important; }

/* Admin theme */
body.pramuka-admin { background: #fbf6ea; }
body.pramuka-admin .content-wrapper {
    background:
        radial-gradient(circle at top left, rgba(247,201,72,.18), transparent 28rem),
        radial-gradient(circle at bottom right, rgba(47,158,68,.12), transparent 32rem),
        #fbf6ea;
}
body.pramuka-admin .main-header.navbar {
    background: rgba(255,253,247,.94) !important;
    border-bottom: 1px solid var(--pramuka-border);
    box-shadow: 0 8px 26px rgba(77,45,18,.08);
}
body.pramuka-admin .main-sidebar {
    background:
        linear-gradient(180deg, var(--pramuka-brown-dark), var(--pramuka-brown) 58%, #2e6f35) !important;
}
body.pramuka-admin .brand-link {
    border-bottom: 1px solid rgba(255,255,255,.14) !important;
    background: rgba(255,255,255,.08);
}
body.pramuka-admin .brand-text { font-weight: 900 !important; letter-spacing: -.02em; }
body.pramuka-admin .sidebar .nav-link {
    border-radius: 16px;
    margin: .15rem .55rem;
    color: rgba(255,255,255,.86) !important;
}
body.pramuka-admin .sidebar .nav-link.active,
body.pramuka-admin .sidebar .nav-link:hover {
    background: rgba(247,201,72,.96) !important;
    color: var(--pramuka-brown-dark) !important;
    box-shadow: 0 10px 25px rgba(0,0,0,.14);
}
body.pramuka-admin .content-header h1 {
    font-weight: 900;
    color: var(--pramuka-brown-dark);
    letter-spacing: -.035em;
}
body.pramuka-admin .breadcrumb a { color: var(--pramuka-brown); }
body.pramuka-admin .card {
    border: 1px solid var(--pramuka-border);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 14px 34px rgba(77,45,18,.09);
}
body.pramuka-admin .card-header {
    background: rgba(255,253,247,.92);
    border-bottom: 1px solid rgba(122,72,25,.12);
}
body.pramuka-admin .card-title { font-weight: 800 !important; color: var(--pramuka-brown-dark); }
body.pramuka-admin .small-box {
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 18px 38px rgba(77,45,18,.13);
}
body.pramuka-admin .small-box .icon { font-size: 3.35rem; opacity: .24; }
body.pramuka-admin .small-box .small-box-footer { background: rgba(0,0,0,.12); font-weight: 700; }
body.pramuka-admin .bg-info,
body.pramuka-admin .bg-success,
body.pramuka-admin .bg-warning,
body.pramuka-admin .bg-danger {
    color: #fff !important;
}
body.pramuka-admin .bg-info { background: linear-gradient(135deg, #9c6330, #7a4819) !important; }
body.pramuka-admin .bg-success { background: linear-gradient(135deg, #2f9e44, #207032) !important; }
body.pramuka-admin .bg-warning { background: linear-gradient(135deg, #f7c948, #d99800) !important; color: #3b270f !important; }
body.pramuka-admin .bg-danger { background: linear-gradient(135deg, #c65f2d, #8a3a17) !important; }
body.pramuka-admin .table thead th {
    border-top: 0;
    color: var(--pramuka-brown-dark);
    background: rgba(247,201,72,.18);
}
body.pramuka-admin .btn-primary,
body.pramuka-admin .btn-info {
    background: var(--pramuka-brown) !important;
    border-color: var(--pramuka-brown) !important;
}
body.pramuka-admin .btn-warning {
    background: var(--pramuka-gold) !important;
    border-color: var(--pramuka-gold) !important;
    color: var(--pramuka-brown-dark) !important;
}
.admin-hero {
    background:
        linear-gradient(135deg, rgba(122,72,25,.98), rgba(156,99,48,.94) 52%, rgba(47,158,68,.9)),
        repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 10px, transparent 10px 20px);
    color: #fff;
    border-radius: 26px;
    padding: 1.65rem;
    box-shadow: 0 22px 46px rgba(77,45,18,.16);
    margin-bottom: 1.3rem;
}
.admin-hero h2 { font-weight: 900; letter-spacing: -.04em; }
.admin-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    border-radius: 999px;
    padding: .45rem .8rem;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.24);
    font-weight: 700;
}
.metric-card {
    border: 1px solid rgba(122,72,25,.12);
    border-radius: 22px;
    padding: 1.2rem;
    height: 100%;
    background: rgba(255,253,247,.94);
    box-shadow: 0 16px 34px rgba(77,45,18,.08);
}
.metric-card .metric-number {
    font-size: 2.2rem;
    line-height: 1;
    font-weight: 900;
    color: var(--pramuka-brown-dark);
    letter-spacing: -.04em;
}
.metric-card .metric-label { color: var(--pramuka-muted); font-weight: 700; }
.metric-card .metric-icon {
    width: 52px; height: 52px; border-radius: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--pramuka-gold), #ffe5a0);
    color: var(--pramuka-brown-dark);
}

@media (max-width: 767.98px) {
    .pramuka-hero { padding: 3.5rem 0 3rem; border-radius: 0 0 28px 28px; }
    .search-box { border-radius: 22px; }
    .search-box .input-group { flex-direction: column; gap: .5rem; }
    .search-box input,
    .search-box button { width: 100%; border-radius: 16px !important; }
}

/* Logo Bina Jaya pada dashboard dan sidebar */
.dashboard-hero-logo {
    position: absolute;
    right: 24px;
    top: 18px;
    width: 86px;
    height: 86px;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid rgba(255,255,255,.88);
    background: #fff;
    box-shadow: 0 14px 34px rgba(0,0,0,.22);
    opacity: .96;
}
.admin-hero .row { position: relative; z-index: 2; }
body.pramuka-admin .brand-link .brand-image,
body.pramuka-admin .user-panel img.rounded-circle {
    border: 2px solid rgba(247,201,72,.95);
}