/* ==========================================================================
   layout.css
   Berisi: Header, Navigasi, Footer, Archive, 404, Single Post Layout
   Urutan load: 2
   ========================================================================== */

/* --------------------------------------------------------------------------
   Header & Navigasi
   -------------------------------------------------------------------------- */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 20px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  /* default untuk pengunjung biasa */
  width: 100%;
  background: var(--bg-page);
  z-index: 9990;
  transition: background var(--ease);
  box-sizing: border-box;
}

/* Offset admin bar WordPress saat login */
@media screen and (min-width: 783px) {
  .admin-bar .site-header {
    top: 32px;
  }
}

@media screen and (max-width: 782px) {
  .admin-bar .site-header {
    top: 46px;
  }
}

body.dark-mode .site-header {
  border-color: #333;
  background: #121212;
}

.site-branding a {
  font-size: 24px;
  font-weight: bold;
  font-family: serif;
  text-transform: uppercase;
  color: #1a1a1a;
}

body.dark-mode .site-branding a {
  color: #e0e0e0;
}

.custom-logo {
  max-width: 150px;
  height: auto;
  display: block;
}

/* Navigasi Utama */
.main-navigation {
  display: flex;
  align-items: center;
}

/* Layer gelap penahan scroll (Overlay) - Menyembunyikan klik dan scroll */
.menu-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.menu-overlay.is-active {
  display: block;
  opacity: 1;
}

/* Kunci body agar tidak bisa discroll saat menu terbuka */
body.menu-open {
  overflow: hidden;
}

/* Container Menu Desktop & Drawer Mobile */
.menu-drawer {
  display: flex;
  align-items: center;
  width: 100%;
}

.main-navigation ul {
  list-style: none;
  display: flex;
  gap: 28px;
  margin: 0;
  padding: 0;
}

/* Hamburger Button Dasar (Disembunyikan di Desktop) */
.menu-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 5px;
  z-index: 1001;
}

.hamburger-box {
  width: 24px;
  height: 18px;
  display: inline-block;
  position: relative;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
  width: 24px;
  height: 2px;
  background-color: var(--text);
  border-radius: 4px;
  position: absolute;
  transition:
    transform 0.15s ease,
    background-color 0.15s ease;
}

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -1px;
}

.hamburger-inner::before {
  content: "";
  top: -8px;
}

.hamburger-inner::after {
  content: "";
  bottom: -8px;
}

/* Animasi Hamburger menjadi 'X' */
.menu-toggle.is-active .hamburger-inner {
  transform: rotate(45deg);
}

.menu-toggle.is-active .hamburger-inner::before {
  top: 0;
  opacity: 0;
}

.menu-toggle.is-active .hamburger-inner::after {
  bottom: 0;
  transform: rotate(-90deg);
}

.main-navigation a {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  text-transform: capitalize;
  padding: 8px 0;
  position: relative;
  transition: color 0.3s ease;
}

.main-navigation a::after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 4px;
  left: 0;
  background: var(--blue);
  transition: width 0.3s ease;
}

.main-navigation a:hover,
.main-navigation li.current-menu-item>a,
.main-navigation li.current_page_item>a {
  color: var(--blue);
}

.main-navigation a:hover::after,
.main-navigation li.current-menu-item>a::after,
.main-navigation li.current_page_item>a::after {
  width: 100%;
}

body.dark-mode .main-navigation a {
  color: #e0e0e0;
}

body.dark-mode .main-navigation a:hover,
body.dark-mode .main-navigation li.current-menu-item>a {
  color: var(--blue-mid);
}

body.dark-mode .main-navigation a::after {
  background: var(--blue-mid);
}

/* Header icons */
.header-icons {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  font-weight: bold;
}

/* Dark mode toggle */
.theme-toggle-btn {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  width: 24px;
  height: 24px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #555;
}

.theme-toggle-btn:hover {
  color: var(--blue);
}

.theme-toggle-btn svg {
  position: absolute;
  transition:
    transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.5s ease;
}

.moon-icon {
  opacity: 1;
  transform: rotate(0deg);
}

.sun-icon {
  opacity: 0;
  transform: rotate(-90deg);
}

body.dark-mode .moon-icon {
  opacity: 0;
  transform: rotate(90deg);
}

body.dark-mode .sun-icon {
  opacity: 1;
  transform: rotate(0deg);
}

body.dark-mode .theme-toggle-btn {
  color: #aaa;
}

body.dark-mode .theme-toggle-btn:hover {
  color: var(--blue-mid);
}

/* Social icons */
.social-icons {
  display: flex;
  gap: 12px;
  align-items: center;
}

.social-icons a {
  color: #555;
  display: flex;
  align-items: center;
  transition: color 0.3s;
}

.social-icons a:hover {
  color: var(--blue);
}

body.dark-mode .social-icons a {
  color: #aaa;
}

body.dark-mode .social-icons a:hover {
  color: var(--blue-mid);
}

/* Search */
.search-container {
  position: relative;
  display: flex;
  align-items: center;
}

#search-toggle {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  color: #555;
  display: flex;
  align-items: center;
}

#search-toggle:hover {
  color: var(--blue);
}

body.dark-mode #search-toggle {
  color: #fff;
}

.search-form {
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transition:
    width 0.3s ease,
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.search-form.active {
  width: 260px;
  /* Diperlebar agar lebih proporsional */
  opacity: 1;
  visibility: visible;
}

.search-field {
  width: 100%;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: 8px;
  /* Sudut melengkung yang lebih modern */
  font-size: 14px;
  outline: none;
  background: #f1f5f9;
  /* Latar abu-abu bersih */
  color: #1e293b;
  transition: all 0.3s ease;
}

.search-close-btn {
  display: none;
  /* Sembunyikan di desktop */
}

/* Efek menyala (fokus) saat mengetik */
.search-field:focus {
  background: #ffffff;
  border-color: var(--blue);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

body.dark-mode .search-field {
  background: #1e293b;
  color: #f8fafc;
  border-color: transparent;
}

body.dark-mode .search-field:focus {
  background: #0f172a;
  border-color: var(--blue-mid);
}

/* --------------------------------------------------------------------------
   Archive & Category Page
   -------------------------------------------------------------------------- */
.archive-header {
  margin: 36px 0;
  border-bottom: 2px solid var(--border);
  padding-bottom: 18px;
}

.archive-title {
  font-size: 30px;
  margin: 0 0 8px;
  font-weight: bold;
}

.archive-description {
  color: #666;
  font-size: 15px;
  line-height: 1.6;
}

.pagination {
  margin: 40px 0;
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
}

.pagination a,
.pagination span {
  padding: 7px 14px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: var(--r-xs);
  font-weight: 600;
  font-size: 13px;
  transition: all 0.3s ease;
}

.pagination a:hover {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}

.pagination .current {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}

body.dark-mode .archive-header {
  border-bottom-color: #333;
}

body.dark-mode .archive-description {
  color: #aaa;
}

body.dark-mode .pagination a,
body.dark-mode .pagination span {
  background: #1e1e1e;
  border-color: #444;
  color: #ccc;
}

body.dark-mode .pagination a:hover,
body.dark-mode .pagination .current {
  background: var(--blue-mid);
  color: #fff;
  border-color: var(--blue-mid);
}

/* --------------------------------------------------------------------------
   404 Error Page
   -------------------------------------------------------------------------- */
.error-404-wrapper {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 20px;
}

.error-404-content {
  max-width: 600px;
}

.error-code {
  font-size: 140px;
  font-weight: 900;
  margin: 0;
  line-height: 1;
  background: linear-gradient(45deg, var(--blue), #00d4ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.85;
}

.page-title {
  font-size: 26px;
  font-weight: bold;
  margin: 18px 0;
}

.page-content p {
  color: #666;
  font-size: 15px;
  margin-bottom: 28px;
}

.btn-home {
  display: inline-block;
  background: var(--blue);
  color: #fff !important;
  padding: 12px 28px;
  border-radius: var(--r-xs);
  font-weight: bold;
  text-transform: uppercase;
  transition:
    background 0.3s,
    transform 0.3s;
  margin-bottom: 36px;
}

.btn-home:hover {
  background: var(--blue-dark);
  transform: translateY(-3px);
}

.search-form-404 p {
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 14px;
}

.search-form-404 form {
  display: flex;
  justify-content: center;
}

.search-form-404 .search-field {
  max-width: 300px;
  position: static;
  opacity: 1;
  visibility: visible;
  width: 100%;
}

body.dark-mode .page-content p {
  color: #aaa;
}

body.dark-mode .error-code {
  background: linear-gradient(45deg, var(--blue-mid), #00d4ff);
  -webkit-background-clip: text;
  background-clip: text;
}

body.dark-mode .btn-home {
  background: var(--blue-mid);
}

/* --------------------------------------------------------------------------
   Single Post — Layout Wrapper
   -------------------------------------------------------------------------- */
.single-layout-wrapper {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 36px;
  margin: 40px auto;
  align-items: stretch;
}

/* --------------------------------------------------------------------------
   Footer Modern & Professional
   -------------------------------------------------------------------------- */
.site-footer {
  background: #ffffff;
  border-top: 1px solid #f1f5f9;
  margin-top: 60px;
  padding: 60px 0 0;
}

body.dark-mode .site-footer {
  background: #0f172a;
  border-top-color: #1e293b;
}

/* --- Perbaikan Jarak Antar Kolom Footer --- */
.footer-widgets {
  display: grid;
  /* Mengatur kolom pertama (deskripsi) agar lebih lebar dan kolom lain tetap proporsional */
  grid-template-columns: 2fr 1fr 1fr;
  /* Menambah jarak horizontal antar kolom menjadi 80px agar tidak menempel */
  column-gap: 80px;
  row-gap: 40px;
  margin-bottom: 50px;
}

/* Memastikan teks deskripsi tidak terlalu lebar ke arah kanan */
.footer-col:first-child {
  max-width: 450px;
}

/* Mengatur Jarak Judul Widget */
.footer-col .widget-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: #1e293b !important;
  margin: 0 0 15px !important;
  /* Jarak bawah judul dikurangi agar lebih rapat */
}

/* --- Perbaikan Jarak Deskripsi Footer --- */

/* 1. Memberi jarak di bawah logo agar tidak menempel dengan teks deskripsi */
.footer-col .wp-block-image,
.footer-col figure,
.footer-col .drawer-logo,
.footer-col .custom-logo-link {
  margin-bottom: 20px !important;
  /* Memberikan ruang 20px di bawah logo */
  display: block;
}

/* 2. Mengatur kolom pertama agar paragraf deskripsi lebih lega */
.footer-col:first-child p {
  margin-top: 10px !important;
  /* Jarak tambahan di atas paragraf pertama */
  line-height: 1.7 !important;
  /* Spasi antar baris yang lebih nyaman dibaca */
}

body.dark-mode .footer-col .widget-title {
  color: #f8fafc !important;
}

/* Mengatur Jarak Teks Deskripsi */
.footer-col p {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: #64748b !important;
  margin-bottom: 0 !important;
}

/* Perbaikan List Link (Tautan & Halaman) */
.footer-col ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.footer-col ul li {
  margin-bottom: 8px !important;
  /* Jarak antar tautan dibuat lebih rapat dan profesional */
}

/* Memastikan Ikon Sosial Media di Footer Tampil Horisontal */
.footer-col ul.wp-block-social-links,
.footer-col .social-icons-wrapper {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  padding: 0 !important;
  align-items: center;
}

.footer-col ul.wp-block-social-links li {
  margin-bottom: 0 !important;
  display: inline-flex !important;
}

.footer-col ul.wp-block-social-links li a,
.footer-col .social-icons-wrapper a {
  transform: none !important;
  /* Mencegah efek geser yang mungkin bertabrakan dengan bawaan wp-block */
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

.footer-col ul li a {
  font-size: 14px !important;
  color: #64748b !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  display: inline-block !important;
}

.footer-col ul li a:hover {
  color: var(--blue) !important;
  transform: translateX(3px);
  /* Efek geser kecil saat hover */
}

body.dark-mode .footer-col ul li a {
  color: #94a3b8 !important;
}

/* Copyright Bar yang Lebih Bersih */
.footer-copy {
  text-align: center;
  font-size: 13px;
  color: #94a3b8;
  padding: 25px 0;
  border-top: 1px solid #f1f5f9;
}

body.dark-mode .footer-copy {
  border-top-color: #1e293b;
  color: #64748b;
}

/* Container Menu & Sosial Desktop */
.menu-drawer {
  display: flex;
  align-items: center;
  width: 100%;
}

.desktop-social-icons {
  display: flex;
}

.mobile-social-icons {
  display: none;
}

/* Disembunyikan di Desktop */

/* Gaya Tombol Hamburger (Rounded) */
.menu-toggle {
  display: none;
  /* Sembunyikan di desktop */
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  /* Membulatkan background tombol */
  transition: background 0.2s ease;
  z-index: 1001;
  /* Selalu di atas drawer */
}

.menu-toggle:hover {
  background: rgba(0, 0, 0, 0.05);
}

body.dark-mode .menu-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Garis Hamburger Animasi */
.hamburger-box {
  width: 22px;
  height: 16px;
  display: inline-block;
  position: relative;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
  width: 22px;
  height: 2px;
  background-color: var(--text);
  border-radius: 4px;
  /* Garisnya dibuat tumpul membulat */
  position: absolute;
  left: 0;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}

.hamburger-inner {
  top: 50%;
  margin-top: -1px;
}

.hamburger-inner::before {
  content: "";
  top: -7px;
}

.hamburger-inner::after {
  content: "";
  bottom: -7px;
}

/* Transisi menjadi "X" saat aktif */
.menu-toggle.is-active .hamburger-inner {
  transform: rotate(45deg);
}

.menu-toggle.is-active .hamburger-inner::before {
  top: 0;
  opacity: 0;
}

.menu-toggle.is-active .hamburger-inner::after {
  bottom: 0;
  transform: rotate(-90deg);
}

/* Sembunyikan elemen mobile drawer dan tombol close search di desktop */
.menu-close-btn,
.search-close-btn {
  display: none !important;
}

.drawer-logo {
  display: none;
  /* Tanpa !important agar bisa muncul di mobile */
}

/* Pastikan ikon sosial desktop tetap tampil */
.desktop-social-icons {
  display: flex !important;
  gap: 12px;
}

/* Paste kode ini di bagian bawah layout.css untuk merapikan footer */
.site-footer {
  background: #ffffff;
  border-top: 1px solid #f1f5f9;
  margin-top: 60px;
  padding: 60px 0 0;
}

.footer-widgets {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  column-gap: 80px;
  margin-bottom: 50px;
}

.footer-col:first-child p {
  margin-top: 10px !important;
  line-height: 1.7 !important;
}

/* Styling Tombol Share di Meta */
.mt-meta-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: var(--blue);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background 0.3s ease;
}

.mt-meta-share-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* Overlay Gelap */
.mt-share-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}

/* Bottom Sheet */
.mt-share-sheet {
  position: fixed;
  bottom: -100%;
  left: 0;
  width: 100%;
  background: #ffffff;
  border-radius: 20px 20px 0 0;
  z-index: 9999;
  padding: 24px;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
  transition: bottom 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Status Aktif Popup */
.mt-share-overlay.is-active {
  opacity: 1;
  visibility: visible;
}

.mt-share-sheet.is-active {
  bottom: 0;
}

/* Header Popup */
.mt-share-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 16px;
}

.mt-share-header h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
}

.mt-close-sheet {
  background: none;
  border: none;
  cursor: pointer;
  color: #64748b;
  padding: 0;
}

/* Body Popup & Ikon */
.mt-share-body {
  display: flex;
  justify-content: space-around;
  padding-bottom: 20px;
}

.share-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  color: #ffffff;
  text-decoration: none;
  transition: transform 0.2s ease;
}

.share-icon.fb {
  background: #1877f2;
}

.share-icon.in {
  background: #0077b5;
}

.share-icon.wa {
  background: #25d366;
}

/* Dark Mode Fix */
body.dark-mode .mt-share-sheet {
  background: #1e293b;
}

body.dark-mode .mt-share-header {
  border-bottom-color: #334155;
}

body.dark-mode .mt-share-header h4 {
  color: #f8fafc;
}

/* Tampilan Default (Desktop) */
.mobile-only-share {
  display: none !important;
  /* Sembunyikan tombol popup di desktop */
}

.desktop-only-share {
  display: block;
  /* Tampilkan sidebar di desktop */
}

/* Tampilan Layar Sedang & Mobile (Max 992px) */
@media (max-width: 992px) {
  .mobile-only-share {
    display: inline-flex !important;
    /* Tampilkan tombol popup di mobile */
  }

  .desktop-only-share {
    display: none !important;
    /* Sembunyikan sidebar di mobile */
  }
}

/* --- Halaman Archive & Category --- */
.archive-main {
  min-height: 60vh;
}

.post-card .read-more {
  margin-top: auto;
  display: inline-block;
}

.archive-no-results {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px 0;
}

/* --- Styling Notifikasi Komentar --- */
.comment-alert {
  padding: 15px;
  border-radius: 6px;
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: bold;
}

.comment-alert-pending {
  background: #eef5ff;
  border: 1px solid #0056b3;
  color: #0056b3;
}

.comment-alert-success {
  background: #eaffee;
  border: 1px solid #28a745;
  color: #155724;
}

/* --- Perbaikan Layout Header Komentar --- */
.cf-heading-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cf-icon {
  vertical-align: middle;
  margin-right: 5px;
  margin-top: -2px;
}

.cf-cancel-reply {
  font-size: 12px;
  font-weight: normal;
}

.footer-col .widget-title {
  font-size: 16px !important;
  margin-bottom: 15px !important;
  border-bottom: 2px solid #0056b3 !important;
  display: inline-block !important;
  padding-bottom: 5px !important;
}

/* Pengaturan Ikon Header & Pencarian */
.search-container {
  position: relative;
}

#search-toggle {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  color: #555;
  /* Warna bisa Anda sesuaikan jika diperlukan */
  display: flex;
  align-items: center;
}

/* Memposisikan panel pencarian agar tidak bertabrakan dengan menu */
.header-icons .search-form {
  right: 0;
}

/* --- Halaman Statis (page.php) --- */
.page-header {
  text-align: left;
  margin-bottom: 30px;
  border-bottom: 2px solid var(--fp-border, #eaeaea);
  padding-bottom: 20px;
}

.page-title {
  font-size: 32px;
  margin-bottom: 15px;
}

.page-thumbnail {
  margin-top: 20px;
  border-radius: 8px;
  overflow: hidden;
}

.page-thumbnail img {
  width: 100%;
  height: auto;
  display: block;
}

.page-content {
  min-height: 50vh;
}

.page-links {
  margin-top: 20px;
  font-weight: bold;
}

.page-comments-area {
  margin-top: 50px;
}

/* --- Halaman Pencarian (search.php) --- */
.search-main {
  min-height: 60vh;
  margin-top: 40px;
  margin-bottom: 40px;
}

.search-header {
  margin-bottom: 40px;
  border-bottom: 1px solid var(--border, #eaeaea);
  padding-bottom: 20px;
}

.search-title {
  font-size: 24px;
  margin: 0;
}

.search-no-results {
  text-align: center;
  padding: 50px 0;
}

.search-no-results .post-title {
  margin-bottom: 15px;
}

.search-no-results .search-form-404 {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

/* --- Meta Artikel di single.php --- */
.flex-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.icon-baseline {
  vertical-align: middle;
  margin-top: -2px;
}

/* --- Tampilan List Artikel di Sidebar --- */
.widget-post-title {
  font-size: 14px;
  margin-bottom: 5px;
}

.widget-post-meta {
  margin: 0;
}

/* ============================================================
   READING PROGRESS BAR
   ============================================================ */
.reading-progress-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  /* Ketebalan garis */
  background: transparent;
  z-index: 99999;
  /* Memastikan selalu berada di atas header */
}

.reading-progress-bar {
  height: 100%;
  background: var(--blue);
  /* Mengikuti warna biru tema */
  width: 0%;
  transition: width 0.1s ease-out;
}

/* Penyesuaian Progress Bar saat Login Admin */
.admin-bar .reading-progress-container {
  top: 32px;
  z-index: 999999;
}

@media screen and (max-width: 782px) {
  .admin-bar .reading-progress-container {
    top: 46px;
  }
}

/* ============================================================
   STYLING META IKON (PENULIS, TANGGAL, WAKTU BACA)
   ============================================================ */
.fp-meta,
.widget-post-meta,
.related-card-4__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  /* Jarak antar elemen meta */
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  /* Jarak antara ikon dan teks */
  color: var(--text-muted, #64748b);
  font-size: 13px;
  font-weight: 500;
}

.meta-item svg {
  color: var(--blue, #2563eb);
  /* Memberikan warna aksen biru pada ikon */
  margin-top: -1px;
  /* Koreksi visual agar ikon presisi di tengah teks */
}

body.dark-mode .meta-item {
  color: #94a3b8;
}

body.dark-mode .meta-item svg {
  color: var(--blue-mid, #60a5fa);
}

/* ============================================================
   FONT RESIZER — DESKTOP SIDEBAR
   Terintegrasi di dalam .sticky-share bersama tombol share
   ============================================================ */

/* Garis pemisah antara share buttons dan font controls */
.sticky-share-divider {
  width: 32px;
  height: 1px;
  background: var(--border, #e2e8f0);
  margin: 6px auto;
}

body.dark-mode .sticky-share-divider {
  background: #334155;
}

/* Tombol A- dan A+ di sidebar desktop */
.font-ctrl-btn {
  background: var(--surface, #ffffff) !important;
  border: 1px solid var(--border, #e2e8f0) !important;
  color: var(--text, #334155) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  font-family: inherit !important;
  letter-spacing: 0.3px;
}

.font-ctrl-btn:hover {
  background: var(--blue, #2563eb) !important;
  color: #ffffff !important;
  border-color: var(--blue, #2563eb) !important;
}

body.dark-mode .font-ctrl-btn {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #cbd5e1 !important;
}

body.dark-mode .font-ctrl-btn:hover {
  background: var(--blue-mid, #60a5fa) !important;
  color: #ffffff !important;
  border-color: var(--blue-mid, #60a5fa) !important;
}

/* ============================================================
   FONT RESIZER — MOBILE FLOATING FAB
   Muncul di pojok kanan bawah, di atas tombol TOC
   ============================================================ */
.font-resizer-fab {
  position: fixed;
  bottom: 145px;
  /* TOC bottom(85) + TOC height(52) + gap(8) = 145px */
  right: 22px;
  /* sama persis dengan .mt-toc-mobile-btn */
  width: 52px;
  /* sama persis dengan .mt-toc-mobile-btn */
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 890;
}

.font-resizer-fab button {
  width: 52px;
  /* sama persis dengan .mt-toc-mobile-btn */
  height: 52px;
  border-radius: 50%;
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  color: var(--blue, #2563eb);
  font-size: 13px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.font-resizer-fab button:hover,
.font-resizer-fab button:active {
  background: var(--blue, #2563eb);
  color: #ffffff;
  border-color: var(--blue, #2563eb);
  transform: scale(1.08);
}

body.dark-mode .font-resizer-fab button {
  background: #1e293b;
  border-color: #334155;
  color: var(--blue-mid, #60a5fa);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

body.dark-mode .font-resizer-fab button:hover,
body.dark-mode .font-resizer-fab button:active {
  background: var(--blue-mid, #60a5fa);
  color: #ffffff;
  border-color: var(--blue-mid, #60a5fa);
}

/* ============================================================
   PERBAIKAN THUMBNAIL ARTIKEL RUSAK / GEPENG
   ============================================================ */

/* 1. Thumbnail di daftar artikel (Homepage, Sidebar, Terkait) */
.fp-hero__thumb img,
.fp-side-card__thumb img,
.fp-card__thumb img,
.fp-cat-featured__thumb img,
.fp-list-card__thumb img,
.related-card-4__thumb img,
.side-post-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* 2. Thumbnail utama di dalam halaman baca artikel */
.single-thumbnail img {
  width: 100% !important;
  height: auto !important;
  max-height: 500px !important;
  object-fit: cover !important;
  object-position: center !important;
}