*{margin:0;padding:0;box-sizing:border-box;font-family:'Poppins',sans-serif;scroll-behavior:smooth}
body{background:#0a0a0a;color:#fff}
.container{max-width:1100px;margin:0 auto;padding:0 20px}

/* NAVBAR */
header{background:#111;box-shadow:0 2px 10px rgba(0,0,0,0.3);position:sticky;top:0;z-index:999}
nav{display:flex;justify-content:space-between;align-items:center;padding:18px 0}
.logo{font-size:24px;font-weight:700;color:#fff}
.logo span{color:#FFD700}
.nav-links{display:flex;gap:30px;list-style:none}
.nav-links a{text-decoration:none;color:#aaa;font-weight:500;transition:.2s}
.nav-links a:hover{color:#FFD700}

/* NAV KANAN & TOMBOL KOPI */
.nav-right {display: flex; align-items: center; gap: 20px;}
.btn-coffee {
  padding: 5px 12px;
  border: 1px solid #FFD700;
  border-radius: 6px;
  background: rgba(255, 215, 0, 0.1);
  color: #FFD700;
  text-decoration: none;
  font-weight: 600;
  font-size: 11px;
  transition: .3s;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}
.btn-coffee:hover {
  background: #FFD700;
  color: #000;
}

.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer}
.hamburger span{width:25px;height:3px;background:#aaa;border-radius:2px}

/* DASHBOARD & GENERATOR CARD */
section{padding:80px 0}
#dashboard{background:linear-gradient(135deg,#111 0%,#1a1a1a 100%);text-align:center}
#dashboard h1{font-size:42px;margin-bottom:12px}
#dashboard h1 span{color:#FFD700}
#dashboard p.sub-title{font-size:16px;color:#aaa;margin-bottom:40px}

.generator-card {
  background: #141414;
  border: 1px solid #27272a;
  border-radius: 16px;
  max-width: 480px;
  margin: 0 auto;
  padding: 32px 24px;
  text-align: left;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.form-group { margin-bottom: 20px; }
.form-group label {
  display: block; font-size: 13px; color: #a1a1aa; margin-bottom: 8px; font-weight: 500;
}
.form-control {
  width: 100%; background: #000; border: 1px solid #27272a; color: #fff;
  padding: 12px 16px; border-radius: 8px; font-size: 14px; outline: none; transition: border-color 0.2s;
}
.form-control:focus { border-color: #FFD700; }
textarea.form-control { resize: none; height: 80px; }

/* BUTTONS */
.btn {
  padding: 14px 28px; border-radius: 10px; text-decoration: none; font-weight: 600;
  transition: .3s; display: inline-block; border: none; cursor: pointer;
}
.btn-yellow { background: #FFD700; color: #000; width: 100%; font-size: 15px; }
.btn-yellow:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(255,215,0,0.25); }

/* RESULT BOX */
.result-box { display: none; margin-top: 24px; padding-top: 24px; border-top: 1px solid #27272a; }
.result-box label { color: #FFD700; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.link-display {
  background: #000; border: 1px dashed #27272a; padding: 12px; border-radius: 8px;
  font-size: 13px; color: #a1a1aa; word-break: break-all; margin: 10px 0 16px 0;
}
.btn-outline { background: transparent; color: #fff; border: 1px solid #27272a; width: 100%; }
.btn-outline:hover { background: #1f1f23; border-color: #3f3f46; }

/* RINCIAN SECTION */
#rincian{background:#111}
.section-title{text-align:center;font-size:32px;font-weight:700;margin-bottom:16px}
.section-sub{text-align:center;color:#aaa;margin-bottom:60px;max-width:700px;margin-inline:auto}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px}
.feature-box{background:#1a1a1a;padding:35px;border-radius:16px;border:1px solid #222;text-align:left}
.feature-icon{font-size:40px;margin-bottom:16px}
.feature-box h3{font-size:20px;margin-bottom:10px;color:#FFD700}
.feature-box p{color:#aaa;line-height:1.7}

footer{background:#0a0a0a;color:#555;padding:30px 0;text-align:center;font-size:14px;border-top:1px solid #111; line-height: 1.8;}
.footer-link { color: #FFD700; text-decoration: none; font-weight: 600; cursor: pointer;}
.footer-link:hover { text-decoration: underline; }

/* REDIRECT LOADING SCREEN */
#redirectView { display: none; text-align: center; padding: 120px 20px; }
.spinner {
  width: 36px; height: 36px; border: 3px solid #27272a; border-top-color: #FFD700;
  border-radius: 50%; margin: 0 auto 20px auto; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* MODAL KOPI / DONASI */
.modal-overlay {
  display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(5px); z-index: 1000;
  align-items: center; justify-content: center; padding: 20px;
}
.modal-card {
  background: #141414; border: 1px solid #27272a; border-radius: 16px; width: 100%;
  max-width: 380px; padding: 32px 24px; position: relative; text-align: center;
  box-shadow: 0 20px 40px rgba(0,0,0,0.8);
}
.modal-card h2 { font-size: 22px; margin-bottom: 8px; color: #fff; }
.modal-card p.desc { font-size: 13px; color: #a1a1aa; margin-bottom: 24px; line-height: 1.6; }
.close-modal { position: absolute; top: 16px; right: 20px; color: #aaa; font-size: 26px; cursor: pointer; }
.close-modal:hover { color: #fff; }
.qr-container {
  background: #fff; padding: 10px; border-radius: 12px; display: inline-block;
  margin-bottom: 20px; box-shadow: 0 5px 15px rgba(255,215,0,0.1);
}
.qr-container img { width: 200px; height: 200px; display: block; border-radius: 8px;}
.rincian-donasi { background: #000; border: 1px solid #27272a; padding: 12px; border-radius: 8px; margin-bottom: 20px; text-align: left;}
.rincian-donasi p { font-size: 12px; color: #aaa; margin: 4px 0; display: flex; justify-content: space-between;}
.rincian-donasi p span { color: #fff; font-weight: 500;}

/* MOBILE RESPONSIVE */
@media(max-width:768px){
  .nav-links{position:fixed;top:73px;right:-100%;flex-direction:column;background:#111;width:70%;height:100vh;padding:40px 20px;gap:20px;transition:.3s; border-left: 1px solid #222;}
  .nav-links.active{right:0}
  .hamburger{display:flex}
  #dashboard h1{font-size:28px}
}