/* Tezgâh demosu için eklemeler.
   Şablonun kendi CSS'ine dokunulmuyor; bu dosya ondan SONRA yükleniyor.

   Şablonda dört kart vardı, biz altıya çıkardık. Kaydırma motoru
   (templatemo-629-nexus-script.js) kart sayısını kendisi sayıyor, o
   yüzden JS'e dokunmak gerekmedi. Ama iki şey CSS'te sabit yazılmış ve
   burada uzatılıyor: kaydırma boşluğu ve kartların z sırası. */

/* Kart başına bir ekran boyu: 6 kart = 600vh. Şablonda 400vh yazıyordu,
   öyle kalsaydı son iki kart açılmadan sayfa bitiyordu. */
.scroll-spacer { height: 600vh; }

.zcard[data-card="5"] { z-index: 50; transform: translateY(100%); }
.zcard[data-card="6"] { z-index: 60; transform: translateY(100%); }

/* ---------- kart 5: fiyat ---------- */
.card-fiyat {
  background: var(--titanium);
  color: var(--carbon);
  display: flex;
  align-items: center;
  padding: 0 0 var(--hud-h);
}
.fiyat-ic {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 48px;
}
.fiyat-izgara {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 40px;
  /* Kartlar arası boşluk yok, ortak çizgi var: şablonun görünür ızgara
     dili bunu istiyor, ayrı ayrı duran kutular yabancı kalıyordu. */
  border: 1px solid var(--steel);
}
.fiyat-kart {
  padding: 34px 30px 38px;
  border-right: 1px solid var(--steel);
  background: var(--white);
}
.fiyat-kart:last-child { border-right: 0; }
.fiyat-kart--one { background: var(--carbon); color: var(--titanium); }
.fiyat-kart .mono {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.55;
}
.fiyat-kart h3 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: 14px;
}
.fiyat-tutar {
  font-family: 'JetBrains Mono', monospace;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-top: 8px;
}
.fiyat-tutar span { font-size: 15px; font-weight: 400; opacity: 0.55; margin-left: 4px; }
.fiyat-kart ul { list-style: none; margin-top: 24px; }
.fiyat-kart li {
  font-size: 14.5px;
  line-height: 1.5;
  padding: 11px 0 11px 22px;
  border-top: 1px solid var(--steel);
  position: relative;
}
.fiyat-kart--one li { border-top-color: rgba(255, 255, 255, 0.14); }
.fiyat-kart li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  width: 9px;
  height: 1px;
  background: var(--carbon);
}
.fiyat-kart--one li::before { background: var(--volt); }
.fiyat-not {
  margin-top: 26px;
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.02em;
  opacity: 0.6;
  max-width: 70ch;
}

/* ---------- kart 6: kapanış ---------- */
.card-kapanis {
  background: var(--carbon);
  color: var(--titanium);
  display: flex;
  align-items: center;
  padding: 0 0 var(--hud-h);
}
.kapanis-ic { width: 100%; max-width: 1000px; margin: 0 auto; padding: 0 48px; }
.kapanis-ic .mono {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--volt);
}
.kapanis-ic h2 {
  font-size: clamp(38px, 6vw, 78px);
  font-weight: 700;
  letter-spacing: -0.035em;
  /* Türkçede ğ ve ş alt işaretleri sıkı satırda kırpılıyor. */
  line-height: 1.08;
  margin-top: 18px;
}
.kapanis-ic > p {
  margin-top: 20px;
  max-width: 58ch;
  font-size: 16.5px;
  line-height: 1.7;
  opacity: 0.72;
}
.kapanis-dugmeler { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.kapanis-dugme {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 16px 28px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  transition: background 0.3s var(--ease-silk), color 0.3s var(--ease-silk);
}
.kapanis-dugme:hover { background: rgba(255, 255, 255, 0.08); }
.kapanis-dugme--dolu { background: var(--volt); color: var(--carbon); border-color: var(--volt); }
.kapanis-dugme--dolu:hover { background: var(--titanium); border-color: var(--titanium); }
.kapanis-veri {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 48px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.kapanis-veri > div { padding: 20px 0 0; }
.kapanis-veri .mono { display: block; color: rgba(255, 255, 255, 0.45); font-size: 10.5px; }
.kapanis-veri b { display: block; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin-top: 8px; }

.hud-ad { display: inline-flex; align-items: center; }

@media (max-width: 900px) {
  .fiyat-ic, .kapanis-ic { padding: 0 24px; }
  .fiyat-izgara { grid-template-columns: 1fr; }
  .fiyat-kart { border-right: 0; border-bottom: 1px solid var(--steel); padding: 26px 22px 30px; }
  .fiyat-kart:last-child { border-bottom: 0; }
  /* Telefonda üç paket alt alta gelince kart bir ekrana sığmıyor;
     kaydırma bu kartın içinde açılıyor, sayfanın kendisinde değil. */
  .card-fiyat { align-items: flex-start; overflow-y: auto; padding-top: 40px; }
  .fiyat-kart ul { margin-top: 16px; }
  .fiyat-kart li { padding: 9px 0 9px 20px; }
  .kapanis-veri { grid-template-columns: 1fr 1fr; gap: 4px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  /* Şablon bu modda kartları normal akışa çeviriyor; iki yeni kartın da
     ekran boyu kısıtından çıkması gerekiyor. */
  .card-fiyat, .card-kapanis { padding: 80px 0; min-height: 100vh; }
}

/* ═════════════════════════════════════════════════════════
   MOBİL
   Şablonun Z derinlikli kaydırma motoru telefonda oturmuyor: kartlar
   üst üste biniyor, alttaki kartın yazısı üstten geçiyor, bölümler
   birbirine karışıyor. Sebebi motorun kendi mantığı değil, mobilin
   kaydırma davranışı: momentum kaydırması sırasında ara kareler
   yakalanıyor ve adres çubuğu açılıp kapandıkça 100vh değişiyor, yani
   motorun kart başına saydığı bir ekran boyu sabit kalmıyor.

   Şablonun kendi çözümü zaten var: prefers-reduced-motion açıkken
   kartları normal akışa çeviriyor. Aynı kurallar telefonda da
   uygulanıyor. Masaüstünde katmanlanma aynen duruyor.
   ═════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .scroll-spacer { display: none; }

  .zcard {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 100vh;
    /* !important şart: motor transform ve opacity'yi satır içi stil
       olarak yazıyor, sınıf kuralı onu yenemiyor. */
    transform: none !important;
    opacity: 1 !important;
  }

  .card-macro,
  .matrix-right { min-height: 78vh; }
  .card-fiyat,
  .card-kapanis { min-height: auto; padding: 64px 0; align-items: flex-start; overflow: visible; }

  /* Akordeon dilimleri alt alta dizilince kapalı hâlleri anlamsız
     kalıyordu: telefonda hepsi açık duruyor, dokunmaya gerek yok. */
  .slice .slice-idle { display: none; }
  .slice .slice-reveal { opacity: 1; transform: none; }
  /* Şablonda görsel de gölge de opacity 0 ile duruyor, ikisini hover
     açıyor. Telefonda hover yok, o yüzden dilim boş bir kutu olarak
     kalıyordu. İkisi de açılıyor; görsel ölçeklenmiyor, yoksa kenardan
     taşıyor. */
  /* Görsel object-fit: cover ile kutuya oturuyordu ve panelin üstü
     altı kesiliyordu: ekranın ortasında yarım kalmış satırlar
     görünüyordu. Telefonda dilim akışa çevriliyor, panel tam boy
     duruyor, açıklama altına iniyor. */
  .slice { min-height: 0; background: var(--carbon); display: block; }
  .slice .slice-img {
    opacity: 1;
    transform: none;
    position: relative;
    inset: auto;
    width: 100%;
    /* Dilim paneli masaüstündeki kutusu için uzun çiziliyor (700x1500) ve
       içeriği üst yarısında bitiyor; alt yarı bilerek boş, çünkü orada
       dilimin açıklama yazısı duruyor. Telefonda yazı görselin ALTINA
       indiği için o boşluk işe yaramıyor, ekranda 400 piksellik kara bir
       bant olarak kalıyordu. Üstten kırpılıyor: kaybolan tek şey panelin
       en alt künye satırı. */
    aspect-ratio: 700 / 800;
    height: auto;
    object-fit: cover;
    object-position: top center;
  }
  .slice .slice-shade { display: none; }
  .slice .slice-reveal {
    position: relative;
    inset: auto;
    left: auto;
    right: auto;
    bottom: auto;
    padding: 22px 24px 30px;
  }

  /* Matris sekmeleri: görsel panelin kendi yüksekliği olmalı, yoksa
     ızgara satırı sıfıra iniyor ve panel kırpılıyordu. */
  .card-matrix { display: block; }
  .matrix-left { padding: 56px 24px 24px; }
  .matrix-right { position: relative; height: 62vh; }
  .matrix-tab p { display: block; }

  /* HUD'un yukarı/aşağı okları kart numarasına göre kaydırıyordu;
     akış normale dönünce hedefleri kalmadı. Yüzde göstergesi de
     kart motoruna bağlıydı. */
  .hud-nav,
  .hud-progress { display: none; }
  .hud { justify-content: space-between; }

  /* Kapak: 100vh yerine küçük vh birimi, adres çubuğu açılınca alt
     kısım kesilmesin. */
  .card-hero { min-height: 100svh; }
}

/* Monospace etiketler telefonda 10-11 piksele düşüyordu. Büyük harf ve
   geniş harf aralığı olduğu için o boyda hiç okunmuyor. */
@media (max-width: 900px) {
  .mono,
  .mono-tag,
  .matrix-caption,
  .hud { font-size: 12px; letter-spacing: 0.12em; }
  .fiyat-kart .mono { font-size: 12px; }
  .fiyat-not { font-size: 13px; line-height: 1.75; }
  .kapanis-veri .mono { font-size: 12px; }
}

/* Şablon monospace etiketlerin puntosunu birçok yerde 10-11 piksel
   olarak sabit yazmış; genel .mono kuralı onları yenemiyor. Telefonda
   hepsi tek yerden 12'ye çekiliyor. */
@media (max-width: 900px) {
  .hero-eyebrow,
  .hero-scroll-hint,
  .node-box-tag,
  .node-stat,
  .macro-caption .mono,
  .fold-head .mono,
  .slice-reveal .mono,
  .slice-num,
  .tab-num,
  .hud,
  .hud-credit,
  .kapanis-ic .mono,
  .matrix-left .mono-tag { font-size: 12px; }
}

/* Dilimler akışa çevrilince kapsayıcılar hâlâ masaüstündeki sabit
   yüksekliği taşıyordu ve panellerin altı kırpılıyordu. */
@media (max-width: 900px) {
  .card-fold { height: auto; min-height: 0; display: block; padding-bottom: 0; }
  .accordion { height: auto; flex-direction: column; margin-top: 0; }
  .slice { overflow: visible; flex: 0 0 auto; border-right: 0; }
  .fold-head { padding: 56px 24px 20px; }
}

/* ═════════════════════════════════════════════════════════
   PANELLER FOTOĞRAF DEĞİL, YAZI

   Şablon dört görseli de `object-fit: cover` ile kutuya yaydırıyor ve
   üstlerine başlık, nişangâh, istatistik kutusu bindiriyor. Şablonun
   kendi görselleri fotoğraftı: kırpılınca bir şey kaybolmuyor, üstüne
   yazı binince de zaten öyle tasarlanmış. Bizim görsellerimiz ürünün
   ekranları, yani her pikseli yazı.

   Ölçüldü (1440x900 masaüstü / 390x844 telefon):
     nexus-tab-*     %43 / %58 kırpılıyordu
     nexus-macro     %10 / %67
     nexus-core vb.  %22 /  %0
   Sekme panelinde "Bütün işler tek panoda" başlığı "ün işler tek
   panoda", iş emri numarası sütunu ile durum sütunu tamamen dışarıda
   kalıyordu.

   İki taraflı düzeltildi:
   1) Görseller kutularının oranında yeniden üretildi (paneller.html).
   2) Burada `contain`e çevrildi, yani oran ne olursa olsun bir daha
      hiçbir ekran boyunda kırpılamaz. Zemin panelin kendi rengi
      (--carbon, #0D0E15) olduğu için artan yer görünmüyor.
   ═════════════════════════════════════════════════════════ */

.matrix-right { background: var(--carbon); }
.matrix-img {
  object-fit: contain;
  /* Panel kenara yapışmasın; sağdaki yarı bir sahne gibi dursun. */
  padding: 28px 28px calc(var(--hud-h) + 28px);
}

/* Soldan sağa koyulaşan perde panelin ilk sütununun (iş emri numarası)
   üstüne düşüyordu. Arkada fotoğraf varken kontrast veriyordu, panelin
   üstünde okunurluğu düşürüyor. */
.matrix-img-shade { display: none; }

/* Kapak altı panel de kırpılmasın. 1440x900'de kutu ile görsel oranı
   birebir aynı, ama 16:9 ve 21:9 ekranlarda ayrışıyor; `contain` her
   oranda güvende tutuyor. */
.macro-img { object-fit: contain; }

/* Yatay nişangâh çizgisi ekranın %40'ından geçiyor ve orada bir iş emri
   satırı var: "Flanş, 40 adet" üstü çizili görünüyor, yani iptal edilmiş
   bir iş gibi okunuyor. Şablonda arkada fotoğraf vardı, çizgi bir şeyin
   üstünü çizmiyordu. Dikey çizgi ile nokta duruyor: onlar sütunların
   arasındaki boşluktan geçiyor, hiçbir yazıya değmiyor. */
.crosshair-h { display: none; }

/* Akordeon dilimi açılınca 343 pikselden 795 piksele genişliyor, yani
   kutunun oranı 0.45'ten 1.04'e sıçrıyor. Tek bir görsel oranı ikisine
   birden uyamaz; `cover` açık hâlde panelin ORTASINDAN bir bant
   gösteriyordu, başlık yukarıda kalıyordu. Üstten hizalanınca hangi
   genişlikte olursa olsun panelin başı görünüyor, kesilen kısım en
   alttaki boşluk oluyor: zaten dilimin açıklama yazısı oraya biniyor. */
.slice-img { object-position: top center; }

/* Üstten hizalanınca panelin satırları aşağıya kadar iniyor ve dilimin
   açıklama yazısı onların üstüne biniyor: iki yazı üst üste. Şablonun
   perdesi altta 0.75 ile bitiyordu, fotoğraf için yeterliydi. Yazının
   durduğu bantta neredeyse opak yapıldı, üst kısım aynı kalıyor. */
.slice-shade {
  background: linear-gradient(to top,
    rgba(13, 14, 21, 0.99) 0%,
    rgba(13, 14, 21, 0.98) 26%,
    rgba(13, 14, 21, 0.5) 40%,
    rgba(13, 14, 21, 0) 60%);
}

/* Bölüm başlığı ("Hangi iş nerede, tek bakışta.") panelin iş emri
   satırlarının üstünde duruyordu, iki yazı üst üste gelince ikisi de
   okunmuyordu. Perdeyi koyultmak çözmüyor: altta duran da yazı.
   Çözüm panelin kendisinde: nexus-macro artık altında 300 piksellik
   boş bant ile çiziliyor, başlık oraya oturuyor.

   Sekme altındaki "ŞEK. 01 / PANO" kutusu da kaldırıldı: panelin kendi
   başlığı zaten aynı şeyi yazıyor ve kutu panelin alt kenarına biniyor. */
.matrix-caption { display: none; }

@media (max-width: 900px) {
  /* Telefonda panel akışa giriyor: kendi oranında, tam boy, kırpmasız.
     Kart yüksekliği görselden geliyor, sabit vh'den değil. */
  .card-macro {
    display: block;
    height: auto;
    min-height: 0;
    background: var(--carbon);
  }
  .card-macro picture { display: block; }
  .macro-img {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    padding: 0;
  }
  /* Nişangâh, nokta ve perde yüzdeyle konumlanıyordu; görsel akışa
     girince hepsi yanlış yere düşüyor. */
  .macro-shade,
  .crosshair-v,
  .crosshair-h,
  .node-dot { display: none; }
  .macro-caption {
    position: relative;
    inset: auto;
    left: auto;
    bottom: auto;
    max-width: none;
    padding: 24px 24px 34px;
  }

  /* Sekme paneli: yüksekliği görselin oranından geliyor (620x1000),
     böylece ne kırpılıyor ne de altında boş bant kalıyor. */
  .matrix-right {
    height: auto;
    min-height: 0;
    aspect-ratio: 620 / 1000;
  }
  .matrix-img { padding: 0; }
}