/* =========================================================
   DIVARA PSYCHOLOGY SPACE — style5.css
   Dirapikan & disusun ulang mengikuti urutan section di home.php
   Semua duplikasi rule sudah digabung, media query dikelompokkan
   per komponen supaya mudah dicari & di-maintain.
   ========================================================= */

/* =========================
   1. ROOT VARIABLES
   ========================= */
:root{
    --primary:#17766B;
    --primary-dark:#0F5A51;
    --secondary:#F4B860;
    --bg:#ffffff;
    --card:#ffffff;
    --text:#1f2937;
    --border:#e5e7eb;
    --shadow:0 10px 35px rgba(0,0,0,.08);
}

/* =========================
   2. RESET & BASE
   ========================= */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    background:#fff;
    color:var(--text);
    line-height:1.6;
    padding-top:100px; /* jarak aman dari navbar fixed */
}

img{
    max-width:100%;
    height:auto;
}

a{
    font-family:'Poppins',sans-serif;
}

/* Pastikan semua elemen teks/form konsisten pakai Poppins */
button,
input,
select,
textarea,
option,
label,
span,
div,
p,
h1,h2,h3,h4,h5,h6,
table,
th,
td{
    font-family:'Poppins',sans-serif;
}

table{
    font-family:'Poppins',sans-serif;
}

/* =========================
   3. LAYOUT UTILITIES
   ========================= */
.container{
    width:95%;
    max-width:1400px;
    margin:auto;
}

.welcome{
    padding:25px 0;
}

.welcome-top{
    display:flex;
    flex-direction:column;
    gap:25px;
}

.logo-box{
    text-align:center;
}

.logo-box img{
    width:220px;
    max-width:100%;
    border-radius:20px;
}

.welcome-text{
    text-align:center;
}

/* Judul & subjudul section (dipakai berkali-kali di home.php) */
.title{
    text-align:center;
    margin-top:70px;
    color:var(--primary);
    font-size:34px;
    font-weight:700;
}

.subtitle{
    text-align:center;
    max-width:800px;
    margin:15px auto 40px;
    color:#6b7280;
}

/* =========================
   4. NAVBAR
   ========================= */
.navbar{
    position:fixed;
    top:0;
    left:0;
    right:0;
    width:100%;
    height:85px;
    background:#ffffff;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 50px;
    border-bottom:1px solid #e5e7eb;
    box-shadow:0 5px 25px rgba(0,0,0,.08);
    z-index:99999;
}

.nav-logo{
    display:flex;
    align-items:center;
}

.nav-logo img{
    height:55px;
    width:auto;
    display:block;
    border-radius:12px;
}

.nav-toggle{
    display:none;
    font-size:28px;
    color:#17766B;
    cursor:pointer;
}

.nav-menu{
    display:flex;
    align-items:center;
    gap:12px;
}

.nav-menu a{
    text-decoration:none;
    color:#17766B;
    font-weight:600;
    font-size:15px;
    display:flex;
    align-items:center;
    gap:8px;
    padding:12px 18px;
    border-radius:12px;
    transition:.3s;
    font-family:'Poppins',sans-serif;
}

.nav-menu a:hover{
    background:#17766B;
    color:#fff;
}

.nav-menu a i{
    font-size:16px;
    line-height:1;
}

.logout-btn{
    background:#e53935;
    color:#fff !important;
}

.logout-btn:hover{
    background:#c62828 !important;
}

@media(max-width:768px){

    .navbar{
        padding:0 20px;
        height:75px;
    }

    .nav-logo img{
        height:45px;
    }

    .nav-toggle{
        display:block;
    }

    .nav-menu{
        position:absolute;
        top:75px;
        left:0;
        width:100%;
        background:#fff;
        flex-direction:column;
        align-items:flex-start;
        gap:0;
        padding:15px;
        box-shadow:0 10px 25px rgba(0,0,0,.1);
        display:none;
    }

    .nav-menu.show{
        display:flex;
    }

    .nav-menu a{
        width:100%;
        padding:15px;
        border-radius:10px;
    }
}

/* =========================
   5. LOGIN INFO BANNER (mode anonim)
   ========================= */
.login-info{
    width:95%;
    max-width:1400px;
    margin:0 auto 25px;
    padding:16px 22px;
    background:#eefaf8;
    border:1px solid #bfe8df;
    border-radius:16px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    box-shadow:0 5px 15px rgba(0,0,0,.05);
}

.login-info.hide{
    opacity:0;
    transform:translateY(-15px);
    transition:.4s;
}

.login-info-left{
    display:flex;
    align-items:flex-start;
    gap:15px;
    flex:1;
    min-width:0;
}

.login-info-left i{
    font-size:24px;
    color:#17766B;
    margin-top:2px;
    flex-shrink:0;
}

.login-info-content strong{
    display:block;
    color:#17766B;
    font-size:16px;
    margin-bottom:3px;
}

.login-info-content span{
    display:block;
    color:#444;
    font-size:15px;
    line-height:1.6;
}

.btn-login-anon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 18px;
    background:#17766B;
    color:#fff;
    text-decoration:none;
    border-radius:10px;
    font-size:14px;
    font-weight:600;
    white-space:nowrap;
    flex-shrink:0;
    transition:.3s;
}

.btn-login-anon:hover{
    background:#11584f;
}

@media(max-width:768px){

    .login-info{
        flex-direction:column;
        align-items:flex-start;
        gap:12px;
        padding:15px;
    }

    .login-info-left{
        width:100%;
    }

    .login-info-left i{
        font-size:22px;
    }

    .login-info-content strong{
        font-size:15px;
    }

    .login-info-content span{
        font-size:14px;
    }

    .btn-login-anon{
        padding:8px 14px;
        font-size:13px;
        border-radius:8px;
    }
}
/* =========================
   6. TENTANG KAMI (about-section)
   ========================= */
.about-section{
    width:95%;
    max-width:1400px;
    margin:60px auto;
}

.about-card{
    position:relative;
    background:#fff;
    border-radius:32px;
    box-shadow:var(--shadow);
    overflow:hidden;
    display:grid;
    grid-template-columns:1fr 1.1fr;
    align-items:stretch;
    border:1px solid #edf2f7;
}

/* -------- GAMBAR -------- */
.about-image{
    display:flex;
    justify-content:center;
    align-items:center;
    padding:40px;
    min-height:480px;
    overflow:hidden;
    background:#f8fafc;
}

.about-img{
    width:100%;
    max-width:340px;
    height:auto;
    object-fit:contain;
    display:block;
    filter:drop-shadow(0 20px 30px rgba(15,90,81,.18));
    animation:zoomInOut 4s ease-in-out infinite;
}

@keyframes zoomInOut{
    0%,100%{ transform:scale(1); }
    50%{ transform:scale(1.06); }
}

/* -------- KONTEN -------- */
.about-content{
    padding:55px 55px 55px 45px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.about-tag{
    display:inline-flex;
    align-items:center;
    gap:8px;
    width:fit-content;
    background:#eefaf8;
    color:var(--primary);
    padding:9px 18px;
    border-radius:999px;
    font-size:13px;
    font-weight:700;
    margin-bottom:16px;
    letter-spacing:.02em;
}

.about-tag i{
    font-size:12px;
    color:var(--secondary);
}

.about-content h2{
    font-size:36px;
    font-weight:700;
    color:var(--primary);
    margin-bottom:16px;
    line-height:1.2;
}

.about-content p{
    color:#64748b;
    font-size:15.5px;
    line-height:1.85;
    margin-bottom:15px;
    max-width:520px;
}

/* -------- STATISTIK -------- */
.about-stats{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px;
    margin:28px 0 5px;
}

.stat-item{
    display:flex;
    align-items:center;
    gap:14px;
    background:#f8fafc;
    border:1px solid #edf2f7;
    border-radius:18px;
    padding:18px 16px;
    transition:all .35s ease;
    cursor:pointer;
}

.stat-icon{
    flex-shrink:0;
    width:48px;
    height:48px;
    border-radius:14px;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:19px;
    transition:transform .35s ease;
    background:var(--primary); /* fallback default */
}

/* Warna beda per kartu, urut sesuai posisi — tidak perlu ubah HTML */
.stat-item:nth-child(1) .stat-icon{
    background:var(--primary);
}

.stat-item:nth-child(2) .stat-icon{
    background:var(--secondary);
}

.stat-item:nth-child(3) .stat-icon{
    background:#3b82f6;
}

.stat-item:nth-child(4) .stat-icon{
    background:#ef6c57;
}

.stat-item p{
    margin:0;
    font-size:14px;
    font-weight:600;
    color:#334155;
    line-height:1.4;
}

.stat-item:hover{
    transform:translateY(-6px);
    box-shadow:0 15px 35px rgba(0,0,0,.1);
    background:#fff;
    border-color:#d8e2e0;
}

.stat-item:hover .stat-icon{
    transform:scale(1.1) rotate(6deg);
}

/* =========================
   RESPONSIVE
   ========================= */
@media(max-width:992px){

    .about-card{
        grid-template-columns:1fr;
    }

    .about-image{
        min-height:320px;
        padding:30px;
    }

    .about-content{
        padding:35px;
    }

    .about-content p{
        max-width:100%;
    }
}

@media(max-width:600px){

    .about-section{
        margin:40px auto;
    }

    .about-card{
        border-radius:24px;
    }

    .about-image{
        min-height:240px;
        padding:20px;
    }

    .about-content{
        padding:28px 22px;
    }

    .about-content h2{
        font-size:26px;
    }

    .about-content p{
        font-size:14.5px;
    }

    .about-stats{
        grid-template-columns:1fr 1fr;
        gap:12px;
    }

    .stat-item{
        flex-direction:column;
        text-align:center;
        padding:16px 10px;
        gap:10px;
    }

    .stat-icon{
        width:42px;
        height:42px;
        font-size:16px;
    }

    .stat-item p{
        font-size:12.5px;
    }
}

@media(max-width:360px){
    .about-stats{
        grid-template-columns:1fr;
    }

    .stat-item{
        flex-direction:row;
        text-align:left;
    }
}

/* =========================
   7. KUESIONER GRATIS (skrining awal)
   ========================= */
.kuesioner-gratis{
    position:relative;
    overflow:hidden;
    width:95%;
    max-width:700px;
    margin:50px auto;
    padding:45px;
    background:#fff;
    border-radius:25px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    text-align:center;
}

.badge-kuesioner{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:#ef4444;
    color:#fff;
    padding:10px 18px;
    border-radius:999px;
    font-weight:700;
    margin-bottom:20px;
}

.kuesioner-gratis p{
    color:#64748b;
    line-height:1.8;
    margin-bottom:30px;
}

.kuesioner-gratis p b{
    display:block;
    color:#17766B;
    font-size:28px;
    margin-bottom:10px;
}

.btn-kuesioner{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    width:100%;
    max-width:320px;
    margin:10px auto;
    padding:15px;
    border-radius:12px;
    text-decoration:none;
    background:#17766B;
    color:#fff;
    font-weight:600;
    transition:.3s;
}

.btn-kuesioner:hover{
    background:#0F5A51;
}

.btn-kuesioner-outline{
    background:#fff;
    color:#17766B;
    border:2px solid #17766B;
}

.btn-kuesioner-outline:hover{
    background:#17766B;
    color:#fff;
}

/* Watermark bendera Indonesia di pojok kartu kuesioner */
.indo-corner{
    position:absolute;
    top:-90px;
    right:-25px;
    width:420px;
    max-width:65%;
    height:auto;
    opacity:.90;
    pointer-events:none;
    user-select:none;
    -webkit-user-drag:none;
    z-index:0;
    animation:waveFlag 3s ease-in-out infinite;
    transform-origin:right center;
}

@keyframes waveFlag{
    0%,100%{ transform:rotate(0deg) scale(1); }
    25%{ transform:rotate(1deg) scale(1.01); }
    50%{ transform:rotate(-1deg) scale(1); }
    75%{ transform:rotate(.8deg) scale(1.01); }
}

@media(max-width:992px){
    .indo-corner{
        width:360px;
        max-width:70%;
        top:40px;
        right:-20px;
        opacity:.13;
    }
}

@media(max-width:768px){
    .indo-corner{
        width:300px;
        max-width:78%;
        top:-30px;
        right:-18px;
        opacity:.90;
    }
}

@media(max-width:480px){
    .indo-corner{
        width:250px;
        max-width:85%;
        top:-30px;
        right:-15px;
        opacity:.90;
    }
}

/* =========================
   8. PROMO HARGA (dipakai di beberapa kartu promo)
   ========================= */
.harga-promo{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:15px;
    margin:20px 0;
}

.harga-coret{
    color:#94a3b8;
    font-size:18px;
    text-decoration:line-through;
    font-weight:600;
}

.harga-diskon{
    color:#000;
    font-size:38px;
    font-weight:800;
}

.promo-info{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    background:#eefaf8;
    color:#17766B;
    padding:12px 18px;
    border-radius:999px;
    font-size:14px;
    font-weight:600;
    margin-bottom:25px;
}

.promo-info i{
    font-size:16px;
}

@media(max-width:600px){

    .harga-diskon{
        font-size:32px;
    }

    .harga-coret{
        font-size:16px;
    }
}

/* =========================
   9. KONSELING LITE (kartu promo — prefix "kl-")
   ========================= */
.kl-card{
    --kl-bg:#EFF3F2;
    --kl-ink:#16302B;
    --kl-muted:#5D746E;
    --kl-teal-deep:#0E4B43;
    --kl-teal:#146F63;
    --kl-coral:#E8603C;
    --kl-coral-dark:#C64B2A;
    --kl-line:#DCE6E3;
    --kl-slot-bg:#FDEDE8;

    font-family:'Poppins',sans-serif;
    width:100%;
    max-width:460px;
    margin:24px auto;
    background:#FFFFFF;
    color:var(--kl-ink);
    border-radius:20px;
    border:1px solid var(--kl-line);
    box-shadow:0 18px 40px -22px rgba(14,75,67,.35);
    overflow:hidden;
}

.kl-card *{
    box-sizing:border-box;
}

.kl-card__head{
    padding:32px 28px 20px;
    text-align:center;
    border-bottom:1px dashed var(--kl-line);
}

.kl-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:12px;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--kl-teal);
    background:#E5F1EE;
    padding:6px 12px;
    border-radius:999px;
}

.kl-eyebrow i{
    font-size:11px;
}

.kl-title{
    margin-top:14px;
    font-size:34px;
    font-weight:800;
    line-height:1.1;
    color:var(--kl-coral);
}

.kl-subtitle{
    margin-top:10px;
    font-size:14.5px;
    color:var(--kl-muted);
    line-height:1.55;
}

.kl-badges{
    display:flex;
    gap:10px;
    justify-content:center;
    flex-wrap:wrap;
    margin-top:18px;
}

.kl-badge{
    display:flex;
    align-items:center;
    gap:7px;
    font-size:13px;
    font-weight:600;
    color:var(--kl-teal-deep);
    background:#E5F1EE;
    padding:8px 14px;
    border-radius:12px;
}

.kl-badge i{
    color:var(--kl-teal);
    font-size:14px;
}

.kl-price-block{
    padding:26px 28px 6px;
    text-align:center;
}

.kl-price-old{
    font-size:16px;
    color:#9AAAA6;
    text-decoration:line-through;
    font-weight:500;
}

.kl-price-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    margin-top:4px;
    flex-wrap:wrap;
}

.kl-price-new{
    font-size:38px;
    font-weight:800;
    color:var(--kl-teal-deep);
}

.kl-discount-pill{
    font-size:13px;
    font-weight:700;
    color:#fff;
    background:var(--kl-coral);
    padding:6px 12px;
    border-radius:10px;
}

.kl-countdown-wrap{
    padding:18px 28px 4px;
    text-align:center;
}

.kl-countdown-label{
    font-size:12.5px;
    font-weight:600;
    color:var(--kl-muted);
    margin-bottom:10px;
}

.kl-countdown{
    display:flex;
    justify-content:center;
    gap:10px;
}

.kl-time-box{
    background:var(--kl-bg);
    border:1px solid var(--kl-line);
    border-radius:12px;
    padding:10px 4px;
    width:64px;
}

.kl-time-num{
    font-size:22px;
    font-weight:700;
    color:var(--kl-teal-deep);
    font-variant-numeric:tabular-nums;
}

.kl-time-unit{
    font-size:10px;
    font-weight:600;
    color:var(--kl-muted);
    text-transform:uppercase;
    letter-spacing:.05em;
    margin-top:2px;
}

.kl-slot-alert{
    margin:20px 28px 0;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    font-size:13px;
    font-weight:600;
    color:var(--kl-coral-dark);
    background:var(--kl-slot-bg);
    border:1px solid #F4CFC1;
    border-radius:12px;
    padding:10px 14px;
}

.kl-slot-alert i{
    font-size:13px;
}

.kl-actions{
    padding:24px 28px 28px;
    display:flex;
    flex-direction:column;
    gap:12px;
}

.kl-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    text-decoration:none;
    font-family:inherit;
    font-weight:600;
    font-size:15px;
    padding:15px 18px;
    border-radius:14px;
    transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease;
    cursor:pointer;
}

.kl-btn:active{
    transform:scale(.98);
}

.kl-btn-primary{
    background:var(--kl-coral);
    color:#fff;
    box-shadow:0 10px 22px -10px rgba(232,96,60,.6);
}

.kl-btn-primary:hover{
    background:var(--kl-coral-dark);
    color:#fff;
}

.kl-btn-secondary{
    background:#fff;
    color:var(--kl-teal-deep);
    border:1.5px solid var(--kl-teal);
}

.kl-btn-secondary:hover{
    background:#E5F1EE;
}

.kl-help{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin:0 28px 24px;
    padding:12px 16px;
    background:#E5F1EE;
    border:1px solid var(--kl-line);
    border-radius:12px;
    text-decoration:none;
    color:var(--kl-teal-deep);
    font-size:13.5px;
    font-weight:600;
    transition:.25s ease;
}

.kl-help i{
    font-size:16px;
    color:#25D366;
}

.kl-help:hover{
    background:#DCEFEA;
    transform:translateY(-2px);
}

@media(max-width:400px){

    .kl-title{ font-size:28px; }
    .kl-price-new{ font-size:32px; }
    .kl-time-box{ width:56px; padding:8px 2px; }
    .kl-time-num{ font-size:19px; }
    .kl-card__head{ padding:26px 20px 18px; }

    .kl-price-block,
    .kl-countdown-wrap,
    .kl-actions{
        padding-left:20px;
        padding-right:20px;
    }

    .kl-slot-alert{
        margin-left:20px;
        margin-right:20px;
    }

    .kl-help{
        margin:0 20px 20px;
        font-size:13px;
    }
}

/* =========================
   10. ALUR KONSULTASI (step-step)
   ========================= */
.alur-konsultasi{
    width:95%;
    max-width:1400px;
    margin:auto;
    background:#fff;
    border-radius:25px;
    padding:40px;
    box-shadow:var(--shadow);
}

.alur-konsultasi h3{
    text-align:center;
    margin-bottom:35px;
    color:var(--primary);
}

.alur-wrapper{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:15px;
}

.step{
    width:200px;
    background:#f8fafc;
    padding:25px;
    border-radius:20px;
    text-align:center;
}

.step-icon{
    width:70px;
    height:70px;
    margin:auto;
    border-radius:50%;
    background:var(--primary);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    margin-bottom:15px;
}

.arrow{
    display:flex;
    align-items:center;
    font-size:20px;
}

@media(max-width:900px){
    .arrow{
        display:none;
    }
}

@media(max-width:768px){

    .alur-konsultasi{
        padding:25px 15px;
    }

    .alur-wrapper{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:15px;
    }

    .step{
        width:100%;
        padding:20px 15px;
    }

    .step h4{
        font-size:14px;
    }

    .step p{
        font-size:12px;
    }

    .step-icon{
        width:55px;
        height:55px;
        font-size:22px;
    }
}

/* =========================
   11. PSIKOLOG BOX (kartu psikolog)
   ========================= */
.psikolog-box{
    width:95%;
    max-width:1400px;
    margin:40px auto;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(350px,1fr));
    gap:25px;
}

.card{
    background:#fff;
    border-radius:25px;
    overflow:hidden;
    box-shadow:var(--shadow);
}

.card img{
    width:100%;
    max-width:350px;
    aspect-ratio:3/2;
    object-fit:cover;
    border-radius:16px;
    display:block;
    margin:20px auto;
}

.content{
    padding:25px;
}

.content h3{
    margin-bottom:10px;
}

.spesialis-list{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:15px;
}

.spesialis{
    background:#eefaf8;
    color:var(--primary);
    padding:10px 16px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin:0 8px 8px 0;
    font-size:14px;
    font-weight:600;
    line-height:1;
    transition:.3s;
}

.spesialis:hover{
    background:#dff4f0;
    transform:translateY(-2px);
}

.toggle-btn{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border:none;
    background:#f8fafc;
    color:#17766B;
    padding:14px;
    border-radius:12px;
    text-align:left;
    cursor:pointer;
    margin-top:10px;
    font-weight:600;
    font-family:'Poppins',sans-serif;
    letter-spacing:.2px;
    transition:.25s ease;
}

.toggle-btn:hover{
    background:#eefaf8;
}

.toggle-content{
    display:none;
    background:#fafafa;
    padding:15px;
    border-radius:12px;
    margin-top:5px;
}

.toggle-content.show{
    display:block;
}

.active{
    color:#22c55e;
    font-weight:700;
}

.harga{
    margin-top:18px;
    background:#fff8e7;
    padding:15px 18px;
    border-radius:12px;
    color:#b7791f;
    font-weight:700;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}

.badge-dis{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:linear-gradient(135deg,#ef4444,#f97316);
    color:#fff;
    padding:8px 16px;
    border-radius:999px;
    font-size:13px;
    font-weight:700;
}

.badge-dis i{
    font-size:12px;
}

.aksi-btn{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    margin-top:20px;
}

.btn{
    text-decoration:none;
    background:var(--primary);
    color:#fff;
    padding:14px;
    border-radius:12px;
    text-align:center;
    font-weight:600;
    cursor:pointer;
    border:none;
    font-family:'Poppins',sans-serif;
    letter-spacing:.2px;
    transition:.25s ease;
}

.btn:hover{
    background:var(--primary-dark);
    transform:translateY(-2px);
}
/* =========================
   11b. RATING & JUMLAH KLIEN (di atas badge spesialis)
   ========================= */
.rating-info{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    margin-bottom:10px;
}

.rating-stars{
    color:#f4b860;
    font-size:14px;
    letter-spacing:2px;
}

.rating-stars i.fa-regular{
    color:#e2e8f0;
}

.rating-score{
    font-size:14px;
    font-weight:700;
    color:#0f172a;
}

.rating-clients{
    font-size:13px;
    color:#64748b;
}

/* =========================
   11c. BADGE SPESIALIS: batasi 2, sisanya di balik "+N"
   ========================= */

/* Badge tambahan disembunyikan default */
.spesialis-extra{
    display:none;
}

/* Saat wrapper diberi class .show-all, badge tambahan muncul */
.spesialis-list.show-all .spesialis-extra{
    display:inline-flex;
}

/* Tombol "+N" — pakai style dasar .spesialis, override sedikit */
.spesialis-more{
    background:#17766B;
    color:#fff;
    border:none;
    cursor:pointer;
    font-family:'Poppins',sans-serif;
    font-size:14px;
    font-weight:600;
}

.spesialis-more:hover{
    background:var(--primary-dark);
}

@media(max-width:768px){
    .rating-stars{
        font-size:13px;
    }

    .rating-score,
    .rating-clients{
        font-size:12.5px;
    }
}

/* =========================
   12. FEEDBACK KLIEN (carousel testimoni)
   ========================= */
.feedback-section{
    width:95%;
    max-width:1300px;
    margin:90px auto;
}

.feedback-wrapper{
    display:flex;
    align-items:center;
    gap:18px;
    margin-top:45px;
}

.feedback-track-wrap{
    flex:1;
    overflow:hidden;
}

.feedback-track{
    display:flex;
    gap:20px;
    transition:transform .4s ease;
}

.feedback-nav{
    flex-shrink:0;
    width:48px;
    height:48px;
    border:none;
    border-radius:50%;
    background:var(--primary);
    color:#fff;
    font-size:16px;
    cursor:pointer;
    box-shadow:var(--shadow);
    transition:.25s ease;
}

.feedback-nav:hover{
    background:var(--primary-dark);
    transform:translateY(-2px);
}

.feedback-nav:disabled{
    cursor:default;
}

.feedback-card{
    flex:0 0 calc((100% - 40px) / 3);
    background:#fff;
    border:1px solid #edf2f7;
    border-radius:24px;
    padding:28px;
    box-shadow:0 12px 30px rgba(0,0,0,.06);
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.feedback-rating{
    color:#f4b860;
    font-size:16px;
    margin-bottom:15px;
    letter-spacing:2px;
}

.feedback-rating i.fa-regular{
    color:#e2e8f0;
}

.feedback-ulasan{
    color:#475569;
    font-size:15px;
    line-height:1.8;
    font-style:normal;
    margin-bottom:25px;
}

.feedback-footer{
    display:flex;
    align-items:center;
    gap:14px;
}

.feedback-avatar{
    width:48px;
    height:48px;
    border-radius:50%;
    background:var(--primary);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:15px;
    flex-shrink:0;
}

.feedback-info h5{
    font-size:15px;
    color:#0f172a;
    margin-bottom:3px;
}

.feedback-info span{
    font-size:13px;
    color:#64748b;
}

.feedback-dots{
    display:flex;
    justify-content:center;
    gap:8px;
    margin-top:28px;
}

.feedback-dot{
    width:9px;
    height:9px;
    border-radius:50%;
    background:#dbe3e8;
    cursor:pointer;
    transition:.25s ease;
}

.feedback-dot.active{
    background:var(--primary);
    width:22px;
    border-radius:999px;
}

@media(max-width:1100px){
    .feedback-card{
        flex:0 0 calc((100% - 20px) / 2);
    }
}

@media(max-width:768px){

    .feedback-wrapper{
        gap:10px;
    }

    .feedback-nav{
        width:40px;
        height:40px;
        font-size:14px;
    }

    .feedback-card{
        flex:0 0 100%;
        padding:22px;
        border-radius:18px;
    }

    .feedback-ulasan{
        font-size:14px;
    }

    .feedback-avatar{
        width:42px;
        height:42px;
        font-size:13px;
    }
}

/* =========================
   13. TES PSIKOLOGI
   ========================= */
.tes-section{
    width:95%;
    max-width:1300px;
    margin:90px auto;
}

.tes-header{
    text-align:center;
    max-width:850px;
    margin:auto;
}

.tes-tag{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:#eefaf8;
    color:#17766B;
    padding:10px 18px;
    border-radius:999px;
    font-weight:600;
    margin-bottom:20px;
}

.tes-header h2{
    font-size:42px;
    color:#17766B;
    font-weight:700;
    margin-bottom:15px;
}

.tes-header p{
    color:#64748b;
    line-height:1.9;
    font-size:17px;
}

.tes-card-modern{
    margin-top:50px;
    background:#fff;
    border-radius:32px;
    overflow:hidden;
    display:grid;
    grid-template-columns:1.2fr .8fr;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    border:1px solid #edf2f7;
}

.tes-left{
    padding:50px;
}

.tes-price{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}

.tes-price small{
    color:#94a3b8;
    font-size:14px;
}

.tes-price h3{
    color:#000;
    font-size:56px;
    margin-top:5px;
    margin-bottom:30px;
    line-height:1;
}

.tes-price h3 span{
    font-size:18px;
    color:#64748b;
    font-weight:500;
}

.badge-diskon{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:linear-gradient(135deg,#ef4444,#f97316);
    color:#fff;
    padding:8px 16px;
    border-radius:999px;
    font-size:13px;
    font-weight:700;
    margin-bottom:16px;
}

.badge-diskon i{
    font-size:12px;
}

.tes-feature{
    display:grid;
    gap:15px;
    margin-bottom:35px;
}

.feature{
    display:flex;
    align-items:center;
    gap:12px;
    font-weight:500;
    color:#334155;
}

.feature i{
    color:#17766B;
    font-size:18px;
}

.btn-tes-modern{
    display:inline-flex;
    align-items:center;
    gap:12px;
    background:#17766B;
    color:#fff;
    text-decoration:none;
    padding:16px 30px;
    border-radius:14px;
    font-weight:600;
    transition:.3s;
    font-family:'Poppins',sans-serif;
    letter-spacing:.2px;
}

.btn-tes-modern:hover{
    background:#0F5A51;
    transform:translateY(-3px);
}

.tes-right{
    background:#17766B;
    color:#fff;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:40px;
}

.tes-icon{
    width:120px;
    height:120px;
    border-radius:50%;
    background:rgba(255,255,255,.15);
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:25px;
}

.tes-icon i{
    font-size:55px;
}

.tes-right h4{
    font-size:28px;
    margin-bottom:15px;
}

.tes-right p{
    max-width:300px;
    line-height:1.8;
    opacity:.95;
}

@media(max-width:900px){

    .tes-card-modern{
        grid-template-columns:1fr;
    }

    .tes-left{
        padding:30px;
    }

    .tes-right{
        padding:35px;
    }

    .tes-header h2{
        font-size:30px;
    }

    .tes-price h3{
        font-size:42px;
    }
}

/* =========================
   14. WORKSHOP
   ========================= */
.workshop-section{
    width:95%;
    max-width:1200px;
    margin:80px auto;
}

.workshop-card{
    position:relative;
    overflow:hidden;
    background:linear-gradient(135deg,var(--primary),#1f8a7c);
    color:#fff;
    padding:60px;
    border-radius:35px;
    box-shadow:0 20px 50px rgba(0,0,0,.12);
}

.workshop-card::before{
    content:'';
    position:absolute;
    width:300px;
    height:300px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    top:-120px;
    right:-100px;
}

.workshop-card::after{
    content:'';
    position:absolute;
    width:220px;
    height:220px;
    border-radius:50%;
    background:rgba(255,255,255,.05);
    bottom:-100px;
    left:-80px;
}

.workshop-badge{
    display:inline-block;
    background:#fff;
    color:var(--primary);
    padding:10px 18px;
    border-radius:999px;
    font-size:14px;
    font-weight:700;
    margin-bottom:25px;
}

.workshop-category{
    display:block;
    margin-bottom:15px;
    opacity:.9;
    font-size:16px;
}

.workshop-content h2{
    font-size:48px;
    line-height:1.2;
    margin-bottom:20px;
    max-width:800px;
}

.workshop-content p{
    font-size:18px;
    line-height:1.8;
    max-width:800px;
    opacity:.95;
}

.workshop-list{
    margin:20px 0;
}

.workshop-list p{
    display:flex;
    align-items:center;
    gap:12px;
    margin:12px 0;
    color:#fff;
    font-weight:500;
    cursor:default;
}

.hero-badges{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin:18px 0 22px;
}

.hero-badges span{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 16px;
    border-radius:999px;
    background:rgba(255,255,255,.18);
    border:1px solid rgba(255,255,255,.35);
    color:#fff;
    font-weight:600;
    backdrop-filter:blur(8px);
    transition:.3s;
}

.hero-badges span:hover{
    background:#fff;
    color:#2F5D50;
    transform:translateY(-2px);
}

.workshop-info{
    display:flex;
    gap:40px;
    margin:35px 0;
    flex-wrap:wrap;
}

.workshop-info div{
    display:flex;
    flex-direction:column;
}

.workshop-info strong{
    margin-bottom:6px;
}

.workshop-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:20px;
}

.workshop-price{
    font-size:30px;
    font-weight:800;
}

.btn-workshop{
    background:#fff;
    color:var(--primary);
    text-decoration:none;
    padding:15px 28px;
    border-radius:14px;
    font-weight:700;
    transition:.3s;
    font-family:'Poppins',sans-serif;
    letter-spacing:.2px;
}

.btn-workshop:hover{
    transform:translateY(-3px);
}

@media(max-width:768px){

    .workshop-card{
        padding:35px 25px;
    }

    .workshop-content h2{
        font-size:32px;
    }

    .workshop-price{
        font-size:30px;
    }

    .workshop-footer{
        align-items:flex-start;
        flex-direction:column;
    }
}

/* =========================
   15. TESTIMONI WORKSHOP (slider — prefix "ws-")
   ========================= */
.ws-testimoni-section{
    width:95%;
    max-width:1200px;
    margin:90px auto;
}

.ws-card{
    margin-top:45px;
}

.ws-slider-wrap{
    display:flex;
    align-items:center;
    gap:15px;
    padding:20px;
}

.ws-slider{
    flex:1;
    display:flex;
    overflow:hidden;
    border-radius:24px;
}

.ws-slide{
    flex:0 0 100%;
    display:grid;
    grid-template-columns:1.1fr 1fr;
    background:#fafafa;
    border-radius:24px;
    overflow:hidden;
}

.ws-foto{
    height:100%;
    min-height:380px;
    overflow:hidden;
}

.ws-foto img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.ws-caption{
    padding:35px 40px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.ws-caption h4{
    font-size:24px;
    color:var(--primary);
    font-weight:700;
    margin-bottom:14px;
    line-height:1.3;
}

.ws-meta{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-bottom:18px;
}

.ws-meta span{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:13.5px;
    font-weight:600;
    color:#17766B;
    background:#eefaf8;
    padding:8px 14px;
    border-radius:999px;
}

.ws-caption p{
    color:#64748b;
    line-height:1.85;
    font-size:15px;
    margin-bottom:25px;
}

.ws-logo{
    display:flex;
    align-items:center;
    gap:12px;
    padding-top:20px;
    border-top:1px dashed #e5e7eb;
}

.ws-logo img{
    width:44px;
    height:44px;
    object-fit:contain;
    border-radius:10px;
    background:#f8fafc;
    padding:4px;
}

.ws-logo span{
    font-size:14px;
    font-weight:700;
    color:#0f172a;
}

.ws-nav{
    flex-shrink:0;
    width:48px;
    height:48px;
    border:none;
    border-radius:50%;
    background:var(--primary);
    color:#fff;
    font-size:16px;
    cursor:pointer;
    box-shadow:var(--shadow);
    transition:.25s ease;
}

.ws-nav:hover{
    background:var(--primary-dark);
    transform:translateY(-2px);
}

.ws-nav:disabled{
    cursor:default;
}

.ws-dots{
    display:flex;
    justify-content:center;
    gap:8px;
    padding:0 0 26px;
}

.ws-dot{
    width:9px;
    height:9px;
    border-radius:50%;
    background:#dbe3e8;
    cursor:pointer;
    transition:.25s ease;
}

.ws-dot.active{
    background:var(--primary);
    width:22px;
    border-radius:999px;
}

@media(max-width:900px){

    .ws-slide{
        grid-template-columns:1fr;
    }

    .ws-foto{
        min-height:260px;
    }

    .ws-caption{
        padding:28px 25px;
    }

    .ws-caption h4{
        font-size:20px;
    }
}

@media(max-width:768px){

    .ws-slider-wrap{
        padding:12px;
        gap:8px;
    }

    .ws-nav{
        width:38px;
        height:38px;
        font-size:13px;
    }

    .ws-foto{
        min-height:220px;
    }

    .ws-caption{
        padding:22px 18px;
    }

    .ws-caption h4{
        font-size:18px;
    }

    .ws-meta span{
        font-size:12px;
        padding:6px 10px;
    }

    .ws-caption p{
        font-size:14px;
    }

    .ws-logo img{
        width:36px;
        height:36px;
    }
}

/* =========================
   16. ARTIKEL PSIKOLOGI (carousel — prefix "art-")
   ========================= */
.art-section{
    width:95%;
    max-width:1300px;
    margin:90px auto;
}

.art-wrapper{
    display:flex;
    align-items:center;
    gap:15px;
    margin-top:45px;
}

.art-track-wrap{
    flex:1;
    overflow:hidden;
}

.art-track{
    display:flex;
    gap:22px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    padding-bottom:4px;
    scrollbar-width:none; /* Firefox */
}

.art-track::-webkit-scrollbar{
    display:none; /* Chrome/Safari */
}

.art-card{
    flex:0 0 calc((100% - 44px) / 3);
    scroll-snap-align:start;
    background:#fff;
    border:1px solid #edf2f7;
    border-radius:22px;
    overflow:hidden;
    box-shadow:0 12px 30px rgba(0,0,0,.06);
    display:flex;
    flex-direction:column;
    transition:.3s ease;
}

.art-card:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 40px rgba(0,0,0,.1);
}

.art-poster{
    position:relative;
    width:100%;
    aspect-ratio:4/3;
    overflow:hidden;
}

.art-poster img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.art-date-badge{
    position:absolute;
    bottom:12px;
    left:12px;
    display:flex;
    align-items:center;
    gap:6px;
    background:rgba(255,255,255,.95);
    color:#17766B;
    font-size:12.5px;
    font-weight:700;
    padding:7px 12px;
    border-radius:999px;
    box-shadow:0 4px 12px rgba(0,0,0,.12);
}

.art-body{
    padding:22px;
    display:flex;
    flex-direction:column;
    flex:1;
}

.art-title{
    font-size:17px;
    font-weight:700;
    color:#0f172a;
    line-height:1.4;
    margin-bottom:10px;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.art-author{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    font-weight:600;
    color:#17766B;
    margin-bottom:12px;
}

.art-excerpt{
    color:#64748b;
    font-size:14px;
    line-height:1.7;
    margin-bottom:18px;
    flex:1;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.art-readmore{
    display:inline-flex;
    align-items:center;
    gap:8px;
    text-decoration:none;
    color:#17766B;
    font-weight:700;
    font-size:14px;
    transition:.25s ease;
}

.art-readmore i{
    transition:.25s ease;
}

.art-readmore:hover{
    color:#0F5A51;
}

.art-readmore:hover i{
    transform:translateX(4px);
}

.art-nav{
    flex-shrink:0;
    width:48px;
    height:48px;
    border:none;
    border-radius:50%;
    background:#17766B;
    color:#fff;
    font-size:16px;
    cursor:pointer;
    box-shadow:0 10px 25px rgba(0,0,0,.15);
    transition:.25s ease;
}

.art-nav:hover{
    background:#0F5A51;
    transform:translateY(-2px);
}

.art-nav:disabled{
    cursor:default;
}

@media(max-width:1100px){
    .art-card{
        flex:0 0 calc((100% - 22px) / 2);
    }
}

@media(max-width:768px){

    .art-section{
        margin:60px auto;
    }

    .art-wrapper{
        gap:8px;
    }

    .art-card{
        flex:0 0 85%;
    }

    .art-nav{
        width:38px;
        height:38px;
        font-size:13px;
    }

    .art-body{
        padding:18px;
    }

    .art-title{
        font-size:15.5px;
    }

    .art-excerpt{
        font-size:13.5px;
    }
}

@media(max-width:420px){
    .art-card{
        flex:0 0 90%;
    }
}

/* =========================
   17. FAQ (Pertanyaan Umum)
   ========================= */
.faq-section{
    width:95%;
    max-width:1000px;
    margin:90px auto;
}

.faq-container{
    margin-top:40px;
}

.faq-item{
    background:#fff;
    border-radius:18px;
    margin-bottom:15px;
    overflow:hidden;
    box-shadow:0 8px 20px rgba(0,0,0,.06);
    border:1px solid #edf2f7;
}

.faq-question{
    width:100%;
    border:none;
    background:#fff;
    padding:22px 25px;
    cursor:pointer;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:17px;
    font-weight:600;
    color:#17766B;
    transition:.3s;
    font-family:'Poppins',sans-serif;
}

.faq-question:hover{
    background:#f8fcfb;
}

.faq-question i{
    transition:.3s;
}

.faq-item.active .faq-question{
    background:#17766B;
    color:#fff;
}

.faq-item.active .faq-question i{
    transform:rotate(180deg);
}

.faq-answer{
    max-height:0;
    overflow:hidden;
    transition:max-height .4s ease;
    background:#fff;
}

.faq-answer p{
    padding:22px 25px;
    color:#64748b;
    line-height:1.8;
}

/* =========================
   18. FLOATING CHAT ADMIN
   ========================= */
#chat-admin{
    position:fixed;
    bottom:25px;
    right:25px;
    z-index:999;
}

#chat-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    border:none;
    background:#25D366;
    color:#fff;
    text-decoration:none;
    padding:16px 22px;
    border-radius:50px;
    font-weight:600;
    font-size:15px;
    cursor:pointer;
    box-shadow:var(--shadow);
    font-family:'Poppins',sans-serif;
    transition:.3s ease;
}

#chat-btn:hover{
    background:#1ebe57;
    transform:translateY(-2px);
    box-shadow:0 14px 30px rgba(0,0,0,.18);
}

#chat-btn i{
    font-size:20px;
    line-height:1;
}

@media(max-width:768px){

    #chat-admin{
        bottom:18px;
        right:18px;
    }

    #chat-btn{
        padding:13px 18px;
        font-size:14px;
    }

    #chat-btn i{
        font-size:18px;
    }
}

@media(max-width:480px){

    #chat-btn span{
        display:none; /* di layar kecil cuma icon WA yang tampil, biar hemat tempat */
    }

    #chat-btn{
        padding:14px;
        border-radius:50%;
        gap:0;
    }
}

/* =========================
   19. FOOTER
   ========================= */
.footer{
    background:linear-gradient(135deg,#157a6e,#1f8a7c);
    color:#fff;
    margin-top:100px;
    position:relative;
    overflow:hidden;
}

.footer::before{
    content:'';
    position:absolute;
    width:300px;
    height:300px;
    border-radius:50%;
    background:rgba(255,255,255,.05);
    top:-120px;
    right:-80px;
}

.footer::after{
    content:'';
    position:absolute;
    width:250px;
    height:250px;
    border-radius:50%;
    background:rgba(255,255,255,.04);
    bottom:-120px;
    left:-80px;
}

.footer-container{
    position:relative;
    z-index:2;
    max-width:1400px;
    margin:auto;
    padding:60px 5%;
    display:flex;
    justify-content:space-between;
    gap:60px;
    flex-wrap:wrap;
}

.footer-brand{
    flex:1;
    min-width:300px;
}

.footer-brand h3{
    font-size:30px;
    margin-bottom:15px;
    font-weight:700;
}

.footer-brand p{
    line-height:1.9;
    opacity:.9;
    max-width:600px;
}

.footer-links{
    min-width:250px;
}

.footer-links h4{
    margin-bottom:20px;
    font-size:20px;
}

.footer-links a{
    display:flex;
    align-items:center;
    gap:12px;
    color:#fff;
    text-decoration:none;
    margin-bottom:15px;
    opacity:.9;
    transition:.3s;
}

.footer-links a:hover{
    opacity:1;
    transform:translateX(5px);
}

.footer-bottom{
    position:relative;
    z-index:2;
    text-align:center;
    padding:20px;
    border-top:1px solid rgba(255,255,255,.15);
    color:rgba(255,255,255,.85);
    font-size:14px;
}

/* =========================
   20. TRUST INFO (badge kepercayaan, dipakai di halaman lain)
   ========================= */
.trust-info{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
    margin:20px 0;
    animation:fadeTrust .8s ease;
}

.trust-item{
    display:flex;
    align-items:center;
    gap:10px;
    background:#fff;
    border:1px solid #e9eef5;
    border-radius:14px;
    padding:12px 18px;
    box-shadow:0 6px 18px rgba(0,0,0,.06);
    transition:.3s ease;
    position:relative;
    overflow:hidden;
    cursor:default;
    min-width:190px;
    font-size:14px;
    font-weight:600;
    color:#374151;
}

.trust-item::before{
    content:"";
    position:absolute;
    left:-100%;
    top:0;
    width:100%;
    height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);
    transition:.8s;
}

.trust-item:hover::before{
    left:100%;
}

.trust-item:hover{
    transform:translateY(-5px);
    box-shadow:0 12px 30px rgba(0,0,0,.12);
    border-color:#17766B;
}

.trust-item i{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#17766B;
    color:#fff;
    font-size:18px;
    flex-shrink:0;
    transition:.3s;
    animation:pulseIcon 2.5s infinite;
}

.trust-item:hover i{
    transform:rotate(12deg) scale(1.1);
}

.trust-item span{
    margin-left:auto;
    color:#17766B;
    font-weight:700;
    font-size:15px;
}

@keyframes fadeTrust{
    from{ opacity:0; transform:translateY(15px); }
    to{ opacity:1; transform:translateY(0); }
}

@keyframes pulseIcon{
    0%,100%{ box-shadow:0 0 0 0 rgba(254,255,255,.35); }
    50%{ box-shadow:0 0 0 10px rgba(30,166,114,0); }
}

@media(min-width:992px){

    .trust-info{
        gap:22px;
    }

    .trust-item{
        width:300px;
        min-height:95px;
        padding:20px 24px;
        border-radius:18px;
        font-size:16px;
    }

    .trust-item i{
        width:60px;
        height:60px;
        font-size:24px;
    }

    .trust-item span{
        font-size:18px;
        font-weight:700;
    }
}

@media(max-width:992px){

    .trust-info{
        gap:12px;
    }

    .trust-item{
        flex:1 1 calc(50% - 12px);
        min-width:220px;
    }
}

@media(max-width:768px){

    .trust-info{
        flex-direction:column;
        align-items:center;
        gap:12px;
        margin:20px 0;
    }

    .trust-item{
        width:92%;
        max-width:340px;
        min-width:auto;
        padding:14px 18px;
        gap:12px;
        border-radius:16px;
    }

    .trust-item i{
        width:44px;
        height:44px;
        font-size:18px;
    }

    .trust-item strong{
        font-size:14px;
        display:block;
    }

    .trust-item span{
        margin-left:0;
        display:block;
        font-size:14px;
    }
}

/* =========================
   21. KALENDER JADWAL PSIKOLOG
   (dipakai di halaman jadwal_psikolog.php — stylesheet sama)
   ========================= */
.kalender-psikolog{
    width:95%;
    max-width:1400px;
    margin:50px auto;
    background:#fff;
    border-radius:28px;
    padding:35px;
    box-shadow:0 10px 35px rgba(0,0,0,.08);
    border:1px solid #edf2f7;
}

.kalender-psikolog h2{
    color:var(--primary);
    font-size:32px;
    font-weight:700;
    margin-bottom:15px;
}

.legend{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:25px;
    color:#64748b;
    font-weight:500;
}

.warna{
    width:16px;
    height:16px;
    border-radius:5px;
    background:#d7f5e8;
}

.calendar{
    width:100%;
    border-collapse:separate;
    border-spacing:8px;
    font-family:'Poppins',sans-serif;
}

.calendar th{
    background:var(--primary);
    color:#fff;
    padding:16px;
    font-size:16px;
    font-weight:600;
    border-radius:14px;
    border:none;
}

.calendar td{
    background:#fafafa;
    height:115px;
    padding:12px;
    vertical-align:top;
    border:none;
    border-radius:16px;
    transition:.25s ease;
    position:relative;
}

.calendar td:hover{
    transform:translateY(-3px);
    box-shadow:0 8px 20px rgba(0,0,0,.08);
}

.calendar td:not(.available){
    opacity:.55;
}

.calendar td:not(.available):hover{
    opacity:.8;
}

.available{
    background:#eefaf6 !important;
    border:1px solid #d6f3e8;
}

.tanggal-click{
    cursor:pointer;
}

.angka{
    font-size:24px;
    font-weight:700;
    color:#0f172a;
}

.badge{
    margin-top:10px;
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:var(--primary);
    color:#fff;
    padding:8px 12px;
    border-radius:999px;
    font-size:13px;
    font-weight:600;
    font-family:'Poppins',sans-serif;
}

.badge::before{
    content:"●";
    font-size:10px;
}

@media(max-width:900px){

    .calendar{
        font-size:12px;
    }

    .calendar td{
        height:70px;
    }
}

@media(max-width:768px){

    .kalender-psikolog{
        width:95%;
        padding:15px;
        overflow-x:auto;
    }

    .kalender-psikolog h2{
        font-size:20px;
        line-height:1.4;
    }

    .legend{
        font-size:13px;
        margin-bottom:15px;
    }

    .calendar{
        width:100%;
        min-width:650px; /* agar tabel tidak pecah, bisa discroll horizontal */
        border-spacing:4px;
    }

    .calendar th{
        padding:10px;
        font-size:14px;
        border-radius:10px;
    }

    .calendar td{
        height:80px;
        padding:8px;
        border-radius:12px;
    }

    .angka{
        font-size:16px;
    }

    .badge{
        font-size:11px;
        padding:6px 10px;
        margin-top:6px;
    }
}

/* =========================
   22. DETAIL JADWAL
   (dipakai di halaman jadwal_psikolog.php — stylesheet sama)
   ========================= */
.detail-wrapper{
    width:95%;
    max-width:1400px;
    margin:30px auto;
    background:#fff;
    border-radius:28px;
    padding:35px;
    box-shadow:0 10px 35px rgba(0,0,0,.05);
}

.detail-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    margin-bottom:30px;
}

.detail-header h3{
    margin:0;
    color:var(--primary);
    font-size:32px;
    font-weight:700;
    line-height:1.3;
}

.btn-close-detail{
    border:none;
    background:#ef4444;
    color:#fff;
    padding:14px 24px;
    border-radius:14px;
    font-family:'Poppins',sans-serif;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    transition:.3s;
}

.btn-close-detail:hover{
    transform:translateY(-2px);
    background:#dc2626;
}

.detail-card{
    background:#f8fafc;
    border-radius:24px;
    padding:28px 30px;
    margin-bottom:18px;
    transition:.3s;
    font-size:18px;
    line-height:2;
    color:#334155;
}

.detail-card:hover{
    background:#f1f5f9;
}

.detail-card b{
    color:#0f172a;
    font-weight:700;
}

@media(max-width:900px){
    .detail-header{
        flex-direction:column;
        gap:15px;
    }
}

@media(max-width:768px){

    .detail-wrapper{
        padding:20px;
        border-radius:20px;
    }

    .detail-header{
        flex-direction:column;
        align-items:flex-start;
    }

    .detail-header h3{
        font-size:24px;
    }

    .btn-close-detail{
        width:100%;
        text-align:center;
    }

    .detail-card{
        padding:20px;
        font-size:16px;
        line-height:1.9;
    }
}

/* =========================
   23. FORM & INPUT GLOBAL
   ========================= */
input,
select,
textarea{
    font-size:14px;
    border:1.5px solid #dbe3e8;
    border-radius:12px;
    padding:12px 15px;
    outline:none;
    transition:.25s ease;
    background:#fff;
}

input:focus,
select:focus,
textarea:focus{
    border-color:#17766B;
    box-shadow:0 0 0 4px rgba(23,118,107,.12);
}

/* Supaya icon Font Awesome sejajar vertikal */
i.fa,
i.fas,
i.far,
i.fab,
i.fa-solid{
    line-height:1;
}

/* =========================
   24. GLOBAL RESPONSIVE FALLBACK
   ========================= */
@media(max-width:900px){

    .about-card{
        grid-template-columns:1fr;
    }

    .about-image{
        min-height:300px;
    }

    .about-content{
        padding:25px;
    }

    .title{
        font-size:26px;
    }
}

@media(max-width:768px){

    body{
        padding-top:90px;
    }
}
/* =========================================================
   PROMO SLIDER — Kuesioner Gratis + Tes Psikologi Digital
   + Konseling Lite (tampil 2 kartu, geser kalau lebih)
   Namespace "pg-" biar tidak bentrok dengan style lama.
   ========================================================= */

.pg-section{
    width:94%;
    max-width:1180px;
    margin:50px auto;
}

.pg-wrapper{
    display:flex;
    align-items:center;
    gap:16px;
}

.pg-track-wrap{
    flex:1;
    overflow:hidden;
}

.pg-track{
    display:flex;
    gap:22px;
    transition:transform .45s ease;
}

/* NAV BUTTONS */
.pg-nav{
    flex-shrink:0;
    width:50px;
    height:50px;
    border:none;
    border-radius:50%;
    background:#17766B;
    color:#fff;
    font-size:17px;
    cursor:pointer;
    transition:.25s ease;
}
.pg-nav:hover:not(:disabled){ background:#0F5A51; transform:translateY(-2px); }
.pg-nav:disabled{ opacity:.35; cursor:default; box-shadow:none; }

/* DOTS */
.pg-dots{ display:flex; justify-content:center; gap:8px; margin-top:22px; }
.pg-dot{ width:9px; height:9px; border-radius:50%; background:#dbe3e8; cursor:pointer; transition:.25s ease; }
.pg-dot.active{ background:#17766B; width:24px; border-radius:999px; }

/* CARD BASE — tampil 2 per layar (desktop & tablet) */
.pg-card{
    flex:0 0 calc((100% - 22px) / 2);
    border-radius:22px;
    box-shadow:0 10px 26px rgba(15,90,81,.08);
    transition:transform .3s ease, box-shadow .3s ease;
    background:#fff;
    border:1px solid #edf2f7;
}
.pg-card:hover{ transform:translateY(-4px); box-shadow:0 16px 34px rgba(15,90,81,.12); }
.pg-card__body{ padding:30px 26px; height:100%; display:flex; flex-direction:column; }

.pg-icon{
    width:46px; height:46px; border-radius:13px; background:#17766B; color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:19px; margin-bottom:14px;
}

.pg-points{ list-style:none; display:grid; gap:9px; margin:14px 0 20px; }
.pg-points li{ display:flex; align-items:center; gap:9px; font-size:14px; font-weight:500; color:#334155; }
.pg-points li i{
    width:18px; height:18px; flex-shrink:0; border-radius:50%;
    background:#eefaf8; color:#17766B; font-size:9px;
    display:flex; align-items:center; justify-content:center;
}

.pg-card--tes{ background:#fff; border:1px solid #d7ece7; }
.pg-card--lite{ background:#fff; border:1px solid #f1e0d8; }

/* BADGE */
.pg-badge{
    display:inline-flex; align-items:center; gap:6px; width:fit-content;
    padding:6px 13px; border-radius:999px; font-size:11px; font-weight:700;
    letter-spacing:.02em; text-transform:uppercase; margin-bottom:12px;
}
.pg-badge--red{ background:#fdecea; color:#ef4444; }
.pg-badge--teal{ background:#E5F1EE; color:#146F63; }
.pg-badge--green{ background:#e7f7ee; color:#17766B; }

/* TITLE & DESC */
.pg-title{ font-size:20px; font-weight:800; color:#0f172a; margin-bottom:8px; line-height:1.25; }
.pg-title--coral{ color:#E8603C; }
.pg-title--green{ color:#17766B; }
.pg-desc{ font-size:13.5px; line-height:1.65; color:#64748b; margin-bottom:5px; }

/* PRICE */
.pg-price{ margin:16px 0 16px; }
.pg-price__old{ font-size:13px; color:#9AAAA6; text-decoration:line-through; font-weight:500; }
.pg-price__row{ display:flex; align-items:center; gap:11px; flex-wrap:wrap; margin-top:2px; }
.pg-price__new{ font-size:27px; font-weight:800; color:#0E4B43; }
.pg-price__new--green{ color:#17766B; }
.pg-price__pill{ font-size:11px; font-weight:700; background:#E8603C; color:#fff; padding:5px 11px; border-radius:999px; }
.pg-price__pill--green{ background:#17766B; }

/* COUNTDOWN */
.pg-countdown{ display:flex; align-items:center; gap:7px; margin-bottom:16px; flex-wrap:wrap; }
.pg-time{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    background:#EFF3F2; border:1px solid #DCE6E3; border-radius:11px; padding:9px 4px; width:54px;
}
.pg-time__num{ font-size:16px; font-weight:800; font-variant-numeric:tabular-nums; color:#0E4B43; }
.pg-time__unit{ font-size:8.5px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:#5D746E; margin-top:2px; }
.pg-time__sep{ font-size:16px; font-weight:700; color:#c9d6d2; }

/* ALERT */
.pg-alert{
    display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600;
    background:#FDEDE8; border:1px solid #F4CFC1; border-radius:11px; padding:10px 13px;
    margin-bottom:16px; color:#C64B2A;
}
.pg-alert--green{ background:#E5F1EE; border:1px solid #cfe6e1; color:#0F5A51; }

/* ACTIONS / BUTTONS */
.pg-actions{ margin-top:auto; display:flex; flex-direction:column; gap:9px; }
.pg-btn{
    display:flex; align-items:center; justify-content:center; gap:9px;
    text-decoration:none; font-family:'Poppins',sans-serif; font-weight:600;
    font-size:13.5px; padding:13px 16px; border-radius:12px;
    transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.pg-btn:active{ transform:scale(.98); }
.pg-btn--primary{ background:#17766B; color:#fff; }
.pg-btn--primary:hover{ background:#0F5A51; }
.pg-btn--ghost{ background:transparent; color:#17766B; border:1.5px solid #cfe6e1; }
.pg-btn--ghost:hover{ background:#eefaf8; border-color:#17766B; }
.pg-btn--coral{ background:#E8603C; color:#fff; box-shadow:0 8px 16px -8px rgba(232,96,60,.6); }
.pg-btn--coral:hover{ background:#C64B2A; }

/* RESPONSIVE */
@media(max-width:992px){
    .pg-section{ max-width:820px; }
    .pg-track{ gap:16px; }
    .pg-card{ flex:0 0 calc((100% - 16px) / 2); }
    .pg-nav{ width:44px; height:44px; font-size:15px; }
}

@media(max-width:768px){
    .pg-section{ max-width:640px; }
    .pg-card__body{ padding:24px 20px; }
    .pg-title{ font-size:18px; }
}

/* HP: turun jadi 1 kartu per layar (JS ikut sinkron perView=1) */
@media(max-width:600px){
    .pg-section{ max-width:420px; width:92%; }
    .pg-wrapper{ gap:10px; }
    .pg-track{ gap:14px; }
    .pg-card{ flex:0 0 100%; }
    .pg-nav{ width:40px; height:40px; font-size:14px; }
}

@media(max-width:380px){
    .pg-card__body{ padding:20px 18px; }
    .pg-title{ font-size:17px; }
    .pg-desc{ font-size:12.5px; }
    .pg-price__new{ font-size:23px; }
    .pg-time{ width:46px; padding:7px 2px; }
    .pg-time__num{ font-size:14px; }
    .pg-icon{ width:40px; height:40px; font-size:17px; border-radius:11px; }
    .pg-btn{ font-size:12.5px; padding:11px 13px; }
}
/* =========================================================
   HOME SIMPLE (home_simple.php) — prefix "sm-"
   ========================================================= */
.sm-wrap{
    width:95%;
    max-width:1200px;
    margin:0 auto;
}

/* ---------- Sapaan ---------- */
.sm-welcome{
    text-align:center;
    padding:10px 15px 5px;
}
.sm-welcome h2{
    font-size:28px;
    font-weight:700;
    color:var(--primary);
    margin-bottom:8px;
}
.sm-welcome p{
    max-width:700px;
    margin:0 auto;
    color:#64748b;
    font-size:15px;
    line-height:1.8;
}

/* ---------- Tombol ke tampilan lengkap ---------- */
.sm-switch{
    text-align:center;
    margin:16px 0 0;
}
.sm-switch--bottom{
    margin:20px 0 10px;
}
.sm-switch a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    max-width:100%;
    padding:12px 22px;
    border-radius:12px;
    border:1.5px solid #cfe6e1;
    background:#fff;
    color:var(--primary);
    font-size:14px;
    font-weight:600;
    text-decoration:none;
    transition:.25s ease;
}
.sm-switch a:focus-visible{
    background:var(--primary);
    border-color:var(--primary);
    color:#fff;
    outline:none;
}

/* ---------- Kelompok ---------- */
.sm-group{
    margin:42px 0;
    scroll-margin-top:100px;
}
.sm-group-head{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:18px;
}
.sm-group-head > div:last-child{
    min-width:0;
}
.sm-group-icon{
    flex-shrink:0;
    width:48px;
    height:48px;
    border-radius:14px;
    background:var(--primary);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
}
.sm-group-head h2{
    font-size:22px;
    font-weight:700;
    color:var(--primary);
    line-height:1.25;
}
.sm-group-head p{
    font-size:13.5px;
    color:#64748b;
    line-height:1.5;
}

/* ---------- Grid & Kartu (seluruh kartu bisa diklik) ---------- */
.sm-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
    gap:16px;
}

.sm-item{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
    padding:22px;
    background:#fff;
    border:1px solid #edf2f7;
    border-radius:20px;
    box-shadow:0 8px 22px rgba(0,0,0,.06);
    color:var(--text);
    text-decoration:none;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.sm-item:focus-visible{
    border-color:var(--primary);
    box-shadow:0 0 0 4px rgba(23,118,107,.18);
    outline:none;
}
.sm-item:active{
    transform:scale(.99);
}

.sm-icon{
    flex-shrink:0;
    width:52px;
    height:52px;
    border-radius:16px;
    background:#eefaf8;
    color:var(--primary);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
}

.sm-text{
    min-width:0;
}
.sm-text h3{
    font-size:16px;
    font-weight:700;
    color:#0f172a;
    line-height:1.4;
    margin-bottom:4px;
    overflow-wrap:anywhere;
}
.sm-text p{
    font-size:13.5px;
    color:#64748b;
    line-height:1.65;
    overflow-wrap:anywhere;
}

.sm-tag{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-top:10px;
    padding:5px 12px;
    border-radius:999px;
    background:#fff8e7;
    color:#b7791f;
    font-size:12px;
    font-weight:700;
}

.sm-chevron{
    position:absolute;
    top:22px;
    right:20px;
    font-size:13px;
    color:#cbd5e1;
    transition:.25s ease;
}

/* Hover hanya untuk perangkat dengan mouse (HP tidak "menyangkut") */
@media(hover:hover){
    .sm-switch a:hover{
        background:var(--primary);
        border-color:var(--primary);
        color:#fff;
    }
    .sm-item:hover{
        transform:translateY(-4px);
        box-shadow:0 14px 32px rgba(15,90,81,.14);
        border-color:var(--primary);
    }
    .sm-item:hover .sm-chevron{
        color:var(--primary);
        transform:translateX(3px);
    }
}

/* ---------- Warna ikon per kelompok ---------- */
.sm-tone-gold .sm-group-icon{ background:var(--secondary); }
.sm-tone-gold .sm-icon{ background:#fff8e7; color:#d99a2b; }

.sm-tone-coral .sm-group-icon{ background:#E8603C; }
.sm-tone-coral .sm-icon{ background:#FDEDE8; color:#E8603C; }
.sm-tone-coral .sm-text h3{ color:#E8603C; }

.sm-tone-blue .sm-group-icon{ background:#3b82f6; }
.sm-tone-blue .sm-icon{ background:#e8f0fe; color:#3b82f6; }

/* ---------- FAQ (tanpa JavaScript) ---------- */
.sm-faq{
    background:#fff;
    border:1px solid #edf2f7;
    border-radius:18px;
    margin-bottom:12px;
    box-shadow:0 8px 20px rgba(0,0,0,.05);
    overflow:hidden;
}
.sm-faq summary{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    padding:18px 22px;
    cursor:pointer;
    list-style:none;
    font-size:15.5px;
    font-weight:600;
    color:var(--primary);
}
.sm-faq summary::-webkit-details-marker{ display:none; }
.sm-faq summary i{ flex-shrink:0; transition:.3s; font-size:13px; }
.sm-faq[open] summary{ background:var(--primary); color:#fff; }
.sm-faq[open] summary i{ transform:rotate(180deg); }
.sm-faq p{
    padding:18px 22px;
    color:#64748b;
    font-size:14.5px;
    line-height:1.8;
}

.sm-empty{
    text-align:center;
    color:#64748b;
    font-size:14px;
}

/* ---------- Responsif ---------- */
@media(max-width:768px){
    .sm-welcome h2{ font-size:23px; }
    .sm-welcome p{ font-size:14px; }
    .sm-group{ margin:34px 0; }
    .sm-group-head h2{ font-size:19px; }
    .sm-group-head p{ font-size:12.5px; }
    .sm-grid{ grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; }
}

/* HP: kartu 1 kolom, ikon di kiri & teks di kanan */
@media(max-width:600px){
    .sm-grid{ grid-template-columns:minmax(0,1fr); gap:12px; }
    .sm-item{
        flex-direction:row;
        align-items:flex-start;
        gap:14px;
        padding:16px 40px 16px 16px;
        border-radius:16px;
    }
    .sm-icon{ width:46px; height:46px; font-size:19px; border-radius:14px; }
    .sm-text{ flex:1; }
    .sm-text h3{ font-size:15px; }
    .sm-text p{ font-size:13px; }
    .sm-chevron{ top:50%; right:16px; transform:translateY(-50%); }
    .sm-faq summary{ padding:15px 16px; font-size:14.5px; }
    .sm-faq p{ padding:15px 16px; font-size:13.5px; }
}

@media(max-width:600px) and (hover:hover){
    .sm-item:hover .sm-chevron{ transform:translate(3px,-50%); }
}

@media(max-width:400px){
    .sm-switch a{ width:100%; }
}

@media(max-width:360px){
    .sm-group-icon{ width:42px; height:42px; font-size:17px; }
    .sm-item{ padding:14px 36px 14px 14px; }
}

@media(prefers-reduced-motion:reduce){
    .sm-item, .sm-chevron, .sm-faq summary i, .sm-switch a{ transition:none; }
}