/* Duman — Gece Arabası
   assets/style.css
   Night design system + page chrome. See task-1-brief.md for the source spec. */

:root {
  --gece:#101722; --kemik-sicak:#EFE8DA; --soluk:#A89F90;
  --amber:#F5A83C; --neon:#FF6A4D; --radius:6px;
}
html { scroll-behavior:auto; }
body { margin:0; background:var(--gece); color:var(--kemik-sicak); overflow-x:clip;
  font:16px/1.7 system-ui,-apple-system,"Segoe UI",sans-serif;
  transition:background-color .4s linear; }
@media (prefers-reduced-motion: reduce) { body { transition:none; } }
h1,h2 { font-family:"Arial Narrow","Helvetica Neue Condensed",Arial,sans-serif;
  text-transform:uppercase; letter-spacing:.04em; line-height:1.05; }
.mono { font-family:ui-monospace,"SF Mono",Menlo,monospace; }
.saat-label { font-family:ui-monospace,Menlo,monospace; color:var(--amber);
  font-size:.9rem; letter-spacing:.12em; }
.neon { color:var(--neon);
  text-shadow:0 0 6px rgba(255,106,77,.55), 0 0 18px rgba(255,106,77,.3); }
.btn-neon { background:var(--neon); color:var(--gece); font-weight:700;
  padding:12px 22px; border-radius:var(--radius); text-decoration:none; display:inline-block; }
.clock-chip { display:none; font-family:ui-monospace,Menlo,monospace; color:var(--amber);
  background:color-mix(in srgb, var(--gece) 82%, transparent);
  border:1px solid color-mix(in srgb, var(--amber) 50%, transparent);
  padding:6px 12px; border-radius:var(--radius); white-space:nowrap; }
html.js .clock-chip.on { display:block; }
.isik-zinciri { height:8px; margin:0 auto; max-width:min(560px,80vw);
  background:radial-gradient(circle 3px at 8px 4px, var(--amber) 45%, transparent 46%) 0 0/28px 8px repeat-x;
  opacity:.5; }

/* ---------------------------------------------------------------------
   Base reset + focus
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing:border-box; }
img { max-width:100%; }
a { color:inherit; }
:focus-visible { outline:2px solid var(--amber); outline-offset:2px; }

/* ---------------------------------------------------------------------
   Header — minimal sticky bar
   --------------------------------------------------------------------- */
.site-header { position:sticky; top:0; z-index:30; background:var(--gece);
  border-bottom:1px solid color-mix(in srgb, var(--soluk) 30%, transparent); }
.header-inner { max-width:960px; margin:0 auto; padding:12px 16px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.brand { font-size:1.05rem; font-weight:700; text-decoration:none; letter-spacing:.06em; white-space:nowrap; }
.header-right { display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:10px; }
.header-nav { display:flex; align-items:center; font-size:.95rem; white-space:nowrap; }
.header-nav a { text-decoration:none; }
.header-nav a:hover, .header-nav a:focus-visible { color:var(--amber); }
.header-nav a:not(:last-child)::after { content:"\00b7"; color:var(--soluk); margin:0 10px; }
@media (max-width:399px) {
  .header-inner { padding:10px 12px; gap:6px; }
  .brand { font-size:.95rem; }
  .header-right { gap:6px; }
  .header-nav { font-size:.8rem; }
  .header-nav a:not(:last-child)::after { margin:0 6px; }
  .clock-chip { font-size:.85rem; padding:5px 9px; }
}

/* ---------------------------------------------------------------------
   Hour sections + tail — shared layout primitives for Task 4/5
   --------------------------------------------------------------------- */
.saat, .tail { position:relative; padding:88px 20px; max-width:640px; margin:0 auto; }

/* Breakout wrappers: escape the .saat/.tail reading column and bleed
   toward (or past) the viewport edges. Math holds for any parent width
   because the parent is centered with auto margins inside the full-width
   body — see task-1-report.md for the derivation. */
.bleed { width:100vw; margin-left:50%; transform:translateX(-50%); }
.wide-img { display:block; width:min(92vw,960px); margin-left:50%; transform:translateX(-50%); }
.wide-img img { display:block; width:100%; height:auto; }
.bleed img, .stage-pair img { display:block; width:100%; height:auto; }

/* Scroll reveal (imgs only). No-JS and reduced-motion: always visible.
   JS on: starts hidden/offset, Task 5's IntersectionObserver adds .in. */
.reveal { opacity:1; }
html.js .reveal { opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
html.js .reveal.in { opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity:1; transform:none; transition:none; }
}

/* Video wrapper: markup carries only a poster <img> until Task 5's JS
   inserts a <video> (gated by html.js + no Save-Data + no reduced-motion).
   Poster layout lives here; video-specific opacity/crossfade rules are
   added in Task 5 once the <video> element actually exists in the DOM. */
.v-wrap { position:relative; overflow:hidden; }
.v-wrap .v-poster { display:block; width:100%; height:auto; object-fit:cover; }
.v-wrap video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .5s; z-index:1; }
.v-wrap.v-on video { opacity:1; }

/* ---------------------------------------------------------------------
   Hour sections — typography + shared bits (Task 4)
   --------------------------------------------------------------------- */
.saat-label { display:block; margin:0 0 14px; }
h2 { font-size:clamp(1.7rem,6vw,2.6rem); margin:0 0 .55em; }
.saat p, .tail p { margin:0 0 1.15em; }
.saat p:last-of-type, .tail p:last-of-type { margin-bottom:0; }
.fiyat { color:var(--amber); }
.bleed, .wide-img { margin-top:32px; margin-bottom:8px; }
.wide-img img, .stage-pair img { border-radius:var(--radius); }

/* ---------------------------------------------------------------------
   Hero — #acilis (Task 4)
   Scrim contrast computed against s-cart.webp's brightest sampled patch
   (worst-case ~40x40px block average, lum 0.893 near the strung bulbs):
   flat rgba(--gece) floor of .82 -> kemik-sıcak 8.76:1, amber 5.37:1
   (both clear body-text 4.5:1); neon (h1) 3.78:1, clears large-text 3:1
   (DUMAN renders far above the 24px/bold large-text threshold). See
   task-4-report.md for the full computation.
   --------------------------------------------------------------------- */
.saat.hero { padding:0 0 88px; }
.hero-stage { position:relative; }
.v-wrap.hero-media { height:clamp(480px,68vw,760px); }
.v-wrap.hero-media .v-poster { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-scrim { position:absolute; top:0; left:50%; width:100vw; height:100%; z-index:1;
  transform:translateX(-50%);
  background:linear-gradient(180deg, rgba(16,23,34,.82) 0%, rgba(16,23,34,.86) 55%, rgba(16,23,34,.92) 100%); }
.hero-content { position:absolute; inset:0; z-index:1; display:flex; flex-direction:column;
  justify-content:flex-end; padding:32px 20px 40px; max-width:640px; margin:0 auto; }
.hero-content .saat-label { margin-bottom:18px; }
.hero-brand { font-size:clamp(3rem,12vw,5.5rem); margin:0; }
.hero-alt { display:block; color:var(--kemik-sicak); text-shadow:none;
  font-size:clamp(.9rem,3vw,1.2rem); letter-spacing:.3em; margin-top:.4em; }
.tagline { font-size:1.15rem; margin:22px 0 12px; }
.hero-copy { max-width:52ch; }
.cue { display:block; margin-top:26px; }

/* ---------------------------------------------------------------------
   Gece yarısı — cites (Task 4)
   --------------------------------------------------------------------- */
.alintilar { list-style:none; margin:30px 0 0; padding:0; display:grid; gap:18px; }
.alintilar blockquote { margin:0; padding:2px 0 2px 16px; border-left:2px solid var(--amber); }
.alintilar blockquote p { margin:0 0 6px; }
.alintilar footer { color:var(--soluk); font-size:.85rem; }

/* ---------------------------------------------------------------------
   Son ayakta kalanlar — paired stills (Task 4)
   --------------------------------------------------------------------- */
.stage-pair { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:28px 0 8px; }
@media (max-width:479px) { .stage-pair { grid-template-columns:1fr; gap:16px; } }

/* ---------------------------------------------------------------------
   Kapanış — closing line (Task 4)
   --------------------------------------------------------------------- */
.buyuk-satir { font-family:"Arial Narrow","Helvetica Neue Condensed",Arial,sans-serif;
  text-transform:uppercase; letter-spacing:.03em; line-height:1.1;
  font-size:clamp(1.6rem,5.5vw,2.5rem); color:var(--amber); margin:28px 0 40px; }

/* ---------------------------------------------------------------------
   Tail — #konum (Task 4)
   --------------------------------------------------------------------- */
.fiyat-listesi { margin:26px 0 0; padding:0; }
.fiyat-satir { display:grid; grid-template-columns:1fr auto; gap:6px 16px; align-items:baseline;
  padding:10px 0; border-bottom:1px dashed color-mix(in srgb, var(--soluk) 35%, transparent); }
.fiyat-satir:first-child { padding-top:0; }
.fiyat-satir dt, .fiyat-satir dd { margin:0; }
.fiyat-satir dd { color:var(--amber); text-align:right; }
.konum-detay { margin-top:32px; }
.adres { margin:0 0 18px; }
.harita-link { margin:0 0 28px; }
.konum-meta { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.konum-meta a { text-decoration:none; }
.konum-meta a:hover, .konum-meta a:focus-visible { color:var(--amber); }
.tail .wide-img { margin-top:36px; }

/* ---------------------------------------------------------------------
   Footer — full house footer
   --------------------------------------------------------------------- */
.site-footer { padding:56px 20px 32px; }
.footer-inner { max-width:640px; margin:0 auto; display:flex; flex-wrap:wrap; gap:24px 48px; }
.footer-block { min-width:200px; }
.footer-block p { margin:0 0 8px; }
.footer-block a { text-decoration:none; }
.footer-block a:hover, .footer-block a:focus-visible { color:var(--amber); }
.footer-brand { font-size:1.1rem; margin:0 0 12px; }
.site-footer .isik-zinciri { margin:32px auto; }
.footer-copy { max-width:640px; margin:0 auto; text-align:center; color:var(--soluk); font-size:.85rem; }