/* ===================================================================
   TAJWID VISUAL — gaya asas
   Tailwind CDN uruskan utiliti; fail ini untuk apa yang ia tak boleh buat.

   Nada: hijau tua + emas, geometri Islam halus, taip Amiri.
   Semua nilai warna di sini dikira kontrasnya (WCAG AA) sebelum digunakan.
   =================================================================== */

html { scroll-behavior: smooth; }

body {
    font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.65;
    color: #12261C;
}

h1, h2, h3, .font-display {
    font-family: 'Amiri', Georgia, serif;
    font-weight: 700;
    letter-spacing: -0.005em;
}

/* Jarak lompat untuk nav melekat + banner demo */
section[id] { scroll-margin-top: 120px; }

:focus-visible { outline: 3px solid #0F5132; outline-offset: 3px; }

/* Wajib — kalau tidak atribut [hidden] tidak berkesan bila Tailwind
   menetapkan display pada elemen yang sama. */
[hidden] { display: none !important; }

.img-fallback { background: linear-gradient(135deg, #F2EFE6, #FBF9F4); }

/* --- Teks Arab -------------------------------------------------- */
.arabic {
    font-family: 'Amiri', serif;
    direction: rtl;
    unicode-bidi: isolate;
    line-height: 2;
}

/* --- Label kecil huruf besar berjarak ---------------------------- */
.eyebrow {
    font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .2em;
}

/* --- Corak geometri halus ---------------------------------------- *
   Satu motif berulang, opacity rendah. Ia tekstur, bukan hiasan —
   kalau ia menarik perhatian, ia terlalu kuat.
 * ----------------------------------------------------------------- */
.pattern-light {
    background-color: #F2EFE6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%230F5132' stroke-opacity='0.07' stroke-width='1'%3E%3Cpath d='M30 0 60 30 30 60 0 30z'/%3E%3Cpath d='M30 12 48 30 30 48 12 30z'/%3E%3C/g%3E%3C/svg%3E");
}

.pattern-deep {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23C9A961' stroke-opacity='0.10' stroke-width='1'%3E%3Cpath d='M30 0 60 30 30 60 0 30z'/%3E%3Cpath d='M30 12 48 30 30 48 12 30z'/%3E%3C/g%3E%3C/svg%3E");
}

/* Garis emas nipis sebagai pemisah seksyen */
.rule-gold {
    width: 3.5rem; height: 2px;
    background: linear-gradient(90deg, #7A5A18, rgba(122, 90, 24, 0));
}
.rule-gold--onDark {
    background: linear-gradient(90deg, #C9A961, rgba(201, 169, 97, 0));
}

/* --- Butang bertema ---------------------------------------------- *
   :hover mesti kemas kini pemboleh ubah, BUKAN background/color terus —
   kalau tidak ia mengatasi setiap varian dan teks boleh hilang.
 * ----------------------------------------------------------------- */
.btn {
    --btn-bg: #0F5132;
    --btn-fg: #FBF9F4;
    --btn-bd: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    background: var(--btn-bg);
    color: var(--btn-fg);
    border: 2px solid var(--btn-bd);
    font-weight: 700;
    border-radius: 9999px;
    padding: .875rem 1.75rem;
    cursor: pointer;
    text-align: center;
    transition: background-color .2s, color .2s, border-color .2s, opacity .2s;
}
.btn:hover:not(:disabled) { --btn-bg: #0A3A24; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn--ghost { --btn-bg: transparent; --btn-fg: #12261C; --btn-bd: #E3DDCC; }
.btn--ghost:hover:not(:disabled) { --btn-bg: transparent; --btn-bd: #0F5132; }

.btn--gold { --btn-bg: #7A5A18; --btn-fg: #FBF9F4; }
.btn--gold:hover:not(:disabled) { --btn-bg: #5E4512; }

/* Di atas seksyen gelap */
.btn--onDark { --btn-bg: transparent; --btn-fg: #FBF9F4; --btn-bd: rgba(251,249,244,.5); }
.btn--onDark:hover:not(:disabled) { --btn-bg: rgba(251,249,244,.12); --btn-bd: #FBF9F4; }

.btn--sm { padding: .55rem 1.1rem; font-size: .8125rem; }
.btn--lg { padding: 1.05rem 2.25rem; font-size: 1.0625rem; }

/* --- Borang ------------------------------------------------------ */
.field {
    width: 100%;
    background: #FFFFFF;
    border: 1px solid #E3DDCC;
    border-radius: .75rem;
    padding: .8rem 1rem;
    color: #12261C;
    font-size: .9375rem;
    transition: border-color .2s, box-shadow .2s;
}
.field:focus {
    border-color: #0F5132;
    box-shadow: 0 0 0 3px rgba(15, 81, 50, .12);
    outline: none;
}
.field::placeholder { color: rgba(85, 102, 92, .6); }

select.field {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%2355665C' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .85rem center;
    background-size: 1.1rem;
    padding-right: 2.6rem;
}

.label {
    display: block;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: #55665C;
    margin-bottom: .45rem;
}
.field-error { border-color: #A3323C; }
.help { font-size: .8125rem; color: #55665C; margin-top: .4rem; line-height: 1.6; }
.help--error { color: #A3323C; }

/* --- Kad silibus ------------------------------------------------- */
.week-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem; height: 3rem;
    border-radius: 9999px;
    border: 1px solid #E3DDCC;
    background: #FFFFFF;
    font-family: 'Amiri', serif;
    font-size: 1.25rem;
    color: #0F5132;
    flex-shrink: 0;
    transition: background-color .2s, border-color .2s, color .2s;
}
.syl-item:hover .week-badge,
.syl-item[open] .week-badge {
    background: #0F5132;
    border-color: #0F5132;
    color: #FBF9F4;
}

/* --- Lencana ----------------------------------------------------- */
.badge {
    display: inline-flex; align-items: center; gap: .375rem;
    font-size: .6875rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; padding: .3rem .7rem; border-radius: 9999px;
    border: 1px solid;
}

/* --- Accordion (silibus & FAQ) ----------------------------------- */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] .chev { transform: rotate(180deg); }
.chev { transition: transform .2s ease; }

/* --- Bar kemajuan tempat ----------------------------------------- */
.seat-bar {
    height: .5rem;
    border-radius: 9999px;
    background: #E3DDCC;
    overflow: hidden;
}
.seat-bar > span {
    display: block; height: 100%;
    background: #0F5132;
    transition: width .4s ease;
}
.seat-bar--warn > span { background: #A3323C; }

/* --- Jadual data (admin) ----------------------------------------- */
table.data { width: 100%; border-collapse: collapse; }
table.data th, table.data td {
    padding: .75rem .875rem; text-align: left;
    border-bottom: 1px solid #E3DDCC; font-size: .875rem;
}
table.data th {
    font-size: .6875rem; text-transform: uppercase; letter-spacing: .08em;
    color: #55665C; font-weight: 700;
}
table.data tbody tr:hover { background: #FBF9F4; }

/* --- Resit cetak -------------------------------------------------- */
@media print {
    .no-print { display: none !important; }
    body { background: #fff !important; color: #000 !important; }
    .print-plain, .print-plain * {
        background: #fff !important; color: #000 !important; border-color: #ccc !important;
    }
    .pattern-deep, .pattern-light { background-image: none !important; }
}

/* --- Bar daftar melekat (mudah alih) ------------------------------ */
.sticky-cta { box-shadow: 0 -8px 24px -12px rgba(18, 38, 28, .35); }

/* Beri ruang di bawah supaya bar melekat tidak menutup kandungan */
@media (max-width: 639px) {
    body { padding-bottom: 4.75rem; }
}

/* --- Pil admin (demo sahaja) -------------------------------------- */
.admin-fab { backdrop-filter: blur(6px); }
.admin-fab:hover { transform: translateY(-1px); }

/* --- Hormati keutamaan pengguna ----------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* --- Kad Contoh Modul: tajuk + kapsyen DI ATAS gambar ---------------- *
   Muka surat modul itu cerah (kertas krim), jadi teks putih dan label emas
   perlu scrim yang benar-benar gelap di mana teks berada.

   Ambang dikira, bukan diagak: atas latar putih penuh (kes paling teruk),
   label emas #C9A961 memerlukan alpha >= 0.84 untuk lulus 4.5:1.
   Jadi seluruh zon teks dikekalkan pada 0.88 ke atas; kecerunan hanya
   pudar dalam bahagian padding di atas teks.

   Kontras terhasil pada titik teks:
     putih         11.8 – 14.4 : 1
     putih/80       8.2 –  9.7 : 1
     emas goldSoft  5.2 –  6.4 : 1
 * -------------------------------------------------------------------- */
.sample-scrim {
    background: linear-gradient(
        to top,
        rgba(8, 33, 26, .94)  0%,
        rgba(8, 33, 26, .90) 55%,   /* hujung atas teks masih >= .84 */
        rgba(8, 33, 26, .88) 68%,
        rgba(8, 33, 26, .40) 88%,   /* pudar berlaku dalam padding sahaja */
        rgba(8, 33, 26, 0)  100%
    );
    padding-top: 4.5rem;
}

.sample-card:hover .sample-scrim {
    background: linear-gradient(
        to top,
        rgba(8, 33, 26, .97)  0%,
        rgba(8, 33, 26, .94) 55%,
        rgba(8, 33, 26, .92) 68%,
        rgba(8, 33, 26, .45) 88%,
        rgba(8, 33, 26, 0)  100%
    );
}