/* ==========================================================================
   kabuk.css — ÜRÜNE ÖZGÜ EKLER

   🔴 NEDEN AYRI DOSYA, NEDEN app.css'e EKLENMİYOR:
   app.css prototipten SADIK BİR KOPYADIR ve öyle kalmalı —
   TasarimSistemiTestleri iki dosyayı karşılaştırıp marka sapmasını ölçüyor.
   Ürünün ihtiyaç duyduğu ama prototipte karşılığı olmayan sınıflar buraya
   yazılır; böylece "kopya mı yoksa yeni mi" sorusu dosya adından cevaplanır.

   ⚠️ BURAYA YAZILAN HER SINIF, PROTOTİPTE OLMAYAN BİR DURUMU ANLATIR.
   Prototip 33 sayfanın hepsi yazılmış hâlini gösteriyordu; ürün ise modül
   modül ilerliyor ve "bu ekran henüz yok" diye bir hâli var.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HENÜZ YAZILMAMIŞ MENÜ MADDESİ

   Bağlantı DEĞİL <span> olarak çiziliyor (bkz. _Kenar.cshtml): tıklanamaz,
   sekmeyle odaklanılamaz, ekran okuyucuya bağlantı diye duyurulmaz.
   Görsel olarak da farklı olmalı — aynı görünüp tıklanmayan bir madde,
   kullanıcının bozuk sandığı bir arayüz üretir.
   -------------------------------------------------------------------------- */
.kenar__link--yakinda {
  opacity: .55;
  cursor: default;
}

.kenar__link--yakinda:hover {
  /* Vurgu YOK: hover tepkisi "tıklanabilir" sinyalidir ve burada yalan olur. */
  background: transparent;
  color: inherit;
}

.kenar__link--yakinda .kenar__rozet {
  /* Modül numarası rozeti: "yakında" demek yetmez, NE ZAMAN sorusunun
     cevabı da ekranda olmalı (Faz 4'ün "neden kapalı ve nerede açılıyor"
     kuralının menüdeki hâli). */
  margin-inline-start: auto;
  font-size: 10px;
  letter-spacing: .03em;
  font-family: var(--font-mono);
}

/* --------------------------------------------------------------------------
   KENAR ÇUBUĞU KREDİ KUTUSU

   Prototipte satır içi stillerle çiziliyordu (layout.js → krediKutusuHtml).
   Satır içi stil hem tema değişimine kapalı hem de tekrar kullanılamaz;
   sınıfa taşındı.
   -------------------------------------------------------------------------- */
.kenar__kredi {
  background: var(--marka-zayif);
  border: 1px solid var(--marka-cizgi);
  border-radius: var(--r-lg);
  padding: var(--b-3);
}

/* --------------------------------------------------------------------------
   AÇILIR MENÜNÜN BOŞ DURUMU

   Bildirim menüsü bugün boş (kayıtlar Modül 18). Boş bir kutu açmak
   "bozuk mu?" sorusunu doğurur; boş durum NE OLDUĞUNU ve NE ZAMAN
   dolacağını söylemeli — prototipin Faz 7'de kapattığı "sessiz boş durum"
   bulgusunun aynısı.
   -------------------------------------------------------------------------- */
.menu__bos {
  padding: var(--b-3) var(--b-4) var(--b-4);
  font-size: var(--ts-sm);
  color: var(--metin-2);
  line-height: 1.5;
  max-width: 260px;
}

.menu__bos .minik {
  display: block;
  margin-top: 4px;
}

/* --------------------------------------------------------------------------
   ÜST BARDAKİ TEMA FORMU

   Tema düğmesi bir <form> içinde (JavaScript kapalıyken de çalışsın diye).
   Form varsayılan olarak blok öğedir ve üst bar hizasını bozar.
   -------------------------------------------------------------------------- */
.ust__sag form {
  display: inline-flex;
  margin: 0;
}

/* --------------------------------------------------------------------------
   TEMA İKONU

   İki ikon da çiziliyor, görüneni CSS seçiyor (bkz. _UstBar.cshtml).
   Böylece ikon temayla AYNI ANDA değişiyor; JavaScript'in SVG kurması
   gerekmiyor ve anti-flash bloğuyla çelişki doğmuyor.

   Koyu temadayken "güneş" (açığa geç), açık temadayken "ay" (koyuya geç).
   -------------------------------------------------------------------------- */
.tema-ikon { display: none; }

[data-tema="koyu"] .tema-ikon--gunes { display: inline-flex; }
[data-tema="acik"] .tema-ikon--ay    { display: inline-flex; }

/* data-tema hiç yoksa (JS ve çerez ikisi de devre dışı) bir ikon görünmeli;
   aksi hâlde düğme bomboş bir kare olur. */
html:not([data-tema]) .tema-ikon--gunes { display: inline-flex; }

/* Giriş ekranının dil seçicisi. Kartın ÜSTÜNDE ve sağa yaslı: formun
   akışını kesmiyor ama arayanın ilk baktığı yerde (sağ üst) duruyor —
   kabuktaki dil düğmesiyle aynı konum alışkanlığı. */
.auth__dil {
  display: flex;
  gap: var(--b-1);
  justify-content: flex-end;
  margin-bottom: var(--b-3);
}

.auth__dil [aria-current="true"] {
  color: var(--marka);
  font-weight: 600;
}

/* ---------- MODUL 9: sunucu tarafinda cizilen sekmeler ----------
   app.css `.sekme[aria-selected="true"]` bekliyor cunku prototipte sekmeler
   JS ile yonetilen <button role="tab"> ogeleriydi. Uründe sekme bir
   BAGLANTI (?sekme=... ile derin baglantilanabiliyor ve geri tusu calisiyor)
   ve bir <a> uzerinde aria-selected GECERSIZ ARIA'dir; dogrusu
   aria-current="page".

   Kural bu dosyaya yazildi: app.css SADIK KOPYA'dir ve TasarimSistemiTestleri
   onu prototiple karsilastiriyor. Urune ozgu ekler daima buraya. */
.sekme[aria-current="page"] {
  color: var(--marka);
  border-bottom-color: var(--marka);
}

/* ---------------------------------------------------------------------------
   <select> GENISLIGI — Modul 19 satir 4'te OLCULEREK bulundu.

   Tasarim sisteminde `.secim` bir KART/CIP stilidir (display:flex, .secili
   durumu, cursor:pointer) ve prototipte tiklanabilir secim kartlarina
   uygulaniyor. Urun onu <select> ogelerine de giydiriyor (Fatura, Paketim ve
   simdi /sistem/kullanicilar) ama `.secim` GENISLIK VERMIYOR — kardesi
   `.girdi` ise `width:100%` tasiyor.

   Bir <select>'in icsel genisligi EN UZUN <option>'una gore hesaplanir. Sabit
   secenekli sureclerde (yil, durum) bu gorunmez; VERIDEN TURETILEN
   seceneklerde (kiraci adlari) gorunur hale gelir.

   OLCULDU: /sistem/kullanicilar ekraninda kiraci suzgeci 1550px genisleyip
   belgeyi 1043px tasirdi. Izgara hucresi `min-width:0` tasidigi halde tasma
   olustu, cunku sorun hucrenin kuculememesi degil COCUGUN buyumesiydi.

   `app.css` SADIK KOPYA oldugu icin duzeltme buraya yazildi. Kural yeni degil:
   ayni ayrim `.sekme[aria-current]` icin de uygulandi (yukarida).
   --------------------------------------------------------------------------- */
select.secim {
  width: 100%;
  max-width: 100%;
}

/* ==========================================================================
   KAMUYA AÇIK BELGE KABUĞU — gizlilik politikası ve kullanım şartları

   🔴 BURAYA YAZILIYOR, app.css'e DEĞİL: app.css prototipin SADIK KOPYASI ve
   düzenlenmiyor (Modül 6'nın kuralı). Bu sınıflar ürüne özgü.

   ⚖️ Okuma genişliği 72ch: uzun hukuki metin tam genişlikte satırlarda
   okunmaz. Ölçüt tipografi kaynaklarının standart aralığı (60-80 karakter).
   ========================================================================== */
.belge { min-height: 100vh; display: flex; flex-direction: column; background: var(--zemin); }

.belge__tepe {
  display: flex; align-items: center; justify-content: space-between; gap: var(--b-4);
  padding: var(--b-4) var(--b-5); border-bottom: 1px solid var(--cizgi);
  background: var(--yuzey); flex-wrap: wrap;
}
.belge__marka { display: inline-flex; align-items: center; text-decoration: none; color: var(--metin); }
.belge__dil { display: flex; gap: 6px; }

.belge__govde {
  flex: 1 1 auto; width: 100%; max-width: 72ch;
  margin-inline: auto; padding: var(--b-8) var(--b-5) var(--b-8);
}
.belge__govde h1 { margin: 0 0 var(--b-3); }
.belge__govde h2 {
  margin: var(--b-8) 0 var(--b-3); font-size: var(--ts-lg); line-height: var(--lh-lg);
  padding-top: var(--b-4); border-top: 1px solid var(--cizgi);
}
.belge__govde h2:first-of-type { border-top: 0; padding-top: 0; }
.belge__govde p { margin: 0 0 var(--b-3); color: var(--metin-2); }
/* 🔴 list-style ACIKCA yaziliyor: app.css listeleri sifirliyor ve imsiz bir
   liste hukuki metinde SAYILABILIRLIGI kaybettirir ("asagidaki uc sarttan
   biri" diyen bir madde, imler olmadan dogrulanamaz). */
.belge__govde ul { margin: 0 0 var(--b-3); padding-inline-start: var(--b-6); color: var(--metin-2); list-style: disc; }
.belge__govde ul li::marker { color: var(--metin-3); }
.belge__govde li { margin: var(--b-2) 0; }

/* Künye — tanım listesi görünümü */
.belge__kunye {
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-lg);
  padding: var(--b-4); margin: var(--b-4) 0;
}
.belge__kunye div { display: flex; gap: var(--b-3); padding: 5px 0; flex-wrap: wrap; }
.belge__kunye dt { flex: 0 0 auto; min-width: 160px; color: var(--metin-3); font-size: var(--ts-sm); margin: 0; }
.belge__kunye dd { margin: 0; flex: 1 1 220px; min-width: 0; }

.belge__dip {
  border-top: 1px solid var(--cizgi); padding: var(--b-4) var(--b-5);
  text-align: center; color: var(--metin-3); font-size: var(--ts-sm);
}
.belge__dipAyrac { margin: 0 var(--b-2); color: var(--cizgi-guclu); }

@media (max-width: 560px) {
  .belge__govde { padding: var(--b-5) var(--b-4) var(--b-8); }
  .belge__kunye dt { min-width: 0; flex: 1 1 100%; }
}

/* --------------------------------------------------------------------------
   WCAG 2.5.8 — BAĞIMSIZ KİMLİK BAĞLANTILARININ DOKUNMA HEDEFİ
   --------------------------------------------------------------------------
   Modül 21 satır 6'da ölçüldü: "Şifremi unuttum" 91×18, "Girişe dön" 58×16 —
   ikisi de 24px'lik asgari hedefin altında. Sebep `.kucuk` sınıfının yazıyı
   küçültmesi; genişlik zaten yeterliydi, eksik olan YÜKSEKLİKTİ.

   ⚖️ `.auth__kart a` gibi geniş bir seçici KULLANILMADI: o, cümle içine gömülü
   bağlantıları da blok hâline getirirdi. WCAG 2.5.8'in satır içi istisnası tam
   olarak onları muaf tutuyor — geniş seçici, kuralın muaf tuttuğu şeyi bozardı.

   ⚖️ Kural `kabuk.css`'te, `app.css`'te DEĞİL: app.css prototipin SADIK
   KOPYASI ve ürüne özgü ekler buraya yazılır (Modül 6'nın kuralı).
   -------------------------------------------------------------------------- */
.auth__baglanti {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* --------------------------------------------------------------------------
   MODUL 12 — icerik uretim sihirbazi.

   Iki sinif da URUNE OZGU ve bu yuzden kabuk.css'te: app.css prototipin
   SADIK KOPYASI (Modul 6'nin kurali).

   KUNYE — sade tanim listesi (dt/dd), sarmalayici div ISTEMEZ.
   Kardesi `.belge__kunye` ONCEDEN VARDI ama yapisi FARKLI: orada dt/dd
   ciftleri birer <div> icinde. Ikisini birlestirmek Belge gorunumlerini
   (31 tarayici kontrolu) degistirmek demekti; ayri tutuldu ve gerekce
   burada yazili.
   -------------------------------------------------------------------------- */
.kunye {
  margin: 0;
  padding: 0;
}

.kunye dt {
  color: var(--metin-3);
  font-size: var(--ts-sm);
  margin: 0 0 2px;
}

.kunye dd {
  margin: 0 0 var(--b-3);
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Form dugmelerinin satiri. `gap` ile ayriliyor; margin yerine gap,
   dugme sayisi degistiginde bosluklarin bozulmamasi icin. */
.form__eylem {
  display: flex;
  gap: var(--b-3);
  align-items: center;
  flex-wrap: wrap;
  margin-top: var(--b-5);
}

/* ── 12.9 hashtag listesi ────────────────────────────────────────────
   Rozetler sarmalı. `app.css` SADIK KOPYA olduğu için ürüne özgü bu
   kural buraya yazılıyor (Modül 6'nın kuralı).
   ⚠️ `.rozetler` diye bir sınıf app.css'te YOKTU — uydurulan sınıf hata
   vermez, SESSİZCE stilsiz render eder; ölçülerek eklendi.            */
.rozetler {
  display: flex;
  flex-wrap: wrap;
  gap: var(--b-2);
}

/* Bulgu satırları alt alta: `<span>` varsayılan inline olduğu için
   üst üste binerlerdi. Kayıtlı `.ilerleme__dolu` tuzağının aynı sınıfı
   (display:inline kalan elemana kutu kuralları HİÇ uygulanmaz).        */
.yasakli-satir {
  display: block;
}

/* ══════════════════════════════════════════════════════════════════════
   ANASAYFA — kamuya açık tanıtım sayfası
   ══════════════════════════════════════════════════════════════════════
   `app.css` SADIK KOPYA olduğu için ürüne özgü bu kurallar buraya
   yazılıyor (Modül 6'nın kuralı). Prototipte tanıtım sayfası YOK, yani
   bu düzenin kopyalanacağı bir kaynak da yok.                          */

.tanitim__tepe {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--yuzey-2);
  border-block-end: 1px solid var(--cizgi);
}

.tanitim__tepeIc,
.tanitim__dipIc,
.tanitim__ic {
  max-width: 68rem;
  margin-inline: auto;
  padding-inline: var(--b-5);
}

.tanitim__ic--dar { max-width: 46rem; }

.tanitim__tepeIc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--b-4);
  min-height: 4rem;
  flex-wrap: wrap;
}

.tanitim__tepeSag {
  display: flex;
  align-items: center;
  gap: var(--b-3);
  flex-wrap: wrap;
}

/* Marka işareti anasayfada <span>: bağlantı değil, çünkü zaten buradayız. */
.tanitim__marka { display: inline-flex; align-items: center; }

.tanitim__kahraman {
  padding-block: clamp(var(--b-6), 8vw, var(--b-10));
  background: var(--marka-gradyan);
  color: #fff;
}

/* 🔴 Gradyan zeminde metin rengi TOKEN'DAN GELMİYOR, açıkça beyaz:
   token'lar temaya göre değişiyor ve açık temada koyu metne dönüp
   gradyanın üstünde okunamaz hâle gelirdi.                             */
.tanitim__kahraman h1,
.tanitim__kahraman p { color: #fff; }

.tanitim__slogan {
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  line-height: 1.15;
  margin: 0 0 var(--b-4);
  max-width: 34ch;
}

.tanitim__sloganAlt {
  font-size: 1.05rem;
  max-width: 56ch;
  opacity: .92;
  margin: 0 0 var(--b-5);
}

.tanitim__cta {
  display: flex;
  gap: var(--b-3);
  flex-wrap: wrap;
  margin-block-end: var(--b-3);
}

.tanitim__cta--dip { margin-block-start: var(--b-5); margin-block-end: 0; }

.tanitim__bolum { padding-block: var(--b-8); }
.tanitim__bolum--vurgu { background: var(--yuzey-2); }
.tanitim__bolum h2 { margin-block-end: var(--b-5); }

.tanitim__ikon { color: var(--marka); margin-block-end: var(--b-3); }
.tanitim__ozellikBaslik { margin: 0 0 var(--b-2); font-size: 1.05rem; }

/* Beş adım — sayı sütunu + gövde. `<ol>` olduğu için sıra ekran
   okuyucuya da geçiyor; sayı görsel olarak ayrıca basılıyor.           */
.tanitim__adimlar { list-style: none; margin: 0; padding: 0; }

.tanitim__adim {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--b-4);
  padding-block: var(--b-4);
  border-block-end: 1px solid var(--cizgi);
  /* min-width:0 — kayıtlı ızgara tuzağı: gövde içeriğinin altına
     küçülemeyen bir hücre belgeye yatay kaydırma ekler.                */
  min-width: 0;
}

.tanitim__adim:last-child { border-block-end: 0; }

.tanitim__adimNo {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--marka-zayif);
  color: var(--marka);
  font-weight: 700;
}

.tanitim__adimGovde { min-width: 0; }

.tanitim__adimBaslik {
  display: flex;
  align-items: center;
  gap: var(--b-3);
  flex-wrap: wrap;
  margin: 0 0 var(--b-2);
  font-size: 1.02rem;
}

/* ⚠️ `data-hazir` SOLGUNLASTIRMASI KALDIRILDI - kullanici karari
   (2026-09-03): modul durumu reklam sayfasinda gosterilmiyor.          */

.tanitim__bolum--kapanis { background: var(--yuzey-2); text-align: center; }
.tanitim__kapanisBaslik { margin-block-end: var(--b-3); }
.tanitim__bolum--kapanis .tanitim__cta { justify-content: center; }

.tanitim__dip {
  border-block-start: 1px solid var(--cizgi);
  padding-block: var(--b-5);
}

.tanitim__dipIc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--b-4);
  flex-wrap: wrap;
}

.tanitim__dipBaglantilar {
  display: flex;
  gap: var(--b-4);
  flex-wrap: wrap;
}

/* 🔴 GRADYAN ÜSTÜNDE DÜĞME HİYERARŞİSİ TERSİNE DÖNÜYOR.
   Ölçüldü (ekran görüntüsüyle): `.btn--birincil` mor gradyanın üstünde
   mor kalıyor ve SOLGUN görünüyor; yanındaki koyu `.btn--ikincil` ondan
   daha çok öne çıkıyor. Yani sayfanın asıl eylem çağrısı, ikincil olanın
   gerisinde kalıyordu. Kusuru hiçbir kontrol göremezdi — düğme var,
   tıklanabilir, kontrastı da yeterli; yanlış olan YALNIZCA hiyerarşi.
   Çözüm gradyan üstünde ters çevirmek: beyaz zemin, marka rengi metin.  */
.tanitim__kahraman .btn--birincil {
  background: #fff;
  border-color: #fff;
  color: var(--marka-koyu);
}

.tanitim__kahraman .btn--birincil:hover {
  background: rgba(255, 255, 255, .88);
  border-color: rgba(255, 255, 255, .88);
}

/* İkincil de gradyana göre ayarlanıyor: koyu bir kutu yerine
   şeffaf + beyaz kenarlık, böylece ikisi AYNI DÜZLEMDE okunuyor.        */
.tanitim__kahraman .btn--ikincil {
  background: transparent;
  border-color: rgba(255, 255, 255, .55);
  color: #fff;
}

.tanitim__kahraman .btn--ikincil:hover {
  background: rgba(255, 255, 255, .12);
  border-color: #fff;
}

/* ══════════════════════════════════════════════════════════════════════
   ANASAYFA — kahraman ızgarası, ürün önizlemesi, platformlar, SSS
   ══════════════════════════════════════════════════════════════════════ */

/* Header'daki logo işareti — kenar çubuğundakiyle aynı boyut dili.     */
.tanitim__marka { display: inline-flex; align-items: center; gap: var(--b-2); }
.tanitim__logo { display: inline-flex; color: var(--marka); }
.tanitim__logo svg { width: 26px; height: 26px; }

/* Kahraman: solda metin, sağda ürün önizlemesi.
   min-width:0 — kayıtlı ızgara tuzağı: içeriğinin altına küçülemeyen
   hücre belgeye yatay kaydırma ekler.                                  */
.tanitim__kahramanIzgara {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--b-8);
  align-items: center;
}

.tanitim__kahramanMetin { min-width: 0; }

@media (max-width: 900px) {
  .tanitim__kahramanIzgara { grid-template-columns: 1fr; }
  /* Dar ekranda önizleme GİZLENMİYOR, altına alınıyor: gizlemek sayfanın
     tek görselini mobilde yok etmek olurdu.                            */
  .tanitim__onizleme { order: 2; }
}

/* ---- Platform ikonları: "sosyal medya" mesajının görsel karşılığı --- */
.tanitim__platformlar {
  display: flex;
  gap: var(--b-4);
  align-items: center;
  margin: var(--b-5) 0 0;
  padding: 0;
  list-style: none;
}

.tanitim__platform {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: #fff;
}

.tanitim__platform svg { width: 20px; height: 20px; }

/* ---- Ürün önizlemesi: HTML+CSS, ekran görüntüsü değil -------------- */
.tanitim__onizleme { min-width: 0; }

.onizleme__pencere {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--yuzey);
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}

.onizleme__bar {
  display: flex;
  gap: 6px;
  padding: var(--b-3) var(--b-4);
  background: var(--yuzey-2);
  border-block-end: 1px solid var(--cizgi);
}

.onizleme__nokta {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--cizgi-guclu);
}

.onizleme__govde { padding: var(--b-4); }

.onizleme__kartlar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--b-3);
  margin-block: var(--b-4);
}

.onizleme__kart {
  border: 1px solid var(--cizgi);
  border-radius: var(--r-md);
  padding: var(--b-3);
  background: var(--yuzey-2);
}

/* Seçili varyant — ürünün gerçek `.kart--secili` davranışını temsil eder */
.onizleme__kart--secili { border-color: var(--marka); }

.onizleme__rozet {
  width: 42%; height: 8px; border-radius: 4px;
  background: var(--marka); opacity: .8;
  margin-block-end: var(--b-3);
}

.onizleme__satir {
  height: 6px; border-radius: 3px;
  background: var(--cizgi-guclu);
  margin-block-end: 7px;
}

.onizleme__satir--kisa { width: 62%; }
.onizleme__satir--baslik { width: 45%; height: 10px; background: var(--marka); opacity: .55; }

.onizleme__etiketler { display: flex; gap: var(--b-2); }

.onizleme__etiket {
  width: 58px; height: 16px; border-radius: 999px;
  background: var(--marka-zayif);
}

/* ---- İçerik tipi çipleri ------------------------------------------- */
.tanitim__ortala { text-align: center; }
.tanitim__ortala .rozetler { justify-content: center; margin-block-start: var(--b-5); }
.tanitim__tipler .rozet { font-size: .82rem; }

/* ---- SSS: <details> akordeon, JAVASCRIPT YOK ----------------------- */
.sss { border-block-start: 1px solid var(--cizgi); }

.sss__oge { border-block-end: 1px solid var(--cizgi); }

.sss__soru {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--b-4);
  padding-block: var(--b-4);
  cursor: pointer;
  font-weight: 600;
  /* Varsayılan ok işaretini kaldırıyoruz; kendi ikonumuz var.          */
  list-style: none;
}

.sss__soru::-webkit-details-marker { display: none; }

.sss__ok { color: var(--metin-3); flex: 0 0 auto; transition: transform .18s ease; }
.sss__oge[open] .sss__ok { transform: rotate(180deg); }

.sss__cevap { margin: 0 0 var(--b-4); max-width: 68ch; }

/* ---- Dil seçici: <details> açılır menü ----------------------------- */
.dilsec { position: relative; }

.dilsec__acan {
  display: inline-flex;
  align-items: center;
  gap: var(--b-2);
  padding: 6px 10px;
  border-radius: var(--r-md);
  cursor: pointer;
  color: var(--metin-2);
  list-style: none;
  white-space: nowrap;
}

.dilsec__acan::-webkit-details-marker { display: none; }
.dilsec__acan:hover { background: var(--yuzey-2); color: var(--metin); }
.dilsec[open] .dilsec__ok { transform: rotate(180deg); }
.dilsec__ok { transition: transform .18s ease; }

.dilsec__panel {
  position: absolute;
  inset-inline-end: 0;
  margin-block-start: 6px;
  min-width: 11rem;
  padding: 6px;
  border-radius: var(--r-md);
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  box-shadow: 0 14px 36px rgba(0, 0, 0, .32);
  z-index: 30;
}

.dilsec__oge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--b-3);
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--metin);
  cursor: pointer;
  font: inherit;
  text-align: start;
}

.dilsec__oge:hover { background: var(--yuzey-2); }
.dilsec__oge[aria-current="true"] { color: var(--marka); font-weight: 600; }
.dilsec__tik { color: var(--marka); }

/* ══════════════════════════════════════════════════════════════════════
   MODÜL 11 SATIR 4 — ÜRETİLEN GÖRSEL
   ══════════════════════════════════════════════════════════════════════
   🔴 app.css SADIK KOPYADIR ve düzenlenmez; ürüne özgü her sınıf buraya.

   img zaten global olarak `display:block; max-width:100%` alıyor
   (app.css), yani burada eklenen tek şey KÖŞE ve ZEMİN.

   ⚠️ En-boy oranı SABİTLENMİYOR: sağlayıcı ölçü döndürmüyor
   (Medya.Genislik/Yukseklik NULL) ve sabit bir oran, farklı oranda
   dönen bir görseli KIRPARDI. Kap `max-width` ile sınırlı, yükseklik
   içerikten geliyor.

   ⚠️ Zemin, saydam PNG'ler için: saydam bir görsel koyu temada
   görünmez hâle gelirdi. */
.medya-gorsel {
  border-radius: var(--r-md);
  background: var(--yuzey-2);
}

/* İçerik detayındaki tek bir medya öğesi (görsel/video + eylemleri + künyesi).

   ⚖️ GENİŞLİK SINIRI BURADA, KARTTA DEĞİL: Sonuc.cshtml görseli satır içi
   `max-width:32rem` ile sınırlıyor ve o değer orada tek kullanımlık. Detayda
   birden çok medya olabileceği için (11.5 çoklu medya) sınır ÖĞEYE ait.

   ⚠️ Öğeler arası boşluk `+` ile: tek öğede (bugünkü hâl) hiç boşluk
   eklenmiyor, yani kartın kendi dolgusu bozulmuyor. */
.medya-oge {
  max-width: 32rem;
}

.medya-oge + .medya-oge {
  margin-top: var(--b-5);
  padding-top: var(--b-5);
  border-top: 1px solid var(--cizgi);
}

/* ══════════════════════════════════════════════════════════════════════════
   MEDYA SAHNESİ — üretim sonucu ekranındaki "kahraman" sunum
   ══════════════════════════════════════════════════════════════════════════

   🔴 KULLANICI BİLDİRİMİNİN KARŞILIĞI: "görselin gösterildiği tasarım güzel
   değil, daha hoş şekilde sunulmalı". Ölçülen üç kusur:
     · ödenen çıktı "40 kredi düşüldü" künyesinin ALTINDA duruyordu,
     · kart max-width:32rem ile sola yaslıydı, sağında ~%40 ölü alan vardı,
     · görsel bir form alanı gibi kart gövdesinin içindeydi.

   ⚖️ BÖLÜNMÜŞ EKRAN (sol görsel / sağ içerik) KULLANILMADI — kayıtlı tasarım
   kuralı onu "en çok aşınmış kalıp" diye yasaklıyor. Yerine PASPARTU deseni:
   görsel kendi oranında, ortalanmış, çerçeve zemini üstünde. Dikey (4:5,
   9:16) ve yatay (16:9) çıktıların üçü de aynı çerçevede doğru duruyor;
   sabit bir en-boy DAYATILMIYOR (dayatmak farklı oranda gelen bir görseli
   KIRPARDI — .medya-gorsel'in aynı gerekçesi).

   ⚖️ Yeni renk/token ÜRETİLMEDİ: zemin --yuzey-2, çizgi --cizgi, yarıçap
   --r-lg — üçü de tasarım sisteminden. Mor marka rengi kullanıcı kararıyla
   onaylı ama buraya KATILMADI: sahnenin işi görseli öne çıkarmak, kendi
   dikkatini çekmek değil. */
.medya-sahne {
  margin-bottom: var(--b-5);
}

.medya-sahne__baslik {
  font-size: var(--ts-sm);
  color: var(--metin-2);
  margin: 0 0 var(--b-3);
}

/* Paspartu: görsel için nefes alan bir zemin.
   ⚠️ max-height VIEWPORT'A bağlı (min(70vh, 44rem)): dikey bir 9:16 görsel
   sabit piksel yükseklikte ekranı taşırır, yalnız vh ise küçük ekranda
   okunamayacak kadar küçülür. İkisinin en küçüğü doğru davranışı veriyor. */
.medya-sahne__cerceve {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--b-5);
  background: var(--yuzey-2);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-lg);
}

.medya-sahne__gorsel {
  max-height: min(70vh, 44rem);
  width: auto;
  max-width: 100%;
  border-radius: var(--r-md);
}

.medya-sahne__eylemler {
  margin-top: var(--b-3);
  gap: var(--b-2);
  align-items: center;
}

/* Not eylemlerin SONUNA itiliyor: düğmeler solda kalsın, açıklama sağda.
   ⚠️ Dar ekranda .satir--sar alta sardırıyor ve margin-left:auto zararsız
   hâle geliyor — ayrı bir medya sorgusu gerekmiyor. */
.medya-sahne__not {
  margin-left: auto;
}

/* ---------------------------------------------------------------------------
   ZİL ROZETİ — Modül 18 satır 4.

   🔴 app.css'e YAZILMADI: o dosya prototipin SADIK KOPYASI ve düzenlenmesi
   yasak (TasarimSistemiTestleri iki dosyayı karşılaştırıyor). Ürüne özgü her
   sınıf buraya.

   ⚠️ Sayı ".sayac" ile çizilemezdi: o sınıf sağa yaslı KÜÇÜK METİN
   (font-size/color/text-align), rozet değil — uydurulmuş bir sınıf hata
   vermez, sessizce stilsiz render eder.
--------------------------------------------------------------------------- */
.zil { position: relative; }

.zil-rozet {
    position: absolute;
    top: 2px;
    inset-inline-end: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: var(--r-tam);
    background: var(--hata);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}