/*
 * KANKA BAR - renk ve tipografi
 * Kaynak: docs/art-direction.md bolum 3 ve 4.
 * Bu dosyada duzen YOK, sadece degiskenler ve temel tipografi.
 */

:root {
  /* --- palet (art-direction bolum 3) --- */
  --amber: #E8A33D;         /* ana isik: ampul, vurgu, aktif buton */
  --sise-yesili: #1E3A2F;   /* zemin: masa cuhasi, arka plan bloklari */
  --bordo: #8E2B2B;         /* TEHLIKE: sadece YALAN ve ceza aninda */
  --duman: #241F1C;         /* golge: dis cizgiler, derinlik */
  --krem: #E9DCC3;          /* kagit: kart yuzleri, metin */
  --neon: #D9527A;          /* tabela, kazanma efekti */

  --duman-koyu: #17130F;
  --sise-yesili-acik: #2A5142;
  --krem-solgun: rgba(233, 220, 195, 0.55);

  /*
   * Tipografi (bolum 4): kalin, sikisik, hafif egik display font.
   * Su an sistem yigini - Turkce karakter garantisi icin (c g i o s u).
   * Gercek font geldiginde: assets/fonts'a koy, asagidaki @font-face'i ac,
   * --font-baslik'i degistir. Baska hicbir yere dokunmaya gerek yok.
   */
  --font-baslik: 'Arial Narrow', 'Liberation Sans Narrow', 'Helvetica Neue',
                 system-ui, sans-serif;
  --font-arayuz: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  --olcek-rutbe: clamp(1.6rem, 7vw, 3rem);
  --olcek-baslik: clamp(1.2rem, 4.5vw, 2rem);
  --olcek-govde: clamp(0.85rem, 3.2vw, 1rem);
  --olcek-kucuk: clamp(0.7rem, 2.6vw, 0.85rem);

  --kose: 10px;
  --gecis: 180ms cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Bolum 9 sureleri - animasyon.css ve animasyon.js ayni degeri okur */
  --sure-kart-atma: 300ms;
  --sure-yalan: 500ms;
  --sure-kart-acilis: 600ms;
  --sure-kadeh: 2200ms;
  --sure-tepki: 400ms;
}

/*
@font-face {
  font-family: 'KankaBaslik';
  src: url('/assets/fonts/baslik.woff2') format('woff2');
  font-display: swap;
}
*/

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--duman-koyu);
  color: var(--krem);
  font-family: var(--font-arayuz);
  font-size: var(--olcek-govde);
  /* Mobilde cift dokunus zoom'u ve secim vurgusu oyunu bozuyor */
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

h1, h2, h3, .baslik-yazi {
  font-family: var(--font-baslik);
  font-weight: 800;
  font-style: italic;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0;
}

/* Tek sallanan ampul: isik ortada, kenarlar karanliga duser (bolum 6) */
.sahne-isigi {
  background:
    radial-gradient(120% 75% at 50% 0%, rgba(232, 163, 61, 0.18) 0%, transparent 62%),
    var(--duman-koyu);
}

.neon-tabela {
  color: var(--neon);
  text-shadow: 0 0 6px rgba(217, 82, 122, 0.75), 0 0 22px rgba(217, 82, 122, 0.35);
}

/* --- dugmeler --- */
.dugme {
  font-family: var(--font-baslik);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--olcek-govde);
  color: var(--duman);
  background: var(--amber);
  border: 2px solid var(--duman);
  border-radius: var(--kose);
  padding: 0.85rem 1.1rem;
  min-height: 48px;      /* dokunmatik hedef */
  cursor: pointer;
  transition: transform var(--gecis), opacity var(--gecis), background var(--gecis);
}

.dugme:active:not(:disabled) { transform: translateY(2px) scale(0.98); }

/*
 * Sirasi olmayan oyuncuda butonlar pasif ve soluk (bolum 8).
 *
 * opacity ile soldurmak YANLIS: altindaki masa deseni butonun icinden
 * gorunuyor ve buton "masanin icine gommus" gibi kayboluyordu.
 * Bunun yerine DOLU ama sonuk bir zemin - sekli net, ama tiklanamaz
 * oldugu bir bakista belli.
 */
.dugme:disabled {
  opacity: 1;
  cursor: default;
  color: rgba(233, 220, 195, 0.42);
  background: rgba(23, 19, 15, 0.72);
  border-color: rgba(233, 220, 195, 0.22);
  box-shadow: none;
  filter: none;
  text-shadow: none;
}

.dugme-ikincil {
  background: transparent;
  color: var(--krem);
  border-color: var(--krem-solgun);
}

/*
 * "YALAN!" bordo ve buyuk - basmak cesaret istemeli (bolum 8).
 * Bordo ekranda baska hicbir yerde yok ki belirdiginde etki etsin.
 */
.dugme-yalan {
  background: var(--bordo);
  color: var(--krem);
  border-color: var(--duman);
  font-size: calc(var(--olcek-govde) * 1.25);
  padding: 1rem 1.4rem;
  box-shadow: 0 0 0 0 rgba(142, 43, 43, 0.6);
}

.dugme-yalan:not(:disabled) { animation: yalan-nabiz 2.2s ease-in-out infinite; }

/* Aktif olduklarinda arka plandan kesin ayrilsinlar */
.dugme:not(:disabled) {
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.55);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.15);
}
.dugme-yalan:not(:disabled) { text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); }

input[type="text"] {
  font-family: var(--font-arayuz);
  font-size: var(--olcek-govde);
  color: var(--krem);
  background: rgba(0, 0, 0, 0.35);
  border: 2px solid var(--krem-solgun);
  border-radius: var(--kose);
  padding: 0.8rem;
  min-height: 48px;
  width: 100%;
}

input[type="text"]:focus {
  outline: none;
  border-color: var(--amber);
}

.hata-metni {
  color: var(--bordo);
  background: rgba(142, 43, 43, 0.12);
  border-left: 3px solid var(--bordo);
  padding: 0.6rem 0.8rem;
  border-radius: 4px;
  min-height: 1px;
}

.hata-metni:empty { display: none; }