/* ==========================================================================
   Tokens
   ========================================================================== */
:root {
  /* iMac "flavor": tüm vurgu renkleri buradan türer */
  --h: 213;
  --flavor: #2f7de1;
  --flavor-deep: #1c499b;
  --flavor-light: #99d0f3;
  --select: #3875d7;
  --power: #ff8a1f;

  --win: #ededed;
  --ink: #111;
  --ink-2: #4a4a4a;
  --ink-3: #7a7a7a;
  --line: #b9b9b9;

  --font-ui: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
  --font-crt: "VT323", "Courier New", monospace;
  --ui-size: 13px;
  --menubar-h: 24px;
  --dock-h: 74px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}
html[data-flavor="tangerine"]  { --h: 28;  --flavor: #f7861c; --flavor-deep: #a84a06; --flavor-light: #ffd29a; --select: #e2700f; --power: #2f7de1; }
html[data-flavor="grape"]      { --h: 274; --flavor: #8b4fd0; --flavor-deep: #4b1f86; --flavor-light: #d9c0f5; --select: #7a3fc4; }
html[data-flavor="lime"]       { --h: 98;  --flavor: #5fb526; --flavor-deep: #2f6e0c; --flavor-light: #c9ef9f; --select: #4c9a1c; }
html[data-flavor="strawberry"] { --h: 348; --flavor: #e0365a; --flavor-deep: #8f1231; --flavor-light: #ffbdca; --select: #d12a4f; }

html[data-size="s"] { --ui-size: 12px; }
html[data-size="l"] { --ui-size: 15px; }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; }
body {
  font: var(--ui-size)/1.5 var(--font-ui);
  color: var(--ink);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--select); outline-offset: 2px; }
.link-btn { background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; color: inherit; }
.noscript { padding: 32px 16px; max-width: 60ch; margin: auto; color: #fff; font-family: var(--font-ui); }
html.js .noscript { display: none; }

/* ==========================================================================
   1. Intro: CSS ile çizilmiş iMac
   ========================================================================== */
.intro {
  position: fixed; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px;
  background:
    radial-gradient(60% 40% at 50% 92%, #0000002e, #0000 70%),
    radial-gradient(120% 90% at 50% 20%, #fbfbfb, #dfe3e8 60%, #c9cfd6);
  overflow: hidden;
}
.intro-hint { margin: 0; color: #6b7178; font-size: 12px; }

.imac {
  --w: min(560px, 86vw, 72vh);
  position: relative;
  width: var(--w);
  transform-origin: 50% 50%;
  transition: transform 1.15s cubic-bezier(.65, 0, .25, 1);
  will-change: transform;
}
/* renkli yan kaburgalar, kasanın arkasından taşar */
.imac-ribs {
  position: absolute; top: 12%; bottom: 34%; width: 10%;
  border-radius: 60% 0 0 60% / 30% 0 0 30%;
  background:
    repeating-linear-gradient(0deg, #ffffff40 0 2px, #0000 2px 6px),
    linear-gradient(90deg, var(--flavor-deep), var(--flavor) 55%, var(--flavor-light));
  box-shadow: inset 0 0 0 1px #00000026;
}
.imac-ribs--l { left: -2.5%; }
.imac-ribs--r { right: -2.5%; transform: scaleX(-1); }

.imac-shell {
  position: relative;
  padding: 6.5% 9% 4%;
  border-radius: 14% 14% 18% 18% / 12% 12% 22% 22%;
  background:
    repeating-linear-gradient(90deg, #0000 0 3px, #0000000a 3px 4px),
    linear-gradient(180deg, #fffffff7, #eef1f4f5 40%, #dfe4e9f5);
  box-shadow:
    inset 0 2px 0 #fff,
    inset 0 -10px 24px #00000014,
    0 1px 0 #ffffff,
    0 30px 50px -20px #00000059;
  border: 1px solid #ffffffaa;
}
.imac-bezel {
  padding: 3.4%;
  border-radius: 6% / 8%;
  background: linear-gradient(#d4d9df, #e9edf1 30%, #cfd5dc);
  box-shadow: inset 0 2px 6px #0000002e, 0 1px 0 #fff;
}
.imac-screen {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 4% / 5%;
  overflow: hidden;
  background: radial-gradient(120% 100% at 50% 45%, #10161f, #05070a 70%);
  box-shadow: inset 0 0 40px #000, inset 0 0 0 2px #000;
}
.imac-screen::after { /* tarama çizgileri + cam yansıması */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(160deg, #ffffff1f 0%, #0000 32%),
    repeating-linear-gradient(0deg, #0000 0 2px, #00000059 2px 3px);
}
.crt {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4em;
  font-family: var(--font-crt);
  color: var(--flavor-light);
  text-shadow: 0 0 6px var(--flavor), 0 0 18px var(--flavor);
  text-align: center; padding: 0 8%;
}
.crt p { margin: 0; }
.imac-screen { container-type: size; }
.crt-title { font-size: calc(var(--w) * .085); font-size: 10cqw; line-height: 1; letter-spacing: .04em; }
.crt-hint { font-size: calc(var(--w) * .04); font-size: 5cqw; opacity: .85; }
.crt-cursor { animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.imac-brand {
  margin: 3.5% 0 2.5%;
  text-align: center;
  font: 400 calc(var(--w) * .042)/1 Georgia, "Times New Roman", serif;
  color: #8b929b;
  text-shadow: 0 1px 0 #fff;
}
.imac-front {
  display: grid; grid-template-columns: 1fr 1.25fr 1fr auto; align-items: center; gap: 4%;
}
.imac-speaker {
  height: calc(var(--w) * .085);
  border-radius: 999px;
  background:
    radial-gradient(circle, #00000059 1.1px, #0000 1.6px) 0 0 / 6px 6px,
    linear-gradient(180deg, var(--flavor-light), var(--flavor) 50%, var(--flavor-deep));
  box-shadow: inset 0 2px 4px #00000040, 0 1px 0 #fff;
}
.imac-slot {
  height: calc(var(--w) * .07);
  border-radius: 999px;
  background: linear-gradient(#f4f6f8, #dde2e7);
  box-shadow: inset 0 1px 3px #00000033, 0 1px 0 #fff;
  display: grid; place-items: center;
}
.imac-slot i { width: 30%; height: 18%; border-radius: 9px; background: var(--power); box-shadow: 0 0 6px var(--power); }
.imac-power {
  width: calc(var(--w) * .07); height: calc(var(--w) * .07);
  border-radius: 50%; border: 0; cursor: pointer;
  background: radial-gradient(circle at 35% 30%, #fff8, #0000 45%), var(--power);
  box-shadow: inset 0 -3px 6px #00000040, 0 2px 4px #00000040, 0 0 0 4px #ffffffb0;
  position: relative;
  animation: power-pulse 2.4s ease-in-out infinite;
}
.imac-power::before { /* güç sembolü */
  content: ""; position: absolute; inset: 27%;
  border: 2px solid #fff; border-top-color: transparent; border-radius: 50%;
}
.imac-power::after {
  content: ""; position: absolute; left: 50%; top: 20%; width: 2px; height: 32%;
  background: #fff; transform: translateX(-50%); border-radius: 2px;
}
.imac-power:hover { filter: brightness(1.08); }
.imac-power:active { filter: brightness(.85); }
@keyframes power-pulse { 50% { box-shadow: inset 0 -3px 6px #00000040, 0 2px 4px #00000040, 0 0 0 4px #ffffffb0, 0 0 22px 4px var(--power); } }
.imac-stand {
  width: 46%; height: calc(var(--w) * .05); margin: -1% auto 0;
  border-radius: 0 0 40% 40% / 0 0 100% 100%;
  background: linear-gradient(#cfd5dc, #f3f5f7 40%, #c5ccd4);
  box-shadow: 0 10px 16px -8px #00000066;
}

/* zoom sonrası ekran parlar */
.intro.is-zooming .crt { animation: crt-off .5s .55s forwards; }
@keyframes crt-off { to { opacity: 0; filter: brightness(3); } }

/* ==========================================================================
   2. Boot
   ========================================================================== */
.boot {
  position: fixed; inset: 0; z-index: 50; background: #000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px;
  animation: fade-in .3s;
}
.boot-logo { width: 84px; height: 84px; }
.boot-logo svg { width: 100%; height: 100%; }
.boot-bar { width: 160px; height: 5px; border-radius: 99px; background: #262626; overflow: hidden; }
.boot-bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: #e5e5e5; animation: boot-fill 1.8s cubic-bezier(.3, .6, .4, 1) forwards; }
@keyframes boot-fill { to { width: 100%; } }
@keyframes fade-in { from { opacity: 0; } }

/* ==========================================================================
   3. Masaüstü
   ========================================================================== */
.desktop { position: fixed; inset: 0; animation: fade-in .6s; user-select: none; }
.wallpaper {
  position: absolute; inset: 0;
  background:
    radial-gradient(70% 60% at 32% 40%, hsl(calc(var(--h) - 10) 79% 78% / .55), #0000 70%),
    linear-gradient(160deg,
      hsl(calc(var(--h) - 3) 63% 62%) 0%,
      hsl(var(--h) 63% 57%) 30%,
      hsl(calc(var(--h) + 5) 62% 46%) 62%,
      hsl(calc(var(--h) + 7) 77% 29%) 100%);
}
.wallpaper { transform: translateZ(0); contain: strict; }
.wallpaper svg { position: absolute; inset: 0; width: 100%; height: 100%; }
html[data-wall="pinstripe"] .wallpaper {
  background: repeating-linear-gradient(0deg, #e4e4e4 0 1px, #f6f6f6 1px 3px);
}
html[data-wall="pinstripe"] .wallpaper svg,
html[data-wall="plain"] .wallpaper svg { display: none; }
html[data-wall="plain"] .wallpaper { background: radial-gradient(90% 90% at 50% 30%, hsl(var(--h) 55% 55%), hsl(calc(var(--h) + 6) 65% 32%)); }
html[data-wall="pinstripe"] .desk-icon-label { color: #111; text-shadow: 0 1px 0 #fff; }

/* --- menü çubuğu --- */
.menubar {
  position: absolute; inset: 0 0 auto; height: var(--menubar-h); z-index: 1000;
  display: flex; align-items: stretch;
  font-size: 14px;
  background: linear-gradient(#fffffff2, #f0f0f0f2 45%, #dcdcdcf2 50%, #e6e6e6f2);
  border-bottom: 1px solid #0000004d;
  box-shadow: 0 1px 4px #00000026;
  backdrop-filter: blur(4px);
}
.menu { position: relative; display: flex; }
.menu-btn {
  border: 0; background: none; padding: 0 10px; cursor: default;
  display: flex; align-items: center; gap: 6px; white-space: nowrap;
}
.menu-btn--logo { padding: 0 12px; }
.menu-btn--logo svg { width: 16px; height: 16px; }
.menu-btn--bold { font-weight: 700; }
.menu.is-open > .menu-btn { background: var(--select); color: #fff; }
.menu.is-open > .menu-btn svg { filter: brightness(0) invert(1); }
.dropdown {
  position: absolute; top: var(--menubar-h); left: 0; min-width: 210px; padding: 4px 0;
  background: #fffffff2; backdrop-filter: blur(8px);
  border: 1px solid #0000004d; border-top: 0; border-radius: 0 0 6px 6px;
  box-shadow: 0 8px 24px #0003;
  display: none;
}
.menu.is-open > .dropdown { display: block; }
.dd-item {
  display: flex; justify-content: space-between; gap: 24px; width: 100%;
  padding: 2px 16px 2px 22px; border: 0; background: none; text-align: left; font-size: 14px;
  cursor: default; color: inherit; text-decoration: none; position: relative;
}
.dd-item:hover:not([aria-disabled="true"]), .dd-item:focus-visible { background: var(--select); color: #fff; outline: none; }
.dd-item[aria-disabled="true"] { color: #a8a8a8; }
.dd-item[aria-checked="true"]::before { content: "✓"; position: absolute; left: 7px; }
.dd-item kbd { font: inherit; color: #888; }
.dd-item:hover kbd { color: #fff; }
.dd-sep { height: 1px; background: #d0d0d0; margin: 4px 8px; }
.menubar-spacer { flex: 1; }
.menubar-clock { display: flex; align-items: center; padding: 0 12px; font-variant-numeric: tabular-nums; }

/* --- masaüstü ikonları (sağ sütun) --- */
.desk-icons {
  position: absolute; top: calc(var(--menubar-h) + 14px); right: 14px; bottom: calc(var(--dock-h) + 10px);
  display: flex; flex-direction: column; flex-wrap: wrap-reverse; align-content: flex-start; gap: 6px 10px;
  z-index: 1;
}
.desk-icon {
  width: 84px; padding: 4px 2px; border: 0; background: none; cursor: default;
  display: flex; flex-direction: column; align-items: center; gap: 3px; color: #fff;
}
.desk-icon svg, .desk-icon img { width: 52px; height: 52px; filter: drop-shadow(0 2px 3px #0005); }
.desk-icon-label {
  font-size: 12px; line-height: 1.25; text-align: center; padding: 1px 5px; border-radius: 4px;
  text-shadow: 0 1px 2px #000c, 0 0 2px #000c;
}
.desk-icon.is-selected svg, .desk-icon.is-selected img { filter: drop-shadow(0 2px 3px #0005) brightness(.7); }
.desk-icon.is-selected .desk-icon-label { background: var(--select); text-shadow: none; color: #fff; }
.desk-icon.is-bounce svg { animation: bounce .45s ease-out; }
@keyframes bounce { 35% { transform: translateY(-14px); } 70% { transform: translateY(3px); } }

/* --- dock --- */
.dock-wrap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 900;
  display: flex; justify-content: center; pointer-events: none;
  transition: transform .3s var(--ease);
}
html[data-dock="hidden"] .dock-wrap { transform: translateY(110%); }
.dock {
  pointer-events: auto;
  display: flex; align-items: flex-end; gap: 6px; padding: 6px 12px 4px;
  background: linear-gradient(#ffffff66, #ffffff1a);
  border: 1px solid #ffffff80; border-bottom: 0; border-radius: 10px 10px 0 0;
  box-shadow: 0 -4px 16px #0003, inset 0 1px #fffc;
  backdrop-filter: blur(10px);
}
.dock-item {
  --s: 52px;
  position: relative; width: var(--s); height: var(--s); padding: 0; border: 0; background: none; cursor: default;
  transition: width .18s var(--ease), height .18s var(--ease);
  margin-bottom: 6px;
}
.dock.is-magnifying .dock-item { transition: none; }
.dock-item svg, .dock-item img { width: 100%; height: 100%; filter: drop-shadow(0 3px 3px #0004); }
.dock-item.is-running::after {
  content: ""; position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%);
  border: 4px solid transparent; border-bottom: 5px solid #111; border-top: 0;
}
.dock-tip {
  position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  padding: 2px 10px; border-radius: 10px; background: #000000b3; color: #fff; font-size: 12px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .12s;
}
.dock-item:hover .dock-tip, .dock-item:focus-visible .dock-tip { opacity: 1; }
.dock-sep { width: 1px; align-self: stretch; margin: 4px 4px 6px; background: linear-gradient(#0000, #00000059, #0000); box-shadow: 1px 0 #ffffff80; }
.dock-mini { /* küçültülmüş pencere */
  width: var(--s); height: var(--s);
  border-radius: 6px; overflow: hidden; background: var(--win); border: 1px solid #0006;
  display: flex; flex-direction: column;
}
.dock-mini b { height: 22%; background: linear-gradient(#f8f8f8, #c8c8c8); border-bottom: 1px solid #888; }
.dock-mini span { flex: 1; display: grid; place-items: center; font-size: 9px; line-height: 1.1; text-align: center; padding: 2px; color: #333; }

/* --- toast & uyku --- */
.toast {
  position: absolute; top: calc(var(--menubar-h) + 12px); left: 50%; z-index: 1100;
  transform: translate(-50%, -12px); opacity: 0; pointer-events: none;
  padding: 8px 16px; border-radius: 8px; font-size: 13px;
  background: #fffffff2; border: 1px solid #0000004d; box-shadow: 0 8px 24px #0003;
  transition: opacity .2s, transform .2s var(--ease);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.sleep { position: absolute; inset: 0; z-index: 2000; background: #000; display: grid; place-items: center; cursor: pointer; animation: fade-in .8s; }
.sleep p { color: #555; font-family: var(--font-crt); font-size: 22px; animation: blink 2.4s steps(1) infinite; }

/* ==========================================================================
   4. Aqua pencere
   ========================================================================== */
.win-layer { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.win-layer.is-dragging iframe { pointer-events: none; }
/* .win yalnızca konumlandırır (transform), .win-frame görünür pencere */
.win {
  position: absolute; left: 0; top: 0; pointer-events: auto;
  display: flex; flex-direction: column;
  max-height: calc(100% - var(--menubar-h) - var(--dock-h) - 16px);
}
.win.is-moving { will-change: transform; }
.win-frame {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  background-color: var(--win);
  background-image: repeating-linear-gradient(0deg, #0000 0 1px, #ffffffb3 1px 2px);
  border: 1px solid #0006; border-radius: 8px; overflow: hidden;
  box-shadow: 0 12px 32px #0006, inset 0 1px #fffc, inset 1px 0 #fff6, inset -1px 0 #fff6;
  contain: layout paint;
  transition: box-shadow .2s;
}
.win:not(.is-active) .win-frame { box-shadow: 0 6px 18px #0004; }
.win.is-moving .win-frame { box-shadow: 0 18px 44px #0007, inset 0 1px #fffc, inset 1px 0 #fff6, inset -1px 0 #fff6; }
.win.is-max .win-frame { border-radius: 0; }

.titlebar {
  position: relative; flex: none; height: 22px; cursor: move; touch-action: none;
  background: linear-gradient(#f8f8f8, #e8e8e8 48%, #d4d4d4 52%, #c8c8c8);
  border-bottom: 1px solid #888;
  text-shadow: 0 1px #fffc;
}
.win.is-active .titlebar { background: linear-gradient(#f8f8f8, #d8d8d8 48%, #c4c4c4 52%, #b8b8b8); }
.win-title {
  position: absolute; inset: 0; margin: 0; pointer-events: none;
  display: flex; align-items: center; justify-content: center; padding: 0 70px;
  font-size: 13px; font-weight: 600; color: #444;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.win.is-active .win-title { color: #000; }
.lights { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); display: flex; gap: 7px; z-index: 1; }
.light {
  position: relative; width: 13px; height: 13px; padding: 0; border-radius: 50%; cursor: default;
  display: grid; place-items: center; overflow: hidden;
  box-shadow: inset 0 1px 2px #fffc, inset 0 -1px 1px #0000004d, 0 1px 1px #0003;
}
.light::before { content: ""; position: absolute; top: 1px; left: 2px; right: 2px; height: 4px; border-radius: 4px 4px 0 0; background: linear-gradient(#fffc, #0000); }
.light svg { width: 7px; height: 7px; opacity: 0; transition: opacity .1s; }
.lights:hover .light svg, .light:focus-visible svg { opacity: .65; }
.light:active { filter: brightness(.8); }
.light--close { background: radial-gradient(circle at 30% 30%, #ff8a8a, #ff5c5c 40%, #e00000); border: 1px solid #b30000; }
.light--min   { background: radial-gradient(circle at 30% 30%, #ffdf8a, #ffc95c 40%, #e09f00); border: 1px solid #b37e00; }
.light--max   { background: radial-gradient(circle at 30% 30%, #8aff8a, #5cff5c 40%, #00e000); border: 1px solid #00b300; }
.win:not(.is-active) .light { background: radial-gradient(circle at 30% 30%, #dcdcdc, silver 40%, #a0a0a0); border-color: #888; }

.win-body { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; user-select: text; }
.win-resize { position: absolute; right: 0; bottom: 0; width: 15px; height: 15px; cursor: nwse-resize; touch-action: none;
  background: linear-gradient(135deg, #0000 55%, #0000004d 55% 60%, #0000 60% 70%, #0000004d 70% 75%, #0000 75% 85%, #0000004d 85% 90%, #0000 90%); }

/* --- ortak parçalar --- */
.aqua-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 3px 16px; min-height: 22px; font-size: 13px; color: #000; text-decoration: none; cursor: default;
  background: linear-gradient(#fafafa, #e0e0e0 48%, #cacaca 52%, #e8e8e8);
  border: 1px solid #888; border-radius: 20px;
  box-shadow: inset 0 1px #ffffffe6, inset 0 -1px #0000000f, 0 1px 3px #00000026;
}
.aqua-btn:active { background: linear-gradient(#c4c4c4, #a8a8a8 48%, #989898 52%, #b0b0b0); box-shadow: inset 0 1px 3px #0006; }
.aqua-btn:disabled { opacity: .45; }
.aqua-btn--primary {
  color: #fff; text-shadow: 0 -1px 1px #00000059;
  background: linear-gradient(hsl(var(--h) 80% 82%), hsl(var(--h) 85% 58%) 40%, hsl(calc(var(--h) + 4) 100% 36%) 60%, hsl(var(--h) 80% 48%));
  border-color: hsl(calc(var(--h) + 4) 100% 30%);
  box-shadow: inset 0 1px #ffffffbf, inset 0 -1px #0000001a, 0 0 8px hsl(var(--h) 100% 45% / .35), 0 1px 3px #0003;
}
.aqua-btn--primary:active { background: linear-gradient(hsl(calc(var(--h) + 4) 100% 36%), hsl(calc(var(--h) + 4) 100% 26%)); }
.box { background: #fff; border: 1px solid #c4c4c4; border-radius: 4px; padding: 8px 10px; }
.label { font-size: 10px; font-weight: 700; color: #777; letter-spacing: .06em; margin: 0 0 2px; }
.pad { padding: 16px; }
.stack > * + *, .win .stack > * + * { margin-top: 12px; }
.muted { color: var(--ink-3); }
.win h1, .win h2, .win h3, .win p, .win ul { margin: 0; }
.win a { color: hsl(calc(var(--h) + 4) 90% 38%); }

/* --- Hakkımda --- */
.about { text-align: center; padding: 22px 22px 20px; }
.avatar {
  width: 92px; height: 92px; margin: 0 auto 12px; border-radius: 50%; overflow: hidden;
  border: 3px solid #fff; box-shadow: 0 2px 8px #0004;
  display: grid; place-items: center; font-size: 36px; color: #fff;
  background: radial-gradient(circle at 35% 30%, var(--flavor-light), var(--flavor) 55%, var(--flavor-deep));
  text-shadow: 0 1px 2px #0005;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.about h1 { font-size: 18px; }
.about .role { font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.about .bio { margin-top: 12px; font-size: 13px; text-align: left; max-width: 46ch; }
.about .actions { display: flex; gap: 8px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }

/* --- Finder --- */
.toolbar {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px;
  background: linear-gradient(#e9e9e9, #d3d3d3); border-bottom: 1px solid #a5a5a5;
}
.toolbar .count { margin-left: auto; font-size: 11px; color: #555; }
.seg { display: flex; border: 1px solid #8f8f8f; border-radius: 4px; overflow: hidden; }
.seg button { border: 0; padding: 2px 8px; background: linear-gradient(#fff, #e6e6e6); cursor: default; display: grid; place-items: center; }
.seg button + button { border-left: 1px solid #8f8f8f; }
.seg button[aria-pressed="true"] { background: linear-gradient(hsl(var(--h) 70% 86%), hsl(var(--h) 60% 76%)); }
.seg svg { width: 13px; height: 13px; }
.finder { background: #fff; min-height: 160px; }
.grid-view { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px 4px; padding: 14px 10px; }
.f-item {
  border: 0; background: none; padding: 4px; cursor: default; border-radius: 4px;
  display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; text-align: center; color: inherit;
}
.f-item .f-ico { width: 58px; height: 58px; display: grid; place-items: center; }
.f-item .f-ico > * { max-width: 100%; max-height: 100%; }
.f-item .f-name { padding: 0 4px; border-radius: 3px; line-height: 1.3; }
.f-item.is-selected .f-name { background: var(--select); color: #fff; }
.f-item.is-selected .f-ico { filter: brightness(.75); }
.f-item[aria-disabled="true"] { opacity: .5; }
.list-view { width: 100%; border-collapse: collapse; font-size: 12px; }
.list-view th { text-align: left; font-weight: 400; padding: 3px 10px; background: linear-gradient(#fafafa, #e2e2e2); border-bottom: 1px solid #b0b0b0; }
.list-view td { padding: 3px 10px; }
.list-view tbody tr:nth-child(even) { background: #edf3fe; }
.list-view tbody tr.is-selected { background: var(--select); color: #fff; }
.list-view .l-name { display: flex; align-items: center; gap: 6px; }
.list-view .l-name svg { width: 16px; height: 16px; }

/* proje kapakları ve fotoğraflar */
.cover {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 1px solid #bbb;
  display: flex; align-items: flex-end; padding: 14px 16px; color: #fff;
}
.cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cover-art { position: absolute; inset: 0; }
.cover-name { position: relative; font: 400 clamp(32px, 7vw, 46px)/.9 var(--font-crt); text-shadow: 0 2px 0 #0003; }
.thumb { width: 58px; height: 44px; border-radius: 3px; border: 2px solid #fff; box-shadow: 0 1px 3px #0006; overflow: hidden; position: relative; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }

/* --- Proje --- */
.project-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.project h1 { font-size: 20px; }
.project .kind { color: var(--ink-2); font-size: 12px; }
.points { padding-left: 18px !important; }
.points li + li { margin-top: 3px; }

/* --- Fotoğraf görüntüleyici --- */
.viewer { background: #1d1d1d; display: flex; flex-direction: column; height: 100%; }
.viewer-stage { flex: 1; min-height: 240px; position: relative; display: grid; place-items: center; }
.viewer-stage img { max-height: 60vh; object-fit: contain; }
.viewer-bar { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: linear-gradient(#e9e9e9, #d3d3d3); border-top: 1px solid #a5a5a5; }
.viewer-bar span { flex: 1; text-align: center; font-size: 12px; }

/* --- Mail --- */
.mail-head { background: #fff; border-bottom: 1px solid #c4c4c4; }
.mail-row { display: grid; grid-template-columns: 78px 1fr; align-items: center; border-bottom: 1px solid #e2e2e2; padding: 0 10px; }
.mail-row label { color: #666; font-size: 12px; text-align: right; padding-right: 8px; }
.mail-row input, .mail-row output { border: 0; padding: 6px 2px; font: inherit; background: none; outline: none; width: 100%; }
.mail-row:focus-within { background: hsl(var(--h) 80% 97%); }
.mail-body { width: 100%; min-height: 180px; border: 0; padding: 10px 12px; font: inherit; resize: vertical; outline: none; display: block; background: #fff; }
.mail-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; background: linear-gradient(#e9e9e9, #d3d3d3); border-top: 1px solid #a5a5a5; }
.mail-actions small { color: #555; font-size: 11px; }

/* --- Tercihler --- */
.prefs section + section { margin-top: 18px; }
.prefs h2 { font-size: 13px; margin-bottom: 8px !important; }
.swatches { display: flex; gap: 12px; flex-wrap: wrap; }
.swatch { border: 0; background: none; padding: 0; cursor: default; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; }
.swatch i {
  width: 38px; height: 38px; border-radius: 50%;
  box-shadow: inset 0 3px 4px #fff8, inset 0 -4px 6px #0003, 0 1px 3px #0005;
}
.swatch[aria-checked="true"] i { outline: 3px solid #fff; box-shadow: 0 0 0 5px var(--select), inset 0 3px 4px #fff8, inset 0 -4px 6px #0003; }
.radio-row { display: flex; gap: 6px; flex-wrap: wrap; }
.radio-row .aqua-btn[aria-checked="true"] { background: linear-gradient(hsl(var(--h) 80% 82%), hsl(var(--h) 85% 58%) 40%, hsl(calc(var(--h) + 4) 100% 36%) 60%, hsl(var(--h) 80% 48%)); color: #fff; border-color: hsl(calc(var(--h) + 4) 100% 30%); text-shadow: 0 -1px 1px #0005; }

/* --- Terminal --- */
.term { background: #0d0f12f0; color: #d8f5d0; font: 20px/1.1 var(--font-crt); padding: 10px 12px; min-height: 300px; cursor: text; }
.term p { white-space: pre-wrap; word-break: break-word; }
.term .t-cmd { color: #fff; }
.term .t-err { color: #ff8a8a; }
.term .t-acc { color: var(--flavor-light); }
.term-line { display: flex; gap: 8px; }
.term-line input { flex: 1; border: 0; background: none; outline: none; color: #fff; font: inherit; caret-color: var(--flavor-light); padding: 0; }

/* --- Simit avı (yılan) --- */
.game { background: #101820; color: #fff; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px; font-family: var(--font-crt); }
.game-hud { display: flex; justify-content: space-between; width: 100%; font-size: 20px; }
.game canvas { width: min(324px, 78vw); aspect-ratio: 1; image-rendering: pixelated; background: #0b1218; border: 2px solid #2c3a48; border-radius: 4px; touch-action: none; }
.game-msg { font-size: 18px; color: #9fb3c8; min-height: 1.2em; text-align: center; }
.dpad { display: none; grid-template-columns: repeat(3, 44px); gap: 4px; }
.dpad button { height: 40px; border-radius: 8px; border: 1px solid #2c3a48; background: #1c2a38; color: #fff; font-size: 18px; }
.dpad button:nth-child(1) { grid-column: 2; }
.dpad button:nth-child(2) { grid-column: 1; }
.dpad button:nth-child(3) { grid-column: 3; }
.dpad button:nth-child(4) { grid-column: 2; }
@media (pointer: coarse) { .dpad { display: grid; } }

/* --- Özgeçmiş --- */
.cv-list { list-style: none; padding: 0 !important; }
.cv-list li { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 8px 0; border-top: 1px solid #ddd; }
.cv-list li:first-child { border-top: 0; }
.cv-list .y { color: var(--ink-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips span { padding: 1px 10px; border-radius: 20px; font-size: 12px; background: linear-gradient(#fff, #e6e6e6); border: 1px solid #aaa; }

/* --- Bu Mac hakkında --- */
.about-mac { text-align: center; padding: 20px; }
.about-mac .boot-logo { width: 64px; height: 64px; margin: 0 auto 10px; }
.about-mac h1 { font-size: 20px; font-weight: 400; }
.specs { text-align: left; margin-top: 14px !important; font-size: 12px; display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; }
.specs dt { color: #777; text-align: right; }
.specs dd { margin: 0; }

/* konfeti (çöp kutusu boşaltınca) */
.confetti { position: absolute; top: -12px; width: 8px; height: 8px; z-index: 1500; pointer-events: none; animation: confetti-fall linear forwards; }
@keyframes confetti-fall { to { transform: translateY(110vh) rotate(720deg); opacity: .9; } }

/* ==========================================================================
   Sürüm 2 bileşenleri
   ========================================================================== */
.dock-minis { display: contents; }
.toolbar-end { margin-left: auto; }

/* --- giriş görseli (data.js'de intro.image varsa) --- */
.imac--photo { --w: min(640px, 92vw, 82vh); }
.imac--photo .imac-ribs, .imac--photo .imac-shell, .imac--photo .imac-stand { display: none; }
.imac-photo { width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.imac--photo .imac-screen { position: absolute; aspect-ratio: auto; border-radius: 3% / 4%; cursor: pointer; }
.imac--photo .imac-power { /* görselin tamamı güç düğmesi gibi davranır */
  position: absolute; inset: 0; width: auto; height: auto; border-radius: 12%;
  background: none; box-shadow: none; animation: none;
}
.imac--photo .imac-power::before, .imac--photo .imac-power::after { display: none; }

/* --- menü çubuğu araması --- */
.menubar-search { padding: 0 8px; }
.menubar-search svg { width: 14px; height: 14px; }
.dd-item kbd { margin-left: 16px; }

/* --- Spotlight --- */
.spotlight {
  position: absolute; top: calc(var(--menubar-h) + 6px); right: 8px; z-index: 1050;
  width: min(420px, calc(100vw - 16px));
  background: #fffffff5; border: 1px solid #0000004d; border-radius: 10px;
  box-shadow: 0 16px 40px #0004; overflow: hidden;
  animation: fade-in .12s;
}
.spot-field { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid #ddd; color: #666; }
.spot-field svg { width: 16px; height: 16px; flex: none; }
.spot-field input { flex: 1; border: 0; outline: none; background: none; font: inherit; font-size: 16px; color: var(--ink); }
.spot-results { max-height: min(60vh, 420px); overflow: auto; padding: 4px 0; }
.spot-group { margin: 6px 12px 2px; font-size: 11px; color: #888; }
.spot-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 4px 12px; border: 0; background: none; text-align: left; cursor: default; color: inherit; }
.spot-item.is-sel, .spot-item:hover { background: var(--select); color: #fff; }
.spot-item.is-sel .spot-sub, .spot-item:hover .spot-sub { color: #ffffffc0; }
.spot-ico { width: 22px; height: 22px; flex: none; display: grid; place-items: center; }
.spot-ico > * { max-width: 100%; max-height: 100%; }
.spot-ico img { border-radius: 4px; }
.spot-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spot-sub { font-size: 11px; color: #888; white-space: nowrap; }
.spot-swatch { width: 14px; height: 14px; border-radius: 50%; display: block; }
.spot-empty { padding: 12px; color: #777; }

/* --- Hakkımda v2 --- */
.about .avatar { width: 96px; height: 96px; }
.about .focus { margin-top: 6px !important; font-size: 12px; color: hsl(calc(var(--h) + 4) 70% 38%); font-weight: 600; }
.about .bio p + p { margin-top: 8px; }
.about .bio { margin: 14px auto 0; }
.about .links { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 14px !important; font-size: 12px; }

/* --- Finder v2 --- */
.f-thumb { width: 54px; height: 54px; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 2px 5px #0005, inset 0 0 0 1px #0002; display: block; }
.f-thumb img { width: 100%; height: 100%; object-fit: contain; }
.finder-foot { padding: 6px 12px; font-size: 11px; color: #555; background: linear-gradient(#ececec, #dedede); border-top: 1px solid #b5b5b5; }
.f-item .f-name { max-width: 110px; }

/* --- proje galerisi --- */
.gallery { margin: 0; background: #1a1a1a; border-bottom: 1px solid #999; }
.gallery-stage { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.gallery-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.gallery figcaption { padding: 6px 12px; font-size: 11px; color: #bbb; }
.gallery-strip { display: flex; gap: 6px; padding: 0 10px 10px; overflow-x: auto; scrollbar-width: thin; }
.gallery-strip button { flex: none; width: 64px; height: 44px; padding: 0; border: 2px solid transparent; border-radius: 4px; overflow: hidden; background: #000; cursor: default; opacity: .65; }
.gallery-strip button[aria-selected="true"] { border-color: var(--flavor); opacity: 1; }
.gallery-strip img { width: 100%; height: 100%; object-fit: cover; }
.project section .label { margin-bottom: 6px; }
.pipeline { list-style: none; padding: 0 !important; counter-reset: step; display: grid; gap: 0; }
.pipeline li {
  counter-increment: step; position: relative;
  display: grid; grid-template-columns: 26px 1fr; column-gap: 10px; padding: 0 0 10px;
}
.pipeline li::before {
  content: counter(step); grid-row: span 2;
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff;
  background: radial-gradient(circle at 35% 30%, var(--flavor-light), var(--flavor) 60%, var(--flavor-deep));
  box-shadow: 0 1px 2px #0004; z-index: 1;
}
.pipeline li:not(:last-child)::after { content: ""; position: absolute; left: 10px; top: 22px; bottom: 0; width: 2px; background: #c9ced4; }
.pipeline b { font-size: 13px; }
.pipeline span { font-size: 12px; color: var(--ink-2); }
.project-links { display: flex; gap: 8px; flex-wrap: wrap; }

/* --- ses oynatıcı --- */
.players { display: grid; gap: 6px; }
.player { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 10px; padding: 6px 10px; background: #fff; border: 1px solid #c4c4c4; border-radius: 6px; }
.player-btn { width: 28px; height: 28px; min-height: 0; padding: 0; border-radius: 50%; }
.player-btn svg { width: 12px; height: 12px; }
.player-title { font-size: 12px; }
.player-track { height: 6px; border-radius: 3px; background: #dcdfe3; overflow: hidden; cursor: pointer; box-shadow: inset 0 1px 2px #0002; }
.player-track i { display: block; height: 100%; background: var(--flavor); transform-origin: left; transform: scaleX(0); }
.player-time { font-size: 11px; color: #777; font-variant-numeric: tabular-nums; }

/* --- yazı okuyucu --- */
.reader { padding: 22px 24px 16px; max-width: 62ch; }
.reader > * + * { margin-top: 10px !important; }
.reader h1 { font: 400 22px/1.2 Georgia, "Times New Roman", serif; }
.reader-series { font-size: 11px; color: hsl(calc(var(--h) + 4) 70% 38%); font-weight: 600; }
.reader-excerpt { font: 15px/1.6 Georgia, "Times New Roman", serif; color: #222; }
.reader-note { font-size: 12px; padding: 8px 10px; background: hsl(var(--h) 80% 96%); border: 1px solid hsl(var(--h) 50% 82%); border-radius: 6px; }
.reader-nav { display: flex; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid #d5d5d5; font-size: 12px; }
.reader-nav .link-btn { text-align: left; color: hsl(calc(var(--h) + 4) 90% 38%); }
.reader-nav .link-btn:last-child { text-align: right; }

/* --- metinli segment düğmeleri --- */
.seg--text button { padding: 2px 10px; font-size: 12px; }

/* --- Ses Lab: fırçalanmış metal bir ölçüm aleti (GarageBand / iTunes 4 dönemi) --- */
.lab { container: lab / inline-size; display: flex; flex-direction: column; padding: 2px 14px 12px; }

/* üst sıra: yuvarlak oynat düğmesi ve iTunes tarzı LCD */
.lab-head { display: flex; align-items: center; gap: 14px; padding: 0 0 12px; }
.lab-run {
  flex: none; width: 46px; height: 46px; padding: 0; border-radius: 50%; display: grid; place-items: center; cursor: default; color: #2a2a2a;
  background: radial-gradient(circle at 50% 28%, #fff, #e6e6e6 45%, #b4b4b4); border: 1px solid #6a6a6a;
  box-shadow: inset 0 1px #fff, inset 0 -3px 5px #00000026, 0 1px 2px #00000059, 0 0 0 4px #0000000f;
}
.lab-run svg { width: 20px; height: 20px; filter: drop-shadow(0 1px #ffffffb3); }
.lab-run:active { background: radial-gradient(circle at 50% 70%, #f0f0f0, #c2c2c2 60%, #9a9a9a); }
.lab-run.is-on { color: hsl(var(--h) 85% 36%); }
.lab-lcd {
  flex: 1; min-width: 0; padding: 6px 12px 8px; border-radius: 7px; color: #252c1b; text-shadow: 0 1px #ffffff80;
  background: linear-gradient(#f3f6e7, #e0e6cd 60%, #d5dcbf); border: 1px solid #6c705c;
  box-shadow: inset 0 1px 3px #00000047, 0 1px #ffffffa6;
}
.lcd-row { display: flex; justify-content: space-between; gap: 10px; margin: 0; font-size: 11px; color: #4c553f; }
.lcd-main { display: flex; align-items: baseline; gap: 10px; min-width: 0; margin: 1px 0 5px; }
.lcd-big { font-size: 22px; font-weight: 700; letter-spacing: -.3px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lcd-sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: #4c553f; }
.lcd-vad { margin-left: auto; padding: 1px 8px; border-radius: 9px; background: #0000001a; font-size: 11px; font-weight: 700; white-space: nowrap; }
.lcd-vad.is-speech { background: #2e9b58; color: #fff; text-shadow: none; }
.lcd-meter { height: 6px; border-radius: 3px; overflow: hidden; background: #00000021; box-shadow: inset 0 1px 1px #00000033; }
.lcd-meter i { display: block; height: 100%; border-radius: 3px; background: #3d4731; transform: scaleX(0); transform-origin: 0 50%; }

/* görünüm sekmeleri ekranın üst kenarına oturur (Aqua sekme görünümü) */
.lab-tabs { position: relative; z-index: 2; align-self: center; margin-bottom: -11px; box-shadow: 0 1px 2px #0000004d; }
.lab-tabs button { padding: 3px 14px; }

/* fosfor ekran */
.lab-stage {
  position: relative; height: 270px; overflow: hidden; border-radius: 8px; background: #06080b;
  border: 1px solid #1a1a1a; box-shadow: 0 1px #ffffff99, inset 0 0 0 1px #ffffff0d;
}
.lab-stage::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background: linear-gradient(168deg, #ffffff14, #fff0 36%), radial-gradient(130% 100% at 50% 50%, #0000 62%, #0000008c);
}
.lab-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lab-grid { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .25s; }
.lab-grid--wave, .lab-grid--spectrum {
  opacity: 1;
  background: linear-gradient(#7fd1ff1c 1px, #0000 1px) 0 0 / 100% 12.5%, linear-gradient(90deg, #7fd1ff1c 1px, #0000 1px) 0 0 / 10% 100%;
}
.lab-grid--wave::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid #7fd1ff3d; }
.lab-axis { position: absolute; inset: 0; z-index: 1; pointer-events: none; font: 15px/1 var(--font-crt); color: #8fb4ca; text-shadow: 0 0 4px #000; }
.lab-axis span { position: absolute; }
.lab-axis--spectrum span { transform: translateX(-50%); }
.lab-axis--spectrogram span, .lab-axis--mel span { transform: translateY(50%); }
.lab-hint { position: absolute; inset: 0; z-index: 1; margin: 0; display: grid; place-items: center; padding: 0 14%; text-align: center; color: #9fb6cc; font: 20px/1.25 var(--font-crt); text-shadow: 0 0 6px #7fd1ff59; }

/* alt panel: kaynak seçici ve modüller */
.lab-deck { display: grid; grid-template-columns: 134px minmax(0, 1fr); gap: 12px; margin-top: 12px; }
.lab-src { display: flex; flex-direction: column; overflow: hidden; border: 1px solid #777; border-radius: 7px; background: #0000000d; box-shadow: 0 1px #ffffff80; }
.lab-cap { padding: 5px 10px 4px; font-size: 10px; font-weight: 700; color: #4a4a4a; text-shadow: 0 1px #ffffff99; }
.lab-src button {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 0; border-top: 1px solid #0000002e;
  font: inherit; font-size: 12px; text-align: left; color: #111; cursor: default; background: linear-gradient(#fdfdfd, #e8e8e8);
}
.lab-src button::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #a0a0a0; box-shadow: inset 0 1px 1px #00000059; }
.lab-src button[aria-pressed="true"] { font-weight: 700; background: linear-gradient(hsl(var(--h) 70% 89%), hsl(var(--h) 60% 79%)); }
.lab-src button[aria-pressed="true"]::before { background: radial-gradient(circle at 40% 35%, #fff, hsl(var(--h) 90% 52%)); box-shadow: 0 0 6px hsl(var(--h) 90% 55%); }
.lab-mods {
  display: flex; flex-direction: column; justify-content: center; gap: 12px; min-width: 0; padding: 10px 14px;
  border: 1px solid #777; border-radius: 7px; background: #ffffff38; box-shadow: inset 0 1px 2px #00000024, 0 1px #ffffff80;
}
.lab-mod { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.lab-mod[hidden] { display: none; }
.lab-waves button { padding: 5px 9px; }
.lab-waves svg { width: 18px; height: 15px; fill: none; stroke: #333; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lab-waves button[aria-pressed="true"] svg { stroke: hsl(var(--h) 85% 28%); }

/* döner düğme: tırtıllı gövde döner, üstteki parlama sabit kalır */
.lab-knob { display: grid; grid-template-columns: auto auto; column-gap: 9px; align-items: center; }
.knob { grid-row: span 2; position: relative; width: 50px; height: 50px; border-radius: 50%; touch-action: none; cursor: ns-resize; outline: none; }
.knob:focus-visible { box-shadow: 0 0 0 3px hsl(var(--h) 90% 60% / .55); }
.knob-scale { position: absolute; inset: 0; width: 100%; height: 100%; stroke: #474747; stroke-width: 1.4; stroke-linecap: round; }
.knob-cap { position: absolute; inset: 9px; border-radius: 50%; transform: rotate(var(--a, 0deg)); background: repeating-conic-gradient(#d6d6d6 0 5deg, #b6b6b6 5deg 10deg); }
.knob-cap i { position: absolute; left: 50%; top: 3px; width: 3px; height: 10px; margin-left: -1.5px; border-radius: 2px; background: hsl(var(--h) 90% 45%); box-shadow: 0 0 4px hsl(var(--h) 90% 55%); }
.knob::after {
  content: ""; position: absolute; inset: 9px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 24%, #ffffffe6, #ffffff47 36%, #fff0 60%), radial-gradient(circle, #0000 55%, #00000047);
  box-shadow: 0 2px 3px #00000066, inset 0 1px #fff, inset 0 -1px 2px #0000004d;
}
.knob.is-turning .knob-cap i { background: hsl(var(--h) 100% 56%); }
.knob-name { align-self: end; font-size: 11px; color: #383838; text-shadow: 0 1px #ffffff99; }
.lab-knob output { align-self: start; min-width: 66px; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; text-shadow: 0 1px #ffffff99; }
.lab-note { flex-basis: 100%; max-width: 62ch; margin: 0; font-size: 11px; line-height: 1.45; color: #404040; text-shadow: 0 1px #ffffff80; }
.lab-vadbox { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; text-shadow: 0 1px #ffffff99; }
.lab .lab-foot { margin: 10px 2px 0; font-size: 11.5px; color: #333; text-shadow: 0 1px #ffffff80; }
.lab-foot .link-btn { color: hsl(calc(var(--h) + 4) 90% 32%); }

/* dar pencere ve telefon: kaynak seçici yatay şerit olur */
@container lab (max-width: 560px) {
  .lab-deck { grid-template-columns: minmax(0, 1fr); }
  .lab-src { flex-direction: row; }
  .lab-cap { display: none; }
  .lab-src button { flex: 1; justify-content: center; padding: 8px 4px; border-top: 0; }
  .lab-src button + button { border-left: 1px solid #0000002e; }
  .lab-mod { gap: 12px 18px; }
  .lab-waves { width: 100%; }
  .lab-waves button { flex: 1; }
}
html[data-device="phone"] .lab { padding: 2px 12px 16px; }
html[data-device="phone"] .lab-stage { height: min(40vh, 320px); }
input[type="range"] { accent-color: var(--flavor); }

/* --- Dashboard --- */
.dash {
  position: absolute; inset: 0; z-index: 950; overflow: auto;
  background: #0b1a2c8c; backdrop-filter: blur(3px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  padding: calc(var(--menubar-h) + 20px) 16px 24px;
  animation: fade-in .22s;
}
.dash.is-leaving { opacity: 0; transition: opacity .2s; }
.dash-grid { display: grid; grid-template-columns: repeat(3, minmax(220px, 260px)); gap: 16px; animation: dash-in .32s var(--ease); }
@keyframes dash-in { from { transform: scale(1.06); opacity: 0; } }
.dash-widget {
  padding: 14px; border-radius: 16px; color: #fff;
  background: #00000073; border: 1px solid #ffffff26;
  box-shadow: 0 25px 50px -12px #00000066, inset 0 1px #ffffff1f;
}
.dash-title { margin: 0 0 10px; font-size: 11px; font-weight: 700; color: #ffffffa0; }
.dash-clock svg { width: 130px; height: 130px; display: block; margin: 0 auto; }
.dash-clock .face { fill: #f6f6f6; stroke: #bbb; stroke-width: 1; }
.dash-clock line { stroke: #333; stroke-width: 1.5; stroke-linecap: round; }
.dash-clock .hh { stroke-width: 3.5; }
.dash-clock .mm { stroke-width: 2.5; }
.dash-clock .ss { stroke: #ff9d2e; stroke-width: 1.2; }
.dash-digital { margin: 10px 0 0; text-align: center; font-size: 12px; color: #ffffffc0; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; font-size: 12px; }
.cal-grid b { font-size: 10px; color: #ffffff80; font-weight: 600; }
.cal-grid span { padding: 3px 0; border-radius: 50%; }
.cal-grid .is-today { background: var(--flavor); font-weight: 700; }
.wx-temp { margin: 4px 0 0; font: 300 54px/1 var(--font-ui); }
.wx-desc { margin: 6px 0 0; font-size: 12px; color: #ffffffc0; }
.res-svg { width: 100%; height: auto; }
.res-selects { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.res-selects select, .dash-ohm input { width: 100%; font: inherit; font-size: 12px; padding: 3px 6px; border-radius: 6px; border: 1px solid #ffffff40; background: #ffffff1a; color: #fff; }
.res-selects option { color: #000; }
.res-value { margin: 10px 0 0; font: 22px/1 var(--font-crt); color: var(--flavor-light); }
.dash-ohm label { display: grid; grid-template-columns: 18px 1fr; align-items: center; gap: 6px; margin-top: 6px; font-weight: 700; }
.dash-ohm input::placeholder { color: #ffffff70; }
.ohm-help { margin: 0; font-size: 11px; color: #ffffffa0; }
.ohm-out { margin: 10px 0 0; min-height: 1.4em; font: 20px/1 var(--font-crt); color: var(--flavor-light); }
.dash-note { background: linear-gradient(#fff7a8, #f6e27a); color: #3b3200; border-color: #d8c25a; }
.dash-note .dash-title { color: #8a7400; }
.dash-note textarea { width: 100%; height: 130px; border: 0; background: none; resize: none; outline: none; font: 14px/1.4 "Comic Sans MS", "Chalkboard SE", var(--font-ui); color: inherit; }
.dash-exit { margin: 0; font-size: 12px; color: #ffffffa0; }

/* --- Özgeçmiş --- */
.cv-page { background: #fff; padding: 24px 26px; margin: 12px; border: 1px solid #c8c8c8; box-shadow: 0 2px 8px #0002; font-size: 12.5px; }
.cv-head { display: flex; gap: 14px; align-items: center; padding-bottom: 12px; border-bottom: 2px solid #222; }
.cv-head img { border-radius: 6px; object-fit: cover; }
.cv-head h1 { font: 400 24px/1.1 Georgia, "Times New Roman", serif; }
.cv-page section { margin-top: 14px; }
.cv-page h2 { font: 400 15px/1 Georgia, "Times New Roman", serif; padding-bottom: 4px; margin-bottom: 8px !important; border-bottom: 1px solid #bbb; }
.cv-item + .cv-item { margin-top: 10px; }
.cv-row { display: flex; justify-content: space-between; gap: 12px; }
.cv-item ul { padding-left: 18px !important; margin-top: 4px !important; }
.cv-item li + li { margin-top: 2px; }
.cv-page .link-btn { text-decoration: none; color: inherit; }
.cv-page .link-btn:hover b { text-decoration: underline; }
.cv-skill { display: grid; grid-template-columns: 170px 1fr; gap: 8px; align-items: start; }
.cv-skill + .cv-skill { margin-top: 6px !important; }
@media (max-width: 560px) { .cv-skill { grid-template-columns: 1fr; } .cv-page { padding: 16px; margin: 6px; } }

/* --- Tarayıcı --- */
.browser { display: flex; flex-direction: column; height: 100%; }
.addr { flex: 1; min-width: 0; padding: 2px 10px; border-radius: 12px; background: #fff; border: 1px solid #9a9a9a; font-size: 12px; color: #444; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.browser-stage { position: relative; flex: 1; min-height: 360px; background: #fff; }
.browser-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.browser-wait { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; padding: 24px; text-align: center; color: #777; }

/* --- Mayın Tarlası --- */
.mines { padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.mines-hud { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 6px 8px; background: #c9ced4; border-radius: 6px; box-shadow: inset 0 1px 3px #0004; }
.lcd { font: 26px/1 var(--font-crt); color: #ff3b30; background: #1a0000; padding: 2px 6px; border-radius: 3px; letter-spacing: 1px; }
.mines-face { width: 34px; height: 34px; padding: 4px; border-radius: 50%; border: 1px solid #888; background: linear-gradient(#fafafa, #d8d8d8); cursor: default; }
.mines-grid { display: grid; grid-template-columns: repeat(9, 28px); gap: 2px; padding: 4px; background: #9aa1a9; border-radius: 4px; touch-action: manipulation; }
.mc {
  width: 28px; height: 28px; padding: 0; border: 0; border-radius: 3px; cursor: default;
  background: linear-gradient(#fdfdfd, #d9dde2); box-shadow: inset 0 1px #fff, 0 1px 1px #0003;
  font: 700 15px/1 var(--font-ui); display: grid; place-items: center;
}
.mc svg { width: 16px; height: 16px; }
.mc.is-open { background: #eef0f2; box-shadow: inset 0 0 0 1px #d0d4d8; }
.mc.is-boom { background: #ff5c5c; }
.mc[data-n="1"] { color: #1f5fd1; } .mc[data-n="2"] { color: #2f8a2f; } .mc[data-n="3"] { color: #d12a2a; } .mc[data-n="4"] { color: #1b2f7a; }
.mc[data-n="5"] { color: #7a1b1b; } .mc[data-n="6"] { color: #1b7a76; } .mc[data-n="7"] { color: #111; } .mc[data-n="8"] { color: #777; }
.mines-help { display: flex; align-items: center; gap: 10px; font-size: 11px; color: #666; }
.mines-flag { white-space: nowrap; }

/* --- Önizleme --- */
.pv { display: flex; flex-direction: column; height: 100%; }
.pv-count { font-size: 11px; color: #555; font-variant-numeric: tabular-nums; }
.pv-pct { min-width: 52px; font-variant-numeric: tabular-nums; }
.pv-stage { position: relative; flex: 1; min-height: 260px; overflow: hidden; background: #2b2b2b; cursor: zoom-in; touch-action: none; }
.pv-stage.is-zoomed { cursor: grab; }
.pv-stage.is-zoomed.is-panning { cursor: grabbing; }
.pv-img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; will-change: transform; transition: opacity .2s; user-select: none; }
.pv-img.is-smooth { transition: transform .28s cubic-bezier(.2, .9, .3, 1), opacity .2s; }
.pv-cap { padding: 6px 12px; font-size: 12px; color: #444; background: linear-gradient(#ececec, #dedede); border-top: 1px solid #b5b5b5; min-height: 28px; }
.gallery-stage { cursor: zoom-in; }

/* --- Bildirim --- */
.notify {
  position: absolute; right: 12px; top: calc(var(--menubar-h) + 12px); z-index: 1080;
  display: flex; gap: 10px; align-items: center; width: min(320px, calc(100vw - 24px)); padding: 10px 12px;
  border: 1px solid #ffffff30; border-radius: 12px; text-align: left; cursor: pointer;
  background: #141820d9; color: #fff; box-shadow: 0 12px 30px #0006; backdrop-filter: blur(8px);
}
.notify:hover { background: #1c2230e6; }
.notify-ico { width: 36px; height: 36px; flex: none; }
.notify-ico svg { width: 100%; height: 100%; }
.notify-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 12px; }
.notify-text b { font-size: 12px; color: #ffffffc0; font-weight: 600; }
.notify-text span { line-height: 1.35; }

/* --- iletişim v3 --- */
.mail-sent { padding: 32px 24px; text-align: center; }
.mail-sent h2 { font-size: 16px; margin-bottom: 6px !important; }
.mail-actions button[disabled] { opacity: .6; }


/* ==========================================================================
   Sürüm 4 bileşenleri
   ========================================================================== */
/* masaüstü ikonları: serbest konum */
.desk-icons.is-free { display: block; left: 0; right: 0; top: var(--menubar-h); bottom: var(--dock-h); pointer-events: none; }
.desk-icons.is-free .desk-icon { position: absolute; pointer-events: auto; touch-action: none; }
.desk-icon.is-dragging { z-index: 3; opacity: .8; transition: none; }
.desk-icon.is-dragging svg { filter: drop-shadow(0 8px 10px #0006); }
.menubar-lang { font-size: 12px; font-weight: 700; padding: 0 8px; letter-spacing: .02em; }

/* sağ tık menüsü */
.ctx-menu {
  position: fixed; z-index: 1100; min-width: 230px; padding: 4px 0;
  background: #fffffff2; backdrop-filter: blur(8px); border: 1px solid #0000004d; border-radius: 6px; box-shadow: 0 8px 24px #0003;
  transform-origin: top left;
}

/* ekran koruyucu */
.saver { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 3000; background: #04060c; cursor: none; }

/* Hizmetler */
.svc-head { display: flex; gap: 16px; align-items: center; padding: 18px 20px; background: linear-gradient(hsl(var(--h) 70% 96%), hsl(var(--h) 50% 90%)); border-bottom: 1px solid #c4c4c4; }
.svc-head svg { width: 64px; height: 64px; display: block; }
.svc-head h1 { font: 400 22px/1.2 Georgia, "Times New Roman", serif; margin-bottom: 4px !important; }
.svc-head p { font-size: 13px; color: var(--ink-2); max-width: 56ch; }
.svc-offers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.svc-offer h3 { font-size: 13px; margin-bottom: 4px !important; }
.svc-offer p { font-size: 12px; color: var(--ink-2); }
.svc-ex { margin-top: 6px; font-size: 12px; color: hsl(calc(var(--h) + 4) 90% 38%); }
.svc .pad + .pad { padding-top: 0; }
.svc-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 12px; }
.svc-form label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: #555; }
.svc-form input, .svc-form select, .svc-form textarea { font: inherit; font-size: 13px; color: var(--ink); padding: 5px 8px; border: 1px solid #aaa; border-radius: 4px; background: #fff; box-shadow: inset 0 1px 2px #0001; }
.svc-form textarea { resize: vertical; }
.svc-form :focus { outline: 2px solid var(--select); outline-offset: 0; }
.svc-wide { grid-column: 1 / -1; }
.svc-actions { display: flex; justify-content: flex-end; }
@media (max-width: 560px) { .svc-offers, .svc-form { grid-template-columns: 1fr; } }

/* Dudley: Panther dönemi iChat gibi fırçalanmış metal pencere; cihazın 24 LED'lik halkası durumu gösterir */
.win--metal .win-frame {
  background-color: #b4b4b4;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .012' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(#dcdcdc, #c2c2c2 18%, #b0b0b0 60%, #a2a2a2);
  border-color: #0000008c;
}
.win--metal .titlebar, .win--metal.is-active .titlebar { background: none; border-bottom: 0; }
.win--metal .win-title { text-shadow: 0 1px #ffffffa6; }

.dud { --led: #7af0ff; display: flex; flex-direction: column; height: 100%; padding: 0 12px 12px; color: var(--ink); }
.dud[data-state="thinking"] { --led: #ffc95c; }
.dud[data-state="offline"] { --led: #9aa5b4; }

.dud-head { flex: none; display: flex; align-items: center; gap: 12px; padding: 2px 2px 10px; }
.dud-who { display: flex; flex-direction: column; gap: 1px; min-width: 0; text-shadow: 0 1px #ffffff8c; }
.dud-who strong { font-size: 15px; color: #1a1a1a; }
.dud-status { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #3c3c3c; }
.dud-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--led); box-shadow: 0 0 4px var(--led), inset 0 0 0 1px #0003; }
.dud-new { margin-left: auto; min-height: 19px; padding: 1px 11px; font-size: 11px; }

/* cihaz: kumaş kaplı silindir, üstünde 24 LED */
.dud-device { position: relative; flex: none; width: 64px; height: 74px; zoom: 1.25; }
.dud-glow { position: absolute; left: -10px; top: -10px; width: 84px; height: 46px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--led) 65%, #0000), #0000); transition: background .4s; }
.dud-can {
  position: absolute; left: 10px; top: 20px; width: 44px; height: 50px; border-radius: 0 0 22px 22px / 0 0 7px 7px;
  background:
    radial-gradient(#00000059 .6px, #0000 1px) 0 0 / 3px 3px,
    linear-gradient(90deg, #141922, #3d495c 38%, #4a576b 46%, #252e3c 66%, #0f131b);
  box-shadow: 0 5px 8px -3px #0007;
}
.dud-top { position: absolute; left: 10px; top: 13px; width: 44px; height: 15px; border-radius: 50%; background: radial-gradient(closest-side, #2d3746, #161b24); box-shadow: inset 0 -1px #ffffff2e; }
.dud-ring { position: absolute; left: 10px; top: -1.5px; width: 44px; height: 44px; transform: scaleY(.34); }
.dud-ring i {
  position: absolute; left: 19.75px; top: 19.75px; width: 4.5px; height: 4.5px; border-radius: 50%;
  background: var(--led); box-shadow: 0 0 4px 1px var(--led);
  transform: rotate(calc(var(--i) * 15deg)) translateX(18px);
  transition: background .3s, box-shadow .3s;
}
.dud[data-state="idle"] .dud-ring i { animation: dud-breathe 4s ease-in-out infinite; }
.dud[data-state="thinking"] .dud-ring i { animation: dud-comet .9s linear infinite; animation-delay: calc(var(--i) * -.0375s); }
.dud[data-state="speaking"] .dud-ring i { animation: dud-wave .7s ease-in-out infinite; animation-delay: calc(var(--i) * -.0583s); }
.dud[data-state="offline"] .dud-ring i { opacity: .45; box-shadow: none; }
@keyframes dud-breathe { 50% { opacity: .5; } }
@keyframes dud-comet { 0% { opacity: 1; } 45%, 100% { opacity: .12; } }
@keyframes dud-wave { 0%, 50%, 100% { opacity: .45; } 25%, 75% { opacity: 1; } }

/* konuşma alanı */
.dud-log {
  position: relative; isolation: isolate; flex: 1; min-height: 140px; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 10px; padding: 10px 12px 14px;
  background: #fff; border: 1px solid #6f6f6f; border-radius: 5px;
  box-shadow: inset 0 1px 3px #00000040, 0 1px #ffffff8c;
}
.dud-time { margin: 0; text-align: center; font-size: 10.5px; color: #8a8a8a; }
.dud-note { margin: 0 10px; padding: 5px 10px; border-radius: 8px; background: #f1f1f1; color: #5a5a5a; font-size: 11px; line-height: 1.4; text-align: center; }
.dud-row--user { display: flex; justify-content: flex-end; padding-left: 48px; }
.dud-row--bot { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 8px; justify-items: start; padding-right: 32px; }
.dud-ava { grid-row: 1; align-self: end; width: 26px; height: 26px; filter: drop-shadow(0 1px 1px #0003); }
.dud-ava svg { width: 100%; height: 100%; }
.dud-row--bot > :not(.dud-ava) { grid-column: 2; }

.dud-msg { position: relative; margin: 0; padding: 7px 12px 8px; border-radius: 15px; font-size: 13px; line-height: 1.42; color: #111; white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; }
.dud-msg::before { content: ""; position: absolute; z-index: -1; bottom: 7px; width: 11px; height: 11px; transform: rotate(45deg); }
.dud-msg--bot {
  background: linear-gradient(#fff, #f0f2f6 48%, #e4e8ef 52%, #edf0f4); border: 1px solid #b3bcc8;
  box-shadow: inset 0 1px #fff, 0 1px 2px #0000001f;
}
.dud-msg--bot::before { left: -6px; background: #edf0f4; border-left: 1px solid #b3bcc8; border-bottom: 1px solid #b3bcc8; }
.dud-msg--user {
  background: linear-gradient(hsl(var(--h) 100% 94%), hsl(var(--h) 90% 85%) 48%, hsl(var(--h) 85% 79%) 52%, hsl(var(--h) 90% 86%));
  border: 1px solid hsl(var(--h) 45% 62%);
  box-shadow: inset 0 1px #ffffffb3, 0 1px 2px #0000001f;
}
.dud-msg--user::before { right: -6px; background: hsl(var(--h) 90% 86%); border-top: 1px solid hsl(var(--h) 45% 62%); border-right: 1px solid hsl(var(--h) 45% 62%); }
.dud-msg a { color: hsl(var(--h) 85% 36%); }
.dud-msg--typing { display: flex; gap: 4px; padding: 11px 13px; }
.dud-msg--typing i { width: 6px; height: 6px; border-radius: 50%; background: #8f99a8; animation: dud-dot 1s ease-in-out infinite; }
.dud-msg--typing i:nth-child(2) { animation-delay: .15s; }
.dud-msg--typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dud-dot { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }

/* açılan pencereyi tekrar açan düğme */
.dud-open {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; padding: 2px 10px 2px 4px;
  font: inherit; font-size: 11.5px; color: #1a1a1a; cursor: default;
  background: linear-gradient(#fdfdfd, #ececec 50%, #e0e0e0 51%, #f0f0f0); border: 1px solid #9aa2ad; border-radius: 12px;
  box-shadow: inset 0 1px #fff, 0 1px 1px #0000001a;
}
.dud-open:active { background: linear-gradient(#d0d0d0, #bdbdbd); }
.dud-open-ico { width: 16px; height: 16px; display: grid; }
.dud-open-ico svg { width: 100%; height: 100%; }

/* öneriler ve giriş, metal zemin üzerinde */
.dud-chips { flex: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 0 0; }
.dud-chip {
  padding: 2px 11px; font: inherit; font-size: 11.5px; color: #111; cursor: default;
  background: linear-gradient(#fdfdfd, #e8e8e8 50%, #dadada 51%, #ededed); border: 1px solid #858585; border-radius: 12px;
  box-shadow: inset 0 1px #fff, 0 1px 1px #00000026;
}
.dud-chip:active { background: linear-gradient(#c8c8c8, #b2b2b2); box-shadow: inset 0 1px 2px #0004; }
.dud-input { flex: none; display: flex; gap: 8px; padding: 10px 0 0; }
.dud-input input {
  flex: 1; min-width: 0; font: inherit; font-size: 13px; padding: 5px 12px; color: #111;
  background: #fff; border: 1px solid #727272; border-radius: 13px; box-shadow: inset 0 1px 2px #0000004d;
}
.dud-input input:focus { outline: none; border-color: hsl(var(--h) 60% 45%); box-shadow: inset 0 1px 2px #0000004d, 0 0 0 3px hsl(var(--h) 90% 60% / .45); }
.dud-send { min-width: 76px; }

html[data-motion="reduced"] .dud-ring i, html[data-motion="reduced"] .dud-msg--typing i { animation: none; }
@media (prefers-reduced-motion: reduce) { .dud-ring i, .dud-msg--typing i { animation: none; } }

/* 3B model */
.m3d { display: flex; flex-direction: column; height: 100%; }
.m3d-stage { position: relative; flex: 1; min-height: 300px; overflow: hidden; touch-action: none; cursor: grab;
  background: radial-gradient(60% 40% at 50% 80%, #0000002e, #0000 70%), radial-gradient(120% 90% at 50% 20%, #fbfbfb, #dfe3e8 60%, #c9cfd6); }
.m3d-stage:active { cursor: grabbing; }
.m3d-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.m3d-msg { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; padding: 24px; text-align: center; color: #666; }
.m3d-hint { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); margin: 0; padding: 4px 12px; border-radius: 12px; background: #0000008c; color: #fff; font-size: 11px; transition: opacity .4s; pointer-events: none; }
.m3d-hint.is-gone { opacity: 0; }
.m3d-cap { display: flex; justify-content: space-between; gap: 12px; padding: 6px 12px; font-size: 12px; color: #444; background: linear-gradient(#ececec, #dedede); border-top: 1px solid #b5b5b5; }
.m3d-stats { color: #777; white-space: nowrap; }
.f-thumb--photo { border-radius: 4px; border: 2px solid #fff; }
.f-thumb--photo img { object-fit: cover; }

/* Lighthouse ve GitHub */
.lh-box { display: grid; gap: 8px; }
.lh-row { display: grid; grid-template-columns: 70px repeat(4, 1fr); align-items: center; gap: 6px; }
.lh-mode { font-size: 12px; font-weight: 600; }
.lh-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10px; color: #555; text-align: center; }
.lh-cell svg { width: 40px; height: 40px; }
.lh-own, .gh-stats { font-size: 12px; }
.gh-stats b { font-weight: 700; }
.reader-note p + p { margin-top: 8px !important; }
.mines-flag svg { width: 12px; height: 12px; }

/* --- giriş görseli hizalama modu (?ayarla) --- */
.calib { position: absolute; border: 2px dashed #ff2d55; background: #ff2d5522; cursor: move; z-index: 5; touch-action: none; }
.calib i { position: absolute; right: -8px; bottom: -8px; width: 16px; height: 16px; border-radius: 50%; background: #ff2d55; cursor: nwse-resize; }
.calib-out { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 60; display: flex; gap: 8px; align-items: center; padding: 8px 12px; background: #fff; border: 1px solid #0004; border-radius: 8px; box-shadow: 0 8px 24px #0003; font: 12px/1.4 ui-monospace, Consolas, monospace; }
.mines-flag[aria-pressed="true"] { background: linear-gradient(hsl(var(--h) 80% 86%), hsl(var(--h) 60% 72%)); }
.mines-best { font-size: 11px; color: #666; min-height: 1.2em; }

/* --- Frekans Avı --- */
.freq p { font-size: 13px; }
.freq-round { display: flex; justify-content: space-between; font: 20px/1 var(--font-crt); color: #555; }
.freq-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.freq-slider { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; font-size: 12px; }
.freq-slider input { grid-column: 1 / -1; grid-row: 2; width: 100%; }
.freq-slider output { font-variant-numeric: tabular-nums; font-weight: 700; }
.freq-result { min-height: 3em; padding: 8px 10px; background: #fff; border: 1px solid #ccc; border-radius: 6px; }
.freq-result:empty { visibility: hidden; }

/* ==========================================================================
   5. Mobil
   ========================================================================== */
@media (max-width: 720px) {
  :root { --dock-h: 62px; }
  .menubar { font-size: 13px; }
  .menu-btn { padding: 0 7px; }
  .menu--wide { display: none; }
  .desk-icons {
    left: 8px; right: 8px; top: calc(var(--menubar-h) + 10px); bottom: auto;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 0;
  }
  .desk-icon { width: auto; }
  .win {
    transform: none !important; left: 6px; right: 6px; top: calc(var(--menubar-h) + 6px);
    width: auto !important; height: auto !important;
    max-height: calc(100% - var(--menubar-h) - var(--dock-h) - 14px);
  }
  .win.is-max { height: calc(100% - var(--menubar-h) - var(--dock-h) - 14px) !important; }
  .menubar-clock { padding: 0 8px; font-size: 12px; }
  .dash-grid { grid-template-columns: 1fr; }
  .win-resize, .light--max { display: none; }
  .titlebar { cursor: default; height: 30px; }
  .lights { gap: 10px; }
  .light { width: 18px; height: 18px; }
  .light svg { opacity: .55; width: 9px; height: 9px; }
  .dock { gap: 4px; padding: 5px 8px 3px; max-width: 100vw; }
  .dock-item { --s: 44px; }
  .dock-sep { margin: 4px 2px 6px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
html[data-motion="reduced"] *, html[data-motion="reduced"] *::before, html[data-motion="reduced"] *::after {
  animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important;
}

/* ==========================================================================
   6. Telefon: iPhone OS 1 tarzı kabuk (html[data-device="phone"], js/os/phone.js)
   ========================================================================== */
:root { --font-phone: "Helvetica Neue", Helvetica, Arial, sans-serif; --sb-h: 20px; }
html[data-device="phone"] .intro,
html[data-device="phone"] .menubar,
html[data-device="phone"] .desk-icons,
html[data-device="phone"] .dock-wrap { display: none; }

/* durum çubuğu */
.sb-status {
  position: fixed; z-index: 1200; top: 0; left: 0; right: 0; height: var(--sb-h); padding: 0 6px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  font: 700 13px/1 var(--font-phone); color: #fff; pointer-events: none;
  background: linear-gradient(#000000a6, #00000080); transition: background .3s;
}
.sb-status[data-mode="app"] { background: linear-gradient(#323232, #000); }
.sb-carrier { display: flex; align-items: center; gap: 4px; font-weight: 400; font-size: 12px; white-space: nowrap; }
.sb-bars { display: flex; align-items: flex-end; gap: 1px; height: 10px; }
.sb-bars b { width: 3px; background: #fff; border-radius: .5px; }
.sb-bars b:nth-child(1) { height: 2px; } .sb-bars b:nth-child(2) { height: 4px; } .sb-bars b:nth-child(3) { height: 6px; }
.sb-bars b:nth-child(4) { height: 8px; } .sb-bars b:nth-child(5) { height: 10px; }
.sb-mid { display: grid; place-items: center; }
.sb-mid > * { grid-area: 1 / 1; }
.sb-lock { width: 10px; height: 12px; visibility: hidden; }
.sb-status[data-mode="lock"] .sb-time { visibility: hidden; }
.sb-status[data-mode="lock"] .sb-lock { visibility: visible; }
.sb-batt { justify-self: end; position: relative; width: 24px; height: 11px; margin-right: 3px; padding: 1px; border: 1px solid #fff; border-radius: 2.5px; }
.sb-batt::after { content: ""; position: absolute; right: -4px; top: 2.5px; width: 2px; height: 4px; background: #fff; border-radius: 0 1px 1px 0; }
.sb-batt i { display: block; width: var(--lvl, 100%); height: 100%; border-radius: 1px; background: linear-gradient(#fff, #d6d6d6); }

/* ana ekran */
.phone { position: absolute; inset: 0; z-index: 4; font-family: var(--font-phone); }
.phone.is-app .sb-home { visibility: hidden; }
.sb-home { position: absolute; inset: var(--sb-h) 0 0; display: flex; flex-direction: column; }
.sb-grid {
  flex: 1; min-height: 0; overflow-y: auto; padding: 16px 4px 12px;
  display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: max-content; row-gap: 18px; align-content: start;
}
.sb-app {
  display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; padding: 0;
  border: 0; background: none; color: #fff; text-decoration: none; cursor: default; -webkit-tap-highlight-color: transparent;
}
.sb-tile {
  position: relative; width: 60px; height: 60px; border-radius: 14px; overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(color-mix(in srgb, var(--tile) 60%, #fff), var(--tile) 55%, color-mix(in srgb, var(--tile) 80%, #000));
  box-shadow: 0 2px 4px #00000080;
}
.sb-tile > svg { width: 46px; height: 46px; filter: drop-shadow(0 1px 1.5px #00000066); }
/* iPhone OS ikonlarının üst yarısındaki kavisli parlama */
.sb-tile::after {
  content: ""; position: absolute; left: -20%; right: -20%; top: -50%; height: 100%; pointer-events: none;
  border-radius: 0 0 50% 50% / 0 0 26% 26%; background: linear-gradient(#ffffffa6, #ffffff1f);
}
.sb-tile--clip b { font: 700 27px/1 var(--font-phone); color: #fff; letter-spacing: -.5px; text-shadow: 0 -1px #00000040; }
.sb-label { max-width: 78px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; text-shadow: 0 1px 2px #000, 0 0 1px #000; }
.sb-app:active .sb-tile { filter: brightness(.55); }
.sb-app:focus-visible { outline: none; }
.sb-app:focus-visible .sb-tile { outline: 2px solid #fff; outline-offset: 2px; }
.sb-dock {
  flex: none; display: grid; grid-template-columns: repeat(4, 1fr); padding: 12px 4px calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(#ffffff59, #ffffff2e 48%, #ffffff12 52%, #ffffff21);
  border-top: 1px solid #ffffffb3; box-shadow: 0 -1px #00000040, inset 0 1px #ffffff4d;
}
@media (orientation: landscape) { .sb-grid { grid-template-columns: repeat(8, 1fr); row-gap: 12px; padding-top: 10px; } .sb-dock { padding-top: 8px; padding-bottom: 6px; } }

/* uygulamalar tam ekran, iPhone gezinme çubuğuyla */
html[data-device="phone"] .win-layer { top: var(--sb-h); }
html[data-device="phone"] .win {
  transform: none !important; left: 0 !important; right: 0 !important; top: 0 !important; bottom: 0;
  width: auto !important; height: auto !important; max-height: none !important;
}
html[data-device="phone"] .win.is-under { visibility: hidden; }
html[data-device="phone"] .win-frame { border: 0; border-radius: 0 !important; box-shadow: -3px 0 14px #00000059; }
html[data-device="phone"] .win .titlebar {
  height: 44px; cursor: default; text-shadow: none;
  background: linear-gradient(#b5c1d1, #8b9eb6 50%, #8095b0 50%, #6d84a2); border-bottom: 1px solid #2d3642; box-shadow: inset 0 1px #cdd6e1;
}
html[data-device="phone"] .win .win-title { padding: 0 100px; font: 700 18px/1 var(--font-phone); color: #fff; text-shadow: 0 -1px #00000080; }
html[data-device="phone"] .lights,
html[data-device="phone"] .win-resize { display: none; }
.nav-back, .nav-home {
  position: absolute; z-index: 1; top: 7px; height: 30px; padding: 0; border: 0; isolation: isolate; cursor: default;
  color: #fff; font: 700 12px/30px var(--font-phone); text-shadow: 0 -1px #00000080; background: #33445c;
}
.nav-back::before, .nav-home::before {
  content: ""; position: absolute; z-index: -1; inset: 1px; border-radius: 5px;
  background: linear-gradient(#97a9c0, #6b82a3 50%, #5e779b 50%, #58729a);
}
.nav-back:active::before, .nav-home:active::before { background: linear-gradient(#5f7697, #3d5578); }
/* ok biçimli geri düğmesi: sol ucu sivri, sağı yuvarlak */
.nav-back { left: 5px; max-width: 96px; padding: 0 10px 0 16px; border-radius: 0 6px 6px 0; clip-path: polygon(13px 0, 100% 0, 100% 100%, 13px 100%, 0 50%); }
.nav-back::before { inset: 1px 1px 1px 1.5px; border-radius: 0 5px 5px 0; clip-path: polygon(12.2px 0, 100% 0, 100% 100%, 12.2px 100%, 0 50%); }
.nav-back span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-home { right: 5px; width: 38px; border-radius: 6px; display: grid; place-items: center; }
.nav-home[hidden] { display: none; }
.nav-home svg { width: 17px; height: 17px; filter: drop-shadow(0 -1px #00000066); }
.dash--screen {
  position: static; min-height: 100%; justify-content: flex-start; padding: 14px 12px 28px; overflow: visible;
  backdrop-filter: none; animation: none; background: radial-gradient(130% 70% at 50% 0%, #34465e, #141c28 70%);
}
.dash--screen .dash-grid { width: 100%; max-width: 440px; grid-template-columns: 1fr; gap: 12px; animation: none; }
@media (orientation: landscape) { .dash--screen .dash-grid { max-width: 820px; grid-template-columns: 1fr 1fr; } }

/* kilit ekranı */
.lock { position: fixed; inset: 0; z-index: 1100; display: flex; flex-direction: column; overflow: hidden; font-family: var(--font-phone); color: #fff; user-select: none; }
.lock-bg { position: absolute; inset: 0; background: radial-gradient(120% 75% at 50% 45%, hsl(var(--h) 70% 62%), hsl(calc(var(--h) + 8) 78% 28%)); }
.lock-band { position: relative; flex: none; background: linear-gradient(#000000b3, #0000008c 50%, #00000066 50%, #00000080); }
.lock-top { padding: calc(var(--sb-h) + 6px) 0 12px; text-align: center; border-bottom: 1px solid #ffffff2e; }
.lock-clock { display: block; font-size: 68px; font-weight: 200; line-height: 1; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.lock-date { margin: 4px 0 0; font-size: 16px; }
.lock-mid { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; }
.lock-imac { position: relative; width: min(72vw, 38vh); }
.lock-imac img { display: block; width: 100%; filter: drop-shadow(0 18px 22px #00000066); }
.lock-crt { position: absolute; display: grid; place-items: center; container-type: size; text-align: center; color: #c6f4ff; font-family: var(--font-crt); text-shadow: 0 0 6px #7fe6ffb3; }
.lock-crt span { font-size: 11cqw; line-height: 1.05; padding: 0 6%; }
.lock-bottom { padding: 22px 20px calc(22px + env(safe-area-inset-bottom)); border-top: 1px solid #ffffff26; }
.slider {
  position: relative; display: flex; align-items: center; height: 52px; padding: 4px; border-radius: 14px;
  background: linear-gradient(#000000b3, #262626cc); box-shadow: inset 0 1px 3px #000, 0 1px #ffffff2e;
}
.slider-knob {
  position: relative; z-index: 1; flex: none; width: 66px; height: 44px; padding: 0; border: 0; border-radius: 10px; touch-action: none; cursor: grab;
  display: grid; place-items: center; background: linear-gradient(#fdfdfd, #dadada 50%, #c6c6c6 50%, #e6e6e6);
  box-shadow: inset 0 1px #fff, 0 1px 2px #000000b3;
}
.slider-knob:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.slider-knob svg { width: 26px; height: 20px; }
.slider-text {
  position: absolute; left: 76px; right: 8px; text-align: center; white-space: nowrap; pointer-events: none;
  font-size: 19px; color: #0000; background: linear-gradient(90deg, #6f6f6f 0 40%, #fff 50%, #6f6f6f 60% 100%) 0 0 / 300% 100%;
  -webkit-background-clip: text; background-clip: text; animation: lock-shimmer 2.6s linear infinite;
}
@keyframes lock-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }