/* =====================================================
LANDING.CSS – JAFAEST STUDIO
VERSION: PRODUCTION READY
MATCH 100% DENGAN BLADE YANG DIKIRIM USER
CATATAN:

* TIDAK MENGUBAH FONT SIZE / LAYOUT
* AMAN BOOTSTRAP 4.6
* MOBILE FIRST + ANIMASI HALUS
  ===================================================== */

/* =====================================================

1. RESET & GLOBAL SAFETY
   ===================================================== */
   *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
   html,body{width:100%;max-width:100%;overflow-x:hidden}
   body{font-family:'Poppins',system-ui,sans-serif;background:#fff;color:#111}

/* =====================================================
2. NAVBAR
===================================================== */
.landing-navbar{position:fixed;top:0;left:0;width:100%;z-index:1000;transition:.4s ease}
.landing-navbar.scrolled{background:rgba(255,255,255,.95);backdrop-filter:blur(12px);box-shadow:0 12px 30px rgba(0,0,0,.1)}

.navbar-inner{max-width:1400px;margin:auto;padding:26px 60px;display:flex;align-items:center;justify-content:space-between}

/* LOGO */
.brand-logo-mini img{height:52px;transition:.3s ease}
.landing-navbar.scrolled .brand-logo-mini img{height:46px}

/* =====================================================
3. DESKTOP MENU
===================================================== */
.nav-center{list-style:none;display:flex;gap:38px}
.nav-center li a{text-decoration:none;color:#222;font-weight:600;position:relative;padding:6px 0}
.nav-center li a::after{content:'';position:absolute;left:50%;bottom:-8px;width:0;height:2px;background:#111;border-radius:2px;transform:translateX(-50%);transition:.25s ease}
.nav-center li a:hover::after,.nav-center li a.active::after{width:100%}

/* =====================================================
4. LOGIN BUTTON
===================================================== */
.btn-login{border:1.6px solid #111;border-radius:30px;padding:8px 26px;font-weight:600;color:#111;text-decoration:none;transition:.3s ease}
.btn-login:hover{background:#111;color:#fff;box-shadow:0 10px 26px rgba(0,0,0,.18); text-decoration: none;}

/* =====================================================
5. HAMBURGER
===================================================== */
.hamburger{width:30px;height:22px;background:none;border:none;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer}
.hamburger span{width:100%;height:3px;background:#111;border-radius:3px;transition:.35s ease}
.hamburger.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(6px,-6px)}

/* =====================================================
6. MOBILE MENU
===================================================== */
.mobile-menu{
    position:fixed;
    top:65px;
    left:0;
    width:100%;

    /* GLASS */
    background:rgba(255,255,255,.75);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

    padding:32px 28px;
    display:flex;
    flex-direction:column;
    gap:22px;

    border-bottom-left-radius:20px;
    border-bottom-right-radius:20px;
    border:1px solid rgba(255,255,255,.4);

    box-shadow:
        0 20px 40px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.6);

    transform:translateY(-30px);
    opacity:0;
    pointer-events:none;
    transition:
        transform .35s cubic-bezier(.4,0,.2,1),
        opacity .35s ease;

    z-index:999;
}
.mobile-menu.show{transform:none;opacity:1;pointer-events:auto}
.mobile-menu a{font-size:18px;font-weight:600;color:#111;text-decoration:none}
.mobile-menu a.active{color:#000}

/* =====================================================
7. PRICELIST SECTION
===================================================== */
.pricelist-section{padding-top:140px;}
.section-title{
    font-size:60px;
    margin-bottom:70px;
    opacity:0;
    transform:translateY(30px);
    animation:titleReveal .8s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes titleReveal{
    to{
        opacity:1;
        transform:none;
    }
}
/* =====================================================
8. TAB CABANG
===================================================== */
.cabang-tabs{display:flex;gap:34px;padding-bottom:18px;border-bottom:1px solid #eee;margin-bottom:40px;flex-wrap:wrap}
.cabang-tab{background:none;border:none;font-weight:700;font-size:16px;cursor:pointer;padding-bottom:10px;position:relative}
.cabang-tab.active::after{content:'';position:absolute;left:0;bottom:-19px;width:100%;height:3px;background:#111}

/* =====================================================
9. PRICE WRAPPER
===================================================== */
.price-wrapper{display:none}
.price-wrapper.active{display:block}

/* =====================================================
10. PRICE CARD
===================================================== */
.price-card-kuystyle{background:#fff;border-radius:20px;padding:40px 48px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 18px 50px rgba(0,0,0,.08);transition:.3s}
.price-card-kuystyle:hover{transform:translateY(-4px);box-shadow:0 22px 60px rgba(0,0,0,.12)}

.price-left h3{font-weight:700;margin-bottom:18px}
.price-left ul{padding-left:18px}
.price-left li{margin-bottom:6px}

.price-right{text-align:center}
.price-label{font-size:14px;margin-bottom:6px}
.price-main{font-size:56px;font-weight:800}
.price-old{font-size:22px;color:#999;text-decoration:line-through;margin-left:10px}
/* ===============================
   PAKET CARD ENTER
================================ */
.price-wrapper.active .price-card-kuystyle{
    opacity:0;
    transform:translateY(30px);
    animation:cardEnter .6s cubic-bezier(.4,0,.2,1) forwards;
}

/* DELAY SATU-SATU */
.price-wrapper.active .price-card-kuystyle:nth-child(1){ animation-delay:.05s }
.price-wrapper.active .price-card-kuystyle:nth-child(2){ animation-delay:.15s }
.price-wrapper.active .price-card-kuystyle:nth-child(3){ animation-delay:.25s }
.price-wrapper.active .price-card-kuystyle:nth-child(4){ animation-delay:.35s }
.price-wrapper.active .price-card-kuystyle:nth-child(5){ animation-delay:.45s }

@keyframes cardEnter{
    to{
        opacity:1;
        transform:none;
    }
}
/* ===============================
   SUB ITEM LIST ANIMATION
================================ */
.price-wrapper.active .price-left li{
    opacity:0;
    transform:translateX(-10px);
    animation:listEnter .45s ease forwards;
}

.price-wrapper.active .price-left li:nth-child(1){animation-delay:.2s}
.price-wrapper.active .price-left li:nth-child(2){animation-delay:.28s}
.price-wrapper.active .price-left li:nth-child(3){animation-delay:.36s}
.price-wrapper.active .price-left li:nth-child(4){animation-delay:.44s}

@keyframes listEnter{
    to{
        opacity:1;
        transform:none;
    }
}

/* =====================================================
11. BOOKING BUTTON
===================================================== */
.btn-booking{margin-top:20px;padding:14px 40px;border:none;background:#4da3ff;color:#fff;font-weight:700;border-radius:12px;box-shadow:0 10px 30px rgba(77,163,255,.45);transition:.3s;position:relative;overflow:hidden}
.btn-booking:hover{transform:translateY(-2px)}
.btn-booking::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);animation:ctaShine 3.2s infinite}

/* =====================================================
12. MODAL (BOOTSTRAP SAFE)
===================================================== */
.modal-content{border-radius:18px}

/* =====================================================
13. FLOATING WHATSAPP
===================================================== */

/* WRAPPER */
.wa-fab{
    position:fixed;
    right:28px;
    bottom:28px;
    z-index:3000;
}

/* BUTTON */
.wa-fab-btn{
    width:64px;
    height:64px;
    border-radius:50%;
    background:#25D366;
    border:none;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    box-shadow:0 14px 40px rgba(0,0,0,.28);
    transition:.35s cubic-bezier(.4,0,.2,1);
}

/* ICON WA */
.wa-icon-open{
    width:28px;
    height:28px;
    transition:.35s cubic-bezier(.4,0,.2,1);
}

/* ICON CLOSE (X) */
.wa-icon-close{
    position:absolute;
    font-size:26px;
    color:#fff;
    opacity:0;
    transform:rotate(-180deg) scale(.5);
    transition:.35s cubic-bezier(.4,0,.2,1);
}

/* ACTIVE STATE */
.wa-fab-btn.active{
    background:#111;
}

.wa-fab-btn.active .wa-icon-open{
    opacity:0;
    transform:rotate(180deg) scale(.5);
}

.wa-fab-btn.active .wa-icon-close{
    opacity:1;
    transform:rotate(0) scale(1);
}
/* ===============================
   FLOATING WA ENTER
================================ */
.wa-fab{
    opacity:0;
    transform:scale(.6);
    animation:waEnter .7s cubic-bezier(.34,1.56,.64,1) forwards;
    animation-delay:.6s;
}

@keyframes waEnter{
    to{
        opacity:1;
        transform:scale(1);
    }
}

/* ===============================
   PANEL
================================ */
.wa-panel{
    position:absolute;
    right:0;
    bottom:84px;
    width:320px;
    max-width:calc(100vw - 40px);
    background:#fff;
    border-radius:18px;
    box-shadow:0 28px 70px rgba(0,0,0,.25);
    overflow:hidden;

    opacity:0;
    transform:translateY(24px) scale(.96);
    pointer-events:none;
    transition:.35s cubic-bezier(.4,0,.2,1);
}

.wa-panel.show{
    opacity:1;
    transform:none;
    pointer-events:auto;
}

/* HEADER */
.wa-panel-header{
    background:#3f3f3f;
    color:#fff;
    padding:18px;
}

.wa-panel-header h5{
    margin:0;
    font-size:16px;
    font-weight:600;
}

.wa-panel-header p{
    margin-top:6px;
    font-size:13px;
    opacity:.85;
}

/* SUBTEXT */
.wa-panel-sub{
    font-size:13px;
    color:#999;
    padding:12px 18px;
}

/* USER ROW */
.wa-panel-user{
    display:flex;
    align-items:center;
    gap:14px;
    padding:16px 18px;
    margin:0 14px 14px;
    margin-top: 10px;
    border-radius:12px;
    background:#f6f7f8;
    text-decoration:none;
    color:#111;
    transition:
        box-shadow .25s ease,
        transform .25s ease;
}

.wa-panel-user:hover{
    background:#ffffff;              /* lebih soft */
    text-decoration:none;
    transform:translateY(-2px);      /* elegan naik dikit */
    box-shadow:0 8px 20px rgba(0,0,0,.06);
}

/* USER ICON */
.wa-panel-user img{
    width:42px;
    height:42px;
    object-fit:contain;
    flex-shrink:0;
}

/* TEXT */
.wa-user-text strong{
    font-size:14px;
    display:block;
}

.wa-user-text small{
    font-size:12px;
    color:#25D366;
}

/* ARROW / WA ICON */
.wa-user-arrow{
    margin-left:auto;
    width:28px;
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
}
/* =====================================================
14. FOOTER
===================================================== */
.landing-footer{
    border-top:1px solid #eee;
    padding:32px 24px;
    margin-top: 80px; /* JARAK SEHAT */
    background:#fff;
}
.footer-bottom{text-align:center;font-size:13px;color:#777; text-decoration: none;}

/* =====================================================
15. RESPONSIVE
===================================================== */
@media(max-width:991px){
.landing-navbar.scrolled .brand-logo-mini img{height:34px}
.nav-center{display:none}
.hamburger{display:flex}
.navbar-inner{padding:16px 18px}
.brand-logo-mini img{height:34px}
.price-card-kuystyle{flex-direction:column;align-items:flex-start}
.price-right{width:100%;margin-top:20px}
.price-main{font-size:38px}
.btn-booking{width:100%}
}
/* =====================================================
   EXTRA SMALL DEVICES (HP KECIL / JADUL)
===================================================== */
@media (max-width:575px){

    /* ===== NAVBAR ===== */
    .navbar-inner{
        padding:14px 14px;
    }

    .brand-logo-mini img{
        height:30px;
    }

    /* ===== MOBILE MENU ===== */
    .mobile-menu{
        top:58px;
        padding:26px 22px;
        gap:18px;
        border-bottom-left-radius:18px;
        border-bottom-right-radius:18px;
    }

    .mobile-menu a{
        font-size:16px;
    }

    /* ===== TITLE ===== */
    .section-title{
        font-size:42px;
        margin-bottom:46px;
    }

    /* ===== TAB PAKET ===== */
    .cabang-tabs{
        gap:20px;
        padding-bottom:14px;
        margin-bottom:30px;
        overflow-x:auto;
        flex-wrap:nowrap;
    }

    .cabang-tabs::-webkit-scrollbar{
        display:none;
    }

    .cabang-tab{
        font-size:14px;
        white-space:nowrap;
    }

    .cabang-tab.active::after{
        bottom:-14px;
        height:2px;
    }

    /* ===== PRICE CARD ===== */
    .price-card-kuystyle{
        padding:28px 22px;
        border-radius:16px;
    }

    .price-left h3{
        font-size:18px;
        margin-bottom:14px;
    }

    .price-left li{
        font-size:14px;
    }

    .price-right{
        text-align:left;
    }

    .price-label{
        font-size:13px;
    }

    .price-main{
        font-size:34px;
    }

    .price-old{
        font-size:16px;
        margin-left:6px;
    }

    .btn-booking{
        padding:14px;
        font-size:15px;
        border-radius:10px;
    }

    /* ===== FLOATING WHATSAPP ===== */
    .wa-fab{
        right:18px;
        bottom:18px;
    }

    .wa-fab-btn{
        width:54px;
        height:54px;
    }

    .wa-icon-open{
        width:24px;
        height:24px;
    }

    .wa-panel{
        width:280px;
        bottom:70px;
    }

    /* ===== FOOTER ===== */
    .footer-bottom{
        font-size:12px;
    }
}

/* =====================================================
16. ANIMATIONS
===================================================== */
@keyframes ctaShine{0%{left:-100%}60%{left:100%}100%{left:100%}}

/* Modal Login */
/* ===============================
   LOGIN MODAL – PREMIUM
================================ */

/* BACKDROP LEBIH SOFT */
.modal-backdrop.show{
    opacity:.55;
}

/* DIALOG */
#loginModal .modal-dialog{
    max-width:420px;
    padding:10px;
}

/* CONTENT */
#loginModal .modal-content{
    border-radius:22px;
    border:none;
    padding:36px 32px;
    box-shadow:0 30px 80px rgba(0,0,0,.35);
    animation:modalPop .45s cubic-bezier(.34,1.56,.64,1);
}

/* TITLE */
#loginModal h4{
    font-weight:800;
    font-size:22px;
    margin-bottom:14px;
    color:#111;
}

/* DESC */
#loginModal p{
    font-size:15px;
    color:#6b7280;
    line-height:1.6;
    margin-bottom:26px;
}

/* BUTTON */
#loginModal .btn{
    display:inline-block;
    width:100%;
    padding:14px 0;
    font-size:15px;
    font-weight:700;
    border-radius:14px;
    background:#111;
    border:none;
    transition:.3s ease;
}

#loginModal .btn:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 35px rgba(0,0,0,.35);
}

/* ===============================
   ANIMATION
================================ */
@keyframes modalPop{
    from{
        opacity:0;
        transform:scale(.85);
    }
    to{
        opacity:1;
        transform:scale(1);
    }
}

/* ===============================
   MOBILE ADJUST
================================ */
@media (max-width:575px){
    #loginModal .modal-content{
        padding:30px 24px;
        border-radius:18px;
    }

    #loginModal h4{
        font-size:20px;
    }

    #loginModal p{
        font-size:14px;
    }
}