/* ============================================================
   Style kustom aplikasi (di atas Bootstrap 5)
   ============================================================ */

:root {
    --brand: #0d6efd;
    --brand-dark: #0a58ca;
    --surface: #f5f7fb;
}

html, body {
    min-height: 100%;
}

body {
    background: var(--surface);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
}

footer {
    margin-top: auto !important;
}

/* Kartu produk */
.product-card {
    transition: transform .15s ease, box-shadow .15s ease;
    background: #fff;
    border: 1px solid #e6e9f0;
    border-radius: .75rem;
    overflow: hidden;
    height: 100%;
}
.product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 .5rem 1.25rem rgba(13, 110, 253, .12);
}
.product-card .thumb {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    width: 100%;
    background: #eef1f6;
}

/* Badge stok yang di-update oleh polling AJAX */
.stock-badge[data-stock="0"] {
    background-color: var(--bs-danger) !important;
}

/* Indikator polling aktif */
.realtime-dot {
    display: inline-block;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: #2ecc71;
    animation: pulse 1.6s infinite;
    vertical-align: middle;
}
@keyframes pulse {
    0%, 100% { opacity: .35; }
    50%      { opacity: 1; }
}

/* Sidebar dashboard (seller & admin) */
.dash-sidebar {
    min-height: calc(100vh - 56px);
    background: #111827;
}
.dash-sidebar .nav-link {
    color: #c7d0dd;
    border-radius: .5rem;
    padding: .55rem .85rem;
    margin-bottom: .15rem;
}
.dash-sidebar .nav-link:hover {
    background: rgba(255, 255, 255, .07);
    color: #fff;
}
.dash-sidebar .nav-link.active {
    background: var(--brand);
    color: #fff;
}

/* Tier reseller */
.tier-silver  { background: #adb5bd; color: #fff; }
.tier-gold    { background: #f0a500; color: #fff; }
.tier-diamond { background: #4dabf7; color: #fff; }

/* Utilitas kecil */
.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cursor-pointer { cursor: pointer; }

/* Aksesibilitas: fokus terlihat jelas */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(13, 110, 253, .45);
    outline-offset: 2px;
}

/* ============================================================
   BERANDA — Layout 2 Kolom
   ============================================================ */
.home-top-row,
.home-bottom-row {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 1.25rem;
}

.home-col-left  { min-width: 0; }
.home-col-right { min-width: 0; }

/* ---- Video Panel (kolom kanan) ---- */
.home-video-panel {
    background: #fff;
    border: 1px solid #e6e9f0;
    border-radius: .75rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.home-video-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .75rem 1rem;
    border-bottom: 1px solid #e6e9f0;
    background: #f9fafb;
}

/* Video Panduan — featured besar */
.home-video-featured-link {
    display: flex;
    flex-direction: column;
    flex: 1;
    text-decoration: none;
    color: inherit;
    transition: background .15s;
}
.home-video-featured-link:hover {
    background: #f5f7fb;
}
.home-video-featured {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #111;
}
.home-video-featured img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.home-video-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    color: rgba(255,255,255,.3);
    font-size: 3rem;
}
.home-video-play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.25);
    color: #fff;
    font-size: 2.5rem;
    opacity: 0;
    transition: opacity .2s;
}
.home-video-featured-link:hover .home-video-play-overlay {
    opacity: 1;
}
.home-video-featured-info {
    padding: .75rem 1rem;
}

/* Video List — item sosmed */
.home-video-list {
    flex: 1;
    overflow-y: auto;
    padding: .5rem;
}
.home-video-list-item {
    display: flex;
    gap: .65rem;
    padding: .5rem;
    border-radius: .5rem;
    text-decoration: none;
    color: inherit;
    transition: background .15s;
}
.home-video-list-item:hover {
    background: #f0f2f5;
}
.home-video-list-item + .home-video-list-item {
    border-top: 1px solid #f0f2f5;
}
.home-video-thumb {
    position: relative;
    flex-shrink: 0;
    width: 100px;
    aspect-ratio: 16 / 9;
    border-radius: .4rem;
    overflow: hidden;
    background: #111;
}
.home-video-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.home-video-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    color: rgba(255,255,255,.3);
    font-size: 1.25rem;
}
.home-video-thumb-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.3);
    color: #fff;
    font-size: .9rem;
    opacity: 0;
    transition: opacity .15s;
}
.home-video-list-item:hover .home-video-thumb-play {
    opacity: 1;
}
.home-video-meta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}
.x-small { font-size: .7rem; }

/* ============================================================
   PRODUK SLIDER (horizontal scroll)
   ============================================================ */
.product-slider-wrapper {
    position: relative;
}
.product-slider-track {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;          /* Firefox */
    padding-bottom: .25rem;
}
.product-slider-track::-webkit-scrollbar {
    display: none;                  /* Chrome, Safari */
}
.product-slider-item {
    flex: 0 0 220px;
    scroll-snap-align: start;
}
.product-slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    border: none;
    background: rgba(255,255,255,.92);
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #333;
    cursor: pointer;
    transition: background .15s, box-shadow .15s;
}
.product-slider-btn:hover {
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,.18);
}
.product-slider-prev { left: -14px; }
.product-slider-next { right: -14px; }

/* ============================================================
   RESPONSIF
   ============================================================ */
@media (max-width: 991.98px) {
    .home-top-row,
    .home-bottom-row {
        grid-template-columns: 1fr;
    }
    .product-slider-item {
        flex: 0 0 180px;
    }
}
@media (max-width: 575.98px) {
    .product-slider-item {
        flex: 0 0 160px;
    }
    .product-slider-btn {
        width: 30px;
        height: 30px;
        font-size: .85rem;
    }
    .product-slider-prev { left: -8px; }
    .product-slider-next { right: -8px; }
}

/* ============================================================
   PRODUCT DETAIL GALLERY & THUMBNAILS
   ============================================================ */
.product-gallery-container {
    position: sticky;
    top: 80px;
}
.product-gallery-main {
    position: relative;
    border: 1px solid #e6e9f0;
    border-radius: .75rem;
    overflow: hidden;
    background: #fff;
}
.product-gallery-main .carousel-item img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    width: 100%;
}
.product-gallery-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;
    background: rgba(17, 24, 39, 0.7);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: 0.75rem;
    padding: 0.35rem 0.65rem;
    border-radius: 2rem;
    pointer-events: none;
}
.product-gallery-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: #212529;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
    opacity: 0.85;
}
.product-gallery-btn:hover {
    background: #fff;
    opacity: 1;
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}
.product-gallery-btn.prev { left: 10px; }
.product-gallery-btn.next { right: 10px; }

.product-thumbs-strip {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding: 0.5rem 0;
    margin-top: 0.5rem;
    scrollbar-width: thin;
}
.product-thumb-btn {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    padding: 0;
    border: 2px solid #e6e9f0;
    border-radius: 0.5rem;
    overflow: hidden;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.product-thumb-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.product-thumb-btn:hover {
    border-color: #93c5fd;
    transform: translateY(-2px);
}
.product-thumb-btn.active {
    border-color: var(--brand);
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.35);
}