/* ==========================================================================
   SekolahTwinSoft - Design System (Futuristic Academic)
   Warna diatur terpusat melalui CSS variables (diisi dari Pengaturan > Tampilan).
   ========================================================================== */
@font-face{font-family:"Poppins";font-style:normal;font-weight:300;font-display:swap;src:url("../vendor/poppins/poppins-latin-300-normal.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url("../vendor/poppins/poppins-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url("../vendor/poppins/poppins-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url("../vendor/poppins/poppins-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url("../vendor/poppins/poppins-latin-700-normal.woff2") format("woff2")}

:root{
  /* nilai awal; ditimpa oleh <style id="theme-vars"> dari pengaturan */
  --c-primary:#123B6D;--c-primary-dark:#0b2646;--c-primary-soft:#e7edf5;--c-primary-rgb:18,59,109;
  --c-secondary:#12B8A6;--c-secondary-dark:#0e9484;--c-secondary-soft:#e7f8f6;--c-secondary-rgb:18,184,166;
  --c-accent:#FFB547;--c-accent-dark:#cc9139;--c-accent-soft:#fff4e3;--c-accent-rgb:255,181,71;

  --c-bg:#f3f6fb;--c-surface:#ffffff;--c-surface-2:#f8fafd;--c-border:#e2e9f2;--c-border-strong:#cfd9e6;
  --c-text:#1b2a3f;--c-muted:#667790;--c-heading:#0f2540;
  --c-success:#16a34a;--c-danger:#dc2626;--c-warning:#d97706;--c-info:#0284c7;

  --radius:16px;--radius-sm:10px;--radius-lg:24px;
  --shadow-sm:0 1px 2px rgba(15,37,64,.05),0 1px 3px rgba(15,37,64,.04);
  --shadow:0 4px 18px rgba(15,37,64,.07),0 1px 3px rgba(15,37,64,.05);
  --shadow-lg:0 18px 48px rgba(15,37,64,.14);
  --font:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.22,.8,.3,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--c-text);background:var(--c-bg);font-size:.925rem;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,h5,h6{font-family:var(--font);color:var(--c-heading);font-weight:600;line-height:1.3}
a{color:var(--c-secondary-dark);text-decoration:none;transition:color .2s}
a:hover{color:var(--c-primary)}
img{max-width:100%}
::selection{background:rgba(var(--c-secondary-rgb),.25)}
:focus-visible{outline:3px solid rgba(var(--c-secondary-rgb),.45);outline-offset:2px;border-radius:6px}
.mdi{line-height:1;vertical-align:-.12em}
.text-muted{color:var(--c-muted)!important}
.text-brand{color:var(--c-primary)!important}
.text-teal{color:var(--c-secondary-dark)!important}
.fw-600{font-weight:600}
.skip-link{position:absolute;left:-999px;top:8px;z-index:3000;background:var(--c-primary);color:#fff;padding:.5rem 1rem;border-radius:8px}
.skip-link:focus{left:8px;color:#fff}

/* ---- Tombol ---------------------------------------------------------- */
.btn{font-weight:500;border-radius:12px;padding:.55rem 1.1rem;transition:transform .15s var(--ease),box-shadow .2s,background .2s,border-color .2s;letter-spacing:.005em}
.btn:active{transform:translateY(1px)}
.btn-sm{padding:.35rem .75rem;border-radius:10px;font-size:.82rem}
.btn-lg{padding:.8rem 1.6rem;border-radius:14px}
.btn-primary{--bs-btn-bg:var(--c-secondary);--bs-btn-border-color:var(--c-secondary);--bs-btn-hover-bg:var(--c-secondary-dark);--bs-btn-hover-border-color:var(--c-secondary-dark);--bs-btn-active-bg:var(--c-secondary-dark);--bs-btn-active-border-color:var(--c-secondary-dark);--bs-btn-color:#fff;--bs-btn-hover-color:#fff;--bs-btn-active-color:#fff;--bs-btn-disabled-bg:var(--c-secondary);--bs-btn-disabled-border-color:var(--c-secondary);box-shadow:0 6px 16px rgba(var(--c-secondary-rgb),.28)}
.btn-primary:hover{box-shadow:0 8px 22px rgba(var(--c-secondary-rgb),.36);transform:translateY(-1px)}
.btn-brand{--bs-btn-bg:var(--c-primary);--bs-btn-border-color:var(--c-primary);--bs-btn-hover-bg:var(--c-primary-dark);--bs-btn-hover-border-color:var(--c-primary-dark);--bs-btn-active-bg:var(--c-primary-dark);--bs-btn-color:#fff;--bs-btn-hover-color:#fff;--bs-btn-active-color:#fff}
.btn-accent{--bs-btn-bg:var(--c-accent);--bs-btn-border-color:var(--c-accent);--bs-btn-hover-bg:var(--c-accent-dark);--bs-btn-hover-border-color:var(--c-accent-dark);--bs-btn-color:#2b1d02;--bs-btn-hover-color:#2b1d02;--bs-btn-active-color:#2b1d02;font-weight:600}
.btn-outline-primary{--bs-btn-color:var(--c-secondary-dark);--bs-btn-border-color:var(--c-secondary);--bs-btn-hover-bg:var(--c-secondary);--bs-btn-hover-border-color:var(--c-secondary);--bs-btn-hover-color:#fff;--bs-btn-active-bg:var(--c-secondary);--bs-btn-active-border-color:var(--c-secondary);--bs-btn-active-color:#fff}
.btn-outline-brand{--bs-btn-color:var(--c-primary);--bs-btn-border-color:var(--c-primary);--bs-btn-hover-bg:var(--c-primary);--bs-btn-hover-border-color:var(--c-primary);--bs-btn-hover-color:#fff}
.btn-soft{background:var(--c-primary-soft);color:var(--c-primary);border:0}
.btn-soft:hover{background:var(--c-primary);color:#fff}
.btn-icon{width:34px;height:34px;padding:0;display:inline-grid;place-items:center;border-radius:10px}
.btn-loading{pointer-events:none;opacity:.8}
.btn-loading::after{content:"";width:1em;height:1em;margin-left:.5rem;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;display:inline-block;animation:spin .7s linear infinite;vertical-align:-.15em}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- Form ------------------------------------------------------------ */
.form-label{font-weight:500;font-size:.85rem;color:var(--c-heading);margin-bottom:.35rem}
.form-label .req{color:var(--c-danger);margin-left:2px}
.form-control,.form-select{border-radius:12px;border:1px solid var(--c-border-strong);padding:.6rem .9rem;background-color:#fff;font-size:.9rem;color:var(--c-text)}
.form-control:focus,.form-select:focus{border-color:var(--c-secondary);box-shadow:0 0 0 .22rem rgba(var(--c-secondary-rgb),.18)}
.form-control.is-invalid,.form-select.is-invalid{border-color:var(--c-danger)}
.form-text{font-size:.78rem;color:var(--c-muted)}
.form-check-input:checked{background-color:var(--c-secondary);border-color:var(--c-secondary)}
.form-switch .form-check-input{width:2.5em;height:1.3em}
.invalid-msg{color:var(--c-danger);font-size:.8rem;margin-top:.3rem;display:block}
.input-icon{position:relative}
.input-icon>.mdi{position:absolute;left:.9rem;top:50%;transform:translateY(-50%);color:var(--c-muted);font-size:1.1rem}
.input-icon>.form-control{padding-left:2.5rem}

/* ---- Card ------------------------------------------------------------ */
.card{border:1px solid var(--c-border);border-radius:var(--radius);box-shadow:var(--shadow-sm);background:var(--c-surface)}
.card-header{background:transparent;border-bottom:1px solid var(--c-border);padding:1rem 1.25rem;font-weight:600;color:var(--c-heading)}
.card-body{padding:1.25rem}
.card-hover{transition:transform .25s var(--ease),box-shadow .25s,border-color .25s}
.card-hover:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:rgba(var(--c-secondary-rgb),.45)}
.glass{background:rgba(255,255,255,.72);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);border:1px solid rgba(255,255,255,.55)}

/* ---- Badge ----------------------------------------------------------- */
.badge{font-weight:500;border-radius:999px;padding:.38em .75em;font-size:.72rem}
.badge-soft{border:1px solid transparent}
.badge-soft.badge-success{background:#e3f6ea;color:#12713a}
.badge-soft.badge-secondary{background:#eceff4;color:#516079}
.badge-soft.badge-warning{background:#fff3dc;color:#9a5b00}
.badge-soft.badge-danger{background:#fde8e8;color:#b42318}
.badge-soft.badge-info{background:#e0f2fe;color:#075985}
.badge-soft.badge-primary{background:var(--c-primary-soft);color:var(--c-primary)}

/* ---- Tabel ----------------------------------------------------------- */
.table-modern{margin:0;--bs-table-bg:transparent}
.table-modern thead th{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--c-muted);font-weight:600;background:var(--c-surface-2);border-bottom:1px solid var(--c-border);padding:.8rem 1rem;white-space:nowrap}
.table-modern tbody td{padding:.8rem 1rem;vertical-align:middle;border-color:var(--c-border)}
.table-modern tbody tr{transition:background .15s}
.table-modern tbody tr:hover{background:rgba(var(--c-secondary-rgb),.045)}
.table-modern th a{color:inherit}

/* ---- Pagination ------------------------------------------------------ */
.page-link{border-radius:10px!important;margin:0 2px;color:var(--c-primary);border-color:var(--c-border)}
.page-item.active .page-link{background:var(--c-secondary);border-color:var(--c-secondary);color:#fff}
.page-link:hover{background:var(--c-secondary-soft);color:var(--c-primary)}

/* ---- Flash / alerts -------------------------------------------------- */
.alert{border:0;border-radius:14px;box-shadow:var(--shadow-sm)}
.alert-success{background:#e3f6ea;color:#11663a}.alert-danger{background:#fde8e8;color:#a1241a}
.alert-warning{background:#fff3dc;color:#8a5200}.alert-info{background:#e0f2fe;color:#075985}

/* ---- Empty / loading ------------------------------------------------- */
.empty-state{text-align:center;padding:3rem 1rem;color:var(--c-muted)}
.empty-state .mdi{font-size:3.2rem;color:var(--c-border-strong);display:block;margin-bottom:.5rem}
.empty-state h5{color:var(--c-heading);font-size:1rem}
.skeleton{position:relative;overflow:hidden;background:#e9eef5;border-radius:8px;min-height:1em}
.skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);animation:shimmer 1.4s infinite}
@keyframes shimmer{to{transform:translateX(100%)}}
.chip{display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .7rem;border-radius:999px;background:var(--c-primary-soft);color:var(--c-primary);font-size:.78rem;font-weight:500}
.avatar{width:38px;height:38px;border-radius:12px;object-fit:cover;background:var(--c-primary-soft);display:inline-grid;place-items:center;color:var(--c-primary);font-weight:600}
.avatar-lg{width:84px;height:84px;border-radius:24px}
.divider-dot::before{content:"•";margin:0 .5rem;color:var(--c-border-strong)}

/* ---- Konten artikel (hasil editor) ----------------------------------- */
.prose{font-size:1rem;line-height:1.85}
.prose img{max-width:100%;height:auto;border-radius:12px;margin:.75rem 0}
.prose h2,.prose h3{margin-top:1.8rem;margin-bottom:.8rem}
.prose blockquote{border-left:4px solid var(--c-secondary);background:var(--c-secondary-soft);padding:.8rem 1.1rem;border-radius:0 12px 12px 0;margin:1.2rem 0}
.prose table{width:100%;border-collapse:collapse;margin:1rem 0}
.prose table td,.prose table th{border:1px solid var(--c-border-strong);padding:.5rem .7rem}
.prose iframe{max-width:100%;border-radius:12px}
.prose .ql-align-center{text-align:center}.prose .ql-align-right{text-align:right}.prose .ql-align-justify{text-align:justify}
.prose .ql-indent-1{padding-left:3em}.prose .ql-indent-2{padding-left:6em}
.prose .ql-video{width:100%;aspect-ratio:16/9;height:auto}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
@media print{.no-print,.sidebar,.topbar,.site-header,.site-footer{display:none!important}body{background:#fff}.card{box-shadow:none;border-color:#ccc}}

/* konten dari editor WYSIWYG */
.prose img{max-width:100%;height:auto;border-radius:8px}
.prose figure.image{margin:1.2em auto;text-align:center}.prose figure.image img{display:block;margin:0 auto}
.prose figcaption{font-size:.85em;color:var(--c-muted,#667);margin-top:.35em}
.prose .ed-img-left{float:left;margin:.2em 1.2em .6em 0;max-width:50%}.prose .ed-img-right{float:right;margin:.2em 0 .6em 1.2em;max-width:50%}
.prose .ed-img-center{display:block;margin:1.2em auto}.prose .ed-img-full{width:100%;display:block}
.prose figure.ed-img-left,.prose figure.ed-img-right{max-width:50%}
.prose figure.ed-img-left img,.prose figure.ed-img-right img{max-width:100%}
.prose::after{content:"";display:table;clear:both}
.prose table{width:100%;border-collapse:collapse;margin:1em 0;display:block;overflow-x:auto}
.prose table.table-bordered td,.prose table.table-bordered th{border:1px solid var(--c-border,#dde)}
.prose td,.prose th{padding:.45rem .7rem}.prose th{background:var(--c-surface-2,#f4f6f8)}
.prose iframe{max-width:100%;aspect-ratio:16/9;height:auto;width:100%;border:0;border-radius:8px}
.prose blockquote{border-left:4px solid var(--c-primary,#12b8a6);padding:.2em 1em;margin:1em 0;color:var(--c-muted,#556)}
@media(max-width:575px){.prose .ed-img-left,.prose .ed-img-right,.prose figure.ed-img-left,.prose figure.ed-img-right{float:none;max-width:100%;margin:1em auto}}