/* Yazı tipleri configurator.html'de <link> ile yükleniyor, burada @import ile
   DEĞİL: @import ancak bu dosya indirilip ayrıştırıldıktan sonra keşfedilir,
   yani font isteği bir tur geç başlar ve o süre boyunca metin çizilmez. */

* { margin: 0; padding: 0; box-sizing: border-box; }

/* ---- Tasarım tokenları ----
   Konfigüratör kabuğunun tüm boşluk/köşe/katman/tipografi değerleri bu
   ölçeklerden gelir — dağınık, birbirinden bağımsız px değerleri yerine. */
:root {
    /* Boşluk: 4pt ritmi */
    --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
    --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 48px;
    /* Köşe yarıçapı */
    --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-full: 999px;
    /* Katman (z-index) ölçeği */
    --z-sahne: 10; --z-dock: 20; --z-ustbar: 30; --z-modal: 50;
    /* Tip ölçeği — 12px altı yok */
    --fs-xs: 0.75rem;     /* 12px — etiket/meta */
    --fs-sm: 0.8125rem;   /* 13px — ikincil metin */
    --fs-base: 0.9375rem; /* 15px — gövde */
    --fs-md: 1.0625rem;   /* 17px — vurgulu değer */
    --fs-lg: 1.375rem;    /* 22px — büyük başlık */
    --ayar-en: 340px;
    /* 90px: ana sayfanın üst barıyla EŞİTLENDİ. İki sayfa arasında geçerken
       logo ve üst bar aynı yerde kalsın diye ikisi de aynı yüksekliğe
       getirildi; eşitleme büyüterek yapıldı (76 -> 90), hiçbir taraf
       küçültülmedi. Ana sayfada bu değer anasayfa.css'te --bar-y. */
    --ustbar-h: 90px;
}

html, body {
    height: 100%;
    height: 100dvh;
    font-family: var(--govde-font);
    background: var(--arkaplan);
    color: var(--metin);
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Klavye ile gezinirken her etkileşimli kontrolde görünür bir odak halkası. */
:focus-visible {
    outline: 2px solid var(--marka-koyu);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

/* Araç arayüzünde görünmeden, sayfanın belgesel başlığını erişilebilir tutar. */
.gorsel-gizli {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===================== Üst bar ===================== */

.ustbar {
    height: var(--ustbar-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--s-6);
    background: var(--yuzey);
    border-bottom: 1px solid var(--kenarlik);
    position: relative;
    z-index: var(--z-ustbar);
}
/* Logonun turuncusunu markanın imzası olarak üst barın altına ince bir
   çizgi hâlinde taşıyoruz — dekoratif değil, marka rengini arayüze
   bağlayan tek sürekli öge. */
.ustbar::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: var(--marka);
}

/* Logo kasıtlı olarak kenardan içeri çekilmiş — üst barın sol boşluğu
   (padding) tek başına yetersizdi, marka nefes alacak ekstra pay verildi. */
/* Menü sayfaya göre ortalansın diye iki yan bölge eşit ağırlıkta esniyor —
   ana sayfadaki .ust-bar ile aynı kurulum (bkz. anasayfa.css). */
.marka-link {
    display: inline-flex; align-items: center;
    border-radius: var(--r-sm);
    /* Dış değil iç boşluk — bkz. anasayfa.css .ust-araclar'daki not. */
    padding-left: var(--s-6);
}
/* max-height büyütülüyor ama .ustbar'ın kendi yüksekliği (--ustbar-h) SABİT
   kalıyor — align-items:center sayesinde logo barın içinde büyür, barın
   kendisi büyümez. */
.marka-logo { max-height: 60px; min-height: 32px; width: auto; max-width: 210px; object-fit: contain; display: block; }

/* Üst bardaki menü. Ölçüler anasayfa.css'teki .menu ile AYNI (15px, Projeler
   18px, 28px aralık) — iki üst bar arasında geçerken yazılar yerinden
   oynamasın diye. Sınıf adları da bilinçli olarak aynı: işaretleme dört
   sayfada birebir aynı kalıyor.

   Dar ekranda gizleniyor: konfigüratörün üst barında zaten üç araç düğmesi
   var ve menü oraya sığmıyor. Logo ana sayfaya döndüğü için gezinme
   kapanmıyor, sadece bir adım uzuyor. */
.menu {
    display: flex;
    align-items: baseline;
    gap: 28px;
    font-size: 15px;
}
.menu a {
    color: var(--metin);
    text-decoration: none;
    opacity: 0.86;
    transition: opacity 0.2s ease;
}
.menu a:hover { opacity: 1; }
.menu a.one-cikan { font-size: 18px; font-weight: 600; }

.ustbar-sag { display: flex; align-items: center; justify-content: flex-end; gap: var(--s-2); }

/* İletişim, bilgi sayfası bağlantılarından farklı olarak doğrudan aksiyon:
   diğer üst barlardaki koyu kapsül ve turuncu durum noktası burada da aynı
   görsel önceliği korur. */
.iletisim-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 36px;
    padding: 9px 16px;
    border: 1px solid #252321;
    border-radius: 999px;
    background: #252321;
    color: #FFFFFF;
    font-size: 13px;
    line-height: 16px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.iletisim-link::before {
    content: '';
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #F29200;
    box-shadow: 0 0 0 4px rgba(242, 146, 0, 0.15);
}
.iletisim-link:hover {
    transform: translateY(-1px);
    background: #8A4F00;
    border-color: #8A4F00;
}

/* Menü sayfaya göre tam ortalanıyor — ana sayfadaki .ust-bar ile aynı
   kurulum ve aynı gerekçe (bkz. anasayfa.css). */
@media (min-width: 1121px) {
    .ustbar { position: relative; }
    .menu {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
}

/* Araç düğmeleri: önceden şeffaf zeminli, çok soluk bir çerçeve — vurgu
   rengiyle hiç konuşmuyordu. Artık marka tonunda dolu bir zemin + belirgin
   bir hover sıçraması var; site genelinde "canlı" his buradan geliyor. */
.araci-dugme {
    display: flex; align-items: center; gap: var(--s-2);
    background: var(--marka-sis);
    border: 1px solid transparent;
    color: var(--marka-koyu);
    padding: 9px var(--s-4);
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.araci-dugme:hover {
    background: var(--marka);
    color: var(--metin);
    transform: translateY(-1px);
    box-shadow: var(--golge-yumusak);
}
.araci-dugme:active { transform: translateY(0); }
.araci-simge { display: inline-flex; width: 16px; height: 16px; }
.araci-simge svg { width: 100%; height: 100%; }

/* ===================== Genel yerleşim ===================== */

.konfigurator {
    position: relative;
    display: flex;
    height: calc(100% - var(--ustbar-h));
    height: calc(100dvh - var(--ustbar-h));
    /* Kapalı ayar rayı negatif margin ile buranın dışına kayıyor — kırpılsın. */
    overflow: hidden;
}

.goruntuleyici {
    flex: 1;
    position: relative;
    min-width: 0;
    background: var(--sahne-zemin,
        radial-gradient(ellipse 70% 60% at 50% 42%, #FFFFFF 0%, var(--yuzey-2) 45%, var(--arkaplan) 100%));
    overflow: hidden;
}

/* Kapak renkleri aynı nötr, aydınlık referans zeminde değerlendirilir. */
body { --sahne-zemin: radial-gradient(ellipse 70% 60% at 50% 42%, #FFFFFF 0%, #F5F4F1 45%, #E9E8E4 100%); }

/* Model kütüphanesi masaüstünde soldan açılan bir çekmecedir. Kapalıyken
   sahneye yer açar; sağdaki teknik ayar paneli sabit kalır. */
.model-paneli {
    position: absolute;
    z-index: calc(var(--z-dock) + 1);
    top: 0;
    bottom: 0;
    left: 0;
    width: min(320px, 34vw);
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    padding: var(--s-6) var(--s-5);
    border-right: 1px solid var(--kenarlik);
    background: var(--yuzey);
    overflow-y: auto;
    box-shadow: 16px 0 34px rgba(45, 37, 29, 0.12);
    transform: translateX(-105%);
    visibility: hidden;
    transition: transform 0.24s ease, visibility 0s linear 0.24s;
}
.model-paneli.acik {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.24s ease;
}
.model-paneli-basi {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-3);
}
.model-paneli-araclari { display: flex; align-items: center; gap: var(--s-2); }
.model-panel-kapat {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    padding: 0;
    border: 1px solid var(--kenarlik);
    border-radius: var(--r-sm);
    background: var(--yuzey);
    color: var(--metin-soluk);
    cursor: pointer;
}
.model-panel-kapat:hover { color: var(--metin); border-color: var(--kenarlik-guclu); }
.model-paneli .ayar-no { margin: 0; }
.model-paneli-basi h2 { margin: 5px 0 0; font-size: var(--fs-md); font-weight: 600; }
.model-paneli-aciklama { margin: calc(var(--s-3) * -1) 0 0; color: var(--metin-soluk); font-size: var(--fs-xs); line-height: 1.45; }
.model-sayisi {
    color: var(--metin-soluk);
    font-family: var(--veri-font);
    font-size: var(--fs-xs);
}
.model-panel-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.model-panel-kart {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--kenarlik);
    border-radius: var(--r-md);
    background: var(--yuzey-2);
    color: var(--metin);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.model-panel-kart:hover { transform: translateY(-2px); border-color: var(--marka); box-shadow: var(--golge-yumusak); }
.model-panel-kart:focus-visible { outline: 3px solid var(--marka-sis); outline-offset: 2px; }
.model-panel-kart.aktif { border-color: var(--marka-koyu); box-shadow: 0 0 0 2px var(--marka-koyu); }
.model-panel-kart-gorsel {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: linear-gradient(145deg, #FFF, #EEE8DE);
}
.model-panel-kart-gorsel img { width: 100%; height: 100%; object-fit: contain; }
.model-panel-kart-yer-tutucu {
    width: 42%;
    height: 68%;
    border: 2px solid color-mix(in srgb, var(--marka-koyu) 46%, transparent);
    box-shadow: inset 0 0 0 7px #EEE8DE, inset 0 0 0 9px color-mix(in srgb, var(--marka-koyu) 25%, transparent);
}
.model-panel-kart-ad { padding: 9px 10px; font-family: var(--veri-font); font-size: 0.72rem; line-height: 1.3; }
.model-panel-kart.aktif .model-panel-kart-ad { color: var(--marka-koyu); font-weight: 600; }
/* Sahne, aydınlatma OTURANA KADAR gösterilmiyor.
   Sebep: viewer.js önce hafif bir procedural ortam (RoomEnvironment) +
   iki dolgu ışığıyla çiziyor, gerçek stüdyo HDR'ı geldiğinde ortam
   değişip dolgu ışıkları sönüyor. İkisi aynı ışık değil — procedural
   olan daha sıcak ve parlak — bu yüzden kapak ilk saniyede krem, sonra
   gerçek renginde görünüyordu. Renk konfigüratöründe bu kabul edilemez:
   müşterinin gördüğü ilk renk yanlış renk oluyordu.
   Çözüm, ilk kareyi ışık kesinleşene kadar tutmak (bkz. ui.js
   sahneyiAcigaCikar) — geç kalırsa yine de açılıyor, boş kalmıyor. */
.canvas-kapsayici {
    width: 100%; height: 100%; cursor: grab; touch-action: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}
body.sahne-hazir .canvas-kapsayici { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    .canvas-kapsayici { transition: none; }
}
.canvas-kapsayici:active { cursor: grabbing; }
/* touch-action kalıtsal değildir; gerçek dokunma hedefi canvas olduğu için
   mobildeki tek parmakla döndürmeyi burada da açıkça serbest bırakıyoruz. */
.canvas-kapsayici canvas { touch-action: none; user-select: none; -webkit-user-select: none; }

/* Model çekmecesini açan sahne düğmesi. */
.model-secici {
    position: absolute;
    top: var(--s-5);
    left: var(--s-5);
    display: flex; align-items: center; gap: var(--s-3);
    background: color-mix(in srgb, var(--yuzey) 92%, transparent);
    backdrop-filter: blur(10px);
    border: 1px solid var(--kenarlik);
    border-radius: var(--r-full);
    padding: var(--s-2) var(--s-4) var(--s-2) var(--s-5);
    box-shadow: var(--golge-yumusak);
    z-index: var(--z-sahne);
    max-width: min(280px, calc(100% - var(--s-8)));
    color: var(--metin);
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.18s ease;
}
.model-secici:hover { border-color: var(--kenarlik-guclu); }
.model-secici-etiket {
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--metin-soluk);
    flex-shrink: 0;
}
.model-secici-ad {
    font-family: var(--veri-font);
    font-size: var(--fs-sm);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 220px;
}
.model-secici svg { color: var(--metin-soluk); flex-shrink: 0; }

/* ---- Model galerisi (modal) ---- */
.model-modal-kutu { width: min(880px, calc(100vw - var(--s-8))); max-width: none; max-height: 78vh; }
.model-modal-kutu .modal-baslik-satiri { align-items: flex-start; }
.model-galeri-kas {
    margin: 0 0 5px;
    color: var(--marka-koyu);
    font-family: var(--veri-font);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: .12em;
}
.model-galeri-arama-satiri {
    display: flex; align-items: center; gap: var(--s-3);
    padding: var(--s-4) var(--s-6) 0;
    color: var(--metin-soluk);
    flex-shrink: 0;
}
.model-galeri-arama-satiri input {
    flex: 1;
    border: 1px solid var(--kenarlik);
    background: var(--yuzey-2);
    border-radius: var(--r-sm);
    padding: 9px var(--s-3);
    font-family: inherit;
    font-size: var(--fs-base);
    color: var(--metin);
    outline: none;
    transition: border-color 0.16s ease;
}
.model-galeri-arama-satiri input:focus-visible { border-color: var(--marka-koyu); }

.model-galeri-izgara {
    padding: var(--s-5) var(--s-6) var(--s-6);
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    grid-auto-rows: max-content;
    align-content: start;
    min-height: 0;
    gap: var(--s-4);
}
.model-galeri-bos {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--metin-soluk);
    font-size: var(--fs-sm);
    padding: var(--s-6) 0;
}
.model-galeri-kart {
    display: flex; flex-direction: column;
    border: 1px solid var(--kenarlik);
    border-radius: var(--r-md);
    background: var(--yuzey-2);
    cursor: pointer;
    overflow: hidden;
    padding: 0;
    text-align: left;
    transition: border-color 0.16s ease;
}
.model-galeri-kart:hover { border-color: var(--marka); transform: translateY(-2px); box-shadow: var(--golge-yumusak); }
.model-galeri-kart.aktif { border-color: var(--marka-koyu); box-shadow: 0 0 0 2px var(--marka-koyu); }
.model-galeri-kart-gorsel-cerceve {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #fff;
    flex-shrink: 0;
}
.model-galeri-kart-gorsel {
    position: absolute;
    top: 50%; left: 50%;
    width: 92%; height: 92%;
    object-fit: contain;
    display: block;
    transform: translate(-50%, -50%);
}
.model-galeri-kart-gorsel-cerceve.gorsel-yok {
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, #FFF, #EEE8DE);
}
.model-galeri-kart-gorsel-cerceve.gorsel-yok::before {
    content: '';
    width: 42%;
    height: 70%;
    border: 2px solid color-mix(in srgb, var(--marka-koyu) 48%, transparent);
    box-shadow: inset 0 0 0 8px #EEE8DE, inset 0 0 0 10px color-mix(in srgb, var(--marka-koyu) 28%, transparent);
}
.model-galeri-kart-yer-tutucu {
    width: 100%; aspect-ratio: 4 / 3;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(160deg, color-mix(in srgb, var(--marka) 14%, var(--yuzey-2)) 0%, var(--yuzey-2) 100%);
    color: var(--marka-koyu);
}
.model-galeri-kart-ad {
    padding: 12px;
    font-family: var(--veri-font);
    font-size: 0.78rem;
    color: var(--metin);
    line-height: 1.3;
}
.model-galeri-kart.aktif .model-galeri-kart-ad { color: var(--marka-koyu); font-weight: 500; }

/* ---- Sahne araçları: sağ alt ---- */
/* Renk/Boyut/Işık/Sıfırla dördü tek satıra sığmayabilir (özellikle dar
   ekranda) — konumları elle iki satıra bölmek yerine flex-wrap'e bırakılıyor:
   satır dolunca kendiliğinden ikiye kırılır. wrap-reverse + max-width ile
   TAŞAN satır YUKARI eklenir (konteynerin alt kenarı sabit kalır, üste doğru
   büyür); justify-content:flex-end her satırı sağa yaslar, böylece kırılma
   olsa da sağ kenar hep hizalı görünür. */
.sahne-araclari {
    position: absolute;
    right: var(--s-5); bottom: var(--s-5);
    display: flex; align-items: flex-end; justify-content: flex-end;
    flex-wrap: wrap-reverse;
    gap: var(--s-3);
    max-width: calc(100vw - 2 * var(--s-5));
    z-index: var(--z-sahne);
}
.simge-dugme {
    width: 40px; height: 40px; border-radius: var(--r-sm);
    border: 1px solid var(--kenarlik);
    background: color-mix(in srgb, var(--yuzey) 92%, transparent);
    backdrop-filter: blur(10px);
    color: var(--marka-koyu);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}
.simge-dugme:hover {
    color: var(--metin);
    border-color: var(--marka-koyu);
    background: var(--marka-sis);
    transform: translateY(-1px);
}

/* ---- Durum çubuğu: sol alt ---- */
.durum-cubugu {
    position: absolute; bottom: var(--s-5); left: var(--s-5);
    display: flex; gap: var(--s-3); align-items: center;
    background: color-mix(in srgb, var(--yuzey) 92%, transparent);
    backdrop-filter: blur(10px);
    border: 1px solid var(--kenarlik);
    padding: 10px var(--s-4);
    border-radius: var(--r-md);
    font-size: var(--fs-sm);
    color: var(--metin);
    pointer-events: none;
    z-index: var(--z-sahne);
    /* Sağ alttaki sahne araçlarıyla çakışmasın: dar sahnede ikisi arasında
       her zaman gerçek bir boşluk kalacak şekilde sınırlı. */
    max-width: min(44%, 460px);
    box-shadow: var(--golge-yumusak);
}
.durum-ayrac { width: 1px; height: 14px; background: var(--kenarlik); flex-shrink: 0; }
.durum-model { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.durum-renk { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.durum-renk-nokta {
    width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.22);
}
#secim-renk-metin { color: var(--metin-orta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.durum-olcu {
    font-family: var(--veri-font);
    font-variant-numeric: tabular-nums;
    color: var(--metin-orta);
    white-space: nowrap;
}

/* ===================== Ayar paneli (sağ, kalıcı) =====================
   Renk ve ölçü eskiden sahne araç çubuğundaki iki ayrı açılır çekmecedeydi.
   İkisi de KARŞILAŞTIRARAK verilen kararlar — müşteri 77 tonu gezerken ya da
   ölçüyü ararken kapağın ve listenin aynı anda ekranda kalması gerekiyor —
   bu yüzden sahnenin yanında sürekli açık bir sütuna taşındılar.

   Panel sahnenin ÜZERİNE binmiyor, yanında yer kaplıyor (.konfigurator bir
   flex satırı): kapak böyle daha dar bir alana sığıyor ama hiçbir zaman
   panelin altında kalmıyor.

   Model ve ışık bilinçli olarak burada DEĞİL: model "hangi ürüne bakıyorum",
   ışık ise bir sahne ayarı — ikisi de kendi yerinde kaldı. */
.ayar-paneli {
    flex: 0 0 var(--ayar-en, 340px);
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--yuzey);
    border-left: 1px solid var(--kenarlik);
    z-index: var(--z-dock);
}

/* Tutamak yalnızca mobilde görünür (panel aşağıya indiğinde açıp kapatır);
   masaüstünde panel zaten hep açık. */
.ayar-tutamak { display: none; }

.ayar-govde {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--s-5);
    display: flex;
    flex-direction: column;
    gap: var(--s-6);
}

.ayar-bolum { display: flex; flex-direction: column; gap: var(--s-3); }
.olcu-bolumu[hidden] { display: none !important; }
/* Numaralı üst yazı: müşteriye "önce şunu, sonra şunu" diye bir sıra veriyor.
   Numara gerçekten sırayı taşıdığı için dekor değil — panelde iki karar var
   ve ikisi bu sırayla veriliyor. */
.ayar-no {
    font-family: var(--veri-font);
    font-size: var(--fs-xs);
    letter-spacing: 0.14em;
    color: var(--metin-soluk);
}
.ayar-no span { color: var(--metin-orta); }
.ayar-bolum-basi {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--s-3);
    padding-bottom: var(--s-3);
    border-bottom: 1px solid var(--kenarlik);
}
.ayar-baslik { font-size: var(--fs-md); font-weight: 600; }
.ayar-secili {
    font-family: var(--veri-font);
    font-size: var(--fs-xs);
    color: var(--metin-soluk);
}

/* ---- Yüzey (parlaklık) ----
   Üç seçenek yan yana; renk ızgarasının aksine kısa ve tam görünür kalmalı,
   çünkü müşteri bunu bir kez seçip geçiyor. */
.yuzey-secenekleri {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-2);
}
.yuzey-btn {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--s-3) var(--s-2);
    border: 1px solid var(--kenarlik);
    border-radius: var(--r-sm);
    background: var(--yuzey);
    color: var(--metin);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.16s ease, background-color 0.16s ease;
}
.yuzey-btn:hover { border-color: var(--kenarlik-guclu); }
/* Seçili yüzey yalnızca renkle değil, kalın yazı ve dolu zeminle de belli
   oluyor. */
.yuzey-btn.aktif {
    border-color: var(--marka-koyu);
    background: var(--marka-sis);
}
.yuzey-btn-ad { font-size: var(--fs-sm); font-weight: 500; }
.yuzey-btn.aktif .yuzey-btn-ad { color: var(--marka-koyu); font-weight: 600; }
.yuzey-btn-aciklama {
    font-size: 0.68rem;
    line-height: 1.3;
    color: var(--metin-soluk);
}

/* ---- RAL serileri (katlanabilir) ----
   77 renk tek bir uzun liste hâlinde açıkken panelin altındaki ölçü bölümüne
   inmek çok uzun sürüyordu. Renkler artık RAL'in kendi serilerine ayrılmış
   katlanabilir bölümlerde; yalnızca SEÇİLİ rengin serisi açık geliyor.
   (Ölçü bölümü ayrıca panelin BAŞINA alındı — müşteri ölçüyü nereden
   değiştireceğini kaydırmadan görsün.) */
.renk-listesi { display: flex; flex-direction: column; }
.renk-seri { border-bottom: 1px solid var(--kenarlik); }
.renk-seri:last-child { border-bottom: 0; }
.renk-seri-bas {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    width: 100%;
    padding: var(--s-3) 0;
    border: none;
    background: none;
    color: var(--metin);
    font-family: inherit;
    text-align: left;
}
.renk-seri-kod {
    font-family: var(--veri-font);
    font-size: var(--fs-sm);
    font-weight: 500;
    white-space: nowrap;
}
.renk-seri-ad {
    flex: 1;
    font-size: var(--fs-xs);
    color: var(--metin-soluk);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.renk-seri-sayi {
    font-family: var(--veri-font);
    font-size: var(--fs-xs);
    color: var(--metin-soluk);
    font-variant-numeric: tabular-nums;
}
.renk-seri-bas > svg { color: var(--metin-soluk); flex-shrink: 0; transition: transform 0.2s ease; }
.renk-seri.acik .renk-seri-bas > svg { transform: rotate(180deg); }
.renk-seri.acik .renk-seri-kod { color: var(--marka-koyu); }
/* Kapalı bölüm display:none — sadece görsel gizleme, içindeki düğmeleri
   klavyeyle gezilebilir bırakırdı. */
.renk-seri:not(.acik) .renk-izgara { display: none; }
.renk-seri .renk-izgara { padding-bottom: var(--s-4); }

/* ---- Renk ızgarası ----
   Ton ailesi süzgeci kaldırıldı (RAL numaralandırması zaten aileye göre
   kümelenmiş), ızgara doğrudan RAL koduna göre sıralı 77 tonu gösteriyor ve
   panelin kendi kaydırmasında akıyor — ayrı bir iç kaydırma kutusu yok. */
.renk-izgara {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-3) var(--s-2);
}
/* Kod artık kısaltılmadan "RAL 9016" tam gösteriliyor (kısa "9016" müşterinin
   Lake/RAL'e mi baktığını anlamasını zorlaştırıyordu) — 3 sütun bu genişlikte
   4'ten daha rahat sığıyor. */
.renk-btn {
    display: flex; flex-direction: column; gap: 6px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
    /* Süzgeç değişince ızgara yeniden çizilir — kartlar tek seferde ortaya
       çıkmak yerine hafifçe, kısa bir gecikme kademesiyle belirir. JS her
       kartın index'ini --i olarak yazıyor; 24'ten sonra gecikme sabitleniyor
       (77 renkte "Tümü" açıkken son kartların saniyelerce beklememesi için). */
    animation: renk-belir 0.32s cubic-bezier(0.16, 1, 0.3, 1) backwards;
    animation-delay: calc(min(var(--i, 0), 24) * 10ms);
}
@keyframes renk-belir {
    from { opacity: 0; transform: translateY(5px) scale(0.94); }
    to { opacity: 1; transform: none; }
}
.renk-yuzey {
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--r-md);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16), 0 1px 2px rgba(28, 24, 20, 0.06);
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}
/* İnce bir cila/parlaklık izlenimi — Lake zaten cilalı bir boya, kutunun
   düz dijital bir kare değil boyanmış bir numune gibi okunmasını sağlıyor. */
.renk-yuzey::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(152deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0) 42%, rgba(0, 0, 0, 0.05) 100%);
    pointer-events: none;
}
.renk-btn:hover .renk-yuzey {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16), 0 0 0 2px var(--kenarlik-guclu), 0 4px 10px rgba(28, 24, 20, 0.1);
    transform: translateY(-2px);
}
/* Seçili ton: marka renginde halka + onay işareti. İşaret bilerek var —
   durum yalnızca renkle anlatılırsa renk körü kullanıcı için kaybolur
   (ve bir renk paletinde "seçili renk" zaten renkle ayırt edilemez). */
.renk-btn.aktif .renk-yuzey {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16),
                0 0 0 2px var(--yuzey),
                0 0 0 4px var(--marka-koyu),
                0 4px 10px rgba(28, 24, 20, 0.12);
}
.renk-onay {
    position: absolute;
    right: 4px; bottom: 4px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--marka-koyu);
    color: #FFFFFF;
    display: flex;
    align-items: center; justify-content: center;
    opacity: 0;
    transform: scale(0.4);
    /* Hafif "zıplayan" giriş — seçim değişimi göze çarpsın, ama abartısız. */
    transition: opacity 0.16s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.renk-btn.aktif .renk-onay { opacity: 1; transform: scale(1); }
.renk-kod {
    font-family: var(--veri-font);
    font-size: 0.66rem;
    color: var(--metin-soluk);
    font-variant-numeric: tabular-nums;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: color 0.16s ease;
}
.renk-btn.aktif .renk-kod { color: var(--marka-koyu); font-weight: 500; }

.renk-not {
    font-size: var(--fs-xs);
    line-height: 1.5;
    color: var(--metin-soluk);
}
.renk-sayisi {
    display: block;
    font-family: var(--veri-font);
    color: var(--metin-orta);
    margin-bottom: 3px;
    font-variant-numeric: tabular-nums;
}

/* ---- Ölçü kontrolleri ---- */
.olcu-alani { display: flex; flex-direction: column; gap: var(--s-2); }
.olcu-satiri { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); }
.olcu-satiri label { font-size: var(--fs-base); font-weight: 500; }
.olcu-girdi {
    display: flex; align-items: baseline; gap: 5px;
    background: var(--yuzey-2);
    border: 1px solid var(--kenarlik);
    border-radius: var(--r-sm);
    padding: 5px 10px;
    transition: border-color 0.16s ease;
}
.olcu-girdi:focus-within { border-color: var(--marka-koyu); }
.olcu-girdi input {
    width: 54px;
    border: none; background: transparent;
    color: var(--metin);
    text-align: right;
    font-family: var(--veri-font);
    font-size: var(--fs-md);
    font-variant-numeric: tabular-nums;
    outline: none;
}
/* Sayı girdisinin tarayıcı oklarını gizle — değer zaten kaydırıcıdan gelir. */
.olcu-girdi input::-webkit-outer-spin-button,
.olcu-girdi input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.olcu-girdi input[type=number] { -moz-appearance: textfield; }
.olcu-birim { font-size: var(--fs-xs); color: var(--metin-soluk); font-family: var(--veri-font); }

.olcu-sifirla-dugmesi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    width: 100%;
    min-height: 38px;
    border: 1px solid var(--kenarlik);
    border-radius: var(--r-sm);
    background: var(--yuzey);
    color: var(--marka-koyu);
    flex-shrink: 0;
    font: 500 var(--fs-sm) var(--govde-font);
    cursor: pointer;
    transition: border-color 0.16s ease, background-color 0.16s ease;
}
.olcu-sifirla-dugmesi:hover { border-color: var(--marka-koyu); background: var(--marka-sis); }
.olcu-sifirla-dugmesi:active { background: var(--yuzey-2); }
.olcu-girdi:has(input:disabled),
.kaydirici:disabled,
.olcu-sifirla-dugmesi:disabled {
    opacity: 0.46;
    cursor: not-allowed;
}

.olcu-aralik {
    display: flex; justify-content: space-between;
    font-family: var(--veri-font);
    font-size: 0.68rem;
    color: var(--metin-soluk);
    font-variant-numeric: tabular-nums;
}

/* Kaydırıcının dolu kısmı marka turuncusu — --dolgu yüzdesi JS'ten gelir. */
.kaydirici {
    --dolgu: 0%;
    width: 100%;
    -webkit-appearance: none; appearance: none;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(to right,
        var(--marka) 0%, var(--marka) var(--dolgu),
        var(--yuzey-3) var(--dolgu), var(--yuzey-3) 100%);
    outline: none;
    cursor: pointer;
}
.kaydirici::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--yuzey);
    border: 2px solid var(--metin);
    box-shadow: var(--golge-yumusak);
    cursor: pointer;
}
.kaydirici::-moz-range-thumb {
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--yuzey);
    border: 2px solid var(--metin);
    box-shadow: var(--golge-yumusak);
    cursor: pointer;
}

/* ---- Işık: sahne aracı tuşu + açılır panel ----
   Modal değil: sahne görünür kalmalı ki 10 ortam canlı karşılaştırılabilsin.
   Panel tuşun ÜSTÜNDE açılıyor (tuş sağ altta, aşağıda yer yok). */
.isik-sarmal { position: relative; display: flex; }

/* Işık seçici: model seçiciyle AYNI desen (etiket + seçili değer + ok).
   Önce ikon-only bir daireydi ve sıfırla tuşundan ayırt edilemiyordu. */
.isik-secici {
    display: flex; align-items: center; gap: var(--s-2);
    background: color-mix(in srgb, var(--yuzey) 92%, transparent);
    backdrop-filter: blur(10px);
    border: 1px solid var(--kenarlik);
    border-radius: var(--r-full);
    padding: var(--s-2) var(--s-4);
    box-shadow: var(--golge-yumusak);
    color: var(--metin);
    font-family: inherit;
    cursor: pointer;
    max-width: 100%;
    transition: border-color 0.18s ease, background-color 0.18s ease;
}
.isik-secici:hover { border-color: var(--kenarlik-guclu); }
.isik-secici-ikon { display: inline-flex; color: var(--marka-koyu); flex-shrink: 0; }
.isik-secici-etiket {
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--metin-soluk);
    flex-shrink: 0;
}
.isik-secici-ad {
    font-family: var(--veri-font);
    font-size: var(--fs-sm);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 160px;
}
.isik-secici > svg:last-child { color: var(--metin-soluk); flex-shrink: 0; }
/* Panel açıkken tuş da açık görünsün */
.isik-secici.acik { background: var(--metin); border-color: var(--metin); color: var(--yuzey); }
.isik-secici.acik .isik-secici-etiket,
.isik-secici.acik > svg:last-child { color: color-mix(in srgb, var(--yuzey) 70%, transparent); }
.isik-secici.acik .isik-secici-ikon { color: var(--marka); }

.isik-panel {
    position: absolute;
    bottom: calc(100% + var(--s-2));
    right: 0;
    width: 320px;
    max-height: min(58vh, 460px);
    display: flex;
    flex-direction: column;
    background: var(--yuzey);
    border: 1px solid var(--kenarlik);
    border-radius: var(--r-lg);
    box-shadow: var(--golge);
    overflow: hidden;
    z-index: var(--z-dock);
}
.isik-panel.gizli { display: none; }
.isik-panel-basi {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--s-3);
    padding: var(--s-4) var(--s-5) var(--s-3);
    border-bottom: 1px solid var(--kenarlik);
    flex-shrink: 0;
}
.isik-panel-basi h3 { font-size: var(--fs-md); font-weight: 600; }
.isik-panel-meta {
    font-family: var(--veri-font);
    font-size: var(--fs-xs);
    color: var(--metin-soluk);
}
.isik-panel .isik-listesi {
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--s-3) var(--s-4) var(--s-4);
}

/* ---- Işık (stüdyo HDR) listesi ----
   Renk/boyut gibi modal değil, dikey bir liste — canvas her zaman görünür
   kalsın diye (10 ortamı sırayla deneyip canlı karşılaştırmak için şart). */
.isik-listesi { display: flex; flex-direction: column; gap: var(--s-2); }
.isik-satir {
    display: flex; align-items: center; gap: var(--s-3);
    width: 100%;
    text-align: left;
    border: 1px solid var(--kenarlik);
    background: var(--yuzey-2);
    border-radius: var(--r-md);
    padding: 10px var(--s-4);
    cursor: pointer;
    transition: border-color 0.16s ease, background-color 0.16s ease;
}
.isik-satir:hover { border-color: var(--kenarlik-guclu); }
.isik-satir.aktif { border-color: var(--marka-koyu); background: color-mix(in srgb, var(--marka) 7%, var(--yuzey-2)); }
.isik-metin { flex: 1; min-width: 0; }
.isik-ad {
    display: block;
    font-size: var(--fs-base);
    font-weight: 500;
    color: var(--metin);
}
.isik-satir.aktif .isik-ad { color: var(--marka-koyu); }
.isik-aciklama {
    display: block;
    font-size: 0.74rem;
    color: var(--metin-soluk);
    line-height: 1.35;
    margin-top: 2px;
}
.isik-durum {
    flex-shrink: 0;
    width: 20px; height: 20px;
    display: flex; align-items: center; justify-content: center;
    color: var(--marka-koyu);
}
.isik-durum svg { width: 100%; height: 100%; }
/* Yükleniyor: ince bir dönen halka — Poly Haven'dan indirilen 2K dosya
   (~6MB) yavaş bağlantıda gözle görülür sürebilir, sessiz kalmasın. */
.isik-donen {
    width: 15px; height: 15px;
    border-radius: 50%;
    border: 2px solid var(--kenarlik-guclu);
    border-top-color: var(--marka-koyu);
    animation: isik-don 0.7s linear infinite;
}
@keyframes isik-don { to { transform: rotate(360deg); } }

/* ===================== Modal iskeleti (yalnızca Model Galerisi kullanıyor) ===================== */
.modal-katman {
    position: fixed; inset: 0;
    background: rgba(20, 18, 15, 0.5);
    backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    padding: var(--s-6);
    z-index: var(--z-modal);
}
.modal-katman.gizli { display: none; }
.modal-kutu {
    width: 100%;
    background: var(--yuzey);
    border: 1px solid var(--kenarlik);
    border-radius: var(--r-lg);
    box-shadow: var(--golge);
    display: flex; flex-direction: column;
    overflow: hidden;
}
.modal-baslik-satiri {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--s-5) var(--s-6);
    border-bottom: 1px solid var(--kenarlik);
    flex-shrink: 0;
}
.modal-baslik-satiri h3 { font-family: inherit; font-weight: 600; font-size: var(--fs-lg); }

/* ===================== Bildirim (link kopyalandı vb.) ===================== */
.bildirim {
    position: fixed;
    left: 50%; bottom: var(--s-7);
    transform: translate(-50%, 12px);
    background: var(--metin);
    color: var(--yuzey);
    font-size: var(--fs-sm);
    padding: 10px var(--s-5);
    border-radius: var(--r-full);
    box-shadow: var(--golge);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: var(--z-modal);
}
.bildirim.gorunur { opacity: 1; transform: translate(-50%, 0); }

/* ===================== Dar ekran ve dokunmatik ===================== */

/* ---- Dokunmatik hedefler ----
   Ölçüt bilerek EKRAN GENİŞLİĞİ değil, işaretçi türü: 44px'lik minimum
   dokunma hedefi kuralı parmak içindir, dar bir masaüstü penceresi için
   değil. Dokunmatik ekranlı bir dizüstünde de doğru davranır. */
@media (pointer: coarse) {
    .araci-dugme { min-height: 44px; min-width: 44px; justify-content: center; }
    .simge-dugme { width: 44px; height: 44px; }
    .model-secici { min-height: 44px; }
    .isik-satir { min-height: 52px; }
    .olcu-girdi { min-height: 44px; padding: 0 12px; }
    .olcu-sifirla-dugmesi { min-height: 44px; }
    /* Girdinin KENDİSİ tam yüksekliği kaplasın — sarmalı 44px olsa da
       parmak asıl input'a değmezse alan odaklanmıyordu (input 22px'ti). */
    .olcu-girdi input { font-size: var(--fs-md); padding: 11px 0; }
    .marka-link { min-height: 44px; }

    /* Kaydırıcı: görsel olarak ince kalsın ama dokunma alanı 44px olsun.
       Arka plan yalnızca ortada 4px'lik bir şerit boyayacak şekilde
       sınırlandırılıyor; input'un kendisi tam yükseklikte kalıyor. */
    .kaydirici {
        height: 44px;
        background-repeat: no-repeat;
        background-size: 100% 4px;
        background-position: center;
    }

    /* iOS Safari, odaklanılan bir metin girdisinin font-size'ı 16px'in
       ALTINDAysa sayfayı otomatik yakınlaştırır ve geri çıkmaz — arama
       kutusu 15px'ti, 16px'e çekildi. */
    .model-galeri-arama-satiri input { font-size: 16px; min-height: 44px; }

    /* Dokunmada hover yok; hover'a bağlı kaldırma efektleri parmakla
       "takılı" kalabiliyor, kapatıldı. */
    .renk-btn:hover .renk-yuzey { transform: none; }
    .model-galeri-kart:hover { transform: none; }
}

/* ---- Telefon (dikey VE yatay — tek blok) ----
   Renk/Boyut/Işık üçü de sahne aracı çubuğunda kendi tuş+açılır panelleri
   olarak kalıyor (bkz. yukarıdaki Işık ve Renk/Boyut kuralları) — mobilde
   TEK bir ortak alt levha YOK, üçü birbirinden bağımsız açılıp kapanıyor.
   Sahne bu yüzden hep tam ekran yükseklikte; hiçbir panel onu küçültmüyor. */
/* Orta genişlikte iki yan ray sahneyi gereğinden fazla daraltır; bu aralıkta
   modeller mobildeki kompakt seçiciden açılır. */
@media (max-width: 1100px) {
    .model-paneli { width: min(320px, 42vw); }
}

/* Orta ve dar ekranlarda dört sahne aracı zaten üst barı dolduruyor. */
@media (max-width: 1320px) {
    .ustbar .iletisim-link { display: none; }
}

@media (max-width: 760px) {
    :root {
        /* Ana sayfanın mobil üst barıyla eşit (bkz. anasayfa.css --bar-y):
           14px dolgu + 42px logo + 14px dolgu = 70px. */
        --ustbar-h: 70px;
    }

    /* Renk ızgarası mobilde SINIRSIZ açılıyordu: 77 renk 3578px'lik tek bir
       blok oluşturup panelin geri kalanını pratikte ulaşılamaz yapıyordu.
       Kendi içinde kaydırılan sınırlı bir yüksekliğe alındı. */

    /* Işık panelinin butonu, ARAÇLAR satırı taşıp ikiye kırıldığında hangi
       satırda kalacağını CSS'ten önceden bilemiyor (bkz. .sahne-araclari
       flex-wrap) — bu yüzden sabit "sahne yüksekliği − araç ofseti" formülü
       yerine ekran yüksekliğine ORANLI, güvenli bir tavan kullanılıyor; taşan
       içerik zaten panelin kendi iç kaydırmasında kalıyor. */
    .isik-panel {
        width: min(320px, calc(100vw - var(--s-6)));
        max-height: min(60dvh, 480px);
    }
    /* Dar ekranda sağda sütun için yer yok: panel aşağıya iniyor ve
       tutamaktan açılıp kapanıyor. Kapalıyken bile tutamakta seçili renk ve
       ölçü yazılı, yani panel açılmadan da durum okunuyor. */
    .konfigurator { flex-direction: column; }
    .model-paneli { display: none; }
    .ayar-paneli {
        flex: 0 0 auto;
        border-left: none;
        border-top: 1px solid var(--kenarlik);
        box-shadow: 0 -10px 28px rgba(28, 24, 20, 0.12);
    }
    .ayar-tutamak {
        display: flex; align-items: center; gap: var(--s-3);
        width: 100%;
        min-height: 52px;
        padding: 0 var(--s-5);
        border: none;
        background: var(--yuzey);
        color: var(--metin);
        font-family: inherit;
        text-align: left;
    }
    .ayar-tutamak-nokta {
        width: 16px; height: 16px; border-radius: 5px; flex-shrink: 0;
        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.22);
    }
    .ayar-tutamak-metin {
        flex: 1;
        font-family: var(--veri-font);
        font-size: var(--fs-sm);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .ayar-tutamak > svg { color: var(--metin-soluk); transition: transform 0.22s ease; }
    .ayar-paneli.acik .ayar-tutamak > svg { transform: rotate(180deg); }
    /* Kapalı: gövde tamamen kapalı. Açık: ekranın yarısına kadar, kendi
       içinde kaydırılabilir — kapak her hâlde görünür kalsın. */
    /* display:none — yalnızca görsel gizleme (max-height:0 + overflow:hidden)
       yetmiyordu: panel kapalıyken içindeki 77 renk düğmesi ve kaydırıcılar
       klavyeyle hâlâ geziliyor, kullanıcı görünmeyen kontrollerin arasında
       kayboluyordu. */
    .ayar-paneli:not(.acik) .ayar-govde { display: none; }
    .ayar-govde { padding-top: 0; padding-bottom: 0; }
    .ayar-paneli.acik .ayar-govde {
        max-height: 52dvh;
        overflow-y: auto;
        padding-top: var(--s-5);
        padding-bottom: var(--s-5);
    }

    .model-secici { display: flex; top: var(--s-3); left: 50%; transform: translateX(-50%); padding-left: var(--s-4); gap: var(--s-2); max-width: calc(100% - 2 * var(--s-4)); }
    .model-secici-etiket { display: inline; font-size: 0.66rem; }
    .model-secici-ad { max-width: 105px; }
    .model-modal-kutu { width: min(100% - var(--s-5), 600px); }
    .model-galeri-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: max-content; padding: var(--s-4); gap: var(--s-3); }

    .durum-cubugu {
        left: var(--s-3); right: var(--s-3);
        font-size: var(--fs-xs); padding: 8px var(--s-3);
        max-width: none;
    }
    /* Sahne araçları, tam genişlikteki durum çubuğunun ÜZERİNE biner —
       durum çubuğunun kendi yüksekliği ~33px (8px dolgu*2 + ~17px metin),
       + boşluk. Araçlar 1 veya 2 satıra kırılsa da (bkz. flex-wrap) bu
       ofset sabit kalır: satır sayısı arttıkça araçlar sadece YUKARI doğru
       büyür, durum çubuğuyla arasındaki boşluk hiç değişmez. */
    .sahne-araclari {
        right: var(--s-3);
        bottom: calc(var(--s-3) + 33px + var(--s-2));
        max-width: calc(100vw - 2 * var(--s-3));
    }
    /* Işık tuşunun ikonu tek başına anlaşılır; dar ekranda etiketi gizlenip
       yalnızca seçili ortamın adı bırakılıyor. */
    .isik-secici-etiket { display: none; }
    .isik-secici-ad { max-width: 118px; }
    .menu { display: none; }
    .marka-logo { max-height: 42px; }
    .marka-link { padding-left: var(--s-3); }
    /* Konfigüratördeki ikonlar (indir/tam ekran/paylaş) kendi başlarına
       anlaşılır olduğu için etiketleri gizlenebilir. Ana sayfadaki tek CTA
       için bu YAPILMAZ — bkz. anasayfa.css. */
    .araci-etiket { display: none; }
    .araci-dugme { padding: 9px 11px; }
    .ustbar { padding: 0 var(--s-4); }
}