/*
 * HERO SECTION — PANDUAN EDIT MANUAL
 * Cari komentar "EDIT:" di file ini untuk nemuin bagian yang perlu disesuaikan.
 * Bagian yang bisa diubah:
 * - Ukuran & warna font judul (tidak ada subtitle di management.php)
 * - Alignment teks
 * - Gambar/logo hero (path gambar ada di file PHP halaman masing-masing)
 */


/* ──────────────────────────────────────────────────────────────
   1. HERO — DEPRECATED (HTML dibangun ulang pakai .page-hero)
   Rule-rule di bawah TIDAK AKTIF: management.php sudah tidak
   punya class .banner_man / .huruf_banner / .hero-img di HTML.
   Dipertahankan untuk referensi. Gunakan components/page-hero.css.
────────────────────────────────────────────────────────────── */

section#tentang {
  padding: 0;
  margin: 0;
}

.banner_man {
  width: 100%;
  height: auto;
  min-height: 220px;
  padding-bottom: 0;
  box-sizing: border-box;
}
.banner_man2 {
  width: 100%;
  height: auto;
  min-height: 180px; /* EDIT: tinggi minimum hero (mobile base). Lebih besar = section minimal lebih tinggi. Lebih kecil = section bisa kolaps jika konten sedikit. */
  background: #4d9cd3; /* EDIT: warna background hero */
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 24px 0; /* EDIT: padding vertikal container hero (mobile base). Lebih besar = section lebih tinggi, konten lebih bernafas. Lebih kecil = section lebih rapat. */
}
.banner_man2 .container { width: 100%; }
.banner_man2 .row {
  justify-content: center;
  align-items: center;
}
.huruf_banner { text-align: center; /* EDIT: alignment container teks hero (base mobile) */ }
.huruf_banner h1 {
  font-size: 28px !important; /* EDIT: ukuran font judul hero (base mobile ≤599px). Lebih besar = judul lebih dominan tapi bisa overflow ke gambar/wrap ke banyak baris. Lebih kecil = judul kurang menonjol tapi lebih aman dari overflow. */
  font-weight: 800;
  line-height: 1.25;
  text-align: center !important; /* EDIT: alignment judul hero (base mobile) */
  /* EDIT: warna font judul hero — diatur di components/banner-hero.css */
}
@media (min-width: 600px) {
  .banner_man   { min-height: 260px; }
  .banner_man2  { min-height: 220px; padding: 32px 0; /* EDIT: padding vertikal hero (≥600px). Lebih besar = section lebih tinggi. Lebih kecil = section lebih rapat. */ }
  /* EDIT: ukuran font judul hero (≥600px). Lebih besar = judul lebih dominan tapi bisa overflow/wrap. Lebih kecil = kurang menonjol. */
  .huruf_banner h1 { font-size: 30px !important; }
}
@media (min-width: 768px) {
  .banner_man   { min-height: 320px; }
  .banner_man2  { min-height: 280px; padding: 40px 0; /* EDIT: padding vertikal hero (≥768px). Lebih besar = section lebih tinggi. Lebih kecil = section lebih rapat. */ }
  /* EDIT: ukuran font judul hero (≥768px). Lebih besar = judul lebih dominan tapi bisa overflow/wrap. Lebih kecil = kurang menonjol. */
  .huruf_banner h1 { font-size: 38px !important; }
  .huruf_banner { text-align: left; /* EDIT: alignment teks hero beralih ke kiri di ≥768px */ }
}
@media (min-width: 992px) {
  .banner_man   { height: 560px; min-height: unset; padding-bottom: 50px; }
  .banner_man2  { height: 520px; min-height: unset; padding: 0; }
  /* EDIT: ukuran font judul hero (desktop ≥992px). Lebih besar = judul lebih dominan tapi bisa overflow ke gambar/wrap. Lebih kecil = judul kurang menonjol. */
  .huruf_banner h1 { font-size: 60px !important; }
}

/* EDIT: gambar/logo hero — path gambar ada di management.php baris ~29:
 *   <img src="assets/img/hero-image-jumbroton-about.png" ...>
 *   Untuk mengganti gambar: ubah nilai src di management.php.
 *   Ukuran gambar diatur di components/banner-hero.css (mobile: width:100%, desktop: posisi absolut kanan lebar 42%).
 *   Lebih besar (width di banner-hero.css) = gambar lebih dominan tapi bisa overflow keluar section atau menutupi teks. Lebih kecil = gambar kurang terlihat. */


/*
   2. SHARED UTILITIES
 */
.man-title {
  color: #22313f;
  font-family: Tahoma, sans-serif;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 28px;
}
@media (min-width: 768px) { .man-title { font-size: 36px; margin-bottom: 36px; } }
@media (min-width: 992px) { .man-title { font-size: 48px; } }


/* 
   3. SEJARAH PERUSAHAAN
 */
.man-history {
  background: #fff;
  border-bottom: 1px solid #c3e0f1;
}
.man-history__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 16px;
  box-sizing: border-box;
}

/* Mobile: horizontal scrolling tab strip */
.man-history__layout { display: block; }

.man-history__tabs {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-bottom: 2px solid #c3e0f1;
  margin-bottom: 24px;
  list-style: none;
  padding: 0;
}
.man-history__tabs::-webkit-scrollbar { display: none; }

.man-history__tab {
  flex-shrink: 0;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  padding: 10px 18px;
  font-size: 15px;
  font-weight: 700;
  color: #888;
  cursor: pointer;
  transition: color .2s, border-color .2s;
  white-space: nowrap;
}
.man-history__tab:hover  { color: #0d3f71; }
.man-history__tab.is-active { color: #0d3f71; border-bottom-color: #0d3f71; }

.man-history__body { width: 100%; }

.man-history__pane        { display: none; }
.man-history__pane.is-active { display: block; }

.man-history__year {
  font-size: 40px;
  font-weight: 800;
  color: #0d3f71;
  line-height: 1;
  margin: 0 0 16px;
  font-family: Arial, sans-serif;
}
.man-history__text {
  font-size: 15px;
  line-height: 1.8;
  color: #444;
  margin: 0;
}

/* Desktop: vertical nav left, content right */
.man-history__img-wrap { display: none; }

@media (min-width: 768px) {
  .man-history__inner { padding: 56px 40px; }
  .man-history__tab { font-size: 17px; padding: 12px 22px; }
  .man-history__year { font-size: 52px; }
}

@media (min-width: 992px) {
  .man-history__inner { padding: 64px 48px; }
  .man-history__layout  { display: flex; align-items: flex-start; }
  .man-history__tabs {
    flex-direction: column;
    overflow: visible;
    border-bottom: none;
    border-right: 2px solid #c3e0f1;
    margin-bottom: 0;
    margin-right: 56px;
    flex-shrink: 0;
    min-width: 110px;
  }
  .man-history__tab {
    border-bottom: none;
    border-right: 3px solid transparent;
    margin-bottom: 0;
    margin-right: -2px;
    text-align: right;
    padding: 14px 24px;
    font-size: 18px;
  }
  .man-history__tab.is-active {
    border-bottom-color: transparent;
    border-right-color: #0d3f71;
  }
  .man-history__body {
    flex: 1;
    display: flex;
    gap: 40px;
    align-items: flex-start;
  }
  .man-history__pane.is-active {
    display: flex;
    flex: 1;
    flex-direction: column;
  }
  .man-history__img-wrap {
    display: block;
    width: 340px;
    flex-shrink: 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(13,63,113,.12);
  }
  .man-history__img-wrap img { width: 100%; height: auto; display: block; }
  .man-history__year { font-size: 64px; }
}

@media (min-width: 1200px) {
  .man-history__inner { padding: 72px 80px; }
  .man-history__img-wrap { width: 400px; }
}


/* 
   4. PEMEGANG SAHAM
   Inner .section-about-page-shareholders kept for tree-diagram
   styles in main.css; its padding reset via inline style in HTML.
 */
.man-shareholders {
  background: #fff;
  border-bottom: 1px solid #c3e0f1;
}
.man-shareholders__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 16px;
  box-sizing: border-box;
}
.man-shareholders__chart {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Connector chart: bracket merge ke logo ──────────────────
   main.css memposisikan garis-garis dengan angka absolut hasil
   kalibrasi layout lama (bottom:158px, left:84.16px, margin-left:185px,
   garis tengah 36px vs jarak logo 120px) — meleset di layout ini.
   Dibangun ulang di sini secara geometris:

   [Box 1]      [Box 2]
      |            |
      |____________|
            |
         [Logo]

   Tiap .level-1::after menggambar garis turun + SETENGAH garis
   horizontal (bentuk L). Kedua box flex: 1 1 0 (lebar identik) dan
   di-center, jadi kedua setengah garis selalu bertemu tepat di tengah
   gap = tengah container — presisi di semua lebar layar tanpa angka
   magic. Garis tengah (.level-2::before) turun setinggi --sh-stem;
   margin-top logo = --sh-drop + --sh-stem sehingga ujungnya selalu
   tepat menyentuh garis horizontal.

   Specificity: prefix .man-shareholders (+1 class) mengalahkan semua
   rule main.css termasuk media query 428px/360px-nya. */

.man-shareholders .section-about-page-shareholders .shareholders-chart-box {
  --sh-line: 2px dashed #3696d1;
  --sh-gap: 40px;   /* jarak antar box level-1 */
  --sh-drop: 32px;  /* box → garis horizontal */
  --sh-stem: 40px;  /* garis horizontal → logo */
  max-width: 586px;
  margin: 0 auto;
}

/* Dua box selalu sejajar (row) di semua lebar layar */
.man-shareholders .section-about-page-shareholders .shareholders-chart-box .level-1-box {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
  gap: var(--sh-gap);
  width: auto;
  margin: 0;
  padding: 0;
  top: auto;
}

.man-shareholders .section-about-page-shareholders .shareholders-chart-box .level-1-box .level-1 {
  flex: 1 1 0;      /* lebar identik → titik temu bracket = tengah */
  max-width: 150px;
  width: auto;
  margin: 0;
  position: relative;
  box-sizing: border-box;
  border: 1px solid #5eabda; /* main.css 360px menghapus border */
  border-radius: 8px;
}

.man-shareholders .section-about-page-shareholders .shareholders-chart-box .level-1 .information-box {
  width: 100%;
  height: auto;
  padding: 8px 0;
}

.man-shareholders .section-about-page-shareholders .shareholders-chart-box .information-logo {
  max-width: 100%;
}

/* Garis turun box kiri + setengah kiri garis horizontal */
.man-shareholders .section-about-page-shareholders .shareholders-chart-box .level-1-box .level-1::after {
  content: "";
  position: absolute;
  top: 100%;
  bottom: auto;
  left: 50%;
  right: auto;
  width: calc(50% + var(--sh-gap) / 2);
  height: var(--sh-drop);
  border: none;
  border-left: var(--sh-line);
  border-bottom: var(--sh-line);
  border-radius: 0 0 0 10px;
}

/* Mirror: garis turun box kanan + setengah kanan garis horizontal */
.man-shareholders .section-about-page-shareholders .shareholders-chart-box .level-1-box .level-1:last-child::after {
  left: auto;
  right: 50%;
  border: none;
  border-right: var(--sh-line);
  border-bottom: var(--sh-line);
  border-radius: 0 0 10px 0;
}

/* Matikan garis horizontal lama main.css (posisi magic-number) */
.man-shareholders .section-about-page-shareholders .shareholders-chart-box .level-2-box::before {
  content: none;
}

.man-shareholders .section-about-page-shareholders .shareholders-chart-box .level-2-box {
  display: flex;
  justify-content: center;
  list-style: none;
  margin: calc(var(--sh-drop) + var(--sh-stem)) 0 0;
  padding: 0;
}

.man-shareholders .section-about-page-shareholders .shareholders-chart-box .level-2-box .level-2 {
  width: auto;
  margin: 0;
  position: relative;
  left: auto;
  top: auto;
}

/* Garis tengah: dari titik tengah garis horizontal turun ke logo */
.man-shareholders .section-about-page-shareholders .shareholders-chart-box .level-2-box .level-2::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(-1 * var(--sh-stem));
  width: 0;
  height: var(--sh-stem);
  margin-left: -1px; /* kompensasi tebal border agar tepat di tengah */
  border-left: var(--sh-line);
}

.man-shareholders .section-about-page-shareholders .shareholders-chart-box .shareholders-chart-information {
  margin: 32px 0 0;
  padding: 0;
  width: auto;
  height: auto;
  font-size: 14px;
  line-height: 22px;
  justify-content: center;
}

@media (min-width: 768px) {
  .man-shareholders__inner {
    display: flex;
    align-items: center;
    gap: 48px;
    padding: 56px 40px;
  }
  .man-shareholders__heading { flex-shrink: 0; }
  .man-shareholders__chart   { flex: 1; }
  /* Tablet+: gap antar box lebih lega, geometri bracket ikut otomatis */
  .man-shareholders .section-about-page-shareholders .shareholders-chart-box {
    --sh-gap: 72px;
  }
}

@media (min-width: 992px) {
  .man-shareholders__inner { padding: 72px 48px; }
}


/* 
   5. BUDAYA PERUSAHAAN
*/
.man-culture {
  background: #fff;
  border-bottom: 1px solid #c3e0f1;
}
.man-culture__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 16px;
  box-sizing: border-box;
}
.man-culture__layout { display: block; }

/* Accordion — ensure it fills its container cleanly */
.man-culture .accordion-flush .accordion-item {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border-left: none;
  border-right: none;
}
.man-culture .accordion-header {
  width: 100%;
  box-sizing: border-box;
}
.man-culture .accordion-button {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  white-space: normal;
  word-break: break-word;
  font-size: 16px;
  font-weight: 800;
  padding: 14px 16px;
}
.man-culture .accordion-body {
  font-size: 14px;
  line-height: 1.75;
  color: #555;
  word-break: break-word;
  box-sizing: border-box;
  padding: 12px 20px 20px;
}

/* Desktop image — hidden on mobile */
.man-culture__img-wrap { display: none; }

@media (min-width: 768px) {
  .man-culture__inner { padding: 56px 40px; }
  .man-culture .accordion-button { font-size: 17px; }
}

@media (min-width: 992px) {
  .man-culture__inner   { padding: 64px 48px; }
  .man-culture__layout  { display: flex; gap: 48px; align-items: flex-start; }
  .man-culture__acc-wrap { flex: 0 0 55%; }
  .man-culture__img-wrap {
    display: flex;
    flex: 1;
    align-items: flex-start;
    justify-content: center;
  }
  .man-culture__img-wrap img {
    width: 100%;
    max-width: 440px;
    height: auto;
    object-fit: contain;
  }
}

@media (min-width: 1200px) {
  .man-culture__inner { padding: 72px 80px; }
}


/*
   6. VISI & MISI
*/
.man-vision { background: #f0f8fd; }
.man-vision__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 16px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.man-vision__block-title {
  font-family: Tahoma, sans-serif;
  font-size: 26px;
  font-weight: 800;
  color: #22313f;
  margin: 0 0 18px;
  line-height: 1.2;
}

.man-vision__visi-card {
  background: #0d3f71;
  border-radius: 12px;
  padding: 24px 20px 28px;
}
.man-vision__quote {
  font-size: 64px;
  line-height: 1;
  font-family: Georgia, serif;
  color: rgba(255,255,255,.25);
  display: block;
  margin-bottom: -10px;
}
.man-vision__visi-text {
  font-size: 15px;
  line-height: 1.75;
  color: #fff;
  margin: 0;
  font-family: Tahoma, sans-serif;
}

.man-vision__misi-list {
  padding-left: 20px;
  margin: 4px 0 0;
}
.man-vision__misi-list li {
  font-size: 14px;
  line-height: 1.8;
  color: #333;
  margin-bottom: 12px;
}

@media (min-width: 600px) {
  .man-vision__block-title { font-size: 30px; }
  .man-vision__visi-text   { font-size: 16px; }
  .man-vision__misi-list li { font-size: 15px; }
}

@media (min-width: 768px) {
  .man-vision__inner {
    flex-direction: row;
    align-items: flex-start;
    gap: 48px;
    padding: 56px 40px;
  }
  .man-vision__visi { flex: 1; }
  .man-vision__misi { flex: 1; padding-top: 0; }
  .man-vision__block-title { font-size: 34px; }
  .man-vision__visi-card   { padding: 28px 24px 32px; }
  .man-vision__visi-text   { font-size: 17px; }
}

@media (min-width: 992px) {
  .man-vision__inner { padding: 64px 48px; gap: 56px; }
  .man-vision__block-title { font-size: 40px; }
  .man-vision__visi-text   { font-size: 18px; }
  .man-vision__quote       { font-size: 80px; }
}

@media (min-width: 1200px) {
  .man-vision__inner { padding: 72px 80px; }
}


/*
   7. MANAGEMENT BOARD (Direksi & Komisaris)
 */
.man-board { background: #fff; }
.man-board--komisaris { border-top: 1px solid #eef3f7; }

.man-board__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 16px;
  box-sizing: border-box;
}

.man-board__heading {
  font-size: 28px;
  font-weight: 800;
  font-family: Arial, sans-serif;
  color: #1e333e;
  margin: 0 0 4px;
  line-height: 1.1;
}
.man-board__sub {
  font-size: 18px;
  font-weight: 700;
  font-family: Arial, sans-serif;
  color: #1e333e;
  margin: 0 0 24px;
}

/* Grid: 2 columns on mobile */
.man-board__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 12px;
}

.man-board__card { text-align: center; }

.man-board__photo-link {
  display: block;
  overflow: hidden;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
}
.man-board__photo-link img {
  width: 100%;
  display: block;
  transition: transform .35s ease, filter .35s ease;
}
.man-board__photo-link::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(13,63,113,0);
  transition: background .35s ease;
}
.man-board__photo-link:hover img {
  transform: scale(1.05);
  filter: brightness(.88);
}
.man-board__photo-link:hover::after {
  background: rgba(13,63,113,.18);
}

.man-board__name {
  font-size: 12px;
  font-weight: 900;
  font-family: Arial, sans-serif;
  color: #1e333e;
  margin: 8px 0 2px;
  line-height: 1.3;
}
.man-board__role {
  font-size: 11px;
  font-weight: 500;
  font-family: Arial, sans-serif;
  color: #666;
  margin: 0 0 6px;
}

@media (min-width: 480px) {
  .man-board__name { font-size: 13px; }
  .man-board__role { font-size: 11px; }
}

@media (min-width: 600px) {
  .man-board__grid { gap: 20px 16px; }
  .man-board__name { font-size: 14px; }
  .man-board__role { font-size: 12px; }
}

@media (min-width: 768px) {
  .man-board__inner   { padding: 48px 32px; }
  .man-board__heading { font-size: 40px; }
  .man-board__sub     { font-size: 24px; margin-bottom: 28px; }
  .man-board__grid    { grid-template-columns: repeat(3, 1fr); gap: 24px 20px; }
  .man-board__name    { font-size: 16px; }
  .man-board__role    { font-size: 13px; }
}

@media (min-width: 992px) {
  .man-board__inner   { padding: 56px 48px; }
  .man-board__heading { font-size: 48px; }
  .man-board__sub     { font-size: 28px; }
  .man-board__grid    { gap: 28px 24px; }
}

@media (min-width: 1200px) {
  .man-board__inner   { padding: 56px 80px; }
  .man-board__heading { font-size: 50px; }
}

/* 
   8. MANAGEMENT DETAIL MODAL
   (dipindah dari inline <style> di management.php ke sini)
 */
#managementDetailModal .modal-content {
  border: none;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.mgmt-modal-body {
  display: flex;
  min-height: 420px;
  padding: 0;
}
.mgmt-modal-photo {
  flex: 0 0 42%;
  max-width: 42%;
  background: #e8f0f7;
  overflow: hidden;
}
.mgmt-modal-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.mgmt-modal-info {
  flex: 1;
  padding: 44px 36px;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
.mgmt-modal-accent {
  width: 48px;
  height: 4px;
  background: linear-gradient(90deg, #0d3f71, #4d9cd3);
  border-radius: 2px;
  margin-bottom: 20px;
}
.mgmt-modal-badge {
  display: inline-block;
  background: #e8f4fc;
  color: #0d3f71;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 14px;
}
.mgmt-modal-name {
  font-size: 24px;
  font-weight: 800;
  color: #1e333e;
  margin-bottom: 6px;
  line-height: 1.25;
}
.mgmt-modal-position {
  font-size: 14px;
  font-weight: 600;
  color: #4d9cd3;
  margin-bottom: 20px;
  letter-spacing: .3px;
}
.mgmt-modal-divider {
  width: 100%;
  height: 1px;
  background: #f0f0f0;
  margin-bottom: 18px;
}
.mgmt-modal-desc {
  font-size: 14px;
  color: #555;
  line-height: 1.7;
  margin: 0;
}
.mgmt-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,.07);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  color: #555;
  transition: background .2s;
  z-index: 10;
}
.mgmt-modal-close:hover {
  background: rgba(0,0,0,.15);
  color: #1e333e;
}
@media (max-width: 600px) {
  .mgmt-modal-body { flex-direction: column; min-height: unset; }
  .mgmt-modal-photo { flex: none; max-width: 100%; width: 100%; height: 260px; }
  .mgmt-modal-info { padding: 28px 24px; }
  .mgmt-modal-name { font-size: 20px; }
}