/* get.stopersolutions.com — "Tekliflerim" kartları (dt- öneki).
   .dash-upload-card ile AYNI grid sütun sınıflarını (col-12 col-md-6 col-lg-4
   col-xl-4) kullanır — Bootstrap .row varsayılan olarak sütunları eşit
   yükseklikte gerer, height:100% ile kart kutusu da aynı boyu doldurur. */

.dt-card {
	height: 100%;
	min-height: 220px;
	background: #fff;
	/* Gölge kartın 4 KENARINDA da eşit (kullanıcı isteği) — X/Y ofseti YOK
	   ("ışık kartın tam ortasından veriyormuş gibi"), pozitif SPREAD (2px) ile
	   dört kenara da taşar. Bootstrap .shadow-sm (aşağı ofsetli) KALDIRILDI ki
	   tek/simetrik gölge kalsın. */
	box-shadow: 0 0 18px 2px rgba(29, 41, 57, .15);
	transition: box-shadow .15s;
}
.dt-card:hover { box-shadow: 0 0 26px 3px rgba(29, 41, 57, .22); }
.dt-card .card-body { display: flex; flex-direction: column; height: 100%; }

/* #4 — Fiyat parçanın ADIYLA aynı yatay hizada (ad solda, fiyat sağda). */
.dt-name-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.dt-name-row .dt-name { flex: 1 1 auto; min-width: 0; margin: 0; }
.dt-name-row .dt-fiyat { flex: 0 0 auto; text-align: right; }

.dt-adet {
	width: 56px;
	text-align: center;
	border: 1px solid var(--stoper-border);
	border-radius: 6px;
	padding: 4px 2px;
	font-size: 13px;
}

.dt-fiyat { font-size: 15px; font-weight: 700; color: #1d2939; white-space: nowrap; }
/* Ad satırında yatay yer kaplamasın: "KDV Hariç" tutarın ALTINA (blok). */
.dt-name-row .dt-fiyat small { display: block; line-height: 1.1; margin-top: 1px; }
.dt-fiyat small { font-weight: 400; color: var(--stoper-text); font-size: 11px; }
.dt-fiyat-hesaplaniyor { font-size: 12.5px; font-weight: 500; color: var(--stoper-text); font-style: italic; white-space: normal; }

.dt-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	color: var(--stoper-blue);
	text-decoration: none;
}
.dt-icon-btn:hover { background: var(--stoper-blue-bg); }
.dt-atas-ikon { color: var(--stoper-text); }
.dt-atas-ikon:hover { color: var(--stoper-blue); }

/* (2026-08-14) 60px -> 80px. Kullanici: "thumbnail olcusunu buyutmek
   istiyorum. Cercevenin boyu parca isminin satirindan asagida hammadde
   adinin yazildigi satira kadar uzasin. Genislikte ayni olcude buyusun."

   80px NEREDEN: sagdaki .dt-info sutununun yuksekligi olculdu —
   ad satiri ~31px (fiyatin altindaki <small> satiri yuzunden) + olcu
   12,5px + hacim 11px + malzeme 11,5px, satir araliklariyla ~74px.
   80px bunu tam kapsar; kutu satirin yuksekligini belirledigi icin
   metin blogu dikeyde ortalanir.

   NEDEN ESNEK DEGIL (align-self: stretch + aspect-ratio): hacim satiri
   lazer kartlarinda YOK, malzeme satiri da kosullu. Yukseklige gore
   esneseydi kart tipine gore farkli genislikler cikar ve yan yana
   duran kartlarin metin sutunlari kayardi. Sabit kare, hepsinde ayni.

   Tek sayi: buyutmek/kucultmek icin asagidaki 80px'i degistirmek yeter. */
.dt-thumb {
	/* (2026-08-18 kullanıcı isteği) 80px kutu, yükleme sırasındaki büyük
	   önizlemeden sonra "simge ufaldı" hissi veriyordu — görsel dosyası hiç
	   değişmiyor (ölçüldü), küçülen bu kutuydu. %50 büyütüldü. */
	width: 120px;
	height: 120px;
	flex-shrink: 0;
	border: 1px solid var(--stoper-border);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	margin-right: 12px;
	background: #fafbfd;
	color: var(--stoper-blue);
	/* Kutu 60 -> 80 buyudu; yer tutucu ikon da orantili buyur ki
	   bos kutuda kaybolmus gibi durmasin. */
	font-size: 26px;
}
.dt-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* ---- Kart seçim kutusu + kontur (çoklu seçim) ---- */
.dt-secim-kutu {
	width: 17px; height: 17px;
	cursor: pointer;
	accent-color: var(--stoper-blue);
	opacity: 0;
	transition: opacity .12s;
	flex-shrink: 0;
}
.dt-card-col:hover .dt-secim-kutu,
.dt-secim-kutu:checked { opacity: 1; }
/* Seçili kartta kontur — kullanıcı isteği: #005095 (çok koyu olan #002951 yerine). */
.dt-secili .dt-card {
	box-shadow: 0 0 0 2px var(--stoper-blue), 0 0 18px 2px rgba(29, 41, 57, .15);
}
.dt-secili .dt-card:hover {
	box-shadow: 0 0 0 2px var(--stoper-blue), 0 0 26px 3px rgba(29, 41, 57, .22);
}

/* Seçim modu (en az 1 kart seçili): TÜM kart bir seçim butonu gibi davranır
   (kullanıcı isteği: 2026-07-30) — imleç "el" olur, üzerine gelince hafif bir
   seçim konturu belirir ki tıklanabilir olduğu anlaşılsın. İç kontroller
   (input/buton/dropdown) kendi cursor'larını korur. */
body.dt-secim-modu .dt-card { cursor: pointer; }
body.dt-secim-modu .dt-card-col:not(.dt-secili) .dt-card:hover {
	box-shadow: 0 0 0 2px rgba(0, 80, 149, .45), 0 0 18px 2px rgba(29, 41, 57, .15);
}
body.dt-secim-modu .dt-info-tikla,
body.dt-secim-modu .dt-name-duzenle { cursor: pointer; }

/* ================================================================
   SÜRÜKLE-BIRAK: kart → klasör  (2026-08-08 yeniden yazıldı)

   Kullanıcı: "kart sürüklenmeye başladığı an hayaletini değil kartın
   kendisini tutup taşıyalım, mouse üzerinde 'Klasöre taşı' yazsın,
   klasörün üzerine bıraktığımız anda macbooklardaki gibi vakumlanma
   efekti olsun."  Tarayıcının native sürükleme hayaleti bırakıldı;
   artık gerçek kartın klonu imleçle taşınıyor (bkz. dash-teklifler.js).
   ================================================================ */
.dt-card-col[data-tasinabilir] { cursor: grab; }
/* Kartın kendisi taşınırken YERİNDE kalan yer tutucu — kolon akıştan
   çıkmadığı için grid kaymıyor, sonraki kartlar zıplamıyor. */
.dt-drag {
	opacity: .3;
	box-shadow: none !important;
	border: 2px dashed var(--stoper-border) !important;
}
/* İmleçle taşınan gerçek kart klonu. body'nin doğrudan çocuğu olmak
   ZORUNDA: .content/.dash-upload-area overflow:hidden ile kırpardı,
   #DosyaOnizleme içine konsa bir sonraki innerHTML yazımında silinirdi. */
.dt-surukle-klon {
	position: fixed;
	top: 0;
	left: 0;
	margin: 0;
	pointer-events: none;
	will-change: transform;
	/* 0 0 — kart küçülürken tutulan nokta imlecin altında kalsın (bkz.
	   klonKonumla: sol/üst konumdan tutma noktasının ÖLÇEKLENMİŞ hâli düşülür). */
	transform-origin: 0 0;
	box-shadow: 0 18px 40px rgba(29, 41, 57, .28);
	border-radius: 16px;
	background: #fff;
	overflow: hidden;
}
/* İmlecin yanındaki "Klasöre taşı" etiketi. */
#dtSurukleEtiket {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 4001;
	pointer-events: none;
	white-space: nowrap;
	padding: 7px 12px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	color: #fff;
	background: rgba(29, 41, 57, .92);
	box-shadow: 0 6px 20px rgba(29, 41, 57, .25);
	transition: background .12s;
}
#dtSurukleEtiket.dt-etiket-aktif { background: var(--stoper-blue); }
#dtSurukleEtiket i { margin-right: 5px; }

/* Sürükleme boyunca: imleç grabbing + TÜM klasörler "buraya bırakılabilir"
   görünür (kullanıcının asıl şikayeti buydu — nereye bırakacağını
   anlayamıyordu) + hover gölgeleri bastırılır. */
body.dt-suruk, body.dt-suruk * { cursor: grabbing !important; }
body.dt-suruk .dt-klasor {
	outline: 1px dashed var(--stoper-border);
	outline-offset: -2px;
}
body.dt-suruk .dt-card:hover { box-shadow: none; }
body.dt-suruk { user-select: none; }

.dt-klasor.dt-drop-hedef {
	background: var(--stoper-blue-bg);
	outline: 2px dashed var(--stoper-blue) !important;
	outline-offset: -2px;
	color: var(--stoper-blue);
	transform: scale(1.03);
	transition: transform .12s;
}

/* Dar menüde klasörler gizleniyor (dash.css: .dash-sidebar-inner > *:not(...)
   display:none) — sürükleme sırasında hedef kalmazdı. Kural dash.css'e DEĞİL
   buraya yazıldı: dash.css'i 5 sayfa paylaşıyor. */
body.dash-menu-dar.dt-suruk .dash-sidebar-inner > .dt-klasor-list,
body.dash-menu-dar.dt-suruk .dash-sidebar-inner > .dt-klasorler-baslik {
	display: block !important;
}

/* Genie (cin lambası) dilimleri — kart klasöre emilirken taffy gibi çekilsin
   diye yatay dilimlere ayrılıp her dilim gecikmeli animasyonlanır (tek elemanda
   CSS transform ile mesh deformasyonu mümkün değil). */
.dt-genie-kap {
	position: fixed;
	inset: 0;
	z-index: 4000;
	pointer-events: none;
	overflow: hidden;
}
.dt-genie-dilim {
	position: fixed;
	overflow: hidden;
	pointer-events: none;
	will-change: transform, opacity;
	transform-origin: center;
	background: #fff;
}

/* Klasörün "yutma" tepkisi — kart içine emilirken ikon bir kez şişip toparlanır. */
@keyframes dtKlasorYut {
	0% { transform: scale(1); }
	35% { transform: scale(1.18); }
	62% { transform: scale(.92); }
	100% { transform: scale(1); }
}
.dt-klasor.dt-yutuldu .dt-klasor-ad i {
	animation: dtKlasorYut .38s ease-out;
	color: var(--stoper-blue);
}
.dt-klasor.dt-yutuldu .dt-klasor-sayi {
	animation: dtKlasorYut .38s ease-out .06s;
	color: var(--stoper-blue);
	font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
	/* Sürükleme mekaniği kalır (o hareket değil, doğrudan manipülasyon);
	   yalnızca dekoratif animasyonlar kapanır. */
	.dt-klasor.dt-yutuldu .dt-klasor-ad i,
	.dt-klasor.dt-yutuldu .dt-klasor-sayi { animation: none; }
	.dt-klasor.dt-drop-hedef { transform: none; }
}
/* NOT: çoklu-seçim toolbar'ı (.dash-secim-toolbar / .dsecim-btn) stilleri TÜM
   dashboard sayfalarında görünmesi gerektiği için dash.css'te (paylaşılan). */
/* STEP/STL thumbnail'ı arka planda üretilirken gösterilen bekleme durumu. */
.dt-thumb-loading { color: var(--stoper-blue); opacity: .55; font-size: 18px; }

.dt-info-tikla { cursor: pointer; }
.dt-name-duzenle { cursor: text; }
.dt-name-input {
	width: 100%;
	font-size: 14.5px;
	font-weight: 700;
	color: #1d2939;
	border: 1px solid var(--stoper-blue);
	border-radius: 6px;
	padding: 2px 6px;
	background: #fff;
}

/* ---- Not & Dosya Ekle modalı (ataş tıkla → dosya seç) ---- */
.dt-not-dosya-satir { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.dt-not-atas-btn {
	width: 38px; height: 38px;
	flex-shrink: 0;
	border-radius: 8px;
	border: 1px solid var(--stoper-border);
	background: #fff;
	color: var(--stoper-blue);
	font-size: 16px;
}
.dt-not-atas-btn:hover { background: var(--stoper-blue-bg); }
.dt-not-dosya-adi { font-size: 13px; color: var(--stoper-text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#dtNotDosyaGoruntule { font-size: 12.5px; color: var(--stoper-blue); text-decoration: underline; flex-shrink: 0; }

/* ---- Sepetim sayfası üst bar (açıklama + ödemeye devam et) ---- */
.dash-sepet-ust {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}
.dash-sepet-ust .dsecim-btn { white-space: nowrap; }
.dt-info { min-width: 0; flex: 1; }
.dt-name {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 14.5px;
	font-weight: 700;
	color: #1d2939;
	margin: 0 0 2px;
	min-width: 0;
}
.dt-name-metin {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}
/* Kalem ikonu — kartın adının tıklanıp değiştirilebileceğinin görsel ipucu
   (kullanıcı isteği). Hover'da tam ad zaten h5[title] tooltip'inde görünür. */
.dt-name-kalem {
	flex-shrink: 0;
	font-size: 11px;
	color: var(--stoper-text);
	opacity: .55;
}
.dt-name-duzenle:hover .dt-name-kalem { opacity: 1; color: var(--stoper-blue); }
.dt-dims { display: block; font-size: 12.5px; color: var(--stoper-text); }
.dt-hacim { display: block; font-size: 11px; color: var(--stoper-text); opacity: .8; }
/* Fiyatın hangi malzemeye göre verildiği (kullanıcı isteği). */
.dt-malzeme { display: block; font-size: 11.5px; color: var(--stoper-blue); font-weight: 600; margin-top: 1px; }

.dt-yontem-wrap { margin-top: auto; }
.dt-yontem-label { display: block; font-size: 12.5px; color: var(--stoper-text); margin-bottom: 4px; }
.dt-yontem-select {
	width: 100%;
	font-size: 13.5px;
	font-weight: 600;
	color: #1d2939;
	background: #fff;
	border: 1px solid var(--stoper-border);
	border-radius: 6px;
	padding: 7px 10px;
	margin-bottom: 8px;
}
.dt-yontem-select:disabled {
	background: var(--stoper-blue-bg);
	color: #1d2939;
	opacity: 1;
	-webkit-appearance: none;
	appearance: none;
}
/* ============================================================
   Renk paleti — CSS DEĞİŞKENLERİ (renk-bazlı; tek yerden yönetilir).
   Butonlara durum-bazlı uygulanır (aşağıda .dt-cta-durum-*). Rozetler pastel.
   (2026-07-31) Buton renk eşlemesi (kullanıcı isteği):
     OTOMATİK TEKLİF   → Amber  (koyu antrasit metin)
     TEKLİF TAMAMLANMADI→ Coral  (beyaz)
     FİYAT GÜNCELLENDİ → Blue   (beyaz)
     ÖDEME BEKLİYOR    → Emerald(beyaz)
   ============================================================ */
:root {
	--renk-emerald:       #10B981;  --renk-emerald-hover: #059669;
	--renk-coral:         #EF4444;  --renk-coral-hover:   #DC2626;
	--renk-blue:          #3B82F6;  --renk-blue-hover:    #2563EB;
	--renk-amber:         #F59E0B;  --renk-amber-hover:   #D97706;
	/* (2026-08-06) "Hazır Teklif" için SARI — amberden ayırt edilebilecek kadar
	   açık, koyu metinle kontrastı yüksek. */
	--renk-sari:          #FACC15;  --renk-sari-hover:    #EAB308;
	--renk-antrasit:      #1E293B;  /* koyu metin */
}

/* Rozetler — GEÇEN SEFERKİ pastel renkler (deneme sırasında butonlara paletin
   uygulanması için bunlar sade bırakıldı). */
.dt-rozet { font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px; text-transform: uppercase; white-space: nowrap; }
.dt-rozet-otomatik       { background: #e7f0fb; color: #005095; }  /* OTOMATİK TEKLİF (mavi) */
.dt-rozet-tamamlanmadi   { background: #fdecd8; color: #9a5b06; }  /* TEKLİF TAMAMLANMADI (turuncu) */
.dt-rozet-hazir          { background: #fef4c7; color: #8a6d0b; }  /* HAZIR TEKLİF (sarı — butonuyla aynı aile) */
.dt-rozet-guncellendi    { background: #d9f2e3; color: #147a3d; }  /* FİYAT GÜNCELLENDİ (yeşil) */
.dt-rozet-odeme_bekliyor { background: #fff3cd; color: #92720a; }  /* ÖDEME BEKLİYOR (sarı) */
.dt-rozet-suresi_dolu    { background: #fde2e1; color: #a3231d; }  /* (geriye dönük) */

/* (2026-07-31) Rozet + yanındaki düz yardımcı metin (durum satırı) */
.dt-durum-satir { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 7px; margin-top: 8px; }
.dt-rozet-yardim { font-size: 11.5px; color: var(--stoper-text); line-height: 1.3; }
/* (2026-08-08) Rozet satırının sonundaki sona erme yazısı — ikincil bilgi
   olduğu belli olsun diye yardımcı metinden daha soluk. Son 24 saatte ve
   süre dolduğunda uyarı rengine geçer. */
.dt-sure { font-size: 11.5px; color: #6b7280; line-height: 1.3; }
.dt-sure-acil { color: #a3231d; font-weight: 600; }

.dt-cta {
	height: 42px;
	width: 100%;
	border-radius: 6px;
	border: 0;
	background: var(--stoper-blue);
	color: #fff;
	font-weight: 600;
	font-size: 14px;
}
.dt-cta:hover { background: #0077b6; }
.dt-cta-odeme { background: #147a3d; }
.dt-cta-odeme:hover { background: #189249; }
/* "Ödemeyi Tamamla" + 3-nokta ("Teklifi Düzenle") TEK GÖRSEL BİRİM — kullanıcı
   isteği (ekran görüntüsüyle netleşti, 2026-07-28): 3-nokta AYNI butonun
   İÇİNDE, sola yaslı, ARADA HİÇBİR AYRAÇ/ÇİZGİ YOK — tek renkte kesintisiz
   buton, sadece iki tıklama bölgesi var. */
.dt-cta-split {
	display: flex;
	align-items: stretch;
	height: 42px;
	border-radius: 6px;
	overflow: hidden;
	background: #147a3d;
}
.dt-cta-split .dt-cta-odeme { border-radius: 0; flex: 1 1 auto; width: auto; background: transparent; }
.dt-cta-more {
	width: 30px;
	flex-shrink: 0;
	border: 0;
	background: transparent;
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.dt-cta-split:hover .dt-cta-odeme,
.dt-cta-split:hover { background: #106334; }
/* 3 nokta — Font Awesome'ın fa-ellipsis-v'si noktalar arası ayırt edilemeyecek
   kadar sıkışıktı (kullanıcı: "noktalar birbirine çok yakın olmuş"); bunun
   yerine 3 ayrı yuvarlak nokta, aralarında net boşlukla. */
.dt-uc-nokta { display: flex; flex-direction: column; gap: 3px; }
.dt-uc-nokta span { width: 3px; height: 3px; border-radius: 50%; background: #fff; display: block; }

/* (2026-07-30) TÜM kartlarda split-buton: yeşil ana buton (Sepete Ekle /
   Ödemeyi Tamamla) + solda HOVER-tabanlı 3-nokta menü ("Teklifi Düzenle").
   Toolbar'daki "Seçilenleri Sepete Ekle" 3-noktasıyla AYNI hover deseni
   (.dsecim-more-wrap) — kullanıcı isteği. */
.dt-cta-split2 {
	position: relative;
	display: flex;
	align-items: stretch;
	height: 42px;
	border-radius: 6px;
	background: #147a3d;
	transition: background-color .15s ease;
}
.dt-cta-split2:hover { background: #106334; }

/* ============================================================
   (2026-07-31) Kart butonu kartın DURUM rengini alır (kullanıcı eşlemesi):
     OTOMATİK TEKLİF → Amber (koyu antrasit metin+noktalar)
     TEKLİF TAMAMLANMADI → Coral (beyaz)
     FİYAT GÜNCELLENDİ → Blue (beyaz)
     ÖDEME BEKLİYOR → Emerald (beyaz)
   ============================================================ */
.dt-cta-split2.dt-cta-durum-otomatik             { background: var(--renk-amber); }
.dt-cta-split2.dt-cta-durum-otomatik:hover       { background: var(--renk-amber-hover); }
/* Amber butonda metin/noktalar KOYU (kontrast 6.8:1 — WCAG AAA) */
.dt-cta-split2.dt-cta-durum-otomatik .dt-cta-ana,
.dt-cta-split2.dt-cta-durum-otomatik .dt-cta-more2 { color: var(--renk-antrasit); }
.dt-cta-split2.dt-cta-durum-otomatik .dt-uc-nokta span { background: var(--renk-antrasit); }

.dt-cta-split2.dt-cta-durum-tamamlanmadi         { background: var(--renk-coral); }
.dt-cta-split2.dt-cta-durum-tamamlanmadi:hover   { background: var(--renk-coral-hover); }

.dt-cta-split2.dt-cta-durum-guncellendi          { background: var(--renk-blue); }
.dt-cta-split2.dt-cta-durum-guncellendi:hover    { background: var(--renk-blue-hover); }

.dt-cta-split2.dt-cta-durum-odeme_bekliyor       { background: var(--renk-emerald); }
.dt-cta-split2.dt-cta-durum-odeme_bekliyor:hover { background: var(--renk-emerald-hover); }

/* ============================================================
   (2026-08-06 kullanıcı isteği) Buton rengi artık DURUM ROZETİNDEN değil
   KART TİPİNDEN geliyor — üç tip, üç renk:
     otomatik ("Teklifi Düzenle")  → Amber
     hazir    ("Sepete Ekle")      → Sarı
     sepette  ("Ödemeyi Tamamla")  → Yeşil
   Amber ve sarı açık olduğu için metin/noktalar KOYU.
   Yukarıdaki .dt-cta-durum-* kuralları duruyor ama artık kullanılmıyor
   (kart tipi sınıfı basılıyor) — silinmedi, başka sayfalarda kullanılırsa diye.
   ============================================================ */
.dt-cta-split2.dt-cta-tip-otomatik           { background: var(--renk-amber); }
.dt-cta-split2.dt-cta-tip-otomatik:hover      { background: var(--renk-amber-hover); }
.dt-cta-split2.dt-cta-tip-hazir              { background: var(--renk-sari); }
.dt-cta-split2.dt-cta-tip-hazir:hover         { background: var(--renk-sari-hover); }
.dt-cta-split2.dt-cta-tip-sepette            { background: var(--renk-emerald); }
.dt-cta-split2.dt-cta-tip-sepette:hover       { background: var(--renk-emerald-hover); }

.dt-cta-split2.dt-cta-tip-otomatik .dt-cta-ana,
.dt-cta-split2.dt-cta-tip-otomatik .dt-cta-more2,
.dt-cta-split2.dt-cta-tip-hazir .dt-cta-ana,
.dt-cta-split2.dt-cta-tip-hazir .dt-cta-more2 { color: var(--renk-antrasit); }
.dt-cta-split2.dt-cta-tip-otomatik .dt-uc-nokta span,
.dt-cta-split2.dt-cta-tip-hazir .dt-uc-nokta span { background: var(--renk-antrasit); }

/* Otomatik kartta 3 nokta yok → yazı ortalı kalsın, sol boşluk oluşmasın. */
.dt-cta-split2.dt-cta-tip-otomatik .dt-cta-ana { padding-left: 12px; }
/* Otomatik kartın TAMAMI düzenlemeye götürüyor — imleç bunu belli etsin. */
.dt-card-col.dt-tip-otomatik .dt-card { cursor: pointer; }
.dt-cta-more-wrap { position: relative; display: flex; }
.dt-cta-more2 {
	width: 34px;
	flex-shrink: 0;
	border: 0;
	background: transparent;
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.dt-cta-ana {
	flex: 1 1 auto;
	border: 0;
	background: transparent;
	color: #fff;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	padding: 0 14px 0 4px;
}
/* Menü YUKARI açılır (dropup — buton kartın altında) */
.dt-cta-more-menu {
	display: none;
	position: absolute;
	bottom: 46px;
	left: 0;
	z-index: 30;
	min-width: 160px;
	background: #fff;
	border: 1px solid var(--stoper-border);
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(29, 41, 57, .16);
	padding: 4px;
}
/* 3-nokta ile menü arası boşluğu köprüle (fare hareketinde erken kapanmasın) —
   SADECE .dt-cta-more-wrap genişliğinde, ana butona taşmaz. */
.dt-cta-more-wrap::after {
	content: ''; position: absolute; bottom: 100%; left: 0; width: 100%; height: 8px;
}
.dt-cta-more-wrap:hover .dt-cta-more-menu { display: block; }
.dt-cta-more-menu button {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	border: 0;
	background: none;
	padding: 9px 10px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--stoper-blue);
	cursor: pointer;
	text-align: left;
}
.dt-cta-more-menu button:hover { background: #e7f0fb; }

/* ---- Sidebar filtre listesi (Tüm Teklifler / Ödeme Bekleyenler / Süresi Dolan) ---- */
.dt-filtre-list { list-style: none; margin: 0 0 18px; padding: 0; }
.dt-filtre {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 9px 12px;
	border-radius: 8px;
	font-size: 13.5px;
	color: var(--stoper-text);
	cursor: pointer;
	text-decoration: none;
}
.dt-filtre:hover { background: #fff; }
.dt-filtre.active { background: #fff; color: var(--stoper-blue); font-weight: 700; border: 1px solid var(--stoper-border); }
.dt-filtre-sayi { font-size: 12px; opacity: .8; }

.dt-klasorler-baslik {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 13px;
	font-weight: 700;
	color: var(--stoper-text);
	margin-bottom: 8px;
}
.dt-klasor-ekle-btn {
	width: 22px; height: 22px;
	border-radius: 50%;
	border: 1px solid var(--stoper-border);
	background: #fff;
	color: var(--stoper-blue);
	font-size: 15px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background .15s, color .15s;
}
.dt-klasor-ekle-btn:hover { background: var(--stoper-blue); color: #fff; }

/* ---- Klasör listesi ---- */
.dt-klasor-list { list-style: none; margin: 0 0 18px; padding: 0; }
.dt-klasor-bos { font-size: 11.5px; color: var(--stoper-text); opacity: .7; padding: 4px 12px; }
.dt-klasor {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 12px;
	border-radius: 8px;
	font-size: 13px;
	color: var(--stoper-text);
	cursor: pointer;
}
.dt-klasor:hover { background: #fff; }
.dt-klasor.active { background: #fff; color: var(--stoper-blue); font-weight: 600; border: 1px solid var(--stoper-border); }
.dt-klasor-ad { display: flex; align-items: center; gap: 7px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dt-klasor-ad i { opacity: .75; }
.dt-klasor-sag { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.dt-klasor-sayi { font-size: 12px; opacity: .8; }
.dt-klasor-act { color: var(--stoper-text); opacity: 0; font-size: 12px; text-decoration: none; transition: opacity .12s, color .12s; }
.dt-klasor:hover .dt-klasor-act { opacity: .7; }
.dt-klasor-act:hover { opacity: 1; color: var(--stoper-blue); }
.dt-klasor-delete:hover { color: #c0392b; }

/* (2026-08-04) MANUEL ONAY ROZETİ — Tekliflerim kartı. Kural Sepetim'deki
   (dash-sepet-liste.css) ile BİREBİR aynı; iki sayfa farklı CSS dosyası
   yüklüyor, o yüzden tanım iki yerde. */
.dsl-manuel-onay {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 4px;
	padding: 3px 8px;
	border-radius: 999px;
	background: #fff4d6;
	border: 1px solid #f0c24b;
	color: #8a6d00;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
}