/* Lock screen simulation (assets/js/sim/lock.js). Screen 1512 × 982 pt at the top of the canvas, the app's
   Settings › Lock Screen controls under it. Values from Source/LockScreen.swift, LockClockFaces.swift, ClockFaces.swift. */
[data-sim="lock"] > .cv { background: #121317; }
[data-sim="lock"] .lk-screen { position: absolute; left: 0; top: 0; width: 1512px; height: 982px; overflow: hidden; border-radius: 22px 22px 14px 14px; background: #000; isolation: isolate; }
[data-sim="lock"] .lk-screen * { pointer-events: none; }
[data-sim="lock"] .lk-screen .lk-wrow, [data-sim="lock"] .lk-screen .lk-wrow * { pointer-events: auto; }

/* backgrounds */
[data-sim="lock"] .lk-bg { position: absolute; inset: 0; opacity: 0; transition: opacity .45s ease; }
[data-sim="lock"] .lk-bg.on { opacity: 1; }
[data-sim="lock"] .lk-bg.desk::before { content: ""; position: absolute; inset: 0; background: url('/assets/img/wallpaper.jpg') center / cover; filter: blur(26px); transform: scale(1.08); }
[data-sim="lock"] .lk-bg img, [data-sim="lock"] .lk-bg video { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
[data-sim="lock"] .lk-peak { position: absolute; left: -96px; top: 196px; width: 1704px; height: auto; max-width: none; }
[data-sim="lock"] .lk-dim { position: absolute; inset: 0; background: #000; opacity: .25; }

/* layers: picture → clock → the picture's subject → date, widgets, text */
[data-sim="lock"] .lk-clock { position: absolute; left: 0; width: 1512px; display: flex; align-items: center; justify-content: center; z-index: 2; transition: opacity .35s ease; }
[data-sim="lock"] .lk-glass { position: absolute; left: 0; top: 0; z-index: 2; overflow: visible; }
[data-sim="lock"] .lk-depth { position: absolute; inset: 0; z-index: 3; opacity: 0; transition: opacity .5s ease; }
[data-sim="lock"] .lk-depth.on { opacity: 1; }
[data-sim="lock"] .lk-depth img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.75); }
[data-sim="lock"] .lk-date { position: absolute; left: 0; width: 1512px; z-index: 4; text-align: center; font: 500 19.7px/1 var(--rounded); color: rgba(255,255,255,.88); text-shadow: 0 0 8px rgba(0,0,0,.3); transform: translateY(-50%); }
[data-sim="lock"] .lk-label { position: absolute; z-index: 5; left: 0; width: 1512px; top: 828px; transform: translateY(-50%); display: flex; justify-content: center; align-items: center; gap: 5px; font: 400 12px/1 var(--ui); color: rgba(255,255,255,.6); transition: opacity .3s ease; }
[data-sim="lock"] .lk-label i { width: 9px; height: 12px; background: currentColor; -webkit-mask: url('/assets/ui/sym-lock-fill.png') center / contain no-repeat; mask: url('/assets/ui/sym-lock-fill.png') center / contain no-repeat; }
[data-sim="lock"] .lk-screen { --rounded: ui-rounded, "SF Pro Rounded", "SF Compact Rounded", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --ink: #fff; }
[data-sim="lock"] .lk-screen.light { --ink: rgb(18,23,38); }
[data-sim="lock"] .lk-screen.light .lk-date { color: rgba(18,23,38,.75); text-shadow: none; }
[data-sim="lock"] .lk-screen.light .lk-label { color: rgba(0,0,0,.5); }

/* widget cards (LockWidgetsRow: padding 14, min height 74, radius 20, ultraThinMaterial, 0.7 pt hairline) */
[data-sim="lock"] .lk-wrow { position: absolute; z-index: 4; display: flex; gap: 14px; color: var(--ink); filter: drop-shadow(0 4px 10px rgba(0,0,0,.2)); transform: translate(-50%, -50%); transition: left .45s cubic-bezier(.3,1,.3,1), top .45s cubic-bezier(.3,1,.3,1); touch-action: none; }
[data-sim="lock"] .lk-wrow.dragging { transition: none; }
[data-sim="lock"] .lk-wrow::after { content: ""; position: absolute; inset: -8px; border-radius: 22px; border: 1px dashed currentColor; opacity: 0; transition: opacity .2s; pointer-events: none; }
[data-sim="lock"] .lk-screen.preview .lk-wrow { cursor: grab; }
[data-sim="lock"] .lk-screen.preview .lk-wrow::after { opacity: .35; }
[data-sim="lock"] .lk-screen.preview .lk-wrow.dragging::after { opacity: .7; }
[data-sim="lock"] .lk-card { display: flex; align-items: center; gap: 10px; min-height: 74px; padding: 14px; border-radius: 20px; white-space: nowrap;
  background: rgba(120,124,140,.26); -webkit-backdrop-filter: blur(30px) saturate(1.6); backdrop-filter: blur(30px) saturate(1.6); box-shadow: inset 0 0 0 .7px rgba(255,255,255,.12); animation: lk-pop .38s cubic-bezier(.3,1.35,.4,1); }
[data-sim="lock"] .lk-screen.light .lk-card { background: rgba(255,255,255,.42); }
@keyframes lk-pop { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } }
[data-sim="lock"] .lk-card .big { font: 500 24px/1.05 var(--rounded); font-variant-numeric: tabular-nums; }
[data-sim="lock"] .lk-card .mid { font: 500 22px/1.05 var(--rounded); }
[data-sim="lock"] .lk-card .sm { font: 400 11px/1.25 var(--ui); opacity: .7; margin-top: 2px; }
[data-sim="lock"] .lk-card .ttl { font: 600 12px/1.25 var(--ui); }
[data-sim="lock"] .lk-card .sym { flex: none; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
[data-sim="lock"] .lk-card .multi { flex: none; width: 34px; height: 28px; background: center / contain no-repeat; }
[data-sim="lock"] .lk-card .art { width: 46px; height: 46px; border-radius: 10px; background: center / cover; flex: none; }
[data-sim="lock"] .lk-card .ring { position: relative; width: 40px; height: 40px; flex: none; display: grid; place-items: center; }
[data-sim="lock"] .lk-card .ring svg { position: absolute; inset: 0; }
[data-sim="lock"] .lk-mk { display: flex; gap: 18px; }
[data-sim="lock"] .lk-mk .p { font: 500 19px/1.1 var(--rounded); font-variant-numeric: tabular-nums; margin: 3px 0; }
[data-sim="lock"] .lk-mk .c { display: flex; align-items: center; gap: 6px; font: 600 11px/1 var(--ui); }

/* the macOS password area, seen through a soft window while someone uses the keyboard or pointer */
[data-sim="lock"] .lk-hole { position: absolute; z-index: 8; left: 586px; top: 718px; width: 340px; height: 220px; opacity: 0; transition: opacity .6s ease;
  -webkit-mask: var(--hole) center / 100% 100% no-repeat; mask: var(--hole) center / 100% 100% no-repeat; }
[data-sim="lock"] .lk-hole.on { opacity: 1; transition-duration: .25s; }
[data-sim="lock"] .lk-hole .sys { position: absolute; left: -586px; top: -718px; width: 1512px; height: 982px; background: url('/assets/img/wallpaper.jpg') center / cover; filter: blur(30px) brightness(.8); transform: scale(1.06); }
[data-sim="lock"] .lk-hole .who { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; color: #fff; font: 600 15px/1 -apple-system, system-ui, sans-serif; }
[data-sim="lock"] .lk-hole .av { width: 58px; height: 58px; border-radius: 50%; background: linear-gradient(180deg, #a9adb8, #7d828e); display: grid; place-items: center; }
[data-sim="lock"] .lk-hole .av i { width: 30px; height: 30px; background: rgba(255,255,255,.95); -webkit-mask: url('/assets/ui/sym-person-fill.png') center / contain no-repeat; mask: url('/assets/ui/sym-person-fill.png') center / contain no-repeat; }
[data-sim="lock"] .lk-hole .pw { width: 172px; height: 28px; border-radius: 14px; background: rgba(255,255,255,.22); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.3); font: 400 12.5px/28px -apple-system, system-ui, sans-serif; color: rgba(255,255,255,.62); padding-left: 12px; }
[data-sim="lock"] .lk-hole .hint { font: 400 11px/1 -apple-system, system-ui, sans-serif; color: rgba(255,255,255,.62); }

/* preview chrome (Settings › Önizle) */
[data-sim="lock"] .lk-login { position: absolute; z-index: 6; left: 586px; top: 718px; opacity: 0; transition: opacity .3s; }
[data-sim="lock"] .lk-pvlabel { position: absolute; z-index: 9; right: 20px; top: 20px; padding: 5px 10px; border-radius: 20px; background: rgba(0,0,0,.4); font: 400 11px/1.2 var(--ui); color: #fff; opacity: 0; transition: opacity .3s; }
[data-sim="lock"] .lk-screen.preview .lk-login, [data-sim="lock"] .lk-screen.preview .lk-pvlabel { opacity: 1; }
[data-sim="lock"] .lk-screen.preview .lk-label { opacity: .5; }

/* the desktop (before "Lock now") */
[data-sim="lock"] .lk-desk { position: absolute; inset: 0; z-index: 20; background: url('/assets/img/wallpaper.jpg') center / cover; opacity: 0; transition: opacity .35s ease; }
[data-sim="lock"] .lk-desk.on { opacity: 1; }
[data-sim="lock"] .lk-desk .mb { position: absolute; left: 0; right: 0; top: 0; height: 37px; padding: 0 14px 0 20px; display: flex; align-items: center; justify-content: space-between; font: 500 13.5px/1 var(--ui); color: rgba(255,255,255,.92); background: rgba(10,14,30,.18); -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); }
[data-sim="lock"] .lk-desk .mb .l, [data-sim="lock"] .lk-desk .mb .r { display: flex; align-items: center; gap: 18px; }
[data-sim="lock"] .lk-desk .mb img { height: 15px; }
[data-sim="lock"] .lk-desk .notch { position: absolute; left: 50%; top: 0; width: 254px; height: 37px; margin-left: -127px; background: #000; border-radius: 0 0 14px 14px; }
[data-sim="lock"] .lk-fade { position: absolute; inset: 0; z-index: 21; background: #000; opacity: 0; transition: opacity .25s ease; }
[data-sim="lock"] .lk-fade.on { opacity: 1; }

/* faces */
[data-sim="lock"] .fc { position: relative; display: flex; align-items: center; justify-content: center; color: var(--tint, #fff); }
[data-sim="lock"] .fc svg { display: block; overflow: visible; }
[data-sim="lock"] .fc-digital span { display: block; white-space: nowrap; line-height: 1; font-variant-numeric: tabular-nums; transform-origin: 50% 50%; }
[data-sim="lock"] .fc-flip { gap: var(--gap); filter: drop-shadow(0 var(--sy) var(--sr) rgba(0,0,0,var(--so))); }
[data-sim="lock"] .flip { position: relative; flex: none; perspective: calc(var(--h) * 2.5); }
[data-sim="lock"] .flip .half { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; }
[data-sim="lock"] .flip .half.t { top: 0; } [data-sim="lock"] .flip .half.b { bottom: 0; }
[data-sim="lock"] .flip .face { position: absolute; left: 0; width: 100%; height: calc(var(--h) * 1px); border-radius: calc(var(--h) * .1px); display: flex; align-items: center; justify-content: center; }
[data-sim="lock"] .flip .half.b .face { bottom: 0; }
[data-sim="lock"] .flip .flap { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; backface-visibility: hidden; }
[data-sim="lock"] .flip .flap.t { top: 0; transform-origin: 50% 100%; animation: lk-flapT .25s ease-in forwards; }
[data-sim="lock"] .flip .flap.b { bottom: 0; transform-origin: 50% 0; transform: rotateX(90deg); animation: lk-flapB .25s .25s ease-out forwards; }
[data-sim="lock"] .flip .flap.b .face { bottom: 0; }
@keyframes lk-flapT { to { transform: rotateX(-90deg); filter: brightness(.7); } }
@keyframes lk-flapB { from { transform: rotateX(90deg); filter: brightness(.7); } to { transform: rotateX(0); filter: none; } }
[data-sim="lock"] .fc-words { flex-direction: column; align-items: flex-start; }
[data-sim="lock"] .fc-words div { white-space: nowrap; line-height: 1.2; }
[data-sim="lock"] .fc-min { flex-direction: column; }
[data-sim="lock"] .fc-term { flex-direction: column; align-items: flex-start; justify-content: center; font-family: ui-monospace, "SF Mono", Menlo, monospace; }

/* ---------- the editor: Settings › Lock Screen ---------- */
[data-sim="lock"] .lk-ed { position: absolute; left: 0; top: 998px; width: 1512px; height: 402px; display: flex; gap: 16px; padding: 0 24px 24px; font: 500 15px/1.3 var(--ui); color: rgba(255,255,255,.92); }
[data-sim="lock"] .lk-col { display: flex; flex-direction: column; gap: 16px; }
[data-sim="lock"] .lk-sc { border-radius: 18px; background: rgba(255,255,255,.055); box-shadow: inset 0 0 0 .8px rgba(255,255,255,.09); padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
[data-sim="lock"] .lk-sc h4 { margin: 0; display: flex; align-items: center; gap: 8px; font: 600 16px/1 var(--ui); }
[data-sim="lock"] .lk-sc h4 i, [data-sim="lock"] .lk-tg i { width: 18px; height: 16px; background: rgba(255,255,255,.85); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; flex: none; }
[data-sim="lock"] .lk-sub { font: 600 14px/1 var(--ui); color: rgba(255,255,255,.8); }
[data-sim="lock"] .lk-note { font: 400 13px/1.35 var(--ui); color: rgba(255,255,255,.5); }
[data-sim="lock"] .lk-gal { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px 10px; }
[data-sim="lock"] .lk-pre { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; transition: opacity .3s; }
[data-sim="lock"] .lk-pre.off { opacity: .28; pointer-events: none; }
[data-sim="lock"] .lk-tile { border: 0; padding: 0; background: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; }
[data-sim="lock"] .lk-tile .pv { position: relative; width: 100%; height: 74px; border-radius: 13px; overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgb(20,33,69), rgb(69,51,102), rgb(140,84,97)); box-shadow: inset 0 0 0 .7px rgba(255,255,255,.10); transition: box-shadow .2s, transform .15s; }
[data-sim="lock"] .lk-pre .lk-tile .pv { height: 52px; border-radius: 11px; }
[data-sim="lock"] .lk-tile:hover .pv { transform: translateY(-1px); }
[data-sim="lock"] .lk-tile.on .pv { box-shadow: inset 0 0 0 2px var(--accent); }
[data-sim="lock"] .lk-tile span { font: 400 13px/1.1 var(--ui); color: rgba(255,255,255,.55); white-space: nowrap; }
[data-sim="lock"] .lk-tile.on span { font-weight: 600; color: #fff; }
[data-sim="lock"] .lk-tile .pv > * { pointer-events: none; }
/* AdaSegmented */
[data-sim="lock"] .lk-seg { display: flex; gap: 2px; padding: 2px; border-radius: 16px; background: rgba(0,0,0,.22); box-shadow: inset 0 0 0 .7px rgba(255,255,255,.08); }
[data-sim="lock"] .lk-seg button { flex: 1; height: 28px; border: 0; border-radius: 14px; background: transparent; cursor: pointer; font: 500 13px/1 var(--ui); color: rgba(255,255,255,.55); white-space: nowrap; padding: 0 8px; transition: background .16s, color .16s; }
[data-sim="lock"] .lk-seg button.on { font-weight: 600; color: #fff; background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.09)); box-shadow: inset 0 0 0 .7px rgba(255,255,255,.16), 0 1px 3px rgba(0,0,0,.3); }
[data-sim="lock"] .lk-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 32px; }
[data-sim="lock"] .lk-media { font: 400 13px/1 var(--ui); color: rgba(255,255,255,.5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-sim="lock"] .lk-btn { border: 0; cursor: pointer; padding: 8px 13px; border-radius: 11px; font: 500 13px/1 var(--ui); color: rgba(255,255,255,.9); white-space: nowrap;
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.07)); box-shadow: inset 0 0 0 .7px rgba(255,255,255,.14), 0 1px 2px rgba(0,0,0,.25); transition: transform .1s; }
[data-sim="lock"] .lk-btn:active { transform: scale(.98); }
[data-sim="lock"] .lk-btn.dim { opacity: .45; cursor: default; }
[data-sim="lock"] .lk-sw { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; }
[data-sim="lock"] .lk-sw button { aspect-ratio: 1; border: 0; padding: 0; border-radius: 50%; cursor: pointer; box-shadow: inset 0 0 0 .7px rgba(255,255,255,.2); }
[data-sim="lock"] .lk-sw button.on { box-shadow: 0 0 0 2px #121317, 0 0 0 4px var(--accent); }
/* macOS-style checkbox toggles */
[data-sim="lock"] .lk-tg { display: flex; align-items: flex-start; gap: 9px; border: 0; background: none; padding: 3px 0; cursor: pointer; text-align: left; font: 500 14px/1.3 var(--ui); color: rgba(255,255,255,.9); }
[data-sim="lock"] .lk-tg b { width: 16px; height: 16px; margin-top: 1px; border-radius: 4px; flex: none; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 .7px rgba(255,255,255,.25); display: grid; place-items: center; transition: background .15s; }
[data-sim="lock"] .lk-tg.on b { background: var(--accent); box-shadow: none; }
[data-sim="lock"] .lk-tg.on b::after { content: ""; width: 9px; height: 5px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }
[data-sim="lock"] .lk-tg i { margin-top: 1px; }
[data-sim="lock"] .lk-wg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
[data-sim="lock"] .lk-ed .flash .pv, [data-sim="lock"] .lk-ed button.flash { animation: lk-flash .5s ease; }
@keyframes lk-flash { 40% { transform: scale(.95); filter: brightness(1.4); } }
[data-sim="lock"] .try { bottom: auto; top: 900px; }

/* ---------- phones (lock.js switches to a 760 × 2124 canvas under 700 px): the screen scaled to the width, the
   settings stacked under it in type large enough to read at ~45 % ---------- */
[data-sim="lock"] .cv.phone .lk-screen { transform: scale(.50265); transform-origin: 0 0; border-radius: 30px; }
[data-sim="lock"] .cv.phone .lk-ed { top: 508px; width: 760px; height: auto; flex-direction: column; padding: 0 16px 16px; gap: 14px; font-size: 24px; }
[data-sim="lock"] .cv.phone .lk-col { width: auto !important; gap: 14px; }
[data-sim="lock"] .cv.phone .lk-sc { padding: 20px 22px; gap: 16px; border-radius: 22px; }
[data-sim="lock"] .cv.phone .lk-sc h4 { font-size: 27px; gap: 12px; }
[data-sim="lock"] .cv.phone .lk-sc h4 i { width: 28px; height: 24px; }
[data-sim="lock"] .cv.phone .lk-sub { font-size: 23px; }
[data-sim="lock"] .cv.phone .lk-note { font-size: 22px; }
[data-sim="lock"] .cv.phone .lk-gal { grid-template-columns: repeat(4, 1fr); gap: 16px 12px; }
[data-sim="lock"] .cv.phone .lk-pre { grid-template-columns: repeat(4, 1fr); gap: 16px 12px; }
[data-sim="lock"] .cv.phone .lk-tile { gap: 8px; }
[data-sim="lock"] .cv.phone .lk-tile .pv { height: 84px; }
[data-sim="lock"] .cv.phone .lk-pre .lk-tile .pv { height: 64px; }
[data-sim="lock"] .cv.phone .lk-tile span { font-size: 22px; }
[data-sim="lock"] .cv.phone .lk-seg { border-radius: 26px; padding: 3px; }
[data-sim="lock"] .cv.phone .lk-seg button { height: 48px; border-radius: 24px; font-size: 22px; }
[data-sim="lock"] .cv.phone .lk-media { font-size: 22px; }
[data-sim="lock"] .cv.phone .lk-btn { font-size: 23px; padding: 13px 20px; border-radius: 15px; }
[data-sim="lock"] .cv.phone .lk-tg { font-size: 24px; gap: 12px; }
[data-sim="lock"] .cv.phone .lk-tg b { width: 26px; height: 26px; border-radius: 7px; }
[data-sim="lock"] .cv.phone .lk-tg.on b::after { width: 13px; height: 7px; border-width: 3px; }
[data-sim="lock"] .cv.phone .lk-tg i { width: 26px; height: 22px; margin-top: 2px; }
[data-sim="lock"] .cv.phone .lk-wg { gap: 12px 16px; }
[data-sim="lock"] .cv.phone .lk-sw { gap: 10px; }
[data-sim="lock"] .cv.phone .lk-sc[style*="flex-direction:row"] { gap: 14px; }
[data-sim="lock"] .cv.phone .try { top: 420px; font-size: 25px; padding: 12px 20px; border-radius: 26px; }
[data-sim="lock"] .cv.phone .try kbd { font-size: 22px; }