/*
Theme Name: Arsip Dirgantara — Lanud I Gusti Ngurah Rai
Theme URI: https://arsipdirgantara.id
Description: Tema institusional untuk Kanal Dokumentasi, Pemberitaan, dan Arsip Digital Lanud I Gusti Ngurah Rai. Prototype internal untuk telaah — gaya mengikuti pola resmi situs TNI AU (profil–berita–arsip–galeri–kontak). Dibangun sebagai bagian dari Program CSR Digitalisasi Juara Holding Group.
Version: 1.0.0
Author: Juara Holding Group (Program CSR Digitalisasi)
Text Domain: arsip-dirgantara
*/

/* ============================================================
   DESIGN TOKENS — palet meniru situs resmi TNI AU
   navy + steel + biru AU + emas tipis institusional
   ============================================================ */
:root{
  --navy:#012D50;        /* primary institusi */
  --navy-700:#0A3A66;
  --navy-900:#011E37;    /* hero / footer terdalam */
  --steel:#34465B;
  --blue:#2C6FB5;        /* aksen AU */
  --blue-200:#7FB0DF;
  --gold:#C5A152;        /* garis aksen tipis (medali/garuda) */
  --ink:#16222E;
  --muted:#5B6B7B;
  --line:#E2E8F0;
  --bg:#F4F6F9;
  --bg-soft:#EEF2F7;
  --white:#FFFFFF;
  --ok:#2E7D5B;
  --warn:#9A6B00;
  --radius:10px;
  --radius-sm:7px;
  --shadow-sm:0 1px 2px rgba(1,30,55,.06),0 1px 3px rgba(1,30,55,.10);
  --shadow:0 6px 18px rgba(1,30,55,.10);
  --shadow-lg:0 18px 48px rgba(1,30,55,.18);
  --maxw:1200px;
  --font-head:"Rajdhani",system-ui,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-body);font-size:16px;line-height:1.7;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-decoration:none;transition:color .15s}
a:hover{color:var(--navy)}
h1,h2,h3,h4{font-family:var(--font-head);color:var(--navy);line-height:1.15;font-weight:600;letter-spacing:.2px;margin:0 0 .5em}
h1{font-size:clamp(1.8rem,3.4vw,2.9rem);font-weight:700}
h2{font-size:clamp(1.4rem,2.4vw,2.05rem)}
h3{font-size:1.25rem}
p{margin:0 0 1rem}
.container{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.section{padding:60px 0}
.section--tight{padding:40px 0}
.section--alt{background:var(--white)}
.section--navy{background:var(--navy);color:#DCE6F1}
.section--navy h2,.section--navy h3{color:#fff}
.eyebrow{font-family:var(--font-head);text-transform:uppercase;letter-spacing:2.5px;
  font-weight:600;font-size:.78rem;color:var(--blue)}
.section--navy .eyebrow{color:var(--blue-200)}
.lead{font-size:1.08rem;color:var(--steel)}
.center{text-align:center}
.muted{color:var(--muted)}

/* gold rule */
.rule-gold{width:54px;height:3px;background:var(--gold);border-radius:2px;margin:.6rem 0 1.1rem}
.center .rule-gold{margin-left:auto;margin-right:auto}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-head);
  font-weight:600;letter-spacing:.4px;font-size:.98rem;padding:.7rem 1.4rem;border-radius:var(--radius-sm);
  border:1.5px solid transparent;cursor:pointer;transition:.18s;text-transform:uppercase}
.btn--primary{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn--primary:hover{background:var(--navy-700);color:#fff}
.btn--ghost{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn--ghost:hover{background:var(--navy);color:#fff}
.section--navy .btn--ghost,.hero .btn--ghost{color:#fff;border-color:rgba(255,255,255,.6)}
.section--navy .btn--ghost:hover,.hero .btn--ghost:hover{background:#fff;color:var(--navy)}

/* ============================================================
   PROTOTYPE / REVIEW BANNER (wajib per brief)
   ============================================================ */
.proto-bar{background:repeating-linear-gradient(45deg,#7a5b00,#7a5b00 14px,#6c5100 14px,#6c5100 28px);
  color:#fff;font-family:var(--font-head);font-weight:600;letter-spacing:.5px;font-size:.82rem;
  text-align:center;padding:7px 14px;text-transform:uppercase}
.proto-bar strong{color:#FFE08A}

/* ============================================================
   TOP UTILITY BAR
   ============================================================ */
.utility{background:var(--navy-900);color:#9FB4CC;font-size:.8rem}
.utility .container{display:flex;justify-content:space-between;align-items:center;min-height:38px;gap:12px;flex-wrap:wrap}
.utility a{color:#BFD0E6}
.utility .u-left{display:flex;gap:16px;align-items:center;font-family:var(--font-head);letter-spacing:.4px}
.utility .u-soc{display:flex;gap:14px;align-items:center}
.utility .u-soc a{font-size:.74rem;text-transform:uppercase;letter-spacing:1px;text-decoration:none;opacity:.85;transition:opacity .15s}
.utility .u-soc a:hover{opacity:1;text-decoration:underline}
.footer-soc{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px}
.footer-soc a{font-family:var(--font-head);font-size:.8rem;letter-spacing:.6px;text-transform:uppercase;color:var(--blue-200);text-decoration:none;opacity:.9;transition:opacity .15s}
.footer-soc a:hover{opacity:1;text-decoration:underline}

/* ============================================================
   HEADER + NAV
   ============================================================ */
.site-header{background:var(--white);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:60;box-shadow:var(--shadow-sm)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:78px}
.brand{display:flex;align-items:center;gap:14px}
.brand__emblem{width:50px;height:50px;flex:0 0 50px}
.brand__txt{display:flex;flex-direction:column;line-height:1.15}
.brand__title{font-family:var(--font-head);font-weight:700;color:var(--navy);font-size:1.12rem;letter-spacing:.3px}
.brand__sub{font-size:.72rem;color:var(--muted);letter-spacing:1.4px;text-transform:uppercase;font-family:var(--font-head)}

.main-nav{display:flex;align-items:center}
.main-nav ul{list-style:none;display:flex;gap:2px;margin:0;padding:0}
.main-nav li{position:relative}
.main-nav>ul>li>a{display:block;padding:14px 13px;font-family:var(--font-head);font-weight:600;
  font-size:.95rem;color:var(--steel);letter-spacing:.3px;border-bottom:3px solid transparent}
.main-nav>ul>li>a:hover,.main-nav>ul>li.current-menu-item>a,.main-nav>ul>li.current-menu-parent>a{
  color:var(--navy);border-bottom-color:var(--gold)}
.main-nav .sub-menu{position:absolute;top:100%;left:0;min-width:248px;background:var(--white);
  border:1px solid var(--line);border-top:3px solid var(--navy);box-shadow:var(--shadow);
  padding:8px;border-radius:0 0 var(--radius-sm) var(--radius-sm);opacity:0;visibility:hidden;
  transform:translateY(8px);transition:.16s;z-index:70}
.main-nav>ul>li.menu-item-has-children>a::after{content:"";display:inline-block;width:.42em;height:.42em;
  margin-left:7px;vertical-align:middle;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .16s;opacity:.7}
.main-nav>ul>li.menu-item-has-children:hover>a::after{transform:translateY(1px) rotate(225deg)}
.main-nav li:hover>.sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
/* Nav berada di sisi kanan header → semua dropdown dibuka rata-kanan
   agar tidak meluber keluar viewport ke kanan. */
.main-nav>ul>li>.sub-menu{left:auto;right:0}
.main-nav .sub-menu a{display:block;padding:9px 12px;border-radius:6px;color:var(--steel);font-size:.92rem}
.main-nav .sub-menu a:hover{background:var(--bg-soft);color:var(--navy)}
.nav-toggle{display:none;background:var(--navy);color:#fff;border:0;border-radius:6px;padding:9px 12px;cursor:pointer;font-size:1.2rem}
.nav-brand{display:none}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;background:
   linear-gradient(115deg,rgba(1,20,38,.92),rgba(1,45,80,.78)),
   radial-gradient(1200px 400px at 80% -10%,rgba(44,111,181,.45),transparent 60%),
   var(--navy-900);
  color:#fff;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M0 59h60M59 0v60' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1'/%3E%3C/svg%3E");
  pointer-events:none}
.hero__emblem{position:absolute;right:-70px;top:50%;transform:translateY(-50%);width:520px;height:520px;opacity:.07;z-index:1;pointer-events:none}
.hero__emblem svg{width:100%;height:100%}
@media(max-width:760px){.hero__emblem{right:-160px;width:380px;height:380px;opacity:.05}}
.hero .container{position:relative;z-index:2;padding-top:64px;padding-bottom:64px}
.hero__motto{font-family:var(--font-head);letter-spacing:5px;text-transform:uppercase;
  color:var(--blue-200);font-weight:600;font-size:.92rem;margin-bottom:14px}
.hero h1{color:#fff;max-width:18ch}
.hero__sub{font-size:1.12rem;color:#C9D7E8;max-width:60ch;margin:14px 0 26px}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap}
.hero__meta{margin-top:30px;display:flex;gap:26px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.14);padding-top:20px}
.hero__meta div{min-width:120px}
.hero__meta .n{font-family:var(--font-head);font-size:1.7rem;font-weight:700;color:#fff}
.hero__meta .l{font-size:.78rem;color:#9FB4CC;text-transform:uppercase;letter-spacing:1.2px}

/* Hero split — panel teks (kiri) + foto utama (kanan) */
.hero--split .container{display:none}
.hero--split{background:var(--bg);padding:0}
.hero__inner{display:grid;grid-template-columns:55% 45%;align-items:stretch;min-height:560px;position:relative;z-index:2;
  background-color:var(--navy-900);
  border-radius:0 0 24px 24px;overflow:hidden;box-shadow:var(--shadow)}
.hero__bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center}
.hero__panel{position:relative;display:flex;align-items:center;z-index:2;
  padding:70px clamp(28px,5vw,72px)}
.hero__media{z-index:3}
/* Overlay navy menutupi SELURUH latar kiri (gambar kiri), tidak mengenai foto kanan */
.hero__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,rgba(1,20,38,.92),rgba(1,45,80,.80))}
.hero__content{max-width:600px;margin-left:auto;width:100%}
.hero__media{position:relative;background-size:cover;background-position:center;
  background-color:var(--navy-900);min-height:420px;display:flex;align-items:center;justify-content:center;
  border-radius:24px 0 0 24px}
.hero__media-emblem{width:320px;height:320px;opacity:.12}
.hero--split .hero__meta{display:grid;grid-template-columns:1fr 1fr;gap:16px 26px;max-width:480px}
.hero--split .hero__meta div{min-width:0}
@media(max-width:880px){
  .hero__inner{grid-template-columns:1fr;min-height:0}
  .hero__content{max-width:none;margin-left:0}
  .hero__panel{padding:52px 22px}
  .hero__media{min-height:300px;order:-1}
}

/* ============================================================
   CARDS GRID (berita & arsip)
   ============================================================ */
.grid{display:grid;gap:22px}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:26px;flex-wrap:wrap}
.section-head .t h2{margin-bottom:.2rem}
.section-head .t p{margin:0;color:var(--muted)}

.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-sm);transition:.18s;display:flex;flex-direction:column}
.card:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.card__media{position:relative;aspect-ratio:16/10;background:linear-gradient(135deg,var(--navy),var(--steel));overflow:hidden}
.card__media img{width:100%;height:100%;object-fit:cover}
.card__tag{position:absolute;top:10px;left:10px;background:var(--navy);color:#fff;font-family:var(--font-head);
  font-size:.72rem;font-weight:600;letter-spacing:.6px;padding:4px 10px;border-radius:4px;text-transform:uppercase}
.card__body{padding:16px 17px 18px;display:flex;flex-direction:column;flex:1}
.card__date{font-size:.76rem;color:var(--muted);font-family:var(--font-head);letter-spacing:.6px;text-transform:uppercase;margin-bottom:6px}
.card__title{font-size:1.05rem;margin:0 0 8px;line-height:1.3}
.card__title a{color:var(--navy)}
.card__title a:hover{color:var(--blue)}
.card__excerpt{font-size:.92rem;color:var(--steel);margin:0 0 12px}
.card__more{margin-top:auto;font-family:var(--font-head);font-weight:600;font-size:.86rem;color:var(--blue);text-transform:uppercase;letter-spacing:.5px}

/* ============================================================
   VIDEO DOKUMENTASI — kotak video (self-host MP4)
   ============================================================ */
/* Watermark ornamen di belakang section video */
#video{position:relative;overflow:hidden}
#video>.container{position:relative;z-index:1}
.video-watermark{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-position:center;background-size:cover;background-repeat:no-repeat;
  opacity:.07;mix-blend-mode:multiply}

/* Watermark latar body — semua halaman selain Beranda.
   Mengikuti perlakuan section video (home): gambar samar di belakang
   konten tiap .section, di atas latar section namun di bawah konten. */
body:not(.home) .section{position:relative}
body:not(.home) .section::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:var(--page-watermark, url("/wp-content/uploads/2026/06/BG-Section-Body.webp")) center center/cover no-repeat;
  opacity:.07;mix-blend-mode:multiply}
body:not(.home) .section>.container{position:relative;z-index:1}

.video-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.video-grid--3{grid-template-columns:repeat(3,1fr)}
.video-feature{position:relative;margin-bottom:26px;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);background:var(--navy-900);border:1px solid var(--line)}
.video-feature wistia-player{display:block;width:100%}
.video-feature__frame{position:relative;aspect-ratio:16/9;background:var(--navy-900)}
.video-feature__frame wistia-player{position:absolute;inset:0;width:100%;height:100%;display:block}
.video-feature__frame iframe{position:absolute;inset:0;width:100%;height:100%;display:block;border:0}
.video-feature__body{padding:16px 20px 20px;color:#fff}
.video-feature__title{margin:0 0 4px;color:#fff;font-size:1.25rem}
.video-feature__cap{margin:0;color:#cfe0f2;font-size:.92rem}
.video-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s}
.video-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.video-card__frame{position:relative;aspect-ratio:16/9;background:var(--navy-900)}
.video-card__frame video{width:100%;height:100%;object-fit:cover;display:block;background:#000}
.video-card__frame wistia-player{position:absolute;inset:0;width:100%;height:100%;display:block}
.video-card__placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;color:#cfe0f2;gap:10px;padding:20px;
  background:repeating-linear-gradient(135deg,#03203a,#03203a 16px,#04243f 16px,#04243f 32px)}
.video-card__placeholder svg{width:54px;height:54px;opacity:.85}
.video-card__placeholder .ph-title{font-family:var(--font-head);font-weight:600;letter-spacing:.5px;color:#fff}
.video-card__placeholder .ph-hint{font-size:.8rem;color:#9FB4CC;max-width:34ch}
.video-card__frame .play-emblem{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:66px;height:66px;border-radius:50%;background:rgba(1,45,80,.78);display:flex;align-items:center;justify-content:center;
  border:2px solid rgba(255,255,255,.5);pointer-events:none}
.video-card__frame .play-emblem::after{content:"";border-left:18px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:4px}
.video-card__body{padding:17px 19px 20px;display:flex;flex-direction:column;flex:1}
.video-card__cat{align-self:flex-start;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:var(--bg-soft);color:var(--navy);font-family:var(--font-head);
  font-weight:600;font-size:.72rem;letter-spacing:.6px;text-transform:uppercase;padding:3px 9px;border-radius:4px;margin-bottom:9px;border:1px solid var(--line)}
.video-card__title{font-size:1.08rem;margin:0 0 4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:2.5em}
.video-card__date{font-size:.8rem;color:var(--muted);font-family:var(--font-head);letter-spacing:.5px;margin-bottom:10px}
.video-card__desc{font-size:.9rem;color:var(--steel);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.video-card--reel .video-card__frame{aspect-ratio:21/9}
.video-card--reel .video-card__title,.video-card--reel .video-card__desc{-webkit-line-clamp:none;min-height:0;overflow:visible;display:block}
.admin-hint{background:#FFF6E0;border:1px dashed var(--warn);color:#6b4e00;font-size:.84rem;
  padding:10px 13px;border-radius:7px;margin:10px 0 0;font-family:var(--font-body)}
.video-card__body .admin-hint{margin-top:auto;font-size:.74rem;padding:7px 10px;line-height:1.5}
.video-card__body .admin-hint code{word-break:break-all}

/* Arsip Kegiatan — tabel klasifikasi */
.arsip-table{overflow-x:auto}
.arsip-table table{width:100%;border-collapse:collapse;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.arsip-table th,.arsip-table td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.arsip-table thead th{background:var(--bg-soft);font-family:var(--font-head);font-size:.8rem;letter-spacing:.5px;text-transform:uppercase;color:var(--navy)}
.arsip-table tbody tr:last-child td{border-bottom:0}
.arsip-table td[data-label="Tanggal"]{white-space:nowrap;color:var(--muted);font-family:var(--font-head);font-size:.9rem}
@media(max-width:640px){
  .arsip-table thead{display:none}
  .arsip-table table,.arsip-table tbody,.arsip-table tr,.arsip-table td{display:block;width:100%}
  .arsip-table tr{border-bottom:2px solid var(--line);padding:6px 0}
  .arsip-table td{border:0;padding:6px 16px}
  .arsip-table td::before{content:attr(data-label) ": ";font-weight:700;color:var(--navy);font-family:var(--font-head)}
  .arsip-table td[data-label="Judul Arsip"]::before{display:block;margin-bottom:2px}
}

/* ============================================================
   STATUS PILLS (untuk halaman review)
   ============================================================ */
.pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-head);font-weight:600;
  font-size:.74rem;letter-spacing:.6px;text-transform:uppercase;padding:3px 10px;border-radius:20px}
.pill--isi{background:#E2F2EA;color:var(--ok)}
.pill--placeholder{background:#FBEFD6;color:var(--warn)}
.pill--internal{background:#E7ECF3;color:var(--steel)}

/* placeholder note box */
.placeholder-note{background:var(--bg-soft);border:1px dashed #C5D2E0;border-radius:var(--radius);
  padding:22px 24px;color:var(--steel);display:flex;gap:14px;align-items:flex-start}
.placeholder-note svg{flex:0 0 26px;width:26px;height:26px;color:var(--blue)}

/* governance / list blocks */
.gov-list{list-style:none;padding:0;margin:1rem 0;display:grid;gap:12px}
.gov-list li{background:var(--white);border:1px solid var(--line);border-left:4px solid var(--navy);
  padding:14px 18px;border-radius:0 var(--radius-sm) var(--radius-sm) 0;box-shadow:var(--shadow-sm)}
.gov-list strong{color:var(--navy);font-family:var(--font-head)}
.gov-list.gov-list--deny li{border-left-color:#B23B3B}
.gov-list.gov-list--deny strong{color:#B23B3B}

/* page hero (interior) */
.page-hero{background:linear-gradient(120deg,var(--navy-900),var(--navy));color:#fff;padding:46px 0 40px;position:relative}
.page-hero .crumb{font-size:.82rem;color:#9FB4CC;font-family:var(--font-head);letter-spacing:.6px;margin-bottom:10px}
.page-hero .crumb a{color:var(--blue-200)}
.page-hero h1{color:#fff;margin:0}
.page-hero p{color:#C9D7E8;margin:.6rem 0 0;max-width:62ch}

/* content typography for pages */
.entry{max-width:820px}
.entry h2{margin-top:1.8rem}
.entry h3{margin-top:1.4rem;color:var(--steel)}
.entry ul,.entry ol{padding-left:1.2rem}
.entry li{margin-bottom:.4rem}
.entry blockquote{border-left:4px solid var(--gold);background:var(--bg-soft);margin:1.4rem 0;
  padding:14px 20px;border-radius:0 8px 8px 0;color:var(--steel);font-style:italic}
.entry table{width:100%;border-collapse:collapse;margin:1.2rem 0;font-size:.94rem}
.entry th,.entry td{border:1px solid var(--line);padding:10px 12px;text-align:left}
.entry th{background:var(--navy);color:#fff;font-family:var(--font-head);font-weight:600}
.entry tr:nth-child(even) td{background:var(--bg-soft)}

.layout{display:grid;grid-template-columns:1fr 300px;gap:40px;align-items:start}
.sidebar{position:sticky;top:96px}
.side-box{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin-bottom:20px;box-shadow:var(--shadow-sm)}
.side-box h4{font-size:1rem;border-bottom:2px solid var(--gold);padding-bottom:8px;display:inline-block}
.side-nav{list-style:none;margin:0;padding:0}
.side-nav li a{display:block;padding:7px 0;border-bottom:1px solid var(--line);color:var(--steel);font-size:.92rem}
.side-nav li:last-child a{border-bottom:0}
.side-nav li a:hover{color:var(--navy);padding-left:5px}

/* ============================================================
   GALERI FOTO (template-galeri.php) — grid + lightbox CSS-only
   ============================================================ */
.galeri-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.galeri-item{position:relative;display:block;overflow:hidden;border-radius:var(--radius-sm);
  box-shadow:var(--shadow-sm);aspect-ratio:4/3;background:var(--bg-soft)}
.galeri-item img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.galeri-item:hover img{transform:scale(1.06)}
/* Slider mobile (Swiper): default sembunyi, grid yang tampil di desktop.
   Specificity .galeri-swiper.galeri-only-mobile (0,2,0) sengaja lebih tinggi
   dari .swiper{display:block} milik Swiper agar tidak tampil di desktop. */
.galeri-swiper.galeri-only-mobile{display:none}
.galeri-swiper .galeri-item{aspect-ratio:4/3;height:auto}
.galeri-swiper .swiper-pagination{position:static;margin-top:14px}
.galeri-swiper .swiper-pagination-bullet{background:var(--navy,#011e37);opacity:.35}
.galeri-swiper .swiper-pagination-bullet-active{opacity:1}
@media(max-width:600px){
  .galeri-only-desktop{display:none}
  .galeri-swiper.galeri-only-mobile{display:block}
}
.galeri-lightbox{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  padding:30px;opacity:0;visibility:hidden}
.galeri-lightbox:target{opacity:1;visibility:visible}
.galeri-lightbox__bg{position:absolute;inset:0;background:rgba(1,20,38,.93);cursor:zoom-out}
.galeri-lightbox__inner{position:relative;z-index:2;margin:0;text-align:center;max-width:min(1100px,92vw)}
.galeri-lightbox:target .galeri-lightbox__inner{animation:galeriFotoIn .28s ease both}
@keyframes galeriFotoIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}
.galeri-lightbox__inner img{max-width:100%;max-height:80vh;width:auto;border-radius:6px;box-shadow:var(--shadow-lg)}
.galeri-lightbox__close{position:absolute;top:18px;right:26px;z-index:3;color:#fff;font-size:2.4rem;line-height:1;
  text-decoration:none;opacity:.85}
.galeri-lightbox__close:hover{opacity:1;color:#fff}
.galeri-lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;color:#fff;
  font-size:3rem;line-height:1;text-decoration:none;opacity:.7;width:54px;height:54px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:rgba(1,20,38,.45);transition:opacity .2s,background .2s}
.galeri-lightbox__nav:hover{opacity:1;color:#fff;background:rgba(1,20,38,.8)}
.galeri-lightbox__prev{left:24px}
.galeri-lightbox__next{right:24px}
.galeri-lightbox__counter{position:absolute;top:22px;left:26px;z-index:3;color:#DCE6F1;
  font-family:var(--font-head);letter-spacing:.5px;font-size:.95rem}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--navy-900);color:#9FB4CC;padding:48px 0 0;font-size:.92rem;overflow:hidden}
.footer-watermark{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-position:center;background-size:cover;background-repeat:no-repeat;
  opacity:.12}
.site-footer>.container{position:relative;z-index:1}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px;padding-bottom:34px}
.site-footer h4{color:#fff;font-size:1.02rem;margin-bottom:14px}
.site-footer a{color:#BFD0E6}
.site-footer a:hover{color:#fff}
.footer-brand{display:flex;gap:14px;align-items:flex-start}
.footer-brand .brand__emblem{width:46px;height:46px;flex:0 0 46px}
.footer-links{list-style:none;margin:0;padding:0}
.footer-links li{margin-bottom:9px}
.review-band{background:rgba(197,161,82,.08);border:1px solid rgba(197,161,82,.4);border-left:4px solid var(--gold);
  border-radius:8px;padding:16px 20px;margin-bottom:22px;color:#D2DEEC;font-size:.92rem;line-height:1.75}
.review-band strong{color:#FFE08A;font-family:var(--font-head);font-weight:600;letter-spacing:.3px}
.review-band em{color:#fff;font-style:normal;font-weight:600}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding:16px 0;display:flex;justify-content:space-between;
  align-items:center;gap:14px;flex-wrap:wrap;font-size:.82rem;color:#7E93AC}
.footer-csr{display:flex;align-items:center;gap:8px;font-family:var(--font-head);letter-spacing:.4px}
.footer-csr .jhg-dot{width:9px;height:9px;border-radius:50%;background:var(--gold)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:980px){
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .grid--3{grid-template-columns:repeat(2,1fr)}
  .video-grid{grid-template-columns:1fr}
  .video-grid--3{grid-template-columns:repeat(2,1fr)}
  .layout{grid-template-columns:1fr}
  /* Sidebar mobile: dua kotak berdampingan + nav 2 kolom supaya tidak memanjang */
  .sidebar{position:static;display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start;margin-top:24px}
  .side-box{margin-bottom:0}
  .side-nav{display:grid;grid-template-columns:1fr 1fr;column-gap:22px}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .main-nav{position:fixed;inset:0 0 0 auto;width:min(86vw,360px);background:#fff;flex-direction:column;
    padding:18px 18px 24px;transform:translateX(100%);transition:.24s;box-shadow:var(--shadow-lg);
    overflow-y:auto;overscroll-behavior:contain}
  .main-nav.open{transform:translateX(0)}
  /* Backdrop: tekan di luar sidebar untuk menutup; di bawah sidebar (z 60) di atas konten */
  .nav-backdrop{position:fixed;inset:0;background:rgba(1,20,38,.45);opacity:0;visibility:hidden;
    transition:opacity .24s;z-index:55}
  .nav-backdrop.open{opacity:1;visibility:visible}
  /* Kunci scroll halaman saat sidebar terbuka agar latar tidak ikut ter-scroll */
  body.nav-open{overflow:hidden}
  .nav-brand{display:flex;align-items:center;gap:11px;padding:4px 46px 16px 6px;margin-bottom:8px;
    border-bottom:1px solid var(--line)}
  .nav-brand img{width:44px;height:44px;flex:0 0 44px;border-radius:6px}
  .nav-brand span{font-family:var(--font-head);font-weight:700;color:var(--navy);font-size:1.02rem;line-height:1.2}
  .main-nav ul{flex-direction:column;width:100%;gap:0}
  .main-nav>ul>li>a{padding:13px 6px;border-bottom:1px solid var(--line)}
  .main-nav .sub-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;
    border-top:0;padding:0 0 6px 12px;min-width:0}
  .nav-toggle{display:block}
  .grid--4,.grid--3,.grid--2,.footer-grid,.video-grid--3{grid-template-columns:1fr}
  .galeri-grid{grid-template-columns:repeat(2,1fr)}
  /* Telepon: kotak sidebar menumpuk, nav tetap 2 kolom agar ringkas */
  .sidebar{grid-template-columns:1fr;gap:16px}
  .section{padding:44px 0}
  /* Lane Turunan: ringkas paragraf agar tidak terlalu panjang (ada tombol "Masuk Lane") */
  .lane .grid{gap:30px}
  .lane h2{margin-bottom:.35em}
  .lane p{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:16px}
}

/* ============================================================
   PROFIL SATUAN — meniru pola tni-au.mil.id (emblem watermark,
   kartu komandan, tab Tugas Pokok/Visi-Misi/Profil/Sejarah/Komandan)
   ============================================================ */
.profil-hero{position:relative;background:var(--navy-900);color:#fff;text-align:center;padding:54px 0 46px;overflow:hidden}
.profil-hero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(900px 300px at 50% 120%,rgba(44,111,181,.35),transparent 60%),
  linear-gradient(180deg,#011d36,#012d50)}
.profil-hero__emblem{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:340px;height:340px;opacity:.10;filter:grayscale(.2)}
.profil-hero__emblem svg{width:100%;height:100%}
.profil-hero .container{position:relative;z-index:2}
.profil-hero h1{color:#fff;letter-spacing:1px;text-transform:uppercase;font-size:clamp(1.5rem,3vw,2.4rem)}
.profil-crumb{background:var(--navy);color:#9FB4CC;font-size:.82rem;border-bottom:1px solid rgba(255,255,255,.08)}
.profil-crumb .container{display:flex;gap:8px;align-items:center;min-height:40px;font-family:var(--font-head);letter-spacing:.4px}
.profil-crumb a{color:#BFD0E6}
.profil-crumb span.sep{opacity:.5}

.komandan-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);max-width:340px;margin:-70px auto 0;position:relative;z-index:5;padding:22px;text-align:center}
.komandan-photo{width:170px;height:210px;margin:0 auto 14px;border-radius:8px;overflow:hidden;
  background:linear-gradient(160deg,var(--navy),var(--steel));display:flex;align-items:flex-end;justify-content:center;border:3px solid var(--gold)}
.komandan-photo svg{width:120px;height:150px;opacity:.6}
.komandan-photo.has-photo{align-items:stretch;background:#0a2540}
.komandan-photo.has-photo img{width:100%;height:100%;object-fit:cover;object-position:center top}
.komandan-card .since{font-family:var(--font-head);color:var(--blue);font-size:.82rem;letter-spacing:.4px;margin:5px 0 0;font-weight:600}
.komandan-card .nm{font-family:var(--font-head);font-weight:700;color:var(--navy);font-size:1.12rem;margin:0}
.komandan-card .rl{color:var(--muted);font-size:.86rem;margin:3px 0 0}
.komandan-card .note{font-size:.78rem;color:var(--warn);margin-top:10px;background:#FFF6E0;border-radius:6px;padding:6px 9px}
/* Mobile: kartu komandan jangan ditarik naik agar tidak menutup judul/hero.
   Harus didefinisikan SETELAH aturan dasar di atas agar tidak kalah urutan. */
@media(max-width:760px){
  .komandan-card{margin-top:18px}
}

/* ============================================================
   SOROTAN DANLANUD (beranda) — kartu potret + blok teks
   ============================================================ */
.danlanud{display:grid;grid-template-columns:340px 1fr;gap:48px;align-items:center}
.danlanud__card{position:relative;background:#FBF7EC;border:1px solid #EBE2C9;border-radius:14px;
  padding:34px 26px 24px;text-align:center;box-shadow:var(--shadow)}
.danlanud__badge{position:absolute;top:-15px;left:50%;transform:translateX(-50%);
  background:var(--navy);color:#fff;font-family:var(--font-head);font-weight:600;
  text-transform:uppercase;letter-spacing:1.5px;font-size:.72rem;
  padding:7px 18px;border-radius:999px;border:2px solid var(--gold);white-space:nowrap}
.danlanud__photo{aspect-ratio:4/5;border-radius:10px;overflow:hidden;margin:0 auto 16px;
  border:3px solid var(--gold);box-shadow:0 0 0 1px rgba(1,45,80,.18),inset 0 0 0 4px rgba(255,255,255,.45);
  background:linear-gradient(160deg,var(--navy),var(--steel));
  display:flex;align-items:center;justify-content:center}
.danlanud__photo img{width:100%;height:100%;object-fit:cover;object-position:center top}
.danlanud__photo .danlanud__emblem{width:55%;height:auto;opacity:.55}
.danlanud__name{font-size:1.18rem;margin:0 0 5px}
.danlanud__meta{color:var(--blue);font-family:var(--font-head);font-weight:600;
  font-size:.86rem;letter-spacing:.3px;margin:0;line-height:1.45}
.danlanud__body{min-width:0}
.danlanud__title{font-size:clamp(1.6rem,2.6vw,2.3rem);margin:0 0 .35em}
.danlanud__body .rule-gold{display:block;margin:0 0 22px}
.danlanud__lead{font-size:1.05rem;color:var(--steel);margin:0 0 14px}
.danlanud__lead strong{color:var(--navy)}
.danlanud__desc{color:var(--muted);margin:0 0 14px}
.danlanud__note{color:var(--muted);font-size:.88rem;font-style:italic;margin:0 0 22px}
@media(max-width:860px){
  .danlanud{grid-template-columns:1fr;gap:34px}
  .danlanud__card{max-width:340px;margin:0 auto}
}

/* Tabs */
.profil-tabs{margin-top:34px}
.tab-nav{display:flex;flex-wrap:wrap;gap:4px;border-bottom:2px solid var(--line);margin-bottom:24px;justify-content:center}
.tab-btn{font-family:var(--font-head);font-weight:600;letter-spacing:.4px;font-size:.95rem;color:var(--steel);
  background:none;border:0;border-bottom:3px solid transparent;padding:11px 16px;cursor:pointer;margin-bottom:-2px;transition:.15s;text-transform:uppercase}
.tab-btn:hover{color:var(--navy)}
.tab-btn.active{color:var(--navy);border-bottom-color:var(--gold)}
.tab-panel{display:none;animation:fade .25s ease}
.tab-panel.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.tab-panel h3{color:var(--navy);font-size:1.15rem;border-left:4px solid var(--gold);padding-left:12px;margin-top:0}

/* Sejarah period blocks */
.periode{display:grid;gap:16px;margin:14px 0}
.periode .blk{background:var(--white);border:1px solid var(--line);border-left:4px solid var(--navy);
  border-radius:0 8px 8px 0;padding:16px 20px;box-shadow:var(--shadow-sm)}
.periode .blk h4{font-family:var(--font-head);color:var(--navy);margin:0 0 6px;font-size:1.02rem}
.periode .blk p{margin:0 0 .5rem;font-size:.95rem;color:var(--steel)}

/* Commander list (kepemimpinan) */
.dan-list{list-style:none;margin:14px 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dan-list li{display:flex;gap:10px;background:var(--white);border:1px solid var(--line);border-radius:7px;padding:9px 13px;font-size:.9rem}
.dan-list li .no{font-family:var(--font-head);font-weight:700;color:var(--gold);min-width:24px}
.dan-list li .nm{color:var(--ink)}
.dan-list li .yr{margin-left:auto;color:var(--muted);font-size:.82rem;white-space:nowrap}
@media(max-width:680px){.dan-list{grid-template-columns:1fr}}
@media(max-width:460px){.galeri-grid{grid-template-columns:1fr}}

.fact-table{width:100%;border-collapse:collapse;margin:8px 0 4px}
.fact-table td{padding:9px 12px;border-bottom:1px solid var(--line);font-size:.94rem;vertical-align:top}
.fact-table td:first-child{font-family:var(--font-head);font-weight:600;color:var(--navy);width:200px}

/* Accordion kategori (mis. halaman Kepemimpinan) — native <details> */
.kpm-accordion{display:grid;gap:14px;margin:6px 0 26px}
.acc{border:1px solid var(--line);border-radius:var(--radius);background:var(--white);
  overflow:hidden;box-shadow:var(--shadow-sm)}
.acc__head{display:flex;align-items:center;gap:12px;cursor:pointer;list-style:none;
  padding:15px 20px;font-family:var(--font-head);font-weight:600;color:var(--navy);
  font-size:1.05rem;line-height:1.3;border-left:4px solid var(--gold);transition:background .15s}
.acc__head::-webkit-details-marker{display:none}
.acc__head::marker{content:""}
.acc__head:hover{background:var(--bg-soft)}
.acc__title{flex:1}
.acc__count{font-family:var(--font-head);font-weight:600;font-size:.72rem;letter-spacing:.4px;
  text-transform:uppercase;color:var(--steel);background:var(--bg-soft);
  border:1px solid var(--line);border-radius:20px;padding:3px 11px;white-space:nowrap}
.acc__icon{flex:0 0 auto;width:10px;height:10px;margin-left:2px;
  border-right:2px solid var(--navy);border-bottom:2px solid var(--navy);
  transform:rotate(45deg);transition:transform .2s}
.acc[open] .acc__head{background:var(--bg-soft);border-bottom:1px solid var(--line)}
.acc[open] .acc__icon{transform:rotate(-135deg)}
.acc__body{padding:18px 20px 22px;animation:fade .25s ease}
.acc__body>*:first-child{margin-top:0}
.kpm-caption{margin-top:18px;color:var(--muted);font-size:.85rem}
@media(max-width:560px){.acc__head{font-size:.98rem;padding:13px 15px}.acc__body{padding:15px 15px 18px}}

/* ============================================================
   SOROTAN DANLANUD (beranda)
   ============================================================ */
.danlanud-feature{background:linear-gradient(180deg,#FFFFFF,#EAF0F6);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.danlanud-grid{display:grid;grid-template-columns:300px 1fr;gap:46px;align-items:center}
.danlanud-portrait{position:relative;background:var(--white);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:16px 16px 0}
.dl-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--navy);color:#fff;
  font-family:var(--font-head);font-weight:600;font-size:.72rem;letter-spacing:1.2px;text-transform:uppercase;
  padding:5px 16px;border-radius:20px;border:2px solid var(--gold);white-space:nowrap}
.dl-img{aspect-ratio:4/5;border-radius:10px;overflow:hidden;border:2px solid var(--gold);
  background:linear-gradient(160deg,var(--navy),var(--steel));display:flex;align-items:flex-end;justify-content:center}
.dl-img img{width:100%;height:100%;object-fit:cover;object-position:center top}
.dl-img svg{width:62%;margin-bottom:-2px}
.dl-plate{padding:14px 4px 18px;text-align:center}
.dl-name{display:block;font-family:var(--font-head);font-weight:700;color:var(--navy);font-size:1.06rem;line-height:1.2}
.dl-since{display:block;color:var(--blue);font-family:var(--font-head);font-size:.82rem;margin-top:4px;letter-spacing:.3px}
.danlanud-text .eyebrow{color:var(--blue)}
.danlanud-text h2{margin:.3rem 0 0}
.danlanud-text .lead{margin-top:.4rem}
@media(max-width:820px){.danlanud-grid{grid-template-columns:1fr;gap:30px}.danlanud-portrait{max-width:300px;margin:0 auto}}

/* small print / accessibility */
.skip-link{position:absolute;left:-999px}
.skip-link:focus{left:10px;top:10px;background:#fff;padding:8px 12px;z-index:200;border-radius:6px}
::selection{background:var(--blue);color:#fff}

/* ============================================================
   NUANSA BALI — ornamen ukiran emas (arahan Komandan David)
   Aksen kearifan lokal Bali; tetap menjaga karakter resmi TNI AU.
   ============================================================ */
:root{ --bali-gold:#C5A152; --bali-gold-2:#E8CE83; }
.danlanud-feature, .site-footer, .hero{ position:relative; }
.danlanud-feature::before, .site-footer::before, .hero::after{
  content:""; position:absolute; left:0; right:0; height:13px; z-index:3; pointer-events:none;
  opacity:.85;
}
.danlanud-feature::before{ top:0; }
.site-footer::before{ top:0; }
.hero::after{ bottom:0; }
.dl-img{
  border:3px double var(--bali-gold) !important;
  outline:1.5px solid rgba(197,161,82,.45); outline-offset:4px;
  box-shadow:0 10px 26px rgba(1,30,55,.22);
}
.danlanud-portrait{
  background:linear-gradient(180deg,#fff,#FBF7EC) !important;
  box-shadow:0 12px 30px rgba(1,30,55,.14), 0 0 0 1px rgba(197,161,82,.30) !important;
}
.rule-gold{ background:linear-gradient(90deg,var(--bali-gold),var(--bali-gold-2)) !important; height:3px; width:64px; }