/* =========================================================
   OVERRIDE.CSS — KING BARBERSHOP
   Perbaikan font global + gallery slider
   Load PALING AKHIR setelah header.css
========================================================= */

/* =========================================================
   1. GLOBAL FONT SCALE UP
========================================================= */
:root {
    --tf-body-size: clamp(1.02rem, 1.15vw, 1.12rem);
    --tf-lead: clamp(1.08rem, 1.5vw, 1.25rem);
    --tf-h1: clamp(2.8rem, 6.5vw, 5.5rem);
    --tf-h2: clamp(2.1rem, 4vw, 3.4rem);
    --tf-h3: clamp(1.6rem, 2.8vw, 2.3rem);
    --tf-small: 0.92rem;
    --tf-label: 0.82rem;
}

html {
    font-size: 16px;
}

body {
    font-size: var(--tf-body-size) !important;
    line-height: 1.75 !important;
}

/* Heading */
h1 { font-size: var(--tf-h1) !important; }
h2 { font-size: var(--tf-h2) !important; }
h3 { font-size: var(--tf-h3) !important; }
h4 { font-size: clamp(1.3rem, 2vw, 1.6rem) !important; }
p  { font-size: var(--tf-body-size) !important; line-height: 1.75 !important; }

/* =========================================================
   2. HEADER NAVBAR
========================================================= */
.header .navbar-link,
.navbar-link {
    font-size: 0.95rem !important;
    letter-spacing: 0.14em !important;
    padding: 12px 18px !important;
}

.header .kbar-brand,
.header .kbar-brand-text {
    font-size: 1.5rem !important;
    letter-spacing: 0.16em !important;
}

/* =========================================================
   3. JUDUL WELCOME
========================================================= */
.kbar-welcome-title,
section.team h1 {
    font-size: clamp(2.6rem, 7vw, 5rem) !important;
    margin: 40px auto 32px !important;
    line-height: 1 !important;
}

/* =========================================================
   4. MENU BUTTON
========================================================= */
/* =========================================================
   4. MENU CONTAINER — GRID 3 KOLOM × 2 BARIS
========================================================= */
.menu-container {
    width: 100% !important;
    max-width: 720px !important;
    margin: 0 auto 20px !important;
    padding: 0 10px !important;

    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;  /* ⭐ 3 kolom pasti */
    grid-auto-rows: 1fr !important;                    /* ⭐ 2 baris sama tinggi */
    gap: 14px !important;

    justify-content: center !important;
    align-items: stretch !important;
}

.menu-button {
    width: 100% !important;
    min-width: 0 !important;      /* penting: cegah overflow grid */
    min-height: 68px !important;
    box-sizing: border-box !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;

    padding: 16px 12px !important;

    font-size: 1rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.menu-button i {
    flex: 0 0 auto !important;
    width: 24px !important;
    font-size: 1.35rem !important;
    line-height: 1 !important;
    text-align: center !important;
}

.menu-button span {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Tablet */
@media (max-width: 768px) {
    .menu-container {
        max-width: 560px !important;
        gap: 10px !important;
    }
    .menu-button {
        min-height: 60px !important;
        font-size: 0.9rem !important;
        padding: 12px 8px !important;
        gap: 7px !important;
    }
    .menu-button i {
        width: 20px !important;
        font-size: 1.15rem !important;
    }
}

/* HP — tetap 3 kolom × 2 baris */
@media (max-width: 480px) {
    .menu-container {
        max-width: 100% !important;
        gap: 8px !important;
        padding: 0 8px !important;
    }
    .menu-button {
        min-height: 56px !important;
        font-size: 0.78rem !important;
        padding: 10px 4px !important;
        gap: 5px !important;
        border-radius: 7px !important;
    }
    .menu-button i {
        width: 16px !important;
        font-size: 0.95rem !important;
    }
}
/* =========================================================
   5. ABOUT SECTION
========================================================= */
.about-subtitle {
    font-size: 0.88rem !important;
    padding: 7px 16px !important;
}

.about-title {
    font-size: clamp(2.2rem, 4.5vw, 3.6rem) !important;
}

.about-text,
.about p {
    font-size: 1.08rem !important;
    line-height: 1.9 !important;
    color: #3d3d3d !important;
}

.about-bottom-text {
    font-size: 1.05rem !important;
}

/* =========================================================
   6. TEAM MEMBER
========================================================= */
.team-member span {
    font-size: 0.92rem !important;
    letter-spacing: 0.1em !important;
}
.team-member figure {
    width: 100px !important;
    height: 100px !important;
}
.team-item {
    width: 120px !important;
}

/* =========================================================
   7. FOOTER
========================================================= */
.kbar-footer-brand {
    font-size: 1.9rem !important;
}
.kbar-footer-tagline {
    font-size: 1rem !important;
    line-height: 1.7 !important;
}
.kbar-footer-heading {
    font-size: 0.95rem !important;
}
.kbar-footer-item,
.kbar-footer-list li {
    font-size: 0.98rem !important;
    line-height: 1.65 !important;
}
.kbar-footer-copy {
    font-size: 0.9rem !important;
}
.kbar-footer-cta {
    font-size: 0.88rem !important;
}

/* =========================================================
   8. MODAL
========================================================= */
.follow-modal-content h2 {
    font-size: 2.2rem !important;
}
.follow-modal-content p {
    font-size: 1rem !important;
}
.follow-modal-content .social-media a {
    font-size: 0.98rem !important;
    padding: 16px 20px !important;
}
.maps-modal-content h3 {
    font-size: 1.85rem !important;
}
.pricelist-popup-title {
    font-size: clamp(1.9rem, 3.5vw, 2.6rem) !important;
}

/* =========================================================
   9. GALLERY — FIX AUTO SLIDE DESKTOP + MOBILE
========================================================= */

/* Container gallery */


.gallery .container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 20px !important;
    overflow: hidden !important;
}

/* Track list */
.gallery-list#gallery-list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 20px !important;

    width: max-content !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;

    list-style: none !important;
    overflow: visible !important;

    /* Animasi CSS murni — full loop */
    animation: galleryScroll 40s linear infinite !important;
    will-change: transform;
}

/* Pause saat hover */
.gallery-list#gallery-list:hover {
    animation-play-state: paused !important;
}

/* Setiap item */
.gallery-list#gallery-list > li.gallery-slide,
.gallery-list#gallery-list > li {
    display: block !important;
    flex: 0 0 calc((100vw - 80px) / 4) !important;
    width: calc((100vw - 80px) / 4) !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
}

/* Figure */
.gallery-list .gallery-item {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 4 !important;
    margin: 0 !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    border: 1px solid rgba(212, 162, 74, 0.3) !important;
    transition: all 0.4s ease !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18) !important;
}

.gallery-list .gallery-item:hover {
    border-color: #ff9800 !important;
    box-shadow:
        0 14px 36px rgba(255, 152, 0, 0.4),
        0 0 0 1px #ff9800 !important;
    transform: scale(1.03) !important;
}

/* Image */
.gallery-list .gallery-item img {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
    transition: transform 0.6s ease !important;
}

.gallery-list .gallery-item:hover img {
    transform: scale(1.08) !important;
}

/* KEYFRAMES — geser full 50% (karena list digandakan 2x) */
@keyframes galleryScroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

/* =========================================================
   10. GALLERY RESPONSIVE
========================================================= */

/* Tablet */
@media (max-width: 1024px) {
    .gallery-list#gallery-list > li.gallery-slide,
    .gallery-list#gallery-list > li {
        flex: 0 0 calc((100vw - 60px) / 3) !important;
        width: calc((100vw - 60px) / 3) !important;
    }
    .gallery-list#gallery-list {
        gap: 15px !important;
        animation-duration: 32s !important;
    }
}

/* HP */
@media (max-width: 768px) {
    .gallery-list#gallery-list {
        gap: 12px !important;
        animation-duration: 28s !important;
    }
    .gallery-list#gallery-list > li.gallery-slide,
    .gallery-list#gallery-list > li {
        flex: 0 0 calc((100vw - 44px) / 2.3) !important;
        width: calc((100vw - 44px) / 2.3) !important;
    }
}

/* HP kecil */
@media (max-width: 480px) {
    .gallery {
        padding: 30px 0 !important;
    }
    .gallery-list#gallery-list > li.gallery-slide,
    .gallery-list#gallery-list > li {
        flex: 0 0 calc((100vw - 30px) / 1.8) !important;
        width: calc((100vw - 30px) / 1.8) !important;
    }
    .gallery-list#gallery-list {
        gap: 10px !important;
        animation-duration: 24s !important;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .gallery-list#gallery-list {
        animation: none !important;
    }
}

/* =========================================================
   11. VIDEO
========================================================= */
 
.video {
    width: calc(100% - 40px) !important;
    max-width: 1400px !important;      /* ← dari 1100px */
    margin: 30px auto 20px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    border: 1px solid rgba(212, 162, 74, 0.3) !important;
    box-shadow:
        0 16px 45px rgba(0, 0, 0, 0.22),
        0 0 30px rgba(255, 152, 0, 0.15) !important;
}

.video iframe {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    border: none !important;
    border-radius: 18px !important;
}

/* Tablet */
@media (max-width: 1024px) {
    .video {
        width: calc(100% - 40px) !important;
        max-width: 900px !important;
        margin: 30px auto 30px !important;
    }
}

/* HP */
@media (max-width: 768px) {
    .video {
        width: calc(100% - 24px) !important;
        max-width: 100% !important;
        margin: 30px auto 20px !important;
        border-radius: 14px !important;
    }
    .video iframe {
        border-radius: 14px !important;
    }
}