/* ===================== Claim Manialiga — Theme (v1.2) Dark Premium + Snow + 3D Glow Buttons Font: Poppins / Inter ===================== */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=Poppins:wght@400;600;800&display=swap'); :root{ --bg: #0b0f1a; --bg-2: #0f1626; --card: rgba(255,255,255,0.08); --glass: rgba(255,255,255,0.06); --border: rgba(255,255,255,0.12); --txt: #e8f1ff; --muted: #a9b7d0; --blue: #2b7cff; /* biru keren, tidak terlalu menyala */ --blue-2: #1c4fb3; --accent: #6aa8ff; --success: #25d366; --danger: #ff4d4f; --warning: #ffb020; --shadow: 0 10px 30px rgba(0,0,0,.45); } *{box-sizing:border-box} html,body{height:100%} body{ margin:0; font-family:Poppins, Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; color:var(--txt); background:var(--bg); overflow-x:hidden; } /* Global background image */ body::before{ content:""; position:fixed; inset:0; z-index:-3; background:url('img/bg.jpg') center/cover no-repeat fixed; filter:brightness(.5) saturate(.9); } /* Glass overlay */ body::after{ content:""; position:fixed; inset:0; z-index:-2; backdrop-filter: blur(6px); background: linear-gradient(180deg, rgba(11,15,26,.45), rgba(11,15,26,.75)); } .container{width:min(1100px, 92%); margin:0 auto;} .center{display:grid; place-items:center;} .grid{display:grid; gap:1rem;} .header{padding:20px 0;} .brand{font-weight:800; letter-spacing:.5px} .brand a{color:#fff; text-decoration:none} .hero{min-height:72vh; display:grid; align-content:center; gap:18px; text-align:center} .hero h1{font-size:clamp(28px,3.6vw,42px); margin:0} .hero p{color:var(--muted); margin:0 auto; max-width:720px} /* 3D glossy glow button */ .btn{ --btn-c: var(--blue); display:inline-block; padding:12px 20px; border-radius:14px; position:relative; color:#fff; text-decoration:none; font-weight:700; letter-spacing:.2px; isolation:isolate; background: linear-gradient(180deg, var(--btn-c), var(--blue-2)); border:1px solid rgba(255,255,255,.12); box-shadow: inset 0 2px 0 rgba(255,255,255,.25), inset 0 -8px 16px rgba(0,0,0,.25), 0 10px 24px rgba(43,124,255,.25); transition: transform .15s ease, box-shadow .2s ease; } .btn::after{ /* shiny sweep */ content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1; background: radial-gradient(120% 80% at 15% 0%, rgba(255,255,255,.35), transparent 46%), linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); } .btn:hover{ transform: translateY(-1px); box-shadow: inset 0 2px 0 rgba(255,255,255,.25), inset 0 -8px 18px rgba(0,0,0,.28), 0 14px 28px rgba(43,124,255,.33);} .btn:active{ transform: translateY(0); box-shadow: inset 0 2px 0 rgba(255,255,255,.25), inset 0 -8px 18px rgba(0,0,0,.28), 0 8px 16px rgba(43,124,255,.22);} .btn-ghost{background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)); border:1px solid var(--border)} /* ===== Cards ===== */ .card{background:var(--glass); border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow)} .card .content{padding:18px} .card h3{margin:0 0 8px; font-size:18px} .card p{margin:0; color:var(--muted)} /* ===== Slider — full-fit (gambar utuh, agak kecil) ===== */ .slider{ position:relative; height: clamp(220px, 40vw, 420px); border-radius:20px; overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow); background: rgba(0,0,0,.35); /* letterbox gelap */ } .slide{ position:absolute; inset:0; background-size: contain !important; /* tampilkan gambar FULL (tanpa crop) */ background-position: center center; background-repeat: no-repeat; opacity:0; transition:opacity 900ms ease; transform: scale(.96); /* kecilkan dikit */ } .slide.active{opacity:1} /* (Opsional) fullbleed: melebar sampai tepi layar */ .slider.fullbleed{ width:100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); border-radius:0; border-left:0; border-right:0; } /* ===== Options grid ===== */ .options{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:14px} .option{cursor:pointer; border-radius:16px; padding:14px; border:1px solid var(--border); background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04)); transition:transform .15s ease, box-shadow .2s ease} .option:hover{transform:translateY(-2px); box-shadow:0 12px 24px rgba(0,0,0,.35)} .option.selected{outline:2px solid var(--accent); box-shadow:0 0 0 4px rgba(106,168,255,.18)} /* ===== Form (label arahan di atas, input di bawah) ===== */ form{display:grid; gap:14px} .field{display:grid; gap:8px} .label-title{font-size:14px; font-weight:700; color:#ffffff} .bank-title{color:#ffffff; text-shadow:0 1px 0 rgba(0,0,0,.45), 0 0 10px rgba(106,168,255,.15)} .hint{color:var(--muted); font-size:12px; margin-top:-2px} .input{background:rgba(255,255,255,.06); border:1px solid var(--border); border-radius:12px; color:#fff; padding:12px} label{font-size:14px; color:var(--muted)} select.input{appearance:none} .helper{color:var(--muted); font-size:12px} /* Icon di kiri input (pakai .input-wrap[data-icon="…"]) */ .input-wrap{position:relative} .input-wrap::before{ content: attr(data-icon); position:absolute; left:12px; top:50%; transform:translateY(-50%); font-size:16px; opacity:.8; pointer-events:none; } /* Pill input (dipakai di halaman form baru) */ .pill.input{border-radius:14px; padding-left:40px} /* Warna teks dropdown & semua