/* Dock panel (assets/js/sim/dockpanel.js). Source/DockPanel.swift at an 80 pt Dock bar: pad 9, card 300 × 62 (tile 62),
   card corners 13, bar corners 22, separator 1 × 48 white .22, dots 3.5 pt 3 apart (.85 / .25), card background
   "Koyu" = black .9; DockFont = SF Rounded (number/title semibold, label medium). Dock glass: hairlines black .51
   (0.5 pt) outside and white .15 (1 pt) inside; shadow .265 / 20. */
[data-sim="dockpanel"] .cv { --r: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --acc: rgb(122,179,250); }
[data-sim="dockpanel"] .cv.desk { background-position: center 88%; }
[data-sim="dockpanel"] :where(.cv button) { border: 0; padding: 0; background: none; cursor: pointer; font: inherit; color: inherit; }

/* ---------- the controls (Ayarlar › Dock) ---------- */
[data-sim="dockpanel"] .ctl { position: absolute; z-index: 30; top: 14px; left: 14px; right: 14px; display: flex; flex-direction: column; gap: 8px; }
[data-sim="dockpanel"] .ctl .row { display: flex; gap: 8px; flex-wrap: wrap; }
[data-sim="dockpanel"] .ctl .grp { display: inline-flex; align-items: center; gap: 8px; padding: 4px 4px 4px 13px; border-radius: 19px; font: 600 14px/1 var(--ui);
  background: rgba(0,0,0,.42); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: inset 0 0 0 .7px rgba(255,255,255,.14); }
[data-sim="dockpanel"] .ctl .grp:not(:has(.lb)) { padding-left: 4px; }
[data-sim="dockpanel"] .ctl .lb { color: rgba(255,255,255,.82); white-space: nowrap; }
[data-sim="dockpanel"] .ctl .seg { display: inline-flex; gap: 2px; }
[data-sim="dockpanel"] .ctl .seg button { padding: 6px 11px; border-radius: 15px; color: rgba(255,255,255,.72); font: 600 14px/1 var(--ui); white-space: nowrap; transition: background .2s, color .2s; }
[data-sim="dockpanel"] .ctl .seg button:hover { color: #fff; }
[data-sim="dockpanel"] .ctl .seg button.on { background: rgba(255,255,255,.24); color: #fff; }
[data-sim="dockpanel"] .ctl .seg [data-play] { background: rgba(122,179,250,.32); color: #fff; }
[data-sim="dockpanel"] .try { bottom: calc(var(--db, 6px) + 98px); }
[data-sim="dockpanel"] .tap { position: absolute; z-index: 50; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: rgba(255,255,255,.45); pointer-events: none; animation: dp-tap .6s ease-out forwards; }
@keyframes dp-tap { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }

/* ---------- the macOS Dock (dark) ---------- */
[data-sim="dockpanel"] .bar, [data-sim="dockpanel"] .plate {
  background: rgba(34,34,40,.42); -webkit-backdrop-filter: blur(24px) saturate(1.7); backdrop-filter: blur(24px) saturate(1.7);
  box-shadow: 0 0 0 .5px rgba(0,0,0,.51), inset 0 0 0 1px rgba(255,255,255,.15), 0 0 20px rgba(0,0,0,.265);
}
[data-sim="dockpanel"] .bar { position: absolute; left: -60px; bottom: var(--db, 6px); height: 80px; border-radius: 22px; transition: width .42s cubic-bezier(.3,1.12,.45,1); }
[data-sim="dockpanel"] .icons { position: absolute; right: 100%; bottom: var(--db, 6px); height: 80px; display: flex; align-items: flex-start; transition: transform .35s ease; }
[data-sim="dockpanel"] .it { position: relative; flex: none; width: 64px; height: 80px; transition: width .35s ease; }
[data-sim="dockpanel"] .it img { position: absolute; left: 0; top: 4px; width: 64px; height: 64px; display: block; transition: opacity .35s; }
[data-sim="dockpanel"] .it.new { width: 0; }
[data-sim="dockpanel"] .it.new img { opacity: 0; }
[data-sim="dockpanel"] .it.run::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: rgba(255,255,255,.72); }
[data-sim="dockpanel"] .it.hop img { animation: dp-hop .64s 4; }
[data-sim="dockpanel"] .it.flash img { animation: dp-flash .5s; }
@keyframes dp-hop { 0%, 100% { transform: none; animation-timing-function: cubic-bezier(.2,.6,.4,1); } 50% { transform: translateY(-27px); animation-timing-function: cubic-bezier(.6,0,.8,.4); } }
@keyframes dp-flash { 50% { filter: brightness(.6); } }
[data-sim="dockpanel"] .dsep { flex: none; align-self: center; width: 1px; height: 54px; margin: 0 6px; margin-top: -2px; background: rgba(255,255,255,.22); border-radius: 1px; }

/* ---------- the panel ---------- */
[data-sim="dockpanel"] .panel { position: absolute; left: 0; bottom: var(--db, 6px); height: 80px; border-radius: 0 22px 22px 0; overflow: hidden; z-index: 2;
  transition: width .42s cubic-bezier(.3,1.12,.45,1), transform .35s ease; }
[data-sim="dockpanel"] .plate { position: absolute; inset: 0; border-radius: 22px; opacity: 0; display: none; }
[data-sim="dockpanel"] .psep { position: absolute; top: 16px; width: 1px; height: 48px; border-radius: 1px; background: rgba(255,255,255,.22); }
[data-sim="dockpanel"] .cv.apart .panel { border-radius: 22px; overflow: visible; }
[data-sim="dockpanel"] .cv.apart .plate { display: block; transition: opacity .3s; }
[data-sim="dockpanel"] .cv.apart.shown .plate { opacity: 1; }
[data-sim="dockpanel"] .cv.apart .psep { display: none; }
[data-sim="dockpanel"] .cv.apart .slot-clip { border-radius: 22px; }
/* macOS 26: the Dock and the panel's plate are Liquid Glass */
[data-sim="dockpanel"] .cv.apart .bar, [data-sim="dockpanel"] .cv.apart .plate {
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.07)); -webkit-backdrop-filter: blur(10px) saturate(1.8); backdrop-filter: blur(10px) saturate(1.8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42), inset 0 0 0 1px rgba(255,255,255,.18), inset 0 -1px 0 rgba(255,255,255,.1), 0 10px 30px rgba(0,0,0,.22);
}
[data-sim="dockpanel"] .slot { position: absolute; top: 9px; height: 62px; opacity: 0; transition: opacity .12s; }
[data-sim="dockpanel"] .cv.shown .slot { opacity: 1; transition: opacity .26s .17s; }
[data-sim="dockpanel"] .cv.apart .panel { -webkit-mask: none; }
[data-sim="dockpanel"] .cv.apart .slot { clip-path: inset(0 round 13px); }
[data-sim="dockpanel"] .ly { position: absolute; inset: 0; display: flex; gap: 9px; transition: opacity .35s ease-in-out; }
[data-sim="dockpanel"] .ly.enter { opacity: 0; transition: none; }
[data-sim="dockpanel"] .ly.leave { opacity: 0; }

/* a card: its own background and corners */
[data-sim="dockpanel"] .cd { position: relative; flex: none; height: 62px; border-radius: 13px; overflow: hidden; cursor: pointer; isolation: isolate; }
[data-sim="dockpanel"] .cd .bk { position: absolute; inset: 0; background: rgba(0,0,0,.9); }
[data-sim="dockpanel"] .cd .in { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--r); }
[data-sim="dockpanel"] .cd.full .in { padding: 0 14px; }
[data-sim="dockpanel"] .dots { position: absolute; top: 9px; height: 62px; z-index: 3; display: flex; align-items: flex-end; justify-content: center; pointer-events: none; }
[data-sim="dockpanel"] .dots span { display: flex; gap: 3px; padding: 3px 8px; pointer-events: auto; cursor: pointer; }
[data-sim="dockpanel"] .dots i { width: 3.5px; height: 3.5px; border-radius: 50%; background: rgba(255,255,255,.25); transition: background .35s; }
[data-sim="dockpanel"] .dots i.on { background: rgba(255,255,255,.85); }
[data-sim="dockpanel"] .dots.under { top: 71px; height: 9px; align-items: center; }
[data-sim="dockpanel"] .dots.under span { padding: 0 8px; height: 9px; align-items: center; }

/* ---------- card type (DockFont) ---------- */
[data-sim="dockpanel"] .cd :is(span, div) { line-height: 1.2; }
[data-sim="dockpanel"] .n13 { font: 600 13px/1.2 var(--r); } [data-sim="dockpanel"] .n15 { font: 600 15px/1.2 var(--r); }
[data-sim="dockpanel"] .n16 { font: 600 16px/1.2 var(--r); } [data-sim="dockpanel"] .n165 { font: 600 16.5px/1.2 var(--r); }
[data-sim="dockpanel"] .n23 { font: 600 23px/1.2 var(--r); } [data-sim="dockpanel"] .n27 { font: 600 27px/1.15 var(--r); }
[data-sim="dockpanel"] .t9 { font: 600 9px/1.2 var(--r); } [data-sim="dockpanel"] .t95 { font: 600 9.5px/1.2 var(--r); }
[data-sim="dockpanel"] .t10 { font: 600 10px/1.2 var(--r); } [data-sim="dockpanel"] .t115 { font: 600 11.5px/1.2 var(--r); }
[data-sim="dockpanel"] .t12 { font: 600 12px/1.2 var(--r); } [data-sim="dockpanel"] .t18 { font: 600 18px/1.2 var(--r); }
[data-sim="dockpanel"] .t24 { font: 600 24px/1.2 var(--r); }
[data-sim="dockpanel"] .l85 { font: 500 8.5px/1.2 var(--r); } [data-sim="dockpanel"] .l95 { font: 500 9.5px/1.2 var(--r); }
[data-sim="dockpanel"] .l10 { font: 500 10px/1.2 var(--r); } [data-sim="dockpanel"] .l11 { font: 500 11px/1.25 var(--r); }
[data-sim="dockpanel"] .dim65 { color: rgba(255,255,255,.65); } [data-sim="dockpanel"] .dim7 { color: rgba(255,255,255,.7); }
[data-sim="dockpanel"] .dim72 { color: rgba(255,255,255,.72); } [data-sim="dockpanel"] .dim75 { color: rgba(255,255,255,.75); }
[data-sim="dockpanel"] .dim8 { color: rgba(255,255,255,.8); } [data-sim="dockpanel"] .dim88 { color: rgba(255,255,255,.88); }
[data-sim="dockpanel"] .tn { font-variant-numeric: tabular-nums; }
[data-sim="dockpanel"] .ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
[data-sim="dockpanel"] .wrap { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
[data-sim="dockpanel"] .sy { display: block; flex: none; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
[data-sim="dockpanel"] .sy.ac { color: var(--acc); } [data-sim="dockpanel"] .sy.or { color: rgb(255,149,0); } [data-sim="dockpanel"] .sy.ye { color: rgb(255,204,0); }
[data-sim="dockpanel"] .sy.or-t { color: rgb(255,158,10); position: absolute; } [data-sim="dockpanel"] .sy.red { color: rgb(255,97,92); }
[data-sim="dockpanel"] .sy.wx-t { margin: 3px 0; }

/* ---------- card layouts ---------- */
[data-sim="dockpanel"] .vt { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; max-width: 100%; }
[data-sim="dockpanel"] .hz { display: flex; align-items: center; width: 100%; min-width: 0; }
[data-sim="dockpanel"] .g0 { gap: 0; } [data-sim="dockpanel"] .g2 { gap: 2px; } [data-sim="dockpanel"] .g3 { gap: 3px; } [data-sim="dockpanel"] .g4 { gap: 4px; }
[data-sim="dockpanel"] .g7 { gap: 7px; } [data-sim="dockpanel"] .g10 { gap: 10px; } [data-sim="dockpanel"] .g12 { gap: 12px; }
[data-sim="dockpanel"] .vs { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
[data-sim="dockpanel"] .vs.r { align-items: flex-end; flex: none; }
[data-sim="dockpanel"] .sp { flex: 1 1 2px; min-width: 2px; }
[data-sim="dockpanel"] .grow { flex: 1; }
[data-sim="dockpanel"] .art36, [data-sim="dockpanel"] .art40 { flex: none; display: block; border-radius: 8px; overflow: hidden; }
[data-sim="dockpanel"] .art36 { width: 36px; height: 36px; } [data-sim="dockpanel"] .art40 { width: 40px; height: 40px; }
[data-sim="dockpanel"] .art { width: 100%; height: 100%; object-fit: cover; display: block; }
[data-sim="dockpanel"] .bars { display: flex; align-items: flex-end; gap: var(--bg); flex: none; }
[data-sim="dockpanel"] .bars i { display: block; width: var(--bw); height: var(--bh); border-radius: .5px; background: var(--acc); transform-origin: 50% 100%;
  animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
[data-sim="dockpanel"] .bars.paused i { animation: none; transform: scaleY(.182); }
[data-sim="dockpanel"] .btns { display: flex; gap: 5px; flex: none; }
[data-sim="dockpanel"] .cd .btns button, [data-sim="dockpanel"] .sm, [data-sim="dockpanel"] .cd .x28 { display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.14); }
[data-sim="dockpanel"] .cd .btns button { width: 26px; height: 26px; }
[data-sim="dockpanel"] .sm { width: 18px; height: 18px; }
[data-sim="dockpanel"] .cd .x28 { width: 28px; height: 28px; flex: none; background: rgba(255,255,255,.15); }
[data-sim="dockpanel"] .cd button:active, [data-sim="dockpanel"] .cd [data-b]:active { opacity: .55; }
[data-sim="dockpanel"] .cov { flex: none; display: block; padding: 5px; border-radius: 8px; background: rgba(255,255,255,.08); }
[data-sim="dockpanel"] .cov img { width: 100%; height: 100%; object-fit: contain; display: block; }
[data-sim="dockpanel"] .prog { display: block; height: 2.5px; margin-top: 2px; border-radius: 2px; background: rgba(255,255,255,.18); overflow: hidden; }
[data-sim="dockpanel"] .prog i { display: block; height: 100%; border-radius: 2px; background: rgba(255,255,255,.85); }
[data-sim="dockpanel"] .mk { width: 100%; transition: opacity .4s ease-in-out; display: flex; justify-content: center; }
[data-sim="dockpanel"] .mk.fade { opacity: 0; }
[data-sim="dockpanel"] .mk-t { padding: 0 3px; gap: 1px; }
[data-sim="dockpanel"] .mk-row { display: flex; gap: 14px; width: 100%; }
[data-sim="dockpanel"] .mk-cell { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
[data-sim="dockpanel"] .mk-top { display: flex; align-items: center; gap: 4px; }
[data-sim="dockpanel"] .mk-top .ell { flex: 1; }
[data-sim="dockpanel"] .mk-top .t95 { flex: none; white-space: nowrap; }
[data-sim="dockpanel"] .mk-bot { display: flex; align-items: flex-end; gap: 6px; }
[data-sim="dockpanel"] .mk-bot .n165 { flex: 1; }
[data-sim="dockpanel"] .spark { flex: none; display: block; margin-bottom: 2px; }
[data-sim="dockpanel"] .lc { display: flex; flex-direction: column; gap: 3px; width: 100%; min-width: 0; }
[data-sim="dockpanel"] .lc-h { display: flex; align-items: center; gap: 5px; }
[data-sim="dockpanel"] .lc-h .ink { color: rgba(255,255,255,.75); }
[data-sim="dockpanel"] .cd .pill { flex: none; height: 26px; padding: 0 8.5px; border-radius: 13px; background: rgba(255,255,255,.15); font: 600 11.5px/26px var(--r); white-space: nowrap; }
[data-sim="dockpanel"] .cd .pill.al { display: flex; align-items: center; gap: 3px; padding: 0 8px; background: rgba(122,179,250,.38); }
[data-sim="dockpanel"] .tm-s { width: 22px; height: 32px; display: grid; place-items: center; flex: none; }
[data-sim="dockpanel"] .tt { position: relative; width: 50px; height: 50px; display: grid; place-items: center; }
[data-sim="dockpanel"] .tt .ring { position: absolute; inset: 0; }
[data-sim="dockpanel"] .tt-x { position: relative; font: 600 12.5px/1 var(--r); }
[data-sim="dockpanel"] .mc { display: flex; align-items: center; flex: none; }
[data-sim="dockpanel"] .mc-r { position: relative; display: grid; place-items: center; flex: none; }
[data-sim="dockpanel"] .mc-r .ring { position: absolute; inset: 0; }
[data-sim="dockpanel"] .ring circle { transition: stroke-dashoffset 1s linear; }
[data-sim="dockpanel"] .mc-x { font-family: var(--r); font-weight: 600; line-height: 1; letter-spacing: -.4px; white-space: nowrap; }

/* ---------- the hourly sky (DockWeather.swift) ---------- */
[data-sim="dockpanel"] .sky { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  clip-path: circle(0px at var(--fx) var(--fy)); transition: clip-path .8s cubic-bezier(.45,0,.3,1), opacity .25s linear; }
[data-sim="dockpanel"] .sky.open { opacity: 1; clip-path: circle(var(--reach) at var(--fx) var(--fy)); }
[data-sim="dockpanel"] .sky.open.closing { opacity: 0; clip-path: circle(0px at var(--fx) var(--fy)); transition: clip-path .75s cubic-bezier(.45,0,.55,1), opacity .3s linear .45s; }
[data-sim="dockpanel"] .sky svg { position: absolute; inset: 0; display: block; }
[data-sim="dockpanel"] .sky .cl-in { animation: dp-enter 1.4s cubic-bezier(.3,0,.2,1) both; }
[data-sim="dockpanel"] .sky .cl-dr { animation: dp-drift 9s linear both; }
[data-sim="dockpanel"] .sky .fld { animation: dp-field 9s ease-in-out both; }
[data-sim="dockpanel"] .sky .f2 { animation-direction: reverse; }
@keyframes dp-enter { from { transform: translateX(var(--enter)); } to { transform: none; } }
@keyframes dp-drift { from { transform: none; } to { transform: translateX(var(--drift)); } }
@keyframes dp-field { from { transform: translate(-8px, 2px); } to { transform: translate(10px, -3px); } }
[data-sim="dockpanel"] .sky .cap { position: absolute; inset: 0; color: #fff; text-shadow: 0 .5px 2.5px rgba(0,0,0,.3); animation: dp-cap .65s cubic-bezier(.4,0,.2,1) .5s both; }
[data-sim="dockpanel"] .sky .cap.f { display: flex; flex-direction: column; justify-content: center; padding-left: 15px; gap: 0; }
[data-sim="dockpanel"] .sky .cap.f .l11 { opacity: .9; margin-bottom: -1px; font-variant-numeric: tabular-nums; }
[data-sim="dockpanel"] .sky .cap.t { display: flex; align-items: flex-end; justify-content: center; padding-bottom: 3px; }
@keyframes dp-cap { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* checking only (sim.html?…&still): no transitions, so headless screenshots show where things end up */
[data-sim="dockpanel"] .cv.still *, [data-sim="dockpanel"] .cv.still .sky { transition: none !important; }
[data-sim="dockpanel"] .it .cal-m, [data-sim="dockpanel"] .it .cal-d { position: absolute; left: 0; width: 64px; text-align: center; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif; pointer-events: none; transition: opacity .35s; }
[data-sim="dockpanel"] .it .cal-m { top: 11.6px; font-size: 9.6px; line-height: 9px; font-weight: 600; letter-spacing: .2px; color: #fff; }
[data-sim="dockpanel"] .it .cal-d { top: 26px; font-size: 31px; line-height: 28px; font-weight: 300; letter-spacing: -.5px; color: #2b2b2d; }
[data-sim="dockpanel"] .it.hop .cal-m, [data-sim="dockpanel"] .it.hop .cal-d { animation: dp-hop .64s 4; }
[data-sim="dockpanel"] .it.new .cal-m, [data-sim="dockpanel"] .it.new .cal-d { opacity: 0; }

/* phone canvas (400 × 366): the screen crop on top, the controls under it on the page's own dark ground */
[data-sim="dockpanel"] .cv.phone.desk { background: #0a0c16; }
[data-sim="dockpanel"] .cv.phone::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 170px; background: #1b2340 url('/assets/img/wallpaper.jpg') center 85% / cover no-repeat; }
[data-sim="dockpanel"] .cv.phone .ctl { top: 184px; left: 12px; right: 12px; gap: 8px; }
[data-sim="dockpanel"] .cv.phone .ctl .row { display: contents; }
[data-sim="dockpanel"] .cv.phone .ctl { flex-direction: row; flex-wrap: wrap; align-content: flex-start; }
[data-sim="dockpanel"] .cv.phone .ctl .grp { font-size: 15px; background: rgba(255,255,255,.08); }
[data-sim="dockpanel"] .cv.phone .ctl .seg button { font-size: 15px; padding: 7px 11px; }
[data-sim="dockpanel"] .cv.phone .try { bottom: auto; top: 22px; font-size: 16px; }
/* a fingertip-sized target round the dots, without moving them */
[data-sim="dockpanel"] .cv.phone .dots span { padding: 9px 16px; margin-bottom: -6px; }
[data-sim="dockpanel"] .cv.phone .dots.under span { padding: 9px 16px; height: auto; margin: -6px 0; }