/* ==========================================================================
   Section angka pencapaian (beranda) — kartu 3D
   Berkas terpisah supaya tidak menimpa site.css.
   ========================================================================== */

.stat-band{
  position:relative; isolation:isolate; overflow:hidden;
  padding:4rem 0 4.4rem; color:#fff;
  background:
    radial-gradient(120% 90% at 50% -20%, #2f5a3d 0%, #1b3526 45%, #0e1f16 100%);
}

/* Lapisan latar: kisi halus + cahaya emas, memberi kedalaman ruang */
.stat-bg{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    radial-gradient(closest-side at 82% 12%, rgba(212,175,95,.20), transparent 70%),
    radial-gradient(closest-side at 12% 88%, rgba(122,190,142,.14), transparent 70%),
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:auto, auto, 46px 46px, 46px 46px;
  mask-image:radial-gradient(130% 100% at 50% 0%, #000 35%, transparent 85%);
  -webkit-mask-image:radial-gradient(130% 100% at 50% 0%, #000 35%, transparent 85%);
}

/* ---------------- Kepala section ---------------- */
.stat-head{ text-align:center; margin-bottom:2.6rem; }
.stat-head .eyebrow{
  font-size:.72rem; letter-spacing:.16em; font-weight:700; text-transform:uppercase;
  color:var(--gold-500,#d4af5f); margin-bottom:.6rem;
}
.stat-head h2{
  font-family:var(--font-display,Georgia,serif); font-weight:700; color:#fff;
  font-size:clamp(1.5rem,3.1vw,2.15rem); line-height:1.28; margin:0;
  text-shadow:0 2px 12px rgba(0,0,0,.35);
}

/* ---------------- Kisi kartu ---------------- */
.stat-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.15rem;
  perspective:1100px;                      /* ruang 3D untuk anak-anaknya */
}

/* ---------------- Kartu 3D ---------------- */
.stat-kartu{
  --rx:0deg; --ry:0deg; --mx:50%; --my:50%;
  position:relative; text-align:center; isolation:isolate;
  padding:2rem 1.1rem 1.7rem; border-radius:18px; cursor:default;
  transform-style:preserve-3d;
  transform:rotateX(var(--rx)) rotateY(var(--ry)) translateZ(0);
  transition:transform .4s cubic-bezier(.22,.7,.3,1), box-shadow .4s ease, border-color .3s ease;

  background:
    linear-gradient(160deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.05) 38%, rgba(255,255,255,.02) 100%),
    linear-gradient(#1d3829, #162c20);
  border:1px solid rgba(255,255,255,.13);

  /* Kedalaman: sorot atas di dalam, bayangan gelap bertingkat di luar */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -14px 24px -18px rgba(0,0,0,.85),
    0 2px 4px rgba(0,0,0,.28),
    0 10px 18px -8px rgba(0,0,0,.48),
    0 26px 44px -20px rgba(0,0,0,.62);
}

/* Tepi bawah bercahaya — kesan kartu punya ketebalan */
.stat-kartu::after{
  content:''; position:absolute; left:8%; right:8%; bottom:-1px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, transparent, rgba(212,175,95,.55), transparent);
  opacity:.55; transition:opacity .3s ease;
}

/* Kilau spekular mengikuti kursor */
.stat-kilau{
  content:''; position:absolute; inset:0; border-radius:inherit; z-index:-1;
  background:radial-gradient(260px circle at var(--mx) var(--my), rgba(212,175,95,.28), transparent 62%);
  opacity:0; transition:opacity .35s ease; pointer-events:none;
}

.stat-kartu:hover,
.stat-kartu:focus-visible{
  border-color:rgba(212,175,95,.42);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 -14px 24px -18px rgba(0,0,0,.85),
    0 4px 8px rgba(0,0,0,.30),
    0 18px 30px -10px rgba(0,0,0,.55),
    0 44px 66px -26px rgba(0,0,0,.70);
}
.stat-kartu:hover .stat-kilau,
.stat-kartu:focus-visible .stat-kilau{ opacity:1; }
.stat-kartu:hover::after{ opacity:1; }
.stat-kartu:focus-visible{ outline:2px solid rgba(212,175,95,.75); outline-offset:3px; }

/* ---------------- Ikon timbul ---------------- */
.stat-ikon{
  display:grid; place-items:center; width:58px; height:58px; margin:0 auto 1.05rem;
  border-radius:17px; color:var(--gold-500,#d4af5f);
  transform:translateZ(48px);
  background:linear-gradient(150deg, #47795a 0%, #2a4c36 45%, #162b1e 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -3px 8px rgba(0,0,0,.45),
    0 8px 16px -4px rgba(0,0,0,.55),
    0 2px 4px rgba(0,0,0,.35);
  transition:transform .4s cubic-bezier(.22,.7,.3,1), color .3s ease;
}
.stat-ikon svg{ width:27px; height:27px; display:block;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.45)); }
.stat-kartu:hover .stat-ikon{ transform:translateZ(62px) scale(1.06); color:#f0d79a; }

/* ---------------- Angka ---------------- */
.stat-angka{
  display:block; transform:translateZ(32px);
  font-family:var(--font-display,Georgia,serif); font-weight:700;
  font-size:clamp(2rem,4.4vw,2.85rem); line-height:1.02;
  font-variant-numeric:tabular-nums; letter-spacing:-.01em;
  background:linear-gradient(175deg, #fbeec6 0%, #e3c377 42%, #b78f3f 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.48));
}

/* Garis pemisah tipis */
.stat-garis{
  display:block; width:34px; height:1px; margin:.75rem auto .6rem;
  transform:translateZ(20px);
  background:linear-gradient(90deg, transparent, rgba(212,175,95,.75), transparent);
}

/* ---------------- Label ---------------- */
.stat-label{
  display:block; transform:translateZ(16px);
  font-size:.82rem; line-height:1.45; color:rgba(255,255,255,.80);
  letter-spacing:.015em;
}

/* ---------------- Animasi muncul ---------------- */
.stat-kartu{ opacity:0; }
.stat-kartu.masuk{ animation:statMasuk .62s cubic-bezier(.22,.7,.3,1) forwards; }
.stat-grid .stat-kartu:nth-child(2).masuk{ animation-delay:.08s; }
.stat-grid .stat-kartu:nth-child(3).masuk{ animation-delay:.16s; }
.stat-grid .stat-kartu:nth-child(4).masuk{ animation-delay:.24s; }

@keyframes statMasuk{
  from{ opacity:0; transform:perspective(1100px) rotateX(9deg) translateY(26px) scale(.965); }
  to  { opacity:1; transform:perspective(1100px) rotateX(0)    translateY(0)    scale(1); }
}

/* ---------------- Responsif ---------------- */
@media (max-width:900px){
  .stat-band{ padding:3rem 0 3.2rem; }
  .stat-grid{ grid-template-columns:repeat(2,1fr); gap:.85rem; }
  .stat-kartu{ padding:1.6rem .85rem 1.35rem; }
  .stat-ikon{ width:50px; height:50px; border-radius:15px; margin-bottom:.85rem; }
  .stat-ikon svg{ width:23px; height:23px; }
}
@media (max-width:420px){
  .stat-band{ padding:2.5rem 0 2.7rem; }
  .stat-head{ margin-bottom:1.9rem; }
  .stat-kartu{ padding:1.35rem .6rem 1.15rem; border-radius:15px; }
  .stat-label{ font-size:.75rem; }
  .stat-garis{ margin:.6rem auto .5rem; }
}

/* Hormati preferensi pengguna: tanpa animasi & tanpa kemiringan */
@media (prefers-reduced-motion: reduce){
  .stat-kartu{ opacity:1; animation:none !important; transform:none !important; }
  .stat-ikon, .stat-angka, .stat-garis, .stat-label{ transform:none !important; }
  .stat-kartu, .stat-ikon{ transition:none; }
}