/* Petek Bulmacası oyun ekranı. Ortak token'lar ortak.css içinde. */

.uygulama {
  max-width: 1040px;
  margin: 0 auto;
  padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}

/* ---------- Üst çubuk ---------- */

.ust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: 14px;
}

.baslik {
  flex: 1 1 auto;
  margin: 0;
  font-family: var(--yazi-baslik);
  font-weight: 700;
  font-size: clamp(22px, 5vw, 30px);
  color: var(--mor-koyu);
}

.ilerleme {
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  order: 3;
  width: 100%;
  justify-content: center;
}

.ilerleme li {
  width: 22px;
  height: 25px;
  background: #EAD9AE;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  transition: background-color .3s ease, scale .3s ease;
}
.ilerleme li.tamam { background: var(--bal); }
.ilerleme li.simdi { background: var(--mor); scale: 1.2; }

@media (min-width: 720px) {
  .ilerleme { order: 0; width: auto; }
}

.ust-sag { display: flex; align-items: center; gap: 10px; }

.bal {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  padding: 6px 16px 6px 10px;
  background: var(--kart);
  border: 3px solid var(--cizgi);
  border-radius: 999px;
  box-shadow: 0 4px 0 var(--golge);
  font-family: var(--yazi-baslik);
  font-weight: 700;
  font-size: 22px;
}
.bal svg { width: 28px; height: 28px; }

/* ---------- Soru ---------- */

.soru-ust {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.soru-adi {
  display: flex;
  flex: 1 1 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  min-width: 0;
}
.soru-ust h2 {
  margin: 0;
  font-family: var(--yazi-baslik);
  font-weight: 600;
  font-size: clamp(21px, 4.4vw, 28px);
  line-height: 1.2;
}

.oyun-alani {
  display: grid;
  gap: 22px;
  justify-items: center;
}

@media (min-width: 760px) {
  :root {
    --goz: clamp(80px, min(14vw, 17dvh), 120px);
    --parca: clamp(70px, min(11vw, 13dvh), 96px);
  }
  .oyun-alani {
    grid-template-columns: auto 1fr;
    grid-template-areas: "izgara tepsi" "rehber rehber";
    align-items: center;
    gap: 22px 28px;
  }
  .izgara { grid-area: izgara; }
  .tepsi-kutu { grid-area: tepsi; }
  .rehber { grid-area: rehber; }
}

.izgara {
  display: grid;
  grid-template-columns: repeat(3, var(--goz));
  gap: 10px;
  padding: 12px;
  background: var(--bal-acik);
  border-radius: 26px;
}

.goz {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--goz);
  height: var(--goz);
  overflow: hidden;
  background: var(--kart);
  border: 3px solid var(--cizgi);
  border-radius: var(--yaricap);
  box-shadow: 0 4px 0 var(--golge);
}
.goz svg { width: 80%; height: 80%; }

.hedef {
  background: #FFF8D6;
  border: 3px dashed var(--bal-koyu);
  transition: scale .15s ease-out, border-color .15s ease-out;
}
.hedef.uzerinde {
  scale: 1.07;
  border-style: solid;
  border-color: var(--mor);
}
.hedef.dolu { border-style: solid; border-color: var(--bal); }

.soru-isareti {
  position: relative;
  font-family: var(--yazi-baslik);
  font-weight: 700;
  font-size: calc(var(--goz) * .45);
  color: var(--bal-koyu);
}

.bal-dolgu {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #FFD54A, #F5B301);
  opacity: .45;
  transform: scaleY(0);
  transform-origin: bottom;
}
.hedef.dolu .bal-dolgu { animation: bal-dol .6s cubic-bezier(.3,.7,.3,1) forwards; }

@keyframes bal-dol {
  to { transform: scaleY(1); }
}

.yerlesen {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  animation: yerles .45s cubic-bezier(.3,1.6,.5,1);
}
.yerlesen svg { width: 74%; height: 74%; }

@keyframes yerles {
  0% { scale: 1.3 .7; }
  45% { scale: .9 1.12; }
  100% { scale: 1 1; }
}

/* ---------- Tepsi ---------- */

.tepsi-kutu { width: 100%; max-width: 380px; }

.tepsi-baslik {
  margin: 0 0 10px;
  color: var(--soluk);
  font-weight: 700;
  text-align: center;
}

.tepsi {
  display: grid;
  grid-template-columns: repeat(3, var(--parca));
  justify-content: center;
  gap: 12px;
}

.parca {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--parca);
  height: var(--parca);
  padding: 0;
  background: var(--kart);
  border: 3px solid var(--cizgi);
  border-radius: var(--yaricap);
  box-shadow: 0 5px 0 var(--golge);
  color: var(--murekkep);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  transition: transform .12s ease-out, box-shadow .12s ease-out, opacity .2s ease;
}
.parca svg { width: 78%; height: 78%; pointer-events: none; }
.parca:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 7px 0 var(--golge); }
.parca:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 var(--golge); }
.parca.kaldirildi { opacity: .3; }
.parca:disabled { cursor: default; }
.parca.elendi { opacity: .38; filter: grayscale(1); }
.parca.elendi::after {
  content: '';
  position: absolute;
  inset: 18%;
  background:
    linear-gradient(45deg, transparent 45%, var(--kirmizi) 45%, var(--kirmizi) 55%, transparent 55%),
    linear-gradient(-45deg, transparent 45%, var(--kirmizi) 45%, var(--kirmizi) 55%, transparent 55%);
}

.harf {
  position: absolute;
  left: -9px;
  top: -9px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  background: var(--kart);
  border: 2px solid var(--cizgi);
  border-radius: 50%;
  line-height: 1;
  font-family: var(--yazi-baslik);
  font-weight: 700;
  font-size: 15px;
  color: var(--soluk);
}

.ucan {
  position: fixed;
  z-index: 50;
  margin: 0;
  pointer-events: none;
  cursor: grabbing;
  scale: 1.08;
  rotate: -4deg;
  box-shadow: 0 14px 28px rgba(58, 42, 16, .25);
  opacity: 1;
}

.sacilan {
  position: fixed;
  z-index: 60;
  width: 14px;
  height: 14px;
  border-radius: 50% 50% 50% 0;
  rotate: -45deg;
  background: var(--bal);
  pointer-events: none;
}

/* ---------- Rehber arı ---------- */

.rehber {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px 12px;
  width: 100%;
}

/* BaşArı rozeti: pozun lavanta zemini daire içinde kalır (kristal kanatlar saydam kesilemiyor). */
.maskot {
  display: block;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #EDE6FA;
  border: 3px solid #FFFFFF;
  box-shadow: 0 0 0 3px var(--bal), 0 6px 14px rgba(90, 35, 184, .22);
}
.rehber-ari {
  width: 72px;
  height: 72px;
  animation: suzul 3s ease-in-out infinite;
}
.bitis-ari { width: 128px; height: 128px; margin: 0 auto 8px; }

@keyframes suzul {
  50% { translate: 0 -6px; }
}

.konusma {
  position: relative;
  flex: 1 1 160px;
  min-height: 56px;
  margin: 0;
  padding: 12px 16px;
  background: #FFFBEF;
  border: 3px solid var(--cizgi);
  border-radius: 20px;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.4;
}
.konusma.dogru { border-color: var(--yesil); background: #ECF8F0; }
.konusma.yanlis { border-color: var(--kirmizi); background: #FDEEEC; }
.konusma.ipucu { border-color: var(--bal); background: var(--bal-acik); }


/* ---------- Tur sonu ---------- */

.bitis {
  max-width: 560px;
  margin: 24px auto;
  text-align: center;
}
.bitis h2 {
  margin: 0 0 8px;
  font-family: var(--yazi-baslik);
  font-size: 36px;
  color: var(--mor-koyu);
}

.yildizlar { display: flex; justify-content: center; gap: 8px; margin: 8px 0; }
.yildiz { width: 64px; height: 64px; fill: #EAD9AE; }
.yildiz.dolu { fill: var(--bal); animation: yerles .5s cubic-bezier(.3,1.6,.5,1) backwards; }
.yildiz.dolu:nth-child(2) { animation-delay: .15s; }
.yildiz.dolu:nth-child(3) { animation-delay: .3s; }

.bitis-bal { margin: 8px 0 0; font-size: 20px; font-weight: 700; }
.bitis-kese {
  width: fit-content;
  max-width: 100%;
  margin: 8px auto 0;
  padding: 8px 18px;
  background: var(--bal-acik);
  border-radius: 22px;
  font-weight: 700;
  line-height: 1.5;
  text-wrap: balance;
}
.bitis-kese a { color: var(--mor-koyu); font-weight: 800; white-space: nowrap; }
.bitis-mesaj { margin: 4px 0 0; color: var(--soluk); font-weight: 700; }

.tekrar { flex: 0 0 auto; }

.acilis {
  max-width: 520px;
  margin: 32px auto;
  text-align: center;
}
.acilis h2 {
  margin: 8px 0;
  font-family: var(--yazi-baslik);
  font-size: clamp(26px, 6vw, 34px);
  color: var(--mor-koyu);
}
.acilis p { margin: 0 0 24px; font-size: 18px; font-weight: 700; }
.acilis .dugme-ana { min-width: 200px; font-size: 24px; }
.acilis-ari {
  width: 120px;
  height: 120px;
  margin: 0 auto;
  animation: suzul 3s ease-in-out infinite;
}
.acilis-ari img { width: 100%; height: 100%; }
.acilis .dugme-ana { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }

.bilgi-kart {
  margin: 18px 0 24px;
  padding: 16px 20px;
  background: var(--bal-acik);
  border: 3px solid var(--bal);
  border-radius: 22px;
  text-align: left;
}
.bilgi-kart h3 {
  margin: 0 0 6px;
  font-family: var(--yazi-baslik);
  font-weight: 600;
  color: var(--bal-koyu);
}
.bilgi-kart p { margin: 0; font-weight: 700; }


@media (max-width: 600px) {
  body { font-size: 16px; }
  .ust { gap: 8px; }
  .baslik { min-width: 0; font-size: 19px; }
  .ust-sag { gap: 8px; }
  .bal { min-height: 44px; padding: 4px 12px 4px 8px; font-size: 19px; }
  .bal svg { width: 24px; height: 24px; }
  .ust .ikon-dugme, .ust .geri { width: 44px; height: 44px; }
  .soru-ust h2 { font-size: 20px; }
  .rozet { font-size: 12px; padding: 3px 10px; }
  .dugme-ikincil { min-height: 46px; font-size: 17px; }
  .oyun-alani { gap: 14px; }
  .izgara { gap: 8px; padding: 10px; }
  .tepsi { gap: 10px; }
  .tepsi-baslik { margin-bottom: 8px; font-size: 15px; }
  .konusma { font-size: 16px; padding: 10px 14px; }
  .ust { margin-bottom: 10px; }
}

/* ---------- Tur sonu düğmeleri ----------
   Düğmeler tur sonunda görünür. veli.css yalnız veli paneli açılınca yüklenir, bu yüzden stilleri burada. */

.bitis-dugmeler {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.veline-goster-dugmesi {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 60px;
  padding: 12px 28px;
  background: linear-gradient(135deg, var(--pembe), var(--mor));
  border: 0;
  border-radius: 999px;
  box-shadow: 0 5px 0 var(--mor-koyu);
  color: #FFF;
  font-family: var(--yazi-baslik);
  font-weight: 700;
  font-size: 22px;
  cursor: pointer;
  animation: davet-et 2.2s ease-in-out infinite;
}
.veline-goster-dugmesi svg { width: 26px; height: 26px; fill: currentColor; }
.veline-goster-dugmesi:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--mor-koyu); }
@keyframes davet-et {
  0%, 100% { scale: 1; }
  50% { scale: 1.06; }
}

.vg-hediye {
  position: absolute;
  top: -14px;
  right: -10px;
  padding: 3px 10px;
  background: var(--bal);
  border: 2px solid #FFF;
  border-radius: 999px;
  box-shadow: 0 3px 0 var(--bal-koyu);
  color: var(--murekkep);
  font-size: 13px;
  white-space: nowrap;
  animation: zipla-hediye 1.4s ease-in-out infinite;
}
@keyframes zipla-hediye {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -4px; }
}

@media (prefers-reduced-motion: reduce) {
  .veline-goster-dugmesi, .vg-hediye { animation: none; }
}

/* ---------- Akilo taşı şeridi: tur sonunda ya da Veline göster penceresinde yeni taş (js/kabuk.js, js/veline-goster.js) ---------- */

.bitis-tas {
  display: flex;
  align-items: center;
  gap: 14px;
  width: fit-content;
  max-width: 100%;
  margin: 12px auto 0;
  padding: 10px 20px 10px 12px;
  background:
    radial-gradient(1px 1px at 18% 30%, #FFFFFF 99%, transparent),
    radial-gradient(1.5px 1.5px at 72% 70%, #FFF1B8 99%, transparent),
    radial-gradient(1px 1px at 88% 24%, #FFFFFF 99%, transparent),
    radial-gradient(120% 160% at 0% 50%, color-mix(in srgb, var(--tas) 45%, transparent), transparent 70%),
    #2E1065;
  border: 2px solid color-mix(in srgb, var(--tas-acik) 70%, transparent);
  border-radius: 22px;
  box-shadow: 0 6px 18px rgba(46, 16, 101, .3), 0 0 22px color-mix(in srgb, var(--tas) 40%, transparent);
  color: #FFFFFF;
  text-align: left;
  text-decoration: none;
  animation: tas-gir .7s cubic-bezier(.34, 1.56, .64, 1) .5s both;
}
.bt-tas {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
}
.bt-tas .tas-svg {
  width: 52px;
  height: 52px;
  filter: drop-shadow(0 0 10px var(--tas));
  animation: tas-parla 2.6s ease-in-out 1.2s infinite;
}
/* Taş gelince çevresinde bir kez açılan ışık halkası */
.bt-tas::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid var(--tas-acik);
  opacity: 0;
  animation: tas-halka .8s ease-out .75s;
  pointer-events: none;
}
.bt-yazi { font-weight: 700; font-size: 17px; line-height: 1.35; }
.bt-yazi b { color: #FFE38A; font-family: var(--yazi-baslik); font-size: 19px; }
.bt-yazi span { display: block; margin-top: 2px; font-size: 14px; color: #E9DDFF; }
.bitis-tas:active { translate: 0 2px; }

@keyframes tas-gir {
  from { opacity: 0; scale: .6; translate: 0 14px; }
  to { opacity: 1; scale: 1; translate: 0 0; }
}
@keyframes tas-parla {
  50% { filter: drop-shadow(0 0 16px var(--tas)) brightness(1.15); }
}
@keyframes tas-halka {
  0% { opacity: .9; scale: .6; }
  100% { opacity: 0; scale: 1.9; }
}
@media (prefers-reduced-motion: reduce) {
  .bitis-tas, .bt-tas .tas-svg, .bt-tas::after { animation: none; }
}

/* ---------- Vızvız şeridi: oyun açılışında uyarı, tur sonunda kaçış (js/kabuk.js) ---------- */
.vz-serit {
  display: flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  max-width: 100%;
  margin: 12px auto 0;
  padding: 8px 18px 8px 8px;
  background: repeating-linear-gradient(135deg, rgba(23, 23, 23, .06) 0 12px, transparent 12px 24px), #FFE680;
  border: 2px solid #1F1F1F;
  border-radius: 999px;
  font-weight: 700;
  text-align: left;
}
.vz-serit .vz-sekil { flex: 0 0 auto; margin: -10px 0 -6px 4px; }
.vz-serit b { color: #C0261A; }
.vz-kacti { animation: tas-gir .7s cubic-bezier(.34, 1.56, .64, 1) .4s both; }
.vz-kacti .vz-sekil { animation: vz-kac 1.6s cubic-bezier(.6, 0, .9, .35) 1.4s both; }
.vz-kacti b { color: #157A42; }
.vz-serit:not(.vz-kacti) .vz-sekil { animation: vz-asili 1.9s ease-in-out infinite; }
@keyframes vz-asili {
  0%, 100% { translate: 0 0; rotate: -3deg; }
  30% { translate: 2px -5px; rotate: 4deg; }
  60% { translate: -2px -2px; rotate: -1deg; }
}
@keyframes vz-kac {
  0% { translate: 0 0; rotate: 0deg; opacity: 1; }
  30% { translate: -6px 2px; rotate: -10deg; }
  100% { translate: 220px -140px; rotate: 30deg; scale: .4; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .vz-kacti, .vz-kacti .vz-sekil, .vz-serit .vz-sekil { animation: none; }
}