/* ============================================================
   BIG SOLUTIONS — ORTAK TEMEL
   ------------------------------------------------------------
   Tek kaynak: "BIG Branding Kit.pdf" · Kurumsal Marka Kılavuzu
   SÜRÜM 1.0 · 2026. Buradaki her değerin kılavuzda bir karşılığı
   var; uydurma değer yok. Değiştirmeden önce kılavuza bakılmalı,
   sayfa numaraları yorumlarda yazılı.

   ÖNEMLİ — kapsam: bu dosyayı şu an YALNIZ media yüklüyor.
   Studio kendi jetonlarını styles.css'in başında tutuyor ve bu
   dosyayı hiç çağırmıyor; bu yüzden buradaki değişiklik Studio'yu
   etkilemiyor. Studio kılavuza en son geçirilecek — o zaman
   styles.css'teki kopya blok silinip buraya bağlanacak.

   ESKİ SİSTEM (getlayers şablonundan gelen): #0A142B zemin,
   #5B8CFF mavi vurgu, Inter, 20px yarıçap. Hiçbiri marka kararı
   değildi, şablon artığıydı. Kılavuz hepsini değiştirdi.
   ============================================================ */

:root{
  /* --- HAM PALET (kılavuz s.13) -----------------------------
     Bunlar doğrudan bileşende kullanılmaz; aşağıdaki anlamsal
     jetonlar üzerinden çağrılır. Böylece koyu/açık zemin geçişi
     tek yerden yönetilir. */
  --lacivert-100: #DEE1F2;
  --lacivert-300: #7883C4;
  --lacivert-500: #2C3670;
  --lacivert-700: #141B3D;   /* MARKA */
  --lacivert-900: #0A0D24;

  --mor-100: #EDE7FF;
  --mor-300: #C3B0FF;
  --mor-500: #9B7AFF;
  --mor-700: #7B4FFF;        /* MARKA */
  --mor-900: #3D1F8F;

  /* Zemin renkleri hafif lavanta alt tonu taşır — mor ile aynı
     sıcaklıkta kalsınlar diye. Sıcak krem/sarımsı beyaz YASAK. */
  --fisilti-beyazi: #F6F5FA;
  --saf-beyaz: #FFFFFF;
  --lavanta-gri: #E4E1EF;
  --soguk-gri: #585C70;

  /* --- TİPOGRAFİ (s.14) ------------------------------------
     Üç fontluk sistem. Yedekleme zinciri kılavuzda birebir
     yazılı; Century Gothic dış paylaşım içindir. */
  --font-baslik: 'Manrope', 'Poppins', 'Century Gothic', sans-serif;
  --font-govde:  'DM Sans', 'Poppins', 'Century Gothic', sans-serif;
  --font-mono:   'Roboto Mono', 'Courier New', monospace;

  --olcu-h1: 40px;
  --olcu-h2: 28px;
  --olcu-h3: 18px;
  --olcu-govde: 15px;
  --olcu-buton: 13px;
  --olcu-kicker: 12px;

  --satir-baslik: 1.15;      /* 1.1–1.2 arası */
  --satir-baslik-kucuk: 1.25;
  --satir-govde: 1.7;        /* 1.65–1.75 arası */
  --aralik-baslik: -0.01em;  /* Manrope doğal aralığı geniş */
  --aralik-kicker: 0.05em;

  /* --- BOŞLUK (s.15) ---------------------------------------
     8 piksel taban ızgarası. Ara değer eklenmez; ihtiyaç varsa
     8'in katı olan yeni bir basamak tanımlanır. */
  --s-1: 8px;  --s-2: 16px; --s-3: 24px;
  --s-4: 32px; --s-5: 48px; --s-6: 64px;
  --s-7: 96px; --s-8: 128px;
  --bolum-arasi: 64px;       /* kılavuz: bölüm araları minimum 64px */

  /* --- YARIÇAP (s.15) --------------------------------------
     Tek bir --radius YOK: kılavuz üç ayrı değer veriyor.
     Tam yuvarlak yalnız etiket ve rozetlerde. */
  --r-buton: 4px;
  --r-kart: 8px;
  --r-yuzey: 12px;
  --r-rozet: 999px;

  /* --- HAREKET (s.17) --------------------------------------
     Hover ve durum değişimleri 150–200ms, sayfa geçişleri 300ms. */
  --dur-hover: 180ms;
  --dur-sayfa: 300ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* --- ÖLÇÜ ------------------------------------------------
     Kırılma noktaları (s.17): 640 / 768 / 1024 / 1280.
     Kap genişliği kılavuzda tanımlı değil; 1200 seçildi çünkü
     8'in tam katı (150×8) ve 1280 kırılmasının altında kalıyor. */
  --container: 1200px;
  --satir-uzunlugu: 70ch;    /* gövde metinde maksimum */

  /* --- BUTON (s.13 + s.17) ---------------------------------
     Zemin ne olursa olsun DEĞİŞMEZ:
     birincil = Mor 700 dolgu, ikincil = kontur.
     Mor 500 buton dolgusu olarak kullanılmaz (pastel algı yapar). */
  --buton-dolgu: var(--mor-700);
  --buton-metin: #FFFFFF;
  --buton-yukseklik: 44px;   /* mobil dokunma hedefi minimumu */
}

/* ============================================================
   ZEMİN MODLARI
   ------------------------------------------------------------
   Kılavuz iki zemin tanımlıyor (s.13) ve her biri için ayrı
   metin/vurgu kuralı veriyor. Tek bir "dark mode" değil: aynı
   sayfa içinde bölüm bölüm değişiyor (s.16'daki site örneğinde
   koyu hero + açık içerik). Bu yüzden mod bir öznitelik olarak
   BÖLÜME veriliyor, body'ye değil.
   ============================================================ */
[data-zemin="koyu"]{
  --zemin: var(--lacivert-900);
  --yuzey: rgba(255,255,255,0.04);
  --yuzey-hover: rgba(255,255,255,0.07);
  --kenar: rgba(255,255,255,0.10);

  --metin: #FFFFFF;
  /* Kılavuz: "Gövde metni beyazın %55 opaklığında." */
  --metin-govde: rgba(255,255,255,0.55);
  /* "Sessiz" kademesi kılavuzda YOK — kılavuz koyu zeminde tek bir
     gövde tonu (%55) veriyor. Numara, güven şeridi ve etiket gibi
     ikincil metinler için bir kademe daha gerekti.
     0.42 denendi ve ÖLÇÜLDÜ: lacivert 900 üstünde 4.08:1, WCAG AA'nın
     küçük yazı için istediği 4.5'in altında. 0.50 → 5.0:1.
     Kılavuz s.13 erişilebilirliği açıkça şart koşuyor; sessizlik
     uğruna eşiğin altına inilmiyor. */
  --metin-sessiz: rgba(255,255,255,0.50);

  /* Koyu zeminde vurgu Mor 500. Mor 700 koyu lacivert üstünde
     yeterince ayrışmıyor; kılavuz da burada 500 diyor. */
  --vurgu: var(--mor-500);
  --vurgu-kicker: var(--mor-300);
  /* Koyu zeminde Mor 500 küçük metinde 4.77:1 — eşiği geçiyor,
     ayrı bir kademeye gerek yok. */
  --vurgu-metin: var(--mor-500);
  --vurgu-yumusak: rgba(155,122,255,0.14);
}

[data-zemin="acik"]{
  --zemin: var(--fisilti-beyazi);
  --yuzey: var(--saf-beyaz);
  --yuzey-hover: var(--saf-beyaz);
  --kenar: var(--lavanta-gri);

  --metin: var(--lacivert-900);
  /* Kılavuz: "Gövde metni Soğuk Gri (#585C70)." */
  --metin-govde: var(--soguk-gri);
  /* #7A7F94 denendi: Fısıltı Beyazı üstünde 3.66:1, AA'nın altında.
     #5F6376 → 5.6:1. Soğuk Gri ailesinden, sadece bir tık koyu. */
  --metin-sessiz: #5F6376;

  --vurgu: var(--mor-700);
  --vurgu-kicker: var(--mor-900);
  /* KÜÇÜK METİNDE MOR: Mor 700, Fısıltı Beyazı üstünde 4.4:1 ölçüldü —
     AA eşiğinin (4.5) kılpayı altında. Kılavuz s.13 zaten Mor 500 ve
     300'ü açık zeminde küçük metin için yasaklıyor; aynı gerekçe 700
     için de bu zeminde geçerli çıktı. Küçük metinde Mor 900 kullanılıyor
     (8.9:1) — palet içinde kalıyor, sistem bozulmuyor.
     --vurgu (Mor 700) büyük başlık, ikon ve dolgu için duruyor. */
  --vurgu-metin: var(--mor-900);
  --vurgu-yumusak: rgba(123,79,255,0.09);
}

/* Sayfanın varsayılanı koyu; bölümler kendi modunu ezer. */
html{ color-scheme: dark; }

/* ============================================================
   İMZA DOKU — MOR IŞIMA (s.15)
   ------------------------------------------------------------
   "Koyu zeminlerde sağ üst köşeden yayılan düşük opaklıkta mor
   radial gradyan. Markanın imza dokusudur; her koyu bölümde
   tekrarlanır, açık zeminlerde kullanılmaz."

   ::before ile veriliyor ki bölümün kendi arka planını işgal
   etmesin ve içeriğin altında kalsın. Açık zeminde kural gereği
   hiç üretilmiyor.

   Işıma YALNIZ <section>'lara biniyor, body'ye değil: body de
   varsayılan olarak data-zemin="koyu" taşıyor (jetonlar oradan
   miras alınsın diye) ama tek bir dev ışıma sayfanın tamamını
   kaplasaydı "her koyu bölümde tekrarlanır" kuralı bozulurdu.

   DİKKAT — bu yorum bir zamanlar ortadan ERKEN KAPANMIŞTI (üstteki
   ==== satırında bir yorum kapanışı duruyordu) ve kalan metin
   geçersiz bir kural hâline gelmişti. Aynı sebeple bu blokta
   yorum kapanış dizisi ASLA düz metin olarak yazılmamalı.
   CSS hata kurtarması geçersiz kuralı bir sonraki
   {...} bloğunun SONUNA kadar yutar; yani aşağıdaki position/
   isolation kuralı sessizce ölüydü. Belirtisi: static kalan koyu
   bölümlerde inset:0 ilk kapsayan bloğa çözülüyor ve ışıma bölümü
   değil EKRANI kaplıyordu (ölçüldü: 3986px'lik #kategoriler
   bölümünde ışıma 900px). */
section[data-zemin="koyu"]{ position: relative; isolation: isolate; }
section[data-zemin="koyu"]::before{
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    120% 90% at 88% 6%,
    rgba(123,79,255,0.20) 0%,
    rgba(123,79,255,0.08) 38%,
    transparent 70%);
}

/* ============================================================
   SIFIRLAMA VE TABAN
   ============================================================ */
*{ box-sizing: border-box; margin: 0; padding: 0; }
/* scrollbar-gutter: "stable", "stable both-edges" DEĞİL.

   both-edges kaydırma çubuğu genişliğini İKİ kenarda birden
   rezerve ediyor. Çubuk yalnız sağda olduğu için soldaki pay boş
   kalıyor: html'in içerik kutusu daralıyor, tam genişlikteki koyu
   bölümler pencere kenarına ULAŞAMIYOR ve aradan body'nin zemini
   (Lacivert 900) görünüyor. Fotoğraflı bölümün yanında bu şerit
   siyah bir çıkıntı gibi okunuyor.

   Yalnız "stable" tek pay bırakıyor ve çubuk zaten onun içine
   çiziliyor — düzen kayması önleniyor ama boş şerit kalmıyor.

   NOT: bu ayrım YALNIZ klasik (yer kaplayan) kaydırma çubuğunda
   görünür. Bindirmeli çubukta scrollbar-gutter'ın hiçbir etkisi
   yok, o yüzden başsız tarayıcıda ölçülemiyor. */
html{ scroll-behavior: smooth; scrollbar-gutter: stable; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body{
  background: var(--lacivert-900);
  color: var(--metin, #FFFFFF);
  font-family: var(--font-govde);
  font-size: var(--olcu-govde);
  line-height: var(--satir-govde);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Başlıklar Manrope. Kılavuz: italik KULLANILMAZ — vurgu renk
   veya ağırlık değişimiyle verilir. <em> bu yüzden eğilmiyor,
   marka vurgusu rengini alıyor. */
h1, h2, h3, h4{
  font-family: var(--font-baslik);
  line-height: var(--satir-baslik);
  letter-spacing: var(--aralik-baslik);
  color: var(--metin);
}
h1{ font-size: var(--olcu-h1); font-weight: 800; }
h2{ font-size: var(--olcu-h2); font-weight: 800; }
h3{ font-size: var(--olcu-h3); font-weight: 700; line-height: var(--satir-baslik-kucuk); }

em{ font-style: normal; color: var(--vurgu); }
i{ font-style: normal; }

p{ color: var(--metin-govde); max-width: var(--satir-uzunlugu); }

a{ color: inherit; text-decoration: none; }
/* ol DA dahil. Yalnız ul sıfırlanmıştı ve "Nasıl çalışıyoruz"
   bölümünde <ol> kullanıldığı için tarayıcının kendi işareti
   ("1.", "2.") bizim yazdığımız "01", "02" numaralarının yanında
   çıkıyordu — ekranda "1. 01", "2. 02" görünüyordu.
   Sıra bilgisi anlamsal olarak <ol>'de kalmalı, o yüzden etiket
   değil işaret kaldırıldı. */
ul, ol{ list-style: none; }
button{ font-family: inherit; border: none; background: none; color: inherit; }

::selection{ background: var(--mor-700); color: #fff; }
:focus-visible{
  outline: 2px solid var(--mor-700);
  outline-offset: 3px;
  border-radius: var(--r-buton);
}

/* ============================================================
   KICKER / ÜST ETİKET (s.14)
   Roboto Mono, tamamı büyük harf, +0.05em aralık.
   ============================================================ */
.kicker{
  font-family: var(--font-mono);
  font-size: var(--olcu-kicker);
  font-weight: 500;
  letter-spacing: var(--aralik-kicker);
  text-transform: uppercase;
  color: var(--vurgu-kicker);
}

/* ============================================================
   BUTONLAR (s.13 hiyerarşi + s.17 ölçü)
   Birincil her zaman Mor 700 dolgu, ikincil her zaman kontur.
   İkisi de 44px — mobil dokunma hedefi.
   ============================================================ */
.dugme{
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--buton-yukseklik);
  padding: 0 var(--s-3);
  font-family: var(--font-baslik);
  font-size: var(--olcu-buton);
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: var(--r-buton);
  cursor: pointer;
  transition: background-color var(--dur-hover) var(--ease),
              border-color var(--dur-hover) var(--ease),
              color var(--dur-hover) var(--ease);
}
.dugme-ana{
  background: var(--buton-dolgu);
  color: var(--buton-metin);
}
.dugme-ana:hover{ background: #6B3FF0; }

.dugme-kontur{
  background: transparent;
  color: var(--metin);
  border: 1px solid var(--kenar);
}
.dugme-kontur:hover{ border-color: var(--vurgu); color: var(--vurgu); }

/* ============================================================
   FORM ALANLARI (s.17)
   Lavanta Gri kenarlık, odaklandığında Mor 700.
   ============================================================ */
input, textarea, select{
  font-family: var(--font-govde);
  font-size: var(--olcu-govde);
  min-height: var(--buton-yukseklik);
  padding: 0 var(--s-2);
  border-radius: var(--r-buton);
  border: 1px solid var(--kenar);
  background: var(--yuzey);
  color: var(--metin);
  transition: border-color var(--dur-hover) var(--ease);
}
textarea{ padding: var(--s-2); min-height: 120px; }
input:focus, textarea:focus, select:focus{
  outline: none;
  border-color: var(--mor-700);
}