/*
|--------------------------------------------------------------------------
| V-GRAPHIC PUBLIC THEME V3
|--------------------------------------------------------------------------
| Default : LIGHT
| Dark    : desain existing
| Toggle  : Light = STAR | Dark = SUN
|--------------------------------------------------------------------------
*/


:root {
    --vg-bg: #f8fafc;
    --vg-bg-soft: #f1f5f9;
    --vg-surface: #ffffff;
    --vg-surface-soft: rgba(255, 255, 255, 0.78);

    --vg-text: #0f172a;
    --vg-heading: #020617;
    --vg-muted: #475569;
    --vg-soft: #64748b;

    --vg-border: #e2e8f0;
    --vg-border-strong: #cbd5e1;

    --vg-emerald: #10b981;
    --vg-emerald-dark: #059669;
    --vg-emerald-soft: rgba(16, 185, 129, 0.10);

    --vg-yellow: #facc15;
    --vg-lime: #84cc16;

    --vg-shadow-sm: 0 8px 24px rgba(15, 23, 42, 0.05);
    --vg-shadow: 0 16px 42px rgba(15, 23, 42, 0.08);
    --vg-shadow-lg: 0 24px 60px rgba(15, 23, 42, 0.12);
}


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

html[data-vg-theme="light"] {
    color-scheme: light;
}

html[data-vg-theme="dark"] {
    color-scheme: dark;
}

html[data-vg-theme="light"] body {
    background:
        radial-gradient(circle at 78% 8%, rgba(16,185,129,.06), transparent 30rem),
        radial-gradient(circle at 18% 18%, rgba(59,130,246,.04), transparent 24rem),
        #f8fafc !important;
    color: var(--vg-text) !important;
}

html[data-vg-theme="light"] body,
html[data-vg-theme="light"] header,
html[data-vg-theme="light"] footer,
html[data-vg-theme="light"] main,
html[data-vg-theme="light"] section,
html[data-vg-theme="light"] article,
html[data-vg-theme="light"] aside,
html[data-vg-theme="light"] div,
html[data-vg-theme="light"] a,
html[data-vg-theme="light"] button,
html[data-vg-theme="light"] input,
html[data-vg-theme="light"] textarea,
html[data-vg-theme="light"] select {
    transition:
        background-color .24s ease,
        color .24s ease,
        border-color .24s ease,
        box-shadow .24s ease,
        opacity .24s ease;
}


/* =========================================================
   LAYOUT
   ========================================================= */

html[data-vg-theme="light"] main {
    background: transparent !important;
    color: var(--vg-text) !important;
}

html[data-vg-theme="light"] main > div {
    background: transparent !important;
    color: var(--vg-text) !important;
}

html[data-vg-theme="light"] footer {
    background: #ffffff !important;
    border-top: 1px solid var(--vg-border) !important;
}


/* =========================================================
   NAVBAR
   ========================================================= */

html[data-vg-theme="light"] header {
    background: rgba(255, 255, 255, 0.94) !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
    box-shadow:
        0 1px 0 rgba(15, 23, 42, 0.04),
        0 10px 24px rgba(15, 23, 42, 0.03);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

html[data-vg-theme="light"] header .text-white {
    color: var(--vg-heading) !important;
}

html[data-vg-theme="light"] header .text-slate-300 {
    color: #475569 !important;
}

html[data-vg-theme="light"] header .text-slate-200 {
    color: #334155 !important;
}

html[data-vg-theme="light"] header .text-emerald-300 {
    color: var(--vg-emerald-dark) !important;
}

html[data-vg-theme="light"] header [class*="border-white/"] {
    border-color: var(--vg-border) !important;
}

html[data-vg-theme="light"] header [class*="bg-white/"] {
    background: rgba(255,255,255,.82) !important;
}

html[data-vg-theme="light"] #public-mobile-menu {
    background: rgba(255,255,255,.98) !important;
    border-color: var(--vg-border) !important;
}

html[data-vg-theme="light"] #public-mobile-menu a {
    color: #334155 !important;
}

html[data-vg-theme="light"] #public-mobile-menu a:hover {
    background: #f1f5f9 !important;
    color: var(--vg-emerald-dark) !important;
}

html[data-vg-theme="light"] #public-mobile-menu-button {
    background: #ffffff !important;
    border-color: var(--vg-border) !important;
    color: #334155 !important;
}


/* =========================================================
   DARK BACKGROUNDS -> LIGHT SURFACES
   ========================================================= */

html[data-vg-theme="light"] main [class*="bg-[#071318]"],
html[data-vg-theme="light"] main [class*="bg-[#061016]"],
html[data-vg-theme="light"] main [class*="bg-[#07111F]"],
html[data-vg-theme="light"] main [class*="bg-[#07111f]"],
html[data-vg-theme="light"] main [class*="bg-[#07141A]"],
html[data-vg-theme="light"] main [class*="bg-[#07141a]"],
html[data-vg-theme="light"] main [class*="bg-[#0A0F18]"],
html[data-vg-theme="light"] main [class*="bg-[#0a0f18]"] {
    background-color: transparent !important;
}

html[data-vg-theme="light"] main [class*="bg-slate-950"],
html[data-vg-theme="light"] main [class*="bg-slate-900"],
html[data-vg-theme="light"] main [class*="bg-slate-900/"],
html[data-vg-theme="light"] main [class*="bg-slate-950/"] {
    background-color: rgba(255,255,255,.96) !important;
}

html[data-vg-theme="light"] main [class*="bg-white/5"],
html[data-vg-theme="light"] main [class*="bg-white/[0.0"],
html[data-vg-theme="light"] main [class*="bg-black/"] {
    background-color: rgba(255,255,255,.72) !important;
}

html[data-vg-theme="light"] main [class*="border-white/"],
html[data-vg-theme="light"] footer [class*="border-white/"] {
    border-color: rgba(15, 23, 42, 0.10) !important;
}


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

html[data-vg-theme="light"] main section.relative.overflow-hidden {
    position: relative;
}

html[data-vg-theme="light"] main section.relative.overflow-hidden::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 75% 10%, rgba(16,185,129,.13), transparent 32rem),
        radial-gradient(circle at 18% 18%, rgba(59,130,246,.06), transparent 24rem),
        linear-gradient(135deg, #ffffff 0%, #f8fafc 65%, #ecfdf5 100%);
    z-index: 0;
    pointer-events: none;
}

html[data-vg-theme="light"] main section.relative.overflow-hidden > * {
    position: relative;
    z-index: 1;
}

html[data-vg-theme="light"] main [class*="bg-[radial-gradient"] {
    background-image:
        radial-gradient(circle at 75% 10%, rgba(16,185,129,.16), transparent 34rem),
        radial-gradient(circle at 18% 18%, rgba(59,130,246,.05), transparent 24rem) !important;
    opacity: 1 !important;
}

html[data-vg-theme="light"] main [class*="bg-[linear-gradient"] {
    background-image:
        linear-gradient(to bottom, rgba(248,250,252,.1), #f8fafc 92%) !important;
    opacity: 1 !important;
}

html[data-vg-theme="light"] main .shadow-2xl,
html[data-vg-theme="light"] main .shadow-lg,
html[data-vg-theme="light"] main .shadow-xl {
    box-shadow: var(--vg-shadow) !important;
}

html[data-vg-theme="light"] main .shadow-emerald-950\/40,
html[data-vg-theme="light"] main .shadow-emerald-500\/20,
html[data-vg-theme="light"] main .shadow-emerald-500\/30 {
    box-shadow: var(--vg-shadow) !important;
}


/* =========================================================
   TYPOGRAPHY
   ========================================================= */

html[data-vg-theme="light"] main h1,
html[data-vg-theme="light"] main h2,
html[data-vg-theme="light"] main h3,
html[data-vg-theme="light"] main h4,
html[data-vg-theme="light"] main h5,
html[data-vg-theme="light"] main h6 {
    color: var(--vg-heading) !important;
}

html[data-vg-theme="light"] main .text-white:not(.text-transparent),
html[data-vg-theme="light"] footer .text-white:not(.text-transparent) {
    color: var(--vg-heading) !important;
}

html[data-vg-theme="light"] main .text-slate-200,
html[data-vg-theme="light"] footer .text-slate-200 {
    color: #334155 !important;
}

html[data-vg-theme="light"] main .text-slate-300,
html[data-vg-theme="light"] footer .text-slate-300 {
    color: #475569 !important;
}

html[data-vg-theme="light"] main .text-slate-400,
html[data-vg-theme="light"] footer .text-slate-400 {
    color: #64748b !important;
}

html[data-vg-theme="light"] main .text-emerald-200,
html[data-vg-theme="light"] main .text-emerald-300,
html[data-vg-theme="light"] footer .text-emerald-300 {
    color: #047857 !important;
}


/* Tetap pertahankan gradient text penting */
html[data-vg-theme="light"] main .text-transparent[class*="bg-clip-text"] {
    color: transparent !important;
    background-image: linear-gradient(90deg, #facc15 0%, #f59e0b 45%, #84cc16 100%) !important;
}


/* =========================================================
   CARDS / PANELS
   ========================================================= */

html[data-vg-theme="light"] main .rounded-2xl,
html[data-vg-theme="light"] main .rounded-3xl,
html[data-vg-theme="light"] main [class*="rounded-[1.5rem]"],
html[data-vg-theme="light"] main [class*="rounded-[2rem]"] {
    border-color: rgba(15, 23, 42, 0.08) !important;
}

html[data-vg-theme="light"] main article,
html[data-vg-theme="light"] main aside,
html[data-vg-theme="light"] main .border {
    border-color: rgba(15, 23, 42, 0.08);
}

html[data-vg-theme="light"] main [class*="p-4"],
html[data-vg-theme="light"] main [class*="p-5"],
html[data-vg-theme="light"] main [class*="p-6"] {
    border-color: rgba(15, 23, 42, 0.08);
}

html[data-vg-theme="light"] main [class*="rounded-2xl"][class*="border"],
html[data-vg-theme="light"] main [class*="rounded-3xl"][class*="border"],
html[data-vg-theme="light"] main [class*="rounded-[2rem]"][class*="border"] {
    background: rgba(255,255,255,.92) !important;
    box-shadow: var(--vg-shadow-sm);
}


/* =========================================================
   FORMS / SEARCH
   ========================================================= */

html[data-vg-theme="light"] main input,
html[data-vg-theme="light"] main textarea,
html[data-vg-theme="light"] main select {
    background: #ffffff !important;
    color: var(--vg-text) !important;
    border: 1px solid var(--vg-border) !important;
    box-shadow: none !important;
}

html[data-vg-theme="light"] main input::placeholder,
html[data-vg-theme="light"] main textarea::placeholder {
    color: #94a3b8 !important;
}

html[data-vg-theme="light"] main input:focus,
html[data-vg-theme="light"] main textarea:focus,
html[data-vg-theme="light"] main select:focus {
    outline: none !important;
    border-color: rgba(16,185,129,.45) !important;
    box-shadow: 0 0 0 4px rgba(16,185,129,.10) !important;
}


/* =========================================================
   BUTTONS / PILLS / CATEGORY CHIPS
   ========================================================= */

html[data-vg-theme="light"] main .bg-emerald-400,
html[data-vg-theme="light"] header .bg-emerald-400,
html[data-vg-theme="light"] footer .bg-emerald-400 {
    background: #10b981 !important;
    color: #06221a !important;
}

html[data-vg-theme="light"] main .hover\:bg-emerald-300:hover,
html[data-vg-theme="light"] header .hover\:bg-emerald-300:hover,
html[data-vg-theme="light"] footer .hover\:bg-emerald-300:hover {
    background: #34d399 !important;
}

html[data-vg-theme="light"] main .rounded-full.border:not(.bg-emerald-400),
html[data-vg-theme="light"] main [class*="rounded-full"][class*="border"]:not(.bg-emerald-400):not([class*="bg-emerald"]) {
    background: rgba(255,255,255,.92) !important;
    border-color: #dbe5ec !important;
    color: #475569 !important;
}

html[data-vg-theme="light"] main .rounded-full.border:not(.bg-emerald-400):hover,
html[data-vg-theme="light"] main [class*="rounded-full"][class*="border"]:not(.bg-emerald-400):not([class*="bg-emerald"]):hover {
    background: #ffffff !important;
    border-color: rgba(16,185,129,.32) !important;
    color: #047857 !important;
}

html[data-vg-theme="light"] main .underline.text-emerald-300,
html[data-vg-theme="light"] header .underline.text-emerald-300 {
    color: #059669 !important;
}

html[data-vg-theme="light"] main .bg-emerald-400\/10,
html[data-vg-theme="light"] main .bg-emerald-400\/15 {
    background: rgba(16,185,129,.10) !important;
}


/* =========================================================
   PRODUCT / GRID FEEL
   ========================================================= */

html[data-vg-theme="light"] main img {
    border-radius: inherit;
}

html[data-vg-theme="light"] main a[class*="rounded-2xl"],
html[data-vg-theme="light"] main a[class*="rounded-3xl"],
html[data-vg-theme="light"] main a[class*="rounded-[2rem]"] {
    overflow: hidden;
}

html[data-vg-theme="light"] main a[class*="rounded-2xl"]:hover,
html[data-vg-theme="light"] main a[class*="rounded-3xl"]:hover,
html[data-vg-theme="light"] main a[class*="rounded-[2rem]"]:hover,
html[data-vg-theme="light"] main article:hover,
html[data-vg-theme="light"] main [class*="rounded-2xl"][class*="border"]:hover,
html[data-vg-theme="light"] main [class*="rounded-3xl"][class*="border"]:hover,
html[data-vg-theme="light"] main [class*="rounded-[2rem]"][class*="border"]:hover {
    box-shadow: var(--vg-shadow) !important;
    border-color: rgba(16,185,129,.22) !important;
}


/* =========================================================
   TOGGLE
   ========================================================= */

.vg-theme-toggle {
    width: 42px;
    height: 42px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 9999px;
    border: 1px solid transparent;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    transition:
        background-color .20s ease,
        border-color .20s ease,
        color .20s ease,
        transform .20s ease,
        box-shadow .20s ease;
}

.vg-theme-toggle:hover {
    background: rgba(16,185,129,.08);
    border-color: rgba(16,185,129,.16);
    color: #059669;
}

.vg-theme-toggle:active {
    transform: scale(.95);
}

.vg-theme-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(16,185,129,.14);
}

.vg-theme-toggle svg {
    width: 20px;
    height: 20px;
    display: block;
    transition: transform .2s ease;
}

.vg-theme-toggle:hover svg {
    transform: rotate(8deg) scale(1.05);
}

.vg-theme-icon-star,
.vg-theme-icon-sun {
    display: none;
}

html[data-vg-theme="light"] .vg-theme-icon-star {
    display: inline-flex;
}

html[data-vg-theme="dark"] .vg-theme-icon-sun {
    display: inline-flex;
}

html[data-vg-theme="dark"] .vg-theme-toggle {
    color: #facc15;
}

html[data-vg-theme="dark"] .vg-theme-toggle:hover {
    color: #fde047;
    background: rgba(250,204,21,.08);
    border-color: rgba(250,204,21,.16);
}


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

@media (max-width: 640px) {
    .vg-theme-toggle {
        width: 40px;
        height: 40px;
    }

    .vg-theme-toggle svg {
        width: 19px;
        height: 19px;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .vg-theme-toggle,
    .vg-theme-toggle svg,
    html[data-vg-theme="light"] body,
    html[data-vg-theme="light"] header,
    html[data-vg-theme="light"] footer,
    html[data-vg-theme="light"] main,
    html[data-vg-theme="light"] section,
    html[data-vg-theme="light"] article,
    html[data-vg-theme="light"] aside,
    html[data-vg-theme="light"] div,
    html[data-vg-theme="light"] a,
    html[data-vg-theme="light"] button,
    html[data-vg-theme="light"] input,
    html[data-vg-theme="light"] textarea,
    html[data-vg-theme="light"] select {
        transition: none !important;
    }
}

/* VG_LIGHT_V4_START */

/*
|--------------------------------------------------------------------------
| V-GRAPHIC LIGHT V4
|--------------------------------------------------------------------------
| Scope:
| - Contact
| - Catalog
|
| DARK MODE TIDAK DIUBAH.
|--------------------------------------------------------------------------
*/


/* =========================================================
   CONTACT PAGE
   ========================================================= */

html[data-vg-theme="light"] body .contact-page {
    background:
        radial-gradient(
            circle at 82% 4%,
            rgba(16, 185, 129, .075),
            transparent 28rem
        ),
        radial-gradient(
            circle at 8% 30%,
            rgba(14, 165, 233, .035),
            transparent 24rem
        ),
        #f8fafc !important;

    color: #0f172a !important;
}


/* HERO */

html[data-vg-theme="light"] body .contact-hero {
    background:
        radial-gradient(
            circle at 88% 10%,
            rgba(16, 185, 129, .12),
            transparent 25rem
        ),
        radial-gradient(
            circle at 12% 90%,
            rgba(250, 204, 21, .08),
            transparent 20rem
        ),
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f8fafc 64%,
            #ecfdf5 100%
        ) !important;

    border:
        1px solid #e2e8f0 !important;

    box-shadow:
        0 20px 55px rgba(15, 23, 42, .08) !important;
}


html[data-vg-theme="light"] body .contact-label {
    background:
        rgba(16, 185, 129, .08) !important;

    border-color:
        rgba(5, 150, 105, .25) !important;

    color:
        #047857 !important;
}


html[data-vg-theme="light"] body .contact-title {
    color:
        #0f172a !important;

    text-shadow:
        none !important;
}


html[data-vg-theme="light"] body .contact-title span {
    color:
        transparent !important;

    background:
        linear-gradient(
            90deg,
            #f59e0b 0%,
            #eab308 45%,
            #84cc16 100%
        ) !important;

    -webkit-background-clip:
        text !important;

    background-clip:
        text !important;

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


html[data-vg-theme="light"] body .contact-description {
    color:
        #475569 !important;
}


/* CONTACT INFO CARDS */

html[data-vg-theme="light"] body .contact-card {
    background:
        #ffffff !important;

    border:
        1px solid #e2e8f0 !important;

    box-shadow:
        0 12px 32px rgba(15, 23, 42, .06) !important;
}


html[data-vg-theme="light"] body .contact-card:hover {
    border-color:
        rgba(16, 185, 129, .25) !important;

    box-shadow:
        0 18px 44px rgba(15, 23, 42, .09) !important;

    transform:
        translateY(-2px);
}


html[data-vg-theme="light"] body .contact-card h2 {
    color:
        #0f172a !important;
}


html[data-vg-theme="light"] body .contact-card .value {
    color:
        #334155 !important;
}


html[data-vg-theme="light"] body .contact-card .subtitle {
    color:
        #64748b !important;
}


html[data-vg-theme="light"] body .contact-icon {
    color:
        #10b981 !important;

    background:
        linear-gradient(
            135deg,
            rgba(16, 185, 129, .14),
            rgba(6, 182, 212, .05)
        ) !important;

    border-color:
        rgba(16, 185, 129, .24) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.8),
        0 8px 20px rgba(16,185,129,.08) !important;
}


/* FORM + MAP PANELS */

html[data-vg-theme="light"] body .contact-panel {
    background:
        #ffffff !important;

    border:
        1px solid #e2e8f0 !important;

    box-shadow:
        0 16px 42px rgba(15, 23, 42, .07) !important;
}


html[data-vg-theme="light"] body .contact-panel h2 {
    color:
        #0f172a !important;
}


html[data-vg-theme="light"] body .contact-panel p {
    color:
        #64748b !important;
}


html[data-vg-theme="light"] body .field label {
    color:
        #334155 !important;
}


html[data-vg-theme="light"] body .field input,
html[data-vg-theme="light"] body .field select,
html[data-vg-theme="light"] body .field textarea {
    background:
        #f8fafc !important;

    color:
        #0f172a !important;

    border:
        1px solid #dbe4ee !important;

    box-shadow:
        none !important;
}


html[data-vg-theme="light"] body .field input:hover,
html[data-vg-theme="light"] body .field select:hover,
html[data-vg-theme="light"] body .field textarea:hover {
    border-color:
        #cbd5e1 !important;
}


html[data-vg-theme="light"] body .field input:focus,
html[data-vg-theme="light"] body .field select:focus,
html[data-vg-theme="light"] body .field textarea:focus {
    background:
        #ffffff !important;

    border-color:
        rgba(16,185,129,.55) !important;

    box-shadow:
        0 0 0 4px rgba(16,185,129,.10) !important;
}


html[data-vg-theme="light"] body .field input::placeholder,
html[data-vg-theme="light"] body .field textarea::placeholder {
    color:
        #94a3b8 !important;
}


html[data-vg-theme="light"] body .field select option {
    background:
        #ffffff !important;

    color:
        #0f172a !important;
}


/* MAP */

html[data-vg-theme="light"] body .map-box {
    background:
        #ffffff !important;

    border-color:
        #e2e8f0 !important;
}


html[data-vg-theme="light"] body .map-info h2 {
    color:
        #0f172a !important;
}


html[data-vg-theme="light"] body .map-info p {
    color:
        #64748b !important;
}


html[data-vg-theme="light"] body .map-link {
    color:
        #047857 !important;

    border-color:
        #dbe4ee !important;

    background:
        #f8fafc !important;
}


html[data-vg-theme="light"] body .map-link:hover {
    color:
        #065f46 !important;

    border-color:
        rgba(16,185,129,.30) !important;

    background:
        #ecfdf5 !important;
}


/* CONTACT CTA */

html[data-vg-theme="light"] body .contact-cta {
    background:
        linear-gradient(
            135deg,
            rgba(16,185,129,.11),
            rgba(250,204,21,.07)
        ) !important;

    border-color:
        rgba(16,185,129,.22) !important;

    box-shadow:
        0 14px 38px rgba(15,23,42,.05) !important;
}


html[data-vg-theme="light"] body .contact-cta h2 {
    color:
        #0f172a !important;
}


html[data-vg-theme="light"] body .contact-cta p {
    color:
        #475569 !important;
}


/* =========================================================
   CATALOG PAGE
   ========================================================= */


/*
 * Outer catalog section.
 */

html[data-vg-theme="light"]
body main > section[class*="bg-[#061016]"] {
    background:
        radial-gradient(
            circle at 88% 5%,
            rgba(16,185,129,.07),
            transparent 26rem
        ),
        #f8fafc !important;

    color:
        #0f172a !important;
}


/* HERO CARD */

html[data-vg-theme="light"] body .catalog-hero-box {
    background:
        radial-gradient(
            circle at 88% 4%,
            rgba(16,185,129,.12),
            transparent 24rem
        ),
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f8fafc 62%,
            #ecfdf5 100%
        ) !important;

    border:
        1px solid #e2e8f0 !important;

    box-shadow:
        0 20px 55px rgba(15,23,42,.08) !important;
}


html[data-vg-theme="light"]
body .catalog-hero-box h1,

html[data-vg-theme="light"]
body .catalog-hero-box .catalog-title {
    color:
        #0f172a !important;
}


html[data-vg-theme="light"]
body .catalog-hero-box h1 .text-white,

html[data-vg-theme="light"]
body .catalog-hero-box .catalog-title .text-white {
    color:
        #0f172a !important;
}


html[data-vg-theme="light"]
body .catalog-hero-box p.text-slate-300 {
    color:
        #475569 !important;
}


/* Hero badge */

html[data-vg-theme="light"]
body .catalog-hero-box p[class*="bg-emerald-400"] {
    color:
        #047857 !important;

    background:
        rgba(16,185,129,.08) !important;

    border-color:
        rgba(16,185,129,.24) !important;
}


/* SEARCH */

html[data-vg-theme="light"]
body .catalog-hero-box form > div {
    background:
        #ffffff !important;

    border:
        1px solid #dbe4ee !important;

    box-shadow:
        0 8px 24px rgba(15,23,42,.04) !important;
}


html[data-vg-theme="light"]
body .catalog-hero-box form input {
    background:
        transparent !important;

    color:
        #0f172a !important;

    border:
        0 !important;

    box-shadow:
        none !important;
}


html[data-vg-theme="light"]
body .catalog-hero-box form input::placeholder {
    color:
        #94a3b8 !important;
}


html[data-vg-theme="light"]
body .catalog-hero-box form span.text-slate-400 {
    color:
        #64748b !important;
}


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

html[data-vg-theme="light"]
body .catalog-filter-sidebar {
    background:
        #ffffff !important;

    border:
        1px solid #e2e8f0 !important;

    box-shadow:
        0 12px 32px rgba(15,23,42,.055) !important;
}


html[data-vg-theme="light"]
body .catalog-filter-sidebar h2,

html[data-vg-theme="light"]
body .catalog-filter-sidebar h3 {
    color:
        #0f172a !important;
}


html[data-vg-theme="light"]
body .catalog-filter-sidebar a {
    color:
        #475569 !important;
}


html[data-vg-theme="light"]
body .catalog-filter-sidebar a:hover {
    background:
        #f1f5f9 !important;

    color:
        #047857 !important;
}


html[data-vg-theme="light"]
body .catalog-filter-sidebar a[class*="bg-emerald"] {
    background:
        #ecfdf5 !important;

    color:
        #059669 !important;
}


html[data-vg-theme="light"]
body .catalog-filter-sidebar a span[class*="border-white"] {
    border-color:
        #cbd5e1 !important;
}


/* =========================================================
   CATEGORY CHIPS
   ========================================================= */

html[data-vg-theme="light"]
body #catalog-products a[class*="shrink-0"][class*="rounded-full"] {
    background:
        #ffffff !important;

    border-color:
        #dbe4ee !important;

    color:
        #475569 !important;
}


html[data-vg-theme="light"]
body #catalog-products a[class*="shrink-0"][class*="rounded-full"]:hover {
    background:
        #f8fafc !important;

    border-color:
        rgba(16,185,129,.30) !important;

    color:
        #047857 !important;
}


html[data-vg-theme="light"]
body #catalog-products a[class*="bg-emerald-400"] {
    background:
        #ecfdf5 !important;

    border-color:
        rgba(16,185,129,.30) !important;

    color:
        #059669 !important;
}


/* Result counter */

html[data-vg-theme="light"]
body #catalog-products p.text-slate-400 {
    color:
        #64748b !important;
}


/* =========================================================
   PRODUCT CARDS
   ========================================================= */

html[data-vg-theme="light"]
body .catalog-product-card {
    background:
        #ffffff !important;

    border:
        1px solid #e2e8f0 !important;

    box-shadow:
        0 10px 28px rgba(15,23,42,.055) !important;
}


html[data-vg-theme="light"]
body .catalog-product-card:hover {
    border-color:
        rgba(16,185,129,.30) !important;

    box-shadow:
        0 20px 42px rgba(15,23,42,.10) !important;
}


html[data-vg-theme="light"]
body .catalog-product-card h2,

html[data-vg-theme="light"]
body .catalog-product-card h3,

html[data-vg-theme="light"]
body .catalog-product-card h4 {
    color:
        #0f172a !important;
}


html[data-vg-theme="light"]
body .catalog-product-card p {
    color:
        #64748b !important;
}


/*
 * Badge di atas gambar harus tetap dark,
 * agar tetap kontras dengan foto.
 */

html[data-vg-theme="light"]
body .catalog-product-card .catalog-badge {
    background:
        rgba(15,23,42,.78) !important;

    border-color:
        rgba(255,255,255,.26) !important;

    color:
        #ffffff !important;

    box-shadow:
        0 4px 12px rgba(15,23,42,.16) !important;
}


/*
 * V3 mengubah beberapa bg-slate menjadi putih.
 * Di dalam product visual kita restore warna
 * karena elemen tersebut merupakan bagian ilustrasi.
 */

html[data-vg-theme="light"]
body .catalog-product-visual .bg-slate-950,

html[data-vg-theme="light"]
body .catalog-product-visual [class*="bg-slate-950"] {
    background-color:
        #020617 !important;
}


html[data-vg-theme="light"]
body .catalog-product-visual .bg-slate-900,

html[data-vg-theme="light"]
body .catalog-product-visual [class*="bg-slate-900"] {
    background-color:
        #0f172a !important;
}


html[data-vg-theme="light"]
body .catalog-product-visual .bg-slate-800,

html[data-vg-theme="light"]
body .catalog-product-visual [class*="bg-slate-800"] {
    background-color:
        #1e293b !important;
}


html[data-vg-theme="light"]
body .catalog-product-visual .text-white {
    color:
        #ffffff !important;
}


/* Product action - detail */

html[data-vg-theme="light"]
body .catalog-product-card a[class*="border-white"] {
    background:
        #f8fafc !important;

    border-color:
        #dbe4ee !important;

    color:
        #334155 !important;
}


html[data-vg-theme="light"]
body .catalog-product-card a[class*="border-white"]:hover {
    background:
        #ffffff !important;

    border-color:
        rgba(16,185,129,.30) !important;

    color:
        #047857 !important;
}


/* =========================================================
   EMPTY STATE / SUPPORT CARDS / BOTTOM CTA
   ========================================================= */

html[data-vg-theme="light"]
body #catalog-products [class*="bg-white/[0.05]"],

html[data-vg-theme="light"]
body #catalog-products [class*="from-white/[0.10]"] {
    background:
        #ffffff !important;

    border-color:
        #e2e8f0 !important;

    box-shadow:
        0 10px 28px rgba(15,23,42,.05) !important;
}


html[data-vg-theme="light"]
body #catalog-products .text-slate-300 {
    color:
        #475569 !important;
}


html[data-vg-theme="light"]
body #catalog-products .text-slate-400 {
    color:
        #64748b !important;
}


/* =========================================================
   LIGHT MODE QUALITY
   ========================================================= */

html[data-vg-theme="light"]
body .contact-card,

html[data-vg-theme="light"]
body .contact-panel,

html[data-vg-theme="light"]
body .catalog-filter-sidebar,

html[data-vg-theme="light"]
body .catalog-product-card,

html[data-vg-theme="light"]
body .catalog-hero-box {
    -webkit-font-smoothing:
        antialiased;
}


/* Mobile shadow dibuat lebih ringan */

@media (max-width: 640px) {

    html[data-vg-theme="light"]
    body .contact-hero,

    html[data-vg-theme="light"]
    body .catalog-hero-box {
        box-shadow:
            0 12px 30px rgba(15,23,42,.06) !important;
    }


    html[data-vg-theme="light"]
    body .contact-card,

    html[data-vg-theme="light"]
    body .contact-panel,

    html[data-vg-theme="light"]
    body .catalog-product-card {
        box-shadow:
            0 8px 22px rgba(15,23,42,.05) !important;
    }
}

/* VG_LIGHT_V4_END */

/* VG_PREMIUM_LIGHT_V5_START */

/* =========================================================
   DESIGN TOKENS
   ========================================================= */

html[data-vg-theme="light"] {
    --vg5-bg: #f6f8fb;
    --vg5-bg-soft: #f8fafc;
    --vg5-surface: #ffffff;
    --vg5-surface-2: #fbfdff;

    --vg5-heading: #0b1220;
    --vg5-text: #334155;
    --vg5-muted: #64748b;
    --vg5-soft: #94a3b8;

    --vg5-border: #e2e8f0;
    --vg5-border-soft: rgba(15, 23, 42, .075);

    --vg5-green: #059669;
    --vg5-green-bright: #10b981;
    --vg5-green-soft: #ecfdf5;

    --vg5-yellow: #eab308;
    --vg5-lime: #84cc16;

    --vg5-shadow-sm:
        0 8px 24px rgba(15, 23, 42, .045);

    --vg5-shadow:
        0 18px 50px rgba(15, 23, 42, .075);

    --vg5-shadow-lg:
        0 28px 75px rgba(15, 23, 42, .11);

    --vg5-radius: 28px;
}


/* =========================================================
   BASE
   ========================================================= */

html[data-vg-theme="light"] body.vg-public-body {
    background:
        radial-gradient(
            circle at 80% -5%,
            rgba(16, 185, 129, .07),
            transparent 34rem
        ),
        radial-gradient(
            circle at -5% 25%,
            rgba(14, 165, 233, .035),
            transparent 28rem
        ),
        var(--vg5-bg) !important;

    color: var(--vg5-text) !important;
}


html[data-vg-theme="light"] body.vg-public-body main {
    background: transparent !important;
}


html[data-vg-theme="light"] body.vg-public-body main h1,
html[data-vg-theme="light"] body.vg-public-body main h2,
html[data-vg-theme="light"] body.vg-public-body main h3,
html[data-vg-theme="light"] body.vg-public-body main h4 {
    color: var(--vg5-heading) !important;
    text-wrap: balance;
}


html[data-vg-theme="light"] body.vg-public-body main p {
    text-wrap: pretty;
}


/* =========================================================
   NAVBAR PREMIUM
   ========================================================= */

html[data-vg-theme="light"] body.vg-public-body > header {
    background:
        rgba(255, 255, 255, .90) !important;

    border-color:
        rgba(15, 23, 42, .07) !important;

    box-shadow:
        0 1px 0 rgba(15,23,42,.03),
        0 12px 32px rgba(15,23,42,.035) !important;

    backdrop-filter:
        blur(20px) saturate(150%) !important;

    -webkit-backdrop-filter:
        blur(20px) saturate(150%) !important;
}


html[data-vg-theme="light"] body.vg-public-body > header nav a {
    letter-spacing: -.01em;
}


html[data-vg-theme="light"]
body.vg-public-body > header nav a:hover {
    color: var(--vg5-green) !important;
}


/* Customer Portal */

html[data-vg-theme="light"]
body.vg-public-body > header a.bg-emerald-400 {
    background:
        linear-gradient(
            135deg,
            #10b981,
            #059669
        ) !important;

    color: #ffffff !important;

    box-shadow:
        0 9px 24px rgba(5,150,105,.19) !important;
}


html[data-vg-theme="light"]
body.vg-public-body > header a.bg-emerald-400:hover {
    transform: translateY(-1px);

    box-shadow:
        0 13px 30px rgba(5,150,105,.24) !important;
}


/* =========================================================
   OUTER PAGE BACKGROUNDS
   ABOUT / SERVICES / FAQ / SOLUTION / PORTFOLIO / CATALOG
   ========================================================= */

html[data-vg-theme="light"]
body.vg-public-body main > section[class*="bg-[#061016]"],

html[data-vg-theme="light"]
body.vg-public-body main > section[class*="bg-[#061014]"] {
    background:
        radial-gradient(
            circle at 88% 5%,
            rgba(16,185,129,.075),
            transparent 30rem
        ),
        radial-gradient(
            circle at 7% 35%,
            rgba(14,165,233,.03),
            transparent 26rem
        ),
        var(--vg5-bg) !important;

    color: var(--vg5-text) !important;
}


/* =========================================================
   GENERAL HERO PANELS
   ========================================================= */

html[data-vg-theme="light"]
body.vg-public-body main
[class*="bg-[#07141A]"],

html[data-vg-theme="light"]
body.vg-public-body main
[class*="bg-[#07141a]"] {
    background:
        radial-gradient(
            circle at 88% 8%,
            rgba(16,185,129,.11),
            transparent 24rem
        ),
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f9fbfd 58%,
            #ecfdf5 100%
        ) !important;

    border-color:
        var(--vg5-border-soft) !important;

    box-shadow:
        var(--vg5-shadow) !important;
}


/* hero white text -> premium navy */

html[data-vg-theme="light"]
body.vg-public-body main
[class*="bg-[#07141A]"] .text-white,

html[data-vg-theme="light"]
body.vg-public-body main
[class*="bg-[#07141a]"] .text-white {
    color:
        var(--vg5-heading) !important;
}


html[data-vg-theme="light"]
body.vg-public-body main
[class*="bg-[#07141A]"] .text-slate-300,

html[data-vg-theme="light"]
body.vg-public-body main
[class*="bg-[#07141a]"] .text-slate-300 {
    color:
        var(--vg5-muted) !important;
}


/* =========================================================
   PREMIUM GRADIENT HEADINGS
   ========================================================= */

html[data-vg-theme="light"]
body.vg-public-body main
.text-transparent[class*="bg-clip-text"] {
    color: transparent !important;

    background-image:
        linear-gradient(
            90deg,
            #f59e0b 0%,
            #eab308 42%,
            #84cc16 100%
        ) !important;

    -webkit-background-clip:
        text !important;

    background-clip:
        text !important;

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


/* =========================================================
   BADGES
   ========================================================= */

html[data-vg-theme="light"]
body.vg-public-body main
[class*="rounded-full"][class*="bg-emerald-400/10"] {
    background:
        rgba(16,185,129,.085) !important;

    border-color:
        rgba(5,150,105,.20) !important;

    color:
        #047857 !important;
}


/* =========================================================
   GLOBAL PREMIUM CARDS
   ========================================================= */

html[data-vg-theme="light"]
body.vg-public-body main
[class*="border-white/10"][class*="bg-white/"],

html[data-vg-theme="light"]
body.vg-public-body main
[class*="border-white/10"][class*="from-white/"] {
    background:
        rgba(255,255,255,.96) !important;

    border-color:
        var(--vg5-border-soft) !important;

    box-shadow:
        var(--vg5-shadow-sm) !important;
}


/* hover only on likely cards */

html[data-vg-theme="light"]
body.vg-public-body main article,

html[data-vg-theme="light"]
body.vg-public-body main .catalog-product-card,

html[data-vg-theme="light"]
body.vg-public-body main .portfolio-card,

html[data-vg-theme="light"]
body.vg-public-body main .solution-card,

html[data-vg-theme="light"]
body.vg-public-body main .contact-card {
    transition:
        transform .24s ease,
        border-color .24s ease,
        box-shadow .24s ease,
        background-color .24s ease;
}


html[data-vg-theme="light"]
body.vg-public-body main article:hover,

html[data-vg-theme="light"]
body.vg-public-body main .catalog-product-card:hover,

html[data-vg-theme="light"]
body.vg-public-body main .portfolio-card:hover,

html[data-vg-theme="light"]
body.vg-public-body main .solution-card:hover,

html[data-vg-theme="light"]
body.vg-public-body main .contact-card:hover {
    transform:
        translateY(-4px);

    border-color:
        rgba(16,185,129,.24) !important;

    box-shadow:
        var(--vg5-shadow) !important;
}


/* =========================================================
   TEXT CONTRAST
   ========================================================= */

html[data-vg-theme="light"]
body.vg-public-body main .text-slate-200 {
    color: #334155 !important;
}


html[data-vg-theme="light"]
body.vg-public-body main .text-slate-300 {
    color: #475569 !important;
}


html[data-vg-theme="light"]
body.vg-public-body main .text-slate-400 {
    color: #64748b !important;
}


html[data-vg-theme="light"]
body.vg-public-body main .text-slate-500 {
    color: #64748b !important;
}


html[data-vg-theme="light"]
body.vg-public-body main .text-emerald-200,

html[data-vg-theme="light"]
body.vg-public-body main .text-emerald-300 {
    color: #047857 !important;
}


/* =========================================================
   PRIMARY BUTTONS
   ========================================================= */

html[data-vg-theme="light"]
body.vg-public-body main a.bg-emerald-400,

html[data-vg-theme="light"]
body.vg-public-body main button.bg-emerald-400,

html[data-vg-theme="light"]
body.vg-public-body main .contact-button,

html[data-vg-theme="light"]
body.vg-public-body main .cta-button {
    background:
        linear-gradient(
            135deg,
            #10b981,
            #059669
        ) !important;

    color:
        #ffffff !important;

    border:
        0 !important;

    box-shadow:
        0 10px 26px rgba(5,150,105,.20) !important;

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


html[data-vg-theme="light"]
body.vg-public-body main a.bg-emerald-400:hover,

html[data-vg-theme="light"]
body.vg-public-body main button.bg-emerald-400:hover,

html[data-vg-theme="light"]
body.vg-public-body main .contact-button:hover,

html[data-vg-theme="light"]
body.vg-public-body main .cta-button:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 15px 34px rgba(5,150,105,.25) !important;
}


/* secondary buttons */

html[data-vg-theme="light"]
body.vg-public-body main
a[class*="border-emerald"][class*="bg-white"] {
    background:
        #ffffff !important;

    border-color:
        rgba(5,150,105,.22) !important;

    color:
        #047857 !important;
}


html[data-vg-theme="light"]
body.vg-public-body main
a[class*="border-emerald"][class*="bg-white"]:hover {
    background:
        #ecfdf5 !important;

    border-color:
        rgba(5,150,105,.35) !important;
}


/* =========================================================
   HOME
   ========================================================= */

html[data-vg-theme="light"]
body.vg-public-body main > div.min-h-screen {
    background:
        transparent !important;

    color:
        var(--vg5-text) !important;
}


html[data-vg-theme="light"]
body.vg-public-body main > div.min-h-screen > section {
    border-color:
        rgba(15,23,42,.06) !important;
}


/* Main hero image container */

html[data-vg-theme="light"]
body.vg-public-body main > div.min-h-screen
section:first-child [class*="rounded-[2rem]"][class*="border"] {
    background:
        rgba(255,255,255,.88) !important;

    border-color:
        rgba(15,23,42,.075) !important;

    box-shadow:
        var(--vg5-shadow-lg) !important;
}


/* service/product image cards */

html[data-vg-theme="light"]
body.vg-public-body main > div.min-h-screen article {
    background:
        #ffffff !important;

    border-color:
        var(--vg5-border-soft) !important;

    box-shadow:
        var(--vg5-shadow-sm) !important;
}


/* =========================================================
   FAQ
   ========================================================= */

html[data-vg-theme="light"]
body[data-vg-path="faq"] .faq-hero {
    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(16,185,129,.11),
            transparent 24rem
        ),
        linear-gradient(
            135deg,
            #ffffff,
            #f8fafc 65%,
            #ecfdf5
        ) !important;

    border:
        1px solid var(--vg5-border-soft) !important;

    box-shadow:
        var(--vg5-shadow) !important;
}


html[data-vg-theme="light"]
body[data-vg-path="faq"] .faq-title {
    color:
        var(--vg5-heading) !important;
}


html[data-vg-theme="light"]
body[data-vg-path="faq"] .faq-subtitle {
    color:
        var(--vg5-muted) !important;
}


html[data-vg-theme="light"]
body[data-vg-path="faq"] .faq-card {
    background:
        #ffffff !important;

    border:
        1px solid var(--vg5-border) !important;

    box-shadow:
        0 8px 25px rgba(15,23,42,.045) !important;

    overflow:
        hidden;
}


html[data-vg-theme="light"]
body[data-vg-path="faq"] .faq-summary {
    color:
        var(--vg5-heading) !important;
}


html[data-vg-theme="light"]
body[data-vg-path="faq"] .faq-answer {
    color:
        var(--vg5-muted) !important;

    border-color:
        var(--vg5-border) !important;
}


html[data-vg-theme="light"]
body[data-vg-path="faq"] .faq-card[open] {
    border-color:
        rgba(16,185,129,.25) !important;

    box-shadow:
        var(--vg5-shadow-sm) !important;
}


html[data-vg-theme="light"]
body[data-vg-path="faq"] .faq-cta {
    background:
        linear-gradient(
            135deg,
            rgba(16,185,129,.10),
            rgba(250,204,21,.055),
            #ffffff
        ) !important;

    border-color:
        rgba(16,185,129,.20) !important;
}


/* =========================================================
   BUSINESS SOLUTIONS
   ========================================================= */

html[data-vg-theme="light"]
body[data-vg-path="solusi-bisnis"] .solution-hero {
    background:
        radial-gradient(
            circle at 88% 8%,
            rgba(16,185,129,.11),
            transparent 25rem
        ),
        linear-gradient(
            135deg,
            #ffffff,
            #f8fafc 60%,
            #ecfdf5
        ) !important;

    border-color:
        var(--vg5-border-soft) !important;

    box-shadow:
        var(--vg5-shadow) !important;
}


html[data-vg-theme="light"]
body[data-vg-path="solusi-bisnis"] .solution-title {
    color:
        var(--vg5-heading) !important;
}


html[data-vg-theme="light"]
body[data-vg-path="solusi-bisnis"] .solution-subtitle {
    color:
        var(--vg5-muted) !important;
}


html[data-vg-theme="light"]
body[data-vg-path="solusi-bisnis"] .solution-card,

html[data-vg-theme="light"]
body[data-vg-path="solusi-bisnis"] .solution-workflow {
    background:
        #ffffff !important;

    border-color:
        var(--vg5-border) !important;

    box-shadow:
        var(--vg5-shadow-sm) !important;
}


html[data-vg-theme="light"]
body[data-vg-path="solusi-bisnis"] .solution-cta {
    background:
        linear-gradient(
            135deg,
            rgba(16,185,129,.10),
            rgba(250,204,21,.06),
            #ffffff
        ) !important;

    border-color:
        rgba(16,185,129,.22) !important;

    box-shadow:
        var(--vg5-shadow-sm) !important;
}


/* =========================================================
   PORTFOLIO
   ========================================================= */

html[data-vg-theme="light"]
body[data-vg-path="portofolio"] .portfolio-title {
    color:
        var(--vg5-heading) !important;
}


html[data-vg-theme="light"]
body[data-vg-path="portofolio"] .portfolio-tabs {
    gap:
        .55rem;
}


html[data-vg-theme="light"]
body[data-vg-path="portofolio"] .portfolio-tabs a {
    border-radius:
        9999px !important;
}


html[data-vg-theme="light"]
body[data-vg-path="portofolio"] .portfolio-tabs
a:not([class*="bg-emerald-400"]) {
    background:
        #ffffff !important;

    border-color:
        var(--vg5-border) !important;

    color:
        #475569 !important;

    box-shadow:
        0 5px 16px rgba(15,23,42,.035) !important;
}


html[data-vg-theme="light"]
body[data-vg-path="portofolio"] .portfolio-card {
    background:
        #ffffff !important;

    border-color:
        var(--vg5-border) !important;

    box-shadow:
        var(--vg5-shadow-sm) !important;
}


/* Keep visual mockups colourful */

html[data-vg-theme="light"]
body[data-vg-path="portofolio"] .portfolio-visual {
    border-color:
        rgba(255,255,255,.65) !important;

    box-shadow:
        inset 0 0 0 1px rgba(15,23,42,.03) !important;
}


html[data-vg-theme="light"]
body[data-vg-path="portofolio"] .portfolio-visual .text-white {
    color:
        #ffffff !important;
}


html[data-vg-theme="light"]
body[data-vg-path="portofolio"]
.portfolio-visual [class*="bg-slate-950"] {
    background-color:
        #020617 !important;
}


html[data-vg-theme="light"]
body[data-vg-path="portofolio"]
.portfolio-visual [class*="bg-slate-900"] {
    background-color:
        #0f172a !important;
}


/* =========================================================
   CATALOG DETAIL
   ========================================================= */

html[data-vg-theme="light"]
body[data-vg-path^="katalog/"] main > div.min-h-screen {
    background:
        var(--vg5-bg) !important;
}


html[data-vg-theme="light"]
body[data-vg-path^="katalog/"]
main section:first-child {
    background:
        radial-gradient(
            circle at 82% 12%,
            rgba(16,185,129,.08),
            transparent 28rem
        ),
        linear-gradient(
            180deg,
            #ffffff,
            #f6f8fb
        ) !important;
}


/* =========================================================
   CATALOG INDEX V4 REFINEMENT
   ========================================================= */

html[data-vg-theme="light"]
body[data-vg-path="katalog"] .catalog-hero-box {
    box-shadow:
        var(--vg5-shadow) !important;
}


html[data-vg-theme="light"]
body[data-vg-path="katalog"] .catalog-filter-sidebar {
    box-shadow:
        var(--vg5-shadow-sm) !important;
}


html[data-vg-theme="light"]
body[data-vg-path="katalog"] .catalog-product-card {
    border-color:
        var(--vg5-border) !important;

    box-shadow:
        var(--vg5-shadow-sm) !important;
}


/* =========================================================
   CONTACT V4 REFINEMENT
   ========================================================= */

html[data-vg-theme="light"]
body[data-vg-path="kontak"] .contact-hero {
    box-shadow:
        var(--vg5-shadow) !important;
}


html[data-vg-theme="light"]
body[data-vg-path="kontak"] .contact-card,

html[data-vg-theme="light"]
body[data-vg-path="kontak"] .contact-panel {
    border-color:
        var(--vg5-border) !important;

    box-shadow:
        var(--vg5-shadow-sm) !important;
}


/* =========================================================
   FORMS
   ========================================================= */

html[data-vg-theme="light"]
body.vg-public-body main input,

html[data-vg-theme="light"]
body.vg-public-body main select,

html[data-vg-theme="light"]
body.vg-public-body main textarea {
    background:
        #ffffff !important;

    color:
        var(--vg5-heading) !important;

    border-color:
        #dbe3ec !important;
}


html[data-vg-theme="light"]
body.vg-public-body main input:focus,

html[data-vg-theme="light"]
body.vg-public-body main select:focus,

html[data-vg-theme="light"]
body.vg-public-body main textarea:focus {
    border-color:
        rgba(16,185,129,.52) !important;

    box-shadow:
        0 0 0 4px rgba(16,185,129,.095) !important;
}


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

html[data-vg-theme="light"]
body.vg-public-body footer {
    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f8fafc
        ) !important;

    border-top:
        1px solid var(--vg5-border) !important;
}


html[data-vg-theme="light"]
body.vg-public-body footer h2,

html[data-vg-theme="light"]
body.vg-public-body footer h3,

html[data-vg-theme="light"]
body.vg-public-body footer strong {
    color:
        var(--vg5-heading) !important;
}


html[data-vg-theme="light"]
body.vg-public-body footer p,

html[data-vg-theme="light"]
body.vg-public-body footer li,

html[data-vg-theme="light"]
body.vg-public-body footer a:not(.bg-emerald-400) {
    color:
        #64748b !important;
}


html[data-vg-theme="light"]
body.vg-public-body footer a:hover {
    color:
        var(--vg5-green) !important;
}


/* =========================================================
   IMAGE TREATMENT
   ========================================================= */

html[data-vg-theme="light"]
body.vg-public-body main img {
    image-rendering:
        auto;
}


html[data-vg-theme="light"]
body.vg-public-body main
article img {
    transition:
        transform .45s cubic-bezier(.2,.8,.2,1),
        filter .35s ease;
}


html[data-vg-theme="light"]
body.vg-public-body main
article:hover img {
    transform:
        scale(1.025);

    filter:
        saturate(1.04) contrast(1.015);
}


/* =========================================================
   PREMIUM SECTION SPACING
   ========================================================= */

html[data-vg-theme="light"]
body.vg-public-body main section {
    scroll-margin-top:
        100px;
}


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

@media (max-width: 767px) {

    html[data-vg-theme="light"]
    body.vg-public-body main
    [class*="rounded-[2rem]"] {
        border-radius:
            1.35rem !important;
    }


    html[data-vg-theme="light"]
    body.vg-public-body main h1 {
        letter-spacing:
            -.025em !important;
    }


    html[data-vg-theme="light"]
    body.vg-public-body main article:hover,

    html[data-vg-theme="light"]
    body.vg-public-body main .catalog-product-card:hover,

    html[data-vg-theme="light"]
    body.vg-public-body main .portfolio-card:hover,

    html[data-vg-theme="light"]
    body.vg-public-body main .solution-card:hover,

    html[data-vg-theme="light"]
    body.vg-public-body main .contact-card:hover {
        transform:
            none;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    html[data-vg-theme="light"]
    body.vg-public-body * {
        scroll-behavior:
            auto !important;

        transition-duration:
            .01ms !important;
    }
}

/* VG_PREMIUM_LIGHT_V5_END */