* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body {
  background: #0a0e18;
  background-image:
    radial-gradient(ellipse 120% 80% at 50% -20%, rgba(255, 193, 7, 0.18), transparent 55%),
    radial-gradient(ellipse 80% 50% at 100% 100%, rgba(255, 111, 0, 0.14), transparent 50%),
    radial-gradient(ellipse 60% 40% at 0% 80%, rgba(255, 160, 0, 0.12), transparent 45%);
  background-attachment: fixed;
  color: #fff;
  padding-bottom: 80px;
  min-height: 100vh;
}

/* Top Notif */
.top-notif {
  margin: 0 12px 8px;
  border-radius: 8px;
  background: #10182a;
  padding: 8px 12px;
  font-size: 12px;
  border: 1px solid #1a2740;
  overflow: hidden;
  position: relative;
}
.notif-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-right: 28px;
}
.notif-text {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.notif-text b { color: #FFC107; }
.time { color: #aaa; }
.notif-close {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: #aaa;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
}
.notif-close:hover {
  color: #FFC107;
  background: #1a2740;
}

/* Header */
.header {
  padding: 12px 16px;
  background: #0d1220;
  display: flex;
  align-items: center;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.logo {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  object-fit: cover;
  background: #FFC107;
}
.brand h1 {
  font-size: 16px;
  font-weight: 700;
}
.verified { color: #FFC107; font-size: 14px; }
.brand p { font-size: 11px; color: #bbb; }

/* Banner */
.banner {
  margin: 12px;
  background: linear-gradient(135deg, #FFC107, #FF6F00);
  border-radius: 12px;
  padding: 14px 16px;
  color: #0a0e18;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  overflow: hidden;
  min-height: 100px;
}
.banner-content {
  flex: 1;
  min-width: 0;
}
.banner h2 { font-size: 17px; font-weight: 800; line-height: 1.2; }
.banner p { font-weight: 700; margin: 4px 0; font-size: 13px; }
.banner small { font-size: 11px; opacity: 0.85; }
.banner-image {
  flex-shrink: 0;
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.banner-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25));
}

/* Menu Grid */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 0 12px 16px;
}
.menu-item {
  background: #10182a;
  border: 1px solid #1a2740;
  border-radius: 12px;
  padding: 16px 8px;
  text-align: center;
  text-decoration: none;
  color: #FF6F00;
  font-size: 12px;
}
.menu-item i {
  display: block;
  font-size: 22px;
  margin-bottom: 6px;
  color: #FF6F00;
}

/* Produk 2 kolom */
.produk-section {
  padding: 0 12px 20px;
}
.produk-section h3 { font-size: 14px; color: #FF6F00; margin-bottom: 4px; }
.subtitle { font-size: 12px; color: #aaa; margin-bottom: 12px; }

.produk-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.produk-card {
  background: #10182a;
  border: 1px solid #1a2740;
  border-radius: 12px;
  overflow: hidden;
}
.produk-card img {
  width: 100%;
  aspect-ratio: 4 / 5;
  height: auto;
  object-fit: cover;
  object-position: center;
  background: #1a2740;
  display: block;
}
.produk-info {
  padding: 10px;
}
.produk-info h4 { font-size: 13px; margin-bottom: 4px; }
.produk-info .harga { color: #FFC107; font-weight: 700; font-size: 14px; }
.produk-info .btn {
  display: block;
  margin-top: 8px;
  background: linear-gradient(90deg, #FFC107, #FF8F00);
  color: #0a0e18;
  text-align: center;
  padding: 6px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}

/* Info box */
.info-box {
  margin: 0 12px 20px;
  background: #10182a;
  border-radius: 12px;
  padding: 14px;
  border: 1px solid #1a2740;
}
.info-box h4 { font-size: 14px; margin-bottom: 6px; }
.info-box p { font-size: 12px; color: #bbb; }

/* Bottom Nav */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #0d1220;
  display: flex;
  justify-content: space-around;
  padding: 8px 0 12px;
  border-top: 1px solid #1a2740;
  z-index: 100;
}
.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #888;
  font-size: 10px;
  gap: 3px;
}
.nav-item i { font-size: 18px; }
.nav-item.active {
  color: #fff;
  background: #FF6F00;
  border-radius: 12px;
  padding: 4px 12px;
}

/* Page Content */
.page-content {
  padding: 16px;
}
.badge {
  display: inline-block;
  background: #1a2740;
  color: #FFC107;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 8px;
}
.page-title { font-size: 22px; font-weight: 800; margin-bottom: 6px; }
.page-desc { font-size: 13px; color: #aaa; margin-bottom: 16px; }

/* Warning Marquee */
.warning-box {
  background: #2a0a0a;
  border: 1px solid #ff3333;
  color: #ff5555;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 12px;
  margin-bottom: 16px;
  display: flex;
  gap: 8px;
  align-items: center;
  overflow: hidden;
}
.warning-box.red {
  background: #2a0a0a;
  border-color: #ff3333;
  color: #ff6666;
}
.warning-box i {
  flex-shrink: 0;
  font-size: 14px;
}
.marquee {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}
.marquee span {
  display: inline-block;
  padding-left: 100%;
  animation: marqueeLeft 14s linear infinite;
}
@keyframes marqueeLeft {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* Paket Card */
.paket-card {
  background: #10182a;
  border: 1px solid #1a2740;
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 14px;
}
.paket-label {
  display: inline-block;
  background: #FFC107;
  color: #0a0e18;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  margin-bottom: 8px;
}
.paket-card h3 { font-size: 18px; margin-bottom: 4px; }
.paket-card p { font-size: 13px; color: #bbb; margin-bottom: 10px; }
.paket-card ul { list-style: none; margin-bottom: 12px; }
.paket-card li {
  font-size: 13px;
  margin-bottom: 4px;
  color: #ccc;
}
.paket-card li i { color: #FF6F00; margin-right: 6px; }
.harga {
  font-size: 22px;
  font-weight: 800;
  color: #FFC107;
  margin-bottom: 12px;
}
.btn-pesan {
  display: block;
  background: linear-gradient(90deg, #FFC107, #FF8F00);
  color: #0a0e18;
  text-align: center;
  padding: 12px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
  border: none;
  width: 100%;
  cursor: pointer;
  font-size: 15px;
}
.variant-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.variant-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 10px 8px;
  width: auto;
  font-size: 13px;
  line-height: 1.2;
}
.variant-btn small {
  display: block;
  font-size: 11px;
  font-weight: 700;
  opacity: 0.95;
}

/* Order Form */
.order-form {
  padding: 16px;
}
.order-form.hidden { display: none; }
.order-header {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
}
.order-logo {
  width: 60px;
  height: 60px;
  border-radius: 10px;
  background: #FFC107;
  object-fit: cover;
}
.tag {
  background: #1a2740;
  color: #FFC107;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
}
.tag.aman { background: #3d2e00; color: #FFE082; }

.form-section {
  background: #10182a;
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 14px;
  border: 1px solid #1a2740;
}
.form-section h4 {
  font-size: 14px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.step {
  background: #FFC107;
  color: #0a0e18;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}
label {
  display: block;
  font-size: 12px;
  color: #aaa;
  margin: 8px 0 4px;
}
input, textarea, select {
  width: 100%;
  background: #0a0e18;
  border: 1px solid #1a2740;
  border-radius: 8px;
  padding: 10px;
  color: #fff;
  font-size: 14px;
}
textarea { resize: vertical; min-height: 120px; }

.addon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #0a0e18;
  border: 1px solid #1a2740;
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 8px;
  cursor: pointer;
}
.addon.selected {
  border-color: #FFC107;
  background: #10182a;
}
.addon-price { color: #FFC107; font-size: 13px; }
.btn-pilih {
  background: #1a2740;
  border: none;
  color: #FFC107;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
}
.addon.selected .btn-pilih {
  background: #FFC107;
  color: #0a0e18;
}

.qris-box {
  background: #0a0e18;
  border: 1px solid #1a2740;
  border-radius: 10px;
  padding: 14px;
  text-align: center;
}
.qris-box i { font-size: 28px; color: #FF6F00; }

.ringkasan {
  background: #10182a;
  border-radius: 12px;
  padding: 14px;
  border: 1px solid #1a2740;
}
.ringkasan .row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  margin-bottom: 6px;
}
.ringkasan .total {
  font-weight: 700;
  font-size: 16px;
  color: #FFC107;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #1a2740;
}
.btn-buat {
  width: 100%;
  background: linear-gradient(90deg, #FFC107, #FF8F00);
  color: #0a0e18;
  border: none;
  padding: 14px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 15px;
  margin-top: 14px;
  cursor: pointer;
}

/* Antrian */
.antrian-list { margin-top: 16px; }
.antrian-item {
  background: #10182a;
  border: 1px solid #1a2740;
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.antrian-item .num {
  background: #FFC107;
  color: #0a0e18;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  margin-right: 10px;
  flex-shrink: 0;
}
.antrian-item .info { flex: 1; }
.antrian-item .info strong { font-size: 13px; }
.antrian-item .info small { display: block; color: #aaa; font-size: 11px; }
.status-badge {
  background: #1a2740;
  color: #FFC107;
  font-size: 10px;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

.search-box {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.search-box input {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-box button {
  background: #FFC107;
  color: #0a0e18;
  border: none;
  padding: 0 16px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.antrian-empty {
  background: #10182a;
  border: 1px dashed #1a2740;
  border-radius: 14px;
  padding: 28px 16px;
  text-align: center;
}
.antrian-empty-icon { font-size: 28px; margin-bottom: 8px; }
.antrian-empty strong { display: block; font-size: 14px; margin-bottom: 6px; }
.antrian-empty small { display: block; color: #8aa0b8; font-size: 12px; line-height: 1.45; }

/* Contact */
.contact-list { margin-top: 16px; }
.contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #10182a;
  border: 1px solid #1a2740;
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 10px;
  text-decoration: none;
  color: #fff;
}
.contact-item i {
  font-size: 24px;
  color: #FF6F00;
}

/* Laporan */
.btn-group {
  display: flex;
  gap: 8px;
  margin: 16px 0;
}
.btn-group button {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #1a2740;
  background: #10182a;
  color: #aaa;
  cursor: pointer;
}
.btn-group .btn-active {
  background: #FFC107;
  color: #0a0e18;
  border-color: #FFC107;
}
.info-small {
  font-size: 11px;
  color: #aaa;
  background: #10182a;
  padding: 10px;
  border-radius: 8px;
  margin-bottom: 16px;
}
.btn-foto, .btn-kirim {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: none;
  margin-top: 10px;
  font-weight: 600;
  cursor: pointer;
}
.btn-foto {
  background: #1a2740;
  color: #FFC107;
}
.btn-kirim {
  background: linear-gradient(90deg, #FFC107, #FF8F00);
  color: #0a0e18;
}
.back {
  color: #FFC107;
  text-decoration: none;
  font-size: 13px;
  display: inline-block;
  margin-bottom: 12px;
}

/* Admin */
.admin-header {
  background: #FFC107;
  color: #0a0e18;
  padding: 14px;
  text-align: center;
  font-weight: 700;
}
.order-card {
  background: #10182a;
  border: 1px solid #1a2740;
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
}
.order-card.paid { border-color: #00aa00; }
.order-card.proses { border-color: #4dd0e1; }
.status-btn {
  padding: 6px 12px;
  border-radius: 6px;
  border: none;
  font-size: 12px;
  cursor: pointer;
  margin-right: 6px;
  margin-top: 6px;
}
.btn-paid { background: #00aa00; color: white; }
.btn-proses { background: #4dd0e1; color: #0a0e18; }
.btn-unpaid { background: #aa0000; color: white; }
.btn-delete { background: #333; color: #ff6666; }

/* Red Laporan button - like the example */
.action-row {
  display: flex;
  gap: 8px;
  margin: 12px 0 16px;
  align-items: center;
}
.btn-lihat-layanan {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg, #FFC107, #FF8F00);
  color: #0a0e18;
  padding: 10px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
}
.btn-laporan {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: #c62828;
  color: #fff;
  padding: 10px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}
.btn-laporan:hover {
  background: #e53935;
}
.btn-laporan i {
  font-size: 12px;
}

/* Floating Laporan for other pages */
.floating-laporan {
  position: fixed;
  bottom: 90px;
  right: 16px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #c62828;
  color: #fff;
  padding: 10px 16px;
  border-radius: 24px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(198, 40, 40, 0.4);
}
.floating-laporan:hover {
  background: #e53935;
}

/* ========== Custom Animated Modal / Alert ========== */
.site-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.site-modal-overlay.show {
  opacity: 1;
  visibility: visible;
}
.site-modal {
  background: #10182a;
  border: 1px solid #1a2740;
  border-radius: 16px;
  width: 100%;
  max-width: 320px;
  padding: 24px 20px 18px;
  text-align: center;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  transform: scale(0.85) translateY(20px);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.site-modal-overlay.show .site-modal {
  transform: scale(1) translateY(0);
}
.site-modal-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  font-size: 24px;
}
.site-modal-icon.warning {
  background: rgba(198, 40, 40, 0.2);
  color: #ef5350;
  animation: modalIconPulse 0.6s ease;
}
.site-modal-icon.success {
  background: rgba(0, 170, 0, 0.2);
  color: #66bb6a;
  animation: modalIconPulse 0.6s ease;
}
.site-modal-icon.info {
  background: rgba(255, 215, 0, 0.15);
  color: #FFC107;
  animation: modalIconPulse 0.6s ease;
}
@keyframes modalIconPulse {
  0% { transform: scale(0.5); opacity: 0; }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}
.site-modal-title {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}
.site-modal-msg {
  font-size: 13px;
  color: #ccc;
  line-height: 1.5;
  margin-bottom: 18px;
}
.site-modal-btn {
  display: block;
  width: 100%;
  padding: 11px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: linear-gradient(90deg, #FFC107, #FF8F00);
  color: #0a0e18;
  transition: transform 0.15s, opacity 0.15s;
}
.site-modal-btn:active {
  transform: scale(0.97);
}
.site-modal-btn.danger {
  background: linear-gradient(90deg, #e53935, #c62828);
  color: #fff;
}

/* Nailong theme overrides - bottom nav like app screenshot */
.bottom-nav {
  background: #0c1218;
  border-top: 1px solid #1a2740;
  padding: 6px 4px 10px;
  gap: 0;
}
.nav-item {
  flex: 1;
  color: #7a9bb0;
  font-size: 10px;
  padding: 6px 4px;
  border-radius: 16px;
  transition: all 0.2s;
}
.nav-item i { font-size: 18px; margin-bottom: 2px; }
.nav-item.active {
  color: #0a0e18 !important;
  background: linear-gradient(180deg, #FFB300 0%, #FF8F00 40%, #FF6F00 100%);
  box-shadow: 0 0 12px rgba(255, 111, 0, 0.45);
  border-radius: 18px;
  padding: 8px 10px;
  font-weight: 700;
}
.nav-item.active i { color: #0a0e18 !important; }

/* Banner as image */
.banner {
  margin: 12px;
  padding: 0;
  background: none;
  border-radius: 14px;
  overflow: hidden;
  min-height: auto;
  display: block;
}
.banner img.banner-full {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
}
.bann

/* Ikon produk & menu: kuning */
.menu-item,
.menu-item i {
  color: #FF6F00 !important;
}
.menu-item:hover,
.menu-item:active {
  border-color: #FF8F00 !important;
}
.paket-card li i,
.fitur-list li i,
.produk-info small {
  color: #FF6F00 !important;
}
.produk-section h3 {
  color: #FF6F00 !important;
}


/* FULL YELLOW THEME FORCE */
.verified,
.notif-text b,
.harga,
.produk-info .harga,
.addon-price,
.badge,
.brand h1,
.page-title,
.back,
.menu-item,
.menu-item i,
.paket-card li i,
.fitur-list li i,
.qris-box i,
.contact-item i {
  color: #FFC107 !important;
}
.paket-label,
.step,
.nav-item.active,
.btn-pesan,
.btn-buat,
.btn-lihat-layanan,
.btn-kirim,
.site-modal-btn,
.produk-info .btn,
.search-box button,
.btn-pilih,
.antrian-item .num {
  background: linear-gradient(90deg, #FFC107, #FF8F00) !important;
  color: #fff !important;
  border-color: #FF8F00 !important;
}
.nav-item.active {
  background: linear-gradient(180deg, #FFD54F 0%, #FFA000 40%, #FF6F00 100%) !important;
  box-shadow: 0 0 12px rgba(255, 193, 7, 0.5) !important;
  color: #0a0e18 !important;
}
.nav-item.active i {
  color: #0a0e18 !important;
}
.menu-item {
  background: #10182a !important;
  border-color: #1a2740 !important;
}
.menu-item:hover, .menu-item:active {
  border-color: #FFC107 !important;
}


/* Bottom nav 5 item (Joki | Produk Digital | Home | Antrian | Tentang) */
.bottom-nav.nav-5 {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 0;
  padding: 6px 2px calc(6px + env(safe-area-inset-bottom, 0px));
}
.bottom-nav.nav-5 .nav-item {
  flex: 1;
  min-width: 0;
  padding: 6px 2px;
  font-size: 9px;
  gap: 2px;
}
.bottom-nav.nav-5 .nav-item i {
  font-size: 15px;
  margin-bottom: 1px;
}
.bottom-nav.nav-5 .nav-item span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  line-height: 1.15;
}

/* Header account controls (hamburger + profile) */
.header {
  justify-content: space-between;
}
.header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.header-profile {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #FFC107;
  display: none;
  cursor: pointer;
}
.header-profile.show {
  display: block;
}
.btn-hamburger {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid #1a2740;
  background: #10182a;
  color: #FFC107;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.btn-hamburger:active {
  background: #1a2740;
}

/* Account modal */
.akun-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 9999;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 60px 16px 24px;
  overflow-y: auto;
}
.akun-modal-overlay.open {
  display: flex;
}
.akun-modal {
  background: #0d1220;
  border: 1px solid #1a2740;
  border-radius: 16px;
  width: 100%;
  max-width: 380px;
  padding: 20px;
  position: relative;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
.akun-modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: transparent;
  border: none;
  color: #aaa;
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
}
.akun-modal .akun-card {
  background: #10182a;
  border: 1px solid #1a2740;
  border-radius: 16px;
  padding: 20px 16px;
  text-align: center;
  margin-bottom: 12px;
}
.akun-modal .akun-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #FFC107;
  margin-bottom: 12px;
  background: #0a0e18;
}
.akun-modal .akun-avatar.placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #8aa0b8;
}
.akun-modal .akun-name { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.akun-modal .akun-email { font-size: 13px; color: #8aa0b8; margin-bottom: 16px; word-break: break-all; }
.akun-modal .btn-google {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #fff;
  color: #3c4043;
  border: 1px solid #dadce0;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.akun-modal .btn-logout {
  width: 100%;
  background: transparent;
  border: 1px solid #442222;
  color: #ef9a9a;
  border-radius: 12px;
  padding: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 10px;
}
.akun-modal .akun-hint {
  font-size: 12px;
  color: #8aa0b8;
  line-height: 1.5;
  margin-top: 10px;
  text-align: left;
  background: #0a0e18;
  border-radius: 12px;
  padding: 12px;
  border: 1px solid #1a2740;
}
.akun-modal .akun-status {
  display: inline-block;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 6px;
  margin-bottom: 12px;
  font-weight: 600;
}
.akun-modal .akun-status.on { background: #0d3d1a; color: #66bb6a; }
.akun-modal .akun-status.off { background: #3d2e00; color: #FFC107; }


/* Notif marquee bergeser */
.top-notif {
  overflow: hidden;
  position: relative;
  padding: 8px 28px 8px 12px;
}
.notif-marquee-wrap {
  display: flex;
  align-items: center;
  overflow: hidden;
  width: 100%;
  position: relative;
}
.notif-marquee-track {
  display: inline-block;
  white-space: nowrap;
  padding-right: 48px;
  font-size: 12px;
  color: #ddd;
  animation: notif-scroll 28s linear infinite;
}
.notif-marquee-track b,
.notif-marquee-wrap {
  color: #fff;
}
@keyframes notif-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.top-notif .notif-close {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
.antrian-page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}