/* ════════════════════════════════════════════
   NeuralWeb · macOS / iOS KERET AZ ESZKÖZ-MAKETTEKHEZ
   ────────────────────────────────────────────
   Közös menüsor + Dock a laptop-makettekhez, és
   állapotsor a telefon-makettekhez.

   MÉRETEZÉS — fontos, mert ezen már elcsúsztam egyszer:
   NEM em-et használunk, mert az HALMOZÓDIK. Ha a menüsorra
   font-size: 11em kerül, akkor a benne lévő ikon 13em-je
   már a 11em-hez képest számít, azaz 143-szoros lesz — így
   lett a 13 pixeles wifi-ikonból 78 pixeles.
   Helyette egy hosszúság-változó: --u. Ez sosem halmozódik,
   mert nem a betűmérethez viszonyul.
       --mac-s: a szülő állítja (pl. 0.5), --u = --mac-s * 1px
   Minden méret: calc(N * var(--u)).

   Az ikonok SAJÁT rajzok, nem az Apple eredeti ikonjai —
   azok védjegyoltalom alatt állnak.
   ════════════════════════════════════════════ */

.mac-chrome,
.ios-status {
  --mac-s: 1;
  --u: calc(var(--mac-s) * 1px);
  font-family: -apple-system, 'SF Pro Text', 'Inter', 'Outfit', sans-serif;
}

.mac-chrome {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

/* ── Felső menüsor ──────────────────────────── */
.mac-menubar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: calc(22 * var(--u));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(10 * var(--u));
  font-size: calc(11 * var(--u));
  line-height: 1;
  color: rgba(255,255,255,0.9);
  background: rgba(22,22,26,0.72);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: 0 0.5px 0 rgba(255,255,255,0.07) inset;
}
.mac-mb-l, .mac-mb-r { display: flex; align-items: center; gap: calc(11 * var(--u)); }
.mac-mb-r { gap: calc(8 * var(--u)); }
.mac-mb-l b { font-weight: 600; }
.mac-mb-l span, .mac-mb-r span { font-weight: 400; opacity: 0.78; }

/* A menüsor bal sarkában a NeuralWeb logó ül — a makett a mi munkánkat
   mutatja, ezért a saját jelünk van ott, nem az Apple almája. */
.mac-brand {
  display: block;
  height: calc(11 * var(--u));
  width: auto;
  flex: none;
  opacity: 0.95;
}

/* Állapotikonok */
.mac-ico { display: block; flex: none; opacity: 0.82; }
.mac-apple, .mac-ico, .ios-wifi { height: auto; }
.mac-ico--wifi { width: calc(12 * var(--u)); height: calc(9 * var(--u)); }
.mac-ico--batt { width: calc(19 * var(--u)); height: calc(10 * var(--u)); }
.mac-clock { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── Dock ───────────────────────────────────── */
.mac-dock {
  position: absolute;
  left: 50%; bottom: calc(5 * var(--u));
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  gap: calc(5 * var(--u));
  padding: calc(5 * var(--u)) calc(7 * var(--u));
  border-radius: calc(14 * var(--u));
  background: rgba(28,28,34,0.5);
  backdrop-filter: blur(22px) saturate(1.6);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
  box-shadow:
    0 0 0 0.5px rgba(255,255,255,0.12) inset,
    0 calc(6 * var(--u)) calc(16 * var(--u)) calc(-5 * var(--u)) rgba(0,0,0,0.55);
  pointer-events: auto;
}

.mac-app {
  position: relative;
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
  border-radius: calc(6 * var(--u));
  flex: none;
  box-shadow:
    0 0 0 0.5px rgba(255,255,255,0.16) inset,
    0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(0,0,0,0.45);
  transform-origin: bottom center;
  transition: transform 0.22s cubic-bezier(0.22,1,0.36,1);
}
/* Egérrel fölé húzva megemelkedik, a szomszédja kisebb mértékben —
   ahogy a macOS Dock nagyítása is teszi. */
.mac-app:hover { transform: scale(1.4) translateY(calc(-3 * var(--u))); }
.mac-app:hover + .mac-app,
.mac-app:has(+ .mac-app:hover) { transform: scale(1.15) translateY(calc(-1 * var(--u))); }

/* Futó alkalmazás pöttye */
.mac-app--on::after {
  content: '';
  position: absolute;
  bottom: calc(-3.5 * var(--u)); left: 50%;
  transform: translateX(-50%);
  width: calc(2.5 * var(--u)); height: calc(2.5 * var(--u));
  border-radius: 50%;
  background: rgba(255,255,255,0.6);
}

/* ── Ikonok ──────────────────────────────────
   Öt alkalmazás, amit macOS-en tényleg mindenki lát a Dockban.
   A glif SVG-ben van a markupban, mert 19 pixelen a CSS-gradienses
   rajzok elmosódtak. A háttér marad gradiens, az adja a színt. */
.mac-app svg {
  position: absolute;
  inset: 18%;
  width: 64%; height: 64%;
}
.mac-app--finder  { background: linear-gradient(180deg, #57b0ff, #1a6ed6); }
.mac-app--browser { background: linear-gradient(180deg, #f3f6fa, #cbd4df); }
.mac-app--mail    { background: linear-gradient(180deg, #57bcff, #1b7ae2); }
.mac-app--msg     { background: linear-gradient(180deg, #63e471, #1eb638); }
.mac-app--trash   { background: linear-gradient(180deg, rgba(214,219,226,0.55), rgba(126,132,140,0.5)); }

/* ════════════════════════════════════════════
   iOS ÁLLAPOTSOR A TELEFON-MAKETTEKHEZ
   ════════════════════════════════════════════ */
.ios-status {
  position: absolute;
  /* A képernyő sarokrádiusza jóval nagyobb, mint a korábbi 12*u oldalpadding,
     ezért az óra és az akku a lekerekített sarok alá csúszott (levágva
     látszott). Nagyobb, a képernyő szélességéhez arányos padding kell,
     ami a --mac-s skálázással együtt nő. */
  top: 0; left: 0; right: 0;
  height: calc(26 * var(--u));
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(22 * var(--u));
  font-size: calc(10 * var(--u));
  font-weight: 600;
  line-height: 1;
  color: #fff;
  pointer-events: none;
}
.ios-time { font-variant-numeric: tabular-nums; padding-left: calc(2 * var(--u)); white-space: nowrap; }
.ios-status-r { display: flex; align-items: center; gap: calc(3.5 * var(--u)); }

.ios-signal { display: flex; align-items: flex-end; gap: calc(1 * var(--u)); height: calc(8 * var(--u)); }
.ios-signal i { width: calc(2 * var(--u)); border-radius: calc(0.5 * var(--u)); background: currentColor; flex: none; }
.ios-signal i:nth-child(1) { height: 38%; }
.ios-signal i:nth-child(2) { height: 58%; }
.ios-signal i:nth-child(3) { height: 79%; }
.ios-signal i:nth-child(4) { height: 100%; }

.ios-wifi { width: calc(11 * var(--u)); height: calc(8 * var(--u)); flex: none; }

/* Akkumulátor — a töltöttség a --ios-batt változóval állítható (0–1) */
.ios-batt {
  position: relative; flex: none;
  width: calc(20 * var(--u)); height: calc(10 * var(--u));
  border: calc(1 * var(--u)) solid rgba(255,255,255,0.5);
  border-radius: calc(3 * var(--u));
}
.ios-batt::before {
  content: '';
  position: absolute; top: calc(1.2 * var(--u)); left: calc(1.2 * var(--u)); bottom: calc(1.2 * var(--u));
  width: calc((100% - 2.4 * var(--u)) * var(--ios-batt, 0.82));
  background: currentColor;
  border-radius: calc(1.4 * var(--u));
}
.ios-batt::after {
  content: '';
  position: absolute; right: calc(-2.6 * var(--u)); top: 50%;
  transform: translateY(-50%);
  width: calc(1.4 * var(--u)); height: calc(4 * var(--u));
  border-radius: 0 calc(1.2 * var(--u)) calc(1.2 * var(--u)) 0;
  background: rgba(255,255,255,0.5);
}

@media (prefers-reduced-motion: reduce) {
  .mac-app { transition: none !important; }
  .mac-app:hover, .mac-app:hover + .mac-app { transform: none !important; }
}