/* 0.16 §2.1 — giriş noktası: token'lar + yazı tipi + kurumsal bileşen
   dili. HER sayfa bunu yükler. yazi-tipi.css (Task 3) BİLEREK tokens.css'e
   KATILMADI: tokens.css yan etkisiz tasarım tokenleridir, @font-face bir ağ
   kaynağı isteğidir — ayrı kaygı, ayrı dosya. Yüzeye özgü paket (vitrin/
   portal/yonetim) kendi başında YALNIZCA bunu @import eder; bu yüzden her yüzey
   paketi tek başına da eksiksizdir ve temel içeriği sayfaya İKİ KEZ gelir
   (önbellek kazancı YOKTUR). Ayrı <link> yine de durur: her sayfanın ortak
   temeli layout'ta adıyla görünür ve paket testleri (AssetPipelineTests) onu
   yüzey paketinden bağımsız olarak bulup doğrular. *//* 0.16 §4.1 — tek tema, açık. Karanlık tema YOK: prefers-color-scheme
   medya sorgusu ve [data-theme] seçicisi bu dosyada da hiçbir yerde YAZILMAZ
   (CLAUDE.md, kullanıcı kuralı). Renk bloğu docs/prototypes/yerlice-vitrin.html
   satır 8-42'nin birebir taşınmış hâlidir; --logo HARİÇ (spec §2.5 — marka
   işareti tümüyle SVG). --ui BURAYA Task 3'ün Assets/css/yazi-tipi.css'inden
   taşındı: üç @font-face kuralı KENDİ dosyasında kalır (font yükleme ayrı bir
   kaygıdır, tokens.css yan etkili kaynak isteği içermez), ikisi de temel.css
   üzerinden birlikte yüklenir (bkz. Task 5). Bundle İÇERİĞİ değişmez, yalnızca
   kaynağı değişir. _Layout'un #kanal-temasi bloğu, kanal bir renk override
   ettiğinde bu değişkenlerin ÜSTÜNE yazar — yalnızca --brand/--cta değil,
   ThemePalette'in ürettiği SEKİZİ birden (--brand-2/-3/-tint/-hero, --cta-2/-tint
   dahil). Buradaki rampa onaylı Yerlice paletidir ve LİTERAL durur: türetilmez
   (spec 0.16 §3.3). Bu yüzden bu dosyanın <link>'i o bloktan ÖNCE gelir
   (bkz. _Layout.cshtml). */
:root {
  --brand:       #1C6FB3;   /* Yerlice mavisi */
  --brand-2:     #14568C;   /* koyu ton (hover) */
  --brand-3:     #0E4570;   /* en koyu (hero gradyan) */
  --brand-tint:  #E9F2FA;   /* açık ton (seçili zemin) */
  --brand-hero:  #2E86CC;   /* hero degradesinin açık ucu (0.17 §5.7) */
  --cta:         #F2701E;   /* tek aksiyon rengi: sepet, indirim */
  --cta-2:       #D85F10;
  --cta-tint:    #FDF0E5;

  --ground:      #F4F6F8;
  --surface:     #FFFFFF;
  --surface-2:   #EDF1F4;
  --surface-3:   #E0E6EB;

  --ink:         #1A1F26;
  --ink-2:       #58626E;
  --ink-3:       #86909D;

  --line:        #E1E6EB;
  --line-2:      #C8D0D9;

  --green:       #217A46;
  --green-tint:  #E6F3EB;
  --amber:       #90600A;
  --amber-tint:  #FAF1DE;

  --shadow:      0 1px 2px rgba(26, 31, 38, .05);
  --shadow-2:    0 3px 8px rgba(26, 31, 38, .09), 0 14px 28px -20px rgba(26, 31, 38, .3);

  --ui:   "Rubik", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --r:    6px;
  --maxw: 1300px;

  /* ===== Boşluk ölçeği (spec §4.2) — prototipte tekrarlanan gap/padding
     değerlerinden türetildi: 6, 10, 14, 18, 22, 26, 44, 46px. 44 ve 46 aynı
     basamağa (--sp-8) oturur. 26px HİÇBİR basamağa net oturmuyor (22 ile 32
     arası, ikisine de eşit uzaklıkta değil): tek başına kaldığı yerde
     (ör. .mast .wrap, .pd, footer.site .wrap gap'i) sabit px olarak kalır,
     bu dosyada tokene çevrilmez. */
  --sp-1: 4px;
  --sp-2: 6px;
  --sp-3: 10px;
  --sp-4: 14px;
  --sp-5: 18px;
  --sp-6: 22px;
  --sp-7: 32px;
  --sp-8: 44px;

  /* ===== Tipografi ölçeği (spec §4.2) — prototipin fiilî font-size
     değerlerinden türetildi: 11 / 11.5 / 12.5 / 13.5 / 14 / 14.5 / 15.5 /
     16.5 / 19 / 21 / 23 / 33 / 40px. 11 ve 14 en yakın komşu basamağa
     yuvarlanır (--fs-1, --fs-4); 19/21/23 tek basamakta (--fs-7) birleşir,
     ortanca değer (21) seçildi. */
  --fs-1: 11.5px;
  --fs-2: 12.5px;
  --fs-3: 13.5px;
  --fs-4: 14.5px;
  --fs-5: 15.5px;
  --fs-6: 16.5px;
  --fs-7: 21px;
  --fs-8: 33px;
  --fs-9: 40px;
}

.num { font-variant-numeric: tabular-nums; }

/* Rubik — self-host (spec 0.16 §2.5). Üçüncü taraf font sunucusuna BAĞLANILMAZ: harici
   istek ziyaretçinin IP adresini dışarı taşır ve sayfanın açılışını başka bir sunucuya
   bağlar. Alt küme latin + latin-ext, ağırlık başına tek dosya: Türkçe ğ ı ş İ için
   latin-ext ŞARTTIR. Lisans: ../fonts/OFL.txt (SIL OFL 1.1).
   url()'ler KAYNAK yoludur; Vite dosyayı hash'ler ve /dist/fonts/ altına yeniden yazar.
   --ui tokens.css'te tanımlıdır (spec §4.1). */

@font-face {
    font-family: "Rubik";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/dist/fonts/rubik-400-Bid78nyU.woff2") format("woff2");
}

@font-face {
    font-family: "Rubik";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/dist/fonts/rubik-500-kqn4btXq.woff2") format("woff2");
}

@font-face {
    font-family: "Rubik";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/dist/fonts/rubik-600-DX4FInF-.woff2") format("woff2");
}

/* 0.16 §5.2 — üç yüzeyin PAYLAŞTIĞI kurumsal bileşen dili. Sınıf adları
   KORUNUR (CLAUDE.md, 25 test dosyası düz dize olarak bağlı): burada yalnızca
   BUGÜN var olan sınıflara kural eklenir/taşınır, hiçbiri yeniden adlandırılmaz.
   Bu dosya temel.css üzerinden HER sayfaya yüklenir (bkz. temel.css). */

body {
    margin: 0;
    font-family: var(--ui);
    line-height: 1.5;
    color: var(--ink);
    background: var(--ground);
}

/* ---------- portal.css'ten taşındı (0.16 §2.1) — adları DEĞİŞMEDEN.
   Storefront'tan erişilebilen sayfaların (Sepet, Siparislerim, Hesabim,
   Adreslerim, Odeme, SiparisDetay, Sifre, Giris, Kayit, Vitrin/*) hepsi bu
   sınıfları kullanıyor; portal.css'te kalsaydı vitrin bu paketi hiç yüklemeden
   stilsiz kalırdı. .portal-brand'ın rengi inherit'ten var(--brand)'a çıktı
   (spec §12 — portal.css paketinin --brand KULLANDIĞININ kanıtı, bugün B2B'de
   hiçbir kural bu değişkeni okumuyordu). ---------- */
:root {
    --portal-space: 1rem;
    --portal-line: #d5d5d5;
}

.portal-header {
    display: flex;
    align-items: center;
    gap: var(--portal-space);
    padding: var(--portal-space);
    border-bottom: 1px solid var(--portal-line);
}

.portal-brand {
    font-weight: 600;
    text-decoration: none;
    color: var(--brand);
}

/* Kanalın yüklediği logonun boyutu BİLİNMEZ: 2000 piksellik bir dosya başlığı
   bütünüyle yıkardı. Yükseklik burada sınırlanır, genişlik oranı korur. Sınır
   CSS'tedir çünkü bu bir SUNUM kararıdır — kanal satırına boyut alanı eklemek
   müşteriye çözecek bir problem daha verirdi. */
.portal-logo {
    display: block;
    height: 32px;
    width: auto;
}

.portal-main {
    padding: var(--portal-space);
}

.portal-muted {
    color: #666;
}

.portal-session {
    display: flex;
    align-items: center;
    gap: calc(var(--portal-space) / 2);
    margin: 0;
    margin-inline-start: auto;
}

.portal-form {
    display: grid;
    gap: calc(var(--portal-space) / 2);
    max-width: 22rem;
}

.portal-error {
    color: #a11;
}

.portal-mesaj {
    font-weight: 600;
}

.portal-catalog {
    border-collapse: collapse;
    width: 100%;
}

.portal-catalog th,
.portal-catalog td {
    text-align: left;
    padding: calc(var(--portal-space) / 2);
    border-bottom: 1px solid var(--portal-line);
}

/* ---------- bağlantı (0.16 §4.3, §5.2) ----------
   Tarayıcı varsayılanı mavi/mor bağlantı kusurunu kapatır: bugün üç CSS
   dosyasında da gövde geneli bir `a` kuralı YOK, bu yüzden stilsiz kalan her
   <a> (ör. .yonetim-session içindeki Şifre/Çıkış bağlantıları) tarayıcı
   varsayılanıyla çiziliyordu. Ziyaret edilmiş bağlantı için AYRI renk yok
   (kanal rengi göstergesi bozulmasın diye) — yalnızca hover'da alt çizgi. */
a {
    color: var(--brand);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ---------- tablo (0.16 §5.2) ----------
   Bugünkü border/padding/th arka planı yonetim.css'te KALIYOR (buraya
   taşınmadı) — burada yalnızca BUGÜN eksik olan zebra/hover/tabular-nums/dar
   ekran sarması eklenir. */
.yonetim-tablo tbody tr:nth-child(even),
.portal-catalog tbody tr:nth-child(even) {
    background: var(--ground);
}

.yonetim-tablo tbody tr:hover,
.portal-catalog tbody tr:hover {
    background: var(--brand-tint);
}

.sayi {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* portal-catalog'un sayısal sütunları bugün kendi ad hoc sınıflarını taşıyor
   (cari-tutar/cari-bakiye/sepet-birim-fiyat/sepet-satir-toplami/portal-stok);
   bu sınıflar 25 test dosyasının bazılarında TAM DİZE olarak pinlenmiş
   (StorefrontAcceptanceTests.cs:291, CatalogAndPricingAcceptanceTests.cs:110),
   bu yüzden yeniden adlandırılmadı ya da "sayi" ile ikinci bir sınıf almadı —
   doğrudan kendi adlarıyla hedeflendi. */
.portal-catalog td.cari-tutar,
.portal-catalog td.cari-bakiye,
.portal-catalog td.sepet-birim-fiyat,
.portal-catalog td.sepet-satir-toplami,
.portal-catalog td.portal-stok {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 880px) {
    .yonetim-tablo,
    .portal-catalog {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* ---------- form (0.16 §5.2) ---------- */
.portal-form input:focus-visible,
.portal-form select:focus-visible,
.portal-form textarea:focus-visible,
.yonetim-form input:focus-visible,
.yonetim-form select:focus-visible,
.yonetim-form textarea:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 1px;
    border-color: var(--brand);
}

.portal-form input[aria-invalid="true"],
.yonetim-form input[aria-invalid="true"] {
    border-color: #B23A3A;
}

.portal-form .yardim,
.yonetim-form .yardim {
    margin: 0;
    font-size: var(--fs-1);
    color: var(--ink-3);
}

/* ---------- düğme (0.16 §5.2) — birincil/ikincil/sessiz/tehlike, normal+küçük ---------- */
button,
.birincil {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    border: 1px solid var(--brand);
    border-radius: var(--r);
    background: var(--brand);
    color: #fff;
    font: 600 14px/1 var(--ui);
    padding: var(--sp-3) var(--sp-5);
    cursor: pointer;
}

button:hover,
.birincil:hover {
    background: var(--brand-2);
    border-color: var(--brand-2);
}

button:disabled, button[disabled],
.birincil:disabled, .birincil[disabled] {
    background: var(--surface-3);
    border-color: var(--surface-3);
    color: var(--ink-3);
    cursor: not-allowed;
}

.ikincil {
    background: transparent;
    color: var(--brand);
    border: 1px solid var(--brand);
}

.ikincil:hover {
    background: var(--brand-tint);
}

.ikincil:disabled, .ikincil[disabled] {
    background: transparent;
    color: var(--ink-3);
    border-color: var(--line-2);
    cursor: not-allowed;
}

.sessiz {
    background: transparent;
    color: var(--ink-2);
    border: 1px solid transparent;
}

.sessiz:hover {
    background: var(--surface-2);
    color: var(--ink);
}

.sessiz:disabled, .sessiz[disabled] {
    background: transparent;
    color: var(--ink-3);
    cursor: not-allowed;
}

.tehlike {
    background: #B23A3A;
    border-color: #B23A3A;
    color: #fff;
}

.tehlike:hover {
    background: #8F2E2E;
    border-color: #8F2E2E;
}

.tehlike:disabled, .tehlike[disabled] {
    background: var(--surface-3);
    border-color: var(--surface-3);
    color: var(--ink-3);
    cursor: not-allowed;
}

button.kucuk, .birincil.kucuk, .ikincil.kucuk, .sessiz.kucuk, .tehlike.kucuk {
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-2);
}

/* ---------- durum rozeti (0.16 §5.2) — renk varyantları.
   durum/rol-etiketi'nin YANINA eklenir, YERİNE geçmez: sekiz test dosyası
   "<td class=\"durum\">Aktif</td>" tam dizesini pinliyor (bkz. Adım gerekçesi
   üstteki not), bu yüzden bugünkü hiçbir sayfa bu varyantları KULLANMIYOR. */
.durum-notr  { background: var(--surface-2); color: var(--ink-2); }
.durum-yesil { background: var(--green-tint); color: var(--green); }
.durum-amber { background: var(--amber-tint); color: var(--amber); }
.durum-mavi  { background: var(--brand-tint); color: var(--brand); }

/* ---------- boş durum (0.16 §5.3 — _BosDurum.cshtml bu sınıfları kullanır) ---------- */
.bos-durum {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-8) var(--sp-4);
    text-align: center;
    color: var(--ink-2);
}

.bos-durum-baslik {
    margin: 0;
    font-size: var(--fs-6);
    font-weight: 600;
    color: var(--ink);
}

.bos-durum-aciklama {
    margin: 0;
    font-size: var(--fs-3);
    max-width: 46ch;
}

/* ---------- sayfalama (0.16 §5.3 — _Sayfalama.cshtml bu sınıfları kullanır) ---------- */
.sayfalama {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-4);
    padding-block: var(--sp-5);
}

.sayfalama a {
    padding: var(--sp-2) var(--sp-4);
    border: 1px solid var(--brand);
    border-radius: var(--r);
    color: var(--brand);
    font-weight: 600;
}

.sayfalama a:hover {
    background: var(--brand-tint);
    text-decoration: none;
}

.sayfalama span[aria-disabled="true"] {
    padding: var(--sp-2) var(--sp-4);
    border: 1px solid var(--line-2);
    border-radius: var(--r);
    color: var(--ink-3);
}

.sayfalama-gosterge {
    font-size: var(--fs-2);
    color: var(--ink-2);
}

/* ---------- mesaj şeridi (0.16 §5.2) — başarı/ret varyantı.
   p.* yalnızca TempData["Mesaj"]/["Hata"] banner'ını hedefler. .portal-error
   AYRICA bir <td> bayrağıdır (_SepetOzeti.cshtml'in B2B tablosu; vitrin sepetinde kural uyarısı p.portal-error kutusudur) ve .yonetim-hata AYRICA
   bir alan doğrulama <span>'ıdır (Kullanicilar/Index.cshtml) — ikisi kutu
   almaz, yalnızca kırmızı metin kalır. */
p.yonetim-mesaj, p.portal-mesaj {
    display: block;
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r);
    background: var(--green-tint);
    border: 1px solid var(--green);
    color: var(--green);
    font-weight: 600;
}

p.yonetim-hata, p.portal-error {
    display: block;
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r);
    background: #FBEAEA;
    border: 1px solid #B23A3A;
    color: #B23A3A;
    font-weight: 600;
}

span.yonetim-hata, span.portal-error, td.portal-error {
    color: #B23A3A;
    font-weight: 600;
}

/* ---------- duyarlılık (spec 0.16 §7.4) ----------
   Sayfa gövdesi hiçbir genişlikte yatay kaymaz. overflow-x: clip, hidden DEĞİL:
   hidden gövdeyi bir kaydırma kabına çevirir ve vitrinin sticky satın alma kutusunu
   (.buybox) bozar; clip kap kurmaz. Geniş içerik kendi kabında kayar — tablolar için
   yukarıdaki "tablo" bölümünün 880px kuralı, kategori barı için .catnav nav. */
body { overflow-x: clip; }

/* Prototipten birebir: hareket azaltma tercihinde geçiş ve animasyonlar anlık olur. */
@media (prefers-reduced-motion: reduce) { * { transition-duration: .001ms !important; animation-duration: .001ms !important; } }

/* ---------- kurum rol satırları (_KurumRolSatirlari) ----------
   Tek satır: onay kutusu + rol adı solda, limit alanı (varsa) satırın sonunda.
   Seçiciler div:is(...) ile güçlendirildi: .yonetim-form label (kalın) ve
   .yonetim-form input (tam genişlik) kurallarını ezmek için. Dar ekranda limit
   alanı adın altına sarar. */
div:is(.ekip-rol, .davet-rol, .kurum-rol) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-1) var(--sp-4);
    padding-block: var(--sp-1);
}

div:is(.ekip-rol, .davet-rol, .kurum-rol) > label {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-weight: 400;
}

div:is(.ekip-rol, .davet-rol, .kurum-rol) > label:nth-of-type(2) {
    margin-inline-start: auto;
    color: var(--ink-2);
    font-size: var(--fs-3);
}

div:is(.ekip-rol, .davet-rol, .kurum-rol) input[type="checkbox"] {
    flex: none;
    width: auto;
    margin: 0;
}

div:is(.ekip-rol, .davet-rol, .kurum-rol) input[type="number"] {
    flex: none;
    width: 9.5rem;
    padding: var(--sp-1) var(--sp-2);
    font-size: var(--fs-4);
    text-align: right;
}

/* Rol satırlarını saran kutu grubu: çerçevesiz. */
fieldset:has(:is(.ekip-rol, .davet-rol, .kurum-rol)) {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}

fieldset:has(:is(.ekip-rol, .davet-rol, .kurum-rol)) > legend {
    padding: 0;
    margin-bottom: var(--sp-1);
}