/* ==========================================================================
   app.css — ClientPoster tasarim sistemi (Modul 6)

   ⚖️ KAYNAK: sunum/assets/css/app.css
   Prototip Faz 0-7 sonunda SARTNAME olarak DONDURULDU; bu dosya oradan
   tasindi. Kopya olmasi bilincli: prototip artik degismiyor, urun evriliyor.
   Sapma tek yonlu ve OLCULUYOR — TasarimSistemiTestleri marka rengini,
   gradyani, AI vurgusunu ve uc font ailesini iki dosyada karsilastiriyor.

   🔴 PROJE KURALI 1: CDN yok. Bu dosya projeyle sunulur.
   ========================================================================== */

/* ==========================================================================
   app.css — Reset · Düzen · Bileşenler
   Bağımlılık: tokens.css (önce yüklenmeli)
   ========================================================================== */

/* ---------- 1. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-govde);
  font-size: var(--ts-md);
  line-height: var(--lh-md);
  color: var(--metin);
  background: var(--zemin);
  -webkit-font-smoothing: antialiased;
  font-optical-sizing: auto;
  min-height: 100vh;
}

img, svg, video { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
a { color: var(--marka); text-decoration: none; }
a:hover { text-decoration: underline; }
/* TİPOGRAFİ — TEK AİLE: Space Grotesk (kullanıcı kararı 2026-09-04).
   AI ürünü olduğu için ağırlıklar bilinçli olarak KALIN tutuldu:
   başlık 700, sayfa başlığı ve rakamlar 800. */
h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-baslik);
  font-weight: 700; line-height: 1.24; letter-spacing: var(--harf-orta);
}
h1, .gosterim, .dok__ic h1, .auth__yan h2, .ist__deger, .kenar__ad, .karsilama h1 {
  font-weight: 800;
  letter-spacing: var(--harf-sik);
}

/* Teknik etiket — monospace, seyrek harf aralığı, büyük harf.
   Metrik başlıkları, model adları, ID'ler ve sayaçlar için. */
.teknik {
  font-family: var(--font-mono);
  font-size: var(--ts-xs); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
}
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
ul, ol { padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }

:focus-visible { outline: none; box-shadow: var(--odak-halka); border-radius: var(--r-sm); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- 2. YARDIMCI ---------- */
.gizle { display: none !important; }
.gorsel-gizli {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.sayisal { font-variant-numeric: tabular-nums; }
.metin-2 { color: var(--metin-2); }
.metin-3 { color: var(--metin-3); }
.kucuk { font-size: var(--ts-sm); line-height: var(--lh-sm); }
.minik { font-size: var(--ts-xs); line-height: var(--lh-xs); }
.kalin { font-weight: 600; }
.orta { text-align: center; }
.sag { text-align: end; }
.satir { display: flex; align-items: center; gap: var(--b-3); min-width: 0; }
/* Uzun etiket sagdaki degeri disari itmesin: metin kismi kisilabilir olmali */
.satir--ara > :first-child { min-width: 0; }
.satir--ara > :last-child { flex: 0 0 auto; }
.satir--ara { justify-content: space-between; }
.satir--sar { flex-wrap: wrap; }
/* min-width:0 ZORUNLU — grid/flex ogeleri varsayilan min-width:auto ile
   icerigin altina kuculemez; genis bir SVG/tablo sutunu sisirip belgeye
   yatay kaydirma ekler. */
.sutun { display: flex; flex-direction: column; gap: var(--b-3); min-width: 0; }
.izgara > * { min-width: 0; }
.esne { flex: 1; }
.izgara { display: grid; gap: var(--b-4); }
.izgara--2 { grid-template-columns: repeat(2, 1fr); }
.izgara--3 { grid-template-columns: repeat(3, 1fr); }
.izgara--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .izgara--4 { grid-template-columns: repeat(2,1fr); } .izgara--3 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 680px)  { .izgara--2, .izgara--3, .izgara--4 { grid-template-columns: 1fr; } }

/* ---------- 3. DÜZEN: app (sidebar + topbar) ---------- */
.uygulama { display: flex; min-height: 100vh; }

.kenar {
  width: var(--kenar-genislik);
  flex: 0 0 var(--kenar-genislik);
  background: var(--yuzey);
  border-inline-end: 1px solid var(--cizgi);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow: hidden;
}
.kenar__marka {
  display: flex; align-items: center; gap: var(--b-3);
  padding: var(--b-4) var(--b-5);
  height: var(--ust-yukseklik);
  border-bottom: 1px solid var(--cizgi);
  flex: 0 0 auto;
}
.kenar__marka:hover { text-decoration: none; }
.kenar__logo {
  width: 32px; height: 32px; border-radius: var(--r-md);
  background: var(--marka-gradyan); color: #fff;
  display: grid; place-items: center; flex: 0 0 auto;
}
/* İşaret kendi fill/stroke özniteliklerini taşır; CSS yalnızca boyut verir.
   Aksi halde dolu kart ile çizgisel katmanlar birbirine karışır. */
.kenar__logo svg { width: 19px; height: 19px; }
/* Wordmark: "Client" normal + "Poster" kalin. Ad kisa oldugu icin
   tek satirda rahat duruyor. */
.kenar__ad { font-size: var(--ts-lg); color: var(--metin); line-height: 1.1; white-space: nowrap; }
.kenar__ad span { font-weight: 500; }
.kenar__ad b { font-weight: 800; }
.auth__yan .kenar__ad, .acik-ust .kenar__ad { color: inherit; }
/* Sadece menu kayar; alttaki kredi kutusu daima gorunur kalir.
   min-height:0 olmadan flex cocugu kucululmez ve kutu ekran disina tasar. */
.kenar__nav { padding: var(--b-4) var(--b-3); flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.kenar__bolum {
  font-size: var(--ts-xs); text-transform: uppercase; letter-spacing: .06em;
  color: var(--metin-3); font-weight: 600;
  padding: var(--b-4) var(--b-3) var(--b-2);
}
.kenar__link {
  display: flex; align-items: center; gap: var(--b-3);
  padding: var(--b-2) var(--b-3); border-radius: var(--r-md);
  color: var(--metin-2); font-size: var(--ts-md); font-weight: 600;
  transition: background var(--gecis-hizli), color var(--gecis-hizli);
}
.kenar__link:hover { background: var(--yuzey-3); color: var(--metin); text-decoration: none; }
/* Aktif menü öğesi dolgun gradyan hap — sidebar'a kimlik veren detay */
.kenar__link[aria-current="page"] {
  background: var(--marka-gradyan); color: #fff; font-weight: 700;
  box-shadow: var(--golge-marka);
}
.kenar__link .ikon { flex: 0 0 auto; }
.kenar__rozet {
  margin-inline-start: auto; font-size: var(--ts-xs); font-weight: 600;
  background: var(--hata); color: #fff; border-radius: var(--r-tam);
  min-width: 20px; height: 20px; display: grid; place-items: center; padding: 0 6px;
}
.kenar__alt { padding: var(--b-4); border-top: 1px solid var(--cizgi); flex: 0 0 auto; background: var(--yuzey); }

.ana { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.ust {
  height: var(--ust-yukseklik); flex: 0 0 var(--ust-yukseklik);
  background: var(--yuzey); border-bottom: 1px solid var(--cizgi);
  display: flex; align-items: center; gap: var(--b-4);
  padding: 0 var(--b-6); position: sticky; top: 0; z-index: 30;
}
.ust__ara {
  flex: 1; max-width: 420px; position: relative;
}
.ust__ara input {
  width: 100%; padding: 7px var(--b-3) 7px 34px;
  border: 1px solid var(--cizgi); border-radius: var(--r-md);
  background: var(--yuzey-2); font-size: var(--ts-sm);
}
.ust__ara .ikon { position: absolute; inset-inline-start: 9px; top: 50%; transform: translateY(-50%); color: var(--metin-3); }
.ust__sag { margin-inline-start: auto; display: flex; align-items: center; gap: var(--b-2); }

.govde { padding: var(--b-5); flex: 1; }
.govde__ic { max-width: var(--icerik-maks); margin: 0 auto; }

.sayfa-basi { margin-bottom: var(--b-4); display: flex; align-items: flex-start; gap: var(--b-4); flex-wrap: wrap; }

/* ---------- KARŞILAMA BANDI ---------- */
/* Kompakt: tek satırlık selam + tarih; ortada boş alan bırakmaz */
.karsilama {
  background: var(--marka-gradyan-genis); color: #fff;
  border-radius: var(--r-lg); padding: var(--b-3) var(--b-5);
  margin-bottom: var(--b-4); display: flex; align-items: center;
  gap: var(--b-4); flex-wrap: wrap;
}
.karsilama__metin { flex: 1; min-width: 240px; }
.karsilama h1 { font-size: var(--ts-xl); line-height: var(--lh-xl); color: #fff; }
.karsilama p { font-size: var(--ts-sm); color: rgba(255,255,255,.88); }
.karsilama .btn--birincil { background: #fff; color: var(--marka-600); }
.karsilama .btn--birincil:hover { background: rgba(255,255,255,.88); }
.karsilama .btn--ikincil {
  background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.32);
}
.karsilama .btn--ikincil:hover { background: rgba(255,255,255,.26); }
/* Gradyan üzerinde rozet: rozet--marka mor zeminde mor kalıp okunmuyordu.
   Yönetim ekranlarının kapsam etiketi ("İşletmeci görünümü") burada duruyor. */
.karsilama .rozet { background: rgba(255,255,255,.20); color: #fff; }
.sayfa-basi__metin { flex: 1; min-width: 220px; }
.sayfa-basi h1 { font-size: var(--ts-2xl); line-height: var(--lh-2xl); }
.sayfa-basi p { color: var(--metin-2); font-size: var(--ts-sm); margin-top: var(--b-1); }
.sayfa-basi__islem { display: flex; gap: var(--b-2); flex-wrap: wrap; }

.kirinti { display: flex; align-items: center; gap: var(--b-2); font-size: var(--ts-sm); color: var(--metin-3); margin-bottom: var(--b-2); }
/* Dokunma hedefi en az 24px (WCAG 2.5.8): kirinti baglantilari 22px'ti.
   Dikey dolgu satiri buyutmuyor cunku kap zaten daha yuksek. */
.kirinti a { color: var(--metin-2); display: inline-block; padding: 3px 2px; margin: -3px -2px; }
/* ---------- ALT BİLGİ ---------- */
.dip {
  border-top: 1px solid var(--cizgi); padding: var(--b-4) var(--b-6);
  display: flex; gap: var(--b-4); flex-wrap: wrap; align-items: center;
  font-size: var(--ts-xs); color: var(--metin-3);
}
.dip__baglar { margin-inline-start: auto; display: flex; gap: var(--b-4); flex-wrap: wrap; }
/* 22px yuksekligindeki baglantilar 24px'e cikarildi; negatif margin
   sayesinde satir yuksekligi degismiyor. */
.dip a { display: inline-block; padding: 5px 3px; margin: -5px -3px; }
/* Tek basina duran geri baglantisi 15px yuksekligindeydi; satir ici
   metin istisnasina girmiyor cunku cumle icinde degil. */
.geri-bag { display: inline-block; padding: 5px 4px; margin: -5px -4px; }

.kirinti span { color: var(--metin-3); }

@media (max-width: 940px) {
  /* Çekmeceyi transform ile ekran dışına itmek belge genişliğini şişirip
     yatay kaydırma üretiyor. overflow:clip ile maskelemek ise GERÇEK
     taşmaları da gizleyip doğrulama scriptini körleştiriyor.
     Bu yüzden display ile aç/kapa: taşma yok, maske yok, test dürüst kalıyor. */
  .kenar {
    display: none;
    position: fixed; top: 0; inset-inline-start: 0; z-index: 60;
    box-shadow: var(--golge-3);
  }
  .kenar.acik { display: flex; }
  .govde { padding: var(--b-4); }
  .ust { padding: 0 var(--b-4); }
  .ust__ara { display: none; }
}
.kenar-perde { display: none; }
.kenar-perde.acik { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 50; }
.menu-dugme { display: none; }
@media (max-width: 940px) { .menu-dugme { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-md); color: var(--metin-2); } }

/* ---------- 4. DÜZEN: auth ---------- */
.auth { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
.auth__yan {
  background: var(--marka-gradyan-genis);
  color: #fff; padding: var(--b-12); display: flex; flex-direction: column; justify-content: space-between;
}
.auth__yan h2 { font-size: var(--ts-3xl); line-height: var(--lh-3xl); color: #fff; max-width: 24ch; }
.auth__yan p { color: rgba(255,255,255,.82); margin-top: var(--b-4); max-width: 46ch; }
.auth__ozellik { display: flex; gap: var(--b-3); align-items: flex-start; margin-top: var(--b-4); }
.auth__ozellik .ikon { flex: 0 0 auto; margin-top: 2px; opacity: .9; }
.auth__form { display: grid; place-items: center; padding: var(--b-8); background: var(--yuzey); }
.auth__kart { width: 100%; max-width: 400px; }
.auth__kart h1 { font-size: var(--ts-2xl); line-height: var(--lh-2xl); margin-bottom: var(--b-2); }
@media (max-width: 900px) { .auth { grid-template-columns: 1fr; } .auth__yan { display: none; } }

/* ---------- 5. DÜZEN: public (onay linki) ---------- */
.acik-ust {
  background: var(--yuzey); border-bottom: 1px solid var(--cizgi);
  padding: var(--b-4) var(--b-6); display: flex; align-items: center; gap: var(--b-3);
  position: sticky; top: 0; z-index: 30;
}
.acik-govde { max-width: 1000px; margin: 0 auto; padding: var(--b-8) var(--b-6) var(--b-16); }

/* ---------- 6. DÜZEN: doc (doküman) ---------- */
.dok { display: flex; min-height: 100vh; }
.dok__yan {
  width: 260px; flex: 0 0 260px; background: var(--yuzey);
  border-inline-end: 1px solid var(--cizgi); padding: var(--b-5);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.dok__ana { flex: 1; min-width: 0; padding: var(--b-10) var(--b-8) var(--b-16); }
.dok__ic { max-width: var(--okuma-maks); margin: 0 auto; }
.dok__ic h1 { font-size: var(--ts-3xl); line-height: var(--lh-3xl); margin-bottom: var(--b-3); }
.dok__ic h2 { font-size: var(--ts-xl); line-height: var(--lh-xl); margin: var(--b-10) 0 var(--b-3); padding-top: var(--b-4); border-top: 1px solid var(--cizgi); }
.dok__ic h3 { font-size: var(--ts-lg); margin: var(--b-6) 0 var(--b-2); }
.dok__ic p { margin-bottom: var(--b-3); color: var(--metin-2); }
/* DOGRUDAN COCUK degil TORUN secici: dokuman sayfalarinin govdesi bir sarmalayici
   div icine ciziliyor (#govde), bu yuzden `.dok__ic > ul` hicbirini yakalamiyordu ve
   listeler madde isaretsiz kaliyordu. Ekran goruntusune bakarken fark edildi. */
.dok__ic ul { margin-bottom: var(--b-4); }
.dok__ic ul > li { position: relative; padding-inline-start: var(--b-5); margin-bottom: var(--b-2); color: var(--metin-2); }
.dok__ic ul > li::before { content: ""; position: absolute; inset-inline-start: 6px; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--marka); }
.dok__ic table { margin-bottom: var(--b-5); }
@media (max-width: 940px) { .dok__yan { display: none; } .dok__ana { padding: var(--b-6) var(--b-4); } }

/* ---------- 7. BUTON ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--b-2);
  padding: 8px 14px; border-radius: var(--r-md);
  font-size: var(--ts-md); font-weight: 600; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer;
  transition: background var(--gecis-hizli), border-color var(--gecis-hizli), color var(--gecis-hizli);
}
.btn:hover { text-decoration: none; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn--birincil { background: var(--marka-gradyan); color: #fff; }
.btn--birincil:not(:disabled):hover { background: var(--marka-600); }
.btn--ikincil { background: var(--yuzey); color: var(--metin); border-color: var(--cizgi-guclu); }
.btn--ikincil:not(:disabled):hover { background: var(--yuzey-3); }
.btn--sessiz { background: transparent; color: var(--metin-2); }
.btn--sessiz:not(:disabled):hover { background: var(--yuzey-3); color: var(--metin); }
.btn--tehlike { background: var(--hata); color: #fff; }
.btn--tehlike:not(:disabled):hover { background: var(--hata-700); }
.btn--basari { background: var(--basari); color: #fff; }
.btn--basari:not(:disabled):hover { background: var(--basari-700); }
.btn--sm { padding: 5px 10px; font-size: var(--ts-sm); }
.btn--lg { padding: 11px 20px; font-size: var(--ts-lg); }
.btn--tam { width: 100%; }
.btn--ikon { padding: 8px; }

/* ---------- 8. KART ---------- */
.kart {
  background: var(--yuzey); border: 1px solid var(--cizgi);
  border-radius: var(--r-lg); box-shadow: var(--golge-1);
}
.kart__basi {
  padding: var(--b-3) var(--b-4); border-bottom: 1px solid var(--cizgi);
  display: flex; align-items: center; gap: var(--b-3); flex-wrap: wrap;
}
.kart__basi h2, .kart__basi h3 { font-size: var(--ts-lg); flex: 1; letter-spacing: var(--harf-orta); }
.kart__govde { padding: var(--b-4); }
.kart__alt { padding: var(--b-3) var(--b-4); border-top: 1px solid var(--cizgi); background: var(--yuzey-2); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.kart--tiklanir { cursor: pointer; transition: box-shadow var(--gecis-hizli), border-color var(--gecis-hizli); }
.kart--tiklanir:hover { box-shadow: var(--golge-2); border-color: var(--cizgi-guclu); }
.kart--secili { border-color: var(--marka); box-shadow: 0 0 0 1px var(--marka); }

/* ---------- 9. İSTATİSTİK KARTI ---------- */
.ist { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-lg); padding: var(--b-4); }

/* Renkli yüzey varyantları — her istatistik kartı kendi anlam rengini taşır */
.ist--mor     { background: var(--mor-zemin);     border-color: var(--mor-cizgi); }
.ist--mavi    { background: var(--mavi-zemin);    border-color: var(--mavi-cizgi); }
.ist--yesil   { background: var(--yesil-zemin);   border-color: var(--yesil-cizgi); }
.ist--turuncu { background: var(--turuncu-zemin); border-color: var(--turuncu-cizgi); }
.ist--mor     .ist__deger { color: var(--mor-metin); }
.ist--mavi    .ist__deger { color: var(--mavi-metin); }
.ist--yesil   .ist__deger { color: var(--yesil-metin); }
.ist--turuncu .ist__deger { color: var(--turuncu-metin); }
.ist--mor     .ist__etiket, .ist--mor     .ist__alt { color: var(--mor-alt); }
.ist--mavi    .ist__etiket, .ist--mavi    .ist__alt { color: var(--mavi-alt); }
.ist--yesil   .ist__etiket, .ist--yesil   .ist__alt { color: var(--yesil-alt); }
.ist--turuncu .ist__etiket, .ist--turuncu .ist__alt { color: var(--turuncu-alt); }

/* Doygun ikon çipi — kartın rengini taşıyan görsel çapa */
/* Taban zemini ŞART: renk yalnızca `.ist--{renk} .ist__cip` kuralından
   geliyordu, dolayısıyla çip bir istatistik kartının DIŞINDA kullanılınca
   saydam kalıyor ve beyaz ikon/rakam zeminsiz duruyordu (adım numaraları,
   servis listeleri). Kart içinde özgül kural daha güçlü olduğu için
   renkli kartların görünümü değişmez. */
.ist__cip {
  width: 32px; height: 32px; border-radius: var(--r-md);
  display: grid; place-items: center; color: #fff; flex: 0 0 auto;
  margin-bottom: var(--b-2); background: var(--marka);
}
.ist--mor     .ist__cip { background: var(--mor-cip); }
.ist--mavi    .ist__cip { background: var(--mavi-cip); }
.ist--yesil   .ist__cip { background: var(--yesil-cip); }
.ist--turuncu .ist__cip { background: var(--turuncu-cip); }
.ist__etiket { font-size: var(--ts-sm); font-weight: 600; color: var(--metin-2); display: flex; align-items: center; gap: var(--b-2); }
.ist__deger { font-size: var(--ts-2xl); line-height: var(--lh-2xl); font-variant-numeric: tabular-nums; margin-top: var(--b-1); }
.ist__alt { font-size: var(--ts-sm); color: var(--metin-3); margin-top: var(--b-1); display: flex; align-items: center; gap: var(--b-1); }
.ist__degisim { font-weight: 600; }
.ist__degisim--artis { color: var(--basari); }
.ist__degisim--azalis { color: var(--hata); }

/* ---------- 10. ROZET ---------- */
.rozet {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--r-tam);
  font-size: var(--ts-xs); line-height: 17px; font-weight: 700; white-space: nowrap;
}
.rozet--notr    { background: var(--yuzey-3); color: var(--metin-2); }
.rozet--basari  { background: var(--basari-zayif); color: var(--basari-700); }
.rozet--uyari   { background: var(--uyari-zayif);  color: var(--uyari-700); }
.rozet--hata    { background: var(--hata-zayif);   color: var(--hata-700); }
.rozet--bilgi   { background: var(--bilgi-zayif);  color: var(--bilgi-700); }
.rozet--marka   { background: var(--marka-zayif);  color: var(--marka); }
.rozet--ai      { background: var(--ai-zayif);     color: var(--ai-700); font-family: var(--font-mono); letter-spacing: .04em; }
[data-tema="koyu"] .rozet--ai { color: var(--ai-400); }
[data-tema="koyu"] .rozet--basari { color: var(--basari-500); }
[data-tema="koyu"] .rozet--uyari  { color: var(--uyari-500); }
[data-tema="koyu"] .rozet--hata   { color: var(--hata-500); }
[data-tema="koyu"] .rozet--bilgi  { color: var(--bilgi-500); }
.rozet__nokta { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }

/* ---------- 11. KANAL ROZETİ ---------- */
.kanal {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: var(--r-sm);
  color: #fff; flex: 0 0 auto;
}
.kanal--linkedin  { background: var(--kanal-linkedin); }
.kanal--instagram { background: var(--instagram-gradyan); }
.kanal--facebook  { background: var(--kanal-facebook); }
.kanal--youtube   { background: var(--kanal-youtube); }
.kanal--tiktok    { background: var(--kanal-tiktok); }
[data-tema="koyu"] .kanal--tiktok { color: var(--notr-900); }
.kanal--sm { width: 20px; height: 20px; border-radius: 5px; }
.kanal--lg { width: 36px; height: 36px; border-radius: var(--r-md); }
.kanal-grup { display: inline-flex; gap: var(--b-1); }
.kanal--pasif { opacity: .32; filter: grayscale(1); }

/* ---------- 12. AVATAR ---------- */
.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; flex: 0 0 auto;
  font-size: var(--ts-sm); font-weight: 600; color: #fff;
  background: var(--marka-500); text-transform: uppercase;
}
.avatar--sm { width: 26px; height: 26px; font-size: var(--ts-xs); }
.avatar--lg { width: 48px; height: 48px; font-size: var(--ts-lg); }
/* Avatar renkleri editoryal palete uyumlu: doygunlugu dusuk, topraksi */
.avatar--r0 { background: #0F6E62; } .avatar--r1 { background: #3B6E8F; }
.avatar--r2 { background: #2E6F4E; } .avatar--r3 { background: #C08A2E; }
.avatar--r4 { background: #B3382F; } .avatar--r5 { background: #5B6B8C; }
.avatar--r6 { background: #7A5C8F; } .avatar--r7 { background: #2E8F82; }

/* ---------- 13. FORM ---------- */
.alan { margin-bottom: var(--b-4); }
.alan__etiket { display: block; font-size: var(--ts-sm); font-weight: 500; margin-bottom: 6px; }
.alan__etiket .zorunlu { color: var(--hata); }
.alan__ipucu { font-size: var(--ts-xs); color: var(--metin-3); margin-top: 5px; }
.alan__hata { font-size: var(--ts-xs); color: var(--hata); margin-top: 5px; display: none; }
.alan.hatali .alan__hata { display: block; }
.alan.hatali .girdi { border-color: var(--hata); }

.girdi {
  width: 100%; padding: 8px var(--b-3);
  border: 1px solid var(--cizgi-guclu); border-radius: var(--r-md);
  background: var(--yuzey); color: var(--metin); font-size: var(--ts-md);
  transition: border-color var(--gecis-hizli), box-shadow var(--gecis-hizli);
}
.girdi:focus { outline: none; border-color: var(--marka); box-shadow: var(--odak-halka); }
.girdi::placeholder { color: var(--metin-3); }
.girdi:disabled { background: var(--yuzey-3); color: var(--metin-3); cursor: not-allowed; }
textarea.girdi { min-height: 96px; resize: vertical; line-height: var(--lh-md); }
select.girdi { cursor: pointer; }

.sayac { font-size: var(--ts-xs); color: var(--metin-3); text-align: end; margin-top: 4px; font-variant-numeric: tabular-nums; }
.sayac--uyari { color: var(--uyari); }
.sayac--hata { color: var(--hata); font-weight: 600; }

/* min-height 24px: onay kutusu 16px, tiklama hedefi ETIKETIN tamami ve
   o da 20px kaliyordu. WCAG 2.5.8 alt siniri 24px. */
.onay { display: flex; align-items: flex-start; gap: var(--b-2); cursor: pointer; font-size: var(--ts-sm); min-height: 24px; padding: 2px 0; }
.onay input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--marka); flex: 0 0 auto; cursor: pointer; }

.anahtar { position: relative; display: inline-flex; align-items: center; gap: var(--b-3); cursor: pointer; }
.anahtar input { position: absolute; opacity: 0; width: 0; height: 0; }
.anahtar__kutu { width: 38px; height: 22px; border-radius: var(--r-tam); background: var(--cizgi-guclu); position: relative; transition: background var(--gecis-hizli); flex: 0 0 auto; }
.anahtar__kutu::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform var(--gecis-hizli); box-shadow: var(--golge-1); }
.anahtar input:checked + .anahtar__kutu { background: var(--marka); }
.anahtar input:checked + .anahtar__kutu::after { transform: translateX(16px); }
.anahtar input:focus-visible + .anahtar__kutu { box-shadow: var(--odak-halka); }

/* Seçilebilir kart (radyo/checkbox yerine) */
.secim {
  border: 1px solid var(--cizgi-guclu); border-radius: var(--r-md);
  padding: var(--b-3) var(--b-4); cursor: pointer; background: var(--yuzey);
  transition: border-color var(--gecis-hizli), background var(--gecis-hizli);
  display: flex; align-items: center; gap: var(--b-3);
}
.secim:hover { border-color: var(--marka-cizgi); background: var(--yuzey-2); }
.secim.secili { border-color: var(--marka); background: var(--marka-zayif); }
.secim.pasif { opacity: .45; cursor: not-allowed; }
.secim.pasif:hover { border-color: var(--cizgi-guclu); background: var(--yuzey); }

/* ---------- 14. TABLO ---------- */
.tablo-sar { overflow-x: auto; border-radius: var(--r-lg); }
.tablo { font-size: var(--ts-sm); }
.tablo th {
  text-align: start; font-weight: 600; font-size: var(--ts-xs);
  text-transform: uppercase; letter-spacing: .04em; color: var(--metin-3);
  padding: 9px var(--b-4); border-bottom: 1px solid var(--cizgi);
  background: var(--yuzey-2); white-space: nowrap; position: sticky; top: 0;
}
/* `.tablo th`in özgüllüğü (0,1,1) `.sag`ı (0,1,0) eziyordu: sayı sütunlarında
   değer sağa yaslanırken başlık solda kalıyordu. Kolon `sinif:'sag'` alan her
   tabloyu ilgilendirir (faturalar, admin-panel, admin-paketler). */
.tablo th.sag { text-align: end; }
.tablo th.siralanir { cursor: pointer; user-select: none; }
.tablo th.siralanir:hover { color: var(--metin); }
.tablo th .ok { opacity: .35; margin-inline-start: 4px; }
.tablo th[aria-sort] .ok { opacity: 1; color: var(--marka); }
.tablo td { padding: 9px var(--b-4); border-bottom: 1px solid var(--cizgi); vertical-align: middle; }
.tablo tbody tr:hover { background: var(--yuzey-2); }
.tablo tbody tr:last-child td { border-bottom: none; }
.tablo .sayisal { text-align: end; font-variant-numeric: tabular-nums; }

/* ---------- 15. SEKME ---------- */
.sekmeler { display: flex; gap: var(--b-1); border-bottom: 1px solid var(--cizgi); margin-bottom: var(--b-5); overflow-x: auto; }
.sekme {
  padding: var(--b-3) var(--b-4); font-size: var(--ts-md); font-weight: 600;
  color: var(--metin-2); border-bottom: 2px solid transparent; margin-bottom: -1px;
  white-space: nowrap; transition: color var(--gecis-hizli), border-color var(--gecis-hizli);
}
.sekme:hover { color: var(--metin); text-decoration: none; }
.sekme[aria-selected="true"] { color: var(--marka); border-bottom-color: var(--marka); font-weight: 600; }
.sekme-panel[hidden] { display: none; }

/* ---------- 16. ADIM GÖSTERGESİ ---------- */
.adimlar { display: flex; align-items: center; gap: var(--b-2); margin-bottom: var(--b-6); flex-wrap: wrap; }
.adim { display: flex; align-items: center; gap: var(--b-2); font-size: var(--ts-sm); color: var(--metin-3); }
.adim__no {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--yuzey-3); color: var(--metin-3); font-weight: 600; font-size: var(--ts-xs); flex: 0 0 auto;
}
.adim.aktif { color: var(--metin); font-weight: 600; }
.adim.aktif .adim__no { background: var(--marka); color: var(--marka-uzeri); }
.adim.tamam { color: var(--metin-2); cursor: pointer; }
.adim.tamam .adim__no { background: var(--basari); color: #fff; }
.adim__cizgi { flex: 1; min-width: 20px; height: 2px; background: var(--cizgi); border-radius: 2px; }
.adim__cizgi.dolu { background: var(--basari); }

/* ---------- 17. İLERLEME ---------- */
.ilerleme { height: 8px; background: var(--yuzey-3); border-radius: var(--r-tam); overflow: hidden; }
.ilerleme__dolu { height: 100%; background: var(--marka-gradyan); border-radius: var(--r-tam); transition: width var(--gecis-orta); }
.ilerleme__dolu--ai { background: var(--ai-gradyan); }
.ilerleme__dolu--uyari { background: var(--uyari); }
.ilerleme__dolu--hata { background: var(--hata); }
.ilerleme__dolu--basari { background: var(--basari); }
.ilerleme--ince { height: 5px; }

/* ---------- 18. MODAL ---------- */
.modal-perde {
  position: fixed; inset: 0; background: rgba(16,24,40,.55);
  display: grid; place-items: center; z-index: 100; padding: var(--b-4);
  animation: bel var(--gecis-orta);
}
@keyframes bel { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: var(--yuzey); border-radius: var(--r-lg); box-shadow: var(--golge-3);
  width: 100%; max-width: 520px; max-height: 88vh; display: flex; flex-direction: column;
  animation: yuksel var(--gecis-orta);
}
@keyframes yuksel { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal--genis { max-width: 780px; }
.modal__basi { padding: var(--b-5); border-bottom: 1px solid var(--cizgi); display: flex; align-items: center; gap: var(--b-3); }
.modal__basi h2 { font-size: var(--ts-lg); flex: 1; }
.modal__govde { padding: var(--b-5); overflow-y: auto; flex: 1; }
.modal__alt { padding: var(--b-4) var(--b-5); border-top: 1px solid var(--cizgi); display: flex; justify-content: flex-end; gap: var(--b-2); }

/* ---------- 19. TOAST ---------- */
.toast-alan { position: fixed; bottom: var(--b-6); inset-inline-end: var(--b-6); z-index: 200; display: flex; flex-direction: column; gap: var(--b-2); }
.toast {
  background: var(--notr-800); color: #fff; padding: var(--b-3) var(--b-4);
  border-radius: var(--r-md); box-shadow: var(--golge-3); font-size: var(--ts-sm);
  display: flex; align-items: center; gap: var(--b-3); max-width: 380px;
  animation: kaydir var(--gecis-orta);
}
@keyframes kaydir { from { transform: translateX(20px); opacity: 0; } to { transform: none; opacity: 1; } }
.toast--basari .toast__ikon { color: #4ADE80; }
.toast--hata   .toast__ikon { color: #FCA5A5; }
.toast--bilgi  .toast__ikon { color: #93C5FD; }
[data-tema="koyu"] .toast { background: var(--yuzey-3); border: 1px solid var(--cizgi); }
@media (max-width: 600px) { .toast-alan { inset-inline: var(--b-4); bottom: var(--b-4); } .toast { max-width: none; } }

/* ---------- 20. AÇILIR MENÜ ---------- */
.menu-sar { position: relative; }
.menu {
  position: absolute; top: calc(100% + 6px); inset-inline-end: 0; min-width: 210px;
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-md);
  box-shadow: var(--golge-3); padding: var(--b-1); z-index: 40;
}
.menu[hidden] { display: none; }
.menu__oge {
  display: flex; align-items: center; gap: var(--b-3); width: 100%;
  padding: 7px var(--b-3); border-radius: var(--r-sm); font-size: var(--ts-sm);
  color: var(--metin); text-align: start;
}
.menu__oge:hover { background: var(--yuzey-3); text-decoration: none; }
.menu__oge--tehlike { color: var(--hata); }
.menu__ayrac { height: 1px; background: var(--cizgi); margin: var(--b-1) 0; }
.menu__baslik { padding: var(--b-2) var(--b-3); font-size: var(--ts-xs); color: var(--metin-3); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }

/* ---------- 21. BOŞ DURUM ---------- */
.bos { text-align: center; padding: var(--b-12) var(--b-6); }
.bos__ikon {
  width: 52px; height: 52px; border-radius: var(--r-lg); margin: 0 auto var(--b-4);
  background: var(--yuzey-3); color: var(--metin-3); display: grid; place-items: center;
}
.bos h3 { font-size: var(--ts-lg); margin-bottom: var(--b-2); }
.bos p { color: var(--metin-2); font-size: var(--ts-sm); max-width: 40ch; margin: 0 auto var(--b-4); }

/* ---------- 22. İSKELET YÜKLEYİCİ ---------- */
.iskelet {
  background: linear-gradient(90deg, var(--yuzey-3) 25%, var(--cizgi) 37%, var(--yuzey-3) 63%);
  background-size: 400% 100%; animation: parla 1.3s ease-in-out infinite;
  border-radius: var(--r-sm); height: 14px;
}
@keyframes parla { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.iskelet--satir { margin-bottom: var(--b-2); }
.iskelet--baslik { height: 22px; width: 42%; margin-bottom: var(--b-4); }

/* ---------- 23. SAYFALAMA ---------- */
.sayfalama { display: flex; align-items: center; justify-content: space-between; gap: var(--b-4); padding: var(--b-3) var(--b-4); border-top: 1px solid var(--cizgi); flex-wrap: wrap; }
.sayfalama__bilgi { font-size: var(--ts-sm); color: var(--metin-2); }
.sayfalama__nav { display: flex; gap: var(--b-1); }
.sayfalama__dugme {
  min-width: 32px; height: 32px; padding: 0 8px; border-radius: var(--r-sm);
  font-size: var(--ts-sm); color: var(--metin-2); display: grid; place-items: center;
  border: 1px solid transparent;
}
.sayfalama__dugme:hover:not(:disabled) { background: var(--yuzey-3); color: var(--metin); }
.sayfalama__dugme[aria-current="true"] { background: var(--marka); color: var(--marka-uzeri); font-weight: 600; }
.sayfalama__dugme:disabled { opacity: .35; cursor: not-allowed; }

/* ---------- 24. FİLTRE ÇUBUĞU ---------- */
.filtre { display: flex; gap: var(--b-2); align-items: center; flex-wrap: wrap; margin-bottom: var(--b-4); }
.filtre__ara { position: relative; flex: 1; min-width: 200px; max-width: 340px; }
.filtre__ara input { width: 100%; padding: 8px var(--b-3) 8px 34px; border: 1px solid var(--cizgi-guclu); border-radius: var(--r-md); background: var(--yuzey); font-size: var(--ts-sm); }
.filtre__ara .ikon { position: absolute; inset-inline-start: 10px; top: 50%; transform: translateY(-50%); color: var(--metin-3); }
.filtre select { padding: 8px var(--b-3); border: 1px solid var(--cizgi-guclu); border-radius: var(--r-md); background: var(--yuzey); font-size: var(--ts-sm); color: var(--metin); cursor: pointer; }

/* ---------- 25. ZAMAN TÜNELİ ---------- */
.tunel { position: relative; padding-inline-start: var(--b-8); }
.tunel::before { content: ""; position: absolute; inset-inline-start: 13px; top: 6px; bottom: 6px; width: 2px; background: var(--cizgi); }
.tunel__oge { position: relative; padding-bottom: var(--b-5); }
.tunel__oge:last-child { padding-bottom: 0; }
.tunel__nokta {
  position: absolute; inset-inline-start: calc(-1 * var(--b-8) + 6px); top: 2px;
  width: 16px; height: 16px; border-radius: 50%; background: var(--yuzey);
  border: 2px solid var(--cizgi-guclu); display: grid; place-items: center;
}
.tunel__nokta--basari { border-color: var(--basari); background: var(--basari); }
.tunel__nokta--hata { border-color: var(--hata); background: var(--hata); }
.tunel__nokta--marka { border-color: var(--marka); background: var(--marka); }
.tunel__zaman { font-size: var(--ts-xs); color: var(--metin-3); }
.tunel__metin { font-size: var(--ts-sm); margin-top: 2px; }

/* ---------- 26. BİLGİ KUTUSU ---------- */
.kutu { border-radius: var(--r-md); padding: var(--b-4); font-size: var(--ts-sm); display: flex; gap: var(--b-3); border: 1px solid; flex-wrap: wrap; }
/* İnce varyant: tek satır, dikey boşluk yarı yarıya. Panelde uyarılar için. */
.kutu--ince { padding: 9px var(--b-3); align-items: center; flex-wrap: nowrap; }
.kutu--ince .kutu__ic { display: flex; align-items: baseline; gap: var(--b-2); min-width: 0; }
.kutu--ince strong { display: inline; margin: 0; white-space: nowrap; }
.kutu--ince .kutu__ic > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kutu--ince .btn { flex: 0 0 auto; margin-inline-start: auto; }
@media (max-width: 780px) {
  .kutu--ince { flex-wrap: wrap; }
  .kutu--ince .kutu__ic { flex-wrap: wrap; }
  .kutu--ince .kutu__ic > span { white-space: normal; }
}
.kutu > .btn { margin-inline-start: auto; }
@media (max-width: 680px) { .kutu > .btn { margin-inline-start: 0; width: 100%; } }
.kutu .ikon { flex: 0 0 auto; margin-top: 1px; }
.kutu__ic { flex: 1; }
.kutu strong { display: block; margin-bottom: 3px; }
.kutu--bilgi  { background: var(--bilgi-zayif);  border-color: var(--bilgi);  color: var(--metin); }
.kutu--uyari  { background: var(--uyari-zayif);  border-color: var(--uyari);  color: var(--metin); }
.kutu--hata   { background: var(--hata-zayif);   border-color: var(--hata);   color: var(--metin); }
.kutu--basari { background: var(--basari-zayif); border-color: var(--basari); color: var(--metin); }
.kutu--bilgi .ikon  { color: var(--bilgi); }
.kutu--uyari .ikon  { color: var(--uyari); }
.kutu--hata .ikon   { color: var(--hata); }
.kutu--basari .ikon { color: var(--basari); }

/* ---------- 27. KOD / JSON BLOK ---------- */
.kod {
  font-family: var(--font-mono); font-size: var(--ts-sm); line-height: 1.55;
  background: var(--notr-900); color: #E8ECF2; padding: var(--b-4);
  border-radius: var(--r-md); overflow-x: auto; white-space: pre;
}
[data-tema="koyu"] .kod { background: var(--zemin); border: 1px solid var(--cizgi); }
code.satir-ici { font-family: var(--font-mono); font-size: .92em; background: var(--yuzey-3); padding: 1px 5px; border-radius: 4px; color: var(--metin); }

/* ---------- 28. İPUCU (tooltip) ---------- */
.ipucu { position: relative; }
.ipucu::after {
  content: attr(data-ipucu); position: absolute; bottom: calc(100% + 7px); left: 50%;
  transform: translateX(-50%); background: var(--notr-800); color: #fff;
  padding: 5px 9px; border-radius: var(--r-sm); font-size: var(--ts-xs);
  white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--gecis-hizli); z-index: 50;
}
.ipucu:hover::after { opacity: 1; }

/* ---------- 29. AYRAÇ ---------- */
.ayrac { height: 1px; background: var(--cizgi); margin: var(--b-5) 0; border: none; }

/* ---------- 30. TAKVİM ---------- */
.takvim { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--cizgi); border: 1px solid var(--cizgi); border-radius: var(--r-lg); overflow: hidden; }
/* min-width:0 ZORUNLU — grid öğeleri varsayılan min-width:auto ile içeriğinin
   altına küçülemez. Uzun bir gönderi başlığı hücreyi şişirir, 7 sütunluk ızgara
   kabın dışına taşar ve .takvim üzerindeki overflow:hidden taşmayı MASKELER:
   ekranda yalnızca ilk 3-4 gün görünür, hata sessizce gizlenir. */
.takvim__gun-basi { background: var(--yuzey-2); padding: var(--b-2); text-align: center; font-size: var(--ts-xs); font-weight: 600; color: var(--metin-3); text-transform: uppercase; letter-spacing: .04em; min-width: 0; }
/* min-height 108 -> 116: oge yuksekligi dokunma hedefi icin 21 -> 25px
   cikarildi, hucrede 3 oge + gun numarasi hala rahat siğiyor. */
.takvim__hucre { background: var(--yuzey); min-height: 116px; padding: 6px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.takvim__hucre--disay { background: var(--yuzey-2); }
.takvim__hucre--bugun { background: var(--marka-zayif); }
.takvim__gun { font-size: var(--ts-xs); font-weight: 600; color: var(--metin-3); }
.takvim__hucre--bugun .takvim__gun { color: var(--marka); }
.takvim__oge {
  /* padding 3 -> 5: 15px satir + 10px dolgu = 25px, WCAG 2.5.8'in
     24px dokunma hedefi alt siniri karsilaniyor. */
  font-size: var(--ts-xs); line-height: 15px; padding: 5px 6px; border-radius: 5px;
  background: var(--yuzey-3); color: var(--metin); cursor: pointer;
  display: flex; align-items: center; gap: 4px; overflow: hidden;
  min-width: 0; width: 100%; text-align: start;
  /* Durum rengi DOYGUN sol şeritten okunur. Koyu temada zayıf renkler
     rgba(...,.16) yıkamasına dönüşüyor ve dört durum birbirinden ayırt
     edilemiyordu; şerit iki temada da net kalır. */
  border-inline-start: 3px solid var(--cizgi-guclu);
}
.takvim__oge:hover { background: var(--cizgi); }
.takvim__oge span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* Son span (başlık) kısılabilir olan; ikon ve saat sabit genişlikte kalır */
.takvim__oge > span:last-child { flex: 1 1 auto; }
.takvim__oge--onayli   { background: var(--basari-zayif); border-inline-start-color: var(--basari); }
.takvim__oge--bekleyen { background: var(--uyari-zayif);  border-inline-start-color: var(--uyari); }
.takvim__oge--hata     { background: var(--hata-zayif);   border-inline-start-color: var(--hata); }
/* Dar ekranda 7 sütun × ~48px kalıyor ve başlıklar tek harfe düşüyordu
   ("M", "S.") — bilgi taşımayan bir takvim. Çözüm: ızgarayı KENDİ kabında
   yatay kaydırılabilir yapmak (tablolarda kullanılan .tablo-sar deseni).
   Belge gövdesi taşmaz, bilgi de kaybolmaz. */
.takvim-sar { overflow-x: auto; }
@media (max-width: 780px) {
  .takvim__hucre { min-height: 72px; }
  .takvim-sar .takvim { min-width: 660px; }
  .takvim-sar .takvim--hafta { min-width: 700px; }
}

/* Sürükle-bırak: hedef hücre ve taşınan öğe geri bildirimi.
   Sürükleme tek başına erişilebilir değildir; her öğede klavyeyle
   ulaşılabilen "Tarihi değiştir" yolu da bulunur (bkz. takvim.js). */
.takvim__oge[draggable="true"] { cursor: grab; }
.takvim__oge--tasiniyor { opacity: .38; }
.takvim__hucre--hedef { background: var(--marka-zayif); box-shadow: inset 0 0 0 2px var(--marka); }
.takvim__daha { font-size: var(--ts-xs); color: var(--metin-3); padding: 1px 6px; text-align: start; }
.takvim__daha:hover { color: var(--marka); }
/* Hafta görünümü SAAT IZGARASIDIR: soldaki dar sütun saat bandı, yanındaki
   7 sütun günler. Ay görünümü "o gün ne çıkıyor", hafta görünümü "kaçta
   çıkıyor" sorusuna cevap verir. Gün başına tek uzun kutu bırakmak
   ekranın yarısını boş bırakıyordu. */
.takvim--hafta { grid-template-columns: 58px repeat(7, 1fr); }
.takvim--hafta .takvim__hucre { min-height: 46px; }
.takvim__saat {
  background: var(--yuzey-2); padding: 4px 6px; text-align: end;
  font-family: var(--font-mono); font-size: 10px; color: var(--metin-3);
  min-width: 0; font-variant-numeric: tabular-nums;
}
.takvim__kose { background: var(--yuzey-2); }

/* Planlanmayı bekleyen içerik çipi — takvime sürüklenir */
.plan-cip {
  display: flex; align-items: center; gap: var(--b-2); width: 100%;
  border: 1px solid var(--cizgi-guclu); border-inline-start: 3px solid var(--basari);
  border-radius: var(--r-md); padding: 7px var(--b-3); background: var(--yuzey);
  cursor: grab; text-align: start; font: inherit;
}
.plan-cip:hover { border-color: var(--marka); background: var(--yuzey-2); }
.plan-cip--tasiniyor { opacity: .38; }
.plan-cip__ad { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 31. SVG İKON ---------- */
.ikon { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.ikon--sm { width: 15px; height: 15px; }
.ikon--lg { width: 22px; height: 22px; }
.ikon--xl { width: 28px; height: 28px; }
.ikon--dolu { fill: currentColor; stroke: none; }

/* ---------- 32. DAKTİLO İMLECİ ---------- */
.daktilo::after { content: "▌"; color: var(--marka); animation: yanip 1s step-end infinite; }
@keyframes yanip { 50% { opacity: 0; } }

/* ==========================================================================
   RTL HAZIRLIĞI — MODÜL 7'NİN 7. İŞİ
   --------------------------------------------------------------------------
   Satır ekseni (inline) özellikleri MANTIKSAL karşılıklarına çevrildi:
     margin-left        → margin-inline-start
     padding-left       → padding-inline-start
     border-left/right  → border-inline-start/end
     left / right       → inset-inline-start / inset-inline-end
     text-align:left/right → text-align:start / end

   ⚖️ BLOK EKSENİ (top / bottom / margin-top …) DOKUNULMADI ve bu bilinçli:
   RTL'de değişen yalnızca yatay yöndür. Dikey özellikleri de mantıksala
   çevirmek okunabilirliği düşürür, hiçbir şey kazandırmaz ve dikey yazı
   sistemleri bu ürünün hedefinde yok.

   ⚠️ RTL'DE HÂLÂ EL DEĞMESİ GEREKEN TEK YER: `transform: translateX(16px)`
   (.anahtar input:checked + .anahtar__kutu::after). Anahtarın topuzu
   mantıksal başlangıçtan başlıyor ama HAREKETİ transform'la yapılıyor ve
   transform'un mantıksal karşılığı YOKTUR. RTL açıldığında bu tek satır
   `[dir="rtl"]` altında `translateX(-16px)` olacak. Burada yazılı olması,
   o günün "neden bu topuz ters tarafa kayıyor" aramasını gereksiz kılıyor.

   ⚠️ `.sag` sınıf adı ("sağ") artık `text-align: end` üretiyor; ad fiziksel,
   davranış mantıksal. Yeniden adlandırmak bu modülün kapsamı değildi ve
   sınıf 4 yerde kullanılıyor; TasarimSistemiTestleri adı değil DAVRANIŞI
   ölçüyor.

   🔴 TEK MUAFİYET — `[data-ipucu]::after { left: 50%; transform: translateX(-50%) }`
   Bu satır ÇEVRİLMEDİ ve çevrilmemeli. `left:50%` + `translateX(-50%)`
   ORTALAMA deseni; %50 kabın ortasıdır ve yön değişince yeri değişmez.
   `inset-inline-start: 50%` yazmak RTL'de kuralı BOZARDI: mantıksal başlangıç
   sağ kenar olur, öğenin SAĞ kenarı ortaya oturur ve `translateX(-50%)` onu
   bir yarım genişlik daha sola kaydırır — ipucu balonu ortadan kayar.
   Yani burada mantıksal özellik "daha doğru" değil, YANLIŞ olurdu.
   Muafiyet TasarimSistemiTestleri içinde adıyla tanımlı.
   ========================================================================== */