/* Tema sayfası. Kategori rengi body üzerindeki --k-renk ve --k-zemin değişkenlerinden gelir. */

.site-ust .ikon-dugme { margin-left: auto; }

.bolum { margin: 0 0 36px; }

/* ---------- Kahraman alanı ---------- */

.tema-kahraman {
  position: relative;
  overflow: hidden;
  margin: 6px 0 32px;
  padding: clamp(22px, 5vw, 44px);
  background:
    radial-gradient(circle at 85% 20%, rgba(255, 255, 255, .9), transparent 45%),
    linear-gradient(160deg, var(--k-zemin) 0%, #FFFFFF 100%);
  border: 3px solid var(--cizgi);
  border-radius: 32px;
  box-shadow: 0 8px 0 var(--golge);
}
.karanlik-tema .tema-kahraman {
  background:
    radial-gradient(circle at 80% 20%, rgba(124, 111, 255, .45), transparent 50%),
    linear-gradient(160deg, #1B1748 0%, #2E2A7A 100%);
  border-color: #3F3A93;
  box-shadow: 0 8px 0 #15123A;
}

.tk-ic {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 28px;
  align-items: center;
}
@media (min-width: 820px) {
  .tk-ic { grid-template-columns: 1.1fr 1fr; }
}

.tk-kategori {
  display: inline-block;
  padding: 4px 14px;
  background: var(--k-renk);
  border-radius: 999px;
  color: #FFF;
  font-family: var(--yazi-baslik);
  font-weight: 600;
  font-size: 15px;
}
.tema-kahraman h1 {
  margin: 12px 0 4px;
  font-family: var(--yazi-baslik);
  font-weight: 700;
  font-size: clamp(36px, 8.5vw, 60px);
  line-height: 1.05;
  color: var(--k-renk);
}
.tk-ad {
  margin: 0 0 22px;
  font-size: 20px;
  font-weight: 800;
  color: var(--soluk);
}
.karanlik-tema .tema-kahraman h1 { color: #FFE27A; }
.karanlik-tema .tk-ad { color: #E8E6FF; }
.karanlik-tema .tk-kategori { background: #FFE27A; color: #1B1748; }

/* Temanın oyunları: her oyun dokunulacak büyük bir kart. */
.oyun-secim {
  display: grid;
  gap: 12px;
  max-width: 460px;
}
.oyun-karti {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 76px;
  padding: 12px 14px;
  background: #FFF;
  border: 3px solid var(--cizgi);
  border-radius: 22px;
  box-shadow: 0 6px 0 var(--golge);
  color: var(--murekkep);
  text-decoration: none;
  transition: transform .15s cubic-bezier(.3,1.4,.5,1), box-shadow .15s ease;
}
.oyun-karti:hover { transform: translateY(-3px); box-shadow: 0 9px 0 var(--golge); }
.oyun-karti:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--golge); }
.oyun-simge {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  background: var(--bal-acik);
  border-radius: 16px;
}
.oyun-simge svg { width: 38px; height: 38px; }
.oyun-yazi { display: grid; flex: 1; gap: 2px; }
.oyun-yazi strong { font-family: var(--yazi-baslik); font-weight: 700; font-size: 21px; line-height: 1.15; color: var(--k-renk); }
.oyun-yazi span { font-size: 15px; font-weight: 700; color: var(--soluk); }
.oyun-oyna {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  background: var(--mor);
  border-radius: 50%;
  box-shadow: 0 4px 0 var(--mor-koyu);
  color: #FFF;
}
.oyun-oyna svg { width: 24px; height: 24px; fill: currentColor; translate: 2px 0; }
.oyun-karti:first-child .oyun-oyna { animation: davet 2.2s ease-in-out infinite; }

@keyframes davet {
  0%, 100% { scale: 1; }
  50% { scale: 1.08; }
}

/* Kapak resmi ve çevresinde dönen simgeler */
.tk-sahne {
  position: relative;
  justify-self: center;
  width: min(300px, 72vw);
  aspect-ratio: 3 / 4;
}
.tk-kapak {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 6px solid #FFF;
  border-radius: 26px;
  box-shadow: 0 18px 40px rgba(58, 42, 16, .25);
  rotate: 3deg;
  animation: kapak-suzul 5s ease-in-out infinite;
}

@keyframes kapak-suzul {
  0%, 100% { translate: 0 0; rotate: 3deg; }
  50% { translate: 0 -10px; rotate: 1deg; }
}

.yorunge {
  position: absolute;
  z-index: 2;
  width: 54px;
  height: 54px;
  filter: drop-shadow(0 6px 6px rgba(58, 42, 16, .25));
  animation: yorunge 4s ease-in-out infinite;
}
.y1 { left: -24px; top: 8%; animation-delay: -.4s; }
.y2 { right: -26px; top: 18%; animation-delay: -1.2s; animation-duration: 4.6s; }
.y3 { left: -30px; top: 52%; animation-delay: -2s; animation-duration: 5s; }
.y4 { right: -22px; top: 64%; animation-delay: -.8s; animation-duration: 4.2s; }
.y5 { left: 30%; top: -24px; animation-delay: -1.6s; animation-duration: 5.4s; }
.y6 { right: 26%; bottom: -24px; animation-delay: -2.6s; animation-duration: 4.8s; }

@keyframes yorunge {
  0%, 100% { transform: translate(0, 0) rotate(-8deg); }
  33% { transform: translate(6px, -12px) rotate(6deg); }
  66% { transform: translate(-6px, 6px) rotate(-2deg); }
}

/* ---------- Bilgi kartları ---------- */

.bilgi-ilerleme {
  position: relative;
  height: 34px;
  margin-bottom: 18px;
  overflow: hidden;
  background: #FFF;
  border: 3px solid var(--cizgi);
  border-radius: 999px;
}
.bi-dolgu {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--bal), #FFD54A);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s cubic-bezier(.3,1.3,.5,1);
}
.bi-yazi {
  position: relative;
  display: grid;
  place-items: center;
  height: 100%;
  font-family: var(--yazi-baslik);
  font-weight: 600;
  color: var(--murekkep);
}

.bilgi-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}

.bilgi-karti {
  display: block;
  padding: 0;
  background: none;
  border: 0;
  text-align: center;
  cursor: pointer;
  perspective: 900px;
}
.bk-ic {
  display: grid;
  min-height: 230px;
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.3,1.3,.5,1);
}
.bilgi-karti[aria-pressed="true"] .bk-ic { transform: rotateY(180deg); }
.bilgi-karti:active .bk-ic { scale: .97; }

.bk-yuz {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px;
  border: 3px solid var(--cizgi);
  border-radius: 24px;
  box-shadow: 0 6px 0 var(--golge);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.bk-on { background: #FFF; }
.bk-arka {
  background: var(--k-zemin);
  border-color: var(--k-renk);
  transform: rotateY(180deg);
}
.bk-on img { width: 64px; height: 64px; animation: suzul 3s ease-in-out infinite; }
.bk-soru-isareti {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  background: var(--k-zemin);
  border-radius: 50%;
  font-family: var(--yazi-baslik);
  font-weight: 700;
  font-size: 36px;
  color: var(--k-renk);
}
.bk-soru {
  font-family: var(--yazi-baslik);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.25;
  color: var(--murekkep);
}
.bk-ipucu {
  padding: 2px 10px;
  background: var(--bal-acik);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  color: var(--bal-koyu);
}
.bk-cevap {
  font-family: var(--yazi-baslik);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.15;
  color: var(--k-renk);
}
.bk-aciklama { font-weight: 700; font-size: 16px; line-height: 1.45; color: var(--murekkep); }

.odul {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding: 14px 20px;
  background: var(--bal-acik);
  border: 3px solid var(--bal);
  border-radius: 24px;
  animation: odul-gel .6s cubic-bezier(.3,1.6,.5,1);
}
.odul img { width: 56px; height: 56px; }
.odul div { display: grid; }
.odul strong { font-family: var(--yazi-baslik); font-size: 22px; color: var(--bal-koyu); }
.odul span { font-weight: 700; }

@keyframes odul-gel {
  from { scale: .6; opacity: 0; }
}

.konfeti-parca {
  position: fixed;
  z-index: 60;
  width: 10px;
  height: 14px;
  border-radius: 3px;
  pointer-events: none;
}

/* ---------- Simgeler ---------- */

.simge-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 12px;
}
.simge-karti {
  display: grid;
  justify-items: center;
  gap: 6px;
  min-height: 116px;
  padding: 12px 8px;
  background: #FFF;
  border: 3px solid var(--cizgi);
  border-radius: 20px;
  box-shadow: 0 5px 0 var(--golge);
  color: var(--murekkep);
  cursor: pointer;
}
.simge-karti img { width: 56px; height: 56px; }
.simge-karti span { font-weight: 800; font-size: 15px; line-height: 1.2; }
.simge-karti:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--golge); }

/* Kartlar ekrana girerken sırayla belirir. */
.bilgi-karti:not(.gorundu),
.simge-karti:not(.gorundu) { opacity: 0; }
.bilgi-karti.gorundu,
.simge-karti.gorundu {
  animation: belir .45s cubic-bezier(.2,.8,.2,1) backwards;
  animation-delay: calc(var(--sira, 0) * 60ms);
}

.bulunamadi { padding: 40px 0; text-align: center; }
.bulunamadi h1 { font-family: var(--yazi-baslik); color: var(--mor-koyu); }

@media (prefers-reduced-motion: reduce) {
  .bk-ic { transition: none; transform: none !important; }
  .bk-arka { transform: none; opacity: 0; }
  .bilgi-karti[aria-pressed="true"] .bk-on { opacity: 0; }
  .bilgi-karti[aria-pressed="true"] .bk-arka { opacity: 1; }
  .bilgi-karti:not(.gorundu),
  .simge-karti:not(.gorundu) { opacity: 1; }
}