/* =================================================================
   style.css (Kemaskini UI/UX: Minimalis & Profesional)
   ================================================================= */

:root {
    /* Palet Warna Utama (Minimalis) */
    --color-primary: #1F2937; /* Kelabu Gelap (Header & Teks Utama) */
    --color-secondary: #06B6D4; /* Cyan/Teal Cerah (Aksen Utama) */
    --color-accent: #F59E0B; /* Amber/Oren (CTA & Sorotan) */
    --color-background: #F9FAFB; /* Kelabu Sangat Cerah (Latar Belakang Bersih) */
    --color-card-bg: #FFFFFF; /* Latar Belakang Kad */
    --color-text: #1F2937;
}

/* Gaya Asas */
body {
    background-color: var(--color-background);
    color: var(--color-text);
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    line-height: 1.6; /* Menambah jarak baris untuk kejelasan */
}

/* Utiliti Tailwind (Tambahan untuk kestabilan) */
.bg-primary { background-color: var(--color-primary); }
.text-primary { color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.text-secondary { color: var(--color-secondary); }
.bg-accent { background-color: var(--color-accent); }
.text-accent { color: var(--color-accent); }
.bg-card-bg { background-color: var(--color-card-bg); } /* Memastikan latar belakang kad sentiasa putih */


/* Gaya Bento Grid */
.bento-grid {
    display: grid;
    gap: 1.5rem; /* Ruang lebih besar antara kad (membuatkan ia kurang serabut) */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Saiz min lebih besar */
    padding: 1.5rem;
}

/* Gaya Kad Produk (Elegan & Bento Style) */
.product-card {
    border-radius: 1rem; /* Lebih membulat */
    border-top: 5px solid var(--color-secondary); /* Border aksen di atas */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06); /* Shadow lembut */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.product-card:hover {
    box-shadow: 0 15px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); /* Shadow lebih menonjol */
    transform: translateY(-5px); /* Efek terapung */
}

/* Gaya Troli Terapung (Lebih Minimalis) */
#floating-cart {
    position: fixed;
    top: 50%;
    right: 1.5rem; 
    transform: translateY(-50%);
    z-index: 50;
    transition: all 0.3s ease;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 0.75rem;
}
#floating-cart:hover {
    right: 2rem;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
}

/* =================================================================
   GAYA UNTUK HILANGKAN LOGO YOUTUBE (Anti-Click Overlay)
   ================================================================= */

/* Container Utama Overlay (Dikekalkan) */
#video-player-container {
    position: relative; 
    overflow: hidden;
}

/* IFRAME (Dikekalkan) */
#video-player-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
}

/* Lapisan Overlay BARU untuk Menutup Butang Share & Watch Later di KANAN ATAS */
/* GANTIKAN KOD .youtube-overlay ASAL DAN TAMBAH KOD BARU INI */

/* Overlay untuk menutup butang Share/Watch Later (KANAN ATAS) */
.youtube-overlay-top {
    position: absolute;
    top: 0; 
    right: 0;
    width: 30%; /* Kawasan Atas Kanan */
    height: 15%; 
    background: transparent; 
    z-index: 20; 
    cursor: default; 
}

/* Overlay BARU untuk menutup Logo YouTube (KANAN BAWAH) */
.youtube-overlay-bottom {
    position: absolute;
    bottom: 0; /* Letak di bawah */
    right: 0;
    width: 25%; /* Cukup untuk cover logo YT dan link */
    height: 10%; /* Kawasan bawah player */
    background: transparent;
    z-index: 20;
    cursor: default;
}

/* =================================================================
   GAYA BARU: OVERLAY UNTUK KAWASAN CHANNEL DI KIRI ATAS
   ================================================================= */

/* Overlay untuk menutup Link Channel (KIRI ATAS) */
.youtube-overlay-channel {
    position: absolute;
    top: 0; 
    left: 0; /* Letak di kiri */
    width: 40%; /* Lebih lebar sedikit untuk menampung logo channel */
    height: 15%; 
    background: transparent; 
    z-index: 20; 
    cursor: default; 
}