/* app.css — AltaySec ATLAS: reset + layout + matris + çekmece + dürüstlük sistemi */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--signal);
  font-family:var(--font-body);font-size:var(--t-body);line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:var(--teal);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:none}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:3px}
.mono{font-family:var(--font-mono)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Üst çubuk ---------- */
.topbar{
  position:sticky;top:0;z-index:var(--z-topbar);
  display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;
  padding:10px var(--sp-5);
  background:color-mix(in srgb, var(--ink) 86%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hairline);
}
.brand{display:flex;align-items:baseline;gap:10px;white-space:nowrap}
.brand .mark{font-family:var(--font-display);font-weight:700;letter-spacing:.02em;font-size:1.1rem}
.brand .mark b{color:var(--ember)}
.brand .ver{font-family:var(--font-mono);font-size:.68rem;color:var(--slate);border:1px solid var(--hairline-strong);padding:2px 6px;border-radius:4px}
.topbar .grow{flex:1 1 auto}
.search{
  display:flex;align-items:center;gap:8px;background:var(--graphite);
  border:1px solid var(--hairline-strong);border-radius:var(--radius-sm);
  padding:6px 10px;min-width:180px;max-width:320px;flex:1 1 220px;
}
.search input{background:none;border:none;color:var(--signal);width:100%;font-size:.85rem;outline:none}
.search input::placeholder{color:var(--slate-dim)}
.search svg{flex:none;color:var(--slate)}

.legend{display:flex;align-items:center;gap:12px;font-size:.72rem;color:var(--slate);flex-wrap:wrap}
.legend .li{display:flex;align-items:center;gap:5px;white-space:nowrap}
.legend .dot{width:9px;height:9px;border-radius:50%;flex:none}
.dot-a{background:var(--tier-a)} .dot-b{background:var(--tier-b)} .dot-c{background:var(--tier-c)}

.toggle{
  display:inline-flex;align-items:center;gap:6px;font-size:.75rem;color:var(--slate);
  border:1px solid var(--hairline-strong);border-radius:var(--radius-sm);padding:6px 10px;
}
.toggle[aria-pressed="true"]{color:var(--signal);border-color:var(--teal);background:color-mix(in srgb,var(--teal) 12%,transparent)}
.lang{display:inline-flex;border:1px solid var(--hairline-strong);border-radius:var(--radius-sm);overflow:hidden}
.lang a{padding:6px 10px;font-size:.75rem;color:var(--slate);text-decoration:none}
.lang a[aria-current="true"]{background:var(--teal);color:var(--ink);font-weight:600}

/* ---------- Hero ---------- */
.hero{position:relative;padding:26px var(--sp-5) 20px;border-bottom:1px solid var(--hairline);overflow:hidden}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.5;pointer-events:none}
.hero .inner{position:relative;max-width:900px}
.hero .eyebrow{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin:0 0 8px}
.hero h1{font-family:var(--font-display);font-weight:700;font-size:clamp(1.6rem,3.4vw,var(--t-hero));line-height:1.05;margin:0 0 10px;letter-spacing:-.01em}
.hero .thesis{color:var(--slate);max-width:640px;margin:0 0 14px}
.coverage{
  display:inline-flex;align-items:center;gap:10px;font-size:.8rem;
  background:var(--graphite);border:1px solid var(--hairline-strong);
  border-radius:999px;padding:7px 14px;
}
.coverage b{color:var(--teal);font-family:var(--font-mono)}
.coverage .sep{width:1px;height:14px;background:var(--hairline-strong)}
.disclaimer{margin-top:12px;font-size:.72rem;color:var(--slate-dim);max-width:680px}

/* ---------- Matris ---------- */
.matrix-wrap{overflow-x:auto;overflow-y:visible;padding:0 var(--sp-4) 60px}
.matrix{display:flex;gap:10px;padding:14px 4px;min-width:min-content}
.tactic-col{display:flex;flex-direction:column;gap:6px;width:236px;flex:none}
.tactic-col.ai{--col-accent:var(--violet)}
.tactic-col:not(.ai){--col-accent:var(--hairline-strong)}

.col-head{
  position:sticky;top:0;z-index:5;
  background:linear-gradient(var(--ink) 70%, transparent);
  padding:8px 4px 10px;
}
.col-head .tac{
  font-family:var(--font-display);font-weight:700;font-size:.8rem;
  text-transform:uppercase;letter-spacing:.04em;color:var(--signal);
  border-left:3px solid var(--col-accent);padding-left:8px;line-height:1.2;
}
.col-head .tac .en{display:block;font-size:.62rem;font-weight:500;letter-spacing:.02em;color:var(--slate-dim);text-transform:none;margin-top:2px}
.col-head .cnt{font-family:var(--font-mono);font-size:.62rem;color:var(--slate);padding-left:11px;margin-top:3px}

/* Hücre */
.cell{
  position:relative;display:block;width:100%;text-align:left;
  background:var(--graphite);border:1px solid var(--hairline);
  border-radius:var(--radius-sm);padding:9px 10px 9px 12px;
  transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.cell:hover,.cell:focus-visible{background:var(--graphite-2);border-color:var(--hairline-strong)}
.cell .cid{font-family:var(--font-mono);font-size:.62rem;color:var(--slate);letter-spacing:.02em}
.cell .cname{font-size:var(--t-cell);line-height:1.25;margin-top:2px;color:var(--signal)}
.cell .cname .entag{font-family:var(--font-mono);font-size:.56rem;color:var(--slate-dim);border:1px solid var(--hairline-strong);border-radius:3px;padding:0 3px;margin-left:5px;vertical-align:middle}
.cell .row{display:flex;align-items:center;gap:6px;margin-top:7px}
.cell .tier-dot{
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:4px;font-family:var(--font-mono);font-size:.6rem;font-weight:600;
  color:var(--ink);
}
.cell .tier-dot.a{background:var(--tier-a)} .cell .tier-dot.b{background:var(--tier-b)} .cell .tier-dot.c{background:var(--tier-c)}
.cell .glyph{font-size:.62rem;color:var(--slate)}
.cell .glyph.live{color:var(--teal)}
.cell.has-demo{border-left:2px solid var(--teal)}

/* Nişangâh hover (ember köşeler) */
.cell::before,.cell::after{content:"";position:absolute;width:9px;height:9px;opacity:0;transition:opacity var(--dur-fast)}
.cell::before{top:-1px;left:-1px;border-top:2px solid var(--ember);border-left:2px solid var(--ember);border-top-left-radius:var(--radius-sm)}
.cell::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--ember);border-right:2px solid var(--ember);border-bottom-right-radius:var(--radius-sm)}
.cell:hover::before,.cell:hover::after,.cell:focus-visible::before,.cell:focus-visible::after{opacity:1}
.tactic-col:hover .cell{opacity:.55}
.tactic-col:hover .cell:hover{opacity:1}
.cell[hidden]{display:none}
.cell.selected{border-color:var(--ember);border-left:3px solid var(--ember);background:var(--graphite-2)}

/* Alt-teknikler */
.subs{margin-top:7px;border-top:1px dashed var(--hairline-strong);padding-top:6px;display:none}
.cell.open .subs{display:block}
.subtoggle{font-family:var(--font-mono);font-size:.62rem;color:var(--teal);margin-top:6px;display:inline-flex;gap:4px;align-items:center}
.sub{display:flex;align-items:center;gap:6px;padding:4px 0;font-size:.72rem;color:var(--slate)}
.sub .sid{font-family:var(--font-mono);font-size:.58rem;color:var(--slate-dim)}
.sub:hover{color:var(--signal)}
.sub .mini{width:7px;height:7px;border-radius:2px;flex:none}
.sub .mini.a{background:var(--tier-a)} .sub .mini.c{background:var(--tier-c)} .sub .mini.b{background:var(--tier-b)}

.empty-note{color:var(--slate-dim);font-size:.72rem;padding:8px 4px;font-style:italic}

/* ---------- Çekmece ---------- */
.scrim{position:fixed;inset:0;background:rgba(4,7,12,.55);z-index:var(--z-scrim);opacity:0;visibility:hidden;transition:opacity var(--dur)}
.scrim.show{opacity:1;visibility:visible}
.drawer{
  position:fixed;top:0;right:0;height:100dvh;width:min(440px,92vw);z-index:var(--z-drawer);
  background:var(--graphite);border-left:1px solid var(--hairline-strong);
  transform:translateX(100%);transition:transform var(--dur) var(--ease);
  display:flex;flex-direction:column;box-shadow:-24px 0 60px rgba(0,0,0,.4);
}
.drawer.show{transform:translateX(0)}
.drawer .dhead{display:flex;align-items:flex-start;gap:10px;padding:16px 18px 12px;border-bottom:1px solid var(--hairline)}
.drawer .dhead .did{font-family:var(--font-mono);font-size:.7rem;color:var(--teal);letter-spacing:.04em}
.drawer .dhead h2{font-family:var(--font-display);font-weight:700;font-size:1.2rem;line-height:1.15;margin:4px 0 0}
.drawer .close{margin-left:auto;color:var(--slate);font-size:1.4rem;line-height:1;padding:2px 6px;flex:none}
.drawer .close:hover{color:var(--signal)}
.drawer .dbody{overflow-y:auto;padding:16px 18px 40px;flex:1}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.chip{font-size:.68rem;color:var(--slate);border:1px solid var(--hairline-strong);border-radius:999px;padding:3px 9px}
.chip.ai{border-color:var(--violet);color:var(--violet)}

.tier-badge{display:inline-flex;align-items:center;gap:8px;border-radius:var(--radius-sm);padding:8px 12px;font-size:.8rem;margin:0 0 14px;border:1px solid}
.tier-badge .b{font-family:var(--font-mono);font-weight:700;width:20px;height:20px;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink)}
.tier-badge.a{border-color:var(--tier-a);background:color-mix(in srgb,var(--tier-a) 10%,transparent)}
.tier-badge.a .b{background:var(--tier-a)}
.tier-badge.b{border-color:var(--tier-b);background:color-mix(in srgb,var(--tier-b) 10%,transparent)}
.tier-badge.b .b{background:var(--tier-b)}
.tier-badge.c{border-color:var(--tier-c);background:color-mix(in srgb,var(--tier-c) 8%,transparent)}
.tier-badge.c .b{background:var(--tier-c)}

.section-t{font-family:var(--font-display);font-weight:600;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--slate);margin:18px 0 8px}
.desc{color:var(--signal);font-size:.9rem;line-height:1.6}
.desc.en-fallback{color:var(--slate)}
.mitre-quote{border-left:3px solid var(--hairline-strong);padding:6px 0 6px 12px;margin:10px 0;color:var(--slate);font-size:.82rem}
.mitre-quote cite{display:block;margin-top:6px;font-style:normal;font-family:var(--font-mono);font-size:.68rem;color:var(--slate-dim)}

.why{border:1px solid var(--hairline-strong);border-radius:var(--radius-sm);padding:12px;margin:6px 0 4px;background:var(--graphite-2)}
.why .h{display:flex;align-items:center;gap:7px;font-size:.78rem;color:var(--amber);margin-bottom:6px;font-weight:600}
.why p{margin:0;font-size:.82rem;color:var(--slate)}

.cta{display:inline-flex;align-items:center;gap:8px;margin-top:10px;border-radius:var(--radius-sm);padding:9px 14px;font-size:.82rem;font-weight:600}
.cta.lab{background:var(--amber);color:var(--ink)}
.cta.ext{border:1px solid var(--hairline-strong);color:var(--teal)}
.refs{list-style:none;padding:0;margin:6px 0 0}
.refs li{font-size:.78rem;margin-bottom:5px}
.refs a{word-break:break-word}

/* Demo kabı */
.demo-host{margin-top:10px;border:1px solid var(--hairline-strong);border-radius:var(--radius);overflow:hidden;background:var(--graphite-2)}
.demo-banner{display:flex;gap:8px;align-items:center;font-size:.7rem;color:var(--amber);background:color-mix(in srgb,var(--amber) 8%,transparent);padding:7px 12px;border-bottom:1px solid var(--hairline)}
.demo-body{padding:14px}
.demo-body h4{margin:0 0 4px;font-family:var(--font-display);font-size:.95rem}
.demo-body label{display:block;font-size:.75rem;color:var(--slate);margin:10px 0 4px}
.demo-body textarea,.demo-body input[type=text]{width:100%;background:var(--ink);border:1px solid var(--hairline-strong);border-radius:var(--radius-sm);color:var(--signal);padding:8px;font-family:var(--font-mono);font-size:.78rem;resize:vertical}
.demo-body input[type=range]{width:100%;accent-color:var(--teal)}
.btn{background:var(--teal);color:var(--ink);border-radius:var(--radius-sm);padding:8px 14px;font-weight:600;font-size:.8rem}
.btn.ghost{background:none;border:1px solid var(--hairline-strong);color:var(--signal)}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.out{margin-top:12px;background:var(--ink);border:1px solid var(--hairline);border-radius:var(--radius-sm);padding:10px;font-family:var(--font-mono);font-size:.76rem;white-space:pre-wrap;word-break:break-word;min-height:20px}
.pill{display:inline-block;font-family:var(--font-mono);font-size:.66rem;padding:2px 7px;border-radius:999px;margin:2px 2px 0 0}
.pill.ok{background:color-mix(in srgb,var(--teal) 18%,transparent);color:var(--teal)}
.pill.bad{background:color-mix(in srgb,var(--ember) 18%,transparent);color:var(--ember)}
.pill.warn{background:color-mix(in srgb,var(--amber) 18%,transparent);color:var(--amber)}
.meter{height:10px;border-radius:999px;background:var(--hairline);overflow:hidden;margin-top:6px}
.meter > i{display:block;height:100%;background:var(--ember);width:0;transition:width var(--dur) var(--ease)}
.demo-note{font-size:.72rem;color:var(--slate-dim);margin-top:10px}
canvas.demo-canvas{width:100%;max-width:100%;background:var(--ink);border:1px solid var(--hairline);border-radius:var(--radius-sm);display:block}
.legend-inline{display:flex;gap:12px;flex-wrap:wrap;font-size:.72rem;color:var(--slate);margin-top:8px}

/* ---------- Footer ---------- */
.foot{border-top:1px solid var(--hairline);padding:22px var(--sp-5);color:var(--slate);font-size:.76rem;display:flex;flex-direction:column;gap:8px}
.foot .prov{font-family:var(--font-mono);font-size:.68rem;color:var(--slate-dim)}
.foot a{color:var(--slate)}
.foot a:hover{color:var(--teal)}

/* ---------- Boot sweep + hareket ---------- */
@keyframes cascadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.matrix.boot .tactic-col{animation:cascadeIn .5s var(--ease) both;animation-delay:calc(var(--i,0)*45ms)}

@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  .matrix.boot .tactic-col{animation:none}
  .drawer{transition:none}
  .scrim{transition:none}
  .cell{transition:none}
  .hero canvas{display:none}
}

/* ---------- Duyarlı ---------- */
@media (max-width:720px){
  .topbar{padding:8px 12px;gap:10px}
  .legend{order:5;width:100%}
  .hero{padding:18px 14px 14px}
  .drawer{width:100vw;top:auto;bottom:0;height:88dvh;border-left:none;border-top:1px solid var(--hairline-strong);transform:translateY(100%);border-radius:14px 14px 0 0}
  .drawer.show{transform:translateY(0)}
}