/*
 * Dapur Guru V2.20.1 - Correction R2.2.1
 * Final Logo Sync + Mobile Hero Responsive
 */

/* =========================================================
   AUTH BRAND
   Keep login/register templates untouched.
   Render the approved transparent brand on their existing
   brand wrappers and hide legacy text/mark children.
   ========================================================= */

.auth-art .auth-brand,
.auth-mobile-head .brand {
    display: block !important;
    background-color: transparent !important;
    background-image: url("../images/dapurguru-brand-direct-transparent.png") !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    background-size: contain !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    -webkit-filter: none !important;
    text-decoration: none !important;
}

.auth-art .auth-brand {
    width: min(248px, 82%) !important;
    height: 72px !important;
}

.auth-mobile-head .brand {
    width: min(176px, 62vw) !important;
    height: 48px !important;
}

.auth-art .auth-brand > *,
.auth-mobile-head .brand > * {
    display: none !important;
}

.auth-art .auth-brand::before,
.auth-art .auth-brand::after,
.auth-mobile-head .brand::before,
.auth-mobile-head .brand::after {
    content: none !important;
    display: none !important;
}

/* =========================================================
   DASHBOARD SIDEBAR BRAND
   ========================================================= */

.vl-sidebar .vl-brand {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    -webkit-filter: none !important;
}

.vl-sidebar .vl-brand::before,
.vl-sidebar .vl-brand::after {
    content: none !important;
    display: none !important;
}

.vl-sidebar .vl-brand .dg-brand-logo {
    display: block !important;
    width: auto !important;
    height: 48px !important;
    max-width: 190px !important;
    object-fit: contain !important;
    object-position: left center !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    -webkit-filter: none !important;
    opacity: 1 !important;
}

/* =========================================================
   LANDING TABLET / MOBILE
   Root fix: stop portrait-stage from reserving a tall blank
   area. Visual content participates in normal document flow.
   ========================================================= */

@media (max-width: 860px) {
    html,
    body {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .vl-hero[data-v2202-r2-landing="1"] {
        min-height: 0 !important;
        height: auto !important;
        overflow: hidden !important;
    }

    .vl-hero[data-v2202-r2-landing="1"] .vl-hero-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        min-height: 0 !important;
        height: auto !important;
        align-items: start !important;
        gap: 1.15rem !important;
        padding-top: 1.5rem !important;
        padding-bottom: 1.75rem !important;
    }

    .vl-hero[data-v2202-r2-landing="1"] .vl-hero-copy {
        width: 100% !important;
        max-width: 42rem !important;
        min-width: 0 !important;
        margin: 0 auto !important;
        text-align: center !important;
    }

    .vl-hero[data-v2202-r2-landing="1"] .vl-hero-copy h1,
    .vl-hero[data-v2202-r2-landing="1"] .vl-hero-copy p {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .vl-hero[data-v2202-r2-landing="1"] .vl-actions {
        width: 100% !important;
        max-width: 32rem !important;
        margin-left: auto !important;
        margin-right: auto !important;
        justify-content: center !important;
    }

    .vl-hero[data-v2202-r2-landing="1"] .vl-trust {
        justify-content: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .vl-hero[data-v2202-r2-landing="1"] .vl-portrait-stage {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 0 auto !important;
        padding: 0 !important;
        gap: .8rem !important;
        overflow: visible !important;
    }

    .vl-hero[data-v2202-r2-landing="1"] .vl-portrait-orbit {
        position: relative !important;
        inset: auto !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
        display: block !important;
        width: min(19rem, 82vw) !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .vl-hero[data-v2202-r2-landing="1"] .vl-portrait {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .vl-hero[data-v2202-r2-landing="1"] .vl-ai-card {
        position: relative !important;
        inset: auto !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
        width: min(18.5rem, 92vw) !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        text-align: left !important;
    }

    .vl-hero[data-v2202-r2-landing="1"] .vl-stat-float {
        position: relative !important;
        inset: auto !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
        width: min(22rem, 100%) !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }
}

@media (max-width: 520px) {
    .dg-container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .vl-hero[data-v2202-r2-landing="1"] .vl-hero-grid {
        gap: .9rem !important;
        padding-top: 1.15rem !important;
        padding-bottom: 1.25rem !important;
    }

    .vl-hero[data-v2202-r2-landing="1"] .vl-hero-copy h1 {
        font-size: clamp(2rem, 10vw, 2.55rem) !important;
        line-height: 1.04 !important;
        letter-spacing: -.04em !important;
    }

    .vl-hero[data-v2202-r2-landing="1"] .vl-hero-copy p {
        font-size: .88rem !important;
        line-height: 1.62 !important;
    }

    .vl-hero[data-v2202-r2-landing="1"] .vl-actions {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: .65rem !important;
    }

    .vl-hero[data-v2202-r2-landing="1"] .vl-actions .vl-btn {
        width: 100% !important;
    }

    .vl-hero[data-v2202-r2-landing="1"] .vl-trust {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: min(20rem, 100%) !important;
        gap: .55rem .7rem !important;
        text-align: left !important;
    }

    .vl-hero[data-v2202-r2-landing="1"] .vl-trust span:last-child {
        grid-column: 1 / -1 !important;
        justify-self: center !important;
    }

    .vl-hero[data-v2202-r2-landing="1"] .vl-portrait-orbit {
        width: min(17rem, 78vw) !important;
    }

    .vl-hero[data-v2202-r2-landing="1"] .vl-ai-card {
        width: min(17rem, 90vw) !important;
        padding: .65rem .75rem !important;
        font-size: .68rem !important;
    }

    .vl-hero[data-v2202-r2-landing="1"] .vl-stat-float {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        width: 100% !important;
    }

    .vl-hero[data-v2202-r2-landing="1"] .vl-stat-float > div {
        min-width: 0 !important;
        padding: .65rem .35rem !important;
    }

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

    .vl-hero[data-v2202-r2-landing="1"] .vl-stat-float small {
        font-size: .63rem !important;
        white-space: normal !important;
    }

    .auth-art .auth-brand {
        width: min(220px, 72vw) !important;
        height: 58px !important;
    }

    .auth-mobile-head .brand {
        width: min(160px, 58vw) !important;
        height: 44px !important;
    }

    .vl-sidebar .vl-brand .dg-brand-logo {
        height: 44px !important;
        max-width: 176px !important;
    }
}

/* =========================================================
   R2.2.2 - Feature Heading Color + Section Gap Tightening
   ========================================================= */

/* Match "Fitur Unggulan Pembelajaran" to the solid blue
   heading treatment used by "Cara Kerja yang Mudah". */
.v2202-r2-feature-anchor .vl-section-head h2 .vl-gradient {
    background: none !important;
    background-image: none !important;
    color: inherit !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: currentColor !important;
}

/* Remove the double vertical breathing room between the
   feature-card block and Cara Kerja. */
.v2202-r2-feature-anchor .vl-section:last-child {
    padding-bottom: 1.5rem !important;
}

.v2202-r2-feature-anchor + .v221-how-section {
    margin-top: 0 !important;
    padding-top: 1.5rem !important;
}

@media (max-width: 860px) {
    .v2202-r2-feature-anchor .vl-section:last-child {
        padding-bottom: 1rem !important;
    }

    .v2202-r2-feature-anchor + .v221-how-section {
        padding-top: 1rem !important;
    }
}

/* =========================================================
   R2.2.3 - Landing Section Rhythm Final
   Rebased on committed R2.2.2
   ========================================================= */

/* Cara Kerja -> Dirancang untuk Guru Indonesia */
.v221-how-section {
    padding-bottom: 1.5rem !important;
}

.v221-how-section + #testimoni {
    margin-top: 0 !important;
    padding-top: 1.5rem !important;
}

/* Dirancang untuk Guru Indonesia -> CTA */
#testimoni {
    padding-bottom: 1.5rem !important;
}

#testimoni + #harga {
    margin-top: 0 !important;
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

/* CTA -> Footer */
#harga {
    margin-bottom: 0 !important;
}

#harga + .vl-footer {
    margin-top: 0 !important;
}

@media (max-width: 860px) {
    .v221-how-section {
        padding-bottom: 1rem !important;
    }

    .v221-how-section + #testimoni {
        padding-top: 1rem !important;
    }

    #testimoni {
        padding-bottom: 1rem !important;
    }

    #testimoni + #harga {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
}

/* =========================================================
   R2.2.5.1 - Transparent Hero Asset Correction
   True-alpha illustration + single dynamic statistics panel
   ========================================================= */

.vl-hero[data-v2202-r2-landing="1"] {
    position: relative !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 78% 20%, rgba(219, 234, 254, .88) 0%, rgba(219, 234, 254, .30) 28%, transparent 54%),
        radial-gradient(circle at 70% 68%, rgba(243, 238, 255, .92) 0%, rgba(243, 238, 255, .32) 28%, transparent 56%),
        linear-gradient(135deg, #FFFFFF 0%, #EFF6FF 46%, #F3EEFF 78%, #FFFFFF 100%) !important;
}

.vl-hero[data-v2202-r2-landing="1"]::before,
.vl-hero[data-v2202-r2-landing="1"]::after {
    content: "";
    position: absolute;
    pointer-events: none;
    border-radius: 999px;
    z-index: 0;
}

.vl-hero[data-v2202-r2-landing="1"]::before {
    width: 250px;
    height: 250px;
    right: 1.5%;
    top: 7%;
    background: radial-gradient(circle, rgba(96, 165, 250, .18), rgba(196, 181, 253, .10) 56%, transparent 74%);
}

.vl-hero[data-v2202-r2-landing="1"]::after {
    width: 210px;
    height: 210px;
    right: 31%;
    bottom: -7%;
    background: radial-gradient(circle, rgba(196, 181, 253, .17), rgba(219, 234, 254, .08) 58%, transparent 76%);
}

.vl-hero[data-v2202-r2-landing="1"] .vl-hero-grid {
    position: relative !important;
    z-index: 1 !important;
    align-items: center !important;
}

.vl-hero[data-v2202-r2-landing="1"] .vl-portrait-stage[data-r2251-transparent-hero="1"] {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: .35rem 0 .9rem !important;
    margin: 0 !important;
    overflow: visible !important;
    isolation: isolate !important;
}

.vl-hero[data-v2202-r2-landing="1"]
.vl-portrait-stage[data-r2251-transparent-hero="1"]
.vl-portrait-orbit {
    position: relative !important;
    inset: auto !important;
    width: min(780px, 114%) !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    animation: r2251HeroFloat 7s ease-in-out infinite;
    will-change: transform;
}

.vl-hero[data-v2202-r2-landing="1"]
.vl-portrait-stage[data-r2251-transparent-hero="1"]
.vl-portrait {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: drop-shadow(0 24px 32px rgba(37, 99, 235, .12)) !important;
    opacity: 1 !important;
    visibility: visible !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
}

.vl-hero[data-v2202-r2-landing="1"]
.vl-portrait-stage[data-r2251-transparent-hero="1"]
.vl-ai-card {
    position: absolute !important;
    top: 13% !important;
    right: -1% !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 5 !important;
    width: min(205px, 39%) !important;
    margin: 0 !important;
    padding: .82rem .92rem !important;
    border: 1px solid rgba(255,255,255,.76) !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.72) !important;
    -webkit-backdrop-filter: blur(14px) saturate(135%) !important;
    backdrop-filter: blur(14px) saturate(135%) !important;
    box-shadow:
        0 16px 38px rgba(37, 99, 235, .12),
        inset 0 1px 0 rgba(255,255,255,.88) !important;
    transform: none !important;
}

.vl-hero[data-v2202-r2-landing="1"]
.vl-portrait-stage[data-r2251-transparent-hero="1"]
.vl-stat-float {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    z-index: 6 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: min(610px, 92%) !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: -2.15rem auto 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(255,255,255,.78) !important;
    border-radius: 22px !important;
    background: rgba(255,255,255,.72) !important;
    -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
    backdrop-filter: blur(18px) saturate(140%) !important;
    box-shadow:
        0 22px 56px rgba(37, 99, 235, .13),
        0 8px 20px rgba(124, 58, 237, .07),
        inset 0 1px 0 rgba(255,255,255,.92) !important;
}

.vl-hero[data-v2202-r2-landing="1"]
.vl-portrait-stage[data-r2251-transparent-hero="1"]
.vl-stat-float > div {
    min-width: 0 !important;
    padding: .95rem .7rem !important;
    text-align: center !important;
}

.vl-hero[data-v2202-r2-landing="1"]
.vl-portrait-stage[data-r2251-transparent-hero="1"]
.vl-stat-float > div:not(:last-child) {
    border-right: 1px solid rgba(148,163,184,.20) !important;
}

.vl-hero[data-v2202-r2-landing="1"]
.vl-portrait-stage[data-r2251-transparent-hero="1"]
.vl-stat-float strong {
    display: block !important;
    margin: 0 !important;
    font-size: clamp(1.04rem, 1.5vw, 1.35rem) !important;
    line-height: 1.05 !important;
    font-weight: 800 !important;
}

.vl-hero[data-v2202-r2-landing="1"]
.vl-portrait-stage[data-r2251-transparent-hero="1"]
.vl-stat-float small {
    display: block !important;
    margin-top: .28rem !important;
    color: #64748b !important;
    font-size: .71rem !important;
    line-height: 1.25 !important;
}

@keyframes r2251HeroFloat {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, -6px, 0); }
}

@media (max-width: 1100px) {
    .vl-hero[data-v2202-r2-landing="1"]
    .vl-portrait-stage[data-r2251-transparent-hero="1"]
    .vl-portrait-orbit {
        width: min(700px, 110%) !important;
    }

    .vl-hero[data-v2202-r2-landing="1"]
    .vl-portrait-stage[data-r2251-transparent-hero="1"]
    .vl-ai-card {
        right: 1% !important;
    }
}

@media (max-width: 860px) {
    .vl-hero[data-v2202-r2-landing="1"] {
        overflow-x: clip !important;
    }

    .vl-hero[data-v2202-r2-landing="1"]
    .vl-portrait-stage[data-r2251-transparent-hero="1"] {
        gap: .65rem !important;
        padding: 0 0 .65rem !important;
        overflow: visible !important;
    }

    .vl-hero[data-v2202-r2-landing="1"]
    .vl-portrait-stage[data-r2251-transparent-hero="1"]
    .vl-portrait-orbit {
        width: min(650px, 98vw) !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    .vl-hero[data-v2202-r2-landing="1"]
    .vl-portrait-stage[data-r2251-transparent-hero="1"]
    .vl-ai-card {
        position: relative !important;
        inset: auto !important;
        width: min(330px, 90vw) !important;
        max-width: 100% !important;
        margin: -.35rem auto 0 !important;
    }

    .vl-hero[data-v2202-r2-landing="1"]
    .vl-portrait-stage[data-r2251-transparent-hero="1"]
    .vl-stat-float {
        width: min(560px, 96vw) !important;
        margin: 0 auto !important;
    }
}

@media (max-width: 520px) {
    .vl-hero[data-v2202-r2-landing="1"]
    .vl-portrait-stage[data-r2251-transparent-hero="1"]
    .vl-portrait-orbit {
        width: 100% !important;
        max-width: 100% !important;
    }

    .vl-hero[data-v2202-r2-landing="1"]
    .vl-portrait-stage[data-r2251-transparent-hero="1"]
    .vl-ai-card {
        width: min(300px, 92vw) !important;
        margin-top: -.2rem !important;
    }

    .vl-hero[data-v2202-r2-landing="1"]
    .vl-portrait-stage[data-r2251-transparent-hero="1"]
    .vl-stat-float {
        width: 100% !important;
        border-radius: 18px !important;
    }

    .vl-hero[data-v2202-r2-landing="1"]
    .vl-portrait-stage[data-r2251-transparent-hero="1"]
    .vl-stat-float > div {
        padding: .78rem .2rem !important;
    }

    .vl-hero[data-v2202-r2-landing="1"]
    .vl-portrait-stage[data-r2251-transparent-hero="1"]
    .vl-stat-float strong {
        font-size: .98rem !important;
    }

    .vl-hero[data-v2202-r2-landing="1"]
    .vl-portrait-stage[data-r2251-transparent-hero="1"]
    .vl-stat-float small {
        font-size: .61rem !important;
        white-space: normal !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vl-hero[data-v2202-r2-landing="1"]
    .vl-portrait-stage[data-r2251-transparent-hero="1"]
    .vl-portrait-orbit {
        animation: none !important;
        transform: none !important;
    }
}

/* =========================================================
   R2.2.5.2 - White Box + Aspect Ratio Correction
   Root cause:
   - legacy .vl-portrait-orbit:before painted a white layer
   - legacy aspect-ratio:1 forced a square container
   ========================================================= */

.vl-hero[data-v2202-r2-landing="1"]
.vl-portrait-stage[data-r2251-transparent-hero="1"] {
    min-height: 0 !important;
    height: auto !important;
    padding-bottom: .55rem !important;
    background: transparent !important;
    overflow: visible !important;
}

.vl-hero[data-v2202-r2-landing="1"]
.vl-portrait-stage[data-r2251-transparent-hero="1"]
.vl-portrait-orbit {
    display: block !important;
    width: min(780px, 114%) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    padding: 0 !important;
    margin: 0 auto !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    line-height: 0 !important;
}

.vl-hero[data-v2202-r2-landing="1"]
.vl-portrait-stage[data-r2251-transparent-hero="1"]
.vl-portrait-orbit::before {
    content: none !important;
    display: none !important;
    position: static !important;
    inset: auto !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.vl-hero[data-v2202-r2-landing="1"]
.vl-portrait-stage[data-r2251-transparent-hero="1"]
.vl-portrait {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.vl-hero[data-v2202-r2-landing="1"]
.vl-portrait-stage[data-r2251-transparent-hero="1"]
.vl-stat-float {
    margin: -.75rem auto 0 !important;
}

@media (max-width: 1100px) {
    .vl-hero[data-v2202-r2-landing="1"]
    .vl-portrait-stage[data-r2251-transparent-hero="1"]
    .vl-portrait-orbit {
        width: min(700px, 108%) !important;
    }
}

@media (max-width: 860px) {
    .vl-hero[data-v2202-r2-landing="1"]
    .vl-portrait-stage[data-r2251-transparent-hero="1"] {
        padding-bottom: .4rem !important;
    }

    .vl-hero[data-v2202-r2-landing="1"]
    .vl-portrait-stage[data-r2251-transparent-hero="1"]
    .vl-portrait-orbit {
        width: min(650px, 100%) !important;
        max-width: 100% !important;
    }

    .vl-hero[data-v2202-r2-landing="1"]
    .vl-portrait-stage[data-r2251-transparent-hero="1"]
    .vl-stat-float {
        margin: 0 auto !important;
    }
}

@media (max-width: 520px) {
    .vl-hero[data-v2202-r2-landing="1"]
    .vl-portrait-stage[data-r2251-transparent-hero="1"]
    .vl-portrait-orbit {
        width: 100% !important;
        max-width: 100% !important;
    }
}