/* ==========================================================================
   teklifler.css
   Bootstrap 5 üzerine ek stiller. Her PHP fonksiyonunun kendi öneki vardır:

     mytekliflerim()            -> .mtk-*
     mybaskitimeLiveSearch()    -> .mls-*

   Gereken: Bootstrap 5 CSS + Material Symbols Outlined fontu
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
   ========================================================================== */

/* --------------------------------------------------------------------------
   Ortak: değişkenler + Material Symbols taban stili
   -------------------------------------------------------------------------- */
:root {
    --tk-primary: #00a69d;
    --tk-primary-dark: #00857e;
    --tk-green: #1b9a7c;
    --tk-green-dark: #158167;
    --tk-gray-50: #f9fafb;
    --tk-gray-100: #f3f4f6;
    --tk-gray-200: #e5e7eb;
    --tk-gray-300: #d1d5db;
    --tk-gray-400: #9ca3af;
    --tk-gray-500: #6b7280;
    --tk-gray-600: #4b5563;
    --tk-gray-700: #374151;
    --tk-gray-800: #1f2937;
    --tk-gray-900: #111827;
    --tk-slate-50: #f8fafc;
    --tk-slate-100: #f1f5f9;
}

.material-symbols-outlined {
    font-size: 1.25em;
    line-height: 1;
    vertical-align: middle;
    user-select: none;
    flex-shrink: 0;
}


/* ==========================================================================
   mytekliflerim()  ->  .mtk-*
   ========================================================================== */

/* ---- Ortak yardımcılar ---- */
.mtk-text-primary { color: var(--tk-primary); }
.mtk-link { color: var(--tk-primary); font-weight: 700; text-decoration: none; }
.mtk-link:hover { text-decoration: underline; color: var(--tk-primary); }

/* ---- Butonlar ---- */
.mtk-btn-primary,
.mtk-btn-gray,
.mtk-btn-dark,
.mtk-btn-approve,
.mtk-btn-revise,
.mtk-btn-pay,
.mtk-btn-notify {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border: 0;
    text-decoration: none;
    transition: all .2s;
    cursor: pointer;
}

.mtk-btn-primary { background: var(--tk-primary); color: #fff; font-size: 12px; font-weight: 800; text-transform: uppercase; padding: .875rem 1.5rem; border-radius: 16px; box-shadow: 0 4px 6px rgba(0, 0, 0, .1); }
.mtk-btn-primary:hover { background: var(--tk-primary-dark); color: #fff; }
.mtk-btn-primary--sm { font-size: 14px; font-weight: 700; text-transform: none; padding: .625rem 1.25rem; border-radius: 8px; box-shadow: none; }

.mtk-btn-gray { background: var(--tk-gray-100); color: var(--tk-gray-700); font-size: 12px; font-weight: 700; padding: .75rem 1.5rem; border-radius: 12px; }
.mtk-btn-gray:hover { background: var(--tk-gray-200); color: var(--tk-gray-700); }

.mtk-btn-dark { background: #1f2937; color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; padding: .75rem 1rem; border-radius: 12px; }
.mtk-btn-dark:hover { background: #111827; color: #fff; }
.mtk-btn-dark--sm { font-size: 12px; text-transform: none; padding: .375rem .75rem; border-radius: 4px; }

/* ---- Giriş yap kutusu ---- */
.mtk-login { max-width: 28rem; background: #fff; border: 1px solid var(--tk-gray-100); border-radius: 24px; padding: 2rem; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.mtk-login-icon { width: 64px; height: 64px; margin: 0 auto 1rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--tk-slate-100); color: var(--tk-primary); }
.mtk-login-icon .material-symbols-outlined { font-size: 1.75rem; }
.mtk-login-title { font-size: 1.25rem; font-weight: 800; color: var(--tk-gray-900); margin-bottom: .5rem; }
.mtk-login-text { font-size: 12px; line-height: 1.625; color: var(--tk-gray-500); margin-bottom: 1.5rem; }

/* ---- Kartlar ---- */
.mtk-card { background: #fff; border: 1px solid var(--tk-gray-200); border-radius: 24px; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.mtk-card-pad { padding: 1.75rem; }
.mtk-card-title { font-size: 14px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; color: var(--tk-gray-900); margin: 0 0 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--tk-gray-100); }
.mtk-card-title--plain { margin-bottom: .75rem; padding-bottom: 0; border-bottom: 0; }

/* ---- Detay sayfası kapsayıcı ---- */
.mtk-detail { width: 100%; }

/* ---- Başlık ---- */
.mtk-head { padding: 1.25rem; }
.mtk-head-title { font-size: 1.25rem; font-weight: 900; letter-spacing: -.025em; color: var(--tk-gray-900); margin: 0; }
.mtk-head-sub { font-size: 12px; font-weight: 500; color: var(--tk-gray-500); margin: .25rem 0 0; }

/* ---- Ürün tablosu ---- */
.mtk-table { min-width: 500px; }
.mtk-table > :not(caption) > * > * { border-color: var(--tk-gray-100); }
.mtk-table tbody tr:last-child > td { border-bottom: 0; }
.mtk-th th { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--tk-gray-400); }
.mtk-col-product { width: 40%; }
.mtk-row > td { transition: background-color .15s; }
.mtk-row:hover > td { background-color: var(--tk-slate-50); }
.mtk-thumb { width: 56px; height: 56px; object-fit: cover; border: 1px solid var(--tk-gray-200); border-radius: 12px; }
.mtk-prod-name { font-size: 12px; font-weight: 800; color: var(--tk-gray-900); }
.mtk-prod-props { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; margin-top: .25rem; font-size: 10px; color: var(--tk-gray-500); }
.mtk-prop-label { font-weight: 700; color: var(--tk-gray-700); margin-right: .25rem; }
.mtk-sep { margin: 0 .375rem; color: var(--tk-gray-300); }
.mtk-file-badge { display: inline-flex; align-items: center; gap: .25rem; padding: .125rem .5rem; border-radius: 4px; background: #dbeafe; color: #1e40af; font-size: 9px; font-weight: 700; text-decoration: none; transition: background-color .15s; }
.mtk-file-badge:hover { background: #bfdbfe; color: #1e40af; }
.mtk-cell-qty { font-size: 12px; font-weight: 700; color: var(--tk-gray-900); }
.mtk-cell-price { font-size: 12px; font-weight: 600; color: var(--tk-gray-600); }
.mtk-cell-total { font-size: 14px; font-weight: 900; color: var(--tk-gray-900); }
.mtk-empty { font-size: 12px; color: var(--tk-gray-500); }

/* ---- Müşteri notu ---- */
.mtk-note { margin: 0; padding: 1rem; border-radius: 12px; background: var(--tk-slate-50); font-size: 12px; font-weight: 500; line-height: 1.625; color: var(--tk-gray-600); }

/* ---- Tasarım kartı ---- */
.mtk-design { position: relative; overflow: hidden; padding: 1.5rem; margin-bottom: 1.5rem; text-align: center; }
.mtk-design-bar { position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--tk-green); }
.mtk-design-title { font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; color: #233560; margin-bottom: 1rem; }
.mtk-design-frame { position: relative; margin-bottom: 1.25rem; padding: .5rem; border: 1px solid var(--tk-gray-200); border-radius: 16px; background: rgba(249, 250, 251, .5); }
.mtk-design-img { display: block; width: 100%; max-height: 220px; object-fit: contain; border-radius: 12px; transition: opacity .2s; }
.mtk-design-frame:hover .mtk-design-img { opacity: .9; }
.mtk-design-zoom { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .4); border-radius: 12px; opacity: 0; transition: opacity .2s; }
.mtk-design-frame:hover .mtk-design-zoom { opacity: 1; }
.mtk-design-zoom .material-symbols-outlined { color: #fff; font-size: 2.25rem; }

.mtk-btn-approve { width: 100%; padding: 1rem; margin-bottom: .75rem; background: var(--tk-green); color: #fff; font-size: 14px; font-weight: 700; border-radius: 12px; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.mtk-btn-approve:hover { background: var(--tk-green-dark); color: #fff; }
.mtk-btn-revise { width: 100%; padding: .875rem; background: #fff; border: 2px solid #d3dce6; color: #6b7b93; font-size: 14px; font-weight: 700; border-radius: 12px; }
.mtk-btn-revise:hover { background: var(--tk-gray-50); }
.mtk-btn-revise .material-symbols-outlined { color: var(--tk-gray-400); }

.mtk-revise { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--tk-gray-100); text-align: left; }
.mtk-revise-label { display: block; margin-bottom: .5rem; font-size: 11px; font-weight: 700; color: var(--tk-gray-700); }
.mtk-textarea { border: 1px solid var(--tk-gray-200); border-radius: 12px; padding: .75rem; font-size: 12px; }
.mtk-textarea:focus { border-color: var(--tk-green); box-shadow: 0 0 0 .2rem rgba(27, 154, 124, .15); }

.mtk-status { padding: .75rem; border-radius: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: .375rem; }
.mtk-status--ok { font-size: 14px; color: #059669; background: #ecfdf5; border: 1px solid #d1fae5; }
.mtk-status--wait { font-size: 12px; color: var(--tk-gray-500); background: var(--tk-gray-50); border: 1px solid var(--tk-gray-100); }

/* ---- Fiyat özeti ---- */
.mtk-sum { font-size: 14px; }
.mtk-sum-row { display: flex; align-items: center; justify-content: space-between; font-weight: 600; color: var(--tk-gray-500); }
.mtk-sum-val { color: var(--tk-gray-900); }
.mtk-sum-total { display: flex; align-items: center; justify-content: space-between; margin-top: .5rem; padding-top: 1.25rem; border-top: 1px solid var(--tk-gray-100); }
.mtk-sum-total-label { font-size: 1rem; font-weight: 900; text-transform: uppercase; color: var(--tk-gray-900); }
.mtk-sum-total-val { font-size: 1.25rem; font-weight: 900; color: var(--tk-primary); }

/* ---- Ödeme butonları ---- */
.mtk-pay { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--tk-gray-100); }
.mtk-btn-pay { width: 100%; padding: .875rem; font-size: 11px; font-weight: 900; text-transform: uppercase; color: #fff; border-radius: 12px; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.mtk-btn-pay .material-symbols-outlined { font-size: 1.125rem; }
.mtk-btn-pay--primary { background: var(--tk-primary); }
.mtk-btn-pay--primary:hover { background: var(--tk-primary-dark); color: #fff; }
.mtk-btn-pay--blue { background: #2563eb; }
.mtk-btn-pay--blue:hover { background: #1d4ed8; color: #fff; }
.mtk-btn-pay--dark { background: #1e293b; }
.mtk-btn-pay--dark:hover { background: #334155; color: #fff; }
.mtk-btn-pay--disabled { background: #94a3b8; cursor: not-allowed; }

/* ---- Havale bilgileri ---- */
.mtk-bank { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--tk-gray-100); }
.mtk-bank-title { margin-bottom: .75rem; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .025em; color: var(--tk-gray-800); }
.mtk-bank-card { margin-bottom: .5rem; padding: .75rem; border: 1px solid #d1fae5; border-radius: 12px; background: rgba(236, 253, 245, .5); font-size: 12px; color: var(--tk-gray-700); }
.mtk-bank-name { display: flex; align-items: center; gap: .5rem; font-weight: 700; color: #065f46; }
.mtk-bank-no { margin-top: .25rem; font-family: var(--bs-font-monospace); font-size: 13px; font-weight: 500; letter-spacing: -.025em; }
.mtk-bank-owner { margin-top: .25rem; font-size: 10px; font-weight: 700; color: var(--tk-gray-500); }
.mtk-bank-note { margin: .5rem 0 .75rem; font-size: 10px; line-height: 1.625; text-align: center; color: var(--tk-gray-500); }
.mtk-bank-note b { color: var(--tk-gray-800); }
.mtk-btn-notify { width: 100%; padding: .75rem; background: #d1fae5; color: #065f46; font-size: 11px; font-weight: 900; text-transform: uppercase; border-radius: 12px; }
.mtk-btn-notify:hover { background: #a7f3d0; }

/* ---- İşlem yapılamaz ---- */
.mtk-noaction { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--tk-gray-100); text-align: center; }
.mtk-noaction-badge { display: inline-flex; align-items: center; gap: .375rem; padding: .5rem 1rem; border-radius: 12px; background: var(--tk-gray-100); color: var(--tk-gray-500); font-size: 10px; font-weight: 700; text-transform: uppercase; }

/* ---- Sipariş akışı (timeline) ---- */
.mtk-sticky { position: sticky; top: 1.5rem; }
.mtk-tl { position: relative; margin-left: .5rem; padding: 0 0 1.5rem .75rem; border-left: 2px solid var(--tk-gray-100); }
.mtk-tl-item { position: relative; padding-left: 1.5rem; margin-bottom: 1.5rem; }
.mtk-tl-item:last-child { margin-bottom: .5rem; }
.mtk-tl-icon { position: absolute; z-index: 1; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 50%; }
.mtk-tl-icon--active { top: 0; left: -23px; width: 44px; height: 44px; color: var(--tk-primary); }
.mtk-tl-icon--active .material-symbols-outlined { font-size: 1.75rem; }
.mtk-tl-icon--done { top: 4px; left: -19px; width: 36px; height: 36px; color: #10b981; }
.mtk-tl-icon--done .material-symbols-outlined { font-size: 1.375rem; }
.mtk-tl-icon--todo { top: 6px; left: -15px; width: 28px; height: 28px; color: var(--tk-gray-300); }
.mtk-tl-icon--todo .material-symbols-outlined { font-size: 10px; }
.mtk-tl-title { font-size: 12px; }
.mtk-tl-title--active { color: var(--tk-primary); font-weight: 900; }
.mtk-tl-title--done { color: var(--tk-gray-800); font-weight: 700; }
.mtk-tl-title--todo { color: var(--tk-gray-400); font-weight: 500; }
.mtk-tl-date { margin-top: .125rem; font-size: 9px; font-weight: 600; color: var(--tk-gray-400); }
.mtk-tl-date--active { color: var(--tk-primary); font-weight: 700; }

/* ---- Liste sayfası ---- */
.mtk-list-title { font-size: 1.5rem; font-weight: 700; color: var(--tk-gray-900); margin: 0; }
.mtk-list-table { font-size: 14px; color: var(--tk-gray-700); }
.mtk-list-table thead th { font-weight: 700; color: var(--tk-gray-800); }
.mtk-list-date { font-size: 12px; color: var(--tk-gray-500); }
.mtk-list-sub { font-size: 12px; color: var(--tk-gray-500); }

/* Durum renkleri */
.mtk-st-amber { color: #d97706; }
.mtk-st-blue { color: #3b82f6; }
.mtk-st-blue-dark { color: #2563eb; }
.mtk-st-orange { color: #ea580c; }
.mtk-st-emerald { color: #059669; }
.mtk-st-purple { color: #a855f7; }
.mtk-st-purple-dark { color: #9333ea; }
.mtk-st-teal { color: #0d9488; }
.mtk-st-sky { color: #0284c7; }
.mtk-st-green { color: #16a34a; }
.mtk-st-gray { color: var(--tk-gray-600); }


/* ==========================================================================
   mybaskitimeLiveSearch()  ->  .mls-*
   ========================================================================== */

.mls-item { display: flex; align-items: center; justify-content: space-between; padding: .625rem .75rem; border-bottom: 1px solid rgba(243, 244, 246, .6); border-radius: 12px; text-decoration: none; cursor: pointer; transition: background-color .15s; }
.mls-item:last-child { border-bottom: 0; }
.mls-item:hover { background: var(--tk-slate-50); }

.mls-left { display: flex; align-items: center; gap: .75rem; min-width: 0; overflow: hidden; }
.mls-body { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }

.mls-thumb { width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 2px; background: #fff; border: 1px solid var(--tk-gray-200); border-radius: 8px; }
.mls-thumb--sm { width: 32px; height: 32px; }
.mls-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }

.mls-thumb-icon { width: 32px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 8px; }
.mls-thumb-icon .material-symbols-outlined { font-size: 14px; }
.mls-thumb-icon--cat { background: rgba(0, 166, 157, .1); color: var(--tk-primary); }
.mls-thumb-icon--brand { background: #fffbeb; color: #d97706; }

.mls-name { font-size: 12px; font-weight: 700; color: var(--tk-gray-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mls-name--normal { font-weight: 500; color: var(--tk-gray-700); }
.mls-price { font-size: 10px; font-weight: 800; color: var(--tk-primary); }
.mls-hl { font-weight: 800; color: var(--tk-gray-900); }

.mls-badge { flex-shrink: 0; margin-left: .5rem; padding: .125rem .5rem; border-radius: 6px; font-size: 10px; font-weight: 700; transition: all .15s; }
.mls-badge .material-symbols-outlined { font-size: 11px; margin-left: .125rem; }
.mls-badge--product { background: #f0fdfa; color: var(--tk-primary); }
.mls-item:hover .mls-badge--product { background: var(--tk-primary); color: #fff; }
.mls-badge--cat { background: var(--tk-slate-100); color: var(--tk-gray-500); }
.mls-item:hover .mls-badge--cat { background: var(--tk-primary); color: #fff; }
.mls-badge--brand { background: #fffbeb; color: #b45309; }
.mls-item:hover .mls-badge--brand { background: #d97706; color: #fff; }


/* ==========================================================================
   urun-detay.css
   urun-detay-script.php içindeki fonksiyonların sınıfları (Bootstrap 5 + özel).
   Her fonksiyonun kendi öneki vardır:

     switchBaskitimeTab()   -> .sbt-*
     selectProductColor()   -> .spc-*
     selectBaskiTuruPill()  -> .btp-*
     selectBaskiYonuPill()  -> .byp-*
     TeklifEkle() (Swal)    -> .tke-*

   Gereken: Bootstrap 5 CSS + Material Symbols Outlined fontu
   ========================================================================== */

:root {
    --ud-primary: #00a69d;
    --ud-primary-dark: #00857e;
    --ud-orange: #ff6701;
    --ud-orange-dark: #e05b00;
    --ud-gray-50: #f9fafb;
    --ud-gray-100: #f3f4f6;
    --ud-gray-200: #e5e7eb;
    --ud-gray-400: #9ca3af;
    --ud-gray-600: #4b5563;
    --ud-gray-800: #1f2937;
    --ud-gray-900: #111827;
}

.material-symbols-outlined {
    font-size: 1.25em;
    line-height: 1;
    vertical-align: middle;
    user-select: none;
    flex-shrink: 0;
}


/* ==========================================================================
   switchBaskitimeTab()  ->  .sbt-*
   JS her butona .sbt-btn ekler, aktif olana .sbt-btn--active ekler.
   İkon: <span class="material-symbols-outlined"> (buton içinde)
   Paneller: .d-none ile açılıp kapanır.
   ========================================================================== */
.sbt-btn {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    padding: .5rem .875rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ud-gray-600);
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: all .2s;
}
.sbt-btn:hover { color: var(--ud-gray-900); }
.sbt-btn .material-symbols-outlined { color: var(--ud-gray-400); }

.sbt-btn--active {
    background: #fff;
    color: var(--ud-gray-900);
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.sbt-btn--active .material-symbols-outlined { color: var(--ud-primary); }


/* ==========================================================================
   selectProductColor()  ->  .spc-*
   .spc-box        : .color-thumb-box (renk küçük resmi kutusu)
   .spc-box--active: seçili renk (kalın kenarlık + halka)
   Onay ikonu (.color-active-check) .d-none ile gösterilir/gizlenir.
   ========================================================================== */
.spc-box {
    border: 1px solid var(--ud-gray-200);
    transition: all .15s;
}
.spc-box--active {
    border: 2px solid var(--ud-primary);
    box-shadow: 0 0 0 2px var(--ud-primary);
}


/* ==========================================================================
   selectBaskiTuruPill()  ->  .btp-*
   ========================================================================== */
.btp-pill {
    flex: 1 1 0;
    min-width: 120px;
    padding: .75rem 1.75rem;
    border: 0;
    border-radius: 99px;
    background: rgba(243, 244, 246, .8);
    color: var(--ud-gray-800);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: all .2s;
}
.btp-pill:hover { background: rgba(229, 231, 235, .8); }
.btp-pill--active,
.btp-pill--active:hover {
    background: var(--ud-primary);
    color: #fff;
    font-weight: 800;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
@media (min-width: 576px) {
    .btp-pill { flex: 0 1 auto; }
}


/* ==========================================================================
   selectBaskiYonuPill()  ->  .byp-*
   ========================================================================== */
.byp-pill {
    flex: 1 1 0;
    min-width: 120px;
    padding: .75rem 1.75rem;
    border: 0;
    border-radius: 99px;
    background: rgba(243, 244, 246, .8);
    color: var(--ud-gray-800);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: all .2s;
}
.byp-pill:hover { background: rgba(229, 231, 235, .8); }
.byp-pill--active,
.byp-pill--active:hover {
    background: var(--ud-primary);
    color: #fff;
    font-weight: 800;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
@media (min-width: 576px) {
    .byp-pill { flex: 0 1 auto; }
}


/* ==========================================================================
   TeklifEkle() -> SweetAlert2 "Teklif Sepetine Eklendi" penceresi  ->  .tke-*
   ========================================================================== */
.tke-popup {
    padding: 1.5rem;
    border-radius: 16px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, .25);
}
.tke-details {
    margin-top: .5rem;
    padding: .75rem;
    background: var(--ud-gray-50);
    border: 1px solid var(--ud-gray-200);
    border-radius: 12px;
    font-size: 12px;
    line-height: 1.625;
    color: var(--ud-gray-600);
    text-align: left;
}
.tke-details > div + div { margin-top: .25rem; }

.tke-btn {
    padding: .75rem 1.5rem;
    border: 0;
    border-radius: 16px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .2s;
}
.tke-btn--confirm { background: var(--ud-orange); }
.tke-btn--confirm:hover { background: var(--ud-orange-dark); color: #fff; }
.tke-btn--cancel { background: var(--ud-primary); }
.tke-btn--cancel:hover { background: var(--ud-primary-dark); color: #fff; }


/* ==========================================================================
   baskitime-app.css
   baskitime-app.js içindeki fonksiyonların sınıfları (Bootstrap 5 + özel).
   Her fonksiyonun kendi öneki vardır:

     updateItemCountBadge()        -> .uic-*
     removeCartItemRow()  (Swal)   -> .rci-*
     clearWholeCart()     (Swal)   -> .cwc-*
     selectProductColor()          -> .spc-*
     #teklif-form submit  (Swal)   -> .tfs-*
     openNumuneModal() / close...  -> .onm-*
     renderSearchHistory()         -> .rsh-*
     switchProductTab()            -> .spt-*
     setProductGridCols()          -> .spg-*
     back-to-top butonu            -> .btt-*
     switchBaskitimeTab()          -> .sbt-*

   Ortak (teklif-sepeti.php'de tanımlı) sınıflar:
     goToStep()   -> .bt-step, .bt-step-icon, .is-active, .is-done
     saveRowEdit() -> .bt-chip, .bt-chip-note

   Gereken: Bootstrap 5 CSS + Material Symbols Outlined fontu
   ========================================================================== */

:root {
    --ba-primary: #00a69d;
    --ba-primary-dark: #00857e;
    --ba-secondary: #233560;           /* eski Tailwind "secondary" rengi - gerekirse değiştir */
    --ba-orange: #ff6701;
    --ba-orange-dark: #e05b00;
    --ba-rose: #e11d48;
    --ba-rose-dark: #be123c;
    --ba-gray-50: #f9fafb;
    --ba-gray-100: #f3f4f6;
    --ba-gray-200: #e5e7eb;
    --ba-gray-300: #d1d5db;
    --ba-gray-400: #9ca3af;
    --ba-gray-500: #6b7280;
    --ba-gray-600: #4b5563;
    --ba-gray-700: #374151;
    --ba-gray-900: #111827;
    --ba-slate-50: #f8fafc;
}

.material-symbols-outlined {
    font-size: 1.25em;
    line-height: 1;
    vertical-align: middle;
    user-select: none;
    flex-shrink: 0;
}

/* SweetAlert ortak buton tabanı (rci / cwc / tfs) */
.rci-btn, .cwc-btn, .tfs-btn {
    border: 0;
    color: #fff;
    cursor: pointer;
    transition: background-color .2s;
}


/* ==========================================================================
   updateItemCountBadge()  ->  .uic-*   (boş sepet kutusu)
   ========================================================================== */
.uic-empty {
    margin: 1rem 0;
    padding: 2rem;
    text-align: center;
    background: var(--ba-slate-50);
    border: 1px dashed var(--ba-gray-200);
    border-radius: 16px;
}
.uic-empty-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--ba-gray-200);
    border-radius: 50%;
    color: var(--ba-gray-400);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.uic-empty-icon .material-symbols-outlined { font-size: 1.5rem; }
.uic-empty-body { margin-bottom: .75rem; }
.uic-empty-title { margin: 0 0 .25rem; font-size: .875rem; font-weight: 800; color: var(--ba-gray-900); }
.uic-empty-text { margin: 0; font-size: 12px; color: var(--ba-gray-500); }
.uic-empty-btn {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .5rem 1rem;
    background: var(--ba-primary);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    transition: background-color .2s;
}
.uic-empty-btn:hover { background: var(--ba-primary-dark); color: #fff; }


/* ==========================================================================
   removeCartItemRow() -> SweetAlert  ->  .rci-*
   ========================================================================== */
.rci-popup {
    padding: 1.5rem;
    border: 1px solid var(--ba-gray-100);
    border-radius: 24px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, .25);
}
.rci-btn { padding: .625rem 1.25rem; border-radius: 16px; font-size: 12px; }
.rci-btn--confirm { background: var(--ba-rose); font-weight: 800; }
.rci-btn--confirm:hover { background: var(--ba-rose-dark); color: #fff; }
.rci-btn--cancel { background: var(--ba-gray-200); color: var(--ba-gray-700); font-weight: 700; }
.rci-btn--cancel:hover { background: var(--ba-gray-300); color: var(--ba-gray-700); }


/* ==========================================================================
   clearWholeCart() -> SweetAlert  ->  .cwc-*
   ========================================================================== */
.cwc-popup {
    padding: 1.5rem;
    border: 1px solid var(--ba-gray-100);
    border-radius: 24px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, .25);
}
.cwc-btn { padding: .625rem 1.25rem; border-radius: 16px; font-size: 12px; }
.cwc-btn--confirm { background: var(--ba-rose); font-weight: 800; }
.cwc-btn--confirm:hover { background: var(--ba-rose-dark); color: #fff; }
.cwc-btn--cancel { background: var(--ba-gray-200); color: var(--ba-gray-700); font-weight: 700; }
.cwc-btn--cancel:hover { background: var(--ba-gray-300); color: var(--ba-gray-700); }


/* ==========================================================================
   selectProductColor()  ->  .spc-*
   .spc-box / .spc-box--active : .color-thumb-box (renk kutusu)
   .spc-swatch / --active      : .color-swatch-btn (yuvarlak renk seçici)
   Onay ikonu (.color-active-check) .d-none ile gösterilir/gizlenir.
   ========================================================================== */
.spc-box {
    border: 1px solid rgba(229, 231, 235, .8);
    opacity: .8;
    transition: all .15s;
}
.spc-box--active {
    border: 2px solid var(--ba-primary);
    box-shadow: 0 0 0 2px var(--ba-primary);
    opacity: 1;
}
.spc-swatch {
    opacity: .8;
    transition: all .15s;
}
.spc-swatch--active {
    opacity: 1;
    transform: scale(1.1);
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ba-primary);
}


/* ==========================================================================
   #teklif-form submit -> SweetAlert  ->  .tfs-*
   ========================================================================== */
.tfs-popup {
    padding: 1.5rem;
    border: 1px solid var(--ba-gray-100);
    border-radius: 24px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, .25);
}
.tfs-confirm-text { margin-top: .25rem; font-size: 12px; color: var(--ba-gray-600); }
.tfs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    padding: .75rem 1.5rem;
    border-radius: 16px;
    font-size: 12px;
}
.tfs-btn--teal { background: var(--ba-primary); font-weight: 800; }
.tfs-btn--teal:hover { background: var(--ba-primary-dark); color: #fff; }
.tfs-btn--orange { background: var(--ba-orange); font-weight: 800; box-shadow: 0 4px 6px rgba(0, 0, 0, .1); }
.tfs-btn--orange:hover { background: var(--ba-orange-dark); color: #fff; }
.tfs-btn--gray { background: var(--ba-gray-200); color: var(--ba-gray-700); font-weight: 700; }
.tfs-btn--gray:hover { background: var(--ba-gray-300); color: var(--ba-gray-700); }


/* ==========================================================================
   openNumuneModal() / closeNumuneModal()  ->  .onm-*
   #numune-modal-card: JS .onm-card ekler, açılırken .onm-card--open ekler.
   Arka plan (#numune-modal-backdrop) .d-none ile açılıp kapanır.
   ========================================================================== */
.onm-card {
    opacity: 0;
    transform: scale(.95);
    transition: opacity .2s ease, transform .2s ease;
}
.onm-card--open {
    opacity: 1;
    transform: scale(1);
}


/* ==========================================================================
   renderSearchHistory()  ->  .rsh-*   (son aramalar listesi)
   ========================================================================== */
.rsh-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all .15s;
}
.rsh-item:hover { background: var(--ba-gray-50); color: var(--ba-primary); }
.rsh-left { display: flex; align-items: center; gap: .625rem; }
.rsh-icon { font-size: 14px; color: var(--ba-gray-400); }
.rsh-item:hover .rsh-icon { color: var(--ba-primary); }
.rsh-tag { font-size: 10px; font-weight: 700; color: var(--ba-gray-400); }
.rsh-item:hover .rsh-tag { color: var(--ba-primary); }


/* ==========================================================================
   switchProductTab()  ->  .spt-*   (.product-tab-btn düğmeleri)
   ========================================================================== */
.spt-tab {
    padding: .5rem 1.25rem;
    background: #fff;
    border: 1px solid var(--ba-gray-200);
    border-radius: 99px;
    color: var(--ba-gray-600);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
}
.spt-tab:hover { color: var(--ba-gray-900); border-color: var(--ba-gray-300); }
.spt-tab--active,
.spt-tab--active:hover {
    background: var(--ba-secondary);
    border-color: var(--ba-secondary);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 4px 6px rgba(0, 0, 0, .1);
}


/* ==========================================================================
   setProductGridCols()  ->  .spg-*   (#gridLayout + görünüm düğmeleri)
   Çocuk elemanlara sütun sınıfı vermeden CSS grid ile sütun sayısı değişir.
   Kırılımlar: 640 / 768 / 1024 (eski Tailwind sm / md / lg)
   ========================================================================== */
.spg-list { display: flex; flex-direction: column; gap: 1rem; }

.spg-grid { display: grid; }

/* 3 sütun */
.spg-grid--3 { grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 1.25rem; }
@media (min-width: 640px)  { .spg-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } }
@media (min-width: 768px)  { .spg-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 4 sütun */
.spg-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (min-width: 640px)  { .spg-grid--4 { gap: 1.5rem; } }
@media (min-width: 768px)  { .spg-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .spg-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* 5 sütun */
.spg-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .875rem; }
@media (min-width: 640px)  { .spg-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }
@media (min-width: 768px)  { .spg-grid--5 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .spg-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* Görünüm düğmeleri */
.spg-btn { color: var(--ba-gray-400); transition: color .15s; }
.spg-btn:hover { color: var(--ba-gray-700); }
.spg-btn--active,
.spg-btn--active:hover {
    background: #fff;
    color: var(--ba-primary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}


/* ==========================================================================
   Back to top (#back-to-top-btn)  ->  .btt-*
   ========================================================================== */
.btt-btn {
    opacity: 0;
    pointer-events: none;
    transform: translateY(1rem);
    transition: opacity .3s, transform .3s;
}
.btt-btn--visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}


/* ==========================================================================
   switchBaskitimeTab()  ->  .sbt-*
   JS her butona .sbt-btn ekler, aktif olana .sbt-btn--active ekler.
   (urun-detay.css'teki .sbt-* ile aynıdır; ikisini birden yüklüyorsan birini çıkar)
   ========================================================================== */
.sbt-btn {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    padding: .5rem .875rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ba-gray-600);
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: all .2s;
}
.sbt-btn:hover { color: var(--ba-gray-900); }
.sbt-btn .material-symbols-outlined { color: var(--ba-gray-400); }
.sbt-btn--active {
    background: #fff;
    color: var(--ba-gray-900);
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.sbt-btn--active .material-symbols-outlined { color: var(--ba-primary); }