@import "tailwindcss";

/* ==============================================
   GLOBAL: PERBAIKAN & RESET
   ============================================== */
html, body {
    width: 100%;
    overflow-x: hidden; /* Hilangkan scrollbar horizontal */
}

/* ==============================================
   GLOBAL: ROOT VARIABLE WARNA & FONT
   ============================================== */
:root {
    /* ==== FONT ==== */
    --font-heading: 'Merriweather', Georgia, 'Times New Roman', serif; /* Heading */
    --font-body: 'Poppins', 'Open Sans', Arial, sans-serif;            /* Konten */

    /* ==== WARNA UTAMA & AKSEN (HOMEPAGE) ==== */
    --color-primary: #2563eb;          /* Biru utama (hero, CTA) */
    --color-primary-light: #60a5fa;    /* Biru muda (hover/gradient) */
    --color-secondary: #22d3ee;        /* Cyan/sky accent */
    --color-accent: #facc15;           /* Kuning/emas accent */

    /* ==== WARNA TAMBAHAN HOMEPAGE ==== */
    --color-indigo: #4338ca;           /* Indigo untuk badge/kategori */
    --color-emerald: #059669;          /* Hijau icon/stats */
    --color-rose: #e11d48;             /* Merah icon/stats */

    /* ==== NETRAL ==== */
    --bg-main: #ffffff;                /* Background putih */
    --bg-section: #f1f5f9;             /* slate-100 section */
    --text-main: #111827;               /* slate-900 heading */
    --text-secondary: #334155;          /* slate-700 konten */
    --text-muted: #64748b;              /* slate-400 subtext */
    --text-accent: var(--color-primary);

    /* ==== WARNA LAMA (TETAP DIPERTAHANKAN) ==== */
    --color-brand:        #008080;  /* Biru toska sekolah */
    --color-brand-light:  #64cbc2;
    --color-brand-dark:   #005e5e;
    --color-sidebar:      #0B192C;
    --color-button-blue:  #00022C;
    --color-bg-light:     #1E3E62;
    --color-text-light:   #EEF6FF;
    --color-card-bg:      #B7D6F2;
    --color-card-secondary:#82A9DF;
    --color-carbon:        #111;
}

/* ==============================================
   BERANDA: ANIMASI SCROLLER KARTU GALERI
   ============================================== */
.scroller {
    max-width: 100%;
    -webkit-mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
    mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.scroller__inner {
    width: max-content;
    display: flex;
    flex-wrap: nowrap;
    animation: scroll 30s linear infinite;
}

.scroller__inner > div {
    margin-right: 1.5rem; /* Jarak antar kartu */
}

.scroller:hover .scroller__inner {
    animation-play-state: paused; /* Pause saat hover */
}

.scroller[data-direction="right"] .scroller__inner {
    animation-direction: reverse; /* Balik arah */
}

@keyframes scroll {
    to {
        transform: translate(-60%);
    }
}

/* ==============================================
   BERANDA: GRADASI BAYANGAN DI BAWAH GALERI
   ============================================== */
.gallery-section {
    position: relative;
}
.gallery-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5rem;
    background: linear-gradient(to top, rgb(248 250 252), transparent);
    pointer-events: none;
    z-index: 2;
}

/* ==============================================
   GLOBAL: UTILITY RASIO ASPEK 16:9 UNTUK GAMBAR
   ============================================== */
.aspect-w-16.aspect-h-9 {
    position: relative;
    padding-bottom: 56.25%;
}
.aspect-w-16.aspect-h-9 > img {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    object-fit: cover;
}

/* ==============================================
   MEDIA: SEMBUNYIKAN KONTROL VIDEO DEFAULT
   ============================================== */
video::-webkit-media-controls {
    display: none !important;
}
video[controls]::-webkit-media-controls {
    display: flex !important;
}

/* Gradien kustom untuk Instagram */
        .hover\:bg-instagram-gradient:hover {
            background-image: linear-gradient(to right top, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d, #f56040, #f77737, #fcaf45, #ffdc80);
        }

  #media .masonry > * {
    break-inside: avoid-column;
    -webkit-column-break-inside: avoid;
    display: inline-block;
    width: 100%;
    vertical-align: top;
  }