/* Rasat greybox v2 · shared styles for the square (index.html), the plain control (duz.html) and the protocol (test.html).
   One set of words, two presentations: the plain page uses the same type, colours and sections, without the scene. */

@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 100 700; font-display: swap; src: url(fonts/IBMPlexSans-var-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 100 700; font-display: swap; src: url(fonts/IBMPlexSans-var-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/IBMPlexMono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/IBMPlexMono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* --g: how dark the square is (set before the first paint from Istanbul's hour, then by the day and night switch) */
:root {
  --g: 0; --gt: 0;
  --bg: color-mix(in oklab, #161b31 calc(var(--g) * 100%), #f7e5d2);
  --ink: color-mix(in oklab, #f2eee4 calc(var(--gt) * 100%), #1a1714);
  --mute: color-mix(in oklab, #b7bacb calc(var(--gt) * 100%), #615a4f);
  --line: color-mix(in oklab, #3d4466 calc(var(--gt) * 100%), #dcc9ae);
  --kart: color-mix(in oklab, #1d2340 calc(var(--g) * 100%), #faf0e4);
  --kagit: color-mix(in oklab, #252c4b calc(var(--g) * 100%), #fffdf8);
  --vurgu: color-mix(in oklab, #f4a99c calc(var(--gt) * 100%), #a8291c);
  --yesil: color-mix(in oklab, #a9c7a0 calc(var(--gt) * 100%), #46603f);
  --go: var(--ink); --go-ink: var(--bg);
  --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --pad: clamp(16px, 2.3vw, 36px);
  --ust: 60px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--ust) + 16px); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.55 var(--sans); text-rendering: optimizeLegibility; font-kerning: normal; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.14; letter-spacing: -0.012em; text-wrap: balance; }
p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
p, dd, li { text-wrap: pretty; }
ul, ol { padding: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 3px; border-radius: 3px; }
[tabindex="-1"]:focus { outline: none; }
button { font: inherit; color: inherit; }
.nw { white-space: nowrap; }
.ok { display: inline-block; width: .95em; height: .95em; margin-left: .3em; vertical-align: -.12em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ok.geri { margin: 0 .35em 0 0; }
.ok.oynat-ikon { margin: 0 .45em 0 0; fill: currentColor; stroke-width: 1.2; }
.ok.ara { margin: 0 .12em; }

/* single-line uppercase labels only; the closing letter-space is taken back */
.kicker { font: 500 11.5px/1.35 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--vurgu); margin-right: -.12em; white-space: nowrap; }

.atla { position: absolute; left: 12px; top: -80px; z-index: 100; padding: 10px 14px; border-radius: 6px; background: var(--ink); color: var(--bg); text-decoration: none; }
.atla:focus { top: 10px; }

/* ------------------------------------------------------------------ header */
.ust { position: sticky; top: 0; z-index: 40; height: var(--ust); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 var(--pad); background: var(--bg); }
.logo { display: block; flex: none; }
.logo img { display: block; height: 25px; width: auto; filter: brightness(calc(1 - var(--gt))) invert(var(--gt)); }
.ust-sag { display: flex; align-items: center; gap: 18px; }
.ust-sag .demo { order: 2; }
.dugme { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px; border-radius: 8px; border: 0; font: 600 15.5px/1 var(--sans); text-decoration: none; white-space: nowrap; cursor: pointer; }
.dugme.demo { background: var(--go); color: var(--go-ink); }
.dugme.demo:hover { background: color-mix(in oklab, var(--go) 84%, var(--vurgu)); }
.dugme.kucuk { min-height: 40px; padding: 0 16px; font-size: 14.5px; }
.ikincil-dugme { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.metin-dugme { min-height: 34px; padding: 4px 2px; border: 0; background: none; font-size: 13.5px; color: var(--mute); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.metin-dugme:hover { color: var(--ink); }
.metin-dugme[aria-pressed="true"] { color: var(--ink); font-weight: 600; }
.gece-dugme[aria-pressed="true"] { color: var(--ink); }

/* ------------------------------------------------------------------ the hero text (both pages) */
.giris-kicker { margin-bottom: 10px; }
h1 { font-size: clamp(29px, 1.4vw + 14px, 38px); line-height: 1.1; letter-spacing: -0.018em; }
.lead { font-size: 15.5px; line-height: 1.52; }
.giris-metin { margin-top: 16px; font-size: 17px; line-height: 1.5; }
.ozel { margin-top: 10px; font-size: 15px; line-height: 1.45; font-weight: 500; }
.cagri { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 16px; }
.ikincil { font-weight: 500; text-underline-offset: 4px; }
.eposta-satir { margin-top: 8px; font-size: 13.5px; line-height: 1.45; color: var(--mute); }
/* one reading order on every layout: H1, the lead, the Shu! line, the evidence card, then the two calls */
.sol { display: flex; flex-direction: column; }
.sol > .metin { display: contents; }
.giris-kicker { order: 1; } .sol h1 { order: 2; } .giris-metin { order: 3; } .ozel { order: 4; } .metin > .kanit { order: 5; } .cagri { order: 6; }

/* the evidence card: one change, read like the briefing reads it (kararlar 3) */
.kanit { margin-top: 18px; padding: 13px 16px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--kagit); box-shadow: 0 1px 0 var(--line), 0 18px 36px -28px rgba(40, 25, 10, .45); }
.kanit-baslik { font-size: 16px; line-height: 1.25; letter-spacing: 0; }
.kanit-temsili { font: 500 11.5px/1 var(--mono); color: var(--mute); white-space: nowrap; }
.kanit-etiket { margin-top: 3px; font: 500 11.5px/1.4 var(--mono); color: var(--mute); }
.kanit-hafta { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; margin-top: 9px; }
.kanit-hafta .ok { margin: 0; width: 15px; height: 15px; color: var(--mute); }
.kanit-hafta p { padding: 7px 10px 8px; border-radius: 8px; background: color-mix(in oklab, var(--ink) 5%, transparent); }
.kanit-hafta p:last-child { background: color-mix(in oklab, var(--vurgu) 9%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--vurgu) 38%, transparent); }
.kh-ad { display: block; font: 500 10.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); margin-right: -.08em; }
.kh-metin { display: block; margin-top: 2px; font-size: 15px; font-weight: 600; line-height: 1.3; }
.kanit-satir { margin-top: 8px; font-size: 14px; line-height: 1.43; }
.kanit-alt { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 14px; margin-top: 10px; font-size: 13px; }
.kaynak-kisa { color: var(--mute); }
.kanit-alt a { font-weight: 600; }

/* the four steps of a week (kararlar 5): pending, current, done */
.adimlar { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); }
.adimlar-baslik { margin-bottom: 4px; font: 500 11px/1.35 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); margin-right: -.12em; }
.cip { margin-bottom: 8px; font-size: 13px; color: var(--mute); }
.cip-etiket { display: inline-block; padding: 1px 7px 2px; border: 1px dashed color-mix(in oklab, var(--ink) 35%, var(--line)); border-radius: 5px; font: 500 11px/1.4 var(--mono); }
.adimlar ol { list-style: none; display: grid; gap: 5px; }
.adimlar li { display: flex; align-items: baseline; gap: 10px; font-size: 14.5px; line-height: 1.35; color: var(--ink); transition: color .35s, opacity .35s; }
.adim-m { display: flex; flex-direction: column; }
.adim-fiil { font-weight: 600; }
.adim-alt { font-size: .86em; line-height: 1.3; color: var(--mute); }
.adimlar .no { flex: none; display: inline-grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; border: 1px solid currentColor; font: 500 11px/1 var(--mono); transform: translateY(-1px); transition: background .35s, color .35s; }
.oynuyor .adimlar li { opacity: .5; }
.oynuyor .adimlar li.tamam, .oynuyor .adimlar li.etkin { opacity: 1; }
.adimlar li.etkin { font-weight: 500; }
.adimlar li.etkin .no, .adimlar li.tamam .no { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.hafta-oynat { min-height: 38px; padding: 0 14px; font-size: 14px; font-weight: 600; }
.hafta-oynat[aria-pressed="true"] { background: var(--ink); color: var(--bg); }

/* the caption: what the scene shows right now */
.altyazi { min-height: 0; }
.altyazi.bos { visibility: hidden; }
.altyazi-gun { font: 500 11px/1.35 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--vurgu); transition: opacity .25s; }
.altyazi-metin { font-size: 14.5px; line-height: 1.38; transition: opacity .25s; }
.altyazi-metin.gec, .altyazi-gun.gec { opacity: 0; }

/* ------------------------------------------------------------------ the square (index.html), wide screens */
.sayfa-meydan .giris {
  --col: clamp(400px, 34vw, 520px);
  display: grid; grid-template-columns: var(--col) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto auto auto;
  grid-template-areas: "metin sahne" "metin zaman" "metin serit" "metin kontrol";
  column-gap: var(--pad); min-height: calc(100svh - var(--ust)); padding: 0 var(--pad) 12px;
}
.sayfa-meydan .giris > .sol { grid-area: metin; justify-content: center; min-width: 0; padding: 4px 0 12px; }
.sayfa-meydan .giris > .adimlar { grid-area: zaman; display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "baslik cip dugme" "liste liste liste"; align-items: center; gap: 6px 14px; margin: 0; padding: 8px 0 0; border: 0; }
.sayfa-meydan .giris > .adimlar .adimlar-baslik { grid-area: baslik; margin: 0; }
.sayfa-meydan .giris > .adimlar .cip { grid-area: cip; margin: 0; }
.sayfa-meydan .giris > .adimlar .hafta-oynat { grid-area: dugme; }
.sayfa-meydan .giris > .adimlar ol { grid-area: liste; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.sayfa-meydan .giris > .adimlar li { font-size: 13.5px; line-height: 1.32; }
.sayfa-meydan .giris > .altyazi { grid-area: sahne; align-self: end; justify-self: center; z-index: 6; max-width: min(640px, calc(100% - 24px)); margin: 0 12px 12px; padding: 8px 14px 9px; border-radius: 10px; background: rgba(26, 23, 20, .88); color: #fffaf2; box-shadow: 0 8px 24px -12px rgba(20, 12, 4, .6); }
html[data-gece="1"] .sayfa-meydan .giris > .altyazi { box-shadow: 0 0 0 1px rgba(255, 255, 255, .2), 0 8px 24px -12px rgba(0, 0, 0, .6); }
.sayfa-meydan .giris > .altyazi .altyazi-gun { color: #f2b0a2; }
.sahne-kutu { grid-area: sahne; position: relative; min-height: 0; container-type: size; }
.sahne { position: absolute; left: 50%; top: 50%; width: min(100cqw, 133.93cqh); aspect-ratio: 4800 / 3584; transform: translate(-50%, -50%); overflow: hidden; transition: opacity .15s; }
.sahne.sondur { opacity: 0; }
.sahne-ic { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 0 0; }
.plaka, .kirpim, .yedek { position: absolute; display: block; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.plaka { left: 0; top: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .5s; }
.kirpim { left: 22%; top: 2.009%; width: 56%; height: 49.972%; opacity: 0; transition: opacity .5s; }
.plaka.hazir, .kirpim.hazir { opacity: 1; }
.plaka-gece.hazir, .kirpim-gece.hazir { opacity: var(--g); transition: none; }
.yedek { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.kaplama { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.kaplama .isabet path { pointer-events: all; fill: transparent; cursor: pointer; }
.kaplama .vurgular path { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; opacity: 0; transition: opacity .15s; }
.kaplama .vurgular .v-koyu { stroke: #1a1714; stroke-width: 4.5; }
.kaplama .vurgular .v-acik { stroke: #fffaf2; stroke-width: 2; }
.kaplama .vurgular .vurgu path { opacity: .9; }
.kaplama .kg-kagit { fill: color-mix(in oklab, #d3d6ee calc(var(--g) * 100%), #fffdf7); }
.kaplama .kg-kagit2 { fill: color-mix(in oklab, #a9add0 calc(var(--g) * 100%), #e9e1cf); }
.kaplama .kg-kagit3 { fill: color-mix(in oklab, #8f93b8 calc(var(--g) * 100%), #cfc5ae); }
.kaplama .yer-tutucu { fill: color-mix(in oklab, #5b6080 calc(var(--g) * 100%), #a9a59d); }
.kaplama .yer-tutucu2 { fill: color-mix(in oklab, #4a4f6d calc(var(--g) * 100%), #8f8b83); }
.kaplama .yer-tutucu3 { fill: color-mix(in oklab, #6c7192 calc(var(--g) * 100%), #c3bfb6); }

/* markers: the dot sits on the place, the name beside it; a dark line and a light halo keep 3:1 on any ground */
.isaretler { position: absolute; inset: 0; pointer-events: none; transition: opacity .3s; }
.isaret { position: absolute; display: flex; align-items: center; gap: 6px; pointer-events: auto; color: #1a1714; text-decoration: none; transform: translate(-16px, -16px); opacity: 0; transition: opacity .3s; }
.isaret[data-yon="l"] { flex-direction: row-reverse; transform: translate(calc(-100% + 16px), -16px); }
.isaret[data-yon="u"] { flex-direction: column-reverse; transform: translate(-50%, calc(-100% + 16px)); }
.isaret[data-yon="a"] { flex-direction: column; transform: translate(-50%, -16px); }
.isaret::before { content: ""; position: absolute; inset: -7px -4px; }
.hazir-isaret .isaret, .js-yok .isaret { opacity: 1; }
.isaret-nokta { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #fffaf2; border: 1.5px solid #1a1714; box-shadow: 0 0 0 3px rgba(255, 250, 242, .55), 0 3px 8px rgba(20, 12, 4, .28); transition: transform .15s; }
.isaret-nokta .ikon { width: 18px; height: 18px; }
.isaret-ad { padding: 5px 9px 6px; border-radius: 13px; background: rgba(255, 250, 242, .95); border: 1px solid rgba(26, 23, 20, .4); font: 600 12.5px/1.15 var(--sans); white-space: nowrap; box-shadow: 0 2px 6px rgba(20, 12, 4, .18); }
.isaret-ad.uzun { white-space: normal; width: max-content; max-width: 9.5em; }
.isaret.dar .isaret-ad { display: none; }
.isaret:hover .isaret-nokta, .isaret.vurgu .isaret-nokta { transform: scale(1.14); }
.isaret:hover .isaret-ad, .isaret.vurgu .isaret-ad { background: #1a1714; color: #fffaf2; border-color: #1a1714; }
.isaretler.olay .isaret { opacity: .6; }
.isaretler.olay .isaret:hover, .isaretler.olay .isaret.vurgu { opacity: 1; }
.yer-acik .isaretler { opacity: 0; pointer-events: none; }
.yer-acik .isaretler .isaret { pointer-events: none; }

/* the Bölümler strip: one tab stop, arrow keys inside */
.sayfa-meydan .serit { grid-area: serit; display: flex; align-items: stretch; gap: 10px; padding-top: 10px; container-type: inline-size; }
.serit-baslik { display: none; font: 500 11px/1.35 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.serit ul { list-style: none; flex: 1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.serit a { height: 100%; display: flex; align-items: center; gap: 9px; min-height: 54px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--kart); text-decoration: none; transition: background .3s, border-color .3s, color .3s; }
.serit .ikon { flex: none; width: 22px; height: 22px; }
.serit-ad { display: flex; flex-direction: column; min-width: 0; }
.serit-ad b { font-size: 13.5px; font-weight: 600; line-height: 1.18; }
.serit a:hover, .serit a.vurgu, .serit a.etkin { background: color-mix(in oklab, var(--ink) 10%, var(--kart)); border-color: color-mix(in oklab, var(--ink) 45%, var(--line)); }
.serit a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
/* tiles size to their names, so the longest (Vitrin ve Kanaat Önderleri) still keeps to two lines */
.sayfa-meydan .serit ul { display: flex; }
.sayfa-meydan .serit li { flex: 1 1 auto; }
@container (max-width: 820px) { .serit .ikon { display: none; } .serit a { padding: 7px 9px; } .serit-ad b { font-size: 13px; } }

.sayfa-meydan .kontrol { grid-area: kontrol; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px 18px; padding-top: 6px; }
.yalniz-telefon { display: none !important; }

/* the reading column: a place's section lifted out of the page and set where the hero text was */
.okuma { grid-area: metin; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px 6px 18px 0; scrollbar-width: thin; }
.okuma-don { margin-bottom: 10px; }
.don { font-weight: 600; color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; }
.yer-acik .giris > .sol, .yer-acik .sayfa-meydan .giris > .altyazi, .yer-acik .sayfa-meydan .giris > .adimlar { display: none; }
.yer-acik main > :not(.giris), .yer-acik .alt { display: none; }
.yer-acik .sayfa-meydan .giris { height: calc(100svh - var(--ust)); }
.okuma .yer, .okuma .ornek-brifing { max-width: none; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.okuma .ornek-brifing { margin-top: 30px; }
.okuma .yer h2 { font-size: clamp(24px, 1vw + 14px, 30px); }
.okuma .reklamlar { grid-template-columns: minmax(0, 1fr); }
.okuma .reklam-gorsel { max-width: 200px; }
.parla { animation: parla 1.6s ease-out; }
@keyframes parla { from { background: color-mix(in oklab, var(--vurgu) 16%, transparent); } to { background: transparent; } }
.oda-dugmeler { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 4px; }
.oda-dugmeler button { min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--kart); font-size: 13.5px; cursor: pointer; }
.oda-dugmeler button:hover { border-color: var(--ink); }
.oda-dugmeler .oda-baslik { width: 100%; font: 500 11px/1.35 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }

/* the grey rooms behind the two doors */
.oda-yer { position: absolute; inset: 0; pointer-events: none; }
.oda { position: absolute; inset: -2px; opacity: 0; transition: opacity .17s; pointer-events: none; background: var(--bg); }
.oda.acik { opacity: 1; pointer-events: auto; }
.oda svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.oda {
  --o-duvar: color-mix(in oklab, #3a4062 calc(var(--g) * 100%), #e2ded6);
  --o-duvar2: color-mix(in oklab, #333957 calc(var(--g) * 100%), #d6d1c8);
  --o-zemin: color-mix(in oklab, #2b3049 calc(var(--g) * 100%), #cbc5ba);
  --o-kesit: color-mix(in oklab, #1f2338 calc(var(--g) * 100%), #8f897e);
  --o-kesit2: color-mix(in oklab, #191d30 calc(var(--g) * 100%), #7a7469);
  --o-esya: color-mix(in oklab, #59607f calc(var(--g) * 100%), #b9b2a6);
  --o-esya2: color-mix(in oklab, #4b5170 calc(var(--g) * 100%), #a59e91);
  --o-esya3: color-mix(in oklab, #6a7193 calc(var(--g) * 100%), #cdc7bc);
  --o-cizgi: color-mix(in oklab, #9aa0c0 calc(var(--g) * 100%), #6b655b);
  --o-kagit: color-mix(in oklab, #c9cce6 calc(var(--g) * 100%), #fffdf7);
  --o-gok: color-mix(in oklab, #263256 calc(var(--g) * 100%), #e9f0f2);
  --o-isik: color-mix(in oklab, #ffd98a calc(var(--g) * 100%), #fff3c9);
}
.o-duvar { fill: var(--o-duvar); } .o-duvar2 { fill: var(--o-duvar2); } .o-zemin { fill: var(--o-zemin); }
.o-kesit { fill: var(--o-kesit); } .o-kesit2 { fill: var(--o-kesit2); }
.o-esya, .o-esya.ust { fill: var(--o-esya3); } .o-esya.sol { fill: var(--o-esya); } .o-esya.sag { fill: var(--o-esya2); }
.o-koyu.ust { fill: var(--o-esya); } .o-koyu.sol { fill: var(--o-esya2); } .o-koyu.sag { fill: var(--o-kesit); }
.o-kagit { fill: var(--o-kagit); } .o-gok { fill: var(--o-gok); } .o-isik { fill: var(--o-isik); }
.o-cizgi { stroke: var(--o-cizgi); fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.o-ince { stroke: var(--o-cizgi); fill: none; stroke-width: 1; }
.o-kirmizi { stroke: #c33323; fill: none; stroke-width: 2.4; stroke-linejoin: round; }
.o-yazi { font: 500 10px var(--mono); fill: var(--o-cizgi); letter-spacing: .02em; }
.o-yazi.bugun { fill: #fffaf2; }
.o-yazi.koyu { fill: #2b2620; font-size: 10.5px; }
.o-yazi.pano { fill: #2b2620; font-size: 11px; }
.o-bugun { fill: #c33323; }
.oda-harita { position: absolute; right: 12px; bottom: 12px; width: 148px; aspect-ratio: 4800 / 3584; border-radius: 6px; overflow: hidden; border: 1px solid rgba(26, 23, 20, .5); background: var(--bg) center / cover no-repeat; box-shadow: 0 6px 16px -8px rgba(20, 12, 4, .45); pointer-events: none; }
.oda-harita i { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #c33323; border: 2px solid #fffaf2; }
.oda-harita b { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 6px; background: rgba(26, 23, 20, .78); color: #fffaf2; font: 500 10.5px/1.2 var(--mono); }
/* the office's readable briefing page (kararlar 18): a flat page set over the room, not a painted screen */
/* sized with the picture (cqw of the scene box), so it keeps clear of the table on smaller screens */
.oda-kagit { position: absolute; z-index: 2; left: 0; top: 0; width: min(250px, 33cqw); padding: 10px 12px 11px; border: 1px solid rgba(26, 23, 20, .28); border-radius: 6px; background: #fffdf8; color: #1a1714; box-shadow: 0 12px 28px -16px rgba(20, 12, 4, .55); font-size: clamp(10.5px, 1.6cqw, 12.5px); line-height: 1.4; pointer-events: none; }
.oda-kagit .ok-ust { font: 500 10px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #6b655b; margin-right: -.1em; }
.oda-kagit .ok-bas { margin: 3px 0 6px; font-size: 1.08em; font-weight: 600; line-height: 1.3; }
.oda-kagit p { text-wrap: wrap; }
.oda-kagit p + p { margin-top: 4px; }
.oda-kagit .ok-alt { margin-top: 7px; font: 500 10px/1.3 var(--mono); color: #6b655b; }
.oda.oynat .oda-kagit { animation: o-acil .5s cubic-bezier(.2, .8, .2, 1.2) 1.7s both; transform-origin: 50% 100%; }
.sicak { position: absolute; display: flex; align-items: center; gap: 6px; transform: translate(-15px, -15px); padding: 0; border: 0; background: none; cursor: pointer; opacity: 0; transition: opacity .25s; }
.sicak[data-yon="l"] { flex-direction: row-reverse; transform: translate(calc(-100% + 15px), -15px); }
.sicak::before { content: ""; position: absolute; inset: -8px -4px; }
.sicak.gor { opacity: 1; }
.sicak i { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #c33323; color: #fffaf2; border: 2px solid #fffaf2; box-shadow: 0 2px 8px rgba(20, 12, 4, .35); font: 600 13px/1 var(--mono); font-style: normal; }
.sicak span { padding: 5px 9px 6px; border-radius: 999px; background: rgba(255, 250, 242, .96); border: 1px solid rgba(26, 23, 20, .4); color: #1a1714; font: 600 12.5px/1 var(--sans); white-space: nowrap; }
.sicak:hover span, .sicak.secili span { background: #1a1714; color: #fffaf2; }
/* the rooms' work in motion (kararlar 18): Rasathane repeats collect, compare, put aside, write on an 8 s cycle; the set-up
   board stays still. With motion reduced or stopped each room shows its finished state. */
.m { transform-box: fill-box; transform-origin: center; }
.oda.oynat .m-dus { animation: d-dus 8s cubic-bezier(.2, .8, .2, 1) infinite both; }
.oda.oynat .m-kay { animation: d-kay 8s ease-out infinite both; }
.oda.oynat .m-cerceve { animation: d-cerceve 8s ease-out infinite both; }
.oda.oynat .m-not { animation: d-not 8s ease-out infinite both; }
.oda.oynat .m-tepsi { animation: d-tepsi 8s ease-in-out infinite both; }
.oda.oynat .m-satir1 { animation: d-satir1 8s ease-out infinite both; }
.oda.oynat .m-satir2 { animation: d-satir2 8s ease-out infinite both; }
.oda.oynat .m-buhar { animation: o-buhar 2.4s ease-in-out infinite both; }
.oda.oynat .m-ucak { animation: o-ucak 1.6s cubic-bezier(.4, 0, .2, 1) .2s both; }
.oda.oynat .m-acil { animation: o-acil .5s cubic-bezier(.2, .8, .2, 1.2) 1.65s both; }
.oda.oynat .m-not-kare { animation: o-acil .35s ease-out both; animation-delay: calc(2.2s + var(--i, 0) * 80ms); }
.m-cerceve, .m-not, .m-satir1, .m-satir2 { stroke-dasharray: 1 1; }
.m-buhar { opacity: 0; }
@keyframes d-dus { 0% { transform: translateY(-46px); opacity: 0; } 9% { transform: none; opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes d-kay { 0%, 12% { transform: translateX(-34px); opacity: 0; } 20% { transform: none; opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes d-cerceve { 0%, 22% { stroke-dashoffset: 1; opacity: 1; } 30% { stroke-dashoffset: 0; } 90% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes d-not { 0%, 32% { stroke-dashoffset: 1; opacity: 1; } 38% { stroke-dashoffset: 0; } 90% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes d-tepsi { 0%, 42% { transform: translate(var(--tx, -60px), var(--ty, -20px)); } 54%, 100% { transform: none; } }
@keyframes d-satir1 { 0%, 58% { stroke-dashoffset: 1; opacity: 1; } 66% { stroke-dashoffset: 0; } 90% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes d-satir2 { 0%, 66% { stroke-dashoffset: 1; opacity: 1; } 74% { stroke-dashoffset: 0; } 90% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes o-buhar { 0%, 100% { opacity: 0; transform: translateY(5px); } 50% { opacity: .85; transform: translateY(-5px); } }
@keyframes o-ucak { from { transform: translate(var(--ux, 120px), var(--uy, -90px)) scale(1.3); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { transform: none; opacity: 0; } }
@keyframes o-acil { from { transform: scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }
html[data-dur="1"] .oda * { animation-play-state: paused !important; }

/* ------------------------------------------------------------------ the page under the square: a complete landing page on its own (both pages) */
main > section, .yerler, .yerler > section { scroll-margin-top: calc(var(--ust) + 12px); }
.yerler { max-width: 840px; margin: 0 auto; padding: 56px var(--pad) 0; display: grid; gap: 22px; }
.yer { padding: clamp(22px, 3vw, 36px); border: 1px solid var(--line); border-radius: 16px; background: var(--kart); }
.yer-bas { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: center; }
.yer-ikon { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 11px; border: 1px solid var(--line); background: var(--kagit); }
.yer-ikon .ikon { width: 23px; height: 23px; }
.yer-bas .kicker { align-self: end; }
.yer h2 { align-self: start; margin-top: 3px; font-size: clamp(24px, 1.2vw + 15px, 31px); }
.yer > .lead { margin-top: 14px; font-size: 16px; }
.nasil { list-style: none; display: grid; gap: 12px; margin-top: 16px; }
.blok { scroll-margin-top: 12px; border-radius: 8px; font-size: 16px; line-height: 1.5; }
.alt-baslik { margin-top: 20px; font-size: 16px; }
.not-satir { margin-top: 12px; font-size: 15px; }
.kaynak { margin-top: 10px; font-size: 13.5px; color: var(--mute); }
.not-blok { display: grid; gap: 8px; margin-top: 16px; padding: 14px 16px; border-left: 3px solid var(--vurgu); border-radius: 0 10px 10px 0; background: color-mix(in oklab, var(--vurgu) 6%, transparent); font-size: 15px; }
.neden { margin-top: 6px; font-size: 14.5px; }
.kapanis { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 24px; font-weight: 500; }
.sonraki { margin-top: 14px; font-size: 14.5px; }
.sonraki a { color: var(--mute); }
.sonraki a:hover { color: var(--ink); }
.ikincil-bag { margin-top: 16px; }

.hafta-sec, .odak-sec { display: none; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.hafta-sec button, .odak-sec button { min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--ink); background: transparent; font-size: 14.5px; font-weight: 500; cursor: pointer; }
.hafta-sec button[aria-pressed="true"], .odak-sec button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
html.yer-acik .sayfa-meydan .hafta-sec, html.yer-acik .sayfa-meydan .odak-sec { display: flex; }
.js-yok .gece-dugme, .js-yok #durDugme, .js-yok #metinDugme, .js-yok .hafta-oynat { display: none !important; }
.sayfa-duz .yalniz-sahne, .js-yok .yalniz-sahne { display: none; }

/* ad cards: both weeks at once, side by side (kararlar 16) */
.reklamlar { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.reklam { padding: 10px 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--kagit); }
.reklam-rakip { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 10px; margin-bottom: 8px; font-size: 13.5px; font-weight: 600; }
.reklam-durum { font-size: 12.5px; font-weight: 600; color: var(--vurgu); }
.reklam[data-durum="suruyor"] .reklam-durum { color: var(--mute); font-weight: 500; }
.reklam[data-durum="degisti"], .reklam[data-durum="yeni"], .reklam[data-durum="teklif"] { border-color: color-mix(in oklab, var(--vurgu) 55%, var(--line)); }
.reklam-haftalar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.reklam-gorsel { display: block; width: 100%; height: auto; border-radius: 6px; color: var(--mute); }
.reklam-hafta { margin-top: 7px; font: 500 10.5px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); margin-right: -.1em; }
.reklam-metin { margin-top: 3px; font-size: 13.5px; font-weight: 500; line-height: 1.35; }
.rh[data-hafta="bu"] .reklam-hafta { color: var(--vurgu); }
.rh .reklam-gorsel { transition: opacity .2s ease; }
[data-secili-hafta="gecen"] .rh[data-hafta="bu"] .reklam-gorsel, [data-secili-hafta="bu"] .rh[data-hafta="gecen"] .reklam-gorsel { opacity: .4; }
[data-secili-hafta="gecen"] .rh[data-hafta="gecen"] .reklam-gorsel, [data-secili-hafta="bu"] .rh[data-hafta="bu"] .reklam-gorsel { outline: 2px solid var(--vurgu); outline-offset: 2px; }

.haberler, .surumler, .paylasimlar, .alintilar { list-style: none; display: grid; gap: 10px; margin-top: 12px; }
.haber, .surumler li, .paylasim, .alinti { padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--kagit); }
.haber-tur { font: 500 11px/1.4 var(--mono); letter-spacing: .06em; color: var(--mute); text-transform: uppercase; }
.haber-tur + p { margin-top: 4px; }
.haber-baslik { font-weight: 600; }
.paylasim, .surumler li { font-size: 15px; line-height: 1.5; }
.alinti { font-size: 16px; font-weight: 500; line-height: 1.45; }
.alinti-kim { font-weight: 400; color: var(--mute); white-space: nowrap; }
.surumler li p + p { margin-top: 4px; }
.paylasim p:last-child { margin-top: 4px; }
.alinti blockquote { font-size: 16px; line-height: 1.45; font-weight: 500; }

.ornek-brifing, .kimin, .sss, .demo-bolum { max-width: 800px; margin: 0 auto; padding: 64px var(--pad) 0; }
.yerler > .ornek-brifing { max-width: none; width: 100%; margin: 0; padding: 4px 0 18px; }
.ornek-brifing h2, .kimin h2, .sss h2, .demo-bolum h2 { font-size: clamp(26px, 1.4vw + 16px, 34px); }
.kagit { margin-top: 18px; padding: clamp(20px, 3vw, 34px); border: 1px solid var(--line); border-radius: 6px; background: var(--kagit); box-shadow: 0 1px 0 var(--line), 0 22px 44px -30px rgba(40, 25, 10, .45); }
.kagit-alt { font-size: 19px; font-weight: 600; line-height: 1.3; }
.kagit-alt .temsili { font: 500 12px/1 var(--mono); color: var(--mute); white-space: nowrap; }
.brifing-kisim { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.brifing-kisim .neden { margin-top: 6px; }
.brifing-kisim .kaynak { margin-top: 4px; }
.ornek-brifing .sonraki { margin-top: 18px; }
.roller { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.roller li { padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--kart); font-size: 15px; }
.roller b { font-weight: 600; }
.sss dl { margin-top: 14px; display: grid; gap: 4px; }
.sss dt { margin-top: 14px; font-weight: 600; font-size: 16.5px; }
.sss dd { margin-top: 2px; }
.demo-bolum { padding-bottom: 72px; }
.demo-bolum .eposta-satir { margin-top: 10px; font-size: 14px; }
.demo-bolum .cagri { margin-top: 18px; }
.alt { max-width: 800px; margin: 0 auto; padding: 28px var(--pad) 48px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--mute); }
.alt p { margin-top: 8px; }
.alt > p:first-child { margin-top: 0; }
.alt-satir { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-top: 8px; }
.alt-satir p { margin: 0; }
.musteri { position: relative; font-size: 13.5px; color: var(--mute); }
.musteri summary { display: inline-flex; align-items: center; min-height: 34px; cursor: pointer; list-style: none; text-decoration: underline; text-underline-offset: 3px; }
.musteri summary::-webkit-details-marker { display: none; }
.musteri[open] summary { color: var(--ink); }
.musteri p { margin: 0 0 6px; color: var(--ink); }
.alt-cubuk { display: none; }

/* ------------------------------------------------------------------ the plain control page */
.sayfa-duz .giris { display: flex; flex-direction: column; max-width: 800px; margin: 0 auto; padding: 40px var(--pad) 8px; }
.sayfa-duz .giris > .sol { order: 1; }
.sayfa-duz .giris-metin { margin-top: 20px; font-size: 18.5px; } .sayfa-duz .kanit { margin-top: 24px; } .sayfa-duz .cagri { margin-top: 22px; }
.sayfa-duz .giris > .adimlar { order: 2; }
.sayfa-duz .adimlar ol, .metin-gor .sayfa-meydan .giris > .adimlar ol { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sayfa-duz .giris > .serit { order: 3; margin-top: 30px; }
.sayfa-duz h1 { font-size: clamp(30px, 2.2vw + 14px, 44px); }
.sayfa-duz .serit-baslik { display: block; margin-bottom: 8px; }
.sayfa-duz .serit ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sayfa-duz .serit .ikon { display: none; }
.sayfa-duz .serit a { min-height: 50px; padding: 8px 12px; }

/* ------------------------------------------------------------------ phones and narrow windows */
@media (max-width: 760px), (max-aspect-ratio: 11/10) {
  :root { --ust: 56px; --pad: 16px; }
  body { font-size: 16px; padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  .ust .gece-dugme { display: none; }
  .ust-sag { gap: 12px; }
  .logo img { height: 21px; }
  .alt-cubuk { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--line); }
  .alt-cubuk .dugme { flex: 1; min-height: 46px; }
  .yalniz-telefon { display: inline-block !important; }
  h1 { font-size: clamp(26px, 6.6vw, 31px); line-height: 1.12; }

  /* kararlar 17: H1, the three blocks, the evidence card and Demo, then a ~240 px scene, its caption and the steps */
  .sayfa-meydan .giris { display: flex; flex-direction: column; min-height: 0; padding: 0 0 6px; }
  .sayfa-meydan .giris > .sol, .sayfa-meydan .sol > .metin { display: contents; }
  .sayfa-meydan .metin > .giris-kicker { order: 1; margin: 12px var(--pad) 8px; }
  .sayfa-meydan .metin > h1 { order: 2; margin: 0 var(--pad); }
  .sayfa-meydan .metin > .giris-metin { order: 3; margin: 14px var(--pad) 0; font-size: 16.5px; }
  .sayfa-meydan .metin > .ozel { order: 4; margin: 10px var(--pad) 0; }
  .sayfa-meydan .metin > .kanit { order: 5; margin: 18px var(--pad) 0; }
  .sayfa-meydan .metin > .cagri { order: 6; margin: 16px var(--pad) 0; }
  .sayfa-meydan .sahne-kutu { order: 8; width: 100%; height: clamp(232px, 62vw, 270px); margin-top: 22px; flex: none; container-type: normal; }
  .sayfa-meydan .sahne { left: 0; top: 0; width: 100%; height: 100%; aspect-ratio: auto; transform: none; }
  .sayfa-meydan .giris > .altyazi { order: 9; align-self: stretch; max-width: none; min-height: 3.7em; margin: 10px var(--pad) 0; padding: 0; border-radius: 0; background: none; color: var(--ink); box-shadow: none; }
  html[data-gece="1"] .sayfa-meydan .giris > .altyazi { box-shadow: none; }
  .sayfa-meydan .giris > .altyazi .altyazi-gun { color: var(--vurgu); }
  .sayfa-meydan .giris > .adimlar { order: 10; display: block; margin: 16px var(--pad) 0; padding: 14px 0 0; border-top: 1px solid var(--line); }
  .sayfa-meydan .giris > .adimlar .adimlar-baslik { margin-bottom: 4px; }
  .sayfa-meydan .giris > .adimlar .cip { margin-bottom: 8px; }
  .sayfa-meydan .giris > .adimlar ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
  .sayfa-meydan .giris > .adimlar li { font-size: 14.5px; }
  .sayfa-meydan .giris > .adimlar .hafta-oynat { margin-top: 12px; }
  .sayfa-meydan .okuma { order: 9; padding: 14px var(--pad) 8px; overflow: visible; }
  .sayfa-meydan .giris > .serit { order: 11; display: block; padding: 26px var(--pad) 0; container-type: normal; }
  .sayfa-meydan .kontrol { order: 12; justify-content: flex-start; padding: 12px var(--pad) 0; }
  .serit-baslik { display: block; margin-bottom: 8px; }
  .serit ul, .sayfa-meydan .serit ul { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .serit .ikon { display: block; }
  .serit a { min-height: 56px; padding: 8px 12px; }
  .serit-ad b { font-size: 15px; }
  .js-yok .isaretler { display: none; }
  .isaret-nokta { width: 30px; height: 30px; }
  .isaret-ad { font-size: 11px; padding: 4px 7px; }
  .isaret, .isaret[data-yon="r"] { flex-direction: row; transform: translate(-15px, -15px); }
  .isaret[data-yon="l"] { flex-direction: row-reverse; transform: translate(calc(-100% + 15px), -15px); }
  .isaret[data-yon="u"] { flex-direction: column-reverse; transform: translate(-50%, calc(-100% + 15px)); }
  .isaret[data-yon="a"] { flex-direction: column; transform: translate(-50%, -15px); }
  .isaret-ad { transition: opacity .25s; }
  .isaretler.olay .isaret.yerinde .isaret-ad { opacity: 0; }
  /* a place open: a taller picture, then its reading card */
  .yer-acik .sayfa-meydan .giris > .sol { display: none; }
  .yer-acik .sayfa-meydan .giris { height: auto; }
  .yer-acik .sayfa-meydan .sahne-kutu { height: clamp(260px, 50svh, 460px); margin-top: 0; }
  .yer-acik .sayfa-meydan .kontrol { display: none; }
  .yer-acik .giris > .serit { padding-top: 20px; }
  .oda-harita { width: 84px; right: 8px; bottom: 8px; }
  .oda-kagit { width: min(230px, 62%); font-size: 11.5px; padding: 9px 10px 10px; }
  .sicak span { display: none; }

  .yerler { padding: 44px 12px 0; }
  .yer-bas { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "kicker kicker" "ikon baslik"; row-gap: 8px; }
  .yer-bas .kicker { grid-area: kicker; }
  .yer-ikon { grid-area: ikon; grid-row: auto; width: 40px; height: 40px; }
  .yer h2 { grid-area: baslik; margin-top: 0; align-self: center; }
  .kicker { font-size: 10.5px; letter-spacing: .08em; margin-right: -.08em; }
  .yer { border-radius: 14px; }
  .reklamlar, .okuma .reklamlar, .roller { grid-template-columns: minmax(0, 1fr); }
  /* the two weeks one above the other (kararlar 16), each as a small picture beside its words */
  .reklam-haftalar { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .rh { display: grid; grid-template-columns: 112px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 12px; align-items: start; }
  .rh .reklam-gorsel, .okuma .rh .reklam-gorsel { grid-row: 1 / span 2; max-width: none; }
  .rh .reklam-hafta { margin-top: 1px; }
  .sayfa-duz .giris { padding-top: 22px; }
  .sayfa-duz h1 { font-size: clamp(26px, 6.6vw, 31px); }
  .sayfa-duz .giris-metin { font-size: 16.5px; }
  .kagit-alt .ayrac-t, .alt-satir .ayrac { display: none; }
  .kagit-alt .temsili { display: block; margin-top: 6px; }
  .alt-satir { flex-direction: column; align-items: flex-start; }
  .sayfa-duz .serit ul { grid-template-columns: minmax(0, 1fr); }
  .sayfa-duz .adimlar ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
}
@media (max-width: 360px) {
  .yer-ikon { display: none; }
  .yer h2 { grid-column: 1 / -1; }
}
@media (max-width: 400px) {
  .dugme.kucuk { padding: 0 12px; }
  .cagri { gap: 10px 16px; }
  .kanit-hafta { gap: 6px; }
  .kh-metin { font-size: 14.5px; }
}

/* shorter laptop screens: the text column tightens so the evidence card stays on the first screen */
@media (min-width: 761px) and (min-aspect-ratio: 11/10) and (max-height: 860px) {
  .sayfa-meydan .giris > .sol { padding-bottom: 8px; }
  .sayfa-meydan .giris-kicker { margin-bottom: 7px; }
  .sayfa-meydan h1 { font-size: clamp(26px, 1.1vw + 13px, 31px); }
  .sayfa-meydan .giris-metin { margin-top: 12px; font-size: 16px; }
  .sayfa-meydan .ozel { margin-top: 8px; font-size: 14.5px; }
  .sayfa-meydan .cagri { margin-top: 12px; }
  .sayfa-meydan .kanit { margin-top: 12px; padding: 11px 14px 10px; }
  .sayfa-meydan .kanit-hafta { margin-top: 7px; }
  .sayfa-meydan .kanit-hafta p { padding: 6px 10px 7px; }
  .sayfa-meydan .kh-metin { font-size: 14.5px; }
  .sayfa-meydan .kanit-satir { margin-top: 6px; font-size: 13.5px; line-height: 1.4; }
  .sayfa-meydan .kanit-alt { margin-top: 7px; }
  .sayfa-meydan .serit a { min-height: 50px; padding-top: 5px; padding-bottom: 5px; }
  .sayfa-meydan .giris > .adimlar li { font-size: 13px; }
}

/* text view: the picture goes, the words stay */
.metin-gor .sayfa-meydan .giris { display: flex; flex-direction: column; max-width: 800px; margin: 0 auto; padding: 24px var(--pad) 8px; height: auto; }
.metin-gor .sayfa-meydan .giris > .sol { order: 1; }
.metin-gor .sayfa-meydan .giris > .adimlar { order: 2; display: block; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); }
.metin-gor .sayfa-meydan .giris > * { order: 3; }
.metin-gor .sayfa-meydan .sahne-kutu, .metin-gor .sayfa-meydan .giris > .altyazi, .metin-gor .hafta-oynat { display: none !important; }
.metin-gor .sayfa-meydan .giris > .serit { display: block; padding: 24px 0 0; }
.metin-gor .sayfa-meydan .serit ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.metin-gor .sayfa-meydan .serit-baslik { display: block; margin-bottom: 8px; }
.metin-gor .sayfa-meydan .kontrol { justify-content: flex-start; padding-top: 14px; }
.metin-gor .sayfa-meydan .giris-kicker, .metin-gor .sayfa-meydan h1, .metin-gor .sayfa-meydan .giris-metin, .metin-gor .sayfa-meydan .ozel,
.metin-gor .sayfa-meydan .cagri, .metin-gor .sayfa-meydan .kanit { margin-left: 0; margin-right: 0; }
.metin-gor .gece-dugme, .metin-gor #durDugme { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .15s !important; scroll-behavior: auto !important; }
  .hafta-oynat { display: none !important; }
}

/* ------------------------------------------------------------------ the protocol page */
.sayfa-test { background: #fbf6ef; color: #1a1714; }
.protokol { max-width: 1040px; margin: 0 auto; padding: 36px 20px 64px; }
.protokol h1 { margin-top: 6px; font-size: clamp(28px, 2vw + 14px, 38px); }
.protokol h2 { margin: 34px 0 10px; font-size: 21px; }
.protokol section > p, .protokol li, .protokol dd { font-size: 15.5px; line-height: 1.55; }
.protokol ul, .protokol ol { padding-left: 22px; display: grid; gap: 6px; }
.protokol .hizli { margin-top: 14px; font-size: 14.5px; }
.protokol .olcut li.dur { color: #8f2216; }
.protokol table { width: 100%; border-collapse: collapse; font-size: 14px; }
.protokol th, .protokol td { padding: 8px 9px; border: 1px solid #d9c8b0; text-align: left; vertical-align: top; }
.protokol th { background: #f1e6d6; font-weight: 600; }
.protokol .tablo-kap { overflow-x: auto; }
.protokol .puan td.kutu { min-width: 70px; height: 54px; }
.protokol .puan .toplam td { background: #f6eee2; font-weight: 600; }
.protokol .anahtar dt { margin-top: 12px; font-weight: 600; }
.protokol .kucuk { font-size: 13.5px; color: #615a4f; }
.protokol .h1-listesi { list-style: none; padding: 0; margin-top: 12px; }
.protokol .h1-kart { margin-top: 36px; padding: 24px; border: 2px solid #1a1714; border-radius: 14px; background: #fff; break-inside: avoid; }
.protokol .h1-kart h2 { margin-top: 0; }
.protokol .kart-liste { list-style: none; padding: 0; gap: 22px; margin: 10px 0 12px; }
.protokol .kart-liste li { font-size: 26px; font-weight: 600; line-height: 1.2; }
.protokol .harf { display: inline-grid; place-items: center; width: 36px; height: 36px; margin-right: 10px; border-radius: 50%; border: 2px solid #1a1714; font: 600 16px/1 var(--mono); vertical-align: 4px; }
@media print {
  .protokol { padding: 0; max-width: none; }
  .protokol .hizli { display: none; }
  .protokol section { break-inside: avoid; }
  .protokol .h1-kart { break-before: page; }
  a { text-decoration: none; }
}