/* =========================================================
   masalgibi.com.tr — "Yakında" tasarım sistemi
   Referans: nithinmwarrier.com — krem/mürekkep zemin, sarı-mavi
   vurgu, nokta ızgara doku, tam yuvarlak hap düğmeler, cümle
   düzeninde ve kalınlık kontrastlı başlıklar.
   Renkler telif konusu değil; ölçülüp doğrudan alındı. Referansın
   yazı tipi (Aeonik) ticari lisanslı olduğundan en yakın ücretsiz
   karşılığı Plus Jakarta Sans kullanıldı.
   ========================================================= */

:root {
  /* Renk */
  --c-krem:        #f7f1ed;
  --c-krem-koyu:   #efe7e1;
  --c-kagit:       #ffffff;
  --c-murekkep:    #242424;
  --c-murekkep-2:  #2e2e2e;
  --c-soluk:       #636363;   /* krem üzerinde 5.3:1 */
  --c-silik:       #acacac;   /* yalnızca dekoratif — metin için değil */
  --c-sari:        #ffe862;
  --c-sari-koyu:   #ffd640;
  --c-mavi:        #37ace8;
  --c-cizgi:       #e0d7d0;
  --c-cizgi-koyu:  #c4bbb4;
  --c-hata:        #c2410c;

  /* Tipografi */
  --f: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --t-dev:   clamp(2.6rem, 7.2vw, 5.75rem);
  --t-buyuk: clamp(1.75rem, 3.6vw, 2.75rem);
  --t-orta:  clamp(1.15rem, 2.1vw, 1.5rem);
  --t-govde: 1rem;
  --t-kucuk: 0.875rem;
  --t-mini:  0.75rem;

  /* Boşluk */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 48px; --s6: 64px; --s7: 96px;

  /* Şekil & hareket */
  --r-kart: 20px;
  --r-alan: 12px;
  --r-hap:  999px;
  --gecis:  200ms cubic-bezier(0.19, 1, 0.22, 1);

  /* Nokta ızgara dokusu */
  --nokta-acik: radial-gradient(circle, rgba(36,36,36,0.10) 1px, transparent 1px);
  --nokta-koyu: radial-gradient(circle, rgba(247,241,237,0.13) 1px, transparent 1px);
  --nokta-adim: 22px 22px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--c-krem);
  color: var(--c-murekkep);
  font-family: var(--f);
  font-size: var(--t-govde);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

::selection { background: var(--c-murekkep); color: var(--c-krem); }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
p, h1, h2, h3, h4 { margin: 0; }
h1, h2, h3, h4 { font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--c-mavi);
  outline-offset: 2px;
  border-radius: 4px;
}

.gorunmez {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Yerleşim ---------- */

.kapsam {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--s3);
}
@media (min-width: 768px) { .kapsam { padding-inline: var(--s5); } }

/* Referanstaki ince dikey cetveller */
@media (min-width: 1100px) {
  body::before, body::after {
    content: "";
    position: fixed;
    top: 0; bottom: 0;
    width: 1px;
    background: var(--c-cizgi);
    z-index: 0;
    pointer-events: none;
  }
  body::before { left: max(24px, calc(50% - 620px + 24px)); }
  body::after  { right: max(24px, calc(50% - 620px + 24px)); }
}
main, .mast, .dip { position: relative; z-index: 1; }

/* ---------- Üst bar ---------- */

.mast { border-bottom: 1px solid var(--c-cizgi); }
.mast__ic {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  min-height: 68px;
}
.mast__marka {
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  transition: opacity var(--gecis);
}
.mast__marka:hover { opacity: 0.6; }

.etiket {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px 7px 12px;
  border-radius: var(--r-hap);
  background: var(--c-sari);
  color: var(--c-murekkep);
  font-size: var(--t-mini);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.etiket::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: var(--r-hap);
  background: var(--c-murekkep);
  animation: nabiz 2.2s ease-in-out infinite;
}
@keyframes nabiz {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.3; transform: scale(0.6); }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  padding-block: var(--s6) var(--s5);
  border-bottom: 1px solid var(--c-cizgi);
  background-image: var(--nokta-acik);
  background-size: var(--nokta-adim);
}
@media (min-width: 768px) { .hero { padding-block: var(--s7) var(--s6); } }

.hero__sira {
  display: inline-block;
  font-size: var(--t-mini);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-soluk);
}

.hero__baslik {
  margin-top: var(--s3);
  font-size: var(--t-dev);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 0.98;
  max-width: 15ch;
}
.hero__baslik b { font-weight: 800; }
/* Referans soluk metni için #acacac kullanıyor; anlam taşıyan başlık
   parçasında 2:1'de kalıyor — okunur tona (5.3:1) çekildi. */
.hero__baslik .soluk { color: var(--c-soluk); font-weight: 400; }

.hero__alt {
  margin-top: var(--s4);
  max-width: 48ch;
  font-size: var(--t-orta);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--c-soluk);
}
.hero__alt b { color: var(--c-murekkep); font-weight: 700; }

/* ---------- Oyun bölümü ---------- */

.oyun-bolum { padding-block: var(--s5) var(--s6); }

.bolum-basi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  margin-bottom: var(--s4);
}
.bolum-basi h2 { font-size: var(--t-buyuk); }

.oyuncu-rozeti {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 16px;
  border: 1px solid var(--c-cizgi-koyu);
  border-radius: var(--r-hap);
  font-size: var(--t-kucuk);
  color: var(--c-soluk);
  background: var(--c-kagit);
}
.oyuncu-rozeti b { color: var(--c-murekkep); font-weight: 700; }
.oyuncu-rozeti button {
  border: 0;
  padding: 5px 12px;
  border-radius: var(--r-hap);
  background: var(--c-krem-koyu);
  color: var(--c-murekkep);
  font-size: var(--t-mini);
  font-weight: 600;
  transition: background var(--gecis);
}
.oyuncu-rozeti button:hover { background: var(--c-sari); }

.ikili { display: grid; gap: var(--s3); align-items: start; }
@media (min-width: 940px) {
  .ikili { grid-template-columns: minmax(0, 1.1fr) minmax(310px, 0.9fr); gap: var(--s4); }
}

/* ---------- Kartlar ---------- */

.kart {
  position: relative;
  border-radius: var(--r-kart);
  background: var(--c-kagit);
  border: 1px solid var(--c-cizgi);
  overflow: hidden;
}
.kart__basi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding: 16px var(--s3);
  border-bottom: 1px solid var(--c-cizgi);
}
.kart__basi h3 {
  font-size: var(--t-mini);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-soluk);
}

.sayac { display: flex; gap: var(--s2); }
.sayac div {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--r-hap);
  background: var(--c-krem);
  font-size: var(--t-mini);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-soluk);
}
.sayac b {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--c-murekkep);
  font-variant-numeric: tabular-nums;
}

/* ---------- Oyun sahnesi (koyu bölüm) ---------- */

.sahne {
  position: relative;
  display: flex;
  justify-content: center;
  background-color: var(--c-murekkep);
  background-image: var(--nokta-koyu);
  background-size: var(--nokta-adim);
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
#kule {
  width: 100%;
  max-width: 480px;
  height: auto;
  cursor: pointer;
}

.perde {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: var(--s4) var(--s3);
  text-align: center;
  color: var(--c-krem);
  background: rgba(36, 36, 36, 0.93);
  animation: belir 260ms cubic-bezier(0.19, 1, 0.22, 1);
}
@keyframes belir { from { opacity: 0; } to { opacity: 1; } }

.perde__baslik {
  font-size: var(--t-buyuk);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
}
.perde__metin {
  max-width: 36ch;
  font-size: var(--t-kucuk);
  color: #b8b0aa;
}
.perde__skor {
  font-size: clamp(3.5rem, 13vw, 5.5rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: var(--c-sari);
  font-variant-numeric: tabular-nums;
}

/* ---------- Form ---------- */

.alan { width: 100%; max-width: 330px; text-align: left; margin-top: var(--s1); }
.alan label {
  display: block;
  margin-bottom: 7px;
  font-size: var(--t-mini);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-soluk);
}
.alan input {
  width: 100%;
  min-height: 50px;
  padding: 0 16px;
  border: 1px solid var(--c-cizgi-koyu);
  border-radius: var(--r-alan);
  background: var(--c-kagit);
  color: var(--c-murekkep);
  transition: border-color var(--gecis), box-shadow var(--gecis);
}
.alan input:hover { border-color: var(--c-soluk); }
.alan input:focus {
  outline: none;
  border-color: var(--c-mavi);
  box-shadow: 0 0 0 3px rgba(55, 172, 232, 0.35);
}
.alan input[aria-invalid="true"] { border-color: var(--c-hata); }

.alan__yardim, .alan__hata {
  display: block;
  margin-top: 7px;
  font-size: var(--t-kucuk);
  line-height: 1.4;
}
.alan__yardim { color: var(--c-soluk); }
.alan__hata { color: var(--c-hata); font-weight: 600; }

/* Koyu perde içindeki form */
.perde .alan label,
.perde .alan__yardim { color: #b8b0aa; }
.perde .alan__hata { color: #ffb4a2; }

/* ---------- Düğmeler ---------- */

.dg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: var(--r-hap);
  background: var(--c-sari);
  color: var(--c-murekkep);
  font-size: var(--t-kucuk);
  font-weight: 700;
  letter-spacing: -0.01em;
  transition: background var(--gecis), color var(--gecis), transform var(--gecis), border-color var(--gecis);
}
.dg:hover { background: var(--c-sari-koyu); }
.dg:active { transform: translateY(1px); }
.dg[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }

.dg--hat {
  background: transparent;
  border-color: var(--c-cizgi-koyu);
  color: var(--c-murekkep);
}
.dg--hat:hover { background: var(--c-krem); border-color: var(--c-murekkep); }

/* Koyu perde içindeki ikincil düğme */
.perde .dg--hat { border-color: rgba(247, 241, 237, 0.35); color: var(--c-krem); }
.perde .dg--hat:hover { background: rgba(247, 241, 237, 0.12); border-color: var(--c-krem); }

.dg--kucuk { min-height: 40px; padding: 0 16px; font-size: var(--t-mini); }

.dg--tehlike { background: transparent; border-color: var(--c-cizgi-koyu); color: var(--c-hata); }
.dg--tehlike:hover { background: #fdf0e9; border-color: var(--c-hata); }

.dg--sade {
  min-height: 40px;
  padding: 0 10px;
  border: 0;
  background: none;
  color: var(--c-soluk);
  font-size: var(--t-kucuk);
  font-weight: 600;
  transition: color var(--gecis);
}
.dg--sade:hover { color: var(--c-murekkep); background: none; }

/* ---------- Durum satırı ---------- */

.durum {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 20px;
  font-size: var(--t-kucuk);
  color: var(--c-soluk);
}
.durum--hata  { color: var(--c-hata); font-weight: 600; }
.durum--tamam { color: #15803d; font-weight: 600; }

/* Koyu perde içindeki durum satırı */
.perde .durum { color: #b8b0aa; }
.perde .durum--hata  { color: #ffb4a2; }
.perde .durum--tamam { color: var(--c-sari); }

.donen {
  width: 14px; height: 14px;
  border: 2px solid var(--c-cizgi-koyu);
  border-top-color: var(--c-murekkep);
  border-radius: var(--r-hap);
  animation: don 700ms linear infinite;
  flex: none;
}
.perde .donen { border-color: rgba(247, 241, 237, 0.3); border-top-color: var(--c-sari); }
@keyframes don { to { transform: rotate(360deg); } }

/* ---------- Skor tablosu ---------- */

.satir {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s2);
  padding: 13px var(--s3);
  border-bottom: 1px solid var(--c-cizgi);
  transition: background var(--gecis);
}
.satir:last-child { border-bottom: 0; }
.satir__sira {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: var(--r-hap);
  background: var(--c-krem);
  font-size: var(--t-mini);
  font-weight: 700;
  color: var(--c-soluk);
  font-variant-numeric: tabular-nums;
}
.satir:nth-child(1) .satir__sira { background: var(--c-sari); color: var(--c-murekkep); }
.satir:nth-child(2) .satir__sira { background: var(--c-mavi); color: var(--c-murekkep); }
.satir__isim {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.satir__skor { font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.satir__skor span {
  font-size: var(--t-mini);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-soluk);
  margin-left: 5px;
}
.satir--ben {
  background: var(--c-krem);
  box-shadow: inset 4px 0 0 var(--c-sari);
}

.bos-durum {
  padding: var(--s5) var(--s3);
  text-align: center;
  color: var(--c-soluk);
  font-size: var(--t-kucuk);
}
.bos-durum svg { margin: 0 auto var(--s2); color: var(--c-cizgi-koyu); }

.iskelet {
  height: 14px;
  border-radius: var(--r-hap);
  background: linear-gradient(90deg, var(--c-krem) 25%, var(--c-krem-koyu) 50%, var(--c-krem) 75%);
  background-size: 200% 100%;
  animation: kayan 1.3s ease-in-out infinite;
}
@keyframes kayan { from { background-position: 200% 0; } to { background-position: -200% 0; } }

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

.dip {
  margin-top: auto;
  border-top: 1px solid var(--c-cizgi);
  padding-block: var(--s3);
  font-size: var(--t-kucuk);
  color: var(--c-soluk);
}
.dip__ic {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  align-items: center;
  justify-content: space-between;
}

/* ---------- Uyarı kutusu ---------- */

.uyari {
  display: flex;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--c-cizgi-koyu);
  border-radius: var(--r-alan);
  background: var(--c-krem);
  font-size: var(--t-kucuk);
  color: var(--c-soluk);
  line-height: 1.5;
}
.uyari svg { flex: none; color: var(--c-murekkep); margin-top: 3px; }
.uyari b { color: var(--c-murekkep); }
.uyari code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8125rem;
  background: var(--c-kagit);
  border: 1px solid var(--c-cizgi);
  border-radius: 5px;
  padding: 1px 5px;
}

/* ---------- Hareket tercihi ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}