/* =====================================================================
   Boztoprak Group — tasarım sistemi ve sayfa görünümleri (tek dosya; framework yok).
   Kuzey yıldızı: "Blokların Arası" — monogram iki köşeli bloğun arasındaki boşluktur (Docs/DESIGN.md).
   Kurumsal kimlik (Docs/DESIGN.md §2): renk ve yazı tipi değerleri şimdilik ilk tasarımdan taşınmıştır, müşteri kimliği gelince güncellenecek:
   - Renkler YALNIZ: #85764E altın, #030505 siyah, #231F20 ikinci koyu, beyaz, kâğıt (#F7F6F1; altının tonunda,
     kroma 0,006), tonsuz griler + şeffaflık varyantları. Marka dışı tek istisna: form hata tonu (#F0B860 / #8A5A00).
   - Gradyan, gölge, backdrop-filter, cam, parlama, gradyan metin YOK.
   - Altın küçük metin YALNIZ #030505 üstünde (4,57:1); diğer zeminlerde yalnız büyük metin, çizgi, ikon, kenarlık.
   - Tek aile: adineue PRO (Regular + Bold), yerelden.
   CSP: satır içi stil yok; öğe başı değerler sınıflarla ya da site.js'ten CSSOM ile verilir.
   Hareket: yalnız transform, opacity, clip-path, stroke-dashoffset. prefers-reduced-motion: reduce → hareket yok.
   ===================================================================== */

@font-face {
    font-family: "adineue PRO";
    src: url("../fonts/adineue-pro.woff2") format("woff2");
    font-weight: 1 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "adineue PRO";
    src: url("../fonts/adineue-pro-bold.woff2") format("woff2");
    font-weight: 501 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Renk (kimlik) */
    --altin: #85764E;
    --zemin: #030505;
    --yuzey: #231F20;
    --beyaz: #FFFFFF;
    --kagit: #F7F6F1;
    --metin: #2A2A2A;
    --soluk: #5C5C5C;
    --gri-acik: #E6E6E6;
    --gri-govde: #CCCCCC;
    --gri-soluk: #A6A6A6;
    --kenar-acik: #8A8A8A;
    --kenar-koyu: #7A7A7A;
    --cizgi-acik: rgba(3, 5, 5, 0.12);
    --cizgi-koyu: rgba(255, 255, 255, 0.14);
    --cizgi-altin: rgba(133, 118, 78, 0.4);
    --perde: rgba(3, 5, 5, 0.55);
    --perde-koyu: rgba(3, 5, 5, 0.72);
    --uyari: #F0B860;      /* koyu zeminde form hatası (marka dışı tek istisna) */
    --uyari-acik: #8A5A00; /* açık zeminde form hatası */

    /* Tipografi */
    --font: "adineue PRO", "Helvetica Neue", Arial, sans-serif;
    --t-etiket: 0.8125rem;
    --t-kucuk: 0.9375rem;
    --t-govde: clamp(1rem, 0.35vw + 0.92rem, 1.125rem);
    --t-lead: clamp(1.25rem, 1.6vw, 1.5rem);
    --t-baslik3: clamp(1.5rem, 2.2vw, 2rem);
    --t-baslik2: clamp(2.5rem, 4.6vw, 4rem);
    --t-display: clamp(3.5rem, 9vw, 10rem);
    --t-rakam: clamp(4rem, 10vw, 10.5rem);

    /* Ölçü */
    --kenar: clamp(20px, 5vw, 72px);
    --genislik: 1440px;
    --hat: max(var(--kenar), calc((100% - var(--genislik)) / 2));
    --bolum: clamp(96px, 14vh, 184px);
    --ust-yukseklik: 88px;
    --ust-kompakt: 64px;

    /* Hareket */
    --kolay: cubic-bezier(0.25, 1, 0.5, 1);       /* ease-out-quart */
    --kolay-expo: cubic-bezier(0.16, 1, 0.3, 1);  /* ease-out-expo */
    --kolay-kubik: cubic-bezier(0.33, 1, 0.68, 1); /* ease-out-cubic (Ken Burns) */

    /* Katman */
    --z-yapiskan: 20;
    --z-ust: 30;
    --z-kenar: 35;
    --z-panel: 50;
    --z-atla: 60;
    --z-kapi: 70;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    background: var(--kagit);
    color-scheme: light;
    scroll-padding-top: calc(var(--ust-kompakt) + 16px);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }

    @view-transition {
        navigation: auto;
    }

    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation-duration: 0.35s;
        animation-timing-function: var(--kolay);
    }
}

html.kilitli {
    overflow: hidden;
}

body {
    margin: 0;
    font-family: var(--font);
    font-size: var(--t-govde);
    line-height: 1.6;
    letter-spacing: 0.005em;
    color: var(--metin);
    background: var(--kagit);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-kerning: normal;
    overflow-x: clip;
}

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

img {
    height: auto;
}

a {
    color: inherit;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

h1, h2, h3, h4 {
    margin: 0;
    font-weight: 400;
    color: var(--zemin);
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

p {
    margin: 0;
    text-wrap: pretty;
}

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

address {
    font-style: normal;
}

figure {
    margin: 0;
}

button {
    font: inherit;
    color: inherit;
}

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

main:focus,
section:focus,
h1:focus,
h2:focus {
    outline: none;
}

::selection {
    background: var(--altin);
    color: var(--zemin);
}

[hidden] {
    display: none !important;
}

.gizli-sembol {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.gorunmez {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.ikon {
    width: 1.25em;
    height: 1.25em;
    flex: none;
}

.atla {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: var(--z-atla);
    padding: 14px 20px;
    background: var(--altin);
    color: var(--zemin);
    font-weight: 700;
    text-decoration: none;
    transform: translateY(-160%);
}

.atla:focus-visible {
    transform: none;
    outline-color: var(--zemin);
}

/* ---------------------------------------------------------------------
   Kap ve ortak bölüm yapısı
   --------------------------------------------------------------------- */
.kap {
    width: 100%;
    max-width: calc(var(--genislik) + 2 * var(--kenar));
    margin-inline: auto;
    padding-inline: var(--kenar);
}

.bolum {
    position: relative;
    padding-block: var(--bolum);
}

.bolum-koyu {
    background: var(--zemin);
    color: var(--gri-govde);
    line-height: 1.7;
    letter-spacing: 0.012em;
}

.bolum-koyu h1,
.bolum-koyu h2,
.bolum-koyu h3 {
    color: var(--beyaz);
}

.bolum-beyaz {
    background: var(--beyaz);
}

.bolum-kagit {
    background: var(--kagit);
}

/* Koyu bölümün üst kenarında monogramın kol–çıkıntı çentiğinden gelen 45° pah basamağı ("kat"). */
.pah-ust {
    --pah: clamp(18px, 2.4vw, 32px);
    margin-top: calc(-1 * var(--pah));
    padding-top: calc(var(--bolum) + var(--pah));
    clip-path: polygon(0 var(--pah), 61% var(--pah), calc(61% + var(--pah)) 0, 100% 0, 100% 100%, 0 100%);
}

.baslik2 {
    font-size: var(--t-baslik2);
    line-height: 1.02;
    letter-spacing: -0.025em;
}

.baslik3 {
    font-size: var(--t-baslik3);
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.lead {
    font-size: var(--t-lead);
    line-height: 1.45;
    letter-spacing: -0.005em;
}

.etiket {
    font-size: var(--t-etiket);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 1.4;
}

.metin-akis > * + * {
    margin-top: 1.1em;
}

.metin-akis {
    max-width: 66ch;
}

.altin-cizgi {
    display: block;
    width: 64px;
    height: 1px;
    background: var(--altin);
}

/* ---------------------------------------------------------------------
   Düğmeler ve bağlantılar
   --------------------------------------------------------------------- */
.dugme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 52px;
    padding: 0 28px;
    border: 1px solid transparent;
    border-radius: 0;
    font-size: var(--t-kucuk);
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s var(--kolay);
}

.dugme .ikon {
    width: 20px;
    height: 20px;
    transition: transform 0.25s var(--kolay);
}

.dugme:active {
    transform: scale(0.98);
}

.dugme-birincil {
    background: var(--altin);
    color: var(--zemin);
}

.dugme-birincil:hover {
    background: var(--altin);
    border-color: var(--zemin);
}

.bolum-koyu .dugme-birincil:hover,
.hero .dugme-birincil:hover {
    border-color: var(--beyaz);
}

.dugme-cizgi {
    background: transparent;
    color: var(--zemin);
    border-color: var(--zemin);
}

.bolum-koyu .dugme-cizgi,
.hero .dugme-cizgi,
.cerez .dugme-cizgi,
.hata-sahne .dugme-cizgi,
.sayfa-bant .dugme-cizgi,
.proje-hero .dugme-cizgi,
.baglanti-sayfa .dugme-cizgi {
    color: var(--beyaz);
    border-color: rgba(255, 255, 255, 0.5);
}

.dugme-cizgi:hover {
    border-color: var(--altin);
}

.dugme[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}

.dugme[disabled]:active {
    transform: none;
}

@media (hover: hover) {
    .dugme:hover .ikon,
    .metin-baglanti:hover .ikon {
        transform: translateX(4px);
    }
}

.metin-baglanti {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    font-size: var(--t-kucuk);
    letter-spacing: 0.04em;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    align-self: flex-start;
}

.metin-baglanti .ikon {
    width: 20px;
    height: 20px;
    transition: transform 0.25s var(--kolay);
}

.metin-baglanti:hover {
    border-bottom-color: var(--altin);
}

/* ---------------------------------------------------------------------
   Üst çubuk (header)
   --------------------------------------------------------------------- */
.ust {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: var(--z-ust);
    color: var(--beyaz);
    transition: transform 0.3s var(--kolay);
}

.ust::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--kagit);
    border-bottom: 1px solid var(--cizgi-acik);
    opacity: 0;
}

html[data-ust="acik"] .ust {
    color: var(--zemin);
}

html[data-ust="acik"] .ust::before {
    opacity: 1;
}

html.ust-gizli .ust {
    transform: translateY(-100%);
}

.ust-ic {
    position: relative;
    display: flex;
    align-items: center;
    gap: clamp(16px, 2.4vw, 40px);
    height: var(--ust-yukseklik);
    padding-inline: var(--hat);
    transition: height 0s;
}

html[data-ust="acik"] .ust-ic {
    height: var(--ust-kompakt);
}

/* Logo plakası. Kurumsal kimlik kılavuzu (Logo Kullanım) logoyu yalnız düz #030505 ya da beyaz zeminde gösterir; fotoğraf
   üstüne doğrudan basılmaz. Altın logo hero görselinin üstünde zeminle çamurlaşıyordu: logo, üst kenardan sarkan düz siyah
   bir bloğun üstünde durur. Logo ortak hatta kalır (negatif sol boşluk = plaka iç boşluğu); koyu zeminli sayfalarda plaka
   zeminle birleşir. Kompakt çubukta (kâğıt zemin) plaka kalkar. */
.ust-logo {
    --plaka: clamp(14px, 1.6vw, 22px);
    position: relative;
    display: flex;
    align-items: center;
    align-self: stretch;
    margin-right: auto;
    margin-left: calc(var(--plaka) * -1);
    padding-inline: var(--plaka);
    min-height: 44px;
    background: var(--zemin);
}

html[data-ust="acik"] .ust-logo {
    margin-left: 0;
    padding-inline: 0;
    background: none;
}

.ust-logo-tam {
    width: clamp(180px, 17vw, 236px);
    height: auto;
}

.ust-logo-mono {
    display: none;
    width: 40px;
    height: auto;
    color: var(--altin);
}

html[data-ust="acik"] .ust-logo-tam {
    display: none;
}

html[data-ust="acik"] .ust-logo-mono {
    display: block;
}

.ust-nav ul {
    display: flex;
    gap: clamp(20px, 2.4vw, 40px);
}

.ust-nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: var(--t-etiket);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
}

.ust-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8px;
    height: 1px;
    background: var(--altin);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s var(--kolay);
}

.ust-nav a:hover::after,
.ust-nav a[aria-current="page"]::after {
    transform: scaleX(1);
}

.ust-tel {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    font-size: var(--t-kucuk);
    letter-spacing: 0.06em;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}

/* Fotoğraf üstünde altın ikon zeminde kaybolur: saydam çubukta metinle aynı renk (beyaz), kâğıt çubukta altın. */
.ust-tel .ikon {
    width: 18px;
    height: 18px;
    color: currentColor;
}

html[data-ust="acik"] .ust-tel .ikon {
    color: var(--altin);
}

.menu-dugme {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 7px;
    width: 48px;
    height: 48px;
    margin-right: -10px;
    padding: 0 10px;
    background: none;
    border: 0;
    cursor: pointer;
}

.menu-cizgi {
    display: block;
    height: 2px;
    width: 28px;
    background: currentColor;
    transition: transform 0.3s var(--kolay);
    transform-origin: right;
}

.menu-cizgi + .menu-cizgi {
    width: 28px;
    transform: scaleX(0.6);
}

.menu-dugme:hover .menu-cizgi + .menu-cizgi {
    transform: scaleX(1);
}

@media (max-width: 1099px) {
    .ust-nav {
        display: none;
    }

    .ust-tel span {
        display: none;
    }

    .ust-tel {
        justify-content: center;
        width: 44px;
    }
}

@media (max-width: 1099px) {
    /* JS yoksa menü düğmesi çalışmaz: bağlantılar yatay kaydırılabilir satır olarak görünür. */
    html:not(.js) .ust-nav {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        overflow-x: auto;
        padding: 0 var(--kenar);
        background: var(--zemin);
    }

    html:not(.js) .menu-dugme {
        display: none;
    }
}

/* ---------------------------------------------------------------------
   Paneller: menü paneli ve çekmeceler (ortak)
   --------------------------------------------------------------------- */
.panel {
    position: fixed;
    inset: 0;
    z-index: var(--z-panel);
}

.panel-perde {
    position: absolute;
    inset: 0;
    background: var(--perde-koyu);
    opacity: 0;
    transition: opacity 0.4s var(--kolay);
}

.panel-govde {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    width: min(100%, 46vw);
    min-width: min(100%, 520px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    transition: transform 0.4s var(--kolay-expo);
}

.panel.acik .panel-perde {
    opacity: 1;
}

.panel.acik .panel-govde {
    transform: none;
    transition-duration: 0.6s;
}

.panel-ust {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: var(--ust-yukseklik);
}

.panel-kapat {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-right: -12px;
    background: none;
    border: 0;
    cursor: pointer;
}

.panel-kapat .ikon {
    width: 28px;
    height: 28px;
}

/* Menü paneli: koyu */
.menu-paneli .panel-govde {
    padding: 0 clamp(24px, 5vw, 88px) 40px;
    background: var(--zemin);
    color: var(--gri-govde);
}

/* Filigran sağdan kırpık (overflow-x: hidden keser); alttan taşmaz: kaydırılabilir panelde taşma kaydırma çubuğu açıyordu. */
.panel-filigran {
    position: absolute;
    right: -6%;
    bottom: 0;
    max-height: 100%;
    width: 44%;
    height: auto;
    color: var(--altin);
    opacity: 0.08;
    pointer-events: none;
}


.panel-anasayfa {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: var(--t-etiket);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--gri-soluk);
}

.panel-anasayfa:hover {
    color: var(--beyaz);
}

.menu-paneli .panel-kapat {
    color: var(--beyaz);
}

.menu-liste {
    position: relative;
    margin-block: clamp(24px, 6vh, 72px) auto;
}

.menu-liste a {
    display: flex;
    align-items: baseline;
    gap: 20px;
    padding-block: clamp(6px, 1.2vh, 12px);
    color: var(--beyaz);
    text-decoration: none;
}

.menu-no {
    width: 2.2em;
    font-size: var(--t-etiket);
    letter-spacing: 0.12em;
    color: var(--altin);
    font-variant-numeric: tabular-nums;
}

.menu-ad {
    font-size: clamp(2rem, 3.6vw, 3.5rem);
    line-height: 1.05;
    letter-spacing: -0.025em;
    transition: transform 0.3s var(--kolay);
}

.menu-liste a:hover .menu-ad,
.menu-liste a:focus-visible .menu-ad {
    transform: translateX(10px);
}

.menu-liste a[aria-current="page"] .menu-ad {
    color: var(--altin);
}

.menu-alt {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 24px 32px;
    padding-top: 32px;
    border-top: 1px solid var(--cizgi-koyu);
}

.menu-iletisim {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: var(--t-kucuk);
}

.menu-iletisim a {
    text-decoration: none;
    color: var(--gri-acik);
}

.menu-iletisim a:hover {
    color: var(--altin);
}

.menu-tel {
    font-size: var(--t-baslik3);
    color: var(--beyaz) !important;
    letter-spacing: -0.01em;
}

.menu-logo {
    grid-row: 1 / 3;
    grid-column: 2;
    width: 132px;
}

/* Menü öğelerinin kademeli girişi (yalnız açılışta; kapanışta kademe yok) */
@media (prefers-reduced-motion: no-preference) {
    .menu-paneli .menu-liste li,
    .menu-paneli .menu-alt {
        opacity: 0;
        transform: translateX(32px);
        transition: opacity 0.2s var(--kolay), transform 0.2s var(--kolay);
    }

    .menu-paneli.acik .menu-liste li,
    .menu-paneli.acik .menu-alt {
        opacity: 1;
        transform: none;
        transition-duration: 0.45s;
        transition-timing-function: var(--kolay-expo);
    }

    .menu-paneli.acik .menu-liste li:nth-child(1) { transition-delay: 0.08s; }
    .menu-paneli.acik .menu-liste li:nth-child(2) { transition-delay: 0.12s; }
    .menu-paneli.acik .menu-liste li:nth-child(3) { transition-delay: 0.16s; }
    .menu-paneli.acik .menu-liste li:nth-child(4) { transition-delay: 0.20s; }
    .menu-paneli.acik .menu-liste li:nth-child(5) { transition-delay: 0.24s; }
    .menu-paneli.acik .menu-liste li:nth-child(6) { transition-delay: 0.28s; }
    .menu-paneli.acik .menu-alt { transition-delay: 0.32s; }
}

/* Çekmeceler: açık (beyaz) yüzey */
.cekmece .panel-govde {
    width: min(100%, 520px);
    min-width: 0;
    padding: 0 clamp(24px, 4vw, 48px) 40px;
    background: var(--beyaz);
    color: var(--metin);
}

.cekmece-baslik {
    font-size: var(--t-baslik3);
}

.cekmece-giris {
    margin-bottom: 24px;
    color: var(--soluk);
}

.cekmece-giris a {
    color: var(--zemin);
    white-space: nowrap;
}

.hizli-projeler {
    margin-bottom: 32px;
    border-top: 1px solid var(--cizgi-acik);
}

.hizli-projeler a {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--cizgi-acik);
    text-decoration: none;
}

.hizli-ad {
    font-size: 1.25rem;
    letter-spacing: -0.01em;
    color: var(--zemin);
    transition: transform 0.25s var(--kolay);
}

.hizli-konum {
    font-size: var(--t-etiket);
    letter-spacing: 0.08em;
    color: var(--soluk);
}

.hizli-projeler a:hover .hizli-ad {
    transform: translateX(6px);
}

/* ---------------------------------------------------------------------
   Sağ kenar sekmeleri (masaüstü) ve alt çubuk (mobil)
   --------------------------------------------------------------------- */
.kenar {
    position: fixed;
    right: 0;
    top: 50%;
    z-index: var(--z-kenar);
    display: flex;
    flex-direction: column;
    gap: 2px;
    transform: translateY(-50%);
}

.kenar-sekme {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    padding: 22px 0;
    background: var(--zemin);
    color: var(--beyaz);
    text-decoration: none;
    font-size: var(--t-etiket);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transition: transform 0.25s var(--kolay);
}

.kenar-sekme span {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
}

.kenar-sekme-altin {
    background: var(--altin);
    color: var(--zemin);
}

.kenar-sekme-ikon {
    padding: 14px 0;
}

.kenar-sekme-ikon .ikon {
    width: 22px;
    height: 22px;
}

@media (hover: hover) {
    .kenar-sekme {
        transform: translateX(4px);
    }

    .kenar-sekme:hover,
    .kenar-sekme:focus-visible {
        transform: none;
    }
}

.alt-cubuk {
    display: none;
}

@media (max-width: 767px) {
    .kenar {
        display: none;
    }

    .alt-cubuk {
        position: fixed;
        inset: auto 0 0 0;
        z-index: var(--z-kenar);
        display: grid;
        grid-template-columns: 1fr 1.6fr 1fr;
        padding-bottom: env(safe-area-inset-bottom);
        background: var(--zemin);
        border-top: 1px solid var(--cizgi-koyu);
    }

    .alt-cubuk a {
        padding-inline: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 56px;
        color: var(--beyaz);
        text-decoration: none;
        font-size: var(--t-kucuk);
    }

    .alt-cubuk .ikon {
        width: 20px;
        height: 20px;
        color: var(--altin);
    }

    .alt-cubuk-ana {
        background: var(--altin);
        color: var(--zemin) !important;
        letter-spacing: 0.04em;
    }

    body {
        padding-bottom: calc(56px + env(safe-area-inset-bottom));
    }
}

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */
.alt {
    position: relative;
    overflow: hidden;
    background: var(--zemin);
    color: var(--gri-govde);
    padding: clamp(72px, 10vh, 128px) var(--hat) 32px;
    font-size: var(--t-kucuk);
    line-height: 1.7;
}

/* Tam monogram filigranı: footer'ın neredeyse tam yüksekliği (üst/alt 24 px pay), sağ hatta; kesilmez (kılavuz: zemin
   logosu düşük opaklıkta). Genişlik yükseklikten oranla gelir; dar masaüstünde 40vw genişliği geçmez. */
.alt-filigran {
    position: absolute;
    right: var(--hat);
    top: 24px;
    height: calc(100% - 48px);
    max-height: 37.6vw; /* = 40vw genişlik */
    width: auto;
    aspect-ratio: 66.552 / 62.536;
    color: var(--altin);
    opacity: 0.08;
    pointer-events: none;
}

@media (max-width: 767px) {
    .alt-filigran {
        top: auto;
        bottom: 96px;
        width: 72vw;
        height: auto;
        max-height: none;
    }
}

.alt-ic {
    position: relative;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 48px 24px;
}

.alt-marka {
    grid-column: 1 / span 4;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.alt-logo img {
    width: 180px;
}

.alt-istirak {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    color: var(--gri-soluk);
}

.alt-istirak img {
    width: 150px;
}

.alt-menu {
    grid-column: 6 / span 3;
}

.alt-menu a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    color: var(--gri-acik);
    text-decoration: none;
}

.alt-menu a:hover {
    color: var(--altin);
}

.alt-iletisim {
    grid-column: 9 / span 4;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.alt-tel {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    align-self: flex-start;
    min-height: 44px;
    color: var(--beyaz);
    font-size: 1.25rem;
    letter-spacing: -0.01em;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}

.alt-tel .ikon {
    width: 22px;
    height: 22px;
    color: var(--altin);
}

.alt-tel:hover {
    border-color: var(--altin);
}

.alt-iletisim address a {
    color: var(--gri-acik);
}

.alt-kullanici {
    color: var(--gri-soluk);
    letter-spacing: 0.04em;
}

.alt-taban {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 32px;
    margin-top: clamp(56px, 8vh, 96px);
    padding-top: 24px;
    border-top: 1px solid var(--cizgi-koyu);
    color: var(--gri-soluk);
    font-size: var(--t-etiket);
    letter-spacing: 0.04em;
}

.alt-telif {
    display: flex;
    align-items: center;
    gap: 10px;
}

.alt-telif a {
    display: inline-flex;
    flex: none;
}

.alt-telif img {
    width: 30px;
    max-width: none;
    height: auto;
}

.alt-yasal {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
}

.alt-yasal a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    color: var(--gri-soluk);
}

.alt-yasal a:hover {
    color: var(--beyaz);
}

.yukari {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    margin-left: auto;
    color: var(--gri-acik);
    text-decoration: none;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.yukari .ikon {
    width: 18px;
    height: 18px;
    color: var(--altin);
    transition: transform 0.25s var(--kolay);
}

.yukari:hover .ikon {
    transform: translateY(-4px);
}

.sosyal {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sosyal a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--cizgi-koyu);
    border-radius: 50%;
    color: var(--gri-acik);
    transition: border-color 0s;
}

.sosyal a:hover,
.sosyal a:focus-visible {
    border-color: var(--altin);
    color: var(--altin);
}

.sosyal .ikon {
    width: 18px;
    height: 18px;
}

@media (max-width: 1023px) {
    .alt-marka { grid-column: 1 / -1; }
    .alt-menu { grid-column: 1 / span 5; }
    .alt-iletisim { grid-column: 6 / -1; }
}

@media (max-width: 639px) {
    .alt-menu,
    .alt-iletisim {
        grid-column: 1 / -1;
    }

    .alt-menu ul {
        columns: 2;
    }

    .yukari {
        margin-left: 0;
    }
}

/* ---------------------------------------------------------------------
   Çerez bilgilendirme bandı
   --------------------------------------------------------------------- */
.cerez {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: var(--z-kenar);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 24px;
    max-width: min(560px, calc(100% - 32px));
    padding: 20px 24px;
    background: var(--zemin);
    color: var(--gri-govde);
    border: 1px solid var(--cizgi-altin);
    font-size: var(--t-kucuk);
    line-height: 1.55;
}

.cerez p {
    flex: 1 1 260px;
}

.cerez a {
    color: var(--beyaz);
}

@media (max-width: 767px) {
    .cerez {
        bottom: calc(72px + env(safe-area-inset-bottom));
    }
}

/* ---------------------------------------------------------------------
   Sayfa başlık bandı (iç sayfalar): koyu, dev marka adı filigranı
   --------------------------------------------------------------------- */
.sayfa-bant {
    position: relative;
    overflow: hidden;
    background: var(--zemin);
    color: var(--gri-govde);
    padding: calc(var(--ust-yukseklik) + clamp(40px, 8vh, 96px)) 0 clamp(48px, 8vh, 96px);
}

.sayfa-bant .kap {
    position: relative;
}

.filigran-kelime {
    position: absolute;
    left: -0.04em;
    bottom: -0.17em;
    margin: 0;
    font-size: clamp(6rem, 24vw, 26rem);
    line-height: 0.8;
    letter-spacing: -0.04em;
    color: var(--beyaz);
    opacity: 0.06;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
}

.kirinti ol {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 0;
    font-size: var(--t-etiket);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gri-soluk);
}

.kirinti li + li::before {
    content: "/";
    margin: 0 12px;
    color: var(--kenar-koyu);
}

.kirinti a {
    text-decoration: none;
}

.kirinti a:hover {
    color: var(--beyaz);
}

.sayfa-baslik {
    margin-top: clamp(24px, 4vh, 48px);
    font-size: var(--t-display);
    line-height: 0.92;
    letter-spacing: -0.035em;
    color: var(--beyaz);
}

.sayfa-alt {
    margin-top: clamp(20px, 3vh, 32px);
    max-width: 48ch;
    font-size: var(--t-lead);
    line-height: 1.45;
    color: var(--gri-acik);
}

/* ---------------------------------------------------------------------
   Köşe ayraçları (imza bileşeni): hover/odakta monogramın L köşeleri çizilir
   --------------------------------------------------------------------- */
.ayracli {
    position: relative;
}

.ayracli::before,
.ayracli::after {
    content: "";
    position: absolute;
    z-index: 2;
    width: clamp(28px, 3vw, 44px);
    height: clamp(28px, 3vw, 44px);
    border: 0 solid var(--altin);
    pointer-events: none;
    transform: scale(0);
    transition: transform 0.35s var(--kolay-expo);
}

.ayracli::before {
    top: 14px;
    left: 14px;
    border-top-width: 2px;
    border-left-width: 2px;
    transform-origin: top left;
}

.ayracli::after {
    right: 14px;
    bottom: 14px;
    border-right-width: 2px;
    border-bottom-width: 2px;
    transform-origin: bottom right;
}

a:hover > .ayracli::before,
a:hover > .ayracli::after,
a:focus-visible > .ayracli::before,
a:focus-visible > .ayracli::after,
.ayracli.ayrac-acik::before,
.ayracli.ayrac-acik::after {
    transform: scale(1);
}

/* Görsel çerçevesi: kırpma + hover yakınlaşması */
.cerceve {
    position: relative;
    overflow: hidden;
    background: var(--yuzey);
}

.cerceve picture,
.dizin-onizleme picture,
.dizin-kucuk picture,
.proje-hero-gorsel picture,
.sayfa-bant-gorsel picture {
    width: 100%;
    height: 100%;
}

.cerceve img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s var(--kolay);
}

@media (hover: hover) {
    a:hover .cerceve img,
    a:focus-visible .cerceve img {
        transform: scale(1.04);
    }
}

/* =====================================================================
   ANA SAYFA
   ===================================================================== */

/* ---- Hero: tam ekran slayt (sloganlar + render'lar; proje adı iddiası yok) ----
   Geçiş: gelen slayt merkezden açılır (H'nin iki bloğu arasındaki boşluk gibi): clip-path inset(0 50%) → inset(0).
   Etkin slaytta Ken Burns (scale 1,06 → 1) ve satır maskesinden yükselen başlık. Otomatik geçiş 7 sn; fareyle/odakla,
   sekme gizliyken ve hero ekran dışındayken durur; durdur düğmesi (WCAG 2.2.2). */
.hero {
    position: relative;
    height: 100vh;
    height: 100svh;
    min-height: 560px;
    max-height: 1200px;
    overflow: hidden;
    background: var(--zemin);
    color: var(--beyaz);
}

.hero-slaytlar {
    position: absolute;
    inset: 0;
}

.hero-slayt {
    position: absolute;
    inset: 0;
    visibility: hidden;
}

.hero-slayt.etkin,
.hero-slayt.cikan {
    visibility: visible;
}

.hero-slayt.etkin {
    z-index: 2;
}

.hero-slayt.cikan {
    z-index: 1;
}

.hero-gorsel,
.hero-slayt picture {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hero-gorsel {
    object-fit: cover;
}

/* Etkin olmayan slaytların görselleri sayfa yüklenene dek indirilmez (site.js "yuklendi"); LCP görseliyle bant paylaşmasın. */
.js .hero-slaytlar:not(.yuklendi) .hero-slayt:not(.etkin) picture {
    display: none;
}

.hero-slayt::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--perde);
}

.hero-metin {
    position: absolute;
    z-index: 3;
    left: var(--hat);
    right: var(--hat);
    bottom: clamp(112px, 17vh, 200px);
}

.hero-baslik {
    font-size: clamp(3rem, 8.4vw, 9.5rem);
    line-height: 0.94;
    letter-spacing: -0.035em;
    color: var(--beyaz);
}

/* Satır maskesi. Sıkı satır aralığında (0,94) büyük harf aksanları (Ö, Ü, İ, Ç, Ş, Ğ) kutunun dışına taşar:
   maske yukarı ve aşağı genişletilir, negatif kenar boşluğu düzeni korur. */
.satir {
    display: block;
    overflow: hidden;
    padding-top: 0.16em;
    margin-top: -0.16em;
    padding-bottom: 0.1em;
    margin-bottom: -0.1em;
}

.satir > span {
    display: block;
}

.hero-alt {
    margin-top: clamp(16px, 2.4vh, 28px);
    max-width: 30ch;
    font-size: 1.5rem;
    line-height: 1.35;
    color: var(--beyaz);
}

.hero-eylem {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin-top: clamp(24px, 4vh, 40px);
}

.hero-kontrol {
    position: absolute;
    z-index: 4;
    right: var(--hat);
    bottom: clamp(40px, 6vh, 64px);
    display: flex;
    align-items: center;
    gap: 8px;
}

.hero-sayac {
    min-width: 5.5em;
    font-size: var(--t-kucuk);
    letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
}

.hero-ilerleme {
    position: relative;
    width: clamp(64px, 8vw, 120px);
    height: 1px;
    margin-right: 12px;
    background: rgba(255, 255, 255, 0.35);
    overflow: hidden;
}

.hero-ilerleme span {
    position: absolute;
    inset: 0;
    background: var(--altin);
    transform: scaleX(0);
    transform-origin: left;
}

.hero-dugme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: var(--beyaz);
    cursor: pointer;
}

.hero-dugme:hover {
    border-color: var(--altin);
}

.hero-dugme .ikon {
    width: 20px;
    height: 20px;
}

.hero-asagi {
    position: absolute;
    z-index: 4;
    left: 50%;
    bottom: clamp(24px, 4vh, 40px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-left: -24px;
    color: var(--beyaz);
}

/* Görsel notu düz koyu plaka üstünde (görsel üstü küçük metin kontrastı fotoğrafa bağlı kalmasın). */
.hero-not {
    position: absolute;
    z-index: 4;
    left: var(--hat);
    bottom: clamp(24px, 4vh, 40px);
    padding: 6px 10px;
    background: var(--zemin);
    color: var(--gri-acik);
    font-size: var(--t-etiket);
    letter-spacing: 0.04em;
}

.hero-asagi .ikon {
    width: 24px;
    height: 24px;
}

@media (max-width: 767px) {
    .hero {
        min-height: 520px;
    }

    .hero-metin {
        bottom: calc(148px + env(safe-area-inset-bottom));
    }

    .hero-alt {
        font-size: 1.25rem;
    }

    /* Alttaki sabit iletişim çubuğunun (56 px) üstünde kalır. */
    .hero-kontrol {
        left: var(--hat);
        right: auto;
        bottom: calc(76px + env(safe-area-inset-bottom));
    }

    .hero-asagi {
        display: none;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .js .hero-slayt.etkin .hero-gorsel {
        animation: hero-ken 8s var(--kolay-kubik) both;
    }

    .js .hero-slayt.giriyor {
        animation: hero-ac 1.1s var(--kolay-expo) both;
    }

    .js .hero-slayt.giriyor .satir > span,
    .js .hero.ilk .hero-slayt.etkin .satir > span {
        animation: satir-yuksel 0.9s var(--kolay) both;
        animation-delay: 0.35s;
    }

    .js .hero-slayt.giriyor .satir:nth-child(2) > span,
    .js .hero.ilk .hero-slayt.etkin .satir:nth-child(2) > span {
        animation-delay: 0.44s;
    }

    .js .hero-slayt.giriyor .satir:nth-child(3) > span,
    .js .hero.ilk .hero-slayt.etkin .satir:nth-child(3) > span {
        animation-delay: 0.53s;
    }

    .js .hero-slayt.giriyor .hero-alt,
    .js .hero-slayt.giriyor .hero-eylem,
    .js .hero.ilk .hero-slayt.etkin .hero-alt,
    .js .hero.ilk .hero-slayt.etkin .hero-eylem {
        animation: belir 0.8s var(--kolay) both;
        animation-delay: 0.65s;
    }

    /* Zaman göstergesi: sitedeki tek bilinçli doğrusal eğri (süre = kalan zaman). */
    .js .hero-ilerleme.calisiyor span {
        transform: scaleX(1);
        transition: transform 7s linear;
    }
}

@keyframes hero-ken {
    from { transform: scale(1.06); }
    to { transform: scale(1); }
}

@keyframes hero-ac {
    from { clip-path: inset(0 50% 0 50%); }
    to { clip-path: inset(0 0 0 0); }
}

/* Hero başlığı satır açılışı: maske overflow yerine satırın kendi clip-path'iyle. Alt kesim öteleme ile aynı eğride
   küçüldüğü için görünen alt kenar satırın tabanında sabit kalır (overflow maskesiyle aynı görüntü). Neden: overflow ile
   tamamen gizli başlayan metni Chrome LCP adayı saymıyor; ekranı kaplayan hero görseli de aday değil, LCP 2 sn'deki küçük
   nota kayıyordu. Üst kesim 0'dan -0,3em'e açılır: Ö, İ, Ü noktaları kesilmez. */
.hero-baslik .satir {
    overflow: visible;
    padding: 0;
    margin: 0;
}

@keyframes satir-yuksel {
    from { transform: translateY(100%); clip-path: inset(0 0 100% 0); }
    to { transform: none; clip-path: inset(-0.3em 0 -0.2em 0); }
}

@keyframes belir {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: none; }
}

@keyframes belir-ust {
    from { opacity: 0; transform: translateY(-16px); }
    to { opacity: 1; transform: none; }
}

/* ---- Monogram kapısı (ana sayfanın her açılışında; az harekette, #adreste ve JS'siz yok) ----
   Koyu iki yarı, ortada H monogramının kutusu kadar bir pencere bırakır; pencerede ilk render görünür (LCP görseli baştan
   boyanır, opaklığı canlandırılmaz). Altın bloklar yarılarla birlikte iki yana açılır. Her girdi anında atlar (site.js). */
.kapi {
    display: none;
}

html.kapi-acilis .kapi {
    --m-y: min(40vh, 46vw);
    --m-g: calc(var(--m-y) * 1.0642);
    position: fixed;
    inset: 0;
    z-index: var(--z-kapi);
    display: block;
    pointer-events: none;
}

.kapi-yari {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    animation: 1s var(--kolay-expo) 0.25s both;
}

/* Pencere perdede açılır (evenodd delik); blok perdenin DIŞINDA kardeş öğe olduğu için kırpılmaz. */
.kapi-perde {
    position: absolute;
    inset: 0;
    background: var(--zemin);
}

.kapi-sol {
    left: 0;
    right: calc(50% - 1px); /* 1 px bindirme: iki yarı arasında görsel sızan dikiş olmasın */
    width: auto;
    animation-name: kapi-sol;
}

.kapi-sol .kapi-perde {
    clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0,
        calc(100% - var(--m-g) / 2) calc(50% - var(--m-y) / 2), 100% calc(50% - var(--m-y) / 2),
        100% calc(50% + var(--m-y) / 2), calc(100% - var(--m-g) / 2) calc(50% + var(--m-y) / 2),
        calc(100% - var(--m-g) / 2) calc(50% - var(--m-y) / 2));
}

.kapi-sag {
    right: 0;
    animation-name: kapi-sag;
}

.kapi-sag .kapi-perde {
    clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0,
        0 calc(50% - var(--m-y) / 2), calc(var(--m-g) / 2) calc(50% - var(--m-y) / 2),
        calc(var(--m-g) / 2) calc(50% + var(--m-y) / 2), 0 calc(50% + var(--m-y) / 2),
        0 calc(50% - var(--m-y) / 2));
}

/* Monogram bloğu: genişliği monogramın %42,98'i; dış kenarı pencerenin dış kenarında (Docs/Kaynak/kurumsal-kimlik/MONOGRAM-GEOMETRISI.md). */
.kapi-blok {
    position: absolute;
    top: calc(50% - var(--m-y) / 2);
    width: calc(var(--m-g) * 0.4298);
    height: var(--m-y);
    color: var(--altin);
}

.kapi-sol .kapi-blok {
    right: calc(var(--m-g) * 0.0702);
}

.kapi-sag .kapi-blok {
    left: calc(var(--m-g) * 0.0702);
    transform: scaleX(-1);
}

@keyframes kapi-sol {
    to { transform: translateX(-101%); }
}

@keyframes kapi-sag {
    to { transform: translateX(101%); }
}

/* Yardımcı öğeler (header, kenar sekmeleri, slayt kontrolleri, çerez bandı) kapı bittikten sonra girer. */
/* Header (menü) ötekilerden ayrışır: ekranın üst kenarından aşağı iner (yukarıdan aşağıya); diğer yardımcılar aşağıdan gelir. */
html.kapi-acilis .ust {
    animation: belir-ust 0.6s var(--kolay) 1.05s both;
}

html.kapi-acilis .kenar,
html.kapi-acilis .hero-kontrol,
html.kapi-acilis .hero-asagi,
html.kapi-acilis .hero-not,
html.kapi-acilis .cerez,
html.kapi-acilis .alt-cubuk {
    animation: belir 0.6s var(--kolay) 1.05s both;
}

html.kapi-acilis .hero.ilk .hero-slayt.etkin .satir > span {
    animation-delay: 0.7s;
}

html.kapi-acilis .hero.ilk .hero-slayt.etkin .satir:nth-child(2) > span {
    animation-delay: 0.79s;
}

html.kapi-acilis .hero.ilk .hero-slayt.etkin .satir:nth-child(3) > span {
    animation-delay: 0.88s;
}

html.kapi-acilis .hero.ilk .hero-slayt.etkin .hero-alt,
html.kapi-acilis .hero.ilk .hero-slayt.etkin .hero-eylem {
    animation-delay: 1s;
}

/* ---- Giriş: büyük marka cümlesi + Hakkımızda özeti + kenara taşan görsel ---- */
/* overflow: clip (hidden değil): hidden bölümü kaydırma kabı yapar ve içindeki yapışkan başlık çalışmaz. Eski tarayıcı
   clip'i tanımazsa hidden kalır; başlık yapışmaz, düzen bozulmaz. */
.giris {
    overflow: hidden;
    overflow: clip;
}

.giris-izgara {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(32px, 5vw, 64px) 24px;
    align-items: start;
}

/* Başlığın sütunu 1. satırın tamamını kaplar (satırı yandaki uzun görsel uzatır); başlık bu sütunun içinde yapışkan:
   header'ın altına gelince boşluk boyunca iner, sütunun dibine (paragrafın üstüne) varınca durur ve sayfayla kayar. */
.giris-baslik-kap {
    grid-column: 1 / span 7;
    grid-row: 1;
    align-self: stretch;
}

.giris-baslik {
    position: sticky;
    top: calc(var(--ust-kompakt) + 32px);
    font-size: clamp(3.25rem, 7.4vw, 7.5rem);
    line-height: 0.9;
    letter-spacing: -0.04em;
}

.giris-metin {
    grid-column: 2 / span 5;
    grid-row: 2;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.giris-gorsel {
    grid-column: 8 / -1;
    grid-row: 1 / span 2;
    margin-top: clamp(80px, 12vw, 200px);
    margin-right: calc(-1 * var(--kenar));
}

.giris-gorsel .cerceve {
    aspect-ratio: 4 / 5;
}

@media (min-width: 1600px) {
    .giris-gorsel {
        margin-right: calc((1440px - 100vw) / 2);
    }
}

@media (max-width: 899px) {
    .giris-baslik-kap,
    .giris-metin {
        grid-column: 1 / -1;
    }

    .giris-gorsel {
        grid-column: 3 / -1;
        grid-row: 3;
        margin-top: 0;
    }

    .giris-gorsel .cerceve {
        aspect-ratio: 4 / 3;
    }
}

/* ---- Kat Kesiti: rakamlar bir bina kesiti gibi soldan sağa kat kat yükselir ---- */
.kesit {
    overflow: hidden;
}

.kesit-baslik {
    max-width: 16ch;
}

.kesit-liste {
    --kat: clamp(40px, 6vw, 96px);
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    margin-top: clamp(56px, 9vh, 112px);
    border-bottom: 1px solid var(--cizgi-altin);
}

.kesit-kat {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: clamp(20px, 2vw, 32px) clamp(12px, 1.6vw, 28px) clamp(24px, 3vh, 40px);
    border-left: 1px solid var(--cizgi-koyu);
}

.kesit-kat::before {
    content: "";
    position: absolute;
    left: -1px;
    right: 0;
    top: 0;
    height: 1px;
    background: var(--altin);
    transform-origin: left;
}

/* Kat sayısından bağımsız basamak: sondan geriye her kat bir "kat" yüksekliği aşağıda başlar (son kat en yüksek). */
.kesit-kat:nth-last-child(2) { margin-top: var(--kat); }
.kesit-kat:nth-last-child(3) { margin-top: calc(var(--kat) * 2); }
.kesit-kat:nth-last-child(4) { margin-top: calc(var(--kat) * 3); }
.kesit-kat:nth-last-child(5) { margin-top: calc(var(--kat) * 4); }
.kesit-kat:nth-last-child(6) { margin-top: calc(var(--kat) * 5); }

.kesit-proje .kesit-liste {
    --kat: clamp(32px, 4vw, 72px);
}

/* Proje rakamları beş kata kadar çıkar ve "45.000" gibi altı karakterlidir: ölçek sütun genişliğine göre. */
.kesit-proje .kesit-deger {
    font-size: clamp(2.75rem, 4.1vw, 5.25rem);
}

.kesit-deger {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 0.25em;
    color: var(--altin);
    font-size: var(--t-rakam);
    line-height: 0.85;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
}

.kesit-birim {
    font-size: clamp(1.25rem, 2vw, 2rem);
    letter-spacing: -0.01em;
}

.kesit-etiket {
    margin-top: 16px;
    max-width: 16ch;
    color: var(--gri-acik);
    font-size: var(--t-kucuk);
    line-height: 1.45;
}

@media (max-width: 899px) {
    .kesit-liste {
        grid-auto-flow: row;
        grid-template-columns: 1fr;
        border-bottom: 0;
    }

    .kesit-kat {
        margin-top: 0 !important;
        padding-left: 20px;
        padding-block: 28px;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .js .kesit-kat[data-gorun]:not(.gorundu)::before {
        transform: scaleX(0);
    }

    .js .kesit-kat[data-gorun]:not(.gorundu) .kesit-deger,
    .js .kesit-kat[data-gorun]:not(.gorundu) .kesit-etiket {
        opacity: 0;
        transform: translateY(24px);
    }

    .js .kesit-kat::before {
        transition: transform 0.9s var(--kolay-expo);
    }

    .js .kesit-kat .kesit-deger,
    .js .kesit-kat .kesit-etiket {
        transition: opacity 0.9s var(--kolay), transform 0.9s var(--kolay);
    }

    .js .kesit-kat:nth-child(2)::before, .js .kesit-kat:nth-child(2) .kesit-deger, .js .kesit-kat:nth-child(2) .kesit-etiket { transition-delay: 0.11s; }
    .js .kesit-kat:nth-child(3)::before, .js .kesit-kat:nth-child(3) .kesit-deger, .js .kesit-kat:nth-child(3) .kesit-etiket { transition-delay: 0.22s; }
    .js .kesit-kat:nth-child(4)::before, .js .kesit-kat:nth-child(4) .kesit-deger, .js .kesit-kat:nth-child(4) .kesit-etiket { transition-delay: 0.33s; }
    .js .kesit-kat:nth-child(5)::before, .js .kesit-kat:nth-child(5) .kesit-deger, .js .kesit-kat:nth-child(5) .kesit-etiket { transition-delay: 0.44s; }
}

/* ---- Proje Dizini: eser dizini gibi tipografik satırlar + yapışkan önizleme ---- */
.dizin-ust {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 24px 48px;
    margin-bottom: clamp(40px, 7vh, 80px);
}

.dizin-ust .baslik2 {
    max-width: 14ch;
}

.dizin {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(24px, 4vw, 72px);
    align-items: start;
}

.dizin-liste {
    border-top: 1px solid var(--cizgi-acik);
}

.dizin-satir a {
    position: relative;
    display: grid;
    grid-template-columns: 3.2em minmax(0, 1fr) auto;
    grid-template-areas: "no ad alan" "no konum alan";
    align-items: baseline;
    gap: 4px 20px;
    padding: clamp(18px, 2.6vh, 28px) 0;
    border-bottom: 1px solid var(--cizgi-acik);
    text-decoration: none;
    color: var(--zemin);
}

.dizin-no {
    grid-area: no;
    font-size: var(--t-etiket);
    letter-spacing: 0.12em;
    color: var(--soluk);
    font-variant-numeric: tabular-nums;
}

.dizin-ad {
    grid-area: ad;
    font-size: clamp(1.75rem, 3.2vw, 3rem);
    line-height: 1.02;
    letter-spacing: -0.025em;
    transition: transform 0.4s var(--kolay);
}

.dizin-konum {
    grid-area: konum;
    color: var(--soluk);
    font-size: var(--t-kucuk);
}

.dizin-alan {
    grid-area: alan;
    font-size: var(--t-kucuk);
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.dizin-satir a::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 1px;
    background: var(--zemin);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s var(--kolay-expo);
}

.dizin-satir a:hover::before,
.dizin-satir a:focus-visible::before,
.dizin-satir.etkin a::before {
    transform: scaleX(1);
}

.dizin-satir a:hover .dizin-ad,
.dizin-satir a:focus-visible .dizin-ad,
.dizin-satir.etkin .dizin-ad {
    transform: translateX(12px);
}

.dizin-kucuk {
    display: none;
}

.dizin-onizleme {
    position: sticky;
    top: calc(var(--ust-kompakt) + 32px);
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--zemin);
}

/* Yeni kare üstte açılır; eski kare yeni tamamlanana kadar altta görünür kalır (siyah flaş yok). */
.dizin-onizleme figure {
    position: absolute;
    inset: 0;
    clip-path: inset(0 0 100% 0);
    transition: clip-path 0s linear 0.6s;
}

.dizin-onizleme figure.etkin {
    z-index: 1;
    clip-path: inset(0 0 0 0);
    transition: clip-path 0.6s var(--kolay-expo);
}

.dizin-onizleme figure.etkin:first-child:not(:only-child) {
    transition-delay: 0s;
}

.dizin-onizleme img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dizin-onizleme figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 16px 20px;
    background: var(--zemin);
    color: var(--gri-acik);
    font-size: var(--t-etiket);
    letter-spacing: 0.08em;
}

@media (max-width: 1023px) {
    .dizin {
        grid-template-columns: 1fr;
    }

    .dizin-onizleme {
        display: none;
    }

    .dizin-satir a {
        grid-template-columns: 88px minmax(0, 1fr);
        grid-template-areas: "kucuk ad" "kucuk konum" "kucuk alan";
        gap: 2px 16px;
        align-items: center;
    }

    .dizin-no {
        display: none;
    }

    .dizin-kucuk {
        display: block;
        grid-area: kucuk;
        width: 88px;
        aspect-ratio: 1;
        overflow: hidden;
        background: var(--yuzey);
    }

    .dizin-kucuk img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .dizin-ad {
        font-size: 1.5rem;
    }

    .dizin-alan {
        color: var(--soluk);
    }
}

/* ---- Başkanın Mesajı sahnesi ---- */
.mesaj-sahne {
    overflow: hidden;
}

.mesaj-izgara {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(40px, 6vw, 96px) 24px;
    align-items: center;
}

.mesaj-portre {
    grid-column: 1 / span 5;
    position: relative;
}

.mesaj-portre .cerceve {
    aspect-ratio: 4 / 5;
}

/* Portrenin iki köşesinde monogramın L köşeleri (kalıcı süs; görselin dışında). */
.mesaj-portre::before,
.mesaj-portre::after {
    content: "";
    position: absolute;
    z-index: 1;
    width: 22%;
    aspect-ratio: 1;
    border: 0 solid var(--altin);
    pointer-events: none;
}

.mesaj-portre::before {
    left: -16px;
    top: -16px;
    border-top-width: 2px;
    border-left-width: 2px;
}

.mesaj-portre::after {
    right: -16px;
    bottom: -16px;
    border-right-width: 2px;
    border-bottom-width: 2px;
}

.mesaj-icerik {
    grid-column: 7 / span 6;
    display: flex;
    flex-direction: column;
    gap: clamp(24px, 4vh, 40px);
}

.mesaj-alinti {
    margin: 0;
    font-size: clamp(1.625rem, 2.8vw, 2.75rem);
    line-height: 1.22;
    letter-spacing: -0.02em;
    color: var(--beyaz);
}

.mesaj-alinti p::before {
    content: "“";
}

.mesaj-alinti p::after {
    content: "”";
}

.imza-sahne {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.imza-sahne .imza {
    width: clamp(220px, 24vw, 340px);
    height: auto;
    overflow: visible;
    color: var(--altin);
}

.imza-ad {
    margin-top: 8px;
    color: var(--beyaz);
    font-size: var(--t-govde);
}

.imza-unvan {
    color: var(--gri-soluk);
    font-size: var(--t-kucuk);
}

@media (max-width: 899px) {
    .mesaj-portre {
        grid-column: 2 / span 10;
    }

    .mesaj-icerik {
        grid-column: 1 / -1;
    }
}

/* ---- Basında Biz (ana sayfa ve liste) ---- */
.basin-izgara {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(40px, 6vh, 72px) 24px;
}

.basin-oncu {
    grid-column: 1 / span 7;
}

.basin-yan {
    grid-column: 9 / span 4;
    display: flex;
    flex-direction: column;
    gap: clamp(32px, 5vh, 56px);
}

.haber-kart a {
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-decoration: none;
    color: var(--zemin);
}

.haber-kart .cerceve {
    aspect-ratio: 16 / 10;
}

.haber-tarih {
    font-size: var(--t-etiket);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--soluk);
}

.haber-baslik {
    font-size: var(--t-baslik3);
    line-height: 1.18;
    letter-spacing: -0.015em;
}

.basin-oncu .haber-baslik {
    font-size: clamp(1.75rem, 2.8vw, 2.5rem);
}

.haber-ozet {
    color: var(--soluk);
    max-width: 60ch;
}

@media (max-width: 899px) {
    .basin-oncu,
    .basin-yan {
        grid-column: 1 / -1;
    }
}

/* ---- Çağrı bandı (Sizi Arayalım) ---- */
.cagri {
    overflow: hidden;
}

.cagri-izgara {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 32px 24px;
    align-items: end;
}

.cagri-baslik {
    grid-column: 1 / span 7;
    font-size: var(--t-baslik2);
    line-height: 1.02;
    letter-spacing: -0.025em;
}

.cagri-tel {
    grid-column: 1 / span 8;
    justify-self: start;
    color: var(--altin);
    font-size: clamp(3.5rem, 11vw, 11rem);
    line-height: 0.9;
    letter-spacing: -0.04em;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cagri-tel:hover {
    color: var(--beyaz);
}

.cagri-eylem {
    grid-column: 9 / -1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

@media (max-width: 899px) {
    .cagri-baslik,
    .cagri-tel,
    .cagri-eylem {
        grid-column: 1 / -1;
    }
}

/* ---------------------------------------------------------------------
   Görünür olunca girişler (IntersectionObserver; bir kez). JS yoksa ve az harekette içerik baştan görünür.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    .js [data-gorun="yukari"]:not(.gorundu) {
        opacity: 0;
        transform: translateY(28px);
    }

    .js [data-gorun="yukari"] {
        transition: opacity 0.9s var(--kolay), transform 0.9s var(--kolay);
    }

    .js [data-gorun="satir"]:not(.gorundu) .satir > span {
        transform: translateY(125%);
    }

    .js [data-gorun="satir"] .satir > span {
        transition: transform 0.9s var(--kolay);
    }

    .js [data-gorun="satir"] .satir:nth-child(2) > span { transition-delay: 0.09s; }
    .js [data-gorun="satir"] .satir:nth-child(3) > span { transition-delay: 0.18s; }
    .js [data-gorun="satir"] .satir:nth-child(4) > span { transition-delay: 0.27s; }

    .js [data-gorun="gorsel"]:not(.gorundu) {
        clip-path: inset(12% 0 12% 0);
    }

    .js [data-gorun="gorsel"]:not(.gorundu) img {
        transform: scale(1.08);
    }

    .js [data-gorun="gorsel"] {
        transition: clip-path 1.1s var(--kolay-expo);
    }

    .js [data-gorun="gorsel"] img {
        transition: transform 1.4s var(--kolay-expo);
    }

    .js [data-gorun].gecikme-1 { transition-delay: 0.1s; }
    .js [data-gorun].gecikme-2 { transition-delay: 0.2s; }
    .js [data-gorun].gecikme-3 { transition-delay: 0.3s; }
}

/* =====================================================================
   FORMLAR (Sizi Arayalım, İletişim) — alt çizgili büyük alanlar; açık ve koyu zemin
   ===================================================================== */
.form {
    --alan-renk: var(--zemin);
    --alan-kenar: var(--kenar-acik);
    --alan-etiket: var(--soluk);
    --alan-hata: var(--uyari-acik);
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.form-koyu,
.bolum-koyu .form {
    --alan-renk: var(--beyaz);
    --alan-kenar: var(--kenar-koyu);
    --alan-etiket: var(--gri-soluk);
    --alan-hata: var(--uyari);
}

.form-izgara {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 32px;
}

@media (max-width: 639px) {
    .form-izgara {
        grid-template-columns: 1fr;
    }
}

.alan {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.alan label {
    font-size: var(--t-kucuk);
    letter-spacing: 0.02em;
    color: var(--alan-etiket);
}

.zorunlu {
    margin-left: 2px;
    color: inherit;
}

.istege-bagli {
    color: var(--alan-etiket);
    font-size: var(--t-etiket);
    letter-spacing: 0.04em;
}

.alan input[type="text"],
.alan input[type="tel"],
.alan input[type="email"],
.alan select,
.alan textarea {
    width: 100%;
    min-height: 56px;
    padding: 12px 0;
    border: 0;
    border-bottom: 1px solid var(--alan-kenar);
    border-radius: 0;
    background: transparent;
    color: var(--alan-renk);
    font: inherit;
    font-size: 1.125rem;
    letter-spacing: 0.01em;
    appearance: none;
}

.alan textarea {
    min-height: 140px;
    resize: vertical;
    line-height: 1.55;
}

.alan select {
    padding-right: 32px;
    cursor: pointer;
    background-image: url("../images/ui/secim-oku.svg");
    background-repeat: no-repeat;
    background-position: right 4px center;
    background-size: 16px 16px;
}

.form-koyu .alan select,
.bolum-koyu .alan select {
    background-image: url("../images/ui/secim-oku-acik.svg");
}

.alan select option {
    color: var(--zemin);
    background: var(--beyaz);
}

/* Açılır liste (proje seçimi) — özelleştirilebilir select (appearance: base-select). Destekleyen tarayıcıda (Chromium 135+)
   liste site tasarımında açılır: kâğıt zemin, ince altın çerçeve, altın vurgulu seçili satır. Desteklemeyende (ör. iOS Safari)
   işletim sisteminin yerel seçicisi kalır. JS yok; klavye / ekran okuyucu davranışı yerel select'inki. Liste üst katmanda
   (top layer) açılır, çekmecenin taşma kırpmasından etkilenmez. */
.form {
    --liste-zemin: var(--kagit);
    --liste-metin: var(--metin);
    --liste-soluk: var(--soluk);
    --liste-cizgi: var(--cizgi-altin);
    --liste-ust: rgba(133, 118, 78, 0.1);
    --liste-secili: var(--altin);
}

.form-koyu,
.bolum-koyu .form {
    --liste-zemin: var(--yuzey);
    --liste-metin: var(--beyaz);
    --liste-soluk: var(--gri-soluk);
    --liste-cizgi: var(--cizgi-koyu);
    --liste-ust: rgba(255, 255, 255, 0.06);
    --liste-secili: #C9B98C;
}

@supports (appearance: base-select) {
    .alan select,
    .alan select::picker(select) {
        appearance: base-select;
    }

    .alan select {
        display: flex;
        align-items: center;
    }

    /* Ok, mevcut arka plan görseliyle (secim-oku.svg) çiziliyor; tarayıcının kendi oku gizlenir. */
    .alan select::picker-icon {
        display: none;
    }

    .alan select::picker(select) {
        margin-top: 8px;
        padding: 6px 0;
        max-height: min(360px, 55vh);
        overflow-y: auto;
        overscroll-behavior: contain;
        border: 1px solid var(--liste-cizgi);
        border-radius: 0;
        background: var(--liste-zemin);
        color: var(--liste-metin);
        box-shadow: 0 24px 48px rgba(3, 5, 5, 0.18);
        scrollbar-width: thin;
        scrollbar-color: var(--liste-cizgi) transparent;
    }

    .alan select option {
        display: flex;
        align-items: center;
        min-height: 48px;
        padding: 10px 20px 10px 18px;
        border-left: 2px solid transparent;
        background: transparent;
        color: var(--liste-metin);
        font: inherit;
        font-size: 1rem;
        letter-spacing: 0.01em;
        line-height: 1.35;
        cursor: pointer;
    }

    /* Tarayıcının seçili işareti yerine soldaki altın çizgi kullanılır. */
    .alan select option::checkmark {
        display: none;
    }

    /* "Proje seçin" yer tutucu satırı */
    .alan select option[value=""] {
        color: var(--liste-soluk);
        font-size: var(--t-kucuk);
        letter-spacing: 0.04em;
    }

    .alan select option:hover,
    .alan select option:focus-visible {
        background: var(--liste-ust);
        outline: none;
    }

    .alan select option:checked {
        border-left-color: var(--liste-secili);
        color: var(--liste-secili);
    }

    @media (prefers-reduced-motion: no-preference) {
        .alan select::picker(select) {
            transition: opacity 0.18s var(--kolay), translate 0.22s var(--kolay), overlay 0.22s allow-discrete, display 0.22s allow-discrete;
        }

        .alan select::picker(select):not(:popover-open) {
            opacity: 0;
            translate: 0 -6px;
        }

        .alan select::picker(select):popover-open {
            opacity: 1;
            translate: 0 0;
        }

        @starting-style {
            .alan select::picker(select):popover-open {
                opacity: 0;
                translate: 0 -6px;
            }
        }

        .alan select option {
            transition: background-color 0.15s var(--kolay), color 0.15s var(--kolay);
        }
    }
}

.alan input:focus,
.alan select:focus,
.alan textarea:focus {
    outline: 2px solid var(--altin);
    outline-offset: 4px;
    border-bottom-color: var(--altin);
}

.alan input:focus:not(:focus-visible),
.alan select:focus:not(:focus-visible),
.alan textarea:focus:not(:focus-visible) {
    outline: none;
}

.alan [aria-invalid="true"] {
    border-bottom-color: var(--alan-hata);
}

.alan-hata {
    color: var(--alan-hata);
    font-size: var(--t-kucuk);
    line-height: 1.45;
}

.sayac-satiri {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.sayac {
    margin-left: auto;
    color: var(--alan-etiket);
    font-size: var(--t-etiket);
    font-variant-numeric: tabular-nums;
}

.onay {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.onay input {
    flex: none;
    width: 22px;
    height: 22px;
    margin: 2px 0 0;
    accent-color: var(--altin);
    cursor: pointer;
}

.onay label {
    font-size: var(--t-kucuk);
    line-height: 1.5;
    color: var(--alan-renk);
    cursor: pointer;
}

.onay a {
    color: inherit;
}

.form-alt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 24px;
    margin-top: 8px;
}

.form-durum {
    flex: 1 1 240px;
    min-height: 1.5em;
    font-size: var(--t-kucuk);
    color: var(--alan-renk);
}

.form-durum[data-tur="hata"] {
    color: var(--alan-hata);
}

.form[aria-busy="true"] .form-durum {
    color: var(--alan-etiket);
}

/* Honeypot: ekranda ve ekran okuyucuda yok */
.bal {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Dairesel gönder düğmesi (referanstaki dairesel düğmenin kimlik yorumu: altın daire, koyu ok) */
.gonder-dairesi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border: 0;
    border-radius: 50%;
    background: var(--altin);
    color: var(--zemin);
    cursor: pointer;
    transition: transform 0.2s var(--kolay);
}

.gonder-dairesi .ikon {
    width: 26px;
    height: 26px;
    transition: transform 0.25s var(--kolay);
}

.gonder-dairesi:active {
    transform: scale(0.96);
}

.gonder-dairesi[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}

@media (hover: hover) {
    .gonder-dairesi:not([disabled]):hover .ikon {
        transform: translateX(4px);
    }
}

.gonder-etiket {
    font-size: var(--t-kucuk);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--alan-renk);
}

/* =====================================================================
   PROJELER — liste
   ===================================================================== */
.bant-ek {
    position: relative;
    margin-top: -1px;
    padding: 0 0 clamp(48px, 8vh, 96px);
    background: var(--zemin);
}

.bant-ek .proje-ozet {
    margin-top: 0;
    padding-top: 28px;
    border-top: 1px solid var(--cizgi-koyu);
}

/* Spotlight (referanstaki ızgara davranışının yorumu): bir projenin üzerine gelince diğerleri koyulaşır. */
.proje-kutu .cerceve::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--zemin);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s var(--kolay);
}

@media (hover: hover) {
    .proje-izgara:has(.proje-kutu a:hover) .proje-kutu a:not(:hover) .cerceve::after {
        opacity: 0.55;
    }
}

.proje-ozet {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 32px;
    margin-top: clamp(24px, 4vh, 40px);
    color: var(--gri-acik);
    font-size: var(--t-kucuk);
    letter-spacing: 0.04em;
}

.proje-ozet strong {
    font-weight: 400;
    color: var(--altin);
    font-size: var(--t-baslik3);
    letter-spacing: -0.01em;
    margin-right: 8px;
}

.filtreler {
    position: sticky;
    top: 0;
    z-index: var(--z-yapiskan);
    background: var(--kagit);
    border-bottom: 1px solid var(--cizgi-acik);
}

html[data-ust="acik"]:not(.ust-gizli) .filtreler {
    top: var(--ust-kompakt);
}

.filtreler-ic {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 40px;
    padding-block: 12px;
}

.filtre-grup {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 20px;
}

.filtre-grup-ad {
    font-size: var(--t-etiket);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--soluk);
    margin-right: 4px;
}

.filtre {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    color: var(--metin);
    text-decoration: none;
    font-size: var(--t-kucuk);
}

.filtre sup {
    font-size: 0.7em;
    color: var(--soluk);
    font-variant-numeric: tabular-nums;
}

.filtre::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8px;
    height: 1px;
    background: var(--zemin);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s var(--kolay);
}

.filtre:hover::after,
.filtre[aria-current="true"]::after {
    transform: scaleX(1);
}

.filtre[aria-current="true"] {
    color: var(--zemin);
}

.filtre-temizle {
    margin-left: auto;
}

.liste-bilgi {
    margin-bottom: clamp(32px, 5vh, 56px);
    color: var(--soluk);
    font-size: var(--t-kucuk);
}

/* Kademeli iki sütun: sağ sütun yarım kart aşağıda (eşit ızgara değil) */
.proje-izgara {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(48px, 8vh, 96px) clamp(24px, 3vw, 48px);
}

.proje-izgara > li:nth-child(even) {
    transform: translateY(clamp(48px, 14vw, 200px));
}

.proje-izgara-son {
    height: clamp(48px, 14vw, 200px);
}

.proje-kutu a {
    display: block;
    text-decoration: none;
    color: var(--zemin);
}

.proje-kutu .cerceve {
    aspect-ratio: 4 / 3;
}

.proje-kutu-ad {
    margin-top: 22px;
    font-size: clamp(1.75rem, 2.8vw, 2.625rem);
    line-height: 1.02;
    letter-spacing: -0.025em;
    color: var(--zemin);
}

.proje-kutu-alt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 24px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--cizgi-acik);
}

.proje-kutu-kesfet {
    margin-left: auto;
}

.proje-konum {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--t-kucuk);
    color: var(--metin);
}

.proje-konum .ikon {
    width: 18px;
    height: 18px;
    color: var(--altin);
}

.proje-kutu-alan {
    font-size: var(--t-kucuk);
    color: var(--soluk);
    font-variant-numeric: tabular-nums;
}

.proje-kutu-kesfet {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: var(--t-kucuk);
    letter-spacing: 0.04em;
}

.proje-kutu-kesfet .ikon {
    width: 20px;
    height: 20px;
    transition: transform 0.25s var(--kolay);
}

@media (hover: hover) {
    .proje-kutu a:hover .proje-kutu-kesfet .ikon {
        transform: translateX(4px);
    }
}

.bos-durum {
    padding: clamp(48px, 10vh, 120px) 0;
    max-width: 48ch;
}

.bos-durum p + p {
    margin-top: 16px;
}

@media (max-width: 767px) {
    .proje-izgara {
        grid-template-columns: 1fr;
    }

    .proje-izgara > li:nth-child(even) {
        transform: none;
    }

    .proje-izgara-son {
        display: none;
    }

    .filtreler {
        position: static;
    }
}

/* =====================================================================
   PROJE DETAYI
   ===================================================================== */
.proje-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    min-height: min(100svh, 980px);
    background: var(--zemin);
    color: var(--gri-govde);
}

.proje-hero-metin {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 24px;
    padding: calc(var(--ust-yukseklik) + 48px) clamp(24px, 4vw, 64px) clamp(48px, 8vh, 96px) var(--hat);
}

.proje-hero-baslik {
    font-size: clamp(3rem, 6.6vw, 7.5rem);
    line-height: 0.94;
    letter-spacing: -0.035em;
    color: var(--beyaz);
}

.proje-hero-konum {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--gri-acik);
    font-size: var(--t-lead);
}

.proje-hero-konum .ikon {
    width: 22px;
    height: 22px;
    color: var(--altin);
}

.proje-hero-tip {
    color: var(--gri-soluk);
    font-size: var(--t-etiket);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.proje-hero-gorsel {
    position: relative;
    overflow: hidden;
}

/* Görsel header'ın altında başlar: header her genişlikte koyu zeminin üstünde kalır (açık gökyüzü üstünde beyaz menü yok). */
.proje-hero-gorsel {
    margin-top: var(--ust-yukseklik);
}

.proje-hero-gorsel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 899px) {
    .proje-hero {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .proje-hero-gorsel {
        order: -1;
        aspect-ratio: 4 / 3;
    }

    .proje-hero-metin {
        padding-top: 40px;
    }
}

/* Anahtar rakamlar: dev tipografik satır, ince ayırıcılarla */
.anahtar-rakamlar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    border-top: 1px solid var(--cizgi-acik);
}

.anahtar-rakam {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: clamp(28px, 4vh, 48px) clamp(16px, 2vw, 32px) clamp(28px, 4vh, 48px) 0;
    border-bottom: 1px solid var(--cizgi-acik);
}

.anahtar-rakam dd {
    margin: 0;
}

.anahtar-rakam + .anahtar-rakam {
    padding-left: clamp(16px, 2vw, 32px);
    border-left: 1px solid var(--cizgi-acik);
}

.anahtar-deger {
    display: flex;
    align-items: baseline;
    gap: 0.2em;
    font-size: clamp(3.5rem, 7vw, 7rem);
    line-height: 0.86;
    letter-spacing: -0.04em;
    color: var(--zemin);
    font-variant-numeric: tabular-nums;
}

.anahtar-birim {
    font-size: clamp(1.125rem, 1.6vw, 1.5rem);
    letter-spacing: 0;
    color: var(--altin);
}

.anahtar-etiket {
    font-size: var(--t-kucuk);
    color: var(--soluk);
}

@media (max-width: 639px) {
    .anahtar-rakam dd {
    margin: 0;
}

.anahtar-rakam + .anahtar-rakam {
        padding-left: 0;
        border-left: 0;
    }
}

.proje-bilgi-izgara {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 48px 24px;
    margin-top: clamp(56px, 9vh, 112px);
}

.proje-aciklama {
    grid-column: 1 / span 7;
}

.proje-not {
    grid-column: 1 / span 7;
    color: var(--soluk);
    font-size: var(--t-kucuk);
    max-width: 60ch;
}

/* Proje sayfası formu: koyu bant içinde iki sütun */
.proje-form-izgara {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 40px 24px;
}

.proje-form-baslik {
    grid-column: 1 / span 5;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.proje-form-govde {
    grid-column: 7 / span 6;
}

@media (max-width: 899px) {
    .proje-form-baslik,
    .proje-form-govde {
        grid-column: 1 / -1;
    }
}

/* Önceki / sonraki proje */
.proje-gezinme {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--cizgi-acik);
}

.proje-gezinme a {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: clamp(28px, 5vh, 56px) 0;
    text-decoration: none;
    color: var(--zemin);
}

.proje-gezinme a + a {
    align-items: flex-end;
    text-align: right;
    border-left: 1px solid var(--cizgi-acik);
}

.proje-gezinme .etiket {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--soluk);
}

.proje-gezinme .etiket .ikon {
    width: 18px;
    height: 18px;
}

.proje-gezinme-ad {
    font-size: clamp(1.5rem, 3vw, 2.75rem);
    line-height: 1.05;
    letter-spacing: -0.025em;
    transition: transform 0.35s var(--kolay);
}

.proje-gezinme a:first-child .proje-gezinme-ad {
    padding-right: 24px;
}

.proje-gezinme a + a .proje-gezinme-ad {
    padding-left: 24px;
}

@media (hover: hover) {
    .proje-gezinme a:first-child:hover .proje-gezinme-ad { transform: translateX(-8px); }
    .proje-gezinme a + a:hover .proje-gezinme-ad { transform: translateX(8px); }
}

/* Diğer projeler: küçük yatay dizi */
.diger-projeler {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.diger-projeler a {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-decoration: none;
    color: var(--zemin);
}

.diger-projeler .cerceve {
    aspect-ratio: 1;
}

.diger-ad {
    font-size: 1.25rem;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.diger-konum {
    font-size: var(--t-etiket);
    letter-spacing: 0.08em;
    color: var(--soluk);
}

@media (max-width: 899px) {
    .diger-projeler {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* SSS (details/summary; JS'siz çalışır) */
.sss {
    border-top: 1px solid var(--cizgi-acik);
    max-width: 920px;
}

.sss details {
    border-bottom: 1px solid var(--cizgi-acik);
}

.sss summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 64px;
    padding: 18px 0;
    cursor: pointer;
    list-style: none;
    font-size: var(--t-baslik3);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--zemin);
}

.sss summary::-webkit-details-marker {
    display: none;
}

.sss summary .ikon {
    width: 24px;
    height: 24px;
    color: var(--altin);
    transition: transform 0.3s var(--kolay);
}

.sss details[open] summary .ikon {
    transform: rotate(45deg);
}

.sss-cevap {
    padding: 0 0 28px;
    max-width: 66ch;
}

/* =====================================================================
   PROJE HARİTASI
   ===================================================================== */
.harita-sahne {
    background: var(--zemin);
    color: var(--gri-govde);
    padding-bottom: var(--bolum);
}

.harita-izgara {
    display: flex;
    flex-direction: column;
    gap: clamp(40px, 6vh, 72px);
}

.harita-kap {
    position: relative;
}

.turkiye {
    width: 100%;
    height: auto;
    overflow: visible;
}

.turkiye-il {
    fill: var(--yuzey);
    stroke: rgba(255, 255, 255, 0.1);
    stroke-width: 0.6;
    vector-effect: non-scaling-stroke;
}

.turkiye-il.projeli {
    fill: rgba(133, 118, 78, 0.38);
    stroke: rgba(133, 118, 78, 0.7);
}

.turkiye-il.projeli.vurgu {
    fill: rgba(133, 118, 78, 0.62);
}

.turkiye-sinir {
    fill: none;
    stroke: rgba(255, 255, 255, 0.28);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.harita-isaret {
    cursor: pointer;
    outline: none;
}

.harita-isaret circle {
    fill: var(--altin);
    stroke: var(--zemin);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
    transition: transform 0.3s var(--kolay);
    transform-box: fill-box;
    transform-origin: center;
}

.harita-isaret .halka {
    fill: none;
    stroke: var(--altin);
    stroke-width: 1;
    opacity: 0.6;
}

.harita-isaret text {
    fill: var(--beyaz);
    font-family: var(--font);
    font-size: 21px;
    letter-spacing: 0.04em;
    pointer-events: none;
}

.harita-isaret text.adet {
    fill: var(--zemin);
    font-size: 16px;
    text-anchor: middle;
    dominant-baseline: central;
}

.harita-isaret.vurgu circle:not(.halka),
.harita-isaret:focus-visible circle:not(.halka) {
    transform: scale(1.15);
}

.harita-isaret:focus-visible .halka {
    stroke-width: 2;
    opacity: 1;
}

.harita-liste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0 clamp(24px, 3vw, 48px);
    border-top: 1px solid var(--cizgi-koyu);
}

.harita-il {
    border-bottom: 1px solid var(--cizgi-koyu);
    padding: 20px 0;
}

.harita-il.vurgu .harita-il-ad {
    color: var(--altin);
}

.harita-il-ust {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.harita-il-ad {
    font-size: var(--t-baslik3);
    color: var(--beyaz);
    letter-spacing: -0.01em;
    text-decoration: none;
}

.harita-il-adet {
    color: var(--gri-soluk);
    font-size: var(--t-kucuk);
    white-space: nowrap;
}

.harita-il ul {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.harita-il li a {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    color: var(--gri-govde);
    text-decoration: none;
    font-size: var(--t-kucuk);
}

.harita-il li a:hover {
    color: var(--beyaz);
    text-decoration: underline;
}

.harita-kaynak {
    margin-top: 24px;
    color: var(--gri-soluk);
    font-size: var(--t-etiket);
}


/* =====================================================================
   KURUMSAL
   ===================================================================== */
.sayfa-bant-gorsel {
    position: absolute;
    inset: 0;
}

.sayfa-bant-gorsel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Görselli bantta küçük metin (kırıntı) de AA sağlasın: %82 düz perde (QA: %72'de en kötü 3,6:1). */
.sayfa-bant-gorsel::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(3, 5, 5, 0.82);
}

.sekme-cubugu {
    position: sticky;
    top: 0;
    z-index: var(--z-yapiskan);
    background: var(--zemin);
    border-bottom: 1px solid var(--cizgi-koyu);
}

html[data-ust="acik"]:not(.ust-gizli) .sekme-cubugu {
    top: var(--ust-kompakt);
}

.sekme-cubugu ul {
    display: flex;
    gap: clamp(20px, 2.6vw, 40px);
    overflow-x: auto;
    scrollbar-width: none;
    padding-inline: var(--hat);
}

.sekme-cubugu ul::-webkit-scrollbar {
    display: none;
}

.sekme-cubugu a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 60px;
    white-space: nowrap;
    color: var(--gri-govde);
    text-decoration: none;
    font-size: var(--t-etiket);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.sekme-cubugu a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--altin);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s var(--kolay);
}

.sekme-cubugu a:hover,
.sekme-cubugu a[aria-current] {
    color: var(--beyaz);
}

.sekme-cubugu a:hover::after,
.sekme-cubugu a[aria-current]::after {
    transform: scaleX(1);
}

.kurumsal-bolum {
    scroll-margin-top: calc(var(--ust-kompakt) + 72px);
}

.iki-kolon {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 40px 24px;
}

.iki-kolon-baslik {
    grid-column: 1 / span 4;
}

.iki-kolon-govde {
    grid-column: 6 / span 7;
}

@media (max-width: 899px) {
    .iki-kolon-baslik,
    .iki-kolon-govde {
        grid-column: 1 / -1;
    }
}

.ilk-paragraf {
    color: var(--zemin);
    max-width: 44ch;
}

.bolum-koyu .ilk-paragraf {
    color: var(--beyaz);
}

.alinti-paragraf {
    font-size: clamp(1.5rem, 2.6vw, 2.5rem);
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--zemin);
    max-width: 30ch;
}

.bolum-koyu .alinti-paragraf {
    color: var(--beyaz);
}

/* Vizyon & Misyon: iki büyük ifade */
.vm-izgara {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(48px, 6vw, 96px);
}

.vm-oge {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-top: 28px;
    border-top: 1px solid var(--zemin);
}

.vm-ifade {
    font-size: clamp(1.5rem, 2.4vw, 2.25rem);
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--zemin);
}

@media (max-width: 767px) {
    .vm-izgara {
        grid-template-columns: 1fr;
    }
}

/* Numaralı liste (prensipler, SGÇ maddeleri) */
.numarali {
    counter-reset: madde;
    border-top: 1px solid var(--cizgi-acik);
}

.numarali li {
    counter-increment: madde;
    display: grid;
    grid-template-columns: 4em minmax(0, 1fr);
    gap: 16px;
    padding: 22px 0;
    border-bottom: 1px solid var(--cizgi-acik);
    font-size: var(--t-lead);
    line-height: 1.4;
    color: var(--zemin);
}

.numarali li::before {
    content: counter(madde, decimal-leading-zero);
    font-size: var(--t-etiket);
    letter-spacing: 0.12em;
    line-height: 2.2;
    color: var(--soluk);
    font-variant-numeric: tabular-nums;
}

.bolum-koyu .numarali,
.bolum-koyu .numarali li {
    border-color: var(--cizgi-koyu);
    color: var(--beyaz);
}

.bolum-koyu .numarali li::before {
    color: var(--altin);
}

/* İnsan kaynakları alt bölümleri */
.alt-bolumler {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px clamp(24px, 3vw, 48px);
    margin-top: clamp(48px, 7vh, 80px);
}

.alt-bolum {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 24px;
    border-top: 1px solid var(--cizgi-acik);
}

.alt-bolum:nth-child(2) {
    margin-top: clamp(24px, 4vw, 64px);
}

.alt-bolum:nth-child(3) {
    margin-top: clamp(48px, 8vw, 128px);
}

@media (max-width: 899px) {
    .alt-bolumler {
        grid-template-columns: 1fr;
    }

    .alt-bolum:nth-child(n) {
        margin-top: 0;
    }
}

/* Yönetim kurulu */
.yonetim {
    border-top: 1px solid var(--cizgi-acik);
}

.yonetim li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 8px 32px;
    padding: clamp(24px, 4vh, 40px) 0;
    border-bottom: 1px solid var(--cizgi-acik);
}

.yonetim-ad {
    font-size: clamp(2rem, 4.4vw, 4rem);
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--zemin);
}

.yonetim-unvan {
    color: var(--soluk);
    font-size: var(--t-kucuk);
    text-align: right;
}

@media (max-width: 639px) {
    .yonetim li {
        grid-template-columns: 1fr;
    }

    .yonetim-unvan {
        text-align: left;
    }
}

/* Başkanın mesajı (kurumsal sayfa) */
.mesaj-metin {
    max-width: 62ch;
}

.mesaj-metin p:first-child {
    font-size: var(--t-lead);
    line-height: 1.45;
    color: var(--beyaz);
}

.mesaj-kapanis {
    margin-top: 32px;
    color: var(--beyaz);
}

/* =====================================================================
   İLETİŞİM
   ===================================================================== */
.iletisim-izgara {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 56px 24px;
}

.genel-merkez {
    grid-column: 1 / span 5;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.iletisim-form-kap {
    grid-column: 7 / span 6;
}

.iletisim-satir {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--cizgi-acik);
}

.iletisim-satir a {
    color: var(--zemin);
    text-decoration: none;
    font-size: var(--t-lead);
    letter-spacing: -0.005em;
}

.iletisim-satir a:hover {
    text-decoration: underline;
}

.iletisim-satir address {
    color: var(--metin);
    font-size: var(--t-lead);
    line-height: 1.4;
}

.iletisim-eylemler {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
}

@media (max-width: 899px) {
    .genel-merkez,
    .iletisim-form-kap {
        grid-column: 1 / -1;
    }
}

/* Harita: önizleme kartı; iframe yalnız tıklayınca */
.harita {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--zemin);
    color: var(--gri-govde);
}

.harita-onizleme {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 16px;
    padding: clamp(20px, 3vw, 40px);
}

.harita-onizleme img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.55;
}

.harita-onizleme > *:not(img) {
    position: relative;
}

.harita-isaretci {
    position: absolute !important;
    left: 50%;
    top: 46%;
    width: 44px;
    height: 44px;
    margin: -44px 0 0 -22px;
    color: var(--altin);
}

.harita-onizleme p {
    color: var(--gri-acik);
    font-size: var(--t-kucuk);
    max-width: 44ch;
}

.harita-onizleme .dugmeler {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.harita .dugme-cizgi {
    color: var(--beyaz);
    border-color: rgba(255, 255, 255, 0.5);
}

.harita .dugme-cizgi:hover {
    border-color: var(--altin);
}

.harita.yuklendi .harita-onizleme {
    display: none;
}

.harita-cerceve {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* =====================================================================
   KURUMSAL KİMLİK (marka odası)
   ===================================================================== */
.logo-paneller {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px;
    margin-top: clamp(48px, 7vh, 80px);
}

.logo-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
    min-height: clamp(320px, 40vw, 520px);
    padding: 48px;
}

.logo-panel-koyu {
    background: var(--zemin);
}

.logo-panel-acik {
    background: var(--beyaz);
}

.logo-panel img {
    width: min(100%, 360px);
}

.logo-panel figcaption {
    font-size: var(--t-etiket);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.logo-panel-koyu figcaption {
    color: var(--gri-soluk);
}

.logo-panel-acik figcaption {
    color: var(--soluk);
}

.renk-ornekleri {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
    margin-top: 2px;
}

.renk-ornegi {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 4px;
    min-height: 160px;
    padding: 24px;
    font-size: var(--t-kucuk);
}

.renk-altin { background: var(--altin); color: var(--zemin); }
.renk-siyah { background: var(--zemin); color: var(--gri-acik); border: 1px solid var(--cizgi-koyu); }
.renk-beyaz { background: var(--beyaz); color: var(--zemin); }

.renk-ornegi strong {
    font-weight: 400;
    font-size: var(--t-baslik3);
    letter-spacing: -0.01em;
}

.indirmeler {
    border-top: 1px solid var(--cizgi-koyu);
}

.indirme a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px 32px;
    padding: clamp(24px, 4vh, 40px) 0;
    border-bottom: 1px solid var(--cizgi-koyu);
    color: var(--beyaz);
    text-decoration: none;
}

.indirme-ad {
    font-size: clamp(1.5rem, 3vw, 2.75rem);
    line-height: 1.05;
    letter-spacing: -0.025em;
    transition: transform 0.35s var(--kolay);
}

.indirme-aciklama {
    display: block;
    margin-top: 8px;
    color: var(--gri-soluk);
    font-size: var(--t-kucuk);
    letter-spacing: 0;
}

.indirme-bilgi {
    color: var(--gri-soluk);
    font-size: var(--t-kucuk);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.indirme .ikon {
    width: 28px;
    height: 28px;
    color: var(--altin);
}

@media (hover: hover) {
    .indirme a:hover .indirme-ad {
        transform: translateX(10px);
    }
}

@media (max-width: 767px) {
    .logo-paneller,
    .renk-ornekleri {
        grid-template-columns: 1fr;
    }

    .indirme a {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .indirme-bilgi {
        grid-column: 1;
    }

    .indirme .ikon {
        grid-row: 1;
        grid-column: 2;
    }
}

/* =====================================================================
   SOSYAL MEDYA (bağlantı sayfası, mobil öncelikli)
   ===================================================================== */
.baglanti-sayfa {
    min-height: 100svh;
    background: var(--zemin);
    color: var(--gri-govde);
    padding: calc(var(--ust-yukseklik) + 32px) var(--kenar) 64px;
}

.baglanti-ic {
    max-width: 560px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.baglanti-logo {
    width: 180px;
    margin-inline: auto;
}

.baglanti-baslik {
    text-align: center;
    font-size: var(--t-baslik3);
    color: var(--beyaz);
}

.baglanti-baslik span {
    display: block;
    margin-top: 6px;
    color: var(--gri-soluk);
    font-size: var(--t-kucuk);
    letter-spacing: 0.04em;
}

.baglantilar {
    border-top: 1px solid var(--cizgi-koyu);
}

.baglantilar a {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    min-height: 72px;
    border-bottom: 1px solid var(--cizgi-koyu);
    color: var(--beyaz);
    text-decoration: none;
    font-size: 1.25rem;
}

.baglantilar .ikon {
    width: 22px;
    height: 22px;
    color: var(--altin);
    justify-self: center;
}

.baglantilar .ok {
    width: 20px;
    height: 20px;
    color: var(--gri-soluk);
    transition: transform 0.25s var(--kolay);
}

.baglantilar small {
    display: block;
    color: var(--gri-soluk);
    font-size: var(--t-etiket);
    letter-spacing: 0.04em;
}

@media (hover: hover) {
    .baglantilar a:hover .ok {
        transform: translate(3px, -3px);
        color: var(--altin);
    }
}

/* =====================================================================
   YASAL METİNLER
   ===================================================================== */
.yasal-metin {
    max-width: 72ch;
}

.yasal-metin h2 {
    margin: 2.2em 0 0.7em;
    font-size: var(--t-baslik3);
}

.yasal-metin p,
.yasal-metin li {
    margin-top: 0.8em;
}

.yasal-metin ul {
    padding-left: 1.2em;
    list-style: square;
}

.yasal-metin ul li::marker {
    color: var(--altin);
}

.yasal-bilgi {
    margin: 1.4em 0 0;
    border-top: 1px solid var(--cizgi-acik);
}

.yasal-bilgi div {
    display: grid;
    grid-template-columns: minmax(140px, 220px) minmax(0, 1fr);
    gap: 4px 24px;
    padding: 14px 0;
    border-bottom: 1px solid var(--cizgi-acik);
}

.yasal-bilgi dt {
    color: var(--soluk);
}

.yasal-bilgi dd {
    margin: 0;
}

.yer-tutucu {
    padding: 0 6px;
    border: 1px dashed var(--uyari-acik);
    color: var(--uyari-acik);
}

.yasal-tarih {
    margin-top: 3em !important;
    color: var(--soluk);
    font-size: var(--t-kucuk);
}

@media (max-width: 639px) {
    .yasal-bilgi div {
        grid-template-columns: 1fr;
    }
}

/* =====================================================================
   HATA (404 / 500): kapalı monogram kapısı
   ===================================================================== */
.hata-sahne {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 100svh;
    overflow: hidden;
    background: var(--zemin);
    color: var(--gri-govde);
    padding: calc(var(--ust-yukseklik) + 40px) 0 80px;
}

.hata-monogram {
    position: absolute;
    right: -6vw;
    top: 50%;
    width: min(60vw, 720px);
    height: auto;
    color: var(--altin);
    opacity: 0.12;
    transform: translateY(-50%);
    pointer-events: none;
}

.hata-kod {
    color: var(--altin);
    font-size: var(--t-etiket);
    letter-spacing: 0.2em;
}

.hata-baslik {
    margin-top: 24px;
    max-width: 14ch;
    font-size: clamp(2.75rem, 7vw, 6.5rem);
    line-height: 0.96;
    letter-spacing: -0.035em;
    color: var(--beyaz);
}

.hata-metin {
    margin-top: 24px;
    max-width: 46ch;
    color: var(--gri-acik);
}

.hata-baglantilar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    margin-top: 40px;
}

/* =====================================================================
   İMZA: Başkanın Mesajı sahnesinde görünür olunca çizilerek yazılır (az harekette ve JS'siz dolgu doğrudan)
   Zamanlamalar üretilmiş imza animasyonundan (Docs/UYGULAMA-C6-ONIZLEME.md §4); elle düzenlemeyin.
   ===================================================================== */
@keyframes imza-yaz {
    from { stroke-dashoffset: 1; }
    to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: no-preference) {
    .imza-sahne.bekliyor:not(.yazildi) .imza-dolgu {
        mask: url("#imza-maske");
    }

    .imza-sahne.bekliyor .imza-kalemler > * {
        stroke-dasharray: 1 2;
        stroke-dashoffset: 1;
    }

    .imza-sahne.yaz .imza-kalemler > * {
        animation: imza-yaz linear both;
    }
}

/* İmza darbe zamanlamaları (ÜRETİLMİŞ: imza3_animasyon.py + imza5_sahiplik.py;
   63 maske yolu, yazı 0–1594 ms). Yalnız seçici ön eki değişti (.acilis → .imza-sahne.yaz). Elle düzenlemeyin. */
.imza-sahne.yaz .imza-kalemler > :nth-child(1) { animation-delay: 0ms; animation-duration: 99ms; }
.imza-sahne.yaz .imza-kalemler > :nth-child(2) { animation-delay: 110ms; animation-duration: 16ms; }
.imza-sahne.yaz .imza-kalemler > :nth-child(3) { animation-delay: 134ms; animation-duration: 16ms; }
.imza-sahne.yaz .imza-kalemler > :nth-child(4) { animation-delay: 160ms; animation-duration: 141ms; }
.imza-sahne.yaz .imza-kalemler > :nth-child(5) { animation-delay: 311ms; animation-duration: 29ms; }
.imza-sahne.yaz .imza-kalemler > :nth-child(6) { animation-delay: 350ms; animation-duration: 70ms; }
.imza-sahne.yaz .imza-kalemler > :nth-child(7) { animation-delay: 431ms; animation-duration: 16ms; }
.imza-sahne.yaz .imza-kalemler > :nth-child(8) { animation-delay: 448ms; animation-duration: 16ms; }
.imza-sahne.yaz .imza-kalemler > :nth-child(9) { animation-delay: 466ms; animation-duration: 16ms; }
.imza-sahne.yaz .imza-kalemler > :nth-child(10) { animation-delay: 480ms; animation-duration: 257ms; }
.imza-sahne.yaz .imza-kalemler > :nth-child(11) { animation-delay: 747ms; animation-duration: 143ms; }
.imza-sahne.yaz .imza-kalemler > :nth-child(12) { animation-delay: 901ms; animation-duration: 29ms; }
.imza-sahne.yaz .imza-kalemler > :nth-child(13) { animation-delay: 941ms; animation-duration: 88ms; }
.imza-sahne.yaz .imza-kalemler > :nth-child(14) { animation-delay: 1040ms; animation-duration: 22ms; }
.imza-sahne.yaz .imza-kalemler > :nth-child(15) { animation-delay: 1072ms; animation-duration: 16ms; }
.imza-sahne.yaz .imza-kalemler > :nth-child(16) { animation-delay: 1097ms; animation-duration: 16ms; }
.imza-sahne.yaz .imza-kalemler > :nth-child(17) { animation-delay: 1120ms; animation-duration: 23ms; }
.imza-sahne.yaz .imza-kalemler > :nth-child(18) { animation-delay: 1154ms; animation-duration: 16ms; }
.imza-sahne.yaz .imza-kalemler > :nth-child(19) { animation-delay: 1172ms; animation-duration: 16ms; }
.imza-sahne.yaz .imza-kalemler > :nth-child(20) { animation-delay: 1184ms; animation-duration: 16ms; }
.imza-sahne.yaz .imza-kalemler > :nth-child(21) { animation-delay: 1207ms; animation-duration: 32ms; }
.imza-sahne.yaz .imza-kalemler > :nth-child(22) { animation-delay: 1249ms; animation-duration: 16ms; }
.imza-sahne.yaz .imza-kalemler > :nth-child(23) { animation-delay: 1273ms; animation-duration: 56ms; }
.imza-sahne.yaz .imza-kalemler > :nth-child(24) { animation-delay: 1340ms; animation-duration: 18ms; }
.imza-sahne.yaz .imza-kalemler > :nth-child(25) { animation-delay: 1369ms; animation-duration: 16ms; }
.imza-sahne.yaz .imza-kalemler > :nth-child(26) { animation-delay: 1395ms; animation-duration: 28ms; }
.imza-sahne.yaz .imza-kalemler > :nth-child(27) { animation-delay: 1434ms; animation-duration: 34ms; }
.imza-sahne.yaz .imza-kalemler > :nth-child(28) { animation-delay: 1479ms; animation-duration: 51ms; }
.imza-sahne.yaz .imza-kalemler > :nth-child(29) { animation-delay: 1540ms; animation-duration: 28ms; }
.imza-sahne.yaz .imza-kalemler > :nth-child(30) { animation-delay: 1578ms; animation-duration: 16ms; }
.imza-sahne.yaz .imza-kalemler > :nth-child(31) { animation-delay: 1369ms; animation-duration: 16ms; }
.imza-sahne.yaz .imza-kalemler > :nth-child(32) { animation-delay: 1299ms; animation-duration: 16ms; }
.imza-sahne.yaz .imza-kalemler > :nth-child(33) { animation-delay: 1291ms; animation-duration: 16ms; }
.imza-sahne.yaz .imza-kalemler > :nth-child(34) { animation-delay: 1300ms; animation-duration: 16ms; }
.imza-sahne.yaz .imza-kalemler > :nth-child(35) { animation-delay: 1200ms; animation-duration: 16ms; }
.imza-sahne.yaz .imza-kalemler > :nth-child(36) { animation-delay: 1273ms; animation-duration: 16ms; }
.imza-sahne.yaz .imza-kalemler > :nth-child(37) { animation-delay: 1143ms; animation-duration: 16ms; }
.imza-sahne.yaz .imza-kalemler > :nth-child(38) { animation-delay: 1226ms; animation-duration: 16ms; }
.imza-sahne.yaz .imza-kalemler > :nth-child(39) { animation-delay: 1184ms; animation-duration: 16ms; }
.imza-sahne.yaz .imza-kalemler > :nth-child(40) { animation-delay: 1250ms; animation-duration: 16ms; }
.imza-sahne.yaz .imza-kalemler > :nth-child(41) { animation-delay: 1214ms; animation-duration: 16ms; }
.imza-sahne.yaz .imza-kalemler > :nth-child(42) { animation-delay: 1057ms; animation-duration: 16ms; }
.imza-sahne.yaz .imza-kalemler > :nth-child(43) { animation-delay: 1040ms; animation-duration: 16ms; }
.imza-sahne.yaz .imza-kalemler > :nth-child(44) { animation-delay: 1128ms; animation-duration: 16ms; }
.imza-sahne.yaz .imza-kalemler > :nth-child(45) { animation-delay: 134ms; animation-duration: 16ms; }
.imza-sahne.yaz .imza-kalemler > :nth-child(46) { animation-delay: 913ms; animation-duration: 16ms; }
.imza-sahne.yaz .imza-kalemler > :nth-child(47) { animation-delay: 401ms; animation-duration: 16ms; }
.imza-sahne.yaz .imza-kalemler > :nth-child(48) { animation-delay: 388ms; animation-duration: 16ms; }
.imza-sahne.yaz .imza-kalemler > :nth-child(49) { animation-delay: 317ms; animation-duration: 16ms; }
.imza-sahne.yaz .imza-kalemler > :nth-child(50) { animation-delay: 340ms; animation-duration: 16ms; }
.imza-sahne.yaz .imza-kalemler > :nth-child(51) { animation-delay: 340ms; animation-duration: 16ms; }
.imza-sahne.yaz .imza-kalemler > :nth-child(52) { animation-delay: 110ms; animation-duration: 16ms; }
.imza-sahne.yaz .imza-kalemler > :nth-child(53) { animation-delay: 150ms; animation-duration: 16ms; }
.imza-sahne.yaz .imza-kalemler > :nth-child(54) { animation-delay: 1358ms; animation-duration: 16ms; }
.imza-sahne.yaz .imza-kalemler > :nth-child(55) { animation-delay: 1329ms; animation-duration: 16ms; }
.imza-sahne.yaz .imza-kalemler > :nth-child(56) { animation-delay: 1265ms; animation-duration: 16ms; }
.imza-sahne.yaz .imza-kalemler > :nth-child(57) { animation-delay: 1136ms; animation-duration: 16ms; }
.imza-sahne.yaz .imza-kalemler > :nth-child(58) { animation-delay: 901ms; animation-duration: 16ms; }
.imza-sahne.yaz .imza-kalemler > :nth-child(59) { animation-delay: 125ms; animation-duration: 16ms; }
.imza-sahne.yaz .imza-kalemler > :nth-child(60) { animation-delay: 482ms; animation-duration: 16ms; }
.imza-sahne.yaz .imza-kalemler > :nth-child(61) { animation-delay: 380ms; animation-duration: 16ms; }
.imza-sahne.yaz .imza-kalemler > :nth-child(62) { animation-delay: 78ms; animation-duration: 16ms; }
.imza-sahne.yaz .imza-kalemler > :nth-child(63) { animation-delay: 160ms; animation-duration: 16ms; }

/* =====================================================================
   EK: görsel notu, galeri + ışık kutusu (yerel <dialog>), diğer projeler başlığı
   ===================================================================== */
.proje-hero-gorsel .gorsel-notu {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 8px 14px;
    background: var(--zemin);
    color: var(--gri-soluk);
    font-size: var(--t-etiket);
    letter-spacing: 0.04em;
}

.diger-ust {
    margin-top: clamp(64px, 10vh, 120px);
    margin-bottom: 32px;
}

.galeri {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.galeri li[hidden] {
    display: none;
}

.galeri .cerceve {
    display: block;
    aspect-ratio: 4 / 3;
}

.isik-kutusu {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 64px var(--kenar);
    border: 0;
    background: var(--zemin);
}

.isik-kutusu::backdrop {
    background: var(--zemin);
}

.isik-kutusu img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.isik-kutusu .panel-kapat {
    position: absolute;
    top: 12px;
    right: calc(var(--kenar) - 12px);
    color: var(--beyaz);
    margin: 0;
}

.bosluk-ust { margin-top: 32px; }
.bosluk-ust-buyuk { margin-top: clamp(48px, 8vh, 96px); }
.acik-metin { color: var(--gri-acik); }
.form-giris { margin: 12px 0 32px; color: var(--soluk); }

.iletisim-tel {
    display: inline-block;
}

/* Haber makalesi */
.haber-makale .kap {
    max-width: calc(1100px + 2 * var(--kenar));
}

.haber-giris {
    margin-top: 16px;
    max-width: 34ch;
}

.haber-gorsel {
    margin-block: clamp(40px, 7vh, 72px);
}

.haber-gorsel-dar {
    max-width: 780px;
}

.haber-govde {
    max-width: 68ch;
}

.haber-govde h2 {
    margin-top: 1.6em;
}

.haber-kaynak {
    padding-top: 24px;
    border-top: 1px solid var(--cizgi-acik);
    color: var(--soluk);
    font-size: var(--t-kucuk);
}

.haber-kaynak a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--zemin);
}

.haber-kaynak .ikon {
    width: 16px;
    height: 16px;
}

.diger-haberler {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px 24px;
}

/* Basında Biz dizini: dev gün rakamı + başlık + görsel */
.haber-dizini {
    border-top: 1px solid var(--zemin);
}

.haber-satir a {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr);
    gap: 24px clamp(24px, 3vw, 48px);
    align-items: start;
    padding: clamp(32px, 5vh, 56px) 0;
    border-bottom: 1px solid var(--cizgi-acik);
    color: var(--zemin);
    text-decoration: none;
}

.haber-gun {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.haber-gun-sayi {
    font-size: clamp(5rem, 11vw, 10rem);
    line-height: 0.8;
    letter-spacing: -0.05em;
    font-variant-numeric: tabular-nums;
    color: var(--altin);
}

.haber-gun-ay {
    font-size: var(--t-etiket);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--soluk);
}

.haber-satir-metin {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.haber-satir-baslik {
    font-size: clamp(1.75rem, 3vw, 2.75rem);
    line-height: 1.08;
    letter-spacing: -0.025em;
    transition: transform 0.35s var(--kolay);
}

.metin-baglanti-ic {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: var(--t-kucuk);
    letter-spacing: 0.04em;
}

.metin-baglanti-ic .ikon {
    width: 20px;
    height: 20px;
    transition: transform 0.25s var(--kolay);
}

.haber-satir-gorsel {
    display: block;
    aspect-ratio: 4 / 3;
}

@media (hover: hover) {
    .haber-satir a:hover .haber-satir-baslik { transform: translateX(8px); }
    .haber-satir a:hover .metin-baglanti-ic .ikon { transform: translateX(4px); }
}

@media (max-width: 899px) {
    .haber-satir a {
        grid-template-columns: 1fr;
    }

    .haber-gun {
        flex-direction: row;
        align-items: baseline;
        gap: 16px;
    }
}

/* Numaralı listeler mobilde dar numara sütunu */
@media (max-width: 639px) {
    .numarali li {
        grid-template-columns: 2.25rem minmax(0, 1fr);
        gap: 8px;
        font-size: 1.125rem;
    }
}

/* Mobil proje haritası: il adları listede; haritada işaretler büyür, ad etiketleri gizlenir */
@media (max-width: 767px) {
    .harita-isaret text:not(.adet) {
        display: none;
    }

    .harita-isaret circle {
        transform: scale(1.9);
    }

    .harita-isaret .halka {
        display: none;
    }

    .harita-isaret text.adet {
        font-size: 30px;
    }

    .hero-not {
        left: auto;
        right: var(--hat);
        bottom: auto;
        top: calc(var(--ust-yukseklik) + 4px);
    }
}

/* Proje listesi: filtre çubuğu mobilde tek satır yatay kaydırma */
@media (max-width: 767px) {
    .filtreler-ic {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        white-space: nowrap;
    }

    .filtreler-ic::-webkit-scrollbar {
        display: none;
    }

    .filtre-grup {
        flex-wrap: nowrap;
    }
}

/* Panel açıkken header menüsü panel kenarında kesik görünmesin */
html.kilitli .ust-nav,
html.kilitli .ust-tel {
    opacity: 0;
}

/* Mobilde kırıntının son öğesi (H1 ile aynı) gizlenir */
@media (max-width: 767px) {
    .kirinti li[aria-current="page"] {
        display: none;
    }

    .kirinti li:nth-last-child(2)::after {
        content: "";
    }
}

.kirinti a,
.alt-iletisim address a,
.alt-yasal a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.filtre sup {
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

/* Proje kartı hover: meta çizgisi koyulaşır (dokunmatikte hover bilgisi yok) */
@media (hover: hover) {
    .proje-kutu a:hover .proje-kutu-alt,
    .proje-kutu a:focus-visible .proje-kutu-alt {
        border-top-color: var(--zemin);
    }
}

/* Bağlantı sayfası (link-in-bio): kenar sekmeleri ve alt çubuk yok */
.baglanti-govde .kenar,
.baglanti-govde .alt-cubuk {
    display: none;
}

.baglanti-govde {
    padding-bottom: 0;
}

.renk-beyaz {
    outline: 1px solid var(--cizgi-acik);
    outline-offset: -1px;
}

/* Filtre çubuğu liste bölümünün içinde: bölüm bitince yapışkanlık da biter */
.proje-liste-bolum {
    padding-top: 0;
}

.proje-liste-bolum > .kap {
    padding-top: clamp(48px, 8vh, 96px);
}

.kirinti ol {
    align-items: center;
}

/* Mobil Kat Kesiti: katlar yukarıdan aşağı sağa doğru kademelenir (basamak fikri dar ekranda da okunur) */
@media (max-width: 899px) {
    .kesit-kat:nth-child(2) { margin-left: 16px; }
    .kesit-kat:nth-child(3) { margin-left: 32px; }
    .kesit-kat:nth-child(4) { margin-left: 48px; }
    .kesit-kat:nth-child(5) { margin-left: 64px; }
}

/* =====================================================================
   ŞERİTLİ ÜST ÇUBUK (seçenek) — appsettings "Tasarim:UstCubuk": "Serit" ya da adreste ?ust=serit.
   Örnek alınan düzen: her zaman görünen düz #030505 şerit; hero ve sayfa bantları şeridin altından
   başlar. Saydam çubuktaki iki ani değişim yok: sahne bitince kâğıt zemine/koyu metne/monograma geçiş ve aşağı kayınca
   gizlenme. Bütün kurallar html.ust-serit altında: ayar "Saydam" olunca (ya da bu dosya çıkarılınca) önceki davranış
   olduğu gibi döner. JS tarafı: site.js "Üst çubuk" bölümü (ust-serit sınıfında gizleme/açık zemin yok).
   ===================================================================== */
html.ust-serit {
    --ust-yukseklik: 76px;
    --ust-kompakt: 76px;
}

@media (max-width: 767px) {
    html.ust-serit {
        --ust-yukseklik: 64px;
        --ust-kompakt: 64px;
    }
}

/* Şeridin zemini: saydam çubuğun kâğıt katmanı koyu zemin olarak hep açık. */
html.ust-serit .ust::before {
    opacity: 1;
    background: var(--zemin);
    border-bottom-color: transparent;
}

/* Logo zaten düz siyah zeminde: plakaya gerek yok, logo ortak hatta. */
html.ust-serit .ust-logo {
    margin-left: 0;
    padding-inline: 0;
    background: none;
}

/* Siyah şeritte altın ikon kılavuza uygun (altın + #030505). */
html.ust-serit .ust-tel .ikon {
    color: var(--altin);
}

/* Açılış kapısı: şeridin siyah zemini baştan yerinde (kapının koyu yarılarıyla aynı renk); yalnız içindeki logo ve menü
   1,05 sn'de belirir. Önceden şeridin tamamı belirdiği için kapı açılırken üstte açık kâğıt zemin görünüyor, sonra siyah
   şerit üstüne doluyordu. */
html.ust-serit.kapi-acilis .ust {
    animation: none;
}

html.ust-serit.kapi-acilis .ust-ic {
    animation: belir-ust 0.6s var(--kolay) 1.05s both;
}

/* Hero şeridin altından başlar ve ekranın kalanını doldurur. */
html.ust-serit .hero {
    margin-top: var(--ust-yukseklik);
    height: calc(100vh - var(--ust-yukseklik));
    height: calc(100svh - var(--ust-yukseklik));
    min-height: 520px;
}

/* Yapışkan öğeler şeridin altına yapışır (şerit gizlenmez). */
html.ust-serit .filtreler,
html.ust-serit .sekme-cubugu {
    top: var(--ust-yukseklik);
}

@media (max-width: 767px) {
    /* Hero notu artık hero'nun kendi üst kenarına göre (şerit hero'nun dışında). */
    html.ust-serit .hero-not {
        top: 12px;
    }
}