/* Luxury white, blue, and gold visual system */
:root {
    --luxury-white: #fbfdff;
    --pearl: #f4f8fc;
    --soft-blue: #eaf2ff;
    --navy: #071b34;
    --royal-blue: #123f7a;
    --steel-blue: #2f6fb4;
    --gold: #d6a84f;
    --light-gold: #f5d88b;
    --deep-gold: #9f6f21;
    --ink: #07111f;
    --muted: #65758b;
    --line: rgba(15, 47, 86, 0.12);
    --luxury-shadow: 0 22px 60px rgba(7, 27, 52, 0.12);
    --gold-shadow: 0 16px 34px rgba(214, 168, 79, 0.22);
}

html {
    background: var(--navy);
}

body {
    background:
        radial-gradient(circle at 14% 8%, rgba(245, 216, 139, 0.18), transparent 28%),
        radial-gradient(circle at 86% 16%, rgba(47, 111, 180, 0.34), transparent 32%),
        linear-gradient(180deg, #06162c 0%, #071b34 42%, #0a2344 100%) !important;
    color: var(--ink) !important;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(245, 216, 139, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(245, 216, 139, 0.045) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), transparent 72%);
}

::selection {
    background: rgba(214, 168, 79, 0.35);
    color: var(--navy);
}

/* Tailwind color overrides used by the page */
.bg-lightGray {
    background-color: rgba(7, 27, 52, 0.94) !important;
}

.bg-white {
    background-color: rgba(255, 255, 255, 0.94) !important;
}

.bg-tealGreen,
.hover\:bg-teal-600:hover {
    background: linear-gradient(135deg, var(--navy), var(--royal-blue)) !important;
}

.bg-orangeCustom,
.hover\:bg-orange-600:hover {
    background: linear-gradient(135deg, var(--gold), var(--deep-gold)) !important;
}

.text-tealGreen,
.hover\:text-tealGreen:hover,
.group:hover .group-hover\:text-tealGreen {
    color: var(--royal-blue) !important;
}

.text-orangeCustom,
.group:hover .group-hover\:text-orangeCustom {
    color: var(--gold) !important;
}

.text-darkCharcoal {
    color: var(--ink) !important;
}

.bg-tealGreen\/10 {
    background-color: rgba(18, 63, 122, 0.08) !important;
}

.bg-orangeCustom\/10 {
    background-color: rgba(214, 168, 79, 0.13) !important;
}

.bg-orangeCustom\/20 {
    background-color: rgba(214, 168, 79, 0.24) !important;
}

.bg-tealGreen\/30 {
    background-color: rgba(18, 63, 122, 0.32) !important;
}

.border-tealGreen {
    border-color: rgba(18, 63, 122, 0.5) !important;
}

.border-orangeCustom,
.border-orangeCustom\/20 {
    border-color: rgba(214, 168, 79, 0.42) !important;
}

.shadow-tealGreen\/20,
.hover\:shadow-teal-600\/30:hover,
.shadow-orangeCustom\/20 {
    box-shadow: var(--gold-shadow) !important;
}

/* Navigation */
#navbar {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.96), rgba(244, 248, 252, 0.9)) !important;
    border-bottom: 1px solid rgba(214, 168, 79, 0.22);
    box-shadow: 0 10px 34px rgba(7, 27, 52, 0.08) !important;
}

#navbar img,
footer img {
    filter: drop-shadow(0 8px 16px rgba(7, 27, 52, 0.16));
}

.nav-link {
    position: relative;
    padding-bottom: 6px;
}

.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--gold), var(--light-gold));
    border-radius: 999px;
    transition: width 0.28s ease;
}

.nav-link:hover::after,
.nav-link.text-tealGreen::after {
    width: 100%;
}

#mobile-menu {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 248, 252, 0.98)) !important;
    border-left: 1px solid rgba(214, 168, 79, 0.22);
}

/* Hero */
#beranda {
    background:
        linear-gradient(120deg, rgba(7, 27, 52, 0.96) 0%, rgba(18, 63, 122, 0.9) 52%, rgba(214, 168, 79, 0.38) 100%),
        url("source/background.webp") center / cover no-repeat !important;
}

#beranda::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 34%;
    background: linear-gradient(to top, rgba(7, 27, 52, 0.72), transparent);
    pointer-events: none;
}

#beranda .bg-\[radial-gradient\(\#4f4f4f_1px\,transparent_1px\)\] {
    opacity: 0.12 !important;
    background-image: radial-gradient(rgba(245, 216, 139, 0.55) 1px, transparent 1px) !important;
}

#beranda h1 span {
    background-image: linear-gradient(90deg, #ffffff, var(--light-gold), var(--gold)) !important;
}

#beranda p {
    color: rgba(255, 255, 255, 0.82) !important;
}

#beranda h3,
.portfolio-item h3 {
    color: #ffffff !important;
}

#beranda .inline-block {
    color: var(--light-gold) !important;
    border-color: rgba(245, 216, 139, 0.5) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

#beranda a,
nav a[href="#info-kontak"].bg-orangeCustom,
#mobile-menu a.bg-tealGreen {
    box-shadow: var(--gold-shadow);
}

#beranda a[href="#bidang-pekerjaan"] {
    background: linear-gradient(135deg, var(--gold), var(--deep-gold)) !important;
}

#beranda a[href="#info-kontak"] {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(245, 216, 139, 0.55) !important;
}

#beranda a[href="#info-kontak"]:hover {
    background: rgba(255, 255, 255, 0.16) !important;
}

#beranda .rounded-3xl {
    border: 1px solid rgba(245, 216, 139, 0.35);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(255, 255, 255, 0.08) inset !important;
}

.glass-effect {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(245, 216, 139, 0.28) !important;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    position: relative;
}

.glass-effect::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: radial-gradient(560px circle at 20% 10%, rgba(245, 216, 139, 0.24), transparent 44%);
    pointer-events: none;
}

/* Sections and cards */
section {
    position: relative;
}

section.bg-white,
#tentang-kami,
#info-kontak {
    background:
        linear-gradient(135deg, rgba(7, 27, 52, 0.96), rgba(12, 39, 73, 0.96) 58%, rgba(18, 63, 122, 0.92)) !important;
}

#visi-misi,
#ruang-lingkup,
#pola-kerja-sama,
#legalitas {
    background:
        linear-gradient(135deg, rgba(6, 22, 44, 0.98), rgba(7, 27, 52, 0.96) 46%, rgba(15, 47, 86, 0.94)) !important;
}

#bidang-pekerjaan,
#benefit,
#working-experience,
#info-kontak {
    background:
        linear-gradient(135deg, rgba(7, 27, 52, 0.96), rgba(12, 39, 73, 0.96) 58%, rgba(18, 63, 122, 0.92)) !important;
}

section h2 {
    color: #ffffff;
    letter-spacing: 0;
}

section h3,
section h4 {
    color: var(--navy);
}

section p,
section li {
    color: var(--muted);
}

section > .container > .text-center p {
    color: rgba(255, 255, 255, 0.72) !important;
}

#tentang-kami > .container > .grid.lg\:grid-cols-2 h3,
#tentang-kami > .container > .grid.lg\:grid-cols-12 h3,
#legalitas .lg\:col-span-7 > h3,
#kontak .lg\:col-span-5 h3,
#info-kontak .lg\:col-span-5 h3 {
    color: #ffffff !important;
}

#tentang-kami > .container > .grid.lg\:grid-cols-2 p,
#tentang-kami > .container > .grid.lg\:grid-cols-12 p,
#legalitas .lg\:col-span-7 > p,
#kontak .lg\:col-span-5 p,
#kontak .lg\:col-span-5 a,
#info-kontak .lg\:col-span-5 p,
#info-kontak .lg\:col-span-5 a {
    color: rgba(255, 255, 255, 0.76) !important;
}

#kontak .lg\:col-span-5 h4,
#info-kontak .lg\:col-span-5 h4 {
    color: var(--light-gold) !important;
}

#tentang-kami .grid.grid-cols-2.gap-4 > div {
    background: rgba(255, 255, 255, 0.94) !important;
    border-color: rgba(214, 168, 79, 0.48) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12);
}

section .text-center > span {
    border: 1px solid rgba(214, 168, 79, 0.32);
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--light-gold) !important;
    box-shadow: 0 10px 26px rgba(7, 27, 52, 0.06);
}

section .w-16.h-1,
#beranda .w-12.h-1 {
    background: linear-gradient(90deg, var(--royal-blue), var(--gold), var(--light-gold)) !important;
}

.product-card,
.service-card,
.scope-card,
.benefit-card,
.process-card,
.experience-card,
#tentang-kami .grid.md\:grid-cols-2 > div,
#legalitas .grid.sm\:grid-cols-2 > div,
#kontak .lg\:col-span-7,
#info-kontak .lg\:col-span-7,
#legalitas .relative.bg-white {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.94)) !important;
    border: 1px solid var(--line) !important;
    box-shadow: var(--luxury-shadow) !important;
}

.product-card {
    border-radius: 18px !important;
}

.product-card:hover,
.service-card:hover,
.scope-card:hover,
.benefit-card:hover,
.process-card:hover,
.experience-card:hover,
.portfolio-item:hover,
#legalitas .grid.sm\:grid-cols-2 > div:hover {
    transform: translateY(-8px);
    border-color: rgba(214, 168, 79, 0.44) !important;
    box-shadow: 0 28px 70px rgba(7, 27, 52, 0.16) !important;
}

.product-card .h-48 {
    background:
        linear-gradient(135deg, rgba(7, 27, 52, 0.12), rgba(214, 168, 79, 0.16)),
        var(--soft-blue) !important;
}

.product-card .h-48::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(7, 27, 52, 0.34), transparent 58%);
    pointer-events: none;
}

.product-card .absolute.-top-6 {
    border: 1px solid rgba(214, 168, 79, 0.34);
    color: var(--royal-blue) !important;
    box-shadow: 0 12px 28px rgba(7, 27, 52, 0.12) !important;
}

.product-card:hover .absolute.-top-6 {
    background: linear-gradient(135deg, var(--gold), var(--deep-gold)) !important;
    color: white !important;
}

#tentang-kami .bg-gradient-to-br {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(234, 242, 255, 0.82)),
        linear-gradient(135deg, var(--soft-blue), rgba(214, 168, 79, 0.14)) !important;
    border: 1px solid rgba(214, 168, 79, 0.25) !important;
    box-shadow: var(--luxury-shadow);
}

/* Portfolio sector overlays */
.portfolio-item {
    border: 1px solid rgba(245, 216, 139, 0.2);
    box-shadow: 0 20px 52px rgba(7, 27, 52, 0.14) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.portfolio-item > div.absolute.inset-0 {
    background: linear-gradient(135deg, rgba(7, 27, 52, 0.82), rgba(18, 63, 122, 0.7), rgba(214, 168, 79, 0.42)) !important;
    opacity: 0.78 !important;
}

.portfolio-item:hover > div.absolute.inset-0 {
    opacity: 0.9 !important;
}

.portfolio-item span {
    color: var(--light-gold) !important;
}

/* Legal and contact */
#legalitas .absolute.-inset-2 {
    background: linear-gradient(135deg, var(--royal-blue), var(--gold)) !important;
    opacity: 0.38 !important;
}

#legalitas .w-8.h-8 {
    background: rgba(214, 168, 79, 0.14) !important;
    color: var(--deep-gold) !important;
}

#kontak .w-10.h-10,
#info-kontak .w-10.h-10 {
    background: rgba(18, 63, 122, 0.08) !important;
    color: var(--royal-blue) !important;
    border: 1px solid rgba(214, 168, 79, 0.24);
}

iframe {
    filter: saturate(0.9) contrast(1.04);
}

/* Footer and floating controls */
footer {
    background:
        linear-gradient(135deg, #041022 0%, #06162c 52%, #071b34 100%) !important;
    border-top: 1px solid rgba(245, 216, 139, 0.25) !important;
}

footer h4,
footer .text-white {
    color: #ffffff !important;
}

footer a:hover,
footer i {
    color: var(--light-gold) !important;
}

footer .border-gray-800 {
    border-color: rgba(245, 216, 139, 0.16) !important;
}

#back-to-top {
    background: linear-gradient(135deg, var(--navy), var(--royal-blue)) !important;
    border: 1px solid rgba(245, 216, 139, 0.32);
}

a[href^="https://wa.me"] {
    box-shadow: 0 18px 40px rgba(7, 27, 52, 0.22) !important;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--pearl);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--gold), var(--deep-gold));
    border: 2px solid var(--pearl);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--light-gold), var(--gold));
}

.active-nav {
    color: var(--royal-blue) !important;
    font-weight: 700;
}

@media (max-width: 768px) {
    #beranda {
        background:
            linear-gradient(130deg, rgba(7, 27, 52, 0.97), rgba(18, 63, 122, 0.88), rgba(214, 168, 79, 0.28)),
            url("source/background.webp") center / cover no-repeat !important;
    }

    .product-card:hover,
    .portfolio-item:hover,
    #legalitas .grid.sm\:grid-cols-2 > div:hover {
        transform: none;
    }
}