/* =========================================================
   premium.css — lapisan "mahal": tekstur, cahaya, kedalaman
   Dimuat SETELAH style.css + animations.css. Aditif, hanya
   menambah polish (shadow, gradient, tekstur, spotlight hover),
   tidak mengubah layout atau logika apa pun.
   ========================================================= */

:root{
  --spotlight: radial-gradient(360px circle at var(--px,50%) var(--py,50%), rgba(255,255,255,.10), transparent 55%);
  --spotlight-light: radial-gradient(360px circle at var(--px,50%) var(--py,50%), rgba(193,96,62,.14), transparent 60%);
  --shadow-tint: 0 10px 30px -8px rgba(42,46,31,.28), 0 2px 6px rgba(42,46,31,.10);
  --shadow-tint-lg: 0 26px 60px -18px rgba(42,46,31,.36), 0 6px 18px rgba(42,46,31,.14);
  --ring-gold: 0 0 0 1px rgba(193,96,62,.35), 0 0 0 6px rgba(193,96,62,.08);
}
[data-theme="dark"]{
  --shadow-tint: 0 10px 30px -8px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.3);
  --shadow-tint-lg: 0 26px 60px -18px rgba(0,0,0,.65), 0 6px 18px rgba(0,0,0,.35);
}

/* ---------- Tekstur kertas halus di seluruh halaman ---------- */
body{position:relative;}
body::before{
  content:"";
  position:fixed;inset:0;z-index:2000;pointer-events:none;
  opacity:.035;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="dark"] body::before{opacity:.05;mix-blend-mode:overlay;}

/* ---------- Header: garis gradasi tanda tangan + kaca lebih dalam ---------- */
.site-header{backdrop-filter:saturate(200%) blur(14px);background:color-mix(in srgb, var(--surface) 88%, transparent);}
.site-header::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg, transparent, var(--gold) 25%, var(--teal) 50%, var(--gold) 75%, transparent);
  opacity:.5;
}
.site-header{position:sticky;}

/* ---------- Eyebrow lebih editorial ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:8px;}
.eyebrow::before{content:"";display:inline-block;width:18px;height:1.5px;background:var(--gold-dark);}
[data-theme="dark"] .eyebrow::before{background:var(--gold);}

/* ---------- Judul besar: sedikit kedalaman ---------- */
.hero h1,.catalog-hero h1,.ebook-hero h1{text-shadow:0 1px 0 rgba(255,255,255,.4);}
[data-theme="dark"] .hero h1,[data-theme="dark"] .catalog-hero h1,[data-theme="dark"] .ebook-hero h1{text-shadow:none;}

/* ---------- Angka statistik: gradasi emas-terracotta ---------- */
.stat-item strong,.detail-stats strong,.auth-art .stat-row strong{
  background:linear-gradient(120deg, var(--gold) 0%, var(--gold-dark) 55%, var(--gold) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.detail-stats strong svg{-webkit-text-fill-color:initial;}

/* ---------- Tombol: emboss + shadow berwarna ---------- */
.btn-primary{
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset, 0 -2px 10px rgba(0,0,0,.18) inset, 0 10px 24px -10px rgba(42,46,31,.55);
}
.btn-primary:hover{box-shadow:0 1px 0 rgba(255,255,255,.16) inset, 0 -2px 10px rgba(0,0,0,.2) inset, 0 16px 30px -12px rgba(42,46,31,.6);}
.btn-gold{
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 -2px 10px rgba(0,0,0,.14) inset, 0 12px 26px -10px rgba(156,75,48,.55);
}
.btn-gold:hover{box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 -2px 10px rgba(0,0,0,.16) inset, 0 18px 32px -12px rgba(156,75,48,.6);}
.btn-outline:hover{box-shadow:var(--shadow-sm);}

/* ---------- Kartu: kedalaman + spotlight yang mengikuti kursor ---------- */
.book-card,.category-card,.ebook-card{
  box-shadow:var(--shadow-tint);
  position:relative;
}
.book-card:hover,.category-card:hover,.ebook-card:hover{box-shadow:var(--shadow-tint-lg), var(--ring-gold);}
.book-card::after,.category-card::after,.ebook-card::after{
  content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
  background:var(--spotlight-light);opacity:0;transition:opacity .35s ease;border-radius:inherit;
}
.book-card:hover::after,.category-card:hover::after,.ebook-card:hover::after{opacity:1;}
[data-theme="dark"] .book-card::after,[data-theme="dark"] .category-card::after,[data-theme="dark"] .ebook-card::after{background:var(--spotlight);}

/* garis "spine" emas tipis di atas setiap kartu buku, senada ebook-card */
.book-card{border-top:2px solid transparent;background-image:linear-gradient(var(--surface),var(--surface)),linear-gradient(90deg,var(--gold),var(--teal));background-origin:border-box;background-clip:padding-box, border-box;}

/* ---------- Hero: mesh gradient ambient lebih kaya ---------- */
.hero::after{
  content:"";position:absolute;inset:auto auto -20% -6%;width:38%;aspect-ratio:1/1;
  background:radial-gradient(circle,rgba(47,107,82,.14),transparent 70%);
  z-index:-1;pointer-events:none;filter:blur(2px);
}
.hero-art img{filter:drop-shadow(0 28px 40px rgba(42,46,31,.22));}
[data-theme="dark"] .hero-art img{filter:drop-shadow(0 28px 44px rgba(0,0,0,.55));}

/* ---------- CTA band: border gradasi tipis ---------- */
.cta-band{
  position:relative;border:1px solid transparent;
  background:
    linear-gradient(120deg,var(--navy-900),var(--navy-700)) padding-box,
    linear-gradient(120deg,var(--gold),var(--teal),var(--gold)) border-box;
}

/* ---------- Auth art: kilau halus mengikuti kursor ---------- */
.auth-art{background-blend-mode:normal;}
.auth-art::after{
  content:"";position:absolute;inset:0;pointer-events:none;background:var(--spotlight);opacity:0;transition:opacity .4s ease;
}
.auth-art:hover::after{opacity:1;}

/* ---------- Scrollbar bertema ---------- */
::-webkit-scrollbar{width:11px;height:11px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:999px;border:2.5px solid var(--bg);}
::-webkit-scrollbar-thumb:hover{background:var(--gold-dark);}
html{scrollbar-color:var(--border) var(--bg);scrollbar-width:thin;}

/* ---------- Fokus lebih halus & mewah ---------- */
:focus-visible{outline:none;box-shadow:0 0 0 2px var(--surface), 0 0 0 4.5px var(--gold);border-radius:6px;}

/* ---------- Search box: kilau tepi saat fokus ---------- */
.search-box{transition:box-shadow .3s ease, border-color .3s ease;}
.search-box:focus-within{border-color:var(--gold-dark);box-shadow:var(--shadow-md), 0 0 0 4px color-mix(in srgb, var(--gold) 16%, transparent);}

/* ---------- Modal ebook: bayangan lebih dalam + tepi kaca ---------- */
.ebook-modal-card{box-shadow:var(--shadow-tint-lg);border:1px solid color-mix(in srgb, var(--border) 70%, transparent);}
.ebook-modal-backdrop{background:rgba(20,16,8,.58);backdrop-filter:blur(4px) saturate(140%);}

/* ---------- Transisi halaman: fade lembut saat berpindah tautan internal ---------- */
body.is-leaving{animation:pageOut .32s cubic-bezier(.4,0,.2,1) forwards;}
@keyframes pageOut{to{opacity:0;transform:translateY(-6px);}}

@media (prefers-reduced-motion: reduce){
  body.is-leaving{animation:none;}
  .book-card::after,.category-card::after,.ebook-card::after,.auth-art::after{display:none;}
}

/* =========================================================
   Kartu jenjang (Jelajahi / Cari berdasarkan jenjang) — panel
   ilustratif penuh warna menggantikan kotak ikon kecil lama.
   ========================================================= */
.category-grid{grid-template-columns:repeat(5,1fr);gap:16px;}
.category-card{
  position:relative;isolation:isolate;overflow:hidden;
  padding:0;border:none;border-radius:22px;min-height:260px;
  display:flex;flex-direction:column;justify-content:flex-end;
  background:
    radial-gradient(120% 90% at 15% 0%, color-mix(in srgb, var(--cat-color) 55%, transparent), transparent 60%),
    linear-gradient(165deg, var(--cat-color) 0%, var(--cat-color-dark) 100%);
  box-shadow:var(--shadow-tint);
  transform:translateY(0);
  transition:transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease;
}
.category-card:hover{transform:translateY(-8px) scale(1.015);box-shadow:var(--shadow-tint-lg);}

/* pita emas tipis di tepi atas, senada spine kartu buku */
.category-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:5px;z-index:3;
  background:linear-gradient(90deg,rgba(255,255,255,.85),var(--gold) 45%,rgba(255,255,255,.2));
}

/* ---- foto asli sebagai latar penuh kartu ---- */
.category-photo{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.category-card:hover .category-photo{transform:scale(1.08);}

/* overlay gradasi warna khas jenjang DI ATAS foto, supaya teks tetap
   terbaca dan foto tetap senada dengan identitas warna GM Perpustakaan */
.category-card::after{
  z-index:1;opacity:1;
  background-image:
    radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px),
    linear-gradient(165deg, color-mix(in srgb, var(--cat-color) 62%, transparent) 0%, color-mix(in srgb, var(--cat-color-dark) 82%, transparent) 100%);
  background-size:14px 14px, cover;
}

/* jika foto belum diganti / gagal dimuat, tampilkan gradasi warna polos
   supaya kartu tetap rapi (tidak menampilkan ikon gambar rusak) */
.category-card.no-photo{
  background:
    radial-gradient(120% 90% at 15% 0%, color-mix(in srgb, var(--cat-color) 55%, transparent), transparent 60%),
    linear-gradient(165deg, var(--cat-color) 0%, var(--cat-color-dark) 100%);
}
.category-card.no-photo::after{opacity:.5;background-image:radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px);background-size:14px 14px;}

.category-count{
  position:absolute;top:26px;right:22px;z-index:2;
  font-family:var(--font-mono);font-size:.68rem;font-weight:600;letter-spacing:.03em;
  color:#fff;background:rgba(20,16,8,.28);border:1px solid rgba(255,255,255,.25);
  padding:5px 10px;border-radius:999px;backdrop-filter:blur(4px);
}

.category-body{
  position:relative;z-index:2;padding:20px 22px 22px;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.32) 55%, rgba(0,0,0,.5));
}
.category-body h3{
  color:#fff;font-size:1.28rem;margin-bottom:5px;
  text-shadow:0 2px 10px rgba(0,0,0,.25);
}
.category-body span{
  color:rgba(255,255,255,.82);font-size:.78rem;line-height:1.5;
  display:block;max-width:22ch;
}

.category-arrow{
  position:absolute;bottom:20px;right:20px;z-index:2;
  width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--navy-900);
  display:flex;align-items:center;justify-content:center;
  transform:translateX(46px);opacity:0;
  transition:transform .35s cubic-bezier(.22,1,.36,1), opacity .3s ease;
}
.category-arrow svg{width:16px;height:16px;}
.category-card:hover .category-arrow{transform:translateX(0);opacity:1;}

@media (max-width:1080px){
  .category-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:720px){
  .category-grid{grid-template-columns:repeat(2,1fr);}
  .category-card{min-height:210px;}
}
@media (max-width:520px){
  .category-grid{grid-template-columns:1fr 1fr;gap:12px;}
}

/* =========================================================
   Dorongan tipografi & kedalaman tambahan supaya terasa
   benar-benar berbeda dari versi sebelumnya, bukan sekadar
   lapisan animasi tipis.
   ========================================================= */
.hero h1{font-size:clamp(2.5rem,4.4vw,4rem);letter-spacing:-.01em;}
.hero p.lead{font-size:1.14rem;}
.section-head h2{font-size:clamp(1.7rem,2.8vw,2.35rem);}
.section-head h2 em,
.hero h1 em{
  font-style:italic;
  background:linear-gradient(100deg,var(--gold-dark),var(--gold));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

.search-box{padding:8px 8px 8px 24px;border-radius:999px;box-shadow:var(--shadow-tint);}
.search-box .btn{border-radius:999px;}

.stat-strip{position:relative;overflow:hidden;}
.stat-strip::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(60% 140% at 90% 0%, rgba(193,96,62,.18), transparent 60%);
}
.stat-strip .container{position:relative;z-index:1;}
.stat-item{position:relative;padding-left:16px;}
.stat-item::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:3px;border-radius:3px;background:var(--gold);}