/* ============================================================
   C2 — Özellikler sayfası: telefon ekranı geçişte boş kalıyordu
   Kullanıcı bildirdi: ekran bazen tamamen yeşil görünüyor.

   SEBEP (ölçüldü): iki ekran görüntüsü çapraz geçiş yapıyor ama
   ikisi de aynı kare aralıklarında saydam kalıyordu —
     @keyframes iph-gecis { 0%{0} 8%,42%{1} 50%,100%{0} }
     .iph-a gecikme 0s · .iph-b gecikme 5s · süre 10s
   Zaman çizelgesinde üç boşluk vardı: %0–8, %42–50, %92–100.
   O anlarda iki görüntü de saydam olduğu için altındaki yeşil
   zemin görünüyordu.

   ÇÖZÜM: alttaki ekran HER ZAMAN opak, üstteki onun üzerinde
   belirip kayboluyor. Böylece hiçbir karede boşluk kalmıyor.
   Görsel dosyalara ve HTML'e dokunulmadı.
   ============================================================ */

/* alt katman: hep görünür, animasyon yok */
.iph-img.iph-a {
  opacity: 1 !important;
  animation: none !important;
}
/* üst katman: altındakinin üzerinde belirir, kaybolur */
.iph-img.iph-b {
  opacity: 0;
  animation: c2-ust 10s ease-in-out infinite !important;
  animation-delay: 0s !important;
}
@keyframes c2-ust {
  0%, 42%   { opacity: 0; }
  50%, 92%  { opacity: 1; }
  100%      { opacity: 0; }
}
/* Yedek: görüntü yüklenmezse bile ekran yeşil kalmasın */
.iph-ekran { background: #F1F5F9; }

/* Gösterge noktaları yeni zamanlamayla aynı hizada */
.iph-gosterge span { animation: c2-nokta-1 10s ease-in-out infinite !important; animation-delay: 0s !important; }
.iph-gosterge span:nth-child(2) { animation-name: c2-nokta-2 !important; }
@keyframes c2-nokta-1 {
  0%, 42%   { background: #2e9e83; transform: scale(1.35); }
  50%, 92%  { background: #cbd5e1; transform: scale(1); }
  100%      { background: #2e9e83; transform: scale(1.35); }
}
@keyframes c2-nokta-2 {
  0%, 42%   { background: #cbd5e1; transform: scale(1); }
  50%, 92%  { background: #2e9e83; transform: scale(1.35); }
  100%      { background: #cbd5e1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .iph-img.iph-b { animation: none !important; opacity: 0; }
  .iph-gosterge span { animation: none !important; }
}