/* =============================================================
   TÜM PROJELER — yatay şerit sayfası
   style.css'in üstüne biner: değişkenler, .ust, .dip, .etiket oradan gelir.
   ============================================================= */

.pr-sayfa{ background: var(--lacivert); }
[hidden]{ display:none !important }

/* ---------- giriş başlığı ---------- */
.pr-bas{
  min-height: 62vh;
  padding: clamp(120px,14vh,190px) var(--kenar) clamp(40px,6vh,80px);
  display:grid; align-content:center; gap:clamp(14px,1.6vw,22px);
  max-width: 980px;
}
.pr-geri{
  justify-self:start; display:inline-flex; align-items:center; gap:.7em;
  font-family: var(--sans); font-size:clamp(11px,1vw,12.5px);
  letter-spacing:.2em; text-transform:uppercase; color:var(--sis);
  padding:10px 0; transition:color .4s var(--gecis), gap .4s var(--gecis);
}
.pr-geri:hover{ color:var(--pirinc-ac); gap:1.1em; }
.pr-geri span:first-child{ transition:transform .4s var(--gecis) }
.pr-geri:hover span:first-child{ transform:translateX(-4px) }

.pr-bas h1{
  font-family: var(--serif); font-weight:300; line-height:1.02;
  font-size: clamp(46px,8.4vw,112px); letter-spacing:-.015em;
  color: var(--kar);
}
.pr-bas h1 em{ font-style:italic; color:var(--pirinc); }
.pr-lede{
  font-family: var(--sans); font-weight:300; color:var(--sis);
  font-size: clamp(14.5px,1.35vw,17px); line-height:1.75; max-width:56ch;
}
.pr-sayi{
  font-family: var(--sans); font-size:clamp(11px,1vw,12.5px);
  letter-spacing:.2em; text-transform:uppercase; color:var(--sis-2);
}
.pr-sayi b{ color:var(--pirinc); font-weight:400; font-size:1.3em; letter-spacing:.06em; }

/* ---------- sabitlenmiş yatay sahne ---------- */
.pr-serit-sar{ position:relative; }
.pr-sahne{
  position:sticky; top:0; height:100vh; height:100svh;
  display:grid; align-content:center; gap:clamp(18px,2.4vh,30px);
  overflow:hidden;
}
.pr-serit{
  display:flex; align-items:center; gap:clamp(20px,2.4vw,40px);
  padding-inline: var(--kenar);
  will-change:transform;
}

/* ---------- kart ---------- */
.pr-kart{
  flex:0 0 auto;
  width: clamp(280px, 27vw, 400px);
  perspective: 1400px;
  --d:0; --dk:0;
  /* 1 = kart tam merkezde (odakta), 0 = kenarda */
  --odak: calc(1 - var(--dk,0));
}
.pr-kart-dg{
  display:block; width:100%; text-align:left; cursor:pointer;
  background:none; border:0; padding:0; color:inherit; font:inherit;
  /* Odaktaki kart biraz kalkıp büyüyor — "öne çıkma" hissi. */
  transform:
    rotateY(calc(var(--d) * -9deg))
    scale(calc(1 - var(--dk) * .07 + var(--odak) * .028))
    translateY(calc(var(--dk) * 14px + var(--odak) * -9px));
  opacity: calc(1 - var(--dk) * .46);
  transform-style:preserve-3d;
  transition: opacity .35s linear;
}
.pr-kart-gor{
  display:block; position:relative; overflow:hidden;
  border-radius:4px; aspect-ratio:4/5;
  border:1px solid rgba(255,255,255,.08);
  background: var(--lacivert2);
  box-shadow: 0 30px 70px rgba(2,5,12,.55);
}
.pr-kart-gor img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  /* Taşma payı kaymadan BÜYÜK olmalı; yoksa kartın zemini kenarda şerit olur.
     En dar kart 280px (clamp alt sınırı):
       pay   = %8 x 280 = 22.4px
       kayma = 16px x 1.16 (ölçek önce uygulanır) = 18.6px       22.4 > 18.6 ✓
     Ölçeği düşürürsen veya kaymayı artırırsan bu eşitsizliği yeniden kontrol et. */
  transform: scale(1.16) translateX(calc(var(--d) * 16px));
  transition: transform .9s var(--gecis), filter .6s var(--gecis);
  /* Renk odakla açılıyor: merkezde ~saturate(1.02) brightness(.99),
     kenarda ~saturate(.8) brightness(.79). Fark bilerek küçük. */
  filter:
    saturate(calc(.8 + var(--odak,0) * .22))
    brightness(calc(.79 + var(--odak,0) * .2));
}
.pr-kart-dg:hover .pr-kart-gor img{ transform:scale(1.22); filter:saturate(1.05) brightness(1); }
.pr-kart-gor::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(180deg, rgba(4,7,15,0) 38%, rgba(4,7,15,.82) 100%);
}
.pr-kart-no{
  position:absolute; top:14px; left:16px; z-index:2;
  font-family:var(--sans); font-size:11px; letter-spacing:.24em;
  color:var(--pirinc); opacity:.9;
}
.pr-kart-teslim{
  position:absolute; top:12px; right:14px; z-index:2;
  font-family:var(--sans); font-size:10.5px; letter-spacing:.18em;
  padding:5px 10px; border-radius:100px;
  border:1px solid rgba(201,161,94,.35); color:var(--pirinc-ac);
  background:rgba(6,12,27,.55); backdrop-filter:blur(6px);
}
.pr-kart-alt{ display:grid; gap:7px; padding-top:clamp(14px,1.6vw,20px); }
.pr-kart-ad{
  font-family:var(--serif); font-weight:300; line-height:1.06;
  font-size:clamp(25px,2.5vw,34px); color:var(--kar);
}
.pr-kart-konum{
  display:flex; align-items:center; gap:.55em;
  font-family:var(--sans); font-size:clamp(11px,1vw,12.5px);
  letter-spacing:.14em; text-transform:uppercase; color:var(--pirinc);
}
.pr-kart-konum svg{ width:13px; height:13px; flex:0 0 auto; opacity:.85 }
.pr-kart-ozet{
  font-family:var(--sans); font-weight:300; font-size:13px; line-height:1.65;
  color:var(--sis-2);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.pr-kart-ac{
  display:inline-flex; align-items:center; gap:.6em; margin-top:4px;
  font-family:var(--sans); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--sis); transition:color .4s var(--gecis), gap .4s var(--gecis);
}
.pr-kart-ac::after{ content:'→' }
.pr-kart-dg:hover .pr-kart-ac{ color:var(--pirinc-ac); gap:1em; }
.pr-kart-dg:focus-visible{ outline:2px solid var(--pirinc); outline-offset:8px; border-radius:6px }

/* ---------- ilerleme çubuğu + ipucu ---------- */
.pr-bar{
  height:1px; margin-inline:var(--kenar);
  background:rgba(255,255,255,.1); position:relative;
}
.pr-bar i{
  position:absolute; inset:0 auto 0 0; width:0;
  background:linear-gradient(90deg,var(--pirinc),var(--pirinc-ac));
}
.pr-ipucu{
  margin-inline:var(--kenar);
  font-family:var(--sans); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--sis-2);
}

/* ---------- detay paneli ---------- */
.pr-perde{
  position:fixed; inset:0; z-index:110; pointer-events:none;
  background:rgba(2,4,10,.62); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .55s var(--gecis);
}
.pr-perde.gorunur{ opacity:1; pointer-events:auto }

.pr-detay{
  position:fixed; top:0; right:0; z-index:120;
  width:min(660px, 100vw); height:100vh; height:100svh;
  overflow-y:auto; overscroll-behavior:contain;
  background:linear-gradient(170deg, var(--lacivert2), var(--lacivert));
  border-left:1px solid rgba(201,161,94,.18);
  box-shadow:-40px 0 90px rgba(2,4,10,.6);
  transform:translateX(102%);
  transition:transform .72s cubic-bezier(.45,.05,.25,1);
  visibility:hidden;
}
.pr-detay.acik{ transform:none; visibility:visible }
.pr-kapat{
  position:sticky; top:0; margin-left:auto; z-index:5;
  display:grid; place-items:center; width:52px; height:52px;
  background:rgba(6,12,27,.75); backdrop-filter:blur(10px);
  border:0; border-bottom-left-radius:4px; cursor:pointer;
  color:var(--sis); transition:color .35s var(--gecis), background .35s;
}
.pr-kapat:hover{ color:var(--pirinc-ac); background:rgba(14,28,67,.9) }
.pr-kapat svg{ width:19px; height:19px }

.pr-detay-ic{ padding:0 clamp(24px,3.4vw,52px) clamp(50px,7vh,90px); }

/* detay: kapak */
.pr-kapak{
  position:relative; margin:-52px calc(clamp(24px,3.4vw,52px) * -1) clamp(26px,3vw,38px);
  aspect-ratio:16/10; overflow:hidden; background:var(--lacivert3);
}
.pr-kapak img{
  width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .6s var(--gecis);
}
.pr-kapak img.yuklu{ opacity:1 }
.pr-kapak::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(4,7,15,.35) 0%, rgba(4,7,15,0) 30%, rgba(11,22,49,.95) 100%);
}
.pr-kapak-yazi{
  position:absolute; left:clamp(24px,3.4vw,52px); right:clamp(24px,3.4vw,52px); bottom:clamp(18px,2.2vw,28px);
  z-index:2; display:grid; gap:8px;
}
.pr-kapak-yazi h2{
  font-family:var(--serif); font-weight:300; line-height:1.02;
  font-size:clamp(32px,4.4vw,56px); color:var(--kar);
}
.pr-kapak-konum{
  display:flex; align-items:center; gap:.55em; flex-wrap:wrap;
  font-family:var(--sans); font-size:clamp(11px,1.05vw,12.5px);
  letter-spacing:.18em; text-transform:uppercase; color:var(--pirinc);
}
.pr-kapak-konum svg{ width:14px; height:14px; opacity:.9 }

/* detay: küçük görseller */
.pr-galeri{
  display:flex; gap:9px; margin-bottom:clamp(24px,3vw,34px);
  overflow-x:auto; scrollbar-width:none; padding-bottom:2px;
}
.pr-galeri::-webkit-scrollbar{ display:none }
.pr-galeri button{
  flex:0 0 auto; width:86px; aspect-ratio:4/3; padding:0; cursor:pointer;
  border:1px solid rgba(255,255,255,.1); border-radius:3px; overflow:hidden;
  background:var(--lacivert3); opacity:.5;
  transition:opacity .4s var(--gecis), border-color .4s var(--gecis);
}
.pr-galeri button img{ width:100%; height:100%; object-fit:cover; display:block }
.pr-galeri button:hover{ opacity:.85 }
.pr-galeri button[aria-current="true"]{ opacity:1; border-color:var(--pirinc) }

/* detay: metin ve bölümler */
.pr-metin{
  font-family:var(--sans); font-weight:300; line-height:1.85;
  font-size:clamp(14px,1.28vw,16px); color:var(--sis);
  margin-bottom:clamp(28px,3.4vw,42px); max-width:62ch;
}
.pr-blok{ margin-bottom:clamp(28px,3.4vw,42px) }
.pr-blok > h3{
  font-family:var(--sans); font-weight:400; font-size:11px;
  letter-spacing:.24em; text-transform:uppercase; color:var(--pirinc);
  display:flex; align-items:center; gap:.9em; margin-bottom:clamp(14px,1.6vw,20px);
}
.pr-blok > h3::after{ content:''; flex:1; height:1px; background:rgba(201,161,94,.22) }

/* künye */
.pr-kunye{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:1px; background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.07);
}
.pr-kunye > div{ background:var(--lacivert); padding:clamp(13px,1.5vw,18px) clamp(14px,1.6vw,20px); display:grid; gap:5px }
.pr-kunye dt{
  font-family:var(--sans); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--sis-2);
}
.pr-kunye dd{
  font-family:var(--serif); font-size:clamp(17px,1.7vw,21px); font-weight:300;
  line-height:1.2; color:var(--kar);
}

/* olanaklar */
.pr-olanak{ display:flex; flex-wrap:wrap; gap:8px; list-style:none }
.pr-olanak li{
  font-family:var(--sans); font-weight:300; font-size:12.5px;
  padding:8px 14px; border-radius:100px;
  border:1px solid rgba(255,255,255,.12); color:var(--sis);
  background:rgba(255,255,255,.025);
  transition:border-color .4s var(--gecis), color .4s var(--gecis);
}
.pr-olanak li:hover{ border-color:rgba(201,161,94,.45); color:var(--pirinc-ac) }

/* mesafeler */
.pr-mesafe{ list-style:none; display:grid; gap:0 }
.pr-mesafe li{
  display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:14px;
  padding:12px 0; border-bottom:1px solid rgba(255,255,255,.07);
}
.pr-mesafe li:last-child{ border-bottom:0 }
.pr-mesafe .ad{
  font-family:var(--sans); font-weight:300; font-size:13.5px; color:var(--sis);
  display:flex; align-items:center; gap:.7em;
}
.pr-mesafe .ad svg{ width:15px; height:15px; color:var(--pirinc); opacity:.75; flex:0 0 auto }
.pr-mesafe .km{
  font-family:var(--serif); font-size:clamp(17px,1.6vw,20px); font-weight:300; color:var(--kar);
  font-variant-numeric:lining-nums;
}
.pr-mesafe .km i{ font-style:normal; font-size:.6em; color:var(--sis-2); margin-left:.3em; letter-spacing:.1em }

/* kaynak */
.pr-kaynak{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  font-family:var(--sans); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--sis-2);
}
.pr-kaynak a{
  display:inline-flex; align-items:center; gap:.5em; color:var(--pirinc);
  border-bottom:1px solid rgba(201,161,94,.3); padding-bottom:2px;
  transition:color .35s var(--gecis), border-color .35s var(--gecis);
}
.pr-kaynak a:hover{ color:var(--pirinc-ac); border-color:var(--pirinc-ac) }

.pr-eylem{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(28px,3.4vw,40px) }

/* detay içi sıralı açılma */
.pr-detay-ic > *{
  opacity:0; transform:translateY(16px);
  transition:opacity .6s var(--gecis), transform .6s var(--gecis);
  transition-delay: calc(var(--s,0) * 70ms + 120ms);
}
.pr-detay.acik .pr-detay-ic > *{ opacity:1; transform:none }
.pr-detay-ic > .pr-kapak{ transform:none; transition:opacity .7s var(--gecis) }

/* ---------- açık tema ---------- */
:root[data-tema="acik"] .pr-sayfa{ background:var(--kar) }
:root[data-tema="acik"] .pr-bas h1,
:root[data-tema="acik"] .pr-kart-ad,
:root[data-tema="acik"] .pr-kunye dd,
:root[data-tema="acik"] .pr-mesafe .km{ color:var(--krem-yazi) }
:root[data-tema="acik"] .pr-lede,
:root[data-tema="acik"] .pr-metin,
:root[data-tema="acik"] .pr-geri,
:root[data-tema="acik"] .pr-olanak li,
:root[data-tema="acik"] .pr-mesafe .ad{ color:var(--krem-sr) }
:root[data-tema="acik"] .pr-kart-ozet,
:root[data-tema="acik"] .pr-ipucu,
:root[data-tema="acik"] .pr-sayi,
:root[data-tema="acik"] .pr-kunye dt{ color:#7B8296 }
:root[data-tema="acik"] .pr-kart-gor{
  border-color:rgba(19,28,46,.1); background:var(--krem-2);
  box-shadow:0 26px 56px rgba(19,28,46,.14);
}
:root[data-tema="acik"] .pr-kart-gor img{ filter:saturate(1) brightness(1) }
:root[data-tema="acik"] .pr-kart-dg{ opacity:1 }
:root[data-tema="acik"] .pr-kart-dg{ filter: saturate(calc(1 - var(--dk) * .55)) }
:root[data-tema="acik"] .pr-kart-teslim{ background:rgba(255,255,255,.8); color:#8A6B2E; border-color:rgba(154,116,51,.35) }
:root[data-tema="acik"] .pr-bar{ background:rgba(19,28,46,.12) }
:root[data-tema="acik"] .pr-detay{
  background:linear-gradient(170deg,#FFFFFF,#F7F4ED);
  border-left-color:rgba(19,28,46,.1);
  box-shadow:-40px 0 90px rgba(19,28,46,.18);
}
:root[data-tema="acik"] .pr-detay .pr-kapak-yazi h2{ color:#FFFFFF }
:root[data-tema="acik"] .pr-kapat{ background:rgba(255,255,255,.85); color:var(--krem-sr) }
:root[data-tema="acik"] .pr-kunye{ background:rgba(19,28,46,.1); border-color:rgba(19,28,46,.1) }
:root[data-tema="acik"] .pr-kunye > div{ background:#FFFFFF }
:root[data-tema="acik"] .pr-olanak li{ border-color:rgba(19,28,46,.14); background:rgba(19,28,46,.02) }
:root[data-tema="acik"] .pr-mesafe li{ border-bottom-color:rgba(19,28,46,.1) }
:root[data-tema="acik"] .pr-galeri button{ border-color:rgba(19,28,46,.12); background:var(--krem-2) }
:root[data-tema="acik"] .pr-perde{ background:rgba(19,28,46,.4) }

/* ---------- dar ekran: şerit dikeye döner ---------- */
/* Telefonda da masaüstündeki gibi: sayfayı aşağı kaydırdıkça kartlar yana
   kayar. Eskiden burada tek sütunlu dikey bir listeye düşüyordu — sayfanın
   bütün fikri olan yatay akış telefonda hiç görünmüyordu. */
@media (max-width: 760px){
  .pr-serit{ gap:18px }
  .pr-kart{ width:74vw; perspective:1100px }
  /* Dar ekranda komşu kartın --d'si hemen uca dayanıyor; masaüstü
     katsayılarıyla fazla sönük ve fazla eğik kalıyor. */
  .pr-kart-dg{
    transform:
      rotateY(calc(var(--d) * -6deg))
      scale(calc(1 - var(--dk) * .05 + var(--odak) * .02))
      translateY(calc(var(--dk) * 9px + var(--odak) * -6px));
  }
  .pr-kart-gor{ aspect-ratio:4/5 }
  .pr-ipucu{ display:none }
  .pr-detay{ width:100vw }
  .pr-kapak{ aspect-ratio:3/2 }
}

@media (prefers-reduced-motion: reduce){
  .pr-kart-dg, .pr-kart-gor img, .pr-detay, .pr-detay-ic > *{ transition:none !important }
}