/* ============================================================
   KUMPAS — kamp ateşi sahnesi
   Sayfa sitenin mürekkep zemininden doğuyor: üst bar siyah, altı
   gece lacivertine açılıyor, ateşin etrafı turuncuya dönüyor ve en
   altta yine mürekkebe iniyor. Gündüz fazında gökyüzü şafak
   kızıllığına geçiyor ama sayfanın geri kalanı siteyle aynı kalıyor.
   Oyunun kendi pixel çizimleri (sprite) büyütülürken yumuşatılmıyor.
   ============================================================ */

.k-sayfa {
  --k-ates: #ff8a2b;
  --k-kan: #c4271b;
  background: var(--murekkep);
}

.k-sayfa .geri {
  color: var(--kemik);
}

/* ---------- sahne ---------- */
.k-sahne {
  position: relative;
  overflow: hidden;
  padding: 56px 0 80px;
  isolation: isolate;
  background: var(--murekkep);
}

.k-gok {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.k-gok::before,
.k-gok::after {
  content: "";
  position: absolute;
  inset: 0;
  transition: opacity 1.6s ease;
}

/* Gece: siteden gelen mürekkep → gece laciverti → ateşin altı */
.k-gok::before {
  background: linear-gradient(180deg, #0e0d0c 0%, #0f1431 22%, #1a2250 56%, #232748 74%, #14130f 100%);
}

/* Şafak: aynı mürekkepten başlıyor, ufukta kızıllık */
.k-gok::after {
  opacity: 0;
  background: linear-gradient(180deg, #0e0d0c 0%, #1e2860 18%, #5a5a9a 42%, #e08a5c 66%, #f2b46e 74%, #1f1a12 100%);
}

.k-sahne[data-faz="gunduz"] .k-gok::after,
.k-sahne[data-faz="idam"] .k-gok::after,
.k-sahne[data-faz="bitti"] .k-gok::after {
  opacity: 1;
}

.k-yildizlar {
  z-index: 1;
  position: absolute;
  inset: 0 0 45% 0;
  transition: opacity 1.4s;
}

.k-yildiz {
  position: absolute;
  width: 3px;
  height: 3px;
  background: #fff3c4;
  animation: k-parla 3.4s ease-in-out infinite;
}

@keyframes k-parla {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}

.k-sahne[data-faz="gunduz"] .k-yildizlar,
.k-sahne[data-faz="idam"] .k-yildizlar {
  opacity: 0;
}

/* Ay → güneş */
.k-ay {
  z-index: 1;
  position: absolute;
  top: 12%;
  right: 12%;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: #f3ecc8;
  box-shadow: inset -22px -6px 0 0 #cfc58f, 0 0 60px rgba(243, 236, 200, 0.35);
  transition: top 1.6s ease, background 1.2s, box-shadow 1.2s;
}

.k-ay::after {
  content: "";
  position: absolute;
  left: 24px;
  top: 30px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(150, 140, 90, 0.35);
  box-shadow: 30px 22px 0 -2px rgba(150, 140, 90, 0.3);
}

.k-sahne[data-faz="gunduz"] .k-ay,
.k-sahne[data-faz="idam"] .k-ay,
.k-sahne[data-faz="bitti"] .k-ay {
  top: 40%;
  background: #ffd23f;
  box-shadow: 0 0 0 8px rgba(255, 210, 63, 0.25), 0 0 90px 30px rgba(255, 170, 70, 0.55);
}

.k-sahne[data-faz="gunduz"] .k-ay::after,
.k-sahne[data-faz="idam"] .k-ay::after,
.k-sahne[data-faz="bitti"] .k-ay::after {
  opacity: 0;
}

/* Çam siluetleri: iki derinlik */
.k-cam {
  z-index: 2;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 24%;
  height: 34%;
  background-repeat: repeat-x;
  background-position: 0 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 200' preserveAspectRatio='none'%3E%3Cg fill='%2308091a'%3E%3Cpath d='M20 200 L20 170 L4 170 L30 110 L14 110 L40 50 L26 50 L48 0 L70 50 L56 50 L82 110 L66 110 L92 170 L76 170 L76 200Z'/%3E%3Cpath d='M130 200 L130 176 L118 176 L142 120 L128 120 L150 70 L138 70 L158 24 L178 70 L166 70 L188 120 L174 120 L198 176 L186 176 L186 200Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 240px 100%;
}

.k-cam-arka {
  bottom: 28%;
  height: 26%;
  opacity: 0.55;
  background-size: 180px 100%;
  background-position: 60px 100%;
}

.k-cam-on {
  opacity: 0.92;
}

.k-sahne::after {
  /* Alt kenar mürekkebe iniyor; sonraki bölümle dikiş görünmüyor */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120px;
  background: linear-gradient(180deg, transparent, var(--murekkep));
  z-index: 1;
  pointer-events: none;
}

/* ---------- üst yazılar ---------- */
.k-ust {
  position: relative;
  z-index: 3;
}

.k-etiket {
  display: inline-block;
  margin: 18px 0 4px;
  padding: 4px 12px;
  font-family: var(--cizgi-roman);
  font-size: 20px;
  letter-spacing: 0.08em;
  color: var(--murekkep);
  background: var(--sari);
  transform: rotate(-2deg);
}

.k-baslik {
  display: flex;
  margin: 6px 0 0;
  font-family: var(--cizgi-roman);
  font-weight: 400;
  font-size: clamp(72px, 11vw, 140px);
  line-height: 0.95;
  letter-spacing: 0.03em;
  color: #ffb347;
  text-shadow: 5px 6px 0 var(--kirmizi-koyu), 0 0 28px rgba(255, 138, 43, 0.35);
}

.k-baslik span {
  position: relative;
}

/* Harflerden sızan kan damlaları */
.k-baslik span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 88%;
  width: 7px;
  height: 22px;
  margin-left: -3px;
  border-radius: 0 0 6px 6px;
  background: var(--k-kan);
  transform-origin: top;
  animation: k-damla 4.6s ease-in infinite;
}

.k-baslik span:nth-child(2)::after { height: 40px; animation-delay: 0.7s; }
.k-baslik span:nth-child(3)::after { height: 18px; animation-delay: 1.6s; }
.k-baslik span:nth-child(4)::after { height: 30px; animation-delay: 2.4s; }
.k-baslik span:nth-child(5)::after { height: 24px; animation-delay: 3.1s; }
.k-baslik span:nth-child(6)::after { height: 36px; animation-delay: 1.1s; }

@keyframes k-damla {
  0%, 16% { transform: scaleY(0.05); opacity: 0.9; }
  62% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0.8; }
}

/* ---------- kamp ---------- */
.k-kamp {
  position: relative;
  z-index: 2;
  --sp: 11.43%;
  width: min(1040px, 100%);
  aspect-ratio: 280 / 168;
  margin: 10px auto 0;
  padding-bottom: 0;
}

.k-kamp::before {
  /* Yer: ateşin çevresinde ısınmış toprak */
  content: "";
  position: absolute;
  left: -6%;
  right: -6%;
  top: 38%;
  bottom: -12%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 52%, rgba(255, 138, 43, 0.28) 0%, rgba(120, 70, 30, 0.2) 26%, rgba(20, 20, 14, 0) 60%),
    radial-gradient(ellipse at 50% 56%, #1b3a24 0%, #14281a 52%, rgba(14, 24, 16, 0) 72%);
  filter: blur(2px);
}

.k-isik {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 64%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 150, 50, 0.38) 0%, rgba(255, 120, 30, 0.12) 36%, transparent 66%);
  animation: k-titre 2.6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes k-titre {
  0%, 100% { opacity: 0.8; transform: translate(-50%, -50%) scale(1); }
  40% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
  70% { opacity: 0.88; transform: translate(-50%, -50%) scale(0.98); }
}

.k-sahne[data-faz="gunduz"] .k-isik {
  opacity: 0.45;
  animation: none;
}

.k-ates {
  position: absolute;
  left: 50%;
  top: 86.6%;
  width: 14.3%;
  transform: translate(-50%, -100%);
  image-rendering: pixelated;
  filter: drop-shadow(0 0 14px rgba(255, 140, 40, 0.8));
  pointer-events: none;
  z-index: 146;
}

.k-ocak {
  position: absolute;
  left: 50%;
  top: calc(135 / 168 * 100%);
  width: calc(48 / 280 * 100%);
  transform: translateX(-50%);
  image-rendering: pixelated;
  pointer-events: none;
}

.k-ot {
  position: absolute;
  transform: translate(-50%, -100%);
  image-rendering: pixelated;
  pointer-events: none;
}

.k-koltuk {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  width: var(--sp);
  transform: translate(-50%, -100%);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}

.k-kisi,
.k-mezar {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
}

.k-mezar {
  position: absolute;
  left: 0;
  bottom: 0;
}




/* Oy sayacı: kırmızı tabela, kemik yazı */








.k-koltuk.sallan .k-kisi {
  animation: k-sars 0.5s linear;
}

@keyframes k-sars {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-5%); }
  30% { transform: translateX(5%); }
  45% { transform: translateX(-4%); }
  60% { transform: translateX(4%); }
  80% { transform: translateX(-2%); }
}

/* ---------- gece / gündüz anahtarı ---------- */
.k-anahtar {
  position: absolute;
  right: 3%;
  top: 2%;
  z-index: 60;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  padding: 0;
  border: 4px solid var(--murekkep);
  border-radius: 50%;
  background: var(--sari);
  box-shadow: 4px 4px 0 var(--kirmizi);
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.3, 1.8, 0.5, 1);
  -webkit-tap-highlight-color: transparent;
}

.k-anahtar:hover {
  transform: rotate(-12deg) scale(1.08);
}

.k-anahtar svg {
  width: 30px;
  height: 30px;
  fill: var(--murekkep);
  stroke: var(--murekkep);
  stroke-width: 2;
  stroke-linecap: round;
}

.k-anahtar .gunes {
  display: none;
  fill: none;
}

.k-anahtar[aria-pressed="true"] .ay {
  display: none;
}

.k-anahtar[aria-pressed="true"] .gunes {
  display: inline;
}

.k-alt-yazi {
  max-width: 24ch;
  margin: 14px 0 0;
  font-size: clamp(19px, 2.2vw, 24px);
  line-height: 1.3;
  color: var(--kemik);
}

/* ---------- üç adım: gece, gündüz, oy ---------- */
.k-adimlar {
  position: relative;
  padding: 10px 0 40px;
  background: var(--murekkep);
}

.k-adim-izgara {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 46px;
}

.k-adim {
  position: relative;
  margin: 0;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  border: 5px solid var(--kemik);
  box-shadow: 8px 9px 0 var(--kirmizi);
  background: #1a2250;
}

.k-adim:nth-child(2) { transform: translateY(18px) rotate(0.8deg); box-shadow: 8px 9px 0 var(--sari); }
.k-adim:nth-child(1) { transform: rotate(-1deg); }
.k-adim:nth-child(3) { transform: translateY(-6px) rotate(1.2deg); }

.k-adim:not(:last-child)::after {
  /* adımlar arası ok */
  content: "";
  position: absolute;
  right: -40px;
  top: 50%;
  width: 0;
  height: 0;
  border: 16px solid transparent;
  border-left: 22px solid var(--kirmizi);
  z-index: 3;
}

.k-adim figcaption {
  position: absolute;
  z-index: 4;
  left: 12px;
  top: 10px;
  padding: 2px 12px 3px;
  font-family: var(--cizgi-roman);
  font-size: 26px;
  letter-spacing: 0.06em;
  color: var(--murekkep);
  background: var(--sari);
  border: 3px solid var(--murekkep);
  transform: rotate(-2deg);
}

.k-adim figcaption b {
  font-weight: 400;
  color: var(--kirmizi-koyu);
  margin-right: 4px;
}

.k-gece {
  background: linear-gradient(180deg, #0f1431, #1b2358 70%, #2a2d52);
}

.k-gunduz {
  background: linear-gradient(180deg, #3b4a96, #c47a64 62%, #f0b26e);
}


.k-adim-ay,
.k-adim-gunes {
  position: absolute;
  right: 14%;
  top: 16%;
  width: 52px;
  height: 52px;
  border-radius: 50%;
}

.k-adim-ay {
  background: #f3ecc8;
  box-shadow: inset -12px -3px 0 #cfc58f, 0 0 30px rgba(243, 236, 200, 0.35);
}

.k-adim-gunes {
  top: 22%;
  background: #ffd23f;
  box-shadow: 0 0 0 6px rgba(255, 210, 63, 0.3), 0 0 50px 14px rgba(255, 170, 70, 0.5);
}

.k-adim-sahne {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 4%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 1%;
}

.k-adim-sahne img {
  display: block;
  width: 23%;
  height: auto;
  image-rendering: pixelated;
}

.k-etik {
  position: relative;
  flex: 1;
}

.k-etik img {
  width: 100%;
}

.k-etik em {
  position: absolute;
  left: 50%;
  top: -8px;
  min-width: 28px;
  padding: 1px 6px 3px;
  transform: translateX(-50%) rotate(-3deg);
  font-family: var(--cizgi-roman);
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  text-align: center;
  color: var(--kemik);
  background: var(--kirmizi);
  border: 3px solid var(--murekkep);
  box-shadow: 3px 3px 0 var(--murekkep);
}

.k-z {
  position: absolute;
  font-family: var(--cizgi-roman);
  font-style: normal;
  color: rgba(241, 236, 226, 0.7);
  animation: k-z 3.2s ease-in-out infinite;
}

.k-z.z1 { left: 24%; top: 46%; font-size: 26px; }
.k-z.z2 { left: 40%; top: 40%; font-size: 20px; animation-delay: -1.4s; }

@keyframes k-z {
  0%, 100% { transform: translateY(0); opacity: 0.35; }
  50% { transform: translateY(-10px); opacity: 1; }
}

/* ---------- rol kartları ---------- */
.k-kartlar {
  position: relative;
  padding: 20px 0 110px;
  background: var(--murekkep);
  overflow: hidden;
}

.k-elim {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: clamp(180px, 25vw, 250px);
}

.k-karti {
  flex: none;
  width: clamp(72px, 12.5vw, 132px);
  height: auto;
  margin: 0 -1.2%;
  image-rendering: pixelated;
  filter: drop-shadow(5px 6px 0 rgba(255, 59, 47, 0.55));
  transform: translateY(var(--dy, 0px)) rotate(var(--a, 0deg));
  transform-origin: 50% 130%;
  transition: transform 0.4s cubic-bezier(0.3, 1.5, 0.5, 1);
}

.k-karti:hover {
  transform: translateY(calc(var(--dy, 0px) - 28px)) rotate(var(--a, 0deg)) scale(1.1);
  z-index: 5;
}

/* ---------- ekran görüntüleri: ipe asılı fotoğraflar ---------- */
.k-ip {
  position: relative;
  padding: 20px 0 120px;
  background: var(--murekkep);
  overflow: hidden;
}

.k-ip-serit {
  position: relative;
  display: flex;
  gap: 34px;
  padding: 46px max(16px, calc((100vw - 1120px) / 2)) 30px;
  overflow-x: auto;
  scrollbar-width: none;
}

.k-ip-serit::-webkit-scrollbar {
  display: none;
}

.k-ip-serit::before {
  /* İp: hafif sarkıyor */
  content: "";
  position: absolute;
  left: 0;
  top: 22px;
  width: max(100%, 1700px);
  height: 3px;
  background: var(--kemik-2);
  opacity: 0.6;
}

.k-foto {
  position: relative;
  flex: none;
  margin: 0;
  padding: 10px 10px 34px;
  background: #f4efe3;
  box-shadow: 8px 10px 0 rgba(255, 59, 47, 0.42);
  transform-origin: 50% -26px;
  animation: k-salin 5s ease-in-out infinite;
}

.k-foto:nth-child(2) { animation-delay: -1.2s; }
.k-foto:nth-child(3) { animation-delay: -2.4s; }
.k-foto:nth-child(4) { animation-delay: -0.6s; }
.k-foto:nth-child(5) { animation-delay: -3.1s; }
.k-foto:nth-child(6) { animation-delay: -1.9s; }

@keyframes k-salin {
  0%, 100% { transform: rotate(-1.6deg); }
  50% { transform: rotate(1.6deg); }
}

.k-foto img {
  display: block;
  width: 232px;
  height: auto;
  image-rendering: pixelated;
}

.k-mandal {
  /* Mandal: ipe tutturan ahşap */
  position: absolute;
  top: -34px;
  left: 50%;
  width: 14px;
  height: 36px;
  margin-left: -7px;
  background: linear-gradient(90deg, #b07a3c, #d9a35a 50%, #8a5a28);
  border: 2px solid var(--murekkep);
  border-radius: 3px;
}

/* ---------- sayılar ve çağrı ---------- */
.k-alt {
  position: relative;
  padding: 0 0 100px;
  background: var(--murekkep);
}

.k-sayilar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  padding-block: 10px 46px;
  border-top: 3px solid var(--kemik);
}

.k-sayilar div {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
  padding-top: 26px;
}

.k-sayilar b {
  font-family: var(--cizgi-roman);
  font-weight: 400;
  font-size: clamp(46px, 6.4vw, 76px);
  line-height: 1;
  color: var(--k-ates);
  text-shadow: 4px 4px 0 var(--kirmizi-koyu);
}

.k-sayilar span {
  font-size: 17px;
  line-height: 1.25;
  color: var(--kemik-2);
}

@media (max-width: 760px) {
  .k-adim-izgara {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }
  .k-adim:not(:last-child)::after {
    display: none;
  }
  .k-anahtar {
    width: 48px;
    height: 48px;
  }
  .k-ay {
    width: 64px;
    height: 64px;
    right: 8%;
  }
  .k-sayilar {
    grid-template-columns: minmax(0, 1fr);
  }
  .k-sahne {
    padding-top: 36px;
  }
  .k-karti {
    margin: 0 -3%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .k-baslik span::after,
  .k-yildiz,
  .k-isik,
  .k-foto,
  .k-koltuk.secilebilir .k-kisi {
    animation: none;
  }
}

.k-mezar[hidden],


/* ---------- gündüz: orman renklenir, ateş söner ---------- */
.k-sahne[data-faz="gunduz"] .k-cam {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 200' preserveAspectRatio='none'%3E%3Cg fill='%23245a34'%3E%3Cpath d='M20 200 L20 170 L4 170 L30 110 L14 110 L40 50 L26 50 L48 0 L70 50 L56 50 L82 110 L66 110 L92 170 L76 170 L76 200Z'/%3E%3Cpath d='M130 200 L130 176 L118 176 L142 120 L128 120 L150 70 L138 70 L158 24 L178 70 L166 70 L188 120 L174 120 L198 176 L186 176 L186 200Z'/%3E%3C/g%3E%3C/svg%3E");
}

.k-sahne[data-faz="gunduz"] .k-cam-arka {
  opacity: 0.8;
  filter: brightness(1.45) saturate(0.9);
}

.k-sahne[data-faz="gunduz"] .k-kamp::before {
  background:
    radial-gradient(ellipse at 50% 56%, #3f8a48 0%, #2c6a38 52%, rgba(30, 90, 50, 0) 74%);
}

.k-sahne[data-faz="gunduz"] .k-ates,
.k-sahne[data-faz="gunduz"] .k-isik {
  opacity: 0;
  transition: opacity 0.5s;
}

.k-ates,
.k-isik {
  transition: opacity 0.9s;
}

.k-duman {
  position: absolute;
  left: 50%;
  top: 79%;
  width: 4%;
  height: 12%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 1.2s;
  pointer-events: none;
  z-index: 150;
}

.k-sahne[data-faz="gunduz"] .k-duman {
  opacity: 1;
}

.k-duman i {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 28%;
  aspect-ratio: 1;
  background: #aeb4bd;
  opacity: 0;
  animation: k-duman 3.6s ease-out infinite;
}

.k-duman i:nth-child(2) { animation-delay: 1.2s; margin-left: 12%; }
.k-duman i:nth-child(3) { animation-delay: 2.4s; margin-left: -12%; }

@keyframes k-duman {
  0% { transform: translate(-50%, 0) scale(0.6); opacity: 0; }
  20% { opacity: 0.7; }
  100% { transform: translate(-30%, -380%) scale(2.4); opacity: 0; }
}

/* ---------- telefonlar: oyundan ekranlar ---------- */
.k-telefonlar {
  position: relative;
  overflow: hidden;
  padding: 30px 0 150px;
  background: linear-gradient(180deg, var(--murekkep) 0%, #101a14 40%, #14281a 100%);
}

.k-telefonlar::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 40%;
  width: 1000px;
  height: 500px;
  margin-left: -500px;
  background: radial-gradient(ellipse, rgba(255, 138, 43, 0.2), transparent 65%);
  pointer-events: none;
}

.k-telefonlar::after {
  /* ön plandaki çimen şeridi (oyunun kendi çim sprite'ları) */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 64px;
  background:
    url("/gorseller/kumpas/s/cim-b.png") 0 100% / 80px auto repeat-x,
    url("/gorseller/kumpas/s/cim-a.png") 38px 100% / 55px auto repeat-x;
  image-rendering: pixelated;
  pointer-events: none;
}

.k-tel-serit {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: clamp(16px, 3vw, 40px);
  padding: 40px 16px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.k-tel-serit::-webkit-scrollbar {
  display: none;
}

.k-tel {
  flex: none;
  margin: 0;
  scroll-snap-align: center;
  padding: 12px;
  border-radius: 34px;
  background: #0e0d0c;
  box-shadow: 0 0 0 3px var(--kemik), 10px 12px 0 3px var(--kirmizi);
  transition: transform 0.35s cubic-bezier(0.3, 1.5, 0.5, 1);
}

.k-tel img {
  display: block;
  height: clamp(340px, 60vh, 540px);
  width: auto;
  aspect-ratio: 195 / 350;
  border-radius: 22px;
  image-rendering: pixelated;
}

.k-tel.t1 { transform: rotate(-3deg) translateY(16px); }
.k-tel.t2 { transform: translateY(-14px); box-shadow: 0 0 0 3px var(--kemik), 10px 12px 0 3px var(--sari); }
.k-tel.t3 { transform: rotate(3deg) translateY(16px); }
.k-tel.t4 { transform: rotate(-2deg) translateY(6px); }
.k-tel.t5 { transform: rotate(2.5deg) translateY(10px); }

.k-tel:hover {
  transform: translateY(-20px) rotate(0deg);
}

@media (max-width: 760px) {
  .k-tel img {
    height: 300px;
  }
  .k-tel-serit {
    justify-content: flex-start;
  }
  .k-tel {
    padding: 8px;
    border-radius: 24px;
  }
  .k-tel img {
    border-radius: 16px;
  }
}

/* ---------- yan ray: odun kütükleri, aktif olan yanıyor ---------- */
.k-ray {
  right: 18px;
}

.k-ray ol {
  position: relative;
  gap: 12px;
  padding: 12px 10px;
  background: rgba(14, 13, 12, 0.85);
  border: 3px solid var(--kemik);
  box-shadow: 4px 4px 0 var(--kirmizi);
}

.k-ray a {
  position: relative;
  display: block;
  width: 36px;
  height: 18px;
  border: 3px solid var(--murekkep);
  border-radius: 9px;
  background: linear-gradient(#8a5a2e, #5c3a1e);
  box-shadow: 0 0 0 2px rgba(241, 236, 226, 0.35);
  transition: background 0.25s, box-shadow 0.25s, transform 0.25s;
}

.k-ray a::after {
  /* odunun kesik yüzü */
  content: "";
  position: absolute;
  right: 2px;
  top: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d9a35a;
  border: 2px solid #5c3a1e;
}

.k-ray a.aktif {
  background: linear-gradient(#ffb347, #ff6a1a);
  box-shadow: 0 0 0 2px var(--kemik), 0 0 16px 4px rgba(255, 138, 43, 0.7);
  transform: scale(1.14) rotate(-4deg);
}