/* PROJE POPUP'I (DETAY) — TEK KAYNAK.
 *
 * KÖK NEDEN (kullanıcı bildirimi, 2026-09-12: "popup'ı açınca sayfa böyle gözüktü, yenileyince
 * düzeldi" — üç ayrı projede tekrarlandı): bu kurallar proje.html'in satır içi <style> bloğunun
 * İÇİNDEYDİ ve proje popup'ı, diğer üç varlık modalının aksine, kendi CSS'ini enjekte etmiyor —
 * "sayfamın CSS'i zaten var" varsayımıyla çalışıyordu. Varsayım 2026-09-12 performans turuna
 * kadar doğruydu: popup YALNIZCA onu <script> ile yükleyen sayfalarda (proje.html,
 * en-iyi-100.html) açılıyor, başka her yerden tıklama TAM SAYFA gezinmeye düşüyordu. O tur
 * popup'ı tembel yükleyip HER sayfada aynı belgede açılır yapınca (lazy-modals.js#ENTITY_MODULES
 * .project'ten `preloadedOnly` kalktı) varsayım çöktü: ana sayfadan/kişi/firma popup'ından açılan
 * proje popup'ında bu kuralların HİÇBİRİ yoktu. Ölçüldü: `.designer-chip` proje.html'de
 * display:flex + padding, index.html'de düz display:block — yani çıplak HTML. F5 düzeltiyordu
 * çünkü yenileme gerçek /proje/:slug sayfasını (bu CSS'le birlikte) yüklüyor.
 *
 * ÇÖZÜM: kurallar buraya TAŞINDI (kopyalanmadı — iki kopya olsaydı biri ayrışırdı). Artık:
 *   • proje.html ve en-iyi-100.html bu dosyayı <link> ile yükler (sayfa görünümü birebir aynı),
 *   • lazy-modals.js proje modülünü açmadan ÖNCE aynı dosyayı <link> olarak enjekte edip
 *     yüklenmesini BEKLER (bkz. oradaki cssDeps) — yani popup hangi sayfadan açılırsa açılsın
 *     stilleri yanında gelir.
 * Bir daha aynı sınıf hatanın oluşmaması için scripts/test-2026-09-12-project-modal-css.mjs
 * proje popup'ının kullandığı sınıfların bu dosyada tanımlı olduğunu deploy öncesi doğrular.
 */
/* ---------- PROJE MODALI — sol panel (bilgi) ----------
     Eski proje-detay.html'in .detail-header/.detail-byline grid'i buraya taşınmadı: modal sol
     paneli tek bir dikey akış (DOM sırası zaten Başlık → Puan → Aksiyon → Künye → Açıklama →
     Yorumlar, bkz. kullanıcı isteği), grid-template-areas'a gerek yok. Kalan sınıf adları
     (.rating-widget, .designer-chip, .comment-row vb.) proje-detay.html ile BİREBİR aynı — aynı
     paylaşılan JS (rating-widget.js, js/components/project-*.js) bu isimlere yazıyor. */
  .detail-title{font-family:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size:26px; font-weight:700; margin:0 0 12px; line-height:1.25;}
  /* En İyi 100 rozeti (bkz. js/components/project-modal.js#renderTopRankBadge, kullanıcı isteği:
     "her iki sayfadan da aynı proje popup'ı açınca tüm bilgilerin ve tasarımın bire bir aynı olması
     gerekiyor") — gerçek bulgu: bu blok ÖNCEDEN yalnızca en-iyi-100.html'de vardı, bu yüzden
     proje.html'den açılan bir Top100 projesinin popup'ında rozet HİÇ görünmüyordu (topRank verisi
     JS'te sonradan otomatik aranır oldu, ama CSS'i olmayınca stilsiz kalırdı) — en-iyi-100.html'deki
     AYNI blok, sayfa başına kopyalama deseniyle (bkz. o dosyadaki .detail-title yorumu) burada da
     tutulur. */
  .pm-top-rank{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 14px;}
  .pm-top-rank-badge{display:inline-flex; align-items:center; background:var(--ink); color:var(--paper-card); border-radius:100px; padding:5px 14px; font-size:12.5px; font-weight:700; transition:background .15s ease;}
  .pm-top-rank-badge:hover{background:var(--walnut);}
  /* "X tarafindan" satiri (.detail-byline*) KALDIRILDI (kullanici istegi, 2026-09-09) - bu kurallar
     yalnizca kaldirilan pm-byline elementini stiliyordu, artik dead code'du. */
  .pm-force-hidden{display:none;}
  /* Puanla/Kaydet/Paylaş/Düzenle/Arşivle/Sil artık bu sütunda DEĞİL — Puanla/Kaydet/Paylaş X'in
     yanında (X→Kaydet→Paylaş→Puanla sırasıyla, bkz. kullanıcı isteği), Düzenle X'in KARŞI
     kenarında render edilir (bkz. js/components/project-actions.js, js/components/project-modal.js).
     O yüzden #pm-rating-save-row/#pm-save-slot/.detail-title-actions/.card-edit-btn/.card-delete-btn
     kuralları buradan kaldırıldı; görsel stilleri artık TEK kaynaktan (modal-shell.js#injectStyles)
     geliyor. .save-btn/.save-btn-label metinleri/.save-btn-count/.rating-widget/.pm-rating-avg İSE
     burada kalır — Kaydet/Puanla header'a taşınsa da hâlâ bu sınıfları taşıyor, TEK stil kaynağı
     burası (modal-shell.js yalnızca header bağlamındaki yükseklik/genişlik/metin-gizleme
     override'larını ekler). */
  .save-btn{
    display:inline-flex; align-items:center; gap:5px;
    flex-shrink:1 !important; min-width:0 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis;
    height:32px !important; box-sizing:border-box;
    background:var(--paper-card); border:1px solid var(--line); border-radius:100px;
    padding:0 8px !important; font-size:12px !important; font-weight:600; line-height:1; color:var(--ink-soft);
  }
  .save-btn:hover{border-color:var(--walnut); color:var(--ink);}
  .save-btn.saved{background:var(--ink); color:var(--paper-card); border-color:var(--ink);}
  .save-btn svg{flex-shrink:0;}
  .save-btn-label-saved{display:none;}
  .save-btn.saved .save-btn-label-default{display:none;}
  .save-btn.saved .save-btn-label-saved{display:inline;}
  .save-btn-count{font-weight:600;}

  /* Kaydet butonuyla (.save-btn) AYNI pill çerçeve dili — kullanıcı isteği: "Kaydet butonundaki gibi
     dış çerçeve, border-radius/pill, hafif arka plan ve padding". Yıldız butonlarının kendi
     padding'i zaten var, bu yüzden kapsayıcının solundan hafif negatif margin ile hizalanır ki
     pill kenarına gereğinden fazla boşluk binmesin. */
  .rating-widget{
    display:flex; align-items:center; gap:5px; flex-wrap:nowrap;
    flex-shrink:1 !important; min-width:0 !important;
    height:32px !important; box-sizing:border-box;
    background:var(--paper-card); border:1px solid var(--line); border-radius:100px;
    padding:0 8px !important; margin:0;
    font-family:inherit; font-size:12px !important; font-weight:600; color:var(--ink-soft);
    transition:border-color .15s ease;
  }
  .rating-widget:hover{border-color:var(--walnut);}
  /* Puanla düğmesinin iç ikon/metin düzeni + oy popup'ı (.rate-popup-*) rating-widget.js'in
     injectRatePopupStyle()'ından gelir (bkz. kullanıcı isteği: proje popup'ındaki puanlama artık
     En İyi 100'deki gibi tek yıldız + "Puanla" metinli bir düğme, tıklanınca popup açılıyor) —
     burada yalnızca dış "pill" çerçevesi (.rating-widget) ve ortalama rozeti kalır. */
  .rating-widget svg{flex-shrink:0;}
  .pm-rating-avg{
    display:inline-flex; align-items:center; gap:3px; flex-shrink:0;
    font-size:12px; font-weight:600; color:var(--ink-soft); font-family:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }

  .detail-info{margin-top:8px;}
  .designer-section{margin-top:0;}
  .designer-section + .designer-section{margin-top:16px;}
  .designer-label{display:flex; align-items:center; gap:9px; font-size:14px; color:var(--ink); font-weight:600; margin-bottom:10px;}
  /* Künye ikonları (bkz. kullanıcı isteği): mimar/firma/tür/tip/grup/yer/yıl/fotoğraf gibi künye
     satırlarının solundaki soyut çizgi ikonları — hepsi AYNI hizada/büyüklükte, js/components/
     project-meta.js#ICONS'tan gelir. */
  .meta-icon{width:16px; height:16px; flex-shrink:0; color:var(--ink-soft);}
  .meta-icon svg{display:block; width:100%; height:100%;}
  .detail-meta .meta-row{display:flex; align-items:flex-start; gap:9px;}
  .detail-meta .meta-row .meta-icon{margin-top:3px;}
  .designer-chips{display:flex; flex-wrap:wrap; gap:10px;}
  .designer-chip{
    display:flex; align-items:center; gap:9px;
    background:var(--paper); border:1px solid var(--line-soft);
    border-radius:100px; padding:6px 16px 6px 6px;
    transition:border-color .15s ease, transform .15s ease;
  }
  a.designer-chip:hover{border-color:var(--brass); transform:translateY(-1px);}
  .designer-chip-no-avatar{padding:6px 16px; min-height:46px;}
  .designer-chip-avatar{
    width:32px; height:32px; border-radius:50%; flex-shrink:0;
    border:1px solid var(--line); overflow:hidden; position:relative;
    display:flex; align-items:center; justify-content:center;
    color:var(--paper-card); font-family:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-weight:600; font-size:11.5px;
  }
  .designer-chip-avatar img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
  .designer-chip-avatar.office-avatar img{object-fit:contain; background:var(--paper-card);}
  .designer-chip-name{font-size:13px; font-weight:600; color:var(--ink);}
  .designer-name-plain{font-size:14px; color:var(--walnut); text-decoration:underline; text-decoration-color:var(--line); padding:6px 4px; align-self:center;}
  .designer-name-plain:hover{color:var(--ink);}

  .detail-meta{font-size:14px; line-height:1.9; margin-top:18px;}
  .detail-meta strong{font-weight:600; color:var(--ink);}
  .detail-meta a{color:var(--walnut); text-decoration:underline; text-decoration-color:var(--line);}
  .detail-meta a:hover{color:var(--ink);}
  .detail-desc{font-size:15px; line-height:1.7; color:var(--ink); margin-top:18px;}
  /* bkz. kullanıcı isteği: açıklama TAM olarak 3 satırda kırpılıp "…" ile bitsin, 4. satıra
     geçmesin — js/components/project-meta.js#renderDescription bu class'ı DOM'a yazar, gerçek
     taşma varsa "Devamını gör" ile kaldırılır. */
  .detail-desc-text.clamped{display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis;}
  .detail-desc-more{display:block; margin-top:6px; background:none; border:none; padding:0; color:var(--walnut); font-weight:600; font-size:14px; text-decoration:underline; text-decoration-color:var(--line); cursor:pointer;}
  .detail-desc-more:hover{color:var(--ink);}

  /* ---------- PROJE MODALI — yorumlar ---------- */
  /* Yorumlar kutusu artık .pm-feedback-card (Geri Bildirim) İLE BİREBİR AYNI kart görünümünde —
     aynı margin/padding/border/radius/arkaplan, aynı summary punto/hiza (bkz. kullanıcı isteği:
     "iki kutucuğun da + sembolü aynı hizada ve aynı büyüklükte olsun"). .pm-info-divider (<hr>)
     artık Yorumlar'ın ÜSTÜNDE, açıklamayla arasında (bkz. kullanıcı isteği: "geri bildirim ile
     yorumlar arasındaki line'ı sil, yorumların üstüne line koy"). */
  .comments-section{margin-top:20px; padding:18px; border:1px solid var(--line); border-radius:14px; background:var(--paper);}
  /* ---------- PROJE MODALI — harita ---------- */
  /* Harita kutucuğu Yorumlar (.comments-section) İLE BİREBİR AYNI kart/açılır-kapanır çerçeveyi
     paylaşır (bkz. kullanıcı isteği), yalnızca sınıfını değil id'sini de #pm-map-section olarak
     taşır — içerik alanı (bkz. #pm-map-wrap) uydu görünümlü iframe'i barındırır. */
  /* GERÇEK BULGU (kullanıcı isteği: büyütme ikonu görünmüyordu): Leaflet'in kendi iç pane'leri
     (tile/marker/popup/kontrol) z-index 200-1000 arası değerler kullanır; .pm-map-wrap kendi
     stacking context'ini KURMADIĞI sürece bu değerler dışarı sızıp aşağıdaki .pm-map-expand-btn'in
     (z-index:1001) altında değil ÜSTÜNDE render olabiliyordu. isolation:isolate, Leaflet'in tüm iç
     z-index'lerini bu kutunun İÇİNE hapseder — böylece expand butonu artık güvenle üstte kalır. */
  .pm-map-wrap{position:relative; isolation:isolate; border-radius:10px; overflow:hidden; aspect-ratio:16/9; background:var(--paper-alt);}
  .pm-map-wrap iframe{width:100%; height:100%; border:0; display:block;}
  /* Büyütme (fullscreen) düğmesi — kullanıcı isteği: haritanın sağ üst köşesine, .card-save-btn
     (kart üzerindeki dairesel ikon düğmesi) İLE AYNI çerçeve/boyut dilinde. */
  .pm-map-expand-btn{
    position:absolute; top:10px; right:10px; z-index:1001;
    width:30px; height:30px; border-radius:50%; border:none;
    background:rgba(27,42,61,0.55); color:#fff;
    display:flex; align-items:center; justify-content:center;
  }
  .pm-map-expand-btn:hover{background:rgba(27,42,61,0.75);}
  /* Harita lightbox — .lightbox (galeri) İLE BİREBİR AYNI overlay/backdrop/close deseni (bkz.
     kullanıcı isteği), ayrı bir sınıf/eleman olarak tutulur (bkz. project-modal.js#openMapLightbox
     yorumu: galeri'nin index/sayaç state'ine karışmasın diye). */
  .pm-map-lightbox{display:none; position:fixed; inset:0; background:rgba(27,42,61,0.92); z-index:210; align-items:center; justify-content:center; padding:32px;}
  .pm-map-lightbox.open{display:flex;}
  .pm-map-lightbox-frame{width:min(1100px, 92vw); height:min(720px, 82vh); border-radius:14px; overflow:hidden; background:var(--paper-alt);}
  .pm-map-lightbox-frame iframe{width:100%; height:100%; border:0; display:block;}
  .pm-map-lightbox-close{position:absolute; top:24px; right:32px; background:none; border:none; color:var(--paper); opacity:0.8; z-index:2;}
  .pm-map-lightbox-close:hover{opacity:1;}
  /* Yorumlar da ilk açılışta kapalı (bkz. kullanıcı isteği, .pm-feedback-card İLE AYNI <details>/
     <summary> deseni) — comments-title artık <h2> değil doğrudan clickable <summary>. */
  .comments-title{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; font-family:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size:14px; font-weight:700; color:var(--ink); margin:0;}
  .comments-title::-webkit-details-marker{display:none;}
  .comments-section[open] .comments-title{margin-bottom:6px;}
  .comments-section[open] .feedback-card-plus::after{transform:translate(-50%,-50%) rotate(90deg); opacity:0;}
  .comment-form-wrap{margin-bottom:20px;}
  /* Gönder butonu textarea'nın İÇİNE, sağ alt köşeye bindirilir (bkz. kullanıcı isteği) — yazının
     butonun altına/arkasına denk gelmemesi için textarea'nın sağ ve alt iç boşluğu büyütülür, buton
     o boşluğun içinde mutlak konumlanır. */
  .comment-input-wrap{position:relative;}
  /* Arka plan Geri Bildirim kutucuğunun textarea'sıyla (bkz. .pm-feedback-card textarea) BİREBİR
     aynı (bkz. kullanıcı isteği) — önceden .comments-section'ın kendi arkaplanıyla (var(--paper))
     aynıydı, textarea kutunun içine görünmez şekilde karışıyordu. */
  .comment-form textarea{width:100%; min-height:80px; padding:12px 108px 50px 14px; border:1px solid var(--line); border-radius:12px; background:var(--paper-card); font-family:inherit; font-size:14px; color:var(--ink); resize:vertical;}
  .comment-input-wrap .comment-submit-btn{position:absolute; right:8px; bottom:8px;}
  /* Gönder ve Bildir (bkz. .feedback-input-wrap altında) AYNI boyut/tipografi Design Token'larını
     kullanır (bkz. kullanıcı isteği) — sarmalayıcılar (bkz. yukarısı/aşağısı) yalnızca konum farkını
     taşır, boyutla ilgili hiçbir override yoktur. */
  .comment-submit-btn{background:var(--color-primary); color:var(--paper-card); padding:var(--space-2) var(--space-4); border-radius:var(--radius-full); font-weight:600; font-size:var(--font-body-2); line-height:1.2;}
  .comment-submit-btn:hover{background:var(--color-primary-hover);}
  .comment-submit-btn:disabled{opacity:0.5; cursor:not-allowed;}
  .comment-login-note{padding:16px 18px; border:1px dashed var(--line); border-radius:12px; font-size:13.5px; color:var(--ink-soft);}
  .comment-login-note a{color:var(--walnut); font-weight:600; text-decoration:underline;}
  .comment-submit-notice{margin:10px 0 0; font-size:12.5px; color:var(--sage);}
  .comment-row{display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--line-soft);}
  .comment-row:last-child{border-bottom:none;}
  .comment-avatar{width:34px; height:34px; border-radius:50%; background:var(--walnut); color:var(--paper-card); display:flex; align-items:center; justify-content:center; font-family:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size:11.5px; font-weight:600; flex-shrink:0; position:relative; overflow:hidden;}
  /* Hem sıradan üyenin kendi profil fotoğrafı (<div>, bkz. js/components/project-comments.js#user_photo)
     hem de bir mimar/firma profiline bağlı yorumcunun profil fotoğrafı (<a>, #commenterProfile) aynı
     mutlak konumlanan <img> desenini kullanır (bkz. .designer-chip-avatar img ile AYNI desen) — bu
     yüzden position:relative/overflow:hidden yukarıdaki ORTAK .comment-avatar kuralında tanımlı.
     a.comment-avatar için ayrıca text-decoration sıfırlanır ki bir bağlantı gibi altı çizili görünmesin. */
  a.comment-avatar{text-decoration:none;}
  .comment-avatar img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
  .comment-meta{font-size:12.5px; color:var(--ink-soft); margin-bottom:4px; display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
  .comment-meta strong{color:var(--ink); font-weight:600;}
  .comment-author-link{color:inherit; text-decoration:none;}
  .comment-author-link:hover{text-decoration:underline;}
  .comment-delete-btn{background:none; border:none; color:var(--ink-soft); font-size:12px; font-family:inherit; cursor:pointer; margin-left:4px; text-decoration:underline; padding:0;}
  .comment-delete-btn:hover{color:#c0392b;}
  .comment-body-text{margin:0; font-size:13.5px; line-height:1.6; color:var(--ink); white-space:pre-wrap;}

  /* ---------- PROJE MODALI — Bilgi Kaynağı & Geri Bildirim ---------- */
  .pm-info-divider{margin:28px 0 0; border:none; border-top:1px solid var(--line);}
  .pm-feedback-card{margin-top:20px; padding:18px; border:1px solid var(--line); border-radius:14px; background:var(--paper);}
  .pm-feedback-card h5{margin:0 0 6px; font-family:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size:14px; font-weight:700;}
  .pm-feedback-card p{margin:0 0 10px; font-size:13px; color:var(--ink-soft); line-height:1.5;}
  /* Kart ilk açılışta kapalı (bkz. kullanıcı isteği: "Geri Bildirim +" ön başlığı) — native
     <details>/<summary>, JS state yönetimi gerekmez (bkz. js/components/claim-correction-box.js#
     injectStyles'daki AYNI desen, mimar/firma modallarındaki .feedback-card için). */
  .pm-feedback-card > summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; font-family:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size:14px; font-weight:700; color:var(--ink);}
  .pm-feedback-card > summary::-webkit-details-marker{display:none;}
  .pm-feedback-card[open] > summary{margin-bottom:6px;}
  .feedback-card-plus{flex-shrink:0; width:18px; height:18px; position:relative; margin-left:10px;}
  .feedback-card-plus::before, .feedback-card-plus::after{content:''; position:absolute; top:50%; left:50%; background:var(--ink-soft); transform:translate(-50%,-50%); transition:transform 0.15s ease;}
  .feedback-card-plus::before{width:12px; height:2px;}
  .feedback-card-plus::after{width:2px; height:12px;}
  .pm-feedback-card[open] .feedback-card-plus::after{transform:translate(-50%,-50%) rotate(90deg); opacity:0;}
  /* Bildir butonu da yorum kutusuyla AYNI desende textarea'nın içine, sağ alt köşeye bindirilir. */
  .feedback-input-wrap{position:relative;}
  .pm-feedback-card textarea{width:100%; min-height:64px; padding:9px 92px 40px 12px; border:1px solid var(--line); border-radius:10px; background:var(--paper-card); font-family:inherit; font-size:12.5px; color:var(--ink); resize:vertical;}
  .feedback-input-wrap .comment-submit-btn{position:absolute; right:6px; bottom:6px;}
  #pm-feedback-result{margin:8px 0 0; font-size:12px; color:var(--sage);}

  /* ---------- PROJE MODALI — sağ panel (medya + doğal akış) ---------- */
  .gallery-wrap{position:relative; min-width:0;}
  .gallery-media{position:relative;}
  .detail-gallery{display:flex; gap:12px; overflow-x:auto; scroll-behavior:smooth; scrollbar-width:none; padding-bottom:4px;}
  .detail-gallery::-webkit-scrollbar{display:none;}
  /* 2:1 (landscape) medya oranı — kutunun boyutu ANKORDA (.detail-gallery a) sabitlenir, img/placeholder
     onu object-fit:cover ile doldurur. Genişliği doğrudan img üzerinde yüzde ile vermek yerine
     ankorda flex-basis olarak tanımlamak dairesel bir boyutlandırma sorununu önler (bkz. gerçek bulgu:
     img'nin kendi genişliği hem içeriğinden hem yüzdesinden gelemeyeceğinden 4:3'ten 2:1'e geçişte
     img'ye doğrudan width:% verilseydi ankor da auto olduğundan boyut belirsiz kalırdı). */
  .detail-gallery a{
    flex:0 0 min(88%, 760px); aspect-ratio:2/1; border-radius:14px; overflow:hidden;
    display:block; background:var(--paper-card);
  }
  .detail-gallery img{width:100%; height:100%; object-fit:cover; display:block;}
  .gallery-placeholder{
    flex:0 0 min(88%, 760px); aspect-ratio:2/1; border-radius:14px;
    display:flex; align-items:center; justify-content:center;
    color:rgba(255,255,255,0.92); font-family:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size:40px; font-weight:700;
  }
  .gallery-nav{
    position:absolute; top:50%; transform:translateY(-50%); z-index:3;
    width:38px; height:38px; border-radius:50%; border:none;
    display:flex; align-items:center; justify-content:center;
    background:rgba(27,42,61,0.45); color:#fff;
  }
  .gallery-nav:hover{background:rgba(27,42,61,0.72);}
  .gallery-prev{left:14px;}
  .gallery-next{right:14px;}
  .gallery-counter{text-align:center; margin-top:8px; font-family:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size:12.5px; color:var(--ink-soft);}

  .lightbox{display:none; position:fixed; inset:0; background:rgba(27,42,61,0.92); z-index:200; align-items:center; justify-content:center; padding:32px;}
  .lightbox.open{display:flex;}
  .lightbox img{max-width:100%; max-height:100%; border-radius:8px; user-select:none;}
  .lightbox-close{position:absolute; top:24px; right:32px; background:none; border:none; color:var(--paper); opacity:0.8; z-index:2;}
  .lightbox-close:hover{opacity:1;}
  .lightbox-nav{position:absolute; top:0; bottom:0; width:15%; min-width:56px; display:flex; align-items:center; background:none; border:none; color:var(--paper); opacity:0.6;}
  .lightbox-nav:hover{opacity:1;}
  .lightbox-prev{left:0; justify-content:flex-start; padding-left:18px;}
  .lightbox-next{right:0; justify-content:flex-end; padding-right:18px;}
  .lightbox-counter{
    position:absolute; bottom:24px; left:50%; transform:translateX(-50%); z-index:2;
    color:#fff; font-size:13px; font-weight:600; font-family:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:rgba(27,42,61,0.6); padding:6px 14px; border-radius:100px; backdrop-filter:blur(3px);
  }
  /* "Tümünü Gör" ızgara görünümü — bkz. js/components/gallery.js#initDetailGallery, buton/ızgara
     elemanları buradaki markup'ta değil, .lightbox'ın İÇİNE JS tarafından dinamik eklenir; burada
     yalnızca CSS tanımlanır (bkz. AYNI blok js/components/product-modal.js#injectStyles, paylaşılan
     stylesheet olmadığından iki yerde de tutulur). Buton .lightbox-close İLE BİREBİR AYNI çerçevesiz/
     metinsiz/ikon-only stile sahip (bkz. kullanıcı isteği: minimalist, X ile aynı boyut/renk). */
  .lightbox-grid-toggle{
    position:absolute; top:24px; right:78px; background:none; border:none;
    color:var(--paper); opacity:0.8; z-index:2;
  }
  .lightbox-grid-toggle:hover{opacity:1;}
  .lightbox-grid{display:none; position:absolute; inset:0; z-index:1; background:rgba(27,42,61,0.97); overflow-y:auto; padding:76px 24px 32px;}
  .lightbox.grid-mode .lightbox-grid{display:block;}
  /* ÖNEMLİ gerçek bulgu: `.lightbox.grid-mode img` (doğrudan çocuk kısıtlaması OLMADAN) ızgara
     kutucuklarının İÇİNDEKİ <img>'leri de eşleştiriyordu — .lightbox-grid-item img'nin kendi
     display:block kuralından (aşağıda) daha yüksek özgüllüğe sahip olduğundan onu eziyordu, thumbnail'lar
     boş/beyaz kutu olarak render oluyordu. `>` (doğrudan çocuk) sınırlaması yalnızca tekli lightbox
     görselini (lightbox'ın DOĞRUDAN çocuğu) hedefler, ızgaradaki (birkaç seviye iç içe) img'lere hiç
     dokunmaz — artık özgüllük çakışması bile yok, seçici yapısal olarak eşleşmiyor.
   */
  .lightbox.grid-mode > img,
  .lightbox.grid-mode .lightbox-nav,
  .lightbox.grid-mode .lightbox-counter{display:none;}
  .lightbox-grid-list{display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; max-width:1080px; margin:0 auto;}
  .lightbox-grid-item{aspect-ratio:1/1; border-radius:10px; overflow:hidden; display:block; background:var(--paper-card);}
  .lightbox-grid-item img{width:100%; height:100%; object-fit:cover; display:block;}
  @media (max-width:768px){
    .lightbox-grid{padding:60px 14px 24px;}
    .lightbox-grid-list{grid-template-columns:repeat(2, 1fr); gap:10px;}
  }

  .related-section{margin-top:32px; padding-top:28px; border-top:1px solid var(--line);}
  .related-title{font-family:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size:17px; font-weight:700; margin:0 0 16px;}
  /* Kart başlığı artık görselin ÜZERİNDE değil ALTINDA (bkz. kullanıcı isteği: tüm sayfa/görünümlerde
     gönderi başlıkları görselin altında olsun) — .related-card-photo görseli aspect-ratio'lu bir
     kutuya alır, .related-card-title normal akışta onun altına düz arkaplanla oturur. */
  .related-card{display:block; border-radius:12px; overflow:hidden; background:var(--paper-card); border:1px solid var(--line-soft);}
  /* background: yükleme sırasında (yavaş bağlantı) veya görsel 404/hata verirse kutu şeffaf/beyaz
     kalmasın diye nötr gri (bkz. kullanıcı isteği: pop-up görsellerinin bazen beyaz kalması sorunu). */
  .related-card-photo{position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--paper-alt);}
  .related-card-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
  .related-card-placeholder{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.92); font-family:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size:22px; font-weight:700;}
  .related-card-title{
    padding:10px 14px 12px;
    color:var(--ink); font-family:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size:13.5px; font-weight:700;
  }
  /* -webkit-line-clamp KESİNLİKLE padding taşıyan elemanın ÜZERİNDE değil, padding'siz bir İÇ
     elemanda uygulanmalı (bkz. kullanıcı isteği: "üç noktadan sonra kelime gelmemeli") — WebKit'in
     bilinen bir kusuru: line-clamp + padding-bottom AYNI kutuda olduğunda, kırpılan 4. satırın bir
     kısmı padding alanının içinden sızıp görünür kalıyordu (gerçek bulgu: "İzmir Musevi Cemaati
     Merkez Binası — Şaar…" satırının hemen altında "Aşamavim" kelimesi görünüyordu). Padding'i
     .related-card-title'da (dış kutu), kırpmayı padding'siz .related-card-title-clamp'te (iç metin)
     ayırmak bu sızıntıyı ortadan kaldırır.
  */
  .related-card-title-clamp{
    line-height:1.3; word-break:break-word;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis;
  }
  /* MİMARLAB AI, Faz 2 (bkz. kullanıcı isteği: "Bu projeler neden ilişkili?" sorusuna cevap
     verilebilsin) — js/components/office-modal.js#.related-card-subtitle İLE BİREBİR AYNI stil,
     RelatedProjects/CityProjects kartlarının altında hangi kritere göre önerildiğini (Aynı Mimar,
     Aynı Şehir, Yakın Yıl vb.) gösteren küçük, deterministik bir etiket için. Sayısal bir "eşleşme
     yüzdesi" DEĞİL, yalnızca gerçek ortak alanı adlandıran düz metin (bkz. kullanıcı isteği:
     "anlamsız yüzde skorları üretme").
  */
  .related-card-subtitle{font-size:11px; font-weight:500; color:var(--ink-soft); margin-top:2px;}
  .related-grid-scroll{display:flex; gap:16px; overflow-x:auto; scroll-behavior:smooth; scrollbar-width:none; padding-bottom:4px;}
  .related-grid-scroll::-webkit-scrollbar{display:none;}
  .related-grid-scroll .related-card{flex:0 0 200px;}

  .prevnext{margin-top:32px; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:16px;}
  .prevnext a{display:flex; align-items:center; gap:10px; flex:1; max-width:48%; padding:10px 14px; border:1px solid var(--line); border-radius:12px; background:var(--paper-card); font-size:13.5px; color:var(--ink-soft);}
  .prevnext a:hover{border-color:var(--walnut);}
  .prevnext a.next{text-align:right; margin-left:auto; flex-direction:row-reverse;}
  .prevnext-thumb{width:44px; height:44px; border-radius:8px; object-fit:cover; flex-shrink:0; background:var(--paper-alt);}
  .prevnext-thumb-placeholder{display:flex; align-items:center; justify-content:center; color:#fff; font-family:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-weight:700; font-size:14px;}
  .prevnext-text{min-width:0; flex:1;}
  .prevnext-label{display:block; font-size:11px; letter-spacing:0.06em; color:var(--sage); margin-bottom:4px;}
  /* display:block ZORUNLU — bkz. proje.html#.prevnext-title'daki AYNI gerekçe: span varsayılan
     inline olduğundan overflow:hidden/ellipsis genişlik kısıtlamaz, mobilde metin kutunun dışına
     taşıyordu (bkz. kullanıcı isteği). */
  /* Tek satır+nowrap yerine 3 satıra kadar sarılan clamp (bkz. kullanıcı isteği: "Önceki/Sonraki
     butonlarından başlık aşağı doğru 3 satır devam edebilsin, 3 satırı geçiyorsa üç nokta ile
     sonlandır") — .related-card-title-clamp İLE AYNI desen, bkz. o dosyadaki AYNI gerekçe. */
  .prevnext-title{display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; word-break:break-word; font-family:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size:14px; font-weight:700; color:var(--ink); line-height:1.3;}

  /* Skeleton — ertelenmiş bölümler (yorumlar/diğer projeler/ilgili projeler/ürünler) veri gelene
     kadar (bkz. kullanıcı isteği: lazy/deferred). display:none DEĞİL, gerçek bir layout kutusu
     olması gerekiyor ki IntersectionObserver tetiklenebilsin (bkz. project-modal.js#observeOnce). */
  .skeleton-card{background:linear-gradient(90deg, var(--paper-alt) 25%, var(--paper) 37%, var(--paper-alt) 63%); background-size:400% 100%; animation:skeleton-pulse 1.4s ease infinite; border:none;}
  .skeleton-line{background:linear-gradient(90deg, var(--paper-alt) 25%, var(--paper) 37%, var(--paper-alt) 63%); background-size:400% 100%; animation:skeleton-pulse 1.4s ease infinite;}
  @keyframes skeleton-pulse{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

  @media (max-width:860px){
    .related-grid-scroll .related-card{flex:0 0 140px;}
    .related-grid-scroll{gap:10px;}
    .detail-gallery a, .gallery-placeholder{flex-basis:92%;}

    /* Mobil/tablet proje modalı sıra: Galeri → Başlık → En İyi 100 rozeti → Puan+Aksiyon → Künye →
       Açıklama → Kullanılan Ürünler → Diğer Projeler → İlgili Projeler → Şehirdeki Diğer Projeler → Yorumlar → Bilgi
       Kaynağı/Geri Bildirim (bkz. kullanıcı isteği: Yorumlar aşağı taşınıp Geri Bildirim kutusunun
       hemen üstüne alındı; ardından Şehirdeki Diğer Projeler İlgili Projeler'den SONRA gelecek şekilde
       eklendi; ardından #pm-top-rank buraya eklendi — bu satır eklenene kadar bu blokta hiç order
       tanımlı değildi, dolayısıyla varsayılan order:0'a düşüp galeriden bile önce, modalın en üstünde
       çıkıyordu; oysa masaüstünde DOM sırası zaten başlığın hemen altı) — modal-shell.js bu kırılma
       noktasında sol/sağ paneli display:contents yaptığından (bkz. o dosyadaki yorum) tüm bu bölümler
       artık AYNI dikey flex akışının parçası; sıra burada, sırayla artan order değerleriyle verilir.
       .detail-info künye VE açıklamayı TEK blok olarak taşır (zaten aralarında ayrı bir sıra
       gerekmiyor, ikisi de kendi içinde doğru DOM sırasında). #pm-gallery-wrap'ın kendi margin-top'u
       KALDIRILDI — kapatma butonuna karşı üst boşluk artık modal-shell.js#.modal-shell-body'nin
       paylaşılan padding-top'undan (bkz. kullanıcı isteği: X butonu/içerik çakışması, TÜM modallerde)
       geliyor; ikisi birlikte kalsaydı boşluk iki katına çıkardı (gerçek bulgu).
    */
    /* order KESİNLİKLE tam sayı olmalı (CSS <integer> — bkz. gerçek bulgu: bu blokta önceden
       kullanılan 6.5/6.6 gibi ondalıklı değerler geçersiz sayılıp sessizce order:0'a düşüyordu,
       böylece #pm-info-divider/#pm-feedback-card modalın EN ÜSTÜNE, galeriden bile önce zıplıyordu
       — yalnızca hiçbir görsel QA bunu yakalamadığından fark edilmemişti). Aşağıdaki tüm değerler
       bu yüzden ARALIKSIZ tam sayı dizisi olarak yeniden numaralandırıldı. */
    #pm-gallery-wrap{order:1;}
    #pm-title{order:2; margin-top:20px;}
    #pm-top-rank{order:3;}
    .detail-info{order:5;}
    /* GERÇEK BULGU (2026-08-31): #pm-products-section (Kullanılan Ürünler) bu blokta HİÇ order
       tanımlı değildi — yukarıdaki iki uyarının (#pm-top-rank ve ondalıklı order) AYNI tuzağı:
       varsayılan order:0'a düşüp galeriden bile ÖNCE, modalın en üstünde çıkıyordu. Artık
       "Diğer Projeler"in hemen ÜSTÜNDE (kullanıcı isteği: Kullanılan Ürünler, Firmanın Diğer
       Projeleri'nin üzerine alınsın) — masaüstündeki DOM sırasıyla da birebir aynı bağıl konum.
       Kaldırılan #pm-materials-section (Kullanılan Malzemeler) yüzünden ayrıca bir satır gerekmiyor;
       malzemeler artık bu ızgaranın içinde. Alttaki tüm değerler birer artırıldı — aralıksız tam
       sayı dizisi kuralı korunur. */
    /* GERÇEK BULGU (2026-09-02, tablette ölçüldü): order YANLIŞ ELEMANA veriliyordu.
       "Kullanılan Ürünler" artık tek başına bir akış öğesi DEĞİL — #pm-products-pair adlı iki
       sütunlu bir ızgaranın İÇİNDE bir hücre (bkz. project-modal.js#RIGHT_TEMPLATE). Dolayısıyla
       #pm-products-section'a verilen order modal akışını değil O IZGARAYI etkiliyordu; sarmalayıcı
       ise order tanımsız kalıp 0'a düşüyor ve TÜM ikili satır galeriden de başlıktan da ÖNCE,
       popup'ın en üstüne çıkıyordu (ölçüm: ikili satır 168px, galeri 401px, başlık 770px).
       Üstelik ızgara içinde Ürünler order:6, Markalar order tanımsız (0) olduğundan MARKALAR
       sola, ÜRÜNLER sağa geçiyordu — istenenin tersi.
       Düzeltme: order akış öğesi olan SARMALAYICIYA verilir; hücreler DOM sırasında kalır
       (Ürünler 1. sütun, Markalar 2. sütun; mobilde tek sütuna düşünce Ürünler üstte, Markalar
       altta — kullanıcı isteği 2026-09-02 madde 3). */
    #pm-products-pair{order:6;}
    #pm-same-designer-section{order:7;}
    #pm-related-section{order:8;}
    #pm-city-section{order:9;}
    /* Yorumlar — Bilgi Kaynağı & Geri Bildirim ile AYNI gerekçeyle (bkz. kullanıcı isteği) mobil/
       tablette aşağı, Geri Bildirim kutusunun hemen üstüne taşındı; masaüstünde DOM sırası (künye/
       açıklamadan hemen sonra) DEĞİŞMEDİ, yalnızca bu breakpoint'in order değerleri etkilenir.
       #pm-info-divider Yorumlar'ın ÜSTÜNDE kalır (bkz. kullanıcı isteği). */
    #pm-info-divider{order:10;}
    /* Harita — kullanıcı isteği: mobilde de Yorumlar'ın HEMEN ÜSTÜNDE kalsın (masaüstündeki DOM
       sırasıyla aynı bağıl konum). */
    #pm-map-section{order:11;}
    #pm-comments-section{order:12;}
    #pm-feedback-card{order:13;}
    /* Önceki/Sonraki Proje EN SONA alındı (kullanıcı isteği, 2026-09-02 madde 4): tablet ve
       mobilde Harita/Yorumlar/Geri Bildirim bu iki gezinme bağlantısının ÜSTÜNDE olmalı. Eskiden
       order:10 ile onların üstündeydi; ölçüldü (tablet 820px): önceki/sonraki 1780px, harita
       1913px. Masaüstünde DOM sırası ETKİLENMEZ — bu blok yalnızca ≤860px'te geçerli. */
    #pm-prevnext{order:14;}

    /* Puanla/Kaydet/Paylaş artık bu satırda değil, X'in yanında sabit 36px'te (bkz.
       modal-shell.js#injectStyles) — buradaki eski dokunma-hedefi/gizleme kuralları kaldırıldı. */
  }

  /* Mobil galeri oranı — kullanıcı isteği: masaüstünde 2:1 korunur, yalnızca ≤768px'te dikey alanı
     daha iyi kullanan 4:3'e geçilir. 860px bloğundan SONRA tanımlanır ki aynı özgüllükteki
     aspect-ratio kuralı ≤768px genişliklerde (768px de 860px sorgusunu karşıladığından) kaynak
     sırasına göre onu ezsin. */
  @media (max-width:768px){
    .detail-gallery a, .gallery-placeholder{aspect-ratio:4/3;}
  }