:root {
  --color-primary: #009999;
  --color-primary-dark: #006b6b;
  --color-accent: #f7c873;
  --color-bg: #f7fdfc;
  --color-card: #ffffffcc;
  --color-header-gradient: linear-gradient(90deg, #009999 10%, #ffd180 100%);
  --color-text: #003c3c;
  --color-shadow: #00999916;
  --max-container: 800px;
  --max-inner: 96vw;
}
html, body {
  max-width: 100vw;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', Arial, sans-serif;
  background-color: var(--color-bg);
  color: var(--color-text);
  min-height: 100vh;
  scrollbar-gutter: stable both-edges;
}
.header-bar {
  height: 22px;
  background: linear-gradient(90deg, #009999 40%, #006b6b 100%);
}
.main-wrapper {
  width: var(--max-inner);
  max-width: 768px;
  margin: 2em auto;
  padding: 1em 1em 2em 1em;
  background: var(--color-card);
  border-radius: 22px;
  box-shadow: 0 4px 24px 0 var(--color-shadow);
}
.top-header {
  background: var(--color-header-gradient);
  border-radius: 16px 16px 22px 22px;
  box-shadow: 0 4px 22px 0 #ffc77833;
  padding: 1.2em 1em 1em 1em;
  text-align: center;
  margin-bottom: 1.5rem;
}
.logo-muwahid {
  width: 60px;
  height: 60px;
  object-fit: contain;
  margin: 0.3em auto 0.6em;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 8px #00999912;
  display: block;
}
.brand-muwahid {
  font-size: 2em;
  font-weight: 900;
  color: #fff;
  letter-spacing: 4px;
  text-transform: uppercase;
  text-shadow: 0 2px 12px #00999944;
}
.tagline-muwahid {
  font-size: 1.05em;
  font-weight: 600;
  color: #156a6a;
  margin-top: 0.3em;
}
.menu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1em;
  margin-top: 2em;
}
.menu-item {
  background: linear-gradient(to right, #e0f2f1, #ffe0b2);
  padding: 1em;
  border-radius: 12px;
  text-align: center;
  font-weight: bold;
  color: #004d40;
  cursor: pointer;
  transition: 0.3s;
  text-decoration: none;
  box-shadow: 0 2px 4px var(--color-shadow);
}
.menu-item:hover {
  background: linear-gradient(to right, #80cbc4, #ffcc80);
  color: white;
}
.note {
  margin-top: 2em;
  text-align: center;
  font-size: 0.95em;
  color: #156a6a;
}
#popupLogin {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(0,0,0,0.6);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 999;
}
.popup-content {
  background: white;
  border-radius: 16px;
  padding: 1.5rem;
  text-align: center;
  width: 90%;
  max-width: 432px !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  animation: fadeInUp 0.4s ease-out;
}
.popup-content h3 {
  color: #006b6b;
  font-size: 1.4em;
  margin-bottom: 0.5em;
}
.popup-content p {
  color: #004d40;
  font-size: 1em;
  line-height: 1.6;
  margin-bottom: 1em;
}
.popup-content button {
  padding: 0.8em 1.5em;
  font-size: 1em;
  font-weight: bold;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  margin: 0.5em 0.4em;
  min-width: 100px;
}
.popup-ok {
  background-color: var(--color-primary);
  color: white;
}
.popup-cancel {
  background-color: #ddd;
  color: black;
}
input[type="email"],
input[type="password"],
input[type="text"],
input[type="number"],
input[type="search"],
input[type="tel"] {
  width: 100%;
  box-sizing: border-box;
  padding: 0.75em;
  font-size: 1em;
  border: 1px solid #b8dbdb;
  border-radius: 8px;
  background: #f4fcfc;
  margin-bottom: 1.1em;
}
.logout-btn {
  display: block;
  margin: 2em auto 0 auto;
  padding: 0.85em 1.5em;
  background: linear-gradient(to right, #ef5350, #ffc107);
  color: white;
  font-size: 1.1em;
  font-weight: bold;
  border: none;
  border-radius: 10px;
  box-shadow: 0 2px 12px #00000020;
  cursor: pointer;
  width: 96%;
  max-width: 360px;
  transition: background 0.3s;
}
.logout-btn:hover {
  background: linear-gradient(to right, #e53935, #ffb300);
}
.footer-menu button,
#gptForm button {
  padding: 0.9em;
  background: linear-gradient(to right, var(--color-primary), var(--color-accent));
  border: none;
  border-radius: 10px;
  color: white;
  font-weight: bold;
  cursor: pointer;
  font-size: 0.95em;
  box-shadow: 0 2px 6px #00999922;
}
#gptForm {
  margin-top: 1em;
  display: flex;
  flex-direction: column;
  gap: 0.8em;
}
#gptForm textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.75em;
  font-size: 1em;
  border: 1px solid #b8dbdb;
  border-radius: 10px;
  background: #f4fcfc;
  resize: vertical;
  min-height: 100px;
}
.response {
  background: #e6fffa;
  padding: 1em;
  border-radius: 10px;
  border: 1px solid #b2dfdb;
  margin-top: 1.5em;
  text-align: center;
  white-space: pre-wrap;
  width: 100%;
  box-sizing: border-box;
}
.judul-persiapan {
  text-align: center;
  font-weight: bold;
  font-size: 1.4em;
  margin-top: 1.2em;
  margin-bottom: 1.8em;
}
.salam {
  text-align: center;
  margin-bottom: 2em;
  font-size: 1em;
  line-height: 1.6em;
}
.subjudul-box {
  border: 1px solid #b8dbdb;
  border-radius: 10px;
  margin-bottom: 1em;
  background: #f9ffff;
}
.subjudul-header {
  background: #e0f7fa;
  padding: 0.8em 1em;
  font-weight: bold;
  cursor: pointer;
  border-bottom: 1px solid #b2ebf2;
}
.subjudul-isi {
  padding: 1em;
  display: none;
}
.subjudul-box.active .subjudul-isi {
  display: block;
}
.footer-menu {
  margin-top: 2.5em;
  text-align: center;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1em;
}
@media (max-width: 480px) {
  .popup-content h3 {
    font-size: 1.2em;
  }
  .popup-content p {
    font-size: 0.95em;
  }
  .popup-content button,
  .footer-menu button {
    display: block;
    width: 100%;
    margin: 0.4em 0;
  }
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
footer {
  text-align: center;
  margin-top: 2rem;
  padding: 1rem 0;
  font-size: 0.9rem;
  color: var(--color-text);
}
footer .copyright {
  font-size: 0.8rem;
  color: #888;
}

/* Tambahan untuk ikon dan struktur tampilan konten persiapan */
.ikon {
  margin-right: 5px;
}
.subjudul {
  font-weight: bold;
  margin-top: 8px;
  cursor: pointer;
}
.isi-teks {
  margin-left: 16px;
  margin-top: 10px;
}
.spasi1 {
  margin-top: 12px;
}
.spasi2 {
  margin-bottom: 24px;
}
.subjudul-isi ul {
  list-style-type: none;
  padding-left: 0;
  margin-left: 0;
}

.subjudul-isi ul li::marker {
  content: none;
}
/* Tambahan untuk Keberangkatan — Tidak Bentrok */
.gpt-label {
  font-weight: bold;
  font-size: 1.1em;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  color: var(--color-text);
}

.readonly-box {
  width: 100%;
  min-height: 140px;
  resize: vertical;
  padding: 0.8em;
  background-color: #f4fcfc;
  color: #004d40;
  border: 1px solid #b8dbdb;
  border-radius: 10px;
  font-family: inherit;
  font-size: 1em;
  box-sizing: border-box;
}
.section-block {
  margin-bottom: 1.8rem;
}

.section-label {
  font-weight: bold;
  margin-bottom: 0.6rem;
}

textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.75em;
  border-radius: 10px;
  border: 1px solid #b8dbdb;
  background: #f4fcfc;
  font-size: 1em;
  resize: vertical;
}

.gpt-form {
  display: flex;
  gap: 0.6em;
  margin-top: 0.8rem;
}

.gpt-form input[type="text"] {
  flex: 1;
  padding: 0.75em;
  font-size: 1em;
  border-radius: 10px;
  border: 1px solid #b8dbdb;
  background: #f4fcfc;
}

.gpt-form button {
  padding: 0.75em 1em;
  background: linear-gradient(to right, #009999, #f7c873);
  color: white;
  font-weight: bold;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 6px #00999922;
}
.section-block {
  margin-top: 1.5em;
}
.section-block textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.75em;
  font-size: 1em;
  border: 1px solid #b8dbdb;
  border-radius: 10px;
  background: #f4fcfc;
  resize: vertical;
  min-height: 100px;
}
.judul-section {
  font-weight: bold;
  margin-bottom: 0.4em;
  color: var(--color-text);
}
/* ===== Promo (umum) ===== */
.promo-page .section-title{
  font-weight:900;
  text-align:center;
  font-size:clamp(1.2rem, 2.2vw, 1.65rem);
  letter-spacing:.3px;
  margin:4px 0 16px;
}

/* Grid: 2 kartu per baris (max 90% di dalam frame) */
.promo-page .airline-wrap{ display:flex; justify-content:center; }
.promo-page .airline-grid{
  width:90%;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px;
}
@media (max-width:680px){
  .promo-page .airline-grid{ grid-template-columns:1fr; }
}

/* Grid promo travel: 3 → 2 → 1 kolom */
.promo-page .travel-grid{
  display:grid; gap:14px;
  grid-template-columns:repeat(3, minmax(0,1fr));
}
@media (max-width:920px){ .promo-page .travel-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:560px){ .promo-page .travel-grid{ grid-template-columns:1fr; } }

/* Kartu dasar + glass strip (tanpa animasi khusus) */
.promo-page .card{
  position:relative; border-radius:16px; overflow:hidden;
  background:linear-gradient(180deg,#f9fffe,#fff);
  border:1px solid #e1f3f2; box-shadow:0 6px 20px rgba(0,0,0,.06);
  cursor:pointer;
}
.promo-page .card .meta{
  position:relative; z-index:2; padding:12px; margin:10px; border-radius:14px;
  background:linear-gradient(90deg, rgba(255,255,255,.38), rgba(255,255,255,.16));
  backdrop-filter:blur(6px) saturate(1.05);
}
.promo-page .card .title{ font-weight:900; color:#003c3c; text-shadow:0 1px 0 rgba(255,255,255,.4); }
.promo-page .card .route,
.promo-page .card .price,
.promo-page .card .perk{ color:#0a2b2b; }
.promo-page .card a{ color:#005a8f; text-decoration:underline; }

/* Footer tombol */
.promo-page .footer-menu{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px; margin-top:28px;
}
.promo-page .footer-menu .btn-link{
  display:block; text-align:center; font-weight:800;
  padding:12px 14px; border-radius:14px; color:#fff; text-decoration:none;
  background:linear-gradient(135deg, var(--color-primary,#009999), var(--color-accent,#f6c36b));
  box-shadow:0 6px 18px #0099991a;
}
.promo-page .footer-menu .btn-link:active{ transform:translateY(1px); }
@media (max-width:560px){ .promo-page .footer-menu{ grid-template-columns:1fr; } }
/* === Footer: jarak antar tombol lebih lega === */
.footer-menu{
  gap: clamp(1.25rem, 4vw, 2.5rem) !important;  /* ≈ 20–40px */
}

/* Halaman promo juga disamakan */
.promo-page .footer-menu{
  gap: clamp(1.25rem, 4vw, 2.5rem) !important;
}

/* Pastikan item footer tidak menambah margin sendiri */
.footer-menu a,
.footer-menu button{
  margin: 0; /* biar jarak murni dari gap grid */
}

/* Opsional: pada layar kecil tombol dibuat 1 kolom & tetap lega */
@media (max-width: 560px){
  .footer-menu{ grid-template-columns: 1fr; gap: 1.25rem; }
  .promo-page .footer-menu{ grid-template-columns: 1fr; gap: 1.25rem; }
}