/*
Theme Name: Info Cibinong Media Warga
Author: ViteStory
Description: Tema kustom untuk portal info dan barter barang warga Cibinong.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* --- Dasar Desain --- */
body {
    font-family: 'Lato', 'Segoe UI', sans-serif !important;
    background-color: #F0F2F5;
    color: #333;
    margin: 0;
    line-height: 1.6;
}
.h-\[60px\] {
    height: 60px;
    top: -9px!important;
}
div#nav-menu {
    font-size: 15px;
    font-weight: bold;
}
div#mega-menu {
    z-index: 12345;
}
.pt-8.px-6.pb-6.flex.flex-col.h-full.min-h-max.relative {
    height: 1px;
    padding: 1px 20px;
}
.flex.flex-col.gap-2.mb-auto {
    gap: 0px;
}
.flex.md\:grid.md\:grid-cols-3.lg\:grid-cols-6.gap-\[1px\].overflow-x-auto.md\:overflow-visible.custom-hide-scrollbar.relative.items-stretch {
    padding: 0px;
}
header#main-header {
    background-color: #ffffff;
    z-index: 999;
}
.fixed.inset-0.z-\[9999\].flex.items-center.justify-center.p-4 {
    padding: 0px;
    margin: 0px;
}
.relative.bg-gradient-to-r.from-red-600.to-orange-600.p-8.lg\:p-12.text-white.overflow-hidden.shadow-lg {
    color: #000000;
}

p.text-sm.font-medium.text-white\/90.relative.z-10 {
    color: #9d9d9d;
}
/* Tambahkan ini di dalam <style> */
.weather-widget {
    /* ... kode lama tetap ... */
    transition: width 0.4s ease, opacity 0.5s ease, transform 0.5s ease;
    opacity: 1;
    transform: translateY(0);
}
.mx-auto.px-4.md\:px-10.py-10.md\:py-16 {
    max-width: 1100px;
}
.weather-widget.hidden {
    opacity: 0;
    transform: translateY(100px); /* Geser ke bawah sedikit saat menghilang */
    pointer-events: none; /* Agar tidak bisa diklik saat tersembunyi */
}
.weather-widget {
    left: 20px!important;
}
h2.text-2xl.font-black.text-gray-900.tracking-tight {
    font-size: 34px;
    color: #007066;
}
h3.font-bold.text-white.text-\[16px\].md\:text-\[18px\].leading-\[1\.3\].mb-3.line-clamp-2.drop-shadow-md {
    font-size: 13px;
}
span.text-\[12px\].font-semibold.drop-shadow-md.line-clamp-1 {
    font-size: 11px;
    font-weight: 400;
    color: #04ab9c;
}
div#weather-widget {
    background: linear-gradient(237deg, #f9c202, #b40101)!important;
}
div#ad-drawer {
    background-size: cover!important;
}
body.bg-gray-50.m-0.p-0.pt-\[115px\] {
    background-color: #ffffff;
}
.mb-8.w-full.rounded-2xl.overflow-hidden.shadow-sm.border.border-gray-100 {
    border: none;
    box-shadow: none;
}
.slider-container {
    overflow: hidden;
    position: relative;
    height: 330px!important;
}
img.w-full.h-40.sm\:h-56.md\:h-72.object-cover.lazy.entered.loaded {
    height: auto!important;
    width: 100%!important;
}
/* Pastikan popup media WordPress selalu di atas modal custom Anda */
.media-modal { z-index: 99999 !important; }
.media-modal-backdrop { z-index: 99990 !important; }
section#slider-container {
    display: none;
}
.flex.items-center.gap-6.shrink-0.relative {
    gap: 1px;
}
.w-20.h-20.rounded-full.border-2.border-dashed.border-orange-300.p-1.relative.cursor-pointer.transition-all.duration-300.group-hover\:border-orange-500.group-hover\:scale-105.shadow-sm.group-hover\:shadow-md {
    width: 65px;
    height: 65px;
}
a.bg-\[\#006d5b\].hover\:bg-\[\#004a3f\].text-white.px-5.py-2\.5.rounded-full.flex.items-center.gap-2.font-bold.transition-colors.text-\[14px\] {
    padding: 6px 10px;
        background-color: #007066;
}
div#searchWrapper {
    padding: 0px;
    height: 50px;
}
.post-content-popup p {
    margin-bottom: 1.2rem;
    color: #4b5563;
    line-height: 24px;
    font-size: 14px;
}
.to-black\/80 {
    --tw-gradient-to: rgb(0 0 0 / ) var(--tw-gradient-to-position)!important;
}
.grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3.gap-8 {
    padding: 5px;
    gap: 6px;
}
.flex.items-center.gap-1.cursor-pointer.text-\[\#333\].group-hover\:text-\[\#006d5b\].transition-colors.h-full.relative {
    font-size: 14px;
}
.hidden.lg\:flex.flex-1.justify-center.items-center.gap-8.text-\[15px\].font-bold.h-full.no-scrollbar.whitespace-nowrap {
    gap: 8px;
}
section.bg-gradient-to-b.from-kkn-dark.to-kkn-mustard.pt-16.pb-24.relative.z-10.border-b-4.border-kkn-dark{
    background: url(https://sas.vitestory.com/wp-content/uploads/2026/07/ChatGPT-Image-Jul-17-2026-11_11_45-AM-1-1.png);
    height:583px;;
    
}
article.single-berita-article.w-\[90\%\].md\:w-\[80\%\].max-w-none.mx-auto.mb-20.pb-10.border-b-2.border-gray-100 {
    max-width: 1000px;
    margin: auto;
    width: 800px;
}
.text-gray-800.leading-\[1\.8\].text-\[17px\].md\:text-\[18px\].space-y-6.prose.prose-lg.max-w-none.prose-headings\:font-black.prose-headings\:text-gray-900.prose-p\:font-light.prose-p\:mb-6.prose-a\:text-\[\#0d241c\].prose-a\:font-bold.hover\:prose-a\:text-\[\#d4af37\].prose-img\:rounded-xl.prose-img\:w-full.prose-img\:my-6.prose-blockquote\:border-l-4.prose-blockquote\:border-\[\#d4af37\].prose-blockquote\:bg-gray-50.prose-blockquote\:p-4.prose-blockquote\:italic {
    font-size: 15px;
    line-height: 21px;
    font-weight: 500;
}
.js-fast-popup.relative.w-full.aspect-\[4\/5\].rounded-\[2rem\].overflow-hidden.bg-slate-900.shadow-sm.border.border-slate-200\/50.group.cursor-pointer.transition-all.duration-500.ease-out.hover\:-translate-y-2.hover\:shadow-2xl.hover\:shadow-orange-500\/10.hover\:border-orange-500\/30 {
    border: none;
    border-radius: 10px;
}
.hidden.lg\:flex.flex-1.justify-center.items-center.gap-8.text-\[15px\].font-bold.text-\[\#333\].h-full.no-scrollbar.whitespace-nowrap {
    gap: 10px;
}
.col-span-full.text-center.wrap80 {
    margin: auto;
    width: 80%;
}
div#postGrid {
    gap: 13px;
}
.absolute.inset-0.bg-gradient-to-b.from-black\/60.via-brand-green\/60.to-black\/80.z-0 {
    background: none;
}
.w-20.h-20.md\:w-24.md\:h-24.rounded-full.bg-\[\#1e293b\].flex.items-center.justify-center.text-white.mb-4.group-hover\:scale-105.transition-all.duration-300.shadow-sm {
    background-color: #007066;
}
.w-24.h-24.md\:w-28.md\:h-28.rounded-full.bg-\[\#f6f6f6\].flex.items-center.justify-center.mb-4.group-hover\:scale-105.transition-transform.duration-300.overflow-hidden.relative.border.border-gray-100.shadow-sm {
    border: 12px solid #f6f6f6;
    width: 111px;
    height: 111px;
}
.to-\[\#256ea3\] {
    --tw-gradient-to: #017167 var(--tw-gradient-to-position)!important;
}
.from-\[\#0F4C81\] {
    --tw-gradient-from: #368079 var(--tw-gradient-from-position)!important;
}
div#popupContent {
    background-color: #007066;
}
.bg-\[\#eb2a54\].text-white.px-5.py-4.flex.justify-between.items-center.rounded-tr-none.md\:rounded-tr-xl.flex-shrink-0 {
    background-color: #007066;
}
.w-24.h-24.md\:w-28.md\:h-28.rounded-full.bg-\[\#c93b2e\].flex.items-center.justify-center.text-white.font-bold.text-xl.md\:text-2xl.mb-4.group-hover\:scale-105.transition-transform.duration-300.shadow-sm {
  background-color: #007066;
}
p.text-gray-500.text-\[10px\].md\:text-xs.uppercase.tracking-widest.mb-3.font-semibold {
    color: #51b4ab;
    font-size: 10px;
    letter-spacing: 0px;
}
a.group\/link.flex.flex-col.justify-start.border-b.border-gray-50.pb-2.hover\:border-\[\#006d5b\].transition-colors {
    padding-bottom: 0px;
}
button#mSubmitComment {
    background-color: #007066;
}

h2.text-3xl.md\:text-4xl.lg\:text-5xl.font-bold.text-black.tracking-tight.flex.items-center {
    color: #007066;
    font-size: 34px;
}
div#searchOverlay {
    background-color: #001715d1;
}
.p-4.md\:p-5.border-b.border-gray-800.flex.justify-between.items-center.sticky.top-0.z-10.bg-\[\#1a1c23\] {
    background-color: #04645b;
}
section.relative.w-full.h-\[450px\].md\:h-\[550px\].bg-cover.bg-center.flex.flex-col.items-center.justify-center.px-4.overflow-visible.lazy.entered.loaded {
    height: 420px;
}
.wrap-auto.max-w-\[1200px\].mx-auto.px-4.py-8 {
    margin: auto;
    max-width: 70%;
}
section.relative.w-full.h-\[500px\].bg-brand-green.flex.flex-col.items-center.justify-center.overflow-hidden.px-4 {
    background: url(https://sas.vitestory.com/wp-content/uploads/2026/06/Group-423-2.png);
    overflow: hidden;
    height: 385px;
    background-color: #ffffff;
}
.wrap-auto.max-w-\[1200px\].mx-auto.px-4.py-8 {
    padding-bottom: 0px;
}
.flex.gap-4.md\:gap-5.mb-10.overflow-x-auto.custom-scrollbar.pb-6.pt-2.px-2.-mx-2 {
    padding: 0px;
    margin: 0px;
}
button.flex.items-center.gap-3.bg-white.p-1\.5.pr-4.rounded-full.border.border-gray-200.shadow-sm.hover\:border-rose-300.transition-all.cursor-pointer {
    padding: 0px;
}
section#katalog-section {
    max-width: 1100px;
    margin: auto;
}
div#instaModalContent {
    width: 1180px!im;
}
h2.text-slate-800.text-2xl.md\:text-3xl.font-extrabold.tracking-tight {
    color: #007066;
}
a.custom-logo-link img {
    width: 100%;
    height:30px;
}
a.hover\:text-gray-300 {
    font-size: 12px;
    font-weight: 400;
}
div#top-bar {
    background-color: #007066;
}
section#slider-container {
    padding: 22px 0px;
}
button.flex.items-center.gap-3.bg-white.p-1\.5.pr-4.rounded-full.border.border-gray-200.shadow-sm.hover\:border-rose-300.transition-all.cursor-pointer {
    background-color: #ee2940;
    border: none;
}
p.text-sm.font-black.text-gray-900.leading-tight.flex.items-center.gap-1 {
    color: #ffffff;
}

p.text-\[9px\].font-black.text-gray-400.uppercase.tracking-widest.leading-none {
    color: #ffffff;
    font-weight: 400;
}
div#bottom-nav {}div#bottom-nav {
    padding: 0px 20px;
}
     /* Custom scrollbar for the menu */
        #mega-menu {
            transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
        }
        .hide-menu {
            opacity: 0;
            visibility: hidden;
        }
        .show-menu {
            opacity: 1;
            visibility: visible;
        }
        
        /* Ensures the hover area is continuous so the menu doesn't close easily */
        .group-hover-menu::before {
            content: '';
            position: absolute;
            top: -20px;
            left: 0;
            right: 0;
            height: 20px;
        }

        /* Prevent text selection during slide dragging */
        .slider-track, #product-track {
            user-select: none;
            -webkit-user-select: none;
            will-change: transform;
        }

        /* Custom Star Clip Path for floating badge */
        .star-badge {
            clip-path: polygon(50% 0%, 65% 22%, 100% 28%, 78% 54%, 83% 90%, 50% 75%, 17% 90%, 22% 54%, 0% 28%, 35% 22%);
        }


















.space {
    height: 60px;
}
.max-w-7xl.mx-auto.px-4.md\:px-8.py-8.w-full {
    padding: 41px 0px;
    margin: 0px;
    background-color: #ffffff;
}
.wrap-auto {
    max-width: 70%;
    margin: auto;
}

.set-bg {
    background-color: #ffffff;
    max-width: 100%;
}
.max-w-5xl.mx-auto {
    max-width: 100%;
}
.max-w-12xl.mx-auto {
    max-width: 70%;
}
.flex.flex-wrap.items-center.justify-between.border-b.border-gray-200.pb-4.mb-8.gap-4 {
    background-color: #ffffff;
}
.max-w-5xl.mx-auto.p-6 {
    padding: 0px;
}
.flex.gap-5.mb-10.overflow-x-auto.no-scrollbar.pb-4 {
    background-color: #ffffff;
}
.flex.gap-6.border-b.border-gray-200.mb-8 {
    display: block;
    background-color: #ffffff;
}
.flex.gap-5.mb-10.overflow-x-auto.no-scrollbar.pb-4 {
    margin: 0px;
    padding-bottom: 30px;
}

aside#sidebar {
    z-index: 123;
}
.w-20.h-20.rounded-full.border-2.border-rose-500.p-1.cursor-pointer.transition-all.duration-300.group-hover\:scale-110.group-hover\:rotate-3.shadow-sm {
    padding: 0px;
    margin: 0px;
}
.h-\[72px\].md\:h-\[88px\] {
    height: 20px;
}
div#modal-ulasan {
    z-index: 123;
}
h2.text-\[\#059669\].text-3xl.md\:text-4xl.font-black.mb-8.tracking-tight {
        font-size: 1.6rem;
        margin-bottom: 0px;
    color: #ee2940;
}
header#main-header {
    background-color: #ffffff;
}
.flex.justify-between.md\:justify-end.items-center.gap-4.mb-8.md\:mb-12 {
    margin-bottom: 0px;
}
.p-6.flex.flex-col.flex-1 {
    padding-bottom: 0px;
}
.overflow-x-auto {
    overflow-x: auto;
    padding-top: 12px;
}
.border-orange-500 {
    border-color: rgb(238 41 64)!important;
}
.w-20.h-20.rounded-full.border-2.border-dashed.border-rose-400.p-1.relative.cursor-pointer.transition-all.group-hover\:border-rose-600 {
    width: 65px;
    height: 65px;
}
.bg-orange-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(255 241 242 / var(--tw-bg-opacity, 1))!important;
}
li.flex.items-center.px-0.py-3.text-orange-500.bg-orange-50.cursor-pointer.border-r-4.border-orange-500.justify-center.sidebar-link-item {
    color: #ee2940;
}
.w-20.h-20.rounded-full.border-2.border-rose-500.p-1.cursor-pointer.transition-all.duration-300.group-hover\:scale-110.group-hover\:rotate-3.shadow-sm {
    width: 50px;
    height:50px;
}
.overflow-hidden {
    overflow: auto!important;
}
h1.text-3xl.font-bold.mb-8 {
    margin: 0px;
    padding-bottom: 25px;
}
main.flex-1.h-screen.overflow-y-auto.p-4.md\:p-8.main-content-responsive.no-scrollbar.wrap-container .max-w-4xl {
    width: 100%!important;
    padding: 0px 30px!important;
}
section.py-10.px-4.md\:px-10.bg-none {
    padding: 0px!important;
}
.max-w-4xl {
    max-width: 100%;
    padding: 0px 30px;
}
.flex.items-center.justify-between.mt-6.pt-4.border-t.border-gray-50.card-style {
    padding: 0px !important;
    margin: 0px;
}
.grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4.gap-6.w-full {
    grid-template-columns: repeat(4, minmax(0, 1fr))!important;
}
.flex.gap-4.mb-10.overflow-x-auto.no-scrollbar.pb-2 {
    margin: 0px;
}
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

img { max-width: 100%; height: auto; }
a { text-decoration: none; transition: 0.3s; }

/* --- Skema Warna Utama --- */
:root {
    --teal-bg: #00897b; /* Hijau Teal dari referensi gambar */
    --gold: #D4AF37;   /* Warna Emas kustom */
    --gold-hover: #f1c40f;
    --dark-grey: #444;
}

/* --- Helper Class --- */
.text-teal { color: var(--teal-bg); }
.text-gold { color: var(--gold); }
.btn-gold {
    background-color: var(--gold);
    color: #000;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
    display: inline-block;
}
.btn-gold:hover { background-color: var(--gold-hover); }

/* --- CSS untuk Top Bar & Header Utama --- */
.site-header { width: 100%; position: relative; z-index: 100; }

.top-bar {
    background: var(--teal-bg);
    color: #fff;
    padding: 10px 0;
    font-size: 14px;
}

.top-bar .flex-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 15px;
}

.top-bar .flex-container a { color: #fff; opacity: 0.8; }
.top-bar .flex-container a:hover { opacity: 1; }

.main-header {
    background: #fff;
    padding: 15px 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.main-header .flex-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Mengambil gaya Logo 'b insta' dari referensi */
.logo { font-size: 24px; }
.logo-icon-bg {
    background-color: var(--teal-bg);
    padding: 5px 10px;
    border-radius: 10px;
    margin-right: 8px;
    color: #fff;
}
.logo-icon { /* Ikon Lokasi */ }
.logo strong { color: #000; }

/* Menyesuaikan Navigasi Utama */
.menu-list { list-style: none; display: flex; gap: 30px; margin: 0; }
.menu-list a { color: var(--dark-grey); font-weight: 500; font-size: 16px; }
.menu-list a:hover { color: var(--teal-bg); }
.menu-list a.active { color: var(--teal-bg); font-weight: 700; border-bottom: 3px solid var(--teal-bg); padding-bottom: 25px; }

/* User Actions & Keranjang (Badge 12) */
.user-actions { display: flex; align-items: center; gap: 20px; }
.points-basket { position: relative; font-size: 22px; color: #555; }
.badge {
    position: absolute;
    top: -8px;
    right: -10px;
    background: var(--teal-bg);
    color: #fff;
    font-size: 11px;
    padding: 3px 6px;
    border-radius: 50%;
}
.user-profile { display: flex; align-items: center; gap: 8px; }
.avatar-fallback { font-size: 24px; color: #aaa; }
.user-name { font-weight: 600; color: #333; }



/* LOGIN */

.lokasiku-auth-container {
    display: flex;
    min-height: 100vh;
    font-family: 'Lato', sans-serif;
}

/* Bagian Kiri (Visual) */
.auth-visual {
    flex: 1;
    background: linear-gradient(135deg, #ff9a8b 0%, #ff6a88 55%, #ff99ac 100%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 60px;
    color: #fff;
    border-radius: 0 20px 20px 0;
}

.auth-visual h2 {
    font-size: 42px;
    font-weight: 900;
    line-height: 1.2;
}

/* Bagian Kanan (Form) */
.auth-form-section {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: #fff;
}

.form-wrapper {
    width: 100%;
    max-width: 400px;
}

.form-wrapper h1 {
    font-size: 32px;
    margin-bottom: 10px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
    font-size: 14px;
}

.form-group input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
}

.btn-auth {
    width: 100%;
    padding: 14px;
    background: #111;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    transition: 0.3s;
}

.btn-auth:hover {
    background: #333;
}

/* Posisi Input Password */
.password-wrapper {
    position: relative;
}

.toggle-password {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #888;
    transition: 0.3s;
    font-size: 14px;
}

.toggle-password:hover {
    color: #ff6a88;
}

/* Custom Smooth Transition Fade In Up */
.lokasiku-animate-up {
    animation: lokasikuFadeUp 1s cubic-bezier(0.23, 1, 0.32, 1) both;
}

@keyframes lokasikuFadeUp {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Penyesuaian Input agar tidak tertabrak icon */
.form-group input[type="password"], 
.form-group input[type="text"]#reg_password {
    padding-right: 45px;
}

==============================================================================================
/* Responsive */
@media (max-width: 768px) {
    .auth-visual { display: none; }

}


/* LOGIN */




/* Penyesuaian Galeri */
@media (max-width: 768px) {
    .mamikos-gallery-grid {
        display: block !important; /* Ubah grid menjadi blok biasa di mobile */
        height: 300px; /* Tentukan tinggi tetap untuk foto tunggal mobile */
        border-radius: 0; /* Full width di mobile biasanya lebih bagus */
        margin-left: -1rem; /* Sesuaikan dengan padding kontainer Anda */
        margin-right: -1rem;
    }
    
    .gallery-main-img {
        height: 100%;
        width: 100%;
    }

    /* Memastikan modal tidak tembus scroll ke body */
    [x-show="openModal"] {
        touch-action: none;
    }
}

/* Memastikan elemen Alpine.js tidak kedip saat loading */
[x-cloak] { display: none !important; }

/* Update pada bagian UI/UX REFINEMENT */
.overflow-hidden { 
    overflow: hidden !important; /* Memastikan tidak ada scrollbar saat hover/zoom */
}

/* Tambahkan ini untuk menghilangkan scrollbar secara paksa di semua browser */
article .h-56 {
    overflow: hidden !important;
    position: relative;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;     /* Firefox */
}

article .h-56::-webkit-scrollbar {
    display: none;             /* Chrome, Safari, Opera */
}

/* Pastikan transisi scale tidak merusak layout */
.group-hover\:scale-110 {
    transform: scale(1.1);
}



.modal-content.relative.bg-white.w-full.max-w-md.rounded-3xl.shadow-2xl.overflow-hidden.z-10.p-6.md\:p-8.scale-100.opacity-100 {
    z-index: 1234;
}

span#modal-post-author {
    letter-spacing: 0px;
}







/* --- RESPONSIVE BREAKPOINTS --- */

/* 1. Mobile Kecil (Smartphone < 480px) */

@media (max-width: 480px) {

    button#floating-btn {
        display: none;
    width: 40px;
    height: 40px;
    bottom: 230px;
}
sup {
    font-size: 0.5rem !important;
}
i#circle-icon {
    display: none;
}
.circle-loc {
    display: none;
}
div#weather-widget-container {
    bottom: 178px;

}
.weather-circle {
    width: 40px!important;;
    height: 40px!important;;
}
.circle-temp {
    font-size: 1rem!important;
    font-weight: bold;
    line-height: 1!important;
    margin-bottom:0px!important;
}

    .wrap-auto.max-w-\[1200px\].mx-auto.px-4.py-8 {
    max-width: 100%!important;
    padding: 15px 7px!important;
}

.w-20.h-20.rounded-full.p-\[3px\].bg-gradient-to-tr.from-amber-400.via-orange-500.to-rose-500.transition-all.duration-300.group-hover\:scale-105.shadow-sm.group-hover\:shadow-lg.group-hover\:shadow-orange-500\/20 {
    width: 65px;
    height: 65px;
}

.gap-4 {
    gap: 0.4rem!important;
}

.text-3xl {
    font-size: 1.2rem!important;
    font-weight: 600!important;
}

.text-\[10px\] {
    font-size: 0.7rem!important;
    font-weight: 600 !important;
}



.text-\[\#059669\] {
    color: rgb(55 55 55) !important;
}
.pb-2 {
    padding-bottom: 1rem!important;
}
.gap-8 {
    gap: 1rem!important;
}

}

/* 2. Mobile Standar & Large (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {

   
}

/* 3. Tablet & Kecil Laptop (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
   
}

/* 4. Desktop Standar (1025px ke atas) */
@media (min-width: 1025px) {
   
}

/* Global Utility untuk Main Content agar tidak tertutup Bottom Nav di Mobile */
@media (max-width: 768px) {
   
}