/* Halaman Sejarah Singkat */
.page-sejarah { padding: 48px 0; }
.page-sejarah .container { max-width: 980px; }

.hero-sejarah { text-align:center; margin-bottom: 28px; }
.hero-sejarah h1{
  font-family: "Imperial Script", cursive;
  font-weight: 400;
  line-height: 1.1;
  font-size: clamp(42px, 6vw, 72px);
  letter-spacing: .5px;
  margin: 0;
  color: #0f172a;
}
.hero-sejarah .sub{
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  color: #64748b;
  margin-top: 6px;
  letter-spacing: .08em;
}

.page-sejarah p{
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  line-height: 1.9;
  color: #0f172a;
  margin: 14px 0;
  text-align: justify;
}

.page-sejarah .card{
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 6px 18px rgba(2,6,23,.04);
}


/* Halaman Visi & Misi */
.page-visimisi { padding: 48px 0; }
.page-visimisi .container { max-width: 980px; }

.hero-visimisi { text-align:center; margin-bottom: 28px; }
.hero-visimisi h1{
  font-family: "Imperial Script", cursive;
  font-weight: 400;
  line-height: 1.1;
  font-size: clamp(42px, 6vw, 72px);
  letter-spacing: .5px;
  margin: 0;
  color: #0f172a;
}
.hero-visimisi .sub{
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  color: #64748b;
  margin-top: 6px;
  letter-spacing: .08em;
}

.card-visimisi{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:24px;
  box-shadow:0 6px 18px rgba(2,6,23,.04);
}

.section-title{
  font-family:"Poppins", sans-serif;
  font-weight:700;
  font-size:18px;
  letter-spacing:.06em;
  color:#0f172a;
  margin:6px 0 12px;
}

.vision-block{
  background:linear-gradient(180deg,#f8fafc, #ffffff);
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:20px;
  margin-bottom:22px;
}

.vision-text{
  font-family:"Poppins", sans-serif;
  font-size:18px;
  font-weight:700;
  line-height:1.6;
  text-transform:uppercase;
  color:#0f172a;
  text-align:center;
}

.mission-list{
  font-family:"Poppins", sans-serif;
  font-size:16px;
  line-height:1.9;
  color:#0f172a;
  counter-reset: misi-counter;
  margin:0;
  padding-left:0;
  display:grid;
  gap:10px;
}
.mission-list li{
  list-style:none;
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:start;
  gap:12px;
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:10px;
  padding:14px 16px;
}
.mission-list li::before{
  counter-increment:misi-counter;
  content: counter(misi-counter) ".";
  font-weight:700;
  color:#111827;
  margin-top:3px;
}

/* Halaman Struktur Organisasi */
.page-struktur { padding:48px 0; }
.page-struktur .container { max-width: 1080px; }

.hero-struktur { text-align:center; margin-bottom:28px; }
.hero-struktur h1{
  font-family:"Imperial Script",cursive; font-weight:400;
  line-height:1.1; font-size:clamp(42px,6vw,72px);
  letter-spacing:.5px; margin:0; color:#0f172a;
}
.hero-struktur .sub{
  font-family:"Poppins",sans-serif; font-size:14px; color:#64748b;
  margin-top:6px; letter-spacing:.08em;
}

.card-stru{
  background:#fff; border:1px solid #e5e7eb; border-radius:14px;
  padding:22px; box-shadow:0 6px 18px rgba(2,6,23,.04); margin-bottom:18px;
}

.section-title{
  font-family:"Poppins",sans-serif; font-weight:700; font-size:18px;
  letter-spacing:.06em; color:#0f172a; margin:6px 0 14px;
}

.org-list{ width:100%; border-collapse:separate; border-spacing:0 8px; }
.org-list tr{ background:#ffffff; border:1px solid #e5e7eb; }
.org-list td{ padding:12px 14px; vertical-align:top; font-family:"Poppins",sans-serif; }
.org-list .role{ width:28%; font-weight:600; color:#111827; }
.org-list .name{ width:54%; color:#0f172a; }
.org-list .nia{ width:18%; color:#475569; font-size:14px; white-space:nowrap; }

.org-subgrid{
  display:grid; gap:12px; grid-template-columns:1fr; 
}
@media (min-width: 720px){
  .org-subgrid{ grid-template-columns:1fr 1fr; }
}
.org-sub{
  border:1px solid #e5e7eb; border-radius:12px; padding:14px 16px; background:#fff;
}
.org-sub h3{
  font-family:"Poppins",sans-serif; font-size:16px; margin:0 0 8px; color:#0f172a; font-weight:700;
}
.org-sub .pair{ display:grid; grid-template-columns:150px 1fr; gap:10px; margin:6px 0; }
.org-sub .pair .label{ font-weight:600; color:#111827; }
.org-sub ul{ margin:6px 0 0 18px; padding:0; }
.org-sub li{ margin:6px 0; line-height:1.65; }

.badge-range{
  display:inline-block; font-family:"Poppins",sans-serif; font-size:13px;
  background:#f1f5f9; color:#0f172a; border:1px solid #e2e8f0;
  padding:6px 10px; border-radius:999px; margin-top:8px;
}

/* Halaman Bidang Tugas (TUPOKSI) */
.page-tupoksi { padding: 48px 0; }
.page-tupoksi .container { max-width: 1080px; }

/* Hero */
.tupoksi-hero { text-align: center; margin-bottom: 28px; }
.tupoksi-hero h1{
  font-family: "Imperial Script", cursive;
  font-weight: 400;
  line-height: 1.1;
  font-size: clamp(42px, 6vw, 72px);
  letter-spacing: .5px;
  margin: 0;
  color: #0f172a;
}
body .tupoksi-hero h1{ font-family:"Imperial Script",cursive !important; font-weight:400 !important; }

.tupoksi-hero .sub{
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  color: #64748b;
  margin-top: 6px;
  letter-spacing: .08em;
}

/* Kartu/section tiap jabatan */
.tupoksi-section{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:22px;
  box-shadow:0 6px 18px rgba(2,6,23,.04);
  margin-bottom:18px;
}

/* Judul jabatan dalam section */
.tupoksi-section h2{
  font-family:"Poppins", sans-serif;
  font-weight:700;
  font-size:18px;
  letter-spacing:.06em;
  color:#0f172a;
  margin:4px 0 12px;
}

/* Paragraf & daftar isi TUPOKSI */
.tupoksi-section p,
.tupoksi-section li{
  font-family:"Poppins", sans-serif;
  font-size:16px;
  line-height:1.9;
  color:#0f172a;
}
.tupoksi-section ul{
  margin:0;
  padding-left:20px;
}
.tupoksi-section li{ margin:6px 0; }

/* Badge masa jabatan */
.tupoksi-hero .badge-range{ margin-top:8px; }

/* Responsif kecil */
@media (max-width: 640px){
  .tupoksi-section{ padding:18px; }
  .tupoksi-section h2{ font-size:17px; }
  .tupoksi-section p,
  .tupoksi-section li{ font-size:15px; line-height:1.85; }
}

/* tampilan  lebih ringkas */
@media print{
  .tupoksi-section{ box-shadow:none; border-color:#ddd; page-break-inside:avoid; }
  .tupoksi-hero{ margin-bottom:16px; }
}

/* Halaman Hubungi Kami */
.page-hubungi { padding: 48px 0; }
.page-hubungi .container { max-width: 900px; }

.hero-hubungi { text-align:center; margin-bottom: 32px; }
.hero-hubungi h1{
  font-family:"Imperial Script",cursive;
  font-weight:400;
  font-size:clamp(42px,6vw,72px);
  color:#0f172a;
  margin:0;
  line-height:1.1;
}
.hero-hubungi .sub{
  font-family:"Poppins",sans-serif;
  font-size:15px;
  color:#64748b;
  margin-top:8px;
  letter-spacing:.05em;
}

.card-contact{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:28px;
  box-shadow:0 6px 18px rgba(2,6,23,.04);
  margin-bottom:24px;
}

.section-title{
  font-family:"Poppins",sans-serif;
  font-weight:700;
  font-size:18px;
  letter-spacing:.06em;
  color:#0f172a;
  margin-bottom:16px;
}

.contact-desc{
  font-family:"Poppins",sans-serif;
  font-size:15px;
  line-height:1.8;
  color:#0f172a;
  margin-bottom:22px;
  text-align:justify;
}

.contact-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:22px;
}
@media(min-width:720px){
  .contact-grid{ grid-template-columns:repeat(3,1fr); }
}

.contact-item h3{
  font-family:"Poppins",sans-serif;
  font-weight:600;
  font-size:16px;
  color:#111827;
  margin-bottom:6px;
}
.contact-item p{
  font-family:"Poppins",sans-serif;
  font-size:15px;
  color:#334155;
  line-height:1.6;
  margin:4px 0;
}
.contact-item a{
  color:#0f766e;
  text-decoration:none;
}
.contact-item a:hover{
  text-decoration:underline;
}

/* Form */
.contact-form{
  display:block;
}
.form-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}
@media(min-width:720px){
  .form-grid{ grid-template-columns:1fr 1fr; }
  .form-group.full{ grid-column:1 / -1; }
}
.form-group label{
  display:block;
  font-family:"Poppins",sans-serif;
  font-size:14px;
  color:#334155;
  margin-bottom:6px;
}
.form-group input,
.form-group textarea{
  width:100%;
  border:1px solid #e5e7eb;
  border-radius:8px;
  padding:10px 12px;
  font-family:"Poppins",sans-serif;
  font-size:15px;
  transition:.2s;
}
.form-group input:focus,
.form-group textarea:focus{
  border-color:#0f766e;
  outline:none;
  box-shadow:0 0 0 3px rgba(15,118,110,.1);
}

.btn-send{
  display:inline-block;
  background:linear-gradient(90deg,#0f766e,#14b8a6);
  color:#fff;
  border:none;
  border-radius:8px;
  padding:12px 28px;
  font-family:"Poppins",sans-serif;
  font-weight:600;
  font-size:15px;
  margin-top:12px;
  cursor:pointer;
  transition:.25s;
}
.btn-send:hover{
  background:linear-gradient(90deg,#0d9488,#0f766e);
}

/* GRID KEGIATAN */
.kegiatan-wrap{ display:grid; grid-template-columns:repeat(12,1fr); gap:22px; }
.kegiatan-item{ grid-column: span 12; background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:14px; box-shadow:0 6px 18px rgba(0,0,0,.06); }
.keg-title{ font-size:18px; font-weight:700; margin:4px 6px 12px; }

.photo-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.photo{ display:block; border-radius:12px; overflow:hidden; }
.photo img{ width:100%; height:auto; display:block; }

@media (max-width:768px){
  .photo-grid{ grid-template-columns:1fr; }
}

/* LIGHTBOX */
.lb{ position:fixed; inset:0; background:rgba(0,0,0,.86); display:flex; align-items:center; justify-content:center; z-index:9999; padding:24px; }
.lb.hide{ display:none; }
.lb-fig{ max-width:min(92vw,1400px); max-height:86vh; margin:0; position:relative; }
.lb-img{ max-width:100%; max-height:86vh; display:block; margin:auto; border-radius:10px; }
.lb-cap{ color:#fff; text-align:center; margin-top:10px; font-size:14px; opacity:.9; }
.lb-prev,.lb-next,.lb-close{
  position:fixed; background:rgba(255,255,255,.12); color:#fff; border:0; width:44px; height:44px; border-radius:999px;
  display:grid; place-items:center; cursor:pointer; backdrop-filter:blur(2px);
}
.lb-close{ top:20px; right:20px; font-size:26px; }
.lb-prev{ left:22px; top:50%; transform:translateY(-50%); font-size:28px; }
.lb-next{ right:22px; top:50%; transform:translateY(-50%); font-size:28px; }
.lb-prev:hover,.lb-next:hover,.lb-close:hover{ background:rgba(255,255,255,.22); }

/* === Zoom Lightbox === */
.zm{position:fixed; inset:0; display:none; align-items:center; justify-content:center;
    background:rgba(0,0,0,.88); z-index:9999; cursor:zoom-in; overscroll-behavior:contain; }
.zm.open{ display:flex; }
.zm-fig{ margin:0; max-width:96vw; max-height:92vh; position:relative; }
.zm-img{ user-select:none; -webkit-user-drag:none; max-width:96vw; max-height:92vh; 
         transform: translate(0px, 0px) scale(1); transition: transform .12s ease-out; }
.zm-close{ position:fixed; top:18px; right:18px; width:44px; height:44px; border:0; 
           border-radius:999px; background:rgba(255,255,255,.16); color:#fff; 
           font-size:28px; line-height:1; cursor:pointer; display:grid; place-items:center; }
.zm-close:hover{ background:rgba(255,255,255,.28); }
.zm.zoomed{ cursor:grab; }
.zm.zoomed:active{ cursor:grabbing; }

/* sembunyikan scroll body saat open */
body.zm-lock{ overflow:hidden; }

.table-basic {
  width:100%;
  border-collapse:collapse;
  margin-top:10px;
}
.table-basic th, .table-basic td {
  border:1px solid #e5e7eb;
  padding:8px 10px;
  font-size:14px;
}
.table-basic thead {
  background:#f1f5f9;
  font-weight:600;
}

.btn {
  display:inline-block;
  padding:6px 14px;
  background:#0f172a;
  color:#fff;
  border-radius:6px;
  text-decoration:none;
  font-size:13px;
}
.btn:hover { background:#1e293b; }
.btn-sm { padding:5px 10px; font-size:12px; }

.letter { margin:18px 0 8px; font-size:15px; line-height:1.7; color:#0f172a; }
.letter .sec-title{ font-weight:800; margin:18px 0 6px; }
.letter p{ margin:4px 0 10px; }
.letter .bank-box{
  border:1px solid #c7d2fe; background:#eef2ff; border-left:4px solid #3b82f6;
  padding:10px 14px; border-radius:10px; margin:8px 0 12px;
}
.letter .bank-box .bank{ font-weight:800; }
.letter .bank-box .acc{ font-weight:800; letter-spacing:.3px; }
.letter .note{ font-style:italic; color:#475569; margin-top:6px; }

.letter .addr-wrap{ text-align:center; margin:18px 0 8px; }
.letter .addr-title{ font-weight:800; }
.letter .addr{ margin-top:4px; }

.letter .date-org{ text-align:center; margin:16px 0 10px; }
.letter .date-org .org{ font-weight:800; }

.letter .sig-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:12px;
}
.letter .sig{ text-align:center; line-height:1.7; }
.letter .sig .spacer{ height:46px; } 
.letter .sig .name{ font-weight:800; text-decoration:underline; }
.letter .sig .role{ color:#475569; }
@media (max-width:768px){ .letter .sig-grid{ grid-template-columns:1fr; } }

.page-head{
  border-top:4px solid var(--accent,#c21f2f);
  padding-top:12px;
  margin:0 0 18px;
}
.page-head .page-title{
  margin:0;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.5px;
  line-height:1.25;
  color:#0b1b3d;
  font-size:clamp(22px, 3.2vw, 36px);
}
.page-head .eyebrow{
  display:none;
  color:#6b7280;
  font-size:13px;
  margin-bottom:4px;
}

.announce{ margin-bottom:28px; }
.page-tail-gap{ height:32px; }

.table-basic thead th{ background:#eef2ff; font-weight:700; }

.page-head{
  border-top:4px solid var(--accent,#c21f2f);
  padding-top:12px;
  margin:0 0 18px;
}
.page-head .page-title{
  margin:0;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.4px;
  line-height:1.25;
  color:#0b1b3d;     
  font-size:clamp(22px,3.2vw,36px);
}

.announce{ margin-bottom:28px; } 
.page-tail-gap{ height:36px; }  

.table-basic thead th{ background:#eef2ff; font-weight:700; }

/* Footer Surat (Pengangkatan Jateng 2025 Gel.2)  */
.letter-foot{ margin:22px 0 10px; text-align:center; line-height:1.7; }
.letter-foot .org{ font-weight:800; }
.letter-sign{
  display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:14px;
}
.letter-sign .col{ text-align:center; }
.letter-sign .spacer{ height:46px; } 
.letter-sign .name{ font-weight:800; text-decoration:underline; }
.letter-sign .role{ color:#475569; }
@media (max-width:768px){
  .letter-sign{ grid-template-columns:1fr; }
}

/* ==== PARAMETER BESAR KARTU/GAMBAR ==== */
:root{
  --pejabat-w: 1024px;        /* ubah 520/540 jika masih kecil */
  --grid-max: 1220px;
  --divider-max: 1100px;
}

/* ==== DIVIDER: tetap center & garis merah ==== */
.peradi-divider{
  width:min(var(--divider-max),92vw);
  margin:8px auto 6px;                              /* lebih rapat */
  display:grid;
  grid-template-columns:minmax(80px,1fr) auto minmax(80px,1fr);
  align-items:center;
  gap:12px;
  text-align:center;
}
.peradi-divider .line{height:2px;background:var(--accent,#c21f2f);border-radius:2px;}
.peradi-divider .peradi-title{margin:0;line-height:1.15;}

/* ==== BARIS PEJABAT: center & jarak vertikal rapat ==== */
.pejabat-grid{
  width:min(var(--grid-max),96vw);
  margin:4px auto 8px;                              /* pepet atas-bawah */
  padding:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:flex-start;
  column-gap:36px;
  row-gap:20px;
}

/* ==== KARTU: kunci lebar, jangan shrink ==== */
.pejabat-card,
.pejabat-media{
  flex:0 0 var(--pejabat-w) !important;
  width:var(--pejabat-w) !important;
  min-width:var(--pejabat-w) !important;
  max-width:var(--pejabat-w) !important;
  margin:0; padding:0; border:0; box-shadow:none;
  transform:none !important;
}

/* ==== GAMBAR: BESAR & override semua aturan global ==== */
.pejabat-grid .pejabat-media img{
  display:block !important;
  width:var(--pejabat-w) !important;                /* paksa lebar */
  min-width:var(--pejabat-w) !important;
  max-width:none !important;                        /* abaikan max-width global */
  height:auto !important;
  margin:0 !important;
  transform:none !important;
  object-fit:contain !important;
}

/* ==== Relasi jarak antar blok ==== */
.peradi-divider + .pejabat-grid{ margin-top:2px; }  /* sangat rapat */
.pejabat-grid + .peradi-divider{ margin-top:8px; }
.pejabat-grid + .pejabat-grid{   margin-top:6px; }

/* ==== Mobile: muat layar tapi tetap besar ==== */
@media (max-width:720px){
  :root{ --pejabat-w: 320px; }
  .peradi-divider{
    grid-template-columns:minmax(60px,1fr) auto minmax(60px,1fr);
    margin:8px auto 6px;
    gap:10px;
  }
  .pejabat-grid{ column-gap:20px; row-gap:14px; margin:4px auto 8px; }
}

/* ---- Divider tetap center & aman (tanpa margin negatif) ---- */
.peradi-divider{
  /* biarkan setting centering kamu */
  margin: 8px auto 6px !important;   /* kecilkan bottom divider */
}
.peradi-divider .peradi-title{
  margin: 0 !important;
  padding-block: 2px;                /* beri ruang tipis agar tidak kepotong */
  line-height: 1.18;
}

/* ---- Rapatkan jarak divider → baris gambar pertama ---- */
.peradi-divider + .pejabat-grid{
  margin-top: 0px !important;        /* pepet tanpa menimpa H3 */
  padding-top: 0 !important;
}

/* ---- Hilangkan sumber jarak tak terlihat pada konten gambar ---- */
.pejabat-grid{ row-gap: 12px !important; }          /* kalau mau lebih rapat, 8px */
.pejabat-grid .pejabat-card{ margin-top: 0 !important; }
.pejabat-grid .pejabat-media{ margin-top: 0 !important; line-height: 0; }
.pejabat-grid .pejabat-media img{ display:block; margin:0 !important; }

/* ---- (Opsional) extra ketat untuk pasangan tertentu ---- */
/* Tambahkan class 'tight' pada <section class="pejabat-grid tight"> jika ingin lebih mepet */
.pejabat-grid.tight{ margin-top: 2px !important; row-gap: 10px !important; }