/* ============================================================
   SOYYİĞİT GROUP — KURUMSAL KİMLİK TOKEN DOSYASI
   Faz 0 çıktısı. Kurumsal site ve tüm şablonlar bu dosyadan beslenir.
   Renkler logo dosyalarından ölçülerek alınmış, kontrast oranları
   WCAG 2.1 formülüyle doğrulanmıştır.
   ============================================================ */

/* ---------- 1. ÇATI SİSTEM ---------- */
:root{
  /* çatı marka */
  --sg-navy:#002d71;
  --sg-navy-koyu:#002051;
  --sg-yesil:#008239;
  --sg-yesil-koyu:#005c28;

  /* nötr ölçek */
  --sg-murekkep:#101820;
  --sg-koyu:#1c2732;
  --sg-orta:#5c6773;
  --sg-soluk:#8e99a4;
  --sg-cizgi:#e2e7ec;
  --sg-cizgi-ince:#eef1f4;
  --sg-zemin:#f5f7f9;
  --sg-beyaz:#ffffff;

  /* durum */
  --sg-uyari:#b45309;
  --sg-hata:#b42318;

  /* aktif marka rengi: alt marka sınıflarında ezilir */
  --mc:var(--sg-navy);
  --mc-koyu:var(--sg-navy-koyu);
  --mc-metin:var(--sg-navy);
  --mc-cizgi:#ccd5e3;
  --ms:#edf0f5;
  --mc-vurgu:var(--sg-yesil);

  /* tipografi */
  --f-baslik:"Archivo",-apple-system,Arial,sans-serif;
  --f-govde:"Archivo",-apple-system,Arial,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;

  /* ölçek, oran 1.25 */
  --t-xs:11px;  --t-sm:13px;  --t-md:15px;  --t-lg:19px;
  --t-xl:24px;  --t-2xl:30px; --t-3xl:38px; --t-4xl:48px; --t-5xl:60px;

  /* boşluk, birim 8px */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px;
  --s6:64px; --s7:96px; --s8:128px;

  --r-sm:6px; --r:12px; --r-lg:20px;
  --golge:0 1px 2px rgba(16,24,32,.05), 0 8px 24px -12px rgba(16,24,32,.18);
  --golge-lg:0 24px 60px -28px rgba(16,24,32,.42);
  --gecis:.22s cubic-bezier(.2,.7,.3,1);
}

/* ---------- 2. ALT MARKA TEMALARI ----------
   Kullanım: <section class="t-aysan"> ... </section>
   Izgara, tipografi, boşluk değişmez. Yalnızca renk değişir.        */

.t-soyyigit    {--mc:#002d71;--mc-koyu:#002051;--mc-metin:#002d71;--mc-cizgi:#ccd5e3;--ms:#edf0f5;--mc-vurgu:#008239}
.t-kentboringer{--mc:#111f50;--mc-koyu:#0c163a;--mc-metin:#111f50;--mc-cizgi:#cfd2dc;--ms:#eeeff3;--mc-vurgu:#c8232a}
.t-professional{--mc:#273b94;--mc-koyu:#1c2a6b;--mc-metin:#273b94;--mc-cizgi:#d4d8ea;--ms:#f0f1f8;--mc-vurgu:#ea1b2d}
.t-kentcafe    {--mc:#5e3814;--mc-koyu:#44280e;--mc-metin:#5e3814;--mc-cizgi:#dfd7d0;--ms:#f4f1ef;--mc-vurgu:#c8232a}
.t-kentquick   {--mc:#3f6ea8;--mc-koyu:#2d4f79;--mc-metin:#31567f;--mc-cizgi:#d9e2ee;--ms:#f2f5f9;--mc-vurgu:#f2c81e}
.t-trix        {--mc:#100e9f;--mc-koyu:#0c0a72;--mc-metin:#100e9f;--mc-cizgi:#cfcfec;--ms:#eeeef8;--mc-vurgu:#f4ee24}
.t-cicimama    {--mc:#e3559d;--mc-koyu:#c12071;--mc-metin:#da2480;--mc-cizgi:#f9ddeb;--ms:#fdf3f8;--mc-vurgu:#62c5e2}
.t-fafitta     {--mc:#2e3192;--mc-koyu:#212369;--mc-metin:#2e3192;--mc-cizgi:#d5d6e9;--ms:#f0f1f7;--mc-vurgu:#f4ee24}
.t-freshers    {--mc:#29348e;--mc-koyu:#1e2566;--mc-metin:#29348e;--mc-cizgi:#d4d6e8;--ms:#f0f1f7;--mc-vurgu:#c8232a}
.t-aysan       {--mc:#0d5337;--mc-koyu:#093c28;--mc-metin:#0d5337;--mc-cizgi:#cfddd7;--ms:#eef3f1;--mc-vurgu:#c8a23a}
.t-kivilcim    {--mc:#00744f;--mc-koyu:#005439;--mc-metin:#00744f;--mc-cizgi:#cce3dc;--ms:#edf5f3;--mc-vurgu:#c8232a}
.t-yigit       {--mc:#175a3b;--mc-koyu:#11412a;--mc-metin:#175a3b;--mc-cizgi:#d1ded8;--ms:#eff3f1;--mc-vurgu:#a8c84e}

/* Vurgu renkleri yalnızca dekoratif kullanılır. Kent Quick sarısı,
   Trix sarısı, Fafitta sarısı, Cici Mama mavisi, Yiğit yeşili ve
   Aysan altını beyaz üzerinde metin rengi olarak KULLANILMAZ;
   kontrastları 4.5:1 altındadır. Metin için daima --mc-metin. */

/* ---------- 3. TEMEL ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--sg-beyaz);color:var(--sg-murekkep);
  font-family:var(--f-govde);font-size:var(--t-md);line-height:1.65;
  font-variation-settings:"wdth" 100;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--mc);outline-offset:3px;border-radius:2px}

/* ---------- 4. TİPOGRAFİ ----------
   Başlıklar Archivo'nun genişletilmiş ekseniyle kurulur; sanayi
   ölçeği hissini veren ana unsur budur.                            */
h1,h2,h3,h4,h5{
  margin:0;font-family:var(--f-baslik);font-weight:700;
  line-height:1.06;letter-spacing:-.03em;
  font-variation-settings:"wdth" 112;
  color:var(--sg-murekkep);text-wrap:balance;
}
h1{font-size:clamp(38px,5.6vw,60px);letter-spacing:-.045em}
h2{font-size:clamp(27px,3.6vw,38px);letter-spacing:-.035em}
h3{font-size:var(--t-xl)}
h4{font-size:var(--t-lg)}
h5{font-size:var(--t-md);font-variation-settings:"wdth" 100}
p{margin:0;color:var(--sg-orta)}
.giris{font-size:clamp(17px,2vw,21px);line-height:1.55;color:var(--sg-koyu)}

.etiket{
  font-family:var(--f-mono);font-size:10px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--sg-soluk);
}
.etiket-mc{color:var(--mc-metin)}

/* Türkçe büyük İ kuralı: uppercase yalnızca <html lang="tr"> altında
   doğru sonuç verir. Şablonlarda lang özniteliği zorunludur. */

/* ---------- 5. IZGARA ---------- */
.kapsam{width:min(1240px,92vw);margin-inline:auto}
.kapsam-dar{width:min(820px,92vw);margin-inline:auto}
.bolum{padding-block:var(--s7)}
.bolum-zemin{background:var(--sg-zemin)}
.izgara{display:grid;gap:var(--s3)}
@media(min-width:720px){
  .iz-2{grid-template-columns:repeat(2,1fr)}
  .iz-3{grid-template-columns:repeat(3,1fr)}
  .iz-4{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:1040px){
  .iz-4{grid-template-columns:repeat(4,1fr)}
  .iz-6{grid-template-columns:repeat(6,1fr)}
}

/* ---------- 6. BİLEŞENLER ---------- */
.dugme{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding-inline:24px;border-radius:var(--r-sm);
  font-family:var(--f-govde);font-size:var(--t-sm);font-weight:600;
  letter-spacing:.01em;border:1px solid var(--sg-cizgi);
  background:var(--sg-beyaz);color:var(--sg-murekkep);
  cursor:pointer;transition:var(--gecis);
}
.dugme:hover{border-color:var(--mc);color:var(--mc-metin);transform:translateY(-1px);box-shadow:var(--golge)}
.dugme-dolu{background:var(--mc);border-color:var(--mc);color:#fff}
.dugme-dolu:hover{background:var(--mc-koyu);border-color:var(--mc-koyu);color:#fff}

.kart{
  background:var(--sg-beyaz);border:1px solid var(--sg-cizgi);
  border-radius:var(--r);overflow:hidden;transition:var(--gecis);
}
.kart:hover{border-color:var(--mc-cizgi);box-shadow:var(--golge);transform:translateY(-2px)}
.kart-govde{padding:var(--s3)}

/* ürün kartı */
.urun-gorsel{aspect-ratio:4/3;background:var(--ms);display:grid;place-items:center;padding:var(--s3)}
.urun-gorsel img{max-height:100%;width:auto;object-fit:contain}
.urun-ad{font-family:var(--f-baslik);font-weight:600;font-size:var(--t-md);
  font-variation-settings:"wdth" 104;letter-spacing:-.015em;line-height:1.3}
.urun-teknik{margin:var(--s2) 0 0;padding:0;list-style:none;
  font-family:var(--f-mono);font-size:var(--t-xs);color:var(--sg-orta)}
.urun-teknik li{display:flex;justify-content:space-between;gap:var(--s2);
  padding-block:6px;border-top:1px solid var(--sg-cizgi-ince)}
.urun-teknik b{font-weight:500;color:var(--sg-murekkep)}

/* Marka sayfası başlığı artık site.css içindeki .marka-hero ile kurulur.
   Logolar 900×600 saydam tuvale optik alanı eşitlenerek yerleştirilmiştir
   (gorseller/markalar-norm), bu yüzden yalnızca en boy sınırı verilir. */

/* sayı şeridi */
.sayi{border-top:2px solid var(--mc);padding-top:var(--s2)}
.sayi-deger{font-family:var(--f-baslik);font-weight:700;font-size:var(--t-3xl);
  font-variation-settings:"wdth" 118;letter-spacing:-.045em;line-height:1;color:var(--mc-metin)}
.sayi-ad{margin-top:8px;font-size:var(--t-sm);color:var(--sg-orta)}

/* haber kartı */
.haber-tarih{font-family:var(--f-mono);font-size:var(--t-xs);
  letter-spacing:.12em;text-transform:uppercase;color:var(--sg-soluk)}

/* ---------- 7. HAREKET ---------- */
.gir{opacity:0;transform:translateY(14px)}
.gir.gorundu{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .gir{opacity:1;transform:none}
}