/* =========================================================
   NERAKA33 FINAL THEME
   HITAM • MERAH • EMAS • PUTIH
   ARTIKEL • REVIEW • FAQ
   RAPI • SATU STYLE • RESPONSIVE
========================================================= */

:root{
    --bg-1:#000000;
    --bg-2:#090202;
    --bg-3:#180404;

    --red-1:#ff4545;
    --red-2:#e60012;
    --red-3:#9d0008;
    --red-4:#4b0004;

    --gold-1:#fff3ad;
    --gold-2:#ffd84f;
    --gold-3:#ffc400;
    --gold-4:#9b6500;

    --text:#ffffff;
    --text-soft:#f0e5c5;
    --line:rgba(255,196,0,.34);

    --glow:
        0 0 8px rgba(255,196,0,.38),
        0 0 22px rgba(230,0,18,.30),
        0 0 42px rgba(0,0,0,.35);
}

.section-container{
    max-width:1200px;
    margin:36px auto;
    padding:0 20px;
    font-family:'Poppins','Segoe UI',Arial,sans-serif;
}

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

.section-title{
    position:relative;
    margin:0 0 24px;
    padding:0 0 13px 42px;

    color:#ffffff;
    font-size:23px;
    font-weight:900;
    line-height:1.3;
    letter-spacing:.8px;
    text-transform:uppercase;

    border-bottom:2px solid var(--gold-3);

    text-shadow:
        0 1px 2px #000,
        0 0 7px rgba(255,196,0,.38),
        0 0 14px rgba(230,0,18,.20);
}

.section-title::before{
    content:"";
    position:absolute;
    left:0;
    top:50%;

    width:30px;
    height:30px;

    transform:translateY(-50%);

    background:
        url("https://www.neraka33x1.com/image/neraka33x1-favicon.webp")
        center / contain
        no-repeat;

    filter:
        drop-shadow(0 0 4px rgba(255,196,0,.65))
        drop-shadow(0 0 8px rgba(230,0,18,.40));

    pointer-events:none;
}

.section-title::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-2px;

    width:125px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            #ffffff,
            var(--gold-2),
            var(--red-2),
            transparent
        );

    box-shadow:
        0 0 8px rgba(255,196,0,.55),
        0 0 15px rgba(230,0,18,.35);

    animation:titleScan 2.8s ease-in-out infinite;
}

/* =========================
   PANEL UTAMA
========================= */

.description-section,
.reviews-section,
.faq-section{
    position:relative;
    overflow:hidden;
    isolation:isolate;

    background:
        url("https://www.neraka33x1.com/image/neraka33x1-favicon.webp") calc(100% - 18px) 18px / 54px 54px no-repeat,
        radial-gradient(circle at 10% 0%,rgba(230,0,18,.12),transparent 30%),
        radial-gradient(circle at 90% 100%,rgba(255,196,0,.08),transparent 34%),
        linear-gradient(145deg,#1c0505 0%,#0b0202 48%,#000000 100%);

    border:1px solid rgba(255,196,0,.78);
    border-radius:14px;

    box-shadow:
        0 0 10px rgba(255,196,0,.24),
        0 0 28px rgba(230,0,18,.20),
        inset 0 1px 0 rgba(255,255,255,.08),
        inset 0 0 34px rgba(230,0,18,.05);
}

.description-section{
    padding:30px;
    margin-bottom:38px;
}

.reviews-section{
    padding:30px;
    margin-bottom:38px;
}

.faq-section{
    padding:36px;
    margin:38px 0;
}

.description-section::before,
.reviews-section::before,
.faq-section::before{
    content:"";
    position:absolute;
    top:0;
    left:-100%;

    width:100%;
    height:2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--red-2),
            #ffffff,
            var(--gold-2),
            transparent
        );

    box-shadow:
        0 0 8px rgba(255,196,0,.60),
        0 0 18px rgba(230,0,18,.45);

    animation:topScan 4s linear infinite;
    z-index:4;
}

.description-section::after,
.reviews-section::after,
.faq-section::after{
    content:"";
    position:absolute;
    right:0;
    bottom:-100%;

    width:2px;
    height:100%;

    background:
        linear-gradient(
            180deg,
            transparent,
            var(--red-2),
            var(--gold-2),
            #ffffff,
            transparent
        );

    box-shadow:
        0 0 8px rgba(255,196,0,.55),
        0 0 18px rgba(230,0,18,.42);

    animation:sideScan 4s linear infinite 2s;
    z-index:4;
}

/* =========================
   ARTIKEL
========================= */

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

    color:var(--text-soft);
    font-size:16px;
    line-height:1.8;
}

.description-content p,
.description-section p{
    margin:0 0 20px;

    color:#eee2c2;
    font-size:15px;
    line-height:1.75;

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

.description-content h1,
.description-section h1{
    margin:0 0 16px;

    color:#ffffff;
    font-size:30px;
    font-weight:900;
    line-height:1.3;

    text-shadow:
        0 1px 2px #000,
        0 0 9px rgba(255,196,0,.28),
        0 0 14px rgba(230,0,18,.18);
}

.description-content h2,
.description-section h2{
    margin:28px 0 12px;

    color:#fff4d0;
    font-size:24px;
    font-weight:850;
    line-height:1.35;

    text-shadow:
        0 1px 2px #000,
        0 0 8px rgba(255,196,0,.30);
}

.description-content h3,
.description-section h3{
    margin:24px 0 10px;

    color:#ffe7a0;
    font-size:20px;
    font-weight:800;
    line-height:1.4;

    text-shadow:0 0 7px rgba(255,196,0,.26);
}

.description-content strong,
.description-section strong{
    color:var(--gold-2);
    font-weight:800;

    text-shadow:
        0 0 6px rgba(255,196,0,.35);
}

.description-content a,
.description-section a{
    color:var(--gold-3);
    font-weight:700;
    text-decoration:none;

    transition:
        color .22s ease,
        text-shadow .22s ease;
}

.description-content a:hover,
.description-section a:hover{
    color:#ffffff;

    text-shadow:
        0 0 6px rgba(255,196,0,.70),
        0 0 12px rgba(230,0,18,.40);
}

.description-content ul,
.description-content ol{
    margin:14px 0 22px;
    padding-left:25px;
    color:#eee2c2;
}

.description-content li{
    margin-bottom:8px;
    color:#eee2c2;
    line-height:1.7;
}

.description-content li::marker{
    color:var(--gold-3);
}

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

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

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

    margin-top:28px;
}

.review-card{
    position:relative;
    overflow:hidden;

    padding:23px;

    background:
        linear-gradient(135deg,rgba(255,255,255,.04),transparent 28%),
        linear-gradient(145deg,#210606 0%,#0d0202 56%,#000000 100%);

    border:1px solid rgba(255,196,0,.64);
    border-left:5px solid var(--red-2);
    border-radius:10px;

    box-shadow:
        0 0 10px rgba(255,196,0,.14),
        inset 0 0 18px rgba(230,0,18,.05);

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

.review-card::before{
    content:"";
    position:absolute;
    top:0;
    left:-100%;

    width:100%;
    height:2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--red-2),
            #ffffff,
            var(--gold-2),
            transparent
        );

    animation:cardScan 3.2s linear infinite;
}

.review-card::after{
    content:"";
    position:absolute;
    top:12px;
    right:13px;

    width:32px;
    height:32px;

    background:
        url("https://www.neraka33x1.com/image/neraka33x1-favicon.webp")
        center / contain
        no-repeat;

    transform:none;

    filter:
        drop-shadow(0 0 4px rgba(255,196,0,.62))
        drop-shadow(0 0 8px rgba(230,0,18,.38));

    animation:neonPulse 1.1s ease-in-out infinite alternate;

    pointer-events:none;
}

.review-card:hover{
    transform:translateY(-5px);

    border-color:#fff0ad;

    box-shadow:
        0 0 6px rgba(255,255,255,.34),
        0 0 18px rgba(255,196,0,.40),
        0 0 30px rgba(230,0,18,.28),
        inset 0 0 22px rgba(230,0,18,.07);
}

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

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

    margin:0 40px 11px 0;

    color:#ffffff;
    font-size:18px;
    font-weight:900;

    text-shadow:
        0 1px 2px #000,
        0 0 7px rgba(255,196,0,.28);
}

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

    width:24px;
    height:24px;
    flex:0 0 24px;

    background:
        url("https://www.neraka33x1.com/image/neraka33x1-favicon.webp")
        center / contain
        no-repeat;

    transform:none;

    filter:
        drop-shadow(0 0 3px rgba(255,196,0,.55))
        drop-shadow(0 0 6px rgba(230,0,18,.35));

    pointer-events:none;
}

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

    color:#eadfbe;
    font-size:15px;
    font-style:italic;
    line-height:1.7;
}

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

.faq-section .section-title{
    margin-bottom:30px;
    padding:0 0 14px;

    border-bottom:0;

    color:#ffffff;
    font-size:27px;
    font-weight:900;
    text-align:center;

    text-shadow:
        0 1px 2px #000,
        0 0 8px rgba(255,196,0,.32);
}

.faq-section .section-title::before{
    content:"";

    position:static;
    display:inline-block;

    width:30px;
    height:30px;

    margin-right:10px;

    vertical-align:middle;

    background:
        url("https://www.neraka33x1.com/image/neraka33x1-favicon.webp")
        center / contain
        no-repeat;

    transform:none;

    filter:
        drop-shadow(0 0 4px rgba(255,196,0,.62))
        drop-shadow(0 0 8px rgba(230,0,18,.38));
}

.faq-section .section-title::after{
    left:50%;
    bottom:0;

    width:130px;
    height:2px;

    transform:translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--red-2),
            #ffffff,
            var(--gold-2),
            transparent
        );
}

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

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

.faq-item{
    position:relative;
    overflow:hidden;

    padding:24px 26px;

    background:
        linear-gradient(145deg,#200505 0%,#090202 60%,#000000 100%);

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

    box-shadow:
        0 0 9px rgba(255,196,0,.13),
        inset 0 0 18px rgba(230,0,18,.045);

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

    animation:neonFadeIn .4s ease-out forwards;
    opacity:0;
}

.faq-item::before{
    content:"";
    position:absolute;
    top:0;
    left:0;

    width:4px;
    height:100%;

    background:
        linear-gradient(
            180deg,
            var(--gold-2),
            var(--red-2),
            var(--gold-3)
        );

    box-shadow:
        0 0 8px rgba(255,196,0,.45),
        0 0 14px rgba(230,0,18,.30);

    transition:width .25s ease;
}

.faq-item::after{
    content:"";
    position:absolute;
    top:12px;
    right:14px;

    width:28px;
    height:28px;

    background:
        url("https://www.neraka33x1.com/image/neraka33x1-favicon.webp")
        center / contain
        no-repeat;

    transform:none;

    filter:
        drop-shadow(0 0 3px rgba(255,196,0,.58))
        drop-shadow(0 0 7px rgba(230,0,18,.35));

    animation:neonPulse 1s ease-in-out infinite alternate;

    pointer-events:none;
}

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

    border-color:#fff0ad;

    box-shadow:
        0 0 6px rgba(255,255,255,.28),
        0 0 18px rgba(255,196,0,.34),
        0 0 30px rgba(230,0,18,.24),
        inset 0 0 22px rgba(230,0,18,.06);
}

.faq-item:hover::before{
    width:7px;
}

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

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

    margin:0 40px 14px 0;

    color:#ffffff;
    font-size:17px;
    font-weight:800;
    line-height:1.5;

    text-shadow:
        0 1px 2px #000,
        0 0 6px rgba(255,196,0,.24);
}

.faq-question::before{
    content:"Q.";
    flex-shrink:0;
    margin-top:2px;

    padding:3px 8px;

    color:#1a0000;

    background:
        linear-gradient(
            180deg,
            #fff5b8 0%,
            #ffd84f 42%,
            #ffc400 70%,
            #e14a18 100%
        );

    border:1px solid #fff0a3;
    border-radius:5px;

    box-shadow:
        0 0 7px rgba(255,196,0,.45),
        inset 0 1px 0 rgba(255,255,255,.65);

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

    text-shadow:none;
}

.faq-answer{
    position:relative;
    z-index:1;
    padding-left:40px;
}

.faq-answer::before{
    content:"A.";
    position:absolute;
    top:0;
    left:0;

    padding:3px 8px;

    color:#ffffff;

    background:
        linear-gradient(
            180deg,
            #ff3535 0%,
            #e60012 55%,
            #8f0008 100%
        );

    border:1px solid var(--gold-2);
    border-radius:5px;

    box-shadow:
        0 0 7px rgba(230,0,18,.38),
        0 0 10px rgba(255,196,0,.16);

    font-size:15px;
    font-weight:900;

    text-shadow:0 1px 1px #000;
}

.faq-answer p{
    margin:0;

    color:#eadfbe;
    font-size:15px;
    line-height:1.7;
}

.faq-item:nth-child(1){animation-delay:.08s;}
.faq-item:nth-child(2){animation-delay:.16s;}
.faq-item:nth-child(3){animation-delay:.24s;}
.faq-item:nth-child(4){animation-delay:.32s;}
.faq-item:nth-child(5){animation-delay:.40s;}

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

@keyframes titleScan{
    0%,100%{opacity:.5;filter:brightness(.85);}
    50%{opacity:1;filter:brightness(1.35);}
}

@keyframes topScan{
    0%{left:-100%;opacity:0;}
    20%,75%{opacity:1;}
    100%{left:100%;opacity:0;}
}

@keyframes sideScan{
    0%{bottom:-100%;opacity:0;}
    20%,75%{opacity:1;}
    100%{bottom:100%;opacity:0;}
}

@keyframes cardScan{
    0%{left:-100%;opacity:0;}
    20%,75%{opacity:1;}
    100%{left:100%;opacity:0;}
}

@keyframes neonPulse{
    from{opacity:.45;filter:brightness(.85);}
    to{opacity:1;filter:brightness(1.35);}
}

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

/* =========================
   TABLET
========================= */

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

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

    .faq-section{
        padding:27px 19px;
        margin:28px 0;
    }

    .faq-section .section-title{
        margin-bottom:24px;
        font-size:23px;
    }

    .faq-item{
        padding:21px 19px;
    }

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

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

    .description-content h1,
    .description-section h1{
        font-size:25px;
    }

    .description-content h2,
    .description-section h2{
        font-size:21px;
    }

    .description-content h3,
    .description-section h3{
        font-size:18px;
    }
}

/* =========================
   MOBILE
========================= */

@media(max-width:480px){
    .section-container{
        padding:0 9px;
    }

    .description-section,
    .reviews-section,
    .faq-section{
        padding:19px 14px;
        border-radius:9px;
    }

    .section-title{
        padding-left:15px;
        font-size:19px;
    }

    .section-title::before{
        width:6px;
        height:19px;
    }

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

    .review-card{
        padding:18px 16px;
        border-radius:8px;
    }

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

    .faq-item{
        padding:17px 15px;
        border-radius:8px;
    }

    .faq-question{
        gap:9px;
        font-size:14px;
    }

    .faq-answer{
        padding-left:36px;
    }

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

    .description-content{
        font-size:14px;
    }

    .description-content p,
    .description-section p{
        font-size:14px;
        line-height:1.7;
    }

    .description-content h1,
    .description-section h1{
        font-size:22px;
    }

    .description-content h2,
    .description-section h2{
        margin-top:23px;
        font-size:19px;
    }

    .description-content h3,
    .description-section h3{
        font-size:17px;
    }
}

@media(prefers-reduced-motion:reduce){
    .section-title::after,
    .description-section::before,
    .reviews-section::before,
    .faq-section::before,
    .description-section::after,
    .reviews-section::after,
    .faq-section::after,
    .review-card::before,
    .review-card::after,
    .faq-item::after{
        animation:none;
    }

    .faq-item{
        opacity:1;
    }
}

/* =========================================================
   FAVICON NERAKA33 RESPONSIVE FINAL
========================================================= */

@media(max-width:768px){

    .section-title{
        padding-left:38px;
    }

    .section-title::before{
        width:27px;
        height:27px;
    }

    .review-card::after{
        width:29px;
        height:29px;
    }

    .reviewer-name::before{
        width:22px;
        height:22px;
        flex-basis:22px;
    }

    .faq-section .section-title::before{
        width:27px;
        height:27px;
    }

    .faq-item::after{
        width:25px;
        height:25px;
    }
}

@media(max-width:480px){

    .section-title{
        padding-left:34px;
    }

    .section-title::before{
        width:24px;
        height:24px;
    }

    .description-section,
    .reviews-section,
    .faq-section{
        background:
            url("https://www.neraka33x1.com/image/neraka33x1-favicon.webp")
            calc(100% - 10px) 10px / 38px 38px no-repeat,
            radial-gradient(circle at 10% 0%,rgba(230,0,18,.12),transparent 30%),
            radial-gradient(circle at 90% 100%,rgba(255,196,0,.08),transparent 34%),
            linear-gradient(145deg,#1c0505 0%,#0b0202 48%,#000000 100%);
    }

    .review-card::after{
        width:25px;
        height:25px;
        top:10px;
        right:10px;
    }

    .reviewer-name::before{
        width:20px;
        height:20px;
        flex-basis:20px;
    }

    .faq-section .section-title::before{
        width:24px;
        height:24px;
        margin-right:8px;
    }

    .faq-item::after{
        width:23px;
        height:23px;
        top:10px;
        right:10px;
    }
}