/* ============================================================
   HOVER LIBRARY untuk WordPress Editor bawaan (Personal)
   PALET RESMI rentang.art — HANYA 3 warna ini:
   --hv-biru: #1e60a8 | --hv-krem: #d6d3c4 | --hv-abu: #404040
   Abu muda pendukung: #abb8c3
   Cara pakai:
   1. Dashboard > Appearance > Editor > Styles > ikon pensil > Additional CSS
      (atau Appearance > Customize > Additional CSS kalau pakai classic theme)
   2. Copy-paste SEMUA isi file ini ke sana, Save.
   3. Edit Page > klik Block (Button / Image / Group) > sidebar kanan
      > Advanced > Additional CSS class(es) > isi misal: hv-zoom
   4. Update / Save. Selesai.
   Bisa gabung: misal "hv-zoom hv-lift"
   ============================================================ */
:root {
  --hv-biru: #1e60a8;
  --hv-krem: #d6d3c4;
  --hv-abu: #404040;
  --hv-abu-muda: #abb8c3;
}

/* ---------- 1. FOTO / IMAGE (semua TAJAM, tanpa rounded) ---------- */
/* Fix gap putih bawah foto WP TANPA ubah size asli */
[class*="hv-zoom"], [class*="hv-foto"], .hv-lift, .hv-bright, .hv-tilt, .hv-blur-in, .hv-flip, .hv-fade-gray, .hv-putar {
  line-height: inherit;
}
[class*="hv-zoom"] img, [class*="hv-foto"] img,
.hv-lift img, .hv-bright img, .hv-tilt img, .hv-blur-in img,
.hv-flip img, .hv-fade-gray img, .hv-putar img {
  display: inline-block !important; margin: 0 !important; padding: 0 !important;
  max-width: 100% !important; width: auto !important; height: auto !important;
  vertical-align: bottom !important;
  object-fit: inherit !important;
}
[class*="hv-zoom"] figure, [class*="hv-foto"] figure,
.hv-lift figure, .hv-bright figure, .hv-tilt figure,
.wp-block-image.hv-zoom, .wp-block-image.hv-lift {
  margin: 0 !important; padding: 0 !important;
  display: inline-block !important; line-height: 0 !important;
  max-width: 100% !important;
}
/* Kalau class dipasang di Group pembungkus, caption <p> jangan ikut line-height 0 */
[class*="hv-zoom"] p, [class*="hv-foto"] p, .hv-lift p { line-height: 1.5 !important; }

/* Zoom halus */
.hv-zoom { overflow: hidden; border-radius: 0 !important; transition: transform .4s ease, box-shadow .4s ease !important; }
.hv-zoom img { transition: transform .5s ease !important; border-radius: 0 !important; }
.hv-zoom:hover img { transform: scale(1.08) !important; }
.hv-zoom:hover { box-shadow: 0 12px 30px rgba(64,64,64,.2); }

/* Terangkat + bayangan (cocok untuk Card / Group / Foto) */
.hv-lift { transition: transform .35s ease, box-shadow .35s ease !important; border-radius: 0 !important; }
.hv-lift img { border-radius: 0 !important; }
.hv-lift:hover { transform: translateY(-8px) !important; box-shadow: 0 16px 35px rgba(64,64,64,.18) !important; }

/* Flip horizontal */
.hv-flip { perspective: 800px; }
.hv-flip img, .hv-flip { transition: transform .6s ease !important; }
.hv-flip:hover img { transform: rotateY(180deg) !important; }

/* Grayscale jadi berwarna (efek Appear) */
.hv-fade-gray img { filter: grayscale(100%) !important; transition: filter .5s ease, transform .5s ease !important; }
.hv-fade-gray:hover img { filter: grayscale(0%) !important; transform: scale(1.03) !important; }

/* Gelap + terang (efek Slide brightness) */
.hv-bright { overflow:hidden; border-radius:0 !important; }
.hv-bright img { border-radius:0 !important; filter: brightness(.75) !important; transition: filter .4s ease, transform .4s ease !important; }
.hv-bright:hover img { filter: brightness(1.05) !important; transform: scale(1.05) !important; }

/* Putar dikit */
.hv-putar { transition: transform .4s ease !important; }
.hv-putar:hover { transform: rotate(-2deg) scale(1.04) !important; }

/* ---------- 2. BUTTON (semua IKUTI SHAPE asli pill/kotak, tidak dipaksa kotak) ---------- */

/* Kunci: semua hover button paksa pill 999px seperti tombol Instagram/Spotify/Email
   (inherit gagal di front-end karena radius ada di <a>, bukan wrapper) */
[class*="hv-btn"], [class*="hv-slide"], .hv-glow, .hv-outline, .hv-bounce, .hv-pulse, .hv-arrow,
[class*="hv-btn"] a, [class*="hv-slide"] a, .hv-glow a, .hv-outline a, .hv-bounce a, .hv-pulse a, .hv-arrow a,
[class*="hv-btn"] a::before, [class*="hv-slide"] a::before, .hv-btn-isi a::before, .hv-btn-isi::before,
.hv-slide-btn a::before, .hv-slide-btn::before {
  border-radius: 999px !important;
}

/* Slide fill dari kiri */
.hv-slide-btn a, .hv-slide-btn { position: relative; overflow: hidden; z-index:1; transition: color .35s ease, transform .2s ease !important; border-radius: 999px !important; }
.hv-slide-btn a::before, .hv-slide-btn::before {
  content:""; position:absolute; inset:0; background:#1e60a8; border-radius: 999px !important;
  transform: scaleX(0); transform-origin:left; transition: transform .35s ease; z-index:-1;
}
.hv-slide-btn:hover a::before, .hv-slide-btn:hover::before { transform: scaleX(1); }
.hv-slide-btn:hover a, .hv-slide-btn:hover { color:#d6d3c4 !important; transform: translateY(-2px); }

/* Bounce */
.hv-bounce { transition: transform .2s ease !important; }
.hv-bounce:hover { animation: hvBounce .6s ease; }
@keyframes hvBounce {
  0% { transform: translateY(0); }
  30% { transform: translateY(-8px); }
  50% { transform: translateY(0); }
  70% { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}

/* Glow */
.hv-glow a, .hv-glow { transition: box-shadow .3s ease, transform .3s ease !important; }
.hv-glow:hover a, .hv-glow:hover { box-shadow: 0 0 0 4px rgba(30,96,168,.2), 0 8px 25px rgba(30,96,168,.45) !important; transform: translateY(-2px) !important; }

/* Outline appear - ikut shape pill, pakai box-shadow dalam biar tidak kotak */
.hv-outline a, .hv-outline { transition: all .3s ease !important; border-radius: 999px !important; }
.hv-outline:hover a, .hv-outline:hover { box-shadow: 0 0 0 2px currentColor inset, 0 0 0 6px #d6d3c4 !important; transform: translateY(-2px); outline: none !important; }

/* ---------- 3. HEADER / MENU / TEKS ---------- */

/* --- 3A. HEADER BAR (pasang di Group / Header Template Part) --- */

/* Header: muncul bayangan + bg krem saat hover */
.hv-header {
  transition: background .4s ease, box-shadow .4s ease, transform .4s ease !important;
}
.hv-header:hover {
  background: #d6d3c4 !important;
  box-shadow: 0 8px 25px rgba(64,64,64,.12) !important;
}

/* Header: garis bawah slide muncul */
.hv-header-line { position: relative; }
.hv-header-line::after {
  content:""; position:absolute; left:0; bottom:0; height:3px; width:100%;
  background:#1e60a8; transform: scaleX(0); transform-origin:left;
  transition: transform .4s ease;
}
.hv-header-line:hover::after { transform: scaleX(1); }

/* Logo TEKS (seperti RENTANG / Site Title): zoom + spacing */
.hv-logo a, a.hv-logo {
  display:inline-block !important;
  transition: letter-spacing .4s ease, transform .4s ease, color .4s ease !important;
}
.hv-logo:hover a, a.hv-logo:hover {
  letter-spacing: .35em !important; transform: scale(1.04) !important;
}

/* Tombol "Menu" (toggle navigasi overlay): glow + angkat */
.hv-menu-btn .wp-block-navigation__responsive-container-open,
button.hv-menu-btn {
  transition: background .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease !important;
}
.hv-menu-btn .wp-block-navigation__responsive-container-open:hover,
button.hv-menu-btn:hover {
  background:#1e60a8 !important; color:#d6d3c4 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(30,96,168,.4) !important;
}

/* --- 3B. MENU LINK (pasang di block Navigation) --- */

/* Underline slide untuk Navigation - support markup WP asli */
.hv-menu-slide a,
.hv-menu-slide .wp-block-navigation-item__content {
  position: relative !important; text-decoration:none !important;
}
.hv-menu-slide a::after,
.hv-menu-slide .wp-block-navigation-item__content::after {
  content:"" !important; position:absolute; left:0; bottom:-4px; height:2px; width:100%;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .35s ease;
  pointer-events:none;
}
.hv-menu-slide a:hover::after,
.hv-menu-slide .wp-block-navigation-item__content:hover::after,
.hv-menu-slide li:hover > a::after { transform: scaleX(1); transform-origin:left; }

/* Menu pill: bg muncul (efek Appear) */
.hv-menu-pill a,
.hv-menu-pill .wp-block-navigation-item__content {
  border-radius: 999px !important; padding: 8px 14px !important;
  transition: background .3s ease, color .3s ease, transform .3s ease !important;
}
.hv-menu-pill a:hover,
.hv-menu-pill .wp-block-navigation-item__content:hover {
  background:#1e60a8 !important; color:#d6d3c4 !important; transform: translateY(-2px) !important;
}

/* Menu bounce saat hover */
.hv-menu-bounce li a { display:inline-block; transition: transform .2s ease !important; }
.hv-menu-bounce li a:hover { animation: hvBounce .6s ease; color:#1e60a8 !important; }

/* Appear naik + fade (cocok untuk Group / Heading / Paragraph) */
.hv-appear-up { transition: opacity .4s ease, transform .4s ease !important; }
.hv-appear-up:hover { transform: translateY(-6px) !important; opacity:.92; }

/* Goyang (shake) untuk ikon / logo */
.hv-goyang:hover { animation: hvGoyang .5s ease; }
@keyframes hvGoyang {
  0%,100% { transform: rotate(0); }
  25% { transform: rotate(-4deg) scale(1.05); }
  50% { transform: rotate(4deg) scale(1.05); }
  75% { transform: rotate(-2deg); }
}

/* ---------- 4. EFEK BARU v1 ---------- */

/* 1. Tilt 3D (foto / card miring) */
.hv-tilt { perspective: 600px; transition: transform .4s ease, box-shadow .4s ease !important; border-radius:0 !important; }
.hv-tilt img { border-radius:0 !important; }
.hv-tilt:hover { transform: perspective(600px) rotateX(8deg) rotateY(-8deg) scale(1.03) !important; box-shadow: 0 18px 40px rgba(64,64,64,.22) !important; }

/* 2. Blur jadi tajam (appear) */
.hv-blur-in img { border-radius:0 !important; filter: blur(6px) brightness(.9) !important; transition: filter .5s ease, transform .5s ease !important; }
.hv-blur-in:hover img { filter: blur(0) brightness(1) !important; transform: scale(1.04) !important; }

/* 3. Kotak jadi lingkaran (HANYA pakai ini kalau mau bulat, efek lain tetap tajam) */
.hv-circle, .hv-circle img { transition: border-radius .5s ease, transform .5s ease !important; }
.hv-circle:hover, .hv-circle:hover img { border-radius: 50% !important; transform: scale(1.03) !important; }

/* 4. Button pulse (denyut) */
.hv-pulse a, .hv-pulse { transition: transform .3s ease !important; }
.hv-pulse:hover a, .hv-pulse:hover { animation: hvPulse 1s ease infinite; }
@keyframes hvPulse {
  0% { box-shadow: 0 0 0 0 rgba(30,96,168,.5); }
  70% { box-shadow: 0 0 0 14px rgba(30,96,168,0); }
  100% { box-shadow: 0 0 0 0 rgba(30,96,168,0); }
}

/* 5. Button panah slide (teks geser + panah muncul) */
.hv-arrow a, .hv-arrow { position:relative; transition: padding .3s ease, transform .3s ease !important; }
.hv-arrow a::after, .hv-arrow::after {
  content:"→"; position:absolute; right:14px; opacity:0;
  transform: translateX(-10px); transition: all .3s ease;
}
.hv-arrow:hover a, .hv-arrow:hover { transform: translateY(-2px) !important; }
.hv-arrow:hover a::after, .hv-arrow:hover::after { opacity:1; transform: translateX(0); }
.hv-arrow:hover a { padding-right: 38px !important; }

/* ---------- 5. FOTO: 5 BARU (tajam, no rounded) ---------- */

/* Geser dalam bingkai */
.hv-foto-slide { overflow:hidden !important; border-radius:0 !important; }
.hv-foto-slide img { border-radius:0 !important; transition: transform .5s ease !important; transform: scale(1.12) translateX(-6px) !important; }
.hv-foto-slide:hover img { transform: scale(1.12) translateX(6px) !important; }

/* Zoom-out appear (mulai besar jadi normal) */
.hv-foto-zoomout img { border-radius:0 !important; transform: scale(1.15) !important; transition: transform .6s ease !important; }
.hv-foto-zoomout:hover img { transform: scale(1) !important; }

/* Bingkai dalam muncul */
.hv-foto-frame { position:relative; overflow:hidden !important; border-radius:0 !important; }
.hv-foto-frame img { border-radius:0 !important; transition: transform .5s ease !important; }
.hv-foto-frame::after { content:""; position:absolute; inset:12px; border:2px solid #d6d3c4; opacity:0; transform:scale(.92); transition:all .4s ease; pointer-events:none; }
.hv-foto-frame:hover img { transform: scale(1.06) !important; }
.hv-foto-frame:hover::after { opacity:1; transform:scale(1); }

/* Miring flat + shadow tegas (brutalist, cocok RENTANG) */
.hv-foto-tiltflat { border-radius:0 !important; transition: transform .35s ease, box-shadow .35s ease !important; }
.hv-foto-tiltflat img { border-radius:0 !important; }
.hv-foto-tiltflat:hover { transform: rotate(-2deg) scale(1.03) !important; box-shadow: 8px 8px 0 #1e60a8 !important; }

/* Hitam-putih ke warna */
.hv-foto-bw img { border-radius:0 !important; filter: grayscale(100%) contrast(1.1) !important; transition: filter .5s ease, transform .5s ease !important; }
.hv-foto-bw:hover img { filter: grayscale(0%) contrast(1) !important; transform: scale(1.05) !important; }

/* ---------- 6. LOGO: 5 BARU (untuk RENTANG / Site Logo) ---------- */

.hv-logo-warna a, a.hv-logo-warna { display:inline-block !important; transition: color .35s ease, transform .35s ease !important; }
.hv-logo-warna:hover a, a.hv-logo-warna:hover { color:#404040 !important; transform: translateY(-2px) !important; }

.hv-logo-geser a, a.hv-logo-geser { display:inline-block !important; transition: transform .35s ease !important; }
.hv-logo-geser:hover a, a.hv-logo-geser:hover { transform: translateX(8px) !important; }

.hv-logo-bounce:hover a, a.hv-logo-bounce:hover { display:inline-block; animation: hvBounce .6s ease; }

.hv-logo-kedip a, a.hv-logo-kedip { transition: opacity .3s ease !important; }
.hv-logo-kedip:hover a, a.hv-logo-kedip:hover { opacity:.55 !important; }

.hv-logo-garis a, a.hv-logo-garis { position:relative !important; display:inline-block !important; }
.hv-logo-garis a::after, a.hv-logo-garis::after { content:""; position:absolute; left:50%; bottom:-6px; height:3px; width:100%; background:currentColor; transform:translateX(-50%) scaleX(0); transition:transform .4s ease; }
.hv-logo-garis:hover a::after, a.hv-logo-garis:hover::after { transform:translateX(-50%) scaleX(1); }

/* ---------- 7. TOMBOL: 5 BARU (untuk Instagram / Spotify / Email) ---------- */

/* Isi dari bawah */
.hv-btn-isi a, .hv-btn-isi { position:relative !important; overflow:hidden !important; z-index:1; transition:color .3s ease, transform .3s ease !important; border-radius: 999px !important; }
.hv-btn-isi a::before, .hv-btn-isi::before { content:""; position:absolute; inset:0; background:#1e60a8; border-radius: 999px !important; transform:translateY(101%); transition:transform .35s ease; z-index:-1; }
.hv-btn-isi:hover a::before, .hv-btn-isi:hover::before { transform:translateY(0); }
.hv-btn-isi:hover a, .hv-btn-isi:hover { color:#d6d3c4 !important; transform:translateY(-2px); }

/* Geser + shadow tegas */
.hv-btn-geser a, .hv-btn-geser { transition: transform .25s ease, box-shadow .25s ease !important; }
.hv-btn-geser:hover a, .hv-btn-geser:hover { transform: translate(-2px,-2px) !important; box-shadow: 5px 5px 0 #1e60a8 !important; }

/* Warna terbalik */
.hv-btn-balik a, .hv-btn-balik { transition: all .3s ease !important; }
.hv-btn-balik:hover a, .hv-btn-balik:hover { background:transparent !important; color:#1e60a8 !important; border-color:#1e60a8 !important; }

/* Getar cepat */
.hv-btn-getar:hover a, .hv-btn-getar:hover { animation: hvGetar .35s ease; }
@keyframes hvGetar { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-3px)} 50%{transform:translateX(3px)} 75%{transform:translateX(-2px)} }

/* Membesar */
.hv-btn-besar a, .hv-btn-besar { transition: transform .3s ease !important; }
.hv-btn-besar:hover a, .hv-btn-besar:hover { transform: scale(1.1) !important; font-weight:700; }

/* ---------- 8. JUDUL & LAINNYA: 5 BARU ---------- */

/* Judul besar garis + geser (untuk HAXEN FAN dkk) */
.hv-judul-garis { position:relative; display:inline-block; transition: transform .35s ease !important; }
.hv-judul-garis::after { content:""; position:absolute; left:0; bottom:-6px; height:4px; width:100%; background:#1e60a8; transform:scaleX(0); transform-origin:left; transition:transform .4s ease; }
.hv-judul-garis:hover { transform:translateX(8px) !important; }
.hv-judul-garis:hover::after { transform:scaleX(1); }

/* Judul ganti warna + miring */
.hv-judul-warna { transition: color .3s ease, transform .3s ease !important; }
.hv-judul-warna:hover { color:#404040 !important; transform: skewX(-4deg) !important; }

/* Menu garis dari tengah */
.hv-menu-tengah a, .hv-menu-tengah .wp-block-navigation-item__content { position:relative !important; }
.hv-menu-tengah a::after, .hv-menu-tengah .wp-block-navigation-item__content::after { content:"" !important; position:absolute; left:50%; bottom:-4px; height:2px; width:100%; background:currentColor; transform:translateX(-50%) scaleX(0); transition:transform .35s ease; }
.hv-menu-tengah a:hover::after, .hv-menu-tengah .wp-block-navigation-item__content:hover::after { transform:translateX(-50%) scaleX(1); }

/* Header jadi abu */
.hv-header-gelap { transition: background .4s ease !important; }
.hv-header-gelap:hover { background:#404040 !important; }
.hv-header-gelap:hover a, .hv-header-gelap:hover { color:#d6d3c4 !important; }

/* Fade naik lambat untuk card */
.hv-fade-naik { transition: opacity .5s ease, transform .5s ease !important; }
.hv-fade-naik:hover { opacity:.85; transform:translateY(-10px) !important; }

/* ---------- 9. CURSOR CUSTOM (pasang di block yang sama) ---------- */
/* Kursor bawaan browser — tinggal pilih */
.hv-cur-pointer:hover { cursor: pointer !important; }
.hv-cur-zoom:hover { cursor: zoom-in !important; }
.hv-cur-tangan:hover { cursor: grab !important; }
.hv-cur-tangan:active { cursor: grabbing !important; }
.hv-cur-cross:hover { cursor: crosshair !important; }
.hv-cur-teks:hover { cursor: text !important; }
.hv-cur-tidak:hover { cursor: not-allowed !important; }
/* Kursor titik biru rentang.art (tanpa upload gambar) */
.hv-cur-dot:hover { cursor: none !important; position:relative; }
.hv-cur-dot:hover::before {
  content:""; position:fixed; width:18px; height:18px; border-radius:50%;
  background:#1e60a8; border:2px solid #d6d3c4; pointer-events:none; z-index:9999;
  transform: translate(-50%,-50%);
  /* ikuti mouse via anchor? versi CSS-only: muncul di posisi hover */
  left: var(--mx, 50%); top: var(--my, 50%);
}
/* Kursor gambar custom — GANTI URL dengan link Media Library kamu:
   Dashboard > Media > klik gambar titik/kursor > Copy URL > paste di bawah */
.hv-cur-gambar:hover {
  cursor: url('https://rentang.art/wp-content/uploads/kursor.png') 16 16, pointer !important;
}

/* ---------- 10. 10 EFEK BARU (palet rentang.art, foto tetap tajam) ---------- */

/* FOTO 1: flip vertikal */
.hv-foto-flipv img { border-radius:0 !important; transition: transform .6s ease !important; display:block !important; margin:0 !important; }
.hv-foto-flipv:hover img { transform: rotateX(180deg) !important; }

/* FOTO 2: sorot biru sweep dari kiri */
.hv-foto-sweep { position:relative; overflow:hidden !important; border-radius:0 !important; line-height:0 !important; }
.hv-foto-sweep img { border-radius:0 !important; display:block !important; margin:0 !important; }
.hv-foto-sweep::before { content:""; position:absolute; inset:0; background:rgba(30,96,168,.45); transform:translateX(-101%); transition:transform .45s ease; pointer-events:none; }
.hv-foto-sweep:hover::before { transform:translateX(0); }

/* FOTO 3: kontras + vignette krem */
.hv-foto-vignet img { border-radius:0 !important; transition: filter .45s ease, transform .45s ease !important; display:block !important; margin:0 !important; }
.hv-foto-vignet:hover img { filter: contrast(1.15) sepia(.18) !important; transform: scale(1.04) !important; }

/* FOTO 4: goyang halus saat hover */
.hv-foto-goyang img { border-radius:0 !important; display:block !important; margin:0 !important; }
.hv-foto-goyang:hover img { animation: hvFotoGoyang .5s ease; }
@keyframes hvFotoGoyang { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-1.5deg) scale(1.02)} 50%{transform:rotate(1.5deg) scale(1.02)} 75%{transform:rotate(-.8deg)} }

/* TOMBOL 1: garis tepi ganda muncul - ikut pill */
.hv-btn-double a, .hv-btn-double { position:relative; transition: transform .3s ease !important; border-radius: 999px !important; }
.hv-btn-double:hover a, .hv-btn-double:hover { transform: translateY(-2px) !important; box-shadow: 0 0 0 2px #1e60a8, 0 0 0 6px #d6d3c4 !important; outline: none !important; }

/* TOMBOL 2: geser teks ke kanan */
.hv-btn-gesertek a, .hv-btn-gesertek { transition: transform .3s ease !important; }
.hv-btn-gesertek:hover a, .hv-btn-gesertek:hover { transform: translateX(6px) !important; background:#1e60a8 !important; color:#d6d3c4 !important; }

/* TOMBOL 3: bayangan lembut abu membesar */
.hv-btn-lembut a, .hv-btn-lembut { transition: box-shadow .35s ease, transform .35s ease !important; }
.hv-btn-lembut:hover a, .hv-btn-lembut:hover { transform: translateY(-3px) !important; box-shadow:0 12px 24px rgba(64,64,64,.28) !important; }

/* LAINNYA 1: judul ketik / underline mengetik */
.hv-ketik { position:relative; display:inline-block; transition:color .3s ease !important; }
.hv-ketik::after { content:""; position:absolute; left:0; bottom:-4px; height:2px; width:0; background:#1e60a8; transition:width .45s ease; }
.hv-ketik:hover { color:#1e60a8 !important; }
.hv-ketik:hover::after { width:100%; }

/* LAINNYA 2: card fade abu ke krem */
.hv-card-krem { transition: background .4s ease, transform .4s ease !important; border-radius:0 !important; }
.hv-card-krem:hover { background:#d6d3c4 !important; transform:translateY(-6px) !important; }

/* LAINNYA 3: teks outline biru (untuk judul besar) */
.hv-teks-outline { transition: all .35s ease !important; }
.hv-teks-outline:hover { color:transparent !important; -webkit-text-stroke:2px #1e60a8 !important; }

/* Hormati user yang matikan animasi */
@media (prefers-reduced-motion: reduce) {
  .hv-zoom, .hv-lift, .hv-flip, .hv-bounce, .hv-goyang { transition:none !important; animation:none !important; }
}