/*
    KONUT PROJESI - yerlesim ailesi L18.

    =====================================================================
    ANLATIM SAYFAYI SURUKLER
    =====================================================================
    Abdullah'in tarifi (2026-09-13, ucuncu tur): sayfa bir HIKAYE gibi
    aksin, bloklar birbirine baglansin, renk butunlugu bozulmasin,
    ruzgarla salinan cicekler olsun. Onceki iki denemem bunu tasimiyordu -
    bolumler yan yana dizilmis kartlardi ve kareler arasinda ani renk
    sicramasi vardi.

    Sahne sirasi bir anlati:

      00  vitrin (tam ekran fotograf, cok buyuk Didone ad)
      01  YUVARLAK panel asagidan yukselir, icinde kucuk bir serit
      02  soz - tam genislik fotograf uzerinde tek cumle
      03  kavram - kemik zemin, kosede salinan cicekler
      04  YATAY kayma: daire tipleri yana akar
      05  bulutlar suzulur, ardindan genis acili yapi
      06  ozellik seridi
      07  menuden secilen tam ekran fotograf
      08  ikinci YUVARLAK panel
      09  BOLUNMUS fotograf birlesir ve tam ekrana buyur
      10  iletisim

    =====================================================================
    BETIKSIZ - VE BU BIR KISIT DEGIL, TERCIH
    =====================================================================
    Butun hareket CSS ile: `animation-timeline: view()` ve `scroll()`
    kaydirmaya bagli animasyonlari betik olmadan kuruyor. Destegi
    olmayan tarayicida sayfa DURAGAN ama EKSIKSIZ acilir - hicbir bolum
    gizli baslamiyor, yalnizca hareket etmiyor.

    Depodaki 24 temanin hicbirinde davranis betigi yok; bu tema da o
    cizgiyi bozmuyor.
*/

/* ===================================================================
   YAZI TIPLERI

   Referansin ticari uclusu (Maison Neue Extended / Ambroise / Sloop)
   KULLANILAMAZ - lisanslari bu is icin satin alinmadi. Serbest
   karsiliklari: Bodoni Moda, Parisienne, Archivo.
   =================================================================== */

/*
    BODONI MODA VE ARCHIVO DEGISKEN YAZI TIPLERIDIR.

    Once her agirlik ayri indirilmisti; dosyalarin MD5'i alininca
    400 ile 600'un BAYT BAYT AYNI oldugu goruldu - Google bu ailelerde
    tek bir degisken dosya doner ve agirligi CSS tarafinda kesilir.
    Dort dosya bosuna paketleniyordu (~80 KB).

    Dogrusu altta: alt kume basina TEK dosya ve `font-weight` bir
    ARALIK. Tarayici agirligi degisken eksende kendisi uretiyor.

    `font-display: swap` SART: yazi tipi inene kadar metin GORUNMEZ
    kalirsa ziyaretci bos bir sayfa gorur.
*/
@font-face {
    font-family: 'Bodoni Moda';
    src: url('../fonts/bodoni-moda-400-latin.woff2') format('woff2');
    font-weight: 400 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;
}

/* Turkce karakterler (ğ ş İ ı) BU aralikta: dosya olmadan eksik cikar. */
@font-face {
    font-family: 'Bodoni Moda';
    src: url('../fonts/bodoni-moda-400-latin-ext.woff2') format('woff2');
    font-weight: 400 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: 'Parisienne';
    src: url('../fonts/parisienne-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: 'Parisienne';
    src: url('../fonts/parisienne-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;
}

/* Archivo da degisken - yukaridaki gerekce. */
@font-face {
    font-family: 'Archivo';
    src: url('../fonts/archivo-400-latin.woff2') format('woff2');
    font-weight: 400 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: 'Archivo';
    src: url('../fonts/archivo-400-latin-ext.woff2') format('woff2');
    font-weight: 400 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;
}

/* ===================================================================
   JETONLAR - kontrastlar olculdu
   =================================================================== */

:root {
    /* Erik: koyu bloklarin zemini. Kemik yazi uzerinde 14.56. */
    --ana: #3a1028;
    --ana-koyu: #250a1a;
    /* Kemik zeminde okunur bir erik: 6.34. */
    --ana-acik: #7d4762;

    /* Soluk gok: erik uzerinde 8.21, en koyu uzerinde 9.59. Bulut
       bolumunun zemini de bu. */
    --vurgu: #9fbccd;
    /* Kemik zeminde okunan uc: 5.24. */
    --vurgu-koyu: #3d6a80;
    --vurgu-acik: #cfe0e9;

    --zemin: #f3f2ea;
    --zemin-2: #e7e5d9;

    /* Lacivert metin: kemik uzerinde 13.96, gok uzerinde 8.21. */
    --metin: #17233b;
    --metin-2: #55617a;

    --cizgi: #d5d2c4;
    --koyu: #1b0a14;

    --kap: 1440px;
    --yumusak: 0;
}

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

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

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--zemin);
    color: var(--metin);
    font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    /* Yatay kayan bolum disari tasmasin. */
    overflow-x: hidden;
}

p { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.baslik {
    font-family: 'Bodoni Moda', 'Times New Roman', Georgia, serif;
    font-weight: 400;
    text-transform: uppercase;
    line-height: .86;
    letter-spacing: -0.022em;
    margin: 0;
    /* Basliklarin cogu musteri metnidir; sigmayan tek kelime kutuyu
       tasirmak yerine bolunsun. */
    overflow-wrap: break-word;
}

.elyazisi {
    font-family: 'Parisienne', 'Brush Script MT', cursive;
    text-transform: none;
    letter-spacing: 0;
    line-height: .8;
    display: block;
}

.mikro {
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: .69rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    line-height: 1.5;
}

.kap { width: min(100% - 3rem, var(--kap)); margin-inline: auto; }

:is(a, button, input, textarea, select):focus-visible {
    outline: 2px solid var(--vurgu-koyu);
    outline-offset: 3px;
}

.atla {
    position: absolute;
    left: -9999px;
    background: var(--ana);
    color: var(--zemin);
    padding: .75rem 1.25rem;
    z-index: 60;
}

.atla:focus { left: 1rem; top: 1rem; }

/* ===================================================================
   FOTOGRAF PERDESI - RENK BUTUNLUGU
   =================================================================== */

/*
    HER FOTOGRAF AYNI PERDEDEN GECER.

    Abdullah'in bildirdigi kusur buydu: kareler arasinda ani renk
    sicramasi vardi, sayfa dagiliyordu. Uretilen fotograflar ayni
    saatte cekilmis gibi istemlendi ama bu YETMEZ - ustlerine ortak,
    jetondan turetilmis ince bir erik perdesi seriliyor ve doygunluk
    bir tik dusuruluyor. Butun kareler ayni ailenin uyesi gibi duruyor.

    Perde jetondan geldigi icin yapay zeka paleti degistirdiginde
    fotograflar da onunla birlikte kayiyor.
*/
.kare { position: relative; overflow: hidden; }

.kare > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /*
        `sepia` burada susleme degil, BIRLESTIRICI. Yalnizca doygunluk
        dusurmek fotograflari soluklastiriyordu ama ic mekan kareleri
        hala SOGUK, dis mekan kareleri SICAK kaliyordu - iki ayri
        aileydi (ekranda olculdu). Sepia butun tonlari tek bir hueye
        dogru cekiyor; ustteki erik perdesi de o hueyi paletin icine
        oturtuyor.
    */
    filter: saturate(.82) contrast(1.04) sepia(.1);
}

.kare::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: color-mix(in srgb, var(--ana) 18%, transparent);
    mix-blend-mode: multiply;
}

/* ===================================================================
   SABIT KATMAN - muhur, menu, sol ray
   =================================================================== */

.katman {
    position: fixed;
    inset: 0;
    z-index: 40;
    pointer-events: none;
    /*
        HER ZEMINDE OKUNUR - BETIKSIZ.

        Sayfa kemik, erik, gok mavisi ve fotograf arasinda gidip
        geliyor; sabit tek bir renk birinde mutlaka okunmaz olurdu.
        `difference` altindaki rengin tersini alir, kontrast yapisi
        geregi yuksek kalir.
    */
    color: var(--zemin);
    mix-blend-mode: difference;
}

.katman a, .katman button { pointer-events: auto; }

.muhur {
    position: absolute;
    top: 1.6rem;
    left: 1.6rem;
    width: 6.5rem;
    height: 6.5rem;
    display: grid;
    place-items: center;
    text-decoration: none;
}

.muhur-yazi { position: absolute; inset: 0; animation: dondur 26s linear infinite; }

.muhur-yazi text {
    font-family: 'Archivo', sans-serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .28em;
    text-transform: uppercase;
    fill: currentColor;
}

.muhur-isaret { width: 1.7rem; height: 1.7rem; }

/*
    LOGO YUKSEKLIGI SABIT.

    Yuklenen gorselin oranini bilmiyoruz; sabitlenmezse uzun bir logo
    muhrun cemberini tasar ve sayfa yuklenirken duzen kayar.
*/
.marka-logo { height: 2.4rem; width: auto; }
.muhur-logo { max-width: 3.4rem; }

@keyframes dondur { to { transform: rotate(360deg); } }

.menu {
    position: absolute;
    top: 1.8rem;
    right: 1.8rem;
    display: grid;
    gap: .15rem;
    justify-items: end;
    text-align: right;
}

.menu a { text-decoration: none; padding-block: .25rem; }
.menu-ana { font-size: .8rem; }

.ray { position: absolute; left: 1.9rem; bottom: 2rem; display: grid; gap: .75rem; justify-items: center; }

/*
    RAY ILK EKRANDAN SONRA CEKILIR.

    Iki sebep, ikisi de ekranda goruldu:

    - "Kaydirin" yazisinin ziyaretci kaydirdiktan sonra soyleyecek bir
      seyi kalmiyor.
    - Sabit durdugu icin tam genislikteki seritlerin metnini KESIYORDU
      (dar ekranda ray 30-46px, serit metni 24px'ten basliyor). Her
      serite ayri bir sol bosluk vermek yerine rayi cekmek hem tasarim
      hem cakisma sorununu tek hamlede cozuyor.
*/
@supports (animation-timeline: scroll()) {
    .ray {
        animation: ray-cekil linear both;
        animation-timeline: scroll(root block);
        animation-range: 0 80svh;
    }
}

@keyframes ray-cekil {
    to { opacity: 0; translate: 0 1rem; }
}
.ray-yazi { writing-mode: vertical-rl; letter-spacing: .3em; font-size: .62rem; font-weight: 600; text-transform: uppercase; }
.ray-cizgi { width: 1px; height: 3.5rem; background: currentColor; opacity: .5; }

@media (max-width: 62rem) {
    /* Dar ekranda ray ve muhur icerigin uzerine biner; ikisi de
       susleme, islev degil. */
    .muhur, .ray { display: none; }
    .menu { top: 1rem; right: 1rem; }
}

/* ===================================================================
   CICEKLER - kesilmis GERCEK FOTOGRAF begonvil
   =================================================================== */

/*
    CIZIM DEGIL FOTOGRAF - VE BU BIR GERI ADIM DEGIL, DUZELTME.

    Ilk iki surumde cicekler SVG cizimdi. Gerekcesi savunulabilirdi
    (birkac kilobayt, her cozunurlukte keskin, dallar ayri ayri
    salinabiliyor) ama sonuc yanlisti. Abdullah: "senin yaptigin
    paintle cizilmis gibi duruyor, demo sitedeki birebir cicegin
    kendisi." Hakliydi: begonvilin kagitsi brakte dokusu, yapraklarin
    uzerindeki isik ve dalin derinligi vektorle taklit edilemiyor -
    ne kadar duzeltilirse duzeltilsin illustrasyon olarak kaliyor.

    Simdi gercek bir fotograf, DUZ BEYAZ zeminde uretilip beyazi alfaya
    cevrilerek kesildi (yontem scratchpad/cicek-foto.php icinde
    aciklandi). Alfali WebP: 1800px genisliginde 541 KB - saydam PNG
    olsaydi 1.8 MB olurdu.

    KAYIP: dallar artik ayri ayri salinamiyor, gorsel butun olarak
    hareket ediyor. Bu kabul edildi, cunku fotografin dokusu o kadar
    zengin ki tek parca 2-3 derecelik bir salinim bile ruzgar olarak
    okunuyor; cizimde ayni etki icin 14 derece gerekiyordu.
*/
.cicek {
    position: absolute;
    /*
        CICEK METNIN ALTINDA.

        Once 3 idi ve govde metninin USTUNE biniyordu - bir paragrafin
        uzerinde cicek olmasi susleme degil kusurdur (ekranda goruldu).
        Bolum icerigi 1. katmanda, cicek 0. katmanda.
    */
    z-index: 0;
    pointer-events: none;
    user-select: none;
    /*
        Dar ekranda 56vw neredeyse butun genisligi kapliyordu. Alt sinir
        dusuruldu: telefonda kose susu, masaustunde perde.
    */
    width: clamp(13rem, 46vw, 46rem);
    height: auto;
    /* Salinim tutundugu yerden olsun diye origin her yerlesimde ayri. */
    animation: dal-salla 7s ease-in-out infinite alternate;
}

/*
    YERLESIMLER.

    Tek bir gorsel var; cesitlilik AYNALAMA ve olcekle saglaniyor.
    Bes ayri fotograf uretmek hem paketi bes kat sisirir hem de
    aralarinda renk/isik farki dogururdu - sayfanin renk butunlugu
    tam da bundan bozulmustu.

    Aynalama `scale`, salinim `rotate` ile: ikisi ayri ozellik oldugu
    icin birbirini ezmiyor. Aynalama hangi eksendeyse `transform-origin`
    o eksende ORTA olmali, yoksa kutu kendi boyu kadar oteleniyor ve
    cicek ekranin disinda kaliyor (uc kez boyle kayboldu).
*/
/*
    Gorselin CICEKLI KISMI ust seritte; kutuyu yukari kaydirmak o
    seridi bolumun disinda birakiyor ve geriye bos alan kaliyordu
    (ekranda olculdu: kutu y=-89, yuksekligi 162 - yani cicekler
    tamamen kirpilmisti). Ust kenara YAPISIK duruyor.
*/
.cicek-sol-ust {
    top: 0;
    left: -3rem;
    transform-origin: top left;
}

.cicek-sag-ust {
    top: 0;
    right: -3rem;
    transform-origin: center top;
    scale: -1 1;
    animation-duration: 8.5s;
    animation-delay: -3s;
}

.cicek-sol-alt {
    bottom: 0;
    left: -3rem;
    transform-origin: left center;
    scale: 1 -1;
    animation-duration: 9s;
    animation-delay: -4.5s;
}

.cicek-sag-alt {
    bottom: 0;
    right: -3rem;
    transform-origin: center;
    scale: -1 -1;
    animation-duration: 7.8s;
    animation-delay: -2s;
}

.cicek-sol-orta {
    top: 50%;
    left: -10rem;
    translate: 0 -50%;
    transform-origin: left center;
    animation-duration: 8s;
    animation-delay: -1.5s;
}

.cicek-buyuk { width: clamp(18rem, 60vw, 62rem); }

/*
    FOTOGRAF UZERINDEKI DALLAR.

    Kesilmis cicek her zeminde okunur ama koyu bir fotografin uzerinde
    kenarlari eriyor. Ince bir golge onu ayiriyor; rengi jetondan
    turedigi icin yapay zeka koyu tonu degistirdiginde golge de
    onunla degisiyor.
*/
.cicek-fotoda {
    filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--koyu) 45%, transparent));
}

/* Secim bolumunde dal fotograflarin (-2) ustunde ama menunun ALTINDA
   kalir; birlesme sahnesinde ise buyuyen fotografin USTUNDE durmali -
   bu yuzden katman ortak sinifta degil, bolume gore veriliyor. */
.secim .cicek { z-index: -1; }

/*
    Salinim GENLIGI cizimdekinin bestebiri.

    Cizimde 14 derece gerekiyordu cunku vektor sekiller ayrintisizdi ve
    kucuk hareket goze carpmiyordu. Fotografta her yaprak ayri bir
    doku; 2.5 derecelik bir salinim bile yuzlerce ayrinti birden
    kaydirdigi icin acikca ruzgar olarak okunuyor. Cizimin genligi
    fotografa uygulansaydi sallanan bir cikartma gibi dururdu.
*/
@keyframes dal-salla {
    from { rotate: -1.2deg; }
    to { rotate: 1.3deg; }
}

/* ===================================================================
   00 - VITRIN
   =================================================================== */

.vitrin {
    position: relative;
    min-height: 100svh;
    display: grid;
    align-items: center;
    isolation: isolate;
    color: var(--zemin);
    padding-block: 7rem 5rem;
}

.vitrin-gorsel { position: absolute; inset: 0; z-index: -2; }
.vitrin-gorsel > .kare { height: 100%; }

.vitrin::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    /*
        Ust serit daha koyu: sabit katman `difference` kipiyle ciziliyor
        ve o kip ORTA tonlarda en zayif sonucu verir - gun batimi
        gokyuzunde menu soluk kaliyordu.
    */
    background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--koyu) 62%, transparent) 0%,
        color-mix(in srgb, var(--koyu) 24%, transparent) 45%,
        color-mix(in srgb, var(--koyu) 72%, transparent) 100%
    );
}

.vitrin-ic { text-align: center; }
/*
    FIRMA ADININ UZUNLUGU BIZIM ELIMIZDE DEGIL.

    Taban 2.9rem'di ve `clamp` tabani ekran genisligini HIC dinlemez:
    dar bir ekranda "CINARALTI" gibi tek bir uzun kelime 46px'te
    kutusuna sigmiyor ve sagdan KESILIYORDU (280px'te olculdu; govdede
    `overflow-x: hidden` oldugu icin kaydirma cubugu da cikmiyor, yani
    sessizce kayboluyor).

    Iki yonlu duzeltme: taban dusuruldu, ve sigmayan tek kelime artik
    satiri tasirmak yerine boluniyor. `break-word` yalnizca kelime
    KENDI BASINA bir satira sigmadiginda devreye girer; normal
    sarmalamayi bozmaz.
*/
.vitrin h1 {
    font-size: clamp(1.9rem, 11.5vw, 9.5rem);
    overflow-wrap: break-word;
    margin-bottom: .1em;
}
.vitrin .elyazisi { font-size: .46em; margin-top: -.34em; }
.vitrin-ozet { margin-top: 1.5rem; max-width: 46ch; margin-inline: auto; opacity: .88; }

/* Satir boyunca parcalanmis metin: cumle ikiye bolunup satirin iki
   ucuna yerlesir, ortada ince bir ayrac durur. */
.parcali {
    margin-top: clamp(2rem, 5vw, 3.5rem);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: clamp(1rem, 4vw, 3rem);
}

.parcali-sol { text-align: right; }
.parcali-sag { text-align: left; }
.parcali-orta { display: grid; justify-items: center; }
.parcali-cizgi { width: clamp(3rem, 10vw, 8rem); height: 1px; background: currentColor; opacity: .55; }

@media (max-width: 44rem) {
    .parcali { grid-template-columns: 1fr; justify-items: center; }
    .parcali-sol, .parcali-sag { text-align: center; }
}

.vitrin-no { position: absolute; top: 9.5rem; left: 2.6rem; opacity: .8; }
@media (max-width: 62rem) { .vitrin-no { display: none; } }

/* ===================================================================
   01 / 08 - YUVARLAK PANEL
   =================================================================== */

/*
    ASAGIDAN YUKSELEN YUVARLAK ALAN.

    Anlatimin ilk maddesi. Ust kenar cok buyuk bir yaricapla kesiliyor
    ve panel, kendi gorunme araliginda yukari kayarak bir onceki
    fotografin UZERINE biniyor. Bagi kuran sey bu ortusme: iki bolum
    yan yana degil, ic ice - "devam eden hikaye" hissi buradan geliyor.

    Destek yoksa panel bulundugu yerde duragan durur; ortusme yine var,
    yalnizca hareket yok.
*/
.yuvarlak {
    position: relative;
    z-index: 2;
    margin-top: clamp(-7rem, -8vw, -4rem);
    border-start-start-radius: 50% 6rem;
    border-start-end-radius: 50% 6rem;
    background: var(--zemin);
    padding-block: clamp(4rem, 9vw, 7rem) clamp(3.5rem, 8vw, 6rem);
    overflow: hidden;
}

.yuvarlak-gok { background: var(--vurgu); }

@supports (animation-timeline: view()) {
    .yuvarlak {
        animation: panel-yuksel linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 75%;
    }
}

@keyframes panel-yuksel {
    from { translate: 0 4.5rem; border-start-start-radius: 50% 11rem; border-start-end-radius: 50% 11rem; }
    to { translate: 0 0; border-start-start-radius: 50% 5rem; border-start-end-radius: 50% 5rem; }
}

/* ===================================================================
   SERIT - kucuk kaydirmali kareler + kisa aciklama
   =================================================================== */

/*
    SLAYT BETIKSIZ: `scroll-snap`.

    Ziyaretci parmagiyla ya da tekerlekle yana kaydirir, kareler
    hizalanir. Ok tuslariyla da gezilebilir: serit odaklanabilir
    (`tabindex`) ve tarayici klavye kaydirmasini kendisi yapar.
*/
.serit {
    margin-top: clamp(2rem, 5vw, 3.5rem);
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(78vw, 24rem);
    gap: 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1.5rem;
    padding: 0 1.5rem 1rem;
    /*
        SOLDA RAY VAR.

        Sabit ray 30-46px arasinda duruyor; serit 24px'ten basladigi
        icin ray metnin ustune biniyordu (ekranda goruldu). Ray
        kaydirinca soluyor ama `prefers-reduced-motion` altinda
        solmuyor - bu yuzden bosluk kosula BAGLANMADAN veriliyor.
    */
    padding-inline-start: clamp(4rem, 6vw, 6rem);
    scroll-padding-inline-start: clamp(4rem, 6vw, 6rem);
    scrollbar-width: thin;
}

.serit > figure { margin: 0; scroll-snap-align: center; }
.serit .kare { aspect-ratio: 4 / 3; }
.serit figcaption { margin-top: .75rem; }

.serit figcaption b {
    display: block;
    font-family: 'Bodoni Moda', Georgia, serif;
    font-size: 1.15rem;
    font-weight: 400;
    letter-spacing: -0.01em;
}

.serit figcaption span { color: var(--metin-2); font-size: .92rem; }

/* ===================================================================
   02 - SOZ
   =================================================================== */

.soz {
    position: relative;
    isolation: isolate;
    color: var(--zemin);
    min-height: 86svh;
    display: grid;
    align-items: center;
    padding-block: clamp(4rem, 10vw, 8rem);
}

.soz-gorsel { position: absolute; inset: 0; z-index: -2; }
.soz-gorsel > .kare { height: 100%; }

.soz::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: color-mix(in srgb, var(--koyu) 48%, transparent);
}

.soz-metin { font-size: clamp(1.15rem, 3.1vw, 2.5rem); max-width: 22ch; }
.soz-kimden { margin-top: 2rem; opacity: .8; }

/*
    FOTOGRAF KAYDIRDIKCA HAFIFCE BUYUR.

    Buyume cok az (1 -> 1.08): amac gosteri degil, sayfanin canli
    oldugunu hissettirmek. Buyuk bir olcek degisimi burada mide
    bulandirirdi.
*/
@supports (animation-timeline: view()) {
    .soz-gorsel img {
        animation: yakinlas linear both;
        animation-timeline: view();
    }
}

@keyframes yakinlas {
    from { scale: 1; }
    to { scale: 1.08; }
}

/* ===================================================================
   BOLUM BASLIKLARI
   =================================================================== */

.bolum { position: relative; padding: clamp(4rem, 10vw, 8rem) 0; scroll-margin-top: 2rem; overflow: hidden; }
.bolum-erik { background: var(--ana); color: var(--zemin); }
.bolum-gok { background: var(--vurgu); color: var(--metin); }
.bolum-kemik-2 { background: var(--zemin-2); }

.bolum-baslik {
    text-align: center;
    font-size: clamp(1.9rem, 6.2vw, 4.6rem);
    max-width: 20ch;
    margin-inline: auto;
}

.bolum-baslik .elyazisi { font-size: .62em; margin-block: -.16em; color: var(--ana-acik); }
.bolum-erik .bolum-baslik .elyazisi { color: var(--vurgu); }
.bolum-gok .bolum-baslik .elyazisi { color: var(--ana); }

.bolum-ozet { margin: clamp(1.5rem, 4vw, 2.5rem) auto 0; max-width: 52ch; text-align: center; color: var(--metin-2); }
.bolum-erik .bolum-ozet { color: var(--vurgu-acik); }
.bolum-gok .bolum-ozet { color: var(--metin); opacity: .85; }

.bolum-no { display: block; text-align: center; margin-bottom: 1.25rem; opacity: .65; }

/* ===================================================================
   04 - YATAY KAYMA
   =================================================================== */

/*
    SAYFA BIR ANDA YANA KAYAR.

    Anlatimin dorduncu maddesi. Uzun bir sarmalayici, icinde ekrana
    yapisan bir sahne; sahnedeki ray sarmalayicinin kaydirma
    araliginda yana oteleniyor. Ziyaretci ASAGI kaydirir, icerik YANA
    akar.

    Destek yoksa ray sirandan bir yatay kaydiriciya donusur: etki
    kaybolur, islev kalir.
*/
/*
    ZAMAN CIZELGESI SARMALAYICIDA ADLANDIRILIR, RAYDA DEGIL.

    Ilk yazimda ray dogrudan `scroll(nearest block)` kullaniyordu ve
    HIC CALISMADI - iki ayri sebeple, ikisi de ancak tarayicida
    olculunce goruldu (`translate` hesaplanan degeri `none` cikti):

    1. Sahnenin `overflow: hidden` olmasi onu bir kaydirma kabi yapar;
       "en yakin" kap belge degil O olur ve o kap hicbir zaman
       kaymadigi icin cizelge olu dogar.
    2. `contain` bir GORUNUM araligi adidir; kaydirma cizelgesinde
       karsiligi yoktur.

    Dogrusu: sarmalayicinin kendisine adli bir gorunum cizelgesi ver,
    ray onu adiyla cagirsin. `contain`, ekrandan uzun bir ogede tam
    olarak "ekrani kapladigi sure" demektir - yapiskan sahnenin ekranda
    durdugu araligin ta kendisi.
*/
.yatay-sarmal {
    position: relative;
    /*
        Once 300svh idi. Abdullah: "mouse tekerini baya ceviriyorum
        sitenin altina inmek icin." Kaydirmaya bagli uc bolum ust uste
        gelince sayfa on sekiz ekrani buluyordu; her biri kisaltildi.
    */
    height: 220svh;
    view-timeline: --yatay-kayma block;
}

.yatay-sahne {
    position: sticky;
    top: 0;
    height: 100svh;
    display: grid;
    align-content: center;
    overflow: hidden;
    /*
        ZEMIN GOKYUZU - ve bu bir renk tercihi degil, SUREKLILIK.

        Abdullah: "sayfa saga dogru kayma efekti bir alttaki bulut
        efekti ile ayni olsun ki bir butunluk olussun... sanki farkli
        bir odaya geciyormussun gibi oluyor, bunu iyi yakalamis."

        Bolum erik bir bloktu; bir alttaki bulut bolumu gok mavisiydi
        ve ikisi arasinda sert bir renk kesmesi vardi. Ayni gogu
        paylasinca yana kayma bir bolumden otekine GECIS haline
        geliyor - iki ayri sahne degil, ayni gokyuzunde yol almak.
    */
    background: var(--vurgu);
    color: var(--metin);
}

.yatay-basi { padding-inline: clamp(4rem, 6vw, 6rem); margin-bottom: clamp(1.5rem, 4vw, 3rem); }

.yatay-ray {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(84vw, 28rem);
    gap: clamp(1rem, 3vw, 2.5rem);
    padding-inline: clamp(4rem, 6vw, 6rem);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}

.yatay-ray > * { scroll-snap-align: center; }

@supports (animation-timeline: view()) {
    .yatay-ray {
        overflow-x: visible;
        animation: yana-kay linear both;
        animation-timeline: --yatay-kayma;
        /* Yalnizca sarmalayici ekrani kapladigi surece kayar. */
        animation-range: contain;
    }
}

@keyframes yana-kay {
    from { translate: 2vw 0; }
    to { translate: calc(-100% + 80vw) 0; }
}

.daire {
    border: 1px solid color-mix(in srgb, currentColor 24%, transparent);
    padding: clamp(1.5rem, 3vw, 2.25rem);
    display: grid;
    gap: .75rem;
    align-content: start;
    min-height: min(56svh, 24rem);
}

.daire-no { opacity: .6; }

.daire h3 {
    font-family: 'Bodoni Moda', Georgia, serif;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    font-size: clamp(1.5rem, 3.4vw, 2.4rem);
    line-height: .95;
    margin: 0;
}

.daire p { opacity: .82; }

/* ===================================================================
   05 - BULUTLAR
   =================================================================== */

/*
    SUZULEN BULUTLAR.

    Bulutlar fotograf degil, yumusak gradyan lekeleri: dosya maliyeti
    sifir ve zemin renginin jetonundan turetildikleri icin palet
    degisince onlar da degisiyor. Uc katman farkli hizda gider - tek
    katman duz bir kaydirma gibi gorunurdu.
*/
.bulutlar { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

/*
    BULUTUN HAREKETI NEDEN GORUNMUYORDU.

    Abdullah "bulutlar pek belli olmuyor" dedi. Hiz tek basina sebep
    degildi (78 saniyede 200vw, ~26 px/s - az ama sifir degil). Asil
    sebep: bulut TEK BIR yumusak radyal gradyandi. Ozelliksiz bir
    lekenin kaymasi, gozun takip edecegi bir kenari olmadigi icin
    algilanmiyor - leke duruyor gibi gorunuyor.

    Uc degisiklik, ucu de bu teshise bagli:

    1. Her bulut artik UC ust uste gradyandan olusuyor; farkli
       yogunlukta tepeler, izlenecek yapi veriyor.
    2. Bulanikligi 8px'ten 4px'e indi - kenar tamamen yok olmasin.
    3. Sureler yariya indi ve yatay kaymaya hafif bir DIKEY salinim
       eklendi; iki eksenli hareket tek eksenliden cok daha kolay
       secilir.
*/
.bulut {
    position: absolute;
    border-radius: 50%;
    background:
        radial-gradient(closest-side at 30% 55%, color-mix(in srgb, var(--zemin) 96%, transparent), transparent),
        radial-gradient(closest-side at 62% 40%, color-mix(in srgb, var(--zemin) 88%, transparent), transparent),
        radial-gradient(closest-side at 80% 62%, color-mix(in srgb, var(--zemin) 78%, transparent), transparent);
    filter: blur(4px);
    animation: bulut-suzul linear infinite;
}

.bulut-1 { top: 10%; left: -35%; width: 44rem; height: 11rem; animation-duration: 34s; }
.bulut-2 { top: 32%; left: -50%; width: 30rem; height: 8rem; animation-duration: 46s; animation-delay: -14s; opacity: .85; }
.bulut-3 { top: 56%; left: -28%; width: 52rem; height: 13rem; animation-duration: 40s; animation-delay: -25s; opacity: .7; }

@keyframes bulut-suzul {
    from { translate: 0 0; }
    35% { translate: 70vw -1.2rem; }
    70% { translate: 140vw .9rem; }
    to { translate: 210vw 0; }
}

/* Bulut bolumunun altindaki genis acili yapi tam genislik. */
.genis-kare { margin-top: clamp(2.5rem, 6vw, 4rem); }
.genis-kare .kare { aspect-ratio: 21 / 9; }

/* ===================================================================
   07 - MENUDEN SECILEN TAM EKRAN FOTOGRAF
   =================================================================== */

/*
    TIKLAYINCA ARKA PLAN DEGISIR - BETIKSIZ.

    Radyo dugmeleri ve `:has()` ile. Betikle yapilsaydi betik
    yuklenmeden tiklayan ziyaretci hicbir sey goremezdi; boyle, ilk
    karenin isaretli gelmesi yeterli.
*/
.secim { position: relative; min-height: 100svh; display: grid; isolation: isolate; }

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

.secim-kareler { position: absolute; inset: 0; z-index: -2; }

.secim-kareler > .kare {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .7s ease;
}

.secim:has(#secim-1:checked) .secim-kare-1,
.secim:has(#secim-2:checked) .secim-kare-2,
.secim:has(#secim-3:checked) .secim-kare-3 { opacity: 1; }

/* Destegi olmayan tarayicida ilki hep gorunur - sahne bos kalmaz. */
@supports not selector(:has(*)) {
    .secim-kare-1 { opacity: 1; }
}

.secim::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: color-mix(in srgb, var(--koyu) 46%, transparent);
    pointer-events: none;
}

.secim-ic {
    align-self: center;
    display: grid;
    gap: .3rem;
    justify-items: center;
    text-align: center;
    color: var(--zemin);
    padding-block: clamp(4rem, 10vw, 8rem);
}

.secim-ic label {
    font-family: 'Bodoni Moda', Georgia, serif;
    text-transform: uppercase;
    letter-spacing: -0.015em;
    font-size: clamp(1.6rem, 5.5vw, 3.6rem);
    line-height: 1.05;
    cursor: pointer;
    opacity: .5;
    transition: opacity .3s ease;
}

.secim-ic label:hover { opacity: .85; }

.secim:has(#secim-1:checked) label[for="secim-1"],
.secim:has(#secim-2:checked) label[for="secim-2"],
.secim:has(#secim-3:checked) label[for="secim-3"] { opacity: 1; }

/* Klavye: radyo gizli ama odaklanabilir; etiket halkayi gosterir. */
.secim-radyo:focus-visible + label { outline: 2px solid var(--vurgu); outline-offset: 4px; }

/* ===================================================================
   09 - BOLUNMUS FOTOGRAF BIRLESIR VE BUYUR
   =================================================================== */

/*
    IKI YARIM ORTADA BIRLESIR, SONRA TAM EKRANA BUYUR.

    Anlatimin son maddesi ve sayfanin final hamlesi. Iki yarim once
    iceri kayar, sonra cerceve olceklenir. Iki animasyon ayni kaydirma
    araligina bagli oldugu icin hareket tek bir hamle gibi okunuyor.
*/
/*
    Cizelge yatay bolumdekiyle ayni mantikta: sarmalayiciya adli bir
    gorunum cizelgesi, animasyonlara `contain` araligi. Anonim `view()`
    ile yazilmisti ve olculunce yanlis oldugu goruldu - sarmalayici
    ekrandan uzun oldugu icin `entry` daha sahne ekrana yapismadan
    bitiyordu; bolunmus fotograf goz kirpma suresi kadar goruluyor,
    ziyaretci yalnizca birlesmis hali goruyordu. `contain`, yapiskan
    sahnenin ekranda durdugu surenin ta kendisi.
*/
.birlesme-sarmal {
    position: relative;
    height: 200svh;
    view-timeline: --birlesme block;
}

.birlesme {
    position: sticky;
    top: 0;
    height: 100svh;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: var(--zemin-2);
}

.birlesme-cerceve {
    position: relative;
    width: min(86vw, 42rem);
    aspect-ratio: 3 / 4;
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
}

.birlesme-yarim { overflow: hidden; height: 100%; }

/*
    IKI YARIM AYNI FOTOGRAFIN IKI PARCASI.

    Ilk yazimda iki yarimda IKI AYRI fotograf vardi ve ekranda tam da
    Abdullah'in sikayet ettigi sey oluyordu: "bi anda farkli bir fotoya
    geciyor". Ikisi birlesince bir bina degil bir ikili pano
    goruluyordu.

    Simdi tek gorsel ikiye boluniyor: her yarim kendi icinde tam
    genislikte duruyor, sagdaki kendi genisligi kadar sola cekiliyor.
    Yarimlar ortada bulusunca fotograf BUTUNLENIYOR - hikaye kesilmiyor,
    tamamlaniyor.
*/
.birlesme-yarim > .kare { height: 100%; width: 200%; }
.birlesme-sag > .kare { margin-inline-start: -100%; }

@supports (animation-timeline: view()) {
    .birlesme-sol { animation: yarim-sol linear both; animation-timeline: --birlesme; animation-range: contain 0% contain 45%; }
    .birlesme-sag { animation: yarim-sag linear both; animation-timeline: --birlesme; animation-range: contain 0% contain 45%; }
    .birlesme-cerceve { animation: cerceve-buyu linear both; animation-timeline: --birlesme; animation-range: contain 50% contain 95%; }
}

@keyframes yarim-sol { from { translate: -30% 0; } to { translate: 0 0; } }
@keyframes yarim-sag { from { translate: 30% 0; } to { translate: 0 0; } }

@keyframes cerceve-buyu {
    from { width: min(86vw, 42rem); aspect-ratio: 3 / 4; }
    to { width: 100vw; aspect-ratio: 16 / 9; }
}

/* ===================================================================
   OLANAKLAR
   =================================================================== */

.olanaklar { margin-top: clamp(2rem, 5vw, 3rem); list-style: none; padding: 0; display: grid; gap: .1rem; }

.olanak {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem;
    padding: .9rem 0;
    border-bottom: 1px solid color-mix(in srgb, currentColor 20%, transparent);
}

.olanak-ad { font-family: 'Bodoni Moda', Georgia, serif; font-size: clamp(1.05rem, 2.2vw, 1.5rem); letter-spacing: -0.01em; }

/* ===================================================================
   KONUM VE ILETISIM
   =================================================================== */

.konum-cizim { margin-top: clamp(2rem, 5vw, 3.5rem); }
.konum-cizim svg { width: 100%; height: auto; overflow: visible; }
.konum-yol { fill: none; stroke: currentColor; stroke-width: 1.2; opacity: .55; }

.iletisim-duzen { margin-top: clamp(2rem, 5vw, 3.5rem); display: grid; gap: clamp(2rem, 5vw, 4rem); }

@media (min-width: 58rem) {
    .iletisim-duzen { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); }
}

.kunye { display: grid; gap: 1.4rem; margin: 0; }
.kunye dt { opacity: .7; }
.kunye dd { margin: .3rem 0 0; font-family: 'Bodoni Moda', Georgia, serif; font-size: 1.15rem; }
.kunye a { text-decoration: none; }

.iletisim-form { display: grid; gap: 1.2rem; }
.alan { display: grid; gap: .45rem; }

.alan :is(input, textarea) {
    width: 100%;
    padding: .85rem 0;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, currentColor 30%, transparent);
    border-radius: var(--yumusak);
    background: transparent;
    color: inherit;
    font: inherit;
    /* 16px altinda kalan girdi iOS'ta odakta sayfayi yakinlastirir. */
    font-size: 16px;
}

.alan :is(input, textarea):focus { border-color: currentColor; }

.dugme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Dokunma hedefi: 44px (Apple HIG) / 48dp (Material). */
    min-height: 3rem;
    padding: .8rem 2.2rem;
    border: 1px solid currentColor;
    border-radius: var(--yumusak);
    background: transparent;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    font-family: 'Archivo', sans-serif;
    font-size: .69rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
}

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

.form-sonuc {
    display: none;
    padding: .85rem 1rem;
    border-left: 2px solid currentColor;
    background: color-mix(in srgb, currentColor 10%, transparent);
}

/* Sonuc mesaji adresteki isaretle acilir - betiksiz calisir. */
.form-sonuc:target { display: block; }

/* ===================================================================
   ALT BILGI
   =================================================================== */

.alt { position: relative; background: var(--koyu); color: var(--zemin); padding-block: clamp(3rem, 7vw, 5rem); overflow: hidden; }

.alt-marka {
    font-family: 'Bodoni Moda', Georgia, serif;
    font-size: clamp(2.2rem, 9vw, 6rem);
    text-transform: uppercase;
    letter-spacing: -0.025em;
    line-height: .9;
    text-align: center;
}

.alt-satir { margin-top: clamp(2rem, 5vw, 3rem); display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; justify-content: space-between; align-items: center; opacity: .8; }
.alt-baglantilar { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.alt-baglantilar a { text-decoration: none; }

/* ===================================================================
   HAREKET TERCIHI
   =================================================================== */

/*
    HAREKETIN TAMAMI DURUR.

    Bu temada hareket cok: salinen cicekler, suzulen bulutlar, donen
    muhur, kaydirmaya bagli gecisler. Vestibuler rahatsizligi olan bir
    ziyaretci icin bunlarin toplami rahatsiz edicidir.

    Yalnizca animasyonlari kapatmak YETMEZ: yatay kayma ve birlesme
    bolumleri uzun sarmalayicilar uzerine kurulu ve hareket olmadan o
    yukseklik bos ekran demek olurdu. Ikisi de normal akisa donuyor.
*/
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    /*
        SURESI KISALTMAK DEGIL, ANIMASYONU KALDIRMAK.

        Once yaygin kalip yazilmisti: sure `.001ms`, tekrar 1, cizelge
        `auto`. Bu temada o kalip BOZUYOR - kaydirmaya bagli
        animasyonlar `fill-mode: both` ile yazildigi icin sure sifira
        cekilince hepsi BITIS karesinde donuyor. Somut sonuc: daire
        tipleri rayi `translate: calc(-100% + 80vw)` degerinde kalir,
        yani hareketi kapatan ziyaretci kartlari HIC goremezdi.

        `animation: none` kisayolu ad, sure, cizelge ve dolgusuyla
        birlikte animasyonu tamamen kaldirir; ogeler kendi duragan
        bildirimlerine doner - ki hepsinin duragan hali zaten dogru
        haldir.
    */
    *, *::before, *::after {
        animation: none !important;
        transition-duration: .001ms !important;
    }

    .yatay-sarmal, .birlesme-sarmal { height: auto; }
    .yatay-sahne, .birlesme { position: static; height: auto; padding-block: clamp(3rem, 8vw, 6rem); }
    .yatay-ray { overflow-x: auto; }
    .birlesme-cerceve { width: min(86vw, 42rem); }
}

/* ===================================================================
   DAIRELER SAYFASI - KAT PLANLARI
   =================================================================== */

/*
    PLAN BIR FOTOGRAF DEGIL CIZIMDIR.

    Abdullah era-residence.com/apartments benzeri bir plan sayfasi
    istedi. Planlar SVG olarak ciziliyor; sebebi uc tane ve ucu de
    somut:

      1. Her cozunurlukte keskin. Raster bir plan yakinlastirinca
         dagilir ve icindeki hicbir olcu okunamaz - plan sayfasinin
         varlik sebebi tam da yakinlastirilmasidir.
      2. Oda adlari GERCEK METIN. Ekran okuyucu okuyabiliyor, arama
         motoru indeksleyebiliyor. Gorsele gomulu yazi ikisinde de yok
         sayilir.
      3. Renkler jetondan geliyor; yapay zeka paleti degistirdiginde
         planlar da onunla degisiyor. Gomulu bir gorsel eski renkte
         kalirdi.
*/

.daireler-ozet { margin-bottom: clamp(2rem, 5vw, 3rem); }

/* --- SUZGEC: betiksiz, radyo + :has() --- */

.suzgec {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
}

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

.suzgec label {
    /* Dokunma hedefi: 44px (Apple HIG) / 48dp (Material). */
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    padding-inline: 1.25rem;
    border: 1px solid var(--cizgi);
    border-radius: var(--yumusak);
    cursor: pointer;
    transition: background .25s ease, color .25s ease, border-color .25s ease;
}

.suzgec label:hover { border-color: var(--ana-acik); }

.suzgec:has(#tip-hepsi:checked) label[for="tip-hepsi"],
.suzgec:has(#tip-3-1:checked) label[for="tip-3-1"],
.suzgec:has(#tip-4-1:checked) label[for="tip-4-1"],
.suzgec:has(#tip-7-2:checked) label[for="tip-7-2"] {
    background: var(--ana);
    border-color: var(--ana);
    color: var(--zemin);
}

/* Klavye: radyo gizli ama odaklanabilir; etiket halkayi gosterir. */
.suzgec-radyo:focus-visible + label { outline: 2px solid var(--vurgu-koyu); outline-offset: 3px; }

/*
    SUZME: secilmeyen kartlar gizlenir.

    `#daire-listesi` uzerinden bakiliyor cunku radyolar `.suzgec`
    icinde, kartlar ise onun KARDESI olan baska bir kapta. Ortak ata
    bolumun kendisi.
*/
#daire-listesi:has(#tip-3-1:checked) .daire-kart:not([data-tip="3-1"]),
#daire-listesi:has(#tip-4-1:checked) .daire-kart:not([data-tip="4-1"]),
#daire-listesi:has(#tip-7-2:checked) .daire-kart:not([data-tip="7-2"]) {
    display: none;
}

/* --- KART --- */

.daire-liste {
    margin-top: clamp(2.5rem, 6vw, 4rem);
    display: grid;
    gap: clamp(2.5rem, 6vw, 4.5rem);
}

.daire-kart {
    border-top: 1px solid var(--cizgi);
    padding-top: clamp(1.75rem, 4vw, 2.75rem);
    display: grid;
    gap: clamp(1.5rem, 3vw, 2.25rem);
}

.daire-kod { color: var(--metin-2); }

.daire-tip {
    font-size: clamp(1.9rem, 5.5vw, 3.4rem);
    margin-top: .35rem;
}

.daire-ozet { margin-top: .9rem; max-width: 58ch; color: var(--metin-2); }

.plan-izgara { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }

@media (min-width: 52rem) {
    .plan-izgara { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
}

.plan-kutu { margin: 0; }

.plan-kutu figcaption {
    margin-top: .75rem;
    color: var(--metin-2);
    text-align: center;
}

.plan { width: 100%; height: auto; display: block; }

/* --- CIZIMIN KENDISI --- */

.plan-zemin rect { fill: color-mix(in srgb, var(--ana) 5%, transparent); }

.plan-ic-duvar rect {
    fill: none;
    stroke: var(--metin);
    stroke-width: 2.4;
    opacity: .55;
}

.plan-dis-duvar {
    fill: none;
    stroke: var(--metin);
    stroke-width: 5;
}

/*
    Kapi ve pencere bosluklari duvari SILER.

    Silgi zemin rengiyle boyaniyor; sayfanin zemini degisirse burasi da
    onunla degisir. Sabit beyaz yazilsaydi koyu bir bolumde bosluklar
    parlak lekeler olarak gorunurdu.
*/
.plan-bosluk { fill: var(--zemin); }

.plan-yay {
    fill: none;
    stroke: var(--metin);
    stroke-width: 1.2;
    opacity: .45;
}

.plan-pencere line {
    stroke: var(--metin);
    stroke-width: 1.4;
    opacity: .6;
}

.plan-yazi text {
    text-anchor: middle;
    font-family: 'Archivo', system-ui, sans-serif;
    fill: var(--metin);
}

.plan-ad { font-size: 9.5px; font-weight: 600; letter-spacing: .04em; }

/* Olcu rakamlari TABULAR: kartlar arasinda alt alta hizali dursun. */
.plan-m2 {
    font-size: 8.5px;
    fill: var(--metin-2);
    font-variant-numeric: tabular-nums;
}

/* --- KUNYE --- */

.daire-kunye {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2.5rem;
    margin: 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--cizgi);
}

.daire-kunye dt { color: var(--metin-2); }
.daire-kunye dd { margin: .2rem 0 0; font-family: 'Bodoni Moda', Georgia, serif; font-size: 1.15rem; letter-spacing: 0; text-transform: none; }

/* --- SATIS CAGRISI --- */

.satis-cagri { text-align: center; }

.satis-baglantilar {
    margin-top: clamp(2rem, 5vw, 3rem);
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

/*
    Bu sayfada sol ray YOK - "Kaydirin" demenin anlami olan bir vitrin
    yok, sayfa dogrudan listeyle basliyor.
*/
.daireler-sayfa .ray { display: none; }

/*
    BU SAYFADA SABIT KATMAN AKAR.

    Ana sayfada muhur ve menu sabittir; bolumler altindan gectigi icin
    `mix-blend-mode: difference` onlari her zeminde okunur tutuyor. Plan
    sayfasinda ise cizimlerin USTUNE biniyorlardi - bir plani okumaya
    calisirken uzerinde menu olmasi kabul edilemez (ekranda goruldu).

    Cozum katmani gizlemek degil, SAYFAYLA BIRLIKTE KAYDIRMAK: en ustte
    duruyor, asagi inince cizimleri birakiyor.
*/
.daireler-sayfa .katman { position: absolute; }

/* ===================================================================
   360 DERECE TUR - kaydirdikca binanin etrafinda donulur
   =================================================================== */

/*
    KAYDIRMA VIDEOYU SURER - uc klip ust uste.

    Yukseklik uc klibin toplam suresine gore: her klibe yaklasik bir
    ekranlik kaydirma dusuyor. Once 700svh idi ve Abdullah hakli olarak
    "mouse tekerini baya ceviriyorum sitenin altina inmek icin" dedi -
    ziyaretciyi yedi ekran kaydirtan bir bolum, gostermek istedigi seyi
    gostermeden once yoruyor.

    Bulut perdesi ARTIK CSS DEGIL: ucuncu klip gercek bulutlarin icine
    giriyor. Onceki gradyan katmani ekranin beyazlamasi gibi
    gorunuyordu - Abdullah: "sanki ekranda bir hata olusuyorda ekran
    beyazliyor gibi, bulut gorseli hic yok."
*/
.tur-sarmal {
    position: relative;
    height: 360svh;
    background: var(--koyu);
}

.tur-sahne {
    position: sticky;
    top: 0;
    height: 100svh;
    overflow: hidden;
    background: var(--koyu);
}

/*
    Klipler ust uste; gorunur olani betik secer. Gecis `opacity` ile
    ANI degil kisa bir sonumle: klip degisimi sert bir kesme olurdu.
*/
.tur-klip {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .35s linear;
}

/* Betik yuklenmeden once ilki gorunur - sahne bos kalmasin. */
.tur-klip:first-of-type { opacity: 1; }

/*
    Hareket tercihi kapaliysa betik hic devralmiyor (tur.js kontrol
    ediyor) ve ilk klip duragan bir kare olarak kaliyor.
*/
@media (prefers-reduced-motion: reduce) {
    .tur-sarmal { height: auto; }
    .tur-sahne { position: static; height: auto; aspect-ratio: 16 / 9; }
    .tur-klip { transition: none; }
}

/*
    Bolum icerigi cicegin USTUNDE. `.kap` konumlandirilmadan
    z-index ise yaramaz - bu yuzden `relative`.
*/
.bolum .kap, .yuvarlak .kap { position: relative; z-index: 1; }

/* ===================================================================
   YATAY BOLUMUN GOKYUZU - bulutlar ve kuslar
   =================================================================== */

/*
    Bolum artik gok mavisi; icine bir alttaki bulut bolumunun AYNI
    bulutlari ve birkac kus geliyor. Bulut sinifi ortak (`.bulut`),
    yani iki bolumdeki bulutlar birebir ayni cizim ve ayni hizda -
    surekliligi kuran sey bu.
*/
.yatay-gok {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

/* Ray ve baslik bulutlarin USTUNDE. */
.yatay-basi, .yatay-ray { position: relative; z-index: 1; }

/*
    KUSLAR.

    Cizim tek bir yay cifti - marti siluetinin en sade hali. Fotograf
    ya da ayrintili bir kus, gokyuzunde bu olcekte lekeye donusurdu;
    siluet uzaktan bakildiginda gercekte de gorunen sey.
*/
.kus {
    position: absolute;
    width: clamp(1.1rem, 2.4vw, 2rem);
    height: auto;
    fill: none;
    stroke: var(--metin);
    stroke-width: 2.4;
    stroke-linecap: round;
    opacity: .5;
    animation: kus-uc linear infinite, kanat-cirp ease-in-out infinite alternate;
}

/*
    Kanat cirpmasi DIKEY EZME ile.

    Kanatlari ayri yollar yapip her birini dondurmek daha dogru olurdu
    ama bu olcekte (20px) fark gorunmez; dikey ezme ayni izlenimi tek
    ozellikle veriyor ve dosyayi kucuk tutuyor.
*/
@keyframes kanat-cirp {
    from { scale: 1 .55; }
    to { scale: 1 1.15; }
}

@keyframes kus-uc {
    from { translate: -12vw 0; }
    to { translate: 112vw 0; }
}

.kus-1 { top: 18%; animation-duration: 26s, .42s; animation-delay: -4s, 0s; }
.kus-2 { top: 26%; animation-duration: 31s, .5s;  animation-delay: -12s, -.2s; opacity: .38; }
.kus-3 { top: 13%; animation-duration: 22s, .36s; animation-delay: -18s, -.1s; opacity: .3; }
.kus-4 { top: 31%; animation-duration: 35s, .55s; animation-delay: -25s, -.3s; opacity: .26; }

/* Karti gok uzerinde okunur tutmak icin cizgi ve zemin. */
.yatay-sahne .daire {
    border-color: color-mix(in srgb, var(--metin) 28%, transparent);
    background: color-mix(in srgb, var(--zemin) 55%, transparent);
    backdrop-filter: blur(2px);
}

/* ===================================================================
   BAHCE - anne, cocuk ve uzaktan izleyen baba
   =================================================================== */

/*
    Abdullah'in 4. maddesi: "sayfanin en altinda annesi ile o evin
    onundeki yesillik alanda oynayan 3 yasinda sarisin bir kiz cocugu
    ile 30 yasinda sarisin bir anne olsun, ve babalarida evin tas
    duvarinin arkasinda onlari izlesin. Ve bu karakterlerin hepsi
    hareket ediyormus gibi ufak salinimlar yapsinlar."

    Once uc figur AYRI AYRI kesilip CSS ile sallanacakti. Model beyaz
    zemin talimatini yok sayinca kesim tutmadi - ama asil ders su:
    istenen sey HAREKETTI ve kesilmis bir fotografi sallamak taklit
    olurdu. Video gercegini veriyor.
*/
.bahce {
    position: relative;
    height: min(88svh, 46rem);
    overflow: hidden;
    background: var(--zemin-2);
}

.bahce-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* Video 16:9, bolum daha kare; olceklenseydi yanlarda bant kalirdi. */
    object-fit: cover;
}

.bahce-yazi {
    position: absolute;
    left: 0;
    right: 0;
    bottom: clamp(1.5rem, 4vw, 2.5rem);
    text-align: center;
    color: var(--zemin);
    z-index: 3;
    mix-blend-mode: difference;
}



/*
    BULUT PERDESI - kaydirmanin son diliminde kameranin onunden gecer.

    Video olarak URETILEMEDI: zincire bagli klipler yeni bir olay
    eklemiyor, zincirsiz klipler baska bir manzara getiriyor - ikisi de
    denendi ve ekranda goruldu. Kesilmis gercek bir bulut fotografi;
    hareketini betik veriyor, yani kaydirma bulutu da suruyor.

    Onceki gradyan perdesi "ekran beyazliyor gibi" duruyordu cunku
    ortada bulut GORSELI yoktu.

    Kutu kadrajdan GENIS: bulut yandan girip yandan cikabilsin diye.
*/
.tur-bulut {
    position: absolute;
    top: -10%;
    left: -30%;
    width: 160%;
    height: 120%;
    object-fit: cover;
    pointer-events: none;
    opacity: 0;
    z-index: 2;
    will-change: opacity, transform;
}