/* =====================================================================
   mertkisla.com · STİL DOSYASI 🎨
   ---------------------------------------------------------------------
   Sitenin bütün renkleri, yazı tipleri ve görünüşü burada.
   Renkleri değiştirmek istersen hemen aşağıdaki :root bölümüne bak!
   ===================================================================== */

:root {
  --kagit: #FFF6E5;
  --murekkep: #1D1A2F;
  --soluk: #57516F;
  --beyaz: #FFFFFF;
  --sari: #FFD23F;
  --mavi: #4CC9F0;
  --kirmizi: #FF5D5D;
  --yesil: #3DDC97;
  --mor: #9B5DE5;
  --turuncu: #FF9F1C;
  --pembe: #FF8FC7;
  --ekran: #211D38;
  --parlak: #7CFFCB;
  --tukenmez: #2A4BB5;
  --robot-renk: #4CC9F0;

  --hacker: #7CFFB2;
  --hacker-koyu: #1FAF5A;
  --hacker-zemin: #04140A;

  --bant-mavi: #D6F2FF;
  --bant-sari: #FFE9A6;
  --bant-nane: #D2F5E3;
  --bant-koyu: #15132A;

  --golge: 6px 6px 0 var(--murekkep);
  --golge-k: 4px 4px 0 var(--murekkep);
  --golge-kk: 3px 3px 0 var(--murekkep);
  --yaricap: 22px;
  --ust-h: 68px;

  --f-baslik: "Baloo 2", "Nunito", system-ui, sans-serif;
  --f-govde: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-kod: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  --f-el: "Caveat", "Segoe Print", "Bradley Hand", cursive;
  --f-piksel: "Press Start 2P", "JetBrains Mono", monospace;
  --f-terminal: "VT323", "JetBrains Mono", monospace;

  --kareli: linear-gradient(rgba(29, 26, 47, .06) 1px, transparent 1px),
            linear-gradient(90deg, rgba(29, 26, 47, .06) 1px, transparent 1px);
}

/* ---------- Temel ---------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--ust-h) + 16px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html.surpriz-acik, html.surpriz-acik body { overflow: hidden; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--f-govde);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--murekkep);
  background-color: var(--kagit);
  background-image: var(--kareli);
  background-size: 28px 28px;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--f-baslik);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.01em;
}

button { font: inherit; color: inherit; }
button, a { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
canvas { display: block; }
::selection { background: var(--sari); color: var(--murekkep); }
:focus-visible { outline: 3px dashed var(--mor); outline-offset: 3px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.gorunmez {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.atla {
  position: absolute; left: 12px; top: -80px; z-index: 200;
  padding: 10px 16px;
  background: var(--sari);
  border: 3px solid var(--murekkep);
  border-radius: 12px;
  font-weight: 800;
  text-decoration: none;
}
.atla:focus { top: 12px; }

.kap { width: min(1160px, 100% - 32px); margin-inline: auto; }

/* ---------- Ortak parçalar ---------- */

.kart {
  background: var(--beyaz);
  border: 3px solid var(--murekkep);
  border-radius: var(--yaricap);
  box-shadow: var(--golge);
}

.dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 18px 8px;
  border: 3px solid var(--murekkep);
  border-radius: 14px;
  background: var(--sari);
  color: var(--murekkep);
  box-shadow: var(--golge-k);
  font: 800 1.05rem/1 var(--f-baslik);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background-color .15s;
}
.dugme:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--murekkep); }
.dugme:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--murekkep); }
.dugme:disabled { cursor: not-allowed; opacity: .5; transform: none; box-shadow: var(--golge-k); }
.dugme.beyaz { background: var(--beyaz); }
.dugme.mavi { background: var(--mavi); }
.dugme.yesil { background: var(--yesil); }
.dugme.buyuk { min-height: 56px; padding-inline: 24px; font-size: 1.25rem; letter-spacing: .02em; }
.dugme small { font: 700 .72rem/1 var(--f-govde); letter-spacing: 0; opacity: .75; }

.ikon {
  width: 1.25em; height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ikon-dolu { fill: currentColor; stroke-width: 1.2; }
.yon-asagi { transform: rotate(180deg); }
.yon-sol { transform: rotate(-90deg); }
.yon-sag { transform: rotate(90deg); }

.ciks {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px 16px 4px;
  border: 3px solid var(--murekkep);
  border-radius: 999px;
  background: var(--beyaz);
  box-shadow: var(--golge-kk);
  font: 800 1rem/1.3 var(--f-baslik);
  transform: rotate(-3deg);
}

kbd {
  display: inline-block;
  padding: 1px 7px;
  border: 2px solid #5A5480;
  border-bottom-width: 4px;
  border-radius: 7px;
  background: #2E2A48;
  color: #fff;
  font: 700 .85em/1.4 var(--f-kod);
}

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

.ust {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 246, 229, .9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 3px solid var(--murekkep);
}

.ust-ic {
  width: min(1160px, 100% - 32px);
  height: var(--ust-h);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 16px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font: 800 1.12rem/1 var(--f-kod);
  letter-spacing: -.02em;
  text-decoration: none;
  white-space: nowrap;
}
.logo-kod {
  display: inline-grid;
  place-items: center;
  height: 32px;
  padding: 0 7px;
  border-radius: 9px;
  background: var(--murekkep);
  color: var(--parlak);
  font-size: .9rem;
}
.logo-uzanti { color: var(--mor); }

.menu { display: flex; gap: 2px; margin-left: auto; }
.menu a {
  padding: 9px 12px 6px;
  border: 2.5px solid transparent;
  border-radius: 12px;
  font: 700 1.02rem/1 var(--f-baslik);
  text-decoration: none;
  transition: background-color .15s, border-color .15s;
}
.menu a:hover { background: var(--beyaz); border-color: var(--murekkep); }
.menu a.aktif { background: var(--sari); border-color: var(--murekkep); }

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

.ses-dugme {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  padding: 0;
  border: 3px solid var(--murekkep);
  border-radius: 12px;
  background: var(--beyaz);
  box-shadow: var(--golge-kk);
  cursor: pointer;
}
.ses-dugme .ikon { width: 22px; height: 22px; }
.ses-dugme[aria-pressed="true"] .ses-kapali,
.ses-dugme[aria-pressed="false"] .ses-acik { display: none; }
.ses-dugme[aria-pressed="false"] { background: #EFE8D8; }
.ses-dugme:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--murekkep); }

/* ---------- Giriş ---------- */

.giris {
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - var(--ust-h));
  min-height: calc(100svh - var(--ust-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 5vw, 56px) 0 26px;
}

.giris-izgara {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  grid-template-areas:
    "ust robot"
    "alt robot"
    "terminal robot";
  column-gap: clamp(24px, 5vw, 72px);
  align-items: center;
}
.giris-ust { grid-area: ust; }
.giris-alt { grid-area: alt; }
.giris-terminal { grid-area: terminal; align-self: start; }
.giris-robot { grid-area: robot; }

.giris-baslik {
  margin-top: 20px;
  font-size: clamp(2.7rem, 6.4vw, 5.3rem);
  line-height: .98;
  letter-spacing: -.015em;
}
.giris-baslik .satir { display: block; }

.renkli-ad { white-space: nowrap; }
.renkli-ad > span {
  display: inline-block;
  color: var(--r, var(--kirmizi));
  -webkit-text-stroke: .075em var(--murekkep);
  paint-order: stroke fill;
  text-shadow: .06em .07em 0 var(--murekkep);
  cursor: pointer;
  transition: transform .25s cubic-bezier(.3, 1.8, .5, 1);
  animation: harf-gir .8s cubic-bezier(.3, 1.6, .5, 1) backwards;
  animation-delay: calc(.25s + var(--i, 0) * .09s);
}
.renkli-ad > span:hover { transform: translateY(-.1em) rotate(-7deg) scale(1.06); }
.renkli-ad > span.hop { animation: harf-hop .5s cubic-bezier(.3, 1.8, .5, 1); }

@keyframes harf-gir { from { opacity: 0; transform: translateY(.5em) scale(.6) rotate(-12deg); } }
@keyframes harf-hop { 40% { transform: translateY(-.28em) scale(1.12) rotate(6deg); } }

.giris-alt {
  margin: 22px 0 26px;
  max-width: 36ch;
  font-size: clamp(1.1rem, 1.7vw, 1.28rem);
  line-height: 1.55;
  color: var(--soluk);
}
.giris-alt b { color: var(--murekkep); }

/* Terminal */
.terminal {
  max-width: 620px;
  overflow: hidden;
  background: var(--ekran);
  border: 3px solid var(--murekkep);
  border-radius: 18px;
  box-shadow: var(--golge);
  color: #ECE9FF;
  font-family: var(--f-kod);
  font-weight: 500;
}
.terminal-ust {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  background: #2F2A4E;
  border-bottom: 3px solid var(--murekkep);
}
.nokta { width: 13px; height: 13px; border-radius: 50%; border: 2px solid #120F22; }
.nokta-k { background: #FF6159; }
.nokta-s { background: #FFBD2E; }
.nokta-y { background: #29CA41; }
.terminal-ad { margin-left: 8px; font-size: .78rem; color: #A7A1CC; }

.terminal-govde {
  height: 200px;
  overflow-y: auto;
  padding: 12px 16px 14px;
  font-size: .92rem;
  line-height: 1.6;
  cursor: text;
  scrollbar-width: thin;
  scrollbar-color: #4A4470 transparent;
}
.ts { white-space: pre-wrap; overflow-wrap: anywhere; animation: ts-gir .25s ease-out backwards; }
.ts-komut::before { content: "mert@site:~$ "; color: var(--parlak); }
.ts-basari { color: var(--parlak); }
.ts-hata { color: #FF9C9C; }
.ts-sari { color: #FFE27A; }
.ts-mavi { color: #8EDBFF; }
.ts-soluk { color: #A7A1CC; }
@keyframes ts-gir { from { opacity: 0; transform: translateY(4px); } }

.terminal-satir { display: flex; align-items: baseline; gap: 1ch; margin: 0; }
.istem { color: var(--parlak); white-space: nowrap; }
#terminalGiris {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 16px;
  caret-color: var(--sari);
}
#terminalGiris::placeholder { color: #6F6992; }

.hizli-komutlar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.hizli-etiket { margin-right: 2px; font: 800 .98rem/1 var(--f-baslik); color: var(--soluk); }
.hizli-komutlar button {
  padding: 8px 12px;
  border: 2.5px solid var(--murekkep);
  border-radius: 10px;
  background: var(--beyaz);
  box-shadow: 2px 2px 0 var(--murekkep);
  font: 700 .88rem/1 var(--f-kod);
  cursor: pointer;
  transition: transform .12s, box-shadow .12s, background-color .12s;
}
.hizli-komutlar button:hover { background: var(--sari); transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--murekkep); }
.hizli-komutlar button:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--murekkep); }

/* Robot */
.giris-robot { display: flex; flex-direction: column; align-items: center; }

.balon-alan {
  width: 100%;
  min-height: 150px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 20px;
}
.balon {
  position: relative;
  max-width: 340px;
  margin: 0;
  padding: 12px 18px 10px;
  background: var(--beyaz);
  border: 3px solid var(--murekkep);
  border-radius: 22px;
  box-shadow: var(--golge-k);
  font: 700 1.06rem/1.35 var(--f-baslik);
  text-align: center;
}
.balon::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -13px;
  width: 20px; height: 20px;
  margin-left: -10px;
  background: var(--beyaz);
  border-right: 3px solid var(--murekkep);
  border-bottom: 3px solid var(--murekkep);
  border-bottom-right-radius: 4px;
  transform: rotate(45deg);
}
.balon-en { display: block; font-size: 1.18rem; }
.balon-tr { display: block; margin-top: 3px; font: 700 .9rem/1.3 var(--f-govde); color: var(--soluk); }
.balon.uzun { max-width: 360px; font-size: .95rem; }
.balon.pop { animation: balon-pop .4s cubic-bezier(.3, 1.7, .5, 1); }
@keyframes balon-pop { from { transform: scale(.82) translateY(10px); opacity: .3; } }

.robot-dugme {
  display: block;
  width: clamp(200px, 25vw, 310px);
  padding: 0;
  border: 0;
  border-radius: 30px;
  background: none;
  cursor: pointer;
}
.robot-suzul { display: block; animation: suzul 3.4s ease-in-out infinite; }
.robot-golge {
  display: block;
  width: clamp(110px, 13vw, 160px);
  height: 16px;
  margin-top: 2px;
  border-radius: 50%;
  background: rgba(29, 26, 47, .16);
  animation: golge 3.4s ease-in-out infinite;
}
@keyframes suzul { 50% { transform: translateY(-12px); } }
@keyframes golge { 50% { transform: scaleX(.82); opacity: .6; } }

/* Robotun parçaları (hem büyük hem küçük robot) */
.robot { display: block; width: 100%; height: auto; overflow: visible; }
.robot .r-kafa { fill: var(--robot-renk); stroke: var(--murekkep); stroke-width: 6; transition: fill .4s; }
.robot .r-ekran { fill: var(--ekran); }
.robot .r-kulak { fill: var(--sari); stroke: var(--murekkep); stroke-width: 5; }
.robot .r-anten-cubuk { stroke: var(--murekkep); stroke-width: 6; stroke-linecap: round; }
.robot .r-ampul { fill: var(--kirmizi); stroke: var(--murekkep); stroke-width: 5; animation: ampul 1.8s steps(1) infinite; }
.robot .r-govde { fill: var(--sari); stroke: var(--murekkep); stroke-width: 6; }
.robot .r-panel { fill: var(--beyaz); stroke: var(--murekkep); stroke-width: 4; }
.robot .r-panel-yazi { font: 800 17px var(--f-kod); fill: var(--murekkep); }
.robot .r-dugme { stroke: var(--murekkep); stroke-width: 3; }
.robot .r-d1 { fill: var(--kirmizi); }
.robot .r-d2 { fill: var(--yesil); }
.robot .r-d3 { fill: var(--mavi); }
.robot .r-boyun, .robot .r-bacak { fill: #A29EBB; stroke: var(--murekkep); stroke-width: 5; }
.robot .r-kol-dis { fill: none; stroke: var(--murekkep); stroke-width: 18; stroke-linecap: round; }
.robot .r-kol-ic { fill: none; stroke: var(--robot-renk); stroke-width: 8; stroke-linecap: round; transition: stroke .4s; }
.robot .r-el { fill: var(--sari); stroke: var(--murekkep); stroke-width: 5; }
.robot .r-omuz { fill: var(--robot-renk); stroke: var(--murekkep); stroke-width: 4.5; transition: fill .4s; }
.robot .r-yanak { fill: var(--pembe); opacity: .55; }
.robot .r-goz { fill: var(--parlak); }
.robot .r-cizgi, .robot .r-agiz { fill: none; stroke: var(--parlak); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.robot .r-agiz-dolu { fill: var(--parlak); stroke: var(--parlak); stroke-width: 2; stroke-linejoin: round; }
.robot .r-agiz-o { fill: none; stroke: var(--parlak); stroke-width: 4; }
.robot .r-kalp { fill: #FF77A8; }

.robot-mini .r-kafa { stroke-width: 5; }
.robot-mini .r-kulak, .robot-mini .r-ampul { stroke-width: 4; }
.robot-mini .r-anten-cubuk { stroke-width: 4.5; }
.robot-mini .r-cizgi, .robot-mini .r-agiz { stroke-width: 3.5; }
.robot-mini .r-agiz-o { stroke-width: 3; }

.robot .yuz { display: none; }
.robot[data-yuz="normal"] .yuz-normal,
.robot[data-yuz="mutlu"] .yuz-mutlu,
.robot[data-yuz="kalp"] .yuz-kalp,
.robot[data-yuz="sersem"] .yuz-sersem,
.robot[data-yuz="saskin"] .yuz-saskin { display: inline; }

.robot .yuz-normal .r-goz { transform-box: fill-box; transform-origin: center; animation: kirp 4.6s infinite; }
.robot .r-kol { transform-box: view-box; }
.robot .r-kol-sag { transform-origin: 158px 190px; }
.robot .r-kol-sol { transform-origin: 62px 190px; }

@keyframes ampul { 50% { fill: #FFB4B4; } }
@keyframes kirp { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }

/* Robot hareketleri */
.robot-dugme.zipla { animation: zipla .75s cubic-bezier(.3, .6, .4, 1); }
.robot-dugme.dans { animation: dans .5s ease-in-out 4 alternate; }
.robot-dugme.titre { animation: titre .55s linear; }
.robot-dugme.don { animation: don .95s cubic-bezier(.5, 0, .3, 1); }
.robot-dugme.el-salla .r-kol-sag { animation: salla 1.6s ease-in-out; }
.robot-dugme.dans .r-kol-sag { animation: salla-dans-sag .5s ease-in-out 4 alternate; }
.robot-dugme.dans .r-kol-sol { animation: salla-dans-sol .5s ease-in-out 4 alternate; }

@keyframes zipla {
  15% { transform: translateY(0) scale(1.08, .9); }
  45% { transform: translateY(-64px) scale(.95, 1.06); }
  72% { transform: translateY(0) scale(1.06, .94); }
  86% { transform: translateY(-8px); }
}
@keyframes dans { from { transform: rotate(-8deg); } to { transform: rotate(8deg) translateY(-12px); } }
@keyframes titre {
  10%, 90% { transform: translateX(-3px); }
  20%, 80% { transform: translateX(5px); }
  30%, 50%, 70% { transform: translateX(-8px); }
  40%, 60% { transform: translateX(8px); }
}
@keyframes don { to { transform: rotate(360deg); } }
@keyframes salla {
  0%, 100% { transform: rotate(0); }
  20%, 60% { transform: rotate(-125deg); }
  40%, 80% { transform: rotate(-95deg); }
}
@keyframes salla-dans-sag { from { transform: rotate(-20deg); } to { transform: rotate(-115deg); } }
@keyframes salla-dans-sol { from { transform: rotate(115deg); } to { transform: rotate(20deg); } }

/* Süslemeler */
.suslemeler { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.susleme {
  position: absolute;
  display: grid;
  place-items: center;
  min-width: 58px;
  height: 52px;
  padding: 0 12px;
  border: 3px solid var(--murekkep);
  border-radius: 14px;
  box-shadow: var(--golge-kk);
  font: 800 1.25rem/1 var(--f-kod);
  animation: yuzen 7s ease-in-out infinite;
}
.s1 { top: 10%; left: 2.4%; background: var(--sari); rotate: -9deg; }
.s2 { top: 13%; right: 2.6%; background: var(--mavi); rotate: 7deg; animation-delay: -2s; }
.s3 { bottom: 17%; left: 3%; background: var(--pembe); rotate: 6deg; animation-delay: -4s; }
.s4 { top: 50%; right: 1.8%; width: 54px; min-width: 0; padding: 0; border-radius: 50%; background: var(--mor); color: var(--beyaz); rotate: -6deg; animation-delay: -1s; }
.s5 { top: 43%; left: 1.6%; background: var(--turuncu); rotate: 10deg; animation-delay: -3s; }
.s6 { bottom: 12%; right: 4%; background: var(--yesil); rotate: -12deg; animation-delay: -5s; }
@keyframes yuzen { 50% { translate: 0 -14px; } }

.asagi-ok {
  position: relative;
  z-index: 1;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: clamp(28px, 4vw, 44px);
  font: 800 1rem/1 var(--f-baslik);
  color: var(--soluk);
  text-decoration: none;
}
.asagi-ok span {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border: 3px solid var(--murekkep);
  border-radius: 50%;
  background: var(--beyaz);
  color: var(--murekkep);
  animation: asagi 1.6s ease-in-out infinite;
}
@keyframes asagi { 50% { transform: translateY(6px); } }

/* ---------- Bölümler ---------- */

.bolum { position: relative; padding: clamp(64px, 9vw, 112px) 0; }
.bant {
  border-block: 3px solid var(--murekkep);
  background-image: var(--kareli);
  background-size: 28px 28px;
}
.bant-mavi { background-color: var(--bant-mavi); }
.bant-sari { background-color: var(--bant-sari); }
.bant-nane { background-color: var(--bant-nane); }

.bolum-baslik { max-width: 760px; margin-bottom: clamp(28px, 4vw, 44px); }
.bolum-baslik.ortali { margin-inline: auto; text-align: center; }
.ust-yazi { margin: 0 0 12px; font: 700 .92rem/1.2 var(--f-kod); color: var(--mor); }
.bolum-baslik h2 { font-size: clamp(2.3rem, 5.2vw, 3.6rem); }
.vurgu {
  padding: 0 .08em;
  background: linear-gradient(transparent 52%, var(--sari) 52% 86%, transparent 86%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.bant-sari .vurgu { background: linear-gradient(transparent 52%, var(--beyaz) 52% 86%, transparent 86%); }
.bolum-alt { max-width: 62ch; margin: 14px 0 0; font-size: clamp(1.05rem, 1.5vw, 1.18rem); color: var(--soluk); }
.bolum-baslik.ortali .bolum-alt { margin-inline: auto; }
.bolum-alt b { color: var(--murekkep); }

/* ---------- Kelime Yılanı bölümü (koyu bant + eski monitör) ---------- */

.bant-koyu {
  overflow: hidden;
  color: #EDEAFF;
  background-color: var(--bant-koyu);
  background-image: linear-gradient(rgba(124, 255, 178, .05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(124, 255, 178, .05) 1px, transparent 1px);
}
.bant-koyu .kap { position: relative; z-index: 1; }
.bant-koyu .ust-yazi { color: var(--hacker); }
.bant-koyu .bolum-alt { color: #C3BDE3; }
.bant-koyu .bolum-alt b { color: var(--hacker); }
.bant-koyu .vurgu { background: linear-gradient(transparent 52%, #1E8A4C 52% 86%, transparent 86%); }
.matris { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .3; pointer-events: none; }

.monitor {
  max-width: 1000px;
  margin: 0 auto;
  padding: clamp(10px, 2vw, 20px);
  background: #2B2745;
  border: 3px solid #000;
  border-radius: 30px;
  box-shadow: 8px 8px 0 #000, inset 0 2px 0 rgba(255, 255, 255, .1);
}
.monitor-ekran {
  position: relative;
  overflow: hidden;
  padding: clamp(14px, 2.6vw, 26px);
  background: radial-gradient(ellipse at 50% 40%, #0B2715 0%, var(--hacker-zemin) 78%);
  border: 3px solid #000;
  border-radius: 18px;
  box-shadow: inset 0 0 70px rgba(46, 255, 130, .12);
}
.monitor-ekran::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(rgba(0, 0, 0, .2) 0 1px, transparent 1px 3px);
  animation: ekran-titre 5s steps(1) infinite;
}
@keyframes ekran-titre { 0%, 96%, 100% { opacity: 1; } 97% { opacity: .75; } 98% { opacity: .95; } }
@keyframes yanip { 50% { opacity: 0; } }
@keyframes glitch {
  0% { transform: translate(0); clip-path: inset(0 0 0 0); }
  25% { transform: translate(-4px, 2px); clip-path: inset(10% 0 40% 0); }
  50% { transform: translate(4px, -2px); clip-path: inset(50% 0 10% 0); }
  75% { transform: translate(-2px, 0); clip-path: inset(0 0 0 0); }
}

/* ---------- Piksel Atölyesi ---------- */

.atolye-izgara {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.tuval-kart { padding: clamp(12px, 2vw, 20px); }
#tuval {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  background: var(--beyaz);
  border: 3px solid var(--murekkep);
  border-radius: 12px;
  image-rendering: pixelated;
  touch-action: none;
  cursor: crosshair;
}
.atolye-durum { min-height: 1.3em; margin: 12px 0 0; font: 700 .95rem/1.3 var(--f-govde); color: var(--soluk); text-align: center; }
.tuval-ust { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.secenek { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font: 800 1rem/1 var(--f-baslik); }
.kucuk-dugme {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 42px;
  min-height: 38px;
  padding: 6px 11px 4px;
  justify-content: center;
  background: var(--beyaz);
  border: 2.5px solid var(--murekkep);
  border-radius: 10px;
  font: 800 .95rem/1 var(--f-baslik);
  cursor: pointer;
}
.kucuk-dugme[aria-pressed="true"] { background: var(--sari); }
.kucuk-dugme .ikon { width: 18px; height: 18px; }
.renk-satiri { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 14px; }
.renk-satiri .renk-adi { margin: 0; }
.ozel-renk { display: inline-flex; align-items: center; gap: 8px; font: 800 .95rem/1 var(--f-baslik); cursor: pointer; }
.ozel-renk input { width: 46px; height: 38px; padding: 2px; background: var(--beyaz); border: 2.5px solid var(--murekkep); border-radius: 10px; cursor: pointer; }
.arac small { font: 700 .68rem/1 var(--f-kod); color: var(--mor); letter-spacing: .04em; }
.arac[aria-pressed="true"] small { color: var(--murekkep); }
.araclar { display: grid; gap: 20px; padding: clamp(18px, 2.4vw, 24px); }
.arac-grup h3 { margin-bottom: 10px; font-size: 1.2rem; }
.h3-en { color: var(--mor); }
.palet { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
.renk {
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  background: var(--r);
  border: 3px solid var(--murekkep);
  border-radius: 10px;
  cursor: pointer;
  transition: transform .12s;
}
.renk:hover { transform: translateY(-2px); }
.renk[aria-pressed="true"] { transform: scale(1.1); box-shadow: 0 0 0 3px var(--beyaz), 0 0 0 6px var(--murekkep); }
.renk-adi {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 0;
  font-size: 1rem;
  color: var(--soluk);
}
.renk-adi b { font: 800 1.35rem/1 var(--f-baslik); color: var(--murekkep); letter-spacing: .02em; }
.renk-adi i { width: 22px; height: 22px; border: 2.5px solid var(--murekkep); border-radius: 6px; background: var(--r); }
.arac-dugmeler { display: flex; flex-wrap: wrap; gap: 8px; }
.arac {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 8px 13px 6px;
  background: var(--beyaz);
  border: 3px solid var(--murekkep);
  border-radius: 12px;
  box-shadow: var(--golge-kk);
  font: 800 1rem/1 var(--f-baslik);
  cursor: pointer;
  transition: transform .12s, box-shadow .12s, background-color .15s;
}
.arac:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--murekkep); }
.arac:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--murekkep); }
.arac[aria-pressed="true"] { background: var(--sari); }
.arac-ayna[aria-pressed="true"] { background: var(--mor); color: var(--beyaz); }
.atolye-dugmeler {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 20px;
  border-top: 3px dashed rgba(29, 26, 47, .18);
}

/* ---------- Seviye haritası ---------- */

.harita-kart { overflow: hidden; padding: clamp(10px, 2vw, 18px); }
.harita { position: relative; width: 100%; min-height: 320px; }
.harita .yol { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.yol-golge { fill: none; stroke: var(--murekkep); stroke-width: 16; stroke-linecap: round; stroke-linejoin: round; opacity: .08; }
.yol-kesik { fill: none; stroke: var(--murekkep); stroke-width: 4.5; stroke-linecap: round; stroke-dasharray: .1 16; opacity: .45; }
.yol-dolu-dis { fill: none; stroke: var(--murekkep); stroke-width: 15; stroke-linecap: round; stroke-linejoin: round; }
.yol-dolu-ic { fill: none; stroke: var(--sari); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }

.dugum {
  position: absolute;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 64px; height: 64px;
  margin: -32px 0 0 -32px;
  padding: 0;
  background: var(--beyaz);
  border: 3px solid var(--murekkep);
  border-radius: 50%;
  box-shadow: var(--golge-kk);
  font: 800 1.45rem/1 var(--f-baslik);
  cursor: pointer;
  transition: transform .18s cubic-bezier(.3, 1.8, .5, 1);
}
.dugum:hover { transform: scale(1.08); }
.dugum.gecmis { background: var(--yesil); }
.dugum.simdi {
  width: 80px; height: 80px;
  margin: -40px 0 0 -40px;
  background: var(--sari);
  box-shadow: var(--golge-k);
  font-size: 1.9rem;
}
.dugum.simdi::before {
  content: "";
  position: absolute;
  inset: -12px;
  border: 3px solid var(--murekkep);
  border-radius: 50%;
  opacity: 0;
  animation: halka 2s ease-out infinite;
}
.dugum.gelecek { background: #FBF8F0; border-style: dashed; color: rgba(29, 26, 47, .45); box-shadow: none; }
.dugum.kapsul {
  width: 88px; height: 88px;
  margin: -44px 0 0 -44px;
  background: #FFE1B0;
  border-radius: 26px;
  box-shadow: var(--golge-k);
}
.dugum.kapsul svg { width: 62px; height: 54px; overflow: visible; }
.dugum.kapsul.kilitli svg { animation: sandik-salla 3.2s ease-in-out infinite; }
.dugum.secili { outline: 3px dashed var(--mor); outline-offset: 6px; }
.dugum-tik {
  position: absolute;
  right: -7px; bottom: -7px;
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  background: var(--beyaz);
  border: 2.5px solid var(--murekkep);
  border-radius: 50%;
  font-size: .8rem;
}
.dugum-etiket {
  position: absolute;
  z-index: 1;
  width: 122px;
  margin: 0;
  font: 800 1rem/1.15 var(--f-baslik);
  text-align: center;
  pointer-events: none;
}
.dugum-etiket small { display: block; margin-bottom: 2px; font: 700 .72rem/1.3 var(--f-kod); letter-spacing: .03em; color: var(--soluk); }
.dugum-etiket.yan { width: auto; text-align: left; }
.dugum-etiket.yan.sola { text-align: right; }
.dugum-etiket.soluk { color: rgba(29, 26, 47, .45); }
.harita-robot {
  position: absolute;
  z-index: 2;
  width: 52px; height: 52px;
  margin-left: -26px;
  pointer-events: none;
  animation: suzul 2.4s ease-in-out infinite;
}
.harita-robot svg { width: 100%; height: 100%; }
@keyframes halka { from { transform: scale(.8); opacity: .7; } to { transform: scale(1.35); opacity: 0; } }
@keyframes sandik-salla {
  0%, 78%, 100% { transform: rotate(0); }
  82% { transform: rotate(-9deg); }
  86% { transform: rotate(8deg); }
  90% { transform: rotate(-6deg); }
  94% { transform: rotate(3deg); }
}

.harita-detay {
  margin-top: 12px;
  padding: 18px 20px;
  background: #FBF8F0;
  border: 2.5px dashed rgba(29, 26, 47, .25);
  border-radius: 16px;
}
.harita-detay.yeni { animation: detay-gir .35s ease-out; }
@keyframes detay-gir { from { opacity: 0; transform: translateY(8px); } }
.detay-ust {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 4px;
  font: 700 .82rem/1.3 var(--f-kod);
  color: var(--mor);
}
.detay-ust .ikon { width: 16px; height: 16px; }
.harita-detay h3 { margin-bottom: 6px; font-size: 1.5rem; }
.harita-detay p { margin: 0; }
.harita-detay p + p { margin-top: 8px; }
.geri-sayim { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 14px 0 10px; }
.geri-sayim b { font: 800 clamp(2rem, 5vw, 2.8rem)/1 var(--f-kod); }
.geri-sayim span { color: var(--soluk); font-weight: 700; }
.kapsul-mesaj {
  margin-top: 14px;
  padding: 20px 22px;
  background: #FFFDF7;
  border: 3px solid var(--murekkep);
  border-radius: 14px;
  box-shadow: var(--golge-k);
  font: 600 1.55rem/1.35 var(--f-el);
  color: #26304D;
}
.kapsul-mesaj p + p { margin-top: 12px; }

/* ---------- Mektup ---------- */

.zarf-sahne {
  display: grid;
  justify-items: center;
  gap: 22px;
  padding-top: 24px;
  transition: padding-top .7s cubic-bezier(.3, 1.2, .5, 1);
}
/* Zarf açılınca kapağı yukarı döner; başlığa çarpmasın diye zarf biraz aşağı iner */
.zarf-sahne.acik { padding-top: calc(min(500px, 100vw - 28px) * .39); }
.zarf {
  position: relative;
  display: block;
  width: min(500px, 100%);
  aspect-ratio: 16 / 10;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  perspective: 1000px;
}
.zarf:not(.acik) { animation: zarf-salla 3.6s ease-in-out infinite; }
.zarf-arka {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #F07AA6;
  border: 3px solid var(--murekkep);
  border-radius: 14px;
  box-shadow: var(--golge);
}
.zarf-kagit {
  position: absolute;
  z-index: 2;
  left: 7%; right: 7%; top: 7%; bottom: 8%;
  background: #FFFDF7 repeating-linear-gradient(transparent 0 16px, #DDE7FF 16px 18px);
  border: 3px solid var(--murekkep);
  border-radius: 8px;
  transition: transform .7s cubic-bezier(.3, 1.3, .5, 1) .75s;
}
.zarf-on { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; overflow: visible; }
.zarf-on-yuz { fill: #FFB1CD; stroke: var(--murekkep); stroke-width: 3; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.zarf-on-cizgi { fill: none; stroke: var(--murekkep); stroke-width: 2.5; stroke-linecap: round; opacity: .28; vector-effect: non-scaling-stroke; }
.zarf-kapak {
  position: absolute;
  z-index: 4;
  top: 0; left: 0; right: 0;
  height: 62%;
  transform-origin: 50% 0;
  transition: transform .6s cubic-bezier(.5, 0, .3, 1) .2s, z-index 0s .5s;
}
.zarf-kapak svg { display: block; width: 100%; height: 100%; overflow: visible; }
.zarf-kapak path { fill: #FFC7DB; stroke: var(--murekkep); stroke-width: 3; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.zarf-muhur {
  position: absolute;
  z-index: 5;
  left: 50%; top: 62%;
  display: grid;
  place-items: center;
  width: 60px; height: 60px;
  padding-top: 4px;
  background: var(--kirmizi);
  border: 3px solid var(--murekkep);
  border-radius: 50%;
  box-shadow: 3px 3px 0 var(--murekkep);
  color: var(--beyaz);
  font: 800 1.8rem/1 var(--f-baslik);
  transform: translate(-50%, -50%);
  transition: transform .3s cubic-bezier(.3, 1.8, .5, 1), opacity .3s;
}
.zarf:hover .zarf-muhur { transform: translate(-50%, -50%) scale(1.08) rotate(-8deg); }
.zarf-kime {
  position: absolute;
  z-index: 5;
  right: 9%; bottom: 9%;
  font: 700 clamp(1.5rem, 4vw, 2.1rem)/1 var(--f-el);
  rotate: -6deg;
}
.zarf.acik .zarf-muhur { transform: translate(-50%, -50%) scale(0) rotate(90deg); opacity: 0; }
.zarf.acik .zarf-kapak { transform: rotateX(180deg); z-index: 1; }
.zarf.acik .zarf-kagit { transform: translateY(-34%); }
.zarf-ipucu { margin: 0; font: 800 1.05rem/1 var(--f-baslik); color: var(--soluk); }
@keyframes zarf-salla {
  0%, 84%, 100% { transform: rotate(0); }
  88% { transform: rotate(-3deg); }
  92% { transform: rotate(3deg); }
  96% { transform: rotate(-1.5deg); }
}

.mektup-kagit {
  position: relative;
  max-width: 740px;
  margin: 44px auto 0;
  padding: clamp(28px, 5vw, 58px);
  background: #FFFDF7;
  border: 3px solid var(--murekkep);
  border-radius: 14px;
  box-shadow: var(--golge);
  color: #26304D;
}
.mektup-kagit.ac { transform-origin: 50% 0; animation: katla-ac .9s cubic-bezier(.2, .8, .2, 1) backwards; }
@keyframes katla-ac { from { opacity: 0; transform: perspective(1000px) rotateX(-65deg) translateY(-24px); } }
.mektup-tarih { margin: 0 0 18px; font: 700 1.4rem/1 var(--f-el); color: var(--soluk); text-align: right; }
.mektup-hitap { margin: 0 0 14px; font: 700 clamp(2.1rem, 4vw, 2.6rem)/1.1 var(--f-el); color: var(--tukenmez); }
.mektup-metin p { margin: 0 0 16px; font: 500 clamp(1.45rem, 2.6vw, 1.72rem)/1.4 var(--f-el); }
.mektup-liste { margin: 0 0 18px; padding: 0; list-style: none; }
.mektup-liste li { position: relative; margin: 0 0 8px; padding-left: 1.5em; font: 500 clamp(1.45rem, 2.6vw, 1.72rem)/1.3 var(--f-el); }
.mektup-liste li::before { content: "★"; position: absolute; left: .1em; top: .02em; color: var(--turuncu); }
.mektup-imza { margin: 28px 0 0; font: 700 clamp(1.8rem, 3vw, 2.2rem)/1.1 var(--f-el); color: var(--tukenmez); text-align: right; }

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

.alt {
  padding: clamp(56px, 8vw, 88px) 0 40px;
  background: var(--murekkep);
  color: #F5F0E6;
  text-align: center;
}
.alt-buyuk { margin: 0; font: 800 clamp(1.9rem, 4.4vw, 2.8rem)/1.15 var(--f-baslik); }
.alt .kalp { display: inline-block; color: var(--kirmizi); animation: kalp-at 1.3s ease-in-out infinite; }
.alt-kucuk { margin: 10px 0 0; color: #BDB6D9; }
.alt-kucuk b { color: var(--sari); }
.alt-sayilar { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 32px 0 26px; padding: 0; list-style: none; }
.alt-sayilar li { min-width: 160px; padding: 14px 18px; background: #26223D; border: 3px solid #3D3760; border-radius: 16px; }
.alt-sayilar b { display: block; font: 800 2rem/1.15 var(--f-kod); color: var(--parlak); }
.alt-sayilar b.sonsuz { font-family: var(--f-govde); font-size: 3rem; line-height: .75; }
.alt-sayilar span { font-size: .92rem; color: #BDB6D9; }
.alt-dugmeler { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-bottom: 28px; }
.alt-dugmeler .dugme { box-shadow: 4px 4px 0 #000; }
.alt-dugmeler .dugme:hover { box-shadow: 6px 6px 0 #000; }
.alt-ipucu { max-width: 640px; margin: 0 auto; font-size: .98rem; line-height: 1.9; color: #BDB6D9; }
.alt-telif { margin: 28px 0 0; font: 700 .85rem/1 var(--f-kod); color: #8C85AE; }
@keyframes kalp-at { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.25); } 30% { transform: scale(1); } 45% { transform: scale(1.15); } }

/* ---------- Giriş: zarf → konfeti → mektup → site ---------- */

.acilis {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  padding: 28px 16px;
  overflow-y: auto;
  background-color: var(--kagit);
  background-image: var(--kareli);
  background-size: 28px 28px;
}
.acilis:focus, .acilis-mektup:focus { outline: none; }
.acilis-yagmur { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.acilis-ic { position: relative; z-index: 1; width: min(740px, 100%); margin: auto; text-align: center; }
.acilis-baslik { margin: 0; font: 800 clamp(2rem, 6vw, 3.2rem)/1.1 var(--f-baslik); }
.acilis .mektup-kagit { margin: 0 auto; text-align: left; }
.acilis-git { margin-top: 26px; padding: 16px 30px; font-size: 1.35rem; }
.acilis.kapaniyor { animation: acilis-kapan .6s ease-in forwards; }
@keyframes acilis-kapan { to { opacity: 0; transform: scale(1.04); } }

/* ---------- Şifreli pasta oyunu ---------- */

.surpriz {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 58px 16px 18px;
  overflow-y: auto;
  background: radial-gradient(ellipse at 50% 45%, #06200F 0%, #020805 70%);
  color: #45F07F;
  font-family: var(--f-terminal);
  text-shadow: 0 0 8px rgba(69, 240, 127, .5);
}
.surpriz::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(rgba(0, 0, 0, .28) 0 1px, transparent 1px 3px);
  animation: ekran-titre 4s steps(1) infinite;
}
.surpriz.kapaniyor { animation: surpriz-kapan .8s ease-in forwards; }
@keyframes surpriz-kapan { to { opacity: 0; transform: scale(1.1); filter: blur(6px) brightness(2); } }

.surpriz-atla {
  position: fixed;
  top: 14px; right: 16px;
  z-index: 2;
  padding: 4px 12px 2px;
  background: transparent;
  border: 2px solid rgba(69, 240, 127, .45);
  border-radius: 8px;
  color: rgba(69, 240, 127, .75);
  font: 400 1.3rem/1.2 var(--f-terminal);
  cursor: pointer;
}
.surpriz-atla:hover { color: #45F07F; border-color: #45F07F; }
.surpriz-ic {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(760px, 100%);
  max-height: 100%;
}
.surpriz-ic > * { flex: none; }

/* Eski satırlar gerçek bir terminaldeki gibi yukarı kayıp gizlenir; tuş takımı hep ekranda kalır */
.surpriz-ic > .surpriz-log {
  flex: 0 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  font-size: clamp(1.2rem, 3.2vw, 1.65rem);
  line-height: 1.25;
}
.s-satir { margin-bottom: 5px; }
.s-satir .tr { display: block; padding-left: 2ch; font-size: .78em; color: rgba(69, 240, 127, .55); }
.s-satir.sari { color: #FFE27A; text-shadow: 0 0 8px rgba(255, 226, 122, .45); }
.s-satir.kirmizi { color: #FF7070; text-shadow: 0 0 8px rgba(255, 112, 112, .45); }
.s-satir.yanip .en::after { content: "█"; animation: yanip 1s steps(1) infinite; }

.surpriz-sifre { margin-top: 18px; text-align: center; }
.s-kutular { display: flex; justify-content: center; gap: 12px; margin-bottom: 22px; }
.s-kutu {
  display: grid;
  place-items: center;
  width: clamp(54px, 13vw, 70px);
  height: clamp(64px, 15vw, 82px);
  background: rgba(69, 240, 127, .06);
  border: 3px solid #45F07F;
  border-radius: 12px;
  color: #D6FFE3;
  font: 400 clamp(1.4rem, 5vw, 2rem)/1 var(--f-piksel);
}
.s-kutu.imlec::after { content: "_"; animation: yanip 1s steps(1) infinite; }
.s-kutular.yanlis .s-kutu { border-color: #FF7070; color: #FF7070; animation: titre .45s; }
.s-kutular.dogru .s-kutu { background: #45F07F; color: #02140A; text-shadow: none; }
.s-tuslar { display: grid; grid-template-columns: repeat(3, clamp(64px, 18vw, 84px)); justify-content: center; gap: 12px; }
.s-tus {
  height: clamp(56px, 14vw, 66px);
  padding: 0;
  background: #06170D;
  border: 3px solid #45F07F;
  border-radius: 12px;
  box-shadow: 0 5px 0 #1C8A45;
  color: #45F07F;
  font: 400 clamp(1.1rem, 4vw, 1.45rem)/1 var(--f-piksel);
  text-shadow: inherit;
  cursor: pointer;
}
.s-tus:hover { background: #0C2D18; }
.s-tus:focus-visible, .s-hediye:focus-visible, .surpriz-atla:focus-visible { outline: 3px dashed #FFE27A; outline-offset: 4px; }
.s-tus:active { transform: translateY(4px); box-shadow: 0 1px 0 #1C8A45; }
.s-ipucu { min-height: 1.4em; margin: 20px 0 0; font-size: clamp(1.3rem, 3.6vw, 1.6rem); color: #FFE27A; text-shadow: 0 0 8px rgba(255, 226, 122, .4); }

.s-flas {
  margin: 30px 0 0;
  font: 400 clamp(1.3rem, 5vw, 2.6rem)/1.5 var(--f-piksel);
  text-align: center;
  color: #45F07F;
  text-shadow: 4px 0 #FF5D5D, -4px 0 #4CC9F0, 0 0 20px rgba(69, 240, 127, .7);
  animation: glitch .45s steps(2) 3;
}
.s-flas small { display: block; margin-top: 10px; font: 400 clamp(1.2rem, 3.4vw, 1.6rem)/1.3 var(--f-terminal); text-shadow: 0 0 8px rgba(69, 240, 127, .5); }
.s-bar { height: 22px; margin: 20px auto 0; max-width: 520px; padding: 3px; border: 3px solid #45F07F; border-radius: 6px; }
.s-bar i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, #45F07F 0 12px, transparent 12px 16px); transition: width 1.3s steps(16); }

.surpriz-sahne { text-align: center; animation: ts-gir .6s ease-out backwards; }
.s-buyuk { margin: 0; font: 400 clamp(1.1rem, min(5.2vw, 4.6vh), 2.7rem)/1.45 var(--f-piksel); text-shadow: none; }
.s-buyuk > span > span { display: inline-block; animation: harf-dans 1.2s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .07s); text-shadow: 0 0 14px currentColor; }
@keyframes harf-dans { 50% { transform: translateY(-6px); } }
.s-tr { margin: 4px 0 8px; font-size: clamp(1.4rem, min(4.6vw, 4vh), 2.2rem); color: #fff; text-shadow: 0 0 10px rgba(255, 255, 255, .4); }
.pasta-kutu { width: min(430px, 88vw, 46vh); margin: 0 auto; }
.pasta-kutu svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 0 18px rgba(255, 143, 199, .25)); }
.mum { cursor: pointer; outline: none; }
.mum:focus-visible .mum-cubuk { outline: 1px solid #fff; }
.alev {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 0 3px rgba(255, 190, 60, .95)) drop-shadow(0 0 8px rgba(255, 140, 30, .6));
  animation: alev .45s ease-in-out infinite alternate;
}
.mum:nth-child(3n) .alev { animation-delay: -.2s; }
.mum:nth-child(3n + 1) .alev { animation-delay: -.35s; }
.mum.sondu .alev { display: none; }
.duman { opacity: 0; transform-box: fill-box; }
.mum.sondu .duman { animation: duman 1.4s ease-out forwards; }
@keyframes alev { from { transform: scaleY(1) translateY(0); } to { transform: scaleY(.78) translateY(.1px); } }
@keyframes duman { 0% { opacity: .9; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-3px); } }
.s-yonerge { margin: 14px 0 0; font-size: clamp(1.35rem, 3.8vw, 1.7rem); line-height: 1.25; color: #FFE27A; text-shadow: 0 0 8px rgba(255, 226, 122, .4); }
.s-yonerge span { display: block; font-size: .8em; color: rgba(255, 255, 255, .6); text-shadow: none; }
.s-hediye {
  margin-top: 22px;
  padding: 18px 26px 16px;
  background: var(--kirmizi);
  border: 4px solid #fff;
  border-radius: 18px;
  box-shadow: 0 7px 0 #8C1D1D, 0 0 30px rgba(255, 93, 93, .5);
  color: #fff;
  font: 400 clamp(1rem, 3.4vw, 1.35rem)/1.4 var(--f-piksel);
  text-shadow: none;
  cursor: pointer;
  animation: hediye-nabiz 1.2s ease-in-out infinite;
}
.s-hediye small { display: block; margin-top: 8px; font: 400 clamp(1.3rem, 4vw, 1.6rem)/1 var(--f-terminal); opacity: .9; }
.s-hediye:active { transform: translateY(5px); box-shadow: 0 2px 0 #8C1D1D; }
@keyframes hediye-nabiz { 50% { transform: scale(1.05); } }

/* ---------- Bildirimler ve konfeti ---------- */

.tostlar {
  position: fixed;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 120;
  display: grid;
  gap: 10px;
  width: min(400px, calc(100% - 28px));
  transform: translateX(-50%);
  pointer-events: none;
}
.tost {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px 12px 12px;
  background: var(--beyaz);
  border: 3px solid var(--murekkep);
  border-radius: 18px;
  box-shadow: var(--golge-k);
  animation: tost-gir .5s cubic-bezier(.3, 1.5, .5, 1) backwards;
}
.tost.cikis { animation: tost-cik .35s ease-in forwards; }
.tost-ikon {
  display: grid;
  place-items: center;
  flex: none;
  width: 50px; height: 50px;
  background: var(--sari);
  border: 3px solid var(--murekkep);
  border-radius: 14px;
  font-size: 1.6rem;
  line-height: 1;
}
.tost b { display: block; font: 800 1.08rem/1.2 var(--f-baslik); }
.tost-metin { display: block; font-size: .92rem; line-height: 1.35; color: var(--soluk); }
@keyframes tost-gir { from { opacity: 0; transform: translateY(30px) scale(.9); } }
@keyframes tost-cik { to { opacity: 0; transform: translateY(20px) scale(.95); } }

.konfeti { position: fixed; inset: 0; z-index: 400; width: 100%; height: 100%; pointer-events: none; }

/* Gizli kod bulununca her şey renk renk olur 🌈 */
body.disko main, body.disko .alt { animation: disko 1.1s linear infinite; }
@keyframes disko { to { filter: hue-rotate(360deg); } }

/* Kaydırdıkça beliren parçalar */
.js .belir { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
.js .belir.gorundu { opacity: 1; transform: none; }

/* ---------- Farklı ekran boyları ---------- */

@media (max-width: 1400px) {
  .susleme { display: none; }
}

@media (max-width: 980px) {
  .atolye-izgara { grid-template-columns: minmax(0, 1fr); }
  .tuval-kart { width: 100%; max-width: 560px; margin-inline: auto; }
}

@media (max-width: 860px) {
  .menu { display: none; }
  .ust-sag { margin-left: auto; }
  .giris { min-height: 0; }
  .giris-izgara {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "ust" "robot" "alt" "terminal";
  }
  .giris-robot { margin-top: 8px; }
  .balon-alan { min-height: 118px; padding-top: 12px; }
  .giris-alt { max-width: none; }
}

@media (max-width: 560px) {
  :root { --ust-h: 60px; --yaricap: 18px; }
  body { font-size: 1rem; }
  .kap, .ust-ic { width: min(1160px, 100% - 28px); }
  .logo { gap: 7px; font-size: .98rem; }
  .logo-kod { height: 28px; font-size: .8rem; }
  .ses-dugme { width: 38px; height: 38px; }
  .terminal-govde { height: 180px; font-size: .84rem; padding: 10px 12px; }
  .monitor { border-radius: 22px; }
  .monitor-ekran { border-radius: 14px; }
  .monitor-ekran { padding: 12px; }
  .palet { gap: 6px; }
  .renk { border-width: 2.5px; border-radius: 8px; }
  .dugum { width: 56px; height: 56px; margin: -28px 0 0 -28px; font-size: 1.3rem; }
  .dugum.simdi { width: 68px; height: 68px; margin: -34px 0 0 -34px; font-size: 1.6rem; }
  .dugum.kapsul { width: 74px; height: 74px; margin: -37px 0 0 -37px; border-radius: 22px; }
  .dugum.kapsul svg { width: 52px; height: 46px; }
  .zarf-muhur { width: 50px; height: 50px; font-size: 1.5rem; }
  .alt-sayilar li { min-width: 0; flex: 1 1 140px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
  }
  .js .belir { opacity: 1; transform: none; }
}