/* =========================================================
   HERO FOTO KAQ — dipakai Ruang Murottal, Ruang Faedah, Toko, Komunitas.
   Ganti foto: simpan file di assets/img/hero/ lalu ubah src <img>.
   Kredit foto: assets/img/hero/KREDIT-FOTO.json
   ========================================================= */
.hx{position:relative;overflow:hidden;background:linear-gradient(180deg,#FFFFFF 0%,#F3F6FB 100%);padding:0 0 34px;isolation:isolate}
.hx *{box-sizing:border-box}
.hx-shape{position:absolute;left:0;top:0;bottom:120px;width:60%;background:radial-gradient(ellipse at 20% 0%,#24508F 0%,#12294C 48%,#0A1628 100%);border-bottom-right-radius:58% 38%;z-index:-1;overflow:hidden}
.hx-shape::before{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23E8D49A' stroke-width='.5'%3E%3Cpath d='M20 4l4.7 11.3L36 20l-11.3 4.7L20 36l-4.7-11.3L4 20l11.3-4.7z'/%3E%3C/g%3E%3C/svg%3E");opacity:.08}
.hx-shape::after{content:"";position:absolute;right:-12%;bottom:-30%;width:70%;aspect-ratio:1;border-radius:50%;border:1.5px solid rgba(232,212,154,.25)}
.hx-blob{position:absolute;right:-8%;top:-18%;width:52%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(127,166,224,.28),rgba(127,166,224,0));z-index:-1}
.hx-grid{display:grid;isolation:isolate;grid-template-columns:1fr 1.02fr;gap:40px;align-items:center;padding:64px 0 40px;position:relative}
.hx-copy{color:#C9D6EA;position:relative;z-index:2}
.hx-eyebrow{display:flex;flex-wrap:wrap;gap:6px 14px;font:700 12px Sora,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#E8D49A}
.hx-eyebrow i{font-style:normal;opacity:.6}
.hx h1{color:#fff;font:800 clamp(36px,4.8vw,60px)/1.06 Sora,sans-serif;letter-spacing:-.03em;margin:16px 0 18px}
.hx h1 span{background:linear-gradient(100deg,#9CC0F2,#C9D9F2 45%,#E8D49A);-webkit-background-clip:text;background-clip:text;color:transparent}
.hx-lead{font-size:18px;line-height:1.75;color:#C9D6EA;max-width:33em}
.hx-salam{font:600 15px 'Plus Jakarta Sans',sans-serif;color:#E8D49A;margin-bottom:6px}
.hx-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hx-btn{display:inline-flex;align-items:center;gap:8px;font:700 15px Sora,sans-serif;padding:14px 22px;border-radius:14px;background:linear-gradient(135deg,#F6E6B4,#C9A652 55%,#A8822F);color:#0A1628;box-shadow:0 14px 30px -14px rgba(232,212,154,.8);text-decoration:none}
.hx-btn.ghost{background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(127,166,224,.45);box-shadow:none}
.hx-btn:hover{filter:brightness(1.06)}
.hx-trust{display:flex;flex-wrap:wrap;gap:12px 22px;margin-top:30px}
.hx-trust span{display:inline-flex;align-items:center;gap:9px;font:600 13.5px 'Plus Jakarta Sans',sans-serif;color:#DCE5F3}
.hx-trust b{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#12294C;font-size:14px;box-shadow:0 6px 14px -6px rgba(0,0,0,.5)}

/* visual */
.hx-vis{position:relative;aspect-ratio:1/1;max-width:600px;width:100%;justify-self:end}
.hx-ring{position:absolute;left:12%;top:2%;width:76%;height:92%;border-radius:999px 999px 34px 34px;border:2px solid rgba(201,166,82,.55);transform:translate(16px,14px)}
.hx-main{position:absolute;left:12%;top:2%;width:76%;height:92%;margin:0;border-radius:999px 999px 34px 34px;overflow:hidden;box-shadow:0 40px 80px -36px rgba(10,22,40,.75);background:#0A1628}
.hx-main img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.02);transition:transform 6s ease}
.hx:hover .hx-main img{transform:scale(1.07)}
.hx-main::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,22,40,0) 55%,rgba(10,22,40,.55))}
.hx-sm{position:absolute;margin:0;width:38%;border-radius:20px;background:#fff;padding:7px 7px 0;box-shadow:0 26px 50px -24px rgba(10,22,40,.6);z-index:3;animation:hxf 9s ease-in-out infinite}
.hx-sm img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px}
.hx-sm figcaption{display:flex;align-items:center;gap:8px;padding:9px 6px 10px;font:700 13px/1.25 Sora,sans-serif;color:#0F1B2D}
.hx-sm figcaption small{display:block;font:500 11.5px 'Plus Jakarta Sans',sans-serif;color:#7A869B}
.hx-sm figcaption i{flex:none;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(160deg,#1A3766,#0A1628);color:#E8D49A;font-style:normal;font-size:14px}
.hx-sm.a{left:-4%;bottom:4%}
.hx-sm.b{right:-5%;top:20%;width:34%;animation-delay:-4s}
.hx-card{position:absolute;z-index:4;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(227,230,236,.9);border-radius:18px;padding:12px 16px;box-shadow:0 22px 44px -22px rgba(10,22,40,.5);display:flex;align-items:center;gap:12px;animation:hxf 8s ease-in-out infinite;animation-delay:-2s;color:#27354B}
.hx-card b{display:block;font:700 14px/1.25 Sora,sans-serif;color:#0F1B2D}
.hx-card small{display:block;font-size:12px;color:#56627A;line-height:1.4}
.hx-card .ic{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#F6E6B4,#C9A652 55%,#A8822F);color:#0A1628;font-size:18px}
.hx-card.c1{right:2%;bottom:6%}
.hx-card.c2{left:2%;top:10%}
.hx-card .av{width:40px;height:40px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px #fff,0 0 0 3.5px #C9A652}
.hx-wave{display:flex;align-items:center;gap:3px;height:22px}
.hx-wave i{width:3px;border-radius:2px;background:#3A64A3;animation:hxw 1.1s ease-in-out infinite}
.hx-wave i:nth-child(2n){animation-delay:-.4s}.hx-wave i:nth-child(3n){animation-delay:-.7s}
.hx-script{position:absolute;right:-4%;top:-5%;z-index:4;font-family:'Aref Ruqaa',serif;direction:rtl;font-size:clamp(22px,2.4vw,32px);line-height:1.25;color:#12294C;text-align:right;transform:rotate(-4deg)}
.hx-script small{display:block;direction:ltr;font:600 11px Sora,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#8C6A22;margin-top:2px}
@keyframes hxf{50%{transform:translateY(-8px)}}
@keyframes hxw{0%,100%{height:6px}50%{height:22px}}

/* dock (tab / pencarian di bawah hero) */
.hx-dock{position:relative;z-index:5;background:#fff;border:1px solid #E6E9EF;border-radius:24px;box-shadow:0 30px 60px -34px rgba(10,22,40,.45);padding:12px}
.hx-tabs{display:flex;flex-wrap:wrap;gap:8px}
.hx-tabs a,.hx-tabs button{flex:1;min-width:150px;display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;text-decoration:none;color:#27354B;font:inherit;background:none;border:0;cursor:pointer;text-align:left}
.hx-tabs a:hover,.hx-tabs button:hover{background:#F3F6FB}
.hx-tabs i{flex:none;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-style:normal;font-size:19px;background:#EEF3FB;color:#12294C}
.hx-tabs b{display:block;font:700 14.5px/1.25 Sora,sans-serif;color:#0F1B2D}
.hx-tabs small{display:block;font-size:12.5px;color:#7A869B;line-height:1.35}
.hx-tabs .on{background:linear-gradient(160deg,#1A3766,#0A1628)}
.hx-tabs .on b{color:#fff}.hx-tabs .on small{color:#A9BEDF}.hx-tabs .on i{background:linear-gradient(135deg,#F6E6B4,#C9A652);color:#0A1628}
.hx-credit{font-size:11.5px;color:#7A869B;text-align:right;margin-top:10px}
.hx-credit a{color:#3A64A3;text-decoration:underline}

@media(max-width:980px){
  .hx{overflow:hidden}
  .hx-vis{margin-top:40px}
  .hx-script{top:-9%}
  .hx-shape{display:none}
  .hx-copy{position:relative}
  .hx-copy::before{content:"";position:absolute;left:-60px;right:-60px;top:-60px;bottom:-56px;z-index:-1;background:radial-gradient(ellipse at 20% 0%,#24508F 0%,#12294C 48%,#0A1628 100%);border-radius:0 0 50% 50%/0 0 36px 36px}
  .hx-grid{grid-template-columns:1fr;gap:30px;padding:48px 0 24px}
  .hx-vis{justify-self:center;max-width:520px}
}
@media(max-width:640px){
  .hx-script{display:none}
  .hx h1{font-size:34px}
  .hx-lead{font-size:16.5px}
  .hx-vis{max-width:420px}
  .hx-sm{width:42%;padding:5px 5px 0;border-radius:14px}
  .hx-sm img{border-radius:10px}
  .hx-sm figcaption{font-size:11.5px;padding:7px 4px 8px;gap:6px}
  .hx-sm figcaption small{display:none}
  .hx-sm figcaption i{width:24px;height:24px;font-size:12px;border-radius:8px}
  .hx-card{padding:9px 12px;gap:9px;border-radius:14px}
  .hx-card b{font-size:12.5px}.hx-card small{font-size:11px}
  .hx-card .ic,.hx-card .av{width:32px;height:32px;font-size:15px}
  .hx-tabs a,.hx-tabs button{min-width:calc(50% - 4px);padding:10px;gap:9px}
  .hx-tabs i{width:34px;height:34px;font-size:16px}
  .hx-tabs small{display:none}
  .hx-trust{gap:10px 16px}
}
@media(prefers-reduced-motion:reduce){.hx *{animation:none!important;transition:none!important}}