/* =========================================
   OW POST / PAGE STYLE
   Styling modern untuk halaman artikel & page,
   konsisten dengan warna header (teal + ink).
   Menyasar class standar Kadence/WordPress
   (entry-title, entry-meta, entry-content, dst).
========================================== */

:root {
  --ow-post-ink: #172B3A;
  --ow-post-ink-soft: #3C4E5C;
  --ow-post-teal: #00AEA5;
  --ow-post-teal-dark: #008F88;
  --ow-post-paper: #F5F7F7;
  --ow-post-line: rgba(23,43,58,.10);
}


/* =========================================
   HERO ARTIKEL — gambar 275px + judul overlay
   (markup disuntik lewat filter the_content
   di functions.php, khusus post type 'post')
========================================== */

.ow-post-hero {
  position: relative;

  /*
    Header custom (logo/search/menu) posisinya "melayang"
    di atas konten (position:absolute), tingginya kira-kira
    92px di desktop dan 76px di mobile (lihat .ow-header di
    ow-header.css). Kasih margin-top sebesar itu supaya hero
    SELALU mulai di bawah header, tidak pernah numpuk —
    berapa pun tinggi kotak judulnya.
  */
  margin-top: 92px;

  height: 425px;

  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2.2em;

  border-radius: 18px;
  overflow: hidden;

  background-color: var(--ow-post-ink);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  box-shadow: 0 18px 45px rgba(23,43,58,.16);
}

.ow-post-hero-overlay {
  position: absolute;

  left: 24px;
  right: 24px;
  bottom: 24px;

  max-width: 760px;

  padding: 18px 24px;

  border-radius: 14px;

  background: rgba(10,25,35,.55);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  color: #fff;
}

.ow-post-hero-title {
  margin: 0 0 12px;

  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 750;
  letter-spacing: -.03em;
  line-height: 1.18;

  font-size: clamp(20px, 2.6vw, 30px);

  color: #fff !important;
}

.ow-post-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;

  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,.85);
}

.ow-post-hero-cat {
  display: inline-block;

  padding: 4px 12px;
  border-radius: 999px;

  background: var(--ow-post-teal);
  color: #fff !important;

  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none !important;
}

.ow-post-hero-date {
  opacity: .9;
}

.ow-post-hero-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;

  font-size: 12px;
  color: rgba(255,255,255,.75);
}

.ow-post-hero-breadcrumb a {
  color: rgba(255,255,255,.85);
  text-decoration: none;
}

.ow-post-hero-breadcrumb a:hover {
  color: #fff;
  text-decoration: underline;
}

@media (max-width: 640px) {

  .ow-post-hero {
    /* Header di mobile tingginya 76px (lihat @media 900px di ow-header.css) */
    margin-top: 76px;

    /*
      Dibuat lebih tinggi dari desktop (bukan lebih pendek),
      karena di layar sempit judul + meta butuh lebih banyak
      baris vertikal supaya tetap muat rapi di dalam kotak.
    */
    height: 300px;
  }

  .ow-post-hero-overlay {
    left: 14px;
    right: 14px;
    bottom: 14px;

    max-width: none;

    padding: 14px 16px;
  }

  .ow-post-hero-title {
    /* Maksimal 3 baris, dikecilkan supaya muat */
    font-size: clamp(16px, 4.6vw, 20px);

    margin-bottom: 8px;

    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .ow-post-hero-meta {
    gap: 8px;
    font-size: 11px;
  }

  .ow-post-hero-cat {
    padding: 3px 10px;
    font-size: 9px;
  }

  /*
    Breadcrumb disembunyikan di mobile — di layar sempit dia
    cuma mengulang info yang sudah ada di judul & kategori,
    dan paling gampang bikin kotak jadi kepanjangan.
  */
  .ow-post-hero-breadcrumb {
    display: none;
  }

}


/* =========================================
   LEBAR KONTEN — diperlebar, padding kiri-kanan 100px
   -------------------------------------------------
   Kadence biasanya membatasi lebar konten lewat
   pembungkus tertentu (.entry-content-wrap /
   .content-area / .site-main dengan max-width sendiri).
   Di bawah ini kita lepas batas itu KHUSUS di single
   post, lalu terapkan lebar penuh dengan padding 100px
   di kiri-kanan supaya lebar hero & lebar teks sama.

   Kalau di situsmu lebarnya masih belum pas sepenuhnya
   (ada pembungkus lain dengan max-width sendiri), cek
   lewat Inspect Element elemen pembungkus artikel, lalu
   kirim nama class-nya supaya selector ini ditambah.
========================================== */

.single-post .site-main,
.single-post .content-area,
.single-post .entry-content-wrap,
.single-post article,
.single-post .site-container,
.single-post .content-container {
  max-width: none !important;
}

.single-post .entry-content,
.single-post .ow-post-hero {
  width: auto !important;
  max-width: none !important;

  margin-left: 0 !important;
  margin-right: 0 !important;

  padding-left: 100px !important;
  padding-right: 100px !important;

  box-sizing: border-box;
}

@media (max-width: 900px) {

  .single-post .entry-content,
  .single-post .ow-post-hero {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

}

/* Mobile view (HP): padding kiri-kanan dipersempit lagi jadi 6px */
@media (max-width: 640px) {

  .single-post .entry-content,
  .single-post .ow-post-hero {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }

}


/* =========================================
   FEATURED IMAGE
========================================== */

.single .post-thumbnail,
.page .post-thumbnail,
article .post-thumbnail {
  margin-bottom: 2.4em;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 45px rgba(23,43,58,.14);
}

.single .post-thumbnail img,
.page .post-thumbnail img,
article .post-thumbnail img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  transition: transform .6s cubic-bezier(.22,1,.36,1);
}

.single .post-thumbnail:hover img {
  transform: scale(1.02);
}


/* =========================================
   ENTRY HEADER / TITLE
========================================== */

.single .entry-header,
.page .entry-header {
  margin-bottom: 1.6em;
}

.single .entry-title,
.page .entry-title {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 750;
  letter-spacing: -.03em;
  line-height: 1.12;
  color: var(--ow-post-ink);
  font-size: clamp(28px, 4.2vw, 48px);
}


/* =========================================
   META INFO (kategori, tanggal, penulis)
========================================== */

.single .entry-meta,
.page .entry-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;

  margin-bottom: 1.2em;

  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .02em;
  color: var(--ow-post-ink-soft);
}

.entry-meta .cat-links a,
.entry-meta .meta-category a {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;

  background: var(--ow-post-teal);
  color: #fff !important;

  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none !important;

  transition: background .25s ease;
}

.entry-meta .cat-links a:hover,
.entry-meta .meta-category a:hover {
  background: var(--ow-post-teal-dark);
}

.entry-meta .posted-on,
.entry-meta .byline,
.entry-meta time {
  color: var(--ow-post-ink-soft);
}

.entry-meta a {
  color: var(--ow-post-ink-soft);
  text-decoration: none;
}

.entry-meta a:hover {
  color: var(--ow-post-teal-dark);
}


/* =========================================
   ENTRY CONTENT — TIPOGRAFI DASAR
========================================== */

.single .entry-content,
.page .entry-content {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 18px;
  line-height: 1.85;
  color: var(--ow-post-ink-soft);
}

.single .entry-content p,
.page .entry-content p {
  margin-bottom: 1.4em;
}

.single .entry-content strong,
.page .entry-content strong,
.single .entry-content b,
.page .entry-content b {
  color: var(--ow-post-ink);
  font-weight: 700;
}

.single .entry-content em,
.page .entry-content em,
.single .entry-content i,
.page .entry-content i {
  color: var(--ow-post-ink);
}


/* =========================================
   HEADING DI DALAM KONTEN
========================================== */

.single .entry-content h2,
.page .entry-content h2,
.single .entry-content h3,
.page .entry-content h3,
.single .entry-content h4,
.page .entry-content h4 {
  position: relative;

  margin-top: 1.9em;
  margin-bottom: .75em;

  padding-left: 18px;

  font-weight: 750;
  letter-spacing: -.02em;
  line-height: 1.25;
  color: var(--ow-post-ink);
}

.single .entry-content h2,
.page .entry-content h2 {
  font-size: clamp(24px, 2.6vw, 32px);
}

.single .entry-content h3,
.page .entry-content h3 {
  font-size: clamp(20px, 2.2vw, 25px);
}

.single .entry-content h4,
.page .entry-content h4 {
  font-size: 18px;
}

.single .entry-content h2::before,
.page .entry-content h2::before,
.single .entry-content h3::before,
.page .entry-content h3::before,
.single .entry-content h4::before,
.page .entry-content h4::before {
  content: "";

  position: absolute;
  left: 0;
  top: .18em;

  width: 4px;
  height: 1.1em;

  border-radius: 3px;

  background: var(--ow-post-teal);
}


/* =========================================
   LINK
========================================== */

.single .entry-content a,
.page .entry-content a {
  color: var(--ow-post-teal-dark);
  text-decoration: underline;
  text-decoration-color: rgba(0,174,165,.35);
  text-underline-offset: 3px;

  transition: color .2s ease, text-decoration-color .2s ease;
}

.single .entry-content a:hover,
.page .entry-content a:hover {
  color: var(--ow-post-ink);
  text-decoration-color: var(--ow-post-teal);
}


/* =========================================
   BLOCKQUOTE
========================================== */

.single .entry-content blockquote,
.page .entry-content blockquote {
  position: relative;

  margin: 2em 0;
  padding: 1.4em 1.8em 1.4em 2.2em;

  border-left: 4px solid var(--ow-post-teal);
  border-radius: 10px;

  background: var(--ow-post-paper);

  font-size: 1.08em;
  font-style: italic;
  color: var(--ow-post-ink);
}

.single .entry-content blockquote p:last-child,
.page .entry-content blockquote p:last-child {
  margin-bottom: 0;
}

.single .entry-content blockquote::before,
.page .entry-content blockquote::before {
  content: "\201C";

  position: absolute;
  left: 14px;
  top: 2px;

  font-size: 42px;
  font-style: normal;
  font-weight: 800;
  line-height: 1;

  color: rgba(0,174,165,.35);
}


/* =========================================
   LIST
========================================== */

.single .entry-content ul,
.page .entry-content ul,
.single .entry-content ol,
.page .entry-content ol {
  margin: 0 0 1.4em;
  padding-left: 1.4em;
}

.single .entry-content ul li,
.page .entry-content ul li {
  margin-bottom: .5em;
  padding-left: .3em;
}

.single .entry-content ul li::marker,
.page .entry-content ul li::marker {
  color: var(--ow-post-teal);
}

.single .entry-content ol li::marker,
.page .entry-content ol li::marker {
  color: var(--ow-post-teal-dark);
  font-weight: 700;
}


/* =========================================
   GAMBAR & CAPTION DI DALAM KONTEN
========================================== */

/*
  PENTING: sengaja TIDAK menyasar ".entry-content img" secara umum.
  Kalau semua <img> di dalam konten dipaksa height:auto, gambar
  hero/cover/section yang sudah diatur proporsinya lewat Kadence
  (object-fit: cover, tinggi tetap, dsb.) jadi ikut rusak/gepeng.

  Jadi di sini kita HANYA menyasar gambar konten "polos" — yang
  ditaruh langsung sebagai paragraf gambar / blok gambar Gutenberg
  biasa (wp-block-image) — bukan gambar di dalam blok cover/hero,
  gallery custom, atau elemen Kadence lain yang punya class sendiri.
*/

.single .entry-content > p > img,
.page .entry-content > p > img,
.single .entry-content > figure.wp-block-image img,
.page .entry-content > figure.wp-block-image img,
.single .entry-content .wp-block-image > img,
.page .entry-content .wp-block-image > img {
  display: block;
  margin: 1.8em auto;

  max-width: 100%;
  height: auto;

  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(23,43,58,.12);
}

.single .entry-content > figure,
.page .entry-content > figure,
.single .entry-content .wp-block-image,
.page .entry-content .wp-block-image {
  margin: 1.8em 0;
}

.single .entry-content figcaption,
.page .entry-content figcaption,
.single .entry-content .wp-caption-text,
.page .entry-content .wp-caption-text {
  margin-top: .6em;

  text-align: center;

  font-size: 13px;
  font-style: italic;
  color: var(--ow-post-ink-soft);
  opacity: .8;
}


/* =========================================
   TABEL
========================================== */

.single .entry-content table,
.page .entry-content table {
  width: 100%;
  margin: 1.8em 0;

  border-collapse: collapse;
  overflow: hidden;

  border-radius: 12px;
  border: 1px solid var(--ow-post-line);

  font-size: 15px;
}

.single .entry-content th,
.page .entry-content th {
  padding: 12px 16px;

  background: var(--ow-post-ink);
  color: #fff;

  font-weight: 700;
  text-align: left;
}

.single .entry-content td,
.page .entry-content td {
  padding: 12px 16px;
  border-top: 1px solid var(--ow-post-line);
}

.single .entry-content tr:nth-child(even) td,
.page .entry-content tr:nth-child(even) td {
  background: var(--ow-post-paper);
}


/* =========================================
   CODE / PRE
========================================== */

.single .entry-content code,
.page .entry-content code {
  padding: .2em .45em;
  border-radius: 5px;

  background: var(--ow-post-paper);
  color: var(--ow-post-teal-dark);

  font-size: .9em;
}

.single .entry-content pre,
.page .entry-content pre {
  margin: 1.8em 0;
  padding: 1.4em;

  border-radius: 12px;

  background: var(--ow-post-ink);
  color: #E8F6F5;

  overflow-x: auto;

  font-size: 14px;
  line-height: 1.6;
}

.single .entry-content pre code {
  padding: 0;
  background: transparent;
  color: inherit;
}


/* =========================================
   HR / DIVIDER
========================================== */

.single .entry-content hr,
.page .entry-content hr {
  margin: 2.6em 0;
  border: 0;
  border-top: 1px solid var(--ow-post-line);
}


/* =========================================
   EMBED CHART / IFRAME (Looker, dsb.)
========================================== */

.single .entry-content iframe,
.page .entry-content iframe {
  max-width: 100%;
  border-radius: 14px;

  box-shadow: 0 14px 34px rgba(23,43,58,.12);
}


/* =========================================
   MOBILE
========================================== */

@media (max-width: 640px) {

  .single .entry-content,
  .page .entry-content {
    font-size: 16.5px;
  }

  .single .entry-content blockquote,
  .page .entry-content blockquote {
    padding: 1.1em 1.3em 1.1em 1.6em;
  }

}

.ow-related-posts {
  margin-top: 3em;
  padding-top: 2.2em;
  border-top: 1px solid var(--ow-post-line);
}

.ow-related-posts-title {
  margin: 0 0 1.1em;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 750;
  letter-spacing: -.02em;
  font-size: clamp(20px, 2.2vw, 24px);
  color: var(--ow-post-ink);
}

.ow-related-posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.ow-related-post-card {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 28px rgba(23,43,58,.10);
  text-decoration: none !important;
  color: inherit;
  transition: transform .25s ease, box-shadow .25s ease;
}

.ow-related-post-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(23,43,58,.16);
}

.ow-related-post-thumb {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--ow-post-paper);
}

.ow-related-post-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ow-related-post-body {
  padding: 14px 16px 18px;
}

.ow-related-post-date {
  display: block;
  margin-bottom: 6px;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ow-post-teal-dark);
}

.ow-related-post-title {
  margin: 0;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 700;
  line-height: 1.35;
  font-size: 15.5px;
  color: var(--ow-post-ink);
}

@media (max-width: 900px) {
  .ow-related-posts-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .ow-related-posts-grid { grid-template-columns: 1fr; gap: 16px; }
}


/* =========================================
   TAG ARTIKEL — posisi baru, tepat setelah teks
   artikel berakhir (lihat functions.php: fungsi
   ow_child_tags_author_html, priority 15)
========================================== */

.ow-post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;

  margin-top: 2.4em;
  padding-top: 1.8em;

  border-top: 1px solid var(--ow-post-line);
}

.ow-post-tags a {
  display: inline-block;

  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--ow-post-line);

  background: var(--ow-post-paper);
  color: var(--ow-post-ink-soft) !important;

  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none !important;

  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.ow-post-tags a:hover {
  background: var(--ow-post-teal);
  border-color: var(--ow-post-teal);
  color: #fff !important;
}


/* =========================================
   AUTHOR BOX — khusus kategori Analytics
   (lihat functions.php: fungsi ow_child_tags_author_html)
========================================== */

.ow-post-author {
  display: flex;
  align-items: center;
  gap: 18px;

  margin-top: 1.8em;
  padding: 22px;

  border-radius: 16px;

  background: var(--ow-post-paper);
  box-shadow: 0 10px 28px rgba(23,43,58,.08);
}

.ow-post-author-avatar {
  flex-shrink: 0;

  width: 64px;
  height: 64px;

  border-radius: 50%;
  overflow: hidden;

  box-shadow: 0 6px 16px rgba(23,43,58,.18);
}

.ow-post-author-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ow-post-author-body strong {
  display: block;
  margin-bottom: 5px;

  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  font-weight: 750;
  letter-spacing: -.01em;
  color: var(--ow-post-ink);
}

.ow-post-author-body p {
  margin: 0;

  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ow-post-ink-soft);
}

@media (max-width: 640px) {

  .ow-post-author {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;

    padding: 18px;
  }

  .ow-post-author-avatar {
    width: 56px;
    height: 56px;
  }

}


/* =========================================
   TOMBOL "BACK TO ARTICLES" — di bawah author box
========================================== */

.ow-post-back-wrap {
  margin-top: 1.8em;
  text-align: center;
}

.ow-post-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 12px 26px;
  border-radius: 999px;
  border: 1.5px solid var(--ow-post-ink);

  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .02em;

  color: var(--ow-post-ink) !important;
  text-decoration: none !important;

  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}

.ow-post-back-btn:hover {
  background: var(--ow-post-ink);
  border-color: var(--ow-post-ink);
  color: #fff !important;
  transform: translateY(-2px);
}

.ow-post-back-arrow {
  font-size: 15px;
  line-height: 1;
  transition: transform .25s ease;
}

.ow-post-back-btn:hover .ow-post-back-arrow {
  transform: translateX(-3px);
}

@media (max-width: 640px) {

  .ow-post-back-btn {
    width: 100%;
    justify-content: center;
  }

}