/* ============================================================
   TRABS YELKEN — Kütüphane / Ansiklopedi şablonu
   Tema: "Seyir Defteri" — koyu harita lacivert zemin,
   parşömen içerik panelleri, pusula okuma sistemi.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;1,9..144,500&family=Inter:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root{
  --bg:            #0c1826;
  --bg-panel:      #14263a;
  --bg-panel-2:    #1b3247;
  --line-dark:     #2a4258;

  --parchment:     #f4ecd8;
  --parchment-2:   #ece0c3;
  --ink:           #21302f;
  --ink-soft:      #55625d;

  --verdigris:     #4f9089;
  --verdigris-dim: #3a6c68;
  --brass:         #c89a4b;
  --brass-bright:  #e0b667;
  --rope:          #b99a6e;

  --font-display:  'Fraunces', serif;
  --font-body:     'Inter', sans-serif;
  --font-mono:     'Space Mono', monospace;

  --radius: 3px;
  --max-w: 1180px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--parchment);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--verdigris); text-decoration:none; }
a:hover{ text-decoration:underline; text-decoration-color:var(--verdigris-dim); }
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:2px solid var(--brass-bright);
  outline-offset:2px;
}
img{ max-width:100%; display:block; }

/* faint compass-rose watermark used behind headers/infobox */
.compass-mark{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(circle at center, transparent 0 38%, var(--brass) 38.3% 38.6%, transparent 38.9%),
    repeating-conic-gradient(from 0deg, transparent 0deg 43deg, rgba(200,154,75,.18) 43deg 45deg);
  opacity:.10;
}

/* ---------- top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:40;
  background:var(--bg);
  border-bottom:1px solid var(--line-dark);
}
.topbar-inner{
  max-width:var(--max-w); margin:0 auto;
  display:flex; align-items:center; gap:24px;
  padding:14px 20px;
}
.wordmark{
  font-family:var(--font-display);
  font-weight:600; font-size:1.35rem;
  color:var(--parchment); letter-spacing:.01em;
  display:flex; align-items:baseline; gap:8px;
}
.wordmark small{
  font-family:var(--font-mono); font-size:.62rem;
  color:var(--brass); font-weight:400; letter-spacing:.12em;
  text-transform:uppercase;
}
.topnav{ display:flex; gap:22px; margin-left:auto; font-size:.88rem; }
.topnav a{ color:var(--parchment-2); }
.topnav a:hover{ color:var(--brass-bright); text-decoration:none; }
.search{
  display:flex; align-items:center; gap:6px;
  background:var(--bg-panel); border:1px solid var(--line-dark);
  border-radius:var(--radius); padding:6px 10px;
}
.search input{
  background:transparent; border:0; color:var(--parchment);
  font-family:var(--font-mono); font-size:.78rem; width:150px;
}
.search input:focus{ outline:none; }
.search svg{ width:14px; height:14px; opacity:.6; }
.nav-toggle{ display:none; background:none; border:1px solid var(--line-dark); color:var(--parchment); padding:6px 10px; border-radius:var(--radius); margin-left:auto; }

/* ---------- breadcrumb ---------- */
.breadcrumb{
  max-width:var(--max-w); margin:0 auto; padding:14px 20px 0;
  font-family:var(--font-mono); font-size:.72rem;
  color:var(--ink-soft); letter-spacing:.02em;
}
.breadcrumb a{ color:var(--verdigris); }
.breadcrumb span{ color:#7c8a86; margin:0 6px; }

/* ---------- layout shell ---------- */
.shell{
  max-width:var(--max-w); margin:0 auto;
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  gap:0;
  padding:24px 20px 80px;
}
.shell.with-infobox{ grid-template-columns:220px minmax(0,1fr) 280px; }

/* ---------- left sidebar: library tree ---------- */
.sidebar{
  padding-right:22px; border-right:1px solid var(--line-dark);
}
.sidebar h2{
  font-family:var(--font-mono); font-size:.68rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--brass); margin:0 0 10px;
}
.sidebar-group{ margin-bottom:26px; }
.sidebar-group ul{ list-style:none; margin:0; padding:0; }
.sidebar-group li{ margin-bottom:6px; }
.sidebar-group a{
  font-size:.86rem; color:var(--parchment-2);
  display:flex; justify-content:space-between; gap:6px;
}
.sidebar-group a:hover{ color:var(--brass-bright); text-decoration:none; }
.sidebar-group a .count{
  font-family:var(--font-mono); font-size:.68rem; color:var(--ink-soft);
}

/* ---------- article column ---------- */
.article{ padding:0 32px; min-width:0; }
.article .kicker{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--verdigris); margin-bottom:8px;
}
.article h1{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(2.1rem, 3.4vw, 2.9rem);
  margin:0 0 6px; color:var(--parchment); line-height:1.08;
}
.article .dek{
  font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:1.05rem; color:var(--parchment-2); margin:0 0 22px;
  border-left:2px solid var(--brass); padding-left:14px;
}
.article section{ margin-bottom:34px; }
.article h2{
  font-family:var(--font-display); font-weight:600; font-size:1.4rem;
  color:var(--parchment); margin:0 0 4px;
  padding-bottom:8px; border-bottom:1px solid var(--line-dark);
  display:flex; align-items:baseline; gap:10px;
}
.article h2 .bearing{
  font-family:var(--font-mono); font-size:.68rem; color:var(--brass);
  letter-spacing:.05em;
}
.article h3{
  font-family:var(--font-body); font-weight:700; font-size:1.02rem;
  color:var(--brass-bright); margin:20px 0 6px;
}
.article p{ color:#d9d2bd; font-size:.97rem; margin:0 0 14px; }
.article p .cite{
  font-family:var(--font-mono); font-size:.68rem; color:var(--verdigris);
  vertical-align:super; margin-left:1px;
}
.article ul.plain{ color:#d9d2bd; font-size:.94rem; padding-left:20px; }
.article figure{
  margin:18px 0; border:1px solid var(--line-dark); background:var(--bg-panel);
  padding:10px;
}
.article figure .ph{
  aspect-ratio:16/9; background:
    repeating-linear-gradient(45deg, var(--bg-panel-2) 0 10px, var(--bg-panel) 10px 20px);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:.7rem; color:var(--ink-soft);
}
.article figcaption{
  font-family:var(--font-mono); font-size:.7rem; color:var(--ink-soft);
  padding-top:8px;
}

/* see also / references */
.article .seealso a{ font-size:.9rem; }
.refs{ list-style:none; margin:0; padding:0; font-size:.84rem; color:#c9c2ab; counter-reset:refnum; }
.refs li{ counter-increment:refnum; padding:6px 0; border-top:1px dashed var(--line-dark); display:flex; gap:10px; }
.refs li::before{
  content:"⚓" counter(refnum);
  font-family:var(--font-mono); font-size:.7rem; color:var(--brass); flex:none;
}
.categories{
  margin-top:30px; padding-top:16px; border-top:1px solid var(--line-dark);
  display:flex; flex-wrap:wrap; gap:8px;
}
.categories a{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.04em;
  color:var(--brass); border:1px solid var(--brass-dim,#8c6e3b);
  padding:4px 9px; border-radius:20px;
}
.categories a:hover{ background:rgba(200,154,75,.12); text-decoration:none; }

/* ---------- infobox (signature element) ---------- */
.infobox{
  align-self:start; position:sticky; top:78px;
  background:var(--parchment); color:var(--ink);
  border:1px solid var(--rope);
  box-shadow:0 10px 28px rgba(0,0,0,.35);
}
.infobox-head{
  position:relative; overflow:hidden;
  padding:14px 16px 12px; text-align:center;
  border-bottom:2px solid var(--brass);
  background:var(--parchment-2);
}
.infobox-head h3{
  position:relative; z-index:1;
  font-family:var(--font-display); font-weight:600; font-size:1.05rem; margin:0;
}
.infobox-head .sub{
  position:relative; z-index:1;
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-soft); margin-top:4px;
}
.infobox .ph{
  aspect-ratio:4/3;
  background:repeating-linear-gradient(45deg,#e2d3ac 0 10px,var(--parchment) 10px 20px);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:.66rem; color:var(--ink-soft);
}
.infobox dl{ margin:0; font-size:.82rem; }
.infobox .row{
  display:grid; grid-template-columns:38% 1fr; gap:8px;
  padding:8px 14px; border-top:1px solid #e2d3ac;
}
.infobox .row dt{
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.03em;
  text-transform:uppercase; color:var(--ink-soft); margin:0;
}
.infobox .row dd{ margin:0; font-weight:600; }

/* mini TOC beneath infobox */
.toc{
  margin-top:20px; background:var(--bg-panel);
  border:1px solid var(--line-dark);
}
.toc-head{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--brass);
  padding:10px 14px; border-bottom:1px solid var(--line-dark);
}
.toc ol{ list-style:none; margin:0; padding:10px 6px; }
.toc li a{
  display:flex; gap:8px; padding:5px 8px; border-radius:2px;
  font-size:.82rem; color:var(--parchment-2);
}
.toc li a .deg{ font-family:var(--font-mono); font-size:.7rem; color:var(--verdigris); flex:none; }
.toc li a:hover{ background:var(--bg-panel-2); text-decoration:none; color:var(--brass-bright); }

/* ---------- library index page ---------- */
.hero{
  border-bottom:1px solid var(--line-dark);
  background:
    linear-gradient(180deg, rgba(20,38,58,.6), transparent),
    var(--bg);
  padding:56px 20px 40px;
}
.hero-inner{ max-width:var(--max-w); margin:0 auto; position:relative; }
.hero .kicker{
  font-family:var(--font-mono); font-size:.74rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--brass); margin-bottom:14px;
}
.hero h1{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(2.4rem,5vw,3.6rem); margin:0 0 14px; max-width:14ch;
}
.hero p.lede{
  font-size:1.05rem; color:var(--parchment-2); max-width:56ch; margin:0 0 26px;
}
.hero-search{
  display:flex; gap:0; max-width:520px;
  border:1px solid var(--brass-dim,#8c6e3b); background:var(--bg-panel);
}
.hero-search input{
  flex:1; background:transparent; border:0; color:var(--parchment);
  font-family:var(--font-mono); font-size:.88rem; padding:13px 16px;
}
.hero-search input:focus{ outline:none; }
.hero-search button{
  background:var(--brass); border:0; color:#1c1305; font-weight:700;
  font-family:var(--font-mono); font-size:.76rem; letter-spacing:.05em;
  text-transform:uppercase; padding:0 20px; cursor:pointer;
}
.hero-search button:hover{ background:var(--brass-bright); }
.hero-stats{ display:flex; gap:32px; margin-top:28px; }
.hero-stats div{ font-family:var(--font-mono); }
.hero-stats b{ display:block; font-size:1.5rem; color:var(--brass-bright); font-weight:700; }
.hero-stats span{ font-size:.7rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.08em; }

.section-wrap{ max-width:var(--max-w); margin:0 auto; padding:48px 20px; }
.section-wrap h2{
  font-family:var(--font-display); font-weight:600; font-size:1.5rem;
  margin:0 0 22px; display:flex; align-items:baseline; gap:10px;
}
.section-wrap h2 .bearing{ font-family:var(--font-mono); font-size:.72rem; color:var(--brass); }

.cat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.cat-card{
  background:var(--bg-panel); border:1px solid var(--line-dark);
  padding:20px; position:relative; overflow:hidden;
}
.cat-card::before{ content:""; position:absolute; inset:0; }
.cat-card h3{
  font-family:var(--font-display); font-weight:600; font-size:1.15rem;
  margin:0 0 6px; color:var(--parchment);
}
.cat-card p{ font-size:.85rem; color:#b9c4c9; margin:0 0 14px; }
.cat-card .count{ font-family:var(--font-mono); font-size:.7rem; color:var(--verdigris); }

.entry-list{ list-style:none; margin:0; padding:0; }
.entry-list li{
  display:grid; grid-template-columns:90px 1fr auto; gap:16px; align-items:baseline;
  padding:13px 0; border-top:1px dashed var(--line-dark);
}
.entry-list li:last-child{ border-bottom:1px dashed var(--line-dark); }
.entry-list .date{ font-family:var(--font-mono); font-size:.72rem; color:var(--ink-soft); }
.entry-list a{ font-family:var(--font-body); font-weight:600; color:var(--parchment-2); font-size:.95rem; }
.entry-list a:hover{ color:var(--brass-bright); text-decoration:none; }
.entry-list .tag{
  font-family:var(--font-mono); font-size:.66rem; color:var(--verdigris);
  border:1px solid var(--verdigris-dim); padding:3px 8px; border-radius:20px; justify-self:end;
}

footer.site{
  border-top:1px solid var(--line-dark); padding:26px 20px;
  font-family:var(--font-mono); font-size:.7rem; color:var(--ink-soft);
}
footer.site .in{ max-width:var(--max-w); margin:0 auto; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; }

/* ---------- responsive ---------- */
@media (max-width:980px){
  .shell, .shell.with-infobox{ grid-template-columns:1fr; }
  .sidebar{ display:none; }
  .article{ padding:0; }
  .infobox{ position:static; margin-bottom:24px; }
  .cat-grid{ grid-template-columns:1fr 1fr; }
  .nav-toggle{ display:inline-block; }
  .topnav{ display:none; }
}
@media (max-width:620px){
  .cat-grid{ grid-template-columns:1fr; }
  .entry-list li{ grid-template-columns:1fr; gap:4px; }
  .hero-stats{ flex-wrap:wrap; gap:20px; }
}