/* Uretildi: tools/fontlari-indir.js — Google Fonts latin + latin-ext altkumeleri, self-host.
   ELLE DUZENLENMEZ; yenilemek icin betigi yeniden kos. Uretici bu dosyayi site.css'in onune ekler. */
/* latin-ext */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/cinzel-normal-wght-latin-ext.8fc2606f.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/cinzel-normal-wght-latin.09941fb1.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/cinzel-normal-wght-latin-ext.8fc2606f.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/cinzel-normal-wght-latin.09941fb1.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/eb-garamond-normal-700-latin-ext.33db13f4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/eb-garamond-normal-700-latin.ae7cef02.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Noto Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/noto-sans-italic-400-latin-ext.8931874d.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Noto Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/noto-sans-italic-400-latin.c302cbfd.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/noto-sans-normal-wght-latin-ext.6d5a7931.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/noto-sans-normal-wght-latin.51ca196f.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/noto-sans-normal-wght-latin-ext.6d5a7931.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/noto-sans-normal-wght-latin.51ca196f.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/noto-sans-normal-wght-latin-ext.6d5a7931.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/noto-sans-normal-wght-latin.51ca196f.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   Wistory Topluluk — site.css
   Palet token adları oyunun sanat yönü (art direction) skill'iyle
   birebir aynıdır. Palet dışı renk EKLENMEZ; zorunlu hover/kontrast
   tonları "türetilmiş ton" yorumuyla işaretlenir.
   Katman kuralı: hero/başlık/çerçeve = dünya katmanı (doku
   serbest); buton/form/gezinme = işlevsel katman (doku yok).
   ============================================================ */

:root {
  /* Zemin — parşömen ve taş */
  --parchment-100: #F4E7C6;
  --parchment-300: #DFC697;
  --parchment-500: #B99B6A;
  --stone-700: #4A4137;
  --ink-900: #241E18;

  /* Metal — değer ve çerçeve */
  --bronze-400: #C08A3E;
  --bronze-600: #8A5E24;
  --ivory: #E8DCC0;

  /* Semantik — diplomasi üçlüsü */
  --war: #A3342B;
  --peace: #4E7A63;
  --alliance: #2F5C8C;
  /* warn TURUNCUDUR, altın değil (art direction ile hizalandı 2026-09-24): altın warn
     Efsanevi/bronz'la karışıp "altın = değerli" kuralını bozuyordu. */
  --warn: #CC6A1E;

  /* Nadirlik — oyunun 6 katmanı (_RarityColorPalette.asset ile birebir, 2026-09-14).
     Anahtarlar oyunun RarityType ENUM ADINDAN türetilir, Türkçe addan DEĞİL: oyun bu
     dersi yaşadı ("Savaş Lordu" → "Sancakbeyi" olunca Türkçeye çivilenmiş anahtarlar
     yalan söyledi). Enum adı kalıcıdır, görünen ad değişebilir. */
  --nadirlik-common: #7D7869;   /* Sıradan */
  --nadirlik-rare: #2E5F82;     /* Nadir */
  --nadirlik-veteran: #7D3A5E;  /* Kıdemli */
  --nadirlik-warlord: #3D6B52;  /* Sancakbeyi */
  --nadirlik-legend: #E4CE72;   /* Efsanevi */
  --nadirlik-wistory: #CFA964;  /* Wistory — hiçbir dilde çevrilmez (marka) */
  /* türetilmiş ton: nadirlik-common %88 koyusu. Gerekçe: #7D7869 parşömen de dahil
     hiçbir palet metniyle 4.5:1 tutturmuyor (ölçüldü 2026-09-14: en iyisi 3.95:1).
     YALNIZ metin taşıyan çipin zemininde kullanılır; kart kenarlığı oyunun tam rengini korur. */
  --nadirlik-common-cip: #6E6A5C;

  /* Türetilmiş tonlar (kaynak token'dan koyu/açık; palet dışı sayılmaz) */
  --stone-800: #3A332C;      /* türetilmiş ton: stone-700 koyusu (hero) */
  --stone-900: #2D2822;      /* türetilmiş ton: stone-700 en koyusu */
  --peace-600: #3E6350;      /* türetilmiş ton: peace koyusu (buton kontrastı) */
  --peace-700: #33523F;      /* türetilmiş ton: peace hover */
  --parchment-050: #FAF2DC;  /* türetilmiş ton: parchment-100 açığı (bildirim zemini) */
  /* Kontrast tonları (WCAG ölçümüyle seçildi 2026-09-24; oranlar yanlarında) */
  --bronze-300: #C4934C;     /* türetilmiş ton: bronze-400 → ivory %11 (hero-kicker; stone-800 üstünde 4.51) */
  --alliance-600: #2D537B;   /* türetilmiş ton: alliance koyusu (bağlantı; parchment-300 üstünde 4.81) */
  --war-600: #903128;        /* türetilmiş ton: war koyusu (hata metni; parchment-300 üstünde 4.77) */
  --parchment-700: #7F6C4F;  /* türetilmiş ton: parchment-500 → stone-700 %52 (form alanı sınırı; 050/100/300 üstünde 4.52/4.11/3.04) */
  --warn-300: #CE6F26;       /* türetilmiş ton: warn açığı (rozet zemini; ink-900 metinle 4.65) */

  /* Tipografi
     --font-marka (Cinzel): YALNIZ marka wordmark'ı ve büyük-harf yazılan kicker/etiketler.
       Cinzel'in küçük harfi YOKTUR (küçük-kapitel çizer) → cümle düzeni başlıklarda kullanma.
     --font-baslik (EB Garamond): gerçek küçük harfi olan klasik serif; tüm başlıklar burada.
     --font-body (Noto Sans): gövde metni. */
  --font-marka: "Cinzel", Georgia, "Times New Roman", serif;
  --font-baslik: "EB Garamond", Georgia, "Times New Roman", serif;
  --font-display: var(--font-baslik); /* geriye dönük ad — yeni kodda --font-baslik kullan */
  --font-body: "Noto Sans", "Segoe UI", Arial, sans-serif;

  /* Ölçüler */
  --container-width: 1080px;
  --radius: 10px;
}

/* ---------- Sıfırlama ve zemin ---------- */

*, *::before, *::after { box-sizing: border-box; }

/* scroll-padding: yapışkan header (67 px) + pay. Hem çapa inişini hem KLAVYE ODAĞININ
   kaydırmasını kapsar — odaklanan öğe header'ın altında kalmaz (WCAG 2.4.11).
   Hedeflere ayrıca scroll-margin VERİLMEZ: ikisi toplanır. */
html { scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-900);
  background-color: var(--parchment-300);
}

::selection { background: var(--bronze-400); color: var(--ink-900); }

img { max-width: 100%; display: block; }

a { color: var(--alliance-600); }
a:hover { color: var(--bronze-600); }

h1, h2, h3 {
  font-family: var(--font-baslik);
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink-900);
  margin: 0 0 0.6em;
}

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* Erişilebilirlik: içeriğe atla */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink-900);
  color: var(--ivory);
  padding: 0.6rem 1rem;
  z-index: 100;
}
.skip-link:focus { left: 0; color: var(--ivory); }

/* Klavye odağı (işlevsel katman): açık zeminde alliance, koyu taş bölgelerde fildişi.
   Metin dışı kontrast eşiği 3:1 — alliance/parşömen ≥ 4.18, ivory/taş ≥ 7.34. */
:focus-visible { outline: 3px solid var(--alliance); outline-offset: 2px; }
.site-header :focus-visible,
.site-footer :focus-visible,
.hero :focus-visible,
.page-head :focus-visible,
.tablo-vitrin :focus-visible,
.video-vitrin :focus-visible,
.skip-link:focus-visible { outline-color: var(--ivory); }

/* ---------- Doku (yalnız dünya katmanında kullan) ---------- */

.texture, .texture-light { position: relative; isolation: isolate; }
.texture::before, .texture-light::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
/* Parşömen üstü: kâğıt dokusu gibi hafif koyulaştır */
.texture::before { opacity: 0.07; mix-blend-mode: multiply; }
/* Taş üstü: mineral parıltısı gibi hafif aydınlat */
.texture-light::before { opacity: 0.05; mix-blend-mode: screen; }

/* ---------- Üst bilgi (site-header) ---------- */

.site-header {
  background: var(--stone-700);
  border-bottom: 3px solid var(--bronze-600);
  position: sticky;
  top: 0;
  z-index: 50;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 64px;
  flex-wrap: wrap;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

.site-logo {
  font-family: var(--font-marka); /* marka wordmark → Cinzel */
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: 0.06em;
  color: var(--ivory);
  text-decoration: none;
  white-space: nowrap;
}
.site-logo:hover { color: var(--ivory); }

.site-logo-alt {
  color: var(--bronze-400);
  font-size: 0.72em;
  letter-spacing: 0.18em;
  margin-left: 0.15rem;
}

.site-nav { display: flex; gap: 0.25rem; flex-wrap: wrap; }

/* 7 sekme (Ana Sayfa dahil) masaüstünde 1040 px'e 0.9rem / 0.6rem ile sığıyor; 0.95/0.8'de
   header iki satıra düşüyordu (ölçüldü 2026-09-24). Sekme eklerken iki dilde header
   yüksekliğini ölç: 64 px = tek satır; aşarsa header her genişlikte iki satıra düşer.
   Mobil listede yazı yine 0.95rem (aşağıdaki ≤1099 sorgusu). */
.site-nav a {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ivory);
  text-decoration: none;
  padding: 0.45rem 0.6rem;
  border-radius: 6px;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--ivory); background: var(--stone-800); }
/* Yazısız ikon sekmesi (Bilgi Köşesi) */
.site-nav a.nav-ikon { display: inline-flex; align-items: center; }
.site-nav a.nav-ikon svg { display: block; }
/* aria-current="page" (sayfanın kendisi) ve "true" (bölüm) birlikte yakalanır.
   Metin fildişi kalır (bronz metin taşta 3.30 — eşik 4.5); bronz YALNIZ alt çizgide
   (metin dışı işaret, eşik 3:1 → 3.30). */
.site-nav a[aria-current] {
  color: var(--ivory);
  border-bottom-color: var(--bronze-400);
  border-radius: 6px 6px 0 0;
}

.menu-toggle-button {
  display: none;
  min-width: 44px;  /* dokunma hedefi */
  min-height: 44px;
  background: none;
  border: 1px solid var(--parchment-500);
  border-radius: 6px;
  padding: 0.55rem 0.6rem;
  cursor: pointer;
}
.menu-bar {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--ivory);
  margin: 4px auto;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
/* Açıkken çubuklar X olur: düğme yapacağı işi (kapatmak) gösterir — art direction kuralı.
   Çubuk merkezleri arası 6 px (2 px çubuk + 4 px aralık). */
.menu-toggle-button[aria-expanded="true"] .menu-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle-button[aria-expanded="true"] .menu-bar:nth-child(2) { opacity: 0; }
.menu-toggle-button[aria-expanded="true"] .menu-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Sağ üst: profil + (mobilde) menü butonu */
.header-actions { display: flex; align-items: center; gap: 0.6rem; }

.profil-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ivory);
  text-decoration: none;
  border: 1px solid var(--parchment-500);
  border-radius: 6px;
  padding: 0.4rem 0.85rem;
  white-space: nowrap;
}
.profil-link:hover { background: var(--stone-800); color: var(--ivory); }
/* Metin fildişi kalır; işaret bronz çerçeve (metin dışı 3.30) + koyu zemin */
.profil-link[aria-current="page"] { border-color: var(--bronze-400); background: var(--stone-800); }

/* Dil seçimi (işlevsel katman — sessiz açılır menü) */
.dil-secimi { position: relative; }
.dil-secimi > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ivory);
  border: 1px solid var(--parchment-500);
  border-radius: 6px;
  padding: 0.4rem 0.7rem;
  white-space: nowrap;
  user-select: none;
}
.dil-secimi > summary::-webkit-details-marker { display: none; }
.dil-secimi > summary::marker { content: ""; } /* Firefox'un üçgen imlecini gizle */
.dil-secimi > summary:hover,
.dil-secimi[open] > summary { background: var(--stone-800); }
.dil-listesi {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;
  margin: 0;
  padding: 0.3rem;
  list-style: none;
  min-width: 8.5rem;
  background: var(--stone-700);
  border: 1px solid var(--bronze-600);
  border-radius: 6px;
  box-shadow: 0 6px 16px rgba(36, 30, 24, 0.35); /* ink-900 gölgesi */
}
.dil-listesi a {
  display: block;
  padding: 0.45rem 0.7rem;
  border-radius: 4px;
  font-size: 0.92rem;
  color: var(--ivory);
  text-decoration: none;
}
.dil-listesi a:hover { background: var(--stone-800); color: var(--ivory); }
.dil-listesi a[aria-current] { font-weight: 700; box-shadow: inset 3px 0 0 var(--bronze-400); }

/* Çok dar ekranda üst bilgi sıkışmasın */
@media (max-width: 519px) {
  .site-logo { font-size: 1.15rem; }
  .site-logo-alt { display: none; }
  .profil-link { padding: 0.4rem 0.55rem; font-size: 0.85rem; }
  .dil-secimi > summary { padding: 0.4rem 0.5rem; font-size: 0.85rem; }
}
/* 320 px'te header tek satırda kalsın (yoksa 100 px'lik yapışkan header ekranın %16'sı) */
@media (max-width: 359px) {
  .header-inner { gap: 0.5rem; }
  .header-actions { gap: 0.35rem; }
  .site-logo { font-size: 1.05rem; letter-spacing: 0.04em; }
  .dil-secimi > summary svg { display: none; } /* "TR/EN" yazısı kalır */
}

@media (max-width: 1099px) {
  .menu-toggle-button { display: block; }
  /* Dokunma hedefleri ≥ 44 px — 64 px'lik header satırına sığar */
  .site-logo { display: inline-flex; align-items: center; min-height: 44px; }
  .profil-link, .dil-secimi > summary { min-height: 44px; }
  .site-nav {
    display: none;
    order: 3; /* açılınca logo+profil satırının ALTINA insin */
    flex-basis: 100%;
    flex-direction: column;
    padding-bottom: 0.6rem;
  }
  .site-nav.open { display: flex; }
  .site-nav a { display: flex; align-items: center; min-height: 44px; font-size: 0.95rem; padding-inline: 0.8rem; }
  /* Dikey listede tek başına ℹ anlamsız: aria-label'daki adı yanına yaz (masaüstünde yazısız
     kalır). Erişilebilir ad zaten aria-label'dan gelir, tekrar okunmaz. */
  .site-nav a.nav-ikon { gap: 0.55rem; }
  .site-nav a.nav-ikon::after { content: attr(aria-label); }
  .site-nav a[aria-current] {
    border-bottom-color: transparent;
    border-radius: 6px;
    background: var(--stone-800);
    box-shadow: inset 3px 0 0 var(--bronze-400); /* aktif işareti: bronz/stone-800 = 4.11 (metin dışı 3:1) */
  }
  .kart-eylem { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Alçak ekranda (%400 yakınlaştırma = 320×256, yatay telefon) yapışkan header açık menüyle
   ekrandan uzun olup alt bağlantılara ulaşılamıyordu → orada yapışkan değil. */
@media (max-height: 500px) {
  .site-header { position: static; }
  html { scroll-padding-top: 1rem; }
}

/* ---------- Hero (dünya katmanı) ---------- */

.hero {
  background: linear-gradient(180deg, var(--stone-800), var(--stone-900));
  border-bottom: 3px solid var(--bronze-600);
  color: var(--ivory);
  padding: 4rem 0 4.5rem;
}

.hero-inner {
  border: 1px solid rgba(192, 138, 62, 0.35); /* bronze-400 yüzde 35 */
  border-radius: var(--radius);
  padding: 2.5rem 2rem;
  text-align: center;
}

/* Not: text-transform yok — lang="tr" sayfada uppercase, "Wistory" markasını
   "WİSTORY" yapar (Türkçe noktalı İ). Kicker metni HTML'de büyük yazılır. */
.hero-kicker {
  font-family: var(--font-marka); /* HTML'de büyük yazılır → Cinzel uygun */
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  color: var(--bronze-300); /* bronze-400 gradyanın üst ucunda 4.11 kalıyordu */
  margin: 0 0 1rem;
}

.hero h1 {
  font-family: var(--font-marka); /* marka wordmark → Cinzel, HTML'de ASCII BÜYÜK */
  color: var(--ivory);
  font-size: clamp(2rem, 5.5vw, 3.2rem);
  letter-spacing: 0.04em;
  margin-bottom: 0.5em;
}

.hero-text {
  max-width: 35rem; /* ≈80 karakter/satır */
  margin: 0 auto 1.8rem;
  font-size: 1.06rem;
  color: var(--parchment-100);
}

.hero-actions {
  display: flex;
  gap: 0.8rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Sayfa başlığı (hero'nun küçüğü — iç sayfalar) */
.page-head {
  background: linear-gradient(180deg, var(--stone-800), var(--stone-900));
  border-bottom: 3px solid var(--bronze-600);
  color: var(--ivory);
  padding: 2.2rem 0;
}
.page-head h1 { color: var(--ivory); margin: 0; font-size: clamp(1.6rem, 4vw, 2.3rem); }
.page-head p { color: var(--parchment-100); margin: 0.5rem 0 0; max-width: 35rem; }

/* Koyu (taş) zeminde bağlantı fildişi: alliance burada 1.8:1 kalıyordu */
.hero a:not(.button), .page-head a:not(.button) { color: var(--ivory); }
.hero a:not(.button):hover, .page-head a:not(.button):hover { color: var(--parchment-300); }

/* page-head içi eylem ve sayfa içi gezinme (uzun sayfalar — Katkı Kiti). İşlevsel katman:
   header kontrolleriyle aynı dil (fildişi yazı, parşömen çerçeve), doku yok. */
.page-head-eylem { margin: 1.2rem 0 0; }
.sayfa-ici { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.sayfa-ici a {
  display: inline-flex;
  align-items: center;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--parchment-500);
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
}
.sayfa-ici a:hover { background: var(--stone-700); }
@media (max-width: 1099px) {
  .sayfa-ici a { min-height: 44px; }
}

/* ---------- Bölümler ---------- */

/* Çapa payı html'deki scroll-padding'den gelir (burada scroll-margin YOK — toplanırdı) */
.section { padding: 3rem 0; }
.section-alt { background: var(--parchment-100); border-block: 1px solid var(--parchment-500); }

.section-title { font-size: 1.6rem; }
.section-title::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin-top: 0.45rem;
  background: linear-gradient(90deg, var(--bronze-400), transparent);
}

/* Okunur satır uzunluğu: 35rem ≈ 80 karakter (ölçüldü: 46rem'de 99–111 karakterdi) */
.section-intro { max-width: 35rem; margin-top: 0; }

/* ---------- Kartlar ve ızgaralar ---------- */

.kart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.1rem;
  margin-top: 1.5rem;
}

.kart {
  background: var(--parchment-100);
  border: 1px solid var(--parchment-500);
  border-radius: var(--radius);
  padding: 1.4rem 1.3rem;
  box-shadow: 0 2px 0 var(--parchment-500);
}
.section-alt .kart { background: var(--parchment-050); }

.kart h3 { font-size: 1.12rem; margin-bottom: 0.4em; }
.kart h3 a { color: inherit; text-decoration: none; }
.kart h3 a:hover { color: var(--bronze-600); }
.kart p { margin: 0; font-size: 0.95rem; }
.kart p + p { margin-top: 0.6em; }

/* Ödül kartı: altın YALNIZ değer anlamında — üst şerit bronz */
.kart-odul { border-top: 4px solid var(--bronze-400); }

/* Adım madalyonları */
.adim-numara {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--stone-700);
  border: 2px solid var(--bronze-400);
  color: var(--ivory);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  margin-bottom: 0.8rem;
}

/* ---------- Butonlar (işlevsel katman — sessiz, doku yok) ---------- */

.button {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  padding: 0.7rem 1.5rem;
  border-radius: 8px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.06s ease;
}
.button:active { transform: translateY(1px); }

/* Birincil = onay/olumlu → peace (altın butona yasak) */
.button-primary {
  background: var(--peace-600);
  color: var(--parchment-050);
  border-color: var(--peace-700);
}
.button-primary:hover { background: var(--peace-700); color: var(--parchment-050); }

/* İkincil = çevresinden renk alan kontur buton */
.button-outline {
  border-color: currentColor;
  color: inherit;
  background: transparent;
}
.hero .button-outline { color: var(--ivory); }
.hero .button-outline:hover { background: var(--stone-800); color: var(--ivory); }
.section .button-outline { color: var(--stone-700); }
.section .button-outline:hover { background: var(--parchment-100); color: var(--ink-900); }

/* Devre dışı (ör. gönderim henüz kapalı) */
.button[aria-disabled="true"] {
  background: var(--stone-700);
  border-color: var(--stone-700);
  color: var(--parchment-100);
  cursor: not-allowed;
}

/* ---------- Rozetler ---------- */

.badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.18rem 0.5rem;
  border-radius: 5px;
  vertical-align: middle;
}
.badge-yakinda { background: var(--warn-300); color: var(--ink-900); } /* warn üstünde ink 4.43 kalıyordu → 4.65 */
.badge-taslak { background: var(--stone-700); color: var(--parchment-050); }
.badge-kademe { background: var(--stone-700); color: var(--ivory); }

/* ---------- Bildirim panelleri ---------- */

.notice {
  max-width: 38rem; /* metin sütunu (35rem) + iç boşluk: tam genişlikte 121–144 karakter/satırdı */
  background: var(--parchment-050);
  border: 1px solid var(--parchment-500);
  border-left: 5px solid var(--warn);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1rem 1.3rem;
  margin: 1.5rem 0;
}
.notice-info { border-left-color: var(--alliance); }
.notice-war { border-left-color: var(--war); }
.notice p { margin: 0; }
.notice p + p { margin-top: 0.5em; }
/* EB Garamond (2026-09-24'e kadar Cinzel'di): cümle düzeninde yazılan uzun başlıklar
   Cinzel'de küçük-kapitel okunuyordu. Gerçek küçük harf → yazıldığı gibi görünür. */
.notice-title {
  display: block;
  font-family: var(--font-baslik);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.3;
  margin-bottom: 0.3rem;
}

/* ---------- Şartname listeleri ---------- */

.spec-list {
  list-style: none;
  padding: 0;
  margin: 0.8rem 0 0;
  font-size: 0.92rem;
}
.spec-list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.35rem 0;
  border-bottom: 1px dashed var(--parchment-500);
}
.spec-list li:last-child { border-bottom: none; }
.spec-name { color: var(--bronze-600); font-weight: 600; white-space: nowrap; }
.spec-value { text-align: right; }

/* ---------- Palet vitrini (Katkı Kiti) ---------- */

.palet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.8rem;
  margin-top: 1rem;
}

/* Etiket rengin ÜSTÜNDE değil, alttaki parşömen şeritte: bazı palet renkleri (Sıradan,
   peace) ne açık ne koyu metinle 4.5:1 tutturmuyor. İç gölge zeminin üstüne, metnin
   altına boyanır → şerit HTML'e dokunmadan oluşur; renk üstteki alanda görünür. */
.palet-swatch {
  min-height: 7rem;
  border-radius: 8px;
  border: 1px solid rgba(36, 30, 24, 0.25); /* ink-900 yüzde 25 */
  box-shadow: inset 0 -3.2rem 0 var(--parchment-050);
  padding: 0.7rem 0.75rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.76rem;
  line-height: 1.4;
  color: var(--ink-900);
}
.palet-swatch strong { font-weight: 700; }

/* Bölüm içi ara başlık (section-title'ın bir altı) */
.alt-baslik { margin-top: 2rem; font-size: 1.15rem; }

/* Nadirlik merdiveni (Bilgi Köşesi) — katmanlar artan değer sırasında.
   Renkler .nadirlik-cip'ten gelir; token değişince burası kendiliğinden güncellenir. */
.nadirlik-merdiveni {
  list-style: none;
  padding: 0;
  margin: 1.4rem 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}
.nadirlik-merdiveni li { display: flex; align-items: center; gap: 0.45rem; }
.nadirlik-merdiveni .nadirlik-cip { font-size: 0.82rem; padding: 0.3rem 0.85rem; }
.nadirlik-oku { color: var(--parchment-500); user-select: none; }

/* Rütbe merdiveni (Bilgi Köşesi) — on basamak, üç eşleşme havuzuna bölünmüş.
   Havuz rengi bronždan türetilmez: havuz "değer" değil GRUP anlatır (altın kuralı). */
.rutbe-havuzlari {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.1rem;
  margin-top: 1.5rem;
}
.rutbe-havuz {
  background: var(--parchment-100);
  border: 1px solid var(--parchment-500);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem 1.2rem;
  box-shadow: 0 2px 0 var(--parchment-500);
}
.rutbe-havuz-baslik {
  display: block;
  font-family: var(--font-baslik);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink-900);
  padding-bottom: 0.55rem;
  border-bottom: 2px solid var(--stone-700);
  margin-bottom: 0.7rem;
}
.rutbe-listesi { list-style: none; padding: 0; margin: 0; }
.rutbe-listesi li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.34rem 0;
  font-weight: 600;
}
.rutbe-listesi li + li { border-top: 1px solid var(--parchment-300); }
.rutbe-numara {
  flex: 0 0 auto;
  min-width: 1.6rem;
  height: 1.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--stone-700);
  color: var(--parchment-050);
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.palet-grup-baslik {
  font-family: var(--font-display);
  font-size: 1.02rem;
  margin: 1.6rem 0 0.2rem;
}

/* ---------- Medya vitrini (ana sayfa — dünya katmanı) ---------- */

.video-vitrin {
  position: relative;
  aspect-ratio: 16 / 9;
  margin-top: 1.5rem;
  background: linear-gradient(180deg, var(--stone-700), var(--stone-900));
  border: 1px solid var(--bronze-600);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  text-align: center;
  color: var(--parchment-100);
  padding: 1rem;
  overflow: hidden;
}
/* Gerçek video eklenince yer tutucu içerik silinir, kapsayıcıya iframe konur */
.video-vitrin iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.oynat-ikonu {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid var(--bronze-400);
  color: var(--bronze-400);
}
.oynat-ikonu svg { margin-left: 4px; }
.video-vitrin-baslik {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  margin: 0;
  color: var(--ivory);
}
.video-vitrin-alt { margin: 0; font-size: 0.9rem; color: var(--parchment-300); }

.galeri-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.1rem;
  margin-top: 1.5rem;
}
.galeri-kart { margin: 0; }
.galeri-gorsel {
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  background: linear-gradient(180deg, var(--stone-700), var(--stone-800));
  border: 1px solid var(--parchment-500);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  color: var(--parchment-300);
  font-size: 0.8rem;
  overflow: hidden;
}
/* Gerçek görsel eklenince yer tutucu içerik yerine <img> konur */
.galeri-gorsel img { width: 100%; height: 100%; object-fit: cover; }
/* Görsel gelene kadar mobilde yer tutucular basık: 4 boş 16:9 kutu ≈1 ekran yiyordu.
   <img> konunca :has(img) eşleşmez, oran kendiliğinden 16:9'a döner. */
@media (max-width: 599px) {
  .galeri-gorsel:not(:has(img)) { aspect-ratio: 3 / 1; }
}
.galeri-altyazi {
  background: var(--parchment-100);
  border: 1px solid var(--parchment-500);
  border-top: none;
  border-radius: 0 0 8px 8px;
  padding: 0.6rem 0.85rem;
  font-size: 0.88rem;
  line-height: 1.45;
  margin: 0;
}
.section-alt .galeri-altyazi { background: var(--parchment-050); }

/* Önizleme maddeleri (ana sayfa teaser listeleri) — bronz elmas imli */
.mini-liste {
  list-style: none;
  padding: 0;
  margin: 1rem 0 1.5rem;
  max-width: 35rem;
}
.mini-liste li {
  position: relative;
  padding: 0.3rem 0 0.3rem 1.25rem;
}
.mini-liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 8px;
  height: 8px;
  background: var(--bronze-400);
  transform: rotate(45deg);
}

/* ---------- Skor tablosu vitrini (dünya katmanı, dekoratif iskelet) ---------- */

.tablo-vitrin {
  margin-top: 1.5rem;
  background: linear-gradient(180deg, var(--stone-700), var(--stone-900));
  border: 1px solid var(--bronze-600);
  border-radius: var(--radius);
  padding: 1rem 1.1rem 0.2rem;
  color: var(--ivory);
  overflow: hidden;
}
.tablo-baslik-satiri,
.tablo-satir {
  display: grid;
  grid-template-columns: 3.2rem 1fr 6rem;
  gap: 0.8rem;
  align-items: center;
  padding: 0.6rem 0.8rem;
}
.tablo-baslik-satiri {
  font-family: var(--font-marka);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  color: var(--bronze-400);
  border-bottom: 1px solid var(--bronze-600);
}
.tablo-satir { border-bottom: 1px solid rgba(232, 220, 192, 0.08); /* ivory yüzde 8 — türetilmiş ton */ }
/* Solgunluk YALNIZ iskelette (yer tutucu çubuklu satırlar): JS gerçek satırları aynı
   gövdeye yazdığı için eskiden gerçek 4.–6. sıralar da soluklaşıyordu (6. sıra 0.26). */
.tablo-govde .tablo-satir:nth-child(4):has(.yer-tutucu-cubuk) { opacity: 0.72; }
.tablo-govde .tablo-satir:nth-child(5):has(.yer-tutucu-cubuk) { opacity: 0.48; }
.tablo-govde .tablo-satir:nth-child(6):has(.yer-tutucu-cubuk) { opacity: 0.26; border-bottom: none; }
/* Koyu paneldeki kontur buton fildişi (.section kuralı taş rengi veriyordu: 1.0:1 — görünmüyordu) */
.tablo-vitrin .button-outline { color: var(--ivory); }
.tablo-vitrin .button-outline:hover { background: var(--stone-800); color: var(--ivory); }
.tablo-hiza-sag { justify-self: end; }
.sira-rozeti {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-family: var(--font-marka);
  font-weight: 700;
  font-size: 0.95rem;
  background: var(--stone-800);
  color: var(--parchment-300);
}
.sira-rozeti-1 { background: var(--bronze-400); color: var(--ink-900); }
.sira-rozeti-2 { background: var(--parchment-500); color: var(--ink-900); }
.sira-rozeti-3 { background: var(--bronze-600); color: var(--ivory); }
.yer-tutucu-cubuk {
  display: block;
  height: 0.68rem;
  border-radius: 4px;
  background: rgba(232, 220, 192, 0.18); /* ivory yüzde 18 — türetilmiş ton */
}
.tablo-not {
  text-align: center;
  margin: 0;
  padding: 0.85rem 0.5rem 1rem;
  font-size: 0.9rem;
  color: var(--parchment-300);
}
@media (max-width: 479px) {
  .tablo-baslik-satiri, .tablo-satir { grid-template-columns: 2.6rem 1fr 4rem; gap: 0.5rem; }
}

/* ---------- Mağaza ürün vitrini ---------- */

.urun-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1.1rem;
  margin-top: 1.5rem;
}
.urun-kart {
  background: var(--parchment-100);
  border: 1px solid var(--parchment-500);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 2px 0 var(--parchment-500);
}
.section-alt .urun-kart { background: var(--parchment-050); }
.urun-gorsel {
  position: relative;
  aspect-ratio: 4 / 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: linear-gradient(180deg, var(--stone-700), var(--stone-800));
  border-bottom: 2px solid var(--bronze-600);
  color: var(--parchment-300);
  font-size: 0.8rem;
  overflow: hidden;
}
/* Gerçek ürün görseli yer tutucunun ÜSTÜNE biner; yüklenemezse JS onu kaldırır
   ve alttaki yer tutucu ikon görünür kalır. */
.urun-resmi {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.5rem;
}
/* Desen/kumaş görselleri kutuyu doldursun (kesintisiz döşeme gibi dursun) */
.urun-kart[data-tur="ulke-deseni"] .urun-resmi { object-fit: cover; padding: 0; }
.urun-yer-tutucu { display: flex; }
.urun-bilgi { padding: 0.8rem 0.9rem 0.95rem; }
.urun-adi {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  margin: 0 0 0.5rem;
  color: var(--ink-900);
}
.urun-fiyat-cubugu {
  width: 42%;
  background: var(--parchment-500); /* parşömen zeminde yer tutucu */
}
.vitrin-notu {
  max-width: 35rem;
  margin: 1rem 0 0;
  font-size: 0.9rem;
  color: var(--stone-700);
}

/* Bakiye çubuğu — altın YALNIZ değer anlamında (Lydian/Sikke) */
.bakiye-cubugu {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1rem;
}
.bakiye-oge {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  background: var(--stone-700);
  color: var(--parchment-100);
  border: 1px solid var(--bronze-600);
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  font-size: 0.9rem;
}
.bakiye-oge strong {
  color: var(--bronze-400);
  font-variant-numeric: tabular-nums;
}

/* İşlem kutusu (satın alma / hediye onayı) */
.kutu-katman {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(36, 30, 24, 0.72); /* ink-900 örtü */
}
.kutu-panel {
  width: min(26rem, 100%);
  background: var(--parchment-100);
  border: 1px solid var(--parchment-500);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
  box-shadow: 0 12px 32px rgba(36, 30, 24, 0.4);
}
.kutu-panel h2 { font-size: 1.2rem; margin-bottom: 0.5rem; }
.kutu-ozet {
  margin: 0 0 1rem;
  font-weight: 600;
  color: var(--stone-700);
}
.kutu-eylemler {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}
.magaza-bildirimi {
  margin-top: 1rem;
  background: var(--parchment-050);
  border-left: 4px solid var(--peace);
  border-radius: 6px;
  padding: 0.7rem 0.9rem;
  font-size: 0.92rem;
}

/* ---------- Canlı vitrin ortak parçaları ---------- */

.vitrin-etiketi { position: absolute; top: 10px; right: 10px; z-index: 1; }

.filtre-cubugu { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.4rem; }
.filtre-cip {
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--stone-700);
  background: none;
  border: 1px solid var(--parchment-500);
  border-radius: 999px;
  padding: 0.35rem 0.95rem;
  cursor: pointer;
}
.filtre-cip:hover { background: var(--parchment-100); }
.filtre-cip[aria-pressed="true"] {
  background: var(--stone-700);
  border-color: var(--stone-700);
  color: var(--ivory);
}

.button[disabled] { opacity: 0.55; cursor: not-allowed; }

.nadirlik-cip {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ivory);
  border-radius: 4px;
  padding: 0.1rem 0.5rem;
  white-space: nowrap;
}
/* Koyu zeminli katmanlarda açık metin, açık zeminlilerde koyu metin (kontrast) */
.nadirlik-cip[data-nadirlik="common"] { background: var(--nadirlik-common-cip); color: var(--parchment-050); }
.nadirlik-cip[data-nadirlik="rare"] { background: var(--nadirlik-rare); color: var(--parchment-050); }
.nadirlik-cip[data-nadirlik="veteran"] { background: var(--nadirlik-veteran); color: var(--parchment-050); }
.nadirlik-cip[data-nadirlik="warlord"] { background: var(--nadirlik-warlord); color: var(--parchment-050); }
.nadirlik-cip[data-nadirlik="legend"] { background: var(--nadirlik-legend); color: var(--ink-900); }
.nadirlik-cip[data-nadirlik="wistory"] { background: var(--nadirlik-wistory); color: var(--ink-900); }
.urun-kart[data-nadirlik="common"] .urun-gorsel { border-bottom-color: var(--nadirlik-common); }
.urun-kart[data-nadirlik="rare"] .urun-gorsel { border-bottom-color: var(--nadirlik-rare); }
.urun-kart[data-nadirlik="veteran"] .urun-gorsel { border-bottom-color: var(--nadirlik-veteran); }
.urun-kart[data-nadirlik="warlord"] .urun-gorsel { border-bottom-color: var(--nadirlik-warlord); }
.urun-kart[data-nadirlik="legend"] .urun-gorsel { border-bottom-color: var(--nadirlik-legend); }
.urun-kart[data-nadirlik="wistory"] .urun-gorsel { border-bottom-color: var(--nadirlik-wistory); }

.urun-ust-satir {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
}
.urun-ust-satir .urun-adi { margin: 0; }
.urun-fiyat-metni { font-size: 0.85rem; color: var(--stone-700); margin: 0; }
.urun-eylem {
  margin-top: 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.urun-eylem .button {
  width: 100%;
  text-align: center;
  font-size: 0.9rem;
  padding: 0.55rem 0.8rem;
}

/* Skor tablosu canlı satır metinleri */
.oyuncu-adi {
  font-weight: 600;
  color: var(--parchment-100);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.skor-degeri {
  font-weight: 700;
  color: var(--bronze-400); /* skor = değer göstergesi */
  justify-self: end;
  font-variant-numeric: tabular-nums;
}

/* ---------- Profil paneli ---------- */

.kod-giris { display: flex; align-items: center; gap: 0.45rem; margin: 1rem 0 1.1rem; }
.kod-kutusu {
  width: 2.75rem; /* 44 px dokunma hedefi */
  height: 3.3rem;
  text-align: center;
  font-family: var(--font-marka);
  font-size: 1.4rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink-900);
  background: var(--parchment-050);
  border: 1px solid var(--parchment-700); /* parchment-500 body'de 1.59 kalıyordu (eşik 3:1) */
  border-radius: 8px;
}
.kod-kutusu:focus {
  outline: 2px solid var(--alliance);
  outline-offset: 1px;
  border-color: var(--alliance);
}
.kod-ayirici {
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--parchment-500);
  user-select: none;
}
/* Dar ekranda kutular satırı eşit paylaşır (375'te ≈36 px), yükseklik 44 px dokunma hedefi */
@media (max-width: 599px) {
  .kod-giris { gap: 0.28rem; }
  .kod-kutusu { flex: 1 1 0; min-width: 0; max-width: 2.75rem; height: 2.75rem; font-size: 1.1rem; border-radius: 6px; }
  .kod-ayirici { font-size: 1rem; }
}
@media (max-width: 379px) {
  .kod-kutusu { font-size: 1rem; }
}

.form-durum { margin: 0.4rem 0 0; font-size: 0.9rem; }
.form-durum-bilgi { color: var(--alliance-600); }
.form-durum-hata { color: var(--war-600); }
/* Alan hatası: ilgili alanın hemen altında (JS ekler; alan aria-invalid + aria-describedby alır) */
.alan-hatasi { margin: 0.3rem 0 0; font-size: 0.9rem; font-weight: 600; color: var(--war-600); }

/* Yöntem formları (e-posta / Google — kart içinde, işlevsel katman) */
.metin-girisi {
  display: block;
  width: 100%;
  min-height: 44px; /* dokunma hedefi (select 40.9 px'ti) */
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink-900);
  background: var(--parchment-050);
  border: 1px solid var(--parchment-700); /* alan sınırı 3:1 (parchment-500 ile 2.15–2.36'ydı) */
  border-radius: 8px;
  padding: 0.55rem 0.75rem;
  margin-bottom: 0.5rem;
}
.metin-girisi[aria-invalid="true"] { border-color: var(--war); }
.metin-girisi:focus {
  outline: 2px solid var(--alliance);
  outline-offset: 1px;
  border-color: var(--alliance);
}
/* Gönderim formu (işlevsel katman — doku yok) */
.gonderim-formu {
  max-width: 34rem;
  margin-top: 1.2rem;
  background: var(--parchment-100);
  border: 1px solid var(--parchment-500);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
}
.gonderim-formu label {
  display: block;
  font-weight: 600;
  font-size: 0.92rem;
  margin: 0.9rem 0 0.35rem;
}
.gonderim-formu label:first-of-type { margin-top: 0; }
.gonderim-formu select.metin-girisi,
.gonderim-formu textarea.metin-girisi { font-family: inherit; }
.gonderim-formu input[type="file"] { padding: 0.45rem; background: var(--parchment-050); }
.dosya-ipucu {
  margin: 0.15rem 0 0;
  font-size: 0.85rem;
  color: var(--stone-700);
}
.onay-satiri {
  display: flex !important;
  align-items: flex-start;
  gap: 0.55rem;
  font-weight: 400 !important;
  font-size: 0.9rem;
  line-height: 1.5;
  margin-top: 1.1rem !important;
}
.onay-satiri input { margin-top: 0.25rem; flex: none; }
.gonderim-formu > .button { margin-top: 1.1rem; }

.yontem-formu { margin-top: 0.9rem; }
.yontem-formu label { display: block; font-weight: 600; font-size: 0.92rem; margin: 0 0 0.35rem; }
.yontem-formu .button {
  width: 100%;
  min-height: 44px; /* dokunma hedefi (38.9 px'ti) */
  text-align: center;
  font-size: 0.92rem;
  padding: 0.55rem 0.8rem;
  margin-bottom: 0.4rem;
}

.profil-ust {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.4rem;
}
.profil-takma-ad {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  margin: 0;
}
.profil-alt-bilgi { margin: 0.15rem 0 0; font-size: 0.88rem; color: var(--stone-700); }

.karakter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.1rem;
  margin-top: 1.4rem;
}
.karakter-kart {
  background: var(--parchment-100);
  border: 1px solid var(--parchment-500);
  border-radius: var(--radius);
  padding: 1rem;
  box-shadow: 0 2px 0 var(--parchment-500);
}
.section-alt .karakter-kart { background: var(--parchment-050); }
.karakter-ust { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.7rem; }
.karakter-avatar {
  width: 44px;
  height: 44px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--stone-700), var(--stone-800));
  color: var(--ivory);
  font-family: var(--font-marka);
  font-weight: 700;
  font-size: 1.15rem;
  border: 2px solid var(--bronze-600); /* karakter metali bir durak koyu */
}
.profil-ust .karakter-avatar { width: 56px; height: 56px; font-size: 1.4rem; }
.karakter-adi {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  margin: 0;
}
.karakter-durum { font-size: 0.82rem; color: var(--stone-700); margin: 0; }
.ilerleme-cubugu {
  height: 0.6rem;
  background: rgba(74, 65, 55, 0.18); /* stone-700 yüzde 18 — türetilmiş ton */
  border-radius: 999px;
  overflow: hidden;
}
.ilerleme-dolgu {
  height: 100%;
  background: var(--peace); /* tamamlanma = olumlu */
  border-radius: 999px;
}
.ilerleme-metni { font-size: 0.82rem; margin: 0.4rem 0 0; color: var(--stone-700); }
.acik-cip {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--peace);
  color: var(--ivory);
  border-radius: 4px;
  padding: 0.1rem 0.5rem;
}

.envanter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.8rem;
  margin-top: 1.4rem;
}
.envanter-kart {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  background: var(--parchment-100);
  border: 1px solid var(--parchment-500);
  border-radius: 8px;
  padding: 0.75rem 0.8rem;
  font-size: 0.88rem;
}
.section-alt .envanter-kart { background: var(--parchment-050); }
.envanter-tur { font-size: 0.75rem; color: var(--stone-700); }
.envanter-adi { font-weight: 600; }
.envanter-kart .nadirlik-cip { align-self: flex-start; }

.gizli { display: none !important; }

/* ---------- Duyurular ---------- */

.duyuru {
  max-width: 38rem; /* metin sütunu: tam genişlikte 134–140 karakter/satırdı */
  background: var(--parchment-100);
  border: 1px solid var(--parchment-500);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
  margin-top: 1.2rem;
  box-shadow: 0 2px 0 var(--parchment-500);
}
.section-alt .duyuru { background: var(--parchment-050); }
.duyuru-tarih {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bronze-600);
  margin: 0 0 0.3rem;
}
.duyuru h2, .duyuru h3 { margin-bottom: 0.4em; font-size: 1.25rem; }
.duyuru p:last-child { margin-bottom: 0; }
/* Eski duyurular açılır listede (üretici son 3'ten fazlasını buraya koyar) */
.duyuru-arsiv { max-width: 38rem; margin-top: 1.5rem; }
.duyuru-arsiv summary { cursor: pointer; font-weight: 600; padding: 0.5rem 0; }
.duyuru-arsiv .duyuru { margin-top: 1rem; }

/* ---------- Stüdyo sayfası: iletişim adresi (işlevsel katman — sessiz, doku yok) ---------- */

.iletisim-eposta {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0.2rem 0 0.4rem;
  padding: 0.25rem 1.1rem;
  background: var(--parchment-050);
  border: 1px solid var(--parchment-500);
  border-radius: var(--radius);
  font-size: 1.1rem;
  font-weight: 600;
}
/* Bağlantı kutuyu dikeyde doldurur: dokunma hedefi 29 → ≥44 px, kutu boyu aynı kalır */
.iletisim-eposta a { overflow-wrap: anywhere; display: inline-block; padding-block: 0.5rem; }

/* ---------- Alt bilgi ---------- */

.site-footer {
  background: var(--stone-700);
  border-top: 3px solid var(--bronze-600);
  color: var(--parchment-100);
  padding: 1.8rem 0;
  margin-top: 3rem;
  font-size: 0.9rem;
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.site-footer p { margin: 0; }
.site-footer a { color: var(--ivory); }
.site-footer a:hover { color: var(--bronze-400); }
.footer-nav { display: flex; gap: 1.2rem; flex-wrap: wrap; }
/* Dokunmatikte footer bağlantıları 44 px yüksekliğe (aralarında 8 px) */
@media (max-width: 1099px) {
  .footer-nav { gap: 0.5rem 1.2rem; }
  .footer-nav a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ---------- 404 ---------- */

.hata-panel { text-align: center; padding: 5rem 0; }
.hata-kod {
  font-family: var(--font-marka);
  font-size: 4.5rem;
  font-weight: 700;
  color: var(--bronze-600);
  margin: 0;
  line-height: 1;
}

/* ---------- Hareket azaltma ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button { transition: none; }
  .button:active { transform: none; }
  .menu-bar { transition: none; }
}

/* ---------- Yardımcı sınıflar (satır içi style yerine; CSP style-src 'self') ----------
   HTML'de style="" KULLANILMAZ — üretici testi (derle.test.js) yasaklar. */
.bosluk-ust-1 { margin-top: 1rem; }
.bosluk-ust-1-5 { margin-top: 1.5rem; }
.bosluk-ust-2 { margin-top: 2rem; }

/* Skor tablosu iskelet çubuğu genişlikleri (JS kapalıyken görünen yedek satırlar) */
.genislik-42 { width: 42%; }
.genislik-46 { width: 46%; }
.genislik-50 { width: 50%; }
.genislik-52 { width: 52%; }
.genislik-55 { width: 55%; }
.genislik-57 { width: 57%; }
.genislik-60 { width: 60%; }
.genislik-63 { width: 63%; }
.genislik-66 { width: 66%; }
.genislik-68 { width: 68%; }
.genislik-72 { width: 72%; }

/* Palet örnekleri: renk token'dan gelir; icerik/palet.json ↔ :root hex paritesi testlidir.
   Yeni token eklenirse buraya bir satır + palet.json'a kayıt eklenir. */
.palet-swatch[data-renk="parchment-100"] { background: var(--parchment-100); }
.palet-swatch[data-renk="parchment-300"] { background: var(--parchment-300); }
.palet-swatch[data-renk="parchment-500"] { background: var(--parchment-500); }
.palet-swatch[data-renk="stone-700"] { background: var(--stone-700); }
.palet-swatch[data-renk="ink-900"] { background: var(--ink-900); }
.palet-swatch[data-renk="bronze-400"] { background: var(--bronze-400); }
.palet-swatch[data-renk="bronze-600"] { background: var(--bronze-600); }
.palet-swatch[data-renk="ivory"] { background: var(--ivory); }
.palet-swatch[data-renk="war"] { background: var(--war); }
.palet-swatch[data-renk="peace"] { background: var(--peace); }
.palet-swatch[data-renk="alliance"] { background: var(--alliance); }
.palet-swatch[data-renk="warn"] { background: var(--warn); }
.palet-swatch[data-renk="nadirlik-common"] { background: var(--nadirlik-common); }
.palet-swatch[data-renk="nadirlik-rare"] { background: var(--nadirlik-rare); }
.palet-swatch[data-renk="nadirlik-veteran"] { background: var(--nadirlik-veteran); }
.palet-swatch[data-renk="nadirlik-warlord"] { background: var(--nadirlik-warlord); }
.palet-swatch[data-renk="nadirlik-legend"] { background: var(--nadirlik-legend); }
.palet-swatch[data-renk="nadirlik-wistory"] { background: var(--nadirlik-wistory); }