/*
 * KANKA BAR - tanitim ve karakter secimi ekranlari
 *
 * Masa ekraninin (duzen.css) disinda kalan iki ekran: oyuna girmeden once
 * gorulen tanitim sayfasi ve karakteri sectigin ekran.
 *
 * Palet tema.css'ten gelir. Buradaki degiskenler yalnizca bu iki ekrana ait
 * ara tonlar - ahsap ve panel dolgulari.
 */

:root {
  --ahsap: #3a2417;
  --altin-parlak: #f2c464;
  --altin-sonuk: #8a6a33;
  --kenar: #4a2f18;
  --pano-a: rgba(34, 20, 12, 0.94);
  --pano-b: rgba(22, 12, 7, 0.96);
}

/* ============ ORTAM KATMANLARI ============ */
/*
 * Sahne, duman ve toz yalnizca giris akisinda gorunur. Masada oyunun
 * kendi arka plani var; ustune bir kat daha binmesi hem gereksiz hem agir.
 */
.sahne, .duman, .toz { display: none; }
body.giris-modunda .sahne,
body.giris-modunda .duman,
body.giris-modunda .toz { display: block; }

.sahne {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center 30%;
}
/* Vinyet: kenarlar karanliga duser, orta acik kalir (art-direction 6) */
.sahne::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 45% at 50% 18%, rgba(255, 170, 60, 0.16), transparent 62%),
    radial-gradient(ellipse 120% 90% at 50% 50%, transparent 38%, rgba(10, 5, 2, 0.86) 100%),
    linear-gradient(rgba(15, 8, 4, 0.4), rgba(15, 8, 4, 0.6));
}

.duman { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.duman i {
  position: absolute;
  width: 360px; height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(205, 195, 175, 0.055) 0%, transparent 65%);
  animation: suzul 28s linear infinite;
}
.duman i:nth-child(1) { left: 6%;  bottom: -25%; animation-duration: 32s; }
.duman i:nth-child(2) { left: 52%; bottom: -32%; animation-duration: 25s; animation-delay: -9s;
                        width: 480px; height: 480px; }
.duman i:nth-child(3) { left: 80%; bottom: -28%; animation-duration: 36s; animation-delay: -17s; }
@keyframes suzul {
  0%   { transform: translate(0, 0) scale(1); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translate(60px, -125vh) scale(1.6); opacity: 0; }
}

.toz { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.zerre {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: rgba(255, 205, 130, 0.55);
  box-shadow: 0 0 6px rgba(255, 190, 100, 0.7);
  animation: yuksel 14s linear infinite;
}
@keyframes yuksel {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: 0.9; }
  90%  { opacity: 0.5; }
  100% { transform: translateY(-90vh) translateX(40px); opacity: 0; }
}

/* ============ ORTAK PARCALAR ============ */
.pano {
  background: linear-gradient(180deg, var(--pano-a), var(--pano-b));
  border: 2px solid var(--kenar);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7),
              inset 0 0 0 1px rgba(232, 163, 61, 0.14),
              inset 0 0 40px rgba(0, 0, 0, 0.55);
}

/* Altin buton: uzerinden bir isik gecer (hover) */
.abtn {
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 14px 24px;
  font-family: var(--font-baslik);
  font-weight: 900;
  letter-spacing: 0.06em;
  font-size: var(--olcek-baslik);
  color: var(--krem);
  border-radius: 12px;
  border: 3px solid var(--altin-sonuk);
  cursor: pointer;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.85);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.7),
              inset 0 0 0 1px rgba(255, 220, 150, 0.2),
              inset 0 -12px 22px rgba(0, 0, 0, 0.4);
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.abtn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.18) 50%, transparent 65%);
  transform: translateX(-130%);
  transition: transform 0.55s;
}
.abtn:hover:not(:disabled) { transform: translateY(-3px); border-color: var(--altin-parlak); }
.abtn:hover:not(:disabled)::after { transform: translateX(130%); }
.abtn:active { transform: translateY(0); }
.abtn:disabled { opacity: 0.5; cursor: not-allowed; }
.abtn.katil { background: linear-gradient(180deg, #2f7a43, #173a21 78%); }
.abtn.katil:hover:not(:disabled) { box-shadow: 0 12px 30px rgba(0,0,0,.75), 0 0 26px rgba(60,180,100,.42); }
.abtn.kur { background: linear-gradient(180deg, var(--bordo), #521317 78%); }
.abtn.kur:hover:not(:disabled) { box-shadow: 0 12px 30px rgba(0,0,0,.75), 0 0 26px rgba(220,70,80,.45); }
.abtn.sade { background: linear-gradient(180deg, #33200f, #1d1108 78%); }

.simge-dugme {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px solid var(--altin-sonuk);
  background: radial-gradient(circle at 32% 28%, #4a3018, #241408 70%);
  color: var(--altin-parlak);
  font-size: 18px;
  display: grid; place-items: center;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,215,130,.25);
  transition: 0.2s;
}
.simge-dugme:hover { border-color: var(--altin-parlak); transform: translateY(-2px); }

/* Iki yani cizgili baslik */
.cizgi {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  font-family: var(--font-baslik);
  font-weight: 700; letter-spacing: 0.22em;
  color: var(--krem-solgun);
}
.cizgi::before, .cizgi::after {
  content: ''; height: 1px; width: min(80px, 12vw);
  background: linear-gradient(90deg, transparent, var(--altin-sonuk));
}
.cizgi::after { background: linear-gradient(90deg, var(--altin-sonuk), transparent); }

/* ============ TANITIM ============ */
#ekran-tanitim { position: relative; z-index: 3; overflow-y: auto; }
#ekran-tanitim.acik { display: flex; flex-direction: column; }

.ust-serit { display: flex; align-items: center; gap: 14px; padding: 16px clamp(16px, 4vw, 40px); }
.marka {
  font-family: var(--font-baslik);
  font-weight: 900; letter-spacing: 0.18em; font-size: 15px;
  color: var(--altin-parlak);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}
.ust-serit .bosluk { flex: 1; }
.serit-baglantilar { display: flex; gap: 22px; font-family: var(--font-baslik);
  font-size: 12.5px; letter-spacing: 0.14em; }
.serit-baglantilar a {
  color: var(--krem-solgun); text-decoration: none;
  padding-bottom: 3px; border-bottom: 1px solid transparent; transition: 0.2s;
}
.serit-baglantilar a:hover { color: var(--altin-parlak); border-color: var(--altin-sonuk); }

.kahraman {
  flex: 1;
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(20px, 4vw, 60px); align-items: center;
  padding: clamp(10px, 2vh, 30px) clamp(16px, 4vw, 56px) 0;
}
.kahraman-yazi { max-width: 620px; }

.rozet {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-baslik); font-weight: 700;
  font-size: 11.5px; letter-spacing: 0.28em;
  color: var(--amber);
  padding: 7px 14px; border-radius: 99px;
  border: 1px solid rgba(232, 163, 61, 0.4);
  background: rgba(30, 18, 10, 0.6);
  margin-bottom: 18px;
  animation: yukari 0.7s 0.05s ease both;
}
.rozet .nokta {
  width: 7px; height: 7px; border-radius: 50%;
  background: #4ade80; box-shadow: 0 0 8px #4ade80;
  animation: yanip-sonme 2s ease-in-out infinite;
}
@keyframes yanip-sonme { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.dev-baslik {
  font-family: var(--font-baslik);
  font-weight: 900; line-height: 0.95;
  font-size: clamp(44px, 7.2vw, 104px); letter-spacing: 0.01em;
  background: linear-gradient(180deg, #ffe7a8 0%, var(--altin-parlak) 42%, #b4832c 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 3px 0 #4a2f0d) drop-shadow(0 10px 26px rgba(0, 0, 0, 0.75));
  animation: yukari 0.8s 0.12s ease both;
}
@keyframes yukari { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

.lede {
  margin-top: 18px;
  font-size: clamp(16px, 1.5vw, 20px); line-height: 1.55;
  color: #e6d3a8; max-width: 52ch;
  animation: yukari 0.8s 0.2s ease both;
}
.lede b { color: var(--altin-parlak); font-weight: 600; }

.cta-satiri { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap;
  animation: yukari 0.8s 0.3s ease both; }
.cta-satiri .abtn { width: auto; min-width: 230px; }

.olcu-satiri { display: flex; gap: 26px; margin-top: 24px; flex-wrap: wrap;
  animation: yukari 0.8s 0.38s ease both; }
.olcu { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--krem-solgun); }
.olcu i { font-style: normal; font-size: 17px; }

/* Amblem + kart yelpazesi */
.kahraman-sahne {
  position: relative; display: grid; place-items: center;
  min-height: min(52vh, 440px);
  animation: yukari 0.9s 0.25s ease both;
}
.hale {
  position: absolute; width: min(60vw, 520px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 180, 70, 0.16), transparent 62%);
  animation: nabiz 5s ease-in-out infinite;
}
@keyframes nabiz { 0%, 100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.08); opacity: 1; } }

/* Amblem gorseli varsa gorunur; yoksa hic yer kaplamaz */
.amblem {
  width: min(34vw, 300px); aspect-ratio: 1;
  background-size: contain; background-position: center; background-repeat: no-repeat;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,.8)) drop-shadow(0 0 34px rgba(232,163,61,.28));
  animation: suzulme 6s ease-in-out infinite;
  position: relative; z-index: 3;
  display: none;
}
.amblem.var { display: block; }
@keyframes suzulme {
  0%, 100% { transform: translateY(0) rotate(-0.6deg); }
  50%      { transform: translateY(-12px) rotate(0.6deg); }
}

/* Gercek kart gorselleriyle yelpaze */
.yelpaze-kart {
  position: absolute; width: 78px; height: 110px; border-radius: 8px;
  border: 2px solid #b99a5f; background-size: cover; background-position: center;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.6);
  transform-origin: 50% 130%;
  opacity: 0;
  animation: dagit 0.7s cubic-bezier(.2,.9,.25,1.15) forwards;
}
@keyframes dagit {
  from { opacity: 0; transform: translateY(70px) rotate(0) scale(0.8); }
  to   { opacity: 1; transform: rotate(var(--donme)); }
}

/* Kadro seridi */
.kadro { position: relative; margin-top: clamp(10px, 3vh, 34px); padding: 0 clamp(12px, 3vw, 40px); }
.kadro-ic {
  position: relative; display: flex; align-items: flex-end; justify-content: center;
  gap: clamp(4px, 1.4vw, 26px); max-width: 1240px; margin: 0 auto;
}
.kadro-kisi {
  position: relative; flex: 1 1 0; max-width: 200px; text-align: center;
  cursor: pointer; border: none; background: none; padding: 0;
  transition: transform 0.3s ease;
  animation: kalk 0.8s ease both;
}
.kadro-kisi:nth-child(1) { animation-delay: .5s; }
.kadro-kisi:nth-child(2) { animation-delay: .6s; }
.kadro-kisi:nth-child(3) { animation-delay: .7s; }
.kadro-kisi:nth-child(4) { animation-delay: .8s; }
.kadro-kisi:nth-child(5) { animation-delay: .9s; }
@keyframes kalk { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: none; } }
.kadro-kisi img {
  width: 100%; height: auto; display: block;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.75)) saturate(.85) brightness(.78);
  transition: 0.3s;
}
.kadro-kisi:hover { transform: translateY(-14px); }
.kadro-kisi:hover img {
  filter: drop-shadow(0 14px 28px rgba(0,0,0,.8)) drop-shadow(0 0 22px rgba(255,190,90,.4))
          saturate(1) brightness(1);
}
.kadro-etiket {
  position: absolute; left: 50%; bottom: 6px;
  transform: translate(-50%, 10px); opacity: 0; transition: 0.3s;
  font-family: var(--font-baslik); font-size: 12px; letter-spacing: 0.14em;
  color: var(--krem); background: rgba(20, 12, 6, 0.9);
  border: 1px solid var(--altin-sonuk); border-radius: 99px;
  padding: 5px 13px; white-space: nowrap;
}
.kadro-kisi:hover .kadro-etiket { opacity: 1; transform: translate(-50%, 0); }
.bar-kenar {
  height: clamp(26px, 4vh, 44px); border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, #7a4f24 0%, #543316 45%, #33200d 100%);
  border-top: 3px solid #9a6830;
  box-shadow: 0 -8px 26px rgba(0,0,0,.6), inset 0 6px 12px rgba(255,200,120,.12);
  max-width: 1240px; margin: -8px auto 0; position: relative; z-index: 5;
}

/* Nasil oynanir */
.ozellikler { max-width: 1240px; margin: 0 auto; padding: clamp(26px,5vh,60px) clamp(16px,4vw,40px) 60px; }
.bolum-baslik {
  font-family: var(--font-baslik); font-weight: 900;
  font-size: clamp(22px, 2.4vw, 32px); text-align: center;
  color: var(--altin-parlak); margin-bottom: 8px;
}
.bolum-alt { font-size: 13px; margin-bottom: 30px; }
.uclu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ozellik { padding: 22px 20px; border-radius: 12px; transition: 0.25s; }
.ozellik:hover { transform: translateY(-4px); border-color: var(--altin-sonuk); }
.oz-ikon {
  width: 46px; height: 46px; border-radius: 10px;
  display: grid; place-items: center; font-size: 22px; margin-bottom: 14px;
  background: radial-gradient(circle at 35% 30%, #4a3018, #1c1108);
  border: 1px solid var(--altin-sonuk);
}
.ozellik h3 { font-family: var(--font-baslik); font-size: 17px; color: var(--krem); margin-bottom: 7px; }
.ozellik p { font-size: 14.5px; line-height: 1.5; color: var(--krem-solgun); }
.alt-yazi {
  text-align: center; padding: 20px; font-size: 12.5px;
  color: #8a7550; letter-spacing: 0.1em;
  border-top: 1px solid rgba(232, 163, 61, 0.15);
}

/* ============ KARAKTER SECIMI ============ */
/*
 * Karakter secimi EKRANA SIGAR - sayfa asagi yukari kaymaz.
 * Tasan uzun listeler kendi paneli icinde kayar (kadro buyudukce sayfanin
 * tamami kaymasin diye). Dar ekranda bu kural birakilir: orada tek sutuna
 * dusuyor ve sigdirmaya calismak her seyi ezerdi.
 */
#ekran-giris { position: relative; z-index: 3; overflow: hidden; }
#ekran-giris.acik { display: block; }

.secim-duzeni {
  display: grid; gap: 10px 18px;
  grid-template-columns: minmax(240px, 300px) 1fr minmax(280px, 360px);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "marka  baslik  ustcubuk"
    "liste  sahne   bilgi"
    "form   form    form";
  padding: 14px clamp(12px, 3vw, 24px) 18px;
  max-width: 1400px; margin: 0 auto;
  height: 100%;
}
.secim-marka { grid-area: marka; display: flex; align-items: flex-start; }
.secim-ustcubuk { grid-area: ustcubuk; display: flex; justify-content: flex-end; gap: 10px; }
.secim-baslik { grid-area: baslik; text-align: center; }
.baslik-cerceve {
  display: inline-block; padding: 10px 34px 12px; position: relative;
  background: linear-gradient(180deg, rgba(28,16,9,.92), rgba(20,11,6,.92));
  border: 2px solid var(--altin-sonuk); border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,.65), inset 0 0 30px rgba(0,0,0,.6);
}
.baslik-cerceve::before, .baslik-cerceve::after {
  content: ''; position: absolute; left: 14px; right: 14px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--amber), transparent);
}
.baslik-cerceve::before { top: 5px; }
.baslik-cerceve::after { bottom: 5px; }
.baslik-cerceve h1 {
  font-family: var(--font-baslik); font-weight: 900;
  font-size: clamp(18px, 2.4vw, 32px); letter-spacing: 0.04em;
  color: var(--altin-parlak); text-shadow: 0 2px 0 #5a3a10, 0 4px 14px rgba(0,0,0,.8);
}
.secim-alt { margin-top: 8px; font-size: clamp(10px, 1vw, 12.5px); }

.secim-liste { grid-area: liste; min-height: 0; }
.secim-liste .pano {
  padding: 12px; height: 100%;
  display: flex; flex-direction: column; min-height: 0;
}
.pano-baslik {
  font-family: var(--font-baslik); font-weight: 800;
  font-size: 14px; letter-spacing: 0.24em; color: var(--krem);
  text-align: center; padding: 6px 0 10px;
}

.secim-sahne {
  grid-area: sahne; position: relative;
  display: flex; align-items: flex-end; justify-content: center;
  min-height: 0;
}
.sahne-hale {
  position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%);
  width: 120%; height: 70%; z-index: 1; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 80%, rgba(255,180,70,.2), transparent 65%);
  animation: nabiz 4.5s ease-in-out infinite;
}
/*
 * Karakter sahnenin icine SIGAR, tasmaz. Sarmalayici gorseli kucaklar ve
 * dibe oturur; gorsel de kutunun yuksekligini asamaz. Onceden sabit yukseklik
 * verilince kisa ekranlarda asagi tasip formun ustune biniyordu.
 */
.sahne-karakter {
  position: relative; z-index: 2;
  height: 100%; min-height: 0;
  display: flex; align-items: flex-end; justify-content: center;
  transform-origin: bottom center;
  filter: drop-shadow(0 0 26px rgba(255,190,90,.32)) drop-shadow(0 14px 30px rgba(0,0,0,.8));
  animation: karakter-gir 0.55s cubic-bezier(.2,.9,.3,1.2) both;
}
@keyframes karakter-gir { from { opacity: 0; transform: translateY(26px) scale(.94); } to { opacity: 1; transform: none; } }
.sahne-karakter.cikiyor { animation: karakter-cik 0.26s ease both; }
@keyframes karakter-cik { to { opacity: 0; transform: translateY(18px) scale(.96); } }
.sahne-karakter img {
  max-height: 100%; height: auto; width: auto; max-width: 100%; display: block;
  animation: nefes 4.5s ease-in-out infinite; transform-origin: bottom center;
}
@keyframes nefes { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.012) translateY(-3px); } }
.masa-kenari {
  position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
  width: 130%; max-width: 760px; height: 60px; z-index: 3;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: linear-gradient(180deg, #6d451f 0%, #4c2e13 34%, #33200d 100%);
  border-top: 3px solid #8a5c2a;
  box-shadow: 0 -8px 26px rgba(0,0,0,.55), inset 0 6px 12px rgba(255,200,120,.12);
}

.secim-bilgi { grid-area: bilgi; min-height: 0; }
.secim-bilgi .pano { padding: 14px 16px; height: 100%; overflow-y: auto; }
.bilgi-bas {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 10px; border-bottom: 1px solid rgba(232,163,61,.25);
}
.bilgi-portre {
  width: 48px; height: 48px; border-radius: 50%; overflow: hidden; flex: none;
  border: 2px solid var(--altin-sonuk);
  background: radial-gradient(circle at 50% 30%, #4a3018, #170d06);
}
.bilgi-portre img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transform: scale(1.3); transform-origin: top center; }
.bilgi-ad { font-family: var(--font-baslik); font-weight: 800; font-size: 22px; color: var(--krem); }
.bilgi-tanim { padding: 12px 2px; font-style: italic; color: #e8d3a8; line-height: 1.45; font-size: 15px; }
.bilgi-tavir {
  border: 1px solid rgba(232,163,61,.3); border-radius: 8px;
  padding: 10px 12px; background: rgba(0,0,0,.22);
}
.tavir-etiket {
  display: block; font-family: var(--font-baslik); font-size: 11.5px;
  letter-spacing: 0.16em; color: var(--krem-solgun); margin-bottom: 4px;
}
#bilgi-tavir { color: var(--altin-parlak); font-size: 15px; }

/*
 * Form: takma ad, ALTINDA oda kodu, en altta iki dugme.
 * Kod alani onceden KATIL'in yanindaki kucuk kutuydu - ne ise yaradigi
 * belli olmuyordu. Simdi kendi etiketi ve ipucu var, sira da okunuyor:
 * once kim oldugun, sonra hangi masa, sonra eylem.
 */
.secim-form {
  grid-area: form;
  display: grid; gap: 8px;
  max-width: 520px; width: 100%; margin: 4px auto 0;
}
.secim-form .hata-metni { min-height: 0; margin: 0; }
.secim-form .alan { gap: 0.25rem; }
.alan-ipucu { font-size: 0.72rem; color: var(--krem-solgun); opacity: 0.75; line-height: 1.3; }
.form-dugmeler { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 2px; }
.secim-form .abtn { min-height: 46px; padding: 10px 20px; }

/*
 * Karakter listesi: yatay kartlardan dikey satirlara.
 *
 * Satirlar kadro buyudukce sigsin diye SIKI: alti karakter 768px yukseklikte
 * kaydirma cubugu olmadan oturuyor. Kadro daha da buyurse panel kendi icinde
 * kayar - sayfa yine kaymaz.
 *
 * overflow-x gizli: hover'da satir yana kayiyor ve bu YATAY cubuk cikariyordu.
 */
#ekran-giris .karakter-listesi {
  display: flex; flex-direction: column; gap: 6px;
  overflow-y: auto; overflow-x: hidden;
  flex: 1; min-height: 0; padding: 2px;
  scrollbar-width: thin;
}
/*
 * Satirlar ESNEK: yer varsa yayilir, dar ekranda min-height'a kadar buzulur.
 * Boylece kadro buyudukce cubuk cikmaz - ancak asgari dokunma hedefi (44px)
 * bile sigmiyorsa panel kendi icinde kayar.
 */
#ekran-giris .karakter-secim {
  flex: 1 1 0;
  flex-direction: row; align-items: center; gap: 10px;
  padding: 4px 10px; min-height: 44px; max-height: 68px; text-align: start;
  border: 2px solid var(--kenar);
  background: linear-gradient(180deg, #2b1a10, #1d1008);
}
/* Yana kaydirmak yerine parlat: yatay tasma yaratmaz */
#ekran-giris .karakter-secim:hover:not(.dolu) {
  border-color: var(--altin-sonuk);
  background: linear-gradient(180deg, #35200f, #24140a);
}
#ekran-giris .karakter-secim.secili { border-color: var(--altin-parlak); animation: secim-nabzi 2.4s ease-in-out infinite; }
@keyframes secim-nabzi {
  0%, 100% { box-shadow: 0 0 14px rgba(242,196,100,.35), inset 0 0 18px rgba(242,196,100,.08); }
  50%      { box-shadow: 0 0 24px rgba(242,196,100,.55), inset 0 0 24px rgba(242,196,100,.14); }
}
#ekran-giris .karakter-secim .yuz {
  width: 36px; height: 36px; flex: none; border-radius: 6px; overflow: hidden;
  max-height: none;
}
#ekran-giris .karakter-secim .yuz img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  transform: scale(1.25); transform-origin: top center;
}
#ekran-giris .karakter-ad { flex: 1; font-size: 15px; text-align: start; }

/*
 * Kesim gorselleri arka plansiz: cerceve ve dolgu olmadan, isikta duruyor
 * gibi gorunsunler. Sahnede ve kadro seridinde boyle kullaniliyor.
 */
.sahne-karakter img, .kadro-kisi img { background: none; }

/*
 * ALCAK ekranlarda (dizustu 720p gibi) liste iki sutuna gecer. Tek sutunda
 * alti karakter 44px'lik dokunma hedefiyle sigmiyor ve kaydirma cubugu
 * cikiyordu; iki sutunda uc satir eder, rahat oturur.
 */
@media (min-width: 1081px) and (max-height: 780px) {
  #ekran-giris .karakter-listesi { flex-flow: row wrap; align-content: flex-start; }
  #ekran-giris .karakter-secim {
    flex: 0 0 calc(50% - 3px);
    max-height: none; gap: 8px; padding: 4px 8px;
  }
  #ekran-giris .karakter-ad { font-size: 13.5px; }
}

/* ============ DAR EKRAN ============ */
@media (max-width: 1080px) {
  .kahraman { grid-template-columns: 1fr; text-align: center; }
  .kahraman-yazi { margin: 0 auto; }
  .rozet, .cta-satiri, .olcu-satiri { justify-content: center; }
  .kahraman-sahne { min-height: 260px; order: -1; }
  .amblem { width: min(52vw, 220px); }
  .yelpaze-kart { display: none; }

  /*
   * Dar ekranda sigdirma birakilir: tek/cift sutuna dusuyor ve her seyi
   * ekrana sokmaya calismak karakteri de paneli de eziyordu. Burada
   * sayfanin kendisi kayar.
   */
  #ekran-giris { overflow-y: auto; }
  .secim-duzeni {
    height: auto;
    grid-template-rows: none;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "marka  ustcubuk"
      "baslik baslik"
      "sahne  sahne"
      "liste  bilgi"
      "form   form";
  }
  .secim-sahne { min-height: 340px; }
  .sahne-karakter { height: 340px; }
  #ekran-giris .karakter-listesi { overflow-y: visible; max-height: none; }
}
@media (max-width: 760px) {
  .serit-baglantilar { display: none; }
  .cta-satiri .abtn { min-width: 0; width: 100%; }
  .uclu { grid-template-columns: 1fr; }
  .kadro-ic { gap: 2px; }
  .kadro-kisi { max-width: none; }
  .kadro-etiket { display: none; }
  .secim-duzeni {
    grid-template-columns: 1fr;
    grid-template-areas: "marka" "ustcubuk" "baslik" "sahne" "liste" "bilgi" "form";
  }
  .secim-ustcubuk { justify-content: flex-start; }
  .secim-sahne { min-height: 300px; }
  .sahne-karakter { height: 300px; }
  .secim-form { grid-template-columns: 1fr; }
  .form-dugmeler { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .duman, .toz { display: none !important; }
  .yelpaze-kart { opacity: 1; }
}