/*
Theme Name: Hanya Cerita Reader
Theme URI: https://hanyacerita.id
Author: Hanya Cerita
Description: Theme reader minimalis untuk novel serial Hanya Cerita.
Version: 0.4.0
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: hanyacerita-reader
*/

:root{
  --hc-bg:#121212;
  --hc-bg-soft:#1a1a1a;
  --hc-text:#ece6d9;
  --hc-muted:#a9a292;
  --hc-accent:#b8925a;
  --hc-border:#2b2b2b;
  --hc-card:#171717;
  --hc-reader-width:760px;
  --hc-body-size:1.14rem;
  --hc-line-height:1.9;
  --hc-font-heading: Georgia, "Times New Roman", serif;
  --hc-font-body: Georgia, "Times New Roman", serif;
}

html{scroll-behavior:smooth}
*{box-sizing:border-box}
body{
  margin:0;
  background:var(--hc-bg);
  color:var(--hc-text);
  font-family:var(--hc-font-body);
  font-size:16px;
  line-height:1.6;
}
a{color:inherit;text-decoration:none}
a:hover{color:var(--hc-accent)}
img{max-width:100%;height:auto}
button,input,select,textarea{font:inherit}

/* ===== Header & Navigation v0.4.2 ===== */

.hc-site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:var(--hc-bg);
  border-bottom:1px solid var(--hc-border);
}

.hc-header-inner{
  width:min(1180px,calc(100% - 32px));
  height:64px;
  margin:auto;
  display:flex;
  align-items:center;
  gap:26px;
}

/* Brand */

.hc-brand{
  display:flex;
  align-items:center;
  gap:11px;
  flex:0 0 auto;
  color:var(--hc-text);
  font-family:var(--hc-font-heading);
  text-decoration:none;
}

.hc-brand:hover{
  color:var(--hc-text);
}

.hc-brand-mark{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border:1px solid var(--hc-accent);
  border-radius:50%;
  color:var(--hc-accent);
  font-size:13px;
  font-weight:600;
  letter-spacing:.06em;
  transition:
    background .2s ease,
    color .2s ease,
    transform .2s ease;
}

.hc-brand:hover .hc-brand-mark{
  background:var(--hc-accent);
  color:var(--hc-bg);
  transform:translateY(-1px);
}

.hc-brand-name{
  font-size:17px;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  white-space:nowrap;
}

/* Desktop navigation */

.hc-nav{
  display:flex;
  align-items:stretch;
  align-self:stretch;
  gap:2px;
  margin-left:10px;
  color:var(--hc-muted);
  font-family:var(--hc-font-body);
  font-size:.91rem;
}

.hc-nav .menu-item{
  position:relative;
  display:flex;
  align-items:stretch;
  list-style:none;
  margin:0;
  padding:0;
}

.hc-nav a{
  position:relative;
  display:flex;
  align-items:center;
  padding:0 13px;
  color:var(--hc-muted);
  font-weight:500;
  white-space:nowrap;
  transition:color .2s ease;
}

.hc-nav a:hover,
.hc-nav a:focus-visible,
.hc-nav .current-menu-item > a,
.hc-nav .current_page_item > a,
.hc-nav a[aria-current="page"]{
  color:var(--hc-text);
}

/* garis aktif / hover */

.hc-nav a::after{
  content:"";
  position:absolute;
  left:13px;
  right:13px;
  bottom:-1px;
  height:2px;
  border-radius:2px 2px 0 0;
  background:var(--hc-accent);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .2s ease;
}

.hc-nav a:hover::after,
.hc-nav a:focus-visible::after,
.hc-nav .current-menu-item > a::after,
.hc-nav .current_page_item > a::after,
.hc-nav a[aria-current="page"]::after{
  transform:scaleX(1);
}

/* Right-side actions */

.hc-header-actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px;
}

.hc-header-icon{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  flex:0 0 40px;
  border:1px solid transparent;
  border-radius:12px;
  color:var(--hc-muted);
  transition:
    color .2s ease,
    border-color .2s ease,
    background .2s ease;
}

.hc-header-icon:hover,
.hc-header-icon:focus-visible{
  color:var(--hc-text);
  border-color:var(--hc-border);
  background:var(--hc-bg-soft);
}

.hc-header-icon svg{
  display:block;
}

.hc-shell{width:min(1180px,calc(100% - 32px));margin:auto}
.hc-hero{
  min-height:64vh;
  display:grid;
  place-items:center;
  text-align:center;
  padding:72px 0;
}
.hc-hero-inner{max-width:760px}
.hc-kicker{
  color:var(--hc-accent);
  letter-spacing:.22em;
  text-transform:uppercase;
  font-size:.78rem;
  margin-bottom:16px;
}
.hc-hero h1{
  font-family:var(--hc-font-heading);
  font-size:clamp(3rem,8vw,6rem);
  line-height:.95;
  margin:0 0 24px;
  font-weight:500;
}
.hc-tagline{
  color:var(--hc-muted);
  font-size:clamp(1.05rem,2.2vw,1.3rem);
  margin:0 auto 30px;
  max-width:620px;
}
.hc-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 20px;
  border:1px solid var(--hc-accent);
  color:var(--hc-text);
  border-radius:999px;
  transition:.2s ease;
  background:transparent;
  cursor:pointer;
}
.hc-btn:hover{background:var(--hc-accent);color:#111}
.hc-btn-secondary{border-color:var(--hc-border);color:var(--hc-muted)}
.hc-btn-secondary:hover{background:var(--hc-bg-soft);color:var(--hc-text)}

.hc-section{padding:48px 0 72px}
.hc-section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:24px}
.hc-section-title{
  margin:0;
  font-family:var(--hc-font-heading);
  font-size:clamp(2rem,4vw,3rem);
  font-weight:500;
}
.hc-card-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}
.hc-novel-card{
  background:var(--hc-card);
  border:1px solid var(--hc-border);
  border-radius:20px;
  overflow:hidden;
}
.hc-novel-card-image{
  aspect-ratio:4/5;
  background:#0f0f0f;
  overflow:hidden;
}
.hc-novel-card-image img{width:100%;height:100%;object-fit:cover}
.hc-novel-card-body{padding:22px}
.hc-novel-card h3{
  font-family:var(--hc-font-heading);
  font-size:1.8rem;
  margin:0 0 8px;
  font-weight:500;
}
.hc-meta{color:var(--hc-muted);font-size:.92rem}

.hc-novel-wrap{
  display:grid;
  grid-template-columns:minmax(220px,340px) minmax(0,1fr);
  gap:56px;
  padding:56px 0;
}
.hc-novel-cover{
  position:sticky;
  top:100px;
  align-self:start;
  aspect-ratio:4/5;
  border-radius:22px;
  overflow:hidden;
  background:#0f0f0f;
  border:1px solid var(--hc-border);
}
.hc-novel-cover img{width:100%;height:100%;object-fit:cover}
.hc-novel-title{
  font-family:var(--hc-font-heading);
  font-size:clamp(3rem,7vw,5rem);
  font-weight:500;
  margin:6px 0 18px;
}
.hc-novel-excerpt{color:var(--hc-muted);font-size:1.08rem;max-width:760px}
.hc-chapter-list{margin-top:42px;border-top:1px solid var(--hc-border)}
.hc-chapter-item{
  display:grid;
  grid-template-columns:90px minmax(0,1fr) auto;
  gap:18px;
  align-items:center;
  padding:18px 0;
  border-bottom:1px solid var(--hc-border);
}
.hc-chapter-number{color:var(--hc-muted);font-variant-numeric:tabular-nums}
.hc-chapter-title{font-family:var(--hc-font-heading);font-size:1.2rem}
.hc-access{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--hc-accent)}

.hc-reader-shell{
  width:min(var(--hc-reader-width),calc(100% - 34px));
  margin:0 auto;
  padding:54px 0 96px;
}
.hc-reader-top{
  text-align:center;
  margin-bottom:48px;
}
.hc-reader-novel{
  color:var(--hc-muted);
  letter-spacing:.16em;
  text-transform:uppercase;
  font-size:.78rem;
}
.hc-reader-chapter-no{
  color:var(--hc-accent);
  letter-spacing:.16em;
  text-transform:uppercase;
  font-size:.8rem;
  margin-top:22px;
}
.hc-reader-title{
  font-family:var(--hc-font-heading);
  font-size:clamp(2.4rem,6vw,4.8rem);
  line-height:1.04;
  margin:8px 0 22px;
  font-weight:500;
}
.hc-reader-quote{
  margin:26px auto 0;
  color:var(--hc-muted);
  font-style:italic;
  max-width:620px;
}
.hc-reader-divider{
  width:72px;height:1px;background:var(--hc-accent);opacity:.7;margin:34px auto 0;
}
.hc-reader-content{
  font-size:var(--hc-body-size);
  line-height:var(--hc-line-height);
  letter-spacing:.004em;
}
.hc-reader-content p{margin:0 0 1.45em}
.hc-reader-content h2,.hc-reader-content h3{
  font-family:var(--hc-font-heading);
  font-weight:500;
}
.hc-reader-content blockquote{
  margin:2em 0;
  padding-left:1.2em;
  border-left:2px solid var(--hc-accent);
  color:var(--hc-muted);
}
.hc-reader-nav{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:20px;
  margin-top:64px;
  padding-top:24px;
  border-top:1px solid var(--hc-border);
}
.hc-reader-nav .next{text-align:right}
.hc-reader-nav .count{color:var(--hc-muted);font-size:.9rem}

.hc-reader-toolbar{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:70;
  display:flex;
  gap:8px;
  padding:8px;
  border:1px solid var(--hc-border);
  border-radius:999px;
  background:var(--hc-card);
  backdrop-filter:blur(12px);
  box-shadow:0 10px 30px rgba(0,0,0,.18);
}
.hc-tool{
  width:42px;
  height:42px;
  border:0;
  border-radius:50%;
  background:transparent;
  color:var(--hc-text);
  display:grid;
  place-items:center;
  cursor:pointer;
}
.hc-tool:hover{
  background:var(--hc-bg-soft);
}
.hc-settings{
  position:fixed;
  right:18px;
  bottom:82px;
  z-index:75;
  width:min(320px,calc(100% - 36px));
  padding:18px;
  border:1px solid var(--hc-border);
  border-radius:18px;
  background:var(--hc-card);
  color:var(--hc-text);
  box-shadow:0 18px 60px rgba(0,0,0,.22);
}
.hc-settings[hidden]{display:none}
.hc-settings-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:12px 0}
.hc-segmented{display:flex;gap:8px}
.hc-segmented button{
  border:1px solid var(--hc-border);
  background:transparent;
  color:var(--hc-text);
  padding:8px 10px;
  border-radius:10px;
  cursor:pointer;
}
.hc-segmented button.active{
  border-color:var(--hc-accent);
  color:var(--hc-accent);
  background:var(--hc-bg-soft);
}

.hc-progress{
  position:fixed;
  top:0;
  left:0;
  height:2px;
  width:0;
  background:var(--hc-accent);
  z-index:100;
}

body.hc-theme-light{
  --hc-bg:#f5f2eb;
  --hc-bg-soft:#ece7dc;
  --hc-text:#24211d;
  --hc-muted:#6e675f;
  --hc-accent:#8b623d;
  --hc-border:#ded6ca;
  --hc-card:#fbf9f4;
}
body.hc-theme-sepia{
  --hc-bg:#efe4cf;
  --hc-bg-soft:#e5d6bd;
  --hc-text:#3c3025;
  --hc-muted:#746450;
  --hc-accent:#8a5a32;
  --hc-border:#d4c2a8;
  --hc-card:#f4ead8;
}
body.hc-font-small{--hc-body-size:1rem}
body.hc-font-large{--hc-body-size:1.3rem}

.hc-footer{
  border-top:1px solid var(--hc-border);
  color:var(--hc-muted);
  padding:28px 0 40px;
  margin-top:40px;
  font-size:.9rem;
}
.hc-empty{color:var(--hc-muted);padding:28px 0}

@media (max-width:860px){
  .hc-nav{display:none}
  .hc-card-grid{grid-template-columns:1fr}
  .hc-novel-wrap{grid-template-columns:1fr;gap:28px}
  .hc-novel-cover{position:relative;top:auto;max-width:340px}
}
@media (max-width:620px){
  .hc-header-inner,.hc-shell{width:min(100% - 24px,1180px)}
  .hc-reader-shell{width:min(100% - 28px,var(--hc-reader-width));padding-top:38px}
  .hc-chapter-item{grid-template-columns:64px minmax(0,1fr);gap:10px}
  .hc-chapter-item .hc-access{grid-column:2}
  .hc-reader-nav{grid-template-columns:1fr 1fr}
  .hc-reader-nav .count{display:none}
  .hc-reader-toolbar{right:12px;bottom:12px}
  .hc-settings{right:12px;bottom:70px}
}


/* ===== Hanya Cerita Branded Pages v0.2 ===== */
.hc-page-hero{
  padding:72px 0 36px;
  text-align:center;
}
.hc-page-hero .hc-kicker{margin-bottom:12px}
.hc-page-title{
  font-family:var(--hc-font-heading);
  font-size:clamp(2.8rem,7vw,5.4rem);
  line-height:1;
  margin:0;
  font-weight:500;
}
.hc-page-subtitle{
  max-width:680px;
  margin:18px auto 0;
  color:var(--hc-muted);
  font-size:1.08rem;
}
.hc-page-wrap{
  width:min(820px,calc(100% - 34px));
  margin:0 auto;
  padding:24px 0 88px;
}
.hc-prose{
  font-size:1.08rem;
  line-height:1.9;
}
.hc-prose p{margin:0 0 1.35em}
.hc-prose h2,.hc-prose h3{
  font-family:var(--hc-font-heading);
  font-weight:500;
  margin-top:2.1em;
}
.hc-prose h2{font-size:2rem}
.hc-prose h3{font-size:1.45rem}
.hc-prose ul,.hc-prose ol{padding-left:1.4em}
.hc-prose blockquote{
  margin:2.2em 0;
  padding:1.1em 1.3em;
  border-left:2px solid var(--hc-accent);
  color:var(--hc-muted);
  background:var(--hc-card);
  border-radius:0 12px 12px 0;
}
.hc-prose .hc-signoff{
  margin-top:42px;
  padding-top:26px;
  border-top:1px solid var(--hc-border);
  text-align:center;
  color:var(--hc-muted);
  font-style:italic;
}
.hc-info-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  margin:28px 0;
}
.hc-info-card{
  background:var(--hc-card);
  border:1px solid var(--hc-border);
  border-radius:18px;
  padding:22px;
}
.hc-info-card h3{
  margin-top:0;
  font-size:1.35rem;
}
.hc-legal-note{
  padding:18px 20px;
  border:1px solid var(--hc-border);
  border-radius:14px;
  background:var(--hc-card);
  color:var(--hc-muted);
}
.hc-form-shell{
  display:grid;
  gap:14px;
  max-width:680px;
}
.hc-form-shell input,
.hc-form-shell textarea,
.hc-form-shell select{
  width:100%;
  border:1px solid var(--hc-border);
  background:var(--hc-card);
  color:var(--hc-text);
  padding:13px 14px;
  border-radius:12px;
}
.hc-form-shell label{
  display:block;
  margin-bottom:6px;
  color:var(--hc-muted);
  font-size:.92rem;
}
.hc-author-card{
  display:grid;
  grid-template-columns:160px minmax(0,1fr);
  gap:28px;
  align-items:start;
}
.hc-author-photo{
  aspect-ratio:1/1;
  border-radius:50%;
  overflow:hidden;
  background:var(--hc-card);
  border:1px solid var(--hc-border);
}
.hc-author-photo img{width:100%;height:100%;object-fit:cover}
@media(max-width:700px){
  .hc-info-grid{grid-template-columns:1fr}
  .hc-author-card{grid-template-columns:1fr}
  .hc-author-photo{max-width:150px}
}


/* ===== Responsive Navigation v0.3 ===== */
.hc-menu-toggle{
  display:none;
  width:42px;
  height:42px;
  border:1px solid var(--hc-border);
  background:transparent;
  color:var(--hc-text);
  border-radius:12px;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
}
.hc-menu-toggle span,
.hc-menu-toggle::before,
.hc-menu-toggle::after{
  content:"";
  display:block;
  width:18px;
  height:1.5px;
  background:currentColor;
  transition:transform .2s ease, opacity .2s ease;
}
.hc-menu-toggle span{margin:4px 0}
.hc-menu-toggle[aria-expanded="true"]::before{transform:translateY(5.5px) rotate(45deg)}
.hc-menu-toggle[aria-expanded="true"] span{opacity:0}
.hc-menu-toggle[aria-expanded="true"]::after{transform:translateY(-5.5px) rotate(-45deg)}
.hc-menu-toggle:hover,
.hc-menu-toggle:focus-visible{
  border-color:var(--hc-accent);
  background:var(--hc-bg-soft);
}

.hc-mobile-menu{
  display:none;
  border-top:1px solid var(--hc-border);
  background:var(--hc-bg);
}
.hc-mobile-menu-inner{
  width:min(100%,1180px);
  margin:auto;
  padding:12px 0 18px;
}
.hc-mobile-menu a{
  display:block;
  padding:14px 24px;
  border-bottom:1px solid var(--hc-border);
  color:var(--hc-text);
}
.hc-mobile-menu a:last-child{border-bottom:0}

@media (max-width:900px){

  .hc-header-inner{
    width:min(100% - 24px,1180px);
    height:62px;
    gap:12px;
  }

  .hc-nav{
    display:none !important;
  }

  .hc-menu-toggle{
    display:flex;
  }

  .hc-mobile-menu.is-open{
    display:block;
  }

  .hc-brand-mark{
    width:34px;
    height:34px;
    font-size:12px;
  }

  .hc-brand-name{
    font-size:15px;
    letter-spacing:.11em;
  }

  .hc-header-icon{
    width:38px;
    height:38px;
    flex-basis:38px;
  }
}


@media (max-width:380px){

  .hc-brand-name{
    font-size:13px;
    letter-spacing:.08em;
  }

  .hc-header-inner{
    width:calc(100% - 20px);
  }
}


/* ===== Social Integration v0.4 ===== */
.hc-social-links{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
}
.hc-social-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:40px;
  padding:0 13px;
  border:1px solid var(--hc-border);
  border-radius:999px;
  color:var(--hc-muted);
  font-size:.88rem;
  line-height:1;
  transition:border-color .2s ease,color .2s ease,background .2s ease,transform .2s ease;
}
.hc-social-link:hover{
  border-color:var(--hc-accent);
  color:var(--hc-text);
  background:var(--hc-bg-soft);
  transform:translateY(-1px);
}
.hc-social-icon{
  width:17px;
  height:17px;
  display:grid;
  place-items:center;
  flex:0 0 17px;
}
.hc-social-icon svg{width:100%;height:100%;display:block}

.hc-footer{padding:34px 0 40px}
.hc-footer-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:28px;
}
.hc-footer-copy{max-width:760px}
.hc-footer-brand{
  display:inline-block;
  margin-bottom:7px;
  color:var(--hc-text);
  font-family:var(--hc-font-heading);
  font-size:1.05rem;
  letter-spacing:.08em;
}
.hc-footer-copy p{margin:0;color:var(--hc-muted)}
.hc-social-links--footer{flex-wrap:nowrap}
.hc-social-links--footer .hc-social-link{
  width:40px;
  padding:0;
  border-radius:50%;
}

.hc-mobile-social{
  margin-top:12px;
  padding:18px 4px 2px;
  border-top:1px solid var(--hc-border);
}
.hc-mobile-social-label{
  display:block;
  margin-bottom:12px;
  color:var(--hc-muted);
  font-size:.76rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.hc-social-invite{
  margin:48px 0 8px;
  padding:30px;
  border:1px solid var(--hc-border);
  border-radius:20px;
  background:var(--hc-card);
  text-align:center;
}
.hc-prose .hc-social-invite h2{
  margin:4px 0 10px;
  font-size:1.75rem;
}
.hc-prose .hc-social-invite p{
  max-width:590px;
  margin:0 auto 20px;
  color:var(--hc-muted);
}
.hc-social-links--about{justify-content:center}

.hc-reader-finish{
  margin-top:58px;
  padding:34px 22px;
  border-top:1px solid var(--hc-border);
  border-bottom:1px solid var(--hc-border);
  text-align:center;
}
.hc-reader-finish-mark{
  color:var(--hc-accent);
  font-size:1rem;
  margin-bottom:10px;
}
.hc-reader-finish-title{
  margin:0;
  font-family:var(--hc-font-heading);
  font-size:1.35rem;
}
.hc-reader-finish-copy{
  margin:7px 0 18px;
  color:var(--hc-muted);
  font-size:.94rem;
}
.hc-social-links--reader{justify-content:center}
.hc-reader-finish + .hc-reader-nav{margin-top:38px;border-top:0;padding-top:0}

@media (max-width:700px){
  .hc-footer-inner{align-items:flex-start;flex-direction:column}
  .hc-social-invite{padding:24px 18px}
  .hc-social-links--about .hc-social-link,
  .hc-social-links--reader .hc-social-link{flex:1 1 120px}
}