/* =======================================================================
   comic.css — Komik strip vertikal (format=comic) untuk Techindo
   -----------------------------------------------------------------------
   Dimuat KONDISIONAL di article.php: cuma kalau artikel punya comic_html.
   Mewarisi DNA Dark Gold Warm dari article.css (--c-gold, --c-cream, dst).
   Warna khusus komponen (WhatsApp/ChatGPT mock) didefinisikan lokal di sini.
   Mobile-first: strip vertikal, 1 kolom, jempol tinggal scroll ke bawah.
   ======================================================================= */

.komik-wrap {
  --k-ink:      #0c0a08;   /* garis panel (tinta komik) */
  --k-panel:    #1e160d;   /* dalam panel */
  --k-cap:      #e7c477;   /* kotak caption narasi */
  --k-cap-txt:  #1a1204;
  --k-cream:    var(--c-cream, #E8DFC8);
  --k-muted:    var(--c-mut, #9a938a);
  --k-gold:     var(--c-gold, #D4AF37);
  /* WhatsApp mock */
  --k-wa-bar:   #202c33;
  --k-wa-bg:    #0b141a;
  --k-wa-in:    #1f2c33;
  --k-wa-out:   #005c4b;
  /* ChatGPT mock */
  --k-gpt-top:  #0f1011;
  --k-gpt-bg:   #161819;
  --k-gpt-user: #2a2620;
  --k-gpt-ai:   #12261a;

  margin: 8px 0 22px;
}

/* garis mode: "Versi komik · scroll" */
.komik-modeline {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 12px; font-size: 12px; color: var(--k-muted);
}
.komik-modeline .komik-pill {
  background: rgba(212,175,55,.14); color: var(--c-gold-lt, #FFDF73);
  border: 1px solid rgba(212,175,55,.3); padding: 3px 10px;
  border-radius: 999px; font-weight: 600; font-size: 11.5px; letter-spacing: .2px;
}
.komik-modeline .komik-ln { flex: 1; height: 1px; background: rgba(212,175,55,.18); }

/* STRIP */
.komik-strip {
  max-width: 560px;
  display: flex; flex-direction: column;
  background: var(--k-ink); border-radius: 8px; overflow: hidden;
  border: 1px solid #000;
}

.komik-panel {
  position: relative; background: var(--k-panel);
  border-bottom: 4px solid var(--k-ink);
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 130px;
}
.komik-panel:last-child { border-bottom: 0; }

/* caption narasi founder-voice */
.komik-cap {
  padding: 13px 15px 9px; font-size: 15px; line-height: 1.45;
  font-weight: 600; color: var(--k-cream);
}
.komik-cap .komik-hl {
  background: var(--k-cap); color: var(--k-cap-txt);
  padding: 2px 6px; border-radius: 2px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  box-shadow: 2px 2px 0 rgba(0,0,0,.3);
}

/* balon dialog */
.komik-bubble {
  align-self: flex-end; background: #f6f2ea; color: #141414;
  font-size: 13.5px; font-weight: 600; line-height: 1.35;
  padding: 8px 12px; border-radius: 14px; border: 2px solid var(--k-ink);
  max-width: 80%; margin: 0 14px 14px; position: relative;
  box-shadow: 2px 3px 0 rgba(0,0,0,.4);
}
.komik-bubble.komik-l { align-self: flex-start; }
.komik-bubble::after {
  content: ""; position: absolute; bottom: -14px;
  border: 8px solid transparent; border-top-color: #f6f2ea;
}
.komik-bubble:not(.komik-l)::after { right: 16px; }
.komik-bubble.komik-l::after { left: 16px; }
.komik-who {
  display: block; font-size: 10px; color: #8a6a12;
  font-weight: 800; letter-spacing: .5px; margin-bottom: 1px;
}

/* label "ilustrasi" (WAJIB selama screenshot belum asli) */
.komik-simtag {
  position: absolute; top: 8px; right: 8px; z-index: 6;
  font-size: 9px; letter-spacing: .4px; background: rgba(0,0,0,.6);
  color: #c9b489; padding: 2px 7px; border-radius: 3px; font-weight: 600;
}

/* wadah screenshot */
.komik-ss {
  margin: 9px 14px 12px; border-radius: 9px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.07);
}

/* --- WhatsApp mock --- */
.komik-wa-top {
  background: var(--k-wa-bar); padding: 8px 11px; font-size: 11.5px;
  color: #cfe3ea; display: flex; align-items: center; gap: 8px;
}
.komik-wa-top .komik-av { width: 22px; height: 22px; border-radius: 50%; background: #3b4a52; }
.komik-wa-top small { color: #5fd07a; font-size: 10px; }
.komik-wa-body {
  background: var(--k-wa-bg); padding: 11px 10px;
  display: flex; flex-direction: column; gap: 7px;
}
.komik-wa-in, .komik-wa-out {
  font-size: 12px; line-height: 1.4; padding: 6px 26px 6px 10px;
  border-radius: 8px; position: relative; max-width: 85%;
}
.komik-wa-in { align-self: flex-start; background: var(--k-wa-in); color: #e9edef; }
.komik-wa-out { align-self: flex-end; background: var(--k-wa-out); color: #e9f7ef; }
.komik-wa-in .komik-t, .komik-wa-out .komik-t {
  position: absolute; right: 8px; bottom: 3px; font-size: 8.5px; color: #8aa;
}
.komik-slash {
  align-self: center; background: rgba(212,175,55,.16);
  border: 1px dashed rgba(212,175,55,.5); color: var(--c-gold-lt, #FFDF73);
  font-size: 11px; padding: 4px 10px; border-radius: 6px; font-weight: 600;
}

/* --- ChatGPT mock --- */
.komik-gpt-top {
  background: var(--k-gpt-top); padding: 8px 11px; font-size: 11px;
  color: #9aa; border-bottom: 1px solid #222;
  display: flex; gap: 6px; align-items: center;
}
.komik-gpt-top .komik-g { width: 15px; height: 15px; border-radius: 4px; background: #10a37f; }
.komik-gpt-body { background: var(--k-gpt-bg); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.komik-gpt-row { font-size: 12px; line-height: 1.45; padding: 8px 10px; border-radius: 8px; }
.komik-gpt-row.komik-user { background: var(--k-gpt-user); color: #e9e2d3; }
.komik-gpt-row.komik-user b { color: var(--k-gold); }
.komik-gpt-row.komik-ai { background: var(--k-gpt-ai); color: #cfe9d6; border: 1px solid rgba(95,208,122,.18); }
.komik-cursor {
  display: inline-block; width: 7px; height: 14px; background: var(--k-gold);
  vertical-align: -3px; animation: komik-bl 1s steps(1) infinite;
}
@keyframes komik-bl { 50% { opacity: 0; } }

/* panel penutup — CTA ke funnel yang ADA (bukan gembok; ini konten gratis) */
.komik-panel.komik-close {
  background: linear-gradient(160deg, #231a0e, #18110a);
  align-items: center; text-align: center; padding: 22px 18px;
}
.komik-close .komik-k {
  font-size: 12px; color: var(--k-gold); font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase; margin-bottom: 8px;
}
.komik-close h3 { font-size: 17px; line-height: 1.3; font-weight: 800; margin-bottom: 14px; color: var(--k-cream); }
.komik-cta-row { display: flex; flex-direction: column; gap: 9px; width: 100%; max-width: 320px; }
.komik-btn { display: block; padding: 12px 14px; border-radius: 8px; font-size: 13.5px; font-weight: 700; text-decoration: none; }
.komik-btn.komik-p { background: var(--k-gold); color: #1a1204; }
.komik-btn.komik-s { background: transparent; color: var(--k-cream); border: 1px solid rgba(212,175,55,.4); }

/* catatan jujur bawah strip */
.komik-note {
  margin: 13px 0 0; font-size: 11.5px; color: var(--k-muted); line-height: 1.55;
}
.komik-note b { color: var(--c-gold-lt, #FFDF73); font-weight: 600; }

@media (max-width: 640px) {
  .komik-strip { max-width: 100%; }
  .komik-cap { font-size: 14px; }
}