body {
        padding-top: 70px;
      }
.warna1 {
    background-color: #7B542F;
}

.warna2 {
    background-color: #b87416;
}

.warna3 {
    background-color: #b87416;
    color: #ffff;
}

.warna4 {
    background-color: #FFCF71;
}

.warna5{
    background-color: #F6F1E9;
}

.warna6{
    background-color: #FFD93D;
}

.warna7{
    background-color: #FFF6E8;
}

.warna8{
    background-color: #C07A1A;
}


.warna9{
    background-color: #A86212;
}
.warna10{
    background-color: #3A2A18;
}

.warna11 {
    background-color: #C07A1A !important;
    color: #fff !important;
    border-color: #C07A1A !important;
}

.warna11:hover {
    background-color: #a86615 !important;
    border-color: #a86615!important;
}

.bg-coklat{
    background-color: #7A4A12;
}
.coklat-isi {
    color: #3A2A18;
}

.warna-nama {
    color: #3A2A18;
}

.banner{
    height: 80vh;
    background: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)), 
    url('../image/banner1.jpeg');
}

.highlighted-kategori{
    height: 250px;
}

.kategori-kue-tradisional {
    background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), 
    url('../image/kue-tradisional.jpeg');
    background-size: cover;
    background-position: center;
}

.kategori-parcel {
    background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), 
    url('../image/parcel-buah.jpeg');
    background-size: cover;
    background-position: center;
}

.kategori-snack {
    background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), 
    url('../image/snack-saleh.jpeg');
    background-size: cover;
    background-position: center;
}

.no-decoration{
    text-decoration: none;
    color: white;
}

.no-decoration:hover{
    color:#FFCF71 ;
}

.text-harga{
    font-size: 22px;
    color: #FF3838;
    font-weight: 700;
}
.text-dibawah-produk{
    max-width: 800px; 
    line-height: 1.6;
}

.image-box {
    height: 250px;
}

.image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.conten-subscribe a{
    background-color: #ffff;
}

.content-subscribe{
    background-color: #3A2A18;
}
.content-subscribe a{
    color: #ffff;
}

.banner-produk{
    height: 45vh;
    background: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)), 
    url('../image/banner-produk.jpeg');
    background-position: 10% 45%;
}

/* ===== KOTAK KATEGORI-PRODUK=====*/

.kategori-list {
    list-style: none ;
    background-color: #FFFF;
    border: none;

}

.kategori-item {
    border: none ;
    background-color: transparent;
    padding: 0;
}

.kategori-item a {
  display: block;
  padding: 12px 16px;
  color: #3A2A18;
  text-decoration: none;
  transition: all 0.2s ease;
 
}

.kategori-item a:hover {
  background-color: #F2C94C;
  color: #3A2A18;
}

.kategori-item.active a {
  background-color: #B87416;
  color: #FFFFFF;
  font-weight: 600;
}

.kategori-item a:focus-visible {
    outline: 2px solid #B87416;
    outline-offset: -2px;
    box-shadow: none;
}


/* ===== SELESAI KOTAK KATEGORI-PRODUK===== */


.produk-terkait-box {
    width: 100%;
    height: 280px;       
    overflow: hidden;
    border-radius: 6px;
}

.produk-terkait-image {
    width: 100%;
    height: 100%;
    object-fit: cover;  /* potong secukupnya, tetap proporsional */
    object-position: center;
}
/* ===== DASHBOARD CARD ===== */
        .summary-card{
            border-radius: 15px;
            padding: 20px;
            transition: transform .2s ease, box-shadow .2s ease;
        }

        .summary-card:hover{
            transform: translateY(-5px);
            box-shadow: 0 12px 25px rgba(0,0,0,0.12);
        }

        /* ===== KATEGORI CARD ===== */
        .summary-kategori{
            background-color: #F2C94C; /* kuning soft */
        }

        /* ===== PRODUK CARD ===== */
        .summary-produk{
            background-color: #C5C7BC;
            border: 1px solid #eee;
        }

        /* ===== ICON ===== */
        .dashboard-icon{
            color: rgba(0,0,0,0.45);
        }

        /* ===== TEXT ===== */
        .summary-title{
            font-weight: 600;
        }

        .summary-link{
            font-weight: 500;
            color: #7a4a12;
            text-decoration: none;
        }

        .summary-link:hover{
            text-decoration: underline;
            color: #5a350c;
        }

         .no-decoration{
            text-decoration:none;
        }

        /* ===== CARD UMUM ===== */
        .card-custom{
            background-color: #F5F5F5; /* abu-abu lembut */
            border: 1px solid #E0E0E0;
            border-radius: 14px;
            padding: 24px;
            box-shadow: 0 6px 15px rgba(0,0,0,0.06);
        }

        /* ===== TOMBOL SIMPAN ===== */
        .btn-simpan{
            background-color: #8B5A2B !important; /* coklat brand */
            color: #fff !important;
            border: none !important;
            padding: 8px 22px;
            font-weight: 500;
            border-radius: 6px;
            transition: background-color .2s ease;
        }

        .btn-simpan:hover{
            background-color: #6F451F !important;
            color: #fff !important;
        }

        /* ===== TABEL ===== */
        table thead th{
            background-color: #ECECEC;
            text-align: center;
            font-weight: 600;
        }

        table td{
            vertical-align: middle;
        }

        /* ===== ACTION BUTTON ===== */
        .btn-action{
            background-color: #F2C94C !important; /* kuning brand */
            color: #000 !important;
            border: none !important;
            padding: 6px 10px;
            border-radius: 6px;
            transition: background-color .2s ease;
        }

        .btn-action:hover{
            background-color: #e6b800 !important;
            color: #000 !important;
        }


        .no-decoration{
            text-decoration: none;
        }

        /* CARD */
        .card-custom{
            background-color: #F5F5F5;
            border: 1px solid #E0E0E0;
            border-radius: 14px;
            padding: 24px;
            box-shadow: 0 6px 15px rgba(0,0,0,0.06);
        }

        /* BUTTON EDIT */
        .btn-edit{
            background-color: #8B5A2B !important;
            color: #fff !important;
            border: none !important;
            padding: 8px 22px;
            border-radius: 6px;
            font-weight: 500;
        }

        .btn-edit:hover{
            background-color: #6F451F !important;
        }

        /* BUTTON DELETE */
        .btn-delete{
            background-color: #C0392B !important;
            color: #fff !important;
            border: none !important;
            padding: 8px 22px;
            border-radius: 6px;
            font-weight: 500;
        }

        .btn-delete:hover{
            background-color: #A93226 !important;
        }

        .no-decoration{ text-decoration:none; }

/* CARD */
.card-custom{
    background:#F5F5F5;
    border:1px solid #E0E0E0;
    border-radius:14px;
    padding:24px;
    box-shadow:0 6px 15px rgba(0,0,0,.06);
    margin-bottom:40px;
}

/* BUTTON SIMPAN */
.btn-simpan{
    background:#8B5A2B !important;
    color:#fff !important;
    border:none;
    padding:8px 22px;
    border-radius:6px;
}
.btn-simpan:hover{ background:#6F451F !important; }

/* ACTION */
.btn-action{
    background:#F2C94C !important;
    color:#000 !important;
    border:none;
    padding:6px 10px;
    border-radius:6px;
}
.btn-action:hover{ background:#e6b800 !important; }

/* TABLE */
table thead th{
    background:#ECECEC;
    text-align:center;
}
table td{ vertical-align:middle; }


.no-decoration{ text-decoration:none; }

/* CARD */
.card-custom{
    background:#F5F5F5;
    border:1px solid #E0E0E0;
    border-radius:14px;
    padding:24px;
    box-shadow:0 6px 15px rgba(0,0,0,.06);
}

/* BUTTON SIMPAN */
.btn-simpan{
    background:#8B5A2B !important;
    color:#fff !important;
    border:none;
    padding:8px 22px;
    border-radius:6px;
}
.btn-simpan:hover{ background:#6F451F !important; }

/* BUTTON HAPUS */
.btn-hapus{
    background:#C0392B !important;
    color:#fff !important;
    border:none;
    padding:8px 22px;
    border-radius:6px;
}
.btn-hapus:hover{ background:#A93226 !important; }

img.preview{
    max-width:260px;
    border-radius:10px;
    box-shadow:0 4px 10px rgba(0,0,0,.15);
}

/* =====  HALAMAN TENTANG KAMI ===== */
.banner-about{
    height: 45vh;
    background: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)), 
    url('../image/banner-produk.jpeg');
    background-position: 10% 45%;
}
.about-page{
    background:#F5F5F5;
}

.about-page .about-card{
    background:#ffffff;
    border-radius:16px;
    padding:35px;
    box-shadow:0 12px 30px rgba(0,0,0,.08);
}

.about-page .about-title{
    color:#8B5A2B;
    font-weight:700;
}

.about-page .divider{
    color:#8B5A2B;
    letter-spacing:4px;
}

.about-page .value-box{
    background:#FFF7ED;
    border-radius:12px;
    padding:20px;
    text-align:center;
    height:100%;
}

.about-page .value-box i{
    font-size:30px;
    color:#8B5A2B;
    margin-bottom:10px;
}

/* ===== TAMPILAN LOGIN ===== */
.login-wrapper{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    background: #e6b800;
}

/* ===== CARD LOGIN ===== */
.login-card{
    width:100%;
    max-width:520px;
    background:#F5F5F5;
    border:1px solid #E0E0E0;
    border-radius:16px;
    padding:30px;
    box-shadow:0 20px 45px rgba(0,0,0,.35);
}

/* ===== TEXT ===== */
.login-title{
    text-align:center;
    font-size:18px;
    font-weight:600;
    color:#8B5A2B;
    margin-bottom:6px;
}

.login-head{
    text-align:center;
    font-size:22px;
    font-weight:700;
    margin-bottom:22px;
}

/* ===== INPUT ===== */
.form-control{
    border-radius:8px;
}

/* ===== BUTTON ===== */
.btn-login{
    background: #F79A19!important;
    color:#fff !important;
    border:none !important;
    border-radius:8px;
    padding:10px;
    font-weight:600;
}

.btn-login:hover{
    background: #F2C94C !important;
}

/* ===== ALERT ===== */
.alert{
    border-radius:8px;
    margin-top:16px;
}