/* =====================================================================
 * base.css — RESET, TEMEL TİPOGRAFİ, ODAK DURUMLARI
 * ---------------------------------------------------------------------
 * Görevleri:
 *   1. Tarayıcı varsayılanlarını sıfırla (kontrollü, abartısız).
 *   2. Gövde tipografisini, varsayılan satır yüksekliği ve harf
 *      aralığını ayarla.
 *   3. Başlık, paragraf, liste, bağlantı, görsel, tablo gibi temel
 *      öğelerin varsayılan görünümünü tanımla.
 *   4. Erişilebilir odak halkası (focus ring) için temel sağla.
 *   5. Yardımcı metin seçimi, medya, gömülü içerik kuralları.
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * 1. SIFIRLAMA (kontrollü)
 * Modern tarayıcılar için normalize yerine minimal sıfırlama.
 * --------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd,
ul, ol {
  margin: 0;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

table {
  border-collapse: collapse;
  width: 100%;
}

/* ---------------------------------------------------------------------
 * 2. GÖVDE
 * --------------------------------------------------------------------- */
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--ink);
  background-color: var(--canvas);
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}

/* ---------------------------------------------------------------------
 * 3. BAŞLIKLAR
 * Serif (zamanı aşan editoryal his) ile uzun kuyruklu oranlar.
 * H1 en büyük, aşağı doğru azalır. Ağırlık olarak regular/medium
 * tercih edilir; kalın (700) yalnızca vurgu yerlerinde.
 * --------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  color: var(--ink);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-snug);
  font-weight: var(--fw-regular);
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-3xl);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-tight);
}
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
h5 { font-size: var(--fs-md); font-family: var(--font-sans); font-weight: var(--fw-medium); }
h6 { font-size: var(--fs-sm); font-family: var(--font-sans); font-weight: var(--fw-medium); letter-spacing: var(--tracking-wide); text-transform: uppercase; }

@media (min-width: 64em) {
  h1 { font-size: var(--fs-4xl); }
  h2 { font-size: var(--fs-3xl); }
}

/* ---------------------------------------------------------------------
 * 4. PARAGRAF VE METİN
 * --------------------------------------------------------------------- */
p {
  text-wrap: pretty;
}

small,
.be-small {
  font-size: var(--fs-sm);
  color: var(--ink-secondary);
}

strong, b { font-weight: var(--fw-semibold); }
em, i     { font-style: italic; }

/* ---------------------------------------------------------------------
 * 5. BAĞLANTILAR
 * Altı çizili değil; alt çizgi açılır/kapanır bir vurgu olarak
 * kullanılır. :hover'da mat altın.
 * --------------------------------------------------------------------- */
a {
  color: var(--ink);
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--gold); }

.be-link {
  position: relative;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.be-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-base) var(--ease-out-soft);
}
.be-link:hover::after { transform: scaleX(1); }

/* ---------------------------------------------------------------------
 * 6. EYEBROW (üst etiket)
 * Mat altın ince çizgi + büyük harf aralığıyla bölüm girişleri.
 * --------------------------------------------------------------------- */
.be-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-tertiary);
}
.be-eyebrow::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--gold);
}

/* ---------------------------------------------------------------------
 * 7. ALINTILAR, KOD, AYRAÇLAR
 * --------------------------------------------------------------------- */
blockquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-lg);
  line-height: var(--lh-tight);
  color: var(--ink-secondary);
  border-left: 2px solid var(--gold);
  padding-left: var(--space-5);
  margin: var(--space-6) 0;
}

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}
pre {
  background: var(--canvas-alt);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  overflow-x: auto;
  border: 1px solid var(--line-soft);
}

hr {
  border: 0;
  height: 1px;
  background: var(--line);
  margin: var(--space-9) 0;
}

/* ---------------------------------------------------------------------
 * 8. ODAK (erişilebilirlik)
 * Klavye odak halkası: mat altın, yumuşak.
 * --------------------------------------------------------------------- */
:focus { outline: none; }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(180, 155, 115, 0.3);
  border-radius: var(--radius-xs);
  transition: box-shadow var(--dur-fast) var(--ease-standard);
}

/* Erişilebilirlik yardımcıları — görsel gizle ama screen reader'a göster */
.be-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.be-sr-only-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
}

/* Klavye odak göstergesi: sadece klavye kullanıcıları için göster */
@supports selector(:focus-visible) {
  :focus:not(:focus-visible) { outline: none; box-shadow: none; }
}

/* Yüksek kontrast modu (Windows, iOS) */
@media (prefers-contrast: more) {
  :root {
    --ink: #000000;
    --ink-secondary: #1A1A1A;
    --ink-tertiary: #404040;
    --line: rgba(0, 0, 0, 0.5);
    --line-strong: rgba(0, 0, 0, 0.8);
  }
  :focus-visible {
    outline-width: 4px;
  }
}

/* ---------------------------------------------------------------------
 * 9. SEÇİM (text selection)
 * --------------------------------------------------------------------- */
::selection {
  background: rgba(180, 155, 115, 0.28);
  color: var(--ink);
}

/* ---------------------------------------------------------------------
 * 10. GÖRSELLERİN HAFİF DOKUSU
 * Gerçek sanat eseri görsellerinin sıcak tonuyla uyum için hafif
 * doygunluk ve sıcaklık. Performans açısından sadece opacity
 * filtresi, layout'u etkilemez.
 * --------------------------------------------------------------------- */
img {
  color: transparent;
}
img[src$=".svg"] { color: inherit; }