/*========================================
MOBILE
========================================*/
@media (max-width:768px){

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

.main-wrap{
    max-width:100%;
    min-width:100%;
    margin:80px auto 0;
    padding:0 16px;
}

.faq-hero,
.faq-section{
    padding:30px 0;
    background: none !important;
}

.faq-container{
    padding:24px 18px;
    border-radius:16px;
    margin-top:-30px;
    background-color: #fff !important;
}

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

.faq-label{
    font-size:12px;
    padding:6px 14px;
    margin-bottom:14px;
}

.faq-title{
    font-size:24px;
    line-height:1.2;
    margin-bottom:14px;
}

.faq-subtitle{
    max-width:100%;
    font-size:14px;
    line-height:1.6;
}

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

.faq-section{
    padding:10px 0 40px;
}

.faq-category{
    margin-bottom:35px;
}

.faq-category-title{
    font-size:20px;
    padding-left:14px;
    margin-bottom:18px;
}

.faq-list{
    gap:14px;
}

.faq-question{
    padding:18px;
    font-size:15px;
    line-height:1.5;
    gap:12px;
}

.faq-icon{
    font-size:22px;
    flex-shrink:0;
}

.faq-answer-inner{
    padding:0 18px;
    font-size:14px;
    line-height:1.5;
}

.faq-item.active .faq-answer-inner{
    padding:0 18px 18px;
}

/*========================================
BENEFIT GRID
========================================*/

.faq-grid{
    margin-top:20px;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    column-gap:10px;
    row-gap:15px;
    align-items:start;
}

.faq-card{
    padding:12px 10px !important;
    margin:0 !important;
    min-height:auto !important;
    height:auto !important;
}
.faq-card-link{
    display:block;
    text-decoration:none;
    color:inherit;
}
/* Card terakhir di tengah */
.faq-card:nth-child(7){
    grid-column:span 2;
}

.faq-card::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:5px;

    background:linear-gradient(
        90deg,
        #123578,
        #2563eb,
        #c8a650
    );

    transform:scaleX(0);
    transform-origin:center;
    transition:.35s ease;
}

.faq-card:hover::before,
.faq-card.active::before{
    transform:scaleX(1);
}

.faq-card:hover,
.faq-card.active{
    transform:translateY(-8px);
    box-shadow:0 20px 45px rgba(18,53,120,.12);
}
/*========================================
ICON
========================================*/

.faq-icon2{
    width:30px !important;
    height:30px !important;
    margin-bottom:18px;
}

.svg-icon{
    width:34px;
    height:34px;
}

/*========================================
CARD CONTENT
========================================*/

.faq-card h3{
    font-size:14px !important;
    margin-bottom:16px;
    line-height:1.3;
}

.faq-line{
    margin-bottom:16px;
}

.faq-card p{
    font-size:12px !important;
    line-height:1.7;
    padding:0;
}

/*========================================
CONTACT
========================================*/

.faq-contact-card{
    margin-top:-30px;
   
}

.faq-contact-label{
    font-size:12px;
    padding:6px 14px;
}

.faq-contact-title{
    font-size:24px;
    line-height:1.3;
}

.faq-contact-text{
    font-size:15px;
    line-height:1.7;
}

.faq-contact-action{
    display:flex;
    flex-direction:row;
    gap:10px;
    margin-top:24px;
}

.faq-contact-btn{
    flex:1;
    width:auto;
    height:40px;
    padding:0 10px;
    border-radius:12px;
}

.faq-btn-icon{
    width:34px;
    height:34px;
    border-width:2px;
}

.faq-btn-icon svg{
    width:18px;
    height:18px;
}

.faq-btn-divider{
    height:24px;
    width:2px;
    margin:0 8px;
}

.faq-btn-text{
    font-size:13px;
    font-weight:600;
    white-space:nowrap;
}

/*========================================
CTA
========================================*/

.faq-cta{
    margin:50px 0;
}

.faq-cta-card{
    padding:28px 20px;
}

.faq-cta-title{
    font-size:24px;
    line-height:1.3;
}

.faq-cta-text{
    font-size:15px;
    line-height:1.7;
    margin-bottom:24px;
}

.faq-cta-btn{
    width:100%;
    justify-content:center;
    padding:16px 20px;
    font-size:16px;
}

.faq-hero,
.faq-section,
.faq-card{
    background-color: #fff;
    position: relative !important;
    isolation: isolate;
}

.faq-hero::before,
.faq-hero::after,
.faq-section::before,
.faq-section::after{
    display:none !important;
    content:none !important;
}
/*========================================
FLOAT BUTTON
========================================*/

.bayar-float,
.whatsapp-float{

    position:fixed;
    right:20px;

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

    padding:4px 10px 4px 16px;

    text-decoration:none;

    border-radius:999px;

    /* Glass Background */
    background:rgba(255,255,255,.65);

    backdrop-filter:blur(30px) saturate(220%);
    -webkit-backdrop-filter:blur(30px) saturate(220%);

    box-shadow:
        0 12px 35px rgba(18,53,120,.10),
        0 4px 12px rgba(37,99,235,.06),
        inset 0 1px 0 rgba(255,255,255,.95),
        inset 0 -1px 0 rgba(255,255,255,.15);

    border-radius:999px;

    overflow:hidden;

    transition:.25s ease;

    z-index:9999;
}

/* ==========================
   Gradient Border
========================== */

.bayar-float::after,
.whatsapp-float::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    padding:2px;

    background:linear-gradient(
        90deg,
        #123578,
        #2563eb,
        #c8a650
    );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;
    mask-composite:exclude;

    pointer-events:none;
}

/* ==========================
   Glass Reflection
========================== */

.bayar-float::before,
.whatsapp-float::before{

    content:"";

    position:absolute;

    top:2px;
    left:8px;
    right:8px;

    height:45%;

    border-radius:999px;

    background:linear-gradient(
        180deg,
        rgba(255,255,255,.95),
        rgba(255,255,255,.45),
        transparent
    );

    pointer-events:none;
}

/* Position */

.bayar-float{
    bottom:20px;
}



/* Text */

.float-text{
    font-size:14px;
    font-weight:700;
    color:#123578;
    white-space:nowrap;
    letter-spacing:.2px;
}

/* Icon */

.float-icon{
    width:46px;
    height:46px;
    object-fit:contain;
    display:block;
    flex-shrink:0;
}

/* Tap */

.bayar-float:active,
.whatsapp-float:active{

    transform:scale(.96);

}

}