/* Badge "Made in Webflow" disuntikkan runtime oleh webflow.js dan tidak ada di
   markup. Situs ini tidak di-host di Webflow, jadi badge itu hanya sisa artefak
   yang menyesatkan pengunjung. */
.w-webflow-badge{display:none!important}

/* Template tidak menyetel font di body — hanya lewat kelas seperti
   .font-1-medium. Blok buatan sendiri karena itu WAJIB menyebut font template,
   kalau tidak akan jatuh ke serif bawaan browser dan terlihat asing. */
[class^="dtp-"],[class*=" dtp-"]{font-family:var(--font-family--inter-tight,"Inter Tight",sans-serif)}

.dtp-nav-dropdown{position:relative;display:inline-flex}
/* font & warna disebut eksplisit: <button> tidak mewarisi keduanya dari
   pembungkus, sehingga tombol Kabar/Tata Kelola tampak beda dari tautan lain. */
/* JANGAN menyetel properti background di sini. Tombol ini memakai kelas
   .navlink yang memberi latar pil; aturan ini dimuat SETELAH CSS template,
   sehingga latar apa pun di sini akan menghapus pil tersebut dan membuat
   Kabar/Tata Kelola tampak polos di antara menu lain. Yang perlu disebut hanya
   font dan warna, karena tombol tidak mewarisi keduanya dari pembungkus. */
.dtp-nav-toggle{display:inline-flex;align-items:center;gap:.4em;cursor:pointer;border:0;
  color:var(--_color---white,#fff);
  font-family:var(--font-family--inter-tight,"Inter Tight",sans-serif);
  font-size:inherit;font-weight:inherit;line-height:inherit}
.dtp-nav-caret{width:.7em;height:.7em;flex:none;transition:transform .2s ease}
.dtp-nav-dropdown[data-open="true"] .dtp-nav-caret{transform:rotate(180deg)}
.dtp-nav-dropdown-list{position:absolute;top:calc(100% + .5rem);left:0;z-index:1000;min-width:16rem;
  padding:.5rem;border-radius:1rem;background:#fff;
  border:1px solid rgba(11,18,38,.1);
  box-shadow:0 18px 44px rgba(9,15,30,.18)}
.dtp-nav-dropdown-list[hidden]{display:none}
.dtp-nav-dropdown-link{display:block;padding:.6rem .85rem;border-radius:.65rem;
  color:#0b1226;text-decoration:none;font-size:.95rem;line-height:1.3;white-space:nowrap}
.dtp-nav-dropdown-link:hover,.dtp-nav-dropdown-link:focus-visible{background:rgba(11,18,38,.07)}

/* Halaman daftar Kabar tidak memakai hero bergambar — bagian header hero
   dihapus dan latarnya diratakan supaya kartu sorotan tidak bertabrakan
   dengan gambar hero di belakangnya. */
/* Bar menu memakai gradien biru Avenora (--_color---blue), bukan blok gelap.
   Padding vertikal ditambah karena tanpa hero bar-nya terasa sesak. */
.dtp-tanpa-hero{background-image:none!important;padding-top:0!important;
  background:linear-gradient(100deg,#111c4f 0%,var(--_color---blue,#2739ff) 42%,#5b8fe0 78%,#8cc2ea 100%)!important}
.dtp-tanpa-hero .navbar{position:relative;background-color:transparent}
.dtp-tanpa-hero .nav-wrapper{padding-block:1.15rem}

/* Menu burger: panel TERANG, senada dropdown Kabar/Tata Kelola di desktop.
   Panel biru terang polos bawaan template maupun panel gelap sama-sama tidak
   menyatu; putih bersih dengan teks navy paling dekat ke gaya Avenora. */
@media (max-width:991px){
  .w-nav-overlay{background:transparent}
  .navigation.w-nav-menu{background:#fff!important;
    border-radius:0 0 1.25rem 1.25rem;padding:1rem 1.25rem 1.5rem;
    box-shadow:0 24px 60px rgba(9,15,30,.22)}
  .navigation.w-nav-menu .navlink{background-color:rgba(11,18,38,.05)!important;
    color:var(--_color---black-pearl,#020e26)!important;text-align:left;padding:.85rem 1.1rem}
  .navigation.w-nav-menu .navlink:hover{background-color:rgba(11,18,38,.09)!important}
  .navigation.w-nav-menu .navlink.w--current{background-color:var(--_color---blue,#2739ff)!important;
    color:var(--_color---white,#fff)!important}
  /* Tombol dropdown juga ikut terang; warnanya diwarisi dari .navlink di atas
     tapi disebut lagi karena tombol tidak mewarisi color. */
  .navigation.w-nav-menu .dtp-nav-toggle{color:var(--_color---black-pearl,#020e26)}
  .navigation.w-nav-menu .dtp-nav-dropdown-link{color:var(--_color---black-pearl,#020e26)}
  .navigation.w-nav-menu .dtp-nav-dropdown-link:hover{background:rgba(11,18,38,.07)}
  .menu-button{background-color:var(--_color---white-20,#fff3)!important;
    backdrop-filter:blur(8px);border-radius:999px;color:var(--_color---white,#fff)}
  .menu-button.w--open{background-color:var(--_color---white,#fff)!important;
    color:var(--_color---black-pearl,#020e26)}
}
/* tanpa hero, bagian isi menempel ke navbar — beri jarak nafas */
.dtp-tanpa-hero + .main .dtp-k-judulbag:first-child{margin-top:2rem}
/* daftar tulisan + pagination */
.dtp-grid-tulisan{display:grid;gap:1.75rem;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));padding:1rem 0 2rem}
.dtp-grid-tulisan .package-card{height:100%}
/* Panah kartu diposisikan absolut di kanan atas. Pada kartu paket judulnya
   pendek sehingga tidak bertabrakan; judul berita lebih panjang dan tertutup
   panah. Beri ruang di kanan supaya teks tidak pernah masuk ke bawahnya. */
.dtp-grid-tulisan .package-title-wrapper{padding-right:3rem}
@media (max-width:520px){.dtp-grid-tulisan{grid-template-columns:1fr}}
.dtp-kosong{padding:3rem 0 5rem;text-align:center}
.dtp-pagination{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;padding:0 0 4rem}
.dtp-page{display:inline-flex;align-items:center;justify-content:center;min-width:2.5rem;height:2.5rem;
  padding:0 .75rem;border-radius:999px;text-decoration:none;font-size:.9rem;
  color:var(--_color---white,#fff);border:1px solid var(--_color---white-20,rgba(255,255,255,.2))}
.dtp-page:hover{background:rgba(255,255,255,.12)}
.dtp-page[aria-current="page"]{background:var(--_color---white,#fff);color:#0a1020;font-weight:600}
.dtp-terkait{padding:0 0 4rem}
.dtp-terkait-tautan{display:block;text-decoration:none}
.dtp-terkait-grid{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.dtp-terkait-tautan .visited-card{height:100%}
.dtp-terkait-judul{margin-bottom:1.25rem;color:#0b1226}

/* ── kabar: tata letak daftar ─────────────────────────────── */
.dtp-k-wrap{padding:0 0 2rem;color:#0b1226}
.dtp-k-feat{display:grid;grid-template-columns:1.15fr 1fr;gap:1.25rem;margin:0 0 2.5rem}
.dtp-k-feat-kanan{display:grid;gap:1.25rem;align-content:start}
.dtp-k-feat-kecil{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.dtp-k-kartu{position:relative;display:block;border-radius:1.25rem;overflow:hidden;background:#0b1226;text-decoration:none}
.dtp-k-kartu img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease;position:absolute;inset:0}
.dtp-k-kartu:hover img{transform:scale(1.045)}
.dtp-k-kartu::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,10,24,.05) 30%,rgba(6,10,24,.88) 100%)}
.dtp-k-besar{min-height:430px}
.dtp-k-sedang{min-height:198px}
.dtp-k-kecil{min-height:198px}
.dtp-k-kartu-teks{position:absolute;left:1.15rem;right:1.15rem;bottom:1.05rem;z-index:2;color:#fff}
.dtp-k-kartu-teks .judul{font-weight:600;font-size:1rem;line-height:1.35}
.dtp-k-besar .dtp-k-kartu-teks .judul{font-size:1.55rem;line-height:1.3}
.dtp-badge{position:absolute;top:1rem;left:1rem;z-index:2;padding:.28rem .8rem;border-radius:999px;
  font-size:.75rem;font-weight:500;color:#fff;background:rgba(10,16,30,.55);
  border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(8px)}
.dtp-badge-datar{display:inline-block;padding:.2rem .7rem;border-radius:999px;font-size:.72rem;
  background:rgba(11,18,38,.07);color:#0b1226;border:1px solid rgba(11,18,38,.1)}

.dtp-k-utama{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:2.25rem;align-items:start}
.dtp-k-judulbag{font-size:1.3rem;font-weight:600;color:#0b1226;margin:0 0 .5rem}

.dtp-k-baris{display:flex;gap:1.15rem;padding:1.15rem 0;border-bottom:1px solid rgba(11,18,38,.09);text-decoration:none;color:inherit}
.dtp-k-baris:last-of-type{border-bottom:0}
.dtp-k-baris .thumb{position:relative;width:186px;height:116px;flex:none;border-radius:.9rem;overflow:hidden;background:#e8edf5}
.dtp-k-baris .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.dtp-k-baris .judul{font-weight:600;font-size:1.05rem;line-height:1.4;color:#0b1226;margin:0 0 .3rem}
.dtp-k-baris:hover .judul{text-decoration:underline;text-underline-offset:3px}
.dtp-k-baris .ringkas{font-size:.88rem;line-height:1.55;color:rgba(11,18,38,.62);margin:0 0 .45rem;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dtp-k-meta{display:flex;align-items:center;gap:.4rem;font-size:.78rem;color:rgba(11,18,38,.55)}
.dtp-k-meta svg{width:.85em;height:.85em}

/* sidebar */
.dtp-k-samping{display:grid;gap:1.5rem}
.dtp-k-panel{background:#fff;border:1px solid rgba(11,18,38,.09);border-radius:1.25rem;padding:1.35rem;
  box-shadow:0 10px 30px rgba(11,18,38,.05)}
.dtp-k-panel-judul{font-size:1.05rem;font-weight:600;color:#0b1226;margin:0 0 1rem}
.dtp-k-pop{display:block;text-decoration:none;padding:.8rem 0;border-bottom:1px solid rgba(11,18,38,.08)}
.dtp-k-pop:last-child{border-bottom:0;padding-bottom:0}
.dtp-k-pop .judul{font-size:.92rem;font-weight:600;line-height:1.45;color:#16305e;margin:0 0 .3rem}
.dtp-k-pop:hover .judul{text-decoration:underline;text-underline-offset:3px}
.dtp-promo{display:block;margin:0 0 1.4rem}
.dtp-promo:last-child{margin-bottom:0}
.dtp-promo img{width:100%;border-radius:.9rem;display:block;margin:0 0 .75rem}
.dtp-promo .judul{font-size:.95rem;font-weight:600;color:#0b1226;margin:0 0 .3rem}
.dtp-promo .desk{font-size:.83rem;line-height:1.5;color:rgba(11,18,38,.62);margin:0 0 .8rem}
.dtp-btn{display:block;text-align:center;padding:.6rem 1rem;border-radius:999px;text-decoration:none;
  font-size:.88rem;font-weight:600;background:#0b1226;color:#fff}
.dtp-btn:hover{background:#1b2a4d}

/* pagination — di atas latar terang */
.dtp-pagination{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;padding:1.5rem 0 3rem}
.dtp-page{display:inline-flex;align-items:center;justify-content:center;min-width:2.5rem;height:2.5rem;
  padding:0 .75rem;border-radius:999px;text-decoration:none;font-size:.9rem;
  color:#0b1226;border:1px solid rgba(11,18,38,.2)}
.dtp-page:hover{background:rgba(11,18,38,.07)}
.dtp-page[aria-current="page"]{background:#0b1226;color:#fff;font-weight:600}

/* ── kabar: halaman detail ────────────────────────────────── */
.dtp-d-wrap{max-width:52rem;margin:0 auto;padding:2.25rem 0 3.5rem;color:#0b1226}
/* warna disebut eksplisit: gaya h1 template dirancang untuk hero gelap dan
   memberi warna putih, sehingga judul tak terbaca di latar terang. */
.dtp-d-judul{font-size:2.1rem;line-height:1.22;font-weight:600;margin:0 0 .6rem;
  letter-spacing:-.01em;color:#0b1226}
.dtp-d-ringkas{font-size:1.02rem;line-height:1.6;color:rgba(11,18,38,.62);margin:0 0 1.2rem}
@media (max-width:640px){.dtp-d-judul{font-size:1.65rem}}
.dtp-d-remah{display:flex;flex-wrap:wrap;gap:.35rem;font-size:.8rem;color:rgba(11,18,38,.55);margin:0 0 1.1rem}
.dtp-d-remah a{color:inherit;text-decoration:none}
.dtp-d-remah a:hover{text-decoration:underline}
.dtp-d-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin:0 0 1.35rem}
.dtp-d-meta .info{font-size:.85rem;color:rgba(11,18,38,.6)}
.dtp-d-bagikan{display:flex;gap:.45rem;margin-left:auto}
.dtp-d-bagikan a,.dtp-d-bagikan button{display:inline-flex;align-items:center;justify-content:center;
  width:2.15rem;height:2.15rem;border-radius:999px;border:1px solid rgba(11,18,38,.16);
  background:#fff;color:#0b1226;cursor:pointer;text-decoration:none}
.dtp-d-bagikan a:hover,.dtp-d-bagikan button:hover{background:rgba(11,18,38,.06)}
.dtp-d-bagikan svg{width:1rem;height:1rem}
.dtp-d-gambar{width:100%;border-radius:1.25rem;display:block;margin:0 0 1.5rem}
.dtp-d-toc{border:1px solid rgba(11,18,38,.1);border-radius:1rem;background:#fff;
  padding:.4rem 1.2rem;margin:0 0 1.75rem}
.dtp-d-toc summary{cursor:pointer;font-weight:600;padding:.7rem 0;list-style:none;display:flex;align-items:center;justify-content:space-between}
.dtp-d-toc summary::after{content:"▾";color:rgba(11,18,38,.5)}
.dtp-d-toc[open] summary::after{content:"▴"}
.dtp-d-toc ol{margin:0 0 1rem;padding:0 0 0 1.2rem;display:grid;gap:.45rem}
.dtp-d-toc a{color:#16305e;text-decoration:none;font-size:.92rem}
.dtp-d-toc a:hover{text-decoration:underline}
.dtp-d-toc .lv3{margin-left:1rem}
.dtp-d-isi .w-richtext{color:#22314f}
/* Gambar hasil scrape membawa atribut width/height asli (mis. 4096x3072).
   CSS yang hanya membatasi lebar membuat tinggi atributnya tetap dipakai
   browser dan fotonya melar. Kedua sumbu WAJIB dipulihkan bersama. */
.dtp-d-isi .w-richtext img{max-width:100%;width:auto;height:auto!important;
  border-radius:.9rem;display:block;margin:1.1rem auto}
/* fallback saat tulisan tidak punya gambar */
.dtp-thumb-kosong{display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  background:linear-gradient(135deg,#0b1226 0%,#16305e 55%,#2739ff 130%)}
.dtp-thumb-kosong>span{color:rgba(255,255,255,.5);font-size:.72rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase}
.dtp-thumb-kosong.isi-kartu{position:absolute;inset:0}
.dtp-terkait-tautan .visited-card-img-wrap{background-size:cover;background-position:center}
.dtp-terkait-tautan .visited-card-img-wrap.dtp-thumb-kosong>span{font-size:.65rem}
.dtp-page-elips{display:inline-flex;align-items:center;padding:0 .3rem;color:rgba(11,18,38,.45)}
.dtp-d-isi .w-richtext h1,.dtp-d-isi .w-richtext h2,.dtp-d-isi .w-richtext h3,
.dtp-d-isi .w-richtext h4,.dtp-d-isi .w-richtext strong{color:#0b1226}
.dtp-d-isi .w-richtext a{color:#16305e}

/* komentar */
/* ── rating pembaca ──────────────────────────────────────── */
.dtp-rt{max-width:52rem;margin:0 auto;padding:0 0 4.5rem;color:#0b1226}
.dtp-rt-judul{font-size:1.3rem;font-weight:600;margin:0 0 1.1rem}
.dtp-rt-notif{border-radius:.8rem;padding:.8rem 1rem;font-size:.9rem;margin:0 0 1.1rem}
.dtp-rt-notif.ok{background:#eefbf2;border:1px solid #bfe8cc;color:#14532d}
.dtp-rt-notif.galat{background:#fef2f2;border:1px solid #f3c2c2;color:#7f1d1d}
.dtp-rt-atas{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  background:#fff;border:1px solid rgba(11,18,38,.09);border-radius:1.25rem;padding:1.25rem 1.5rem}
.dtp-rt-statis{display:flex;gap:.2rem}
.dtp-rt-statis span{width:1.35rem;height:1.35rem;color:rgba(11,18,38,.18)}
.dtp-rt-statis span.isi{color:#f0a500}
.dtp-rt-statis svg,.dtp-rt-pilih svg{width:100%;height:100%;display:block}
.dtp-rt-skor{display:flex;align-items:baseline;gap:.3rem}
.dtp-rt-skor strong{font-size:1.6rem;font-weight:600;line-height:1}
.dtp-rt-skor span{font-size:.9rem;color:rgba(11,18,38,.55)}
.dtp-rt-jml{margin-left:.5rem}
.dtp-rt-form{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin:1rem 0 0}
.dtp-rt-ajak{font-size:.92rem;color:rgba(11,18,38,.7)}
/* Bintang dirender terbalik supaya sorot "isi sampai sini" bisa murni CSS
   lewat selektor saudara ~ — tanpa JavaScript sama sekali. */
.dtp-rt-pilih{display:flex;flex-direction:row-reverse;gap:.25rem}
.dtp-rt-pilih button{width:2rem;height:2rem;padding:0;border:0;background:none;cursor:pointer;
  color:rgba(11,18,38,.22);transition:color .15s ease,transform .15s ease}
.dtp-rt-pilih button:hover,.dtp-rt-pilih button:focus-visible,
.dtp-rt-pilih button:hover ~ button,.dtp-rt-pilih button:focus-visible ~ button{color:#f0a500}
.dtp-rt-pilih button:hover{transform:scale(1.12)}
.dtp-rt-catatan{font-size:.85rem;color:rgba(11,18,38,.6);margin:1rem 0 0}

/* captcha komentar (vanilla) */
.dtp-cap-panel{position:relative;border-radius:.8rem;overflow:hidden;background:#e8edf5;margin:0 0 .6rem}
.dtp-cap-panel img{position:absolute;top:0;left:0;display:block}
.dtp-cap-bg{width:100%;height:100%}
.dtp-cap-piece{height:auto;filter:drop-shadow(0 1px 3px rgba(11,18,38,.4))}
.dtp-cap-slider{-webkit-appearance:none;appearance:none;width:100%;height:2.4rem;border:1px solid rgba(11,18,38,.16);
  border-radius:.7rem;background:#fbfcfe;cursor:grab;display:block;margin:0 0 .35rem}
.dtp-cap-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:3rem;height:2.1rem;
  border-radius:.5rem;background:#0b1226;border:0;cursor:grab}
.dtp-cap-slider::-moz-range-thumb{width:3rem;height:2.1rem;border-radius:.5rem;background:#0b1226;border:0;cursor:grab}
.dtp-cap-hint{font-size:.78rem;color:rgba(11,18,38,.55);margin:0 0 1rem}

@media (max-width:991px){
  .dtp-k-feat{grid-template-columns:1fr}
  .dtp-k-besar{min-height:320px}
  .dtp-k-utama{grid-template-columns:1fr}
}
@media (max-width:600px){
  .dtp-k-baris{flex-direction:column}
  .dtp-k-baris .thumb{width:100%;height:180px}
  .dtp-k-feat-kecil{grid-template-columns:1fr}
}

@media (max-width:991px){
  .dtp-nav-dropdown{display:block;width:100%}
  .dtp-nav-toggle{width:100%;justify-content:space-between}
  .dtp-nav-dropdown-list{position:static;min-width:0;margin-top:.4rem;background:transparent;
    border:0;box-shadow:none;backdrop-filter:none;padding:0 0 0 .5rem}
  .dtp-nav-dropdown-link{white-space:normal}
}
/* ── Kulit DT Peduli di atas template Avenora ─────────────────────────
   Dimuat SETELAH CSS template oleh lib/kulit-dtp.ts. Berisi hanya bagian
   yang dirombak jadi milik DT Peduli (logo, menu, footer). Tema TERANG —
   situs DT Peduli tidak memakai tema gelap. */

:root{
  --dtp-biru:#1845a1;
  --dtp-biru-tua:#0b1226;
  --dtp-oranye:#ffaf23;
  --dtp-teks:#0b1226;
  --dtp-teks-redup:rgba(11,18,38,.62);
  --dtp-garis:rgba(11,18,38,.1);
  --dtp-latar:#f6f7f9;
}

/* ── logo (PNG resmi, public/dtp/logo*.png) ── */
.dtp-logo{display:inline-block;text-decoration:none;line-height:0}
/* ukuran eksplisit (rasio berkas 798/260 = 3.069) — width:auto pada <img> di
   dalam flex/float ternyata bisa dihitung lebih sempit oleh sebagian browser
   sehingga tepi kanan logo terpotong */
.dtp-logo-img{display:block;height:2.3rem;width:7.06rem;max-width:none;object-fit:contain;flex:0 0 auto}
@media (max-width:991px){.dtp-logo-img{height:2rem;width:6.14rem}}
.nav-brand{display:inline-block;line-height:0;flex:none;overflow:visible;width:auto;max-width:none;padding:0}
/* judul raksasa hero: "dt" oranye seperti wordmark */
.dtp-hero-dt{color:var(--dtp-oranye)}
/* wordmark raksasa hero diperkecil (template: 27–28vw) — permintaan pemilik */
.home-hero-area .hero-title{font-size:19vw}
@media (max-width:767px){.home-hero-area .hero-title{font-size:22vw}}

/* ── bar menu: kaca putih (glassmorphism) ──────────────────────
   Template menaruh bar transparan di atas hero gelap dengan teks putih.
   Diganti jadi pil kaca putih tembus pandang: latar putih 78% + blur,
   garis putih tipis di tepi, bayangan lembut. Teks jadi navy, logo biru. */
.navbar .nav-wrapper{
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6);
  border:1px solid rgba(255,255,255,.75);border-radius:999px;
  padding:.5rem .55rem .5rem 1.4rem;
  box-shadow:0 14px 44px -18px rgba(11,18,38,.45),0 1px 0 rgba(255,255,255,.9) inset}
.navbar .navlink{background-color:transparent;color:var(--dtp-teks);
  -webkit-backdrop-filter:none;backdrop-filter:none;font-weight:500}
.navbar .navlink:hover,.navbar .navlink:focus-visible{background-color:rgba(24,69,161,.08);color:var(--dtp-biru)}
.navbar .navlink.w--current{background-color:var(--dtp-biru);color:#fff;font-weight:600}
/* tombol dropdown tidak mewarisi color — sebut lagi */
.navbar .dtp-nav-toggle{color:var(--dtp-teks)}
.navbar .dtp-nav-toggle:hover,.navbar .dtp-nav-dropdown[data-open="true"] .dtp-nav-toggle{color:var(--dtp-biru)}
.navbar .dtp-nav-dropdown-list{border-radius:1.1rem;background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-color:rgba(255,255,255,.8);
  box-shadow:0 20px 50px -16px rgba(11,18,38,.35)}
/* halaman tanpa hero: beri ruang di atas pil supaya tidak menempel ke tepi */
/* Halaman tanpa hero (daftar kabar, detail, halaman statis): pita biru
   gradien bawaan di belakang bar menu bertabrakan dengan pil kaca putih —
   diganti latar terang kebiruan yang menyatu ke latar isi. */
.dtp-tanpa-hero{background:linear-gradient(180deg,#e6eefb 0%,#f6f7f9 100%)!important}
.dtp-tanpa-hero .navbar{padding-top:1rem}
.dtp-tanpa-hero .nav-wrapper{padding-block:.5rem}

/* ── tombol CTA menu (Donasi) — biru DT Peduli di atas kaca putih ── */
.nav-button-wrap .primary-button{background-color:var(--dtp-biru);color:#fff;border-color:transparent}
.nav-button-wrap .primary-button .button-arrow-pill{background-color:var(--dtp-oranye);color:var(--dtp-biru-tua)}

@media (max-width:991px){
  .navbar .nav-wrapper{padding:.45rem .45rem .45rem 1.1rem}
  /* ikon burger (lottie) berwarna biru muda; latar pil navy tipis */
  .menu-button{background-color:rgba(24,69,161,.08)!important;color:var(--dtp-teks)}
  .menu-button.w--open{background-color:var(--dtp-biru)!important}
  .navigation.w-nav-menu{border-radius:1.25rem;margin-top:.6rem;
    background:rgba(255,255,255,.94)!important;
    -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px)}
  .navigation.w-nav-menu .navlink.w--current{background-color:var(--dtp-biru)!important}
}

/* ── footer ── */
.dtp-footer{background:var(--dtp-latar);color:var(--dtp-teks);
  padding:4.5rem 0 2rem;margin-top:3rem;
  font-family:var(--font-family--inter-tight,"Inter Tight",sans-serif)}
.dtp-footer a{color:inherit;text-decoration:none}
.dtp-footer-grid{display:grid;grid-template-columns:1.45fr 1fr 1fr 1.3fr;gap:2.5rem 2rem;align-items:start}
.dtp-footer .dtp-logo{margin:0 0 1.5rem}
.dtp-footer .dtp-logo-img{height:2.8rem;width:8.6rem}
.dtp-footer-lembaga{font-weight:700;font-size:1.2rem;line-height:1.35;letter-spacing:.01em;
  text-transform:uppercase;margin:0 0 .5rem;max-width:22rem}
.dtp-footer-sk{font-size:.98rem;line-height:1.5;letter-spacing:.02em;text-transform:uppercase;
  color:var(--dtp-teks-redup);margin:0 0 2.25rem;max-width:22rem}
.dtp-footer-kantor h4{display:flex;align-items:center;gap:.6rem;font-size:1.05rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;margin:0 0 .85rem}
.dtp-footer-kantor h4 svg{width:1.25rem;height:1.25rem;flex:none}
.dtp-footer-kantor p{font-size:1rem;line-height:1.7;color:var(--dtp-teks-redup);margin:0 0 2.25rem;max-width:22rem}
.dtp-footer-cabang{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  max-width:20rem;padding:1.1rem 1.25rem;border-radius:1rem;background:#fff;
  border:1px solid var(--dtp-garis);box-shadow:0 10px 30px rgba(11,18,38,.06);
  position:relative;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}
.dtp-footer-cabang:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(11,18,38,.1)}
.dtp-footer-cabang::before{content:"";position:absolute;right:-1rem;top:-1rem;width:8rem;height:8rem;
  background:
    linear-gradient(90deg,transparent 48%,rgba(24,69,161,.08) 49%,rgba(24,69,161,.08) 51%,transparent 52%),
    linear-gradient(0deg,transparent 48%,rgba(24,69,161,.08) 49%,rgba(24,69,161,.08) 51%,transparent 52%),
    radial-gradient(circle at 60% 40%,rgba(24,69,161,.1),transparent 60%);
  background-size:1.4rem 1.4rem,1.4rem 1.4rem,100% 100%;
  transform:rotate(12deg);pointer-events:none}
.dtp-footer-cabang .teks{font-weight:700;font-size:1rem;line-height:1.3;position:relative}
.dtp-footer-cabang .teks .dtp-logo{margin:.2rem 0 0;display:block}
.dtp-footer-cabang .teks .dtp-logo-img{height:1.15rem;width:3.53rem}
.dtp-footer-cabang .ikon{position:relative;flex:none;width:2.6rem;height:2.6rem;border-radius:999px;
  background:var(--dtp-biru);color:#fff;display:inline-flex;align-items:center;justify-content:center}
.dtp-footer-cabang .ikon svg{width:1.15rem;height:1.15rem}

.dtp-footer-kolom h4{font-size:1.35rem;font-weight:700;letter-spacing:-.01em;margin:.35rem 0 1.9rem}
.dtp-footer-kolom ul{list-style:none;margin:0;padding:0;display:grid;gap:1.35rem}
.dtp-footer-kolom li a{display:inline-flex;align-items:center;gap:.9rem;font-size:1.08rem;
  color:rgba(11,18,38,.78);transition:color .15s ease}
.dtp-footer-kolom li a:hover{color:var(--dtp-biru)}
.dtp-footer-kolom li a svg{width:.6rem;height:.6rem;flex:none;color:rgba(11,18,38,.5)}

.dtp-footer-kontak{display:grid;gap:1rem;align-content:start}
.dtp-footer-kartu{display:flex;align-items:center;gap:1rem;padding:.9rem 1rem;border-radius:.85rem;
  background:#fff;border:1px solid rgba(11,18,38,.14);transition:border-color .15s ease,box-shadow .15s ease}
.dtp-footer-kartu:hover{border-color:var(--dtp-biru);box-shadow:0 10px 26px rgba(24,69,161,.12)}
.dtp-footer-kartu .ikon{flex:none;width:3rem;height:3rem;border-radius:999px;background:var(--dtp-biru);
  color:#fff;display:inline-flex;align-items:center;justify-content:center}
.dtp-footer-kartu .ikon svg{width:1.3rem;height:1.3rem}
.dtp-footer-kartu .isi{display:grid;gap:.2rem;padding-left:1rem;border-left:1px solid rgba(11,18,38,.14)}
.dtp-footer-kartu small{font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;color:var(--dtp-teks-redup)}
.dtp-footer-kartu b{font-size:1.2rem;font-weight:700;letter-spacing:-.01em}

.dtp-footer-bawah{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  margin-top:4rem;padding-top:1.75rem;border-top:1px solid var(--dtp-garis)}
.dtp-footer-bawah p{margin:0;font-size:1rem;color:var(--dtp-teks-redup)}
.dtp-footer-sosial{display:flex;align-items:center;gap:1.9rem}
.dtp-footer-sosial a{display:inline-flex;color:var(--dtp-biru);transition:opacity .15s ease}
.dtp-footer-sosial a:hover{opacity:.7}
.dtp-footer-sosial svg{width:1.4rem;height:1.4rem}

@media (max-width:991px){
  .dtp-footer{padding:3.5rem 0 1.75rem}
  .dtp-footer-grid{grid-template-columns:1fr 1fr;gap:2.5rem 2rem}
  .dtp-footer-brand{grid-column:1 / -1}
}
@media (max-width:600px){
  .dtp-footer-grid{grid-template-columns:1fr;gap:2.25rem}
  .dtp-footer .dtp-logo-img{height:2.4rem;width:7.37rem}
  .dtp-footer-kolom h4{margin-bottom:1.25rem}
  .dtp-footer-kolom ul{gap:1rem}
  .dtp-footer-bawah{flex-direction:column;align-items:flex-start;margin-top:3rem}
  .dtp-footer-sosial{gap:1.4rem}
}

/* ── halaman detail Kabar (berita & artikel) ─────────────────────
   Tata letak editorial: kepala + isi selebar 44rem untuk kenyamanan baca,
   gambar utama lebih lebar (64rem). Warna disebut eksplisit karena gaya
   heading template dirancang untuk hero gelap (putih). */
.dtp-a{color:var(--dtp-teks);padding:2.5rem 0 1rem}
.dtp-a-kepala{max-width:46rem;margin:0 auto}
.dtp-a-remah{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;font-size:.82rem;
  color:var(--dtp-teks-redup);margin:0 0 1.5rem}
.dtp-a-remah a{color:inherit;text-decoration:none}
.dtp-a-remah a:hover{color:var(--dtp-biru)}
.dtp-a-remah svg{width:.55rem;height:.55rem;color:rgba(11,18,38,.35)}
.dtp-a-kicker{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin:0 0 1rem;
  font-size:.85rem;color:var(--dtp-teks-redup)}
.dtp-a-kat{display:inline-flex;align-items:center;padding:.3rem .8rem;border-radius:999px;
  background:rgba(24,69,161,.09);color:var(--dtp-biru);font-weight:600;font-size:.78rem;
  letter-spacing:.04em;text-transform:uppercase;text-decoration:none}
.dtp-a-kat:hover{background:rgba(24,69,161,.15)}
.dtp-a-kicker .titik{width:.25rem;height:.25rem;border-radius:999px;background:rgba(11,18,38,.3)}
.dtp-a-judul{font-size:2.6rem;line-height:1.14;font-weight:700;letter-spacing:-.025em;
  color:var(--dtp-teks);margin:0 0 1rem}
.dtp-a-lead{font-size:1.2rem;line-height:1.6;color:rgba(11,18,38,.68);margin:0 0 1.6rem}
.dtp-a-byline{display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;padding:1.1rem 0;
  border-top:1px solid var(--dtp-garis);border-bottom:1px solid var(--dtp-garis)}
.dtp-a-avatar{flex:none;width:2.6rem;height:2.6rem;border-radius:999px;display:inline-flex;
  align-items:center;justify-content:center;font-weight:800;font-size:.85rem;letter-spacing:-.02em;
  color:#fff;background:linear-gradient(135deg,var(--dtp-biru) 0%,#2c6be0 100%)}
.dtp-a-byline .siapa{display:grid;line-height:1.25}
.dtp-a-byline .siapa b{font-weight:600;font-size:.98rem}
.dtp-a-byline .siapa small{font-size:.8rem;color:var(--dtp-teks-redup)}
.dtp-a-byline .dtp-d-bagikan{margin-left:auto}
.dtp-d-bagikan{display:flex;gap:.45rem}
.dtp-d-bagikan a,.dtp-d-bagikan button{display:inline-flex;align-items:center;justify-content:center;
  width:2.3rem;height:2.3rem;border-radius:999px;border:1px solid rgba(11,18,38,.14);
  background:#fff;color:var(--dtp-teks);cursor:pointer;text-decoration:none;transition:all .15s ease}
.dtp-d-bagikan a:hover,.dtp-d-bagikan button:hover{background:var(--dtp-biru);border-color:var(--dtp-biru);color:#fff}
.dtp-d-bagikan svg{width:1rem;height:1rem}

.dtp-a-hero{max-width:64rem;margin:2.25rem auto 0}
.dtp-a-hero .bingkai{position:relative;aspect-ratio:16/9;border-radius:1.5rem;overflow:hidden;background:#e8edf5}
.dtp-a-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.dtp-a-hero figcaption{font-size:.85rem;color:var(--dtp-teks-redup);text-align:center;margin:.75rem 0 0}

.dtp-a-badan{max-width:44rem;margin:2.5rem auto 0}
.dtp-d-toc{border:1px solid var(--dtp-garis);border-radius:1rem;background:var(--dtp-latar);
  padding:.35rem 1.2rem;margin:0 0 2rem}
.dtp-d-toc summary{cursor:pointer;font-weight:600;padding:.75rem 0;list-style:none;
  display:flex;align-items:center;justify-content:space-between;font-size:.95rem}
.dtp-d-toc summary::-webkit-details-marker{display:none}
.dtp-d-toc summary::after{content:"▾";color:rgba(11,18,38,.5)}
.dtp-d-toc[open] summary::after{content:"▴"}
.dtp-d-toc ol{margin:0 0 1rem;padding:0 0 0 1.2rem;display:grid;gap:.5rem}
.dtp-d-toc a{color:var(--dtp-biru);text-decoration:none;font-size:.92rem}
.dtp-d-toc a:hover{text-decoration:underline}
.dtp-d-toc .lv3{margin-left:1rem}

.dtp-a-isi.w-richtext{font-size:1.0625rem;line-height:1.8;color:#1f2a44}
.dtp-a-isi.w-richtext p{margin:0 0 1.35rem}
.dtp-a-isi.w-richtext p:first-child{font-size:1.1rem}
.dtp-a-isi.w-richtext h2,.dtp-a-isi.w-richtext h3,.dtp-a-isi.w-richtext h4{
  color:var(--dtp-teks);font-weight:700;letter-spacing:-.015em;line-height:1.3;margin:2.4rem 0 .9rem}
.dtp-a-isi.w-richtext h2{font-size:1.6rem}
.dtp-a-isi.w-richtext h3{font-size:1.3rem}
.dtp-a-isi.w-richtext h4{font-size:1.1rem}
.dtp-a-isi.w-richtext strong{color:var(--dtp-teks);font-weight:600}
.dtp-a-isi.w-richtext a{color:var(--dtp-biru);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.dtp-a-isi.w-richtext a:hover{color:#102f73}
.dtp-a-isi.w-richtext ul,.dtp-a-isi.w-richtext ol{margin:0 0 1.35rem;padding-left:1.5rem}
.dtp-a-isi.w-richtext li{margin:0 0 .5rem}
.dtp-a-isi.w-richtext li::marker{color:var(--dtp-biru)}
.dtp-a-isi.w-richtext blockquote{margin:1.75rem 0;padding:1.1rem 1.4rem;border-left:4px solid var(--dtp-oranye);
  border-radius:0 1rem 1rem 0;background:var(--dtp-latar);font-size:1.1rem;line-height:1.65;
  font-style:normal;color:var(--dtp-teks)}
/* Gambar hasil scrape membawa atribut width/height asli (mis. 4096x3072):
   kedua sumbu WAJIB dipulihkan bersama, kalau tidak fotonya melar. */
.dtp-a-isi.w-richtext img{max-width:100%;width:100%;height:auto!important;border-radius:1rem;display:block;margin:1.75rem auto}
.dtp-a-isi.w-richtext figure{max-width:none;margin:1.75rem 0}
.dtp-a-isi.w-richtext figure img{margin:0}
.dtp-a-isi.w-richtext figcaption{font-size:.85rem;color:var(--dtp-teks-redup);text-align:center;margin:.6rem 0 0}
.dtp-a-isi.w-richtext iframe,.dtp-a-isi.w-richtext video{max-width:100%;border-radius:1rem}
.dtp-a-isi.w-richtext table{width:100%;border-collapse:collapse;font-size:.95rem;margin:0 0 1.5rem}
.dtp-a-isi.w-richtext td,.dtp-a-isi.w-richtext th{border:1px solid var(--dtp-garis);padding:.55rem .75rem;text-align:left}
.dtp-a-bacajuga{padding:1rem 1.2rem;border-radius:1rem;background:rgba(24,69,161,.06);
  border:1px solid rgba(24,69,161,.12);font-size:.98rem;line-height:1.55}
.dtp-a-bacajuga .label{display:block;font-size:.72rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--dtp-biru);margin:0 0 .3rem}
.dtp-a-bacajuga a{text-decoration:none;font-weight:600;color:var(--dtp-teks)}
.dtp-a-bacajuga a:hover{color:var(--dtp-biru)}
.dtp-a-kredit{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin:2.5rem 0 0;padding:1.25rem 0 0;
  border-top:1px solid var(--dtp-garis);font-size:.9rem;color:var(--dtp-teks-redup)}
.dtp-a-kredit b{color:var(--dtp-teks);font-weight:600}

/* rating — disejajarkan dengan kolom isi */
.dtp-rt{max-width:44rem;margin:0 auto;padding:2rem 0 3rem;color:var(--dtp-teks)}
.dtp-rt-judul{font-size:1.15rem;font-weight:700;margin:0 0 .9rem}
.dtp-rt-notif{border-radius:.8rem;padding:.8rem 1rem;font-size:.9rem;margin:0 0 1rem}
.dtp-rt-notif.ok{background:#eefbf2;border:1px solid #bfe8cc;color:#14532d}
.dtp-rt-notif.galat{background:#fef2f2;border:1px solid #f3c2c2;color:#7f1d1d}
.dtp-rt-atas{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;background:var(--dtp-latar);
  border:1px solid var(--dtp-garis);border-radius:1.25rem;padding:1.1rem 1.4rem}
.dtp-rt-statis{display:flex;gap:.2rem}
.dtp-rt-statis span{width:1.3rem;height:1.3rem;color:rgba(11,18,38,.16)}
.dtp-rt-statis span.isi{color:var(--dtp-oranye)}
.dtp-rt-statis svg,.dtp-rt-pilih svg{width:100%;height:100%;display:block}
.dtp-rt-skor{display:flex;align-items:baseline;gap:.3rem}
.dtp-rt-skor strong{font-size:1.5rem;font-weight:700;line-height:1}
.dtp-rt-skor span{font-size:.9rem;color:var(--dtp-teks-redup)}
.dtp-rt-jml{margin-left:.5rem}
.dtp-rt-form{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin:1rem 0 0}
.dtp-rt-ajak{font-size:.92rem;color:rgba(11,18,38,.7)}
.dtp-rt-pilih{display:flex;flex-direction:row-reverse;gap:.25rem}
.dtp-rt-pilih button{width:2rem;height:2rem;padding:0;border:0;background:none;cursor:pointer;
  color:rgba(11,18,38,.2);transition:color .15s ease,transform .15s ease}
.dtp-rt-pilih button:hover,.dtp-rt-pilih button:focus-visible,
.dtp-rt-pilih button:hover ~ button,.dtp-rt-pilih button:focus-visible ~ button{color:var(--dtp-oranye)}
.dtp-rt-pilih button:hover{transform:scale(1.12)}
.dtp-rt-catatan{font-size:.85rem;color:var(--dtp-teks-redup);margin:1rem 0 0}

/* tulisan lainnya — kartu terang */
.dtp-a-terkait{padding:1rem 0 4rem;color:var(--dtp-teks)}
.dtp-a-terkait-kepala{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin:0 0 1.5rem}
.dtp-a-terkait-kepala h2{font-size:1.6rem;font-weight:700;letter-spacing:-.02em;margin:0;color:var(--dtp-teks)}
.dtp-a-terkait-kepala a{font-size:.95rem;font-weight:600;color:var(--dtp-biru);text-decoration:none}
.dtp-a-terkait-kepala a:hover{text-decoration:underline}
.dtp-a-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
.dtp-kartu{display:flex;flex-direction:column;border-radius:1.25rem;overflow:hidden;background:#fff;
  border:1px solid var(--dtp-garis);text-decoration:none;color:inherit;
  transition:transform .2s ease,box-shadow .2s ease}
.dtp-kartu:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(11,18,38,.1)}
.dtp-kartu .gambar{position:relative;aspect-ratio:16/10;background:#e8edf5;overflow:hidden}
.dtp-kartu .gambar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .35s ease}
.dtp-kartu:hover .gambar img{transform:scale(1.04)}
.dtp-kartu .isi{display:grid;gap:.5rem;padding:1.1rem 1.2rem 1.3rem;align-content:start}
.dtp-kartu .kat{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dtp-biru)}
.dtp-kartu .judul{font-size:1.05rem;font-weight:600;line-height:1.4;color:var(--dtp-teks);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.dtp-kartu .meta{font-size:.82rem;color:var(--dtp-teks-redup)}

@media (max-width:991px){
  .dtp-a-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .dtp-a{padding-top:1.75rem}
  .dtp-a-judul{font-size:1.8rem;letter-spacing:-.02em}
  .dtp-a-lead{font-size:1.05rem}
  .dtp-a-hero{margin-top:1.5rem}
  .dtp-a-hero .bingkai{border-radius:1rem}
  .dtp-a-byline .dtp-d-bagikan{margin-left:0;width:100%}
  .dtp-a-isi.w-richtext{font-size:1rem;line-height:1.75}
  .dtp-a-grid{grid-template-columns:1fr}
}

/* ── beranda (lib/beranda.ts) di atas template Avenora ─────────── */
/* foto kabar terbaru menggantikan video pendaki gunung; tinggi mengikuti .bg-video */
.dtp-hero-foto{display:block;width:100%;height:18.9375rem;object-fit:cover}
@media (max-width:991px){.dtp-hero-foto{height:17rem}}
@media (max-width:767px){.dtp-hero-foto{height:12rem}}
@media (max-width:479px){.dtp-hero-foto{height:17rem}}
/* seksi "black" template → biru DT Peduli (bukan blok gelap) */
.section.black{background-color:var(--dtp-biru)}
.section.black .section-heading{color:#fff}
.section.black .section-badge{background:rgba(255,255,255,.14)!important;border:1px solid rgba(255,255,255,.35)} /* template memberi gambar latar gelap */
.section.black .badge-text{color:#fff!important}
/* kartu kampanye dtpeduli.id: gambar, judul, progres, tombol donasi — 4 kolom seperti kartu destinasi */
.dtp-kampanye-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25rem;margin:2.5rem 0 2rem}
.dtp-kampanye{display:flex;flex-direction:column;border-radius:1.25rem;overflow:hidden;background:#fff;text-decoration:none;color:var(--dtp-teks);
  box-shadow:0 18px 40px -28px rgba(0,0,0,.6);transition:transform .2s ease,box-shadow .2s ease}
.dtp-kampanye:hover{transform:translateY(-4px);box-shadow:0 26px 50px -26px rgba(0,0,0,.6)}
.dtp-kampanye .gambar{position:relative;display:block;aspect-ratio:4/3;background:#e4ebf7}
.dtp-kampanye .gambar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.dtp-kampanye .kosong{position:absolute;inset:0;background:linear-gradient(135deg,#dbe6fb,#f3f6fc)}
.dtp-kampanye .mendesak{position:absolute;top:.7rem;left:.7rem;padding:.25rem .65rem;border-radius:999px;font-size:.68rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;background:var(--dtp-oranye);color:var(--dtp-biru-tua)}
.dtp-kampanye .isi{display:flex;flex-direction:column;gap:.65rem;padding:1rem 1.1rem 1.2rem;flex:1}
.dtp-kampanye .judul{font-size:1rem;font-weight:700;line-height:1.35;color:var(--dtp-teks);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.dtp-progres{display:block;height:.45rem;border-radius:999px;background:rgba(24,69,161,.12);overflow:hidden;margin-top:auto}
.dtp-progres>span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--dtp-biru),#3b7ddd)}
.dtp-progres-info{display:flex;justify-content:space-between;gap:.75rem;font-size:.78rem;line-height:1.45;color:var(--dtp-teks-redup)}
.dtp-progres-info strong{color:var(--dtp-teks);font-weight:700}
.dtp-tombol-donasi{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;padding:.65rem 1rem;border-radius:999px;
  font-size:.9rem;font-weight:700;background:var(--dtp-oranye);color:var(--dtp-biru-tua)}
.dtp-tombol-donasi svg{width:1rem;height:1rem}
@media (max-width:991px){.dtp-kampanye-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.dtp-kampanye-grid{grid-template-columns:1fr;gap:1rem}}
/* angka statistik statis (kolom digit beranimasi dibuang) */
.counter-wrap .counter-value{font-weight:600;letter-spacing:-.02em}
/* nama pilar jadi tautan tanpa mengubah tampilan kartu */
.dtp-tautan-polos{color:inherit;text-decoration:none}
.dtp-tautan-polos:hover{text-decoration:underline;text-underline-offset:3px}
/* jawaban FAQ memuat tautan */
.faq-bottom p a{color:var(--dtp-biru);text-decoration:underline;text-underline-offset:2px}

/* ── halaman terstruktur: Manajemen, Penghargaan, Alamat (lib/halaman-khusus.ts) ── */
.dtp-x .dtp-a-kepala{max-width:44rem}
.dtp-x-intro{max-width:44rem;margin:0 0 2.5rem}
.dtp-x-kosong{color:var(--dtp-teks-redup);font-size:.95rem;margin:1rem 0 3rem}
.dtp-org{margin:0 0 3rem}
.dtp-org-judul{display:flex;align-items:center;gap:.75rem;font-size:1.35rem;font-weight:700;letter-spacing:-.01em;color:var(--dtp-teks);margin:0 0 1.25rem}
.dtp-org-judul::after{content:"";flex:1;height:1px;background:var(--dtp-garis)}
.dtp-org-judul .jumlah{font-size:.8rem;font-weight:600;color:var(--dtp-biru);background:rgba(24,69,161,.1);border-radius:999px;padding:.15rem .6rem}
.dtp-org-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25rem}
.dtp-orang{margin:0;display:grid;gap:.85rem;align-content:start;padding:1rem;border-radius:1.25rem;background:#fff;border:1px solid var(--dtp-garis);
  transition:transform .2s ease,box-shadow .2s ease}
.dtp-orang:hover{transform:translateY(-2px);box-shadow:0 16px 36px -20px rgba(11,18,38,.35)}
.dtp-orang .foto{position:relative;aspect-ratio:1;border-radius:1rem;overflow:hidden;background:#e9eef7;display:flex;align-items:center;justify-content:center}
.dtp-orang .foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.dtp-orang .inisial{font-size:2rem;font-weight:800;letter-spacing:.02em;color:var(--dtp-biru)}
.dtp-orang figcaption{display:grid;gap:.2rem}
.dtp-orang strong{font-size:1rem;font-weight:700;line-height:1.3;color:var(--dtp-teks)}
.dtp-orang span{font-size:.85rem;line-height:1.4;color:var(--dtp-teks-redup)}
.dtp-orang p{margin:.35rem 0 0;font-size:.85rem;line-height:1.55;color:var(--dtp-teks-redup)}

.dtp-hadiah-tahun{margin:0 0 3rem}
.dtp-hadiah-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
.dtp-hadiah{display:flex;flex-direction:column;border-radius:1.25rem;overflow:hidden;background:#fff;border:1px solid var(--dtp-garis)}
.dtp-hadiah .gambar{position:relative;aspect-ratio:4/3;background:#eef2f9;display:flex;align-items:center;justify-content:center}
.dtp-hadiah .gambar img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;padding:.75rem}
.dtp-hadiah .gambar .kosong{width:3rem;height:3rem;color:rgba(24,69,161,.35)}
.dtp-hadiah .gambar .kosong svg{width:100%;height:100%}
.dtp-hadiah .isi{display:grid;gap:.45rem;align-content:start;padding:1.1rem 1.2rem 1.3rem}
.dtp-hadiah .meta{display:flex;flex-wrap:wrap;gap:.35rem .75rem;font-size:.78rem;color:var(--dtp-teks-redup)}
.dtp-hadiah .pemberi{font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--dtp-biru)}
.dtp-hadiah h3{margin:0;font-size:1.02rem;line-height:1.4;font-weight:600;color:var(--dtp-teks)}
.dtp-hadiah p{margin:0;font-size:.88rem;line-height:1.55;color:var(--dtp-teks-redup)}
.dtp-x-tautan{display:inline-flex;align-items:center;gap:.4rem;margin-top:.4rem;font-size:.88rem;font-weight:600;color:var(--dtp-biru);text-decoration:none}
.dtp-x-tautan svg{width:1rem;height:1rem}
.dtp-x-tautan:hover{text-decoration:underline;text-underline-offset:3px}

/* kantor pusat: foto gedung | info + kartu kontak | tombol peta (meniru dtpeduli.org) */
.dtp-pusat{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr) auto;gap:1.5rem;align-items:center;
  padding:1.25rem;border-radius:1.5rem;background:#fff;border:1px solid var(--dtp-garis);margin:0 0 2rem;
  box-shadow:0 20px 50px -30px rgba(11,18,38,.35)}
.dtp-pusat-foto{aspect-ratio:4/3;border-radius:1rem;overflow:hidden;background:#e9eef7}
.dtp-pusat-foto img{width:100%;height:100%;object-fit:cover;display:block}
.dtp-pusat-isi{display:grid;gap:.5rem}
.dtp-pusat-isi h2{margin:0;font-size:1.35rem;font-weight:700;letter-spacing:-.01em;color:var(--dtp-teks)}
.dtp-pusat-isi .alamat,.dtp-kantor .alamat{margin:0;font-size:.95rem;line-height:1.6;color:var(--dtp-teks-redup);white-space:pre-line}
.kode{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.06em;padding:.15rem .5rem;border-radius:.5rem;
  background:rgba(24,69,161,.1);color:var(--dtp-biru);vertical-align:middle}
.dtp-kontak-daftar{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.35rem}
.dtp-kontak-kartu{display:inline-flex;align-items:center;gap:.65rem;padding:.55rem .95rem .55rem .6rem;border-radius:.9rem;
  background:#fff;border:1px solid var(--dtp-garis);text-decoration:none;color:var(--dtp-teks);transition:border-color .2s ease,box-shadow .2s ease}
.dtp-kontak-kartu:hover{border-color:rgba(24,69,161,.35);box-shadow:0 8px 20px -12px rgba(24,69,161,.5)}
.dtp-kontak-kartu .ikon{display:inline-flex;width:2.1rem;height:2.1rem;align-items:center;justify-content:center;border-radius:999px;background:var(--dtp-biru);color:#fff;flex:none}
.dtp-kontak-kartu .ikon svg{width:1rem;height:1rem}
.dtp-kontak-kartu .teks{display:grid;line-height:1.2}
.dtp-kontak-kartu .label{font-size:.66rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--dtp-teks-redup)}
.dtp-kontak-kartu .nilai{font-size:.9rem;font-weight:700;white-space:nowrap}
.dtp-tombol-peta{display:inline-flex;align-items:center;gap:.45rem;padding:.6rem 1.05rem;border-radius:999px;font-size:.85rem;font-weight:700;
  text-decoration:none;background:var(--dtp-oranye);color:var(--dtp-biru-tua);transition:transform .2s ease}
.dtp-tombol-peta:hover{transform:translateY(-1px)}
.dtp-tombol-peta svg{width:1rem;height:1rem}
.dtp-pusat-peta{display:flex;align-items:center;justify-content:center;padding:0 .5rem}

/* nomor rekening: kartu per bank (logo + nama + kode), baris rekening dengan tombol salin */
.dtp-bank-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;margin:0 0 1.5rem}
.dtp-bank{display:flex;flex-direction:column;border-radius:1.5rem;overflow:hidden;background:#fff;border:1px solid var(--dtp-garis);
  box-shadow:0 20px 50px -30px rgba(11,18,38,.35)}
.dtp-bank-kepala{display:flex;align-items:center;gap:.9rem;padding:1rem 1.25rem;border-bottom:1px solid var(--dtp-garis);background:#f7f9fd}
.dtp-bank-kepala .logo{display:inline-flex;align-items:center;justify-content:center;flex:none;width:4.5rem;height:2.6rem;padding:.3rem .45rem;
  border-radius:.75rem;background:#fff;border:1px solid var(--dtp-garis);color:var(--dtp-biru)}
.dtp-bank-kepala .logo img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.dtp-bank-kepala .logo svg{width:1.5rem;height:1.5rem}
.dtp-bank-kepala h2{margin:0;flex:1;min-width:0;font-size:1.08rem;font-weight:700;line-height:1.3;color:var(--dtp-teks)}
.dtp-bank-kepala .kode{flex:none}
.dtp-bank-daftar{display:grid;padding:.35rem 0}
.dtp-rek{display:flex;align-items:center;gap:1rem;padding:.85rem 1.25rem}
.dtp-rek+.dtp-rek{border-top:1px dashed var(--dtp-garis)}
.dtp-rek-isi{display:grid;gap:.15rem;min-width:0;flex:1}
.dtp-rek .peruntukan{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dtp-oranye-tua,#b86e00)}
.dtp-rek .nomor{font-size:1.28rem;font-weight:700;letter-spacing:.02em;font-variant-numeric:tabular-nums;color:var(--dtp-biru);word-break:break-all}
.dtp-rek .an{font-size:.86rem;color:var(--dtp-teks-redup)}
.dtp-salin{display:inline-flex;align-items:center;gap:.4rem;flex:none;padding:.5rem .85rem;border-radius:999px;border:1px solid var(--dtp-garis);
  background:#fff;color:var(--dtp-biru);font:inherit;font-size:.8rem;font-weight:700;cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease}
.dtp-salin svg{width:.95rem;height:.95rem}
.dtp-salin:hover{border-color:var(--dtp-biru);background:rgba(24,69,161,.06)}
.dtp-salin.tersalin{background:var(--dtp-biru);border-color:var(--dtp-biru);color:#fff}
.dtp-rek-catatan{display:grid;gap:.6rem;padding:1.4rem 1.5rem;border-radius:1.5rem;background:rgba(255,175,35,.12);border:1px solid rgba(255,175,35,.4);margin:0 0 2rem}
.dtp-rek-catatan h2{margin:0;font-size:1.1rem;font-weight:700;color:var(--dtp-teks)}
.dtp-rek-catatan p{margin:0;font-size:.95rem;line-height:1.6;color:var(--dtp-teks)}
.dtp-rek-catatan a{color:var(--dtp-biru);font-weight:600}
@media (max-width:767px){
  .dtp-bank-grid{grid-template-columns:minmax(0,1fr)}
  .dtp-rek{padding:.8rem 1rem}
  .dtp-rek .nomor{font-size:1.12rem}
  .dtp-salin span{display:none}
  .dtp-salin{padding:.55rem}
}

/* dokumen (hasil audit / laporan): kartu sampul A4 + judul + tombol unduh */
.dtp-dok-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;margin:0 0 2.5rem}
.dtp-dok{display:flex;flex-direction:column;border-radius:1.25rem;overflow:hidden;background:#fff;border:1px solid var(--dtp-garis);
  box-shadow:0 20px 50px -30px rgba(11,18,38,.35);transition:transform .2s ease,box-shadow .2s ease}
.dtp-dok:hover{transform:translateY(-3px);box-shadow:0 26px 50px -28px rgba(11,18,38,.45)}
.dtp-dok .sampul{position:relative;display:block;aspect-ratio:4/3;background:#eef2f9;overflow:hidden}
.dtp-dok .sampul img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.dtp-dok .sampul .kosong{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(24,69,161,.35)}
.dtp-dok .sampul .kosong svg{width:3rem;height:3rem}
.dtp-dok .tahun{position:absolute;top:.75rem;left:.75rem;padding:.25rem .65rem;border-radius:999px;font-size:.75rem;font-weight:700;
  background:var(--dtp-biru);color:#fff;box-shadow:0 6px 16px -8px rgba(0,0,0,.5)}
.dtp-dok .isi{display:grid;gap:.5rem;align-content:start;padding:1.1rem 1.2rem 1.3rem;flex:1}
.dtp-dok h3{margin:0;font-size:1.02rem;line-height:1.4;font-weight:700;color:var(--dtp-teks)}
.dtp-dok p{margin:0;font-size:.88rem;line-height:1.55;color:var(--dtp-teks-redup)}
.dtp-dok .meta{font-size:.78rem;color:var(--dtp-teks-redup)}
.dtp-dok .tombol{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:auto;padding-top:.35rem}
.dtp-tombol-unduh,.dtp-tombol-baca{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;padding:.65rem .9rem;border-radius:999px;
  font-size:.88rem;font-weight:700;text-decoration:none;transition:transform .2s ease,background .2s ease}
.dtp-tombol-baca{background:var(--dtp-biru);color:#fff}
.dtp-tombol-unduh{background:var(--dtp-oranye);color:var(--dtp-biru-tua)}
.dtp-tombol-unduh:hover,.dtp-tombol-baca:hover{transform:translateY(-1px)}
.dtp-tombol-unduh svg,.dtp-tombol-baca svg{width:1rem;height:1rem}
@media (max-width:991px){.dtp-dok-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.dtp-dok-grid{grid-template-columns:minmax(0,1fr)}}

/* daftar cabang: bar judul biru + saringan, lalu baris kantor */
.dtp-cabang{border-radius:1.5rem;overflow:hidden;border:1px solid var(--dtp-garis);background:#fff;margin:0 0 1rem}
.dtp-cabang-kepala{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1rem 1.25rem;
  background:var(--dtp-biru);color:#fff}
.dtp-cabang-kepala h2{margin:0;font-size:1.1rem;font-weight:700;display:flex;align-items:center;gap:.6rem;color:#fff}
.dtp-cabang-kepala .jumlah{font-size:.75rem;font-weight:700;padding:.15rem .55rem;border-radius:999px;background:rgba(255,255,255,.18)}
.dtp-cabang-saring{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.dtp-pilih select{appearance:none;-webkit-appearance:none;padding:.55rem 2.2rem .55rem .9rem;border-radius:.75rem;border:1px solid rgba(255,255,255,.25);
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%230b1226' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right .85rem center/.7rem;
  font:inherit;font-size:.9rem;color:var(--dtp-teks);min-width:11rem}
.dtp-cari{display:flex;align-items:center;gap:.5rem;width:min(100%,18rem);padding:.5rem .9rem;border-radius:.75rem;background:#fff;border:1px solid rgba(255,255,255,.25);color:var(--dtp-teks-redup)}
.dtp-cari:focus-within{box-shadow:0 0 0 3px rgba(255,175,35,.45)}
.dtp-cari svg{width:1rem;height:1rem;flex:none}
.dtp-cari input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:.9rem;color:var(--dtp-teks)}
.dtp-cabang-daftar{display:grid;gap:.85rem;padding:1rem}
.dtp-kantor{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem 1.5rem;align-items:center;padding:1.1rem 1.25rem;border-radius:1rem;
  background:#fff;border:1px solid var(--dtp-garis);box-shadow:0 10px 30px -24px rgba(11,18,38,.35)}
.dtp-kantor[hidden]{display:none}
.dtp-kantor .info{display:grid;gap:.4rem;justify-items:start}
.dtp-kantor h3{margin:0;font-size:1.02rem;line-height:1.35;font-weight:700;color:var(--dtp-teks)}
.dtp-kantor .wilayah{font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--dtp-teks-redup)}
.dtp-kantor .alamat{max-width:34rem}
.dtp-kantor .dtp-kontak-daftar{margin:0;justify-content:flex-end}
.dtp-x-kosong{padding:0 1.25rem 1.25rem}

@media (max-width:991px){
  .dtp-org-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dtp-hadiah-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dtp-pusat{grid-template-columns:minmax(0,12rem) minmax(0,1fr)}
  .dtp-pusat-peta{grid-column:1/-1;justify-content:flex-start;padding:0}
}
@media (max-width:600px){
  .dtp-org-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem}
  .dtp-orang{padding:.75rem}
  .dtp-orang .inisial{font-size:1.5rem}
  .dtp-hadiah-grid{grid-template-columns:1fr}
  .dtp-pusat{grid-template-columns:1fr;padding:1rem;border-radius:1.25rem}
  .dtp-pusat-isi h2{font-size:1.2rem}
  .dtp-cabang-saring,.dtp-cari,.dtp-pilih select{width:100%}
  .dtp-kantor{grid-template-columns:1fr;padding:1rem}
  .dtp-kantor .dtp-kontak-daftar{justify-content:flex-start}
  .dtp-kontak-kartu{flex:1 1 12rem}
}

/* ── /donasi: daftar kampanye dtpeduli.id (lib/halaman-khusus.ts halamanDonasi) ── */
.dtp-x:has(.dtp-donasi) .dtp-a-kepala{margin-left:0}
.dtp-donasi{margin:0 0 3.5rem}
.dtp-donasi-alat{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;justify-content:space-between;
  padding:.75rem;border-radius:1.25rem;background:var(--dtp-latar);border:1px solid var(--dtp-garis)}
.dtp-donasi-saring{display:flex;gap:.4rem;flex-wrap:wrap}
.dtp-donasi-saring button{display:inline-flex;align-items:center;gap:.45rem;padding:.5rem 1rem;border-radius:999px;border:1px solid transparent;
  background:transparent;font:inherit;font-size:.9rem;font-weight:600;color:var(--dtp-teks-redup);cursor:pointer;transition:background-color .15s,color .15s}
.dtp-donasi-saring button span{font-size:.75rem;font-weight:700;padding:.05rem .45rem;border-radius:999px;background:rgba(11,18,38,.08)}
.dtp-donasi-saring button:hover{color:var(--dtp-biru)}
.dtp-donasi-saring button[aria-pressed="true"]{background:var(--dtp-biru);color:#fff}
.dtp-donasi-saring button[aria-pressed="true"] span{background:rgba(255,255,255,.2)}
.dtp-donasi-alat .dtp-cari{border:1px solid var(--dtp-garis);width:min(100%,20rem)}
.dtp-donasi-alat .dtp-cari:focus-within{box-shadow:0 0 0 3px rgba(24,69,161,.2)}
.dtp-donasi-grid{margin:1.75rem 0 1.5rem}
.dtp-donasi-grid .dtp-kampanye{border:1px solid var(--dtp-garis);box-shadow:0 18px 40px -32px rgba(11,18,38,.45)}
.dtp-donasi-grid .dtp-kampanye[hidden]{display:none}
.dtp-donasi-muat{display:flex;align-items:center;justify-content:center;gap:.6rem;min-height:3rem;color:var(--dtp-teks-redup);font-size:.9rem}
.dtp-donasi-muat[hidden]{display:none}
/* spinner selalu berputar; teks muncul saat tahap berikutnya disiapkan */
.dtp-donasi-muat span:last-child{opacity:0;transition:opacity .15s}
.dtp-donasi-muat.sibuk span:last-child{opacity:1}
.dtp-spinner{width:1.6rem;height:1.6rem;border-radius:999px;border:3px solid rgba(24,69,161,.15);border-top-color:var(--dtp-biru);
  animation:dtp-putar .8s linear infinite}
@keyframes dtp-putar{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.dtp-spinner{animation-duration:2.4s}}
.dtp-donasi-gagal{display:flex;flex-direction:column;align-items:flex-start;gap:1rem;padding:1.75rem;border-radius:1.25rem;background:var(--dtp-latar)}
.dtp-donasi-gagal p{margin:0;color:var(--dtp-teks-redup)}
.dtp-donasi-gagal .dtp-tombol-donasi{text-decoration:none}
.dtp-donasi-jalur{margin:0 0 4rem;padding:2rem;border-radius:1.5rem;background:var(--dtp-biru);color:#fff}
.dtp-donasi-jalur h2{margin:0 0 1.25rem;font-size:1.5rem;line-height:1.2;color:#fff}
.dtp-donasi-jalur-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.dtp-donasi-jalur a{position:relative;display:flex;flex-direction:column;gap:.3rem;padding:1.1rem 2.75rem 1.1rem 1.1rem;border-radius:1rem;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:#fff;text-decoration:none;transition:background-color .15s,transform .15s}
.dtp-donasi-jalur a:hover{background:rgba(255,255,255,.18);transform:translateY(-2px)}
.dtp-donasi-jalur .nama{font-weight:700;font-size:1.02rem}
.dtp-donasi-jalur .desk{font-size:.85rem;color:rgba(255,255,255,.75);line-height:1.4}
.dtp-donasi-jalur svg{position:absolute;right:1rem;top:50%;width:1.1rem;height:1.1rem;transform:translateY(-50%);color:var(--dtp-oranye)}
@media (max-width:991px){.dtp-donasi-jalur-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* HP: tetap 2 kartu per baris (permintaan pemilik), kartu dipadatkan */
@media (max-width:520px){
  .dtp-donasi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
  .dtp-donasi-grid .dtp-kampanye{border-radius:1rem}
  .dtp-donasi-grid .dtp-kampanye .isi{gap:.5rem;padding:.7rem .7rem .8rem}
  .dtp-donasi-grid .dtp-kampanye .judul{font-size:.85rem;line-height:1.3;min-height:2.6em}
  .dtp-donasi-grid .dtp-kampanye .mendesak{top:.45rem;left:.45rem;padding:.2rem .5rem;font-size:.58rem}
  .dtp-donasi-grid .dtp-progres{height:.35rem}
  .dtp-donasi-grid .dtp-progres-info{flex-wrap:wrap;gap:.1rem .5rem;font-size:.68rem}
  .dtp-donasi-grid .dtp-tombol-donasi{padding:.5rem .6rem;font-size:.8rem}
  .dtp-donasi-alat{padding:.6rem}
  .dtp-donasi-alat .dtp-cari{width:100%}
  .dtp-donasi-jalur{padding:1.5rem 1.1rem}
  .dtp-donasi-jalur-grid{grid-template-columns:1fr}
}

/* ── Tentang Kami (prosa): lib/halaman-khusus.ts halamanTentang ── */
.dtp-t{color:var(--dtp-teks);padding:0 0 4.5rem}
.dtp-t .w-container{max-width:62rem;margin-left:auto;margin-right:auto}
.dtp-t-hero{position:relative;background:var(--dtp-biru);color:#fff;text-align:center;padding:4.5rem 0 3.5rem;overflow:hidden;
  background-image:radial-gradient(circle at 12% 20%,rgba(255,255,255,.08) 0 9rem,transparent 9rem),radial-gradient(circle at 88% 90%,rgba(255,255,255,.06) 0 12rem,transparent 12rem)}
.dtp-t-hero.ada-sorotan{padding-bottom:9.5rem}
.dtp-t-grup{margin:0 0 .4rem;color:var(--dtp-oranye);font-weight:700;font-size:1.15rem;letter-spacing:-.01em}
.dtp-t-hero h1{margin:0;color:#fff;font-size:2.4rem;line-height:1.15;font-weight:700;letter-spacing:-.02em}
.dtp-t-sorotan{position:relative;display:grid;grid-template-columns:minmax(0,1fr);align-items:end;margin:-7rem 0 0;
  border-radius:1.25rem;background:var(--dtp-oranye);color:#fff;overflow:hidden;box-shadow:0 30px 60px -40px rgba(11,18,38,.6);
  background-image:radial-gradient(circle at 0 0,rgba(255,255,255,.18) 0 7rem,transparent 7rem)}
.dtp-t-sorotan.berfoto{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
.dtp-t-sorotan .teks{text-align:left;padding:2.25rem 2.5rem 2.25rem 3.25rem;align-self:center}
.dtp-t-sorotan blockquote{margin:0 0 1.5rem;padding:0;border:0;font-size:1.02rem;line-height:1.7;font-weight:500;color:#fff;max-width:34rem}
.dtp-t-sorotan figcaption{display:grid;gap:.2rem;text-align:left;margin:0;max-width:none}
.dtp-t-sorotan figcaption span{font-size:.85rem;font-weight:700;color:rgba(255,255,255,.92)}
.dtp-t-sorotan figcaption strong{font-size:1.45rem;line-height:1.2;font-weight:800;letter-spacing:-.01em;color:#fff}
.dtp-t-sorotan .foto{display:block;width:100%;max-height:22rem;object-fit:contain;object-position:bottom center;align-self:end}
.dtp-t-badan{display:grid;grid-template-columns:minmax(0,1fr) 19rem;gap:4rem;align-items:start;margin-top:4rem}
.dtp-t-judul{margin:0 0 .6rem;font-size:1.9rem;line-height:1.2;font-weight:700;letter-spacing:-.02em;color:var(--dtp-teks)}
.dtp-t-remah{display:flex;flex-wrap:wrap;gap:.45rem;font-size:.88rem;color:var(--dtp-teks-redup);margin:0 0 2rem}
.dtp-t-remah a{color:inherit;text-decoration:none}
.dtp-t-remah a:hover{color:var(--dtp-biru)}
.dtp-t-remah [aria-current]{color:var(--dtp-biru);font-weight:600}
.dtp-t-gambar{margin:0 0 1.75rem;border-radius:1rem;overflow:hidden}
.dtp-t-gambar img{display:block;width:100%;height:auto}
.dtp-t-isi .dtp-a-isi{max-width:none}
.dtp-t-samping{position:sticky;top:7rem;padding:1.75rem 1.75rem 1.25rem;border-radius:1.1rem;background:#fff;border:1px solid var(--dtp-garis);
  box-shadow:0 24px 50px -40px rgba(11,18,38,.5)}
.dtp-t-samping h2{margin:0 0 1rem;font-size:1.3rem;line-height:1.25;font-weight:700;color:var(--dtp-teks)}
.dtp-t-samping ul{list-style:none;margin:0;padding:0}
.dtp-t-samping a{position:relative;display:block;padding:.7rem .75rem .7rem 1.6rem;border-radius:.6rem;color:var(--dtp-teks-redup);text-decoration:none;font-size:.95rem;transition:background-color .15s,color .15s}
.dtp-t-samping a::before{content:"";position:absolute;left:.7rem;top:50%;width:.38rem;height:.38rem;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-50%) rotate(-45deg);opacity:.6}
.dtp-t-samping a:hover{color:var(--dtp-biru);background:rgba(24,69,161,.06)}
.dtp-t-samping a[aria-current]{color:var(--dtp-biru);font-weight:600;background:rgba(24,69,161,.08)}
@media (max-width:991px){
  .dtp-t-badan{grid-template-columns:1fr;gap:2.5rem}
  .dtp-t-samping{position:static}
  .dtp-t-sorotan.berfoto{grid-template-columns:minmax(0,1fr) minmax(0,.8fr)}
}
@media (max-width:640px){
  .dtp-t-hero{padding:3rem 0 2.5rem}
  .dtp-t-hero.ada-sorotan{padding-bottom:6rem}
  .dtp-t-hero h1{font-size:1.9rem}
  .dtp-t-sorotan{margin-top:-4rem}
  .dtp-t-sorotan.berfoto{grid-template-columns:1fr}
  .dtp-t-sorotan .teks{text-align:left;padding:1.75rem 1.4rem}
  .dtp-t-sorotan .foto{max-height:16rem}
  .dtp-t-badan{margin-top:2.5rem}
  .dtp-t-judul{font-size:1.6rem}
}

/* latar hero beranda: foto perahu relawan DT Peduli menggantikan gunung
   template (.home-hero-area di CSS Webflow). WebP di public/dtp — ganti nama
   berkas = cache-bust. */
.home-hero-area{background-image:linear-gradient(#6666661f 9.21%,#0003 90.57%),url("/dtp/hero-perahu.webp");
  background-position:0 0,50% 60%;background-size:auto,cover;background-repeat:no-repeat}
@media (max-width:991px){.home-hero-area{background-image:linear-gradient(#6666661f 9.21%,#0003 90.57%),url("/dtp/hero-perahu-1080.webp")}}

/* ── halaman 404 (lib/halaman-404.ts) ─────────────────────────────── */
.dtp-404{color:var(--dtp-teks);padding:3.5rem 0 2rem}
.dtp-404-kepala{max-width:44rem;margin:0 auto 3rem;text-align:center}
.dtp-404-kode{font-size:clamp(5.5rem,16vw,9rem);font-weight:800;line-height:.95;letter-spacing:-.05em;margin:0 0 1rem;color:var(--dtp-biru)}
.dtp-404-kode span{color:var(--dtp-oranye)}
.dtp-404 h1{font-size:clamp(1.6rem,3.4vw,2.4rem);line-height:1.2;color:var(--dtp-teks);margin:0 0 1rem}
.dtp-404-pesan{font-size:1.05rem;line-height:1.7;color:var(--dtp-teks-redup);margin:0 auto 1.75rem;max-width:36rem}
.dtp-404-aksi{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem}
.dtp-404-aksi .dtp-tombol-donasi{margin:0;padding:.8rem 1.35rem;font-size:.95rem;text-decoration:none}
.dtp-404-beranda{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 1.35rem;border-radius:999px;border:1px solid var(--dtp-garis);
  background:#fff;color:var(--dtp-teks);font-weight:600;font-size:.95rem;text-decoration:none;transition:border-color .2s,color .2s}
.dtp-404-beranda svg{width:1.1rem;height:1.1rem}
.dtp-404-beranda:hover{border-color:var(--dtp-biru);color:var(--dtp-biru)}
.dtp-404-pintasan{margin:0 0 3.5rem}
.dtp-404-pintasan .dtp-donasi-jalur-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:991px){.dtp-404-pintasan .dtp-donasi-jalur-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.dtp-404-kampanye{margin:0 0 2rem}
.dtp-404-kampanye-kepala{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 1.5rem}
.dtp-404-kampanye-kepala h2{font-size:1.35rem;letter-spacing:-.01em;color:var(--dtp-teks);margin:0}
.dtp-404-kampanye-kepala a{display:inline-flex;align-items:center;gap:.4rem;color:var(--dtp-biru);font-weight:600;font-size:.9rem;text-decoration:none}
.dtp-404-kampanye-kepala a svg{width:1rem;height:1rem}
.dtp-404-kampanye .dtp-kampanye-grid{margin:1.5rem 0 1rem}

@media (max-width:760px){
  .dtp-404{padding:2.5rem 0 1rem}
  .dtp-404-kepala{margin-bottom:2.25rem}
  .dtp-404-aksi a{width:100%;justify-content:center}
}

/* ── pencarian situs (lib/cari-ui.ts): ikon navbar, modal, kolom memanjang ── */
.dtp-cari-nav{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;margin-right:.5rem;border-radius:999px;border:1px solid var(--dtp-garis);background:rgba(255,255,255,.7);color:var(--dtp-teks);cursor:pointer;flex:none;transition:background-color .15s,color .15s}
.dtp-cari-nav svg{width:1.15rem;height:1.15rem}
.dtp-cari-nav:hover,.dtp-cari-nav:focus-visible{background:var(--dtp-biru);color:#fff;border-color:var(--dtp-biru)}
.navbar .nav-wrapper{align-items:center}
.dtp-cari-terbuka{overflow:hidden}
.dtp-cari-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:flex-start;justify-content:center;padding:6vh 1rem 1rem}
.dtp-cari-modal[hidden]{display:none}
.dtp-cari-latar{position:absolute;inset:0;background:rgba(11,18,38,.55);backdrop-filter:blur(3px)}
.dtp-cari-kotak{position:relative;width:min(100%,44rem);max-height:86vh;display:flex;flex-direction:column;border-radius:1.25rem;background:#fff;box-shadow:0 30px 80px -30px rgba(11,18,38,.6);overflow:hidden}
.dtp-cari-input{display:flex;align-items:center;gap:.6rem;padding:.75rem 1rem;border-bottom:1px solid var(--dtp-garis);margin:0}
.dtp-cari-input svg{width:1.25rem;height:1.25rem;color:var(--dtp-teks-redup);flex:none}
.dtp-cari-input input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:1.05rem;color:var(--dtp-teks);font-family:inherit}
.dtp-cari-input input::-webkit-search-cancel-button{display:none}
.dtp-cari-tutup{width:2rem;height:2rem;border-radius:999px;border:0;background:var(--dtp-latar);color:var(--dtp-teks);font-size:1.2rem;line-height:1;cursor:pointer}
.dtp-cari-hasil{overflow-y:auto;padding:.5rem 0 .75rem}
.dtp-cari-petunjuk{margin:1rem 1.25rem;color:var(--dtp-teks-redup);font-size:.9rem}
.dtp-cari-grup{padding:.25rem 0}
.dtp-cari-grup h3,.dtp-cari-grup h2{display:flex;align-items:baseline;justify-content:space-between;margin:.5rem 1.25rem .25rem;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dtp-teks-redup)}
.dtp-cari-grup h3 a,.dtp-cari-grup h2 a{font-size:.75rem;font-weight:600;letter-spacing:0;text-transform:none;color:var(--dtp-biru);text-decoration:none}
.dtp-cari-grup ul{list-style:none;margin:0;padding:0}
.dtp-cari-grup li a{display:flex;align-items:center;gap:.8rem;padding:.5rem 1.25rem;text-decoration:none;color:var(--dtp-teks)}
.dtp-cari-grup li a:hover,.dtp-cari-grup li a:focus-visible{background:rgba(24,69,161,.07)}
.dtp-cari-grup img,.dtp-cari-kosong{width:3.25rem;height:2.5rem;border-radius:.5rem;object-fit:cover;flex:none;background:linear-gradient(135deg,#dbe6fb,#f3f6fc)}
.dtp-cari-teks{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.dtp-cari-teks .judul{font-weight:600;font-size:.95rem;line-height:1.3}
.dtp-cari-teks .ket{font-size:.8rem;color:var(--dtp-teks-redup);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dtp-cari-teks .meta{font-size:.72rem;color:var(--dtp-biru)}
/* kolom memanjang (daftar Berita/Artikel, halaman /cari) */
.dtp-cari-panjang{display:flex;align-items:center;gap:.6rem;width:100%;margin:0 0 1.5rem;padding:.35rem .4rem .35rem 1rem;border-radius:999px;background:#fff;border:1px solid var(--dtp-garis);box-shadow:0 14px 34px -28px rgba(11,18,38,.5)}
.dtp-cari-panjang:focus-within{border-color:var(--dtp-biru);box-shadow:0 0 0 3px rgba(24,69,161,.15)}
.dtp-cari-panjang svg{width:1.15rem;height:1.15rem;color:var(--dtp-teks-redup);flex:none}
.dtp-cari-panjang input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:1rem;color:var(--dtp-teks);font-family:inherit}
.dtp-cari-panjang input::-webkit-search-cancel-button{display:none}
.dtp-cari-hapus{color:var(--dtp-teks-redup);text-decoration:none;font-size:1.2rem;line-height:1;padding:0 .25rem}
.dtp-cari-panjang button{flex:none;padding:.55rem 1.1rem;border-radius:999px;border:0;background:var(--dtp-biru);color:#fff;font-weight:600;font-size:.9rem;cursor:pointer}
.dtp-k-cari{margin:1.75rem 0 1.5rem}
.dtp-cari-halaman .dtp-a-kepala{margin-bottom:2rem}
.dtp-cari-halaman .dtp-a-kepala h1{margin:0 0 1rem;font-size:2rem;color:var(--dtp-teks)}
.dtp-cari-ringkas{color:var(--dtp-teks-redup);margin:0}
.dtp-cari-halaman .dtp-cari-grup{max-width:46rem;margin:0 0 1.5rem}
.dtp-cari-halaman .dtp-cari-grup h2{margin-left:0;margin-right:0}
.dtp-cari-halaman .dtp-cari-grup li a{padding:.6rem .5rem;border-radius:.75rem}
@media (max-width:760px){
  .dtp-cari-modal{padding:0}
  .dtp-cari-kotak{border-radius:0 0 1.25rem 1.25rem;max-height:100vh;height:100dvh}
  .dtp-cari-nav{width:2.25rem;height:2.25rem;margin-right:.25rem}
  .dtp-cari-panjang button{padding:.5rem .8rem}
}
/* desktop: menu tetap di tengah, ikon pencarian menempel ke tombol Donasi */
@media (min-width:992px){.navbar .nav-wrapper>.navigation{margin-left:auto;margin-right:auto}.dtp-cari-nav{margin-right:.75rem}}
/* HP/tablet: ikon pencarian + hamburger berdampingan di sisi kanan */
@media (max-width:991px){.navbar .nav-wrapper>.dtp-cari-nav{order:1;margin-left:auto;margin-right:.5rem}.navbar .nav-wrapper>.menu-button{order:2}}

/* ── /donasi: tombol Filter + popup saring/urut (lib/halaman-khusus.ts) ── */
.dtp-donasi-alat-kanan{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.dtp-saring-tombol{position:relative;display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .9rem;border-radius:999px;border:1px solid var(--dtp-garis);background:#fff;color:var(--dtp-teks);font-weight:600;font-size:.9rem;cursor:pointer}
.dtp-saring-tombol svg{width:1.05rem;height:1.05rem}
.dtp-saring-tombol:hover,.dtp-saring-tombol.aktif{border-color:var(--dtp-biru);color:var(--dtp-biru)}
.dtp-saring-tombol em{font-style:normal;min-width:1.25rem;height:1.25rem;padding:0 .35rem;border-radius:999px;background:var(--dtp-oranye);color:#0b1f4d;font-size:.72rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.dtp-saring-tombol em[hidden]{display:none}
/* kunci gulir halaman saat popup terbuka — iOS Safari mengabaikan overflow:hidden
   pada body, jadi body dipaku (position:fixed) dengan posisi gulir disimpan skrip */
.dtp-saring-terbuka{overflow:hidden}
.dtp-saring-terbuka body{position:fixed;left:0;right:0;width:100%;overflow:hidden}
.dtp-saring-popup{position:fixed;inset:0;z-index:1000;display:flex;align-items:flex-end;justify-content:center}
.dtp-saring-popup[hidden]{display:none}
.dtp-saring-latar{position:absolute;inset:0;background:rgba(11,18,38,.5)}
.dtp-saring-kotak{position:relative;width:100%;max-height:88vh;display:flex;flex-direction:column;background:#fff;border-radius:1.25rem 1.25rem 0 0;box-shadow:0 -20px 60px -30px rgba(11,18,38,.6)}
.dtp-saring-kepala{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid var(--dtp-garis);font-size:1.05rem}
.dtp-saring-x{width:2rem;height:2rem;border-radius:999px;border:0;background:var(--dtp-latar);font-size:1.2rem;line-height:1;cursor:pointer;color:var(--dtp-teks)}
.dtp-saring-isi{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;padding:.5rem 1.25rem 1rem}
.dtp-saring-kepala,.dtp-saring-kaki{flex:0 0 auto}
.dtp-saring-isi fieldset{border:0;margin:.75rem 0 0;padding:0}
.dtp-saring-isi legend{font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dtp-teks-redup);margin-bottom:.4rem}
.dtp-saring-isi legend small{font-weight:500;letter-spacing:0;text-transform:none}
.dtp-saring-opsi{display:flex;align-items:center;gap:.6rem;padding:.5rem .25rem;border-bottom:1px solid rgba(11,18,38,.05);font-size:.95rem;cursor:pointer}
.dtp-saring-opsi input{width:1.1rem;height:1.1rem;accent-color:var(--dtp-biru);margin:0;flex:none}
.dtp-saring-kaki{display:flex;gap:.6rem;padding:.85rem 1.25rem calc(.85rem + env(safe-area-inset-bottom));border-top:1px solid var(--dtp-garis);background:#fff}
.dtp-saring-reset{flex:1;padding:.7rem 1rem;border-radius:999px;border:1px solid var(--dtp-garis);background:#fff;color:var(--dtp-teks);font-weight:600;cursor:pointer}
.dtp-saring-terapkan{flex:1.4;margin:0;justify-content:center;border:0;cursor:pointer;font-size:.95rem;white-space:nowrap}
.dtp-saring-terapkan span{font-weight:500;opacity:.85;margin-left:.3rem;font-size:.85rem}
@media (min-width:761px){
  .dtp-saring-popup{align-items:flex-start;padding:10vh 1rem 1rem}
  .dtp-saring-kotak{width:min(100%,30rem);border-radius:1.25rem;max-height:80vh}
}
@media (max-width:520px){
  .dtp-donasi-alat-kanan{width:100%}
  .dtp-donasi-alat-kanan .dtp-cari{flex:1}
  .dtp-saring-tombol span{display:none}
  .dtp-saring-tombol{padding:.55rem .7rem}
}
/* desktop: kolom cari + tombol Filter sebaris di kanan bar alat */
@media (min-width:521px){.dtp-donasi-alat-kanan{flex-wrap:nowrap;margin-left:auto}.dtp-donasi-alat .dtp-cari{width:min(100%,16rem)}}

/* label Kantor Layanan (field `kantor` berita) */
.dtp-lokasi{display:inline-flex;align-items:center;gap:.3rem;padding:.25rem .7rem;border-radius:999px;background:rgba(24,69,161,.08);color:var(--dtp-biru);font-size:.78rem;font-weight:600;white-space:nowrap}
.dtp-lokasi svg{width:.9em;height:.9em}
.dtp-lokasi-meta{margin-left:.6rem;padding:.1rem .5rem;font-size:.72rem;vertical-align:middle}
.dtp-lokasi-terang{display:table;background:rgba(255,255,255,.9);color:#0b1226;margin-bottom:.45rem}
.dtp-donasi-amanah{margin:1.5rem 0 0;text-align:center;font-size:.85rem;color:var(--dtp-teks-redup)}
.dtp-donasi-amanah a{color:var(--dtp-biru);text-decoration:underline;text-underline-offset:2px}


.dtp-gel{display:inline-flex;flex-direction:column;align-items:center;gap:.9rem;color:rgba(11,18,38,.62);font-weight:500;font-size:.875rem;line-height:1.3}
.dtp-gel svg{display:block;width:96px;height:96px;overflow:visible}
.dtp-gel-sm svg{width:56px;height:56px}.dtp-gel-sm{gap:.5rem;font-size:.75rem}
.dtp-gel-lg svg{width:140px;height:140px}.dtp-gel-lg{gap:1.2rem;font-size:1rem}
.dtp-gel-latar{fill:#eaf0fb}
.dtp-gel-cincin{fill:none;stroke:rgba(24,69,161,.18);stroke-width:4}
.dtp-gel-naik{transform:translateY(330px);animation:dtp-gel-naik 5.5s cubic-bezier(.16,1,.3,1) .15s forwards}
.dtp-gel-naik.b{animation-name:dtp-gel-naik-b}
.dtp-gel-geser{animation:dtp-gel-geser 2.8s linear infinite}
.dtp-gel-geser.b{animation-duration:3.8s;animation-direction:reverse}
.dtp-gel-naik.b path{fill:#ffaf23;opacity:.55}
.dtp-gel-naik.d path{fill:#1845a1}
@keyframes dtp-gel-naik{from{transform:translateY(330px)}to{transform:translateY(205px)}}
@keyframes dtp-gel-naik-b{from{transform:translateY(330px)}to{transform:translateY(190px)}}
@keyframes dtp-gel-geser{from{transform:translateX(0)}to{transform:translateX(-600px)}}
.dtp-gel-teks{position:relative;display:block;height:1.3em;min-width:12em;text-align:center;white-space:nowrap}
.dtp-gel-teks span{position:absolute;inset:0;opacity:0;animation:dtp-gel-kata 6s ease-in-out infinite}
.dtp-gel-teks .k1{animation-delay:2s}.dtp-gel-teks .k2{animation-delay:4s}
.dtp-gel-teks:has(.k0:only-child) span{animation:none;opacity:1}
@keyframes dtp-gel-kata{0%{opacity:0;transform:translateY(5px);filter:blur(4px)}6%,30%{opacity:1;transform:none;filter:none}36%,100%{opacity:0;transform:translateY(-5px);filter:blur(4px)}}
.dtp-gel-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.dtp-gel-naik{animation:none;transform:translateY(205px)}.dtp-gel-naik.b{transform:translateY(190px)}.dtp-gel-geser{animation:none}.dtp-gel-teks span{animation:none}.dtp-gel-teks .k0{opacity:1}}

.dtp-muat{position:fixed;inset:0;z-index:3000;display:flex;align-items:center;justify-content:center;background:rgba(238,242,250,.78);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s linear .25s}
.dtp-muat.aktif{opacity:1;visibility:visible;transition:opacity .25s ease}
.dtp-muat:not(.aktif) *{animation-play-state:paused!important}