@font-face {
            font-family: 'Plus Jakarta Sans';
            src: url('/assets/fonts/inter-latin-400.woff2') format('woff2');
            font-weight: 400;
            font-style: normal;
            font-display: swap;
        }
        @font-face {
            font-family: 'Plus Jakarta Sans';
            src: url('/assets/fonts/inter-latin-600.woff2') format('woff2');
            font-weight: 600;
            font-style: normal;
            font-display: swap;
        }
        @font-face {
            font-family: 'Plus Jakarta Sans';
            src: url('/assets/fonts/inter-latin-700.woff2') format('woff2');
            font-weight: 700;
            font-style: normal;
            font-display: swap;
        }
        @font-face {
            font-family: 'Plus Jakarta Sans';
            src: url('/assets/fonts/inter-latin-800.woff2') format('woff2');
            font-weight: 800;
            font-style: normal;
            font-display: swap;
        }
        /* Custom Scrollbar untuk tampilan yang lebih rapi */
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        ::-webkit-scrollbar-track {
            background: #0B1120;
        }
        ::-webkit-scrollbar-thumb {
            background: #1E293B;
            border-radius: 10px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #334155;
        }

        .skeleton-shimmer {
            position: relative;
            overflow: hidden;
        }
        .skeleton-shimmer::after {
            content: "";
            position: absolute;
            inset: 0;
            transform: translateX(-100%);
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
            animation: shimmer 1.35s infinite;
        }
        @keyframes shimmer {
            100% { transform: translateX(100%); }
        }
        .skeleton-pulse {
            background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
            background-size: 200% 100%;
            animation: shimmer 1.4s infinite;
            border-radius: 4px;
        }
        .soft-glow {
            box-shadow: 0 18px 60px rgba(0,0,0,0.28), 0 0 28px rgba(251,191,36,0.05);
        }
        .toast-enter {
            animation: toastIn .22s ease-out;
        }
        @keyframes toastIn {
            from { opacity: 0; transform: translateY(10px) scale(.98); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }
        .typing-dot {
            width: 6px;
            height: 6px;
            border-radius: 999px;
            background: #FBBF24;
            animation: typingPulse 1s infinite ease-in-out;
        }
        .typing-dot:nth-child(2) { animation-delay: .12s; }
        .typing-dot:nth-child(3) { animation-delay: .24s; }
        @keyframes typingPulse {
            0%, 80%, 100% { opacity: .35; transform: translateY(0); }
            40% { opacity: 1; transform: translateY(-3px); }
        }
        .premium-lock {
            position: relative;
        }
        .premium-lock::after {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            background: linear-gradient(180deg, rgba(11,17,32,.1), rgba(11,17,32,.64));
            pointer-events: none;
        }
        .demo-preview-float {
            animation: demoFloat 3.6s ease-in-out infinite;
        }
        .demo-preview-float:nth-child(2) { animation-delay: .2s; }
        .demo-preview-float:nth-child(3) { animation-delay: .4s; }
        @keyframes demoFloat {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-4px); }
        }
        .premium-card {
            position: relative;
            overflow: hidden;
            transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
        }
        .premium-card::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(251,191,36,0.10), transparent 35%, rgba(59,130,246,0.08));
            opacity: 0;
            transition: opacity .18s ease;
            pointer-events: none;
        }
        .premium-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 20px 60px rgba(0,0,0,0.36), 0 0 28px rgba(251,191,36,0.08);
        }
        .premium-card:hover::before {
            opacity: 1;
        }

/* Utilitas tambahan untuk halaman baru (tidak ada di kepsekai.css hasil build lama). */
.mt-6 { margin-top: 1.5rem; }
.pb-16 { padding-bottom: 4rem; }

/* ── Aplikasi sekolah (/app) ─────────────────────────────────────────── */
.ks-doc { white-space: pre-wrap; overflow-wrap: anywhere; }
.ks-textarea { min-height: 22rem; resize: vertical; font-family: inherit; }
@media print {
  body { background: #fff !important; color: #000 !important; }
  .no-print, nav, header, button, a[href] { display: none !important; }
  main, section, article { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; max-width: none !important; }
  section > h1 { display: none !important; }
  .print-title { display: block !important; color: #000 !important; font-size: 18pt; font-weight: 700; margin: 0 0 12pt; }
  .ks-doc { color: #000 !important; font-size: 11pt; line-height: 1.5; }
}