/* ============================================================================
 * KUYUM PLUS COMMERCE — BİLEŞENLER (KATMAN ⑤)
 * Kart, buton, rozet, tablo, ilerleme çubuğu, boş durum, iskelet yükleme.
 *
 * Buradaki her şey SAYFADAN BAĞIMSIZDIR — ana sayfaya özel hiçbir kural
 * yoktur (o katman ⑥ dashboard.css). FAZ 2+ modülleri bu bileşenleri
 * yeniden yazmadan kullanır.
 * ========================================================================== */

/* --------------------------------------------------------------------------
 * KART
 * ------------------------------------------------------------------------ */
.kpc-card {
    background: var(--kpc-bg-card);
    border: 1px solid var(--kpc-border);
    border-radius: var(--kpc-radius-card);
    box-shadow: var(--kpc-shadow-card);
}

/* Yalnız tıklanabilir kartlarda — statik kart hover'da oynamaz. */
.kpc-card--interactive {
    transition: box-shadow var(--kpc-transition), border-color var(--kpc-transition),
                transform var(--kpc-transition);
}
.kpc-card--interactive:hover {
    border-color: var(--kpc-border-strong);
    box-shadow: var(--kpc-shadow-hover);
    transform: translateY(-1px);
}

.kpc-card__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px var(--kpc-card-padding) 8px;
}
.kpc-card__head--bordered { border-bottom: 1px solid var(--kpc-border); }

.kpc-card__title {
    font-size: var(--kpc-fs-md);
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--kpc-text-primary);
}

.kpc-card__subtitle {
    font-size: var(--kpc-fs-xs);
    color: var(--kpc-text-muted);
    margin-top: 1px;
}

.kpc-card__tools { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.kpc-card__body { padding: 0 var(--kpc-card-padding) var(--kpc-card-padding); }
.kpc-card__body--flush { padding: 0; }


/* --------------------------------------------------------------------------
 * BUTONLAR
 * ------------------------------------------------------------------------ */
.kpc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 34px;
    padding: 0 13px;
    font-size: var(--kpc-fs-sm);
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: var(--kpc-radius-md);
    transition: background var(--kpc-transition), border-color var(--kpc-transition),
                color var(--kpc-transition), box-shadow var(--kpc-transition);
}

/* Zemin `--kp-gold-500` DEĞİL `--kpc-gold-cta` — gerekçe tokens.css'te
 * (beyaz metinle kontrast). Marka altını vurgu/çerçeve/ikon rolünde
 * #C69A43 olarak kalır; yalnız METİN TAŞIYAN dolu düğme koyulaşır. */
.kpc-btn--gold {
    color: #fff;
    /* `var()` YEDEKLİ: token katmanı herhangi bir nedenle yüklenmezse
     * (önbellek, dağıtımda eksik dosya) düğme ŞEFFAF zemin + beyaz metinle
     * GÖRÜNMEZ hale geliyordu — tarayıcıda bir kez yaşandı. Ana eylem
     * düğmesinin başarısızlık biçimi "biraz farklı renk" olmalı,
     * "hiç görünmeyen düğme" değil. */
    background: var(--kpc-gold-cta, #96702D);
    border-color: var(--kpc-gold-cta, #96702D);
    box-shadow: 0 1px 2px rgba(138, 106, 46, .22);
}
.kpc-btn--gold:hover { background: var(--kpc-gold-cta-hover, #8A6A2E); border-color: var(--kpc-gold-cta-hover, #8A6A2E); }
.kpc-btn--gold:active { background: var(--kpc-gold-cta-press, #7A5D28); border-color: var(--kpc-gold-cta-press, #7A5D28); }

.kpc-btn--ghost {
    color: var(--kpc-text-primary);
    background: var(--kpc-bg-card);
    border-color: var(--kpc-border-strong);
}
.kpc-btn--ghost:hover { background: var(--kpc-bg-subtle); border-color: var(--kp-gold-300); }

.kpc-btn--quiet {
    color: var(--kpc-text-secondary);
    background: transparent;
}
.kpc-btn--quiet:hover { background: var(--kpc-bg-subtle); color: var(--kpc-text-primary); }

.kpc-btn--block { width: 100%; }
.kpc-btn--sm { height: 26px; padding: 0 9px; font-size: var(--kpc-fs-xs); }

/* "Tümü →" tipi ince bağlantılar.
 * Referans tasarımda bunlar GRİ değil, sıcak altın tonundadır (ölçüldü:
 * #705A44 / #72624A) — panelin "modüle git" işareti markanın rengini taşır. */
.kpc-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--kpc-fs-xs);
    font-weight: 600;
    color: var(--kpc-gold-ink);
    transition: color var(--kpc-transition);
}
.kpc-link:hover { color: var(--kp-gold-600); }
.kpc-link .kpc-icon { transition: transform var(--kpc-transition); }
.kpc-link:hover .kpc-icon { transform: translateX(2px); }


/* --------------------------------------------------------------------------
 * ROZET (pill badge)
 *
 * NOT: Kuyum Plus'ın `management/css/components.css` dosyasında `.kp-badge`
 * ailesi var; ama o dosya devralınan Metronic kademesine yazılmış ve
 * `--kp-*` token'larına bağlı. Commerce rozetleri kendi ölçüsünü ve
 * yuvarlaklığını kullanır (referans tasarıma göre daha küçük), bu yüzden
 * AYRI bir sınıf ailesi (`kpc-badge`) tanımlanır — mevcut `.kp-badge`
 * kuralları EZİLMEZ, karışmaz.
 * ------------------------------------------------------------------------ */
.kpc-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 21px;
    padding: 0 8px;
    font-size: var(--kpc-fs-xs);
    font-weight: 600;
    white-space: nowrap;
    border-radius: var(--kpc-radius-pill);
}
.kpc-badge__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

.kpc-badge--success { color: var(--kpc-success-ink); background: var(--kpc-success-soft); }
.kpc-badge--warning { color: var(--kpc-warning-ink); background: var(--kpc-warning-soft); }
.kpc-badge--danger  { color: var(--kpc-danger-ink);  background: var(--kpc-danger-soft); }
.kpc-badge--info    { color: var(--kpc-info-ink);    background: var(--kpc-info-soft); }
.kpc-badge--neutral { color: var(--kpc-neutral-ink); background: var(--kpc-neutral-soft); }
.kpc-badge--gold    { color: var(--kpc-gold-badge-ink, #846328); background: var(--kp-gold-100, #F6EDD9); }

/* Sayaç rozeti (Dikkat Gerektirenler listesindeki gibi) */
.kpc-count {
    min-width: 21px;
    height: 20px;
    padding: 0 6px;
    display: inline-grid;
    place-items: center;
    font-size: var(--kpc-fs-xs);
    font-weight: 700;
    border-radius: var(--kpc-radius-sm);
    color: var(--kpc-neutral-ink);
    background: var(--kpc-neutral-soft);
}
.kpc-count--danger  { color: var(--kpc-danger-ink);  background: var(--kpc-danger-soft); }
.kpc-count--warning { color: var(--kpc-warning-ink); background: var(--kpc-warning-soft); }
.kpc-count--info    { color: var(--kpc-info-ink);    background: var(--kpc-info-soft); }


/* --------------------------------------------------------------------------
 * İKON KUTUSU (yumuşak zeminli)
 * ------------------------------------------------------------------------ */
/* Ölçü referans görselden: KPI ikon kutusu 53×53, yarıçap ~16. */
.kpc-iconbox {
    flex: none;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
}
.kpc-iconbox--sm { width: 28px; height: 28px; border-radius: var(--kpc-radius-md); }

.kpc-iconbox--gold    { color: var(--kpc-gold-ink);   background: var(--kpc-warning-soft); }
.kpc-iconbox--blue    { color: var(--kpc-info);       background: var(--kpc-info-soft); }
.kpc-iconbox--violet  { color: var(--kpc-violet);     background: var(--kpc-violet-soft); }
.kpc-iconbox--rose    { color: var(--kpc-rose);       background: var(--kpc-rose-soft); }
.kpc-iconbox--success { color: var(--kpc-success);    background: var(--kpc-success-soft); }
.kpc-iconbox--danger  { color: var(--kpc-danger);     background: var(--kpc-danger-soft); }
.kpc-iconbox--warning { color: var(--kpc-warning-ink);background: var(--kpc-warning-soft); }
.kpc-iconbox--info    { color: var(--kpc-info);       background: var(--kpc-info-soft); }
.kpc-iconbox--neutral { color: var(--kpc-neutral-ink);background: var(--kpc-neutral-soft); }


/* --------------------------------------------------------------------------
 * İLERLEME ÇUBUĞU
 * ------------------------------------------------------------------------ */
.kpc-progress {
    height: 9px;
    border-radius: var(--kpc-radius-pill);
    background: #EDE7DA;
    overflow: hidden;
}
.kpc-progress__bar {
    height: 100%;
    border-radius: inherit;
    background: var(--kpc-gold-gradient);
}
.kpc-progress--neutral { background: var(--kpc-neutral-soft); }
.kpc-progress--neutral .kpc-progress__bar { background: var(--kpc-info); }


/* --------------------------------------------------------------------------
 * TABLO
 *
 * Yatay taşma sarmalayıcıda (`.kpc-tablewrap`) yönetilir; tablo asla sayfayı
 * kırmaz. Sarmalayıcı `tabindex="0"` alır — kaydırma çubuğu klavyeyle de
 * kullanılabilsin diye (WCAG 2.1.1).
 * ------------------------------------------------------------------------ */
.kpc-tablewrap {
    /* ⚠ `position: relative` ZORUNLU — süs değil.
     *
     * Tablo başlığındaki `.kpc-sr-only` (ekran okuyucu etiketi) `position:
     * absolute`tır. Kapsayıcı KONUMLANDIRILMAMIŞ olursa onun kapsayan bloğu
     * bu sarmalayıcı OLMAZ; dolayısıyla `overflow-x: auto` onu KIRPMAZ ve
     * element sayfanın sağına taşarak TÜM SAYFAYI yatay kaydırılır yapar.
     * 768 px'te ölçüldü: belge scrollWidth 938 > 768, taşan tek şey 1 px'lik
     * görünmez etiketti. `relative` sarmalayıcıyı kapsayan blok yapar. */
    position: relative;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
}
.kpc-tablewrap:focus-visible { outline-offset: -2px; }

.kpc-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    font-size: var(--kpc-fs-sm);
}

.kpc-table thead th {
    padding: 7px var(--kpc-card-padding);
    font-size: var(--kpc-fs-xs);
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    color: var(--kpc-text-secondary);
    background: var(--kpc-bg-subtle);
    border-top: 1px solid var(--kpc-border);
    border-bottom: 1px solid var(--kpc-border);
}

.kpc-table tbody td {
    /* Referansta sipariş satırı ~45 px; 9 px dikey dolgu 54 px veriyordu. */
    padding: 5px var(--kpc-card-padding);
    vertical-align: middle;
    border-bottom: 1px solid var(--kpc-border);
}
.kpc-table tbody tr:last-child td { border-bottom: 0; }
.kpc-table tbody tr { transition: background var(--kpc-transition); }
.kpc-table tbody tr:hover { background: var(--kpc-bg-hover); }

.kpc-table .is-numeric { text-align: right; font-variant-numeric: tabular-nums; }
.kpc-table .is-tight { width: 1%; white-space: nowrap; }


/* --------------------------------------------------------------------------
 * AVATAR / KANAL ROZETİ
 * ------------------------------------------------------------------------ */
.kpc-chip-avatar {
    flex: none;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    border-radius: var(--kpc-radius-sm);
}

.kpc-person {
    flex: none;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    font-size: var(--kpc-fs-xs);
    font-weight: 700;
    border-radius: var(--kpc-radius-lg);
}
.kpc-person--rose   { color: #B4452A; background: var(--kpc-rose-soft); }
.kpc-person--blue   { color: var(--kpc-info-ink); background: var(--kpc-info-soft); }
.kpc-person--violet { color: #6D28D9; background: var(--kpc-violet-soft); }
.kpc-person--gold   { color: var(--kpc-gold-ink); background: var(--kp-gold-100); }


/* --------------------------------------------------------------------------
 * ÜRÜN GÖRSELİ
 *
 * Kaynak dosya bulunamazsa `onerror` ile `.is-fallback` eklenir ve kutu
 * KIRIK İKON yerine nötr bir yer tutucuya döner (bkz. commerce/js/app.js).
 * ------------------------------------------------------------------------ */
.kpc-thumb {
    flex: none;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    overflow: hidden;
    background: var(--kpc-bg-subtle);
    border: 1px solid var(--kpc-border);
    border-radius: var(--kpc-radius-lg);
}
/* `contain`: ürün görselinin oranı ne olursa olsun KIRPILMAZ. Kutunun
 * kendi zemini var; görseller şeffaf zeminle üretildi (bkz. products/_README.md). */
.kpc-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.kpc-thumb.is-fallback img { display: none; }
.kpc-thumb.is-fallback::after {
    content: '';
    width: 14px;
    height: 14px;
    border: 1.6px solid var(--kpc-text-muted);
    border-radius: 3px;
    opacity: .5;
}
/* Referansta ürün karosunun görsel alanı kare DEĞİL, yatay bir panel
 * (ölçüldü: ~123 × 63 px). */
.kpc-thumb--lg {
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
    border-radius: var(--kpc-radius-lg);
}
.kpc-thumb--lg img { padding: 6px; }


/* --------------------------------------------------------------------------
 * BOŞ DURUM
 * ------------------------------------------------------------------------ */
.kpc-empty {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 34px 20px;
    text-align: center;
}
.kpc-empty__icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    color: var(--kpc-text-muted);
    background: var(--kpc-bg-subtle);
    border-radius: var(--kpc-radius-xl);
}
.kpc-empty__title { font-size: var(--kpc-fs-md); font-weight: 600; }
.kpc-empty__text  { font-size: var(--kpc-fs-sm); color: var(--kpc-text-secondary); max-width: 40ch; }


/* --------------------------------------------------------------------------
 * İSKELET YÜKLEME (skeleton)
 *
 * FAZ 1'de hiçbir veri asenkron gelmiyor, bu yüzden ekranda GÖRÜNMÜYOR.
 * Altyapı şimdi konuyor ki FAZ 7+ (pazaryeri çağrıları) geldiğinde her
 * modül kendi yükleme görünümünü yeniden icat etmesin.
 * ------------------------------------------------------------------------ */
.kpc-skel {
    background: linear-gradient(90deg,
        var(--kpc-neutral-soft) 25%,
        #F7F9FC 37%,
        var(--kpc-neutral-soft) 63%);
    background-size: 400% 100%;
    border-radius: var(--kpc-radius-sm);
    animation: kpc-skel 1.4s ease-in-out infinite;
}
.kpc-skel--text { height: 10px; margin: 5px 0; }
.kpc-skel--title { height: 14px; width: 45%; }
.kpc-skel--block { height: 100%; min-height: 80px; border-radius: var(--kpc-radius-xl); }

@keyframes kpc-skel {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}


/* --------------------------------------------------------------------------
 * SAYFA BAŞLIĞI
 * ------------------------------------------------------------------------ */
.kpc-pagehead {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    /* Izgara `gap`i (14 px) üstüne 8 px daha: referansta başlık bloğu ile ilk
     * kart arası 22 px, kart aralığından bilinçli olarak geniştir. */
    margin-bottom: 8px;
}
.kpc-pagehead__title {
    font-size: var(--kpc-fs-xl);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.2;
}
.kpc-pagehead__subtitle {
    margin-top: 2px;
    font-size: var(--kpc-fs-sm);
    color: var(--kpc-text-secondary);
}
.kpc-pagehead__actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

@media (max-width: 575.98px) {
    .kpc-pagehead__actions { margin-left: 0; width: 100%; }
    .kpc-pagehead__actions > * { flex: 1; }
    .kpc-pagehead__title { font-size: 18px; }
}


/* --------------------------------------------------------------------------
 * MODÜL YER TUTUCUSU (geliştirilmemiş sayfalar)
 * ------------------------------------------------------------------------ */
.kpc-placeholder {
    display: grid;
    justify-items: center;
    gap: 12px;
    padding: 56px 24px 64px;
    text-align: center;
}
.kpc-placeholder__icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    color: var(--kpc-gold-ink);
    background: var(--kpc-gold-surface);
    border: 1px solid var(--kpc-gold-border);
    border-radius: 18px;
}
.kpc-placeholder__title { font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.kpc-placeholder__text {
    max-width: 52ch;
    font-size: var(--kpc-fs-md);
    color: var(--kpc-text-secondary);
}
.kpc-placeholder__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 2px;
}

/* ==========================================================================
   `hidden` niteliği HER ZAMAN kazanır
   --------------------------------------------------------------------------
   ⚠ GERÇEKTEN YAŞANDI: `.kpc-bulkbar { display: flex }` taşıyan bir öğeye
     JavaScript `hidden` niteliğini koyuyordu, ama tarayıcının `[hidden]`
     varsayılanı (`display: none`) SINIF KURALINDAN DAHA ZAYIF olduğu için
     çubuk hiç gizlenmedi: ekranda sürekli "0 ürün seçildi" yazıyordu.

     Hata JS'te DEĞİLDİ — nitelik doğru konuyordu — ve tarayıcıda bakmadan
     görülmesi mümkün değildi.

   Bu kural `hidden`ın anlamını değiştirmez, yalnız onu zorlar; bu yüzden
   hiçbir bileşeni bozamaz.
   ========================================================================== */
[hidden] { display: none !important; }

/* ============================================================================
 * FLASH MESAJLARI  (FAZ 0 / P1-016)
 *
 * ⚠ NEDEN GLOBAL KATMANDA
 *   Benzer bir bileşen (`.kpc-note`) zaten vardı ama `catalog.css` içinde
 *   yaşıyordu ve o dosya YALNIZ ürün ekranlarında yükleniyor. Flash mesajı
 *   ise HER ekranda çıkabilir; bileşeni orada bırakmak, mesajın bazı
 *   sayfalarda biçimsiz görünmesi demekti.
 *
 * ⚠ DÜZEN KAYMASI YOK: kapsayıcı yalnız mesaj VARKEN render edilir
 *   (bkz. `templates/partials/messages.html`), boş bir yer tutmaz.
 *
 * ⚠ UZUN METİN: `overflow-wrap` + `min-width: 0` — 500 karakterlik bir
 *   doğrulama hatası kartı yırtmaz, mobilde yatay taşma üretmez.
 * ========================================================================= */
.kpc-flashes {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 16px;
}

.kpc-flash {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid transparent;
    border-radius: var(--kpc-radius-md, 10px);
    font-size: 14px;
    line-height: 1.45;
}

.kpc-flash__icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.kpc-flash__text {
    margin: 0;
    min-width: 0;                 /* flex çocuğunun taşmasını engeller */
    overflow-wrap: anywhere;
}

/* `app.js` firma çatışması uyarısındaki "Firma seç" bağlantısı; sıfırlama
   (`a { color: inherit; text-decoration: none }`) onu düz metne çeviriyordu. */
.kpc-flash__text a {
    font-weight: 600;
    text-decoration: underline;
}

.kpc-flash--success {
    background: var(--kpc-success-soft);
    border-color: var(--kpc-success);
    color: var(--kpc-success-ink);
}

.kpc-flash--error {
    background: var(--kpc-danger-soft);
    border-color: var(--kpc-danger);
    color: var(--kpc-danger-ink);
}

.kpc-flash--warning {
    background: var(--kpc-warning-soft);
    border-color: var(--kpc-warning);
    color: var(--kpc-warning-ink);
}

.kpc-flash--info,
.kpc-flash--debug {
    background: var(--kpc-info-soft);
    border-color: var(--kpc-info);
    color: var(--kpc-info-ink);
}

/* --- hatalı alan ---------------------------------------------------------
   ⚠ Hata metni TEK BAŞINA yetmiyordu: uzun bir formda kullanıcı mesajı
     okuyor ama HANGİ alanın hatalı olduğunu aramak zorunda kalıyordu.
     Kenarlık rengi + `aria-invalid` ikisi birlikte işaretler. */
.kpc-input--error {
    border-color: var(--kpc-danger);
    background: var(--kpc-danger-soft);
}

.kpc-input--error:focus {
    outline-color: var(--kpc-danger);
}

/* --- uzun rozetli kart başlığı ------------------------------------------
   ⚠ ÖLÇÜLDÜ: vergi rozeti ("230 — Külçe Altın/Gümüş İstisnası (KDVK
     17/4-g)") 305 px ve `kpc-card__head` sarmayan bir flex satırıydı →
     390 px'te sayfayı 33 px TAŞIRIYORDU. Metni kısaltmak yerine başlık
     sarmalı: yasal dayanak kısaltılacak bir süs değil. */
.kpc-card__head { flex-wrap: wrap; }

.kpc-card__head .kpc-badge {
    white-space: normal;
    text-align: left;
    max-width: 100%;
}