/* =========================================================
   RESPONSIVE — Cirebon Mask Festival 2026
   Pasang PALING TERAKHIR di <head>, setelah tema-maroon.css:
   <link rel="stylesheet" href="responsive.css">

   Tampilan laptop/desktop (> 1024px) TIDAK diubah.
   Yang diatur: tablet (≤ 1024px), HP (≤ 768px), HP kecil (≤ 400px).
   ========================================================= */

/* Batalkan aturan lama "hero 900px" di HP tegak (bikin ruang kosong) */
@media (orientation: portrait) {
  .hero { min-height: 100svh; }
}

/* Gambar tidak pernah lebih lebar dari layar */
img { max-width: 100%; }

/* ---------- Teks kontak di hero (pakai HTML baru) ---------- */
.hero-description {
  max-width: 620px;
  margin: 18px auto 28px;
  font-size: 13px;
  line-height: 1.8;
  color: rgba(255, 255, 255, .88);
}
.hero-contact { white-space: nowrap; }
.hero-contact-sep { margin: 0 8px; opacity: .6; }


/* =========================================================
   TABLET (≤ 1024px)
   ========================================================= */
@media (max-width: 1024px) {

  .hero { min-height: 100svh; }

  /* Intro jadi 1 kolom: judul di atas, isi di bawah */
  .intro-grid {
    grid-template-columns: 1fr;
    row-gap: 28px;
  }
  .intro-grid > .intro-heading {
    order: -1;                 /* judul About & Time selalu di atas */
    padding-left: 0;
  }
  .intro-grid > div:last-child { transform: none; }

  /* Mega mendung hero dikecilkan supaya tidak menutupi judul */
  .floating-mascot { width: 180px; }
}


/* =========================================================
   HP (≤ 768px)
   ========================================================= */
@media (max-width: 768px) {

  .container { width: min(100% - 36px, 1120px); }
  .section { padding: 64px 0; }

  /* ---------- Tombol menu & bar logo ---------- */
  .sidebar-toggle {
    top: 14px;
    left: 12px;
    width: 42px;
    height: 42px;
    font-size: 21px;
  }

  .hero .hero-topbar {
    top: 10px;
    gap: 12px;
    padding: 6px 14px;
    border-radius: 16px;
    max-width: calc(100vw - 132px);   /* tidak menabrak tombol menu */
  }
  .hero .hero-topbar > img,
  .hero .hero-topbar .hero-logo {
    height: 38px;
    width: auto;
    max-width: none;
    transform: none;                  /* matikan scale(3) khusus di HP */
  }
  .hero .hero-topbar .hero-logo { height: 46px; }   /* logo tengah sedikit lebih besar */

  /* ---------- Hero ---------- */
  .hero {
    padding: 96px 18px 48px;
    min-height: 100svh;
  }
  .hero-content { width: 100%; }

  .eyebrow { font-size: 11px; padding: 8px 16px; }

  .hero h1 {
    margin-top: 18px;
    font-size: clamp(38px, 11vw, 58px);
    line-height: .95;
    letter-spacing: -1px;
  }

  .hero-subtitle {
    margin-top: 16px;
    font-size: 11px;
    letter-spacing: 1.5px;
    line-height: 1.6;
  }

  .hero-description { font-size: 13px; line-height: 1.7; margin: 14px auto 24px; }
  .hero-contact { display: block; }        /* email, IG, telp: satu per baris */
  .hero-contact-sep { display: none; }

  .hero-buttons { width: 100%; max-width: 280px; }
  .btn {
    min-height: 46px;                      /* mudah disentuh jari */
    font-size: 13px;
    padding: 12px 20px;
  }

  /* Mega mendung: kecil, di pojok, agak transparan */
  .floating-mascot { width: 92px; opacity: .85; }
  .mascot-left        { left: -22px;  bottom: 4%; }
  .mascot-right       { right: -22px; top: 15%; }
  .mascot-left-top    { left: -22px;  top: 12%; }
  .mascot-right-bottom{ right: -22px; bottom: 4%; }

  /* ---------- Countdown ---------- */
  .hero-content .countdown {
    margin-top: 28px;
    padding: 18px 14px;
    gap: 14px;
    border-radius: 14px;
  }
  .countdown-info { gap: 12px; }
  .countdown-h { font-size: 15px; padding: 6px 12px; }
  .hero-content .countdown h3 { font-size: 15px; }
  .hero-content .countdown p { font-size: 12px; }
  .countdown-box { padding: 12px 4px; }
  .countdown-box strong { font-size: 26px; }
  .countdown-box span { font-size: 11px; }

  /* ---------- Judul & label section ---------- */
  .section-label { font-size: 10px; letter-spacing: 1.2px; }
  .section-heading { margin-bottom: 32px; }
  .section-heading h2,
  .intro h2 { font-size: clamp(34px, 10vw, 46px); line-height: 1; }
  .section-heading p { font-size: 14px; }

  /* ---------- Intro (Welcome, About, Vision, Time) ---------- */
  .intro-with-mask {
    flex-direction: column;
    align-items: stretch;
    gap: 22px;
  }
  .mask-figure { order: -1; width: 160px; margin: 0 auto; }   /* topeng selalu di atas teks */
    .intro-text p {
    font-size: 14px;
    line-height: 1.8;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
  }
  .intro-text.location-info p { font-size: 16px; font-weight: 600; }
  .location-map-preview { max-width: 100%; height: 190px; }

  /* ---------- Explore the Festival ---------- */
  .info-grid { grid-template-columns: 1fr; gap: 18px; }
  .info-slides img { height: 210px; }
  .info-card-body { padding: 20px; }
  .info-card-body h3 { font-size: 21px; }
    .info-card-body p { font-size: 13.5px; text-align: justify; text-justify: inter-word; hyphens: auto; }

  /* ---------- Series of Events ---------- */
  .timeline-card h3 { font-size: 22px; }
  .timeline-tag,
  .important-badge,
  .dress-code-content small { font-size: 10px; }
  .dress-code-row b { font-size: 13px; }
  .dc-detail-btn { font-size: 11px; padding: 9px 14px; }

  /* ---------- Lineup ---------- */
  .lineup-box { margin-top: 24px; border-radius: 22px; }

  /* ---------- Invitation & Social ---------- */
  .media-guide-card > p,
  .social-desc { font-size: 14px; }
  .media-guide-card .download-btn,
  .social-btn { min-height: 44px; font-size: 13px; }
  .check-grid { grid-template-columns: 1fr; gap: 16px; }
  .check-card { padding: 22px; }

  /* ---------- Partner ---------- */
  .partner-board { padding: 48px 16px 52px; border-radius: 22px; }
  .partner-title { font-size: 11px; letter-spacing: 2px; }

  /* ---------- Footer ---------- */
  .site-footer { padding-top: 36px; }
  .site-footer-bottom p { line-height: 1.7; }

  /* ---------- Back to top: jadi tombol bulat kecil ---------- */
  .back-to-top {
    right: 14px;
    bottom: 14px;
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 50%;
  }
  .back-to-top span:not(.back-icon) { display: none; }
}


/* =========================================================
   HP KECIL (≤ 400px) — mis. iPhone SE, Android lama
   ========================================================= */
@media (max-width: 400px) {

  .hero .hero-topbar { gap: 8px; padding: 5px 10px; }
  .hero .hero-topbar > img { height: 30px; }
  .hero .hero-topbar .hero-logo { height: 38px; }

  .hero h1 { font-size: 36px; }

  .countdown-grid { gap: 6px; }
  .countdown-box strong { font-size: 22px; }
  .countdown-box span { font-size: 10px; }

  .floating-mascot { width: 76px; }
}


/* =========================================================
   HP MIRING (landscape) — hero tidak dipaksa setinggi layar
   ========================================================= */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { min-height: auto; padding-top: 90px; }
}


/* =========================================================
   EXPLORE THE FESTIVAL: 2 KOLOM JUGA DI HP
   ========================================================= */
@media (max-width: 768px) {
  #persiapan .container { width: calc(100% - 24px); }

  .info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .info-card { border-radius: 16px; }
  .info-slides img { height: 130px; }

  .info-card-body { padding: 12px 12px 14px; }
  .info-card-body h3 { font-size: 14px; line-height: 1.25; margin: 0 0 6px; }
  .info-card-body p { font-size: 11px; line-height: 1.6; text-align: left; }

  .slide-btn { width: 26px; height: 26px; font-size: 16px; }
  .slide-btn.prev { left: 6px; }
  .slide-btn.next { right: 6px; }
  .slide-dots { bottom: 8px; gap: 5px; }
  .slide-dot { width: 6px; height: 6px; }
  .slide-dot.active { width: 14px; }
}

@media (max-width: 400px) {
  .info-grid { gap: 10px; }
  .info-slides img { height: 110px; }
  .info-card-body h3 { font-size: 13px; }
  .info-card-body p { font-size: 10.5px; }
}


/* =========================================================
   ANTI MELEBAR / MIRING — semua ukuran HP
   ========================================================= */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}

.hero { grid-template-columns: minmax(0, 1fr); }
.hero-content {
  width: 100%;
  max-width: 900px;
  min-width: 0;
}

@media (max-width: 768px) {
  .hero { padding-left: 16px; padding-right: 16px; }

  .hero h1 { font-size: clamp(32px, 10.5vw, 58px); }
  .hero-subtitle { font-size: clamp(9px, 2.8vw, 11px); letter-spacing: 1px; }
  .hero-description { font-size: clamp(12px, 3.5vw, 14px); overflow-wrap: anywhere; }
  .hero-contact { white-space: normal; }

  .hero-content .countdown {
    width: 100%;
    max-width: 100%;
    padding: 16px 12px;
  }
  .countdown-info,
  .countdown-info > div { min-width: 0; }
  .countdown-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
  }
  .countdown-box { min-width: 0; padding: 10px 2px; }
  .countdown-box strong { font-size: clamp(20px, 6.5vw, 28px); }
  .countdown-box span   { font-size: clamp(9px, 2.8vw, 11px); }
  .hero-content .countdown h3 { font-size: clamp(13px, 4vw, 16px); }
  .hero-content .countdown p  { font-size: clamp(11px, 3.2vw, 12px); }

  .floating-mascot { max-width: 25vw; }
}
/* =========================================================
   FOTO BALAI KOTA: SELALU FULL MENUTUPI HERO
   (iPad, tablet, HP, laptop kecil, semua posisi layar)
   ========================================================= */
@media (max-width: 1366px), (orientation: portrait) {
  .hero-mask {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(1600px, 200vw);
    height: auto;
    opacity: 0.18;
    object-fit: contain;
}
}

@media (max-width: 768px) {
  .hero .hero-mask {
    object-position: center 35%;
  }
}
/* =========================================================
   BAR LOGO HP: LOGO TENGAH DIPERBESAR (sama seperti undangan)
   Bar tetap pendek karena margin negatif
   ========================================================= */
@media (max-width: 768px) {
  .hero .hero-topbar {
    gap: 1px;
  }
  .hero .hero-topbar .hero-logo {
    height: 100px;            /* ukuran logo tengah, atur sesuai selera */
    margin: -28px -4px;      /* atas-bawah: bar tidak ikut tinggi */
    flex-shrink: 0;          /* logo tengah tidak ikut mengecil */
  }
}

@media (max-width: 400px) {
  .hero .hero-topbar .hero-logo {
    height: 84px;
    margin: -24px -4px;
  }
}
/* ===== BAR LOGO: LOGO KIRI (CMF) DIPERBESAR ===== */
.hero .hero-topbar > img:first-child {
  height: 100px;          /* ukuran logo kiri di laptop, atur sesuai selera */
  margin: -15px 0;        /* bar tidak ikut tinggi */
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .hero .hero-topbar > img:first-child {
    height: 60px;         /* ukuran logo kiri di HP */
    margin: -9px 0;
  }
}

@media (max-width: 400px) {
  .hero .hero-topbar > img:first-child {
    height: 48px;
    margin: -5px 0;
  }
}
/* ===== BAR LOGO: LOGO KANAN (IMF) DIPERBESAR ===== */
.hero .hero-topbar > img:last-child {
  height: 60px;           /* ukuran logo kanan di laptop (sebelumnya 50px) */
  margin: -10px 0;        /* bar tidak ikut tinggi */
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .hero .hero-topbar > img:last-child {
    height: 25px;         /* ukuran logo kanan di HP (sebelumnya 38px) */
    margin: -6px 0;
  }
}

@media (max-width: 400px) {
  .hero .hero-topbar > img:last-child {
    height: 25px;
    margin: -4px 0;
  }
}
/* ===== BAR LOGO HP: JARAK ANTAR LOGO DIRAPATKAN ===== */
@media (max-width: 768px) {
  .hero .hero-topbar {
    gap: 1px;                 /* jarak antar logo */
    padding: 6px 12px;
  }

  /* Logo tengah: buang ruang kosong kiri-kanan gambar */
  .hero .hero-topbar .hero-logo {
    margin: -30px -22px;      /* angka kedua = rapat kiri-kanan */
  }

  /* Logo kiri & kanan: sedikit dirapatkan ke tengah */
  .hero .hero-topbar > img:first-child {
    margin: -9px -2px -9px 0;
  }
  .hero .hero-topbar > img:last-child {
    margin: -6px 0 -6px -2px;
  }
}

@media (max-width: 400px) {
  .hero .hero-topbar .hero-logo {
    margin: -24px -10px;
  }
}
/* =========================================================
   FIX BACKGROUND HERO: FULL SCREEN DI SEMUA UKURAN LAPTOP
   ========================================================= */

.hero {
    position: relative;
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
}

.hero .hero-mask {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    transform: none;
    object-fit: cover;
    object-position: center 40%;
    pointer-events: none;
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 5;
}