/* ===================================================== style.css — TEMA GELAP NEON (senada landing page) Dipakai halaman: masuk.php, daftar.php, dashboard.php Sistem warna aksen: - Default (masuk & dashboard) : HIJAU NEON - : CYAN (dipakai daftar.php) Semua elemen mengikuti variabel --aksen, jadi ganti warna halaman cukup lewat class di . ===================================================== */ :root { --latar: #0A0E0B; /* hitam kehijauan */ --panel: #121812; /* latar kartu */ --neon: #A6FF3D; --cyan: #3DF5FF; --teks: #F1F6EF; --abu: #8FA093; --garis: #263027; --merah: #FF9A8F; --merah-latar: #2A1512; } /* Tema default: hijau neon */ body { --aksen: var(--neon); --aksen-redup: rgba(166, 255, 61, .14); --aksen-sinar: rgba(166, 255, 61, .45); } /* Tema cyan (dipakai halaman daftar) */ body.tema-cyan { --aksen: var(--cyan); --aksen-redup: rgba(61, 245, 255, .14); --aksen-sinar: rgba(61, 245, 255, .45); } * { margin: 0; padding: 0; box-sizing: border-box; } /* Kunci gerakan: hanya scroll vertikal yang diizinkan. Pinch-zoom dan geser ke samping dimatikan. */ html { touch-action: pan-y; overflow-x: hidden; overflow-x: clip; } body { font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif; color: var(--teks); touch-action: pan-y; overflow-x: hidden; overflow-x: clip; overscroll-behavior-x: none; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 24px; background: radial-gradient(circle at 80% 10%, var(--aksen-redup), transparent 42%), radial-gradient(circle at 12% 90%, rgba(255,255,255,.03), transparent 45%), var(--latar); } /* Titik-titik grid samar seperti di landing page */ body::before { content: ""; position: fixed; inset: 0; background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.5px); background-size: 28px 28px; pointer-events: none; } ::selection { background: var(--aksen); color: var(--latar); } a { color: var(--aksen); font-weight: 700; text-decoration: none; } a:hover { text-decoration: underline; } a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px dashed var(--aksen); outline-offset: 3px; } /* ---------- Logo di atas kartu ---------- */ .logo { display: inline-block; position: relative; isolation: isolate; font-family: "Bricolage Grotesque", "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 19px; letter-spacing: .3px; color: var(--latar); padding: 10px 18px; clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); filter: drop-shadow(0 0 16px rgba(255,70,70,.3)); transition: transform .15s ease; z-index: 1; } /* Cahaya merah terang yang berputar mengelilingi blok logo */ .logo::before { content: ""; position: absolute; width: 320px; height: 320px; top: 50%; left: 50%; translate: -50% -50%; z-index: -2; will-change: transform; background-color: rgba(255,60,60,.22); background-image: conic-gradient( transparent 0deg 300deg, rgba(255,80,80,.95) 330deg, #FFC9C9 345deg, transparent 360deg ); animation: cahaya-putar 3s linear infinite; } /* Isi blok gelap; disisakan celah 2px sebagai rel cahayanya */ .logo::after { content: ""; position: absolute; inset: 2px; z-index: -1; background: #101820; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); } .logo:hover { text-decoration: none; transform: translateY(-1px); } @keyframes cahaya-putar { to { transform: rotate(360deg); } } .logo .selalu { color: var(--neon); animation: nyala-selalu 2.4s ease-in-out infinite; } .logo .hemat { color: var(--cyan); animation: nyala-hemat 2.4s ease-in-out infinite; animation-delay: -1.2s; } @keyframes nyala-selalu { 0%, 100% { text-shadow: 0 0 4px rgba(166,255,61,.7), 0 0 12px rgba(166,255,61,.4); } 50% { text-shadow: 0 0 8px rgba(196,255,120,1), 0 0 18px rgba(166,255,61,.7), 0 0 30px rgba(166,255,61,.45); } } @keyframes nyala-hemat { 0%, 100% { text-shadow: 0 0 4px rgba(61,245,255,.7), 0 0 12px rgba(61,245,255,.4); } 50% { text-shadow: 0 0 8px rgba(150,250,255,1), 0 0 18px rgba(61,245,255,.7), 0 0 30px rgba(61,245,255,.45); } } /* ---------- Kartu utama ---------- */ .kartu { background: var(--panel); width: 100%; max-width: 420px; padding: 38px 34px; border: 1px solid var(--garis); border-top: 4px solid var(--aksen); clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%); filter: drop-shadow(0 16px 26px rgba(0, 0, 0, .45)); position: relative; z-index: 1; } .kartu-tengah { text-align: center; } /* Eyebrow berkedip seperti di landing page */ .eyebrow { display: flex; align-items: center; gap: 10px; font-size: 11.5px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; color: var(--aksen); margin-bottom: 14px; } .eyebrow .dot { width: 7px; height: 7px; background: var(--aksen); border-radius: 50%; box-shadow: 0 0 10px var(--aksen); animation: kedip 1.2s infinite; } @keyframes kedip { 50% { opacity: .15; } } /* Cadangan kalau masih ada halaman yang pakai .merek lama */ .merek { font-size: 12px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; color: var(--aksen); margin-bottom: 14px; } h1 { font-family: "Bricolage Grotesque", "Plus Jakarta Sans", sans-serif; font-size: 24px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; color: #FFFFFF; margin-bottom: 8px; } .subjudul { color: var(--abu); font-size: 15px; margin-bottom: 24px; } /* ---------- Form ---------- */ label { display: block; font-size: 14px; font-weight: 700; color: var(--teks); margin-bottom: 6px; } input[type="text"], input[type="email"], .input-password { width: 100%; padding: 12px 14px; font: inherit; font-size: 15px; color: var(--teks); background: #0D130E; border: 1.5px solid var(--garis); border-radius: 9px; margin-bottom: 16px; } input::placeholder { color: #5E6E62; } input:focus { outline: none; border-color: var(--aksen); box-shadow: 0 0 0 3px var(--aksen-redup); } .cek-password { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--abu); margin-bottom: 20px; cursor: pointer; } .cek-password input { accent-color: var(--aksen); } /* ---------- Tombol: blok gelap + cahaya merah berputar ---------- */ .btn { display: inline-block; position: relative; isolation: isolate; background: transparent; color: var(--aksen); text-shadow: 0 0 10px var(--aksen-sinar); font: inherit; font-size: 14px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; padding: 13px 26px; border: none; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); text-align: center; cursor: pointer; transition: filter .15s ease, transform .15s ease; } /* Rel cahaya merah (diam); kometnya berputar saat tombol disentuh. Ini kunci biar ringan: animasi tidak jalan terus-menerus. */ .btn::before { content: ""; position: absolute; width: 420px; height: 420px; top: 50%; left: 50%; translate: -50% -50%; z-index: -2; background-color: rgba(255,60,60,.22); } .btn:hover::before { background-image: conic-gradient( transparent 0deg 300deg, rgba(255,80,80,.95) 330deg, #FFC9C9 345deg, transparent 360deg ); animation: cahaya-putar 1.6s linear infinite; } /* Isi tombol gelap; celah 2px jadi rel cahayanya */ .btn::after { content: ""; position: absolute; inset: 2px; z-index: -1; background: #101820; clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); } .btn:hover { filter: drop-shadow(0 0 14px rgba(255,70,70,.5)); transform: translateY(-1px); text-decoration: none; } /* Tombol kedua (mis. Keluar) — blok sama, teks tetap warna aksen */ .btn-garis { background: transparent; color: var(--aksen); } .btn-garis:hover { filter: drop-shadow(0 0 14px rgba(255,70,70,.5)); } .btn-penuh { display: block; width: 100%; } .baris-tombol { display: flex; gap: 12px; justify-content: center; } .baris-tombol .btn { flex: 1; } /* ---------- Pesan error & sukses ---------- */ .alert { padding: 12px 14px; border-radius: 9px; font-size: 14px; margin-bottom: 20px; } .alert-error { background: var(--merah-latar); border: 1px solid #4A241F; color: var(--merah); } .alert-sukses { background: var(--aksen-redup); border: 1px solid var(--aksen); color: var(--aksen); } .alert a { color: inherit; } /* ---------- Lain-lain ---------- */ .link-bawah { text-align: center; font-size: 14px; color: var(--abu); margin-top: 20px; } .kembali { font-size: 13.5px; font-weight: 600; letter-spacing: .5px; color: var(--abu); position: relative; z-index: 1; } .kembali:hover { color: var(--aksen); text-decoration: none; } .kotak-info { background: #0D130E; border: 1.5px dashed var(--garis); border-radius: 9px; padding: 14px; font-size: 14px; color: var(--abu); line-height: 1.5; margin-bottom: 20px; } /* Layar kecil (HP) */ @media (max-width: 480px) { .kartu { padding: 28px 20px; } } /* Hormati pengguna yang mematikan animasi */ @media (prefers-reduced-motion: reduce) { .eyebrow .dot, .btn::before, .logo::before, .logo .selalu, .logo .hemat { animation: none; } }