/* Portofolio Airdrop Finder v3 — gaya mengikuti web airdropfinder.com (hasil bedah ✓)
   Terang · Poppins · biru #077BF4 + oranye #FF611D · sudut membulat · bayangan lembut */
:root{
  --biru:#077BF4; --biru-tua:#0457B5; --biru-muda:#EAF3FF; --biru-muda2:#D9EAFF;
  --oranye:#FF611D; --oranye-muda:#FDECCF; --navy:#03305F;
  --teks:#0F172A; --redup:#64748B; --samar:#94A3B8;
  --garis:#E4EDF9; --putih:#fff;
  --r12:12px; --r16:16px; --r20:20px; --r24:24px;
  --bayang:0 10px 30px -12px rgba(15,23,42,.12);
  --bayang-biru:0 18px 40px -18px rgba(7,123,244,.55);
  --font:"Poppins",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--putih);color:var(--teks);font:16px/1.65 var(--font);overflow-x:hidden}
.wadah{max-width:1180px;margin:0 auto;padding:0 24px}
h1,h2,h3{line-height:1.14;font-weight:800;letter-spacing:-.02em}
h2{font-size:clamp(26px,3.6vw,40px)}
a{color:inherit}

/* PIL / LENCANA */
.pil{display:inline-block;font-size:12.5px;font-weight:600;padding:7px 15px;border-radius:99px;margin-bottom:18px}
.pil-biru{background:var(--biru-muda);color:var(--biru-tua)}
.pil-oranye{background:var(--oranye-muda);color:#8A5906}
.pil-putih{background:rgba(255,255,255,.22);color:#fff}

/* TOMBOL */
.tombol{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 26px;
  border-radius:var(--r12);font-weight:600;font-size:15px;text-decoration:none;border:1.6px solid transparent;
  transition:.18s;min-height:50px}
.tombol-biru{background:var(--biru);color:#fff;box-shadow:var(--bayang-biru)}
.tombol-biru:hover{background:var(--biru-tua);transform:translateY(-2px)}
.tombol-garis{border-color:var(--biru);color:var(--biru);background:#fff}
.tombol-garis:hover{background:var(--biru-muda)}
.tombol-putih{background:#fff;color:var(--biru-tua)}
.tombol-putih:hover{transform:translateY(-2px)}
.tombol-garis-putih{border-color:rgba(255,255,255,.7);color:#fff}
.tombol-garis-putih:hover{background:rgba(255,255,255,.14)}
.tombol.kecil{padding:11px 20px;min-height:44px;font-size:14.5px}
.panah{font-weight:700}

/* NAV */
.nav{position:sticky;top:0;z-index:50;background:#fff;transition:.25s}
.nav.tergulir{box-shadow:0 6px 24px -14px rgba(15,23,42,.28)}
.nav-dalam{display:flex;align-items:center;justify-content:space-between;gap:14px;height:76px}
/* Logo TIDAK BOLEH terhimpit/terpotong: ukurannya dikunci, yang mengalah tombolnya.
   (Kasus nyata: di HP dengan pembesaran huruf sistem, tombol jadi lebih lebar →
    logo terhimpit sampai tampak terpotong ✗) */
.logo{flex:0 0 auto;min-width:0}
.logo img{width:196px;height:auto;max-width:100%;display:block}
.tombol.kecil{flex:0 0 auto}
.menu{display:flex;gap:28px;margin-left:auto;margin-right:28px}
.menu a{color:var(--redup);text-decoration:none;font-size:15px;font-weight:500;transition:.15s}
.menu a:hover{color:var(--biru)}

/* HERO */
.hero{background:linear-gradient(180deg,var(--biru-muda) 0%,#F7FBFF 62%,#fff 100%);padding:64px 0 76px;overflow:hidden}
.hero-dalam{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.hero h1{font-size:clamp(32px,4.9vw,58px);margin-bottom:20px}
.oranye{color:var(--oranye)}
.biru{color:var(--biru)}
.hero-isi{color:var(--redup);font-size:17px;max-width:56ch}
.hero-tombol{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.hero-angka{display:flex;gap:38px;flex-wrap:wrap;margin-top:40px}
.angka-butir{display:flex;align-items:center;gap:12px}
.ikon-angka{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;background:#fff;display:flex;align-items:center;
  justify-content:center;font-size:19px;box-shadow:var(--bayang)}
.angka-butir b{display:block;font-size:20px;font-weight:700;line-height:1.2}
.angka-butir span{color:var(--redup);font-size:13px}

.hero-gambar{position:relative;min-height:440px}
.lingkaran{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(400px,86%);
  aspect-ratio:1;border-radius:50%;background:linear-gradient(150deg,var(--biru-muda2),#EFF6FF 70%,#fff)}
.astronaut{position:relative;z-index:2;display:block;margin:0 auto;height:420px;width:auto;
  filter:drop-shadow(0 22px 34px rgba(3,48,95,.18))}
.mengambang{position:absolute;z-index:3;background:#fff;border-radius:var(--r16);padding:13px 16px;
  box-shadow:0 14px 34px -14px rgba(3,48,95,.3);max-width:196px}
.mengambang b{display:block;font-size:17px;font-weight:700}
.mengambang span{color:var(--redup);font-size:11.5px;line-height:1.35;display:block}
.mengambang-1{top:8px;right:-6px}
.mengambang-2{bottom:96px;left:-14px}
.mengambang-3{bottom:6px;right:6px}

/* BAGIAN */
.bagian{padding:88px 0}
.bagian.biru-muda{background:linear-gradient(180deg,#F5FAFF,#EAF3FF)}
.kepala-bagian{max-width:74ch;margin-bottom:38px}
.kepala-bagian.tengah{margin-left:auto;margin-right:auto;text-align:center}
.kepala-bagian p{color:var(--redup);margin-top:14px}
.kepala-bagian b{color:var(--teks)}
.sub-judul{margin:56px 0 8px;font-size:20px;font-weight:700}
.catatan{color:var(--samar);font-size:14px;max-width:80ch}
.kecil{display:block;color:var(--samar);font-size:12.5px;font-weight:500}

/* PANEL GRAFIK */
.panel{background:#fff;border:1px solid var(--garis);border-radius:var(--r24);padding:26px}
.panel.putih{box-shadow:var(--bayang)}
.grafik-kepala{display:flex;justify-content:space-between;align-items:flex-end;gap:22px;flex-wrap:wrap;margin-bottom:14px}
.angka-besar{display:block;font-size:clamp(30px,4vw,44px);font-weight:800;letter-spacing:-.03em;margin:6px 0 4px}
.grafik-kanan{display:flex;gap:30px}
.grafik-kanan b{font-size:19px;font-weight:700}

/* UNGGULAN */
.unggulan{margin-top:22px;background:linear-gradient(135deg,var(--biru),#0466CE);color:#fff;
  border-radius:var(--r24);padding:32px;display:grid;grid-template-columns:1.4fr .6fr;gap:28px;
  align-items:center;box-shadow:var(--bayang-biru)}
.unggulan h3{font-size:clamp(21px,2.6vw,29px);margin-bottom:12px}
.unggulan p{color:rgba(255,255,255,.9);font-size:15px}
.unggulan .tautan{display:inline-block;margin-top:16px;color:#fff;font-weight:600;font-size:14.5px;
  text-decoration:none;border-bottom:1.6px solid rgba(255,255,255,.55);padding-bottom:2px}
.unggulan .tautan:hover{border-bottom-color:#fff}
.unggulan-kanan{display:flex;flex-direction:column;gap:16px}
.unggulan-kanan b{display:block;font-size:26px;font-weight:800;letter-spacing:-.03em}
.unggulan-kanan span{color:rgba(255,255,255,.82);font-size:12.5px}

/* KARTU */
.grid-kartu{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:18px;margin-top:22px}
.kartu{background:#fff;border:1px solid var(--garis);border-radius:var(--r20);padding:24px;
  display:flex;flex-direction:column;transition:.2s}
.kartu:hover{transform:translateY(-4px);box-shadow:0 20px 44px -20px rgba(3,48,95,.28);border-color:var(--biru-muda2)}
.kartu-kepala{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}
.kartu .pil{margin-bottom:0;font-size:11.5px;padding:5px 12px}
.tgl{color:var(--samar);font-size:12px;font-weight:500}
.kartu h3{font-size:17.5px;margin-bottom:9px}
.kartu p{color:var(--redup);font-size:14px}
.kartu-angka{display:flex;gap:28px;margin-top:auto;padding-top:18px;margin-top:18px;border-top:1px solid var(--garis)}
.kartu-angka b{display:block;font-size:22px;font-weight:800;letter-spacing:-.03em;color:var(--biru-tua)}
.kartu-angka span{color:var(--samar);font-size:11.5px}
.sumber{margin-top:12px;font-size:11.5px;color:var(--samar);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* LANGKAH */
.langkah{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:18px}
.langkah-butir{background:#fff;border:1px solid var(--garis);border-radius:var(--r20);padding:26px;box-shadow:var(--bayang)}
.nomor{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--r12);
  background:var(--biru);color:#fff;font-weight:700;font-size:15px;margin-bottom:16px}
.langkah-butir h3{font-size:16.5px;margin-bottom:8px}
.langkah-butir p{color:var(--redup);font-size:14.5px}

/* LAYANAN */
.grid-layanan{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:18px}
.panel-kartu{background:#fff;border:1px solid var(--garis);border-radius:var(--r20);padding:26px;transition:.2s}
.panel-kartu:hover{transform:translateY(-3px);box-shadow:var(--bayang)}
.ikon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:14px;
  background:var(--biru-muda);margin-bottom:16px}
.ikon svg{width:24px;height:24px}
.ikon-angka svg{width:20px;height:20px}
.panel-kartu h3{font-size:17px;margin-bottom:9px}
.panel-kartu p{color:var(--redup);font-size:14.5px}

/* FAQ */
.faq{max-width:88ch}
.faq details{background:#fff;border:1px solid var(--garis);border-radius:var(--r16);margin-bottom:12px;
  box-shadow:var(--bayang);overflow:hidden}
.faq summary{cursor:pointer;padding:19px 22px;font-weight:600;font-size:15.5px;list-style:none;
  display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--biru);font-size:22px;font-weight:600;line-height:1}
.faq details[open] summary::after{content:'–';color:var(--biru)}
.faq p{padding:0 22px 20px;color:var(--redup);font-size:15px}

/* AJAKAN (panel biru) */
.ajakan{position:relative;background:linear-gradient(135deg,var(--biru),#0466CE);color:#fff;
  border-radius:var(--r24);padding:56px 40px;text-align:center;overflow:hidden;box-shadow:var(--bayang-biru)}
.ajakan h2{margin-bottom:14px}
.ajakan p{color:rgba(255,255,255,.92);max-width:60ch;margin:0 auto;font-size:16.5px}
.ajakan-tombol{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.handle{margin-top:22px;color:rgba(255,255,255,.85);font-size:14.5px;line-height:2}
.handle b{color:#fff}
/* Petunjuk cadangan kalau pengunjung tidak punya aplikasi email (mailto: tidak membuka apa pun ✗) */
.catatan-email{margin-top:14px;color:rgba(255,255,255,.92);font-size:13.5px;max-width:54ch;
  margin-left:auto;margin-right:auto}
.catatan-email b{color:#fff}
/* Tombol <button> harus SAMA dengan tombol <a>: gaya bawaan browser (latar abu-abu ✗)
   dimatikan supaya tidak terlihat pudar ✗ — Tomi menemukan ini di tombol "Copy Email" ✓ */
button.tombol{font-family:inherit;cursor:pointer;background:transparent;appearance:none;
  -webkit-appearance:none;text-align:center;line-height:1.25}   /* line-height disamakan ✓
  (sebelumnya <button> 2px lebih pendek dari <a> ✗ — beda jarak baris bawaan browser ✓) */
/* Keempat tombol kontak disamakan: putih penuh ✓ (sebelumnya dua pakai garis luar ✗
   dan yang <button> masih memakai latar bawaan → tampak pudar ✗) */
.ajakan-tombol .tombol{background:#fff;color:var(--biru-tua);border-color:transparent;
  flex:1 1 auto;min-width:150px;max-width:260px;
  height:55px;min-height:55px;padding-top:0;padding-bottom:0;box-sizing:border-box}
  /* tinggi DIKUNCI 55px ✓ — sebelumnya tombol <button> berhenti di min-height 50px ✗ */
.ajakan-tombol .tombol:hover{background:#F2F8FF;transform:translateY(-2px)}
/* Grafik: versi desktop 12 batang, versi HP 6 batang (label tetap terbaca ✓) */
.grafik-hp{display:none}

/* Panel kontak: astronaut adalah hiasan → selalu DI BELAKANG teks & tombol
   (audit menemukan hiasan ini menutupi tombol ✗) */
.ajakan>*{position:relative;z-index:2}
.ajakan .astronaut-kecil{position:absolute;z-index:1;pointer-events:none}

/* Judul kartu 1-2 baris → tinggi kartu rata (audit: sebelumnya beda 23px ✗) */
.kartu h3{min-height:42px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.astronaut-kecil{position:absolute;right:14px;top:12px;height:150px;opacity:.2;pointer-events:none}

/* ── HASIL YANG DILAPORKAN PROJECT (screenshot + tautan siaran ✓) ───────────────
   Kunci kerapian: gambar dari sumber BEDA BENTUK (HP tegak ✓ desktop lebar ✓ kotak ✓)
   dimasukkan ke BINGKAI SERAGAM ✓ → semua kartu rata ✓ TANPA memotong isi gambar ✗
   (object-fit:contain ✓ — angka di dalam screenshot tidak boleh terpotong ✗) */
.grid-laporan{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;
  margin-top:20px;align-items:start}
.laporan{background:#fff;border:1px solid var(--garis);border-radius:var(--r20);padding:22px;
  display:flex;flex-direction:column;transition:.2s}
.laporan:hover{transform:translateY(-3px);box-shadow:var(--bayang);border-color:var(--biru-muda2)}
.laporan-kepala{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.laporan-kepala b{font-size:16px}
.laporan-angka{display:flex;align-items:baseline;gap:9px;margin:8px 0 14px}
.laporan-angka b{font-size:34px;font-weight:800;letter-spacing:-.03em;color:var(--biru);line-height:1}
.laporan-angka span{color:var(--redup);font-size:13px}
.laporan-rincian{margin:0 0 14px;font-size:13px;color:var(--redup);line-height:1.5}
/* BINGKAI SERAGAM 400px ✓ — gambar JELAS terbaca ✓ (Tomi: "sebesar tadi" ✓)
   Gambar TIDAK DIPOTONG ✗ (Tomi: "jangan motong sendiri" ✓) — tampil utuh apa adanya ✓
   semua bentuk gambar masuk utuh ✓ dan kartu tetap RATA ✓
   saat entri banyak tetap ringkas ✓ (6 kartu tampil + tombol "Show all" ✓) */
.laporan-tersembunyi{display:none}                      /* entri ke-7 dst: disembunyikan ✓ */
.laporan-lainnya{text-align:center;margin-top:22px}     /* tombol "Show all N reports" ✓ */
.laporan-ss{display:flex;align-items:center;justify-content:center;height:400px;
  border:1px solid var(--garis);border-radius:12px;background:#F7FAFF;overflow:hidden;
  transition:.2s;cursor:zoom-in;padding:8px}
.laporan-ss img{max-width:100%;max-height:100%;width:auto;height:auto;border-radius:6px;
  box-shadow:0 4px 14px -6px rgba(15,23,42,.25)}
.laporan-ss:hover{border-color:var(--biru);transform:translateY(-2px)}
.laporan-sumber{margin-top:12px;font-size:12.5px;color:var(--samar);line-height:1.55}
.laporan-tautan{margin-top:auto;padding-top:14px;font-size:14px;font-weight:600;
  color:var(--biru);text-decoration:none}
.laporan-tautan:hover{text-decoration:underline}
/* lapisan gambar besar ✓ (WAJIB [hidden] → display:none, kalau tidak lapisannya selalu tampil ✗) */
.lapis-ss{position:fixed;inset:0;z-index:999;background:rgba(6,10,18,.93);display:flex;
  align-items:center;justify-content:center;padding:20px}
.lapis-ss[hidden]{display:none}
.lapis-ss img{max-width:min(1100px,96vw);max-height:88vh;border-radius:14px;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.75)}
.tutup-ss{position:absolute;top:10px;right:20px;font-size:36px;color:#fff;cursor:pointer;line-height:1}

/* KAKI */
footer{background:#F7FAFF;border-top:1px solid var(--garis);padding:44px 0 56px}
.kaki-atas{display:flex;justify-content:space-between;align-items:center;gap:22px;flex-wrap:wrap;margin-bottom:22px}
.logo-kaki{width:168px;height:auto}
.kaki-tautan{display:flex;gap:24px;flex-wrap:wrap}
.kaki-tautan a{color:var(--redup);text-decoration:none;font-size:14.5px;font-weight:500}
.kaki-tautan a:hover{color:var(--biru)}
.kaki-catatan{color:var(--samar);font-size:12.5px;max-width:94ch;line-height:1.7}

/* HP */
@media(max-width:900px){
  .menu{display:none}
  .grafik-desktop{display:none}
  .grafik-hp{display:block}
  .astronaut-kecil{height:96px;opacity:.14;right:10px;top:10px}
  /* di layar sempit: semua dikecilkan supaya masih ada sisa ruang ✓ (tahan pembesaran huruf HP ✓) */
  .logo img{width:170px}
  .tombol.kecil{padding:9px 15px;font-size:14px}
  .nav-dalam{height:66px;gap:10px}
  .logo img{width:154px}
  .tombol.kecil{padding:9px 14px;font-size:13.5px;min-height:42px;white-space:nowrap}
  .hero{padding:40px 0 56px}
  .hero-dalam{grid-template-columns:1fr;gap:28px}
  .hero-gambar{min-height:340px;order:-1}
  .astronaut{height:300px}
  .mengambang{max-width:170px;padding:11px 13px}
  .mengambang-1{top:0;right:0}
  .mengambang-2{bottom:60px;left:0}
  .mengambang-3{display:none}
  .bagian{padding:60px 0}
  .unggulan{grid-template-columns:1fr;padding:26px}
  .unggulan-kanan{flex-direction:row;gap:26px;flex-wrap:wrap}
  .ajakan{padding:40px 22px}
  .hero-tombol .tombol,.ajakan-tombol .tombol{width:100%}
  .kaki-atas{flex-direction:column;align-items:flex-start}
}
/* layar sangat sempit (HP kecil / huruf sistem diperbesar): semua dikecilkan ✓
   sengaja ditaruh DI LUAR blok 900px supaya urutannya benar ✓ */
@media(max-width:430px){
  .nav-dalam{gap:8px}
  .logo img{width:136px}
  /* tombol boleh MENYUSUT (min-width:0) supaya halaman tidak pernah melebar ✗
     walau huruf sistem HP diperbesar ✓ — label bisa terpotong elipsis di kasus ekstrem ✓ */
  .tombol.kecil{padding:8px 11px;font-size:12.5px;min-height:38px;flex:0 1 auto;
    min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
@media(max-width:420px){
  .wadah{padding:0 18px}
  .hero-angka{gap:20px}
}

/* ── BLOK "VERIFY US YOURSELF" ✓ (angka nyata + tautan yang bisa dicek klien ✓) ───── */
.panel-verif{background:#F7FAFF;border:1px solid var(--garis);border-radius:var(--r20);
  padding:26px;margin-top:22px}
.verif-angka{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px;margin:16px 0 4px}
.verif-angka > div{display:flex;flex-direction:column;gap:2px}
.verif-angka b{font-size:26px;font-weight:800;color:var(--biru);letter-spacing:-.03em}
.verif-angka span{font-size:12.5px;color:var(--redup);line-height:1.5}
.verif-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-top:18px}
.verif-tautan{display:flex;flex-direction:column;gap:2px;padding:14px 16px;background:#fff;
  border:1px solid var(--garis);border-radius:12px;text-decoration:none;transition:.18s}
.verif-tautan:hover{border-color:var(--biru);transform:translateY(-2px)}
.verif-tautan b{font-size:14px;color:var(--biru)}
.verif-tautan span{font-size:12px;color:var(--samar)}

/* ── PROFIL FORMAT KAMPANYE ✓ (dari data nyata ✓) ────────────────────────────────── */
.tabel-format{border:1px solid var(--garis);border-radius:var(--r20);overflow:hidden;
  background:#fff;margin-top:16px}
.format-kepala,.format-baris{display:grid;grid-template-columns:1.4fr .6fr .9fr .9fr 1.2fr;
  gap:10px;padding:13px 18px;align-items:center}
.format-kepala{background:#F7FAFF;font-size:12px;font-weight:700;color:var(--redup);
  text-transform:uppercase;letter-spacing:.04em}
.format-baris{border-top:1px solid var(--garis);font-size:14.5px}
.format-baris:hover{background:#FBFDFF}
.format-nama{font-weight:600}
.format-bagi{font-weight:700;color:var(--biru)}
.format-batang{background:#EEF4FC;border-radius:6px;height:8px;overflow:hidden;position:relative}
.format-batang i{display:block;height:100%;background:linear-gradient(90deg,#4FA3FF,#077BF4)}
@media(max-width:700px){
  .format-kepala{display:none}
  .format-baris{grid-template-columns:1fr 1fr;gap:4px 12px;font-size:13.5px;padding:12px 14px}
  .format-batang{grid-column:1/-1}
}
/* ── TEMPLATE PESAN PERTAMA ✓ ─────────────────────────────────────────────────────── */
.pola-pesan{margin-top:24px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.35);
  border-radius:14px;padding:18px;max-width:640px;margin-left:auto;margin-right:auto;text-align:left}
.pola-kepala{margin:0 0 10px;font-size:13.5px;color:rgba(255,255,255,.92)}
.pola-pesan pre{margin:0 0 12px;white-space:pre-wrap;font-family:inherit;font-size:13.5px;
  line-height:1.65;color:#fff;background:rgba(0,0,0,.16);padding:12px 14px;border-radius:10px}
.tombol-garis-putih{background:transparent;border-color:rgba(255,255,255,.65);color:#fff}
.tombol-garis-putih:hover{background:rgba(255,255,255,.14)}
