/* =====================================================================
   SIEVA – Sistem Evaluasi BGTK NTB
   Shared modern design system (public-facing pages)
   ===================================================================== */

:root {
    --brand-50:  #eef7fc;
    --brand-100: #d7ecf8;
    --brand-200: #aedaf1;
    --brand-400: #36a9e6;
    --brand-500: #1ca0e3;
    --brand-600: #0a7bbf;
    --brand-700: #075d93;
    --brand-800: #074c79;

    --accent-400: #ffc24d;
    --accent-500: #f5a800;
    --accent-600: #d68f00;

    --ink:    #102a43;
    --ink-2:  #243b53;
    --muted:  #627d98;
    --line:   #e3ebf2;
    --bg:     #f1f6fb;
    --surface:#ffffff;

    --success: #18a957;
    --info:    #1ca0e3;
    --warning: #f5a800;
    --danger:  #e5484d;

    --radius-sm: 10px;
    --radius:    16px;
    --radius-lg: 24px;

    --shadow-sm: 0 2px 8px rgba(16, 42, 67, .06);
    --shadow:    0 10px 30px rgba(16, 42, 67, .10);
    --shadow-lg: 0 20px 50px rgba(16, 42, 67, .16);

    --grad-brand: linear-gradient(135deg, #1ca0e3 0%, #075d93 100%);
    --grad-brand-soft: linear-gradient(135deg, #36a9e6 0%, #0a7bbf 100%);
    --grad-accent: linear-gradient(135deg, #ffc24d 0%, #f5a800 100%);
}

* { font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }

html { scroll-behavior: smooth; }

body {
    background: var(--bg);
    color: var(--ink);
    line-height: 1.6;
}

/* ---------- Navbar ---------- */
.navbar.sieva-nav {
    background: rgba(255, 255, 255, .85);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    box-shadow: 0 1px 0 rgba(16, 42, 67, .06), var(--shadow-sm);
    padding-top: .65rem;
    padding-bottom: .65rem;
}
.sieva-nav .navbar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 800;
    letter-spacing: .3px;
    color: var(--ink) !important;
}
.sieva-nav .brand-logo {
    height: 46px;
    width: auto;
}
.sieva-nav .brand-text { line-height: 1.05; }
.sieva-nav .brand-text .brand-title { font-size: 1.2rem; font-weight: 800; color: var(--ink); }
.sieva-nav .brand-text .brand-sub { font-size: .72rem; font-weight: 600; color: var(--muted); letter-spacing: .4px; text-transform: uppercase; }

.sieva-nav .nav-link {
    color: var(--ink-2) !important;
    font-weight: 600;
    border-radius: 10px;
    padding: .5rem .9rem !important;
    transition: all .2s ease;
}
.sieva-nav .nav-link:hover,
.sieva-nav .nav-link.active {
    background: var(--brand-50);
    color: var(--brand-700) !important;
}
.sieva-nav .nav-link.btn-nav {
    background: var(--grad-brand);
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(10, 123, 191, .3);
}
.sieva-nav .nav-link.btn-nav:hover { transform: translateY(-1px); }

/* ---------- Hero ---------- */
.sieva-hero {
    position: relative;
    background: var(--grad-brand);
    color: #fff;
    padding: 84px 0 110px;
    overflow: hidden;
    border-radius: 0 0 36px 36px;
}
.sieva-hero::before,
.sieva-hero::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
}
.sieva-hero::before { width: 480px; height: 480px; top: -180px; right: -120px; }
.sieva-hero::after  { width: 360px; height: 360px; bottom: -200px; left: -80px; background: rgba(255,255,255,.06); }
.sieva-hero .container { position: relative; z-index: 1; }
.sieva-hero .hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, .15);
    border: 1px solid rgba(255, 255, 255, .25);
    padding: 7px 16px;
    border-radius: 999px;
    font-weight: 600;
    font-size: .85rem;
    margin-bottom: 22px;
}
.sieva-hero h1 {
    font-weight: 800;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.15;
    margin-bottom: 18px;
}
.sieva-hero p.lead { font-size: 1.12rem; opacity: .92; max-width: 720px; margin-inline: auto; }
.sieva-hero .hero-logo {
    height: 112px;
    width: auto;
    margin-bottom: 26px;
}
.btn-hero {
    background: #fff;
    color: var(--brand-700);
    font-weight: 700;
    border: none;
    border-radius: 12px;
    padding: 13px 28px;
    box-shadow: var(--shadow);
    transition: transform .2s ease, box-shadow .2s ease;
}
.btn-hero:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); color: var(--brand-800); }

/* stat strip under hero */
.hero-stats {
    margin-top: -64px;
    position: relative;
    z-index: 2;
}
.hero-stat-card {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 22px 24px;
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    gap: 16px;
    height: 100%;
}
.hero-stat-card .ico {
    width: 52px; height: 52px;
    flex: 0 0 52px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; color: #fff;
    background: var(--grad-brand);
}
.hero-stat-card .ico.gold { background: var(--grad-accent); }
.hero-stat-card .ico.green { background: linear-gradient(135deg,#41d089,#18a957); }
.hero-stat-card .val { font-size: 1.5rem; font-weight: 800; line-height: 1; color: var(--ink); }
.hero-stat-card .lab { font-size: .85rem; color: var(--muted); font-weight: 600; }

/* ---------- Section headings ---------- */
.section-title { font-weight: 800; color: var(--ink); }
.section-sub { color: var(--muted); }
.eyebrow {
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: .78rem;
    font-weight: 700;
    color: var(--brand-600);
}

/* ---------- Cards ---------- */
.sieva-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    overflow: hidden;
}
.sieva-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow);
    border-color: var(--brand-200);
}
.activity-card .card-accent {
    height: 6px;
    background: var(--grad-brand);
}
.activity-card .card-title { color: var(--ink); font-weight: 800; }
.activity-meta {
    display: flex; align-items: center; gap: 8px;
    background: var(--brand-50);
    border-radius: 10px;
    padding: 8px 12px;
    color: var(--ink-2);
    font-weight: 600;
    font-size: .85rem;
}
.activity-meta i { color: var(--brand-600); }
.chip-status {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .75rem; font-weight: 700;
    padding: 4px 12px; border-radius: 999px;
    background: rgba(24,169,87,.12); color: var(--success);
}

/* ---------- Buttons ---------- */
.btn { border-radius: 12px; font-weight: 600; }
.btn-lg { border-radius: 14px; }
.btn-brand {
    background: var(--grad-brand);
    border: none; color: #fff;
    box-shadow: 0 8px 20px rgba(10, 123, 191, .25);
    transition: transform .2s ease, box-shadow .2s ease;
}
.btn-brand:hover { transform: translateY(-2px); color:#fff; box-shadow: 0 12px 26px rgba(10, 123, 191, .35); }
.btn-accent { background: var(--grad-accent); border: none; color: #5a3d00; font-weight: 700; }
.btn-accent:hover { color: #4a3200; transform: translateY(-2px); }
.btn-outline-brand { border: 2px solid var(--brand-200); color: var(--brand-700); background: #fff; }
.btn-outline-brand:hover { background: var(--brand-50); color: var(--brand-800); border-color: var(--brand-400); }

.btn-success { background: linear-gradient(135deg,#41d089,#18a957); border: none; }
.btn-info    { background: var(--grad-brand-soft); border: none; }
.btn-warning { background: var(--grad-accent); border: none; color: #5a3d00; }

/* ---------- Forms ---------- */
.form-control, .form-select {
    border-radius: 12px;
    border: 1.5px solid var(--line);
    padding: 12px 15px;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.form-control:focus, .form-select:focus {
    border-color: var(--brand-400);
    box-shadow: 0 0 0 .22rem rgba(28, 160, 227, .18);
}
.form-control[readonly] { background: #f6f9fc; color: var(--ink-2); }
.form-label { font-weight: 700; color: var(--ink-2); }

.form-section {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-sm);
}
.form-section .section-head {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 22px; padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}
.form-section .section-head .sec-ico {
    width: 44px; height: 44px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: var(--brand-50); color: var(--brand-600); font-size: 1.15rem;
    flex: 0 0 44px;
}
.form-section .section-head h3 { font-size: 1.15rem; font-weight: 800; margin: 0; color: var(--ink); }

/* ---------- Smiley / sentiment ---------- */
.smiley-container {
    display: flex; justify-content: center; gap: 14px;
    margin: 12px 0 6px; flex-wrap: wrap;
}
.smiley-option {
    cursor: pointer;
    border: 2px solid var(--line);
    border-radius: var(--radius);
    padding: 16px 12px;
    text-align: center;
    min-width: 116px;
    background: #fff;
    box-shadow: var(--shadow-sm);
    transition: all .25s cubic-bezier(.4,0,.2,1);
}
.smiley-option:hover { transform: translateY(-4px); border-color: var(--brand-200); box-shadow: var(--shadow); }
.smiley-option.selected {
    border-color: var(--brand-500);
    background: var(--brand-50);
    transform: translateY(-4px);
    box-shadow: 0 12px 26px rgba(28, 160, 227, .25);
}
.smiley-option .emoji { font-size: 44px; display: block; line-height: 1; margin-bottom: 8px; }
.smiley-option .label { font-size: 13px; font-weight: 700; color: var(--ink-2); }

@keyframes pulse { 0% { transform: scale(1);} 50% { transform: scale(1.12);} 100% { transform: scale(1.04);} }

/* ---------- Rating scale (evaluasi) ---------- */
.rating-row {
    display: flex; gap: 8px; flex-wrap: wrap;
}
.rating-option {
    cursor: pointer;
    border: 2px solid var(--line);
    border-radius: 12px;
    padding: 8px 0;
    width: 52px;
    text-align: center;
    font-weight: 700;
    color: var(--ink-2);
    background: #fff;
    transition: all .18s ease;
}
.rating-option:hover { border-color: var(--brand-300, var(--brand-200)); background: var(--brand-50); }
.rating-option.selected { background: var(--grad-brand); border-color: transparent; color: #fff; box-shadow: 0 6px 14px rgba(10,123,191,.3); }

/* ---------- Modals ---------- */
.modal-content { border: none; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.modal-header { border: none; padding: 20px 26px; }
.modal-header.bg-primary { background: var(--grad-brand) !important; }
.modal-header.bg-success { background: linear-gradient(135deg,#41d089,#18a957) !important; }
.modal-header.bg-info    { background: var(--grad-brand-soft) !important; }
.modal-body { padding: 26px; }
.modal-title { font-weight: 800; }

/* ---------- Alerts ---------- */
.alert { border: none; border-radius: 12px; }

/* ---------- Footer ---------- */
.sieva-footer {
    background: linear-gradient(135deg, #075d93 0%, #04304c 100%);
    color: #cfe3f1;
    padding: 48px 0 24px;
    margin-top: 64px;
    border-radius: 36px 36px 0 0;
}
.sieva-footer .foot-logo {
    height: 56px;
}
.sieva-footer h5 { color: #fff; font-weight: 800; letter-spacing: .3px; }
.sieva-footer a { color: #cfe3f1; text-decoration: none; }
.sieva-footer a:hover { color: #fff; }
.sieva-footer .foot-divider { border-color: rgba(255,255,255,.12); }
.sieva-footer .foot-copy { color: #9fc2d8; font-size: .88rem; }

/* ---------- Auth pages ---------- */
.auth-wrap {
    min-height: 100vh;
    display: flex; align-items: center;
    background: var(--grad-brand);
    position: relative; overflow: hidden;
    padding: 40px 0;
}
.auth-wrap::before, .auth-wrap::after {
    content: ''; position: absolute; border-radius: 50%; background: rgba(255,255,255,.07);
}
.auth-wrap::before { width: 460px; height: 460px; top: -160px; left: -120px; }
.auth-wrap::after  { width: 380px; height: 380px; bottom: -180px; right: -100px; }
.auth-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    position: relative; z-index: 1;
}
.auth-head {
    text-align: center;
    padding: 36px 30px 26px;
    background: linear-gradient(180deg, var(--brand-50), #fff);
    border-bottom: 1px solid var(--line);
}
.auth-head .auth-logo {
    height: 84px; margin-bottom: 14px;
}
.auth-head h2 { font-weight: 800; color: var(--ink); margin-bottom: 4px; }
.auth-head p { color: var(--muted); margin: 0; font-weight: 600; }
.auth-body { padding: 32px 30px; }
.info-box {
    background: var(--brand-50);
    border: 1px solid var(--brand-100);
    border-radius: 12px;
    padding: 18px 20px;
    margin-top: 22px;
}
.info-box h6 { color: var(--brand-700); font-weight: 800; }
.info-box ul { color: var(--ink-2); }

/* ---------- Utilities ---------- */
.text-brand { color: var(--brand-600) !important; }
.bg-brand-soft { background: var(--brand-50) !important; }

@media (max-width: 575.98px) {
    .sieva-hero { padding: 60px 0 90px; }
    .hero-stats { margin-top: -48px; }
    .smiley-option { min-width: 92px; padding: 12px 8px; }
    .smiley-option .emoji { font-size: 36px; }
}