/* RestoPOS El Terminali sayfasına özel (/urunler/mobil/garson-el-terminali/): telefon ekran görüntüleri.
   Yalnız bu sayfa yükler, pages.css'ten SONRA. Renkler token (dogrula K5), köşe sınırı 8px (K3).
   Ekranlar iPhone'dan alındı; çerçeve ve kamera boşluğu yok,
   yalnızca yuvarlak köşeli, gölgeli ekran. */

.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;
  align-items: start;
  gap: var(--b-5);
  margin: 0;
}
.telefon-cift .telefon:nth-child(2) { transform: translateY(var(--b-10)); }

/* Tek ekran (görseli olmayan konunun yanında) */
.telefon-tek {
  display: grid;
  grid-template-columns: minmax(0, 17rem);
  justify-content: center;
  margin: 0;
}

/* 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,
.telefon-tek figcaption {
  flex-basis: 100%;
  grid-column: 1 / -1;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--metin-soluk);
}
.telefon-dizi figcaption,
.telefon-cift figcaption { margin-top: var(--b-12); }
.telefon-tek figcaption { margin-top: var(--b-6); }

@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)); }
  .telefon-tek { grid-template-columns: minmax(0, 13rem); }
}