:root { --bg: #fafafa; --text: #0b0b0b; }
body { background: var(--bg); color: var(--text); }

/* Hafif “editorial” serif */
.font-serif {
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
}

/* küçük reusable sınıflar */
.navlink { color: rgba(0,0,0,.65); transition: color .15s ease; }
.navlink:hover { color: rgba(0,0,0,.95); }

.chip {
  display:inline-flex; align-items:center; gap:.45rem;
  border:1px solid rgba(0,0,0,.10); background:#fff;
  padding:.45rem .7rem; border-radius:999px;
  font-size:.85rem; color: rgba(0,0,0,.75);
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
  transition: border-color .15s ease, transform .15s ease;
}
.chip:hover { border-color: rgba(0,0,0,.18); transform: translateY(-1px); }

/* Aktif chip (subcategory seçili) */
.chip--active{
  border-color: rgba(0,0,0,.22);
  background: rgba(0,0,0,.06);
  color: rgba(0,0,0,.92);
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}
.chip--active:hover{
  border-color: rgba(0,0,0,.28);
  transform: translateY(-1px);
}

.panel {
  border:1px solid rgba(0,0,0,.06); background:#fff;
  border-radius: 1.25rem; padding: 1.25rem;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}

.card {
  border:1px solid rgba(0,0,0,.06); background:#fff;
  border-radius: 1.5rem; padding: 1.25rem;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.card:hover{
  transform: translateY(-1px);
  border-color: rgba(0,0,0,.10);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

.tag {
  display:inline-flex; align-items:center;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  padding:.2rem .55rem;
  border-radius:999px;
}

.btn-primary{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius: 1rem; padding: .65rem .95rem;
  background:#000; color:#fff; font-size:.875rem; font-weight: 600;
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}
.btn-primary:hover{ opacity:.95; }

.btn-ghost{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius: 1rem; padding: .65rem .95rem;
  border:1px solid rgba(0,0,0,.10);
  background:#fff; color: rgba(0,0,0,.75);
  font-size:.875rem; font-weight: 600;
}
.btn-ghost:hover{ border-color: rgba(0,0,0,.18); color: rgba(0,0,0,.90); }

.minirow{
  display:block; border:1px solid rgba(0,0,0,.06); background:#fff;
  border-radius: 1rem; padding: .75rem .9rem;
  font-size:.9rem; color: rgba(0,0,0,.75);
}
.minirow:hover{ border-color: rgba(0,0,0,.12); color: rgba(0,0,0,.95); }

/* “Prose” (Tailwind typography plugin yoksa) */
.prose-like h2{ font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 1.35rem; margin-top: 1.6rem; margin-bottom: .6rem; letter-spacing: -.01em;}
.prose-like h3{ font-size: 1.05rem; margin-top: 1.2rem; margin-bottom: .4rem; font-weight: 700; }
.prose-like p{ color: rgba(0,0,0,.78); line-height: 1.75; margin: .85rem 0; }
.prose-like ul{ margin: .6rem 0 .9rem 1.1rem; color: rgba(0,0,0,.78); }
.prose-like li{ margin: .35rem 0; }
.prose-like a{ text-decoration: underline; text-underline-offset: 3px; }
.prose-like code{ font-size: .92em; background: rgba(0,0,0,.04); padding: .15rem .35rem; border-radius: .4rem; }
.prose-like blockquote{
  margin: 1rem 0; padding: .9rem 1rem;
  border: 1px solid rgba(0,0,0,.08);
  border-left: 4px solid rgba(0,0,0,.18);
  border-radius: 1rem;
  background: #fff;
  color: rgba(0,0,0,.75);
}

/* İçindekiler */
.toc a{ display:block; padding: .45rem .6rem; border-radius: .85rem; color: rgba(0,0,0,.72); }
.toc a:hover{ background: rgba(0,0,0,.03); color: rgba(0,0,0,.95); }

/* küçük bilgi kutuları */
.callout{
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  border-radius: 1.25rem;
  padding: 1rem;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}


/* input focus */
.search-input:focus{
  border-color: rgba(0,0,0,.20);
  box-shadow: 0 0 0 4px rgba(0,0,0,.04);
  outline: none;
}

/* Mobile Drawer (CDN ve build’de %100 stabil) */
.drawer{position:fixed;inset:0;z-index:9999;display:none}
.drawer.is-open{display:block}

/* Daha yumuşak overlay */
.drawer__overlay{
  position:absolute; inset:0;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 320ms cubic-bezier(.2,.8,.2,1);
}

/* Daha “premium” panel animasyonu */
.drawer__panel{
  position:absolute; top:0; right:0;
  height:100%;
  width:min(86vw,380px);
  background:#fff;
  box-shadow: 0 20px 60px rgba(0,0,0,.20);
  transform: translateX(100%) scale(.98);
  transform-origin: right center;
  transition: transform 340ms cubic-bezier(.2,.9,.2,1);
  will-change: transform;
}

.drawer__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px;
  border-bottom:1px solid rgba(0,0,0,.06)
}

/* Açık durum */
.drawer.is-open .drawer__overlay{opacity:1}
.drawer.is-open .drawer__panel{transform: translateX(0) scale(1)}

/* scroll lock */
body.drawer-lock{overflow:hidden}