/* ==========================================================================
   YZC Hukuk Bürosu — tek dosya stil sayfası
   Önceki styles.css + refinements.css + interaction-polish.css +
   final-cleanup.css dosyalarının birleşimi. Katman sırası korunmuştur:
   sonraki bölümler öncekileri bilerek ezer.

   1. Fontlar          2. Değişkenler ve temel
   3. Başlık ve menü   4. Hero
   5. Çalışma alanları 6. Yaklaşım
   7. Ekip             8. İçgörüler
   9. İletişim         10. Footer ve yüzen öğeler
   11. CV diyaloğu     12. Duyarlı düzen
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fontlar — yerel kopya (üçüncü tarafa istek gitmez, KVKK açısından temiz)
   Değişken fontlar sitenin kullandığı ağırlık aralığına daraltıldı.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/dmsans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/dmsans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(fonts/newsreader-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(fonts/newsreader-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   2. Değişkenler ve temel
   -------------------------------------------------------------------------- */
:root {
  --green: #164a42;
  --deep: #0f3d37;
  --green-bright: #145f51;
  --copper: #c9825b;
  --copper2: #e0a27f;
  --copper-light: #e0a27f;
  --copper-ink: #8f5230;
  --paper: #f4f0e8;
  --white: #fffdf8;
  --ink: #133b35;
  --muted: #4e635d;
  --line: rgba(16, 61, 53, .18);
  --paper-lift: #faf7f0;
  --paper-sink: #ebe5da;
  --rule-strong: rgba(16, 61, 53, .30);
  --rule-dark: rgba(224, 162, 127, .24);
  --on-copper: #0a2b26;
  --serif: "Newsreader", Georgia, serif;
  --sans: "DM Sans", sans-serif;
  --ease-yzc: cubic-bezier(.22, .72, .18, 1);
  --person-h: 440px;
  --article-h: 390px;
}
* { box-sizing: border-box }
html { scroll-behavior: smooth; scroll-padding-top: 86px }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip }
a { color: inherit }
.skip { position: fixed; left: 1rem; top: -5rem; z-index: 99; background: white; padding: .7rem 1rem }
.skip:focus { top: 1rem }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0) }

/* Görünürlük animasyonu yalnızca JS devredeyse uygulanır */
.reveal { opacity: 1; transform: none; transition: opacity .65s ease, transform .65s ease }
.has-reveal .reveal { opacity: 0; transform: translateY(18px) }
.has-reveal .reveal.visible { opacity: 1; transform: none }

/* --------------------------------------------------------------------------
   3. Başlık ve menü
   -------------------------------------------------------------------------- */
.site-header { height: 86px; padding: 0 clamp(24px, 7vw, 105px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; background: var(--paper); border-top: 3px solid var(--copper); position: relative; z-index: 20 }
.brand { display: flex; align-items: center; gap: 13px; text-decoration: none; width: max-content }
.brand img { display: block; width: 82px; height: auto }
.brand small { border-left: 1px solid var(--line); padding-left: 13px; font-size: 10px; line-height: 1.25; letter-spacing: .14em; text-transform: uppercase }
.desktop-nav { display: flex; gap: 30px }
.desktop-nav a, .header-contact { font-size: 13px; text-decoration: none }
.desktop-nav a { color: var(--muted) }
.desktop-nav a:hover { color: var(--copper-ink) }
.header-tools { justify-self: end; display: flex; align-items: center; gap: 24px }
.header-contact { position: relative; padding-bottom: 5px; transition: color .22s ease, transform .26s var(--ease-yzc) }
.header-contact::after { content: ""; position: absolute; right: 0; bottom: 0; width: 100%; height: 1px; background: var(--copper); transform-origin: right; transition: width .28s var(--ease-yzc), height .2s ease }
.header-contact span, .line-link span { color: var(--copper) }
.header-contact span { display: inline-block; transition: transform .28s var(--ease-yzc) }
.header-contact:hover { color: var(--green); transform: translateY(-2px) }
.header-contact:focus-visible { color: var(--green); outline: 2px solid var(--copper-ink); outline-offset: 4px }
.header-contact:hover::after, .header-contact:focus-visible::after { width: calc(100% + 10px); height: 2px }
.header-contact:hover span, .header-contact:focus-visible span { transform: translate(4px, -2px) }
.header-contact:active { transform: translateY(0) }
.menu-button, .mobile-menu { display: none }
.language-switcher { display: flex; align-items: center; gap: 3px }
.language-switcher button { min-width: 28px; padding: 5px 4px; border: 0; color: var(--muted); background: transparent; font: 600 10px var(--sans); letter-spacing: .08em; cursor: pointer }
.language-switcher button:hover { color: var(--copper-ink) }
.language-switcher button:focus-visible { color: var(--copper-ink); outline: 2px solid var(--copper-ink); outline-offset: 1px }
.language-switcher button.is-active { color: var(--ink); border-bottom: 1px solid var(--copper) }
.mobile-languages { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line) }

/* Sayfa bölümleri rayı */
.section-rail { position: fixed; z-index: 30; top: 50%; right: 24px; display: grid; gap: 5px; max-height: calc(100svh - 190px); transform: translateY(-50%) }
.section-rail a { position: relative; display: flex; justify-content: flex-end; align-items: center; min-height: 25px; color: inherit; text-decoration: none }
.section-rail i { display: block; width: 20px; height: 1px; background: rgba(15, 61, 55, .72); transition: width .28s var(--ease-yzc), height .28s ease, background .28s ease }
.section-rail span { position: absolute; right: 30px; padding: 4px 8px; color: var(--white); background: rgba(9, 44, 39, .92); font-size: 10px; font-weight: 500; letter-spacing: .04em; white-space: nowrap; opacity: 0; transform: translateX(7px); pointer-events: none; transition: opacity .2s ease, transform .25s var(--ease-yzc) }
.section-rail a:hover span, .section-rail a:focus-visible span { opacity: 1; transform: none }
.section-rail a:hover i, .section-rail a:focus-visible i { width: 28px; background: var(--copper) }
.section-rail a.is-active i { width: 34px; height: 2px; background: var(--copper-ink) }
.section-rail.on-dark i { background: rgba(255, 253, 248, .42) }
.section-rail.on-dark a.is-active i { background: var(--copper2) }

/* --------------------------------------------------------------------------
   4. Hero
   -------------------------------------------------------------------------- */
.hero {
  min-height: clamp(620px, calc(100svh - 86px), 820px);
  padding: clamp(80px, 11vw, 155px) clamp(24px, 7vw, 105px) 65px;
  color: var(--white);
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 850px);
  align-items: end;
  gap: 80px;
  background-color: var(--green);
  background-image:
    linear-gradient(90deg, rgba(15, 61, 55, .98) 0%, rgba(15, 61, 55, .91) 37%, rgba(15, 61, 55, .42) 69%, rgba(15, 61, 55, .16) 100%),
    url("assets/yzc-hero-orantili-vinc-v4.webp");
  background-position: center, center;
  background-size: cover;
}
.hero:after { content: ""; position: absolute; width: 48vw; height: 48vw; border: 1px solid rgba(224, 162, 127, .24); border-radius: 50%; right: -16vw; top: -20vw }
.hero-copy { position: relative; z-index: 1 }
.hero h1, .section-intro h2, .approach h2, .insights h2, .contact h2 { font-family: var(--serif); font-size: clamp(52px, 7vw, 102px); font-weight: 400; line-height: .93; letter-spacing: -.04em; margin: 0 }
.hero h1 { max-width: 850px; font-size: clamp(58px, 7vw, 98px); line-height: 1.02; letter-spacing: -.035em; text-wrap: balance }
.hero h1 span, .section h2 span { color: var(--copper2); font-style: normal }
.hero h1 span { display: block }
.hero-lead { max-width: 54ch; color: rgba(255, 255, 255, .82); font-size: 17px; margin: 38px 0 34px }
.hero-actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap }
.hero .button { min-width: 250px; padding: 18px 24px; font-size: 15px }
.hero .text-link { padding-bottom: 3px; border-bottom: 1px solid rgba(224, 162, 127, .46); color: rgba(255, 255, 255, .85); font-size: 13px; text-decoration: none; transition: transform .24s var(--ease-yzc), color .24s ease, border-color .24s ease }
.hero .text-link:hover, .hero .text-link:focus-visible { color: #fff; border-color: var(--copper2); transform: translateY(-2px) }
.hero .text-link:focus-visible { outline: 2px solid var(--copper2); outline-offset: 4px }

/* Butonlar */
.button { position: relative; display: inline-flex; justify-content: space-between; align-items: center; gap: 50px; text-decoration: none; padding: 16px 20px; min-width: 235px; font-size: 13px; font-weight: 600; transition: background .22s ease, color .22s ease }
.copper { background: var(--copper); color: var(--on-copper) }
.button.copper { color: var(--on-copper) }
.button:hover { background: var(--copper2) }
.button:focus-visible { outline: 2px solid var(--on-copper); outline-offset: 3px }
.button span { display: inline-block; transition: transform .22s var(--ease-yzc) }
.button:hover span, .button:focus-visible span { transform: translateX(4px) }

/* --------------------------------------------------------------------------
   5. Çalışma alanları
   -------------------------------------------------------------------------- */
.section { padding: clamp(90px, 11vw, 155px) clamp(24px, 7vw, 105px) }
.section-intro { display: grid; grid-template-columns: 1.7fr 1fr; gap: 55px; align-items: end; margin-bottom: 80px }
.section-intro h2 { grid-column: 1; font-size: clamp(48px, 5.4vw, 78px) }
.practices { background: var(--paper) }

.practice-system { position: relative; width: min(100%, 920px); max-width: 980px; aspect-ratio: 1.48 / 1; margin: auto; overflow: hidden; background: #cdc3b3; box-shadow: 0 18px 55px rgba(15, 61, 55, .09) }
.practice-main-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(2, 1fr); gap: 1px; height: 100% }
.practice-main-grid button { position: relative; display: block; height: 100%; min-height: 0; padding: 24px 28px; border: 0; overflow: hidden; color: var(--ink); background: #f1ece3; text-align: left; cursor: pointer; transition: background .26s ease, box-shadow .26s ease }
.practice-main-grid button:nth-child(2), .practice-main-grid button:nth-child(3) { background: #e5ddd1 }
.practice-main-grid button:hover, .practice-main-grid button:focus-visible { background: var(--paper-lift); box-shadow: inset 0 0 0 1px rgba(201, 130, 91, .4) }
.practice-main-grid button::after { content: ""; position: absolute; width: 120px; height: 120px; border: 1px solid rgba(201, 130, 91, .22); border-radius: 50%; opacity: 0; transform: scale(.6); transition: opacity .32s ease, transform .5s var(--ease-yzc) }
.practice-main-grid button:nth-child(1)::after { right: -60px; bottom: -60px }
.practice-main-grid button:nth-child(2)::after { left: -60px; bottom: -60px }
.practice-main-grid button:nth-child(3)::after { right: -60px; top: -60px }
.practice-main-grid button:nth-child(4)::after { left: -60px; top: -60px }
.practice-main-grid button:hover::after { opacity: 1; transform: scale(.98) }
.practice-main-grid span { position: absolute; top: 24px; left: 28px; color: var(--copper-ink); font-size: 11px; font-weight: 500; line-height: 1; letter-spacing: .16em }
.practice-main-grid strong { display: block; width: auto; max-width: 18ch; margin: 0 auto; overflow: visible; font-family: var(--sans); font-size: clamp(22px, 1.9vw, 30px); font-weight: 500; line-height: 1.12; letter-spacing: -.025em; text-align: center }
.practice-main-grid i { position: absolute; right: 26px; bottom: 19px; color: var(--copper-ink); font-family: var(--sans); font-style: normal; font-size: 26px; font-weight: 400; line-height: 1; opacity: 1; transition: color .26s ease, transform .34s var(--ease-yzc) }
.practice-main-grid button:hover i, .practice-main-grid button:focus-visible i { color: #7a4526; transform: scale(1.14) }

.practice-detail { position: absolute; inset: 0; z-index: 2; padding: 36px 28px 26px; background: var(--paper-sink); transform-origin: center; animation: map-reveal .5s cubic-bezier(.22, .72, .18, 1) both }
.practice-detail[hidden] { display: none !important }
.practice-detail[data-origin="0"] { transform-origin: 25% 25% }
.practice-detail[data-origin="1"] { transform-origin: 75% 25% }
.practice-detail[data-origin="2"] { transform-origin: 25% 75% }
.practice-detail[data-origin="3"] { transform-origin: 75% 75% }
.practice-detail::before, .practice-detail::after { content: ""; position: absolute; z-index: 1; pointer-events: none; background: rgba(201, 130, 91, .5) }
.practice-detail::before { top: 50%; left: 39%; right: 39%; height: 1px }
.practice-detail::after { top: 41%; bottom: 41%; left: 50%; width: 1px }
@keyframes map-reveal { from { opacity: 0; transform: scale(.72); filter: blur(3px) } 55% { opacity: 1 } to { opacity: 1; transform: scale(1); filter: none } }

.practice-back { position: absolute; z-index: 3; top: 12px; left: 24px; display: inline-flex; align-items: center; min-height: 32px; padding: 6px 10px; border: 1px solid rgba(143, 82, 48, .3); color: var(--copper-ink); background: rgba(251, 248, 242, .92); font-family: var(--sans); font-size: 13px; font-weight: 500; cursor: pointer; transition: color .22s ease, background .22s ease, border-color .22s ease, transform .22s var(--ease-yzc) }
.practice-back:hover { color: var(--deep); background: var(--white); border-color: var(--copper); transform: translateX(-2px) }

.detail-groups { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) 210px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 150px minmax(0, 1fr); gap: 11px; height: 100%; background: transparent }
.detail-group { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; min-width: 0; padding: 0; overflow: hidden; background: rgba(15, 61, 55, .16); border: 1px solid rgba(15, 61, 55, .13); border-radius: 5px; box-shadow: 0 8px 24px rgba(15, 61, 55, .055); opacity: 1; filter: none; animation: none; transition: background .32s ease, border-color .32s ease, box-shadow .32s ease, transform .32s var(--ease-yzc) }
.detail-group.group-1 { grid-area: 1 / 1 }
.detail-group.group-2 { grid-area: 1 / 3 }
.detail-group.group-3 { grid-area: 3 / 1 }
.detail-group.group-4 { grid-area: 3 / 3 }
.detail-group .detail-item { background: var(--paper-lift) }
/* Seçili çeyrek öne çıkar, diğer üçü bir ton geri çekilir.
   Renkler WCAG AA için ölçüldü: soluk başlık 5.1:1, soluk numara 4.7:1. */
.detail-group:not(.is-selected) { border-color: rgba(16, 61, 53, .14); box-shadow: none }
.detail-group:not(.is-selected) .detail-item { background: var(--paper) }
.detail-group:not(.is-selected) .detail-item strong { color: #556862 }
.detail-group:not(.is-selected) .detail-item span { color: #87614c }
.detail-group.is-selected { border-color: var(--copper); box-shadow: 0 12px 30px rgba(143, 82, 48, .13) }
.detail-group.is-selected .detail-item { background: var(--white) }
.detail-group.is-selected .detail-item strong { color: #10312c }

.detail-item { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr); align-items: start; justify-content: space-between; gap: 6px; min-width: 0; min-height: 0; padding: 12px; overflow: hidden; color: #153e37; background: #fbf8f2; border: 0; font-family: var(--sans); font-size: clamp(11px, 1.1vw, 14px); font-weight: 500; line-height: 1.25; letter-spacing: -.01em; animation: none; transition: background .34s var(--ease-yzc), color .34s var(--ease-yzc) }
.detail-item strong, .detail-item span { transition: color .34s var(--ease-yzc) }
.detail-item:hover { color: #153e37; background: #fbf8f2; transform: none }
.detail-item span { position: static; flex: 0 0 auto; align-self: flex-start; color: var(--copper-ink); font-family: var(--sans); font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: .08em }
.detail-item strong { position: static; display: flex; align-items: flex-start; align-self: stretch; width: 100%; min-width: 0; min-height: 0; max-width: none; margin: 0; overflow: hidden; font-family: var(--sans); font-size: clamp(15px, 1.5vw, 20px); font-weight: 500; line-height: 1.08; letter-spacing: -.025em; overflow-wrap: anywhere; word-break: normal }

.detail-core { position: absolute; z-index: 3; top: 50%; left: 50%; width: 210px; height: 150px; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; padding: 1px; color: var(--white); background: #c9825b; box-shadow: 0 14px 34px rgba(9, 44, 39, .24); transform: translate(-50%, -50%); animation: none }
.detail-core button { min-height: 0; padding: 9px; border: 0; color: rgba(255, 255, 255, .84); background: #0f3d37; font-family: var(--sans); font-size: 11.5px; font-weight: 500; line-height: 1.08; letter-spacing: -.015em; cursor: pointer; transition: background .25s ease, color .25s ease }
.detail-core button:hover { color: #fff; background: #145f51 }
.detail-core button.is-selected { color: #173a33; background: #e0a27f }
.detail-core button span { display: inline-block; margin-bottom: 3px; font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .08em }

.practice-main-grid button:focus-visible, .practice-back:focus-visible, .cv-close:focus-visible, .menu-button:focus-visible { outline: 3px solid var(--copper-ink); outline-offset: -3px }
.detail-core button:focus-visible { position: relative; z-index: 5; outline: 3px solid var(--copper2); outline-offset: -3px }

/* --------------------------------------------------------------------------
   6. Yaklaşım
   -------------------------------------------------------------------------- */
.approach { padding-top: 82px; padding-bottom: 82px; gap: 34px; background: var(--green); color: var(--white); display: grid; grid-template-columns: 1fr 1fr }
.approach-statement { grid-column: 1 }
.approach h2 { font-size: clamp(45px, 5.6vw, 76px); line-height: .98 }
.approach-statement h2 { text-wrap: balance }
.approach .line-link { display: inline-flex; align-items: center; gap: 14px; width: max-content; margin-top: 26px; padding: 0 0 6px; border: 0; border-bottom: 1px solid rgba(224, 162, 127, .62); color: rgba(255, 255, 255, .88); background: transparent; font-weight: 500; text-decoration: none; transition: color .22s ease, border-color .22s ease, transform .25s var(--ease-yzc) }
.approach .line-link:hover { color: var(--white); border-color: var(--copper2); transform: translateX(3px) }
.approach .line-link:focus-visible { color: var(--white); border-color: var(--copper2); outline: 2px solid var(--copper2); outline-offset: 4px }
.approach .line-link span { transition: transform .25s var(--ease-yzc) }
.approach .line-link:hover span, .approach .line-link:focus-visible span { color: var(--copper2); transform: translateX(4px) }
.principles { grid-column: 1/-1; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--rule-dark); margin-top: 18px }
.principles div { display: grid; align-content: start; gap: 8px; padding: 25px 30px 0 0; border-right: 1px solid var(--rule-dark) }
.principles div:last-child { border-right: 0 }
.principles span { color: var(--copper2); font-size: 10px }
.principles strong { font-family: var(--serif); font-size: 29px; font-weight: 400 }
.principles small { color: rgba(255, 255, 255, .82) }

/* --------------------------------------------------------------------------
   7. Ekip
   -------------------------------------------------------------------------- */
.team { background: var(--paper) }
.team .section-intro h2 span { color: inherit }
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; align-items: stretch; gap: 1px; background: var(--line); border: 1px solid var(--line) }
.person { position: relative; height: 520px; min-height: 520px; padding: 35px 27px; background: var(--paper-lift); display: flex; flex-direction: column; cursor: pointer; transition: transform .2s ease, background .2s ease }
.person:hover { background: var(--white) }
.person img { flex: 0 0 220px; width: calc(100% + 54px); height: 220px; margin: -35px -27px 24px; object-fit: cover; filter: saturate(.84) contrast(1.03) }
.person:nth-child(1) img { object-position: center 12% }
.person:nth-child(2) img { object-position: center 30% }
.person:nth-child(3) img { object-position: center 4% }
.person:nth-child(4) img { object-position: center 10% }
.person > p { min-height: calc(2 * 1.4em); margin-bottom: 4px; color: var(--copper-ink); font-size: 12px; font-weight: 600; line-height: 1.35; letter-spacing: .1em; text-transform: uppercase }
.person h3 { min-height: 61px; margin: 5px 0 20px; font-family: var(--serif); font-size: 29px; font-weight: 400; line-height: 1.05 }
.person small { min-height: 48px; color: var(--muted); overflow-wrap: break-word; word-break: break-word }
.person > button { z-index: 1; margin-top: auto; padding: 14px 0 0; border: 0; border-top: 1px solid var(--line); color: var(--muted); background: transparent; font: 500 10px var(--sans); text-align: left; cursor: pointer }
.person > button::after { content: ""; position: absolute; z-index: 2; inset: 0 }
.person > button:focus-visible { color: var(--green); outline: 2px solid var(--copper-ink); outline-offset: 4px }

/* --------------------------------------------------------------------------
   8. İçgörüler
   -------------------------------------------------------------------------- */
.insights { background: var(--deep); color: var(--white) }
.insights h2 { line-height: .98 }
.insights-head { display: block; margin-bottom: 70px }
.insights-head h2 { max-width: 900px }
.insights-head h2 span { color: var(--copper2) }
.articles { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: var(--article-h); align-items: stretch; gap: 1px; background: rgba(255, 255, 255, .15) }
.featured, .article { position: relative; height: var(--article-h); padding: 40px; overflow: hidden; border: 0; background: var(--deep); transition: background .28s ease }
.featured::before, .article::before { content: ""; position: absolute; top: 0; left: 0; width: 32px; height: 2px; z-index: 2; background: var(--copper); transition: width .38s ease }
.featured:hover, .article:hover { background: rgba(255, 255, 255, .035) }
.featured:hover::before, .article:hover::before { width: 64px }
.articles p { color: var(--copper2); text-transform: uppercase; font-size: 10px; font-weight: 600; letter-spacing: .12em }
.articles h3 { margin-bottom: 0; color: #fffdf8; font-family: var(--serif); font-size: clamp(28px, 2.7vw, 42px); font-weight: 400; line-height: 1.08; max-width: 600px; text-shadow: 0 1px 18px rgba(0, 0, 0, .14) }
.articles a { position: absolute; right: 35px; bottom: 32px; color: var(--copper2); font-size: 12px; font-weight: 500; line-height: 1.25; letter-spacing: .02em; text-decoration: none; transition: color .2s ease }
.featured:hover a, .article:hover a { color: #fff }

/* --------------------------------------------------------------------------
   9. İletişim
   -------------------------------------------------------------------------- */
.contact { position: relative; overflow: hidden; background: var(--green); color: var(--white); border-top: 1px solid rgba(224, 162, 127, .4); display: grid; grid-template-columns: 1.5fr 1fr; gap: 100px }
.contact > *:not(.contact-mark) { position: relative; z-index: 1 }
.contact h2 { font-size: clamp(55px, 7vw, 95px); line-height: .98 }
.contact-mark { position: absolute; z-index: 0; right: clamp(24px, 7vw, 105px); top: clamp(45px, 8vh, 90px); color: rgba(255, 255, 255, .028); font: 400 clamp(180px, 24vw, 360px)/.8 var(--serif); letter-spacing: -.08em; pointer-events: none; user-select: none }
.contact-main > p:not(.eyebrow) { color: rgba(255, 255, 255, .6); max-width: 620px; margin: 30px 0 }
.contact-actions { display: flex; gap: 12px; flex-wrap: wrap }
.contact-actions .button { min-height: 52px; align-items: center; justify-content: flex-start; gap: 14px }
.whatsapp-cta { justify-content: flex-start; gap: 12px; color: var(--white); background: transparent; border: 1px solid rgba(224, 162, 127, .55) }
.whatsapp-cta:hover { color: var(--white); border-color: var(--copper2); background: rgba(201, 130, 91, .12) }
.whatsapp-cta svg { width: 19px; height: 19px; flex: 0 0 19px; fill: currentColor }
.contact-detail { align-self: end }
.contact-detail div { padding: 23px 0; border-top: 1px solid var(--rule-dark); display: grid; grid-template-columns: 120px 1fr }
.contact-detail small { color: var(--copper2); text-transform: uppercase; letter-spacing: .1em }
.contact-detail a, .contact-detail p, .contact-detail address { font-style: normal; text-decoration: none; margin: 0; color: rgba(255, 255, 255, .78) }
.contact-detail a { display: block; width: max-content; max-width: 100% }
.contact-detail a + a { margin-top: 5px }
.contact-detail .map-link { margin-top: 10px; color: var(--copper2); font-size: 12px; border-bottom: 1px solid rgba(224, 162, 127, .32) }

/* --------------------------------------------------------------------------
   10. Footer ve yüzen öğeler
   -------------------------------------------------------------------------- */
footer { padding: 55px clamp(24px, 7vw, 105px); background: var(--deep); color: var(--white); display: grid; grid-template-columns: 1fr 1fr; gap: 50px; border-top: 1px solid rgba(255, 255, 255, .12) }
.footer-brand { display: flex; gap: 16px; align-items: center }
.footer-brand img { display: block; width: 94px; height: auto }
.footer-brand span { border-left: 1px solid rgba(255, 255, 255, .2); padding-left: 16px; font-size: 10px; text-transform: uppercase; letter-spacing: .12em }
.footer-links { display: flex; justify-content: flex-end; gap: 24px }
.footer-links a { font-size: 12px; text-decoration: none; color: rgba(255, 255, 255, .7) }
.footer-meta { grid-column: 1/-1; display: flex; justify-content: space-between; border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 24px }
.footer-meta p { max-width: 520px; color: rgba(255, 255, 255, .62); font-size: 11px }
.footer-legal { max-width: 46ch; text-wrap: pretty }
.kvkk-link { white-space: nowrap; color: rgba(255, 255, 255, .62); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .22); transition: color .2s ease, border-color .2s ease }
.kvkk-link:hover { color: var(--copper2); border-color: var(--copper2) }

.whatsapp { position: fixed; right: 28px; bottom: 28px; z-index: 30; display: flex; align-items: center; gap: 10px; padding: 13px 17px 13px 14px; color: var(--green); background: var(--white); border: 1px solid var(--rule-strong); font-size: 12px; font-weight: 600; letter-spacing: .02em; text-decoration: none; transition: background .22s ease, border-color .22s ease }
.whatsapp svg { width: 18px; height: 18px; fill: currentColor }
.whatsapp:hover, .whatsapp:focus-visible { color: var(--green); background: var(--paper); border-color: var(--copper-ink) }
.whatsapp.is-contact-visible { opacity: 0; visibility: hidden; transform: translateY(10px); pointer-events: none }

/* --------------------------------------------------------------------------
   11. CV diyaloğu
   -------------------------------------------------------------------------- */
.cv-dialog { width: min(820px, calc(100% - 40px)); max-height: 84vh; padding: 40px 42px 38px; overflow: auto; color: var(--ink); background: var(--paper); border: 1px solid var(--copper); box-shadow: 0 24px 80px rgba(9, 44, 39, .35) }
.cv-dialog::backdrop { background: rgba(9, 44, 39, .78); backdrop-filter: blur(4px) }
.cv-close { position: absolute; top: 15px; right: 18px; border: 0; background: transparent; color: var(--copper); font-size: 30px; cursor: pointer }
.cv-role { margin: 0; color: var(--copper-ink); font-size: 10px; letter-spacing: .13em; text-transform: uppercase }
.cv-name { max-width: 100%; margin: 7px 0 0; font-family: var(--serif); font-size: clamp(38px, 5.2vw, 54px); font-weight: 400; line-height: .96; letter-spacing: -.025em }
.cv-body { display: grid; grid-template-columns: 1.25fr 1.25fr .9fr; gap: 0; margin-top: 26px; color: var(--muted); font-size: 14px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line) }
.cv-section { min-width: 0; padding: 18px 22px 18px 0; border-right: 1px solid var(--line) }
.cv-section + .cv-section { padding-left: 22px }
.cv-section:last-child { padding-right: 0; border-right: 0 }
.cv-section h3 { margin: 0 0 12px; color: var(--copper-ink); font: 600 10px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase }
.cv-section p, .cv-section ul { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.48 }
.cv-section ul { padding: 0; list-style: none }
.cv-section li + li { margin-top: 7px; padding-top: 7px; border-top: 1px solid rgba(15, 61, 55, .1) }
.cv-meta { margin-top: 25px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 12px }
.cv-meta:empty { display: none }

/* --------------------------------------------------------------------------
   11b. Mikro-tipografi — tek etiket ölçeği, tablo rakamları, optik hizalama
   -------------------------------------------------------------------------- */
/* Numara ve etiketlerde sabit genişlikli rakam: sütunlar birbirini tutar */
.practice-main-grid span, .detail-item span, .detail-core button span,
.principles span, .articles p, .person > p, .cv-role,
.contact-detail a[href^="tel"], .footer-meta p {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
/* Dört farklı boyut/ağırlıkta olan küçük etiketler tek ölçeğe indi */
.person > p, .articles p, .cv-role, .contact-detail small {
  font-size: 11px; font-weight: 600; letter-spacing: .14em; line-height: 1.4;
}
/* Büyük serif başlıkların yan payı gövde metniyle optik olarak hizalansın */
.hero h1, .section-intro h2, .approach h2, .insights-head h2, .contact h2 { margin-left: -.02em }
/* Tek kelimelik dul satırları önle */
.hero-lead, .person small, .principles small, .articles h3,
.contact-main > p:not(.eyebrow) { text-wrap: pretty }

/* --------------------------------------------------------------------------
   12. Duyarlı düzen
   -------------------------------------------------------------------------- */

/* Masaüstü: her bölüm bir ekrana oturur */
@media (min-width: 901px) {
  html { scroll-snap-type: y proximity }
  .site-header { position: sticky; top: 0 }
  main > section { min-height: calc(100svh - 86px); scroll-snap-align: start }
  main > .section { padding-top: clamp(38px, 5.2vh, 62px); padding-bottom: clamp(38px, 5.2vh, 62px) }
  .hero { min-height: calc(100svh - 86px); background-position: 58% center }
  .practices, .team, .insights, .contact { display: flex; flex-direction: column; justify-content: center }
  .approach { min-height: auto; align-content: center; padding-top: clamp(70px, 8vh, 96px); padding-bottom: clamp(70px, 8vh, 96px) }
  .principles { margin-top: clamp(44px, 6vh, 68px) }
  .principles div { padding: 18px clamp(24px, 2.3vw, 38px) 18px }
  .principles div:first-child { padding-left: clamp(24px, 2.3vw, 38px) }
  .principles span { display: block; margin-bottom: 4px }
  .section-intro { margin-bottom: clamp(36px, 5vh, 58px) }
  .practices { min-height: calc(100svh - 86px) }
  .practice-system { width: 100%; max-width: none; margin-inline: 0; height: clamp(390px, calc(100svh - 390px), 500px); min-height: 0; aspect-ratio: auto; transition: height .46s var(--ease-yzc) }
  .practice-system.is-open { height: clamp(410px, calc(100svh - 340px), 580px) }
  .practice-detail { display: block; padding: 40px 24px 24px; background: var(--paper-sink); border: 1px solid rgba(15, 61, 55, .18); box-shadow: inset 0 0 0 1px rgba(255, 253, 248, .34) }
  .practice-detail::before, .practice-detail::after { display: none }
  .detail-groups { position: relative; z-index: 1; display: grid; width: min(100%, 1040px); grid-template-columns: minmax(0, 1fr) 230px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 164px minmax(0, 1fr); gap: 14px 18px; height: calc(100% - 16px); margin: 8px auto; background: transparent }
  .detail-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 1px; min-width: 0; min-height: 0; padding: 0; border: 1px solid rgba(15, 61, 55, .24); border-radius: 6px; box-shadow: 0 10px 28px rgba(15, 61, 55, .07); overflow: hidden }
  .detail-group.group-1 { grid-area: 1 / 1 }
  .detail-group.group-2 { grid-area: 1 / 3 }
  .detail-group.group-3 { grid-area: 3 / 1 }
  .detail-group.group-4 { grid-area: 3 / 3 }
  .detail-group.is-selected { border-color: var(--copper); box-shadow: 0 12px 30px rgba(143, 82, 48, .13) }
  .detail-item { min-width: 0; min-height: 0; padding: 8px 10px; overflow: hidden }
  .detail-item strong { max-width: none; font-size: clamp(13px, 1.1vw, 16px); line-height: 1.12 }
  .detail-core { position: absolute; z-index: 2; top: 50%; left: 50%; width: 230px; height: 164px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); transform: translate(-50%, -50%); box-shadow: 0 18px 42px rgba(9, 44, 39, .22) }
  .detail-core button { min-height: 0; padding: 9px; font-size: 12px; line-height: 1.12 }
  .detail-core button span { margin-bottom: 2px }
  .team-grid { width: 100% }
  .team .person { height: var(--person-h); min-height: var(--person-h); padding-bottom: 20px }
  .team .person img { height: 190px; flex-basis: 190px; margin-bottom: 20px }
  .team .person h3 { font-size: 26px; min-height: 0; margin-bottom: 10px }
  .team .person small { min-height: 0; margin-bottom: 14px; font-size: 12px; line-height: 1.45 }
  .team .person > button { margin-top: auto }
  .insights-head { margin-bottom: clamp(28px, 4vh, 48px) }
  .insights-head h2 { font-size: clamp(58px, 6vw, 82px) }
  .featured, .article { height: var(--article-h); min-height: var(--article-h); padding: 34px }
  .articles > article:first-child { padding-left: 0 }
  .articles > article:last-child { padding-right: 0 }
  .featured::before { left: 0 }
  .article::before { left: 34px }
  .articles a { right: auto; left: 34px; bottom: 32px; padding-bottom: 4px; border-bottom: 1px solid rgba(224, 162, 127, .35) }
  .articles > article:first-child a { left: 0 }
  .articles { grid-template-columns: 1.45fr 1fr 1fr }
  .featured h3 { font-size: clamp(34px, 3.2vw, 48px) }
  .article h3 { font-size: clamp(26px, 2.15vw, 34px) }
  footer { scroll-snap-align: end }
  .contact { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: clamp(46px, 6vh, 68px) }
  .contact-main { width: 100%; max-width: 760px; align-self: auto }
  .contact h2 { font-size: clamp(58px, 6.2vw, 88px) }
  .contact-main > p:not(.eyebrow) { max-width: 57ch; margin: 28px 0 30px; font-size: 15px; line-height: 1.65 }
  .contact-detail { display: grid; grid-template-columns: .8fr 1.45fr 1fr; width: 100%; max-width: none; margin: 0; align-self: auto; border-top: 1px solid rgba(255, 255, 255, .18) }
  .contact-detail div { display: block; min-width: 0; padding: 22px clamp(20px, 2.2vw, 34px) 0; border-top: 0; border-right: 1px solid rgba(255, 255, 255, .18) }
  .contact-detail div:first-child { padding-left: 0 }
  .contact-detail div:last-child { padding-right: 0; border-right: 0 }
  .contact-detail small { display: block; margin-bottom: 10px }
}

/* Dile göre başlık ölçeği */
@media (min-width: 701px) {
  html:lang(en) .hero h1 { font-size: clamp(54px, 6.5vw, 91px) }
  html:lang(fr) .hero h1 { max-width: 920px; font-size: clamp(49px, 5.9vw, 82px) }
  html:lang(fr) .approach h2 { font-size: clamp(43px, 5.1vw, 68px) }
}

/* Kısa dizüstü ekranlar: bölüm kompozisyonu bozulmadan sıkışır */
@media (min-width: 901px) and (max-height: 780px) {
  :root { --person-h: 380px; --article-h: 320px }
  main > .section { padding-top: 28px; padding-bottom: 28px }
  .section-intro { margin-bottom: 22px }
  .section-intro h2 { font-size: clamp(45px, 5vw, 64px) }
  .practices { min-height: calc(100svh - 86px) }
  .practice-detail { padding: 40px 24px 24px }
  .detail-groups { width: min(100%, 860px); grid-template-columns: minmax(0, 1fr) 200px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 104px minmax(0, 1fr); gap: 10px 14px }
  .detail-item { padding: 6px 8px; gap: 4px }
  .detail-item span { font-size: 9px }
  .detail-item strong { max-width: none; font-size: 11.5px; line-height: 1.12 }
  .detail-core { width: 200px; height: 104px }
  .detail-core button { padding: 7px; font-size: 10.5px }
  .team .section-intro { margin-bottom: 18px }
  .team .person { padding: 22px }
  .team .person img { width: calc(100% + 44px); height: 160px; flex-basis: 160px; margin: -22px -22px 16px }
  .team .person > p { font-size: 11px }
  .team .person h3 { min-height: 0; font-size: 23px }
  .insights-head { margin-bottom: 22px }
  .featured, .article { padding: 28px }
  .article::before { left: 28px }
  .articles a { left: 28px }
  .articles > article:first-child a { left: 0 }
  .featured h3 { font-size: 34px }
  .article h3 { font-size: 25px }
}

/* Çok geniş ekranlarda ölçüyü sabitle */
@media (min-width: 1560px) {
  .site-header, .hero, main > .section, footer { padding-inline: calc((100vw - 1380px) / 2) }
}

/* Tablet ve altı */
@media (max-width: 900px) {
  .site-header { grid-template-columns: 1fr auto }
  .desktop-nav, .header-contact, .header-tools { display: none }
  .menu-button { display: flex; flex-direction: column; gap: 6px; background: none; border: 0; padding: 10px }
  .menu-button span:not(.sr-only) { width: 25px; height: 1px; background: var(--ink) }
  .mobile-menu { display: none; position: absolute; top: 83px; left: 0; right: 0; background: var(--paper); padding: 25px }
  .mobile-menu.open { display: grid }
  .mobile-menu a { text-decoration: none; border-bottom: 1px solid var(--line); padding: 13px }
  .mobile-languages { display: flex }
  .team-grid { grid-template-columns: 1fr 1fr }
  .approach-statement { grid-column: 1/-1 }
  .articles { grid-template-columns: 1fr; grid-auto-rows: 300px }
  .featured, .article { height: 300px; min-height: 0 }
  .person img { height: 240px }
  .contact { grid-template-columns: 1fr }
  .section-rail { display: none }
}

/* Tablet aralığı: bu aralıkta ne masaüstü ne mobil bloğu çalışıyordu;
   aspect-ratio'dan gelen yükseklik 16 madde + merkez bloğa yetmiyordu.
   Kapalı 2×2 görünüm ve oranı değişmiyor, yalnızca panel açılınca yükseliyor. */
@media (min-width: 701px) and (max-width: 900px) {
  .practice-system { transition: height .46s var(--ease-yzc) }
  .practice-system.is-open { aspect-ratio: auto; height: clamp(556px, 70vw, 580px) }
  .practice-detail { padding: 46px 22px 22px }
  .practice-back { top: 12px; left: 22px; min-height: 28px }
  .detail-groups { grid-template-columns: minmax(0, 1fr) 170px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 112px minmax(0, 1fr); gap: 12px 14px }
  .detail-core { width: 170px; height: 112px }
  .detail-core button { padding: 7px; font-size: 11px }
  .detail-item { padding: 8px; gap: 3px }
  .detail-item span { font-size: 10px }
  .detail-item strong { font-size: 12.5px; line-height: 1.14 }
}

/* Küçük telefonlar */
@media (max-width: 600px) {
  .hero-actions { align-items: flex-start; flex-direction: column }
  .section { padding-top: 85px; padding-bottom: 85px }
  .principles { grid-template-columns: 1fr }
  .principles div { border-right: 0; border-bottom: 1px solid var(--rule-dark); padding-bottom: 24px }
  .principles div:last-child { border-bottom: 0; padding-bottom: 0 }
  .contact { gap: 60px }
  .contact-detail div { grid-template-columns: 1fr; gap: 7px }
  footer { grid-template-columns: 1fr }
  .footer-links { justify-content: flex-start; flex-wrap: wrap }
  .footer-meta { display: block }
}

/* Mobil kompozisyon */
@media (max-width: 700px) {
  html, body { max-width: 100%; overflow-x: clip }
  html { scroll-padding-top: 86px }
  html:lang(fr) .hero h1 { font-size: clamp(34px, 9.4vw, 42px) }
  html:lang(fr) .approach h2 { font-size: clamp(34px, 9.2vw, 38px) }

  .hero {
    min-height: 690px;
    padding: 300px 24px 38px;
    align-items: end;
    background-image: linear-gradient(0deg, rgba(15, 61, 55, .99) 0%, rgba(15, 61, 55, .9) 40%, rgba(15, 61, 55, .18) 78%), url("assets/yzc-hero-orantili-vinc-v4.webp");
    background-position: center, 72% top;
    background-size: cover, auto 360px;
    background-repeat: no-repeat;
  }
  .hero-copy { width: 100%; min-width: 0 }
  .hero h1 { max-width: 100%; font-size: clamp(39px, 10.8vw, 47px); line-height: 1; overflow-wrap: normal }
  .hero-lead { max-width: 34ch; margin: 24px 0; font-size: 14px; line-height: 1.55 }
  .hero-actions { gap: 14px }
  .hero .button { min-width: 215px; padding: 14px 17px }

  .site-header { padding-inline: 24px }
  .section { padding-left: 24px; padding-right: 24px }
  .section-intro { display: block; margin-bottom: 42px }
  .section-intro h2 { max-width: 100%; font-size: 42px; line-height: 1.02; overflow-wrap: anywhere }

  /* Çalışma alanları: seçilen alan ve dört alt başlığı */
  .practices { overflow: hidden }
  .practices .section-intro { width: 100%; min-width: 0 }
  .practice-system.reveal { opacity: 1; transform: none }
  .practice-system { width: 100%; max-width: 100%; min-width: 0; height: 404px; min-height: 404px; margin-inline: auto; aspect-ratio: auto }
  .practice-main-grid, .practice-detail, .detail-groups, .detail-group { max-width: 100%; min-width: 0 }
  .practice-main-grid { width: 100%; height: 404px; min-height: 404px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, 202px) }
  .practice-main-grid button { min-width: 0; width: 100%; height: 202px; padding: 13px }
  .practice-main-grid button span { top: 14px; left: 15px }
  .practice-main-grid button i { right: 15px; bottom: 12px }
  .practice-main-grid strong { overflow-wrap: anywhere }
  .practice-detail { position: absolute; inset: 0; display: block; height: 404px; min-height: 404px; padding: 130px 10px 10px; overflow: hidden; background: var(--paper-sink) }
  .practice-detail::before, .practice-detail::after { display: none }
  .practice-back { top: 9px; left: 11px }
  .detail-core { position: absolute; top: 44px; left: 10px; right: 10px; width: auto; height: 82px; transform: none }
  .detail-core button { min-width: 0; min-height: 0; padding: 7px; font-size: 10px; line-height: 1.05; overflow-wrap: anywhere }
  .detail-core button span { margin-bottom: 2px }
  .detail-groups { display: block; height: 264px; min-height: 0 }
  .detail-group, .detail-group.group-1, .detail-group.group-2, .detail-group.group-3, .detail-group.group-4 { display: none; grid-area: auto; width: 100%; height: 264px; min-height: 264px; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; opacity: 1; filter: none }
  .detail-group.is-selected { display: grid }
  .detail-item { min-height: 0; padding: 12px; font-size: 9px }
  .detail-item strong { max-width: none; font-size: 17px }

  /* Ekip ve yazılar yatay ray olur */
  .team-grid, .articles { display: flex; gap: 14px; scroll-padding-inline: 24px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-inline: contain; scrollbar-width: none; padding: 4px 24px 20px; margin-left: -24px; margin-right: -24px; background: transparent; border: 0 }
  .team-grid::-webkit-scrollbar, .articles::-webkit-scrollbar { display: none }
  .person { flex: 0 0 82vw; max-width: 330px; height: 470px; min-height: 470px; scroll-snap-align: start }
  .person img { height: 205px; flex-basis: 205px }
  .featured, .article { flex: 0 0 84vw; max-width: 340px; height: 300px; min-height: 300px; padding: 28px; scroll-snap-align: start }
  .featured h3, .article h3 { font-size: 28px }
  .featured:hover, .article:hover { transform: translateY(-3px) }
  .insights-head { display: block; margin-bottom: 40px }
  .insights-head h2 { font-size: 41px }

  .approach { padding-top: 72px; padding-bottom: 72px }
  .approach h2 { max-width: 100%; font-size: 39px; line-height: 1.04; overflow-wrap: anywhere }

  .contact-actions { display: grid }
  .contact-actions .button { width: 100% }

  .whatsapp { right: 18px; bottom: 18px; padding: 13px }
  .whatsapp span { display: none }

  .cv-dialog { width: calc(100% - 24px); padding: 34px 22px 26px }
  .cv-name { padding-right: 22px; font-size: clamp(32px, 10vw, 43px); line-height: 1; overflow-wrap: anywhere }
  .cv-body { grid-template-columns: 1fr; margin-top: 22px }
  .cv-section, .cv-section + .cv-section { padding: 16px 0; border-right: 0; border-bottom: 1px solid var(--line) }
  .cv-section:last-child { border-bottom: 0 }
}

/* --------------------------------------------------------------------------
   Hareket azaltma tercihi
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  .reveal, .has-reveal .reveal { opacity: 1; transform: none; transition: none }
  .practice-detail, .detail-group, .detail-item, .detail-item strong, .detail-item span, .detail-core, .featured, .article, .articles a { animation: none; transition: none }
  .button, .button::before, .button span, .hero .text-link { transition: none }
  .button:hover, .button:focus-visible, .button:active { transform: none }
  .header-contact, .header-contact::after, .header-contact span { transition: none }
  .header-contact:hover, .header-contact:focus-visible, .header-contact:active { transform: none }
}
@media (prefers-reduced-motion: reduce) and (min-width: 901px) {
  html { scroll-snap-type: none }
}