/* Global Styles */
:root {
    /* Dark Theme (Default) */
    --primary-color: #007FFF; /* Jeton Blue */
    --secondary-color: #1A1A1A; /* Jeton Dark Background */
    --text-color: #EAEAEA; /* Brighter for better readability on dark */
    --text-color-muted: #AAB8C2; /* Softer muted color */
    --text-color-headings: #FFFFFF; /* Pure White for headings */
    --background-color: #0D0D0D; /* Jeton Very Dark Background */
    --background-color-offset: #1C1C1E; /* Slightly lighter dark for elements */
    --border-color: rgba(255, 255, 255, 0.12); /* Slightly more visible border */
    --shadow-color: rgba(0, 0, 0, 0.35); /* Stronger shadow for dark theme elements */
    --header-bg: rgba(13, 13, 13, 0.88); /* Dark, slightly transparent */
    --header-bg-scrolled: rgba(13, 13, 13, 0.96);
    --header-border: rgba(255, 255, 255, 0.12);
    --header-border-scrolled: rgba(255, 255, 255, 0.18);
    --hamburger-bar-color: #EAEAEA;
    --scroll-indicator-color: #AAB8C2;

    /* Neutral/Shared Variables */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --border-radius: 10px;
    --transition-speed: 0.3s ease;
    --transition-speed-fast: 0.2s ease;

    /* Portfolio Section Colors (Using Theme Adaptive Colors) */
    --portfolio-bg: var(--background-color);
    --portfolio-text-color: var(--text-color);
    --portfolio-text-muted: var(--text-color-muted);
    --portfolio-card-bg: var(--background-color-offset);
    --portfolio-card-shadow: var(--shadow-color);
    --portfolio-card-shadow-hover: rgba(0, 127, 255, 0.2);
    --portfolio-image-container-bg: var(--background-color-offset);
    
    /* New variables for tunnel effect */
    --primary-color-rgb: 0, 127, 255; /* RGB values for primary color */

    /* Corridor effect variables */
    --corridor-wall-width: 200px;
    --corridor-shadow: rgba(0, 0, 0, 0.5);
    --tunnel-light: rgba(0, 127, 255, 0.15);
    --wall-content-bg: rgba(0, 0, 0, 0.3);
    --background-color-rgb: 13, 13, 13; /* Default dark background as RGB */
}

body.light-mode {
    /* Light Theme */
    --primary-color: #007FFF; /* Jeton Blue can stay same or be adjusted if needed */
    --secondary-color: #F4F6F8; /* Light gray background */
    --text-color: #212529; /* Darker text for better readability on light */
    --text-color-muted: #6C757D; /* Standard muted color */
    --text-color-headings: #000000; /* Pure Black for headings */
    --background-color: #FFFFFF; /* White background */
    --background-color-offset: #F8F9FA; /* Lighter gray for elements */
    --border-color: rgba(0, 0, 0, 0.15); /* Slightly more visible border */
    --shadow-color: rgba(0, 0, 0, 0.12); /* Softer shadow for light theme elements */
    --header-bg: rgba(255, 255, 255, 0.88); /* Light, slightly transparent */
    --header-bg-scrolled: rgba(255, 255, 255, 0.96);
    --header-border: rgba(0, 0, 0, 0.15);
    --header-border-scrolled: rgba(0, 0, 0, 0.18);
    --hamburger-bar-color: #212529;
    --scroll-indicator-color: #6C757D;
    --background-color-rgb: 255, 255, 255; /* Light background as RGB */
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family);
    line-height: 1.7;
    color: var(--text-color);
    background-color: var(--background-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color var(--transition-speed), color var(--transition-speed);
    overflow-x: hidden;
    cursor: none; /* Hide the default cursor */
}

main {
    position: relative;
    width: 100%;
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
}

.container {
    width: 90%;
    max-width: 1140px; /* Slightly wider, common for modern layouts */
    margin: 0 auto;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    margin-bottom: 0.75em;
    color: var(--text-color-headings);
}

p {
    margin-bottom: 1.2em;
    font-size: 1em;
    color: var(--text-color); /* Changed from text-color-muted for better default readability */
}

/* If some paragraphs need to be muted, apply a specific class or use text-color-muted directly */
.text-muted {
    color: var(--text-color-muted);
}

a {
    text-decoration: none;
    color: var(--primary-color);
    transition: color var(--transition-speed);
}

a:hover {
    /* Adjust hover color if needed, could be a darker/lighter shade of primary or a specific variable */
    filter: brightness(0.85);
}
body.light-mode a:hover {
    filter: brightness(0.75);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Header & Navbar */
header {
    background-color: var(--header-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--header-border);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: background-color var(--transition-speed), border-color var(--transition-speed);
}

header.header-scrolled {
    background-color: var(--header-bg-scrolled);
    border-bottom-color: var(--header-border-scrolled);
    /* box-shadow: 0 2px 5px var(--shadow-color); /* Optional: subtle shadow */
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 75px; /* Slightly taller header */
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.nav-logo {
    font-size: 1.6em;
    font-weight: 700;
    color: var(--text-color); /* Logo text color */
}

.nav-menu {
    display: flex;
    list-style: none;
    align-items: center;
}

.nav-item {
    margin-left: 30px; /* Increased spacing */
}

.nav-link {
    font-size: 1em;
    font-weight: 500;
    color: var(--text-color-muted);
    padding: 8px 4px;
    position: relative;
    transition: color var(--transition-speed), opacity 0.3s ease;
    opacity: 0.85;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2.5px;
    background-color: var(--primary-color);
    transition: width 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.nav-link:hover,
.nav-link.active {
    color: var(--text-color-headings);
    opacity: 1;
}

.nav-link.active::after {
    width: 100%;
}

.nav-link:hover:not(.active)::after {
    width: 70%;
}

/* Hero Section */
.hero-section {
    min-height: 100vh;
    display: flex;
    flex-direction: column; 
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 100px 0 60px 0; 
    position: relative; 
    overflow: hidden; /* Ensure images don't spill out */
    background: transparent; /* Use the global gradient background instead */
}

@keyframes animateGradientBackground {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.hero-background-slideshow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Deepest background */
    pointer-events: none; 
}

@keyframes flyAround {
    0% { transform: translate(0px, 0px) rotate(var(--current-rotate)) scale(var(--current-scale)); }
    25% { transform: translate(var(--fly-x-25, 20px), var(--fly-y-25, 30px)) rotate(calc(var(--current-rotate) + 5deg)) scale(var(--current-scale)); }
    50% { transform: translate(var(--fly-x-50, -10px), var(--fly-y-50, 15px)) rotate(calc(var(--current-rotate) - 3deg)) scale(var(--current-scale)); }
    75% { transform: translate(var(--fly-x-75, 15px), var(--fly-y-75, -20px)) rotate(calc(var(--current-rotate) + 3deg)) scale(var(--current-scale)); }
    100% { transform: translate(0px, 0px) rotate(var(--current-rotate)) scale(var(--current-scale)); }
}

.hero-slide-image {
    position: absolute;
    width: auto;
    max-width: 180px;
    max-height: 180px;
    height: auto;
    object-fit: contain;
    opacity: 0.6;
    transition: opacity 0.3s ease-out, transform 0.3s ease-out, box-shadow 0.3s ease-out;
    animation-name: flyAround;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    pointer-events: auto;
    cursor: pointer;
    border-radius: calc(var(--border-radius) / 2);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    --current-rotate: 0deg;
    --current-scale: 0.6;
    --fly-x-25: 20px;
    --fly-y-25: 30px;
    --fly-x-50: -10px;
    --fly-y-50: 15px;
    --fly-x-75: 15px;
    --fly-y-75: -20px;
    z-index: 0;
}

.hero-slide-image:hover {
    opacity: 1;
    transform: scale(calc(var(--current-scale) + 0.2)) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
    z-index: 2;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

.hero-section .container {
    position: relative;
    z-index: 5;
}

.hero-section .container h1 {
    font-size: clamp(2.8em, 6vw, 5em);
    font-weight: 700;
    margin-bottom: 0.35em;
    color: var(--text-color-headings);
    line-height: 1.15;
}

.hero-section .container p {
    font-size: clamp(1.05em, 2.8vw, 1.35em);
    margin-bottom: 2.2em;
    color: var(--text-color-muted);
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.75;
}

.hero-section .cta-button {
    display: inline-block;
    background-color: var(--primary-color);
    color: #FFFFFF;
    padding: 15px 40px;
    border-radius: var(--border-radius);
    font-weight: 600;
    font-size: 1.1em;
    transition: background-color var(--transition-speed), transform 0.25s ease-out, box-shadow 0.25s ease-out;
    box-shadow: 0 5px 15px rgba(0, 127, 255, 0.25);
    text-transform: none;
}

.hero-section .cta-button:hover {
    background-color: #006AD4;
    color: #FFFFFF;
    transform: translateY(-4px) scale(1.04);
    box-shadow: 0 9px 22px rgba(0, 127, 255, 0.35);
}

.scroll-indicator {
    position: absolute;
    bottom: 35px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--scroll-indicator-color);
    font-size: 0.9em;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: fadeInUp 0.8s ease-out 1.2s both, bouncePulse 2.5s infinite 2s;
}

.scroll-indicator span {
    margin-bottom: 5px;
}

.scroll-indicator .arrow {
    width: 1.5px;
    height: 22px;
    background-color: var(--scroll-indicator-color);
    position: relative;
}

.scroll-indicator .arrow::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    border-bottom: 1.5px solid var(--scroll-indicator-color);
    border-right: 1.5px solid var(--scroll-indicator-color);
}

@keyframes bouncePulse {
    0%, 100% {
        transform: translateY(0) translateX(-50%) scale(1);
        opacity: 0.7;
    }
    50% {
        transform: translateY(-10px) translateX(-50%) scale(1.1);
        opacity: 1;
    }
}

/* Tunnel effect - Enhanced section styling */
section {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 100vh;
    padding: 80px 0 40px;
    overflow: visible;
    z-index: 1;
    border: none;
    margin: 0;
}

/* Tunnel corridor effect states */
.section-current {
    transform: translateZ(0) scale(1);
    opacity: 1;
    z-index: 10;
    pointer-events: auto;
}

.section-hidden {
    transform: translateZ(-1000px) scale(0.7);
    opacity: 0;
    z-index: 1;
    pointer-events: none;
}

.section-behind {
    transform: translateZ(-2000px) scale(0.5);
    opacity: 0;
    z-index: 0;
    pointer-events: none;
}

.section-ahead {
    transform: translateZ(1000px) scale(0.7);
    opacity: 0;
    z-index: 0;
    pointer-events: none;
}

/* Transition animations for tunnel effect */
.section-entering {
    transform: translateZ(1000px) scale(0.7);
    opacity: 0;
    animation: enterTunnel 0.75s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

.section-exiting {
    transform: translateZ(0) scale(1);
    opacity: 1;
    animation: exitTunnel 0.75s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

.section-entering-reverse {
    transform: translateZ(-1000px) scale(0.7);
    opacity: 0;
    animation: enterTunnelReverse 0.75s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

.section-exiting-reverse {
    transform: translateZ(0) scale(1);
    opacity: 1;
    animation: exitTunnelReverse 0.75s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

/* Tunnel animation keyframes */
@keyframes enterTunnel {
    from { 
        transform: translateZ(1000px) scale(0.7); 
        opacity: 0; 
    }
    to { 
        transform: translateZ(0) scale(1); 
        opacity: 1; 
    }
}

@keyframes exitTunnel {
    from { 
        transform: translateZ(0) scale(1); 
        opacity: 1; 
    }
    to { 
        transform: translateZ(-1000px) scale(0.7); 
        opacity: 0; 
    }
}

@keyframes enterTunnelReverse {
    from { 
        transform: translateZ(-1000px) scale(0.7); 
        opacity: 0; 
    }
    to { 
        transform: translateZ(0) scale(1); 
        opacity: 1; 
    }
}

@keyframes exitTunnelReverse {
    from { 
        transform: translateZ(0) scale(1); 
        opacity: 1; 
    }
    to { 
        transform: translateZ(1000px) scale(0.7); 
        opacity: 0; 
    }
}

/* Enhanced tunnel perspective */
main {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
    perspective: 2000px; /* Increased perspective for deeper tunnel effect */
    transform-style: preserve-3d;
}

/* Add tunnel indicators on the sides */
section::before,
section::after {
    display: none;
}

/* Let's add a shadow to enhance the 3D effect */
.section-current::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    z-index: -1;
}

/* Remove/override any conflicting styles */
.section-hidden-far,
.section-hidden-prev,
.section-hidden-next {
    display: none; /* These classes aren't used anymore */
}

/* Specific section background for portfolio (it was light) */
#portfolio {
    background-color: var(--portfolio-bg);
    color: var(--portfolio-text-color);
    position: relative;
    overflow: visible;
}

/* Gallery dengan gradient */
.gallery-hall {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.7), rgba(44, 62, 80, 0.7), rgba(0, 127, 255, 0.3), rgba(52, 152, 219, 0.5), rgba(26, 26, 26, 0.7));
    background-size: 400% 400%;
    animation: animateGradientBackground 25s ease infinite;
    backdrop-filter: blur(10px);
}

body.light-mode .gallery-hall {
    background: linear-gradient(135deg, rgba(245, 247, 250, 0.7), rgba(195, 207, 226, 0.7), rgba(0, 127, 255, 0.3), rgba(134, 197, 240, 0.5), rgba(245, 247, 250, 0.7));
}

/* Sembunyikan wall yang tidak diperlukan */
.gallery-wall, .gallery-wall-back {
    display: none;
}

/* Clear out gallery wall styles that caused problems */
.gallery-wall-left,
.gallery-wall-right,
.gallery-floor {
    display: none;
}

/* Ensure portfolio container is properly displayed */
#portfolio .container {
    position: relative;
    z-index: 2;
    padding: 5rem 0;
    color: var(--portfolio-text-color);
}

/* Fix flyer grid display */
.flyer-aesthetic-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2.5rem;
    margin-top: 2rem;
    perspective: 1000px; /* Untuk efek 3D */
}

.flyer-grid-item {
    background: var(--background-color-offset);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 2px 10px var(--shadow-color);
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                box-shadow 0.5s ease;
    position: relative;
    z-index: 1;
    max-width: 320px;
    width: 100%;
    min-width: 240px;
    margin: 0.5rem;
    transform-origin: center bottom;
    opacity: 0;
    transform: translate(var(--x-offset, 100px), var(--y-offset, 150px)) scale(0.3) rotate(var(--random-rotate, 0deg));
    animation: flyerLaunch 1.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    animation-delay: calc(var(--item-index, 0) * 0.15s);
    will-change: transform, opacity;
}

@keyframes flyerLaunch {
    0% {
        opacity: 0;
        transform: translate(var(--x-offset, 100px), var(--y-offset, 150px)) scale(0.3) rotate(var(--random-rotate, 0deg));
        filter: blur(2px);
    }
    25% {
        opacity: 0.5;
        filter: blur(1px);
    }
    50% {
        opacity: 0.8;
        transform: translate(calc(var(--x-offset, 100px) * 0.5), calc(var(--y-offset, 150px) * 0.3)) scale(0.6) rotate(calc(var(--random-rotate, 0deg) * 0.7));
    }
    75% {
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0deg);
        filter: blur(0);
    }
}

.flyer-grid-item:hover {
    transform: translateY(-10px) scale(1.05);
    box-shadow: 0 15px 30px rgba(var(--primary-color-rgb), 0.4);
    z-index: 10;
}

.flyer-image-container {
    overflow: hidden;
    position: relative;
    height: 0;
    padding-top: 133%; /* 3:4 aspect ratio for flyers */
    background-color: var(--background-color);
}

.flyer-image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.flyer-image-container img:hover {
    transform: scale(1.05);
}

.flyer-caption {
    padding: 1rem;
    text-align: center;
}

.flyer-caption h3 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: var(--text-color-headings);
}

.flyer-caption p {
    font-size: 0.9rem;
    color: var(--text-color-muted);
    margin-bottom: 0;
}

/* Ensure sections have proper spacing and positioning */
section {
    position: relative;
    padding: 5rem 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    background-color: var(--background-color);
    overflow: visible;
}

/* Remove section transform effects to allow normal scrolling */
.section-current,
.section-hidden,
.section-behind,
.section-ahead,
.section-entering,
.section-exiting,
.section-entering-reverse,
.section-exiting-reverse {
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    z-index: 1 !important;
}

/* About Section & Contact Section (Will adapt to theme) */
.about-section h2, .contact-section h2 {
    color: var(--text-color-headings); /* Bright white for titles on dark bg */
    font-size: 2.8em;
    margin-bottom: 0.8em;
}

.about-section .container,
.contact-section .container {
    max-width: 800px; 
    text-align: center;
}

.about-section p, .contact-section p {
    color: var(--text-color-muted);
    font-size: 1.1em;
    line-height: 1.7;
}

/* Contact Form (Adapts to theme) */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 30px;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-family: var(--font-family);
    font-size: 1em;
    background-color: var(--background-color-offset);
    color: var(--text-color);
    transition: border-color var(--transition-speed), background-color var(--transition-speed), box-shadow var(--transition-speed);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: var(--text-color-muted);
    opacity: 0.7;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    background-color: var(--background-color); /* Focus to main background for better contrast */
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 20%, transparent);
}

.contact-form textarea {
    resize: vertical;
    min-height: 130px;
}

.contact-form .cta-button {
    align-self: center;
    border: none;
    cursor: pointer;
    margin-top: 20px; /* Increased margin-top */
    padding: 15px 35px; /* Increased padding for a larger button */
    font-size: 1.1em; /* Slightly larger font */
    font-weight: 600;
    background-color: var(--primary-color);
    color: #FFFFFF; /* Ensure text is white */
    border-radius: var(--border-radius);
    transition: background-color var(--transition-speed), transform 0.2s ease-out, box-shadow 0.2s ease-out;
    box-shadow: 0 4px 15px rgba(var(--primary-color-rgb), 0.2);
}

.contact-form .cta-button:hover {
    background-color: color-mix(in srgb, var(--primary-color) 85%, black);
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 7px 20px rgba(var(--primary-color-rgb), 0.3);
    color: #FFFFFF; /* Ensure text remains white on hover */
}

/* Specific adjustments for light mode if --primary-color is too light */
body.light-mode .contact-form .cta-button {
    /* If primary-color is very light, you might need a darker text or adjust hover */
    /* color: #FFFFFF; /* Default should be fine for a blue primary */
}

body.light-mode .contact-form .cta-button:hover {
    background-color: color-mix(in srgb, var(--primary-color) 80%, black);
}

/* Direct Contact Buttons */
/* Styles for .direct-contact-buttons - to be removed or commented out */
/*
.direct-contact-buttons {
    margin-top: 40px;
    text-align: center;
}

.direct-contact-buttons p {
    margin-bottom: 15px;
    font-size: 1em;
    color: var(--text-color-muted);
}

.direct-contact-buttons .cta-button {
    display: inline-flex; 
    align-items: center;
    justify-content: center;
    margin: 8px 10px;
    padding: 12px 25px; 
    text-decoration: none;
}

.contact-icon {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    vertical-align: middle; 
}
*/

.whatsapp-button {
    background-color: #25D366; /* WhatsApp Green */
    box-shadow: 0 5px 15px color-mix(in srgb, #25D366 30%, transparent);
}

.whatsapp-button:hover {
    background-color: #1DA851; /* Darker WhatsApp Green */
    box-shadow: 0 9px 22px color-mix(in srgb, #1DA851 40%, transparent);
}

.telegram-button {
    background-color: #0088CC; /* Telegram Blue */
    box-shadow: 0 5px 15px color-mix(in srgb, #0088CC 30%, transparent);
}

.telegram-button:hover {
    background-color: #006DAA; /* Darker Telegram Blue */
    box-shadow: 0 9px 22px color-mix(in srgb, #006DAA 40%, transparent);
}

/* Footer (Adapts to theme) */
footer {
    background-color: var(--background-color-offset); /* Even darker footer */
    color: var(--text-color-muted);
    text-align: center;
    padding: 40px 0;
    border-top: 1px solid var(--border-color);
    transition: background-color var(--transition-speed), color var(--transition-speed), border-color var(--transition-speed);
}

footer p {
    margin-bottom: 0;
    font-size: 0.9em;
}

/* Floating Widgets Styles */
.floating-widgets {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 1010; /* Above most content but below modal if needed */
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.widget-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    box-shadow: 0 4px 12px var(--shadow-color);
    transition: transform var(--transition-speed-fast), box-shadow var(--transition-speed-fast);
    background-color: var(--background-color-offset); /* Default background */
    position: relative; /* Needed for absolute positioning of the tooltip */
}

.widget-link:hover {
    transform: scale(1.1) translateY(-3px);
    box-shadow: 0 6px 16px var(--shadow-color);
}

.widget-link img {
    width: 28px; /* Adjust icon size as needed */
    height: 28px;
    max-width: none; /* Override if global img styles are too restrictive */
}

.whatsapp-widget {
    background-color: #25D366; /* WhatsApp Green */
}
.whatsapp-widget:hover {
    background-color: #1DA851;
}

.telegram-widget {
    background-color: #0088CC; /* Telegram Blue */
}
.telegram-widget:hover {
    background-color: #006DAA;
}

/* Widget Tooltip/Chat Bubble Styles */
.widget-tooltip {
    position: absolute;
    right: 100%; /* Position to the left of the widget */
    top: 50%;
    transform: translateY(-50%) translateX(-10px); /* Adjust X for spacing */
    background-color: var(--background-color-offset);
    color: var(--text-color);
    padding: 8px 12px;
    border-radius: var(--border-radius);
    font-size: 0.85em;
    white-space: nowrap; /* Prevent text wrapping */
    box-shadow: 0 2px 8px var(--shadow-color);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-speed-fast), visibility var(--transition-speed-fast), transform var(--transition-speed-fast);
    pointer-events: none; /* Tooltip should not be interactive itself */
}

.widget-tooltip::after { /* Arrow for the tooltip */
    content: '';
    position: absolute;
    top: 50%;
    left: 100%; /* Arrow on the right side of the tooltip, pointing to widget */
    margin-top: -5px; /* Half of arrow height to center it */
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent var(--background-color-offset); /* Arrow color matches tooltip bg */
}

.widget-link:hover .widget-tooltip,
.widget-link:focus .widget-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(-15px); /* Slightly move tooltip on hover for effect */
}

/* Adjust tooltip background for specific widgets if needed, e.g., to match widget color */
.whatsapp-widget .widget-tooltip {
    background-color: #1DA851; /* Darker WhatsApp Green */
    color: #FFFFFF;
}
.whatsapp-widget .widget-tooltip::after {
    border-left-color: #1DA851;
}

.telegram-widget .widget-tooltip {
    background-color: #006DAA; /* Darker Telegram Blue */
    color: #FFFFFF;
}
.telegram-widget .widget-tooltip::after {
    border-left-color: #006DAA;
}

/* Responsive Design Adjustments for Jeton Style */
@media (max-width: 768px) {
    .nav-menu {
        position: fixed;
        left: -100%;
        top: 75px; /* Match new header height */
        flex-direction: column;
        background-color: var(--background-color); /* Dark background for mobile menu */
        width: 100%;
        text-align: center;
        transition: left var(--transition-speed);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        padding: 20px 0; 
    }

    .nav-menu.active {
        left: 0;
    }

    .nav-item {
        margin: 18px 0;
    }
    .nav-link {
        font-size: 1.15em;
        color: var(--text-color); /* Ensure readable on dark mobile menu */
    }
    .nav-link:hover, .nav-link.active {
        color: var(--primary-color);
    }

    .hamburger {
        display: none;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 44px;
        height: 44px;
        background: none;
        border: none;
        z-index: 2002;
        cursor: pointer;
        transition: background 0.2s, box-shadow 0.2s, left 0.4s cubic-bezier(0.4,0,0.2,1), top 0.4s cubic-bezier(0.4,0,0.2,1), transform 0.4s cubic-bezier(0.4,0,0.2,1);
        position: relative;
        margin-left: 8px;
        box-shadow: none;
    }
    .hamburger:hover {
      background: rgba(0,127,255,0.08);
      box-shadow: 0 2px 8px rgba(0,127,255,0.10);
      transform: scale(1.08);
    }
    .hamburger .bar {
      width: 28px;
      height: 4px;
      background-color: var(--hamburger-bar-color);
      margin: 4px 0;
      border-radius: 2px;
      transition: all 0.35s cubic-bezier(0.4, 0.2, 0.2, 1);
      position: relative;
    }
    .hamburger.active .bar:nth-child(1) {
      transform: translateY(8px) rotate(45deg);
    }
    .hamburger.active .bar:nth-child(2) {
      opacity: 0;
    }
    .hamburger.active .bar:nth-child(3) {
      transform: translateY(-8px) rotate(-45deg);
    }

    @media (max-width: 768px) {
      .hamburger {
        display: flex;
        position: absolute;
        left: 12px;
        right: auto;
        top: 50%;
        transform: translateY(-50%);
        margin-left: 0;
        margin-right: 0;
        background: none;
        border: none;
      }
      .navbar .container {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        position: relative;
        transition: flex-direction 0.4s cubic-bezier(0.4,0,0.2,1), justify-content 0.4s, align-items 0.4s;
      }
      .nav-logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        margin: 0 auto;
        text-align: center;
        width: max-content;
        font-size: 1.4em;
        transition: left 0.4s cubic-bezier(0.4,0,0.2,1), transform 0.4s cubic-bezier(0.4,0,0.2,1);
      }
      .controls-container {
        position: absolute;
        right: 12px;
        left: auto;
        top: 50%;
        transform: translateY(-50%);
        margin: 0;
        transition: right 0.4s cubic-bezier(0.4,0,0.2,1), top 0.4s cubic-bezier(0.4,0,0.2,1), transform 0.4s cubic-bezier(0.4,0,0.2,1);
      }
      .nav-menu {
        position: fixed;
        left: 0;
        top: 75px;
        flex-direction: column;
        background-color: var(--background-color);
        width: 100vw;
        text-align: center;
        transition: opacity 0.4s cubic-bezier(0.4,0,0.2,1), transform 0.4s cubic-bezier(0.4,0,0.2,1);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        padding: 20px 0;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-20px);
        z-index: 1200;
      }
      .nav-menu.active {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
      }
      .nav-item {
        margin: 18px 0;
      }
      .nav-link {
        font-size: 1.15em;
        color: var(--text-color);
      }
      .nav-link:hover, .nav-link.active {
        color: var(--primary-color);
      }
    }

    .controls-container {
        margin-left: auto; /* Push to the right on mobile, before hamburger */
        margin-right: 10px; /* Adjust to ensure it doesn't collide with hamburger */
    }

    .theme-switch-container {
        margin-left: 0; /* Reset individual margin if controls-container handles spacing */
    }

    .hero-section .container h1 {
        font-size: clamp(2.2em, 7vw, 3.5em);
    }
    .hero-section .container p {
        font-size: clamp(0.95em, 3.5vw, 1.15em);
    }

    section {
        padding: 70px 0;
    }
    .portfolio-section h2, .about-section h2, .contact-section h2 {
        font-size: 2.2em;
        margin-bottom: 1em;
    }
    .flyer-aesthetic-grid {
        max-width: 95%;
        padding-bottom: 50px; /* More space for dots on mobile */
    }
    .flyer-image-container {
        height: 220px; /* Adjusted height for tablets / smaller screens */
    }
    .flyer-caption h3 {
        font-size: 1.15em;
    }
    .flyer-caption p {
        font-size: 0.85em;
    }
    .flyer-grid-item {
        padding: 15px;
    }
}

@media (max-width: 480px) {
    .hero-section {
        padding-top: 90px; 
        padding-bottom: 80px; /* Ensure scroll indicator is visible */
    }
    .hero-section .container h1 {
        font-size: clamp(1.8em, 8vw, 2.5em);
    }
    .hero-section .container p {
        font-size: clamp(0.9em, 4vw, 1em);
        padding-left: 10px;
        padding-right: 10px;
    }
    .cta-button {
        padding: 12px 28px;
        font-size: 1em;
    }
    .contact-form .cta-button {
         width: 100%; /* Full width button on small mobile */
    }
    section {
        padding: 60px 0;
    }
    .portfolio-section h2, .about-section h2, .contact-section h2 {
        font-size: 2em;
        margin-bottom: 0.8em;
    }
    .flyer-image-container {
        height: 180px; /* Further reduced height for very small screens */
    }
    .flyer-caption h3 {
        font-size: 1.1em;
    }
    .flyer-caption p {
        font-size: 0.8em;
    }
    .flyer-grid-item {
        padding: 10px;
    }
}

/* Animations (Existing - check compatibility) */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(25px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-section .container h1,
.hero-section .container p,
.hero-section .cta-button {
    animation-duration: 0.7s;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
}

.hero-section .container h1 {
    animation-name: fadeInUp;
    animation-delay: 0.15s;
}

.hero-section .container p {
    animation-name: fadeInUp;
    animation-delay: 0.3s;
}

.hero-section .cta-button {
    animation-name: fadeInUp;
    animation-delay: 0.45s;
}

.animate-on-scroll {
    opacity: 0;
    transform: translateY(25px); /* Reduced distance */
    transition: opacity 0.6s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
    /* transition-delay: 0.1s; */ /* Delay might be better handled by JS if needed for staggered effect, or removed for simpler fade-out */
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
    /* Transition properties were here, moved to .animate-on-scroll base class */
}

/* Image Preview Modal Styles */
.image-modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 2000; /* Sit on top */
    padding-top: 50px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    /* background-color: rgba(13, 13, 13, 0.92); /* Darker overlay, Jeton style */
    background-color: color-mix(in srgb, var(--background-color) 92%, transparent); /* Use variable */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: background-color var(--transition-speed);
}

.modal-content-image {
    margin: auto;
    display: block;
    max-width: 85%;
    max-height: 75vh; /* Max height relative to viewport height */
    animation-name: zoomInModal;
    animation-duration: 0.4s;
    animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
    transition: opacity 0.3s ease-in-out; /* Added for fade transition between images */
}

@keyframes zoomInModal {
    from {transform: scale(0.8); opacity: 0;}
    to {transform: scale(1); opacity: 1;}
}

.modal-caption-text {
    margin: 15px auto 30px auto; /* Added bottom margin */
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: var(--text-color-muted);
    padding: 10px 0;
    font-size: 0.95em;
    line-height: 1.5;
}

.modal-close-button {
    position: absolute;
    top: 20px;
    right: 35px;
    color: var(--text-color);
    font-size: 45px;
    font-weight: bold;
    transition: 0.3s;
    line-height: 1;
}

.modal-close-button:hover,
.modal-close-button:focus {
    color: var(--text-color-muted);
    text-decoration: none;
    cursor: pointer;
}

/* Modal Navigation Buttons */
.modal-nav-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: color-mix(in srgb, var(--background-color-offset) 60%, transparent);
    color: var(--text-color-headings);
    border: none;
    padding: 12px 18px;
    font-size: 28px;
    border-radius: 50%; /* Make them round */
    cursor: pointer;
    z-index: 2010; /* Higher than modal content image but lower than close button if overlapping */
    transition: background-color 0.3s ease;
    width: 50px;  /* Fixed width */
    height: 50px; /* Fixed height */
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    user-select: none; /* Prevent text selection */
}

.modal-nav-button:hover {
    background-color: color-mix(in srgb, var(--background-color-offset) 80%, transparent);
}

.modal-nav-button.prev {
    left: 25px;
}

.modal-nav-button.next {
    right: 25px;
}

@media (max-width: 768px) {
    .modal-content-image {
        max-width: 90%; /* Allow a bit more width on smaller screens */
    }
    .modal-nav-button {
        font-size: 22px;
        padding: 10px 15px;
        width: 40px;
        height: 40px;
    }
    .modal-nav-button.prev {
        left: 15px;
    }
    .modal-nav-button.next {
        right: 15px;
    }
    .modal-close-button {
        font-size: 35px;
        top: 15px;
        right: 25px;
    }
}

/* Theme Toggle Switch Styles */
.theme-switch-container {
    display: flex;
    align-items: center;
    margin-left: 20px; /* Adjust as needed */
}

.theme-toggle-label {
    cursor: pointer;
    display: inline-block;
    width: 48px; /* Width of the toggle */
    height: 24px; /* Height of the toggle */
    background-color: var(--background-color-offset);
    border-radius: 24px;
    position: relative;
    transition: background-color var(--transition-speed);
}

.theme-toggle-label::after { /* This is the nub */
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px; /* Nub size */
    height: 20px; /* Nub size */
    border-radius: 50%;
    background-color: var(--background-color); /* Nub color same as body background */
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: transform var(--transition-speed-fast);
}

#theme-toggle-checkbox {
    display: none; /* Hide the actual checkbox */
}

#theme-toggle-checkbox:checked + .theme-toggle-label {
    background-color: var(--primary-color); /* Or another distinct color for 'on' state */
}

#theme-toggle-checkbox:checked + .theme-toggle-label::after {
    transform: translateX(24px); /* Move nub to the right */
}

.theme-switch-container .sun-icon,
.theme-switch-container .moon-icon {
    position: absolute; /* Position icons inside the label */
    top: 50%;
    transform: translateY(-50%);
    transition: opacity var(--transition-speed-fast);
    pointer-events: none; /* Make sure they don't interfere with label click */
    color: var(--text-color-headings); /* Icon color */
}

.theme-switch-container .sun-icon {
    left: 4px; /* Position sun icon */
    opacity: 0;
}
body.light-mode .theme-switch-container .sun-icon {
    opacity: 1;
    color: #fff; /* Sun icon color on light mode (when toggle is blue) */
}

.theme-switch-container .moon-icon {
    right: 4px; /* Position moon icon */
    opacity: 1;
}
body.light-mode .theme-switch-container .moon-icon {
    opacity: 0;
}
#theme-toggle-checkbox:checked + .theme-toggle-label .moon-icon {
    opacity: 0; /* Hide moon when checked (light mode on) */
}
#theme-toggle-checkbox:checked + .theme-toggle-label .sun-icon {
    opacity: 1; /* Show sun when checked (light mode on) */
    color: #fff; /* Sun icon color when toggle is blue (light mode active) */
}
/* Unchecked state (dark mode) */
#theme-toggle-checkbox:not(:checked) + .theme-toggle-label .moon-icon {
    opacity: 1;
    color: var(--primary-color); /* Moon icon color when dark mode active */
}
#theme-toggle-checkbox:not(:checked) + .theme-toggle-label .sun-icon {
    opacity: 0;
}

/* Language Switcher Styles */
.controls-container {
    display: flex;
    align-items: center;
    gap: 15px; /* Spacing between theme toggle and lang switcher */
}

.language-switcher select {
    background-color: var(--background-color-offset);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    padding: 5px 8px;
    border-radius: var(--border-radius);
    font-family: var(--font-family);
    font-size: 0.85em;
    cursor: pointer;
    transition: background-color var(--transition-speed), color var(--transition-speed), border-color var(--transition-speed);
}

.language-switcher select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color) 20%, transparent);
}

.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    z-index: 2002;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s, left 0.4s cubic-bezier(0.4,0,0.2,1), top 0.4s cubic-bezier(0.4,0,0.2,1), transform 0.4s cubic-bezier(0.4,0,0.2,1);
    position: relative;
    margin-left: 8px;
    box-shadow: none;
}
.hamburger:hover {
  background: rgba(0,127,255,0.08);
  box-shadow: 0 2px 8px rgba(0,127,255,0.10);
  transform: scale(1.08);
}
.hamburger .bar {
  width: 28px;
  height: 4px;
  background-color: var(--hamburger-bar-color);
  margin: 4px 0;
  border-radius: 2px;
  transition: all 0.35s cubic-bezier(0.4, 0.2, 0.2, 1);
  position: relative;
}
.hamburger.active .bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.hamburger.active .bar:nth-child(2) {
  opacity: 0;
}
.hamburger.active .bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

@media (max-width: 768px) {
  .hamburger {
    display: flex;
    position: absolute;
    left: 12px;
    right: auto;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0;
    margin-right: 0;
    background: none;
    border: none;
  }
  .navbar .container {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: flex-direction 0.4s cubic-bezier(0.4,0,0.2,1), justify-content 0.4s, align-items 0.4s;
  }
  .nav-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0 auto;
    text-align: center;
    width: max-content;
    font-size: 1.4em;
    transition: left 0.4s cubic-bezier(0.4,0,0.2,1), transform 0.4s cubic-bezier(0.4,0,0.2,1);
  }
  .controls-container {
    position: absolute;
    right: 12px;
    left: auto;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    transition: right 0.4s cubic-bezier(0.4,0,0.2,1), top 0.4s cubic-bezier(0.4,0,0.2,1), transform 0.4s cubic-bezier(0.4,0,0.2,1);
  }
  .nav-menu {
    position: fixed;
    left: 0;
    top: 75px;
    flex-direction: column;
    background-color: var(--background-color);
    width: 100vw;
    text-align: center;
    transition: opacity 0.4s cubic-bezier(0.4,0,0.2,1), transform 0.4s cubic-bezier(0.4,0,0.2,1);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    padding: 20px 0;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-20px);
    z-index: 1200;
  }
  .nav-menu.active {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
  .nav-item {
    margin: 18px 0;
  }
  .nav-link {
    font-size: 1.15em;
    color: var(--text-color);
  }
  .nav-link:hover, .nav-link.active {
    color: var(--primary-color);
  }
}

/* Fix content visibility in sections */
.section-current .container {
    opacity: 1;
    visibility: visible;
    transform: translateZ(0);
    transition: opacity 0.3s ease 0.4s, transform 0.3s ease 0.4s;
}

.section-entering .container,
.section-exiting .container,
.section-hidden .container,
.section-behind .container,
.section-ahead .container,
.section-entering-reverse .container,
.section-exiting-reverse .container {
    opacity: 0;
    visibility: hidden;
    transform: translateZ(50px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s 0.3s;
}

/* Corridor walls - Disneyland style */
.corridor-wall {
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--corridor-wall-width);
    background-color: var(--background-color-offset);
    z-index: 1;
    transform-style: preserve-3d;
    transition: transform 0.75s cubic-bezier(0.25, 0.1, 0.25, 1),
                opacity 0.75s cubic-bezier(0.25, 0.1, 0.25, 1),
                box-shadow 0.75s cubic-bezier(0.25, 0.1, 0.25, 1);
    box-shadow: inset 0 0 30px var(--corridor-shadow);
    overflow: hidden;
}

.corridor-wall-left {
    left: 0;
    transform: translateZ(-40px) rotateY(15deg);
    transform-origin: left center;
    box-shadow: inset -5px 0 20px var(--corridor-shadow);
    border-right: 2px solid rgba(var(--primary-color-rgb), 0.3);
}

.corridor-wall-right {
    right: 0;
    transform: translateZ(-40px) rotateY(-15deg);
    transform-origin: right center;
    box-shadow: inset 5px 0 20px var(--corridor-shadow);
    border-left: 2px solid rgba(var(--primary-color-rgb), 0.3);
}

/* Wall content styling */
.wall-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    padding: 20px;
    background-color: var(--wall-content-bg);
    border-radius: var(--border-radius);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    text-align: center;
    transition: all 0.5s ease;
    border: 1px solid rgba(var(--primary-color-rgb), 0.2);
}

.corridor-img {
    width: 100%;
    height: auto;
    max-height: 150px;
    object-fit: cover;
    border-radius: calc(var(--border-radius) / 2);
    margin-bottom: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
}

.corridor-img.round {
    border-radius: 50%;
    max-width: 120px;
    margin: 0 auto 15px auto;
}

.wall-content h3 {
    font-size: 1.2em;
    margin-bottom: 10px;
    color: var(--text-color-headings);
}

.wall-content p {
    font-size: 0.9em;
    color: var(--text-color-muted);
}

.wall-icon {
    font-size: 2.5em;
    color: var(--primary-color);
    margin: 10px 0;
}

/* Active section wall highlighting */
.section-current .corridor-wall {
    opacity: 1;
}

.section-current .corridor-wall-left {
    box-shadow: inset -5px 0 30px var(--tunnel-light), 
                inset 0 0 80px var(--tunnel-light),
                0 0 20px rgba(0, 0, 0, 0.2);
    transform: translateZ(-30px) rotateY(15deg); /* Adjusted depth for better visibility */
}

.section-current .corridor-wall-right {
    box-shadow: inset 5px 0 30px var(--tunnel-light), 
                inset 0 0 80px var(--tunnel-light),
                0 0 20px rgba(0, 0, 0, 0.2);
    transform: translateZ(-30px) rotateY(-15deg); /* Adjusted depth for better visibility */
}

.section-entering .corridor-wall,
.section-exiting .corridor-wall,
.section-entering-reverse .corridor-wall,
.section-exiting-reverse .corridor-wall {
    opacity: 0.8;
}

.section-hidden .corridor-wall,
.section-behind .corridor-wall,
.section-ahead .corridor-wall {
    opacity: 0;
}

/* SAO-style prompt styles */
.sao-prompt {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.sao-prompt.active {
    opacity: 1;
    visibility: visible;
}

.sao-prompt-content {
    background-color: var(--background-color-offset);
    border: 2px solid var(--primary-color);
    border-radius: var(--border-radius);
    padding: 30px;
    max-width: 500px;
    width: 90%;
    text-align: center;
    box-shadow: 0 0 30px rgba(var(--primary-color-rgb), 0.5), 
                inset 0 0 20px rgba(var(--primary-color-rgb), 0.2);
    animation: saoAppear 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    transform: scale(0.9);
}

@keyframes saoAppear {
    from {
        transform: scale(0.9);
    }
    to {
        transform: scale(1);
    }
}

.sao-prompt-title {
    font-size: 1.5em;
    margin-bottom: 15px;
    color: var(--text-color-headings);
}

.sao-prompt-question {
    font-size: 1.2em;
    margin-bottom: 25px;
    color: var(--text-color);
}

.sao-prompt-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.sao-button {
    padding: 12px 25px;
    border: none;
    border-radius: var(--border-radius);
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.yes-button {
    background-color: var(--primary-color);
    color: white;
}

.yes-button:hover {
    background-color: #0066cc;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(var(--primary-color-rgb), 0.4);
}

.no-button {
    background-color: #555;
    color: white;
}

.no-button:hover {
    background-color: #444;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* Enhanced lighting for the tunnel effect */
section.section-current::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    background: radial-gradient(
        circle at center,
        rgba(var(--primary-color-rgb), 0.1) 0%,
        rgba(var(--primary-color-rgb), 0) 70%
    );
    pointer-events: none;
    z-index: -1;
}

/* Media queries for responsiveness */
@media (max-width: 768px) {
    .corridor-wall {
        width: 120px;
    }
    
    .wall-content {
        padding: 15px;
    }
    
    .corridor-img {
        max-height: 100px;
    }
    
    .wall-content h3 {
        font-size: 1em;
    }
    
    .corridor-wall-left {
        transform: translateZ(-20px) rotateY(10deg);
    }
    
    .corridor-wall-right {
        transform: translateZ(-20px) rotateY(-10deg);
    }
}

@media (max-width: 480px) {
    .corridor-wall {
        width: 80px;
    }
    
    .wall-content {
        padding: 10px;
    }
    
    .corridor-img {
        max-height: 70px;
        margin-bottom: 10px;
    }
    
    .wall-content h3 {
        font-size: 0.85em;
        margin-bottom: 5px;
    }
    
    .sao-prompt-content {
        padding: 20px;
    }
    
    .sao-prompt-title {
        font-size: 1.2em;
    }
    
    .sao-prompt-question {
        font-size: 1em;
    }
}

/* Improve animation timing for smoother transitions */
.section-entering,
.section-exiting,
.section-entering-reverse,
.section-exiting-reverse {
    transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1); /* Material Design standard curve */
    animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* Add floor and ceiling elements for enhanced tunnel effect */
.corridor-floor,
.corridor-ceiling {
    position: absolute;
    left: var(--corridor-wall-width);
    right: var(--corridor-wall-width);
    height: 15px;
    background: linear-gradient(to right,
        rgba(var(--primary-color-rgb), 0.2),
        rgba(var(--primary-color-rgb), 0.05) 20%,
        rgba(var(--primary-color-rgb), 0.05) 80%,
        rgba(var(--primary-color-rgb), 0.2)
    );
    transform-style: preserve-3d;
    z-index: 0;
}

.corridor-floor {
    bottom: 0;
    transform: rotateX(45deg) translateZ(-20px);
    transform-origin: center bottom;
    border-top: 1px solid rgba(var(--primary-color-rgb), 0.3);
}

.corridor-ceiling {
    top: 0;
    transform: rotateX(-45deg) translateZ(-20px);
    transform-origin: center top;
    border-bottom: 1px solid rgba(var(--primary-color-rgb), 0.3);
}

/* Portfolio section container */
#portfolio .container {
    background-color: rgba(var(--background-color-rgb), 0.85);
}

/* Enhance the visibility of active section with a glow effect */
.section-current::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background: radial-gradient(
        circle at center,
        rgba(var(--primary-color-rgb), 0.1) 0%,
        rgba(var(--primary-color-rgb), 0) 60%
    );
    z-index: -1;
}

/* Section container styling */
section .container {
    width: 90%;
    max-width: 1140px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 10; /* Increased z-index to ensure content appears above corridor elements */
    padding: 40px 30px;
    background-color: rgba(var(--background-color-rgb), 0.75); /* Semi-transparent background */
    border-radius: var(--border-radius);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(var(--primary-color-rgb), 0.1);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

/* Portfolio-specific container */
#portfolio .container {
    background-color: rgba(var(--background-color-rgb), 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(var(--primary-color-rgb), 0.2);
    border-radius: 20px;
}

#portfolio h2, 
#portfolio .flyer-caption h3, 
#portfolio .flyer-caption p {
    color: var(--text-color); /* Use theme text color */
}

/* Enhanced About Section with Photo Grid */
.about-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: 2rem;
}

.about-photos {
    width: 100%;
    margin: 0 auto;
}

.about-photo-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

.about-photo {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.about-photo:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.about-text {
    text-align: left;
}

.about-text p {
    margin-bottom: 1.5rem;
    line-height: 1.8;
}

.skills {
    margin-top: 2rem;
    background: rgba(var(--primary-color-rgb), 0.1);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    border-left: 4px solid var(--primary-color);
}

.skills h3 {
    color: var(--text-color-headings);
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.skills ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
    padding-left: 0;
}

.skills li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
    color: var(--text-color);
}

.skills li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-weight: bold;
}

/* Media Queries for About Section */
@media (min-width: 768px) {
    .about-content {
        flex-direction: row;
        align-items: flex-start;
    }
    
    .about-photos {
        width: 40%;
    }
    
    .about-text {
        width: 60%;
        padding-left: 2rem;
    }
}

@media (max-width: 767px) {
    .about-photo-grid {
        max-width: 400px;
    }
    
    .about-text {
        margin-top: 1rem;
    }
}

@media (max-width: 480px) {
    .about-photo-grid {
        grid-template-columns: 1fr;
        max-width: 300px;
    }
    
    .about-photo {
        height: 220px;
    }
}

/* Custom cursor styling */
body {
    cursor: none; /* Hide the default cursor */
}

.custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: rgba(var(--primary-color-rgb), 0.3);
    border: 1px solid var(--primary-color);
    pointer-events: none;
    z-index: 9999;
    transition: width 0.2s, height 0.2s, background-color 0.2s;
    transform: translate(-50%, -50%);
    mix-blend-mode: difference;
}

.cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--primary-color);
    pointer-events: none;
    z-index: 10000;
    transform: translate(-50%, -50%);
    transition: width 0.05s, height 0.05s;
}

.flyer-image-container,
.about-photo,
.cta-button,
.nav-link,
.hamburger,
.theme-toggle-label,
.widget-link,
.modal-nav-button,
.modal-close-button,
input[type="text"],
input[type="email"],
textarea,
select,
.language-switcher select,
button,
.back-to-top {
    cursor: none; /* Remove default cursor since we're using a custom one */
}

.flyer-image-container:hover ~ .custom-cursor,
.about-photo:hover ~ .custom-cursor,
.cta-button:hover ~ .custom-cursor,
.nav-link:hover ~ .custom-cursor,
.hamburger:hover ~ .custom-cursor,
.theme-toggle-label:hover ~ .custom-cursor,
.widget-link:hover ~ .custom-cursor,
.modal-nav-button:hover ~ .custom-cursor,
.modal-close-button:hover ~ .custom-cursor,
button:hover ~ .custom-cursor,
.back-to-top:hover ~ .custom-cursor {
    width: 40px;
    height: 40px;
    background-color: rgba(var(--primary-color-rgb), 0.15);
}

/* Enhanced hover effects for flyer images */
.flyer-image-container {
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.flyer-image-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(var(--primary-color-rgb), 0.2);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.flyer-image-container:hover::after {
    opacity: 1;
}

.flyer-image-container:hover img {
    transform: scale(1.08);
}

/* Custom Right-Click Context Menu */
.custom-context-menu {
    position: fixed;
    z-index: 9999;
    width: 180px;
    background-color: var(--background-color-offset);
    border-radius: 8px;
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.4);
    padding: 8px 0;
    border: 1px solid var(--border-color);
    opacity: 0;
    visibility: hidden;
    transform: scale(0.8);
    transform-origin: top left;
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

@keyframes menuPulse {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(var(--primary-color-rgb), 0.4); }
    50% { transform: scale(1.02); box-shadow: 0 0 0 10px rgba(var(--primary-color-rgb), 0); }
    100% { transform: scale(1); }
}

.custom-context-menu.visible {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.context-menu-header {
    padding: 8px 14px;
    font-size: 13px;
    color: var(--text-color-muted);
    font-weight: 600;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 5px;
}

.context-menu-item {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    color: var(--text-color);
    text-decoration: none;
    transition: background-color 0.2s;
    cursor: pointer;
}

.context-menu-item:hover {
    background-color: rgba(var(--primary-color-rgb), 0.1);
}

.context-menu-item img {
    width: 18px;
    height: 18px;
    margin-right: 10px;
    object-fit: contain;
}

.context-menu-item.whatsapp-item img {
    filter: brightness(0) invert(1); /* Make white in dark mode */
}

.context-menu-item.telegram-item img {
    filter: brightness(0) invert(1); /* Make white in dark mode */
}

/* Light mode adjustments for context menu */
body.light-mode .custom-context-menu {
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.15);
}

body.light-mode .context-menu-item.whatsapp-item img,
body.light-mode .context-menu-item.telegram-item img {
    filter: none; /* No filter in light mode */
}

body.light-mode .context-menu-item.whatsapp-item:hover {
    background-color: rgba(37, 211, 102, 0.1); /* WhatsApp green */
}

body.light-mode .context-menu-item.telegram-item:hover {
    background-color: rgba(0, 136, 204, 0.1); /* Telegram blue */
}

/* Background Gradient Effect */
.bg-gradient-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -10;
    pointer-events: none;
    background: linear-gradient(135deg, #1a1a1a, #2c3e50, #007FFF, #3498db, #1a1a1a);
    background-size: 400% 400%;
    animation: animateGradientBackground 25s ease infinite;
    transition: opacity 0.3s ease;
}

.bg-gradient-fade {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%;
    background: linear-gradient(to bottom, rgba(var(--background-color-rgb), 0) 0%, rgba(var(--background-color-rgb), 0.7) 50%, rgba(var(--background-color-rgb), 1) 100%);
    z-index: -9;
    pointer-events: none;
}

body.light-mode .bg-gradient-wrapper {
    background: linear-gradient(135deg, #f5f7fa, #c3cfe2, #007FFF, #86c5f0, #f5f7fa);
}

body.light-mode .bg-gradient-fade {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 1) 100%);
}

/* Back To Top Button */
.back-to-top {
    position: fixed;
    bottom: 100px;
    left: 25px; /* Posisi di kiri */
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 999;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s;
    pointer-events: none; /* Awalnya tidak bisa diklik */
    overflow: visible;
}

.back-to-top.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto; /* Bisa diklik saat visible */
}

.rocket-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: rotate(-45deg); /* Menghadap ke atas-kanan */
    transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.back-to-top:hover .rocket-wrapper {
    transform: rotate(-45deg) translateY(-15px);
    animation: rocketShake 0.2s infinite alternate;
}

@keyframes rocketShake {
    0% {
        transform: rotate(-45deg) translateY(-15px) translateX(-1px);
    }
    100% {
        transform: rotate(-45deg) translateY(-15px) translateX(1px);
    }
}

.back-to-top i {
    font-size: 1.8rem;
    position: relative;
    z-index: 2;
}

.rocket-flame {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 20px;
    height: 30px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
    pointer-events: none;
}

.back-to-top:hover .rocket-flame {
    opacity: 1;
}

.flame-1, .flame-2, .flame-3 {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    border-radius: 50% 50% 0 0;
    pointer-events: none;
}

.flame-1 {
    width: 20px;
    height: 30px;
    background: linear-gradient(to bottom, rgba(255, 140, 0, 0.8), rgba(255, 69, 0, 0.8));
    animation: flicker1 0.5s infinite alternate;
}

.flame-2 {
    width: 14px;
    height: 25px;
    background: linear-gradient(to bottom, rgba(255, 215, 0, 0.8), rgba(255, 140, 0, 0.8));
    animation: flicker2 0.4s infinite alternate;
}

.flame-3 {
    width: 8px;
    height: 20px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 215, 0, 0.8));
    animation: flicker3 0.3s infinite alternate;
}

@keyframes flicker1 {
    0% { height: 30px; opacity: 0.8; }
    100% { height: 35px; opacity: 1; }
}

@keyframes flicker2 {
    0% { height: 25px; opacity: 0.8; }
    100% { height: 28px; opacity: 1; }
}

@keyframes flicker3 {
    0% { height: 20px; opacity: 0.8; }
    100% { height: 22px; opacity: 1; }
}

/* Animasi saat scroll ke atas */
.scrolling-up .back-to-top.visible .rocket-wrapper {
    transform: rotate(-45deg) translateY(-15px);
    animation: rocketBoost 0.3s infinite alternate;
}

.scrolling-up .back-to-top.visible .rocket-flame {
    opacity: 1;
    animation: flameBoost 0.2s infinite alternate;
}

/* Animasi rocket boosting saat diklik */
body.rocket-boosting .back-to-top .rocket-wrapper {
    transform: rotate(-45deg) translateY(-25px);
    animation: fullRocketBoost 1s forwards;
}

body.rocket-boosting .back-to-top .rocket-flame {
    opacity: 1 !important;
    animation: fullFlameBoost 0.15s infinite alternate;
}

@keyframes fullRocketBoost {
    0% { 
        transform: rotate(-45deg) translateY(-15px); 
    }
    20% { 
        transform: rotate(-45deg) translateY(-20px); 
    }
    100% { 
        transform: rotate(-45deg) translateY(-50vh); 
    }
}

@keyframes fullFlameBoost {
    0% {
        transform: translateX(-50%) rotate(45deg) scaleY(1.2);
        opacity: 0.9;
    }
    100% {
        transform: translateX(-50%) rotate(45deg) scaleY(1.8);
        opacity: 1;
    }
}

@keyframes rocketBoost {
    0% {
        transform: rotate(-45deg) translateY(-15px);
    }
    100% {
        transform: rotate(-45deg) translateY(-18px);
    }
}

@keyframes flameBoost {
    0% {
        transform: translateX(-50%) rotate(45deg) scaleY(1);
    }
    100% {
        transform: translateX(-50%) rotate(45deg) scaleY(1.3);
    }
}

/* Adjust existing sections to account for gradient background */
section {
    background-color: transparent;
    position: relative;
}

#portfolio {
    background-color: transparent;
}

/* Ensure portfolio elements still show up properly */
.gallery-hall, 
.gallery-wall-back {
    background-color: transparent;
} 

/* Clients Section */
.clients-section {
    padding: 60px 0;
    text-align: center;
    position: relative;
    background: transparent;
    border-top: none;
    border-bottom: none;
    box-shadow: none;
    z-index: 5;
    position: relative;
    overflow: hidden;
}

/* Remove the section-specific gradient and use the site's main gradient */
/*
.clients-section::before {
    display: none;
}
*/

/* Light mode version of the gradient - also removed as we'll use the site's main background */
/*
body.light-mode .clients-section::before {
    display: none;
}
*/

.clients-section h2 {
    margin-bottom: 40px;
    font-size: 2.5rem;
    color: var(--text-color-headings);
    text-align: center;
    font-weight: 600;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

body.light-mode .clients-section h2 {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.clients-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin-top: 40px;
    position: relative;
}

.client-item {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    width: 160px; /* Increased size */
    height: 120px; /* Adjusted height for better proportion with increased width */
    background-color: transparent;
    padding: 0;
    border-radius: 8px;
    position: relative;
}

.client-item:hover {
    transform: translateY(-5px);
}

.client-logo {
    max-width: 100%;
    max-height: 90px; /* Increased size */
    display: block;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.15));
    background: none;
    padding: 0;
    position: relative;
    z-index: 1;
    transition: filter 0.3s ease;
}

/* Light mode: more prominent shadow */
body.light-mode .client-logo {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)); 
}

/* REMOVE pseudo-element backdrop styling for logos 2 & 6 */
.client-item:nth-child(2)::before,
.client-item:nth-child(6)::before {
    display: none; /* Effectively remove the pseudo-element */
}

/* These rules below are now redundant due to the ::before being hidden, but removing for full cleanup */
/* body.light-mode .client-item:nth-child(2)::before, ... etc. are effectively gone */
/* body:not(.light-mode) .client-item:nth-child(2)::before, ... etc. are effectively gone */

/* Remove any lingering specific styling for the logos themselves if they were tied to the backdrop */
body:not(.light-mode) .client-item:nth-child(2) .client-logo,
body:not(.light-mode) .client-item:nth-child(6) .client-logo {
    filter: none; /* Reset any specific filters */
}

@media (max-width: 768px) {
    .clients-grid {
        gap: 30px; /* Slightly increased gap for larger logos */
    }
    .client-item {
        width: 140px;
        height: 100px;
    }
    .client-logo {
        max-height: 75px; /* Adjusted for medium screens */
    }
    .clients-section h2 {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .clients-section {
        padding: 40px 0;
    }
    .clients-grid {
        gap: 20px;
    }
    .client-item {
        width: 120px;
        height: 90px;
    }
    .client-logo {
        max-height: 65px; /* Adjusted for small screens */
    }
    .clients-section h2 {
        font-size: 1.8rem;
    }
}

/* About Section & Contact Section (Will adapt to theme) */

/* NEW Testimonial Layout for About Section */
.testimonial-layout {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    align-items: center;
    gap: 2rem; /* Spacing between columns */
    padding: 2rem 0; /* Add some padding to the section content */
}

.testimonial-image-column {
    flex: 1 1 40%; /* Takes up 40% of the space, can shrink/grow */
    min-width: 300px; /* Minimum width before wrapping */
}

.testimonial-media-container {
    position: relative;
    border-radius: 12px; /* Rounded corners for the media container */
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(var(--shadow-color), 0.15);
}

.testimonial-media-container img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 4.5; /* Maintain aspect ratio similar to example */
    object-fit: cover;
    /* Removed position:absolute from here if it existed, slideshow images will handle it */
}

/* Styles for the new About Me slideshow */
.slideshow-container {
    position: relative; /* Already on .testimonial-media-container */
    overflow: hidden; /* Already on .testimonial-media-container */
}

.slideshow-image {
    position: absolute; /* All images stacked */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Ensure they fill the container defined by aspect-ratio on parent */
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.7s ease-in-out; /* Fade effect */
    border-radius: 12px; /* Match container rounding */
}

.slideshow-image.active {
    opacity: 1;
    position: relative; /* For the first active image to set the container height correctly */
}

.slideshow-nav-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.3);
    color: white;
    border: none;
    padding: 10px;
    font-size: 20px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    transition: background-color 0.3s ease;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.slideshow-nav-button:hover {
    background-color: rgba(var(--primary-color-rgb), 0.7);
}

.slideshow-nav-button.prev {
    left: 15px;
}

.slideshow-nav-button.next {
    right: 15px;
}

.testimonial-text-column {
    flex: 1 1 55%; /* Takes up 55% of the space */
    min-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 1rem; /* Spacing between text elements */
    text-align: left; /* Ensure text is left-aligned by default */
}

/* Styles for paragraphs within the new text column */
.testimonial-text-column p {
    font-size: 1em; /* Or your preferred paragraph font size */
    line-height: 1.7;
    color: var(--text-color-muted);
    margin-bottom: 0.5rem; /* Adjust spacing between paragraphs if needed */
}

.testimonial-text-column p.animate-on-scroll:last-of-type {
    margin-bottom: 1.5rem; /* More space before skills */
}

/* Styles for the .skills div within the new text column */
.testimonial-text-column .skills {
    margin-top: 1rem; /* Adjust as needed */
    background: rgba(var(--primary-color-rgb), 0.05); /* Lighter background */
    padding: 1.5rem;
    border-radius: var(--border-radius);
    border-left: 4px solid var(--primary-color);
}

.testimonial-text-column .skills h3 {
    color: var(--text-color-headings);
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.testimonial-text-column .skills ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem; /* Adjust gap */
    padding-left: 0;
}

.testimonial-text-column .skills li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
    color: var(--text-color);
}

.testimonial-text-column .skills li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-weight: bold;
}

/* Responsive adjustments for the new testimonial layout */
@media (max-width: 768px) {
    .testimonial-layout {
        flex-direction: column;
        align-items: stretch; /* Stretch columns to full width */
    }

    .testimonial-image-column,
    .testimonial-text-column {
        flex-basis: auto; /* Reset flex-basis */
        width: 100%;
    }

    .testimonial-text-column {
        /* text-align: center; /* Reverted: Keep text-align left for paragraphs */
    }
    /* Paragraphs and skills list will naturally be left-aligned now based on .testimonial-text-column */

    /* .testimonial-link, /* Element removed */
    /* .testimonial-navigation { /* Element removed */
    /*    align-self: center; 
    /* }
    /* .testimonial-navigation {
    /*     justify-content: center; 
    /* } */
    /* .testimonial-quote { /* Element removed */
    /*    font-size: clamp(1.3rem, 2.2vw, 1.8rem);
    /* } */
}

/* Custom width for About Me section container */
#about .container {
    max-width: 1500px; /* Make the About Me section container wider */
}

/* Make sure there are no lingering placeholders or invalid CSS beyond this point */

/* --- PREMIUM BACKGROUND FOR ABOUT SECTION --- */
.about-section {
    padding: 100px 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}
body:not(.light-mode) .about-section {
    background: linear-gradient(135deg, #23272a 0%, #1e2124 100%); /* Darker gradient for dark mode */
}
body.light-mode .about-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}

.about-content.premium-layout {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 60px;
    align-items: start;
    margin-top: 50px;
    max-width: 1200px; /* Restored from previous adjustment */
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px; /* Restored from previous adjustment */
}

.premium-image-column {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.premium-media-container {
    position: relative;
    width: 100%;
    max-width: 400px; /* Restored from previous adjustment */
    padding-top: 133.33%; /* 3:4 aspect ratio */
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 10px 45px 0 rgba(0,0,0,0.12), 0 2px 10px 0 rgba(0,0,0,0.08);
    overflow: hidden;
    border: 1px solid #e0e0e0;
}

.premium-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 18px;
    box-sizing: border-box;
}

.slideshow-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(.4,1,.7,1);
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
}
.slideshow-image.active {
    opacity: 1;
}

.premium-controls {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 18px;
    z-index: 10;
}
.premium-nav-button {
    background: linear-gradient(135deg, #007bff 60%, #7f53ac 100%);
    border: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(.4,1,.7,1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}
.premium-nav-button:hover {
    background: linear-gradient(135deg, #7f53ac 0%, #007bff 100%);
    transform: scale(1.13);
}
.premium-nav-button i {
    color: #fff;
    font-size: 16px;
}

.premium-text-column {
    padding: 30px 40px;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* Light/Dark specific styles */
    background-color: var(--background-color-offset); /* Default to theme offset */
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 45px 0 rgba(0,0,0,0.08), 0 2px 10px 0 rgba(0,0,0,0.05); /* Softer shadow */
}
body:not(.light-mode) .premium-text-column {
    background-color: #2b2d31; /* Custom dark for card */
    box-shadow: 0 10px 45px 0 rgba(0,0,0,0.15), 0 2px 10px 0 rgba(0,0,0,0.1);
}
body.light-mode .premium-text-column {
    background-color: #ffffff;
    box-shadow: 0 10px 45px 0 rgba(0,0,0,0.08), 0 2px 10px 0 rgba(0,0,0,0.05);
}

.premium-intro {
    margin-top: 0;
    margin-bottom: 25px;
}
.premium-paragraph {
    font-family: var(--font-family); /* Unified font */
    font-size: 1.1rem;
    line-height: 1.75;
    margin-bottom: 20px;
    text-align: left;
    letter-spacing: 0.01em;
}

.premium-expertise {
    margin: 25px 0 0 0;
}
.premium-subtitle {
    font-family: var(--font-family); /* Unified font */
    font-size: 1.6rem;
    color: #232323;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 12px;
    text-align: left;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.premium-subtitle::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #007bff, #7f53ac);
    border-radius: 2px;
}

.premium-skills {
    margin-left: 0;
    padding-left: 0;
}
.premium-skill-item {
  display: flex;
  gap: 16px;
  padding: 18px 20px 18px 0; /* padding kiri 0 */
  background: rgba(30,32,38,0.82);
  border-radius: 18px;
  box-shadow: 0 4px 24px 0 rgba(0,0,0,0.10);
  align-items: center;
  border-left: 3px solid;
  border-image: linear-gradient(180deg, #7f53ac 0%, #007bff 100%);
  border-image-slice: 1;
  transition: box-shadow 0.3s cubic-bezier(.4,1,.7,1), transform 0.25s cubic-bezier(.4,1,.7,1), background 0.3s;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  margin-bottom: 0;
  min-height: unset;
}
.premium-skill-item:hover {
  box-shadow: 0 8px 32px 0 rgba(127,83,172,0.18), 0 2px 8px rgba(0,0,0,0.10);
  transform: translateY(-4px) scale(1.025);
  background: rgba(40,42,50,0.92);
}
.premium-skill-item .skill-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7f53ac 60%, #007bff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.45em;
  box-shadow: 0 2px 8px rgba(127,83,172,0.10);
  margin-top: 0;
  margin-left: 0;
  padding-left: 16px; /* sejajarkan icon dengan judul section */
}
.premium-skill-item .skill-content h4 {
  font-size: 1.13em;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
  font-weight: 700;
  color: var(--text-color-headings);
}
.premium-skill-item .skill-content p {
  font-size: 1em;
  margin-bottom: 0;
  color: var(--text-color-muted);
  margin-left: 0; /* pastikan margin kiri dihapus */
}
@media (max-width: 600px) {
  .premium-skills {
    gap: 12px;
    padding-left: 0;
  }
  .premium-skill-item {
    padding: 12px 8px 12px 14px;
    border-radius: 12px;
    gap: 8px;
  }
  .premium-skill-item .skill-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    font-size: 1.05em;
    margin-left: 0;
  }
}

.premium-quote {
    margin: 30px 0 0 0;
    padding: 25px 35px;
    border-left: 8px solid #007bff;
    border-radius: 14px;
    position: relative;
    text-align: left;
    /* Light/Dark specific styles */
    background-color: var(--background-color); /* Default to main theme background */
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
body:not(.light-mode) .premium-quote {
    background-color: #313338;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}
body.light-mode .premium-quote {
    background-color: #f6f7fb;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

/* ... (rest of the CSS for About Me and other sections) ... */
/* CSS for .premium-media-container and .premium-nav-button doesn't need to be changed specifically for light/dark as they are already contrasting */

.premium-paragraph, .premium-subtitle, .quote-text { /* .skill-content h4 removed from this group */
    color: var(--text-color-headings);
}
body.light-mode .premium-paragraph,
body.light-mode .premium-subtitle,
body.light-mode .quote-text { /* .skill-content h4 removed from this group */
    color: #232323;
}

/* Specific color rules for skill titles */
.skill-content h4 {
    font-family: var(--font-family);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    margin-bottom: 8px;
    color: var(--text-color); /* Dark Mode: Softer white for less emphasis than subtitle */
}
body.light-mode .skill-content h4 {
    color: #232323; /* Light Mode: Dark grey, consistent with subtitle */
}

.skill-content p {
    color: var(--text-color-muted);
}
body.light-mode .skill-content p {
    color: #555;
}

@media (max-width: 768px) {
  .about-content.premium-layout {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 0 8px;
    margin-top: 30px;
    max-width: 100%;
  }
  .premium-image-column {
    width: 100%;
    justify-content: center;
    align-items: center;
    margin-bottom: 0;
  }
  .premium-media-container {
    max-width: 320px;
    width: 100%;
    padding-top: 133.33%;
    margin: 0 auto;
  }
  .premium-text-column {
    padding: 18px 8px;
    border-radius: 18px;
  }
}

/* DEBUG: Force hamburger menu to be visible and obvious */


@media (max-width: 768px) {
  .navbar .container {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  .nav-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0 auto;
    text-align: center;
    width: max-content;
    font-size: 1.4em;
  }
  .hamburger {
    position: absolute;
    left: 12px;
    right: auto;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0;
    margin-right: 0;
  }
  .controls-container {
    position: absolute;
    right: 12px;
    left: auto;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
  }
}

.about-content.premium-layout {
  align-items: center;
  gap: 36px;
}
.premium-text-column {
  max-width: 440px;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
  min-height: 420px;
  box-shadow: 0 6px 32px 0 rgba(0,0,0,0.10);
}
.premium-intro {
  width: 100%;
  text-align: left;
}
@media (max-width: 900px) {
  .about-content.premium-layout {
    gap: 18px;
  }
  .premium-text-column {
    max-width: 100%;
    min-height: unset;
    padding: 18px 8px;
  }
}

.about-content.premium-layout {
  align-items: center;
  gap: 24px;
}
.premium-text-column {
  max-width: 420px;
  min-height: 100%;
  background: rgba(30,32,38,0.82);
  backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255,255,255,0.08);
  box-shadow: 0 6px 32px 0 rgba(0,0,0,0.10);
  border-radius: 22px;
  padding: 36px 32px;
  text-align: justify;
}
.premium-media-container {
  box-shadow: 0 6px 32px 0 rgba(0,0,0,0.13);
  border: 2.5px solid #fff;
  border-radius: 22px;
  background: rgba(255,255,255,0.07);
}
@media (max-width: 900px) {
  .about-content.premium-layout {
    gap: 14px;
  }
  .premium-text-column {
    max-width: 100%;
    min-height: unset;
    padding: 18px 8px;
  }
  .premium-media-container {
    border-radius: 16px;
    padding-top: 133.33%;
  }
}