/* ============================================================
   beli-akun-2026.css
   Katalog publik "Beli Akun" — pakai token warna yang sama
   dengan :root / [data-theme="dark"] di library/layout/header.php
   ============================================================ */

.ba2026-hero {
    background: linear-gradient(135deg, var(--yellow-primary), color-mix(in srgb, var(--yellow-primary) 60%, #ff8a00));
    padding: 46px 16px 70px;
    text-align: center;
    color: #1a1a1a;
}
.ba2026-hero h1 { font-family: "Outfit", sans-serif; font-weight: 800; font-size: 30px; margin: 10px 0 6px; }
.ba2026-hero p { font-size: 14px; max-width: 560px; margin: 0 auto; opacity: .85; }
.ba2026-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,.55); padding: 5px 14px; border-radius: 999px;
    font-size: 12px; font-weight: 700;
}

.ba2026-main { max-width: 1100px; margin: -40px auto 60px; padding: 0 16px; }

.ba2026-filter-card {
    background: var(--light-grey);
    border: 1px solid var(--dark-grey);
    border-radius: 18px;
    padding: 14px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    box-shadow: 0 10px 30px rgba(0,0,0,.06);
    margin-bottom: 22px;
}
.ba2026-filter-card input[type="text"],
.ba2026-filter-card select {
    background: var(--white);
    border: 1px solid var(--dark-grey);
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 13px;
    color: var(--black-text);
    flex: 1 1 160px;
}
.ba2026-filter-card button {
    background: var(--yellow-primary);
    border: none;
    border-radius: 12px;
    padding: 10px 20px;
    font-weight: 700;
    font-size: 13px;
    color: #1a1a1a;
    flex: 0 0 auto;
}

.ba2026-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
@media (max-width: 900px) { .ba2026-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ba2026-grid { grid-template-columns: 1fr; } }

.ba2026-card {
    background: var(--light-grey);
    border: 1px solid var(--dark-grey);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}
.ba2026-card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0,0,0,.08); }

.ba2026-card-cat {
    align-self: flex-start;
    font-size: 10.5px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--yellow-primary) 20%, transparent);
    color: var(--black-text);
}
.ba2026-card-title { font-family: "Outfit", sans-serif; font-weight: 700; font-size: 15px; color: var(--black-text); line-height: 1.3; }
.ba2026-card-desc { font-size: 12.5px; color: var(--black-text); opacity: .7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ba2026-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 6px; border-top: 1px dashed var(--dark-grey); }
.ba2026-card-price { font-family: "Outfit", sans-serif; font-weight: 800; font-size: 15px; color: var(--black-text); }
.ba2026-card-seller { font-size: 11px; color: var(--black-text); opacity: .6; }

.ba2026-empty { text-align: center; padding: 60px 16px; color: var(--black-text); opacity: .7; }
.ba2026-empty i { font-size: 40px; display: block; margin-bottom: 10px; }

/* Detail page */
.ba2026-detail { max-width: 760px; margin: -40px auto 60px; padding: 0 16px; }
.ba2026-detail-card {
    background: var(--light-grey);
    border: 1px solid var(--dark-grey);
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(0,0,0,.06);
}
.ba2026-detail-cat { font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 999px; background: color-mix(in srgb, var(--yellow-primary) 20%, transparent); color: var(--black-text); display: inline-block; }
.ba2026-detail-title { font-family: "Outfit", sans-serif; font-weight: 800; font-size: 22px; color: var(--black-text); margin: 10px 0 4px; }
.ba2026-detail-meta { font-size: 12.5px; color: var(--black-text); opacity: .6; margin-bottom: 16px; }
.ba2026-detail-price { font-family: "Outfit", sans-serif; font-weight: 800; font-size: 26px; color: var(--yellow-primary); margin-bottom: 16px; }
.ba2026-detail-desc { font-size: 14px; color: var(--black-text); line-height: 1.7; white-space: pre-line; border-top: 1px solid var(--dark-grey); padding-top: 16px; margin-bottom: 20px; }
.ba2026-detail-notice {
    display: flex; gap: 10px; align-items: flex-start;
    background: color-mix(in srgb, var(--yellow-primary) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--yellow-primary) 40%, transparent);
    border-radius: 12px; padding: 12px 14px; font-size: 12.5px; color: var(--black-text);
    margin-bottom: 18px;
}