/* =========================================================================
   Telefon cercevesi semasi (mobil uygulama sayfasi)
   Animasyon assets/js/phone.js icinde; JS yoksa sema tam gorunur kalir.
   ========================================================================= */

.phone {
  margin: 0;
  display: grid;
  place-items: center;
}
.phone svg {
  width: 100%;
  max-width: 280px;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 26px 50px rgba(23, 18, 15, 0.18));
}

.phone__body   { fill: var(--dark); }
.phone__screen { fill: var(--bg); }
.phone__notch  { fill: rgba(255, 255, 255, 0.28); }

.phone__bar    { fill: var(--ink); opacity: 0.85; }
.phone__dot    { fill: var(--accent); }

.phone__hero   { fill: var(--accent); }

.phone__row       { fill: var(--surface); stroke: var(--line); stroke-width: 1; }
.phone__row-icon  { fill: var(--accent-soft); }
.phone__row-line  { fill: var(--ink); opacity: 0.7; }
.phone__row-line--dim { opacity: 0.28; }

.phone__tabbar { fill: var(--surface); stroke: var(--line); stroke-width: 1; }
.phone__tab    { fill: var(--line-strong); }
.phone__tab--active { fill: var(--accent); }

/* Bildirim balonu — JS ile belirir */
.phone__toast rect:first-of-type {
  fill: var(--dark);
  filter: drop-shadow(0 8px 18px rgba(23, 18, 15, 0.3));
}
.phone__toast circle { fill: var(--accent); }
.phone__toast-line { fill: #fff; opacity: 0.9; }
.phone__toast-line--dim { opacity: 0.45; }

.js .phone[data-ready="false"] [data-phone-item],
.js .phone[data-ready="false"] .phone__toast { opacity: 0; }
.phone .phone__toast { opacity: 0; }
.phone[data-ready="static"] .phone__toast { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .js .phone[data-ready="false"] [data-phone-item] { opacity: 1; }
  .phone .phone__toast { opacity: 1; }
}