/* * CSS HYGIENE: Ayni selector icin yeni kural ekleme — mevcut TEK KAYNAK / canonical blogu duzenle. * Sonuna force override yigmak cakisma uretir. * * final-fixes.css — TakipçiDurağı override katmanı * * NEDEN !important? * app.css minified & yüksek-specificity kurallar içeriyor. * Bu dosya HER ZAMAN app.css'den SONRA yüklenmeli (HTML'de sıra önemli). * Genel kural: app.css'i ASLA elle düzenleme; override'ları buraya yaz. * * CSS VERSİYON BUMPING: * final-fixes.css değiştikten sonra MUTLAKA çalıştır: * npm run bump * Bu komut tüm HTML'lerdeki ?v=N'yi otomatik artırır. * * MOJİBAKE UYARISI: * HTML dosyalarını Perl/sed/PowerShell ile düzenleme. * Sadece Node.js ile utf8 encoding belirterek düzenle: * fs.readFileSync(path, 'utf8') / fs.writeFileSync(path, content, 'utf8') * * BÖLÜMLER (Ctrl+F ile ara): * §1 FOOTER LAYOUT — MASAÜSTÜ (min-width: 1025px) * §2 FOOTER LAYOUT — MOBİL/TABLET (max-width: 1024px) * §3 FOOTER İKON DAİRESİ (.footer-icon-circle) * §4 FOOTER HAKKIMIZDA (açıklama + slogan + copyright) * §5 FOOTER LOGO (cursor + renk) * §6 HOVER STABİLİZASYON (zıplama önleme) * §7 GENEL YARDIMCI (.nowrap vb.) */ /* ───────────────────────────────────────────────────────────────────── §1 FOOTER LAYOUT — MASAÜSTÜ (min-width: 1025px) · 3 sütun grid (hakkımızda | sosyal medya | kurumsal) · Sosyal medya platformları: 7 sütun × 2 satır, ikon üstte + isim altta · footer-bottom gizli; copyright slogan altında ───────────────────────────────────────────────────────────────────── */ @media (min-width:1025px){ html body .footer .footer-content{ grid-template-columns:2fr 2fr 1.2fr!important; gap:2rem!important; align-items:start!important } html body .footer .footer-about, html body .footer .footer-content > .footer-section.footer-about { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; text-align: center !important; width: 100% !important; margin: 0 auto !important; } /* Sosyal medya 7-sütun grid */ html body .footer .footer-content>.footer-section:nth-child(2) ul{ display:grid!important; grid-template-columns:repeat(7,minmax(0,1fr))!important; grid-auto-rows:auto!important; justify-items:center!important; align-items:start!important; gap:.75rem .1rem!important; width:100%!important; max-width:100%!important; margin:0 auto!important; padding:0!important; list-style:none!important } html body .footer .footer-content>.footer-section:nth-child(2) ul li{ width:100%!important; min-width:0!important; max-width:none!important; margin:0!important; padding:0!important } /* Ikon üstte, isim altta (flex-column) */ html body .footer .footer-content>.footer-section:nth-child(2) ul li a{ display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:flex-start!important; gap:.3rem!important; width:100%!important; padding:.1rem 1px!important; white-space:normal!important; text-align:center!important } html body .footer .footer-content>.footer-section:nth-child(2) ul li a>i, html body .footer .footer-content>.footer-section:nth-child(2) ul li a>img{ justify-self:center!important; align-self:center!important; font-size:21px!important; width:24px!important; height:24px!important; line-height:24px!important; margin:0!important } html body .footer .footer-content>.footer-section:nth-child(2) ul li a>span{ width:100%!important; margin:0!important; font-size:.6rem!important; line-height:1.12!important; text-align:center!important; white-space:normal!important } /* Başlık ortala */ html body .footer .footer-content>.footer-section:nth-child(2) h4{ text-align:center!important } /* footer-bottom desktop'ta gizli; copyright slogan altında gösterilir */ html body .footer .footer-bottom{ display:none!important } html body .footer .footer-about .footer-copyright{ display:block!important; margin:.7rem 0 0!important; text-align:center!important; font-size:.78rem!important; color:rgba(255,255,255,.72)!important; white-space:nowrap!important } html body .footer .footer-about .footer-copyright .company-name{ color:#60a5fa!important; font-weight:600!important } html body .footer{ padding-top:2.25rem!important; padding-bottom:1.75rem!important } /* Kurumsal linkleri: sadece taşmayı düzelt, grid/order'a dokunma */ html body .footer .footer-content>.footer-section:nth-child(3) ul li a{ font-size:0.75rem!important; display:block!important; word-break:break-word!important; white-space:normal!important; line-height:1.3!important } /* Gizlilik Politikası (DOM 5. li, order:4) → Mesafeli Satış'ın karşısında dikey ortalama */ html body .footer .footer-content>.footer-section:nth-child(3) ul li:nth-child(5){ align-self:center!important } } /* end @media (min-width:1025px) */ /* ───────────────────────────────────────────────────────────────────── §2 FOOTER LAYOUT — MOBİL/TABLET (max-width: 1024px) · Sosyal medya: 2 sütun, ikon+isim yan yana (flex-row) · Kurumsal: 2 sütun grid · Logo boyutu navbar ile eşleştirildi · Specificity notu: app.css @media(max-width:768px) kurallarını ezmek için .footer-content.footer-content (çift class) KULLANMA; html body .footer zincirleme seçici yeterli. ───────────────────────────────────────────────────────────────────── */ @media (max-width:1024px){ /* Sosyal medya 2-sütun grid */ html body .footer .footer-content>.footer-section:nth-child(2) ul{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; grid-auto-rows:auto!important; justify-items:center!important; align-items:center!important; gap:1rem .8rem!important; width:100%!important; max-width:340px!important; margin:0 auto!important; padding:0!important; list-style:none!important } html body .footer .footer-content>.footer-section:nth-child(2) ul li{ width:100%!important; min-width:0!important; margin:0!important; padding:0!important } /* Ikon üstte, isim altında — .footer-content.footer-content çift class ile app.css @media(max-width:768px) display:grid!important'ı eziyoruz */ html body .footer .footer-content.footer-content>.footer-section:nth-child(2) ul li a{ display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; gap:.35rem!important; width:100%!important; padding:.35rem .2rem!important; white-space:normal!important; text-align:center!important; box-sizing:border-box!important } html body .footer .footer-content.footer-content>.footer-section:nth-child(2) ul li a>span{ font-size:.7rem!important; line-height:1.2!important; text-align:center!important; width:100%!important } /* footer-icon-circle mobilde ortalama + sabit boyut */ html body .footer .footer-content.footer-content>.footer-section:nth-child(2) ul li a .footer-icon-circle{ align-self:center!important; margin:0 auto!important; width:32px!important; height:32px!important; min-width:32px!important; flex-shrink:0!important } /* Kurumsal 2-sütun grid */ html body .footer .footer-content>.footer-section:nth-child(3) ul{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:.5rem 1rem!important; align-items:start!important; width:100%!important; max-width:360px!important; margin:0 auto!important; padding:0!important } html body .footer .footer-content>.footer-section:nth-child(3) ul li a{ display:flex!important; align-items:center!important; justify-content:center!important; text-align:center!important; white-space:normal!important; line-height:1.25!important; padding:.3rem .4rem!important } /* Logo boyutu navbar ile eşleştirildi + tıklama alanı sadece ikon/yazı sınırlarına kilitlendi */ html body .footer .footer-logo, html body .footer .footer-about .footer-logo{ display:inline-flex!important; width:-moz-fit-content!important; width:fit-content!important; max-width:fit-content!important; margin:0 auto .85rem auto!important; align-self:center!important } html body .footer .footer-logo h3{ font-size:clamp(.82rem,3.65vw,1rem)!important; line-height:1.1!important } html body .footer .footer-logo i{ font-size:1.45rem!important } /* Desktop'ta slogan altında gösterilen copyright mobilde gizli */ html body .footer .footer-about .footer-copyright{ display:none!important } } /* end @media (max-width:1024px) */ /* ───────────────────────────────────────────────────────────────────── §2.1 FOOTER LAYOUT — TABLET (769px - 1024px) SABİTLEME · Hakkımızda üstte tam genişlik · Sosyal Medya ve Kurumsal 2 sütun yan yana dengeli yerleşim · Kaydırma/tıklamada pozisyon ve yer değiştirmesini engeller ───────────────────────────────────────────────────────────────────── */ @media (min-width: 769px) and (max-width: 1024px) { html body .footer .footer-content { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 2rem !important; align-items: start !important; } html body .footer .footer-about { grid-column: 1 / -1 !important; max-width: 700px !important; margin: 0 auto 1.25rem auto !important; text-align: center !important; } html body .footer .footer-content > .footer-section:nth-child(2) { grid-column: 1 !important; width: 100% !important; max-width: 360px !important; margin: 0 auto !important; justify-self: center !important; } html body .footer .footer-content > .footer-section:nth-child(3) { grid-column: 2 !important; width: 100% !important; max-width: 360px !important; margin: 0 auto !important; justify-self: center !important; } } /* ───────────────────────────────────────────────────────────────────── §3 FOOTER İKON DAİRESİ (.footer-icon-circle) ───────────────────────────────────────────────────────────────────── */ .footer-brand-icon{display:none!important} .footer-icon-circle{ display:inline-flex!important; align-items:center!important; justify-content:center!important; width:38px!important; height:38px!important; border-radius:8px!important; flex-shrink:0!important; margin:0 auto!important } .footer-icon-circle i, .footer-icon-circle img, .footer-icon-circle svg{ color:#fff!important; fill:#fff!important; font-size:18px!important; width:18px!important; height:18px!important; display:flex!important; align-items:center!important; justify-content:center!important; text-align:center!important; line-height:1!important; margin:0 auto!important } .footer-icon-circle .fa-discord{transform:translateX(1px)!important} @media (max-width:1024px){ .footer-icon-circle{ width:32px!important; height:32px!important; margin:0 auto!important } .footer-icon-circle i, .footer-icon-circle img, .footer-icon-circle svg{ font-size:15px!important; width:15px!important; height:15px!important; margin:0 auto!important } } /* ───────────────────────────────────────────────────────────────────── §4 FOOTER HAKKIMIZDA — açıklama + slogan + copyright ───────────────────────────────────────────────────────────────────── */ html body .footer .footer-about, html body .footer .footer-content .footer-section.footer-about { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; text-align: center !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; } html body .footer .footer-about .footer-description, html body .footer .footer-content .footer-section.footer-about .footer-description{ max-width:100%!important; width:100%!important; -webkit-line-clamp:unset!important; line-clamp:unset!important; display:block!important; word-spacing:normal!important; letter-spacing:normal!important; text-align:center!important; text-align-last:center!important; word-break:normal!important; hyphens:none!important; margin:0 auto .75rem auto!important; align-self:center!important; } /* ───────────────────────────────────────────────────────────────────── §5 FOOTER LOGO — cursor + renk + gap + ortalama ───────────────────────────────────────────────────────────────────── */ html body .footer .footer-logo, html body .footer .footer-about .footer-logo{ cursor:pointer!important; gap:.7rem!important; column-gap:.7rem!important; justify-content:center!important; display:inline-flex!important; flex-direction:row!important; align-items:center!important; width:-moz-fit-content!important; width:fit-content!important; max-width:fit-content!important; margin:0 auto .85rem auto!important; align-self:center!important; text-align:center!important; } html body .footer .footer-logo i{ font-size:22px!important; width:28px!important; height:22px!important; line-height:1!important; color:#60a5fa!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; flex-shrink:0!important; } html body .footer .footer-logo h3, html body .footer .logo h3{ font-size:24px!important; font-weight:700!important; color:#fff!important; line-height:1.6!important; margin:0!important; text-align:center!important; white-space:nowrap!important; } /* copyright: TakipçiDurağı © 2014-2026 Tüm Hakları Saklıdır */ html body .footer .footer-about .footer-copyright, html body .footer .footer-content .footer-section.footer-about .footer-copyright{ text-align:center!important; text-align-last:center!important; display:block!important; width:100%!important; margin:0 auto!important; align-self:center!important; } html body .footer .footer-about .footer-copyright .company-name{ display:inline!important; color:#60a5fa!important; font-weight:600!important } /* ───────────────────────────────────────────────────────────────────── §6 HOVER STABİLİZASYON — zıplama / kayma önleme · app.css bazı li a:hover kurallarında transform/font-weight artışı · var; burada sıfırlıyoruz. ───────────────────────────────────────────────────────────────────── */ html body .footer .footer-content .footer-section ul li a, html body .footer .footer-content .footer-section ul li a *, html body .footer .footer-content .footer-section ul li a:hover, html body .footer .footer-content .footer-section ul li a:hover *, html body .footer .footer-content .footer-section ul li a:focus, html body .footer .footer-content .footer-section ul li a:focus *, html body .footer .footer-content .footer-section ul li a:active, html body .footer .footer-content .footer-section ul li a:active *{ transform:none!important; filter:none!important; font-weight:500!important; letter-spacing:normal!important; transition:color .2s ease!important; margin:0!important; outline:none!important; box-shadow:none!important } /* filter:brightness(1.2) hover iken kayma yapıyor — sıfırla */ html body .footer .footer-section ul li a:hover>.footer-fa-mono, html body .footer .footer-section ul li a:hover>.footer-svc-svg, html body .footer .footer-section ul li a:hover>i, html body .footer .footer-section ul li a:hover>.footer-icon-circle{ filter:none!important; transform:none!important } html body .footer{ display:block!important; width:100%!important; height:auto!important; min-height:auto!important; max-height:none!important; overflow:visible!important; position:relative!important; z-index:1!important; padding-bottom:1.75rem!important; box-sizing:border-box!important; clear:both!important } html body .footer .container, html body .footer .footer-content{ height:auto!important; min-height:auto!important; max-height:none!important; overflow:visible!important } html body .footer .footer-content .footer-section, html body .footer .footer-content .footer-section *{ outline:none!important; -webkit-tap-highlight-color:transparent!important } html body .footer .footer-content .footer-section ul li a:focus, html body .footer .footer-content .footer-section ul li a:active{ transform:none!important; outline:none!important; box-shadow:none!important; border:none!important; margin:0!important } html body .footer .footer-content .footer-section .footer-icon-circle:focus, html body .footer .footer-content .footer-section .footer-icon-circle:active{ transform:none!important; outline:none!important } /* ───────────────────────────────────────────────────────────────────── §7 GENEL YARDIMCI ───────────────────────────────────────────────────────────────────── */ html body .footer .nowrap{ white-space:nowrap!important } /* ───────────────────────────────────────────────────────────────────── §8 POPÜLER PAKETLER (#pricing-preview) KART VE FİYAT DÜZENİ · TL kısımlarının kart kutusunun dışına taşmasını engeller · Kart iç dolgularını, etiket ve fiyat boşluklarını optimize eder ───────────────────────────────────────────────────────────────────── */ html body section.pricing-preview .pricing-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(280px, 360px)) !important; justify-content: center !important; gap: 1.5rem !important; width: 100% !important; max-width: 1160px !important; margin: 0 auto !important; padding: 0 1rem !important; box-sizing: border-box !important; } html body section.pricing-preview .pricing-card, html body section.pricing-preview .pricing-card.featured { width: 100% !important; max-width: 365px !important; padding: 1.75rem 1.15rem 1.5rem !important; box-sizing: border-box !important; overflow: visible !important; } html body section.pricing-preview .pricing-card .pricing-features { width: 100% !important; box-sizing: border-box !important; gap: 0.5rem !important; } html body section.pricing-preview .pricing-card .pricing-features .feature-item { display: flex !important; align-items: center !important; gap: 0.5rem !important; padding: 0.65rem 0.75rem !important; width: 100% !important; box-sizing: border-box !important; overflow: hidden !important; } html body section.pricing-preview .pricing-card .pricing-features .feature-item > i.fas.fa-check { width: 18px !important; height: 18px !important; min-width: 18px !important; font-size: 0.75rem !important; flex-shrink: 0 !important; } html body section.pricing-preview .pricing-card .pricing-features .feature-item .feature-row { display: flex !important; flex: 1 1 auto !important; align-items: center !important; justify-content: space-between !important; gap: 0.4rem !important; min-width: 0 !important; width: 100% !important; overflow: hidden !important; } html body section.pricing-preview .pricing-card .pricing-features .feature-item .feature-label { font-size: 0.85rem !important; font-weight: 600 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; min-width: 0 !important; flex-shrink: 1 !important; line-height: 1.3 !important; } html body section.pricing-preview .pricing-card .pricing-features .feature-item .feature-price-group { display: inline-flex !important; align-items: baseline !important; gap: 0.35rem !important; flex-shrink: 0 !important; white-space: nowrap !important; } html body section.pricing-preview .pricing-card .pricing-features .old-price { font-size: 0.74rem !important; white-space: nowrap !important; } html body section.pricing-preview .pricing-card .pricing-features .new-price { font-size: 0.92rem !important; font-weight: 800 !important; white-space: nowrap !important; } @media (max-width: 380px) { html body section.pricing-preview .pricing-card, html body section.pricing-preview .pricing-card.featured { padding: 1.5rem 0.65rem !important; } html body section.pricing-preview .pricing-card .pricing-features .feature-item { padding: 0.55rem 0.5rem !important; gap: 0.35rem !important; } html body section.pricing-preview .pricing-card .pricing-features .feature-item .feature-label { font-size: 0.78rem !important; } html body section.pricing-preview .pricing-card .pricing-features .old-price { font-size: 0.7rem !important; } html body section.pricing-preview .pricing-card .pricing-features .new-price { font-size: 0.85rem !important; } } /* ───────────────────────────────────────────────────────────────────── §9 SCROLL-TO-TOP BUTONUNUN MODAL VE FORMLARIN ÜSTÜNE ÇIKMASINI ENGELLEME · Z-Index'i 990 seviyesine çeker (modalların ve formların altında kalır) · Herhangi bir modal veya form açıkken butonu tamamen gizler · Mobilde daha kibar ve dokunmatik butonları engellemeyecek boyuta getirir ───────────────────────────────────────────────────────────────────── */ /* Temel Z-index ve geçiş kuralları */ .scroll-to-top, html body .scroll-to-top { z-index: 990 !important; transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease !important; } /* Modalların z-index'ini yukarı çık butonunun çok üstüne al */ .modal, .td-contact-modal, #contact-modal, #chat-modal, html body .modal, html body .td-contact-modal { z-index: 99999 !important; } /* Modal veya form açıkken scroll-to-top butonunu KOŞULSUZ GİZLE */ body:has(.td-contact-modal.is-open) .scroll-to-top, body:has(.td-contact-modal:not([hidden])) .scroll-to-top, body:has(#contact-modal.is-open) .scroll-to-top, body:has(#contact-modal:not([hidden])) .scroll-to-top, body:has(.modal[style*="display: block"]) .scroll-to-top, body:has(.modal[style*="display: flex"]) .scroll-to-top, body:has(.modal.show) .scroll-to-top, body:has(.modal.active) .scroll-to-top, body:has(#chat-modal.show) .scroll-to-top, body.modal-open .scroll-to-top, body.mobile-nav-open .scroll-to-top { display: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: scale(0.6) translateY(20px) !important; } /* Mobilde buton boyutu ve konumu: Daha zarif ve form butonlarının üstünü kapatmayacak şekilde */ @media (max-width: 768px) { html body .scroll-to-top { width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; font-size: 0.9rem !important; bottom: 1.25rem !important; right: 1rem !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important; } } /* ───────────────────────────────────────────────────────────────────── §10 İLETİŞİM FORMU ÖZEL AÇILIR KUTU (CUSTOM SELECT DROPDOWN) · Her cihazda ve iPhone'da KESİNLİKLE AŞAĞI DOĞRU AÇILIR (üstte açılmaz) · iOS Safari'nin yakınlaştırmasını (auto-zoom) engellemek için 16px taban font · Açık / Koyu tema tam uyumu ve yumuşak animasyon ───────────────────────────────────────────────────────────────────── */ .td-custom-select-field { position: relative !important; } .td-custom-select { position: relative !important; width: 100% !important; } .td-custom-select-trigger { width: 100% !important; min-height: 48px !important; padding: 0.75rem 0.95rem !important; border: 1px solid #cbd5e1 !important; border-radius: 10px !important; font-size: 16px !important; /* iPhone Safari otomatik zoom yapmasını engeller */ font-family: inherit !important; background-color: #f8fafc !important; color: #0f172a !important; display: flex !important; align-items: center !important; justify-content: space-between !important; cursor: pointer !important; box-sizing: border-box !important; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease !important; text-align: left !important; user-select: none !important; -webkit-user-select: none !important; -webkit-tap-highlight-color: transparent !important; } .td-custom-select-trigger:focus, .td-custom-select.is-open .td-custom-select-trigger { outline: 0 !important; border-color: #3b82f6 !important; background-color: #ffffff !important; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18) !important; } .td-custom-select-placeholder { color: #64748b !important; font-size: 15px !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .td-custom-select-placeholder.has-value { color: #0f172a !important; } .td-custom-select-arrow { font-size: 0.85rem !important; color: #64748b !important; transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; margin-left: 8px !important; flex-shrink: 0 !important; } .td-custom-select.is-open .td-custom-select-arrow { transform: rotate(180deg) !important; color: #3b82f6 !important; } /* Dropdown Menüsü - KESİNLİKLE KUTUNUN ALTINDA (AŞAĞI DOĞRU) AÇILIR */ .td-custom-select-menu { position: absolute !important; top: calc(100% + 6px) !important; bottom: auto !important; left: 0 !important; right: 0 !important; z-index: 1000 !important; background-color: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 12px !important; box-shadow: 0 14px 34px -4px rgba(15, 23, 42, 0.18), 0 4px 12px -2px rgba(15, 23, 42, 0.08) !important; padding: 6px !important; display: none !important; max-height: 220px !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; } .td-custom-select.is-open .td-custom-select-menu { display: block !important; animation: tdSelectFadeDown 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important; } @keyframes tdSelectFadeDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } /* Seçenek Öğeleri */ .td-custom-select-option { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 10px 12px !important; border-radius: 8px !important; font-size: 15px !important; font-weight: 500 !important; color: #1e293b !important; cursor: pointer !important; transition: background-color 0.15s ease, color 0.15s ease !important; user-select: none !important; -webkit-user-select: none !important; -webkit-tap-highlight-color: transparent !important; } .td-custom-select-option-content { display: flex !important; align-items: center !important; gap: 9px !important; } .td-option-icon { font-size: 1.1rem !important; line-height: 1 !important; } .td-option-check { display: none !important; font-size: 0.85rem !important; color: #2563eb !important; } .td-custom-select-option:hover { background-color: #f1f5f9 !important; color: #0f172a !important; } .td-custom-select-option.is-selected { background-color: #eff6ff !important; color: #2563eb !important; font-weight: 700 !important; } .td-custom-select-option.is-selected .td-option-check { display: inline-block !important; } /* Mobilde iOS Safari zoom engelleme (tüm form alanları min 16px) */ @media (max-width: 768px) { .td-contact-field input, .td-contact-field textarea, .td-custom-select-trigger, html body .td-contact-field input, html body .td-contact-field textarea, html body .td-custom-select-trigger { font-size: 16px !important; } } /* ───────────────────────────────────────────────────────────────────── §7 GERİ DÖNÜŞ BUTONU (MODERN EXPANDING BACK BUTTON) · Varsayılan: Kompakt, 42x42px modern beyaz kart ikon butonu. Tüm sayfalarda başlangıç genişliği eşit olduğu için sayfa geçişlerinde asla zıplama/kayma yapmaz. · Masaüstü Hover: Sağa doğru akıcı şekilde genişler, sayfa başlığı (örn: "Instagram Servislerine Dön") şık bir animasyonla belirir. · Dokunmatik / imleçsiz: metin her zaman görünür (hover gerekmez). · Fareli masaüstü: kompakt ikon; hover ile metin açılır. ───────────────────────────────────────────────────────────────────── */ html body .back-btn, html body button.back-btn, html body a.back-btn { display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; height: 42px !important; min-height: 42px !important; max-height: 42px !important; width: 42px !important; min-width: 42px !important; max-width: 42px !important; padding: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; padding-right: 0 !important; background: #ffffff !important; color: #1e293b !important; border: 1px solid #e2e8f0 !important; border-radius: 12px !important; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06) !important; cursor: pointer !important; overflow: hidden !important; white-space: nowrap !important; text-decoration: none !important; line-height: 1 !important; position: relative !important; z-index: 25 !important; pointer-events: auto !important; margin: 1.25rem 0 0.75rem !important; transition: max-width 0.32s cubic-bezier(0.16, 1, 0.3, 1), padding 0.32s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, box-shadow 0.25s ease, transform 0.2s ease !important; } html body .back-btn i, html body button.back-btn i, html body a.back-btn i { width: 40px !important; min-width: 40px !important; height: 40px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 0.95rem !important; color: #475569 !important; flex: 0 0 40px !important; margin: 0 !important; transition: transform 0.22s ease, color 0.2s ease !important; } html body .back-btn span, html body button.back-btn span, html body a.back-btn span { opacity: 0 !important; max-width: 0 !important; overflow: hidden !important; white-space: nowrap !important; font-size: 0.9rem !important; font-weight: 600 !important; color: #1e293b !important; letter-spacing: -0.01em !important; margin-left: 0 !important; transition: opacity 0.2s ease, max-width 0.32s cubic-bezier(0.16, 1, 0.3, 1), margin 0.32s ease !important; pointer-events: none !important; } /* Masaüstü İmleç Hover / Focus Etkileşimi */ @media (hover: hover) and (pointer: fine) { html body .back-btn:hover, html body button.back-btn:hover, html body a.back-btn:hover, html body .back-btn:focus-visible, html body button.back-btn:focus-visible, html body a.back-btn:focus-visible { max-width: 320px !important; width: auto !important; padding-right: 1.15rem !important; background: #ffffff !important; border-color: #cbd5e1 !important; transform: translateY(-1px) !important; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.1) !important; } html body .back-btn:hover i, html body button.back-btn:hover i, html body a.back-btn:hover i, html body .back-btn:focus-visible i, html body button.back-btn:focus-visible i, html body a.back-btn:focus-visible i { color: #2563eb !important; transform: translateX(-2px) !important; } html body .back-btn:hover span, html body button.back-btn:hover span, html body a.back-btn:hover span, html body .back-btn:focus-visible span, html body button.back-btn:focus-visible span, html body a.back-btn:focus-visible span { opacity: 1 !important; max-width: 260px !important; margin-left: 0.25rem !important; } } /* Dokunmatik / imleçsiz: metin her zaman görünür (hover yok) */ @media (hover: none), (pointer: coarse) { html body .back-btn, html body button.back-btn, html body a.back-btn { width: auto !important; min-width: 42px !important; max-width: min(92vw, 320px) !important; height: 42px !important; padding: 0 1rem 0 0 !important; justify-content: flex-start !important; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08) !important; } html body .back-btn span, html body button.back-btn span, html body a.back-btn span { display: inline !important; opacity: 1 !important; max-width: 260px !important; margin-left: 0.25rem !important; overflow: hidden !important; text-overflow: ellipsis !important; pointer-events: none !important; } html body .back-btn:active, html body button.back-btn:active, html body a.back-btn:active { transform: scale(0.98) !important; background: #f1f5f9 !important; } } /* Koyu Tema Geri Dönüş Butonu Uyumu */ /* ───────────────────────────────────────────────────────────────────── §8 MOBİL HAMBURGER MENÜ — KESİN TEK AKTİF BUTON KONTROLÜ · Mobilde tıklanan butonların çift mavi yanmasını (sticky hover) tamamen önler. · Aynı anda kesinlikle yalnızca 1 buton mavi yanabilir. ───────────────────────────────────────────────────────────────────── */ @media (max-width: 1024px) { /* 1. Tüm butonların varsayılan inaktif rengi */ html body.mobile-nav-ready .header .header-content .dropdown-toggle, html body.mobile-nav-ready .header .header-content .nav-link, html body.mobile-nav-open .header .header-content .dropdown-toggle, html body.mobile-nav-open .header .header-content .nav-link { background: #f8fafc !important; color: #0f172a !important; border: 1px solid #e2e8f0 !important; box-shadow: none !important; } /* 2. Dokunmatik ekranlarda yapışkan (:hover ve :focus) maviliğini sıfırla */ html body.mobile-nav-ready .header .header-content .dropdown-toggle:hover, html body.mobile-nav-ready .header .header-content .nav-link:hover, html body.mobile-nav-ready .header .header-content .dropdown-toggle:focus, html body.mobile-nav-ready .header .header-content .nav-link:focus, html body.mobile-nav-open .header .header-content .dropdown-toggle:hover, html body.mobile-nav-open .header .header-content .nav-link:hover, html body.mobile-nav-open .header .header-content .dropdown-toggle:focus, html body.mobile-nav-open .header .header-content .nav-link:focus { background: #f8fafc !important; color: #0f172a !important; border-color: #e2e8f0 !important; } /* 3. SADECE aktif olan ya da açık olan dropdown butonu MAVİ yansın */ html body.mobile-nav-ready .header .header-content .dropdown.show > .dropdown-toggle, html body.mobile-nav-ready .header .header-content .dropdown:has(.dropdown-menu.show) > .dropdown-toggle, html body.mobile-nav-ready .header .header-content .dropdown-toggle.active, html body.mobile-nav-ready .header .header-content .nav-link.active { background: #2563eb !important; color: #ffffff !important; border-color: #2563eb !important; } html body.mobile-nav-ready .header .header-content .dropdown.show > .dropdown-toggle i, html body.mobile-nav-ready .header .header-content .dropdown:has(.dropdown-menu.show) > .dropdown-toggle i, html body.mobile-nav-ready .header .header-content .dropdown-toggle.active i { color: #ffffff !important; transform: rotate(180deg) !important; } /* 4. Dropdown menü açıkken diğer nav linklerin mavi yanmasını engelle */ html body.mobile-nav-ready .header .header-content .nav:has(.dropdown-menu.show) .nav-link:not(.dropdown-toggle), html body.mobile-nav-ready .header .header-content .nav:has(.dropdown.show) .nav-link:not(.dropdown-toggle) { background: #f8fafc !important; color: #0f172a !important; border-color: #e2e8f0 !important; } } /* ───────────────────────────────────────────────────────────────────── §9 NAVBAR DROPDOWN İTEM İKON DİKEY ORTALAMA (FOTOĞRAF 1 DÜZELTMESİ) · Dropdown içerisindeki menü butonlarında ikonların yazının tam solunda ve dikeyde tam merkezde hizalanmasını sağlar (yukarı kaymayı önler). ───────────────────────────────────────────────────────────────────── */ html body .header .dropdown-menu .dropdown-item { display: flex !important; align-items: center !important; } html body .header .dropdown-menu .dropdown-item i, html body .header .dropdown-menu .dropdown-item svg { display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; vertical-align: middle !important; transform: translateY(1.5px) !important; } /* ───────────────────────────────────────────────────────────────────── §10 MOBİL EKRAN ALANI OPTİMİZASYONU (CANLI BİLDİRİM & SCROLL BUTONU) · Küçük ekranlarda sol alttan çıkan sipariş bildiriminin ekranı aşırı kaplamasını ve sağ alttaki yukarı çık butonuyla çakışmasını önler. ───────────────────────────────────────────────────────────────────── */ @media (max-width: 768px) { /* Sol alttaki canlı sipariş toast — telefonda tam ferah; scroll gizli */ html body .live-notifications, html body #liveNotifications { left: 12px !important; right: 12px !important; bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important; max-width: none !important; width: auto !important; z-index: 9980 !important; pointer-events: none !important; display: flex !important; flex-direction: column !important; gap: 8px !important; align-items: stretch !important; } html body .live-notifications .order-item, html body #liveNotifications .order-item { pointer-events: auto !important; display: flex !important; align-items: center !important; padding: 0.7rem 0.85rem !important; font-size: 0.82rem !important; line-height: 1.35 !important; gap: 0.65rem !important; border-radius: 12px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.14) !important; background: rgba(255, 255, 255, 0.97) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; min-height: 0 !important; } html body .live-notifications .order-item img, html body #liveNotifications .order-item img { width: 32px !important; height: 32px !important; min-width: 32px !important; border-radius: 50% !important; flex-shrink: 0 !important; } /* Telefonda yukarı scroll gizle — toast’a yer açılsın */ html body .scroll-to-top, html body #scroll-to-top { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } } /* ───────────────────────────────────────────────────────────────────── §11 KURUMSAL VE İÇERİK SAYFALARI GERİ DÖNÜŞ BUTONU YERLEŞİMİ · Kurumsal sayfalarda sidebar/içerik düzeninde butonun şık durması. ───────────────────────────────────────────────────────────────────── */ html body .corporate-content .back-btn, html body .corporate-content button.back-btn { margin: 0 0 1.25rem 0 !important; } /* ───────────────────────────────────────────────────────────────────── §12 ÖZELLEŞTİRİLMİŞ MODERN KAYDIRMA ÇUBUĞU (CUSTOM SCROLLBAR) · Tarayıcının varsayılan ham/iskelet Windows kaydırma çubuğunu modern, ince ve yuvarlak hatlı marka stiline dönüştürür. ───────────────────────────────────────────────────────────────────── */ * { scrollbar-width: thin; scrollbar-color: #cbd5e1 #f8fafc; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: #f8fafc; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: #94a3b8; border-radius: 999px; border: 2px solid transparent; background-clip: content-box; } /* ───────────────────────────────────────────────────────────────────── §13 METİN SEÇİMİ, ODAKLANMA VE FORM GİRDİLERİ · Varsayılan tarayıcı seçim/odaklanma/otomatik tamamlama iskeletini marka renkleriyle özelleştirir. ───────────────────────────────────────────────────────────────────── */ ::selection { background: #2563eb !important; color: #ffffff !important; } ::-moz-selection { background: #2563eb !important; color: #ffffff !important; } html, body, button, a, input, select, textarea { -webkit-tap-highlight-color: transparent !important; } :focus-visible { outline: 2px solid rgba(37, 99, 235, 0.6) !important; outline-offset: 2px !important; } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill, select:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important; -webkit-text-fill-color: #0f172a !important; transition: background-color 5000s ease-in-out 0s !important; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; } input[type="number"] { -moz-appearance: textfield; appearance: textfield; } /* ───────────────────────────────────────────────────────────────────── §14 ÖZELLEŞTİRİLMİŞ EVRENSEL BİLDİRİM TOASTI (YEREL ALERT ALTERNATİFİ) · Tarayıcının ham 'alert()' kutusu yerine modern, şık, animasyonlu toast. ───────────────────────────────────────────────────────────────────── */ .td-custom-toast { position: fixed; top: 1.5rem; right: 1.5rem; z-index: 999999; max-width: min(420px, calc(100vw - 2rem)); opacity: 0; visibility: hidden; transform: translateY(-12px) scale(0.96); transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; } .td-custom-toast.is-visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto; } .td-custom-toast .td-toast-content { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1.15rem; border-radius: 14px; background: rgba(15, 23, 42, 0.94); color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 16px 36px rgba(15, 23, 42, 0.32); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-size: 0.88rem; font-weight: 500; line-height: 1.4; } .td-custom-toast .td-toast-content i.fa-info-circle { color: #38bdf8; font-size: 1.15rem; flex: 0 0 auto; } .td-custom-toast .td-toast-content span { flex: 1 1 auto; } .td-custom-toast .td-toast-close { background: transparent; border: 0; color: rgba(255, 255, 255, 0.6); cursor: pointer; padding: 0.2rem; font-size: 0.95rem; display: flex; align-items: center; justify-content: center; border-radius: 6px; transition: color 0.2s, background 0.2s; flex: 0 0 auto; } .td-custom-toast .td-toast-close:hover { color: #ffffff; background: rgba(255, 255, 255, 0.15); } @media (max-width: 480px) { .td-custom-toast { top: 1rem; left: 1rem; right: 1rem; max-width: none; } } /* ========================================================================== */ /* §15. NAVBAR & LOGO SLOT ZERO-SHIFT STABILIZATION */ /* ========================================================================== */ /* 1. Prevent scrollbar jump across all pages in Windows/desktop */ html { scrollbar-gutter: stable !important; overflow-y: auto !important; } body { overflow-x: hidden !important; overflow-y: visible !important; /* Mobil tarayici arac cubugu inip kalkarken 100vh sabit kalir ve gorunen yukseklikle farklilasir -> footer/aSayfa anlik kayar, birakinnca duzelir. 100dvh (dynamic viewport) gorunen yuksekligi takip eder; masaustunde dvh == vh oldugu icin gorunum piksel piksel ayni kalir. vh fallback. */ min-height: 100vh !important; min-height: 100dvh !important; height: auto !important; } /* 2. Header and Container lock: 80px fixed height and centered content */ html body .header { height: 80px !important; max-height: 80px !important; position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 1000000 !important; } html body .header .container, html body .header > .container { height: 100% !important; max-width: 1200px !important; } html body .header .header-content { height: 100% !important; display: flex !important; align-items: center !important; justify-content: space-between !important; } /* 3. Logo Container: locked height, identical 0.6rem gap, fixed flex-basis */ html body .header .logo, html body .header .logo:link, html body .header .logo:visited, html body .header .logo:hover, html body .header .logo:focus, html body .header .logo:active { display: inline-flex !important; align-items: center !important; gap: 0.6rem !important; height: 42px !important; min-height: 42px !important; max-height: 42px !important; min-width: 198px !important; flex: 0 0 auto !important; flex-shrink: 0 !important; margin: 0 !important; padding: 0 !important; cursor: pointer !important; text-decoration: none !important; box-sizing: border-box !important; } /* 4. Strictly Fixed 28x28 Icon Box for every platform and brand icon */ html body .header .logo .brand-mark, html body .header .logo .x-logo-mark, html body .header .logo .kick-logo-mark, html body .header .logo > i, html body .header .logo > svg { width: 28px !important; min-width: 28px !important; max-width: 28px !important; height: 28px !important; min-height: 28px !important; max-height: 28px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; flex-grow: 0 !important; margin: 0 !important; padding: 0 !important; text-align: center !important; box-sizing: border-box !important; overflow: visible !important; } /* 5. Uniform Icon Glyph dimensions inside the 28x28 slot */ html body .header .logo .brand-mark i, html body .header .logo .brand-mark svg, html body .header .logo .x-logo-mark svg, html body .header .logo > i, html body .header .logo > svg { font-size: 22px !important; width: 22px !important; height: 22px !important; max-width: 22px !important; max-height: 22px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 auto !important; padding: 0 !important; line-height: 1 !important; flex-shrink: 0 !important; vertical-align: middle !important; } /* 6. Brand Text: locked anchor position across all pages */ html body .header .logo > span:not(.brand-mark):not(.x-logo-mark):not(.kick-logo-mark) { display: inline-block !important; flex-shrink: 0 !important; font-size: 1.25rem !important; font-weight: 700 !important; letter-spacing: -0.01em !important; line-height: 1 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; color: #2563eb !important; -webkit-text-fill-color: #2563eb !important; } /* 7. Mobile Viewports (<= 768px): clean scaling with zero shifts */ @media (max-width: 768px) { html body .header { height: 64px !important; max-height: 64px !important; } html body .header .logo, html body .header .logo:hover, html body .header .logo:active, html body .header .logo:focus, html body .header .logo:focus-visible { min-width: 140px !important; max-width: calc(100vw - 160px) !important; gap: 0.45rem !important; height: 38px !important; min-height: 38px !important; max-height: 38px !important; margin: 0 !important; padding: 0 !important; transform: none !important; translate: none !important; scale: none !important; } html body .header .logo .brand-mark, html body .header .logo .x-logo-mark, html body .header .logo .kick-logo-mark, html body .header .logo > i, html body .header .logo > svg, html body .header .logo:hover .brand-mark, html body .header .logo:hover .x-logo-mark, html body .header .logo:hover .kick-logo-mark, html body .header .logo:hover > i, html body .header .logo:hover > svg, html body .header .logo:active .brand-mark, html body .header .logo:active .x-logo-mark, html body .header .logo:active .kick-logo-mark, html body .header .logo:active > i, html body .header .logo:active > svg, html body .header .logo:focus .brand-mark, html body .header .logo:focus .x-logo-mark, html body .header .logo:focus .kick-logo-mark, html body .header .logo:focus > i, html body .header .logo:focus > svg { width: 24px !important; min-width: 24px !important; max-width: 24px !important; height: 24px !important; min-height: 24px !important; max-height: 24px !important; margin: 0 !important; padding: 0 !important; } html body .header .logo .brand-mark i, html body .header .logo .brand-mark svg, html body .header .logo .x-logo-mark svg, html body .header .logo > i, html body .header .logo > svg, html body .header .logo:hover .brand-mark i, html body .header .logo:hover .brand-mark svg, html body .header .logo:hover .x-logo-mark svg, html body .header .logo:hover > i, html body .header .logo:hover > svg, html body .header .logo:active .brand-mark i, html body .header .logo:active .brand-mark svg, html body .header .logo:active .x-logo-mark svg, html body .header .logo:active > i, html body .header .logo:active > svg, html body .header .logo:focus .brand-mark i, html body .header .logo:focus .brand-mark svg, html body .header .logo:focus .x-logo-mark svg, html body .header .logo:focus > i, html body .header .logo:focus > svg { font-size: 19px !important; width: 19px !important; height: 19px !important; max-width: 19px !important; max-height: 19px !important; margin: 0 auto !important; padding: 0 !important; } html body .header .logo > span:not(.brand-mark):not(.x-logo-mark):not(.kick-logo-mark), html body .header .logo:hover > span:not(.brand-mark):not(.x-logo-mark):not(.kick-logo-mark), html body .header .logo:active > span:not(.brand-mark):not(.x-logo-mark):not(.kick-logo-mark), html body .header .logo:focus > span:not(.brand-mark):not(.x-logo-mark):not(.kick-logo-mark) { font-size: 1.05rem !important; margin: 0 !important; padding: 0 !important; } } /* §16 Paket Başlıkları Ortalama */ html body .packages-grid .package-card .package-header { display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; gap: 0.65rem !important; } html body .packages-grid .package-card .package-header span { text-align: center !important; margin: 0 !important; } /* ========================================================================== */ /* §17. PAKET ÖZELLİKLERİ TEK SATIR KİLİTLEME (NO-WRAP & YAZI BOYUTU) */ /* ========================================================================== */ html body .packages-grid .package-card .package-features .feature-item, html body .package-card .package-features .feature-item, html body .package-card .feature-item { display: flex !important; align-items: center !important; justify-content: flex-start !important; padding: 0.56rem 0.65rem !important; gap: 0.5rem !important; overflow: hidden !important; box-sizing: border-box !important; } html body .packages-grid .package-card .package-features .feature-item > i, html body .package-card .package-features .feature-item > i, html body .package-card .feature-item > i { flex: 0 0 28px !important; width: 28px !important; min-width: 28px !important; max-width: 28px !important; height: 28px !important; min-height: 28px !important; max-height: 28px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 0.85rem !important; } html body .packages-grid .package-card .package-features .feature-item span, html body .package-card .package-features .feature-item span, html body .package-card .feature-item span { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; font-size: 0.83rem !important; line-height: 1.25 !important; flex: 1 1 auto !important; min-width: 0 !important; } @media (max-width: 480px) { html body .packages-grid .package-card .package-features .feature-item span, html body .package-card .package-features .feature-item span, html body .package-card .feature-item span { font-size: 0.8rem !important; } } /* ========================================================================== */ /* §18. INPUTS, MODALS & SEARCH RESULT COPY / SELECTION PERMISSIONS */ /* ========================================================================== */ input, textarea, #orderNumber, .order-search-modal, .order-search-modal input, .order-search-modal .search-result, .search-result, .search-result *, .order-status-details, .order-status-details * { user-select: text !important; -webkit-user-select: text !important; -moz-user-select: text !important; -ms-user-select: text !important; -webkit-touch-callout: default !important; } /* ========================================================================== */ /* §19. ORDER STATUS DETAILS LAYOUT & DATE ROW ALIGNMENT */ /* ========================================================================== */ .order-search-dropdown { min-width: 320px !important; } @media (min-width: 480px) { .order-search-dropdown { min-width: 380px !important; } } .order-status-details { display: grid !important; gap: 0.5rem !important; margin-top: 0.75rem !important; text-align: left !important; width: 100% !important; box-sizing: border-box !important; } .order-status-details p { margin: 0 !important; display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 0.75rem !important; line-height: 1.4 !important; font-size: 0.88rem !important; width: 100% !important; box-sizing: border-box !important; } .order-status-details strong { color: inherit !important; font-weight: 600 !important; min-width: auto !important; flex-shrink: 0 !important; white-space: nowrap !important; } .order-status-details .order-status-val, .order-status-details span { text-align: right !important; word-break: break-word !important; } .order-status-details .order-status-date { white-space: nowrap !important; word-break: normal !important; text-align: right !important; font-variant-numeric: tabular-nums !important; font-size: 0.82rem !important; letter-spacing: -0.2px !important; display: inline-block !important; flex-shrink: 0 !important; } /* ========================================================================== */ /* §20. SEARCH RESULT VISIBILITY GUARANTEE & STYLING */ /* ========================================================================== */ .search-result:not(.show), #searchResult:not(.show) { display: none !important; opacity: 0 !important; visibility: hidden !important; } .search-result.show, #searchResult.show { display: block !important; opacity: 1 !important; visibility: visible !important; margin-top: 1rem !important; padding: 1.15rem 1.15rem !important; border-radius: 14px !important; font-size: 0.92rem !important; box-sizing: border-box !important; width: 100% !important; text-align: center !important; line-height: 1.55 !important; word-break: normal !important; overflow-wrap: break-word !important; hyphens: none !important; -webkit-hyphens: none !important; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12) !important; animation: tdSearchPop 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) !important; } /* Cila: baslik tipografisi + durum vurgusu */ .search-result.show h5, #searchResult.show h5 { margin: 0 0 0.4rem !important; font-size: 1.05rem !important; font-weight: 800 !important; letter-spacing: 0.2px !important; line-height: 1.2 !important; } .search-result.error.show h5, #searchResult.error.show h5 { color: #b91c1c !important; } .search-result.success.show h5, #searchResult.success.show h5 { color: #15803d !important; } @keyframes tdSearchPop { from { opacity: 0; transform: translateY(-8px) scale(0.98); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .search-result.show, #searchResult.show { animation: none !important; } } .search-result .order-code-example, #searchResult .order-code-example, .order-code-example { white-space: nowrap !important; display: inline-block !important; font-family: inherit !important; letter-spacing: normal !important; } .search-result.success, #searchResult.success { background: #f0fdf4 !important; border: 1px solid #86efac !important; color: #166534 !important; } .search-result.error, #searchResult.error { background: #fef2f2 !important; border: 1px solid #fca5a5 !important; color: #991b1b !important; } /* ========================================================================== */ /* §21. SERVICES GRID DENGELİ VE ORTALI YERLEŞİM (BALANCED & CENTERED LAYOUT) */ /* ========================================================================== */ html body .main-content .services-grid { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: stretch !important; gap: 1.5rem !important; margin: 2rem auto !important; padding: 0 !important; max-width: 1200px !important; } html body .main-content .services-grid > .service-card { flex: 0 1 calc((100% - 4.5rem) / 4) !important; min-width: 250px !important; max-width: 285px !important; width: 100% !important; min-height: 240px !important; height: auto !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; align-items: stretch !important; text-align: center !important; align-self: stretch !important; padding: 2rem 1.25rem !important; } html body .main-content .services-grid > .service-card .service-icon { flex-shrink: 0 !important; margin-bottom: 1rem !important; } html body .main-content .services-grid > .service-card h3 { margin: 0 0 0.75rem !important; flex-shrink: 0 !important; } html body .main-content .services-grid > .service-card p { margin: 0 !important; flex: 1 1 auto !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* 10 kartlı servis sayfasında (Instagram Servisleri) 5 + 5 tam iki satır dizilimi */ @media (min-width: 1081px) { html body .main-content > .container:has(.services-grid > .service-card:first-child:nth-last-child(10)) { max-width: 1460px !important; width: 95% !important; } html body .main-content .services-grid:has(> .service-card:first-child:nth-last-child(10)) { max-width: 1460px !important; gap: 1.15rem !important; } html body .main-content .services-grid > .service-card:first-child:nth-last-child(10), html body .main-content .services-grid > .service-card:first-child:nth-last-child(10) ~ .service-card { flex: 0 1 calc((100% - 4.6rem) / 5) !important; width: calc((100% - 4.6rem) / 5) !important; min-width: 210px !important; max-width: 275px !important; padding: 1.5rem 1rem !important; box-sizing: border-box !important; } } /* ===== Servis kartları grid TEK KAYNAK (masaüstü + mobil) ===== */ /* Masaüstü: 6 kart → 3 sütun, 3 kart → 3 sütun */ @media (min-width: 1025px) { html body .main-content .services-grid > .service-card:first-child:nth-last-child(6), html body .main-content .services-grid > .service-card:first-child:nth-last-child(6) ~ .service-card, html body .services-grid > .service-card:first-child:nth-last-child(6), html body .services-grid > .service-card:first-child:nth-last-child(6) ~ .service-card { flex: 0 1 calc((100% - 3rem) / 3) !important; max-width: 360px !important; min-width: 0 !important; } html body .main-content .services-grid > .service-card:first-child:nth-last-child(3), html body .main-content .services-grid > .service-card:first-child:nth-last-child(3) ~ .service-card, html body .services-grid > .service-card:first-child:nth-last-child(3), html body .services-grid > .service-card:first-child:nth-last-child(3) ~ .service-card { flex: 0 1 calc((100% - 3rem) / 3) !important; max-width: 360px !important; min-width: 0 !important; } } /* Tablet: 2 sütun */ @media (max-width: 1024px) and (min-width: 641px) { html body .main-content .services-grid, html body .services-grid { gap: 1.25rem !important; } html body .main-content .services-grid > .service-card, html body .main-content .services-grid > a.service-card, html body .services-grid > .service-card, html body .services-grid > a.service-card, html body .main-content .services-grid > .service-card:first-child:nth-last-child(6), html body .main-content .services-grid > .service-card:first-child:nth-last-child(6) ~ .service-card, html body .main-content .services-grid > .service-card:first-child:nth-last-child(3), html body .main-content .services-grid > .service-card:first-child:nth-last-child(3) ~ .service-card { flex: 0 1 calc((100% - 1.25rem) / 2) !important; max-width: none !important; min-width: 0 !important; width: calc((100% - 1.25rem) / 2) !important; } } /* Telefon: 1 sütun — yazı ezilmesin */ @media (max-width: 640px) { html body .main-content .services-grid, html body .services-grid { gap: 1rem !important; } html body .main-content .services-grid > .service-card, html body .main-content .services-grid > a.service-card, html body .services-grid > .service-card, html body .services-grid > a.service-card, html body .main-content .services-grid > .service-card:first-child:nth-last-child(6), html body .main-content .services-grid > .service-card:first-child:nth-last-child(6) ~ .service-card, html body .main-content .services-grid > .service-card:first-child:nth-last-child(3), html body .main-content .services-grid > .service-card:first-child:nth-last-child(3) ~ .service-card, html body .main-content .services-grid > .service-card:first-child:nth-last-child(10), html body .main-content .services-grid > .service-card:first-child:nth-last-child(10) ~ .service-card { flex: 1 1 100% !important; max-width: 100% !important; min-width: 0 !important; width: 100% !important; } html body .main-content .services-grid > .service-card h3, html body .services-grid > .service-card h3 { font-size: 1.2rem !important; } html body .main-content .services-grid > .service-card p, html body .services-grid > .service-card p { font-size: 0.92rem !important; line-height: 1.45 !important; } } /* ========================================================================== */ /* §22. PAKET KARTLARI EVRENSEL GÖRÜNÜM VE AKILLI DİZİLİM SİSTEMİ */ /* ========================================================================== */ /* Ortak Geniş Konteyner & Grid Akışı */ @media (min-width: 1081px) { html body .main-content > .container { max-width: 1540px !important; width: 96% !important; } html body .main-content > .container > .packages-grid, html body .packages-grid { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: stretch !important; gap: 0.75rem !important; max-width: 1540px !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; } } /* ───────────────────────────────────────────────────────────────────────────── EVRENSEL PAKET KARTI GÖRÜNÜM STANDARDI (TÜM SAYFALAR VE TÜM KARTLAR İÇİN) Gereksiz boşlukları, 3 nokta (...) metin kesilmelerini ve orantısızlıkları yok eder. ───────────────────────────────────────────────────────────────────────────── */ html body .packages-grid > .package-card { display: flex !important; flex-direction: column !important; justify-content: space-between !important; box-sizing: border-box !important; border-radius: 16px !important; padding: 1.25rem 0.65rem !important; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important; } html body .packages-grid > .package-card .package-header { font-size: 0.92rem !important; padding: 0.55rem 0.45rem !important; gap: 0.4rem !important; min-height: 48px !important; display: flex !important; align-items: center !important; justify-content: center !important; } html body .packages-grid > .package-card .package-header span { font-size: 0.9rem !important; line-height: 1.2 !important; font-weight: 700 !important; } html body .packages-grid > .package-card .package-warning { padding: 0.35rem 0.45rem !important; font-size: 0.8rem !important; margin-bottom: 0.35rem !important; border-radius: 8px !important; } /* Özellikler listesi kutusu - Ferah, kompakt ve modern */ html body .packages-grid > .package-card .package-features { margin: 0.5rem 0 0.25rem !important; padding: 0.45rem 0.35rem !important; gap: 0.35rem !important; border-radius: 12px !important; } /* Tek tek özellik maddeleri */ html body .packages-grid > .package-card .package-features .feature-item { padding: 0.38rem 0.45rem !important; gap: 0.35rem !important; min-height: 38px !important; border-radius: 8px !important; } /* Özellik metinleri: Asla 3 nokta (...) ile kesilmez, temizce satıra sığar */ html body .packages-grid > .package-card .package-features .feature-item span { font-size: 0.8rem !important; line-height: 1.25 !important; white-space: normal !important; text-overflow: clip !important; overflow: visible !important; word-break: normal !important; } /* Özellik ikonu */ html body .packages-grid > .package-card .package-features .feature-item > i { flex: 0 0 20px !important; width: 20px !important; min-width: 20px !important; height: 20px !important; font-size: 0.75rem !important; border-radius: 6px !important; } /* Fiyat ve Buton alanı */ html body .packages-grid > .package-card .package-pricing { padding: 0.6rem 0.35rem !important; margin: 0.4rem 0 0 !important; gap: 0.35rem !important; } html body .packages-grid > .package-card .final-price { font-size: 1.35rem !important; margin: 0.25rem 0 0.4rem !important; } html body .packages-grid > .package-card .add-to-cart-btn { padding: 0.65rem 0.6rem !important; font-size: 0.92rem !important; } /* ───────────────────────────────────────────────────────────────────────────── MASAÜSTÜ AKILLI SATIR DAĞILIMI (SATIRLAR TAM DOLAR, YETİM KART ASLA KALMAZ) ───────────────────────────────────────────────────────────────────────────── */ @media (min-width: 1081px) { /* 3 Paket Olan Sayfalar: Tek Satırda 3 Kart (1x3) */ html body .main-content > .container > .packages-grid > .package-card:first-child:nth-last-child(3), html body .main-content > .container > .packages-grid > .package-card:first-child:nth-last-child(3) ~ .package-card { flex: 0 1 calc((100% - 2.5rem) / 3) !important; width: calc((100% - 2.5rem) / 3) !important; max-width: 380px !important; padding: 1.35rem 0.75rem !important; } /* 4 Paket Olan Sayfalar: Tek Satırda 4 Kart (1x4) */ html body .main-content > .container > .packages-grid > .package-card:first-child:nth-last-child(4), html body .main-content > .container > .packages-grid > .package-card:first-child:nth-last-child(4) ~ .package-card { flex: 0 1 calc((100% - 3.75rem) / 4) !important; width: calc((100% - 3.75rem) / 4) !important; max-width: 335px !important; padding: 1.35rem 0.75rem !important; } /* 5 Paket Olan Sayfalar: 3 + 2 Duzeni (yetim tek kart kalmaz) */ html body .main-content > .container > .packages-grid > .package-card:first-child:nth-last-child(5), html body .main-content > .container > .packages-grid > .package-card:first-child:nth-last-child(5) ~ .package-card { flex: 0 1 calc((100% - 1.5rem) / 3) !important; width: calc((100% - 1.5rem) / 3) !important; min-width: 0 !important; max-width: 380px !important; padding: 1.35rem 0.75rem !important; } html body .main-content > .container > .packages-grid > .package-card:first-child:nth-last-child(5) ~ .package-card:nth-child(n+4) { flex: 0 1 calc((100% - 0.75rem) / 2) !important; width: calc((100% - 0.75rem) / 2) !important; max-width: 420px !important; padding: 1.35rem 0.75rem !important; } /* 6 Paket Olan Sayfalar: 2 Satır x 3 Kart (3 + 3 = 6) */ html body .main-content > .container > .packages-grid > .package-card:first-child:nth-last-child(6), html body .main-content > .container > .packages-grid > .package-card:first-child:nth-last-child(6) ~ .package-card { flex: 0 1 calc((100% - 2.5rem) / 3) !important; width: calc((100% - 2.5rem) / 3) !important; max-width: 380px !important; padding: 1.35rem 0.75rem !important; } /* 7 Paket Olan Sayfalar (Kick vb.): 4 + 3 Düzeni (1. Satır: 4 Kart, 2. Satır: 3 Kart -> 3. Satır Yok, Yetim Kart Sıfır!) */ html body .main-content > .container > .packages-grid > .package-card:first-child:nth-last-child(7), html body .main-content > .container > .packages-grid > .package-card:first-child:nth-last-child(7) ~ .package-card { flex: 0 1 calc((100% - 3.75rem) / 4) !important; width: calc((100% - 3.75rem) / 4) !important; max-width: 335px !important; padding: 1.25rem 0.55rem !important; } html body .main-content > .container > .packages-grid > .package-card:first-child:nth-last-child(7) ~ .package-card:nth-child(n+5) { flex: 0 1 calc((100% - 2.5rem) / 3) !important; width: calc((100% - 2.5rem) / 3) !important; max-width: 380px !important; padding: 1.25rem 0.75rem !important; } /* 8 Paket Olan Sayfalar: 2 Satır x 4 Kart (4 + 4 = 8) */ html body .main-content > .container > .packages-grid > .package-card:first-child:nth-last-child(8), html body .main-content > .container > .packages-grid > .package-card:first-child:nth-last-child(8) ~ .package-card { flex: 0 1 calc((100% - 3.75rem) / 4) !important; width: calc((100% - 3.75rem) / 4) !important; max-width: 335px !important; padding: 1.35rem 0.75rem !important; } /* 9 Paket Olan Sayfalar: 3 Satır x 3 Kart (3 + 3 + 3 = 9) */ html body .main-content > .container > .packages-grid > .package-card:first-child:nth-last-child(9), html body .main-content > .container > .packages-grid > .package-card:first-child:nth-last-child(9) ~ .package-card { flex: 0 1 calc((100% - 2.5rem) / 3) !important; width: calc((100% - 2.5rem) / 3) !important; max-width: 380px !important; padding: 1.35rem 0.75rem !important; } /* 10 Paket Olan Sayfalar: 2 Satır x 5 Kart (5 + 5 = 10) */ html body .main-content > .container > .packages-grid > .package-card:first-child:nth-last-child(10), html body .main-content > .container > .packages-grid > .package-card:first-child:nth-last-child(10) ~ .package-card { flex: 0 1 calc((100% - 3rem) / 5) !important; width: calc((100% - 3rem) / 5) !important; min-width: 210px !important; max-width: 310px !important; padding: 1.25rem 0.55rem !important; } html body .main-content > .container > .packages-grid > .package-card:first-child:nth-last-child(10) .package-features .feature-item span, html body .main-content > .container > .packages-grid > .package-card:first-child:nth-last-child(10) ~ .package-card .package-features .feature-item span { font-size: 0.77rem !important; line-height: 1.2 !important; } /* 12 Paket Olan Sayfalar (Instagram vb.): 3 Satır x 4 Kart (4 + 4 + 4 = 12) */ html body .main-content > .container > .packages-grid > .package-card:first-child:nth-last-child(12), html body .main-content > .container > .packages-grid > .package-card:first-child:nth-last-child(12) ~ .package-card { flex: 0 1 calc((100% - 3.75rem) / 4) !important; width: calc((100% - 3.75rem) / 4) !important; max-width: 335px !important; padding: 1.25rem 0.65rem !important; } html body .main-content > .container > .packages-grid > .package-card:first-child:nth-last-child(12) .package-features .feature-item span, html body .main-content > .container > .packages-grid > .package-card:first-child:nth-last-child(12) ~ .package-card .package-features .feature-item span { font-size: 0.78rem !important; line-height: 1.22 !important; } } /* ========================================================================== */ /* §23. BANNER ORTA İKONU KALDIRMA & AMBIENT KENAR ANİMASYONLARI */ /* ========================================================================== */ /* 1. Banner ikonlari tum cihazlarda gorunur tutulur: masaustunde 6 ikon (solda 3 / sagda 3), mobilde 4 kose (solda 2 / sagda 2). */ /* 2. Masaüstünde (min-width: 1025px): İkonları banner'ın 4 köşesinde ve uç kenarlarında tutma */ @media (min-width: 1025px) { html body .page-header { position: relative !important; overflow: hidden !important; } html body .page-header .header-background, html body .page-header .floating-icons { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; overflow: hidden !important; pointer-events: none !important; z-index: 1 !important; } /* Banner ikonlari: solda 3 / sagda 3 esit, satir satir aynali simetrik dizilim */ html body .page-header .floating-icons > * { position: absolute !important; font-size: 2rem !important; color: #fff !important; opacity: 0.6 !important; filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)) drop-shadow(0 0 4px rgba(0,0,0,.4)) !important; pointer-events: none !important; will-change: transform; animation: bannerFloat 6s ease-in-out infinite !important; } html body .page-header .floating-icons > *:nth-child(1) { top: 24% !important; left: 8% !important; right: auto !important; bottom: auto !important; animation-delay: 0s !important; } html body .page-header .floating-icons > *:nth-child(2) { top: 24% !important; right: 8% !important; left: auto !important; bottom: auto !important; animation-delay: 0s !important; } html body .page-header .floating-icons > *:nth-child(3) { top: 55% !important; left: 16% !important; right: auto !important; bottom: auto !important; animation-delay: 1.2s !important; } html body .page-header .floating-icons > *:nth-child(4) { top: 55% !important; right: 16% !important; left: auto !important; bottom: auto !important; animation-delay: 1.2s !important; } html body .page-header .floating-icons > *:nth-child(5) { top: 74% !important; left: 8% !important; right: auto !important; bottom: auto !important; animation-delay: 2.4s !important; } html body .page-header .floating-icons > *:nth-child(6) { top: 74% !important; right: 8% !important; left: auto !important; bottom: auto !important; animation-delay: 2.4s !important; } /* Başlık ve metin alanı her zaman en önde ve net */ html body .page-header .header-content { position: relative !important; z-index: 2 !important; } } /* 3. Mobil ve Tablet (max-width: 1024px): Yüzen ikonları gizle & Orijinal Doğal Platform Logosu Göster */ @media (max-width: 1024px) { html body .page-header { position: relative !important; overflow: hidden !important; } /* 1. Yüzen ikonları ve arka plan ikon katmanını telefonda tamamen gizle (yazı okunurluğu) */ html body .page-header .header-background, html body .page-header .floating-icons, html body .page-header .floating-icons > * { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* 2. Telefon görünümünde başlığın üstünde orijinal doğal platform logo rozeti */ html body .page-header .header-content .banner-platform-badge { display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 auto 12px auto !important; } /* Metin alanı: Z-index 2 ile yazının her koşulda kusursuz okunması */ html body .page-header .header-content { position: relative !important; z-index: 2 !important; } html body .page-header .header-content h1 { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35) !important; } html body .page-header .header-content p { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35) !important; } } @keyframes floatMobile { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes bannerFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } @media (prefers-reduced-motion: reduce) { html body .page-header .floating-icons > * { animation: none !important; } } /* ========================================================================== */ /* §24. PAKET KARTI ÖZELLİK SATIRLARI — TAM GENİŞLİK + SOLA HİZALI (KESİN) */ /* Metin uzunluğu ne olursa olsun tüm satırlar aynı hizada görünür: ikon */ /* sabit sütunda, metin sola dayalı ve tam satır genişliğinde. Önceki */ /* ortalayan kuralları ezer (dosya sonunda, güçlü seçici + !important). */ /* ========================================================================== */ html body .main-content .packages-grid .package-card .package-features, html body .packages-grid .package-card .package-features { display: flex !important; flex-direction: column !important; align-items: stretch !important; } html body .main-content .packages-grid .package-card .package-features .feature-item, html body .packages-grid .package-card .package-features .feature-item { display: flex !important; align-items: center !important; justify-content: flex-start !important; align-self: stretch !important; width: 100% !important; text-align: left !important; } html body .main-content .packages-grid .package-card .package-features .feature-item span, html body .packages-grid .package-card .package-features .feature-item span { flex: 1 1 auto !important; min-width: 0 !important; text-align: left !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: clip !important; } /* ========================================================================== */ /* §25. SERVİS KARTLARI EŞİT YÜKSEKLİK */ /* app.css height:auto / align karışıyor; satırda stretch ile eşit yükseklik. */ /* height:% kullanma — flex stretch'i bozar. Ana sayfa service-item etkilenmez*/ /* ========================================================================== */ html body .main-content .services-grid:has(> .service-card), html body .services-grid:has(> .service-card) { display: flex !important; flex-wrap: wrap !important; align-items: stretch !important; } html body .main-content .services-grid:has(> .service-card) > .service-card, html body .main-content .services-grid:has(> .service-card) > a.service-card, html body .services-grid:has(> .service-card) > .service-card, html body .services-grid:has(> .service-card) > a.service-card { height: auto !important; min-height: 240px !important; align-self: stretch !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; box-sizing: border-box !important; } html body .main-content .services-grid:has(> .service-card) > .service-card p, html body .services-grid:has(> .service-card) > .service-card p, html body .services-grid:has(> .service-card) > a.service-card p { flex: 1 1 auto !important; margin: 0 !important; } /* ========================================================================== */ html body .services-grid:has(> .service-card) { align-items: stretch !important; } html body .services-grid:has(> .service-card) > .service-card { height: 100% !important; } /* ========================================================================== */ /* §26. ÖZELLİK SATIRI SONU ONAY İŞARETİ */ /* Tek sütun korunur; her satırın sağ ucuna yeşil tik eklenir, satır dolu */ /* görünür ve kısa metinlerdeki boşluk hissi biter. İşaret saf CSS ile */ /* üretilir (::after + Font Awesome), HTML değişikliği gerekmez. */ /* ========================================================================== */ html body .main-content .packages-grid .package-card .package-features .feature-item::after, html body .packages-grid .package-card .package-features .feature-item::after { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-left: auto; flex: 0 0 20px; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; font-size: 0.7rem; color: #10b981; background: rgba(16, 185, 129, 0.12); } /* === GROK BOT RESTORE PATCH 2026-09-19 (tek yazim) === */ /* Sepete Ekle ikonu: app.css display:none ez */ html body .packages-grid > .package-card .add-to-cart-btn, html body .package-card .add-to-cart-btn, html body .package-pricing .add-to-cart-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.55rem !important; flex-direction: row !important; } html body .packages-grid > .package-card .add-to-cart-btn i, html body .package-card .add-to-cart-btn i, html body .package-pricing .add-to-cart-btn i, html body .package-card .btn i, html body .package-card .package-btn i { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; color: #ffffff !important; font-size: 1rem !important; width: 1.1em !important; height: 1.1em !important; margin: 0 !important; flex: 0 0 auto !important; } /* Floating Sepet FAB KAPALI — sadece navbar Sepet */ html body .td-floating-cart-btn { display: none !important; visibility: hidden !important; pointer-events: none !important; } /* ========================================================================== */ /* §30. MODERN SEPET & SHOPİER SANAL POS CHECKOUT MODALI */ /* ========================================================================== */ /* Yüzen Sepet Butonu */ .td-floating-cart-btn { position: fixed; bottom: 24px; right: 24px; z-index: 99999; display: flex; align-items: center; gap: 10px; background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #ffffff; padding: 12px 20px; border-radius: 999px; box-shadow: 0 10px 25px -4px rgba(37, 99, 235, 0.5), 0 4px 6px -2px rgba(37, 99, 235, 0.2); cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.2); transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); font-family: inherit; font-size: 0.95rem; font-weight: 700; user-select: none; } .td-floating-cart-btn:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 16px 32px -4px rgba(37, 99, 235, 0.6); background: linear-gradient(135deg, #1d4ed8, #1e40af); } .td-floating-cart-btn:active { transform: translateY(0) scale(0.98); } .td-floating-cart-badge { background: #ef4444; color: #ffffff; font-size: 0.75rem; font-weight: 800; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4); } /* Sepet Modal & Backdrop */ .td-cart-modal { position: fixed; inset: 0; z-index: 999900; display: flex; align-items: center; justify-content: center; padding: calc(var(--header-h, 80px) + 16px) 16px 20px; opacity: 1; visibility: visible; transition: opacity 0.25s ease, visibility 0.25s ease; } .td-cart-modal[hidden] { display: none !important; opacity: 0; visibility: hidden; } .td-cart-backdrop { position: absolute; inset: 0; background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .td-cart-card { position: relative; background: #ffffff; border-radius: 20px; max-width: 680px; width: 100%; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 25px 60px -12px rgba(15, 23, 42, 0.35); border: 1px solid rgba(226, 232, 240, 0.8); animation: tdCartSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1); z-index: 1; } @keyframes tdCartSlideUp { from { opacity: 0; transform: translateY(20px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .td-cart-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; border-bottom: 1px solid #f1f5f9; background: #ffffff; position: relative; touch-action: none; -webkit-user-select: none; user-select: none; cursor: grab; } .td-cart-header:active { cursor: grabbing; } /* Fare/imaslec cihazlarda da suruklenebilir: kapatma butonu normal isaretci */ .td-cart-header [data-cart-close], .td-cart-header button { cursor: pointer; } /* Dokunmatik cihazlarda 'tut asagi surukle' ipucu (grabber bar) */ @media (pointer: coarse) { .td-cart-header { padding-top: 22px; } .td-cart-header::before { content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 44px; height: 4px; border-radius: 999px; background: rgba(148, 163, 184, 0.5); } } .td-cart-title-group { display: flex; align-items: center; gap: 12px; } .td-cart-header-icon { width: 40px; height: 40px; border-radius: 12px; background: #eff6ff; color: #2563eb; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; } .td-cart-header h3 { margin: 0; font-size: 1.15rem; font-weight: 800; color: #0f172a; } .td-cart-header p { margin: 2px 0 0; font-size: 0.82rem; color: #64748b; font-weight: 500; } .td-cart-close { background: #f1f5f9; border: none; width: 34px; height: 34px; border-radius: 50%; color: #64748b; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; } .td-cart-close:hover { background: #e2e8f0; color: #0f172a; } /* Sepet İçeriği (Kaydırılabilir) */ .td-cart-body { padding: 20px 24px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 18px; } /* Boş Sepet */ .td-cart-empty { text-align: center; padding: 36px 16px; } .td-cart-empty-icon { width: 72px; height: 72px; border-radius: 50%; background: #f8fafc; color: #94a3b8; display: flex; align-items: center; justify-content: center; font-size: 2rem; margin: 0 auto 16px; border: 1px dashed #cbd5e1; } .td-cart-empty h4 { margin: 0 0 8px; font-size: 1.1rem; font-weight: 700; color: #1e293b; } .td-cart-empty p { margin: 0 0 20px; font-size: 0.9rem; color: #64748b; } /* Sepet Ürün Listesi */ .td-cart-items { display: flex; flex-direction: column; gap: 10px; } .td-cart-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; gap: 12px; } .td-cart-item-info { flex: 1; min-width: 0; } .td-cart-item-name { font-weight: 700; font-size: 0.92rem; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .td-cart-item-price { font-weight: 800; font-size: 0.95rem; color: #2563eb; margin-top: 2px; } .td-cart-item-qty { display: flex; align-items: center; gap: 6px; background: #ffffff; border: 1px solid #cbd5e1; border-radius: 8px; padding: 3px 6px; } .td-cart-qty-btn { background: transparent; border: none; color: #475569; font-weight: 800; font-size: 0.95rem; width: 22px; height: 22px; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 4px; transition: background 0.15s; } .td-cart-qty-btn:hover { background: #f1f5f9; color: #0f172a; } .td-cart-qty-val { font-size: 0.88rem; font-weight: 700; color: #0f172a; min-width: 16px; text-align: center; } .td-cart-item-remove { background: transparent; border: none; color: #94a3b8; cursor: pointer; font-size: 0.9rem; padding: 6px; border-radius: 6px; transition: all 0.2s; } .td-cart-item-remove:hover { color: #ef4444; background: #fee2e2; } /* Form Alanları */ .td-cart-form-group { display: flex; flex-direction: column; gap: 12px; background: #ffffff; border-top: 1px solid #f1f5f9; padding-top: 14px; } .td-cart-field { display: flex; flex-direction: column; gap: 5px; } .td-cart-field label { font-size: 0.83rem; font-weight: 700; color: #1e293b; letter-spacing: 0.1px; display: flex; align-items: center; justify-content: flex-start; gap: 5px; } /* Zorunlu alan isareti: sade kirmizi yildiz (arkadaki kutu/daire kaldırıldı) */ .td-cart-field label span.req { display: inline; color: #dc2626; font-size: 0.95rem; font-weight: 900; line-height: 1; } /* Yasal onay kutularindaki zorunlu yildiz da tutarli kirmizi; kelimenin sonundan ayrilmasin */ html body .td-cart-check .req { color: #dc2626; font-weight: 800; white-space: nowrap; } .td-cart-field input { padding: 10px 14px; border-radius: 10px; border: 1.5px solid #cbd5e1; font-size: 0.9rem; font-family: inherit; color: #0f172a; outline: none; transition: border-color 0.2s, box-shadow 0.2s; background: #ffffff; } .td-cart-field input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); } /* Kucuk ekranlarda placeholder metni TAM sigsin: font kuculur + harf araligi sikisir (v256) */ @media (max-width: 480px) { .td-cart-field input { font-size: 0.82rem; padding: 9px 11px; } .td-cart-field input::placeholder { font-size: 0.76rem; letter-spacing: -0.2px; } } .td-cart-field .help-text { font-size: 0.75rem; color: #64748b; font-weight: 500; } .td-cart-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } /* Footer & Toplam & Ödeme Butonu */ .td-cart-footer { padding: 16px 24px 20px; background: #f8fafc; border-top: 1px solid #e2e8f0; display: flex; flex-direction: column; gap: 12px; } .td-cart-summary { display: flex; align-items: center; justify-content: space-between; } .td-cart-summary-label { font-size: 0.95rem; font-weight: 700; color: #475569; } .td-cart-total-price { font-size: 1.35rem; font-weight: 900; color: #2563eb; letter-spacing: -0.02em; } .td-cart-security-badge { display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 0.78rem; color: #059669; font-weight: 700; } .td-cart-checkout-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 14px 20px; border-radius: 12px; background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #ffffff; border: none; font-size: 1rem; font-weight: 800; cursor: pointer; box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35); transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); font-family: inherit; } .td-cart-checkout-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(37, 99, 235, 0.45); background: linear-gradient(135deg, #1d4ed8, #1e40af); } .td-cart-checkout-btn:disabled { opacity: 0.65; cursor: not-allowed; transform: none; } .td-cart-status { padding: 10px 14px; border-radius: 8px; font-size: 0.85rem; font-weight: 600; text-align: center; } .td-cart-status-error { background: #fee2e2; color: #dc2626; border: 1px solid #fecaca; } /* Mobil Uyum */ @media (max-width: 640px) { .td-floating-cart-btn { bottom: 20px; right: 20px; padding: 10px 16px; font-size: 0.88rem; } .td-cart-modal { padding: 0; align-items: flex-end; } .td-cart-card { border-radius: 20px 20px 0 0; max-height: 94vh; box-shadow: 0 -12px 40px rgba(15, 23, 42, 0.22), 0 0 0 1px rgba(226, 232, 240, 0.9) !important; } .td-cart-body { padding: 16px 18px; } .td-cart-row-2 { grid-template-columns: 1fr; } } /* Koyu Tema (Dark Mode) Desteği */ /* Floating FAB kapalı (navbar Sepet yeterli) — cart CSS restore sonrası */ html body .td-floating-cart-btn { display: none !important; visibility: hidden !important; pointer-events: none !important; opacity: 0 !important; } /* cart item actions layout */ html body .td-cart-item{ grid-template-columns:auto minmax(0,1fr) auto auto auto !important; } html body .td-cart-qty-btn, html body .td-cart-item-remove{ pointer-events:auto !important; position:relative !important; z-index:2 !important; } /* ========================================================================== */ /* §31. HEADER SEPET BUTONU & MODERN ROZET STİLLERİ */ /* ========================================================================== */ /* Header Sepet Butonu: TEK KAYNAK = Cart header polish (asagida) */ /* Sepet İçi Ürün Satırı Grid Düzeni */ html body .td-cart-item { display: grid !important; grid-template-columns: 44px minmax(0, 1fr) auto auto auto !important; align-items: center !important; padding: 12px 14px !important; background: #f8fafc !important; border: 1px solid #e2e8f0 !important; border-radius: 14px !important; gap: 12px !important; } /* Sepet İçi Renkli Squircle Marka Rozetleri */ /* ===== Sepet platform rozet logolari TEK KAYNAK (footer/navbar orijinalleri) ===== */ html body .td-cart-platform-badge { overflow: hidden !important; } html body .td-cart-platform-badge .td-cart-brand-fa { color: #ffffff !important; font-size: 1.15rem !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } html body .td-cart-platform-badge .td-cart-brand-svg { width: 22px !important; height: 22px !important; display: block !important; } html body .td-cart-platform-badge .td-cart-brand-img { width: 26px !important; height: 26px !important; object-fit: contain !important; display: block !important; } html body .td-cart-platform-badge .td-cart-snapchat-logo { width: 28px !important; height: 28px !important; } html body .td-cart-platform-badge .td-cart-kick-logo { width: 24px !important; height: 24px !important; filter: brightness(0) invert(1) !important; } html body .td-cart-platform-badge { width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; border-radius: 12px !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important; } html body .td-cart-platform-badge i { font-size: 1.3rem !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } html body .td-cart-platform-badge svg { width: 22px !important; height: 22px !important; display: inline-block !important; } /* Platform Özel Renk Rozetleri */ html body .td-badge-instagram { background: linear-gradient(135deg, rgba(225, 48, 108, 0.14), rgba(253, 29, 29, 0.12)) !important; color: #e1306c !important; border: 1px solid rgba(225, 48, 108, 0.22) !important; } html body .td-badge-tiktok { background: rgba(15, 23, 42, 0.08) !important; color: #0f172a !important; border: 1px solid rgba(15, 23, 42, 0.15) !important; } html body .td-badge-youtube { background: rgba(239, 68, 68, 0.12) !important; color: #ef4444 !important; border: 1px solid rgba(239, 68, 68, 0.22) !important; } html body .td-badge-kick { background: rgba(34, 197, 94, 0.14) !important; color: #16a34a !important; border: 1px solid rgba(34, 197, 94, 0.25) !important; } html body .td-badge-kick svg path { fill: #16a34a !important; } html body .td-badge-discord { background: rgba(88, 101, 242, 0.12) !important; color: #5865f2 !important; border: 1px solid rgba(88, 101, 242, 0.22) !important; } html body .td-badge-telegram { background: rgba(34, 158, 217, 0.12) !important; color: #229ed9 !important; border: 1px solid rgba(34, 158, 217, 0.22) !important; } html body .td-badge-twitch { background: rgba(145, 70, 255, 0.12) !important; color: #9146ff !important; border: 1px solid rgba(145, 70, 255, 0.22) !important; } html body .td-badge-spotify { background: rgba(29, 185, 84, 0.12) !important; color: #1db954 !important; border: 1px solid rgba(29, 185, 84, 0.22) !important; } html body .td-badge-facebook { background: rgba(24, 119, 242, 0.12) !important; color: #1877f2 !important; border: 1px solid rgba(24, 119, 242, 0.22) !important; } html body .td-badge-linkedin { background: rgba(10, 102, 194, 0.12) !important; color: #0a66c2 !important; border: 1px solid rgba(10, 102, 194, 0.22) !important; } html body .td-badge-pinterest { background: rgba(230, 0, 35, 0.12) !important; color: #e60023 !important; border: 1px solid rgba(230, 0, 35, 0.22) !important; } html body .td-badge-snapchat { background: #fffc00 !important; color: #000000 !important; border: 1px solid rgba(0, 0, 0, 0.12) !important; } html body .td-badge-threads { background: rgba(15, 23, 42, 0.08) !important; color: #0f172a !important; border: 1px solid rgba(15, 23, 42, 0.15) !important; } html body .td-badge-threads svg path { fill: #0f172a !important; } html body .td-badge-x { background: rgba(15, 23, 42, 0.08) !important; color: #0f172a !important; border: 1px solid rgba(15, 23, 42, 0.15) !important; } html body .td-badge-x svg path { fill: #0f172a !important; } html body .td-badge-default { background: rgba(37, 99, 235, 0.1) !important; color: #2563eb !important; border: 1px solid rgba(37, 99, 235, 0.2) !important; } /* Dark Mode Rozet İyileştirmeleri */ /* Cart modal wider + single-line names side by side */ html body .td-cart-card { max-width: min(760px, calc(100vw - 32px)) !important; width: 100% !important; } html body .td-cart-item { grid-template-columns: auto minmax(0, 1fr) auto auto auto !important; column-gap: 0.65rem !important; align-items: center !important; } html body .td-cart-item-meta { min-width: 0 !important; } html body .td-cart-item-name { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; display: block !important; -webkit-line-clamp: unset !important; line-clamp: unset !important; -webkit-box-orient: unset !important; line-height: 1.3 !important; max-width: 100% !important; } html body .td-cart-item-line-total { min-width: 7.5rem !important; width: 7.5rem !important; max-width: 7.5rem !important; text-align: right !important; font-variant-numeric: tabular-nums !important; font-feature-settings: "tnum" 1 !important; white-space: nowrap !important; flex-shrink: 0 !important; justify-self: end !important; } html body .td-cart-item-qty { min-width: 5rem !important; flex-shrink: 0 !important; justify-self: center !important; } html body .td-cart-qty-val { min-width: 1.5rem !important; display: inline-block !important; text-align: center !important; font-variant-numeric: tabular-nums !important; } html body .td-cart-item-remove { flex-shrink: 0 !important; } html body .td-cart-total-price { font-variant-numeric: tabular-nums !important; font-feature-settings: "tnum" 1 !important; min-width: 7.5rem !important; text-align: right !important; display: inline-block !important; } @media (max-width: 560px) { html body .td-cart-card { max-width: calc(100vw - 16px) !important; } html body .td-cart-item-name { white-space: normal !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; line-clamp: 2 !important; text-overflow: unset !important; } } /* ========================================================================== */ /* §32. DARK MODE CART ITEMS HIGH-SPECIFICITY OVERRIDES */ /* ========================================================================== */ /* Cart platform badges = footer/nav brand marks */ html body .td-cart-platform-badge { width: 40px !important; height: 40px !important; border-radius: 12px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; overflow: hidden !important; border: none !important; box-shadow: none !important; } html body .td-cart-platform-badge > i { font-size: 1.15rem !important; line-height: 1 !important; display: inline-block !important; } html body .td-cart-platform-badge .td-cart-kick-logo { width: 18px !important; height: 18px !important; object-fit: contain !important; display: block !important; filter: none !important; } html body .td-cart-platform-badge .td-cart-brand-svg { width: 16px !important; height: 16px !important; display: block !important; } html body .td-cart-platform-badge .td-cart-platform-logo { display: none !important; } /* === PLATFORM DROPDOWN: 2 sutun, dengeli yatay (sadece ACIK) === */ @media (min-width: 1025px) { html body .header .dropdown-menu.show:has(.dropdown-item:nth-child(10)), html body .header .dropdown.show > .dropdown-menu:has(.dropdown-item:nth-child(10)), html body .header .dropdown:hover > .dropdown-menu:has(.dropdown-item:nth-child(10)) { display: grid !important; grid-template-columns: max-content max-content !important; justify-content: start !important; width: max-content !important; min-width: 0 !important; max-width: 92vw !important; column-gap: 10px !important; row-gap: 2px !important; padding: 0.5rem 0.55rem !important; gap: 2px 10px !important; } } html body .header .dropdown-menu:has(.dropdown-item:nth-child(10)) .dropdown-item, html body .header .dropdown-menu.show:has(.dropdown-item:nth-child(10)) .dropdown-item { padding: 0.55rem 0.7rem !important; margin: 0 !important; gap: 0.5rem !important; width: auto !important; min-width: 0 !important; white-space: nowrap !important; } /* ===== Platformlar dropdown TEK KAYNAK (mobil 2 sutun; kapaliyken gizle; navbar butonlarini ezme) ===== */ @media (max-width: 1024px) { /* KAPALI menu: yer kaplamasin (toggle butonu etkilenmez) */ html body .header .dropdown-menu:has(.dropdown-item:nth-child(10)):not(.show), html body.mobile-nav-ready .header .header-content .dropdown-menu:has(.dropdown-item:nth-child(10)):not(.show), html body.mobile-nav-open .header .header-content .dropdown-menu:has(.dropdown-item:nth-child(10)):not(.show) { display: none !important; height: 0 !important; max-height: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; border: none !important; visibility: hidden !important; pointer-events: none !important; position: absolute !important; left: -9999px !important; width: 0 !important; min-width: 0 !important; } /* ACIK: sadece o zaman tam genislik + 2 sutun */ html body .header .dropdown.show:has(> .dropdown-menu .dropdown-item:nth-child(10)), html body.mobile-nav-ready .header .header-content .dropdown.show:has(> .dropdown-menu .dropdown-item:nth-child(10)), html body.mobile-nav-open .header .header-content .dropdown.show:has(> .dropdown-menu .dropdown-item:nth-child(10)) { width: 100% !important; max-width: 100% !important; } html body .header .dropdown-menu.show:has(.dropdown-item:nth-child(10)), html body .header .dropdown.show > .dropdown-menu:has(.dropdown-item:nth-child(10)), html body.mobile-nav-ready .header .header-content .dropdown-menu.show:has(.dropdown-item:nth-child(10)), html body.mobile-nav-open .header .header-content .dropdown-menu.show:has(.dropdown-item:nth-child(10)), html body.mobile-nav-ready .header .header-content .dropdown.show > .dropdown-menu:has(.dropdown-item:nth-child(10)), html body.mobile-nav-open .header .header-content .dropdown.show > .dropdown-menu:has(.dropdown-item:nth-child(10)) { display: grid !important; grid-template-columns: 1fr 1fr !important; justify-content: stretch !important; align-items: stretch !important; position: static !important; left: auto !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; height: auto !important; max-height: none !important; box-sizing: border-box !important; column-gap: 0.35rem !important; row-gap: 2px !important; padding: 0.45rem 0.5rem !important; margin: 0.35rem 0 0 !important; overflow: visible !important; visibility: visible !important; pointer-events: auto !important; } html body .header .dropdown-menu.show:has(.dropdown-item:nth-child(10)) .dropdown-item, html body .header .dropdown.show > .dropdown-menu:has(.dropdown-item:nth-child(10)) .dropdown-item { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; padding: 0.5rem 0.45rem !important; gap: 0.4rem !important; font-size: 0.88rem !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* Navbar aksiyon butonlari (arama / sepet / tema) her zaman gorunsun */ html body.mobile-nav-ready .header .user-section, html body.mobile-nav-open .header .user-section, html body .header .user-section { display: flex !important; align-items: center !important; gap: 0.4rem !important; flex-shrink: 0 !important; visibility: visible !important; opacity: 1 !important; } html body.mobile-nav-ready .header .order-search-btn, html body.mobile-nav-open .header .order-search-btn, html body .header .order-search-btn, html body.mobile-nav-ready .header #td-header-cart-btn, html body.mobile-nav-open .header #td-header-cart-btn, html body .header #td-header-cart-btn, html body.mobile-nav-ready .header .td-header-cart-btn, html body.mobile-nav-open .header .td-header-cart-btn, html body .header .td-header-cart-btn, html body.mobile-nav-ready .header .theme-toggle, html body.mobile-nav-open .header .theme-toggle, html body .header .theme-toggle { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } } /* ORDER SEARCH POLISH v182 */ html body .header .order-search-dropdown, html body .order-search-dropdown { min-width: 400px !important; width: max(400px, min(440px, calc(100vw - 2rem))) !important; max-width: calc(100vw - 2rem) !important; max-height: calc(100dvh - var(--header-h, 64px) - 1.5rem) !important; max-height: calc(100vh - var(--header-h, 64px) - 1.5rem) !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior: contain !important; touch-action: pan-y !important; padding: 1.15rem 1.2rem 1.35rem !important; box-sizing: border-box !important; scrollbar-width: thin !important; scrollbar-color: rgba(148, 163, 184, 0.45) transparent !important; } html body .order-search-dropdown::-webkit-scrollbar { width: 5px !important; } html body .order-search-dropdown::-webkit-scrollbar-track { background: transparent !important; } html body .order-search-dropdown::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.45) !important; border-radius: 9999px !important; } html body .order-search-dropdown::-webkit-scrollbar-thumb:hover { background: rgba(100, 116, 139, 0.7) !important; } /* ===== Sipariş Sorgula konum TEK KAYNAK (relative ezmesini geri al) ===== */ html body .header .order-search-dropdown, html body .order-search-dropdown { position: absolute !important; top: calc(100% + 0.5rem) !important; left: 50% !important; right: auto !important; transform: translateX(-50%) translateY(-8px) !important; z-index: 1000005 !important; } @media (max-width: 768px) { html body .header .order-search-dropdown, html body .order-search-dropdown { position: fixed !important; top: calc(var(--header-h, 64px) + 0.55rem) !important; left: 0.75rem !important; right: 0.75rem !important; width: auto !important; min-width: 0 !important; max-width: 460px !important; margin-left: auto !important; margin-right: auto !important; max-height: calc(100dvh - var(--header-h, 64px) - 1.25rem) !important; max-height: calc(100vh - var(--header-h, 64px) - 1.25rem) !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior: contain !important; touch-action: pan-y !important; padding-bottom: 1.5rem !important; transform: none !important; z-index: 1000005 !important; } } /* ===== Sipariş Sorgula close TEK KAYNAK: düzgün daire ===== */ /* NOT: dropdown position burada ezilmez — absolute/fixed app.css + fitOrderSearchDropdown */ html body .order-search-close-btn, html body .order-search-dropdown .order-search-close-btn, html body .order-search-dropdown button.order-search-close-btn, html body .header .order-search-close-btn { position: absolute !important; top: 0.55rem !important; right: 0.55rem !important; width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; max-width: 32px !important; max-height: 32px !important; aspect-ratio: 1 / 1 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 50% !important; background: #eef2ff !important; color: #1d4ed8 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; box-sizing: border-box !important; flex-shrink: 0 !important; cursor: pointer !important; z-index: 5 !important; box-shadow: none !important; overflow: hidden !important; } /* ===== Sipariş Sorgula close MOBILE LOCK ===== */ @media (max-width: 768px) { html body button.order-search-close-btn, html body .order-search-dropdown button.order-search-close-btn, html body .header button.order-search-close-btn, html body button.order-search-close-btn.icon-only, html body button.persistent-order-close { width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; max-width: 32px !important; max-height: 32px !important; padding: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; padding-right: 0 !important; border-radius: 50% !important; aspect-ratio: 1 / 1 !important; line-height: 1 !important; box-sizing: border-box !important; } } html body .order-search-close-btn i, html body .order-search-dropdown .order-search-close-btn i { font-size: 14px !important; width: 14px !important; height: 14px !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; color: inherit !important; } html body .header .order-search-form h4 { margin: 0 0 0.45rem !important; } html body .header .order-search-hint, html body .order-search-hint { margin: 0 0 0.75rem !important; padding: 0 1.75rem !important; /* çarpı ile çakışmasın */ font-size: 0.72rem !important; font-weight: 500 !important; line-height: 1.35 !important; letter-spacing: 0.01em !important; color: #94a3b8 !important; text-align: center !important; text-wrap: unset !important; overflow-wrap: anywhere !important; word-break: normal !important; max-width: 22rem !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; opacity: 1 !important; } html body .header .order-search-form .form-group { margin-bottom: 0.75rem !important; } html body .header .order-search-form input, html body .header .order-search-form #orderNumber { border: 1px solid #cbd5e1 !important; outline: none !important; box-shadow: none !important; background: #f8fafc !important; height: 46px !important; min-height: 46px !important; border-radius: 12px !important; } html body .header .order-search-form input:focus, html body .header .order-search-form #orderNumber:focus { border: 1px solid #3b82f6 !important; outline: none !important; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.18) !important; } html body .header .order-search-form .search-btn { margin-top: 0.15rem !important; } @media (max-width: 480px) { html body .header .order-search-dropdown, html body .order-search-dropdown { min-width: 0 !important; width: auto !important; left: 0.5rem !important; right: 0.5rem !important; max-width: calc(100vw - 1rem) !important; padding-left: 0.95rem !important; padding-right: 0.95rem !important; } } /* ===== Order search result + Son Siparişlerim (shared card language) ===== */ #searchResult.od-result-card, #searchResult.show.od-result-card, #searchResult.show.success.od-result-card, #searchResult.show.error, .search-result.od-result-card, .search-result.show.od-result-card, .od-result-card.search-result { padding: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; margin-top: 0.85rem !important; text-align: left !important; } .od-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.08), 0 2px 6px -1px rgba(15, 23, 42, 0.04); transition: all 0.2s ease; } .od-card-muted { background: #f8fafc; color: #64748b; text-align: center; font-size: .88rem; padding: 1.25rem 1rem; } .od-card-head { display: flex; flex-direction: column; gap: 0.65rem; padding: 0.85rem 1rem; background: #f8fafc; border-bottom: 1px solid #e2e8f0; } .od-card-title-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; width: 100%; } .od-card-label-wrap { display: inline-flex; align-items: center; gap: 0.45rem; } .od-card-icon { font-size: 0.95rem; color: #2563eb; } .od-card-label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #475569; } .od-code-row { display: flex; align-items: center; gap: 0.5rem; width: 100%; } .od-card-head .od-code-row { justify-content: space-between; background: #ffffff; border: 1px solid #cbd5e1; border-radius: 10px; padding: 0.35rem 0.45rem 0.35rem 0.75rem; box-sizing: border-box; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03); } .od-card-head .od-code { flex: 1 1 auto; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-weight: 700; font-size: 0.88rem; color: #0f172a; background: transparent; border: none; padding: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: 0.02em; } .od-code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-weight: 700; font-size: 0.88rem; color: #0f172a; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 6px; padding: 0.2rem 0.45rem; } .od-copy-btn { flex-shrink: 0; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #e2e8f0; border-radius: 7px; background: #f8fafc; color: #475569; font-size: 0.82rem; cursor: pointer; transition: all 0.15s ease; } .od-copy-btn:hover { background: #2563eb; color: #ffffff; border-color: #2563eb; } .od-copy-btn.is-copied { background: #10b981 !important; color: #ffffff !important; border-color: #10b981 !important; } /* Badges */ .od-badge { display: inline-flex; align-items: center; gap: 0.35rem; max-width: 100%; padding: 0.24rem 0.65rem; border-radius: 999px; font-size: 0.74rem; font-weight: 700; line-height: 1.2; white-space: nowrap; } .od-badge-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; background: currentColor; } .od-badge-sm { font-size: 0.72rem; padding: 0.18rem 0.55rem; } .od-badge.is-success { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; } .od-badge.is-warn { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; } .od-badge.is-danger { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; } .od-badge.is-info { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; } /* Card Body */ .od-card-body { display: flex; flex-direction: column; padding: 0.5rem 1rem 0.75rem 1rem; background: #ffffff; } .od-row { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 0.75rem !important; padding: 0.55rem 0 !important; border-bottom: 1px solid #f1f5f9 !important; font-size: 0.86rem !important; min-height: 38px !important; box-sizing: border-box !important; } .od-row:last-child { border-bottom: none !important; padding-bottom: 0 !important; } .od-k { display: inline-flex !important; align-items: center !important; gap: 0.45rem !important; color: #64748b !important; font-weight: 500 !important; font-size: 0.84rem !important; text-align: left !important; white-space: nowrap !important; flex-shrink: 0 !important; } .od-k i { font-size: 0.82rem !important; color: #94a3b8 !important; width: 14px !important; text-align: center !important; } .od-v { color: #0f172a !important; font-weight: 600 !important; font-size: 0.875rem !important; text-align: right !important; word-break: normal !important; overflow-wrap: break-word !important; min-width: 0 !important; max-width: calc(100% - 110px) !important; display: inline-block !important; line-height: 1.35 !important; } .od-amount { font-variant-numeric: tabular-nums; color: #059669 !important; font-weight: 700 !important; font-size: 0.95rem !important; } .od-target-val { color: #2563eb !important; font-weight: 600 !important; word-break: normal !important; overflow-wrap: break-word !important; white-space: normal !important; } .od-service-val { word-break: normal !important; overflow-wrap: break-word !important; white-space: normal !important; } .od-subpkg { display: block !important; font-size: 0.78rem !important; font-weight: 500 !important; color: #64748b !important; margin-top: 2px !important; line-height: 1.25 !important; } .od-service-item { display: block !important; white-space: normal !important; line-height: 1.35 !important; } .od-service-item:not(:last-child) { margin-bottom: 2px !important; } .od-service-item:nth-child(even) { font-size: 0.84rem !important; color: #475569 !important; font-weight: 500 !important; } .od-date-val { color: #475569 !important; font-size: 0.82rem !important; font-weight: 500 !important; font-variant-numeric: tabular-nums !important; } .od-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; max-width: 180px; } .od-loading { display: inline-flex; align-items: center; gap: .5rem; color: #64748b; font-weight: 500; } .od-saved-wrap { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid #e5e7eb; } .od-saved-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .55rem; } .od-saved-title { margin: 0; font-size: .82rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: #64748b; } .od-clear-btn { background: transparent; border: none; color: #ef4444; font-size: .75rem; cursor: pointer; padding: 0; font-weight: 600; } .od-saved-list { display: flex; flex-direction: column; gap: .45rem; } .od-saved-item { cursor: pointer; } /* Dark Mode Enhancements for OD */ /* ========================================================================== */ /* §33. PLATFORM KARTLARI ALT METİNLERİ YAN YANA (TEK SATIR) DÜZENİ */ /* ========================================================================== */ html body .animated-platforms .services-grid { gap: clamp(0.5rem, 0.85vw, 0.75rem) !important; } html body .animated-platforms .service-item { padding: 1.35rem 0.35rem 1.15rem !important; } html body .animated-platforms .service-subtitle { white-space: nowrap !important; font-size: clamp(0.64rem, 0.72vw, 0.71rem) !important; letter-spacing: -0.015em !important; min-height: auto !important; margin-top: 0.25rem !important; text-align: center !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 100% !important; } @media (max-width: 768px) { html body .animated-platforms .services-grid { gap: 0.75rem !important; } html body .animated-platforms .service-item { padding: 1.25rem 0.5rem 1rem !important; } html body .animated-platforms .service-subtitle { font-size: 0.72rem !important; } } /* saved empty: superseded by polished block at EOF */ /* cart brand imgs: original colors, no filter */ html body .td-cart-platform-badge .td-cart-brand-img, html body .td-cart-platform-badge .td-cart-snapchat-logo { width: 22px !important; height: 22px !important; max-width: 22px !important; max-height: 22px !important; object-fit: contain !important; display: block !important; filter: none !important; -webkit-filter: none !important; opacity: 1 !important; mix-blend-mode: normal !important; border-radius: 0 !important; background: transparent !important; } /* cart badges: lock original brand colors (all platforms) */ html body .td-cart-platform-badge { width: 40px !important; height: 40px !important; min-width: 40px !important; max-width: 40px !important; min-height: 40px !important; max-height: 40px !important; aspect-ratio: 1 / 1 !important; border-radius: 50% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; overflow: hidden !important; filter: none !important; -webkit-filter: none !important; } html body .td-cart-platform-badge .td-cart-brand-fa, html body .td-cart-platform-badge > i.td-cart-brand-fa { color: #fff !important; -webkit-text-fill-color: #fff !important; font-size: 1.05rem !important; line-height: 1 !important; width: auto !important; height: auto !important; filter: none !important; opacity: 1 !important; background: none !important; text-shadow: none !important; } html body .td-cart-platform-badge .td-cart-brand-img, html body .td-cart-platform-badge .td-cart-kick-logo, html body .td-cart-platform-badge .td-cart-snapchat-logo { width: 20px !important; height: 20px !important; max-width: 20px !important; max-height: 20px !important; object-fit: contain !important; display: block !important; filter: none !important; -webkit-filter: none !important; opacity: 1 !important; mix-blend-mode: normal !important; border-radius: 0 !important; background: transparent !important; } html body .td-cart-platform-badge .td-cart-brand-svg, html body .td-cart-platform-badge .td-cart-brand-svg path { width: 18px !important; height: 18px !important; fill: #fff !important; color: #fff !important; filter: none !important; opacity: 1 !important; display: block !important; } /* snapchat logo: larger, centered, not filling box */ /* Platformlar grid — kutuyu kaplamadan ortalı büyüt */ html body .animated-platforms .platform-snapchat .service-icon > img.snapchat-img-icon, html body .animated-platforms .platform-snapchat .service-icon > img { width: 38px !important; height: 38px !important; max-width: 72% !important; max-height: 72% !important; object-fit: contain !important; object-position: center !important; margin: auto !important; border-radius: 50% !important; box-shadow: none !important; filter: none !important; -webkit-filter: none !important; } /* Footer — daire içinde ortalı, FA’dan biraz büyük (doldurmadan) */ html body .footer .footer-icon-circle img[src*="snapchat"] { width: 26px !important; height: 26px !important; max-width: 26px !important; max-height: 26px !important; object-fit: contain !important; object-position: center !important; margin: auto !important; border-radius: 50% !important; filter: none !important; -webkit-filter: none !important; } /* Sepet rozeti */ html body .td-cart-platform-badge .td-cart-snapchat-logo { width: 26px !important; height: 26px !important; max-width: 26px !important; max-height: 26px !important; object-fit: contain !important; margin: auto !important; filter: none !important; } /* cart body: items scroll, form stays usable */ html body .td-cart-card { max-height: min(90vh, 820px) !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } html body .td-cart-body { flex: 1 1 auto !important; min-height: 0 !important; overflow-x: hidden !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; display: block !important; /* flex column was shrinking items to 0 */ } html body .td-cart-items { display: flex !important; flex-direction: column !important; gap: 10px !important; max-height: min(42vh, 340px) !important; overflow-y: auto !important; overflow-x: hidden !important; margin-bottom: 14px !important; flex-shrink: 0 !important; min-height: 72px !important; } html body .td-cart-form-group { display: flex !important; flex-direction: column !important; gap: 12px !important; } html body .td-cart-footer { flex: 0 0 auto !important; } /* cart add feedback: toast error + btn pulse */ html body .td-cart-toast.td-cart-toast-error { background: #7f1d1d !important; border-color: #fecaca !important; } html body .td-cart-toast.td-cart-toast-error i { color: #fecaca !important; } html body .td-header-cart-btn.td-cart-btn-pulse { animation: tdCartBtnPulse 0.45s ease; } @keyframes tdCartBtnPulse { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } } /* cart legal checkboxes */ html body .td-cart-legal { display: flex; flex-direction: column; gap: 0.65rem; margin-top: 0.35rem; padding: 0.85rem 0.9rem; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; } html body .td-cart-legal-warn { margin: 0; font-size: 0.78rem; line-height: 1.45; color: #92400e; display: flex; gap: 0.45rem; align-items: flex-start; } html body .td-cart-legal-warn i { color: #d97706; margin-top: 0.15rem; flex-shrink: 0; } html body .td-cart-check { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.8rem; line-height: 1.45; color: #334155; cursor: pointer; margin: 0; font-weight: 500; } html body .td-cart-check input[type="checkbox"] { margin-top: 0.2rem; width: 16px; height: 16px; flex-shrink: 0; accent-color: #2563eb; cursor: pointer; } html body .td-cart-check a { color: #2563eb; text-decoration: underline; font-weight: 600; } html body .td-cart-check a:hover { color: #1d4ed8; } html body .td-cart-check-row { display: flex; flex-direction: column; gap: 0.4rem; } html body .td-cart-legal-links { margin: 0 0 0 1.55rem; font-size: 0.78rem; line-height: 1.5; color: #64748b; } html body .td-cart-legal-links a { color: #2563eb !important; text-decoration: underline !important; font-weight: 600 !important; pointer-events: auto !important; cursor: pointer !important; } html body .td-cart-legal-links a:hover { color: #1d4ed8 !important; } /* cart inline contract summaries (replaces redirect-only links) */ html body .td-cart-terms-box { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.1rem 0; padding: 0.55rem 0.6rem; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; } html body .td-cart-term { border: 1px solid #eef2f7; border-radius: 8px; background: #f8fafc; overflow: hidden; } html body .td-cart-term > summary { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; list-style: none; padding: 0.5rem 0.6rem; font-size: 0.8rem; font-weight: 600; color: #334155; } html body .td-cart-term > summary::-webkit-details-marker { display: none; } html body .td-cart-term > summary > i:first-child { color: #2563eb; flex-shrink: 0; width: 16px; text-align: center; } html body .td-cart-term > summary > span { flex: 1 1 auto; } html body .td-cart-term-caret { color: #94a3b8; font-size: 0.72rem; transition: transform 0.2s ease; } html body .td-cart-term[open] > summary { background: #eff6ff; } html body .td-cart-term[open] > summary .td-cart-term-caret { transform: rotate(180deg); } html body .td-cart-term-body { padding: 0.55rem 0.7rem 0.65rem; border-top: 1px solid #eef2f7; } html body .td-cart-term-body p { margin: 0 0 0.45rem; font-size: 0.76rem; line-height: 1.5; font-weight: 500; color: #475569; } html body .td-cart-term-body a { font-size: 0.75rem; font-weight: 700; color: #2563eb !important; text-decoration: none; } html body .td-cart-term-body a:hover { color: #1d4ed8 !important; text-decoration: underline; } /* cart legal warn one line */ html body .td-cart-legal-warn { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; font-size: 0.75rem !important; } @media (max-width: 520px) { html body .td-cart-legal-warn { white-space: normal !important; overflow: visible !important; text-overflow: unset !important; } } /* cart legal: no box */ html body .td-cart-legal { background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 0.35rem 0 0 !important; margin-top: 0.5rem !important; } /* ===== Son Siparişlerim — TEK KAYNAK (çakışma yok) ===== */ html body .od-saved-wrap { margin-top: 1rem !important; padding-top: 0.9rem !important; border-top: 1px solid #e5e7eb !important; } html body .od-saved-head { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 0.55rem !important; } html body .od-saved-title { margin: 0 !important; font-size: 0.78rem !important; font-weight: 800 !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; color: #64748b !important; } html body .od-clear-btn { width: 30px !important; height: 30px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 8px !important; color: #ef4444 !important; background: rgba(239, 68, 68, 0.08) !important; border: none !important; cursor: pointer !important; padding: 0 !important; font-size: 0.85rem !important; } html body .od-clear-btn:hover { background: rgba(239, 68, 68, 0.15) !important; } html body .od-saved-list { display: flex !important; flex-direction: column !important; gap: 0.45rem !important; } html body .od-saved-item { display: flex !important; flex-direction: column !important; gap: 0.25rem !important; background: #f8fafc !important; border: 1px solid #eef2f7 !important; border-radius: 10px !important; box-shadow: none !important; padding: 0.65rem 0.75rem !important; cursor: pointer !important; transition: background 0.15s ease, border-color 0.15s ease !important; transform: none !important; } html body .od-saved-item:hover { background: #f1f5f9 !important; border-color: #e2e8f0 !important; box-shadow: none !important; padding: 0.65rem 0.75rem !important; transform: none !important; } html body .od-saved-item .od-code-row { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 0.35rem !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } html body .od-saved-item .od-code { flex: 0 1 auto !important; width: auto !important; max-width: calc(100% - 6.5rem) !important; min-width: 0 !important; background: transparent !important; border: none !important; padding: 0 !important; margin: 0 !important; border-radius: 0 !important; color: #047857 !important; font-size: 0.92rem !important; font-weight: 800 !important; line-height: 1.2 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } html body .od-saved-item .od-copy-btn { flex: 0 0 20px !important; width: 20px !important; height: 20px !important; min-width: 20px !important; padding: 0 !important; margin: 0 !important; border: none !important; border-radius: 6px !important; background: transparent !important; color: #94a3b8 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; font-size: 0.65rem !important; position: static !important; float: none !important; transition: color 0.15s ease, background 0.15s ease !important; } html body .od-saved-item .od-copy-btn i { font-size: 0.65rem !important; } html body .od-saved-item .od-copy-btn:hover { color: #059669 !important; background: rgba(16, 185, 129, 0.12) !important; } html body .od-saved-item .od-copy-btn.is-copied { color: #2563eb !important; background: rgba(37, 99, 235, 0.12) !important; } html body .od-saved-item .od-code-row > .od-saved-date { margin-left: auto !important; flex: 0 0 auto !important; font-size: 0.75rem !important; font-weight: 500 !important; color: #94a3b8 !important; white-space: nowrap !important; line-height: 1.2 !important; } html body .od-saved-meta { display: flex !important; align-items: center !important; margin-top: 0 !important; font-size: 0.75rem !important; color: #94a3b8 !important; min-width: 0 !important; width: 100% !important; } html body .od-saved-pkg { min-width: 0 !important; flex: 1 1 auto !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; line-clamp: 2 !important; overflow: hidden !important; white-space: normal !important; text-overflow: clip !important; word-break: break-word !important; line-height: 1.35 !important; } /* html body .od-saved-empty-text — superseded by polished block at EOF */ /* ========================================================================== */ /* §34. ULTRA-MODERN EVRENSEL BİLDİRİM TOAST SİSTEMİ */ /* ========================================================================== */ .td-universal-toast, .td-cart-toast { position: fixed !important; top: 24px !important; right: 24px !important; left: auto !important; bottom: auto !important; z-index: 10000005 !important; display: flex !important; align-items: flex-start !important; gap: 12px !important; padding: 14px 16px !important; border-radius: 16px !important; background: rgba(15, 23, 42, 0.94) !important; color: #ffffff !important; box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.5), 0 4px 14px rgba(0, 0, 0, 0.2) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; max-width: 440px !important; width: auto !important; min-width: 300px !important; opacity: 0 !important; visibility: hidden !important; transform: translateY(-16px) scale(0.96) !important; transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1), transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.28s !important; pointer-events: none !important; font-family: inherit !important; } .td-universal-toast.is-visible, .td-cart-toast.is-visible { opacity: 1 !important; visibility: visible !important; transform: translateY(0) scale(1) !important; pointer-events: auto !important; } /* Toast Icon Wrap */ .td-universal-toast .td-toast-icon-wrap { width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; border-radius: 10px !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; font-size: 1.1rem !important; } /* Toast Content */ .td-universal-toast .td-toast-content { flex: 1 1 auto !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 3px !important; } .td-universal-toast .td-toast-title { font-size: 0.92rem !important; font-weight: 700 !important; color: #f8fafc !important; line-height: 1.3 !important; } .td-universal-toast .td-toast-desc { font-size: 0.83rem !important; font-weight: 500 !important; color: #cbd5e1 !important; line-height: 1.45 !important; word-break: break-word !important; } /* Toast Close Button */ .td-universal-toast .td-toast-close { background: transparent !important; border: none !important; color: rgba(255, 255, 255, 0.5) !important; cursor: pointer !important; width: 26px !important; height: 26px !important; border-radius: 6px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 0.85rem !important; transition: all 0.15s ease !important; margin: -2px -4px 0 0 !important; flex-shrink: 0 !important; } .td-universal-toast .td-toast-close:hover { background: rgba(255, 255, 255, 0.15) !important; color: #ffffff !important; } /* Types */ /* 1. Success */ .td-universal-toast.td-toast-success, .td-cart-toast:not(.td-cart-toast-error) { border: 1px solid rgba(16, 185, 129, 0.3) !important; border-left: 4px solid #10b981 !important; } .td-universal-toast.td-toast-success .td-toast-icon-wrap, .td-cart-toast:not(.td-cart-toast-error) i { background: rgba(16, 185, 129, 0.18) !important; color: #10b981 !important; } /* 2. Error */ .td-universal-toast.td-toast-error, .td-cart-toast.td-cart-toast-error { border: 1px solid rgba(239, 68, 68, 0.35) !important; border-left: 4px solid #ef4444 !important; background: rgba(15, 23, 42, 0.96) !important; } .td-universal-toast.td-toast-error .td-toast-icon-wrap, .td-cart-toast.td-cart-toast-error i { background: rgba(239, 68, 68, 0.18) !important; color: #ef4444 !important; } /* 3. Info */ .td-universal-toast.td-toast-info { border: 1px solid rgba(59, 130, 246, 0.3) !important; border-left: 4px solid #3b82f6 !important; } .td-universal-toast.td-toast-info .td-toast-icon-wrap { background: rgba(59, 130, 246, 0.18) !important; color: #3b82f6 !important; } /* Mobil Uyum (Ekranın üst ortasında temiz banner) */ @media (max-width: 640px) { .td-universal-toast, .td-cart-toast { top: 16px !important; right: 16px !important; left: 16px !important; max-width: none !important; min-width: 0 !important; width: auto !important; transform: translateY(-20px) !important; } .td-universal-toast.is-visible, .td-cart-toast.is-visible { transform: translateY(0) !important; } } /* === Cart header polish + fly animation (v171) === */ html body .td-header-cart-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.45rem !important; position: relative !important; margin-left: 0.35rem !important; height: 40px !important; min-height: 40px !important; padding: 0 0.95rem !important; border-radius: 999px !important; border: 1px solid rgba(37, 99, 235, 0.35) !important; background: linear-gradient(135deg, #3b82f6 0%, #2563eb 55%, #1d4ed8 100%) !important; color: #fff !important; font-weight: 700 !important; font-size: 0.875rem !important; letter-spacing: 0.01em !important; cursor: pointer !important; pointer-events: auto !important; z-index: 1000005 !important; box-shadow: 0 4px 14px rgba(37, 99, 235, 0.32), inset 0 1px 0 rgba(255,255,255,0.18) !important; transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease !important; text-decoration: none !important; flex-shrink: 0 !important; /* CLS sabitleme: JS ile eklenmeden once de yer ayrilir */ min-width: 100px !important; } /* ===== Navbar Sipariş Sorgula + Sepet hover TEK KAYNAK (aynı animasyon) ===== */ html body .header .order-search-btn, html body .order-search-btn, html body .td-header-cart-btn { transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, background 0.2s ease !important; } html body .header .order-search-btn:hover, html body .order-search-btn:hover, html body .td-header-cart-btn:hover { transform: translateY(-1px) !important; filter: brightness(1.05) !important; box-shadow: 0 8px 20px rgba(37, 99, 235, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important; background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 55%, #2563eb 100%) !important; color: #fff !important; } html body .header .order-search-btn:active, html body .order-search-btn:active, html body .td-header-cart-btn:active { transform: translateY(0) scale(0.98) !important; filter: none !important; } @media (hover: none) { html body .header .order-search-btn:hover, html body .order-search-btn:hover, html body .td-header-cart-btn:hover { transform: none !important; filter: none !important; } } html body .td-header-cart-btn:hover { transform: translateY(-1px) !important; filter: brightness(1.05); box-shadow: 0 8px 20px rgba(37, 99, 235, 0.4), inset 0 1px 0 rgba(255,255,255,0.22) !important; background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 55%, #2563eb 100%) !important; color: #fff !important; } html body .td-header-cart-btn:active { transform: translateY(0) scale(0.98) !important; } /* ===== Navbar CLS sabitleme (v266): sayfa gecisinde buton carpismasini engelle ===== - Desktop: user-section'a her iki buton icin min-width rezerve et - Mobile: cart butonunu siparis-arama ile ayni 42px daireye donustur */ html body .header .user-section { min-width: 240px !important; /* order-search (~132px max) + cart (~100px) + gap (~8px) */ } @media (max-width: 1024px) { html body .header .user-section { min-width: 96px !important; /* 42px order-search + 42px cart + gap (8px) + margin (4px) */ } } @media (max-width: 768px) { html body .header .user-section { width: 92px !important; min-width: 92px !important; gap: 0.35rem !important; } html body .td-header-cart-btn { width: 42px !important; min-width: 42px !important; max-width: 42px !important; height: 42px !important; min-height: 42px !important; max-height: 42px !important; padding: 0 !important; margin-left: 0 !important; border-radius: 10px !important; font-size: 0 !important; gap: 0 !important; } html body .td-header-cart-btn .td-header-cart-label, html body .td-header-cart-btn .td-header-cart-badge { display: none !important; } html body .td-header-cart-btn i { margin: 0 !important; font-size: 1rem !important; line-height: 1 !important; } } @media (max-width: 374px) { html body .header .user-section { width: 84px !important; min-width: 84px !important; } html body .td-header-cart-btn, html body .header .order-search-container { width: 40px !important; min-width: 40px !important; max-width: 40px !important; height: 40px !important; min-height: 40px !important; } } /* ===== Footer CLS sabitleme (v266): font FOUT + yuklenmeden once boyut sabitligi ===== - Web font Inter yuklenmeden once fallback genislik farki yuzunden satir kirilma kayabilir - Footer-description min-height ile yer ayrilir - Footer-logo h3 + footer h4 boyutlari sabitlenir - Ikon daireleri zaten sabit (38px / 32px) - Img/SVG zaten explicit boyutlara sahip */ html body .footer { min-height: 220px !important; /* footer genel min yukseklik */ /* v283: contain:layout kaldirildi — footer subtree'sinin scroll-anchor adayi olmasi gerekiyor (ustte buyumeyi tarayici telafi etsin). */ } html body .footer .footer-content { min-height: 180px !important; } html body .footer .footer-about { min-height: 140px !important; } html body .footer .footer-description { /* 3 satirlik min yukseklik (line-height:1.55 ~ 24px/satir * 3 = ~72px) */ min-height: 4.5em !important; overflow: hidden !important; } html body .footer .footer-logo h3 { min-height: 1.4em !important; line-height: 1.4 !important; } html body .footer .footer-section h4 { min-height: 1.6em !important; line-height: 1.6 !important; overflow: hidden !important; } html body .footer .footer-section ul li a { min-height: 38px !important; box-sizing: border-box !important; } html body .footer .footer-icon-circle { /* Zaten 38x38 / 32x32 ama explicit olarak yeniden sabitle */ flex-shrink: 0 !important; flex-grow: 0 !important; } html body .footer .footer-icon-circle img, html body .footer .footer-icon-circle svg { display: block !important; /* baseline shift engellenir */ } html body .footer .footer-copyright, html body .footer .copyright-text { min-height: 1.4em !important; line-height: 1.4 !important; } @media (max-width: 768px) { html body .footer { min-height: 320px !important; /* mobilde daha uzun (tek sutun) */ } html body .footer .footer-content { min-height: 280px !important; } html body .footer .footer-about { min-height: 180px !important; } } html body .td-header-cart-btn i { color: #fff !important; font-size: 0.95rem !important; } html body .td-header-cart-badge { position: absolute !important; top: -7px !important; right: -7px !important; min-width: 18px !important; height: 18px !important; padding: 0 5px !important; border-radius: 999px !important; background: #ef4444 !important; color: #fff !important; font-size: 0.68rem !important; font-weight: 800 !important; display: none !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; border: 2px solid #fff !important; box-shadow: 0 2px 6px rgba(239, 68, 68, 0.45) !important; } html body .td-header-cart-badge.is-visible { display: inline-flex !important; } html body .td-header-cart-btn.td-cart-btn-pulse { animation: tdCartBtnPulse 0.45s ease !important; } @keyframes tdCartBtnPulse { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } } .td-header-cart-badge.td-pulse { animation: tdCartBadgePulse 0.45s ease; } .td-cart-flyer { position: fixed; z-index: 1000005; width: 28px; height: 28px; border-radius: 999px; background: linear-gradient(135deg, #3b82f6, #1d4ed8); color: #fff; display: flex; align-items: center; justify-content: center; pointer-events: none; box-shadow: 0 8px 20px rgba(37, 99, 235, 0.45); transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.65s ease; opacity: 1; font-size: 0.75rem; } @media (max-width: 900px) { html body .td-header-cart-btn .td-header-cart-label { display: none !important; } html body .td-header-cart-btn { padding: 0 0.7rem !important; min-width: 40px !important; } } @media (prefers-reduced-motion: reduce) { .td-cart-flyer { display: none !important; } html body .td-header-cart-btn.td-cart-btn-pulse, .td-header-cart-badge.td-pulse { animation: none !important; } } /* ========================================================================== */ /* §35. MOBİL BANNER PLATFORM LOGO ROZETİ (SERVİS BANNERLARIYLA BİREBİR AYNI) */ /* ========================================================================== */ /* Varsayılan / Masaüstünde rozeti tamamen gizle (SADECE TELEFON İÇİN) */ .banner-platform-badge { display: none !important; } .banner-platform-badge-inner { width: 64px !important; height: 64px !important; border-radius: 50% !important; /* Servis banner'ları ile birebir aynı: Kusursuz Daire */ background: #ffffff !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), inset 0 0 0 3px rgba(255, 255, 255, 0.6) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; box-sizing: border-box !important; margin: 0 auto !important; transition: transform 0.25s ease !important; } .banner-platform-badge-inner i { line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; opacity: 1 !important; filter: none !important; } .banner-platform-badge-inner svg, .banner-platform-badge-inner img { width: 34px !important; height: 34px !important; max-width: 34px !important; max-height: 34px !important; object-fit: contain !important; display: block !important; filter: none !important; /* Hiçbir renk filtresi uygulanmaz, %100 orijinal logo */ } /* Snapchat özel: Servis sayfasındaki gibi sarı daire snapchat rozeti */ .banner-platform-badge-inner.snapchat-badge { background: transparent !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important; border: none !important; padding: 0 !important; overflow: hidden !important; } .banner-platform-badge-inner.snapchat-badge img, .banner-platform-badge-inner.snapchat-badge img.snapchat-img-icon { width: 100% !important; height: 100% !important; max-width: 64px !important; max-height: 64px !important; border-radius: 50% !important; object-fit: contain !important; display: block !important; box-shadow: none !important; } /* ===== Banner logo TEK KAYNAK: servis = paket (mobil, AYNI BOYUT) ===== */ @media (max-width: 1024px) { /* Ortak daire: 64x64 */ html body .platform-page-header .platform-logo-large, html body .page-header .banner-platform-badge-inner { width: 64px !important; height: 64px !important; min-width: 64px !important; min-height: 64px !important; max-width: 64px !important; max-height: 64px !important; margin: 0 auto 12px auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: #ffffff !important; border-radius: 50% !important; padding: 0 !important; box-sizing: border-box !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), inset 0 0 0 3px rgba(255, 255, 255, 0.6) !important; overflow: hidden !important; } /* Ortak ikon: 34px (inline style ezilsin) */ html body .platform-page-header .platform-logo-large i, html body .page-header .banner-platform-badge-inner i { font-size: 34px !important; width: 34px !important; height: 34px !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; opacity: 1 !important; filter: none !important; } html body .platform-page-header .platform-logo-large svg, html body .platform-page-header .platform-logo-large img, html body .page-header .banner-platform-badge-inner svg, html body .page-header .banner-platform-badge-inner img { width: 34px !important; height: 34px !important; max-width: 34px !important; max-height: 34px !important; object-fit: contain !important; display: block !important; filter: none !important; } /* Snapchat PNG: daireyi doldurur (servis + paket ayni) */ html body .platform-page-header .platform-logo-large.snapchat-badge, html body .platform-page-header .platform-logo-large:has(> img.snapchat-img-icon), html body .page-header .banner-platform-badge-inner.snapchat-badge { background: transparent !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important; border: none !important; } html body .platform-page-header .platform-logo-large.snapchat-badge img, html body .platform-page-header .platform-logo-large img.snapchat-img-icon, html body .page-header .banner-platform-badge-inner.snapchat-badge img, html body .page-header .banner-platform-badge-inner.snapchat-badge img.snapchat-img-icon { width: 100% !important; height: 100% !important; max-width: 64px !important; max-height: 64px !important; border-radius: 50% !important; object-fit: contain !important; box-shadow: none !important; } html body .platform-page-header .platform-logo-large.tiktok-large i, html body .platform-page-header .platform-logo-large i.fab.fa-tiktok, html body .page-header .banner-platform-badge-inner i.fab.fa-tiktok { font-size: 34px !important; color: #000000 !important; -webkit-text-fill-color: #000000 !important; text-shadow: 2px 2px 0 #25F4EE, -2px -2px 0 #FE2C55 !important; } } /* === Cart mobile squircle match (v172) === */ @media (max-width: 900px) { html body .td-header-cart-btn { width: 42px !important; min-width: 42px !important; max-width: 42px !important; height: 42px !important; min-height: 42px !important; padding: 0 !important; margin-left: 0 !important; gap: 0 !important; border-radius: 10px !important; flex: 0 0 42px !important; } html body .td-header-cart-btn .td-header-cart-label { display: none !important; } html body .td-header-cart-btn i { margin: 0 !important; font-size: 1rem !important; } html body .td-header-cart-badge { top: -6px !important; right: -6px !important; } } /* === Mobile tap / sticky-hover layout stability (v173) === */ /* Empty footer taps + iOS sticky :hover were shifting layout. */ html body .footer, html body .footer .footer-content, html body .footer .footer-section { -webkit-tap-highlight-color: transparent !important; } html body .footer .footer-logo:focus, html body .footer .footer-logo:focus-visible { outline: none !important; box-shadow: none !important; transform: none !important; } /* Keep footer link geometry identical across hover/focus/active (touch sticky-hover). */ @media (max-width: 1024px) { html body .footer .footer-section ul li a, html body .footer .footer-section ul li a:hover, html body .footer .footer-section ul li a:focus, html body .footer .footer-section ul li a:focus-visible, html body .footer .footer-section ul li a:active, html body .footer .footer-section ul li:hover, html body .footer .footer-section ul li:focus-within { transform: none !important; translate: none !important; top: auto !important; bottom: auto !important; margin-top: 0 !important; margin-bottom: 0 !important; } html body .footer .footer-section ul li a:hover, html body .footer .footer-section ul li a:focus, html body .footer .footer-section ul li a:active { /* color-only feedback; no size/position change */ filter: none !important; } } /* Hover motion only for real mouse/trackpad — prevents sticky-hover jump on touch. */ @media (hover: hover) and (pointer: fine) { /* intentionally empty gate: below we RESET touch hover motion */ } @media (hover: none), (pointer: coarse) { html body .service-card:hover, html body .service-item:hover, html body .package-card:hover, html body .package-btn:hover, html body .pricing-card:hover, html body .pricing-card.featured:hover, html body .btn-primary:hover, html body .btn-secondary:hover, html body .campaign-cta .btn:hover, html body .animated-platforms .service-item:hover, html body .platform-card:hover, html body .card:hover { transform: none !important; } html body .service-card:hover .service-icon, html body .service-item:hover .service-icon, html body .service-item:hover i, html body .animated-platforms .service-item:hover .service-icon, html body .dropdown-item:hover .fab, html body .dropdown-item:hover i { transform: none !important; } /* Header dropdown sticky-hover flash on touch */ html body .header .dropdown:hover .dropdown-menu:not(.show) { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: none !important; } } /* od-clear icon btn */ html body .od-clear-btn { width: 30px !important; height: 30px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; border-radius: 8px !important; color: #ef4444 !important; background: transparent !important; border: none !important; cursor: pointer !important; font-size: 0.85rem !important; } html body .od-clear-btn:hover { background: rgba(239, 68, 68, 0.1) !important; color: #dc2626 !important; } html body .od-clear-btn i { pointer-events: none !important; } /* === Mobile selection / long-press layout lock (v174) === */ /* Long-press empty footer was selecting text + shifting columns left. */ html body .footer, html body .footer * { -webkit-user-select: none !important; user-select: none !important; -webkit-touch-callout: none !important; -webkit-tap-highlight-color: transparent !important; } /* Keep real controls selectable only where typing is needed (none in footer). */ html body .footer input, html body .footer textarea { -webkit-user-select: text !important; user-select: text !important; } /* Same class of bug: decorative grids / icon labels on mobile */ @media (max-width: 1024px) { html body .animated-platforms, html body .animated-platforms *, html body .platforms-grid, html body .platforms-grid *, html body .services-grid .service-card, html body .services-grid .service-card *, html body .packages-grid .package-card, html body .packages-grid .package-card h3, html body .packages-grid .package-card p, html body .header .nav, html body .header .nav * { -webkit-user-select: none !important; user-select: none !important; -webkit-touch-callout: none !important; } } /* Footer scroll pass-through and containment fix */ html body .footer, html body .footer .footer-content { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } html body .footer { -webkit-tap-highlight-color: transparent !important; width: 100% !important; max-width: 100% !important; overscroll-behavior: auto !important; /* manipulation disables the double-tap-to-zoom ghost reflow that made the footer contents jump on tap (phone/tablet). Panning/scroll still works. */ touch-action: manipulation !important; contain: none !important; } html body .footer, html body .footer * { -webkit-user-select: none !important; user-select: none !important; -webkit-touch-callout: none !important; -webkit-tap-highlight-color: transparent !important; } html body .footer, html body .footer *, html body .footer *:hover, html body .footer *:active, html body .footer *:focus, html body .footer *:focus-visible { transform: none !important; translate: none !important; scale: none !important; transition: none !important; animation: none !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; } html body .footer .footer-content, html body .footer .footer-section, html body .footer .footer-section ul, html body .footer .footer-section ul li, html body .footer .footer-section ul li a { position: relative !important; will-change: auto !important; backface-visibility: hidden !important; } html body .footer .footer-content { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow: visible !important; } @media (max-width: 768px) { html body .footer .footer-content { display: grid !important; grid-template-columns: 1fr !important; justify-items: center !important; align-items: start !important; text-align: center !important; gap: 1.75rem !important; } html body .footer .footer-about, html body .footer .footer-content > .footer-section:nth-child(2), html body .footer .footer-content > .footer-section:nth-child(3) { grid-column: 1 !important; width: 100% !important; max-width: 380px !important; margin: 0 auto !important; justify-self: center !important; } html body .footer .footer-section ul { width: 100% !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; } html body .footer .footer-section ul li a { min-height: 44px !important; box-sizing: border-box !important; } } /* kill selection pseudo UI shifting */ html body .footer ::selection { background: transparent !important; color: inherit !important; } /* ========== SITEWIDE MOBILE NO-DANCE v175 ========== */ @media (max-width: 1024px) { html, body { overflow-x: hidden !important; overscroll-behavior-x: none !important; -webkit-text-size-adjust: 100% !important; } html body .service-card, html body .package-card, html body .pricing-card, html body .platform-card, html body .animated-platforms .service-item { -webkit-user-select: none !important; user-select: none !important; -webkit-touch-callout: none !important; } html body .service-card, html body .service-card:hover, html body .service-card:active, html body .package-card, html body .package-card:hover, html body .package-card:active, html body .pricing-card, html body .pricing-card:hover, html body .pricing-card:active, html body .platform-card, html body .platform-card:hover, html body .platform-card:active, html body .animated-platforms .service-item, html body .animated-platforms .service-item:hover, html body .animated-platforms .service-item:active { transform: none !important; transition: none !important; } } /* ===== Sepet satir TEK KAYNAK (mobil) ===== */ @media (max-width: 640px) { html body .td-cart-item { display: grid !important; grid-template-columns: 40px minmax(0, 1fr) 36px !important; grid-template-areas: "badge meta remove" "qty qty total" !important; column-gap: 0.55rem !important; row-gap: 0.55rem !important; align-items: center !important; padding: 0.75rem 0.7rem !important; } html body .td-cart-item > .td-cart-platform-badge { grid-area: badge !important; width: 40px !important; height: 40px !important; flex-shrink: 0 !important; } html body .td-cart-item > .td-cart-item-meta { grid-area: meta !important; min-width: 0 !important; max-width: 100% !important; } html body .td-cart-item .td-cart-item-name { white-space: normal !important; overflow: visible !important; text-overflow: unset !important; word-break: break-word !important; line-height: 1.25 !important; font-size: 0.86rem !important; } html body .td-cart-item .td-cart-item-unit { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; font-size: 0.75rem !important; } html body .td-cart-item > .td-cart-item-qty { grid-area: qty !important; justify-self: start !important; min-width: 0 !important; width: auto !important; } html body .td-cart-item > .td-cart-item-line-total { grid-area: total !important; justify-self: end !important; text-align: right !important; white-space: nowrap !important; font-variant-numeric: tabular-nums !important; font-size: 0.9rem !important; } html body .td-cart-item > .td-cart-item-remove { grid-area: remove !important; justify-self: end !important; align-self: start !important; } /* Modal biraz daha nefes alsin */ html body .td-cart-modal, html body .td-cart-panel, html body #tdCartModal .td-cart-dialog, html body .td-cart-sheet { max-width: calc(100vw - 1rem) !important; } } @media (min-width: 641px) and (max-width: 900px) { html body .td-cart-item { grid-template-columns: 44px minmax(0, 1fr) auto auto auto !important; column-gap: 0.5rem !important; } html body .td-cart-item .td-cart-item-name { white-space: normal !important; overflow: hidden !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; line-clamp: 2 !important; -webkit-box-orient: vertical !important; } } /* ===== Breadcrumb TEK KAYNAK (geri butonu yerine, tüm görünümler) ===== */ html body .td-breadcrumb { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 0.35rem 0.45rem !important; margin: 0.85rem 0 0.95rem !important; padding: 0.55rem 0.75rem !important; max-width: 100% !important; box-sizing: border-box !important; background: rgba(248, 250, 252, 0.92) !important; border: 1px solid #e2e8f0 !important; border-radius: 12px !important; font-size: 0.84rem !important; line-height: 1.35 !important; color: #64748b !important; position: relative !important; z-index: 5 !important; } html body .td-breadcrumb .td-bc-link { color: #2563eb !important; text-decoration: none !important; font-weight: 600 !important; max-width: 42vw !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } html body .td-breadcrumb .td-bc-link:hover { text-decoration: underline !important; color: #1d4ed8 !important; } html body .td-breadcrumb .td-bc-sep { color: #94a3b8 !important; font-weight: 500 !important; user-select: none !important; flex: 0 0 auto !important; } html body .td-breadcrumb .td-bc-current { color: #0f172a !important; font-weight: 700 !important; max-width: min(100%, 52vw) !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } html body .corporate-content .td-breadcrumb { margin: 0 0 1.1rem !important; } @media (max-width: 640px) { html body .td-breadcrumb { margin: 0.65rem 0 0.8rem !important; padding: 0.5rem 0.65rem !important; font-size: 0.78rem !important; gap: 0.28rem 0.35rem !important; border-radius: 10px !important; } html body .td-breadcrumb .td-bc-link { max-width: 34vw !important; } html body .td-breadcrumb .td-bc-current { max-width: 58vw !important; } } /* Eski geri butonu kalıntısı varsa gizle */ html body .back-btn, html body button.back-btn, html body a.back-btn { display: none !important; } /* ===== Paket grid TABLET TEK KAYNAK: 641–1080 = 2 sütun (app.css 768 ezmesini yener) ===== */ @media (min-width: 641px) and (max-width: 1080px) { html body .main-content > .container > .packages-grid, html body .packages-grid { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: center !important; align-items: stretch !important; gap: 1rem !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } html body .main-content > .container > .packages-grid > .package-card, html body .packages-grid > .package-card, html body .main-content > .container > .packages-grid > .package-card:first-child:nth-last-child(n), html body .main-content > .container > .packages-grid > .package-card:first-child:nth-last-child(n) ~ .package-card { flex: 0 1 calc((100% - 1rem) / 2) !important; flex-basis: calc((100% - 1rem) / 2) !important; flex-grow: 0 !important; flex-shrink: 1 !important; width: calc((100% - 1rem) / 2) !important; max-width: calc((100% - 1rem) / 2) !important; min-width: 0 !important; } } @media (max-width: 640px) { html body .main-content > .container > .packages-grid > .package-card, html body .packages-grid > .package-card { flex: 1 1 100% !important; flex-basis: 100% !important; width: 100% !important; max-width: 100% !important; } } /* ========================================================================== */ /* Son Siparişlerim — boş durum (cila) */ /* ========================================================================== */ html body .od-saved-empty { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 0.35rem !important; margin: 0.15rem 0 0 !important; padding: 1rem 0.85rem !important; text-align: center !important; background: #f8fafc !important; border: 1px dashed #e2e8f0 !important; border-radius: 12px !important; box-shadow: none !important; } html body .od-saved-empty-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 2.4rem !important; height: 2.4rem !important; border-radius: 999px !important; background: #ecfdf5 !important; color: #059669 !important; font-size: 1rem !important; margin-bottom: 0.15rem !important; } html body .od-saved-empty-text, html body .od-card.od-saved-empty, html body .od-saved-empty.od-card { margin: 0 !important; padding: 0 !important; font-size: 0.9rem !important; font-weight: 600 !important; line-height: 1.35 !important; color: #475569 !important; text-align: center !important; background: none !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; opacity: 1 !important; text-shadow: none !important; } html body .od-saved-empty-hint { margin: 0 !important; padding: 0 !important; font-size: 0.78rem !important; font-weight: 500 !important; line-height: 1.35 !important; color: #64748b !important; max-width: 16rem !important; } /* ===== Panel close UNIFIED CIRCLE ===== */ html body .order-search-close-btn, html body .order-search-dropdown .order-search-close-btn, html body .order-search-dropdown button.order-search-close-btn, html body .header .order-search-close-btn, html body .td-cart-close, html body button.td-cart-close, html body .td-cart-panel .td-cart-close { width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; max-width: 32px !important; max-height: 32px !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 50% !important; aspect-ratio: 1 / 1 !important; background: #eef2ff !important; color: #1d4ed8 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; box-sizing: border-box !important; flex-shrink: 0 !important; cursor: pointer !important; box-shadow: none !important; overflow: hidden !important; font-size: 14px !important; } html body .order-search-close-btn i, html body .td-cart-close i { font-size: 14px !important; width: 14px !important; height: 14px !important; line-height: 1 !important; margin: 0 !important; padding: 0 !important; color: inherit !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } html body .order-search-close-btn:hover, html body .td-cart-close:hover { background: #e0e7ff !important; color: #1e40af !important; } @media (max-width: 768px) { html body button.order-search-close-btn, html body button.td-cart-close, html body .td-cart-close.icon-only, html body .order-search-close-btn.icon-only { width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; max-width: 32px !important; max-height: 32px !important; padding: 0 !important; border-radius: 50% !important; } } /* ===== Kurumsal dropdown TABLET 2 sütun ===== */ /* Platformlar nth-child(10) kuralına girmez; kurumsal.html linkiyle hedeflenir */ @media (min-width: 641px) and (max-width: 1024px) { /* Açıkken parent dropdown da tam genişlik (Platformlar ile aynı mantık) */ html body .header .dropdown.show:has(> .dropdown-menu a[href="kurumsal.html"]), html body.mobile-nav-ready .header .header-content .dropdown.show:has(> .dropdown-menu a[href="kurumsal.html"]), html body.mobile-nav-open .header .header-content .dropdown.show:has(> .dropdown-menu a[href="kurumsal.html"]) { width: 100% !important; max-width: 100% !important; } html body .header .dropdown-menu.show:has(a[href="kurumsal.html"]), html body .header .dropdown.show > .dropdown-menu:has(a[href="kurumsal.html"]), html body.mobile-nav-ready .header .header-content .dropdown-menu.show:has(a[href="kurumsal.html"]), html body.mobile-nav-open .header .header-content .dropdown-menu.show:has(a[href="kurumsal.html"]), html body.mobile-nav-ready .header .header-content .dropdown.show > .dropdown-menu:has(a[href="kurumsal.html"]), html body.mobile-nav-open .header .header-content .dropdown.show > .dropdown-menu:has(a[href="kurumsal.html"]) { display: grid !important; grid-template-columns: 1fr 1fr !important; justify-content: stretch !important; align-items: stretch !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; column-gap: 0.4rem !important; row-gap: 2px !important; gap: 2px 0.4rem !important; padding: 0.45rem 0.5rem !important; } html body .header .dropdown-menu.show:has(a[href="kurumsal.html"]) .dropdown-item, html body .header .dropdown.show > .dropdown-menu:has(a[href="kurumsal.html"]) .dropdown-item, html body.mobile-nav-ready .header .header-content .dropdown-menu.show:has(a[href="kurumsal.html"]) .dropdown-item, html body.mobile-nav-open .header .header-content .dropdown-menu.show:has(a[href="kurumsal.html"]) .dropdown-item { width: auto !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; padding: 0.55rem 0.55rem !important; white-space: normal !important; line-height: 1.25 !important; box-sizing: border-box !important; } html body .header .dropdown-menu.show:has(a[href="kurumsal.html"]) .dropdown-close-btn, html body.mobile-nav-ready .header .header-content .dropdown-menu.show:has(a[href="kurumsal.html"]) .dropdown-close-btn { grid-column: 1 / -1 !important; } } /* ===== FAQ responsive text (tablet/phone) ===== */ /* Sadece metin okunaklılığı — kutu padding/grid’e dokunma */ @media (max-width: 1024px) { html body .faq-question h3 { flex: 1 1 auto !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; padding-right: 0.65rem !important; font-size: 0.95rem !important; font-weight: 600 !important; line-height: 1.4 !important; letter-spacing: -0.01em !important; overflow-wrap: anywhere !important; word-break: normal !important; hyphens: auto !important; } html body .faq-answer, html body .faq-answer p { font-size: 0.88rem !important; font-weight: 400 !important; line-height: 1.55 !important; overflow-wrap: anywhere !important; word-break: normal !important; } html body .faq-question > i, html body .faq-question .faq-icon { flex-shrink: 0 !important; font-size: 0.85rem !important; } } @media (max-width: 640px) { html body .faq-question h3 { font-size: 0.9rem !important; line-height: 1.4 !important; } html body .faq-answer, html body .faq-answer p { font-size: 0.84rem !important; line-height: 1.5 !important; } } /* ===== Phone: hide scroll-to-top ===== */ @media (max-width: 768px) { html body .scroll-to-top, html body #scroll-to-top { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; width: 0 !important; height: 0 !important; } } /* ===== Phone live toast + hide scroll (v205) ===== */ @media (max-width: 768px) { html body .live-notifications, html body #liveNotifications, html body #live-notifications { left: 12px !important; right: 12px !important; bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important; top: auto !important; max-width: none !important; width: auto !important; z-index: 9980 !important; pointer-events: none !important; display: flex !important; flex-direction: column !important; gap: 8px !important; align-items: stretch !important; } html body .live-notifications .notification-item, html body #liveNotifications .notification-item, html body #live-notifications .notification-item { pointer-events: auto !important; display: block !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; margin: 0 !important; padding: 0.9rem 1rem !important; border-radius: 14px !important; border: 1px solid rgba(16, 185, 129, 0.35) !important; border-left: 4px solid #10b981 !important; background: rgba(255, 255, 255, 0.97) !important; box-shadow: 0 8px 22px rgba(15, 23, 42, 0.14) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; transform: none !important; text-align: center !important; } html body .live-notifications .notification-time, html body #liveNotifications .notification-time { display: flex !important; width: -moz-fit-content !important; width: fit-content !important; align-items: center !important; justify-content: center !important; margin: 0 0 0.4rem !important; padding: 0 !important; font-size: 0.66rem !important; font-weight: 700 !important; letter-spacing: 0.4px !important; line-height: 1.5 !important; color: #059669 !important; background: transparent !important; border: none !important; border-radius: 0 !important; } html body .live-notifications .notification-text, html body #liveNotifications .notification-text { margin: 0 !important; font-size: 0.9rem !important; line-height: 1.6 !important; color: #0f172a !important; word-break: break-word !important; text-align: center !important; width: 100% !important; } html body .live-notifications .notification-location, html body #liveNotifications .notification-location { font-weight: 800 !important; color: #0f172a !important; } /* Paket adi: duz koyu metin (yesil pill degil - kullanici istemedi). */ html body .live-notifications .notification-package, html body #liveNotifications .notification-package { font-weight: 800 !important; color: #0f172a !important; } html body .scroll-to-top, html body #scroll-to-top { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; width: 0 !important; height: 0 !important; } } /* ===== FAQ tablet: tek sütun tam genişlik ===== */ @media (max-width: 1024px) { html body .faq-grid { grid-template-columns: 1fr !important; max-width: 100% !important; } html body .faq-grid .faq-item { width: 100% !important; max-width: 100% !important; } } /* ===== Mobile header always fully visible ===== */ /* Telefon: sabit navbar kaydırırken yarım kesilmesin, her zaman tam görünsün */ @media (max-width: 1024px) { html body .header, html body .header.scrolled { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; transform: none !important; translate: none !important; margin: 0 !important; /* iOS çentik / status bar */ padding-top: env(safe-area-inset-top, 0px) !important; height: calc(var(--header-h, 64px) + env(safe-area-inset-top, 0px)) !important; min-height: calc(var(--header-h, 64px) + env(safe-area-inset-top, 0px)) !important; max-height: none !important; overflow: visible !important; z-index: 1000000 !important; box-sizing: border-box !important; /* scroll hide / collapse engeli */ opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } html body .header .container, html body .header > .container, html body .header .header-content { height: var(--header-h, 64px) !important; min-height: var(--header-h, 64px) !important; max-height: var(--header-h, 64px) !important; overflow: visible !important; box-sizing: border-box !important; } html body { padding-top: calc(var(--header-h, 64px) + env(safe-area-inset-top, 0px)) !important; scroll-padding-top: calc(var(--header-h, 64px) + env(safe-area-inset-top, 0px)) !important; } } /* ===== Layout stability: no jump on tap/hover (header/footer) ===== */ /* Kök neden: dokunmatikte :hover yapışıyor + transform/translate/scale/font-weight layout kaydırıyor. Gerçek mouse dışında header/footer hover hareketini kapat. */ @media (hover: none), (pointer: coarse), (max-width: 1024px) { html body .header, html body .header *, html body .footer, html body .footer * { transition-property: color, background-color, background-image, border-color, box-shadow, opacity, fill, stroke !important; } html body .header :hover, html body .header :active, html body .header :focus, html body .header :focus-visible, html body .footer :hover, html body .footer :active, html body .footer :focus, html body .footer :focus-visible { transform: none !important; translate: none !important; scale: none !important; } /* Dropdown hover ile açılmasın — sadece .show */ html body .header .dropdown:hover > .dropdown-menu:not(.show) { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: none !important; display: none !important; } html body .header .order-search-btn:hover, html body .header .order-search-btn:active, html body .td-header-cart-btn:hover, html body .td-header-cart-btn:active, html body .header .theme-toggle:hover, html body .header .nav-link:hover, html body .header .dropdown-toggle:hover, html body .header .dropdown-item:hover { transform: none !important; translate: none !important; scale: none !important; top: auto !important; margin: inherit !important; font-weight: inherit !important; } html body .footer a:hover, html body .footer a:active, html body .footer a:focus { transform: none !important; translate: none !important; scale: none !important; top: auto !important; margin: 0 !important; font-weight: inherit !important; } } /* Zero-flicker section boot: hide body until initial section coordinates are reached */ html.td-boot-section body { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } /* Navbar Logo ve Marka İsmi Tam Sabitleme — tıklama ve yönlendirmede 0 hareket */ html body .header .logo, html body .header .logo *, html body .header .logo:hover, html body .header .logo:hover *, html body .header .logo:active, html body .header .logo:active *, html body .header .logo:focus, html body .header .logo:focus *, html body .header .logo:focus-visible, html body .header .logo:focus-visible * { transform: none !important; translate: none !important; scale: none !important; transition: none !important; animation: none !important; position: static !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; outline: none !important; border: none !important; box-shadow: none !important; text-shadow: none !important; user-select: none !important; -webkit-user-select: none !important; -webkit-touch-callout: none !important; touch-action: manipulation !important; -webkit-tap-highlight-color: transparent !important; } html body .header .logo, html body .header .logo:hover, html body .header .logo:active, html body .header .logo:focus, html body .header .logo:focus-visible { margin: 0 !important; padding: 0 !important; } html body .header .logo .brand-mark, html body .header .logo .x-logo-mark, html body .header .logo .kick-logo-mark, html body .header .logo > i, html body .header .logo > svg { margin: 0 !important; padding: 0 !important; } html body .header .logo .brand-mark i, html body .header .logo .brand-mark svg, html body .header .logo .x-logo-mark svg, html body .header .logo > i, html body .header .logo > svg { margin: 0 auto !important; padding: 0 !important; } html body .header .logo > span:not(.brand-mark):not(.x-logo-mark):not(.kick-logo-mark) { margin: 0 !important; padding: 0 !important; font-weight: 700 !important; letter-spacing: -0.01em !important; } /* Masaüstü mouse: sadece renk/gölge — yer değiştiren transform yok */ @media (hover: hover) and (pointer: fine) { html body .header .order-search-btn:hover, html body .td-header-cart-btn:hover { transform: none !important; } html body .header .dropdown-item:hover .fab, html body .header .dropdown-item:hover i, html body .header .dropdown-item:hover .dropdown-platform-icon { transform: none !important; } } /* Kurumsal dropdown hover: buton ve ikonlar sabit kalsın, hiçbir animasyon/translate/scale çalışmasın */ html body .header .dropdown-menu .dropdown-item, html body .header .dropdown-menu .dropdown-item:hover, html body .header .dropdown-menu .dropdown-item:focus, html body .header .dropdown-menu .dropdown-item:active, html body .header .dropdown-menu .dropdown-item i, html body .header .dropdown-menu .dropdown-item .fab, html body .header .dropdown-menu .dropdown-item svg, html body .header .dropdown-menu .dropdown-item .dropdown-platform-icon { animation: none !important; transform: none !important; translate: none !important; scale: none !important; transition: none !important; transform-origin: center !important; will-change: auto !important; -webkit-transform: none !important; -moz-transform: none !important; -o-transform: none !important; filter: none !important; } /* Header/footer içinde absolute kaymaları engelle */ html body .header .header-content, html body .footer .footer-content { position: relative !important; } /* Platformlar menüsü açıkken hover ve tıklama aynı iki sütunlu düzeni kullansın. */ @media (min-width: 1025px) { html body .header .dropdown-menu:has(a[href="instagram-servisleri.html"]), html body .header .dropdown-menu.show:has(a[href="instagram-servisleri.html"]), html body .header .dropdown:hover > .dropdown-menu:has(a[href="instagram-servisleri.html"]), html body .header .dropdown.show > .dropdown-menu:has(a[href="instagram-servisleri.html"]) { display: grid !important; grid-template-columns: repeat(2, minmax(0, max-content)) !important; grid-auto-flow: row !important; grid-auto-rows: auto !important; justify-content: start !important; width: max-content !important; min-width: 0 !important; max-width: 92vw !important; box-sizing: border-box !important; column-gap: 10px !important; row-gap: 2px !important; } html body .header .dropdown-menu:has(a[href="instagram-servisleri.html"]) > .dropdown-item { width: auto !important; min-width: 0 !important; margin: 0 !important; white-space: nowrap !important; } } /* ───────────────────────────────────────────────────────────────────── §129 MOBİL NAVBAR SAĞ BUTONLARI KESİN MERKEZLEME VE KUTU BOYUTU KİLİDİ · Tüm 28 sayfada mobil görünümde (<= 768px) butonların (Sipariş Sorgula, Sepet, Hamburger Menü) 42x42px kutuları içinde ikonlarının tam yatay ve dikey merkezde (center/center) hizalanmasını garanti eder. ───────────────────────────────────────────────────────────────────── */ @media (max-width: 768px) { html body .header .order-search-btn, html body .header .mobile-injected-order-search .order-search-btn, html body .header .td-header-cart-btn, html body .td-header-cart-btn, html body .header .mobile-menu-toggle, html body .mobile-menu-toggle { width: 42px !important; min-width: 42px !important; max-width: 42px !important; height: 42px !important; min-height: 42px !important; max-height: 42px !important; padding: 0 !important; margin: 0 !important; border-radius: 10px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; text-align: center !important; flex: 0 0 42px !important; flex-shrink: 0 !important; position: relative !important; } html body .header .order-search-btn i, html body .header .order-search-btn svg, html body .header .mobile-injected-order-search .order-search-btn i, html body .header .mobile-injected-order-search .order-search-btn svg, html body .header .td-header-cart-btn i, html body .header .td-header-cart-btn svg, html body .td-header-cart-btn i, html body .td-header-cart-btn svg, html body .header .mobile-menu-toggle i, html body .header .mobile-menu-toggle svg, html body .mobile-menu-toggle i, html body .mobile-menu-toggle svg { width: 1em !important; height: 1em !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 auto !important; padding: 0 !important; line-height: 1 !important; font-size: 1rem !important; text-align: center !important; flex: 0 0 auto !important; vertical-align: middle !important; } html body .header .order-search-btn span:not(.badge), html body .header .mobile-injected-order-search .order-search-btn span:not(.badge), html body .header .td-header-cart-btn .td-header-cart-label, html body .td-header-cart-btn .td-header-cart-label { display: none !important; } } /* ───────────────────────────────────────────────────────────────────── §130 SİPARİŞ SORGULAMA: ÇOKLU HİZMET VE PLATFORM MODERN GÖRÜNÜM · Hizmet ve platformların tek satırda ezilmesini veya çirkin kırılmasını önler; 1 veya çok sayıda hizmet/platform olduğunda zarif, kaydırılabilir ve kurumsal rozet/kart düzeninde sunulmasını sağlar. ───────────────────────────────────────────────────────────────────── */ /* 1. Platform Etiket Grubu ve Rozetleri */ .od-row.od-row-platform { display: flex !important; align-items: center !important; justify-content: space-between !important; min-height: 40px !important; padding: 0.55rem 0 !important; } .od-row.od-row-platform .od-k { padding-top: 0 !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; } .od-platforms-wrap { display: inline-flex !important; align-items: center !important; justify-content: flex-end !important; max-width: calc(100% - 90px) !important; } .od-platform-tags-group { display: inline-flex !important; flex-wrap: wrap !important; gap: 5px !important; justify-content: flex-end !important; align-items: center !important; max-width: 100% !important; } .od-platform-tags-group.is-icon-row { display: inline-flex !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 6px !important; align-items: center !important; justify-content: flex-end !important; max-width: 100% !important; } .od-platform-icon-badge { width: 28px !important; height: 28px !important; min-width: 28px !important; border-radius: 7px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; color: #ffffff !important; font-size: 0.92rem !important; line-height: 1 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14) !important; flex-shrink: 0 !important; cursor: pointer !important; transition: transform 0.15s ease, box-shadow 0.15s ease !important; } .od-platform-icon-badge i { display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; font-size: 0.92rem !important; margin: 0 !important; } .od-platform-icon-badge:hover { transform: translateY(-2px) scale(1.08) !important; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.22) !important; } .od-platform-icon-badge .od-plat-img { width: 15px !important; height: 15px !important; object-fit: contain !important; display: block !important; } .od-platform-tag { display: inline-flex !important; align-items: center !important; gap: 4px !important; padding: 2.5px 7px !important; border-radius: 6px !important; font-size: 0.72rem !important; font-weight: 600 !important; line-height: 1.3 !important; color: #ffffff !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important; white-space: nowrap !important; flex-shrink: 0 !important; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25) !important; } .od-platform-tag .od-plat-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 0.8rem !important; line-height: 1 !important; } .od-platform-tag .od-plat-img { width: 13px !important; height: 13px !important; object-fit: contain !important; display: block !important; } /* Platform Marka Renkleri */ .od-plat-instagram { background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045) !important; color: #fff !important; } .od-plat-tiktok { background: #000000 !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; } .od-plat-youtube { background: #ef4444 !important; color: #fff !important; } .od-plat-x, .od-plat-twitter { background: #0f172a !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; } .od-plat-facebook { background: #1877f2 !important; color: #fff !important; } .od-plat-telegram { background: #229ed9 !important; color: #fff !important; } .od-plat-spotify { background: #1db954 !important; color: #fff !important; } .od-plat-twitch { background: #9146ff !important; color: #fff !important; } .od-plat-kick { background: #10b981 !important; color: #fff !important; } .od-plat-discord { background: #5865f2 !important; color: #fff !important; } .od-plat-threads { background: #000000 !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; } .od-plat-snapchat { background: #facc15 !important; color: #000000 !important; text-shadow: none !important; } .od-plat-linkedin { background: #0a66c2 !important; color: #fff !important; } .od-plat-pinterest { background: #e60023 !important; color: #fff !important; } .od-plat-default { background: #475569 !important; color: #fff !important; } /* 2. Tekil Hizmet Satırı */ .od-single-service-wrap { display: inline-flex !important; align-items: center !important; gap: 6px !important; justify-content: flex-end !important; max-width: 100% !important; } .od-svc-mini-badge { width: 22px !important; height: 22px !important; min-width: 22px !important; border-radius: 5px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 0.74rem !important; color: #fff !important; flex-shrink: 0 !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important; } .od-svc-mini-badge .od-plat-img { width: 12px !important; height: 12px !important; object-fit: contain !important; } .od-single-service-text { font-size: 0.86rem !important; font-weight: 600 !important; line-height: 1.35 !important; text-align: right !important; color: #0f172a !important; word-break: break-word !important; } /* 3. Çoklu Hizmet Bloğu */ .od-services-block { padding: 0.65rem 0 !important; border-bottom: 1px solid #e2e8f0 !important; display: flex !important; flex-direction: column !important; gap: 0.5rem !important; width: 100% !important; box-sizing: border-box !important; } .od-services-header { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 0.5rem !important; width: 100% !important; } .od-services-count-badge { display: inline-flex !important; align-items: center !important; gap: 4px !important; font-size: 0.72rem !important; font-weight: 700 !important; color: #2563eb !important; background: #eff6ff !important; border: 1px solid #bfdbfe !important; padding: 2px 7px !important; border-radius: 999px !important; line-height: 1.25 !important; } .od-services-list-container { display: flex !important; flex-direction: column !important; gap: 6px !important; width: 100% !important; box-sizing: border-box !important; } .od-services-list-container.has-scroll { max-height: 182px !important; overflow-y: auto !important; overflow-x: hidden !important; padding-right: 5px !important; overscroll-behavior: contain !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: thin !important; scrollbar-color: #cbd5e1 transparent !important; } .od-services-list-container.has-scroll::-webkit-scrollbar { width: 5px !important; height: 5px !important; } .od-services-list-container.has-scroll::-webkit-scrollbar-track { background: transparent !important; } .od-services-list-container.has-scroll::-webkit-scrollbar-thumb { background: #cbd5e1 !important; border-radius: 999px !important; } .od-services-list-container.has-scroll::-webkit-scrollbar-thumb:hover { background: #94a3b8 !important; } .od-services-list-container.has-scroll::-webkit-scrollbar-button, .od-services-list-container.has-scroll::-webkit-scrollbar-button:start, .od-services-list-container.has-scroll::-webkit-scrollbar-button:end { display: none !important; width: 0 !important; height: 0 !important; } .od-service-item-card { display: flex !important; align-items: center !important; gap: 0.65rem !important; padding: 0.5rem 0.65rem !important; background: #f8fafc !important; border: 1px solid #e2e8f0 !important; border-radius: 8px !important; box-sizing: border-box !important; min-height: 38px !important; transition: transform 0.15s ease, background 0.15s ease !important; } .od-service-item-card:hover { background: #f1f5f9 !important; } .od-svc-icon-box { width: 26px !important; height: 26px !important; min-width: 26px !important; border-radius: 6px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 0.8rem !important; color: #ffffff !important; flex-shrink: 0 !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) !important; } .od-svc-icon-box .od-plat-img { width: 14px !important; height: 14px !important; object-fit: contain !important; } .od-svc-details { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 0.5rem !important; flex: 1 1 auto !important; min-width: 0 !important; } .od-svc-name { font-size: 0.83rem !important; font-weight: 600 !important; color: #0f172a !important; line-height: 1.35 !important; text-align: left !important; word-break: break-word !important; } .od-svc-qty-pill { display: inline-flex !important; align-items: center !important; padding: 2px 6px !important; border-radius: 4px !important; background: #e2e8f0 !important; color: #475569 !important; font-size: 0.72rem !important; font-weight: 700 !important; white-space: nowrap !important; flex-shrink: 0 !important; } /* ===== SEPET MOBIL DUZEN - TEK KAYNAK (v224) ===== */ /* Iki kok neden: (1) .header z-index:1000000 > .td-cart-modal z-index:999900 oldugu icin sabit nav, sepet basliginin USTUNE biniyordu (baslik ezik). (2) 5928'deki max-width:calc(100vw-1rem) TAM EKRAN overlay'ini daraltip kenarlarda alttaki sayfa gradyanini gosteryordu (sag/sol serit). Cozum: modal'i header'in ustune al, overlay'i tam genislet, backdrop'i karart, mobilde karti tam genislik bottom-sheet yap. */ html body .td-cart-modal { z-index: 1000010 !important; max-width: none !important; width: 100% !important; } html body .td-cart-modal .td-cart-backdrop { background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } @media (max-width: 640px) { /* Mobilde sepet TAM EKRAN acilir: ustte navbar altinda kalan 56px pay kaldirildi; kart 0'dan 100dvh'ye kadar ekrani kaplar (navbar artik ustuyle gecilir, modal z-index header'dan buyuk). */ html body .td-cart-modal { align-items: stretch !important; padding: 0 !important; } html body .td-cart-modal .td-cart-card { width: 100% !important; max-width: 100% !important; height: 100dvh !important; max-height: 100dvh !important; border-radius: 0 !important; padding-top: env(safe-area-inset-top, 0px) !important; } html body .td-cart-modal .td-cart-header { padding: 14px 18px !important; } } /* Sepet govdesi kaydirma kapsayici: parmak listenin sonuna gelince kaydirma arkadaki sayfaya zincirlemesin (scroll chaining) -> footer'dakiyle ayni sinif "sayfa kaymasini" engeller. */ html body .td-cart-body { overscroll-behavior: contain !important; -webkit-overflow-scrolling: touch !important; touch-action: pan-y !important; } /* ===== FOOTER PLATFORM IZGARASI - TEK KAYNAK (v226) ===== */ /* Yuzeyde bu ızgaraya etki eden ~10 cakisan !important kural vardi (gap: 0.3/0.45/0.5/1rem, max-width 304/320/340, hatta biri display:flex column). Viewport 374/768 breakpoint'ini asinca baska kural kazanip satir araligi degisiyordu = 'iki farkli gorunum'. Hepsini TEK deterministik kuralda sabitliyoruz (px gap -> rem/font-size'tan bagimsiz, dosya sonu -> en yuksek kaynak-oncelik). Sonuc her genislikte ayni. */ @media (max-width: 1024px) { html body .footer .footer-content > .footer-section:nth-child(2) ul { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; justify-content: center !important; justify-items: center !important; align-content: start !important; gap: 16px 12px !important; width: 100% !important; max-width: 340px !important; margin: 0 auto !important; padding: 0 !important; list-style: none !important; } } /* ===== SEPET ODEME BUTONU TEK SATIR (v226) ===== */ /* 'Güvenli Ödemeye Geç (tutar)' alt satira inmesin; genislige gore yazi kuculur (clamp), ikon + yazi hep yan yana kalir. */ html body .td-cart-checkout-btn { padding: 14px 12px !important; gap: 8px !important; } html body .td-cart-checkout-btn > span { white-space: nowrap !important; font-size: clamp(0.8rem, 3.6vw, 1rem) !important; line-height: 1.1 !important; } /* ───────────────────────────────────────────────────────────────────── §8b POPÜLER PAKET KART BUTONU (.pricing-btn) · Paket sayfalarındaki yeşil "Sepete Ekle" butonuyla AYNI görünüm (yeşil degrade + sepet ikonu + yastıklı boşluk) · Metin "Satın Al" kalır (i18n pkg.buy); bu buton satın alma sayfasına yönlendirir ───────────────────────────────────────────────────────────────────── */ html body section.pricing-preview .pricing-card .pricing-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-direction: row !important; gap: 0.55rem !important; width: 100% !important; margin-top: 0.4rem !important; padding: 0.7rem 1rem !important; border: 0 !important; border-radius: 10px !important; font-family: inherit !important; font-size: 0.95rem !important; font-weight: 600 !important; letter-spacing: 0.2px !important; color: #ffffff !important; background: linear-gradient(135deg, #10b981, #059669) !important; box-shadow: 0 6px 16px -6px rgba(16, 185, 129, 0.55) !important; cursor: pointer !important; transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease !important; } html body section.pricing-preview .pricing-card .pricing-btn:hover { filter: brightness(1.05) !important; transform: translateY(-1px) !important; box-shadow: 0 10px 22px -6px rgba(16, 185, 129, 0.6) !important; } html body section.pricing-preview .pricing-card .pricing-btn:active { transform: translateY(0) scale(0.99) !important; } html body section.pricing-preview .pricing-card .pricing-btn i { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; color: #ffffff !important; font-size: 1rem !important; width: 1.1em !important; height: 1.1em !important; margin: 0 !important; flex: 0 0 auto !important; } /* ───────────────────────────────────────────────────────────────────── §8c NATIVE SCROLL ANCHORING — AÇIK (v283) · Eskiden footer tap kaymasi bu kuralla engelleniyordu; gercek kok neden v279'daki sticky :hover padding kilidi ile cozuldu. · overflow-anchor:none BUTUN dokumanda tarayicinin ustteki icerik buyudugunde scroll'u otomatik telafi etmesini kapatip footer'i asagidaki kullanicinin gozu onunda kaydiriyordu (toast buyumesi). · Bu yuzden artik html/body/footera anchor kilidi KONMAZ. ───────────────────────────────────────────────────────────────────── */ /* ══════════════════════════════════════════════════════════════════════ §9 TABLET / BUYUK EKRAN GRID BOSLUKLARI — YALNIZ KARTI ORTALA · iPad Pro 13 gibi genisliklerde 2 sutuna dusen satirda tek kalan kart, sagda "icerik eksik" hissi veren bir bosluk birakiyordu (paketler, yorumlar, SSS). Grid yerine flex-wrap + justify-content:center ile artan kart satirin ortasina hizalanir; sutun sayilari korunur. · Her modul kendi cok-sutun araliginda flex'e gecer; dar ekran 1 sutun. ══════════════════════════════════════════════════════════════════════ */ /* Paketler: 641px ustu (tablet+desktop) */ @media (min-width: 641px) { html body section.pricing-preview .pricing-grid { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: stretch !important; gap: 1.75rem !important; max-width: 1200px !important; margin: 0 auto !important; } html body section.pricing-preview .pricing-card { flex: 1 1 300px !important; width: auto !important; max-width: 360px !important; } } /* Yorumlar: 769px ustu (tablet+desktop) */ @media (min-width: 769px) { html body .reviews-track { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: stretch !important; gap: 1.75rem !important; max-width: 1180px !important; margin: 0 auto !important; } html body .reviews-track .review-card { flex: 1 1 300px !important; width: auto !important; max-width: 520px !important; grid-column: auto !important; } } /* SSS: 1025px ustu (yalnizca cok-sutun masaustu/tablet-yatay) */ @media (min-width: 1025px) { html body .faq-grid { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: stretch !important; gap: 1.5rem !important; max-width: 1100px !important; margin: 2rem auto 0 !important; } html body .faq-grid .faq-item { flex: 1 1 320px !important; width: auto !important; max-width: 560px !important; } } /* ===== SIPARIS KODU HATIRLATICI KARTI - CILA (v263+) ===== */ @keyframes tdReminderIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } } @keyframes tdReminderPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,.55); } 60% { box-shadow: 0 0 0 6px rgba(16,185,129,0); } } html body .persistent-order-reminder { border-radius: 18px !important; padding: 1rem 1.05rem 1.05rem !important; background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%) !important; border: 1px solid rgba(37,99,235,.16) !important; box-shadow: 0 24px 60px rgba(15,23,42,.20), 0 0 0 4px rgba(37,99,235,.04) !important; animation: tdReminderIn .35s ease-out !important; } /* Sol kenarda yesil accent seridi: kartin "basarili odeme" oldugunu tek bakista belli eder. */ html body .persistent-order-reminder::before { content: "" !important; position: absolute !important; left: 0 !important; top: 0 !important; bottom: 0 !important; width: 3px !important; background: linear-gradient(180deg, #10b981, #059669) !important; border-radius: 18px 0 0 18px !important; } html body .persistent-order-badge { background: linear-gradient(135deg, rgba(16,185,129,.14), rgba(5,150,105,.10)) !important; color: #047857 !important; gap: .35rem !important; font-weight: 800 !important; padding: .32rem .65rem !important; font-size: .72rem !important; letter-spacing: .01em !important; border: 1px solid rgba(16,185,129,.18) !important; } html body .persistent-order-badge i { color: #059669 !important; font-size: .95em !important; animation: tdReminderPulse 1.8s ease-out infinite !important; border-radius: 999px !important; } html body .persistent-order-close { width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; max-width: 32px !important; max-height: 32px !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 50% !important; aspect-ratio: 1 / 1 !important; background: #eef2ff !important; color: #1d4ed8 !important; font-size: 14px !important; transition: background .18s ease, color .18s ease !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; box-sizing: border-box !important; flex-shrink: 0 !important; cursor: pointer !important; box-shadow: none !important; overflow: hidden !important; } html body .persistent-order-close i { font-size: 14px !important; width: 14px !important; height: 14px !important; line-height: 1 !important; margin: 0 !important; padding: 0 !important; color: inherit !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } html body .persistent-order-close:hover { background: #e0e7ff !important; color: #1e40af !important; } html body .persistent-order-head { margin-bottom: .7rem !important; gap: .5rem !important; } html body .persistent-order-code-row { gap: .45rem !important; margin-bottom: .75rem !important; } /* Koyu siyah kutuyu soft slate yaptim: kart agirlik merkezi artik buton, bilgi okunakli ama hantal durmuyor. */ html body .persistent-order-code-row code { flex: 1 !important; background: linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%) !important; border: 1px solid rgba(15,23,42,.08) !important; color: #0f172a !important; padding: .65rem .85rem !important; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; font-size: .92rem !important; font-weight: 800 !important; letter-spacing: .02em !important; text-align: center !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.8) !important; } html body .persistent-order-code-row .copy-order-btn { width: 38px !important; height: 38px !important; border: 0 !important; border-radius: 10px !important; background: linear-gradient(135deg, #2563eb, #1d4ed8) !important; color: #fff !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 6px 16px rgba(37,99,235,.30) !important; transition: transform .16s ease, filter .16s ease, box-shadow .16s ease !important; flex-shrink: 0 !important; } html body .persistent-order-code-row .copy-order-btn:hover { transform: translateY(-1px) !important; filter: brightness(1.06) !important; box-shadow: 0 10px 22px rgba(37,99,235,.40) !important; } html body .persistent-order-code-row .copy-order-btn.copied { background: linear-gradient(135deg,#10b981,#059669) !important; box-shadow: 0 6px 16px rgba(16,185,129,.36) !important; } html body .persistent-order-actions { margin-top: 0 !important; } html body .persistent-order-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: .5rem !important; padding: .72rem 1rem !important; border-radius: 12px !important; box-shadow: 0 8px 20px rgba(37,99,235,.28) !important; transition: transform .16s ease, box-shadow .16s ease, filter .16s ease !important; font-size: .9rem !important; } html body .persistent-order-btn:hover { transform: translateY(-1px) !important; filter: brightness(1.05) !important; box-shadow: 0 12px 26px rgba(37,99,235,.38) !important; } html body .persistent-order-btn:active { transform: translateY(0) !important; } /* ===== SIPARIS KODU HATIRLATICI: sag altta yuzen toast -> rozet -> kaybol (v259) ===== */ html body .persistent-order-reminder { position: fixed !important; right: 18px !important; top: 92px !important; bottom: auto !important; left: auto !important; z-index: 9998 !important; width: 290px !important; max-width: calc(100vw - 36px) !important; box-sizing: border-box !important; transition: opacity .35s ease, transform .35s ease, width .3s ease, padding .3s ease, box-shadow .3s ease !important; } html body .persistent-order-pill { display: none !important; } html body .persistent-order-reminder.is-collapsed { width: auto !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; border-radius: 999px !important; } html body .persistent-order-reminder.is-collapsed .persistent-order-head, html body .persistent-order-reminder.is-collapsed .persistent-order-code-row, html body .persistent-order-reminder.is-collapsed .persistent-order-actions { display: none !important; } html body .persistent-order-reminder.is-collapsed .persistent-order-pill { display: inline-flex !important; align-items: center !important; gap: .5rem !important; padding: .7rem 1.05rem !important; border: 0 !important; border-radius: 999px !important; background: linear-gradient(135deg,#2563eb,#1d4ed8) !important; color: #fff !important; font-weight: 800 !important; font-size: .9rem !important; cursor: pointer !important; box-shadow: 0 12px 30px rgba(37,99,235,.42) !important; white-space: nowrap !important; max-width: calc(100vw - 36px) !important; overflow: hidden !important; text-overflow: ellipsis !important; } html body .persistent-order-reminder.is-collapsed .persistent-order-pill i { color: #34d399 !important; } html body .persistent-order-reminder.is-hidden { opacity: 0 !important; transform: translateY(-16px) scale(.96) !important; pointer-events: none !important; } @media (max-width: 768px) { html body .persistent-order-reminder { right: 12px !important; left: auto !important; top: calc(64px + env(safe-area-inset-top, 0px)) !important; bottom: auto !important; /* Dar ekranlarda hero basligini tamamen ortmememsi icin sabit bir tavan veriyoruz. */ width: auto !important; max-width: min(290px, calc(100vw - 24px)) !important; } html body .persistent-order-reminder.is-collapsed { width: auto !important; } } /* Tum mobil/tablet altinda collapsed pill hero basliginin uzerine indigigi icin font/padding kuculterek genisligini en aza indiriyoruz. */ @media (max-width: 768px) { html body .persistent-order-reminder.is-collapsed .persistent-order-pill { font-size: .78rem !important; padding: .5rem .8rem !important; gap: .35rem !important; letter-spacing: -.01em !important; max-width: calc(100vw - 24px) !important; } } /* Tablet (769-1024px): orta boy ekranlarda kart orta genislige sigar, ama yine de "Fark Yarat!" basliginin sonuna degiyor; biraz daha daraltip saga daha da yasliyoruz ki ortali baslikla catisma azalsin. */ @media (min-width: 769px) and (max-width: 1024px) { html body .persistent-order-reminder { top: 112px !important; width: 250px !important; max-width: calc(100vw - 24px) !important; } html body .persistent-order-reminder.is-collapsed .persistent-order-pill { font-size: .82rem !important; padding: .6rem .9rem !important; } /* Daralan kart icinde kod metni iki satira bolunuyordu; satir basinda tutuyoruz, tasma olursa scroll cubugu yerine sonuna ... koyuyoruz ki satir duzeni bozulmasin. */ html body .persistent-order-reminder .persistent-order-code-row code { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } } /* ===== CANLI SATIN ALMA TOAST: KART TASARIMI BUTUN EKRANLARDA AYNI (konum/boyut cihaza gore kalir) (v251) ===== */ html body .live-notifications .notification-item, html body #liveNotifications .notification-item, html body #live-notifications .notification-item { position: relative !important; display: grid !important; grid-template-columns: minmax(0,1fr) !important; gap: .45rem !important; padding: 1.15rem 1rem .95rem !important; margin: 0 !important; box-sizing: border-box !important; text-align: left !important; background: #fff !important; border: 1px solid rgba(37,99,235,.18) !important; border-left: 1px solid rgba(37,99,235,.18) !important; border-radius: 16px !important; box-shadow: 0 18px 40px rgba(15,23,42,.12) !important; transform: none !important; animation: notificationIn .5s ease-out !important; } html body .live-notifications .notification-item::before, html body #liveNotifications .notification-item::before { content: "" !important; position: absolute !important; top: 6px !important; left: 14px !important; right: 14px !important; height: 3px !important; border-radius: 999px !important; background: linear-gradient(90deg,#3b82f6,#1d4ed8) !important; opacity: 1 !important; display: block !important; } html body .live-notifications .notification-time, html body #liveNotifications .notification-time { display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; width: fit-content !important; max-width: fit-content !important; padding: .22rem .55rem !important; border-radius: 999px !important; background: rgba(15,23,42,.06) !important; color: #64748b !important; font-size: .75rem !important; font-weight: 500 !important; margin: 0 !important; text-align: left !important; } html body .live-notifications .notification-text, html body #liveNotifications .notification-text { text-align: left !important; width: auto !important; color: #111827 !important; font-size: .85rem !important; line-height: 1.45 !important; margin: 0 !important; /* Kırılan satırları eşitle: 3 satıra inse bile son satır yetim kelime bırakmaz, derli toplu durur. */ text-wrap: balance !important; hyphens: manual !important; overflow-wrap: break-word !important; } html body .live-notifications .notification-location, html body .live-notifications .notification-package, html body #liveNotifications .notification-location, html body #liveNotifications .notification-package { color: #10b981 !important; font-weight: 600 !important; } /* ===== UYARI / HATA KUTULARI - CILA (sepet hedef + sipariş sorgu, tutarlı & ikonlu) (v246) ===== */ .td-cart-status-error, .search-result.error.show, #searchResult.error.show { position: relative !important; text-align: center !important; padding: 1rem 1.15rem 1.05rem !important; border-radius: 14px !important; border: 1px solid #fecaca !important; background: linear-gradient(180deg, #fff5f5 0%, #fef2f2 100%) !important; color: #991b1b !important; font-weight: 600 !important; font-size: 0.9rem !important; line-height: 1.55 !important; box-shadow: 0 8px 22px rgba(153, 27, 27, 0.08) !important; overflow: hidden !important; } /* Üst ince vurgu şeridi */ .td-cart-status-error::after, .search-result.error.show::after, #searchResult.error.show::after { content: "" !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 3px !important; background: linear-gradient(90deg, #ef4444, #dc2626) !important; opacity: 0.9 !important; } /* Dairesel uyarı ikonu (FontAwesome circle-exclamation) */ .td-cart-status-error::before, .search-result.error.show::before, #searchResult.error.show::before { content: "\f06a" !important; font-family: "Font Awesome 6 Free", "Font Awesome 5 Free" !important; font-weight: 900 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 34px !important; height: 34px !important; margin: 0 auto 0.55rem !important; border-radius: 50% !important; background: #fee2e2 !important; color: #dc2626 !important; font-size: 1rem !important; line-height: 1 !important; box-shadow: inset 0 0 0 1px rgba(220, 38, 38, 0.16) !important; } .search-result.error.show h5, #searchResult.error.show h5 { color: #b91c1c !important; margin: 0 0 0.35rem !important; } /* ===== SEPET HATA KUTUSU: YATAY (ikon + metin grubu ORTADA, kutu tam genislik) (v255) ===== */ /* Gorunurluk JS tarafiyla (showError -> display:flex) kontrol edilir; burada display SET EDILMEZ. */ .td-cart-status-error { align-items: center !important; justify-content: center !important; gap: 0.7rem !important; text-align: center !important; padding: 0.8rem 1.05rem !important; } .td-cart-status-error::before { margin: 0 !important; flex-shrink: 0 !important; width: 30px !important; height: 30px !important; font-size: 0.95rem !important; } /* Sepet hata metni: ikonun saginda TEK SATIR, kirilma yok, icerik kadar genislik (ortalanir) (v255) */ .td-cart-status-error .td-cart-status-msg { flex: 0 1 auto; min-width: 0; text-align: left !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Kucuk ekran: uyarı metni TEK SATIR (yan yana) kalsin -> font kuculur, ikon/padding daralir, kirilma YOK (v258) */ @media (max-width: 480px) { .td-cart-status-error { gap: 0.4rem !important; padding: 0.6rem 0.7rem !important; font-size: 0.74rem !important; } .td-cart-status-error::before { width: 22px !important; height: 22px !important; font-size: 0.72rem !important; } .td-cart-status-error .td-cart-status-msg { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.74rem; letter-spacing: -0.2px; } } /* ===== CANLI SATIN ALMA TOAST: METIN KIRMASI HER EKRANDA DuzGUN (v248) ===== */ /* Temel (non-media): 2 ya da 3 satira kirilsin, satirlar esit uzunlukta olur, son satirda yetim kelime kalmaz. */ html body .live-notifications .notification-text, html body #liveNotifications .notification-text, html body #live-notifications .notification-text { text-wrap: balance !important; hyphens: manual !important; overflow-wrap: break-word !important; } /* ===================================================================== §SAVED-ORDERS-META — Platform ikonları + hizmet sayısı (v249) ===================================================================== */ html body .od-saved-meta { display: flex !important; align-items: center !important; min-width: 0 !important; width: 100% !important; margin-top: 0 !important; } /* Tek hizmet */ html body .od-saved-meta-single { display: inline-flex !important; align-items: center !important; gap: 0.35rem !important; min-width: 0 !important; max-width: 100% !important; font-size: 0.74rem !important; color: #64748b !important; overflow: hidden !important; } html body .od-saved-meta-single i { font-size: 0.85rem !important; flex-shrink: 0 !important; } html body .od-saved-pkg-text { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; line-height: 1.3 !important; } /* Çoklu hizmet */ html body .od-saved-meta-multi { display: inline-flex !important; align-items: center !important; gap: 0.25rem !important; min-width: 0 !important; } html body .od-plat-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 20px !important; height: 20px !important; border-radius: 5px !important; background: #f1f5f9 !important; font-size: 0.7rem !important; flex-shrink: 0 !important; } html body .od-saved-count { font-size: 0.7rem !important; font-weight: 700 !important; color: #6366f1 !important; background: rgba(99, 102, 241, 0.08) !important; border-radius: 20px !important; padding: 0.1rem 0.45rem !important; white-space: nowrap !important; letter-spacing: 0.01em !important; } /* ===================================================================== §CART-TERMS — Sözleşme bölümü modern tasarım (v249) ===================================================================== */ /* Ana kutu: hafif gri arka plan, köşeler yuvarlatılmış */ html body .td-cart-terms-box { display: flex !important; flex-direction: column !important; gap: 0 !important; margin: 0.5rem 0 !important; padding: 0 !important; background: #f8fafc !important; border: 1.5px solid #e2e8f0 !important; border-radius: 12px !important; overflow: hidden !important; } /* Her sözleşme satırı */ html body .td-cart-term { border: none !important; border-radius: 0 !important; background: transparent !important; overflow: visible !important; } /* Satırlar arası ayırıcı */ html body .td-cart-term + .td-cart-term { border-top: 1px solid #e9eef4 !important; } /* Summary (başlık satırı) */ html body .td-cart-term > summary { display: flex !important; align-items: center !important; gap: 0.55rem !important; cursor: pointer !important; list-style: none !important; padding: 0.65rem 0.85rem !important; font-size: 0.82rem !important; font-weight: 600 !important; color: #1e293b !important; transition: background 0.15s ease !important; user-select: none !important; } html body .td-cart-term > summary::-webkit-details-marker { display: none !important; } html body .td-cart-term > summary:hover { background: #f0f4fa !important; } /* Sol ikon kutusu */ html body .td-cart-term > summary > i:first-child { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 26px !important; height: 26px !important; border-radius: 7px !important; background: #eff6ff !important; color: #2563eb !important; font-size: 0.78rem !important; flex-shrink: 0 !important; } html body .td-cart-term > summary > span { flex: 1 1 auto !important; line-height: 1.3 !important; } /* Açılınca vurgu */ html body .td-cart-term[open] > summary { background: #eff6ff !important; color: #1d4ed8 !important; } html body .td-cart-term[open] > summary > i:first-child { background: #dbeafe !important; color: #1d4ed8 !important; } /* Chevron ok */ html body .td-cart-term-caret { color: #94a3b8 !important; font-size: 0.7rem !important; transition: transform 0.2s ease !important; flex-shrink: 0 !important; } html body .td-cart-term[open] > summary .td-cart-term-caret { transform: rotate(180deg) !important; color: #1d4ed8 !important; } /* Açılan içerik */ html body .td-cart-term-body { padding: 0.65rem 0.9rem 0.75rem 2.8rem !important; border-top: 1px solid #e9eef4 !important; background: #fff !important; animation: td-term-slide 0.15s ease !important; } @keyframes td-term-slide { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } html body .td-cart-term-body p { margin: 0 0 0.5rem !important; font-size: 0.78rem !important; line-height: 1.55 !important; font-weight: 400 !important; color: #475569 !important; } html body .td-cart-term-body a { display: inline-flex !important; align-items: center !important; gap: 0.25rem !important; font-size: 0.76rem !important; font-weight: 700 !important; color: #2563eb !important; text-decoration: none !important; transition: color 0.12s !important; } html body .td-cart-term-body a:hover { color: #1d4ed8 !important; text-decoration: underline !important; } /* Checkbox satırları — terms kutusunun dışında kalır, daha belirgin */ html body .td-cart-check { display: flex !important; align-items: flex-start !important; gap: 0.6rem !important; font-size: 0.82rem !important; line-height: 1.5 !important; color: #334155 !important; cursor: pointer !important; margin: 0 !important; font-weight: 500 !important; padding: 0.3rem 0 !important; } html body .td-cart-check input[type="checkbox"] { margin-top: 0.18rem !important; width: 16px !important; height: 16px !important; flex-shrink: 0 !important; accent-color: #2563eb !important; cursor: pointer !important; } html body .td-cart-check .req { color: #e11d48 !important; font-weight: 700 !important; font-size: 0.9em !important; } /* ══════════════════════════════════════════════════════════════════════ §FOOTER-TAP-FINAL MOBİL FOOTER KAYMA — KESİN ÇÖZÜM (v232) · Sorun: Mobilde footer boş alanına dokunulunca içerik yerleri değişiyor. · Kök sebepler: 1) Eski min-height (320/280/180px) kuralları footer'ı içerikten bağımsız sabitledi; dokunma sonrası layout değişince reflow görünür hale geldi. 2) overflow-anchor: none sadece .footer üzerindeydi; üst body/html Chromium'daki anchor kullanılıyordu. 3) iOS Safari: boş alana tap → scroll-anchor kaybı → tarayıcı yeni yakın node'a kayıyor. 4) footer-logo vb. focus → ScrollIntoView çalışıyor → sayfa kayıyor. · Çözüm: a) Footer min-height'larını sıfırla (sadece gerçek içerik yüksekliği). b) contain: layout style → footer reflow sayfaya sızmaz. c) touch-action: pan-y → yatay kayma yok, yalnızca dikey scroll. d) Dokunmatik'te focus → scroll tamamen engellendi. ══════════════════════════════════════════════════════════════════════ */ /* (a) min-height sıfırlama */ html body .footer, html body .footer .footer-content, html body .footer .footer-about { min-height: 0 !important; height: auto !important; } /* (b) v283: contain:layout ve overflow-anchor:kaldirildi — footer altindayken ustte buyuyen icerigin tarayici tarafindan telafi edilmesi icin footer subtree'si anchor adayı olmali. */ html body .footer, html body .footer * { touch-action: pan-y !important; } /* (c) Dokunmatik: focus-triggered scroll önleme */ @media (pointer: coarse), (hover: none) { html body .footer *:focus, html body .footer *:focus-visible, html body .footer *:focus-within { scroll-margin: 0 !important; scroll-margin-top: 0 !important; scroll-margin-bottom: 0 !important; outline: none !important; } html body .footer a, html body .footer button, html body .footer [tabindex] { scroll-margin: 0 !important; scroll-snap-align: none !important; } } /* Mobil ilk boyamada web font/i18n kaynaklı kümülatif kaymayı önle. */ @media (max-width: 768px) { html body { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; } html body #pricing-preview .section-subtitle, html body #reviews .section-subtitle { min-height: 52.1px !important; } html body .faq-question > i { width: 14px !important; min-width: 14px !important; flex: 0 0 14px !important; } } /* ══════════════════════════════════════════════════════════════════════ §MOBILE-FOOTER-TAP-LOCK (v278) Sadece touch cihazlarda: footer tıklamasında native focus-scroll engellenir. Masaüstünde hiçbir etkisi yoktur. ══════════════════════════════════════════════════════════════════════ */ @media (hover: none), (pointer: coarse) { html body .footer a, html body .footer button, html body .footer [tabindex] { touch-action: manipulation !important; scroll-margin: 0 !important; scroll-margin-top: 0 !important; scroll-margin-bottom: 0 !important; -webkit-tap-highlight-color: transparent !important; } html body .footer .footer-content, html body .footer .footer-section { /* v283: contain kaldirildi — contain:layout, footer gorunurken tarayicinin ustteki buyumeyi scroll-anchoring ile telafi etmesini engelliyordu. */ } } /* ══════════════════════════════════════════════════════════════════════ §FOOTER-HOVER-PADDING-LOCK (v279) — KÖK NEDEN DÜZELTMESİ app.css'de `html body .footer .footer-section:hover{padding:0!important}` (specificity :hover ile 0,3,2'ye çıkar) normal durumdaki padding:1rem kuralını ezer. Touch cihazda tıklama sticky :hover bıraktığı için footer-about 16px padding'ini kaybeder → genişlik 304→336, içerik ~54px yukarı kayar (ölçüldü: [FD] MOVED#1-25). Tüm state'lerde dinlenme değeri sabitlenir; masaüstünde görüntü değişmez. ══════════════════════════════════════════════════════════════════════ */ html body .footer .footer-about, html body .footer .footer-section, html body .footer .footer-about:hover, html body .footer .footer-section:hover, html body .footer .footer-about:active, html body .footer .footer-section:active, html body .footer .footer-about:focus-within, html body .footer .footer-section:focus-within, html body .footer .footer-about:focus-visible, html body .footer .footer-section:focus-visible { padding: 1rem !important; margin: 0 !important; } /* Footer linkleri sadece görünür ikon/metin alanı kadar tıklanabilir olsun. Grid hücrelerinin boş bölgeleri bağlantıya yönlendirme yapmamalıdır. */ html body .footer .footer-content.footer-content > .footer-section:nth-child(2) ul li, html body .footer .footer-content.footer-content > .footer-section:nth-child(3) ul li { display: flex !important; align-items: center !important; justify-content: center !important; } html body .footer .footer-content.footer-content > .footer-section:nth-child(2) ul li > a, html body .footer .footer-content.footer-content > .footer-section:nth-child(3) ul li > a { width: max-content !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; padding: 0.25rem !important; align-self: center !important; } html body .footer .footer-content.footer-content > .footer-section:nth-child(2) ul li > a > span { width: auto !important; } /* Footer platform badges and labels: keep the badge out of mobile label-grid rules, and retain the seven-column, icon-over-label presentation. */ html body .footer .footer-content.footer-content > .footer-section:nth-child(2) ul { display: grid !important; grid-template-columns: repeat(7, minmax(0, 1fr)) !important; width: 100% !important; max-width: 100% !important; gap: 0.75rem 0.15rem !important; justify-items: center !important; align-items: start !important; } html body .footer .footer-content.footer-content > .footer-section:nth-child(2) ul li { width: 100% !important; min-width: 0 !important; display: flex !important; justify-content: center !important; } html body .footer .footer-content.footer-content > .footer-section:nth-child(2) ul li > a { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; min-width: 0 !important; gap: 0.3rem !important; padding: 0.1rem 0 !important; } html body .footer .footer-content.footer-content > .footer-section:nth-child(2) ul li > a > .footer-icon-circle { display: inline-flex !important; flex: 0 0 36px !important; width: 36px !important; min-width: 36px !important; max-width: 36px !important; height: 38px !important; min-height: 38px !important; max-height: 38px !important; padding: 0 !important; box-sizing: border-box !important; align-items: center !important; justify-content: center !important; border-radius: 9px !important; overflow: hidden !important; } html body .footer .footer-content.footer-content > .footer-section:nth-child(2) ul li > a > .footer-icon-circle > i, html body .footer .footer-content.footer-content > .footer-section:nth-child(2) ul li > a > .footer-icon-circle > img, html body .footer .footer-content.footer-content > .footer-section:nth-child(2) ul li > a > .footer-icon-circle > svg { display: block !important; flex: 0 0 auto !important; width: 18px !important; min-width: 18px !important; max-width: 18px !important; height: 18px !important; min-height: 18px !important; max-height: 18px !important; object-fit: contain !important; font-size: 18px !important; line-height: 1 !important; } html body .footer .footer-content.footer-content > .footer-section:nth-child(2) ul li > a > span:not(.footer-icon-circle) { display: block !important; width: 100% !important; min-width: 0 !important; grid-column: auto !important; text-align: center !important; white-space: normal !important; font-size: 0.68rem !important; line-height: 1.15 !important; } /* Use fewer columns when the available footer width cannot comfortably fit seven platform names. The badge and its label remain stacked at all sizes. */ @media (min-width: 769px) and (max-width: 1100px) { html body .footer .footer-content.footer-content > .footer-section:nth-child(2) ul { grid-template-columns: repeat(10, minmax(0, 1fr)) !important; } html body .footer .footer-content.footer-content > .footer-section:nth-child(2) ul li { grid-column: span 2 !important; } html body .footer .footer-content.footer-content > .footer-section:nth-child(2) ul li:nth-child(11) { grid-column: 2 / span 2 !important; } html body .footer .footer-content.footer-content > .footer-section:nth-child(2) ul li:nth-child(12) { grid-column: 4 / span 2 !important; } html body .footer .footer-content.footer-content > .footer-section:nth-child(2) ul li:nth-child(13) { grid-column: 6 / span 2 !important; } html body .footer .footer-content.footer-content > .footer-section:nth-child(2) ul li:nth-child(14) { grid-column: 8 / span 2 !important; } } @media (max-width: 440px) { html body .footer .footer-content.footer-content > .footer-section:nth-child(2) ul { grid-template-columns: repeat(10, minmax(0, 1fr)) !important; } html body .footer .footer-content.footer-content > .footer-section:nth-child(2) ul li { grid-column: span 2 !important; } html body .footer .footer-content.footer-content > .footer-section:nth-child(2) ul li:nth-child(11) { grid-column: 2 / span 2 !important; } html body .footer .footer-content.footer-content > .footer-section:nth-child(2) ul li:nth-child(12) { grid-column: 4 / span 2 !important; } html body .footer .footer-content.footer-content > .footer-section:nth-child(2) ul li:nth-child(13) { grid-column: 6 / span 2 !important; } html body .footer .footer-content.footer-content > .footer-section:nth-child(2) ul li:nth-child(14) { grid-column: 8 / span 2 !important; } } @media (max-width: 340px) { html body .footer .footer-content.footer-content > .footer-section:nth-child(2) ul { grid-template-columns: repeat(8, minmax(0, 1fr)) !important; } html body .footer .footer-content.footer-content > .footer-section:nth-child(2) ul li { grid-column: span 2 !important; } html body .footer .footer-content.footer-content > .footer-section:nth-child(2) ul li:nth-child(11), html body .footer .footer-content.footer-content > .footer-section:nth-child(2) ul li:nth-child(12) { grid-column: span 2 !important; } html body .footer .footer-content.footer-content > .footer-section:nth-child(2) ul li:nth-child(13) { grid-column: 3 / span 2 !important; } html body .footer .footer-content.footer-content > .footer-section:nth-child(2) ul li:nth-child(14) { grid-column: 5 / span 2 !important; } } /* ========================================================================== §LIVE-TOAST-CLS-LOCK Canlı sipariş bildirimi kutusu alta sabitliydi ama yüksekliği içeriğe göre büyüyen (auto) bir flex sütunuydu: her yeni kartta kutunun ÜST kenarı ~110px yukarı, kart kaybolunca aşağı sıçrıyordu. Tarayıcı bunu layout shift sayar (ölçülen: 3 bildirimde CLS 0.176). Kutu yüksekliği 3 kartlık alana sabitlenip kartlar flex-end ile tabana yaslanınca tek kart aynı noktada belirip kayboluyor ve kutu rect'i hiç değişmiyor (ölçülen CLS 0.000). Görüntü aynı kalır: kutu şeffaf ve pointer-events:none, yani ayrılan boş alan ne görseli ne de tıklamaları etkiliyor. ========================================================================== */ html body .live-notifications, html body #liveNotifications, html body #live-notifications { height: 420px !important; justify-content: flex-end !important; } /* ========================================================================== §LIVE-TOAST-BAR-DRAIN Süre çizgisi (progressBar) 8sn'lik animasyonla bosaliyordu; toast süresi dolup .is-exiting eklenince app.css'in ".is-exiting::before{animation:none; opacity:0}" kurali animasyonu kesiyordu ve cizgi scaleX taban degerine, yani TAM dolulukla geri siyriyordu (olculdu: 8.0sn'de 0.18 -> 1.00). Sonuc: toast gitmeden once cizgi bir daha geliyormus gibi gorunuyor. Ayni animasyon adini daha yuksek ozgullukle yeniden bildirdigimiz icin animasyon kesilmeden 0'a kadar iniyor ve tam toast'in gittigi anda bitiyor. ========================================================================== */ @keyframes tdLiveBarDrain { from { transform: scaleX(1); } to { transform: scaleX(0); } } html body .live-notifications .notification-item::before, html body #liveNotifications .notification-item::before, html body #live-notifications .notification-item::before { animation: tdLiveBarDrain 8s linear forwards !important; transform-origin: left center !important; opacity: 1 !important; } /* ========================================================================== §FOOTER-BOTTOM-DIVIDER-CONTRAST Telif satirinin ustundeki ayirici cizgi app.css'te koyu griydi (rgb(55,65,81)) ve footer'in koyu mavi zeminiyle (rgb(30,58,138)) kontrast orani 1.004:1 — yani fiziksel olarak gorunmuyordu. Footer'in geri kalanindaki gibi yari saydam beyaza cevrildi (kontrast ~2.6:1, net ama yumusak). ========================================================================== */ html body .footer .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.32) !important; }