/* ==========================================================================
   Footer mewah v3: jam ringkas, Instagram melayang di kiri, kolom beranimasi, tombol ke atas jelas terlihat.
   Dimuat setelah beranda-baru.css.
   ========================================================================== */
.kaki{--kk-emas:#e9c46a;--kk-emas-t:#c9a24a;--kk-terang:#f6e3a1}

/* Garis emas atas berkilau */
.kaki::after{background-size:220% 100%!important;animation:kk-garis 7s linear infinite}
@keyframes kk-garis{to{background-position:-220% 0}}

/* Bintang khatam besar berputar sangat pelan di latar */
.kaki-isi{position:relative}
.kaki-isi::before{content:"";position:absolute;z-index:-1;right:-140px;top:-90px;width:520px;height:520px;pointer-events:none;opacity:.07;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' fill='none' stroke='%23e9c46a' stroke-width='1.4'%3E%3Crect x='70' y='70' width='260' height='260'/%3E%3Crect x='70' y='70' width='260' height='260' transform='rotate(45 200 200)'/%3E%3Ccircle cx='200' cy='200' r='141'/%3E%3Crect x='112' y='112' width='176' height='176'/%3E%3Crect x='112' y='112' width='176' height='176' transform='rotate(45 200 200)'/%3E%3Ccircle cx='200' cy='200' r='86'/%3E%3C/svg%3E") center/contain no-repeat;
  animation:kk-putar 120s linear infinite}
@keyframes kk-putar{to{transform:rotate(360deg)}}

/* Kolom muncul berurutan (hanya bila JS aktif) */
.kaki.kk-js .kaki-isi>div{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
.kaki.kk-js.tampil .kaki-isi>div{opacity:1;transform:none}
.kaki.kk-js.tampil .kaki-isi>div:nth-child(2){transition-delay:.12s}
.kaki.kk-js.tampil .kaki-isi>div:nth-child(3){transition-delay:.24s}
.kaki.kk-js.tampil .kaki-isi>div:nth-child(4){transition-delay:.36s}

/* Judul kolom: garis emas tumbuh */
.kaki h4{letter-spacing:.02em}
.kaki h4::after{width:0!important;transition:width .9s cubic-bezier(.2,.8,.2,1) .5s;background:linear-gradient(90deg,var(--kk-emas-t),var(--kk-terang))!important}
.kaki.tampil h4::after,.kaki:not(.kk-js) h4::after{width:42px!important}

/* Tautan: geser sedikit dan muncul penanda berlian emas */
.kaki-dua a,.kaki-unit{position:relative;transition:transform .3s cubic-bezier(.2,.8,.2,1),color .25s}
.kaki-dua a::before{content:"";position:absolute;left:-14px;top:50%;width:6px;height:6px;margin-top:-3px;background:var(--kk-emas);transform:rotate(45deg) scale(0);transition:transform .3s}
.kaki-dua a:hover,.kaki-unit:hover{transform:translateX(7px)}
.kaki-dua a:hover::before{transform:rotate(45deg) scale(1)}
.kaki-unit i{transition:transform .3s,box-shadow .3s}
.kaki-unit:hover i{transform:scale(1.5);box-shadow:0 0 12px var(--warna,#e9c46a)}

/* Kontak & sosial */
.kaki-kontak svg{transition:transform .35s,background .3s,color .3s,box-shadow .3s}
.kaki-kontak li:hover svg{transform:translateY(-3px) rotate(-6deg);background:var(--kk-emas);color:#081330;box-shadow:0 10px 18px -8px var(--kk-emas)}
.kaki-sosial{display:flex;gap:.6rem;flex-wrap:wrap}
.kaki-sosial a{border:1px solid #e9c46a55;transition:transform .3s,background .3s,color .3s,box-shadow .3s}
.kaki-sosial a:hover{transform:translateY(-4px);box-shadow:0 12px 20px -10px var(--kk-emas)}
.kaki .arab{box-shadow:0 0 0 0 #e9c46a00;animation:kk-cahaya 5s ease-in-out infinite}
@keyframes kk-cahaya{50%{box-shadow:0 0 26px -4px #e9c46a66}}

/* ---------- Panel waktu: ringkas ---------- */
.kaki-info{max-width:1150px;margin:1.8rem auto 0}
.kaki-info-isi{align-items:center;gap:.7rem}
.kaki-info .jam-wrap{flex:1 1 480px;gap:.8rem;padding:.55rem 1rem .55rem .6rem;border-radius:16px}
.kaki-info .jam-ikon{width:38px;height:38px;border-radius:12px}
.kaki-info .jam-ikon svg{width:18px;height:18px}
.kaki-info .jam-label{font-size:.56rem;margin-bottom:.22rem;letter-spacing:.2em;gap:.4rem}
.kaki-info .jam-titik{width:6px;height:6px}
.kaki-info .jam-waktu{font-size:1.22rem;letter-spacing:.05em}
.kaki-info .jam-zona{font-size:.62rem}
.kaki-info .jam-tengah{padding-inline-start:.9rem;gap:.1rem}
.kaki-info .jam-tgl{font-size:.82rem}
.kaki-info .jam-hijri{font-size:.78rem}
.kaki-info .jam-sapa{padding:.32rem .8rem;font-size:.7rem}
.kaki-info .bhs{align-self:center;padding:.28rem;border-radius:16px;gap:.15rem}
.kaki-info .bhs a{padding:.42rem .85rem;font-size:.76rem}

/* ---------- Instagram melayang di kiri (pasangan tombol WhatsApp di kanan) ---------- */
.ig-ambang{position:fixed;left:20px;bottom:20px;z-index:40;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;
  background:linear-gradient(135deg,#14295f,#0c1a43);box-shadow:0 0 0 2px #c9a24b,0 12px 26px -10px rgba(12,26,67,.85);
  animation:2.4s infinite denyutWa,1s 2.2s both masuk;transition:transform .3s}
.ig-ambang:hover{transform:scale(1.12) rotate(8deg)}
.ig-ambang::after{content:attr(data-label);position:absolute;left:70px;top:50%;translate:-8px -50%;padding:.4rem .8rem;border-radius:999px;white-space:nowrap;pointer-events:none;
  background:#0c1a43;color:#f6e3a1;border:1px solid #c9a24b88;font:700 .78rem 'DM Sans',sans-serif;opacity:0;transition:.3s}
.ig-ambang:hover::after,.ig-ambang:focus-visible::after{opacity:1;translate:0 -50%}
.ig-ambang:focus-visible,.ke-atas:focus-visible{outline:3px solid #fff;outline-offset:3px}
html[dir=rtl] .ig-ambang{left:auto;right:20px}
html[dir=rtl] .ig-ambang::after{left:auto;right:70px}

/* ---------- Tombol ke atas: panah emas jelas terlihat ---------- */
.ke-atas{display:grid;place-items:center;padding:0;width:46px;height:46px;border-radius:14px;line-height:1;
  background:linear-gradient(135deg,#14295f,#0c1a43)!important;color:#f0dca0!important;border:1.5px solid #c9a24b;box-shadow:0 12px 24px -10px rgba(12,26,67,.85)}
.ke-atas:hover{background:#c9a24b!important;color:#081330!important}

@media (max-width:900px){
  .kaki-info .jam-wrap{flex:none;flex-wrap:wrap}
  .kaki-info .jam-tengah{padding-top:.6rem}
  .kaki-info .bhs{width:100%;justify-content:center}
}
@media (max-width:560px){
  .ig-ambang{left:14px;bottom:14px;width:52px;height:52px}
  .ig-ambang::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  .kaki::after,.kaki-isi::before,.kaki .arab,.ig-ambang{animation:none!important}
  .kaki.kk-js .kaki-isi>div{opacity:1;transform:none;transition:none}
}