/* =========================================================================
   TEKLİF SEPETİ — arayüz stilleri (FAZ 2)
   Renkler header.php'deki :root değişkenlerinden gelir; sabit kodlanmaz.
   Değişken tanımlı değilse zarifçe nötr griye düşer.
   ========================================================================= */

:root {
    --dd-panel-w: 420px;
    --dd-yumusak: cubic-bezier(.22, .61, .36, 1);
    --dd-cizgi: #e8ebef;
    --dd-zemin: #f6f8fa;
    --dd-soluk: #6b7280;
}

/* -------------------------------------------------------------------------
   1) HEADER SEPET BUTONU
   ------------------------------------------------------------------------- */
.dd-sepet-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 50px;
    padding: 0 20px;
    border: 1px solid var(--dd-cizgi);
    border-radius: 6px;
    background: #fff;
    color: var(--color-secondary, #1f1f25);
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 6px 17px rgba(0, 0, 0, .06);
    transition: color .25s var(--dd-yumusak), border-color .25s var(--dd-yumusak),
                box-shadow .25s var(--dd-yumusak), transform .25s var(--dd-yumusak);
}

.dd-sepet-btn:hover,
.dd-sepet-btn:focus-visible {
    color: var(--color-primary, #1e7cc0);
    border-color: var(--color-primary, #1e7cc0);
    box-shadow: 0 10px 24px rgba(var(--color-primary-rgb, 30, 124, 192), .18);
    transform: translateY(-1px);
    outline: none;
}

.dd-sepet-btn i {
    font-size: 18px;
    line-height: 1;
}

.dd-sepet-btn .dd-sepet-btn-yazi {
    display: inline-block;
}

/* Rozet (canlı sayaç) */
.dd-sepet-sayi {
    position: absolute;
    top: -8px;
    right: -8px;
    min-width: 21px;
    height: 21px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--color-primary, #1e7cc0);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 21px;
    text-align: center;
    letter-spacing: .2px;
    box-shadow: 0 2px 8px rgba(var(--color-primary-rgb, 30, 124, 192), .45);
    pointer-events: none;
}

.dd-sepet-sayi[hidden],
.dd-sepet-sayi.dd-gizli {
    display: none !important;
}

.dd-sepet-sayi.dd-pop {
    animation: ddPop .45s var(--dd-yumusak);
}

@keyframes ddPop {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.45); }
    70%  { transform: scale(.92); }
    100% { transform: scale(1); }
}

/* Mobil header (hamburger yanı) — kompakt ikon buton */
.dd-sepet-btn--mobil {
    height: 44px;
    width: 44px;
    padding: 0;
    border-radius: 8px;
}

.dd-sepet-btn--mobil .dd-sepet-btn-yazi {
    display: none;
}

.dd-sepet-btn--mobil .dd-sepet-sayi {
    top: -6px;
    right: -6px;
}

/* Şablonun .actions-area > div kuralı ile çakışmayı önle */
.logo-search-category-wrapper .actions-area > .dd-sepet-btn {
    border: 1px solid var(--dd-cizgi);
}

@media only screen and (max-width: 1199px) {
    .dd-sepet-btn .dd-sepet-btn-yazi { display: none; }
    .dd-sepet-btn { width: 50px; padding: 0; }
}

/* -------------------------------------------------------------------------
   2) SAYFA KAYDIRILDIĞINDA BELİREN KÜÇÜK SEPET (yalnızca dolu sepette)
   ------------------------------------------------------------------------- */
.dd-sepet-fab {
    position: fixed;
    right: 22px;
    bottom: 26px;
    z-index: 1899;
    width: 56px;
    height: 56px;
    border: none;
    border-radius: 50%;
    background: var(--color-primary, #1e7cc0);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 30px rgba(var(--color-primary-rgb, 30, 124, 192), .42);
    opacity: 0;
    visibility: hidden;
    transform: translateY(18px) scale(.85);
    transition: opacity .3s var(--dd-yumusak), transform .3s var(--dd-yumusak),
                visibility .3s var(--dd-yumusak), background .25s ease;
}

.dd-sepet-fab.dd-gorunur {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.dd-sepet-fab:hover { background: var(--color-primary-2, #25addf); }

.dd-sepet-fab .dd-sepet-sayi {
    top: -4px;
    right: -4px;
    background: var(--color-primary-dark, #0f2942);
}

/* -------------------------------------------------------------------------
   3) OFFCANVAS PANEL
   ------------------------------------------------------------------------- */
.dd-sepet-ortu {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(9, 17, 28, .55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s var(--dd-yumusak), visibility .3s var(--dd-yumusak);
}

.dd-sepet-panel {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 2001;
    width: min(var(--dd-panel-w), 100%);
    height: 100%;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    background: #fff;
    box-shadow: -22px 0 60px rgba(9, 17, 28, .22);
    transform: translateX(102%);
    visibility: hidden;
    transition: transform .32s var(--dd-yumusak), visibility .32s var(--dd-yumusak);
    will-change: transform;
}

.dd-sepet-acik .dd-sepet-ortu {
    opacity: 1;
    visibility: visible;
}

.dd-sepet-acik .dd-sepet-panel {
    transform: translateX(0);
    visibility: visible;
}

/* Panel açıkken sayfa kaydırması kilitlenir */
body.dd-kilit {
    overflow: hidden !important;
}

@media (prefers-reduced-motion: reduce) {
    .dd-sepet-panel,
    .dd-sepet-ortu,
    .dd-sepet-fab { transition-duration: .01ms; }
    .dd-sepet-sayi.dd-pop { animation: none; }
}

/* --- Başlık --- */
.dd-sepet-baslik {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 22px;
    border-bottom: 1px solid var(--dd-cizgi);
    background: linear-gradient(135deg,
        var(--color-primary-dark, #0f2942) 0%,
        rgba(var(--color-primary-rgb, 30, 124, 192), .92) 100%);
    color: #fff;
}

.dd-sepet-baslik .dd-baslik-ikon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .16);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}

.dd-sepet-baslik .dd-baslik-metin { flex: 1 1 auto; min-width: 0; }

.dd-sepet-baslik h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    line-height: 1.25;
    letter-spacing: -.2px;
}

.dd-sepet-baslik .dd-baslik-alt {
    display: block;
    margin-top: 3px;
    font-size: 12.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, .78);
}

.dd-sepet-kapat {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .25s ease, transform .25s var(--dd-yumusak);
}

.dd-sepet-kapat:hover {
    background: rgba(255, 255, 255, .3);
    transform: rotate(90deg);
}

/* --- Gövde --- */
.dd-sepet-govde {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 8px 0;
    background: #fff;
}

.dd-sepet-govde::-webkit-scrollbar { width: 8px; }
.dd-sepet-govde::-webkit-scrollbar-thumb {
    background: #d6dbe2;
    border-radius: 8px;
}

/* Durum katmanları */
.dd-durum { display: none; }
.dd-sepet-panel[data-durum="yukleniyor"] .dd-durum-yukleniyor,
.dd-sepet-panel[data-durum="dolu"] .dd-durum-dolu,
.dd-sepet-panel[data-durum="bos"] .dd-durum-bos { display: block; }
.dd-sepet-panel[data-durum="bos"] .dd-sepet-alt-dolu,
.dd-sepet-panel[data-durum="yukleniyor"] .dd-sepet-alt-dolu { display: none; }

/* --- Kalem satırı --- */
.dd-kalem {
    display: flex;
    gap: 14px;
    padding: 16px 22px;
    border-bottom: 1px solid var(--dd-cizgi);
    transition: background .2s ease, opacity .2s ease;
}

.dd-kalem:last-child { border-bottom: none; }
.dd-kalem:hover { background: var(--dd-zemin); }
.dd-kalem.dd-islemde { opacity: .5; pointer-events: none; }

.dd-kalem-gorsel {
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
    border-radius: 8px;
    border: 1px solid var(--dd-cizgi);
    background: #fff;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dd-kalem-gorsel img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
}

.dd-kalem-gorsel .dd-kalem-simge {
    font-size: 22px;
    color: var(--color-primary, #1e7cc0);
    opacity: .55;
}

.dd-kalem-bilgi {
    flex: 1 1 auto;
    min-width: 0;
}

.dd-kalem-ad {
    display: block;
    margin: 0 0 3px;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-secondary, #1f1f25);
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: color .2s ease;
}

a.dd-kalem-ad:hover { color: var(--color-primary, #1e7cc0); }

.dd-kalem-meta {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--dd-soluk);
    line-height: 1.4;
}

.dd-kalem-ozellik {
    display: block;
    margin-top: 6px;
    padding: 6px 9px;
    border-radius: 6px;
    background: rgba(var(--color-primary-rgb, 30, 124, 192), .07);
    border-left: 2px solid rgba(var(--color-primary-rgb, 30, 124, 192), .45);
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--color-primary-dark, #0f2942);
    overflow-wrap: anywhere;
}

.dd-kalem-alt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
}

/* Adet kontrolü */
.dd-adet {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--dd-cizgi);
    border-radius: 7px;
    overflow: hidden;
    background: #fff;
}

.dd-adet button {
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    color: var(--dd-soluk);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease, color .2s ease;
}

.dd-adet button:hover {
    background: rgba(var(--color-primary-rgb, 30, 124, 192), .1);
    color: var(--color-primary, #1e7cc0);
}

.dd-adet input {
    width: 42px;
    height: 30px;
    border: none;
    border-left: 1px solid var(--dd-cizgi);
    border-right: 1px solid var(--dd-cizgi);
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-secondary, #1f1f25);
    background: #fff;
    -moz-appearance: textfield;
    appearance: textfield;
}

.dd-adet input::-webkit-outer-spin-button,
.dd-adet input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dd-adet input:focus { outline: none; background: var(--dd-zemin); }

.dd-kalem-sil {
    width: 30px;
    height: 30px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: #b0b7c0;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color .2s ease, background .2s ease, border-color .2s ease;
}

.dd-kalem-sil:hover {
    color: #d23b3b;
    background: rgba(210, 59, 59, .08);
    border-color: rgba(210, 59, 59, .2);
}

/* --- Boş durum --- */
.dd-bos-kutu {
    padding: 60px 32px;
    text-align: center;
}

.dd-bos-kutu .dd-bos-ikon {
    width: 92px;
    height: 92px;
    margin: 0 auto 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    color: var(--color-primary, #1e7cc0);
    background: rgba(var(--color-primary-rgb, 30, 124, 192), .09);
}

.dd-bos-kutu h4 {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 700;
    color: var(--color-secondary, #1f1f25);
}

.dd-bos-kutu p {
    margin: 0 0 24px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--dd-soluk);
}

/* --- Yükleniyor iskeleti --- */
.dd-iskelet {
    display: flex;
    gap: 14px;
    padding: 16px 22px;
    border-bottom: 1px solid var(--dd-cizgi);
}

.dd-iskelet span {
    display: block;
    border-radius: 6px;
    background: linear-gradient(90deg, #eef1f4 25%, #f7f9fb 50%, #eef1f4 75%);
    background-size: 400% 100%;
    animation: ddParilti 1.4s ease infinite;
}

.dd-iskelet .dd-i-gorsel { flex: 0 0 60px; width: 60px; height: 60px; }
.dd-iskelet .dd-i-govde { flex: 1 1 auto; }
.dd-iskelet .dd-i-govde span { height: 11px; margin-bottom: 8px; }
.dd-iskelet .dd-i-govde span:nth-child(1) { width: 70%; }
.dd-iskelet .dd-i-govde span:nth-child(2) { width: 45%; }
.dd-iskelet .dd-i-govde span:nth-child(3) { width: 30%; margin-bottom: 0; }

@keyframes ddParilti {
    0%   { background-position: 100% 0; }
    100% { background-position: 0 0; }
}

/* --- Alt bölüm (sticky) --- */
.dd-sepet-alt {
    flex: 0 0 auto;
    padding: 18px 22px calc(18px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--dd-cizgi);
    background: var(--dd-zemin);
    box-shadow: 0 -6px 24px rgba(9, 17, 28, .06);
}

.dd-ozet {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
    color: var(--dd-soluk);
    margin-bottom: 4px;
}

.dd-ozet strong {
    font-weight: 700;
    color: var(--color-secondary, #1f1f25);
}

.dd-ozet-agirlik {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
    padding: 9px 12px;
    border-radius: 8px;
    background: rgba(var(--color-primary-rgb, 30, 124, 192), .08);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-primary-dark, #0f2942);
}

.dd-ozet-agirlik.dd-var { display: flex; }
.dd-ozet-agirlik .dd-kg { font-size: 15px; font-weight: 800; }

.dd-sepet-alt .dd-not {
    margin: 10px 0 14px;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--dd-soluk);
}

.dd-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    height: 48px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: background .25s var(--dd-yumusak), color .25s var(--dd-yumusak),
                border-color .25s var(--dd-yumusak), box-shadow .25s var(--dd-yumusak),
                transform .2s var(--dd-yumusak);
}

.dd-btn + .dd-btn { margin-top: 10px; }
.dd-btn:hover { transform: translateY(-1px); }
.dd-btn:disabled { opacity: .6; cursor: default; transform: none; }

.dd-btn-wa {
    background: #25d366;
    color: #fff;
    box-shadow: 0 8px 20px rgba(37, 211, 102, .32);
}
.dd-btn-wa:hover { background: #1fb855; color: #fff; }

.dd-btn-mail {
    background: var(--color-primary, #1e7cc0);
    color: #fff;
    box-shadow: 0 8px 20px rgba(var(--color-primary-rgb, 30, 124, 192), .3);
}
.dd-btn-mail:hover { background: var(--color-primary-dark, #0f2942); color: #fff; }

.dd-btn-cizgili {
    background: #fff;
    border-color: var(--color-primary, #1e7cc0);
    color: var(--color-primary, #1e7cc0);
}
.dd-btn-cizgili:hover {
    background: var(--color-primary, #1e7cc0);
    color: #fff;
}

.dd-temizle-satir { text-align: center; margin-top: 12px; }

.dd-temizle {
    border: none;
    background: none;
    padding: 4px 6px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--dd-soluk);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color .2s ease;
}

.dd-temizle:hover { color: #d23b3b; }

/* -------------------------------------------------------------------------
   4) TOAST BİLDİRİMLERİ
   ------------------------------------------------------------------------- */
.dd-toast-kutu {
    position: fixed;
    z-index: 2100;
    right: 20px;
    bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-end;
    pointer-events: none;
}

.dd-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    max-width: 340px;
    padding: 13px 16px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid var(--dd-cizgi);
    border-left: 3px solid var(--color-primary, #1e7cc0);
    box-shadow: 0 14px 40px rgba(9, 17, 28, .16);
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--color-secondary, #1f1f25);
    opacity: 0;
    transform: translateY(14px) scale(.96);
    transition: opacity .28s var(--dd-yumusak), transform .28s var(--dd-yumusak);
}

.dd-toast.dd-gir { opacity: 1; transform: translateY(0) scale(1); }
.dd-toast.dd-cik { opacity: 0; transform: translateY(-8px) scale(.97); }

.dd-toast i { font-size: 15px; line-height: 1.3; flex: 0 0 auto; }
.dd-toast.dd-basari { border-left-color: #2eae62; }
.dd-toast.dd-basari i { color: #2eae62; }
.dd-toast.dd-hata { border-left-color: #d23b3b; }
.dd-toast.dd-hata i { color: #d23b3b; }
.dd-toast.dd-bilgi i { color: var(--color-primary, #1e7cc0); }

/* -------------------------------------------------------------------------
   5) "SEPETE EKLE" BUTON GERİ BİLDİRİMİ (ürün kartları / detay sayfası)
   ------------------------------------------------------------------------- */
.dd-sepet-ekle { position: relative; }
.dd-sepet-ekle[disabled] { cursor: default; opacity: .75; }

.dd-sepet-ekle.dd-eklendi {
    background: #2eae62 !important;
    border-color: #2eae62 !important;
    color: #fff !important;
}

.dd-donuyor {
    display: inline-block;
    width: 13px;
    height: 13px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: ddDon .7s linear infinite;
    vertical-align: -2px;
}

@keyframes ddDon { to { transform: rotate(360deg); } }

/* -------------------------------------------------------------------------
   6) MOBİL
   ------------------------------------------------------------------------- */
@media only screen and (max-width: 575px) {
    .dd-sepet-panel { width: 100%; }
    .dd-sepet-baslik { padding: 16px 16px; }
    .dd-kalem { padding: 14px 16px; gap: 11px; }
    .dd-iskelet { padding: 14px 16px; }
    .dd-sepet-alt { padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
    .dd-toast-kutu { left: 14px; right: 14px; bottom: 14px; align-items: stretch; }
    .dd-toast { max-width: none; }
    .dd-sepet-fab { right: 16px; bottom: 18px; }
}