/* Pavo cihazında çalışan ürünlerin sayfalarına özel: /urunler/pavo-p2p/ ve /urunler/resto-nano/.
   Yalnız bu iki sayfa yükler, pages.css'ten SONRA (.telefon img, .sayfa-bas__gorsel img'yi ezer).
   Cihaz ekran görüntüleri: ekranlar Pavo cihazından alındı; çerçeve ve kamera boşluğu yok,
   yalnızca yuvarlak köşeli, gölgeli ekran. Köşe sınırı 8px (dogrula K3). */

.telefon {
  position: relative;
  margin: 0;
  border-radius: 9% / 4%;
  overflow: hidden;
  background: var(--beyaz);
  box-shadow:
    0 0 0 1px rgba(29, 29, 27, .08),
    0 28px 48px -22px rgba(29, 29, 27, .45),
    0 8px 16px -8px rgba(29, 29, 27, .18);
}
.telefon img {
  display: block;
  width: 100%;
  height: auto;
}

/* İki ekran yan yana, ikincisi biraz aşağıda */
.telefon-cift {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 15rem));
  justify-content: center;
  gap: var(--b-5);
  margin: 0;
}
.telefon-cift .telefon:nth-child(2) { transform: translateY(var(--b-10)); }

/* Giriş görseli: üç ekran iç içe */
.telefon-dizi {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  margin: 0;
}
.telefon-dizi .telefon { flex: none; width: 36%; }
.telefon-dizi .telefon + .telefon { margin-left: -6%; }
.telefon-dizi .telefon:nth-child(1) { z-index: 1; }
.telefon-dizi .telefon:nth-child(2) { z-index: 3; transform: translateY(var(--b-10)); }
.telefon-dizi .telefon:nth-child(3) { z-index: 2; }
.telefon-dizi figcaption,
.telefon-cift figcaption {
  flex-basis: 100%;
  grid-column: 1 / -1;
  margin-top: var(--b-12);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--metin-soluk);
}

/* Sipariş akışı: ekranlar sırayla, altında kısa açıklama */
.ekran-serit {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--b-6);
  margin: var(--b-10) 0 0;
  padding: 0;
  list-style: none;
}
.ekran-serit li { display: grid; gap: var(--b-3); align-content: start; }
.ekran-serit b { font-family: var(--font-baslik); font-size: var(--fs-sm); }
.ekran-serit span { font-size: var(--fs-xs); color: var(--metin-ikincil); line-height: var(--lh-normal); }

/* "Pavo ile entegre" rozeti. Logo değiştirilmeden, açık zeminli rozetin içinde.
   Adı "ortak" değil: pages.css'te o ad çözüm ortakları ızgarası.
   Logo sitedeki assets/img/entegrasyon/pavo.webp (400x150, çevresinde saydam boşluk);
   yükseklikler bu boşluğa göre: görünen logo ~22px. */
.is-ortagi {
  display: inline-flex;
  align-items: center;
  gap: var(--b-3);
  margin-top: var(--b-6);
  padding: 6px var(--b-4) 6px 6px;
  border: 1px solid var(--kenarlik);
  border-radius: var(--r-lg);
  background: var(--beyaz);
  font-size: var(--fs-xs);
  color: var(--metin-ikincil);
}
.is-ortagi img {
  display: block;
  height: 44px;
  width: auto;
  margin: -7px -14px;
  border-radius: var(--r-lg);
  background: var(--beyaz);
}
.kart__logo {
  display: block;
  height: 56px;
  width: auto;
  margin: -12px 0 var(--b-2) -26px;
}

@media (max-width: 900px) {
  .telefon-cift { grid-template-columns: repeat(2, minmax(0, 11rem)); gap: var(--b-3); }
  .telefon-cift .telefon:nth-child(2) { transform: translateY(var(--b-6)); }
  .ekran-serit { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--b-5); }
}