/* RestoPOS Kiosk sayfasına özel (/urunler/qr-menu/kiosk/): kiosk ekran görüntüleri ve ödeme ortağı rozetleri.
   Yalnız bu sayfa yükler, pages.css'ten SONRA. Renkler token (dogrula K5), köşe sınırı 8px (K3).
   Ekranlar 1080x1920 dikey kiosktan alındı; kiosk gövdesi çizilmez,
   yalnızca hafif yuvarlak köşeli, gölgeli ekran. */

.kiosk-ekran {
  position: relative;
  margin: 0;
  border-radius: 4% / 2.25%;
  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);
}
.kiosk-ekran img {
  display: block;
  width: 100%;
  height: auto;
}

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

/* Giriş görseli: üç ekran iç içe */
.ekran-dizi {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  margin: 0;
}
.ekran-dizi .kiosk-ekran { flex: none; width: 36%; }
.ekran-dizi .kiosk-ekran + .kiosk-ekran { margin-left: -6%; }
.ekran-dizi .kiosk-ekran:nth-child(1) { z-index: 1; }
.ekran-dizi .kiosk-ekran:nth-child(2) { z-index: 3; transform: translateY(var(--b-10)); }
.ekran-dizi .kiosk-ekran:nth-child(3) { z-index: 2; }
.ekran-dizi figcaption,
.ekran-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);
}

/* Misafirin yolu: 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); }

/* Ödeme ortakları rozeti. Logolar değiştirilmeden, açık zeminli rozetin içinde.
   Adı "ortak" değil: pages.css'te o ad çözüm ortakları ızgarası. */
.is-ortagi {
  display: inline-flex;
  flex-wrap: wrap;
  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__logolar {
  display: inline-flex;
  align-items: center;
  gap: var(--b-2);
}
.is-ortagi img {
  display: block;
  height: 30px;
  width: auto;
  padding: 2px 8px;
  border-radius: var(--r-lg);
  background: var(--beyaz);
}
/* Yükseklik border-box: ince logolarda görünen boy = 30px - dikey dolgu */
.is-ortagi img.is-ortagi__ince { padding: 8px 8px; }

/* Sitedeki pavo.webp (400x150) çevresinde saydam boşluk taşır; görünen logo
   diğerleriyle aynı boyda olsun diye büyütülüp boşluğu negatif payla alınır. */
.is-ortagi img.is-ortagi__pavo { height: 44px; margin: -7px -14px; padding: 0; background: none; }
.kart__logolar img.is-ortagi__pavo { height: 48px; margin: -9px -16px; }

/* Ekosistem ve ödeme kartlarında logo sırası */
.kart__logolar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--b-4);
  margin-bottom: var(--b-4);
}
.kart__logolar img { display: block; height: 30px; width: auto; }
.kart__logolar img.is-ortagi__ince { height: 14px; }

@media (max-width: 900px) {
  .ekran-cift { grid-template-columns: repeat(2, minmax(0, 11rem)); gap: var(--b-3); }
  .ekran-cift .kiosk-ekran:nth-child(2) { transform: translateY(var(--b-6)); }
  .ekran-serit { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--b-5); }
  .is-ortagi { border-radius: var(--r-md); }
  .is-ortagi__logolar { flex-wrap: wrap; }
  .is-ortagi img { padding-inline: 4px; }
}