/* =========================================================
   YOJIGENPOUCH CMS — Frontend Stylesheet
   Tema: arsip siaran TV Jepang klasik akhir 1970an–1980an.
   Kertas usang, tinta cap, phosphor CRT teal, sampul kaset.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Kaisei+Decol:wght@400;500;700&family=Zen+Kaku+Gothic+New:wght@400;500;700&family=Share+Tech+Mono&display=swap');

:root{
  --paper:        #efe3c8;
  --paper-dark:   #e3d4a9;
  --paper-deep:   #d8c793;
  --ink:          #1e2b45;
  --ink-soft:     #3c4a68;
  --vermilion:    #c9421f;
  --mustard:      #dfa22b;
  --teal:         #1f7a6c;
  --line:         #b9a877;

  --font-display: 'Kaisei Decol', serif;
  --font-body:    'Zen Kaku Gothic New', sans-serif;
  --font-mono:    'Share Tech Mono', monospace;

  --radius: 2px;
  --shadow-tape: 3px 3px 0 var(--ink);
}

*, *::before, *::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin:0;
  background-color: var(--paper);
  background-image:
    radial-gradient(rgba(30,43,69,0.035) 1px, transparent 1px);
  background-size: 3px 3px;
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.6;
}

a{ color: var(--teal); text-decoration: none; }
a:hover{ text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible{
  outline: 3px solid var(--vermilion);
  outline-offset: 2px;
}

img{ max-width: 100%; display:block; }

/* ---------- Scanline / CRT overlay signature ---------- */
.scanlines{
  position: fixed; inset: 0; pointer-events: none; z-index: 40;
  background: repeating-linear-gradient(
    to bottom, rgba(30,43,69,0.05) 0px, rgba(30,43,69,0.05) 1px,
    transparent 1px, transparent 3px
  );
  mix-blend-mode: multiply;
  opacity: .5;
}
@media (prefers-reduced-motion: no-preference){
  .scanlines{ animation: flicker 6s infinite steps(30); }
}
@keyframes flicker{
  0%,96%,100%{ opacity:.5; } 97%{ opacity:.35; } 98%{ opacity:.55; }
}

/* ---------- Layout shell ---------- */
.site-header{
  background: var(--ink);
  color: var(--paper);
  border-bottom: 4px double var(--mustard);
}
.site-header .bar{
  max-width: 1100px; margin:0 auto; padding: 14px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap: wrap;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family: var(--font-display);
  font-weight:700; letter-spacing: .5px;
}
.brand .rec-dot{
  width:10px;height:10px;border-radius:50%;background:var(--vermilion);
  box-shadow:0 0 6px var(--vermilion);
}
.brand small{
  display:block; font-family: var(--font-mono); font-size:10px;
  letter-spacing:2px; color: var(--mustard); font-weight:400;
}
.brand h1{ font-size: 20px; margin:0; }

nav.main-nav ul{
  list-style:none; display:flex; gap:18px; margin:0; padding:0;
  font-family: var(--font-mono); font-size:13px; letter-spacing:1px; text-transform:uppercase;
}
nav.main-nav a{ color: var(--paper); }
nav.main-nav a:hover, nav.main-nav a.active{ color: var(--mustard); text-decoration:none; border-bottom:2px solid var(--mustard); }

main{ max-width: 1100px; margin: 0 auto; padding: 32px 20px 64px; }

.site-footer{
  border-top: 4px double var(--mustard);
  background: var(--ink); color: var(--paper-dark);
  font-family: var(--font-mono); font-size: 12px;
  text-align:center; padding: 18px 20px;
}

/* ---------- Hero ---------- */
.hero{
  position: relative;
  border: 2px solid var(--ink);
  background: var(--paper-dark);
  padding: 40px 28px;
  margin-bottom: 36px;
  box-shadow: var(--shadow-tape);
}
.hero::before{
  content:'';
  position:absolute; top:10px; left:10px; right:10px; bottom:10px;
  border:1px dashed var(--line);
  pointer-events:none;
}
.hero .eyebrow{
  font-family: var(--font-mono); color: var(--vermilion); letter-spacing:3px;
  font-size:12px; text-transform:uppercase;
}
.hero h2{
  font-family: var(--font-display); font-size: clamp(28px, 5vw, 46px);
  margin: 8px 0 12px; line-height:1.15;
}
.hero p{ max-width: 60ch; color: var(--ink-soft); }
.hero .hero-actions{ margin-top:20px; display:flex; gap:12px; flex-wrap:wrap; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-block; font-family: var(--font-mono); font-size:13px;
  letter-spacing:1px; text-transform:uppercase;
  padding:10px 18px; border:2px solid var(--ink); background: var(--paper);
  color: var(--ink); cursor:pointer; box-shadow: var(--shadow-tape);
  transition: transform .1s ease;
}
.btn:hover{ text-decoration:none; transform: translate(-1px,-1px); }
.btn:active{ transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--ink); }
.btn.primary{ background: var(--teal); color:#fff; border-color: var(--teal); }
.btn.accent{ background: var(--vermilion); color:#fff; border-color: var(--vermilion); }
.btn.small{ padding:6px 12px; font-size:11px; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; box-shadow:none; }

/* ---------- Search ---------- */
.search-box{
  display:flex; gap:10px; margin-bottom: 28px; flex-wrap:wrap;
}
.search-box input[type="search"]{
  flex:1; min-width:220px; padding:12px 14px; font-family: var(--font-mono);
  border:2px solid var(--ink); background: #fffaf0; color: var(--ink); font-size:14px;
}

/* ---------- Section headings ---------- */
.section-title{
  display:flex; align-items:baseline; gap:10px; margin: 0 0 18px;
  font-family: var(--font-display); font-size:22px;
}
.section-title .tag{
  font-family: var(--font-mono); font-size:11px; color: var(--vermilion);
  border:1px solid var(--vermilion); padding:2px 6px; letter-spacing:1px;
}

/* ---------- Episode grid: cassette-spine cards ---------- */
.episode-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 20px;
}
.tape-card{
  background: #fffaf0; border:2px solid var(--ink); box-shadow: var(--shadow-tape);
  display:flex; flex-direction:column; overflow:hidden;
}
.tape-card .thumb{
  aspect-ratio: 4/3; background: var(--paper-deep) center/cover no-repeat;
  border-bottom:2px solid var(--ink); position:relative;
}
.tape-card .thumb .spine-num{
  position:absolute; top:0; left:0; background: var(--ink); color: var(--mustard);
  font-family: var(--font-mono); font-size:12px; padding:3px 8px; letter-spacing:1px;
}
.tape-card .body{ padding:14px; display:flex; flex-direction:column; gap:6px; flex:1; }
.tape-card .id-title{ font-family: var(--font-display); font-weight:700; font-size:18px; }
.tape-card .meta{
  font-family: var(--font-mono); font-size:11px; color: var(--teal); margin-top:auto;
  display:flex; justify-content:space-between; align-items:center; padding-top:8px;
  border-top:1px dashed var(--line);
}
.tape-card .synopsis{ font-size:13px; color:var(--ink-soft); }

/* ---------- Status / quality badges ---------- */
.badge{
  font-family: var(--font-mono); font-size:10px; letter-spacing:1px;
  padding:2px 7px; border-radius: var(--radius); text-transform:uppercase; display:inline-block;
}
.badge.hq{ background: var(--vermilion); color:#fff; }
.badge.sd{ background: var(--mustard); color: var(--ink); }

/* ---------- Detail page ---------- */
.detail-layout{ display:grid; grid-template-columns: 280px 1fr; gap: 28px; }
@media (max-width: 720px){ .detail-layout{ grid-template-columns: 1fr; } }
.detail-thumb{
  border:2px solid var(--ink); box-shadow: var(--shadow-tape); aspect-ratio:4/3;
  background: var(--paper-deep) center/cover no-repeat;
}
.detail-info .eyebrow{ font-family: var(--font-mono); color:var(--teal); font-size:12px; letter-spacing:2px; }
.detail-info h2{ font-family: var(--font-display); font-size: 30px; margin:6px 0 2px; }
.detail-info h3{ font-weight:400; color: var(--ink-soft); margin:0 0 14px; font-size:16px; }
.detail-info dl{
  font-family: var(--font-mono); font-size:12px; display:grid; grid-template-columns:auto 1fr; gap:6px 14px; margin:16px 0;
}
.detail-info dt{ color: var(--teal); }
.synopsis-box{
  background: var(--paper-dark); border-left:4px solid var(--vermilion); padding:14px 16px; margin-top:10px;
}

/* ---------- Media page ---------- */
.player-frame{
  background:#0b1220; border:2px solid var(--ink); box-shadow: var(--shadow-tape);
  aspect-ratio:16/9; width:100%;
  display:flex; align-items:center; justify-content:center; color:#7fd9c8;
  font-family: var(--font-mono); position:relative; overflow:hidden;
}
.player-frame iframe{ width:100%; height:100%; border:0; }
.player-frame video{ width:100%; height:100%; object-fit:contain; background:#000; }
.media-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:18px; align-items:center; }
.btn-disabled{ opacity:.4; cursor:not-allowed; box-shadow:none; pointer-events:none; }

/* ---------- States ---------- */
.empty-state, .error-state, .loading-state{
  text-align:center; padding: 48px 20px; font-family: var(--font-mono); color: var(--ink-soft);
  border:1px dashed var(--line);
}
.pagination{ display:flex; gap:10px; justify-content:center; margin-top:28px; font-family: var(--font-mono); }