@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;600;700&family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
    --yamaha-red: #E60012;
    --yamaha-blue: #003CA6;
    --dark-bg: #0F0F0F;
    --card-bg: #1A1A1A;
    --text-light: #F4F4F4;
    --text-gray: #B0B0B0;
    --gradient-red: linear-gradient(135deg, #E60012 0%, #A6000D 100%);
    --gradient-dark: linear-gradient(135deg, #2A2A2A 0%, #151515 100%);
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    --transition: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

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

body {
    background-color: var(--dark-bg);
    color: var(--text-light);
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
    overflow-x: hidden;
    animation: fadeInPage 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

html {
    background-color: #0f0f0f;
    overflow-y: overlay;
    scroll-behavior: smooth;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Animations */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Header & Nav */
header {
    background: rgba(15, 15, 15, 0.95);
    backdrop-filter: blur(10px);
    padding: 1.2rem 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 2px solid var(--yamaha-red);
}

.logo {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-light);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Oswald', sans-serif;
}

.logo img {
    height: 45px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.3));
}

.logo span {
    color: var(--yamaha-red);
}

nav ul {
    display: flex;
    gap: 2.5rem;
    list-style: none;
}

nav a {
    color: var(--text-light);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    text-transform: uppercase;
    position: relative;
    padding: 5px 0;
    transition: 0.3s;
}

nav a::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--yamaha-red);
    transition: 0.3s var(--transition);
}

nav a:hover::before,
nav a.active::before {
    width: 100%;
}

nav a:hover,
nav a.active {
    color: var(--yamaha-red);
}

/* Hero Section */
.hero {
    height: 100vh;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 100%);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    align-items: center;
    padding: 0 8%;
    position: relative;
    overflow: hidden;
    /* Background moved to child elements for animation */
}

.hero-bg-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

.hero-slide.active {
    opacity: 1;
}

/* Static gradient overlay to ensure text readability during transitions */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.4) 100%);
    z-index: 1;
}

.hero-content {
    max-width: 650px;
    z-index: 2;
    position: relative;
    /* Ensure z-index works */
    animation: slideInLeft 1s ease-out;
}

.hero-content h1 {
    font-size: 4.5rem;
    line-height: 1.1;
    margin-bottom: 20px;
    text-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

.hero-content span {
    color: var(--yamaha-red);
    display: block;
}

.hero-content p {
    font-size: 1.1rem;
    margin-bottom: 35px;
    color: #ddd;
    border-left: 4px solid var(--yamaha-red);
    padding-left: 20px;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 14px 40px;
    background: var(--yamaha-red);
    color: var(--text-light);
    text-decoration: none;
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    letter-spacing: 1px;
    clip-path: polygon(10% 0, 100% 0, 100% 80%, 90% 100%, 0 100%, 0 20%);
    transition: all 0.3s ease;
    border: none;
}

.btn:hover {
    background: #FF0017;
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(230, 0, 18, 0.4);
}

.btn-outline {
    background: transparent;
    border: 2px solid var(--text-light);
    clip-path: none;
    border-radius: 4px;
    margin-left: 15px;
    padding: 12px 35px;
}

.btn-outline:hover {
    background: var(--text-light);
    color: var(--dark-bg);
    transform: translateY(-5px);
}

/* Sections */
section {
    padding: 5rem 8%;
}

.section-title {
    text-align: center;
    margin-bottom: 4rem;
    position: relative;
}

.section-title.mb-small {
    margin-bottom: 1.5rem;
}

.section-title h2 {
    font-size: 3rem;
    margin-bottom: 15px;
}

.section-title p {
    color: var(--text-gray);
}

.section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: var(--yamaha-red);
    margin: 15px auto 0;
}

/* Categories */
.category-grid {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 3rem;
    padding: 0 5%;
}

.category-item {
    width: 120px;
    text-align: center;
    cursor: pointer;
    transition: 0.3s;
}

.category-item img {
    width: 100%;
    border-radius: 12px;
    border: 2px solid transparent;
    transition: 0.3s;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.category-item:hover img {
    border-color: var(--yamaha-red);
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(230, 0, 18, 0.3);
}

.category-item span {
    display: block;
    margin-top: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-gray);
    transition: 0.3s;
}

.category-item:hover span {
    color: var(--text-light);
}

.category-item.active img {
    border-color: var(--yamaha-red);
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 8px 25px rgba(230, 0, 18, 0.5);
}

.category-item.active span {
    color: var(--yamaha-red);
    font-weight: 700;
}

/* Features */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.feature-item {
    background: var(--card-bg);
    padding: 40px 30px;
    border-radius: 15px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: 0.4s;
    position: relative;
    overflow: hidden;
}

.feature-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--yamaha-red);
    transform: scaleX(0);
    transition: 0.4s;
}

.feature-item:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow);
    background: linear-gradient(145deg, #222, #1a1a1a);
}

.feature-item:hover::before {
    transform: scaleX(1);
}

.feature-icon {
    font-size: 3.5rem;
    color: var(--yamaha-red);
    margin-bottom: 25px;
}

/* Motor Cards */
.motor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 40px;
}

.motor-card {
    background: #1e1e1e;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    transition: 0.4s;
    border: 1px solid #333;
}

.motor-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
    border-color: var(--yamaha-red);
}

.motor-img {
    height: 300px;
    background: radial-gradient(circle at center, #333 0%, #1a1a1a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    position: relative;
}

.motor-img img {
    max-width: 95%;
    max-height: 95%;
    object-fit: contain;
    transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s ease;
    opacity: 0;
    will-change: opacity, transform;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5));
}

.motor-img img.active {
    opacity: 1;
    z-index: 2;
}

.motor-card:hover .motor-img img {
    transform: scale(1.1) rotate(-3deg);
}

/* Cross-fade image stacking for NMAX animation */
.motor-img.cross-fade-stack {
    display: grid;
    place-items: center;
}

.motor-img.cross-fade-stack img {
    grid-area: 1 / 1;
}

.motor-info {
    padding: 25px;
    text-align: center;
    background: #1e1e1e;
}

.motor-info h3 {
    font-size: 1.8rem;
    margin-bottom: 5px;
    color: var(--text-light);
}

.motor-info p {
    color: var(--text-gray);
    font-size: 0.9rem;
    margin-bottom: 15px;
}

.price {
    display: inline-block;
    padding: 5px 15px;
    background: rgba(230, 0, 18, 0.1);
    color: var(--yamaha-red);
    border-radius: 50px;
    font-weight: 700;
    margin-bottom: 20px;
    border: 1px solid rgba(230, 0, 18, 0.3);
}

.motor-info .btn {
    width: 100%;
}

/* Motor Actions - untuk layout tombol Detail & Compare */
.motor-actions {
    display: flex;
    gap: 10px;
    width: 100%;
}

.motor-actions .btn {
    flex: 1;
    font-size: 0.9rem;
    padding: 12px 20px;
}

.btn-compare {
    background: transparent;
    border: 2px solid var(--yamaha-red);
    color: var(--yamaha-red);
    clip-path: none;
    border-radius: 4px;
}

.btn-compare:hover {
    background: var(--yamaha-red);
    color: white;
}

.btn-compare.active {
    background: var(--yamaha-red);
    color: white;
}

/* Comparison Bar */
.comparison-bar {
    position: fixed;
    bottom: -100%;
    left: 0;
    width: 100%;
    background: var(--card-bg);
    border-top: 2px solid var(--yamaha-red);
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.5);
    z-index: 1500;
    transition: bottom 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    padding: 15px 5%;
}

.comparison-bar.active {
    bottom: 0;
}

.comparison-bar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    max-width: 1400px;
    margin: 0 auto;
}

.comparison-items {
    display: flex;
    gap: 15px;
    flex: 1;
    overflow-x: auto;
}

.comparison-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.05);
    padding: 10px 15px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    min-width: 200px;
}

.comparison-item img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    background: radial-gradient(circle, #333, #1a1a1a);
    border-radius: 5px;
    padding: 5px;
}

.comparison-item-info {
    flex: 1;
}

.comparison-item-info h4 {
    font-size: 0.9rem;
    margin: 0 0 3px 0;
    color: var(--text-light);
}

.comparison-item-info p {
    font-size: 0.75rem;
    margin: 0;
    color: var(--yamaha-red);
    font-weight: 600;
}

.comparison-item-remove {
    cursor: pointer;
    color: var(--text-gray);
    font-size: 1.2rem;
    padding: 5px;
    transition: 0.3s;
}

.comparison-item-remove:hover {
    color: var(--yamaha-red);
    transform: scale(1.2);
}

.comparison-actions {
    display: flex;
    gap: 10px;
}

.comparison-actions .btn {
    white-space: nowrap;
    padding: 12px 25px;
}

/* Comparison Table */
.comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.comparison-table th,
.comparison-table td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.comparison-table th {
    background: rgba(230, 0, 18, 0.1);
    color: var(--yamaha-red);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
}

.comparison-table td {
    color: var(--text-light);
}

.comparison-table tr:hover {
    background: rgba(255, 255, 255, 0.02);
}

.comparison-table .motor-col {
    text-align: center;
    vertical-align: top;
}

.comparison-table .motor-col img {
    width: 150px;
    height: auto;
    object-fit: contain;
    margin-bottom: 10px;
}

.comparison-table .motor-col h3 {
    color: var(--yamaha-red);
    margin-bottom: 5px;
    font-size: 1.3rem;
}

.comparison-table .motor-col .price {
    display: block;
    margin: 10px 0;
    font-size: 1.1rem;
    font-weight: 700;
}

/* Series Selector in Comparison */
.series-selector {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid var(--yamaha-red);
    border-radius: 8px;
    color: var(--text-light);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Poppins', sans-serif;
}

.series-selector:hover {
    background: rgba(230, 0, 18, 0.1);
    border-color: var(--text-light);
}

.series-selector:focus {
    outline: none;
    background: rgba(230, 0, 18, 0.15);
    box-shadow: 0 0 10px rgba(230, 0, 18, 0.5);
}

.series-selector option {
    background: #1a1a1a;
    color: var(--text-light);
    padding: 10px;
}

@media (max-width: 768px) {
    .comparison-bar-content {
        flex-direction: column;
        gap: 15px;
    }

    .comparison-items {
        width: 100%;
    }

    .comparison-actions {
        width: 100%;
    }

    .comparison-actions .btn {
        flex: 1;
    }

    .motor-actions {
        flex-direction: column;
    }

    .comparison-table {
        font-size: 0.85rem;
    }

    .comparison-table th,
    .comparison-table td {
        padding: 10px 5px;
    }

    .comparison-table .motor-col img {
        width: 80px;
    }

    /* Small phones (Portrait) */
    @media (max-width: 480px) {
        .modal-box {
            width: 95%;
            max-height: 95vh;
        }

        .modal-scrollable-content {
            padding: 20px 10px;
            /* Reduced padding for more space */
        }

        .comparison-table {
            min-width: 500px;
            /* Force horizontal scroll */
        }

        .comparison-table th,
        .comparison-table td {
            padding: 8px 4px;
            font-size: 0.75rem;
        }

        .comparison-table .motor-col h3 {
            font-size: 1rem;
        }

        .series-selector {
            padding: 5px;
            font-size: 0.8rem;
        }

        .color-dot-comp {
            width: 18px !important;
            height: 18px !important;
        }

        .close-modal {
            top: 5px;
            right: 5px;
            width: 30px;
            height: 30px;
            font-size: 1.5rem;
        }
    }
}

/* Contact Page - Horizontal Layout */
.contact-info-container {
    margin-bottom: 60px;
}

.contact-grid-horizontal {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    max-width: 1400px;
    margin: 0 auto;
}

.contact-card {
    background: var(--card-bg);
    padding: 35px 25px;
    border-radius: 15px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.contact-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--yamaha-red);
    transform: scaleX(0);
    transition: 0.3s;
}

.contact-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border-color: rgba(230, 0, 18, 0.3);
}

.contact-card:hover::before {
    transform: scaleX(1);
}

.contact-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    background: rgba(230, 0, 18, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}

.contact-icon i {
    font-size: 1.8rem;
    color: var(--yamaha-red);
}

.contact-card:hover .contact-icon {
    background: rgba(230, 0, 18, 0.2);
    transform: scale(1.1);
}

.contact-card h4 {
    font-size: 1.1rem;
    margin-bottom: 12px;
    color: var(--text-light);
}

.contact-card p {
    color: var(--text-gray);
    font-size: 0.95rem;
    line-height: 1.6;
}

.contact-card .contact-number-row {
    justify-content: center;
}

/* Map Container */
.map-container {
    max-width: 1400px;
    margin: 0 auto;
}

.map-wrapper {
    width: 100%;
    height: 500px;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

/* Responsive */
/* Responsive */
@media (max-width: 900px) {
    header {
        padding: 1rem 5%;
    }

    /* Mobile Menu Styles */
    .menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 30px;
        height: 21px;
        cursor: pointer;
        z-index: 1001;
    }

    .menu-toggle span {
        display: block;
        width: 100%;
        height: 3px;
        background: var(--text-light);
        border-radius: 3px;
        transition: 0.3s;
    }

    .menu-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 6px);
        background: var(--yamaha-red);
    }

    .menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -6px);
        background: var(--yamaha-red);
    }

    nav ul {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        right: -100%;
        /* Hidden by default */
        width: 100%;
        height: 100vh;
        background: rgba(15, 15, 15, 0.98);
        backdrop-filter: blur(10px);
        justify-content: center;
        align-items: center;
        gap: 2rem;
        transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 999;
    }

    nav ul.active {
        right: 0;
    }

    nav ul li a {
        font-size: 1.5rem;
    }

    /* Other Responsive Adjustments */
    .hero-content h1 {
        font-size: 3rem;
    }

    .contact-grid-horizontal {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
    }

    .map-wrapper {
        height: 400px;
    }
}

@media (max-width: 480px) {
    .hero-content h1 {
        font-size: 2.2rem;
    }

    .hero-content p {
        font-size: 0.95rem;
    }

    .section-title h2 {
        font-size: 2rem;
    }

    section {
        padding: 3rem 5%;
    }

    .motor-grid,
    .features-grid {
        grid-template-columns: 1fr;
        /* Full width on small phones */
    }

    .btn {
        padding: 12px 30px;
        width: 100%;
        text-align: center;
        margin-bottom: 15px;
        clip-path: none;
        /* Simplify button shape for mobile if needed for spacing, or keep consistent */
        border-radius: 4px;
    }

    .btn-outline {
        margin-left: 0;
    }
}

/* Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-overlay.active {
    display: flex;
    opacity: 1;
}

.modal-box {
    background: var(--card-bg);
    width: 90%;
    max-width: 900px;
    max-height: 90vh;
    /* Limit height */
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    transform: scale(0.8);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    flex-direction: column;
    /* Ensure vertical stack */
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}

.modal-overlay.active .modal-box {
    transform: scale(1);
}

.close-modal {
    position: absolute;
    top: 15px;
    right: 15px;
    color: var(--text-light);
    font-size: 2rem;
    cursor: pointer;
    z-index: 20;
    /* Increased Z-Index to stay on top */
    background: rgba(0, 0, 0, 0.5);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}

.close-modal:hover {
    background: var(--yamaha-red);
    transform: rotate(90deg);
}

.modal-content-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    width: 100%;
    overflow-y: auto;
    /* Enable scrolling */
    -webkit-overflow-scrolling: touch;
    /* Smooth scroll on mobile */
    max-height: 100%;
    /* Fill available space */
    padding-right: 5px;
    /* Prevent text from touching scrollbar */
}

/* Modal Scrollable Content (Generic) */
.modal-scrollable-content {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    max-height: 100%;
    padding: 40px;
}

/* Custom Scrollbar for all scrollable content */
.modal-content-grid::-webkit-scrollbar,
.modal-scrollable-content::-webkit-scrollbar,
#comparisonTable::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    /* For horizontal scroll */
}

.modal-content-grid::-webkit-scrollbar-track,
.modal-scrollable-content::-webkit-scrollbar-track,
#comparisonTable::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

.modal-content-grid::-webkit-scrollbar-thumb,
.modal-scrollable-content::-webkit-scrollbar-thumb,
#comparisonTable::-webkit-scrollbar-thumb {
    background: var(--yamaha-red);
    border-radius: 10px;
}

/* Comparison Table Horizontal Scroll */
#comparisonTable {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 20px;
    padding-bottom: 20px;
    /* Space for scrollbar */
}

.modal-img-wrapper {
    background: radial-gradient(circle at center, #333 0%, #151515 100%);
    display: flex;
    flex-direction: column;
    /* Changed to column */
    align-items: center;
    justify-content: center;
    padding: 40px;
    position: relative;
}

.modal-img-wrapper img {
    max-width: 100%;
    max-height: 350px;
    /* Reduced slightly to fit colors */
    object-fit: contain;
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.6));
}

.modal-details {
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.modal-details h2 {
    font-size: 2.5rem;
    color: var(--yamaha-red);
    margin-bottom: 10px;
}

.modal-price {
    font-size: 1.5rem;
    color: var(--text-light);
    font-weight: 700;
    margin-bottom: 20px;
}

.modal-desc {
    color: var(--text-gray);
    margin-bottom: 30px;
    line-height: 1.8;
}

.modal-actions {
    display: flex;
    gap: 15px;
}

@media (max-width: 768px) {
    .modal-content-grid {
        grid-template-columns: 1fr;
    }

    .modal-img-wrapper {
        padding: 40px 20px;
        /* Generous padding */
        height: auto !important;
        min-height: auto;
        display: block;
        /* Use block to prevent flex centering overlap */
        text-align: center;
    }

    .modal-img-wrapper img {
        margin-bottom: 20px;
        /* Ensure space between image and controls */
    }

    .modal-details {
        padding: 25px;
    }

    .modal-details h2 {
        font-size: 1.8rem;
    }
}

/* Variant Buttons */
.variant-buttons {
    display: none;
    /* Hidden by default */
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 25px;
}

.variant-btn {
    background: transparent;
    border: 1px solid #444;
    color: var(--text-gray);
    padding: 8px 16px;
    border-radius: 50px;
    cursor: pointer;
    font-size: 0.9rem;
    font-family: 'Poppins', sans-serif;
    transition: 0.3s;
}

.variant-btn:hover {
    border-color: var(--text-light);
    color: var(--text-light);
}

.variant-btn.active {
    background: var(--yamaha-red);
    box-shadow: 0 5px 15px rgba(230, 0, 18, 0.3);
}

/* Image Transition Animation */
@keyframes fadeScale {
    0% {
        opacity: 0;
        transform: scale(0.95);
        filter: blur(5px);
    }

    100% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }
}

.animate-fade {
    animation: fadeScale 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Color Buttons (Icons) */
.color-selector-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
    width: 100%;
}

.selected-color-name {
    font-size: 1rem;
    color: var(--text-gray);
    margin-bottom: 10px;
    font-weight: 500;
}

.selected-color-name span {
    color: var(--text-light);
    font-weight: 700;
}

.color-selector-container {
    display: flex;
    justify-content: center;
    gap: 15px;
    background: rgba(0, 0, 0, 0.6);
    padding: 12px 25px;
    border-radius: 50px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.color-btn {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 2px solid transparent;
    /* Default border */
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.color-btn:hover {
    transform: scale(1.2);
}

.color-btn.active {
    transform: scale(1.2);
    border-color: #fff;
    /* White ring for active */
    box-shadow: 0 0 0 3px var(--yamaha-red);
    /* Outer red ring */
}

/* Specific fix for white button visibility */
.color-btn[data-color="Putih"],
.color-btn[data-color="Ceramic Grey"],
.color-btn[data-color="Elixir Dark Silver"] {
    border: 1px solid #aaa;
}

/* NMAX Series Badge */
.series-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    /* Moved to right as requested */
    left: auto;
    background: rgba(230, 0, 18, 0.9);
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 10;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.5s ease;
}

/* NMAX Series Badge Show State */
.series-badge.show {
    opacity: 1;
    transform: translateY(0);
}

/* Enhanced Image Animation - Cross Fade */
.motor-img.cross-fade-stack {
    display: grid;
    place-items: center;
}

.motor-img.cross-fade-stack img {
    grid-area: 1 / 1;
    transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s ease;
    will-change: opacity, transform;
    opacity: 0;
}

.motor-img.cross-fade-stack img.active {
    opacity: 1;
    z-index: 2;
}

/* Ensure hover effect affects both images */
.motor-card:hover .motor-img.cross-fade-stack img {
    transform: scale(1.1) rotate(-3deg);
}

/* Legacy Image Animation for non-stack cards (optional, or just generic styles) */
.motor-img img:not(.cross-fade-stack img) {
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.5s ease;
}

/* Specs Title */
.specs-title {
    font-size: 1.2rem;
    color: var(--yamaha-red);
    margin-bottom: 10px;
    margin-top: 20px;
    font-family: 'Oswald', sans-serif;
    letter-spacing: 0.5px;
}

/* Promo Page Styles */
.promo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.promo-card {
    background: var(--card-bg);
    border-radius: 15px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #333;
}

.promo-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
    border-color: var(--yamaha-red);
}

.promo-img-wrapper {
    width: 100%;
    aspect-ratio: 2/3;
    background: radial-gradient(circle at center, #333 0%, #1a1a1a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.promo-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.promo-card:hover .promo-img-wrapper img {
    transform: scale(1.05);
}

.promo-status {
    padding: 15px 20px;
    text-align: center;
    font-weight: 700;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.promo-status.aktif {
    background: rgba(0, 200, 83, 0.1);
    color: #00c853;
    border-top: 2px solid #00c853;
}

.promo-status.tidak-aktif {
    background: rgba(255, 82, 82, 0.1);
    color: #ff5252;
    border-top: 2px solid #ff5252;
}

.promo-status i {
    font-size: 1.1rem;
}

/* WhatsApp inquiry button */
.promo-wa-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    background: #25D366;
    color: white;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    border-top: 2px solid rgba(255, 255, 255, 0.1);
    transition: background 0.3s ease, transform 0.2s ease;
}

.promo-wa-btn:hover {
    background: #1fb855;
    transform: translateY(-2px);
}

.promo-wa-btn i {
    font-size: 1.2rem;
}

/* Responsive adjustments for promo grid */
@media (max-width: 768px) {
    .promo-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* Promo Image Lightbox Modal */
.promo-lightbox {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.promo-lightbox.active {
    display: flex;
}

.promo-lightbox-content {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 0 50px rgba(230, 0, 18, 0.5);
    cursor: grab;
    transition: transform 0.2s ease;
    transform-origin: center center;
}

.promo-lightbox-content:active {
    cursor: grabbing;
}

.promo-lightbox-close {
    position: absolute;
    top: 30px;
    right: 40px;
    font-size: 3rem;
    color: white;
    cursor: pointer;
    transition: color 0.3s ease;
    z-index: 10000;
}

.promo-lightbox-close:hover {
    color: var(--yamaha-red);
}

/* Contact Number Row with Inline Button */
.contact-number-row {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 5px;
}

.contact-number-row span {
    color: var(--text-light);
    font-size: 1rem;
    line-height: 32px;
}

/* Small Contact Buttons */
.contact-btn-small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.85rem;
    transition: all 0.3s ease;
    border: none;
}

.contact-btn-small.phone-btn {
    background: var(--yamaha-blue);
    color: white;
}

.contact-btn-small.phone-btn:hover {
    background: #0048cc;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 60, 166, 0.4);
}

.contact-btn-small.wa-btn {
    background: #25D366;
    color: white;
}

.contact-btn-small.wa-btn:hover {
    background: #1EBE57;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(37, 211, 102, 0.4);
}

.contact-btn-small i {
    margin: 0;
}

@media (max-width: 768px) {
    .promo-lightbox-close {
        top: 15px;
        right: 20px;
        font-size: 2rem;
    }

    .contact-btn {
        font-size: 0.85rem;
        padding: 8px 16px;
    }
}

/* Footer */
footer {
    background: #050505;
    padding: 4rem 8%;
    text-align: center;
    border-top: 1px solid #333;
}

.social-links {
    margin-bottom: 30px;
}

.social-links a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    background: #222;
    color: var(--text-light);
    border-radius: 50%;
    margin: 0 10px;
    font-size: 1.2rem;
    transition: 0.3s;
}

.social-links a:hover {
    background: var(--yamaha-red);
    transform: translateY(-5px);
}

/* Global Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    /* Slightly wider for main page */
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--yamaha-red);
    border-radius: 10px;
    border: 2px solid #0f0f0f;
    /* Add border for "floating" effect */
}

::-webkit-scrollbar-thumb:hover {
    background: #bf000f;
}

/* Modal specific tweaks if needed, but global covers it mostly. 
   Keeping modal-specific class for tighter areas if we want thinner bars there, 
   but for now user asked for "setiap html" so global is key. 
   We will treat the modal inner scrollbar same as global or let it inherit.
   Actually, let's keep the modal specific one as well if we want it to be thinner (6px vs 8px) 
   or just use global. Let's make it ALL global for consistency. */

/* Animations */
@keyframes fadeInPage {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes modalPop {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Apply Modal Animation */
.modal-box {
    animation: modalPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Search Bar - Premium Design */
.search-container {
    max-width: 700px;
    margin: 0 auto 3rem;
    padding: 0 20px;
    position: relative;
}

.search-input {
    width: 100%;
    padding: 18px 60px 18px 25px;
    font-size: 1.05rem;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: var(--text-light);
    font-family: 'Poppins', sans-serif;
    transition: all 0.3s ease;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

.search-input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--yamaha-red);
    box-shadow: 0 0 20px rgba(230, 0, 18, 0.3), 0 8px 25px rgba(0, 0, 0, 0.4);
}

.search-input::placeholder {
    color: var(--text-gray);
    opacity: 0.7;
    font-weight: 400;
}

.search-icon {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--yamaha-red);
    font-size: 1.3rem;
    pointer-events: none;
    transition: all 0.3s ease;
}

.search-input:focus~.search-icon {
    color: var(--text-light);
    transform: translateY(-50%) scale(1.1);
}