/* Full width background for Keunggulan section */

/* Visual reskin inspired by MITRA layout without changing page structure */

:root {
    --op-dark: #121212;
    --op-dark-soft: #1c1c1c;
    --op-gold: #c89b7b;
    --op-gold-deep: #a57b5e;
    --op-surface: #ffffff;
    --op-bg: #f4f1ed;
    --op-text: #2f2f2f;
    --op-text-strong: #1f1f1f;
}

* {
    box-sizing: border-box;
}

a {
    text-decoration: none !important;
}

html {
    scroll-behavior: smooth;
    overflow-x: clip;
}

body {
    background: var(--op-bg) !important;
    color: var(--op-text) !important;
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

p,
li,
span,
.text-gray-600,
.text-gray-700,
.text-gray-800 {
    color: var(--op-text);
}

.grid > * {
    min-width: 0;
    min-height: 0;
}

.flex > * {
    min-width: 0;
}

.flex-1 {
    min-width: 0;
}

/* Hero */
body > header.relative {
    position: relative;
    max-width: none !important;
    min-height: 60vh;
    padding: 72px 8% !important;
    background: url("https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?auto=format&fit=crop&w=1800&q=80") center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
}

body > header.relative::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.58);
}

body > header.relative > div {
    position: relative;
    z-index: 1;
}

body > header.relative .inline-block {
    background: rgba(17, 17, 17, 0.78) !important;
    border: 1px solid rgba(200, 155, 123, 0.4) !important;
    color: #f4e8df !important;
}

body > header.relative h2 {
    color: #fff !important;
    font-size: clamp(2rem, 6vw, 3.6rem) !important;
    line-height: 1.1 !important;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 12px;
    padding: 20px 22px;
}

body > header.relative h2 span {
    color: var(--op-gold) !important;
}

body > header.relative p {
    color: #f5f5f5 !important;
}

body > header.relative .pt-4 a:first-child {
    background: var(--op-gold) !important;
    color: #fff !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28) !important;
}

body > header.relative .pt-4 a:first-child:hover {
    background: var(--op-gold-deep) !important;
    transform: translateY(-2px);
}

body > header.relative .pt-4 a:last-child {
    border: 2px solid var(--op-gold) !important;
    color: var(--op-gold) !important;
    background: rgba(0, 0, 0, 0.45) !important;
    border-radius: 8px !important;
}

body > header.relative .pt-4 a:last-child:hover {
    background: var(--op-gold) !important;
    color: #fff !important;
}

body > header.relative .group img {
    filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.45));
}

/* Generic sections */
section {
    position: relative;
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

section h2 {
    letter-spacing: 0.2px;
}

/* About + Visi Misi */
#about {
    background: #ffffff !important;
}

#about .bg-omah-cream\/60,
#about .bg-omah-green,
#about .bg-omah-cream {
    background: #fff !important;
    color: var(--op-text) !important;
    border: 1px solid #ece2d9 !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
    border-radius: 12px !important;
}

#about h4 {
    color: var(--op-gold-deep) !important;
}

#advantages h2,
#advantages h3 {
    color: #111 !important;
}

#advantages .text-gray-500 {
    color: rgba(255, 255, 255, 0.82) !important;
}

#advantages .bg-white {
    background: rgba(255, 255, 255, 0.9) !important;
    border-radius: 20px !important;
}

#advantages .bg-white h3 {
    color: #111 !important;
}

#advantages .bg-white p {
    color: #4a4a4a !important;
}

#advantages .group .w-16.h-16 {
    background: rgba(200, 155, 123, 0.2) !important;
    color: var(--op-gold-deep) !important;
}

#advantages .group:hover .w-16.h-16,
#advantages .group:focus-within .w-16.h-16,
#advantages .group:active .w-16.h-16 {
    background: var(--op-gold) !important;
    color: #fff !important;
}

/* Menu */
#menu .border-b {
    border-color: #ebdfd4 !important;
}

#menu .font-bold.text-lg {
    color: #1d1d1d;
}

#menu .text-omah-green {
    color: var(--op-gold-deep) !important;
}

#menu .mt-8 a {
    border-radius: 8px !important;
    background: var(--op-gold) !important;
}

#menu .mt-8 a:hover {
    background: var(--op-gold-deep) !important;
}

/* Gallery */
#gallery-preview {
    background: #faf8f5 !important;
}

#gallery-preview .rounded-2xl {
    border-radius: 10px !important;
}

#gallery-preview img {
    object-fit: cover !important;
}

#gallery-preview a {
    background: var(--op-gold) !important;
    border-radius: 8px !important;
}

#gallery-preview a:hover {
    background: var(--op-gold-deep) !important;
}

/* Reviews */
#reviews {
    background: #ffffff !important;
}

#reviews .rounded-3xl,
#reviews .bg-omah-green {
    border: 1px solid #efe4da !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

#reviews .text-omah-gold,
#reviews .text-omah-green {
    color: var(--op-gold-deep) !important;
}

/* Instagram section */
section.py-24.px-6.bg-white .group {
    border-radius: 14px !important;
}

section.py-24.px-6.bg-white .inline-flex.items-center.gap-2.bg-omah-green {
    background: var(--op-gold) !important;
}

section.py-24.px-6.bg-white .inline-flex.items-center.gap-2.bg-omah-green:hover {
    background: var(--op-gold-deep) !important;
}

/* Location */
#location {
    background: #f8f5f1 !important;
}

#location .bg-gray-200 {
    background: #fff !important;
    border-radius: 12px !important;
    border: 0 !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

/* Footer */
#footer {
    background: #111 !important;
    color: #fff !important;
}

#footer .text-yellow-300,
#footer .text-omah-gold,
#footer a:hover,
#footer .fa-instagram,
#footer .fa-tiktok,
#footer .fa-whatsapp,
#footer .fa-google {
    color: var(--op-gold) !important;
}

#footer .bg-omah-gold,
#footer .from-omah-gold,
#footer .to-yellow-400 {
    background: var(--op-gold) !important;
}

/* ========================================
   PAGE LOAD ANIMATION
   ======================================== */
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-24px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(32px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-32px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(32px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.88); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes shimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}

/* Page wrapper fade-in saat load */
body > nav    { animation: fadeInDown 0.5s ease both; }
body > header { animation: scaleIn 0.65s cubic-bezier(0.16,1,0.3,1) 0.1s both; }

/* AOS custom variants — dipakai via data-aos */
[data-aos="fade-up"]    { opacity: 0; transform: translateY(32px);  transition-property: opacity, transform; }
[data-aos="fade-down"]  { opacity: 0; transform: translateY(-24px); transition-property: opacity, transform; }
[data-aos="fade-left"]  { opacity: 0; transform: translateX(32px);  transition-property: opacity, transform; }
[data-aos="fade-right"] { opacity: 0; transform: translateX(-32px); transition-property: opacity, transform; }
[data-aos="zoom-in"]    { opacity: 0; transform: scale(0.88);       transition-property: opacity, transform; }
[data-aos="flip-up"]    { opacity: 0; transform: perspective(600px) rotateX(16deg); transition-property: opacity, transform; }

[data-aos].aos-animate  { opacity: 1; transform: none; }

/* ========================================
   SCROLL ANIMATIONS (IntersectionObserver)
   ======================================== */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}

.scroll-animate {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.scroll-animate.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger untuk grid children */
.scroll-animate:nth-child(1) { transition-delay: 0s; }
.scroll-animate:nth-child(2) { transition-delay: 0.09s; }
.scroll-animate:nth-child(3) { transition-delay: 0.18s; }
.scroll-animate:nth-child(4) { transition-delay: 0.27s; }
.scroll-animate:nth-child(5) { transition-delay: 0.36s; }
.scroll-animate:nth-child(6) { transition-delay: 0.45s; }



/* ========================================
   NAVBAR SCROLL EFFECT
   ======================================== */
.sticky.top-0.z-50 > nav {
    background: #141414 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #f5f1eb !important;
}

.sticky.top-0.z-50 > nav a,
.sticky.top-0.z-50 > nav h1,
.sticky.top-0.z-50 > nav button {
    color: inherit !important;
}

.sticky.top-0.z-50 > #mobileMenu {
    background: #191919 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.sticky.top-0.z-50 > nav h1 {
    color: #f5f1eb !important;
}

.sticky.top-0.z-50 > nav .hidden.lg\:flex > a {
    color: rgba(245, 241, 235, 0.92) !important;
    text-decoration: none !important;
}

.sticky.top-0.z-50 > nav .hidden.lg\:flex > a:hover,
.sticky.top-0.z-50 > nav .hidden.lg\:flex > a.text-omah-gold {
    color: #c89b7b !important;
}

.sticky.top-0.z-50 > nav .hidden.lg\:flex > a.border-omah-gold {
    border-color: #c89b7b !important;
}

.sticky.top-0.z-50 > nav a.hidden.lg\:flex.bg-omah-gold {
    background: #c89b7b !important;
    color: #fffaf4 !important;
    border-color: rgba(200, 155, 123, 0.45) !important;
}

.sticky.top-0.z-50 > nav a.hidden.lg\:flex.bg-omah-gold:hover {
    background: #b8855f !important;
    color: #fffaf4 !important;
}

.sticky.top-0.z-50 > nav #mobileMenuButton {
    color: #f5f1eb !important;
    border-color: rgba(200, 155, 123, 0.45) !important;
}

.sticky.top-0.z-50 > nav #mobileMenuButton:hover {
    background: #c89b7b !important;
    color: #fffaf4 !important;
}

.sticky.top-0.z-50 > #mobileMenu a {
    color: rgba(245, 241, 235, 0.92) !important;
}

.sticky.top-0.z-50 > #mobileMenu a.text-omah-gold,
.sticky.top-0.z-50 > #mobileMenu a.font-semibold {
    color: #c89b7b !important;
}

.sticky.top-0.z-50 > #mobileMenu a:hover {
    background: rgba(200, 155, 123, 0.12) !important;
}

nav {
    transition: padding 0.3s ease, box-shadow 0.3s ease !important;
}

nav.nav-scrolled {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45) !important;
}

/* ========================================
   CARD LIFT & BUTTON HOVER
   ======================================== */
.group.hover\:shadow-xl {
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.group.hover\:shadow-xl:hover {
    transform: translateY(-5px) !important;
}

a[class*="rounded-full"][class*="bg-omah"],
a[class*="rounded-lg"][class*="bg-omah"],
a[class*="rounded-full"][class*="bg-white"],
button[class*="rounded-full"][class*="bg-omah"] {
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.25s ease !important;
}

a[class*="rounded-full"][class*="bg-omah"]:hover,
a[class*="rounded-lg"][class*="bg-omah"]:hover,
button[class*="rounded-full"][class*="bg-omah"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(200, 155, 123, 0.4) !important;
}

/* ==========================================================
   GLOBAL UTILITY OVERRIDES — Palette, shadows, borders
   ========================================================== */

.bg-omah-cream,
.bg-omah-cream\/40,
.bg-omah-cream\/60,
.bg-omah-cream\/5 { background-color: #f4f1ed !important; }

.bg-white { background-color: #ffffff !important; }

.text-omah-green  { color: var(--op-text-strong) !important; }
.text-omah-gold   { color: var(--op-gold) !important; }

.text-gray-500,
.text-gray-600,
.text-gray-700,
.text-gray-800 { color: var(--op-text-muted) !important; }

.text-black,
.text-neutral-900,
.text-neutral-800 { color: var(--op-text-strong) !important; }

.bg-omah-green             { background-color: #121212 !important; }
.bg-omah-gold              { background-color: #c89b7b !important; }
.hover\:bg-omah-green:hover { background-color: #121212 !important; }
.hover\:bg-omah-gold:hover  { background-color: #a57b5e !important; }
.hover\:text-omah-green:hover { color: #111111 !important; }
.hover\:text-omah-gold:hover  { color: #a57b5e !important; }

.rounded-2xl, .rounded-3xl, .rounded-lg { border-radius: 12px !important; }

.shadow-sm, .shadow-md, .shadow-lg,
.shadow-xl, .shadow-2xl { box-shadow: 0 8px 20px rgba(0,0,0,.10) !important; }

.border-omah-gold\/20, .border-omah-gold\/30, .border-omah-gold\/40,
.border-omah-green\/5, .border-omah-green\/10,
.border-omah-green\/20, .border-omah-green\/30 {
    border-color: rgba(200,155,123,.35) !important;
}

/* CTA buttons */
a[class*="bg-omah-green"],
button[class*="bg-omah-green"] {
    background-color: #c89b7b !important;
    color: #ffffff !important;
    border-radius: 8px !important;
}
a[class*="bg-omah-green"]:hover,
button[class*="bg-omah-green"]:hover { background-color: #a57b5e !important; }

a[class*="border-omah-green"] {
    border-color: #c89b7b !important;
    color: #c89b7b !important;
}
a[class*="border-omah-green"]:hover {
    background-color: #c89b7b !important;
    color: #ffffff !important;
}

.from-omah-green, .to-\[\#4a2f20\] {
    --tw-gradient-from: #121212 !important;
    --tw-gradient-to:   #121212 !important;
}
.from-omah-gold, .to-yellow-400 {
    --tw-gradient-from: #c89b7b !important;
    --tw-gradient-to:   #a57b5e !important;
}

/* ==========================================================
   MENU CARD — Tampilan seragam seperti referensi
   ========================================================== */

/* Pembatas border menu: beri ruang kanan-kiri 1rem di semua device */
.menu-page .border-t.border-omah-gold\/30,
.menu-page .flex.items-center.gap-4 > .h-px.bg-omah-gold {
    width: calc(100% - 2rem) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Pembatas border profile: beri ruang kanan-kiri 1rem di semua device */
.about-page .border-b.border-omah-gold\/20 {
    box-sizing: border-box !important;
    width: calc(100% - 2rem) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Jarak konten profile kanan-kiri 1rem di semua device */
.about-page > .max-w-7xl {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    box-sizing: border-box !important;
}

/* Card shell */
.card.shadow-sm {
    border-radius: 1.6rem !important;
    overflow: hidden !important;
    background: #f6f6f6 !important;
    border: 1.5px solid rgba(165, 123, 94, 0.45) !important;
    box-shadow: 0 10px 26px rgba(39, 24, 17, 0.12) !important;
    transition: transform 0.22s ease, box-shadow 0.22s ease !important;
    cursor: default;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.card.shadow-sm:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(165, 123, 94, 0.65) !important;
    box-shadow: 0 16px 34px rgba(39, 24, 17, 0.16) !important;
}

.card.shadow-sm.h-100 {
    display: flex !important;
    flex-direction: column !important;
}

/* Image area */
.card.shadow-sm > div:not([class]) {
    height: 300px !important;
    max-height: 300px !important;
    width: 100% !important;
}

.card.shadow-sm .card-img-top {
    object-fit: cover !important;
    height: 100% !important;
    width: 100% !important;
}

.coffee-menu-grid .card.shadow-sm .card-img-top {
    object-position: center bottom !important;
}

/* Samakan spacing card pada Hot/Ice Coffee dengan card menu lain */
.coffee-menu-grid .card.shadow-sm.h-100 {
    height: auto !important;
}

.coffee-menu-grid .card.shadow-sm .card-body .card-text.mt-auto,
.coffee-menu-grid .card.shadow-sm .card-body > div .card-text.mt-auto {
    margin-top: 0.85rem !important;
    padding-top: 0 !important;
}

/* No-image fallback: tetap seperti area foto */
.card.shadow-sm > div.d-flex.bg-light {
    height: 260px !important;
    max-height: 260px !important;
    min-height: 260px !important;
    background:
        radial-gradient(120% 120% at 80% 20%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 42%),
        linear-gradient(140deg, #6f3d26 0%, #3f1f14 58%, #2d140d 100%) !important;
    position: relative;
}

.card.shadow-sm > div.d-flex.bg-light::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0.03));
}

.card.shadow-sm > div.d-flex.bg-light .fa-3x {
    position: relative;
    z-index: 1;
    font-size: 2.6rem !important;
    color: #fff7ea !important;
    opacity: 0.95;
    text-shadow: 0 8px 14px rgba(0, 0, 0, 0.35);
}

.home-ig-embed {
    background: #fff;
    border: 0;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    width: 100%;
    padding: 0;
    margin: 0;
}

.home-tt-embed {
    max-width: 325px;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
}

.home-map-frame {
    border: 0;
    display: block;
}

.menu-card-media {
    height: 260px;
    width: 100%;
    overflow: hidden;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

.menu-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.menu-card-image-bottom {
    object-position: center bottom;
}

/* Menu page: full image tanpa crop + background blur */
.menu-page .menu-card-media {
    height: 260px !important;
    overflow: hidden !important;
    background: #e9ecef;
    position: relative;
    isolation: isolate;
}

.menu-page .menu-card-media::before {
    content: "";
    position: absolute;
    inset: -12px;
    background-image: var(--menu-card-bg-image);
    background-size: cover;
    background-position: center;
    filter: blur(14px) saturate(0.95);
    transform: scale(1.08);
    z-index: 0;
}

.menu-page .menu-card-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(17, 24, 39, 0.14), rgba(17, 24, 39, 0.06));
    z-index: 1;
}

.menu-page .card.shadow-sm .card-img-top,
.menu-page .menu-card-image {
    height: 100% !important;
    width: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    position: relative;
    z-index: 2;
}

/* Menu page: hindari ruang kosong berlebihan di body card */
.menu-page .card.shadow-sm .card-body.h-100,
.menu-page .card.shadow-sm .card-body > .h-100 {
    height: auto !important;
}

.menu-page .card.shadow-sm .card-body .card-text.mt-auto,
.menu-page .card.shadow-sm .card-body > div .card-text.mt-auto {
    margin-top: 0.85rem !important;
}

.menu-card-fallback {
    height: 260px;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

.menu-card-title {
    font-family: 'Playfair Display', serif;
    color: #2b2b2b;
    font-weight: bold;
    min-height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-card-desc {
    font-style: italic;
    color: #6b7280;
    font-size: 0.95rem;
    min-height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-card-desc-spacer {
    min-height: 2.5rem;
}

.menu-card-price {
    color: #bfa76a;
    font-weight: bold;
    font-size: 1.15rem;
    min-height: 2.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Body typography */
.card.shadow-sm .card-body {
    background: #f2f2f2 !important;
    padding: 2rem 1.5rem 1.7rem !important;
}

.card.shadow-sm .card-body.d-flex.flex-column,
.card.shadow-sm .card-body > div.d-flex.flex-column {
    justify-content: flex-start !important;
    gap: 0.55rem !important;
}

.card.shadow-sm .card-body .card-title,
.card.shadow-sm .card-body > div .card-title {
    min-height: 0 !important;
    margin-bottom: 0 !important;
    line-height: 1.35 !important;
    color: #2b2b2b !important;
}

.card.shadow-sm .card-body p.card-text,
.card.shadow-sm .card-body > div p.card-text {
    min-height: 0 !important;
    margin-bottom: 0 !important;
    line-height: 1.45 !important;
    color: #6d7680 !important;
}

.card.shadow-sm .card-body > div:not([class]),
.card.shadow-sm .card-body > div > div:not([class]) {
    display: none !important;
    min-height: 0 !important;
}

.card.shadow-sm .card-body .card-text.mt-auto,
.card.shadow-sm .card-body > div .card-text.mt-auto {
    margin-top: auto !important;
    padding-top: 0.75rem !important;
    margin-bottom: 0 !important;
    color: #b69958 !important;
    font-size: 2rem !important;
}

@media (max-width: 767px) {
    .card.shadow-sm > div:not([class]),
    .card.shadow-sm > div.d-flex.bg-light {
        height: 210px !important;
    }

    .card.shadow-sm .card-body {
        padding: 1.4rem 0.95rem 1.2rem !important;
    }

    .card.shadow-sm .card-body .card-text.mt-auto,
    .card.shadow-sm .card-body > div .card-text.mt-auto {
        font-size: 1.15rem !important;
    }
}

/* ==========================================================
   RESPONSIVE — Mobile first, 3 clean breakpoints
   ========================================================== */

/* ----------------------------------------------------------
   1. SEMUA LAYAR < 1024px — Tablet & HP
      Hero selalu column agar konten tidak gepeng
   ---------------------------------------------------------- */
@media (max-width: 1023px) {
    /* Hero stack column */
    body > header.relative {
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        min-height: auto !important;
    }

    /* Footer: kurangi gap besar */
    #footer .grid { gap: 2rem !important; }

    /* Hapus transform scale pada kartu featured tengah */
    .transform.scale-105 { transform: none !important; }
}

/* ----------------------------------------------------------
   2. TABLET: 768px – 1023px  (iPad Mini, iPad Air, dll)
   ---------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
    body > header.relative {
        padding: 4rem 5% !important;
        gap: 2rem !important;
    }

    /* Logo tampil kecil di tablet */
    body > header.relative .flex-1:last-child {
        max-width: 200px !important;
        align-self: center !important;
        display: block !important;
    }

    /* Tombol hero berdampingan, bisa wrap */
    body > header.relative .pt-4 {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 0.75rem !important;
        width: 100% !important;
    }
    body > header.relative .pt-4 a {
        flex: 1 1 160px !important;
        text-align: center !important;
        width: auto !important;
    }

    /* Hero h2 sedikit lebih kecil */
    body > header.relative h2 {
        font-size: clamp(1.8rem, 4vw, 2.8rem) !important;
    }

    /* Map lebih pendek di tablet */
    .h-\[400px\] { height: 300px !important; }

    /* Footer 3 kolom */
    #footer .lg\:grid-cols-5,
    #footer .grid.md\:grid-cols-2.lg\:grid-cols-5 {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    #footer .lg\:col-span-2 { grid-column: span 3 !important; }
}

/* ----------------------------------------------------------
   3. HP: max 767px — semua ukuran ponsel
   ---------------------------------------------------------- */
@media (max-width: 767px) {
    .card.shadow-sm,
    .card.shadow-md,
    .card.shadow-lg,
    .card.shadow-xl,
    .card.shadow-2xl {
        box-shadow: none !important;
    }

    .card.shadow-sm:hover,
    .card.shadow-md:hover,
    .card.shadow-lg:hover,
    .card.shadow-xl:hover,
    .card.shadow-2xl:hover {
        box-shadow: none !important;
    }

    /* Section padding */
    section {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Hero */
    body > header.relative {
        padding: 2.5rem 1rem !important;
        gap: 1.5rem !important;
    }
    /* Logo bulat di HP — tampilkan lebih kecil dan center */
    body > header.relative .flex-1:last-child {
        display: flex !important;
        justify-content: center !important;
        max-width: 180px !important;
        margin: 0 auto !important;
    }
    body > header.relative h2 {
        font-size: clamp(1.5rem, 7.5vw, 2.2rem) !important;
        padding: 10px 12px !important;
    }
    body > header.relative p { font-size: 0.95rem !important; }

    /* Tombol hero beranda: stack tapi tidak full width di HP */
    body > header.relative .pt-4 {
        flex-direction: column !important;
        width: 100% !important;
        gap: 0.75rem !important;
        align-items: flex-start !important;
    }
    body > header.relative .pt-4 a {
        display: inline-flex !important;
        width: min(100%, 13.5rem) !important;
        max-width: calc(100vw - 2rem) !important;
        text-align: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    /* Heading halaman dalam */
    h2.text-5xl, h3.text-5xl, .text-5xl.font-serif {
        font-size: clamp(1.6rem, 7vw, 2.2rem) !important;
        line-height: 1.2 !important;
    }
    h2.text-4xl, h3.text-4xl, .text-4xl.font-serif {
        font-size: clamp(1.35rem, 6vw, 1.85rem) !important;
        line-height: 1.25 !important;
    }
    h3.text-3xl, h4.text-3xl {
        font-size: clamp(1.1rem, 5vw, 1.5rem) !important;
    }

    /* Menu section gap saat stacked */
    #menu > div { gap: 2rem !important; }

    /* Map lebih pendek */
    .h-\[400px\] { height: 240px !important; }

    /* Grid produk & galeri: 2 kolom */
    .grid.grid-cols-2,
    .grid.grid-cols-1.md\:grid-cols-2,
    .grid.grid-cols-1.md\:grid-cols-3,
    .grid.grid-cols-1.md\:grid-cols-4,
    .grid.grid-cols-2.md\:grid-cols-2.lg\:grid-cols-3,
    .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3,
    .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.625rem !important;
    }

    /* Profile page (about): card harus sebaris/full di HP */
    .about-page .grid.grid-cols-2.md\:grid-cols-3,
    .about-page .grid.grid-cols-1.md\:grid-cols-2 {
        grid-template-columns: 1fr !important;
    }

    .about-page .col-span-2.mx-auto.md\:col-span-1 {
        grid-column: span 1 / span 1 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }

    /* Stats grid (reviews.php): 2 kolom */
    .grid.grid-cols-1.md\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }

    /* Kartu produk 2-col: kecilkan teks */
    .grid .rounded-3xl h4,
    .grid .rounded-2xl h4 { font-size: 0.875rem !important; }
    .grid .rounded-3xl p.text-sm,
    .grid .rounded-2xl p.text-sm { font-size: 0.72rem !important; line-height: 1.35 !important; }
    .grid .rounded-3xl .text-lg,
    .grid .rounded-2xl .text-lg { font-size: 0.82rem !important; }
    .grid .rounded-3xl.p-3, .grid .rounded-2xl.p-3 { padding: 0.5rem !important; }
    .grid .rounded-3xl.p-6, .grid .rounded-2xl.p-6 { padding: 0.75rem !important; }

    /* Table scroll */
    table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Social embeds: cegah overflow pada layar kecil */
    .ig-skeleton,
    .instagram-media,
    .tiktok-embed {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Footer: 1 kolom di HP kecil */
    #footer .lg\:grid-cols-5,
    #footer .grid.md\:grid-cols-2.lg\:grid-cols-5 {
        grid-template-columns: 1fr !important;
    }

    /* Cookie banner: tombol lebih nyaman disentuh di mobile */
    #cookieConsentBanner .cookie-actions {
        flex-direction: column;
    }

    #cookieBtnDecline,
    #cookieBtnAccept {
        min-height: 44px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

/* ----------------------------------------------------------
   4. HP KECIL: max 479px — iPhone SE, Galaxy S, dll
   ---------------------------------------------------------- */
@media (max-width: 479px) {
    section {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    body > header.relative {
        padding: 2rem 0.875rem !important;
    }
    .p-8  { padding: 0.875rem !important; }
    .p-10 { padding: 1rem !important; }

    /* Tinggi skeleton disesuaikan agar lebih pas di HP kecil */
    .ig-skeleton { min-height: 420px !important; }
}

/* ----------------------------------------------------------
   MENU UNGGULAN — Responsive Mobile
   ---------------------------------------------------------- */

/* 480px – 768px: 2 kolom proporsional */
@media (max-width: 768px) {
    .menu-page .card.shadow-sm.h-100 {
        margin-bottom: 1rem !important;
    }

    section[class$="-page"] {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .menu-page .grid.grid-cols-2.lg\:grid-cols-3 {
        box-sizing: border-box !important;
        width: calc(100% - 2rem) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .menu-page .menu-grid-hidden-mobile {
        display: none !important;
    }

    .menu-page .menu-bs-slide {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        box-sizing: border-box !important;
    }

    .menu-page .carousel-item > .menu-bs-slide > .card.shadow-sm {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .menu-page .menu-bs-indicators {
        margin-bottom: -0.2rem;
        gap: 0.4rem;
    }

    .menu-page .menu-bs-indicators [data-bs-target] {
        width: 0.42rem;
        height: 0.42rem;
        border-radius: 999px;
        border: 0;
        margin: 0;
        background-color: rgba(165, 123, 94, 0.35);
        opacity: 1;
        transition: all 0.2s ease;
    }

    .menu-page .menu-bs-indicators .active {
        width: 1.2rem;
        background-color: rgba(165, 123, 94, 0.95);
    }

    .menu-page .menu-bs-control {
        display: none !important;
    }

    .menu-page .menu-bs-carousel .carousel-item {
        transition: transform 0.28s ease-in-out !important;
    }

    .gallery-page .gallery-grid-hidden-mobile {
        display: none !important;
    }

    .gallery-page .gallery-bs-slide {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        box-sizing: border-box !important;
    }

    .gallery-page .gallery-bs-carousel {
        margin-bottom: 1rem;
        display: flex;
        flex-direction: column;
    }

    .gallery-page .gallery-bs-carousel .carousel-inner {
        order: 1;
    }

    .gallery-page .gallery-bs-indicators {
        order: 2;
        position: relative !important;
        inset: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        margin-top: 0.7rem !important;
        margin-bottom: 1rem !important;
        gap: 0.4rem;
    }

    .gallery-page .gallery-bs-indicators [data-bs-target] {
        width: 0.42rem;
        height: 0.42rem;
        border-radius: 999px;
        border: 0;
        margin: 0;
        background-color: rgba(165, 123, 94, 0.35);
        opacity: 1;
        transition: all 0.2s ease;
    }

    .gallery-page .gallery-bs-indicators .active {
        width: 1.2rem;
        background-color: rgba(165, 123, 94, 0.95);
    }

    .gallery-page .gallery-bs-control {
        display: none !important;
    }

    .gallery-page .gallery-bs-carousel .carousel-item {
        transition: transform 0.28s ease-in-out !important;
    }

    /* Grid 2 kolom dengan gap lebih besar dari default */
    .grid.grid-cols-2.lg\:grid-cols-3 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }

    /* Gambar: aspect-ratio mengikuti lebar kolom secara otomatis (tidak perlu height tetap) */
    /* Card body: kurangi padding agar teks lebih dekat ke gambar */
    .card.shadow-sm.h-100 .card-body {
        padding: 0.55rem 0.65rem !important;
    }

    /* Card title: kecilkan font & min-height */
    .card.shadow-sm.h-100 .card-title {
        font-size: 0.82rem !important;
        min-height: 1.4rem !important;
        margin-bottom: 0.1rem !important;
        line-height: 1.25 !important;
    }

    /* Card text (deskripsi & harga): kecilkan font & min-height */
    .card.shadow-sm.h-100 .card-text {
        font-size: 0.72rem !important;
        min-height: 1.2rem !important;
        margin-bottom: 0.1rem !important;
        line-height: 1.3 !important;
    }

    /* Tambahan: kurangi spasi kosong antar elemen card */
    .card.shadow-sm.h-100 .card-body > div {
        gap: 0.15rem !important;
    }
}

/* < 480px: 1 kolom penuh agar lebih enak dibaca */
@media (max-width: 480px) {
    .grid.grid-cols-2.lg\:grid-cols-3 {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* Gambar: aspect-ratio sudah proporsional, tidak perlu height tetap */
    /* Card body: padding sedikit lebih lega karena 1 kolom */
    .card.shadow-sm.h-100 .card-body {
        padding: 0.75rem 1rem !important;
    }

    /* Title: lebih besar karena ruang lebih lebar */
    .card.shadow-sm.h-100 .card-title {
        font-size: 1rem !important;
        min-height: 1.5rem !important;
        margin-bottom: 0.2rem !important;
    }

    /* Text: lebih besar karena ruang lebih lebar */
    .card.shadow-sm.h-100 .card-text {
        font-size: 0.85rem !important;
        min-height: 1.4rem !important;
        margin-bottom: 0.2rem !important;
    }
}

/* Beranda: jarak kanan-kiri 1rem dan tombol hero center di HP */
@media (max-width: 767px) {
    .menu-page .menu-search-form-actions {
        align-items: center !important;
        justify-content: center !important;
    }

    .menu-page .menu-search-form-actions > .menu-search-input {
        flex: 0 0 auto !important;
        width: 11.25rem !important;
        max-width: 11.25rem !important;
        margin-left: auto !important;
        margin-right: auto !important;
        min-height: 40px !important;
        font-size: 0.85rem !important;
        line-height: 1.25 !important;
    }

    .menu-page .menu-search-form-actions > .menu-search-input::placeholder {
        font-size: 0.85rem !important;
        line-height: 1.25 !important;
    }

    .menu-page .menu-search-form-actions > .menu-search-action-btn {
        flex: 0 0 auto !important;
        width: 10rem !important;
        max-width: 10rem !important;
        margin-left: auto !important;
        margin-right: auto !important;
        justify-content: center !important;
        min-height: 40px !important;
        font-size: 0.9rem !important;
    }

    .home-page > header,
    .home-page > section {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .home-page > header > .flex-1:first-child,
    .home-page > section > .max-w-7xl {
        width: calc(100% - 2rem) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    .home-page > header .pt-4 {
        align-items: center !important;
    }

    .home-page > header .pt-4 > a {
        width: min(100%, 13.5rem) !important;
        max-width: calc(100vw - 2rem) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        justify-content: center !important;
    }

    .home-page .home-follow-btn {
        width: min(100%, 13.5rem) !important;
        max-width: calc(100vw - 2rem) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        justify-content: center !important;
    }

    .home-page #location .bg-white.rounded-2xl {
        width: calc(100% - 2rem) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }
}

/* Services: pastikan layout mobile aktif di HP */
@media (max-width: 1024px) {
    .home-page .home-social-grid-hidden-mobile {
        display: none !important;
    }

    .home-page .home-social-bs-slide {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        box-sizing: border-box !important;
    }

    .home-page .home-social-bs-indicators {
        position: static;
        margin-top: 0.7rem;
        margin-bottom: 0.8rem;
        gap: 0.4rem;
    }

    .home-page .home-social-bs-indicators [data-bs-target] {
        width: 0.42rem;
        height: 0.42rem;
        border-radius: 999px;
        border: 0;
        margin: 0;
        background-color: rgba(165, 123, 94, 0.35);
        opacity: 1;
        transition: all 0.2s ease;
    }

    .home-page .home-social-bs-indicators .active {
        width: 1.2rem;
        background-color: rgba(165, 123, 94, 0.95);
    }

    .home-page .home-social-bs-control {
        display: none !important;
    }

    .home-page .home-social-bs-carousel .carousel-item {
        transition: transform 0.28s ease-in-out !important;
        touch-action: pan-y !important;
    }

    .home-page .home-social-bs-carousel,
    .home-page .home-social-bs-slide {
        touch-action: pan-y !important;
    }

    /* Prioritaskan gesture geser slide pada area embed di mobile */
    .home-page .home-social-bs-carousel iframe {
        pointer-events: none !important;
    }

    .services-page {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .services-options-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    .services-page .services-content-wrap {
        width: calc(100% - 2rem) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    .reviews-page {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .reviews-page .reviews-content-wrap {
        width: calc(100% - 2rem) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    .reviews-page .reviews-testimonial-grid-hidden-mobile {
        display: none !important;
    }

    .reviews-page .reviews-bs-slide {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        box-sizing: border-box !important;
    }

    .reviews-page .reviews-bs-indicators {
        position: static;
        margin-top: 0.7rem;
        margin-bottom: 0.8rem;
        gap: 0.44rem;
        justify-content: center;
        display: flex !important;
        z-index: 3;
    }

    .reviews-page .reviews-bs-indicators [data-bs-target] {
        width: 0.52rem;
        height: 0.52rem;
        border-radius: 999px;
        border: 0;
        margin: 0;
        display: block;
        flex: 0 0 auto;
        background-color: rgba(165, 123, 94, 0.62);
        opacity: 1;
        transition: all 0.2s ease;
    }

    .reviews-page .reviews-bs-indicators .active {
        width: 1.56rem;
        height: 0.52rem;
        background-color: rgba(165, 123, 94, 0.95);
    }

    .reviews-page .reviews-bs-control {
        display: none !important;
    }

    .reviews-page .reviews-bs-carousel .carousel-item {
        transition: transform 0.28s ease-in-out !important;
    }
}

.reviews-page .reviews-testimonial-grid-hidden-mobile {
    display: none !important;
}

.reviews-page .reviews-bs-carousel {
    position: relative;
    padding-bottom: 1.4rem;
}

.reviews-page .reviews-bs-slide {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

.reviews-page .reviews-bs-slide-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    align-items: stretch;
}

.reviews-page .reviews-bs-slide-grid .reviews-testimonial-card {
    height: 100%;
}

/* Review indicators: samakan gaya dengan menu HP (dot + active pill) */
.reviews-page .reviews-bs-indicators {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: max-content;
    max-width: calc(100% - 2rem);
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 0.2rem;
    gap: 0.4rem;
    justify-content: flex-start;
    display: flex !important;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    z-index: 3;
}

.reviews-page .reviews-bs-indicators::-webkit-scrollbar {
    display: none;
}

.reviews-page .reviews-bs-indicators [data-bs-target] {
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 999px;
    border: 0;
    margin: 0;
    display: block;
    flex: 0 0 auto;
    background-color: rgba(165, 123, 94, 0.35);
    opacity: 1;
    transition: all 0.2s ease;
}

.reviews-page .reviews-bs-indicators .active {
    width: 1.2rem;
    height: 0.42rem;
    background-color: rgba(165, 123, 94, 0.95);
}

.reviews-page .reviews-bs-control {
    width: 2.5rem;
}

.reviews-page .reviews-bs-control .carousel-control-prev-icon,
.reviews-page .reviews-bs-control .carousel-control-next-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background-color: rgba(74, 47, 32, 0.65);
    background-size: 52% 52%;
}

@media (max-width: 1024px) {
    .reviews-page .reviews-bs-slide-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .reviews-page .reviews-bs-control {
        display: none !important;
    }

}

/* Review desktop: 3 kartu horizontal, tengah lebih dominan */
@media (min-width: 1025px) {
    .reviews-page .reviews-testimonial-grid {
        grid-template-columns: 0.9fr 1.2fr 0.9fr !important;
        gap: 1.2rem !important;
        align-items: stretch;
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }

    .reviews-page .reviews-testimonial-card {
        height: 100%;
        transform: scale(0.92);
        opacity: 0.9;
        transition: transform 0.28s ease, opacity 0.28s ease, box-shadow 0.28s ease;
    }

    .reviews-page .reviews-testimonial-card--focus {
        transform: scale(1);
        opacity: 1;
        box-shadow: 0 16px 34px rgba(39, 24, 17, 0.16) !important;
        z-index: 2;
        position: relative;
    }

    .reviews-page .reviews-count-1 {
        grid-template-columns: minmax(0, 1fr) !important;
        max-width: 860px;
    }

    .reviews-page .reviews-count-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        max-width: 980px;
    }
}