/* Sallayınca Çark: Source/ShakeBasket.swift (WheelView), Transform.swift (Dönüştür panel), WheelExtras.swift (job strips),
   WheelHome.swift (Yeni yapılanlar), Pano Dosyalar rope (PanoLineView.swift). */
[data-sim="wheel"] .cv { background: #1b2340 url('/assets/img/wallpaper.jpg') center / cover no-repeat; touch-action: none; }
[data-sim="wheel"] .ic { display: inline-block; flex: none; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
[data-sim="wheel"] kbd { font: 700 13px/1 var(--ui); padding: 3px 6px; border-radius: 5px; background: rgba(255,255,255,.16); }

/* menu bar + notch */
[data-sim="wheel"] .mbar { position: absolute; z-index: 30; top: 0; left: 0; right: 0; height: 37px; padding: 0 14px 0 20px; display: flex; align-items: center; justify-content: space-between;
  font-size: 13.5px; font-weight: 500; color: rgba(255,255,255,.92); background: rgba(10,14,30,.18); -webkit-backdrop-filter: blur(40px) saturate(1.5); backdrop-filter: blur(40px) saturate(1.5); }
[data-sim="wheel"] .mbar .l, [data-sim="wheel"] .mbar .r { display: flex; align-items: center; gap: 20px; }
[data-sim="wheel"] .mbar .r { gap: 16px; } [data-sim="wheel"] .mbar .r img { height: 16px; display: block; } [data-sim="wheel"] .mbar b { font-weight: 700; }
[data-sim="wheel"] .notch { position: absolute; z-index: 42; top: 0; left: 50%; width: 200px; height: 37px; margin-left: -100px; background: #000; border-radius: 0 0 14px 14px; }
[data-sim="wheel"] .notch::before, [data-sim="wheel"] .notch::after { content: ""; position: absolute; top: 0; width: 8px; height: 8px; background: radial-gradient(circle at 0 100%, transparent 7.5px, #000 8px); }
[data-sim="wheel"] .notch::before { left: -8px; } [data-sim="wheel"] .notch::after { right: -8px; transform: scaleX(-1); }

/* Finder window */
[data-sim="wheel"] .finder { position: absolute; z-index: 10; border-radius: 12px; overflow: hidden; background: #1e1e1e; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  box-shadow: 0 0 0 .5px rgba(255,255,255,.16), 0 24px 60px rgba(0,0,0,.5); }
[data-sim="wheel"] .finder .tb { height: 44px; display: flex; align-items: center; padding-left: 86px; background: #2b2b2d; box-shadow: inset 0 -.5px 0 rgba(0,0,0,.7); font-size: 14px; font-weight: 700; color: rgba(255,255,255,.88); position: relative; }
[data-sim="wheel"] .finder .tl { position: absolute; left: 16px; top: 16px; display: flex; gap: 8px; }
[data-sim="wheel"] .finder .tl i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; }
[data-sim="wheel"] .finder .tl i:nth-child(2) { background: #febc2e; } [data-sim="wheel"] .finder .tl i:nth-child(3) { background: #28c840; }
[data-sim="wheel"] .finder .grid { display: flex; flex-wrap: wrap; gap: 10px 6px; padding: 18px 14px; }
[data-sim="wheel"] .file { width: 104px; display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: grab; touch-action: none; }
[data-sim="wheel"] .file .ico { width: 76px; height: 68px; border-radius: 6px; display: grid; place-items: center; }
[data-sim="wheel"] .file .ico img { max-width: 64px; max-height: 64px; display: block; }
[data-sim="wheel"] .file .ico img.th { border: 2px solid #fff; border-radius: 2px; box-shadow: 0 1px 3px rgba(0,0,0,.5); max-width: 60px; max-height: 56px; }
[data-sim="wheel"] .file .nm { max-width: 104px; padding: 1px 5px; border-radius: 4px; font-size: 11.5px; line-height: 15px; text-align: center; color: rgba(255,255,255,.9); word-break: break-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
[data-sim="wheel"] .file.sel .ico { background: rgba(255,255,255,.12); }
[data-sim="wheel"] .file.sel .nm { background: #0a5bd6; color: #fff; }
[data-sim="wheel"] .file.new { animation: w-pop .45s cubic-bezier(.3,1.6,.5,1); }
@keyframes w-pop { from { transform: scale(.4); opacity: 0; } }

/* the drag image */
[data-sim="wheel"] .ghost { position: absolute; z-index: 70; left: 0; top: 0; width: 104px; display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none; opacity: .82; font-family: -apple-system, sans-serif; }
[data-sim="wheel"] .ghost.back { transition: transform .32s cubic-bezier(.3,.9,.3,1), opacity .32s ease; opacity: 0; }
[data-sim="wheel"] .ghost .ico img { max-width: 64px; max-height: 64px; display: block; }
[data-sim="wheel"] .ghost .ico img.th { border: 2px solid #fff; border-radius: 2px; max-width: 60px; max-height: 56px; }
[data-sim="wheel"] .ghost .nm { padding: 1px 6px; border-radius: 4px; background: rgba(10,91,214,.9); font-size: 11.5px; color: #fff; max-width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* the wheel (Gece piyanosu): 410 × 454, the AirDrop key's centre under the pointer */
[data-sim="wheel"] .wheel { position: absolute; z-index: 60; width: 410px; height: 454px; padding: 10px; display: flex; flex-direction: column; align-items: center; gap: 8px;
  opacity: 0; transform: scale(.82); transform-origin: 205px 249px; pointer-events: none; transition: opacity .16s ease, transform .22s ease; }
[data-sim="wheel"] .wheel.on { opacity: 1; transform: none; pointer-events: auto; transition: opacity .16s ease, transform .5s cubic-bezier(.2,1.35,.35,1); }
[data-sim="wheel"] .tabs { height: 36px; display: flex; align-items: center; }
[data-sim="wheel"] .tabs .cap { display: flex; gap: 3px; padding: 3px; border-radius: 20px; background: rgba(23,24,28,.92); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
[data-sim="wheel"] .tab { display: flex; align-items: center; gap: 5px; height: 26px; padding: 0 11px; border-radius: 13px; font-size: 11px; font-weight: 600; color: rgba(255,255,255,.6); cursor: pointer; transition: background .15s, color .15s; }
[data-sim="wheel"] .tab small { font: 700 10px/1 -apple-system, sans-serif; opacity: .6; }
[data-sim="wheel"] .tab.on { background: rgba(255,255,255,.14); color: #fff; }
[data-sim="wheel"] .disc { position: relative; width: 390px; height: 390px; border-radius: 50%; background: #0c0d10; box-shadow: 0 12px 36px rgba(0,0,0,.5); }
[data-sim="wheel"] .ring { position: absolute; inset: 0; }
[data-sim="wheel"] .ring > svg { position: absolute; inset: 0; overflow: visible; }
[data-sim="wheel"] .key { transform-origin: 195px 195px; cursor: pointer; }
[data-sim="wheel"] .key .glow { opacity: 0; transition: opacity .14s ease; }
[data-sim="wheel"] .key.on .glow { opacity: .75; }
[data-sim="wheel"] .lbl { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 5px; pointer-events: none; color: rgba(255,255,255,.84); transition: color .14s; }
[data-sim="wheel"] .lbl .ic { width: 26px; height: 24px; }
[data-sim="wheel"] .lbl .bd { width: 44px; height: 26px; display: grid; place-items: center; border-radius: 7px; box-shadow: inset 0 0 0 1.2px currentColor; font: 800 13px/1 ui-rounded, -apple-system, sans-serif; letter-spacing: .4px; }
[data-sim="wheel"] .lbl .bd { box-shadow: inset 0 0 0 1.2px rgba(255,255,255,.42); }
[data-sim="wheel"] .lbl .tt { display: flex; align-items: center; gap: 2px; max-width: 96px; font-size: 10px; font-weight: 600; color: rgba(255,255,255,.55); white-space: nowrap; }
[data-sim="wheel"] .lbl .tt .ic { width: 5px; height: 8px; }
[data-sim="wheel"] .lbl.on { color: #14306b; } [data-sim="wheel"] .lbl.on .tt { color: #14306b; } [data-sim="wheel"] .lbl.on .bd { box-shadow: inset 0 0 0 1.2px rgba(20,48,107,.5); }
[data-sim="wheel"] .lbl.faded { opacity: .45; }
[data-sim="wheel"] .empty { position: absolute; left: 0; right: 0; top: 75px; text-align: center; font-size: 11px; color: rgba(255,255,255,.6); }
/* the middle: knurled aluminium ring around a lacquer key */
[data-sim="wheel"] .mid { position: absolute; left: 129px; top: 129px; width: 132px; height: 132px; border-radius: 50%; cursor: pointer;
  background: conic-gradient(from 90deg, #e0e0e0, #9e9e9e, #ccc, #737373, #e0e0e0); }
[data-sim="wheel"] .mid .knurl { position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(rgba(0,0,0,.22) 0 1deg, transparent 1deg 5deg);
  -webkit-mask: radial-gradient(circle, transparent 59.5px, #000 60px, #000 66px, transparent 66.5px); mask: radial-gradient(circle, transparent 59.5px, #000 60px, #000 66px, transparent 66.5px); }
[data-sim="wheel"] .mid .glow { position: absolute; left: 10px; top: 10px; width: 112px; height: 112px; border-radius: 50%; background: #59a1ff; filter: blur(9px); opacity: 0; transition: opacity .14s; }
[data-sim="wheel"] .mid .face { position: absolute; left: 13px; top: 13px; width: 106px; height: 106px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: linear-gradient(#2e3036, #17181c); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); color: rgba(255,255,255,.9); transition: color .14s; }
[data-sim="wheel"] .mid.on .glow { opacity: .75; }
[data-sim="wheel"] .mid.on .face { background: linear-gradient(#fbfaf6, #e4e1d8); box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); color: #14306b; }
[data-sim="wheel"] .mid .face b { font-size: 12px; font-weight: 600; }
[data-sim="wheel"] .mid .face small { font-size: 9px; opacity: .65; }
[data-sim="wheel"] .mid .face .bd { width: 46px; height: 26px; display: grid; place-items: center; border-radius: 7px; box-shadow: inset 0 0 0 1.2px currentColor; font: 800 13px/1 ui-rounded, -apple-system, sans-serif; opacity: .9; }
[data-sim="wheel"] .mid .face .ft { font-size: 10.5px; font-weight: 600; max-width: 88px; text-align: center; }
[data-sim="wheel"] .mid .face .ft2 { font-size: 8.5px; opacity: .6; }

/* job strips under the notch (WheelJobStrip, WheelJobDoneStrip) */
[data-sim="wheel"] .strip { position: absolute; z-index: 41; top: 0; left: 50%; background: #000; border-radius: 0 0 20px 20px; transform: translateX(-50%) scaleY(.4); transform-origin: 50% 0; opacity: 0;
  transition: transform .4s cubic-bezier(.2,1.2,.4,1), opacity .2s ease, width .4s cubic-bezier(.2,1.2,.4,1); pointer-events: none; }
[data-sim="wheel"] .strip.on { transform: translateX(-50%); opacity: 1; pointer-events: auto; }
[data-sim="wheel"] .strip .rowx { position: absolute; left: 14px; right: 14px; bottom: 0; height: 44px; display: flex; align-items: center; gap: 10px; }
[data-sim="wheel"] .strip.done .rowx { height: 48px; }
[data-sim="wheel"] .strip .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
[data-sim="wheel"] .strip .txt b { font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-sim="wheel"] .strip .txt span { font-size: 9.5px; color: rgba(255,255,255,.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-sim="wheel"] .strip .x { width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.14); display: grid; place-items: center; cursor: pointer; }
[data-sim="wheel"] .strip .x .ic { width: 8px; height: 8px; }
[data-sim="wheel"] .strip .reveal { height: 24px; padding: 0 10px; border-radius: 12px; display: grid; place-items: center; font-size: 10.5px; font-weight: 600; background: rgba(255,255,255,.14); cursor: pointer; white-space: nowrap; }
[data-sim="wheel"] .strip .reveal:hover { background: linear-gradient(#fbfaf6, #e4e1d8); color: #14306b; }
[data-sim="wheel"] .strip .ok { width: 24px; height: 24px; display: grid; place-items: center; color: #30d158; }
[data-sim="wheel"] .strip .ok .ic { width: 20px; height: 20px; }
[data-sim="wheel"] .pring { width: 24px; height: 24px; position: relative; display: grid; place-items: center; font: 700 8.5px/1 ui-rounded, -apple-system, sans-serif; font-variant-numeric: tabular-nums; }
[data-sim="wheel"] .pring svg { position: absolute; inset: 0; transform: rotate(-90deg); }

/* Dönüştür panel (TransformView), 340 × 640 */
[data-sim="wheel"] .tf { position: absolute; z-index: 50; width: 340px; height: 640px; border-radius: 22px; overflow: hidden; padding: 18px; display: flex; flex-direction: column; gap: 14px;
  background: rgba(20,21,26,.62); -webkit-backdrop-filter: blur(40px) saturate(1.6); backdrop-filter: blur(40px) saturate(1.6);
  box-shadow: inset 0 .8px 0 rgba(255,255,255,.28), inset 0 0 0 .8px rgba(255,255,255,.08), 0 30px 80px rgba(0,0,0,.5);
  opacity: 0; transform: scale(.94) translateY(10px); pointer-events: none; transition: opacity .2s ease, transform .4s cubic-bezier(.2,1.25,.4,1); font-size: 12px; }
[data-sim="wheel"] .tf.on { opacity: 1; transform: none; pointer-events: auto; }
[data-sim="wheel"] .tf .hd { display: flex; align-items: center; gap: 10px; }
[data-sim="wheel"] .tf .tile { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(rgba(115,97,250,.96), #5346b4); box-shadow: inset 0 .6px 0 rgba(255,255,255,.45), inset 0 0 0 .6px rgba(255,255,255,.08); }
[data-sim="wheel"] .tf .tile .ic { width: 16px; height: 15px; }
[data-sim="wheel"] .tf .hd .tt { flex: 1; display: flex; flex-direction: column; gap: 1px; }
[data-sim="wheel"] .tf .hd .tt b { font-size: 15px; font-weight: 600; } [data-sim="wheel"] .tf .hd .tt span { font-size: 11px; color: rgba(255,255,255,.55); }
[data-sim="wheel"] .glass { background: linear-gradient(rgba(255,255,255,.10), rgba(255,255,255,.045)); box-shadow: inset 0 0 0 .7px rgba(255,255,255,.14), inset 0 .7px 0 rgba(255,255,255,.22); }
[data-sim="wheel"] .glass.sel { background: linear-gradient(rgba(255,255,255,.17), rgba(255,255,255,.085)); box-shadow: inset 0 0 0 .7px rgba(255,255,255,.2), inset 0 .7px 0 rgba(255,255,255,.32), 0 2px 4px rgba(0,0,0,.2); }
[data-sim="wheel"] .tf .close { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
[data-sim="wheel"] .tf .close .ic { width: 10px; height: 10px; }
[data-sim="wheel"] .tf .files { display: flex; gap: 8px; padding: 2px 0; overflow: hidden; }
[data-sim="wheel"] .tf .files .f { width: 60px; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 9px; }
[data-sim="wheel"] .tf .files .f .th { width: 54px; height: 54px; display: grid; place-items: center; }
[data-sim="wheel"] .tf .files .f .th img { max-width: 54px; max-height: 54px; border-radius: 6px; }
[data-sim="wheel"] .tf .files .f span { width: 60px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-sim="wheel"] .tf .files .add .th { border-radius: 12px; } [data-sim="wheel"] .tf .files .add span { color: rgba(255,255,255,.55); }
[data-sim="wheel"] .tf .files .add .ic { width: 15px; height: 15px; }
[data-sim="wheel"] .tf .ops { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
[data-sim="wheel"] .tf .op { height: 52px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer; color: rgba(255,255,255,.7); font-size: 10px; }
[data-sim="wheel"] .tf .op .ic { width: 16px; height: 15px; }
[data-sim="wheel"] .tf .op.sel { color: #fff; box-shadow: inset 0 0 0 1.2px rgba(115,115,255,.75), inset 0 .7px 0 rgba(255,255,255,.32), 0 2px 4px rgba(0,0,0,.2); }
[data-sim="wheel"] .tf .opt { min-height: 30px; display: flex; flex-direction: column; justify-content: center; gap: 4px; color: rgba(255,255,255,.92); }
[data-sim="wheel"] .tf .opt .muted { color: rgba(255,255,255,.55); }
[data-sim="wheel"] .tf .opt .cap { font-size: 10px; color: rgba(255,255,255,.55); }
[data-sim="wheel"] .tf .hs { display: flex; align-items: center; gap: 8px; }
[data-sim="wheel"] .tf input[type=range] { flex: 1; accent-color: #fff; height: 18px; }
[data-sim="wheel"] .tf .pct { width: 38px; text-align: right; font-variant-numeric: tabular-nums; }
[data-sim="wheel"] .seg { display: flex; gap: 2px; padding: 2px; border-radius: 20px; background: rgba(0,0,0,.2); box-shadow: inset 0 0 0 .7px rgba(255,255,255,.08); }
[data-sim="wheel"] .seg span { flex: 1; height: 24px; padding: 0 8px; border-radius: 12px; display: grid; place-items: center; font-size: 11px; font-weight: 500; color: rgba(255,255,255,.55); cursor: pointer; white-space: nowrap; }
[data-sim="wheel"] .seg span.on { color: #fff; font-weight: 600; background: linear-gradient(rgba(255,255,255,.17), rgba(255,255,255,.085)); box-shadow: inset 0 0 0 .7px rgba(255,255,255,.2), 0 2px 4px rgba(0,0,0,.2); }
[data-sim="wheel"] .tf .pop { display: flex; align-items: center; gap: 8px; }
[data-sim="wheel"] .tf select { font: inherit; color: #fff; background: rgba(255,255,255,.1); border: 0; border-radius: 6px; padding: 3px 6px; box-shadow: inset 0 0 0 .7px rgba(255,255,255,.14); }
[data-sim="wheel"] .tf input[type=text] { font: 13px/1 -apple-system, sans-serif; color: #fff; background: rgba(0,0,0,.26); border: 0; border-radius: 6px; padding: 6px 8px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); outline: none; user-select: text; -webkit-user-select: text; }
[data-sim="wheel"] .tf input[type=text]:focus { box-shadow: inset 0 0 0 1.2px rgba(90,162,255,.55); }
[data-sim="wheel"] .tf .row2 { display: flex; align-items: center; gap: 8px; }
[data-sim="wheel"] .tf .row2 .lab { color: rgba(255,255,255,.55); }
[data-sim="wheel"] .tf .row2 .seg { width: 220px; margin-left: auto; }
[data-sim="wheel"] .tf .act { display: flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 10px; font-size: 10px; font-weight: 500; cursor: pointer; color: rgba(255,255,255,.9); }
[data-sim="wheel"] .tf .act .ic { width: 11px; height: 11px; }
[data-sim="wheel"] .tf .act:active { transform: scale(.98); }
[data-sim="wheel"] .tf .run { height: 42px; border-radius: 21px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; font-weight: 600; color: #000; cursor: pointer;
  background: linear-gradient(#fff, #dbdbdb); box-shadow: inset 0 0 0 .6px rgba(255,255,255,.6), 0 2px 6px rgba(0,0,0,.25); flex: none; }
[data-sim="wheel"] .tf .run:active { transform: scale(.97); }
[data-sim="wheel"] .tf .run.busy { opacity: .8; }
[data-sim="wheel"] .spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(0,0,0,.2); border-top-color: rgba(0,0,0,.7); animation: w-spin .8s linear infinite; }
@keyframes w-spin { to { transform: rotate(360deg); } }
[data-sim="wheel"] .tf .msg { font-size: 11px; color: rgba(255,255,255,.55); line-height: 1.35; }
[data-sim="wheel"] .tf .res { padding: 10px; border-radius: 12px; display: flex; flex-direction: column; gap: 4px; }
[data-sim="wheel"] .tf .res .r { display: flex; align-items: center; gap: 8px; font-size: 11px; }
[data-sim="wheel"] .tf .res .r img { width: 22px; height: 22px; object-fit: contain; border-radius: 3px; }
[data-sim="wheel"] .tf .res .r span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-sim="wheel"] .tf .res .r small { font-size: 10px; color: rgba(255,255,255,.55); }

/* Çark window: Yeni yapılanlar (the wheel's history, last 50) */
[data-sim="wheel"] .hist { position: absolute; z-index: 12; border-radius: 14px; overflow: hidden; background: rgba(12,14,18,.97); box-shadow: 0 0 0 .5px rgba(255,255,255,.14), 0 24px 60px rgba(0,0,0,.5);
  opacity: 0; transform: translateY(12px); transition: opacity .3s ease, transform .45s cubic-bezier(.2,1.2,.4,1); pointer-events: none; }
[data-sim="wheel"] .hist.on { opacity: 1; transform: none; pointer-events: auto; }
[data-sim="wheel"] .hist .tb { height: 38px; display: flex; align-items: center; justify-content: center; font: 600 13px/1 -apple-system, sans-serif; color: rgba(255,255,255,.8); position: relative; }
[data-sim="wheel"] .hist .tl { position: absolute; left: 14px; top: 13px; display: flex; gap: 8px; }
[data-sim="wheel"] .hist .tl i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; }
[data-sim="wheel"] .hist .tl i:nth-child(2) { background: #febc2e; } [data-sim="wheel"] .hist .tl i:nth-child(3) { background: #28c840; }
[data-sim="wheel"] .hist .bd { padding: 6px 18px 18px; display: flex; flex-direction: column; gap: 12px; }
[data-sim="wheel"] .hist .h { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
[data-sim="wheel"] .hist .h small { font-size: 10px; font-weight: 600; height: 18px; padding: 0 7px; border-radius: 9px; display: grid; place-items: center; background: rgba(255,255,255,.1); }
[data-sim="wheel"] .hist .list { padding: 6px; border-radius: 16px; background: rgba(255,255,255,.04); display: flex; flex-direction: column; gap: 2px; }
[data-sim="wheel"] .hist .r { display: flex; align-items: center; gap: 12px; padding: 7px 10px; border-radius: 14px; }
[data-sim="wheel"] .hist .r.new { animation: w-in .5s cubic-bezier(.2,1.2,.4,1); }
@keyframes w-in { from { opacity: 0; transform: translateY(-8px); } }
[data-sim="wheel"] .hist .r .fi { width: 38px; height: 38px; padding: 5px; border-radius: 10px; background: rgba(255,255,255,.06); flex: none; }
[data-sim="wheel"] .hist .r .fi img { width: 28px; height: 28px; object-fit: contain; display: block; }
[data-sim="wheel"] .hist .r .t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
[data-sim="wheel"] .hist .r .t b { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-sim="wheel"] .hist .r .t span { font-size: 10.5px; color: rgba(255,255,255,.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-sim="wheel"] .hist .r .ib { width: 28px; height: 26px; display: grid; place-items: center; color: rgba(255,255,255,.8); }
[data-sim="wheel"] .hist .r .ib .ic { width: 14px; height: 12px; }
[data-sim="wheel"] .hist .more { align-self: flex-start; padding: 7px 11px; border-radius: 10px; font-size: 10px; font-weight: 500; cursor: pointer; }

/* Pano's Dosyalar rope coming down for a moment (peek) */
[data-sim="wheel"] .peek { position: absolute; z-index: 20; top: 37px; left: 0; height: 212px; clip-path: inset(0 -200px -400px -200px); pointer-events: none; }
[data-sim="wheel"] .peek .slide { position: absolute; inset: 0; transform: translateY(-104%); transition: transform .22s cubic-bezier(.4,0,1,1); }
[data-sim="wheel"] .peek.down .slide { transform: none; transition: transform .42s cubic-bezier(.2,.85,.25,1); }
[data-sim="wheel"] .peek .rope { position: absolute; left: -20px; top: 0; overflow: visible;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); }
[data-sim="wheel"] .peek .head { position: absolute; left: 14px; top: 4px; display: flex; gap: 7px; align-items: center; font-size: 12.5px; font-weight: 600; }
[data-sim="wheel"] .peek .shelf { display: flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 20px; background: #a18cff; box-shadow: inset 0 0 0 .5px rgba(255,255,255,.12); }
[data-sim="wheel"] .peek .shelf .ic { width: 14px; height: 14px; }
[data-sim="wheel"] .peek .count { font: 600 11.5px/1 ui-rounded, -apple-system, sans-serif; color: rgba(255,255,255,.75); padding: 4px 8px; border-radius: 20px; background: rgba(0,0,0,.55); }
[data-sim="wheel"] .peek .hang { position: absolute; left: 0; top: 0; width: 150px; height: 140px; }
[data-sim="wheel"] .peek .sw { position: absolute; inset: 0; transform-origin: 75px 0; }
[data-sim="wheel"] .peek .clip { position: absolute; z-index: 2; left: 70.5px; top: 0; width: 9px; height: 26px; border-radius: 3.5px;
  background: linear-gradient(90deg, #b3b3b3 0, #ededed 35%, #d1d1d1 65%, #9e9e9e 100%); box-shadow: inset 0 .6px 0 rgba(255,255,255,.9), 0 1.5px 2px rgba(0,0,0,.3); }
[data-sim="wheel"] .peek .clip::after { content: ""; position: absolute; left: 2px; top: 8.5px; width: 5px; height: 1.4px; border-radius: 1px; background: rgba(0,0,0,.32); }
[data-sim="wheel"] .peek .card { position: absolute; top: 18px; left: 0; width: 150px; padding: 20px 8px 8px; border-radius: 16px;
  background: linear-gradient(rgba(161,140,255,.14), rgba(161,140,255,.14)), rgba(40,41,48,.95);
  box-shadow: inset 0 .7px 0 rgba(255,255,255,.22), inset 0 0 0 .7px rgba(255,255,255,.06), 0 5px 10px rgba(0,0,0,.22); }
[data-sim="wheel"] .peek .card .th { height: 38px; border-radius: 8px; display: grid; place-items: center; background: rgba(161,140,255,.14); overflow: hidden; }
[data-sim="wheel"] .peek .card .th img { height: 35px; }
[data-sim="wheel"] .peek .card .t { margin-top: 5px; height: 26px; font-size: 10px; font-weight: 600; line-height: 13px; overflow: hidden; word-break: break-all; }
[data-sim="wheel"] .peek .card .d { margin-top: 5px; font-size: 9px; color: rgba(255,255,255,.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* demo pointer and the outcome caption */
[data-sim="wheel"] .ptr { position: absolute; z-index: 80; left: 0; top: 0; width: 22px; height: 30px; pointer-events: none; opacity: 0; transition: opacity .3s; filter: drop-shadow(0 2px 3px rgba(0,0,0,.45)); }
[data-sim="wheel"] .ptr.on { opacity: 1; }
[data-sim="wheel"] .note { position: absolute; z-index: 45; left: 50%; bottom: 70px; transform: translate(-50%, 8px); max-width: 80%; padding: 9px 16px; border-radius: 20px; font-size: 14px; font-weight: 600; text-align: center;
  background: rgba(0,0,0,.6); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: inset 0 0 0 .7px rgba(255,255,255,.14); opacity: 0; transition: opacity .3s, transform .3s; pointer-events: none; }
[data-sim="wheel"] .note.on { opacity: 1; transform: translate(-50%, 0); }

/* phones (430 pt canvas): key text at least ~10 px on screen */
[data-sim="wheel"] .cv.ph .try, [data-sim="wheel"] .cv.ph .note { white-space: normal; width: 390px; max-width: none; text-align: center; font-size: 16px; }
[data-sim="wheel"] .cv.ph .lbl .tt { font-size: 12.5px; max-width: 104px; }
[data-sim="wheel"] .cv.ph .lbl .bd { font-size: 15px; }
[data-sim="wheel"] .cv.ph .tab { font-size: 13px; height: 30px; }
[data-sim="wheel"] .cv.ph .mid .face b { font-size: 14px; } [data-sim="wheel"] .cv.ph .mid .face small, [data-sim="wheel"] .cv.ph .mid .face .ft2 { font-size: 11px; }
[data-sim="wheel"] .cv.ph .mid .face .ft { font-size: 12.5px; }
[data-sim="wheel"] .cv.ph .file .nm { font-size: 13px; line-height: 16px; }
[data-sim="wheel"] .cv.ph .tf { font-size: 13.5px; }
[data-sim="wheel"] .cv.ph .tf .op { font-size: 12px; } [data-sim="wheel"] .cv.ph .tf .hd .tt span, [data-sim="wheel"] .cv.ph .tf .msg, [data-sim="wheel"] .cv.ph .tf .opt .cap { font-size: 12.5px; }
[data-sim="wheel"] .cv.ph .tf .files .f { font-size: 11px; } [data-sim="wheel"] .cv.ph .tf .act { font-size: 12px; } [data-sim="wheel"] .cv.ph .seg span { font-size: 12.5px; }
[data-sim="wheel"] .cv.ph .tf .res .r { font-size: 12.5px; } [data-sim="wheel"] .cv.ph .tf .res .r small { font-size: 12px; }
[data-sim="wheel"] .cv.ph .strip .txt b { font-size: 13px; } [data-sim="wheel"] .cv.ph .strip .txt span, [data-sim="wheel"] .cv.ph .strip .reveal { font-size: 12px; }
[data-sim="wheel"] .cv.ph .hist .r .t b { font-size: 14px; } [data-sim="wheel"] .cv.ph .hist .r .t span { font-size: 12.5px; }
[data-sim="wheel"] .cv.ph .peek .card .t { font-size: 12px; } [data-sim="wheel"] .cv.ph .peek .card .d { font-size: 11px; }
[data-sim="wheel"] .cv.ph .hist .h small { font-size: 12.5px; height: 20px; }
[data-sim="wheel"] .lbl > svg { display: block; flex: none; }