/* ===== PPDB Andalusia - gaya kustom (melengkapi Tailwind) ===== */
:root { --emerald: #064e3b; --gold: #c9a227; }

/* Basis huruf besar untuk lansia; skala diubah lewat tombol A−/A/A+ (rem) */
html { font-size: 18px; }
html[data-fs="-1"] { font-size: 16px; }
html[data-fs="1"]  { font-size: 21px; }
html[data-fs="2"]  { font-size: 24px; }
body { line-height: 1.65; }

/* Fokus jelas untuk keyboard / pembaca layar */
:focus-visible { outline: 4px solid #f0cf55; outline-offset: 3px; border-radius: 12px; }

.font-btn { min-width: 2.75rem; height: 2.75rem; padding: 0 .6rem; border-radius: 9999px; font-weight: 800; color: #064e3b; transition: background .2s, transform .15s; }
.font-btn:hover { background: #ecfdf5; }
.font-btn:active { transform: scale(.92); }
.font-btn-lg { font-size: 1.25rem; }

/* Pola geometris islami pada hero */
.hero-pattern {
    background-color: #064e3b;
    background-image:
        radial-gradient(1200px 500px at 85% -10%, rgba(201,162,39,.28), transparent 60%),
        radial-gradient(900px 500px at -10% 110%, rgba(16,185,129,.35), transparent 60%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath d='M40 6l10 24 24 10-24 10-10 24-10-24L6 40l24-10z' fill='none' stroke='%23ffffff' stroke-opacity='.07' stroke-width='1.5'/%3E%3C/svg%3E");
}
.gold-text { background: linear-gradient(180deg,#f6e08a,#c9a227); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ===== Kartu unit ===== */
.unit-card { position: relative; isolation: isolate; transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease; -webkit-tap-highlight-color: transparent; }
.unit-card::before { /* bingkai emas saat hover */
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; z-index: 2; pointer-events: none;
    background: linear-gradient(135deg, #f6e08a, #c9a227 50%, #f6e08a);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: 0; transition: opacity .35s ease;
}
.unit-card:hover, .unit-card:focus-visible { transform: translateY(-8px); box-shadow: 0 25px 50px -18px rgba(201,162,39,.6); }
.unit-card:hover::before, .unit-card:focus-visible::before { opacity: 1; }
.unit-card:active { transform: translateY(-2px) scale(.985); }
.unit-card .unit-img { transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.unit-card:hover .unit-img { transform: scale(1.08); }
.unit-card .shine { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%); transform: translateX(-120%); }
.unit-card:hover .shine { transform: translateX(120%); transition: transform .9s ease; }
.unit-card .arrow { transition: transform .3s ease; }
.unit-card:hover .arrow { transform: translateX(6px); }

/* ===== Modal ===== */
.modal-backdrop { opacity: 0; transition: opacity .3s ease; }
.modal-panel { opacity: 0; transform: translateY(24px) scale(.96); transition: opacity .3s ease, transform .35s cubic-bezier(.2,.8,.2,1); }
#unitModal.is-open .modal-backdrop,
#modalProfilPesantren.is-open .modal-backdrop,
.is-open .modal-backdrop { opacity: 1; }
#unitModal.is-open .modal-panel,
#modalProfilPesantren.is-open .modal-panel,
.is-open .modal-panel { opacity: 1; transform: none; }
.view-enter { animation: viewIn .35s ease both; }
@keyframes viewIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }

/* Tombol besar */
.btn-big { display: flex; align-items: center; gap: 1rem; width: 100%; min-height: 4.5rem; padding: 1rem 1.25rem; border-radius: 1.1rem; font-weight: 700; font-size: 1.1rem; text-align: left; transition: transform .2s, box-shadow .2s, background .2s; }
.btn-big:hover { transform: translateY(-2px); }
.btn-big:active { transform: scale(.98); }
.btn-emerald { background: linear-gradient(135deg,#047857,#064e3b); color: #fff; box-shadow: 0 12px 24px -12px rgba(6,78,59,.7); }
.btn-gold { background: linear-gradient(135deg,#f0cf55,#c9a227); color: #3b2f05; box-shadow: 0 12px 24px -12px rgba(168,132,26,.8); }
.btn-outline { background: #fff; color: #064e3b; border: 2px solid #a7f3d0; }
.btn-outline:hover { background: #ecfdf5; }
.btn-wa { background: linear-gradient(135deg,#25d366,#128c7e); color: #fff; box-shadow: 0 12px 24px -12px rgba(18,140,126,.8); }

.spinner { width: 2.5rem; height: 2.5rem; border: 4px solid #d1fae5; border-top-color: #059669; border-radius: 9999px; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== Form wizard ===== */
.field-label { display: block; font-weight: 700; font-size: 1.05rem; color: #064e3b; margin-bottom: .4rem; }
.field-hint { font-size: .95rem; color: #475569; margin-top: .35rem; }
.field-input { width: 100%; min-height: 3.5rem; padding: .8rem 1rem; font-size: 1.15rem; border: 2px solid #cbd5e1; border-radius: 1rem; background: #fff; transition: border-color .2s, box-shadow .2s; }
.field-input:focus { outline: none; border-color: #059669; box-shadow: 0 0 0 5px rgba(5,150,105,.18); }
.field-input.is-invalid { border-color: #dc2626; background: #fef2f2; }
.field-input.is-valid { border-color: #059669; }
.field-error { color: #b91c1c; font-weight: 600; font-size: 1rem; margin-top: .35rem; }
.step-dot { width: 2.75rem; height: 2.75rem; border-radius: 9999px; display: grid; place-items: center; font-weight: 800; border: 3px solid #a7f3d0; color: #047857; background: #fff; transition: all .3s; }
.step-dot.is-active { background: linear-gradient(135deg,#047857,#064e3b); color: #fff; border-color: #c9a227; transform: scale(1.1); }
.step-dot.is-done { background: #10b981; color: #fff; border-color: #10b981; }
.step-pane { display: none; }
.step-pane.is-active { display: block; animation: viewIn .35s ease both; }
.file-drop { border: 3px dashed #6ee7b7; border-radius: 1.25rem; background: #f0fdf4; padding: 1.25rem; transition: background .2s, border-color .2s; }
.file-drop:hover, .file-drop.has-file { background: #dcfce7; border-color: #059669; }

/* ===== Efek Tipografi Emas Shimmer & Card Ucapan Selamat (Teroptimasi Ringan & 60 FPS di Mobile) ===== */
.text-gradient-gold {
    background: linear-gradient(135deg, #fffbeb 0%, #fef08a 25%, #f59e0b 50%, #fef08a 75%, #fffbeb 100%);
    background-size: 100% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
@media (min-width: 768px) {
    .text-gradient-gold {
        background-size: 200% auto;
        animation: shineGoldText 7s linear infinite;
    }
}
@keyframes shineGoldText {
    to { background-position: 200% center; }
}

.card-ucapan-selamat {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4), 0 0 16px -4px rgba(240, 207, 85, 0.2);
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    contain: paint;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
@media (min-width: 640px) {
    .card-ucapan-selamat {
        box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.5), 0 0 40px -10px rgba(240, 207, 85, 0.25);
    }
    .card-ucapan-selamat:hover {
        box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.6), 0 0 50px -5px rgba(240, 207, 85, 0.35);
    }
}

/* ===== Banner Pengumuman Kelulusan - Zoom In/Out Halus & Profesional (GPU Compositor Murni) ===== */
@keyframes smoothZoomPulse {
    0%, 100% {
        transform: scale3d(1, 1, 1);
    }
    50% {
        transform: scale3d(1.035, 1.035, 1);
    }
}
.banner-pengumuman-zoom {
    display: inline-flex;
    animation: smoothZoomPulse 2.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    will-change: transform;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    transform-origin: center center;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35), 0 0 14px rgba(246, 224, 138, 0.3);
}
.banner-pengumuman-zoom:hover,
.banner-pengumuman-zoom:focus-visible {
    animation-play-state: paused;
    transform: scale3d(1.045, 1.045, 1);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5), 0 0 24px rgba(246, 224, 138, 0.65);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}