:root {
    --kk-primary: #0d6efd;
    --kk-emphasis: #0a58ca;
}
body {
    background: #f5f7fb;
}
.card {
    border: none;
    border-radius: .75rem;
}
.card-img-top {
    object-fit: cover;
    height: 220px;
}
.placeholder-img {
    background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #adb5bd;
    font-size: 2rem;
}
.hero {
    position: relative;
    overflow: hidden;
    background: #5d92fa url('../img/backgroud-header-section.png') right center / cover no-repeat;
    color: #fff;
    border-radius: 1rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(93, 146, 250, .42) 0%, rgba(102, 16, 242, .52) 100%);
}
.hero > * {
    position: relative;
    z-index: 1;
}
.kk-hero-title {
    max-width: 100%;
    font-size: clamp(1.35rem, 1.05rem + 1.3vw, 2rem);
}
@media (min-width: 768px) {
    .kk-hero-title { max-width: 58.333%; } /* sama dengan lebar kolom form pencarian */
}
.kk-hero-lead {
    font-size: .875rem;
}
@media (min-width: 768px) {
    .kk-hero-lead { max-width: 58.333%; }
}
/* Mobile: tampilkan sosok wanita di kanan-bawah sebagai pita, beri ruang kosong
   agar tidak terpotong / tertutup teks */
@media (max-width: 767.98px) {
    .hero {
        background-position: right bottom;
        background-size: auto 74%;
        background-color: #5d92fa;
    }
    .hero::before {
        background: linear-gradient(180deg, rgba(93, 146, 250, 0) 0%, rgba(102, 16, 242, .30) 100%);
    }
    .hero.p-4 {
        padding-bottom: 21rem;
    }
}
.badge-tier {
    text-transform: uppercase;
    letter-spacing: .5px;
}
.pr-card {
    position: relative;
    box-shadow: 0 .25rem 1rem rgba(13, 110, 253, .08);
    transition: transform .15s ease, box-shadow .15s ease;
}
.pr-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 .5rem 1.5rem rgba(13, 110, 253, .15);
}
.pricing-free {
    border: 1px solid #dee2e6;
}
.pricing-pro {
    border: 2px solid #0d6efd;
}
.pricing-premium {
    border: 2px solid #6610f2;
}
.gallery-thumb {
    width: 100%;
    height: 120px;
    object-fit: cover;
    cursor: pointer;
    border-radius: .5rem;
}
.gallery-main {
    width: 100%;
    height: 380px;
    object-fit: cover;
    border-radius: .75rem;
}
.detail-map iframe,
.detail-map #detailMap {
    border: 0;
    width: 100%;
    height: 320px;
    border-radius: .75rem;
}

/* ===== Lightbox (vanilla) ===== */
.kk-lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .92);
    z-index: 1090;
    display: flex;
    align-items: center;
    justify-content: center;
}
.kk-lightbox-img {
    max-width: 92vw;
    max-height: 80vh;
    border-radius: .5rem;
    box-shadow: 0 1rem 3rem rgba(0,0,0,.6);
}
.kk-lightbox-caption {
    position: absolute;
    bottom: 18px;
    left: 0;
    right: 0;
    text-align: center;
    color: #fff;
    font-size: .9rem;
    padding: 0 60px;
}
.kk-lightbox-btn {
    position: absolute;
    width: 46px;
    height: 46px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
    color: #fff;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease;
}
.kk-lightbox-btn:hover { background: rgba(255,255,255,.35); }
.kk-lightbox-close { top: 14px; right: 14px; }
.kk-lightbox-prev { left: 12px; top: 50%; transform: translateY(-50%); }
.kk-lightbox-next { right: 12px; top: 50%; transform: translateY(-50%); }
/* Favorit */
.kk-fav { position: absolute; top: .5rem; right: .5rem; z-index: 2; }
.kk-share { position: absolute; top: .5rem; right: 3rem; z-index: 2; }
.kk-fav-btn, .kk-share-btn {
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    padding: 0;
    background: rgba(255,255,255,.9);
    border: none;
    box-shadow: 0 .125rem .5rem rgba(0,0,0,.15);
}
.kk-fav-btn:hover, .kk-share-btn:hover { background: #fff; }
.kk-fav-btn i, .kk-share-btn i { font-size: 1rem; line-height: 1; }