/*
 * Medialis — Flip Magazine CSS v3.0
 * Tampilan identik narasi theme: Playfair Display + Barlow Condensed
 * Semua class seragam dengan flip-engine.js v2.1 dan viewer.php
 */

/* ════════════════════════════════════════════════
   GOOGLE FONTS IMPORT
   ════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,700&family=Barlow+Condensed:wght@400;600;700&family=Source+Serif+4:ital,wght@0,400;1,400&display=swap');

/* ════════════════════════════════════════════════
   VARIABEL PANEL FLIPBOOK — di-override oleh wp_add_inline_style
   dari medialis_flip_panel_css() di functions.php
   ════════════════════════════════════════════════ */
/* (kosong — diisi runtime) */

/* ════════════════════════════════════════════════
   VARIABEL — identik narasi
   ════════════════════════════════════════════════ */
.m-flip-viewer {
  --mfv-ink:      #18120a;
  --mfv-paper:    #f6f1e9;
  --mfv-cream:    #eee8d9;
  /* Warna accent/drop-cap mengikuti warna primer tema (--cp).
     Jika panel flipbook mengatur warna sendiri, itu override di sini. */
  --mfv-accent:         var(--cp, #c0392b);
  --mfv-gold:           var(--cs, #a07820);
  --mfv-dropcap-color:  var(--mfv-flip-dropcap, var(--cp, #c0392b));
  --mfv-muted:    #7a6e5f;
  --mfv-border:   rgba(24,18,10,.13);
  --mfv-ease:     cubic-bezier(.645,.045,.355,1);
  --mfv-dur:      var(--mfv-anim-dur-override, 850ms);
  --mfv-ff-d:     'Playfair Display', Georgia, 'Times New Roman', serif;
  --mfv-ff-ui:    'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  --mfv-ff-body:  'Source Serif 4', Georgia, serif;
}

/* ════════════════════════════════════════════════
   SECTION WRAPPER
   ════════════════════════════════════════════════ */
.m-flip-viewer {
  margin-bottom: 3.5rem;
  background: transparent; /* narasi tidak pakai bg gelap di section */
}

/* Label "BACA TERBARU" */
.mfv-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--mfv-ff-ui);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mfv-accent);
  margin-bottom: .5rem;
}
.mfv-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--mfv-accent);
  flex-shrink: 0;
}

/* Judul / subtitle — gaya narasi */
.mfv-subtitle {
  font-family: var(--mfv-ff-d);
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  color: var(--mfv-ink);
  margin-bottom: 1.4rem;
}

/* ════════════════════════════════════════════════
   BOOK STAGE — identik narasi .book-stage
   ════════════════════════════════════════════════ */
.mfv-stage {
  display: flex;
  justify-content: center;
  perspective: 2800px;
  perspective-origin: 50% 42%;
  margin-bottom: 1.2rem;
}

.mfv-book {
  position: relative;
  width: var(--mfv-book-w, min(780px, 96vw));
  aspect-ratio: var(--mfv-spread-ratio, 3 / 2);
  transform-style: preserve-3d;
  filter: drop-shadow(0 20px 48px rgba(0,0,0,.6));
  container-type: inline-size;
}

/* ════════════════════════════════════════════════
   SPREAD — absolute agar tidak ghost/double
   ════════════════════════════════════════════════ */
.mfv-spread {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  transform-style: preserve-3d;
}
.mfv-spread[hidden] {
  display: none !important;
}

/* Spine / punggung buku — identik narasi .book-spine */
.mfv-spine {
  position: absolute;
  left: 50%; top: 2%; height: 96%; width: 6px;
  transform: translateX(-50%);
  background: linear-gradient(to right,
    rgba(0,0,0,.38) 0%,
    rgba(255,255,255,.08) 40%,
    rgba(255,255,255,.08) 60%,
    rgba(0,0,0,.38) 100%);
  z-index: 60;
  pointer-events: none;
  border-radius: 1px;
}

/* ════════════════════════════════════════════════
   HALAMAN — identik narasi .page
   ════════════════════════════════════════════════ */
.mfv-page {
  position: absolute;
  width: 50%;
  height: 100%;
  top: 0;
  transform-style: preserve-3d;
  transition: transform var(--mfv-dur) var(--mfv-ease);
}
.mfv-page--left  { left: 0;   transform-origin: right center; }
.mfv-page--right { left: 50%; transform-origin: left center;  }

/* Flip animasi */
.mfv-page--right.mfv-flipped { transform: rotateY(-180deg); }
.mfv-page--left.mfv-flipped  { transform: rotateY( 180deg); }

/* Depan & belakang — identik narasi .page-front, .page-back */
.mfv-page-front,
.mfv-page-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  background: var(--mfv-paper);
  border: 1px solid rgba(0,0,0,.1);
}
.mfv-page-back { transform: rotateY(180deg); }

/* Shadow tepi — identik narasi */
.mfv-page--right .mfv-page-front::after {
  content: '';
  position: absolute; right: 0; top: 0;
  width: 28px; height: 100%;
  background: linear-gradient(to right, transparent, rgba(0,0,0,.05));
  pointer-events: none;
}
.mfv-page--left .mfv-page-front::before {
  content: '';
  position: absolute; left: 0; top: 0;
  width: 28px; height: 100%;
  background: linear-gradient(to left, transparent, rgba(0,0,0,.05));
  pointer-events: none; z-index: 2;
}

/* ════════════════════════════════════════════════
   PAGE INNER — identik narasi .pg
   ════════════════════════════════════════════════ */
.mfv-pg {
  padding: var(--mfv-page-pad, clamp(.9rem,3cqi,1.7rem) clamp(.8rem,3.2cqi,1.5rem));
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--mfv-paper);
  overflow: hidden;
}

/* Header halaman — identik narasi .pg-header */
.mfv-pg-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid var(--mfv-ink);
  padding-bottom: .4rem;
  margin-bottom: clamp(.45rem,1.8cqi,.85rem);
  flex-shrink: 0;
  gap: .4rem;
}
/* Brand — nama situs, kiri, aksen */
.mfv-pg-brand {
  font-family: var(--mfv-ff-ui);
  font-size: clamp(.48rem,1.35cqi,.65rem);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mfv-accent);
  font-weight: 700;
  /* Tambahan: italic serif kecil di depan */
  display: flex;
  align-items: baseline;
  gap: .25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
/* "Magz" suffix — lebih kecil, tidak bold */
.mfv-pg-brand .mfv-brand-suffix {
  font-weight: 400;
  opacity: .65;
  font-style: italic;
  letter-spacing: .08em;
}
/* Nomor halaman — kanan, muted */
.mfv-pg-num {
  font-family: var(--mfv-ff-ui);
  font-size: clamp(.48rem,1.35cqi,.65rem);
  letter-spacing: .12em;
  color: var(--mfv-muted);
  flex-shrink: 0;
  font-weight: 600;
}

/* ════════════════════════════════════════════════
   COVER — identik narasi
   ════════════════════════════════════════════════ */
.mfv-cover {
  /* Fallback gelap jika tidak ada gambar */
  background-color: #160f05;
  background-size: cover;
  background-position: center top;
  padding: 0;
  overflow: hidden;
  position: relative;
}
/* Gradient overlay agar teks terbaca di atas foto */
.mfv-cover::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.08) 0%,
    rgba(0,0,0,.25) 35%,
    rgba(0,0,0,.75) 75%,
    rgba(0,0,0,.92) 100%
  );
  z-index: 1;
  pointer-events: none;
}
.mfv-cover-glow {
  /* Dihapus — digantikan oleh .mfv-cover::before */
  display: none;
}
.mfv-cover-inner {
  position: relative; z-index: 2;
  padding: clamp(.8rem,4cqi,2rem) clamp(.9rem,4cqi,1.8rem);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.mfv-cover-badge {
  font-family: var(--mfv-ff-ui);
  font-size: clamp(.45rem,1.2cqi,.62rem);
  letter-spacing: .25em;
  text-transform: uppercase;
  color: #c9a04a;
  border: 1px solid #c9a04a;
  display: inline-block;
  padding: .18rem .55rem;
}
.mfv-cover-headline {
  font-family: var(--mfv-ff-d);
  font-size: clamp(1.4rem,7.5cqi,3rem);
  font-weight: 900;
  line-height: .94;
  color: var(--mfv-paper);
  margin: auto 0;
}
.mfv-cover-standfirst {
  font-size: clamp(.52rem,1.4cqi,.75rem);
  color: rgba(246,241,233,.5);
  font-weight: 300;
  margin-top: .4rem;
  letter-spacing: .03em;
  line-height: 1.5;
}
.mfv-cover-footer {
  border-top: 1px solid rgba(246,241,233,.15);
  padding-top: .7rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.mfv-cover-masthead {
  font-family: var(--mfv-ff-ui);
  font-size: clamp(.9rem,4cqi,1.7rem);
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--mfv-paper);
}
.mfv-cover-date {
  font-family: var(--mfv-ff-ui);
  font-size: clamp(.42rem,1.1cqi,.62rem);
  color: rgba(246,241,233,.45);
  text-align: right;
  letter-spacing: .06em;
  line-height: 1.7;
}

/* ════════════════════════════════════════════════
   TOC — identik narasi
   ════════════════════════════════════════════════ */
.mfv-toc-heading {
  font-family: var(--mfv-ff-d);
  font-size: clamp(.9rem,3.2cqi,1.5rem);
  font-weight: 900;
  border-bottom: 3px solid var(--mfv-ink);
  padding-bottom: .4rem;
  margin-bottom: .7rem;
  flex-shrink: 0;
  color: var(--mfv-ink);
}
.mfv-toc-list { flex: 1; overflow: hidden; }
.mfv-toc-row {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  padding: .42rem 0;
  border-bottom: 1px dotted rgba(24,18,10,.18);
  cursor: pointer;
  transition: background .1s;
}
.mfv-toc-row:hover { background: rgba(192,57,43,.04); }
.mfv-toc-pg {
  font-family: var(--mfv-ff-ui);
  font-size: clamp(.5rem,1.4cqi,.68rem);
  color: var(--mfv-toc-num, var(--mfv-accent));
  font-weight: 700;
  min-width: clamp(18px,2.5cqi,26px);
  letter-spacing: .04em;
  flex-shrink: 0;
  padding-top: .08em;
}
.mfv-toc-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
/* JUDUL — di atas, lebih besar, Playfair */
.mfv-toc-title {
  font-family: var(--mfv-ff-d);
  font-size: clamp(.52rem,1.48cqi,.78rem);
  font-weight: 700;
  color: var(--mfv-ink);
  text-decoration: none;
  display: block;
  line-height: 1.22;
}
.mfv-toc-title:hover { color: var(--mfv-accent); }
/* KATEGORI — di bawah judul, kecil, Barlow, uppercase */
.mfv-toc-info small {
  font-family: var(--mfv-ff-ui);
  font-size: clamp(.38rem,1cqi,.52rem);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mfv-muted);
  display: block;
  margin-top: .08rem;
}
.mfv-toc-ref {
  font-family: var(--mfv-ff-ui);
  font-size: clamp(.48rem,1.3cqi,.62rem);
  font-weight: 700;
  color: var(--mfv-muted);
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════
   ARTIKEL — identik narasi .art-*
   ════════════════════════════════════════════════ */
.mfv-art-cat {
  font-family: var(--mfv-ff-ui);
  font-size: clamp(.5rem,1.4cqi,.64rem);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mfv-accent);
  font-weight: 700;
  margin-bottom: .3rem;
  flex-shrink: 0;
  text-decoration: none;
  display: block;
  /* Garis bawah tipis seperti narasi */
  border-bottom: none;
}
.mfv-art-title {
  font-family: var(--mfv-ff-d);
  font-size: clamp(.8rem,2.5cqi,1.25rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--mfv-ink);
  margin-bottom: .5rem;
  border-bottom: 2px solid var(--mfv-ink);
  padding-bottom: .45rem;
  flex-shrink: 0;
}
.mfv-art-title a { color: inherit; text-decoration: none; }
.mfv-art-title a:hover { color: var(--mfv-accent); }
.mfv-art-title a { color: inherit; text-decoration: none; }
.mfv-art-title a:hover { color: var(--mfv-accent); }


/* Deck / standfirst — identik narasi .art-deck */
.mfv-art-deck {
  font-family: var(--mfv-ff-body);
  font-size: clamp(.6rem,1.6cqi,.76rem);
  color: var(--mfv-muted);
  font-style: italic;
  margin-bottom: .6rem;
  line-height: 1.4;
  flex-shrink: 0;
}

/* Gambar — identik narasi .art-img (18cqi / 130px) */
.mfv-art-img {
  width: 100%;
  /* 16:9 via height berbasis lebar kontainer (cqi).
     50cqi = setengah lebar buku (1 halaman) × 9/16 ≈ tinggi 16:9.
     clamp memberi batas bawah/atas yang wajar. */
  height: var(--mfv-img-h, clamp(55px, 28cqi, 180px));
  object-fit: cover;
  object-position: center center;
  margin-bottom: .45rem;
  filter: sepia(18%) contrast(1.05);
  flex-shrink: 0;
  display: block;
  border-radius: 2px;
  /* Simulasi aspect-ratio 16:9 via padding — tidak overflow container */
}
.mfv-art-meta {
  font-family: var(--mfv-ff-ui);
  font-size: clamp(.45rem,1.1cqi,.57rem);
  letter-spacing: .07em;
  color: var(--mfv-muted);
  margin-bottom: .55rem;
  flex-shrink: 0;
  display: flex;
  gap: .4rem;
  align-items: center;
}
.mfv-art-body {
  font-family: var(--mfv-ff-body);
  font-size: var(--mfv-font-sz-base, clamp(.58rem,1.55cqi,.75rem));
  line-height: var(--mfv-line-h, 1.72);
  color: #231a0d;
  flex: 1;
  overflow: hidden; /* tetap hidden untuk clip container */
  position: relative;
}
.mfv-art-body p + p { margin-top: .5rem; }
/* Drop cap — Playfair Display, merah, float kiri
   Menggunakan .mfv-dropcap untuk keandalan lintas browser */
.mfv-art-body p:first-child::first-letter,
.mfv-dropcap::first-letter {
  font-family: var(--mfv-ff-d);
  font-size: clamp(2.6em,5.5cqi,3.4em);
  font-weight: 900;
  float: left;
  line-height: .76;
  margin: .06em .08em -.04em 0;
  /* Warna drop cap ikut --cp dari pengaturan warna tema.
     Fallback ke --mfv-accent jika --cp belum didefinisikan. */
  color: var(--mfv-dropcap-color, var(--cp, var(--mfv-accent)));
  padding: 0;
}
/* Clearfix setelah drop cap */
.mfv-dropcap::after {
  content: '';
  display: table;
  clear: both;
}
.mfv-art-more {
  display: inline-block;
  margin-top: auto;
  padding-top: .4rem;
  font-family: var(--mfv-ff-ui);
  font-size: clamp(.44rem,1.1cqi,.58rem);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mfv-accent);
  text-decoration: none;
  flex-shrink: 0;
}
.mfv-art-more:hover { opacity: .72; }

/* ════════════════════════════════════════════════
   PHOTO GRID — identik narasi .photo-grid
   ════════════════════════════════════════════════ */
.mfv-photo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 3px;
  height: clamp(140px,40cqi,260px);
  margin-bottom: .5rem;
  flex-shrink: 0;
}
.mfv-photo-grid .mfv-ph { overflow: hidden; }
.mfv-photo-grid .mfv-ph:first-child { grid-row: span 2; }
.mfv-photo-grid img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: sepia(12%) contrast(1.07) saturate(.92);
  transition: transform .55s;
}
.mfv-photo-grid img:hover { transform: scale(1.04); }

/* ════════════════════════════════════════════════
   KONTROL — identik narasi .flip-controls, .flip-btn
   ════════════════════════════════════════════════ */
.mfv-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}
.mfv-btn {
  font-family: var(--mfv-ff-ui);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  background: var(--mfv-ctrl-bg, var(--mfv-paper));
  color: var(--mfv-ctrl-color, var(--mfv-ink));
  border: 2px solid var(--mfv-ctrl-border, var(--mfv-ink));
  padding: .48rem 1.4rem;
  cursor: pointer;
  min-width: 120px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  transition: background .18s, color .18s, transform .1s;
  -webkit-tap-highlight-color: transparent;
}
.mfv-btn:hover:not(:disabled) { background: var(--mfv-ink); color: var(--mfv-paper); }
.mfv-btn:active:not(:disabled) { transform: scale(.96); }
.mfv-btn:disabled { opacity: .28; cursor: default; }

.mfv-indicator {
  font-family: var(--mfv-ff-ui);
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--mfv-ink);
  min-width: 110px;
  text-align: center;
}
.mfv-hint {
  font-family: var(--mfv-ff-ui);
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(24,18,10,.38);
  text-align: center;
  margin-top: .4rem;
}
.mfv-noscript {
  padding: 1rem 1.25rem;
  list-style: disc;
  color: var(--mfv-ink);
}

/* ════════════════════════════════════════════════
   RESPONSIF — kedua halaman tetap tampil di semua ukuran
   ════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* Pada mobile, buku lebih portrait agar konten terbaca */
  .mfv-book { aspect-ratio: 4 / 5; }
  /* Sedikit kurangi padding dalam halaman */
  .mfv-pg {
    padding: clamp(.45rem,2.5cqi,.9rem) clamp(.4rem,2.8cqi,.8rem);
  }
  /* Gambar sedikit lebih kecil */
  .mfv-art-img { height: clamp(45px,22cqi,100px); }
  /* Tombol lebih besar untuk jari */
  .mfv-btn { padding: .5rem 1rem; min-width: 90px; font-size: .72rem; }
  .mfv-controls { gap: .8rem; }
}

@media (max-width: 380px) {
  .mfv-book { aspect-ratio: 3 / 4; }
  .mfv-pg {
    padding: clamp(.35rem,2cqi,.65rem) clamp(.3rem,2.2cqi,.6rem);
  }
}

@media print {
  .m-flip-viewer { display: none !important; }
}

/* ════════════════════════════════════════════════
   HALAMAN IKLAN FLIPBOOK (.mfv-pg--ad)
   Tampil sebagai halaman penuh seperti iklan majalah
   ════════════════════════════════════════════════ */
.mfv-pg--ad {
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  background: #fff;
  position: relative;
}

.mfv-ad-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  overflow: hidden;
}

.mfv-ad-label {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .25rem .6rem;
  background: rgba(0,0,0,.04);
  border-radius: 3px;
  font-size: .6rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mfv-muted, #9ca3af);
  font-weight: 600;
  flex-shrink: 0;
}

.mfv-ad-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 0;
}

/* Gambar iklan responsif di dalam flipbook */
.mfv-ad-content img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 4px;
}

/* Link wrapper */
.mfv-ad-content a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* iframe iklan */
.mfv-ad-content iframe {
  max-width: 100%;
  border: none;
}

/* Footer brand tetap tampil */
.mfv-pg--ad .mfv-pg-footer {
  padding-top: .4rem;
  border-top: 1px solid var(--mfv-rule, #e5e7eb);
  text-align: center;
  flex-shrink: 0;
}

/* Subtle border agar berbeda dari halaman artikel */
.mfv-pg--ad {
  outline: 1px solid rgba(0,0,0,.06);
}