/* === WRAPPER GLOBAL === */
.content-wrapper {
    max-width: 800px;
    margin: 40px auto;
    font-family: Arial, sans-serif;
    padding: 0 10px;
}

/* === STYLE JUDUL (Dipakai bareng FAQ & Review) === */
.section-title {
    text-align: center;
    font-size: 24px;
    font-weight: 800;
    color: #ffd86a;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: linear-gradient(to right, #7a0906, #ffd86a, #b51b0f);
    margin: 10px auto 0;
    border-radius: 2px;
}

/* === STYLE FAQ === */
.faq-item {
    margin-bottom: 15px;
    border-radius: 25px;
    border: 2px solid rgba(217,154,33,.72);
    background: linear-gradient(145deg, #2a0e08, #100705);
    overflow: hidden;
    box-shadow: 0 10px 26px rgba(8,2,1,.32), inset 0 1px 0 rgba(255,225,132,.08);
}
.faq-question {
    padding: 15px 25px;
    font-weight: bold;
    font-size: 16px;
    background: linear-gradient(180deg, #650806, #b7190e 54%, #5a0505);
    color: #fff3ce;
    cursor: pointer;
    list-style: none;
    position: relative;
    outline: none;
    transition: background .28s ease, color .28s ease, box-shadow .28s ease;
}
.faq-question:hover {
    background: linear-gradient(180deg, #7b0b07, #d13b16 54%, #6b0805);
    color: #fff8df;
    box-shadow: inset 0 0 22px rgba(255,216,106,.12);
}
.faq-question::after {
    content: '+';
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    font-weight: bold;
    color: #ffd86a;
}
.faq-question::-webkit-details-marker { display: none; }
details[open] .faq-question::after { content: '-'; }
.faq-answer {
    padding: 18px 25px;
    font-size: 15px;
    line-height: 1.6;
    color: #e5c79a;
    background: linear-gradient(145deg, rgba(36,16,8,.98), rgba(17,7,5,.98));
    border-top: 1px solid rgba(242,189,77,.62);
}
.faq-answer p { margin: 0; }

/* === STYLE REVIEW === */
.review-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}
.review-card {
    background: linear-gradient(145deg, #2a0e08, #100705);
    border: 2px solid rgba(217,154,33,.65);
    border-radius: 20px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 10px 26px rgba(8,2,1,.32), inset 0 1px 0 rgba(255,225,132,.08);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: border-color .28s ease, box-shadow .28s ease, transform .28s ease;
}
.review-card:hover {
    border-color: #f2bd4d;
    box-shadow: 0 14px 34px rgba(8,2,1,.42), 0 0 20px rgba(217,154,33,.17);
    transform: translateY(-2px);
}
.review-stars { color: #ffd86a; font-size: 18px; margin-bottom: 10px; text-shadow: 0 0 12px rgba(244,123,34,.38); }
.review-body { font-size: 13px; color: #d8b98a; line-height: 1.5; margin-bottom: 15px; font-style: italic; }
.review-author {
    font-size: 14px;
    font-weight: bold;
    color: #fff3ce;
    background: linear-gradient(180deg, #b7190e, #5a0505);
    border: 1px solid rgba(242,189,77,.58);
    padding: 5px 10px;
    border-radius: 15px;
    display: inline-block;
}

/* === RESPONSIVE HP === */
@media (max-width: 768px) {
    .review-grid { grid-template-columns: 1fr; }
    .section-title { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .review-card { transition: none; }
    .review-card:hover { transform: none; }
}