/* Zarfika — ortak cihaz önizlemesi (#620). Tek CSS kaynağı: hero, demo penceresi, sihirbaz, panel düzenleme.
   Sözleşme: docs/devir/620.md. Mantıksal ekran 390 × (47 + 844): üstte durum çubuğu, altında 390×844 iframe.
   Sayfa yalnız --device-screen-w (uzunluk) verir; --device-scale'i js/device-phone.js yazar.
   Çerçeve saf CSS: ince bezel (metal kenar + siyah cam), ekranla eşmerkezli yarıçap, ada, 3 sol + 1 sağ tuş,
   katmanlı gölge. Mantıksal ölçüler (px) 390 genişlikli ekrana göredir ve --device-scale ile küçülür.
   Renkler yalnız token'lardan türetilir (color-mix + white/black); hex yok. */
/* Varsayılan genişlik :where() ile sıfır özgüllükte: host'un tek sınıflık kuralı (ör. .hero__device) her zaman kazanır,
   device.css host CSS'inden sonra yüklense bile. */
:where(.device) { --device-screen-w: 316px; --device-scale: calc(316 / 390); }
/* Çerçeve kalınlığı sabittir ve :root'ta durur: host kapsayıcılar (ör. sihirbazın .wz-preview'u) cihazın atasıdır,
   .device üzerindeki değeri göremez. Tek kaynak burası (görev 658). */
:root { --device-bezel: 10px; }         /* metal kenar + siyah cam; host hesabında adıyla kullanılır */
.device {
  --device-rim: 2px;                    /* metal kenar kalınlığı (bezel'in içinde) */
  --device-statusbar-h: 47px;
  --device-screen-radius: 55px;         /* 390 pt ekranlı güncel telefonlarda ekran köşe yarıçapı */
  --device-island-w: 122px;
  --device-island-h: 34px;
  --device-island-top: 11px;            /* 11 + 34 = 45 ≤ 47: ada durum çubuğunun içinde, iframe'i örtmez */
  --device-button-w: 3px;
  --device-outer-radius: calc(var(--device-screen-radius) * var(--device-scale) + var(--device-bezel));
  /* Titanyum tonları: mürekkep ve açık mürekkep token'larından karışım */
  --device-metal-hi: color-mix(in srgb, var(--color-text-on-ink-muted) 55%, white);
  --device-metal-mid: color-mix(in srgb, var(--color-text-on-ink-muted) 70%, var(--color-surface-ink));
  --device-metal-lo: color-mix(in srgb, var(--color-surface-ink) 70%, var(--color-text-on-ink-muted));
  --device-glass: color-mix(in srgb, var(--color-surface-ink) 45%, black);
  --device-statusbar-fg: var(--color-text);
  position: relative; display: block; box-sizing: content-box;
  width: var(--device-screen-w); padding: var(--device-bezel);
  border-radius: var(--device-outer-radius);
  /* metal kenar: köşelerde ışık yakalayan çapraz gradyan */
  background: linear-gradient(135deg, var(--device-metal-hi) 0%, var(--device-metal-lo) 16%, var(--device-metal-mid) 38%,
    var(--device-metal-lo) 60%, var(--device-metal-hi) 82%, var(--device-metal-lo) 100%);
  box-shadow:
    inset 0 0 0 0.5px color-mix(in srgb, white 45%, transparent),
    inset 0 1px 1px color-mix(in srgb, white 55%, transparent),
    0 1px 2px color-mix(in srgb, var(--color-surface-ink) 22%, transparent),
    0 12px 24px -8px color-mix(in srgb, var(--color-surface-ink) 26%, transparent),
    0 40px 80px -24px color-mix(in srgb, var(--color-surface-ink) 38%, transparent);
}
/* siyah cam bezel: metal kenarın içinde, ekranla eşmerkezli */
.device::before {
  content: ""; position: absolute; inset: var(--device-rim);
  border-radius: calc(var(--device-outer-radius) - var(--device-rim));
  background: var(--device-glass);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, black 60%, transparent), inset 0 0 2px 1px color-mix(in srgb, white 8%, transparent);
}
.device__screen {
  position: relative; z-index: 1; width: var(--device-screen-w); aspect-ratio: 390 / 891; overflow: hidden;
  border-radius: calc(var(--device-screen-radius) * var(--device-scale));
  background: var(--device-screen-bg, var(--color-surface));
}
.device__statusbar {
  position: absolute; left: 0; top: 0; width: 390px; height: var(--device-statusbar-h); box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between; padding: 3px 26px 0 50px;
  color: var(--device-statusbar-fg); background: var(--device-screen-bg, var(--color-surface));
  transform: scale(var(--device-scale)); transform-origin: 0 0;
}
.device[data-device-tone="light"] { --device-statusbar-fg: var(--color-text-on-ink); }
.device__time { width: 54px; text-align: center; font: var(--weight-semibold) 17px / 1 var(--font-ui); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.device__indicators { display: flex; align-items: center; gap: 6px; }
.device__indicators svg { display: block; fill: currentColor; }
.device__viewport {
  position: absolute; left: 0; right: 0; bottom: 0; top: calc(var(--device-statusbar-h) * var(--device-scale)); overflow: hidden;
  /* tam piksele yukarı yuvarla: kesirli ölçekte iframe durum çubuğunun altına 0,01 px bile binmesin */
  top: round(up, calc(var(--device-statusbar-h) * var(--device-scale)), 1px);
}
.device__viewport > iframe {
  position: absolute; left: 0; top: 0; width: 390px; height: 844px; border: 0;
  transform: scale(var(--device-scale)); transform-origin: 0 0;
}
.device__island, .device__button { position: absolute; }
.device__island {
  z-index: 2; left: 50%; top: calc(var(--device-island-top) * var(--device-scale));
  width: calc(var(--device-island-w) * var(--device-scale)); height: calc(var(--device-island-h) * var(--device-scale));
  transform: translateX(-50%); border-radius: 999px; background: black;
  box-shadow: inset 0 0 0 0.5px color-mix(in srgb, white 10%, transparent);
}
/* kamera merceği: adanın sağında hafif parıltı */
.device__island::after {
  content: ""; position: absolute; top: 50%; right: calc(18px * var(--device-scale)); width: calc(11px * var(--device-scale)); aspect-ratio: 1 / 1;
  transform: translateY(-50%); border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--color-info, white) 40%, black) 0 20%, color-mix(in srgb, white 6%, black) 45%, black 70%);
}
/* yan tuşlar: çerçevenin dışına taşan metal çubuklar (üst kenar ekran tepesinden mantıksal px) */
.device__button {
  width: var(--device-button-w);
  background: linear-gradient(90deg, var(--device-metal-lo), var(--device-metal-hi) 45%, var(--device-metal-mid));
  box-shadow: 0 0 1px color-mix(in srgb, var(--color-surface-ink) 45%, transparent);
}
.device__button--action, .device__button--volume-up, .device__button--volume-down {
  left: calc(-1 * var(--device-button-w) + 0.5px); border-radius: 2px 0 0 2px;
}
.device__button--power { right: calc(-1 * var(--device-button-w) + 0.5px); border-radius: 0 2px 2px 0; }
.device__button--action { top: calc(var(--device-bezel) + 118px * var(--device-scale)); height: calc(32px * var(--device-scale)); }
.device__button--volume-up { top: calc(var(--device-bezel) + 178px * var(--device-scale)); height: calc(62px * var(--device-scale)); }
.device__button--volume-down { top: calc(var(--device-bezel) + 254px * var(--device-scale)); height: calc(62px * var(--device-scale)); }
.device__button--power { top: calc(var(--device-bezel) + 214px * var(--device-scale)); height: calc(100px * var(--device-scale)); }

/* Çerçevesiz (tam genişlik) kip: mobil sayfa/pencere. --bare-md ≤1023 px, --bare-sm ≤599 px. */
@media (max-width: 1023px) {
  .device--bare-md { width: 100%; height: 100%; padding: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .device--bare-md::before { display: none; }
  .device--bare-md .device__screen { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
  .device--bare-md .device__statusbar, .device--bare-md .device__island, .device--bare-md .device__button { display: none; }
  .device--bare-md .device__viewport { top: 0; }
  .device--bare-md .device__viewport > iframe { width: 100%; height: 100%; transform: none; }
}
@media (max-width: 599px) {
  .device--bare-sm { width: 100%; height: 100%; padding: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .device--bare-sm::before { display: none; }
  .device--bare-sm .device__screen { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
  .device--bare-sm .device__statusbar, .device--bare-sm .device__island, .device--bare-sm .device__button { display: none; }
  .device--bare-sm .device__viewport { top: 0; }
  .device--bare-sm .device__viewport > iframe { width: 100%; height: 100%; transform: none; }
}