@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans+Condensed:wght@400;500;600;700&family=Architects+Daughter&display=swap');

/* Çizim masası: krem teknik çizim kâğıdı, mavi milimetrik ızgara, mürekkep çizgiler, antetli paftalar */
:root[data-theme="blueprint"] {
  --paper: #f3f0e7;
  --sheet: #fbfaf5;
  --ink: #1c2534;
  --blue: #2350b8;
  --grid-minor: rgba(35, 80, 184, 0.07);
  --grid-major: rgba(35, 80, 184, 0.16);
  --bg: var(--paper);
  --fg: var(--ink);
  --muted: #5d6573;
  --line: rgba(28, 37, 52, 0.25);
  --folder: #fbfaf5;
  --folder-tab: #dfe6f3;
  --icon-fill: #dfe6f3;
  --icon-ink: var(--ink);
  --label-hover-bg: var(--ink);
  --label-hover-fg: var(--sheet);
  --win: var(--sheet);
  --win-fg: var(--ink);
  --win-border: var(--ink);
  --win-bar: var(--sheet);
  --win-bar-fg: var(--ink);
  --chip: transparent;
  --chip-fg: var(--ink);
  --bar-bg: var(--paper);
  --shadow: 7px 7px 0 rgba(28, 37, 52, 0.13);
  --radius: 0;
  --font: 'IBM Plex Sans Condensed', system-ui, sans-serif;
  --font-ui: 'IBM Plex Mono', ui-monospace, monospace;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --ruler-h: 20px;
  color-scheme: light;
}

/* renk setleri: beyaz (varsayılan, yukarıda), klasik mavi ozalit, siyah */
:root[data-theme="blueprint"][data-palette="blue"] {
  --paper: #1d4f91;
  --sheet: #215a9f;
  --ink: #eef4ff;
  --blue: #ffd166;
  --grid-minor: rgba(255, 255, 255, 0.08);
  --grid-major: rgba(255, 255, 255, 0.18);
  --muted: #c3d5f0;
  --line: rgba(238, 244, 255, 0.3);
  --folder: #215a9f;
  --folder-tab: #3a72b8;
  --icon-fill: #3a72b8;
  --shadow: 7px 7px 0 rgba(5, 20, 45, 0.35);
  color-scheme: dark;
}
:root[data-theme="blueprint"][data-palette="dark"] {
  --paper: #121418;
  --sheet: #1a1d23;
  --ink: #e7e9ee;
  --blue: #7aa7ff;
  --grid-minor: rgba(255, 255, 255, 0.04);
  --grid-major: rgba(255, 255, 255, 0.09);
  --muted: #a3aab6;
  --line: rgba(231, 233, 238, 0.22);
  --folder: #1a1d23;
  --folder-tab: #2c313b;
  --icon-fill: #2c313b;
  --shadow: 7px 7px 0 rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

[data-theme="blueprint"] body {
  font-size: 15px;
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid-minor) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px);
  background-size: 95px 95px, 95px 95px, 19px 19px, 19px 19px;
}

/* arka plan: adın kontur yazı (antet büyük başlığı gibi), rol bir çizim notu; köşede merkez çizgili daire */
[data-theme="blueprint"] .bg-name {
  font: 700 clamp(56px, 10vw, 180px)/0.9 var(--font);
  color: transparent; -webkit-text-stroke: 1.4px var(--ink); opacity: 0.16; letter-spacing: 0.02em;
  bottom: calc(var(--dock-h) + 28px);
}
[data-theme="blueprint"] .bg-role {
  font: 500 12px/1.6 var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em;
  opacity: 0.55; top: auto; bottom: calc(var(--dock-h) + 24px); right: 36px; max-width: 320px;
  border-left: 1.5px solid var(--ink); padding-left: 10px; text-align: left;
}
[data-theme="blueprint"] .bg-role::before { content: 'NOT / NOTE —'; display: block; color: var(--blue); }
[data-theme="blueprint"] .bg::after {
  content: ''; position: absolute; right: 40px; top: calc(var(--bar-h) + var(--ruler-h) + 40px); width: min(340px, 28vw); aspect-ratio: 1; height: auto; opacity: 0.2;
  background: var(--ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 420' fill='none' stroke='%231c2534'%3E%3Ccircle cx='210' cy='210' r='150' stroke-width='1.5'/%3E%3Ccircle cx='210' cy='210' r='96' stroke-width='1'/%3E%3Ccircle cx='210' cy='210' r='24' stroke-width='1.5'/%3E%3Cpath d='M20 210h380M210 20v380' stroke-width='.8' stroke-dasharray='18 5 3 5'/%3E%3Cpath d='M60 390h300' stroke-width='.8'/%3E%3Cpath d='M60 382v16M360 382v16' stroke-width='.8'/%3E%3Cpath d='M60 390l10-4v8zM360 390l-10-4v8z' fill='%231c2534'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 420' fill='none' stroke='%231c2534'%3E%3Ccircle cx='210' cy='210' r='150' stroke-width='1.5'/%3E%3Ccircle cx='210' cy='210' r='96' stroke-width='1'/%3E%3Ccircle cx='210' cy='210' r='24' stroke-width='1.5'/%3E%3Cpath d='M20 210h380M210 20v380' stroke-width='.8' stroke-dasharray='18 5 3 5'/%3E%3Cpath d='M60 390h300' stroke-width='.8'/%3E%3Cpath d='M60 382v16M360 382v16' stroke-width='.8'/%3E%3Cpath d='M60 390l10-4v8zM360 390l-10-4v8z' fill='%231c2534'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* üst çubuk + cetvel */
[data-theme="blueprint"] .menubar { border-bottom: 1.5px solid var(--ink); font-family: var(--font-mono); font-size: 12px; }
[data-theme="blueprint"] .mb-name { text-transform: uppercase; letter-spacing: 0.12em; }
[data-theme="blueprint"] .mb-name::after { content: ' — PORTFOLYO'; font-weight: 400; color: var(--muted); }
[data-theme="blueprint"]:lang(en) .mb-name::after { content: ' — PORTFOLIO'; }
[data-theme="blueprint"] .mb-btn { border-radius: 0; font-family: var(--font-mono); }
[data-theme="blueprint"] .ruler {
  display: block; border-bottom: 1px solid var(--ink); background-color: var(--sheet);
  background-image:
    repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 37.8px),
    repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 18.9px),
    repeating-linear-gradient(90deg, var(--muted) 0 1px, transparent 1px 3.78px);
  background-size: 100% 11px, 100% 7px, 100% 4px;
  background-position: 14px 100%, 14px 100%, 14px 100%;
  background-repeat: no-repeat;
}

/* masaüstü: pafta çerçevesi */
/* pafta çerçevesi ekrana sabit: telefonda kaydırınca içerikle birlikte kaymasın */
[data-theme="blueprint"] .desktop::before {
  content: ''; position: fixed; left: 10px; right: 10px; pointer-events: none; z-index: 0;
  top: calc(var(--bar-h) + var(--ruler-h) + 10px); bottom: calc(var(--dock-h) + 10px); border: 1.5px solid var(--ink);
}

/* ikonlar: mürekkep çizgili klasörler, etiket bir ölçü yazısı gibi */
[data-theme="blueprint"] .icon .folder path, [data-theme="blueprint"] .icon .doc .body { stroke: var(--ink); stroke-width: 1.6; }
[data-theme="blueprint"] .icon svg { filter: none; }
[data-theme="blueprint"] .icon .lbl {
  font: 500 12px/1.25 var(--font-mono);
  background: none; color: var(--ink); border-radius: 0;
  text-shadow: 0 0 2px var(--paper), 0 0 4px var(--paper), 0 0 8px var(--paper);
}
[data-theme="blueprint"] .icon:hover svg, [data-theme="blueprint"] .icon:focus-visible svg { transform: translateY(-2px); }
[data-theme="blueprint"] .icon svg { transition: transform .15s; }
[data-theme="blueprint"] :focus-visible { outline-color: var(--blue); }

/* alt çubuk */
[data-theme="blueprint"] .dock { border-top: 1.5px solid var(--ink); }
[data-theme="blueprint"] .start { font: 600 13px var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; }
[data-theme="blueprint"] .coords { display: block; color: var(--ink); }
[data-theme="blueprint"] .icon:hover .lbl, [data-theme="blueprint"] .icon:focus-visible .lbl { text-shadow: none; }
[data-theme="blueprint"] .gear-btn .lbl { font-family: var(--font-mono); }

/* el yazısı mühendislik notları (deneme) */
[data-theme="blueprint"] .sketch { position: absolute; inset: calc(var(--bar-h) + var(--ruler-h)) 0 var(--dock-h); color: var(--ink); opacity: 0.32; }
[data-theme="blueprint"] .hw { position: absolute; font: 400 24px/1 'Architects Daughter', cursive; transform: rotate(var(--r, 0deg)); white-space: nowrap; }
[data-theme="blueprint"] .hw.sm { font-size: 19px; }
[data-theme="blueprint"] .sk { position: absolute; height: auto; }
[data-theme="blueprint"] .sk text { font: 400 17px 'Architects Daughter', cursive; fill: currentColor; stroke: none; }
[data-theme="blueprint"] .coords::before { content: '⌖  '; color: var(--blue); }
[data-theme="blueprint"] .links { font: 600 12px var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; }

/* pencereler: pafta */
[data-theme="blueprint"] .win { border-width: 1.5px; }
[data-theme="blueprint"] .win-bar { border-bottom: 1.5px solid var(--ink); font: 600 13px var(--font-mono); padding: 8px 10px 8px 14px; }
[data-theme="blueprint"] .win-close { border-radius: 0; }
[data-theme="blueprint"] .win-close:hover { background: var(--ink); color: var(--sheet); }
[data-theme="blueprint"] .chip { border: 1px solid var(--ink); border-radius: 0; font: 500 11px var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; }
[data-theme="blueprint"] .tagline { font-size: 17px; line-height: 1.35; }
[data-theme="blueprint"] .credits { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 10px 0; }
[data-theme="blueprint"] .credits dt { font: 500 11px/1.9 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; }
[data-theme="blueprint"] .credits dd { font-weight: 600; }
[data-theme="blueprint"] .hl li::marker { content: '⊕  '; color: var(--blue); }
[data-theme="blueprint"] .media { margin: 0; gap: 14px; }
[data-theme="blueprint"] .media img, [data-theme="blueprint"] .media video { border: 1.5px solid var(--ink); }
[data-theme="blueprint"] .media img.px { border: 0; }
[data-theme="blueprint"] .tblock {
  display: grid; grid-template-columns: 1.4fr 1fr 0.8fr 0.8fr; margin: 18px 0 0;
  border: 1.5px solid var(--ink); font-family: var(--font-mono);
}
[data-theme="blueprint"] .tblock div { padding: 4px 8px; border-left: 1px solid var(--ink); }
[data-theme="blueprint"] .tblock div:first-child { border-left: 0; }
[data-theme="blueprint"] .tblock dt { font-size: 9px; letter-spacing: 0.1em; color: var(--muted); }
[data-theme="blueprint"] .tblock dd { margin: 0; font-size: 12px; font-weight: 600; }
[data-theme="blueprint"] .plist li { border-top-color: var(--line); }
[data-theme="blueprint"] .about-links a { border: 1px solid var(--ink); border-radius: 0; font-family: var(--font-mono); }

@media (max-width: 700px) {
  [data-theme="blueprint"] .mb-name::after, [data-theme="blueprint"] .coords { display: none; }
  [data-theme="blueprint"] .desktop::before { left: 6px; right: 6px; top: calc(var(--bar-h) + var(--ruler-h) + 6px); bottom: calc(var(--dock-h) + 6px); }
  /* telefonda da notlar ve daire, küçültülmüş; arka plan sabit, klasörler üstünden kayar */
  [data-theme="blueprint"] .hw { font-size: 17px; }
  [data-theme="blueprint"] .hw.sm { font-size: 14px; }
  /* sayfa başında dişlinin arkasında kalmasınlar: dişlinin iki yanındaki boşluğa */
  [data-theme="blueprint"] .n-sigma { left: 7% !important; top: 27% !important; }
  [data-theme="blueprint"] .n-moment { left: 72% !important; top: 27% !important; }
  [data-theme="blueprint"] .sk { transform: scale(0.6); transform-origin: 0 0; }
  [data-theme="blueprint"] .bg::after { width: 190px; right: 12px; top: 58%; opacity: 0.16; }
}