/* ==========================================================================
   VELUXA — ANA SAYFA SİYAH TEMA
   Kapsam: yalnızca #vitrin (3D vitrin) bölümü ve o bölümün üstündeki başlık.
   Sitenin geri kalanı bu dosyadan etkilenmez.

   ► GERİ ALMAK İÇİN: index.html içindeki şu satırı silmek yeterlidir:
       <link rel="stylesheet" href="assets/css/anasayfa-siyah.css">
     Silindiğinde önceki kırık beyaz ana sayfa aynen geri gelir; style.css'e
     hiç dokunulmadı.
   ========================================================================== */

:root{
  /* Logodaki metalik altın tonları */
  --altin-acik:#F6E9BC;
  --altin:#D4AF37;
  --altin-koyu:#8A6A16;
  --altin-golge:#4A3A0E;
  --anasayfa-siyah:#070707;
}

/* ---------- 1) Bölüm zemini ---------- */
.vitrin{
  background:
    radial-gradient(66% 58% at 36% 46%, #16130C 0%, #0B0A08 52%, var(--anasayfa-siyah) 100%);
  color:#EDE8DE;
}

/* ---------- 2) Üst bar — ana sayfa artık koyu ----------
   .is-light sınıfı yalnızca vitrin bölümünün üstündeyken uygulanıyor. */
.site-header.is-light{
  background:rgba(7,7,7,.9); backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(255,255,255,.08);
}
.site-header.is-light .nav a{ color:rgba(255,255,255,.88); }
.site-header.is-light .nav a::after{ background:var(--altin); }
.site-header.is-light .nav-toggle span{ background:#fff; }
.site-header.is-light .header__cta .btn--accent{ background:var(--altin); color:#100D06; }
.site-header.is-light .header__cta .btn--accent:hover{ background:var(--altin-acik); }

/* ---------- 3) Sağdaki metin ---------- */
.vitrin .kicker{
  color:var(--altin); opacity:.9;
}
.vitrin__baslik{ color:#F4F1EA; }
.vitrin__baslik em{
  color:var(--altin);
  background-image:linear-gradient(178deg,
    var(--altin-acik) 0%, var(--altin) 32%, var(--altin-koyu) 52%,
    var(--altin-golge) 60%, var(--altin) 74%, var(--altin-acik) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.vitrin__ipucu{
  color:rgba(255,255,255,.45);
  border-top-color:rgba(212,175,55,.28);
}
.vitrin__durum{ color:rgba(255,255,255,.4); }

/* ---------- 4) Butonlar ---------- */
.vitrin .btn--cizgi{ color:#EDE8DE; border-color:rgba(255,255,255,.3); }
.vitrin .btn--cizgi:hover{ background:#EDE8DE; color:#100D06; border-color:#EDE8DE; }

.vitrin .btn--accent{
  border:0; color:#141005;
  background-image:linear-gradient(178deg,
    var(--altin-acik) 0%, var(--altin) 40%, #B8912A 56%, var(--altin-acik) 100%);
}
.vitrin .btn--accent:hover{ filter:brightness(1.08); }

/* ---------- 5) Model alanları ---------- */
.proje__sahne,
.proje-ekran__sahne{
  background:radial-gradient(56% 52% at 50% 50%,
    rgba(212,175,55,.13) 0%, rgba(212,175,55,0) 70%);
}
.proje__sahne::after,
.proje-ekran__sahne::after{                  /* yükleme halkası */
  border-color:rgba(255,255,255,.15);
  border-top-color:rgba(212,175,55,.85);
}

/* ---------- 5b) Proje adları ve inceleme ekranı ---------- */
.proje__alt{ border-top-color:rgba(212,175,55,.25); }
.proje__ad{ color:#F4F1EA; }
.proje__ad em{
  color:var(--altin);
  background-image:linear-gradient(178deg,
    var(--altin-acik) 0%, var(--altin) 32%, var(--altin-koyu) 52%,
    var(--altin-golge) 60%, var(--altin) 74%, var(--altin-acik) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.proje__tur{ color:rgba(255,255,255,.45); }

.proje-ekran__kutu{ background:#0B0A08; box-shadow:0 40px 90px rgba(0,0,0,.7); }
.proje-ekran__bilgi{
  background:#0B0A08; border-left-color:rgba(212,175,55,.22); color:#EDE8DE;
}
.proje-ekran__bilgi .kicker{ color:var(--altin); opacity:.9; }
.proje-ekran__ad{ color:#F4F1EA; }
.proje-ekran__ozet,
.proje-ekran__liste li{ color:rgba(255,255,255,.62); }
.proje-ekran__altbaslik{ color:#F4F1EA; }
.proje-ekran__liste li::before{ background:var(--altin); }
.proje-ekran__ipucu{
  color:rgba(255,255,255,.4); border-top-color:rgba(212,175,55,.22);
}
.proje-ekran__kapat{ color:rgba(255,255,255,.55); }
.proje-ekran__kapat:hover{ color:#fff; }

.proje-ekran .btn--cizgi{ color:#EDE8DE; border-color:rgba(255,255,255,.3); }
.proje-ekran .btn--cizgi:hover{ background:#EDE8DE; color:#100D06; border-color:#EDE8DE; }
.proje-ekran .btn--accent{
  border:0; color:#141005;
  background-image:linear-gradient(178deg,
    var(--altin-acik) 0%, var(--altin) 40%, #B8912A 56%, var(--altin-acik) 100%);
}
.proje-ekran .btn--accent:hover{ filter:brightness(1.08); }

/* ==========================================================================
   6) FİTİLLER — sağ tarafa, metnin arkasına düşen ince altın çizgiler

   Her çizgi tek bir linear-gradient katmanı. Katman sırası aynı sırayla
   background-size ve background-position ile eşleşir:
     · "to top"    = alttan başlar, yukarı doğru söner
     · "to bottom" = üstten başlar, aşağı doğru söner
   Metin bloğu dikeyde ortada durduğu için, metin hizasına denk gelen
   çizgiler kısa tutuldu (%26'yı geçmiyor); uzun/tam boy olanlar yalnızca
   metnin solundaki boşlukta.
   ========================================================================== */
.vitrin__ic{ position:relative; z-index:1; }   /* metin her hâlükârda çizgilerin üstünde */

.vitrin::before{
  content:""; position:absolute; top:0; bottom:0; right:0; z-index:0;
  width:min(70rem, 56%); pointer-events:none;
  background-repeat:no-repeat;

  background-image:
    linear-gradient(to top,    rgba(212,175,55,.50), rgba(212,175,55,0)),  /* 1 · alttan, tam boy */
    linear-gradient(to bottom, rgba(246,233,188,.34), rgba(246,233,188,0)),/* 2 · üstten, uzun    */
    linear-gradient(to top,    rgba(212,175,55,.34), rgba(212,175,55,0)),  /* 3 · alttan, yarım   */
    linear-gradient(to bottom, rgba(212,175,55,.42), rgba(212,175,55,0)),  /* 4 · üstten, kalın   */
    linear-gradient(to bottom, rgba(246,233,188,.30), rgba(246,233,188,0)),/* 5 · üstten, kısa    */
    linear-gradient(to top,    rgba(212,175,55,.34), rgba(212,175,55,0)),  /* 6 · alttan, kısa    */
    linear-gradient(to bottom, rgba(212,175,55,.40), rgba(212,175,55,0)),  /* 7 · üstten, kalın   */
    linear-gradient(to top,    rgba(246,233,188,.28), rgba(246,233,188,0));/* 8 · alttan, kısa    */

  background-size:
    3px 40%,
    5px 58%,
    4px 40%,
    3px 28%,
    5px 37%,
    3px 21%,
    6px 13%,
    4px 70%;

  background-position:
    8%  bottom,
    15% top,
    24% bottom,
    33% top,
    57% top,
    67% bottom,
    79% top,
    91% bottom;
}

/* Dar ekranda metin tam genişliğe yayıldığı için fitiller kapatılır */
@media (max-width:900px){
  .vitrin::before{ display:none; }
}