/* Ceritaku v1.0.0 */

/* ---- tombol Ikuti (di bawah cerpen / episode cerbung) ---- */
.ck-bar{display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px;margin:22px 0 6px;padding:14px 16px;border:1px solid var(--line,#e2e7ee);border-radius:12px;background:var(--card,#fff)}
.ck-bar[hidden]{display:none}
.ck-follow{flex:none;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 22px;border:1px solid var(--navy,#102747);border-radius:999px;background:var(--navy,#102747);color:#fff;font:700 14px var(--font,system-ui,sans-serif);cursor:pointer;transition:background .15s,color .15s}
.ck-follow:hover{background:var(--navy-l,#1d3d6b)}
.ck-follow.is-on{background:#fff;color:var(--navy,#102747)}
.ck-follow.is-on:hover{background:#eef2f8}
.ck-follow:disabled{opacity:.6;cursor:wait}
.ck-follow:focus-visible,.ck-bell:focus-visible,.ck-b:focus-visible{outline:2px solid var(--gold,#D8A443);outline-offset:2px}
.ck-hint{font-size:13.5px;color:var(--mute,#5a6677)}
.ck-msg{font-size:13px;color:var(--mute,#5a6677);min-height:1em}

/* ---- lonceng notifikasi di header ---- */
.ck-bell{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin-right:2px;padding:0;border:0;border-radius:50%;background:none;color:#3c4043;cursor:pointer;transition:background .15s}
.ck-bell:hover,.ck-bell[aria-expanded="true"]{background:#e8eaed}
.ck-badge{position:absolute;top:2px;right:0;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--red,#c8102e);color:#fff;font:700 11px/18px var(--font,system-ui,sans-serif);text-align:center;box-shadow:0 0 0 2px #fff}
.ck-badge[hidden]{display:none}
.ck-ph{position:absolute;right:0;top:calc(100% + 8px);z-index:90;width:min(340px,92vw);max-height:70vh;overflow:auto;background:#fff;border:1px solid #e8eaed;border-radius:16px;box-shadow:0 4px 18px rgba(32,33,36,.28);text-align:left}
.ck-ph[hidden]{display:none}
.ck-ph-h{padding:14px 18px 10px;font:700 15px var(--font,system-ui,sans-serif);color:#202124;border-bottom:1px solid #e8eaed}
.ck-ph-empty{margin:0;padding:18px;font-size:14px;line-height:1.5;color:#5f6368}
.ck-ph-l{margin:0;padding:4px 0;list-style:none}
.ck-ph-i{display:flex;flex-direction:column;gap:2px;padding:11px 18px;color:#202124;text-decoration:none}
.ck-ph-i:hover,.ck-ph-i:focus-visible{background:#f1f3f4;text-decoration:none}
.ck-ph-i strong{font-size:14px;line-height:1.35}
.ck-ph-i span{font-size:13px;color:#5f6368}
.ck-ph-f{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 18px 12px;border-top:1px solid #e8eaed}
.ck-ph-mark{padding:0;border:0;background:none;font:600 13px var(--font,system-ui,sans-serif);color:var(--navy,#102747);cursor:pointer}
.ck-ph-mark:hover{text-decoration:underline}
.ck-ph-all{margin-left:auto;font:600 13px var(--font,system-ui,sans-serif);color:var(--navy,#102747)}

/* ---- halaman Ceritaku ---- */
.ck-page{max-width:760px}
.ck-tabs{display:flex;gap:8px;margin:0 0 18px;border-bottom:1px solid var(--line,#e2e7ee)}
.ck-tabs a{padding:10px 16px;margin-bottom:-1px;border-bottom:3px solid transparent;font-weight:700;font-size:15px;color:var(--mute,#5a6677);text-decoration:none}
.ck-tabs a:hover{color:var(--navy,#102747);text-decoration:none}
.ck-tabs a.is-on{color:var(--navy,#102747);border-bottom-color:var(--gold,#D8A443)}
.ck-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px}
.ck-item{display:flex;gap:14px;padding:12px;border:1px solid var(--line,#e2e7ee);border-radius:12px;background:var(--card,#fff)}
.ck-img{position:relative;flex:none;display:block;width:72px;height:108px;overflow:hidden;border-radius:8px;background:#e8edf4}
.ck-img img,.ck-img .ck-noimg{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.ck-img .ck-noimg{background:linear-gradient(135deg,#dfe6f0,#c9d4e4)}
.ck-main{min-width:0;display:flex;flex-direction:column;gap:6px}
.ck-t{margin:0;font-size:17px;line-height:1.3}
.ck-t a{color:var(--navy,#102747);text-decoration:none}
.ck-t a:hover{text-decoration:underline}
.ck-new{display:inline-block;margin-left:8px;padding:2px 9px;border-radius:999px;background:var(--red,#c8102e);color:#fff;font:700 11.5px/1.5 var(--font,system-ui,sans-serif);vertical-align:2px}
.ck-meta{margin:0;font-size:13.5px;color:var(--mute,#5a6677)}
.ck-act{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.ck-f{margin:0}
.ck-b{display:inline-block;padding:8px 14px;border:1px solid #cfd7e3;border-radius:8px;background:#eef2f8;color:var(--navy,#102747);font:700 13.5px var(--font,system-ui,sans-serif);text-decoration:none;cursor:pointer}
.ck-b:hover{filter:brightness(.96);text-decoration:none}
.ck-b--go{background:var(--navy,#102747);border-color:var(--navy,#102747);color:#fff}
.ck-b--quiet{background:transparent;color:var(--mute,#5a6677);font-weight:600}
.ck-empty{padding:28px 8px;color:var(--mute,#5a6677);line-height:1.6}

@media (max-width:480px){
  .ck-bar{padding:12px}
  .ck-item{gap:10px;padding:10px}
  .ck-img{width:60px;height:90px}
  .ck-ph{right:-8px}
}
@media (prefers-reduced-motion:reduce){.ck-follow,.ck-bell{transition:none}}