/* SEPET CEKMECESI - YENI TASARIM GIYDIRMESI
   Hakan, 10.08: "Sepete urun eklediginde hala sag tarafta eski modal
   aciliyor. Butonlar yeni tasarima uyarlanmali, cerceve yeni tasarima
   uyarlanmali."

   Isaretleme ve sepet betigi (custom-new.js getBasket) DEGISMEDI: bu dosya
   yalnizca #basketCanvas kapsaminda gorunumu yeniler. Renkler style.css'in
   tema degiskenlerinden geliyor; koyu/acik tema kendiliginden dogru. Yesil,
   pencerenin SEPETE EKLE dugmesiyle ayni dil (tek vurgu). */

#basketCanvas.offcanvas {
    background: var(--cardBackground);
    color: var(--textColor);
    border-left: 1px solid var(--borderColor);
    width: 400px;
    max-width: 92vw;
    /* Eski sablon cekmecenin sol alt kosesini clip-path ile kesiyordu;
       yeni dilde koseler duz (Hakan, 11.08 "tasarimda kesik kalmis"). */
    clip-path: none;
}

/* ---------------- baslik ---------------- */

#basketCanvas .offcanvas-header {
    padding: 16px 18px 12px;
    border-bottom: 1px solid var(--borderColor);
}

#basketCanvas #basketCanvasLabel {
    font-size: 16px;
    font-weight: 700;
    color: var(--textColor);
}

#basketCanvas .headerBasketItemsCount {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: #157b2a;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

#basketCanvas .btn-close {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--cardBackgroundLight);
    color: var(--textColor);
    opacity: 1;
    font-size: 15px;
}

#basketCanvas .btn-close:hover {background: var(--borderColor);}

/* ---------------- kalemler ---------------- */

#basketCanvas .basketItem {
    display: flex;
    gap: 12px;
    padding: 10px;
    background: var(--cardBackgroundLight);
    border: 1px solid var(--borderColor);
    border-radius: 12px;
}

#basketCanvas .basketItemImage img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

#basketCanvas .basketItemInfo {flex: 1; min-width: 0;}

#basketCanvas .basketItemInfo h3 {
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 8px;
    line-height: 1.3;
}

#basketCanvas .basketItemInfo h3 a {
    color: var(--textColor);
    text-decoration: none;
}

#basketCanvas .basketItemInfo h3 a:hover {color: var(--linkActiveColor);}

/* Adet secici: penceredeki sayacla ayni hap dili. */
#basketCanvas .basketNavigateArea {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: transparent;
    border: 1px solid var(--borderColor);
    border-radius: 999px;
    padding: 2px;
}

#basketCanvas .basketNavigateMinus,
#basketCanvas .basketNavigatePlus {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: transparent;
    color: var(--textColor);
    font-size: 10px;
}

#basketCanvas .basketNavigateMinus:hover,
#basketCanvas .basketNavigatePlus:hover {background: var(--cardBackground);}

#basketCanvas .basketNavigateInput {
    width: 34px;
    background: transparent;
    border: none;
    color: var(--textColor);
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
}

#basketCanvas .basketNavigateInput::-webkit-outer-spin-button,
#basketCanvas .basketNavigateInput::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#basketCanvas .basketRemoveButton {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: transparent;
    border: none;
    color: var(--placeholderColor);
    font-size: 13px;
}

#basketCanvas .basketRemoveButton:hover {color: #e5484d; background: rgba(229, 72, 77, .12);}

#basketCanvas .basketItemPrice {
    font-size: 14px;
    font-weight: 700;
    color: var(--darkGreen);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ---------------- alt kisim ---------------- */

#basketCanvas .headerBasketFooter {
    border-top: 1px solid var(--borderColor);
    padding-top: 4px;
}

#basketCanvas .headerBasketDetail {margin-top: 12px !important;}

#basketCanvas .headerBasketTotalPrice {
    font-size: 20px;
    font-weight: 800;
    color: var(--darkGreen);
    font-variant-numeric: tabular-nums;
}

/* Dugmeler: eski kesik koseli (clip-path) sablon yerine yeni dilin yuvarlak
   dugmeleri. Birincil eylem yesil (penceredeki SEPETE EKLE ile ayni),
   ikincil eylem cerceveli sessiz dugme. */
#basketCanvas .buttonRightSingle,
#basketCanvas .buttonLeftSingle {
    clip-path: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    padding: 12px 20px;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

#basketCanvas .buttonRightSingle {
    background: #157b2a;
    color: #fff;
}

#basketCanvas .buttonRightSingle:hover {background: #1a9636;}

#basketCanvas .buttonLeftSingle {
    background: transparent;
    border: 1px solid var(--borderColor);
    color: var(--textColor);
}

#basketCanvas .buttonLeftSingle:hover {border-color: var(--placeholderColor);}

#basketCanvas .buttonRightSingle i,
#basketCanvas .buttonLeftSingle i {margin-right: 8px;}

/* Eski sablon dugmeyi ::before katmaniyla boyuyor (indigo #343891) ve ic
   span da kendi arka planini tasiyabiliyor; temizlenmezse yesil yalniz
   kenarda kaliyor. */
#basketCanvas .buttonRightSingle::before,
#basketCanvas .buttonRightSingle::after,
#basketCanvas .buttonLeftSingle::before,
#basketCanvas .buttonLeftSingle::after {
    display: none !important;
}

#basketCanvas .buttonRightSingle span,
#basketCanvas .buttonLeftSingle span {
    background: transparent !important;
    clip-path: none !important;
    color: inherit;
    padding: 0;
}

/* Bos sepet uyarisi kart diliyle. */
#basketCanvas .customAlert {
    background: var(--cardBackgroundLight);
    border: 1px solid var(--borderColor);
    border-radius: 12px;
}

/* =====================================================================
   ILAN SEPETE EKLE MODALI (Hakan, 11.08: "ilan alimi icin cikarilan
   pop-up da buton eski, gorsel olarak da yeni tema uygulanmali").
   Modal isaretlemesi custom-new.js'te (playerMarketBasketModal) kuruluyor
   ve DEGISMEDI; asagisi yalniz o kimlik kapsaminda giydirme. Dil, sepet
   cekmecesiyle ayni: kart yuzeyleri, 12-14px koseler, yesil birincil
   dugme. */

#playerMarketBasketModal .modal-content {
    background: var(--cardBackground);
    color: var(--textColor);
    border: 1px solid var(--borderColor);
    border-radius: 14px;
}

#playerMarketBasketModal .modal-header {
    padding: 16px 18px 12px;
    /* Isaretlemedeki border-dark bootstrap sinifini tema cizgisine cevir. */
    border-bottom: 1px solid var(--borderColor) !important;
}

#playerMarketBasketModal .modal-title {font-weight: 700; color: var(--textColor);}

#playerMarketBasketModal .btn-close {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--cardBackgroundLight);
    color: var(--textColor);
    opacity: 1;
    font-size: 15px;
}

#playerMarketBasketModal .btn-close:hover {background: var(--borderColor);}

#playerMarketBasketModal .customAlert {
    background: var(--cardBackgroundLight);
    border: 1px solid var(--borderColor);
    border-radius: 12px;
}

#playerMarketBasketModal .formControl {
    background: var(--cardBackgroundLight);
    border: 1px solid var(--borderColor);
    border-radius: 10px;
    color: var(--textColor);
    padding: 10px 12px;
}

#playerMarketBasketModal .formControl:focus {
    border-color: var(--darkGreenDark);
    outline: none;
    box-shadow: none;
}

#playerMarketBasketModal .formLabel {color: var(--textColor); font-weight: 600;}

/* "zorunlu" rozeti: eski sari kutu yerine sessiz amber hap. */
#playerMarketBasketModal .formLabel .required {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(184, 134, 11, .18);
    color: #d09c14;
    font-size: 11px;
    font-weight: 700;
}

#playerMarketBasketModal .optionLabel a {color: var(--linkActiveColor);}

#playerMarketBasketModal .modal-footer {
    border-top: 0;
    padding: 12px 18px 16px;
}

/* Birincil dugme: eski kesik koseli indigo sablon yerine yesil yuvarlak
   (cekmecedeki SEPETE GIT ile ayni dil). Eski sablonun ::before katmani ve
   ic span arka plani burada da kapatilir. */
#playerMarketBasketModal .buttonRightSingle {
    clip-path: none;
    border-radius: 10px;
    background: #157b2a;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    padding: 12px 20px;
    transition: background .15s ease, opacity .15s ease;
}

#playerMarketBasketModal .buttonRightSingle:hover {background: #1a9636;}

#playerMarketBasketModal .buttonRightSingle:disabled {
    filter: none;
    opacity: .45;
    cursor: not-allowed;
}

#playerMarketBasketModal .buttonRightSingle::before,
#playerMarketBasketModal .buttonRightSingle::after {display: none !important;}

#playerMarketBasketModal .buttonRightSingle span {
    background: transparent !important;
    clip-path: none !important;
    color: inherit;
    padding: 0;
}

#playerMarketBasketModal .buttonRightSingle i {margin-right: 6px;}