/* ==========================================================================
   Uğur Simit Evi · page styles
   Night family (05:00, the dough, the oven) and day family (counter onwards),
   cut once at sunrise. One hue for the accent: Seljuk turquoise, two
   lightnesses, one per ground family.
   ========================================================================== */

:root {
  --sc-canvas:     #120C09;  /* molasses near-black */
  --sc-surface:    #1E140F;
  --sc-ink:        #F5EEE4;  /* flour */
  --sc-ink-soft:   #BDAE9F;
  --sc-accent:     #3FC1B8;  /* turquoise, lifted for the night ground */
  --sc-accent-ink: #0B1716;

  --sc-font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sc-font-text:    "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sc-font-mono:    "Archivo", system-ui, sans-serif;

  --enamel:      #0E7C76;    /* the plate and the clock rim */
  --enamel-deep: #0A5652;
  --enamel-face: #F7F3EA;
  --ember:       #E0782F;

  --r: 8px;                  /* one radius for the whole page */
  --sc-r-sm: var(--r); --sc-r-md: var(--r); --sc-r-lg: var(--r);

  --sc-shadow-color: 20 45% 3%;
  --chrome-h: 64px;
}

.day {
  --sc-canvas:     #EDF1EE;  /* glazed tile white, not cream */
  --sc-surface:    #FFFFFF;
  --sc-ink:        #1B130E;
  --sc-ink-soft:   #5B4E44;
  --sc-accent:     #0B746F;
  --sc-accent-ink: #FFFFFF;
  --sc-shadow-color: 160 18% 22%;
  --sc-e1: 0 1px 2px hsl(var(--sc-shadow-color) / 0.12), 0 2px 6px -1px hsl(var(--sc-shadow-color) / 0.10);
  --sc-e2: 0 2px 4px hsl(var(--sc-shadow-color) / 0.10), 0 10px 22px -6px hsl(var(--sc-shadow-color) / 0.18);
  --sc-edge: inset 0 1px 0 rgb(255 255 255 / 0.7);
  background: var(--sc-canvas);
  color: var(--sc-ink);
}

body { font-variation-settings: "wdth" 100; }
.sc-display {
  font-weight: 640;
  font-variation-settings: "SOFT" 100, "WONK" 0;
  letter-spacing: -0.022em;
}
.sc-display--xl { letter-spacing: -0.03em; }
.sc-lede { font-weight: 450; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: 12px; top: -60px; z-index: 100;
  background: var(--enamel-face); color: #1B130E; padding: 10px 16px; border-radius: var(--r);
  font-weight: 600; text-decoration: none; transition: top 160ms var(--sc-ease-out);
}
.skip:focus-visible { top: 12px; }

/* ------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  min-height: 48px; padding: 0 1.25rem;
  border-radius: var(--r);
  font-family: var(--sc-font-text);
  font-weight: 640; font-size: 1rem; font-variation-settings: "wdth" 92;
  letter-spacing: 0.005em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  border: 1.5px solid transparent;
  transition: background-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out),
              border-color 160ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.btn--lg { min-height: 54px; padding: 0 1.5rem; font-size: 1.06rem; }
.btn--accent { background: var(--sc-accent); color: var(--sc-accent-ink); box-shadow: var(--sc-e1), var(--sc-edge); }
.btn--line { border-color: color-mix(in oklab, var(--sc-ink) 40%, transparent); color: var(--sc-ink); }
.btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .btn--accent:hover { background: color-mix(in oklab, var(--sc-accent) 86%, var(--sc-ink)); }
  .btn--line:hover { border-color: var(--sc-ink); background: color-mix(in oklab, var(--sc-ink) 6%, transparent); }
}
.ico { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* -------------------------------------------------------- enamel plate -- */
.plate {
  display: inline-flex; flex-direction: column; justify-content: center;
  position: relative;
  padding: 0.42rem 0.95rem 0.48rem;
  background: var(--enamel);
  color: #FFFFFF;
  border-radius: var(--r);
  text-decoration: none;
  box-shadow: inset 0 0 0 2px var(--enamel), inset 0 0 0 3.5px rgb(255 255 255 / 0.85),
              0 1px 2px rgb(0 0 0 / 0.25), 0 6px 16px -6px rgb(0 0 0 / 0.45);
}
/* the two rivets an enamel sign is hung by */
.plate::before, .plate::after {
  content: ""; position: absolute; top: 50%; width: 4px; height: 4px; margin-top: -2px;
  border-radius: 50%; background: rgb(255 255 255 / 0.75);
}
.plate::before { left: 7px; } .plate::after { right: 7px; }
.plate__name {
  font-family: var(--sc-font-display);
  font-weight: 800; font-size: 1.12rem; line-height: 1.05;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 24;
  letter-spacing: -0.005em;
  padding-inline: 0.35rem;
}
.plate__place {
  font-family: var(--sc-font-text);
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  font-variation-settings: "wdth" 80;
  opacity: 0.88; padding-inline: 0.35rem;
}
.plate--sm { padding: 0.3rem 0.8rem; }
.plate--sm .plate__name { font-size: 0.95rem; }

/* -------------------------------------------------------------- chrome -- */
.chrome {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: max(14px, env(safe-area-inset-top)) var(--sc-gutter) 0;
  pointer-events: none;
}
.chrome > * { pointer-events: auto; }

.clock { position: relative; }
.clock__btn {
  display: flex; align-items: center; gap: 0.7rem;
  min-height: 56px; padding: 6px 1.05rem 6px 6px;
  background: var(--enamel-face); color: #1B130E;
  border: 0; border-radius: 999px; cursor: pointer;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.22), 0 8px 22px -8px rgb(0 0 0 / 0.5);
  transition: transform 120ms var(--sc-ease-out);
}
.clock__btn:active { transform: scale(0.97); }
.clock__btn:focus-visible { outline: 2px solid var(--enamel); outline-offset: 3px; border-radius: 999px; }
.clock__dock { width: 44px; height: 44px; border-radius: 50%; flex: none; position: relative; }
/* once the dial has flown to the close, the dock shows the scene list mark */
.clock__dock::before {
  content: ""; position: absolute; inset: 10px; border-radius: 50%;
  border: 3px solid var(--enamel); opacity: 0; transition: opacity 220ms var(--sc-ease-out);
}
.is-landed .clock__dock::before { opacity: 1; }
.clock__read { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.05; transition: opacity 220ms var(--sc-ease-out); }
.clock__label {
  font-size: 0.64rem; font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase;
  font-variation-settings: "wdth" 78; color: #5B4E44;
}
.clock__time {
  font-weight: 700; font-size: 1.32rem; font-variation-settings: "wdth" 82;
  font-variant-numeric: tabular-nums; letter-spacing: 0.01em;
}

.clock__menu {
  position: absolute; right: 0; top: calc(100% + 10px);
  width: min(20rem, calc(100vw - 2 * var(--sc-gutter)));
  padding: 0.6rem;
  background: var(--enamel-face); color: #1B130E;
  border-radius: calc(var(--r) * 1.5);
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.2), 0 22px 48px -12px rgb(0 0 0 / 0.55);
  transform-origin: top right;
  animation: menu-in 200ms var(--sc-ease-out);
}
.clock__menu[hidden] { display: none; }
@keyframes menu-in { from { opacity: 0; transform: scale(0.96) translateY(-4px); } }
.clock__menu ol { list-style: none; margin: 0 0 0.6rem; padding: 0; }
.clock__menu li a {
  display: flex; align-items: baseline; gap: 0.9rem;
  min-height: 44px; padding: 0.6rem 0.75rem; border-radius: var(--r);
  text-decoration: none; font-weight: 520;
  transition: background-color 140ms var(--sc-ease-out);
}
.clock__menu li a:hover, .clock__menu li a:focus-visible { background: rgb(14 124 118 / 0.1); }
.clock__menu li a[aria-current="true"] { background: rgb(14 124 118 / 0.14); }
.clock__menu .t {
  width: 3.4rem; flex: none; font-weight: 700; font-variant-numeric: tabular-nums;
  font-variation-settings: "wdth" 82; color: var(--enamel-deep);
}
.clock__menu .btn { width: 100%; background: var(--enamel); color: #fff; }

/* ---------------------------------------------------------------- dial -- */
.dial {
  position: fixed; left: 0; top: 0; z-index: calc(var(--sc-z-chrome) + 1);
  width: 240px; height: 240px;
  transform-origin: 0 0;
  pointer-events: none;
  filter: drop-shadow(0 6px 10px rgb(0 0 0 / 0.28));
}
.dial svg { width: 240px; height: 240px; overflow: visible; }
.dial__rim  { fill: var(--enamel); stroke: var(--enamel-deep); stroke-width: 2; }
.dial__face { fill: var(--enamel-face); stroke: rgb(10 86 82 / 0.28); stroke-width: 1.5; }
.dial__tick { stroke: #1B130E; stroke-linecap: round; }
.dial__nums { font-family: var(--sc-font-text); font-weight: 700; font-size: 18px; fill: #1B130E; font-variation-settings: "wdth" 80; }
.dial__star rect { fill: none; stroke: var(--enamel); stroke-width: 2.4; }
.hand { transform-box: view-box; transform-origin: 120px 120px; }
.hand rect { fill: #1B130E; }
.hand--m rect { fill: #2A1E16; }
.dial__cap { fill: #1B130E; }
.dial__pin { fill: var(--ember); }

/* ===================================================== 1 · HERO · 05:00 == */
.hero__stage { background: #0B0706; }
.hero { --counter: 0.205; --cx: 56%; }           /* counter line + contact x */
.plane { position: absolute; }
.hero__plate { inset: 0; z-index: 1; display: block; }
.hero__plate img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; max-width: none;
}

/* The contact point the tray stands on. Plate and tray scale around it, so the
   tray never floats off the marble. */
.hero__plate, .hero__tray {
  transform-origin: var(--cx) calc(100% - var(--counter) * max(100svh, 55.56vw));
}
.hero__plate {
  scale: calc(1 + var(--sc-p, 0) * 0.07);
  translate: calc(var(--px, 0) * -6px) calc(var(--py, 0) * -4px);
}

.hero__mark {
  z-index: 2;
  left: 0; right: 0; top: clamp(5.5rem, 15vh, 10rem);
  margin: 0; padding-inline: var(--sc-gutter);
  display: flex; flex-direction: column; align-items: center;
  font-family: var(--sc-font-display);
  font-weight: 900;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
  font-size: clamp(4.6rem, 13.2vw, 14.5rem);
  line-height: 0.84;
  letter-spacing: -0.035em;
  color: #F3E4CF;
  text-align: center;
  text-shadow: 0 0.025em 0 rgb(0 0 0 / 0.35), 0 0.08em 0.25em rgb(0 0 0 / 0.35);
  translate: calc(var(--px, 0) * -10px) calc(var(--sc-p, 0) * -16vh + var(--py, 0) * -6px);
  scale: calc(1 - var(--sc-p, 0) * 0.08);
  opacity: clamp(0, 1 - (var(--sc-p, 0) - 0.4) * 2.6, 1);
}
.hero__mark-b { font-size: 0.8em; margin-top: 0.02em; }

.hero__tray {
  z-index: 3;
  left: var(--cx); bottom: calc(var(--counter) * max(100svh, 55.56vw) - 1.2vw);
  width: min(44vw, 74vh, 860px);
  translate: calc(-50% + var(--px, 0) * -16px) calc(var(--py, 0) * -8px);
  scale: calc(1 + var(--sc-p, 0) * 0.2);
  transform-origin: 50% 100%;
}
.hero__tray img { width: 100%; height: auto; max-width: none; }

.hero__steam {
  z-index: 4; left: var(--cx); bottom: 30%;
  width: min(40vw, 640px); height: 46vh; translate: -50% 0;
  pointer-events: none; opacity: 0.5;
}
.hero__steam i {
  position: absolute; bottom: 0; width: 38%; aspect-ratio: 1 / 2.2; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 236 214 / 0.22), transparent 72%);
  filter: blur(14px);
  animation: steam 7.5s linear infinite; animation-play-state: paused;
}
.hero__steam i:nth-child(1) { left: 8%;  animation-delay: -1s; }
.hero__steam i:nth-child(2) { left: 34%; animation-delay: -3.6s; animation-duration: 8.8s; }
.hero__steam i:nth-child(3) { left: 60%; animation-delay: -6s; }
.hero.is-live .hero__steam i { animation-play-state: running; }
@keyframes steam {
  0%   { transform: translate3d(0, 12%, 0) scale(0.8); opacity: 0; }
  25%  { opacity: 1; }
  100% { transform: translate3d(12%, -70%, 0) scale(1.35); opacity: 0; }
}

.hero__dust { z-index: 5; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.hero__fg {
  z-index: 6;
  right: -4vw; bottom: -10vh;
  width: min(30vw, 520px);
  translate: calc(var(--px, 0) * -30px) calc(var(--sc-p, 0) * 22vh + var(--py, 0) * -14px);
  scale: calc(1 + var(--sc-p, 0) * 0.22);
  rotate: -14deg;
}
.hero__fg img { width: 100%; height: auto; max-width: none; }

.hero__scrim { z-index: 7; }
.hero__copy { max-width: min(30rem, 80vw); }
.hero__lede {
  font-size: var(--sc-t-lg); line-height: 1.42; font-weight: 450;
  color: var(--sc-ink); margin: 0 0 var(--sc-5); max-width: 26ch; text-wrap: pretty;
  letter-spacing: 0;
}
.hero__beat {
  max-width: 14ch;
  margin: 0;
  font-family: var(--sc-font-display);
  font-weight: 560; font-variation-settings: "SOFT" 100, "WONK" 0;
  font-size: var(--sc-t-3xl); line-height: 1.02; letter-spacing: -0.025em;
  color: var(--sc-ink);
}

/* Tall screens get their own composition, not a shrunk one. */
@media (max-aspect-ratio: 4/5) {
  .hero { --counter: 0.24; --cx: 50%; }
  .hero__plate, .hero__tray { transform-origin: var(--cx) calc(100% - var(--counter) * max(100svh, 180vw)); }
  .hero__mark { top: calc(var(--chrome-h) + 7vh); font-size: clamp(3.6rem, 21vw, 9rem); }
  .hero__tray { bottom: calc(var(--counter) * max(100svh, 180vw) - 2vw); width: min(92vw, 52vh); }
  .hero__steam { width: 80vw; bottom: 36%; }
  .hero__fg { width: 44vw; right: -12vw; bottom: -6vh; }
  .hero__beat { font-size: var(--sc-t-2xl); }
  .hero__copy { max-width: none; }
}
@media (max-width: 760px) {
  .hero__scrim { background: linear-gradient(to top, color-mix(in oklab, #0B0706 92%, transparent) 0%, color-mix(in oklab, #0B0706 70%, transparent) 22%, transparent 46%); }
  .hero__copy { bottom: max(2rem, calc(env(safe-area-inset-bottom) + 1.25rem)); }
  .hero__lede { font-size: 1.08rem; margin-bottom: var(--sc-4); }
}

/* ================================================== 2 · HAMUR · reveal == */
.hamur { padding-bottom: clamp(3rem, 6vw, 6rem); }
.hamur__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 6vw, 7rem); align-items: center;
}
.hamur__text h2 { max-width: 11ch; }
.trio { margin: var(--sc-7) 0 0; display: grid; gap: var(--sc-5); }
.trio > div { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--sc-4); align-items: baseline; padding-top: var(--sc-4); border-top: 1px solid var(--sc-hairline); }
.trio dt {
  font-family: var(--sc-font-display); font-weight: 700; font-size: var(--sc-t-xl);
  font-variation-settings: "SOFT" 100, "WONK" 1; line-height: 1;
}
.trio dd { margin: 0; color: var(--sc-ink-soft); font-size: var(--sc-t-lg); line-height: 1.4; }
.hamur__fig { margin: 0; }
.hamur__frame {
  position: relative; aspect-ratio: 1776 / 2352; border-radius: var(--r); overflow: hidden;
  box-shadow: var(--sc-e3);
  width: min(100%, calc(82svh * 1776 / 2352)); margin-inline: auto;
}
.hamur__frame img, .hamur__after { position: absolute; inset: 0; width: 100%; height: 100%; }
.hamur__frame img { object-fit: cover; }
.hamur__fig figcaption {
  margin-top: var(--sc-4); color: var(--sc-ink-soft); font-size: var(--sc-t-sm);
  letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; font-variation-settings: "wdth" 80;
}
@media (max-width: 860px) {
  .hamur__grid { grid-template-columns: 1fr; }
  .hamur__frame { width: min(100%, calc(70svh * 1776 / 2352)); }
  .trio > div { grid-template-columns: 6rem 1fr; }
}

/* authored silence */
.hush {
  height: 100svh; display: grid; place-items: center; padding-inline: var(--sc-gutter);
  background: linear-gradient(#17100C, #0B0706 40%);
}
.hush p {
  margin: 0; text-align: center;
  font-family: var(--sc-font-display); font-weight: 480; font-style: normal;
  font-variation-settings: "SOFT" 100, "WONK" 0;
  font-size: var(--sc-t-xl); color: var(--sc-ink-soft); letter-spacing: -0.01em;
}

/* ======================================================= 3 · FIRIN · peak == */
.firin .sc-stage { background: #0B0706; }
.firin__h { font-weight: 760; }
.firin .sc-copy { max-width: min(40rem, 80vw); }

/* ====================================================== 4 · TEZGÂH · pan == */
.tezgah__stage { background: var(--sc-canvas); display: flex; align-items: center; }
.rail {
  align-items: flex-end;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: calc(var(--chrome-h) + 2rem) var(--sc-gutter) 2rem;
  width: max-content;
}
.rail__lead { width: min(34rem, 82vw); align-self: center; }
.rail__lead h2 { max-width: 9ch; margin-bottom: var(--sc-5); }
.rail__lead p { font-size: var(--sc-t-lg); line-height: 1.5; max-width: 30ch; }
.item { width: min(26rem, 28vw, 50svh); min-width: 15.5rem; }
.item figure { margin: 0 0 var(--sc-4); aspect-ratio: 3 / 4; border-radius: var(--r); overflow: hidden; box-shadow: var(--sc-e2); background: #D9DFDB; }
.item figure img { width: 100%; height: 100%; object-fit: cover; }
.item h3 {
  margin: 0 0 var(--sc-3);
  font-family: var(--sc-font-display); font-weight: 760; font-size: var(--sc-t-2xl);
  font-variation-settings: "SOFT" 100, "WONK" 1; line-height: 1; letter-spacing: -0.02em;
}
.label { margin: 0; display: grid; gap: var(--sc-2); }
.label > div { display: grid; grid-template-columns: 4.6rem 1fr; gap: var(--sc-3); padding-top: var(--sc-2); border-top: 1px solid var(--sc-hairline); }
.label dt {
  font-size: 0.72rem; font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase;
  font-variation-settings: "wdth" 78; color: var(--sc-ink-soft); padding-top: 0.2em;
}
.label dd { margin: 0; font-weight: 500; }
.rail__note {
  width: min(20rem, 70vw); align-self: center;
  padding: var(--sc-6); border-radius: var(--r);
  background: var(--sc-surface); box-shadow: var(--sc-e1), var(--sc-edge);
}
.rail__note p { margin: 0; font-size: var(--sc-t-lg); line-height: 1.4; font-weight: 520; }
.rail__note p + p { margin-top: var(--sc-4); padding-top: var(--sc-4); border-top: 1px solid var(--sc-hairline); }

/* items settle in sequence, like a drawer being pulled; first one is already there */
@media (prefers-reduced-motion: no-preference) {
  .tezgah .item, .tezgah .rail__note {
    opacity: clamp(0.55, calc(0.55 + (var(--sc-p, 0) * 1.25 - (var(--i) - 1) * 0.24) * 2.4), 1);
    translate: 0 calc(clamp(0, 1 - (var(--sc-p, 0) * 1.25 - (var(--i) - 1) * 0.24) * 2.4, 1) * 22px);
  }
  .tezgah .item[style*="--i:1"] { opacity: 1; translate: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tezgah__stage { align-items: center; }
}

/* =================================================== 5 · KOMŞULAR · flow == */
.komsular { padding-top: clamp(5rem, 10vw, 10rem); }
.komsular__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem) clamp(1rem, 2.5vw, 2.5rem);
  align-items: start;
}
.score { grid-column: 1 / span 4; }
.score__num {
  margin: 0; font-family: var(--sc-font-display); font-weight: 820;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
  font-size: clamp(6rem, 14vw, 12rem); line-height: 0.82; letter-spacing: -0.04em;
  color: var(--sc-accent); font-variant-numeric: tabular-nums;
}
.score__stars { margin: var(--sc-4) 0 var(--sc-3); }
.score__stars svg { width: 132px; height: 24px; }
.score__stars path { fill: var(--sc-accent); }
.score__src { margin: 0; color: var(--sc-ink-soft); max-width: 22ch; }

.q { margin: 0; }
.q p {
  margin: 0; font-family: var(--sc-font-display);
  font-variation-settings: "SOFT" 100, "WONK" 0; text-wrap: balance;
}
.q footer {
  margin-top: var(--sc-4); font-size: 0.78rem; font-weight: 650; letter-spacing: 0.14em;
  text-transform: uppercase; font-variation-settings: "wdth" 80; color: var(--sc-ink-soft);
}
.q--1 { grid-column: 5 / span 8; }
.q--1 p { font-size: var(--sc-t-3xl); font-weight: 560; line-height: 1.04; letter-spacing: -0.025em; }
.q--2 { grid-column: 1 / span 5; padding-top: var(--sc-6); }
.q--2 p { font-size: var(--sc-t-2xl); font-weight: 520; line-height: 1.1; letter-spacing: -0.02em; }
.q--3 { grid-column: 1 / span 5; }
.q--3 p { font-size: var(--sc-t-xl); font-weight: 520; line-height: 1.15; }
.komsular__photo { grid-column: 6 / span 7; grid-row: 2 / span 2; margin: 0; }
.komsular__photo img { width: 100%; height: auto; border-radius: var(--r); box-shadow: var(--sc-e2); }
.komsular__photo figcaption {
  margin-top: var(--sc-3); font-size: 0.78rem; font-weight: 650; letter-spacing: 0.14em;
  text-transform: uppercase; font-variation-settings: "wdth" 80; color: var(--sc-ink-soft);
}

.bilgi {
  margin-top: clamp(5rem, 9vw, 9rem);
  display: grid; grid-template-columns: 1.25fr 1fr 0.9fr; gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}
.bilgi > h2 { grid-column: 1 / -1; margin-bottom: var(--sc-2); }
.bilgi h3 {
  margin: 0 0 var(--sc-4); padding-bottom: var(--sc-3); border-bottom: 1px solid var(--sc-hairline-strong);
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  font-variation-settings: "wdth" 80; color: var(--sc-ink-soft);
}
.bilgi address { font-style: normal; font-size: var(--sc-t-lg); line-height: 1.45; font-weight: 500; }
.bilgi p { margin: var(--sc-3) 0 0; }
.bilgi .muted { color: var(--sc-ink-soft); }
.tel { font-size: var(--sc-t-xl); font-weight: 650; font-variant-numeric: tabular-nums; text-decoration: none; font-variation-settings: "wdth" 88; }
.tel:hover { text-decoration: underline; }
.hours { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.hours th, .hours td { padding: 0.5rem 0.6rem; text-align: left; font-weight: 450; border-bottom: 1px solid var(--sc-hairline); }
.hours td { text-align: right; font-variation-settings: "wdth" 88; }
.hours tr.is-today th, .hours tr.is-today td { font-weight: 700; background: color-mix(in oklab, var(--sc-accent) 12%, transparent); }
.hours tr.is-today th::after { content: " · bugün"; font-weight: 500; color: var(--sc-accent); }

@media (max-width: 860px) {
  .komsular__grid > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .q--2 { padding-top: 0; }
  .bilgi { grid-template-columns: 1fr; }
}

/* ===================================================== 6 · ŞİMDİ · close == */
.simdi__stage {
  background: var(--sc-canvas);
  display: grid; grid-template-rows: 1fr auto;
}
.simdi__inner {
  display: grid; grid-template-columns: auto minmax(0, 34rem);
  justify-content: center; align-items: center;
  gap: clamp(2rem, 6vw, 6.5rem);
  padding: calc(var(--chrome-h) + 1.5rem) var(--sc-gutter) 1rem;
}
.simdi__clock { display: grid; justify-items: center; gap: var(--sc-4); }
.simdi__slot { width: clamp(180px, 26vw, 340px); aspect-ratio: 1; }
.simdi__now {
  margin: 0; display: flex; align-items: baseline; gap: 0.6rem;
  font-variant-numeric: tabular-nums;
}
.simdi__now span {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  font-variation-settings: "wdth" 80; color: var(--sc-ink-soft);
}
.simdi__now time { font-size: var(--sc-t-xl); font-weight: 700; font-variation-settings: "wdth" 82; }
.simdi__text h2 { margin-bottom: var(--sc-4); max-width: 13ch; }
.simdi__text .sc-lede { color: var(--sc-ink-soft); max-width: 34ch; }
.simdi__actions { display: flex; flex-wrap: wrap; gap: var(--sc-3); margin-top: var(--sc-6); }
.simdi__addr { margin: var(--sc-5) 0 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); max-width: 40ch; }
.simdi.is-open .simdi__now time { color: var(--sc-accent); }

.foot {
  display: flex; align-items: center; gap: var(--sc-4); flex-wrap: wrap;
  padding: var(--sc-4) var(--sc-gutter) max(var(--sc-4), env(safe-area-inset-bottom));
  border-top: 1px solid var(--sc-hairline);
  font-size: 0.8rem; color: var(--sc-ink-soft);
}
.foot p { margin: 0; }

@media (max-width: 860px) {
  .simdi__inner { grid-template-columns: 1fr; justify-items: start; gap: 1.25rem; align-content: center; padding-top: calc(var(--chrome-h) + 0.75rem); }
  .simdi__clock { grid-auto-flow: column; justify-items: start; align-items: center; gap: 1rem; }
  .simdi__slot { width: clamp(112px, 30vw, 160px); }
  .simdi__now { flex-direction: column; gap: 0.1rem; }
  .simdi__actions { margin-top: var(--sc-5); }
  .simdi__actions .btn { flex: 1 1 100%; }
  .foot .plate { display: none; }
}
@media (max-height: 700px) and (max-width: 860px) {
  .simdi__text .sc-display--lg { font-size: var(--sc-t-2xl); }
  .simdi__addr { display: none; }
}

/* ---------------------------------------------------------------- small -- */
@media (max-width: 560px) {
  :root { --chrome-h: 58px; }
  .plate__name { font-size: 0.98rem; }
  .plate__place { font-size: 0.58rem; }
  .clock__btn { min-height: 50px; padding: 4px 0.85rem 4px 4px; gap: 0.5rem; }
  .clock__dock { width: 42px; height: 42px; }
  .clock__label { font-size: 0.56rem; }
  .clock__time { font-size: 1.12rem; }
}

/* -------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .hero__plate, .hero__mark, .hero__tray, .hero__fg { scale: none; }
  .hero__mark { translate: none; opacity: 1; }
  .hero__tray { translate: -50% 0; }
  .hero__fg, .hero__plate { translate: none; }
  .hero__steam i { animation: none; opacity: 0.6; transform: translate3d(0, -20%, 0); }
  .clock__menu { animation: none; }
}