/* ======================================================================
   site/varlik/paylasilan.css — SİTE ile VIP KATALOG sayfasının ORTAK
   bileşenleri (2026-09-06): küratör penceresi (.gep-*), oynatıcı
   (.oynat), «Duvarında Gör» seçenek kutusu (.modal-arka/.dg-*) ve
   örnek oda motoru (.oda-*).

   > **TEK KAYNAK.** Bu kurallar site.css'ten KESİLDİ ve site.css onları
   > `@import` ile alıyor; VIP sayfası da doğrudan bağlıyor. İki kopya
   > yazılsaydı biri bir gün ötekinden ayrışırdı (bu depoda beş kez
   > yaşandı). Her değişken YEDEKLİ (`var(--laci,#1d2a44)`): VIP sayfası
   > sitenin :root'unu taşımıyor.
   ====================================================================== */
.gep .mut,.dg-kutu .mut{color:var(--mut,#6f7686)}
.gep .etiket{font-size:.76rem;letter-spacing:.3em;text-transform:uppercase;color:var(--altin-acik,#c9a35c)}
.gep .hepsi-tus{display:inline-block;margin:1.4rem auto 0;border:1px solid var(--altin-acik,#c9a35c);
color:var(--altin-acik,#c9a35c);padding:.65rem 1.8rem;letter-spacing:.16em;font-size:.82rem;
text-transform:uppercase;text-decoration:none;transition:.25s;align-self:flex-start}
.gep .hepsi-tus:hover{background:var(--altin-acik,#c9a35c);color:#1d2a44}
/* --- örnek oda (uygulamadaki 3 katmanlı oda motoru) --- */
.oda-kutu{background:var(--zemin,#faf8f3);max-width:min(1060px,94vw);width:100%;
box-shadow:0 34px 90px rgba(0,0,0,.45);display:flex;flex-direction:column}
.oda-bas{display:flex;align-items:center;gap:1rem;background:var(--laci,#1d2a44);color:#f2ecdc;
padding:.8rem 1.2rem;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase}
.oda-sayac{margin-left:auto;font-variant-numeric:tabular-nums;opacity:.7}
.oda-sahne{position:relative;line-height:0;background:#efeadf;overflow:hidden}
.oda-bg{width:100%;height:auto;display:block}
.oda-eser{position:absolute;z-index:2;box-shadow:-8px 10px 22px rgba(0,0,0,.55);
transition:opacity .35s;background:#1a1a1a;object-fit:cover}
.oda-fg{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.oda-ok{position:absolute;top:50%;transform:translateY(-50%);z-index:4;
width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;font-size:1.4rem;
background:rgba(29,42,68,.75);color:#f2ecdc;transition:.2s}
.oda-ok:hover{background:var(--altin,#b08d3e);color:#1d2a44}
.oda-ok.sol{left:14px}.oda-ok.sag{right:14px}
.oda-not{padding:.8rem 1.2rem;font-size:.8rem;color:var(--mut,#6f7686);line-height:1.6}

/* GÜNÜN ESERİ DİNLE POPUP'I — görsel yavaş zoom (ken-burns) + senkron metin */
.gep-arka{position:fixed;inset:0;background:rgba(15,20,34,.82);z-index:220;
display:flex;align-items:center;justify-content:center;padding:3vh 3vw;
backdrop-filter:blur(6px)}
/* display:flex, hidden özniteliğinin UA kuralını EZER — açıkça kapatılmalı
 * (#anlArka[hidden] dersinin aynısı; yoksa popup sayfa açılışında açık gelir) */
.gep-arka[hidden]{display:none!important}
.gep{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
background:linear-gradient(160deg,#1d2a44,#16203a);color:#efe9d8;
max-width:1060px;width:100%;max-height:92vh;position:relative;min-height:0;
box-shadow:0 40px 120px rgba(0,0,0,.5)}
/* > **TAŞMAYI KESMEK YETMEDİ — PENCERE FAZLA KISALDI.** `min-height:0`
   > eklenince metin kutusu görevini yaptı ama pencere görselin
   > `min-height:320px`ine göre 413px'te kalıyor, metin de yalnızca
   > ~5 satır görünüyordu: kaydırma çubuğu doğdu, okunabilirlik düştü.
   > 1280×800'de ölçüldü (2026-09-03). Taban yükseklikle 12 satıra
   > çıkıyor; `min()` sayesinde 640px'lik ekranda 86vh'ye düşüyor ve
   > taşma geri gelmiyor — iki uçta da ölçülerek doğrulandı. */
.gep{min-height:min(620px,86vh)}
/* > **ÖRTÜK IZGARA SATIRI İÇERİĞE UZAR — `max-height` ONU DURDURMAZ.**
   > Onur'un küçük iMac'inde (1440×900) ölçüldü (2026-09-06): pencere
   > 754px, metin kutusu 1170px, görsel 1476px — hepsi ekranın altına
   > taşıyordu. `min-height:0` zinciri doğruydu ama satır yüksekliği
   > `auto` olduğu için grid çocukları asla kısıtlanmıyordu. Tek satırı
   > `minmax(0,1fr)` yapmak zinciri gerçekten bağlıyor: metin 448px'e
   > iniyor ve kaydırıyor, görsel pencereyle bitiyor. Canlıda JS ile
   > denendi, sonra buraya yazıldı. */
.gep{grid-template-rows:minmax(0,1fr);overflow:hidden}
.gep-kapat{position:absolute;top:.7rem;right:.7rem;z-index:5;width:38px;height:38px;
border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(22,32,58,.6);
color:#efe9d8;font-size:1rem;cursor:pointer}
.gep-kapat:hover{background:var(--altin-acik,#e3c98f);color:#1d2a44}
.gep-gorsel{overflow:hidden;min-height:320px}
.gep-gorsel img{width:100%;height:100%;object-fit:cover;
animation:gepZoom 34s ease-in-out infinite alternate}
@keyframes gepZoom{from{transform:scale(1)}to{transform:scale(1.14)}}
/* > **`min-height:0` OLMADAN `overflow-y:auto` HİÇ ATEŞLEMEZ.**
   > Onur (2026-09-03): *"günün eserinin küratör metni çok uzunsa ekran
   > bozuluyor."* Kutuda `overflow-y:auto` zaten YAZIYORDU; çalışmama
   > nedeni CSS'in en sinsi varsayılanı: bir flex/grid çocuğunun
   > `min-height`i `auto`dur, yani **içeriğinden küçülemez**. Kutu
   > 92vh'lik pencereden taşıyor, kaydırma çubuğu hiç doğmuyor ve
   > alttaki düğme ekran dışında kalıyordu.
   >
   > `min-height:0` üç seviyede birden gerekiyor: grid çocuğu
   > (`.gep-icerik`), onun flex çocuğu (`.gep-metin`) ve grid'in
   > kendisi. Yalnızca birine yazmak yetmez — zincirin en üstteki
   > halkası taşmaya devam eder. */
.gep-icerik{padding:2.2rem 2.4rem;display:flex;flex-direction:column;min-width:0;
min-height:0;overflow:hidden}
.gep-icerik h3{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.7rem;
font-weight:500;margin:.3rem 0 0}
.gep-metin{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.08rem;
line-height:1.85;margin:0;overflow-y:auto;flex:1 1 0;min-height:0;
padding-right:.9rem;scrollbar-width:thin;
scrollbar-color:rgba(227,201,143,.55) transparent;
/* Kaydırılabilir olduğunu GÖSTER: alt kenarda kararan bir şerit.
   Kaydırma çubuğu ince ve dokunmatikte hiç görünmüyor; kullanıcı
   metnin devamı olduğunu ancak bir ipucuyla anlıyor. */
-webkit-mask-image:linear-gradient(#000 calc(100% - 1.6rem),transparent);
mask-image:linear-gradient(#000 calc(100% - 1.6rem),transparent)}
.gep-metin::-webkit-scrollbar{width:6px}
.gep-metin::-webkit-scrollbar-thumb{background:rgba(227,201,143,.5);border-radius:3px}
.gep-metin::-webkit-scrollbar-track{background:transparent}
/* Sona gelince maskeyi kaldır — son satır soluk kalmasın. */
.gep-metin.dipte{-webkit-mask-image:none;mask-image:none}
.gep-metin .kel.aktif{color:var(--altin-acik,#e3c98f)}
@media (max-width:820px){.gep{grid-template-columns:1fr;grid-template-rows:auto auto;overflow-y:auto}
.gep-gorsel{max-height:38vh}.gep-icerik{padding:1.4rem 1.5rem}
.gep-metin{flex:none;max-height:34vh}}

.oynat{display:flex;align-items:center;gap:1rem;margin-top:1.2rem}
.oynat button{width:52px;height:52px;border-radius:50%;border:1px solid var(--altin-acik,#c9a35c);
background:none;color:var(--altin-acik,#c9a35c);font-size:1.2rem;cursor:pointer;transition:.25s}
.oynat button:hover{background:var(--altin-acik,#c9a35c);color:var(--laci,#1d2a44)}
.oynat .cubuk{flex:1;height:4px;background:rgba(255,255,255,.16);border-radius:99px;
position:relative;cursor:pointer}
.oynat .cubuk i{position:absolute;left:0;top:0;bottom:0;background:var(--altin-acik,#c9a35c);
border-radius:99px;width:0}
.oynat .sure{font-variant-numeric:tabular-nums;font-size:.82rem;color:#bfb8a2}

/* Duvarında Gör seçenek modalı + örnek salon */
.modal-arka{position:fixed;inset:0;background:rgba(22,32,58,.6);z-index:210;
display:flex;align-items:center;justify-content:center}
.modal-arka[hidden]{display:none}
.dg-kutu{background:var(--kart,#ffffff);width:min(520px,92vw);padding:1.4rem 1.5rem;
box-shadow:0 34px 90px rgba(10,14,26,.4)}
.dg-bas{display:flex;justify-content:space-between;align-items:center;
font-family:'Cormorant Garamond',serif;font-size:1.4rem;color:var(--laci,#1d2a44);
font-weight:600;margin-bottom:1rem}
.dg-kapat{border:1.5px solid var(--laci,#1d2a44);background:none;color:var(--laci,#1d2a44);
width:40px;height:40px;border-radius:50%;cursor:pointer;font-size:1rem;transition:.2s}
.dg-kapat:hover{background:var(--laci,#1d2a44);color:#fff}
.dg-sec{display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:center;
width:100%;text-align:left;border:1px solid #e4dcc8;background:none;padding:.85rem 1rem;
margin-bottom:.6rem;cursor:pointer;font-family:inherit;color:var(--metin,#232a3a);transition:.22s}
.dg-sec:hover{border-color:var(--altin,#b08d3e);background:#faf6ec;transform:translateX(3px)}
.dg-sec .dg-ik{font-size:1.5rem}
.dg-sec b{display:block;font-weight:500;letter-spacing:.04em;color:var(--laci,#1d2a44)}
.dg-sec i{display:block;font-style:normal;font-size:.78rem;color:var(--mut,#6f7686);line-height:1.4}
.dg-roz{font-size:.6rem;letter-spacing:.18em;border:1px solid var(--altin,#b08d3e);
color:var(--altin,#b08d3e);padding:.2rem .5rem;border-radius:99px;white-space:nowrap}
.dg-roz.dg-web{border-color:#3c7d52;color:#3c7d52}