/* =========================================================================
   Tarayici maketi
   Renkler tasarim sisteminden gelir; maket sitenin kendi dilini konusur.
   ========================================================================= */

.mockup { margin: 0; }
.mockup svg {
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 30px 60px rgba(23, 18, 15, 0.14));
}

.mk-window { fill: var(--surface); stroke: var(--line); stroke-width: 1; }
.mk-bar    { fill: var(--surface-2); }
.mk-dot    { fill: var(--line-strong); }
.mk-url    { fill: var(--bg); }

.mk-logo   { fill: var(--ink); }
.mk-nav    { fill: var(--ink); opacity: 0.28; }
.mk-cta    { fill: var(--accent); }
.mk-ghost  { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }

.mk-h1     { fill: var(--ink); }
.mk-text   { fill: var(--ink); opacity: 0.32; }
.mk-dim    { opacity: 0.18; }

.mk-media      { fill: var(--surface-2); }
.mk-media-dot  { fill: var(--accent); opacity: 0.85; }
.mk-media-line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; opacity: 0.55; }

.mk-card { fill: var(--bg); stroke: var(--line); stroke-width: 1; }
.mk-chip { fill: var(--accent-soft); }

/* ---------- Cerceveden tasan kartlar ---------- */
.mk-float rect {
  fill: var(--dark);
  filter: drop-shadow(0 14px 28px rgba(23, 18, 15, 0.28));
}
.mk-float--alt rect { fill: var(--accent); }
.mk-float--alt circle { fill: rgba(255, 255, 255, 0.24); }

.mk-float-num {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  fill: var(--accent);
  letter-spacing: -0.03em;
}
.mk-float--alt .mk-float-num2 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  fill: #fff;
  letter-spacing: -0.03em;
}
.mk-float-unit  { font-family: var(--font-body); font-size: 12px; fill: #fff; opacity: 0.8; }
.mk-float-label { font-family: var(--font-body); font-size: 10px; fill: #fff; opacity: 0.55; }
.mk-float--alt .mk-float-unit  { fill: #fff; opacity: 0.85; }
.mk-float--alt .mk-float-label { fill: #fff; opacity: 0.8; }

/* ---------- Giris durumlari ---------- */
.js .mockup[data-ready="false"] [data-mk-item],
.js .mockup[data-ready="false"] [data-mk-float] { opacity: 0; }

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

/* Koyu zeminde */
.hero--dark .mk-window, .section--dark .mk-window { fill: var(--dark-2); stroke: var(--line-onDark); }
.hero--dark .mk-bar,    .section--dark .mk-bar    { fill: rgba(255, 255, 255, 0.05); }
.hero--dark .mk-url,    .section--dark .mk-url    { fill: rgba(255, 255, 255, 0.08); }
.hero--dark .mk-logo,   .section--dark .mk-logo   { fill: #fff; }
.hero--dark .mk-h1,     .section--dark .mk-h1     { fill: #fff; }
.hero--dark .mk-nav,    .section--dark .mk-nav,
.hero--dark .mk-text,   .section--dark .mk-text   { fill: #fff; }
.hero--dark .mk-media,  .section--dark .mk-media  { fill: rgba(255, 255, 255, 0.06); }
.hero--dark .mk-card,   .section--dark .mk-card   { fill: rgba(255, 255, 255, 0.04); stroke: var(--line-onDark); }
.hero--dark .mk-chip,   .section--dark .mk-chip   { fill: rgba(237, 109, 30, 0.22); }
.hero--dark .mk-dot,    .section--dark .mk-dot    { fill: rgba(255, 255, 255, 0.25); }
.hero--dark .mk-ghost,  .section--dark .mk-ghost  { stroke: var(--line-onDark); }
.hero--dark .mk-float rect, .section--dark .mk-float rect { fill: #000; }