/* ==========================================================================
   CK YAPI — tasarım sistemi
   Sıra: token'lar → reset → tipografi → yardımcılar → bileşenler → bölümler
   Not: Hiçbir yerde gradient, glassmorphism, 50px+ radius veya gölge yok.
   Lüks hissi efektten değil; tipografi, boşluk ve fotoğraf ölçeğinden gelir.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Token'lar
   -------------------------------------------------------------------------- */
:root {
    /* Renk paleti */
    --ck-green:      #779477;
    --ck-green-dark: #4F624F;
    --ck-ink:        #111311;
    --ck-bg:         #F5F4EF;
    --ck-surface:    #E6E5DE;
    --ck-stone:      #EDEBE3;                     /* koyu bölüm yerine sıcak açık yüzey */
    --ck-muted:      #B8B9AD;
    --ck-white:      #FFFFFF;

    /* Türetilmiş */
    --ck-line:       rgba(184, 185, 173, 0.55);   /* ince ayraç */
    --ck-line-soft:  rgba(184, 185, 173, 0.3);
    --ck-line-dark:  rgba(245, 244, 239, 0.16);   /* koyu zeminde ayraç */
    --ck-ink-70:     rgba(17, 19, 17, 0.7);
    --ck-ink-55:     rgba(17, 19, 17, 0.55);
    --ck-ink-40:     rgba(17, 19, 17, 0.4);
    --ck-bg-70:      rgba(245, 244, 239, 0.72);
    --ck-bg-55:      rgba(245, 244, 239, 0.55);

    /* Tipografi — üç rol: display (serif), head (grotesk), body */
    --font-display: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
    --font-head: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Ölçek — hero > editoryal statement > bölüm başlığı > kart başlığı */
    --fs-hero:      clamp(2.875rem, 6vw, 5.5rem);               /* 46 → 88  */
    --fs-statement: clamp(2.375rem, 4.6vw, 4rem);               /* 38 → 64  */
    --fs-section:   clamp(2rem, 4.1vw, 3.5rem);                 /* 32 → 56  */
    --fs-service:   clamp(1.75rem, 2.9vw, 2.5rem);              /* 28 → 40  */
    --fs-sub:       clamp(1.25rem, 1.9vw, 1.75rem);
    --fs-lead:      clamp(1.125rem, 1.35vw, 1.3125rem);         /* 18 → 21  */
    --fs-body:      clamp(0.9375rem, 0.89rem + 0.2vw, 1.0625rem); /* 15 → 17 */
    --fs-small:     0.9375rem;
    --fs-label:     clamp(0.625rem, 0.6rem + 0.12vw, 0.75rem);  /* 10 → 12  */

    /* Ölçü */
    --container:   1400px;
    --gutter:      clamp(1.25rem, 5vw, 5rem);
    --measure:     40rem;   /* gövde metni ~640px */
    --measure-sm:  30rem;
    --radius:      2px;

    /* Dikey ritim — her bölüm bu dörtlüden birini kullanır */
    --section-sm:  clamp(3.25rem, 7vw, 5rem);      /* 52  → 80  */
    --section-md:  clamp(4.5rem, 9vw, 7rem);       /* 72  → 112 */
    --section-lg:  clamp(5rem, 10vw, 8.75rem);     /* 80  → 140 */
    --section-xl:  clamp(6rem, 12vw, 12.5rem);     /* 96  → 200 */

    /* Hareket */
    --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
    --dur:       240ms;
    --dur-fast:  200ms;
    --dur-slow:  620ms;
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 6rem;
}

body {
    margin: 0;
    background: var(--ck-bg);
    color: var(--ck-ink);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.7;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-wrap: break-word;
}

h1, h2, h3, h4 {
    font-family: var(--font-head);
    font-weight: 800;
    margin: 0;
    letter-spacing: -0.025em;
    line-height: 1.04;
    text-wrap: balance;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* Tarayıcı varsayılanı figure'a 40px yan boşluk verir — sıfırlanmalı */
figure, figcaption, dl, dd, blockquote { margin: 0; }

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

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

a {
    color: inherit;
    text-decoration: none;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

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

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

:focus-visible {
    outline: 2px solid var(--ck-green);
    outline-offset: 3px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    background: var(--ck-ink);
    color: var(--ck-bg);
    padding: 0.75rem 1.25rem;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

/* --------------------------------------------------------------------------
   3. Tipografi yardımcıları
   -------------------------------------------------------------------------- */
.eyebrow {
    font-family: var(--font-body);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ck-ink-55);
    margin: 0 0 1.5rem;
    line-height: 1.4;
}
.eyebrow--green { color: var(--ck-green-dark); }
.eyebrow--light { color: var(--ck-bg-55); }

/* Serif display — YALNIZCA büyük editoryal başlıklarda veya başlığın belirli
   kelimelerinde kullanılır. Gövde metninde ve küçük başlıklarda kullanılmaz. */
.t-serif {
    font-family: var(--font-display);
    font-weight: 300;
    font-style: italic;
    letter-spacing: -0.015em;
}
.t-serif--upright { font-style: normal; font-weight: 400; }

.h-hero {
    display: block;
    font-size: var(--fs-hero);
    line-height: 0.94;
    letter-spacing: -0.035em;
}
.h-hero--serif {
    font-family: var(--font-display);
    font-weight: 300;
    font-style: italic;
    letter-spacing: -0.025em;
    line-height: 1;
}

.h-statement {
    font-size: var(--fs-statement);
    line-height: 1.02;
    letter-spacing: -0.03em;
}

.h-section { font-size: var(--fs-section); }

.h-sub {
    font-size: var(--fs-sub);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.18;
}

.lead {
    font-size: var(--fs-lead);
    line-height: 1.6;
    color: var(--ck-ink-70);
    font-weight: 400;
}

.muted { color: var(--ck-ink-55); }

.measure    { max-width: var(--measure); }
.measure-sm { max-width: var(--measure-sm); }

.num {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--ck-green);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

/* Küçük editoryal etiket — kategori, lokasyon, öncesi/sonrası işaretleri */
.label {
    font-family: var(--font-body);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    line-height: 1.4;
}

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Manuel satır kırma yalnızca masaüstünde; mobilde satırlar kendi akışında */
.brk { display: none; }
@media (min-width: 768px) { .brk { display: inline; } }

/* --------------------------------------------------------------------------
   4. Yerleşim
   -------------------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.container--narrow { max-width: 960px; }

.section { padding-block: var(--section-lg); }
.section--sm { padding-block: var(--section-sm); }
.section--md { padding-block: var(--section-md); }
.section--xl { padding-block: var(--section-xl); }
/* Eski ad — mevcut şablonlarla uyum için korunuyor */
.section--tight { padding-block: var(--section-md); }

.section--ink {
    background: var(--ck-ink);
    color: var(--ck-bg);
}
.section--ink .eyebrow { color: var(--ck-bg-55); }
.section--surface { background: var(--ck-surface); }
.section--stone   { background: var(--ck-stone); }

.rule {
    height: 1px;
    background: var(--ck-line);
    border: 0;
    margin: 0;
}

/* Bölüm başlığı — asimetrik: başlık solda, açıklama sağ alt */
.section-head {
    display: grid;
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: end;
    margin-bottom: clamp(2.75rem, 6vw, 5.5rem);
}
@media (min-width: 1024px) {
    .section-head { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
    .section-head--stack { grid-template-columns: minmax(0, 1fr); }
}
.section-head__text { max-width: 46ch; }

/* --------------------------------------------------------------------------
   5. Butonlar / bağlantılar
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    min-height: 50px;
    padding: 0.9rem 1.6rem;
    border-radius: var(--radius);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.9375rem;
    letter-spacing: -0.01em;
    border: 1px solid transparent;
    transition: background-color var(--dur) var(--ease),
                color var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
}
.btn__arrow { transition: transform var(--dur) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--primary {
    /* WCAG AA için --ck-green yerine --ck-green-dark: beyaz metinle 6.6:1 */
    background: var(--ck-green-dark);
    color: var(--ck-white);
}
.btn--primary:hover { background: var(--ck-ink); }

.btn--outline {
    border-color: var(--ck-ink);
    color: var(--ck-ink);
}
.btn--outline:hover {
    background: var(--ck-ink);
    color: var(--ck-bg);
}

.btn--light {
    border-color: var(--ck-line-dark);
    color: var(--ck-bg);
}
.btn--light:hover {
    background: var(--ck-bg);
    color: var(--ck-ink);
    border-color: var(--ck-bg);
}

.btn--sm {
    min-height: 44px;
    padding: 0.6rem 1.1rem;
    font-size: 0.875rem;
}

/* Metin bağlantısı — altı çizgi animasyonu */
.link {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    min-height: 44px;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--ck-ink);
    position: relative;
}
.link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0.85em;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur-fast) var(--ease);
}
.link:hover { color: var(--ck-green-dark); }
.link:hover::after { transform: scaleX(1); }
.link span { transition: transform var(--dur-fast) var(--ease); }
.link:hover span { transform: translateX(4px); }
.link--light { color: var(--ck-bg); }
.link--light:hover { color: var(--ck-white); }

.actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(0.75rem, 2vw, 2rem);
}

/* --------------------------------------------------------------------------
   6. Site header
   -------------------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--ck-bg);
    border-bottom: 1px solid transparent;
    transition: border-color var(--dur) var(--ease);
}
.site-header.is-stuck { border-bottom-color: var(--ck-line); }

.site-header__inner {
    max-width: var(--container);
    margin-inline: auto;
    padding: 0.875rem var(--gutter);
    display: flex;
    align-items: center;
    gap: clamp(1rem, 3vw, 3rem);
}

/* Logo — iki ayrı dosya: açık zeminde header-logo.png (siyah yazı, yatay),
   koyu zeminde footer-logo.png (krem yazı, dikey). Bkz. .site-footer__logo. */
.site-header__logo {
    flex: 0 0 auto;
    display: block;
    padding-block: 0.25rem;
}
.site-header__logo img {
    width: auto;
    height: clamp(30px, 3.4vw, 38px);
}

.site-nav { display: none; margin-inline-start: auto; }
@media (min-width: 1024px) { .site-nav { display: block; } }

.site-nav__list {
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, 2.2vw, 2.25rem);
}

.site-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    min-height: 44px;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--ck-ink);
    position: relative;
    transition: color var(--dur-fast) var(--ease);
}
.site-nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0.55rem;
    width: 100%;
    height: 1px;
    background: var(--ck-green);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur-fast) var(--ease);
}
.site-nav__link:hover { color: var(--ck-green-dark); }
.site-nav__link:hover::after,
.site-nav__link[aria-current="page"]::after { transform: scaleX(1); }

.site-nav__caret {
    width: 6px; height: 6px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg) translateY(-1px);
    transition: transform var(--dur) var(--ease);
}
[aria-expanded="true"] .site-nav__caret { transform: rotate(225deg) translateY(-2px); }

.site-nav__item--has-panel { position: relative; }

.site-nav__panel {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: -1rem;
    min-width: 20rem;
    background: var(--ck-bg);
    border: 1px solid var(--ck-line);
    padding: 0.5rem 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.site-nav__item--has-panel.is-open .site-nav__panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.site-nav__panel a {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.7rem 1.25rem;
    font-size: 0.9375rem;
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.site-nav__panel a:hover,
.site-nav__panel a[aria-current="page"] {
    background: var(--ck-surface);
    color: var(--ck-green-dark);
}
.site-nav__num {
    font-family: var(--font-head);
    font-size: 0.75rem;
    color: var(--ck-green);
    letter-spacing: 0.04em;
}

.site-header__actions {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
@media (min-width: 1024px) { .site-header__actions { margin-inline-start: clamp(1rem, 2vw, 2rem); } }

.site-header__cta { display: none; }
@media (min-width: 480px) { .site-header__cta { display: inline-flex; } }

.nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 44px;
    min-width: 44px;
    padding: 0.5rem 0.25rem;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
}
@media (min-width: 1024px) { .nav-toggle { display: none; } }

.nav-toggle__bars {
    display: grid;
    gap: 5px;
    width: 22px;
}
.nav-toggle__bars span {
    display: block;
    height: 1px;
    background: var(--ck-ink);
    transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
[aria-expanded="true"] .nav-toggle__bars span:first-child { transform: translateY(3px) rotate(45deg); }
[aria-expanded="true"] .nav-toggle__bars span:last-child  { transform: translateY(-3px) rotate(-45deg); }

/* Mobil tam ekran navigasyon */
.mobile-nav {
    position: fixed;
    inset: 0;
    z-index: 99;
    background: var(--ck-bg);
    padding-top: clamp(5rem, 14vh, 7rem);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.mobile-nav[hidden] { display: none; }
.mobile-nav__inner {
    padding: 0 var(--gutter) 3rem;
    max-width: 640px;
}
.mobile-nav__eyebrow { margin-bottom: 0.75rem; }
.mobile-nav__services { border-top: 1px solid var(--ck-line); margin-bottom: 2.5rem; }
.mobile-nav__services a {
    display: grid;
    grid-template-columns: 2rem 1fr auto;
    align-items: center;
    gap: 0.75rem;
    padding: 1.05rem 0;
    border-bottom: 1px solid var(--ck-line);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.125rem;
    letter-spacing: -0.01em;
}
.mobile-nav__num { color: var(--ck-green); font-size: 0.8125rem; }
.mobile-nav__arrow { color: var(--ck-green); }
.mobile-nav__pages { margin-bottom: 2.5rem; }
.mobile-nav__pages a {
    display: block;
    padding: 0.7rem 0;
    font-size: 1.0625rem;
}
.mobile-nav__footer { border-top: 1px solid var(--ck-line); padding-top: 2rem; }
.mobile-nav__contact { margin-top: 0.5rem; font-size: 0.9375rem; color: var(--ck-ink-70); display: flex; align-items: center; gap: 0.5rem; }
.mobile-nav__contact a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    text-decoration: underline;
    text-underline-offset: 3px;
}
body.nav-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   7. Hero (ana sayfa) — görsel dominant, metin kolonu dar ve editoryal
   -------------------------------------------------------------------------- */
.hero {
    padding-block: clamp(2.5rem, 7vh, 5.5rem) clamp(3.5rem, 10vh, 8rem);
    position: relative;
}
.hero__inner {
    display: grid;
    gap: clamp(2.75rem, 6vw, 4rem);
}
@media (min-width: 1024px) {
    .hero__inner {
        /* Görsel kolonu belirgin şekilde baskın */
        grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
        align-items: center;
        gap: clamp(2.5rem, 5vw, 5rem);
    }
}

/* Hero iki kolonlu olduğu için başlık tam genişlik ölçeğinden bir kademe
   küçük ölçeklenir; aksi hâlde masaüstünde satırlar gereksiz yere kırılıyor. */
.hero .h-hero { font-size: clamp(2.625rem, 4.8vw, 4.5rem); }
@media (min-width: 1536px) { .hero .h-hero { font-size: 4.875rem; } }

/* Katmanlı hero başlığı — küçük eyebrow, sonra iki büyük satır */
.hero__kicker {
    display: block;
    font-family: var(--font-body);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ck-green-dark);
    margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
    line-height: 1.4;
}

.hero__title { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.hero__title span { display: block; }
/* İkinci satır serif display: sans satırla karakter farkı yaratır */
.hero__title .h-hero--serif { color: var(--ck-ink); }

.hero__text { margin-bottom: clamp(1.75rem, 4vw, 2.5rem); max-width: 34rem; }

.hero__meta {
    margin-top: clamp(2rem, 5vw, 3.5rem);
    padding-top: 1.25rem;
    border-top: 1px solid var(--ck-line);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    font-size: var(--fs-label);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ck-ink-55);
}

/* Öncesi/sonrası görsel katmanı — desktop'ta container dışına taşar */
.hero__media { position: relative; }
@media (min-width: 1024px) {
    .hero__media {
        margin-right: calc(var(--gutter) * -1);
        margin-left: clamp(0rem, 2vw, 2rem);
    }
}

.hero__frame { position: relative; }
.hero__after {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--ck-surface);
}
@media (min-width: 768px)  { .hero__after { aspect-ratio: 5 / 4; } }
@media (min-width: 1024px) { .hero__after { aspect-ratio: 4 / 3; } }
.hero__after img,
.hero__before img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Küçük "öncesi" karesi — çerçeve/kutu hissi vermeden, sade inset */
.hero__before {
    position: absolute;
    right: clamp(0.75rem, 2vw, 1.5rem);
    bottom: clamp(-2.25rem, -3vw, -1.5rem);
    width: clamp(104px, 22%, 190px);
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--ck-surface);
    outline: 6px solid var(--ck-bg);
}
@media (min-width: 1024px) {
    .hero__before {
        left: clamp(-3.5rem, -3.5vw, -2rem);
        right: auto;
        bottom: clamp(-3rem, -4vw, -2rem);
        outline-width: 10px;
    }
}

/* Öncesi / sonrası etiketleri — küçük, uppercase, editoryal */
.img-tag {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    font-family: var(--font-body);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 0.45rem 0.7rem;
    background: var(--ck-bg-70);
    color: var(--ck-ink);
}
.img-tag--before { padding: 0.35rem 0.5rem; letter-spacing: 0.14em; }

/* Hero görseli açılışta alttan yukarı açılır (clip-path reveal) */
@media (prefers-reduced-motion: no-preference) {
    .hero__after img { animation: ck-reveal 900ms var(--ease) both; }
    .hero__before    { animation: ck-fade 700ms var(--ease) 420ms both; }
}
@keyframes ck-reveal {
    from { clip-path: inset(0 0 100% 0); }
    to   { clip-path: inset(0 0 0 0); }
}
@keyframes ck-fade {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   8. Güven bandı
   -------------------------------------------------------------------------- */
.trust {
    border-block: 1px solid var(--ck-line);
    padding-block: clamp(2rem, 5vh, 3.25rem);
}
.trust__grid {
    display: grid;
    gap: clamp(1.75rem, 4vw, 3rem);
}
@media (min-width: 768px) { .trust__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.trust__title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.8125rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}
.trust__text {
    font-size: var(--fs-small);
    color: var(--ck-ink-70);
    line-height: 1.55;
}
@media (min-width: 768px) {
    .trust__col + .trust__col {
        padding-inline-start: clamp(1.5rem, 3vw, 3rem);
        border-inline-start: 1px solid var(--ck-line-soft);
    }
}

/* --------------------------------------------------------------------------
   9. Before / After
   İnteraktif kaydırıcı YALNIZCA aynı fiziksel mekâna ait doğrulanmış
   çiftlerde kullanılır (bkz. config/projects.php → same_space).
   Doğrulanmamış çiftler yan yana iki ayrı görsel olarak gösterilir.
   -------------------------------------------------------------------------- */
.ba { position: relative; }

/* Proje kimliği — aynı sayfada birden fazla karşılaştırma varsa her çiftin
   bağımsız bir proje olduğunu söyler (bkz. inc/components.php). */
.ba__tag { margin-bottom: 0.875rem; }

.ba__media {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--ck-surface);
    touch-action: pan-y;
    user-select: none;
}
@media (min-width: 768px) { .ba__media { aspect-ratio: 4 / 3; } }
.ba--portrait .ba__media { aspect-ratio: 3 / 4; }
@media (min-width: 768px) { .ba--portrait .ba__media { aspect-ratio: 1 / 1; } }

.ba__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.ba__before-wrap {
    position: absolute;
    inset: 0;
    clip-path: inset(0 calc(100% - var(--ba-pos, 50%)) 0 0);
}

/* İnce dikey çizgi + küçük dairesel handle */
.ba__divider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--ba-pos, 50%);
    width: 1px;
    background: var(--ck-white);
    transform: translateX(-0.5px);
    pointer-events: none;
    z-index: 3;
}
.ba__handle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 34px;
    height: 34px;
    transform: translate(-50%, -50%);
    border: 1px solid var(--ck-white);
    border-radius: 50%;
    background: rgba(17, 19, 17, 0.25);
}
.ba__handle::before,
.ba__handle::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 4px;
    height: 4px;
    border-top: 1px solid var(--ck-white);
    border-right: 1px solid var(--ck-white);
}
.ba__handle::before { left: 9px;  transform: translateY(-50%) rotate(-135deg); }
.ba__handle::after  { right: 9px; transform: translateY(-50%) rotate(45deg); }

/* Native range: erişilebilirlik ve sürükleme için görünmez üst katman */
.ba__range {
    position: absolute;
    inset: 0;
    z-index: 4;
    width: 100%;
    height: 100%;
    margin: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    cursor: ew-resize;
    opacity: 0;
}
/* Thumb bilerek çok uzun: kullanıcı görselin her yerinden sürükleyebilsin.
   .ba__media overflow:hidden olduğu için taşma görünmez. */
.ba__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 44px;
    height: 400px;
    cursor: ew-resize;
}
.ba__range::-moz-range-thumb {
    width: 44px;
    height: 400px;
    border: 0;
    cursor: ew-resize;
}
.ba__range:focus-visible ~ .ba__divider .ba__handle {
    outline: 2px solid var(--ck-green);
    outline-offset: 3px;
}

.ba__labels {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}
.ba__label {
    position: absolute;
    top: 0;
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 0.45rem 0.7rem;
    background: var(--ck-bg-70);
    color: var(--ck-ink);
}
.ba__label--before { left: 0; }
.ba__label--after  { right: 0; }

.ba__caption {
    margin-top: 0.875rem;
    font-size: 0.8125rem;
    color: var(--ck-ink-55);
    letter-spacing: 0.02em;
}
.section--ink .ba__caption { color: var(--ck-bg-55); }

/* JS yoksa: iki görsel yan yana, kontrol gizli */
.no-js .ba__range,
.no-js .ba__divider { display: none; }
.no-js .ba__before-wrap { clip-path: inset(0 50% 0 0); }

/* Doğrulanmamış çift — kaydırıcı yok, iki ayrı kare */
.ba-static__pair { display: grid; gap: clamp(0.5rem, 1.5vw, 1rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ba-static__fig { position: relative; margin: 0; }
.ba-static__media {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--ck-surface);
}
.ba-static__media img { width: 100%; height: 100%; object-fit: cover; }

/* Before/After bölümü — tek büyük proje, görsel dominant */
.ba-section__grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 1024px) {
    .ba-section__grid {
        grid-template-columns: minmax(0, 1.7fr) minmax(0, 0.75fr);
        align-items: end;
    }
}
.ba-section__aside { padding-bottom: clamp(0.5rem, 2vw, 2rem); }
.ba-section__meta {
    font-size: var(--fs-label);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ck-green-dark);
    margin-bottom: 1.25rem;
}

/* --------------------------------------------------------------------------
   10. Hizmetler — tipografik navigasyon listesi
   -------------------------------------------------------------------------- */
.services { position: relative; }
.services__list { border-top: 1px solid var(--ck-line); }

.services__row {
    position: relative;
    border-bottom: 1px solid var(--ck-line);
}
/* Kolonlar satırdaki görünür öğelere göre: numara · görsel · başlık · açıklama · ok
   (açıklama yalnızca 1280px üzerinde görünür, altında grid öğesi değildir) */
.services__link {
    display: grid;
    grid-template-columns: 2.25rem 52px minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(0.75rem, 2vw, 1.5rem);
    padding-block: clamp(1.1rem, 3vw, 2rem);
    transition: color var(--dur) var(--ease);
}
.services__link:hover { color: var(--ck-green-dark); }

.services__num {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
}
.services__title {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: var(--fs-service);
    letter-spacing: -0.03em;
    line-height: 1.08;
}
.services__desc {
    display: none;
    font-size: 0.875rem;
    color: var(--ck-ink-55);
    line-height: 1.5;
}
@media (min-width: 1280px) { .services__desc { display: block; } }

.services__arrow {
    font-family: var(--font-head);
    color: var(--ck-green);
    transition: transform var(--dur) var(--ease);
}
.services__link:hover .services__arrow { transform: translateX(5px); }

/* Mobil: her satırın yanında sabit küçük görsel kırpması */
.services__thumb {
    width: 52px; /* grid kolon genişliğiyle birebir; 768px üzerinde 56px'e çıkar */
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--ck-surface);
    flex: 0 0 auto;
}
.services__thumb img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 768px) {
    .services__thumb { width: 56px; }
    .services__link { grid-template-columns: 3.5rem 56px minmax(0, 1fr) auto; }
}
@media (min-width: 1280px) {
    .services__link { grid-template-columns: 4rem 56px minmax(0, 1fr) minmax(0, 15rem) auto; }
}

/* Desktop: hover'da sağda büyük görsel (crossfade) */
.services__preview { display: none; }
@media (min-width: 1024px) {
    .services__preview {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        width: clamp(260px, 28vw, 420px);
        aspect-ratio: 3 / 4;
        pointer-events: none;
        overflow: hidden;
        background: var(--ck-surface);
        opacity: 0;
        transform: scale(0.985);
        transition: opacity 220ms var(--ease), transform 220ms var(--ease);
        z-index: 2;
    }
    .services__preview.is-visible { opacity: 1; transform: scale(1); }
    /* Görseller üst üste yığılır; yalnızca etkin olan görünür */
    .services__preview img {
        position: absolute;
        inset: 0;
        width: 100%; height: 100%;
        object-fit: cover;
        opacity: 0;
        transition: opacity 220ms var(--ease);
    }
    .services__preview img.is-active { opacity: 1; }

    /* JS hover önizlemeyi devreye aldığında küçük kırpmalar gizlenir */
    .services--has-preview .services__thumb { display: none; }
    .services--has-preview .services__link { grid-template-columns: 4rem minmax(0, 1fr) auto; }
    .services--has-preview .services__row { padding-right: clamp(280px, 30vw, 460px); }
}
@media (min-width: 1280px) {
    .services--has-preview .services__link { grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 13rem) auto; }
}

/* 404 sayfası: yalnızca numara · başlık · ok taşıyan sade varyant.
   Bu kural bilinçli olarak medya sorgularından SONRA gelir ki her genişlikte geçerli olsun. */
.services__link--simple { grid-template-columns: 2.5rem minmax(0, 1fr) auto; }

/* Hizmet listesinin hover görselini konumlandırmak için */
.services__wrap { position: relative; }

/* --------------------------------------------------------------------------
   11. Süreç — editoryal timeline
   -------------------------------------------------------------------------- */
.process { counter-reset: step; }
.process__list { border-top: 1px solid var(--ck-line-dark); }
.section:not(.section--ink) .process__list { border-top-color: var(--ck-line); }

.process__item {
    display: grid;
    gap: 0.35rem clamp(1.25rem, 4vw, 3.5rem);
    grid-template-columns: 3.25rem minmax(0, 1fr);
    padding-block: clamp(1.25rem, 3vw, 2.25rem);
    border-bottom: 1px solid var(--ck-line-dark);
}
.section:not(.section--ink) .process__item { border-bottom-color: var(--ck-line); }
@media (min-width: 768px) {
    .process__item {
        grid-template-columns: 4.5rem minmax(0, 12rem) minmax(0, 1fr);
        align-items: baseline;
    }
}
.process__num {
    font-size: clamp(1.25rem, 2.2vw, 1.75rem);
    font-weight: 700;
    color: var(--ck-green);
    line-height: 1;
}
.section:not(.section--ink) .process__num { color: var(--ck-green-dark); }
.process__title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.8125rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.process__text {
    font-size: var(--fs-small);
    color: rgba(245, 244, 239, 0.7);
    line-height: 1.6;
    grid-column: 2 / -1;
}
.section:not(.section--ink) .process__text { color: var(--ck-ink-70); }
@media (min-width: 768px) {
    .process__text { grid-column: auto; }
}

/* --------------------------------------------------------------------------
   12. Editoryal statement listesi (Neden CK Yapı / süreç kontrolleri)
   Kart yok: büyük numara + ince ayraç + tek cümle.
   -------------------------------------------------------------------------- */
.statements { border-top: 1px solid var(--ck-line); }
.section--ink .statements { border-top-color: var(--ck-line-dark); }

.statement {
    display: grid;
    gap: 0.5rem clamp(1.5rem, 5vw, 5rem);
    grid-template-columns: minmax(0, 1fr);
    padding-block: clamp(1.75rem, 4vw, 2.75rem);
    border-bottom: 1px solid var(--ck-line);
}
.section--ink .statement { border-bottom-color: var(--ck-line-dark); }
@media (min-width: 768px) {
    .statement {
        grid-template-columns: 5rem minmax(0, 0.9fr) minmax(0, 1.1fr);
        align-items: baseline;
    }
}
.statement__no {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(1.125rem, 2vw, 1.5rem);
    letter-spacing: 0.02em;
    color: var(--ck-green-dark);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.section--ink .statement__no { color: var(--ck-green); }
.statement__title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(1.25rem, 2.2vw, 1.75rem);
    letter-spacing: -0.02em;
    line-height: 1.15;
}
.statement__text {
    color: var(--ck-ink-70);
    font-size: var(--fs-small);
    max-width: 44ch;
}
.section--ink .statement__text { color: rgba(245, 244, 239, 0.7); }

/* Dört kolonluk kontrol listesi (süreç sayfası) */
.controls { display: grid; gap: clamp(2rem, 4vw, 3rem); }
@media (min-width: 700px)  { .controls { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .controls { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.control { border-top: 1px solid var(--ck-line); padding-top: 1.25rem; }
.control__no {
    display: block;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.02em;
    color: var(--ck-green-dark);
    font-variant-numeric: tabular-nums;
    margin-bottom: 0.5rem;
}
.section--ink .control__no { color: var(--ck-green); }
.control__title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.0625rem;
    letter-spacing: -0.01em;
    margin-bottom: 0.5rem;
}
.control__text { color: var(--ck-ink-70); font-size: var(--fs-small); }

/* --------------------------------------------------------------------------
   13. Projeler — asimetrik portfolyo
   -------------------------------------------------------------------------- */
.filters {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1rem, 3vw, 2.25rem);
    padding-bottom: 1rem;
    margin-bottom: clamp(2rem, 5vw, 3.5rem);
    border-bottom: 1px solid var(--ck-line);
}
.filters__item {
    position: relative;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ck-ink-55);
    transition: color var(--dur-fast) var(--ease);
}
.filters__item::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0.5rem;
    width: 100%;
    height: 1px;
    background: var(--ck-green);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur-fast) var(--ease);
}
.filters__item:hover { color: var(--ck-ink); }
.filters__item.is-active { color: var(--ck-green-dark); }
.filters__item.is-active::after { transform: scaleX(1); }

.projects-grid {
    display: grid;
    gap: clamp(2rem, 5vw, 4.5rem);
}
@media (min-width: 700px) {
    .projects-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* asimetri: kartlar eşit boyutta değil */
    .projects-grid > *:nth-child(4n+1) { grid-column: span 2; }
    .projects-grid > *:nth-child(4n+1) .project-card__media { aspect-ratio: 16 / 10; }
}
@media (min-width: 1100px) {
    .projects-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    /* 01 geniş landscape · 02 portrait · 03 wide · 04 küçük editoryal */
    .projects-grid > *:nth-child(4n+1) { grid-column: span 12; }
    .projects-grid > *:nth-child(4n+2) { grid-column: span 5; }
    .projects-grid > *:nth-child(4n+3) { grid-column: 7 / span 6; align-self: end; }
    .projects-grid > *:nth-child(4n+4) { grid-column: 2 / span 5; }
    .projects-grid > *:nth-child(4n+1) .project-card__media { aspect-ratio: 21 / 9; }
    .projects-grid > *:nth-child(4n+2) .project-card__media { aspect-ratio: 3 / 4; }
    .projects-grid > *:nth-child(4n+3) .project-card__media { aspect-ratio: 4 / 3; }
    .projects-grid > *:nth-child(4n+4) .project-card__media { aspect-ratio: 1 / 1; }
}

/* Proje kartı — çerçeve yok, görsel dominant, metin az */
.project-card { display: block; }
.project-card__media {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--ck-surface);
    margin-bottom: 1.125rem;
}
.project-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 420ms var(--ease);
}
.project-card:hover .project-card__media img { transform: scale(1.025); }

.project-card__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}
.project-card__label {
    font-family: var(--font-body);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ck-ink-55);
    transition: color var(--dur-fast) var(--ease);
}
.project-card:hover .project-card__label { color: var(--ck-green-dark); }
.project-card__no {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    color: var(--ck-green);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.project-card__title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(1.25rem, 1.8vw, 1.625rem);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-top: 0.5rem;
}
.project-card__summary {
    margin-top: 0.5rem;
    font-size: var(--fs-small);
    color: var(--ck-ink-55);
    line-height: 1.55;
    max-width: 42ch;
}

.projects-empty {
    padding-block: 3rem;
    color: var(--ck-ink-55);
}

/* --------------------------------------------------------------------------
   14. Ankara / bölge listesi
   -------------------------------------------------------------------------- */
.districts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin-top: clamp(1.5rem, 4vw, 2.5rem);
    padding-top: 1.5rem;
    border-top: 1px solid var(--ck-line);
}
.districts li {
    font-size: var(--fs-small);
    color: var(--ck-ink-70);
}
.districts li::after {
    content: "·";
    margin-inline-start: 1.5rem;
    color: var(--ck-muted);
}
.districts li:last-child::after { content: none; }

/* --------------------------------------------------------------------------
   15. Son CTA — koyu yüzey, footer ile tek parça olarak okunur
   -------------------------------------------------------------------------- */
.final-cta { text-align: left; padding-block: var(--section-lg) var(--section-md); }
.final-cta__inner {
    display: grid;
    gap: clamp(2rem, 5vw, 3.5rem);
}
@media (min-width: 900px) {
    .final-cta__inner {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
        /* İki kolon üst kenardan hizalanır: sağ kolon daha uzun olduğu için
           alttan hizalamada sol başlık aşağıda kalıyordu. */
        align-items: start;
    }
}
.final-cta__title {
    font-size: clamp(1.875rem, 3.4vw, 3rem);
    line-height: 1.02;
    letter-spacing: -0.03em;
}
.final-cta__text { color: rgba(245, 244, 239, 0.72); max-width: 42ch; }
.final-cta__note {
    margin-top: 1rem;
    font-size: 0.9375rem;
    color: var(--ck-bg-55);
}
.final-cta__note a {
    text-decoration: underline;
    text-underline-offset: 3px;
}
.final-cta__note a:hover { color: var(--ck-white); }

/* --------------------------------------------------------------------------
   16. İç sayfa başlığı (hizmet / proje / kurumsal)
   -------------------------------------------------------------------------- */
.page-hero { padding-block: clamp(2rem, 5vh, 3.5rem) clamp(3rem, 8vh, 6rem); }
.page-hero__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 1024px) {
    .page-hero__grid {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        align-items: center;
    }
    .page-hero--reverse .page-hero__media { order: -1; }
}
.page-hero__media {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--ck-surface);
}
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero__title { margin-bottom: 1.25rem; }
.page-hero__lead { margin-bottom: 1.75rem; }

/* Hizmet hero varyantları — dört hizmet aynı kompozisyonda görünmez */
@media (min-width: 1024px) {
    /* wide: yatay, geniş yaşam mekânı */
    .page-hero--wide .page-hero__grid { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); }
    .page-hero--wide .page-hero__media { aspect-ratio: 4 / 3; }

    /* panorama: daha geniş, alçak kadraj */
    .page-hero--panorama .page-hero__grid { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); }
    .page-hero--panorama .page-hero__media { aspect-ratio: 16 / 9; }

    /* portrait: dikey editoryal kırpma + küçük detay karesi */
    .page-hero--portrait .page-hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
    .page-hero--portrait .page-hero__media { aspect-ratio: 3 / 4; }

    /* detail: yakın kadraj, malzeme detayı */
    .page-hero--detail .page-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .page-hero--detail .page-hero__media { aspect-ratio: 1 / 1; }
}
/* İkinci küçük kare (portrait / detail varyantlarında) */
.page-hero__stack { position: relative; }
.page-hero__inset {
    display: none;
    position: absolute;
    right: clamp(-2rem, -2vw, -1rem);
    bottom: clamp(-2rem, -2.5vw, -1.25rem);
    width: clamp(120px, 34%, 220px);
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--ck-surface);
    outline: 8px solid var(--ck-bg);
}
.page-hero__inset img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1024px) { .page-hero__inset { display: block; } }

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-size: var(--fs-label);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ck-ink-55);
    padding-top: clamp(1rem, 3vh, 2rem);
}
.breadcrumb a {
    display: inline-flex;
    align-items: center;
    min-height: 24px; /* WCAG 2.5.8 asgari hedef boyutu */
}
.breadcrumb a:hover { color: var(--ck-green-dark); }
.breadcrumb__sep { color: var(--ck-muted); }

/* Metin + liste iki kolon */
.prose-grid { display: grid; gap: clamp(2rem, 5vw, 4.5rem); }
@media (min-width: 1024px) {
    .prose-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}
.prose { max-width: var(--measure); }
.prose p + p { margin-top: 1.15em; }

.scope-list { border-top: 1px solid var(--ck-line); }
.scope-list li {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    gap: 0.75rem;
    padding-block: 0.9rem;
    border-bottom: 1px solid var(--ck-line);
    font-size: var(--fs-small);
}
.scope-list li::before {
    content: "";
    width: 8px;
    height: 1px;
    background: var(--ck-green);
    margin-top: 0.85em;
}

/* Galeri — daha az, daha büyük kare */
.gallery { display: grid; gap: clamp(1rem, 3vw, 2rem); }
@media (min-width: 700px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gallery figure { margin: 0; }
.gallery__media {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--ck-surface);
}
.gallery__media img { width: 100%; height: 100%; object-fit: cover; }
.gallery figcaption {
    margin-top: 0.7rem;
    font-size: 0.8125rem;
    color: var(--ck-ink-55);
}
/* Baskın + detay kurgusu: ilk kare büyük, ikincisi yanında küçük */
@media (min-width: 900px) {
    .gallery--lead { grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.85fr); align-items: start; }
    .gallery--lead > figure:first-child .gallery__media { aspect-ratio: 4 / 3; }
    .gallery--lead > figure:nth-child(2) .gallery__media { aspect-ratio: 3 / 4; }
}

/* Öncesi / sonrası ikili görsel bloğu (proje detay) */
.pair-grid { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); }
@media (min-width: 640px) { .pair-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Tek karşılaştırma (proje detayı): yarım kolonda asılı kalmasın. */
.pair-grid--single { max-width: 720px; }
@media (min-width: 640px) { .pair-grid--single { grid-template-columns: minmax(0, 1fr); } }

/* SSS */
.faq { border-top: 1px solid var(--ck-line); }
.faq__item { border-bottom: 1px solid var(--ck-line); }
.faq__q {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1.5rem;
    gap: 1rem;
    align-items: start;
    text-align: left;
    padding-block: clamp(1rem, 2.5vw, 1.5rem);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
    letter-spacing: -0.015em;
    line-height: 1.35;
    transition: color var(--dur-fast) var(--ease);
}
.faq__q:hover { color: var(--ck-green-dark); }
.faq__sign {
    position: relative;
    width: 14px; height: 14px;
    margin-top: 0.4em;
    flex: 0 0 auto;
    justify-self: end;
}
.faq__sign::before,
.faq__sign::after {
    content: "";
    position: absolute;
    background: var(--ck-green);
    transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.faq__sign::before { top: 50%; left: 0; width: 14px; height: 1px; }
.faq__sign::after  { left: 50%; top: 0; width: 1px; height: 14px; }
[aria-expanded="true"] .faq__sign::after { transform: scaleY(0); }

.faq__a {
    padding-bottom: clamp(1rem, 2.5vw, 1.5rem);
    max-width: 64ch;
    color: var(--ck-ink-70);
    font-size: var(--fs-small);
}
.faq__a[hidden] { display: none; }

/* --------------------------------------------------------------------------
   17. Form — ince çizgi, geniş nefes, minimal işaretler
   -------------------------------------------------------------------------- */
.form-layout { display: grid; gap: clamp(3rem, 7vw, 6rem); }
@media (min-width: 1024px) {
    .form-layout { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
}

.form { max-width: 44rem; }
.form__group { margin-bottom: clamp(2rem, 4vw, 2.75rem); }
.form__legend,
.form__label {
    display: block;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--fs-label);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ck-ink-55);
    margin-bottom: 0.85rem;
}
.form__hint {
    display: block;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 0.8125rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ck-ink-55);
    margin-top: -0.5rem;
    margin-bottom: 0.85rem;
}
.form__req { color: var(--ck-green-dark); }

.form fieldset { border: 0; padding: 0; margin: 0; }
/* Tarayıcı varsayılanını sıfırlayan yukarıdaki kural (element+sınıf) .form__group'un
   alt boşluğunu da eziyordu; hizmet seçimi altındaki satır çizgiye yapışıyordu. */
.form fieldset.form__group { margin-bottom: clamp(2rem, 4vw, 2.75rem); }

.form__input,
.form__select,
.form__textarea {
    width: 100%;
    min-height: 58px;
    padding: 1rem 1.1rem;
    background: var(--ck-white);
    border: 1px solid var(--ck-line);
    border-radius: var(--radius);
    font-size: 1rem;
    line-height: 1.5;
    transition: border-color var(--dur-fast) var(--ease);
}
.form__input::placeholder,
.form__textarea::placeholder { color: var(--ck-ink-40); }
.form__textarea { min-height: 12rem; resize: vertical; line-height: 1.65; }
.form__input:hover,
.form__select:hover,
.form__textarea:hover { border-color: var(--ck-muted); }
.form__input:focus,
.form__select:focus,
.form__textarea:focus {
    border-color: var(--ck-green);
    outline: 1px solid var(--ck-green);
    outline-offset: 0;
}
.form__input[aria-invalid="true"],
.form__textarea[aria-invalid="true"],
.form__select[aria-invalid="true"] { border-color: #9B4A3A; }

/* Select — native ok yerine tasarım sistemine uygun ince işaret */
.form__select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 2.75rem;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--ck-ink) 50%),
        linear-gradient(135deg, var(--ck-ink) 50%, transparent 50%);
    background-position:
        calc(100% - 1.35rem) calc(50% + 1px),
        calc(100% - 1.1rem) calc(50% + 1px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.form__row { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
/* Etiketler farklı satır sayısına düşebildiği için hücreler kolon olarak
   dizilir ve etiket aşağı itilir: iki alanın kutusu hep aynı hizada başlar. */
.form__row > * { display: flex; flex-direction: column; }
.form__row > * > .form__label { margin-top: auto; }
@media (min-width: 640px) { .form__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Hizmet seçimi — radio, pill değil, ince çizgili seçim */
.choice-list {
    display: grid;
    gap: 0;
    border-top: 1px solid var(--ck-line);
}
@media (min-width: 640px) { .choice-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.choice {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-height: 58px;
    padding: 0.85rem 0.25rem;
    border-bottom: 1px solid var(--ck-line);
    cursor: pointer;
    font-size: var(--fs-small);
}
@media (min-width: 640px) {
    .choice:nth-child(odd) { padding-inline-end: 1.5rem; }
    .choice:nth-child(even) { padding-inline-start: 1.5rem; }
}
.choice input {
    position: absolute;
    opacity: 0;
    width: 1px; height: 1px;
}
.choice__mark {
    width: 16px; height: 16px;
    border: 1px solid var(--ck-muted);
    border-radius: 50%;
    flex: 0 0 auto;
    position: relative;
    transition: border-color var(--dur-fast) var(--ease);
}
.choice__mark::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--ck-green-dark);
    transform: scale(0);
    transition: transform 180ms var(--ease);
}
.choice input:checked ~ .choice__mark { border-color: var(--ck-green-dark); }
.choice input:checked ~ .choice__mark::after { transform: scale(1); }
.choice input:focus-visible ~ .choice__mark { outline: 2px solid var(--ck-green); outline-offset: 3px; }
.choice:hover .choice__mark { border-color: var(--ck-ink); }

/* Onay kutusu */
.check {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    min-height: 44px;
    padding-block: 0.5rem;
    cursor: pointer;
    font-size: var(--fs-small);
    color: var(--ck-ink-70);
}
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check__mark {
    width: 16px; height: 16px;
    border: 1px solid var(--ck-muted);
    flex: 0 0 auto;
    margin-top: 0.3rem;
    position: relative;
}
.check__mark::after {
    content: "";
    position: absolute;
    left: 4px; top: 1px;
    width: 6px; height: 10px;
    border-right: 1px solid var(--ck-green-dark);
    border-bottom: 1px solid var(--ck-green-dark);
    transform: rotate(45deg) scale(0);
    transition: transform 180ms var(--ease);
}
.check input:checked ~ .check__mark::after { transform: rotate(45deg) scale(1); }
.check input:checked ~ .check__mark { border-color: var(--ck-green-dark); }
.check input:focus-visible ~ .check__mark { outline: 2px solid var(--ck-green); outline-offset: 3px; }

/* Honeypot — ekranda ve okuyucuda gizli */
.hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px;
    overflow: hidden;
}

.form__error {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    color: #8C3F30;
}

.alert {
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--ck-line);
    border-left: 2px solid var(--ck-green);
    background: var(--ck-white);
    margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}
.alert--error { border-left-color: #8C3F30; }
.alert__title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.0625rem;
    margin-bottom: 0.35rem;
}
.alert ul { margin-top: 0.5rem; }
.alert li {
    font-size: var(--fs-small);
    padding-left: 1rem;
    position: relative;
    color: var(--ck-ink-70);
}
.alert li::before {
    content: "";
    position: absolute;
    left: 0; top: 0.75em;
    width: 6px; height: 1px;
    background: var(--ck-muted);
}

/* İletişim bilgi listesi — doğrudan iletişim okunaklı olmalı */
.contact-list { border-top: 1px solid var(--ck-line); }
.contact-list > div {
    display: grid;
    gap: 0.25rem 1.5rem;
    padding-block: 1.15rem;
    border-bottom: 1px solid var(--ck-line);
}
@media (min-width: 480px) {
    .contact-list > div { grid-template-columns: 7.5rem minmax(0, 1fr); align-items: baseline; }
}
.contact-list dt {
    font-size: var(--fs-label);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ck-ink-55);
}
.contact-list dd { margin: 0; font-size: var(--fs-small); }
.contact-list a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.contact-list a:hover { color: var(--ck-green-dark); }

/* İletişim sayfası: doğrudan iletişim satırları büyütülmüş varyant */
.contact-list--lead dd { font-size: clamp(1.0625rem, 1.6vw, 1.25rem); }
.contact-list--lead dd a { text-decoration-thickness: 1px; }
.contact-list--lead > div { padding-block: 1.4rem; }

/* --------------------------------------------------------------------------
   18. Markalar (hakkımızda)
   -------------------------------------------------------------------------- */
/* Kategori navigasyonu — pill değil, metin navigasyonu */
.brand-nav {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1rem, 3vw, 2rem);
    margin-bottom: clamp(1.5rem, 3vw, 2rem);
}
.brand-nav__item {
    position: relative;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    font-family: var(--font-body);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ck-ink-40);
    transition: color var(--dur-fast) var(--ease);
}
.brand-nav__item::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0.55rem;
    width: 100%;
    height: 1px;
    background: var(--ck-green);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur-fast) var(--ease);
}
.brand-nav__item:hover { color: var(--ck-ink-70); }
.brand-nav__item.is-active { color: var(--ck-green-dark); }
.brand-nav__item.is-active::after { transform: scaleX(1); }

/* Hücre sayısı marka sayısına göre oluşur: son satırdaki hücreler satırı
   doldurur, boş ve yarım çerçeveli hücre kalmaz. Yeni marka eklendiğinde grid
   kendiliğinden genişler. */
.brands {
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid var(--ck-line);
    border-left: 1px solid var(--ck-line);
}
.brands li {
    display: grid;
    place-items: center;
    flex: 1 1 calc(100% / 2);
    padding: clamp(1rem, 3vw, 1.75rem);
    border-right: 1px solid var(--ck-line);
    border-bottom: 1px solid var(--ck-line);
    min-height: 92px;
}
@media (min-width: 640px)  { .brands li { flex-basis: calc(100% / 3); } }
@media (min-width: 1024px) { .brands li { flex-basis: calc(100% / 6); } }
.brands li[hidden] { display: none; }
.brands img {
    max-height: 28px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.45;
    transition: opacity var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.brands li:hover img { opacity: 0.9; filter: grayscale(0); }

/* --------------------------------------------------------------------------
   19. Yaklaşım şeridi (hakkımızda) — dekoratif değil, numaralı anlatım
   -------------------------------------------------------------------------- */
.approach { display: grid; gap: clamp(2rem, 4vw, 3rem); }
@media (min-width: 640px)  { .approach { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .approach { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.approach figure { margin: 0; }
.approach__media {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--ck-surface);
    margin-bottom: 1.1rem;
}
.approach__media img { width: 100%; height: 100%; object-fit: cover; }
.approach figcaption { display: block; }
.approach__head {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--ck-line);
}
.approach__no {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    color: var(--ck-green-dark);
    font-variant-numeric: tabular-nums;
}
.approach__title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.0625rem;
    letter-spacing: -0.01em;
}
.approach__text {
    display: block;
    margin-top: 0.55rem;
    font-size: var(--fs-small);
    color: var(--ck-ink-70);
    line-height: 1.55;
}

/* --------------------------------------------------------------------------
   20. Footer — koyu CTA ile tek yüzey; arada açık bant yok
   -------------------------------------------------------------------------- */
.site-footer {
    background: var(--ck-ink);
    color: var(--ck-bg);
    padding-block: clamp(3rem, 8vh, 5rem) 2rem;
    margin-top: 0; /* CTA koyu olduğunda iki yüzey kesintisiz birleşir */
}
.site-footer .eyebrow { color: rgba(245, 244, 239, 0.5); }

/* Tek blok: marka. CTA butonu footer'dan kaldırıldı (bkz. inc/footer.php). */
.site-footer__top {
    display: grid;
    gap: clamp(2rem, 5vw, 3rem);
    padding-bottom: clamp(2.5rem, 6vw, 4rem);
}
/* Koyu zemin varyantı ayrı dosyadır (footer-logo.png: krem yazı, dikey dizilim).
   Logo renkli olduğu için invert filtresi kullanılmaz — yeşil kemeri bozardı.
   Footer logosu dikey dizilimli, bu yüzden header'dan belirgin daha yüksek
   ölçeklenir (header 30–38px, footer 76–100px). */
.site-footer__logo {
    height: clamp(76px, 8.5vw, 100px);
    width: auto;
    margin-bottom: 1.5rem;
}
.site-footer__claim {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(1.0625rem, 1.8vw, 1.375rem);
    letter-spacing: -0.02em;
    margin-bottom: 0.4rem;
}
.site-footer__tagline { color: rgba(245, 244, 239, 0.6); font-size: var(--fs-small); }

/* Footer'daki iki ince ayraç: navigasyon üstü ve alt satır üstü */
.site-footer__grid {
    display: grid;
    gap: clamp(2rem, 5vw, 3rem);
    padding-block: clamp(2.5rem, 6vw, 3.5rem);
    border-top: 1px solid var(--ck-line-dark);
}
@media (min-width: 640px) { .site-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.site-footer__col li { margin-bottom: 0.25rem; font-size: var(--fs-small); color: rgba(245, 244, 239, 0.75); }
/* Dokunma hedefi en az 44px (mobil) */
.site-footer__col a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    transition: color var(--dur-fast) var(--ease);
}
.site-footer__col a:hover { color: var(--ck-green); }

.site-footer__bottom {
    display: grid;
    gap: 0.5rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--ck-line-dark);
    font-size: 0.8125rem;
    color: rgba(245, 244, 239, 0.5);
}
@media (min-width: 900px) {
    .site-footer__bottom { grid-template-columns: auto 1fr; align-items: baseline; gap: 2rem; }
    .site-footer__region { text-align: right; }
}

/* --------------------------------------------------------------------------
   21. Süreç sayfası — aşama blokları
   -------------------------------------------------------------------------- */
.stage {
    display: grid;
    gap: 1rem clamp(1.5rem, 4vw, 4rem);
    grid-template-columns: minmax(0, 1fr);
    padding-block: clamp(2.25rem, 5vw, 4rem);
    border-top: 1px solid var(--ck-line);
}
.stage:last-child { border-bottom: 1px solid var(--ck-line); }
@media (min-width: 768px) {
    .stage { grid-template-columns: 4rem minmax(0, 1.2fr) minmax(0, 0.8fr); }
}
.stage__no {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    line-height: 1;
}
.stage__title { margin-bottom: 0.75rem; }
.stage__lead { margin-bottom: 1rem; }
.stage__text { color: var(--ck-ink-70); font-size: var(--fs-small); max-width: var(--measure); }
.stage__aside { align-self: start; }

/* --------------------------------------------------------------------------
   22. 404
   -------------------------------------------------------------------------- */
.error-page { padding-block: clamp(4rem, 14vh, 9rem); }
.error-page__code {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(3.5rem, 12vw, 8rem);
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--ck-green-dark);
    margin-bottom: 1.5rem;
}

/* --------------------------------------------------------------------------
   23. Scroll reveal + hareket tercihleri
   -------------------------------------------------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .reveal { opacity: 1; transform: none; }
    .project-card:hover .project-card__media img { transform: none; }
    .hero__after img { clip-path: none; }
}