/* ============================================================
   FAME ACADEMY — Tasarım Sistemi
   Palet: 5.png referansı | Tipografi: Cinzel / Lora / Inter
   ============================================================ */

:root {
  --parsomen: #F3E8CB;
  --parsomen-koyu: #EADDBA;
  --altin: #C7903D;
  --altin-acik: #E3B96B;
  --altin-parlak: #F0CC8A;
  --kahve: #3B2A1D;
  --kahve-yumusak: #5C4530;
  --mavi: #315C7C;
  --mermer: #E9D4B8;
  --lacivert: #101826;
  --lacivert-acik: #1A2536;
  --beyaz-sicak: #FBF6E9;

  --font-baslik: 'Cinzel', serif;
  --font-govde: 'Lora', serif;
  --font-ui: 'Inter', sans-serif;
  --font-giris: 'Cormorant Garamond'; --font-giris-w: 700;

  --golge-kart: 0 6px 24px rgba(59, 42, 29, 0.18);
  --golge-derin: 0 12px 48px rgba(0, 0, 0, 0.45);
  --gecis: 240ms cubic-bezier(0.4, 0, 0.2, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  font-family: var(--font-govde);
  background: var(--parsomen);
  color: var(--kahve);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Ortak: üst bant ---------- */
.ust-bant {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px;
  border-bottom: 1px solid rgba(199, 144, 61, 0.35);
  background: linear-gradient(180deg, var(--beyaz-sicak), var(--parsomen));
  position: relative;
  z-index: 5;
}

.ust-bant.koyu {
  background: linear-gradient(180deg, #0C1320, var(--lacivert));
  border-bottom: 1px solid rgba(199, 144, 61, 0.45);
  color: var(--mermer);
}

.marka {
  font-family: var(--font-baslik);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 2px;
  color: var(--kahve);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
}

.ust-bant.koyu .marka { color: var(--altin-acik); }

.marka .nokta { color: var(--altin); }

.marka-logo {
  height: 66px;
  width: 66px;
  border-radius: 50%;
  object-fit: contain;
  flex: 0 0 auto;
  box-shadow: 0 0 0 1.5px rgba(199, 144, 61, 0.6), 0 2px 8px rgba(0, 0, 0, 0.3);
}

.adimlar {
  display: flex;
  gap: 6px;
  align-items: center;
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.adim {
  padding: 6px 14px;
  border-radius: 999px;
  color: var(--kahve-yumusak);
  text-decoration: none;
  border: 1px solid transparent;
  transition: all var(--gecis);
}

.ust-bant.koyu .adim { color: rgba(233, 212, 184, 0.6); }

.adim.aktif {
  color: var(--kahve);
  border-color: var(--altin);
  background: rgba(199, 144, 61, 0.12);
}

.ust-bant.koyu .adim.aktif {
  color: var(--altin-parlak);
  background: rgba(199, 144, 61, 0.15);
}

.adim-ayrac { color: var(--altin); opacity: 0.6; }

/* ---------- Butonlar ---------- */
.btn {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 14px 34px;
  border-radius: 4px;
  border: 1px solid var(--altin);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: all var(--gecis);
}

.btn-altin {
  background: linear-gradient(180deg, var(--altin-acik), var(--altin));
  color: #2A1D10;
  box-shadow: 0 4px 18px rgba(199, 144, 61, 0.4);
}

.btn-altin:hover {
  background: linear-gradient(180deg, var(--altin-parlak), var(--altin-acik));
  box-shadow: 0 6px 26px rgba(199, 144, 61, 0.55);
  transform: translateY(-1px);
}

.btn-kontur {
  background: transparent;
  color: var(--altin);
}

.btn-kontur:hover { background: rgba(199, 144, 61, 0.12); }

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

/* ============================================================
   KURALLAR EKRANI — okunup onaylanmadan oyun başlamaz
   ============================================================ */
.kural-fon {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 3vw, 32px);
  background: rgba(8, 12, 20, 0.82);
  backdrop-filter: blur(4px);
}
.kural-fon[hidden] { display: none; }
body.kural-kilit { overflow: hidden; }

.kural-kart {
  position: relative;
  width: min(720px, 96vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.8vw, 18px);
  padding: clamp(22px, 3.2vw, 40px);
  border: 1px solid var(--altin);
  border-radius: 16px;
  background: linear-gradient(160deg, var(--beyaz-sicak), var(--parsomen) 55%, var(--parsomen-koyu));
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.6),
    inset 0 0 0 6px rgba(255, 255, 255, 0.4),
    inset 0 0 0 7px rgba(199, 144, 61, 0.35);
  animation: kartGel 340ms cubic-bezier(0.3, 0.9, 0.4, 1);
}
.kural-kose {
  position: absolute;
  width: clamp(40px, 5.5vw, 62px);
  height: clamp(40px, 5.5vw, 62px);
  background: url('/img/kose-motif.svg') no-repeat center / contain;
  opacity: 0.9;
  pointer-events: none;
}
.kural-kose.sol-ust { top: 9px; left: 9px; }
.kural-kose.sag-ust { top: 9px; right: 9px; transform: scaleX(-1); }
.kural-kose.sol-alt { bottom: 9px; left: 9px; transform: scaleY(-1); }
.kural-kose.sag-alt { bottom: 9px; right: 9px; transform: scale(-1, -1); }

.kural-kapat {
  position: absolute;
  /* Sağ üst köşe motifi kaldırıldı; çarpı doğrudan köşeye yerleşir. */
  top: 14px;
  right: 14px;
  z-index: 3;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 22px;
  line-height: 1;
  color: #3B2A1D;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--altin);
  border-radius: 50%;
  cursor: pointer;
  transition: background 160ms ease, transform 160ms ease, color 160ms ease;
}
.kural-kapat:hover {
  background: var(--altin);
  color: #fff;
  transform: rotate(90deg);
}
.kural-kapat:focus-visible { outline: 2px solid var(--altin); outline-offset: 2px; }

.kural-ust {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: center;
  text-align: center;
}
.kural-logo { width: clamp(40px, 6vw, 58px); height: auto; flex: 0 0 auto; }
.kural-ust h2 {
  font-family: var(--font-baslik);
  font-size: clamp(18px, 2.8vw, 28px);
  letter-spacing: 2px;
  color: #3B2A1D;
}

.kural-icerik {
  overflow-y: auto;
  padding-right: 8px;
  font-family: var(--font-govde);
  color: var(--kahve);
  line-height: 1.6;
  font-size: clamp(13.5px, 1.5vw, 15.5px);
}
.kural-icerik p { margin-bottom: 0.7em; }
.kural-icerik b { color: #6E4A1E; }
.kural-icerik h3 {
  font-family: var(--font-baslik);
  font-size: clamp(15px, 2vw, 19px);
  color: var(--altin);
  letter-spacing: 1px;
  margin: 0.6em 0 0.4em;
  padding-top: 0.5em;
  border-top: 1px solid rgba(199, 144, 61, 0.3);
}
.kural-liste { margin: 0; padding-left: 2.1em; }   /* numaralar soldan kırpılmasın */
.kural-liste li { margin-bottom: 0.5em; padding-left: 0.2em; }
.kural-liste li::marker { color: var(--altin); font-weight: 700; }

.kural-onay {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-ui);
  font-size: clamp(13px, 1.5vw, 15px);
  font-weight: 600;
  color: var(--kahve);
  cursor: pointer;
  padding-top: 4px;
  border-top: 1px solid rgba(199, 144, 61, 0.25);
}
.kural-onay input { width: 19px; height: 19px; accent-color: var(--altin); cursor: pointer; flex: 0 0 auto; }
.kural-btn { align-self: center; min-width: 220px; }

@media (max-width: 640px) {
  .kural-kart { padding: 18px 15px; max-height: 94vh; gap: 10px; }
  .kural-btn { width: 100%; }
  .kural-ust { flex-direction: column; gap: 5px; }
  .kural-ust h2 { font-size: 16px; letter-spacing: 0.8px; line-height: 1.2; }
  .kural-logo { width: 42px; }
  .kural-icerik { font-size: 13px; line-height: 1.5; }
  .kural-icerik h3 { font-size: 14px; }
  .kural-onay { font-size: 13px; }
}

/* Çalışma Arkadaşların dipnotu (* roller) */
.dipnot-yildiz { color: var(--altin); margin-left: 2px; }
.panel-dipnot {
  font-family: var(--font-ui);
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--kahve-yumusak);
  margin: -2px 0 10px;
  font-style: italic;
}

/* ---- Özet / popup parşömen modalı (eşleştirme) ---- */
.ic-modal-fon {
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(14px, 3vw, 30px);
  background: rgba(8, 12, 20, 0.8);
  backdrop-filter: blur(4px);
}
.ic-modal {
  position: relative;
  width: min(560px, 96vw);
  max-height: 90vh;
  display: flex; flex-direction: column;
  gap: 14px;
  padding: clamp(26px, 3.2vw, 38px);
  border: 1px solid var(--altin);
  border-radius: 16px;
  background: linear-gradient(160deg, var(--beyaz-sicak), var(--parsomen) 55%, var(--parsomen-koyu));
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.6),
    inset 0 0 0 6px rgba(255, 255, 255, 0.4), inset 0 0 0 7px rgba(199, 144, 61, 0.35);
  text-align: center;
  animation: kartGel 300ms cubic-bezier(0.3, 0.9, 0.4, 1);
}
.ic-modal-amblem { font-size: 34px; line-height: 1; }
.ic-modal-baslik {
  font-family: var(--font-baslik);
  font-size: clamp(18px, 2.6vw, 25px);
  letter-spacing: 2px;
  color: #3B2A1D;
}
.ic-modal-alt {
  font-family: var(--font-govde);
  font-size: clamp(13.5px, 1.5vw, 15px);
  line-height: 1.55;
  color: var(--kahve);
}
.ic-modal-alt b { color: #6E4A1E; }

.oz-liste {
  list-style: none;
  text-align: left;
  overflow-y: auto;
  max-height: 46vh;
  display: flex; flex-direction: column; gap: 7px;
  padding: 4px 4px 4px 0; margin: 0;
}
.oz-satir {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(199, 144, 61, 0.25);
  border-radius: 10px;
}
.oz-foto {
  width: 34px; height: 34px; border-radius: 50%;
  object-fit: cover; border: 2px solid var(--altin); flex: 0 0 auto;
}
.oz-foto.bos {
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 35%, #2E4A63, var(--lacivert));
  color: var(--altin-acik); font-family: var(--font-ui); font-weight: 700; font-size: 12px;
}
.oz-ad { font-family: var(--font-govde); font-weight: 600; color: var(--kahve); flex: 1; min-width: 0; }
.oz-ok { color: var(--altin); font-weight: 700; }
.oz-fil {
  font-family: var(--font-baslik); font-size: 0.92em; color: var(--mavi, #315C7C);
  white-space: nowrap;
}
.ic-modal-butonlar { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Tek-oynama kilidi ekranı (eşleştirme) */
.oynadi-kutu {
  grid-column: 1 / -1;
  max-width: 540px; margin: 30px auto;
  text-align: center;
  padding: clamp(26px, 4vw, 44px);
  background: linear-gradient(180deg, rgba(251, 246, 233, 0.92), rgba(243, 232, 203, 0.86));
  border: 1px solid var(--altin); border-radius: 16px;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.3);
}
.oynadi-kutu h3 {
  font-family: var(--font-baslik); font-size: clamp(19px, 3vw, 26px);
  letter-spacing: 1px; color: #3B2A1D; margin: 10px 0 8px;
}
.oynadi-kutu p {
  font-family: var(--font-govde); color: var(--kahve); line-height: 1.6;
  margin-bottom: 20px;
}
.oynadi-kutu b { color: #6E4A1E; }

/* ============================================================
   GİRİŞ EKRANI — Giriş.png üzerine hizalanmış buton bölgeleri
   ============================================================ */
.giris-yeni {
  height: 100vh;
  display: flex;
  align-items: center;   /* görsel viewport'a sığar, dikeyde ortalı (kenarlarda koyu bant) */
  justify-content: center;
  background: #0D1320;
  overflow: hidden;
}

/* Sabit oranlı sahne: görsel hangi ekranda olursa olsun
   buton plakaları aynı yüzdelik konumda kalır */
.giris-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  /* Görsel ekranı TAMAMEN kaplar (bant yok). Taşma ORTADAN bölünür (giris-yeni
     align-items:center) → eskiden alttan taşıp kaybolan b4 normal ekranlarda görünür kalır.
     Çok geniş (21:9) ekranda en alt/üst hafif kırpılabilir. */
  height: max(100vh, 100vw * 9 / 16);
  background: url('/img/giris2.webp') center / contain no-repeat;
  font-size: calc(max(100vh, 100vw * 9 / 16) / 40);
}

.giris-baslik {
  position: absolute;
  left: 74.88%;
  right: auto;
  top: 4.99%;
  height: 19%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Logo: başlık alanına ortalanır (yazı kaldırıldı, yerine logo) */
.giris-logo {
  height: 75%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 9px rgba(0, 0, 0, 0.3));
}

.giris-yazi {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.12em;
  min-width: 0;
}

.giris-baslik h1 {
  font-family: var(--font-giris, 'Marcellus'), var(--font-baslik);
  font-weight: var(--font-giris-w, 400);
  font-size: 1.95em;
  letter-spacing: 0.14em;
  line-height: 1.15;
  color: #22324E;
}

.giris-baslik p {
  font-family: var(--font-govde);
  font-style: italic;
  font-size: 0.78em;
  color: #6E5337;
}

/* Plakalara oturan butonlar */
.giris-btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-giris, 'Marcellus'), var(--font-baslik);
  font-weight: var(--font-giris-w, 400);
  letter-spacing: 0.16em;
  line-height: 1;            /* büyük harfler kutuda dikey ortalansın */
  text-transform: uppercase;
  text-decoration: none;
  font-size: 0.95em;
  transition: filter var(--gecis), transform var(--gecis);
}

.giris-btn:hover {
  transform: scale(1.025);
  filter: drop-shadow(0 0 14px rgba(240, 204, 138, 0.85));
}

.plaka-acik { color: #4A3722; }
.plaka-koyu { color: var(--altin-parlak); text-shadow: 0 0 10px rgba(240, 204, 138, 0.4); }

/* Slogan: b1 ile b2 arasındaki iki çizginin (%38 ve %46) tam ortasına */
.giris-slogan {
  position: absolute;
  left: 57%;
  right: auto;
  top: 40.13%;
  width: 42.48%;
  height: 7.72%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-govde);
  font-style: italic;
  font-size: 0.74em;
  color: #6E5337;
}

.giris-btn.b1 { left: 63.63%; top: 24.68%; width: 30%; height: 15.1%;
  flex-direction: column; gap: 0.18em; line-height: 1.06; }
.b1-alt {
  font-size: 0.78em;   /* alt yazı büyütüldü (yine de FAME ACADEMY'den küçük) */
  letter-spacing: 0.05em;
  text-transform: none;
  font-weight: 400;
  font-style: italic;
  opacity: 0.82;
}
.giris-btn.b2 { left: 63.73%; right: auto; top: 52.03%; width: 30%; height: 9.8%; }
.giris-btn.b3 { left: 63.71%; right: auto; top: 65.68%; width: 30%; height: 10.8%; }
.giris-btn.b4 { left: 63.71%; right: auto; top: 79.33%; width: 30%; height: 10.8%; }
/* Slogan yeni tasarımda yok; logo (giris-baslik) üst parşömende kalır */
.giris-slogan { display: none; }
#kurallarBtn { cursor: pointer; }

/* ============================================================
   AKADEMİ — yatay kaydırmalı salon
   ============================================================ */
.akademi-sayfa {
  height: 100vh;
  height: 100dvh;   /* iOS Safari / Android Chrome tarayıcı çubuğu farkını eşitler (çakışmayı önler) */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Salon görseli (/img/salon-arkaplan.webp) varsa onu kullanır;
     yoksa alttaki degrade katmanları salon hissini taklit eder */
  background:
    linear-gradient(180deg, rgba(24, 16, 6, 0.18) 0%, rgba(24, 16, 6, 0.06) 45%, rgba(24, 16, 6, 0.38) 100%),
    url('/img/salon-arkaplan.webp') center / cover no-repeat,
    linear-gradient(180deg, #221810 0%, #181009 60%, #100A05 100%);
}

/* Akademide üst bant salonun üstüne karışır: opak şerit yerine yumuşak kararma */
.akademi-sayfa .ust-bant.koyu {
  background: linear-gradient(180deg, rgba(13, 9, 4, 0.55), rgba(13, 9, 4, 0));
  border-bottom: none;
}

.akademi-sayfa .marka,
.akademi-sayfa .adim { text-shadow: 0 1px 5px rgba(0, 0, 0, 0.75); }

.akademi-sayfa .adim.aktif { background: rgba(13, 9, 4, 0.45); }

.akademi-baslik {
  text-align: center;
  padding: 18px 20px 6px;
  color: var(--mermer);
}

/* Altın AKADEMİ arması — sahne ortasındaki sancak */
.akademi-amblem {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 12px 38px 14px;
  background: linear-gradient(180deg, rgba(20, 13, 5, 0.92), rgba(32, 21, 9, 0.88));
  border: 1px solid var(--altin);
  box-shadow:
    inset 0 0 0 3px rgba(20, 13, 5, 0.9),
    inset 0 0 0 4px rgba(199, 144, 61, 0.55),
    0 6px 24px rgba(0, 0, 0, 0.5);
  border-radius: 4px;
}

.akademi-amblem .amblem-ikon {
  font-size: 26px;
  line-height: 1;
  filter: sepia(1) saturate(3) hue-rotate(-10deg) brightness(1.1);
}

.akademi-amblem h2 {
  font-family: var(--font-baslik);
  font-weight: 700;
  font-size: clamp(20px, 2.6vw, 28px);
  letter-spacing: 6px;
  color: var(--altin-parlak);
  text-shadow: 0 0 18px rgba(240, 204, 138, 0.4);
}

.akademi-amblem .amblem-alt {
  font-family: var(--font-baslik);
  font-size: 9px;
  letter-spacing: 4px;
  color: rgba(227, 185, 107, 0.75);
}

.salon-sarmal {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  min-height: 0;
}

.salon {
  display: flex;
  gap: 42px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  padding: 12px 90px 52px;   /* alt boşluk azaltıldı: kartlar zemine otursun (havada durmasın) */
  width: 100%;
  height: 100%;
  align-items: flex-end;
  scrollbar-width: none;
}

.salon::-webkit-scrollbar { display: none; }

/* Kart: kullanıcının altın çerçeveli kart görseli — isim alttaki boş plakete CSS ile yazılır */
.nis {
  flex: 0 0 auto;
  scroll-snap-align: center;
  position: relative;
  cursor: pointer;
  outline: none;
  height: min(53vh, 437px);   /* ~%15 büyütüldü (zemin hizası korunur, kartlar yukarı uzar) */
  transition: transform var(--gecis);
}

.kart-gorsel {
  display: block;
  height: 100%;
  width: auto;
  filter:
    drop-shadow(0 26px 28px rgba(0, 0, 0, 0.55))
    drop-shadow(0 6px 14px rgba(0, 0, 0, 0.4));
  transition: filter var(--gecis);
}

/* Zemine düşen yansıma hissi */
.nis::after {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -22px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.5), transparent 70%);
  z-index: -1;
}

/* Seçili / üzerine gelinen kart: altın ışıldama (sahnedeki Aristoteles) */
.nis:hover, .nis:focus-visible {
  transform: translateY(-12px) scale(1.04);
}

.nis:hover .kart-gorsel, .nis:focus-visible .kart-gorsel {
  filter:
    brightness(1.07)
    drop-shadow(0 0 9px rgba(240, 204, 138, 0.85))
    drop-shadow(0 0 34px rgba(240, 204, 138, 0.5))
    drop-shadow(0 26px 28px rgba(0, 0, 0, 0.5));
}

/* Plaket yazısı: kart görselindeki boş mermer plakanın üzerine oturur */
.stel-yazi {
  position: absolute;
  left: 10%;
  right: 10%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-align: center;
  z-index: 2;
  pointer-events: none;
}

/* İki kart sayfasının plaket oranları farklı */
.nis.kart-ilk .stel-yazi { bottom: 5%; height: 17%; }
.nis.kart-son .stel-yazi { bottom: 7%; height: 24%; }

/* Yeni şablon (altın çerçeve) kartlarda plaket konumu farklı — isim boş plakete ortalanır */
.nis.kart-yeni .stel-yazi { bottom: 12%; height: 14%; gap: 5px; }
.nis.kart-yeni .stel-arketip { font-size: 11px; letter-spacing: 1.5px; }

.stel-yazi .stel-ad {
  display: block;
  font-family: var(--font-baslik);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 2px;
  color: #4A3722;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
  white-space: nowrap;
  transition: color var(--gecis), text-shadow var(--gecis);
}

.stel-yazi .stel-arketip {
  display: block;
  font-family: var(--font-ui);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #7A5E3C;
  line-height: 1.4;
  transition: color var(--gecis);
}

/* Üzerine gelince isim altına döner */
.nis:hover .stel-ad, .nis:focus-visible .stel-ad {
  color: #8B5E1A;
  text-shadow: 0 0 10px rgba(240, 204, 138, 0.9), 0 1px 0 rgba(255, 255, 255, 0.4);
}

.nis:hover .stel-arketip, .nis:focus-visible .stel-arketip { color: #8B6A38; }

.nis.taniisildi::before {
  content: '✓';
  position: absolute;
  top: 5%;
  right: 11%;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--altin);
  color: #2A1D10;
  font-size: 13px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  z-index: 3;
}

.salon-ok {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--altin);
  background: rgba(27, 18, 9, 0.85);
  color: var(--altin-acik);
  font-size: 22px;
  cursor: pointer;
  transition: all var(--gecis);
  display: flex;
  align-items: center;
  justify-content: center;
}

.salon-ok:hover { background: rgba(199, 144, 61, 0.25); }

.salon-ok.sol { left: 18px; }
.salon-ok.sag { right: 18px; }

/* ============================================================
   ATİNA OKULU FRESKİ — köşe önizleme + tam ekran + isim etiketleri
   ============================================================ */
.fresk-mini {
  position: fixed;
  right: 18px; top: 96px;          /* sağ üst: Tanı/Eşleştir nav bandının altı, biraz aşağı */
  z-index: 30;
  width: clamp(172px, 19.5vw, 265px);  /* ~%15 büyütüldü */
  aspect-ratio: 1500 / 1164;
  padding: 0;
  border: 2px solid var(--altin);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  background: #0D1320;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.fresk-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fresk-mini:hover { transform: scale(1.04); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); }
.fresk-mini-yazi {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 5px 8px;
  font: 600 11px var(--font-ui);
  letter-spacing: 0.04em;
  color: var(--beyaz-sicak);
  background: linear-gradient(transparent, rgba(8, 12, 20, 0.85));
  text-align: center;
}

.fresk-tam {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  padding: 6px;
  background: rgba(8, 12, 20, 0.92);
  backdrop-filter: blur(3px);
}
.fresk-tam[hidden] { display: none; }
body.fresk-acik { overflow: hidden; }
/* Tam ekran freskte ses kontrolü figürlerin/etiketlerin üstüne binmesin */
body.fresk-acik .muzik-kontrol { display: none; }

/* Ses kontrolü akademi üst bandında (FAME ACADEMY'nin yanında) */
.muzik-kontrol.muzik-bantta {
  position: static; right: auto; bottom: auto; z-index: auto;
  margin-left: 14px;
  flex-direction: row-reverse;   /* buton solda, ses çubuğu sağa açılsın */
}
.muzik-bantta .muzik-ses { margin-right: 0; }
.muzik-bantta:hover .muzik-ses,
.muzik-bantta:focus-within .muzik-ses { margin-left: 10px; margin-right: 0; }
.muzik-bantta .muzik-btn { width: 38px; height: 38px; font-size: 18px; }
.akademi-sayfa .ust-bant { justify-content: flex-start; }
.akademi-sayfa .ust-bant .adimlar { margin-left: auto; }
@media (max-width: 640px) {
  .muzik-bantta { margin-left: 8px; }
  .muzik-bantta .muzik-btn { width: 34px; height: 34px; font-size: 16px; }
}

.fresk-tuval {
  position: relative;
  aspect-ratio: 1500 / 1164;
  height: 96vh;
  width: auto;
  max-width: 99vw;
  background: #0D1320 url('/img/atina-okulu.webp?v=2') center / contain no-repeat;
  border: 1px solid var(--altin);
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.fresk-kapat {
  position: fixed; top: 16px; right: 20px; z-index: 92;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--altin); background: rgba(16, 24, 38, 0.8); color: var(--beyaz-sicak);
  font-size: 24px; line-height: 1; cursor: pointer;
}
.fresk-kapat:hover { background: rgba(16, 24, 38, 1); }

/* İsim etiketi */
.fresk-etiket {
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 4px 10px;
  border-radius: 999px;
  font: 600 clamp(11px, 1.3vw, 14px) var(--font-baslik);
  letter-spacing: 0.03em;
  white-space: nowrap;
  background: rgba(16, 24, 38, 0.82);
  color: var(--beyaz-sicak);
  border: 1px solid var(--altin);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
  z-index: 3;
  user-select: none;
}
.fresk-etiket.tiklanir { cursor: pointer; }
.fresk-etiket.tiklanir:hover { background: var(--altin); color: #2A1D10; transform: translate(-50%, -50%) scale(1.07); }
.fresk-etiket.bagsiz { border-style: dashed; opacity: 0.92; }

.fresk-tam.fresk-duzen .fresk-etiket { cursor: move; }
.fresk-tam.fresk-duzen .fresk-etiket.bagsiz { border-color: #D88; }
.fresk-etiket .fresk-ad[contenteditable] { outline: none; min-width: 28px; cursor: text; }
.fresk-sil {
  position: absolute; top: -8px; right: -8px;
  width: 17px; height: 17px; border-radius: 50%;
  background: #A33; color: #fff; font-size: 13px; line-height: 17px; text-align: center;
  cursor: pointer; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* İsimden figüre ok */
.fresk-oklar {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 2; pointer-events: none; overflow: visible;
}
.fresk-ok-tut {
  position: absolute; transform: translate(-50%, -50%);
  width: 16px; height: 16px; border-radius: 50%;
  background: #E8C98C; border: 2px solid #2A1D10; cursor: grab; z-index: 5;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.6);
}
.fresk-ok-tut:active { cursor: grabbing; }
.fresk-ok-btn {
  position: absolute; top: -9px; left: -9px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #2A7A4A; color: #fff; font-size: 12px; line-height: 18px; text-align: center;
  cursor: pointer; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.fresk-arac {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  z-index: 93;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 16px; border-radius: 10px;
  background: rgba(16, 24, 38, 0.96); color: var(--beyaz-sicak);
  font: 13px var(--font-ui);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}
.fresk-arac b { color: var(--altin-parlak); letter-spacing: 1px; }
.fresk-arac .fresk-bilgi { opacity: 0.8; }
.fresk-arac button {
  font: inherit; cursor: pointer; padding: 5px 11px; border-radius: 7px;
  border: 1px solid rgba(199, 144, 61, 0.6); background: #2A3A52; color: var(--beyaz-sicak);
}
.fresk-arac button:hover { background: #34496A; }
.fresk-arac #freskEkle { background: var(--altin); color: #2A1D10; border-color: var(--altin); font-weight: 700; }

@media (max-width: 640px) {
  .fresk-mini { width: 96px; right: 10px; top: 54px; bottom: auto; z-index: 50;
    box-shadow: 0 0 0 3px rgba(16, 24, 38, 0.95), 0 8px 22px rgba(0, 0, 0, 0.75); }
  .fresk-mini-yazi { font-size: 9px; padding: 3px 4px; }
  .fresk-tuval { height: auto; width: 99vw; max-height: 88vh; }
}

.akademi-alt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding: 14px 20px 26px;
}

/* İlerleme yazısı: yoğun arka plan görseli üstünde okunması için koyu kapsül içinde */
.tanisma-durumu {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--mermer);
  background: rgba(13, 9, 4, 0.62);
  border: 1px solid rgba(227, 185, 107, 0.5);
  border-radius: 999px;
  padding: 9px 20px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
}

.tanisma-durumu b { color: var(--altin-parlak); }

/* ============================================================
   FİLOZOF DETAY MODALİ — parşömen kart
   ============================================================ */
.modal-fon {
  position: fixed;
  inset: 0;
  background: rgba(8, 12, 20, 0.72);
  backdrop-filter: blur(3px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 130;
  padding: 24px;
}

.modal-fon.acik { display: flex; }

/* Detay kartı: KİMLİK düzeni — solda yuvarlak portre, sağda bilgiler. */
.f-kart {
  width: min(820px, 94vw);
  max-height: 92vh;
  background:
    linear-gradient(160deg, var(--beyaz-sicak), var(--parsomen) 55%, var(--parsomen-koyu));
  border: 1px solid var(--altin);
  border-radius: 18px;
  position: relative;
  display: flex;
  gap: clamp(18px, 3vw, 34px);
  padding: clamp(22px, 3vw, 38px);
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.55),
    inset 0 0 0 6px rgba(255, 255, 255, 0.4),
    inset 0 0 0 7px rgba(199, 144, 61, 0.35);
  font-size: clamp(13px, 1.45vw, 16px);
  animation: kartGel 320ms cubic-bezier(0.3, 0.9, 0.4, 1);
  overflow: visible;
}

/* Köşe motifleri (referans karttaki kıvrımlı süslemeler) */
.fk-kose {
  position: absolute;
  width: clamp(46px, 6vw, 70px);
  height: clamp(46px, 6vw, 70px);
  background: url('/img/kose-motif.svg') no-repeat center / contain;
  pointer-events: none;
  opacity: 0.95;
  z-index: 3;
}
.fk-kose.sol-ust { top: 11px; left: 11px; }
.fk-kose.sag-ust { top: 11px; right: 11px; transform: scaleX(-1); }
.fk-kose.sol-alt { bottom: 11px; left: 11px; transform: scaleY(-1); }
.fk-kose.sag-alt { bottom: 11px; right: 11px; transform: scale(-1, -1); }

/* Sol köşe altın aksanı (kimlik şeridi hissi) */
.f-kart::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: clamp(170px, 24vw, 250px);
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(199, 144, 61, 0.5), transparent);
}

@keyframes kartGel {
  from { opacity: 0; transform: translateY(22px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

/* ---- SOL: portre + arketip ---- */
.fk-sol {
  flex: 0 0 clamp(150px, 22vw, 220px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 1.6vw, 18px);
  padding-right: clamp(10px, 1.5vw, 18px);
}

.fk-foto {
  width: clamp(140px, 19vw, 200px);
  height: clamp(140px, 19vw, 200px);
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 35%, #2E4A63, var(--lacivert));
  border: 4px solid var(--altin);
  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.35),
    inset 0 0 0 2px rgba(255, 255, 255, 0.25);
  flex: 0 0 auto;
}

.fk-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 26%;
  transform: scale(1.35);
  transform-origin: center 26%;
  display: block;
}

.f-arketip {
  display: inline-block;
  text-align: center;
  padding: 0.5em 1.1em;
  background: linear-gradient(180deg, var(--altin-acik), var(--altin));
  color: #2A1D10;
  font-family: var(--font-ui);
  font-size: 0.82em;
  font-weight: 700;
  letter-spacing: 0.06em;
  border-radius: 999px;
  box-shadow: 0 0.15em 0.7em rgba(199, 144, 61, 0.4);
  line-height: 1.2;
}

/* ---- SAĞ: bilgiler ---- */
.fk-sag {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.4vw, 16px);
  justify-content: center;
}

.fk-baslik {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
  border-bottom: 1px solid rgba(199, 144, 61, 0.4);
  padding-bottom: clamp(8px, 1.2vw, 14px);
}

.f-kart h3 {
  font-family: var(--font-baslik);
  font-weight: 700;
  font-size: 1.9em;
  letter-spacing: 0.1em;
  color: #3B2A1D;
  line-height: 1.05;
  margin: 0;
}

.f-donem {
  font-family: var(--font-ui);
  font-size: 0.72em;
  letter-spacing: 0.18em;
  color: #7A5E3C;
  text-transform: uppercase;
}

.fk-maddeler {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5em 1.2em;
  margin: 0;
  padding: 0;
}

.fk-maddeler li {
  font-size: 0.9em;
  line-height: 1.3;
  padding-left: 1.3em;
  position: relative;
  color: #3B2A1D;
}

.fk-maddeler li::before {
  content: '◆';
  position: absolute;
  left: 0;
  top: 0.18em;
  font-size: 0.6em;
  color: var(--altin);
}

.f-katki {
  font-size: 0.85em;
  line-height: 1.45;
  color: #5C4530;
  background: rgba(199, 144, 61, 0.12);
  border-left: 3px solid var(--altin);
  border-radius: 0 6px 6px 0;
  padding: 0.6em 0.9em;
}

.f-katki b {
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #8B5E1A;
  margin-right: 0.35em;
}

/* Kapat butonu */
.modal-kapat {
  position: absolute;
  top: -16px;
  right: -16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--altin);
  background: radial-gradient(circle at 32% 28%, #fffdf7, #efe2c8);
  color: var(--kahve);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--gecis), filter var(--gecis);
}

.modal-kapat:hover {
  transform: scale(1.1);
  filter: brightness(1.04) saturate(1.1);
  background: radial-gradient(circle at 32% 28%, #ffe9bf, var(--altin-acik));
}

.modal-gezin {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--altin);
  background: rgba(16, 24, 38, 0.85);
  color: var(--altin-acik);
  font-size: 18px;
  cursor: pointer;
  z-index: 51;
}

/* Hover yalnızca gerçek fareli cihazlarda: dokunmatikte tıklayınca renk yapışıyordu */
@media (hover: hover) {
  .modal-gezin:hover { background: rgba(199, 144, 61, 0.3); }
}
.modal-gezin { -webkit-tap-highlight-color: transparent; }
/* Oklar kartın kenarına otursun (merkezleri kart kenarında, hafif üzerine binecek). */
.modal-gezin.sol { left: max(6px, calc(50% - 410px - 17px)); }
.modal-gezin.sag { right: max(6px, calc(50% - 410px - 17px)); }

/* ============================================================
   EŞLEŞTİRME EKRANI
   ============================================================ */
.eslestirme-sayfa {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    url('/img/eslestirme-arkaplan.webp') center / cover no-repeat fixed,
    var(--parsomen);
}

/* Eşleştirmede üst bant ve alt bar arka plan görseline karışır */
.eslestirme-sayfa .ust-bant {
  background: transparent;
  border-bottom: none;
  justify-content: flex-start;   /* müzik ikonu markanın yanında (akademi ile aynı) */
}
.eslestirme-sayfa .ust-bant .adimlar { margin-left: auto; }

.eslestirme-baslik {
  text-align: center;
  padding: 26px 20px 6px;
}

.eslestirme-baslik h2 {
  font-family: var(--font-baslik);
  font-size: clamp(22px, 3vw, 32px);
  letter-spacing: 3px;
}

.eslestirme-baslik p {
  font-style: italic;
  color: var(--kahve-yumusak);
  margin-top: 6px;
  font-size: 14.5px;
}

.eslestirme-govde {
  flex: 1;
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 26px;
  padding: 22px clamp(16px, 4vw, 48px) 30px;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}

.panel-baslik {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--mavi);
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(199, 144, 61, 0.4);
  margin-bottom: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.calisanlar { display: flex; flex-direction: column; gap: 12px; }

.calisan-kart {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--beyaz-sicak);
  border: 1px solid rgba(199, 144, 61, 0.45);
  border-radius: 6px;
  padding: 12px 14px;
  cursor: grab;
  transition: all var(--gecis);
  box-shadow: 0 2px 10px rgba(59, 42, 29, 0.08);
  position: relative;
}

.calisan-kart:active { cursor: grabbing; }

.calisan-kart:hover {
  border-color: var(--altin);
  box-shadow: 0 4px 18px rgba(199, 144, 61, 0.25);
  transform: translateY(-2px);
}

.calisan-kart.secili {
  border-color: var(--altin);
  box-shadow: 0 0 0 2px var(--altin), 0 6px 22px rgba(199, 144, 61, 0.35);
}

.calisan-kart.suruklenen { opacity: 0.45; }

.calisan-kart.eslesti {
  background: linear-gradient(180deg, #FDF9EE, var(--parsomen-koyu));
}

.calisan-foto {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--altin);
  flex-shrink: 0;
}

.calisan-foto.bos {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mermer);
  font-family: var(--font-baslik);
  font-size: 20px;
  color: var(--kahve-yumusak);
}

.calisan-ad {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 15px;
}

.calisan-eslesme {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--mavi);
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.eslesme-kaldir {
  border: none;
  background: none;
  color: #A33;
  cursor: pointer;
  font-size: 13px;
  padding: 0 3px;
}

.filozof-izgara {
  display: grid;
  grid-template-columns: repeat(5, 1fr);   /* 14 filozof → 5-5-4, scroll yok */
  gap: clamp(8px, 1vw, 14px) 12px;
  align-content: start;
  padding: 14px 8px 0; /* üst rozetler + sürüklerken büyüyen kenar hücreler kırpılmasın; hafif sağa pay */
}

.filozof-hucre {
  background: var(--beyaz-sicak);
  border: 1px solid rgba(199, 144, 61, 0.45);
  border-radius: 6px;
  padding: clamp(7px, 0.9vw, 11px) 8px clamp(9px, 1vw, 12px);
  text-align: center;
  transition: all var(--gecis);
  position: relative;
}

.hucre-foto {
  width: clamp(54px, 5.4vw, 78px);
  height: clamp(54px, 5.4vw, 78px);
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 6px;
  background: radial-gradient(circle at 50% 35%, #2E4A63, var(--lacivert));
  border: 3px solid var(--altin);
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.3),
    inset 0 0 0 2px rgba(255, 255, 255, 0.22);
}

.hucre-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 26%;
  transform: scale(1.35);
  transform-origin: center 26%;
  display: block;
}

.filozof-hucre .f-ad {
  font-family: var(--font-baslik);
  font-size: 14px;
  letter-spacing: 1px;
  font-weight: 700;
  color: #3B2A1D;   /* koyu kahve: açık hücre zemininde isim okunur (önceden renksiz=görünmezdi) */
}

.filozof-hucre .f-tip {
  font-family: var(--font-ui);
  font-size: 10.5px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--kahve-yumusak);
  margin-top: 3px;
  line-height: 1.4;
}

.filozof-hucre.hedef {
  border-color: var(--altin);
  border-style: dashed;
  background: rgba(199, 144, 61, 0.1);
  box-shadow: 0 0 22px rgba(227, 185, 107, 0.4);
  transform: scale(1.03);
}

.filozof-hucre.birakilabilir { cursor: pointer; }

.filozof-hucre .es-rozet {
  position: absolute;
  top: -8px;
  right: -8px;
  display: flex;
  flex-direction: row-reverse;
}

.es-rozet img.mini-foto {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--altin);
  object-fit: cover;
  margin-left: -10px;
  background: var(--mermer);
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

.bilgi-btn {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--altin);
  background: transparent;
  color: var(--altin);
  font-family: var(--font-govde);
  font-style: italic;
  font-size: 13px;
  cursor: pointer;
  line-height: 1;
}

.bilgi-btn:hover { background: var(--altin); color: #fff; }

.eslestirme-alt {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-direction: column;    /* sayaç üstte, butonlar (geri + bitir) altta */
  align-items: center;
  gap: 10px;
  padding: 16px;
  background: transparent;
}
.eslestirme-butonlar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}
/* Mobilde/tablette alt çubuk şeffaf kalınca kartlar altından geçip çakışıyor →
   dolu zemin ver, içerik temiz altından kaysın. */
@media (max-width: 900px) {
  .eslestirme-alt {
    flex-direction: column;
    gap: 8px;
    padding: 10px 14px 16px;
    background: linear-gradient(to top, rgba(243, 232, 203, 0.98) 60%, rgba(243, 232, 203, 0));
  }
  .eslestirme-butonlar { flex-direction: column; width: 100%; gap: 8px; }
  .eslestirme-alt .btn, .akademi-alt .btn { width: 100%; max-width: 360px; }
  .akademi-alt { flex-direction: column; gap: 10px; padding: 12px 16px 20px; }
}

.eslesme-sayac {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--kahve);
  text-shadow: 0 1px 3px rgba(251, 246, 233, 0.9);
}

.eslesme-sayac b { color: var(--altin-koyu, #8B5E1A); }

/* ===== Mobil: "düşünür seç" alt paneli (sheet) ===== */
.fil-sheet-fon {
  position: fixed; inset: 0; z-index: 140;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(8, 12, 20, 0.6); backdrop-filter: blur(2px);
}
body.sheet-acik { overflow: hidden; }
.fil-sheet {
  width: 100%; max-width: 560px; height: min(78vh, 620px);
  display: flex; flex-direction: column;
  background: linear-gradient(160deg, var(--beyaz-sicak), var(--parsomen) 60%, var(--parsomen-koyu));
  border: 1px solid var(--altin); border-bottom: none;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
  animation: sheetGel 280ms cubic-bezier(0.3, 0.9, 0.4, 1);
}
@keyframes sheetGel { from { transform: translateY(100%); } to { transform: none; } }
.fil-sheet-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid rgba(199, 144, 61, 0.3);
}
.fil-sheet-ad { font-family: var(--font-govde); font-size: 15px; color: var(--kahve); }
.fil-sheet-ad b { color: #6E4A1E; }
.fil-sheet-kapat {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--altin); background: rgba(255, 255, 255, 0.5);
  color: var(--kahve); font-size: 20px; line-height: 1; cursor: pointer;
}
.fil-sheet-grid {
  flex: 1; min-height: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  align-content: start;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
}
.fil-sheet-kart {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 6px 12px; cursor: pointer;
  background: rgba(255, 255, 255, 0.55); border: 1.5px solid rgba(199, 144, 61, 0.4);
  border-radius: 12px; text-align: center; font: inherit;
}
.fil-sheet-kart.secili { border-color: var(--altin); background: rgba(199, 144, 61, 0.22); box-shadow: 0 0 0 2px rgba(199, 144, 61, 0.4); }
.fsk-foto {
  width: 64px; height: 64px; border-radius: 50%; overflow: hidden;
  border: 2.5px solid var(--altin); background: radial-gradient(circle at 50% 35%, #2E4A63, var(--lacivert));
}
.fsk-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; transform: scale(1.3); }
.fsk-ad { font-family: var(--font-baslik); font-size: 13px; letter-spacing: 0.3px; color: var(--kahve); }
.fsk-tip { font-family: var(--font-ui); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--kahve-yumusak); line-height: 1.25; }
@media (max-width: 360px) { .fil-sheet-grid { grid-template-columns: repeat(2, 1fr); } }

.ipucu-bant {
  text-align: center;
  font-family: var(--font-ui);
  font-size: 12.5px;
  color: var(--kahve-yumusak);
  padding: 4px 20px 0;
}

/* ============================================================
   SONUÇLAR — İçgörü Haritası (koyu tema)
   ============================================================ */
.sonuc-sayfa {
  min-height: 100vh;
  background:
    url('/img/sonuc-arkaplan.webp') center / cover no-repeat fixed,
    var(--parsomen);
  color: var(--kahve);
  display: flex;
  flex-direction: column;
}

/* Sonuç ekranında üst bant arka plana karışır — görselin altın çerçevesi bandı kendisi çizer.
   Köşelerdeki lacivert perdelerin üstüne denk geldiği için yazılar altın/açık tondadır. */
.sonuc-sayfa .ust-bant {
  background: transparent;
  border-bottom: none;
  justify-content: flex-start;   /* müzik ikonu markanın yanında (akademi ile aynı) */
}
.sonuc-sayfa .ust-bant .adimlar { margin-left: auto; }

.sonuc-sayfa .marka { color: var(--altin-acik); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); }

.sonuc-sayfa .adim { color: rgba(233, 212, 184, 0.75); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); }

.sonuc-sayfa .adim.aktif {
  color: var(--altin-parlak);
  background: rgba(16, 24, 38, 0.35);
  border-color: var(--altin);
}

.sonuc-baslik {
  text-align: center;
  padding: 10px 20px 2px;
}

.sonuc-baslik .amblem {
  width: 62px;
  height: 38px;
  margin: 5px auto 2px;
  border: 1.5px solid var(--altin);
  border-bottom: none;
  border-radius: 50px 50px 0 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-family: var(--font-baslik);
  font-size: 17px;
  color: #8B5E1A;
  padding-bottom: 4px;
}

.sonuc-baslik h2 {
  font-family: var(--font-baslik);
  font-size: clamp(26px, 4vw, 40px);
  letter-spacing: 4px;
  color: #3B2A1D;
}

.sonuc-baslik .katilim {
  font-family: var(--font-ui);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: 0.6px;
  color: #3B2A1D;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.45);
  margin-top: 8px;
}

.sonuc-baslik .katilim b { color: #7A4E12; }

/* ============================================================
   KİŞİSEL ÇARK — Atina Okulu freski üzerinde dağılan portreler
   ============================================================ */
.atina-sahne {
  position: relative;
  width: min(700px, 92vw);
  /* #sahne display:contents → bu kutu body'nin flex öğesi; flex item'da
     aspect-ratio yükseklik vermez, o yüzden yüksekliği de açıkça veriyoruz (1500:1164) */
  height: min(543px, 71.4vw);
  aspect-ratio: 1500 / 1164;
  flex: 0 0 auto;
  margin: 10px auto 0;
  border-radius: 16px;
  overflow: hidden;
  background: #0D1320 url('/img/atina-okulu.webp?v=2') center / cover no-repeat;
  border: 1px solid var(--altin);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.5),
    inset 0 0 0 5px rgba(255, 255, 255, 0.18),
    inset 0 0 0 6px rgba(199, 144, 61, 0.45);
}
/* Fresk üstüne kontrast perdesi: kenarlar koyu, portreler okunur */
.atina-sahne::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center,
    rgba(16, 24, 38, 0.18) 30%, rgba(16, 24, 38, 0.62) 100%);
  z-index: 1;
  pointer-events: none;
}

.atina-cark { position: absolute; inset: 0; z-index: 2; }

/* İçgörü ekranı: fresk daha büyük + isim etiketleri */
/* Yükseklik ekran yüksekliğine göre sınırlı → fresk hep ekrana sığar (scroll yok).
   En:boy 1500:1164 (=1.288) korunur. */
.sonuc-baslik-mini { padding: 0 20px 8px; }
.sonuc-fresk {
  height: min(72vh, 73vw);
  width: min(92.7vh, 94vw);
  margin: 3px auto 0;
}
.fresk-kat { position: absolute; inset: 0; z-index: 2; }

.sonuc-etiket { cursor: pointer; transition: transform 0.15s ease, background 0.15s ease, opacity 0.15s ease; }
.sonuc-etiket.dolu {
  background: rgba(199, 144, 61, 0.96); color: #2A1D10;
  border-color: var(--beyaz-sicak); font-weight: 700;
}
.sonuc-etiket.dolu:hover, .sonuc-etiket.dolu:focus-visible { transform: translate(-50%, -50%) scale(1.09); }
.sonuc-etiket.bos { opacity: 0.5; }
.sonuc-etiket.bos:hover, .sonuc-etiket.bos:focus-visible { opacity: 0.92; transform: translate(-50%, -50%) scale(1.04); }
.et-rozet {
  position: absolute; top: -9px; right: -9px;
  min-width: 19px; height: 19px; padding: 0 5px;
  display: flex; align-items: center; justify-content: center;
  background: var(--mavi, #315C7C); color: #fff;
  font: 700 11px var(--font-ui); border-radius: 10px;
  border: 2px solid var(--beyaz-sicak); box-shadow: 0 2px 6px rgba(16, 24, 38, 0.5);
}

/* İçgörü ekranı — MOBİL: kalabalık fresk yerine sadece eşleştirdiğin
   filozofların etiketleri; oklar gizli, etiketler büyük → okunur/dokunulur. */
@media (max-width: 640px) {
  .sonuc-baslik h2 { font-size: 21px; letter-spacing: 1.5px; }
  .sonuc-fresk { width: 98vw; height: 76vw; margin-top: 4px; }
  .sonuc-fresk .fresk-oklar { display: none; }
  .sonuc-fresk .sonuc-etiket.bos { display: none; }
  .sonuc-fresk .sonuc-etiket.dolu { font-size: 12px; padding: 4px 10px; }
  .sonuc-fresk .et-rozet { top: -8px; right: -8px; min-width: 17px; height: 17px; font-size: 10px; }
  .cark-ipucu { font-size: 13.5px; margin: 10px auto 2px; }
}

.ac-cizgi { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.ac-cizgi line { stroke-width: 0.4; stroke-dasharray: 1.4 1.6; opacity: 0.55; }

/* Merkez göbek: kaç kişiyi benzettin */
.ac-gobek {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(58px, 15%, 98px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #21314E, var(--lacivert));
  border: 2px solid var(--altin);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  z-index: 3; color: var(--beyaz-sicak); line-height: 1;
}
.ac-gobek b { font-family: var(--font-baslik); font-size: clamp(18px, 4vw, 30px); color: var(--altin-parlak); }
.ac-gobek span { font-family: var(--font-ui); font-size: clamp(8px, 1.4vw, 11px); letter-spacing: 1px; text-transform: uppercase; margin-top: 2px; opacity: 0.85; }

/* Portre düğümleri */
.ac-node {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 13.5%;
  min-width: 52px;
  display: flex; flex-direction: column; align-items: center;
  z-index: 4; cursor: pointer; outline: none;
}
.ac-ad {
  max-width: 150%;
  margin-bottom: 5px;
  padding: 2px 8px;
  font-family: var(--font-baslik);
  font-size: clamp(8.5px, 1.4vw, 12px);
  letter-spacing: 0.03em;
  color: var(--beyaz-sicak);
  background: rgba(16, 24, 38, 0.82);
  border: 1px solid rgba(199, 144, 61, 0.7);
  border-radius: 8px;
  white-space: nowrap;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.45);
}
.ac-foto {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background-size: cover;
  background-position: center 18%;
  transition: transform 0.18s ease;
}
.ac-node:hover .ac-foto,
.ac-node:focus-visible .ac-foto { transform: scale(1.09); }
.ac-rozet {
  position: absolute;
  left: 50%; bottom: -9px;
  transform: translateX(-50%);
  min-width: 19px; height: 19px;
  padding: 0 5px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--font-ui); font-weight: 700; font-size: 11px;
  border-radius: 10px;
  border: 2px solid var(--beyaz-sicak);
  box-shadow: 0 2px 7px rgba(16, 24, 38, 0.45);
}

.atina-bos-yazi {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  text-align: center;
  font-family: var(--font-govde);
  color: var(--beyaz-sicak);
  background: rgba(16, 24, 38, 0.72);
  padding: 18px 24px; border-radius: 12px;
  border: 1px solid var(--altin);
  line-height: 1.5;
}

.cark-ipucu {
  text-align: center;
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #3B2A1D;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.45);
  margin: 9px auto 2px;
  padding: 0 16px;
}
.cark-ipucu b { color: #7A4E12; }

/* Bölüm ayıracı: kişisel → takım toplamı */
.sonuc-toplam-baslik {
  text-align: center;
  max-width: 1100px;
  margin: 40px auto 0;
  padding: 26px 20px 0;
  border-top: 1px solid rgba(199, 144, 61, 0.32);
}
.sonuc-toplam-baslik h3 {
  font-family: var(--font-baslik);
  font-size: clamp(18px, 2.6vw, 26px);
  letter-spacing: 3px;
  color: #3B2A1D;
}
.sonuc-toplam-baslik .katilim {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--kahve-yumusak);
  margin-top: 8px;
}
.sonuc-toplam-baslik .katilim b { color: #8B5E1A; }

/* Kişi modali: filozof kartında, özellikler yerine benzetilen kişiler */
.kisi-ozet {
  font-family: var(--font-govde);
  font-size: 0.98em;
  color: var(--kahve);
  margin-bottom: 4px;
}
.kisi-ozet b { color: #8B5E1A; }
.kisi-liste {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 8px 12px;
  max-height: 46vh;
  overflow-y: auto;
  padding: 2px 4px 2px 0;
}
.kisi-rozet {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 9px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(199, 144, 61, 0.28);
  border-radius: 10px;
}
.kisi-foto {
  width: 38px; height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--altin);
  flex: 0 0 auto;
}
.kisi-foto.bos {
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 35%, #2E4A63, var(--lacivert));
  color: var(--altin-acik);
  font-family: var(--font-ui); font-weight: 700; font-size: 13px;
}
.kisi-ad {
  font-family: var(--font-govde);
  font-size: 0.96em; font-weight: 600;
  color: var(--kahve);
  line-height: 1.2;
}

.sonuc-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 22px;
  padding: 30px clamp(16px, 5vw, 60px) 50px;
  max-width: 1500px;
  margin: 0 auto;
  width: 100%;
}

.sonuc-kart {
  background: linear-gradient(180deg, rgba(251, 246, 233, 0.88), rgba(243, 232, 203, 0.82));
  border: 1px solid rgba(199, 144, 61, 0.55);
  border-radius: 8px;
  padding: 22px;
  backdrop-filter: blur(2px);
  box-shadow: 0 8px 26px rgba(59, 42, 29, 0.18);
}

.sonuc-kart-ust {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(199, 144, 61, 0.25);
  margin-bottom: 16px;
}

.sonuc-kart-ust .calisan-foto { width: 58px; height: 58px; }

.sonuc-kart-ust .ok {
  color: var(--altin);
  font-size: 20px;
  margin: 0 2px;
}

.sonuc-kart-ust .kazanan-foto {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: radial-gradient(circle at 50% 35%, #2E4A63, var(--lacivert));
  border: 2px solid var(--altin);
  box-shadow:
    0 3px 12px rgba(0, 0, 0, 0.3),
    0 0 16px rgba(227, 185, 107, 0.3);
}

.sonuc-kart-ust .kazanan-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 26%;
  transform: scale(1.35);
  transform-origin: center 26%;
  display: block;
}

.sonuc-ad {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 16px;
  color: #3B2A1D;
}

.sonuc-kazanan {
  font-family: var(--font-baslik);
  font-size: 14px;
  letter-spacing: 1px;
  color: #8B5E1A;
  margin-top: 4px;
}

.sonuc-ozet {
  font-size: 13.5px;
  font-style: italic;
  color: var(--kahve-yumusak);
  line-height: 1.6;
  margin-bottom: 14px;
}

.dagilim-satir {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-family: var(--font-ui);
  font-size: 12px;
}

.dagilim-satir .d-ad {
  width: 92px;
  flex-shrink: 0;
  color: var(--kahve-yumusak);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dagilim-cubuk {
  flex: 1;
  height: 8px;
  background: rgba(59, 42, 29, 0.14);
  border-radius: 4px;
  overflow: hidden;
}

.dagilim-cubuk i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--altin), var(--altin-acik));
  border-radius: 4px;
  transition: width 700ms ease;
}

.dagilim-satir .d-yuzde {
  width: 40px;
  text-align: right;
  color: #8B5E1A;
  flex-shrink: 0;
}

.sonuc-bos {
  text-align: center;
  padding: 80px 20px;
  font-style: italic;
  color: var(--kahve-yumusak);
}

.sonuc-alt {
  text-align: center;
  padding: 6px 20px 16px;
}

/* İçgörü sayfasındaki "Eşleştirmeni Güncelle" butonu: parşömen zeminde
   altın-üstüne-açık kalıp okunmuyordu → dolu, koyu yazılı okunaklı buton. */
.sonuc-alt .btn-kontur {
  background: linear-gradient(180deg, #FFFDF7, #EFE2C8);
  color: #5C3E0E;
  font-weight: 700;
  border-color: var(--altin);
  box-shadow: 0 3px 14px rgba(59, 42, 29, 0.22);
}
.sonuc-alt .btn-kontur:hover {
  background: linear-gradient(180deg, var(--altin-acik), var(--altin));
  color: #2A1D10;
  transform: translateY(-1px);
}

/* ============================================================
   ADMIN
   ============================================================ */
.admin-sayfa {
  min-height: 100vh;
  background: var(--parsomen) url('/img/admin-bg2.webp') center top / cover no-repeat fixed;
  display: flex;
  flex-direction: column;
}

/* Admin'de header bandı kaldırılır; logo/etiket görselin üstünde kalır */
.admin-sayfa .ust-bant {
  background: transparent;
  border-bottom: none;
}

.admin-govde {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: clamp(16px, 2.4vw, 28px) clamp(14px, 2.4vw, 28px) 48px;
}

/* Giriş kutusu dar ve ortalı kalsın */
#girisKutu { max-width: 430px; margin-left: auto; margin-right: auto; }

/* İki kolonlu panel: sol = çalışan yönetimi, sağ = istatistik */
.admin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(16px, 2vw, 28px);
  align-items: start;
}

.admin-sag, .admin-sol { min-width: 0; }

/* Orta genişlik: kolonlar biraz daralınca tek kolona düşmeden sığsın */
@media (max-width: 880px) {
  .admin-grid { grid-template-columns: 1fr; gap: 0; }
}

/* Admin paneli oyun değil, normal duyarlı panel → dikeyde "telefonu çevir"
   uyarısı GÖSTERİLMESİN (yoksa müşteri yöneticisi dikey telefonda paneli kullanamaz). */
.admin-sayfa .donme-uyari { display: none !important; }

/* Admin — telefon cilalama (müşteri yöneticisi telefondan girerse düzgün dursun) */
@media (max-width: 640px) {
  .admin-sayfa .ust-bant { padding: 6px 12px; }
  .admin-sayfa .marka-logo { width: 36px; height: 36px; }
  .admin-sayfa .marka { font-size: 16px; letter-spacing: 1px; gap: 7px; }
  .admin-govde { padding: 12px 12px 32px; }
  .admin-kutu { padding: 14px 12px; }
  .ic-kartlar { gap: 8px; }
  .cark { max-width: 320px; }
  .liste-kaydir { max-height: 58vh; }
  /* iOS Safari, font <16px inputa odaklanınca otomatik zoom yapar → 16px ile engelle */
  .form-satir input[type="text"],
  .form-satir input[type="password"],
  .form-satir textarea,
  .calisan-ara { font-size: 16px; }
}
@media (max-width: 400px) {
  .ic-kartlar { grid-template-columns: 1fr; }
}

/* Kutu alt açıklaması */
.kutu-alt {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: .3px;
  color: var(--kahve-yumusak);
  margin: -6px 0 16px;
}

/* ---- İçgörü Haritası çarkı ---- */
.kutu-cark { overflow: hidden; padding: clamp(14px, 1.6vw, 20px) clamp(10px, 1.4vw, 18px); }
.cark {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin: 4px auto 2px;
  aspect-ratio: 1 / 1;
}
.cark-cizgi {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.cark-cizgi line {
  stroke-width: .4;
  stroke-dasharray: 1.4 1.6;
  opacity: .5;
  vector-effect: non-scaling-stroke;
}
.cark-gobek {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 30%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #1c2c44, var(--lacivert));
  border: 2px solid var(--altin);
  box-shadow: 0 6px 20px rgba(16, 24, 38, .4), inset 0 0 18px rgba(199, 144, 61, .18);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 2;
}
.cark-gobek-ust {
  font-family: var(--font-ui);
  font-size: 8.5px;
  letter-spacing: 1.4px;
  color: var(--altin);
  text-transform: uppercase;
}
.cark-gobek b {
  font-family: var(--font-baslik);
  font-size: clamp(20px, 5.5vw, 30px);
  line-height: 1;
  color: var(--beyaz-sicak);
  margin: 2px 0;
}
.cark-gobek-alt {
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: .6px;
  color: var(--kahve-yumusak);
}
.cark-node {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 12%;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 3;
}
.cark-foto {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background-size: cover;
  background-position: center 18%;
  background-color: var(--parsomen);
  order: 2;
}
.cark-ad {
  order: 1;
  font-family: var(--font-baslik);
  font-size: 8.5px;
  letter-spacing: .2px;
  line-height: 1.1;
  color: var(--lacivert);
  text-align: center;
  margin-bottom: 4px;
  white-space: nowrap;
  text-shadow: 0 0 3px var(--parsomen), 0 0 5px var(--parsomen), 0 1px 2px var(--parsomen);
}
/* Yüzde: portrenin alt kenarına oturan küçük rozet (dikey yer kaplamaz) */
.cark-yuzde {
  position: absolute;
  left: 50%;
  bottom: -7px;
  transform: translateX(-50%);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 8.5px;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 9px;
  background: var(--beyaz-sicak);
  border: 1.5px solid;
  white-space: nowrap;
  box-shadow: 0 2px 5px rgba(16, 24, 38, .2);
}
.cark-yuzde span { color: var(--kahve-yumusak); font-weight: 400; }
.cark-bos {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(199, 144, 61, .5);
  border-radius: 50%;
}
.cark-bos-yazi {
  font-family: var(--font-govde);
  font-size: 13px;
  color: var(--kahve-yumusak);
  text-align: center;
  padding: 0 24px;
  line-height: 1.5;
}

/* ---- Öne çıkan özet kartları ---- */
.ic-kartlar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: clamp(14px, 1.6vw, 20px);
}
.ic-kartlar:empty { display: none; }
.ic-kart {
  background: var(--beyaz-sicak);
  border: 1px solid rgba(199, 144, 61, 0.5);
  border-left: 3px solid var(--altin);
  border-radius: 8px;
  padding: 14px 16px;
  box-shadow: var(--golge-kart);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ic-kart-etiket {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--kahve-yumusak);
}
.ic-kart-deger {
  font-family: var(--font-baslik);
  font-size: 18px;
  line-height: 1.15;
  color: var(--mavi);
}
.ic-kart-alt {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--kahve);
}

/* ---- Filozof dağılımı (sıralı yatay barlar) ---- */
.dagilim-liste { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }

/* Çalışan detaylı dağılım + anonim katılımcı listeleri */
.cd-satir, .kt-satir { padding: 7px 0; border-bottom: 1px solid rgba(199, 144, 61, 0.18); }
.cd-ust, .kt-ust { display: flex; align-items: baseline; gap: 8px; justify-content: space-between; }
.cd-ust b, .kt-ust b { font-family: var(--font-baslik); color: var(--kahve); font-size: 14px; }
.cd-ust small, .kt-ust small { font-size: 11px; color: var(--kahve-yumusak); white-space: nowrap; }
.cd-dag, .kt-secim { font-family: var(--font-ui); font-size: 12px; color: var(--kahve-yumusak); margin-top: 3px; line-height: 1.55; }
.cd-dag b, .kt-secim b { color: #6E4A1E; }
.dag-satir { display: flex; align-items: center; gap: 11px; }
.dag-foto {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 18%;
  background: var(--parsomen);
  flex-shrink: 0;
}
.dag-orta { flex: 1; min-width: 0; }
.dag-ust {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}
.dag-ad {
  font-family: var(--font-baslik);
  font-size: 13px;
  color: var(--lacivert);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dag-deger {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 13px;
  color: #8B5E1A;
  flex-shrink: 0;
}
.dag-deger small { font-weight: 400; color: var(--kahve-yumusak); }
.dag-bar {
  height: 7px;
  border-radius: 4px;
  background: rgba(199, 144, 61, 0.14);
  overflow: hidden;
}
.dag-bar i {
  display: block;
  height: 100%;
  border-radius: 4px;
  transition: width .5s ease;
}

/* ---- Eşleşme zamanı çizgi grafiği ---- */
.zaman-grafik { width: 100%; }
.zg-svg {
  width: 100%;
  height: 130px;
  display: block;
  overflow: visible;
}
.zg-eksen {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--kahve-yumusak);
}
.zg-toplam {
  font-weight: 700;
  color: #8B5E1A;
}

.admin-kutu {
  background: var(--beyaz-sicak);
  border: 1px solid rgba(199, 144, 61, 0.5);
  border-radius: 8px;
  padding: clamp(16px, 1.9vw, 24px);
  box-shadow: var(--golge-kart);
  margin-bottom: clamp(14px, 1.6vw, 20px);
}

.admin-kutu h3 {
  font-family: var(--font-baslik);
  font-size: 19px;
  letter-spacing: 1.5px;
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(199, 144, 61, 0.3);
}

.form-satir { margin-bottom: 16px; }

.form-satir label {
  display: block;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--kahve-yumusak);
  margin-bottom: 7px;
}

.form-satir input[type="text"],
.form-satir input[type="password"],
.form-satir textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--font-ui);
  font-size: 15px;
  border: 1px solid rgba(199, 144, 61, 0.55);
  border-radius: 4px;
  background: var(--parsomen);
  color: var(--kahve);
  outline: none;
  transition: border-color var(--gecis);
}

.form-satir input:focus,
.form-satir textarea:focus { border-color: var(--altin); box-shadow: 0 0 0 3px rgba(199,144,61,0.15); }

.form-satir textarea { resize: vertical; line-height: 1.5; }

.form-satir input[type="file"] {
  font-family: var(--font-ui);
  font-size: 13px;
}

.admin-liste { list-style: none; }

.admin-liste li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 4px;
  border-bottom: 1px solid rgba(199, 144, 61, 0.2);
}

.admin-liste li:last-child { border-bottom: none; }

.admin-liste .calisan-foto { width: 42px; height: 42px; }

.admin-liste .ad { flex: 1; font-family: var(--font-ui); font-weight: 600; font-size: 15px; }

.sil-btn {
  border: 1px solid #B5544A;
  background: transparent;
  color: #B5544A;
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 1px;
  padding: 7px 14px;
  border-radius: 4px;
  cursor: pointer;
  transition: all var(--gecis);
}

.sil-btn:hover { background: #B5544A; color: #fff; }

/* İlk sıra (pin) butonu */
.pin-btn {
  border: 1px solid var(--altin);
  background: transparent;
  color: #8B5E1A;
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 1px;
  padding: 7px 14px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--gecis);
}

.pin-btn:hover { background: rgba(199, 144, 61, 0.15); }

.pin-btn.aktif {
  background: linear-gradient(180deg, var(--altin-acik), var(--altin));
  color: #2A1D10;
  border-color: var(--altin);
  font-weight: 700;
}

.admin-liste li.pinned { background: rgba(199, 144, 61, 0.08); }

.ilk-rozet {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #2A1D10;
  background: linear-gradient(180deg, var(--altin-acik), var(--altin));
  border-radius: 999px;
  vertical-align: middle;
}

/* İçgörü istatistik grafikleri (Scholarch) */
.ist-ozet {
  font-family: var(--font-ui);
  font-size: 15px;
  color: var(--kahve);
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(199, 144, 61, 0.2);
}
.ist-ozet b { color: #8B5E1A; }

.ist-alt-baslik {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--kahve-yumusak);
  margin: 18px 0 10px;
}

.ist-bar-liste { display: flex; flex-direction: column; gap: 7px; }

.ist-kaydir { max-height: 360px; overflow-y: auto; padding-right: 6px; }

.ist-satir {
  display: grid;
  grid-template-columns: 150px 1fr auto;
  align-items: center;
  gap: 12px;
  font-family: var(--font-ui);
  font-size: 13px;
}

.ist-ad {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--kahve);
}

.ist-cubuk {
  height: 12px;
  background: rgba(199, 144, 61, 0.15);
  border-radius: 6px;
  overflow: hidden;
}

.ist-cubuk i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--altin-acik), var(--altin));
  border-radius: 6px;
  transition: width var(--gecis);
}

.ist-deger {
  white-space: nowrap;
  color: var(--kahve);
  font-variant-numeric: tabular-nums;
}
.ist-deger small { color: #8B5E1A; font-size: 11px; }
.ist-deger.ist-yok { color: var(--kahve-yumusak); }

.ist-bos { font-style: italic; color: var(--kahve-yumusak); font-size: 14px; }

/* Çalışan arama + kaydırmalı liste + düzenleme */
.calisan-ara {
  width: 100%;
  padding: 10px 14px;
  margin-bottom: 14px;
  font-family: var(--font-ui);
  font-size: 14px;
  border: 1px solid rgba(199, 144, 61, 0.5);
  border-radius: 6px;
  background: var(--parsomen);
  color: var(--kahve);
  outline: none;
  transition: border-color var(--gecis);
}
.calisan-ara:focus { border-color: var(--altin); box-shadow: 0 0 0 3px rgba(199, 144, 61, 0.15); }

.liste-kaydir { max-height: 540px; overflow-y: auto; padding-right: 8px; }

.liste-bos { font-style: italic; color: var(--kahve-yumusak); padding: 14px 4px; }

.admin-liste li { flex-wrap: wrap; }

.duzenle-btn {
  border: 1px solid var(--mavi);
  background: transparent;
  color: var(--mavi);
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 1px;
  padding: 7px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: all var(--gecis);
}
.duzenle-btn:hover { background: var(--mavi); color: #fff; }

.admin-liste li.duzenleniyor { display: block; }

.duzenle-form { display: flex; flex-direction: column; gap: 10px; width: 100%; }

.duzenle-form .d-ad {
  width: 100%;
  padding: 10px 12px;
  font-family: var(--font-ui);
  font-size: 15px;
  border: 1px solid var(--altin);
  border-radius: 5px;
  background: var(--parsomen);
  color: var(--kahve);
  outline: none;
}

.d-foto-label {
  font-family: var(--font-ui);
  font-size: 12.5px;
  color: var(--kahve-yumusak);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.d-kaldir {
  font-family: var(--font-ui);
  font-size: 12.5px;
  color: var(--kahve-yumusak);
  display: flex;
  align-items: center;
  gap: 7px;
}

.d-butonlar { display: flex; gap: 10px; margin-top: 2px; }
.d-kaydet { padding: 9px 20px; font-size: 12px; }

.d-iptal {
  border: 1px solid var(--kahve-yumusak);
  background: transparent;
  color: var(--kahve-yumusak);
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 1px;
  padding: 9px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: all var(--gecis);
}
.d-iptal:hover { background: var(--kahve-yumusak); color: #fff; }

/* Filozof dağılımı — donut grafik + lejant */
.donut-sarmal { position: relative; width: 190px; height: 190px; margin: 8px auto 22px; }

.donut {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  cursor: crosshair;
}

.donut-ipucu {
  position: absolute;
  transform: translate(-50%, -150%);
  background: var(--lacivert);
  color: var(--beyaz-sicak);
  font-family: var(--font-ui);
  font-size: 12px;
  padding: 6px 11px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s;
  z-index: 20;
  border-left: 3px solid var(--seg-renk, var(--altin));
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.donut-ipucu.gor { opacity: 1; }
.donut-ipucu b { color: #fff; }

.donut-orta {
  position: absolute;
  inset: 27%;
  border-radius: 50%;
  background: var(--beyaz-sicak);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(199, 144, 61, 0.3);
}
.donut-orta b { font-family: var(--font-baslik); font-size: 26px; color: #3B2A1D; line-height: 1; }
.donut-orta span {
  font-family: var(--font-ui); font-size: 9.5px; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--kahve-yumusak); margin-top: 3px;
}

.donut-legend { display: flex; flex-direction: column; gap: 8px; }

.legend-satir {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  gap: 10px;
  font-family: var(--font-ui);
  font-size: 13px;
}

.legend-foto {
  width: 26px; height: 26px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 22%;
  background: var(--mermer);
}

.legend-ad { color: var(--kahve); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.legend-deger { color: var(--kahve); font-variant-numeric: tabular-nums; white-space: nowrap; }
.legend-deger small { color: #8B5E1A; font-size: 11px; }

.uyari {
  font-family: var(--font-ui);
  font-size: 13px;
  padding: 11px 14px;
  border-radius: 4px;
  margin-top: 12px;
  display: none;
}

.uyari.hata { display: block; background: rgba(181, 84, 74, 0.12); color: #8E3A31; border: 1px solid rgba(181, 84, 74, 0.4); }
.uyari.basari { display: block; background: rgba(90, 130, 80, 0.14); color: #41612F; border: 1px solid rgba(90, 130, 80, 0.4); }

/* ---------- Duyarlılık ---------- */
/* Masaüstü: sayfa sabit, panel listeleri kendi içinde kayar (çok çalışanda
   tüm sayfa değil, yalnızca liste scroll olur) */
@media (min-width: 901px) {
  .eslestirme-sayfa { height: 100vh; overflow: hidden; }
  .eslestirme-govde { min-height: 0; overflow: hidden; }
  .eslestirme-govde > section {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .calisanlar,
  .filozof-izgara {
    overflow-y: auto;
    min-height: 0;
    flex: 1 1 auto;
    padding-right: 12px;
  }
}

@media (max-width: 900px) {
  .eslestirme-govde { grid-template-columns: 1fr; }
  .filozof-izgara { grid-template-columns: repeat(3, 1fr); }
  .modal-gezin.sol { left: 8px; }
  .modal-gezin.sag { right: 8px; }
  .adimlar { display: none; }
}

/* ============================================================
   MOBİL (telefon) — ≤ 640px
   ============================================================ */
@media (max-width: 640px) {
  /* — GİRİŞ: yatay görsel-plaka düzeni yerine dikey yığın — */
  .giris-yeni { height: auto; min-height: 100vh; align-items: stretch; overflow-y: auto; }
  .giris-stage {
    aspect-ratio: auto;
    height: auto;
    min-height: 100vh;
    width: 100%;
    background: linear-gradient(rgba(10, 15, 26, 0.74), rgba(10, 15, 26, 0.9)),
      url('/img/salon-arkaplan.webp') center / cover no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 13px;
    padding: 40px 16px;
    /* Yazılar ekran genişliğine göre ölçeklenir → her telefonda sığar */
    font-size: clamp(13.5px, 4.3vw, 18px);
  }
  .giris-baslik {
    position: static;
    left: auto; right: auto; top: auto;
    width: 100%; height: auto;
    margin-bottom: 6px;
    flex-direction: column;     /* mobilde logo üstte */
    text-align: center;
    gap: 6px;
  }
  .giris-logo { height: auto; width: clamp(86px, 26vw, 128px); max-width: 44%; margin-bottom: 2px; }
  .giris-slogan {
    position: static !important; left: auto; right: auto; top: auto;
    display: block !important;            /* base'deki flex yazıyı sarmıyordu */
    width: 86vw; max-width: 360px; height: auto !important; margin: 0 auto;
    color: var(--mermer); font-size: clamp(9.5px, 3vw, 13.5px); line-height: 1.42;
    text-align: center; white-space: normal; overflow-wrap: anywhere;
  }
  .giris-btn {
    position: static;
    left: auto; top: auto;
    width: 100%; max-width: 360px; height: auto; min-height: 52px;
    padding: 11px 14px;        /* mobilde dar padding (masaüstü 14/34 taşırıyordu) */
    border-radius: 10px;
    border: 1.5px solid var(--altin);
    background: linear-gradient(180deg, #FBF6E9, #EADDBA);
    color: #3B2A1D;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    font-size: 0.9em;
    letter-spacing: 0.03em;    /* masaüstü 0.16em mobilde taşırıyordu */
    white-space: nowrap;
  }
  /* Kilitli buton: kilit ikonu yazıyı sıkıştırmasın, yazıya yer aç */
  .giris-btn.kilitli { padding-right: 30px; }
  .giris-btn.b1, .giris-btn.b2, .giris-btn.b3, .giris-btn.b4 { left: auto; top: auto; width: 100%; height: auto; min-height: 52px; }
  .giris-btn.b1 { padding: 8px 12px; gap: 1px; }
  .giris-btn .b1-ana { white-space: nowrap; }
  .giris-btn .b1-alt { font-size: 0.52em; white-space: normal; line-height: 1.2; letter-spacing: 0.02em; }
  .giris-btn.plaka-koyu { background: linear-gradient(180deg, #21314E, #101826); color: var(--altin-parlak); }
  .giris-btn:hover { transform: none; }

  /* Kilitli butonlar koyu zeminde kaybolmasın: net mat parşömen + kilit */
  .giris-btn.kilitli {
    opacity: 1;
    filter: none;
    background: linear-gradient(180deg, #cfc2a6, #bdad8c);
    color: #6b5a42;
    border-color: rgba(199, 144, 61, 0.7);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
  }
  .giris-btn.kilitli::after { right: 16px; opacity: 0.9; }

  /* — AKADEMİ — */
  .salon { padding: 14px 14px 26px; gap: 18px; }
  .salon-ok { display: none; }
  .akademi-amblem { padding: 7px 18px 9px; }
  .nis { height: min(44vh, 360px); }

  /* — EŞLEŞTİRME — */
  .eslestirme-govde { padding: 16px 14px 26px; gap: 18px; }
  .filozof-izgara { grid-template-columns: repeat(2, 1fr); gap: 20px 12px; }
  .hucre-foto { width: 78px; height: 78px; }
  .filozof-hucre { padding: 10px 8px 12px; }
  .calisan-foto { width: 46px; height: 46px; }
  .ipucu-bant { font-size: 12.5px; }

  /* — SONUÇ — */
  .sonuc-izgara { grid-template-columns: 1fr; padding: 22px 14px 40px; gap: 16px; }

  /* — MODAL: kimlik kartı dikey — */
  .f-kart {
    flex-direction: column;
    gap: 16px;
    padding: 24px 18px 22px;
    max-height: 88vh;
    overflow-y: auto;
    text-align: center;
  }
  .f-kart::before { display: none; }
  .fk-sol { flex: 0 0 auto; padding-right: 0; }
  .fk-foto { width: 124px; height: 124px; }
  .fk-sag { gap: 10px; justify-content: flex-start; }
  .fk-baslik { align-items: center; }
  .fk-maddeler { grid-template-columns: 1fr; text-align: left; gap: 0.3em 0; }
  .modal-kapat { top: 6px; right: 6px; }
  .fk-kose { width: 40px; height: 40px; }
  .modal-gezin { width: 38px; height: 38px; font-size: 16px; }
}

/* SPA kabı: kutusu yok sayılır, çocukları body'nin doğrudan çocuğu gibi
   davranır; böylece flex/grid düzenleri sarmalamadan etkilenmez. */
#sahne { display: contents; }

/* Akış kilidi: henüz açılmamış adımlar */
.kilitli {
  cursor: not-allowed;
  opacity: 0.4;
  filter: grayscale(0.5);
}
.kilitli:hover {
  transform: none !important;
  filter: grayscale(0.5) !important;
}
/* Giriş butonu (FİLOZOFLARI TANI): yazı soluk kalsın ama kilit ikonu TAM görünsün.
   Parent opacity ::after'a da çarptığı için, soluklaştırmayı opacity yerine renkle yap
   (mobildeki çözümün aynısı). Kurallar onaylanınca flowGate .kilitli'yi kaldırır → kilit kaybolur. */
.giris-btn.kilitli {
  opacity: 1;
  filter: none;
  color: rgba(74, 55, 34, 0.4);
}
.giris-btn.kilitli:hover { filter: none !important; }
.giris-btn.kilitli::after {
  content: '🔒';
  position: absolute;
  right: 7%;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.95em;
  filter: none;
  opacity: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

/* Kilit uyarı bildirimi */
.akademi-bildirim {
  position: fixed;
  left: 50%;
  bottom: 86px;
  transform: translateX(-50%) translateY(12px);
  background: rgba(16, 24, 38, 0.94);
  color: var(--altin-acik);
  border: 1px solid var(--altin);
  padding: 12px 22px;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  z-index: 1300;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.akademi-bildirim.gor {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Modal açıkken arka planda hizalanan filozof (akademi nişi / eşleştirme hücresi) */
.nis.arka-aktif,
.filozof-hucre.arka-aktif {
  outline: 2px solid var(--altin-parlak);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(199, 144, 61, 0.35), 0 0 22px rgba(240, 204, 138, 0.55);
  border-radius: 8px;
}

/* ── Müzik kontrolü: aç/kapa + ses seviyesi ──────────────── */
.muzik-kontrol {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 0;
}

.muzik-btn {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: var(--kahve);
  background: radial-gradient(circle at 30% 28%, var(--altin-parlak), var(--altin) 75%);
  border: 1.5px solid var(--kahve);
  box-shadow: 0 3px 10px rgba(59, 42, 29, 0.35), inset 0 0 0 2px rgba(255, 255, 255, 0.25);
  transition: transform 0.15s ease, filter 0.15s ease, opacity 0.2s ease;
}
.muzik-btn:hover { transform: scale(1.08); filter: brightness(1.06); }
.muzik-btn:active { transform: scale(0.96); }
.muzik-btn.kapali { filter: grayscale(0.5) brightness(0.92); opacity: 0.78; }

/* Ses çubuğu: normalde gizli, üstüne gelince/odakta açılır */
.muzik-ses {
  width: 0;
  opacity: 0;
  margin-right: 0;
  height: 5px;
  appearance: none;
  -webkit-appearance: none;
  background: linear-gradient(90deg, rgba(199, 144, 61, 0.20), var(--altin));
  border-radius: 4px;
  cursor: pointer;
  transition: width 0.22s ease, opacity 0.22s ease, margin-right 0.22s ease;
  vertical-align: middle;
}
.muzik-kontrol:hover .muzik-ses,
.muzik-kontrol:focus-within .muzik-ses {
  width: 92px;
  opacity: 1;
  margin-right: 10px;
}
.muzik-ses::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 28%, var(--altin-parlak), var(--altin) 80%);
  border: 1.5px solid var(--kahve);
  cursor: pointer;
}
.muzik-ses::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--altin);
  border: 1.5px solid var(--kahve);
  cursor: pointer;
}

/* ANA SAYFA: ses çubuğu DİKEY ve İNCE. Yatay ince slider'ı -90° DÖNDÜREREK dikey yapıyoruz
   (writing-mode kalın/şişik gösteriyordu) → ince iz + yuvarlak topuz korunur.
   Alttan SOLUK → yukarı ALTIN; YUKARI = yüksek ses. Kullanılmıyorken gizli, ikona gelince açılır. */
body.giris-yeni .muzik-ses {
  position: absolute;
  left: 50%;
  bottom: 92px;                 /* butonun üstünde */
  width: 90px;                  /* döndürünce dikey UZUNLUK */
  height: 5px;                  /* ince iz */
  transform: translateX(-50%) rotate(-90deg);
  transform-origin: center;
  opacity: 0;                   /* varsayılan: gizli */
  margin: 0;
  /* sol(=döndükten sonra ALT) soluk → sağ(=ÜST) altın */
  background: linear-gradient(90deg, rgba(199, 144, 61, 0.20), var(--altin));
  transition: opacity 0.22s ease;
}
body.giris-yeni .muzik-kontrol:hover .muzik-ses,
body.giris-yeni .muzik-kontrol:focus-within .muzik-ses { opacity: 1; }
/* Mobilde (dokunmatik, hover yok) görünür kalsın */
@media (hover: none), (max-width: 900px) {
  body.giris-yeni .muzik-ses { opacity: 1; }
}

@media (max-width: 900px) {
  .muzik-kontrol { right: 12px; bottom: 12px; }
  .muzik-btn { width: 42px; height: 42px; font-size: 18px; }
  /* Mobilde dokunma zor olduğu için ses çubuğu hep görünür */
  .muzik-ses { width: 80px; opacity: 1; margin-right: 8px; }
}

/* ============================================================
   "TELEFONU YAN ÇEVİR" — oyun yatay tasarlandı; telefonu portrede
   tutan kullanıcıya yan çevirmesini söyler. Yatayda otomatik kaybolur.
   ============================================================ */
.donme-uyari { display: none; }
@media (orientation: portrait) and (max-width: 640px) {
  .donme-uyari {
    display: block; position: fixed; inset: 0; z-index: 100000;
    text-align: center;
    background: radial-gradient(ellipse at center, #1b2740, #0b1018);
    color: var(--beyaz-sicak);
  }
  .donme-ic {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: min(86vw, 330px);
  }
  .donme-ikon {
    width: 50px; height: 86px; margin: 0 auto 26px;
    border: 3px solid var(--altin); border-radius: 11px;
    position: relative;
    animation: donFis 2.2s ease-in-out infinite;
  }
  .donme-ikon::before {
    content: ''; position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%);
    width: 16px; height: 3px; border-radius: 3px; background: var(--altin); opacity: 0.7;
  }
  .donme-uyari p {
    font-family: var(--font-baslik); font-size: clamp(16px, 5.4vw, 22px); letter-spacing: 0.3px;
    margin-bottom: 10px; color: var(--altin-parlak);
  }
  .donme-uyari p b { color: var(--beyaz-sicak); }
  .donme-uyari span {
    font-family: var(--font-ui); font-size: 13.5px; line-height: 1.5;
    color: rgba(233, 212, 184, 0.85);
  }
}
@keyframes donFis {
  0%, 35% { transform: rotate(0); }
  55%, 80% { transform: rotate(-90deg); }
  100% { transform: rotate(-90deg); }
}

/* Yatay telefon: 16:9 giriş sahnesi ekran YÜKSEKLİĞİNE sığsın → tüm plakalar görünür
   (yoksa 2:1 yatay ekranda alt plaka kırpılıyordu). */
@media (orientation: landscape) and (max-height: 560px) {
  .giris-yeni { align-items: center; }
  .giris-stage {
    height: 100vh;
    width: auto;
    max-width: 100vw;
    font-size: calc(100vh / 40);
  }
}

/* Yatay telefon (dar yükseklik): Akademi'de amblem "sancağı" + üst/alt bantlar
   dikey alanı doldurup kartlarla çakışıyordu. Amblemi ve boşlukları küçültüp
   salona yer açıyoruz; alt yazı gizlenir. Masaüstü/tablet etkilenmez. */
@media (orientation: landscape) and (max-height: 560px) {
  /* Üstteki adım sekmeleri (Tanı/Eşleştir/İçgörü) gizlenir → dikey alan açılır.
     Logo + müzik bantta kalır. */
  .adimlar { display: none; }
  /* Üst bant çok yüksekti (66px logo) → amblemi ortaya itip kartları kırpıyordu.
     Bandı ve logoyu küçült: kartlara dikey alan aç. */
  .ust-bant { padding: 3px 12px; }
  .marka-logo { width: 30px; height: 30px; }
  .marka { font-size: 14px; letter-spacing: 1px; gap: 6px; }
  .akademi-baslik { padding: 2px 20px 0; flex: 0 0 auto; }
  .akademi-amblem { padding: 2px 14px 3px; gap: 0; }
  .akademi-amblem .amblem-ikon { font-size: 14px; }
  .akademi-amblem h2 { font-size: 12px; letter-spacing: 2px; }
  .akademi-amblem .amblem-alt { display: none; }
  .salon-sarmal { flex: 1 1 auto; min-height: 0; }
  .salon { padding: 6px 50px 12px; }
  .nis { height: min(66vh, 205px); }   /* kartlar amblemin altına sığsın, çakışmasın */
  /* Alt bar kompakt + tek satır; "Eşleştirmeye Geç" butonu küçültülür */
  .akademi-alt { flex-direction: row; justify-content: center; gap: 12px; padding: 5px 14px 8px; flex: 0 0 auto; }
  .akademi-alt .btn { width: auto; max-width: none; padding: 7px 18px; font-size: 13px; min-height: 0; }
  .tanisma-durumu { font-size: 12px; }
  /* Mini harita: telefon yatayda küçük + sağ altta (beğenilen yer) */
  .fresk-mini { width: 90px; top: auto; bottom: 12px; right: 12px; }
  .fresk-mini-yazi { font-size: 8px; padding: 2px 3px; }
}

/* iPhone/iPad: Safari header+viewport kısıtı yüzünden "AKADEMİ / School of Athens"
   amblemi kartların üstünü kesiyordu → iOS'ta amblemi tamamen gizle (yer açılır). */
html.ios .akademi-baslik { display: none; }

/* iPhone: sabit (fixed) arka plan iOS Safari'de bozuk → İçgörü zemin resmi sığmıyor, altı boş
   kalıyordu. iOS'ta normal akışa (scroll) çevir → tam kaplar. (Android'de fixed sorunsuz.) */
/* iOS toolbar dinamiği: 100dvh yetmeyince altta beyaz boşluk kalıyordu.
   100lvh (en büyük viewport) ile zemin her durumda alta kadar kaplar. */
html.ios .sonuc-sayfa { background-attachment: scroll; min-height: 100lvh; }
/* Güvenlik ağı: olası boşluk beyaz değil, sonuç temasının koyusu görünsün */
html.ios:has(.sonuc-sayfa) { background: #0D1320; }
/* iOS: İçgörü'deki "X kişiyi Y düşünüre benzettin..." ipucu yazısı gizlensin */
html.ios .cark-ipucu { display: none; }

/* Mobil (dokunmatik): Filozofları Tanı kartlarının arkasındaki gölge/yansıma kaldırılsın. */
@media (hover: none) {
  .kart-gorsel { filter: none; }
  .nis::after { display: none; }
  /* Ses ikonu mobilde küçültülsün (Android + iOS) */
  /* Küçük buton: emoji iç halkaya sığsın, ortalı dursun (iOS) → emoji küçük + ince kenar, iç halka yok */
  .muzik-btn { width: 20px; height: 20px; font-size: 11px; line-height: 1; border-width: 1px; box-shadow: 0 2px 6px rgba(59, 42, 29, 0.3); }
  .muzik-bantta .muzik-btn { width: 20px; height: 20px; font-size: 11px; }
  /* Ses çubuğu mobilde VARSAYILAN GİZLİ; ikona dokununca .cubuk-acik ile açılır/kapanır */
  .muzik-ses { width: 0 !important; opacity: 0 !important; margin: 0 !important; pointer-events: none; }
  .muzik-kontrol.cubuk-acik .muzik-ses { width: 80px !important; opacity: 1 !important; margin-right: 10px !important; pointer-events: auto; }
  /* Ana sayfa (dikey/absolute çubuk): genişlik korunur, sadece opacity ile aç/kapat.
     bottom: ikon 15px'e küçüldüğü için çubuğu ikonun hemen üstüne çek (eskiden 92px=çok yukarıda). */
  body.giris-yeni .muzik-ses { width: 90px !important; bottom: 67px !important; opacity: 0 !important; pointer-events: none; }
  body.giris-yeni .muzik-kontrol.cubuk-acik .muzik-ses { opacity: 1 !important; pointer-events: auto; }
  /* Ana sayfa müzik kontrolü çok köşedeydi → biraz sola/yukarı (özellikle iOS) */
  body.giris-yeni .muzik-kontrol { right: 22px; bottom: 18px; }
}

/* Yatay taşmayı engelle: tek bir geniş öğe bile sayfayı genişletip
   ortalanmış/fixed öğeleri kaydırmasın (mobil kesilmelerin kök sebebi). */
html, body { overflow-x: clip; max-width: 100%; }