:root {
  --kahve: #2a2412;
  --plastik-a: #ddd4b3;
  --plastik-b: #c6bc98;
  --murekkep: #1f2a1a;
}

* { box-sizing: border-box; margin: 0; -webkit-tap-highlight-color: transparent; }

html { height: 100%; background: var(--kahve); overflow: hidden; overscroll-behavior: none; }

body {
  height: 100%;
  overflow: hidden;
  display: grid;
  place-items: center;
  font-family: "Courier New", ui-monospace, Menlo, monospace;
  color: var(--kahve);
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-text-size-adjust: 100%;
  background-color: #b3a044;
  background-image:
    radial-gradient(ellipse 60% 45% at 50% 28%, rgba(255, 244, 160, .5), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='64'%3E%3Cpath d='M24 8l9 11-9 11-9-11z' fill='none' stroke='%236b5a1c' stroke-opacity='.4' stroke-width='1.6'/%3E%3Ccircle cx='24' cy='47' r='2.2' fill='%236b5a1c' fill-opacity='.35'/%3E%3C/svg%3E"),
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(60, 45, 0, .16) 46px 48px);
  background-size: auto, 48px 64px, auto;
  animation: kay 90s linear infinite;
}

/* ---------- VHS yazıları ---------- */
.vhs {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  font-size: clamp(11px, 2.3vmin, 20px);
  letter-spacing: .12em;
  color: #e9f6df;
  text-shadow: 0 0 .4em rgba(190, 255, 170, .7), .1em 0 rgba(255, 0, 0, .4);
}
.vhs span { position: absolute; }
.vk { left: 4vmin; top: 4vmin; }
.vt { right: 4vmin; top: 4vmin; }
.vs { left: 4vmin; bottom: 4vmin; }
.va { right: 4vmin; bottom: 4vmin; }

/* ---------- Makine ---------- */
.hesap {
  --w: min(92vw, 380px, calc((100vh - 3rem) / 1.62));
  font-size: calc(var(--w) / 22);
  width: var(--w);
  position: relative; z-index: 2;
  display: grid; gap: .9em;
  padding: 1.4em;
  border-radius: 1em;
  background: linear-gradient(160deg, var(--plastik-a), var(--plastik-b));
  /* gölge ışığa doğru düşer */
  box-shadow:
    inset 0 .15em 0 rgba(255, 255, 255, .55),
    inset 0 -.3em 0 rgba(0, 0, 0, .18),
    -1.6em -1.3em 2.6em rgba(25, 17, 0, .55),
    0 0 0 .12em rgba(60, 45, 10, .5);
  transition: filter 4s;
}

@supports (height: 100dvh) {
  .hesap { --w: min(92vw, 380px, calc((100dvh - 3rem) / 1.62)); }
}

.ust {
  display: flex; align-items: center; justify-content: space-between;
  height: 2.2em;
}
.ust span { font-size: .75em; font-weight: 700; letter-spacing: .2em; opacity: .65; }

/* ---------- Göz ---------- */
.goz {
  position: relative; width: 3.2em; height: 2em; overflow: hidden;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #f5efd8, #cfc6a6 80%);
  box-shadow: inset 0 0 .5em rgba(0, 0, 0, .5), 0 0 0 .15em #5d5339;
}
.bebek {
  position: absolute; left: 50%; top: 50%;
  width: 1.15em; height: 1.15em; margin: -.575em 0 0 -.575em;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 36%, #fff 0 7%, transparent 8%),
    radial-gradient(circle, #050403 0 30%, #7a3b1f 32% 62%, #2b120c 64%);
  transition: transform .15s ease-out;
}
.kapak {
  position: absolute; inset: 0;
  background: linear-gradient(#d8cfae, #c6bc98);
  transform: scaleY(0); transform-origin: top;
  animation: goz 8s infinite;
}

/* ---------- Ekran ---------- */
.ekran {
  min-height: 7em;
  padding: .5em .9em;
  display: flex; flex-direction: column; justify-content: space-between;
  text-align: right;
  color: var(--murekkep);
  border: .5em solid #6c6347;
  border-radius: .7em;
  background:
    repeating-linear-gradient(0deg, rgba(0, 30, 0, .06) 0 .12em, transparent .12em .24em),
    linear-gradient(#a6b791, #92a47e);
  box-shadow: inset 0 0 1.4em rgba(20, 40, 10, .55);
}
.gecmis { font-size: .85em; min-height: 1.2em; opacity: .7; white-space: nowrap; overflow: hidden; }
.sonuc {
  font-size: 2.6em; font-weight: 700; line-height: 1.15;
  white-space: nowrap; overflow: hidden;
  font-variant-numeric: tabular-nums;
  text-shadow: -.05em 0 rgba(196, 54, 31, .35), .05em 0 rgba(30, 120, 115, .3);
}
.durum {
  font-size: .75em; text-align: left; letter-spacing: .05em; min-height: 1.4em;
  padding-top: .35em; border-top: .1em dotted rgba(31, 42, 26, .4);
  opacity: .85;
}
.bozul { animation: bozul .35s steps(2); }

/* ---------- Tuşlar ---------- */
.tuslar { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6em; }

button {
  height: 2.95em; border: 0; border-radius: .5em;
  font: inherit; font-size: 1.15em; font-weight: 700;
  color: #3a3220; cursor: pointer;
  background: linear-gradient(#e6dec3, #cbc29f);
  box-shadow: 0 .2em 0 #81795a, 0 .3em .4em rgba(0, 0, 0, .35), inset 0 .1em 0 rgba(255, 255, 255, .7);
  transition: transform .06s, box-shadow .06s;
}
button:nth-child(5n+2) { rotate: .6deg; }
button:nth-child(7n+3) { rotate: -.7deg; }
button:nth-child(11n)  { rotate: .4deg; }
button:active { transform: translateY(.18em); box-shadow: 0 .02em 0 #81795a, inset 0 .1em .2em rgba(0, 0, 0, .25); }
button:focus-visible { outline: .2em solid #ffe28a; outline-offset: .1em; }
@media (hover: hover) { button:hover { filter: brightness(1.06); } }

button.ikincil { color: #5a4f33; background: linear-gradient(#cfc6a3, #b4aa86); }
button.islem {
  color: #fff0d8; background: linear-gradient(#d68a50, #b0612f);
  box-shadow: 0 .2em 0 #6e3a17, 0 .3em .4em rgba(0, 0, 0, .35), inset 0 .1em 0 rgba(255, 255, 255, .35);
}
button.islem.aktif {
  box-shadow: 0 .2em 0 #6e3a17, 0 .3em .4em rgba(0, 0, 0, .35), inset 0 0 0 .16em #ffe28a;
}
button.esittir {
  color: #ffe9d0; background: linear-gradient(#b2412a, #8a2616);
  box-shadow: 0 .2em 0 #4d1409, 0 .3em .4em rgba(0, 0, 0, .35), inset 0 .1em 0 rgba(255, 255, 255, .25);
}

/* ---------- Telefon yatay ---------- */
@media (orientation: landscape) and (max-height: 520px) {
  .hesap {
    --w: min(94vw, 780px, calc((100vh - 1rem) * 1.85));
    font-size: calc(var(--w) / 42);
    grid-template-columns: 1fr 1.25fr; gap: 1.4em; align-items: center;
  }
  .sol { display: grid; gap: .9em; }
}
@supports (height: 100dvh) {
  @media (orientation: landscape) and (max-height: 520px) {
    .hesap { --w: min(94vw, 780px, calc((100dvh - 1rem) * 1.85)); }
  }
}

/* ---------- Uyku: kimse yokken ---------- */
body.uyku .hesap { filter: brightness(.55) saturate(.7); }

/* ---------- Eski kamera katmanları ---------- */
html::after {
  content: ""; position: fixed; left: 0; right: 0; top: 0; height: 20vh;
  background: linear-gradient(transparent, rgba(255, 255, 230, .07), transparent);
  pointer-events: none; z-index: 9;
  animation: tara 7s linear infinite;
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 10;
  background:
    radial-gradient(ellipse at center, transparent 40%, rgba(12, 8, 0, .78) 100%),
    repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 0, 0, .17) 2px 4px);
  animation: isik 11s infinite;
}
body::after {
  content: ""; position: fixed; inset: -50px; pointer-events: none; z-index: 11;
  opacity: .13; mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: titre .5s steps(4) infinite;
}

@keyframes kay { to { background-position: 0 0, 48px 64px, 0 0; } }
@keyframes tara { from { transform: translateY(-25vh); } to { transform: translateY(120vh); } }
@keyframes titre {
  0% { transform: translate(0, 0); } 25% { transform: translate(-18px, 12px); }
  50% { transform: translate(14px, -20px); } 75% { transform: translate(-10px, -8px); }
  100% { transform: translate(0, 0); }
}
@keyframes isik {
  0%, 41%, 43%, 45%, 77%, 100% { opacity: 1; } 42% { opacity: .7; } 44% { opacity: .8; }
  78% { opacity: .6; } 80% { opacity: 1; }
}
@keyframes goz { 0%, 93%, 100% { transform: scaleY(0); } 95.5% { transform: scaleY(1); } }
@keyframes bozul {
  0% { transform: translateX(.08em) skewX(-6deg); filter: blur(.03em); }
  50% { transform: translateX(-.1em) skewX(5deg); }
  100% { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, html::after { animation: none !important; transition: none !important; }
}