/* ============================================================
   AYG Mekatronik — Kurumsal kimlik tasarım tokenları  v1.0
   Tüm şablonlar ve kılavuz bu dosyayı kullanır.
   ============================================================ */
:root {
  /* --- Marka metinleri --- */
  --ayg-ad: "AYG Mekatronik";
  --ayg-slogan: "Üretime özel otomasyon.";

  /* --- Ana renkler (kartvizit mirası: lacivert + bordo) --- */
  --ayg-lacivert:        #1C2150;   /* ana marka rengi · Pantone 2766 C (yakl.) · C92 M88 Y30 K28 */
  --ayg-lacivert-koyu:   #121538;   /* koyu zemin, gece modu */
  --ayg-lacivert-acik:   #343B8C;   /* link, hover, ince vurgu */
  --ayg-bordo:           #8B1E3F;   /* ikincil marka rengi · Pantone 7420 C (yakl.) · C30 M100 Y60 K25 */
  --ayg-bordo-koyu:      #641330;   /* bordo zemin üstü koyu */

  /* --- Nötrler (atölye malzemesi: grafit, çelik, alüminyum) --- */
  --ayg-grafit:          #22252E;   /* gövde metni */
  --ayg-celik:           #666D78;   /* ikincil metin, etiket · beyaz üstünde 4.9:1 */
  --ayg-aluminyum:       #D9DCE2;   /* çizgi, kenarlık */
  --ayg-zemin:           #EEF0F4;   /* açık zemin, kart arka planı */
  --ayg-beyaz:           #FFFFFF;

  /* --- Yazı tipleri --- */
  --ayg-font-baslik:  "Barlow", "Arial Narrow", Arial, sans-serif;
  --ayg-font-metin:   "IBM Plex Sans", Arial, Helvetica, sans-serif;
  --ayg-font-teknik:  "IBM Plex Mono", Consolas, "Courier New", monospace;

  /* --- Tip ölçeği (1.25 oran) --- */
  --ayg-fs-xs:   0.75rem;   /* 12px  etiket, plaka bilgisi */
  --ayg-fs-sm:   0.875rem;  /* 14px  yardımcı metin */
  --ayg-fs-md:   1rem;      /* 16px  gövde */
  --ayg-fs-lg:   1.25rem;   /* 20px  alt başlık */
  --ayg-fs-xl:   1.5625rem; /* 25px  h3 */
  --ayg-fs-2xl:  1.953rem;  /* 31px  h2 */
  --ayg-fs-3xl:  2.441rem;  /* 39px  h1 */
  --ayg-fs-4xl:  3.052rem;  /* 49px  hero */

  /* --- Boşluk (8 px taban) --- */
  --ayg-sp-1: 0.25rem; --ayg-sp-2: 0.5rem; --ayg-sp-3: 0.75rem; --ayg-sp-4: 1rem;
  --ayg-sp-6: 1.5rem;  --ayg-sp-8: 2rem;   --ayg-sp-12: 3rem;   --ayg-sp-16: 4rem;

  /* --- Biçim --- */
  --ayg-radius:     4px;    /* keskin, makine parçası gibi; büyük yuvarlama yok */
  --ayg-radius-lg:  8px;
  --ayg-egim:       -12deg; /* logo ve grafik dilindeki eğim açısı */
  --ayg-cizgi:      1px solid var(--ayg-aluminyum);
  --ayg-golge:      0 1px 2px rgba(18,21,56,.08), 0 4px 16px rgba(18,21,56,.06);
}

/* --- Temel uygulama --- */
.ayg-body {
  font-family: var(--ayg-font-metin);
  font-size: var(--ayg-fs-md);
  line-height: 1.55;
  color: var(--ayg-grafit);
  background: var(--ayg-beyaz);
  -webkit-font-smoothing: antialiased;
}
.ayg-h1, .ayg-h2, .ayg-h3 {
  font-family: var(--ayg-font-baslik);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ayg-lacivert);
  margin: 0 0 var(--ayg-sp-4);
}
.ayg-h1 { font-size: var(--ayg-fs-3xl); }
.ayg-h2 { font-size: var(--ayg-fs-2xl); }
.ayg-h3 { font-size: var(--ayg-fs-xl); font-weight: 600; }
.ayg-teknik {
  font-family: var(--ayg-font-teknik);
  font-size: var(--ayg-fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ayg-celik);
}
.ayg-btn {
  display: inline-block;
  font-family: var(--ayg-font-baslik);
  font-weight: 600;
  font-size: var(--ayg-fs-md);
  letter-spacing: 0.02em;
  padding: 0.75em 1.5em;
  border-radius: var(--ayg-radius);
  border: 2px solid var(--ayg-lacivert);
  background: var(--ayg-lacivert);
  color: var(--ayg-beyaz);
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.ayg-btn:hover { background: var(--ayg-lacivert-acik); border-color: var(--ayg-lacivert-acik); }
.ayg-btn:focus-visible { outline: 3px solid var(--ayg-bordo); outline-offset: 2px; }
.ayg-btn--ikincil { background: transparent; color: var(--ayg-lacivert); }
.ayg-btn--ikincil:hover { background: var(--ayg-zemin); }
.ayg-btn--bordo { background: var(--ayg-bordo); border-color: var(--ayg-bordo); }
.ayg-btn--bordo:hover { background: var(--ayg-bordo-koyu); border-color: var(--ayg-bordo-koyu); }

/* Bordo yalnızca vurgu çizgisi ve tek eylem için kullanılır */
.ayg-vurgu { display:block; width: 48px; height: 4px; background: var(--ayg-bordo); transform: skewX(var(--ayg-egim)); }

/* ============================================================
   Kurumsal şerit ve ızgara — kapak diliyle aynı, her tasarımda
   ============================================================ */
/* Sağ kenardan inen eğik bordo şerit. Kapsayıcı position:relative; overflow:hidden olmalı.
   Genişlik ve sağ konum şablona göre --serit-w / --serit-r ile ayarlanır. */
.ayg-serit {
  position: absolute; top: 0; right: var(--serit-r, 0); height: 100%;
  width: var(--serit-w, 9%); background: var(--ayg-bordo);
  transform: skewX(var(--ayg-egim)); transform-origin: top right; pointer-events: none;
}
.ayg-serit::after { /* ince ikinci çizgi */
  content: ""; position: absolute; top: 0; height: 100%;
  left: calc(-1 * var(--serit-w, 9%) * .28); width: calc(var(--serit-w, 9%) * .09);
  background: var(--ayg-bordo); opacity: .45;
}
/* Koyu zeminlerde teknik çizim ızgarası */
.ayg-izgara {
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: var(--izgara, 40px) var(--izgara, 40px);
}