/* RESET */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    font-family: Arial, sans-serif;

    background:#f7f8fc;

    color:#173d5b;

    padding-bottom:90px;

}


/* HERO */

.hero{

    position:relative;

    width:100%;

    height:330px;

    overflow:hidden;
    

}

.hero-bg{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        to bottom,
        rgba(0,0,0,.15),
        rgba(0,0,0,.35)
    );

}

.menu-btn{

    position:absolute;

    top:20px;

    left:20px;

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

    background:#49b8f2;

    color:white;

    font-size:22px;

    z-index:10;

}

.login-btn{

    position:absolute;

    top:20px;

    right:20px;

    padding:14px 26px;

    border:none;

    border-radius:40px;

    background:#49b8f2;

    color:white;

    font-size:16px;

    z-index:10;

}

.hero-content{

    position:absolute;

    bottom:35px;

    left:0;

    right:0;

    text-align:center;

    z-index:10;

    color:white;

    padding:0 20px;

}

.logo{

    font-size:26px;

    font-weight:bold;

    margin-bottom:18px;

}

.hero h1{

    font-size:34px;

    margin-bottom:12px;

}

.hero p{

    font-size:16px;

    opacity:.95;

}

.days{

    margin-top:15px;

    color:#ffd8ff;

    font-weight:bold;

}


/* CATEGORY */

.category{

    display:flex;

    gap:12px;

    overflow-x:auto;

    padding:20px;

}

.category::-webkit-scrollbar{

    display:none;

}

.category button{

    padding:12px 22px;

    border:none;

    border-radius:25px;

    background:#e8edf7;

    color:#173d5b;

    white-space:nowrap;

    font-weight:bold;

}

.category .active{

    background:#49b8f2;

    color:white;

}


/* BANNER */

.banner-card{

    padding:20px;

    text-align:center;

}

.banner-card img{

    width:100%;

    border-radius:25px;

    display:block;

}

.price-old{

text-align:center;

font-size:13px;

color:#999;

text-decoration:line-through;

margin-top:8px;

margin-bottom:4px;

font-weight:500;

}

.price{

    width:100%;

    margin-top:18px;

    padding:16px;

    border:none;

    border-radius:35px;

    background:#49b8f2;

    color:white;

    font-size:22px;

    font-weight:bold;

}

.banner-card h2{

    margin-top:18px;

    font-size:28px;

}


/* PRODUCTS */

.products{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:28px;

    padding:24px 20px;

}

.card{

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;

    background:
        rgba(245,249,255,.95);

    border-radius:34px;

    overflow:visible;

    border:
        3px solid
        rgba(255,255,255,.75);

    box-shadow:
        0 14px 28px
        rgba(0,0,0,.12);

    padding:14px;

    padding-top:0;
    
    padding-bottom:12px;
    
    margin-top:72px;

}

.card > img:not(.label-id){

    width:92%;

    display:block;

    margin-top:-68px;

    margin-bottom:10px;

    border-radius:28px;

    background:#3b7dc4;

    border:3px solid rgba(255,255,255,.92);

    box-shadow:
    0 14px 34px rgba(0,0,0,.18),
    0 4px 10px rgba(0,0,0,.08);

    position:relative;

    z-index:2;
    
    animation:floating 5s ease-in-out infinite;

}

.card:hover > img:not(.label-id){

    transform:translateY(-6px);

    transition:.3s;

}

.card button{

    width:100%;

    margin:0;

    padding:12px;

    border:none;

    border-radius:30px;

    background:#49b8f2;

    color:#fff;

    font-size:16px;

    font-weight:900;

}

.card h3{

    text-align:center;

    padding:0 15px 20px;

    font-size:18px;

}

.card-title{

    width:90%;

    min-height:72px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:10px 18px;

    margin:8px auto 16px;

    border-radius:26px;

    background:
        linear-gradient(
        180deg,
        #63c2ff 0%,
        #3da8f4 38%,
        #2389ea 100%);

    border:2px solid rgba(255,255,255,.28);

    box-shadow:
        inset 0 2px 0 rgba(255,255,255,.35),
        0 8px 18px rgba(40,120,255,.28);

    color:#fff;

    font-family:'Nunito',sans-serif;

    font-size:17px;

    font-weight:900;

    line-height:1.18;

    letter-spacing:.3px;

    text-shadow:
        0 1px 2px rgba(0,0,0,.18);

}

.card-price{

    display:flex;

    flex-direction:column;

    align-items:center;

    margin-top:-2px;

    margin-bottom:10px;

    line-height:1.2;

}

.card-price .old-price{

    color:#e45a5a;

    font-size:12px;

    font-weight:700;

    text-decoration:line-through;

    opacity:.9;

    margin-bottom:3px;

}

.card-price .new-price{

    color:#224c82;

    font-size:20px;

    font-weight:900;

}

@keyframes floating{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-5px);
    }

    100%{
        transform:translateY(0);
    }

}


/* EVENT */

.latest{

    padding:20px;

}

.latest h2{

    margin-bottom:20px;

}

.event-card{

    background:white;

    border-radius:25px;

    overflow:hidden;

    margin-bottom:20px;

    box-shadow:0 5px 20px rgba(0,0,0,.07);

}

.event-card img{

    width:100%;

    display:block;

}

.event-card div{

    padding:18px;

    font-weight:bold;

}


/* FAQ */

.faq{

    padding:20px;

}

.faq h2{

    margin-bottom:20px;

}

.faq-item{

    background:white;

    padding:18px;

    border-radius:20px;

    margin-bottom:15px;

    box-shadow:0 5px 15px rgba(0,0,0,.06);

}


/* FOOTER */

footer{

    text-align:center;

    padding:40px 20px;

}

.footer-logo{

    font-size:30px;

    font-weight:bold;

}

footer p{

    margin-top:10px;

    color:#777;

}

.social{

    margin:25px 0;

    display:flex;

    justify-content:center;

    gap:25px;

    font-size:28px;

}


/* BOTTOM NAV */

.bottom-nav{
    position:fixed;
    bottom:0;
    left:0;
    width:100%;

    z-index:99999;

    transform:translateZ(0);

    background:white;

    display:flex;

    justify-content:space-around;

    padding:12px 0;

    box-shadow:0 -5px 20px rgba(0,0,0,.08);

}

.bottom-nav a{

    text-decoration:none;

    color:#8d98a5;

    display:flex;

    flex-direction:column;

    align-items:center;

    font-size:13px;

}

.bottom-nav a i{

    font-size:22px;

    margin-bottom:5px;

}

.bottom-nav .active{

    color:#49b8f2;

}

/* ====================================
   SKY TRACKING POPUP - NONOO ID
==================================== */

#trackingModal{

display:none;

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,.45);

backdrop-filter:blur(7px);

z-index:9999;

justify-content:center;

align-items:center;

}


.sky-popup{

width:88%;
max-width:390px;

background:#f3f4f7;

border-radius:38px;

padding:20px 25px 25px;

position:relative;

box-shadow:
0 25px 80px rgba(0,0,0,.25);

animation:popup .25s ease;

/* Tambahan */
max-height:85vh;
overflow-y:auto;

}

.sky-popup::-webkit-scrollbar{

width:5px;

}

.sky-popup::-webkit-scrollbar-thumb{

background:#c7d6e7;

border-radius:20px;

}

.sky-popup::-webkit-scrollbar-track{

background:transparent;

}


@keyframes popup{

from{

opacity:0;

transform:scale(.92);

}

to{

opacity:1;

transform:scale(1);

}

}


/* Tombol tutup */

.sky-close{
position:absolute;
top:20px;
right:25px;
font-size:32px;
font-weight:bold;
color:#95a0a8;
cursor:pointer;
}

.sky-close:hover{

opacity:1;

transform:scale(1.1);

}


/* Judul */

.sky-title{

display:flex;

justify-content:center;

align-items:center;

gap:12px;

font-size:24px;

font-weight:500;

color:#516977;

margin-bottom:20px;

}

.sky-title i{

font-size:22px;

color:#6f8794;

}


/* Divider */

.sky-divider{

display:flex;

align-items:center;

gap:15px;

margin-bottom:25px;

color:#6f7e88;

font-size:16px;

}

.sky-divider span{

flex:1;

height:1px;

background:#9aa4ab;

}


/* Input */

.sky-input{

width:90%;

height:64px;

display:block;

margin:0 auto;

padding:0 25px;

border:none;

border-radius:35px;

background:#dde3e8;

font-size:18px;

color:#666;

outline:none;

box-sizing:border-box;

}

.sky-input::placeholder{

color:#98a0a7;

}


/* Tombol */

.sky-btn{

width:90%;

height:58px;

display:block;

margin:18px auto 0;

border:none;

border-radius:35px;

font-size:18px;

font-weight:600;

color:white;

cursor:pointer;

background:linear-gradient(
180deg,
#6ac6ff,
#47aae3
);

box-shadow:
0 8px 20px rgba(71,170,227,.25);

}

.sky-btn:active{

transform:scale(.98);

}


/* Hasil tracking */

.track-card{

background:linear-gradient(
180deg,
#ffffff 0%,
#f7fbff 100%
);

padding:24px;

border-radius:26px;

margin-top:25px;

border:1px solid #d8ecff;

box-shadow:
0 12px 30px rgba(73,184,242,.12);

color:#506270;

animation:fade .3s ease;

}


@keyframes fade{

from{

opacity:0;

transform:translateY(10px);

}

to{

opacity:1;

transform:translateY(0);

}

}


.track-label{

font-weight:bold;

color:#526c7b;

margin-top:14px;

margin-bottom:5px;

}

.track-field{

padding:14px 0;

border-bottom:1px solid #edf3f8;

}

.track-field:last-child{

border-bottom:none;

}

.track-value{

font-size:17px;

font-weight:600;

color:#334155;

margin-top:4px;

}

/* Countdown */

#countdown{

margin-top:20px;

padding:22px;

background:#edf9ff;

border:2px solid #6bd0ff;

border-radius:24px;

text-align:center;

font-size:24px;

font-weight:bold;

color:#39afe6;

}


/* Status */

.status-badge{

padding:8px 16px;

border-radius:20px;

font-weight:bold;

display:inline-block;

}


.Menunggu-Antrean{

background:#ffe082;

color:#000;

}

.Proses-3-Hari{

background:#4fc3f7;

color:white;

}

.Siap-Dikirim{

background:#66bb6a;

color:white;

}

.Selesai{

background:#ffca28;

color:#000;

}

#cartModal{

display:none;

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(0,0,0,.55);

backdrop-filter:blur(5px);

z-index:9999;

justify-content:center;

align-items:center;

}

.cart-popup{
    width:90%;
    max-width:400px;
    max-height:85vh;
    background:white;
    border-radius:30px;
    padding:25px;
    position:relative;

    display:flex;
    flex-direction:column;
}

.cart-popup.cart-empty{
    max-height:420px;
}

.cart-close{

position:absolute;

right:20px;

top:15px;

font-size:35px;

cursor:pointer;

}

.cart-item{

background:#f5f7fb;

padding:18px;

border-radius:20px;

margin-top:15px;

}

#cartItems{
    flex:1;
    overflow-y:auto;
    min-height:0;
    margin:15px 0;
    max-height:42vh;
    padding-right:10px;

    scrollbar-width:thin;
    scrollbar-color:#9ca3af transparent;
}

#cartItems::-webkit-scrollbar{
    width:4px;
}

#cartItems::-webkit-scrollbar-track{
    background:transparent;
}

#cartItems::-webkit-scrollbar-thumb{
    background:#bfc7d1;
    border-radius:20px;
}

.remove-btn{

margin-top:10px;

border:none;

background:#ff5f5f;

color:white;

padding:8px 15px;

border-radius:20px;

cursor:pointer;

}

.cart-total{

margin-top:20px;

font-size:20px;

font-weight:bold;

text-align:center;

}

.checkout-btn{

width:100%;

margin-top:20px;

padding:16px;

border:none;

border-radius:30px;

background:#25D366;

color:white;

font-weight:bold;

font-size:18px;

}

#methodModal{

display:none;

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,.55);

backdrop-filter:blur(5px);

z-index:10000;

justify-content:center;

align-items:center;

}

.method-popup{

width:85%;

max-width:350px;

background:white;

padding:30px;

border-radius:30px;

position:relative;

text-align:center;

}

.method-close{

position:absolute;

right:20px;

top:15px;

font-size:30px;

cursor:pointer;

}

.method-popup h2{

margin-bottom:25px;

color:#3c5a6d;

}

.method-btn{

width:100%;

border:none;

padding:20px;

margin-bottom:15px;

border-radius:25px;

cursor:pointer;

font-size:18px;

font-weight:bold;

}

.gift-btn{

background:#49b8f2;

color:white;

}

.id-btn{

background:#eef3f7;

color:#345;

}

.method-price{

margin-top:12px;

font-size:14px;

font-weight:500;

display:block;

}

.selected-item{

background:#82c79a !important;

color:white !important;

pointer-events:none;

opacity:.95;

}

.gift-btn:disabled{

background:#e5e7eb !important;

color:#6b7280 !important;

box-shadow:none;

cursor:not-allowed;

opacity:1;

}

.gift-btn:disabled .method-price{

display:block;

margin-top:14px;

font-size:14px;

font-weight:600;

color:#8b9098 !important;

}

.card{
    position:relative;
    overflow:visible;
}

.label-id{
    position:absolute;

    width:108px;

    top:-15px;

    left:-13px;

    z-index:999;

    pointer-events:none;

    height:auto !important;
}

.catalog-title{

text-align:center;

font-size:28px;

font-weight:bold;

color:#173d5b;

margin-top:20px;

margin-bottom:20px;

}

#patunganModal{

display:none;

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,.55);

backdrop-filter:blur(5px);

z-index:10000;

justify-content:center;

align-items:center;

}

.room-card{

background:#f8f9fc;

border-radius:18px;

padding:20px;

margin-top:20px;

box-shadow:0 3px 12px rgba(0,0,0,.08);

}

.room-card h3{

margin-bottom:15px;

color:#49b8f2;

}

.room-card p{

margin:10px 0;

}

.room-card button{

margin-top:15px;

width:100%;

}

/* =========================
   BUTTON KONFIRMASI PATUNGAN
========================= */

.confirm-btn{

    width:100%;

    margin-top:16px;

    padding:14px 18px;

    border:none;

    border-radius:16px;

    background:linear-gradient(
        135deg,
        #3b82f6,
        #2563eb
    );

    color:#fff;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

    transition:.25s;

    box-shadow:
        0 8px 22px rgba(37,99,235,.35);

}

.confirm-btn:hover{

    transform:translateY(-2px);

    background:linear-gradient(
        135deg,
        #60a5fa,
        #3b82f6
    );

    box-shadow:
        0 10px 28px rgba(59,130,246,.45);

}

.confirm-btn:active{

    transform:scale(.98);

}

.confirm-btn i{

    font-size:15px;

}

/* =========================
   STATUS ROOM LENGKAP
========================= */

.room-info{

margin:18px 0;

padding:18px;

background:#f7fbff;

border:1px solid #bfdbfe;

border-left:5px solid #3b82f6;

border-radius:16px;

}

.room-info-header{

font-size:16px;

font-weight:700;

color:#1d4ed8;

margin-bottom:10px;

}

.room-info-text{

font-size:14px;

line-height:1.8;

color:#475569;

}

/* =========================
   PROGRESS TIMELINE
========================= */

.room-timeline{

    margin-bottom:30px;

}

.timeline-title{

    font-size:15px;

    font-weight:700;

    color:#364152;

    margin-bottom:22px;

}

.timeline-row{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    position:relative;

}

/* Garis horizontal */

.timeline-row::before{

    content:"";

    position:absolute;

    top:20px;

    left:46px;

    right:46px;

    height:4px;

    background:#d9dee7;

    border-radius:999px;

    z-index:0;

}

.timeline-progress{

    position:absolute;

    top:23px;

    left:52px;

    height:4px;

    background:#49b8f2;

    border-radius:20px;

    z-index:1;

    transition:.35s;

}

.timeline-item{
    position:relative;
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
}

.timeline-circle{
    width:42px;
    height:42px;
    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#e5e7eb;
    color:#94a3b8;

    font-size:17px;
    font-weight:700;

    flex-shrink:0;
    transition:.3s;
}

.timeline-circle.active{
    background:#46b7f3;
    color:#fff;
box-shadow:
    0 0 0 6px rgba(70,183,243,.15),
    0 6px 16px rgba(70,183,243,.18);
}

.timeline-circle.done{
    background:#22c55e;
    color:#fff;
    box-shadow:
        0 0 0 6px rgba(34,197,94,.14),
        0 6px 16px rgba(34,197,94,.18);
}

.timeline-text{
    margin-top:10px;
    width:100%;
    text-align:center;

    font-size:11px;
    line-height:1.3;
    color:#6b7280;
}

.progress-wrapper{

display:flex;

justify-content:space-between;

align-items:flex-start;

position:relative;

margin:18px 0 30px;

}

.progress-wrapper::before{

content:"";

position:absolute;

top:22px;

left:55px;

right:55px;

height:4px;

background:#d7deea;

border-radius:20px;

z-index:0;

}

.progress-line-active{

position:absolute;

top:22px;

left:55px;

height:4px;

background:#49b8f2;

border-radius:20px;

z-index:1;

transition:.3s;

}

.progress-step{

width:60px;
height:60px;

font-size:24px;

font-weight:bold;

}

.progress-step.active{

background:#49b8f2;

color:#fff;

box-shadow:

0 0 0 6px rgba(73,184,242,.15),

0 8px 22px rgba(73,184,242,.35);

}

.member-name{

    display:block;

    margin-bottom:8px;

    font-size:18px;

    font-weight:600;

    color:#374151;

    line-height:1.2;

}

.member-empty{
    display:block;
    margin-top:0;
    font-size:11px;
    color:#9aa3b2;
    line-height:1.4;
}

.member-status{
    display:block;
    margin-top:0;
    font-size:11px;
    color:#9aa3b2;
    line-height:1.4;
}

/* ROOM STATUS */
.room-status-title.room-status-active{
    color:#1992ff;
}

.room-status-title.room-status-finish{
    color:#1bbf5c;
}

.room-status-box{

display:flex;
justify-content:flex-start;

margin:10px 0 22px;

}

.room-status-title{

display:inline-flex;
align-items:center;
gap:8px;

padding:7px 15px;

border-radius:999px;

font-size:14px;
font-weight:600;

border:1px solid;

transition:.3s;

}

.room-status-dot{

    width:10px;
    height:10px;

    border-radius:50%;

    background:currentColor;

    box-shadow:0 0 0 3px rgba(255,255,255,.25);

}

.room-status-active{

    color:#2f80ed;

    background:#eef7ff;

    border-color:#9fd1ff;

}

.room-status-finish{

    color:#27ae60;

    background:#effcf4;

    border-color:#8de3b3;

}

/* SKY CODE MEMBER */

.sky-code-box{

margin-top:12px;

padding:12px;

background:#f8fbff;

border:1px solid #d9eaf8;

border-radius:12px;

}

.sky-code-label{

font-size:12px;

color:#64748b;

margin-bottom:6px;

}

.sky-code-value{

display:flex;

justify-content:space-between;

align-items:center;

font-weight:600;

font-size:14px;

}

.copy-sky-btn{

padding:6px 12px;

border:none;

border-radius:8px;

background:#49b8f2;

color:white;

cursor:pointer;

font-size:12px;

}

.member-whatsapp{
    margin-top:6px;
    margin-bottom:8px;
}

.member-contact-label{
    margin-top:0;
    font-size:11px;
    letter-spacing:.8px;
    color:#9ca3af;
      text-transform: none;
}

.member-contact-value{
    margin-top:1px;
    margin-bottom:10px;
    font-size:15px;
    color:#b8bcc5;
    font-weight:400;
}

.member-role-icon{
    margin-right:8px;
    font-size:18px;
    vertical-align:middle;
}

.leader-icon{
    color:#f4b400;
    font-size:18px;
}

.member-role{
    align-items:center;
    gap:8px;

    font-size:17px;
    font-weight:700;
    color:#4b5563;

    margin-bottom:4px;
}

.member-header{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:8px;
}

.member-header i{
    font-size:32px;
}

.room-info-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    cursor:pointer;
    user-select:none;
}

.instruction-arrow{
    transition:.25s ease;
}

.instruction-arrow.rotate{
    transform:rotate(180deg);
}

.instruction-content{
    max-height:0;
    overflow:hidden;
    opacity:0;
    transition:
        max-height .35s ease,
        opacity .25s ease,
        margin-top .25s ease;
}

.instruction-content.show{
    max-height:600px;
    opacity:1;
    margin-top:12px;
}

/* =========================
   TRACKING IAP PREMIUM
========================= */

.order-header-card{
    background:#ffffff;
    border:2px solid #55d8ff;
    border-radius:26px;
    padding:22px;
    display:flex;
    align-items:center;
    gap:18px;
    margin-top:20px;
    box-shadow:0 10px 25px rgba(73,184,242,.10);
}

.order-header-icon{
    width:72px;
    height:72px;
    border-radius:50%;
    border:2px solid #55d8ff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:42px;
    background:#f8feff;
}

.order-header-status{
    flex:1;
}

.order-header-label{
    font-size:14px;
    color:#6b7280;
    margin-bottom:4px;
}

.order-header-title{
    font-size:20px;
    font-weight:700;
    color:#2cb8ef;
    margin-bottom:10px;
}

.order-header-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 18px;
    border-radius:999px;
    border:2px solid #55d8ff;
    color:#2cb8ef;
    font-weight:600;
    background:#f7feff;
}

.detail-card{
    margin-top:20px;
    background:#fff;
    border-radius:24px;
    padding:22px;
    box-shadow:0 8px 25px rgba(0,0,0,.05);
}

.detail-title{
    font-size:18px;
    font-weight:700;
    margin-bottom:18px;
    color:#374151;
}

.detail-table{
    border:1px solid #edf1f5;
    border-radius:18px;
    overflow:hidden;
}

.detail-row{
    display:flex;
    justify-content:space-between;
    padding:15px 18px;
    border-bottom:1px solid #edf1f5;
}

.detail-row:last-child{
    border-bottom:none;
}

.detail-left{
    color:#7b8794;
}

.detail-right{
    font-weight:600;
    color:#374151;
}

.progress-card{
    margin-top:20px;
    background:#fff;
    border-radius:24px;
    padding:22px;
    box-shadow:0 8px 25px rgba(0,0,0,.05);
}

.progress-box{
    margin-top:15px;
    background:#081326;
    border:2px solid #39d5ff;
    border-radius:22px;
    padding:22px;
    display:flex;
    gap:18px;
    align-items:center;
}

.progress-icon{
    font-size:46px;
}

.progress-title{
    color:#39d5ff;
    font-size:22px;
    font-weight:700;
}

.progress-desc{
    color:white;
    margin-top:5px;
    line-height:1.6;
}

.help-card{
    margin-top:20px;
    background:#eef8ff;
    border:2px solid #ccecff;
    border-radius:24px;
    padding:20px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    cursor:pointer;
}

.help-title{
    font-weight:700;
    font-size:18px;
    color:#1f2937;
}

.help-desc{
    margin-top:5px;
    color:#4b5563;
    line-height:1.5;
}

.help-arrow{
    font-size:28px;
    color:#6b7280;
}

/* ===== DETAIL PESANAN ===== */

.track-section{

    margin-top:24px;

}

.track-section-title{

    font-size:24px;

    font-weight:700;

    color:#364b60;

    margin-bottom:18px;

}

.track-detail-card{

    background:#fff;

    border-radius:24px;

    overflow:hidden;

    box-shadow:0 6px 24px rgba(0,0,0,.06);

}

.track-detail-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 22px;

    border-bottom:1px solid #edf2f7;

}

.track-detail-row:last-child{

    border-bottom:none;

}

.track-detail-row span{

    color:#7b8794;

    font-size:16px;

}

.track-detail-row strong{

    color:#2f3d4a;

    font-size:16px;

    font-weight:600;

}

/* =====================================
   TRACKING POPUP V2
===================================== */

.track-card{

    margin-top:22px;

}

.track-status-box{

    display:flex;
    align-items:center;
    gap:18px;

    padding:18px;

    border:2px solid #dff5fb;

    border-radius:22px;

    background:#fff;

    margin-bottom:20px;

}

.track-status-icon{

    width:62px;
    height:62px;

    border-radius:50%;

    background:#f2fbff;

    border:1px solid #bfeeff;

    display:flex;
    justify-content:center;
    align-items:center;

    font-size:30px;

    flex-shrink:0;

}

.track-status-content{

    display:flex;
    flex-direction:column;
    justify-content:center;

}

.track-status-label{

    font-size:15px;
    color:#7b8794;
    margin-bottom:6px;

}

.track-status-title{

    margin-top:3px;

    font-size:22px;

    font-weight:700;

    color:#00a8d7;

}

.track-status-badge{

    display:inline-flex;

    align-items:center;

    gap:7px;

    margin-top:10px;

    padding:6px 14px;

    border-radius:999px;

    background:#e9f9ff;

    color:#0099cb;

    font-size:12px;

    font-weight:700;

}

.track-dot{

    width:8px;
    height:8px;

    border-radius:50%;

    background:#00b7e8;

}

/* ===============================
   TRACK DETAIL
=============================== */

.track-detail-card{

    background:#fff;

    border:1px solid #eef2f7;

    border-radius:22px;

    padding:20px;

    margin-bottom:20px;

}

.track-section-title{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:18px;

    font-size:16px;

    font-weight:700;

    color:#374151;

}

.track-detail-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:14px 0;

    border-bottom:1px solid #f4f6f9;

}

.track-detail-row:last-child{

    border-bottom:none;

    padding-bottom:0;

}

.track-detail-left{

    display:flex;

    align-items:center;

    gap:12px;

    color:#6b7280;

    font-size:14px;

}

.track-detail-left i{

    width:18px;

    text-align:center;

    color:#7b8794;

    font-size:15px;

}

.track-detail-right{

    font-size:14px;

    font-weight:600;

    color:#111827;

    text-align:right;

}

/* ===============================
   TRACK PROGRESS
=============================== */

.track-progress-card{

    margin-bottom:20px;

}

.track-progress-box{

    display:flex;

    align-items:center;

    gap:16px;

    background:#0f172a;

    color:#fff;

    padding:18px;

    border-radius:22px;

    box-shadow:
        0 10px 30px rgba(15,23,42,.18);

}

.track-progress-icon{

    width:56px;
    height:56px;

    border-radius:18px;

    background:rgba(255,255,255,.08);

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:28px;

    flex-shrink:0;

}

.track-progress-title{

    font-size:16px;

    font-weight:700;

    margin-bottom:5px;

}

.track-progress-desc{

    font-size:13px;

    color:rgba(255,255,255,.72);

    line-height:1.5;

}

/* ===============================
   TRACK HELP
=============================== */

.track-help-card{

    border:1px solid #eef2f7;

    border-radius:22px;

    padding:18px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    cursor:pointer;

    transition:.25s;

}

.track-help-card:hover{

    transform:translateY(-2px);

    box-shadow:0 10px 25px rgba(0,0,0,.06);

}

.track-help-left{

    display:flex;

    align-items:center;

    gap:14px;

}

.track-help-icon{

    width:52px;

    height:52px;
    
    min-width:52px;

    border-radius:16px;

    background:#ecfeff;

    color:#06b6d4;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:22px;

}

.track-help-title{

    font-size:15px;

    font-weight:700;

    color:#374151;

    margin-bottom:4px;

}

.track-help-desc{

    font-size:13px;

    color:#6b7280;

    line-height:1.5;

}

.track-help-arrow{

    color:#9ca3af;

    font-size:18px;

}

.status-timer{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:4px;
    margin-top:8px;

    font-size:10px;
    font-weight:500;
    color:#35b7f3;
}

.status-timer i{
    font-size:11px;
}

#countdownHero{
    font-weight:600;
}

.timer-icon{
    font-size:14px;
}

/* =========================
   TIMELINE DESCRIPTION
========================= */

.timeline-description{

    margin-top:18px;

    text-align:center;

    font-size:14px;

    font-weight:500;

    line-height:1.6;

    color:#6b7280;

    background:#f8fbff;

    border:1px solid #e6f2ff;

    border-radius:14px;

    padding:12px 16px;

}

.role-you{

    display:inline-flex;
    align-items:center;

    margin-left:6px;

    padding:3px 10px;

    border-radius:999px;

    background:linear-gradient(180deg,#5bc4ff,#2ea7ff);

    color:#fff;

    font-size:11px;

    font-weight:700;

    letter-spacing:.5px;

    vertical-align:middle;

    box-shadow:0 2px 8px rgba(46,167,255,.25);

}

/* ===================================
   DESKTOP RESPONSIVE
=================================== */

@media (min-width:992px){

    /* ==========================
       LAYOUT
    ========================== */

    body{
        background:#eef2f7;
    }

    .site-container{
        width:100%;
        max-width:1200px;
        margin:0 auto;
        background:#f7f8fc;
        min-height:100vh;
    }

    .hero,
    .category,
    .banner-card,
    .products,
    .latest,
    .faq,
    footer{
        width:1200px;
        max-width:95%;
        margin-left:auto;
        margin-right:auto;
    }

    /* ==========================
       HERO
    ========================== */

    .hero{
        height:580px;
        border-radius:28px;
        overflow:hidden;
    }

    .hero-content{
        bottom:70px;
    }

    .logo{
        font-size:42px;
    }

    .hero h1{
        font-size:64px;
    }

    .hero p{
        font-size:22px;
    }

    .days{
        font-size:22px;
    }

    .menu-btn{
        width:64px;
        height:64px;
        top:35px;
        left:35px;
        font-size:24px;
    }

    .login-btn{
        top:35px;
        right:35px;
        padding:18px 34px;
        font-size:18px;
    }

    /* ==========================
       CATEGORY
    ========================== */

    .category{
        justify-content:center;
        gap:18px;
        padding:35px 0;
    }

    .category button{
        padding:16px 30px;
        font-size:17px;
    }

    /* ==========================
       BANNER
    ========================== */

    .banner-card img{
        border-radius:32px;
    }

    .banner-card h2{
        font-size:52px;
        margin-top:28px;
    }

    .price{
        width:480px;
        margin:30px auto 0;
        font-size:28px;
    }

    /* ==========================
       PRODUCTS
    ========================== */

    .products{
        grid-template-columns:repeat(4,1fr);
        gap:28px;
        padding:40px 0;
    }

    .card{
        border-radius:28px;
        transition:
            transform .25s ease,
            box-shadow .25s ease;
    }

    .card:hover{
        transform:translateY(-8px);
        box-shadow:0 18px 45px rgba(0,0,0,.12);
    }

.card > img:not(.label-id){

    width:100%;

    height:auto;

    display:block;

}

    .card button{
        width:85%;
        font-size:18px;
        padding:15px;
    }

    .card h3{
        font-size:20px;
        padding:0 20px 24px;
    }

/* ==========================
   EVENT
========================== */

.latest{
    padding:60px 0;
}

.latest h2{
    font-size:42px;
    text-align:center;
    margin-bottom:40px;
}

.event-card{
    max-width:820px;
    margin:0 auto;
    border-radius:30px;
    overflow:hidden;
}

.event-card img{
    width:100%;
    display:block;
}

.event-card div{
    padding:28px;
    font-size:24px;
}


/* ==========================
   FAQ
========================== */

.faq{
    padding:60px 0;
}

.faq h2{
    font-size:42px;
    text-align:center;
    margin-bottom:40px;
}

.faq-item{
    max-width:900px;
    margin:0 auto 20px;
    padding:24px 28px;
    font-size:20px;
    border-radius:24px;
    transition:.25s;
}

.faq-item:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 30px rgba(0,0,0,.08);
}


/* ==========================
   FOOTER
========================== */

footer{
    padding:70px 0 120px;
}

.footer-logo{
    font-size:42px;
}

footer p{
    font-size:18px;
    margin-top:14px;
}

.social{
    gap:40px;
    font-size:34px;
    margin:35px 0;
}

footer span{
    font-size:15px;
    color:#7b8794;
}
}
/* ===================================
   PROMO POPUP
=================================== */

#promoModal{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.55);

    display:none;

    justify-content:center;

    align-items:center;

    z-index:9999;

    padding:20px;

}

.promo-popup{

    width:100%;

    max-width:420px;

    background:#f7f8fc;

    border-radius:28px;

    overflow:visible;

    position:relative;

    animation:promoShow .25s ease;

    box-shadow:0 20px 60px rgba(0,0,0,.25);

}

@keyframes promoShow{

    from{

        opacity:0;

        transform:translateY(20px) scale(.96);

    }

    to{

        opacity:1;

        transform:none;

    }

}

.promo-close{
    position:absolute;
    top:5px;
    right:12px;

    width:34px;
    height:34px;

    border:none;
    border-radius:50%;

    background:#fff;
    color:#2f4b63;

    font-size:16px;
    font-weight:600;

    display:flex;
    align-items:center;
    justify-content:center;

    box-shadow:0 4px 10px rgba(0,0,0,.10);

    cursor:pointer;
    transition:.2s;
}

.promo-close:hover{
    transform:scale(1.08);
}

.promo-header{

    background:linear-gradient(135deg,#49b8f2,#6b7cff);

    color:#fff;

    font-size:18px;

    font-weight:700;

    text-align:center;

    padding:12px 20px;

}

.promo-image{

    display:block;

    width:46%;
    max-width:150px;

    margin:18px auto 12px;

    border-radius:20px;

}
.promo-popup h2{

    text-align:center;

    font-size:17px;

    font-weight:700;

    line-height:1.2;

    color:#173d5b;

    margin:4px 16px;

}

.promo-normal{

    text-align:center;

    color:#777;

    margin-top:10px;

    font-size:15px;

}

.promo-normal span{

    display:block;

    margin-top:3px;

    text-decoration:line-through;

    color:#9a9a9a;

    font-size:17px;

}

.promo-price{
    text-align:center;
    font-size:26px;
    font-weight:700;
    color:#49b8f2;
    margin-top:4px;
}

.promo-save{

    width:max-content;

    margin:8px auto;

    background:#ff5252;

    color:white;

    padding:6px 16px;

    border-radius:999px;

    font-size:13px;

    font-weight:700;

}

.promo-note{
    margin:12px 20px;
    padding:10px 14px;

    background:#edf7ff;
    border-radius:18px;

    color:#36556f;
    font-size:14px;
    line-height:1.45;

    display:flex;
    flex-direction:column;
    gap:8px;
}

.promo-note b{

    display:block;

    margin-bottom:6px;

    font-size:15px;

    color:#173d5b;

}

.promo-note strong{
    display:inline;
    font-size:15px;
    line-height:1.4;
}

.promo-btn{

    width:calc(100% - 40px);
    margin:-8px 20px 16px;

    height:56px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    border:none;
    border-radius:18px;

    background:linear-gradient(135deg,#4fbaf8,#5b7cff);

    color:#fff;
    font-size:16px;
    font-weight:700;

    box-shadow:0 8px 18px rgba(91,124,255,.28);

    transition:.25s;
}

.promo-btn i{
    font-size:18px;
}

.promo-btn:hover{
    transform:translateY(-1px);
    box-shadow:0 12px 22px rgba(91,124,255,.32);
}

.promo-btn:active{
    transform:scale(.97);
}

.promo-note-title{
    line-height:1.35;
    color:#36556f;
    font-size:16px;
    font-weight:500;
}

.promo-note-title strong{
    display:block;
    margin-top:2px;
    font-size:18px;
    font-weight:700;
    color:#173d5b;
}

.promo-note-desc{
    color:#5d7488;
    font-size:15px;
    line-height:1.5;
}

/* =========================
   PROMO SLIDER
========================= */

.promo-slider-nav{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:18px;

    margin:8px 0 10px;

}

.promo-arrow{

    width:38px;

    height:38px;

    border:none;

    border-radius:50%;

    background:#edf4fb;

    color:#49b8f2;

    font-size:15px;

    cursor:pointer;

    transition:.25s;

    display:flex;

    align-items:center;

    justify-content:center;

}

.promo-arrow:hover{

    background:#49b8f2;

    color:#fff;

    transform:scale(1.08);

}

#promoDots{

    display:flex;

    align-items:center;

    gap:8px;

}

.promo-dot{

    width:9px;

    height:9px;

    border-radius:50%;

    background:#d4dbe6;

    transition:.25s;

}

.promo-dot.active{

    width:24px;

    border-radius:20px;

    background:#49b8f2;

}

/* =========================
   PROMO SLIDE ANIMATION
========================= */

#promoSlider{

    overflow:hidden;

    position:relative;

}

.promo-slide{

    animation-duration:.35s;

    animation-fill-mode:both;

}

.promo-slide.next{

    animation-name:slideFromRight;

}

.promo-slide.prev{

    animation-name:slideFromLeft;

}

@keyframes slideFromRight{

    from{

        opacity:0;

        transform:translateX(45px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes slideFromLeft{

    from{

        opacity:0;

        transform:translateX(-45px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

/* =========================
   PROMO METHOD NAV
========================= */

.promo-method-nav{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    margin:4px 0 16px;

}

.promo-method-arrow{

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    color:#55b7ff;

    background:#eef7ff;

    transition:.25s;

}

.promo-method-arrow:hover{

    background:#d8eeff;

    transform:scale(1.08);

}

.promo-method-center{

    display:flex;

    align-items:center;

    gap:16px;

}

.promo-method-center span{

    font-size:13px;

    font-weight:600;

    color:#5d6b7a;

    transition:.25s;

}

.promo-method-dots{

    display:flex;

    gap:8px;

}

.promo-method-dot{

    width:12px;

    height:12px;

    border-radius:50%;

    background:#d7dde7;

    transition:.25s;

}

.promo-method-dot.active{

    width:23px;

    border-radius:999px;

    background:#55b7ff;

}

/* =========================
   ANIMASI SWITCH GIFT / ID
========================= */

#promoPriceArea{

    transition:
        opacity .18s ease,
        transform .18s ease;

}

.promo-switch-out{

    opacity:0;

    transform:translateX(-20px);

}

.promo-switch-in{

    opacity:1;

    transform:translateX(0);

}

/* =========================
   PROMO METHOD ARROW
========================= */

.promo-method-arrow.disabled{

    opacity:.35;

    pointer-events:none;

    cursor:default;

}

/* =========================
   SIDE NAVIGATION
========================= */

.promo-popup{

    position:relative;

}

.promo-side-arrow{

    position:absolute;

    top:235px;

    width:44px;
    height:44px;

    border:none;
    border-radius:50%;

    background:#ffffff;

    color:#55B7FF;

    font-size:20px;

    cursor:pointer;

    box-shadow:0 8px 18px rgba(0,0,0,.14);

    transition:.2s;

    z-index:100;

}

.promo-side-arrow:hover{

    transform:scale(1.08);

}

.promo-side-left{

    left:-22px;

}

.promo-side-right{

    right:-22px;

}

.promo-side-arrow.disabled{

    opacity:.35;

    pointer-events:none;

    cursor:default;

    transform:none;

}

/* ==========================================
   SKY STYLE CATALOG - 2 KOLOM
   ========================================== */

.catalog-container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 280px)); /* Dikunci Presisi 2 Kolom */
    gap: 25px 20px;
    justify-content: center;
    padding: 20px 10px;
    max-width: 650px;
    margin: 0 auto;
}

/* Kartu Produk */
.product-card {
    background-color: rgba(235, 245, 255, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 35px;
    width: 100%;
    padding: 15px;
    padding-top: 0;
    text-align: center;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
    position: relative;
    margin-top: 95px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 3px solid rgba(255, 255, 255, 0.6);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}

.product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 35px rgba(0, 0, 0, 0.3);
}

/* Gambar Produk & Animasi Melayang */
.product-image-wrapper {
    position: relative;
    width: 100%;
    max-width: 230px;
    height: 270px;
    margin-top: -95px;
    margin-bottom: 12px;
    border-radius: 28px;
    overflow: visible;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    border: 3.5px solid rgba(255, 255, 255, 0.9);
    background-color: #2b5876;
    animation: floating 3s ease-in-out infinite;
    will-change: transform;
}

@keyframes floating {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
    100% { transform: translateY(0px); }
}

.product-card:nth-child(even) .product-image-wrapper {
    animation-delay: 1.5s; 
}

.product-image-wrapper img.main-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background-color: #3b7dc4;
    border-radius: 24px;
    display: block;
}

/* Corner Ribbon / Label Pita */
.corner-ribbon {
    position: absolute;
    top: -16px;
    left: -16px;
    width: 120px;
    height: 120px;
    z-index: 30;
    pointer-events: none;
}

.corner-ribbon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.4));
}

/* Judul Kapsul Produk */
.product-title {
    background: linear-gradient(180deg, #5dc4ff 0%, #32a1e8 100%);
    color: #ffffff;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.3px;
    line-height: 1.25;
    padding: 10px 12px;
    border-radius: 20px;
    width: 90%;
    margin-bottom: 10px;
    box-shadow: 0 4px 12px rgba(50, 161, 232, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.4);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    text-transform: uppercase;
    box-sizing: border-box;
}

/* Tombol Harga & Action (Default) */
.product-price-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    color: #17386d;
    font-family: 'Nunito', sans-serif;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: -0.2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 100%;
    padding: 6px 12px;
    border-radius: 20px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}

.product-price-btn:hover {
    transform: scale(1.05);
}

.old-price {
    font-size: 11px;
    font-weight: 800;
    color: #e63946;
    text-decoration: line-through;
    opacity: 0.85;
}

/* ==========================================
   OPSI 1: EFEK MODERN GLOW (SAAT DIPILIH)
   ========================================== */

/* 1. Perubahan Warna & Glow pada Kartu Terpilih */
.product-card.selected,
.product-card.active {
    border-color: #10b981 !important; /* Hijau Emerald Modern */
    box-shadow: 0 12px 32px rgba(16, 185, 129, 0.3) !important;
}

/* 2. Style Tombol Harga Saat Dipilih */
.product-price-btn.selected,
.product-price-btn.active,
.product-card.selected .product-price-btn,
.product-card.active .product-price-btn {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 8px 14px !important;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.45) !important;
    transform: scale(1.02);
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
}

/* Hilangkan garis harga coret saat sudah dipilih agar bersih */
.product-price-btn.selected .old-price,
.product-price-btn.active .old-price,
.product-card.selected .old-price {
    display: none !important;
}

/* 3. Ikon Centang Bulat Modern Secara Otomatis */
.product-price-btn.selected::before,
.product-price-btn.active::before,
.product-card.selected .product-price-btn::before,
.product-card.active .product-price-btn::before {
    content: "✓";
    font-size: 12px;
    font-weight: 900;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.25);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.5);
}

/* ==========================================
   RESPONSIF MOBILE (HP) - PAS & PRESISI
   ========================================== */

@media (max-width: 500px) {
    .catalog-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 35px 12px; 
        padding: 15px 8px;
    }

    .product-card {
        border-radius: 25px;
        padding: 8px;
        padding-top: 0;
        margin-top: 65px;
    }

    /* Bingkai otomatis + izin pita menonjol keluar */
    .product-image-wrapper {
        position: relative;
        width: 100%;
        height: auto !important;
        margin-top: -65px;
        border-radius: 20px;
        border-width: 2.5px;
        background: transparent !important;
        animation: floatSmooth 3.5s ease-in-out infinite;
        overflow: visible !important; /* Diubah ke visible agar ribbon bisa menonjol keluar */
    }

    /* Gambar pas tanpa celah & tanpa potong */
    .product-image-wrapper img.main-img {
        width: 100% !important;
        height: auto !important;
        object-fit: initial !important;
        background-color: transparent !important;
        border-radius: 17px;
        display: block;
        padding: 0;
        box-sizing: border-box;
    }

    /* Label Ribbon Melayang Keluar Bingkai */
    .corner-ribbon {
        position: absolute;
        width: 85px;
        height: 85px;
        top: -12px;
        left: -12px;
        z-index: 30; /* Dipastikan melayang di atas bingkai & gambar */
        pointer-events: none;
    }

    .product-title {
        font-size: 11px;
        padding: 7px 6px;
        border-radius: 15px;
        width: 95%;
        margin-top: 8px;
    }

    .product-price-btn {
        font-size: 13px;
        position: relative;
        z-index: 10;
    }

    .product-price-btn.selected,
    .product-price-btn.active,
    .product-card.selected .product-price-btn {
        font-size: 12px !important;
        padding: 6px 10px !important;
    }
}

/* KEYFRAMES ANIMASI MELAYANG HALUS (MOBILE) */
@keyframes floatSmooth {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-6px); }
    100% { transform: translateY(0px); }
}

/* ==========================================
   TOMBOL CHAT MELAYANG (POSITIF DI ATAS NAVBAR)
   ========================================== */

.floating-chat-btn {
    position: fixed;
    /* Ditinggikan ke 95px + memperhitungkan layar HP berponi/gesture bar */
    bottom: calc(95px + env(safe-area-inset-bottom)); 
    right: 20px;
    z-index: 9999; /* Z-index dinaikkan agar pasti di atas toolbar navigasi */
    
    display: flex;
    align-items: center;
    gap: 8px;
    
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    color: #ffffff;
    text-decoration: none;
    
    padding: 12px 20px;
    border-radius: 50px;
    box-shadow: 0 10px 25px rgba(37, 211, 102, 0.4);
    
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 800;
    
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: pulseGlow 2s infinite;
}

.floating-chat-btn svg {
    width: 24px;
    height: 24px;
    fill: #ffffff;
}

.floating-chat-btn:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 15px 30px rgba(37, 211, 102, 0.6);
}

@keyframes pulseGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

/* Penyesuaian khusus tampilan HP */
@media (max-width: 500px) {
    .floating-chat-btn {
        /* Ditinggikan ke 90px agar punya jarak lega di atas toolbar HP */
        bottom: calc(90px + env(safe-area-inset-bottom)); 
        right: 15px;
        padding: 12px;
        border-radius: 50%;
    }

    .floating-chat-btn .chat-text {
        display: none;
    }
}

/* ===================================
   PRODUCT DETAIL POPUP (Gaya Baru)
=================================== */
.product-detail-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    z-index: 99999;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.product-detail-content {
    background: #ffffff;
    width: 100%;
    max-width: 380px;
    border-radius: 35px;
    padding: 25px 20px;
    position: relative;
    text-align: center;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
    animation: popupScale 0.25s ease-in-out;
    max-height: 90vh;
    overflow-y: auto;
}

@keyframes popupScale {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.product-detail-close {
    position: absolute;
    top: 18px;
    right: 22px;
    font-size: 28px;
    color: #888;
    cursor: pointer;
    font-weight: bold;
}

.product-detail-content .modal-img {
    width: 100%;
    max-height: 280px;
    object-fit: contain;        /* Gambar tetap utuh dan full tidak terpotong */
    border-radius: 20px;
    margin-bottom: 15px;
    background: #ffffff;        /* Diubah ke putih agar sisa ruang di kiri-kanan menyatu bersih dengan popup */
}

.product-detail-content .modal-title {
    font-size: 20px;
    font-weight: 700;
    color: #173d5b;
    margin-bottom: 8px;
}

.product-detail-content .modal-desc {
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
    margin-bottom: 15px;
    padding: 0 10px;
}

/* Teks ajakan "Tambahkan ke keranjang" di atas tombol */
.product-detail-content .modal-action-label {
    font-size: 13px;
    font-weight: 700;
    color: #49b8f2;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Teks "Atau" di antara tombol */
.product-detail-content .modal-or-text {
    font-size: 12.5px;
    color: #94a3b8;
    margin: 10px 0;
    font-weight: 600;
}

/* Tombol Utama (Gift) */
.product-detail-content .modal-action-btn {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 30px;
    background: #49b8f2;
    color: white;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(73, 184, 242, 0.35);
    transition: 0.2s;
}

/* Tombol Kedua (ID) - Warna sedikit disesuaikan agar variatif tapi tetap senada */
.product-detail-content .modal-action-btn.id-version {
    background: #3b7dc4;
    box-shadow: 0 8px 20px rgba(59, 125, 196, 0.35);
}

.product-detail-content .modal-action-btn:active {
    transform: scale(0.98);
}

.product-detail-content .modal-info {
    margin-top: 12px;
    font-size: 12px;
    color: #94a3b8;
}