@import "../nouislider/nouislider.min.css";
:root {
    --main-color: #35294f;
    --accent-color: #b7b3c1;
    --border-color: #b7b4bf;
    /* Değişken tekrarları güvenli hale getirildi */
    --main: var(--main-color);
    --accent: var(--accent-color);
    --border: var(--border-color); 
	--wodacs-purple: #35294f;
	--wodacs-light-purple: #f4f2f7;
}

.product-title {
	font-size: 1.4rem;
	font-weight: 600;
	margin-bottom: 4px;
}

.page-title {
	font-size: 1.4rem;
	font-weight: 600;
	margin-bottom: 4px;
}

.page-desc {
	font-size: 0.85rem;
	color: #777;
}

.pagination .page-item.active .page-link { background-color: var(--main-color); border-color: var(--main-color); }
.pagination .page-link { color: var(--main-color); }

.custom-breadcrumb { --bs-breadcrumb-divider: '>'; font-size: .9rem; align-items: center; }
.custom-breadcrumb a { font-size: .8rem; color: #b7b4bf; text-decoration: none; transition: color .2s ease; }
.custom-breadcrumb a:hover { color: var(--main-color); }
.custom-breadcrumb .breadcrumb-item.active { font-size: .8rem; color: var(--main-color); font-weight: 600; }

.text-purple { color: var(--wodacs-purple); }
.bg-soft-purple { background-color: var(--wodacs-light-purple); }
.border-purple { border-color: var(--wodacs-purple) !important; }

.btn-purple {
    background-color: var(--wodacs-purple);
    color: white;
    transition: all 0.3s ease;
}

.btn-purple:hover {
    background-color: #2a2040;
    color: white;
    transform: translateY(-2px);
}

/* Genel input, textarea ve select */
input.form-control,
textarea.form-control,
select.form-select {
    color: rgba(var(--color-secondary-rgb), 1);
    background-color: #ffffff !important;
    border: 2px solid rgba(0,0,0,0.04);
    border-radius: 6px !important;
    transition: all 0.15s ease;
    padding: 0.375rem 0.75rem; /* bootstrap varsayılan padding */
}

/* Placeholder renkleri */
input.form-control::placeholder,
textarea.form-control::placeholder,
select.form-select::placeholder {
    color: rgba(var(--color-primary-rgb), 1);
}

/* Farklı tarayıcı uyumları */
input.form-control::-webkit-input-placeholder,
textarea.form-control::-webkit-input-placeholder,
select.form-select::-webkit-input-placeholder {
    color: rgba(var(--color-primary-rgb), 1);
}

input.form-control::-moz-placeholder,
textarea.form-control::-moz-placeholder,
select.form-select::-moz-placeholder {
    color: rgba(var(--color-primary-rgb), 1);
}

input.form-control:-ms-input-placeholder,
textarea.form-control:-ms-input-placeholder,
select.form-select:-ms-input-placeholder {
    color: rgba(var(--color-primary-rgb), 1);
}

input.form-control::-ms-input-placeholder,
textarea.form-control::-ms-input-placeholder,
select.form-select::-ms-input-placeholder {
    color: rgba(var(--color-primary-rgb), 1);
}

/* Focus efekti */
input.form-control:focus,
textarea.form-control:focus,
select.form-select:focus {
    border-color: rgba(var(--color-primary-rgb), 1);
    box-shadow: 0 0 0 0.2rem rgba(var(--color-primary-rgb), 0.1);
    outline: none;
}

.p-image {
	width: 64px !important;
}

.cursor-pointer {
	cursor: pointer !important;
}

/* Modalın genel yüksekliğini ve resmin sınırlarını belirle */
#productImageModal .modal-body {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

#modalImage {
    max-height: 85vh; /* Ekran yüksekliğinin %85'ini geçmesin */
    max-width: 95vw;  /* Ekran genişliğinin %95'ini geçmesin */
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    border: 3px solid rgba(255,255,255,0.2); /* Resme hafif bir çerçeve */
}

.modal-backdrop.show {
    background-color: #402b57 !important;
    opacity: 0.85 !important; /* Şeffaflığı buradan ayarlayabilirsin */
}

.sepet-img-zoom {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                box-shadow 0.3s ease, 
                filter 0.3s ease;
    cursor: pointer;
    /* Titremeyi önleyen sihirli dokunuşlar */
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    will-change: transform; 
    display: block; /* Inline elementlerde transform bazen titrer */
}

.sepet-img-zoom:hover {
    /* 1.05 yerine 1.03 yapalım, daha soft ve güvenli bir büyüme */
    transform: scale(1.03) translateZ(0); 
    filter: brightness(1.05);
    /* Border yerine shadow kullanarak kutu modelini sarsmıyoruz */
    box-shadow: 0 8px 20px rgba(64, 43, 87, 0.2);
    z-index: 10;
}

.text-wodacs-emphasis {
	color: #3f2a56 !important;
}

.bg-wodacs-subtle {
	background-color: #b7b3c1 !important;
}

.border-wodacs-subtle {
	border-color: #3f2a56 !important;
}

.fs-12 {
	font-size: 12px !important;
}

.fs-13 {
	font-size: 13px !important;
}

.fs-14 {
	font-size: 14px !important;
}

.stok-kodu-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: rgba(64, 43, 87, 0.05); /* Morun çok şeffaf hali */
    color: #402b57;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px dashed rgba(64, 43, 87, 0.2); /* Kesikli kenarlık daha şık durur */
    margin-bottom: 8px;
    transition: all 0.3s ease;
}

.stok-kodu-badge i {
    font-size: 0.85rem;
    opacity: 0.7;
}

.stok-kodu-badge:hover {
    background-color: rgba(64, 43, 87, 0.1);
    border-style: solid; /* Üzerine gelince çizgiler birleşsin */
}

.urun-sil-btn {
    color: #888; /* Varsayılan renk hafif gri */
    background: none;
    border: none;
    padding: 5px 10px;
    border-radius: 6px;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
	margin-right: -10px; /* Hover efektindeki arka planın kartın kenarıyla hizalanması için */
    font-size: 0.85rem;  /* Fiyatın altında daha zarif durması için */
}

.urun-sil-btn:hover {
    color: #dc3545 !important; /* Üzerine gelince canlı kırmızı */
    background-color: rgba(220, 53, 69, 0.08); /* Çok hafif kırmızı bir arka plan */
    transform: translateY(-1px); /* Hafif yukarı kalkma efekti */
}

.urun-sil-btn:active {
    transform: translateY(0); /* Tıklayınca geri basma hissi */
}

.urun-sil-btn i {
    font-size: 1.1rem;
    transition: transform 0.2s ease;
}

.urun-sil-btn:hover i {
    transform: rotate(10deg) scale(1.1); /* Çöp kutusu hafifçe büyüsün ve dönsün */
}

.m-adet-grubu {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.m-adet-btn {
    border: none !important;
    background: transparent !important;
    color: #402b57 !important;
    padding: 0 10px !important;
    transition: all 0.2s;
}

.m-adet-btn:hover {
    background-color: rgba(64, 43, 87, 0.1) !important;
}

.m-adet-input {
    /*border: none !important;*/
    background: transparent !important;
    font-size: 0.9rem;
    color: #333;
    /*pointer-events: none;*/ /* Elle girişi kapattık, sadece butonlar */
    padding: 0 !important;
}

/* Sayılar değişirken titremesin diye sabit genişlik */
.m-adet-input {
    min-width: 35px;
}

#sepetUyariModal .text-warning {
    color: #402b57 !important; /* Wodacs morunu uyarı rengi yapalım mı? */
}

#sepetUyariModal .modal-content {
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

#sepetUyariModal h4 {
    color: #333;
    letter-spacing: -0.5px;
}

.wodacs-price {
    letter-spacing: -0.5px; /* Rakamları birbirine biraz yaklaştırır, daha şık durur */
}

del {
    font-weight: 400;
}

.text-danger {
    color: #dc3545 !important; /* Daha canlı bir kırmızı */
}

/* Mobilde fiyatlar birbirine girmesin diye */
@media (max-width: 768px) {
    .price-details {
        font-size: 0.9rem;
    }
}

.btn-close:focus {
    box-shadow: 0 0 0 0.25rem rgba(53, 41, 79, 0.15) !important; /* Çok hafif bir mor gölge */
}

.sepet-kargo-uyari {
    font-size: 0.75rem;
    border-radius: 8px;
    background-color: #f0f7ff;
    border: none;
    padding: 0.5rem 1rem; /* py-2 px-3 karşılığı */
    margin-top: 1rem;    /* mt-3 karşılığı */
    color: #0c4128;      /* Okunurluk için hafif koyu bir mavi/yeşil tonu iyi olur */
}

/* Inputun sağ köşelerini sıfırla, solları koru */
.kupon-input {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
    padding: 10px !important;
    height: auto; /* padding ile çakışmaması için */
}

/* Butonun sol köşelerini sıfırla, sağları yuvarla */
.kupon-buton {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
}

/* Yanındaki butonun sağ köşelerini yuvarlamak istersen (opsiyonel) */
.wodacs-btn-outline {
    border-radius: 0 4px 4px 0 !important;
}

.btn-pasif {
    opacity: 0.65 !important;
    cursor: not-allowed; /* Üstüne gelince "tıklanamaz" ikonu çıkar, daha profesyonel durur */
    pointer-events: auto; /* Tıklanabilir kalsın ki JS ile verdiğin uyarı modalı çalışabilsin */
}

.sepet-ozet-sticky {
    position: -webkit-sticky; /* Safari desteği için */
    position: sticky;
    top: 40px !important;
    border-radius: 8px !important;
    z-index: 10; /* Diğer elemanların altında kalmaması için */
}

.sepet-ana-kart {
    border-radius: 8px !important;
    overflow: hidden; /* İçerideki elemanların köşelerden taşmaması için */
}

.metin-detay {
    font-size: 0.8rem !important; /* em yerine rem daha stabil durur */
    font-weight: 400 !important;  /* normal karşılığı */
    color: #6c757d;              /* Hafif gri tonu genelde bu tip detaylara çok yakışır */
}

.kupon-bilgi-notu {
    background-color: #dad6e5 !important;
    border: 1px dashed #35294f !important;
    color: #35294f !important;
    font-size: 0.75rem !important;
    line-height: 1.4 !important;
    padding: 10px;        /* Yazı kenarlara yapışmasın diye ekledim */
    border-radius: 6px;   /* Genel border-radius kuralına uyum sağlasın */
}