/* =========================================================
   PAKSEH.WEB.ID
   DARK 3D + SEMI NEON UI
   ========================================================= */

:root {
    --bg: #070910;
    --bg-soft: #0c0f18;

    --card: #10131f;
    --card-2: #0d101a;

    --text: #f5f7ff;
    --text-soft: #9299ad;
    --text-muted: #666d82;

    --purple: #8b5cf6;
    --purple-light: #b18cff;
    --blue: #06b6ff;
    --pink: #ff3eb5;
    --cyan: #00e5ff;

    --border: rgba(255,255,255,.08);

    --sidebar-width: 245px;

    --neon-angle: 0deg;
}


/* =========================================================
   RESET
   ========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;

    color: var(--text);

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background:
        radial-gradient(
            circle at 75% 10%,
            rgba(139,92,246,.10),
            transparent 30%
        ),
        radial-gradient(
            circle at 15% 85%,
            rgba(0,190,255,.07),
            transparent 28%
        ),
        var(--bg);

    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea {
    font-family: inherit;
}


/* =========================================================
   NEON ANIMATION
   ========================================================= */

@property --neon-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@keyframes neonRotate {
    from {
        --neon-angle: 0deg;
    }

    to {
        --neon-angle: 360deg;
    }
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.sidebar {
    position: fixed;

    top: 0;
    left: 0;

    width: var(--sidebar-width);
    height: 100vh;

    padding: 24px 15px;

    display: flex;
    flex-direction: column;

    background:
        linear-gradient(
            180deg,
            rgba(13,15,25,.98),
            rgba(6,8,14,.99)
        );

    border-right:
        1px solid rgba(255,255,255,.06);

    box-shadow:
        15px 0 50px rgba(0,0,0,.30);

    z-index: 1000;
}


/* =========================================================
   BRAND
   ========================================================= */

.brand {
    display: flex;
    align-items: center;

    gap: 12px;

    padding:
        3px 9px 27px;
}

.brand-logo {
    width: 43px;
    height: 43px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 13px;

    color: white;

    font-size: 21px;
    font-weight: 900;

    background:
        linear-gradient(
            145deg,
            #a78bfa,
            #5427ad
        );

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

    box-shadow:
        inset 0 2px 3px rgba(255,255,255,.20),
        inset 0 -5px 10px rgba(0,0,0,.25),
        0 0 25px rgba(139,92,246,.20);
}

.brand-text {
    display: flex;
    flex-direction: column;

    line-height: 1.1;
}

.brand-text strong {
    font-size: 16px;
    font-weight: 750;
}

.brand-text span {
    margin-top: 4px;

    color: #777e93;

    font-size: 10px;

    letter-spacing: 1.5px;
}


/* =========================================================
   MENU
   ========================================================= */

.menu {
    display: flex;
    flex-direction: column;

    gap: 7px;
}


/*
   Menu item dibuat menggunakan 2 lapisan:

   ::before = background bagian dalam
   ::after  = garis neon bergerak
*/

.menu-item {
    position: relative;

    min-height: 48px;

    display: flex;
    align-items: center;

    gap: 12px;

    padding: 0 14px;

    border-radius: 13px;

    color: #9299ad;

    font-size: 12px;

    overflow: hidden;

    isolation: isolate;

    transition:
        color .25s ease,
        transform .25s ease;
}


/* neon border */

.menu-item::after {
    content: "";

    position: absolute;

    inset: 0;

    border-radius: inherit;

    background:
        conic-gradient(
            from var(--neon-angle),

            transparent 0deg,
            transparent 255deg,

            rgba(139,92,246,.04) 270deg,
            rgba(139,92,246,.25) 282deg,

            rgba(255,255,255,.95) 290deg,

            var(--neon-color,#8b5cf6) 298deg,

            rgba(139,92,246,.05) 312deg,

            transparent 330deg,
            transparent 360deg
        );

    animation:
        neonRotate 4s linear infinite;

    z-index: -2;
}


/* bagian dalam */

.menu-item::before {
    content: "";

    position: absolute;

    inset: 2px;

    border-radius: 11px;

    background:
        linear-gradient(
            145deg,
            rgba(18,21,34,.98),
            rgba(10,12,21,.98)
        );

    z-index: -1;
}


/* isi menu */

.menu-item > * {
    position: relative;

    z-index: 2;
}


/* warna masing-masing */

.menu-item:nth-child(1) {
    --neon-color: #8b5cf6;
}

.menu-item:nth-child(2) {
    --neon-color: #06b6ff;
}

.menu-item:nth-child(3) {
    --neon-color: #ff3eb5;
}

.menu-item:nth-child(4) {
    --neon-color: #8b5cf6;
}

.menu-item.active {
    color: white;

    transform:
        translateX(2px);

    filter:
        drop-shadow(
            0 0 10px
            rgba(139,92,246,.15)
        );
}

.menu-item:hover {
    color: white;

    transform:
        translateX(3px);
}


/* =========================================================
   MENU ICON
   ========================================================= */

.menu-icon {
    width: 23px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 17px;

    color: #a6adbf;

    transition:
        color .25s ease,
        text-shadow .25s ease;
}

.menu-item:hover .menu-icon,
.menu-item.active .menu-icon {
    color: #b18cff;

    text-shadow:
        0 0 12px rgba(139,92,246,.65);
}


/* =========================================================
   DIVIDER
   ========================================================= */

.menu-divider {
    height: 1px;

    margin:
        13px 7px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.08),
            transparent
        );
}


/* =========================================================
   SIDEBAR FOOTER
   ========================================================= */

.sidebar-footer {
    margin-top: auto;

    padding:
        18px 8px 4px;

    display: flex;
    flex-direction: column;

    gap: 4px;

    color: #4e5569;

    font-size: 10px;
}

.sidebar-footer strong {
    color: #737a91;

    font-weight: 500;
}


/* =========================================================
   MAIN
   ========================================================= */

.main {
    min-height: 100vh;

    margin-left:
        var(--sidebar-width);
}


/* =========================================================
   TOPBAR
   ========================================================= */

.topbar {
    position: sticky;

    top: 0;

    height: 70px;

    display: flex;
    align-items: center;

    padding:
        0 32px;

    background:
        rgba(7,9,16,.72);

    backdrop-filter:
        blur(18px);

    border-bottom:
        1px solid rgba(255,255,255,.05);

    z-index: 500;
}

.topbar-title {
    color: #aeb5c8;

    font-size: 12px;
}

.topbar-actions {
    margin-left: auto;

    display: flex;
    align-items: center;

    gap: 14px;
}

.topbar-dot {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--purple);

    box-shadow:
        0 0 15px
        rgba(139,92,246,.9);
}


/* =========================================================
   THEME BUTTON
   ========================================================= */

.theme-toggle {
    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 11px;

    color: #aeb5c8;

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

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

    font-size: 17px;

    cursor: pointer;

    transition:
        .25s ease;
}

.theme-toggle:hover {
    color: white;

    border-color:
        rgba(139,92,246,.35);

    background:
        rgba(139,92,246,.12);

    box-shadow:
        0 0 20px
        rgba(139,92,246,.15);
}


/* =========================================================
   MOBILE MENU BUTTON
   ========================================================= */

.menu-toggle {
    display: none;

    width: 38px;
    height: 38px;

    border: 0;

    border-radius: 10px;

    color: white;

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

    font-size: 20px;

    cursor: pointer;
}


/* =========================================================
   CONTENT
   ========================================================= */

.content {
    width:
        min(
            1100px,
            calc(100% - 60px)
        );

    margin:
        0 auto;

    padding:
        48px 0 60px;
}


/* =========================================================
   HERO
   ========================================================= */

.hero {
    position: relative;

    min-height: 390px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    padding:
        55px 30px;

    text-align: center;

    border-radius: 28px;

    overflow: hidden;

    isolation: isolate;

    background:
        #0d101d;

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

    box-shadow:
        0 25px 70px rgba(0,0,0,.35);
}


/* HERO NEON BORDER */

.hero::before {
    content: "";

    position: absolute;

    inset: 0;

    border-radius: inherit;

    background:
        conic-gradient(
            from var(--neon-angle),

            transparent 0deg,
            transparent 250deg,

            rgba(139,92,246,.05) 265deg,
            rgba(139,92,246,.35) 280deg,

            white 290deg,

            #8b5cf6 298deg,
            #06b6ff 305deg,

            rgba(6,182,255,.05) 320deg,

            transparent 335deg,
            transparent 360deg
        );

    animation:
        neonRotate 5s linear infinite;

    z-index: -2;
}


/* HERO INNER */

.hero::after {
    content: "";

    position: absolute;

    inset: 2px;

    border-radius: 26px;

    background:
        radial-gradient(
            circle at 20% 30%,
            rgba(139,92,246,.08),
            transparent 28%
        ),
        radial-gradient(
            circle at 85% 70%,
            rgba(0,180,255,.07),
            transparent 25%
        ),
        linear-gradient(
            145deg,
            #101321,
            #090b14
        );

    z-index: -1;
}


/* =========================================================
   HERO GLOW
   ========================================================= */

.hero-glow {
    position: absolute;

    width: 280px;
    height: 280px;

    border-radius: 50%;

    filter:
        blur(80px);

    opacity: .17;

    pointer-events: none;
}

.glow-one {
    top: -160px;
    right: -80px;

    background:
        var(--purple);
}

.glow-two {
    bottom: -170px;
    left: -80px;

    background:
        var(--blue);
}


/* =========================================================
   CUSTOM LOGO
   ========================================================= */

/* =====================================================
   LOGO UTAMA
   3D + NEON RING + MOVING LIGHT
===================================================== */

.custom-logo {

    --neon-angle: 0deg;

    position: relative;

    width: 150px;
    height: 150px;

    margin-bottom: 30px;

    padding: 9px;

    border-radius: 38px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.18),
            rgba(255,255,255,.02)
        );

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

    box-shadow:

        0 25px 60px
        rgba(0,0,0,.45),

        0 0 35px
        rgba(139,92,246,.35),

        0 0 70px
        rgba(139,92,246,.12);

    transform:
        perspective(600px)
        rotateX(5deg);

    z-index: 2;

    isolation: isolate;
}


/* =====================================================
   NEON RING BERGERAK
===================================================== */

.custom-logo::before {

    content: "";

    position: absolute;

    inset: -3px;

    border-radius: 41px;

    padding: 3px;

    background:

        conic-gradient(
            from var(--neon-angle),

            #6d28d9 0deg,

            #8b5cf6 35deg,

            #c084fc 70deg,

            #f472b6 110deg,

            #ff4fb3 145deg,

            #22d3ee 190deg,

            #38bdf8 230deg,

            #6366f1 280deg,

            #8b5cf6 325deg,

            #6d28d9 360deg
        );

    /*
       Membuat bagian tengah transparan
       sehingga hanya menjadi ring
    */

    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);

    -webkit-mask-composite:
        xor;

    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);

    mask-composite:
        exclude;

    z-index: -1;

    filter:

        drop-shadow(
            0 0 5px
            rgba(139,92,246,.95)
        )

        drop-shadow(
            0 0 12px
            rgba(217,70,239,.75)
        )

        drop-shadow(
            0 0 22px
            rgba(34,211,238,.55)
        );

    animation:
        neonRingRotate
        4s
        linear
        infinite;
}


/* =====================================================
   CAHAYA BESAR DI LUAR RING
===================================================== */

.custom-logo::after {

    content: "";

    position: absolute;

    inset: -16px;

    border-radius: 52px;

    background:

        conic-gradient(
            from var(--neon-angle),

            transparent 0deg,

            rgba(139,92,246,.05) 45deg,

            rgba(139,92,246,.30) 90deg,

            rgba(255,92,199,.28) 150deg,

            rgba(34,211,238,.24) 210deg,

            transparent 280deg,

            transparent 360deg
        );

    filter:
        blur(14px);

    opacity:
        .85;

    z-index: -2;

    animation:
        neonGlowRotate
        4s
        linear
        infinite;
}


/* =====================================================
   LOGO INNER
===================================================== */

.logo-inner {

    position: relative;

    width: 100%;
    height: 100%;

    display: flex;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    border-radius: 27px;

    background:
        #ffffff;

    box-shadow:

        inset 0 3px 4px
        rgba(255,255,255,.30),

        inset 0 -8px 14px
        rgba(0,0,0,.20),

        0 0 25px
        rgba(139,92,246,.25);
}


/* =====================================================
   GAMBAR LOGO
===================================================== */

.logo-inner img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    border-radius: 27px;
}


/* =====================================================
   PANTULAN CAHAYA DI DALAM LOGO
   MUNCUL ± SETIAP 4 DETIK
===================================================== */

.logo-inner::after {

    content: "";

    position: absolute;

    top: -35%;

    left: -80%;

    width: 45%;

    height: 170%;

    background:

        linear-gradient(
            105deg,

            transparent 0%,

            rgba(255,255,255,.03) 30%,

            rgba(255,255,255,.95) 50%,

            rgba(255,255,255,.16) 65%,

            transparent 100%
        );

    transform:
        skewX(-20deg);

    filter:
        blur(3px);

    pointer-events: none;

    z-index: 5;

    animation:
        logoReflection
        4s
        ease-in-out
        infinite;
}


/* =====================================================
   RING BERPUTAR
===================================================== */

@keyframes neonRingRotate {

    from {
        --neon-angle: 0deg;
    }

    to {
        --neon-angle: 360deg;
    }

}


/* =====================================================
   GLOW BERPUTAR
===================================================== */

@keyframes neonGlowRotate {

    from {
        --neon-angle: 0deg;
    }

    to {
        --neon-angle: 360deg;
    }

}


/* =====================================================
   PANTULAN LOGO
===================================================== */

@keyframes logoReflection {

    0% {

        left: -80%;

        opacity: 0;
    }


    8% {

        opacity: .15;
    }


    25% {

        left: 140%;

        opacity: .95;
    }


    32% {

        left: 150%;

        opacity: 0;
    }


    100% {

        left: 150%;

        opacity: 0;
    }

}


/* =========================================================
   HERO TEXT
   ========================================================= */

.hero-content {
    position: relative;

    z-index: 3;
}

.welcome {
    margin-bottom: 11px;

    color: #9d72ff;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 3px;

    text-shadow:
        0 0 14px
        rgba(139,92,246,.40);
}

.hero h1 {
    color: white;

    font-size:
        clamp(
            34px,
            5vw,
            54px
        );

    line-height: 1;

    letter-spacing: -2px;
}

.hero h1 span {
    color: #a78bfa;

    text-shadow:
        0 0 20px
        rgba(139,92,246,.30);
}

.hero p {
    max-width: 600px;

    margin:
        20px auto 0;

    color: #858da2;

    font-size: 14px;

    line-height: 1.8;
}


/* =========================================================
   SECTION
   ========================================================= */

.quick-section {
    margin-top: 43px;
}

.section-heading small {
    color: #7566aa;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 2px;
}

.section-heading h2 {
    margin-top: 5px;

    color: white;

    font-size: 24px;

    letter-spacing: -.7px;
}


/* =========================================================
   QUICK GRID
   ========================================================= */

.quick-grid {
    display: grid;

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

    gap: 17px;

    margin-top: 20px;
}


/* =========================================================
   QUICK CARD
   ========================================================= */

.quick-card {
    position: relative;

    min-height: 165px;

    display: flex;
    flex-direction: column;

    padding: 21px;

    border-radius: 19px;

    overflow: hidden;

    isolation: isolate;

    background:
        #0e111d;

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

    box-shadow:
        0 18px 40px rgba(0,0,0,.25);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


/* animated neon */

.quick-card::before {
    content: "";

    position: absolute;

    inset: 0;

    border-radius: inherit;

    background:
        conic-gradient(
            from var(--neon-angle),

            transparent 0deg,
            transparent 255deg,

            rgba(139,92,246,.04) 270deg,
            rgba(139,92,246,.35) 282deg,

            white 290deg,

            var(--neon-color,#8b5cf6) 298deg,

            rgba(139,92,246,.05) 315deg,

            transparent 330deg,
            transparent 360deg
        );

    animation:
        neonRotate 3.8s linear infinite;

    z-index: -2;
}


/* inner layer */

.quick-card::after {
    content: "";

    position: absolute;

    inset: 2px;

    border-radius: 17px;

    background:
        linear-gradient(
            145deg,
            #121522,
            #0a0d17
        );

    z-index: -1;
}


/* card colors */

.quick-card:nth-child(1) {
    --neon-color: #8b5cf6;
}

.quick-card:nth-child(2) {
    --neon-color: #ff3eb5;
}

.quick-card:nth-child(3) {
    --neon-color: #06b6ff;
}


/* hover */

.quick-card:hover {
    transform:
        translateY(-6px);

    box-shadow:
        0 25px 55px rgba(0,0,0,.35),
        0 0 35px rgba(139,92,246,.08);
}


/* =========================================================
   QUICK ICON
   ========================================================= */

.quick-icon {
    width: 45px;
    height: 45px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 20px;

    border-radius: 13px;

    font-size: 19px;

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

    box-shadow:
        inset 0 1px 2px
        rgba(255,255,255,.12),

        0 8px 20px
        rgba(0,0,0,.25);
}

.quick-icon.purple {
    color: #b18cff;

    background:
        rgba(139,92,246,.12);

    box-shadow:
        0 0 25px
        rgba(139,92,246,.12);
}

.quick-icon.pink {
    color: #ff67c5;

    background:
        rgba(255,62,181,.10);
}

.quick-icon.blue {
    color: #35c8ff;

    background:
        rgba(6,182,255,.10);
}


/* =========================================================
   QUICK TEXT
   ========================================================= */

.quick-info h3 {
    color: white;

    font-size: 14px;
    font-weight: 700;
}

.quick-info p {
    margin-top: 7px;

    color: #777f94;

    font-size: 11px;

    line-height: 1.6;
}


/* =========================================================
   ARROW
   ========================================================= */

.arrow {
    position: absolute;

    right: 18px;
    bottom: 18px;

    width: 35px;
    height: 35px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: #a78bfa;

    border:
        1px solid
        rgba(139,92,246,.20);

    background:
        rgba(139,92,246,.04);

    transition:
        .25s ease;
}

.quick-card:hover .arrow {
    color: white;

    background:
        rgba(139,92,246,.15);

    box-shadow:
        0 0 18px
        rgba(139,92,246,.18);

    transform:
        translateX(4px);
}


/* =========================================================
   INFO CARD
   ========================================================= */

.info-card {
    position: relative;

    display: flex;
    align-items: center;

    gap: 17px;

    margin-top: 32px;

    padding: 21px 23px;

    border-radius: 19px;

    overflow: hidden;

    isolation: isolate;

    background:
        #0d101a;

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


/* neon */

.info-card::before {
    content: "";

    position: absolute;

    inset: 0;

    border-radius: inherit;

    background:
        conic-gradient(
            from var(--neon-angle),

            transparent 0deg,
            transparent 265deg,

            rgba(6,182,255,.05) 278deg,
            rgba(6,182,255,.35) 288deg,

            white 296deg,

            #06b6ff 303deg,

            transparent 320deg,
            transparent 360deg
        );

    animation:
        neonRotate 4.5s linear infinite;

    z-index: -2;
}

.info-card::after {
    content: "";

    position: absolute;

    inset: 2px;

    border-radius: 17px;

    background:
        linear-gradient(
            145deg,
            #111521,
            #0b0e17
        );

    z-index: -1;
}

.info-icon {
    width: 43px;
    height: 43px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    color: #35c8ff;

    background:
        rgba(6,182,255,.08);

    border:
        1px solid
        rgba(6,182,255,.15);

    box-shadow:
        0 0 20px
        rgba(6,182,255,.08);
}

.info-card h3 {
    color: white;

    font-size: 13px;
}

.info-card p {
    margin-top: 5px;

    color: #737b90;

    font-size: 11px;

    line-height: 1.7;
}


/* =========================================================
   SIDEBAR OVERLAY
   ========================================================= */

.sidebar-overlay {
    display: none;
}


/* =========================================================
   LIGHT THEME
   ========================================================= */

body.light-theme {

    --bg: #eef1f8;
    --bg-soft: #f7f8fc;

    --text: #171923;
    --text-soft: #687084;

    background:
        radial-gradient(
            circle at 75% 10%,
            rgba(139,92,246,.10),
            transparent 30%
        ),
        radial-gradient(
            circle at 15% 85%,
            rgba(0,190,255,.07),
            transparent 28%
        ),
        #eef1f8;
}


/* sidebar */

body.light-theme .sidebar {
    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f2f4f9
        );

    border-right-color:
        rgba(20,25,40,.08);

    box-shadow:
        15px 0 45px
        rgba(30,40,70,.08);
}


/* topbar */

body.light-theme .topbar {
    background:
        rgba(245,247,251,.78);

    border-bottom-color:
        rgba(20,25,40,.07);
}

body.light-theme .topbar-title {
    color: #687084;
}


/* menu */

body.light-theme .menu-item {
    color: #70788c;
}

body.light-theme .menu-item::before {
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f4f5fa
        );
}

body.light-theme .menu-item:hover,
body.light-theme .menu-item.active {
    color: #242638;
}


/* hero */

body.light-theme .hero {
    background:
        #f5f6fa;

    box-shadow:
        0 25px 60px
        rgba(30,40,70,.10);
}

body.light-theme .hero::after {
    background:
        radial-gradient(
            circle at 20% 30%,
            rgba(139,92,246,.07),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #ffffff,
            #f2f4f9
        );
}

body.light-theme .hero h1 {
    color: #171923;
}

body.light-theme .hero p {
    color: #697184;
}


/* cards */

body.light-theme .quick-card {
    background:
        #f7f8fb;

    box-shadow:
        0 18px 40px
        rgba(30,40,70,.08);
}

body.light-theme .quick-card::after {
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f2f4f9
        );
}

body.light-theme .quick-info h3 {
    color: #202331;
}

body.light-theme .quick-info p {
    color: #737b8e;
}


/* info */

body.light-theme .info-card {
    background:
        #f7f8fb;

    box-shadow:
        0 15px 35px
        rgba(30,40,70,.08);
}

body.light-theme .info-card::after {
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f2f4f9
        );
}

body.light-theme .info-card h3 {
    color: #202331;
}


/* theme button */

body.light-theme .theme-toggle {
    color: #5e4b9b;

    background:
        rgba(139,92,246,.08);

    border-color:
        rgba(139,92,246,.14);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    :root {
        --sidebar-width: 220px;
    }

    .content {
        width:
            calc(100% - 40px);
    }

    .quick-grid {
        grid-template-columns:
            1fr;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .sidebar {
        transform:
            translateX(-100%);

        transition:
            transform .3s ease;
    }

    .sidebar.open {
        transform:
            translateX(0);
    }

    .sidebar-overlay {
        position: fixed;

        inset: 0;

        background:
            rgba(0,0,0,.55);

        backdrop-filter:
            blur(3px);

        z-index: 900;
    }

    .sidebar-overlay.show {
        display: block;
    }

    .main {
        margin-left: 0;
    }

    .topbar {
        height: 64px;

        padding:
            0 17px;
    }

    .menu-toggle {
        display: flex;

        align-items: center;
        justify-content: center;
    }

    .content {
        width:
            calc(100% - 28px);

        padding:
            25px 0 45px;
    }

    .hero {
        min-height: 390px;

        padding:
            45px 20px;

        border-radius: 23px;
    }

    .custom-logo {
        width: 112px;
        height: 112px;

        padding: 7px;

        border-radius: 30px;
    }

    .logo-inner {
        border-radius: 23px;

        font-size: 47px;
    }

    .hero h1 {
        font-size: 34px;

        letter-spacing: -1.3px;
    }

    .hero p {
        font-size: 12px;
    }

    .quick-grid {
        gap: 14px;
    }

    .quick-card {
        min-height: 145px;
    }

    .info-card {
        align-items: flex-start;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 400px) {

    .hero {
        padding:
            38px 17px;
    }

    .hero h1 {
        font-size: 29px;
    }

    .hero p {
        font-size: 11px;
    }

    .custom-logo {
        width: 100px;
        height: 100px;
    }

    .logo-inner {
        font-size: 42px;
    }

}

/* =========================================================
   COLOR BOOST
   PAKSEH.WEB.ID
   Purple + Pink + Cyan + Blue
   ========================================================= */


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

body {
    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(139, 92, 246, .16),
            transparent 28%
        ),
        radial-gradient(
            circle at 85% 20%,
            rgba(0, 174, 255, .12),
            transparent 28%
        ),
        radial-gradient(
            circle at 55% 90%,
            rgba(255, 0, 174, .09),
            transparent 30%
        ),
        #060810;
}


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

.sidebar {
    background:
        radial-gradient(
            circle at 30% 10%,
            rgba(139,92,246,.12),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 55%,
            rgba(0,190,255,.07),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #0b0d18,
            #05070d
        );
}


/* =========================================================
   BRAND LOGO
   ========================================================= */

.brand-logo {
    background:
        linear-gradient(
            135deg,
            #b66cff 0%,
            #7138e8 45%,
            #4b1bb8 100%
        );

    box-shadow:
        inset 0 2px 4px rgba(255,255,255,.28),
        inset 0 -7px 12px rgba(0,0,0,.30),
        0 0 18px rgba(139,92,246,.35),
        0 0 40px rgba(139,92,246,.12);
}


/* =========================================================
   MENU - LEBIH BERWARNA
   ========================================================= */

.menu-item:nth-child(1)::after {
    background:
        conic-gradient(
            from var(--neon-angle),
            transparent 0deg,
            transparent 230deg,
            rgba(139,92,246,.10) 250deg,
            #8b5cf6 275deg,
            #ffffff 285deg,
            #c084fc 295deg,
            transparent 320deg,
            transparent 360deg
        );
}

.menu-item:nth-child(2)::after {
    background:
        conic-gradient(
            from var(--neon-angle),
            transparent 0deg,
            transparent 230deg,
            rgba(0,190,255,.10) 250deg,
            #06b6ff 275deg,
            #ffffff 285deg,
            #67e8f9 295deg,
            transparent 320deg,
            transparent 360deg
        );
}

.menu-item:nth-child(3)::after {
    background:
        conic-gradient(
            from var(--neon-angle),
            transparent 0deg,
            transparent 230deg,
            rgba(255,62,181,.10) 250deg,
            #ff3eb5 275deg,
            #ffffff 285deg,
            #fb7acb 295deg,
            transparent 320deg,
            transparent 360deg
        );
}

.menu-item:nth-child(4)::after {
    background:
        conic-gradient(
            from var(--neon-angle),
            transparent 0deg,
            transparent 230deg,
            rgba(0,229,255,.10) 250deg,
            #00d9ff 275deg,
            #ffffff 285deg,
            #8b5cf6 295deg,
            transparent 320deg,
            transparent 360deg
        );
}


/* =========================================================
   HERO - LEBIH HIDUP
   ========================================================= */

.hero {
    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(139,92,246,.20),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 30%,
            rgba(0,174,255,.16),
            transparent 28%
        ),
        radial-gradient(
            circle at 55% 100%,
            rgba(255,0,174,.10),
            transparent 32%
        ),
        #0b0e1a;

    box-shadow:
        0 30px 80px rgba(0,0,0,.45),
        0 0 50px rgba(91,33,182,.08);
}


/* HERO BORDER */

.hero::before {
    background:
        conic-gradient(
            from var(--neon-angle),

            transparent 0deg,
            transparent 210deg,

            rgba(139,92,246,.08) 225deg,
            #7c3aed 250deg,

            #c084fc 270deg,

            #ffffff 282deg,

            #ff3eb5 292deg,

            #06b6ff 304deg,

            #00e5ff 318deg,

            rgba(0,229,255,.08) 330deg,

            transparent 345deg,
            transparent 360deg
        );

    animation:
        neonRotate 4s linear infinite;

    filter:
        drop-shadow(0 0 8px rgba(139,92,246,.7))
        drop-shadow(0 0 15px rgba(0,190,255,.35));
}


/* =========================================================
   HERO LOGO GLOW
   ========================================================= */

.custom-logo {
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.20),
            rgba(139,92,246,.06)
        );

    box-shadow:
        0 25px 60px rgba(0,0,0,.45),
        0 0 25px rgba(139,92,246,.45),
        0 0 55px rgba(139,92,246,.20);
}

.logo-inner {
    background:
        linear-gradient(
            135deg,
            #d19cff 0%,
            #9b5cff 25%,
            #7138e8 55%,
            #4b1bb8 100%
        );

    box-shadow:
        inset 0 3px 5px rgba(255,255,255,.30),
        inset 0 -10px 18px rgba(0,0,0,.30),
        0 0 25px rgba(139,92,246,.55),
        0 0 55px rgba(139,92,246,.22);
}


/* =========================================================
   WEBSITE TITLE
   ========================================================= */

.hero h1 span {
    background:
        linear-gradient(
            90deg,
            #b68cff,
            #d68cff,
            #ff5cc8,
            #57d9ff
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;

    filter:
        drop-shadow(
            0 0 12px
            rgba(139,92,246,.30)
        );
}


/* =========================================================
   SECTION TITLE
   ========================================================= */

.section-heading small {
    color: #a879ff;

    text-shadow:
        0 0 12px rgba(139,92,246,.55);
}

.section-heading h2 {
    text-shadow:
        0 0 18px rgba(139,92,246,.15);
}


/* =========================================================
   QUICK CARD
   ========================================================= */

.quick-card {
    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(139,92,246,.10),
            transparent 35%
        ),
        #0c101c;
}


/* CARD 1 */

.quick-card:nth-child(1)::before {
    background:
        conic-gradient(
            from var(--neon-angle),

            transparent 0deg,
            transparent 220deg,

            rgba(139,92,246,.08) 235deg,
            #7138e8 255deg,
            #a855f7 270deg,
            #ffffff 280deg,
            #c084fc 292deg,

            transparent 320deg,
            transparent 360deg
        );

    filter:
        drop-shadow(
            0 0 7px
            rgba(139,92,246,.85)
        );
}


/* CARD 2 */

.quick-card:nth-child(2) {
    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(255,62,181,.13),
            transparent 35%
        ),
        #0c101c;
}

.quick-card:nth-child(2)::before {
    background:
        conic-gradient(
            from var(--neon-angle),

            transparent 0deg,
            transparent 220deg,

            rgba(255,62,181,.08) 235deg,
            #ec198e 255deg,
            #ff4fbc 270deg,
            #ffffff 280deg,
            #ff91d5 292deg,

            transparent 320deg,
            transparent 360deg
        );

    filter:
        drop-shadow(
            0 0 7px
            rgba(255,62,181,.85)
        );
}


/* CARD 3 */

.quick-card:nth-child(3) {
    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(0,190,255,.13),
            transparent 35%
        ),
        #0c101c;
}

.quick-card:nth-child(3)::before {
    background:
        conic-gradient(
            from var(--neon-angle),

            transparent 0deg,
            transparent 220deg,

            rgba(0,190,255,.08) 235deg,
            #008cff 255deg,
            #06d9ff 270deg,
            #ffffff 280deg,
            #66e9ff 292deg,

            transparent 320deg,
            transparent 360deg
        );

    filter:
        drop-shadow(
            0 0 7px
            rgba(0,190,255,.90)
        );
}


/* =========================================================
   ICON COLORS
   ========================================================= */

.quick-card:nth-child(1) .quick-icon {
    color: #bd91ff;

    background:
        linear-gradient(
            145deg,
            rgba(139,92,246,.20),
            rgba(93,44,180,.08)
        );

    border-color:
        rgba(139,92,246,.25);

    box-shadow:
        0 0 20px rgba(139,92,246,.15);
}

.quick-card:nth-child(2) .quick-icon {
    color: #ff70c7;

    background:
        linear-gradient(
            145deg,
            rgba(255,62,181,.20),
            rgba(170,25,110,.08)
        );

    border-color:
        rgba(255,62,181,.25);

    box-shadow:
        0 0 20px rgba(255,62,181,.15);
}

.quick-card:nth-child(3) .quick-icon {
    color: #4bdcff;

    background:
        linear-gradient(
            145deg,
            rgba(0,190,255,.20),
            rgba(0,90,180,.08)
        );

    border-color:
        rgba(0,190,255,.25);

    box-shadow:
        0 0 20px rgba(0,190,255,.15);
}


/* =========================================================
   INFO CARD
   ========================================================= */

.info-card {
    background:
        radial-gradient(
            circle at 15% 50%,
            rgba(0,190,255,.10),
            transparent 35%
        ),
        #0b1019;
}

.info-card::before {
    background:
        conic-gradient(
            from var(--neon-angle),

            transparent 0deg,
            transparent 220deg,

            rgba(0,190,255,.08) 240deg,
            #008cff 260deg,
            #06d9ff 275deg,
            #ffffff 285deg,
            #a855f7 300deg,

            transparent 325deg,
            transparent 360deg
        );

    filter:
        drop-shadow(
            0 0 8px
            rgba(0,190,255,.75)
        );
}


/* =========================================================
   INFO ICON
   ========================================================= */

.info-icon {
    color: #5be4ff;

    background:
        linear-gradient(
            145deg,
            rgba(0,190,255,.18),
            rgba(0,100,180,.07)
        );

    border-color:
        rgba(0,190,255,.25);

    box-shadow:
        0 0 25px
        rgba(0,190,255,.15);
}


/* =========================================================
   ARROW
   ========================================================= */

.quick-card:nth-child(1) .arrow {
    color: #b68cff;

    border-color:
        rgba(139,92,246,.30);
}

.quick-card:nth-child(2) .arrow {
    color: #ff70c7;

    border-color:
        rgba(255,62,181,.30);
}

.quick-card:nth-child(3) .arrow {
    color: #4bdcff;

    border-color:
        rgba(0,190,255,.30);
}


/* =========================================================
   EXTRA FLOATING GLOW
   ========================================================= */

.hero-glow {
    opacity: .24;

    filter:
        blur(90px);
}

.glow-one {
    background:
        linear-gradient(
            135deg,
            #8b5cf6,
            #ff3eb5
        );
}

.glow-two {
    background:
        linear-gradient(
            135deg,
            #06b6ff,
            #8b5cf6
        );
}


/* =========================================================
   NEON LINE BOTTOM
   ========================================================= */

.hero {
    box-shadow:
        0 30px 80px rgba(0,0,0,.45),
        0 0 45px rgba(139,92,246,.08);
}


/* =========================================================
   HOVER GLOW
   ========================================================= */

.quick-card:nth-child(1):hover {
    box-shadow:
        0 25px 55px rgba(0,0,0,.40),
        0 0 35px rgba(139,92,246,.16);
}

.quick-card:nth-child(2):hover {
    box-shadow:
        0 25px 55px rgba(0,0,0,.40),
        0 0 35px rgba(255,62,181,.14);
}

.quick-card:nth-child(3):hover {
    box-shadow:
        0 25px 55px rgba(0,0,0,.40),
        0 0 35px rgba(0,190,255,.15);
}

/* =====================================================
   LOGO GAMBAR PAKSEH
===================================================== */

.logo-inner {
    overflow: hidden;

    padding: 0;

    background: #ffffff;

    position: relative;
}

.logo-inner img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    border-radius: inherit;
}


/* Glow tambahan */

.custom-logo::after {
    content: "";

    position: absolute;

    inset: -18px;

    border-radius: 45px;

    background:
        radial-gradient(
            circle,
            rgba(139,92,246,.28),
            transparent 65%
        );

    filter: blur(18px);

    z-index: -1;

    pointer-events: none;
}

/* =====================================================
   LOGO LIGHT REFLECTION
   Pantulan cahaya setiap ±4 detik
===================================================== */

.logo-inner {
    position: relative;
    overflow: hidden;
}


/* cahaya pantulan */

.logo-inner::after {
    content: "";

    position: absolute;

    top: -30%;
    left: -75%;

    width: 45%;
    height: 160%;

    background:
        linear-gradient(
            105deg,
            transparent 0%,
            rgba(255,255,255,0.03) 30%,
            rgba(255,255,255,0.85) 50%,
            rgba(255,255,255,0.12) 65%,
            transparent 100%
        );

    transform:
        skewX(-20deg);

    filter:
        blur(3px);

    pointer-events: none;

    z-index: 5;

    animation:
        logoReflection 4s ease-in-out infinite;
}


/* =====================================================
   ANIMASI PANTULAN
===================================================== */

@keyframes logoReflection {

    /* awal */
    0% {
        left: -75%;
        opacity: 0;
    }

    /* mulai muncul */
    8% {
        opacity: .15;
    }

    /* cahaya menyapu logo */
    25% {
        left: 135%;
        opacity: .9;
    }

    /* menghilang */
    32% {
        left: 145%;
        opacity: 0;
    }

    /* menunggu sampai siklus berikutnya */
    100% {
        left: 145%;
        opacity: 0;
    }

}

/* =====================================================
   SIDEBAR LOGO - SAMA DENGAN LOGO UTAMA
===================================================== */

.brand-logo {
    position: relative;

    width: 43px;
    height: 43px;

    flex-shrink: 0;

    padding: 3px;

    overflow: hidden;

    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.20),
            rgba(139,92,246,.08)
        );

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

    box-shadow:
        inset 0 2px 3px
        rgba(255,255,255,.25),

        0 0 18px
        rgba(139,92,246,.40),

        0 0 35px
        rgba(139,92,246,.15);

    isolation: isolate;
}


/* gambar logo */

.brand-logo img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    border-radius: 10px;
}


/* =====================================================
   PANTULAN CAHAYA SIDEBAR
===================================================== */

.brand-logo::after {
    content: "";

    position: absolute;

    top: -40%;
    left: -90%;

    width: 45%;
    height: 180%;

    background:
        linear-gradient(
            105deg,
            transparent 0%,
            rgba(255,255,255,.04) 30%,
            rgba(255,255,255,.90) 50%,
            rgba(255,255,255,.12) 65%,
            transparent 100%
        );

    transform:
        skewX(-20deg);

    filter:
        blur(2px);

    pointer-events: none;

    z-index: 5;

    animation:
        sidebarLogoReflection 4s ease-in-out infinite;
}


/* =====================================================
   ANIMASI
===================================================== */

@keyframes sidebarLogoReflection {

    0% {
        left: -90%;
        opacity: 0;
    }

    8% {
        opacity: .15;
    }

    25% {
        left: 140%;
        opacity: .9;
    }

    32% {
        left: 150%;
        opacity: 0;
    }

    100% {
        left: 150%;
        opacity: 0;
    }

}

/* =====================================================
   PAKSEH.WEB.ID
   3D FLIP PER HURUF
   KIRI → KANAN
   INTERVAL 5 DETIK
===================================================== */

.animated-brand {
    display: flex;
    align-items: center;
    justify-content: center;

    white-space: nowrap;

    perspective: 1200px;
    -webkit-perspective: 1200px;

    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}


/* =====================================================
   SETIAP HURUF
===================================================== */

.animated-brand .letter {

    display: inline-block;

    position: relative;

    transform-origin: center center;
    -webkit-transform-origin: center center;

    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    will-change: transform;

    animation:
        letterFlip 5s
        cubic-bezier(.22,.61,.36,1)
        infinite;

    -webkit-animation:
        letterFlip 5s
        cubic-bezier(.22,.61,.36,1)
        infinite;
}


/* =====================================================
   PAKSEH = PUTIH
===================================================== */

.animated-brand .letter.white {

    color: #ffffff !important;

    background: none !important;

    -webkit-background-clip: initial !important;
    background-clip: initial !important;

    -webkit-text-fill-color: #ffffff !important;

    text-shadow:
        0 0 8px rgba(255,255,255,.08);
}


/* =====================================================
   .WEB = UNGU / PINK
===================================================== */

.animated-brand .letter.purple {

    background:
        linear-gradient(
            90deg,
            #a78bfa,
            #c084fc,
            #d084ff
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
}


/* =====================================================
   .ID = PINK
===================================================== */

.animated-brand .letter.pink {

    background:
        linear-gradient(
            90deg,
            #d946ef,
            #ff5fc7
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
}


/* =====================================================
   D = CYAN
===================================================== */

.animated-brand .letter.blue {

    background:
        linear-gradient(
            90deg,
            #ff5fc7,
            #58d9ff
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
}


/* =====================================================
   ANIMASI FLIP
===================================================== */

@keyframes letterFlip {

    0% {
        transform: rotateY(0deg) translateZ(0);
    }

    2% {
        transform: rotateY(0deg) translateZ(0);
    }

    5% {
        transform: rotateY(90deg) translateZ(10px);
    }

    8% {
        transform: rotateY(180deg) translateZ(0);
    }

    11% {
        transform: rotateY(360deg) translateZ(0);
    }

    18% {
        transform: rotateY(360deg) translateZ(0);
    }

    100% {
        transform: rotateY(360deg) translateZ(0);
    }
}


@-webkit-keyframes letterFlip {

    0% {
        -webkit-transform:
            rotateY(0deg)
            translateZ(0);
    }

    2% {
        -webkit-transform:
            rotateY(0deg)
            translateZ(0);
    }

    5% {
        -webkit-transform:
            rotateY(90deg)
            translateZ(10px);
    }

    8% {
        -webkit-transform:
            rotateY(180deg)
            translateZ(0);
    }

    11% {
        -webkit-transform:
            rotateY(360deg)
            translateZ(0);
    }

    18% {
        -webkit-transform:
            rotateY(360deg)
            translateZ(0);
    }

    100% {
        -webkit-transform:
            rotateY(360deg)
            translateZ(0);
    }
}


/* =====================================================
   URUTAN KIRI → KANAN
===================================================== */

.animated-brand .letter:nth-child(1) {
    animation-delay: 0s;
    -webkit-animation-delay: 0s;
}

.animated-brand .letter:nth-child(2) {
    animation-delay: .10s;
    -webkit-animation-delay: .10s;
}

.animated-brand .letter:nth-child(3) {
    animation-delay: .20s;
    -webkit-animation-delay: .20s;
}

.animated-brand .letter:nth-child(4) {
    animation-delay: .30s;
    -webkit-animation-delay: .30s;
}

.animated-brand .letter:nth-child(5) {
    animation-delay: .40s;
    -webkit-animation-delay: .40s;
}

.animated-brand .letter:nth-child(6) {
    animation-delay: .50s;
    -webkit-animation-delay: .50s;
}

.animated-brand .letter:nth-child(7) {
    animation-delay: .60s;
    -webkit-animation-delay: .60s;
}

.animated-brand .letter:nth-child(8) {
    animation-delay: .70s;
    -webkit-animation-delay: .70s;
}

.animated-brand .letter:nth-child(9) {
    animation-delay: .80s;
    -webkit-animation-delay: .80s;
}

.animated-brand .letter:nth-child(10) {
    animation-delay: .90s;
    -webkit-animation-delay: .90s;
}

.animated-brand .letter:nth-child(11) {
    animation-delay: 1s;
    -webkit-animation-delay: 1s;
}

.animated-brand .letter:nth-child(12) {
    animation-delay: 1.10s;
    -webkit-animation-delay: 1.10s;
}

.animated-brand .letter:nth-child(13) {
    animation-delay: 1.20s;
    -webkit-animation-delay: 1.20s;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 600px) {

    .animated-brand {

        perspective: 900px;
        -webkit-perspective: 900px;

        font-size:
            clamp(28px, 9vw, 48px);
    }


    .animated-brand .letter {

        transform-style: preserve-3d;
        -webkit-transform-style: preserve-3d;

        backface-visibility: visible;
        -webkit-backface-visibility: visible;
    }

}

/* =====================================================
   URUTAN FLIP
===================================================== */

.letter:nth-child(1) {
    animation-delay: 0s;
}

.letter:nth-child(2) {
    animation-delay: .10s;
}

.letter:nth-child(3) {
    animation-delay: .20s;
}

.letter:nth-child(4) {
    animation-delay: .30s;
}

.letter:nth-child(5) {
    animation-delay: .40s;
}

.letter:nth-child(6) {
    animation-delay: .50s;
}

.letter:nth-child(7) {
    animation-delay: .60s;
}

.letter:nth-child(8) {
    animation-delay: .70s;
}

.letter:nth-child(9) {
    animation-delay: .80s;
}

.letter:nth-child(10) {
    animation-delay: .90s;
}

.letter:nth-child(11) {
    animation-delay: 1s;
}

.letter:nth-child(12) {
    animation-delay: 1.10s;
}

.letter:nth-child(13) {
    animation-delay: 1.20s;
}

/* =====================================================
   WARNA PAKSEH = PUTIH
   FLIP TETAP AKTIF
===================================================== */

.animated-brand .letter.white {
    color: #ffffff !important;

    background: none !important;

    -webkit-background-clip: initial !important;
    background-clip: initial !important;

    -webkit-text-fill-color: #ffffff !important;

    text-shadow:
        0 0 8px rgba(255,255,255,.10);
}

/* =====================================================
   MOBILE UI FIX
   PAKSEH.WEB.ID
===================================================== */

@media (max-width: 600px) {

    /* =================================================
       BODY
    ================================================= */

    body {
        overflow-x: hidden;
    }


    /* =================================================
       MAIN
    ================================================= */

    .main {
        width: 100%;
        min-width: 0;
    }


    .content {
        width: 100%;
        padding:
            18px 14px 40px;
    }


    /* =================================================
       TOPBAR
    ================================================= */

    .topbar {
        height: 62px;

        padding:
            0 15px;
    }


    .topbar-title {
        font-size: 12px;
    }


    .theme-toggle {
        width: 38px;
        height: 38px;
    }


    /* =================================================
       HERO MOBILE
    ================================================= */

    .hero {

        min-height: 360px;

        height: auto;

        padding:
            42px 18px 38px;

        border-radius: 22px;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        text-align: center;

        overflow: hidden;
    }


    /* =================================================
       HERO GLOW
    ================================================= */

    .hero-glow {
        opacity: .55;

        filter: blur(45px);
    }


    .glow-one {
        width: 180px;
        height: 180px;
    }


    .glow-two {
        width: 160px;
        height: 160px;
    }


    /* =================================================
       LOGO MOBILE
    ================================================= */

    .custom-logo {

        width: 108px;
        height: 108px;

        margin-bottom: 24px;

        padding: 7px;

        border-radius: 28px;

        box-shadow:
            0 18px 35px
            rgba(0,0,0,.22),

            0 0 28px
            rgba(139,92,246,.30);
    }


    .logo-inner {
        border-radius: 21px;
    }


    .logo-inner img {
        border-radius: 20px;
    }


    /* =================================================
       WELCOME
    ================================================= */

    .welcome {

        font-size: 9px;

        letter-spacing:
            2.5px;

        margin-bottom: 10px;
    }


    /* =================================================
       BRAND TITLE
    ================================================= */

    .animated-brand {

        width: 100%;

        justify-content: center;

        font-size:
            clamp(
                27px,
                9.5vw,
                42px
            );

        line-height: 1;

        letter-spacing:
            -1px;

        perspective:
            900px;

        -webkit-perspective:
            900px;

        transform:
            translateZ(0);
    }


    /*
       Karena setiap huruf adalah span,
       jangan biarkan spacing melebar.
    */

    .animated-brand .letter {

        margin: 0;

        padding: 0;

        letter-spacing:
            -1px;
    }


    /* =================================================
       HERO DESCRIPTION
    ================================================= */

    .hero-content p {

        max-width:
            320px;

        margin:
            18px auto 0;

        font-size:
            11px;

        line-height:
            1.7;
    }


    /* =================================================
       QUICK SECTION
    ================================================= */

    .quick-section {

        margin-top:
            30px;
    }


    .section-heading {

        margin-bottom:
            15px;
    }


    .section-heading small {

        font-size:
            8px;

        letter-spacing:
            2px;
    }


    .section-heading h2 {

        margin-top:
            5px;

        font-size:
            25px;

        line-height:
            1.1;
    }


    /* =================================================
       QUICK GRID
    ================================================= */

    .quick-grid {

        display:
            grid;

        grid-template-columns:
            1fr;

        gap:
            12px;
    }


    /* =================================================
       QUICK CARD
    ================================================= */

    .quick-card {

        min-height:
            105px;

        padding:
            17px;

        border-radius:
            17px;
    }


    .quick-icon {

        width:
            45px;

        height:
            45px;

        flex-shrink:
            0;

        border-radius:
            13px;

        font-size:
            18px;
    }


    .quick-info {

        min-width:
            0;

        padding-right:
            25px;
    }


    .quick-info h3 {

        font-size:
            13px;

        line-height:
            1.3;
    }


    .quick-info p {

        margin-top:
            5px;

        font-size:
            10px;

        line-height:
            1.5;
    }


    .arrow {

        font-size:
            18px;
    }


    /* =================================================
       PREMIUM CARD
    ================================================= */

    .premium-card {

        min-height:
            105px;
    }


    .premium-label {

        top:
            12px;

        right:
            12px;
    }


    /* =================================================
       INFO CARD
    ================================================= */

    .info-card {

        margin-top:
            14px;

        padding:
            18px;

        border-radius:
            17px;
    }


    .info-card h3 {

        font-size:
            13px;
    }


    .info-card p {

        font-size:
            10px;

        line-height:
            1.6;
    }


    /* =================================================
       LIGHT THEME - MOBILE
    ================================================= */

    body.light-theme {

        color:
            #202333;
    }


    body.light-theme .topbar {

        background:
            rgba(248,249,253,.92);
    }


    body.light-theme .topbar-title {

        color:
            #566078;
    }


    body.light-theme .hero {

        background:

            radial-gradient(
                circle at 15% 15%,
                rgba(139,92,246,.10),
                transparent 35%
            ),

            radial-gradient(
                circle at 90% 80%,
                rgba(0,190,255,.08),
                transparent 35%
            ),

            #f9faff;

        box-shadow:
            0 20px 45px
            rgba(40,50,80,.10);
    }


    body.light-theme .hero-content h1 {

        color:
            #171923;
    }


    body.light-theme .hero-content p {

        color:
            #687187;
    }


    body.light-theme .section-heading h2 {

        color:
            #202333;
    }


    body.light-theme .quick-card {

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

        border:
            1px solid
            rgba(100,110,140,.10);

        box-shadow:
            0 12px 30px
            rgba(40,50,80,.07);
    }


    body.light-theme .quick-info h3 {

        color:
            #202333;
    }


    body.light-theme .quick-info p {

        color:
            #697287;
    }


    body.light-theme .arrow {

        color:
            #7650d8;
    }


    body.light-theme .info-card {

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

        border:
            1px solid
            rgba(100,110,140,.10);
    }


    body.light-theme .info-card h3 {

        color:
            #202333;
    }


    body.light-theme .info-card p {

        color:
            #697287;
    }


    /* =================================================
       MOBILE SIDEBAR
    ================================================= */

    .sidebar {

        width:
            260px;

        max-width:
            82vw;
    }


    .brand {

        padding:
            18px 17px;
    }


    .menu {

        padding:
            8px 12px;
    }


    .menu-item {

        min-height:
            48px;

        padding:
            0 13px;

        font-size:
            11px;
    }


    .sidebar-footer {

        padding:
            15px 18px;

        font-size:
            9px;
    }

}


/* =====================================================
   EXTRA SMALL PHONE
===================================================== */

@media (max-width: 380px) {

    .content {

        padding-left:
            10px;

        padding-right:
            10px;
    }


    .hero {

        min-height:
            335px;

        padding:
            35px 14px;
    }


    .custom-logo {

        width:
            95px;

        height:
            95px;
    }


    .animated-brand {

        font-size:
            25px;
    }


    .quick-card {

        padding:
            14px;
    }


    .quick-icon {

        width:
            42px;

        height:
            42px;
    }

}

/* =====================================================
   PAKSEH.WEB.ID
   BALANCED DARK / LIGHT THEME
===================================================== */


/* =====================================================
   DARK MODE
   Tidak terlalu hitam
===================================================== */

body {

    background:

        radial-gradient(
            circle at 15% 10%,
            rgba(91,70,150,.10),
            transparent 32%
        ),

        radial-gradient(
            circle at 85% 80%,
            rgba(20,110,140,.07),
            transparent 35%
        ),

        linear-gradient(
            135deg,
            #111522 0%,
            #0e1320 50%,
            #0b101b 100%
        );

    color:
        #d8dceb;

}


/* MAIN AREA */

.main {

    background:
        transparent;

}


/* TOPBAR */

.topbar {

    background:
        rgba(17,21,34,.72);

    border-bottom:
        1px solid
        rgba(255,255,255,.055);

    backdrop-filter:
        blur(16px);

    -webkit-backdrop-filter:
        blur(16px);

}


/* SIDEBAR */

.sidebar {

    background:

        linear-gradient(
            180deg,
            #121726,
            #0f1420
        );

    border-right:
        1px solid
        rgba(255,255,255,.06);

    box-shadow:
        10px 0 35px
        rgba(0,0,0,.18);

}


/* CONTENT */

.content {

    color:
        #d8dceb;

}


/* =====================================================
   DARK MODE CARD BALANCE
===================================================== */

.quick-card,
.info-card,
.article-card,
.tool-card,
.contact-card,
.premium-template {

    background:
        rgba(20,25,39,.72);

    border-color:
        rgba(255,255,255,.075);

    box-shadow:
        0 16px 38px
        rgba(0,0,0,.20);

}


/* HERO */

.hero {

    background:

        radial-gradient(
            circle at 15% 15%,
            rgba(139,92,246,.13),
            transparent 35%
        ),

        radial-gradient(
            circle at 90% 80%,
            rgba(34,211,238,.08),
            transparent 35%
        ),

        rgba(18,23,36,.78);

    border-color:
        rgba(255,255,255,.07);

}


/* TEXT */

.quick-info p,
.info-card p,
.article-body p,
.tool-content p,
.contact-info p {

    color:
        #9aa3b8;

}


/* =====================================================
   LIGHT MODE
   Tidak terlalu putih
===================================================== */

body.light-theme {

    background:

        radial-gradient(
            circle at 10% 10%,
            rgba(139,92,246,.07),
            transparent 32%
        ),

        radial-gradient(
            circle at 90% 85%,
            rgba(56,189,248,.06),
            transparent 35%
        ),

        linear-gradient(
            135deg,
            #eef1f7 0%,
            #e9edf5 50%,
            #e5eaf2 100%
        );

    color:
        #303749;

}


/* =====================================================
   LIGHT TOPBAR
===================================================== */

body.light-theme .topbar {

    background:
        rgba(239,242,248,.82);

    border-bottom:
        1px solid
        rgba(80,90,115,.10);

    box-shadow:
        0 5px 20px
        rgba(60,70,95,.05);

}


/* =====================================================
   LIGHT SIDEBAR
===================================================== */

body.light-theme .sidebar {

    background:

        linear-gradient(
            180deg,
            #edf0f6,
            #e7ebf3
        );

    border-right:
        1px solid
        rgba(80,90,115,.10);

    box-shadow:
        10px 0 30px
        rgba(60,70,95,.07);

}


/* =====================================================
   LIGHT CARDS
===================================================== */

body.light-theme .quick-card,
body.light-theme .info-card,
body.light-theme .article-card,
body.light-theme .tool-card,
body.light-theme .contact-card,
body.light-theme .premium-template {

    background:
        rgba(248,250,253,.72);

    border-color:
        rgba(80,90,115,.10);

    box-shadow:
        0 14px 32px
        rgba(60,70,95,.08);

}


/* =====================================================
   LIGHT HERO
===================================================== */

body.light-theme .hero {

    background:

        radial-gradient(
            circle at 15% 15%,
            rgba(139,92,246,.09),
            transparent 35%
        ),

        radial-gradient(
            circle at 90% 80%,
            rgba(34,211,238,.07),
            transparent 35%
        ),

        rgba(245,247,251,.76);

    border-color:
        rgba(80,90,115,.10);

    box-shadow:
        0 20px 45px
        rgba(60,70,95,.08);

}


/* =====================================================
   LIGHT TEXT
===================================================== */

body.light-theme .quick-info h3,
body.light-theme .info-card h3,
body.light-theme .article-body h3,
body.light-theme .tool-content h2,
body.light-theme .contact-info h2 {

    color:
        #303647;

}


body.light-theme .quick-info p,
body.light-theme .info-card p,
body.light-theme .article-body p,
body.light-theme .tool-content p,
body.light-theme .contact-info p {

    color:
        #697386;

}


/* =====================================================
   LIGHT SECTION TITLE
===================================================== */

body.light-theme .section-heading h2,
body.light-theme .blog-section-heading h2,
body.light-theme .premium-section-heading h2 {

    color:
        #303647;

}


/* =====================================================
   LIGHT BLOG / PREMIUM / TOOLS
===================================================== */

body.light-theme .featured-article,
body.light-theme .premium-hero {

    box-shadow:
        0 20px 50px
        rgba(60,70,95,.08);

}


/* =====================================================
   GLOW CONTROL
   Supaya mode terang tidak menyilaukan
===================================================== */

body.light-theme .hero-glow,
body.light-theme .featured-glow,
body.light-theme .premium-hero-glow {

    opacity:
        .45;

}


/* =====================================================
   MOBILE THEME BALANCE
===================================================== */

@media (max-width: 700px) {

    body {

        background:

            linear-gradient(
                160deg,
                #111522,
                #0d121d
            );

    }


    body.light-theme {

        background:

            linear-gradient(
                160deg,
                #edf0f6,
                #e6eaf2
            );

    }


    body.light-theme .topbar {

        background:
            rgba(237,240,246,.88);

    }


    body.light-theme .quick-card,
    body.light-theme .article-card,
    body.light-theme .tool-card,
    body.light-theme .contact-card {

        background:
            rgba(248,250,253,.82);

    }

}

/* =====================================================
   PAKSEH.WEB.ID
   MOBILE PERFORMANCE MODE
   Visual tetap neon, efek berat dikurangi
===================================================== */

@media (max-width: 700px) {

    /* ---------------------------------------------
       KURANGI BLUR
    --------------------------------------------- */

    .topbar,
    .sidebar,
    .quick-card,
    .article-card,
    .contact-card,
    .premium-template,
    .featured-article,
    .premium-hero {

        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;

    }


    /* ---------------------------------------------
       KURANGI SHADOW BERAT
    --------------------------------------------- */

    .quick-card,
    .article-card,
    .contact-card,
    .premium-template {

        box-shadow:
            0 10px 24px rgba(0,0,0,.16) !important;

    }


    /* ---------------------------------------------
       LOGO
       Tetap glow tetapi lebih ringan
    --------------------------------------------- */

    .custom-logo {

        box-shadow:
            0 15px 30px rgba(0,0,0,.30),
            0 0 25px rgba(139,92,246,.18) !important;

    }


    .logo-inner {

        box-shadow:
            inset 0 2px 3px rgba(255,255,255,.18),
            inset 0 -5px 9px rgba(0,0,0,.20),
            0 0 22px rgba(139,92,246,.22) !important;

    }


    /* ---------------------------------------------
       FEATURE CARD
    --------------------------------------------- */

    .quick-card:hover,
    .article-card:hover,
    .contact-card:hover,
    .premium-template:hover {

        transform: none !important;

    }


    /* ---------------------------------------------
       GLOW DEKORASI
       Kurangi blur GPU
    --------------------------------------------- */

    .premium-hero-glow,
    .featured-glow,
    .hero-glow {

        filter:
            blur(25px) !important;

        opacity:
            .45 !important;

    }


    /* ---------------------------------------------
       ORB / DEKORASI
    --------------------------------------------- */

    .visual-orb {

        animation-duration:
            18s !important;

    }


    /* ---------------------------------------------
       RING
       Tetap bergerak tetapi lebih lambat
    --------------------------------------------- */

    .decoration-ring {

        animation-duration:
            18s !important;

    }


    .ring-one {

        animation-duration:
            20s !important;

    }


    .ring-two {

        animation-duration:
            16s !important;

    }


    /* ---------------------------------------------
       TEMPLATE GLOW
    --------------------------------------------- */

    .template-glow {

        animation-duration:
            7s !important;

    }


    /* ---------------------------------------------
       HINDARI ANIMASI SAAT HOVER
       HP tidak membutuhkan hover
    --------------------------------------------- */

    .contact-card:hover .contact-arrow {

        transform:
            none !important;

    }


    /* ---------------------------------------------
       KURANGI GLOW BERLEBIH
    --------------------------------------------- */

    .contact-icon,
    .visual-icon,
    .coming-icon {

        box-shadow:
            0 0 14px rgba(139,92,246,.10) !important;

    }


    /* ---------------------------------------------
       SIDEBAR MOBILE
    --------------------------------------------- */

    .sidebar {

        box-shadow:
            8px 0 22px rgba(0,0,0,.18) !important;

    }


    /* ---------------------------------------------
       MODAL
    --------------------------------------------- */

    .article-modal-backdrop {

        backdrop-filter:
            none !important;

        -webkit-backdrop-filter:
            none !important;

        background:
            rgba(3,5,12,.82) !important;

    }

}

/* =====================================================
   PAKSEH.WEB.ID
   FINAL THEME BALANCE
===================================================== */


/* =====================================================
   DARK MODE
   Sedikit lebih terang
===================================================== */

body {

    background:

        radial-gradient(
            circle at 15% 10%,
            rgba(120,90,190,.13),
            transparent 32%
        ),

        radial-gradient(
            circle at 85% 80%,
            rgba(30,130,160,.09),
            transparent 35%
        ),

        linear-gradient(
            135deg,
            #171c2b 0%,
            #141a28 50%,
            #111725 100%
        );

    color:
        #dce1ee;

}


.topbar {

    background:
        rgba(23,28,43,.78);

}


.sidebar {

    background:

        linear-gradient(
            180deg,
            #181e2d,
            #151b29
        );

}


/* =====================================================
   LIGHT MODE
   Sedikit lebih gelap
===================================================== */

body.light-theme {

    background:

        radial-gradient(
            circle at 10% 10%,
            rgba(139,92,246,.06),
            transparent 32%
        ),

        radial-gradient(
            circle at 90% 85%,
            rgba(56,189,248,.05),
            transparent 35%
        ),

        linear-gradient(
            135deg,
            #e2e6ee 0%,
            #dde2eb 50%,
            #d8dee8 100%
        );

    color:
        #303646;

}


body.light-theme .topbar {

    background:
        rgba(226,230,238,.86);

}


body.light-theme .sidebar {

    background:

        linear-gradient(
            180deg,
            #e3e7ef,
            #dce1ea
        );

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 700px) {

    body {

        background:

            linear-gradient(
                160deg,
                #171c2b,
                #121827
            );

    }


    body.light-theme {

        background:

            linear-gradient(
                160deg,
                #e2e6ee,
                #d9dfe9
            );

    }

}

/* =====================================================
   CUTE PREMIUM THUMBNAIL
===================================================== */

.cute-preview {

    position: relative;

    overflow: hidden;

    background:
        #f8eee8;

}


.cute-thumbnail {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    transition:
        transform .45s ease;

}


.premium-template:hover .cute-thumbnail {

    transform:
        scale(1.04);

}


/* Label tetap terlihat di atas gambar */

.cute-preview .template-label {

    z-index: 5;

    background:
        rgba(20,16,25,.72);

    backdrop-filter:
        blur(6px);

    -webkit-backdrop-filter:
        blur(6px);

}

.template-view {

    display: flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

}