/* Today Arıtım - tema üzeri özel düzeltmeler. main.css'e DOKUNMA; her değişiklik buraya. */ /* Ürünler mega menüsü 3 sütuna indi (Main Pages kalktı). Tema 4 sütuna göre 1320px'e kurgulanmıştı; 315 + 315 + 377 = 1007px. max-width kısılmazsa sağda ~313px boşluk kalıyor. */ .mainmenu ul > li > .mega-menu-urunler, .mobile_menu ul > li > .mega-menu-urunler { max-width: 1007px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { /* bu aralıkta CTA sütunu 377 yerine 350px */ .mainmenu ul > li > .mega-menu-urunler, .mobile_menu ul > li > .mega-menu-urunler { max-width: 980px; } } /* Anasayfa kartları eşit yükseklikte olsun. Metinler panelden geldiği için uzunluk değişken; kart boyları kaymasın. */ .tj-service-slider .swiper-slide { height: auto; } .tj-service-slider .swiper-slide .service-style-2 { height: 100%; display: flex; flex-direction: column; } .tj-blog-section-two .row > [class*="col-"] { display: flex; } .tj-blog-section-two .blog-style-2 { width: 100%; display: flex; flex-direction: column; } .tj-blog-section-two .blog-style-2 .blog-content { display: flex; flex-direction: column; flex: 1 1 auto; } .tj-blog-section-two .blog-style-2 .blog-button { margin-top: auto; } /* Hizmet kartı: temada bu görünüm SADECE :hover'da açılıyordu. Tayfun "hep aktif kalsın" dedi -> main.css'teki .service-style-2:hover kurallarının aynısı, :hover olmadan. main.css'e DOKUNULMADI. */ .service-style-2 .thumb { opacity: 1; visibility: visible; } .service-style-2 .service-icon { background-color: var(--tj-color-common-white); } .service-style-2 .service-content .title a { color: var(--tj-color-common-white); } .service-style-2 .service-content .desc { color: var(--tj-color-common-white-2); } .service-style-2 .service-button, .service-style-2 .service-button i { color: var(--tj-color-common-white); } .service-style-2 .service-button::before { background-color: var(--tj-color-common-white); } /* ------------------------------------------------------------- İÇ SAYFA body.ic-sayfa = anasayfa DIŞINDAKİ tüm sayfalar (ust.php basar). Anasayfada saydam/bulanık kayan header var; iç sayfalarda üstte topbar olduğu için header kenara yapışık ve düz koyu zeminli olacak. Seçiciler `body.ic-sayfa` ile başlıyor -> tema kurallarından ve onların medya sorgularından daha SPESİFİK, o yüzden her kırılımda geçerli. */ /* header-wrapper padding'i sifirlaninca "Menu" butonunun dekoratif kareleri tam kenara dayanip 0.86px tasiyor ve sayfa 1px yatay kayabiliyordu. `clip` kullaniliyor: `hidden`in aksine kaydirma baglami YARATMAZ, bu yuzden position:fixed olan sticky header ve hamburger paneli etkilenmez. DIKKAT: kural 'e verilmeli; `clip` degeri body'den viewport'a DEVREDILMIYOR (body'ye yazilinca computed 'clip' oluyor ama sayfa yine 1px kayiyor). */ html.ic-sayfa { overflow-x: clip; } body.ic-sayfa .tj-header-area.header-2 .header-bottom, body.ic-sayfa .tj-header-area.header-2.header-duplicate .header-bottom { padding: 0px 50px; } body.ic-sayfa .tj-header-area.header-2 .header-bottom > .container-fluid { padding-inline: 0; } /* ⚠️ .container-fluid padding'i sıfırlanınca Bootstrap .row'un negatif kenar boşlukları (gutter/2 = 12px x2) açıkta kalıp 24px yatay taşma yapıyordu. Gutter'ı sıfırlamak hem row margin'ini hem col padding'ini birlikte kapatır. */ body.ic-sayfa .tj-header-area.header-2 .header-bottom > .container-fluid > .row { --bs-gutter-x: 0; } body.ic-sayfa .tj-header-area.header-2.header-absolute .header-wrapper, body.ic-sayfa .tj-header-area.header-2.header-duplicate .header-wrapper { padding: 0; -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(5, 18, 41, 0.8); } /* ------------------------------------------------- ÜRÜN DETAY GALERİSİ Temada küçük görseller Bootstrap "pill" sekmesiydi (kayma yok). Swiper'a çevrildi: ana görsel sağa/sola kayıyor, küçükler navigasyon. `nav` sınıfı kaldırıldığı için flex'i burada veriyoruz. */ /* ⚠️ Swiper'in slaytlari yan yana durdugu icin konteyner, kisitlanmazsa icerik genisligine sisiyordu (olculdu: 14.800px) ve kucuk gorsel sutununu 0 genislige eziyordu. Tema bu siniflara hic CSS vermemis, genisligi gorselin dogal boyutuna birakmis. flex kutuda daralabilmesi icin `min-width: 0` ZORUNLU. */ .urun-galeri { flex-wrap: nowrap; align-items: flex-start; } .urun-galeri .tj-product-img-wrap { flex: 1 1 auto; min-width: 0; max-width: 100%; } .urun-galeri .urun-galeri-slider, .urun-galeri .swiper-wrapper, .urun-galeri .swiper-slide { max-width: 100%; } .urun-galeri .product-img { display: flex; align-items: center; justify-content: center; height: 605px; background: var(--tj-color-theme-bg); overflow: hidden; } .urun-galeri .product-img img { width: 100%; height: 605px; object-fit: cover; } /* shop.css:5968 karşılığı - küçük görsel yüksekliği (temada 100%). */ .urun-galeri .tj-pdt-thumb-img img { width: 100%; height: 90px; -o-object-fit: cover; object-fit: cover; } /* shop.css:4126 karşılığı - "diğer ürünler" kartındaki görsel (temada sadece width). */ .tj-product-thumb img { width: 100%; height: 549px; object-fit: cover; } .urun-galeri .tj-product-thumb-items { display: flex; flex-direction: column; flex: 0 0 100px; max-width: 100px; /* 12 görselli üründe şerit ana görselden uzun kalıyor -> kendi içinde kaysın */ max-height: 605px; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; } .urun-galeri .tj-pdt-thumb-img { flex: 0 0 auto; border: 1px solid transparent; opacity: .55; transition: opacity .25s ease, border-color .25s ease; } .urun-galeri .tj-pdt-thumb-img.active, .urun-galeri .tj-pdt-thumb-img:hover { opacity: 1; border-color: var(--tj-color-theme-primary); } .urun-galeri .urun-galeri-slider { overflow: hidden; } .urun-galeri .urun-galeri-nav { position: absolute; inset-inline: 12px; top: 50%; transform: translateY(-50%); display: flex; justify-content: space-between; pointer-events: none; z-index: 3; } .urun-galeri .urun-galeri-nav button { pointer-events: auto; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--tj-color-common-white); color: var(--tj-color-heading-primary); box-shadow: 0 2px 14px rgba(5, 18, 41, .18); transition: background .25s ease, color .25s ease; } .urun-galeri .urun-galeri-nav button:hover { background: var(--tj-color-theme-primary); color: var(--tj-color-common-white); } @media (max-width: 575px) { .urun-galeri .tj-product-thumb-items { flex-direction: row; max-height: none; overflow-x: auto; overflow-y: hidden; } } /* Yasal metin sayfaları (gizlilik, kullanım koşulları): ara başlıklara nefes. */ .metin-sayfa h4 { margin-top: 34px; margin-bottom: 12px; } .metin-sayfa h4:first-child { margin-top: 0; } /* Blog detay: yazı içindeki görseller kolonu tam doldursun. */ .tj-post-single-post img { width: 100%; } /* Blog detay yan sütunu: diğer widget'lar kaldırıldı, sadece CTA kaldı. .tj-sidebar-widget'ın kendi padding'i CTA kutusunda fazlalık yapıyor. */ .tj-sidebar-widget.sidebar-cta-widget { padding: 0; } /* --------------------------------------------------------- İLETİŞİM KUTULARI Kolonlar zaten eşit yükseklikte (Bootstrap stretch) ama içlerindeki .contact-item metin uzunluğuna göre kısa kalıyordu (269/295/372/321px). Kolonu flex yapıp kutuyu tam yaydırıyoruz. */ .tj-contact-area .contact-item.style-2 { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; } /* ------------------------------------------------------ REFERANS IZGARASI Temada bu sayfa için hazır bir bölüm yoktu; 4'lü ızgara burada kuruldu. Logolar panelden (Hizmet Galeri -> "Referans Logoları"). */ .referans-grid { margin-top: 20px; } .referans-kutu { height: 100%; border: 1px solid var(--tj-color-border-2); background: var(--tj-color-common-white); padding: 30px 20px 22px; text-align: center; transition: border-color .3s ease, transform .3s ease; } .referans-kutu:hover { border-color: var(--tj-color-theme-primary); transform: translateY(-4px); } .referans-logo { display: flex; align-items: center; justify-content: center; height: 90px; margin-bottom: 16px; } .referans-logo img { max-width: 100%; max-height: 90px; width: auto; height: auto; object-fit: contain; } .referans-ad { display: block; font-size: 14px; line-height: 1.45; color: var(--tj-color-heading-primary); } /* Diğer ürünler bloğu: temada 120px üst boşluk vardı. */ .related-products.has-border { padding-top: 50px; } /* Ürün kartı görseli kutuyu tam doldursun. ⚠️ Panelden gelen gerçek ürün fotoğraflarının en-boy oranları çok farklı (349x144'ten 1600x1600'e); sabit yükseklik verilmezse kart boyları 377-714px arasında savruluyor. Temanın kendi görselleri 573x524 idi. */ .project-style-2 .project-images img { width: 100%; height: 465px; object-fit: cover; } /* Kartlar arası dikey boşluk: temada 300px, çok fazlaydı. NOT: kaydırmalı (şaşırtmalı) dizilim `:nth-child(even){margin-top:300px}` kuralından geliyor, o AYRI ve dokunulmadı. */ .project-style-2 { margin-bottom: 100px; } /* Ürün vitrini: evsel ürünler "Tümünü Gör"e basılana kadar gizli. ⚠️ Bu bloğun içindeki kartlara `wow` sınıfı VERME — WOW.js .wow ögelerini visibility:hidden yapar ve display:none içindekileri görünür saymaz, blok açılınca kartlar boş kalır. */ .evsel-urun-blok { display: none; } .evsel-urun-blok.acik { display: block; padding-top: 120px; } /* ---------------------------------------------------------------- FOOTER Tema 2 kolonluk dar bir iletişim sütununa göre kurgulanmıştı; 4 kolona (3-4-2-3) geçince ölçüler yeniden ayarlandı. */ /* İletişim/lokasyon sütunu: 230px'e sıkışmasın. */ .footer-widget.footer-contact-infos { max-width: 100%; } /* İki lokasyon arası boşluk (temada 40px). */ .footer-widget.footer-contact-infos .infos-item { margin-bottom: 20px; } /* Ayırıcı çizgilerin başlangıcı, yeni kolon genişliğine göre (temada %30). ⚠️ SADECE masaüstü: tema 992px altında bu çizgiyi zaten `-200px`e alıp tam genişliğe yayıyor; medya sorgusuz yazılınca telefonda da %23'ten başlıyor ve tek başına ortalanmamış bir çizgi olarak duruyordu. */ @media only screen and (min-width: 992px) { .tj-footer-area.footer-2 .footer-top-area .line::before, .footer-copyright-area-2 .line::before { -webkit-margin-start: 0; inset-inline-start: 23%; } } /* ─────────── ANASAYFA SAYACI: "15" (Tayfun, 2026-08-11) Tam kalın + rakamlar birbirine biraz daha yakın. ⚠️ Odometer rakamları AYRI `span.odometer-digit` kutuları; tema `.funfact-item-two .number span`e 700 veriyor ve bu seçici iç içe TÜM span'leri kapsıyor -> ağırlığı aynı seçiciyle ezmek gerekiyor (today.css main.css'ten sonra yüklendiği için kazanıyor). ⚠️ Rakamlar arası boşluk `letter-spacing` ile kapanmaz (aralarında karakter değil inline-block var); bitişik kardeşe negatif kenar boşluğu veriliyor. `em` kullanıldı: sayacın puntosu kırılımlarda 156px'ten 90px'e iniyor, boşluk da orantılı küçülsün. NOT: sondaki "+" işareti `.number`ın kendi metni, bu kurallardan etkilenmiyor — kalınlığı ve arası temadaki gibi kalıyor. */ .funfact-item-two .number span { font-weight: var(--tj-fw-black); } .funfact-item-two .number .odometer-digit + .odometer-digit { -webkit-margin-start: -0.04em; margin-inline-start: -0.04em; } /* ───────────────────────── YUKARI ÇIK BUTONU Etiket "GOTOP" (5 harf) -> "YUKARI ÇIK" (10 karakter) oldu. Buton dikey bir hap: metin `writing-mode: vertical-lr` ile yukarıdan aşağı akıyor, yani HARF SAYISI YÜKSEKLİĞİ BELİRLİYOR. Temanın 130px'i (ok ikonu + 10px boşluk dahil) yeni metinde yetmiyor, harfler taşıyordu -> yükseklik ve punto yeniden ayarlandı. */ /* İçerik: ok (16px) + 10px boşluk + dikey metin (80,8px) = 106,8px; temanın hap içi nefes payı ~40px -> 150px yeterli, ölçüldü. */ .back-to-top-wrapper { height: 160px; } .back-to-top-btn { height: 150px; } .back-to-top-btn span { font-size: 13px; letter-spacing: 0.06em; } /* ─────────── HAMBURGER (yan) MENÜ: TELEFONDA TAM EKRAN (Tayfun, 2026-08-11) Tema 450px (≤575px'te 320px) sabit genişlik veriyordu; 420px'lik bir telefonda ekranın ~%76'sını kaplıyor, arkada bir şerit kalıyordu. ⚠️ Kapalı konum da düzeltilmeli: tema `inset-inline-end: -490px` ile gizliyor; genişlik %100 olunca 490px'den GENİŞ ekranlarda (ör. 600-767px) panel kapalıyken sağdan görünürdü. */ @media only screen and (max-width: 767px) { .hamburger-area { width: 100%; inset-inline-end: -100%; } .hamburger-area.opened { inset-inline-end: 0; } } /* ─────────── FOOTER: 992px ALTINDA HER ŞEY ORTALI (Tayfun, 2026-08-11) Kolonlar alt alta (ya da 2'li) düştüğünde sola yaslı metinler dağınık duruyordu. Alt telif şeridi zaten temada ortalanıyor (992px altında `.copyright-content-area` flex-direction:column + center), üst bölüm de ona uyduruldu. */ @media only screen and (max-width: 991px) { .tj-footer-area.footer-2 .footer-widget { text-align: center; } /* max-width'i olan bloklar (logo 150px, tanıtım metni 310px) kutunun içinde sola yapışıyordu -> ortala. */ .tj-footer-area.footer-2 .footer-widget .footer-logo, .tj-footer-area.footer-2 .footer-widget .desc { margin-inline: auto; } /* Logo mobilde büyütüldü (Tayfun, 2026-08-11): main.css'teki 150px telefonda küçük kalıyordu. SADECE mobil; masaüstünde 150px duruyor (orada header logosuyla aynı boy). */ .tj-footer-area.footer-2 .footer-widget .footer-logo { max-width: 230px; } /* Bu üçü flex; text-align onları taşımaz, justify-content gerekiyor. */ .tj-footer-area.footer-2 .footer-widget .footer-social ul, .tj-footer-area.footer-2 .footer-widget.widget_nav_menu .widget-menu ul li a { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } /* Üst footer alt boşluğu (temada 100px). */ .footer-top-area { padding-bottom: 20px; } /* Sadece "By insidemedia.com.tr" kutusu; sağdaki copyright 38px kalsın. */ .copyright-2.copyright-insidemedia { -webkit-padding-start: 0; padding-inline-start: 0; } /* Referans (marka) bölümü. ANASAYFADA: ekip bölümü kaldırıldığı için üstte nefes payı gerekiyor. İÇ SAYFADA: üstünde zaten yorumlar bölümü var, boşluk kapatıldı. */ .tj-brand-section-two { padding-top: 120px; } body.ic-sayfa .tj-brand-section-two { padding-top: 0; } /* Kurumsal: özellik kartlarının üstüne nefes payı, alttaki 120px kapatıldı. */ .tj-feature-section.section-bottom-space { padding-top: 100px; padding-bottom: 0; } /* Sayaç ızgarası dar kutuya sıkışmasın (temada 560px). */ .tj-evolute-counter { max-width: 100%; } /* Hap şeklindeki başlık rozeti temada 395px'e göre kurgulanmıştı (İngilizce metin tek satırda 351px). TR metin 392px sürüyor ve 355px'lik iç alana sığmayıp 2 satıra kırılıyordu. */ .tj-brand-section-two .sec-heading .sec-title { max-width: 440px; } /* Tema logoları negatife çeviriyordu (beyaz logo varsayımı). Gerçek referans logoları renkli/koyu olacak -> invert KALKTI. */ .brand-slider-2 .brand-logo img { -webkit-filter: none; filter: none; } /* ⚠️ Marquee kenar solması temada `::before` %40 + `::after` %40 = şeridin %80'i beyaza gömülüyor; sadece ortadaki %20 net. 16 adet AYNI placeholder varken fark edilmiyordu, gerçek logolarda hepsi soluk görünüyor (ölçüldü: kenardaki 4 logo okunmuyor). Solma dar bir kenar payına indirildi. */ .brand-slider-2::before, .brand-slider-2::after { width: 10%; } /* ═══════════════════════ AÇILIŞ (GİRİŞ) EKRANI ═══════════════════════ Anasayfa açılınca tam ekranı kaplar. Sol yarı Endüstriyel, sağ yarı Evsel; üstte logo, altta "ANASAYFAYA DÖN". Arka plan hover'da fade ile değişir. ⚠️ KURAL (lothelmor KARŞILAMA olayından): görünürlük bir GEÇİŞE ya da JS'e bağlanmaz. Ekran CSS'te VARSAYILAN OLARAK GÖRÜNÜR; JS sadece kapatır ve hover'ı yönetir. JS kapalıysa index.php'deki