/* B2B portalın paketi. Paylaşılan kurallar (portal-brand/muted/form/error/mesaj/catalog) bilesenler.css'tedir ve
temel.css üzerinden gelir (0.16 §2.1); burada YALNIZCA portala özgü olanlar durur: kimlik sayfaları,
portal kabuğu ve katalog (0.22). Vitrin bu paketi yüklemez. *//* 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ı 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 '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
(ö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ı
"| Aktif | " 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 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 'ı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);
}
/* ---------- kimlik sayfaları (0.22): giriş, şifremi unuttum, şifre sıfırla, davet ----------
_KimlikLayout'un iki sütunu: solda marka renginde tanıtım paneli, sağda form. Panel zemini var(--brand)'dır;
panel içindeki ikincil metin ve çizgiler sabit bir mavi ton değil beyazın saydamlıklarıdır, kanal hangi rengi
seçerse seçsin okunur. Ölçüler onaylı ön izlemeden alındı (gövde 15px, köşe 4px, alan ve düğme 46px). */
.ikon-kaynak { position: absolute; }
.kimlik { --r: 4px; min-height: 100vh; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); font-size: 15px; background: var(--surface); }
.kimlik, .kimlik * { box-sizing: border-box; }
.kimlik a { font-weight: 500; }
.kimlik .ikon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.kimlik-tanitim { position: relative; overflow: hidden; background: var(--brand); color: #fff; padding: 44px 64px; display: flex; flex-direction: column; gap: 32px; }
.kimlik-tanitim > * { position: relative; }
/* Zemin kanalın yüklediği görseldir (ChannelTheme.BackdropUrl), ![]() olarak basılır; panelin üstüne soluk yayılır. */
.kimlik-tanitim > .kimlik-zemin { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .1; pointer-events: none; }
/* Üst etiket işaretlemede büyük harfle YAZILIDIR: CSS ile büyük harfe çevirme lang="tr" altında döküm kusuru üretir
(0.16 §4.3) ve pakette yasaktır (AssetPipelineTests). */
.kimlik-tanitim .ust-etiket { font-size: 13px; letter-spacing: .08em; color: rgba(255, 255, 255, .62); font-weight: 500; }
.kimlik-tanitim h2 { font-size: 34px; line-height: 1.18; font-weight: 600; margin: 14px 0 16px; max-width: 18ch; letter-spacing: -.01em; }
.kimlik-tanitim p { margin: 0; color: rgba(255, 255, 255, .72); max-width: 40ch; font-size: 16px; }
.kimlik-ozellik { list-style: none; margin: 0; padding: 0; display: grid; }
.kimlik-ozellik li { display: flex; gap: 16px; align-items: center; padding: 15px 0; border-top: 1px solid rgba(255, 255, 255, .16); }
.kimlik-ozellik li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .16); }
.kimlik-ozellik .kutu { width: 40px; height: 40px; border-radius: var(--r); background: rgba(255, 255, 255, .1); display: grid; place-items: center; flex: none; }
.kimlik-ozellik b { display: block; font-weight: 500; font-size: 15px; }
.kimlik-ozellik div > span { color: rgba(255, 255, 255, .62); font-size: 14px; }
.kimlik-iletisim { margin-top: auto; display: grid; gap: 14px; justify-items: start; color: rgba(255, 255, 255, .72); font-size: 14px; }
.kimlik-iletisim a { color: inherit; }
.kimlik-iletisim dl { margin: 0; width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; }
.kimlik-iletisim dt { font-size: 12px; color: rgba(255, 255, 255, .62); }
.kimlik-iletisim dd, .kimlik-iletisim .telefon { margin: 0; color: #fff; font-weight: 500; font-variant-numeric: tabular-nums; }
.kimlik-iletisim .posta { display: inline-flex; gap: 8px; align-items: center; font-weight: 400; }
.kimlik-iletisim .ikon { width: 16px; height: 16px; }
.kimlik-form { display: flex; flex-direction: column; padding: 40px 32px; background: var(--surface); }
.kimlik-form .orta { flex: 1; display: grid; place-items: center; }
/* Sütunun blokları (logo, başlık, form, not) arasında 28px; başlığı izleyen açıklama satırı başlığa yakın durur. */
.kimlik-kutu { width: 100%; max-width: 380px; }
.kimlik-kutu > * { margin: 0; }
.kimlik-kutu > * + * { margin-top: 28px; }
.kimlik-kutu > h1 + .portal-muted { margin-top: 6px; }
/* Logonun boyutu bilinmez (.portal-logo ile aynı gerekçe): yükseklik burada sınırlanır. */
.kimlik-logo { height: 84px; width: auto; max-width: 100%; display: block; margin-inline: auto; }
.kimlik-marka { text-align: center; font-size: 26px; font-weight: 600; color: var(--brand); }
.kimlik-kutu h1 { font-size: 26px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
.kimlik-kutu div > h1 { margin: 0 0 6px; }
.kimlik-kutu .alt, .kimlik-kutu .portal-muted { color: var(--ink-2); }
.kimlik-kutu .alt { margin: 0; }
/* Giriş formu kendi işaretlemesini taşır (.kimlik-alanlar); öteki üç sayfanın .portal-form'u aynı ölçülere çekilir. */
.kimlik-alanlar { display: grid; gap: 18px; }
.kimlik-alanlar > .portal-error { margin: 0; }
.kimlik-alanlar .alan { display: grid; gap: 6px; }
.kimlik-alanlar .etiket { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; font-weight: 500; }
.kimlik-alanlar .etiket a { font-size: 13px; }
.kimlik-kutu .portal-form { max-width: none; gap: 6px; }
.kimlik-kutu .portal-form label { font-size: 14px; font-weight: 500; }
/* Alanlar arası 18px (6px ızgara boşluğu + 12px); gizli alanı izleyen ilk etiket boşluk almaz. */
.kimlik-kutu .portal-form input:not([type="hidden"], [hidden]) + label, .kimlik-kutu .portal-form > button { margin-top: 12px; }
.kimlik-kutu input { font: inherit; height: 46px; border: 1px solid var(--line-2); border-radius: var(--r); padding: 0 14px; color: var(--ink); background: var(--surface); width: 100%; }
.kimlik-kutu input::placeholder { color: var(--ink-3); }
.kimlik-kutu input:hover { border-color: var(--ink-3); }
.kimlik-kutu input:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.kimlik-kutu button { font: 500 15px var(--ui); height: 46px; gap: 10px; padding: 0 18px; width: 100%; }
.kimlik-kutu button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.kimlik-kutu p.portal-error, .kimlik-kutu p.portal-mesaj { padding: 11px 14px; font-size: 14px; font-weight: 500; }
.kimlik-not { display: flex; gap: 14px; align-items: center; background: var(--ground); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; font-size: 14px; color: var(--ink-2); }
.kimlik-not .ikon { color: var(--brand); width: 24px; height: 24px; }
.kimlik-not b { color: var(--ink); font-weight: 500; display: block; }
.kimlik-alt { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 16px; color: var(--ink-3); font-size: 13px; }
.kimlik-alt a { color: var(--ink-2); }
/* Davet kabulündeki "okudum" kutusu: kutu metnin solunda, alan ölçülerine (46px, tam genişlik) girmez. */
.kimlik-kutu .portal-form label.kimlik-onay { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; font-weight: 400; color: var(--ink-2); cursor: pointer; }
.kimlik-kutu .kimlik-onay input { width: 18px; height: 18px; flex: none; margin: 2px 0 0; padding: 0; accent-color: var(--brand); }
/* ---------- metin sayfası: portalda KVKK aydınlatma metni (kimliksiz de okunur) ---------- */
.portal-metin { max-width: 760px; margin-inline: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 32px; }
.portal-metin h1 { margin: 0 0 6px; font-size: 24px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.portal-metin .surum { margin: 0 0 24px; color: var(--ink-3); font-size: 13px; }
/* Gövde panelden düz metin girilir: satır sonları korunur, uzun satır sarılır. */
.portal-metin .govde { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 1.65; color: var(--ink); }
@media (max-width: 600px) { .portal-metin { padding: 20px 16px; } }
@media (max-width: 900px) {
.kimlik { grid-template-columns: 1fr; }
.kimlik-tanitim { display: none; }
.kimlik-form { padding: 28px 20px; }
}
@media (prefers-reduced-motion: no-preference) {
.kimlik-kutu button, .kimlik-kutu input { transition: background-color .12s, border-color .12s; }
}
/* ---------- portal kabuğu (0.22 §3): beyaz üst şerit ve kanal renginde menü şeridi ----------
Ölçüler onaylı ön izlemeden alındı (docs/prototypes/portal-katalog.html): gövde 14px, köşe 4px, üst şerit 72px,
menü 46px, sayfa genişliği 1400px. Renkler tokenlardandır; tokeni olmayan kırmızı (tükendi, hata) burada adlandırılır.
Yeniden tasarlanmamış sayfalar (.portal-sayfa içinde) kendi eski stilleriyle kalır: yazı boyutu ve köşe yalnız kabuğa,
kataloğa ve bildirime uygulanır. */
.portal-ust, .portal-menu, .katalog, .portal-bildirim { --r: 4px; --red: #A1281F; --red-tint: #FBECEA; font-size: 14px; line-height: 1.45; }
.portal-ust, .portal-ust *, .portal-menu, .portal-menu *, .portal-sar, .katalog, .katalog *, .portal-bildirim { box-sizing: border-box; }
.portal-ust .ikon, .portal-menu .ikon, .portal-sayfa .ikon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.portal-sar { max-width: 1400px; margin: 0 auto; padding: 0 24px; }
.portal-ust { background: var(--surface); border-bottom: 1px solid var(--line); }
.portal-ust .portal-sar { display: flex; align-items: center; gap: 28px; min-height: 72px; }
.portal-ust .portal-brand { font-size: 20px; min-width: 0; }
.portal-ust .portal-logo { height: 44px; max-width: 100%; }
.portal-hesap { margin-left: auto; display: flex; align-items: center; gap: 20px; min-width: 0; }
.portal-kurum { text-align: right; line-height: 1.3; min-width: 0; overflow-wrap: anywhere; }
.portal-kurum b { display: block; font-weight: 500; }
.portal-kisi { color: var(--ink-2); font-size: 12.5px; }
.portal-kisi a { color: var(--ink-2); }
/* Çıkış bir POST formudur; düğmesi yanındaki bağlantı gibi görünür. */
.portal-kisi form { display: inline; }
.portal-kisi button { display: inline; font: inherit; padding: 0; border: 0; border-radius: 0; background: none; color: var(--ink-2); cursor: pointer; }
.portal-kisi button:hover { background: none; text-decoration: underline; }
.portal-sepet { display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 16px; border-radius: var(--r); background: var(--brand); color: #fff; font-weight: 500; flex: none; }
.portal-sepet:hover { background: var(--brand-2); text-decoration: none; }
.portal-sepet em { font-style: normal; background: #fff; color: var(--brand); border-radius: 10px; padding: 0 7px; font-size: 12px; font-weight: 600; line-height: 20px; }
/* Menü yazısı beyazın saydamlığıdır: kanal hangi rengi seçerse seçsin okunur (kimlik paneliyle aynı yaklaşım). */
.portal-menu { background: var(--brand); }
.portal-menu .portal-sar { display: flex; flex-wrap: wrap; min-height: 46px; }
.portal-menu a { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 16px; color: rgba(255, 255, 255, .78); font-weight: 500; border-top: 3px solid transparent; border-bottom: 3px solid transparent; }
.portal-menu a:hover { color: #fff; text-decoration: none; background: rgba(255, 255, 255, .06); }
.portal-menu a[aria-current="page"] { color: #fff; border-bottom-color: #fff; }
.portal-menu a em { font-style: normal; background: #fff; color: var(--brand); border-radius: 9px; padding: 0 6px; font-size: 11.5px; font-weight: 600; line-height: 17px; }
.portal-sayfa { padding: 24px 0 48px; }
/* Sepete ekleme bildirimi: katalogda ve ürün sayfasında #sepet-ekle-sonuc bölgesine basılır. */
.portal-bildirim { display: flex; gap: 10px; align-items: center; background: var(--green-tint); color: var(--green); border: 1px solid #B9DBC6; border-radius: var(--r); padding: 10px 14px; margin-bottom: 14px; }
.portal-bildirim.hata { background: var(--red-tint); color: var(--red); border-color: var(--red); }
/* ---------- katalog (0.22 §4): ürün başına tek satır ---------- */
.katalog-baslik { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 16px; }
.katalog-baslik h1 { font-size: 22px; font-weight: 600; margin: 0; letter-spacing: -.01em; }
.katalog-baslik > span { color: var(--ink-2); }
.katalog-arama { display: flex; gap: 8px; margin-bottom: 12px; }
.katalog-ara { flex: 1; min-width: 0; position: relative; }
/* Etiket ekran okuyucu içindir; görünen ipucu alanın yer tutucusudur. */
.katalog-ara label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* appearance: Safari arama kutusuna kendi yuvarlak çerçevesini çizer ve yüksekliği yok sayar. */
.katalog-ara input { -webkit-appearance: none; appearance: none; font: inherit; width: 100%; height: 42px; margin: 0; border: 1px solid var(--line-2); border-radius: var(--r); padding: 0 14px 0 40px; background: var(--surface); color: var(--ink); }
.katalog-ara input:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.katalog-ara .ikon { position: absolute; left: 12px; top: 12px; color: var(--ink-3); pointer-events: none; }
.katalog-arama > button { font: 500 14px var(--ui); height: 42px; padding: 0 24px; flex: none; }
.katalog-arac { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.katalog-sonuc { color: var(--ink-2); }
.katalog-sonuc b { color: var(--ink); font-weight: 600; }
.katalog-arac-sag { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.katalog-sirala { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 13px; min-width: 0; }
.katalog-birim { font: inherit; height: 34px; max-width: 100%; border: 1px solid var(--line-2); border-radius: var(--r); padding: 0 8px; background: var(--surface); color: var(--ink); cursor: pointer; }
.katalog-birim:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.katalog-kdv { display: inline-flex; flex: none; border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; background: var(--surface); }
.katalog-kdv .etk, .katalog-kdv a { display: inline-flex; align-items: center; height: 34px; font-size: 13px; color: var(--ink-2); border-right: 1px solid var(--line-2); }
.katalog-kdv .etk { padding: 0 11px; background: var(--surface-2); font-weight: 500; }
.katalog-kdv a { padding: 0 12px; }
.katalog-kdv a:last-child { border-right: 0; }
.katalog-kdv a:hover { text-decoration: none; background: var(--brand-tint); }
.katalog-kdv a[aria-current="true"] { background: var(--brand); color: #fff; font-weight: 500; }
.katalog-not { margin: 0 0 12px; color: var(--ink-2); }
.katalog-bos { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 28px 16px; text-align: center; }
.katalog-kart { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.katalog-tablo { width: 100%; border-collapse: collapse; }
.katalog-tablo th { text-align: left; font-weight: 500; font-size: 12.5px; color: var(--ink-2); background: var(--surface-2); padding: 10px 12px; border-bottom: 1px solid var(--line-2); white-space: nowrap; position: sticky; top: 0; }
.katalog-tablo th:first-child { border-top-left-radius: var(--r); }
.katalog-tablo th:last-child { border-top-right-radius: var(--r); }
.katalog-tablo td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.katalog-tablo tbody tr:last-child td { border-bottom: 0; }
.katalog-tablo tbody tr:hover td { background: #FAFBFD; }
.katalog-tablo .sag { text-align: right; }
.katalog-urun { width: 34%; }
.katalog-urun a { font-weight: 500; color: var(--ink); }
.katalog-urun a:hover { color: var(--brand); }
.katalog-urun small { display: block; color: var(--ink-3); font-size: 12.5px; }
.katalog-fiyat { white-space: nowrap; }
.katalog-fiyat b { font-weight: 600; font-size: 15px; }
tr.tukendi .katalog-urun a, tr.tukendi .katalog-fiyat b { color: var(--ink-3); }
/* Stok durumu nokta ve yazıyla söylenir; renk tek başına bilgi taşımaz. */
.katalog-stok { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; }
.katalog-stok::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: none; }
.katalog-stok.az { color: var(--amber); }
.katalog-stok.az::before { background: #D99A1C; }
.katalog-stok.yok { color: var(--red); }
.katalog-stok.yok::before { background: var(--red); }
.katalog-sepette { display: flex; flex-wrap: wrap; gap: 0 4px; }
.katalog-sepette > span { display: inline-flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 12px; font-weight: 500; color: var(--green); background: var(--green-tint); border-radius: 3px; padding: 1px 7px; }
.katalog-sepette .ikon { width: 12px; height: 12px; stroke-width: 2.5; }
/* Miktar kutusu: eksi ve artı düğmeleri portal.js ile çalışır; kutu sayı alanıdır, tarayıcının ok düğmeleri gizlenir. */
.katalog-ekle { display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
.katalog-adet { display: inline-flex; flex: none; border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; background: var(--surface); }
.katalog-adet button { font: inherit; font-size: 16px; width: 28px; height: 34px; padding: 0; border: 0; border-radius: 0; background: var(--surface-2); color: var(--ink-2); cursor: pointer; }
.katalog-adet button:hover { background: var(--line); }
.katalog-adet input { -webkit-appearance: none; -moz-appearance: textfield; appearance: textfield; font: inherit; width: 44px; height: 34px; margin: 0; padding: 0; border: 0; border-left: 1px solid var(--line-2); border-right: 1px solid var(--line-2); border-radius: 0; text-align: center; color: var(--ink); background: var(--surface); }
.katalog-adet input::-webkit-outer-spin-button, .katalog-adet input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.katalog-adet input:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.katalog-adet button:disabled, .katalog-adet input:disabled { background: var(--surface-2); color: var(--ink-3); cursor: not-allowed; }
.katalog-sepete { flex: none; width: 40px; height: 36px; padding: 0; border: 1px solid var(--brand); border-radius: var(--r); background: var(--surface); color: var(--brand); }
.katalog-sepete:hover { background: var(--brand-tint); border-color: var(--brand); }
.katalog-sepete:disabled { border-color: var(--line-2); color: var(--ink-3); background: var(--surface-2); cursor: not-allowed; }
/* ---------- katalog düzeni ve filtreler (0.22 §4) ----------
Ölçüler onaylı ön izlemeden alındı (docs/prototypes/portal-katalog.html: .duzen, .suzgec, .secili). Solda filtre paneli, ortada
liste. Uzun seçenek listesi (yüzlerce marka) panelin içinde kayar; panel sayfayı uzatmaz. */
.katalog-duzen { display: grid; grid-template-columns: 212px minmax(0, 1fr); gap: 20px; align-items: start; }
.katalog-duzen > * { min-width: 0; }
.katalog-filtre { position: sticky; top: 16px; }
.katalog-filtre h2 { font-size: 15px; font-weight: 600; margin: 0; padding: 14px 16px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.katalog-filtre h2 a { font-size: 12.5px; font-weight: 400; }
.katalog-filtre-grup { padding: 16px 16px 14px; border-bottom: 1px solid var(--line); display: grid; gap: 9px; }
.katalog-filtre-grup h3 { font-size: 12px; font-weight: 600; color: var(--ink-2); margin: 0 0 3px; letter-spacing: .02em; }
.katalog-secenekler { display: grid; gap: 9px; max-height: 241px; overflow-y: auto; }
.katalog-filtre label { display: flex; align-items: center; gap: 9px; min-width: 0; overflow-wrap: anywhere; cursor: pointer; }
.katalog-filtre label span { margin-left: auto; padding-left: 4px; color: var(--ink-3); font-size: 12.5px; }
.katalog-filtre input[type="checkbox"], .katalog-filtre input[type="radio"] { width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--brand); }
.katalog-aralik { display: flex; gap: 8px; align-items: center; color: var(--ink-3); }
.katalog-aralik input { -webkit-appearance: none; appearance: none; font: inherit; width: 100%; min-width: 0; height: 34px; margin: 0; border: 1px solid var(--line-2); border-radius: var(--r); padding: 0 8px; text-align: right; background: var(--surface); color: var(--ink); }
.katalog-aralik input:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.katalog-filtre-alt { padding: 14px 16px; }
.katalog-filtre-alt .sepet-btn.dolu { height: 38px; font-size: 14px; }
.katalog-secili { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; color: var(--ink-2); }
.katalog-secili span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere; background: var(--brand-tint); color: var(--brand); border-radius: var(--r); padding: 3px 6px 3px 10px; font-size: 13px; font-weight: 500; }
.katalog-secili span a { font-weight: 400; font-size: 15px; line-height: 1; padding: 0 3px; }
.katalog-secili span a:hover { text-decoration: none; color: var(--brand-2); }
.katalog-secili > a { font-size: 13px; margin-left: 4px; }
/* Katalog sekmeleri Siparişlerim'in sekme kurallarını kullanır (.siparis-sekmeler); yalnız ikon ölçüsü buradadır. */
#katalog-sekmeler .ikon { width: 15px; height: 15px; }
/* Koli katı önerisi (ön izleme: .oneri): birim kutusunun altında tek satır bağlantı. Düğmedir (satırı htmx ile yeniden çizer);
genel düğme kuralının dolgusunu ve çerçevesini ezer. */
.katalog-oneri { display: flex; align-items: flex-start; gap: 5px; max-width: 150px; margin-top: 5px; padding: 0; border: 0; border-radius: 0; background: none; color: var(--brand); font: inherit; font-size: 12px; line-height: 1.3; text-align: left; cursor: pointer; }
.katalog-oneri:hover { background: none; text-decoration: underline; }
.katalog-oneri:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.katalog-oneri .ikon { width: 12px; height: 12px; margin-top: 2px; }
/* Sağdaki sepet özeti (ön izleme: .ozet). Uzun sepet kutunun içinde kayar; toplam ve düğme görünür kalır. */
.katalog-duzen.ozetli { grid-template-columns: 212px minmax(0, 1fr) 268px; }
.katalog-ozet { position: sticky; top: 16px; }
.katalog-ozet h2 { font-size: 15px; font-weight: 600; margin: 0; padding: 14px 16px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.katalog-ozet h2 > span:last-child { color: var(--ink-2); font-weight: 400; font-size: 13px; }
.katalog-ozet p { margin: 0; }
.katalog-ozet-bos { padding: 16px; color: var(--ink-2); }
.katalog-ozet ul { list-style: none; margin: 0; padding: 4px 16px; max-height: 318px; overflow-y: auto; }
.katalog-ozet li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.katalog-ozet li:last-child { border-bottom: 0; }
.katalog-ozet li > div { min-width: 0; overflow-wrap: anywhere; }
.katalog-ozet li > span { white-space: nowrap; }
.katalog-ozet li small { display: block; color: var(--ink-3); font-size: 12.5px; }
.katalog-ozet-toplam { padding: 12px 16px; border-top: 1px solid var(--line-2); background: var(--surface-2); display: grid; gap: 4px; }
.katalog-ozet-toplam div { display: flex; justify-content: space-between; gap: 12px; color: var(--ink-2); }
.katalog-ozet-toplam div.ana { color: var(--ink); font-weight: 600; font-size: 16px; padding-top: 4px; }
.katalog-ozet-alt { padding: 14px 16px; display: grid; gap: 10px; }
.katalog-ozet-alt > * { min-width: 0; }
.katalog-ozet-alt .sepet-btn.dolu { height: 42px; font-size: 14px; }
@media (max-width: 1180px) {
.katalog-duzen.ozetli { grid-template-columns: 212px minmax(0, 1fr); }
.katalog-ozet { display: none; }
}
/* Tek sütunda panel listenin üstünde durur ve yapışmaz: yapışkan kalsaydı kaydırırken listenin üstünü örterdi. */
@media (max-width: 820px) {
.katalog-duzen, .katalog-duzen.ozetli { grid-template-columns: minmax(0, 1fr); }
.katalog-filtre { position: static; }
}
/* ---------- sepet (0.22): kalem tablosu ve sabit sipariş özeti ----------
Ölçüler onaylı ön izlemeden alındı (docs/prototypes/portal-sepet.html). Kök .katalog sınıfını da taşır: yazı boyutu, köşe,
kırmızı tokenları, kart, tablo, stok durumu ve miktar kutusu kataloğun kurallarıdır; burada yalnız sepete özgü olanlar durur.
Düğmeler genel düğme kuralının (bilesenler.css) dolgusunu ezer; ekrandaki tek dolu düğme .sepet-btn.dolu'dur. */
.sepet-devam { margin-left: auto; align-self: center; }
.sepet-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 14px; border: 1px solid var(--brand); border-radius: var(--r); background: var(--surface); color: var(--brand); font: 500 14px var(--ui); white-space: nowrap; cursor: pointer; }
.sepet-btn:hover { background: var(--brand-tint); border-color: var(--brand); text-decoration: none; }
.sepet-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.sepet-btn.dolu { width: 100%; height: 44px; font-size: 15px; background: var(--brand); color: #fff; }
.sepet-btn.dolu:hover { background: var(--brand-2); border-color: var(--brand-2); }
.sepet-btn.dolu:disabled { border-color: var(--line-2); color: var(--ink-3); background: var(--surface-2); cursor: not-allowed; }
.sepet-duzen { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.sepet-duzen > * { min-width: 0; }
.sepet-kaydir { overflow-x: auto; }
.sepet-tablo { min-width: 760px; }
/* Başlık satırı yatay kayan kabın içindedir; kataloğun yapışkan başlığı burada kullanılmaz. */
.sepet-tablo th { position: static; }
.sepet-tablo td { padding: 12px; }
.sepet-tablo tbody tr:last-child td { border-bottom: 1px solid var(--line); }
.sepet-tablo tbody tr:hover td { background: none; }
.sepet-tablo tbody tr.uyarili td { background: #FFFBFA; }
.sepet-tablo td.sepet-birim-fiyat, .sepet-tablo td.sepet-satir-toplami { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sepet-tablo td.sepet-satir-toplami { font-weight: 600; font-size: 15px; }
.sepet-urun { display: flex; gap: 12px; align-items: center; }
.sepet-urun > div { min-width: 0; }
.sepet-foto { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); color: var(--ink-3); }
.sepet-satir-uyari { display: flex; align-items: flex-start; gap: 6px; margin-top: 4px; color: var(--red); font-size: 12.5px; line-height: 1.35; }
.sepet-satir-uyari .ikon { width: 14px; height: 14px; margin-top: 1px; }
.sepet-adet input { width: 52px; }
.sepet-kaldir { width: 34px; height: 34px; padding: 0; border: 1px solid transparent; border-radius: var(--r); background: none; color: var(--ink-3); cursor: pointer; }
.sepet-kaldir:hover { color: var(--red); border-color: var(--line-2); background: var(--surface); }
.sepet-kaldir:focus-visible, .sepet-bosalt:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.sepet-tablo-alt { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px; color: var(--ink-2); font-size: 13px; }
.sepet-tablo-alt > span { min-width: 0; }
.sepet-bosalt { flex: none; font: inherit; gap: 6px; padding: 0; border: 0; border-radius: 0; background: none; color: var(--ink-2); cursor: pointer; }
.sepet-bosalt:hover { background: none; color: var(--red); }
.sepet-bosalt .ikon { width: 15px; height: 15px; }
.sepet-ozet { position: sticky; top: 16px; }
.sepet-ozet h2, .detay-kart > h2 { font-size: 15px; font-weight: 600; margin: 0; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.sepet-ozet p, .detay-kart p { margin: 0; }
.sepet-kalemler { padding: 14px 16px; display: grid; gap: 8px; }
.sepet-kalemler p { display: flex; justify-content: space-between; gap: 12px; color: var(--ink-2); }
.sepet-kalemler p > span:last-child { color: var(--ink); white-space: nowrap; }
.sepet-ana { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--line-2); background: var(--surface-2); }
.sepet-ana > span { font-weight: 600; }
.sepet-ana small { display: block; font-weight: 400; color: var(--ink-2); font-size: 12.5px; }
.sepet-ana b { font-size: 20px; font-weight: 600; white-space: nowrap; }
.sepet-ozet-alt { padding: 16px; display: grid; gap: 12px; border-top: 1px solid var(--line); }
.sepet-ozet-alt > * { min-width: 0; }
.sepet-ozet h2 + .sepet-ozet-alt { border-top: 0; }
/* Onaya giden sepette "Onaylayana not" alanı (ön izleme: .bilgi ve .alan). */
.sepet-bilgi { padding: 14px 16px; display: grid; gap: 12px; border-top: 1px solid var(--line); }
.sepet-alan { display: grid; gap: 5px; }
.sepet-alan label { display: flex; justify-content: space-between; color: var(--ink-2); font-size: 12.5px; font-weight: 500; }
.sepet-alan label span { color: var(--ink-3); font-weight: 400; }
.sepet-alan textarea { display: block; width: 100%; min-height: 58px; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); color: var(--ink); font: inherit; resize: vertical; }
.sepet-alan textarea:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.sepet-not { display: flex; gap: 8px; color: var(--ink-2); font-size: 12.5px; line-height: 1.4; }
.sepet-not .ikon { width: 15px; height: 15px; margin-top: 1px; }
/* Uyarı kutusu; sipariş hatası (p.portal-error, SiparisVer'in ret mesajı) aynı kutuyla basılır. */
.sepet-uyari, .sepet p.portal-error { display: flex; gap: 9px; align-items: flex-start; padding: 10px 12px; border: 1px solid #EBC4BF; border-radius: var(--r); background: var(--red-tint); color: var(--red); font-size: 13px; font-weight: 400; line-height: 1.4; }
.sepet p.portal-error { margin: 0 0 16px; }
.sepet-uyari .ikon { width: 16px; height: 16px; margin-top: 1px; }
.sepet-bos { padding: 64px 24px; display: grid; justify-items: center; gap: 8px; text-align: center; }
.sepet-bos > .ikon { width: 44px; height: 44px; stroke-width: 1.25; color: var(--ink-3); margin-bottom: 6px; }
.sepet-bos b { font-size: 16px; font-weight: 600; }
.sepet-bos p { margin: 0 0 12px; color: var(--ink-2); }
.sepet-bos .sepet-btn.dolu { width: auto; height: 40px; padding: 0 24px; font-size: 14px; }
@media (max-width: 1020px) {
.sepet-duzen { grid-template-columns: minmax(0, 1fr); }
.sepet-ozet { position: static; }
}
@media (max-width: 640px) {
.sepet-devam { margin-left: 0; }
}
/* ---------- siparişlerim (0.22 §7): sekmeler, araçlar, yerinde açılan satır ----------
Ölçüler onaylı ön izlemeden alındı (docs/prototypes/portal-siparislerim.html). Kök .katalog sınıfını da taşır: başlık, kart,
tablo, arama kutusu ve seçim kutusu kataloğun, düğme, yatay kayan kap ve boş durum sepetin kurallarıdır; burada yalnız bu
ekrana özgü olanlar durur. Sekme şeridi yatay kaymaz: dar ekranda sekmeler alt satıra iner. */
.sepet-btn.kucuk { height: 30px; padding: 0 10px; font-size: 13px; gap: 6px; }
.siparis-sekmeler { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line-2); margin-bottom: 12px; }
.siparis-sekmeler a { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; color: var(--ink-2); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.siparis-sekmeler a:hover { color: var(--ink); text-decoration: none; }
.siparis-sekmeler a[aria-current="true"] { color: var(--brand); border-bottom-color: var(--brand); }
.siparis-sekmeler a:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.siparis-sekmeler em { font-style: normal; font-size: 12px; background: var(--surface-2); border-radius: 9px; padding: 0 7px; line-height: 18px; color: var(--ink-2); }
.siparis-araclar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.siparis-araclar > * { min-width: 0; }
.siparis-araclar .katalog-ara { flex: 1 1 280px; max-width: 420px; }
.siparis-araclar .katalog-ara input { height: 38px; padding: 0 12px 0 38px; }
.siparis-araclar .katalog-ara .ikon { left: 11px; top: 10px; }
.siparis-araclar .katalog-birim { height: 38px; }
.siparis-araclar .sepet-btn { height: 38px; }
.siparis-acik-ozet { margin-left: auto; color: var(--ink-2); white-space: nowrap; }
.siparis-acik-ozet b { color: var(--ink); font-weight: 600; }
.siparis-tablo { min-width: 760px; }
/* Başlık satırı yatay kayan kabın içindedir; kataloğun yapışkan başlığı burada kullanılmaz. */
.siparis-tablo th { position: static; }
.siparis-tablo > tbody > tr > td { padding: 11px 12px; }
.siparis-satir { cursor: pointer; }
.siparis-ok { width: 52px; }
.siparis-no a { font-weight: 600; color: var(--ink); }
.siparis-no a:hover { color: var(--brand); }
.siparis-icerik { width: 36%; }
.siparis-icerik small, .siparis-tarih small { display: block; color: var(--ink-3); font-size: 12.5px; }
.siparis-tutar { white-space: nowrap; font-weight: 600; }
.siparis-islem { white-space: nowrap; text-align: right; }
/* Durum rozeti: renk her zaman yazıyla birlikte. Biçim taşıyıcı sınıftadır; ton sınıfları (.durum-*, bilesenler.css) yalnız renk
taşır. Tonsuz rozet (iade, taslak) nötrdür. Kırmızı tokenları portala özgü olduğundan .durum-kirmizi burada tanımlanır. */
.siparis-durum { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; border-radius: 3px; padding: 2px 8px; white-space: nowrap; }
/* Nötr renk :where ile yazılır (özgüllüğü sıfır): ton sınıfı bu dosyadan önce yüklense de onu ezer. */
:where(.siparis-durum) { background: var(--surface-2); color: var(--ink-2); }
.siparis-durum::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.siparis-durum.durum-kirmizi { background: var(--red-tint); color: var(--red); }
.siparis-durum-tarih { display: block; color: var(--ink-3); font-size: 12px; margin-top: 3px; }
/* Satırı yerinde açma: ok düğmesi kalemleri getirir (portal.js); açık satır ve altındaki kalem satırı aynı zemindedir. */
.siparis-ac { width: 28px; height: 28px; padding: 0; display: inline-grid; place-items: center; border: 1px solid transparent; border-radius: var(--r); background: none; color: var(--ink-3); cursor: pointer; }
.siparis-ac:hover { border-color: var(--line-2); color: var(--ink); background: var(--surface); }
.siparis-ac:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.siparis-ac .ikon { width: 16px; height: 16px; }
.siparis-satir.acik .siparis-ac .ikon { transform: rotate(90deg); }
.siparis-tablo > tbody > tr.siparis-satir.acik > td { background: #FAFBFD; border-bottom-color: transparent; }
.siparis-tablo > tbody > tr.siparis-kalemler > td { padding: 0 12px 14px 52px; background: #FAFBFD; }
.siparis-tablo > tbody > tr.siparis-kalemler:last-child > td { border-bottom-left-radius: var(--r); border-bottom-right-radius: var(--r); }
.siparis-kalem-kutu { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; }
.siparis-kalem-kutu table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.siparis-kalem-kutu th { position: static; background: var(--surface-2); border-bottom: 1px solid var(--line); border-radius: 0; padding: 7px 12px; font-size: 12px; }
.siparis-kalem-kutu td { padding: 8px 12px; background: var(--surface); border-bottom: 1px solid var(--line); font-size: 13px; overflow-wrap: anywhere; }
.siparis-kalem-kutu tbody tr:hover td { background: var(--surface); }
.siparis-kalem-kutu .k-birim { width: 190px; }
.siparis-kalem-kutu .k-miktar { width: 110px; }
.siparis-kalem-kutu .k-para { width: 150px; }
.siparis-kalem-alt { display: flex; gap: 6px 20px; flex-wrap: wrap; padding: 10px 12px; border-top: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink-2); font-size: 13px; }
.siparis-kalem-alt b { color: var(--ink); font-weight: 600; }
.siparis-devam { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; padding: 14px; margin-top: 12px; color: var(--ink-2); font-size: 13px; }
.siparis-devam > * { min-width: 0; }
.siparis-donen { width: 16px; height: 16px; flex: none; border: 2px solid var(--line-2); border-top-color: var(--brand); border-radius: 50%; }
@keyframes siparis-don { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: no-preference) {
.siparis-ac .ikon { transition: transform .12s; }
.siparis-donen { animation: siparis-don .8s linear infinite; }
}
@media (max-width: 760px) {
.siparis-acik-ozet { margin-left: 0; white-space: normal; }
.siparis-tablo > tbody > tr.siparis-kalemler > td { padding-left: 12px; }
.siparis-kalem-kutu .k-birim { width: 120px; }
.siparis-kalem-kutu .k-miktar { width: 80px; }
.siparis-kalem-kutu .k-para { width: 120px; }
}
/* ---------- sipariş detayı (0.22 §7): durum akışı, kalemler, tutar, sevk bilgisi, işlem geçmişi ----------
Ölçüler onaylı ön izlemeden alındı (docs/prototypes/portal-siparis-detay.html). Kök .katalog sınıfını da taşır: başlık, kart, tablo
ve sepete ekleme düğmesi kataloğun; iki sütunlu düzen, yatay kayan kap, ürün hücresi, tutar kutusu ve uyarı kutusu sepetin; durum
rozeti Siparişlerim'in kurallarıdır. Burada yalnız bu ekrana özgü olanlar durur. Kalem tablosu dar ekranda kendi kabında yatay
kayar (.sepet-kaydir, en az 760 piksel): sabit sütunlar ürün adını ezmez. */
.detay-geri { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; color: var(--ink-2); font-size: 13px; }
.detay-geri .ikon { width: 15px; height: 15px; }
.detay-baslik { align-items: center; gap: 8px 12px; margin-bottom: 4px; }
.detay-baslik-sag { margin: 0 0 0 auto; display: inline-flex; gap: 8px; }
.detay-baslik-sag .sepet-btn:disabled { border-color: var(--line-2); color: var(--ink-3); background: var(--surface-2); cursor: not-allowed; }
.detay-alt-baslik { margin-bottom: 16px; }
.detay-hata { margin: 0 0 16px; }
.detay-iptal { margin-bottom: 20px; padding: 12px 14px; font-size: 14px; }
.detay-iptal .ikon { width: 18px; height: 18px; }
.detay-iptal > span { min-width: 0; color: var(--ink); }
.detay-iptal b { color: var(--red); font-weight: 600; }
/* Durum akışı: beş adım eşit sütunda; adımlar arasındaki çizgi adımın solundan öncekinin ortasına uzanır. */
.detay-akis { list-style: none; margin: 0 0 20px; padding: 18px 8px 16px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.detay-adim { position: relative; display: grid; justify-items: center; align-content: start; gap: 6px; min-width: 0; padding: 0 6px; text-align: center; color: var(--ink-3); overflow-wrap: anywhere; }
.detay-adim::before { content: ""; position: absolute; top: 13px; right: 50%; width: 100%; height: 2px; background: var(--line-2); }
.detay-adim:first-child::before { display: none; }
.detay-adim i { position: relative; width: 28px; height: 28px; display: grid; place-items: center; border: 2px solid var(--line-2); border-radius: 50%; background: var(--surface); font-style: normal; font-size: 12.5px; font-weight: 600; }
.detay-adim i .ikon { width: 14px; height: 14px; stroke-width: 2.5; }
.detay-adim b { font-weight: 500; font-size: 13px; }
.detay-adim small { font-size: 12px; min-height: 17px; }
.detay-adim.tamam { color: var(--ink); }
.detay-adim.tamam small, .detay-adim.simdi small { color: var(--ink-2); }
.detay-adim.tamam::before, .detay-adim.simdi::before { background: var(--brand); }
.detay-adim.tamam i { background: var(--brand); border-color: var(--brand); color: #fff; }
.detay-adim.simdi { color: var(--brand); }
.detay-adim.simdi i { border-color: var(--brand); color: var(--brand); box-shadow: 0 0 0 4px var(--brand-tint); }
.detay-sutun { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.detay-urun-adi { font-weight: 500; color: var(--ink-3); }
.detay-kart .katalog-stok { margin-top: 2px; font-size: 12.5px; }
.detay-bilgi { margin: 0; padding: 14px 16px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px 16px; }
.detay-bilgi dt { color: var(--ink-2); }
.detay-bilgi dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.detay-gecmis { list-style: none; margin: 0; padding: 6px 16px 10px; }
.detay-gecmis li { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.detay-gecmis li:last-child { border-bottom: 0; }
.detay-gecmis time { color: var(--ink-2); font-size: 13px; }
.detay-gecmis b { font-weight: 500; }
.detay-gecmis small { display: block; color: var(--ink-3); font-size: 12.5px; }
@media (max-width: 640px) {
.detay-baslik-sag { margin-left: 0; }
/* 390 genişlikte sütun yaklaşık 70 pikseldir: en uzun etiket ("Hazırlanıyor") 11 pikselde bölünmeden sığar. */
.detay-akis { padding-inline: 2px; }
.detay-adim { padding: 0 1px; }
.detay-adim b { font-size: 11px; }
.detay-adim small { font-size: 11px; }
.detay-gecmis li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
/* ---------- hesabım (0.22 §7): özet kutuları, cari hareket tablosu, kurum bilgileri ----------
Ölçüler onaylı ön izlemeden alındı (docs/prototypes/portal-hesabim.html). Kök .katalog sınıfını da taşır: başlık, kart, tablo ve
seçim kutusu kataloğun; iki sütunlu düzen, yatay kayan kap, düğme ve not satırı sepetin; kart başlığı, bilgi listesi ve sağ sütun
sipariş detayının; alt bilgi Siparişlerim'in kurallarıdır. Burada yalnız bu ekrana özgü olanlar durur. Hareket tablosu dar ekranda
kendi kabında yatay kayar (.sepet-kaydir, en az 720 piksel): para sütunları açıklamayı ezmez. */
.hesap-ozetler { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0 0 20px; }
.hesap-ozet { padding: 14px 16px; min-width: 0; }
.hesap-ozet dt { color: var(--ink-2); font-size: 12.5px; font-weight: 500; }
.hesap-ozet dd { margin: 0; }
.hesap-ozet dt + dd { font-size: 22px; font-weight: 600; letter-spacing: -.01em; margin-top: 4px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hesap-ozet .hesap-ozet-not { color: var(--ink-3); font-size: 12.5px; margin-top: 4px; }
.hesap-cubuk { height: 6px; border-radius: 3px; background: var(--surface-2); margin-top: 9px; overflow: hidden; }
.hesap-cubuk i { display: block; height: 100%; background: var(--brand); border-radius: 3px; }
.hesap-duzen { grid-template-columns: minmax(0, 1fr) 320px; }
.hesap-kart > h2 { display: flex; align-items: baseline; gap: 10px; }
.hesap-kart > h2 span { font-weight: 400; font-size: 13px; color: var(--ink-2); }
.hesap-araclar { display: flex; gap: 10px 14px; align-items: center; flex-wrap: wrap; margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.hesap-araclar > * { min-width: 0; }
.hesap-bos { padding: 40px 16px; text-align: center; color: var(--ink-2); }
.hesap-tablo { min-width: 720px; }
/* Başlık satırı yatay kayan kabın içindedir; kataloğun yapışkan başlığı burada kullanılmaz. Kart başlığının altında köşe düzdür. */
.hesap-tablo th { position: static; border-radius: 0; }
.hesap-tablo td { padding: 10px 12px; }
.hesap-tablo .hesap-tarih, .hesap-tablo .cari-borc, .hesap-tablo .cari-alacak, .hesap-tablo .cari-bakiye { white-space: nowrap; }
.hesap-tablo .cari-alacak { color: var(--green); }
.hesap-tablo .cari-bakiye { font-weight: 600; }
.hesap-soluk { color: var(--ink-3); }
.hesap-siparis { font-weight: 500; }
/* Tür rozeti: durum rozetinin biçimi, noktasız. Ton sınıfları (.durum-*, bilesenler.css) yalnız renk taşır; tonsuz rozet nötrdür
(:where ile, özgüllüğü sıfır: ton sınıfı bu dosyadan önce yüklense de onu ezer). */
.hesap-tur { display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 500; border-radius: 3px; padding: 2px 8px; white-space: nowrap; }
:where(.hesap-tur) { background: var(--surface-2); color: var(--ink-2); }
.hesap-iletisim { list-style: none; margin: 0; padding: 4px 16px 12px; }
.hesap-iletisim li { display: flex; align-items: center; gap: 9px; padding: 7px 0; min-width: 0; overflow-wrap: anywhere; }
.hesap-iletisim .ikon { width: 16px; height: 16px; color: var(--ink-3); }
/* Havale kutusu: her banka hesabı bir bilgi listesidir, hesaplar çizgiyle ayrılır. Kopyalama düğmesi portal.js'in genel
data-kopyala davranışına bağlıdır; panoya yazılınca kısa süre .kopyalandi sınıfını taşır. */
.hesap-havale { margin: 0; padding: 12px 16px; display: grid; gap: 10px; }
.hesap-havale + .hesap-havale { border-top: 1px solid var(--line); }
.hesap-havale div { display: grid; gap: 2px; min-width: 0; }
.hesap-havale dt { color: var(--ink-2); font-size: 12.5px; }
.hesap-havale dd { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.hesap-kopyala { width: 28px; height: 28px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); color: var(--ink-2); cursor: pointer; display: inline-grid; place-items: center; flex: none; padding: 0; }
.hesap-kopyala:hover { color: var(--brand); border-color: var(--brand); }
.hesap-kopyala.kopyalandi { color: var(--green); border-color: var(--green); }
.hesap-kopyala .ikon { width: 14px; height: 14px; }
.detay-kart .hesap-havale-not { padding: 12px 16px; border-top: 1px solid var(--line); font-weight: 500; overflow-wrap: anywhere; }
@media (max-width: 1020px) {
.hesap-duzen { grid-template-columns: minmax(0, 1fr); }
.hesap-ozetler { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.hesap-ozet dt + dd { font-size: 18px; }
}
/* ---------- şifre (0.22 §7): form kartı ve kişinin kendi hesap bilgileri ----------
Ölçüler onaylı ön izlemeden alındı (docs/prototypes/portal-sifre.html). Kök .katalog sınıfını da taşır: başlık ve kart kataloğun;
kart başlığı ve bilgi listesi sipariş detayının; düğme ve not satırı sepetin kurallarıdır. Etiketi üstte duran alan (.portal-alan)
ve kartın düğme şeridi (.portal-form-alt) bu ekrana özgü değildir: portalın öteki formları da bunları kullanır. */
.portal-alan { display: grid; gap: 5px; min-width: 0; }
.portal-alan > label { font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.portal-alan input { font: inherit; width: 100%; height: 40px; margin: 0; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); color: var(--ink); }
.portal-alan input:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.portal-alan-ipucu { color: var(--ink-3); font-size: 12.5px; }
.portal-form-alt { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 14px 16px; border-top: 1px solid var(--line); border-radius: 0 0 var(--r) var(--r); background: var(--surface-2); }
.portal-form-alt .sepet-btn.dolu { width: auto; height: 40px; padding: 0 18px; font-size: 14px; }
.sifre-duzen { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 360px); gap: 20px; align-items: start; }
.sifre-duzen > * { min-width: 0; }
.sifre-alanlar { padding: 16px; display: grid; gap: 14px; }
.sifre-bildirim { max-width: 900px; margin: 0 0 14px; }
.sifre-bildirim.hata { border-color: #EBC4BF; }
.sifre-bildirim > span { min-width: 0; }
@media (max-width: 940px) {
.sifre-duzen { grid-template-columns: minmax(0, 1fr); }
}
/* ---------- pencere (0.22 §7): yerel |