/* Model Behavior sitesi: "Clean Room" paleti (art/palette.json). Fontlar IBM Plex'in alt kümesi (OFL, /fonts/OFL.txt). */
@font-face{font-family:"MB Sans";src:url(/fonts/mb-sans.woff2) format("woff2");font-weight:100 700;font-display:swap}
@font-face{font-family:"MB Mono";src:url(/fonts/mb-mono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"MB Mono";src:url(/fonts/mb-mono-600.woff2) format("woff2");font-weight:600;font-display:swap}
:root{
  --bg:#E9E2D0;--paper:#F4EFE3;--paper2:#EDE6D6;--shade:#E0D7C2;--putty:#CFC6B0;
  --ink:#1F2326;--soft:#565B58;--teal:#5E8C86;--teal-deep:#3F6762;--fluor:#B9C9A8;
  --glow:#7FE3C4;--screen:#14302B;--amber:#E3A33B;--red:#D7443E;--note:#F5E6A6;
  --sans:"MB Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"MB Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;min-height:100vh;color:var(--ink);font:17px/1.6 var(--sans);
  background:var(--bg) repeating-linear-gradient(0deg,transparent 0 27px,#d9d0bb55 27px 28px)}
main{max-width:760px;margin:0 auto;padding:22px 16px 64px}
a{color:var(--teal-deep);text-underline-offset:3px}
a:hover{color:var(--ink)}
.label{font:600 .72rem/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--teal-deep)}
h1{font-weight:700;font-size:2.1rem;line-height:1.12;margin:8px 0 6px;letter-spacing:-.01em}
h2{font-weight:650;font-size:1.12rem;margin:30px 0 6px}
p{margin:10px 0;text-wrap:pretty}
h1,h2,.tagline{text-wrap:balance}
ul{padding-left:1.2em}
li{margin:6px 0}
.muted{color:var(--soft);font-size:.92rem}
strong{font-weight:650}

/* Üst şerit */
nav{display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin-bottom:30px;padding-bottom:14px;border-bottom:3px double var(--ink);font-size:.95rem}
nav .home{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:700;margin-right:auto}
nav .home img{width:30px;height:30px;border-radius:8px}
nav a{text-decoration:none;font-weight:550}

/* Giriş */
.hero{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;margin-top:8px}
.hero h1{font-size:clamp(2.4rem,8vw,3.4rem);margin:10px 0 4px}
.hero .icon{width:104px;height:104px;border-radius:24px;box-shadow:0 2px 0 var(--ink),0 10px 24px #1f232633}
.tagline{font-size:1.25rem;font-weight:600;color:var(--soft);margin:2px 0 0}
.lead{max-width:600px}
.pills{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 6px}
.pills span{font:600 .74rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;border:1.5px solid var(--ink);border-radius:4px;padding:7px 9px;background:var(--paper)}
.status{display:inline-flex;align-items:center;gap:10px;margin-top:14px;font:600 .82rem/1 var(--mono);letter-spacing:.05em;color:var(--teal-deep)}
.status::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 3px #e3a33b33}

/* Laboratuvar katı */
.floor{margin:30px 0 8px;padding:26px 10px 0;border:2px solid var(--ink);border-radius:6px;overflow:hidden;
  background:linear-gradient(180deg,#e7e0cd 0 62%,var(--fluor) 62% 100%)}
.floor img{display:block;width:100%;height:auto}
.caption{font:400 .78rem/1.4 var(--mono);color:var(--soft);margin:6px 2px 0}

/* Belge (dossier) */
.paper{position:relative;background:var(--paper);border:1.5px solid var(--ink);border-radius:4px;padding:24px 22px;margin-top:18px;box-shadow:4px 4px 0 var(--shade)}
.paper h2:first-child{margin-top:0}
.doc-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-bottom:3px double var(--ink);padding-bottom:10px;margin-bottom:14px}
.steps{list-style:none;padding:0;margin:0;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:44px 1fr;gap:6px 12px;padding:12px 0;border-top:1px dashed var(--putty)}
.steps li:first-child{border-top:0}
.steps li::before{content:counter(s,decimal-leading-zero);font:600 1rem/1.5 var(--mono);color:var(--teal-deep)}
.steps b{font-weight:650}
.tool{font:600 .85em var(--mono);white-space:nowrap}

/* Kanıt fişi */
.slip{position:relative;background:var(--paper2);border:1.5px solid var(--ink);border-radius:3px;padding:14px 16px 16px;margin:30px 0 8px;max-width:540px}
.slip::before{content:"";position:absolute;left:12px;top:-14px;width:14px;height:34px;border:3px solid #8b9196;border-radius:8px;border-bottom-color:transparent}
.slip .bar{display:flex;justify-content:space-between;font:600 .74rem/1 var(--mono);letter-spacing:.06em;border-bottom:1px solid var(--ink);padding:0 0 8px 26px;margin-bottom:10px}
.slip .tag{display:inline-block;font:600 .78rem/1 var(--sans);background:var(--shade);border:1px solid var(--soft);border-radius:3px;padding:5px 7px;margin-right:8px}
.slip .meta{font:400 .78rem var(--mono);color:var(--soft)}
.slip .quote{font:400 .95rem/1.55 var(--mono);margin:10px 0 6px}
.slip .means{font-size:.92rem;margin:0}
.slip .means span{font:600 .72rem var(--mono);letter-spacing:.08em;color:var(--soft);margin-right:8px}
mark{background:#b9c9a8aa;color:inherit;padding:0 2px;border-radius:2px}
.stamp{position:absolute;left:calc(100% + 18px);top:50%;width:190px;transform:translateY(-50%) rotate(-9deg);opacity:.92;pointer-events:none}

/* Yapışkan not */
.note{background:var(--note);border:1.5px solid var(--ink);padding:16px 18px;margin:34px 0 0;transform:rotate(-.6deg);box-shadow:3px 4px 0 #1f232622;max-width:520px}
.note .label{color:var(--ink);opacity:.7}
.note ul{margin:6px 0 0;padding-left:1.1em}

section+section,.note+section{margin-top:48px}
.lang-switch{font:600 .8rem var(--mono)}
footer{margin-top:52px;padding-top:14px;border-top:3px double var(--ink);color:var(--soft);font-size:.86rem;line-height:1.55}
footer p{margin:6px 0}

@media (max-width:560px){
  body{font-size:16px}
  .hero{grid-template-columns:1fr}
  .hero .icon{width:84px;height:84px;border-radius:20px;grid-row:1}
  .paper{padding:20px 16px}
  .slip{margin-bottom:84px}
  .stamp{left:auto;right:6px;top:auto;bottom:-78px;width:170px;transform:rotate(-7deg)}
  .steps li{grid-template-columns:34px 1fr}
}