@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Merriweather:wght@700&display=swap');

:root {
  --bg: #fafaf9;
  --bg-card: #ffffff;
  --bg-dark: #1c1917;
  --bg-section: #f5f5f4;
  --accent: #6366f1;
  --accent-light: #e0e7ff;
  --accent-dark: #4f46e5;
  --warm: #f97316;
  --green: #10b981;
  --text: #1c1917;
  --text-mid: #57534e;
  --text-light: #a8a29e;
  --border: #e7e5e4;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.12);
  --r: 16px;
  --r-sm: 10px;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Inter',system-ui,sans-serif; background:var(--bg); color:var(--text); line-height:1.6; }
a { color:var(--accent); text-decoration:none; transition:color .2s; }
a:hover { color:var(--accent-dark); }
.container { max-width:1240px; margin:0 auto; padding:0 1.5rem; }

/* ===== NAV ===== */
.nav-bar { background:rgba(255,255,255,.85); backdrop-filter:blur(20px); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:100; }
.nav-inner { display:flex; align-items:center; height:64px; gap:2rem; }
.brand { display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--text); flex-shrink:0; }
.brand-mark { width:36px; height:36px; background:var(--accent); color:#fff; border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:1.1rem; }
.brand-name { font-weight:800; font-size:1.3rem; }
.brand-dot { color:var(--accent); }
.nav-links { display:flex; gap:.25rem; }
.nl { padding:.5rem 1rem; color:var(--text-mid); font-weight:500; font-size:.9rem; border-radius:8px; transition:all .2s; }
.nl:hover,.nl.active { color:var(--accent); background:var(--accent-light); }
.nav-right { display:flex; align-items:center; gap:1rem; margin-left:auto; }
.search-box { display:flex; align-items:center; background:var(--bg-section); border:1px solid var(--border); border-radius:999px; padding:0 1rem; gap:.5rem; }
.search-box input { border:none; background:none; padding:.5rem 0; font-size:.9rem; width:180px; outline:none; color:var(--text); font-family:inherit; }
.search-icon { font-size:.9rem; }
.hamburger { display:none; background:none; border:none; font-size:1.4rem; cursor:pointer; color:var(--text); }

/* ===== HERO ===== */
.hero-section { position:relative; padding:6rem 0; overflow:hidden; min-height:80vh; display:flex; align-items:center; }
.hero-bg { position:absolute; inset:0; background:linear-gradient(135deg,#312e81 0%,#4f46e5 40%,#6366f1 70%,#818cf8 100%); }
.hero-bg::after { content:''; position:absolute; inset:0; background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.hero-content { position:relative; z-index:2; color:#fff; max-width:600px; }
.hero-badge { display:inline-block; background:rgba(255,255,255,.15); padding:.4rem 1rem; border-radius:999px; font-size:.85rem; font-weight:600; margin-bottom:1.5rem; backdrop-filter:blur(10px); }
.hero-section h1 { font-family:'Merriweather',serif; font-size:clamp(2.5rem,6vw,4rem); line-height:1.1; margin-bottom:1.25rem; }
.hero-desc { font-size:1.15rem; opacity:.85; margin-bottom:2rem; line-height:1.7; }
.hero-btns { display:flex; gap:1rem; flex-wrap:wrap; }
.hero-shelf { position:absolute; right:5%; top:50%; transform:translateY(-50%); z-index:2; display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; perspective:600px; }
.hero-book-3d { transform:rotateY(-12deg) rotateX(5deg); transition:transform .4s; border-radius:8px; overflow:hidden; box-shadow:8px 8px 30px rgba(0,0,0,.3); width:140px; }
.hero-book-3d:nth-child(2) { transform:rotateY(-6deg) rotateX(2deg) translateY(-20px); }
.hero-book-3d:nth-child(3) { transform:rotateY(4deg) rotateX(-3deg) translateY(10px); }
.hero-book-3d:nth-child(4) { transform:rotateY(8deg) rotateX(-2deg) translateY(-10px); }
.hero-book-3d:hover { transform:rotateY(0) rotateX(0) scale(1.08); }
.hero-book-3d img { width:100%; display:block; aspect-ratio:2/3; object-fit:cover; }

/* ===== CTA ===== */
.cta-btn { display:inline-flex; align-items:center; gap:.5rem; padding:.8rem 1.75rem; border-radius:var(--r-sm); font-weight:700; font-size:.95rem; cursor:pointer; transition:all .2s; border:2px solid transparent; text-decoration:none; }
.cta-fill { background:var(--accent); color:#fff; border-color:var(--accent); }
.cta-fill:hover { background:var(--accent-dark); border-color:var(--accent-dark); color:#fff; transform:translateY(-2px); box-shadow:0 6px 20px rgba(99,102,241,.35); }
.cta-ghost { background:transparent; color:#fff; border-color:rgba(255,255,255,.4); }
.cta-ghost:hover { background:rgba(255,255,255,.1); border-color:#fff; color:#fff; }

/* ===== SECTIONS ===== */
.sec { padding:4.5rem 0; }
.sec-grad { background:var(--bg-section); }
.sec-dark { background:var(--bg-dark); color:#fff; }
.sec-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:2rem; }
.sec-head h2 { font-size:1.5rem; font-weight:800; }
.sec-head.light h2 { color:#fff; }
.view-all { font-weight:700; font-size:.9rem; color:var(--accent); }

/* ===== BOOK SHELF ===== */
.shelf { display:grid; grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); gap:1.5rem; }
.bk { background:var(--bg-card); border-radius:var(--r); overflow:hidden; transition:transform .3s,box-shadow .3s; cursor:pointer; border:1px solid var(--border); position:relative; }
.bk:hover { transform:translateY(-8px); box-shadow:var(--shadow-lg); }
.bk-cover { position:relative; aspect-ratio:2/3; overflow:hidden; background:linear-gradient(135deg,#e7e5e4,#d6d3d1); }
.bk-cover img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.bk:hover .bk-cover img { transform:scale(1.06); }
.bk-tag { position:absolute; top:.5rem; left:.5rem; padding:.2rem .6rem; border-radius:4px; font-size:.65rem; font-weight:800; text-transform:uppercase; letter-spacing:.5px; }
.tag-pop { background:#6366f1; color:#fff; }
.tag-new { background:#10b981; color:#fff; }
.tag-free { background:#f97316; color:#fff; }
.tag-pick { background:#ec4899; color:#fff; }
.bk-body { padding:.7rem; }
.bk-title { font-size:.82rem; font-weight:700; line-height:1.3; margin-bottom:.2rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:var(--text); }
.bk-author { font-size:.72rem; color:var(--text-light); margin-bottom:.35rem; }
.bk-price { font-size:.85rem; font-weight:800; color:var(--accent); }
.bk-price .old { text-decoration:line-through; color:var(--text-light); font-weight:400; font-size:.72rem; margin-left:.25rem; }

/* ===== GENRES ===== */
.genre-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:1rem; }
.genre-tile { display:flex; flex-direction:column; align-items:center; gap:.6rem; padding:1.25rem .75rem; background:#fff; border-radius:var(--r); border:2px solid var(--border); text-decoration:none; color:var(--text); transition:all .3s; }
.genre-tile:hover { border-color:var(--gc,var(--accent)); transform:translateY(-4px); box-shadow:var(--shadow-lg); color:var(--gc,var(--accent)); }
.genre-tile span:first-child { font-size:1.8rem; }
.genre-tile span:last-child { font-weight:700; font-size:.85rem; }

/* ===== AD ===== */
.ad-wrap { padding:1.5rem 0; min-height:90px; text-align:center; }

/* ===== NEWSLETTER ===== */
.nl-section { background:linear-gradient(135deg,#312e81,#6366f1); padding:4.5rem 0; color:#fff; text-align:center; }
.nl-section h2 { font-family:'Merriweather',serif; font-size:2rem; margin-bottom:.75rem; }
.nl-section p { opacity:.85; margin-bottom:2rem; }
.nl-form { display:flex; gap:.75rem; max-width:460px; margin:0 auto; }
.nl-form input { flex:1; padding:.85rem 1.25rem; border:none; border-radius:var(--r-sm); font-size:1rem; outline:none; font-family:inherit; }
.nl-form .cta-fill { white-space:nowrap; }

/* ===== FOOTER ===== */
.ft { background:var(--bg-dark); color:#d6d3d1; padding:4rem 0 0; }
.ft .brand { color:#fff; margin-bottom:1rem; }
.ft .brand-mark { background:var(--accent); }
.ft .brand-dot { color:#818cf8; }
.ft-inner { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:2rem; padding-bottom:3rem; border-bottom:1px solid rgba(255,255,255,.08); }
.ft-col > p { font-size:.85rem; line-height:1.6; color:#a8a29e; margin-top:.75rem; }
.ft-col h4 { color:#fff; margin-bottom:1rem; font-size:.9rem; }
.ft-col a { display:block; color:#a8a29e; font-size:.82rem; padding:.25rem 0; transition:color .2s; }
.ft-col a:hover { color:#818cf8; }
.ft-bottom { padding:1.5rem 0; text-align:center; font-size:.78rem; color:#78716c; }
.ft-bottom a { color:#818cf8; }

/* ===== PAGE LAYOUT ===== */
.page-top { background:linear-gradient(135deg,#312e81,#6366f1); padding:3rem 0; color:#fff; text-align:center; }
.page-top h1 { font-family:'Merriweather',serif; font-size:2rem; }
.page-top p { opacity:.8; margin-top:.5rem; }
.main-sidebar { display:grid; grid-template-columns:1fr 280px; gap:2rem; padding:2rem 0; }
.side { position:sticky; top:80px; align-self:start; }
.side-card { background:#fff; border:1px solid var(--border); border-radius:var(--r); padding:1.25rem; margin-bottom:1.5rem; }
.side-card h3 { font-size:.95rem; margin-bottom:.75rem; padding-bottom:.5rem; border-bottom:1px solid var(--border); }
.side-card a { display:block; padding:.3rem 0; font-size:.82rem; color:var(--text-mid); }

/* STATIC PAGES */
.static { max-width:700px; margin:0 auto; padding:3rem 1.5rem; }
.static h1 { font-family:'Merriweather',serif; font-size:2rem; margin-bottom:1.5rem; }
.static h2 { color:var(--accent); font-size:1.2rem; margin:2rem 0 .75rem; }
.static p { color:var(--text-mid); line-height:1.8; margin-bottom:1rem; }
.contact-form { display:flex; flex-direction:column; gap:1rem; margin-top:1.5rem; }
.contact-form input,.contact-form textarea { padding:.85rem 1rem; border:1px solid var(--border); border-radius:var(--r-sm); font-size:1rem; font-family:inherit; outline:none; transition:border .2s; }
.contact-form input:focus,.contact-form textarea:focus { border-color:var(--accent); }
.contact-form textarea { min-height:150px; resize:vertical; }

/* BOOK DETAIL */
.bk-detail { display:grid; grid-template-columns:280px 1fr; gap:3rem; margin-top:1rem; }
.bk-detail-cover { border-radius:var(--r); overflow:hidden; box-shadow:0 12px 40px rgba(0,0,0,.15); }
.bk-detail-cover img { width:100%; aspect-ratio:2/3; object-fit:cover; }
.bk-detail-info h1 { font-family:'Merriweather',serif; font-size:1.8rem; margin-bottom:.5rem; }
.bk-detail-author { color:var(--text-mid); margin-bottom:1.25rem; }
.bk-detail-author a { color:var(--accent); }
.bk-stars { display:flex; align-items:center; gap:.4rem; margin-bottom:1.25rem; font-size:1.1rem; }
.bk-stars .star-on { color:#f59e0b; }
.bk-stars .star-off { color:#d6d3d1; }
.bk-stars .rating-val { font-weight:800; }
.bk-stars .rating-cnt { color:var(--text-light); font-size:.85rem; }
.bk-price-row { display:flex; align-items:baseline; gap:1rem; margin-bottom:1.5rem; }
.bk-price-big { font-size:2rem; font-weight:900; color:var(--accent); }
.bk-price-old { font-size:1rem; text-decoration:line-through; color:var(--text-light); }
.bk-price-off { background:#dcfce7; color:#16a34a; padding:.2rem .6rem; border-radius:4px; font-size:.75rem; font-weight:800; }
.bk-formats { display:flex; gap:.6rem; margin-bottom:1.5rem; }
.bk-fmt { padding:.5rem 1.25rem; border:2px solid var(--border); border-radius:var(--r-sm); background:#fff; font-weight:700; font-size:.82rem; cursor:pointer; transition:all .2s; font-family:inherit; }
.bk-fmt.on,.bk-fmt:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-light); }
.bk-actions { display:flex; gap:1rem; margin-bottom:2rem; }
.btn-buy { background:var(--accent); color:#fff; padding:1rem 2.5rem; border:none; border-radius:var(--r-sm); font-size:1.05rem; font-weight:800; cursor:pointer; transition:all .2s; font-family:inherit; }
.btn-buy:hover { background:var(--accent-dark); transform:translateY(-2px); box-shadow:0 6px 20px rgba(99,102,241,.35); }
.btn-cart { background:transparent; color:var(--accent); border:2px solid var(--accent); padding:1rem 2rem; border-radius:var(--r-sm); font-size:1.05rem; font-weight:800; cursor:pointer; transition:all .2s; font-family:inherit; }
.btn-cart:hover { background:var(--accent-light); }
.bk-meta { display:grid; grid-template-columns:auto 1fr; gap:.4rem 1.5rem; padding:1.25rem; background:var(--bg-section); border-radius:var(--r-sm); margin-bottom:2rem; font-size:.9rem; }
.bk-meta .ml { font-weight:700; }
.bk-meta .mv { color:var(--text-mid); }
.bk-desc { color:var(--text-mid); line-height:1.8; }
.bk-desc h3 { color:var(--text); margin-bottom:.75rem; }

/* LOADING */
.loading { text-align:center; padding:3rem; color:var(--text-light); }
.loading::after { content:''; display:inline-block; width:24px; height:24px; border:3px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin .7s linear infinite; margin-left:.5rem; vertical-align:middle; }
@keyframes spin { to { transform:rotate(360deg); } }

/* RESPONSIVE */
@media(max-width:1024px) {
  .hero-section { flex-direction:column; text-align:center; }
  .hero-content { margin:0 auto; }
  .hero-btns { justify-content:center; }
  .hero-shelf { position:static; transform:none; margin:2rem auto 0; max-width:320px; }
  .main-sidebar { grid-template-columns:1fr; }
  .side { position:static; }
  .ft-inner { grid-template-columns:1fr 1fr; }
}
@media(max-width:768px) {
  .nav-links { display:none; }
  .nav-links.open { display:flex; flex-direction:column; position:absolute; top:64px; left:0; right:0; background:#fff; padding:1rem; border-bottom:1px solid var(--border); z-index:99; }
  .hamburger { display:block; }
  .search-box input { width:120px; }
  .hero-shelf { grid-template-columns:repeat(2,1fr); }
  .shelf { grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:1rem; }
  .ft-inner { grid-template-columns:1fr; }
  .bk-detail { grid-template-columns:1fr; max-width:400px; margin:0 auto; }
}