/* ==========================================================================
   NICOMEDIA — Stone Project Design & Technics
   --------------------------------------------------------------------------
   Kaynak tasarım: nicomedias.xd (Adobe XD, 1920px artboard'lar)
   Yaklaşım: modern, akış tabanlı CSS
     • Kurallar Flexbox / CSS Grid ile; çift eksenli yerleşimler için Grid,
       tek eksenli diziler için Flexbox kullanıldı.
     • Elemanlar doğal yer kaplar: boyutlar content + padding + gap + margin
       ile belirlenir; position:absolute yalnızca gerçek katman/overlay
       işleri için (marquee, kart overlay'i, proje önizleme, menü, header)
       saklandı.
     • aspect-ratio ile medya kutuları önceden yer ayırır (CLS yok).
     • Tipografi clamp() ile akışkan; aralıklar mantıksal özellikler
       (padding-inline, margin-block, inset-inline...) ile yazıldı.
     • Mobil-öncelikli kırılım noktaları: 40em / 56em / 80em.
   ========================================================================== */

@layer reset, base, layout, components, utilities;

/* ----------------------------------------------------------------- reset -- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }

  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

  body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol {
    margin: 0;
    padding: 0;
  }

  ul[role="list"], ol[role="list"], .clean { list-style: none; }

  img, picture, video, svg { display: block; max-width: 100%; }

  button, input, textarea, select { font: inherit; color: inherit; }

  button { background: none; border: 0; cursor: pointer; }

  a { color: inherit; text-decoration: none; }
  b, strong { font-weight: 700; }

  h1, h2, h3, h4 { font-weight: inherit; font-size: inherit; text-wrap: balance; }
  p { text-wrap: pretty; }

  :focus-visible { outline: 2px solid currentColor; outline-offset: .25em; }
}

/* ------------------------------------------------------------ fontlar ----- */
/* SF Pro Display — webfont (Regular 400 / Medium 500 / Bold 700)
   woff2'ler assets/fonts/ içinde; dosya yoksa tarayıcı yedek yığına düşer. */
@font-face {
  font-family: "SF Pro Display";
  src: url("../assets/fonts/sf-pro-display-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SF Pro Display";
  src: url("../assets/fonts/sf-pro-display-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SF Pro Display";
  src: url("../assets/fonts/sf-pro-display-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Romie — display serif (dosya: assets/fonts/romie-regular.woff2)
   Ağırlık aralığı 400-500: tek dosya hem normal hem medium isteklerini
   karşılar, böylece tarayıcı sahte (synthesized) kalınlık üretmez.
   Lisanslı (trial olmayan) sürüm geldiğinde aynı adla dosyayı değiştirmek yeterli. */
@font-face {
  font-family: "Romie";
  src: url("../assets/fonts/romie-regular.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------- tokens ----- */
@layer base {
  :root {
    /* renkler (XD renk paleti) */
    --ink: #252528;
    --black: #13110c;
    --bg: #f7f7f7;
    --white: #fff;
    --muted: #747274;
    --line: rgba(37, 37, 40, .18);

    /* yazı tipleri ---------------------------------------------------
       SF Pro Text: Apple sistem fontu. Apple cihazlarda -apple-system ile
       gerçek SF Pro Text (400/500/700) kullanılır; diğer platformlarda
       metrik olarak en yakın açık kaynak eşi Inter devreye girer.
       Romie: Claude Type (ticari). Weblog dosyaları assets/fonts/ içine
       eklendiğinde @font-face ile yüklenir; yoksa Bodoni Moda ile devam. */
    --font-sans: "SF Pro Display", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --font-serif: "Romie", "Bodoni Moda", "Playfair Display", Georgia, serif;
    --font-body: var(--font-sans);
    --font-ui: var(--font-sans);
    --font-accent: "Romie", "Bodoni Moda", Georgia, serif;

    /* akışkan tipografi ölçeği (1920px tasarım → clamp) */
    --fs-marquee: clamp(3.6rem, 9vw, 10.8rem);       /* 173 */
    --fs-display: clamp(2.5rem, 5.7vw, 6.85rem);     /* 109 */
    --fs-h1: clamp(2.25rem, 5.6vw, 6.7rem);          /* 107 */
    --fs-h2: clamp(1.9rem, 4.5vw, 5.4rem);           /* 86 */
    --fs-h3: clamp(1.6rem, 3.4vw, 4.05rem);          /* 65 */
    --fs-h4: clamp(1.3rem, 2.15vw, 2.56rem);         /* 41 */
    --fs-h5: clamp(1.15rem, 1.75vw, 2.06rem);        /* 33 */
    --fs-stat: clamp(3.6rem, 6.4vw, 7.65rem);        /* 122 */
    --fs-lead: clamp(1rem, 1.36vw, 1.625rem);        /* 26 */
    --fs-body: clamp(.9375rem, 1vw, 1.1875rem);      /* 19 */
    --fs-sm: clamp(.8125rem, .85vw, 1rem);           /* 16 */
    --fs-xs: .75rem;                                 /* 12 */

    /* ölçü ve boşluklar */
    --maxw: 1920px;
    --gutter: clamp(1.25rem, 7.3vw, 8.75rem);        /* kenar boşluğu 140 */
    --header-h: clamp(4.25rem, 8.3vw, 10rem);        /* 160 */
    --space-2xs: clamp(.5rem, .8vw, .75rem);
    --space-xs: clamp(.75rem, 1.2vw, 1.25rem);
    --space-sm: clamp(.75rem, 1.25vw, 1.4rem);
    --space-md: clamp(1.25rem, 2.6vw, 3rem);
    --space-lg: clamp(2rem, 4vw, 4.5rem);
    --space-xl: clamp(2.5rem, 6.2vw, 7.5rem);           /* bölüm araları */
    --space-2xl: clamp(3.75rem, 9.6vw, 11.5rem);

    /* köşe kesikleri (XD'deki beyaz üçgen overlay'lerin karşılığı) */
    --cut-photo-x: 21%;
    --cut-photo-y: 23%;
    --cut-video-x: 19.5%;
    --cut-video-y: 21.5%;
    --cut-wide-x: 8%;
    --cut-wide-y-top: 39%;
    --cut-wide-y-bottom: 41%;

    --ease: cubic-bezier(.22, .61, .36, 1);
    --dur: .35s;

    /* köşe kesimleri */
    --cut-card: clamp(1.1rem, 1.85vw, 2.15rem);   /* metin kartları: iç boşluktan küçük kalır */
    --cut-form: clamp(1.5rem, 5.9vw, 7.1rem);     /* form kartı köşesi (tasarım: 113px) */
  }

  body {
    background: var(--white);
    color: var(--ink);
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
  }

  ::selection { background: var(--ink); color: var(--white); }
}

/* ------------------------------------------------------------- layout ----- */
@layer layout {
  .container {
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .skip-link {
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 50%;
    translate: -50% -120%;
    z-index: 200;
    background: var(--ink);
    color: var(--white);
    padding: .75rem 1.25rem;
    transition: translate var(--dur) var(--ease);
  }
  .skip-link:focus-visible { translate: -50% 0; }

  /* bölüm başlıkları ------------------------------------------------ */
  .section-head { display: grid; gap: var(--space-sm); }
  .section-head--center { justify-items: center; text-align: center; }
  .section-head--split {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    align-items: end;
    gap: var(--space-xl);
  }
  .section-head--split > p { font-size: var(--fs-sm); line-height: 1.5; max-inline-size: 46ch; }

  .eyebrow {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--fs-sm);
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  .display,
  .title {
    font-family: var(--font-serif);
    font-weight: 500;
    line-height: .98;
    letter-spacing: .002em;
  }
  .display { font-size: var(--fs-display); }
  .display--xl { font-size: var(--fs-h1); }
  .display--lg { font-size: var(--fs-h2); }
  .display--md { font-size: var(--fs-h3); }
  .display--sm { font-size: var(--fs-h4); }

  .lead { font-size: var(--fs-lead); line-height: 1.45; }

  /* vurgulu (ters) kelime */
  .hl {
    background: var(--ink);
    color: var(--white);
    padding-inline: .12em;
    padding-block-end: .02em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
}

/* --------------------------------------------------------- components ----- */
@layer components {

  /* ------------------------------------------------ header --------------- */
  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 90;
    block-size: var(--header-h);
    margin-block-end: calc(-1 * var(--header-h));
    background: transparent;
    transition: background var(--dur) var(--ease), backdrop-filter var(--dur) var(--ease);
  }
  .site-header.is-scrolled {
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(10px);
  }

  .site-header__inner {
    block-size: 100%;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-md);
  }

  .brand img {
    inline-size: clamp(9rem, 15.6vw, 18.75rem);
    block-size: auto;
  }

  .site-header__actions {
    grid-column: 2;
    display: flex;
    align-items: center;
    gap: clamp(1.5rem, 30vw, 36rem);
  }
  .menu-btn { grid-column: 3; justify-self: end; }

  .btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: .6em;
    font-family: var(--font-ui);
    font-weight: 300;
    font-size: var(--fs-sm);
    white-space: nowrap;
  }
  .btn-ghost__ico {
    font-size: 1.15em;
    line-height: 1;
    translate: 0 -.02em;
    transition: translate var(--dur) var(--ease);
  }
  .btn-ghost:hover .btn-ghost__ico { translate: .4em -.02em; }

  .menu-btn {
    display: grid;
    justify-items: center;
    gap: .4em;
    font-family: var(--font-ui);
    font-weight: 300;
    font-size: var(--fs-body);
    line-height: 1;
  }
  .menu-btn i {
    display: block;
    inline-size: 3.8em;
    block-size: 1px;
    background: currentColor;
    transition: scale var(--dur) var(--ease);
  }
  .menu-btn:hover i:first-of-type { scale: 1.06 1; }
  .menu-btn:hover i:last-of-type { scale: .96 1; }
  .menu-btn i + i { margin-block-start: .18em; }

  /* ------------------------------------------------ menu overlay --------- */
  .menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    grid-template-rows: auto 1fr auto;
    background: var(--black);
    color: var(--white);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
  }
  .menu-overlay.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }

  .menu-overlay__bar {
    display: flex;
    justify-content: flex-end;
    padding: var(--space-md) var(--gutter) 0;
  }
  .menu-close {
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    letter-spacing: .12em;
  }
  .menu-close:hover { opacity: .7; }

  .menu-overlay__nav {
    align-self: center;
    justify-self: center;
    display: grid;
    justify-items: center;
    gap: .35em;
    text-align: center;
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(2.25rem, 4.7vw, 5.5rem);
    line-height: 1.1;
  }
  .menu-overlay__nav a { transition: letter-spacing var(--dur) var(--ease), opacity var(--dur) var(--ease); }
  .menu-overlay__nav a:hover { letter-spacing: .06em; opacity: .8; }

  .menu-overlay__foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: 0 var(--gutter) var(--space-md);
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    letter-spacing: .06em;
    opacity: .7;
  }

  /* ------------------------------------------------ medya çerçeveleri --- */
  .media-frame {
    position: relative;
    overflow: hidden;
    background: var(--bg);
  }
  .media-frame > img,
  .media-frame > video {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  /* köşe kesikleri */
  .cut-10 { clip-path: polygon(0 0, 58% 0, 100% 52%, 100% 100%, 0 100%); }
  .cut-photo { clip-path: polygon(var(--cut-photo-x) 0, 100% 0, 100% calc(100% - var(--cut-photo-y)), calc(100% - var(--cut-photo-x)) 100%, 0 100%, 0 var(--cut-photo-y)); }
  .cut-wide { clip-path: polygon(var(--cut-wide-x) 0, 100% 0, 100% calc(100% - var(--cut-wide-y-bottom)), calc(100% - var(--cut-wide-x)) 100%, 0 100%, 0 var(--cut-wide-y-top)); }
  .cut-tl-br { clip-path: polygon(var(--cut-video-x) 0, 100% 0, 100% calc(100% - var(--cut-video-y)), calc(100% - var(--cut-video-x)) 100%, 0 100%, 0 var(--cut-video-y)); }

  /* XD'deki eğik (tilted) fotoğraf kartları: çerçeve kırpar, görsel döner */
  .tilt > img {
    transform: rotate(-4deg) scale(1.32);
    transform-origin: 50% 50%;
  }

  /* ------------------------------------------------ hero (HOME) ---------- */
  .hero {
    position: relative;
    display: grid;
    align-content: space-between;
    gap: var(--space-md);
    min-block-size: min(53vw, 63.5rem);
    padding-block: calc(var(--header-h)) var(--space-sm);
    background: var(--bg);
    overflow: hidden;
  }

  .marquee {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 46.4%;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
  }
  .marquee__track {
    display: flex;
    inline-size: max-content;
    animation: marquee 42s linear infinite;
  }
  .marquee__track span {
    font-family: var(--font-accent);
    font-size: var(--fs-marquee);
    line-height: 1;
    color: var(--black);
    white-space: nowrap;
    padding-inline-end: .22em;
  }
  @keyframes marquee { to { translate: -50% 0; } }

  .hero__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr);
    align-items: start;
    gap: var(--space-md);
  }

  .hero__note {
    display: grid;
    gap: var(--space-xs);
    justify-items: center;
    text-align: center;
    padding-block-start: var(--space-md);
  }
  .hero__note-brand {
    font-size: var(--fs-xs);
    font-weight: 400;
    letter-spacing: .06em;
  }

  .hero__media {
    inline-size: clamp(11rem, 27.9vw, 33.5rem);
    aspect-ratio: 536 / 824;
    justify-self: center;
  }
  .hero__media video { object-position: 52% 50%; }

  .hero__boxes {
    justify-self: start;
    display: grid;
    gap: .2em;
    padding-inline-start: 1.2em;
    border-inline-start: 1px solid var(--ink);
    font-size: clamp(1.1rem, 1.56vw, 1.875rem);
    line-height: 1.36;
    color: var(--muted);
    margin-block-start: var(--space-md);
  }
  .hero__boxes .is-dark { color: var(--white); }
  .hero__boxes .is-dark {
    background: var(--ink);
    justify-self: start;
    padding-inline: .35em .75em;
  }

  .hero__foot {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    gap: var(--space-md);
  }

  .scroll-link {
    display: inline-flex;
    align-items: center;
    gap: .7em;
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
  }
  .scroll-link::before {
    content: "";
    inline-size: 1.9em;
    block-size: 1px;
    background: currentColor;
    flex: none;
  }

  /* ------------------------------------------------ about / 10+ kartı --- */
  .about {
    position: relative;
    padding-block: var(--space-2xl);
  }
  /* dekoratif filigran: gerçek içerik değil, arka plan katmanı */
  .about::before {
    content: "";
    position: absolute;
    inset-block-start: 5%;
    inset-inline-start: 16%;
    inline-size: min(47vw, 56rem);
    aspect-ratio: 900 / 823;
    background: url("../assets/icons/watermark.svg") no-repeat center / contain;
    opacity: .9;
    pointer-events: none;
  }

  .about__grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    align-items: start;
    gap: var(--space-xl);
  }

  .about__title { font-size: var(--fs-display); }

  .stat-card {
    justify-self: end;
    inline-size: min(27.25rem, 100%);
    background: var(--ink);
    color: var(--white);
    padding: clamp(1.25rem, 2.6vw, 2.9rem);
    display: grid;
    gap: var(--space-sm);
  }
  .stat-card__value {
    font-size: var(--fs-stat);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.01em;
  }
  .stat-card__value sup { font-size: .38em; vertical-align: .55em; }
  .stat-card__label { font-size: var(--fs-body); letter-spacing: .04em; }
  .stat-card__text { font-size: var(--fs-lead); line-height: 1.15; margin-block-start: var(--space-sm); }

  /* ------------------------------------------------ showcase (kolaj) ---- */
  .showcase { padding-block-end: var(--space-2xl); }

  .showcase__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--space-md);
    row-gap: var(--space-lg);
  }

  .showcase__photo1 { grid-area: 1 / 1 / 2 / 5; aspect-ratio: 500 / 554; }
  .showcase__quote {
    grid-area: 1 / 5 / 2 / 10;
    align-self: center;
    font-size: var(--fs-h5);
    line-height: 1.25;
    border-inline-start: 1px solid var(--ink);
    padding-inline-start: var(--space-sm);
    max-inline-size: 24ch;
  }
  .showcase__intro {
    grid-area: 3 / 6 / 4 / 11;
    align-self: center;
    display: grid;
    gap: var(--space-sm);
    max-inline-size: 42ch;
  }
  .showcase__intro h3 { font-family: var(--font-serif); font-weight: 500; font-size: var(--fs-h5); }
  .showcase__photo2 {
    grid-area: 2 / 6 / 3 / 13;
    aspect-ratio: 765 / 554;
    margin-block-start: -6.75rem;   /* tasarımdaki satır bindirmesi */
  }
  .showcase__photo3 { grid-area: 3 / 1 / 4 / 6; aspect-ratio: 705 / 554; }
  .showcase__photo4 { grid-area: 4 / 9 / 5 / 13; aspect-ratio: 471 / 596; }
  .showcase__lorem {
    grid-area: 4 / 1 / 5 / 5;
    align-self: center;
    font-size: var(--fs-body);
    line-height: 1.45;
  }
  .showcase__grid { grid-auto-rows: min-content; row-gap: var(--space-lg); }

  /* ------------------------------------------------ projeler (STEP) ----- */
  .projects { position: relative; }
  /* tasarımda proje blokları neredeyse tam genişlikte; blok kendi iç boşluğunu taşır */
  .projects > .container { padding-inline: 0; }
  .projects__block::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: min(47vw, 56rem);
    block-size: 100%;
    background: url("../assets/icons/watermark-step.svg") no-repeat left top / contain;
    pointer-events: none;
  }

  .projects__block {
    position: relative;
    background: var(--bg);
    padding-block: clamp(2.5rem, 5.7vw, 6.8rem);
    padding-inline: clamp(1.25rem, 2.6vw, 3.15rem);
    margin-inline: 0;
    display: grid;
    grid-template-columns: minmax(0, .4fr) minmax(0, 1.25fr) minmax(0, .2fr);
    align-items: start;
    gap: var(--space-md);
  }
  .projects__block + .projects__block { margin-block-start: var(--space-lg); }

  .projects__step {
    font-family: var(--font-ui);
    font-size: var(--fs-h3);
    line-height: 1;
    letter-spacing: .02em;
    white-space: nowrap;
  }

  .projects__list { display: grid; gap: clamp(.6rem, 2.6vw, 3.15rem); }

  .project-row {
    display: flex;
    align-items: baseline;
    gap: clamp(1rem, 2.6vw, 3.4rem);
    inline-size: 100%;
    min-inline-size: 0;
    --row-shift: 0em;
    transform: translateX(var(--row-shift));
    transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
  }
  .project-row__no {
    font-size: var(--fs-lead);
    font-weight: 300;
    min-inline-size: 2.2em;
    color: var(--muted);
    transition: opacity var(--dur) var(--ease);
  }
  .project-row__name {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: var(--fs-h3);
    line-height: 1;
    white-space: nowrap;
  }
  .project-row__arrow {
    font-family: var(--font-ui);
    font-size: var(--fs-h3);
    line-height: 1;
    inline-size: 0;
    opacity: 0;
    overflow: hidden;
    transition: inline-size var(--dur) var(--ease), opacity var(--dur) var(--ease);
  }
  .project-row:hover,
  .project-row:focus-visible {
    --row-shift: .4em;
    color: var(--black);
  }
  .project-row:hover .project-row__no,
  .project-row:focus-visible .project-row__no { opacity: 0; }
  .project-row:hover .project-row__arrow,
  .project-row:focus-visible .project-row__arrow { inline-size: 1.4em; opacity: 1; }

  .projects__aside {
    display: grid;
    gap: var(--space-sm);
    justify-items: start;
    font-size: var(--fs-sm);
    line-height: 1.5;
    max-inline-size: 30ch;
    margin-block-start: var(--space-xs);
  }

  /* hover önizleme kartı: gerçek bir overlay bileşeni */
  .proj-preview {
    position: absolute;
    inset-inline-end: 10%;
    z-index: 5;
    inline-size: min(22.3rem, 32vw);
    background: var(--white);
    padding: .5rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: .5rem;
    box-shadow: 0 18px 45px -22px rgba(19, 17, 12, .35);
    opacity: 0;
    visibility: hidden;
    translate: 0 .75rem;
    transition: opacity var(--dur) var(--ease), translate var(--dur) var(--ease), visibility 0s linear var(--dur);
  }
  .proj-preview.is-visible {
    opacity: 1;
    visibility: visible;
    translate: 0 0;
    transition-delay: 0s;
  }
  .proj-preview__media {
    grid-column: 1 / -1;
    aspect-ratio: 348 / 264;
  }
  .proj-preview__year { font-family: var(--font-ui); font-size: var(--fs-h3); line-height: .9; align-self: end; }
  .proj-preview__meta { display: grid; gap: .15em; align-content: end; }
  .proj-preview__loc { font-style: italic; font-size: var(--fs-xs); }
  .proj-preview__title { font-size: var(--fs-body); }

  .projects { position: relative; }
  /* tasarımda proje blokları neredeyse tam genişlikte; blok kendi iç boşluğunu taşır */
  .projects > .container { padding-inline: 0; }

  /* ------------------------------------------------ hizmetler / video --- */
  .services-intro { padding-block: clamp(2rem, 4vw, 4.9rem) var(--space-xl); }

  .services-intro .lead { max-inline-size: 62ch; margin-inline: auto; }

  .services-intro__media {
    margin-block-start: var(--space-xl);
    aspect-ratio: 1457 / 820;
  }

  .feature-card {
    position: absolute;
    inset-inline-start: 50%;
    translate: -50% 0;
    inset-block-start: 16%;
    z-index: 2;
    inline-size: min(23.5rem, 44%);
    background: rgba(255, 255, 255, .95);
    padding: clamp(1.4rem, 2.4vw, 2.8rem);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-sm);
  }
  .feature-card__title {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: var(--fs-h4);
    line-height: 1;
  }
  .feature-card__no { font-family: var(--font-serif); font-size: var(--fs-lead); }
  .feature-card__text { grid-column: 1 / -1; font-size: var(--fs-sm); line-height: 1.5; max-inline-size: 34ch; }
  .feature-card__media { grid-column: 1 / -1; inline-size: min(10.7rem, 60%); aspect-ratio: 171 / 264; margin-inline: auto; }

  /* ------------------------------------------------ duvar tipleri ------- */
  .walls {
    position: relative;
    background: var(--bg);
    padding-block: clamp(6rem, 11.2vw, 13.4rem) clamp(2.5rem, 4.9vw, 5.9rem);
  }
  .walls::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: min(47vw, 56rem);
    aspect-ratio: 903 / 825;
    background: url("../assets/icons/watermark-step.svg") no-repeat left top / contain;
    pointer-events: none;
  }
  .walls > .container { position: relative; }

  .walls__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1.25rem, 2.6vw, 2.6rem);
    margin-block-start: clamp(3rem, 9.9vw, 11.9rem);
  }
  .wall-card { display: grid; gap: .6rem; }
  .wall-card__media { aspect-ratio: 379 / 544; }
  .wall-card__media img { transition: transform 1s var(--ease); }
  .wall-card:hover .wall-card__media img { transform: scale(1.06); }
  .wall-card__kicker { font-style: italic; font-size: var(--fs-body); }
  .wall-card__name { font-size: clamp(1.15rem, 1.62vw, 1.94rem); font-weight: 400; }

  .walls__more { margin-block-start: var(--space-xl); display: flex; justify-content: flex-end; }

  /* duvar tipleri sayfası */
  .walls-hero { padding-block-end: var(--space-lg); }
  .walls--page {
    padding-block: var(--space-xl) clamp(2.5rem, 4.9vw, 5.9rem);
    margin-block-start: var(--space-lg);
  }
  .walls__grid--page {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.5rem, 3.4vw, 3.4rem) clamp(1.5rem, 2.6vw, 2.6rem);
  }
  .walls__grid--page .wall-card { gap: .75rem; }
  .walls__grid--page .wall-card__media { aspect-ratio: 4 / 3; }
  .walls__grid--page .wall-card__media img { block-size: 100%; object-fit: cover; }

  .link-arrow {
    display: inline-flex;
    align-items: center;
    gap: .7em;
    font-size: var(--fs-body);
    border-block-end: 1px solid transparent;
    padding-block-end: .15em;
    transition: gap var(--dur) var(--ease), border-color var(--dur) var(--ease);
  }
  .link-arrow::before {
    content: "";
    inline-size: 1.9em;
    block-size: 1px;
    background: currentColor;
    flex: none;
  }
  .link-arrow:hover { gap: 1.1em; border-color: currentColor; }

  .link-rule {
    display: inline-flex;
    align-items: center;
    gap: .9em;
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: var(--fs-h5);
  }
  .link-rule::before { content: ""; inline-size: 2px; block-size: 1.6em; background: var(--ink); }
  .link-rule:hover { opacity: .65; }

  /* ------------------------------------------------ iletişim / form ----- */
  .contact { padding-block: clamp(4rem, 9vw, 10.75rem) 0; }

  .contact__steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.25rem, 2.7vw, 2.6rem);
    margin-block-start: var(--space-xl);
  }

  .step-card {
    background: var(--bg);
    padding: clamp(1.25rem, 2.1vw, 2.5rem);
    display: grid;
    align-content: start;
    gap: var(--space-sm);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-card)), calc(100% - var(--cut-card)) 100%, 0 100%);
  }
  .step-card__title { font-weight: 500; font-size: var(--fs-body); }
  .step-card__links { display: grid; gap: .2em; font-size: var(--fs-lead); font-weight: 500; }
  .step-card__links a:hover { text-decoration: underline; text-underline-offset: .18em; }
  .step-card__text { font-size: var(--fs-body); line-height: 1.45; }

  .divider {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-block: var(--space-lg);
    font-size: var(--fs-lead);
    color: var(--muted);
  }
  .divider::before,
  .divider::after { content: ""; block-size: 1px; background: var(--ink); flex: 1; }

  .form-title { font-size: var(--fs-h1); }
  .contact__head { justify-items: center; }
  .contact__head .display { justify-self: start; }

  .form-wrap {
    position: relative;
    margin-block-start: var(--space-xl);
    margin-inline: auto;
    inline-size: min(52.9rem, 100%);
    background: var(--bg);
    padding: clamp(1.5rem, 4vw, 4.5rem) clamp(1.25rem, 4vw, 4.5rem) clamp(2rem, 5vw, 5.5rem);
    display: grid;
    gap: var(--space-md);
    justify-items: center;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-form)), calc(100% - var(--cut-form)) 100%, 0 100%);
  }
  /* dekoratif filigran (arka plan katmanı) */
  .form-wrap::before {
    content: "";
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    inline-size: 40%;
    aspect-ratio: 327 / 299;
    background: url("../assets/icons/ornament-form.svg") no-repeat left bottom / contain;
    pointer-events: none;
  }

  .form-legal {
    max-inline-size: 46ch;
    text-align: center;
    font-size: var(--fs-body);
    line-height: 1.45;
  }
  .form-legal a { text-decoration: underline; text-underline-offset: .18em; }

  .cta-form {
    inline-size: 100%;
    display: grid;
    gap: var(--space-sm);
  }

  .field {
    display: grid;
    grid-template-columns: minmax(7rem, 1fr) minmax(0, 2.1fr);
    align-items: center;
    gap: var(--space-md);
  }
  .field__label { font-weight: 500; font-size: var(--fs-body); }
  .field input,
  .field textarea {
    inline-size: 100%;
    min-inline-size: 0;
    background: var(--white);
    border: 0;
    padding: 1.1em 1.4em;
    font-weight: 500;
    font-size: var(--fs-body);
    transition: box-shadow var(--dur) var(--ease);
  }
  .field input::placeholder,
  .field textarea::placeholder { color: rgba(37, 37, 40, .38); }
  .field input:focus-visible,
  .field textarea:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ink); }
  .field textarea { min-block-size: 12rem; resize: vertical; }

  .cta-form__submit {
    justify-self: end;
    margin-inline-end: 12%;
    background: var(--ink);
    color: var(--white);
    padding: 1em 3.5em;
    font-weight: 500;
    font-size: var(--fs-body);
    transition: background var(--dur) var(--ease);
  }
  .cta-form__submit:hover { background: var(--black); }
  .cta-form__submit[disabled] { opacity: .6; cursor: default; }

  .social-block { display: grid; gap: .4em; margin-block-start: var(--space-xl); }
  .social-block__title { font-size: var(--fs-lead); }
  .social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1.4em;
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: var(--fs-h4);
  }
  .social-links a:hover { opacity: .6; }

  /* ------------------------------------------------ footer ------------- */
  .site-footer {
    background: var(--bg);
    padding-block: clamp(2.5rem, 4.7vw, 5.6rem) clamp(2rem, 5.3vw, 6.3rem);
    margin-block-start: var(--space-2xl);
  }

  .footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr) minmax(0, .98fr);
    gap: var(--space-lg) var(--space-md);
    align-items: start;
  }

  .footer__brand {
    display: grid;
    gap: var(--space-md);
    justify-items: center;
    text-align: center;
    padding-inline-start: clamp(0rem, 5.2vw, 6.2rem);
  }
  .footer__brand img { inline-size: clamp(14rem, 21.8vw, 26.2rem); block-size: auto; }
  .footer__brand p { white-space: nowrap; font-size: var(--fs-sm); }

  .footer__col { display: grid; gap: var(--space-sm); align-content: start; }
  .footer__title {
    font-size: var(--fs-xs);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .footer__nav-list { display: grid; gap: .22em; }
  .footer__nav-list a {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(1.4rem, 2vw, 2.3rem);
    line-height: 1.15;
    display: inline-flex;
    align-items: center;
    gap: .5em;
  }
  .footer__nav-list a::before {
    content: "";
    inline-size: .9em;
    block-size: 1px;
    background: currentColor;
    opacity: 0;
    transition: opacity var(--dur) var(--ease);
  }
  .footer__nav-list a:hover::before,
  .footer__nav-list li:first-child a::before { opacity: 1; }

  .footer__contact { display: block; font-size: var(--fs-sm); line-height: 1.55; }
  .footer__col + .footer__col { gap: var(--space-sm); }
  .footer__contact a:hover { text-decoration: underline; text-underline-offset: .18em; }

  .footer__lang { display: flex; gap: .6em; font-family: var(--font-serif); font-weight: 500; font-size: var(--fs-lead); }
  .footer__lang button { font: inherit; opacity: .45; }
  .footer__lang button[aria-pressed="true"] { opacity: 1; }

  .footer__bottom {
    margin-block-start: var(--space-lg);
    display: grid;
    gap: .5em;
    font-size: var(--fs-body);
  }
  .footer__legal { display: flex; flex-wrap: wrap; justify-content: center; gap: .5em 1.2em; }
  .footer__legal a:hover { text-decoration: underline; text-underline-offset: .18em; }

  /* ------------------------------------------------ alt sayfa hero'ları */
  .page-hero {
    position: relative;
    background: var(--bg);
    padding-block: calc(var(--header-h) + var(--space-md)) var(--space-xl);
    overflow: hidden;
  }

  .page-hero--video { padding-block: 0; min-block-size: min(50.6vw, 60.75rem); }

  /* iletişim sayfası */
  .contact-hero { padding-block: calc(var(--header-h) + var(--space-lg)) 0; }
  .contact-hero .contact__head { margin-block-end: 0; }
  .contact-details { padding-block: 0 var(--space-2xl); }
  .contact-details__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.5fr);
    gap: var(--space-lg) var(--space-md);
    align-items: start;
  }
  .contact-details__grid > .eyebrow { grid-column: 1 / -1; }
  .contact-details__col { display: grid; gap: .55rem; }
  .contact-details__value {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(1rem, 1.2vw, 1.44rem);
    line-height: 1.25;
  }
  .contact-details__value a { transition: opacity var(--dur) var(--ease); }
  .contact-details__value a:hover { opacity: .6; }
  .contact-details .social-links { font-size: clamp(1rem, 1.15vw, 1.375rem); display: block; }
  .contact-details__col--address .contact-details__value {
    font-size: clamp(.9375rem, 1vw, 1.1875rem);
    line-height: 1.35;
  }
  .contact-details .social-links a { margin-inline-end: .5em; }
  .page-about .site-header {
    background: linear-gradient(to bottom, var(--bg) clamp(3rem, 5.1vw, 6.125rem), transparent clamp(3rem, 5.1vw, 6.125rem));
  }
  .page-about .site-header.is-scrolled { background: rgba(255, 255, 255, .9); }

  .page-hero__title {
    grid-area: title;
    font-family: var(--font-accent);
    font-weight: 400;
    font-size: clamp(2.75rem, 7.5vw, 9rem);
    line-height: 1;
    color: var(--bg);
    text-shadow: 0 3px 3px rgba(0, 0, 0, .16);
    margin-block-end: var(--space-md);
  }
  .page-hero__bg {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }
  .page-hero__inner {
    position: relative;
    z-index: 1;
    min-block-size: inherit;
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, .55fr) minmax(0, 1fr);
    grid-template-areas:
      "title title title"
      "portrait . text"
      "portrait . card";
    align-items: start;
    gap: var(--space-lg);
    padding-block: calc(var(--header-h) + var(--space-2xs)) var(--space-xl);
  }
  .page-hero__portrait { grid-area: portrait; }
  .page-hero__text { grid-area: text; align-self: start; }
  .page-hero__card { grid-area: card; align-self: end; justify-self: start; }

  .page-hero__portrait { aspect-ratio: 395 / 703; inline-size: min(24.7rem, 100%); }
  .page-hero__text { display: grid; gap: var(--space-md); padding-block-start: var(--space-md); }
  .page-hero__text p { font-size: var(--fs-lead); line-height: 1.45; max-inline-size: 30ch; }
  .page-hero__card { aspect-ratio: 506 / 284; inline-size: min(31.6rem, 100%); }

  /* hakkımızda: deneyim bölümü */
  .experience { padding-block: var(--space-2xl); }
  .experience__grid {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
    gap: var(--space-xl) var(--space-lg);
    align-items: start;
  }
  .experience__title { font-size: var(--fs-h2); }
  .experience__photo { aspect-ratio: 605 / 726; margin-block-start: var(--space-lg); }
  .experience__col { display: grid; gap: var(--space-lg); }
  .experience__photo--square { aspect-ratio: 1; }

  /* hakkımızda: timelapse */
  .timelapse { padding-block-end: var(--space-2xl); }
  .timelapse__title { font-size: var(--fs-h2); }
  .timelapse__media { aspect-ratio: 16 / 9; margin-block-start: var(--space-lg); }
  .media-full { inline-size: 100%; }

  /* hizmetlerimiz hero */
  .services-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: var(--space-lg);
    align-items: center;
  }
  .services-hero__text { display: grid; gap: var(--space-sm); justify-items: start; }
  .services-hero__title { font-family: var(--font-accent); font-weight: 400; font-size: clamp(2rem, 4.1vw, 4.94rem); line-height: 1.05; }
  .services-hero__text p { max-inline-size: 34ch; }
  .services-hero__media { aspect-ratio: 967 / 542; }

  /* hizmetlerimiz: tam genişlik görsel + kart */
  .services-band { position: relative; margin-block: var(--space-xl); }
  .services-band__media { aspect-ratio: 1920 / 1116; }
  .service-card {
    position: absolute;
    inset-inline-end: var(--gutter);
    inset-block: auto 6%;
    z-index: 2;
    inline-size: min(26rem, 38%);
    background: var(--bg);
    padding: clamp(1.5rem, 3vw, 3.3rem);
    display: grid;
    gap: var(--space-sm);
    align-content: start;
  }
  .service-card__title { font-family: var(--font-accent); font-weight: 400; font-size: clamp(1.6rem, 2.6vw, 3.125rem); line-height: 1.05; }
  .service-card__list { display: grid; gap: .2em; font-size: var(--fs-body); }

  /* hizmetlerimiz: değerler */
  .values { padding-block: var(--space-2xl); }
  .values__grid {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.25fr);
    gap: var(--space-xl) var(--space-lg);
    align-items: start;
  }
  .values__title { font-size: var(--fs-h3); }
  .values__photo { grid-row: span 2; aspect-ratio: 623 / 887; margin-block-start: var(--space-lg); }
  .values__col { display: grid; gap: var(--space-md); }
  .values__item { border-block-end: 1px solid #e3e3e3; }
  .values__item:first-child { border-block-start: 1px solid #e3e3e3; }
  .values__toggle {
    all: unset;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    inline-size: 100%;
    cursor: pointer;
    font-family: var(--font-accent);
    font-weight: 400;
    font-size: clamp(1.25rem, 1.62vw, 1.95rem);
    line-height: 1.2;
    padding-block: clamp(.8rem, 1.4vw, 1.7rem);
    box-sizing: border-box;
  }
  .values__sign {
    position: relative;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    flex: none;
  }
  .values__sign::before,
  .values__sign::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-start: 50%;
    block-size: 1px;
    background: var(--ink);
    transition: rotate var(--dur) var(--ease), opacity var(--dur) var(--ease);
  }
  .values__sign::after { rotate: 90deg; }
  .values__item.is-open .values__sign::after { rotate: 90deg; opacity: 0; }
  .values__item dd {
    font-size: var(--fs-body);
    line-height: 1.45;
    max-inline-size: 52ch;
    padding-block-end: clamp(1rem, 1.6vw, 1.9rem);
  }
  .values__item:not(.is-open) dd { display: none; }
  .values__tags {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6em var(--space-lg);
    font-size: var(--fs-lead);
  }
  .values__tags li { display: flex; gap: .7em; align-items: baseline; }
  .values__tags li::before {
    content: "";
    inline-size: .42em;
    block-size: .34em;
    background: var(--black);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    flex: none;
    translate: 0 -.1em;
  }

  .wide-media { margin-block-end: var(--space-2xl); }
  .wide-media .media-frame { aspect-ratio: 1306 / 665; }

  /* hakkımızda: form + görsel */
  .contact--split .contact__grid {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: var(--space-lg);
    align-items: start;
  }
  .contact--split .form-wrap { margin-inline: 0; inline-size: 100%; }
  .contact__photo { aspect-ratio: 689 / 1033; }

  /* hizmetlerimiz: form + heykel görseli yan yana */
  .contact--services { padding-block: clamp(3rem, 6vw, 7.2rem) 0; }
  .contact--services .contact__grid {
    display: grid;
    grid-template-columns: minmax(0, .84fr) minmax(0, 1fr);
    gap: var(--space-lg);
    align-items: start;
  }
  .contact__left { display: grid; gap: var(--space-md); }
  .contact--services .form-title {
    text-align: left;
    padding-inline-start: 0;
    font-size: var(--fs-h3);
  }
  .contact__right {
    display: grid;
    gap: var(--space-xl);
    margin-block-start: calc(-1 * clamp(3rem, 9.4vw, 11.2rem));
  }
  .contact__media { aspect-ratio: 1163 / 592; }
  .contact--services .social-block { text-align: right; }
  .contact--services .social-links { display: block; }
  .social-links a { margin-inline-end: .6em; }
  .contact--services .form-wrap { padding: clamp(1.5rem, 3vw, 3.4rem); }
  .contact--services .cta-form { display: grid; }
  .contact--services .form-legal { order: 3; margin-block-start: var(--space-sm); }
  .contact--services .cta-form__submit { order: 4; justify-self: start; }

  /* ------------------------------------------------ video kontrolleri --- */
  .media-frame { position: relative; }
  .play-toggle {
    position: absolute;
    inset-block-end: var(--space-sm);
    inset-inline-end: var(--space-sm);
    z-index: 3;
    opacity: 0;
    transition: opacity var(--dur) var(--ease), background var(--dur) var(--ease), scale var(--dur) var(--ease);
    inline-size: 3.25rem;
    block-size: 3.25rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .8);
    background: rgba(19, 17, 12, .3);
    color: var(--white);
    transition: background var(--dur) var(--ease), scale var(--dur) var(--ease);
  }
  .media-frame:hover .play-toggle,
  .play-toggle:focus-visible { opacity: 1; }
  .play-toggle:hover { background: rgba(19, 17, 12, .6); scale: 1.06; }
  .play-toggle svg { inline-size: 1.1rem; block-size: 1.1rem; fill: currentColor; }
}

/* ---------------------------------------------------------- utilities ---- */
@layer utilities {
  .visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .reveal { opacity: 0; translate: 0 2rem; transition: opacity .8s var(--ease), translate .8s var(--ease); }
  .reveal.is-in { opacity: 1; translate: 0 0; }
}

/* ========================================================================
   Kırılım noktaları  (mobil-öncelikli akış: geniş ekrandan daralırken
   Grid/Flex kolonları yeniden düzenlenir)
   ======================================================================== */
@media (max-width: 80em) {              /* < 1280px */
  .projects__block { grid-template-columns: minmax(0, .45fr) minmax(0, 1.1fr); }
  .projects__aside { grid-column: 1 / -1; max-inline-size: 60ch; }
  .project-row { flex-wrap: wrap; row-gap: .1em; }
  .project-row__name { white-space: normal; }
  .footer__grid { grid-template-columns: minmax(0, 1.6fr) 1fr 1fr; }
  .footer__lang-block { grid-column: 3; }
}

@media (max-width: 64em) {              /* < 1024px */
  .hero { min-block-size: 0; }
  .hero__grid { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .hero__note { max-inline-size: none; padding-block-start: 0; }
  .hero__boxes { justify-self: center; text-align: start; margin-block-start: var(--space-md); }
  .hero__media { inline-size: min(70vw, 30rem); }
  .marquee { inset-block-start: 30%; }

  .about__grid { grid-template-columns: 1fr; }
  .stat-card { justify-self: start; }

  .showcase__grid { row-gap: var(--space-lg); }
  .showcase__photo1 { grid-column: 1 / span 7; }
  .showcase__quote { grid-column: 8 / span 5; }
  .showcase__intro { grid-column: 5 / span 8; }
  .showcase__photo2 { grid-column: 6 / span 7; }
  .showcase__photo3 { grid-column: 1 / span 8; }
  .showcase__photo4 { grid-column: 7 / span 6; }
  .showcase__lorem { grid-column: 1 / span 7; }

  .values__grid,
  .experience__grid,
  .services-hero__grid,
  .contact--split .contact__grid,
  .contact--services .contact__grid,
  .section-head--split,
  .page-hero__inner { grid-template-columns: 1fr; }

  .page-hero__inner {
    grid-template-areas:
      "title"
      "portrait"
      "text"
      "card";
  }
  .page-hero__title { margin-block-end: 0; }
  .page-hero__card { justify-self: start; }

  .contact__right { margin-block-start: 0; }
  .contact--services .social-block { text-align: left; }
  .contact--services .social-links { justify-content: flex-start; }

  .values__photo { grid-row: auto; }
  .page-hero__text { padding-block-start: 0; }
  .page-hero__card { justify-self: start; }
  .section-head--split { gap: var(--space-md); }

  .contact__steps { grid-template-columns: 1fr 1fr; }
  .contact-details__grid { grid-template-columns: 1fr 1fr; }
  .contact-details__col--address { grid-column: span 1; }
  .walls__grid { grid-template-columns: repeat(2, 1fr); }
  .services-band .service-card {
    position: static;
    inline-size: min(26rem, 100%);
    margin: var(--space-md) auto 0;
  }
  .feature-card {
    position: static;
    translate: none;
    inline-size: min(23.5rem, 100%);
    margin: var(--space-md) auto 0;
  }
}

@media (max-width: 40em) {              /* < 640px */
  .site-header__actions { gap: 1rem; }
  .btn-ghost { font-size: var(--fs-xs); }
  .brand img { inline-size: 8rem; }

  .hero__foot { flex-direction: column; align-items: center; gap: var(--space-sm); }
  .hero__boxes { font-size: 1.25rem; }

  .showcase__grid { grid-template-columns: 1fr; }
  .showcase__grid > * { grid-column: 1 / -1 !important; }

  .projects__block { grid-template-columns: 1fr; }
  .projects__aside { grid-column: auto; }
  .project-row { flex-wrap: wrap; row-gap: .1em; }
  .project-row__name { font-size: 1.9rem; white-space: normal; }
  .proj-preview { display: none; }        /* dokunmatikte önizleme yok */

  .contact__steps { grid-template-columns: 1fr; }
  .contact-details__grid { grid-template-columns: 1fr; }
  .contact-details .social-links { white-space: normal; }
  .walls__grid { grid-template-columns: repeat(2, 1fr); }

  .feature-card {
    position: static;
    inline-size: 100%;
    background: var(--white);
  }
  .services-intro__media { aspect-ratio: auto; }
  .values__tags { grid-template-columns: 1fr; }

  .field { grid-template-columns: 1fr; gap: var(--space-xs); }
  .cta-form__submit { justify-self: stretch; margin-inline-end: 0; text-align: center; }

  .footer__grid { grid-template-columns: 1fr; }
  .footer__lang-block { grid-column: auto; }
}

/* masaüstü hizaları: iletişim başlıkları tasarımdaki ofsetlerde durur */
@media (min-width: 64.01em) {
  .contact__head .display { padding-inline-start: clamp(0rem, 11.5vw, 13.75rem); }
  .form-title { padding-inline-start: clamp(0rem, 18.6vw, 22.25rem); }
  /* hizmetlerimiz: form başlığı yarım kolonda durur, girinti almaz */
  .contact--services .form-title { padding-inline-start: 0; }
  .contact--services .social-links { white-space: nowrap; }
}

/* hareket azaltma tercihi */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .marquee__track { animation: none; }
  html { scroll-behavior: auto; }
}

/* köşesi kesik çerçevelerde oynat düğmesi ortada durur (kesikten kaçınır) */
.cut-tl-br > .play-toggle {
  inset-inline-end: auto;
  inset-inline-start: 50%;
  translate: -50% 0;
}