:root {
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --font-win: "Lucida Grande", "Lucida Sans Unicode", "Segoe UI", Tahoma, Verdana, sans-serif;
  --icon: 60px;
  --paper: #f3f1ef;
  --accent: #f6c026;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; }
body {
  background: #000;
  color: #1d1d1f;
  font-family: var(--font-ui);
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
}

/* ---------- Arka plan (bulanık portre; assets/background.jpg ile değişir) ---------- */
.bg { position: fixed; inset: 0; overflow: hidden; background: radial-gradient(90% 75% at 50% 38%, #1a1d26 0%, #0a0b0f 62%, #000 100%); }
.bg > div { position: absolute; filter: blur(46px); }
.bg-cap  { left: 38%; top: 8%;  width: 26%; height: 18%; border-radius: 50% 50% 40% 40%; background: #5d588f; opacity: .55; }
.bg-head { left: 36%; top: 19%; width: 28%; height: 40%; border-radius: 46% 46% 50% 50%; background: radial-gradient(60% 60% at 50% 40%, #6e5445, #2a1e19 85%); opacity: .8; }
.bg-body { left: 22%; top: 62%; width: 56%; height: 60%; border-radius: 50% 50% 0 0; background: radial-gradient(70% 70% at 50% 20%, #232733, #07080b 90%); }
.bg.has-photo > div:not(.bg-photo) { display: none; }
.bg.has-photo { background: #000; }
.bg.photo-full { background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; }
/* küçük görsel: büyütmeden ortala, kenarlarını siyaha erit */
.bg > .bg-photo {
  position: absolute; left: 50%; top: 50%; width: var(--s); height: var(--s); transform: translate(-50%, -50%);
  --s: max(100vmin, min(100vmax, 900px));
  background: center / cover no-repeat; filter: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
}

/* ---------- Logo imzası (sol üst) ---------- */
.signature { position: fixed; left: max(26px, env(safe-area-inset-left)); top: max(22px, env(safe-area-inset-top)); z-index: 4000; }
.brand {
  --n: clamp(30px, 3.2vw, 46px);
  position: relative; display: inline-flex; flex-direction: column; align-items: center;
  text-decoration: none; border-radius: 10px; cursor: pointer;
  font-family: "Unbounded", var(--font-ui); font-weight: 700;
  filter: drop-shadow(0 0 5px rgba(200,215,235,.28)) drop-shadow(0 1px 1px rgba(0,0,0,.6));
}
.brand .n {
  font-size: var(--n); line-height: 1; letter-spacing: .01em; color: transparent;
  background: linear-gradient(180deg, #FFFFFF 0%, #E8EDF3 36%, #B9C4D3 46%, #5E6E84 47.5%, #5E6E84 52.5%, #F4F7FA 55%, #C3CEDC 78%, #9FADC0 100%);
  -webkit-background-clip: text; background-clip: text; filter: url(#bevel);
}
.brand .d {
  margin-top: .55em; padding-left: .93em; font-size: max(8px, calc(var(--n) * .235)); line-height: 1;
  letter-spacing: .55em; text-transform: uppercase; color: #E2E8F0;
}
.brand::before {
  content: ""; position: absolute; z-index: 1; top: calc(var(--n) * .08); left: calc(var(--n) * -.06);
  width: calc(var(--n) * .3); height: calc(var(--n) * .3); background: #fff; pointer-events: none;
  clip-path: polygon(50% 0, 54% 46%, 100% 50%, 54% 54%, 50% 100%, 46% 54%, 0 50%, 46% 46%);
}
.brand::after {
  content: ""; position: absolute; top: calc(var(--n) * .03); right: calc(var(--n) * -.31);
  width: max(10px, calc(var(--n) * .28)); height: max(10px, calc(var(--n) * .28)); background: #E2E8F0;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}
a.brand:focus-visible { outline: 2px solid #8fb4ff; outline-offset: 6px; }
.hero { display: grid; place-items: center; height: 96px; margin: -14px -16px 16px; background: radial-gradient(80% 140% at 50% 0%, #1d212b, #000 75%); }
.hero .brand { --n: 34px; }

/* ---------- Masaüstü ve ikonlar ---------- */
#desk { position: fixed; inset: 0; }
.icon {
  position: absolute; left: 0; top: 0;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: max-content; max-width: 150px;
  padding: 3px;
  border-radius: 4px;
  cursor: grab;
  touch-action: none;
  outline: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.6);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2, .9, .3, 1.2), background-color .15s;
}
.icon.settle { transition: left .3s cubic-bezier(.2,.9,.3,1), top .3s cubic-bezier(.2,.9,.3,1), opacity .5s, transform .5s cubic-bezier(.2,.9,.3,1.2), background-color .15s; }
.icon.in { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.icon.dragging { cursor: grabbing; transition: none; transform: translate(-50%, -50%) scale(1.05); filter: drop-shadow(0 12px 18px rgba(0,0,0,.35)); }
.icon .cover {
  width: var(--w); height: var(--h);
  border-radius: 2px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.25), 0 6px 14px rgba(0,0,0,.18);
  background: #ddd;
  pointer-events: none;
}
.icon .cover { transform-origin: 50% 100%; transition: transform .18s cubic-bezier(.3, .9, .4, 1.15), box-shadow .18s; }
@media (hover: hover) and (pointer: fine) {
  .icon:hover:not(.dragging) { z-index: 60 !important; }
  .icon:hover:not(.dragging) .cover { transform: scale(1.5); box-shadow: 0 2px 4px rgba(0,0,0,.35), 0 14px 28px rgba(0,0,0,.5); }
}
.icon .cover svg, .icon .cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.icon .label {
  max-width: 130px; text-align: center;
  font-size: 11.5px; line-height: 13.5px; font-weight: 700; letter-spacing: .01em; text-transform: uppercase;
  color: #fffefc; text-shadow: 1px 1px 2px rgba(0,0,0,.5);
  pointer-events: none; word-break: break-word;
}
.icon.selected { background: rgba(255,255,255,.28); box-shadow: inset 0 0 0 1px rgba(255,255,255,.7); backdrop-filter: blur(2px); }
.icon:focus-visible { box-shadow: 0 0 0 2px #2f7bff; }

/* ---------- Pencereler ---------- */
.win {
  position: fixed; left: 0; top: 0;
  width: 410px; max-height: calc(100dvh - 120px);
  display: flex; flex-direction: column;
  background: rgba(238, 234, 232, .94);
  -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4);
  border-radius: 10px;
  box-shadow: 0 0 0 .5px rgba(0,0,0,.35), 0 22px 60px rgba(0,0,0,.35), 0 4px 14px rgba(0,0,0,.2);
  font-family: var(--font-win); color: #4a4a4a;
  opacity: 0; transform: scale(.92);
  transform-origin: 50% 100%;
  transition: opacity .22s ease, transform .28s cubic-bezier(.2, .9, .3, 1.15), width .25s ease, height .25s ease;
}
.win.open { opacity: 1; transform: scale(1); }
.win.closing { opacity: 0; transform: scale(.9) translateY(10px); transition-duration: .18s; }
.win.inactive { box-shadow: 0 0 0 .5px rgba(0,0,0,.25), 0 10px 30px rgba(0,0,0,.22); }
.win.inactive .lights i { background: #cfcdcb !important; }
.win.big { width: min(900px, 92vw) !important; }
.win.moving { transition: opacity .22s, transform .28s, width .25s; }

.titlebar {
  position: relative; flex: none; height: 36px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 14px 0 74px;
  cursor: default; touch-action: none;
}
.titlebar .wtitle { font-size: 13px; font-weight: 400; color: #2b2b2b; text-align: center; line-height: 1.2; padding: 6px 0; }
.lights { position: absolute; left: 13px; top: 12px; display: flex; gap: 8px; }
.lights i { width: 12px; height: 12px; border-radius: 50%; display: block; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.2); cursor: pointer; position: relative; }
.lights i:nth-child(1) { background: #ff5f57; }
.lights i:nth-child(2) { background: #febc2e; }
.lights i:nth-child(3) { background: #28c840; }
.lights:hover i::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: rgba(0,0,0,.4); }

.info-head { flex: none; display: flex; gap: 10px; align-items: center; padding: 6px 14px 10px; border-bottom: 1px solid rgba(0,0,0,.18); }
.info-head .thumb { width: 40px; height: 40px; border-radius: 3px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.3); flex: none; }
.info-head .thumb svg, .info-head .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.info-head b { display: block; font-size: 13px; color: #111; }
.info-head span { font-size: 13px; color: #111; }
.info-body { overflow: auto; background: #f6f4f3; padding: 12px 14px 16px; font-size: 13px; line-height: 1.35; color: #5b5b5b; border-radius: 0 0 10px 10px; user-select: text; -webkit-user-select: text; }
.info-body p { margin: 0 0 .9em; }
.meta { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0 0 1em; font-size: 12px; }
.meta dt { color: #8a8a8a; text-align: right; }
.meta dd { margin: 0; color: #333; }

/* Notes penceresi */
.win.notes { width: 560px; height: 420px; max-height: calc(100dvh - 120px); }
.notes-wrap { flex: 1; min-height: 0; display: flex; background: #f6f4f3; border-radius: 0 0 10px 10px; overflow: hidden; border-top: 1px solid rgba(0,0,0,.14); }
.side { flex: none; width: 128px; padding: 10px 8px; background: rgba(238,234,232,.7); border-right: 1px solid rgba(0,0,0,.12); display: flex; flex-direction: column; gap: 2px; }
.side button {
  all: unset; box-sizing: border-box; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
  padding: 5px 8px; border-radius: 6px; font-size: 13px; color: #2b2b2b; font-family: var(--font-win);
}
.side button em { font-style: normal; font-size: 11px; color: #8b8b8b; }
.side button.on { background: rgba(0,0,0,.09); }
.side button:focus-visible { box-shadow: 0 0 0 2px #2f7bff; }
.pane { flex: 1; min-width: 0; overflow: auto; padding: 14px 16px 18px; font-size: 13px; line-height: 1.38; color: #555; user-select: text; -webkit-user-select: text; }
.pane h4 { margin: 14px 0 6px; font-size: 13px; color: #222; font-weight: 700; }
.pane h4:first-child { margin-top: 0; }
.pane p { margin: 0 0 1em; }
.checks { list-style: none; margin: 0 0 10px; padding: 0; }
.checks li { position: relative; padding: 3px 0 3px 22px; }
.checks li::before { content: ""; position: absolute; left: 0; top: 5px; width: 13px; height: 13px; border-radius: 50%; background: var(--accent); box-shadow: inset 0 0 0 .5px rgba(0,0,0,.18); }
.checks li::after { content: ""; position: absolute; left: 4px; top: 8px; width: 5px; height: 3px; border-left: 1.6px solid #fff; border-bottom: 1.6px solid #fff; transform: rotate(-45deg); }
.photos { columns: 2; column-gap: 8px; }
.photos .ph { break-inside: avoid; margin: 0 0 8px; border-radius: 6px; overflow: hidden; position: relative; }
.photos .ph svg, .photos .ph img { display: block; width: 100%; height: auto; }

/* ---------- Dock ---------- */
.dock-wrap { position: fixed; left: 0; right: 0; bottom: max(10px, env(safe-area-inset-bottom)); display: flex; justify-content: center; pointer-events: none; z-index: 5000; }
.dock {
  pointer-events: auto;
  display: flex; align-items: flex-end; gap: 10px;
  padding: 8px 12px 8px;
  background: rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6);
  border-radius: 20px;
  box-shadow: 0 0 0 .5px rgba(255,255,255,.28) inset, 0 0 0 .5px rgba(0,0,0,.5), 0 12px 30px rgba(0,0,0,.45);
  transform: translateY(120%); opacity: 0;
  transition: transform .7s cubic-bezier(.2, .9, .3, 1), opacity .6s;
}
.dock.in { transform: none; opacity: 1; }
.dock .sep { width: 1px; align-self: stretch; margin: 4px 2px; background: rgba(255,255,255,.22); }
.app {
  all: unset; box-sizing: border-box; position: relative; cursor: pointer;
  width: 42px; height: 42px; flex: none; display: block;
  transform-origin: 50% 100%;
  will-change: transform;
}
.app > svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)); transform-origin: 50% 100%; transition: transform .16s cubic-bezier(.3, .9, .4, 1.2); }
@media (hover: hover) and (pointer: fine) {
  .app:hover { z-index: 2; }
  .app:hover > svg { transform: scale(1.5); }
  .app.still:hover > svg { transform: none; }
  .app:hover .tip, .app:focus-visible .tip { bottom: calc(100% + 34px); }
}
.app.still { cursor: default; }
.app:focus-visible { outline: 2px solid #2f7bff; outline-offset: 3px; border-radius: 10px; }
.app .tip {
  position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translateX(-50%) scale(.9);
  padding: 3px 10px; border-radius: 6px; white-space: nowrap; font-size: 12px; color: #1d1d1f; font-family: var(--font-ui);
  background: rgba(240,240,242,.92); box-shadow: 0 0 0 .5px rgba(0,0,0,.2), 0 4px 12px rgba(0,0,0,.2);
  opacity: 0; pointer-events: none; transition: opacity .12s, transform .12s;
}
.app:hover .tip, .app:focus-visible .tip { opacity: 1; transform: translateX(-50%) scale(1); }
.app.bounce { animation: bounce .62s cubic-bezier(.3, 0, .4, 1) 2; }
.app.shake  { animation: shake .45s ease; }
.app .dot { position: absolute; left: 50%; bottom: -6px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: rgba(255,255,255,.8); opacity: 0; transition: opacity .2s; }
.app.running .dot { opacity: 1; }
@keyframes bounce { 0%, 100% { translate: 0 0; } 45% { translate: 0 -22px; } }
@keyframes shake  { 0%, 100% { rotate: 0deg; } 20% { rotate: -12deg; } 50% { rotate: 10deg; } 80% { rotate: -6deg; } }

.toast {
  position: fixed; left: 50%; bottom: 96px; transform: translate(-50%, 10px);
  background: rgba(30,30,32,.86); color: #fff; padding: 8px 14px; border-radius: 10px; font-size: 13px;
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; z-index: 6000; max-width: 88vw; text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.hint {
  position: fixed; left: 50%; bottom: calc(max(10px, env(safe-area-inset-bottom)) + 76px); transform: translate(-50%, 8px);
  padding: 8px 16px; border-radius: 999px; white-space: nowrap; max-width: 92vw;
  font-size: 13px; color: #f2f4f8; background: rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 0 0 .5px rgba(255,255,255,.25);
  opacity: 0; pointer-events: none; transition: opacity .6s ease, transform .6s ease; z-index: 4500;
}
.hint.show { opacity: 1; transform: translate(-50%, 0); }
html, body { touch-action: pan-x pan-y; } /* iki parmakla yakınlaştırma ve çift dokunup büyütme kapalı */
.icon .cover img, .icon .cover svg { -webkit-touch-callout: none; }

/* ---------- Mobil ---------- */
@media (max-width: 700px) {
  :root { --icon: 44px; }
  .icon { padding: 5px; gap: 4px; }
  .icon .label { font-size: 10px; line-height: 11.5px; max-width: 80px; }
  .hint { font-size: 12.5px; }
  .win, .win.notes { width: calc(100vw - 20px) !important; left: 10px !important; right: 10px; max-height: calc(100dvh - 110px); }
  .win.notes { height: min(480px, calc(100dvh - 170px)); }
  .side { width: 116px; padding: 10px 6px; }
  .side button { gap: 6px; padding: 5px 7px; }
  .pane { padding: 12px; }
  .dock { gap: 4px; padding: 6px 7px; border-radius: 16px; max-width: calc(100vw - 12px); }
  .dock .sep { margin: 4px 1px; }
  .app { width: 30px; height: 30px; }
  .app .tip { display: none; }
}
@media (max-width: 359px) {
  .dock { gap: 3px; padding: 5px 6px; }
  .app { width: 26px; height: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: .01s !important; }
}

/* Hakkımızda: Instagram bağlantısı */
.ig-link { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; border-radius: 999px; background: #1d1d1f; color: #fff; text-decoration: none; font-size: 13px; font-weight: 600; transition: transform .15s, background .15s; }
.ig-link svg { display: block; flex: none; }
.ig-link:hover { background: #000; transform: translateY(-1px); }
.ig-link:focus-visible { outline: 2px solid #2f7bff; outline-offset: 2px; }