/* ============================================================
   app.css — bileşenler · sinematik mimarlık-stüdyosu
   loader · imleç · nav · hero · proje-listesi (hover-reveal) ·
   marquee · süreç · footer · sayfa-geçişi · butonlar
   ============================================================ */

/* ============================================================
   0. SİNEMATİK FİLM-GRAIN (çok ince doku · CSS-only)
   ============================================================ */
.grain {
  position: fixed; inset: -50%; z-index: 7000; pointer-events: none;
  opacity: .04; mix-blend-mode: overlay; will-change: transform;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation: grainshift 0.6s steps(2) infinite;
}
@keyframes grainshift {
  0%{ transform: translate(0,0);} 50%{ transform: translate(-4%,3%);} 100%{ transform: translate(3%,-2%);}
}
@media (prefers-reduced-motion: reduce){ .grain { animation: none; } }

/* ============================================================
   1. ÖZEL İMLEÇ
   ============================================================ */
.cursor { position: fixed; top: 0; left: 0; z-index: var(--z-cursor); pointer-events: none; mix-blend-mode: difference; will-change: transform; }
.cursor__dot {
  position: absolute; top: 0; left: 0; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  border-radius: 50%; background: #fff; transition: opacity .3s, transform .3s var(--ease-out);
}
.cursor__ring {
  position: absolute; top: 0; left: 0; width: 42px; height: 42px; margin: -21px 0 0 -21px;
  border: 1px solid rgba(255,255,255,.85); border-radius: 50%;
  transition: width .4s var(--ease-out), height .4s var(--ease-out), margin .4s var(--ease-out), opacity .3s, background .3s;
  display: grid; place-items: center;
}
.cursor__label {
  font-family: var(--font-body); font-size: 10px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: #000; opacity: 0; transform: scale(.6); transition: opacity .3s, transform .3s var(--ease-out);
  mix-blend-mode: normal;
}
.cursor.is-hover .cursor__ring { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
.cursor.is-media .cursor__ring { width: 92px; height: 92px; margin: -46px 0 0 -46px; background: rgba(255,255,255,.9); border-color: transparent; }
.cursor.is-media .cursor__dot { opacity: 0; }
.cursor.is-media .cursor__label { opacity: 1; transform: scale(1); }
.cursor.is-down .cursor__ring { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
.cursor.is-hidden { opacity: 0; }
@media (hover: none) { .cursor { display: none; } }

/* ============================================================
   2. GİRİŞ LOADER
   ============================================================ */
.loader {
  position: fixed; inset: 0; z-index: var(--z-loader);
  background: var(--navy-deep); color: var(--on-dark);
  display: grid; grid-template-rows: 1fr auto; padding: var(--gutter);
}
.loader__center { align-self: center; justify-self: center; text-align: center; }
.loader__mark {
  font-family: var(--font-display); font-weight: 500; letter-spacing: .42em;
  font-size: clamp(1.3rem, 3vw, 2rem); text-indent: .42em;
  opacity: 0; transform: translateY(14px);
}
.loader__sub { margin-top: 1rem; font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--on-dark-muted); opacity: 0; }
.loader__foot { display: flex; justify-content: space-between; align-items: flex-end; }
.loader__count { font-family: var(--font-display); font-size: clamp(3.5rem, 13vw, 9rem); line-height: .85; font-weight: 400; font-variant-numeric: tabular-nums; }
.loader__bar { position: relative; width: 38%; height: 1px; background: var(--on-dark-line); align-self: center; }
.loader__bar > span { position: absolute; inset: 0 100% 0 0; background: var(--on-dark); transform-origin: left; }
.loader__status { font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--on-dark-muted); }
body.is-loaded .loader { pointer-events: none; }

/* ============================================================
   3. SAYFA GEÇİŞ ÖRTÜSÜ
   ============================================================ */
.transition { position: fixed; inset: 0; z-index: var(--z-transition); pointer-events: none; display: grid; grid-template-columns: repeat(5, 1fr); }
.transition__panel { background: var(--navy-deep); transform: scaleY(0); transform-origin: bottom; }
.transition__label {
  position: fixed; inset: 0; display: grid; place-items: center; z-index: 1;
  color: var(--on-dark); font-family: var(--font-display); letter-spacing: .3em; text-transform: uppercase;
  font-size: var(--fs-sm); opacity: 0;
}

/* ============================================================
   4. HEADER / NAV
   ============================================================ */
.site-head {
  position: fixed; top: 0; left: 0; width: 100%; z-index: var(--z-nav);
  padding: clamp(1rem, 2vw, 1.6rem) var(--gutter);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
  mix-blend-mode: difference; color: #fff;
  transition: transform .5s var(--ease-out);
}
.site-head.is-hidden { transform: translateY(-110%); }
.site-head a, .site-head button { color: #fff; }
.brand { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: .14em; justify-self: start; display: inline-flex; align-items: baseline; gap: .5em; }
.brand small { font-size: .58em; letter-spacing: .24em; opacity: .65; font-weight: 500; }
.nav { justify-self: center; display: flex; gap: clamp(1.2rem, 2.4vw, 2.6rem); }
.nav a { font-size: var(--fs-sm); font-weight: 500; letter-spacing: .02em; position: relative; padding: .3em 0; }
.nav a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease-out); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav a[aria-current="page"] { opacity: 1; }
.head-right { justify-self: end; display: flex; align-items: center; gap: 1.2rem; }
.head-cta { font-size: var(--fs-sm); font-weight: 600; display: inline-flex; align-items: center; gap: .5em; }
.head-cta .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bronze-2); animation: pulse 2.4s var(--ease-inout) infinite; }
@keyframes pulse { 0%,100%{ transform: scale(1); opacity: 1;} 50%{ transform: scale(.55); opacity: .4;} }

.menu-toggle { display: none; width: 46px; height: 46px; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; position: relative; }
.menu-toggle span { position: absolute; left: 50%; top: 50%; width: 16px; height: 1.5px; background: #fff; transform: translate(-50%,-50%); transition: transform .4s var(--ease-out), opacity .3s; }
.menu-toggle span:first-child { transform: translate(-50%, calc(-50% - 3px)); }
.menu-toggle span:last-child { transform: translate(-50%, calc(-50% + 3px)); }
body.menu-open .menu-toggle span:first-child { transform: translate(-50%,-50%) rotate(45deg); }
body.menu-open .menu-toggle span:last-child { transform: translate(-50%,-50%) rotate(-45deg); }
body.menu-open .menu-toggle span:nth-child(2) { opacity: 0; }

/* Mobil header: yatay menü gizlenir, hamburger açılır (≤820px) */
@media (max-width: 820px){
  .site-head { grid-template-columns: 1fr auto; }
  .nav { display: none; }
  .head-cta { display: none; }
  .menu-toggle { display: block; }
}

/* Mobil tam-ekran menü */
.mobile-menu { position: fixed; inset: 0; z-index: calc(var(--z-nav) - 1); background: var(--navy-deep); color: var(--on-dark); display: grid; grid-template-rows: 1fr auto; padding: calc(var(--gutter) * 2) var(--gutter) var(--gutter); clip-path: inset(0 0 100% 0); transition: clip-path .7s var(--ease-inout); pointer-events: none; }
body.menu-open .mobile-menu { clip-path: inset(0 0 0% 0); pointer-events: auto; }
.mobile-menu__nav { align-self: center; display: flex; flex-direction: column; gap: .2rem; }
.mobile-menu__nav a { font-family: var(--font-display); font-size: clamp(2.4rem, 11vw, 4.5rem); font-weight: 500; line-height: 1.05; letter-spacing: -.02em; }
.mobile-menu__nav a span { display: inline-block; }
.mobile-menu__foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; color: var(--on-dark-muted); font-size: var(--fs-sm); border-top: 1px solid var(--on-dark-line); padding-top: 1.4rem; }

/* ============================================================
   5. BUTONLAR & LİNKLER
   ============================================================ */
.btn { position: relative; display: inline-flex; align-items: center; gap: .8em; font-family: var(--font-body); font-weight: 600; font-size: var(--fs-sm); letter-spacing: .02em; padding: 1.05em 1.8em; border-radius: 100px; overflow: hidden; isolation: isolate; will-change: transform; }
.btn__t { position: relative; z-index: 2; }
.btn--fill { background: var(--ink); color: var(--white); }
.btn--fill::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--bronze); transform: scaleY(0); transform-origin: bottom; transition: transform .5s var(--ease-expo); border-radius: inherit; }
.btn--fill:hover::before { transform: scaleY(1); }
.btn--line { border: 1px solid var(--line); color: var(--fg); }
.btn--line::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-expo); border-radius: inherit; }
.btn--line:hover { color: var(--white); border-color: var(--ink); }
.btn--line:hover::before { transform: scaleX(1); }
.is-dark .btn--line, .site-foot .btn--line { border-color: var(--on-dark-line); color: var(--on-dark); }
.is-dark .btn--line::before, .site-foot .btn--line::before { background: var(--on-dark); }
.is-dark .btn--line:hover, .site-foot .btn--line:hover { color: var(--navy); border-color: var(--on-dark); }
.btn .arr { transition: transform .4s var(--ease-out); }
.btn:hover .arr { transform: translateX(4px); }

.link-arrow { display: inline-flex; align-items: center; gap: .6em; font-weight: 600; font-size: var(--fs-sm); position: relative; }
.link-arrow span { position: relative; }
.link-arrow span::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease-out); }
.link-arrow:hover span::after { transform: scaleX(1); transform-origin: left; }
.link-arrow svg { transition: transform .4s var(--ease-out); }
.link-arrow:hover svg { transform: translate(3px,-3px); }
.magnetic { will-change: transform; }

/* ============================================================
   6. HERO (sinematik)
   ============================================================ */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; background: var(--navy-deep); color: var(--on-dark); --line: var(--on-dark-line); }
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img, .hero__media video, .hero__media canvas { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(0,26,38,.55) 0%, rgba(0,26,38,.15) 35%, rgba(0,26,38,.35) 70%, rgba(0,26,38,.92) 100%); }
.hero__veil { position: absolute; inset: 0; z-index: 0; background: radial-gradient(120% 80% at 50% 0%, transparent 40%, rgba(0,20,30,.5) 100%); }
.hero__inner { position: relative; z-index: 2; width: 100%; padding-bottom: clamp(2.5rem, 6vw, 5rem); }
.hero__eyebrow { color: var(--sky); margin-bottom: clamp(1.2rem, 3vw, 2.2rem); }
.hero__title { font-size: var(--fs-mega); line-height: var(--lh-tight); font-weight: 400; letter-spacing: -.03em; }
.hero__title .ln { display: block; overflow: visible; }
.hero__title em { font-style: italic; font-weight: 300; color: var(--peach); }
.hero__title .ind { padding-left: clamp(2rem, 12vw, 11rem); }
.hero__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; margin-top: clamp(1.6rem, 4vw, 3rem); }
.hero__lede { max-width: 38ch; color: var(--on-dark-muted); font-size: var(--fs-lead); }
.hero__scroll { display: inline-flex; align-items: center; gap: .8em; font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--on-dark-muted); }
.hero__scroll .mouse { width: 22px; height: 34px; border: 1px solid currentColor; border-radius: 12px; position: relative; }
.hero__scroll .mouse::after { content: ""; position: absolute; left: 50%; top: 6px; width: 2px; height: 6px; background: currentColor; transform: translateX(-50%); border-radius: 2px; animation: scrolldot 1.8s var(--ease-inout) infinite; }
@keyframes scrolldot { 0%{opacity:0; transform: translate(-50%,0);} 30%{opacity:1;} 100%{opacity:0; transform: translate(-50%,10px);} }

/* ============================================================
   7. MARQUEE (kinetik şerit)
   ============================================================ */
.marquee { overflow: hidden; border-block: 1px solid var(--line); padding-block: clamp(1rem, 2.2vw, 1.8rem); white-space: nowrap; }
.marquee__track { display: inline-flex; gap: 2.5rem; will-change: transform; }
.marquee__track > * { font-family: var(--font-display); font-size: clamp(1.6rem, 4.5vw, 3.4rem); font-weight: 400; letter-spacing: -.01em; display: inline-flex; align-items: center; gap: 2.5rem; }
.marquee__track .sep { color: var(--bronze); }
.marquee--sm .marquee__track > * { font-size: clamp(.9rem,1.6vw,1.2rem); letter-spacing: .12em; text-transform: uppercase; font-family: var(--font-body); font-weight: 600; }

/* ============================================================
   8. BÖLÜM BAŞLIKLARI (section-lead grameri)
   ============================================================ */
.lead { display: grid; grid-template-columns: 1fr; gap: clamp(1.4rem, 3vw, 2.4rem); margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.lead__top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.lead__title { font-size: var(--fs-h2); font-weight: 400; letter-spacing: -.025em; max-width: 18ch; }
.lead__title em { font-style: italic; font-weight: 300; color: var(--bronze); }
.lead__meta { max-width: 40ch; color: var(--muted); font-size: var(--fs-body); }
.lead__index { font-family: var(--font-display); font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }

/* ============================================================
   9. MANIFESTO (büyük ifade · kelime-reveal)
   ============================================================ */
.manifesto { padding-block: var(--space-section); }
.manifesto__text { font-family: var(--font-display); font-weight: 300; font-size: var(--fs-h1); line-height: 1.18; letter-spacing: -.02em; max-width: 22ch; }
.manifesto__text .w { display: inline-block; }
.manifesto__text mark { background: none; color: var(--bronze); font-style: italic; }
.manifesto__foot { margin-top: clamp(2.5rem, 5vw, 4rem); display: flex; gap: clamp(2rem,5vw,5rem); flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 2rem; }
.manifesto__stat { }
.manifesto__stat dt { font-family: var(--font-display); font-size: clamp(1.4rem, 2.4vw, 2.1rem); font-weight: 500; letter-spacing: -.01em; }
.manifesto__stat dd { color: var(--muted); font-size: var(--fs-sm); max-width: 22ch; margin-top: .3rem; }

/* ============================================================
   10. PROJE LİSTESİ — HOVER-REVEAL (Deniz Aksoy imza grameri)
   ============================================================ */
.projects { position: relative; }
.project-list { border-top: 1px solid var(--line); }
.project-row {
  position: relative; display: grid; grid-template-columns: auto 1fr auto auto; gap: clamp(1rem, 3vw, 3rem);
  align-items: center; padding: clamp(1.5rem, 3vw, 2.6rem) 0; border-bottom: 1px solid var(--line);
  transition: padding-left .5s var(--ease-out);
}
.project-row__idx { font-family: var(--font-display); font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; transition: color .4s; }
.project-row__name { font-family: var(--font-display); font-size: clamp(1.8rem, 5.2vw, 4.2rem); font-weight: 400; letter-spacing: -.025em; line-height: 1; transition: transform .5s var(--ease-out), opacity .4s; }
.project-row__meta { display: flex; gap: clamp(.8rem,2vw,2rem); color: var(--muted); font-size: var(--fs-sm); }
.project-row__meta span { white-space: nowrap; }
.project-row__go { width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; transition: background .4s var(--ease-out), border-color .4s, transform .5s var(--ease-out); flex-shrink: 0; }
.project-row__go svg { transition: transform .4s var(--ease-out); }
.project-row:hover { padding-left: clamp(.5rem, 2vw, 2rem); }
.project-row:hover .project-row__idx { color: var(--bronze); }
.project-row:hover .project-row__name { transform: translateX(.4rem); }
.project-row:hover .project-row__go { background: var(--ink); border-color: var(--ink); }
.project-row:hover .project-row__go svg { transform: translate(3px,-3px); stroke: var(--white); }
@media (max-width: 880px){
  .project-row { grid-template-columns: auto 1fr auto; }
  .project-row__meta { display: none; }
}

/* yüzen önizleme görseli (cursor takip) */
.project-hover { position: fixed; top: 0; left: 0; width: clamp(220px, 24vw, 420px); aspect-ratio: 4/3; z-index: 600; pointer-events: none; overflow: hidden; border-radius: var(--radius); opacity: 0; will-change: transform; box-shadow: 0 30px 80px -30px rgba(0,20,30,.5); }
.project-hover__img { position: absolute; inset: 0; opacity: 0; }
.project-hover__img img { width: 100%; height: 100%; object-fit: cover; }
.project-hover__img.is-active { opacity: 1; }
@media (hover: none){ .project-hover { display: none; } }

/* ============================================================
   11. PROJE IZGARASI (projeler sayfası)
   ============================================================ */
.work-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1rem, 2.5vw, 2.4rem) clamp(1rem,2vw,2rem); }
.work-card { position: relative; overflow: hidden; }
.work-card--lg { grid-column: span 7; }
.work-card--sm { grid-column: span 5; }
.work-card--full { grid-column: span 12; }
.work-card--half { grid-column: span 6; }
.work-card__media { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--paper-2); }
.work-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-expo); will-change: transform; }
.work-card:hover .work-card__media img { transform: scale(1.05); }
.work-card__media .ratio-32, .work-card__media .ratio-43, .work-card__media .ratio-45 { width: 100%; }
.work-card__cap { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-top: 1.1rem; }
.work-card__name { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 500; letter-spacing: -.01em; }
.work-card__sub { color: var(--muted); font-size: var(--fs-sm); }
.work-card__tag { font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted); }
@media (max-width: 880px){ .work-card--lg, .work-card--sm, .work-card--half { grid-column: span 12; } }

/* ============================================================
   12. 3D SOKET SAHNESİ (sinematik koyu bölüm)
   ============================================================ */
.showcase3d { position: relative; overflow: hidden; padding-block: var(--space-section); }
.showcase3d__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.showcase3d__copy h2 { font-size: var(--fs-h1); font-weight: 400; letter-spacing: -.025em; line-height: 1.04; }
.showcase3d__copy h2 em { font-style: italic; font-weight: 300; color: var(--peach); }
.showcase3d__copy p { color: var(--on-dark-muted); max-width: 40ch; margin-top: 1.4rem; font-size: var(--fs-lead); }
.showcase3d__feats { margin-top: 2rem; display: grid; gap: .9rem; }
.showcase3d__feats li { display: flex; gap: .9rem; align-items: baseline; color: var(--on-dark); font-size: var(--fs-sm); }
.showcase3d__feats li b { color: var(--sky); font-family: var(--font-display); font-weight: 500; }
.showcase3d__socket { position: relative; }
.showcase3d__hint { position: absolute; bottom: 1rem; left: 1rem; z-index: 4; font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--on-dark-muted); pointer-events: none; }
@media (max-width: 980px){ .showcase3d__grid { grid-template-columns: 1fr; } }

/* socket kapsayıcı — koyu temaya boyama soket.css'i tamamlar */
.urun-3d-soket { width: 100%; border-radius: var(--radius); overflow: hidden; }

/* ============================================================
   13. HİZMETLER
   ============================================================ */
.services-list { border-top: 1px solid var(--line); }
.service-item { display: grid; grid-template-columns: auto 1fr 1.2fr auto; gap: clamp(1rem,3vw,3rem); align-items: start; padding: clamp(1.6rem,3vw,2.4rem) 0; border-bottom: 1px solid var(--line); transition: background .4s; }
.service-item__no { font-family: var(--font-display); font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; padding-top: .4em; }
.service-item__name { font-family: var(--font-display); font-size: clamp(1.5rem,3.2vw,2.4rem); font-weight: 500; letter-spacing: -.01em; line-height: 1.05; }
.service-item__desc { color: var(--muted); font-size: var(--fs-body); max-width: 46ch; }
.service-item__plus { width: 40px; height: 40px; position: relative; align-self: center; }
.service-item__plus::before, .service-item__plus::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--line); transition: background .4s; }
.service-item__plus::before { width: 16px; height: 1px; transform: translate(-50%,-50%); }
.service-item__plus::after { width: 1px; height: 16px; transform: translate(-50%,-50%); }
.service-item:hover .service-item__plus::before, .service-item:hover .service-item__plus::after { background: var(--bronze); }
@media (max-width: 820px){ .service-item { grid-template-columns: auto 1fr; } .service-item__desc, .service-item__plus { display: none; } }

/* hizmet kart ızgarası (alternatif görünüm) */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (max-width: 900px){ .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px){ .svc-grid { grid-template-columns: 1fr; } }
.svc-cell { background: var(--bg); padding: clamp(1.6rem,3vw,2.4rem); display: flex; flex-direction: column; gap: .8rem; min-height: 240px; transition: background .5s var(--ease-out); position: relative; }
.svc-cell:hover { background: var(--paper-2); }
.svc-cell__no { font-family: var(--font-display); font-size: var(--fs-sm); color: var(--bronze); }
.svc-cell h3 { font-size: var(--fs-h4); font-weight: 600; margin-top: auto; }
.svc-cell p { color: var(--muted); font-size: var(--fs-sm); }

/* ============================================================
   14. SÜREÇ (4 adım)
   ============================================================ */
.process { }
.process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem,2.5vw,2.5rem); }
.step { border-top: 1px solid var(--fg); padding-top: 1.4rem; }
.step__no { font-family: var(--font-display); font-size: clamp(2.5rem,5vw,4rem); font-weight: 300; line-height: 1; color: var(--bronze); }
.step__name { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 600; margin-top: 1rem; }
.step__desc { color: var(--muted); font-size: var(--fs-sm); margin-top: .7rem; }
@media (max-width: 820px){ .process-steps { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (max-width: 520px){ .process-steps { grid-template-columns: 1fr; } }

/* ============================================================
   15. STAT / ROZET ŞERİDİ
   ============================================================ */
.badges { display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(1rem,3vw,3rem); }
.badge { }
.badge__big { font-family: var(--font-display); font-size: clamp(1.6rem,3vw,2.4rem); font-weight: 500; letter-spacing: -.01em; }
.badge__sm { color: var(--muted); font-size: var(--fs-sm); margin-top: .3rem; max-width: 22ch; }
@media (max-width:720px){ .badges { grid-template-columns: 1fr 1fr; gap: 2rem; } }

/* ============================================================
   16. SPLIT / GÖRSEL + METİN
   ============================================================ */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem,5vw,5rem); align-items: center; }
.split--rev { grid-template-columns: .95fr 1.05fr; }
.split__media { position: relative; overflow: hidden; border-radius: var(--radius); }
.split__media img { transition: transform 1.4s var(--ease-expo); will-change: transform; }
.split__body h2 { font-size: var(--fs-h2); font-weight: 400; letter-spacing: -.02em; }
.split__body h2 em { font-style: italic; font-weight: 300; color: var(--bronze); }
.split__body p { color: var(--muted); margin-top: 1.2rem; max-width: 48ch; }
.split__body p + p { margin-top: 1rem; }
@media (max-width: 880px){ .split, .split--rev { grid-template-columns: 1fr; } }

/* değerler / liste */
.values { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 2rem; }
.value-cell { background: var(--bg); padding: 1.6rem; }
.value-cell h4 { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 600; }
.value-cell p { color: var(--muted); font-size: var(--fs-sm); margin-top: .4rem; }

/* ============================================================
   17. BLOG
   ============================================================ */
.blog-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: clamp(1.6rem,3vw,2.6rem); }
.post { display: grid; grid-template-columns: 1fr 1.4fr; gap: 1.4rem; align-items: center; padding-bottom: clamp(1.6rem,3vw,2.4rem); border-bottom: 1px solid var(--line); }
.post__media { overflow: hidden; border-radius: var(--radius); }
.post__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; transition: transform 1.2s var(--ease-expo); }
.post:hover .post__media img { transform: scale(1.06); }
.post__cat { font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--bronze); }
.post__title { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 600; margin: .5rem 0; line-height: 1.2; }
.post__ex { color: var(--muted); font-size: var(--fs-sm); }
.post__date { color: var(--muted-2); font-size: var(--fs-xs); margin-top: .6rem; }
@media (max-width: 720px){ .blog-grid { grid-template-columns: 1fr; } .post { grid-template-columns: 1fr; } }

/* ============================================================
   18. CTA BLOK
   ============================================================ */
.cta { text-align: center; }
.cta__big { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 400; letter-spacing: -.03em; line-height: 1.04; max-width: 16ch; margin-inline: auto; }
.cta__big em { font-style: italic; font-weight: 300; color: var(--bronze); }
.cta__row { margin-top: 2.4rem; display: inline-flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }

/* ============================================================
   19. İLETİŞİM FORMU
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem,5vw,5rem); }
.contact-info { display: grid; gap: 1.6rem; align-content: start; }
.contact-info__item { border-top: 1px solid var(--line); padding-top: 1rem; }
.contact-info__item .k { font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted); }
.contact-info__item .v { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 500; margin-top: .4rem; display: block; }
.contact-info__item a.v:hover { color: var(--bronze); }
.form-field { position: relative; margin-bottom: 1.6rem; }
.form-field input, .form-field textarea { width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--line); padding: .9em 0; font-size: var(--fs-body); transition: border-color .4s; }
.form-field textarea { resize: vertical; min-height: 110px; }
.form-field label { position: absolute; left: 0; top: .9em; color: var(--muted); pointer-events: none; transition: transform .35s var(--ease-out), font-size .35s, color .35s; transform-origin: left; }
.form-field input:focus, .form-field textarea:focus { border-color: var(--bronze); }
.form-field input:focus + label, .form-field textarea:focus + label,
.form-field input:not(:placeholder-shown) + label, .form-field textarea:not(:placeholder-shown) + label {
  transform: translateY(-1.5em) scale(.78); color: var(--bronze);
}
.form-note { font-size: var(--fs-sm); color: var(--muted); margin-top: 1rem; }
.form-msg { font-size: var(--fs-sm); margin-top: 1rem; min-height: 1.2em; color: var(--olive); font-weight: 600; }
@media (max-width: 820px){ .contact-grid { grid-template-columns: 1fr; } }

/* ============================================================
   20. FOOTER (ağır · contact-comp grameri)
   ============================================================ */
.site-foot { background: var(--navy-deep); color: var(--on-dark); --fg: var(--on-dark); --line: var(--on-dark-line); --muted: var(--on-dark-muted); padding-top: clamp(3.5rem,7vw,6rem); position: relative; overflow: hidden; }
.foot-cta { padding-bottom: clamp(3rem,6vw,5rem); border-bottom: 1px solid var(--on-dark-line); }
.foot-cta__big { font-family: var(--font-display); font-size: clamp(2.6rem,9vw,8rem); font-weight: 300; letter-spacing: -.03em; line-height: .98; }
.foot-cta__big em { font-style: italic; color: var(--peach); }
.foot-cta__row { margin-top: 2.2rem; display: flex; justify-content: space-between; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.foot-main { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: clamp(1.4rem,3vw,2.4rem); padding-block: clamp(2.6rem,5vw,4rem); }
.foot-col h5 { font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--on-dark-muted); margin-bottom: 1.2rem; }
.foot-col ul { display: grid; gap: .7rem; }
.foot-col a, .foot-col p { color: var(--on-dark); font-size: var(--fs-sm); }
.foot-col a:hover { color: var(--sky); }
.foot-brand { font-family: var(--font-display); font-size: clamp(1.4rem,2.4vw,2rem); font-weight: 500; letter-spacing: .12em; }
.foot-brand p { color: var(--on-dark-muted); font-size: var(--fs-sm); max-width: 30ch; margin-top: 1rem; letter-spacing: normal; }
.foot-bottom { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding-block: 1.6rem; border-top: 1px solid var(--on-dark-line); font-size: var(--fs-xs); color: var(--on-dark-muted); }
.foot-social { display: flex; gap: 1.2rem; }
.foot-social a { font-size: var(--fs-sm); }
.foot-bg-mark { position: absolute; left: 50%; bottom: -8%; transform: translateX(-50%); font-family: var(--font-display); font-weight: 700; font-size: 28vw; line-height: 1; color: rgba(237,233,222,.035); pointer-events: none; user-select: none; white-space: nowrap; }
@media (max-width: 880px){ .foot-main { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .foot-main { grid-template-columns: 1fr; } }

/* ============================================================
   21. SAYFA BAŞLIĞI (iç sayfalar)
   ============================================================ */
.page-hero { padding-top: clamp(7rem, 14vh, 11rem); padding-bottom: clamp(2.5rem,5vw,4rem); position: relative; }
.page-hero__eyebrow { margin-bottom: 1.4rem; }
.page-hero__title { font-size: var(--fs-h1); font-weight: 400; letter-spacing: -.03em; line-height: 1; }
.page-hero__title em { font-style: italic; font-weight: 300; color: var(--bronze); }
.page-hero__sub { color: var(--muted); font-size: var(--fs-lead); max-width: 50ch; margin-top: 1.4rem; }
.page-hero__row { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1.5rem; }

/* breadcrumb */
.crumbs { display: flex; gap: .6rem; font-size: var(--fs-sm); color: var(--muted); align-items: center; }
.crumbs a:hover { color: var(--fg); }
.crumbs .sep { opacity: .5; }

/* ============================================================
   22. PROJE DETAY
   ============================================================ */
.pd-hero { min-height: 86svh; position: relative; display: flex; align-items: flex-end; overflow: hidden; background: var(--navy-deep); color: var(--on-dark); }
.pd-hero__media { position: absolute; inset: 0; }
.pd-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.pd-hero__media::after { content:""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,20,30,.4), rgba(0,20,30,.85)); }
.pd-hero__inner { position: relative; z-index: 2; width: 100%; padding-bottom: clamp(2rem,5vw,4rem); }
.pd-hero__title { font-size: var(--fs-h1); font-weight: 400; letter-spacing: -.03em; line-height: .98; }
.pd-meta { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-block: 1.6rem; }
.pd-meta .k { font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted); }
.pd-meta .v { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 500; margin-top: .4rem; }
@media (max-width:720px){ .pd-meta { grid-template-columns: 1fr 1fr; } }
.pd-body { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(2rem,5vw,5rem); }
.pd-body__lead { font-family: var(--font-display); font-weight: 300; font-size: var(--fs-h3); line-height: 1.3; letter-spacing: -.01em; }
.pd-body__text p { color: var(--muted); max-width: 56ch; }
.pd-body__text p + p { margin-top: 1rem; }
.pd-scope { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: .6rem; }
.pd-scope li { border: 1px solid var(--line); border-radius: 100px; padding: .5em 1.1em; font-size: var(--fs-sm); }
@media (max-width:880px){ .pd-body { grid-template-columns: 1fr; } }

/* galeri */
.pd-gallery { display: grid; grid-template-columns: repeat(12,1fr); gap: clamp(.8rem,1.6vw,1.4rem); }
.pd-gallery figure { overflow: hidden; border-radius: var(--radius); }
.pd-gallery img { width: 100%; height: 100%; object-fit: cover; }
.g-7 { grid-column: span 7; } .g-5 { grid-column: span 5; } .g-12 { grid-column: span 12; } .g-6 { grid-column: span 6; }
@media (max-width:720px){ .g-7,.g-5,.g-6 { grid-column: span 12; } }

/* next project */
.pd-next { position: relative; overflow: hidden; background: var(--navy-deep); color: var(--on-dark); padding-block: clamp(3rem,6vw,5rem); }
.pd-next a { display: block; }
.pd-next__label { font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--on-dark-muted); }
.pd-next__name { font-family: var(--font-display); font-size: clamp(2.4rem,8vw,7rem); font-weight: 400; letter-spacing: -.03em; line-height: 1; transition: transform .6s var(--ease-out); }
.pd-next a:hover .pd-next__name { transform: translateX(1.5rem); }

/* ============================================================
   23. REVEAL JETONLARI (GSAP sürer; fallback görünür)
   ============================================================ */
[data-reveal] { opacity: 0; }
[data-reveal="up"] { transform: translateY(36px); }
[data-reveal="fade"] { transform: none; }
/* maske kapsayıcılar: çıkıntı/diakritik kırpılmasın diye dikey nefes payı
   (negatif margin ile düzen kaymaz) — split-text kırpma tuzağı çözümü */
.splt-line { display: block; overflow: hidden; padding: 0.16em 0.02em 0.12em; margin: -0.16em -0.02em -0.12em; }
.splt-line > span { display: block; will-change: transform; }
.splt-word { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.18em 0.03em 0.14em; margin: -0.18em -0.03em -0.14em; }
.splt-word > span { display: inline-block; will-change: transform; }
.img-cover { position: relative; overflow: hidden; }
.img-cover__veil { position: absolute; inset: 0; background: var(--navy-deep); transform-origin: bottom; z-index: 2; }

/* genel link grid yardımcı */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.4rem,3vw,2.4rem); }
@media (max-width:720px){ .grid-2 { grid-template-columns: 1fr; } }
.mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; }
.text-bronze { color: var(--bronze); }

/* ============================================================
   24. CİLA TUR-2 — proje pull-quote · galeri ipucu · doku şeridi
   (additive · yapı/palet/motor korunur)
   ============================================================ */
/* CİLA TUR-2 okunabilirlik: uzun-metin dul/yetim satır kontrolü (additive, güvenli) */
.pd-body__text p, .split__body p, .service-item__desc, .svc-cell p, .step__desc, .post__ex, .media-band__cap { text-wrap: pretty; }
.lead__title, .page-hero__title, .pd-hero__title, .cta__big, .foot-cta__big { text-wrap: balance; }

/* ters split (hakkımızda yöntem&vaat) — medya sağda, hafif denge */
.split--rev { grid-template-columns: .95fr 1.05fr; }
@media (max-width:820px){ .split { grid-template-columns: 1fr; } .split--rev .split__media { order: -1; } }

/* tam-genişlik atmosfer/doku şeridi (hizmetler) */
.media-band { position: relative; margin-block: clamp(2.4rem,6vw,5rem); }
.media-band__img { position: relative; overflow: hidden; height: clamp(300px,52vh,620px); cursor: pointer; }
.media-band__img img { position: absolute; inset: -12% 0 auto 0; width: 100%; height: 124%; object-fit: cover; will-change: transform; }
.media-band__cap { margin-top: 1.1rem; color: var(--muted); font-size: var(--fs-sm); max-width: 52ch; }
.media-band__cap span { display: inline-block; }

/* proje-detay editöryal vurgu cümlesi */
.pd-pull { margin-block: clamp(2.6rem,6vw,5rem); text-align: center; }
.pd-pull__q { font-family: var(--font-display); font-weight: 300; font-style: italic;
  font-size: clamp(1.6rem,3.4vw,2.9rem); line-height: 1.24; letter-spacing: -.015em;
  max-width: 22ch; margin: 0 auto; color: var(--ink); text-wrap: balance; }
.pd-pull__q::before { content: "“"; color: var(--bronze); }
.pd-pull__q::after  { content: "”"; color: var(--bronze); }
.pd-pull__rule { width: 56px; height: 1px; background: var(--bronze); margin: 1.6rem auto 0; opacity: .7; }

/* galeri figürlerinde "büyüt" ipucu (lightbox) */
.pd-gallery figure[data-lightbox] { position: relative; cursor: pointer; }
.pd-gallery figure[data-lightbox]::after {
  content: ""; position: absolute; right: 1rem; bottom: 1rem; width: 38px; height: 38px;
  border-radius: 50%; background: rgba(6,23,30,.42) center/16px no-repeat;
  backdrop-filter: blur(3px); z-index: 3; opacity: 0; transform: scale(.8); transition: .45s var(--ease-out);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23F3F0E8' stroke-width='1.6'><path d='M7 1v12M1 7h12'/></svg>");
}
.pd-gallery figure[data-lightbox]:hover::after { opacity: 1; transform: scale(1); }
@media (hover:none){ .pd-gallery figure[data-lightbox]::after { opacity: .85; transform: none; } }

/* ============================================================
   25. LIGHTBOX (additive · bağımsız · imleç altında z)
   ============================================================ */
html.lb-lock { overflow: hidden; }
.lightbox { position: fixed; inset: 0; z-index: 9400; display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .4s var(--ease-out), visibility .4s; }
.lightbox.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.lightbox__backdrop { position: absolute; inset: 0; background: rgba(0,16,24,.86); backdrop-filter: blur(8px) saturate(1.05); cursor: zoom-out; }
.lightbox__stage { position: relative; z-index: 2; margin: 0; max-width: min(92vw, 1400px); max-height: 86vh;
  display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.lightbox__img { max-width: min(92vw, 1400px); max-height: 78vh; width: auto; height: auto; object-fit: contain;
  border-radius: var(--radius); box-shadow: 0 30px 90px rgba(0,0,0,.5);
  opacity: 0; transform: scale(.985); transition: opacity .5s var(--ease-out), transform .6s var(--ease-expo); }
.lightbox__img.is-in { opacity: 1; transform: scale(1); }
.lightbox__cap { display: flex; align-items: baseline; justify-content: center; gap: 1.2rem; flex-wrap: wrap;
  color: var(--on-dark-muted); font-size: var(--fs-sm); letter-spacing: .01em; }
.lightbox__cap-t { color: var(--on-dark); }
.lightbox__count { font-family: var(--font-display); color: var(--bronze-2); font-size: var(--fs-xs);
  letter-spacing: .12em; }
.lightbox__close { position: absolute; top: clamp(1rem,3vw,2rem); right: clamp(1rem,3vw,2rem); z-index: 4;
  width: 50px; height: 50px; border-radius: 50%; border: 1px solid rgba(237,233,222,.28); background: rgba(237,233,222,.06);
  color: var(--on-dark); display: grid; place-items: center; cursor: pointer; transition: .35s var(--ease-out); }
.lightbox__close:hover { background: var(--bronze); border-color: var(--bronze); color: #14110d; transform: rotate(90deg); }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgba(237,233,222,.22); background: rgba(237,233,222,.05);
  color: var(--on-dark); display: grid; place-items: center; cursor: pointer; transition: .35s var(--ease-out); }
.lightbox__nav:hover { background: var(--bronze); border-color: var(--bronze); color: #14110d; }
.lightbox__nav--prev { left: clamp(.6rem,2.5vw,2.2rem); }
.lightbox__nav--next { right: clamp(.6rem,2.5vw,2.2rem); }
.lightbox.is-single .lightbox__nav, .lightbox.is-single .lightbox__count { display: none; }
@media (max-width:600px){
  .lightbox__nav { width: 44px; height: 44px; }
  .lightbox__nav--prev { left: .4rem; } .lightbox__nav--next { right: .4rem; }
  .lightbox__img { max-height: 72vh; }
}
@media (prefers-reduced-motion: reduce){
  .lightbox, .lightbox__img { transition: opacity .01ms; }
  .lightbox__img { transform: none; }
  .lightbox__close:hover { transform: none; }
}

/* ============================================================
   Proje detay · Gezilebilir 3D (Gaussian Splat) — additive
   ============================================================ */
.pd-gs { padding-top: 0; }
.pd-gs__title { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 400; letter-spacing: -.02em; line-height: var(--lh-snug); margin-bottom: .6rem; }
.pd-gs__lead { max-width: 60ch; color: var(--muted); font-size: var(--fs-lead); line-height: 1.5; margin-bottom: 1.6rem; }
.pd-gs__stage { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: var(--radius-lg); overflow: hidden; background: var(--navy-deep); border: 1px solid var(--line); }
@media (max-width: 700px){ .pd-gs__stage { aspect-ratio: 4/5; } }
.pd-gs__launch { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; margin: 0; cursor: pointer; background: none; color: var(--on-dark); display: block; font: inherit; }
.pd-gs__poster { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 1.2s var(--ease-out); }
.pd-gs__launch:hover .pd-gs__poster { transform: scale(1.04); }
.pd-gs__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,26,38,.22), rgba(0,26,38,.72)); }
.pd-gs__cta { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); display: inline-flex; align-items: center; gap: .7rem; font-family: var(--font-display); font-size: var(--fs-h4); letter-spacing: .01em; color: var(--white); background: rgba(6,23,30,.5); border: 1px solid rgba(237,233,222,.32); border-radius: 100px; padding: .9rem 1.6rem; backdrop-filter: blur(8px); transition: background .4s var(--ease-out), border-color .4s, transform .5s var(--ease-out); white-space: nowrap; }
.pd-gs__launch:hover .pd-gs__cta { background: var(--bronze); border-color: var(--bronze); color: #1a1208; }
.pd-gs__play { font-size: .8em; }
.pd-gs__hint { position: absolute; left: 0; right: 0; bottom: 1.1rem; text-align: center; color: var(--on-dark-muted); font-size: var(--fs-sm); padding: 0 1rem; }
.pd-gs__iframe { width: 100%; height: 100%; border: 0; display: block; }
.pd-gs__cap { margin-top: 1rem; color: var(--muted-2); font-size: var(--fs-sm); max-width: 72ch; }
@media (prefers-reduced-motion: reduce){ .pd-gs__poster, .pd-gs__cta { transition: none; } }

/* ============================================================
   Dönüşüm Vitrini (donusum.html) — etkileşimli toggle vitrini · additive
   ============================================================ */
.dnsm-hero { padding-top: clamp(7rem, 14vh, 11rem); }
.dnsm-hero__title { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 400; line-height: var(--lh-tight); letter-spacing: -.03em; }
.dnsm-hero__title em { font-style: italic; color: var(--bronze); }
.dnsm-hero__row { display: grid; grid-template-columns: 1.4fr .9fr; gap: clamp(1.5rem, 5vw, 4rem); align-items: end; margin-top: clamp(1.6rem, 4vw, 2.6rem); }
.dnsm-hero__lede { font-size: var(--fs-lead); line-height: 1.5; color: var(--muted); max-width: 54ch; }
.dnsm-hero__toc { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.dnsm-hero__toc li { border-bottom: 1px solid var(--line); }
.dnsm-hero__toc a { display: block; padding: .85rem 0; font-family: var(--font-display); font-size: var(--fs-h4); color: var(--fg); transition: color .35s, padding-left .35s var(--ease-out); }
.dnsm-hero__toc a:hover { color: var(--bronze); padding-left: .6rem; }
@media (max-width: 820px){ .dnsm-hero__row { grid-template-columns: 1fr; align-items: start; } }

.dnsm-head { display: grid; grid-template-columns: auto 1fr; gap: clamp(1rem, 3vw, 2.2rem); align-items: start; margin-bottom: clamp(1.8rem, 4vw, 3rem); }
.dnsm-head__idx { font-family: var(--font-display); font-size: clamp(1.6rem, 4vw, 2.6rem); color: var(--bronze); line-height: 1; padding-top: .15em; }
.dnsm-head__title { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 400; letter-spacing: -.02em; line-height: var(--lh-snug); }
.dnsm-head__sub { margin-top: .6rem; max-width: 62ch; color: var(--muted); font-size: var(--fs-lead); line-height: 1.5; }

.dnsm-note { margin-top: 1.1rem; color: var(--muted-2); font-size: var(--fs-sm); max-width: 70ch; }

/* 01 · Yüzey & Renk */
.dnsm-yuzey__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.4rem, 4vw, 3.4rem); align-items: center; }
.dnsm-yuzey__stage { position: relative; margin: 0; border-radius: var(--radius-lg); overflow: hidden; background: var(--paper-2); border: 1px solid var(--line); }
.dnsm-yuzey__stage img { display: block; width: 100%; height: auto; aspect-ratio: 1/1; object-fit: cover; transition: opacity .45s var(--ease-out); }
.dnsm-yuzey__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4rem 1.2rem .9rem; font-size: var(--fs-sm); color: #fff; background: linear-gradient(transparent, rgba(0,26,38,.72)); }
.dnsm-swatches { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.4rem; }
.dnsm-swatch { display: inline-flex; align-items: center; gap: .55rem; padding: .5rem .9rem .5rem .55rem; border: 1px solid var(--line); border-radius: 100px; background: transparent; cursor: pointer; font: inherit; font-size: var(--fs-sm); color: var(--fg); transition: border-color .3s, background .3s, transform .3s var(--ease-out); }
.dnsm-swatch:hover { border-color: var(--bronze); transform: translateY(-2px); }
.dnsm-swatch.is-active { border-color: var(--ink); background: var(--ink); color: var(--white); }
.dnsm-swatch__chip { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); flex-shrink: 0; }
.dnsm-swatch__name { font-family: var(--font-display); }
.dnsm-yuzey__desc { font-size: var(--fs-lead); line-height: 1.55; color: var(--fg); max-width: 46ch; min-height: 4.5em; }
@media (max-width: 820px){ .dnsm-yuzey__grid { grid-template-columns: 1fr; } .dnsm-yuzey__desc { min-height: 0; } }

/* 02 · Malzeme Paleti (koyu sahne) */
.dnsm-mat { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(1.4rem, 4vw, 3.4rem); align-items: start; }
.dnsm-mat__chips { display: flex; flex-direction: column; gap: .5rem; }
.dnsm-mat__chip { text-align: left; padding: 1rem 1.2rem; border: 1px solid var(--on-dark-line); border-radius: var(--radius); background: transparent; cursor: pointer; font-family: var(--font-display); font-size: var(--fs-h4); color: var(--on-dark); transition: border-color .3s, background .3s, padding-left .3s var(--ease-out); }
.dnsm-mat__chip:hover { border-color: var(--bronze-2); padding-left: 1.5rem; }
.dnsm-mat__chip.is-active { background: var(--bronze); border-color: var(--bronze); color: #1a1208; }
.dnsm-mat__detail { display: grid; grid-template-columns: auto 1fr; gap: 1.4rem; padding: clamp(1.4rem, 3vw, 2.2rem); border: 1px solid var(--on-dark-line); border-radius: var(--radius-lg); background: rgba(237,233,222,.04); }
.dnsm-mat__sw { width: 64px; height: 64px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); transition: background .45s var(--ease-out); flex-shrink: 0; }
.dnsm-mat__tag { font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--bronze-2); }
.dnsm-mat__name { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 400; margin: .3rem 0 .7rem; color: var(--on-dark); }
.dnsm-mat__desc { color: var(--on-dark-muted); line-height: 1.6; font-size: var(--fs-body); }
.dnsm-mat__use { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--on-dark-line); }
.dnsm-mat__use .k { display: block; font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--on-dark-muted); margin-bottom: .4rem; }
.dnsm-mat__use p { color: var(--on-dark); font-size: var(--fs-sm); line-height: 1.5; }
.dnsm-malzeme .dnsm-note { color: rgba(237,233,222,.5); }
@media (max-width: 820px){ .dnsm-mat { grid-template-columns: 1fr; } .dnsm-mat__chips { flex-direction: row; flex-wrap: wrap; } .dnsm-mat__chip { flex: 1 1 40%; font-size: var(--fs-body); } .dnsm-mat__detail { grid-template-columns: 1fr; } }

/* 03 · Tezgâh */
.dnsm-tz__tabs { display: inline-flex; gap: .3rem; padding: .35rem; border: 1px solid var(--line); border-radius: 100px; margin-bottom: 1.8rem; }
.dnsm-tz__tab { padding: .6rem 1.5rem; border: 0; border-radius: 100px; background: transparent; cursor: pointer; font-family: var(--font-display); font-size: var(--fs-body); color: var(--muted); transition: background .3s, color .3s; }
.dnsm-tz__tab:hover { color: var(--fg); }
.dnsm-tz__tab.is-active { background: var(--ink); color: var(--white); }
.dnsm-tz__panel { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 3vw, 2.4rem); border-top: 1px solid var(--line); padding-top: 1.8rem; }
.dnsm-tz__row .k { display: block; font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--bronze); margin-bottom: .6rem; }
.dnsm-tz__row p { color: var(--fg); line-height: 1.6; font-size: var(--fs-body); }
@media (max-width: 760px){ .dnsm-tz__panel { grid-template-columns: 1fr; gap: 1.4rem; } }

/* 04 · Atmosfer */
.dnsm-atm { position: relative; margin: 0; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); }
.dnsm-atm__img { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; transition: filter 1s var(--ease-out); }
.dnsm-atm__img.is-night { filter: brightness(.52) contrast(1.08) saturate(1.12) sepia(.22) hue-rotate(-8deg); }
.dnsm-atm__toggle { position: absolute; left: 50%; bottom: 1.2rem; transform: translateX(-50%); display: inline-flex; gap: .3rem; padding: .35rem; border-radius: 100px; background: rgba(6,23,30,.55); border: 1px solid rgba(237,233,222,.25); backdrop-filter: blur(10px); }
.dnsm-atm__btn { padding: .55rem 1.3rem; border: 0; border-radius: 100px; background: transparent; cursor: pointer; font-family: var(--font-display); font-size: var(--fs-sm); color: var(--on-dark-muted); transition: background .3s, color .3s; }
.dnsm-atm__btn:hover { color: #fff; }
.dnsm-atm__btn.is-active { background: var(--bronze); color: #1a1208; }
@media (prefers-reduced-motion: reduce){ .dnsm-yuzey__stage img, .dnsm-atm__img, .dnsm-mat__sw, .dnsm-swatch, .dnsm-hero__toc a, .dnsm-mat__chip { transition: none; } }

/* ============================================================
   Showreel / Film bandı (index) — sinematik video envanteri · additive
   ============================================================ */
.showreel__title { font-size: var(--fs-h2); font-weight: 400; letter-spacing: -.02em; }
.showreel__title em { font-style: italic; color: var(--bronze); }
.showreel__frame { position: relative; margin-top: clamp(1.6rem,4vw,2.6rem); border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16/9; background: var(--navy-deep); border: 1px solid var(--on-dark-line); }
.showreel__frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.showreel__veil { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 120% at 50% 0%, transparent 62%, rgba(0,26,38,.4)); }
.showreel__cap { margin-top: 1.4rem; color: var(--on-dark-muted); max-width: 64ch; font-size: var(--fs-lead); line-height: 1.5; }
@media (max-width: 700px){ .showreel__frame { aspect-ratio: 4/5; } }