/* =============================================================================
   PROJELER — liste ve proje detayı grameri

   Kaynak: arolax.crowdytheme-demo.com/marketing-agency/work-dark (liste) ve
   wp.ravextheme.com/redox-dark/portfolio-details (detay). Referans sayfaların
   ekran görüntüleri alınıp ölçüldü.

   LİSTE İKİ KOLON. Kaynakta "Work" başlığı ve giriş paragrafı SOLDA, dar bir
   kolonda duruyor ve sayfa kaydıkça yerinde kalıyor; projeler sağdaki geniş
   kolonda alt alta akıyor. İlk hâli tam genişlik bantlardı — kaynağın en
   belirgin düzen kararı tam da kaçırdığım şeydi.

   NEDEN AYRI DOSYA: `hizmet-genis.css` sekiz hizmet sayfasının grameri ve
   zaten uzun; `blog.css` de aynı gerekçeyle ayrı. Dev başlık ve
   "etiket —— paragraf" satırı üç kurumsal sayfada da aynı olduğu için
   `kurumsal.css`e alındı; burada yalnız listeye ve detaya özel parçalar var.
   ============================================================================= */


/* ── liste: sabit sol kolon + akan sağ kolon ──────────────────────────────── */
.pj-wrap { display: grid; grid-template-columns: 34fr 66fr; column-gap: 4cqw;
  padding-top: 10cqw; padding-bottom: 4cqw; align-items: start; }

/* Sol kolon sayfa kaydıkça YERİNDE kalıyor (kaynaktaki gibi). `align-self:
   start` şart: ızgara ögesi öntanımlı olarak satırı kadar uzuyor ve o hâlde
   yapışacak yer kalmıyor. */
.pj-yan { position: sticky; top: 9cqw; align-self: start; grid-row: 1; grid-column: 1;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1.6cqw; }
/* ALT KAPSÜLÜN İŞARETİ. Kapsül `data-sv-dock`un gösterdiği kutu kadrajdan
   çıkınca beliriyor; önce bütün `.pj-wrap` işaretliydi ve kapsül altı projenin
   hepsi geçilene kadar gizli kalıyordu. İşaret başlık kolonuyla AYNI ızgara
   hücresinde (1/1) duruyor — yeni satır açmadığı için düzen piksel piksel
   aynı. `.pj-yan`ın kendisi işaret olamaz: masaüstünde yapışkan, kadrajdan
   hiç çıkmaz. Masaüstünde yüksekliği bir açılış ekranı kadar (kariyerdeki
   `.ax-hero` ölçüsü); dar ekranda başlık bloğunun boyunu alıyor (aşağıda). */
.pj-dock-mark { grid-row: 1; grid-column: 1; align-self: start; height: 40cqw;
  pointer-events: none; }
.pj-h1 { font-family: 'Afacad Flux', sans-serif; font-weight: 500; font-size: 4.8cqw;
  line-height: 0.98; letter-spacing: -0.04em; color: #ffffff; }
.pj-yan-p { max-width: 30ch; }
/* Kaynaktaki aşağı ok: dikey bir kapsül içinde ince bir ok. Süs değil —
   sağdaki kolonun kaydırılacağını söylüyor. */
.pj-ok { display: grid; place-items: center; width: 2.4cqw; height: 4cqw;
  min-width: 34px; min-height: 56px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(240,240,240,0.22); color: rgba(255,255,255,0.7); }
.pj-ok svg { width: 1cqw; height: 1cqw; min-width: 14px; min-height: 14px;
  animation: pjOk 2.4s cubic-bezier(.5,0,.5,1) infinite; }
@keyframes pjOk {
  0%, 100% { transform: translateY(-0.25cqw); opacity: 0.5; }
  50%      { transform: translateY(0.25cqw);  opacity: 1; }
}

.pj-akis { display: flex; flex-direction: column; gap: 4.5cqw; }

/* Proje ögesi: büyük görsel, altında ad ve kategori. Kaynakta kart çerçevesi
   yok — görselin kendisi kart. */
.pj-item { display: flex; flex-direction: column; gap: 1.1cqw; }
.pj-shot { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3;
  border-radius: 0.5cqw; overflow: hidden; background: #131313; }
/* Ekran görüntüleri DİKEY (1440×1660, sayfanın tamamı); kutu ise yatay.
   `object-position: 50% 0` üst kenarı sabitliyor, yani her kutuda o sitenin
   AÇILIŞ EKRANI görünüyor — ortasından rastgele bir kesit değil. */
.pj-shot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0;
  filter: saturate(0.85) brightness(0.9);
  transition: transform 1.1s cubic-bezier(.22,.7,.2,1), filter .6s ease; }
.pj-item:hover .pj-shot img { transform: scale(1.04); filter: saturate(1) brightness(1); }

.pj-bas { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline;
  column-gap: 1.2cqw; }
.pj-no { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 400;
  font-size: 0.78cqw; letter-spacing: 0.14em; color: rgba(255,255,255,0.65); }
.pj-ad { font-family: 'Afacad Flux', sans-serif; font-weight: 500; font-size: 2.2cqw;
  line-height: 1.06; letter-spacing: -0.03em; color: #ffffff;
  transition: color .35s ease; }
.pj-item:hover .pj-ad { color: #ffffff; }
.pj-kat { justify-self: end; font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 400; font-size: 0.68cqw; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.70); white-space: nowrap; }

.pj-ozet { max-width: 56ch; }
.pj-git { display: flex; align-items: center; gap: 1.4cqw; margin-top: 0.4cqw; }

/* Metin bağlantısı: altı çizgi imleçle SOLDAN açılıyor — alt bilgideki
   `.fnav` ile aynı jest, sayfanın kendi ölçeğinde. */
.pj-link { position: relative; display: inline-flex; align-items: center; gap: 0.45cqw;
  font-family: 'Jost', sans-serif; font-weight: 400; font-size: 0.98cqw;
  line-height: 1.4; white-space: nowrap; }
.pj-link svg { width: 0.9cqw; height: 0.9cqw; min-width: 13px; min-height: 13px; flex: none;
  transition: transform .45s cubic-bezier(.22,.7,.2,1); }
.pj-link:hover svg { transform: translate(2px, -2px); }
.pj-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.3cqw;
  height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left center;
  transition: transform .45s cubic-bezier(.22,.7,.2,1); }
.pj-link:hover::after { transform: scaleX(1); }
.pj-root a.pj-link-ac { color: var(--sv-ac); }


/* ── proje detayı ──────────────────────────────────────────────────────────
   Kaynak: redox-dark/portfolio-details. 1920 tuvalinde ölçülen piksel
   değerleri cqw'ye çevrildi (1px = 0.0520833cqw); yorumlardaki px'ler
   KAYNAĞIN değerleri, dönüşüm kontrol edilebilsin diye yazılı.

   BİLİNÇLİ İKİ SAPMA:
     1) Yazı tipleri FEELS'in (Afacad Flux + Jost). Kaynaktaki Sequel Sans /
        DM Sans ölçüleri — boy, satır aralığı, harf aralığı — bu iki aileye
        göz kararıyla değil yan yana ekran görüntüsüyle oturtuldu.
     2) Metin kenar boşluğu sitenin 8.33333cqw'si (160px), kaynağın 150px'i
        değil: başlık üst menüdeki logoyla aynı hizada kalıyor, kaynakta da
        hiza ilişkisi bu. Galerinin 50px'lik dar boşluğu olduğu gibi. */

.pd-hero { padding-top: 8.6cqw; padding-bottom: 4.6875cqw; }            /* alt 90px */

/* Başlık satırı: 318px kolon + 30px boşluk + başlık. */
.pd-bas { display: grid; grid-template-columns: 16.5625cqw 1fr; column-gap: 1.5625cqw;
  align-items: start; padding-bottom: 2.6042cqw; }                        /* alt 50px */
.pd-kucuk { width: 16.40625cqw; height: 9.375cqw; border-radius: 1.0417cqw;  /* 315×180, r20 */
  overflow: hidden; background: #131313; }
.pd-kucuk img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.pd-h1 { font-family: 'Afacad Flux', sans-serif; font-weight: 400; font-size: 5.2083cqw; /* 100px */
  line-height: 0.9; letter-spacing: -0.05em; color: #ffffff; text-wrap: balance; }

/* Künye: dört eşit kolon, 60px boşluk, her birinin üstünde ince çizgi. */
.pd-kunye { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 3.125cqw;
  margin: 0; }
.pd-cift { min-width: 0; padding-top: 0.78125cqw;                        /* 15px */
  border-top: 1px solid rgba(240,240,240,0.1); }
.pd-cift dt, .pd-cift dd { margin: 0; font-family: 'Jost', sans-serif; font-weight: 400;
  font-size: 0.9375cqw; line-height: 1.3021cqw; }                         /* 18/25px */
.pd-cift dt { margin-bottom: 0.2604cqw; color: rgba(255,255,255,0.76); }  /* 5px, #999 */
.pd-cift dd { color: #ffffff; }
/* Henüz elde olmayan künye bilgisi. Uydurulmuyor: `??` ile bekletiliyor,
   hakkimizda.html'deki rakamlarla aynı gelenek. */
.pd-cift dd.bos { color: rgba(255,255,255,0.32); }
.pj-root .pd-cift a { text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 0.2em; text-decoration-color: rgba(240,240,240,0.3);
  transition: color .3s ease, text-decoration-color .3s ease; }
.pj-root .pd-cift a:hover { color: var(--sv-ac); text-decoration-color: currentColor; }

/* Afiş: kenardan kenara, 845px. */
.pd-afis { position: relative; height: 44.0104cqw; overflow: hidden; background: #131313; }
/* SOL ÜST köşeye sabit: dar ekranda kutu görselden dar kalınca yanlardan
   kırpılıyor ve ortadan kırpmak sol üstteki logoyu (sitelerin başlığı, Halk
   GYO görselindeki marka) kesiyordu. */
.pd-afis img { width: 100%; height: 100%; object-fit: cover; object-position: 0 0; }

/* Genel bakış: iki eşit kolon, üst/alt 65px. */
.pd-ozet { display: grid; grid-template-columns: 1fr 1fr; align-items: start;
  padding-top: 3.3854cqw; padding-bottom: 3.3854cqw; }
.pd-ozet h2 { max-width: 22.9167cqw; font-family: 'Afacad Flux', sans-serif;     /* 440px */
  font-weight: 400; font-size: 2.6042cqw; line-height: 1; letter-spacing: -0.045em; /* 50px */
  color: #ffffff; }
/* Ağırlık 400: kaynağın DM Sans 400'ü yanında Jost 300 belirgin biçimde
   soluk kalıyordu (yan yana ekran görüntüsü). */
.pd-p { font-family: 'Jost', sans-serif; font-weight: 400; font-size: 1.0417cqw;  /* 20/28px */
  line-height: 1.4583cqw; color: rgba(255,255,255,0.76); text-wrap: pretty; }
/* `.sv-root p, .sv-root ul { margin: 0 }` sıfırlamasından daha özgül
   olmalılar; `.pd-liste` tek başına yazıldığında boşluk sessizce sıfırlanıyor,
   liste paragrafa yapışıyordu. */
.sv-root .pd-p + .pd-p { margin-top: 0.8cqw; }
.sv-root .pd-liste { margin-top: 1.3021cqw; }                              /* 25px */
/* Artı İLK SATIRIN ortasına hizalı, maddenin ortasına değil: `center` iken
   dar ekranda iki satıra düşen maddede (Halk GYO'nun uzun hizmet adları) artı
   iki satırın arasına kayıyordu. Pay = (satır yüksekliği − artı) / 2. */
.pd-liste li { display: flex; align-items: flex-start; gap: 0.3125cqw;
  font-family: 'Jost', sans-serif; font-weight: 400; font-size: 1.0417cqw;
  line-height: 1.4583cqw; color: #ffffff; }
.pd-liste svg { flex: none; width: 0.5208cqw; height: 0.5208cqw;          /* 10px */
  min-width: 9px; min-height: 9px;
  margin-top: calc((1.4583cqw - max(0.5208cqw, 9px)) / 2); }
/* Galerisi olmayan projede (sitesi olmayan hizmet işi) genel bakış sayfanın
   son bölümü: altına kapanış görselinin bıraktığı 150px'lik boşluk geliyor.
   İki sınıf: dar ekrandaki `.pd-ozet` kuralından sonra da geçerli kalsın. */
.pd-ozet.pd-ozet-son { padding-bottom: 7.8125cqw; }
@media (max-width: 900px) { .pd-ozet.pd-ozet-son { padding-bottom: calc(25.64 * var(--pj-u)); } } /* 100px; birim aşağıda */

/* Galeri: 50px kenar, satırlar ve kolonlar arası 10px, köşe 20px. Satır
   yükseklikleri kaynaktan (830 / 899 / 830px); görseller kutuyu kaplıyor. */
.pd-galeri { display: flex; flex-direction: column; gap: 0.5208cqw;
  padding-left: 2.6042cqw; padding-right: 2.6042cqw; }
.pd-g-satir { display: grid; gap: 0.5208cqw; }
.pd-g-ikili { grid-template-columns: 67fr 33fr; height: 43.2292cqw; }
.pd-g-tam   { height: 46.8229cqw; }
.pd-g-uclu  { grid-template-columns: repeat(3, 1fr); height: 43.2292cqw; }
.pd-g { position: relative; height: 100%; margin: 0; overflow: hidden;
  border-radius: 1.0417cqw; background: #131313; }
.pd-g img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }

/* Notlar: 520px içeriden başlayan 561px'lik kolon, 30px boşluk, 509px'lik
   kolon. Üst 45px, alt 95px. */
.pd-notlar { display: grid; grid-template-columns: 520fr 561fr 30fr 509fr;
  align-items: start; padding-top: 2.3438cqw; padding-bottom: 4.9479cqw; }
.pd-not:nth-child(1) { grid-column: 2; }
.pd-not:nth-child(2) { grid-column: 4; }
.pd-not h2 { margin-bottom: 0.9375cqw; font-family: 'Afacad Flux', sans-serif;   /* 18px */
  font-weight: 400; font-size: 1.5625cqw; line-height: 1.1; letter-spacing: -0.04em; /* 30px */
  color: #ffffff; }
.pd-not p { max-width: 27.6042cqw; font-family: 'Jost', sans-serif; font-weight: 400; /* 530px */
  font-size: 1.0417cqw; line-height: 1.4583cqw; color: rgba(255,255,255,0.76);
  text-wrap: pretty; }

/* Kapanış görseli: 1820×899, altında 150px. */
.pd-kapanis { padding-left: 2.6042cqw; padding-right: 2.6042cqw; padding-bottom: 7.8125cqw; }
.pd-kapanis .pd-g { height: 46.8229cqw; }

/* PARALLAX. Kaynakta görseller çerçevelerinin içinde sayfadan yavaş kayıyor
   (GSAP ScrollSmoother, data-speed 0.8). Burada betik yok: CSS'in kaydırmaya
   bağlı animasyonu (`animation-timeline: view()`) aynı hareketi veriyor.
   Görsel çerçeveden %16 uzun; çerçeve kadraja girerken görsel yukarıda,
   çıkarken aşağıda — iki uçta da çerçeve boş kalmıyor (-%13.8 = 16/116).
   Desteklemeyen tarayıcıda ve hareket azaltma tercihinde görsel sabit. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .pd-plx img { height: 116%; animation: pdPlx linear both;
      animation-timeline: view(); animation-range: cover; }
    /* Afiş sayfanın en üstünde: `cover` aralığının ilk yarısı hiç
       yaşanmıyor, hareket de ilk kaydırmada başlasın diye `exit`.
       YÖN TERS: afiş 0'dan başlayıp aşağı kayıyor. Diğerleri gibi -%13.8'den
       başlasaydı sayfa açılırken görselin üst %14'ü gizli kalıyordu — sol
       üstteki logo (Halk GYO görseli, sitelerin başlığı) tam oradaydı.
       Boşluk görünmüyor: `exit` boyunca üstte açılan pay (en çok %16) çerçevenin
       kadrajdan çıkmış kısmından (%100'e kadar) hep küçük. */
    .pd-afis.pd-plx img { animation-name: pdPlxUst; animation-range: exit; }
  }
}
@keyframes pdPlx    { from { transform: translateY(-13.8%); } to { transform: translateY(0); } }
@keyframes pdPlxUst { from { transform: translateY(0); } to { transform: translateY(13.8%); } }


/* ── kapanış çağrısı ───────────────────────────────────────────────────────
   Düğme alt kapsülle AYNI çekmeceyi açıyor (`data-sv-panel`), yani ziyaretçi
   sayfanın dibinde ikinci bir forma değil, tanıdık panele düşüyor. */
.pj-cta { display: grid; grid-template-columns: 1fr auto; align-items: center;
  column-gap: 4cqw; margin-top: 3cqw; margin-bottom: 5cqw; padding: 3.4cqw;
  border-radius: 0.83cqw; background: #131313; }
.pj-cta h2 { font-family: 'Afacad Flux', sans-serif; font-weight: 500; font-size: 2.6cqw;
  line-height: 1.06; letter-spacing: -0.03em; color: #ffffff; max-width: 18ch; }


@media (max-width: 900px) {
  /* TAVANLI BİRİM. Aşağıdaki ölçüler 390 tuvalinde çizildi (1px = 0.25641cqw);
     düz cqw iken 900px'e kadar büyümeye devam ediyorlardı — 768'de 39px
     paragraf, 69px başlık, iki kat uzun sayfa (ölçüldü). `--pj-u` 440px'e
     kadar 1cqw ile aynı, sonra 4.4px'te duruyor: telefonda tasarım aynen
     kalıyor, tablet ve yatay telefonda yazı ve ritim sabitleniyor. Kenar
     boşlukları, afiş yüksekliği ve galeri oranları genişlikle büyümeye
     devam ediyor — onlar yazı değil, kadraj. Yorumlardaki px'ler hâlâ
     390'daki karşılıklar. */
  .pj-root { --pj-u: min(1cqw, 4.4px); }

  /* Dar ekranda sol kolon yapışmayı bırakıp üste geçiyor: iki kolon yan yana
     sığmıyor ve yapışkan bir başlık telefonda ekranın yarısını yerdi. */
  .pj-wrap { grid-template-columns: 1fr; row-gap: calc(9 * var(--pj-u)); padding-top: calc(26 * var(--pj-u)); }
  .pj-yan { position: static; gap: calc(4 * var(--pj-u)); }
  .pj-h1 { font-size: calc(11.5 * var(--pj-u)); }
  .pj-yan-p { max-width: none; }
  .pj-ok { display: none; }
  /* Alt kapsülün işareti tek kolonda başlık bloğunun boyunu alıyor: kapsül
     giriş paragrafı kadrajdan çıkınca beliriyor. */
  .pj-dock-mark { align-self: stretch; height: auto; }

  .pj-akis { gap: calc(12 * var(--pj-u)); }
  .pj-item { gap: calc(3.5 * var(--pj-u)); }
  .pj-shot { border-radius: calc(2.4 * var(--pj-u)); }
  /* Numara/ad/kategori dar ekranda tek satıra sığmıyor: kategori alta iniyor. */
  .pj-bas { grid-template-columns: auto 1fr; row-gap: calc(1.6 * var(--pj-u)); }
  .pj-ad { font-size: calc(7 * var(--pj-u)); }
  /* Mikro etiketlerin tabanı 12px: 360'ta 10px'e iniyordu. */
  .pj-no { font-size: max(12px, calc(2.9 * var(--pj-u))); }
  .pj-kat { grid-column: 1 / -1; justify-self: start; font-size: max(12px, calc(2.9 * var(--pj-u))); }
  .pj-ozet { max-width: none; }
  .pj-git { flex-wrap: wrap; gap: calc(4 * var(--pj-u)); margin-top: calc(2 * var(--pj-u)); }
  /* DOKUNMA HEDEFİ. Bağlantı 21px boydu. Dikey dolgu kutuyu 44px'e
     çıkarıyor, eşit negatif marj satırın akıştaki yerini koruyor; alt çizgi
     dolgunun içine, metnin hemen altına geri çekiliyor. */
  .pj-link { font-size: max(14px, calc(3.9 * var(--pj-u)));
    padding-block: calc((44px - 1.4em) / 2); margin-block: calc((1.4em - 44px) / 2); }
  .pj-link::after { bottom: calc((44px - 1.4em) / 2 - 0.3cqw); }
  .pj-link svg { width: calc(3.6 * var(--pj-u)); height: calc(3.6 * var(--pj-u)); }

  /* Proje detayı — kaynağın 767px kırılımı, 390 tuvalinde ölçüldü
     (1px = 0.25641cqw). Her şey tek kolona iniyor; küçük görsel ortalı. */
  .pd-hero { padding-top: calc(26 * var(--pj-u)); padding-bottom: calc(23.08 * var(--pj-u)); } /* alt 90px */
  .pd-bas { grid-template-columns: 1fr; row-gap: calc(5.128 * var(--pj-u)); padding-bottom: calc(12.82 * var(--pj-u)); }
  .pd-kucuk { justify-self: center; width: calc(80.77 * var(--pj-u)); height: calc(46.15 * var(--pj-u)); /* 315×180 */
    border-radius: calc(5.128 * var(--pj-u)); }
  .pd-h1 { font-size: calc(8.974 * var(--pj-u)); padding-right: calc(12.82 * var(--pj-u)); } /* 35px, sağ 50px */
  .pd-kunye { grid-template-columns: 1fr; row-gap: calc(7.692 * var(--pj-u)); }             /* 30px */
  .pd-cift { padding-top: calc(3.846 * var(--pj-u)); }
  .pd-cift dt, .pd-cift dd { font-size: calc(4.615 * var(--pj-u)); line-height: calc(6.41 * var(--pj-u)); } /* 18/25px */
  .pd-cift dt { margin-bottom: calc(1.282 * var(--pj-u)); }

  .pd-afis { height: 51.28cqw; }                                           /* 200px */

  .pd-ozet { grid-template-columns: 1fr; padding-top: calc(16.67 * var(--pj-u)); padding-bottom: calc(16.67 * var(--pj-u)); }
  .pd-ozet h2 { max-width: none; margin-bottom: calc(6.41 * var(--pj-u)); padding-right: calc(12.82 * var(--pj-u));
    font-size: calc(7.18 * var(--pj-u)); }                                 /* 28px */
  .pd-p, .pd-liste li { font-size: calc(5.128 * var(--pj-u)); line-height: calc(7.18 * var(--pj-u)); } /* 20/28px */
  .sv-root .pd-p + .pd-p { margin-top: calc(4 * var(--pj-u)); }
  .sv-root .pd-liste { margin-top: calc(6.41 * var(--pj-u)); }
  .pd-liste li { gap: calc(1.282 * var(--pj-u)); }
  .pd-liste svg { width: calc(2.564 * var(--pj-u)); height: calc(2.564 * var(--pj-u));
    margin-top: calc((7.18 - 2.564) / 2 * var(--pj-u)); }

  /* Galeri tek kolon; satır yüksekliği yerine her kare kendi oranını taşıyor.
     Kenar boşluğu metinle aynı (6cqw) — kaynakta da dar ekranda ikisi eşit. */
  .pd-galeri, .pd-kapanis { padding-left: 6cqw; padding-right: 6cqw; }
  .pd-galeri, .pd-g-satir { gap: calc(2.564 * var(--pj-u)); }             /* 10px */
  .pd-g-satir { grid-template-columns: 1fr; height: auto; }
  .pd-g { height: auto; border-radius: calc(5.128 * var(--pj-u)); }
  .pd-g-ikili .pd-g:first-child { aspect-ratio: 1213 / 830; }
  .pd-g-ikili .pd-g:last-child,
  .pd-g-uclu .pd-g { aspect-ratio: 600 / 830; }
  .pd-g-tam .pd-g,
  .pd-kapanis .pd-g { height: auto; aspect-ratio: 1820 / 899; }

  .pd-notlar { grid-template-columns: 1fr; padding-top: calc(8.97 * var(--pj-u)); padding-bottom: calc(6.41 * var(--pj-u)); }
  .pd-not:nth-child(1), .pd-not:nth-child(2) { grid-column: 1; }
  .pd-not:nth-child(1) { margin-bottom: calc(3.846 * var(--pj-u)); }      /* 15px */
  .pd-not h2 { margin-bottom: calc(4.615 * var(--pj-u)); font-size: calc(6.154 * var(--pj-u)); } /* 24px */
  .pd-not p { max-width: none; font-size: calc(4.615 * var(--pj-u)); line-height: calc(7.18 * var(--pj-u)); } /* 18/28px */
  .pd-kapanis { padding-bottom: calc(25.64 * var(--pj-u)); }              /* 100px */

  .pj-cta { grid-template-columns: 1fr; row-gap: calc(5 * var(--pj-u));
    padding: calc(8 * var(--pj-u)) calc(6 * var(--pj-u));
    border-radius: calc(2.4 * var(--pj-u)); margin-bottom: calc(10 * var(--pj-u)); }
  .pj-cta h2 { font-size: calc(7 * var(--pj-u)); max-width: none; }
}