/* assets/css/tailwind.css */

/* Transition smooth untuk background body saat berganti mode */
body {
    transition: background-color 0.5s ease, color 0.5s ease;
}

/* --- LOGIKA DUAL-MODE VISIBILITY --- */
.content-construction, .logo-construction, .nav-construction { display: none !important; }
.content-valet, .logo-valet, .nav-valet { display: none !important; }

/* Mode Konstruksi */
body.mode-construction {
    background-color: #0B132B !important; /* Oxford Deep Navy */
    color: #F1F5F9 !important; /* Light Slate Text */
}
body.mode-construction .content-construction { display: block !important; }
body.mode-construction .content-construction.flex, body.mode-construction .content-construction-flex { display: flex !important; }
body.mode-construction .content-construction.grid, body.mode-construction .content-construction-grid { display: grid !important; }
body.mode-construction .logo-construction { display: block !important; color: #38BDF8 !important; }
body.mode-construction .nav-construction { display: flex !important; }

/* Header & Nav overrides for Construction mode */
body.mode-construction header {
    background-color: #0B132B !important;
    border-color: #3A506B !important;
}
body.mode-construction #mobile-menu {
    background-color: #0B132B !important;
    border-color: #3A506B !important;
}
body.mode-construction #mode-toggle-btn {
    background-color: #1C2541 !important;
    border-color: #3A506B !important;
}
body.mode-construction #mobile-menu-btn {
    border-color: #3A506B !important;
    color: #38BDF8 !important;
}

/* Custom overrides for Construction mode elements to achieve Navy & Cyan brutalist theme */
body.mode-construction .bg-white,
body.mode-construction .bg-gray-50,
body.mode-construction .bg-construction-bg {
    background-color: #1C2541 !important; /* Midnight Navy Slate */
    color: #F1F5F9 !important;
}
body.mode-construction tr.hover\:bg-gray-50:hover,
body.mode-construction tr:hover {
    background-color: #3A506B !important; /* Steel Blue hover highlight */
}
body.mode-construction .text-primary {
    color: #F1F5F9 !important;
}
body.mode-construction .text-on-surface-variant {
    color: #94A3B8 !important; /* Muted Slate */
}
body.mode-construction .text-construction-text {
    color: #F1F5F9 !important; /* Fixed unreadable paragraph in tentang.php */
}
body.mode-construction .text-construction-accent {
    color: #38BDF8 !important; /* Fixed low-contrast highlights in dark mode */
}
body.mode-construction .nav-construction a {
    color: #94A3B8 !important;
}
body.mode-construction .nav-construction a:hover {
    color: #38BDF8 !important;
}
body.mode-construction .brutalist-border {
    border-color: #3A506B !important;
}
body.mode-construction .border-primary {
    border-color: #3A506B !important;
}
body.mode-construction .border-b-2 {
    border-color: #3A506B !important;
}

/* Global text fallback to ensure readability in Construction dark mode */
body.mode-construction p,
body.mode-construction span:not(.no-override),
body.mode-construction a,
body.mode-construction a:visited,
body.mode-construction li,
body.mode-construction td,
body.mode-construction th,
body.mode-construction h1,
body.mode-construction h2,
body.mode-construction h3,
body.mode-construction h4 {
    color: #F1F5F9 !important;
}

/* Keep text dark inside white zebra cards */
body.mode-construction .misi-box,
body.mode-construction .misi-box *,
body.mode-construction .bento-stat-card:nth-child(1),
body.mode-construction .bento-stat-card:nth-child(1) *,
body.mode-construction .bento-stat-card:nth-child(4),
body.mode-construction .bento-stat-card:nth-child(4) *,
body.mode-construction .grid-cols-1.sm\:grid-cols-3 > div:nth-child(2),
body.mode-construction .grid-cols-1.sm\:grid-cols-3 > div:nth-child(2) * {
    color: #18181B !important;
}

/* White background variant overrides for visual variety (Zebra/Chess layout) */
body.mode-construction .bento-stat-card:nth-child(1),
body.mode-construction .bento-stat-card:nth-child(4) {
    background-color: #F8F9FA !important; /* Putih Cerah */
    border-color: #18181B !important;
}

/* Visi & Misi bento split (Visi=Navy, Misi=White) */
body.mode-construction section.grid.bg-white {
    background-color: #1C2541 !important; /* Base split container to Navy */
    border-color: #3A506B !important;
}
body.mode-construction .visi-box {
    background-color: #1C2541 !important; /* Solid Navy */
    border-color: #3A506B !important;
}
body.mode-construction .visi-box span.material-symbols-outlined {
    color: #38BDF8 !important; /* Cyan active color for vision icon */
}
body.mode-construction .misi-box {
    background-color: #F8F9FA !important; /* White contrast bg */
    border-color: #3A506B !important;
}
body.mode-construction .misi-box span.material-symbols-outlined {
    color: #38BDF8 !important; /* Maintain Cyan for icon */
}
body.mode-construction .misi-box .bg-white {
    background-color: #FFFFFF !important; /* Sub-box in mission list (White solid) */
    border-color: #18181B !important;
}

/* 3 Pillars Card split (Card 2 / Safety Protocol = White) */
body.mode-construction .grid-cols-1.sm\:grid-cols-3 > div:nth-child(2) {
    background-color: #F8F9FA !important;
    border-color: #18181B !important;
}

/* Project images white brutalist frames in layanan.php - stretching to fill height */
body.mode-construction div.bg-white:has(img),
body.mode-construction div.bg-white:has(picture) {
    background-color: #1C2541 !important; /* Dark frame color */
    border-color: #3A506B !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}
body.mode-construction div.bg-white img,
body.mode-construction div.bg-white picture img {
    height: 100% !important;
    object-fit: cover !important;
    flex-grow: 1 !important;
}

/* Timeline workflow Step 2 & 3 = White nodes */
body.mode-construction .timeline-node:nth-child(2) > div.bg-white,
body.mode-construction .timeline-node:nth-child(3) > div.bg-white {
    background-color: #F8F9FA !important;
    color: #18181B !important;
    border-color: #18181B !important;
}
body.mode-construction .border-r-2 {
    border-color: #3A506B !important;
}
body.mode-construction .border-x-2 {
    border-color: #3A506B !important;
}
body.mode-construction .border-t-2 {
    border-color: #3A506B !important;
}
body.mode-construction .hover\:bg-construction-accent:hover {
    background-color: #38BDF8 !important; /* Electric Cyan hover */
    color: #0B132B !important;
}
body.mode-construction .hover\:bg-construction-accent:hover *,
body.mode-construction .hover\:bg-construction-accent:hover span,
body.mode-construction .hover\:bg-construction-accent:hover p,
body.mode-construction .hover\:bg-construction-accent:hover a {
    color: #0B132B !important;
}
body.mode-construction a.bg-primary,
body.mode-construction button.bg-primary,
body.mode-construction button[type="submit"] {
    background-color: #38BDF8 !important; /* Cyan button bg */
    color: #0B132B !important;
    border-color: #38BDF8 !important;
}
body.mode-construction a.bg-primary:hover,
body.mode-construction button.bg-primary:hover,
body.mode-construction button[type="submit"]:hover {
    background-color: #0EA5E9 !important;
    color: #FFFFFF !important;
    border-color: #0EA5E9 !important;
}
body.mode-construction .bg-primary {
    background-color: #3A506B !important; /* Section grid lines (Steel Blue) */
}
body.mode-construction .btn-valet-premium {
    color: #38BDF8 !important;
    border-color: #3A506B !important;
}
body.mode-construction .btn-valet-premium:hover {
    background-color: rgba(58, 80, 107, 0.3) !important;
    border-color: #38BDF8 !important;
}
body.mode-construction .bg-construction-accent {
    background-color: #223A5E !important; /* Royal Navy Slate (Solid) */
    border: 2px solid #38BDF8 !important;
}
body.mode-construction .bg-construction-accent * {
    color: #38BDF8 !important;
}
body.mode-construction .bg-black {
    background-color: #080C1A !important; /* Extra dark area */
}
body.mode-construction thead tr {
    background-color: #3A506B !important;
    color: #FFFFFF !important;
}
body.mode-construction thead tr th {
    border-color: #1C2541 !important;
}
body.mode-construction tbody tr {
    border-color: #3A506B !important;
}
body.mode-construction tbody tr:hover {
    background-color: rgba(58, 80, 107, 0.1) !important;
}
body.mode-construction aside nav a {
    border-color: #3A506B !important;
}
body.mode-construction aside nav a:hover {
    background-color: rgba(58, 80, 107, 0.2) !important;
}
body.mode-construction aside nav a span {
    color: #38BDF8 !important;
}
body.mode-construction input, 
body.mode-construction textarea, 
body.mode-construction select {
    background-color: #0B132B !important;
    border-color: #3A506B !important;
    color: #F1F5F9 !important;
}
body.mode-construction input::placeholder, 
body.mode-construction textarea::placeholder {
    color: #64748B !important;
}
body.mode-construction .text-outline {
    color: #94A3B8 !important;
}
body.mode-construction .material-symbols-outlined {
    color: #38BDF8 !important;
}
body.mode-construction .toggle-icon {
    color: #FFFFFF !important;
}
body.mode-construction .timeline-line {
    background-color: #3A506B !important;
}
body.mode-construction .timeline-node > div {
    border-color: #38BDF8 !important;
    color: #38BDF8 !important;
}
body.mode-construction .timeline-node > div.bg-primary {
    background-color: #38BDF8 !important;
    color: #0B132B !important;
}
body.mode-construction .timeline-node > div.bg-white {
    background-color: #1C2541 !important;
    color: #F1F5F9 !important;
}

/* Mode Valet */
body.mode-valet {
    background-color: #FAF6EB !important;
    color: #1E1B13 !important;
}
body.mode-valet .content-valet { display: block !important; }
body.mode-valet .content-valet.flex, body.mode-valet .content-valet-flex { display: flex !important; }
body.mode-valet .content-valet.grid, body.mode-valet .content-valet-grid { display: grid !important; }
body.mode-valet .logo-valet { display: block !important; }
body.mode-valet .nav-valet { display: flex !important; }

/* Valet Mode Global Overrides */
body.mode-valet header {
    background-color: rgba(250, 246, 235, 0.95) !important;
    border-color: rgba(212, 165, 23, 0.2) !important;
    box-shadow: 0 4px 30px rgba(30, 27, 19, 0.03) !important;
}
body.mode-valet #mobile-menu {
    background-color: #FAF6EB !important;
    border-color: rgba(212, 165, 23, 0.2) !important;
}
body.mode-valet #mode-toggle-btn {
    background-color: #F3ECE0 !important;
    border-color: rgba(212, 165, 23, 0.4) !important;
}
body.mode-valet #mobile-menu-btn {
    border-color: rgba(212, 165, 23, 0.3) !important;
    color: #1E1B13 !important;
}
body.mode-valet .nav-valet a {
    color: #1E1B13 !important;
}
body.mode-valet .nav-valet a:hover {
    color: #D4A517 !important;
}
body.mode-valet .btn-valet-premium:not(.bg-valet-gold) {
    color: #D4A517 !important;
    border-color: rgba(212, 165, 23, 0.4) !important;
}
body.mode-valet .btn-valet-premium.bg-valet-gold {
    color: #FAF6EB !important; /* light text on dark gold button */
    background-color: #D4A517 !important;
    border-color: #D4A517 !important;
}
body.mode-valet .btn-valet-premium::before {
    background: linear-gradient(90deg, transparent, rgba(212, 165, 23, 0.2), transparent);
}
body.mode-valet .btn-valet-premium:not(.bg-valet-gold):hover {
    background-color: rgba(212, 165, 23, 0.08) !important;
    border-color: #D4A517 !important;
    box-shadow: 0 0 20px rgba(212, 165, 23, 0.2);
}
body.mode-valet .btn-valet-premium.bg-valet-gold:hover {
    background-color: #F5C842 !important; /* valet-gold-light */
    color: #1E1B13 !important; /* dark text on hover */
    border-color: #F5C842 !important;
    box-shadow: 0 0 20px rgba(212, 165, 23, 0.4);
}
body.mode-valet .glass-card-valet {
    background: rgba(243, 236, 224, 0.65) !important;
    border: 1px solid rgba(212, 165, 23, 0.18) !important;
    box-shadow: 0 10px 30px rgba(30, 27, 19, 0.05) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}
body.mode-valet .glass-card-valet:hover {
    background: rgba(243, 236, 224, 0.85) !important;
    border-color: rgba(212, 165, 23, 0.4) !important;
    box-shadow: 0 20px 40px rgba(30, 27, 19, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
    transform: translateY(-2px);
}
body.mode-valet input,
body.mode-valet textarea,
body.mode-valet select {
    background-color: #FFFFFF !important;
    border-color: rgba(212, 165, 23, 0.25) !important;
    color: #1E1B13 !important;
}
body.mode-valet input::placeholder,
body.mode-valet textarea::placeholder {
    color: rgba(30, 27, 19, 0.4) !important;
}
body.mode-valet input:focus,
body.mode-valet textarea:focus,
body.mode-valet select:focus {
    border-color: #D4A517 !important;
    box-shadow: 0 0 0 1px rgba(212, 165, 23, 0.2) !important;
}
body.mode-valet .scheme-card.active {
    border-color: #D4A517 !important;
    background-color: rgba(212, 165, 23, 0.12) !important;
}
body.mode-valet .scheme-card:hover {
    background-color: rgba(212, 165, 23, 0.04) !important;
}
body.mode-valet .material-symbols-outlined {
    color: #D4A517 !important;
}
body.mode-valet .toggle-icon {
    color: #FAF6EB !important; /* matches dot in valet mode */
}
body.mode-valet .text-valet-gold,
body.mode-valet .text-gradient-gold {
    color: #D4A517 !important;
}
body.mode-valet .gold-line {
    background: linear-gradient(to bottom, #D4A517, transparent);
}
body.mode-valet::-webkit-scrollbar-track,
body.mode-valet ::-webkit-scrollbar-track {
    background: #FAF6EB;
}
body.mode-valet::-webkit-scrollbar-thumb,
body.mode-valet ::-webkit-scrollbar-thumb {
    background: #D4A517;
    border-radius: 4px;
}
body.mode-valet::-webkit-scrollbar-thumb:hover,
body.mode-valet ::-webkit-scrollbar-thumb:hover {
    background: #F5C842;
}

/* Accessibility overrides for Light Valet mode */
body.mode-valet .text-white {
    color: #1E1B13 !important;
}
body.mode-valet .text-white\/95 {
    color: rgba(30, 27, 19, 0.95) !important;
}
body.mode-valet .text-white\/90 {
    color: rgba(30, 27, 19, 0.9) !important;
}
body.mode-valet .text-white\/80 {
    color: rgba(30, 27, 19, 0.8) !important;
}
body.mode-valet .text-white\/75 {
    color: rgba(30, 27, 19, 0.75) !important;
}
body.mode-valet .text-white\/70 {
    color: rgba(30, 27, 19, 0.7) !important;
}
body.mode-valet .text-white\/60 {
    color: rgba(30, 27, 19, 0.6) !important;
}
body.mode-valet .text-white\/50 {
    color: rgba(30, 27, 19, 0.5) !important;
}
body.mode-valet .text-white\/40 {
    color: rgba(30, 27, 19, 0.4) !important;
}
body.mode-valet .text-white\/30 {
    color: rgba(30, 27, 19, 0.3) !important;
}
body.mode-valet .text-white\/20 {
    color: rgba(30, 27, 19, 0.2) !important;
}
body.mode-valet .text-white\/10 {
    color: rgba(30, 27, 19, 0.1) !important;
}
body.mode-valet .text-valet-text {
    color: #1E1B13 !important;
}

/* --- UTILITY & CUSTOM BRAND STYLES --- */

/* Brutalist style (Konstruksi) */
.brutalist-border {
    border: 2px solid #18181B;
    border-radius: 0px;
}

/* Luxury style (Valet) */
.text-gradient-gold {
    background: linear-gradient(135deg, #F5C842 0%, #D4A517 40%, #8B6B00 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.luxury-gradient {
    background: linear-gradient(135deg, rgba(212, 165, 23, 0.03) 0%, rgba(212, 165, 23, 0) 100%);
}
.gold-line {
    background: linear-gradient(to bottom, #D4A517, transparent);
}
.glass-card-valet {
    background: rgba(255, 248, 231, 0.02);
    border: 1px solid rgba(212, 165, 23, 0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.glass-card-valet:hover {
    background: rgba(255, 248, 231, 0.04);
    border-color: rgba(212, 165, 23, 0.25);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(212, 165, 23, 0.15);
    transform: translateY(-2px);
}
.btn-valet-premium {
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid rgba(212, 165, 23, 0.3);
}
.btn-valet-premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(212, 165, 23, 0.2), transparent);
    transition: all 0.6s ease;
}
.btn-valet-premium:hover::before {
    left: 100%;
}
.btn-valet-premium:hover {
    border-color: #D4A517;
    box-shadow: 0 0 20px rgba(212, 165, 23, 0.3);
}

/* Nav Link Hover effect */
.nav-link-valet {
    position: relative;
}
.nav-link-valet::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: -2px;
    left: 0;
    background-color: #D4A517;
    transition: width 0.3s ease;
}
.nav-link-valet:hover::after {
    width: 100%;
}

/* --- ANIMASI MARQUEE MITRA VALET --- */
@keyframes marquee {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-50%); }
}
.animate-marquee {
    display: flex;
    width: max-content;
    animation: marquee 110s linear infinite;
}
.animate-marquee:hover {
    animation-play-state: paused;
}

/* Accessibility overrides for Marquee in Light Valet mode */
body.mode-valet .animate-marquee span.text-white\/20 {
    color: rgba(30, 27, 19, 0.45) !important;
}
body.mode-valet .animate-marquee span.text-white\/20:hover {
    color: #D4A517 !important;
}

/* GSAP SPA Wrapper transition performance */
.page-main-wrapper {
    will-change: opacity, transform;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
body.mode-construction::-webkit-scrollbar-track,
body.mode-construction ::-webkit-scrollbar-track {
    background: #0B132B;
    border-left: 2px solid #3A506B;
}
body.mode-construction::-webkit-scrollbar-thumb,
body.mode-construction ::-webkit-scrollbar-thumb {
    background: #38BDF8;
    border-radius: 0;
}
body.mode-construction::-webkit-scrollbar-thumb:hover,
body.mode-construction ::-webkit-scrollbar-thumb:hover {
    background: #0EA5E9;
}