/* =============== HERO =============== */

.lapor-hero::after{
    content:"";
    position:absolute; inset:0;
    background: linear-gradient(0deg, rgba(0,0,0,.18), rgba(0,0,0,.18));
    pointer-events:none;
    z-index: 0;
}

.lapor-hero__inner{
    position: relative;
    z-index: 1;
    inline-size: min(1280px, 92%);
    margin-inline: auto;
    block-size: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start; 
    gap: .35rem;
    padding-inline: clamp(8px, 2vw, 16px);
}

/* Tipografi pakai Maison Neue, konsisten dg halaman lain */
.lapor-hero__title{
    font-family: "Maison Neue Light", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 600;
    line-height: 1.06;
    color: #fff;
    margin: 0;
    /* ukuran disesuaikan ke desain */
    font-size: clamp(28px, 3.6vw, 56px);
    letter-spacing: .2px;
}

.lapor-hero__crumbs{
    font-family: "Maison Neue Light", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 100;
    color: rgba(255,255,255,.92);
    margin: .15rem 0 0;
    font-size: clamp(8px, 1.05vw, 12px);
}

.lapor-hero__crumbs a{
    color: #fff;
    text-decoration: none;
    opacity: .95;
}
.lapor-hero__crumbs a:hover{ opacity: 1 }

/* Responsif kecil – sedikit naikkan zoom agar komposisi tetap bagus */
@media (max-width: 640px){
    .lapor-hero{
        background-position: center 38%;
        background-size: 100%;
        block-size: clamp(220px, 45vw, 280px);
    }
}

/* Hindari distorsi & bar abu-abu: isi penuh area hero, fokus di tengah */
.lapor-hero{
  background-size: cover !important;          /* isi penuh, tanpa distorsi */
  background-position: center 42% !important; /* pakai titik fokus yang sama */
  background-repeat: no-repeat !important;
  background-color: transparent !important;   /* buang latar abu-abu */
}

/* Jika ada radius dari tempat lain, buang supaya tidak kelihatan “kotak” */
.lapor-hero,
.lapor-hero::before,
.lapor-hero::after{
  border-radius: 0 !important;
}

/* Tuning komposisi di layar kecil (opsional) */
@media (max-width: 640px){
  .lapor-hero{
    background-position: center 38% !important;
  }
  .lapor-hero__inner{
    padding-block-end: 0; 
    padding-block-start: clamp(18px, 8vw, 40px); 
  }
}

@media (min-width: 1300px) {
  .lapor-hero{
    background: none !important;          /* hilangkan bg full-bleed */
    position: relative;
    overflow: visible;                     /* tidak memotong pseudo */
  }
  /* gambar dibatasi lebar container dan dipusatkan */
  .lapor-hero::before{
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    width: min(clamp(320px,92vw,1200px), 102%); /* samakan dgn section lain */
    background: url("/images/lapor/hero.png") center 42% / cover no-repeat;
    z-index: 0;                             /* di belakang teks */
  }
  /* overlay/gelapnya mengikuti lebar gambar juga */
  .lapor-hero::after{
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    width: min(var(--container-max, 1280px), 92%);
    background: linear-gradient(0deg, rgba(0,0,0,.18), rgba(0,0,0,.18));
    pointer-events: none;
    z-index: 0;
  }

  /* pastikan isi (judul & breadcrumbs) berada di atas */
  .lapor-hero__inner{ 
    position: relative; 
    z-index: 1; 
    padding-inline-start: clamp(28px, 3.6vw, 72px);
  }
}

/* =============== SECTION + BG GABUNGAN DI BELAKANG FORM =============== */
.lapor-section{
  position: relative;
  padding: clamp(26px, 4vw, 48px) 0 clamp(48px, 7vw, 72px);
  background:
    radial-gradient(1200px 400px at 80% 30%, rgba(255,0,0,.0), rgba(255,0,0,0)),
    linear-gradient(#fff, #fff);
}
.lapor-wrap{
  width: min(1100px, 94%);
  margin-inline: auto;
  position: relative;
}

/* BG gabungan diletakkan lewat ::before di container wrap agar DIA di belakang form */
.lapor-wrap::before{
  content:"";
  position:absolute;
  z-index:0;        /* di bawah form card */
  pointer-events:none;
  /* letak & ukuran background gabungan */
  right: -8px;              /* geser kanan */
  top:  -40px;              /* geser ke atas */
  width: clamp(480px, 46vw, 620px);
  aspect-ratio: 1 / 1;      /* biar proporsional, bisa diubah sesuai file */
  background: url("../images/lapor/bg-combined.png") no-repeat right top / contain;
  opacity: 1;
  /* soft glow */
  filter: drop-shadow(0 14px 44px rgba(0,0,0,.12));
}

/* FORM CARD */
.lapor-formcard{
  position: relative;
  z-index: 1;         /* di atas background */
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,.08);
  padding: clamp(16px, 2.2vw, 22px);
}
.lapor-heading{
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  line-height: 1.45;
  font-weight: 700;
  color: #222;
  margin: 6px 6px 18px;
}
.lapor-form{
  display:grid; gap: 12px;
}
.lapor-input,
.lapor-textarea{
  font-family: "Maison Neue Light", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  width:100%;
  border:1px solid #E5E7EB;
  background:#fff;
  border-radius: 10px;
  padding: 12px 14px;
  font: inherit;
  color:#111;
  outline:none;
}
.lapor-input:focus,
.lapor-textarea:focus{
  border-color:#2DD24C; box-shadow:0 0 0 4px rgba(45,210,76,.12);
}

/* upload */
.lapor-upload{
  position:relative; display:flex; align-items:center; gap:12px;
  border:2px dashed #D9DEE6; background:#F1FAF5;
  border-radius:14px; padding: 20px 16px;
}
.lapor-upload__icon{ font-size:20px; line-height:1 }
.lapor-upload__text{ color:#2E3A44; font-size:.95rem }
.lapor-upload__text a{ color:#2DD24C; text-decoration:none; font-weight:700 }
.lapor-upload__input{
  position:absolute; inset:0; opacity:0; cursor:pointer;
}

/* Button + shine */
.lapor-btn{
  --btn-bg:#F03A2E;
  --btn-bg-hover:#DB2F23;
  --btn-ink:#fff;
  position:relative; overflow:hidden; isolation:isolate;
  border:0; border-radius: 16px; cursor:pointer;
  padding: 16px 26px;
  font-weight: 800; letter-spacing:.02em;
  color: var(--btn-ink); background: var(--btn-bg);
  display:inline-flex; align-items:center; justify-content:center;
  transition: transform .18s ease, filter .25s ease, background .2s ease;
}
.lapor-btn:hover{ transform: translateY(-1px); background: var(--btn-bg-hover) }

/* Shine */
.lapor-btn--shine .lapor-btn__shine{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background: linear-gradient(125deg, transparent 18%, rgba(255,255,255,.6) 23%, rgba(255,255,255,.14) 30%, transparent 36%);
  transform: translateX(-120%) skewX(-18deg);
}
.lapor-btn--shine:hover .lapor-btn__shine{
  animation: laporShine .95s ease forwards;
}
@keyframes laporShine{
  to{ transform: translateX(120%) skewX(-18deg) }
}

/* =============== RESPONSIVE TWEAKS =============== */
@media (max-width: 1024px){
  .lapor-wrap::before{
    right: -12px; top: -20px;
    width: clamp(360px, 52vw, 520px);
  }
}

@media (max-width: 768px){
  .lapor-hero__img{ transform: scale(1.22) } /* sedikit lebih zoom di mobile */
  .lapor-wrap::before{
    position:absolute;
    right: -30px; top: -12px;
    width: min(82vw, 520px);
    opacity:.95;
  }
  .lapor-formcard{
    padding: 16px 12px;
  }
}

/* ====== LAPOR: Judul 2 baris di luar kartu ====== */
.lapor-head{
  /* ukuran area dan alignment */
  inline-size: min(1080px, 92%);
  margin-inline: auto;
  margin-block: clamp(12px, 2.2vw, 20px) clamp(16px, 3vw, 28px);

  /* tipografi konsisten */
  font-family: "Maison Neue", "Maison Neue Light", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 400;
  color: #202020;
  line-height: 1.18;
  letter-spacing: .005em;
  text-align: center;

  /* skala responsif */
  font-size: clamp(18px, 2.2vw, 32px);
}

.lapor-head__line{ display:block; }

.lapor-head strong{
  font-weight: 800;               /* menonjolkan Hati & Nurani */
}

/* Geser sedikit ke kanan pada layar lebar, sesuai permintaan sebelumnya */
@media (min-width: 1300px){
  .lapor-head{ padding-inline-start: clamp(56px, 4.8vw, 96px); }
}

/* Pada layar kecil, rapikan jarak atas agar tidak terlalu mepet hero */
@media (max-width: 640px){
  .lapor-head{ margin-block-start: clamp(8px, 3vw, 14px); }
}

/* Jika di template Anda masih ada judul di dalam kartu form, sembunyikan */
.lapor-card > h1,
.lapor-card > h2,
.lapor-card > h3,
.lapor-card .form-title{
  display: none !important;
}

/* Warna dasar abu-abu untuk semua kata pada judul */
.lapor-head{
  inline-size: min(1080px, 92%);
  margin-inline: auto;
  margin-block: clamp(12px, 2.2vw, 20px) clamp(16px, 3vw, 28px);
  font-family: "Maison Neue Light", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 100;
  color: #8a8f96;                 /* abu-abu default */
  line-height: 1.18;
  letter-spacing: .005em;
  text-align: center;
  font-size: clamp(18px, 2.2vw, 32px);
}
.lapor-head__line{ display:block; }

/* Hanya kata “Mendengar” dan “Nurani” yang hitam */
.lapor-head .is-dark{
  color: #0f0f0f;                  /* hitam */
  font-weight: 400;                /* biar lebih tegas */
}

/* Sedikit geser ke kanan di layar lebar, sesuai set sebelumnya */
@media (min-width: 1300px){
  .lapor-head{ padding-inline-start: clamp(64px, 5.2vw, 112px); }
}

/* Rapikan jarak atas pada layar kecil */
@media (max-width: 640px){
  .lapor-head{ margin-block-start: clamp(6px, 2.6vw, 12px); }
}

/* === LAPOR – Form lebih ramping (match area judul) === */
.lapor-wrap{
  /* lebih kecil dari sebelumnya; sedikit lebih lebar dari area judul */
  inline-size: clamp(500px, 48vw, 800px);
  margin-inline: auto !important; 
  justify-self: center;
  align-self: start;
}

.lapor-section,
.lapor-section .container,
.lapor-form,
.lapor-form-row{
  display: grid;                       /* tidak mengganggu layout karena 1 kolom */
}

.lapor-section .lapor-wrap,
.lapor-section .container > .lapor-wrap,
.lapor-form > .lapor-wrap,
.lapor-form-row > .lapor-wrap{
  justify-self: center;                /* center horizontal */
}

/* Layar lebar: tetap center & ramping */
@media (min-width: 1440px){
  .lapor-wrap{ inline-size: 680px; }
}

/* Mobile */
@media (max-width: 640px){
  .lapor-wrap{ inline-size: 92%; }
}

.lapor-head{
  /* batalkan offset sebelumnya */
  padding-inline-start: 0 !important;

  /* center & batas lebar agar proporsional */
  margin-inline: auto;
  text-align: center;
  max-width: clamp(38ch, 70%, 68ch);
  margin-block: clamp(10px, 2.5vw, 20px) clamp(16px, 3.5vw, 28px);
}

@media (max-width: 640px){
  .lapor-head__line{
    font-size: clamp(18px, 6vw, 24px);
  }
}

/* ==== Lapor: upload box ==== */
.lapor-upload{
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 18px);

  padding: clamp(14px, 2.2vw, 22px) clamp(18px, 3vw, 28px);
  min-height: clamp(88px, 10vw, 120px);

  border: 2px dashed #CFD9D3;
  border-radius: 18px;
  background: #F1FBF6;

  cursor: pointer;
  user-select: none;
}

/* ikon paperclip (gunakan svg sendiri agar konsisten) */
.lapor-upload__icon{
  width: clamp(20px, 2.2vw, 26px);
  height: clamp(20px, 2.2vw, 26px);
  flex: 0 0 auto;
  background: url("/images/icons/paperclip.svg") center / contain no-repeat;
  opacity: .95;
}

/* teks */
.lapor-upload__text{
  font-family: "Maison Neue", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: clamp(14px, 1.15vw, 18px);
  line-height: 1.35;
  color: #2F3437;
}

/* link "browse" berwarna hijau aksen */
.lapor-upload__text .lapor-upload__browse,
.lapor-upload__text a{
  font-weight: 700;
  text-decoration: none;
}
.lapor-upload__text .lapor-upload__browse:hover,
.lapor-upload__text a:hover{
  text-decoration: underline;
}

/* input menutupi area untuk menangkap klik, tapi invisible */
.lapor-upload__input{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* efek saat drag di atas area */
.lapor-upload.is-dragover{
  background: #EAF8F1;
  border-color: #A7D9BE;
  box-shadow: inset 0 0 0 2px #E3F3EB;
}

/* daftar file (opsional) */
.lapor-upload__list{
  margin: .65rem 0 0;
  padding-left: 1rem;
  font: 500 clamp(12px, 1vw, 14px)/1.35 "Maison Neue", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: #40454A;
}
.lapor-upload__list li{ margin: .15rem 0; }

/* ====== Lapor Upload – ROW LAYOUT ====== */
/* ganti path ikon kalau perlu */
.lapor-upload{ --upload-icon: url("/images/icons/upload.svg"); }

.lapor-upload{
  background: #EAF7FF;          /* biru muda */
  border: 2px dashed #C9E2F3;
  min-height: clamp(130px, 18vw, 200px);
  padding: clamp(18px, 3vw, 28px);

  /* >>> ikon & teks sebaris dan dipusatkan <<< */
  display: flex;
  flex-direction: row;
  align-items: center;           /* vertikal center */
  justify-content: center;       /* horizontal center sebagai satu grup */
  gap: clamp(12px, 2vw, 18px);
  text-align: left;              /* teks normal (bukan center) */
}

.lapor-upload__icon{
  width: clamp(28px, 3vw, 40px);
  height: clamp(28px, 3vw, 40px);
  flex: 0 0 auto;
  background: var(--upload-icon) center / contain no-repeat;
  font-size: 0;                  /* sembunyikan emoji fallback */
  opacity: .95;
}

.lapor-upload__text{
  font-family: "Maison Neue", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: clamp(14px, 1.1vw, 18px);
  line-height: 1.4;
  color: #2F3437;
}

.lapor-upload__text a{
  color: #E53935;                /* merah untuk "browse" */
  font-weight: 700;
  text-decoration: none;
}
.lapor-upload__text a:hover{ text-decoration: underline; }

/* feedback saat drag */
.lapor-upload.is-dragover{
  background: #DFF0FF;
  border-color: #9DCCEC;
}

/* === LAPOR – Form lebih ramping lagi === */
.lapor-wrap{
  /* lebih kecil: kira-kira selebar judul + sedikit ekstra */
  inline-size: clamp(420px, 40vw, 700px);
  margin-inline: auto;
}

/* layar lebar: tetap ramping */
@media (min-width: 1440px){
  .lapor-wrap{ inline-size: 620px; }
}

/* mobile */
@media (max-width: 640px){
  .lapor-wrap{ inline-size: 92%; }
}

/* ukuran tombol (tinggi & lebar) biar mudah diatur */
:root{
  --lapor-btn-h: clamp(48px, 7vw, 72px);
  --lapor-btn-w: clamp(240px, 42%, 560px);
}

/* kartu form jadi anchor & sediakan ruang di bawah utk overlap */
.lapor-formcard{
  position: relative;
  overflow: visible; /* penting: jangan terpotong */
  padding-bottom: calc(var(--lapor-btn-h) / 2 + 16px);
}

/* tombol default */
.lapor-btn.lapor-btn--red{
  width: var(--lapor-btn-w);
  height: var(--lapor-btn-h);
  border-radius: 9999px; /* lebih bulat (pill) */
}

/* tombol overlap: separuh keluar dari kartu */
.lapor-form .lapor-btn.lapor-btn--red{
  position: absolute;
  left: 50%;
  bottom: calc(-1 * var(--lapor-btn-h) / 2);
  transform: translateX(-50%);
  z-index: 3;
}

/* jaga-jaga kalau ada parent yang memotong */
.lapor-wrap{ overflow: visible; }

/* Mobile: kembalikan ke alur normal (tanpa overlap) */
@media (max-width: 640px){
  .lapor-formcard{ padding-bottom: 0; }
  .lapor-form .lapor-btn.lapor-btn--red{
    position: static;
    transform: none;
    width: 100%;
    height: clamp(44px, 12vw, 56px);
    margin-top: 12px;
  }
}

/* Kecilkan tinggi tombol overlap */
:root{
  /* sebelumnya ~72px, sekarang lebih ramping */
  --lapor-btn-h: clamp(40px, 5.2vw, 56px);
  /* kalau mau sekalian agak menyempit, boleh turunkan lebar juga: */
  /* --lapor-btn-w: clamp(220px, 38%, 520px); */
}

/* pastikan teks tetap center rapi pada tinggi baru */
.lapor-btn.lapor-btn--red{
  line-height: 1;               /* hindari tinggi teks ikut membesar */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

/* Panjangkan lebar tombol overlap */
:root{
  /* lebar tombol lebih panjang dari sebelumnya */
  --lapor-btn-w: clamp(160px, 24vw, 320px); /* silakan sesuaikan angka tengah (vw) bila perlu */
}

/* pastikan aturan width-nya terpakai */
.lapor-btn.lapor-btn--red{
  width: var(--lapor-btn-w);
  margin-inline: auto; /* tetap center */
}

/* --- mobile: dorong lebih ke bawah agar tidak terlalu "naik" --- */
@media (max-width: 640px){
  .lapor-formcard{
    padding-bottom: clamp(42px, 9vw, 56px);
  }
}

/* Desktop besar – dorong jauh ke kanan */
.lapor-wrap::before{
  right: -240px !important;   /* sebelumnya -120 / -40 */
  top:   -88px !important;
  width: clamp(1100px, 125%, 1600px) !important;
}

/* ≤1200px */
@media (max-width: 1200px){
  .lapor-wrap::before{
    right: -195px !important;  /* sebelumnya -96 / -24 */
    top:   -64px !important;
    width: clamp(950px, 112%, 1350px) !important;
  }
}

/* ≤992px */
@media (max-width: 992px){
  .lapor-wrap::before{
    right: -140px !important;  /* sebelumnya -72 / -16 */
    top:   -48px !important;
    width: clamp(780px, 108%, 1180px) !important;
  }
}

/* >= 1300px: perbesar & dorong lebih ke kanan */
@media (min-width: 1500px){
  .lapor-wrap::before{
    right: -240px !important;
    top:   -100px !important;
    width: clamp(1200px, 110%, 1600px) !important;
  }
}

/* Mobile: sembunyikan dekor background */
@media (max-width: 640px){
  .lapor-wrap::before{
    content: none !important;     /* matikan pseudo-element */
    background: none !important;  /* fallback */
    width: 0 !important;          /* fallback */
    height: 0 !important;         /* fallback */
  }
}

.lapor-upload__row{ display:flex; align-items:center; gap:.65rem; }
.lapor-upload__files{
  margin-top: clamp(8px, 1.2vw, 14px);
  display:flex; flex-wrap:wrap; gap: clamp(6px, .9vw, 10px);
}
.lapor-upload__chip{
  background:#fff;
  border:1px dashed #cfdde8;
  border-radius:999px;
  padding:.35rem .7rem;
  font-size:clamp(12px, 1vw, 14px);
  line-height:1;
  max-width:100%;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

#laporDropzone .dz-preview { position: relative; }

#laporDropzone .lapor-dz-x {
  position: absolute; top: -8px; right: -8px;
  width: 28px; height: 28px; border-radius: 999px;
  background: #ef4444; border: 2px solid #fff; color: #fff;
  display: flex; align-items: center; justify-content: center;
  z-index: 20; cursor: pointer; font-size: 0; pointer-events: auto;
  box-shadow: 0 2px 8px rgba(0,0,0,.18); text-decoration: none;
}
#laporDropzone .lapor-dz-x::after { content: 'X'; font-size: 16px; font-weight: 700; }
#laporDropzone .lapor-dz-x:hover { filter: brightness(.95); }
#laporDropzone .lapor-dz-x:active { transform: scale(.96); }

/* posisi relatif untuk overlay */
#laporDropzone .dz-preview { position: relative; }

/* overlay meta (nama & size) */
#laporDropzone .lapor-dz-meta {
  position: absolute;
  left: 8px; right: 8px; bottom: 8px;
  display: flex; gap: 6px; justify-content: center;
  padding: 4px 8px;
  background: rgba(0,0,0,.55);   /* gelap agar teks terbaca */
  color: #fff;
  border-radius: 6px;
  font-size: 12px; line-height: 1.2;
  opacity: 1;                     /* muncul saat hover */
  z-index: 30;
  transition: opacity .18s ease;
  pointer-events: none;           /* tidak ganggu klik */
}

#laporDropzone .dz-preview:hover .lapor-dz-meta { opacity: 1; }

/* rapikan teks & potong jika panjang */
#laporDropzone .lapor-dz-name,
#laporDropzone .lapor-dz-size {
  max-width: 48%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#laporDropzone .lapor-dz-dot { opacity: 1; }

.dz-success-mark {
	background-color: rgb(102, 187, 106, 0.8) !important;
}

.dz-success-mark svg {
	font-size: 54px;
	fill: #fff !important;
}

.dz-error-mark {
	background-color: rgba(239, 83, 80, 0.8) !important;
}

.dz-error-mark svg {
	font-size: 54px;
	fill: #fff !important;
}

@media (hover: none) {
  #laporDropzone .lapor-dz-meta { opacity: 1; }
}

/* pastikan overlay tanda ✔/✖ di bawah meta */
#laporDropzone .dz-success-mark,
#laporDropzone .dz-error-mark { z-index: 15; }

/* rapikan teks & potong jika panjang */
#laporDropzone .lapor-dz-name,
#laporDropzone .lapor-dz-size {
  max-width: 48%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#laporDropzone .lapor-dz-dot { opacity: .9; }