:root {
            --sidebar-width: 220px;
            --sidebar-bg: #553216;
            --sidebar-hover: #EBDED5;
            --sidebar-active: #EBDED5;
            --sidebar-text: #EBDED5;
            --sidebar-text-active: #553216;
            --topbar-height: 60px;

            --card-dark: #553216;
            --text-btn: #ffffff;
            --bg-landing: #e8d9cf;
            --df-bg-creamy: #EBDED5;
            --df-bg-light: #C19D63;
            --df-brown-dark: #553216;
            --df-brown-medium: #8C6E57;
            --df-brown-soft: #1a1410;   
        }

        [data-bs-theme="dark"] {
            --sidebar-bg: #2a1a0c;
            --sidebar-hover: #3d2818;
            --sidebar-active: #3d2818;
            --sidebar-text: #EBDED5;
            --sidebar-text-active: #EBDED5;
            
            --card-dark: #3d2818;
            --text-btn: #1a1410;
            --bg-landing: #502f14;
            --df-bg-creamy: #3d2818;
            --df-bg-light: #C19D63;
            --df-brown-dark: #EBDED5;
            --df-brown-medium: #a68a6f;
            --df-brown-soft: #EBDED5;
        }

        [data-bs-theme="dark"] #topbar {
            background: #1e1712;
            border-bottom-color: #3d2818;
        }

        .card-stat-omzet   { 
            background-color: #5C7A99;
            color: white; 
        }
        .card-stat-sukses  { 
            background-color: #5F7A52;
            color: white;
        }
        .card-stat-batal   { 
            background-color: #A85C4D;
            color: white;
        } 
            
        .bg-mode-dark {
            background-color: var(--text-btn);
            color: var(--df-brown-soft)

        }
        .table-top th{
            background-color: var(--text-btn);
        }
        .btn-mode-dark{
            background-color: #e2d7cf !important; /* Warna krem kalem */
            color: #4a2c11 !important; /* Teks cokelat tua */
            border: 1px solid #c7b9ad !important;
        }  
        .teks-ubah{
            color: var(--df-brown-dark)
        }
        h1,
        .fw-bold{
            color: var(--df-brown-dark);
        }



        /* ── PENGATURAN LAYOUT UTAMA ── */
        body {
            background-color: var(--df-bg-creamy);
            font-family: 'Manrope', sans-serif;
        }
        .nav-link-manajemen{
            color: var(--df-bg-creamy) !important;
            font-weight: 600;
            font-size: 0.9rem;
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }
        /* ── Sidebar ── */
        #sidebar {
            position: fixed;
            top: 0; left: 0;
            width: var(--sidebar-width);
            height: 100vh;
            background: var(--sidebar-bg);
            display: flex;
            flex-direction: column;
            z-index: 1000;
            overflow-y: auto;
        }
        #sidebar .nav-link {
            display: block !important;           /* Wajib! Biar bentuknya kotak penuh, gak numpuk */
            padding: 12px 20px !important;       /* Wajib! Reset jarak agar rapi */
            color: rgba(255, 255, 255, 0.7) !important; /* Warna teks putih transparan */
            font-weight: 500 !important;
            border-radius: 0 !important;
            text-transform: capitalize !important; /* Membatalkan huruf besar semua dari landing page */
            margin-bottom: 2px !important;
        }

        #sidebar .nav-link i {
            color: rgba(255, 255, 255, 0.7) !important; /* Icon juga putih transparan */
            margin-right: 10px !important;
            font-size: 1.1rem !important;
        }

        /* 2. Kondisi ACTIVE (Saat Menu Diklik / Halaman Terbuka) */
        #sidebar .nav-link.active {
            background-color: var(--df-bg-creamy) !important; /* Kotak jadi krem */
            color: var(--df-brown-dark) !important;           /* Teks jadi cokelat tua */
            font-weight: 700 !important;                      /* Teks tebal */
            border-left: 4px solid var(--df-brown-dark) !important; /* Garis tepi estetik */
        }

        #sidebar .nav-link.active i {
            color: var(--df-brown-dark) !important;           /* Icon jadi cokelat tua */
        }

        /* 3. Kondisi HOVER (Saat Mouse Lewat) */
        #sidebar .nav-link:hover:not(.active) {
            color: #ffffff !important;                        /* Teks putih terang */
            background-color: rgba(255, 255, 255, 0.1) !important; /* Background agak terang dikit */
        }

        #sidebar .nav-link:hover:not(.active) i {
            color: #ffffff !important;
        }

        .sidebar-brand {
            padding: 15px 20px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            height: var(--topbar-height); /* Menyamakan tinggi dengan topbar sebelah kanan */
        }

        .sidebar-brand img {
            max-width: 100%;
            max-height: 60px; /* Membatasi tinggi maksimal logo agar pas dan proporsional */
            object-fit: contain;
        }

        .sidebar-brand span {
            height: 90px; 
            object-fit: contain;
            transition: height 0.3s ease;
        }

        .sidebar-nav {
            padding: 12px 0;
            flex: 1;
        }

        .sidebar-label {
            font-size: 10px;
            font-weight: 600;
            letter-spacing: 1px;
            text-transform: uppercase;
            color: #C19D63;
            padding: 12px 20px 4px;
        }

        .sidebar-nav .nav-link {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 9px 20px;
            color: var(--sidebar-text);
            font-size: 0.875rem;
            border-radius: 0;
            transition: all 0.15s;
            text-decoration: none;
        }

        .sidebar-nav .nav-link:hover {
            background: var(--sidebar-hover);
            color: var(--sidebar-text-active);
        }

        .sidebar-nav .nav-link.active {
            background: var(--sidebar-active);
            color: var(--sidebar-text-active);
            font-weight: 600;
        }

        .sidebar-nav .nav-link i {
            font-size: 1rem;
            width: 18px;
            text-align: center;
        }

        .sidebar-footer {
            padding: 12px 0;
            border-top: 1px solid rgb(235, 222, 213);
        }

        /* ── Main Content ── */
        #main-content {
            margin-left: var(--sidebar-width);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        /* ── Topbar ── */
        #topbar {
            height: var(--topbar-height);
            background: #ffffff;
            border-bottom: 1px solid #e2e8f0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 24px;
            position: sticky;
            top: 0;
            z-index: 999;
        }

        #topbar .page-title {
            font-size: 0.95rem;
            font-weight: 600;
            color: #C19D63;
        }

        .user-badge {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        /* ── Content Area ── */
        #content {
            padding: 8px 0;
            flex: 1;
        }

          #sidebarOverlay{
            display:none;
        }

        /* ── Responsive ── */
        @media (max-width:768px){

        #sidebar{
            transform: translateX(-100%);
            transition: transform .3s;
            z-index:1001;
        }

        #sidebar.show{
            transform: translateX(0);
        }

        #main-content{
            margin-left:0;
        }

        #sidebarOverlay{
            position:fixed;
            inset:0;
            background:rgba(0,0,0,.4);
            display:none;
            z-index:1000;
        }

        #sidebarOverlay.show{
            display:block;
        }
        /* Judul dashboard */
        h4,
        .fw-bold.mb-0{
            font-size:1.2rem !important;
            line-height:1.3;
        }

        /* Tanggal */
        .text-muted.small{
            font-size:.75rem !important;
        }

        /* Card statistik */
        .card-body{
            padding:14px !important;
        }

        /* Icon statistik */
        .card-body i{
            font-size:1.2rem !important;
        }

        /* Angka statistik */
        .fs-3{
            font-size:1.7rem !important;
        }

        /* Judul statistik */
        .text-muted.small{
            font-size:.8rem !important;
        }

        /* Container dashboard */
        .container-fluid{
            padding-left:12px !important;
            padding-right:12px !important;
        }
        .checkout-mobile{
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 1000;

            margin: 0 !important;
            border-radius: 20px 20px 0 0 !important;
        }

        #content{
            padding-bottom: 120px;
        }
        .user-badge .badge{
            font-size: 0 !important;
            padding: 6px 8px !important;
        }

        .user-badge .badge i{
            font-size: 1rem !important;
        }
}

        

        /* ── PENGATURAN LAYOUT UTAMA ── */
        body-login{
            background-color: var(--df-bg-creamy);
            min-height: 100vh;
            display: flex;
            flex-direction: column; /* Mengatur susunan atas-bawah */
            font-family: 'Manrope', sans-serif;
            margin: 0;
        }

        .main-content {
            flex: 1; /* Mengisi sisa ruang kosong di bawah navbar */
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 40px 0;
        }

        .navbar {
            background-color: var(--df-bg-creamy) !important; 
            padding: 5px 0 !important;
            box-shadow: 0 5px 10px rgba(0,0,0,0.08) !important;
            font-family: 'Philosopher', serif; 
        }

        .nav-link-login {
            color: var(--df-brown-soft) !important;
            font-family: 'Philosopher', serif; /* Font disamakan dengan Landing Page */
            font-weight: 700;
            font-size: 0.9rem;
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }
        .navbar-logo {
            height: 100px; /* 📱 Ukuran ideal di HP agar menu tetap rapi */
            object-fit: contain;
            transition: height 0.3s ease; /* Efek transisi smooth saat layar di-resize */
        }

        /* ── LOGIN TOGGLE & CARD STYLES ── */
        .login-toggle-container {
            background-color: var(--bg-landing);
            border-radius: 50px;
            max-width: 340px;
            border: 1px solid rgba(0,0,0,0.05);
        }
        .btn-toggle-active {
            background-color:var(--df-brown-dark);
            color: var(--df-bg-creamy);
            border-radius: 50px;
            border: none;
        }
        .btn-toggle-active:hover {
            background-color: var(--df-brown-dark);
            color: #ffffff;
        }
        .btn-toggle-inactive {
            background-color: transparent;
            color: var(--df-brown-soft);
            border-radius: 50px;
            border: none;
            opacity: 0.6;
        }
        .login-card {
            background-color: var(--df-bg-creamy);
            border-radius: 32px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
            padding: 3rem;
        }

        /* ── INPUT & BUTTON STYLES ── */
        .custom-login-input {
            background-color: var(--bg-landing) !important;
            border: 1px solid #dcd0c5 !important;
            border-radius: 16px !important;
            font-size: 0.95rem;
            padding: 0.8rem 1rem;
            color: #4a2c11 !important;
            transition: all 0.2s ease;
        }

        .custom-login-input:focus {
            background-color: #e1d2c6 !important;
            border-color: #c7b9ad !important;
            box-shadow: 0 0 0 4px rgba(74, 44, 17, 0.08) !important;
            color: var(--df-brown-soft);
        }
        .btn-login-submit {
            background-color: var(--df-brown-dark);
            color: var(--text-btn);
            border-radius: 50px;
            font-weight: 700;
            padding: 0.8rem;
            letter-spacing: 0.5px;
            border: none;
            transition: all 0.2s ease;
        }
        .btn-login-submit:hover {
            background-color: var(--df-brown-dark);
            color: var(--text-btn);
            transform: translateY(-1px);
        }
        .back-link {
            color: #4a2c11;
            text-decoration: none;
            font-size: 0.85rem;
            opacity: 0.7;
            transition: opacity 0.2s;
        }
        .back-link:hover {
            opacity: 1;
            text-decoration: underline;
        }
        footer {
            background-color: var(--df-brown-medium);
            color: #fcf6f0;
            padding: 60px 0 30px;
        }
        footer a {
            color: rgba(252, 246, 240, 0.8);
            text-decoration: none;
        }
        footer a:hover {
            color: #ffffff;
        }
        /* ── MENCEGAH MUNCULNYA ICON MATA BAWAAN BROWSER (EDGE) ── */
        input[type="password"]::-ms-reveal,
        input[type="password"]::-ms-clear {
            display: none;
        }









        body-landing {
            font-family: 'Manrope', sans-serif;
            background-color: var(--df-bg-creamy);
            color: var(--df-brown-dark);
            overflow-x: hidden;
        }

        .font-serif {
            font-family: 'Philosopher', serif;
        }
        
        h4.border-bottom {
            /* Ubah var(--df-brown-medium) menjadi var(--df-brown-dark) jika ingin lebih pekat */
            border-bottom: 1px solid var(--df-brown-medium) !important; 
        }
        /* ── NAVBAR DEFAULT (MENTOK ATAS) ── */
        .navbar-landing {
            background-color: transparent !important; /* 🎯 FIX: Background dibuat hilang total */
            box-shadow: none !important; /* Bayangan dihilangkan agar benar-benar bersih */
            padding: 15px 0; /* Sedikit lebih tebal saat di atas */
            font-family: 'Philosopher', serif;
            transition: all 0.4s ease-in-out;
        }
        /* ── NAVBAR SAAT DI-SCROLL (MUNCUL TIPIS & BLUR) ── */
        .navbar.navbar-scrolled {
            background-color: rgba(235, 222, 213, 0.3) !important; /* 🎯 Tipis 30% warna krem Double F */
            backdrop-filter: blur(15px); /* Efek blur/kaca diperkuat agar teks tetap terbaca */
            -webkit-backdrop-filter: blur(15px); 
            box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important; /* Memunculkan bayangan halus pembatas */
            padding: 5px 0; /* Navbar sedikit meramping saat di-scroll */
        }
        .navbar-brand img {
            height: 90px; 
            object-fit: contain;
            transition: height 0.3s ease;
        }
       
        @media (min-width: 1000px) {
            .navbar-logo {
                height: 100px; 
            }
        }
        .nav-link {
            color: var(--df-brown-soft) !important;
            font-weight: 600;
            font-size: 0.9rem;
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }
        .btn-login {
            background-color: var(--df-brown-dark);
            color: var(--text-btn) !important;
            font-weight: 600;
            border-radius: 5px;
            padding: 10px;      
            transition: all 0.2s;
        }
        .btn-login:hover {
            background-color: var(--df-brown-medium);
            transform: translateY(-1px);
        }

        /* ── GAMBAR 1: CAROUSEL BANNER SYSTEM ── */
        .hero-carousel-section {
            width: 100%;
            background-color: var(--df-bg-light);
            overflow: hidden;
        }

        .carousel-img {
            width: 100%;
            height: auto;
            max-height: 750px;
            object-fit: cover; 
        }
        .carousel-indicators [data-bs-target] {
            width: 12px; 
            height: 12px; 
            border-radius: 50%; 
            background-color: var(--df-bg-creamy); 
            border: none; 
            margin: 0 6px; 
            transition: all 0.3s ease;
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
            background-clip: padding-box;
        }

        .carousel-indicators .active {
            background-color: var(--df-bg-light); 
            opacity: 1;
            transform: scale(1.2); 
        }
        .carousel-control-prev-icon,
        .carousel-control-next-icon {
            background-color: transparent;
            padding: 20px;
            border-radius: 50px;
        }
        .hero-title {
            font-size: 4rem;
            font-weight: 700;
            line-height: 1.1;
            color: var(--df-brown-dark);
        }
        .badge-volume {
            background-color: rgba(74, 44, 17, 0.15);
            color: var(--df-brown-dark);
            font-weight: 600;
            border: 1px solid var(--df-brown-dark);
            padding: 6px 16px;
            border-radius: 8px;
        }

        /* ── GAMBAR 2: BRAND ORIENTATION ── */
        .zoom-section {
            padding: 100px 0;
        }
        .zoom-img {
            border-radius: 20px;
            box-shadow: 10px 20px 15px rgba(0,0,0,0.08);
            object-fit: cover;
        }

        .btn-order-custom {
            background-image: linear-gradient(135deg, #8C6E57 0%, #C19D63 100%);
            color: #ffffff !important; /* Teks putih */
            font-weight: 700;
            border-radius: 50px; /* Bentuk lonjong */
            border: none;
            transition: all 0.3s ease; /* Transisi halus saat dihover */
        }

        .btn-order-custom:hover {
            color: #ffffff !important;
            transform: translateY(-2px); /* Efek sedikit terangkat */
            box-shadow: 0 8px 15px rgba(85, 50, 22, 0.2) !important; /* Tambahan bayangan lembut */
        }

        /* ── GAMBAR 3: PRODUCT CARDS ── */
        .product-section {
            padding: 50px 0;
            background-color: var(--bg-landing); 
        }
        .card-best-seller {
            border: none;
            transition: transform 0.2s;
            border-radius: 30px;
            box-shadow: 5px 5px 5px rgba(0,0,0,0.08);
        }
        .card-best-seller:hover {
            transform: translateY(-5px);
        }
        .card-best-seller .img-wrapper {
            background-color: var(--text-btn);
            border-radius: 24px 24px 0 0;
            padding: 10px;
            box-shadow: 0 10px 15px rgba(0,0,0,0.03);
        }
        .card-best-seller .img-wrapper-hampers {
            background-color: var(--text-btn);
            border-radius: 24px 24px 0 0;
            padding: 10px;
            box-shadow: 0 10px 15px rgba(0,0,0,0.03);
        }
        .card-best-seller .info-wrapper {
            background-color: var(--card-dark);
            color: var(--sidebar-text);
            border-radius: 0 0 24px 24px;
            padding: 20px;
            text-align: center;
        }
        .card-best-seller .info-wrapper-hampers{
            background-color: var(--df-bg-light);
            color: var(--df-brown-soft);
            border-radius: 0 0 24px 24px;
            padding: 10px;
            text-align: center;
        }

        .card-best-seller .info-wrapper h5 {
            font-size: 1.15rem;
            margin-bottom: 4px;
        }

        .card-best-seller .info-wrapper .d-block {
            line-height: 1.3;
        }
        .btn-view-all {
            border: 2px solid var(--df-brown-dark);
            color: var(--df-brown-dark);
            font-weight: 700;
            border-radius: 50px;
            padding: 10px 35px;
            background: transparent;
        }
        .btn-view-all:hover {
            background: var(--df-brown-dark);
            color: var(--text-btn);
        }

        /* ── GAMBAR 4: PARTNERSHIP BANNER ── */
        .partnership-box {
            background-color: var(--df-brown-dark);
            padding: 50px;
        }
        .partnership-box-inner {
            background-color: var(--df-bg-creamy);
            padding: 12px;
            border-radius: 15px;
        }
        .btn-contact {
            background-color: var(--df-brown-dark);
            color: white;
            font-weight: bold;
            padding: 12px 40px;
            border-radius: 50px;
            border: none;
        }
        .btn-contact:hover {
            background-color: var(--df-brown-medium);
            color: white;
        }

        /* ── GAMBAR 5: TESTIMONI & FOOTER ── */
        .testimonial-card {
            background-color: var(--df-brown-dark);
            color: var(--text-btn);
            border-radius: 20px;
            padding: 30px;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        footer {
            background-color: var(--df-brown-medium);
            color: #fcf6f0;
            padding: 60px 0 30px;
        }
        footer a {
            color: rgba(252, 246, 240, 0.8);
            text-decoration: none;
        }
        footer a:hover {
            color: #ffffff;
        }
        .navbar-logo {
            height: 100px; 
            object-fit: contain;
            transition: height 0.3s ease; 
        }
        .footer-section {
            background: linear-gradient(135deg, #553216 10%, #C19D63 90%); 
            font-family: 'Manrope', sans-serif;
        }

        .footer-logo {
            height: 150px;
            width: auto;
            object-fit: contain;
        }

        .copyright-text {
            font-size: 1rem;
            font-weight: 700;
            color: #ffffff;
            letter-spacing: 0.3px;
        }

        .footer-middle a {
            color: #ffffff;
            text-decoration: none;
            font-size: 0.95rem;
            font-weight: 500;
            opacity: 0.8;
            transition: all 0.2s ease;
            display: inline-block;
        }

        .footer-middle a:hover {
            opacity: 1;
            transform: translateX(6px);
        }

        .location-text {
            font-size: 0.95rem;
            font-weight: 500;
            line-height: 1.4;
            color: #ffffff;
        }

        .halal-logo {
            height: 100px;
            width: auto;
            object-fit: contain;
        }

        /* ── HALAMAN KATALOG PUBLIK ── */
        .katalog-hero-section {
            width: 100%;
            /* Menghilangkan jarak jika navbar-nya menempel (sticky/fixed) */
            margin-top: 0; 
        }

        .katalog-banner-img {
            width: 100%;
            height: 450px; /* Ketinggian banner, bisa kamu naik/turunkan */
            object-fit: cover; /* Agar gambar tidak gepeng, otomatis terpotong rapi */
            object-position: center; /* Fokus pemotongan gambar ada di tengah */
            display: block;
        }

        .katalog-title {
            color: var(--df-brown-dark); 
            font-size: 2.5rem;
            letter-spacing: 1px;
        }

        .katalog-content-section{
            background-color: var(--bg-landing);
        }

        /* Responsivitas untuk layar HP */
        @media (max-width: 768px) {
            .katalog-banner-img {
                height:150px !important;
                object-fit:contain !important;
            }
            .katalog-title {
                font-size: 2rem;
            }
            .testimonial-card{
                max-width: 300px;
                margin: 0 auto;
            }
            .carousel-indicators [data-bs-target]{
                width: 5px !important;
                height: 5px !important;
                border-radius: 50%;
                margin: 0 2px !important;
            }

            .carousel-indicators .active{
                width: 14px !important;
                border-radius: 20px !important;
                transform: none !important;
            }
            .navbar{
                position: sticky;
                top: 0;
                z-index: 1050;
            }

            .navbar-collapse{
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                background-color: var(--df-bg-creamy) !important;
                z-index: 9999;
            }
        }

        
    
        

     /* ════════════════════════════════════════════════
   📱 RESPONSIVITAS KHUSUS HP & TABLET 
   (Memperbaiki layout melar & keluar jalur)
══════════════════════════════════════════════════ */
@media (max-width: 991px){

    .navbar-landing,
    .navbar-landing.navbar-scrolled{
        background-color: var(--df-bg-creamy)!important;
        padding:5px 0!important;
    }

    .navbar-brand img{
        max-height:40px!important;
        width:auto!important;
    }

    .navbar-toggler{
        padding: 2px 4px !important;
        border: none !important;
        background: transparent !important;
    }
    .navbar-toggler-icon{
        width: 1rem !important;
        height: 1rem !important;
    }

    .navbar-collapse{
        background:var(--df-bg-creamy);
        padding:15px;
        border-radius:0px;
        margin-top:0px;
    }

    .hero-carousel-section{
        margin-top: 0x !important;
    }

    .carousel-img{
        height: auto !important;
        max-height: none !important;
        width: 100% !important;
        object-fit: contain !important;
    }

    .zoom-section{
        padding: 50px 0 !important;
    }

    .zoom-section img{
        height:auto!important;
        margin-bottom:20px;
    }
    
    .row.g-5{
        --bs-gutter-y: 1.5rem !important;
    }
    
    .product-section .row{
        margin-left:0!important;
        margin-right:0!important;
    }

    .card-best-seller{
        margin-bottom:15px;
    }

    .carousel-control-prev,
    .carousel-control-next{
        display:none!important;
    }

    body{
        overflow-x:hidden!important;
    }

    .container{
        overflow:hidden;
    }
    .zoom-img{
        height:auto!important;
        max-height:350px!important;
    }
}

        .sosmed-card {
            --icon-color: var(--df-bg-light);
            background-color: white;
            color: var(--df-brown-dark);
            border: 2px solid transparent;
            border-radius: clamp(16px, 3vw, 20px);
            padding: clamp(15px, 4vw, 30px) clamp(10px, 3vw, 20px);
            min-height: clamp(140px, 20vw, 180px);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            text-decoration: none;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
            transition: all 0.3s ease;
        }
        .sosmed-card:hover {
            --icon-color: white;
            transform: translateY(-10px);
            background-color: var(--df-bg-light);
            color: white !important;
            border-color: var(--df-bg-light);
            box-shadow: 0 10px 25px rgba(140, 110, 87, 0.3);
        }
        .sosmed-card i {
            font-size: clamp(2rem, 5vw, 3rem);
            margin-bottom: clamp(8px, 2vw, 15px);
            color: var(--icon-color);
            transition: color 0.3s ease;
        }
        .sosmed-card:hover i {
            color: white;
        }
        .contact-section { 
            padding-top: 80px; 
            padding-bottom: 150px; 
            background-color: var(--df-bg-creamy); 
            min-height: 100vh;
        }
        @media (max-width: 768px){

        .sosmed-card{
            padding: 15px 10px !important;
            min-height: 140px !important;
            border-radius: 16px !important;
        }

        .sosmed-card i {
            font-size: clamp(2rem, 5vw, 3rem);
            margin-bottom: clamp(8px, 2vw, 15px);
            color: var(--icon-color);
            transition: color 0.3s ease;
        }

        .sosmed-card h5 {
            font-size: clamp(0.9rem, 2.5vw, 1.15rem);
            margin-bottom: 4px;
        }

        .sosmed-card small {
            font-size: clamp(0.7rem, 2vw, 0.85rem);
            line-height: 1.2;
            word-break: break-word;
            overflow-wrap: break-word;
        }

        .row.g-4{
            --bs-gutter-x: 0.75rem;
            --bs-gutter-y: 0.75rem;
        }
}

        [data-bs-theme="dark"] .sosmed-card {
            background-color: #2a1f18;
            color: var(--df-brpwn-dark);
        }

        [data-bs-theme="dark"] .sosmed-card i {
            color: var(--df-bg-light);
        }