/* Atlas Mimarlık — design system + shared CAD chrome
   Task 1: tokens, base, header/nav, footer, crane-bar, xhair-chip, lang-toggle, reveal.
   Task 6+: .pafta/.viewport/.title-block/.dim-divider.
   Task 8: .archive/.chip/.sheet/.dlg — projeler.html arşiv çekmecesi.
   Task 9: .contact/.contact-sheet/.contact-breakout — iletisim.html. */

:root {
  --grafit:#23262A; --kemik:#E8E4DC; --cyan:#5FD4F4; --turuncu:#E8622C;
  --koyu:#111417;
  --kemik-soluk:#ABA79E; /* muted: computed 6.33:1 on grafit — verify in QA */
  --hairline:1px solid color-mix(in srgb, var(--cyan) 50%, transparent); /* 50%: QA-verified >=3:1 vs both grafit and koyu */
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  --header-h:79px; /* measured via CDP getBoundingClientRect: single-row header, >=1024px */
}
@media (max-width:1023px) {
  :root { --header-h:148px; } /* measured via CDP: wrapped multi-row mobile header */
}
html { scroll-behavior:auto; }
body { margin:0; background:var(--grafit); color:var(--kemik); overflow-x:clip;
  font:16px/1.65 "Helvetica Neue",Arial,system-ui,sans-serif; }
h1,h2,h3 { font-family:"Helvetica Neue","Arial Narrow",Arial,sans-serif;
  letter-spacing:.02em; text-transform:uppercase; line-height:1.15; }
* { border-radius:0 !important; }          /* drawings have no rounded corners */
.mono { font-family:var(--mono); font-size:.82rem; letter-spacing:.04em; }
.cyan-note { color:var(--cyan); font-family:var(--mono); }   /* 8.83:1 OK */
.btn-cta { background:var(--turuncu); color:var(--koyu); font-weight:700;
  padding:12px 22px; text-decoration:none; display:inline-block; border:none; }
.btn-cta:hover, .btn-cta:focus-visible { background:color-mix(in srgb, var(--turuncu) 85%, var(--kemik)); }
.nav-toggle { display:none; }

img { max-width:100%; display:block; }
a { color:inherit; }
:focus-visible { outline:2px solid var(--cyan); outline-offset:2px; }

.visually-hidden {
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
  clip:rect(0 0 0 0); clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}

.skip-link {
  position:absolute; top:-100%; left:0; z-index:300; background:var(--koyu);
  color:var(--kemik); padding:10px 16px; font-family:var(--mono); text-decoration:none;
}
.skip-link:focus { top:0; }

/* ---------- crane-bar (scroll progress, fixed at very top) ---------- */
.crane-bar {
  position:fixed; top:0; left:0; width:100%; height:2px;
  background:color-mix(in srgb, var(--cyan) 22%, transparent);
  z-index:200; pointer-events:none;
}
.crane-bar-fill {
  position:absolute; top:0; left:0; width:100%; height:100%;
  background:var(--turuncu); transform-origin:left; transform:scaleX(0);
}
.crane-glyph {
  position:absolute; top:-7px; left:0; width:16px; height:16px;
  color:var(--kemik-soluk); overflow:visible;
}

/* ---------- header / kat planı nav ---------- */
.site-header {
  position:sticky; top:0; z-index:100; background:var(--grafit);
  border-bottom:var(--hairline);
}
.header-inner {
  display:flex; align-items:center; flex-wrap:wrap; gap:16px 24px;
  max-width:1400px; margin:0 auto; padding:14px 20px;
}
.brand {
  display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  color:var(--kemik); font-family:var(--mono); font-size:.95rem;
  letter-spacing:.06em; font-weight:700;
}
.brand-glyph { width:22px; height:22px; color:var(--cyan); flex:none; }

.site-nav { display:flex; align-items:center; gap:18px; margin-left:auto; }
/* position:relative deliberately NOT set here — the mobile dropdown (below)
   must resolve its containing block to .site-header (already position:sticky),
   not to this element, so it can span the full header width instead of
   collapsing to the width of its (often-empty) visible content. */
.kp-svg { width:150px; height:44px; flex:none; }
.kp-room { fill:color-mix(in srgb, var(--cyan) 10%, transparent); }
.kp-wall { fill:none; stroke:color-mix(in srgb, var(--cyan) 45%, transparent); stroke-width:1; }
body.p-index .kp-index { fill:var(--turuncu); }
body.p-projeler .kp-projeler { fill:var(--turuncu); }
body.p-iletisim .kp-iletisim { fill:var(--turuncu); }

#nav-primary {
  list-style:none; display:flex; flex-wrap:wrap; align-items:center;
  gap:22px; margin:0; padding:0;
}
#nav-primary a {
  display:inline-block; color:var(--kemik); text-decoration:none;
  font-family:var(--mono); font-size:.82rem; letter-spacing:.04em;
  text-transform:uppercase; padding:4px 2px; border-bottom:2px solid transparent;
}
#nav-primary a:hover, #nav-primary a:focus-visible { border-bottom-color:var(--cyan); }
#nav-primary a[aria-current="page"] { border-bottom-color:var(--turuncu); font-weight:700; }

.nav-actions { display:flex; align-items:center; gap:16px; }

/* sliding TR/EN lang toggle */
.lang-toggle { display:inline-flex; text-decoration:none; }
.lang-toggle-track {
  position:relative; display:inline-flex; align-items:center; width:60px; height:26px;
  border:var(--hairline); font-family:var(--mono); font-size:.68rem; letter-spacing:.05em;
}
.lang-toggle-knob {
  position:absolute; top:2px; left:2px; width:26px; height:20px; background:var(--cyan);
  transition:transform .2s ease;
}
.lang-toggle-label { position:relative; z-index:1; flex:1; text-align:center; color:var(--kemik-soluk); }
.lang-toggle-label.lang-toggle-tr { color:var(--koyu); }
.lang-toggle.lang-toggle-en .lang-toggle-knob { transform:translateX(28px); }
.lang-toggle.lang-toggle-en .lang-toggle-label.lang-toggle-tr { color:var(--kemik-soluk); }
.lang-toggle.lang-toggle-en .lang-toggle-label.lang-toggle-en { color:var(--koyu); }

/* nav-toggle (hamburger) — hidden by default (base rule above); shown only ≤1023px, JS on */
.nav-toggle {
  background:none; border:var(--hairline); width:44px; height:44px; padding:0;
  cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.nav-toggle-bar { display:block; width:20px; height:2px; background:var(--kemik); transition:transform .2s ease, opacity .2s ease; }
body.nav-open .nav-toggle-bar:nth-child(1) { transform:translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle-bar:nth-child(2) { opacity:0; }
body.nav-open .nav-toggle-bar:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

@media (max-width:1023px) {
  /* Deterministic 2(+)-row header instead of relying on flex-wrap's natural
     break point: brand + hamburger share row 1, nav-actions and the kat
     planı nav each claim a full row of their own via flex-basis:100%. This
     guarantees nothing is ever wider than the viewport and gets clipped by
     body{overflow-x:clip} — it always wraps onto a new row instead. */
  .header-inner { row-gap:12px; }
  .brand { order:1; }
  .nav-toggle { order:2; margin-left:auto; }
  .nav-actions { order:3; flex:1 1 100%; flex-wrap:wrap; margin-left:0; }
  .site-nav { order:4; flex:1 1 100%; margin-left:0; }

  .kp-svg { display:none; }
  html.js .nav-toggle { display:flex; }
  html.js #nav-primary {
    /* Containing block is .site-header (position:sticky, edge-to-edge width,
       no side padding) — NOT .site-nav — so this is always a true full-width
       panel below the header bar, never a narrow strip sized to whatever
       .site-nav happens to contain. */
    display:none; position:absolute; top:100%; left:0; right:0; margin:0;
    flex-direction:column; align-items:flex-start; gap:2px;
    background:var(--grafit); border-top:var(--hairline); border-bottom:var(--hairline);
    padding:14px 20px 18px;
  }
  html.js #nav-primary a { width:100%; padding:10px 2px; }
  html.js body.nav-open #nav-primary { display:flex; }
}

/* ---------- footer ---------- */
.site-footer { border-top:var(--hairline); margin-top:60px; }
.footer-inner {
  max-width:1400px; margin:0 auto; padding:40px 20px 20px;
  display:grid; gap:32px; grid-template-columns:1fr;
}
@media (min-width:640px) {
  .footer-inner { grid-template-columns:repeat(3,1fr); }
}
.footer-col h2 {
  font-size:.78rem; color:var(--kemik-soluk); margin:0 0 14px; letter-spacing:.08em;
}
.footer-col ul { list-style:none; margin:0; padding:0; }
.footer-col li { margin:0 0 8px; }
.footer-col a { text-decoration:none; }
.footer-col a:hover, .footer-col a:focus-visible { color:var(--cyan); }
.footer-address { font-style:normal; font-family:var(--mono); font-size:.82rem; color:var(--kemik-soluk); }
.footer-socials { display:flex; gap:14px; list-style:none; margin:14px 0 0; padding:0; }
.footer-bottom {
  max-width:1400px; margin:0 auto; padding:16px 20px 32px;
  border-top:var(--hairline); font-family:var(--mono); font-size:.72rem;
  color:var(--kemik-soluk);
}

/* ---------- crosshair chip (desktop, fine pointer only) ---------- */
body.xhair { cursor:crosshair; }
.xhair-chip {
  position:fixed; right:16px; bottom:16px; z-index:150;
  background:var(--grafit); border:var(--hairline); color:var(--cyan);
  padding:6px 10px; pointer-events:none;
}

/* ---------- reveal-on-scroll (gated: html.js + no-preference) ---------- */
.reveal { opacity:1; }
html.js .reveal {
  opacity:0; transform:translateY(24px);
  transition:opacity .6s ease, transform .6s ease;
}
html.js .reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity:1; transform:none; transition:none; }
}

/* =====================================================================
   Task 6 — spine static baseline: layout, paftalar, viewport frame,
   dim-dividers, heading wipe/underline-draw. This IS the no-JS /
   reduced-motion / Save-Data fallback — every rule below must read as a
   complete, fully-built page with html.js absent.
   ===================================================================== */

/* ---------- spine layout ---------- */
main.spine { display:grid; }
.spine-paftalar { min-width:0; padding:0 20px; }
.viewport { position:relative; } /* overridden to sticky >=1024px below; must
  precede the "viewport chrome" section's unconditional rule in source order
  so the media-query sticky wins the cascade (equal specificity, last wins). */
.pafta { max-width:640px; margin:0 auto; padding:56px 0; }
.pafta-kapak { padding-top:min(16vh,140px); padding-bottom:min(12vh,100px); }
.pafta-iletisim { padding-bottom:80px; }

@media (max-width:1023px) {
  main.spine { grid-template-columns:1fr; }
  .viewport { height:42svh; position:sticky; top:var(--header-h); } /* visually
    first because it's source-first in the HTML now (a11y/keyboard reading
    order matches visual order) — no order:-1 trick needed. Pinned full-width
    at the top so the scrub/still stays visible while paftalar scroll under it. */
}
@media (min-width:1024px) {
  main.spine { grid-template-columns:42% 58%; align-items:start; }
  .spine-paftalar { grid-column:1; grid-row:1; padding:0 32px 0 40px; }
  .viewport { grid-column:2; grid-row:1; position:sticky; top:var(--header-h);
    height:calc(100svh - var(--header-h)); }
  .pafta { padding:88px 0; }
}

/* ---------- kapak ---------- */
.kapak-h1 { font-size:clamp(2.2rem,3.5vw + 1.4rem,3.6rem); margin:0 0 18px; }
.kapak-tagline { font-size:clamp(1.05rem,1vw + .9rem,1.3rem); color:var(--kemik-soluk); margin:0 0 40px; max-width:30ch; }
.scroll-cue { color:var(--cyan); }

/* ---------- pafta headings (wipe + drawn underline) ---------- */
.pafta-h { position:relative; display:inline-block; margin:0 0 26px; font-size:clamp(1.5rem,1.6vw + 1.1rem,2rem); }
.pafta-h .ph-underline { display:block; width:150px; max-width:60%; height:9px; margin-top:6px; overflow:visible; }
.pafta-h .ph-underline line { stroke:var(--cyan); stroke-width:2; fill:none; }

html.js .pafta-h.wipe .ph-text {
  display:inline-block; clip-path:inset(0 100% 0 0);
  transition:clip-path .7s ease;
}
html.js .pafta-h.wipe.in .ph-text { clip-path:inset(0 0 0 0); }
html.js .pafta-h.wipe .ph-underline line {
  stroke-dasharray:var(--len,150); stroke-dashoffset:var(--len,150);
  transition:stroke-dashoffset .8s ease .25s;
}
html.js .pafta-h.wipe.in .ph-underline line { stroke-dashoffset:0; }
html.js .pafta-h.wipe.no-draw .ph-underline line { stroke-dashoffset:0; transition:none; }
@media (prefers-reduced-motion:reduce) {
  html.js .pafta-h.wipe .ph-text { clip-path:inset(0 0 0 0); transition:none; }
  html.js .pafta-h.wipe .ph-underline line { stroke-dashoffset:0; transition:none; }
}

/* ---------- manifesto ---------- */
.lead { font-size:clamp(1.25rem,1.3vw + 1rem,1.55rem); font-weight:400; line-height:1.4; margin:0 0 26px; }

/* ---------- dimension-line dividers (decorative) ---------- */
.dim-divider { display:flex; align-items:center; gap:8px; max-width:640px;
  margin:0 auto; padding:0 20px; color:var(--cyan); }
.dim-divider .dd-line { flex:1; height:1px; background:color-mix(in srgb, var(--cyan) 50%, transparent); } /* 50%: QA-verified >=3:1 vs grafit */
.dim-divider .dd-tick { width:1px; height:9px; background:color-mix(in srgb, var(--cyan) 50%, transparent); flex:none; }
.dim-divider .dd-label { flex:none; color:var(--cyan); white-space:nowrap; }
@media (min-width:1024px) { .dim-divider { padding:0 40px 0 40px; } }

/* ---------- projeler teaser ---------- */
.teaser-grid { display:grid; gap:32px; margin:0 0 30px; }
.teaser-card { border:var(--hairline); }
.tc-media { aspect-ratio:16/9; overflow:hidden; background:var(--koyu); }
.tc-media img { width:100%; height:100%; object-fit:cover; }
/* teaser wipe: clip-path reveal layered on top of .reveal's fade, driven by
   the same .in flag (module 2's IO in app.js already observes .reveal —
   .wipe just adds a second, scoped transition to the same elements).
   Scoped to .tc-media img so it never collides with the unrelated
   .pafta-h.wipe heading-text clip-path above. Gated html.js + no-preference;
   static (fully revealed) under reduced-motion or no-JS. */
html.js .tc-media img.wipe {
  clip-path:inset(0 100% 0 0); transition:clip-path .7s ease;
}
html.js .tc-media img.wipe.in { clip-path:inset(0 0 0 0); }
@media (prefers-reduced-motion:reduce) {
  html.js .tc-media img.wipe { clip-path:inset(0 0 0 0); transition:none; }
}
.teaser-card .tc-no { padding:14px 16px 0; color:var(--cyan); margin:0; }
.teaser-card .tc-name { margin:6px 16px 2px; font-size:1.15rem; }
.teaser-card .tc-kat { margin:0 16px 10px; color:var(--kemik-soluk); }
.teaser-card .tc-desc { margin:0 16px 16px; color:var(--kemik-soluk); }
.teaser-link { display:inline-block; color:var(--cyan); text-decoration:none; border-bottom:1px solid transparent; }
.teaser-link:hover, .teaser-link:focus-visible { border-bottom-color:var(--cyan); }

/* ---------- süreç timeline ---------- */
.timeline { display:block; width:100%; max-width:400px; height:auto; margin:0 0 20px; overflow:visible; }
.timeline line { stroke:color-mix(in srgb, var(--cyan) 60%, transparent); stroke-width:1.5; }
.timeline .tl-node { fill:var(--grafit); stroke:var(--turuncu); stroke-width:2; }
.timeline-list { list-style:none; margin:0; padding:0; display:grid; gap:22px; }
.timeline-list h3 { margin:0 0 6px; color:var(--cyan); letter-spacing:.04em; font-size:.85rem; }
.timeline-list p { margin:0; }

/* ---------- stüdyo ---------- */
.studio-team { list-style:none; margin:0 0 40px; padding:0; display:grid; gap:26px; }
.studio-team h3 { margin:2px 0 6px; font-size:1.05rem; }
.studio-team .st-role { margin:0; color:var(--cyan); }
.studio-team .st-line { margin:0; color:var(--kemik-soluk); }

.studio-breakout { display:grid; gap:28px; margin-top:8px; }
.sb-item { border:var(--hairline); overflow:hidden; }
.sb-item img { width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; }
.sb-1 { transform:rotate(-1deg); }
.sb-2 { transform:rotate(1deg); margin-left:8%; }
@media (min-width:640px) {
  .studio-breakout { grid-template-columns:1fr 1fr; align-items:center; }
  .sb-2 { margin-left:0; margin-top:24px; }
}

/* ---------- iletişim (spine landing pafta) ---------- */
.contact-block { list-style:none; margin:0 0 28px; padding:0; display:grid; gap:8px; }
.contact-block a { text-decoration:none; }
.contact-block a:hover, .contact-block a:focus-visible { color:var(--cyan); }

/* ---------- viewport (drafted frame, scrub canvas host) ---------- */
.viewport {
  overflow:hidden; background:var(--koyu); border:var(--hairline);
}
.vp-chrome { position:absolute; inset:0; z-index:2; pointer-events:none; color:var(--cyan); }
.vp-still, .vp-canvas {
  position:absolute; inset:28px; width:calc(100% - 56px); height:calc(100% - 56px);
  object-fit:cover;
}
.vp-tick { position:absolute; width:16px; height:16px; }
.vp-tick-tl { top:12px; left:12px; }
.vp-tick-tr { top:12px; right:12px; }
.vp-tick-bl { bottom:12px; left:12px; }
.vp-tick-br { bottom:12px; right:12px; }
.vp-dimline {
  position:absolute; left:28px; right:28px; bottom:8px; height:12px;
  color:color-mix(in srgb, var(--cyan) 70%, transparent);
}
.vp-dimline line { stroke:currentColor; stroke-width:1; vector-effect:non-scaling-stroke; }
.vp-dimlabel {
  position:absolute; left:50%; bottom:5px; transform:translateX(-50%);
  background:var(--koyu); padding:0 6px; color:var(--cyan);
}
.title-block {
  position:absolute; top:12px; left:34px; display:flex; gap:10px; flex-wrap:wrap;
  background:var(--koyu); border:var(--hairline); padding:5px 9px; color:var(--cyan);
  font-size:.72rem;
}
.title-block .tb-ad { color:var(--kemik); }
.title-block .tb-olcek { color:var(--kemik-soluk); }

@media (max-width:1023px) {
  .vp-dimline, .vp-dimlabel { display:none; }
  .vp-still, .vp-canvas { inset:16px; width:calc(100% - 32px); height:calc(100% - 32px); }
  .vp-tick-tl, .vp-tick-tr { top:8px; }
  .vp-tick-bl, .vp-tick-br { bottom:8px; }
  .vp-tick-tl, .vp-tick-bl { left:8px; }
  .vp-tick-tr, .vp-tick-br { right:8px; }
  .title-block { top:8px; left:22px; padding:4px 7px; font-size:.66rem; gap:7px; }
}

/* =====================================================================
   Task 8 — projeler.html "arşiv çekmecesi": filter chips, drawing-sheet
   cards (wireframe elevation <-> DSLR photo toggle), detail dialogs.
   Baseline (no html.js class on <html>) must read as a complete static
   page: all 6 cards visible, photo shown, no toggle/chip/open controls
   (they require JS to do anything, so they're JS-gated away entirely).
   ===================================================================== */

.archive { max-width:1400px; margin:0 auto; padding:0 20px 60px; }
.archive-h1 { margin:44px 0 10px; font-size:clamp(1.8rem,2vw + 1.4rem,2.6rem); }
.archive-intro { margin:0 0 30px; color:var(--kemik-soluk); max-width:52ch; }

/* ---------- filter chips ---------- */
.chip-row { display:none; gap:10px; flex-wrap:wrap; margin:0 0 30px; }
html.js .chip-row { display:flex; }
.chip {
  background:none; border:var(--hairline); color:var(--kemik);
  font-family:var(--mono); font-size:.82rem; letter-spacing:.04em;
  text-transform:uppercase; padding:8px 14px; cursor:pointer;
}
.chip:hover, .chip:focus-visible { border-color:var(--cyan); }
.chip[aria-pressed="true"] { background:var(--cyan); color:var(--koyu); border-color:var(--cyan); }

/* ---------- sheet grid + card ---------- */
.sheet-grid { display:grid; gap:32px; margin:0 0 10px; }
@media (min-width:760px) { .sheet-grid { grid-template-columns:1fr 1fr; } }

.sheet { border:var(--hairline); padding:16px; display:flex; flex-direction:column; gap:12px; }
.sheet[data-hidden] { display:none; }

.sheet-head { display:flex; flex-direction:column; }
.sheet-no { margin:0; color:var(--cyan); }
.sheet-name { margin:4px 0 2px; font-size:1.1rem; }
.sheet-kat { margin:0; color:var(--kemik-soluk); }

.sheet-media { position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--koyu); }
.sheet-media .elev { color:var(--cyan); width:100%; height:100%; }
.sheet-media img { width:100%; height:100%; object-fit:cover; }

/* base (no-JS-safe) state: data-view is a static HTML attribute, so this
   works with zero script — default data-view="foto" shows the photo and
   hides the wireframe. */
.sheet[data-view="plan"] .sheet-media img { display:none; }
.sheet[data-view="foto"] .sheet-media .elev { display:none; }

/* html.js enhancement: layer both, crossfade opacity instead of a hard
   display:none swap. 200ms under no-preference; instant under reduced-motion. */
html.js .sheet-media .elev,
html.js .sheet-media img {
  position:absolute; inset:0; transition:opacity .2s ease;
}
html.js .sheet[data-view="plan"] .sheet-media img { display:block; opacity:0; }
html.js .sheet[data-view="foto"] .sheet-media .elev { display:block; opacity:0; }
html.js .sheet[data-view="plan"] .sheet-media .elev { opacity:1; }
html.js .sheet[data-view="foto"] .sheet-media img { opacity:1; }
@media (prefers-reduced-motion:reduce) {
  html.js .sheet-media .elev, html.js .sheet-media img { transition:none; }
}

.view-toggle { display:none; width:fit-content; border:var(--hairline); }
html.js .view-toggle { display:flex; }
.view-toggle button {
  background:none; border:none; color:var(--kemik-soluk);
  font-family:var(--mono); font-size:.72rem; letter-spacing:.05em;
  padding:8px 12px; cursor:pointer;
}
.view-toggle button + button { border-left:var(--hairline); }
.view-toggle button[aria-pressed="true"] {
  color:var(--cyan); background:color-mix(in srgb, var(--cyan) 12%, transparent);
}
.view-toggle button:hover, .view-toggle button:focus-visible { color:var(--cyan); }

.sheet-open {
  display:none; align-self:flex-start; margin-top:auto;
  background:none; border:var(--hairline); color:var(--kemik);
  font-family:var(--mono); font-size:.78rem; letter-spacing:.04em;
  text-transform:uppercase; padding:10px 16px; cursor:pointer;
}
html.js .sheet-open { display:inline-block; }
.sheet-open:hover, .sheet-open:focus-visible { border-color:var(--cyan); color:var(--cyan); }

/* ---------- detail dialog ---------- */
dialog.dlg {
  /* No `position` override here: the browser's top-layer <dialog> is
     already `position:fixed` (viewport-anchored) when open, and — being
     a positioned element itself — still a valid containing block for
     .dlg-close's `position:absolute` below. Setting `position:relative`
     here used to defeat that native fixed positioning, so scrolling the
     page while a dialog was open dragged the dialog along 1:1 (an
     ordinary wheel gesture over the dialog's own short content
     scroll-chains to the page). */
  border:var(--hairline); background:var(--grafit); color:var(--kemik);
  box-shadow:none; padding:56px 20px 24px; max-width:720px; width:92vw; max-height:88vh;
  overflow:auto; overscroll-behavior:contain;
}
dialog.dlg::backdrop { background:color-mix(in srgb, var(--koyu) 82%, transparent); }
.dlg-close {
  position:absolute; top:8px; right:8px; width:44px; height:44px;
  background:var(--grafit); border:var(--hairline); color:var(--kemik);
  font-size:1.1rem; line-height:1; cursor:pointer;
}
.dlg-close:hover, .dlg-close:focus-visible { color:var(--cyan); border-color:var(--cyan); }
.dlg-no { margin:0 0 4px; color:var(--cyan); }
.dlg-name { margin:0 0 14px; font-size:1.3rem; }
.dlg-gallery { display:grid; gap:10px; margin:0 0 16px; }
@media (min-width:560px) { .dlg-gallery { grid-template-columns:1fr 1fr; } }
.dlg-gallery img { width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; }
.dlg-spec { width:100%; border-collapse:collapse; margin:0 0 16px; }
.dlg-spec th, .dlg-spec td { text-align:left; font-weight:400; padding:8px 0; border-top:var(--hairline); }
.dlg-spec th { color:var(--kemik-soluk); width:30%; }
.dlg-desc { margin:0; color:var(--kemik-soluk); }

/* =====================================================================
   Task 9 — iletisim.html: drafted contact sheet, teklif süreci, breakout.
   ===================================================================== */

.contact { max-width:900px; margin:0 auto; padding:0 20px 70px; }
.contact-body { max-width:640px; margin:0 auto; }
.contact-h1 { margin-top:44px; }
.contact-lead { color:var(--kemik-soluk); margin:0 0 40px; max-width:44ch; }

.contact-sheet { width:100%; border-collapse:collapse; margin:0 0 54px; }
.contact-sheet th, .contact-sheet td {
  text-align:left; font-weight:400; padding:16px 12px 16px 0;
  border-top:var(--hairline); vertical-align:top;
}
.contact-sheet tr:last-child th, .contact-sheet tr:last-child td { border-bottom:var(--hairline); }
.contact-sheet th { color:var(--kemik-soluk); width:38%; }
.contact-sheet a { text-decoration:none; }
.contact-sheet a:hover, .contact-sheet a:focus-visible { color:var(--cyan); }
.contact-sheet .map-link {
  display:inline-block; margin-top:8px; color:var(--cyan);
  border-bottom:1px solid transparent;
}
.contact-sheet .map-link:hover, .contact-sheet .map-link:focus-visible { border-bottom-color:var(--cyan); }

.teklif-surec { margin:0 0 8px; }
.teklif-line { color:var(--cyan); margin:0 0 16px; }

.contact-breakout {
  border:var(--hairline); overflow:hidden; transform:rotate(-1deg);
  max-width:820px; margin:56px auto 0;
}
.contact-breakout img { width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; }
@media (min-width:900px) { .contact-breakout { margin-top:70px; } }