/* ==== PHONE GRID – Telefon vitrin (responsive) ==== */
:root{
  /* MASAÜSTÜ */
  --phone-w: 240px;            /* tek telefon genişliği */
  --bezel: 12px;               /* çerçeve kalınlığı */
  --radius: 28px;              /* telefon köşeleri */
  --shadow: 0 18px 40px rgba(0,0,0,.22);
  --grid-gap: 18px;            /* kartlar arası boşluk */
  --caption: #6b7280;
}

/* Bölüm iç boşluğu */
.phones-wrap{
  padding: clamp(24px, 4vw, 48px) 0;
}

/* GRID: 4 sütun → daha dar ekranlarda 3/2 */
.phones-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gap);
  align-items: start;
}

/* Kapsayıcıyı ortala ve genişlet */
#telefon-vitrin .phones-grid{
  width: min(1260px, 94vw);
  margin: 0 auto;
  justify-items: center;
}

@media (max-width: 1200px){
  .phones-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px){
  .phones-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Telefon kartı */
.phone{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* Telefon gövdesi */
.phone-bezel{
  width: min(var(--phone-w), 100%);
  aspect-ratio: 9 / 19.5;                  /* dikey telefon oranı */
  background: #fff;
  border-radius: calc(var(--radius) + var(--bezel));
  padding: var(--bezel);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}

/* Ekran (video) */
.phone-screen{
  width: 100%;
  height: 100%;
  display: block;
  border-radius: var(--radius);
  object-fit: cover;
  background: #fff;
}

/* Notch & sensör (dekoratif) */
.notch{
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 24px;
  background: #fff;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  z-index: 3;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.06);
}
.cam{
  position: absolute;
  top: 14px;
  left: calc(50% - 40px);
  width: 10px; height: 10px;
  background: radial-gradient(circle at 30% 30%, #2dd4bf 0 30%, #0ea5a5 31% 60%, #111827 61%);
  border-radius: 50%;
  z-index: 4;
}
.speaker{
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 48px; height: 6px;
  background: #1f2430;
  border-radius: 3px;
  z-index: 4;
}

/* Hover (opsiyonel) */
.phone-bezel:hover .phone-screen{ filter: brightness(1.05); }

/* Başlık/alt yazı */
.phone-caption{
  font: 600 14px/1.3 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--caption);
  text-align: center;
  max-width: 90%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Küçük alanlarda telefon genişliğini konteynere uydur */
.phones-grid > .phone > .phone-bezel{ width: 100%; }

/* Daha geniş ekranlarda ufak büyütme */
@media (min-width: 1440px){
  :root{ --phone-w: 260px; }
}

/* === MOBİL: Tek telefon + yatay kaydırma ===
   Telefonu önceki halinden daha küçük yaptık. */
@media (max-width: 768px){
  :root{
    --phone-w: 70vw;          /* telefon gövdesi */
    --grid-gap: 10px;         /* mobil boşluk */
  }

  /* Grid → yatay akışlı carousel */
  #telefon-vitrin .phones-grid{
    display: grid !important;
    grid-template-columns: none !important; /* önceki kolon kurallarını iptal et */
    grid-auto-flow: column;                 /* yatay dizilim */
    grid-auto-columns: 72vw;                /* her kart genişliği */
    gap: var(--grid-gap);
    overflow-x: auto;
    padding: 8px 14vw 16px;                 /* ilk/son kart ortalansın */
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 14vw;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    width: 100% !important;
    margin: 0 !important;
  }

  /* Kart hizalama ve gövde uyumu */
  #telefon-vitrin .phone{ scroll-snap-align: center; align-items: center; }
  #telefon-vitrin .phone-bezel{ width: 100% !important; max-width: 100% !important; }

  /* Başlık boyutu ve mesafesi */
  #telefon-vitrin .phone-caption{ margin-top: 8px; font-size: 13px; }

  /* Scrollbar'ı gizlemek istersen */
  #telefon-vitrin .phones-grid::-webkit-scrollbar{ display: none; }
}

/* Çok dar cihazlarda (≤375px) bir tık daha küçült */
@media (max-width: 375px){
  :root{ --phone-w: 66vw; }
  #telefon-vitrin .phones-grid{
    grid-auto-columns: 68vw;
    padding: 8px 16vw 14px;
    scroll-padding-inline: 16vw;
  }
  #telefon-vitrin .phone-caption{ font-size: 12px; }
}