/* KİTAPLA — tasarım sistemi */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#F3EAD3; --surface:#FCF8EE; --surface2:#FBF3E2; --line:#E6D8BC;
  --ink:#3E2723; --muted:#8C7B6B; --faint:#B4A594;
  --accent:#C65D47; --accent-strong:#a84734; --accent-soft:#F4DCD3;
  --sage:#8FA89B; --sage-soft:#E1E9E2; --sage-ink:#48594F;
  --espresso:#3E2723;
  --radius:14px; --radius-lg:18px;
  --shadow:0 14px 30px rgba(62,39,35,.10);
  --shadow-lg:0 20px 44px rgba(62,39,35,.16);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#211B17; --surface:#2A231D; --surface2:#2F271F; --line:#3A2F27;
  --ink:#ECE3D4; --muted:#A99C88; --faint:#8A7C6A;
  --accent:#D6785F; --accent-soft:#3A2A23; --sage-soft:#26312B; --sage-ink:#B7C9BD;
  --shadow:0 14px 30px rgba(0,0,0,.4); --shadow-lg:0 20px 44px rgba(0,0,0,.5);
}}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--bg); color:var(--ink);
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif; }
a{ color:var(--accent); text-decoration:none; } a:hover{ color:var(--accent-strong); }
img{ max-width:100%; }
h1,h2,h3{ text-wrap:balance; }

.container{ max-width:1200px; margin:0 auto; padding:0 32px; }
.container-narrow{ max-width:820px; margin:0 auto; padding:0 32px; }

/* NAV */
.nav{ display:flex; align-items:center; gap:28px; padding:16px 32px; background:var(--surface);
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.4px; font-size:20px; color:var(--ink); }
.brand svg{ display:block; }
.nav-links{ display:flex; align-items:center; gap:4px; font-size:14px; font-weight:700; }
.nav-links a{ color:var(--muted); padding:8px 14px; border-radius:9px; }
.nav-links a:hover{ color:var(--ink); background:var(--bg); }
.nav-links a.active{ color:var(--accent); background:var(--accent-soft); }
.nav-spacer{ flex:1; }
.avatar{ width:38px; height:38px; border-radius:50%; background:var(--sage); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; }

/* BUTONLAR */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  font-family:inherit; font-size:15px; font-weight:800; border-radius:12px; padding:12px 22px;
  border:1px solid transparent; text-decoration:none; }
.btn-primary{ background:var(--accent); color:#fff; }
.btn-primary:hover{ background:var(--accent-strong); color:#fff; }
.btn-soft{ background:var(--surface); color:var(--ink); border-color:var(--line); }
.btn-soft:hover{ color:var(--ink); }
.btn-sage{ background:var(--sage); color:#fff; }
.btn-block{ display:flex; width:100%; }
.btn-sm{ padding:9px 15px; font-size:13px; border-radius:10px; }

/* KART */
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); }
.card-pad{ padding:20px; }

/* ROZET */
.badge{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700;
  border-radius:8px; padding:5px 10px; }
.badge-sage{ color:var(--sage-ink); background:var(--sage-soft); }
.badge-accent{ color:var(--accent); background:var(--accent-soft); }
.badge-muted{ color:var(--muted); background:var(--bg); border:1px solid var(--line); }

/* KİTAP KAPAK (renk title'dan) */
.cover{ border-radius:10px; box-shadow:inset -7px 0 0 rgba(0,0,0,.16); display:flex;
  flex-direction:column; justify-content:flex-end; padding:12px; color:#F3E7D6; }
.cover .ct{ font-size:14px; font-weight:800; line-height:1.1; }
.cover .ca{ font-size:10px; margin-top:3px; opacity:.85; }

/* FORM */
.field{ margin-bottom:16px; }
.label{ font-size:13px; font-weight:700; margin-bottom:6px; display:block; }
.input, textarea.input, select.input{ width:100%; background:var(--surface); border:1px solid var(--line);
  border-radius:12px; padding:13px 14px; font-size:14px; font-weight:600; color:var(--ink);
  font-family:inherit; }
.input:focus{ outline:2px solid var(--accent); outline-offset:1px; border-color:transparent; }
textarea.input{ min-height:84px; resize:vertical; }

/* YARDIMCI */
.muted{ color:var(--muted); }
.stack{ display:flex; flex-direction:column; }
.row{ display:flex; align-items:center; }
.gap-8{ gap:8px; } .gap-10{ gap:10px; } .gap-12{ gap:12px; } .gap-14{ gap:14px; } .gap-16{ gap:16px; }
.grid{ display:grid; }
.section{ padding:64px 0; }
.eyebrow{ font-size:13px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; color:var(--accent); }

.alert{ border-radius:12px; padding:13px 15px; font-size:14px; font-weight:600; margin-bottom:16px; }
.alert-error{ background:var(--accent-soft); color:var(--accent-strong); }
.alert-ok{ background:var(--sage-soft); color:var(--sage-ink); }

/* FOOTER */
.footer{ border-top:1px solid var(--line); padding:36px 32px; display:flex; align-items:center;
  justify-content:space-between; flex-wrap:wrap; gap:16px; }
.footer .links{ display:flex; gap:24px; font-size:14px; color:var(--muted); font-weight:600; }

/* Uygulama navigasyonu tek satıra sığmayacak kadar uzun (üye ~1136px,
   yönetici ~1232px). Bağlantıları gizlemek yerine alta kaydırılabilir bir
   şeride alıyoruz ki dar ekranda da her bölüme erişilebilsin. */
@media (max-width:1280px){
  .nav{ flex-wrap:wrap; gap:12px; padding:12px 22px; }
  .nav-spacer{ display:none; }
  .nav > .row{ margin-left:auto; gap:10px; }
  .nav-links{ order:3; width:100%; overflow-x:auto; gap:2px; scrollbar-width:none; }
  .nav-links::-webkit-scrollbar{ display:none; }
  .nav-links a{ white-space:nowrap; padding:7px 11px; }
}
@media (max-width:720px){
  .nav{ padding:12px 18px; }
  .btn{ padding:10px 16px; font-size:14px; }
  .btn-sm{ padding:8px 13px; }
  .container,.container-narrow{ padding:0 18px; }
  .section{ padding:44px 0; }
  .footer{ padding:28px 18px; }
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

/* Giriş/kayıt ekranı: geniş ekranda iki sütun, dar ekranda tek sütun */
.split-auth{ display:grid; grid-template-columns:minmax(0,520px) 1fr; }
@media (max-width:860px){
  .split-auth{ grid-template-columns:1fr; }
  .split-auth > div:first-child{ padding:28px !important; min-height:auto; }
  .split-auth > div:first-child > div{ margin-top:22px !important; }
  .split-auth > div:first-child div[style*="font-size:38px"]{ font-size:27px !important; }
  .split-auth > div:last-child{ padding:28px !important; }
}

/* ÇOK SÜTUNLU DÜZENLER
   Sabit piksel sütunlar dar ekranda taşıyordu; hepsi tek sütuna iner. */
.split-side{ display:grid; grid-template-columns:244px 1fr; gap:28px; align-items:start; }
.split-main{ display:grid; grid-template-columns:1fr 320px; gap:28px; align-items:start; }
.split-detail{ display:grid; grid-template-columns:300px 1fr 320px; gap:32px; align-items:start; }
.split-hero{ display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; }
.duo{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.duo-sm{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.split-qty{ display:grid; grid-template-columns:140px 1fr; gap:16px; }

@media (max-width:980px){
  .split-detail{ grid-template-columns:1fr; gap:24px; }
  .split-main{ grid-template-columns:1fr; gap:24px; }
  .split-hero{ grid-template-columns:1fr; gap:28px; }
}
@media (max-width:720px){
  .split-side{ grid-template-columns:1fr; gap:20px; }
  .duo, .duo-sm, .split-qty{ grid-template-columns:1fr; }
}

/* Sabit sütun sayıları dar ekranda daralıyor: kademeli olarak azalt */
.cols-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.cols-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.cols-3-sm{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:900px){
  .cols-4{ grid-template-columns:repeat(2,1fr); }
  .cols-3{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .cols-3-sm{ grid-template-columns:1fr; }
}

/* Ana sayfa görseli dekoratiftir: dar ekranda kırpılır, taşma yapmaz */
.hero-art{ position:relative; height:420px; }
@media (max-width:980px){
  .hero-art{ height:340px; overflow:hidden; border-radius:28px; }
}
@media (max-width:560px){
  .hero-art{ height:280px; }
}