/* variabel overlay caption: didaftarkan agar bisa dianimasikan 0 -> 1 */
@property --fill {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

/* ================================================================
   hero-split.css — hero 42/58, panel kiri + slider kanan + notch
   Token global ada di base.css. Berkas ini hanya mengurus hero.
   ================================================================ */
:root {
  --teal: #2fb6a8;
}

/* ================= HERO SPLIT ================= */
.hero {
  display: grid;
  grid-template-columns: 42fr 58fr;
  align-items: stretch;
  min-height: clamp(560px, 66vh, 680px);
  position: relative;
  isolation: isolate;
  /* circle-gradient warna solid tegas ala headpage Pusako; warna inilah yang
     terlihat menembus lubang notch transparan di sudut kartu slider */
  background: radial-gradient(
    circle at 21% 42%,
    var(--accent) 0%,
    var(--accent-strong) 62%
  );
}

/* ---------------- PANEL KIRI: identitas + 3 kartu ----------------
   Mengikuti pola .hero-left Pusako: logo bulat, nama dinas huruf kapital,
   dua baris keterangan, lalu tiga kartu ikon berjajar. Semua rata tengah.
   ---------------------------------------------------------------- */
.panel {
  position: relative;
  z-index: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 7px;
  padding: 48px clamp(24px, 3vw, 44px) 48px var(--edge);
}
/* ---- logo panel kiri ----
   Revisi 22: piringan putih + inisial "DP" diganti lambang kabupaten asli.
   Tanpa bidang putih - lambang tampil langsung dengan drop-shadow tegas,
   seragam dengan cap-logo, nav-brand, dan tb-brand. Orbit putus-putus
   (::after), ripple sonar (::before), dan denyut tetap dipertahankan. */
.hero-logo {
  width: 96px;
  height: 96px;
  flex: none;
  margin-bottom: 8px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #ffffff 0%, #f7f8fa 58%, #eceff3 100%);
  border: 2px solid rgba(255, 255, 255, 0.92);
  box-shadow:
    0 12px 34px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  opacity: 0;
  position: relative;
  animation:
    fadeUp 0.6s ease both,
    denyut 3.6s ease-in-out 1.4s infinite;
}
.hero-logo img {
  width: 92%;
  height: 92%;
  object-fit: contain;
  filter: drop-shadow(0 10px 24px rgba(11, 32, 58, 0.5));
}

/* Brand lockup horizontal: simbol dan nama aplikasi menjadi satu identitas. */
.hero-logo.hero-brand {
  width: min(100%, 360px);
  height: auto;
  margin-bottom: 10px;
  border-radius: 0;
  display: block;
  background: none;
  border: 0;
  box-shadow: none;
  animation: fadeUp 0.6s ease both;
}
.hero-logo.hero-brand::after,
.hero-logo.hero-brand::before {
  display: none;
}
.hero-brand-image { display: block; }
.hero-logo.hero-brand img {
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 16px rgba(11, 32, 58, 0.28));
}
.hero-logo.hero-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.5vw, 20px);
}
.hero-logo.hero-brand .hero-brand-mark {
  width: clamp(64px, 7vw, 88px);
  flex: 0 0 auto;
}
.hero-brand-image-mark { width: clamp(64px, 7vw, 88px); flex: 0 0 auto; }
.hero-brand-image-name {
  width: min(100%, 230px); flex: 1 1 auto;
}
.hero-logo.hero-brand .hero-brand-divider {
  width: 1px;
  height: clamp(58px, 6vw, 78px);
  flex: 0 0 1px;
  background: rgba(255, 255, 255, 0.58);
}
.hero-logo.hero-brand .hero-brand-name {
  width: 100%;
}

/* ---- nama dinas + keterangan ---- */
.panel h1 {
  font-size: clamp(21px, 2.1vw, 27px);
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #fff;
  text-shadow: 0 2px 14px rgba(11, 32, 58, 0.3);
  line-height: 1.2;
  text-transform: uppercase;
  opacity: 0;
  animation: fadeUp 0.6s 0.12s ease both;
}
.panel .ket {
  max-width: 340px;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
  opacity: 0;
  animation: fadeUp 0.6s 0.24s ease both;
}
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- dekorasi panel: path halus kembaran slider, versi terang ---- */
.panel > :not(.panel-paths) {
  position: relative;
  z-index: 1;
}
.panel-paths {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  filter: brightness(0) invert(1);
}
/* pertegas: garis panel lebih tebal supaya gerak travel terbaca di atas biru */
.panel-paths .draw {
  stroke-width: 3;
}
.panel-paths .draw.d2 {
  stroke-width: 2.4;
}

/* ---- teks masuk per kata ---- */
.panel h1.perkata {
  animation: none;
  opacity: 1;
}
.panel h1 .w {
  display: inline-block;
  opacity: 0;
  animation: fadeUp 0.5s ease both;
}

/* ---- logo: orbit putus-putus + denyut napas ---- */
.hero-logo::after {
  content: "";
  position: absolute;
  inset: -11px;
  border-radius: 50%;
  border: 1.5px dashed rgba(255, 255, 255, 0.45);
  animation: spin 16s linear infinite;
}
/* denyut halus ala Pusako (.headpage-left .to-center): mengecil-membesar lembut */
@keyframes denyut {
  0%,
  100% {
    transform: scale(1);
  }
  30% {
    transform: scale(0.92);
  }
  75% {
    transform: scale(1.08);
  }
}

/* ---- tiga tombol pil (mekanik future-fashion) ---- */
.pbtns {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
  opacity: 0;
  animation: fadeUp 0.6s 0.36s ease both;
}
.pbtn {
  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 20px;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  border-radius: 23px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  transition:
    color 0.25s ease,
    border-color 0.25s ease,
    transform 0.2s var(--ease),
    box-shadow 0.25s ease;
}
/* lapisan warna menggeser masuk dari kiri, sama persis dengan .cta future-fashion */
.pbtn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #fff;
  transform: translateX(-101%);
  transition: transform 0.3s cubic-bezier(0.6, 0, 0.2, 1);
}
.pbtn svg {
  width: 17px;
  height: 17px;
  flex: none;
  transition: transform 0.25s var(--ease);
}
.pbtn:hover svg {
  transform: translateX(2px) scale(1.08);
}
.pbtn:hover {
  color: var(--accent-strong);
  border-color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(11, 32, 58, 0.35);
}
.pbtn:hover::before {
  transform: translateX(0);
}

/* ---------------- PANEL KANAN: SLIDER ---------------- */
/* slider = KARTU MENGAMBANG: menindih panel, radius besar + bayangan + tepi kaca */
.slider {
  /* lubang notch NYATA (transparan): sudut kanan-bawah dipotong lewat mask di
     .slider-clip sehingga latar hero terlihat menembus. --nw/--nh diperbarui
     hero-split.js mengikuti ukuran kartu notch; nilai di bawah hanya cadangan.
     --fil = radius fillet cembung di dua ujung lubang. */
  --nw: 282px;
  --nh: 174px;
  --fil: 14px;
  --maskcut:
    linear-gradient(#fff 0 0) left top/100% calc(100% - var(--nh) - var(--fil))
      no-repeat,
    linear-gradient(#fff 0 0) left bottom var(--nh)/calc(100% - var(--fil))
      var(--fil) no-repeat,
    linear-gradient(#fff 0 0) left bottom/calc(100% - var(--nw) - var(--fil))
      var(--nh) no-repeat,
    linear-gradient(#fff 0 0) right var(--nw) bottom var(--fil)/var(--fil)
      calc(var(--nh) - var(--fil)) no-repeat,
    radial-gradient(
        circle var(--fil) at left top,
        #fff calc(var(--fil) - 0.5px),
        #0000 var(--fil)
      )
      right 0 bottom var(--nh)/var(--fil) var(--fil) no-repeat,
    radial-gradient(
        circle var(--fil) at left top,
        #fff calc(var(--fil) - 0.5px),
        #0000 var(--fil)
      )
      right var(--nw) bottom 0/var(--fil) var(--fil) no-repeat,
    radial-gradient(
        circle var(--radius) at 100% 100%,
        #0000 calc(var(--radius) - 0.5px),
        #fff var(--radius)
      )
      right calc(var(--nw) - var(--radius)) bottom
      calc(var(--nh) - var(--radius))/var(--radius) var(--radius) no-repeat;
  position: relative;
  z-index: 2;
  min-height: 340px;
  margin: 18px 18px 18px -28px;
  border-radius: 22px;
  box-shadow:
    -16px 0 38px rgba(11, 32, 58, 0.3),
    0 14px 30px rgba(11, 32, 58, 0.22);
}
/* lapisan pemotong: SELURUH isi slider ada di dalamnya agar ikut terpotong mask;
   bayangan tetap di .slider karena mask akan ikut memotong box-shadow bila
   dipasang langsung pada elemen yang sama */
.slider-clip {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  background: var(--slider-frame);
  -webkit-mask: var(--maskcut);
  mask: var(--maskcut);
}
/* garis highlight kaca tipis mengikuti tepi kartu (ikut terpotong di lubang) */
.slider-clip::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.stage {
  position: absolute;
  inset: -2%;
  z-index: 0;
  transform: translate(calc(var(--mx, 0) * 8px), calc(var(--my, 0) * 6px));
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.stage > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
#camera {
  width: 100%;
  height: 100%;
  min-height: 100%;
}
#camera .camera_src {
  display: none;
}
.camera_wrap .camera_pag,
.camera_wrap .camera_caption,
.camera_overlayer,
.camera_loader,
.camera_wrap div.camera_target_content {
  display: none !important;
}

.slide-fallback {
  background-size: cover;
  background-position: center;
  transition: opacity 0.9s ease;
  animation: kenburns 26s ease-in-out infinite alternate;
}
.slide-fallback.b {
  opacity: 0;
}
.camera-ready .slide-fallback {
  display: none;
}
@keyframes kenburns {
  from {
    transform: scale(1.02);
  }
  to {
    transform: scale(1.08);
  }
}

/* butiran film — jauh lebih tipis daripada referensi karena latar terang */
.grain {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0.16;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix type='matrix' values='0 0 0 0 0.35 0 0 0 0 0.45 0 0 0 0 0.6 0 0 0 0.06 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  animation: grain 0.8s steps(4) infinite;
}
@keyframes grain {
  0% {
    background-position: 0 0;
  }
  25% {
    background-position: -40px 30px;
  }
  50% {
    background-position: 30px -25px;
  }
  75% {
    background-position: -25px -40px;
  }
  100% {
    background-position: 0 0;
  }
}

/* path SVG dekoratif — geometri referensi, warna disesuaikan latar terang */
.paths {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  transform: translate(calc(var(--mx, 0) * -12px), calc(var(--my, 0) * -9px));
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}
/* Animasi garis berjalan (.draw), ring berputar (.ring), node berkelip (.node),
   dan grup mengapung (.floatg) dipakai panel kiri (svg.panel-paths).
   Dekorasi SVG di slider kanan (div.slider) sudah dihapus dari
   _hero-split.blade.php, jadi animasi ini tidak tampil di sana. */
.draw {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 1600 1600;
  stroke-dashoffset: 1600;
  animation: travel 6.5s cubic-bezier(0.45, 0, 0.3, 1) infinite;
}
.draw.d2 {
  animation-delay: 1.4s;
  animation-duration: 7.5s;
}
.draw.d3 {
  animation-delay: 2.8s;
  animation-duration: 6s;
  opacity: 0.65;
}
@keyframes travel {
  0% {
    stroke-dashoffset: 1600;
  }
  42% {
    stroke-dashoffset: 0;
  }
  56% {
    stroke-dashoffset: 0;
  }
  98% {
    stroke-dashoffset: -1600;
  }
  100% {
    stroke-dashoffset: -1600;
  }
}
.ring {
  fill: none;
  transform-origin: center;
  transform-box: fill-box;
  animation: spin 14s linear infinite;
}
.ring.slow {
  animation-duration: 22s;
  animation-direction: reverse;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.node {
  animation: pulse 2.6s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.node.n2 {
  animation-delay: 0.9s;
}
.node.n3 {
  animation-delay: 1.6s;
}
@keyframes pulse {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.6);
  }
}
.floatg {
  animation: floaty 9s ease-in-out infinite;
}
@keyframes floaty {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}

/* label kecil di sudut kanan-atas slider */
.slide-tag {
  position: absolute;
  right: 20px;
  top: 20px;
  z-index: 6;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink2);
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 13px;
  backdrop-filter: blur(6px);
}

/* kontrol slider */
.sctrl {
  position: absolute;
  left: 20px;
  bottom: 20px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sctrl button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--line);
  color: var(--ink);
  display: grid;
  place-items: center;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}
.sctrl button:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.dots {
  display: flex;
  gap: 6px;
  margin-right: 4px;
}
.dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transition:
    width 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    background 0.25s ease;
}
.dots i.on {
  width: 20px;
  border-radius: 4px;
  background: var(--accent);
}

/* ---------------- NOTCH: sudut kanan-bawah slider ---------------- */
/* ---- judul artikel di TENGAH slider + scrim radial --fill ---- */
.slide-caption {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  pointer-events: none;
  padding: 32px clamp(20px, 5vw, 72px);
  --fill: 1;
  /* --fmax = batas kepekatan scrim. Slide berfoto tetap 1; slide tanpa foto
     menurunkannya lewat .nofoto supaya panel warna tidak ikut gelap. */
  --fmax: 1;
  background: radial-gradient(
    120% 95% at 50% 52%,
    rgba(11, 22, 38, calc(0.66 * var(--fill) * var(--fmax))) 0%,
    rgba(11, 22, 38, calc(0.44 * var(--fill) * var(--fmax))) 46%,
    rgba(11, 22, 38, calc(0.16 * var(--fill) * var(--fmax))) 74%,
    rgba(11, 22, 38, 0) 100%
  );
}
.slide-caption.masuk {
  animation: fillup 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes fillup {
  from {
    --fill: 0;
  }
  to {
    --fill: 1;
  }
}
.cap-rubrik {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
h2.cap-judul {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin-top: 12px;
  max-width: 26ch;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(20px, 2vw, 30px);
  line-height: 1.25;
  letter-spacing: 0.4px;
  text-shadow: 0 2px 22px rgba(11, 22, 38, 0.6);
}
/* tanggal: pil kaca kembaran .slide-tag, menempel di pojok kiri-atas slider */
.cap-tanggal {
  position: absolute;
  left: 20px;
  top: 20px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff;
  background: rgba(17, 32, 51, 0.38);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  padding: 7px 13px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.slide-caption.masuk > * {
  animation: capin 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.slide-caption.masuk > *:nth-child(2) {
  animation-delay: 0.08s;
}
.slide-caption.masuk > *:nth-child(3) {
  animation-delay: 0.16s;
}
@keyframes capin {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ================= SLIDE TANPA FOTO -> TAMPILAN LOGO =================
   Artikel sorotan yang belum punya gambar_hero tidak tampil kosong atau
   memakai foto stok. Panel diisi warna aksen rata (flat, sesuai Revisi 12:
   tanpa gradasi dua warna), lalu logo dipakai dua kali:
     1. watermark raksasa transparan yang hanyut pelan  -> mengisi bidang
     2. monogram bulat di atas judul (.cap-logo)        -> penanda identitas
   Hasilnya slide tetap terasa disengaja, bukan "gambar gagal dimuat". */
.slide-fallback.logo {
  background-image: none;
  background-color: var(--accent-strong);
}

/* --- watermark logo --- */
.slide-fallback .lw {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.slide-fallback.logo .lw {
  opacity: 1;
}
.slide-fallback .lw img {
  position: absolute;
  width: 34%;
  min-width: 170px;
  /* Revisi 22: filter pemutih dibuang - permintaan pengguna: latarnya harus
     terbaca sebagai WATERMARK lambang (warna & detail asli, dibuat samar),
     bukan siluet putih. Opasitas dinaikkan karena warna asli yang samar
     lebih kalem daripada putih pekat pada opasitas yang sama. */
  opacity: 0.16;
  animation: hanyut 22s ease-in-out infinite alternate;
}
/* tiga posisi bergantian supaya dua slide logo berurutan tidak kembar */
.slide-fallback .lw.p1 img {
  left: 4%;
  top: 8%;
}
.slide-fallback .lw.p2 img {
  right: 3%;
  bottom: 6%;
}
.slide-fallback .lw.p3 img {
  right: 6%;
  top: 14%;
  width: 42%;
}
@keyframes hanyut {
  from {
    transform: translate3d(0, 0, 0) rotate(0);
  }
  to {
    transform: translate3d(3%, -3.5%, 0) rotate(4deg);
  }
}

/* --- monogram bulat di atas judul: kembaran .hero-logo panel kiri --- */
/* Revisi 21: filter pemutih dibuang (lambang berwarna jadi gumpalan putih).
   Revisi 22: chip putihnya juga dibuang dan ukurannya dinaikkan 96 -> 118px.
   Gaya seragam semua titik logo: lambang tampil langsung dengan warna asli
   + drop-shadow tegas, tanpa bidang putih di belakangnya. */
.cap-logo {
  display: none;
  width: 118px;
  height: 118px;
  place-items: center;
  margin-bottom: 18px;
  border-radius: 50%;
  background: linear-gradient(145deg, #ffffff 0%, #f7f8fa 58%, #eceff3 100%);
  border: 2px solid rgba(255, 255, 255, 0.92);
  box-shadow:
    0 12px 34px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.cap-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 22px rgba(11, 32, 58, 0.45));
}
.slide-caption.nofoto .cap-logo {
  display: grid;
}
/* panel sudah berwarna: scrim cukup tipis, judul boleh lebih besar & panjang */
.slide-caption.nofoto {
  --fmax: 0.22;
}
.slide-caption.nofoto h2.cap-judul {
  -webkit-line-clamp: 4;
  font-size: clamp(21px, 2.3vw, 33px);
}

/* --- kartu notch versi logo (Revisi 20) ---
   DULU: logo dipasang sebagai mask lalu diwarnai var(--accent), supaya ikut
   berganti mengikuti lima tema. Cara itu jalan selama logonya monokrom.

   SEKARANG logonya lambang kabupaten berwarna penuh, dan mask MEMBUANG semua
   warna - yang tersisa hanya siluet biru rata. Lambang daerah justru dikenali
   dari warnanya, jadi mask ditinggalkan dan logonya ditampilkan apa adanya
   di atas latar lembut.

   Konsekuensi yang diterima: thumbnail ini tidak lagi ikut berganti warna
   mengikuti tema. Itu benar - lambang resmi memang tidak boleh diwarnai
   ulang mengikuti tema situs. */
.card .thumb.logo {
  background: #fff;
}
/* PENTING - jangan position:absolute pada img ini. Tinggi .thumb datang dari
   <img> yang mengalir normal (width:100% + aspect-ratio 16/9 dari aturan
   dasarnya). Saat img dibuat absolut ia keluar dari aliran dan .thumb AMBRUK
   jadi 0px - kartunya tampak putih kosong. Tertangkap di tangkapan layar
   pengguna (Revisi 21); bug yang sama dengan .nav-brand di Revisi 19.
   Logo dikecilkan lewat padding, bukan lewat pemosisian. */
.card .thumb.logo img {
  visibility: visible;
  object-fit: contain;
  box-sizing: border-box;
  padding: 13%;
  opacity: 0.96;
}
.card .thumb.logo::after {
  display: none;
}

/* --- kartu terbang (FlowMotion) versi logo ---
   Revisi 21: latar aksen + logo diputihkan diganti latar putih + logo
   berwarna asli, senada dengan thumbnail dan chip caption. */
.fly.logo {
  background: #fff;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.fly.logo img {
  width: 38%;
  max-width: 220px;
  opacity: 1;
}

/* ---- Ken Burns: foto tayang membesar pelan ---- */
.slide-fallback.kb {
  animation: kenburns 7s ease-out forwards;
}
@keyframes kenburns {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.08);
  }
}

/* ---- efek kaca elemen di atas foto ---- */
.slide-tag {
  background: rgba(17, 32, 51, 0.38);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.slide-tag.tick {
  animation: tagtick 0.45s var(--ease);
}
@keyframes tagtick {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.sctrl button {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.card .badge {
  background: rgba(17, 32, 51, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 2;
}

/* ---- overlay gradasi yang sama pada thumbnail ---- */
.card .thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(
    to top,
    rgba(11, 22, 38, 0.62) 0%,
    rgba(11, 22, 38, 0.28) 40%,
    rgba(11, 22, 38, 0) 75%
  );
}
.card .progress {
  z-index: 2;
}

/* notch TRANSPARAN: tidak lagi dicat; lubang aslinya ada di mask .slider-clip,
   elemen ini hanya penampung posisi kartu pratinjau. Menempel di sudut
   kanan-bawah kartu slider (right/bottom = margin kartu slider). */
.notch {
  --card-w: min(
    268px,
    calc(50vw - 40px)
  ); /* dipindah dari .slider: kartu kini di luar slider */
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 7;
  padding: 14px 0 0 14px;
}

/* kartu terbang ala FlowMotion: pratinjau thumbnail membesar menutup slider */
.fly {
  position: absolute;
  z-index: 8;
  pointer-events: none;
  background-size: cover;
  background-position: center;
  box-shadow: 0 18px 44px rgba(11, 32, 58, 0.38);
  will-change: left, top, width, height;
}

.card {
  display: block;
  width: var(--card-w);
  text-align: left;
  background: #fff;
  border-radius: 18px;
  padding: 10px;
  color: var(--ink);
  box-shadow:
    0 1px 2px rgba(20, 36, 58, 0.06),
    0 12px 28px rgba(20, 36, 58, 0.1);
  opacity: 0;
  transform: translateY(24px);
  animation: cardin 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 1.2s forwards;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}
@keyframes cardin {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.card:hover {
  transform: translateY(-4px) rotate(-1deg);
  box-shadow:
    0 2px 4px rgba(20, 36, 58, 0.08),
    0 18px 40px rgba(20, 36, 58, 0.16);
}
.card .thumb {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: var(--accent-soft);
}
.card .thumb img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: inherit;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.card:hover .thumb img {
  transform: scale(1.06);
}
.card .badge {
  position: absolute;
  top: 8px;
  left: 8px;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.92);
  color: var(--accent-strong);
  border-radius: 999px;
  padding: 4px 9px;
}
.card .progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.45);
}
.card .progress i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
}
.card .progress i.run {
  animation: slideclock var(--slide-time, 6s) linear forwards;
}
@keyframes slideclock {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
.card-meta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 4px 4px;
}
.card-name {
  min-width: 0;
}
.card-name em {
  display: block;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 9px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--ink3);
  margin-bottom: 4px;
}
.card-name strong {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-arrow {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display: grid;
  place-items: center;
  transition:
    background 0.25s ease,
    transform 0.25s ease;
}
.card:hover .card-arrow {
  background: var(--accent);
  transform: rotate(-45deg);
}

/* ---- bayangan berlapis ---- */
.card {
  box-shadow: var(--shadow-2);
}
.card:hover {
  box-shadow:
    var(--shadow-2),
    0 26px 60px var(--accent-shadow);
}
.pbtn:hover {
  box-shadow:
    var(--shadow-1),
    0 10px 22px rgba(11, 32, 58, 0.35);
}

/* ================= RESPONSIF ================= */
@media (max-width: 1180px) {
  .hero {
    grid-template-columns: 46fr 54fr;
  }
  .menu a {
    padding: 9px 9px;
    font-size: 13.5px;
  }
}
@media (max-width: 980px) {
  .menu,
  .nav-search {
    display: none;
  }
  .burger {
    display: grid;
    margin-left: auto;
  }
  .hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .panel {
    padding: 36px var(--gutter) 32px;
    gap: 16px;
  }
  .hero-logo {
    width: 72px;
    height: 72px;
    font-size: 24px;
  }
  .slider {
    margin: 0 14px 16px;
    border-radius: 18px;
    aspect-ratio: 4/3;
    min-height: 0;
  }
  .notch {
    right: 14px;
    bottom: 16px;
    padding: 10px 0 0 10px;
  }
  .slide-caption {
    padding: 24px var(--gutter) 120px;
  }
  h2.cap-judul {
    -webkit-line-clamp: 2;
    font-size: 17px;
  }
  /* di layar sempit kartu berubah jadi baris ringkas supaya tidak menutupi foto */
  .card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    width: min(346px, calc(100vw - 26px));
    border-radius: 14px;
  }
  .card .thumb {
    width: 92px;
    flex: none;
    border-radius: 10px;
  }
  .card .thumb img {
    aspect-ratio: 1/1;
  }
  .card .badge {
    display: none;
  }
  .card-meta {
    flex: 1;
    min-width: 0;
    padding: 0;
  }
  .card-name strong {
    -webkit-line-clamp: 2;
    font-size: 13px;
  }
}
@media (max-width: 640px) {
  .hero-logo {
    width: 64px;
    height: 64px;
    font-size: 21px;
  }
  .pbtns {
    gap: 8px;
  }
  .pbtn {
    height: 42px;
    padding: 0 14px;
    font-size: 11px;
    letter-spacing: 0.6px;
    gap: 6px;
  }
  .pbtn svg {
    width: 15px;
    height: 15px;
  }
  .card .thumb {
    width: 78px;
  }
  /* slider di ponsel pendek: monogram dilepas supaya judul dapat ruang penuh.
     Identitas sudah diwakili watermark di belakangnya. */
  .slide-caption.nofoto .cap-logo {
    display: none;
  }
  .slide-caption.nofoto h2.cap-judul {
    -webkit-line-clamp: 3;
    font-size: 18px;
  }
  .slide-fallback .lw img {
    width: 58%;
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .slide-fallback,
  .ring,
  .ring.slow,
  .node,
  .floatg,
  .grain,
  .card .progress i {
    animation: none !important;
  }
  .hero-logo {
    animation: fadeUp 0s both;
  }
  .hero-logo::after,
  .hero-logo::before {
    animation: none;
  }
  .panel h1 .w {
    animation: none !important;
    opacity: 1;
  }
  .draw {
    animation: none !important;
    stroke-dashoffset: 0;
    stroke-dasharray: none;
    opacity: 1;
  }
  .draw.d3 {
    opacity: 0.65;
  }
  .hero-logo,
  .panel h1,
  .panel .ket,
  .pbtns {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
  .card {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
  .slide-caption,
  .slide-caption > * {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
  .slide-fallback.kb {
    animation: none !important;
    transform: none;
  }
  .slide-fallback .lw img {
    animation: none !important;
    transform: none;
  }
  .slide-tag.tick {
    animation: none !important;
  }
  .slide-caption {
    --fill: 1;
  }
  .stage,
  .paths {
    transform: none !important;
  }
}