/* Panel ile yönetilen proje bileşenleri: tamamlanma çubuğu, kartlar, harita */

/* --- Tamamlanma çubuğu (dikey, alttan dolar) --- */
.ilerleme{position:relative;overflow:hidden;background:#fff;border:2px solid #b0b0b0;flex:0 0 auto}
.ilerleme-dolgu{position:absolute;left:0;right:0;bottom:0;height:var(--ilerleme);background:linear-gradient(0deg,var(--color1,#212529) 0%,#4a5157 100%);transition:height .6s ease}
.ilerleme-yazi{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;transform:rotate(180deg);color:var(--color1,#212529);white-space:nowrap;letter-spacing:1px;font-weight:600}
/* Dolu kısımda beyaz yazı (alttaki koyu yazının dolguyla örtüşen bölümü) */
.ilerleme-yazi-ust{color:#fff;clip-path:inset(0 0 calc(100% - var(--ilerleme)) 0)}

/* Kart (kategori sayfaları, tüm projeler, anasayfa): kapak görselinin altında, proje adının hemen üstünde yatay */
.ilerleme-kart{position:absolute;left:14px;right:14px;bottom:28px;z-index:1;height:26px;border-radius:13px 13px 0 0;border:0;background:rgb(255 255 255 / 82%);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);box-shadow:0 2px 10px rgb(0 0 0 / 25%)}
.ilerleme-kart .ilerleme-dolgu{top:0;right:auto;height:100%;width:var(--ilerleme);border-radius:inherit;background:linear-gradient(90deg,var(--color1,#212529) 0%,#4a5157 100%);transition:width .6s ease}
.ilerleme-kart .ilerleme-yazi{writing-mode:horizontal-tb;transform:none;font-size:12px}
.ilerleme-kart .ilerleme-yazi-ust{clip-path:inset(0 calc(100% - var(--ilerleme)) 0 0)}
@media (max-width:991px){
  .ilerleme-kart{left:8px;right:8px;bottom:24px;height:22px}
  .ilerleme-kart .ilerleme-yazi{font-size:10.5px;letter-spacing:.5px}
}
.prj-img-bos{object-fit:contain;padding:25%;background:#f3f3f3;aspect-ratio:467/675;display:block}

/* Proje detay sayfası: üstteki 2 görselin sağında */
.proje-ust{display:flex;gap:24px;align-items:stretch}
.proje-ust-gorseller{flex:1 1 auto;min-width:0}
.ilerleme-detay{width:64px;border-radius:16px;min-height:260px}
.ilerleme-detay .ilerleme-yazi{font-size:15px;letter-spacing:2px}

/* Görseli olmayan projede ve mobilde yatay çubuk */
@media (max-width:991px){
  .proje-ust{flex-direction:column;gap:30px}
}
.proje-ust-gorselsiz .ilerleme-detay{width:100%;min-height:0;height:44px}
.proje-ust-gorselsiz .ilerleme-detay .ilerleme-dolgu{top:0;right:auto;height:100%;width:var(--ilerleme);transition:width .6s ease}
.proje-ust-gorselsiz .ilerleme-detay .ilerleme-yazi{writing-mode:horizontal-tb;transform:none}
.proje-ust-gorselsiz .ilerleme-detay .ilerleme-yazi-ust{clip-path:inset(0 calc(100% - var(--ilerleme)) 0 0)}
@media (max-width:991px){
  .ilerleme-detay{width:100%;min-height:0;height:44px}
  .ilerleme-detay .ilerleme-dolgu{top:0;right:auto;height:100%;width:var(--ilerleme);transition:width .6s ease}
  .ilerleme-detay .ilerleme-yazi{writing-mode:horizontal-tb;transform:none}
  .ilerleme-detay .ilerleme-yazi-ust{clip-path:inset(0 calc(100% - var(--ilerleme)) 0 0)}
}

/* Harita */
.proje-harita iframe{width:100%;height:450px;border:0;border-radius:14px;box-shadow:0 0 28px rgb(0 0 0 / 21%);display:block}
@media (max-width:991px){.proje-harita iframe{height:320px}}

/* Proje görsel bölümleri (panelden arka plan ve yazı rengi atanır) */
.proje-bolum-baslik{font-family:'Arbutus Slab',serif;font-size:2.6rem;font-weight:400;line-height:1.2;color:inherit;text-align:center;margin:0 0 50px}
@media (max-width:991px){.proje-bolum-baslik{font-size:1.9rem;margin-bottom:30px}}

/* Özelliği olmayan proje: ad + açıklama bölümün ortasında, yazılar sola hizalı.
   Kısa metinlerde de blok ortada kalsın diye genişlik içeriğe göre ayarlanır. */
.proje-metin-orta {
    width: fit-content;
    max-width: min(100%, 640px);
    margin: 0 auto;
    text-align: left;
}
.proje-metin-orta p:last-child { margin-bottom: 0; }