/*
Theme Name: Yoru Media
Theme URI: https://gotsnoods.com/
Author: Yoru Media
Description: Tema gelap neon pink (glassmorphism) untuk Yoru Media — bacaan malam seputar hentai & anime 18+. Sudah termasuk kategori, halaman, menu, konten dummy, schema JSON-LD, meta robots & robots.txt.
Version: 1.0.3
Requires at least: 6.0
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: yoru
*/

:root{
  --bg:#07060b; --bg2:#0e0b16; --panel:rgba(255,255,255,.045); --line:rgba(255,79,216,.22);
  --pink:#ff2bd6; --pink2:#ff5fa8; --cyan:#3ee7ff; --violet:#7b4dff;
  --text:#f1ecf7; --muted:#a79fb5; --radius:16px;
  --glow:0 0 18px rgba(255,43,214,.45);
  --font:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --display:'Orbitron','Poppins',sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.7;
  background-image:radial-gradient(1200px 600px at 85% -10%,rgba(255,43,214,.16),transparent 60%),
  radial-gradient(900px 500px at -10% 30%,rgba(62,231,255,.08),transparent 60%),
  linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:auto,auto,48px 48px,48px 48px;background-attachment:fixed}
a{color:var(--pink2);text-decoration:none;transition:.2s}
a:hover{color:var(--cyan)}
img{max-width:100%;height:auto;display:block}
.wrap{width:min(1240px,100% - 32px);margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(7,6,11,.78);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.topbar{font-size:12px;color:var(--muted);border-bottom:1px solid rgba(255,255,255,.05)}
.topbar .wrap{display:flex;justify-content:space-between;gap:12px;padding:6px 0}
.badge18{color:#fff;background:linear-gradient(90deg,var(--pink),var(--violet));padding:1px 8px;border-radius:99px;font-weight:700}
.head-in{display:flex;align-items:center;gap:24px;padding:12px 0}
.logo img{height:58px;width:auto;filter:drop-shadow(0 0 10px rgba(255,43,214,.35))}
.nav{margin-left:auto}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:4px;flex-wrap:wrap}
.nav a{display:block;padding:8px 14px;color:var(--text);font-size:13px;font-weight:600;letter-spacing:.08em;border-radius:10px}
.nav a:hover,.nav .current-menu-item>a{color:var(--pink);background:rgba(255,43,214,.08);box-shadow:inset 0 -2px 0 var(--pink)}
.search-btn,.menu-toggle{background:none;border:1px solid var(--line);color:var(--text);border-radius:10px;padding:8px 11px;cursor:pointer}
.menu-toggle{display:none}
.search-bar{display:none;padding:0 0 14px}
.search-bar.open{display:block}
.search-form{display:flex;gap:8px}
.search-form input{flex:1;background:var(--panel);border:1px solid var(--line);color:var(--text);padding:11px 14px;border-radius:12px;font:inherit}
.btn{display:inline-block;background:linear-gradient(90deg,var(--pink),var(--violet));color:#fff!important;border:0;padding:11px 22px;border-radius:99px;font-weight:600;cursor:pointer;box-shadow:var(--glow)}
.btn.ghost{background:transparent;border:1px solid var(--pink);box-shadow:none}

/* Hero */
.hero{position:relative;padding:56px 0 36px}
.hero-grid{display:grid;grid-template-columns:1.1fr 1fr .8fr;gap:22px;align-items:stretch}
.hero-copy{display:flex;flex-direction:column;justify-content:center}
.hero-copy .dots{display:flex;gap:6px;margin-bottom:18px}
.hero-copy .dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.25)}
.hero-copy .dots i:nth-child(2){background:var(--pink);box-shadow:var(--glow)}
.hero h1{font-family:var(--display);font-size:clamp(34px,5vw,60px);line-height:1.05;margin:0 0 14px;text-transform:uppercase}
.hero h1 span{color:var(--pink);text-shadow:var(--glow)}
.hero p{color:var(--muted);margin:0 0 22px;max-width:440px}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.hero-feature{position:relative;border-radius:22px;overflow:hidden;min-height:360px;border:1px solid var(--line);box-shadow:0 20px 60px rgba(255,43,214,.15)}
.hero-feature .thumb{position:absolute;inset:0}
.hero-feature .over{position:absolute;inset:auto 0 0 0;padding:22px;background:linear-gradient(transparent,rgba(7,6,11,.95))}
.hero-feature h2{margin:6px 0 0;font-size:22px;line-height:1.3}
.hero-feature h2 a{color:#fff}

/* Glass panels */
.glass{background:var(--panel);border:1px solid rgba(255,255,255,.09);border-radius:var(--radius);backdrop-filter:blur(12px);padding:20px}
.glass h3{margin:0 0 14px;font-size:16px;letter-spacing:.04em;display:flex;align-items:center;gap:8px}
.glass h3::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--pink);box-shadow:var(--glow)}
.trend-list{list-style:none;margin:0;padding:0;counter-reset:t}
.trend-list li{counter-increment:t;display:flex;gap:12px;align-items:center;padding:9px 0;border-bottom:1px dashed rgba(255,255,255,.07)}
.trend-list li::before{content:counter(t,decimal-leading-zero);font-family:var(--display);color:var(--pink);font-size:15px;min-width:26px}
.trend-list a{color:var(--text);font-size:14px;line-height:1.4}
.trend-list a:hover{color:var(--pink)}

/* Thumb placeholder (tanpa gambar eksternal) */
.thumb{display:block;position:relative;aspect-ratio:16/10;overflow:hidden;background:#140d1f}
.thumb img{width:100%;height:100%;object-fit:cover;transition:.4s}
.thumb.ph{background:var(--ph,linear-gradient(135deg,#2a0b3d,#ff2bd6 140%))}
.thumb.ph::before{content:"";position:absolute;inset:0;background:
  radial-gradient(circle at 75% 30%,rgba(255,255,255,.18) 0 18%,transparent 19%),
  radial-gradient(circle at 70% 25%,var(--bg) 0 17%,transparent 18%),
  repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 1px,transparent 1px 4px)}
.thumb.ph span{position:absolute;left:14px;bottom:12px;font-family:var(--display);font-size:12px;letter-spacing:.2em;color:rgba(255,255,255,.75)}
.card:hover .thumb img{transform:scale(1.05)}

/* Category chips */
.chips{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin:8px 0 40px}
.chip{position:relative;border-radius:18px;overflow:hidden;min-height:150px;padding:18px;display:flex;align-items:flex-end;border:1px solid var(--line);color:#fff!important;font-weight:700;letter-spacing:.06em;background:var(--ph)}
.chip::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(7,6,11,.05) 15%,rgba(7,6,11,.95) 85%)}
.chip b{text-shadow:0 2px 8px #000}
.chip b{position:relative;z-index:1;font-size:14px}
.chip small{position:relative;z-index:1;display:block;font-weight:400;color:var(--muted);letter-spacing:0}
.chip:hover{transform:translateY(-4px);box-shadow:var(--glow)}

/* Sections & cards */
.sec-head{display:flex;align-items:end;justify-content:space-between;margin:10px 0 18px;gap:12px}
.sec-head h2{font-family:var(--display);font-size:22px;margin:0;text-transform:uppercase;letter-spacing:.05em}
.sec-head h2 span{color:var(--pink)}
.sec-head a{font-size:13px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid.g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--panel);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);overflow:hidden;transition:.25s;display:flex;flex-direction:column}
.card:hover{border-color:var(--pink);box-shadow:0 10px 40px rgba(255,43,214,.18);transform:translateY(-3px)}
.card-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.cat-tag{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);border:1px solid rgba(62,231,255,.35);padding:2px 9px;border-radius:99px}
.card h3{margin:0;font-size:17px;line-height:1.4}
.card h3 a{color:var(--text)}
.card h3 a:hover{color:var(--pink)}
.card p{margin:0;color:var(--muted);font-size:14px}
.meta{font-size:12px;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap;margin-top:auto}
.layout{display:grid;grid-template-columns:1fr 320px;gap:30px;margin:30px 0 60px}
.sidebar>*{margin-bottom:22px}
section.block{margin:44px 0}
.cta-band{border-radius:22px;padding:34px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  background:linear-gradient(120deg,rgba(255,43,214,.18),rgba(123,77,255,.14));border:1px solid var(--line)}
.cta-band h2{margin:0;font-family:var(--display);font-size:24px}

/* Single / page */
.archive-head{padding:44px 0 10px}
.archive-head h1{font-family:var(--display);text-transform:uppercase;font-size:clamp(28px,4vw,44px);margin:6px 0}
.archive-head p{color:var(--muted);max-width:760px}
.breadcrumb{font-size:13px;color:var(--muted)}
.breadcrumb a{color:var(--muted)}
.entry{background:var(--panel);border:1px solid rgba(255,255,255,.08);border-radius:22px;padding:clamp(20px,4vw,42px)}
.entry h1{font-size:clamp(26px,3.5vw,38px);line-height:1.25;margin:10px 0 12px}
.entry-content{font-size:17px}
.entry-content h2{font-size:24px;margin-top:34px;border-left:4px solid var(--pink);padding-left:12px}
.entry-content h3{font-size:19px;color:var(--pink2)}
.entry-content blockquote{margin:22px 0;padding:14px 20px;border-left:3px solid var(--cyan);background:rgba(62,231,255,.06);border-radius:0 12px 12px 0}
.entry-content table{width:100%;border-collapse:collapse;margin:20px 0;font-size:15px}
.entry-content th,.entry-content td{border:1px solid rgba(255,255,255,.1);padding:10px}
.entry-content th{background:rgba(255,43,214,.12);text-align:left}
.review-box{border:1px solid var(--line);border-radius:16px;padding:18px;background:rgba(255,43,214,.06);margin:24px 0}
.review-box .score{font-family:var(--display);font-size:40px;color:var(--pink);text-shadow:var(--glow)}
.entry-thumb{border-radius:16px;overflow:hidden;margin:16px 0 22px}
.tags a{display:inline-block;font-size:12px;border:1px solid var(--line);border-radius:99px;padding:3px 10px;margin:3px;color:var(--muted)}
.pagination{display:flex;gap:6px;justify-content:center;margin:34px 0}
.pagination .page-numbers{padding:8px 14px;border:1px solid var(--line);border-radius:10px;color:var(--text)}
.pagination .current{background:var(--pink);color:#fff}

/* Footer */
.site-footer{border-top:1px solid var(--line);background:rgba(7,6,11,.9);padding:46px 0 20px;margin-top:60px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
.site-footer h4{font-family:var(--display);font-size:13px;letter-spacing:.15em;color:var(--pink);margin:0 0 12px}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin:6px 0}
.site-footer a{color:var(--muted)}
.site-footer a:hover{color:var(--pink)}
.socials{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.socials a{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line);border-radius:10px}
.socials svg{width:18px;height:18px;fill:currentColor}
.copy{border-top:1px solid rgba(255,255,255,.06);margin-top:30px;padding-top:16px;font-size:13px;color:var(--muted);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

/* Age gate */
.agegate{position:fixed;inset:0;z-index:999;background:rgba(5,4,9,.92);backdrop-filter:blur(10px);display:none;place-items:center;padding:16px}
.agegate.show{display:grid}
.agegate .box{max-width:440px;text-align:center;border:1px solid var(--line);border-radius:22px;padding:30px;background:var(--bg2);box-shadow:0 0 60px rgba(255,43,214,.25)}
.agegate img{width:90px;margin:0 auto 12px}
.agegate h2{font-family:var(--display);margin:0 0 8px}
.agegate p{color:var(--muted);font-size:14px}
.agegate .acts{display:flex;gap:10px;justify-content:center;margin-top:16px}

/* Responsive */
@media(max-width:1024px){
  .hero-grid{grid-template-columns:1fr 1fr}.hero-grid .glass{grid-column:1/-1}
  .chips{grid-template-columns:repeat(3,1fr)}.grid.g4{grid-template-columns:repeat(2,1fr)}
  .layout{grid-template-columns:1fr}.foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .menu-toggle{display:block}.nav{display:none;width:100%;order:9}.nav.open{display:block}
  .head-in{flex-wrap:wrap}.nav ul{flex-direction:column}.logo img{height:44px}
  .hero-grid,.grid,.grid.g4{grid-template-columns:1fr}.chips{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr}.topbar .hide-m{display:none}
}

section.block[id]{scroll-margin-top:110px}
