@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=DM+Sans:wght@300;400;500&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } :root { /* Nilai default; akan ditimpa oleh tema aktif dari tiap halaman */ --accent: #d4af37; --accent-ink: #1a1500; --bg: #0a0a0f; --bg2: #12121a; --ink: #f0ede6; --muted: rgba(240,237,230,0.5); --glass: rgba(255,255,255,0.04); --glass-border: rgba(255,255,255,0.10); } body { font-family: 'DM Sans', sans-serif; background: var(--bg); background-image: linear-gradient(160deg, var(--bg) 0%, var(--bg2) 100%); color: var(--ink); min-height: 100vh; overflow-x: hidden; } .bg-decor { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 40%), radial-gradient(circle at 85% 80%, color-mix(in srgb, var(--bg2) 70%, transparent), transparent 45%), radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 60%); } .confetti-canvas { position: fixed; inset: 0; z-index: 1; pointer-events: none; } .hero { position: relative; z-index: 2; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1.2rem; } .card-glass { background: var(--glass); border: 1px solid var(--glass-border); border-radius: 24px; padding: 2.8rem 2.4rem; max-width: 540px; width: 100%; text-align: center; backdrop-filter: blur(12px); box-shadow: 0 20px 60px rgba(0,0,0,0.4); } .school-logo { display: block; margin: 0 auto 1.2rem; width: 92px; height: 92px; object-fit: contain; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.25)); } .badge { display: inline-block; background: rgba(212,175,55,0.12); border: 1px solid rgba(212,175,55,0.4); color: var(--accent); font-size: 11px; font-weight: 500; letter-spacing: 2.5px; text-transform: uppercase; padding: 6px 18px; border-radius: 20px; margin-bottom: 1.4rem; } .badge-lulus { background: rgba(15,110,86,0.18); border-color: rgba(15,110,86,0.5); color: #5dcaa5; letter-spacing: 3px; } .title { font-family: 'Playfair Display', serif; font-size: clamp(2rem, 6vw, 3rem); font-weight: 900; line-height: 1.1; margin-bottom: 0.5rem; } .hl-lulus { color: #5dcaa5; } .school { font-size: 14px; color: var(--muted); letter-spacing: 1px; margin-bottom: 1.8rem; } .check-form { text-align: left; margin-top: 1rem; } .check-form label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 8px; letter-spacing: 0.5px; } .input-row { display: flex; gap: 8px; } .check-form input[type=text], .check-form input[type=password] { flex: 1; width: 100%; background: var(--glass); border: 1px solid var(--glass-border); color: var(--ink); font-family: 'DM Sans', sans-serif; font-size: 15px; padding: 14px 18px; border-radius: 12px; outline: none; transition: border-color 0.2s, background 0.2s; } .check-form input:focus { border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: var(--glass); } .check-form input::placeholder { color: rgba(240,237,230,0.3); } .check-form button { background: var(--accent); color: var(--accent-ink); border: none; font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 500; padding: 14px 24px; border-radius: 12px; cursor: pointer; white-space: nowrap; transition: transform 0.15s, box-shadow 0.2s; } .check-form button:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(212,175,55,0.3); } .hint { font-size: 12px; color: rgba(240,237,230,0.35); margin-top: 10px; } .closed-box { margin-top: 1rem; } .closed-icon { font-size: 3rem; margin-bottom: 0.8rem; } .closed-box h2 { font-family: 'Playfair Display', serif; font-size: 1.5rem; margin-bottom: 0.6rem; } .closed-box p { color: var(--muted); font-size: 14px; } .countdown-date { color: var(--accent) !important; font-weight: 500; margin: 0.4rem 0 1.4rem; } .countdown { display: flex; gap: 10px; justify-content: center; } .cd-box { background: var(--glass); border: 1px solid var(--glass-border); border-radius: 12px; padding: 12px 8px; min-width: 62px; } .cd-box span { font-family: 'Playfair Display', serif; font-size: 1.8rem; font-weight: 700; color: var(--accent); display: block; } .cd-box small { font-size: 10px; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; } /* Result */ .result-card .result-icon { font-size: 3.4rem; margin-bottom: 0.6rem; } .result-sub { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 1.2rem 0; } .student-box { background: var(--glass); border: 1px solid var(--glass-border); border-radius: 16px; padding: 1.4rem; margin: 1.4rem 0; } .student-name { font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 700; margin-bottom: 6px; } .student-meta { font-size: 13px; color: var(--muted); display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; } .student-kelas { font-size: 14px; color: var(--ink); margin-top: 6px; font-weight: 500; } .student-nilai { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.08); } .student-nilai small { display: block; font-size: 11px; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; } .student-nilai strong { font-family: 'Playfair Display', serif; font-size: 2rem; color: var(--accent); } .btn-print { display: inline-block; background: var(--accent); color: var(--accent-ink); text-decoration: none; font-weight: 500; font-size: 14px; padding: 12px 24px; border-radius: 12px; margin-bottom: 0.4rem; transition: transform 0.15s; } .btn-print:hover { transform: translateY(-1px); } .btn-back { display: block; margin-top: 1.4rem; color: var(--muted); text-decoration: none; font-size: 13px; } .btn-back:hover { color: var(--accent); } .is-gagal .title, .is-notfound .title { font-size: 2rem; } .footer { margin-top: 1.6rem; font-size: 12px; color: rgba(240,237,230,0.35); text-align: center; } .footer a { color: var(--muted); text-decoration: none; } .footer a:hover { color: var(--accent); } .alert { padding: 12px 16px; border-radius: 10px; font-size: 14px; margin-bottom: 16px; text-align: left; } .alert-err { background: rgba(226,75,74,0.12); border: 1px solid rgba(226,75,74,0.4); color: #f09595; } .alert-ok { background: rgba(29,158,117,0.12); border: 1px solid rgba(29,158,117,0.4); color: #5dcaa5; } @media (max-width: 480px) { .card-glass { padding: 2rem 1.4rem; } .input-row { flex-direction: column; } .check-form button { width: 100%; } }