/*
    KONUT YERLESKESI - yerlesim ailesi L19.

    =====================================================================
    REFERANS: belgradearbor.rs (Awwwards, 2026)
    =====================================================================
    Abdullah ikinci kez hakli olarak sitem etti: ilk surum referansin
    yalnizca rengini ve dizgisini aliyordu; hareketli alanlarini, alt
    sayfalarini ve videolarini atliyordu. "Benzemesini istiyorum, tek
    tek soyletme."

    Bu surum sitenin HER sayfasi ve her bolumu tek tek cikarilarak
    yazildi (envanter: docs/session-notes/2026-09-14-belgradearbor-
    envanter.md). Alinan sey TUR KALIBIDIR; isaretleme, metin, gorsel ve
    marka kopyalanmadi - gorseller ve videolar bu tema icin uretildi.

    =====================================================================
    SAYFALAR
    =====================================================================
      index.html           ana sayfa - kaydirmayla ilerleyen anlati
      kesif.html           etkilesimli kesif (referanstaki 3D sayfasi)
      daireler.html        daire bulucu: suzgec + plan kartlari
      daire.html           tek daire ayrintisi
      is-alanlari.html     ofis alanlari (lacivert kip)
      ticari-alanlar.html  ofis/dukkan bulucu (lacivert kip)
      yatirimci.html       yatirimci hakkinda
      iletisim.html        uc sekmeli talep sayfasi
      404.html

    =====================================================================
    BETIK BIR GELISTIRMEDIR
    =====================================================================
    `assets/js/yerleske.js` hareketi veriyor (acilis sayaci, kelime kelime
    beliren basliklar, sabitlenen anlati, yatay hava cekimi, sayfa gecis
    perdesi, bulucu suzgeci). Betik yoksa `html.js` sinifi da yoktur ve
    bu dosyadaki butun "gizle-sonra-goster" kurallari devre disi kalir:
    icerik oldugu gibi gorunur, secimler radyo dugmesi + `:has()` ile
    yine calisir.
    =====================================================================
*/

/* ===================================================================
   YAZI TIPLERI
   Work Sans (SIL OFL) + Instrument Serif (SIL OFL). Referanstaki
   PP Editorial Old ticari; en yakin serbest karsiligi Instrument Serif.
   Work Sans degisken: alt kume basina tek dosya, agirlik bir ARALIK.
   =================================================================== */

@font-face {
    font-family: 'Work Sans';
    src: url('../fonts/work-sans-400-latin.woff2') format('woff2');
    font-weight: 300 600;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Work Sans';
    src: url('../fonts/work-sans-400-latin-ext.woff2') format('woff2');
    font-weight: 300 600;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Instrument Serif';
    src: url('../fonts/instrument-serif-400-latin.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Instrument Serif';
    src: url('../fonts/instrument-serif-400-latin-ext.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Instrument Serif';
    src: url('../fonts/instrument-serif-400-italic-latin.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Instrument Serif';
    src: url('../fonts/instrument-serif-400-italic-latin-ext.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ===================================================================
   JETONLAR - referanstan olculdu
   =================================================================== */

:root {
    /* Cam yesili: metin, koyu paneller, gecis perdesi. Kremde 11.56. */
    --ana: #2E3A26;
    /* Menunun cam zemini ve en koyu panel. */
    --ana-koyu: #1F261E;
    /* Adacayi: ikincil metin ve ince cizgiler. Kremde 4.93. */
    --ana-acik: #60735C;

    /*
        BRONZ: logo, buyuk basliklar, etkin hap. Kremde 3.44 - YALNIZCA
        buyuk metin ve grafik. Govde boyutunda `--vurgu-koyu` (5.76).
    */
    --vurgu: #A68150;
    --vurgu-koyu: #7C5E36;
    /*
        LIMON: referansin imza rengi. YALNIZCA koyu zeminde - ust
        yazilar, italik uzerine gelme kopyasi, ilerleme cizgisi.
        Kremde okunmaz ve orada kullanilmaz.
    */
    --vurgu-acik: #E7FD55;

    --zemin: #FDFBEF;
    --zemin-2: #F4F0DB;

    --metin: #2E3A26;
    --metin-2: #5C6B54;

    /* Kum: dev basliklar koyu fotografta, ince kenarlar kremde. */
    --cizgi: #CCBF99;
    /* Lacivert: "Kokleriniz" blogu ve is alanlari kipi. */
    --koyu: #314759;

    --yumusak: 1.25rem;
    --hap: 1.75rem;
    --kenar: clamp(1.25rem, 3.4vw, 3rem);
    --serif: 'Instrument Serif', 'Times New Roman', serif;
    --sans: 'Work Sans', system-ui, sans-serif;
    --akis: cubic-bezier(.65, 0, .35, 1);
    --cikis: cubic-bezier(.22, 1, .36, 1);
}

/* ===================================================================
   TEMEL
   =================================================================== */

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

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

body {
    margin: 0;
    background: var(--zemin);
    color: var(--metin);
    font-family: var(--sans);
    font-size: 1rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Tasan dev basliklar ve kenardan giren agaclar sayfayi genisletmesin.
   `clip` - `hidden` degil: `hidden` bir kaydirma kabi yaratir ve
   icindeki `position: sticky` sahneleri bozar. */
main, footer { overflow-x: clip; }

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

a { color: inherit; }

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

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

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

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

.atla {
    position: absolute;
    left: -9999px;
    top: 1rem;
    z-index: 200;
    background: var(--ana);
    color: var(--zemin);
    padding: .75rem 1.25rem;
    border-radius: 999px;
}

.atla:focus { left: 1rem; }

.gizli {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.kap {
    width: 100%;
    max-width: 100rem;
    margin-inline: auto;
    padding-inline: var(--kenar);
}

/* ===================================================================
   DIZGI - referansin olcek basamaklari
   =================================================================== */

.dev, .b1, .b2, .b3 {
    font-family: var(--serif);
    font-weight: 400;
    letter-spacing: -.01em;
}

/* "KONUM", "DAIRELER" - fotografin uzerinde duran dev kelime. */
.dev {
    font-size: clamp(3.6rem, 12.6vw, 14.375rem);
    line-height: .86;
    text-transform: uppercase;
    letter-spacing: -.02em;
}

.b1 { font-size: clamp(3rem, 6.4vw, 6.25rem); line-height: 1; }
.b2 { font-size: clamp(2.1rem, 3.9vw, 3.5rem); line-height: 1.08; letter-spacing: .005em; }
.b3 { font-size: clamp(1.6rem, 2.4vw, 2.25rem); line-height: 1.15; }

.ust-yazi, .kucuk, .menu-yazi {
    font-family: var(--sans);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .8125rem;
    line-height: 1.3;
}

.kucuk { font-size: .75rem; letter-spacing: .08em; }

.paragraf { font-size: 1rem; line-height: 1.45; max-width: 34rem; }
.ayrinti { font-size: 1.125rem; line-height: 1.35; font-weight: 500; }

.italik { font-style: italic; }

/* Koyu zeminlerde ust yazi limon; kremde bronzun okunur ucu. */
.ust-yazi { color: var(--vurgu-koyu); }
.koyu-zemin .ust-yazi, .foto-zemin .ust-yazi, .yesil-panel .ust-yazi, .lacivert-panel .ust-yazi { color: var(--vurgu-acik); }

.koyu-zemin { background: var(--ana); color: var(--zemin-2); }
.koyu-zemin .paragraf, .yesil-panel .paragraf, .lacivert-panel .paragraf { color: var(--zemin-2); }

/* Referanstaki "yumusak isik" paneli: sag alttan acilan yesil. */
.yesil-panel {
    background: radial-gradient(120% 120% at 100% 100%, color-mix(in srgb, var(--ana-acik) 45%, var(--ana)), var(--ana));
    color: var(--zemin-2);
}

.lacivert-panel {
    background: radial-gradient(120% 120% at 100% 100%, color-mix(in srgb, var(--koyu) 70%, var(--ana-acik)), var(--koyu));
    color: var(--zemin-2);
}

.metin-baglanti {
    display: inline-flex;
    gap: .6rem;
    align-items: center;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .8125rem;
    text-decoration: underline;
    text-underline-offset: .35em;
    text-decoration-thickness: 1px;
}

.koyu-zemin .metin-baglanti, .foto-zemin .metin-baglanti { color: var(--vurgu-acik); }

/* ===================================================================
   DUGMELER - yazi yukari kayar, kopyasi alttan gelir
   =================================================================== */

.dugme {
    --dugme-kenar: var(--ana-acik);
    --dugme-zemin: transparent;
    --dugme-renk: var(--zemin-2);
    --dugme-ustu: color-mix(in srgb, var(--ana-acik) 40%, transparent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 13.75rem;
    min-height: 3.25rem;
    padding: 0 1.5rem;
    border: 1px solid var(--dugme-kenar);
    border-radius: 999px;
    background: var(--dugme-zemin);
    color: var(--dugme-renk);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .875rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color .5s var(--akis), border-color .5s var(--akis);
}

.dugme:hover { background: var(--dugme-ustu); }

.dugme-yuva {
    position: relative;
    display: block;
    overflow: hidden;
    padding-block: .2em;
}

.dugme-metin {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    transition: transform .6s var(--akis);
}

.dugme-metin + .dugme-metin {
    position: absolute;
    inset: 0;
    transform: translateY(110%);
}

.dugme:hover .dugme-metin { transform: translateY(-110%); }
.dugme:hover .dugme-metin + .dugme-metin { transform: translateY(0); }

.dugme svg {
    width: 1.75rem;
    height: .75rem;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1;
}

/* Kremde: koyu cizgili. */
.dugme-acik-cizgi {
    --dugme-kenar: var(--ana-acik);
    --dugme-renk: var(--ana);
    --dugme-ustu: var(--zemin-2);
}

.dugme-dolu {
    --dugme-kenar: var(--ana);
    --dugme-zemin: var(--ana);
    --dugme-renk: var(--zemin-2);
    --dugme-ustu: var(--ana-koyu);
}

.dugme-krem {
    --dugme-kenar: var(--zemin-2);
    --dugme-zemin: var(--zemin-2);
    --dugme-renk: var(--ana);
    --dugme-ustu: var(--zemin);
}

/* ===================================================================
   UST MENU - yuzen cam hap, asagi dogru panele buyur
   =================================================================== */

.ust {
    position: fixed;
    inset: 1.5rem 0 auto;
    z-index: 90;
    display: flex;
    justify-content: center;
    padding-inline: 1rem;
    pointer-events: none;
}

.hap {
    position: relative;
    pointer-events: auto;
    width: min(40rem, 100%);
    max-height: calc(100svh - 3rem);
    overflow-y: auto;
    border-radius: var(--hap);
    background: color-mix(in srgb, var(--ana-koyu) 82%, transparent);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    color: var(--cizgi);
    padding: .5rem;
}

.hap-sira {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: 3.5rem;
}

/* Betiksiz acilis: gizli onay kutusu + etiket. */
.menu-anahtar { position: absolute; opacity: 0; pointer-events: none; }

.menu-ac {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: .75rem 1rem;
    cursor: pointer;
    color: var(--zemin-2);
    border-radius: 999px;
}

.menu-anahtar:focus-visible + .hap-sira .menu-ac { outline: 2px solid var(--vurgu-acik); }

.menu-cizgiler {
    position: relative;
    width: 2.5rem;
    height: .5rem;
    transition: height .5s var(--akis);
}

.menu-cizgiler::before, .menu-cizgiler::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--ana-acik);
    transition: transform .5s var(--akis), top .5s var(--akis);
}

.menu-cizgiler::before { top: 0; }
.menu-cizgiler::after { top: 100%; }

.menu-anahtar:checked + .hap-sira .menu-cizgiler { height: 1rem; }
.menu-anahtar:checked + .hap-sira .menu-cizgiler::before { top: 50%; transform: rotate(18deg); }
.menu-anahtar:checked + .hap-sira .menu-cizgiler::after { top: 50%; transform: rotate(-18deg); }

.hap-marka {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    color: var(--vurgu);
}

.hap-marka svg { width: 2.25rem; height: 2.25rem; }
.hap-marka .marka-logo { max-height: 2.5rem; width: auto; }

.hap-sag { justify-self: end; }

.hap .dugme { min-width: 0; min-height: 3rem; padding-inline: 1.25rem 1rem; font-size: .8125rem; }

.menu-panel {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows .5s var(--akis), visibility .5s;
}

.menu-anahtar:checked ~ .menu-panel { grid-template-rows: 1fr; visibility: visible; }

.menu-ic {
    overflow: hidden;
    min-height: 0;
    display: grid;
    justify-items: center;
    text-align: center;
}

.menu-ic-dolgu { padding-block: 2rem 1.5rem; display: grid; justify-items: center; }

.menu-yazi-logo {
    font-family: var(--serif);
    color: var(--vurgu);
    font-size: 2.4rem;
    line-height: .95;
    margin-bottom: 2rem;
    text-decoration: none;
    opacity: 0;
    transition: opacity .4s;
}

.menu-liste { display: grid; gap: 0; }

.menu-liste a { text-decoration: none; }

.menu-liste li { opacity: 0; transform: translateY(.75rem); transition: opacity .4s, transform .5s var(--cikis); }

.menu-anahtar:checked ~ .menu-panel .menu-yazi-logo { opacity: 1; transition-delay: .45s; }

.menu-anahtar:checked ~ .menu-panel .menu-liste li {
    opacity: 1;
    transform: none;
    transition-delay: calc(.2s + var(--i, 0) * 70ms);
}

.menu-iletisim { display: flex; gap: 2rem; margin-top: 2rem; color: var(--ana-acik); }
.menu-iletisim a { text-decoration: none; }
.menu-iletisim a:hover { color: var(--cizgi); }

/* ===================================================================
   YUVARLANAN BAGLANTI - duz yazi yukari, italik limon kopya alttan
   =================================================================== */

.yuvarla {
    position: relative;
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    font-family: var(--serif);
    font-size: clamp(1.9rem, 3.2vw, 2.5rem);
    line-height: 1.2;
    color: var(--cizgi);
}

.yuvarla > span { display: block; transition: transform .6s var(--akis); }

.yuvarla::after {
    content: attr(data-metin);
    position: absolute;
    inset: 0;
    font-style: italic;
    color: var(--vurgu-acik);
    transform: translateY(100%);
    transition: transform .6s var(--akis);
}

.yuvarla:hover > span, .yuvarla:focus-visible > span, .yuvarla[aria-current] > span { transform: translateY(-100%); }
.yuvarla:hover::after, .yuvarla:focus-visible::after, .yuvarla[aria-current]::after { transform: translateY(0); }

/* ===================================================================
   ACILIS SAYACI ve SAYFA GECIS PERDESI (yalniz betikle)
   =================================================================== */

.yukleyici, .gecis-perdesi { display: none; }

html.js .yukleyici {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 1.5rem;
    background: var(--zemin);
    color: var(--vurgu);
    transition: opacity .5s, visibility .5s;
}

html.js .yukleyici svg { width: 5rem; height: 5rem; }

.yukleyici-cubuk {
    position: relative;
    width: 18.75rem;
    height: 2px;
    background: var(--zemin-2);
    overflow: hidden;
}

.yukleyici-cubuk::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--vurgu);
    transform-origin: left;
    transform: scaleX(calc(var(--yuzde, 0) / 100));
}

.yukleyici-sayi { font-family: var(--serif); font-size: 2rem; color: var(--vurgu-koyu); font-variant-numeric: tabular-nums; }

html.yuklendi .yukleyici, html.gecisli .yukleyici { opacity: 0; visibility: hidden; }

html.js .gecis-perdesi {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: block;
    background: var(--ana);
    transform: scaleY(0);
    transform-origin: bottom;
    pointer-events: none;
    transition: transform 1s cubic-bezier(.45, 0, .55, 1);
}

html.ayriliyor .gecis-perdesi { transform: scaleY(1); }

html.ayriliyor main { transform: translateY(-50vh); transition: transform 1s cubic-bezier(.45, 0, .55, 1); }

/* Gelirken: perde dolu baslar, ustten yukari cekilir. */
html.geliyor .gecis-perdesi { transform: scaleY(1); transform-origin: top; transition: none; }
html.geliyor.acildi .gecis-perdesi { transform: scaleY(0); transition: transform 1s cubic-bezier(.45, 0, .55, 1); }

/* ===================================================================
   BELIRME - betik `.gorundu` ekler; betik yoksa hepsi zaten gorunur
   =================================================================== */

.parca { display: inline-block; }

/* Kelime alttan yukselir; kabin kirpmasi onu "maskeden cikiyor" gosterir. */
.kelime-kap { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.kelime-butun { display: inline-block; white-space: nowrap; }

html.js [data-bol] .parca {
    opacity: 0;
    transform: translateY(110%);
    transition: opacity .9s var(--cikis), transform .9s var(--cikis), filter .9s var(--cikis);
    transition-delay: calc(var(--i, 0) * var(--adim, 60ms) + var(--gecikme, 0ms));
}

html.js [data-bol].gorundu .parca { opacity: 1; transform: none; }

/* Bulanik harf: dev basliklar. */
html.js [data-bol="bulanik"] .parca { transform: translateY(15%); filter: blur(10px); --adim: 40ms; }
html.js [data-bol="bulanik"].gorundu .parca { filter: blur(0); }

html.js [data-gor="yukari"] {
    opacity: 0;
    transform: translateY(2rem);
    transition: opacity .9s var(--cikis), transform .9s var(--cikis);
    transition-delay: var(--gecikme, 0ms);
}

html.js [data-gor="yukari"].gorundu { opacity: 1; transform: none; }

/* Soldan saga perde: bolum butunuyle acilir, fotograf 1.1'den oturur. */
html.js [data-gor="perde"] {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.7s cubic-bezier(.45, 0, .55, 1);
}

html.js [data-gor="perde"].gorundu { clip-path: inset(0); }

html.js [data-gor="perde"] .foto-arka > * {
    scale: 1.1;
    transition: scale 1.7s cubic-bezier(.45, 0, .55, 1);
}

html.js [data-gor="perde"].gorundu .foto-arka > * { scale: 1; }

/* Cerceveli video: bolum acildiktan sonra kendi perdesiyle gelir. */
html.js [data-gor="perde"] .video-cerceve {
    clip-path: inset(0 100% 0 0 round var(--yumusak));
    transition: clip-path 1.2s cubic-bezier(.45, 0, .55, 1) 1.1s;
}

html.js [data-gor="perde"].gorundu .video-cerceve { clip-path: inset(0 0 0 0 round var(--yumusak)); }

/* Yarilma: gorsel yukaridan asagi, panel asagidan yukari. */
html.js [data-gor="yarilma"] .yarilma-gorsel { clip-path: inset(0 0 100% 0); transition: clip-path 1.2s cubic-bezier(.45, 0, .55, 1); }
html.js [data-gor="yarilma"] .yarilma-panel { clip-path: inset(100% 0 0 0); transition: clip-path 1.2s cubic-bezier(.45, 0, .55, 1); }
html.js [data-gor="yarilma"].gorundu .yarilma-gorsel,
html.js [data-gor="yarilma"].gorundu .yarilma-panel { clip-path: inset(0); }

/* ===================================================================
   PARALAKS - betik `--p` verir (-1 ekranin altinda, 1 ustunde)
   =================================================================== */

html.js [data-paralaks] {
    transform: translate3d(0, calc(var(--p, 0) * var(--guc, 6) * 1rem), 0);
    will-change: transform;
}

/* ===================================================================
   FOTOGRAF ZEMINLI BOLUM (Konum, Daireler, Is alanlari, Olanaklar)
   =================================================================== */

.foto-zemin {
    position: relative;
    isolation: isolate;
    min-height: 100svh;
    overflow: hidden;
    color: var(--zemin-2);
}

.foto-arka {
    position: absolute;
    inset: -10rem 0;
    z-index: -2;
}

.foto-arka img, .foto-arka video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.foto-zemin::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: color-mix(in srgb, var(--ana-koyu) 24%, transparent);
}

.foto-zemin.acik-foto { color: var(--vurgu-koyu); }
.foto-zemin.acik-foto::before { background: none; }
.foto-zemin.acik-foto .dev { color: var(--vurgu); }
.foto-zemin.acik-foto .paragraf { color: var(--vurgu-koyu); }

.foto-ic {
    position: relative;
    min-height: 100svh;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto 1fr auto;
    gap: 2rem var(--kenar);
    padding-block: 7.5rem 3rem;
}

.foto-zemin .dev { color: var(--cizgi); }

/*
    FOTOGRAFIN ICINDE VIDEO.

    Referansin en cok akilda kalan kalibi: tam ekran bir fotografin
    icinde yuvarlak koseli kucuk bir PENCERE ve o pencerede video
    oynuyor. Video pencereden BUYUK (%150) ve paralaksla kendi hizinda
    kayiyor; boylece pencere bir kutu degil gercek bir aciklik gibi durur.
*/
.video-cerceve {
    position: relative;
    aspect-ratio: 1.43;
    border-radius: var(--yumusak);
    overflow: hidden;
    background: var(--ana-koyu);
    align-self: start;
}

.video-cerceve video, .video-cerceve img {
    position: absolute;
    left: -25%;
    top: -25%;
    width: 150%;
    height: 150%;
    max-width: none;
    object-fit: cover;
}

.kaydir-ipucu {
    position: absolute;
    left: 50%;
    bottom: 2rem;
    translate: -50% 0;
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    border: 1px solid var(--cizgi);
    border-radius: 50%;
    background: color-mix(in srgb, var(--ana) 30%, transparent);
    color: var(--cizgi);
    z-index: 2;
}

.kaydir-ipucu svg { width: .9rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 1; animation: ok-nabiz 1.6s var(--akis) infinite; }

@keyframes ok-nabiz {
    0% { transform: translateY(-.5rem); opacity: 0; }
    40%, 60% { transform: none; opacity: 1; }
    100% { transform: translateY(.5rem); opacity: 0; }
}

/* ===================================================================
   00 VITRIN - tam ekran film, sonunda harf harf gelen ad
   =================================================================== */

.vitrin {
    position: relative;
    height: 100svh;
    min-height: 34rem;
    color: var(--zemin-2);
    background: var(--ana-koyu);
}

.vitrin { overflow: hidden; }

.vitrin-medya, .vitrin-medya video, .vitrin-medya img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vitrin-medya::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, color-mix(in srgb, var(--ana-koyu) 60%, transparent), transparent 50%);
}

/* Markanin agac isareti - filmin ustunde soluk, dekoratif. */
.vitrin-motif {
    position: absolute;
    right: -4vw;
    top: 10vh;
    width: min(40vw, 34rem);
    color: var(--cizgi);
    opacity: .07;
    pointer-events: none;
    z-index: 1;
}

.vitrin-ic {
    position: absolute;
    inset: auto 0 0;
    z-index: 2;
    padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.vitrin h1 {
    font-family: var(--serif);
    font-weight: 400;
    text-transform: uppercase;
    font-size: clamp(3rem, 10.5vw, 13rem);
    line-height: .86;
    letter-spacing: -.02em;
    color: var(--zemin-2);
    overflow-wrap: anywhere;
}

.vitrin-alt {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 1.5rem;
    margin-top: 1.25rem;
    color: var(--zemin-2);
}

.vitrin-alt .paragraf { color: var(--zemin-2); }

html.js .vitrin h1[data-bol] .parca { --adim: 50ms; transform: translateY(2rem); }
html.js .vitrin h1[data-bol].gorundu .parca { transform: none; }

/* ===================================================================
   01 TANITIM - sabitlenen uc ekranli anlati
   =================================================================== */

.anlati { position: relative; height: 700svh; }

.anlati-sahne {
    position: sticky;
    top: 0;
    height: 100svh;
    overflow: hidden;
    isolation: isolate;
}

.anlati-yaprak {
    position: absolute;
    inset: -15%;
    z-index: -2;
    opacity: .5;
    background:
        radial-gradient(30% 22% at 18% 26%, color-mix(in srgb, var(--ana-koyu) 65%, transparent), transparent 70%),
        radial-gradient(26% 30% at 78% 72%, color-mix(in srgb, var(--ana-koyu) 55%, transparent), transparent 70%),
        radial-gradient(20% 16% at 60% 20%, color-mix(in srgb, var(--ana-acik) 35%, transparent), transparent 70%);
    animation: yaprak-don 8s ease-in-out infinite alternate;
}

@keyframes yaprak-don { to { transform: rotate(5deg) scale(1.08); } }

.anlati-ekran {
    position: absolute;
    inset: 0;
    padding: 9rem var(--kenar) 6rem;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-content: start;
    pointer-events: none;
}

.anlati-ekran .dugme, .anlati-ekran a { pointer-events: auto; }

.anlati-ekran-1 > div { grid-column: 1 / span 5; display: grid; gap: 2rem; justify-items: start; }
.anlati-ekran-2 > div { grid-column: 8 / span 5; display: grid; gap: 2rem; justify-items: start; padding-top: 4rem; }
.anlati-ekran-3 { align-content: end; }
.anlati-ekran-3 .dev { grid-column: 1 / -1; color: var(--cizgi); font-size: clamp(2.8rem, 8.6vw, 10rem); }
.anlati-ekran-3 .anlati-alt { grid-column: 8 / span 5; display: grid; gap: 1.25rem; justify-items: start; margin-top: 2rem; }

.anlati .b2 { color: var(--zemin-2); }

/* Betikle ekranlar sirayla gorunur; betik yoksa alt alta akar. */
html.js .anlati-ekran { opacity: 0; visibility: hidden; transition: opacity .7s, visibility .7s; }
html.js .anlati-sahne[data-ekran="1"] .anlati-ekran-1,
html.js .anlati-sahne[data-ekran="2"] .anlati-ekran-2,
html.js .anlati-sahne[data-ekran="3"] .anlati-ekran-3 { opacity: 1; visibility: visible; }

html.js .anlati-ekran [data-bol] .parca { transition-duration: .7s; --adim: 35ms; }

/*
    ORGANIK CERCEVELER.

    Referansta SVG yol donusumu (MorphSVG). Burada `clip-path: polygon`
    ve her sekilde AYNI SAYIDA kose: betik iki ekran arasindaki koseleri
    kaydirmayla ARA DEGERLER, yani sekil kaydirma ilerledikce gercekten
    eriyip digerine donusur. Betik yoksa ilk sekilde durur.
*/
.cerceve {
    position: absolute;
    overflow: hidden;
    z-index: -1;
    clip-path: polygon(8% 4%, 92% 0%, 100% 12%, 100% 96%, 88% 100%, 4% 94%, 0% 84%, 0% 14%);
    transition: top 1s var(--akis), left 1s var(--akis), width 1s var(--akis), height 1s var(--akis);
}

.cerceve img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity .8s;
}

.cerceve img + img { opacity: 0; }

.cerceve-1 { left: 62%; top: 14%; width: 22rem; height: 29rem; }
.cerceve-2 { left: 36%; top: 60%; width: 22rem; height: 16rem; }

html.js .anlati-sahne[data-ekran="2"] .cerceve-1 { left: 30%; top: 14%; width: 22rem; height: 22rem; }
html.js .anlati-sahne[data-ekran="2"] .cerceve-2 { left: 6%; top: 34%; width: 28rem; height: 32rem; }
html.js .anlati-sahne[data-ekran="3"] .cerceve-1 { left: 64%; top: 9%; width: 17rem; height: 20rem; }
html.js .anlati-sahne[data-ekran="3"] .cerceve-2 { left: 20%; top: 8%; width: 20rem; height: 15rem; }

html.js .anlati-sahne[data-ekran="2"] .cerceve img + img,
html.js .anlati-sahne[data-ekran="3"] .cerceve-2 img + img { opacity: 1; }

.ilerleme {
    position: absolute;
    left: var(--kenar);
    bottom: 2.5rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    color: var(--cizgi);
}

.ilerleme-cizgi { position: relative; width: 17.5rem; max-width: 40vw; height: 1px; background: color-mix(in srgb, var(--cizgi) 35%, transparent); }

.ilerleme-cizgi::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--vurgu-acik);
    transform-origin: left;
    transform: scaleX(var(--ilerleme, 0));
}

.ilerleme-sayi { font-variant-numeric: tabular-nums; min-width: 2ch; }

html:not(.js) .anlati { height: auto; }
html:not(.js) .anlati-sahne { position: relative; height: auto; }
html:not(.js) .anlati-ekran { position: relative; min-height: 70svh; }
html:not(.js) .cerceve, html:not(.js) .ilerleme { display: none; }

/* ===================================================================
   02 KONUM
   =================================================================== */

.konum .video-cerceve { grid-column: 1 / span 4; grid-row: 1 / span 2; margin-top: 2rem; }
.konum .paragraf { grid-column: 9 / span 4; grid-row: 1; }
.konum .dev { grid-column: 3 / -1; grid-row: 3; text-align: right; }

.daireler-tanitim .video-cerceve { grid-column: 1 / span 4; grid-row: 1 / span 2; }
.daireler-tanitim .dev { grid-column: 1 / span 8; grid-row: 3; }
.daireler-tanitim .paragraf { grid-column: 9 / span 4; grid-row: 3; align-self: end; }

.olanak-tanitim .video-cerceve { grid-column: 1 / span 4; grid-row: 1 / span 2; }
.olanak-tanitim .paragraf { grid-column: 1 / span 4; grid-row: 3; align-self: end; }
.olanak-tanitim .dev { grid-column: 5 / -1; grid-row: 3; text-align: right; }

.katmanlar { position: absolute; inset: 0; }
.igneler { position: absolute; inset: 0; }

/* ===================================================================
   03 CEVREDE NE VAR - liste + egik harita
   =================================================================== */

.cevre { padding-block: clamp(5rem, 9vw, 8rem); }

.cevre-ic {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 3rem;
    align-items: start;
}

.cevre .ust-yazi { margin-bottom: 2.5rem; }

/*
    SECIM LISTESI.

    Radyo dugmeleri + `:has()`: betik yoksa da tiklayinca secilir.
    Betik uzerine gelinince de secer (referanstaki davranis) ve
    gostergeyi kaydirir.
*/
.secim-liste { position: relative; display: grid; justify-items: start; }

.secim-liste input { position: absolute; opacity: 0; pointer-events: none; }

.secim-liste label {
    position: relative;
    display: block;
    overflow: hidden;
    cursor: pointer;
    font-family: var(--serif);
    font-size: clamp(1.9rem, 3.2vw, 3.25rem);
    line-height: 1.14;
    color: var(--vurgu);
    /* Italik kopya egik; sagdaki taşma kirpilmasin. */
    padding-right: .18em;
    white-space: nowrap;
}

.secim-liste label > span { display: block; transition: transform .6s var(--akis); }

.secim-liste label::after {
    content: attr(data-metin);
    position: absolute;
    inset: 0;
    font-style: italic;
    color: var(--ana);
    transform: translateY(110%);
    transition: transform .6s var(--akis);
}

.secim-liste input:checked + label > span { transform: translateY(-110%); }
.secim-liste input:checked + label::after { transform: translateY(0); }

.secim-liste input:focus-visible + label { outline: 2px solid var(--vurgu); outline-offset: 4px; }

/* Etkin satiri gosteren ince dikey cubuk - betik yerini olcer. */
.secim-gosterge {
    position: absolute;
    left: -1rem;
    top: var(--gosterge-ust, 0);
    width: 2px;
    height: var(--gosterge-boy, 3rem);
    background: var(--ana);
    transition: top .5s var(--akis), height .5s var(--akis);
}

html:not(.js) .secim-gosterge { display: none; }

.yesil-panel .secim-liste label, .lacivert-panel .secim-liste label { color: var(--cizgi); }
.yesil-panel .secim-liste label::after, .lacivert-panel .secim-liste label::after { color: var(--vurgu-acik); }
.yesil-panel .secim-gosterge, .lacivert-panel .secim-gosterge { background: var(--vurgu-acik); }

/*
    SECIMIN HEDEFLERI.

    Listedeki k. radyo seciliyse, ayni `.secim-kok` icindeki her
    `.secim-hedef` kabinin k. cocuguna `--etkin: 1` verilir. Ayrinti
    metni, gorsel katmani ve harita ignesi bu tek sayidan kendi
    gorunumunu turetir - bir liste icin ayri ayri kural yazilmaz.
    Alti secenege kadar.
*/
.secim-kok:has(.secim-liste input:nth-of-type(1):checked) .secim-hedef > :nth-child(1),
.secim-kok:has(.secim-liste input:nth-of-type(2):checked) .secim-hedef > :nth-child(2),
.secim-kok:has(.secim-liste input:nth-of-type(3):checked) .secim-hedef > :nth-child(3),
.secim-kok:has(.secim-liste input:nth-of-type(4):checked) .secim-hedef > :nth-child(4),
.secim-kok:has(.secim-liste input:nth-of-type(5):checked) .secim-hedef > :nth-child(5),
.secim-kok:has(.secim-liste input:nth-of-type(6):checked) .secim-hedef > :nth-child(6) { --etkin: 1; z-index: 1; }

/* Ayrinti paneli: yalniz secili olan gorunur. */
.secim-ayrinti { display: grid; }
.secim-ayrinti > * { grid-area: 1 / 1; opacity: var(--etkin, 0); transition: opacity .35s; }

.yer-sure {
    display: flex;
    gap: 1.25rem;
    align-items: center;
    margin-block: .75rem 1rem;
    color: var(--metin-2);
}

.yer-sure span { display: inline-flex; gap: .5rem; align-items: center; }
.yer-sure svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.3; }
.yer-sure i { width: 1px; height: 1.5rem; background: color-mix(in srgb, var(--vurgu) 40%, transparent); }

.cevre .secim-ayrinti { margin-top: 2.5rem; }

/*
    HARITA: referansta Three.js tuvali. Burada ayni goruntu CSS 3B ile -
    duz bir SVG sokak plani `rotateX` ile egiliyor, igneler ayni
    katmanda ve kameraya donuk. Tuval kutuphanesinin agirligi ve GPU
    yuku yok.
*/
.harita {
    position: relative;
    aspect-ratio: 16 / 9;
    perspective: 1400px;
    overflow: hidden;
    -webkit-mask-image: radial-gradient(75% 75% at 50% 50%, var(--ana) 55%, transparent 100%);
    mask-image: radial-gradient(75% 75% at 50% 50%, var(--ana) 55%, transparent 100%);
}

.harita-zemin {
    position: absolute;
    inset: -12% -8% -24%;
    transform: rotateX(50deg) rotateZ(-10deg);
    transform-style: preserve-3d;
    transition: transform 1.4s var(--cikis);
}

.harita:hover .harita-zemin { transform: rotateX(46deg) rotateZ(-7deg); }

.harita-zemin > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.harita-sokak { fill: none; stroke: var(--cizgi); stroke-width: 2; }
.harita-ara { fill: none; stroke: var(--cizgi); stroke-width: 1; opacity: .7; }
.harita-ana-yol { fill: none; stroke: var(--vurgu); stroke-width: 5; opacity: .35; }
.harita-park { fill: color-mix(in srgb, var(--ana-acik) 16%, transparent); }
.harita-su { fill: color-mix(in srgb, var(--koyu) 14%, transparent); }
.harita-ray { fill: none; stroke: var(--ana-acik); stroke-width: 2; stroke-dasharray: 10 6; opacity: .6; }

.igne {
    position: absolute;
    left: var(--x);
    top: var(--y);
    display: grid;
    justify-items: center;
    gap: .25rem;
    color: var(--vurgu);
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    transform: translate(-50%, -100%) rotateZ(10deg) rotateX(-50deg);
    transform-origin: bottom center;
    transition: color .3s;
}

.igne { cursor: pointer; color: color-mix(in srgb, var(--ana) calc(var(--etkin, 0) * 100%), var(--vurgu)); }
.igne svg { width: 1.6rem; height: 2.1rem; scale: calc(1 + var(--etkin, 0) * .3); transform-origin: bottom center; transition: scale .3s var(--cikis); }
.igneler > .igne .igne-foto { scale: var(--etkin, 0); }
.igne svg { fill: currentColor; }
.igne svg circle { fill: var(--zemin); }
.igne-ad { font-size: .8rem; font-weight: 500; }
.igne-ad { color: var(--metin-2); white-space: nowrap; }
.igne-merkez { color: var(--ana); }
.igne-merkez svg { width: 3rem; height: 3rem; }

.igne-foto {
    position: absolute;
    bottom: calc(100% + .5rem);
    left: 50%;
    width: 12rem;
    aspect-ratio: 1.44;
    border-radius: var(--yumusak);
    overflow: hidden;
    translate: -50% 0;
    scale: 0;
    transform-origin: bottom center;
    transition: scale .45s var(--cikis);
    box-shadow: 0 1rem 2rem color-mix(in srgb, var(--ana-koyu) 25%, transparent);
}

.igne-foto img { width: 100%; height: 100%; object-fit: cover; }

/* ===================================================================
   05 DAIRE TIPLERI, 07 IS SECENEKLERI, 10 OLANAKLAR - bolunmus sahne
   =================================================================== */

.bolunmus {
    display: grid;
    grid-template-columns: 45fr 55fr;
    min-height: 100svh;
}

.bolunmus-ters { grid-template-columns: 55fr 45fr; }

.bolunmus-metin {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 3rem;
    padding: clamp(6.5rem, 10vw, 9rem) var(--kenar) 3rem;
}

.bolunmus-metin .secim-liste { margin-left: 1rem; }

.bolunmus-gorsel { position: relative; overflow: hidden; min-height: 60svh; }

.bolunmus-gorsel .dev {
    position: absolute;
    right: var(--kenar);
    bottom: 2rem;
    font-size: clamp(3rem, 7vw, 7.5rem);
    color: var(--vurgu-acik);
    pointer-events: none;
    z-index: 2;
    text-shadow: 0 .2rem 2rem color-mix(in srgb, var(--ana-koyu) 25%, transparent);
}

.bolunmus-gorsel .dev.krem { color: var(--zemin-2); }

.katman-gorsel {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: var(--etkin, 0);
    transition: opacity .7s;
}

.katman-gorsel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    scale: 1.12;
}

/* Yatay silme: secilen gorsel soldan saga acilir. */
.silme .katman-gorsel {
    opacity: 1;
    clip-path: inset(0 calc((1 - var(--etkin, 0)) * 100%) 0 0);
    transition: clip-path 1s var(--akis);
}

.silme .katman-gorsel:not(:first-child) { z-index: 0; }

.birim-ozet {
    display: flex;
    justify-content: space-between;
    align-items: end;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding-top: 2rem;
    border-top: 1px solid color-mix(in srgb, var(--vurgu) 40%, transparent);
}

.birim-sayi { display: flex; gap: 1rem; align-items: end; }
.birim-sayi strong { font-family: var(--serif); font-weight: 400; font-size: clamp(3rem, 4.5vw, 4.5rem); line-height: .9; color: var(--vurgu); }
.birim-sayi span { color: var(--metin-2); line-height: 1.2; }

.yesil-panel .birim-sayi strong, .lacivert-panel .birim-sayi strong { color: var(--zemin-2); }
.yesil-panel .birim-sayi span, .lacivert-panel .birim-sayi span { color: var(--cizgi); }
.yesil-panel .birim-ozet, .lacivert-panel .birim-ozet { border-top-color: color-mix(in srgb, var(--cizgi) 30%, transparent); }

.yuvarlak-oklar {
    position: absolute;
    left: 2rem;
    right: 2rem;
    top: 50%;
    translate: 0 -50%;
    display: flex;
    justify-content: space-between;
    z-index: 3;
    pointer-events: none;
}

.yuvarlak-ok {
    pointer-events: auto;
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    border: 1px solid var(--cizgi);
    background: color-mix(in srgb, var(--ana) 40%, transparent);
    color: var(--cizgi);
    cursor: pointer;
    transition: background-color .3s, color .3s;
}

.yuvarlak-ok:hover { background: var(--zemin-2); color: var(--ana); }
.yuvarlak-ok svg { width: 1.5rem; height: .8rem; fill: none; stroke: currentColor; stroke-width: 1; }

html:not(.js) .yuvarlak-oklar { display: none; }

/* ===================================================================
   06 IS ALANLARI tanitim
   =================================================================== */

.is-tanitim::before { background: linear-gradient(to bottom, color-mix(in srgb, var(--ana-koyu) 62%, transparent), color-mix(in srgb, var(--ana-koyu) 10%, transparent) 55%, color-mix(in srgb, var(--ana-koyu) 50%, transparent)); }
.is-tanitim .dev { color: var(--zemin-2); }
.is-tanitim .dev { grid-column: 1 / span 10; grid-row: 1; font-size: clamp(3rem, 8.4vw, 9.5rem); }
.is-tanitim .paragraf { grid-column: 1 / span 4; grid-row: 3; align-self: end; }
.is-tanitim .video-cerceve { grid-column: 9 / span 4; grid-row: 3; align-self: end; }

/* ===================================================================
   08 KOKLERINIZ - lacivert, dev yazi, organik maskeli medya
   =================================================================== */

.kokler {
    position: relative;
    min-height: 100svh;
    padding-block: 8rem 5rem;
    background: var(--koyu);
    color: var(--zemin-2);
    overflow: hidden;
    isolation: isolate;
}

.kokler .ust-yazi { text-align: center; color: var(--vurgu-acik); position: relative; z-index: 2; }

.kokler .dev {
    color: var(--cizgi);
    text-align: center;
    white-space: nowrap;
    font-size: clamp(3rem, 11.5vw, 13rem);
    margin-top: 1.5rem;
    position: relative;
    z-index: 0;
}

/* Dev harfler sagdan, ekranin disindan gelir. */
html.js .kokler .dev[data-bol] .parca {
    transform: translateX(100vw);
    transition-duration: 1.7s;
    --adim: 100ms;
}

html.js .kokler .dev[data-bol].gorundu .parca { transform: none; }

.maskeli {
    position: absolute;
    z-index: 1;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    transition: -webkit-mask-size 1.4s var(--cikis), mask-size 1.4s var(--cikis);
    transition-delay: var(--gecikme, 0ms);
}

html.js .kokler:not(.gorundu) .maskeli { -webkit-mask-size: 0% 0%; mask-size: 0% 0%; }

.maskeli img, .maskeli video { width: 100%; height: 100%; object-fit: cover; scale: 1.3; }

.maske-damla { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20400'%20preserveAspectRatio='none'%3E%3Cpath%20d='M152%206c62%204%20118%2052%20136%20128%2017%2072%208%20150-30%20206-34%2050-92%2062-146%2050C56%20378%2014%20330%206%20262-3%20184%2014%20104%2052%2056%2080%2022%20112%203%20152%206z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20400'%20preserveAspectRatio='none'%3E%3Cpath%20d='M152%206c62%204%20118%2052%20136%20128%2017%2072%208%20150-30%20206-34%2050-92%2062-146%2050C56%20378%2014%20330%206%20262-3%20184%2014%20104%2052%2056%2080%2022%20112%203%20152%206z'/%3E%3C/svg%3E"); }
.maske-yaprak { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20400'%20preserveAspectRatio='none'%3E%3Cpath%20d='M40%2020c70-24%20170-16%20226%2034%2042%2038%2034%20110%2022%20176-12%2070-30%20136-98%20160-64%2022-150%208-176-54C-6%20280%204%20190%208%20120%2011%2072%2012%2030%2040%2020z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20400'%20preserveAspectRatio='none'%3E%3Cpath%20d='M40%2020c70-24%20170-16%20226%2034%2042%2038%2034%20110%2022%20176-12%2070-30%20136-98%20160-64%2022-150%208-176-54C-6%20280%204%20190%208%20120%2011%2072%2012%2030%2040%2020z'/%3E%3C/svg%3E"); }
.maske-tas { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20400%20400'%20preserveAspectRatio='none'%3E%3Cpath%20d='M86%2018%20314%208c40-2%2074%2028%2078%2068l6%20206c1%2044-28%2082-72%2092L112%20394c-48%208-92-24-98-72L4%20110C0%2060%2036%2020%2086%2018z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20400%20400'%20preserveAspectRatio='none'%3E%3Cpath%20d='M86%2018%20314%208c40-2%2074%2028%2078%2068l6%20206c1%2044-28%2082-72%2092L112%20394c-48%208-92-24-98-72L4%20110C0%2060%2036%2020%2086%2018z'/%3E%3C/svg%3E"); }

.kokler .maskeli-1 { width: min(22vw, 21rem); aspect-ratio: 3 / 4; left: 7%; top: 26%; --gecikme: 1.5s; }
.kokler .maskeli-2 { width: min(20vw, 19rem); aspect-ratio: 3 / 4; left: 44%; top: 50%; --gecikme: 1.8s; }
.kokler .maskeli-3 { width: min(28vw, 27rem); aspect-ratio: 1; right: 6%; top: 10%; --gecikme: 2.1s; }

.maskeli-ic { width: 100%; height: 100%; transform: translate3d(var(--fx, 0px), var(--fy, 0px), 0); }

.kokler-alt {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 2rem;
    justify-items: start;
    max-width: 34rem;
    margin-top: clamp(12rem, 28vw, 26rem);
}

.kokler-alt .b2 { color: var(--zemin-2); }

/* ===================================================================
   11 YUKARIDAN - sabitlenen yatay hava cekimi, bulutlar
   =================================================================== */

.yatay { position: relative; height: 400svh; background: var(--zemin); }

.yatay-sahne {
    position: sticky;
    top: 0;
    height: 100svh;
    overflow: hidden;
}

.yatay-serit {
    position: absolute;
    top: -15%;
    left: 0;
    height: 130%;
    transform: translate3d(calc(var(--kayma, 0) * -1px), 0, 0);
}

.yatay-serit > img { height: 100%; width: auto; max-width: none; }

.yatay-isaret {
    position: absolute;
    top: var(--y);
    left: var(--x);
    display: grid;
    place-items: center;
    width: clamp(3.5rem, 6vw, 5.5rem);
    aspect-ratio: 1;
    border: 1px solid var(--zemin-2);
    border-radius: 50%;
    font-family: var(--serif);
    font-size: clamp(2rem, 3.5vw, 3.5rem);
    color: var(--zemin-2);
    background: color-mix(in srgb, var(--ana) 35%, transparent);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.yatay-bulut {
    position: absolute;
    pointer-events: none;
    width: clamp(30rem, 70vw, 72rem);
    max-width: none;
    transform: translate3d(calc(var(--bulut, 0) * var(--hiz) * -1vw), 0, 0);
    z-index: 2;
    /* Beyaz bulut parlak hava fotografinda eriyordu; golge onu kaldiriyor. */
    filter: drop-shadow(0 1.5rem 2.5rem color-mix(in srgb, var(--koyu) 35%, transparent)) brightness(1.04);
}

.yatay-baslik {
    position: absolute;
    inset: 7rem 0 auto;
    z-index: 2;
    text-align: center;
    color: var(--zemin-2);
    text-shadow: 0 .2rem 2.5rem color-mix(in srgb, var(--ana-koyu) 40%, transparent);
    font-size: clamp(3rem, 9vw, 10rem);
    pointer-events: none;
}

/* Kapilar: sahneye girilince ortadan iki yana acilir. */
.yatay-kapi {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    background: var(--zemin);
    transition: width 1.4s cubic-bezier(.45, 0, .55, 1);
    z-index: 3;
}

.yatay-kapi-sol { left: 0; }
.yatay-kapi-sag { right: 0; }
.yatay.acik .yatay-kapi { width: 0; }

html:not(.js) .yatay { height: auto; }
html:not(.js) .yatay-sahne { position: relative; overflow-x: auto; }
html:not(.js) .yatay-kapi { display: none; }

/* ===================================================================
   12 ODEME PLANI
   =================================================================== */

.odeme-liste { display: grid; margin-block: 2.5rem; }

.odeme-liste li {
    display: grid;
    grid-template-columns: 7rem 1fr;
    align-items: baseline;
    gap: 1rem;
    padding-block: 1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--ana-acik) 70%, transparent);
}

.odeme-liste strong {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(2.4rem, 3.4vw, 3.25rem);
    line-height: 1;
    color: var(--vurgu-acik);
}

.odeme-liste span { font-size: 1.125rem; font-weight: 500; color: var(--zemin-2); }

.odeme .bolunmus-metin { justify-content: center; }
.odeme .b2 { color: var(--cizgi); }

/* ===================================================================
   ILETISIM BOLGESI ve ALT BILGI - vanilyadan goge
   =================================================================== */

.alt-bolge {
    position: relative;
    background: linear-gradient(to top, color-mix(in srgb, var(--koyu) 45%, var(--zemin)), var(--zemin) 72%);
    overflow: hidden;
}

.alt-bolge-ic {
    display: grid;
    grid-template-columns: 1.5fr .8fr .6fr 1fr;
    gap: 3rem;
    padding-block: 6.25rem 2rem;
}

.alt-bolge h2 { font-family: var(--serif); font-weight: 400; text-transform: uppercase; font-size: clamp(1.8rem, 2.6vw, 2.5rem); line-height: 1.05; color: var(--ana); }

.alt-liste { display: grid; gap: .75rem; align-content: start; }
.alt-liste a { text-decoration: none; text-transform: uppercase; letter-spacing: .08em; font-size: .8125rem; }
.alt-liste a:hover { color: var(--vurgu-koyu); }
.alt-sosyal a { color: var(--vurgu-koyu); }

.alt-not { color: var(--metin-2); font-size: .8125rem; display: grid; gap: .75rem; align-content: start; }
.alt-not a { color: var(--vurgu-koyu); font-size: 1.5rem; text-decoration: none; font-family: var(--serif); }

.alt-sahne {
    position: relative;
    height: clamp(18rem, 42vw, 44rem);
    overflow: hidden;
}

/* Bina fotografi ustten gokyuzu gradyanina eriyor (maske yalniz
   saydamligi okur; jeton rengi burada yalnizca "opak" demek). */
.alt-foto {
    position: absolute;
    inset: -4rem 0 -6rem;
    -webkit-mask-image: linear-gradient(to bottom, transparent, var(--ana) 42%);
    mask-image: linear-gradient(to bottom, transparent, var(--ana) 42%);
}

.alt-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }

.alt-kolon { display: grid; align-content: start; gap: 1.25rem; }

.alt-imza {
    position: absolute;
    inset: auto 0 0;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 1rem;
    padding: 0 var(--kenar) 1.25rem;
    color: var(--zemin);
    text-shadow: 0 .1rem 1.5rem color-mix(in srgb, var(--ana-koyu) 60%, transparent);
}

.alt-imza .b1 { text-align: right; text-transform: uppercase; font-size: clamp(2.4rem, 6.4vw, 6.25rem); }

html.js .alt-bolge [data-gor="yukari"] { transform: translate(-2rem, 2rem); }

/* Formlar */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; margin-top: 2rem; }
.form .tam { grid-column: 1 / -1; }

.alan { display: grid; gap: .35rem; }

.alan label { color: var(--vurgu-koyu); }

.alan input, .alan textarea, .alan select {
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--cizgi);
    background: transparent;
    padding: .5rem 0;
    border-radius: 0;
}

.alan textarea { resize: vertical; min-height: 4.5rem; }

.alan input:focus, .alan textarea:focus, .alan select:focus { outline: none; border-bottom-color: var(--ana); }

.koyu-zemin .alan label { color: var(--cizgi); }
.koyu-zemin .alan input, .koyu-zemin .alan textarea, .koyu-zemin .alan select { border-bottom-color: var(--ana-acik); color: var(--zemin-2); }
.koyu-zemin .alan select option { color: var(--metin); }
.koyu-zemin .alan input:focus, .koyu-zemin .alan textarea:focus, .koyu-zemin .alan select:focus { border-bottom-color: var(--vurgu-acik); }

.tuzak { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/*
    FORM SONUCU. Sunucu ziyaretciyi ana sayfaya `#mesaj-...` ile dondurur.
    Sonuc ekranin altinda sabit bir bildirim: iletisim sayfasindaki
    formdan gelen ziyaretci de ana sayfanin neresinde olursa olsun gorur.
*/
.form-sonuc {
    display: none;
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    translate: -50% 0;
    z-index: 95;
    width: min(34rem, calc(100% - 2rem));
    padding: 1.1rem 1.4rem;
    border-radius: var(--yumusak);
    background: var(--ana);
    color: var(--zemin-2);
    box-shadow: 0 1rem 3rem color-mix(in srgb, var(--ana-koyu) 35%, transparent);
}

.form-sonuc:target { display: block; }

/* ===================================================================
   ALT SAYFA KAPAGI (daireler, is alanlari, yatirimci...)
   =================================================================== */

.kapak {
    position: relative;
    min-height: 100svh;
    color: var(--zemin);
    overflow: hidden;
    isolation: isolate;
}

.kapak-foto { position: absolute; inset: -12rem 0 0; z-index: -2; }
.kapak-foto img { width: 100%; height: 100%; object-fit: cover; }

.kapak::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, color-mix(in srgb, var(--ana-koyu) 55%, transparent), transparent 70%);
}

.kapak-ic {
    min-height: 100svh;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-content: start;
    gap: 2rem var(--kenar);
    padding-block: 9rem 8rem;
}

.kapak .dev { grid-column: 1 / -1; color: var(--cizgi); font-size: clamp(3rem, 10vw, 11rem); }
.kapak-metin { grid-column: 2 / span 5; display: grid; gap: 1.75rem; justify-items: start; margin-top: 3rem; }
.kapak-metin .paragraf { color: var(--zemin); font-size: 1.125rem; }

/* ===================================================================
   BULUCU - suzgec kenar cubugu + plan kartlari
   =================================================================== */

.bulucu { padding-block: clamp(4rem, 8vw, 7rem); }

.bulucu-ic {
    display: grid;
    grid-template-columns: minmax(16rem, 1fr) minmax(0, 2fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
}

.suzgec {
    position: sticky;
    top: 7rem;
    display: grid;
    gap: 2rem;
}

.suzgec h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.1rem, 3.4vw, 3rem); color: var(--vurgu); text-transform: uppercase; line-height: 1; }

.suzgec-grup { display: grid; gap: .9rem; border: 0; margin: 0; padding: 0; min-width: 0; }
.suzgec-grup legend { padding: 0; margin-bottom: .9rem; color: var(--metin-2); }

.haplar { display: flex; flex-wrap: wrap; gap: .5rem; }

.hap-secim { position: relative; }
.hap-secim input { position: absolute; opacity: 0; pointer-events: none; }

.hap-secim span {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 2.5rem;
    padding: .35rem 1rem;
    border: 1px solid var(--cizgi);
    border-radius: 999px;
    cursor: pointer;
    text-transform: uppercase;
    font-size: .8125rem;
    letter-spacing: .06em;
    transition: background-color .3s, border-color .3s, color .3s;
}

.hap-secim span svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.3; }

.hap-secim span:hover { border-color: var(--vurgu); background: var(--zemin-2); }
.hap-secim input:checked + span { background: var(--vurgu-koyu); border-color: var(--vurgu-koyu); color: var(--zemin); }
.hap-secim input:focus-visible + span { outline: 2px solid var(--vurgu); outline-offset: 2px; }

/* Cift tutamakli aralik: iki `range` ust uste, yalniz tutamaklar tiklanir. */
.aralik-deger { display: flex; justify-content: space-between; color: var(--metin-2); font-variant-numeric: tabular-nums; }

.aralik { position: relative; height: 1.5rem; }

.aralik::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: var(--cizgi);
}

.aralik::after {
    content: "";
    position: absolute;
    top: calc(50% - .5px);
    height: 2px;
    left: calc(var(--alt, 0) * 1%);
    right: calc(100% - var(--ust, 100) * 1%);
    background: var(--ana);
}

.aralik input {
    position: absolute;
    inset: 0;
    width: 100%;
    margin: 0;
    background: none;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
    z-index: 1;
}

.aralik input::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: .9rem; height: .9rem; border-radius: 50%; background: var(--vurgu); border: 0; cursor: pointer; }
.aralik input::-moz-range-thumb { pointer-events: auto; width: .9rem; height: .9rem; border-radius: 50%; background: var(--vurgu); border: 0; cursor: pointer; }
.aralik input::-webkit-slider-runnable-track { background: none; }
.aralik input::-moz-range-track { background: none; }

.suzgec-alt { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.sifirla {
    display: inline-flex;
    gap: .5rem;
    align-items: center;
    padding: .6rem 1rem;
    border: 1px solid var(--vurgu);
    border-radius: 999px;
    background: var(--zemin-2);
    cursor: pointer;
    text-transform: uppercase;
    font-size: .8125rem;
    letter-spacing: .06em;
}

.sifirla svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.3; transition: transform .6s var(--akis); }
.sifirla:hover svg { transform: rotate(-360deg); }

html:not(.js) .suzgec-etkilesim { display: none; }

.kartlar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }

.birim-kart {
    display: grid;
    gap: 1.5rem;
    padding: 1.5rem 2rem 2.25rem;
    border: 1px solid var(--cizgi);
    margin: 0 -1px -1px 0;
    text-decoration: none;
    transition: background-color .3s;
}

.birim-kart:hover { background: var(--zemin-2); }
.birim-kart[hidden] { display: none; }

.birim-kart-plan { position: relative; aspect-ratio: 4 / 3; }
.birim-kart-plan svg { width: 100%; height: 100%; }

.birim-kart-ozellik { position: absolute; top: 0; right: 0; display: flex; gap: .4rem; color: var(--vurgu-koyu); }
.birim-kart-ozellik svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.3; }

.birim-kart-alt { display: flex; justify-content: space-between; align-items: end; gap: 1rem; }
.birim-kart-ad { font-family: var(--serif); font-size: clamp(2.8rem, 4.6vw, 5rem); line-height: .9; color: var(--vurgu); }
.birim-kart-bilgi { color: var(--metin-2); display: grid; gap: .1rem; text-align: right; }
.birim-kart-daha { opacity: 0; transition: opacity .3s; color: var(--vurgu-koyu); }
.birim-kart:hover .birim-kart-daha, .birim-kart:focus-visible .birim-kart-daha { opacity: 1; }

.sonuc-yok { padding: 3rem 2rem; border: 1px solid var(--cizgi); color: var(--metin-2); }

/* Kat plani cizimleri - renkler jetondan. */
.plan-duvar { fill: none; stroke: var(--ana); stroke-width: 3; stroke-linejoin: round; }
.plan-ic { fill: none; stroke: var(--ana-acik); stroke-width: 1.4; }
.plan-kapi { fill: none; stroke: var(--ana-acik); stroke-width: 1; stroke-dasharray: 3 3; }
.plan-balkon { fill: var(--zemin-2); stroke: var(--cizgi); stroke-width: 1.2; }
.plan-yazi { font-family: var(--sans); font-size: 9px; letter-spacing: .06em; fill: var(--metin-2); text-transform: uppercase; }

/* ===================================================================
   DAIRE AYRINTISI
   =================================================================== */

.ayrinti-ust {
    display: grid;
    grid-template-columns: minmax(18rem, 1fr) minmax(0, 2.6fr);
    gap: clamp(2rem, 5vw, 5rem);
    padding-block: 9rem 5rem;
    align-items: start;
}

.ayrinti-bilgi { display: grid; gap: 1.5rem; }
.ayrinti-bilgi .b1 { color: var(--vurgu); }

.oda-tablo div { display: flex; justify-content: space-between; gap: 1rem; padding-block: .7rem; border-bottom: 1px solid var(--cizgi); }
.oda-tablo dt { color: var(--metin-2); }
.oda-tablo dd { font-variant-numeric: tabular-nums; }

.daha-fazla summary { cursor: pointer; list-style: none; padding-block: .8rem; text-transform: uppercase; letter-spacing: .08em; font-size: .8125rem; color: var(--vurgu-koyu); }
.daha-fazla summary::-webkit-details-marker { display: none; }

.ayrinti-gorunum { position: sticky; top: 6.5rem; }

.gorunum-sekme { display: flex; gap: .5rem; margin-bottom: 1.5rem; justify-content: center; }

.gorunum-katman { display: grid; max-width: 46rem; margin-inline: auto; }
.gorunum-katman > * { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .5s, visibility .5s; aspect-ratio: 4 / 3; width: 100%; }
.gorunum-katman img { object-fit: cover; border-radius: var(--yumusak); height: 100%; }

.ayrinti:has(#gorunum-plan:checked) .gorunum-plan,
.ayrinti:has(#gorunum-foto:checked) .gorunum-foto,
.ayrinti:has(#gorunum-kat:checked) .gorunum-kat { opacity: 1; visibility: visible; }

.mesaj-bolum { background: var(--zemin-2); padding-block: clamp(5rem, 9vw, 8rem); overflow: hidden; position: relative; }

.mesaj-ic {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
}

.mesaj-ic img { border-radius: var(--yumusak); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.mesaj-ic .b2 { color: var(--vurgu-koyu); }
.mesaj-ic > div { display: grid; gap: 1.5rem; }

.benzerler { padding-block: clamp(4rem, 8vw, 7rem); }
.benzerler .b2 { margin-bottom: 2.5rem; color: var(--vurgu); }
.benzerler .kartlar { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ===================================================================
   KESIF - referanstaki 3B sahnenin betik-hafif karsiligi
   =================================================================== */

.kesif {
    position: relative;
    height: 100svh;
    min-height: 40rem;
    overflow: hidden;
    background: var(--ana-koyu);
    color: var(--zemin);
}

.kesif-radyo { position: absolute; opacity: 0; pointer-events: none; }

.kesif-gorunum { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .8s, visibility .8s; }

.kesif:has(#aci-cephe:checked) .kesif-cephe,
.kesif:has(#aci-hava:checked) .kesif-hava { opacity: 1; visibility: visible; }

.kesif-katman { position: absolute; inset: 0; }
.kesif-katman img { width: 100%; height: 100%; object-fit: cover; }

/* Gun/gece: gece katmani ustte, opakligi saat kaydiricisina bagli. */
.kesif-gece { opacity: var(--gece, 0); transition: opacity .3s; }
.kesif:has(#saat-gece:checked) { --gece: 1; }

.kesif-svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.birim-alan {
    fill: transparent;
    stroke: transparent;
    stroke-width: 2;
    cursor: pointer;
    transition: fill .3s, stroke .3s;
}

.kesif:has(#katman-konut:checked) .birim-konut,
.kesif:has(#katman-ticari:checked) .birim-ticari {
    fill: color-mix(in srgb, var(--ana) 30%, transparent);
    stroke: var(--vurgu-acik);
    stroke-opacity: .85;
}

.kesif:has(#katman-konut:checked) .birim-konut:hover,
.kesif:has(#katman-ticari:checked) .birim-ticari:hover,
.kesif a:focus-visible .birim-alan {
    fill: color-mix(in srgb, var(--vurgu-acik) 55%, transparent);
    stroke: var(--vurgu-acik);
}

.kesif:has(#katman-yok:checked) .kesif-svg a { pointer-events: none; }
.kesif:has(#katman-konut:checked) .birim-ticari-bag,
.kesif:has(#katman-ticari:checked) .birim-konut-bag { pointer-events: none; }

.kesif-cubuk {
    position: absolute;
    left: 50%;
    bottom: 1.5rem;
    translate: -50% 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .75rem 1.5rem;
    padding: .6rem 1rem;
    border-radius: var(--hap);
    background: color-mix(in srgb, var(--zemin) 88%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    color: var(--ana);
    width: max-content;
    max-width: calc(100% - 2rem);
}

.kesif-grup { display: flex; align-items: center; gap: .4rem; }
.kesif-grup > span:first-child { margin-right: .4rem; color: var(--metin-2); }

.kesif-cubuk .hap-secim span { min-height: 2.25rem; }

.kesif-saat { display: flex; align-items: center; gap: .6rem; }
.kesif-saat svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.3; }
.kesif-saat input[type="range"] { width: 9rem; accent-color: var(--vurgu); }
.kesif-saat output { min-width: 3.25rem; font-variant-numeric: tabular-nums; }

html.js .saat-radyo { display: none; }
html:not(.js) .kesif-saat input[type="range"], html:not(.js) .kesif-saat output { display: none; }

.kesif-bilgi {
    position: absolute;
    top: 7.5rem;
    left: var(--kenar);
    z-index: 4;
    display: grid;
    gap: .75rem;
    max-width: 24rem;
    text-shadow: 0 .1rem 1.2rem color-mix(in srgb, var(--ana-koyu) 70%, transparent);
}

.kesif-bilgi .ust-yazi { color: var(--vurgu-acik); }

/* Parlak cephe fotografinda yazi okunsun: sol ustten yumusak karartma. */
.kesif::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(60% 55% at 0% 0%, color-mix(in srgb, var(--ana-koyu) 70%, transparent), transparent 70%); }
.kesif-bilgi .paragraf { color: var(--zemin); }

/*
    BIRIM CEKMECESI.

    Betik yoksa `:target` ile acilir (her birimin kendi kimligi var, SVG
    alani oraya baglanti). Betik varken de ayni `:target` kullaniliyor -
    ek bir durum yok; betik yalnizca Esc ile kapatmayi ekler.
*/
.cekmece {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 95;
    width: min(28rem, 100%);
    overflow-y: auto;
    padding: 6.5rem 2rem 2rem;
    background: var(--zemin);
    color: var(--metin);
    translate: 100% 0;
    visibility: hidden;
    transition: translate .6s var(--akis), visibility .6s;
    box-shadow: -1rem 0 3rem color-mix(in srgb, var(--ana-koyu) 25%, transparent);
}

.cekmece:target { translate: 0 0; visibility: visible; }

.cekmece .ust-yazi { color: var(--vurgu-koyu); }
.cekmece .b1 { color: var(--vurgu); margin-block: .5rem 1rem; }
.cekmece-kapat { position: absolute; top: 1.5rem; right: 1.5rem; display: grid; place-items: center; width: 3rem; height: 3rem; border: 1px solid var(--cizgi); border-radius: 50%; text-decoration: none; }
.cekmece-kapat svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.3; }
.cekmece .dugme { margin-top: 1.5rem; }
.cekmece-plan { margin-top: 1.5rem; aspect-ratio: 4 / 3; }

/* ===================================================================
   IS ALANLARI KIPI - lacivert
   =================================================================== */

.kip-lacivert .kapak::before { background: linear-gradient(90deg, color-mix(in srgb, var(--koyu) 70%, transparent), transparent 75%); }
.kip-lacivert .kapak .ust-yazi { color: var(--vurgu-acik); }
.kip-lacivert .birim-kart-ad { color: var(--koyu); }
.kip-lacivert .hap-secim input:checked + span { background: var(--koyu); border-color: var(--koyu); }
.kip-lacivert .aralik::after { background: var(--koyu); }
.kip-lacivert .suzgec h2 { color: var(--koyu); }
.kip-lacivert .anlati-sahne { background: radial-gradient(120% 120% at 100% 100%, color-mix(in srgb, var(--koyu) 70%, var(--ana-acik)), var(--koyu)); }

.panorama .foto-ic > div { grid-column: 1 / span 6; grid-row: 1 / -1; align-self: center; display: grid; gap: 1.5rem; justify-items: start; }
.panorama .paragraf { color: var(--zemin); }
.panorama .b2 { color: var(--zemin-2); }

/* ===================================================================
   YATIRIMCI
   =================================================================== */

.durgun { background: var(--zemin-2); }

.durgun-ic {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
    padding-block: clamp(5rem, 9vw, 9rem);
}

.durgun .b2 { color: var(--vurgu-koyu); }
.durgun-metin { display: grid; gap: 1.5rem; }

.maske-ciftler { position: relative; display: flex; align-items: flex-start; justify-content: flex-end; }
.maske-ciftler .maskeli { position: relative; }
.maske-ciftler .maskeli-1 { width: min(32vw, 32rem); aspect-ratio: 3 / 4; }
.maske-ciftler .maskeli-2 { width: min(24vw, 24rem); aspect-ratio: 3 / 4; margin-left: -2.5rem; margin-top: 8rem; }

html.js .durgun:not(.gorundu) .maskeli { opacity: 0; scale: 1.1; filter: blur(8px); }
.durgun .maskeli { transition: opacity 1.2s, scale 1.2s var(--cikis), filter 1.2s; }
.durgun .maskeli-2 { transition-delay: .7s; }

.durgun-lacivert { background: var(--koyu); color: var(--zemin-2); }
.durgun-lacivert .b2 { color: var(--cizgi); }
.durgun-lacivert .paragraf { color: var(--zemin-2); }
.durgun-lacivert .durgun-ic { grid-template-columns: 6fr 5fr; }
.durgun-lacivert .maskeli-3 { position: relative; width: min(44vw, 42rem); aspect-ratio: 1; }

.projeler { position: relative; height: 500svh; background: var(--koyu); color: var(--zemin-2); }

.projeler-sahne {
    position: sticky;
    top: 0;
    height: 100svh;
    display: grid;
    grid-template-columns: 45fr 55fr;
    overflow: hidden;
}

.projeler-metin { position: relative; }

.proje-yazi {
    position: absolute;
    inset: 8rem var(--kenar) 7rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
    opacity: 0;
    translate: 0 1rem;
    transition: opacity .8s, translate .8s var(--cikis);
}

.proje-yazi .b2 { color: var(--vurgu-acik); }
.proje-yazi .paragraf { color: var(--zemin-2); display: grid; gap: 1rem; }
.proje-yazi .ust-yazi { display: inline-flex; gap: .5rem; align-items: center; color: var(--vurgu-acik); }
.proje-yazi .ust-yazi svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.3; }

.projeler-gorsel { position: relative; overflow: hidden; }

.projeler .katman-gorsel { opacity: 1; visibility: visible; clip-path: inset(0 0 0 100%); transition: clip-path 1s var(--akis); }

.projeler-sahne[data-sira="0"] .proje-0,
.projeler-sahne[data-sira="1"] .proje-1,
.projeler-sahne[data-sira="2"] .proje-2,
.projeler-sahne[data-sira="3"] .proje-3 { opacity: 1; translate: 0 0; clip-path: inset(0); }

.projeler .ilerleme { z-index: 3; }

html:not(.js) .projeler { height: auto; }
html:not(.js) .projeler-sahne { position: relative; height: auto; display: block; }
html:not(.js) .proje-yazi { position: relative; inset: auto; opacity: 1; translate: none; padding: 3rem var(--kenar); }
html:not(.js) .projeler-gorsel, html:not(.js) .projeler .ilerleme { display: none; }

/* ===================================================================
   ILETISIM SAYFASI
   =================================================================== */

.iletisim-sayfa {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100svh;
}

.iletisim-foto { position: relative; overflow: hidden; color: var(--zemin-2); min-height: 100svh; }
.iletisim-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; scale: 1.2; }
.iletisim-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, var(--ana-koyu) 65%, transparent), transparent 55%); }
.iletisim-foto-yazi { position: absolute; left: var(--kenar); right: var(--kenar); bottom: 3rem; z-index: 1; display: grid; gap: 1.25rem; }
.iletisim-foto-yazi h1 { text-transform: uppercase; }
.iletisim-foto-yazi .paragraf { color: var(--zemin-2); }

.iletisim-form-kolon { padding: 10rem var(--kenar) 4rem; }

.sekmeler { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.sekme-radyo { position: absolute; opacity: 0; pointer-events: none; }

.sekme {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0 1.25rem;
    border: 1px solid var(--ana-acik);
    border-radius: 999px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .8125rem;
    transition: background-color .3s, color .3s;
}

.sekme-ayrac { width: 1rem; height: 1px; background: var(--ana-acik); }

.iletisim-sayfa:has(#sekme-talep:checked) label[for="sekme-talep"],
.iletisim-sayfa:has(#sekme-arama:checked) label[for="sekme-arama"],
.iletisim-sayfa:has(#sekme-ticari:checked) label[for="sekme-ticari"] { background: var(--zemin-2); color: var(--ana); border-color: var(--zemin-2); }

.sekme-radyo:focus-visible + label { outline: 2px solid var(--vurgu-acik); outline-offset: 2px; }

.sekme-panel { display: none; }
.iletisim-sayfa:has(#sekme-talep:checked) .panel-talep,
.iletisim-sayfa:has(#sekme-arama:checked) .panel-arama,
.iletisim-sayfa:has(#sekme-ticari:checked) .panel-ticari { display: block; }

.onay { display: flex; gap: .75rem; align-items: start; font-size: .875rem; color: var(--cizgi); }
.onay input { accent-color: var(--vurgu-acik); margin-top: .2rem; }

.iletisim-dogrudan { margin-top: 3rem; color: var(--cizgi); }
.iletisim-dogrudan a { color: var(--vurgu-acik); }

/* ===================================================================
   404
   =================================================================== */

.bulunamadi { position: relative; min-height: 100svh; display: grid; place-content: center; justify-items: center; gap: 2rem; text-align: center; color: var(--zemin-2); overflow: hidden; isolation: isolate; padding: 2rem; }
.bulunamadi video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.bulunamadi::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--ana-koyu) 50%, transparent); }
.bulunamadi .dev { color: var(--cizgi); }

/* ===================================================================
   DAR EKRAN
   =================================================================== */

@media (max-width: 1120px) {
    .cevre-ic, .bulucu-ic, .ayrinti-ust { grid-template-columns: 1fr; }
    .harita { aspect-ratio: 4 / 3; }
    .suzgec { position: static; }
    .alt-bolge-ic { grid-template-columns: 1fr 1fr; }
    .benzerler .kartlar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .anlati-ekran-1 > div, .anlati-ekran-2 > div { grid-column: 1 / span 8; }
    .anlati-ekran-3 .anlati-alt { grid-column: 1 / -1; }
    .ayrinti-gorunum { position: static; }
}

@media (max-width: 800px) {
    .bolunmus, .bolunmus-ters, .iletisim-sayfa, .projeler-sahne, .durgun-ic, .durgun-lacivert .durgun-ic, .mesaj-ic { grid-template-columns: 1fr; }
    .bolunmus-gorsel { min-height: 70svh; order: -1; }
    .foto-ic { grid-template-columns: minmax(0, 1fr); }
    .foto-ic > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
    .konum .video-cerceve { margin-top: 0; }
    .konum .dev, .is-tanitim .dev { text-align: left; }
    .kartlar, .benzerler .kartlar { grid-template-columns: 1fr; }
    .form { grid-template-columns: 1fr; }
    .alt-bolge-ic { grid-template-columns: 1fr; gap: 2rem; }
    .kapak-metin { grid-column: 1 / -1; }
    .iletisim-foto { min-height: 60svh; }
    .iletisim-form-kolon { padding-top: 3rem; }
    .projeler-sahne { grid-template-rows: minmax(0, 1fr) 42svh; }
    .proje-yazi { inset: 6.5rem var(--kenar) 3.5rem; }
    .projeler .ilerleme { bottom: calc(42svh + 1rem); }
    .kokler .maskeli-1 { width: 40vw; left: 3%; top: 32%; }
    .kokler .maskeli-2 { width: 34vw; left: 58%; top: 50%; }
    .kokler .maskeli-3 { width: 42vw; right: 3%; top: 9%; }
    .maske-ciftler .maskeli-1 { width: 56vw; }
    .maske-ciftler .maskeli-2 { width: 40vw; }
    .durgun-lacivert .maskeli-3 { width: 84vw; }
    .anlati-ekran { padding-top: 7.5rem; }
    .anlati-ekran-1 > div, .anlati-ekran-2 > div { grid-column: 1 / -1; padding-top: 0; }
    .cerceve-1, html.js .anlati-sahne[data-ekran] .cerceve-1 { left: 52%; top: auto; bottom: 12%; width: 42vw; height: 30svh; }
    .cerceve-2, html.js .anlati-sahne[data-ekran] .cerceve-2 { left: 4%; top: auto; bottom: 8%; width: 42vw; height: 24svh; }
    .hap .dugme-metin > span { display: none; }
    .hap .dugme { padding-inline: 1rem; }
    .menu-ac .menu-yazi { display: none; }
    .kesif-bilgi { top: 6.5rem; right: var(--kenar); }
    .kesif-cubuk { bottom: .75rem; gap: .5rem; }
    .igne-ad { display: none; }
    .yuvarlak-oklar { left: 1rem; right: 1rem; }
    .birim-kart { padding-inline: 1.25rem; }
}

/* ===================================================================
   AZ HAREKET
   =================================================================== */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
        animation: none !important;
        transition-duration: .001ms !important;
        transition-delay: 0s !important;
    }

    html.js [data-bol] .parca,
    html.js [data-gor] { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; }

    html.js [data-paralaks] { transform: none; }
}

/* ===================================================================
   TANITIM FILMI PENCERESI (is alanlari) - betiksiz, :target
   =================================================================== */

.film {
    position: fixed;
    inset: 0;
    z-index: 96;
    display: none;
    place-items: center;
    padding: 5rem 1.5rem 2rem;
    background: color-mix(in srgb, var(--ana-koyu) 88%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.film:target { display: grid; }
.film video { width: min(90rem, 100%); max-height: 80svh; border-radius: var(--yumusak); background: var(--ana-koyu); }
.film .cekmece-kapat { color: var(--zemin); border-color: var(--ana-acik); top: 1.5rem; right: 1.5rem; }