/* ==========================================================
Project : Compro Doodle
Module  : Page — Suara Konsumen
File    : suara-konsumen.css
Version : 1.0.0
Author  : Doodle Engineering
========================================================== */

.voice-page {

    background: linear-gradient(180deg, var(--color-background) 0%, var(--color-primary-light) 100%);
    padding: var(--space-48) 0 var(--space-80);

    font-family: var(--font-family-primary);
    color: var(--color-text);

}

.voice-container {

    max-width: 960px;
    margin: 0 auto;
    padding: 0 var(--space-16);

}

/* ---------- Header ---------- */

.voice-header {

    text-align: center;
    margin-bottom: var(--space-32);

}

.voice-eyebrow {

    display: inline-block;
    margin-bottom: var(--space-8);

    font-size: var(--font-xs);
    font-weight: var(--font-bold);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-accent-gold);

}

.voice-title {

    margin: 0 0 var(--space-12);

    font-family: var(--font-family-heading);
    font-size: var(--font-4xl);
    font-weight: var(--font-bold);
    line-height: 1.15;
    color: var(--color-primary);

}

.voice-lead {

    max-width: 600px;
    margin: 0 auto;

    font-size: var(--font-md);
    line-height: 1.6;
    color: var(--color-text-secondary);

}

/* ---------- Ringkasan ---------- */

.voice-summary {

    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--space-32);
    align-items: center;

    padding: var(--space-24);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);

}

.voice-summary-score {

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);

}

.voice-summary-score strong {

    font-size: 48px;
    font-weight: var(--font-bold);
    line-height: 1;
    color: var(--color-text);

}

.voice-summary-score small {

    font-size: var(--font-sm);
    color: var(--color-text-secondary);

}

.voice-stars {

    display: inline-flex;
    gap: 2px;

    font-size: 20px;
    line-height: 1;

}

.voice-stars--sm {

    font-size: 15px;

}

.voice-star {

    color: var(--color-border);

}

.voice-star.is-on {

    color: var(--color-primary);

}

.voice-bars {

    display: flex;
    flex-direction: column;
    gap: var(--space-8);

    margin: 0;
    padding: 0;
    list-style: none;

}

.voice-bars li {

    display: grid;
    grid-template-columns: 40px 1fr 32px;
    gap: var(--space-12);
    align-items: center;

    font-size: var(--font-sm);
    color: var(--color-text-secondary);

}

.voice-bar-track {

    height: 8px;
    overflow: hidden;

    border-radius: var(--radius-pill);
    background: var(--color-surface-alt);

}

.voice-bar-fill {

    display: block;
    height: 100%;

    border-radius: var(--radius-pill);
    background: var(--color-primary);

}

.voice-bar-count {

    text-align: right;

}

/* ---------- Filter ---------- */

.voice-filter {

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-8);

    margin: var(--space-24) 0;

}

.voice-chip {

    padding: var(--space-8) var(--space-16);

    border: var(--border-width-thin) solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);

    font-size: var(--font-sm);
    font-weight: var(--font-medium);
    color: var(--color-text);
    text-decoration: none;

}

.voice-chip:hover,
.voice-chip.is-active {

    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--color-text-white);

}

/* ---------- Daftar ulasan ---------- */

.voice-list {

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-16);

    margin: 0;
    padding: 0;
    list-style: none;

}

.voice-card {

    display: flex;
    flex-direction: column;
    gap: var(--space-12);

    padding: var(--space-20);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);

}

.voice-card-head,
.voice-card-foot {

    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-8);

}

.voice-card-date {

    font-size: var(--font-xs);
    color: var(--color-text-muted);

}

.voice-card-text {

    margin: 0;

    font-size: var(--font-sm);
    line-height: 1.7;
    white-space: pre-line;
    color: var(--color-text);

}

.voice-card-foot {

    margin-top: auto;
    padding-top: var(--space-12);

    border-top: 1px solid var(--color-divider);

}

.voice-card-name {

    font-size: var(--font-sm);
    font-weight: var(--font-semibold);

}

.voice-card-badge {

    display: inline-block;
    margin-left: var(--space-4);

    font-size: var(--font-xs);
    font-weight: var(--font-medium);
    color: var(--color-success);

}

.voice-card-product {

    font-size: var(--font-xs);
    font-weight: var(--font-semibold);
    color: var(--color-accent-gold);
    text-decoration: none;

}

.voice-card-product:hover {

    text-decoration: underline;

}

.voice-empty {

    padding: var(--space-40) var(--space-16);

    border: 1px dashed var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);

    text-align: center;
    color: var(--color-text-secondary);

}

.voice-pagination {

    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-16);

    margin-top: var(--space-24);

    font-size: var(--font-sm);

}

.voice-page-link {

    font-weight: var(--font-semibold);
    color: var(--color-primary);
    text-decoration: none;

}

.voice-page-info {

    color: var(--color-text-secondary);

}

/* ---------- Ajakan Bantuan Konsumen ---------- */

.voice-cta {

    margin-top: var(--space-48);
    padding: var(--space-32) var(--space-24);

    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);

    text-align: center;

}

.voice-cta-title {

    margin: 0 0 var(--space-8);

    font-family: var(--font-family-heading);
    font-size: var(--font-2xl);
    font-weight: var(--font-bold);
    color: var(--color-text);

}

.voice-cta-text {

    margin: 0 0 var(--space-20);

    font-size: var(--font-md);
    line-height: 1.6;
    color: var(--color-text-secondary);

}

.voice-cta-actions {

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-12);

}

.voice-btn {

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

    padding: var(--space-8) var(--space-24);

    border: var(--border-width-thin) solid var(--color-accent-gold);
    border-radius: var(--radius-pill);
    background: var(--color-surface);

    font-size: var(--font-sm);
    font-weight: var(--font-medium);
    color: var(--color-text);
    text-decoration: none;

}

.voice-btn--primary {

    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--color-text-white);

}

.voice-btn:hover {

    background: var(--color-accent-gold);
    color: var(--color-text-white);

}

.voice-btn--primary:hover {

    background: var(--color-primary-hover);

}

/* ---------- Responsif ---------- */

@media (max-width: 767px) {

    .voice-page {

        padding-top: var(--space-32);

    }

    .voice-title {

        font-size: var(--font-3xl);

    }

    .voice-summary {

        grid-template-columns: 1fr;
        gap: var(--space-20);

    }

    .voice-list {

        grid-template-columns: 1fr;

    }

    .voice-filter {

        gap: var(--space-4);

    }

    .voice-chip {

        padding: 6px 12px;

    }

}