* { margin:0; padding:0; box-sizing:border-box; font-family:'Segoe UI',Arial,sans-serif;}
body { background:#f4f6f9; color:#222; min-height:100vh; display:flex; flex-direction:column;}
a { color:#1976d2; text-decoration:none;}

/* ============================================ */
/* HEADER PUBLIK                                */
/* ============================================ */
header.site-header { background:linear-gradient(135deg,#0b3d91,#1976d2); color:#fff; padding:12px 0; box-shadow:0 2px 10px rgba(0,0,0,.1);}
.nav { max-width:1200px; margin:auto; display:flex; justify-content:space-between; align-items:center; padding:0 20px; flex-wrap:wrap; gap:10px;}

/* LOGO di header publik */
.logo { display:flex; align-items:center; gap:10px; text-decoration:none; color:#fff;}
.logo img { height:42px; width:auto; max-width:220px; object-fit:contain; filter:drop-shadow(0 2px 4px rgba(0,0,0,.2));}
.logo .logo-text { font-size:22px; font-weight:bold; letter-spacing:1px; line-height:1;}
.logo .logo-text span { color:#ffd700;}

.nav-links a { color:#fff; margin-left:10px; padding:8px 16px; border-radius:6px; background:rgba(255,255,255,.15); transition:.3s; font-size:14px; display:inline-block;}
.nav-links a:hover { background:#ffd700; color:#0b3d91;}

/* ============================================ */
/* HEADER DASHBOARD                             */
/* ============================================ */
.dash-header { background:linear-gradient(135deg,#0b3d91,#1976d2); color:#fff; padding:12px 25px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;}
.dash-header h1 { font-size:18px; display:flex; align-items:center; gap:10px;}
.dash-header h1 img { height:34px; width:auto; filter:drop-shadow(0 2px 4px rgba(0,0,0,.2));}
.dash-header a { color:#fff; background:rgba(255,255,255,.2); padding:8px 15px; border-radius:6px; font-size:13px;}

/* ============================================ */
/* CONTAINER & CARD                             */
/* ============================================ */
.container { max-width:1100px; margin:25px auto; padding:0 15px; width:100%; flex:1;}
.card { background:#fff; border-radius:10px; padding:25px; margin-bottom:20px; box-shadow:0 2px 8px rgba(0,0,0,.08);}
.card h3 { color:#0b3d91; margin-bottom:15px; font-size:18px;}

/* ============================================ */
/* HERO                                         */
/* ============================================ */
.hero { background:#fff; padding:40px 20px; text-align:center; margin-bottom:30px;}
.hero h1 { font-size:30px; color:#0b3d91; margin-bottom:10px;}
.hero p { color:#666; font-size:15px;}

/* ============================================ */
/* GRID & NEWS CARD                             */
/* ============================================ */
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:22px;}
.news-card { background:#fff; border-radius:10px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,.08); transition:.3s;}
.news-card:hover { transform:translateY(-5px); box-shadow:0 8px 20px rgba(0,0,0,.15);}
.news-card img { width:100%; height:180px; object-fit:cover; background:#ddd;}
.news-card .body { padding:16px;}
.news-card h3 { font-size:16px; margin-bottom:8px; color:#0b3d91;}
.news-card p { font-size:13px; color:#666; line-height:1.5;}
.news-card .meta { font-size:11px; color:#999; margin-top:10px;}

/* ============================================ */
/* FORM                                         */
/* ============================================ */
label { display:block; font-size:13px; font-weight:600; margin-bottom:5px; color:#333;}
input, textarea, select { width:100%; padding:10px 12px; border:1px solid #ddd; border-radius:6px; margin-bottom:12px; font-size:14px; font-family:inherit;}
input:focus, textarea:focus, select:focus { outline:none; border-color:#1976d2;}
textarea { resize:vertical; min-height:60px;}
button, .btn { display:inline-block; padding:11px 22px; background:linear-gradient(135deg,#0b3d91,#1976d2); color:#fff; border:none; border-radius:6px; font-size:14px; font-weight:600; cursor:pointer; text-decoration:none; transition:.3s;}
button:hover, .btn:hover { opacity:.9;}
.btn-block { width:100%; display:block; text-align:center;}
.btn-green { background:linear-gradient(135deg,#28a745,#20c997);}
.btn-danger { background:linear-gradient(135deg,#dc3545,#c82333);}
.btn.disabled, .btn:disabled { background:#ccc; cursor:not-allowed; pointer-events:none;}

/* ============================================ */
/* AUTH BOX                                     */
/* ============================================ */
.auth-box { max-width:440px; margin:40px auto; background:#fff; border-radius:12px; padding:30px; box-shadow:0 10px 40px rgba(0,0,0,.15);}
.auth-box h2 { color:#0b3d91; text-align:center; margin-bottom:20px;}
.auth-box .sub { text-align:center; color:#666; font-size:13px; margin-bottom:20px;}
.auth-box .logo-auth { display:flex; justify-content:center; margin-bottom:15px;}
.auth-box .logo-auth img { height:55px; width:auto; max-width:220px;}

/* ============================================ */
/* ALERT                                        */
/* ============================================ */
.alert { padding:12px 15px; border-radius:6px; margin-bottom:15px; font-size:13px;}
.alert-success { background:#d4edda; color:#155724; border:1px solid #c3e6cb;}
.alert-error { background:#f8d7da; color:#721c24; border:1px solid #f5c6cb;}
.alert-info { background:#e3f2fd; color:#0b3d91; border-left:4px solid #1976d2;}

/* ============================================ */
/* STATUS BADGE                                 */
/* ============================================ */
.status { display:inline-block; padding:4px 12px; border-radius:20px; font-size:12px; font-weight:600;}
.s-pending, .s-menunggu { background:#fff3cd; color:#856404;}
.s-aktif, .s-lunas, .s-valid { background:#d4edda; color:#155724;}
.s-nonaktif, .s-belum, .s-invalid { background:#f8d7da; color:#721c24;}

/* ============================================ */
/* TABEL                                        */
/* ============================================ */
table.data { width:100%; border-collapse:collapse; font-size:13px;}
table.data th { background:#0b3d91; color:#fff; padding:10px; text-align:left;}
table.data td { padding:10px; border-bottom:1px solid #eee; vertical-align:middle;}
table.data img { width:50px; height:65px; object-fit:cover; border-radius:4px;}

table.info { width:100%; border-collapse:collapse; font-size:14px;}
table.info td { padding:8px 0; border-bottom:1px solid #eee;}
table.info td:first-child { color:#666; width:160px;}

/* ============================================ */
/* STATS                                        */
/* ============================================ */
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:18px; margin-bottom:22px;}
.stat { background:#fff; padding:20px; border-radius:10px; box-shadow:0 2px 8px rgba(0,0,0,.08); border-left:4px solid #1976d2;}
.stat h3 { font-size:30px; color:#0b3d91;}
.stat p { color:#666; font-size:13px; margin-top:5px;}

/* ============================================ */
/* MENU GRID                                    */
/* ============================================ */
.menu-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px;}
.menu-grid a { background:#fff; padding:22px; border-radius:10px; box-shadow:0 2px 8px rgba(0,0,0,.08); color:#0b3d91; font-weight:600; display:flex; align-items:center; gap:12px; font-size:15px; transition:.3s;}
.menu-grid a:hover { transform:translateY(-3px); box-shadow:0 6px 15px rgba(0,0,0,.15);}
.menu-grid .icon { font-size:26px;}

.empty { text-align:center; padding:50px 20px; color:#999; background:#fff; border-radius:10px;}

/* ============================================ */
/* FOOTER                                       */
/* ============================================ */
.site-footer { background:#0b3d91; color:#fff; text-align:center; padding:25px 15px; font-size:13px; margin-top:auto;}

/* ============================================ */
/* KARTU WARTAWAN                               */
/* ============================================ */
@media print { .no-print { display:none !important; } body { background:#fff; } .site-footer { display:none; } }
.card-container { display:flex; gap:25px; flex-wrap:wrap; justify-content:center; margin-top:20px;}
.kartu { width:340px; height:215px; border-radius:12px; padding:12px; position:relative; overflow:hidden; box-shadow:0 5px 20px rgba(0,0,0,.2);}
.kartu.depan { background:linear-gradient(135deg,#0b3d91,#1976d2); color:#fff;}
.kartu.depan::after { content:''; position:absolute; top:-30px; right:-30px; width:130px; height:130px; background:rgba(255,255,255,.08); border-radius:50%;}
.kartu .header-kartu { display:flex; align-items:center; gap:10px; border-bottom:1px solid rgba(255,255,255,.3); padding-bottom:6px;}
.kartu .logo-kartu { width:40px; height:40px; background:#fff; border-radius:8px; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:4px;}
.kartu .logo-kartu img { width:100%; height:100%; object-fit:contain;}
.kartu .judul-kartu { font-size:13px; font-weight:bold; line-height:1.2;}
.kartu .judul-kartu small { display:block; font-size:9px; font-weight:normal; opacity:.85; letter-spacing:1px;}
.kartu .body-kartu { display:flex; gap:10px; margin-top:10px;}
.kartu .foto-kartu { width:62px; height:82px; background:#ddd; border-radius:4px; object-fit:cover; border:2px solid #fff;}
.kartu .info-kartu { font-size:10.5px; line-height:1.6;}
.kartu .info-kartu b { font-size:11.5px; display:block; margin-bottom:2px;}
.kartu .info-kartu .label { opacity:.75;}
.kartu .no-kartu { position:absolute; bottom:28px; right:14px; font-size:10px; font-weight:bold; letter-spacing:1px;}
.kartu .footer-strip { position:absolute; bottom:0; left:0; right:0; height:22px; background:rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center; font-size:8px; letter-spacing:2px;}
.kartu.belakang { background:#fff; color:#222;}
.kartu .aturan { font-size:8.5px; line-height:1.5; padding:10px 12px;}
.kartu .aturan h4 { font-size:10px; margin-bottom:5px; color:#0b3d91;}
.kartu .ttd { position:absolute; bottom:12px; right:15px; text-align:center; font-size:8px;}
.kartu .ttd .line { width:80px; border-top:1px solid #333; margin:18px auto 2px;}

/* ============================================ */
/* KONTEN BERITA                                */
/* ============================================ */
.konten-berita h2, .konten-berita h3 { color:#0b3d91; margin:20px 0 10px; }
.konten-berita p { margin-bottom:15px; }
.konten-berita img { max-width:100%; height:auto; border-radius:8px; margin:15px 0; }
.konten-berita a { color:#1976d2; text-decoration:underline; }
.konten-berita ul, .konten-berita ol { margin:15px 0 15px 25px; }
.konten-berita li { margin-bottom:5px; }
.konten-berita blockquote { border-left:4px solid #1976d2; padding:10px 20px; margin:15px 0; background:#f8f9fa; font-style:italic; color:#555; }
.konten-berita figure { margin:15px 0; }
.konten-berita figcaption { font-size:12px; color:#888; text-align:center; }
.konten-berita table { border-collapse:collapse; width:100%; margin:15px 0; }
.konten-berita td, .konten-berita th { border:1px solid #ddd; padding:8px; }
.konten-berita iframe { max-width:100%; border-radius:8px; }

/* ============================================ */
/* BADGE CENTANG BIRU                           */
/* ============================================ */
.verified-badge { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; cursor:help; }
.verified-badge svg { filter:drop-shadow(0 1px 2px rgba(29,161,242,0.3)); }

/* ============================================ */
/* AUTHOR BOX                                   */
/* ============================================ */
.author-box { display:flex; gap:15px; padding:20px; margin-top:30px; background:linear-gradient(135deg,#f8f9fa,#e9ecef); border-left:4px solid #1976d2; border-radius:8px; align-items:center; }
.author-box-foto img, .author-box-inisial { width:60px; height:60px; border-radius:50%; object-fit:cover; border:3px solid #1976d2; background:linear-gradient(135deg,#0b3d91,#1976d2); color:#fff; display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:bold; }
.author-box-info { flex:1; }

/* ============================================ */
/* SECTION TIM REDAKSI                          */
/* ============================================ */
.wartawan-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:20px; margin-top:10px; }
.wartawan-card { background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,.08); transition:all 0.3s ease; text-align:center; padding-bottom:15px; border:1px solid #f0f0f0; }
.wartawan-card:hover { transform:translateY(-5px); box-shadow:0 10px 25px rgba(11,61,145,.15); border-color:#1976d2; }
.wartawan-foto-wrapper { position:relative; width:100%; aspect-ratio:1/1; background:linear-gradient(135deg, #1976d2, #0b3d91); overflow:hidden; }
.wartawan-foto-wrapper img { width:100%; height:100%; object-fit:cover; transition:transform 0.3s; }
.wartawan-card:hover .wartawan-foto-wrapper img { transform:scale(1.05); }
.wartawan-inisial { width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:48px; font-weight:bold; letter-spacing:2px; }
.wartawan-badge { position:absolute; top:8px; right:8px; background:#28a745; color:#fff; font-size:10px; font-weight:600; padding:4px 8px; border-radius:12px; box-shadow:0 2px 6px rgba(0,0,0,.2); }
.wartawan-info { padding:12px 10px 0; }
.wartawan-info h4 { font-size:14px; color:#0b3d91; margin-bottom:6px; font-weight:700; line-height:1.3; min-height:36px; display:flex; align-items:center; justify-content:center; }
.wartawan-lokasi { font-size:11px; color:#666; margin-bottom:6px; }
.wartawan-no { font-size:10px; color:#999; padding:5px 0; border-top:1px dashed #e0e0e0; margin-top:5px; }
.wartawan-no b { color:#1976d2; font-family:monospace; }

/* ============================================ */
/* RESPONSIVE                                   */
/* ============================================ */
@media (max-width: 600px) {
    .logo img { height:32px; }
    .logo .logo-text { font-size:18px; }
    .auth-box .logo-auth img { height:45px; }
    .dash-header h1 { font-size:15px; }
    .dash-header h1 img { height:28px; }
    .wartawan-grid { grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:12px; }
    .wartawan-info h4 { font-size:12px; }
    .wartawan-inisial { font-size:36px; }
    .konten-berita { font-size:15px !important; }
    article h1 { font-size:22px !important; }
    .author-box { flex-direction:column; text-align:center; }
}