/*
 * Dapur Guru V2.20.2 Correction R2
 * Landing Refresh + Dashboard Polish + Brand Logo Alignment
 * Visual-only layer. Loaded last in guest/auth/app layouts.
 */

:root {
    --r2-navy: #1d3a70;
    --r2-navy-deep: #142d5c;
    --r2-blue: #2f67f6;
    --r2-indigo: #4f46e5;
    --r2-violet: #6b4ee8;
    --r2-pink: #ef476f;
    --r2-gold: #ffc20a;
    --r2-gold-soft: #ffe18a;
    --r2-cream: #fff7dc;
    --r2-ink: #111827;
    --r2-muted: #667085;
    --r2-line: #dbe5f3;
    --r2-surface: #ffffff;
    --r2-soft: #f6f9ff;
    --r2-success: #16a36a;
    --r2-shadow: 0 18px 55px rgba(27, 55, 103, .12);
    --r2-shadow-soft: 0 10px 30px rgba(27, 55, 103, .08);
}

/* ================================================================
   BRAND LOGO ALIGNMENT
   Preserve official logo artwork, normalize placement and add the
   user-supplied warm yellow -> cream brand-light direction.
   ================================================================ */

.vl-brand,
.brand {
    position: relative;
    isolation: isolate;
}

.vl-brand > .dg-brand-logo,
.brand > .dg-brand-logo {
    display: block;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    filter:
        drop-shadow(0 1px 0 rgba(255,255,255,.12))
        drop-shadow(0 5px 16px rgba(255, 194, 10, .18));
}

.vl-brand::after,
.brand::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 10%;
    right: 10%;
    bottom: -4px;
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        rgba(255, 194, 10, .72) 0%,
        rgba(255, 225, 138, .48) 48%,
        rgba(255, 247, 220, 0) 100%
    );
    filter: blur(8px);
    pointer-events: none;
}

.vl-nav .dg-brand-logo {
    height: 54px !important;
}

.vl-sidebar .dg-brand-logo {
    height: 48px !important;
}

.auth-art .dg-brand-logo-auth {
    height: 62px !important;
}

/* ================================================================
   LANDING PAGE
   ================================================================ */

.vl-nav {
    min-height: 88px;
    background: var(--r2-navy) !important;
    border-bottom: 0 !important;
    box-shadow: 0 8px 30px rgba(20, 45, 92, .12) !important;
}

.vl-nav .vl-nav-inner {
    min-height: 88px;
    gap: 32px;
}

.vl-nav .vl-nav-links {
    gap: 34px !important;
    align-items: center;
}

.vl-nav .vl-nav-links > a {
    color: rgba(255,255,255,.92) !important;
    font-weight: 700 !important;
    letter-spacing: -.01em;
}

.vl-nav .vl-nav-links > a:hover {
    color: #ffffff !important;
    transform: translateY(-1px);
}

.vl-nav .vl-nav-ghost,
.vl-nav .vl-nav-cta {
    color: #fff !important;
}

.vl-hero[data-v2202-r2-landing="1"] {
    position: relative;
    overflow: hidden;
    min-height: 570px;
    padding: 50px 0 58px !important;
    background:
        radial-gradient(circle at 93% 62%, rgba(255, 229, 214, .72) 0, rgba(255,229,214,.22) 16%, transparent 34%),
        radial-gradient(circle at 3% 89%, rgba(226, 236, 255, .85) 0, rgba(226,236,255,.26) 15%, transparent 31%),
        #fff !important;
}

.vl-hero[data-v2202-r2-landing="1"]::after {
    content: "";
    position: absolute;
    width: 250px;
    height: 250px;
    right: -125px;
    bottom: 36px;
    border-radius: 38px;
    background: rgba(255, 225, 213, .52);
    transform: rotate(7deg);
    pointer-events: none;
}

.vl-hero[data-v2202-r2-landing="1"] .vl-hero-grid {
    min-height: 460px;
    grid-template-columns: minmax(0, .96fr) minmax(410px, 1.04fr) !important;
    gap: clamp(38px, 6vw, 90px) !important;
    align-items: center !important;
}

.vl-hero[data-v2202-r2-landing="1"] .vl-hero-copy {
    max-width: 690px;
    padding: 16px 0;
}

.vl-hero[data-v2202-r2-landing="1"] .vl-eyebrow {
    display: none !important;
}

.vl-hero[data-v2202-r2-landing="1"] h1 {
    margin: 0 0 26px !important;
    color: #050505 !important;
    font-size: clamp(3rem, 5.3vw, 5.15rem) !important;
    line-height: .93 !important;
    letter-spacing: -.055em !important;
    font-weight: 900 !important;
    text-wrap: balance;
}

.vl-hero[data-v2202-r2-landing="1"] h1 .vl-gradient {
    color: #050505 !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
}

.vl-hero[data-v2202-r2-landing="1"] h1 .vl-hero-tail {
    display: inline-block;
    color: transparent !important;
    background: linear-gradient(90deg, #ef334f 0%, #e53f75 44%, #7b2fd3 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.vl-hero[data-v2202-r2-landing="1"] .vl-hero-copy > p {
    max-width: 650px;
    margin: 0 0 28px !important;
    color: #657089 !important;
    font-size: clamp(1rem, 1.28vw, 1.16rem) !important;
    line-height: 1.72 !important;
}

.vl-hero[data-v2202-r2-landing="1"] .vl-actions {
    margin: 0 0 24px !important;
}

.vl-hero[data-v2202-r2-landing="1"] .vl-btn-primary {
    min-height: 52px;
    padding: 0 28px !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: linear-gradient(100deg, #2f67f6 0%, #6949ef 100%) !important;
    box-shadow: 0 14px 30px rgba(76, 79, 230, .24) !important;
    color: #fff !important;
    font-weight: 800 !important;
}

.vl-hero[data-v2202-r2-landing="1"] .vl-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 34px rgba(76, 79, 230, .3) !important;
}

.vl-hero[data-v2202-r2-landing="1"] .vl-trust {
    display: flex !important;
    flex-wrap: wrap;
    gap: 22px !important;
    color: #718096 !important;
    font-size: .95rem;
}

.vl-hero[data-v2202-r2-landing="1"] .vl-trust span {
    position: relative;
    padding-left: 24px;
}

.vl-hero[data-v2202-r2-landing="1"] .vl-trust span::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 50%;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #e7fbf3;
    color: var(--r2-success);
    font-size: .72rem;
    font-weight: 900;
}

.vl-hero[data-v2202-r2-landing="1"] .vl-portrait-stage {
    position: relative;
    min-height: 450px;
    display: grid;
    place-items: center;
    z-index: 2;
}

.vl-hero[data-v2202-r2-landing="1"] .vl-portrait-orbit {
    width: min(100%, 520px) !important;
    height: 390px !important;
    border-radius: 42px !important;
    border: 0 !important;
    background:
        radial-gradient(circle at 50% 55%, #edf2ff 0%, #f7f9ff 58%, transparent 59%) !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.vl-hero[data-v2202-r2-landing="1"] .vl-portrait {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center bottom !important;
    border-radius: 0 !important;
    filter: drop-shadow(0 24px 22px rgba(31, 59, 105, .12));
}

.vl-hero[data-v2202-r2-landing="1"] .vl-ai-card {
    display: none !important;
}

.v2202-r2-hero-tools {
    position: absolute;
    inset: 18px 12px 92px 12px;
    pointer-events: none;
    z-index: 4;
}

.v2202-r2-tool {
    position: absolute;
    display: grid;
    place-items: center;
    width: 76px;
    height: 60px;
    border-radius: 15px;
    border: 5px solid #fff;
    box-shadow: 0 12px 28px rgba(22, 52, 98, .14);
    font-weight: 900;
    font-size: 1.5rem;
    background: #fff;
}

.v2202-r2-tool-text {
    left: 5%;
    top: 20%;
    color: #2767df;
    background: #eaf2ff;
    transform: rotate(6deg);
}

.v2202-r2-tool-video {
    left: 36%;
    top: 0;
    color: #fff;
    background: #ef3c6d;
    transform: rotate(-7deg);
}

.v2202-r2-tool-image {
    right: 4%;
    top: 8%;
    color: #306ee8;
    background: #fff3c4;
    transform: rotate(5deg);
}

.v2202-r2-tool-quiz {
    right: 1%;
    top: 43%;
    width: 86px;
    color: #178a73;
    background: #e5fbf4;
    transform: rotate(-3deg);
    font-size: .92rem;
    letter-spacing: .1em;
}

.vl-hero[data-v2202-r2-landing="1"] .vl-stat-float {
    position: absolute !important;
    left: 50% !important;
    bottom: 16px !important;
    width: min(92%, 430px) !important;
    transform: translateX(-50%) !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    border: 1px solid #eef2f8 !important;
    border-radius: 10px !important;
    overflow: hidden;
    background: rgba(255,255,255,.96) !important;
    box-shadow: 0 12px 35px rgba(26, 54, 101, .1) !important;
    backdrop-filter: blur(8px);
}

.vl-hero[data-v2202-r2-landing="1"] .vl-stat-float > div {
    padding: 16px 10px !important;
    border-right: 1px solid #eef2f8;
    text-align: center;
}

.vl-hero[data-v2202-r2-landing="1"] .vl-stat-float > div:last-child {
    border-right: 0;
}

.vl-hero[data-v2202-r2-landing="1"] .vl-stat-float strong {
    color: #159b68 !important;
    font-size: 1.1rem !important;
}

.vl-hero[data-v2202-r2-landing="1"] .vl-stat-float > div:nth-child(2) strong {
    color: #315ecb !important;
}

.vl-hero[data-v2202-r2-landing="1"] .vl-stat-float small {
    display: block;
    margin-top: 4px;
    color: #7d879b !important;
    font-size: .74rem !important;
}

#fitur.vl-section,
#cara-kerja.vl-section,
#testimoni.vl-section,
#harga.vl-section {
    scroll-margin-top: 96px;
}

/* ================================================================
   AUTH / LOGIN
   ================================================================ */

.auth-shell[data-v2202-r2-auth="1"] {
    min-height: 100vh;
    background: #fff;
}

.auth-shell[data-v2202-r2-auth="1"] .auth-art {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 72% 26%, rgba(255,255,255,.08) 0, transparent 34%),
        linear-gradient(145deg, #2948bd 0%, #4552d8 50%, #654de9 100%) !important;
    color: #fff;
}

.auth-shell[data-v2202-r2-auth="1"] .auth-art::after {
    content: "";
    position: absolute;
    width: 360px;
    height: 360px;
    right: -125px;
    bottom: -145px;
    border-radius: 50%;
    background: rgba(255,255,255,.07);
    pointer-events: none;
}

.auth-shell[data-v2202-r2-auth="1"] .auth-brand {
    position: relative;
    z-index: 3;
}

.auth-shell[data-v2202-r2-auth="1"] .auth-art-copy {
    position: relative;
    z-index: 3;
    max-width: 570px;
}

.auth-shell[data-v2202-r2-auth="1"] .auth-kicker {
    display: inline-flex !important;
    align-items: center;
    min-height: 32px;
    padding: 0 14px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.12) !important;
    border: 1px solid rgba(255,255,255,.16);
    color: rgba(255,255,255,.9) !important;
    font-weight: 700;
}

.auth-shell[data-v2202-r2-auth="1"] .auth-art-copy h1 {
    max-width: 620px;
    margin-top: 24px !important;
    color: #fff !important;
    font-size: clamp(2.45rem, 4vw, 4rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -.045em !important;
    font-weight: 500 !important;
}

.auth-shell[data-v2202-r2-auth="1"] .auth-art-copy > p {
    max-width: 570px;
    color: rgba(255,255,255,.76) !important;
    font-size: 1rem !important;
    line-height: 1.65;
}

.auth-shell[data-v2202-r2-auth="1"] .auth-benefits {
    display: grid !important;
    gap: 15px !important;
    margin-top: 30px !important;
}

.auth-shell[data-v2202-r2-auth="1"] .auth-benefits > div {
    display: grid !important;
    grid-template-columns: 30px 1fr !important;
    column-gap: 11px !important;
    align-items: center;
}

.auth-shell[data-v2202-r2-auth="1"] .auth-benefits > div > span {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #66c6ff !important;
    color: #fff !important;
    font-weight: 900;
}

.auth-shell[data-v2202-r2-auth="1"] .auth-benefits strong {
    color: #fff !important;
    font-size: .96rem;
}

.auth-shell[data-v2202-r2-auth="1"] .auth-benefits small {
    display: none !important;
}

.auth-shell[data-v2202-r2-auth="1"] .vl-auth-illustration {
    right: 7% !important;
    bottom: 9% !important;
    transform: scale(1.08);
    opacity: .98;
}

.auth-shell[data-v2202-r2-auth="1"] .auth-art-footer {
    color: rgba(255,255,255,.66) !important;
}

.auth-shell[data-v2202-r2-auth="1"] .auth-panel {
    background: #fff !important;
}

.auth-shell[data-v2202-r2-auth="1"] .auth-box {
    border-radius: 22px !important;
}

/* ================================================================
   DASHBOARD POLISH
   ================================================================ */

.vl-dashboard-body {
    background: #f7faff !important;
}

.vl-sidebar {
    background:
        linear-gradient(180deg, var(--r2-navy) 0%, var(--r2-navy-deep) 100%) !important;
    border-right: 0 !important;
    box-shadow: 10px 0 34px rgba(19, 44, 88, .1) !important;
}

.vl-sidebar > .vl-brand {
    margin-bottom: 14px;
}

.vl-side-nav {
    gap: 4px !important;
}

.vl-side-nav > a {
    min-height: 43px !important;
    border-radius: 9px !important;
    color: rgba(255,255,255,.76) !important;
    font-weight: 650 !important;
}

.vl-side-nav > a:hover {
    color: #fff !important;
    background: rgba(255,255,255,.08) !important;
}

.vl-side-nav > a.active {
    color: #fff !important;
    background: linear-gradient(100deg, #3469e8 0%, #5079ef 100%) !important;
    box-shadow: 0 8px 20px rgba(40, 91, 220, .24);
}

.vl-side-nav .vl-side-icon {
    color: rgba(255,255,255,.62) !important;
}

.vl-side-nav > a.active .vl-side-icon {
    color: #fff !important;
}

.vl-stat-grid[data-v2202-r2-dashboard="1"] {
    gap: 14px !important;
}

.vl-stat-grid[data-v2202-r2-dashboard="1"] .vl-stat-card {
    min-height: 104px !important;
    border: 1px solid #e1e9f5 !important;
    border-radius: 17px !important;
    background: #fff !important;
    box-shadow: 0 8px 25px rgba(32, 62, 112, .06) !important;
}

.vl-stat-grid[data-v2202-r2-dashboard="1"] .vl-stat-icon {
    border-radius: 12px !important;
    background: #edf3ff !important;
    color: #4d74db !important;
}

.vl-board[data-v2202-r2-dashboard="1"] {
    gap: 18px !important;
}

.vl-board[data-v2202-r2-dashboard="1"] .vl-panel {
    border: 1px solid #e1e9f5 !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 8px 28px rgba(32, 62, 112, .055) !important;
}

.vl-board[data-v2202-r2-dashboard="1"] .vl-panel-head h2 {
    color: #273e78 !important;
    letter-spacing: -.02em;
}

.vl-board[data-v2202-r2-dashboard="1"] .vl-quick-grid {
    gap: 12px !important;
}

.vl-board[data-v2202-r2-dashboard="1"] .vl-quick {
    min-height: 118px !important;
    padding: 17px !important;
    border: 1px solid #dbe5f5 !important;
    border-radius: 15px !important;
    background: #fff !important;
    box-shadow: none !important;
    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.vl-board[data-v2202-r2-dashboard="1"] .vl-quick:hover {
    transform: translateY(-2px);
    border-color: #b7c9ef !important;
    box-shadow: 0 10px 24px rgba(48, 92, 180, .1) !important;
}

.vl-board[data-v2202-r2-dashboard="1"] .vl-quick-icon {
    width: 38px !important;
    height: 38px !important;
    display: grid;
    place-items: center;
    border-radius: 10px !important;
    color: #5578dc !important;
    background: #edf3ff !important;
}

.vl-board[data-v2202-r2-dashboard="1"] .vl-quick strong {
    color: #2b3f72 !important;
}

.vl-board[data-v2202-r2-dashboard="1"] .vl-quick small {
    color: #8893a8 !important;
    line-height: 1.35 !important;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */

@media (min-width: 1280px) {
    .vl-board[data-v2202-r2-dashboard="1"] .vl-quick-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 1100px) {
    .vl-hero[data-v2202-r2-landing="1"] .vl-hero-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 28px !important;
    }

    .vl-hero[data-v2202-r2-landing="1"] h1 {
        font-size: clamp(2.8rem, 5.6vw, 4.5rem) !important;
    }

    .v2202-r2-tool {
        transform: scale(.9);
    }
}

@media (max-width: 860px) {
    .vl-nav {
        min-height: 72px;
    }

    .vl-nav .vl-nav-inner {
        min-height: 72px;
    }

    .vl-nav .dg-brand-logo {
        height: 45px !important;
    }

    .vl-hero[data-v2202-r2-landing="1"] {
        padding: 36px 0 48px !important;
    }

    .vl-hero[data-v2202-r2-landing="1"] .vl-hero-grid {
        grid-template-columns: 1fr !important;
        min-height: 0;
    }

    .vl-hero[data-v2202-r2-landing="1"] .vl-hero-copy {
        text-align: center;
        margin-inline: auto;
    }

    .vl-hero[data-v2202-r2-landing="1"] .vl-hero-copy > p {
        margin-inline: auto !important;
    }

    .vl-hero[data-v2202-r2-landing="1"] .vl-actions,
    .vl-hero[data-v2202-r2-landing="1"] .vl-trust {
        justify-content: center !important;
    }

    .vl-hero[data-v2202-r2-landing="1"] .vl-portrait-stage {
        min-height: 390px;
    }

    .vl-hero[data-v2202-r2-landing="1"] .vl-portrait-orbit {
        height: 340px !important;
    }

    .auth-shell[data-v2202-r2-auth="1"] .auth-art {
        min-height: 360px;
    }

    .auth-shell[data-v2202-r2-auth="1"] .auth-art-copy h1 {
        font-size: clamp(2.2rem, 8vw, 3.2rem) !important;
    }
}

@media (max-width: 560px) {
    .vl-hero[data-v2202-r2-landing="1"] h1 {
        font-size: clamp(2.5rem, 13vw, 3.4rem) !important;
    }

    .vl-hero[data-v2202-r2-landing="1"] .vl-trust {
        gap: 10px 18px !important;
        font-size: .83rem;
    }

    .vl-hero[data-v2202-r2-landing="1"] .vl-portrait-stage {
        min-height: 340px;
    }

    .vl-hero[data-v2202-r2-landing="1"] .vl-portrait-orbit {
        height: 300px !important;
    }

    .v2202-r2-tool {
        width: 58px;
        height: 50px;
        border-width: 3px;
        font-size: 1.08rem;
    }

    .v2202-r2-tool-quiz {
        width: 68px;
        font-size: .72rem;
    }

    .vl-hero[data-v2202-r2-landing="1"] .vl-stat-float {
        width: 96% !important;
    }

    .vl-board[data-v2202-r2-dashboard="1"] .vl-quick-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .vl-board[data-v2202-r2-dashboard="1"] .vl-quick {
        min-height: 104px !important;
        padding: 14px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vl-hero[data-v2202-r2-landing="1"] *,
    .auth-shell[data-v2202-r2-auth="1"] *,
    .vl-board[data-v2202-r2-dashboard="1"] * {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}