/* =========================================================
   CSS KHUSUS HALAMAN "TEACHING FACTORY (TeFa)"
   Warna tetap dari variabel :root di muspla-design.css.
   Prefix class "tf-" biar tidak bentrok dengan halaman lain.
   ========================================================= */

/* ================= HERO ================= */
.tf-hero{
  position:relative; overflow:hidden; background:var(--blue-deep); color:#fff;
  padding:56px 0 64px;
}
.tf-hero-blob-1{
  top:-140px; right:-100px; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(245,197,24,.28) 0%, transparent 70%);
}
.tf-hero-blob-2{
  bottom:-160px; left:-120px; width:380px; height:380px; border-radius:50%;
  background:radial-gradient(circle, rgba(227,227,245,.14) 0%, transparent 70%);
}
.tf-hero-wrap{ position:relative; z-index:1; max-width:720px; }
.tf-eyebrow{
  display:inline-flex; align-items:center; gap:8px; background:var(--yellow); color:var(--blue-deep);
  font-size:12.5px; font-weight:800; padding:7px 16px; border-radius:100px; margin:14px 0 14px;
}
.tf-hero h1{ font-size:clamp(30px,4vw,46px); font-weight:800; line-height:1.15; }
.tf-hero-lede{ margin-top:16px; font-size:16px; color:rgba(255,255,255,.78); max-width:580px; line-height:1.7; }

.tf-hero-stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
  background:rgba(255,255,255,.14); border-radius:var(--radius-md) var(--radius-md) 0 0;
  margin-top:44px; overflow:hidden; transform:translateY(36px); box-shadow:var(--shadow); max-width:620px;
}
.tf-hero-stat{ background:var(--white); padding:24px 16px; text-align:center; }
.tf-hero-stat .num{ font-family:'Plus Jakarta Sans',sans-serif; font-size:clamp(20px,2.4vw,28px); font-weight:800; color:var(--blue-deep); }
.tf-hero-stat .lbl{ margin-top:4px; font-size:12px; color:var(--ink-soft); font-weight:600; }

/* ================= ALUR KERJA ================= */
.tf-alur-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.tf-alur-card{
  background:var(--white); border-radius:var(--radius-md); padding:28px 24px; box-shadow:var(--shadow-sm);
  position:relative; overflow:hidden;
}
.tf-alur-card .n{
  display:block; font-family:'Plus Jakarta Sans',sans-serif; font-size:26px; font-weight:800;
  color:var(--blue-light); -webkit-text-stroke:1.4px var(--blue); margin-bottom:14px;
}
.tf-alur-card h4{ font-size:15.5px; font-weight:800; color:var(--blue-deep); margin-bottom:8px; }
.tf-alur-card p{ font-size:13px; color:var(--ink-soft); line-height:1.6; }
.tf-alur-card::after{
  content:''; position:absolute; width:70px; height:70px; background:var(--yellow); opacity:.14;
  border-radius:60% 40% 55% 45%/48% 42% 58% 52%; bottom:-22px; right:-18px; z-index:0;
}

/* ================= UNIT PRODUKSI ================= */
.tf-unit-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:20px; }
.tf-unit-card{
  display:flex; flex-direction:column; background:var(--white); border-radius:var(--radius-md);
  padding:26px 22px; box-shadow:var(--shadow-sm); border:1px solid var(--blue-light); color:inherit;
  transition:transform .2s ease, box-shadow .2s ease;
}
.tf-unit-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.tf-unit-icon{
  width:48px; height:48px; border-radius:14px; background:var(--blue-light); color:var(--blue-deep);
  display:flex; align-items:center; justify-content:center; margin-bottom:14px;
}
.tf-unit-kode{
  display:inline-block; align-self:flex-start; font-size:11px; font-weight:800; letter-spacing:.03em;
  background:var(--yellow); color:var(--blue-deep); padding:3px 10px; border-radius:100px; margin-bottom:10px;
}
.tf-unit-card h4{ font-size:14.5px; font-weight:800; color:var(--blue-deep); margin-bottom:8px; line-height:1.35; }
.tf-unit-card p{ font-size:12.5px; color:var(--ink-soft); line-height:1.55; margin-bottom:14px; }
.tf-unit-card .partner-tag{ margin-bottom:14px; align-self:flex-start; }
.tf-unit-more{ margin-top:auto; font-size:12.5px; font-weight:700; color:var(--blue); }

/* ================= MANFAAT (reuses .value-card) ================= */
.tf-manfaat-grid{ grid-template-columns:repeat(4,1fr); }

/* ================= GALERI ================= */
.tf-galeri-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.tf-galeri-item{ aspect-ratio:4/3; border-radius:var(--radius-md); box-shadow:var(--shadow-sm); }
.tf-galeri-item svg{ width:30%; height:30%; opacity:.5; }

/* ================= RESPONSIVE ================= */
@media(max-width:980px){
  .tf-alur-grid{ grid-template-columns:repeat(2,1fr); }
  .tf-manfaat-grid{ grid-template-columns:repeat(2,1fr); }
  .tf-hero-stats{ grid-template-columns:repeat(3,1fr); }
  /* Unit Produksi: jadi kartu geser horizontal (kontennya paling berat —
     ikon, kode, judul, paragraf, tag mitra, link — jadi paling gampang
     lonjong memanjang ke bawah kalau dipaksa grid sempit). */
  .tf-unit-grid{
    display:flex; grid-template-columns:none; overflow-x:auto; gap:16px;
    padding-bottom:10px; margin:0 -32px; padding-left:32px; padding-right:32px;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  }
  .tf-unit-grid::-webkit-scrollbar{ height:5px; }
  .tf-unit-grid::-webkit-scrollbar-thumb{ background:rgba(0,0,61,.15); border-radius:10px; }
  .tf-unit-card{ flex:0 0 68%; scroll-snap-align:start; }
}
@media(max-width:640px){
  .tf-hero{ padding-bottom:40px; }
  .tf-hero-stats{ transform:translateY(24px); }
  .tf-alur-grid{ grid-template-columns:1fr; }
  .tf-unit-grid{ margin:0 -20px; padding-left:20px; padding-right:20px; }
  .tf-unit-card{ flex-basis:80%; }
  .tf-manfaat-grid{ grid-template-columns:repeat(2,1fr); gap:14px; }
  .tf-galeri-grid{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:420px){
  .tf-unit-card{ flex-basis:86%; }
}