/* Minimal yardımcı sınıflar – Tailwind ile birlikte çalışır, build gerektirmez */

:root {
  --brand-600: #0b6fe6;
  --brand-500: #2b83ea;
  --brand-400: #58a6ff;
  --ring: 0 0 0 3px rgb(11 111 230 / 30%);
}
.dark:root {
  --brand-600: #58a6ff;
  --brand-500: #7fb9ff;
  --brand-400: #9fd3ff;
}

/* Konteyner */
.container-narrow {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Butonlar */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .5rem .875rem;
  border-radius: .5rem;
  border: 1px solid transparent;
  font-weight: 600;
  line-height: 1.1;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .05s ease;
}
.btn:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}
.btn:active {
  transform: translateY(1px);
}
.btn-primary {
  background: var(--brand-600);
  color: #fff;
  border-color: var(--brand-600);
}
.btn-primary:hover {
  background: var(--brand-500);
  border-color: var(--brand-500);
}
.btn-ghost {
  background: transparent;
  color: var(--brand-600);
  border-color: currentColor;
}
.btn-ghost:hover {
  background: rgb(11 111 230 / 08%);
}
.dark .btn-ghost:hover {
  background: rgb(88 166 255 / 10%);
}

/* Kartlar */
.card {
  border: 1px solid rgb(226 232 240);
  background: #fff;
  border-radius: .75rem;
  padding: 1rem;
  transition: box-shadow .15s ease, transform .1s ease, border-color .15s ease, background-color .15s ease;
}
.card:hover {
  box-shadow: 0 8px 24px rgb(15 23 42 / 8%);
  transform: translateY(-1px);
}
.dark .card {
  border-color: rgb(30 41 59);
  background: rgb(15 23 42);
}

/* Rozetler */
.badge {
  display: inline-flex;
  align-items: center;
  padding: .25rem .5rem;
  border-radius: 9999px;
  background: rgb(241 245 249);
  color: rgb(51 65 85);
  border: 1px solid rgb(226 232 240);
}
.dark .badge {
  background: rgb(30 41 59);
  color: rgb(203 213 225);
  border-color: rgb(30 41 59);
}

/* Navigasyon hover rengi */
[data-nav]:hover {
  color: var(--brand-600);
}
.dark [data-nav]:hover {
  color: var(--brand-400);
}

/* Prose başlıkları aralığı ayarı (Writing bölümü için) */
.prose :where(h3) {
  margin-top: 1rem;
  margin-bottom: .5rem;
}

/* Küçük yardımcı sınıflar (Tailwind CDN ile birlikte çalışır) */
html { scroll-behavior: smooth; }
body { background-color:#ffffff; color:#0f172a; }
.dark body { background-color:#0f172a; color:#e2e8f0; }

.container-narrow { max-width: 64rem; margin-left:auto; margin-right:auto; padding-left:1rem; padding-right:1rem; }
@media (min-width: 640px){ .container-narrow { padding-left:1.5rem; padding-right:1.5rem; } }
@media (min-width: 1024px){ .container-narrow { padding-left:2rem; padding-right:2rem; } }

.btn { display:inline-flex; align-items:center; gap:.5rem; border-radius:.75rem; padding:.5rem 1rem; font-weight:600; transition:background-color .2s,color .2s,border-color .2s; }
.btn-primary { background:#0b6fe6; color:#fff; }
.btn-primary:hover { background:#0758b4; }
.btn-ghost { background:transparent; border:1px solid #cbd5e1; color:#0f172a; }
.btn-ghost:hover { background:#f1f5f9; }
.dark .btn-ghost { border-color:#334155; color:#e2e8f0; }
.dark .btn-ghost:hover { background:#0f172a; }

.card { border:1px solid #e2e8f0; background:rgba(255,255,255,0.7); border-radius: .75rem; padding:1.25rem; box-shadow: 0 1px 2px rgba(0,0,0,0.05); backdrop-filter: blur(4px); }
.card:hover { box-shadow: 0 4px 24px rgba(2,6,23,.08); }
.dark .card { border-color:#334155; background:rgba(30,41,59,0.6); }

.badge { border-radius:.375rem; border:1px solid #e2e8f0; padding:.125rem .5rem; font-size:.75rem; font-weight:600; color:#334155; display:inline-block; }
.dark .badge { border-color:#334155; color:#e2e8f0; }

/* Text balance utility */
.text-balance { text-wrap: balance; }