/* =========================================================
   HALAMAN SAMBUTAN KAQ · versi cerah, modern, tanpa ornamen
   Pengaturan tampil/tidak ada di <head> index.html → KAQ_SAMBUTAN
   ========================================================= */
.sb{--navy:#0F2547;--navy2:#1A3766;--blue:#3A64A3;--gold:#B8923F;--ink:#101B2D;--text:#46536A;--muted:#7A869B;--line:#E7EAF0;
  position:fixed;inset:0;z-index:9999;display:none;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
  background:#FFFFFF;
  color:var(--text);font-family:'Plus Jakarta Sans',system-ui,sans-serif}
html.sb-on .sb{display:block}
html.sb-on body{overflow:hidden}
.sb *{box-sizing:border-box}
.sb:focus{outline:none}

/* ---- bar atas ---- */
.sb-top{width:min(1200px,100% - 40px);margin-inline:auto;display:flex;justify-content:flex-end;align-items:center;padding-top:22px}
.sb-skip{font:600 13.5px 'Plus Jakarta Sans';color:var(--text);background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 18px;cursor:pointer;transition:.25s}
.sb-skip:hover{color:var(--navy);border-color:#C9D3E3;box-shadow:0 6px 16px -10px rgba(15,37,71,.35)}

/* ---- kerangka ---- */
.sb-in{width:min(1200px,100% - 40px);margin-inline:auto;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:72px;align-items:center;min-height:calc(100% - 64px);padding:20px 0 28px}

/* ---- kolom kiri ---- */
.sb-logo{width:132px;height:132px;display:block;margin:0 0 26px -6px}
.sb-salam{font:600 14px 'Plus Jakarta Sans';color:var(--gold);letter-spacing:.02em;margin:0 0 10px}
.sb-name{font:800 clamp(38px,4.6vw,58px)/1.04 Sora,sans-serif;letter-spacing:-.035em;color:var(--navy);margin:0}
.sb-name span{color:var(--blue)}
.sb-ar{display:block;font:700 26px/1.4 'Aref Ruqaa',serif;color:var(--gold);direction:rtl;text-align:left;margin:10px 0 0}
.sb-tag{font:500 18px/1.6 'Plus Jakarta Sans';color:var(--text);margin:14px 0 0;max-width:30em}
.sb-pills{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0;padding:0;list-style:none}
.sb-pills li{font:600 12.5px 'Plus Jakarta Sans';color:var(--navy2);background:#EEF3FA;border-radius:999px;padding:7px 14px}
.sb-hadis{margin:28px 0 0;padding:0 0 0 18px;border-left:2px solid var(--gold);max-width:500px}
.sb-hadis p{font:500 15.5px/1.65 'Plus Jakarta Sans';color:var(--ink);margin:0}
.sb-hadis small{display:block;font-size:12.5px;color:var(--muted);margin-top:6px}
.sb-cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:34px}
.sb-go{display:inline-flex;align-items:center;gap:14px;font:700 16px Sora,sans-serif;color:#fff;cursor:pointer;border:0;
  padding:17px 20px 17px 28px;border-radius:14px;background:var(--navy);box-shadow:0 18px 36px -18px rgba(15,37,71,.75);transition:transform .25s,box-shadow .25s,background .25s}
.sb-go:hover{background:var(--navy2);transform:translateY(-2px);box-shadow:0 22px 40px -18px rgba(15,37,71,.8)}
.sb-go .ar{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:#fff;color:var(--navy);font-size:16px;transition:transform .25s}
.sb-go:hover .ar{transform:translateX(3px)}
.sb-wa{font:600 14.5px 'Plus Jakarta Sans';color:var(--navy2);text-decoration:none;border-bottom:1.5px solid #CBD6E8;padding:2px 0}
.sb-wa:hover{color:var(--navy);border-color:var(--navy)}
.sb-go:focus-visible,.sb-skip:focus-visible,.sb-door:focus-visible,.sb-wa:focus-visible{outline:3px solid #9CC0F2;outline-offset:3px}
.sb-hint{display:none}

/* ---- kolom kanan: 6 ruang ---- */
.sb-map{background:#F5F7FB;border-radius:28px;padding:26px}
.sb-map-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:16px}
.sb-map-h b{font:700 18px Sora,sans-serif;color:var(--ink);letter-spacing:-.01em}
.sb-map-h span{font-size:13px;color:var(--muted)}
.sb-doors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.sb-door{display:flex;flex-direction:column;text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:18px;padding:8px 8px 14px;
  box-shadow:0 1px 2px rgba(15,37,71,.04),0 14px 30px -24px rgba(15,37,71,.35);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s}
.sb-door .sb-ph{position:relative;display:block;flex:none;border-radius:12px;overflow:hidden;aspect-ratio:4/3;background:#EEF1F6}
.sb-door .sb-ph{min-height:0}
.sb-door img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s ease}
.sb-door .tx{display:block;padding:12px 8px 0}
.sb-door .no{display:block;font:700 11px Sora;letter-spacing:.14em;color:var(--gold);margin-bottom:5px}
.sb-door b{display:flex;align-items:center;justify-content:space-between;gap:8px;font:700 15px/1.25 Sora,sans-serif;color:var(--ink)}
.sb-door b i{font-style:normal;flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:13px;color:var(--navy);background:#EEF3FA;transition:.3s}
.sb-door small{display:block;font-size:12.5px;line-height:1.45;color:var(--muted);margin-top:4px}
.sb-door:hover{transform:translateY(-4px);border-color:#D5DDEA;box-shadow:0 2px 4px rgba(15,37,71,.04),0 24px 44px -26px rgba(15,37,71,.45)}
.sb-door:hover img{transform:scale(1.05)}
.sb-door:hover b i{background:var(--navy);color:#fff}

.sb-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 20px;padding-top:16px;border-top:1px solid var(--line);font-size:11.5px;color:#98A2B3}
.sb-foot a{color:var(--muted)}

/* ---- animasi halus ---- */
.sb-copy>*,.sb-map-h,.sb-door{opacity:0;transform:translateY(12px);animation:sbUp .7s cubic-bezier(.2,.8,.2,1) forwards}
.sb-copy>*:nth-child(1){animation-delay:.05s}.sb-copy>*:nth-child(2){animation-delay:.12s}.sb-copy>*:nth-child(3){animation-delay:.18s}
.sb-copy>*:nth-child(4){animation-delay:.24s}.sb-copy>*:nth-child(5){animation-delay:.3s}.sb-copy>*:nth-child(6){animation-delay:.36s}
.sb-copy>*:nth-child(7){animation-delay:.42s}.sb-copy>*:nth-child(8){animation-delay:.48s}
.sb-map-h{animation-delay:.3s}
.sb-door:nth-child(1){animation-delay:.38s}.sb-door:nth-child(2){animation-delay:.44s}.sb-door:nth-child(3){animation-delay:.5s}
.sb-door:nth-child(4){animation-delay:.56s}.sb-door:nth-child(5){animation-delay:.62s}.sb-door:nth-child(6){animation-delay:.68s}
@keyframes sbUp{to{opacity:1;transform:none}}
html.sb-out .sb{animation:sbLeave .7s cubic-bezier(.7,0,.2,1) forwards;pointer-events:none}
@keyframes sbLeave{to{opacity:0;transform:scale(1.02)}}

/* ---- responsif ---- */
@media(max-width:1060px){
  .sb-in{grid-template-columns:minmax(0,1fr);gap:44px;padding-top:8px}
  .sb-map{background:#F4F7FB;margin:0 -20px;padding:28px 20px;border-radius:24px 24px 0 0}
}
@media(max-width:640px){
  .sb-top{padding-top:16px}
  .sb-copy{text-align:center}
  .sb-logo{width:104px;height:104px;margin:0 auto 18px}
  .sb-ar{text-align:center;font-size:23px}
  .sb-tag{font-size:16.5px;margin-inline:auto}
  .sb-pills{justify-content:center}
  .sb-hadis{text-align:left;margin-inline:auto}
  .sb-cta{flex-direction:column;align-items:stretch;gap:14px}
  .sb-go{justify-content:center}
  .sb-wa{align-self:center}
  .sb-hint{display:block;font-size:12.5px;color:var(--muted);text-align:center}
  .sb-map-h{flex-direction:column;gap:2px}
  .sb-map{margin:0 -8px;padding:18px 12px;border-radius:22px}
  .sb-doors{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .sb-door{padding:6px 6px 12px;border-radius:16px}
  .sb-door .tx{padding:10px 6px 0}
  .sb-door b{font-size:14px}
  .sb-door b i{display:none}
  .sb-door small{font-size:12px}
}
@media(prefers-reduced-motion:reduce){
  .sb *,.sb{animation:none!important;transition:none!important}
  .sb-copy>*,.sb-map-h,.sb-door{opacity:1!important;transform:none!important}
}