:root{
  --bg: #f7f3ef;
  --card: rgba(255,255,255,.62);
  --text: #0b1220;
  --muted: rgba(11,18,32,.72);
  --blue: #0B4BFF;
  --blue2:#2a7bff;
  --stroke: rgba(15,30,60,.12);
  --shadow: 0 18px 60px rgba(12, 28, 65, .12);
  --radius: 22px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; color:var(--text);
background:
  radial-gradient(1200px 600px at 20% 0%, rgba(11,75,255,.12), transparent 60%),
  radial-gradient(900px 500px at 95% 30%, rgba(42,123,255,.10), transparent 55%),
  var(--bg);
overflow-x:hidden;}
a{color:inherit;text-decoration:none}
.container{max-width:1120px;margin:0 auto;padding:0 18px}

/* Splash (TANPA gelap) */
.splash{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:transparent; z-index:9999;
transition: opacity .35s ease, transform .35s ease;}
.splash.hide{opacity:0; transform: translateY(-8px); pointer-events:none; visibility:hidden;}
.splash-card{width:min(520px, 92vw); border:1px solid var(--stroke); border-radius: var(--radius);
background: var(--card); box-shadow: var(--shadow); padding:18px; display:flex; gap:14px; align-items:center; backdrop-filter: blur(14px);}
.splash-logo{width:46px;height:46px;border-radius:16px; background: linear-gradient(135deg, var(--blue), var(--blue2));
display:flex; align-items:center; justify-content:center; color:white; font-weight:800;}
.splash-title{font-weight:800; letter-spacing:.2px}
.splash-sub{font-size:13px; color:var(--muted)}
.splash-bar{margin-left:auto;width:140px;height:8px;border-radius:999px;background: rgba(11,75,255,.12); overflow:hidden}
.splash-bar span{display:block;height:100%; width:45%; border-radius:999px; background: linear-gradient(90deg, var(--blue), var(--blue2));
animation: load 1.05s ease-in-out infinite;}
@keyframes load{0%{transform:translateX(-120%)} 100%{transform:translateX(240%)}}

.glass{border:1px solid var(--stroke); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); backdrop-filter: blur(14px);}

/* Nav */
.nav{position:sticky;top:0; z-index:50; backdrop-filter: blur(14px); background: rgba(247,243,239,.72); border-bottom: 1px solid var(--stroke);}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0;}
.brand{display:flex; align-items:center; gap:10px;}
.logo{width:40px;height:40px;border-radius:16px;background: linear-gradient(135deg,var(--blue),var(--blue2));
display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900}
.brand-name{font-weight:900; letter-spacing:.3px}
.brand-sub{font-size:12px;color:var(--muted)}
.menu{display:flex; gap:14px; align-items:center; flex-wrap:wrap;}
.menu a{font-size:14px;color:rgba(11,18,32,.86); padding:10px 10px; border-radius:12px;}
.menu a:hover{background: rgba(11,75,255,.08)}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 14px; border-radius:14px;
border:1px solid rgba(11,75,255,.22);
background: linear-gradient(135deg, rgba(11,75,255,.95), rgba(42,123,255,.95));
color:white; font-weight:700; box-shadow: 0 10px 28px rgba(11,75,255,.18);
cursor:pointer; transition: transform .12s ease, filter .12s ease;}
.btn:hover{transform: translateY(-1px); filter:brightness(1.02)}
.btn-soft{background: rgba(11,75,255,.10); color: var(--blue); border-color: rgba(11,75,255,.18); box-shadow:none;}
.btn-ghost{background: transparent; color: rgba(11,18,32,.86); border: 1px solid var(--stroke); box-shadow:none;}
.btn-disabled{background: rgba(11,18,32,.10); border-color: rgba(11,18,32,.14); color: rgba(11,18,32,.55); cursor:not-allowed; box-shadow:none;}

.input, .select, textarea{
  width:100%; padding:12px 12px; border-radius:14px;
  border:1px solid var(--stroke); background: rgba(255,255,255,.66);
  outline:none; color: rgba(11,18,32,.92);
}
.select{max-width:260px}
.input:focus, .select:focus, textarea:focus{border-color: rgba(11,75,255,.32); box-shadow: 0 0 0 4px rgba(11,75,255,.10);}

/* Hero */
.hero{padding:56px 0 22px;}
.hero-grid{display:grid; grid-template-columns: 1.1fr .9fr; gap:18px; align-items:center;}
.pill{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; border:1px solid rgba(11,75,255,.18);
background: rgba(255,255,255,.55); color: rgba(11,18,32,.86); font-size:13px; margin-bottom:14px;}
.hero-title{font-size:46px; line-height:1.05; margin:0 0 14px; letter-spacing:-.8px;}
.hero-desc{margin:0 0 18px; color:var(--muted); font-size:16px; line-height:1.7;}
.hero-cta{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:20px;}
.glow{background: linear-gradient(135deg, var(--blue), var(--blue2)); -webkit-background-clip:text; background-clip:text; color:transparent;
text-shadow: 0 18px 50px rgba(11,75,255,.22);}

.hero-right{position:relative; min-height:360px;}
.card-float{padding:14px; animation: float 4.2s ease-in-out infinite;}
@keyframes float{0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)}}
.card-top{display:flex; align-items:center; gap:8px; margin-bottom:10px;}
.dot{width:10px;height:10px;border-radius:99px; opacity:.9}
.dot-a{background:#ff5b5b}.dot-b{background:#ffc34d}.dot-c{background:#42d37a}
.card-title{margin-left:auto; font-size:12px; color:var(--muted); font-weight:700}
.terminal{border-radius:18px;border:1px solid rgba(11,75,255,.14); background: rgba(11,18,32,.04); padding:14px;}
.line{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono"; font-size:13px; padding:6px 0; color: rgba(11,18,32,.86);}
.k{color: var(--blue); font-weight:800}
.b{color: rgba(11,18,32,.95); font-weight:800}
.dim{color: rgba(11,18,32,.55)}
.orb{position:absolute; border-radius: 999px; filter: blur(8px); opacity:.75; pointer-events:none}
.orb-1{width:190px;height:190px; right:-40px; top:40px; background: radial-gradient(circle at 30% 30%, rgba(11,75,255,.38), transparent 60%);}
.orb-2{width:220px;height:220px; left:-70px; bottom:-50px; background: radial-gradient(circle at 30% 30%, rgba(42,123,255,.26), transparent 60%);}

/* Sections */
.section{padding:42px 0;}
.section-head{margin-bottom:16px;}
.section-head h2{margin:0; font-size:28px; letter-spacing:-.3px}
.section-head p{margin:8px 0 0; color:var(--muted); line-height:1.7}

.about-grid{display:grid; grid-template-columns: 1fr 1fr; gap:12px;}
.about-card{padding:18px;}
.about-card h3{margin:0 0 10px}
.list{margin:0;padding-left:18px;color:var(--muted); line-height:1.85}
.muted{color:var(--muted); line-height:1.75}

.toolbar{display:flex; gap:10px; align-items:center; margin:14px 0 16px; flex-wrap:wrap;}
.cards{display:grid; grid-template-columns: repeat(3, 1fr); gap:12px;}
.card{padding:16px; transition: transform .15s ease, box-shadow .15s ease;}
.card:hover{transform: translateY(-2px); box-shadow: 0 20px 70px rgba(12,28,65,.14);}
.card-head{display:flex; justify-content:space-between; gap:10px; align-items:flex-start;}
.card h3{margin:0; font-size:16px}
.sub{font-size:12px; color:var(--muted); margin-top:6px}
.tag{font-size:12px; padding:7px 10px; border-radius:999px; border:1px solid;}
.tag-free{color:#0b6bff; border-color: rgba(11,75,255,.22); background: rgba(11,75,255,.08);}
.tag-paid{color:#7a2bff; border-color: rgba(122,43,255,.22); background: rgba(122,43,255,.08);}
.actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}

.contact-grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:12px}
.contact-card{padding:18px}
.contact-card h3{margin:0 0 8px}

.footer{padding:22px 0 50px; border-top:1px solid var(--stroke); background: rgba(255,255,255,.20)}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.footer-right{display:flex; gap:12px; flex-wrap:wrap}
.footer-right a{color:rgba(11,18,32,.78); padding:8px 10px; border-radius:12px}
.footer-right a:hover{background: rgba(11,75,255,.08)}

/* Admin */
.admin-wrap{min-height: calc(100vh - 80px); display:flex; align-items:center; justify-content:center; padding:26px}
.admin-card{width:min(760px, 92vw); padding:18px}
.admin-head{display:flex; gap:12px; align-items:center; margin-bottom:8px}
.alert{background: rgba(255,91,91,.12); border:1px solid rgba(255,91,91,.22); padding:10px 12px; border-radius:14px; margin:10px 0; color: rgba(11,18,32,.86)}
.form{display:grid; gap:10px; margin-top:12px}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.check{display:flex; gap:10px; align-items:center; user-select:none}
.tiny{font-size:12px}

.table{display:grid; gap:10px; margin-top:12px}
.trow{display:grid; grid-template-columns: 2fr .8fr .8fr 1fr 1.1fr; gap:10px; align-items:start;
padding:12px; border:1px solid var(--stroke); border-radius:18px; background: rgba(255,255,255,.55)}
.thead{font-weight:900; background: rgba(11,75,255,.06)}
.t-title{font-weight:900}
.btn-row{display:flex; gap:10px; flex-wrap:wrap}

.reveal{opacity:0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease;}
.reveal.show{opacity:1; transform: translateY(0);}

@media (max-width: 980px){
  .hero-grid{grid-template-columns: 1fr; }
  .hero-title{font-size:38px}
  .cards{grid-template-columns: 1fr 1fr;}
  .about-grid{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .select{max-width:none}
  .trow{grid-template-columns: 1.4fr .8fr .8fr 1fr; }
  .trow > div:last-child{grid-column: 1 / -1}
}
@media (max-width: 560px){
  .cards{grid-template-columns: 1fr;}
  .hero-title{font-size:34px}
}