/* Bottom navigation: hanya gaya navigasi bawah. */
.bbar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 5000;
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 6px;
    min-height: var(--bb, 62px);
    padding: 7px 10px;
    background: rgba(8, 8, 8, .82);
    border-top: 1px solid var(--tc, #d4af37);
    box-shadow: 0 -8px 30px rgba(0, 0, 0, .35);
    backdrop-filter: blur(12px);
}
.ibtn {
    display: inline-flex;
    min-width: 0;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 9px;
    border: 1px solid rgba(212, 175, 55, .35);
    border-radius: 7px;
    color: var(--text, #f5f0e8);
    background: rgba(22, 18, 12, .65);
    font: inherit;
    font-size: 10px;
    text-decoration: none;
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease, transform .2s ease, background .2s ease;
}
.ibtn:hover,
.ibtn:focus-visible {
    color: #ffd700;
    background: rgba(212, 175, 55, .12);
    border-color: #ffd700;
    transform: translateY(-2px);
}
.ibtn i { color: var(--tc, #d4af37); }
.ibtn.liked-active,
.ibtn:has(.liked-active) { color: #ffd700; }

@media (max-width: 600px) {
    .bbar { gap: 3px; padding: 6px 4px; }
    .ibtn { flex-direction: column; gap: 3px; min-width: 0; padding: 6px 3px; font-size: 9px; line-height: 1.1; }
    .ibtn i { font-size: 17px; }
    .ibtn span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}