/* ==========================================================================
   iOS katmanı — örnek görseller + iPhone tasarım dili
   · .has-img: Unsplash örnek görselleri (showcase-data.js) mockup'lara yerleşir
   · .device--phone: iPhone 15 Pro benzeri çerçeve + iOS arayüz kuralları
     (sistem fontu, büyük başlık, inset gruplu liste, sekme çubuğu,
     ana ekran çizgisi). Android çerçevesi kendi dilinde kalır.
   ========================================================================== */

/* ---------- Örnek görseller ---------- */
.has-img {
  background-color: var(--c-paper-3);
  background-size: cover;
  background-position: center;
}
.has-img::before, .has-img::after { display: none !important; }
.mira__avatar.has-img, .card__rows .av.has-img { color: transparent; }
.site__art.has-img { min-height: 12em; }
.sc-m__banner.has-img { color: #fff; box-shadow: inset 0 -9em 6em -3em rgba(0, 0, 0, 0.55); }
.sc-m__banner.has-img small { color: rgba(255, 255, 255, 0.82); }

/* ---------- iPhone çerçevesi ---------- */
.device--phone .device__frame {
  background: #1C1C1E;
  padding: 2.6cqw;
  border-radius: 15.5cqw;
  box-shadow:
    0 0 0 0.6cqw #3A3A3C,          /* iç kenar */
    0 0 0 1.1cqw #8E8E93,          /* titanyum çerçeve */
    0 40px 80px -40px rgba(23, 25, 29, 0.5);
}
.device--phone .device__screen {
  border-radius: 13.2cqw;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Inter", system-ui, sans-serif;
  letter-spacing: -0.01em;
}
.device--phone .device__screen::before { /* Dynamic Island */
  top: 3cqw; width: 30cqw; height: 8.6cqw; border-radius: 5cqw; background: #000;
}
.device--phone .device__screen::after { /* ana ekran çizgisi */
  content: "";
  position: absolute; z-index: 6;
  left: 50%; bottom: 2cqw;
  width: 34cqw; height: 1.3cqw;
  transform: translateX(-50%);
  border-radius: 1cqw;
  background: #111;
  opacity: 0.85;
}
.device--phone .scr__status { font-weight: 600; font-size: 3.9cqw; }

/* iOS büyük başlık ve rakamlar */
.device--phone .sc-m__title,
.device--phone .nabiz__h,
.device--phone .mira__balance,
.device--phone .sc-m__sheet .sc-m__title {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "Inter", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.025em;
}

/* iOS sistem zemini + inset gruplu liste */
.device--phone .sc-m { background: #F2F2F7; }
.device--phone .sc-m__rows { background: #fff; border-radius: 3.4cqw; padding: 0 3.6cqw; }
.device--phone .sc-m__rows li { border-top: 1px solid rgba(60, 60, 67, 0.14); }
.device--phone .sc-m__rows li:first-child { border-top: 0; }
.device--phone .sc-m__thumb { border-radius: 2.4cqw; }
.device--phone .sc-m__dl { background: #fff; border-radius: 3.4cqw; padding: 0 3.6cqw; }
.device--phone .sc-m__dl div:first-child { border-top: 0; }

/* iOS arama alanı ve segment */
.device--phone .sc-m__search { background: rgba(118, 118, 128, 0.12); border-radius: 2.8cqw; }
.device--phone .sc-m__chips { padding: 0.6cqw; background: rgba(118, 118, 128, 0.12); border-radius: 2.6cqw; gap: 0.4cqw; }
.device--phone .sc-m__chips span { border: 0; border-radius: 2cqw; color: #1C1C1E; }
.device--phone .sc-m__chips span:first-child { background: #fff; color: #1C1C1E; box-shadow: 0 0.4cqw 1.2cqw rgba(0, 0, 0, 0.12); }

/* iOS düğmeleri (marka rengiyle) */
.device--phone .sc-m__cta,
.device--phone .nabiz__cta:not(.nabiz__cta--line) { background: var(--c-accent); color: #fff; border-radius: 3.6cqw; font-weight: 600; }
.device--phone .nabiz__cta--line { border-radius: 3.6cqw; border-color: rgba(60, 60, 67, 0.25); }

/* iOS avatarlar yuvarlak */
.device--phone .mira__avatar { border-radius: 50%; }

/* iOS sekme çubuğu */
.device--phone .mira__tabbar { background: rgba(249, 249, 249, 0.96); border-top: 1px solid rgba(60, 60, 67, 0.16); }
.device--phone .mira__tabbar i { border-radius: 1.6cqw; border-color: #8E8E93; }
.device--phone .mira__tabbar i.on { background: var(--c-accent); border-color: var(--c-accent); }

/* Site şablonunun mobil varyantı telefonda iOS fontuyla */
.device--phone .site--mobile { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Inter", system-ui, sans-serif; }

/* ---------- Gerçek proje siteleri (Hayat Havuz, Pembe Garaj) ----------
   site--serif: editoryal serif başlık · site--accent: markanın kendi rengi */
.site--serif .site__h { font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -0.02em; line-height: 1.02; }
.site--serif .site__brand { font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: 0.12em; font-size: 1.15em; }
.site--accent .site__brand { color: var(--sa); }
.site--accent .site__cta { background: var(--sa); color: #fff; }
.site--accent .site__eyebrow { color: var(--sa); }
.site--dark.site--accent .site__eyebrow { color: rgba(245, 245, 242, 0.75); }
.site--accent .site__card i.has-img { aspect-ratio: 4 / 3.4; }