@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* =====================================================
   GLOBAL
===================================================== */

:root{

    --primary:#3B82F6;
    --secondary:#06B6D4;
    --accent:#FFD54A;
    --dark:#071532;
    --dark2:#0D1F4A;
    --card:rgba(255,255,255,.08);
    --border:rgba(255,255,255,.12);
    --text:#ffffff;
    --muted:#BFD4FF;

}

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

body{

    font-family:'Poppins',sans-serif;
    color:var(--text);

}

/* =====================================================
   SECTION
===================================================== */


.review-section{

    position:relative;
    overflow:hidden;
    padding:120px 8% 90px;
    min-height:100vh;

    background:
        linear-gradient(
            rgba(30,50,80,.65),
            rgba(30,50,80,.60)
        ),
        url('/images/ulasan.png');

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    background-attachment:fixed;

}

.review-container{

    max-width:1250px;
    margin:auto;

}

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

.review-hero{
    width: 100%;
    max-width: 800px;      /* sebelumnya memenuhi container */
    margin: 0 auto 45px;
    padding: 40px 35px;
    text-align: center;
    background:rgba(0,183,255,.15);
    border-radius: 28px;
    border:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(20px);

    position:relative;
    overflow:hidden;
}

.review-hero::before{

    content:'';

    position:absolute;

    width:350px;
    height:350px;

    border-radius:50%;

    background:rgba(0,183,255,.15);

    top:-140px;
    right:-120px;

    filter:blur(20px);

}

.review-hero::after{

    content:'';

    position:absolute;

    width:260px;
    height:260px;

    border-radius:50%;

    background:rgba(255,210,0,.15);

    bottom:-120px;
    left:-80px;

}

.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:8px 18px;
    border-radius:50px;
    background:rgba(255,255,255,.12);
    color:#fff;
    font-size:.82rem;
    margin-bottom:18px;
}

.review-hero h1{
    font-size:2.4rem;   /* sebelumnya 3.2rem */
    font-weight:800;
    line-height:1.15;
}

.review-hero h1 span{
    display:block;
    color:#6DEBFF;
}

.review-hero p{
    max-width:620px;
    margin:18px auto;
    color:var(--muted);
    font-size:1rem;
    line-height:1.7;
}

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

.hero-stats{
    display:flex;
    justify-content:center;
    gap:18px;
    flex-wrap:wrap;
    margin-top:30px;
}
.stat-card{
    display:flex;
    align-items:center;
    gap:14px;
    padding:16px 22px;
    border-radius:18px;
    background:var(--card);
    backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,.12);
    transition:.35s;
    min-width:190px;
}

.stat-card:hover{

    transform:translateY(-8px);

    box-shadow:0 15px 40px rgba(0,180,255,.25);

}

.stat-card .icon{
    width:52px;
    height:52px;
    border-radius:15px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    background:linear-gradient(135deg,#27C8FF,#4A5DFF);
}

.stat-card h2{
    font-size:1.6rem;
    line-height:1;
}

.stat-card small{
    font-size:.85rem;
    color:#D7E6FF;
}

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

.review-content{

    display:grid;

    grid-template-columns:1.2fr .8fr;

    gap:35px;

    margin-bottom:70px;

}

.review-form,
.info-card{

    background:var(--card);

    border:1px solid var(--border);

    backdrop-filter:blur(20px);

    border-radius:30px;

    padding:35px;

}

.section-header{

    margin-bottom:30px;

}

.section-header.center{

    text-align:center;

}

.section-header h2{

    font-size:2rem;

    margin-top:12px;

}

.section-header p{

    margin-top:15px;

    color:var(--muted);

    line-height:1.8;

}

.mini-badge{

    display:inline-block;

    padding:9px 18px;

    background:rgba(0,180,255,.15);

    color:#6DEBFF;

    border-radius:30px;

    font-size:.9rem;

}

/* =====================================================
   FORM
===================================================== */

.form-group{

    margin-bottom:24px;

}

.form-group label{

    display:block;

    margin-bottom:10px;

    font-weight:600;

}

.form-group input,
.form-group textarea,
.form-group select{

    width:100%;

    padding:16px 18px;

    border-radius:16px;

    border:1px solid rgba(255,255,255,.12);

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

    color:#fff;

    outline:none;

    font-size:15px;

    transition:.3s;

}

.form-group input::placeholder,
.form-group textarea::placeholder{

    color:#B7C8EE;

}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus{

    border-color:#41D6FF;

    box-shadow:0 0 0 4px rgba(65,214,255,.2);

}

.btn-review{

    width:100%;

    border:none;

    padding:18px;

    border-radius:18px;

    cursor:pointer;

    font-weight:700;

    color:#fff;

    font-size:16px;

    background:linear-gradient(135deg,#2F7DFF,#05D3FF);

    transition:.35s;

}

.btn-review:hover{

    transform:translateY(-4px);

    box-shadow:0 15px 30px rgba(0,190,255,.35);

}

/* =====================================================
   INFO
===================================================== */

.review-info{

    display:flex;

    flex-direction:column;

    gap:25px;

}

.icon-box{

    width:80px;

    height:80px;

    border-radius:25px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:38px;

    background:linear-gradient(135deg,#FFD84C,#FFB400);

    margin-bottom:18px;

}

.info-card h3{

    margin-bottom:15px;

}

.info-card p{

    color:var(--muted);

    line-height:1.9;

}

/* =====================================================
   REVIEW GRID
===================================================== */

.review-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:28px;

    margin-top:40px;

}

.review-card{

    background:var(--card);

    border-radius:28px;

    border:1px solid rgba(255,255,255,.12);

    backdrop-filter:blur(20px);

    padding:28px;

    transition:.35s;

}

.review-card:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 45px rgba(0,180,255,.18);

}

.review-header{

    display:flex;

    align-items:center;

    gap:18px;

}

.avatar{

    width:60px;

    height:60px;

    border-radius:50%;

    background:linear-gradient(135deg,#3B82F6,#06B6D4);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;

    font-weight:700;

}

.role{

    color:#6DEBFF;

    font-size:.9rem;

}

.stars{

    font-size:22px;

    margin:20px 0;

    color:#FFD84A;

}

.review-text{

    color:#E4ECFF;

    line-height:1.9;

    margin-bottom:22px;

}

.review-footer{

    display:flex;

    justify-content:space-between;

    color:#9EB8EA;

    font-size:.9rem;

}

/* =====================================================
   EMPTY
===================================================== */

.empty-review{

    text-align:center;

    padding:70px 20px;

    background:var(--card);

    border-radius:30px;

    border:1px solid rgba(255,255,255,.12);

}

.empty-review i{

    font-size:70px;

    color:#6DEBFF;

    margin-bottom:20px;

}

/* =====================================================
   ALERT
===================================================== */

.alert-success{

    background:#0E8F53;

    padding:16px;

    border-radius:14px;

    margin-bottom:20px;

}

.alert-error{

    background:#A92B3B;

    padding:16px;

    border-radius:14px;

    margin-bottom:20px;

}

.alert-error ul{

    margin-left:20px;

}

/* =====================================================
   PAGINATION
===================================================== */

.pagination-wrapper{

    margin-top:45px;

    display:flex;

    justify-content:center;

}

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

    .review-section{
        padding:60px 18px;
    }

    .review-hero{
        padding:35px 20px;
    }

    .review-hero h1{
        font-size:1.9rem;
    }

    .review-hero p{
        font-size:.95rem;
    }

    .hero-stats{
        flex-direction:column;
        gap:15px;
    }

    .stat-card{
        width:100%;
        min-width:unset;
    }
}