/* ==========================================================
   GAYA JEPANG (dimuat setelah app.css)
   Dela Gothic One untuk judul (dimiringkan seperti judul anime),
   Shippori Mincho B1 untuk kanji besar, Zen Kaku Gothic New untuk teks.
   Semua font disimpan lokal di /assets/fonts.
   ========================================================== */
@font-face{font-family:"Dela Gothic";font-weight:400;font-display:swap;src:url(../fonts/dela-gothic-one.woff2) format("woff2")}
@font-face{font-family:"Shippori";font-weight:800;font-display:swap;src:url(../fonts/shippori-mincho-b1-800.woff2) format("woff2")}
@font-face{font-family:"Zen Kaku";font-weight:400;font-display:swap;src:url(../fonts/zen-kaku-gothic-new-400.woff2) format("woff2")}
@font-face{font-family:"Zen Kaku";font-weight:700;font-display:swap;src:url(../fonts/zen-kaku-gothic-new-700.woff2) format("woff2")}
:root{
  --f:"Zen Kaku","Shippori",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:"Dela Gothic","Shippori",Impact,sans-serif;
  --jp:"Shippori","Noto Serif JP","Yu Mincho",serif;
  --night:#0f1116; --moon:#e9e8e4; --moon-2:rgba(233,232,228,.8);
}
body{font-family:var(--f)}
.display,.shead h2,.cat h3,.ticker__track span,.mnav a,.ftr__word,.page-head h1,.buy h1,.order__hero h1,.narrow h1,.empty h2,.cart-empty h3,.logo__word,.score b,.facts b,.count b{font-family:var(--display);font-weight:400;font-stretch:100%;letter-spacing:-.01em}
.display{text-transform:none;line-height:1.04}
.slant{transform:skewX(-9deg);transform-origin:0 100%}
.logo__word{font-size:18px;letter-spacing:.03em;text-transform:uppercase}
.btn,.sec__more,.hdr__nav>a,.hdr__drop>button,.card__name,.badge{font-family:var(--f);font-weight:700}
.card__name{text-transform:none;font-size:16px;letter-spacing:0}
.badge{font-size:13px}

/* --- Hero malam: cetakan Koson diburamkan jadi langit, versi tajamnya dipajang seperti poster --- */
.hero--night{position:relative;min-height:calc(100svh - 34px - var(--hdr));background:var(--night);color:var(--moon);display:grid;align-items:center;overflow:hidden;isolation:isolate}
.hero--night::after{display:none}
.hero__blur{position:absolute;inset:-60px;z-index:-1;overflow:hidden}
.hero__blur img{width:100%;height:100%;object-fit:cover;filter:blur(38px) saturate(1.25) brightness(.5);transform:scale(1.15)}
.hero__blur::after{content:"";position:absolute;inset:0;background:rgba(15,17,22,.35)}
.hero__grid2{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(24px,5vw,80px);align-items:center;padding-block:clamp(48px,7vw,96px)}
.hero--night h1{font-size:clamp(46px,6vw,100px);line-height:1.06;color:var(--moon);max-width:12ch}
.hero--night .hero__sub{margin-top:28px;color:var(--moon-2);font-size:clamp(17px,1.4vw,20px);max-width:38ch}
.hero--night .hero__cta{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:34px}
.btn--moon{--bg:var(--moon);--fg:var(--night);border-color:var(--moon)}
.btn--moon:hover{--bg:var(--accent);--fg:#fff;border-color:var(--accent)}
.hero__link{color:var(--moon);font-weight:700;border-bottom:2px solid var(--accent);padding-bottom:3px}
.hero__link:hover{color:#fff}
.hero__poster{margin:0;justify-self:center;width:min(100%,420px);background:#ebeae6;padding:14px 14px 42px;transform:rotate(3deg);position:relative}
.hero__poster img{width:100%;height:auto;display:block}
.hero__poster::after{content:"\689F";position:absolute;right:16px;bottom:9px;font:800 20px/1 var(--jp);color:var(--accent)}
.hero__tate{position:absolute;right:clamp(10px,1.6vw,26px);top:50%;transform:translateY(-50%);writing-mode:vertical-rl;font:800 15px/1 var(--jp);letter-spacing:.42em;color:var(--moon-2);z-index:1;margin:0}
.hero__jp{font:800 18px/1 var(--jp);letter-spacing:.3em;color:#fff;opacity:.85}
.hero--photo h1{text-transform:none}
@media (prefers-reduced-motion:no-preference){
  .hero__poster{animation:posterIn 1.1s var(--ease) .15s both}
  .hero__blur img{animation:drift 22s ease-in-out infinite alternate}
}
@keyframes posterIn{from{opacity:0;transform:rotate(7deg) translateY(30px)}to{opacity:1;transform:rotate(3deg)}}
@keyframes drift{from{transform:scale(1.15) translate(0,0)}to{transform:scale(1.25) translate(-2%,1.5%)}}

/* --- Pita: katakana & kata miring --- */
.ticker{background-color:var(--accent);padding-block:14px}
.ticker__track span{font-size:24px;transform:skewX(-9deg);text-transform:none}
.ticker__track span.jp{font-family:var(--jp);font-weight:800;transform:none}

/* --- Judul bagian: kanji besar di belakang, judul Latin miring di depannya --- */
.shead{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:34px;padding-top:clamp(40px,5vw,72px);isolation:isolate}
.shead h2{font-size:clamp(34px,4.2vw,64px);line-height:1;position:relative}
.shead__kanji{position:absolute;left:-.04em;top:0;z-index:-1;font:800 clamp(84px,12vw,190px)/1 var(--jp);color:rgba(29,27,25,.075);letter-spacing:.02em;white-space:nowrap;pointer-events:none;user-select:none}
.shead__kanji--dark{color:rgba(233,232,228,.09)}
.shead--stack{display:block;margin-bottom:0}

/* --- Rilis berikut: latar blur dari foto produknya --- */
.sec--soon{position:relative;background:var(--night);color:var(--moon);overflow:hidden;isolation:isolate}
.sec--soon .hero__blur img{filter:blur(46px) saturate(1.3) brightness(.45)}
.soon{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,6vw,96px);align-items:center}
.soon__img{background:#e3e2de;aspect-ratio:4/5;overflow:hidden;transform:rotate(-2deg)}
.soon__img img{width:100%;height:100%;object-fit:cover}
.soon__body{position:relative;display:grid;gap:18px;isolation:isolate}
.soon__body .shead__kanji{top:-.55em}
.soon__body h2{font-size:clamp(38px,4.6vw,72px)}
.soon__when{font-weight:700;color:#ffb4a6}
.soon__desc{color:var(--moon-2);max-width:44ch;font-size:18px}
.sec--soon .count div{background:rgba(233,232,228,.1);color:var(--moon)}

/* --- Kartu produk & kategori --- */
.card__media{background:#e6e3dc}
.cat h3{font-size:clamp(26px,2.6vw,40px);text-transform:none}

/* --- Ulasan --- */
.revwidget{grid-template-columns:auto minmax(0,440px);margin-bottom:30px}

/* --- Cerita (malam) --- */
.sec--dark{background-color:var(--night)}
.story__body{position:relative;isolation:isolate}
.story__body .shead__kanji{top:-.6em}
.story__big{font-size:clamp(36px,4.2vw,68px)}
.story__fig img{transform:rotate(-1.5deg);background:#ebeae6;padding:12px}

/* --- Footer --- */
.ftr{background-color:var(--night)}
.ftr__word{font-size:clamp(44px,10.5vw,190px);white-space:nowrap;overflow:hidden;-webkit-text-stroke:1.2px rgba(233,232,228,.22);text-transform:uppercase;transform:skewX(-9deg)}

/* --- Halaman dalam memakai huruf yang sama --- */
.page-head h1,.narrow h1{text-transform:none}
.buy h1{text-transform:none;font-size:clamp(32px,3.4vw,52px)}

@media (max-width:900px){
  .hero__grid2{grid-template-columns:1fr}
  .hero__poster{order:-1;width:min(78%,340px)}
  .hero__tate{display:none}
  .hero--night h1{max-width:none}
  .soon{grid-template-columns:1fr}
  .soon__img{max-width:420px}
  .shead{flex-wrap:wrap}
}
@media (max-width:560px){
  .hero--night h1{font-size:40px}
  .shead h2{font-size:32px}
  .shead__kanji{font-size:84px}
}

:root{--gut:clamp(20px,3.2vw,40px)}

/* --- Halaman produk: tanpa garis pemisah & label kapital kecil --- */
.perks{border:0;background:#e6e4de;padding:20px 22px}
.perks li{font-size:15px}
.perks b{font-size:15px}
.buy__short{font-size:17px}
.acc{display:grid;gap:8px}
.acc details{border:0;background:#e6e4de;padding:0 18px}
.acc summary{text-transform:none;letter-spacing:0;font-size:16px;font-weight:700;padding:16px 0}
.acc .prose{padding-bottom:18px}
.review-note{border:0;background:#e6e4de}
.panel,.summary,.input,.textarea,.select,.size,.qty{background-color:#f5f5f3}
.ritem{border:0;background:#f5f5f3;padding:20px 22px;margin-bottom:8px}
.ritem:first-child{border:0}
.bars i{background:rgba(29,27,25,.12)}
@media (max-width:900px){
  .gallery__item{aspect-ratio:1/1;max-height:72svh}
}
/* --- ukuran teks minimal yang nyaman dibaca --- */
.announce{font-size:15px;height:38px}
.crumbs ol{font-size:14px}
.ftr__cols a{font-size:15px}
.ftr__bot{font-size:14px}
.tiny{font-size:14px}
.stock-note{font-size:15px}
.card__price{font-size:15px}
.rev__who,.rev__who a{font-size:14px}

/* --- Logo baru (partials/logo.php) --- */
.logo{gap:10px}
.logo__mark svg{width:auto;height:auto}
.logo__mark--a svg{width:26px;height:33px}
.logo__mark--b svg,.logo__mark--c svg{width:30px;height:30px}
.logo__word{display:grid;line-height:1;transform:skewX(-10deg);font-size:19px}
.logo__word small{display:none;font:700 13px/1 var(--f);letter-spacing:.32em;margin-top:6px;opacity:.75;transform:skewX(10deg)}
.ftr .logo__word small,.lock .logo__word small,.sheet__head .logo__word small{display:block}
.ftr__logo{display:flex;align-items:center;gap:14px;margin-bottom:26px;color:var(--moon)}
.ftr__logo .logo__mark--a svg{width:48px;height:60px}
.ftr__logo .logo__word{font-size:30px}
.lock .logo__mark--a svg{width:56px;height:70px}
.lock .logo__word{font-size:34px}
.hdr .logo__mark--a svg{width:30px;height:38px}
.hdr .logo__word{font-size:20px}

/* ==========================================================
   WARNA BRAND dari logo: biru muda #33c3e5 + hitam.
   Biru muda dipakai sebagai bidang/garis (atau teks di latar gelap),
   tidak untuk teks di latar terang karena kontrasnya rendah.
   Merah hanya untuk harga diskon.
   ========================================================== */
:root{--accent:#33c3e5;--accent-ink:#0b0b0d;--sale:#d23a1f}
.card__price .sale{color:var(--sale)}
.badge--sale{background:var(--sale);color:#fff}
.stock-note.low{color:var(--sale)}
.size.low::after{background:var(--sale)}
.cart-btn__n{background:var(--accent);color:var(--accent-ink)}
.link:hover,.sec__more:hover,.mnav a:hover{color:inherit;text-decoration-color:var(--accent)}
.ticker{background-color:var(--accent);color:var(--accent-ink)}
.ticker__track span,.ticker__track span:nth-child(even){color:var(--accent-ink);-webkit-text-stroke:0}
.ticker__track span::after{background:var(--accent-ink)}
.btn--moon:hover{--bg:var(--accent);--fg:var(--accent-ink);border-color:var(--accent)}
.hero__poster::after{color:var(--accent-ink)}
.soon__when{color:var(--accent)}
.hero__link{border-bottom-color:var(--accent)}
.hero__link:hover{color:var(--accent)}
.sec__more{border-bottom-color:var(--accent)}
.logo__mark svg,.logo__mark img{width:40px;height:40px;object-fit:contain}
.hdr .logo__mark svg,.hdr .logo__mark img{width:38px;height:38px}
.ftr__logo .logo__mark svg,.ftr__logo .logo__mark img{width:64px;height:64px}
.lock .logo__mark svg,.lock .logo__mark img{width:72px;height:72px}
.ftr__say em{color:var(--accent)}
.btn--wa{--bg:#0e7a3e}

/* --- Hero foto berganti (slider) seperti hypland --- */
.hero--photo .hero__media{opacity:0;transition:opacity 1.2s var(--ease)}
.hero--photo .hero__media.on{opacity:1}
.hero--photo::after{z-index:-1}
.hero__bars{position:absolute;left:var(--gut);right:var(--gut);bottom:22px;display:flex;gap:8px;z-index:2}
.hero__bars i{flex:1;height:3px;background:rgba(255,255,255,.3);overflow:hidden}
.hero__bars b{display:block;height:100%;width:0;background:var(--accent)}
.hero__bars i.on b{width:100%;transition:width 6s linear}
.hero__bars i.done b{width:100%}