/* ============================================================================
   ZİYARETÇİ TARAFI — DAR EKRAN DÜZELTMELERİ            (17.09.2026)

   NEDEN AYRI DOSYA:
   Tema CSS'leri (ProjeDaireDetay.css, ust_bolum4.css …) sayfa view'lerinin
   İÇİNDEN, yani <body> içinde yükleniyor. Bu yüzden _Layout <head>'ine konan
   bir düzeltme onların ALTINDA kalırdı. Bu dosya _Layout'un en sonunda, tüm
   tema CSS'lerinden SONRA yükleniyor; böylece aynı özgüllükte yazılan kurallar
   kazanıyor ve mevcut dosyalara dokunmaya gerek kalmıyor (geri alması da kolay:
   tek satır link).

   KURAL: buradaki her şey @media içindedir. Geniş ekran görünümü DEĞİŞMEZ.

   Site ziyaretçi ekranlarını sunucu tarafında tarayıcı tipine göre seçiyor
   (fon_GLOBAL.tarayiciMobilmi). Telefondan girildiğinde ayrı bir mobil şablon
   geliyor; ancak MASAÜSTÜ tarayıcının penceresi küçültüldüğünde şablon masaüstü
   şablonu olarak kalıyor — kaymaların sebebi bu. Aşağıdaki kırılımlar masaüstü
   şablonunun dar pencerede de düzgün durmasını sağlar.

   Kırılım noktaları:  ≤1200 (küçük dizüstü) · ≤991 (tablet yatay)
                       ≤767 (tablet dikey)   · ≤575 (telefon)
   ============================================================================ */


/* ── ÜST MENÜ ───────────────────────────────────────────────────────────────
   .eozelliknav ul  →  display:flex + nowrap, .eozelliknav ise 60px yan dolgulu.
   Pencere daralınca menü kutusuna sığmayıp İKİ YANDAN taşıyordu (ortalı flex
   taşmayı iki tarafa dağıtır), yatay kaydırma çubuğu çıkıyordu. Dolgu küçültülüp
   satır kaydırma açılıyor. */
@media only screen and (max-width: 1200px) {
    .eozelliknav {
        padding: 8px 10px;
    }

        .eozelliknav ul {
            flex-wrap: wrap;
            row-gap: 2px;
        }

        .eozelliknav a {
            padding: 8px 10px;
            font-size: 13px;
        }

    .elogo {
        padding: 10px 20px;
    }
}

@media only screen and (max-width: 991px) {
    .eozelliknav a {
        padding: 6px 8px;
        font-size: 12px;
    }

    .elogo {
        padding: 8px 10px;
    }
}

@media only screen and (max-width: 767px) {
    .eozelliknav {
        padding: 4px 6px;
    }

        .eozelliknav ul {
            justify-content: center;
        }

        .eozelliknav a {
            padding: 5px 7px;
        }

    .elogo {
        text-align: center;
    }

    /* Sosyal ikon şeridi tek başına satır oluyor; ortala */
    #ustSosyalBar {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }
}


/* ── ÜST MENÜ — DİKEY TABLET (768–991)                            (25.09.2026)
   Tablet, masaüstü şablonunu alır (Android tablet UA'sında "Mobile" yok, iPad
   masaüstü modunda). 768px'de Bootstrap md ızgarası menü sütununa 379px verir;
   beş öğe (Projeler · Planlar · Konum · Katalog · Olanaklar) ~380px tutar ve
   ikinci satıra kırılırdı ("Olanaklar" alta düşüyordu). Sütun payları menü
   lehine 20/60/20 yapılır, menü tek satırda tutulur, logo ve sosyal ikon
   şeridinin 60-70px yan dolguları daraltılır. Yalnız bu aralık; ≤767 ve geniş
   ekran kuralları değişmez. Geri almak: bu bloğu sil. */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .eust1 > .row > .col-md-3 { width: 20%; }
    .eust1 > .row > .col-md-6 { width: 60%; }

    .eozelliknav { padding: 8px 4px; }
        .eozelliknav ul { flex-wrap: nowrap; white-space: nowrap; }
        .eozelliknav a { padding: 6px 7px; font-size: 12px; }

    .elogo { padding: 8px 6px; }
    .eust2 { padding: 10px 12px; }

    /* projeDetay.css ≤768 bloğu sosyal ikon şeridini sayfanın ALTINA sabitler
       (mobil şablon tasarımı); iPad dikey (tam 768px) masaüstü şablonunu aldığından
       ikonlar üst bardan kaybolup en alta düşüyordu. Masaüstü başlığındaki şerit
       (.eust2 sarmalı yalnız masaüstü dalında var) yerine geri alınır. */
    .eust2 #ustSosyalBar { position: relative; bottom: auto; }
}

/* ── GAYRİMENKUL DETAY — SAĞ KÜNYE PANELİ ───────────────────────────────────
   .dk-alt iki düğmeyi (Teklif Ver / Katalog İndir) flex:1 1 0 ile yan yana
   koyuyor. col-md-3 panel 1200px altında ~230px'e inince düğmeler 78px kalıyor,
   yazılar iki-üç satıra bölünüyordu. Dar ekranda ALT ALTA. */
@media only screen and (max-width: 1200px) {
    .dk-alt {
        flex-direction: column;
    }

    .dk-btn {
        width: 100%;
        flex: 0 0 auto;
    }
}


/* ── GAYRİMENKUL DETAY — 3 SÜTUNUN ALT ALTA GEÇMESİ ─────────────────────────
   Sayfa col-md-3 / col-md-6 / col-md-3 ile kuruluydu; Bootstrap'in md eşiği
   768px olduğu için 768–991 arasında da ÜÇ sütun kalıyor, her biri ~180-230px'e
   düşüp künye etiketleri ("TOPLAM NET ALAN") üç satıra bölünüyordu. View'de
   sınıflar col-lg-* yapıldı: 992px altında sütunlar alt alta geçiyor.
   Alt alta geçince sol/sağ kartlar tam genişlik olacağı için içerideki
   sabit ölçüler burada gevşetiliyor. */
@media only screen and (max-width: 991px) {
    /* SAYFA KAYDIRMA — "tek sayfa" tasarımı body'ye overflow:hidden veriyor;
       her şey ekrana sığdığı için gerek yoktu. Sütunlar alt alta geçince içerik
       ekranı aşıyor ve alt kısma ULAŞILAMIYOR (kat detayda künye tablosu hiç
       görünmüyordu). Temanın ≤768 bloğunda aynı düzeltme var; 769–991 için de
       gerekli. İçerik sığıyorsa auto zaten kaydırma çubuğu göstermez. */
    body {
        overflow: auto;
    }

    /* "TEK SAYFA" YÜKSEKLİKLERİ — bu tasarımda kartlar ekran yüksekliğine
       sabitlenmiş (height: calc(100vh - 165px) gibi) çünkü yan yanayken sayfa
       kaydırmasız duruyor. Sütunlar alt alta geçince her kart bir ekran boyu
       uzayıp ortasında kocaman boşluk bırakıyor. Dar ekranda yükseklik
       içeriğe bırakılır, sayfa normal şekilde kaydırılır. */
    .pkd6,
    .pkd8,
    .cl30,
    .cl49,
    .cl049,
    .orta1 {
        height: auto;
        min-height: 0;
    }

    /* MUTLAK KONUMLANDIRILMIŞ İÇERİKLER
       Kartların içi, kartın sabit yüksekliğine göre konumlanmıştı:
         .pkd2       sol karttaki blok planı     → dikey ortalı
         .edairesol1 sol karttaki düğmeler       → alta yapışık
         .orta1      orta karttaki kat planı     → dikey ortalı
         .pkd7       sağ karttaki künye tablosu  → dikey ortalı
       Yükseklik içeriğe bırakılınca bunlar akış dışında kaldığı için kart
       85px'e çöküyor, içerik üst üste biniyor ya da kartın dışına taşıyordu.
       Dar ekranda hepsi normal akışa alınır. */
    .pkd6,
    .cl30 {
        display: flex;
        flex-direction: column;
    }

    .pkd6 {
        padding-bottom: 16px;
    }

    /* .pkd2'nin width:85% değeri KORUNUR — auto yapılırsa flex sütununda
       daralıyor ve maphilight sarmalayıcısı o dar ölçüyü piksele sabitliyor
       (plan 96px'e düşüyordu). height serbest bırakılır: kat detayda 500px
       sabitti, görselin altında boşluk kalıyordu. */
    .pkd2 {
        position: static;
        transform: none;
        margin: 0 auto;
        height: auto;
    }

    .edairesol1 {
        position: static;
        margin-top: 16px;
    }

    .orta1 {
        position: relative;
        transform: none;
        top: auto;
        left: auto;
        width: 100%;
    }

    .cl30 .pkd7 {
        position: static;
        transform: none;
        width: auto;
        margin: 0;
    }

    /* Alt alta dizilen kartlar: aralarına boşluk, tam genişlikte devleşmesinler */
    .ekatbilgi5,
    .cl30,
    .pkd6 {
        margin-bottom: 14px;
    }

    .cl30 {
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
    }

    .pkd6 {
        max-width: 520px;
        margin-left: auto;
        margin-right: auto;
    }

    .katPlanSar img {
        max-height: 420px;
        width: auto;
        max-width: 100%;
    }

    /* Panel tam genişliğe çıktığı için düğmeler yine yan yana sığar
       (≤1200 kuralını geri alır; ≤575'te tekrar alt alta geçerler). */
    .dk-alt {
        flex-direction: row;
    }

    .dk-btn {
        width: auto;
        flex: 1 1 0;
    }
}

/* Telefon genişliği: düğmeler yine alt alta */
@media only screen and (max-width: 575px) {
    .dk-alt {
        flex-direction: column;
    }

    .dk-btn {
        width: 100%;
        flex: 0 0 auto;
    }
}


/* ── SABİT "inşaat" FİLİGRANI ───────────────────────────────────────────────
   .ipts-katre sol alt köşeye position:fixed ile yapışık. Geniş ekranda boş
   alana denk geliyor; pencere daralınca sayfanın sol alt köşesindeki gerçek
   düğmelerin (Filtrele, Geri) ÜSTÜNE biniyor ve tıklamayı da engelliyordu.
   Dar ekranda küçültülüp alta çekiliyor, tıklama geçirgen yapılıyor. */
@media only screen and (max-width: 991px) {
    .ipts-katre {
        left: 8px;
        bottom: 4px;
        opacity: .55;
        pointer-events: none;
        z-index: 1;
    }

        .ipts-katre img {
            max-width: 46px;
        }
}

/* ── PLANLAR — FİLTRE PANELİ (≤991)                                (25.09.2026)
   Kart alt satırının sarma kuralı artık genişlikten bağımsız olarak
   projeplanlar.cshtml'in kendi <style> bloğunda (.eplan5 / .eplan-tip); burada
   yalnız üstte duran filtre panelinin tam genişliği kaldı. */
@media only screen and (max-width: 991px) {

    /* Filtre paneli üstteyken (planlar, 25.09.2026) TAM genişlik: yukarıdaki ≤991 bloğu
       .pkd6'yı kat/daire detay kartları için 520px'e daraltıp ortalıyor; planlarda panel
       askıda gibi kalıyordu (kullanıcı: "genişlik tam olsun"). Sınıf görünümde: .pkd6--plan */
    .pkd6.pkd6--plan { max-width: none; margin-left: 0; margin-right: 0; width: 100%; }
}

/* ── PLANLAR — AÇILIR BLOKLAR YAN YANA (576–991)                  (25.09.2026)
   Panel bu aralıkta kartların üstünde ve tam genişlikte; açılır bloklar
   (m² · Blok · Durum) alt alta dizilince boşa yer tutuyordu (kullanıcı:
   "tıklanınca açılan kısımları yan yana koysak, ekran büyük"). Sarmalayıcı üç
   sütunlu ızgara olur: açılır bloklar birer sütun, açılınca gövde kendi
   sütununun altında açılır (komşular esnemesin diye üstten hizalı); Etap gibi
   açılır olmayan blok tam satır. Telefon (<576) dikey kalır, ≥992'de panel
   yan sütun olduğundan zaten dikey. */
@media only screen and (min-width: 576px) and (max-width: 991px) {
    .pkd6--plan .planfiltre-wrapper {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 18px;
        align-items: start;
    }
        .pkd6--plan .planfiltre-wrapper > .planfiltre-blok:not(.plan-acilir) { grid-column: 1 / -1; }
        .pkd6--plan .planfiltre-wrapper > .plan-acilir { margin-bottom: 12px; }
}