/* Terapkan ke seluruh website */
body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    font-size: 1rem;          /* ukuran default 16px */
    line-height: 1.5;         /* spasi biar enak dibaca */
    color: #212529;           /* warna teks default Bootstrap */
    background-color: #fff;   /* background default putih */
}

/* Header dan judul biar lebih tegas */
h1, h2, h3, h4, h5, h6 {
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 600;         /* agak bold */
    line-height: 1.3;
    color: #ffffff;           /* lebih gelap untuk heading */
}

/* Teks kecil, misalnya footer atau catatan */
small, .small {
    font-size: 0.875rem;
    color: #6c757d;
}

/* Hero with dark overlay */
#home {
    position: relative;
    background: url("../images/bg1.jpg") no-repeat center center;
    background-size: cover;
    height: 150vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Semi-transparent overlay */
#home::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
}
#home .hero-container {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
}
/* Section backgrounds for visual separation */
section.about {
    position: relative;
    background: url("../images/about.jpg") no-repeat center center;
    background-size: cover;
    color: #fff;
    z-index: 0; /* pastikan section berada di atas overlay */
}

/* overlay transparan */
section.about::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(2, 2, 2, 0.77); /* gelap tapi hanya di belakang */
    z-index: -1; /* kunci: letakkan di belakang konten */
}

section.about .content {
    position: relative;
    z-index: 1; /* teks di atas overlay */
}

section.about .img-circle {
    width: 220px;
    height: 300px;
    object-fit: cover;
    display: block;
    margin: 0 auto 20px;
    border-radius: 10px; /* opsional, biar rapi */
}
/* untuk layar kecil (HP) */
@media (max-width: 768px) {
    section.about .img-circle {
        width: 80%;      /* fleksibel, ikut lebar layar */
        height: auto;    /* biar proporsi tetap */
        max-width: 300px; /* batasi agar tidak terlalu besar */
    }
}

section.menu {
    position: relative;
    background: url("../images/bg2.png") no-repeat center center;
    background-size: cover;
    color: #fff;
    z-index: 0; /* pastikan section berada di atas overlay */
}

/* overlay transparan */
section.menu::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(2, 2, 2, 0.77); /* gelap tapi hanya di belakang */
    z-index: -1; /* kunci: letakkan di belakang konten */
}

.menu-item img {
    width: 250px;
    height: 200px;
    object-fit: cover;
    margin: 0 auto 15px;
    border-radius: 8px;
}

section.specials {
    position: relative;
    background: url("../images/tagline.jpg") no-repeat center center;
    background-size: cover;
    color: #fff;
    z-index: 0; /* pastikan section berada di atas overlay */
}
/* overlay transparan */
section.specials::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(63, 63, 1, 0.83); /* gelap tapi hanya di belakang */
    z-index: -1; /* kunci: letakkan di belakang konten */
}
section.contact {
    position: relative;
    background: url("../images/tagline.jpg") no-repeat center center;
    background-size: cover;
    z-index: 0; /* pastikan section berada di atas overlay */
}
section.contact::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(2, 2, 2, 0.77); /* gelap tapi hanya di belakang */
    z-index: -1; /* kunci: letakkan di belakang konten */
}
/* Menu cards */
.menu-item img {
    border-radius: 8px;
}
/* Transparent header over hero */
#header.header-transparent {
    /*background-color: transparent !important;*/
    background-color: yellow !important;
}
#header.header-transparent .navbar-nav .nav-link {
    color: #000 !important;
}
/* Semi-transparent header on scroll */
#header.scrolled {
    background-color: rgba(0, 0, 0, 0.6) !important;
    transition: background-color 0.3s ease;
}
p {
    line-height: 1.8;
    margin-bottom: 1.2em;
    text-align: justify; /* rata kiri-kanan agar lebih rapi */
    font-size: 16px;
    text-indent: 2em;
}

.navbar-nav .nav-link.active {
    background-color: rgba(129, 129, 0, 0.51); /* background merah */
    color: #fff !important;    /* teks jadi putih */
}

.navbar-nav .nav-link:hover {
    background-color: rgba(129, 129, 0, 0.51); /* saat hover */
    color: #fff !important;
}
/* Floating WhatsApp Button */
.wa-floating {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #25D366;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 8px 16px rgba(0,0,0,.2);
    z-index: 9999;
    transition: all .2s ease-in-out;
}
.wa-floating:hover {
    background: #1ea955;
    transform: translateY(-2px);
}
.wa-floating .wa-icon {
    width: 30px;
    height: 30px;
    fill: #fff;
}
.wa-floating .label {
    display: none; /* default hidden */
}

/* Responsive: kecilin tombol di layar kecil */
@media (max-width: 480px) {
    .wa-floating {
        width: 50px;
        height: 50px;
        right: 16px;
        bottom: 16px;
    }
    .wa-floating .wa-icon {
        width: 26px;
        height: 26px;
    }
}