/* SORGU SAYFALARININ BİÇİMİ - sade, görsel ağırlıklı bir arama motoru
 * (kullanıcı kararları 14.10.2026: "ultra minimal kaliteli temiz bir arama
 * motoru gibi" + "görsel ağırlıklı olsun, yazı ağırlıklı değil").
 *
 * Sayfayı sunucu kuruyor (server/sorgu-sayfa.js). Kurallar:
 *   - renkler paletten (scripts/page-css.mjs PALET, tokens.ts) - yeni hex YOK,
 *     tasarim-denetim.mjs bu dosyayı da tarıyor;
 *   - çerçeve ve gölge yok, ayrım zeminden (tasarım §3);
 *   - görsel önde: yüz, arma, bayrak; yazı yalnız ad ve kısa künye.
 */
@font-face { font-family: Anton; src: url(/futbol/font/Anton_400Regular.ttf) format("truetype"); font-display: swap }
@font-face { font-family: Archivo; font-weight: 600; src: url(/futbol/font/Archivo_600SemiBold.ttf) format("truetype"); font-display: swap }
@font-face { font-family: Archivo; font-weight: 700; src: url(/futbol/font/Archivo_700Bold.ttf) format("truetype"); font-display: swap }

:root {
  color-scheme: dark;
  --canvas: #181818; --tile: #2B2D29; --tileHi: #334E46; --raised: #52766B;
  --marka: #5ECC80; --tebesir: #D4EDCA; --mute: #C1DEBD; --faint: #8B9787; --gri: #768371;
}
* { box-sizing: border-box }
html, body { background: var(--canvas) }
body { margin: 0; color: var(--mute); font: 600 15px/1.55 Archivo, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100% }
a { color: var(--tebesir); text-decoration: none }
p { margin: 0 }

/* --- kabuk: marka + kutu + Oyna, menü yok --- */
.wrap { max-width: 860px; margin: 0 auto; padding: 20px 16px 80px }
.ust { display: flex; align-items: center; gap: 20px; padding-bottom: 28px }
.marka { font: 400 20px/1 Anton, sans-serif; letter-spacing: .03em; text-transform: uppercase; color: var(--tebesir); flex: none }
.ust .ara { flex: 1; min-width: 0; max-width: 600px }
.oyna { flex: none; margin-left: auto; color: var(--marka); font-weight: 700; font-size: 14px }

/* --- arama kutusu --- */
.ara { display: block }
.ara input {
  width: 100%; font: 600 16px/1.2 Archivo, sans-serif; color: var(--tebesir); background: var(--tile);
  border: 0; border-radius: 999px; padding: 13px 20px; outline: none; -webkit-appearance: none; appearance: none;
}
.ara input::placeholder { color: var(--gri) }
.ara input:focus-visible { background: var(--tileHi) }
.ara input::-webkit-search-cancel-button { -webkit-appearance: none }

/* --- giriş: ortada marka + kutu --- */
.giris { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 28px }
.giris .marka { font-size: 44px }
.giris .ara { width: 100%; max-width: 580px }
.giris .ara input { font-size: 18px; padding: 17px 24px }
.ornekler { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; max-width: 580px }
.ornekler a { color: var(--faint); font-size: 14px }
.ornekler a:hover { color: var(--tebesir) }

/* --- sonuç başı --- */
h1 { font: 700 22px/1.3 Archivo, sans-serif; color: var(--tebesir); margin: 0 0 8px }
.anlasilan { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 4px 0 14px }
.anlasilan span { display: inline-flex; align-items: center; gap: 8px }
.anlasilan b { font-size: 14px; color: var(--tebesir) }
.say { font-size: 13px; color: var(--gri); margin: 0 0 12px }

/* --- süzgeç: sessiz yazı, seçili = dolgu --- */
.suzgec { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 22px }
.suzgec:empty { display: none }
.suzgec button { font: 600 13px/1 Archivo, sans-serif; color: var(--faint); background: none; border: 0;
  border-radius: 999px; padding: 7px 11px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px }
.suzgec button:hover { color: var(--tebesir) }
.suzgec button[aria-pressed=true] { background: var(--tile); color: var(--tebesir) }
.suzgec .ayrac { width: 1px }

/* --- görseller: yüz ve arma (görsel inmezse baş harf / ad arkada) --- */
.yuz, .arma { position: relative; display: grid; place-items: center; overflow: hidden; flex: none; background: var(--tile) }
.yuz { width: 100%; aspect-ratio: 1; border-radius: 50% }
.yuz::before { content: attr(data-h); font: 700 22px/1 Archivo, sans-serif; color: var(--faint) }
.yuz img, .arma img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.arma { width: 56px; height: 56px; border-radius: 14px }
.arma img { object-fit: contain; padding: 8px }
.arma::before { content: attr(data-h); font: 700 10px/1.1 Archivo, sans-serif; color: var(--faint); text-align: center;
  padding: 4px; overflow: hidden; max-height: 100% }
.arma.k { width: 34px; height: 34px; border-radius: 9px }
.arma.k img { padding: 4px }
.arma.etiket { font: 700 12px/1 Archivo, sans-serif; color: var(--tebesir); padding: 0 8px; width: auto; min-width: 34px }
/* Görsel varsa yedek yazı çizilmez - şeffaf armanın arkasından sızıyordu. */
.yuz:has(img)::before, .arma:has(img)::before { content: none }
.bayrak { width: 18px; height: 12px; border-radius: 2px; object-fit: cover; flex: none }

/* --- sonuç ızgarası: yüz kartları --- */
.izgara { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 24px 14px }
.izgara li[hidden] { display: none }
.kartcik { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; color: var(--tebesir) }
.kartcik .yuz { width: 92px }
.kartcik:hover .yuz { background: var(--tileHi) }
.kartcik b { font-size: 14px; line-height: 1.25; font-weight: 700 }
.kartcik small { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--faint) }
span.kartcik b { color: var(--mute) }
.devam { margin: 22px 0 0; font-size: 13px; color: var(--gri) }
.bos { color: var(--faint); padding: 20px 0 }
.kunye { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--faint); flex-wrap: wrap }

/* --- soru kartları: ölçütlerin görselleri yan yana --- */
.sorular { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px }
.soru { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 14px; background: var(--tile); color: var(--mute); height: 100% }
.soru:hover { background: var(--tileHi) }
.gorseller { display: flex; align-items: center; gap: 6px }
.soru .arma.k { background: var(--canvas) }
.soru .metin { font-size: 13px; line-height: 1.35; color: var(--tebesir) }
.soru em { font-style: normal; font-size: 12px; color: var(--gri); margin-top: auto }

/* --- kulüp karoları: arma + ad --- */
.kulupler { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 16px 10px }
.kulup { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 12px; color: var(--mute) }
.kulup:hover { color: var(--tebesir) }
.kulup:hover .arma { background: var(--tileHi) }
.kulup .arma { width: 64px; height: 64px }

/* --- alt bölümler --- */
h2 { font: 600 13px/1.3 Archivo, sans-serif; color: var(--gri); margin: 44px 0 14px }
/* soru-cevap: eşit karolar - soru küçük ve soluk, cevap net */
.sss { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px }
.sss li { background: var(--tile); border-radius: 16px; padding: 16px 18px }
.sss h3 { font: 600 12px/1.4 Archivo, sans-serif; color: var(--gri); margin: 0 0 6px }
.sss p { font-size: 14px; line-height: 1.5; color: var(--mute) }
/* alt satır: tek satır, ortalı */
.alt { margin-top: 56px; padding-top: 18px; border-top: 1px solid var(--tile); text-align: center; font-size: 12px; color: var(--gri) }
.alt a { color: var(--faint) }

@media (max-width: 560px) {
  .ust { flex-wrap: wrap; gap: 12px }
  .ust .ara { order: 3; flex-basis: 100%; max-width: none }
  .giris .marka { font-size: 34px }
  .izgara { grid-template-columns: repeat(3, 1fr); gap: 18px 10px }
  .kartcik .yuz { width: 76px }
  .yuz.buyuk { width: 88px }
  .kimlik { gap: 14px }
  .kimlik h1 { font-size: 24px }
}


/* --- PROFİL - tek eksen: her bölüm aynı genişlik, aynı sol hiza, eşit karolar --- */
.profil h2 { margin: 40px 0 14px }
.hero { display: grid; grid-template-columns: 168px 1fr; gap: 28px; align-items: center;
  background: var(--tile); border-radius: 20px; padding: 24px }
.hero .yuz.buyuk { width: 168px; background: var(--canvas) }
.yuz.buyuk::before { font-size: 40px }
/* BÜYÜK HARF DÖNÜŞÜMÜ YOK: sayfa lang="tr", yabancı adda "i" → "İ" olur ("LİONEL MESSİ"). */
.hero h1 { font: 400 42px/1.05 Anton, sans-serif; letter-spacing: .01em; margin: 0 0 14px }
.hero .kunye { font-size: 15px; color: var(--mute); gap: 8px; margin-top: 8px }
.hero .kunye.soluk { color: var(--gri); font-size: 13px; margin-top: 12px }
.hero .arma.k { width: 28px; height: 28px; border-radius: 7px; background: var(--canvas) }
.hero .arma.k img { padding: 3px }
.jeton { display: inline-grid; place-items: center; min-width: 30px; height: 22px; padding: 0 6px; border-radius: 6px;
  background: var(--tileHi); color: var(--tebesir); font: 700 12px/1 Archivo, sans-serif }

/* altı eşit karo */
.serit { list-style: none; padding: 0; margin: 12px 0 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px }
.serit li { background: var(--tile); border-radius: 16px; padding: 16px 12px; text-align: center }
.serit b { display: block; font: 400 28px/1.1 Anton, sans-serif; color: var(--tebesir); white-space: nowrap }
.serit span { font-size: 12px; color: var(--gri) }

/* yüzdelik çubuklar: ad | çubuk | değer - üç sabit sütun, her satır aynı hizada */
.yuzdelik { list-style: none; padding: 20px 24px; margin: 0; background: var(--tile); border-radius: 20px;
  display: grid; gap: 14px }
.yuzdelik li { display: grid; grid-template-columns: 120px 1fr 120px; gap: 16px; align-items: center }
.yuzdelik .ad { font-size: 14px; color: var(--mute) }
.yuzdelik .cubuk { height: 10px; border-radius: 999px; background: var(--canvas); overflow: hidden }
.yuzdelik .cubuk i { display: block; height: 100%; border-radius: 999px; background: var(--marka) }
.yuzdelik .deg { text-align: right; font-size: 13px; color: var(--gri); font-variant-numeric: tabular-nums }
.yuzdelik .deg b { color: var(--tebesir); font-size: 14px; margin-right: 6px }

/* --- GRAFİKLER (sunucuda SVG) - renk yalnız sınıftan, palet dışı yok --- */
.panel { background: var(--tile); border-radius: 20px; padding: 20px 24px }
.grafik { display: block; width: 100%; height: auto; overflow: visible }
.halkalar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start }
.halka svg { max-width: 150px; margin: 0 auto }
.halka { margin: 0; text-align: center }
.halka .iz { fill: none; stroke: var(--canvas); stroke-width: 11 }
.halka .dolu { fill: none; stroke: var(--marka); stroke-width: 11; stroke-linecap: round }
.halka .buyuk { fill: var(--tebesir); font: 400 24px Anton, sans-serif }
.halka .kucuk { fill: var(--gri); font: 600 11px Archivo, sans-serif }
.halka figcaption { margin-top: 6px; font-size: 13px; color: var(--mute) }

/* kariyer yolu: yıllara orantılı parçalı çubuk + yıl · arma · kulüp listesi */
.yol { background: var(--tile); border-radius: 20px; padding: 28px 24px 20px }
/* zaman ekseni: parçalar gerçek yıl aralığında, çakışan dönem alt şeritte */
.zaman { position: relative }
.parca { position: absolute; height: 38px; display: grid; place-items: center; border-radius: 8px;
  background: var(--tileHi) }
.parca.cift { background: var(--raised) }
.parca.simdi { background: var(--marka) }
.parca .arma.k { width: 28px; height: 28px; border-radius: 7px; background: var(--canvas) }
.parca .arma.k img { padding: 3px }
.eksen { position: relative; height: 30px; margin: 6px 0 14px; border-top: 1px solid var(--tileHi) }
.centik { position: absolute; top: 0; transform: translateX(-50%); padding-top: 8px; font-size: 11px; color: var(--gri);
  font-variant-numeric: tabular-nums }
.centik::before { content: ""; position: absolute; left: 50%; top: -1px; width: 1px; height: 6px; background: var(--gri) }
.yol-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px }
.yol-liste li { display: grid; grid-template-columns: 76px 32px 1fr auto; gap: 12px; align-items: center; padding: 6px 0 }
.yol-liste .yil { font: 700 14px Archivo, sans-serif; color: var(--tebesir); font-variant-numeric: tabular-nums }
.yol-liste .arma.k { width: 32px; height: 32px; border-radius: 8px; background: var(--canvas) }
.yol-liste a, .yol-liste li > span:nth-child(3) { font-size: 15px; color: var(--mute) }
.yol-liste em { font-style: normal; font-size: 12px; color: var(--gri); text-align: right }
.cizgi.tek { display: flex; align-items: center; gap: 12px; background: var(--tile); border-radius: 20px; padding: 20px 24px }
.cizgi.tek .bant { flex: 1; height: 6px; border-radius: 999px; background: var(--marka) }
.cizgi.tek b { font: 700 14px Archivo, sans-serif; color: var(--tebesir) }

/* karşılaştırma: yüz | ad | gol+asist çubuğu | değer - sabit sütunlar */
.kiyas { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px }
.kiyas li { display: grid; grid-template-columns: 36px 160px 1fr 170px; gap: 14px; align-items: center }
.kiyas .yuz.kucuk { width: 36px; background: var(--canvas) }
.kiyas .yuz.kucuk::before { font-size: 11px }
.kiyas a { font-size: 14px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.kiyas .ben a { color: var(--tebesir); font-weight: 700 }
.kiyas .cubuk { display: flex; height: 12px; border-radius: 999px; background: var(--canvas); overflow: hidden }
.kiyas .cubuk i { display: block; height: 100% }
.kiyas .g { background: var(--raised); border-radius: 999px }
.kiyas .ben .g { background: var(--marka) }
.kiyas .deg { text-align: right; font-size: 13px; color: var(--gri); font-variant-numeric: tabular-nums }
.kiyas .deg b { color: var(--tebesir) }

/* logo karoları - eşit hücre, ortalı logo, ad tek satır */
/* auto-fit: az öğe satırı EŞİT paylarla doldurur, sağda boşluk kalmaz */
.karolar { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 12px }
.karolar .kulup { background: var(--tile); border-radius: 16px; padding: 16px 8px 12px; height: 100%; gap: 10px }
.karolar .kulup:hover { background: var(--tileHi) }
.karolar .kulup .arma, .karolar .kulup .yuz { width: 64px; height: 64px; background: transparent }
.karolar .kulup .yuz.hoca { background: var(--canvas) }
.karolar .kulup > span:last-child { font-size: 12px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100% }

/* profilde ızgara ve soru kartları da aynı eşit sütunda */
.profil .izgara { grid-template-columns: repeat(6, 1fr) }
.profil .sorular { grid-template-columns: repeat(3, 1fr) }

@media (max-width: 720px) {
  .hero { grid-template-columns: 1fr; justify-items: center; text-align: center }
  .hero .kunye { justify-content: center }
  .hero .yuz.buyuk { width: 132px }
  .hero h1 { font-size: 32px }
  .serit, .profil .izgara { grid-template-columns: repeat(3, 1fr) }
  .profil .sorular { grid-template-columns: 1fr }
  .panel { padding: 16px }
  .kiyas li { grid-template-columns: 32px 1fr 84px; }
  .kiyas .cubuk { grid-column: 2 / 4 }
  .yol { padding: 20px 16px 14px }
  .yol-liste li { grid-template-columns: 64px 28px 1fr; }
  .yol-liste em { grid-column: 3; text-align: left; margin-top: -6px }
}