/* ===== Banner halaman (hero) ===== */
.hero-halaman { display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap; color:#fff; border-radius:0 0 18px 18px; margin:-22px -24px 20px; padding:26px 28px; position:relative; overflow:hidden;
	background:repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 22px, rgba(255,255,255,0) 22px 44px), linear-gradient(110deg, #17287e 0%, #2447b8 55%, #1696b0 100%); box-shadow:0 10px 26px rgba(28,44,122,.22); }
.hero-halaman::after { content:''; position:absolute; right:-60px; top:-90px; width:300px; height:300px; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.14), rgba(255,255,255,0) 70%); pointer-events:none; }
.hh-kiri { display:flex; align-items:center; gap:16px; position:relative; z-index:1; min-width:0; }
.hh-avatar { width:54px; height:54px; border-radius:50%; border:2px solid rgba(255,255,255,.7); background:rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:18px; flex:none; }
.hh-label { font-size:11.5px; font-weight:700; opacity:.9; letter-spacing:.3px; display:flex; align-items:center; gap:6px; }
.hh-judul { font-size:22px; font-weight:800; line-height:1.2; margin:2px 0; }
.hh-sub { font-size:12.5px; opacity:.92; }
.hh-kanan { text-align:right; position:relative; z-index:1; }
.hh-jam { font-size:26px; font-weight:800; letter-spacing:1px; line-height:1.1; font-variant-numeric:tabular-nums; }
.hh-tgl { font-size:12px; opacity:.9; margin-bottom:6px; }
.hh-crumb { font-size:12.5px; opacity:.95; } .hh-crumb span { opacity:.6; margin:0 3px; } .hh-crumb b { font-weight:800; }
.hh-btn { display:inline-block; margin-top:8px; border:1px solid rgba(255,255,255,.55); background:rgba(255,255,255,.12); color:#fff; border-radius:20px; padding:5px 14px; font-size:12px; font-weight:700; text-decoration:none; }
@media (max-width:860px) { .hero-halaman { margin:-14px -12px 16px; padding:20px 16px; border-radius:0 0 16px 16px; } .hh-kanan { text-align:left; } .hh-judul { font-size:18px; } .hh-jam { font-size:20px; } }

/* ===== Dasbor ===== */
.ds-strip { display:flex; flex-wrap:wrap; gap:8px 22px; align-items:center; background:#fff; border:1px solid #e6eaf3; border-radius:14px; padding:11px 18px; margin-bottom:16px; font-size:12.5px; color:#566; }
.ds-strip b { color:#1f2d3d; } .ds-strip .ds-sisi { margin-left:auto; color:#6b7785; }
.ds-strip .tt { display:inline-block; width:9px; height:9px; border-radius:50%; background:#22c55e; margin-right:6px; box-shadow:0 0 0 3px rgba(34,197,94,.2); }
.ds-atas { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:16px; margin-bottom:16px; align-items:start; }
.ds-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:14px; }
.ds-kartu { background:#fff; border:1px solid #e6eaf3; border-radius:14px; padding:14px 16px; box-shadow:0 1px 6px rgba(28,44,122,.05); transition:transform .15s, box-shadow .15s; text-decoration:none; color:inherit; display:block; }
.ds-kartu:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(28,44,122,.12); }
.ds-kartu .bar { display:flex; align-items:center; gap:10px; font-size:11.5px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:#4a5568; }
.ds-kartu .ik { width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:14px; flex:none; }
.ds-kartu .nilai { font-size:26px; font-weight:800; color:#14213d; margin:8px 0 2px; line-height:1.1; }
.ds-kartu .sub { font-size:11.5px; color:#8a949e; }
.ds-kartu .sub .pil { background:#dcfce7; color:#15803d; border-radius:20px; padding:1px 8px; font-weight:700; }
.ds-kartu .sub .pil.m { background:#fee2e2; color:#b91c1c; }
.ds-kal { background:#fff; border:1px solid #e6eaf3; border-radius:14px; overflow:hidden; box-shadow:0 1px 6px rgba(28,44,122,.05); }
.ds-kal .kh { background:linear-gradient(120deg,#1696b0,#2447b8); color:#fff; padding:14px 16px; display:flex; align-items:center; gap:12px; }
.ds-kal .kh .ik { width:36px; height:36px; border-radius:10px; background:rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; }
.ds-kal .kh small { font-size:10.5px; opacity:.9; display:block; } .ds-kal .kh b { font-size:15px; }
.ds-kal table { width:100%; border-collapse:collapse; margin:8px 0 6px; } .ds-kal th { font-size:10.5px; color:#c0392b; padding:6px 0; text-align:center; } .ds-kal th:not(.mg) { color:#6b7785; }
.ds-kal td { text-align:center; padding:3px 0; font-size:12px; font-weight:600; color:#1f2d3d; } .ds-kal td span { display:inline-flex; width:28px; height:28px; align-items:center; justify-content:center; border-radius:50%; }
.ds-kal td.mg span { color:#c0392b; } .ds-kal td.kini span { background:#2447b8; color:#fff; box-shadow:0 0 0 3px rgba(36,71,184,.2); } .ds-kal td.lain { opacity:.3; }
.ds-grafik { display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:16px; }
.ds-grafik .card h6 { display:flex; align-items:center; gap:8px; margin-bottom:2px; } .ds-grafik .card p.ket { font-size:12px; color:#6b7785; margin-bottom:10px; }
.ds-chart-wrap { position:relative; height:240px; }
@media (max-width:1100px) { .ds-atas { grid-template-columns:1fr; } }

/* ===== Kalender mini (dasbor) ===== */
.kal-mini { background:#fff; border:1px solid #e6eaf3; border-radius:14px; overflow:hidden; box-shadow:0 1px 8px rgba(28,44,122,.07); }
.kal-kepala { display:flex; align-items:center; gap:12px; padding:13px 16px; color:#fff; background:linear-gradient(115deg,#0f8f9e 0%,#14b8a6 100%); }
.kal-ik { width:34px; height:34px; border-radius:10px; background:rgba(255,255,255,.22); display:flex; align-items:center; justify-content:center; font-size:16px; flex:none; }
.kal-judul { flex:1; line-height:1.2; } .kal-judul small { display:block; font-size:10.5px; opacity:.92; letter-spacing:.2px; } .kal-judul b { font-size:16px; font-weight:800; }
.kal-he { background:rgba(255,255,255,.25); border-radius:20px; padding:4px 11px; font-size:11.5px; font-weight:800; }
.kal-badan { padding:6px 12px 12px; }
.kal-badan table { width:100%; border-collapse:collapse; }
.kal-badan th { font-size:11px; font-weight:800; color:#1f2d3d; padding:9px 0 7px; text-align:center; } .kal-badan th.mg { color:#e11d48; }
.kal-badan td { text-align:center; padding:2px 0; }
.kal-badan td span { display:inline-flex; width:30px; height:30px; align-items:center; justify-content:center; border-radius:50%; font-size:12px; font-weight:700; color:#273449; }
.kal-badan td span.libur { background:#e11d48; color:#fff; } .kal-badan td span.acara { background:#16a34a; color:#fff; }
.kal-badan td span.kini { box-shadow:0 0 0 2px #fff, 0 0 0 4px #1d4ed8; }
.kal-daftar { margin-top:8px; border-top:1px solid #eef1f6; padding-top:8px; }
.kal-daftar div { display:flex; align-items:center; gap:10px; font-size:12px; padding:3px 2px; } .kal-daftar b { min-width:44px; font-weight:800; color:#1f2d3d; } .kal-daftar span { flex:1; color:#4a5568; }
.kal-daftar em { font-style:normal; font-size:10px; font-weight:800; color:#fff; border-radius:20px; padding:2px 8px; background:#16a34a; } .kal-daftar em.libur { background:#e11d48; }
.kal-kelola { display:block; text-align:center; margin-top:8px; font-size:12.5px; font-weight:800; color:#1d4ed8; text-decoration:none; }
.ds-atas { grid-template-columns:minmax(0,1fr) 296px; }

/* ===== Banner halaman: kecil, seragam, corak zigzag + kilau (semua halaman, termasuk Penilaian & Rapor) ===== */
.hero-halaman, .rp-hero, .pn-hero, .dash-hero {
	--corak: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='32' viewBox='0 0 64 32'><path d='M0 24 L16 8 L32 24 L48 8 L64 24' fill='none' stroke='white' stroke-opacity='.13' stroke-width='5' stroke-linejoin='round'/><path d='M0 32 L16 16 L32 32 L48 16 L64 32' fill='none' stroke='white' stroke-opacity='.07' stroke-width='5' stroke-linejoin='round'/></svg>");
	background-image:
		radial-gradient(240px 140px at 92% 10%, rgba(94,234,212,.38), rgba(94,234,212,0) 70%),
		radial-gradient(260px 160px at 6% 120%, rgba(167,139,250,.35), rgba(167,139,250,0) 70%),
		var(--corak),
		linear-gradient(110deg, #14226e 0%, #1f46b4 52%, #0f9fb2 100%) !important;
	background-size:auto, auto, 64px 32px, auto !important; background-repeat:no-repeat, no-repeat, repeat, no-repeat !important;
	color:#fff; border-radius:16px !important; margin:0 0 14px !important; padding:11px 20px !important; position:relative; overflow:hidden; box-shadow:0 6px 18px rgba(28,44,122,.2) !important;
}
.hero-halaman::after, .rp-hero:before, .rp-hero:after, .pn-hero:after, .dash-hero::before { display:none !important; }
.hero-halaman { gap:10px 18px; }
.hh-avatar { width:38px; height:38px; font-size:14px; border-width:2px; }
.hh-label { font-size:10.5px; } .hh-judul { font-size:17px; margin:1px 0; } .hh-sub { font-size:11.5px; }
.hh-kanan { display:flex; flex-direction:column; align-items:flex-end; gap:0; }
.hh-jam { font-size:17px; letter-spacing:.8px; } .hh-tgl { font-size:11px; margin-bottom:2px; } .hh-crumb { font-size:11px; }
.rp-hero h1, .pn-hero h1 { font-size:17px !important; margin:0 0 2px !important; }
.rp-hero p, .pn-hero p { font-size:12px !important; line-height:1.4 !important; max-width:none !important; }
.rp-hero .rp-jam b { font-size:15px !important; }
.rp-hero .pn-chips, .pn-hero .pn-chips, .rp-hero .rp-chips { margin-top:6px !important; }
.rp-hero .pn-chips *, .pn-hero .pn-chips *, .rp-hero .rp-chips * { font-size:11px !important; padding-top:2px !important; padding-bottom:2px !important; }
.dash-hero { padding:12px 20px !important; } .dash-hero-nama { font-size:17px !important; }
@media (max-width:860px) { .hero-halaman { margin:0 0 12px !important; padding:10px 14px !important; } .hh-kanan { align-items:flex-start; } }

/* ===== Hapus judul ganda: banner global sudah memuat judul halaman ===== */
.content > h1 { display:none; }
/* kartu info yang dulu berupa banner hijau besar: jadi kartu putih ringkas (info tetap ada) */
.ls-hero, .sk-hero, .ra-hero { background:#fff !important; color:#1f2d3d !important; border:1px solid #e6eaf3; box-shadow:0 1px 8px rgba(28,44,122,.06) !important; padding:12px 18px !important; border-radius:14px !important; }
.ls-hero h1, .sk-hero h1, .ls-hero .ic, .sk-hero > div:first-child:not(.no) .fa-arrows-rotate { display:none !important; }
.ls-hero p, .sk-hero p { color:#556 !important; opacity:1 !important; }
.sk-hero > div:first-child { display:none; }
.ls-hero .ls-badge, .sk-hero .no { background:#f3f6fd !important; }
.ra-hero .ra-nama { color:#14213d !important; } .ra-hero .ra-meta { color:#6b7785 !important; opacity:1 !important; }
