/* ═══════════════════════════════════════════════════════════════════════════
FiyatPlus+ tasarım dili v2 "Derinlik" — BİLEŞENLER (TS-03, 35 çekirdek +
§11 ekleri + B-55 Kahraman, B-44 Toast, bento, sayaç)
Sınıf adları ve BEM değiştiricileri v1 (27.10) ile aynı; v2 yalnız görsel
dili değiştirir: sıcak yüzeyler, katmanlı gölge + 1 px iç ışık kenarı,
hover'da yay ile −2 px kalkma (yalnız hover: hover), basınca 0,97.
Kurallar: her seçici .k-* ile başlar; genel eleman seçicisi yok; !important
yok; renk/ölçü/hareket tokens.css'ten; dokunma hedefi ≥ 44 px; durum = ikon
+ sözcük + renk; layout özellikleri canlandırılmaz; reduced-motion en sonda.
Sarı dolgu: .k-buton--birincil (29.10 kullanıcı kararı: panelde ana düğmeler sarı) ve .k-buton--sari
(kahraman kartın tek eylemi). Seçili çip/seçenek (aria-pressed) 31.10 K4 KR-04 b: açık sarı + ince koyu çizgi + onay
simgesi; konum bildiren sayfalama (aria-current) mürekkep, segment (aria-checked) beyaz kabarık kalır.
K4 ortak temel (31.10, IP-01): sayfa çerçevesi, başlık yazı tipi, not, tablo başlığı/sıralama, boş durum yerleşimi,
metin yardımcıları; ayrıntı TS-03 §11.
═══════════════════════════════════════════════════════════════════════════ */
/* ── 0. Temel ──────────────────────────────────────────────────────────── */
.k-sayfa {
font-family: var(--k-yazi-govde);
font-size: var(--k-boyut-govde);
line-height: var(--k-satir-govde);
font-feature-settings: "ss01";
font-kerning: normal;
color: var(--k-murekkep);
-webkit-font-smoothing: antialiased;
}
/* Sayfa çerçevesi (K4 OR-01/OR-02, KR-02 a): sola yaslı, azami içerik genişliği + tek sayfa kenarı.
.k-sayfa'nın kendisine azami/dolgu VERİLMEZ: 49 görünümde kök, ikisinde (Geçmiş, Web Değerlemeleri) ayrıntı penceresinin
modal-content'i; sayfalar kökte değiştiriciyi seçerek benimser ve kendi azami/ek dolgularını kaldırır.
--kap 1200 (form, metin, ana sayfa) · --genis 1440 (tablo, liste, çok sütun) · --dar 720 (tek alanlı arama).
Dolgu = --k-kenar − --k-kabuk-oluk → h1 menü kenarından 16 / 24 / 32 px; azami genişlik dolgudan bağımsız içerik ölçüsü.
(0,2,0): Bootstrap .container-fluid dolgusunu ezer; .px-* gibi !important yardımcıları ezmez, kökten kaldırılır. */
.k-sayfa:is(.k-sayfa--kap, .k-sayfa--genis, .k-sayfa--dar) {
--k-sayfa-dolgu: max(0px, calc(var(--k-kenar) - var(--k-kabuk-oluk)));
box-sizing: border-box;
width: 100%;
/* 31.10 kullanıcı kararı: sayfalar yine tam genişlik (fluid); azami genişlik kaldırıldı. --kap/--genis/--dar ölçüleri
belirteç olarak kalır (kartlar ve arama kutuları kendi ölçüsünü kullanabilir); sayfa kenarı dolgusu sürer. */
max-width: none;
margin-inline: 0 auto;
padding-inline: var(--k-sayfa-dolgu);
}
.k-sayfa.k-sayfa--kap { --k-sayfa-azami: var(--k-icerik-azami); }
.k-sayfa.k-sayfa--genis { --k-sayfa-azami: var(--k-icerik-azami-genis); }
.k-sayfa.k-sayfa--dar { --k-sayfa-azami: var(--k-icerik-azami-dar); }
/* Başlık yazı tipi (K4 OR-03, KR-07 a): responsive.css h1-h6'ya Baloo 2 veriyor; yeni sayfalarda içerik başlıkları Archivo.
Kabuk (üst çubuk, menü) .k-sayfa dışında, etkilenmez. Yetim sözcük (OR-15): başlık dengeli, paragraf düzgün kırılır.
text-wrap kısaltması DEĞİL, text-wrap-style boyu: kısaltma text-wrap-mode'u da sıfırlar ve sayfaların bilerek koyduğu
white-space: nowrap'ı (tek satır + üç nokta başlıklar) bozar. */
body.tasarim-yeni .k-sayfa :is(h1, h2, h3, h4, h5, h6, .k-kart__baslik, .k-bos__baslik) {
font-family: var(--k-yazi-baslik);
text-wrap-style: balance;
}
body.tasarim-yeni .k-sayfa :is(p, .k-bos__metin, .k-not) { text-wrap-style: pretty; }
/* Varsayılan sayfa içi zemin (kullanıcı kararı 28.10, P2 Geçmiş Değerlemeler'deki ışık): uygulamanın gri zemini üstünde, içerik
alanının tepesinde sıcak sarı + soğuk mavi iki hafif ışık. main.app-wrapper'a kenardan kenara boyanır (header ve sol menü onun
dışında); ışık merkezi içeriğin başladığı yerde (padding-top = --header-height), üstteki boşluğa yumuşakça taşar — content-box
kökeni header altında ve yanlarda keskin kenarlı bir kutu bırakıyordu. :where → sayfa CSS'i (ör. Ana sayfa) tek seçiciyle ezebilir. */
body.tasarim-yeni :where(.app-wrapper:has(.k-sayfa)) {
background-image:
radial-gradient(60% 300px at 22% var(--header-height, 60px), color-mix(in oklch, var(--k-isik-zemin-sari) 46%, transparent), transparent 72%),
radial-gradient(40% 220px at 92% var(--header-height, 60px), color-mix(in oklch, var(--k-isik-zemin-mavi) 22%, transparent), transparent 70%);
background-size: 100% calc(340px + var(--header-height, 60px));
background-repeat: no-repeat;
}
.k-rakam { font-variant-numeric: tabular-nums lining-nums; }
.k-etiket-buyuk {
font-size: 0.71875rem; /* 11,5 */
font-weight: var(--k-agirlik-yari-kalin);
line-height: var(--k-satir-siki);
letter-spacing: var(--k-harf-aralik-etiket);
text-transform: uppercase; /* lang="tr" şart */
color: var(--k-murekkep-soluk);
}
.k-dipnot { font-size: var(--k-boyut-meta); line-height: var(--k-satir-tablo); color: var(--k-murekkep-ikincil); }
.k-gizli-metin {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.k-ikon { flex: none; width: var(--k-boyut-ikon-md); height: var(--k-boyut-ikon-md); stroke-width: 1.75; }
.k-ikon--sm { width: var(--k-boyut-ikon-sm); height: var(--k-boyut-ikon-sm); stroke-width: 1.6; }
.k-ikon--lg { width: var(--k-boyut-ikon-lg); height: var(--k-boyut-ikon-lg); }
/* Odak: 2 px mürekkep dış + sarı iç (TS-02 §3.2). Klavye odağında hareket yok. */
:is(.k-buton, .k-ikon-buton, .k-takip-buton, .k-secici__oge, .k-sayfalama__oge,
.k-menu__oge, .k-girdi, .k-bayi-secici__dugme, .k-bayi-secici__oge,
.k-geri-bildirim__oge, .k-satir__baglanti, .k-ozet--baglanti, .k-liste-kart__baglanti,
.k-ipucu__tetik, .k-bant__kapat, .k-duyuru__kapat, .k-modal__kapat,
.k-kart__baslik-baglanti, .k-cekmece__kapat, .k-toast__eylem):focus-visible {
outline: var(--k-odak-kalinlik) solid var(--k-odak);
outline-offset: var(--k-odak-kalinlik);
box-shadow: 0 0 0 4px var(--k-odak-ic);
}
/* Görsel olarak küçük eylemlerde görünmez 44 px dokunma alanı. */
.k-dokunma-genis { position: relative; }
.k-dokunma-genis::before { content: ""; position: absolute; inset: -6px; border-radius: inherit; }
/* ── B-23 Düğme (.k-buton) ─────────────────────────────────────────────── */
.k-buton {
-webkit-appearance: none;
appearance: none;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--k-bosluk-2);
min-height: var(--k-boyut-dokunma);
min-width: var(--k-boyut-dokunma);
padding: 0 var(--k-bosluk-4);
border: 0;
border-radius: var(--k-kose-md);
background: transparent;
color: var(--k-murekkep);
font-family: var(--k-yazi-govde);
font-size: var(--k-boyut-sm);
font-weight: var(--k-agirlik-yari-kalin);
line-height: var(--k-satir-siki);
text-align: center;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
user-select: none;
-webkit-tap-highlight-color: transparent;
transition: transform var(--k-sure-orta) var(--k-egri-yay),
box-shadow var(--k-sure-kisa) var(--k-egri-cikis),
background-color var(--k-sure-kisa) var(--k-egri-cikis),
color var(--k-sure-kisa) var(--k-egri-cikis);
}
.k-buton:active:not([aria-disabled="true"]):not(:disabled) {
transform: scale(0.97);
transition-duration: var(--k-sure-anlik);
}
/* Birincil (açık yüzeyde): sarı gradyan (29.10 kullanıcı kararı; önceden mürekkep). */
.k-buton--birincil {
background: linear-gradient(180deg, var(--kb-dugme-sari-ust), var(--kb-dugme-sari-alt));
color: var(--kb-dugme-sari-metin);
box-shadow: var(--k-golge-sari);
}
.k-buton--birincil:hover { color: var(--kb-dugme-sari-metin); box-shadow: var(--k-golge-sari-ustunde); }
/* İkincil: yüzey gradyanı + kart gölgesi + iç ışık. */
.k-buton--ikincil {
background: linear-gradient(180deg, var(--kb-dugme-ikincil-ust), var(--kb-dugme-ikincil-alt));
color: var(--kb-dugme-ikincil-metin);
box-shadow: var(--k-golge-kart);
}
.k-buton--ikincil:hover { color: var(--kb-dugme-ikincil-metin); box-shadow: var(--k-golge-kart-ustunde); }
/* Sessiz (sade). */
.k-buton--sessiz {
padding-inline: 10px;
border-radius: 10px;
color: var(--kb-dugme-sade-metin);
}
.k-buton--sessiz:hover { background: var(--k-yuzey-batik); color: var(--k-murekkep); }
/* Tehlike. */
.k-buton--tehlike {
background: linear-gradient(180deg, var(--kr-kirmizi-700), var(--kr-kirmizi-800));
color: var(--kb-dugme-tehlike-metin);
box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.14), 0 1px 2px oklch(0.3 0.1 25 / 0.35), 0 8px 18px -8px oklch(0.4 0.15 25 / 0.5);
}
.k-buton--tehlike:hover { color: var(--kb-dugme-tehlike-metin); }
/* Sarı: YALNIZ koyu kahraman kartın tek birincil eylemi (TS-02 §3.3). */
.k-buton--sari {
background: linear-gradient(180deg, var(--kb-dugme-sari-ust), var(--kb-dugme-sari-alt));
color: var(--kb-dugme-sari-metin);
box-shadow: var(--k-golge-sari);
}
.k-buton--sari:hover { color: var(--kb-dugme-sari-metin); box-shadow: var(--k-golge-sari-ustunde); }
/* Cam: kahraman içindeki ikincil düğmeler. */
.k-buton--cam {
background: var(--kb-dugme-cam-zemin);
color: var(--kb-dugme-cam-metin);
box-shadow: var(--k-golge-cam);
}
.k-buton--cam:hover { background: var(--kb-dugme-cam-zemin-ustunde); color: var(--kb-dugme-cam-metin); }
@media (hover: hover) {
.k-buton--birincil:hover,
.k-buton--ikincil:hover,
.k-buton--sari:hover,
.k-buton--cam:hover { transform: translateY(-1px); }
}
/* Büyük: 52 px; telefonda tam genişlik. */
.k-buton--buyuk {
min-height: var(--k-boyut-dugme-buyuk);
padding: 0 22px;
border-radius: var(--k-kose-buyuk-dugme);
font-size: 0.96875rem; /* 15,5 */
width: 100%;
}
@media (min-width: 768px) { .k-buton--buyuk { width: auto; } }
.k-buton--tam { width: 100%; }
.k-buton--kucuk { min-height: 36px; padding: 0 var(--k-bosluk-3); border-radius: 10px; font-size: 0.8125rem; }
.k-buton--kucuk::before { content: ""; position: absolute; inset: -4px; border-radius: inherit; }
/* Pasif: aria-disabled tercih edilir. Tüm etkileşimli bileşenlerde tek dil (K4 OR-21): kendi varyantı korunur, %45 opaklık;
gri dolguya çevrilmez (sayfa CSS'inde :disabled { background: gri } yazılmaz). */
.k-buton:disabled,
.k-buton[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; box-shadow: none; }
/* Yükleniyor: dönen gösterge yok; altta kayan 3 px çizgi. */
.k-buton[aria-busy="true"] { cursor: progress; pointer-events: none; overflow: hidden; }
.k-buton[aria-busy="true"]::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 3px;
background: currentColor;
opacity: 0.55;
transform-origin: left center;
animation: k-kayan-cizgi 1.2s var(--k-egri-cikis) infinite;
}
.k-buton-grup { display: flex; flex-wrap: wrap; gap: 10px; }
.k-buton-grup > .k-buton { flex: 1 1 calc(50% - 10px); }
.k-buton-grup > .k-buton--buyuk { flex-basis: 100%; }
@media (min-width: 768px) { .k-buton-grup > .k-buton { flex: 0 0 auto; } }
/* ── B-54 Kontör maliyet etiketi + bakiye (.k-kontor) ──────────────────── */
.k-kontor {
display: inline-flex;
align-items: center;
gap: var(--k-bosluk-1);
font-size: var(--k-boyut-xs);
font-weight: var(--k-agirlik-orta);
line-height: var(--k-satir-siki);
color: var(--k-murekkep-ikincil);
font-variant-numeric: tabular-nums;
}
/* Düğme içi: "Araç değerle | 1 kontör" — %70 opaklık, 1 px ayraç. */
.k-kontor--dugme-ici {
margin-left: 2px;
padding-left: var(--k-bosluk-2);
border-left: 1px solid currentColor;
color: inherit;
opacity: 0.7;
font-size: var(--k-boyut-meta);
font-weight: var(--k-agirlik-orta);
}
.k-kontor--etiket {
height: 22px;
padding: 0 var(--k-bosluk-2);
border-radius: var(--k-kose-tam);
background: var(--k-yuzey-batik);
color: var(--k-murekkep-ikincil);
box-shadow: inset 0 0 0 1px oklch(0 0 0 / 0.05);
}
.k-kontor--ucretsiz { color: var(--k-basari); }
.k-kontor--bakiye { font-size: var(--k-boyut-sm); font-weight: var(--k-agirlik-normal); color: var(--k-murekkep-ikincil); }
.k-kontor--bakiye strong { font-size: 1.125rem; font-weight: var(--k-agirlik-kalin); letter-spacing: -0.01em; color: var(--k-murekkep); }
.k-kontor--yetersiz {
padding: var(--k-bosluk-2) var(--k-bosluk-3);
border-radius: var(--k-kose-md);
background: var(--k-uyari-zemin);
color: var(--k-uyari);
font-size: var(--k-boyut-sm);
box-shadow: var(--k-golge-batik);
}
/* ── .k-sayac — kontör sayacı (stil; 700 ms tek sefer sayımı pilot JS'inde) */
.k-sayac {
display: inline-block;
font-variant-numeric: tabular-nums lining-nums;
font-weight: var(--k-agirlik-kalin);
letter-spacing: -0.01em;
white-space: nowrap;
}
.k-sayac--buyuk { font-size: 1.125rem; }
.k-sayac--metrik { font-size: 1.875rem; letter-spacing: -0.025em; line-height: 1.05; }
/* ── B-24 İkon / satır eylem düğmesi (.k-ikon-buton) ───────────────────── */
.k-ikon-buton {
-webkit-appearance: none;
appearance: none;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--k-bosluk-2);
flex: none;
min-width: var(--k-boyut-dokunma);
height: var(--k-boyut-dokunma);
padding: 0;
border: 0;
border-radius: var(--k-kose-md);
background: var(--k-yuzey);
color: var(--k-murekkep-ikincil);
font-family: var(--k-yazi-govde);
font-size: var(--k-boyut-sm);
font-weight: var(--k-agirlik-orta);
text-decoration: none;
cursor: pointer;
box-shadow: var(--k-golge-0), var(--k-golge-ic-isik);
-webkit-tap-highlight-color: transparent;
transition: color var(--k-sure-kisa) var(--k-egri-cikis), box-shadow var(--k-sure-kisa) var(--k-egri-cikis), transform var(--k-sure-orta) var(--k-egri-yay);
}
.k-ikon-buton:hover { color: var(--k-murekkep); box-shadow: var(--k-golge-1), var(--k-golge-ic-isik); }
@media (hover: hover) { .k-ikon-buton:hover { transform: translateY(-1px); } }
.k-ikon-buton:active { transform: scale(0.97); transition-duration: var(--k-sure-anlik); }
.k-ikon-buton--etiketli { padding: 0 var(--k-bosluk-3); }
.k-ikon-buton--yalin { background: transparent; box-shadow: none; }
.k-ikon-buton--yalin:hover { background: var(--k-yuzey-batik); box-shadow: none; }
.k-ikon-buton[aria-pressed="true"] {
background: linear-gradient(180deg, var(--kb-dugme-birincil-ust), var(--kb-dugme-birincil-alt));
color: var(--kb-dugme-birincil-metin);
box-shadow: var(--k-golge-birincil);
}
.k-ikon-buton:disabled,
.k-ikon-buton[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
/* ── B-28 Karşılaştır / Takip et (.k-takip-buton) ──────────────────────── */
.k-takip-buton {
-webkit-appearance: none;
appearance: none;
display: inline-flex;
align-items: center;
gap: var(--k-bosluk-2);
min-height: var(--k-boyut-dokunma);
padding: 0 var(--k-bosluk-3);
border: 0;
border-radius: var(--k-kose-md);
background: linear-gradient(180deg, var(--kb-dugme-ikincil-ust), var(--kb-dugme-ikincil-alt));
color: var(--k-murekkep);
font-family: var(--k-yazi-govde);
font-size: var(--k-boyut-sm);
font-weight: var(--k-agirlik-orta);
cursor: pointer;
box-shadow: var(--k-golge-kart);
transition: box-shadow var(--k-sure-kisa) var(--k-egri-cikis), transform var(--k-sure-orta) var(--k-egri-yay);
}
.k-takip-buton:hover { box-shadow: var(--k-golge-kart-ustunde); }
.k-takip-buton:active { transform: scale(0.97); transition-duration: var(--k-sure-anlik); }
.k-takip-buton[aria-pressed="true"] {
background: linear-gradient(180deg, var(--kb-dugme-birincil-ust), var(--kb-dugme-birincil-alt));
color: var(--kb-dugme-birincil-metin);
box-shadow: var(--k-golge-birincil);
}
.k-takip-buton:disabled,
.k-takip-buton[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
/* ── B-12 Arama / giriş (.k-arama) + girdi (.k-girdi) ──────────────────── */
/* responsive.css'in genel girdi kuralı (0,4,1) eski kodda kalıyor; !important
yerine :not(#k-yok) ile bileşen kuralı öne alınır. */
.k-girdi:not(#k-yok) {
-webkit-appearance: none;
appearance: none;
display: block;
width: 100%;
min-height: var(--k-boyut-dokunma);
padding: 0 var(--k-bosluk-3);
border: 0;
border-radius: var(--k-kose-md);
background: var(--kb-girdi-zemin);
color: var(--kb-girdi-metin);
font-family: var(--k-yazi-govde);
font-size: var(--k-boyut-md); /* 16 px: iOS yakınlaştırma yok */
line-height: var(--k-satir-govde);
box-shadow: var(--k-golge-girdi);
transition: background-color var(--k-sure-kisa) var(--k-egri-cikis), box-shadow var(--k-sure-kisa) var(--k-egri-cikis);
}
.k-girdi::placeholder { color: var(--kb-girdi-yer-tutucu); opacity: 1; }
.k-girdi:not(#k-yok):hover { box-shadow: inset 0 1px 2px oklch(0.25 0.02 268 / 0.08), inset 0 0 0 1px oklch(0.25 0.02 268 / 0.12); }
.k-girdi:not(#k-yok):focus {
outline: none;
background: var(--kb-girdi-zemin-odak);
box-shadow: inset 0 0 0 1px var(--k-murekkep), 0 0 0 4px var(--k-odak-ic);
}
.k-girdi:not(#k-yok)[aria-invalid="true"],
.k-girdi--hata:not(#k-yok) { background: var(--k-yuzey); box-shadow: inset 0 0 0 2px var(--kb-girdi-hata-cizgi); }
.k-girdi:not(#k-yok):disabled { color: var(--k-murekkep-ikincil); cursor: not-allowed; opacity: 0.7; }
/* K4 OR-19 / OR-36 emniyeti: dar kapta taşmaz. */
.k-girdi:not(#k-yok) { box-sizing: border-box; max-width: 100%; min-width: 0; }
/* Salt okunur (OR-19): batık değil, düz yüzey + ince çizgi; düzenlenebilir alanla karışmaz. Odak halkası klavye için kalır. */
.k-girdi:not(#k-yok)[readonly],
.k-girdi--saltokunur:not(#k-yok) {
background: transparent;
color: var(--k-murekkep-ikincil);
box-shadow: inset 0 0 0 1px var(--k-cizgi);
cursor: default;
}
.k-girdi:not(#k-yok)[readonly]:hover,
.k-girdi--saltokunur:not(#k-yok):hover { box-shadow: inset 0 0 0 1px var(--k-cizgi); }
.k-girdi:not(#k-yok)[readonly]:focus,
.k-girdi--saltokunur:not(#k-yok):focus { background: transparent; box-shadow: inset 0 0 0 1px var(--k-cizgi); }
.k-girdi:not(#k-yok)[readonly]:focus-visible,
.k-girdi--saltokunur:not(#k-yok):focus-visible { box-shadow: inset 0 0 0 1px var(--k-murekkep), 0 0 0 4px var(--k-odak-ic); }
/* Açılır liste (.k-girdi--secim, select üstünde, isteğe bağlı benimseme): appearance:none okunu kaldırdığı için tek ok
(16 px, sağdan 12). (1,2,0) + odak kuralından sonra: odaktaki background kısaltması oku silmez. Bugün kendi okunu çizen
.dgy-secim / .pky-secim / Destek form-select bu sınıfı almadıkça etkilenmez. */
.k-girdi--secim.k-girdi:not(#k-yok) {
padding-right: calc(var(--k-bosluk-3) + 16px + var(--k-bosluk-2));
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23494d57' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--k-bosluk-3) center;
background-size: 16px 16px;
cursor: pointer;
}
.k-alan { display: grid; gap: 6px; }
.k-alan__etiket { font-size: var(--k-boyut-sm); font-weight: var(--k-agirlik-orta); line-height: var(--k-satir-tablo); color: var(--k-murekkep); }
/* Zorunlu işareti (OR-19): etiketten 3 px sonra, hata renginde; ekran okuyucuya girdinin aria-required'ı söyler. */
.k-alan__zorunlu { margin-inline-start: 3px; color: var(--k-hata); font-weight: var(--k-agirlik-yari-kalin); }
.k-alan__istege-bagli { margin-inline-start: var(--k-bosluk-1); font-weight: var(--k-agirlik-normal); color: var(--k-murekkep-ikincil); }
.k-alan__yardim { font-size: var(--k-boyut-xs); line-height: var(--k-satir-tablo); color: var(--k-murekkep-ikincil); }
.k-alan__hata {
display: flex;
align-items: flex-start;
gap: var(--k-bosluk-1);
font-size: var(--k-boyut-xs);
line-height: var(--k-satir-tablo);
font-weight: var(--k-agirlik-orta);
color: var(--k-hata);
}
.k-arama { display: grid; gap: var(--k-bosluk-3); }
.k-arama__satir { display: flex; flex-direction: column; gap: var(--k-bosluk-2); }
.k-arama__satir > .k-buton { min-height: var(--k-boyut-dugme-buyuk); width: 100%; border-radius: var(--k-kose-buyuk-dugme); }
.k-arama__girdi-kap { position: relative; flex: 1 1 auto; display: flex; align-items: stretch; }
.k-arama__girdi-kap > .k-girdi:not(#k-yok) { min-height: var(--k-boyut-dugme-buyuk); border-radius: var(--k-kose-buyuk-dugme); }
.k-arama__tr {
position: absolute;
left: 6px; top: 6px; bottom: 6px;
z-index: 1;
display: inline-flex;
align-items: flex-end;
justify-content: center;
width: 26px;
padding-bottom: var(--k-bosluk-1);
border-radius: var(--k-kose-xs);
background: var(--k-bilgi);
color: var(--k-murekkep-ters);
font-size: 0.6875rem;
font-weight: var(--k-agirlik-kalin);
line-height: 1;
}
.k-arama--plaka .k-girdi:not(#k-yok) {
padding-left: calc(26px + 6px + var(--k-bosluk-3));
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: var(--k-agirlik-yari-kalin);
}
.k-arama__yan-eylem { justify-self: start; }
@media (min-width: 768px) {
.k-arama__satir { flex-direction: row; }
.k-arama__satir > .k-buton { width: auto; flex: none; }
}
/* ── B-14 Bayi seçici (.k-bayi-secici) ─────────────────────────────────── */
.k-bayi-secici { position: relative; width: 100%; }
@media (min-width: 768px) { .k-bayi-secici { width: auto; min-width: 280px; } }
.k-bayi-secici__dugme {
-webkit-appearance: none;
appearance: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--k-bosluk-2);
width: 100%;
min-height: var(--k-boyut-dokunma);
padding: 0 var(--k-bosluk-3);
border: 0;
border-radius: var(--k-kose-md);
background: var(--kb-girdi-zemin);
color: var(--k-murekkep);
font-family: var(--k-yazi-govde);
font-size: var(--k-boyut-sm);
font-weight: var(--k-agirlik-orta);
text-align: left;
cursor: pointer;
box-shadow: var(--k-golge-girdi);
}
.k-bayi-secici__dugme[aria-expanded="true"] { background: var(--k-yuzey); box-shadow: inset 0 0 0 1px var(--k-murekkep); }
.k-bayi-secici__dugme:disabled { opacity: 0.45; cursor: not-allowed; }
.k-bayi-secici__baglam { color: var(--k-murekkep-ikincil); font-weight: var(--k-agirlik-normal); }
.k-bayi-secici__liste {
position: absolute;
z-index: 1060;
top: calc(100% + 6px);
left: 0; right: 0;
max-height: 320px;
overflow: auto;
margin: 0;
padding: var(--k-bosluk-1);
list-style: none;
border-radius: var(--k-kose-md);
background: var(--k-yuzey);
box-shadow: var(--k-golge-kart-ustunde);
}
.k-bayi-secici__oge {
display: flex;
align-items: center;
min-height: var(--k-boyut-dokunma);
padding: 0 var(--k-bosluk-3);
border-radius: 10px;
font-size: var(--k-boyut-sm);
color: var(--k-murekkep);
cursor: pointer;
}
.k-bayi-secici__oge:hover,
.k-bayi-secici__oge[data-etkin="true"] { background: var(--k-yuzey-batik); }
.k-bayi-secici__oge[aria-selected="true"] { font-weight: var(--k-agirlik-yari-kalin); }
/* ── B-25 Paylaşım (.k-paylas) ─────────────────────────────────────────── */
.k-paylas { display: flex; flex-direction: column; gap: var(--k-bosluk-2); }
.k-paylas > .k-buton { width: 100%; min-height: var(--k-boyut-dugme-buyuk); justify-content: flex-start; }
@media (min-width: 768px) {
.k-paylas { flex-direction: row; flex-wrap: wrap; }
.k-paylas > .k-buton { width: auto; min-height: var(--k-boyut-dokunma); }
}
/* ── B-27 Geri bildirim (.k-geri-bildirim) ─────────────────────────────── */
.k-geri-bildirim { display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-bosluk-2); font-size: var(--k-boyut-sm); color: var(--k-murekkep-ikincil); }
.k-geri-bildirim__oge {
-webkit-appearance: none;
appearance: none;
display: inline-flex;
align-items: center;
gap: var(--k-bosluk-1);
min-height: var(--k-boyut-dokunma);
padding: 0 var(--k-bosluk-3);
border: 0;
border-radius: var(--k-kose-md);
background: linear-gradient(180deg, var(--kb-dugme-ikincil-ust), var(--kb-dugme-ikincil-alt));
color: var(--k-murekkep);
font-family: var(--k-yazi-govde);
font-size: var(--k-boyut-sm);
font-weight: var(--k-agirlik-orta);
cursor: pointer;
box-shadow: var(--k-golge-kart);
transition: box-shadow var(--k-sure-kisa) var(--k-egri-cikis), transform var(--k-sure-orta) var(--k-egri-yay);
}
.k-geri-bildirim__oge:hover { box-shadow: var(--k-golge-kart-ustunde); }
.k-geri-bildirim__oge:active { transform: scale(0.97); transition-duration: var(--k-sure-anlik); }
.k-geri-bildirim__oge[aria-checked="true"] {
background: linear-gradient(180deg, var(--kb-dugme-birincil-ust), var(--kb-dugme-birincil-alt));
color: var(--kb-dugme-birincil-metin);
box-shadow: var(--k-golge-birincil);
}
.k-geri-bildirim__tesekkur { display: inline-flex; align-items: center; gap: var(--k-bosluk-1); color: var(--k-basari); font-weight: var(--k-agirlik-orta); }
/* ── B-01 Sayfa başlığı (.k-sayfa-baslik) ──────────────────────────────── */
.k-sayfa-baslik { display: grid; gap: var(--k-bosluk-3); margin-bottom: 18px; }
.k-sayfa-baslik__metin {
margin: 0;
font-family: var(--k-yazi-baslik);
font-size: var(--k-boyut-baslik-sayfa);
font-weight: var(--k-agirlik-kalin);
line-height: var(--k-satir-siki);
letter-spacing: -0.022em;
color: var(--k-murekkep);
text-wrap: balance;
}
.k-sayfa-baslik__alt {
margin: var(--k-bosluk-1) 0 0;
font-size: var(--k-boyut-sm);
line-height: var(--k-satir-govde);
color: var(--k-murekkep-ikincil);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.k-sayfa-baslik__alt b { font-weight: var(--k-agirlik-yari-kalin); color: var(--k-murekkep); }
.k-sayfa-baslik__eylemler { display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-bosluk-2); }
.k-sayfa-baslik__eylemler > .k-buton--birincil { width: 100%; min-height: var(--k-boyut-dugme-buyuk); }
.k-sayfa-baslik--menulu { grid-template-columns: 1fr auto; align-items: start; }
@media (min-width: 768px) {
.k-sayfa-baslik { grid-template-columns: 1fr auto; align-items: end; }
.k-sayfa-baslik__eylemler > .k-buton--birincil { width: auto; min-height: var(--k-boyut-dokunma); }
}
@media (min-width: 1024px) {
.k-sayfa-baslik__metin { font-size: var(--k-boyut-baslik-sayfa-genis); }
}
/* K4 OR-18 kurgu: [geri bağlantısı] → başlık + alt satır (solda) · eylem yuvası (sağda, en çok 4 ikincil/sessiz düğme; sayfa
düzeyindeki tek sarı birincil de buraya). Başlıkta simge yok (KR-08 a). Bakiye/rozet gibi değer h1'in üstüne çıkmaz, alt satıra iner. */
.k-sayfa-baslik__govde { display: grid; gap: 0; min-width: 0; }
.k-sayfa-baslik__geri {
display: inline-flex;
align-items: center;
gap: 6px;
justify-self: start;
min-height: var(--k-boyut-dokunma);
margin: calc(-1 * var(--k-bosluk-3)) 0 0 -2px;
padding: 0 6px 0 2px;
border-radius: var(--k-kose-sm);
color: var(--k-murekkep-ikincil);
font-size: var(--k-boyut-sm);
font-weight: var(--k-agirlik-orta);
text-decoration: none;
transition: color var(--k-sure-kisa) var(--k-egri-cikis), background-color var(--k-sure-kisa) var(--k-egri-cikis);
}
.k-sayfa-baslik__geri:hover { color: var(--k-murekkep); background: var(--k-yuzey-batik); text-decoration: none; }
.k-sayfa-baslik__geri:focus-visible { outline: var(--k-odak-kalinlik) solid var(--k-odak); outline-offset: 2px; box-shadow: 0 0 0 4px var(--k-odak-ic); }
.k-sayfa-baslik__geri .k-ikon { width: 16px; height: 16px; }
.k-sayfa-baslik--geri-li { grid-template-areas: "geri" "govde" "eylem"; }
.k-sayfa-baslik--geri-li > .k-sayfa-baslik__geri { grid-area: geri; }
.k-sayfa-baslik--geri-li > .k-sayfa-baslik__govde { grid-area: govde; }
.k-sayfa-baslik--geri-li > .k-sayfa-baslik__eylemler { grid-area: eylem; }
@media (min-width: 768px) {
.k-sayfa-baslik--geri-li { grid-template-areas: "geri geri" "govde eylem"; }
.k-sayfa-baslik__eylemler { justify-content: flex-end; }
}
/* ── B-02 Kart (.k-kart) ───────────────────────────────────────────────── */
.k-kart {
position: relative;
min-width: 0;
padding: var(--k-bosluk-kart);
border-radius: var(--k-kose-lg);
background: var(--kb-kart-zemin);
color: var(--k-murekkep);
box-shadow: var(--k-golge-kart);
transition: transform var(--k-sure-orta) var(--k-egri-yay), box-shadow var(--k-sure-orta) var(--k-egri-cikis);
}
/* Kalkan kart: tıklanır/taşınır kartta hover −2 px + derin gölge. */
@media (hover: hover) {
.k-kart--kaldir:hover { transform: translateY(-2px); box-shadow: var(--k-golge-kart-ustunde); }
}
.k-kart__bas { display: flex; align-items: center; justify-content: space-between; gap: var(--k-bosluk-3); margin-bottom: var(--k-bosluk-3); }
.k-kart__baslik {
margin: 0;
font-family: var(--k-yazi-baslik);
font-size: var(--k-boyut-baslik-kart);
font-weight: var(--k-agirlik-baslik);
line-height: var(--k-satir-kart-baslik);
letter-spacing: -0.012em;
color: var(--k-murekkep);
}
.k-kart__baslik-baglanti {
position: relative;
display: inline-flex;
align-items: center;
gap: var(--k-bosluk-1);
min-height: 32px;
margin-right: calc(var(--k-bosluk-2) * -1);
padding: 0 var(--k-bosluk-2);
border-radius: 9px;
font-size: 0.8125rem;
font-weight: var(--k-agirlik-orta);
color: var(--k-murekkep-ikincil);
text-decoration: none;
transition: background-color var(--k-sure-kisa) var(--k-egri-cikis), color var(--k-sure-kisa) var(--k-egri-cikis);
}
.k-kart__baslik-baglanti::before { content: ""; position: absolute; inset: -6px; border-radius: inherit; }
.k-kart__baslik-baglanti:hover { background: var(--k-yuzey-batik); color: var(--k-murekkep); }
.k-kart__govde > * + * { margin-top: var(--k-bosluk-3); }
.k-kart__tasan { margin-inline: calc(var(--k-bosluk-kart) * -1); }
.k-kart--yalin { background: transparent; box-shadow: none; padding-inline: 0; }
.k-kart--form .k-kart__govde { display: grid; gap: var(--k-bosluk-4); }
.k-kart--form .k-kart__govde > * + * { margin-top: 0; }
.k-kart--duzenle { box-shadow: var(--k-golge-kart), 0 0 0 2px var(--k-vurgu); }
.k-kart__tutamac { cursor: grab; color: var(--k-murekkep-pasif); }
/* ── B-55 Kahraman kart (.k-kahraman) — sayfadaki TEK koyu yüzey ────────── */
.k-kahraman {
position: relative;
isolation: isolate;
overflow: hidden;
min-width: 0;
border-radius: var(--k-kose-xl);
color: var(--kb-kart-koyu-metin);
background:
radial-gradient(640px 320px at 8% -10%, oklch(0.87 0.17 96 / 0.32), transparent 60%),
radial-gradient(520px 300px at 100% 110%, oklch(0.55 0.08 268 / 0.45), transparent 60%),
linear-gradient(160deg, var(--kb-kart-koyu-ust) 0%, var(--kb-kart-koyu-orta) 40%, var(--kb-kart-koyu-alt) 100%);
box-shadow: var(--k-golge-koyu);
}
.k-kahraman::before { /* soluk ölçek ağı */
content: "";
position: absolute;
inset: 0;
z-index: -1;
opacity: 0.35;
background-image:
linear-gradient(oklch(1 0 0 / 0.06) 1px, transparent 1px),
linear-gradient(90deg, oklch(1 0 0 / 0.06) 1px, transparent 1px);
background-size: 44px 44px;
-webkit-mask-image: radial-gradient(720px 360px at 20% 0%, oklch(0 0 0) 20%, transparent 75%);
mask-image: radial-gradient(720px 360px at 20% 0%, oklch(0 0 0) 20%, transparent 75%);
}
.k-kahraman::after { /* üst kenar ışık çizgisi */
content: "";
position: absolute;
left: 10%; right: 40%; top: 0;
height: 1px;
background: linear-gradient(90deg, transparent, oklch(0.9 0.14 96 / 0.7), transparent);
}
.k-kahraman__ic { display: grid; gap: 18px; padding: 22px 20px 20px; }
.k-kahraman__ust { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--k-bosluk-4); }
.k-kahraman__baslik {
margin: 0;
font-size: var(--k-boyut-baslik-kahraman);
font-weight: var(--k-agirlik-kalin);
line-height: var(--k-satir-siki);
letter-spacing: var(--k-harf-aralik-baslik);
color: var(--kb-kart-koyu-metin);
}
.k-kahraman__alt { margin: var(--k-bosluk-1) 0 0; font-size: var(--k-boyut-sm); color: var(--kb-kart-koyu-metin-2); }
.k-kahraman__alt b { font-weight: var(--k-agirlik-yari-kalin); color: var(--kb-kart-koyu-metin); }
.k-kahraman__eylemler { display: grid; grid-template-columns: 1fr; gap: 10px; }
.k-kahraman__eylemler > .k-buton { width: 100%; }
.k-kahraman__bakiye {
display: flex;
align-items: center;
gap: var(--k-bosluk-3);
padding: 10px 12px 10px 10px;
border-radius: var(--k-kose-buyuk-dugme);
background: var(--kb-bakiye-zemin);
box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.1), inset 0 1px 0 oklch(1 0 0 / 0.08);
}
.k-kahraman__halka { flex: none; width: 44px; height: 44px; overflow: visible; }
.k-kahraman__halka circle { fill: none; stroke-width: 4; }
.k-kahraman__halka-ray { stroke: var(--kb-halka-ray); }
.k-kahraman__halka-dolu {
stroke: var(--kb-halka-dolu);
stroke-linecap: round;
stroke-dasharray: 113;
stroke-dashoffset: var(--k-halka-bos, 113);
transform: rotate(-90deg);
transform-origin: 50% 50%;
transition: stroke-dashoffset 900ms var(--k-egri-cikis) 200ms;
filter: drop-shadow(0 0 6px oklch(0.87 0.17 96 / 0.55));
}
.k-kahraman__bakiye-metin { line-height: 1.2; }
.k-kahraman__bakiye-metin span { display: block; font-size: var(--k-boyut-meta); color: var(--kb-kart-koyu-metin-2); }
.k-kahraman__bakiye > .k-buton { margin-left: auto; width: auto; }
@media (min-width: 560px) {
.k-kahraman__eylemler { grid-template-columns: auto auto 1fr; align-items: center; }
.k-kahraman__eylemler > .k-buton { width: auto; }
.k-kahraman__eylemler > .k-kahraman__bakiye { grid-column: 1 / -1; }
}
@media (min-width: 768px) {
.k-kahraman__ic { padding: 28px 28px 24px; }
.k-kahraman__eylemler { grid-template-columns: auto auto auto 1fr; }
.k-kahraman__eylemler > .k-kahraman__bakiye { grid-column: auto; justify-self: end; min-width: 300px; }
}
@media (min-width: 1280px) {
.k-kahraman__ic { padding: 32px 32px 28px; }
.k-kahraman__baslik { font-size: var(--k-boyut-baslik-kahraman-genis); }
}
/* ── Bento yerleşim (.k-bento) — TS-02 §8 ──────────────────────────────── */
.k-bento { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.k-bento > * { min-width: 0; }
@media (min-width: 768px) {
.k-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--k-bosluk-4); }
.k-bento__12 { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
.k-bento { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: dense; }
.k-bento__12 { grid-column: span 12; }
.k-bento__7 { grid-column: span 7; }
.k-bento__5 { grid-column: span 5; }
.k-bento__4 { grid-column: span 4; }
.k-bento__3 { grid-column: span 3; }
}
/* ── B-07 Seçici / sekme / çip (.k-secici) ─────────────────────────────── */
.k-secici { display: flex; gap: var(--k-bosluk-2); margin: 0; padding: 0; list-style: none; }
.k-secici__oge {
-webkit-appearance: none;
appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--k-bosluk-2);
flex: none;
min-height: var(--k-boyut-dokunma);
padding: 0 var(--k-bosluk-4);
border: 0;
border-radius: var(--k-kose-tam);
background: var(--k-yuzey);
color: var(--k-murekkep);
font-family: var(--k-yazi-govde);
font-size: var(--k-boyut-sm);
font-weight: var(--k-agirlik-orta);
white-space: nowrap;
text-decoration: none;
cursor: pointer;
box-shadow: var(--k-golge-kart);
transition: background-color var(--k-sure-kisa) var(--k-egri-cikis), color var(--k-sure-kisa) var(--k-egri-cikis), box-shadow var(--k-sure-kisa) var(--k-egri-cikis);
}
.k-secici__oge:hover { color: var(--k-murekkep); box-shadow: var(--k-golge-kart-ustunde); }
.k-secici__oge:disabled,
.k-secici__oge[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.k-secici__sayac {
min-width: 20px;
padding: 0 6px;
border-radius: var(--k-kose-tam);
background: var(--k-yuzey-batik);
color: var(--k-murekkep);
font-size: var(--k-boyut-xs);
font-weight: var(--k-agirlik-yari-kalin);
line-height: 20px;
text-align: center;
font-variant-numeric: tabular-nums;
}
/* Çip (K4 OR-13): tek satır, yatay kaydırma, son çipe 16 px pay, sağ kenarda 16 px sönümleme (pay alanına düşer,
son çip kaydırma sonunda tam görünür). 40 px hap; görünmez ::before ile dokunma alanı 44 px. */
.k-secici--cip {
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
padding: 2px var(--k-bosluk-4) 6px 2px;
scroll-padding-inline: var(--k-bosluk-4);
-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--k-bosluk-4)), transparent);
mask-image: linear-gradient(90deg, #000 calc(100% - var(--k-bosluk-4)), transparent);
}
.k-secici--cip::-webkit-scrollbar { display: none; }
.k-secici--cip .k-secici__oge { position: relative; min-height: 40px; }
.k-secici--cip .k-secici__oge::before { content: ""; position: absolute; inset: -2px 0; }
/* Seçili (KR-04 b): açık sarı zemin + ince koyu çizgi + onay simgesi; doymuş sarı çerçeve yok. aria-pressed şart. */
.k-secici--cip .k-secici__oge[aria-pressed="true"] {
padding-left: 12px;
background: var(--k-secili-zemin);
color: var(--k-secili-metin);
font-weight: var(--k-agirlik-yari-kalin);
box-shadow: inset 0 0 0 1px var(--k-secili-cizgi);
}
.k-secici--cip .k-secici__oge[aria-pressed="true"]::after {
content: "";
order: -1;
flex: none;
width: 14px;
height: 14px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.k-secici--cip .k-secici__oge[aria-pressed="true"] .k-secici__sayac { background: var(--k-yuzey); color: var(--k-murekkep); }
/* Segment: batık ray, seçili parça kalkık. */
.k-secici--segment {
gap: 2px;
padding: 3px;
border-radius: var(--k-kose-md);
background: var(--k-yuzey-batik);
box-shadow: var(--k-golge-girdi);
}
.k-secici--segment .k-secici__oge {
flex: 1 1 0;
min-height: 38px;
border-radius: 9px;
background: transparent;
color: var(--k-murekkep-ikincil);
box-shadow: none;
}
.k-secici--segment .k-secici__oge:hover { color: var(--k-murekkep); box-shadow: none; }
.k-secici--segment .k-secici__oge[aria-checked="true"] {
background: var(--k-yuzey);
color: var(--k-murekkep);
font-weight: var(--k-agirlik-yari-kalin);
box-shadow: var(--k-golge-kart);
}
@media (min-width: 768px) { .k-secici--segment { display: inline-flex; } }
/* Sekme: alt çizgi, seçili 3 px mürekkep işaret. */
.k-secici--sekme { gap: 0; overflow-x: auto; scrollbar-width: none; box-shadow: inset 0 -1px 0 var(--k-cizgi); }
.k-secici--sekme::-webkit-scrollbar { display: none; }
.k-secici--sekme .k-secici__oge {
position: relative;
border-radius: 10px 10px 0 0;
background: transparent;
color: var(--kb-sekme-metin);
box-shadow: none;
}
.k-secici--sekme .k-secici__oge:hover { background: var(--k-yuzey-batik); color: var(--kb-sekme-metin-secili); box-shadow: none; }
.k-secici--sekme .k-secici__oge::after {
content: "";
position: absolute;
left: var(--k-bosluk-2); right: var(--k-bosluk-2); bottom: 0;
height: 3px;
border-radius: 2px 2px 0 0;
background: var(--kb-sekme-secili-isaret);
transform: scaleX(0);
transition: transform var(--k-sure-orta) var(--k-egri-yay);
}
.k-secici--sekme .k-secici__oge[aria-selected="true"] { color: var(--kb-sekme-metin-secili); font-weight: var(--k-agirlik-yari-kalin); }
.k-secici--sekme .k-secici__oge[aria-selected="true"]::after { transform: scaleX(1); }
/* ── B-08 Sayfalama (.k-sayfalama) ─────────────────────────────────────── */
.k-sayfalama { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--k-bosluk-1); margin-top: var(--k-bosluk-4); }
.k-sayfalama__oge {
-webkit-appearance: none;
appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--k-bosluk-1);
min-width: var(--k-boyut-dokunma);
min-height: var(--k-boyut-dokunma);
padding: 0 var(--k-bosluk-2);
border: 0;
border-radius: var(--k-kose-md);
background: transparent;
color: var(--k-murekkep);
font-family: var(--k-yazi-govde);
font-size: var(--k-boyut-sm);
font-weight: var(--k-agirlik-orta);
font-variant-numeric: tabular-nums;
text-decoration: none;
cursor: pointer;
transition: background-color var(--k-sure-kisa) var(--k-egri-cikis);
}
.k-sayfalama__oge:hover { background: var(--k-yuzey-batik); color: var(--k-murekkep); }
.k-sayfalama__oge[aria-current="page"] {
background: linear-gradient(180deg, var(--kb-dugme-birincil-ust), var(--kb-dugme-birincil-alt));
color: var(--kb-dugme-birincil-metin);
box-shadow: var(--k-golge-birincil);
}
.k-sayfalama__oge:disabled,
.k-sayfalama__oge[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.k-sayfalama__sayilar { display: none; gap: var(--k-bosluk-1); }
.k-sayfalama__durum { padding: 0 var(--k-bosluk-2); font-size: var(--k-boyut-sm); color: var(--k-murekkep-ikincil); font-variant-numeric: tabular-nums; }
.k-sayfalama__tavan { flex-basis: 100%; text-align: center; font-size: var(--k-boyut-xs); color: var(--k-murekkep-ikincil); }
.k-sayfalama--daha .k-buton { width: 100%; }
@media (min-width: 768px) {
.k-sayfalama__sayilar { display: inline-flex; }
.k-sayfalama__durum { display: none; }
.k-sayfalama--daha .k-buton { width: auto; }
}
/* ── B-09 Taşma menüsü (.k-menu) ───────────────────────────────────────── */
.k-menu { position: relative; display: inline-flex; }
.k-menu__liste {
position: absolute;
z-index: 1060;
top: calc(100% + 6px);
right: 0;
min-width: 220px;
margin: 0;
padding: var(--k-bosluk-1);
list-style: none;
border-radius: var(--k-kose-md);
background: var(--k-yuzey);
box-shadow: var(--k-golge-kart-ustunde);
transform-origin: top right;
animation: k-menu-gir var(--k-sure-orta) var(--k-egri-yay);
}
.k-menu__liste[hidden] { display: none; }
.k-menu__oge {
-webkit-appearance: none;
appearance: none;
display: flex;
align-items: center;
gap: var(--k-bosluk-2);
width: 100%;
min-height: var(--k-boyut-dokunma);
padding: 0 var(--k-bosluk-3);
border: 0;
border-radius: 10px;
background: transparent;
color: var(--k-murekkep);
font-family: var(--k-yazi-govde);
font-size: var(--k-boyut-sm);
text-align: left;
text-decoration: none;
cursor: pointer;
}
.k-menu__oge:hover { background: var(--k-yuzey-batik); color: var(--k-murekkep); }
.k-menu__oge--tehlike,
.k-menu__oge--tehlike:hover { color: var(--k-hata); }
.k-menu__oge .k-kontor { margin-inline-start: auto; }
.k-menu__ayrac { height: 1px; margin: var(--k-bosluk-1) var(--k-bosluk-2); background: var(--k-cizgi); }
/* ── B-04 Çekmece (.k-cekmece) ─────────────────────────────────────────── */
.k-cekmece { position: fixed; inset: 0; z-index: 1070; display: flex; align-items: flex-end; justify-content: center; }
.k-cekmece[hidden] { display: none; }
.k-cekmece__perde {
position: absolute;
inset: 0;
background: var(--k-perde);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
animation: k-soluk-gir var(--k-sure-orta) var(--k-egri-cikis);
}
.k-cekmece__pencere {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
max-height: 90dvh;
border-radius: var(--k-kose-xl) var(--k-kose-xl) 0 0;
background: var(--k-yuzey);
box-shadow: var(--k-golge-cekmece), var(--k-golge-ic-isik);
animation: k-alttan-gir var(--k-sure-orta) var(--k-egri-yay);
}
.k-cekmece__tutamac { width: 36px; height: 4px; margin: var(--k-bosluk-2) auto 0; border-radius: var(--k-kose-tam); background: var(--k-cizgi-guclu); }
.k-cekmece__bas {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--k-bosluk-3);
padding: var(--k-bosluk-3) var(--k-bosluk-kart);
box-shadow: inset 0 -1px 0 var(--k-cizgi);
}
.k-cekmece__baslik { margin: 0; font-size: var(--k-boyut-baslik-bolum); font-weight: var(--k-agirlik-baslik); line-height: var(--k-satir-kart-baslik); letter-spacing: -0.015em; }
.k-cekmece__govde { flex: 1 1 auto; overflow: auto; padding: var(--k-bosluk-kart); overscroll-behavior: contain; }
.k-cekmece__eylemler {
position: sticky;
bottom: 0;
display: flex;
gap: var(--k-bosluk-2);
padding: var(--k-bosluk-3) var(--k-bosluk-kart) calc(var(--k-bosluk-3) + env(safe-area-inset-bottom));
background: var(--k-yuzey);
box-shadow: inset 0 1px 0 var(--k-cizgi);
}
.k-cekmece__eylemler > .k-buton { flex: 1 1 0; min-height: var(--k-boyut-dugme-buyuk); border-radius: var(--k-kose-buyuk-dugme); }
.k-cekmece__kapat { margin-inline-end: calc(var(--k-bosluk-2) * -1); }
@media (min-width: 768px) {
.k-cekmece--sag { justify-content: flex-end; align-items: stretch; }
.k-cekmece--sag .k-cekmece__pencere { width: 420px; max-height: none; border-radius: var(--k-kose-xl) 0 0 var(--k-kose-xl); animation-name: k-sagdan-gir; }
.k-cekmece--sag .k-cekmece__tutamac { display: none; }
}
.k-cekmece--filtre .k-cekmece__eylemler > .k-buton--birincil { flex: 2 1 0; }
/* ── B-47 Modal (.k-modal) ─────────────────────────────────────────────── */
.k-modal { position: fixed; inset: 0; z-index: 1075; display: flex; align-items: flex-end; justify-content: center; }
.k-modal[hidden] { display: none; }
.k-modal__perde {
position: absolute;
inset: 0;
background: var(--k-perde);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
animation: k-soluk-gir var(--k-sure-orta) var(--k-egri-cikis);
}
.k-modal__pencere {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
max-height: 92dvh;
border-radius: var(--k-kose-xl) var(--k-kose-xl) 0 0;
background: var(--k-yuzey);
color: var(--k-murekkep);
box-shadow: var(--k-golge-cekmece), var(--k-golge-ic-isik);
animation: k-alttan-gir var(--k-sure-orta) var(--k-egri-yay);
}
.k-modal__bas { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--k-bosluk-3); padding: 22px var(--k-bosluk-kart) var(--k-bosluk-2); }
.k-modal__baslik { margin: 0; font-size: var(--k-boyut-baslik-bolum); font-weight: var(--k-agirlik-baslik); line-height: var(--k-satir-kart-baslik); letter-spacing: -0.015em; }
.k-modal__govde { flex: 1 1 auto; overflow: auto; padding: var(--k-bosluk-2) var(--k-bosluk-kart) var(--k-bosluk-kart); font-size: var(--k-boyut-govde); line-height: var(--k-satir-govde); color: var(--k-murekkep-ikincil); }
.k-modal__eylemler {
position: sticky;
bottom: 0;
display: flex;
flex-direction: column-reverse;
gap: var(--k-bosluk-2);
padding: var(--k-bosluk-3) var(--k-bosluk-kart) calc(var(--k-bosluk-kart) + env(safe-area-inset-bottom));
background: var(--k-yuzey);
box-shadow: inset 0 1px 0 var(--k-cizgi);
}
.k-modal__eylemler > .k-buton { width: 100%; min-height: var(--k-boyut-dugme-buyuk); border-radius: var(--k-kose-buyuk-dugme); }
.k-modal__kapat { margin: calc(var(--k-bosluk-2) * -1) calc(var(--k-bosluk-2) * -1) 0 0; }
.k-kaydirma-kilitli { overflow: hidden; }
.k-modal--xl .k-modal__pencere { max-height: 100dvh; height: 100dvh; border-radius: 0; }
@media (min-width: 768px) {
.k-modal { align-items: center; padding: var(--k-bosluk-6); }
.k-modal__pencere { width: 440px; max-height: calc(100dvh - 2 * var(--k-bosluk-6)); border-radius: var(--k-kose-xl); animation-name: k-olcekli-gir; }
.k-modal__eylemler { flex-direction: row; justify-content: flex-end; padding-bottom: var(--k-bosluk-3); border-radius: 0 0 var(--k-kose-xl) var(--k-kose-xl); }
.k-modal__eylemler > .k-buton { width: auto; min-height: var(--k-boyut-dokunma); border-radius: var(--k-kose-md); }
.k-modal--form .k-modal__pencere { width: 560px; }
.k-modal--xl .k-modal__pencere { width: 896px; height: auto; max-height: calc(100dvh - 2 * var(--k-bosluk-6)); border-radius: var(--k-kose-xl); }
}
/* ── B-48 Onay (.k-onay, .k-modal ile) ─────────────────────────────────── */
.k-onay .k-modal__pencere { max-width: 100%; }
.k-onay__ozet { margin: var(--k-bosluk-3) 0 0; font-size: var(--k-boyut-sm); color: var(--k-murekkep-ikincil); }
.k-onay__maliyet {
display: flex;
align-items: center;
gap: var(--k-bosluk-2);
margin-top: var(--k-bosluk-3);
padding: 10px var(--k-bosluk-3);
border-radius: var(--k-kose-md);
background: var(--k-yuzey-2);
box-shadow: var(--k-golge-batik);
font-size: var(--k-boyut-sm);
color: var(--k-murekkep);
font-variant-numeric: tabular-nums;
}
.k-onay__neden { margin-top: var(--k-bosluk-3); }
.k-onay--tehlike .k-modal__baslik { color: var(--k-hata); }
/* ── B-42 Engelleyici uyarı (.k-uyari-pencere) ─────────────────────────── */
.k-uyari-pencere .k-modal__bas { flex-direction: column; align-items: flex-start; gap: var(--k-bosluk-3); }
.k-uyari-pencere__ikon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 16px;
background: var(--k-yuzey-2);
color: var(--k-murekkep);
box-shadow: var(--k-golge-batik);
}
.k-uyari-pencere--hata .k-uyari-pencere__ikon { background: var(--k-hata-zemin); color: var(--k-hata); }
.k-uyari-pencere--uyari .k-uyari-pencere__ikon { background: var(--k-uyari-zemin); color: var(--k-uyari); }
.k-uyari-pencere--basari .k-uyari-pencere__ikon { background: var(--k-basari-zemin); color: var(--k-basari); }
.k-uyari-pencere--bilgi .k-uyari-pencere__ikon { background: var(--k-bilgi-zemin); color: var(--k-bilgi); }
/* ── B-43 Bant (.k-bant) — batık durum bandı ───────────────────────────── */
.k-bant {
display: flex;
align-items: flex-start;
gap: var(--k-bosluk-3);
padding: var(--k-bosluk-3) var(--k-bosluk-4);
border-radius: var(--k-kose-md);
background: var(--k-yuzey-2);
color: var(--k-murekkep);
font-size: var(--k-boyut-sm);
line-height: var(--k-satir-govde);
box-shadow: var(--k-golge-batik);
}
.k-bant__ikon { flex: none; margin-top: 2px; }
.k-bant__metin { flex: 1 1 auto; min-width: 0; }
.k-bant__baslik { display: block; font-weight: var(--k-agirlik-yari-kalin); }
.k-bant__eylem { flex: none; align-self: center; }
.k-bant__kapat,
.k-duyuru__kapat {
-webkit-appearance: none;
appearance: none;
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--k-boyut-dokunma);
height: var(--k-boyut-dokunma);
margin: -10px -10px -10px 0;
padding: 0;
border: 0;
border-radius: 10px;
background: transparent;
color: currentColor;
cursor: pointer;
transition: background-color var(--k-sure-kisa) var(--k-egri-cikis);
}
.k-bant__kapat:hover,
.k-duyuru__kapat:hover { background: oklch(0.25 0.02 268 / 0.06); }
.k-bant--bilgi { background: var(--kb-mesaj-bilgi-zemin); color: var(--kb-mesaj-bilgi-metin); }
.k-bant--basari { background: var(--kb-mesaj-basari-zemin); color: var(--kb-mesaj-basari-metin); }
.k-bant--uyari { background: var(--kb-mesaj-uyari-zemin); color: var(--kb-mesaj-uyari-metin); }
.k-bant--hata { background: var(--kb-mesaj-hata-zemin); color: var(--kb-mesaj-hata-metin); }
.k-bant--saltokunur { background: var(--k-yuzey-batik); color: var(--k-murekkep-ikincil); }
.k-bant--tam { border-radius: 0; }
/* ── Not (.k-not): bilgi / yardım notu (K4 OR-20, KR-04 b) ─────────────── */
/* Çerçevesiz açık sarı (sarı-50 %55), köşe 12, bilgi simgesi, 14 px ikincil. Doymuş sarı çerçeve YOK.
Kehribar (--uyari) yalnız gerçek uyarıda ve simge + sözcükle ("Dikkat:"); sarı "uyarı" anlamında kullanılmaz. */
.k-not {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
gap: 10px;
padding: 12px 14px;
border-radius: var(--k-kose-md);
background: var(--k-not-zemin);
color: var(--k-murekkep-ikincil);
font-size: var(--k-boyut-sm);
line-height: var(--k-satir-govde);
}
.k-not > .k-ikon, .k-not__ikon { width: 18px; height: 18px; margin-top: 2px; color: var(--k-not-ikon); }
.k-not b, .k-not strong, .k-not__baslik { font-weight: var(--k-agirlik-yari-kalin); color: var(--k-murekkep); }
.k-not p { margin: 0; }
.k-not--uyari { background: var(--k-uyari-zemin); color: var(--k-uyari); }
.k-not--uyari > .k-ikon, .k-not--uyari .k-not__ikon { color: var(--k-uyari); }
.k-not--uyari b, .k-not--uyari strong, .k-not--uyari .k-not__baslik { color: var(--k-uyari); }
/* ── Metin yardımcıları (K4 OR-15) ─────────────────────────────────────── */
/* Bölünmez öbek: "e-posta", "1.923.000 TL", "82 gün", tarih. Metin değişmez. */
.k-nowrap { white-space: nowrap; }
.k-metin-dengeli { text-wrap-style: balance; }
.k-metin-duzgun { text-wrap-style: pretty; }
/* Ayraçlı satır (Marka · Model · Yıl): ayraç her öğenin önünde; kap ayraç genişliği kadar sola kayar ve o şerit kırpılır,
böylece satır başına düşen ayraç görünmez, satır sonunda yetim ayraç kalmaz. */
.k-ayracli {
--k-ayrac: 1.1em;
display: flex;
flex-wrap: wrap;
margin: 0 0 0 calc(-1 * var(--k-ayrac));
padding: 0;
list-style: none;
clip-path: inset(-4px -4px -4px var(--k-ayrac));
}
.k-ayracli > li, .k-ayracli > .k-ayracli__oge { display: inline-flex; align-items: baseline; white-space: nowrap; }
.k-ayracli > li::before, .k-ayracli > .k-ayracli__oge::before {
content: "\00B7";
display: inline-block;
width: var(--k-ayrac);
text-align: center;
color: var(--k-murekkep-pasif);
}
/* ── B-45 İpucu / popover (.k-ipucu) ───────────────────────────────────── */
.k-ipucu { position: relative; display: inline-flex; }
.k-ipucu__tetik {
-webkit-appearance: none;
appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: var(--k-boyut-dokunma);
min-height: var(--k-boyut-dokunma);
padding: 0;
border: 0;
border-radius: 10px;
background: transparent;
color: var(--k-murekkep-ikincil);
cursor: help;
}
.k-ipucu__tetik:hover { color: var(--k-murekkep); }
.k-ipucu__balon {
position: absolute;
z-index: 1080;
bottom: calc(100% + 6px);
left: 50%;
width: max-content;
max-width: 280px;
padding: var(--k-bosluk-2) var(--k-bosluk-3);
border-radius: 10px;
background: linear-gradient(180deg, var(--kb-toast-ust), var(--kb-toast-alt));
color: var(--kb-toast-metin);
font-size: var(--k-boyut-xs);
font-weight: var(--k-agirlik-normal);
line-height: var(--k-satir-tablo);
text-align: left;
pointer-events: none;
box-shadow: var(--k-golge-toast);
opacity: 0;
transform: translate(-50%, 4px);
transition: opacity var(--k-sure-kisa) var(--k-egri-cikis), transform var(--k-sure-kisa) var(--k-egri-cikis);
}
.k-ipucu:hover .k-ipucu__balon,
.k-ipucu:focus-within .k-ipucu__balon,
.k-ipucu__balon[data-acik="true"] { opacity: 1; transform: translate(-50%, 0); }
.k-ipucu--popover .k-ipucu__balon {
width: 280px;
padding: var(--k-bosluk-3) var(--k-bosluk-4);
border-radius: var(--k-kose-md);
background: var(--k-yuzey);
color: var(--k-murekkep);
font-size: var(--k-boyut-sm);
box-shadow: var(--k-golge-kart-ustunde);
pointer-events: auto;
visibility: hidden;
}
.k-ipucu--popover:hover .k-ipucu__balon,
.k-ipucu--popover:focus-within .k-ipucu__balon { opacity: 0; visibility: hidden; }
.k-ipucu--popover .k-ipucu__balon[data-acik="true"] { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.k-ipucu__balon-baslik { display: block; margin-bottom: var(--k-bosluk-1); font-weight: var(--k-agirlik-yari-kalin); }
/* ── B-46 Duyuru / yenilik şeridi (.k-duyuru) ──────────────────────────── */
.k-duyuru {
position: relative;
display: grid;
grid-template-columns: auto 1fr auto;
gap: var(--k-bosluk-2) var(--k-bosluk-3);
align-items: start;
padding: var(--k-bosluk-3) 10px var(--k-bosluk-3) 14px;
border-radius: var(--k-kose-md);
background: var(--k-yuzey);
color: var(--k-murekkep);
font-size: var(--k-boyut-sm);
line-height: var(--k-satir-govde);
box-shadow: var(--k-golge-kart);
}
.k-duyuru__ikon { margin-top: 2px; color: var(--k-murekkep); }
/* Yenilik kıvılcımı halkası: sarı-50→200 zemin + sarı-metin ikon (TS-02 §9). */
.k-duyuru__kivilcim {
display: grid;
place-items: center;
width: 32px;
height: 32px;
border-radius: 10px;
color: var(--k-vurgu-metin);
background: radial-gradient(circle at 30% 20%, var(--kb-kivilcim-ust), var(--kb-kivilcim-alt));
box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.7), 0 1px 3px oklch(0.6 0.12 92 / 0.4);
}
.k-duyuru__metin { min-width: 0; color: var(--k-murekkep-ikincil); }
.k-duyuru__baslik { display: block; font-weight: var(--k-agirlik-yari-kalin); color: var(--k-murekkep); }
.k-duyuru__eylemler { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--k-bosluk-2); }
.k-duyuru__kapat { margin: -6px -2px 0 0; color: var(--k-murekkep-soluk); }
.k-duyuru__kapat:hover { color: var(--k-murekkep); }
/* Yenilik ipucu (TS-03 §11, K2 onaylı): solda 3 px sarı vurgu, köşeyi izleyen iç işaret. */
.k-duyuru--yenilik { padding-left: calc(14px + 3px); overflow: hidden; }
.k-duyuru--yenilik::before {
content: "";
position: absolute;
top: 0; bottom: 0; left: 0;
width: 3px;
background: var(--k-vurgu);
}
.k-duyuru--serit { border-radius: 0; }
.k-duyuru--kurumsal { background: var(--k-yuzey-2); box-shadow: var(--k-golge-batik); }
@media (max-width: 767.98px) { .k-duyuru__eylemler > .k-buton { flex: 1 1 0; } }
/* ── B-44 Toast (.k-toast) — alttan yayla gelir ─────────────────────────── */
.k-toast-kap {
position: fixed;
left: 50%;
bottom: calc(20px + env(safe-area-inset-bottom));
z-index: 1095;
width: min(calc(100% - 32px), 420px);
transform: translateX(-50%);
pointer-events: none;
}
.k-toast {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: var(--k-bosluk-3);
padding: var(--k-bosluk-3) var(--k-bosluk-2) var(--k-bosluk-3) 14px;
border-radius: var(--k-kose-buyuk-dugme);
background: linear-gradient(180deg, var(--kb-toast-ust), var(--kb-toast-alt));
color: var(--kb-toast-metin);
font-family: var(--k-yazi-govde);
font-size: var(--k-boyut-sm);
line-height: var(--k-satir-tablo);
box-shadow: var(--k-golge-toast);
pointer-events: auto;
opacity: 0;
transform: translateY(16px) scale(0.97);
transition: transform var(--k-sure-orta) var(--k-egri-yay), opacity var(--k-sure-kisa) var(--k-egri-cikis);
}
.k-toast + .k-toast { margin-top: var(--k-bosluk-2); }
.k-toast[data-acik="true"] { opacity: 1; transform: none; }
.k-toast__onay {
display: grid;
place-items: center;
width: 28px;
height: 28px;
border-radius: 50%;
color: var(--k-murekkep);
background: var(--k-vurgu);
box-shadow: 0 0 0 3px oklch(0.87 0.17 96 / 0.25);
}
.k-toast--hata .k-toast__onay { color: var(--kb-toast-metin); background: var(--kr-kirmizi-500); box-shadow: 0 0 0 3px oklch(0.6 0.2 28 / 0.25); }
.k-toast__metin b { font-weight: var(--k-agirlik-yari-kalin); }
.k-toast__eylem {
-webkit-appearance: none;
appearance: none;
position: relative;
min-height: 36px;
padding: 0 10px;
border: 0;
border-radius: 9px;
background: transparent;
color: var(--k-vurgu);
font-family: var(--k-yazi-govde);
font-size: var(--k-boyut-sm);
font-weight: var(--k-agirlik-yari-kalin);
cursor: pointer;
}
.k-toast__eylem::before { content: ""; position: absolute; inset: -4px; border-radius: inherit; }
.k-toast__eylem:hover { background: oklch(1 0 0 / 0.08); }
/* ── B-49 Yükleniyor (.k-yukleniyor, .k-iskelet) ───────────────────────── */
.k-iskelet {
display: block;
border-radius: 6px;
background: linear-gradient(90deg, var(--kb-iskelet-zemin) 0%, var(--kb-iskelet-parilti) 45%, var(--kb-iskelet-zemin) 90%);
background-size: 240% 100%;
animation: k-parilti var(--k-sure-parilti) linear infinite;
}
.k-iskelet--metin { height: 14px; margin-block: 5px; }
.k-iskelet--baslik { height: 24px; width: 62%; }
.k-iskelet--kutu { height: 96px; border-radius: var(--k-kose-lg); }
.k-iskelet--daire { width: 40px; height: 40px; border-radius: var(--k-kose-tam); }
.k-iskelet--satir { height: var(--k-boyut-satir); margin-bottom: var(--k-bosluk-2); border-radius: var(--k-kose-md); }
.k-yukleniyor--cizgi { position: fixed; top: 0; left: 0; right: 0; z-index: 1090; height: 3px; overflow: hidden; pointer-events: none; }
.k-yukleniyor--cizgi::before {
content: "";
position: absolute;
inset: 0;
background: var(--k-murekkep);
transform-origin: left center;
animation: k-kayan-cizgi 1.2s var(--k-egri-cikis) infinite;
}
.k-yukleniyor--ortu { position: fixed; inset: 0; z-index: 1090; display: grid; place-items: center; background: oklch(0.972 0.008 88 / 0.85); }
.k-yukleniyor__isaret { animation: k-nefes 1.2s ease-in-out 3; }
.k-yukleniyor__metin { font-size: var(--k-boyut-sm); color: var(--k-murekkep-ikincil); }
/* ── B-50 Boş durum (.k-bos) ───────────────────────────────────────────── */
.k-bos { display: grid; justify-items: center; gap: var(--k-bosluk-1); padding: var(--k-bosluk-6) 10px var(--k-bosluk-4); text-align: center; }
.k-bos__ikon {
display: grid;
place-items: center;
width: 56px;
height: 56px;
margin-bottom: var(--k-bosluk-3);
border-radius: 18px;
background: var(--k-yuzey-2);
color: var(--k-murekkep-soluk);
box-shadow: inset 0 0 0 1px oklch(0.25 0.02 268 / 0.06), var(--k-golge-ic-isik), 0 10px 20px -12px oklch(0.25 0.02 268 / 0.3);
}
.k-bos__baslik { margin: 0; font-size: var(--k-boyut-govde); font-weight: var(--k-agirlik-baslik); line-height: var(--k-satir-kart-baslik); color: var(--k-murekkep); }
.k-bos__metin { margin: 0 0 var(--k-bosluk-3); max-width: 40ch; font-size: 0.84375rem; color: var(--k-murekkep-ikincil); }
.k-bos .k-buton { min-height: var(--k-boyut-dokunma); }
/* K4 OR-14 / KR-05 b, yerleşim: zaten bir kartın içindeyse kart içinde (--kart, ikinci kart çizilmez); tüm sayfa boşsa
kartsız, ortalı, en çok 560 px (--sayfa). Her ikisinde .k-bos__ikon (56 px simge halkası) + mevcut cümle.
Üç durum aynı yerde: yükleniyor = .k-iskelet (metinsiz), boş = .k-bos, alınamadı = .k-bant--hata + "Yeniden dene". */
.k-bos--kart { padding: var(--k-bosluk-5) var(--k-bosluk-3) var(--k-bosluk-4); background: transparent; box-shadow: none; }
.k-bos--sayfa { width: 100%; max-width: 560px; margin-inline: auto; padding-block: var(--k-bosluk-12) var(--k-bosluk-8); }
.k-bos__eylemler { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--k-bosluk-2); }
.k-bos__eylemler .k-buton--sessiz { color: var(--k-murekkep); }
/* ── B-51 Hata durumu (.k-hata) ────────────────────────────────────────── */
.k-hata {
display: grid;
justify-items: start;
gap: var(--k-bosluk-2);
padding: var(--k-bosluk-4);
border-radius: var(--k-kose-md);
background: var(--k-hata-zemin);
color: var(--k-murekkep);
box-shadow: var(--k-golge-batik);
}
.k-hata__baslik { display: flex; align-items: center; gap: var(--k-bosluk-2); margin: 0; font-size: var(--k-boyut-govde); font-weight: var(--k-agirlik-baslik); color: var(--k-hata); }
.k-hata__metin { margin: 0; font-size: var(--k-boyut-sm); color: var(--k-murekkep-ikincil); }
.k-hata__kod { font-size: var(--k-boyut-xs); color: var(--k-murekkep-ikincil); }
.k-hata--widget { grid-template-columns: auto 1fr auto; align-items: center; justify-items: stretch; padding: var(--k-bosluk-3) 0; background: transparent; box-shadow: none; }
.k-hata--widget .k-hata__baslik { font-size: var(--k-boyut-sm); }
.k-hata--bayat { grid-template-columns: 1fr auto; align-items: center; padding: var(--k-bosluk-2) var(--k-bosluk-3); background: var(--k-yuzey-batik); font-size: var(--k-boyut-sm); }
/* ── B-29 Rozet (.k-rozet) ─────────────────────────────────────────────── */
.k-rozet {
display: inline-flex;
align-items: center;
gap: var(--k-bosluk-1);
height: 22px;
padding: 0 var(--k-bosluk-2);
border-radius: var(--k-kose-tam);
background: var(--k-yuzey-batik);
color: var(--k-murekkep-ikincil);
font-family: var(--k-yazi-govde);
font-size: var(--k-boyut-xs);
font-weight: var(--k-agirlik-yari-kalin);
line-height: 1;
white-space: nowrap;
vertical-align: middle;
font-variant-numeric: tabular-nums;
box-shadow: inset 0 0 0 1px oklch(0 0 0 / 0.05);
}
.k-rozet .k-ikon { width: 14px; height: 14px; }
.k-rozet--kucuk { height: 20px; padding: 0 6px; font-size: 0.6875rem; }
.k-rozet--pahali { background: var(--kb-rozet-pahali-zemin); color: var(--kb-rozet-pahali-metin); }
.k-rozet--pahali .k-rozet__ok { color: var(--kb-rozet-pahali-ikon); }
.k-rozet--yakin { background: var(--kb-rozet-yakin-zemin); color: var(--kb-rozet-yakin-metin); }
.k-rozet--ucuz { background: var(--kb-rozet-ucuz-zemin); color: var(--kb-rozet-ucuz-metin); }
.k-rozet--ucuz .k-rozet__ok { color: var(--kb-rozet-ucuz-metin); }
.k-rozet--basari { background: var(--k-basari-zemin); color: var(--k-basari); }
.k-rozet--uyari { background: var(--k-uyari-zemin); color: var(--k-uyari); }
.k-rozet--hata { background: var(--k-hata-zemin); color: var(--k-hata); }
.k-rozet--bilgi { background: var(--k-bilgi-zemin); color: var(--k-bilgi); }
/* Nötr (K4 OR-22): yüzey + ince çizgi + ikincil metin; gri/kum dolgu yok. "Veri yok" işareti de bu rozettir, mavi değil;
mavi yalnız bilgi / tür / "Yakında". Simge ya bir rozet ailesinin her üyesinde ya hiçbirinde. */
.k-rozet--notr { background: var(--k-yuzey); color: var(--k-murekkep-ikincil); box-shadow: inset 0 0 0 1px var(--k-cizgi); }
/* Kaynak: 20 px çizgili, 11 px. */
.k-rozet--kaynak { height: 20px; font-size: 0.6875rem; font-weight: var(--k-agirlik-orta); color: var(--kb-rozet-kaynak-metin); background: transparent; box-shadow: inset 0 0 0 1px var(--kb-rozet-kaynak-cizgi); }
/* YENİ rozeti (menü dışı kullanım): sarı-zemin + sarı-metin. */
.k-rozet--yeni { height: 20px; font-size: 0.65625rem; font-weight: var(--k-agirlik-kalin); letter-spacing: 0.06em; text-transform: uppercase; color: var(--k-vurgu-metin); background: var(--k-vurgu-zemin); }
.k-rozet--ekspertiz { background: var(--k-yuzey); box-shadow: inset 0 0 0 1px var(--k-cizgi-guclu); color: var(--k-murekkep); }
.k-rozet--ekspertiz.k-rozet--boyali { color: var(--k-bilgi); background: var(--k-bilgi-zemin); box-shadow: inset 0 0 0 1px var(--k-bilgi); }
.k-rozet--ekspertiz.k-rozet--lokal { color: var(--k-uyari); background: var(--k-uyari-zemin); box-shadow: inset 0 0 0 1px var(--k-uyari); }
.k-rozet--ekspertiz.k-rozet--degisen { color: var(--k-hata); background: var(--k-hata-zemin); box-shadow: inset 0 0 0 1px var(--k-hata); }
.k-rozet--geri-sayim { background: var(--k-yuzey-ters); color: var(--k-murekkep-ters); box-shadow: none; }
/* ── B-32 Fiyat (.k-fiyat) ─────────────────────────────────────────────── */
.k-fiyat { display: grid; gap: var(--k-bosluk-1); font-variant-numeric: tabular-nums lining-nums; }
.k-fiyat__etiket {
font-size: 0.71875rem;
font-weight: var(--k-agirlik-yari-kalin);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--k-murekkep-soluk);
}
.k-fiyat__deger {
font-size: 0.9375rem;
font-weight: var(--k-agirlik-kalin);
line-height: 1.1;
letter-spacing: -0.01em;
color: var(--k-murekkep);
white-space: nowrap;
}
.k-fiyat__deger small { font-size: var(--k-boyut-meta); font-weight: var(--k-agirlik-orta); letter-spacing: 0; color: var(--k-murekkep-ikincil); }
/* Satır içi tutar (K4 OR-10, KR-03 a): "1.923.000 TL"; N0, gerçek kuruş varsa N2; birim sonda, 12,5 px ikincil; bölünmez.
1.923.000TL. "₺" yazılmaz. */
.k-para { font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.k-para__birim { margin-inline-start: 0.25em; font-size: var(--k-boyut-meta); font-weight: var(--k-agirlik-orta); letter-spacing: 0; color: var(--k-murekkep-ikincil); }
.k-fiyat__alt { display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-bosluk-2); }
.k-fiyat__kaynak { font-size: var(--k-boyut-xs); line-height: var(--k-satir-tablo); color: var(--k-murekkep-ikincil); }
/* Kutu: batık yüzey-2; tıklanabilir görünmez (D-13). */
.k-fiyat--kutu {
position: relative;
padding: 12px 12px 10px;
border-radius: var(--k-kose-buyuk-dugme);
background: var(--kb-fiyat-kutu-zemin);
box-shadow: var(--k-golge-batik);
gap: var(--k-bosluk-1);
}
.k-fiyat--kutu .k-fiyat__deger { font-size: 1.1875rem; letter-spacing: -0.02em; }
/* Satar: kalkık kutu + 2 px sarı üst çizgi (izinli sarı). */
.k-fiyat--satar { background: linear-gradient(180deg, var(--k-yuzey), var(--k-yuzey-2)); box-shadow: var(--k-golge-kart-ustunde); }
.k-fiyat--satar::after { content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 2px; border-radius: 2px; background: var(--kb-fiyat-kutu-satar-isaret); }
.k-fiyat-uclu { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--k-bosluk-2); }
@media (max-width: 559.98px) {
.k-fiyat-uclu > .k-fiyat--kutu { display: flex; align-items: baseline; justify-content: space-between; padding: 12px 14px; }
}
@media (min-width: 560px) { .k-fiyat-uclu { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.k-fiyat__ikincil { display: grid; grid-template-columns: 1fr 1fr; gap: var(--k-bosluk-3); padding-top: var(--k-bosluk-3); box-shadow: inset 0 1px 0 var(--k-cizgi); }
.k-fiyat__ikincil .k-fiyat__deger { font-size: var(--k-boyut-govde); }
.k-fiyat--satir { display: block; text-align: right; }
.k-fiyat--satir .k-fiyat__etiket { display: block; font-size: 0.71875rem; font-weight: var(--k-agirlik-orta); letter-spacing: 0.02em; text-transform: none; color: var(--k-murekkep-soluk); }
.k-fiyat--sonuc .k-fiyat__deger { font-size: var(--k-boyut-2xl); }
.k-fiyat--kilitli .k-fiyat__deger { color: var(--k-murekkep-soluk); }
/* ── B-34 Özet / metrik (.k-ozet) ──────────────────────────────────────── */
.k-ozet {
position: relative;
display: grid;
align-content: start;
gap: 2px;
padding: 10px var(--k-bosluk-3);
border-radius: var(--k-kose-md);
background: var(--kb-metrik-kutu);
color: var(--k-murekkep);
text-decoration: none;
box-shadow: var(--k-golge-batik);
}
.k-ozet__etiket { font-size: var(--k-boyut-xs); color: var(--k-murekkep-ikincil); }
.k-ozet__deger { font-size: 1.0625rem; font-weight: var(--k-agirlik-baslik); line-height: var(--k-satir-siki); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.k-ozet__alt { font-size: var(--k-boyut-xs); color: var(--k-murekkep-ikincil); }
.k-ozet--baglanti {
padding-right: var(--k-bosluk-10);
background: var(--k-yuzey);
box-shadow: var(--k-golge-kart);
cursor: pointer;
transition: transform var(--k-sure-orta) var(--k-egri-yay), box-shadow var(--k-sure-orta) var(--k-egri-cikis);
}
@media (hover: hover) { .k-ozet--baglanti:hover { color: var(--k-murekkep); transform: translateY(-2px); box-shadow: var(--k-golge-kart-ustunde); } }
.k-ozet__ok { position: absolute; right: var(--k-bosluk-3); top: 50%; transform: translateY(-50%); color: var(--k-murekkep-pasif); transition: color var(--k-sure-kisa) var(--k-egri-cikis); }
.k-ozet--baglanti:hover .k-ozet__ok { color: var(--k-murekkep); }
.k-ozet-serit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 768px) { .k-ozet-serit { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* ── B-39 İlerleme (.k-ilerleme) ───────────────────────────────────────── */
/* Oran JS ile: el.style.setProperty('--k-ilerleme-oran', 0.6) + aria-valuenow. */
.k-ilerleme { display: grid; gap: 6px; }
.k-ilerleme__bas { display: flex; justify-content: space-between; gap: var(--k-bosluk-2); font-size: var(--k-boyut-sm); color: var(--k-murekkep); font-variant-numeric: tabular-nums; }
.k-ilerleme__bas span + span { color: var(--k-murekkep-ikincil); }
.k-ilerleme__ray {
position: relative;
height: 6px;
overflow: hidden;
border-radius: var(--k-kose-tam);
background: var(--kb-ilerleme-ray);
box-shadow: inset 0 1px 2px oklch(0.25 0.02 268 / 0.1);
}
.k-ilerleme__dolu {
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(90deg, var(--kb-ilerleme-dolu-ust), var(--kb-ilerleme-dolu-alt));
transform-origin: left center;
transform: scaleX(var(--k-ilerleme-oran, 0));
transition: transform 800ms var(--k-egri-cikis) 300ms;
}
.k-ilerleme--belirsiz .k-ilerleme__dolu { right: auto; width: 35%; transform: none; animation: k-belirsiz 1.4s var(--k-egri-cikis) infinite; }
.k-ilerleme--butce .k-ilerleme__dolu[data-asim="true"] { background: var(--k-uyari); }
.k-ilerleme--adim .k-ilerleme__ray { display: flex; gap: 4px; background: transparent; box-shadow: none; }
.k-ilerleme__adim { flex: 1 1 0; border-radius: var(--k-kose-tam); background: var(--kb-ilerleme-ray); box-shadow: inset 0 1px 2px oklch(0.25 0.02 268 / 0.1); }
.k-ilerleme__adim[data-tamam="true"] { background: var(--k-murekkep); box-shadow: none; }
/* ── B-40 Satır (.k-satir) ─────────────────────────────────────────────── */
.k-satirlar { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.k-satir {
position: relative;
display: flex;
align-items: center;
gap: var(--k-bosluk-3);
min-height: var(--k-boyut-satir);
margin: 0 -10px;
padding: 10px 10px 10px 12px;
border-radius: var(--k-kose-md);
font-size: var(--k-boyut-sm);
color: var(--k-murekkep);
transition: background-color var(--k-sure-kisa) var(--k-egri-cikis);
}
.k-satir + .k-satir::before { content: ""; position: absolute; left: 12px; right: 10px; top: 0; height: 1px; background: var(--k-cizgi); transition: opacity var(--k-sure-kisa) var(--k-egri-cikis); }
.k-satir:hover { background: var(--kb-satir-ustunde); }
.k-satir:hover::before,
.k-satir:hover + .k-satir::before { opacity: 0; }
.k-satir__metin { flex: 1 1 auto; min-width: 0; }
.k-satir__etiket { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.90625rem; font-weight: var(--k-agirlik-yari-kalin); letter-spacing: -0.005em; color: var(--k-murekkep); }
.k-satir__alt { display: block; margin-top: 2px; font-size: var(--k-boyut-meta); line-height: var(--k-satir-tablo); color: var(--k-murekkep-ikincil); }
.k-satir__deger { flex: none; font-size: var(--k-boyut-govde); font-weight: var(--k-agirlik-kalin); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; text-align: right; }
.k-satir__ok { flex: none; color: var(--k-murekkep-pasif); transition: transform var(--k-sure-kisa) var(--k-egri-cikis), color var(--k-sure-kisa) var(--k-egri-cikis); }
.k-satir:hover .k-satir__ok { color: var(--k-murekkep); transform: translateX(2px); }
.k-satir__baglanti {
display: flex;
align-items: center;
gap: var(--k-bosluk-3);
flex: 1 1 auto;
min-width: 0;
min-height: var(--k-boyut-satir);
margin: -10px -10px -10px -12px;
padding: 10px 10px 10px 12px;
border-radius: inherit;
color: inherit;
text-decoration: none;
}
.k-satir__baglanti:hover { color: inherit; }
.k-satir:active { transform: scale(0.995); }
.k-satirlar--kartta .k-satir { margin: 0; }
/* ── B-30 Ekspertiz kroki (.k-kroki) ───────────────────────────────────── */
.k-kroki { display: grid; gap: var(--k-bosluk-3); }
.k-kroki__cizim { width: 100%; max-width: 320px; height: auto; margin-inline: auto; }
.k-kroki__cizim [data-durum] { stroke: var(--k-murekkep-ikincil); stroke-width: 1; }
.k-kroki__cizim [data-durum="orijinal"] { fill: var(--k-yuzey); stroke: var(--k-cizgi-guclu); }
.k-kroki__cizim [data-durum="boyali"] { fill: var(--k-bilgi-zemin); stroke: var(--k-bilgi); stroke-width: 1.5; }
.k-kroki__cizim [data-durum="lokal"] { fill: var(--k-uyari-zemin); stroke: var(--k-uyari); stroke-width: 1.5; }
.k-kroki__cizim [data-durum="degisen"] { fill: var(--k-hata-zemin); stroke: var(--k-hata); stroke-width: 1.5; }
.k-kroki__lejant { display: flex; flex-wrap: wrap; gap: var(--k-bosluk-2) var(--k-bosluk-4); margin: 0; padding: 0; list-style: none; font-size: var(--k-boyut-xs); color: var(--k-murekkep-ikincil); }
.k-kroki__lejant-oge { display: inline-flex; align-items: center; gap: var(--k-bosluk-1); }
.k-kroki__harf {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px; height: 20px;
border-radius: 6px;
background: var(--k-yuzey);
color: var(--k-murekkep);
font-size: 0.6875rem;
font-weight: var(--k-agirlik-kalin);
box-shadow: inset 0 0 0 1px var(--k-cizgi-guclu);
}
.k-kroki__harf--boyali { background: var(--k-bilgi-zemin); color: var(--k-bilgi); box-shadow: inset 0 0 0 1px var(--k-bilgi); }
.k-kroki__harf--lokal { background: var(--k-uyari-zemin); color: var(--k-uyari); box-shadow: inset 0 0 0 1px var(--k-uyari); }
.k-kroki__harf--degisen { background: var(--k-hata-zemin); color: var(--k-hata); box-shadow: inset 0 0 0 1px var(--k-hata); }
.k-kroki--kucuk .k-kroki__cizim { max-width: 72px; margin: 0; }
/* ── B-31 Veri tablosu + mobil kart (.k-liste) ─────────────────────────── */
.k-liste__tablo-kap { display: none; overflow-x: auto; }
.k-liste__kartlar { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 1024px) {
.k-liste__tablo-kap { display: block; }
.k-liste__kartlar { display: none; }
}
.k-liste__tablo {
width: 100%;
border-collapse: collapse;
font-family: var(--k-yazi-govde);
font-size: var(--k-boyut-sm);
line-height: var(--k-satir-tablo);
color: var(--k-murekkep);
font-variant-numeric: tabular-nums lining-nums;
}
.k-liste__tablo th {
height: 40px;
padding: 0 var(--k-bosluk-3);
border-bottom: 1px solid var(--k-cizgi);
background: var(--k-yuzey-2);
font-size: 0.71875rem;
font-weight: var(--k-agirlik-yari-kalin);
letter-spacing: var(--k-harf-aralik-etiket);
text-transform: uppercase;
text-align: left;
color: var(--k-murekkep-ikincil);
white-space: nowrap;
}
.k-liste__tablo td { height: var(--k-boyut-satir); padding: var(--k-bosluk-2) var(--k-bosluk-3); border-bottom: 1px solid var(--k-cizgi); vertical-align: middle; }
.k-liste__tablo tbody tr { transition: background-color var(--k-sure-kisa) var(--k-egri-cikis); }
.k-liste__tablo tbody tr:hover { background: var(--kb-satir-ustunde); }
.k-liste__tablo [aria-sort] { cursor: pointer; }
/* K4 OR-17: tablo başlığı tek kalıp (.k-tablo-baslik: .k-liste__tablo dışındaki tablolar thead'e ekler; DataTables dahil):
yüzey-2 şerit, 11,5 px büyük harf +0,08 em, ikincil mürekkep (soluk zemin üstünde AA altı kalıyordu). */
.k-tablo-baslik th {
height: 40px;
padding: 0 var(--k-bosluk-3);
border-bottom: 1px solid var(--k-cizgi);
background: var(--k-yuzey-2);
font-family: var(--k-yazi-govde);
font-size: 0.71875rem;
font-weight: var(--k-agirlik-yari-kalin);
letter-spacing: var(--k-harf-aralik-etiket);
text-transform: uppercase;
text-align: left;
color: var(--k-murekkep-ikincil);
white-space: nowrap;
vertical-align: middle;
}
/* Sıralama: sıralanabilir sütunda th[aria-sort] içinde . Ok etikete 4 px bitişik
(sütunun öbür ucuna itilmez). Etkin sütunda tek ▲/▼ 16 px mürekkep; diğer sıralanabilir sütunlarda soluk ⇅. */
.k-siralama {
-webkit-appearance: none;
appearance: none;
display: inline-flex;
align-items: center;
gap: var(--k-bosluk-1);
min-height: 32px;
margin: 0 -6px;
padding: 0 6px;
border: 0;
border-radius: var(--k-kose-sm);
background: transparent;
color: inherit;
font: inherit;
letter-spacing: inherit;
text-transform: inherit;
cursor: pointer;
}
.k-siralama:hover { color: var(--k-murekkep); background: var(--k-yuzey-batik); }
.k-siralama:focus-visible { outline: var(--k-odak-kalinlik) solid var(--k-odak); outline-offset: 1px; box-shadow: 0 0 0 4px var(--k-odak-ic); }
.k-siralama::after {
content: "";
flex: none;
width: 16px;
height: 16px;
background: var(--k-murekkep-pasif);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 10l4-4 4 4M8 14l4 4 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 10l4-4 4 4M8 14l4 4 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
}
:is([aria-sort="ascending"], [aria-sort="descending"]) > .k-siralama { color: var(--k-murekkep); }
:is([aria-sort="ascending"], [aria-sort="descending"]) > .k-siralama::after { background: var(--k-murekkep); }
[aria-sort="ascending"] > .k-siralama::after {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 14l5-5 5 5'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 14l5-5 5 5'/%3E%3C/svg%3E");
}
[aria-sort="descending"] > .k-siralama::after {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
}
.k-liste__sayi > .k-siralama, th.k-liste__sayi > .k-siralama { flex-direction: row-reverse; }
.k-liste__sayi { text-align: right; white-space: nowrap; }
.k-liste__tablo th.k-liste__sayi { text-align: right; }
.k-liste__islem { width: 1%; white-space: nowrap; text-align: right; }
.k-liste__islem .k-ikon-buton + .k-ikon-buton { margin-left: var(--k-bosluk-1); }
.k-liste__ikinci-satir { display: block; font-size: var(--k-boyut-meta); color: var(--k-murekkep-ikincil); }
.k-liste__altbilgi { padding: var(--k-bosluk-3) 0 0; font-size: var(--k-boyut-xs); color: var(--k-murekkep-ikincil); }
@media (min-width: 1024px) and (pointer: fine) {
.k-liste--sik .k-liste__tablo td { height: var(--k-boyut-satir-sik); padding-block: var(--k-bosluk-1); }
}
.k-liste__kart {
display: grid;
gap: var(--k-bosluk-3);
padding: var(--k-bosluk-4);
border-radius: var(--k-kose-lg);
background: var(--k-yuzey);
box-shadow: var(--k-golge-kart);
}
.k-liste__kart-bas { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--k-bosluk-2); }
.k-liste__kart-baslik { margin: 0; font-size: 0.90625rem; font-weight: var(--k-agirlik-yari-kalin); line-height: var(--k-satir-kart-baslik); }
.k-liste__kart-fiyatlar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--k-bosluk-2); }
.k-liste__kart-eylemler { display: flex; flex-wrap: wrap; gap: var(--k-bosluk-2); }
.k-liste__kart-eylemler > .k-buton { flex: 1 1 0; }
/* ── B-33 Liste kartı (.k-liste-kart) ──────────────────────────────────── */
.k-liste-kart-izgara { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 768px) { .k-liste-kart-izgara { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--k-bosluk-4); } }
.k-liste-kart {
display: grid;
grid-template-rows: auto 1fr auto;
overflow: hidden;
border-radius: var(--k-kose-lg);
background: var(--k-yuzey);
color: var(--k-murekkep);
box-shadow: var(--k-golge-kart);
transition: transform var(--k-sure-orta) var(--k-egri-yay), box-shadow var(--k-sure-orta) var(--k-egri-cikis);
}
@media (hover: hover) { .k-liste-kart:hover { transform: translateY(-2px); box-shadow: var(--k-golge-kart-ustunde); } }
.k-liste-kart__gorsel { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--k-yuzey-batik); }
.k-liste-kart__govde { display: grid; align-content: start; gap: var(--k-bosluk-2); padding: var(--k-bosluk-4) var(--k-bosluk-kart); }
.k-liste-kart__baslik { margin: 0; font-size: 0.90625rem; font-weight: var(--k-agirlik-yari-kalin); line-height: var(--k-satir-kart-baslik); letter-spacing: -0.005em; }
.k-liste-kart__baglanti { color: inherit; text-decoration: none; border-radius: 6px; }
.k-liste-kart__baglanti:hover { color: inherit; }
.k-liste-kart__meta { font-size: var(--k-boyut-meta); line-height: var(--k-satir-tablo); color: var(--k-murekkep-ikincil); }
.k-liste-kart__rozetler { display: flex; flex-wrap: wrap; gap: var(--k-bosluk-1); }
.k-liste-kart__ikinci { padding-top: var(--k-bosluk-2); box-shadow: inset 0 1px 0 var(--k-cizgi); font-size: var(--k-boyut-xs); color: var(--k-murekkep-ikincil); }
.k-liste-kart__eylemler { display: flex; flex-wrap: wrap; gap: var(--k-bosluk-2); padding: var(--k-bosluk-3) var(--k-bosluk-kart) var(--k-bosluk-kart); }
.k-liste-kart__eylemler > .k-buton { flex: 1 1 0; }
/* ── B-35 Kilit (.k-kilit) ─────────────────────────────────────────────── */
.k-kilit {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--k-bosluk-2) var(--k-bosluk-3);
align-items: start;
padding: var(--k-bosluk-3) 14px;
border-radius: var(--k-kose-md);
background: var(--k-yuzey-2);
color: var(--k-murekkep);
font-size: var(--k-boyut-sm);
box-shadow: var(--k-golge-batik);
}
.k-kilit__ikon { color: var(--k-murekkep-ikincil); margin-top: 2px; }
.k-kilit__baslik { display: block; font-weight: var(--k-agirlik-yari-kalin); }
.k-kilit__metin { color: var(--k-murekkep-ikincil); }
.k-kilit__eylem { grid-column: 2; justify-self: start; }
.k-kilit--satir { padding: var(--k-bosluk-2) var(--k-bosluk-3); align-items: center; }
.k-kilit--bant { grid-template-columns: auto 1fr auto; align-items: center; border-radius: 0; }
.k-kilit--bant .k-kilit__eylem { grid-column: auto; }
/* ── B-53 Fiyat geçmişi (.k-fiyat-gecmisi) ─────────────────────────────── */
.k-fiyat-gecmisi { display: grid; gap: var(--k-bosluk-4); }
.k-fiyat-gecmisi__ozet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 768px) { .k-fiyat-gecmisi__ozet { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.k-fiyat-gecmisi__grafik {
position: relative;
min-height: 200px;
padding: var(--k-bosluk-3);
border-radius: var(--k-kose-buyuk-dugme);
background: var(--k-yuzey-2);
color: var(--kb-grafik-etiket);
font-size: var(--k-boyut-xs);
box-shadow: var(--k-golge-batik);
}
.k-fiyat-gecmisi__cizelge { max-height: 280px; overflow: auto; }
.k-fiyat-gecmisi__kaynak { font-size: var(--k-boyut-xs); color: var(--kb-grafik-kaynak-notu); }
/* ── B-06 Çerez bandı (.k-cerez) ───────────────────────────────────────── */
.k-cerez {
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 1085;
display: grid;
gap: var(--k-bosluk-3);
padding: var(--k-bosluk-3) var(--k-bosluk-4) calc(var(--k-bosluk-3) + env(safe-area-inset-bottom));
border-radius: var(--k-kose-xl) var(--k-kose-xl) 0 0;
background: var(--k-yuzey);
color: var(--k-murekkep);
font-size: var(--k-boyut-xs);
line-height: var(--k-satir-tablo);
box-shadow: var(--k-golge-cekmece), var(--k-golge-ic-isik);
}
.k-cerez__metin { margin: 0; }
.k-cerez__eylemler { display: grid; grid-template-columns: 1fr 1fr; gap: var(--k-bosluk-2); }
@media (min-width: 768px) {
.k-cerez { left: var(--k-bosluk-6); right: var(--k-bosluk-6); bottom: var(--k-bosluk-4); grid-template-columns: 1fr auto; align-items: center; padding: var(--k-bosluk-3) var(--k-bosluk-6); border-radius: var(--k-kose-lg); font-size: var(--k-boyut-sm); }
.k-cerez__eylemler { display: flex; }
}
/* ── Giriş hareketi (isteğe bağlı): .k-giris + --i kademe sırası (en çok 5) */
.k-giris { animation: k-belir var(--k-sure-uzun) var(--k-egri-cikis) both; animation-delay: calc(var(--i, 0) * var(--k-kademe)); }
/* ── Anahtar kareler (yalnız transform / opacity) ──────────────────────── */
@keyframes k-soluk-gir { from { opacity: 0; } to { opacity: 1; } }
@keyframes k-belir { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes k-alttan-gir { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes k-sagdan-gir { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes k-olcekli-gir { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
@keyframes k-menu-gir { from { opacity: 0; transform: scale(0.96) translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes k-parilti { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@keyframes k-kayan-cizgi { 0% { transform: translateX(-100%) scaleX(0.4); } 100% { transform: translateX(100%) scaleX(0.4); } }
@keyframes k-belirsiz { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
@keyframes k-nefes { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
/* ── Azaltılmış hareket: giriş/kalkma yok, geçiş 120 ms, döngü durur ───── */
@media (prefers-reduced-motion: reduce) {
.k-cekmece__pencere,
.k-modal__pencere,
.k-cekmece__perde,
.k-modal__perde,
.k-menu__liste { animation: k-soluk-gir var(--k-sure-azaltilmis) linear; }
.k-giris,
.k-iskelet,
.k-yukleniyor__isaret,
.k-ilerleme--belirsiz .k-ilerleme__dolu,
.k-buton[aria-busy="true"]::after,
.k-yukleniyor--cizgi::before { animation: none; }
.k-buton[aria-busy="true"]::after,
.k-yukleniyor--cizgi::before { transform: none; opacity: 0.35; }
.k-buton, .k-ikon-buton, .k-takip-buton, .k-geri-bildirim__oge, .k-kart, .k-ozet--baglanti,
.k-liste-kart, .k-secici__oge, .k-satir, .k-satir__ok, .k-toast {
transition-duration: var(--k-sure-azaltilmis);
transition-timing-function: linear;
}
.k-buton:hover, .k-buton:active:not([aria-disabled="true"]):not(:disabled),
.k-ikon-buton:hover, .k-ikon-buton:active, .k-takip-buton:active, .k-geri-bildirim__oge:active,
.k-kart--kaldir:hover, .k-ozet--baglanti:hover, .k-liste-kart:hover,
.k-satir:active, .k-satir:hover .k-satir__ok { transform: none; }
.k-toast { transform: none; }
.k-ipucu__balon,
.k-ipucu:hover .k-ipucu__balon,
.k-ipucu:focus-within .k-ipucu__balon { transform: translate(-50%, 0); transition: opacity var(--k-sure-azaltilmis) linear; }
.k-secici--sekme .k-secici__oge::after,
.k-ilerleme__dolu,
.k-kahraman__halka-dolu { transition: none; }
}