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

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

    .section-title{
        padding:13px 40px 13px 12px;

        border-radius:11px;

        font-size:15px;
        letter-spacing:.3px;
    }

    .section-title::after{
        right:10px;
        font-size:19px;
    }

    .description-section,
    .reviews-section,
    .faq-section{
        padding:16px;
        border-radius:13px;
    }

    .description-content{
        padding:14px;
        font-size:13px;
        line-height:1.65;
    }

    .description-content h1,
    .description-content h2,
    .description-content h3{
        font-size:17px !important;
    }

    .review-card,
    .faq-item{
        padding:16px 15px 16px 22px;
        border-radius:11px;
    }

    .reviewer-name{
        font-size:14px;
    }

    .reviewer-name::before{
        width:31px;
        height:31px;
        font-size:17px;
    }

    .review-text{
        font-size:13px;
    }

    .faq-section .section-title{
        padding:12px 40px 12px 10px;
        font-size:16px;
    }

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

    .faq-question::before,
    .faq-answer::before{
        width:30px;
        height:30px;
        font-size:13px;
    }

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

    .faq-answer p{
        padding:9px 10px;
        font-size:13px;
        line-height:1.6;
    }
}

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

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

    .review-card,
    .faq-item{
        transition:none !important;
    }
}

/* ==================================================
   GOLD COIN PREMIUM OVERRIDE
   SECTION • ARTICLE • REVIEW • FAQ
================================================== */

:root{
    --nx-gold:#ffd700;
    --nx-gold-light:#fff3a6;
    --nx-gold-bright:#fffbe0;
    --nx-gold-dark:#765800;
    --nx-bronze:#b87400;
    --nx-black:#030303;
    --nx-panel:#101010;
    --nx-text:#f5f5f5;
}

/* Panel utama bernuansa emas */
.description-section,
.reviews-section,
.faq-section{
    border-color:#ffd700!important;

    background:
        radial-gradient(circle at 50% -10%,rgba(255,215,0,.15),transparent 38%),
        radial-gradient(circle at 100% 100%,rgba(255,165,0,.07),transparent 34%),
        repeating-linear-gradient(135deg,rgba(255,255,255,.015) 0 2px,transparent 2px 16px),
        linear-gradient(145deg,#211800 0%,#0d0a02 50%,#030302 100%)!important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        inset 0 0 28px rgba(0,0,0,.84),
        0 10px 24px rgba(0,0,0,.62),
        0 0 12px rgba(255,255,255,.18),
        0 0 22px rgba(255,215,0,.58),
        0 0 38px rgba(255,170,0,.16)!important;
}

/* Judul seperti plat koin emas */
.section-title{
    color:#251500!important;

    border-color:#fff6a8!important;

    background:
        linear-gradient(180deg,rgba(255,255,255,.84),transparent 27%),
        repeating-linear-gradient(135deg,rgba(255,255,255,.10) 0 2px,transparent 2px 14px),
        linear-gradient(145deg,#fff9c9 0%,#ffd700 48%,#e6a900 72%,#9b6200 100%)!important;

    box-shadow:
        inset 0 2px 0 rgba(255,255,255,.92),
        inset 0 -8px 16px rgba(112,61,0,.26),
        0 6px 16px rgba(0,0,0,.48),
        0 0 12px rgba(255,255,255,.32),
        0 0 24px rgba(255,215,0,.70)!important;

    text-shadow:
        0 1px 0 rgba(255,255,255,.86),
        0 2px 2px rgba(83,44,0,.28)!important;
}

/* Garis cahaya emas */
.section-title::before,
.description-section::after,
.reviews-section::after,
.faq-section::after{
    background:
        linear-gradient(
            90deg,
            transparent,
            #ffffff,
            #fff4a6,
            #ffd700,
            #ffffff,
            transparent
        )!important;

    box-shadow:
        0 0 6px rgba(255,255,255,.66),
        0 0 14px rgba(255,215,0,.74)!important;
}

/* Ikon mahkota jadi koin */
.section-title::after{
    content:"$"!important;

    width:36px!important;
    height:36px!important;

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

    right:14px!important;

    border:3px double #fff8c2!important;
    border-radius:50%!important;

    color:#5d3600!important;
    font-family:Georgia,"Times New Roman",serif!important;
    font-size:20px!important;
    font-weight:900!important;

    background:
        radial-gradient(circle at 35% 25%,#ffffff 0%,#fff5a8 15%,#ffd700 42%,#d69500 70%,#8b5500 100%)!important;

    box-shadow:
        inset 0 2px 2px rgba(255,255,255,.72),
        inset 0 -4px 7px rgba(94,48,0,.34),
        0 0 7px rgba(255,255,255,.50),
        0 0 15px rgba(255,215,0,.82)!important;

    text-shadow:
        0 1px 0 rgba(255,255,255,.72),
        0 2px 2px rgba(76,40,0,.32)!important;

    animation:nxCoinSpin 5s linear infinite!important;
}

/* Konten artikel */
.description-content{
    border-color:rgba(255,215,0,.58)!important;

    background:
        radial-gradient(circle at 0 0,rgba(255,215,0,.07),transparent 34%),
        linear-gradient(180deg,rgba(32,25,0,.98),rgba(5,5,5,.99))!important;

    box-shadow:
        inset 0 0 18px rgba(0,0,0,.80),
        0 0 12px rgba(255,215,0,.18)!important;
}

/* Card review dan FAQ */
.review-card,
.faq-item{
    border-color:rgba(255,215,0,.68)!important;

    background:
        radial-gradient(circle at 100% 0%,rgba(255,215,0,.10),transparent 36%),
        linear-gradient(180deg,#2b2200 0%,#111111 58%,#030303 100%)!important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07),
        inset 0 0 18px rgba(0,0,0,.76),
        0 7px 16px rgba(0,0,0,.52),
        0 0 11px rgba(255,215,0,.22)!important;
}

/* Garis kiri seperti tumpukan koin */
.review-card::before,
.faq-item::before{
    width:6px!important;

    background:
        repeating-linear-gradient(
            180deg,
            #fff8c2 0 6px,
            #ffd700 6px 13px,
            #b87400 13px 20px
        )!important;

    box-shadow:
        0 0 7px rgba(255,215,0,.82),
        0 0 14px rgba(255,170,0,.30)!important;
}

/* Ikon reviewer jadi koin */
.reviewer-name::before{
    content:"$"!important;

    border:3px double #fff8c2!important;
    border-radius:50%!important;

    color:#5d3600!important;
    font-family:Georgia,"Times New Roman",serif!important;
    font-size:19px!important;
    font-weight:900!important;

    background:
        radial-gradient(circle at 35% 25%,#ffffff 0%,#fff5a8 15%,#ffd700 42%,#d69500 70%,#8b5500 100%)!important;

    box-shadow:
        inset 0 2px 2px rgba(255,255,255,.72),
        inset 0 -4px 7px rgba(94,48,0,.34),
        0 3px 0 #7a4d00,
        0 0 12px rgba(255,215,0,.72)!important;

    text-shadow:
        0 1px 0 rgba(255,255,255,.72),
        0 2px 2px rgba(76,40,0,.32)!important;
}

/* Q dan A seperti koin */
.faq-question::before,
.faq-answer::before{
    border:3px double #fff8c2!important;
    border-radius:50%!important;

    color:#5d3600!important;

    background:
        radial-gradient(circle at 35% 25%,#ffffff 0%,#fff5a8 15%,#ffd700 42%,#d69500 70%,#8b5500 100%)!important;

    box-shadow:
        inset 0 2px 2px rgba(255,255,255,.72),
        inset 0 -4px 7px rgba(94,48,0,.34),
        0 3px 0 #7a4d00,
        0 0 12px rgba(255,215,0,.68)!important;

    text-shadow:
        0 1px 0 rgba(255,255,255,.72),
        0 2px 2px rgba(76,40,0,.32)!important;
}

/* Isi review dan jawaban */
.review-text,
.faq-answer p{
    border-color:rgba(255,215,0,.36)!important;

    background:
        radial-gradient(circle at 0 0,rgba(255,215,0,.07),transparent 36%),
        rgba(0,0,0,.54)!important;

    box-shadow:
        inset 0 0 12px rgba(0,0,0,.72),
        0 0 8px rgba(255,215,0,.10)!important;
}

/* Hover */
.review-card:hover,
.faq-item:hover{
    border-color:#fff9d6!important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        inset 0 0 20px rgba(0,0,0,.72),
        0 12px 24px rgba(0,0,0,.60),
        0 0 10px rgba(255,255,255,.22),
        0 0 18px rgba(255,215,0,.58)!important;
}

/* Link dan strong */
.description-content strong,
.description-content b,
.faq-answer strong,
.faq-answer b,
.review-card strong,
.review-card b{
    color:#fff3a6!important;
    text-shadow:
        0 0 5px #ffffff,
        0 0 10px rgba(255,215,0,.64)!important;
}

.description-content a,
.faq-answer a,
.review-card a{
    color:#ffd700!important;
    text-shadow:0 0 7px rgba(255,215,0,.52)!important;
}

@keyframes nxCoinSpin{
    from{
        transform:translateY(-50%) rotateY(0deg);
    }

    to{
        transform:translateY(-50%) rotateY(360deg);
    }
}

/* Mobile */
@media(max-width:480px){
    .section-title::after{
        width:28px!important;
        height:28px!important;
        font-size:15px!important;
        right:8px!important;
    }

    .reviewer-name::before,
    .faq-question::before,
    .faq-answer::before{
        border-width:2px!important;
    }
}

/* =========================================================
   FINAL URAHARA BANNER THEME
   BLACK • RED • GOLD/YELLOW • WHITE
========================================================= */
:root{
    --nx-gold:#ffc400;
    --nx-gold-light:#ffe45c;
    --nx-gold-bright:#ffffff;
    --nx-gold-dark:#a52a00;
    --nx-red:#ef2118;
    --nx-red-dark:#6a0703;
    --nx-black:#000000;
    --nx-panel:#0b0101;
    --nx-text:#f5f5f5;
}

/* TITLE */
.section-title{
    color:#ffffff!important;
    border-color:#ef2118!important;

    background:
        linear-gradient(180deg,rgba(255,255,255,.08),transparent 28%),
        linear-gradient(145deg,#460704 0%,#210302 42%,#090101 72%,#000 100%)!important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        inset 0 -6px 14px rgba(0,0,0,.58),
        0 6px 16px rgba(0,0,0,.55),
        0 0 8px rgba(239,33,24,.48),
        0 0 18px rgba(255,196,0,.16)!important;

    text-shadow:
        0 2px 2px #000,
        0 0 6px rgba(239,33,24,.55)!important;
}
