/* YENTEK tasarım sistemi — tek kaynak. Kurallar: .claude/skills/yentek-design/SKILL.md */
@layer tokens, base, layout, components, blocks, templates, utilities;

@font-face {
  font-family: "Archivo Variable";
  font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%;
  src: url("../../vendor/fonts/archivo/archivo-latin-ext-wdth-normal.58e761d219b3.woff2") format("woff2-variations");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo Variable";
  font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%;
  src: url("../../vendor/fonts/archivo/archivo-latin-wdth-normal.c5a01ed02269.woff2") format("woff2-variations");
  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;
}

@layer tokens {
  :root {
    --aluminium: #EEF0EE;
    --aluminium-2: #E2E6E3;
    --graphite: #15181B;
    --steel: #4A5450;

    /* Logo paleti (kırmızı / mavi / gri). Ana renk panelden değişebilir: <html style="--signal:…"> */
    --logo-red: #C9302C;
    --logo-red-2: #F0564F;
    --logo-blue: #1E3A5F;
    --logo-blue-2: #13294A;
    --logo-gray: #8B9591;

    --signal: var(--logo-red);
    --night: #0B1222;
    --night-2: #16203A;
    --frost: #E6EBF5;
    --frost-2: #9AA6C2;

    --bg: var(--aluminium);
    --bg-2: var(--aluminium-2);
    --fg: var(--graphite);
    --fg-2: var(--steel);
    --line: color-mix(in srgb, var(--fg) 16%, transparent);
    --accent: var(--signal);
    --on-accent: #FFFFFF; /* kırmızı zeminde beyaz metin (4.5:1 panelde doğrulanır) */

    --font: "Archivo Variable", "Archivo", "Helvetica Neue", Arial, sans-serif;
    --step--1: .8125rem;
    --step-0: 1.0625rem;
    --step-1: 1.3125rem;
    --step-2: clamp(1.45rem, 1.2rem + .9vw, 1.9rem);
    --step-3: clamp(1.9rem, 1.4rem + 1.9vw, 2.9rem);
    --step-4: clamp(2.4rem, 1.5rem + 3.6vw, 4.6rem);
    --step-5: clamp(3rem, 1.4rem + 6.4vw, 8rem);
    --step-6: clamp(3.4rem, 1rem + 10vw, 12.5rem);

    --gutter: clamp(20px, 4vw, 64px);
    --space-s: clamp(16px, 2vw, 28px);
    --space-m: clamp(32px, 4.5vw, 72px);
    --space-l: clamp(72px, 10vw, 168px);
    --cut: clamp(14px, 1.6vw, 26px);
    --header-h: 76px;
    --ease: cubic-bezier(.2, .7, .1, 1);
  }
  /* Vurgu türevleri sayfa düzeyinde çözülür; böylece proje sayfasının kendi vurgu rengini de izler. */
  body, [data-theme], .site-footer, .mobile-nav { --accent-text: var(--accent); --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent); }
  .theme-dark, [data-theme="night"], [data-theme="dark"], .site-footer, .nav-sub {
    --accent-text: color-mix(in srgb, var(--accent) 68%, #fff);
  }
  .theme-dark, [data-theme="night"], [data-theme="dark"] {
    --bg: var(--night);
    --bg-2: var(--night-2);
    --fg: var(--frost);
    --fg-2: var(--frost-2);
  }
  [data-theme="dark"] { --bg: var(--graphite); --bg-2: #22272b; }
  [data-theme="light"] { --bg: var(--aluminium); --bg-2: var(--aluminium-2); --fg: var(--graphite); --fg-2: var(--steel); --accent-text: var(--accent); }
}

@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 12px); }
  body {
    margin: 0; background: var(--bg); color: var(--fg);
    font: 400 var(--step-0)/1.6 var(--font); font-stretch: 100%;
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
    overflow-x: clip;
  }
  img, video, canvas, svg { display: block; max-width: 100%; }
  img { height: auto; }
  a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
  button, input, select, textarea { font: inherit; color: inherit; }
  button { cursor: pointer; }
  h1, h2, h3, h4 { margin: 0; font-weight: 760; font-stretch: 118%; letter-spacing: -.028em; line-height: .98; text-wrap: balance; }
  p { margin: 0 0 1em; text-wrap: pretty; }
  ::selection { background: var(--accent); color: var(--on-accent); }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
  .skip-link { position: fixed; left: 12px; top: -80px; z-index: 999; background: var(--fg); color: var(--bg); padding: 12px 18px; }
  .skip-link:focus { top: 12px; }
  .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  }
}

@layer layout {
  .wrap { width: 100%; max-width: 1680px; margin-inline: auto; padding-inline: var(--gutter); }
  .grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(12px, 1.8vw, 28px); }
  .rail { grid-column: 1 / span 3; }
  .main-col { grid-column: 4 / -1; }
  .section { padding-block: var(--space-l); }
  .section + .section { padding-top: 0; }
  .section--flush { padding-block: 0; }
  @media (max-width: 900px) {
    .rail, .main-col { grid-column: 1 / -1; }
  }
}

@layer components {
  /* Başlık üstü bağlam satırı: küçük, cümle düzeni, sinyal rengi pah işareti */
  .kicker { display: flex; align-items: center; gap: .6em; font-size: var(--step--1); font-weight: 620; font-stretch: 112%; color: var(--fg-2); margin: 0 0 1.4em; letter-spacing: .01em; }
  .kicker::before { content: ""; inline-size: 10px; block-size: 10px; background: var(--accent); clip-path: polygon(0 0, 100% 0, 100% 40%, 40% 100%, 0 100%); flex: none; }

  .display { font-size: var(--step-6); font-stretch: 125%; font-weight: 780; letter-spacing: -.045em; line-height: .86; }
  .h-xl { font-size: var(--step-5); font-stretch: 122%; letter-spacing: -.04em; line-height: .9; }
  .h-l { font-size: var(--step-4); line-height: .95; }
  .h-m { font-size: var(--step-3); line-height: 1.02; }
  .lead { font-size: var(--step-1); line-height: 1.5; color: var(--fg-2); max-width: 46ch; }
  .prose { max-width: 66ch; font-size: var(--step-0); }
  .prose h3 { font-size: var(--step-2); margin: 1.6em 0 .6em; }
  .prose ul, .prose ol { padding-left: 1.2em; }
  .prose li { margin-bottom: .4em; }
  .prose blockquote { margin: 1.4em 0; padding-left: 1em; border-left: 3px solid var(--accent); font-size: var(--step-1); }
  .prose a { text-decoration-color: var(--accent); text-decoration-thickness: 2px; }

  /* Pah kırılmış çerçeve — marka imzası */
  .chamfer { clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); }
  .chamfer-bl { clip-path: polygon(0 0, 100% 0, 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); }
  .media { position: relative; overflow: hidden; background: var(--bg-2); }
  .media img, .media video { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .media-caption { font-size: var(--step--1); color: var(--fg-2); margin-top: .8em; }

  .btn {
    --btn-bg: var(--button-bg, var(--accent)); --btn-fg: var(--on-accent);
    display: inline-flex; align-items: center; gap: 1.6em; min-height: 52px; padding: 0 22px 0 24px;
    background: var(--btn-bg); color: var(--btn-fg); border: 0; text-decoration: none;
    font-weight: 680; font-stretch: 110%; font-size: .95rem;
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
    transition: background-color .25s var(--ease), color .25s var(--ease);
  }
  .btn:hover { --btn-bg: var(--fg); --btn-fg: var(--bg); }
  .btn svg { inline-size: 18px; transition: transform .3s var(--ease); }
  .btn:hover svg { transform: translate(3px, -3px); }
  .btn--ghost { --btn-bg: transparent; --btn-fg: var(--fg); box-shadow: inset 0 0 0 1.5px currentColor; clip-path: none; }
  .text-link { display: inline-flex; gap: .5em; align-items: center; font-weight: 650; text-decoration: none; border-bottom: 2px solid var(--link-accent, var(--accent)); padding-bottom: 3px; }
  .text-link:hover { color: var(--link-accent, var(--accent-text)); }

  /* Üst bilgi */
  .site-header { position: fixed; inset: 0 0 auto; z-index: 100; height: var(--header-h); color: var(--fg); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); transition: background-color .3s, color .3s, border-color .3s; }
  .site-header.is-over { background: transparent; color: #fff; border-color: rgba(255,255,255,.18); backdrop-filter: none; }
  .site-header.is-over.is-scrolled { background: color-mix(in srgb, var(--bg) 90%, transparent); color: var(--fg); border-color: var(--line); backdrop-filter: blur(14px); }
  .site-header .wrap { display: flex; align-items: center; gap: 32px; height: 100%; }
  .brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }

  .brand-logo {
    display: block;
    block-size: 36px;
    inline-size: auto;
    max-inline-size: 160px;
    object-fit: contain;
    flex: none;
  }

  .brand-word { font-weight: 800; font-stretch: 125%; font-size: 1.35rem; letter-spacing: -.05em; line-height: 1; }
  .nav { margin-left: auto; display: flex; gap: clamp(18px, 2.6vw, 40px); }
  .nav a { text-decoration: none; font-weight: 560; font-size: .95rem; padding: 6px 0; border-bottom: 2px solid transparent; }
  .nav a:hover, .nav a[aria-current="page"] { border-color: var(--accent); }
  .header-cta { min-height: 44px; }
  .menu-toggle { display: none; margin-left: auto; inline-size: 46px; block-size: 46px; background: transparent; border: 1.5px solid currentColor; align-items: center; justify-content: center; flex-direction: column; gap: 6px; }
  .menu-toggle span { inline-size: 18px; block-size: 1.5px; background: currentColor; transition: transform .3s var(--ease); }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
  .mobile-nav { position: fixed; inset: var(--header-h) 0 0; background: var(--bg); color: var(--fg); padding: 32px var(--gutter); display: flex; flex-direction: column; gap: 6px; z-index: 99; overflow-y: auto; }
  .mobile-nav[hidden] { display: none; }
  .mobile-nav a { font-size: var(--step-3); font-weight: 760; font-stretch: 120%; text-decoration: none; padding: 10px 0; border-bottom: 1px solid var(--line); }
  @media (max-width: 900px) {
    .nav, .header-cta { display: none; }
    .menu-toggle { display: inline-flex; }
  }
  .page-start { padding-top: var(--header-h); }

  /* Önizleme şeridi */
  .preview-bar { position: fixed; z-index: 120; inset: auto 16px 16px auto; display: flex; gap: 14px; align-items: center; background: var(--graphite); color: #fff; padding: 10px 12px 10px 16px; font-size: .9rem; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
  .preview-bar a { color: #fff; }
  .preview-bar strong { color: color-mix(in srgb, var(--signal) 68%, #fff); }

  /* Alt bilgi */
  .site-footer { background: var(--graphite); color: var(--aluminium); padding-block: var(--space-m) 28px; border-top: 1px solid rgba(255,255,255,.12); --fg-2: #A3ACA8; --line: rgba(255,255,255,.14); }
  .footer-word { font-size: clamp(4rem, 17vw, 17rem); font-weight: 800; font-stretch: 125%; letter-spacing: -.06em; line-height: .78; margin: var(--space-m) 0 var(--space-s); }
  .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-s); }
  .footer-grid h2 { font-size: var(--step--1); font-stretch: 112%; color: var(--fg-2); font-weight: 600; letter-spacing: .02em; margin-bottom: 1em; }
  .footer-grid a { display: block; text-decoration: none; padding: 3px 0; }
  .footer-grid a:hover { color: var(--accent-text); }
  .footer-bottom { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: var(--space-m); padding-top: 20px; border-top: 1px solid var(--line); font-size: var(--step--1); color: var(--fg-2); }
  @media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; } }

  .tag { display: inline-flex; align-items: center; gap: 6px; font-size: var(--step--1); font-weight: 600; font-stretch: 110%; color: var(--fg-2); }
  .meta-row { display: flex; flex-wrap: wrap; gap: 6px 20px; }
  .arrow-icon { inline-size: 1em; block-size: 1em; flex: none; }

  /* Lightbox */
  .lightbox { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 92vh; }
  .lightbox::backdrop { background: rgba(8, 10, 12, .9); }
  .lightbox img { max-height: 84vh; width: auto; margin: auto; }
  .lightbox figcaption { color: #fff; padding: 10px 0; font-size: .9rem; }
  .lightbox-close { position: fixed; top: 16px; right: 16px; inline-size: 48px; block-size: 48px; background: #fff; border: 0; font-size: 1.4rem; }
}

@layer blocks {
  /* Video açılış */
  .hero { position: relative; min-height: 100svh; display: grid; align-items: end; color: #fff; background: var(--graphite); overflow: hidden; isolation: isolate; }
  .hero-media { position: absolute; inset: 0; z-index: -2; }
  .hero-media video, .hero-media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(10,12,14,.82) 0%, rgba(10,12,14,.35) 45%, rgba(10,12,14,.25) 100%); }
  .hero-inner { padding-block: calc(var(--header-h) + 40px) clamp(28px, 4vw, 56px); }
  /* İsteğe bağlı 3D uçuş katmanı: videonun ve okunabilirlik örtüsünün üstünde, metin/butonların altında; tıklama almaz */
  .hero-inner { position: relative; z-index: 1; }
  .hero-flight { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.6s var(--ease); }
  .hero-flight.is-ready { opacity: 1; }
  .hero-flight canvas { display: block; inline-size: 100%; block-size: 100%; }
  .hero-flight-badge { position: absolute; z-index: 2; top: calc(var(--header-h) + 14px); right: var(--gutter); margin: 0; padding: 4px 10px; font-size: var(--step--1); font-weight: 650; color: #fff; background: var(--accent); }
  .hero-title { font-size: min(var(--step-6), 10.4vw); font-stretch: 125%; font-weight: 790; letter-spacing: -.05em; line-height: .84; margin: 0 0 clamp(28px, 5vw, 64px); }
  .hero-line { display: block; overflow: hidden; padding-bottom: .04em; }
  .hero-line > span { display: inline-block; }
  .hero-line:nth-child(2) { padding-left: 11%; }
  .hero-line:nth-child(3) { padding-left: 22%; }
  .hero-bottom { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; align-items: end; }
  .hero-desc { grid-column: 1 / span 5; font-size: var(--step-1); line-height: 1.45; margin: 0; color: rgba(255,255,255,.88); }
  .hero-actions { grid-column: 7 / -1; display: flex; justify-content: flex-end; align-items: center; gap: 18px; flex-wrap: wrap; }
  .video-toggle { display: inline-flex; align-items: center; gap: 10px; background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.5); min-height: 44px; padding: 0 14px; font-size: .85rem; font-variant-numeric: tabular-nums; }
  .video-toggle:hover { border-color: #fff; }
  .hero .kicker { color: rgba(255,255,255,.8); }
  @media (max-width: 900px) {
    .hero-desc, .hero-actions { grid-column: 1 / -1; justify-content: flex-start; }
    .hero-line:nth-child(2) { padding-left: 8%; }
    .hero-line:nth-child(3) { padding-left: 16%; }
  }

  /* Büyük ifade */
  .statement-text { font-size: var(--step-4); font-weight: 600; font-stretch: 108%; letter-spacing: -.03em; line-height: 1.04; max-width: 22ch; margin: 0; }
  .statement-foot { display: grid; grid-template-columns: repeat(9, 1fr); margin-top: var(--space-m); gap: 20px; }
  .statement-foot p { grid-column: 5 / -1; color: var(--fg-2); font-size: var(--step-1); line-height: 1.5; }
  .statement-foot .text-link { grid-column: 5 / -1; justify-self: start; }
  @media (max-width: 900px) { .statement-foot p, .statement-foot .text-link { grid-column: 1 / -1; } }

  /* Kayan yazı */
  .marquee { border-block: 1px solid var(--line); overflow: hidden; padding-block: clamp(14px, 2vw, 26px); }
  .marquee-track { display: flex; width: max-content; animation: marquee 40s linear infinite; }
  .marquee-track span { font-size: var(--step-5); font-weight: 790; font-stretch: 125%; letter-spacing: -.045em; line-height: 1; white-space: nowrap; padding-right: .6em; }
  .marquee:hover .marquee-track { animation-play-state: paused; }
  @keyframes marquee { to { transform: translateX(-50%); } }

  /* Projeler */
  .projects-head { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; align-items: end; margin-bottom: var(--space-m); }
  .projects-head h2 { grid-column: 1 / span 8; }
  .projects-head p { grid-column: 9 / -1; color: var(--fg-2); margin: 0; }
  .project-feature { display: block; text-decoration: none; margin-bottom: var(--space-m); }
  .project-feature .media { aspect-ratio: 16 / 8; }
  .project-feature .media img { transition: transform 1.2s var(--ease); }
  .project-feature:hover .media img, .project-card:hover .media img { transform: scale(1.03); }
  .project-feature-meta { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; margin-top: 18px; align-items: start; }
  .project-feature-meta h3 { grid-column: 1 / span 8; font-size: var(--step-4); }
  .project-feature-meta .meta-row { grid-column: 9 / -1; justify-content: flex-end; padding-top: .6em; }
  .project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-m) clamp(16px, 2.4vw, 40px); }
  .project-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .project-card { text-decoration: none; display: flex; flex-direction: column; gap: 14px; }
  .project-card .media { aspect-ratio: 4 / 3; }
  .project-card .media img { transition: transform 1.2s var(--ease); }
  .project-card h3 { font-size: var(--step-2); font-stretch: 112%; }
  .project-card p { color: var(--fg-2); margin: 0; font-size: .98rem; }
  .project-grid > .project-card:nth-child(even) { margin-top: clamp(0px, 8vw, 140px); }
  .project-grid--3 > .project-card:nth-child(even) { margin-top: 0; }
  .media-empty { display: grid; place-items: center; inline-size: 100%; block-size: 100%; color: var(--fg-2); font-weight: 700; font-stretch: 125%; font-size: var(--step-2); }
  @media (max-width: 900px) {
    .projects-head h2, .projects-head p, .project-feature-meta h3, .project-feature-meta .meta-row { grid-column: 1 / -1; justify-content: flex-start; }
    .project-grid, .project-grid--3 { grid-template-columns: 1fr; }
    .project-grid > .project-card:nth-child(even) { margin-top: 0; }
    .project-feature .media { aspect-ratio: 4 / 3; }
  }
  .filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--space-m); }
  .filters button { min-height: 42px; padding: 0 16px; background: transparent; border: 1.5px solid var(--line); font-weight: 600; font-size: .92rem; }
  .filters button[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
  .filters button:hover { border-color: var(--fg); }
  .empty-note { color: var(--fg-2); }

  /* Uzmanlık */
  .expertise { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(16px, 2.4vw, 40px); align-items: start; }
  .expertise-visual { grid-column: 1 / span 5; position: sticky; top: calc(var(--header-h) + 24px); }
  .expertise-visual .media { aspect-ratio: 4 / 5; }
  .expertise-visual img { transition: opacity .35s; }
  .expertise-list { grid-column: 7 / -1; }
  .expertise-list > header { margin-bottom: var(--space-m); }
  .acc-item { border-top: 1px solid var(--line); }
  .acc-item:last-child { border-bottom: 1px solid var(--line); }
  .acc-item button { inline-size: 100%; display: flex; justify-content: space-between; align-items: center; gap: 18px; text-align: left; background: none; border: 0; padding: 22px 0; font-size: var(--step-2); font-weight: 720; font-stretch: 112%; letter-spacing: -.02em; }
  .acc-item button::after { content: ""; flex: none; inline-size: 18px; block-size: 18px; background: linear-gradient(currentColor 0 0) center / 100% 2px no-repeat, linear-gradient(currentColor 0 0) center / 2px 100% no-repeat; transition: transform .3s var(--ease); }
  .acc-item button[aria-expanded="true"]::after { transform: rotate(45deg); }
  .acc-item button[aria-expanded="true"] { color: var(--accent); }
  .acc-panel { padding: 0 0 26px; max-width: 52ch; }
  .acc-panel p { color: var(--fg-2); }
  @media (max-width: 900px) {
    .expertise-visual { display: none; }
    .expertise-list { grid-column: 1 / -1; }
  }

  /* Görsel + metin */
  .text-media { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(16px, 2.4vw, 40px); align-items: center; }
  .text-media .media { grid-column: 1 / span 7; aspect-ratio: 5 / 4; }
  .text-media .copy { grid-column: 9 / -1; }
  .text-media--right .media { grid-column: 6 / -1; order: 2; }
  .text-media--right .copy { grid-column: 1 / span 4; }
  .text-media .copy h2 { font-size: var(--step-3); margin-bottom: .7em; }
  @media (max-width: 900px) { .text-media .media, .text-media .copy { grid-column: 1 / -1; order: 0; } }

  /* Galeri */
  .gallery { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(10px, 1.4vw, 20px); }
  .gallery-item { grid-column: span 4; margin: 0; }
  .gallery-item:nth-child(5n + 1) { grid-column: span 8; }
  .gallery-item:nth-child(5n + 4) { grid-column: span 6; }
  .gallery-item:nth-child(5n + 5) { grid-column: span 6; }
  .gallery-item button { display: block; inline-size: 100%; padding: 0; border: 0; background: none; }
  .gallery-item .media { aspect-ratio: 4 / 3; }
  .gallery-item:nth-child(5n + 1) .media { aspect-ratio: auto; block-size: 100%; min-height: 100%; }
  @media (max-width: 760px) { .gallery-item, .gallery-item:nth-child(n) { grid-column: 1 / -1; } }

  /* Video */
  .video-block .media { aspect-ratio: 16 / 9; }
  .video-block video { background: #000; }

  /* Künye */
  .facts { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }
  .facts h2 { grid-column: 1 / span 3; font-size: var(--step-2); }
  .facts dl { grid-column: 4 / -1; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(16px, 2.4vw, 40px); }
  .facts dl div { display: grid; grid-template-columns: minmax(110px, 1fr) 2fr; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); }
  .facts dt { color: var(--fg-2); font-size: var(--step--1); font-weight: 600; font-stretch: 110%; }
  .facts dd { margin: 0; font-weight: 560; font-variant-numeric: tabular-nums; }
  @media (max-width: 900px) { .facts h2, .facts dl { grid-column: 1 / -1; } .facts dl { grid-template-columns: 1fr; } }

  /* Alıntı */
  .quote { position: relative; max-width: 30ch; margin: 0; }
  .quote p { font-size: var(--step-4); font-weight: 560; font-stretch: 104%; letter-spacing: -.025em; line-height: 1.08; }
  .quote p::before { content: "“"; position: absolute; left: -.55em; color: var(--accent); }
  .quote footer { margin-top: 1.4em; color: var(--fg-2); }
  .quote cite { font-style: normal; font-weight: 680; color: var(--fg); }
  @media (max-width: 900px) { .quote p::before { position: static; } }

  /* Sinematik bölüm */
  .chapter { position: relative; min-height: 100svh; display: grid; color: var(--fg); background: var(--bg); overflow: clip; }
  .chapter-media { position: absolute; inset: 0; }
  .chapter-media img, .chapter-media video { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .chapter[data-has-media]::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--bg) 52%, transparent); }
  .chapter-copy { position: relative; z-index: 1; align-self: end; padding-block: var(--space-l) var(--space-m); }
  .chapter-copy .inner { max-width: 760px; }
  .chapter[data-align="end"] .inner { margin-left: auto; }
  .chapter[data-align="center"] .inner { margin-inline: auto; text-align: center; }
  .chapter[data-align="center"] .kicker { justify-content: center; }
  .chapter h2 { font-size: var(--step-5); font-stretch: 122%; margin-bottom: .4em; }
  .chapter p { font-size: var(--step-1); line-height: 1.5; color: var(--fg); max-width: 48ch; }
  .chapter[data-align="center"] p { margin-inline: auto; }

  /* Haberler */
  .news-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
  .news-list li { border-bottom: 1px solid var(--line); }
  .news-list a { display: grid; grid-template-columns: 160px 1fr 200px; gap: 24px; align-items: center; padding: 22px 0; text-decoration: none; }
  .news-list time { color: var(--fg-2); font-variant-numeric: tabular-nums; font-size: var(--step--1); font-weight: 600; }
  .news-list h3 { font-size: var(--step-2); font-stretch: 112%; }
  .news-list .media { aspect-ratio: 3 / 2; }
  .news-list a:hover h3 { color: var(--accent-text); }
  @media (max-width: 760px) { .news-list a { grid-template-columns: 1fr; gap: 8px; } .news-list .media { display: none; } }

  /* İletişim */
  .contact-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }
  .contact-grid > div:first-child { grid-column: 1 / span 6; }
  .contact-list { grid-column: 8 / -1; display: grid; gap: 0; margin: 0; }
  .contact-list div { padding: 18px 0; border-top: 1px solid var(--line); }
  .contact-list dt { font-size: var(--step--1); color: var(--fg-2); font-weight: 600; }
  .contact-list dd { margin: 4px 0 0; font-size: var(--step-2); font-weight: 650; font-stretch: 108%; }
  .contact-list a { text-decoration: none; }
  .contact-list a:hover { color: var(--accent-text); }
  @media (max-width: 900px) { .contact-grid > div:first-child, .contact-list { grid-column: 1 / -1; } }

  /* Çağrı */
  .cta-band { background: var(--graphite); color: var(--aluminium); --fg-2: #A3ACA8; padding-block: var(--space-l); position: relative; overflow: hidden; }
  .cta-band h2 { font-size: min(var(--step-6), calc((min(100vw, 1680px) - 2 * var(--gutter)) / (var(--fit, 8) * .74))); font-stretch: 125%; letter-spacing: -.05em; line-height: .86; max-width: 12ch; margin-bottom: var(--space-m); }
  .cta-band::after { content: ""; position: absolute; right: 0; bottom: 0; inline-size: clamp(90px, 16vw, 260px); aspect-ratio: 1; background: var(--accent); clip-path: polygon(100% 0, 100% 100%, 0 100%); }
}

@layer templates {
  .page-head { padding-top: calc(var(--header-h) + clamp(48px, 8vw, 128px)); padding-bottom: var(--space-m); }
  .page-head h1 { font-size: var(--step-6); font-stretch: 125%; font-weight: 790; letter-spacing: -.05em; line-height: .86; overflow-wrap: anywhere; hyphens: auto; }
  .page-head-foot { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; margin-top: var(--space-m); align-items: end; }
  .page-head-foot .lead { grid-column: 7 / -1; margin: 0; }
  .page-head-foot .back { grid-column: 1 / span 5; }
  @media (max-width: 900px) { .page-head-foot .lead, .page-head-foot .back { grid-column: 1 / -1; } }

  /* Proje vitrini */
  .showcase-hero { padding-top: calc(var(--header-h) + clamp(32px, 5vw, 80px)); }
  .showcase-hero h1 { font-size: var(--step-6); font-stretch: 125%; font-weight: 790; letter-spacing: -.05em; line-height: .86; max-width: 14ch; overflow-wrap: anywhere; }
  .showcase-cover { margin-top: var(--space-m); aspect-ratio: 21 / 9; }
  .showcase-specs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; padding-block: 22px; border-bottom: 1px solid var(--line); }
  .showcase-specs dt { font-size: var(--step--1); color: var(--fg-2); font-weight: 600; }
  .showcase-specs dd { margin: 4px 0 0; font-weight: 620; }
  .showcase-summary { padding-block: var(--space-m) 0; }
  .showcase-summary p { font-size: var(--step-3); font-weight: 520; font-stretch: 104%; letter-spacing: -.02em; line-height: 1.15; max-width: 30ch; }
  .next-project { display: block; text-decoration: none; border-top: 1px solid var(--line); padding-block: var(--space-m); }
  .next-project span { color: var(--fg-2); font-weight: 600; font-size: var(--step--1); }
  .next-project strong { display: block; font-size: var(--step-5); font-stretch: 122%; letter-spacing: -.04em; line-height: .95; margin-top: .2em; }
  .next-project:hover strong { color: var(--accent-text); }
  @media (max-width: 760px) { .showcase-specs { grid-template-columns: repeat(2, 1fr); } .showcase-cover { aspect-ratio: 4 / 3; } }

  /* Sinematik */
  .cine-hero { position: relative; min-height: 100svh; display: grid; align-items: end; overflow: hidden; }
  .cine-hero .media { position: absolute; inset: 0; }
  .cine-hero .media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--bg) 4%, transparent 60%); }
  .cine-hero .wrap { position: relative; padding-bottom: var(--space-m); }
  .cine-hero h1 { font-size: var(--step-6); font-stretch: 125%; letter-spacing: -.05em; line-height: .86; max-width: 13ch; }
  .cine-hero .lead { margin-top: 1.4em; color: var(--fg-2); }

  /* Doğrulanmamış içerik uyarısı (yalnızca önizlemede) */
  .review-note { background: #FFF1C2; color: var(--graphite); padding: 10px var(--gutter); font-size: .9rem; position: relative; z-index: 101; margin-top: var(--header-h); }
}

/* ---------------- 3D hikâye (kurallar: .claude/skills/immersive-3d/SKILL.md) ---------------- */
@layer blocks {
  .story3d { position: relative; background: var(--story-bg, var(--night)); color: var(--fg); }
  .story3d-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; }
  .story3d-viewport { position: absolute; inset: 0; }
  .story3d-viewport canvas { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; pointer-events: none; touch-action: pan-y; }
  .story3d.is-orbit .story3d-viewport canvas { pointer-events: auto; touch-action: none; cursor: grab; }
  .story3d-poster { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; transition: opacity .6s; }
  .story3d-poster--empty { background: var(--story-bg, var(--night)); }
  .story3d.is-ready .story3d-poster { opacity: 0; pointer-events: none; }
  .story3d-status { position: absolute; left: var(--gutter); bottom: 88px; margin: 0; font-size: var(--step--1); color: var(--fg-2); font-variant-numeric: tabular-nums; }
  .story3d-hud { position: absolute; inset: auto 0 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-block: 18px; z-index: 3; pointer-events: none; }
  .story3d-hud > * { pointer-events: auto; }
  .story3d-counter { font-weight: 700; font-stretch: 112%; font-variant-numeric: tabular-nums; color: var(--fg-2); }
  .story3d-counter span { color: var(--fg); }
  .story3d-controls { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
  .story3d-btn { min-height: 44px; padding: 0 16px; background: color-mix(in srgb, var(--story-bg, var(--night)) 70%, transparent); color: var(--fg); border: 1.5px solid color-mix(in srgb, var(--fg) 40%, transparent); font-weight: 600; font-size: .9rem; backdrop-filter: blur(8px); }
  .story3d-btn:hover, .story3d-btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-text); }
  .story3d-steps { position: relative; z-index: 2; margin-top: -100svh; pointer-events: none; }
  .story3d-step { min-height: var(--step-len, 110svh); display: flex; align-items: center; }
  .story3d-step:first-child { min-height: 100svh; }
  .story3d-card { pointer-events: auto; max-width: 440px; padding: 26px 28px 22px; background: color-mix(in srgb, var(--story-bg, var(--night)) 78%, transparent); backdrop-filter: blur(10px); border-left: 3px solid var(--accent); }
  .story3d-step--intro .story3d-card { max-width: 820px; background: none; backdrop-filter: none; border: 0; padding: 0; }
  .story3d-step--intro h2 { margin-bottom: .3em; }
  .story3d-card h3 { font-size: var(--step-3); margin-bottom: .5em; }
  .story3d-card p { color: var(--fg); opacity: .86; margin: 0; }
  .story3d-step-no { font-size: var(--step--1); font-weight: 700; font-stretch: 112%; color: var(--accent); margin-bottom: .8em !important; opacity: 1 !important; }
  .story3d-step.is-active .story3d-card { border-left-color: var(--accent); }
  .story3d-step:not(.is-active):not(.story3d-step--intro) .story3d-card { opacity: .35; transition: opacity .4s; }
  .story3d-step.is-active .story3d-card { opacity: 1; transition: opacity .4s; }
  .story3d-hotspots { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
  .hotspot { position: absolute; left: 0; top: 0; pointer-events: auto; display: flex; align-items: center; gap: 10px; transform: translate(-9px, -9px); transition: opacity .3s; }
  .hotspot[hidden] { display: none; }
  .hotspot-dot { inline-size: 18px; block-size: 18px; border-radius: 50%; border: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 30%, transparent); padding: 0; flex: none; }
  .hotspot-dot::after { content: ""; display: block; margin: 4px; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--accent); }
  .hotspot-label { font-size: .82rem; font-weight: 650; font-stretch: 110%; background: color-mix(in srgb, var(--story-bg, var(--night)) 82%, transparent); padding: 4px 8px; white-space: nowrap; }
  .hotspot-body { position: absolute; top: 26px; left: 0; inline-size: 240px; font-size: .85rem; line-height: 1.45; padding: 10px 12px; background: var(--frost); color: var(--graphite); }
  .story3d-index { padding-block: 18px; }
  .story3d-index summary { cursor: pointer; font-weight: 650; }
  .story3d-index dl { display: grid; gap: 10px; margin: 14px 0 0; }
  .story3d-index dt { font-weight: 650; }
  .story3d-index dd { margin: 0; color: var(--fg-2); }
  .story3d-credit { font-size: var(--step--1); color: var(--fg-2); padding-bottom: 24px; margin: 0; }
  /* Statik görünüm: poster + okunabilir aşama listesi */
  .story3d.is-static .story3d-sticky { position: relative; height: min(70svh, 720px); }
  .story3d.is-static .story3d-steps { margin-top: 0; }
  .story3d.is-static .story3d-step { min-height: 0; padding-block: 18px; }
  .story3d.is-static .story3d-step:first-child { min-height: 0; padding-top: var(--space-m); }
  .story3d.is-static .story3d-step .story3d-card { opacity: 1; max-width: 680px; background: none; backdrop-filter: none; }
  .story3d.is-static .story3d-counter { display: none; }
  @media (max-width: 760px) {
    .story3d-card { max-width: none; }
    .story3d-step { align-items: flex-end; padding-bottom: 96px; }
    .hotspot-label { display: none; }
  }
}

/* ---------------- Ürün kataloğu ---------------- */
@layer blocks {
  .catalog-head { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; align-items: end; margin-bottom: var(--space-m); }
  .catalog-head > div { grid-column: 1 / span 7; }
  .catalog-head > p { grid-column: 9 / -1; color: var(--fg-2); margin: 0; }
  .catalog .filters { margin-bottom: var(--space-s); position: sticky; top: calc(var(--header-h) + 8px); z-index: 5; padding-block: 8px; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); }
  .catalog-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-m) clamp(14px, 1.8vw, 28px); }
  .catalog-item[hidden] { display: none; }
  .product { display: contents; }
  .product-card { display: flex; flex-direction: column; gap: 12px; inline-size: 100%; padding: 0; border: 0; background: none; text-align: left; }
  .product-card .media { aspect-ratio: 4 / 5; }
  .product-card .media img { transition: transform 1.2s var(--ease); }
  .product-card:hover .media img { transform: scale(1.03); }
  .product-card:hover .product-name { color: var(--accent-text); }
  .product-name { font-size: var(--step-1); font-weight: 720; font-stretch: 112%; letter-spacing: -.015em; line-height: 1.12; transition: color .25s var(--ease); }
  /* Ayrıntı: JS yokken kartın altında açık; JS varken diyalogda */
  .product-detail { display: grid; gap: var(--space-s); padding-top: 14px; }
  .catalog.is-enhanced .catalog-grid .product-detail { display: none; }
  .product-gallery { display: grid; gap: 10px; align-content: start; }
  .product-main { aspect-ratio: 4 / 3; }
  .product-thumbs { display: flex; gap: 8px; }
  .product-thumbs button { inline-size: 84px; padding: 0; border: 2px solid transparent; background: none; }
  .product-thumbs button[aria-pressed="true"] { border-color: var(--accent); }
  .product-thumbs .media { aspect-ratio: 1; }
  .product-copy h3 { font-size: var(--step-3); margin-bottom: .6em; }
  .product-copy h4 { font-size: var(--step--1); font-weight: 620; font-stretch: 112%; color: var(--fg-2); margin: 1.6em 0 .6em; letter-spacing: .01em; }
  .product-desc p { color: var(--fg); }
  .product-specs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
  .product-specs li { padding: 10px 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
  .product-location { margin-top: 1.4em; display: grid; gap: 2px; font-weight: 600; }
  .product-location span { font-size: var(--step--1); color: var(--fg-2); font-weight: 600; font-stretch: 110%; }
  .catalog .product-detail .media img { object-fit: cover; }

  /* Ürün penceresi: solda oranı korunan galeri, sağda bağımsız kayan bilgi sütunu */
  .product-dialog { inline-size: min(1320px, 100vw - 48px); block-size: min(860px, 100svh - 48px); max-inline-size: none; max-block-size: none; padding: 0; border: 0; background: var(--bg); color: var(--fg); overflow: hidden; overscroll-behavior: contain; }
  .product-dialog[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); animation: product-in .32s var(--ease); }
  .product-dialog::backdrop { background: rgba(8, 10, 12, .84); }
  @keyframes product-in { from { opacity: 0; transform: translateY(14px); } }
  html.has-dialog { overflow: hidden; }
  .product-dialog-bar { z-index: 3; display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px clamp(16px, 2.4vw, 28px); background: var(--bg); border-bottom: 1px solid var(--line); }
  .product-count { margin-right: auto; font-size: var(--step--1); font-weight: 600; font-stretch: 110%; color: var(--fg-2); font-variant-numeric: tabular-nums; }
  .product-nav, .product-close { inline-size: 46px; block-size: 46px; display: grid; place-items: center; background: transparent; color: inherit; border: 1.5px solid var(--line); font-size: 1.4rem; line-height: 1; transition: border-color .2s var(--ease), color .2s var(--ease); }
  .product-nav:hover, .product-close:hover { border-color: var(--fg); }
  .product-nav svg { inline-size: 18px; transform: rotate(45deg); }
  .product-nav--prev svg { transform: rotate(-135deg); }
  .product-dialog-body { min-block-size: 0; transition: opacity .2s var(--ease); }
  .product-dialog-body.is-switching { opacity: 0; }
  .product-dialog-body .product-detail { display: grid; grid-template-columns: minmax(0, 7fr) minmax(320px, 5fr); gap: 0; padding: 0; block-size: 100%; }
  .product-dialog-body .product-gallery { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 12px; padding: clamp(12px, 1.6vw, 24px); background: var(--bg-2); min-block-size: 0; }
  .product-dialog-body .product-main { position: relative; aspect-ratio: auto; min-block-size: 0; block-size: 100%; overflow: hidden; background: none; }
  .product-dialog-body .product-main picture { block-size: 100%; }
  .product-dialog-body .product-main img { object-fit: contain; transition: transform .35s var(--ease), opacity .25s var(--ease); cursor: zoom-in; }
  .product-dialog-body .product-main.is-zoomed img { transform: scale(2.2); cursor: zoom-out; transition-property: opacity; }
  .product-dialog-body .product-thumbs { flex-wrap: wrap; }
  .product-img-nav { position: absolute; inset-block-start: 50%; z-index: 2; inline-size: 44px; block-size: 44px; margin-block-start: -22px; display: grid; place-items: center; border: 0; background: color-mix(in srgb, var(--bg) 88%, transparent); color: var(--fg); }
  .product-img-nav svg { inline-size: 16px; transform: rotate(45deg); }
  .product-img-nav--prev { inset-inline-start: 8px; }
  .product-img-nav--prev svg { transform: rotate(-135deg); }
  .product-img-nav--next { inset-inline-end: 8px; }
  .product-main.is-zoomed .product-img-nav { display: none; }
  .product-zoom-hint { position: absolute; inset: auto 8px 8px auto; z-index: 2; padding: 4px 9px; font-size: var(--step--1); background: color-mix(in srgb, var(--bg) 88%, transparent); pointer-events: none; }
  .product-dialog-body .product-copy { overflow-y: auto; overscroll-behavior: contain; padding: clamp(20px, 3vw, 44px); overflow-wrap: break-word; }
  .product-dialog-body .product-copy h3 { font-size: var(--step-3); }
  @media (max-width: 1100px) { .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 900px) {
    .catalog-head > div, .catalog-head > p { grid-column: 1 / -1; }
    .product-dialog { inline-size: 100vw; block-size: 100svh; margin: 0; overflow-y: auto; }
    .product-dialog[open] { display: flex; flex-direction: column; animation-name: product-up; }
    @keyframes product-up { from { opacity: .4; transform: translateY(40px); } }
    .product-dialog-bar { order: 2; position: sticky; bottom: 0; margin-top: auto; border-top: 1px solid var(--line); border-bottom: 0; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
    .product-dialog-body .product-detail { grid-template-columns: 1fr; block-size: auto; }
    .product-dialog-body .product-gallery { grid-template-rows: auto auto; }
    .product-dialog-body .product-main { aspect-ratio: 4 / 3; block-size: auto; }
    .product-dialog-body .product-copy { overflow: visible; }
  }
  @media (max-width: 560px) {
    .catalog-grid { grid-template-columns: 1fr; }
    .product-card .media { aspect-ratio: 4 / 3; }
    .catalog .filters { position: static; }
  }
}

/* ---------------- Galeri şeridi, sergi eserleri, logolar, video bağlantıları ---------------- */
@layer blocks {
  /* Galeri — ana görsel + küçük resimler: farklı oranlar kırpılmadan, sabit sahne yüksekliğinde */
  .gallery-show { display: grid; gap: 12px; }
  .gallery-show-stage { position: relative; margin: 0; display: grid; gap: 10px; }
  .gallery-show-main { display: block; inline-size: 100%; block-size: clamp(280px, 62vw, min(78svh, 820px)); padding: 0; border: 0; background: var(--bg-2); cursor: zoom-in; overflow: hidden; }
  .gallery-show-main img { inline-size: 100%; block-size: 100%; object-fit: contain; transition: opacity .25s var(--ease); }
  .gallery-show-nav { position: absolute; inset-block-start: calc(50% - 34px); inline-size: 48px; block-size: 48px; display: grid; place-items: center; border: 0; background: color-mix(in srgb, var(--bg) 90%, transparent); color: var(--fg); }
  .gallery-show-nav svg { inline-size: 18px; transform: rotate(45deg); }
  .gallery-show-nav--prev { inset-inline-start: 10px; }
  .gallery-show-nav--prev svg { transform: rotate(-135deg); }
  .gallery-show-nav--next { inset-inline-end: 10px; }
  .gallery-show-nav[hidden] { display: none; }
  .gallery-show-nav:hover { color: var(--accent-text); }
  .gallery-show-cap { display: flex; justify-content: space-between; gap: 16px; font-size: var(--step--1); color: var(--fg-2); min-block-size: 1.4em; }
  .gallery-show-count { font-variant-numeric: tabular-nums; margin-inline-start: auto; }
  .gallery-show-thumbs { list-style: none; margin: 0; padding: 2px 2px 8px; display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; }
  .gallery-show-thumbs li { flex: 0 0 auto; scroll-snap-align: start; }
  .gallery-show-thumb { display: block; inline-size: clamp(64px, 8vw, 104px); outline-offset: 2px; opacity: .62; transition: opacity .2s var(--ease); }
  .gallery-show-thumb .media { display: block; aspect-ratio: 1; overflow: hidden; background: var(--bg-2); }
  .gallery-show-thumb:hover, .gallery-show-thumb[aria-current="true"] { opacity: 1; }
  .gallery-show-thumb[aria-current="true"] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
  @media (max-width: 760px) { .gallery-show-main { block-size: min(72vw, 62svh); } .gallery-show-nav { inline-size: 40px; block-size: 40px; } }
  .gallery-strip { position: relative; }
  .gallery-strip-track { list-style: none; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 12px; display: flex; gap: clamp(10px, 1.4vw, 20px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: thin; scrollbar-color: var(--accent) transparent; }
  .gallery-strip-item { flex: 0 0 auto; inline-size: min(60vw, 980px); scroll-snap-align: start; }
  .gallery-strip-item button { display: block; inline-size: 100%; padding: 0; border: 0; background: none; }
  .gallery-strip-item .media { aspect-ratio: 3 / 2; }
  .gallery-strip-item .media img { transition: transform 1.2s var(--ease); }
  .gallery-strip-item button:hover .media img { transform: scale(1.03); }
  .gallery-strip-nav { display: flex; gap: 8px; justify-content: flex-end; margin-top: var(--space-s); }
  .gallery-strip-nav[hidden] { display: none; }
  @media (max-width: 760px) { .gallery-strip-item { inline-size: 86vw; } .gallery-strip-item .media { aspect-ratio: 4 / 3; } }

  .exhibit { background: var(--bg); color: var(--fg); padding-block: var(--space-l); }
  .exhibit + .exhibit, .section + .exhibit[data-theme="light"] { padding-top: 0; }
  .exhibit-head { max-width: 60ch; margin-bottom: var(--space-l); }
  .exhibit-head h2 { margin-bottom: .4em; }
  .exhibit-item { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 40px); align-items: start; }
  .exhibit-item + .exhibit-item { margin-top: var(--space-l); }
  .exhibit-media { grid-column: 1 / span 8; margin: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 20px); }
  .exhibit-media > .media { grid-column: 1 / -1; aspect-ratio: 4 / 3; padding: 0; border: 0; display: block; inline-size: 100%; }
  .exhibit-media > .media img { transition: transform 1.2s var(--ease); }
  .exhibit-media > .media:hover img { transform: scale(1.03); }
  .exhibit-media > .exhibit-media-2 { grid-column: 5 / -1; aspect-ratio: 3 / 2; margin-top: calc(var(--space-m) * -1); position: relative; z-index: 1; outline: clamp(6px, .8vw, 12px) solid var(--bg); }
  .exhibit-media figcaption { grid-column: 1 / -1; }
  .exhibit-copy { grid-column: 10 / -1; position: sticky; top: calc(var(--header-h) + 32px); padding-top: var(--space-s); }
  .exhibit-copy h3 { font-size: var(--step-3); margin-bottom: .7em; overflow-wrap: anywhere; hyphens: auto; }
  .exhibit-body p { color: var(--fg-2); }
  .exhibit-item--flip .exhibit-media { grid-column: 5 / -1; order: 2; }
  .exhibit-item--flip .exhibit-copy { grid-column: 1 / span 3; }
  .exhibit-item--flip .exhibit-media > .exhibit-media-2 { grid-column: 1 / span 4; }
  @media (max-width: 900px) {
    .exhibit-media, .exhibit-item--flip .exhibit-media, .exhibit-copy, .exhibit-item--flip .exhibit-copy { grid-column: 1 / -1; order: 0; }
    .exhibit-copy { position: static; padding-top: 0; }
  }

  .logo-wall { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 42vw), 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
  .logo-wall li { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .logo-wall li > a, .logo-wall li { text-decoration: none; }
  .logo-wall li > a, .logo-wall li:not(:has(> a)) { display: grid; grid-template-rows: 1fr auto; gap: 12px; padding: clamp(16px, 2vw, 28px); min-block-size: 180px; }
  .logo-wall-img { inline-size: 100%; block-size: 92px; object-fit: contain; filter: grayscale(1); opacity: .82; transition: filter .3s var(--ease), opacity .3s var(--ease); align-self: center; }
  .logo-wall li:hover .logo-wall-img { filter: none; opacity: 1; }
  .logo-wall-name { font-size: var(--step--1); font-weight: 600; font-stretch: 110%; color: var(--fg-2); }

  .video-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-m) clamp(14px, 1.8vw, 28px); }
  .video-link { display: grid; gap: 12px; text-decoration: none; }
  .video-link-cover { aspect-ratio: 16 / 9; display: grid; place-items: center; }
  .video-link-cover > img { position: absolute; inset: 0; transition: transform 1.2s var(--ease); }
  .video-link-cover--empty { background: var(--night-2); }
  .video-link-play { position: relative; inline-size: 68px; block-size: 68px; background: var(--accent); clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); transition: background-color .25s var(--ease); }
  .video-link-play::after { content: ""; position: absolute; inset: 0; margin: auto; inline-size: 0; block-size: 0; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent var(--graphite); transform: translateX(3px); }
  .video-link:hover .video-link-play { background: var(--frost); }
  .video-link:hover .video-link-cover > img { transform: scale(1.03); }
  .video-link-title { font-size: var(--step-1); font-weight: 700; font-stretch: 112%; line-height: 1.15; }
  .video-link:hover .video-link-title { color: var(--accent-text); }
  .video-link .tag svg { inline-size: .9em; }
  @media (max-width: 900px) { .video-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 560px) { .video-links { grid-template-columns: 1fr; } }

  /* Portre videolar kırpılmadan gösterilir */
  .video-block video { object-fit: contain; }

  /* Büyütülmüş görselde geçiş */
  .lightbox-nav { position: fixed; top: 50%; translate: 0 -50%; inline-size: 52px; block-size: 52px; display: grid; place-items: center; background: #fff; color: var(--graphite); border: 0; }
  .lightbox-nav svg { inline-size: 20px; transform: rotate(45deg); }
  .lightbox-nav--prev { left: 16px; }
  .lightbox-nav--prev svg { transform: rotate(-135deg); }
  .lightbox-nav--next { right: 16px; }
  .lightbox-nav[hidden] { display: none; }
  .lightbox-count { color: rgba(255,255,255,.7); font-variant-numeric: tabular-nums; margin-left: 1em; }
}

/* Dev sayfa başlıkları: en uzun kelime satıra sığacak kadar küçülür (kısa başlıklar ölçekte kalır) */
@layer templates {
  .page-head h1, .showcase-hero h1, .cine-hero h1 { font-size: min(var(--step-6), calc((min(100vw, 1680px) - 2 * var(--gutter)) / (var(--fit, 8) * .74))); }
}

/* Uzmanlık: ilk alanın görseli yoksa boş çerçeve çizilmez; liste geniş sütuna yerleşir */
@layer blocks {
  .expertise--text .expertise-list { grid-column: 4 / -1; }
  @media (max-width: 900px) { .expertise--text .expertise-list { grid-column: 1 / -1; } }
}

/* İki seviyeli menü: masaüstünde üzerine gelince/odakta/düğmeyle açılır; mobilde girintili liste */
@layer components {
  .nav-item { position: relative; display: flex; align-items: center; gap: 2px; }
  .nav-sub-toggle { inline-size: 26px; block-size: 32px; padding: 0; border: 0; background: none; color: inherit; display: grid; place-items: center; }
  .nav-sub-toggle::before { content: ""; inline-size: 7px; block-size: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .25s var(--ease); }
  .nav-sub-toggle[aria-expanded="true"]::before { transform: translateY(2px) rotate(-135deg); }

  /* Logo paletiyle uyumlu alt menü: koyu mavi zemin + kırmızı üst şerit */
  .nav-sub {
    position: absolute;
    top: calc(100% + 18px);
    left: -20px;
    min-inline-size: 260px;
    margin: 0;
    padding: 10px 0;
    list-style: none;
    background: var(--logo-blue-2);
    color: var(--frost);
    border: 1px solid color-mix(in srgb, var(--logo-gray) 40%, transparent);
    border-top: 3px solid var(--accent);
    box-shadow: 0 24px 48px color-mix(in srgb, var(--logo-blue) 45%, transparent);
    display: none;
    z-index: 110;
  }
  .nav-sub::before { content: ""; position: absolute; inset: -20px 0 100%; }

  .nav-sub a {
    display: block;
    padding: 10px 20px;
    border: 0;
    font-weight: 560;
    color: var(--frost);
    transition: color .2s var(--ease), background-color .2s var(--ease);
  }
  .nav-sub a:hover,
  .nav-sub a[aria-current="page"] {
    color: var(--accent-text);
    background: color-mix(in srgb, var(--logo-blue) 55%, transparent);
  }
  .nav-item:hover .nav-sub,
  .nav-sub-toggle[aria-expanded="true"] + .nav-sub,
  .nav-group[aria-expanded="true"] + .nav-sub { display: block; }
  /* Bağlantısız grup: etiketin kendisi alt menüyü açan düğmedir */
  .nav-group { display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; border: 0; border-bottom: 2px solid transparent; background: none; color: inherit; font-weight: 560; font-size: .95rem; }
  .nav-group::after { content: ""; inline-size: 7px; block-size: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .25s var(--ease); }
  .nav-group[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
  .nav-item:hover .nav-group, .nav-group[aria-expanded="true"] { border-color: var(--accent); }
  .nav-item:has([aria-current="page"]) > .nav-group { border-color: var(--accent); }
  /* Alt sayfadayken kendi bağlantısı olan üst başlık da aktif görünür */
  .nav-item:has(.nav-sub [aria-current="page"]) > a { border-color: var(--accent); }
  /* Bağlı olduğu kategori (ör. proje sayfasında) üst başlığı da vurgular */
  .nav-item.is-ancestor > a, .nav-item.is-ancestor > .nav-group, .nav > a.is-ancestor { border-color: var(--accent); }
  .nav-sub:not(.nav-mega) a { display: flex; align-items: center; gap: 10px; }
  /* Henüz sayfası olmayan alt başlık: tıklanamaz, soluk, “Yakında” etiketli */
  .nav-soon { display: flex; align-items: center; gap: 10px; padding: 10px 20px 10px 44px; color: color-mix(in srgb, var(--frost) 55%, transparent); font-weight: 560; cursor: default; }
  .nav-soon small { padding: 1px 7px; border: 1px solid color-mix(in srgb, var(--frost) 30%, transparent); font-size: .72rem; font-weight: 600; letter-spacing: .01em; }
  .mobile-sub .nav-soon { padding: 8px 0; font-size: var(--step-1); color: var(--fg-2); }
  .mobile-sub .nav-soon small { border-color: var(--line); }
  .nav-sub:not(.nav-mega) a svg { inline-size: 14px; flex: none; color: var(--accent-text); transform: rotate(45deg); transition: transform .2s var(--ease); }
  .nav-sub:not(.nav-mega) a:hover svg { transform: rotate(45deg) translate(2px, -2px); }
  .mobile-group { display: flex; justify-content: space-between; align-items: center; inline-size: 100%; padding: 10px 0; border: 0; border-bottom: 1px solid var(--line); background: none; color: inherit; text-align: left; font-size: var(--step-3); font-weight: 760; font-stretch: 120%; }
  .mobile-group::after { content: ""; inline-size: 12px; block-size: 12px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .25s var(--ease); margin-right: 6px; }
  .mobile-group[aria-expanded="true"]::after { transform: rotate(-135deg); }
  .mobile-sub[hidden] { display: none; }
  .mobile-nav .mobile-cta { margin-top: 18px; align-self: flex-start; font-size: .95rem; font-stretch: 110%; border-bottom: 0; padding: 0 22px 0 24px; }

  /* Şeffaf header'da da alt menü kendi koyu zeminini taşır, okunur kalır */
  .site-header.is-over:not(.is-scrolled) .nav-sub { color: var(--frost); }

  /* Mobil ikinci seviye kırmızı vurgu */
  .mobile-sub {
    list-style: none;
    margin: 0 0 8px;
    padding: 0 0 0 18px;
    border-left: 2px solid var(--accent);
  }
  .mobile-sub a {
    display: block;
    font-size: var(--step-1);
    font-weight: 600;
    padding: 8px 0;
    border-bottom: 0;
  }
  .mobile-sub a:hover { color: var(--accent-text); }
}

/* ---------------- Üst bilgi: iki satırlı düzen ve geniş (mega) menü ---------------- */
@layer tokens {
  .header-two-row { --header-h: 124px; }
  @media (max-width: 1000px) { .header-two-row { --header-h: 76px; } }
}
@layer components {
  .site-header--two-row { display: flex; flex-direction: column; }
  .site-header--two-row .header-top { flex: 0 0 68px; height: 68px; }
  .site-header--two-row .header-cta { margin-left: auto; }
  .header-nav-row { flex: 1; border-top: 1px solid var(--line); }
  .site-header.is-over:not(.is-scrolled) .header-nav-row { border-color: rgba(255,255,255,.16); }
  .site-header--two-row.is-over:not(.is-scrolled) { background: linear-gradient(to bottom, rgba(8,10,12,.78), rgba(8,10,12,.42)); }
  .header-nav-row .wrap { display: flex; align-items: center; height: 100%; }
  .site-header--two-row .nav { margin-left: 0; inline-size: 100%; justify-content: space-between; gap: clamp(10px, 1.4vw, 28px); white-space: nowrap; }
  .site-header--two-row .nav a, .site-header--two-row .nav-group { font-size: .93rem; }
  /* 1001–1180 px (ör. %125 yakınlaştırılmış dizüstü): menü satırı görünür kalır, sıkışık ölçü */
  @media (min-width: 1001px) and (max-width: 1180px) {
    .site-header--two-row .nav { gap: 8px; }
    .site-header--two-row .nav a, .site-header--two-row .nav-group { font-size: .84rem; }
    .site-header--two-row .nav-sub-toggle { inline-size: 20px; }
  }
  @media (max-width: 1000px) {
    .header-nav-row { display: none; }
    .site-header--two-row .header-top { flex: 1; height: 100%; }
    .site-header--two-row .header-cta { display: none; }
    .site-header--two-row .menu-toggle { display: inline-flex; }
  }

  /* Geniş menü: başlık + açıklama sütunu ve başlıklı bağlantı sütunları; üst bilginin tam genişliğinde açılır */
  .nav-item--mega { position: static; }
  .nav-sub.nav-mega {
    top: 100%; left: 0; right: 0; min-inline-size: 0;
    padding: clamp(24px, 3vw, 40px) max(var(--gutter), calc((100% - 1680px) / 2 + var(--gutter)));
    grid-template-columns: minmax(220px, 1.2fr) repeat(auto-fit, minmax(190px, 1fr));
    gap: clamp(20px, 3vw, 56px); white-space: normal;
  }
  /* Üzerine gelme köprüsü yalnızca başlık ile panel arasındaki boşluğu kapatır; menü satırını örtmez (tıklama engellenmez) */
  .nav-sub.nav-mega::before { inset: -22px 0 100%; }
  .site-header--two-row .nav-sub.nav-mega::before { inset: -12px 0 100%; }
  .nav-item.nav-item--mega:hover > .nav-sub.nav-mega,
  [data-nav-toggle][aria-expanded="true"] + .nav-sub.nav-mega { display: grid; animation: mega-in .22s var(--ease); }
  @keyframes mega-in { from { opacity: 0; transform: translateY(-6px); } }
  .nav-mega-intro { display: grid; align-content: start; gap: 10px; padding-right: clamp(0px, 2vw, 32px); border-right: 1px solid color-mix(in srgb, var(--frost) 14%, transparent); }
  .nav-mega-intro p { margin: 0; color: var(--frost-2); font-size: var(--step--1); line-height: 1.5; max-inline-size: 32ch; }
  .nav-mega-intro .nav-mega-title { color: var(--frost); font-size: var(--step-2); font-weight: 760; font-stretch: 118%; letter-spacing: -.02em; line-height: 1; }
  .nav-mega-intro .text-link { justify-self: start; color: var(--frost); padding: 4px 0; font-size: var(--step--1); }
  .nav-mega-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
  .nav-mega-h { margin: 0 0 10px; display: flex; gap: 8px; align-items: center; font-size: var(--step--1); font-weight: 620; font-stretch: 110%; color: var(--frost-2); }
  .nav-mega-h::before { content: ""; inline-size: 8px; block-size: 8px; background: var(--accent); clip-path: polygon(0 0, 100% 0, 100% 60%, 60% 100%, 0 100%); }
  .nav-sub.nav-mega .nav-mega-col a { padding: 8px 0; font-size: 1rem; font-weight: 600; background: none; }
  .nav-sub.nav-mega .nav-mega-col a:hover, .nav-sub.nav-mega .nav-mega-col a[aria-current="page"] { background: none; color: var(--accent-text); }
  .nav-placeholder { margin: 0; align-self: center; padding: 12px 16px; border: 1px dashed color-mix(in srgb, var(--frost) 30%, transparent); color: var(--frost-2); font-size: var(--step--1); }

  /* Mobil: başlık satırı (bağlantı + aç/kapa) ve başlıklı alt listeler */
  .mobile-item { display: flex; align-items: center; border-bottom: 1px solid var(--line); }
  .mobile-item > a { flex: 1; border-bottom: 0; }
  .mobile-item > .mobile-group { border-bottom: 0; }
  .mobile-group--icon { inline-size: 52px; flex: none; justify-content: center; }
  .mobile-group--icon::after { margin-right: 0; }
  .mobile-sub ul { list-style: none; margin: 0; padding: 0; }
  .mobile-sub-h { margin: 12px 0 2px; font-size: var(--step--1); font-weight: 620; color: var(--fg-2); }
  .mobile-sub .nav-placeholder { color: var(--fg-2); border-color: var(--line); margin: 8px 0; }
}

/* ---------------- Açılış kolajı (hero_collage) ----------------
   Tek büyük görsel yerine YENTEK'in alanlarından kompozisyon. Hareket yalnızca transform/opacity ile;
   görünmezken durur (is-paused), “hareketi azalt”ta global kuralla durur, mobilde sadeleşir. */
@layer blocks {
  .hc { position: relative; min-block-size: max(100svh, 700px); display: grid; align-items: end; overflow: hidden; isolation: isolate; color: #fff; background: var(--night); }
  .hc::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg, rgba(8,11,18,.94) 0%, rgba(8,11,18,.78) 30%, rgba(8,11,18,.12) 62%, rgba(8,11,18,0) 100%),
                linear-gradient(to top, rgba(8,11,18,.9) 0%, rgba(8,11,18,0) 38%); }
  .hc-stage { position: absolute; inset: calc(var(--header-h) + 20px) var(--gutter) 28px 26%; z-index: 0; display: grid;
    grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(10, 1fr); gap: clamp(10px, 1.1vw, 18px); }
  .hc-tile { margin: 0; position: relative; min-block-size: 0; --d: 10px;
    translate: calc(var(--px, 0) * var(--d) * -1) calc(var(--py, 0) * var(--d) * -1);
    transition: translate .8s var(--ease); animation: hc-in 1s var(--ease) both; animation-delay: calc(.2s + var(--i) * .09s); }
  .hc-tile--1 { grid-area: 1 / 4 / 7 / 10; --d: 6px; }
  .hc-tile--2 { grid-area: 1 / 10 / 5 / 13; --d: 14px; }
  .hc-tile--3 { grid-area: 5 / 10 / 10 / 13; --d: 9px; }
  .hc-tile--4 { grid-area: 2 / 1 / 7 / 4; --d: 16px; }
  .hc-tile--5 { grid-area: 7 / 4 / 11 / 7; --d: 12px; }
  .hc-tile--6 { grid-area: 7 / 7 / 11 / 10; --d: 8px; }
  .hc-tile--7 { grid-area: 7 / 1 / 11 / 4; --d: 18px; }
  .hc-tile--8 { grid-area: 10 / 10 / 11 / 13; }
  .hc-float { position: relative; display: block; block-size: 100%; animation: hc-float calc(13s + var(--i) * 1.7s) ease-in-out infinite alternate; animation-delay: calc(var(--i) * -2.3s); }
  .hc-tile .media, .hc-drift .media { display: block; block-size: 100%; overflow: hidden; background: var(--night-2); }
  .hc-tile .media img { inline-size: 100%; block-size: 100%; object-fit: cover; animation: hc-zoom 28s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -4s); }
  .hc-label { position: absolute; left: 10px; bottom: 10px; padding: 3px 9px; font-size: var(--step--1); font-weight: 620; font-stretch: 110%; background: rgba(8,11,18,.66); color: #fff; backdrop-filter: blur(6px); }
  .hc-placeholder { position: absolute; top: 8px; right: 8px; padding: 2px 8px; font-size: .72rem; font-weight: 700; color: #fff; background: var(--accent); }
  .hc-drift { position: absolute; z-index: 2; margin: 0; left: 24%; top: 64%; inline-size: clamp(150px, 13vw, 220px); aspect-ratio: 4 / 3;
    animation: hc-drift 42s ease-in-out infinite alternate; }
  .hc-drift .hc-label { left: 6px; bottom: 6px; }
  .hc-inner { position: relative; z-index: 3; padding-block: calc(var(--header-h) + 48px) clamp(28px, 4vw, 52px); }
  .hc .kicker { color: rgba(255,255,255,.82); }
  .hc-title { font-size: min(var(--step-6), 9vw); font-stretch: 125%; font-weight: 790; letter-spacing: -.05em; line-height: .84; margin: 0 0 clamp(22px, 3.4vw, 44px); max-inline-size: 11ch; }
  .hc-bottom { display: flex; flex-wrap: wrap; align-items: end; gap: 20px 40px; }
  .hc-desc { max-inline-size: 40ch; margin: 0; font-size: var(--step-1); line-height: 1.45; color: rgba(255,255,255,.88); }
  .hc-areas { list-style: none; margin: clamp(22px, 3vw, 40px) 0 0; padding: 18px 0 0; display: flex; flex-wrap: wrap; gap: 8px 26px; border-top: 1px solid rgba(255,255,255,.16); max-inline-size: 760px; }
  .hc-areas a { color: rgba(255,255,255,.8); text-decoration: none; font-size: var(--step--1); font-weight: 600; font-stretch: 110%; }
  .hc-areas a:hover { color: #fff; text-decoration: underline; text-underline-offset: .3em; }
  .hc.is-paused *, .hc.is-paused { animation-play-state: paused !important; }
  @keyframes hc-in { from { opacity: 0; transform: translateY(26px) scale(.985); } }
  @keyframes hc-float { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -12px, 0); } }
  @keyframes hc-zoom { from { transform: scale(1.02); } to { transform: scale(1.08); } }
  @keyframes hc-drift {
    0% { transform: translate3d(0, 0, 0) rotate(-2deg); }
    50% { transform: translate3d(26vw, -16vh, 0) rotate(1deg); }
    100% { transform: translate3d(50vw, -6vh, 0) rotate(-1deg); }
  }
  @media (max-width: 1100px) { .hc-stage { left: 18%; } .hc-tile--7, .hc-tile--8 { display: none; } }
  /* Mobil: sade 3 parçalı ızgara üstte, metin altta; süzülme, yakınlaşma ve gezinen öğe yok */
  @media (max-width: 760px) {
    .hc { display: block; min-block-size: 0; padding-top: var(--header-h); }
    .hc::before { display: none; }
    .hc-stage { position: relative; inset: auto; margin: 14px var(--gutter) 0; grid-template-columns: 1fr 1fr; grid-template-rows: 46vw 30vw; gap: 8px; }
    .hc-tile { translate: none; }
    .hc-tile--1 { grid-area: 1 / 1 / 2 / 3; }
    .hc-tile--2 { grid-area: 2 / 1 / 3 / 2; }
    .hc-tile--3 { grid-area: 2 / 2 / 3 / 3; }
    .hc-tile--4, .hc-tile--5, .hc-tile--6, .hc-tile--7, .hc-tile--8, .hc-drift { display: none; }
    .hc-float, .hc-tile .media img { animation: none; }
    .hc-inner { padding-block: 28px 36px; }
    .hc-title { font-size: 13.4vw; max-inline-size: none; }
    .hc .hero-line:nth-child(n) { padding-left: 0; }
    .hc-areas { display: none; }
  }
}

/* ---------------- Kategori sayfaları: alt kategori kartları ---------------- */
@layer blocks {
  .projects-head > div { grid-column: 1 / span 8; }
  .subcats-head { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; align-items: end; margin-bottom: var(--space-m); }
  .subcats-head > div { grid-column: 1 / span 7; }
  .subcats-head > p { grid-column: 9 / -1; color: var(--fg-2); margin: 0; }
  .subcats-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-s) clamp(14px, 1.8vw, 28px); }
  @media (max-width: 1000px) { .subcats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 640px) { .subcats-grid { grid-template-columns: 1fr; } }
  .subcat { display: grid; gap: 12px; text-decoration: none; color: inherit; }
  .subcat .media { aspect-ratio: 4 / 3; }
  .subcat .media img { transition: transform 1.2s var(--ease); }
  .subcat:hover .media img { transform: scale(1.03); }
  .subcat-title { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: var(--step-2); font-weight: 740; font-stretch: 115%; letter-spacing: -.02em; line-height: 1.05; transition: color .25s var(--ease); }
  .subcat-title svg { inline-size: 18px; flex: none; transition: transform .3s var(--ease); }
  .subcat:hover .subcat-title { color: var(--accent-text); }
  .subcat:hover .subcat-title svg { transform: translate(3px, -3px); }
  .subcat-desc { color: var(--fg-2); max-inline-size: 48ch; }
  .subcat--text { padding: clamp(18px, 2vw, 28px); border: 1px solid var(--line); align-content: end; min-block-size: 220px; }
  @media (max-width: 900px) { .subcats-head > div, .subcats-head > p, .projects-head > div { grid-column: 1 / -1; } }
}

/* 3D model ve AR (model_viewer bloğu) */
@layer blocks {
  .mv-block { background: var(--bg); color: var(--fg); padding-block: var(--space-l); }
  .mv-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-s) clamp(16px, 2.4vw, 40px); align-items: start; }
  .mv-head { grid-column: 1 / span 5; }
  .mv-title { font-size: var(--step-3); font-stretch: 118%; hyphens: manual; overflow-wrap: normal; font-weight: 760; letter-spacing: -.035em; line-height: 1; margin-bottom: .5em; }
  .mv-desc { color: var(--fg-2); max-width: 46ch; }
  .mv-figure { grid-column: 6 / -1; grid-row: 1 / span 2; margin: 0; min-width: 0; }
  .mv-side { grid-column: 1 / span 5; grid-row: 2; align-self: end; display: grid; gap: var(--space-s); }
  .mv-head:empty, .mv-side:empty { display: none; }
  .mv-stage { position: relative; aspect-ratio: 16 / 10; background: var(--bg-2); }
  .mv-viewer { display: block; inline-size: 100%; block-size: 100%; background: transparent; --poster-color: transparent; --progress-bar-color: transparent; }
  .mv-viewer:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
  .mv-viewer:not(:defined) > [slot="progress-bar"], .mv-viewer:not(:defined) > [slot="ar-button"] { display: none; }
  .mv-poster { position: absolute; inset: 0; }
  .mv-poster img { inline-size: 100%; block-size: 100%; object-fit: contain; }
  .mv-progress { position: absolute; inset: auto 0 0 0; block-size: 3px; background: color-mix(in srgb, var(--fg) 12%, transparent); }
  .mv-progress span { display: block; block-size: 100%; inline-size: calc(var(--p, 0) * 100%); background: var(--accent); transition: inline-size .2s linear; }
  .mv-progress[hidden] { display: none; }
  .mv-ar { position: absolute; inset: auto auto 16px 16px; }
  .mv-status { position: absolute; inset: 12px 12px auto 12px; margin: 0; padding: 8px 12px; font-size: var(--step--1); background: color-mix(in srgb, var(--bg) 88%, transparent); color: var(--fg); inline-size: fit-content; max-inline-size: calc(100% - 24px); }
  .mv-status:empty, .mv-status[hidden] { display: none; }
  .mv-caption { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 12px; font-size: var(--step--1); color: var(--fg-2); }
  .mv-size { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }
  .mv-credit { flex-basis: 100%; }
  .mv-qr { display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: center; padding-top: var(--space-s); border-top: 1px solid var(--line); }
  .mv-qr[hidden] { display: none; }
  .mv-qr-code svg { display: block; inline-size: 112px; block-size: auto; }
  .mv-qr-title { font-weight: 700; font-stretch: 112%; margin: 0 0 .3em; }
  .mv-qr-text { margin: 0; font-size: var(--step--1); color: var(--fg-2); }
  .mv-project { display: grid; gap: 4px; text-decoration: none; padding-top: var(--space-s); border-top: 1px solid var(--line); }
  .mv-project .kicker { margin: 0; }
  .mv-project-title { font-size: var(--step-2); font-stretch: 115%; font-weight: 720; }
  .mv-project:hover .mv-project-title { color: var(--accent-text); }
  @media (max-width: 900px) {
    .mv-head, .mv-figure, .mv-side { grid-column: 1 / -1; grid-row: auto; }
    .mv-stage { aspect-ratio: 4 / 5; max-block-size: 72svh; inline-size: 100%; }
  }
}

/* ---------------- İç sayfalar: kompakt ölçek ----------------
   Ana sayfa (body.is-home) olduğu gibi kalır. Ölçek ve boşluk belirteçleri yalnızca iç sayfaların <main>'inde
   yeniden tanımlanır; böylece bloklar kendi kurallarıyla küçülür, üst bilgi ve alt bilgi ana sayfayla aynı kalır.
   Aşağıdaki bileşen kuralları yalnızca belirteçle çözülemeyen sabit ölçüleri (yükseklik, oran, ofset) düzeltir. */
@layer tokens {
  body:not(.is-home) main {
    --step-1: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
    --step-2: clamp(1.25rem, 1.1rem + .55vw, 1.6rem);
    --step-3: clamp(1.5rem, 1.2rem + 1.15vw, 2.25rem);
    --step-4: clamp(1.8rem, 1.3rem + 1.9vw, 3rem);
    --step-5: clamp(2.1rem, 1.3rem + 3vw, 4.25rem);
    --step-6: clamp(2.5rem, 1.25rem + 4.4vw, 5.5rem);
    --space-s: clamp(14px, 1.6vw, 24px);
    --space-m: clamp(24px, 3.2vw, 52px);
    --space-l: clamp(48px, 6vw, 100px);
  }
}

@layer templates {
  /* Sayfa girişleri: başlık üst bilginin hemen altından başlar, açılış ekranı kaplamaz */
  body:not(.is-home) .page-head { padding-top: calc(var(--header-h) + clamp(24px, 3.6vw, 60px)); }
  body:not(.is-home) .showcase-hero { padding-top: calc(var(--header-h) + clamp(20px, 2.8vw, 48px)); }
  body:not(.is-home) .showcase-hero h1 { max-width: 18ch; }
  body:not(.is-home) .showcase-cover { aspect-ratio: auto; block-size: clamp(240px, 36vw, min(56svh, 600px)); }
  body:not(.is-home) .showcase-specs { padding-block: 18px; }
  body:not(.is-home) .showcase-summary p { font-size: var(--step-2); line-height: 1.3; max-width: 44ch; }
  body:not(.is-home) .next-project { padding-block: var(--space-m); }

  /* Sinematik giriş: görsel yine tam genişlik, yükseklik ekranın bir kısmı */
  body:not(.is-home) .cine-hero { min-height: clamp(460px, 70svh, 760px); }
  body:not(.is-home) .cine-hero .wrap { padding-top: calc(var(--header-h) + 32px); }
  body:not(.is-home) .cine-hero .lead { margin-top: 1em; }
}

@layer blocks {
  /* Video açılışı ve sinematik bölümler iç sayfada ekranın tamamını zorlamaz */
  body:not(.is-home) .hero { min-height: clamp(480px, 76svh, 820px); }
  body:not(.is-home) .chapter { min-height: clamp(480px, 78svh, 820px); }
  body:not(.is-home) .chapter-copy .inner { max-width: 680px; }

  /* Projeler */
  body:not(.is-home) .project-feature .media { aspect-ratio: 16 / 7; }
  body:not(.is-home) .project-grid > .project-card:nth-child(even) { margin-top: clamp(0px, 5vw, 80px); }
  body:not(.is-home) .project-grid--3 > .project-card:nth-child(even) { margin-top: 0; }
  body:not(.is-home) .project-feature-meta { margin-top: 14px; }

  /* Görsel + metin ve sergi eserleri: görsel sütunu biraz daralır, metin sütunu okunur genişlikte */
  body:not(.is-home) .text-media .media { aspect-ratio: 3 / 2; }
  body:not(.is-home) .exhibit-media > .media { aspect-ratio: 3 / 2; }
  body:not(.is-home) .exhibit-media { grid-column: 1 / span 7; grid-template-columns: repeat(7, minmax(0, 1fr)); }
  body:not(.is-home) .exhibit-copy { grid-column: 9 / -1; }
  body:not(.is-home) .exhibit-media > .exhibit-media-2 { grid-column: 4 / -1; }
  body:not(.is-home) .exhibit-item--flip .exhibit-media { grid-column: 6 / -1; }
  body:not(.is-home) .exhibit-item--flip .exhibit-copy { grid-column: 1 / span 4; }
  body:not(.is-home) .exhibit-item--flip .exhibit-media > .exhibit-media-2 { grid-column: 1 / span 4; }

  /* Uzmanlık: yapışkan görsel ekrana sığar; liste daha sık */
  body:not(.is-home) .expertise-visual .media { max-block-size: calc(100svh - var(--header-h) - 48px); }
  body:not(.is-home) .acc-item button { padding-block: 16px; }
  body:not(.is-home) .acc-panel { padding-bottom: 20px; }

  /* Video ve galeri: medya görünür alana sığar */
  body:not(.is-home) .video-block .media { max-inline-size: calc(min(68svh, 760px) * 16 / 9); }
  body:not(.is-home) .gallery-show-main { block-size: clamp(260px, 50vw, min(64svh, 660px)); }
  body:not(.is-home) .gallery-strip-item { inline-size: min(50vw, 820px); }

  /* Liste ve kart yoğunluğu */
  body:not(.is-home) .news-list a { padding-block: 16px; }
  body:not(.is-home) .contact-list div { padding-block: 14px; }
  body:not(.is-home) .facts dl div { padding-block: 12px; }
  body:not(.is-home) .logo-wall li > a, body:not(.is-home) .logo-wall li:not(:has(> a)) { min-block-size: 148px; }
  body:not(.is-home) .logo-wall-img { block-size: 76px; }
  body:not(.is-home) .subcat--text { min-block-size: 176px; }
  body:not(.is-home) .video-link-play { inline-size: 56px; block-size: 56px; }

  /* Çağrı bandı: köşe üçgeni ölçekle orantılı */
  body:not(.is-home) .cta-band::after { inline-size: clamp(64px, 10vw, 168px); }

  /* 3D hikâye: giriş metni modelin önüne taşmaz, aşama kartları daha derli toplu; kaydırma uzunluğu sahneden gelir */
  body:not(.is-home) .story3d-step--intro .story3d-card { max-width: 560px; }
  body:not(.is-home) .story3d-step--intro .lead { max-width: 32ch; }
  body:not(.is-home) .story3d-card { max-width: 400px; padding: 20px 22px 18px; }
  body:not(.is-home) .story3d-card h3 { font-size: var(--step-2); margin-bottom: .45em; }
  body:not(.is-home) .story3d.is-static .story3d-sticky { height: min(60svh, 600px); }
  body:not(.is-home) .story3d.is-static .story3d-step .story3d-card { max-width: 640px; }

  /* 3D model / AR */
  body:not(.is-home) .mv-qr { grid-template-columns: 96px 1fr; }
  body:not(.is-home) .mv-qr-code svg { inline-size: 96px; }

  @media (max-width: 900px) {
    body:not(.is-home) .project-grid > .project-card:nth-child(even) { margin-top: 0; }
    body:not(.is-home) .project-feature .media { aspect-ratio: 3 / 2; }
    body:not(.is-home) .exhibit-media, body:not(.is-home) .exhibit-item--flip .exhibit-media,
    body:not(.is-home) .exhibit-copy, body:not(.is-home) .exhibit-item--flip .exhibit-copy { grid-column: 1 / -1; }
    body:not(.is-home) .mv-stage { aspect-ratio: 1; max-block-size: 64svh; }
  }
  /* Ürün kataloğu: tablet ve telefonda kart yoğunluğu artar (sayfa gereksiz uzamaz) */
  @media (max-width: 1100px) { body:not(.is-home) .catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (max-width: 760px) { body:not(.is-home) .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-m) 12px; } }
  @media (max-width: 560px) {
    body:not(.is-home) .product-card .media { aspect-ratio: 1; }
    body:not(.is-home) .product-name { font-size: var(--step-0); }
  }
  @media (max-width: 760px) {
    body:not(.is-home) .gallery-show-main { block-size: min(70vw, 56svh); }
    body:not(.is-home) .gallery-strip-item { inline-size: 84vw; }
    body:not(.is-home) .story3d-card { max-width: none; }
    body:not(.is-home) .story3d-card h3 { font-size: var(--step-1); }
  }
}

@layer templates {
  @media (max-width: 760px) {
    body:not(.is-home) .showcase-cover { block-size: auto; aspect-ratio: 3 / 2; }
    body:not(.is-home) .cine-hero { min-height: clamp(420px, 64svh, 600px); }
  }
}