/* =========================================================
   CSS KHUSUS HALAMAN "PORTAL KESISWAAN"
   Sama seperti page-prestasi.css: layout & komponen khusus halaman ini,
   warna tetap ambil dari variabel :root di assets/css/muspla-design.css.
   Prefix class "ks-" dipakai supaya tidak bentrok dengan class halaman lain.
   ========================================================= */

/* ================= HERO ================= */
.ks-hero{
  position:relative; overflow:hidden; background:var(--blue-deep); color:#fff;
  padding:64px 0 56px;
}
.ks-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%);
}
.ks-hero-blob-2{
  bottom:-170px; left:-120px; width:380px; height:380px; border-radius:50%;
  background:radial-gradient(circle, rgba(227,227,245,.14) 0%, transparent 70%);
}
.ks-hero-wrap{ position:relative; z-index:1; }
.ks-hero-text{ max-width:680px; }
.ks-hero h1{ font-size:clamp(30px,4vw,46px); font-weight:800; line-height:1.15; }
.ks-hero-lede{ margin-top:16px; font-size:16px; color:rgba(255,255,255,.78); max-width:580px; }

/* Chip kecil "N layanan digital" — hiasan ringan, bukan statistik berat
   seperti pr-stat-grid, cukup satu baris supaya hero tidak terlalu penuh. */
.ks-hero-chip{
  display:inline-flex; align-items:center; gap:10px; margin-top:26px; background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18); border-radius:100px; padding:9px 18px 9px 10px;
}
.ks-hero-chip .num{
  width:30px; height:30px; border-radius:50%; background:var(--yellow); color:var(--blue-deep);
  font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.ks-hero-chip .lbl{ font-size:13px; font-weight:600; color:rgba(255,255,255,.9); }

/* ================= SEARCH / INTRO BAR (opsional, di atas grid) ================= */
.ks-intro-row{
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap;
  margin-bottom:40px;
}
.ks-intro-row .eyebrow{ margin-bottom:12px; }
.ks-intro-row h2{ font-size:clamp(24px,2.8vw,32px); font-weight:800; color:var(--blue-deep); }
.ks-intro-row p{ color:var(--ink-soft); font-size:14.5px; max-width:480px; margin-top:8px; }

/* ================= GRID LAYANAN ================= */
.ks-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:22px;
}
.ks-card{
  position:relative; overflow:hidden; background:var(--white); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); padding:26px 24px; display:flex; flex-direction:column; gap:14px;
  transition:transform .2s ease, box-shadow .2s ease; border:1px solid rgba(0,0,61,.06);
}
.ks-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.ks-card:hover .ks-go{ color:var(--blue-deep); gap:10px; }

/* hiasan blob lembut di pojok, konsisten dengan .value-card::after di file utama —
   supaya tidak ada lagi garis/border kuning lurus di kartu ini */
.ks-card::after{
  content:''; position:absolute; width:64px; height:64px; opacity:.14;
  border-radius:60% 40% 55% 45%/50% 45% 55% 50%; bottom:-20px; right:-16px; z-index:0;
}
.ks-card:nth-child(odd)::after{ background:var(--yellow); }
.ks-card:nth-child(even)::after{ background:var(--blue); }

.ks-card .ic{
  position:relative; z-index:1; width:52px; height:52px; border-radius:15px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.ks-card:nth-child(odd) .ic{ background:var(--blue-light); }
.ks-card:nth-child(even) .ic{ background:var(--yellow-light); }

.ks-card h3{ position:relative; z-index:1; font-size:15.5px; font-weight:700; color:var(--blue-deep); }
.ks-card p{ position:relative; z-index:1; font-size:13px; color:var(--ink-soft); line-height:1.55; flex-grow:1; }
.ks-go{
  position:relative; z-index:1; display:inline-flex; align-items:center; gap:6px; font-size:13px;
  font-weight:700; color:var(--blue); transition:gap .15s ease, color .15s ease;
}
.ks-go svg{ width:14px; height:14px; transition:transform .2s ease; }
.ks-card:hover .ks-go svg{ transform:translateX(3px); }

/* ================= CTA BANTUAN ================= */
.ks-help{
  margin-top:56px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  background:var(--blue-light); border-radius:var(--radius-lg); padding:28px 32px;
}
.ks-help h4{ font-size:16.5px; font-weight:800; color:var(--blue-deep); margin-bottom:4px; }
.ks-help p{ font-size:13.5px; color:var(--ink-soft); }

@media(max-width:1100px){
  .ks-grid{ grid-template-columns:repeat(3,1fr); }
}
@media(max-width:900px){
  .ks-intro-row{ flex-direction:column; align-items:flex-start; }
  /* Di HP/tablet: BUKAN geser horizontal lagi. Kartu diperkecil jadi kotak
     ikon + nama saja (deskripsi & "Buka Layanan" disembunyikan) supaya muat
     beberapa kolom sekaligus dan halaman tetap discroll vertikal seperti biasa. */
  .ks-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
  }
  .ks-card{
    padding:16px 10px; gap:8px; align-items:center; text-align:center; border-radius:var(--radius-md);
  }
  .ks-card .ic{ width:44px; height:44px; border-radius:12px; }
  .ks-card .ic svg{ width:20px; height:20px; }
  .ks-card h3{ font-size:12px; line-height:1.3; }
  .ks-card-desc,
  .ks-go{ display:none; }
}
@media(max-width:560px){
  .ks-hero{ padding-bottom:40px; }
  .ks-grid{ grid-template-columns:repeat(3,1fr); gap:10px; }
  .ks-card{ padding:14px 8px; }
  .ks-help{ flex-direction:column; align-items:flex-start; text-align:left; }
}
@media(max-width:380px){
  .ks-grid{ grid-template-columns:repeat(2,1fr); }
}