/*
* HERDEM ERP ÇÖZÜMLERİ — site geneli vitrin duzeltmeleri.
*
* `herdem_payments/hooks.py` -> `web_include_css` ile yuklenir. Frappe bu
* listeyi TUM uygulamalardan birlestirir; bu dosya `erpnext-web.bundle.css`
* ve `webshop-web.bundle.css` **sonrasina** gelir. Sira onemli: tema CSS'i
* (/files/website_theme/...) bundle'lardan ONCE yuklendigi icin ayni kural
* tema custom_scss'ine yazilsa gecersiz kaliyor.
*
* ---------------------------------------------------------------------------
* Izgara 1280px ekranlarda 2 sutuna duster
* ---------------------------------------------------------------------------
* `webshop/public/scss/webshop_cart.scss` icinde derlenen kural:
*
* .item-card-group-section .item-card { padding: ...; min-width: 300px; }
*
* Izgara kartlari `col-sm-4` yani %33,3 genislik aliyor. `min-width: 300px`
* bunu zorladigi icin:
*
* 1280px ekran -> liste sutunu 863px -> %33,3 = 288px < 300px
* -> 3 x 300 = 900px > 863px -> satira 2 kart siyar
*
* 1440px'te liste sutunu 954px, %33,3 = 318px > 300px oldugu icin 3 kart
* sigiyordu. Yani 3 sutun yalnizca 1440px ve uzerinde oluyordu; 1280/1152/
* 1024/992px bandinda 2, 820px altinda 1 sutun.
*
* `col-sm-4` genisligi zaten 1/3 dayatir; `min-width` yalnizca bu hesabi
* bozuyor. 992px ve uzerinde sifirlanir.
*
* DIKKAT: secici `.item-card` DEGIL, `.item-card-group-section .item-card`
* olmak zorunda. webshop kurali IKI sinif iceriyor (ozgulluk 0,2,0); tek
* sinifli `.item-card` (0,1,0) kurali hem bu yuzden hem de temada
* yazildigi icin gecersiz kaliyordu. Ayni ozgulluk + sonra gelme = gecerli.
*
* 992px ALTI BILEREK DOKUNULMADI: oralarda 3 kart yan yana sikisir
* (kart ~230px kalir), mevcut 2/1 sutunlu davranis daha iyi okunuyor.
* Mobilde zaten tek sutun.
*/
@media (min-width: 992px) {
.item-card-group-section .item-card {
min-width: 0;
}
}
/*
* ---------------------------------------------------------------------------
* ÜRÜN KARTI IZGARASI: mobil 2, tablet 4, geniş masaüstü 5 sütun
* ---------------------------------------------------------------------------
* 2026-10-11 müşteri isteğiyle değişti (önce: masaüstü 3 sütun, mobil
* 1 sütun). 2026-10-13'te müşteri isteğiyle geniş masaüstü 5 sütuna çıktı.
* Kural `webshop` orijinal `col-sm-4` → %33,3 davranışını ezer
* (yukarıdaki `@media (min-width: 992px)` bloğu artık etkisiz):
*
* * 768px altı (telefon) → 2 sütun (%50)
* * 768–991px (tablet) → 4 sütun (%25)
* * 992px ve üzeri (masaüstü) → 5 sütun (%20)
*
* Neden 992px: sitenin kendi teması da "geniş" düzeni 992px'te başlatıyor;
* %125 Windows ölçekli 1366px dizüstülerin CSS viewport'u ~1093px kaldığı
* için 992 eşiği onları da kapsar. 992px altında 5 kart (~150px) sıkışık
* kalır, bu yüzden 5 sütun yalnızca 992px+. `min-width: 0` TÜM ekranlarda
* — webshop'ın `min-width: 300px` kuralı satırı taşıyor.
*
* NOT: `/all-products` şablonu (`templates/pages/all-products.html`) ve
* `public/js/kritik-stil.js` aynı kurallari satir ici ve `!important` ile
* tekrar basar. `kritik-stil.js` ``'e EN SONA eklendigi icin ikisini
* de EZER. Bir sutun kurali degistirilecekse UCU BIRDEN guncellenmeli.
*/
.item-card-group-section .item-card {
flex: 0 0 50%;
max-width: 50%;
min-width: 0;
}
@media (min-width: 768px) {
.item-card-group-section .item-card {
flex: 0 0 25%;
max-width: 25%;
min-width: 0;
}
}
@media (min-width: 992px) {
.item-card-group-section .item-card {
flex: 0 0 20%;
max-width: 20%;
min-width: 0;
}
}
/*
* ---------------------------------------------------------------------------
* Sepete Ekle butonu: metin sığsın (2026-10-11)
* ---------------------------------------------------------------------------
* webshop `w-30-40` class'ı butona %30 (masaüstü) / %40 (992px altı)
* genişlik veriyor. "Sepete Ekle" metni + ikon 390px ekranda (buton
* ~156px) taşıyor, iki satıra bölünüyordu. Genişlik artık içeriğe göre
* (auto), taban 200px; metin `nowrap` ile kırpılmaz.
*/
.item-cart .btn-add-to-cart,
.item-cart .btn-add-to-cart-list {
width: auto !important;
min-width: 200px;
min-height: 42px;
white-space: nowrap;
}
/* İstek listesi kartındaki liste butonu da taşmasın. */
.btn-add-to-cart-list {
min-width: 180px;
min-height: 42px;
white-space: nowrap;
}
/*
* 5 sütunda grid kartı daralınca (>=1200px, kart ~186px) "Sepete Ekle"
* butonunun yukarıdaki `min-width: 180px` değeri karttan taşıyordu.
* Buton zaten `w-100` taşıdığı için grid kartı bağlamında min-width
* sıfırlanır; buton metni `nowrap` olduğu için sarma olmaz. Yalnızca
* grid kartı (.item-card-group-section .item-card) kapsamında geçerli.
*/
.item-card-group-section .item-card .btn-add-to-cart-list {
min-width: 0;
}
/*
* Mobil 2 sütunda "Sepete Ekle" butonu: (1) küçük telefonlarda metin
* kırpılıyordu, (2) ikon 1. satırda inline olduğu için "Sepete" sağa
* kayıp "Ekle" ile hizasız görünüyordu.
*
* Çözüm: mobilde butonu dikey flex yapıp ikonu kendi (ortalanmış)
* satırına alıyoruz; metin de altında ortalanır. Böylece hem ikon
* metni sıkıştırmaz (kırpılma biter) hem de satırlar tam hizalı olur.
* Geniş ekranda (≥768px) görünüm değişmez. 2026-10-13.
*/
@media (max-width: 767.98px) {
.item-card-group-section .item-card .btn-add-to-cart-list {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
white-space: normal;
line-height: 1.1;
}
/* İkon satırının yan boşluğu (mr-2) kaldır, altına küçük boşluk. */
.item-card-group-section .item-card .btn-add-to-cart-list > span {
margin-right: 0 !important;
margin-bottom: 2px;
line-height: 1;
}
}
/*
* ---------------------------------------------------------------------------
* WhatsApp "Mesaj At" düğmesi
* ---------------------------------------------------------------------------
* `public/js/whatsapp-butonu.js` DOM'a bu düğmeyi ekler (numara ve ön mesaj
* orada). Kaynak sitedeki (kaynak site) görünümünün birebir
* karşılığı: sağ altta sabit, yeşil (#25D366), hap şeklinde, hafif nabız
* animasyonlu.
*
* `z-index: 9998` bilinçli: kaynak sitede de aynı değer. Frappe'ın açılır
* pencereleri (`modal`/`.popover` ~9999-10000) altında kalsın ki düğme onları
* kapatmasın.
*/
.bt-whatsapp-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0;
position: fixed;
right: 20px;
bottom: 20px;
z-index: 9998;
width: 54px;
height: 54px;
padding: 14px;
border: 0;
border-radius: 50%;
background-color: #25d366;
color: #fff;
font-family: inherit;
font-size: 15px;
font-weight: 700;
line-height: 22px;
white-space: nowrap;
text-decoration: none;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
cursor: pointer;
transition: transform 0.2s;
animation: bt-whatsapp-nabiz 2.5s infinite;
}
.bt-whatsapp-btn:hover,
.bt-whatsapp-btn:focus-visible {
color: #fff;
transform: scale(1.05);
animation-play-state: paused;
outline: 2px solid #128c7e;
outline-offset: 2px;
}
.bt-whatsapp-btn svg {
width: 24px;
height: 24px;
flex: 0 0 auto;
fill: currentColor;
}
/* WhatsApp yalnızca ikon düğme: metin etiketi tüm sayfalarda gizli
(2026-10-18). Erişilebilirlik için aria-label/title JS'te duruyor. */
.bt-whatsapp-btn .bt-whatsapp-yazi {
display: none;
}
/*
* ── Satır düzeni kaldırıldı (2026-10-11, müşteri isteği) ──
* Buton artık TÜM sayfalarda ve TÜM ekranlarda sağ altta kayan konumdadır:
* `whatsapp-butonu.js:konumBul()` daima ``'ye ekler, `.bt-whatsapp-btn`
* ise `position: fixed` ile sabit durur. Ana sayfada "Ara"nın sağındaki satır
* konumu, `.bt-whatsapp-kapsayici` ve `--satir` sınıf kuralları kaldırıldı;
* arama satırı tek başına, eski (WhatsApp eklenmeden önceki) düzende çalışır.
*/
/*
* Dar ekranda metin gizlenip daire kalır: 234px'lik hap 390px'lik ekranda
* içeriğin yarısını kapatıyordu. Geniş ekranda metinli hap.
*/
@media (max-width: 768px) {
.bt-whatsapp-btn {
right: 16px;
bottom: 16px;
padding: 14px;
border-radius: 50%;
}
.bt-whatsapp-btn .bt-whatsapp-yazi {
display: none;
}
}
@keyframes bt-whatsapp-nabiz {
0% {
transform: scale(1);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
50% {
transform: scale(1.05);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
100% {
transform: scale(1);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
}
/* Yazdırmada veya sadece ekran okuyucu için gizlenen içerikte görünmesin. */
@media print {
.bt-whatsapp-btn {
display: none;
}
}
/*
* ---------------------------------------------------------------------------
* SVG (lucide) ikonları görünmüyor — 2026-10-11
* ---------------------------------------------------------------------------
* BELİRTİ
* Sitede `` düzeni
* var. Semboller tarayıcıda **yükleniyor** (`web_include_icons` →
* `include_icons()` fetch ile `