/* Proje detay sayfası — vitrinle aynı dil: açık zemin, Inter Tight + Oswald.
   İçerik gerçek bir destede durur: aktif kart solda tam boyda, sonrakiler sağa
   doğru küçülüp eğilerek üst üste dizilir. */

.proje-shell {
  min-height: 100vh;
  background:
    radial-gradient(circle at 88% 7%, var(--home-accent-soft), transparent 26rem),
    var(--home-bg);
}

.proje-site-header { border-bottom: 1px solid var(--home-border); }

.proje-main {
  width: min(1180px, calc(100% - 64px));
  margin: 0 auto;
  padding: clamp(26px, 3.5vw, 44px) 0 clamp(70px, 9vw, 116px);
}

.proje-back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--home-muted);
  text-decoration: none;
  font-family: Oswald, sans-serif;
  font-size: 9px;
  letter-spacing: .16em;
}

.proje-back i { font-style: normal; transition: transform .2s ease; }
.proje-back:hover { color: var(--home-text); }
.proje-back:hover i { transform: translateX(-3px); }

/* ── Başlık bloğu ───────────────────────────────────────── */

.proje-bas { max-width: 760px; margin: clamp(24px, 3vw, 38px) 0 0; }

.proje-kicker {
  margin: 0 0 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--proje-accent, var(--home-accent));
  font-family: Oswald, sans-serif;
  font-size: 9px;
  letter-spacing: .15em;
}

.proje-kicker em { color: var(--home-soft); font-style: normal; }

.proje-title {
  margin: 0;
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: clamp(32px, 4.4vw, 52px);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.05em;
  text-wrap: balance;
}

.proje-desc {
  max-width: 60ch;
  margin: 18px 0 0;
  color: var(--home-muted);
  font-size: 14px;
  line-height: 1.72;
}

/* ── Deste başlığı ──────────────────────────────────────── */

.deste-bolum { margin: clamp(34px, 4vw, 52px) 0 0; }

.deste-baslik {
  margin: 0 0 22px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--home-border);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.deste-baslik h2 {
  margin: 0;
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: clamp(19px, 2.2vw, 25px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.035em;
}

.deste-gezinme { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }

.deste-gezinme span {
  margin-right: 4px;
  color: var(--home-soft);
  font-family: Oswald, sans-serif;
  font-size: 9px;
  letter-spacing: .13em;
  font-variant-numeric: tabular-nums;
}

.deste-gezinme button {
  width: 38px;
  height: 38px;
  border: 1px solid var(--home-border);
  border-radius: 50%;
  background: var(--home-surface);
  color: var(--home-text);
  cursor: pointer;
  font-size: 15px;
  display: grid;
  place-items: center;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
}

.deste-gezinme button:hover:not(:disabled) { border-color: var(--home-text); background: var(--home-text); color: var(--home-bg); }
.deste-gezinme button:disabled { opacity: .3; cursor: default; }

/* ── Deste sahnesi ──────────────────────────────────────── */

/* Sahne konteyner sınırını aşar: deste ekranın sağına kadar uzanır,
   ilk kart yine de sayfa hizasında başlar. */
.deste {
  position: relative;
  height: 548px;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-left: max(32px, calc(50vw - 590px));
  overflow: hidden;
}

.deste:focus-visible { outline: 3px solid var(--home-accent); outline-offset: 8px; border-radius: 24px; }

.deste-kart {
  position: absolute;
  top: 8px;
  left: max(32px, calc(50vw - 590px));
  width: var(--kart-genislik, 412px);
  height: 520px;
  padding: 28px;
  overflow: hidden;
  border: 1px solid var(--home-border);
  border-radius: 24px;
  background: var(--home-surface);
  box-shadow: 0 18px 44px -18px rgba(10, 12, 15, .18);
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Ölçek sol kenardan büyüsün ki deste hizası bozulmasın. */
  transform-origin: left center;
  transition: transform .62s cubic-bezier(.34, 1.36, .64, 1), opacity .38s ease, box-shadow .4s ease, filter .38s ease;
  touch-action: pan-y;
}

/* Deste sıralaması: aktif solda tam boyda, sonrakiler sağa doğru küçülür.
   Kart genişlikleri görsel oranına göre değiştiği için yatay konumu JS hesaplar;
   burada yalnız derinlik katmanı (z-index, saydamlık, bulanıklık) tanımlıdır. */
.deste-kart.is-aktif { z-index: 50; opacity: 1; box-shadow: 0 30px 70px -22px rgba(10, 12, 15, .26); }
.deste-kart.is-sonraki-1 { z-index: 40; opacity: 1; cursor: pointer; }
.deste-kart.is-sonraki-2 { z-index: 30; opacity: .82; filter: blur(1px); cursor: pointer; }
.deste-kart.is-sonraki-3 { z-index: 20; opacity: .55; filter: blur(2.5px); cursor: pointer; }
.deste-kart.is-sonraki-4 { z-index: 10; opacity: .3; filter: blur(4px); }
.deste-kart.is-onceki { z-index: 5; opacity: 0; pointer-events: none; }
.deste-kart.is-gizli { z-index: 0; opacity: 0; pointer-events: none; }

/* Sıradaki kartlar siluet olarak durur; içerikleri tıklanamaz. */
.deste-kart:not(.is-aktif) .deste-govde { pointer-events: none; }
.deste-kart.is-sonraki-1:hover,
.deste-kart.is-sonraki-2:hover,
.deste-kart.is-sonraki-3:hover { opacity: 1; filter: none; }

/* Sürükleme sırasında yay etkisi kapanır, kart parmağı birebir izler. */
.deste.is-surukleniyor .deste-kart { transition: none; }
.deste.is-surukleniyor { cursor: grabbing; }
.deste-kart.is-aktif { cursor: grab; }

.deste-etiket {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--home-soft);
  font-family: Oswald, sans-serif;
  font-size: 8px;
  letter-spacing: .16em;
}

.deste-etiket::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--proje-accent, var(--home-accent));
}

.deste-kart h3 {
  margin: 0;
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 25px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.04em;
  text-wrap: balance;
}

/* Uzun içerik kart içinde kaydırılır; alt kenarda yumuşak bir kesim kalır. */
.deste-govde {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
}

.deste-govde::-webkit-scrollbar { display: none; }
.deste-metin { margin: 0; color: var(--home-muted); font-size: 14px; line-height: 1.78; }

/* ── 1. Tanıtım kartı ───────────────────────────────────── */

.tanitim-kapak {
  height: 132px;
  flex: 0 0 auto;
  border-radius: 16px;
  background: var(--home-accent);
  display: grid;
  place-items: center;
}

.tanitim-kapak span {
  color: #fff;
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -.05em;
  opacity: .92;
}

.deste-haplar { display: flex; flex-wrap: wrap; gap: 6px; }

.deste-haplar span {
  padding: 7px 11px;
  border: 1px solid var(--home-border);
  border-radius: 999px;
  background: var(--home-control);
  color: var(--home-muted);
  font-size: 11px;
}

/* ── 2. Kapsam kartı ────────────────────────────────────── */

.kapsam-liste { margin: 4px 0 0; padding: 0; list-style: none; display: grid; }

.kapsam-liste li {
  padding: 14px 0;
  border-top: 1px solid var(--home-border);
  display: grid;
  gap: 4px;
}

.kapsam-liste li:first-child { border-top: 0; padding-top: 6px; }
.kapsam-liste strong { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.kapsam-liste span { color: var(--home-muted); font-size: 12.5px; line-height: 1.6; }

/* ── 3. Görsel kartı ────────────────────────────────────── */

.deste-kart.is-gorsel { padding: 0; cursor: zoom-in; }

/* Ekran görüntüsü kırpılmaz; nötr zemin üstünde tamamı görünür. */
.deste-kart.is-gorsel { background: var(--home-control); }

.deste-kart.is-gorsel img {
  position: absolute;
  inset: 18px 18px 88px;
  width: calc(100% - 36px);
  height: calc(100% - 106px);
  object-fit: contain;
}

/* Künye, görselin üstünde buzlu bir panelde durur. */
.gorsel-panel {
  position: absolute;
  right: 20px;
  bottom: 20px;
  left: 20px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 16px;
  background: rgba(255, 255, 255, .58);
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  box-shadow: 0 8px 26px -12px rgba(10, 12, 15, .3), inset 0 1px 0 rgba(255, 255, 255, .7);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

[data-theme="dark"] .gorsel-panel { border-color: rgba(255, 255, 255, .12); background: rgba(20, 21, 26, .62); }

.gorsel-panel h3 { font-size: 15px; letter-spacing: -.02em; }
.gorsel-buyut { color: var(--home-soft); font-family: Oswald, sans-serif; font-size: 8px; letter-spacing: .14em; }

/* Büyütülmüş görsel */
.gorsel-buyutec {
  max-width: min(1180px, 94vw);
  max-height: 92vh;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: transparent;
  overflow: visible;
}

.gorsel-buyutec::backdrop { background: rgba(12, 14, 18, .72); backdrop-filter: blur(8px); }
.gorsel-buyutec img { width: 100%; height: auto; display: block; border-radius: 20px; box-shadow: 0 40px 90px rgba(0, 0, 0, .35); }

.gorsel-buyutec > button {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 40px;
  height: 40px;
  border: 1px solid var(--home-border);
  border-radius: 50%;
  background: var(--home-surface);
  color: var(--home-text);
  font-size: 20px;
  cursor: pointer;
}

/* ── 4. Video kartı ─────────────────────────────────────── */

.video-sahne {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border-radius: 16px;
  background: var(--home-control);
  display: grid;
  place-items: center;
}

.video-sahne video { width: 100%; height: 100%; object-fit: cover; display: block; }

.video-oynat {
  position: absolute;
  width: 62px;
  height: 62px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(10px);
  color: var(--home-text);
  font-size: 18px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform .2s ease;
}

.video-oynat:hover { transform: scale(1.08); }
.deste-kart.is-oynuyor .video-oynat { opacity: 0; pointer-events: none; }

.video-cubuk {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.video-cubuk::before { content: "▶"; color: var(--home-muted); font-size: 9px; }

.video-cubuk i {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: var(--home-control);
  position: relative;
}

.video-cubuk i::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--ilerleme, 0%);
  border-radius: inherit;
  background: var(--proje-accent, var(--home-accent));
}

.video-cubuk span { color: var(--home-soft); font-family: Oswald, sans-serif; font-size: 9px; font-variant-numeric: tabular-nums; }

/* ── 5. Kod kartı ───────────────────────────────────────── */

.kod-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; }
.kod-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--home-border); }
.kod-bar i:nth-child(1) { background: #e06c62; }
.kod-bar i:nth-child(2) { background: #e0b152; }
.kod-bar i:nth-child(3) { background: #63b563; }
.kod-bar span { margin-left: 6px; color: var(--home-muted); font-family: Oswald, sans-serif; font-size: 10px; letter-spacing: .08em; }

.kod-blok {
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: 16px;
  overflow: auto;
  border-radius: 14px;
  background: #0f1117;
  color: #cfe3ff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.7;
  scrollbar-width: none;
}

.kod-blok::-webkit-scrollbar { display: none; }

/* ── 6. Künye kartı ─────────────────────────────────────── */

.deste-kunye { margin: 0; display: grid; gap: 16px; }
.deste-kunye div { display: grid; gap: 4px; }
.deste-kunye dt { color: var(--home-soft); font-family: Oswald, sans-serif; font-size: 8px; letter-spacing: .14em; }
.deste-kunye dd { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.35; }

/* Eylem düğmesi (tanıtım kartında) */
.deste-cta {
  flex: 0 0 auto;
  min-height: 50px;
  padding: 0 20px;
  border-radius: 14px;
  background: var(--home-text);
  color: var(--home-bg);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-family: Oswald, sans-serif;
  font-size: 10px;
  letter-spacing: .15em;
  transition: transform .2s ease;
}

.deste-cta:hover { transform: translateY(-2px); }
.deste-cta i { font-style: normal; }

/* ── Alt gezinme ────────────────────────────────────────── */

.proje-next {
  margin: clamp(30px, 4vw, 48px) 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--home-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.proje-next span { color: var(--home-soft); font-family: Oswald, sans-serif; font-size: 9px; letter-spacing: .14em; }

.proje-next a {
  color: var(--home-text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.02em;
}

.proje-next a i { font-style: normal; color: var(--home-soft); transition: transform .2s ease; }
.proje-next a:hover i { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .deste-kart, .deste-cta { transition: none; }
}

@media (max-width: 1080px) {
  .deste-kart.is-sonraki-1 { transform: translateX(376px) scale(.68) rotate(2.5deg); }
  .deste-kart.is-sonraki-2 { transform: translateX(556px) scale(.68) rotate(1.4deg); }
  .deste-kart.is-sonraki-3 { transform: translateX(736px) scale(.68) rotate(.6deg); }
  .deste-kart.is-sonraki-4 { transform: translateX(916px) scale(.68); }
}

@media (max-width: 720px) {
  .proje-main { width: min(100% - 30px, 1180px); }
  .deste-baslik { align-items: flex-start; flex-direction: column; gap: 14px; }
  .deste { height: 452px; }
  .deste-kart { width: min(84vw, var(--kart-genislik, 340px)); max-width: 84vw; height: 428px; padding: 22px; }
  .deste-kart h3 { font-size: 22px; }
  .deste-kart.is-sonraki-1 { transform: translateX(calc(84vw - 44px)) scale(.7) rotate(2.5deg); }
  .deste-kart.is-sonraki-2,
  .deste-kart.is-sonraki-3,
  .deste-kart.is-sonraki-4 { opacity: 0; pointer-events: none; }
  .proje-next { align-items: flex-start; flex-direction: column; gap: 10px; }
}