/* ============================================================
   ANDA · kalite.css
   "Kalite ve Teknoloji" sayfasına ÖZEL stiller.
   Yalnızca tokenlar kullanılır; görsel sistemden sapma yoktur.
   components.css / kit.css'e dokunulmaz; burada sadece bu
   sayfanın ihtiyaç duyduğu birkaç yapı tanımlanır:
     - kavramsal "tarak-tipi" PCE diyagram plakası
     - "hedeflenen uyum" standart çerçevesi (bağlayıcı rozet DEĞİL)
   Kare köşeler, hairline çizgiler, mavi ana renk,
   kırmızı yalnız mikro vurgu.
   ============================================================ */

/* ---- Kavramsal PCE diyagram plakası (hero sağ) --------- */
/* .ak-plate motifini sürdürür; içine inline SVG yerleşir.    */
.ak-diagram {
  position: absolute;
  inset: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
}
.ak-diagram svg { width: 100%; height: auto; display: block; max-width: 420px; }

/* SVG renk kancaları — token üzerinden, gövde içinde değil */
.ak-diagram .dg-line   { stroke: var(--anda-blue); }
.ak-diagram .dg-soft   { stroke: var(--blue-300); }
.ak-diagram .dg-node   { fill: var(--anda-blue); }
.ak-diagram .dg-node-o { fill: var(--paper); stroke: var(--anda-blue); }
.ak-diagram .dg-accent { fill: var(--red); }          /* mikro vurgu — tek nokta */
.ak-diagram .dg-lbl {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: var(--ls-label-sm);
  text-transform: uppercase;
  fill: var(--text-muted);
}

/* ---- "Hedeflenen Standart Uyumu" çerçevesi -------------- */
.ak-stdframe {
  border: var(--bw-hair) solid var(--border);
  margin-top: 40px;
  background: var(--paper);
}
.ak-stdframe__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  border-bottom: var(--bw-hair) solid var(--border);
  background: var(--surface-sunken);
}
.ak-stdframe__lbl {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--anda-blue);
  font-weight: var(--fw-medium);
}
.ak-stdframe__note {
  font-family: var(--font-mono);
  font-size: var(--fs-label-sm);
  letter-spacing: var(--ls-label-sm);
  text-transform: uppercase;
  color: var(--text-faint);
  margin-left: auto;
}
.ak-stdframe__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.ak-stdrow {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 26px 24px 28px;
}
.ak-stdrow + .ak-stdrow { border-left: var(--bw-hair) solid var(--border); }
.ak-stdrow__code {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.01em;
  color: var(--anda-blue);
}
.ak-stdrow__d {
  font-size: var(--fs-body-sm);
  line-height: 1.55;
  color: var(--ink-soft);
}

/* Kapanış / şeffaflık notu — taahhüt değil, çerçeve vurgusu */
.ak-stdnote {
  margin-top: 26px;
  padding-left: 18px;
  border-left: var(--bw-accent) solid var(--anda-blue);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 64ch;
}

/* ---- Sayfa CTA aksiyon sırası (hero altı linkleri) ------ */
.ak-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 32px;
}

/* ---- Responsive ---------------------------------------- */
@media (max-width: 880px) {
  .ak-stdframe__grid { grid-template-columns: 1fr; }
  .ak-stdrow + .ak-stdrow { border-left: 0; border-top: var(--bw-hair) solid var(--border); }
  .ak-stdframe__note { display: none; }
  .ak-diagram { inset: 16px; padding: 14px; }
}