/* FELAKET SENARYOLARI MÜDÜRLÜĞÜ — the series palette: pea-green walls, mustard, teak, carbon paper, rubber-stamp red */
:root {
  --wall: #7d8a62; --wall-d: #5f6b49; --wall-l: #98a47a;
  --floor: #6b5a44; --floor-d: #4c3f30;
  --teak: #7a4e2d; --teak-d: #55341c; --teak-l: #9b6a3f;
  --steel: #7f8c86; --steel-d: #58645f; --steel-l: #a3ada7;
  --paper: #efe6cf; --paper-s: #d6caa8; --manila: #d9b56c; --manila-d: #b8924c;
  --ink: #1f1b16; --ink-s: #3b342b;
  --red: #b8322a; --red-hot: #ff3b26; --red-d: #7a1d17;
  --mustard: #c99a2e; --brass: #b48a3e; --brass-l: #d8b15f;
  --crt: #203a2a; --phos: #8cf29a;
  --night: #0b1220; --warm: #f2c879;
  --sign: 'Oswald', 'Arial Narrow', sans-serif; --type: 'Special Elite', 'Courier New', monospace;
  --mono: 'IBM Plex Mono', ui-monospace, monospace; --crtf: 'VT323', monospace; --plate: 'Archivo Narrow', 'Arial Narrow', sans-serif;
  --gut: 16px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body { margin: 0; background: var(--night); color: var(--ink); font-family: var(--mono); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
.grain { position: fixed; inset: 0; pointer-events: none; z-index: 50; opacity: .07; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1.2s steps(6) infinite; }
@keyframes grain { 0%{background-position:0 0} 20%{background-position:-37px 21px} 40%{background-position:23px -41px} 60%{background-position:-19px -13px} 80%{background-position:41px 33px} 100%{background-position:0 0} }

/* ── plates (brass name plates, series look) ── */
.plate { color: var(--ink); display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 22px 8px; background: linear-gradient(180deg, var(--brass-l), var(--brass));
  border: 4px solid var(--ink); border-radius: 6px; box-shadow: 0 4px 0 rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.25); text-align: center; }
.plate b { font-family: var(--plate); font-weight: 700; letter-spacing: .06em; font-size: clamp(18px, 4.6vw, 30px); line-height: 1.05; }
.plate small { font-family: var(--plate); font-weight: 600; letter-spacing: .14em; font-size: clamp(10px, 2.6vw, 13px); opacity: .85; }
.plate.big b { font-size: clamp(20px, 5.4vw, 40px); }

/* ── sound switch ── */
.sound { position: fixed; top: 12px; right: 12px; z-index: 60; display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; background: var(--steel-l);
  border: 3px solid var(--ink); border-radius: 8px; box-shadow: 0 3px 0 rgba(0,0,0,.4); }
.sound .lever { width: 18px; height: 30px; border-radius: 4px; background: var(--steel-d); border: 2px solid var(--ink); position: relative; }
.sound .lever::after { content: ''; position: absolute; left: 2px; right: 2px; height: 12px; bottom: 2px; border-radius: 3px; background: #555; border: 2px solid var(--ink); transition: .15s; }
.sound[aria-pressed="true"] .lever::after { bottom: 12px; background: var(--red-hot); }
.sound .lbl { font-family: var(--sign); font-weight: 700; font-size: 14px; letter-spacing: .1em; }

/* ════════ 1 · FACADE ════════ */
.facade { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; color: #f3ecd8; padding: 64px 0 40px; background: #0c1424; }
.hero-top { position: relative; z-index: 3; text-align: center; padding: 0 var(--gut); }
.city { position: absolute; left: 0; top: 0; width: 100%; height: 100svh; }
.building { position: relative; z-index: 2; width: min(460px, 74vw); margin-top: 22px; display: flex; flex-direction: column; align-items: center; }
.antenna { width: 6px; height: 80px; background: #2a2a26; position: relative; }
.antenna::before, .antenna::after { content: ''; position: absolute; left: -16px; width: 38px; height: 4px; background: #2a2a26; }
.antenna::before { top: 24px; } .antenna::after { top: 46px; left: -11px; width: 28px; }
.redlight { position: absolute; top: -8px; left: -4px; width: 14px; height: 14px; border-radius: 50%; background: var(--red-hot); box-shadow: 0 0 18px 6px rgba(255,59,38,.45); animation: blink 1.6s steps(2) infinite; }
@keyframes blink { 50% { opacity: .2; box-shadow: none; } }
.roof { width: 106%; max-width: calc(100vw - 8px); height: 22px; background: #5c5a4e; border: 4px solid var(--ink); }
.wall { width: 100%; background: #4f4e44; border: 5px solid var(--ink); border-top: 0; padding: 18px 16px 0; display: flex; flex-direction: column; align-items: center;
  background-image: repeating-linear-gradient(180deg, transparent 0 58px, #45443b 58px 61px); }
.windows { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(8px, 2.6vw, 14px); width: 100%; margin: 18px 0 16px; }
.win { position: relative; aspect-ratio: 110 / 140; border: 5px solid #15130f; background: #1b1f28; overflow: hidden; cursor: pointer; transition: transform .15s; }
.win:hover { transform: translateY(-2px); }
.win::after { content: ''; position: absolute; left: -6px; right: -6px; bottom: -14px; height: 10px; background: #6b6a5c; border: 3px solid var(--ink); }
.win.lit { background: #e9b867; box-shadow: 0 0 28px rgba(242,200,121,.25); }
.win.lit::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 10%, rgba(255,243,201,.45), transparent 60%); z-index: 1; }
.win.blue { background: #3b4a6e; } .win.amber { background: #a8442a; }
.win img { position: absolute; left: 50%; bottom: -46%; width: 150%; transform: translateX(-50%); }
.win .mull { position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; background: #15130f; opacity: .6; z-index: 2; }
.win.off img { opacity: 0; } .win.off { background: #1b1f28; box-shadow: none; }
.door { position: relative; display: flex; align-items: center; justify-content: center; width: clamp(80px, 22vw, 118px); height: clamp(84px, 22vw, 120px); margin-top: 6px; background: #2a1d14; border: 5px solid var(--ink); border-bottom: 0;
  text-decoration: none; }
.doorplate { position: absolute; top: -32px; padding: 3px 14px; background: var(--brass); border: 3px solid var(--ink); font-family: var(--plate); font-weight: 700; letter-spacing: .2em; color: var(--ink); font-size: 14px; }
.doorglow { position: absolute; bottom: -10px; left: -40px; right: -40px; height: 26px; background: radial-gradient(ellipse, rgba(255,227,160,.35), transparent 70%); }
.door:hover { background: #3a2a1c; }
.street { position: relative; z-index: 2; width: 100%; height: 64px; background: #151a22; border-top: 6px solid #2a2e36;
  background-image: radial-gradient(ellipse 70px 12px at 12% 30%, rgba(255,227,160,.16), transparent), radial-gradient(ellipse 70px 12px at 88% 30%, rgba(255,227,160,.16), transparent), radial-gradient(ellipse 120px 16px at 50% 8%, rgba(255,227,160,.22), transparent); }
.hero-copy { position: relative; z-index: 3; text-align: center; margin-top: 18px; max-width: 620px; padding: 0 var(--gut); }
.kicker { font-family: var(--plate); letter-spacing: .3em; font-size: 12px; color: var(--brass-l); margin: 0 0 6px; }
.hero-top h1 { font-family: var(--sign); font-weight: 700; font-size: clamp(30px, 8.6vw, 64px); line-height: 1; margin: 0; text-transform: uppercase; letter-spacing: .01em; text-shadow: 0 3px 0 #000; }
.hero-copy .sub { font-family: var(--type); font-size: clamp(15px, 3.8vw, 19px); line-height: 1.45; color: #d9d0b8; margin: 14px 0 22px; }
.ticket-wrap { display: flex; flex-direction: column; align-items: center; gap: 0; }
.ticket-machine { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 18px 10px; background: var(--red); border: 4px solid var(--ink); border-radius: 12px 12px 6px 6px; box-shadow: 0 5px 0 var(--red-d); color: #fff; }
.ticket-machine:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--red-d); }
.tm-screen { font-family: var(--crtf); font-size: 28px; color: var(--phos); background: var(--crt); padding: 2px 14px; border: 3px solid var(--ink); border-radius: 4px; min-width: 190px; text-shadow: 0 0 8px rgba(140,242,154,.6); }
.tm-slot { width: 120px; height: 8px; background: #000; border-radius: 4px; }
.ticket { width: 230px; background: #f6f1e3; color: var(--ink); border: 2px solid #c9bfa6; padding: 12px 14px 10px; margin-top: -4px; font-family: var(--mono); box-shadow: 0 8px 18px rgba(0,0,0,.4);
  clip-path: polygon(0 0, 100% 0, 100% 96%, 94% 100%, 88% 96%, 82% 100%, 76% 96%, 70% 100%, 64% 96%, 58% 100%, 52% 96%, 46% 100%, 40% 96%, 34% 100%, 28% 96%, 22% 100%, 16% 96%, 10% 100%, 4% 96%, 0 100%);
  animation: print .9s steps(9) both; transform-origin: top; }
@keyframes print { from { clip-path: inset(0 0 100% 0); } }
.t-top { font-size: 10px; letter-spacing: .1em; text-align: center; border-bottom: 1px dashed #999; padding-bottom: 6px; }
.t-no { font-family: var(--sign); font-weight: 700; font-size: 64px; text-align: center; line-height: 1.1; }
.t-row { display: flex; justify-content: space-between; font-size: 11px; padding: 2px 0; }
.t-go { display: block; text-align: center; margin: 10px 0 6px; font-family: var(--sign); font-weight: 700; letter-spacing: .08em; color: var(--red); text-decoration: none; font-size: 18px; }
.scroll-hint { position: relative; z-index: 3; margin-top: 24px; font-family: var(--plate); letter-spacing: .3em; font-size: 12px; color: #9aa3b2; text-decoration: none; animation: bob 2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(6px); } }

/* ════════ rooms (shared) ════════ */
.room { position: relative; padding: 56px var(--gut) 64px; overflow: hidden; }
.room-head { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; margin: 0 auto 28px; max-width: 720px; position: relative; z-index: 2; }
.lead { font-family: var(--type); font-size: clamp(15px, 3.8vw, 18px); line-height: 1.5; margin: 0; }
.office { background: var(--wall); background-image: repeating-linear-gradient(90deg, transparent 0 66px, rgba(0,0,0,.05) 66px 72px); }
.office::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: var(--floor-d); border-top: 8px solid var(--teak-d); z-index: 0; }
.fluo { position: absolute; top: 0; left: 8%; width: 36%; height: 10px; background: #f2f6ea; border: 3px solid var(--ink); border-top: 0; border-radius: 0 0 4px 4px; box-shadow: 0 0 60px 20px rgba(242,246,234,.18); animation: flick 7s infinite; }
.fluo.r { left: auto; right: 8%; animation-delay: 2.3s; }
@keyframes flick { 0%, 92%, 100% { opacity: 1; } 93% { opacity: .3; } 94% { opacity: 1; } 95% { opacity: .5; } }

/* ════════ 2 · KABUL ════════ */
.kabul { position: relative; z-index: 2; max-width: 980px; margin: 0 auto; display: grid; gap: 24px; }
@media (min-width: 860px) { .kabul { grid-template-columns: 1.1fr .9fr; align-items: start; } }
.dilekce { background: var(--paper); border: 4px solid var(--ink); padding: 18px 18px 22px; box-shadow: 10px 12px 0 rgba(0,0,0,.3); transform: rotate(-.6deg);
  background-image: repeating-linear-gradient(180deg, transparent 0 31px, rgba(80,110,160,.18) 31px 32px); }
.d-head { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: .08em; border-bottom: 2px solid var(--ink); padding-bottom: 8px; color: var(--ink-s); }
.d-to { font-family: var(--type); font-size: 17px; margin: 16px 0 12px; text-align: center; }
.d-l { display: block; font-family: var(--sign); font-weight: 500; font-size: 15px; letter-spacing: .04em; margin: 12px 0 6px; text-transform: uppercase; }
.dilekce textarea { width: 100%; font-family: var(--type); font-size: 18px; line-height: 32px; background: transparent; border: 0; border-bottom: 2px dashed var(--ink-s); resize: vertical; padding: 0 4px; color: #1b2a58; outline: none; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button { padding: 7px 12px; background: #fff8e6; border: 2px solid var(--ink); border-radius: 999px; font-family: var(--mono); font-size: 13px; font-weight: 700; }
.chips button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.d-note { font-family: var(--type); font-size: 14px; margin: 16px 0; }
.d-note span { display: block; font-family: var(--mono); font-size: 11px; color: var(--ink-s); margin-top: 4px; }
.stamp-btn { width: 100%; padding: 14px; background: var(--red); color: #fff; border: 4px solid var(--ink); font-family: var(--sign); font-weight: 700; font-size: 20px; letter-spacing: .08em; box-shadow: 0 5px 0 var(--red-d); }
.stamp-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--red-d); }
.havale { position: relative; display: grid; gap: 14px; }
.hv-alarm { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle, rgba(255,59,38,.35), transparent 70%); opacity: 0; }
.hv-alarm.on { animation: alarm .5s 4; }
@keyframes alarm { 50% { opacity: 1; } }
.hv-cast { display: flex; align-items: flex-end; gap: 6px; min-height: 230px; }
.talker { position: relative; margin: 0; width: 170px; flex: none; }
.talker img { width: 100%; }
.talker img + img { position: absolute; inset: 0; opacity: 0; }
.talker.talking img.tk { animation: talk .22s steps(1) infinite; }
@keyframes talk { 50% { opacity: 1; } }
.talker img.bl { animation: blinkimg 5.3s steps(1) infinite; }
@keyframes blinkimg { 0%, 96% { opacity: 0; } 97%, 99% { opacity: 1; } }
.bubble { position: relative; background: #fff; border: 3px solid var(--ink); border-radius: 18px; padding: 10px 14px; font-family: var(--type); font-size: 18px; line-height: 1.3; box-shadow: 4px 5px 0 rgba(0,0,0,.25); margin-bottom: 120px; max-width: 280px; }
.bubble::after { content: ''; position: absolute; left: -14px; bottom: 16px; border: 9px solid transparent; border-right-color: var(--ink); }
.bubble.shout { font-family: var(--sign); font-weight: 700; font-size: 26px; letter-spacing: .02em; transform: rotate(-3deg); }
.hv-slip { background: #fff8e6; border: 4px solid var(--ink); padding: 16px; position: relative; box-shadow: 8px 10px 0 rgba(0,0,0,.3); transform: rotate(.8deg); }
.hv-title { font-family: var(--sign); font-weight: 700; letter-spacing: .12em; font-size: 20px; border-bottom: 2px solid var(--ink); margin-bottom: 8px; }
.hv-row { display: grid; grid-template-columns: 140px 1fr; gap: 8px; padding: 6px 0; border-bottom: 1px dashed #aaa; font-size: 13px; }
.hv-row b { font-family: var(--type); font-weight: 400; font-size: 16px; }
.hv-stamp { position: absolute; right: 10px; top: 8px; font-size: 26px !important; border: 5px solid var(--red); color: var(--red); font-family: var(--sign); font-weight: 700; font-size: 34px; padding: 2px 14px; transform: rotate(-12deg) scale(2); opacity: 0; transition: .25s cubic-bezier(.2,1.6,.4,1); }
.hv-stamp.on { opacity: .9; transform: rotate(-12deg) scale(1); }
.hv-go { display: inline-block; margin-top: 14px; font-family: var(--sign); font-weight: 700; letter-spacing: .06em; color: var(--red); font-size: 18px; text-decoration: none; }

/* ════════ 3 · KAT REHBERİ ════════ */
.corridor { background: #5c6748; background-image: linear-gradient(180deg, transparent 70%, #4a5339 70%); }
.board { position: relative; z-index: 2; max-width: 640px; margin: 0 auto; background: #1d1b1a; border: 10px solid var(--teak); border-radius: 6px; padding: 18px 14px 20px; box-shadow: 0 10px 0 rgba(0,0,0,.35);
  background-image: repeating-linear-gradient(180deg, transparent 0 7px, rgba(255,255,255,.035) 7px 8px); }
.board-title { font-family: var(--sign); color: #f1ecdf; text-align: center; letter-spacing: .12em; font-size: clamp(15px, 4vw, 20px); margin-bottom: 14px; }
.floor-row { display: grid; grid-template-columns: 54px 1fr auto; gap: 10px; align-items: baseline; padding: 8px 6px; color: #efeadc; text-decoration: none; font-family: var(--mono); font-weight: 700;
  border-bottom: 1px dashed rgba(255,255,255,.12); font-size: clamp(13px, 3.4vw, 16px); letter-spacing: .04em; text-transform: uppercase; }
.floor-row:hover { background: rgba(255,255,255,.06); }
.floor-row .k { color: var(--brass-l); }
.floor-row .who { color: #b9b2a0; font-weight: 500; font-size: .85em; }

/* ════════ 4 · ODALAR ════════ */
.office-room { min-height: 92svh; display: flex; flex-direction: column; align-items: center; }
.office-room.alt { background: var(--wall-d); }
.office-room.cool { background: #4b5644; }
.office-room.deep { background: #2b2633; }
.office-room.deep::after { background: #1d1922; border-top-color: #3a2f2a; }
.door-wrap { position: relative; z-index: 2; width: min(760px, 100%); display: grid; gap: 18px; }
@media (min-width: 860px) { .door-wrap { grid-template-columns: 300px 1fr; align-items: end; } }
.persona { position: relative; display: flex; flex-direction: column; align-items: center; }
.persona .talker { width: min(300px, 70vw); }
.nameplate { margin-top: -10px; position: relative; z-index: 3; background: var(--teak-l); border: 4px solid var(--ink); padding: 8px 14px; text-align: center; box-shadow: 0 5px 0 rgba(0,0,0,.35); }
.nameplate b { display: block; font-family: var(--plate); font-weight: 700; font-size: 20px; letter-spacing: .06em; }
.nameplate small { font-family: var(--plate); font-weight: 600; font-size: 12px; letter-spacing: .14em; }
.desk { position: relative; z-index: 2; background: var(--paper); border: 4px solid var(--ink); padding: 16px; box-shadow: 8px 10px 0 rgba(0,0,0,.28); }
.desk h3 { margin: 0 0 4px; font-family: var(--sign); font-weight: 700; font-size: 22px; letter-spacing: .04em; text-transform: uppercase; }
.desk .tip { font-family: var(--type); font-size: 15px; margin: 0 0 12px; color: var(--ink-s); }
.say { min-height: 64px; font-family: var(--type); font-size: clamp(18px, 4.4vw, 22px); line-height: 1.35; background: #fff; border: 3px solid var(--ink); border-radius: 14px; padding: 12px 14px; margin: 10px 0; position: relative; }
.say::before { content: ''; position: absolute; top: -13px; left: 26px; border: 8px solid transparent; border-bottom-color: var(--ink); }
.say .who { display: block; font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--red); letter-spacing: .08em; margin-bottom: 2px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 16px; background: var(--mustard); border: 3px solid var(--ink); font-family: var(--sign); font-weight: 700; letter-spacing: .06em; font-size: 16px;
  box-shadow: 0 4px 0 rgba(0,0,0,.4); text-transform: uppercase; }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.4); }
.btn.red { background: var(--red); color: #fff; }
.btn.steel { background: var(--steel-l); }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.input { flex: 1; min-width: 160px; padding: 11px 12px; border: 3px solid var(--ink); background: #fffdf5; font-family: var(--type); font-size: 17px; }

/* Tuncay alarm shake */
body.shake { animation: shake .45s 3; }
@keyframes shake { 20% { transform: translate(-6px, 2px); } 40% { transform: translate(5px, -3px); } 60% { transform: translate(-4px, 3px); } 80% { transform: translate(4px, 0); } }
.alarmlamp { width: 44px; height: 44px; border-radius: 50%; background: var(--red-d); border: 4px solid var(--ink); }
.alarmlamp.on { animation: lamp .3s steps(2) infinite; }
@keyframes lamp { 50% { background: var(--red-hot); box-shadow: 0 0 30px 10px rgba(255,59,38,.5); } }

/* Rıza — switch panel */
.panel { background: var(--steel-l); border: 5px solid var(--ink); border-radius: 10px; padding: 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.panel-title { grid-column: 1 / -1; text-align: center; background: var(--brass); border: 3px solid var(--ink); font-family: var(--plate); font-weight: 700; letter-spacing: .08em; padding: 6px; font-size: 15px; }
.tog { background: var(--paper); border: 3px solid var(--ink); border-radius: 6px; padding: 8px 6px 10px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.tog .lab { font-family: var(--sign); font-weight: 700; font-size: 12px; line-height: 1.1; letter-spacing: .03em; min-height: 40px; display: flex; align-items: center; text-transform: uppercase; }
.tog .sw { position: relative; width: 44px; height: 66px; background: var(--steel-d); border: 3px solid var(--ink); border-radius: 6px; }
.tog .sw i { position: absolute; left: 8px; right: 8px; height: 26px; bottom: 5px; background: #555; border: 3px solid var(--ink); border-radius: 4px; transition: bottom .12s, background .12s; }
.tog.on .sw i { bottom: 29px; background: var(--red-hot); }
.tog .led { width: 14px; height: 14px; border-radius: 50%; background: #3a3a3a; border: 2px solid var(--ink); }
.tog.on .led { background: #ff6b3d; box-shadow: 0 0 12px 3px rgba(255,107,61,.5); }
.tog.auto { border-color: var(--red); }
.tog.auto { color: var(--ink); opacity: 1; cursor: default; }
.tog.auto .lab { flex-direction: column; }
.tog.auto .lab::after { content: 'OTOMATİK'; display: block; color: var(--red); font-size: 10px; margin-top: 3px; letter-spacing: .1em; }
.tog { color: var(--ink); }
.tog.empty { border-style: dashed; background: transparent; color: var(--ink-s); justify-content: center; }
.tog.flash { animation: flash .35s 3; }
@keyframes flash { 50% { background: #ffd2c9; } }
.nabiz { display: flex; align-items: center; gap: 10px; font-family: var(--crtf); font-size: 34px; color: var(--phos); background: var(--crt); border: 4px solid var(--ink); padding: 4px 14px; border-radius: 6px; width: fit-content; }

/* Hikmet — archive drawer */
.drawer { display: grid; gap: 10px; }
.card { background: #fffdf4; border: 3px solid var(--ink); padding: 12px 14px; position: relative; transform: rotate(-.6deg); box-shadow: 5px 6px 0 rgba(0,0,0,.25); animation: cardin .35s ease-out; }
@keyframes cardin { from { transform: translateY(-14px) rotate(-3deg); opacity: 0; } }
.card .no { font-size: 11px; color: var(--ink-s); letter-spacing: .08em; }
.card .tx { font-family: var(--type); font-size: 19px; line-height: 1.35; margin-top: 4px; }
.card .st { position: absolute; right: 10px; bottom: 6px; color: var(--red); border: 3px solid var(--red); font-family: var(--sign); font-weight: 700; font-size: 13px; padding: 0 6px; transform: rotate(-8deg); }

/* Figen — elalem-o-metre */
.meter { position: relative; height: 26px; background: linear-gradient(90deg, #6f9a6a, var(--mustard), var(--red)); border: 3px solid var(--ink); border-radius: 999px; }
.meter input { position: absolute; inset: -6px 0; width: 100%; opacity: 0; cursor: pointer; }
.meter .needle { position: absolute; top: -10px; width: 6px; height: 40px; background: var(--ink); border-radius: 3px; transform: translateX(-50%); pointer-events: none; }

/* Umut thrown out */
.ushers { position: relative; height: 0; }
.umut-stage { position: relative; display: flex; justify-content: center; align-items: flex-end; min-height: 10px; }
.umut-stage .usher { position: absolute; bottom: 0; width: min(220px, 48vw); transition: transform 1s ease-in; }
.umut-stage .usher.l { transform: translateX(-160%); } .umut-stage .usher.r { transform: translateX(160%); }
.carry .usher.l { transform: translateX(-62%); } .carry .usher.r { transform: translateX(62%); }
.carry.out .talker, .carry.out .usher { transform: translateX(140vw) !important; transition: transform 1.3s ease-in .5s; }
.kapi { font-family: var(--sign); font-weight: 700; color: var(--red); text-align: center; letter-spacing: .1em; margin-top: 8px; min-height: 22px; }

/* Onur — Kat −2 */
.deep .lead, .deep .room-head { color: #e8e1d2; }
.couch { height: 26px; background: #6e2a24; border: 4px solid var(--ink); border-radius: 12px; margin-top: -6px; position: relative; z-index: 3; width: min(320px, 80vw); }

/* Radio */
.radio { background: #7a3b2a; border: 5px solid var(--ink); border-radius: 18px; padding: 14px; display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
.radio .dial { font-family: var(--crtf); color: var(--phos); background: var(--crt); border: 3px solid var(--ink); padding: 4px 10px; font-size: 26px; border-radius: 6px; }
.radio .knob { width: 54px; height: 54px; border-radius: 50%; background: #2a2522; border: 4px solid var(--ink); position: relative; }
.radio .knob::after { content: ''; position: absolute; left: 50%; top: 6px; width: 4px; height: 16px; background: #e9dfc4; transform: translateX(-50%); }

/* ════════ 5 · ARŞİV ════════ */
.archive { background: #3a2a1e; background-image: repeating-linear-gradient(180deg, transparent 0 108px, rgba(0,0,0,.18) 108px 111px); color: #efe6cf; }
.archive .lead { color: #e2d6b8; }
.folders { position: relative; z-index: 2; max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px 12px; }
.folder { position: relative; display: block; text-decoration: none; color: var(--ink); background: var(--manila); border: 3px solid var(--ink); padding: 26px 10px 12px; min-height: 130px; transition: transform .15s;
  box-shadow: 4px 5px 0 rgba(0,0,0,.35); }
.folder::before { content: ''; position: absolute; top: -14px; left: -3px; width: 58%; height: 14px; background: var(--manila); border: 3px solid var(--ink); border-bottom: 0; border-radius: 6px 6px 0 0; }
.folder:hover { transform: translateY(-4px) rotate(-1deg); }
.folder .fno { font-size: 10px; letter-spacing: .1em; color: var(--ink-s); }
.folder .ft { font-family: var(--sign); font-weight: 700; font-size: 18px; line-height: 1.05; margin-top: 6px; text-transform: uppercase; }
.folder .fs { position: absolute; right: 8px; bottom: 8px; color: var(--red); border: 2px solid var(--red); font-family: var(--sign); font-weight: 700; font-size: 10px; padding: 0 4px; transform: rotate(-8deg); letter-spacing: .06em; }
.folder.new { background: #f0d48a; }
.folder.new .fs { background: var(--red); color: #fff; }

/* ════════ 6 · EXIT ════════ */
.exit { background: #0b0f17; color: #cfc6b2; text-align: center; padding: 56px var(--gut) 40px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.exit-sign { background: #1f8a4c; color: #fff; font-family: var(--sign); font-weight: 700; letter-spacing: .3em; padding: 8px 22px 8px 30px; border: 4px solid var(--ink); box-shadow: 0 0 30px rgba(31,138,76,.5); }
.bye { font-family: var(--type); font-size: 18px; margin: 0; }
.ig { font-family: var(--sign); font-weight: 700; letter-spacing: .06em; color: var(--brass-l); font-size: 18px; }
.disclaimer { max-width: 560px; font-size: 12px; line-height: 1.6; color: #9a927f; margin: 6px 0 0; }
.copy { font-size: 11px; color: #6c6556; margin: 0; }

@media (prefers-reduced-motion: reduce) { *, .grain { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } }

@media (max-width: 520px) {
  .floor-row { grid-template-columns: 58px 1fr; }
  .floor-row .who { display: none; }
  .hv-row { grid-template-columns: 1fr; gap: 2px; }
  .hv-cast { min-height: 190px; } .talker { width: 140px; }
  .bubble { margin-bottom: 90px; }
}

/* ═════════════════════ v2 · BİNANIN İÇİ (views) ═════════════════════ */
.view[hidden] { display: none !important; }
.view { min-height: 100svh; }
.fade { position: fixed; inset: 0; background: #000; z-index: 40; opacity: 0; pointer-events: none; transition: opacity .45s ease; }
.fade.on { opacity: 1; }
.facade { min-height: 100svh; }
.building { transition: transform 1s cubic-bezier(.6,0,.4,1); transform-origin: 50% 100%; }
.facade.entering .building { transform: scale(4.2) translateY(-1%); }
.facade.entering .hero-top, .facade.entering .hero-copy { opacity: 0; transition: opacity .3s; }
.door .leaf { position: absolute; inset: 0; background: linear-gradient(90deg, #3a2a1c, #2a1d14); border-right: 3px solid #120c08; transform-origin: 0 50%; transition: transform .6s ease; }
.door .leaf::after { content: ''; position: absolute; right: 12%; top: 52%; width: 9px; height: 9px; border-radius: 50%; background: var(--brass-l); }
.door { overflow: visible; perspective: 400px; background: #ffe3a0; box-shadow: inset 0 0 30px #c99a2e; }
.facade.entering .door .leaf, .door:hover .leaf { transform: rotateY(-70deg); }
.tap-hint { font-family: var(--plate); letter-spacing: .2em; font-size: 12px; color: #9aa3b2; margin-top: 16px; animation: bob 2s ease-in-out infinite; }

/* lobby */
.lobby { position: relative; background: var(--wall); background-image: repeating-linear-gradient(90deg, transparent 0 66px, rgba(0,0,0,.05) 66px 72px); padding: 56px 0 0; overflow: hidden; }
.lobby-head { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0 var(--gut); }
.queue { display: flex; align-items: center; gap: 10px; background: #111; border: 4px solid var(--ink); border-radius: 6px; padding: 4px 12px; }
.queue span { font-family: var(--plate); color: #c9c2ae; letter-spacing: .14em; font-size: 12px; }
.queue b { font-family: var(--crtf); font-weight: 400; color: #ff4b3a; font-size: 34px; text-shadow: 0 0 8px rgba(255,75,58,.6); }
.lobby-grid { display: grid; gap: 18px; padding: 22px var(--gut) 8px; max-width: 980px; margin: 0 auto; }
@media (min-width: 760px) { .lobby-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.gise { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; background: var(--teak); border: 5px solid var(--ink); text-align: center; box-shadow: 0 8px 0 rgba(0,0,0,.3); }
.gise-sign { background: var(--brass); border-bottom: 4px solid var(--ink); font-family: var(--plate); font-weight: 700; letter-spacing: .1em; padding: 8px; font-size: 15px; }
.gise-glass { display: flex; align-items: center; justify-content: center; height: 150px; margin: 14px; background: linear-gradient(160deg, rgba(220,235,240,.55), rgba(160,190,200,.25)); border: 4px solid var(--ink); position: relative; overflow: hidden; }
.gise-glass::before { content: ''; position: absolute; left: 30%; bottom: 0; width: 40%; height: 18px; background: var(--ink); border-radius: 30px 30px 0 0; opacity: .7; }
.gise-paper { font-family: var(--type); font-size: 20px; background: var(--paper); border: 2px solid var(--ink); padding: 8px 14px; transform: rotate(-3deg); }
.gise-cta { margin: 0 14px 14px; background: var(--red); color: #fff; border: 4px solid var(--ink); font-family: var(--sign); font-weight: 700; letter-spacing: .08em; padding: 10px; font-size: 18px; box-shadow: 0 4px 0 var(--red-d); }
.gise:active .gise-cta { transform: translateY(3px); box-shadow: 0 1px 0 var(--red-d); }
.lobby .board { max-width: none; margin: 0; }
.board-title { font-size: 18px; }
.corr-label { padding: 22px var(--gut) 8px; font-family: var(--sign); font-weight: 700; letter-spacing: .14em; font-size: 18px; color: #1f1b16; max-width: 980px; margin: 0 auto; }
.corr-label span { font-family: var(--mono); font-weight: 500; letter-spacing: .02em; font-size: 12px; opacity: .7; margin-left: 8px; }

/* corridor of doors */
.corridor-strip { display: flex; gap: 26px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 26px var(--gut) 0; background: #5c6748; border-top: 8px solid var(--teak-d);
  background-image: linear-gradient(180deg, #5c6748 0 74%, #4a5339 74% 100%); position: relative; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.corridor-strip::after { content: ''; flex: 0 0 4px; }
.cdoor { flex: 0 0 auto; scroll-snap-align: center; width: 170px; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; align-items: center; position: relative; padding-bottom: 46px; }
.cdoor .sign { background: var(--paper); border: 3px solid var(--ink); font-family: var(--sign); font-weight: 700; font-size: 13px; letter-spacing: .04em; text-align: center; padding: 4px 8px; min-height: 44px; display: flex; flex-direction: column; justify-content: center; line-height: 1.1; width: 100%; }
.cdoor .sign small { font-family: var(--mono); font-size: 10px; font-weight: 500; color: var(--ink-s); }
.cdoor .frame { position: relative; width: 150px; height: 270px; margin-top: 10px; background: #ffe3a0; border: 6px solid var(--teak-d); perspective: 600px; box-shadow: inset 0 0 40px #c99a2e; }
.cdoor .inside { position: absolute; inset: 0; overflow: hidden; }
.cdoor .inside img { position: absolute; left: 50%; width: 170%; bottom: -55%; transform: translateX(-50%); }
.cdoor .leaf { position: absolute; inset: 0; background: linear-gradient(90deg, #6a4329, #5b3b2a); border: 3px solid #1d140e; transform-origin: 0 50%; transition: transform .7s cubic-bezier(.5,0,.3,1); z-index: 2; }
.cdoor .glass { position: absolute; left: 16%; right: 16%; top: 10%; height: 36%; background: rgba(242,200,121,.55); border: 3px solid #1d140e; overflow: hidden; }
.cdoor .glass img { position: absolute; left: 50%; width: 190%; top: -6%; transform: translateX(-50%); filter: blur(3.5px) brightness(.35) sepia(.6); opacity: .9; }
.cdoor .knob { position: absolute; right: 10%; top: 55%; width: 12px; height: 12px; border-radius: 50%; background: var(--brass-l); border: 2px solid #1d140e; }
.cdoor .under { position: absolute; left: 6px; right: 6px; bottom: -6px; height: 6px; background: #ffe3a0; box-shadow: 0 8px 22px 8px rgba(255,227,160,.35); }
.cdoor:hover .leaf { transform: rotateY(-22deg); }
.cdoor.opening .leaf { transform: rotateY(-100deg); }
.cdoor .floor-tag { position: absolute; bottom: 10px; font-family: var(--plate); font-weight: 700; font-size: 12px; letter-spacing: .14em; color: #efe6cf; }
.cdoor.stairs .frame { background: #2a2622; box-shadow: none; }
.cdoor.stairs .leaf { background: #3c4248; }

.lobby-foot { background: #0b0f17; color: #cfc6b2; text-align: center; padding: 30px var(--gut) 34px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.exit-door { background: #1f8a4c; color: #fff; font-family: var(--sign); font-weight: 700; letter-spacing: .3em; padding: 8px 22px 8px 30px; border: 4px solid var(--ink); text-decoration: none; box-shadow: 0 0 30px rgba(31,138,76,.5); }

/* modal */
.modal { position: fixed; inset: 0; z-index: 45; background: rgba(5,8,14,.72); display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 60px var(--gut) 40px; }
.modal[hidden] { display: none; }
.modal-inner { position: relative; width: min(560px, 100%); display: grid; gap: 22px; }
.close { position: absolute; top: -46px; right: 0; width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--ink); background: var(--paper); font-size: 26px; line-height: 1; }

/* ═════════ room view ═════════ */
.room-view { position: relative; background: #111; display: flex; flex-direction: column; }
.scene { position: relative; height: min(64svh, 640px); overflow: hidden; background: var(--wall); }
.scene .wallp { position: absolute; inset: 0; background-image: repeating-linear-gradient(90deg, transparent 0 66px, rgba(0,0,0,.06) 66px 72px); }
.scene .floor { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: var(--floor-d); border-top: 8px solid var(--teak-d); }
.scene .lamp { position: absolute; top: 0; left: 50%; width: 46%; transform: translateX(-50%); height: 10px; background: #f2f6ea; border: 3px solid var(--ink); border-top: 0; box-shadow: 0 0 80px 30px rgba(242,246,234,.16); animation: flick 9s infinite; }
.scene .rplate { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); z-index: 3; white-space: nowrap; }
.scene .char { position: absolute; left: 50%; bottom: 13%; width: min(320px, 60vw); transform: translateX(-50%); z-index: 2; margin: 0; }
.scene .deskfront { position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%); width: min(560px, 96vw); height: 22%; z-index: 3; background: var(--teak); border: 5px solid var(--ink); box-shadow: inset 0 10px 0 var(--teak-l); }
.scene .deskfront .dplate { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); background: var(--brass); border: 3px solid var(--ink); font-family: var(--plate); font-weight: 700; letter-spacing: .1em; padding: 3px 12px; font-size: clamp(11px, 3vw, 15px); white-space: nowrap; }
.scene .prop { position: absolute; z-index: 1; }
.scene.enter { animation: roomin .7s ease-out; }
@keyframes roomin { from { transform: scale(1.18); filter: brightness(.3); } }
.console { position: relative; z-index: 5; background: var(--paper); border-top: 6px solid var(--ink); padding: 16px var(--gut) 90px; max-width: 100%; }
.console .inner { max-width: 760px; margin: 0 auto; }
.console h2 { margin: 0; font-family: var(--sign); font-weight: 700; font-size: 24px; letter-spacing: .03em; text-transform: uppercase; }
.console .tip { margin: 2px 0 6px; }
.back { position: fixed; left: 12px; bottom: 14px; z-index: 30; background: #1f8a4c; color: #fff; text-decoration: none; font-family: var(--sign); font-weight: 700; letter-spacing: .12em; padding: 10px 16px; border: 4px solid var(--ink); box-shadow: 0 4px 0 rgba(0,0,0,.4); }
.next { position: fixed; right: 12px; bottom: 14px; z-index: 30; background: var(--steel-l); color: var(--ink); text-decoration: none; font-family: var(--sign); font-weight: 700; letter-spacing: .08em; padding: 10px 14px; border: 4px solid var(--ink); box-shadow: 0 4px 0 rgba(0,0,0,.4); font-size: 14px; }

/* room themes */
.scene.t-necati { background: #6f7a55; } .scene.t-tuncay { background: #7d6f55; } .scene.t-figen { background: #8a7a5e; } .scene.t-nalan { background: #5f7a74; }
.scene.t-riza { background: #4b5644; } .scene.t-kemal { background: #7d8a62; } .scene.t-umut { background: #8b9470; } .scene.t-hikmet { background: #3a2a1e; }
.scene.t-onur { background: #2b2633; } .scene.t-radyo { background: #2a1f2a; }
.scene.t-onur .floor, .scene.t-radyo .floor { background: #1d1922; border-top-color: #3a2f2a; }
.scene.t-onur .lamp, .scene.t-radyo .lamp, .scene.t-hikmet .lamp { display: none; }
.scene .glow { position: absolute; border-radius: 50%; pointer-events: none; }
.scene.alarm { animation: redpulse .35s steps(2) 6; }
@keyframes redpulse { 50% { box-shadow: inset 0 0 0 2000px rgba(255,40,30,.28); } }
.ecg { stroke-dasharray: 600; animation: ecg 2.2s linear infinite; }
@keyframes ecg { from { stroke-dashoffset: 600; } to { stroke-dashoffset: 0; } }
.onair { animation: blink 1.4s steps(2) infinite; }
.carry-out { animation: carryout 1.6s ease-in forwards; }
@keyframes carryout { 30% { transform: translateX(-50%) translateY(-10px) rotate(-4deg); } 100% { transform: translateX(160vw) translateY(-10px) rotate(-8deg); } }
.usherL, .usherR { position: absolute; bottom: 13%; width: min(240px, 52vw); z-index: 2; transition: transform .9s ease-in; }
.usherL { left: 50%; transform: translateX(-210%); } .usherR { left: 50%; transform: translateX(110%); }
.carrying .usherL { transform: translateX(-118%); } .carrying .usherR { transform: translateX(18%); }
.carrying.gone .usherL, .carrying.gone .usherR { transform: translateX(160vw); transition: transform 1.4s ease-in .2s; }

/* no ticket, no entry */
.guard { display: flex; align-items: flex-end; gap: 4px; margin: 18px auto 0; max-width: 360px; text-align: left; animation: cardin .3s ease-out; }
.guard .talker { width: 120px; flex: none; }
.guard .say { flex: 1; color: var(--ink); margin: 0 0 30px; }
.guard .say::before { top: auto; bottom: 14px; left: -15px; border: 8px solid transparent; border-right-color: var(--ink); }
.ticket-machine.nudge { animation: nudge .5s 3; }
@keyframes nudge { 30% { transform: rotate(-4deg) scale(1.06); } 60% { transform: rotate(4deg) scale(1.06); } }
.door::before { content: '🔒'; position: absolute; z-index: 4; top: 40%; left: 50%; transform: translateX(-50%); font-size: 20px; filter: grayscale(1) brightness(1.6); }
.has-ticket .door::before { content: none; }
.has-ticket .t-go { animation: blink 1s steps(2) infinite; }

/* ═════════════════════ v3 · ASANSÖR + YÜRÜNEBİLİR KORİDOR ═════════════════════ */
/* lobby elevator */
.elev-call { display: flex; justify-content: center; align-items: flex-end; gap: 16px; padding: 26px var(--gut) 0; background: linear-gradient(180deg, transparent 0 78%, var(--floor-d) 78%); border-bottom: 8px solid var(--teak-d); }
.elev-frame { display: flex; flex-direction: column; align-items: center; background: var(--steel); border: 6px solid var(--ink); border-bottom: 0; padding: 10px 14px 0; }
.elev-ind { display: flex; align-items: center; gap: 10px; background: #111; border: 3px solid var(--ink); padding: 2px 12px; margin-bottom: 10px; }
.elev-ind .arrow { color: #ff4b3a; font-size: 14px; } .elev-ind b { font-family: var(--crtf); font-weight: 400; color: #ff4b3a; font-size: 30px; text-shadow: 0 0 8px rgba(255,75,58,.6); }
.elev-doors { display: flex; width: min(230px, 56vw); height: min(300px, 40svh); background: #2a2622; border: 4px solid var(--ink); border-bottom: 0; overflow: hidden; }
.ed, .cd { flex: 1; background: linear-gradient(90deg, #b7bfbb, #8e9893 40%, #c3cac6 70%, #8e9893); border: 2px solid #3a403d; transition: transform .8s ease; }
.elev-doors:hover .ed.l { transform: translateX(-12%); } .elev-doors:hover .ed.r { transform: translateX(12%); }
.elev-doors.open .ed.l { transform: translateX(-100%); } .elev-doors.open .ed.r { transform: translateX(100%); }
.elev-side { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 120px; }
.elev-side span { font-family: var(--plate); font-weight: 700; letter-spacing: .2em; font-size: 12px; }
.call-btn { display: grid; place-items: center; width: 50px; height: 76px; background: var(--steel-l); border: 4px solid var(--ink); border-radius: 10px; text-decoration: none; color: #ff4b3a; font-size: 16px; line-height: 1.4; box-shadow: 0 0 0 4px #c9ced0 inset; }

/* elevator cabin */
.elevator { background: #1a1d1c; display: flex; align-items: stretch; justify-content: center; }
.cabin { position: relative; width: min(560px, 100%); min-height: 100svh; background: linear-gradient(90deg, #8e9893, #b7bfbb 20%, #a3aca8 50%, #b7bfbb 80%, #8e9893); border-left: 6px solid var(--ink); border-right: 6px solid var(--ink); padding: 72px var(--gut) 40px; overflow: hidden; }
.cabin.shake { animation: shake .5s 2; }
.disp { display: flex; align-items: center; justify-content: center; gap: 14px; background: #0c0c0c; border: 5px solid var(--ink); border-radius: 6px; padding: 6px 12px; margin: 0 auto 18px; width: fit-content; min-width: 240px; flex-wrap: wrap; }
.disp .arrow { color: #ff4b3a; font-size: 26px; min-width: 20px; }
.disp b { font-family: var(--crtf); font-weight: 400; color: #ff4b3a; font-size: 64px; line-height: 1; text-shadow: 0 0 12px rgba(255,75,58,.7); min-width: 64px; text-align: center; }
.disp small { flex-basis: 100%; text-align: center; font-family: var(--crtf); font-size: 22px; color: #ffb3a8; letter-spacing: .06em; }
.cab-walls .rail { height: 12px; background: #d8dcd9; border: 3px solid var(--ink); border-radius: 6px; margin: 8px 0 18px; }
.cab-walls .mirror { height: 90px; border: 4px solid var(--ink); background: linear-gradient(135deg, rgba(255,255,255,.55), rgba(180,200,210,.3) 40%, rgba(255,255,255,.4)); display: grid; place-items: center; margin-bottom: 18px; }
.cab-walls .mirror span { font-family: var(--type); color: rgba(31,27,22,.55); font-size: 15px; }
.cpanel { display: grid; gap: 10px; background: #c9ced0; border: 5px solid var(--ink); border-radius: 10px; padding: 14px; }
.fbtn { display: grid; grid-template-columns: 58px 1fr; align-items: center; gap: 12px; background: transparent; border: 0; padding: 0; text-align: left; color: var(--ink); }
.fbtn .k { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font-family: var(--sign); font-weight: 700; font-size: 20px; background: radial-gradient(circle at 40% 35%, #f4f6f5, #a7aeab); border: 4px solid var(--ink); box-shadow: 0 3px 0 rgba(0,0,0,.35); }
.fbtn .u { font-family: var(--mono); font-weight: 700; font-size: 13px; line-height: 1.3; letter-spacing: .03em; text-transform: uppercase; }
.fbtn .u small { display: block; font-weight: 500; color: var(--ink-s); text-transform: none; }
.fbtn.lit .k { background: radial-gradient(circle at 40% 35%, #fff2b0, #ffb43a); box-shadow: 0 0 18px rgba(255,180,58,.8); }
.fbtn.here .k { outline: 4px solid #ff4b3a; outline-offset: 3px; }
.fbtn:disabled { opacity: 1; cursor: default; }
.cab-doors { position: absolute; inset: 0; display: flex; pointer-events: none; z-index: 5; }
.cab-doors .cd { transform: translateX(0); }
.cab-doors.open .cd.l { transform: translateX(-100%); } .cab-doors.open .cd.r { transform: translateX(100%); }

/* walkable hall */
.floorv { position: relative; background: #111; }
.hall { position: relative; height: 100svh; overflow: hidden; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.hall:active { cursor: grabbing; }
.world { position: absolute; left: 0; top: 0; height: 100%; will-change: transform; }
.h-wall { position: absolute; left: 0; top: 0; height: 74%; background: var(--fw, #5c6748); background-image: repeating-linear-gradient(90deg, transparent 0 140px, rgba(0,0,0,.06) 140px 146px); }
.h-dado { position: absolute; left: 0; top: 52%; height: 22%; background: rgba(0,0,0,.12); border-top: 10px solid var(--teak-d); }
.h-floor { position: absolute; left: 0; bottom: 0; height: 26%; background: var(--floor-d); border-top: 10px solid var(--teak-d);
  background-image: repeating-linear-gradient(100deg, transparent 0 118px, rgba(0,0,0,.2) 118px 122px), linear-gradient(180deg, rgba(0,0,0,.25), transparent 40%); }
.h-light { position: absolute; top: 0; width: 200px; height: 12px; background: #f2f6ea; border: 3px solid var(--ink); border-top: 0; box-shadow: 0 0 90px 36px rgba(242,246,234,.14); }
.h-light.flick { animation: flick 3.2s infinite; }
.hdoor { position: absolute; bottom: 26%; width: calc(var(--U) * 24); height: calc(var(--U) * 44); transform: translateX(-50%); text-decoration: none; color: var(--ink); }
.hdoor .sign { position: absolute; left: 50%; bottom: calc(100% + var(--U) * 2); transform: translateX(-50%); width: 130%; background: var(--paper); border: 3px solid var(--ink); font-family: var(--sign); font-weight: 700; text-align: center; font-size: calc(var(--U) * 2.1); line-height: 1.1; padding: calc(var(--U) * .7) 6px; text-transform: uppercase; }
.hdoor .sign small { display: block; font-family: var(--mono); font-weight: 500; font-size: calc(var(--U) * 1.4); color: var(--ink-s); text-transform: none; }
.hdoor .frame { position: absolute; inset: 0; background: #ffe3a0; border: 6px solid var(--teak-d); perspective: 700px; box-shadow: inset 0 0 50px #c99a2e; }
.hdoor .inside { position: absolute; inset: 0; overflow: hidden; }
.hdoor .inside img { position: absolute; left: 50%; width: 170%; bottom: -55%; transform: translateX(-50%); }
.hdoor .leaf { position: absolute; inset: 0; background: linear-gradient(90deg, #6a4329, #5b3b2a); border: 3px solid #1d140e; transform-origin: 0 50%; transition: transform .7s cubic-bezier(.5,0,.3,1); }
.hdoor .glass { position: absolute; left: 16%; right: 16%; top: 9%; height: 36%; background: rgba(242,200,121,.55); border: 3px solid #1d140e; overflow: hidden; }
.hdoor .glass img { position: absolute; left: 50%; width: 190%; top: -6%; transform: translateX(-50%); filter: blur(3.5px) brightness(.35) sepia(.6); }
.hdoor .knob { position: absolute; right: 10%; top: 55%; width: 13px; height: 13px; border-radius: 50%; background: var(--brass-l); border: 2px solid #1d140e; }
.hdoor .under { position: absolute; left: 6px; right: 6px; bottom: -8px; height: 8px; background: #ffe3a0; box-shadow: 0 10px 30px 10px rgba(255,227,160,.35); }
.hdoor.near .frame { outline: 5px solid #ffd27a; outline-offset: 4px; }
.hdoor.opening .leaf { transform: rotateY(-100deg); }
.hdoor.locked .frame { background: #2a2622; box-shadow: none; } .hdoor.locked .under { display: none; } .hdoor.locked .glass { background: rgba(60,70,80,.6); }
.hdoor.locked .leaf { background: linear-gradient(90deg, #4d5357, #3c4248); }
.hdoor.lift .frame { background: #2a2622; border-color: var(--ink); box-shadow: none; }
.hdoor.lift .leaf { display: none; }
.hdoor.lift .inside { display: flex; }
.hdoor.lift .inside::before, .hdoor.lift .inside::after { content: ''; flex: 1; background: linear-gradient(90deg, #b7bfbb, #8e9893 40%, #c3cac6 70%, #8e9893); border: 2px solid #3a403d; }
.hdeco { position: absolute; bottom: 26%; transform: translateX(-50%); }
.bubble-note { position: absolute; z-index: 6; left: 50%; bottom: calc(100% + var(--U) * 10); transform: translateX(-50%); width: max-content; max-width: 240px; background: #fff; border: 3px solid var(--ink); border-radius: 14px; padding: 8px 12px; font-family: var(--type); font-size: 16px; animation: cardin .25s ease-out; }
.hud { position: absolute; top: 12px; left: 12px; right: 84px; display: flex; gap: 10px; align-items: center; z-index: 8; pointer-events: none; }
.hud > * { pointer-events: auto; }
.hud-floor { background: var(--brass); border: 4px solid var(--ink); font-family: var(--plate); font-weight: 700; letter-spacing: .1em; padding: 6px 12px; font-size: 15px; }
.hud-elev { background: var(--steel-l); border: 4px solid var(--ink); font-family: var(--sign); font-weight: 700; letter-spacing: .06em; padding: 6px 12px; text-decoration: none; color: var(--ink); font-size: 14px; }
.walkpad { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; justify-content: space-between; align-items: center; padding: 0 14px; z-index: 8; pointer-events: none; }
.walkpad > * { pointer-events: auto; }
.wbtn { width: 74px; height: 74px; border-radius: 50%; background: rgba(239,230,207,.92); border: 4px solid var(--ink); font-size: 26px; box-shadow: 0 5px 0 rgba(0,0,0,.4); touch-action: none; }
.wbtn:active, .wbtn.held { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.4); background: #ffe3a0; }
.enter-btn { padding: 14px 26px; background: var(--red); color: #fff; border: 4px solid var(--ink); font-family: var(--sign); font-weight: 700; letter-spacing: .14em; font-size: 22px; box-shadow: 0 5px 0 var(--red-d); animation: nudge 1.2s infinite; }
.walk-hint { position: absolute; left: 0; right: 0; bottom: 104px; text-align: center; font-family: var(--plate); letter-spacing: .14em; font-size: 12px; color: #efe6cf; text-shadow: 0 1px 0 #000; z-index: 7; transition: opacity .6s; margin: 0; }
.prompt { position: absolute; left: 50%; top: 66px; transform: translateX(-50%); z-index: 8; background: #fff; border: 3px solid var(--ink); border-radius: 12px; padding: 6px 12px; font-family: var(--type); font-size: 15px; max-width: 86vw; text-align: center; }

/* corridor passers-by */
.walker { position: absolute; bottom: 19%; display: flex; align-items: flex-end; z-index: 4; pointer-events: none; transform-origin: 50% 100%; }
.wf { position: relative; width: calc(var(--U) * 19); margin-right: calc(var(--U) * -3); animation: wbob .36s ease-in-out infinite; }
.wf img { display: block; width: 100%; }
.wf img.b { position: absolute; inset: 0; animation: stepB .36s steps(1) infinite; animation-delay: inherit; }
.wf img.a { animation: stepA .36s steps(1) infinite; animation-delay: inherit; }
@keyframes stepA { 50% { opacity: 0; } } @keyframes stepB { 0% { opacity: 0; } 50% { opacity: 1; } }
@keyframes wbob { 50% { transform: translateY(calc(var(--U) * -.6)); } }
.walker.carry .wf.lifted { margin-bottom: calc(var(--U) * 7); transform: rotate(-80deg); transform-origin: 50% 60%; animation: none; z-index: 2; }
.walker.carry .wf.lifted img.b { display: none; } .walker.carry .wf.lifted img.a { animation: none; }
.wsay { position: absolute; left: 50%; bottom: calc(100% + var(--U) * 1); white-space: nowrap; background: #fff; border: 3px solid var(--ink); border-radius: 12px; padding: 4px 10px; font-family: var(--type); font-size: calc(var(--U) * 2); }

/* ─── formlar (e-posta) ─── */
.d-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 520px) { .d-pair { grid-template-columns: 1fr; } }
.d-l i { font-style: normal; text-transform: none; color: var(--ink-s); font-size: 12px; }
.d-in { width: 100%; font-family: var(--type); font-size: 17px; background: transparent; border: 0; border-bottom: 2px dashed var(--ink-s); padding: 4px; color: #1b2a58; outline: none; border-radius: 0; }
.d-in:focus, .dilekce textarea:focus { border-bottom-color: var(--red); }
select.d-in { background: #fff8e6; border: 2px solid var(--ink); padding: 6px 8px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.kvkk { display: flex; gap: 10px; align-items: flex-start; font-family: var(--mono); font-size: 12px; line-height: 1.5; margin: 0 0 16px; color: var(--ink-s); }
.kvkk input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--red); flex: none; }
.kvkk a { color: var(--red-d); }
.send-st { font-family: var(--mono); font-size: 13px; font-weight: 700; margin: 12px 0 0; min-height: 1em; }
.send-st.ok { color: #1f6b3c; } .send-st.err { color: var(--red); }
.send-st button { margin-left: 8px; font: inherit; background: var(--ink); color: var(--paper); border: 0; padding: 4px 10px; }
.collab-link { background: transparent; color: var(--brass-l); border: 2px solid currentColor; font-family: var(--sign); font-weight: 700; letter-spacing: .12em; font-size: 14px; padding: 7px 16px; }
.hero-copy .collab-link { margin: 0 auto 14px; display: block; opacity: .85; }
.dilekce.legal p { font-family: var(--mono); font-size: 13px; line-height: 1.6; margin: 10px 0; }
.dilekce.legal [data-fill] { background: #ffe08a; padding: 0 3px; }
.dilekce.collab .stamp-btn:disabled, .dilekce .stamp-btn:disabled { opacity: .6; }

/* arşiv kapısı: Hikmet nöbette */
.hdoor .guard { position: absolute; left: 50%; bottom: -4%; height: 92%; transform: translate(-50%, 18%) scale(.9); opacity: 0; pointer-events: none; z-index: 5; transition: transform .25s cubic-bezier(.3,1.6,.5,1), opacity .15s; filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
.hdoor.guarding .guard { transform: translate(-50%, 0) scale(1); opacity: 1; }
.hdoor.guarded .bubble-note { font-family: var(--sign); font-weight: 700; font-size: 20px; letter-spacing: .04em; border-color: var(--red); color: var(--red-d); }

/* çerez onayı */
.cerez { position: fixed; z-index: 60; left: var(--gut); right: var(--gut); bottom: 16px; max-width: 560px; margin: 0 auto; background: var(--paper); color: var(--ink); border: 4px solid var(--ink); box-shadow: 8px 10px 0 rgba(0,0,0,.35); padding: 14px 16px; font-family: var(--mono); font-size: 13px; line-height: 1.5; }
.cerez[hidden] { display: none; }
.cerez p { margin: 0 0 10px; }
.cerez a { color: var(--red-d); }
.cerez .row { display: flex; gap: 10px; flex-wrap: wrap; }
.cerez button { flex: 1; min-width: 120px; padding: 9px 12px; border: 3px solid var(--ink); font-family: var(--sign); font-weight: 700; letter-spacing: .06em; background: #fff8e6; color: var(--ink); }
.cerez button.ok { background: var(--ink); color: var(--paper); }

/* MÜDÜRLÜK DUVARI (bina önü) */
.duvar { position: relative; z-index: 3; width: min(980px, calc(100% - var(--gut) * 2)); margin: 48px auto 0; padding: 26px 18px 28px; border: 6px solid #2a2e36; text-align: center;
  background-color: #5a2f24;
  background-image: linear-gradient(#3d2019 2px, transparent 2px), linear-gradient(90deg, #3d2019 2px, transparent 2px), linear-gradient(90deg, #3d2019 2px, transparent 2px);
  background-size: 64px 30px, 64px 60px, 64px 60px; background-position: 0 0, 0 0, 32px 30px;
  box-shadow: inset 0 0 80px rgba(0,0,0,.55), 0 10px 0 rgba(0,0,0,.3); }
.duvar-plate { display: inline-flex; flex-direction: column; gap: 2px; padding: 10px 22px 8px; color: var(--ink); background: linear-gradient(180deg, var(--brass-l), var(--brass)); border: 3px solid var(--ink); box-shadow: 0 4px 0 rgba(0,0,0,.35); }
.duvar-plate b { font-family: var(--plate); font-size: 22px; letter-spacing: .12em; }
.duvar-plate small { font-family: var(--mono); font-size: 11px; font-weight: 500; }
.duvar-notlar { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 18px 16px; margin: 26px 0 22px; max-height: 560px; overflow-y: auto; padding: 8px 4px 14px; }
.duvar-not { position: relative; width: 180px; padding: 18px 12px 10px; background: var(--paper); color: var(--ink); text-align: left; transform: rotate(var(--r, 0deg)); box-shadow: 3px 5px 0 rgba(0,0,0,.35); }
.duvar-not::before { content: ''; position: absolute; top: 5px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff6a55, var(--red-d)); box-shadow: 0 2px 2px rgba(0,0,0,.4); }
.duvar-not b { display: block; font-family: var(--sign); font-size: 18px; line-height: 1.15; text-transform: uppercase; overflow-wrap: anywhere; }
.duvar-not p { margin: 6px 0 0; font-family: var(--type); font-size: 14px; line-height: 1.35; color: #1b2a58; overflow-wrap: anywhere; }
.duvar-not small { display: block; margin-top: 8px; font-family: var(--mono); font-size: 10px; color: var(--ink-s); }
.duvar-bos { width: 100%; margin: 0; font-family: var(--type); color: #f3e6cf; font-size: 16px; }
.duvar-sayi { width: 100%; margin: 0 0 -4px; font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: .2em; color: var(--brass-l); }
.duvar-btn { width: auto; padding: 12px 28px; }
.duvar-btn:disabled { background: #3b342b; box-shadow: none; font-size: 15px; }
@media (max-width: 520px) { .duvar-not { width: calc(50% - 10px); } }