/* NERAKA33 CSS PART 06/10
   Jangan ubah urutan load. Load 01 -> 10.
*/

/* BORDER DALAM — TIDAK BERPUTAR */

.description-section::before,
.reviews-section::before,
.faq-section::before{
    content:"";

    position:absolute;
    inset:7px;
    z-index:1;

    border:1px solid rgba(255,215,0,.35);
    border-radius:10px;

    box-shadow:
        inset 0 0 10px rgba(255,215,0,.06),
        0 0 7px rgba(255,215,0,.18);

    pointer-events:none;
}

/* CAHAYA HORIZONTAL HALUS — TIDAK MENYILANG */

.description-section::after,
.reviews-section::after,
.faq-section::after{
    content:"";

    position:absolute;
    top:0;
    left:-30%;
    z-index:2;

    width:28%;
    height:3px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--nx-gold),
            var(--nx-gold-bright),
            var(--nx-gold),
            transparent
        );

    box-shadow:
        0 0 7px rgba(255,215,0,.92),
        0 0 14px rgba(255,215,0,.48);

    animation:nxPanelLamp 4.3s linear infinite;

    pointer-events:none;
}

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

.description-section{
    padding:28px 28px 28px 34px;
}

.description-content{
    position:relative;
    z-index:5;

    padding:20px;

    border:1px solid rgba(255,215,0,.48);
    border-radius:12px;

    background:
        linear-gradient(180deg,rgba(24,24,24,.98),rgba(5,5,5,.99));

    box-shadow:
        inset 0 0 18px rgba(0,0,0,.80),
        0 0 10px rgba(255,215,0,.10);

    color:var(--nx-text) !important;

    font-size:15px;
    line-height:1.75;
}

/* PAKSA SELURUH TEKS TERBACA */

.description-content,
.description-content p,
.description-content li,
.description-content span,
.description-content div,
.review-card,
.review-card p,
.review-card span,
.review-text,
.faq-item,
.faq-item p,
.faq-item span,
.faq-question,
.faq-answer,
.faq-answer p{
    color:#f5f5f5 !important;
    opacity:1 !important;
    visibility:visible !important;
}

.description-content p{
    margin:0 0 18px;
}

.description-content p:last-child{
    margin-bottom:0;
}

.description-content h1,
.description-content h2,
.description-content h3,
.description-content h4,
.description-content h5,
.description-content h6{
    margin:20px 0 10px !important;

    color:#ffffff !important;

    font-family:"Arial Black",Arial,sans-serif !important;
    line-height:1.35 !important;

    text-shadow:
        0 2px 2px #000000,
        0 0 7px rgba(255,215,0,.30) !important;
}

.description-content h1:first-child,
.description-content h2:first-child,
.description-content h3:first-child{
    margin-top:0 !important;
}

.description-content strong,
.description-content b,
.faq-answer strong,
.faq-answer b,
.review-card strong,
.review-card b{
    color:var(--nx-gold-light) !important;
    font-weight:900 !important;
    text-shadow:0 0 6px rgba(255,215,0,.42) !important;
}

.description-content a,
.faq-answer a,
.review-card a{
    color:var(--nx-gold) !important;
    font-weight:900 !important;
    text-decoration:underline !important;
    text-shadow:0 0 5px rgba(255,215,0,.38) !important;
}

.description-content a:hover,
.faq-answer a:hover,
.review-card a:hover{
    color:#ffffff !important;
    background:rgba(255,215,0,.16);
    padding:2px 5px;
    border-radius:4px;
}

/* ==================================================
   REVIEWS
================================================== */

.reviews-grid{
    position:relative;
    z-index:5;

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:18px;

    margin-top:24px;
}

.review-card,
.faq-item{
    position:relative;
    overflow:hidden;

    padding:21px 21px 21px 27px;

    border:1px solid rgba(255,215,0,.60);
    border-radius:13px;

    background:
        linear-gradient(180deg,#1b1b1b 0%,#090909 58%,#030303 100%);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        inset 0 0 18px rgba(0,0,0,.76),
        0 6px 15px rgba(0,0,0,.52),
        0 0 9px rgba(255,215,0,.20);

    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}

.review-card::before,
.faq-item::before{
    content:"";

    position:absolute;
    top:8px;
    bottom:8px;
    left:7px;

    width:5px;

    border-radius:999px;

    background:
        linear-gradient(
            180deg,
            var(--nx-gold-bright),
            var(--nx-gold),
            var(--nx-gold-dark)
        );

    box-shadow:
        0 0 6px rgba(255,215,0,.78),
        0 0 12px rgba(255,215,0,.28);
}

.review-card::after,
.faq-item::after{
    content:"";

    position:absolute;
    top:0;
    left:-40%;

    width:25%;
    height:2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--nx-gold-bright),
            var(--nx-gold),
            transparent
        );

    box-shadow:
        0 0 6px rgba(255,215,0,.75);

    transition:left .55s ease;
}

.review-card:hover,
.faq-item:hover{
    transform:translateY(-4px);

    border-color:var(--nx-gold-bright);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.09),
        inset 0 0 20px rgba(0,0,0,.72),
        0 10px 20px rgba(0,0,0,.58),
        0 0 15px rgba(255,215,0,.38);
}

.review-card:hover::after,
.faq-item:hover::after{
    left:125%;
}

.reviewer-name{
    position:relative;
    z-index:3;

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

    margin-bottom:13px;

    color:#ffffff !important;

    font-family:"Arial Black",Arial,sans-serif;
    font-size:17px;
    font-weight:900;
    text-transform:uppercase;

    text-shadow:
        0 2px 2px #000000,
        0 0 7px rgba(255,215,0,.42);
}

.reviewer-name::before{
    content:"♞";

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

    width:36px;
    height:36px;
    flex-shrink:0;

    border:1px solid var(--nx-gold);
    border-radius:8px;

    color:var(--nx-gold);

    background:
        linear-gradient(180deg,#252000,#090909);

    box-shadow:
        0 3px 0 #5d4500,
        0 0 9px rgba(255,215,0,.52);

    font-size:20px;
}

.review-text{
    position:relative;
    z-index:3;

    margin:0;
    padding:13px 14px;

    border:1px solid rgba(255,215,0,.28);
    border-radius:9px;

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

    box-shadow:
        inset 0 0 12px rgba(0,0,0,.72);

    color:#f2f2f2 !important;

    font-family:Georgia,"Times New Roman",serif;
    font-size:14px;
    font-style:italic;
    line-height:1.65;
}

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

.faq-section{
    margin:35px 0;
    padding:30px 28px 28px;
}

.faq-section .section-title{
    position:relative;
    z-index:5;

    margin:0 0 26px;
    padding:15px 54px 15px 20px;

    font-size:22px;
}

.faq-container{
    position:relative;
    z-index:5;

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

.faq-question{
    position:relative;
    z-index:3;

    display:flex;
    align-items:flex-start;
    gap:11px;

    margin-bottom:14px;

    color:#ffffff !important;

    font-family:"Arial Black",Arial,sans-serif;
    font-size:17px;
    font-weight:900;
    line-height:1.5;

    text-shadow:
        0 2px 2px #000000,
        0 0 7px rgba(255,215,0,.35);
}

.faq-question::before,
.faq-answer::before{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:35px;
    height:35px;
    flex-shrink:0;

    box-sizing:border-box;

    border:1px solid var(--nx-gold);
    border-radius:8px;

    background:
        linear-gradient(180deg,#292100,#090909);

    box-shadow:
        0 3px 0 #5d4500,
        0 0 9px rgba(255,215,0,.42);

    color:var(--nx-gold);

    font-family:"Arial Black",Arial,sans-serif;
    font-size:16px;
}

.faq-question::before{
    content:"Q";
}

.faq-answer{
    position:relative;
    z-index:3;

    padding-left:47px;
}

.faq-answer::before{
    content:"A";

    position:absolute;
    top:0;
    left:0;
}

.faq-answer p{
    margin:0;
    padding:12px 14px;

    border:1px solid rgba(255,215,0,.28);
    border-radius:9px;

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

    box-shadow:
        inset 0 0 12px rgba(0,0,0,.72);

    color:#f2f2f2 !important;

    font-family:Arial,Tahoma,sans-serif;
    font-size:15px;
    line-height:1.7;
}

/* ==================================================
   ANIMASI
================================================== */

@keyframes nxTitleLamp{
    from{
        left:-35%;
    }

    to{
        left:100%;
    }
}

@keyframes nxPanelLamp{
    from{
        left:-30%;
    }

    to{
        left:102%;
    }
}

@keyframes nxCrownPulse{
    from{
        filter:brightness(1);
        transform:translateY(-50%) scale(1);
    }

    to{
        filter:brightness(1.35);
        transform:translateY(-50%) scale(1.08);
    }
}

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

@media(max-width:768px){
    .section-container{
        margin:24px auto;
        padding:0 12px;
    }

    .section-title{
        font-size:18px;
    }

    .description-section,
    .reviews-section{
        padding:22px;
    }

    .reviews-grid{
        grid-template-columns:1fr;
        gap:16px;
    }

    .faq-section{
        padding:24px 18px;
    }

    .faq-section .section-title{
        font-size:19px;
    }

    .faq-item{
        padding:18px 18px 18px 24px;
    }

    .faq-question{
        font-size:15px;
    }

    .faq-answer p{
        font-size:14px;
    }
}