:root{
  /* ============================================================
     DESIGN SYSTEM v4.3 — "Premium Editorial School"
     Palet baru: Navy + Royal Blue + Gold + Warm White, dipertahankan
     lewat CSS variable yang SAMA seperti sebelumnya (--ink, --paper,
     --blue, dst.) supaya SELURUH halaman & komponen yang sudah ada
     otomatis ikut ter-upgrade tanpa perlu mengubah HTML/JS/PHP sama
     sekali -- redesign murni lewat nilai token warna & tata letak.
     ============================================================ */
  --ink:#172033;          /* Text — dipakai juga sbg warna "gelap" institusional (footer, border tegas) */
  --ink-soft:#3d4759;      /* Muted-dark, untuk paragraf sekunder */
  --paper:#F8F7F3;         /* Warm White — latar utama situs */
  --paper-2:#EEF0EA;       /* Surface sekunder (hover, alt background) */
  --paper-3:#E3E6E2;       /* Surface tersier (placeholder foto, dsb) */
  --blue:#123B73;          /* Royal Blue — warna aksen utama (tombol, tautan) */
  --blue-dark:#0B1F3A;     /* Deep Navy — primary, dipakai untuk hover & elemen gelap kuat */
  --gold:#C9A227;          /* Elegant Gold — aksen premium, dipakai secukupnya */
  --gold-bright:#E0BA46;   /* Gold terang, untuk hover/highlight di atas latar gelap */
  --gray:#6B7280;          /* Muted */
  --line:#DADFE3;          /* Garis pembatas, lebih lembut & netral */
  --white:#FFFFFF;         /* Surface */
  /* Font & Tema Warna situs (fitur baru v3.8) — nilai bawaan di sini,
     ditimpa otomatis oleh assets/app.js (applyAppearance) sesuai pilihan
     Admin di Panel Admin > Tampilan & Teks. */
  --font-heading:'Fraunces', serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;
  /* Template & tata letak (fitur baru v4.1, dirapikan v4.3) — nilai
     bawaan sekarang punya sudut & bayangan premium yang halus (bukan
     lagi 0/none), ditimpa otomatis oleh assets/app.js (applyAppearance)
     sesuai Template pilihan Admin. */
  --radius:8px;
  --radius-lg:16px;
  --shadow:0 1px 2px rgba(11,31,58,.05), 0 6px 18px rgba(11,31,58,.06);
  --shadow-lg:0 8px 20px rgba(11,31,58,.08), 0 2px 6px rgba(11,31,58,.05);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; overflow-x:hidden; max-width:100%;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.55;
  overflow-x:hidden;
  max-width:100%;
  -webkit-text-size-adjust:100%;
}
a{color:inherit; text-decoration:none; transition:color .15s ease, background-color .15s ease, border-color .15s ease;}
img{display:block; width:100%; height:100%; object-fit:cover;}
button, input, select, textarea{font-family:inherit;}
button{cursor:pointer; transition:background-color .15s ease, color .15s ease, border-color .15s ease;}
.wrap{max-width:1240px; margin:0 auto; padding:0 20px;}
:focus-visible{outline:2.5px solid var(--blue); outline-offset:2px;}
.eyebrow{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--blue);
  font-weight:600;
}
h1,h2,h3,h4{font-family:var(--font-heading); font-weight:700; line-height:1.14; color:var(--ink);}

/* ===== Utility bar ===== */
.utility{background:var(--ink); color:var(--paper-2); font-family:var(--font-mono); font-size:11.5px;}
.utility .wrap{display:flex; justify-content:space-between; align-items:center; height:36px; gap:12px;}
.utility .links{display:flex; gap:18px; align-items:center;}
.utility .links a{opacity:.85; letter-spacing:.02em;}
.utility .links a:hover{opacity:1; color:var(--white);}
.utility .links a.highlight{color:var(--gold-bright); font-weight:600; opacity:1;}
.utility .site-label{font-weight:600; letter-spacing:.04em;}

/* ===== Masthead ===== */
.masthead{background:var(--paper); border-bottom:1px solid var(--line); box-shadow:0 1px 0 rgba(11,31,58,.03);}
.masthead .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 20px 16px; flex-wrap:wrap;}
.brand{display:flex; align-items:center; gap:18px; min-width:0;}
.brand .mark{width:152px; height:172px; flex-shrink:0;}
.brand .mark img{width:100%; height:100%; object-fit:contain;}
.brand h1{font-size:clamp(22px, 4vw, 32px); letter-spacing:-.01em; line-height:1.05;}
.brand .tag{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--gray); margin-top:4px;}
.stamp{text-align:right; font-family:var(--font-mono); font-size:11px; color:var(--gray); line-height:1.6; white-space:nowrap;}
.stamp .ed{color:var(--blue); font-weight:600;}

/* Pilihan Header/Kop Situs (fitur baru v4.2) */
.masthead.style-tengah .wrap{justify-content:center; text-align:center;}
.masthead.style-tengah .brand{flex-direction:column; text-align:center;}
.masthead.style-tengah .stamp{text-align:center; margin-top:8px;}
.masthead.style-minimalis .wrap{padding:12px 20px;}
.masthead.style-minimalis .brand .mark{width:96px; height:108px;}
.masthead.style-minimalis .brand h1{font-size:18px;}
.masthead.style-minimalis .brand .tag{display:none;}
.masthead.style-minimalis .stamp{display:none;}
.masthead.style-split .wrap{justify-content:space-between;}
.masthead.style-split .brand{order:1;}
.masthead.style-split .stamp{order:2;}
.masthead.has-banner{background-size:cover; background-position:center; background-repeat:no-repeat;}
.masthead.has-banner .wrap{padding:56px 20px;}
.masthead.has-banner .brand h1, .masthead.has-banner .brand .tag, .masthead.has-banner .stamp, .masthead.has-banner .stamp .ed{color:var(--white);}
.masthead.has-banner .brand .tag{color:rgba(255,255,255,.85);}

/* Warna Header custom (fitur v1.5) — dipilih Admin lewat color picker,
   berlaku bersamaan dengan Gaya Header manapun. Teks otomatis dibikin
   terang supaya tetap kontras di atas warna latar apa pun yang dipilih. */
.masthead.has-custom-color .brand h1, .masthead.has-custom-color .brand .tag, .masthead.has-custom-color .stamp, .masthead.has-custom-color .stamp .ed{color:var(--white);}
.masthead.has-custom-color .brand .tag{color:rgba(255,255,255,.85);}
.masthead.has-custom-color{border-bottom-color:rgba(255,255,255,.15);}

/* Link Penting (fitur baru v4.2) — kolom footer dinamis */
#importantLinksBox{display:flex; flex-direction:column; gap:2px;}
#importantLinksBox a{padding:2px 0;}

/* Polling (fitur baru v4.2) */
.poll-option-btn{
  display:block; width:100%; text-align:left; background:var(--paper); border:1px solid var(--line);
  padding:10px 12px; margin-bottom:8px; font-family:var(--font-body); font-size:13px; color:var(--ink);
  cursor:pointer; border-radius:var(--radius);
}
.poll-option-btn:hover{border-color:var(--blue); background:var(--white);}

/* ============================================================
   SKELETON LOADING (fitur baru v4.3.2)
   Dipakai lewat MS.renderSkeletonCards() di assets/app.js supaya
   halaman tidak terasa "berkedip" kosong saat menunggu data API.
   ============================================================ */
@keyframes skeleton-pulse{ 0%{opacity:1;} 50%{opacity:.5;} 100%{opacity:1;} }
.skeleton-card{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);}
.skeleton-thumb{aspect-ratio:4/3; background:var(--paper-3); animation:skeleton-pulse 1.4s ease-in-out infinite;}
.skeleton-lines{padding:12px 14px;}
.skeleton-line{height:11px; background:var(--paper-3); border-radius:4px; margin-bottom:8px; animation:skeleton-pulse 1.4s ease-in-out infinite;}
.skeleton-line.w-70{width:70%;}
.skeleton-line.w-40{width:40%;}

/* ============================================================
   DARK MODE (fitur baru v4.3.2)
   Diaktifkan lewat tombol 🌙 di bar utility (disuntik assets/app.js).
   Hanya mengganti variable warna netral (latar & teks) -- warna aksen
   (--blue/--gold dari Tema pilihan Admin) TIDAK disentuh, supaya tetap
   konsisten dengan Tema Warna yang sedang aktif.
   ============================================================ */
[data-theme="dark"]{
  --ink:#E9EDF4; --ink-soft:#B7C0CE; --paper:#0B1420; --paper-2:#111C2B;
  --paper-3:#1A2637; --white:#141F2E; --line:#28374C; --gray:#8B96A8;
}
[data-theme="dark"] .article-card .photo,
[data-theme="dark"] .hero-lead .photo,
[data-theme="dark"] .side-item .photo,
[data-theme="dark"] .cover-preview{background:var(--paper-3);}
[data-theme="dark"] .lightbox-stage,
[data-theme="dark"] .photo-modal-body img{background:#000;}
.theme-toggle-btn{background:none; border:none; color:inherit; cursor:pointer; font-size:13px; padding:0 4px; line-height:1;}

/* ===== Nav (desktop) ===== */
nav.primary{background:var(--white); border-bottom:2px solid var(--ink); position:sticky; top:0; z-index:60; box-shadow:0 1px 0 rgba(0,0,0,.02);}
nav.primary .wrap{display:flex; align-items:center; gap:2px; min-height:50px;}
.nav-links{display:flex; align-items:center; gap:2px; overflow-x:auto; scrollbar-width:none; flex:1;}
.nav-links::-webkit-scrollbar{display:none;}
nav.primary a{
  font-family:var(--font-mono); font-size:12px; font-weight:600; letter-spacing:.04em;
  padding:14px 14px; white-space:nowrap; text-transform:uppercase; border-bottom:3px solid transparent;
}
nav.primary a:hover{color:var(--blue); border-color:var(--blue);}
nav.primary a.active{color:var(--blue); border-color:var(--blue);}
nav.primary a.contrib{color:var(--white); background:var(--blue); margin-left:auto; border-radius:2px; flex-shrink:0;}
nav.primary a.contrib:hover{background:var(--blue-dark); border-color:transparent; color:var(--white);}
.nav-toggle{
  display:none; background:none; border:none; width:44px; height:44px; flex-shrink:0;
  align-items:center; justify-content:center; position:relative;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:''; position:absolute; width:22px; height:2px; background:var(--ink); transition:transform .2s ease, opacity .2s ease;
}
.nav-toggle span::before{transform:translateY(-7px);}
.nav-toggle span::after{transform:translateY(7px);}
.nav-toggle.open span{background:transparent;}
.nav-toggle.open span::before{transform:rotate(45deg);}
.nav-toggle.open span::after{transform:rotate(-45deg);}

/* ===== Breaking ticker ===== */
.ticker{background:var(--blue); color:var(--white); overflow:hidden; position:relative;}
.ticker .wrap{display:flex; align-items:center; height:38px; padding:0;}
.ticker .badge{
  background:var(--blue-dark); font-family:var(--font-mono); font-size:11px; font-weight:700;
  letter-spacing:.1em; padding:0 16px; height:100%; display:flex; align-items:center; flex-shrink:0; z-index:2;
}
.ticker .track-outer{overflow:hidden; flex:1; height:100%;}
.ticker .track{display:flex; gap:60px; align-items:center; height:100%; white-space:nowrap; animation:scroll 32s linear infinite; width:max-content;}
.ticker .track span{font-size:13px; font-weight:500;}
@keyframes scroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}
@media (prefers-reduced-motion: reduce){ .ticker .track{animation:none;} html{scroll-behavior:auto;} }

/* ===== Layout grid ===== */
main{padding:34px 0 0;}
.grid{display:grid; grid-template-columns:2fr 1fr; gap:36px;}
.divider{border:none; border-top:1px solid var(--line); margin:36px 0;}
.divider.thick{border-top:2px solid var(--ink); margin:40px 0 30px;}

/* ===== Hero ===== */
.hero{display:grid; grid-template-columns:1.5fr 1fr; gap:28px;}
.hero-lead .photo{aspect-ratio:16/10; background:var(--paper-3); margin-bottom:16px; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); position:relative;}
.hero-lead .photo img{transition:transform .4s ease;}
.hero-lead:hover .photo img{transform:scale(1.03);}
.hero-lead h2{font-size:clamp(24px, 3.2vw, 34px); margin-bottom:12px;}
.hero-lead p.excerpt{color:var(--ink-soft); font-size:16px; margin-bottom:10px;}
.meta{font-family:var(--font-mono); font-size:11px; color:var(--gray); display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.meta .dot{width:3px; height:3px; background:var(--gray); border-radius:50%; flex-shrink:0;}
.meta .by-contrib{color:var(--gold); font-weight:600;}

.hero-side{display:flex; flex-direction:column; gap:20px;}
.side-item{display:flex; gap:14px; padding-bottom:18px; border-bottom:1px solid var(--line);}
.side-item:last-child{border-bottom:none; padding-bottom:0;}
.side-item .photo{width:96px; height:72px; flex-shrink:0; background:var(--paper-3); border-radius:var(--radius); overflow:hidden;}
.side-item .photo img{transition:transform .3s ease;}
.side-item:hover .photo img{transform:scale(1.06);}
.side-item h4{font-size:15.5px; margin-bottom:6px;}

/* ===== Category section ===== */
.section-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:18px; padding-bottom:10px; border-bottom:2px solid var(--ink);}
.section-head h3{font-size:13px; font-family:var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink);}
.section-head a{font-size:11.5px; font-family:var(--font-mono); color:var(--blue); letter-spacing:.05em; white-space:nowrap;}
.cat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.article-card .photo{aspect-ratio:4/3; background:var(--paper-3); margin-bottom:12px; border-radius:var(--radius); overflow:hidden;}
.article-card .photo img{transition:transform .35s ease;}
.article-card:hover .photo img{transform:scale(1.05);}
.article-card h4{font-size:17px; margin-bottom:8px; transition:color .2s ease;}
.article-card p{color:var(--ink-soft); font-size:13.5px; margin-bottom:8px;}
.empty-note{font-size:13px; color:var(--gray); font-style:italic;}

/* ===== Sidebar ===== */
.box{background:var(--white); border:1px solid var(--line); padding:22px; border-radius:var(--radius); box-shadow:var(--shadow); transition:box-shadow .25s ease;}
.box + .box{margin-top:24px;}
.box h3{font-size:13px; font-family:var(--font-mono); letter-spacing:.14em; text-transform:uppercase; margin-bottom:16px; padding-bottom:12px; border-bottom:2px solid var(--ink);}
.rank-item{display:flex; gap:14px; align-items:flex-start; padding:12px 0; border-bottom:1px solid var(--line);}
.rank-item:last-child{border-bottom:none; padding-bottom:0;}
.rank-item:first-child{padding-top:0;}
.rank-num{font-family:var(--font-heading); font-size:30px; font-weight:900; color:transparent; -webkit-text-stroke:1.4px var(--gold); line-height:1; flex-shrink:0; width:30px;}
.rank-item h5{font-size:14.5px; line-height:1.35; font-weight:600; font-family:var(--font-body);}

.newsletter{background:var(--ink); color:var(--paper); text-align:left;}
.newsletter h3{color:var(--paper); border-color:var(--paper-3); opacity:.9;}
.newsletter p{font-size:13px; color:var(--paper-2); margin-bottom:16px; line-height:1.6;}
.newsletter form{display:flex; flex-direction:column; gap:10px;}
.newsletter input{background:transparent; border:1px solid var(--paper-3); color:var(--white); padding:12px; font-family:var(--font-body); font-size:14px;}
.newsletter input::placeholder{color:var(--gray);}
.newsletter button{background:var(--blue); color:var(--white); border:none; padding:13px; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; min-height:44px;}
.newsletter button:hover{background:var(--blue-dark);}

.contrib-box{background:var(--gold-bright); border-color:var(--gold-bright);}
.contrib-box h3{border-color:var(--ink); color:var(--ink);}
.contrib-box p{font-size:13px; color:var(--ink-soft); margin-bottom:14px; line-height:1.6;}
.contrib-box .btn{
  display:inline-flex; align-items:center; justify-content:center; min-height:42px; background:var(--ink); color:var(--white); padding:10px 16px; font-family:var(--font-mono);
  font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:600;
}
.contrib-box .btn:hover{background:var(--blue-dark);}

.tags{display:flex; flex-wrap:wrap; gap:8px;}
.tags a{font-family:var(--font-mono); font-size:11px; padding:7px 10px; border:1px solid var(--line); color:var(--ink-soft);}
.tags a:hover{border-color:var(--blue); color:var(--blue);}

/* ===== Footer ===== */
footer{background:var(--ink); color:var(--paper-2); margin-top:60px;}
footer .wrap{padding:44px 20px 24px;}
.foot-grid{display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:32px; padding-bottom:32px; border-bottom:1px solid #46403a;}
.foot-brand{display:flex; gap:14px; align-items:flex-start;}
.foot-brand .mark{width:44px; height:50px; flex-shrink:0;}
.foot-brand .mark img{width:100%; height:100%; object-fit:contain;}
.foot-brand h2{color:var(--white); font-size:22px; margin-bottom:8px;}
.foot-brand p{font-size:12.5px; color:#9d968a; line-height:1.7; max-width:260px;}
.foot-col h5{font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-bright); margin-bottom:14px;}
.foot-col a{display:block; font-size:13px; color:#c8c2b5; padding:6px 0;}
.foot-col a:hover{color:var(--white);}
.foot-bottom{display:flex; justify-content:center; align-items:center; padding-top:20px; font-family:var(--font-mono); font-size:11px; color:#8c8579; flex-wrap:wrap; gap:10px;}

/* ============================================================
   Statistik Pengunjung — desain lebih elegan (fitur v1.5). Dulu cuma
   satu baris teks polos "X hari ini · X bulan ini · ..."; sekarang
   kartu-kartu kecil dengan ikon, angka besar bergaya gold-accent, dan
   label di bawahnya, konsisten dengan tema Fraunces/gold situs ini.
   ============================================================ */
.visitor-stats{display:flex; justify-content:center; flex-wrap:wrap; gap:0; margin:8px 0 4px; padding-top:26px; border-top:1px solid rgba(255,255,255,.08);}
.visitor-stat{display:flex; align-items:center; gap:10px; padding:0 26px; position:relative;}
.visitor-stat:not(:last-child)::after{content:''; position:absolute; right:0; top:50%; transform:translateY(-50%); width:1px; height:28px; background:rgba(255,255,255,.12);}
.visitor-stat svg{width:20px; height:20px; flex-shrink:0; color:var(--gold-bright,#E0BA46); opacity:.85;}
.visitor-stat div{display:flex; flex-direction:column; line-height:1.2;}
.visitor-stat strong{font-family:var(--font-heading); font-size:19px; font-weight:700; color:var(--white,#fff); letter-spacing:.01em;}
.visitor-stat span{font-family:var(--font-mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:#a99f8e; margin-top:1px;}
.visitor-stat--total strong{color:var(--gold-bright,#E0BA46);}
@media (max-width:600px){
  .visitor-stats{gap:14px 0;}
  .visitor-stat{padding:0 14px;}
  .visitor-stat:nth-child(2n)::after{display:none;}
}

/* ===== Back to top ===== */
.back-to-top{
  position:fixed; right:20px; bottom:20px; width:46px; height:46px; border-radius:50%;
  background:var(--ink); color:var(--white); border:none; display:flex; align-items:center; justify-content:center;
  font-size:18px; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .2s ease, transform .2s ease, visibility .2s;
  z-index:70; box-shadow:0 4px 14px rgba(0,0,0,.25);
}
.back-to-top.show{opacity:1; visibility:visible; transform:translateY(0);}
.back-to-top:hover{background:var(--blue-dark);}

/* ===== Auth / dashboard pages ===== */
.auth-shell{min-height:calc(100vh - 36px); display:flex; align-items:center; justify-content:center; padding:40px 16px; background:linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);}
/* Split-screen login (fitur v4.3.2): panel branding di kiri + kartu
   form di kanan, tetap satu kartu terpusat di layar sempit (mobile). */
.auth-split{
  display:grid; grid-template-columns:1fr 1fr; max-width:920px; width:100%;
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); overflow:hidden;
}
.auth-brand{
  background:linear-gradient(150deg, var(--blue-dark) 0%, var(--blue) 100%);
  color:var(--white); padding:clamp(28px,5vw,52px); display:flex; flex-direction:column; justify-content:center;
}
.auth-brand-mark{width:56px; height:64px; margin-bottom:22px; background:var(--white); border-radius:10px; padding:6px; box-sizing:border-box;}
.auth-brand-mark img{width:100%; height:100%; object-fit:contain; display:block;}
.auth-brand h2{color:var(--white); font-size:clamp(24px,3vw,30px); margin-bottom:6px;}
.auth-brand-sub{font-family:var(--font-mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-bright); margin-bottom:22px;}
.auth-brand-text{font-size:14px; line-height:1.7; color:rgba(255,255,255,.82); max-width:320px;}
.auth-card{background:var(--white); max-width:none; width:100%; padding:clamp(24px, 5vw, 44px); border:none; border-radius:0; box-shadow:none;}
@media (max-width:820px){
  .auth-split{grid-template-columns:1fr; max-width:420px; border-radius:var(--radius-lg);}
  .auth-brand{display:none;}
}
.auth-card .mark{width:60px; height:68px; margin:0 auto 18px;}
.auth-card h2{text-align:center; font-size:clamp(20px, 5vw, 24px); margin-bottom:6px;}
.auth-card .sub{text-align:center; font-size:12px; color:var(--gray); font-family:var(--font-mono); margin-bottom:26px; letter-spacing:.04em;}
.tabs{display:flex; flex-wrap:wrap; border:1px solid var(--line); margin-bottom:22px;}
.tabs button{flex:1 1 auto; min-width:110px; background:none; border:none; border-bottom:2px solid transparent; padding:12px 10px; min-height:44px; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--gray); white-space:normal; line-height:1.3;}
.tabs button.active{background:var(--ink); color:var(--white); border-bottom-color:var(--ink);}
.field{margin-bottom:16px;}
.field label{display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--gray); margin-bottom:6px;}
.field input, .field select, .field textarea{
  width:100%; border:1px solid var(--line); padding:12px; font-family:var(--font-body); font-size:16px; background:var(--paper); color:var(--ink); border-radius:var(--radius);
}
.field textarea{resize:vertical; min-height:120px;}

/* Field kata sandi dengan tombol Lihat/Sembunyikan (fitur baru v3.8) */
.password-field{display:flex; gap:0; position:relative;}
.password-field input{flex:1; border-right:none;}
.password-field .pwd-toggle{
  border:1px solid var(--line); border-left:none; background:var(--paper-2); color:var(--ink-soft);
  padding:0 14px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; min-height:44px;
}
.password-field .pwd-toggle:hover{background:var(--paper-3); color:var(--ink);}

.btn-primary{width:100%; min-height:48px; background:var(--blue); color:var(--white); border:none; padding:13px; font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; border-radius:var(--radius); box-shadow:var(--shadow); cursor:pointer;}
.btn-primary:hover{background:var(--blue-dark);}
.form-msg{font-size:12.5px; padding:10px 12px; margin-bottom:16px; display:none;}

/* Statistik Pengunjung Website (fitur v3.7, dirapikan v4.1) */
.visit-stat-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:14px;}
.visit-stat-card{
  border:1px solid var(--line); border-top:3px solid var(--accent, var(--blue));
  padding:16px 14px; background:var(--paper); border-radius:var(--radius); box-shadow:var(--shadow);
}
.visit-stat-icon{font-size:18px; margin-bottom:8px; opacity:.85;}
.visit-stat-num{font-family:var(--font-heading); font-size:28px; font-weight:700; color:var(--ink); line-height:1;}
.visit-stat-label{font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--gray); margin-top:6px;}
.visit-chart{
  display:flex; align-items:flex-end; gap:4px; height:90px; border:1px solid var(--line); padding:10px 10px 0; background:var(--paper);
}
.visit-chart .bar-col{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; position:relative;}
.visit-chart .bar{width:100%; max-width:22px; background:var(--blue); min-height:2px; transition:height .2s ease;}
.visit-chart .bar-col:hover .bar{background:var(--gold);}
.visit-chart .bar-tip{
  position:absolute; bottom:100%; margin-bottom:4px; background:var(--ink); color:var(--white); font-size:10px;
  padding:2px 5px; white-space:nowrap; display:none; font-family:var(--font-mono);
}
.visit-chart .bar-col:hover .bar-tip{display:block;}
.visit-chart .bar-day{font-family:var(--font-mono); font-size:9px; color:var(--gray); margin-top:4px; writing-mode:horizontal-tb;}
.form-msg.error{display:block; background:#fde8e8; color:#a11d1d; border:1px solid #f0b8b8;}
.form-msg.success{display:block; background:#e6f4ea; color:#1e6b34; border:1px solid #b7ddc4;}
.hint-box{background:var(--paper-2); border:1px dashed var(--line); padding:12px 14px; font-size:12px; color:var(--gray); margin-top:18px; line-height:1.6;}

.dash-header{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:24px 0; border-bottom:2px solid var(--ink); margin-bottom:28px; flex-wrap:wrap;}
.dash-header .who{font-family:var(--font-mono); font-size:12px; color:var(--gray);}
.dash-header .who strong{color:var(--ink);}
.btn-ghost{background:none; border:1px solid var(--ink); color:var(--ink); padding:10px 16px; min-height:42px; font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;}
.btn-ghost:hover{background:var(--ink); color:var(--white);}
.dash-grid{display:grid; grid-template-columns:minmax(0,1.7fr) minmax(260px,1fr); gap:36px; align-items:start;}

/* Form artikel 2 kolom bergaya CMS profesional (fitur v4.3.2) */
.article-form-grid{display:grid; grid-template-columns:1fr 280px; gap:28px; align-items:start;}
.article-form-side{border-left:1px solid var(--line); padding-left:28px;}
@media (max-width:760px){
  .article-form-grid{grid-template-columns:1fr;}
  .article-form-side{border-left:none; padding-left:0; border-top:1px solid var(--line); padding-top:20px; margin-top:4px;}
}
.status-pill{display:inline-block; font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; padding:4px 9px; background:var(--gold-bright); color:var(--ink); font-weight:700;}
.my-article{border:1px solid var(--line); background:var(--white); padding:16px; margin-bottom:14px; border-radius:var(--radius); box-shadow:var(--shadow);}
.my-article h4{font-size:15.5px; margin:8px 0 6px;}
.my-article p{font-size:13px; color:var(--ink-soft); margin-bottom:10px;}
.my-article .row{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;}
.my-article .del{font-family:var(--font-mono); font-size:11px; color:#a11d1d; background:none; border:none; padding:6px 0;}

/* =======================================================
   RESPONSIVE BREAKPOINTS
   ======================================================= */

/* Tablet landscape / small desktop */
@media (max-width:1024px){
  .cat-grid{grid-template-columns:repeat(2,1fr);}
  .hero{gap:22px;}
  .wrap{padding:0 18px;}
  .foot-grid{grid-template-columns:1fr 1fr 1fr; gap:24px;}
  .foot-brand{grid-column:1 / -1;}
  .dash-grid{grid-template-columns:minmax(0,1.6fr) minmax(240px,1fr); gap:24px;}
  .admin-shell{grid-template-columns:210px 1fr; gap:20px;}
}

/* Tablet portrait: collapse to hamburger nav, stack main layout */
@media (max-width:860px){
  .nav-toggle{display:flex;}
  .nav-links{
    position:fixed; top:0; right:0; height:100vh; width:min(78vw, 320px);
    background:var(--white); flex-direction:column; align-items:stretch; overflow-y:auto;
    transform:translateX(100%); transition:transform .25s ease; box-shadow:-6px 0 24px rgba(0,0,0,.15);
    padding:70px 0 24px; z-index:55; gap:0;
  }
  .nav-links.open{transform:translateX(0);}
  nav.primary a{padding:15px 22px; border-bottom:1px solid var(--line); border-left:3px solid transparent; width:100%;}
  nav.primary a.active, nav.primary a:hover{border-left-color:var(--blue); border-bottom-color:var(--line); background:var(--paper);}
  nav.primary a.contrib{margin:14px 22px 0; text-align:center; border-radius:2px;}
  .nav-overlay{
    display:none; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:54;
  }
  .nav-overlay.show{display:block;}

  .grid{grid-template-columns:1fr;}
  .hero{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr 1fr; gap:28px;}
  .dash-grid{grid-template-columns:1fr;}
}

/* Mobile */
@media (max-width:600px){
  .cat-grid{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr;}
  .masthead .wrap{padding:16px 16px 14px;}
  .stamp{text-align:left; font-size:10.5px;}
  .utility .links a:not(.highlight){display:none;}
  .side-item .photo{width:80px; height:60px;}
  .box{padding:18px;}
  .back-to-top{right:14px; bottom:14px; width:42px; height:42px;}
}

@media (max-width:400px){
  .brand .mark{width:116px; height:132px;}
  .rank-num{font-size:26px; width:26px;}
}

/* =======================================================
   RESPONSIVE OPTIMIZATION v4.3.9
   Melengkapi breakpoint di atas (tidak menggantikan) supaya
   tampilan optimal di SELURUH perangkat: ponsel kecil, ponsel
   besar, tablet potret/lanskap, laptop kecil, hingga layar lebar.
   ======================================================= */

/* Pengaman global anti-overflow horizontal: elemen media & kontrol
   form tidak boleh pernah lebih lebar dari kontainernya, di ukuran
   layar berapa pun (termasuk form panjang di Panel Admin). */
img, svg, video, iframe, table{max-width:100%;}
input, select, textarea, button{max-width:100%;}

/* Teks bebas (isi artikel, komentar, nilai kontak, kartu tulisan)
   dipaksa membungkus kata yang sangat panjang/tanpa spasi (mis. URL
   atau email panjang) supaya tidak mendorong layar melebar ke
   samping di ponsel. */
.article-detail .body-text, .comment-item p, .contact-row .value,
.box, .my-article p, .file-info p{
  overflow-wrap:break-word; word-break:break-word;
}

/* Ponsel menengah/besar (≤600px): rapikan sisa komponen yang
   sebelumnya hanya diatur untuk breakpoint yang lebih lebar. */
@media (max-width:600px){
  .search-bar select{max-width:none; width:100%;}
  .password-field{flex-wrap:wrap;}
  .password-field input{border-right:1px solid var(--line); width:100%;}
  .password-field .pwd-toggle{width:100%; border-left:1px solid var(--line); border-top:none;}
}

/* Ponsel kecil (≤380px, mis. layar ~320–360px): kepadatan diturunkan
   lagi supaya tidak ada elemen yang berhimpit atau ikut terpotong. */
@media (max-width:380px){
  .wrap{padding:0 14px;}
  .stat-grid{grid-template-columns:1fr;}
  .visit-stat-grid{grid-template-columns:repeat(2,1fr);}
  nav.primary a{padding:13px 12px; font-size:11.5px;}
  .utility .wrap{flex-wrap:wrap; height:auto; min-height:36px; padding-top:4px; padding-bottom:4px;}
  .dl-stat .n{font-size:28px;}
  .modal-box{padding:18px;}
  .tabs button{min-width:96px;}
}

/* Orientasi lanskap di ponsel (tinggi layar pendek): kurangi padding
   vertikal besar supaya form login/reset tidak perlu discroll lebih
   dari yang seharusnya. */
@media (max-height:480px) and (orientation:landscape){
  .auth-shell{min-height:auto; padding:24px 16px;}
}

/* Layar sangat lebar (desktop besar/monitor lebar): batasi lebar
   kontainer agar teks & grid tidak melar berlebihan dan tetap nyaman
   dibaca. */
@media (min-width:1600px){
  .wrap{max-width:1360px;}
}

/* =======================================================
   V2.0 — VERSION BADGE
   ======================================================= */
.ver-badge{
  display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono);
  font-size:10px; font-weight:700; letter-spacing:.08em; color:var(--blue-dark);
  background:var(--gold-bright); padding:2px 8px; border-radius:3px; vertical-align:middle; margin-left:8px;
}

/* =======================================================
   SOCIAL LINKS
   ======================================================= */
.social-row{display:flex; gap:10px; flex-wrap:wrap;}
.social-btn{
  width:38px; height:38px; border-radius:50%; border:1px solid #46403a; background:transparent;
  display:flex; align-items:center; justify-content:center; color:#c8c2b5; flex-shrink:0;
}
.social-btn svg{width:17px; height:17px;}
.social-btn:hover{background:var(--blue); border-color:var(--blue); color:var(--white);}
.social-row.on-light .social-btn{border-color:var(--line); color:var(--ink-soft);}
.social-row.on-light .social-btn:hover{background:var(--blue); border-color:var(--blue); color:var(--white);}

.utility .social-inline{display:flex; gap:10px; align-items:center;}
.utility .social-inline a{opacity:.85; display:flex;}
.utility .social-inline a:hover{opacity:1; color:var(--gold-bright);}
.utility .social-inline svg{width:13px; height:13px;}

/* =======================================================
   DOWNLOAD CENTER (Pusat Unduhan)
   ======================================================= */
.dl-hero{
  background:var(--blue); color:var(--white); padding:38px 0; margin-bottom:34px;
}
.dl-hero .wrap{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap;}
.dl-hero .eyebrow{color:var(--gold-bright);}
.dl-hero h2{color:var(--white); font-size:clamp(24px,4vw,34px); margin-top:8px;}
.dl-hero p{color:var(--paper-2); font-size:14.5px; max-width:520px; margin-top:8px; line-height:1.6;}
.dl-stat{font-family:var(--font-mono); text-align:right;}
.dl-stat .n{font-size:36px; font-weight:700; color:var(--gold-bright); line-height:1;}
.dl-stat .l{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--paper-2); margin-top:4px;}

.filter-row{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:24px;}
.filter-chip{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.04em; padding:9px 14px;
  border:1px solid var(--line); background:var(--white); color:var(--ink-soft); border-radius:20px;
}
.filter-chip.active{background:var(--ink); border-color:var(--ink); color:var(--white);}
.filter-chip:hover:not(.active){border-color:var(--blue); color:var(--blue);}

.file-list{display:flex; flex-direction:column; gap:12px;}
.file-item{
  background:var(--white); border:1px solid var(--line); padding:16px 18px; display:flex; align-items:center; gap:16px;
  border-radius:var(--radius); box-shadow:var(--shadow); transition:box-shadow .2s ease, transform .2s ease;
}
.file-item:hover{box-shadow:var(--shadow-lg); transform:translateY(-1px);}
.file-kind{
  width:46px; height:52px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:10px; font-weight:700; color:var(--white); letter-spacing:.02em;
  clip-path:polygon(0 0,70% 0,100% 30%,100% 100%,0 100%);
}
.kind-pdf{background:#b3261e;}
.kind-doc{background:#1a5cc4;}
.kind-xls{background:#1e7d3c;}
.kind-ppt{background:#c9581a;}
.kind-img{background:#7a4fc2;}
.kind-zip{background:#5a5347;}
.kind-generic{background:var(--gray);}
.file-info{flex:1; min-width:0;}
.file-info h4{font-size:15.5px; margin-bottom:4px; font-family:var(--font-body); font-weight:600;}
.file-info p{font-size:12.5px; color:var(--ink-soft); margin-bottom:6px;}
.file-meta{font-family:var(--font-mono); font-size:10.5px; color:var(--gray); display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.file-meta .cat-pill{background:var(--paper-2); padding:2px 8px; border-radius:10px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em;}
.dl-btn{
  flex-shrink:0; display:inline-flex; align-items:center; gap:7px; background:var(--blue); color:var(--white);
  padding:10px 16px; min-height:40px; font-family:var(--font-mono); font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; font-weight:600; border:none;
}
.dl-btn:hover{background:var(--blue-dark);}
.dl-btn svg{width:13px; height:13px;}
.file-del{flex-shrink:0; font-family:var(--font-mono); font-size:10.5px; color:#a11d1d; background:none; border:none; padding:4px;}

/* =======================================================
   UPLOAD DROPZONE (dashboard)
   ======================================================= */
.upload-zone{
  border:2px dashed var(--line); background:var(--paper); padding:26px 18px; text-align:center; cursor:pointer;
  margin-bottom:14px;
}
.upload-zone:hover, .upload-zone.drag{border-color:var(--blue); background:#eef3fa;}
.upload-zone svg{width:26px; height:26px; color:var(--gray); margin:0 auto 10px;}
.upload-zone .u-title{font-size:13.5px; font-weight:600; color:var(--ink); margin-bottom:4px;}
.upload-zone .u-sub{font-size:11.5px; color:var(--gray); font-family:var(--font-mono);}
.upload-zone input[type="file"], #fPicker{display:none;}
.upload-picked{
  display:flex; align-items:center; gap:10px; background:var(--white); border:1px solid var(--line);
  padding:10px 12px; margin-bottom:14px; font-size:12.5px; display:none;
}
.upload-picked.show{display:flex;}
.upload-picked .name{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600;}
.upload-picked .size{font-family:var(--font-mono); color:var(--gray); font-size:11px; flex-shrink:0;}
.upload-picked .clear{flex-shrink:0; background:none; border:none; color:#a11d1d; font-size:16px; line-height:1;}
.progress-track{height:6px; background:var(--paper-2); margin-bottom:14px; overflow:hidden; display:none;}
.progress-track.show{display:block;}
.progress-bar{height:100%; background:var(--blue); width:0%; transition:width .15s ease;}

.tab-strip{display:flex; border-bottom:2px solid var(--ink); margin-bottom:22px;}
.tab-strip button{
  background:none; border:none; padding:12px 18px; min-height:44px; font-family:var(--font-mono);
  font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--gray); border-bottom:3px solid transparent; margin-bottom:-2px;
}
.tab-strip button.active{color:var(--blue); border-color:var(--blue); font-weight:700;}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

/* ============================================================
   ADMIN SIDEBAR CMS (fitur baru v4.3.1)
   Restrukturisasi visual Panel Admin dari bar tab horizontal menjadi
   sidebar navigasi bergaya CMS profesional, DIKELOMPOKKAN per topik.
   PENTING: ini murni perubahan tata letak/visual -- setiap tombol tetap
   memakai id & onclick="switchAdminTab(...)" yang sama persis seperti
   sebelumnya, jadi seluruh logic JavaScript switchAdminTab() tidak
   disentuh sama sekali dan tetap berfungsi identik.
   ============================================================ */
.admin-shell{display:grid; grid-template-columns:240px 1fr; gap:28px; align-items:start;}
.admin-sidebar{
  position:sticky; top:20px; display:flex; flex-direction:column; gap:22px;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:18px 14px; max-height:calc(100vh - 40px); overflow-y:auto;
}
.sidebar-group-label{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gray); padding:0 10px 8px; border-bottom:1px solid var(--line); margin-bottom:6px;
}
.admin-sidebar button{
  display:block; width:100%; text-align:left; background:none; border:none; border-radius:6px;
  padding:10px 10px; margin-bottom:2px; font-family:var(--font-body); font-size:13px; color:var(--ink-soft);
  cursor:pointer; transition:background .15s ease, color .15s ease;
}
.admin-sidebar button:hover{background:var(--paper-2); color:var(--ink);}
.admin-sidebar button.active{background:var(--blue); color:var(--white); font-weight:600;}
.admin-main{min-width:0;}

@media (max-width:860px){
  .admin-shell{display:block;}
  .admin-sidebar{
    position:static; max-height:none; flex-direction:row; flex-wrap:nowrap; overflow-x:auto;
    gap:14px; margin-bottom:22px; padding:12px;
  }
  .sidebar-group{display:flex; flex-direction:column; flex-shrink:0;}
  .sidebar-group-label{white-space:nowrap;}
  .admin-sidebar button{white-space:nowrap;}
}

@media (max-width:600px){
  .file-item{flex-wrap:wrap;}
  .dl-btn{width:100%; justify-content:center;}
  .dl-stat{text-align:left;}
  .dl-hero .wrap{align-items:flex-start;}
}

/* =======================================================
   ADMIN PANEL
   ======================================================= */
.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:28px;}
.stat-card{background:var(--white); border:1px solid var(--line); padding:18px; border-radius:var(--radius); box-shadow:var(--shadow); transition:box-shadow .2s ease, transform .2s ease;}
.stat-card:hover{box-shadow:var(--shadow-lg); transform:translateY(-2px);}
.stat-card .n{font-family:var(--font-mono); font-size:30px; font-weight:700; color:var(--blue); line-height:1;}
.stat-card .l{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--gray); margin-top:6px;}

.role-badge{
  font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.04em;
  padding:2px 8px; border-radius:3px; text-transform:uppercase; display:inline-block;
}
.role-badge.r-admin{background:#2a1810; color:var(--gold-bright);}
.role-badge.r-guru{background:#e7edf6; color:var(--blue);}
.role-badge.r-siswa{background:var(--paper-2); color:var(--ink-soft);}
.role-badge.r-alumni{background:#f3e9d8; color:#8a5a1e;}

.admin-table{width:100%; border-collapse:collapse; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);}
/* PERBAIKAN v4.3.2: kotak pembungkus tabel (mis. tab Kontributor) dulu
   memakai overflow:hidden yang dimaksudkan hanya untuk merapikan sudut
   tabel -- tapi efek sampingnya, isi tabel yang lebih lebar dari kotak
   (nama panjang, email panjang, tombol aksi) ikut TERPOTONG dan tidak
   bisa dijangkau sama sekali (bukan sekadar terbungkus/wrap). Sekarang
   kotak ini boleh digulir ke samping (overflow-x:auto) supaya seluruh
   isi kolom tetap bisa dibaca & dijangkau, di layar manapun. */
.table-box{overflow-x:auto; border-radius:var(--radius);}
.table-box .admin-table{border-radius:0;}
.admin-table th{
  text-align:left; font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase;
  letter-spacing:.05em; color:var(--gray); padding:10px 14px; border-bottom:2px solid var(--ink); background:var(--paper);
}
.admin-table td{padding:12px 14px; border-bottom:1px solid var(--line); font-size:13px; vertical-align:middle;}
.admin-table tr:last-child td{border-bottom:none;}
.admin-table tr:hover td{background:var(--paper-2);}
.admin-table .name-cell{font-weight:600;}
.admin-table .sub{font-size:11px; color:var(--gray); font-family:var(--font-mono);}
.admin-del{
  font-family:var(--font-mono); font-size:10.5px; color:#a11d1d; background:none; border:1px solid #a11d1d;
  padding:5px 10px; white-space:nowrap;
}
.admin-del:hover{background:#a11d1d; color:var(--white);}
.admin-del[disabled]{opacity:.35; cursor:not-allowed;}

@media (max-width:760px){
  .stat-grid{grid-template-columns:repeat(2,1fr);}
  .admin-table{white-space:nowrap;}
}

/* =======================================================
   V3.0 — PENCARIAN & TAG
   ======================================================= */
.search-bar{
  display:flex; gap:10px; margin-bottom:18px; flex-wrap:wrap;
}
.search-bar input[type="search"]{
  flex:1; min-width:220px; padding:12px 14px; border:1px solid var(--line); background:var(--white);
  font-family:var(--font-body); font-size:14px; min-height:44px;
}
.search-bar input[type="search"]:focus{outline:2px solid var(--blue); outline-offset:-1px;}
.search-bar select{
  border:1px solid var(--line); background:var(--white); padding:12px 14px;
  font-family:var(--font-body); font-size:13.5px; min-height:44px; color:var(--ink);
}
.tag-chip-row{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px;}
.tag-chip{
  font-family:var(--font-mono); font-size:11px; padding:6px 12px; border-radius:14px;
  border:1px solid var(--line); background:var(--white); color:var(--ink-soft);
}
.tag-chip.active{background:var(--blue); border-color:var(--blue); color:var(--white);}
.tag-chip:hover:not(.active){border-color:var(--blue); color:var(--blue);}
.tag-chip .n{opacity:.6; margin-left:4px;}

/* status badge dipakai untuk "Tulisan Saya" & panel moderasi admin */
.status-badge{
  font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.04em;
  padding:2px 8px; border-radius:3px; text-transform:uppercase; display:inline-block;
}
.status-badge.st-pending{background:#fdf1d6; color:#8a5a1e;}
.status-badge.st-published{background:#dff0e2; color:#1e7d3c;}
.status-badge.st-rejected{background:#fbe1e0; color:#a11d1d;}

.mod-actions{display:flex; gap:6px;}
.mod-btn{
  font-family:var(--font-mono); font-size:10.5px; padding:5px 10px; border:1px solid var(--line); background:var(--white);
}
.mod-btn.approve{border-color:#1e7d3c; color:#1e7d3c;}
.mod-btn.approve:hover{background:#1e7d3c; color:var(--white);}
.mod-btn.reject{border-color:#a11d1d; color:#a11d1d;}
.mod-btn.reject:hover{background:#a11d1d; color:var(--white);}
.mod-btn.edit{border-color:var(--blue); color:var(--blue);}
.mod-btn.edit:hover{background:var(--blue); color:var(--white);}

/* Modal edit artikel (Panel Admin, v3.5) */
.modal-overlay{
  position:fixed; inset:0; background:rgba(28,26,23,.55);
  display:none; align-items:flex-start; justify-content:center;
  padding:40px 16px; overflow-y:auto; z-index:200;
}
.modal-overlay.show{display:flex;}
.modal-box{
  background:var(--white); border:1px solid var(--line); max-width:680px; width:100%;
  padding:26px; margin-bottom:40px; border-radius:var(--radius); box-shadow:var(--shadow);
}
.modal-box h3{font-size:15px; font-family:var(--font-mono); letter-spacing:.1em; text-transform:uppercase; margin-bottom:18px; padding-bottom:12px; border-bottom:2px solid var(--ink);}
.modal-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:6px;}
.btn-cancel{background:transparent; border:1px solid var(--line); padding:12px 18px; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft);}
.btn-cancel:hover{border-color:var(--ink); color:var(--ink);}

/* =======================================================
   V3.0 — HALAMAN DETAIL ARTIKEL
   ======================================================= */
.article-detail{max-width:760px; margin:0 auto;}
.article-detail .cover{width:100%; aspect-ratio:16/9; object-fit:cover; background:var(--paper-2); margin-bottom:24px;}
.article-detail h1{font-size:clamp(26px,4vw,40px); line-height:1.15; margin-bottom:14px;}
.article-detail .meta-row{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center; font-family:var(--font-mono);
  font-size:12px; color:var(--gray); margin-bottom:24px; padding-bottom:20px; border-bottom:1px solid var(--line);
}
.article-detail .meta-row .dot{width:3px; height:3px; background:var(--gray); border-radius:50%;}
.article-detail .body-text{font-size:16.5px; line-height:1.8; color:var(--ink); white-space:pre-wrap;}
.article-detail .body-text p{margin-bottom:1.2em;}
/* v1.5.9: heading, garis pemisah, dan daftar hasil konversi Markkdown
   (###, ---, "* item") supaya tampil rapi selaras tema artikel. */
.article-detail .body-text h2, .article-detail .body-text h3, .article-detail .body-text h4{font-family:var(--font-heading); color:var(--ink); margin:1em 0 .5em; line-height:1.3;}
.article-detail .body-text h2{font-size:26px;}
.article-detail .body-text h3{font-size:21px;}
.article-detail .body-text h4{font-size:18px;}
.article-detail .body-text hr{border:none; border-top:1px solid var(--line); margin:1.6em 0;}
.article-detail .body-text ul, .article-detail .body-text ol{margin:0 0 1.2em; padding-left:1.4em;}
.article-detail .body-text li{margin-bottom:.4em;}
.article-tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:24px;}
.article-tags a{
  font-family:var(--font-mono); font-size:11px; color:var(--blue); background:#eef3fa; padding:4px 10px; border-radius:12px;
}
.article-tags a:hover{background:var(--blue); color:var(--white);}

.engage-row{display:flex; align-items:center; gap:14px; margin:28px 0; padding:16px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.like-btn{
  display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); background:var(--white);
  padding:9px 16px; font-family:var(--font-mono); font-size:13px; color:var(--ink-soft); min-height:40px;
}
.like-btn svg{width:16px; height:16px;}
.like-btn.liked{border-color:#c8393f; color:#c8393f; background:#fdeceb;}
.like-btn.liked svg{fill:#c8393f;}
.like-btn:hover{border-color:#c8393f; color:#c8393f;}
.view-count{font-family:var(--font-mono); font-size:12.5px; color:var(--gray);}

/* =======================================================
   V3.0 — KOMENTAR
   ======================================================= */
.comment-section h3{font-size:17px; margin-bottom:16px;}
.comment-form{display:flex; gap:10px; margin-bottom:24px; align-items:flex-start;}
.comment-form textarea{
  flex:1; min-height:70px; padding:10px 12px; border:1px solid var(--line); font-family:var(--font-body);
  font-size:13.5px; resize:vertical;
}
.comment-form button{
  background:var(--blue); color:var(--white); border:none; padding:10px 18px; min-height:44px;
  font-family:var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:.05em; flex-shrink:0;
}
.comment-form button:hover{background:var(--blue-dark);}
.comment-list{display:flex; flex-direction:column; gap:16px;}
.comment-item{border-bottom:1px solid var(--line); padding-bottom:16px;}
.comment-item .head{display:flex; align-items:center; gap:8px; margin-bottom:6px; font-size:12.5px;}
.comment-item .head strong{font-family:var(--font-body); font-weight:700;}
.comment-item .head .role-tag{font-family:var(--font-mono); font-size:9.5px; color:var(--gray); text-transform:uppercase;}
.comment-item .head .time{font-family:var(--font-mono); font-size:11px; color:var(--gray); margin-left:auto;}
.comment-item p{font-size:13.5px; line-height:1.6; color:var(--ink-soft);}
.comment-item .del-comment{font-family:var(--font-mono); font-size:10.5px; color:#a11d1d; background:none; border:none; margin-top:4px;}
.comment-login-note{
  background:var(--paper); border:1px dashed var(--line); padding:14px 16px; font-size:13px; color:var(--ink-soft); margin-bottom:20px;
}
.comment-login-note a{color:var(--blue); font-weight:600;}

/* =======================================================
   V3.0 — UPLOAD GAMBAR SAMPUL DI DASHBOARD
   ======================================================= */
.cover-upload-row{display:flex; gap:14px; align-items:flex-start; margin-bottom:6px;}
.cover-preview{
  width:96px; height:72px; flex-shrink:0; background:var(--paper-2); border:1px solid var(--line);
  object-fit:cover; display:none;
}
.cover-preview.show{display:block;}
.cover-upload-btn{
  font-family:var(--font-mono); font-size:11.5px; padding:9px 14px; border:1px solid var(--line);
  background:var(--white); color:var(--ink-soft); cursor:pointer; display:inline-block;
}
.cover-upload-btn:hover{border-color:var(--blue); color:var(--blue);}
.cover-upload-status{font-family:var(--font-mono); font-size:11px; color:var(--gray); margin-top:6px;}

.card-link{text-decoration:none; color:inherit; display:block;}
.card-link:hover h4{color:var(--blue);}
.card-stats{display:flex; gap:10px; font-family:var(--font-mono); font-size:10.5px; color:var(--gray); margin-top:4px;}

/* ============================================================
   Grid Profil Generik (fitur baru v1.1) — dipakai bersama oleh Profil
   Redaksi, Profil Lembaga, Profil Kepala Lembaga, dan Profil Dewan
   Pengurus Yayasan, supaya tidak perlu duplikat CSS di tiap halaman.
   ============================================================ */
.profile-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:20px; margin-top:22px;}
.profile-card{background:var(--white); border:1px solid var(--line); padding:22px; text-align:center; border-radius:var(--radius); box-shadow:var(--shadow);}
.profile-card img{width:88px; height:88px; border-radius:50%; object-fit:cover; margin:0 auto 14px; display:block;}
.profile-card .avatar-fallback{width:88px; height:88px; border-radius:50%; background:var(--paper-3); margin:0 auto 14px; display:flex; align-items:center; justify-content:center; font-family:var(--font-heading); font-size:28px; color:var(--gray);}

/* Varian foto persegi panjang (fitur v1.5.2) — dipakai Profil Kepala
   Lembaga, supaya foto potret (mis. foto formal berdiri/setengah badan)
   tidak lagi kepotong kepalanya seperti waktu dipaksa jadi bulat.
   Ukuran menyesuaikan lebar kartu, rasio potret 3:4, object-fit:cover
   dengan fokus ke bagian ATAS foto supaya wajah/kepala selalu utuh. */
.profile-card--rect img{width:100%; height:auto; aspect-ratio:3/4; border-radius:10px; object-fit:cover; object-position:top center; margin:0 0 14px; display:block;}
.profile-card--rect .avatar-fallback--rect{width:100%; aspect-ratio:3/4; height:auto; border-radius:10px; background:var(--paper-3); margin:0 0 14px; display:flex; align-items:center; justify-content:center; font-family:var(--font-heading); font-size:36px; color:var(--gray);}

/* Varian foto Guru/Karyawan diperkecil 50% (fitur v1.5.3) — sama
   bentuknya (persegi panjang 3:4), tapi kartu & fotonya dibuat separuh
   ukuran normal supaya bisa muat lebih banyak dalam satu baris. Dipakai
   khusus di halaman guru-karyawan.html, TIDAK mengubah tampilan Profil
   Kepala Lembaga. */
/* v1.5.4: diperbesar 1,5x dari ukuran v1.5.3 (110px -> 165px, dst.) */
.profile-grid--sm{grid-template-columns:repeat(auto-fill, minmax(165px, 1fr)); gap:20px;}
.profile-grid--sm .profile-card{padding:15px;}
.profile-grid--sm .profile-card--rect img,
.profile-grid--sm .profile-card--rect .avatar-fallback--rect{margin-bottom:12px; border-radius:10px;}
.profile-grid--sm .profile-card--rect .avatar-fallback--rect{font-size:30px;}
.profile-grid--sm .profile-card h4{font-size:14.5px; margin-bottom:3px;}
.profile-grid--sm .profile-card .position{font-size:10px; margin-bottom:4px;}
.profile-grid--sm .profile-card .motto{font-size:12px; line-height:1.5;}

/* Proteksi foto Kepala Lembaga & Guru/Karyawan (fitur v1.5.3) — bukan
   proteksi mutlak (screenshot tetap selalu bisa), tapi mencegah cara
   paling umum dipakai pengunjung biasa: klik-kanan "Simpan Gambar" dan
   drag foto ke desktop. */
.protected-photo{-webkit-user-drag:none; -webkit-touch-callout:none; user-select:none; pointer-events:auto;}
.photo-protect-wrap{position:relative;}
.photo-protect-shield{position:absolute; inset:0; background:transparent; -webkit-touch-callout:none; touch-action:manipulation;}
.profile-card h4{font-size:15.5px; margin-bottom:4px;}
.profile-card .position{font-family:var(--font-mono); font-size:11px; color:var(--blue); text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px;}
.profile-card .nip{font-family:var(--font-mono); font-size:11px; color:var(--gray); margin-bottom:10px;}
.profile-card .motto{font-size:12.5px; color:var(--ink-soft); font-style:italic; line-height:1.5;}
.profile-card .institution-tag{display:inline-block; margin-top:8px; font-family:var(--font-mono); font-size:10.5px; color:var(--gray); background:var(--paper-3); padding:2px 8px; border-radius:99px;}

/* Lembaga (kartu logo persegi, bukan foto bulat) */
.institution-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:20px; margin-top:22px;}
.institution-card{background:var(--white); border:1px solid var(--line); padding:24px; text-align:center; border-radius:var(--radius); box-shadow:var(--shadow);}
.institution-card img{width:76px; height:76px; object-fit:contain; margin:0 auto 14px; display:block;}
.institution-card .avatar-fallback{width:76px; height:76px; border-radius:12px; background:var(--paper-3); margin:0 auto 14px; display:flex; align-items:center; justify-content:center; font-family:var(--font-heading); font-size:24px; color:var(--gray);}
.institution-card h4{font-size:15.5px; margin-bottom:8px;}
.institution-card p{font-size:12.5px; color:var(--ink-soft); line-height:1.6;}

/* Kartu Fasilitas (fitur v1.5.2) — foto lebih besar bergaya landscape,
   beda dari kartu Lembaga (logo kecil persegi), supaya foto fasilitas
   (ruang kelas, lab, perpustakaan, dst.) tampil jelas. */
.facility-card{text-align:left; padding:0; overflow:hidden;}
.facility-card .facility-photo{width:100%; height:170px; object-fit:cover; display:block; margin:0;}
.facility-card .facility-photo-fallback{width:100%; height:170px; border-radius:0; margin:0; font-size:40px;}
.facility-card h4{padding:16px 18px 4px; margin:0;}
.facility-card p{padding:0 18px 18px;}

/* ---- Panel Admin: daftar yang bisa digeser Naik/Turun (fitur v1.1) --- */
.sortable-row{display:flex; align-items:center; gap:10px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius); margin-bottom:8px; background:var(--white);}
.sortable-row.inactive{opacity:.55;}
.sortable-row .move-btns{display:flex; flex-direction:column; gap:2px;}
.sortable-row .move-btns button{width:26px; height:22px; font-size:11px; line-height:1; border:1px solid var(--line); background:var(--paper-2); cursor:pointer; border-radius:4px;}
.sortable-row .move-btns button:disabled{opacity:.3; cursor:not-allowed;}
.sortable-row .row-thumb{width:44px; height:44px; border-radius:8px; object-fit:cover; flex-shrink:0; background:var(--paper-3);}
.sortable-row .row-thumb.round{border-radius:50%;}
.sortable-row .row-info{flex:1; min-width:0;}
.sortable-row .row-info .row-title{font-weight:600; font-size:14px;}
.sortable-row .row-info .row-sub{font-size:12px; color:var(--gray); font-family:var(--font-mono);}
.sortable-row .row-actions{display:flex; gap:6px; flex-shrink:0;}

/* ============================================================
   Notifikasi "Ada Versi Baru" di Panel Admin (fitur baru v1.3) —
   muncul otomatis kalau version.json berubah dibanding yang terakhir
   dilihat browser ini, hilang begitu Admin klik "Tutup" atau "Lihat
   Detail".
   ============================================================ */
.update-banner{display:none; align-items:center; justify-content:space-between; gap:14px; background:var(--gold-bright,#e8b23d); color:#3a2c05; padding:12px 18px; border-radius:var(--radius); margin-bottom:18px; font-size:13px; flex-wrap:wrap;}
.update-banner.show{display:flex;}
.update-banner strong{font-weight:700;}
.update-banner .ub-actions{display:flex; gap:8px; align-items:center; flex-shrink:0;}
.update-banner button{border:1px solid rgba(0,0,0,.25); background:rgba(255,255,255,.35); color:#3a2c05; font-size:12px; padding:6px 12px; border-radius:6px; cursor:pointer; font-family:var(--font-mono);}
.update-banner button:hover{background:rgba(255,255,255,.55);}
.update-banner button.ub-close{background:transparent; border-color:transparent; font-size:16px; padding:2px 8px;}

/* ============================================================
   Iklan Komersial (fitur baru v1.5.4)
   ============================================================ */
.ad-slot-container{display:none; margin:22px 0;}
.ad-slot{position:relative; margin-bottom:14px; text-align:center;}
.ad-slot:last-child{margin-bottom:0;}
.ad-slot--image img{max-width:100%; height:auto; border-radius:8px; display:inline-block;}
.ad-slot .ad-label{position:absolute; top:6px; left:6px; background:rgba(0,0,0,.55); color:#fff; font-family:var(--font-mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; padding:2px 7px; border-radius:4px; z-index:1;}
.ad-slot--html{background:var(--paper-2); border:1px dashed var(--line); border-radius:8px; padding:10px; overflow:hidden;}

/* ============================================================
   Bagikan Artikel (fitur baru v1.5.5)
   ============================================================ */
.share-row{display:flex; align-items:center; gap:10px; margin:18px 0 0; padding-top:18px; border-top:1px solid var(--line);}
.share-label{font-family:var(--font-mono); font-size:11.5px; color:var(--gray); text-transform:uppercase; letter-spacing:.05em; margin-right:2px;}
.share-btn{width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); background:var(--white); color:var(--ink-soft); cursor:pointer; transition:transform .15s, background .15s, color .15s;}
.share-btn svg{width:17px; height:17px;}
.share-btn:hover{transform:translateY(-2px);}
.share-btn--wa:hover{background:#25D366; border-color:#25D366; color:#fff;}
.share-btn--fb:hover{background:#1877F2; border-color:#1877F2; color:#fff;}
.share-btn--x:hover{background:#000; border-color:#000; color:#fff;}
.share-btn--copy:hover{background:var(--blue); border-color:var(--blue); color:#fff;}

/* ============================================================
   Editor Teks Kaya (Rich Text Editor) — fitur baru v1.5.8. Dipakai di
   "Tambah Artikel Baru" & "Kelola Artikel" (Dashboard dan Panel Admin),
   untuk Tebal/Miring/Garis Bawah/Coret/Ukuran Font/Perataan Teks.
   ============================================================ */
.rte-wrap{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--paper);}
.rte-toolbar{display:flex; flex-wrap:wrap; align-items:center; gap:2px; padding:6px; background:var(--paper-2); border-bottom:1px solid var(--line);}
.rte-toolbar button{width:32px; height:32px; display:flex; align-items:center; justify-content:center; border:1px solid transparent; background:transparent; color:var(--ink); font-family:var(--font-body); font-size:14px; border-radius:5px; cursor:pointer;}
.rte-toolbar button:hover{background:var(--paper-3); border-color:var(--line);}
.rte-toolbar button.active{background:var(--blue); color:var(--white); border-color:var(--blue);}
.rte-toolbar .rte-sep{width:1px; height:20px; background:var(--line); margin:0 4px; flex-shrink:0;}
.rte-toolbar select{height:32px; border:1px solid var(--line); border-radius:5px; background:var(--white); font-family:var(--font-mono); font-size:11px; padding:0 6px; color:var(--ink); cursor:pointer;}
.rte-editor{min-height:220px; max-height:520px; overflow-y:auto; padding:14px; font-family:var(--font-body); font-size:16px; color:var(--ink); line-height:1.6;}
.rte-editor:focus{outline:none;}
.rte-editor p{margin:0 0 .8em;}
.rte-editor:empty::before{content:attr(data-placeholder); color:var(--gray); pointer-events:none;}

/* ============================================================
   STRUKTUR ORGANISASI (fitur baru v1.7.0) -- bagan bertingkat
   satu halaman penuh. Tiap "tingkat" = satu baris, terpusat.
   ============================================================ */
.org-page{max-width:1200px;}
.org-chart{margin-top:26px;}
.org-row{display:flex; flex-wrap:wrap; justify-content:center; gap:22px; position:relative; padding:0 0 38px;}
.org-row:not(:last-child)::after{content:""; position:absolute; left:50%; bottom:6px; width:2px; height:26px; background:var(--line,#c9d3e3);}
.org-node{width:170px; background:var(--paper,#fff); border:1px solid var(--line,#dfe5ef); border-radius:12px; padding:12px; text-align:center; box-shadow:0 2px 8px rgba(18,59,115,.07);}
.org-node img{width:100%; height:auto; aspect-ratio:3/4; border-radius:8px; object-fit:cover; object-position:top center; margin:0 0 10px; display:block;}
.org-node .avatar-fallback--rect{width:100%; aspect-ratio:3/4; border-radius:8px; background:var(--paper-3); margin:0 0 10px; display:flex; align-items:center; justify-content:center; font-size:32px; color:var(--gray);}
.org-node h4{font-size:14.5px; margin:0 0 3px; line-height:1.3;}
.org-node .position{font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--gray);}
.org-link-btn{display:inline-block; background:var(--navy,#123b73); color:#fff; padding:11px 20px; border-radius:8px; font-weight:600; font-size:14px; text-decoration:none;}
.org-link-btn:hover{opacity:.9;}
@media (max-width:560px){ .org-node{width:calc(50% - 11px); min-width:140px;} }

/* v1.7.2: Struktur Organisasi banyak lembaga -- tab pilihan lembaga */
.org-tabs{display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 18px;}
.org-tab{border:1px solid var(--line,#cfd8e6); background:var(--paper,#fff); color:var(--ink,#16233a); padding:9px 16px; border-radius:999px; font-family:var(--font-mono); font-size:12px; font-weight:600; cursor:pointer;}
.org-tab:hover{border-color:var(--navy,#123b73);}
.org-tab.active{background:var(--navy,#123b73); border-color:var(--navy,#123b73); color:#fff;}
.org-title{font-family:var(--font-heading); font-size:22px; margin:6px 0 22px; text-align:center;}
.org-link-btn--sm{padding:8px 14px; font-size:12.5px; margin-top:12px;}
.rte-compact .rte-editor{min-height:70px;}

/* v1.7.5: tombol Beranda tetap tampil di HP (login, dashboard, admin, reset sandi) */
.utility .links a.home-link{font-weight:600; opacity:1;}
@media (max-width:600px){
  .utility .links a.home-link{display:inline-flex !important; align-items:center; gap:4px; background:var(--gold-bright,#E0BA46); color:#1b2a41 !important; padding:5px 12px; border-radius:999px; font-size:12px; line-height:1.2;}
  .utility .wrap{height:auto; min-height:40px; padding-top:4px; padding-bottom:4px;}
  .utility .links{gap:8px;}
}