/* entegrasyonlar sayfasına ÖZGÜ yerleşim. Ortak bileşenler `bilesen.css`te kalır —
   buraya kopyalanan bir bileşen aynı kavramın ikinci yazımı olur.
   Kullanılan ortak bileşenler: `.iskelet` (+ süreğen döngü), `.kizgara`, `.kart`,
   `.bas`, `.ikili`, `.akordeon`, `.bolum`, `.kap`, `.ac`.

   ---------------------------------------------------------------------------
   DURUM ROZETİ — RENK TEK BAŞINA ANLAM TAŞIMIYOR

   Paletin tamamı iki değerli (mürekkep/kâğıt) + TEK doygun değer (kobalt); yeşil
   ya da amber token YOK ve `tokens.css`e yenisi eklenmedi (bu tur onun turu değil,
   ve çıplak hex kapıdan geçmez). Yani üç durum renkle ayrılamıyor — bu bir kısıt
   DEĞİL, istenen şey: WCAG 1.4.1 rengin tek taşıyıcı olmasını yasaklıyor.

   Üç durum DÖRT eksende birden ayrışıyor:
     1. METİN — rozetin kendisi durumu yazıyor ("Working" / "Partly built" /
        "Decided, not built"), yani ekran okuyucu ve gri baskı da ayırt eder.
     2. BÖLÜM BAŞLIĞI — her durum kendi `<h2>`sinin altında; rozet yalnız
        tarama kolaylığı, tek kaynak değil.
     3. DOLGU — dolu (mürekkep zemin) / çerçeveli / kesik çerçeveli.
     4. NOKTA — dolu · çemberli · içi boş.
   --------------------------------------------------------------------------- */

.rozet{
  display:inline-flex;align-items:center;gap:var(--b2);
  padding:var(--b1) var(--b2);border-radius:var(--y-hap);
  border:1px solid transparent;
  font-size:var(--tmicro);line-height:var(--t9-s);font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;
}
.rozet::before{
  content:"";inline-size:var(--b2);block-size:var(--b2);flex:none;
  border-radius:var(--y-hap);border:2px solid currentColor;
}

/* 1 — ÇALIŞIYOR: dolu zemin, dolu nokta. Nokta süreğen nabız taşıyor (sayfanın
   ikinci döngüsü; ilki `.iskelet`in eyebrow noktası). Döngü %100'de GÖRÜNÜR
   bitiyor, yani `prefers-reduced-motion`da donduğunda kaybolan bir şey yok. */
.rozet-1{background:var(--murekkep);color:var(--kagit)}
.rozet-1::before{background:currentColor;animation:rozetNabiz 7.68s var(--egri) infinite}
@keyframes rozetNabiz{0%,100%{opacity:1}55%{opacity:.35}}

/* 2 — KISMİ: kâğıt zemin + tam çerçeve, nokta İÇİ BOŞ ama çemberi tam. */
.rozet-2{background:var(--kagit);color:var(--murekkep);border-color:var(--murekkep)}
.rozet-2::before{background:transparent}

/* 3 — KARAR VERİLDİ, YAPILMADI: kesik çerçeve (görsel olarak "henüz kapanmadı"),
   soluk metin, noktanın çemberi de kesik. */
.rozet-3{background:var(--kagit2);color:var(--soluk);border-style:dashed;border-color:var(--soluk)}
.rozet-3::before{background:transparent;border-style:dashed}
.bolum-tint .rozet-3{background:var(--kagit)}

/* Başlıktaki durum sözlüğü. `.iskelet-ust` satırları YAN YANA diziyor; üç
   madde 1440'ta 2+1 diye sarıyordu (ekran görüntüsünde görüldü) ve bir sözlük
   gibi değil serbest metin gibi okunuyordu. Her madde kendi satırına alındı:
   sözlük soldan hizalı üç satır olarak okunuyor, sarma noktasından bağımsız. */
.durum-sozluk{flex-direction:column;gap:var(--b2)}
.durum-sozluk .rozet + span{color:var(--soluk)}

/* Bu sayfada ızgara 4 kart taşıyor: 3 sütunda ikinci sıra 1 kart + 2 boşluk
   kalıyordu. 2x2 hem dengeli hem sütunu ~306px'ten ~500px'e çıkarıyor (okunur
   satır uzunluğu). Dar kırılmalar KENDİ media'sıyla yazıldı: `bilesen.css`in
   `@media`si aynı özgüllükte (0,1,0) ve @media özgüllük EKLEMİYOR — bu dosya
   sonra yüklendiği için oradaki 640px kuralı tek sütuna düşüremezdi.
   ⚠️ İkinci bir sayfa de 4'lü ızgara kurarsa bu değiştirici `bilesen.css`e
   TAŞINIR (kopyalanmaz) — aynı kavramın iki yazımı yan yana bayatlar. */
.kizgara-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:640px){ .kizgara-2{grid-template-columns:1fr} }

/* ---- IZGARA KARTI EKLERİ -------------------------------------------------- */
/* `.kizgara-m` sırası: etiket · başlık · rozet · gövde · not. Rozet başlığın
   ALTINDA çünkü başlık entegrasyonun adı, rozet onun hakkındaki hüküm.

   🔴 ÖLÇÜLDÜ (tarayıcı, CDP — sayısal kapılar YEŞİLKEN): `bilesen.css:170`
   `.kizgara-m p{font-size:var(--t9);color:var(--soluk)}` ÖZGÜLLÜĞÜ (0,2,0) ve
   benim (0,1,0) kurallarımı sessizce eziyordu. Kart içindeki rozet 10px değil
   **14px** çiziliyor, rengi de `--kagit` değil `--soluk` oluyordu: beyaz yerine
   gri metin, çam zemin üzerinde **1,85:1** — WCAG AA'nın (4,5:1) ALTINDA.
   (11 Eki: palet markaya döndüğünde bu çift 3,09 → 1,85 oldu; kayıt TARİHLENMEDİ,
   BUGÜNKÜ değere çekildi — iddia hâlâ aynı şeyi söylüyor ve ölçülebilir kalıyor.)
   Aynı kural `.kizgara-et`i (o da 0,1,0, `bilesen.css:171`) 14px'e çıkarıyor,
   yani PAYLAŞILAN bileşenin kendi mikro etiketi de kendi evinde bozuk.

   Düzeltme özgüllük savaşıyla DEĞİL, elementle: rozet ve mikro etiket `<span>`,
   yani `.kizgara-m p` onları hiç eşleştiremiyor. Bu hem sıraya bağlı olmayan tek
   çözüm (sayfa CSS'i sonra yüklendiği için `0,2,0` berabere kalırdı) hem de
   başlıktaki durum sözlüğünün markup'ıyla aynı. `.kizgara-not` gerçek bir cümle
   taşıdığı için `<p>` KALIYOR; onun kuralları (0,2,1) ile yazılıyor. */
.kizgara-m .rozet{align-self:flex-start;margin-block-end:var(--b1)}
/* Notun kendi ayırıcısı var: "bu satır bir çekince" görsel olarak da ayrı dursun.
   `margin-block-start:auto` ızgarada notları alt kenara hizalıyor (kartlar
   `block-size:100%`), yani farklı uzunluktaki gövdeler notu kaydırmıyor.
   Seçici `.kizgara-m p.kizgara-not` = (0,2,1) → `.kizgara-m p` (0,2,0) beraberlik
   değil KAYIP eder; sayfaların yüklenme sırası değişse de kural ayakta kalır. */
.kizgara-m p.kizgara-not{
  margin-block-start:auto;padding-block-start:var(--b3);
  border-block-start:1px solid var(--cizgi);
  font-size:var(--tmicro);line-height:var(--t9-s);color:var(--soluk);
}
.kizgara-m p.kizgara-not a{text-decoration:underline;text-underline-offset:3px}
/* Tek gövdeli kartta not hemen gövdenin ardından gelsin (auto boşluk yutmasın). */
.kizgara-m > p + p.kizgara-not{margin-block-start:var(--b2)}

/* Ayar ekranındaki alan/olay adı. Mono aile YOK (tokens kararı) — ayrım
   ağırlık + tint zeminden geliyor. Çerçeve ve geniş dolgu KALDIRILDI: dar kart
   sütununda `white-space:nowrap` ile birlikte pili kendi satırına düşürüp
   cümlenin ortasında boşluk bırakıyordu (ölçüm: 1440'ta kart sütunu ~306px). */
.kod{
  background:var(--kagit2);border-radius:var(--y-hap);
  padding:0 var(--b1);font-weight:500;white-space:nowrap;color:var(--murekkep);
}
.bolum-tint .kod{background:var(--kagit)}

/* ---- DURUM SATIRI (kısmi + karar verildi) --------------------------------- */
/* Neden `.kizgara` değil: bu iki bölümde yalnız bir ya da iki kalem var ve üç
   sütunlu ızgarada tek kart sayfanın üçte birinde asılı kalır. Satır biçimi
   ayrıca daha uzun gerekçe metnini taşıyor — ızgara kartı taşımıyor. */
.satir-liste{display:flex;flex-direction:column;gap:var(--b4)}
.satir{
  padding:var(--b5);
  /* Yan kolon `auto`: genişliği rozet METNİ belirliyor. Sabit bir genişlik
     yazmak, rozet metni uzadığı gün (rozet `white-space:nowrap`) taşma
     üretirdi — yani sayının kendisi bir bakım borcu olurdu. */
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:var(--b3) var(--b5);align-items:start;
}
.satir-yan{display:flex;flex-direction:column;gap:var(--b2);align-items:flex-start}
.satir-govde{display:flex;flex-direction:column;gap:var(--b3)}
.satir-govde h3{font-size:var(--t5);line-height:var(--t5-s);font-weight:500}
.satir-govde > p{font-size:var(--t9);line-height:var(--t9-s);color:var(--soluk);max-inline-size:var(--olcu-orta)}
.satir-govde h4{
  font-size:var(--tmicro);line-height:var(--t9-s);
  letter-spacing:.09em;text-transform:uppercase;font-weight:500;
  padding-block-start:var(--b3);border-block-start:1px solid var(--cizgi);
}
@media (max-width:767px){
  .satir{grid-template-columns:1fr;gap:var(--b3)}
  .satir-yan{flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--b3)}
}

/* "Eksik olan" listesi. `.ikili`nin ikon markup'ı KOPYALANMADI (aynı bileşenin
   ikinci yazımı olurdu ve `.ikili` iki sütunlu bir ızgara — burada tek sütun
   var); işaret CSS `::before`, yani sprite'a da yeni sembol borcu yok. */
.eksik{display:flex;flex-direction:column;gap:var(--b2);max-inline-size:var(--olcu-orta)}
.eksik li{
  position:relative;padding-inline-start:var(--b4);
  font-size:var(--t9);line-height:var(--t9-s);color:var(--soluk);
}
.eksik li::before{
  content:"";position:absolute;inset-inline-start:0;inset-block-start:calc(var(--t9-s) * .5em - 1px);
  inline-size:var(--b2);block-size:2px;background:var(--soluk);
}