/* İpeknas Demirsoy — kişisel site. Koyu, teknik, kırmızı vurgu.
   Gündem bölümüyle aynı zemin ve vurgu. */
:root {
  --ground: #0f0f10;
  --surface: #161618;
  --raised: #202023;
  --ink: #f2f2f3;
  --muted: #b0b0b6;
  --accent: #e03131;
  --accent-ink: #ffffff;
  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --text: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --m: clamp(16px, 2.2vw, 32px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 17px/1.5 var(--text); }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: #fff; }

.shell { min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto auto; gap: 24px; padding: 24px var(--m); }

.top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.top h1 {
  margin: 0; font: 700 clamp(28px, 2.4vw, 36px)/1 var(--display); letter-spacing: 0; text-transform: uppercase;
}
.unvan { margin: 4px 0 0; color: var(--muted); font-size: 16px; }
.top .back { font-size: 15px; color: var(--muted); text-decoration: none; }
.top .back:hover { color: var(--ink); }

main { display: grid; }

/* Röntgen sahnesi: dış ve iç katman aynı kutuda; iç katman mercek maskesiyle görünür */
.sahne {
  --x: 16%; --y: 60%; --r: 110px;
  position: relative; background: var(--surface); aspect-ratio: 1200 / 450; max-height: 68svh; width: 100%;
  overflow: hidden; touch-action: none; cursor: crosshair;
}
.sahne.link-ustu { cursor: pointer; }
.katman { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.dis { pointer-events: none; }
.ic {
  -webkit-mask-image: radial-gradient(circle at var(--x) var(--y), #000 0, #000 calc(var(--r) * .72), transparent var(--r)); /* taste-skill-ignore: mercek maskesi, görünür renk geçişi değil */
          mask-image: radial-gradient(circle at var(--x) var(--y), #000 0, #000 calc(var(--r) * .72), transparent var(--r)); /* taste-skill-ignore: mercek maskesi */
  background: #121214;
}
.mercek {
  position: absolute; left: 0; top: 0; width: calc(var(--r) * 1.6); height: calc(var(--r) * 1.6); border-radius: 50%;
  transform: translate(calc(var(--x) - var(--r) * .8), calc(var(--y) - var(--r) * .8));
  border: 2px solid rgba(224, 49, 49, .45); /* taste-skill-ignore: merceğin halkası, sahnenin parçası */ pointer-events: none;
}
.cizgi { fill: none; stroke: #9a9aa2; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.cizgi .zemin { stroke: #3a3a40; }
.cizgi .olcu { stroke: #5c5c63; stroke-width: 1; }
.soluk { stroke: #4a4a50; }
.kesik { stroke-dasharray: 5 5; }
.ic .bilesen { fill: none; stroke: #d4d4d9; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; outline: none; }
.ic .bilesen .alan { fill: transparent; }
.ic .bilesen:hover .alan, .ic .bilesen:focus .alan { stroke: var(--accent); }
.kirmizi { stroke: var(--accent) !important; }
.kirmizi-dolu { fill: var(--accent); stroke: none; }
.gri-dolu { fill: #9a9aa2; stroke: none; }
.yazi { font: 500 13px var(--text); fill: #c8c8ce; stroke: none; letter-spacing: .02em; }
.yazi.kucuk { font-size: 10px; fill: #9a9aa2; }
.yazi.buyuk { font: 700 40px var(--display); fill: var(--accent); }
.olcu-yazi { fill: #6f6f76 !important; }
.kablo { fill: none; stroke: #3c3c42; stroke-width: 7; stroke-linecap: round; }
.ic-kablo { stroke: #2a2a2e; }
.akis { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 6 12; stroke-linecap: round; animation: akis 1.1s linear infinite; }
@keyframes akis { to { stroke-dashoffset: -18; } }
.pervane { transform-origin: 285px 420px; transform-box: view-box; animation: don 2.4s linear infinite; }
@keyframes don { to { transform: rotate(360deg); } }
.etiket {
  position: absolute; left: 0; top: 0; max-width: 260px; padding: 8px 12px; background: var(--raised); color: var(--ink);
  font-size: 14px; line-height: 1.35; pointer-events: none; opacity: 0; transition: opacity .15s;
}
.etiket.acik { opacity: 1; }

.acts { display: grid; justify-items: start; gap: 10px; }
.btn {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 52px; min-width: 260px; padding: 0 20px;
  font: 700 22px/1 var(--display); text-transform: uppercase;
  text-decoration: none; background: var(--raised); color: var(--ink);
  transition: transform .15s var(--ease), background-color .2s;
}
.btn.primary { background: var(--accent); color: var(--accent-ink); }
.btn:hover { transform: translateY(-3px); }
.btn:active { transform: translateY(0) scale(.99); }
.btn .arr { transition: transform .2s var(--ease); }
.btn:hover .arr { transform: translateX(6px); }

.contact { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 32px; padding-top: 8px; }
.contact h2 { margin: 0; font-size: 15px; font-weight: 500; color: var(--muted); }
.contact p { margin: 0; font-weight: 500; }
.contact a { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 5px; transition: color .2s; }
.contact a:hover { color: var(--accent); }

/* Projeler: hazırlanıyor */
.empty { display: grid; align-content: center; gap: 12px; background: var(--surface); padding: 40px; min-height: 360px; }
.empty h2 { margin: 0; font: 700 clamp(28px, 2.6vw, 40px)/1 var(--display); text-transform: uppercase; }
.empty p { margin: 0; color: var(--muted); max-width: 46ch; }
.empty .btn { justify-self: start; margin-top: 8px; }

/* Açılış: parçalar sırayla belirir (yalnız transform/opacity) */
@keyframes gir { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.top > *, main, .acts .btn, .contact > * { animation: gir .7s var(--ease) backwards; }
.top > :nth-child(2) { animation-delay: 60ms; }
main { animation-delay: 120ms; }
.acts .btn:nth-child(1) { animation-delay: 200ms; }
.acts .btn:nth-child(2) { animation-delay: 270ms; }
.contact > :nth-child(1) { animation-delay: 340ms; }
.contact > :nth-child(2) { animation-delay: 400ms; }
.contact > :nth-child(3) { animation-delay: 460ms; }

@media (max-width: 640px) {
  .shell { gap: 16px; padding: 16px; }
  .empty { min-height: 300px; padding: 24px; }
  .sahne { --r: 44px; }
  .etiket { transform: none !important; left: 0; right: 0; top: auto; bottom: 0; max-width: none; padding: 5px 10px; font-size: 13px; }
  .btn { min-height: 52px; }
  .contact { flex-direction: column; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) { * { transition-duration: 0s !important; animation: none !important; } }

/* 3B sahne: tüm sayfanın arka planı */
#uc { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; z-index: 0; touch-action: none; cursor: grab; }
#uc:active { cursor: grabbing; }
.uc-etiket { position: fixed; z-index: 3; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Sol üst panel: site adı (şimdilik boş), iki buton, ipucu. Sahnenin geri kalanı döndürülebilir. */
.panel {
  position: fixed; top: 20px; left: 20px; z-index: 2; display: grid; gap: 12px; justify-items: start;
  padding: 16px; background: rgba(15, 15, 16, .72);
}
.site-adi { margin: 0; min-height: 0; font: 700 26px/1 var(--display); text-transform: uppercase; }
.site-adi:empty, .site-adi:has(> .sr:only-child) { display: none; }
.panel .acts { gap: 8px; }
.panel .btn { min-width: 240px; min-height: 48px; font-size: 20px; }
.ipucu { margin: 2px 0 0; font-size: 14px; color: var(--muted); }

.yukleniyor {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; margin: 0;
  display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 15px;
}
.yukleniyor span { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--raised); border-top-color: var(--accent); animation: don .8s linear infinite; }
.uc-hazir .yukleniyor, .yedek .yukleniyor { display: none; }

/* Yedek SVG sahne */
.yedek-sahne { display: none; }
.yedek #uc, .yedek .uc-etiket { display: none; }
.yedek .yedek-sahne { display: block; padding: 0 var(--m) 24px; }
.yedek .panel { position: static; margin: 20px var(--m) 16px; background: none; padding: 0; }
.yedek .ipucu { display: none; }

@media (max-width: 640px) {
  .panel { top: 12px; left: 12px; padding: 12px; gap: 8px; }
  .panel .btn { min-width: 200px; min-height: 44px; font-size: 18px; padding: 0 16px; }
  .ipucu { font-size: 13px; }
}