/* ===============================
   RESET DASAR
=============================== */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "Segoe UI", Arial, sans-serif;
    background: #f4f6f8;
}

/* ===============================
   GRID WRAPPER
=============================== */
body {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 14px;
    padding: 12px;
}

.grid-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 14px;
    padding: 12px;
}






/* ===============================
   CARD KONTEN
=============================== */
.bingkai_kontent {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e3e6ea;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
}

.bingkai_kontent a {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.bingkai_kontent:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,.12);
}

/* ===============================
   FOTO / VIDEO
=============================== */
.photo_kontent {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #eef1f4;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.photo_kontent img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}

.bingkai_kontent:hover .photo_kontent img {
    transform: scale(1.05);
}

/* VIDEO */
.video-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
}

.video-wrapper iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* ===============================
   JUDUL
=============================== */
.kotak_judul,
.kotak_judul2 {
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.3;
    flex-grow: 1;
}

/* ===============================
   INFO BAR
=============================== */
.kotak_info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    font-size: 12px;
}

.kotak_kategori {
    font-weight: 600;
}

.kotak_counter {
    display: flex;
    align-items: center;
    gap: 4px;
}

.kotak_icon img {
    width: 14px;
}

/* ===============================
   MOBILE
=============================== */
@media (max-width: 600px) {
    body {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        padding: 8px;
    }

    .kotak_judul,
    .kotak_judul2 {
        font-size: 13px;
        padding: 8px 10px;
    }
}