/* =================================================================== KURUMSAL TEMA — projeye özel eklemeler ⚠️ NEDEN AYRI DOSYA: style.min.css / responsive.min.css / business.css temanın (Crafto) KENDİ dosyalarıdır. Tema sürümü yükseltilince onlar değişir; içlerine yazdığımız her şey kaybolur. Bizim eklerimiz burada durur ve _Layout'ta EN SON yüklenir (özgüllük eşitse sonuncu kazanır). =================================================================== */ /* ------------------------------------------------------------------- Tam ekran slayt Temanın .full-screen sınıfı yüksekliği 100vh yapar, ama görselin o alanı DOLDURMASI ayrı bir iş: varsayılan olarak kendi en-boy oranını korur ve altta boşluk/taşma bırakır. ⚠️ object-fit:cover görseli kırpar — slayt görsellerinde önemli içerik (yazı, ürün) KENARLARA değil ORTAYA konmalı. Panelde önerilen masaüstü ölçüsü 2560px genişliktir. ------------------------------------------------------------------- */ .slider-full .swiper-slide { position: relative; overflow: hidden; } /* ⚠️ Görsel MUTLAK konumlu: akışta kalsaydı slaytın yüksekliğini kendisi belirler ve başlık/açıklama/butonu aşağı iterdi. Şimdi görsel arka plan katmanı, yazılar onun üstünde. */ .slider-full .swiper-slide picture { position: absolute; inset: 0; display: block; } .slider-full .swiper-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* Yazı okunabilirliği: başlıktaki scrim ile aynı gerekçe — slayt görseli açık renkli olabilir ve beyaz başlık kaybolur. Soldan sağa silikleşiyor çünkü metin blokta SOLDA hizalı (mobilde ortalanınca alt-üst geçiş daha iyi olurdu, ama tek gradyanla ikisini de idare eden yön bu). */ .slider-full .swiper-slide .slider-scrim { position: absolute; inset: 0; background: linear-gradient(to right, rgba(0, 0, 0, .65) 0%, rgba(0, 0, 0, .45) 45%, rgba(0, 0, 0, .15) 100%); pointer-events: none; } /* Yazı katmanı görselin ve örtünün ÜSTÜNDE. */ .slider-full .swiper-slide .slider-content { position: relative; z-index: 2; } /* ------------------------------------------------------------------- FOOTER LOGOSU Tema footer logosunu 26px'te tutuyordu (business.css) — footer'da kaybolacak kadar küçük. İki katına, 52px'e çıkarıyoruz. ⚠️ Özgüllük: business.css'teki kural "footer .footer-logo img" → aynı özgüllükte yazıp SONRA yüklendiğimiz için biz kazanırız. ------------------------------------------------------------------- */ footer .footer-logo img { /* 52px de küçük kalıyordu (kullanıcı geri bildirimi 2026-07-24). */ max-height: 76px; } /* ------------------------------------------------------------------- BAŞLIK ETİKETİNDEN ÇIKARILAN METİNLER SEO denetimi (2026-08-09) sayfada anlamsız heading'ler buldu: sayaç rakamları H2, slogan bandı H4, 22 kelimelik özet H6. Heading sırası içerik hiyerarşisini anlatır; rakam ve dekoratif metin oraya girince hem "seviye atlandı" hatası hem de sahte konu başlıkları oluşuyordu. Etiketler div/p'ye çevrildi; GÖRÜNÜM burada birebir korunuyor. ⚠️ Neden yalnız font-size/line-height: kalın/harf aralığı/boşluk zaten öğedeki yardımcı sınıflardan geliyor (fw-700, ls-minus-2px, mb-0 ...) — onlar etiketten bağımsız çalışır. Etikete bağlı olan tek şey punto ölçüsüydü. ⚠️ Neden REM: tema kök puntoyu ölçekliyor (masaüstü 16px → mobil 12px, canlıda ölçüldü). Üç değer de temanın kendi rem sayılarının aynısı, bu yüzden her kırılma noktasında eski hâliyle aynı hesaplanır. px yazsaydık mobilde üçü de olması gerekenden büyük kalırdı. ------------------------------------------------------------------- */ .sayac-rakam { /* eski h2 */ font-size: 3.438rem; line-height: 3.438rem; } .slogan-metni { /* eski h4 */ font-size: 2.375rem; line-height: 2.7rem; /* ⚠️ Bu satır ölçümle yakalandı: sayaç ve özet kendi ls-* yardımcı sınıfını taşıyor, slogan taşımıyordu — harf aralığını temanın "h1..h6" kuralından alıyormuş. Etiket div olunca sessizce "normal"e düşüyordu. */ letter-spacing: -.5px; } .bolum-ozeti { /* eski h6 */ font-size: 1.75rem; line-height: 1.95rem; } /* --- 2026-08-14 turu: dış SEO denetiminin "H1 en altta, üstünde dört H2" bulgusu --- .slayt-basligi: slayt başlıkları h2'ydi. Slayt sayısı kadar h2 üretiyorlardı ve metinleri KAMPANYA cümlesi ("Bayimiz olmak istermisiniz?"), sırası panelden değişiyor. .paket-fiyat: paket kartındaki tutar h3'tü — "₺ 900,00" bir konu başlığı değil, veridir. İkisi de yukarıdaki üçüyle aynı gerekçeyle etiketten çıkarıldı, punto burada korunuyor. */ .slayt-basligi { /* eski h2 */ font-size: 3.438rem; line-height: 3.438rem; } .paket-fiyat, /* eski h3: paket kartındaki tutar */ .liste-basligi { /* h3'ten h1'e ÇIKARILAN liste sayfası başlığı (aşağıdaki not) */ font-size: 2.813rem; line-height: 3.125rem; } /* .liste-basligi: blog/haber/referans/paket ve ürün liste sayfalarının başlığı h3'tü, yani o sayfaların H1'İ HİÇ YOKTU (ana sayfadaki bulgunun iç sayfalardaki hâli). Etiket h1 oldu; punto burada h3'ünkine sabitleniyor ki tasarım değişmesin — h1 temada 4.375rem, olduğu gibi bırakılsa başlık bir anda devleşirdi. */ /* ------------------------------------------------------------------- ANA SAYFANIN H1'İ = HEADER LOGOSU (2026-08-14) Logo bağlantısı ana sayfada

ile sarılıyor. Amaç sayfanın EN ÜSTÜNDE, görünür ve panelden değişmeyen bir h1 bulundurmak; tasarımın değişmemesi gerekiyordu. ⚠️ h1 temada 4.375rem punto + kendi kenar boşluğunu taşır. İçinde metin değil olduğu için punto görünür bir şey yapmaz, AMA logo yoksa yedek olarak site adı ile basılıyor (fs-20 sınıfı onu zaten eziyor) ve h1'in MARGIN'i her hâlükârda header'ı aşağı iterdi. Bu yüzden yazı biçimi "inherit"e, boşluklar sıfıra çekiliyor — .footer-site-adi'ndeki desenin aynısı, sabit sayı yazılmıyor. ------------------------------------------------------------------- */ .site-logo-h1 { font-size: inherit; line-height: inherit; letter-spacing: inherit; margin: 0; padding: 0; } /* h1 içindeki site adı: ekranda GÖRÜNMEZ ama HTML metninde VAR. Sebep: denetim araçları başlığın METİN İÇERİĞİNE bakıyor, img alt'ına bakmıyor — h1 yalnız sarmalayınca "Başlık metni boş bırakılmış" dedi (canlıda ölçüldü). ⚠️ display:none / visibility:hidden KULLANILAMAZ: metni tamamen düşürür, uyarı sürer. Klasik "görsel olarak gizle" kalıbı (1px kutu + clip) şart. ⚠️ position:absolute ama kutu 1px ve clip'li — konumlandırılmış ata gerekmiyor, taşma yapmaz, yatay kaydırma açmaz. */ .site-logo-metin { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ------------------------------------------------------------------- FOOTER SAĞ BLOĞU (logo + site adı + adres/telefon/e-posta) 17px'ten 16px'e (kullanıcı isteği 2026-08-09) — soldaki menü sütunları 14px'e indikten sonra sağ blok orantısız iri duruyordu. ⚠️ Kapsam .footer-iletisim ile sınırlı; solda menüler kendi kuralını kullanır. ⚠️ Site adı (h1) "font-size: inherit" olduğu için buradan beslenir — iki kuralı ayrı ayrı güncellemek gerekmez. ------------------------------------------------------------------- */ .footer-iletisim, .footer-iletisim a { font-size: 16px; } /* ⚠️ "a" AYRICA YAZILMAK ZORUNDA: tema bir medya sorgusu içinde global "a{font-size:17px}" tanımlıyor. Yalnız kapsayıcıya yazsaydık adres 16px'e inerdi ama TELEFON ve E-POSTA 17px kalırdı — yani bloğun yarısı küçülür, yarısı kalırdı. Ölçümle yakalandı. */ /* ------------------------------------------------------------------- FOOTER'DAKİ SİTE ADI = ANA SAYFANIN H1'İ Ana sayfada hiç h1 yoktu (2026-08-09 SEO analizi: 0 h1 / 8 h2). Footer'da site adı ZATEN görünüyordu; etiketi 'dan

'e çevirmek, tasarıma dokunmadan gerçek (ve görünür) bir h1 verdi. Yalnız ana sayfada h1 basılır — footer her sayfada olduğu için koşulsuz olsaydı iç sayfalarda ikinci bir h1 oluşurdu. ⚠️ SABİT PUNTO YAZMIYORUZ, "inherit" DİYORUZ. Temada h1 4.375rem; dokunmasak başlık 17px'ten 70px'e fırlardı. Sabit bir px/rem değeri yazmak da kırılgandı: footer punto ölçeği kırılma noktalarında değişirse sayı geride kalır ve kimse fark etmez. "inherit", öğeyi kardeşi olan ile bire bir aynı hesaplatır — hangi ekranda olursa olsun. ------------------------------------------------------------------- */ .footer-site-adi { font-size: inherit; line-height: inherit; letter-spacing: inherit; margin-bottom: 10px; } /* ------------------------------------------------------------------- FOOTER MENÜ SÜTUNLARI Sorun (kullanıcı bildirimi 2026-08-09): uzun menü adlarında yazılar "iç içe giriyor". Sebep punto değil TAŞMA: col-lg-8 içinde 5 sütun → sütun başına ~145px. Tarayıcı bir kelimeyi VARSAYILAN olarak bölmez; "Kurumsal Yazılım Çözümleri" gibi tek uzun kelime sütun sınırını aşıp komşu sütunun yazısının üstüne biner. Bu yüzden İKİ şey birden yapılıyor: 1) punto bir tık küçültülüyor (istenen), 2) overflow-wrap ile uzun kelime satır sonunda BÖLÜNÜYOR — asıl çakışmayı bitiren madde budur; yalnız punto küçültmek daha uzun bir kelimede aynı hatayı geri getirirdi. ⚠️ Kapsam bilerek .footer-menuler ile sınırlı: sağdaki marka/iletişim bloğu (adres, telefon) aynı footer içinde ama küçültülmemeli. ------------------------------------------------------------------- */ .footer-menuler { font-size: 14px; line-height: 1.65; } /* Sütun başlığı (kök menü) — gövdeden bir tık büyük kalsın ki başlık/alt bağlantı ayrımı kaybolmasın. */ .footer-menuler > .col > a, .footer-menuler > .col > span { font-size: 15px; } .footer-menuler a, .footer-menuler span { /* Uzun kelimeyi böl; sütun dışına taşıp komşuya binmesin. */ overflow-wrap: break-word; word-break: break-word; } /* L3 girintisi: 1rem (ps-3) dar sütunda metne yer bırakmıyordu. */ .footer-menuler ul ul.ps-3 { padding-left: .6rem !important; } /* ------------------------------------------------------------------- Şeffaf başlık (yalnız üstünde koyu görsel/bölüm olan sayfalarda) Tepedeyken menü slaytın üzerinde yüzer; sayfa aşağı inince temanın kendi JS'i header'a .sticky + .sticky-active ekler ve beyaz zemine döner (kural temada hazır: [data-header-hover=light]). Burada yalnız TEPEDEKİ görünümü tamamlıyoruz: tema, şeffaf başlıkta yazıların beyaz olacağını data-header-hover üzerinden değil, demoda koyu bir hero olduğunu varsayarak çözüyor. ------------------------------------------------------------------- */ header .navbar.header-transparent .navbar-nav .nav-link, header .navbar.header-transparent .navbar-nav .dropdown-toggle, header .navbar.header-transparent .header-icon a { color: var(--white); } /* Yapışkan hâle geçince tema zaten koyu renge çeviriyor; bizim kuralımız oraya karışmasın diye sticky durumunu açıkça geri veriyoruz. */ header.sticky.sticky-active .navbar.header-transparent .navbar-nav .nav-link, header.sticky.sticky-active .navbar.header-transparent .navbar-nav .dropdown-toggle, header.sticky.sticky-active .navbar.header-transparent .header-icon a { color: var(--dark-gray); } /* Mobilde açılan menü paneli beyaz zeminlidir → linkleri beyaz bırakmak onları görünmez yapardı. */ @media (max-width: 991px) { header .navbar.header-transparent .navbar-collapse .nav-link, header .navbar.header-transparent .navbar-collapse .dropdown-toggle { color: var(--dark-gray); } } /* ------------------------------------------------------------------- ŞEFFAF BAŞLIKTA OKUNABİLİRLİK ("scrim") SORUN: menü, slaytın üzerinde yüzüyor. Slayt görseli açık renkliyse (kar, gökyüzü, beyaz duvar) beyaz logo/menü/telefon o görselin içinde kayboluyor. Görselin rengini ÖNCEDEN bilemeyiz — müşteri istediğini yükler — o yüzden çözüm görselden BAĞIMSIZ olmalı. NEDEN SADECE text-shadow DEĞİL: açık zeminde beyaz yazının gölgesi ancak ince bir kenar verir, kontrastı gerçekten kurtarmaz. Asıl işi yapan, başlığın arkasına konan yukarıdan aşağı silikleşen koyu geçiş (scrim). Görselin üst şeridini hafifçe koyulaştırır, kompozisyonu bozmaz; sinema/video arayüzlerinin standart çözümü budur. ⚠️ SADECE ŞEFFAF DURUMDA: yapışkan hâlde zemin zaten beyaz, scrim orada kirli gri bir bant olarak görünürdü → opacity 0'a iner. ------------------------------------------------------------------- */ /* ⏸️ MENÜ SCRIM'İ ŞİMDİLİK PASİF (kullanıcı isteği 2026-07-20): slaydın KENDİ örtüsü (.slider-scrim) zaten koyulaştırma yapıyor; ikisi üst üste binince üst şerit gereğinden koyu duruyordu. Silinmedi, aşağıda duruyor — geri açmak için bu yorumu kapatıp kuralları serbest bırakmak yeterli. ⚠️ GERİ AÇMAK GEREKEBİLİR: slayt örtüsü SOLDAN SAĞA silikleşiyor ve sağ uçta alfa .15'e iner. Menünün SAĞ tarafındaki dil seçici ile telefon, açık renkli bir slayt görselinde zayıf kontrastta kalır (beyaz görselde ~1.2:1). Sol taraftaki logo/menü güvende, çünkü örtü orada .65. ⚠️ AYRICA: bu scrim SLAYT DIŞINDAKİ sayfalar için de tek güvenceydi. Şeffaf başlığı ileride koyu görselle açılan başka bir sayfada kullanırsak burayı yeniden değerlendir. DURAKLARIN GEREKÇESİ (geri açarken bozma): yazı, scrim'in ~%32'sine denk gelir (nav 92px + 50px taşma = 142px, yazı merkezi ~46px). İlk sürümde orada alfa 0.39'a düşüyordu ve bembeyaz bir slayt görselinde kontrast 2.8:1'de kalıyordu; WCAG AA eşiği 4.5:1. Koyuluğu %50'ye kadar korumak alfayı ~0.59'a çıkarır ve en kötü durumda 5.4:1 verir. NOT: aşağıdaki blokta iç yorum YOK — CSS yorumları iç içe geçmez, ilk kapanış işareti dış yorumu erkenden bitirir ve kural canlıya döner. header .navbar.header-transparent::before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: -50px; background: linear-gradient(to bottom, rgba(0, 0, 0, .65) 0%, rgba(0, 0, 0, .55) 50%, rgba(0, 0, 0, 0) 100%); pointer-events: none; transition: opacity .3s ease; } header.sticky.sticky-active .navbar.header-transparent::before { opacity: 0; } */ /* ------------------------------------------------------------------- LOGO ÖLÇÜSÜ Temanın varsayılanı logoyu bara göre küçük bırakıyordu: bar 92px, .navbar-brand dolgusu 30px+30px, logoya kalan 26px — barın yalnız %28'i. Dolgu 10px'e indirildi (kullanıcı kararı 2026-07-24), logo tavanı 72px. ⚠️ TOPLAM DEĞİŞMİYOR: 10 + 72 + 10 = 92px. Bar yüksekliği aynı kalsın istiyoruz çünkü scrim'in gradyan durakları ve yapışkan geçiş eşiği (headerHeight) bu ölçüye göre hesaplandı. ⚠️ Yapışkan hâlde tema dolguyu 20px'e çekiyor (header.sticky .navbar-brand) — orada logoyu biraz küçültüp barın incelmesine izin veriyoruz, üst bar kaydırırken yer kaplamasın. ------------------------------------------------------------------- */ header .navbar .navbar-brand { padding-top: 10px; padding-bottom: 10px; } header .navbar .navbar-brand img { max-height: 72px; } /* Yapışkan hâlde tema dolguyu 20px'e çekiyor → 92 - 40 = 52px kalıyor. */ header.sticky .navbar .navbar-brand img { max-height: 52px; } @media (max-width: 991px) { header .navbar .navbar-brand img { max-height: 38px; } } /* Scrim kapalıyken de zararsız, açılınca ŞART: içeriği öne alır. ⚠️ z-index'te negatif değer KULLANMIYORUZ — negatifte scrim, nav bir yığın bağlamı oluşturmadığı durumda atalarının arkasına düşüp slaytın ALTINDA kalabilir. İçeriği öne almak tarayıcıdan bağımsız olarak kesin. */ header .navbar.header-transparent > .container-fluid, header .navbar.header-transparent > .container { position: relative; z-index: 1; } /* ⏸️ GÖLGE ŞİMDİLİK PASİF (kullanıcı isteği 2026-07-20): scrim'in tek başına ne kadar iş gördüğünü görmek için kapatıldı. Geri açmak için aşağıdaki iki bloğun yorumunu kaldırmak yeterli — silmedim çünkü karşılaştırma sonucunda geri istenebilir. header .navbar.header-transparent .navbar-nav .nav-link, header .navbar.header-transparent .navbar-nav .dropdown-toggle, header .navbar.header-transparent .header-icon a { text-shadow: 0 1px 3px rgba(0, 0, 0, .45); } Logo bir PNG/SVG görsel → text-shadow işlemez, filter gerekir. drop-shadow şeklin ALFA kanalını izler (kutusunu değil), yani şeffaf zeminli logoda yalnız harflerin çevresine gölge düşer. header .navbar.header-transparent .navbar-brand img { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .45)); } */ /* Yapışkan hâlde zemin beyaz → gölgeler gereksiz ve kirli durur. */ header.sticky.sticky-active .navbar.header-transparent .navbar-nav .nav-link, header.sticky.sticky-active .navbar.header-transparent .navbar-nav .dropdown-toggle, header.sticky.sticky-active .navbar.header-transparent .header-icon a { text-shadow: none; } header.sticky.sticky-active .navbar.header-transparent .navbar-brand img { filter: none; } /* Mobilde açılan menü paneli beyaz zeminli → orada gölge okunabilirliği bozar (beyaz üstünde gri bulanıklık). */ @media (max-width: 991px) { header .navbar.header-transparent .navbar-collapse .nav-link, header .navbar.header-transparent .navbar-collapse .dropdown-toggle { text-shadow: none; } } /* ------------------------------------------------------------------- MARKA / REFERANS LOGOLARI Logolar farklı renk ve boyutlarda gelir; ham hâlde yan yana durunca şerit dağınık görünür. Tema demolarındaki çözüm: logoları soluk-gri göster, üzerine gelince gerçek rengine döndür. Böylece farklı markalar tek bir görsel dil içinde durur. ⚠️ Yükseklik SINIRLI, genişlik serbest: logo en-boy oranları çok değişkendir; sabit genişlik verilseydi geniş logolar ezilirdi. ------------------------------------------------------------------- */ /* ⚠️ KULLANICI KARARI 2026-07-21: logolar HEP RENKLİ. Tema demolarının standardı "gri dur, hover'da renklen"dir; burada bilinçli sapıyoruz — markalar belirgin olsun. (Gri varyantı geri istenirse: filter: grayscale(100%) + opacity .55 ve hover'da sıfırla.) Hover'da yalnız hafif bir büyüme bırakıldı ki bağlantı olduğu hissedilsin. */ .client-logo-hover img, img.client-logo-hover { max-height: 48px; width: auto; max-width: 100%; transition: transform .3s ease; } .client-logo-hover:hover img, img.client-logo-hover:hover { transform: scale(1.06); } /* Kayan marka şeridinde slaytlar dikeyde ortalanır (logo boyları farklı). */ .slider-client-logo .swiper-slide { display: flex; align-items: center; justify-content: center; } /* ------------------------------------------------------------------- DİL DEĞİŞTİRİCİ (bayraklı açılır liste) Tema bu bileşeni PNG bayraklar için yazmış (.icon-country img, 16x16). Biz flag-icons kullanıyoruz — bayrak bir , yani görsel değil arka plan. Bu yüzden kutuyu burada boyutluyoruz. ⚠️ Language.Flag ÜLKE kodudur (tr, gb), dil kodu DEĞİL: "en" dili için bayrak "gb" ya da "us" olabilir — dil kodundan türetilemez. Menü açılışı tema JS'ine ait (.dropdown → hover/touch → .open); burada yalnız görünüm tamamlanıyor. ------------------------------------------------------------------- */ .header-language .fi { /* Yanındaki telefon rozeti 35x35px; bayrak 4:3 oranında olduğu için 24px yükseklik onunla aynı optik ağırlığı verir (35px yükseklik 47px genişlik demek olurdu — barda fazla yer kaplardı). */ width: 32px; height: 24px; background-size: cover; border-radius: 3px; vertical-align: middle; } /* Açılır listede satırlar tek satırda kalsın (uzun dil adlarında kayma olmasın). */ .header-language .language-dropdown li a { white-space: nowrap; display: flex; align-items: center; } /* ------------------------------------------------------------------- DİL MENÜSÜ — yalnız bayrak olunca kutu daralmalı Tema bu listeyi "bayrak + dil adı" için tasarlamış: min-width 140px ve 20px iç boşluk. Etiketi kaldırınca (kullanıcı kararı) bayrakların sağında kocaman boş beyaz alan kalıyordu. Kutuyu içeriğe göre daraltıyoruz. ------------------------------------------------------------------- */ .header-language-icon .header-language .language-dropdown { /* ⚠️ ÖZGÜLLÜK: tema kuralı 3 sınıflı (.header-language-icon .header-language .language-dropdown). Daha kısa bir seçici yazarsak tema kazanır ve hiçbir şey değişmez — bu yaşandı. Aynı özgüllükte yazıyoruz; custom.css SONRA yüklendiği için biz kazanıyoruz. Yalnız bayraklar görünsün: beyaz kutu, gölge ve iç boşluk kaldırıldı. */ background-color: transparent; box-shadow: none; min-width: 0; padding: 8px 0 0; text-align: center; } .header-language-icon .header-language .language-dropdown li a { /* Bayraklar bitişik dursun: satır yüksekliği ve iç boşluk sıfır, blok gösterim ile satır arası boşluk da kalkar. */ justify-content: center; display: block; line-height: 0; padding: 0; } /*
  • öğeleri de boşluk üretmesin (tema li'ye margin verebiliyor). */ .header-language-icon .header-language .language-dropdown li { margin: 0; padding: 0; line-height: 0; } /* ------------------------------------------------------------------- YORUM KARTLARI (carousel) — EŞİT YÜKSEKLİK Swiper slaytlara kendi içeriği kadar yükseklik verir; uzun yorum uzun, kısa yorum kısa kart üretir ve şerit tırtıklı görünür. Çözüm üç parça: 1) slaytlar "height:auto" olur → satır boyunca esner (stretch), 2) karta h-100 + min-height → kısa yorumda da dolgun durur, 3) metin satır sayısıyla sınırlanır → uzun yorum kartı şişirmez. ⚠️ MAKSİMUMU line-clamp ile veriyoruz, max-height ile DEĞİL: sabit yükseklikte metin kutunun dışına taşar ya da ortadan kesilir; line-clamp satır sonunda "…" ile biter, okunabilir kalır. ------------------------------------------------------------------- */ .slider-three-slide .swiper-slide { height: auto; } .slider-three-slide .swiper-slide > div { min-height: 260px; } .slider-three-slide .swiper-slide p { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; /* NOT: kişi bloğunu alta yaslama işi BURADA yapılmıyor — temanın mb-20px sınıfı "!important" taşıdığı için buradan verilen margin eziliyordu. View'da kişi bloğuna Bootstrap'in mt-auto sınıfı verildi (o da !important). */ } /* ------------------------------------------------------------------- İÇERİK KARTLARI (blog / hizmet) — EŞİT YÜKSEKLİK Kartlar farklı uzunlukta başlık ve özet taşır; ızgarada satır tırtıklı görünür. Görsel sabit yükseklikte kırpılır, metinler satır sayısıyla sınırlanır — böylece her kart aynı ölçüde durur. ⚠️ object-fit:cover: farklı en-boy oranındaki kapaklar ezilmeden kırpılır. Kapaklarda önemli öge ORTADA olmalı. ⚠️ Satır sınırı max-height ile DEĞİL line-clamp ile: sabit yükseklikte metin kutudan taşar ya da ortadan kesilir; line-clamp "…" ile biter. ------------------------------------------------------------------- */ .icerik-karti .blog-image img { width: 100%; height: 220px; object-fit: cover; } .icerik-karti .card-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .icerik-karti .card-body p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Kategori ile tarih arasında ayırıcı nokta (demodaki gibi). */ .icerik-karti .categories-text + .blog-date::before { content: "•"; margin: 0 6px; opacity: .6; } /* ------------------------------------------------------------------- ÜRÜN KARTI (_UrunKart) — liste, ana sayfa, ilgili ürünler İnce çerçeve + iç boşluk: görsel kart kenarına yapışıp kırpılmasın. SABİT görsel yüksekliği + cover → kartlar hizalı durur. ------------------------------------------------------------------- */ /* ÜRÜN GRİDİ — SÜTUN ARALIĞI ⚠️ Bootstrap'in g-* sınıfları bu temada İŞE YARAMAZ: style.min.css `[class*=col-] { padding: 0 15px }` diyor ve --bs-gutter-x'i devre dışı bırakıyor (aynı özgüllük, daha sonra yükleniyor). Bu yüzden aralık burada, DAHA YÜKSEK özgüllükle (0,2,0) eziliyor. 15px → 7px: kullanıcı isteğiyle yarı yarıya (kartlar arası 30px → 14px). Kazanılan yer kart genişliğine gider; 4 sütunda rozetlerin sıkışmasının asıl çözümü budur. */ .urun-grid > [class*="col-"] { padding-left: 7px; padding-right: 7px; } /* Grid daraldığı kadar dışa taşmasın: satırın kendi negatif kenar boşluğu da eşitlenir. */ .urun-grid { margin-left: -7px; margin-right: -7px; } .urun-karti { border: 0.1px solid #e9e2e2; border-radius: 5px; padding: 10px; background: #fff; } .urun-karti .shop-image { border-radius: 4px; } /* ⚠️ object-fit:contain (cover DEĞİL): ürün görseli yanlardan KIRPILMASIN (kullanıcı isteği 2026-07-25). Görsel 300px kutuya sığar, artan yeri açık gri zemin doldurur. */ .urun-karti .shop-image img { width: 100%; height: 300px; object-fit: contain; border-radius: 4px; } /* shop-footer SABİT yükseklik: fiyat olsun olmasın kart boyu değişmesin (içeriğe göre büyümez). ⚠️ SABİT YÜKSEKLİK + overflow:hidden BİR TUZAK ÜRETİYORDU: ürün adı uzun olunca fiyat satırı kutunun dışına itiliyor ve HİÇ GÖRÜNMÜYORDU (kullanıcı bildirimi 2026-08-02). Çözüm sabit yüksekliği kaldırmak değil (o zaman kartlar birbirini tutmaz), içeriği hizalamaktır: • flex sütun → sıra üstten alta akar • .urun-ad → ad en fazla 2 satır, taşarsa "…" • .urun-fiyat → margin-top:auto ile DAİMA en altta, adı ne kadar uzun olursa olsun görünür Üst boşluk (padding-top) burada: markup'taki pt-20px kaldırıldı, kategori satırı "İncele" butonuna yaklaştırıldı (kullanıcı isteği). */ .urun-karti .shop-footer { height: 115px; overflow: hidden; padding-top: 6px; display: flex; flex-direction: column; } /* Ürün adı en fazla 2 satır — 3. satır fiyatın yerini yerdi. */ .urun-karti .urun-ad { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; } /* Fiyat KARTIN ALTINA sabitlenir — ürün adının uzunluğundan bağımsız, tüm kartlarda aynı hizada. ⚠️ Markup'ta "mt-1" gibi Bootstrap boşluk sınıfı KULLANMA: onlar `!important` taşır ve buradaki `margin-top: auto` kuralını ezerek fiyatı yeniden adın altına yapıştırır (yaşandı 2026-08-02). */ .urun-karti .urun-fiyat { margin-top: auto; padding-top: 4px; } /* Rozet grubu — sol üstte DİKEY yığın (İndirim + Kampanya). */ .urun-karti .rozet-grup { position: absolute; top: 8px; left: 8px; z-index: 2; display: flex; flex-direction: column; gap: 4px; } .urun-karti .rozet { padding: 2px 9px; font-size: 10px; font-weight: 700; line-height: 1.7; text-transform: uppercase; border-radius: 3px; color: #fff; } /* "Stok Sorunuz" — ÜST-SAĞ köşe. ⚠️ Bir ara alt-sağa alınmıştı; orası "İNCELE" hover butonunun alanı olduğu için onun üstüne bindi (daha kötüsü oldu, kullanıcı bildirimi 2026-08-02). Üst köşede kalır; sol üstteki indirim/kampanya rozetleriyle çakışmaması KART GENİŞLİĞİYLE çözülür (sütun aralığı daraltıldı), rozetin yerini değiştirerek değil. Rozet ayrıca küçültüldü: dar kartta daha az yer kaplasın. */ .urun-karti .stok-rozet { position: absolute; top: 8px; right: 8px; z-index: 2; /* ⚠️ BOYUT KÜÇÜLTÜLMEZ: 9px'e indirilmişti, okunmuyordu (kullanıcı bildirimi 2026-08-02). Bootstrap .badge varsayılanı korunur — mobilde de okunabilir kalsın. */ white-space: nowrap; } .urun-karti .rozet.indirim { background-color: #2e7fd6; } /* mavi */ .urun-karti .rozet.cok-satan { background-color: #4caf50; } /* yeşil */ .urun-karti .rozet.kampanya { background-color: #e8663d; } /* turuncu */ /* Ürün detay galeri thumbnail'i (Amazon tarzı): kenarlık + hover/aktif mavi vurgu. */ .urun-thumb { border: 1px solid #e9e2e2; cursor: pointer; transition: border-color .15s; } .urun-thumb:hover, .urun-thumb.aktif { border-color: #2e7fd6; } /* Dikey thumbnail carousel'i + ana görsel: yükseklikleri EŞİT (yan yana hizalı dursun). */ .urun-ana-gorsel-kutu { height: 480px; } .urun-thumb-swiper { height: 480px; } @media (max-width: 991px) { .urun-ana-gorsel-kutu, .urun-thumb-swiper { height: 360px; } } @media (max-width: 575px) { .urun-ana-gorsel-kutu, .urun-thumb-swiper { height: 280px; } } /* Dikey nav butonları (yukarı/aşağı) — şeridin üstünde ve altında. */ .urun-thumb-nav { width: 30px; height: 30px; margin: 6px auto; border-radius: 50%; background: #fff; border: 1px solid #e9e2e2; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #232323; font-size: 12px; transition: all .15s; } .urun-thumb-nav:hover { border-color: #2e7fd6; color: #2e7fd6; } .urun-thumb-nav.swiper-button-disabled { opacity: .3; cursor: default; } /* Public form "+ Ekle" (tekrarlayan grup): tema .btn:hover'ı yazıyı beyaza çeviriyor ama outline butonun zemini beyaz kaldığı için "Ekle" kayboluyordu → hover'da gri zemin zorlanır (okunur). */ .pf-group-ekle:hover, .pf-group-ekle:focus { background-color: #6c757d !important; border-color: #6c757d !important; color: #fff !important; } /* Hover "İncele" butonu — shop-hover genişliğinde, MAVİ, 5px köşe. */ .urun-karti .shop-hover .incele-btn { width: 100%; white-space: nowrap; background-color: #2e7fd6; border-color: #2e7fd6; color: #fff; border-radius: 5px; } .urun-karti .shop-hover .incele-btn:hover { background-color: #256bb5; border-color: #256bb5; color: #fff; } /* ------------------------------------------------------------------- ÖNE ÇIKAN MENÜ BUTONU Temanın "btn-rounded" sınıfı hapı andıran tam yuvarlak kenar veriyor; menü çubuğundaki kısa etiketlerde iri ve hantal duruyordu. Köşeleri yumuşatılmış dikdörtgen daha sakin ve modern. ------------------------------------------------------------------- */ /* ⚠️ SEÇİCİ TEMANINKİYLE AYNI ZİNCİRİ TAŞIR — kısaltma DENEME. Tema şu kuralı basıyor: header .navbar [class*="col-"] .navbar-nav .nav-item a { align-self: stretch } Bu, bağlantıyı MENÜ BARININ TAM YÜKSEKLİĞİNE (92px) geriyor. Kısa bir seçiciyle yazılan padding uygulanıyor ama buton zaten gerildiği için görünürde hiçbir şey değişmiyordu (yaşandı: "hala boşluk yok"). align-self'i geri almadan dolgu anlamsız. */ /* Butonun yanlarında 10'ar piksel — komşu menü bağlantılarına yapışmasın. Boşluk BUTONA değil SARMALAYICI
  • 'ye verilir: buton marjı tema tarafından sıfırlanıyor (dikey boşlukta yaşandı), li marjına dokunulmuyor. */ header .navbar [class*="col-"] .navbar-nav .nav-item.menu-vurgu-li { margin-left: 10px; margin-right: 10px; } header .navbar [class*="col-"] .navbar-nav .nav-item a.menu-vurgu-btn { align-self: center; /* ⚠️ SABİT YÜKSEKLİK (kullanıcı kararı 2026-07-24): önce "calc(100% - 40px)" ile bar yüksekliğine göre hesaplanıyordu; ama tema YAPIŞKAN durumda barı 92px→72px küçültüyor ve buton 52px→32px düşüp beyaz menüde şeffaftakinden farklı görünüyordu. Sabit 52px ile buton HER DURUMDA aynı boyda; align-self:center marjı kendiliğinden ortalar (şeffaf 92px barda 20px, yapışkan 72px barda 10px — buton hep aynı). */ height: 52px; border-radius: 8px; padding: 9px 18px; line-height: 1.4; } /* ⚠️ RENKLER HER İKİ BANT İÇİN SABİTLENİR (şeffaf + beyaz yapışkan): şeffaf başlıkta custom.css menü bağlantılarını BEYAZ yapıyor, yapışkanda tema KOYU yapıyor. Buton bu kuralların kapsamına girince hover'da yazı zeminle aynı renge düşüp okunmaz oluyordu (yaşandı). Buton kendi rengini her durumda dayatır. */ header .navbar .menu-vurgu-btn, header .navbar .menu-vurgu-btn:hover, header .navbar .menu-vurgu-btn:focus, header.sticky.sticky-active .navbar .menu-vurgu-btn, header.sticky.sticky-active .navbar .menu-vurgu-btn:hover { background-color: var(--base-color); border-color: var(--base-color); color: var(--white) !important; opacity: 1; text-shadow: none; } /* Hover'da renk değiştirmek yerine hafifçe koyulaşır — kontrast bozulmadan "tıklanabilir" geri bildirimi verir. */ header .navbar .menu-vurgu-btn:hover { filter: brightness(.88); } /* -------------------------------------------------------------------- PAKET KARTI — "ÇOK SATAN" KURDELESİ Ürünün "Çok satan" (IsBestseller) anahtarı işaretliyse kartın sağ üst köşesini çapraz kesen bir bant çıkar. ⚠️ Temada kurdele sınıfı YOK (arandı) — bu tamamen proje eki. -------------------------------------------------------------------- */ .paket-karti { /* Kurdele konumlandırmasının çıpası. */ position: relative; /* Köşeden taşan bandın kart dışına sarkmasını keser. Yuvarlatılmış köşeli kartta bandın ucu da kavise uyar. */ overflow: hidden; } .paket-rozet { position: absolute; /* Bant köşeden içeri kaydırılır; genişlik köşegeni örtecek kadar geniş tutulur ki iki ucu da kartın kenarlarına dayansın. */ top: 22px; right: -52px; width: 190px; transform: rotate(45deg); /* ⚠️ Marka rengi + beyaz yazı. Önce açık ton (--solitude-blue #f0f4fd) denendi: öne çıkan kartın zemini BEYAZ olduğu için bant neredeyse görünmüyordu. Beyaz üzerine #5758D6 kontrastı 5.5:1 → WCAG AA'yı geçer. */ background-color: var(--base-color); color: var(--white); text-align: center; text-transform: uppercase; font-size: 11px; font-weight: 600; letter-spacing: 1px; line-height: 1.2; padding: 7px 0; /* Kart içeriğinin (fiyat başlığı) üstünde kalsın. */ z-index: 2; /* Bant dekoratif: üstündeki metne tıklama girişimini yutmasın. */ pointer-events: none; } /* -------------------------------------------------------------------- HİZMET ŞERİDİ (carousel) — gezinme okları Oklar kartların ÜSTÜNE değil, şeridin İKİ YANINA konumlanır: demodaki kart görselinin ortasında daire ok butonu var, ikisi üst üste binerdi. ⚠️ Konteynerden taşarlar (-22px): container'ın yan boşluğuna otururlar, kart genişliğinden çalmazlar. -------------------------------------------------------------------- */ .hizmet-seridi .swiper-button-prev, .hizmet-seridi .swiper-button-next { /* Swiper okları normalde .swiper içine konur; biz DIŞINA aldık, bu yüzden konumlandırma çıpası .hizmet-seridi (position-relative). */ position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 44px; height: 44px; border-radius: 50%; } /* ⚠️ "left: auto" ŞART: tema .swiper-button-next'e de sol konum veriyor ve LTR'de left, right'ı ezer — iki ok da SOLDA üst üste biniyordu (yaşandı, ölçüldü: sonraki okun computed left=0). Yalnız right yazmak yetmez. */ /* Dışa taşmayı azalt (kullanıcı: tam görünmüyordu) — kenara yakın ama içeride. */ .hizmet-seridi .swiper-button-prev { left: -6px; right: auto; } .hizmet-seridi .swiper-button-next { right: -6px; left: auto; } /* Dar ekranda taşma yatay kaydırma çubuğu doğurur → oklar içeri alınır. */ @media (max-width: 991px) { .hizmet-seridi .swiper-button-prev { left: 0; right: auto; } .hizmet-seridi .swiper-button-next { right: 0; left: auto; } } /* Kartlar EŞİT YÜKSEKLİKTE: özet metni farklı uzunlukta olduğunda şerit tırtıklı görünüyordu. swiper-slide varsayılan olarak içeriğe göre büzülür, flex ile gerdiriyoruz. */ .hizmet-seridi .swiper-slide { height: auto; display: flex; } .hizmet-seridi .swiper-slide > * { width: 100%; } /* -------------------------------------------------------------------- HİZMET / REFERANS KARTI (_HizmetKarti.cshtml) Kartlar YAN YANA durduğu için her parçası aynı hizada olmalı; aksi halde biri yukarıda biri aşağıda kalıyor (yaşandı). -------------------------------------------------------------------- */ /* GÖRSEL: sabit yükseklik + object-fit:cover. ⚠️ cover, en-boy oranını KORUYARAK kırpar (gerektiğinde yakınlaştırır) — istenen "zoom yap ama oran bozulmasın" davranışı tam olarak budur. height sabit olduğu için min ve max aynı değerdir: dikey hiza garanti. ⚠️ Görselin ÖNEMLİ kısmı ORTADA olmalı; kenarlar kırpılabilir. */ .hizmet-karti .box-image { height: 240px; overflow: hidden; } .hizmet-karti .box-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* BAŞLIK: en fazla 2 satır. Sabit yükseklik (min-height) veriliyor ki tek satırlık başlıkla iki satırlık başlığın özetleri aynı hizada başlasın. */ .hizmet-karti .kart-baslik { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; /* ⚠️ min-height BURADA DEĞİL .kart-ust'te: başlığa verilince tek satırlık başlıkta ikinci satırın yeri boş kalıyor ve kategori kopuk duruyordu. */ line-height: 1.4; } /* ÖZET: en fazla 3 satır, sabit yükseklik. ⚠️ KISALTMA CSS İLE, sunucuda DEĞİL: tam metin HTML'de kalır, arama motoru ve AI botu içeriğin tamamını görür — SSR kararımızın gereği. ⚠️ Özet boş olsa bile kutu yer kaplar (markup'ta

    daima basılır) — böylece özeti olan/olmayan kartlar aynı boyda durur. */ .hizmet-karti .kart-ozet { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.6; min-height: calc(3 * 1.6em); margin-bottom: 0; } /* Izgarada (Referanslar) kartların eşit boyda olması için: Bootstrap sütunu içeriğe göre büzülür, h-100 ancak sütun gerilmişse işe yarar. */ .hizmet-karti { height: 100%; } /* -------------------------------------------------------------------- MEGA MENÜ — sütun başlıkları Temanın mega menüsü DÜZ liste sütunlarından oluşuyor (başlık kavramı yok). Bizde 2. kırılım sütun BAŞLIĞI, 3. kırılım o sütunun öğeleri. -------------------------------------------------------------------- */ .mega-menu .mega-sutun-baslik { margin-bottom: 12px; padding-bottom: 10px; /* İnce ayırıcı — başlığı kendi öğelerinden görsel olarak ayırır. */ border-bottom: 1px solid rgba(0, 0, 0, .1); } .mega-menu .mega-sutun-baslik > a, .mega-menu .mega-sutun-baslik > span { display: block; color: var(--base-color); font-weight: 600; text-transform: uppercase; font-size: 13px; letter-spacing: .5px; } /* Başlık bağlantısı da olsa öğe gibi soluklaşmasın. */ .mega-menu .mega-sutun-baslik > a:hover { opacity: .75; } /* Sütunlar arasında nefes payı; dar ekranda (flex kapalı) alt alta yığılırken aradaki boşluk dikeye döner. */ .mega-menu .mega-sutun { padding-right: 30px; } @media (max-width: 991px) { .mega-menu .mega-sutun { padding-right: 0; margin-bottom: 20px; } } /* -------------------------------------------------------------------- KLASİK AÇILIR MENÜ — 3. kırılım girintisi ⚠️ Yan panel (hover ile açılan iç menü) YAPILMADI: tema bunun JS/CSS'ini taşımıyor ve elle yazılan yan panel dokunmatikte açılamaz olurdu. Girinti hem masaüstünde hem mobilde çalışır. -------------------------------------------------------------------- */ .dropdown-menu .alt-menu-torun > a { padding-left: 18px; font-size: 13px; opacity: .85; } /* Girintili öğenin başında ince bir çizgi: hangi başlığa ait olduğu anlaşılsın. */ .dropdown-menu .alt-menu-torun > a::before { content: "–"; margin-right: 6px; opacity: .5; } /* -------------------------------------------------------------------- MEGA MENÜ — RENK ve SÜTUN DÜZENİ ⚠️ Tema mega menü panelini (.submenu-content) BEYAZ bırakıyor, klasik açılır menüyü ise KOYU yapıyor (ölçüldü: klasik #262b35 + beyaz yazı, mega #ffffff). Aynı menü çubuğunda iki farklı stil olunca mega menü açıkken yazılar okunmuyordu. Klasik menünün stilini mega menüye taşıyoruz. ⚠️ SEÇİCİ ZİNCİRİ UZUN TUTULMALI: temanın kuralı .navbar .navbar-nav .dropdown .dropdown-menu (4 SINIF) Kısa yazılan "header .navbar .dropdown-menu.submenu-content" (3 sınıf + 1 eleman) KAYBEDİYOR — özgüllükte sınıf sayısı eleman sayısından önce karşılaştırılır. Yaşandı: kural dosyada duruyordu ama zemin beyaz kalıyordu. -------------------------------------------------------------------- */ header .navbar .navbar-nav .dropdown .dropdown-menu.submenu-content { background-color: #262b35; border-color: #424242 !important; } header .navbar .navbar-nav .dropdown .dropdown-menu.submenu-content a, header .navbar .navbar-nav .dropdown .dropdown-menu.submenu-content span { color: var(--white); } header .navbar .navbar-nav .dropdown .dropdown-menu.submenu-content a:hover { opacity: .7; } /* Sütun başlığı koyu zeminde: marka rengi yerine daha açık bir vurgu — #5758D6 koyu lacivert üstünde zayıf kontrast veriyor. */ header .navbar .navbar-nav .dropdown .dropdown-menu.submenu-content .mega-sutun-baslik > a, header .navbar .navbar-nav .dropdown .dropdown-menu.submenu-content .mega-sutun-baslik > span { /* ⚠️ Marka moru (#5758D6) koyu zeminde 2.1:1 kontrast veriyor — okunmuyor. Açık lavanta tonu ~7:1 ile WCAG AA'yı rahat geçer. */ color: #a9abff; } /* Başlık altındaki ayırıcı da koyu zemine göre açık tonlanır. */ header .navbar .navbar-nav .dropdown .dropdown-menu.submenu-content .mega-sutun-baslik { border-bottom-color: rgba(255, 255, 255, .15); } /* SÜTUNLAR: satır başına EN FAZLA 4, fazlası alta sarar. ⚠️ Bootstrap ".col" eşit paylaştırır ve SARMAZ — 6 alt menüde altı sütun tek satıra sıkışıp okunmaz hale gelirdi. Sabit %25 taban + wrap gerekiyor. */ @media (min-width: 992px) { .mega-menu { flex-wrap: wrap; } .mega-menu .mega-sutun { flex: 0 0 25%; max-width: 25%; margin-bottom: 20px; } } /* Kart kategorisi — başlıkla özet arasında ince bir etiket satırı. Blog kartındaki .categories-text ile aynı görsel dil (küçük, büyük harf). */ .hizmet-karti .kart-kategori { display: block; font-size: 12px; line-height: 1.6; text-transform: uppercase; letter-spacing: .5px; color: var(--base-color); font-weight: 600; margin-bottom: 8px; } /* -------------------------------------------------------------------- ŞEFFAF BAŞLIKTA AÇILIR MENÜ — "submenu-light" ETKİSİZLEŞTİRİLİR Tema, açılır/mega menü açıldığında navbar'a JS ile ".submenu-light" ekler (ölçüldü: hover'da sınıf listesine giriyor). O sınıf iki iş yapıyor: .submenu-light { background-color: var(--white) !important } .submenu-light .navbar-nav .nav-link { color: var(--dark-gray) } Varsayımı şu: açılan panel AÇIK renklidir, o hâlde bar da beyaza dönsün. ⚠️ BİZDE PANEL KOYU (klasik menüyle aynı stile getirdik) → bar beyaza dönünce slaydın üstünde duran şeffaf başlık bir anda beyaz bir şerit oluyordu. ⚠️ YALNIZ ŞEFFAF DURUM İÇİN: ".header-transparent" varken geri alıyoruz. Yapışkan/iç sayfa başlığı zaten beyaz — orada tema davranışı DOĞRU, dokunmuyoruz. ⚠️ !important ŞART: temanın kuralı da !important taşıyor. -------------------------------------------------------------------- */ header .navbar.header-transparent.submenu-light { background-color: transparent !important; } /* Bar şeffaf kalınca yazılar da beyaz kalmalı — tema onları koyuya çeviriyordu ve koyu slayt üstünde okunmaz oluyorlardı. */ header .navbar.header-transparent.submenu-light .navbar-nav .nav-link, header .navbar.header-transparent.submenu-light .navbar-nav .dropdown-toggle, header .navbar.header-transparent.submenu-light .header-icon .icon > a, header .navbar.header-transparent.submenu-light .header-icon .icon .header-language > a { color: var(--white); } /* Logo da öyle: tema şeffaf başlıkta overlay (açık) logoyu gösteriyor, submenu-light bunu koyu logoya çeviriyordu. */ header .navbar.header-transparent.submenu-light .navbar-brand .default-logo { visibility: visible; opacity: 1; width: auto; } header .navbar.header-transparent.submenu-light .navbar-brand .alt-logo { visibility: hidden; opacity: 0; width: 0; } /* ⚠️ YAPIŞKAN DURUM İSTİSNASI: sayfa aşağı inince header .sticky-active alır ve bar GERÇEKTEN beyaz olmalı. Yukarıdaki geri almalar orada geçerli olmamalı. */ header.sticky.sticky-active .navbar.header-transparent.submenu-light { background-color: var(--white) !important; } header.sticky.sticky-active .navbar.header-transparent.submenu-light .navbar-nav .nav-link, header.sticky.sticky-active .navbar.header-transparent.submenu-light .navbar-nav .dropdown-toggle, header.sticky.sticky-active .navbar.header-transparent.submenu-light .header-icon .icon > a { color: var(--dark-gray); } header.sticky.sticky-active .navbar.header-transparent.submenu-light .navbar-brand .default-logo { visibility: hidden; opacity: 0; width: 0; } header.sticky.sticky-active .navbar.header-transparent.submenu-light .navbar-brand .alt-logo { visibility: visible; opacity: 1; width: auto; } /* -------------------------------------------------------------------- KART KATEGORİSİ — BAŞLIĞA YAKIN DURSUN İlk sürümde başlıkla arası açık, özetle arası dardı; kategori içeriğin parçası gibi görünüyordu. Boşluklar tersine çevrildi. -------------------------------------------------------------------- */ .hizmet-karti .kart-baslik { /* Kategori başlığa YAPIŞIK dursun. */ margin-bottom: 1px !important; } /* Başlık + kategori ikilisi: sabit yükseklik BURADA. 2 satır başlık (1.4em) + 1 satır kategori (1.6em) → artan boşluk ikilinin ALTINA düşer, aralarına değil. Özet satırı yine tüm kartlarda aynı hizada. */ .hizmet-karti .kart-ust { min-height: calc(2 * 1.4em + 1.6em); margin-bottom: 14px; } .hizmet-karti .kart-kategori { margin-bottom: 0; } /* -------------------------------------------------------------------- PAKET ÖZELLİK LİSTESİ — MADDE İMLERİ Özellikler zengin editörden

    • olarak gelir. Temanın "list-style-01" sınıfı imleri siliyordu (ölçüldü: li'de list-style-type: none), liste düz satırlara dönüyordu. O sınıf markup'tan çıkarıldı, imler burada veriliyor. ⚠️ Editörden gelen HTML'e sınıf EKLENEMEZ (admin yazıyor) → biçim sarmalayıcıdan kalıtılır, seçiciler eleman adına dayanır. -------------------------------------------------------------------- */ .paket-ozellikler ul { /* Kart ortalanmış olduğu için liste de ortalanır; imler metinle birlikte aksın diye "inside" kullanılıyor (outside olsaydı imler kart kenarına yapışır, ortalı metinden kopardı). */ list-style: disc inside; padding-left: 0; margin-bottom: 0; text-align: left; /* Ortalanmış kartta liste bloğu ortada dursun ama satırlar sola hizalı kalsın. */ display: inline-block; } .paket-ozellikler ul li { list-style: disc inside; padding-top: 8px; padding-bottom: 8px; /* Demodaki list-style-01 görünümü: satırlar ince çizgiyle ayrılır. */ border-bottom: 1px solid rgba(0, 0, 0, .08); } .paket-ozellikler ul li:last-child { border-bottom: none; } /* İmin rengi marka rengi — metin koyu kalır, im hafif vurgu yapar. */ .paket-ozellikler ul li::marker { color: var(--base-color); } /* Logo, sütunu içeriğe göre genişleyince kendi tam boyuna çıkabilsin. ⚠️ Bootstrap "max-width: 100%" logoyu sütun genişliğine hapsediyordu; sütun artık içerikten büyüdüğü için sınır kalkmalı. Yalnız lg+ : mobilde bar dar, logo taşardı. */ @media (min-width: 992px) { header .navbar .navbar-brand img { max-width: none; } } /* -------------------------------------------------------------------- MENÜ ORTALAMA Logo sütunu içeriğe göre genişleyince (bkz. logo notu) menü logonun hemen sağına yapıştı; az menüde sola yığılmış duruyordu. Orta sütun kalan alanı kaplar ve menüyü kendi içinde ortalar. ⚠️ Yalnız lg+ : altında menü zaten açılır panele iniyor. -------------------------------------------------------------------- */ /* ⚠️ "menu-order'a flex:1 + justify-content:center" YETMİYOR (denendi, ölçüldü: sol 327px / sağ 256px): menü ORTA SÜTUNUN içinde ortalanıyor, ama sol (logo) ve sağ (ikonlar) sütunlar farklı genişlikte olduğu için BARIN ortasına denk gelmiyor. Çözüm: YAN sütunlara eşit esneme payı ver, orta sütun içeriği kadar kalsın → menü kendiliğinden barın tam ortasına oturur (ölçüldü: 280 / 280). ⚠️ position: absolute ile ortalamak DENENMEDİ bilerek: mega menü paneli ".submenu-content { width:100%; left:0 }" ile bara göre konumlanıyor; araya konumlanmış bir ata girerse panel menü genişliğine büzülürdü. */ @media (min-width: 992px) { header .navbar > .container-fluid > div:first-child, header .navbar > .container-fluid > div:last-child { flex: 1 1 0; min-width: 0; } header .navbar .menu-order { flex: 0 0 auto; } } /* -------------------------------------------------------------------- KART KATEGORİSİ — HAP ETİKET Düz büyük harf metin başlıkla karışıyordu. Parantez yerine yumuşak zeminli küçük bir hap: bölüm başlıklarındaki dille aynı, "etiket" olduğu bakışta anlaşılıyor ve noktalama gürültüsü eklemiyor. -------------------------------------------------------------------- */ .hizmet-karti .kart-kategori { display: inline-block; background-color: var(--solitude-blue); color: var(--base-color); padding: 3px 12px; border-radius: 100px; font-size: 11px; font-weight: 600; letter-spacing: .5px; line-height: 1.6; text-transform: uppercase; } /* Kategorisiz kayıtta hap ÇİZİLMEZ ama satır yeri korunur. ⚠️ Ayrım MARKUP'ta yapılır (.kart-kategori-bos): CSS ile "içi boş mu" ayırt etmek :blank/:has gibi desteği oynak seçiciler gerektiriyordu. */ .hizmet-karti .kart-kategori-bos { display: inline-block; font-size: 11px; line-height: 1.6; padding: 3px 0; } /* -------------------------------------------------------------------- OK BUTONU — SADECE HOVER'DA Temanın "opacity: 0" kuralı YALNIZCA .services-box-style-01 altında tanımlı (ölçüldü). Blog/haber kartlarında o sarmalayıcı yok, bu yüzden ok sürekli görünüyordu. Aynı davranışı .blog-image için tanımlıyoruz. -------------------------------------------------------------------- */ .blog-image.hover-box .icon-box { opacity: 0; margin-top: 15px; } .blog-image.hover-box:hover .icon-box { opacity: 1; margin-top: 0; } /* ⚠️ ÖRTÜ YARI SAYDAM OLMALI: temanın genel kuralı ".hover-box:hover .box-overlay" opaklığı 1 yapıyor → koyu zemin görseli TAMAMEN kapatıyordu (yaşandı: "resim kayboluyor"). Temanın kendi blog düzeni 0.3, hizmet kartı 0.8 kullanıyor; ok butonunun okunması için 0.35 yeterli, görsel görünür kalıyor. */ .blog-image.hover-box:hover .box-overlay { opacity: .35; } /* -------------------------------------------------------------------- MOBİL DÜZEN -------------------------------------------------------------------- */ @media (max-width: 767px) { /* Footer menüleri TAM GENİŞLİK: iki sütun yan yana gelince başlıklar kırılıp okunmaz oluyordu. */ footer .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; } /* Bölüm ayracı: mobilde bölümler üst üste bindiği için nerede bittiği belirsizleşiyor. İnce bir çizgi hiyerarşiyi geri veriyor. ⚠️ Yalnız ARDIŞIK bölümler arasına: ilk bölümün (slider) üstüne çizgi çizmemek için "section + section" kullanılıyor. */ main section + section, body > section + section { border-top: 1px solid rgba(0, 0, 0, .08); } /* Zaten kendi kenarlığı olan bölümlerde çift çizgi olmasın. */ main section + section.border-top, body > section + section.border-top { border-top-width: 0; } } /* (Mobil scroll-snap şeridi KALDIRILDI 2026-07-24: kullanıcı yorum bölümündeki Swiper carousel'ini istedi — duraklarda yapışan kaydırma + altında sayfa noktaları. İlgili bölümler artık gerçek Swiper kullanıyor.) */ /* -------------------------------------------------------------------- FOOTER SOSYAL İKONLARI Telefon/e-posta bloğunun altında dairesel ikon şeridi. ⚠️ Tema "social-icon-style-04" gibi hazır sınıflar taşıyor ama onlar
        yapısına ve kendi renk paletlerine bağlı; footer koyu zeminde okunmuyorlardı. Sade ve kendi kendine yeten bir stil yazıldı. -------------------------------------------------------------------- */ .footer-sosyal { display: flex; flex-wrap: wrap; gap: 10px; } .footer-sosyal a { /* ⚠️ 38px çemberde 15px ikon fazla boşluklu duruyordu (kullanıcı geri bildirimi). Çember 34px'e indi, ikon 17px'e çıktı → halka daha dolu görünüyor. ⚠️ 34px hâlâ dokunma hedefi eşiğinin üstünde; daha küçültme, mobilde ıskalanır. */ width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); color: var(--white); font-size: 17px; line-height: 1; transition: background-color .25s ease, border-color .25s ease; } .footer-sosyal a:hover { background-color: var(--base-color); border-color: var(--base-color); color: var(--white); } /* -------------------------------------------------------------------- ANA SAYFA HARİTASI (slogan bandı ile footer arasında) ⚠️ Google'ın gömme kodu genelde SABİT width/height taşır (600×450 gibi); olduğu gibi basılırsa geniş ekranda ortada küçük bir kutu, dar ekranda taşan bir blok olur. Ölçüleri burada geçersiz kılıyoruz. -------------------------------------------------------------------- */ .site-harita { /* Şerit yüksekliği: haritanın anlamlı olması için yeterli, sayfayı da boğmayacak kadar. */ height: 420px; overflow: hidden; } .site-harita iframe { width: 100% !important; height: 100% !important; border: 0 !important; display: block; /* Renkli (kullanıcı kararı 2026-07-24): gri tonlama denendi ama renkli daha canlı duruyor. */ } @media (max-width: 767px) { .site-harita { height: 300px; } } /* -------------------------------------------------------------------- HEADER TELEFON / E-POSTA — RESPONSIVE YIĞILMA Dar ekranda telefon numarası ve e-posta metni KELİME/RAKAM ORTASINDAN bölünüp iç içe giriyordu ("bilcombilgisa / yar@hotmail. / com"). ⚠️ İki parçalı çözüm: 1) nowrap → her satır (numara, e-posta) TEK PARÇA kalır, ortadan kırılmaz. 2) header-icon flex-wrap → parçalar bir satıra sığmayınca BÜTÜN olarak alt satıra geçer (kullanıcı isteği: "alt alta geçsinler"). ⚠️ Sağ sütun menü ortalaması için flex:1 ile dar tutuluyor; genişletmek ortalamayı bozardı. Bu yüzden çözüm genişletmek değil, temiz yığmak. -------------------------------------------------------------------- */ header .header-icon { flex-wrap: wrap; justify-content: flex-end; align-items: center; row-gap: 2px; } header .header-icon .widget-text a { white-space: nowrap; } /* -------------------------------------------------------------------- SAYFA DETAYI — İÇERİK TİPOGRAFİSİ Zengin editörden gelen HTML'e okunur bir tipografi verir. Editör kendi sınıflarını taşımadığı için biçim eleman adlarına dayanır. -------------------------------------------------------------------- */ .sayfa-icerik { color: var(--dark-gray); line-height: 1.8; font-size: 16px; } .sayfa-icerik h2, .sayfa-icerik h3, .sayfa-icerik h4 { font-family: var(--alt-font); color: var(--dark-gray); font-weight: 600; margin-top: 1.8rem; margin-bottom: .8rem; } .sayfa-icerik p { margin-bottom: 1.2rem; } .sayfa-icerik img { max-width: 100%; height: auto; border-radius: 6px; margin: 1rem 0; } .sayfa-icerik ul, .sayfa-icerik ol { margin-bottom: 1.2rem; padding-left: 1.4rem; } .sayfa-icerik li { margin-bottom: .4rem; } .sayfa-icerik a { color: var(--base-color); text-decoration: underline; } .sayfa-icerik blockquote { border-left: 3px solid var(--base-color); padding-left: 1rem; margin: 1.4rem 0; color: var(--medium-gray); font-style: italic; } /* -------------------------------------------------------------------- MOBİL ÜST BAR (telefon / e-posta / dil) Masaüstünde header sağ sütununda duran bu öğeler < sm gizleniyordu → mobilde tamamen kayboluyordu. Burada sayfanın en üstüne, menünün üstüne koyuluyor. Yalnız < lg görünür (d-lg-none HTML'de). -------------------------------------------------------------------- */ .mobil-ust-bar { position: relative; /* ⚠️ z-index navbar'DAN YÜKSEK (kullanıcı 2026-07-24): dil dropdown açılınca fixed navbar'ın (z-index ~99) ARKASINDA kalıyordu. Üst bar yüksek z-index alınca kendi yığın bağlamını kurar, içindeki dropdown navbar'ın ÜSTÜNde açılır (masaüstü dropdown gibi overlay). */ z-index: 1040; background-color: var(--dark-gray); color: var(--white); font-size: 12px; padding: 7px 0; } /* Sabit yükseklik: navbar offset'i (42px) bununla uyumlu. */ .mobil-ust-bar { min-height: 34px; } .mobil-ust-bar .mobil-ust-oge { color: var(--white); display: inline-flex; align-items: center; margin-right: 14px; white-space: nowrap; } .mobil-ust-bar .mobil-ust-oge i { margin-right: 5px; font-size: 13px; } /* E-posta uzun olabilir; dar ekranda taşmasın diye kısaltılır. */ .mobil-ust-bar .mobil-ust-oge span { overflow: hidden; text-overflow: ellipsis; max-width: 42vw; } /* ⚠️ NAVBAR'I AŞAĞI KAYDIR: navbar position:fixed;top:0 → üst barın üstüne biner. Mobilde üst bar yüksekliği (~31px) kadar aşağı al. Kaydırınca (header.sticky) üst bar akışta yukarı gider ve navbar top:0'a döner — boşluk kalmaz. */ @media (max-width: 991px) { /* Üst bar ~34px; navbar'ı 42px'e alıp ARADA belirgin boşluk bırakıyoruz (kullanıcı isteği). */ header .navbar { top: 42px; } header.sticky .navbar { top: 0; } } /* -------------------------------------------------------------------- MOBİL DÜZELTMELERİ (< lg) -------------------------------------------------------------------- */ @media (max-width: 991px) { /* ÖNE ÇIKAN MENÜ BUTONU — mobilde dikey menü panelinde. Masaüstü için verdiğim sabit 52px yükseklik + align-self, dikey listede metni ortalamıyordu (SS: PORTAL GİRİŞ dikey ortasız). Mobilde doğal boyut. */ header .navbar [class*="col-"] .navbar-nav .nav-item a.menu-vurgu-btn { height: auto; align-self: stretch; display: inline-flex; align-items: center; justify-content: center; padding: 10px 18px; margin: 6px 0; } header .navbar .navbar-nav .nav-item.menu-vurgu-li { margin-left: 0; margin-right: 0; } /* ÜST BAR ile MENÜ arası: navbar üst barın altına 31px iniyordu ama mobil menü paneli açılınca araları sıkışıktı. Panel biraz nefes alsın. */ header .navbar-collapse { margin-top: 6px; } } /* MOBİL DİL DROPDOWN (üst bardaki) —
        / */ .mobil-dil-dd { position: relative; flex-shrink: 0; } .mobil-dil-dd summary { list-style: none; /* varsayılan üçgen işaretini gizle */ cursor: pointer; display: inline-flex; align-items: center; gap: 5px; } .mobil-dil-dd summary::-webkit-details-marker { display: none; } .mobil-dil-dd summary .fi { width: 22px; height: 15px; } .mobil-dil-dd summary i { font-size: 10px; opacity: .8; transition: transform .2s; } .mobil-dil-dd[open] summary i { transform: rotate(180deg); } /* Açılır liste — üst barın altına, sağa hizalı. */ .mobil-dil-liste { position: absolute; right: 0; top: calc(100% + 8px); background: var(--dark-gray); border: 1px solid rgba(255, 255, 255, .12); border-radius: 6px; padding: 6px; min-width: 130px; z-index: 1050; box-shadow: 0 8px 20px rgba(0, 0, 0, .3); } .mobil-dil-liste a { display: flex; align-items: center; gap: 8px; padding: 7px 8px; color: var(--white); border-radius: 4px; white-space: nowrap; } .mobil-dil-liste a:hover { background: rgba(255, 255, 255, .1); } .mobil-dil-liste .fi { width: 20px; height: 14px; flex-shrink: 0; } .mobil-dil-liste .mobil-dil-ad { font-size: 12px; } /* -------------------------------------------------------------------- DETAY GALERİSİ (Swiper thumbnail + Magnific lightbox) -------------------------------------------------------------------- */ .detay-galeri .swiper-slide { height: auto; } /* Görseller eşit yükseklikte: farklı oranlı fotoğraflar şeridi tırtıklamasın. */ .galeri-oge { display: block; height: 240px; } .galeri-oge img { width: 100%; height: 100%; object-fit: cover; } /* Hover örtüsü — büyüteç ikonu; tıklayınca lightbox açılır. */ .galeri-oge .galeri-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(38, 43, 53, .45); color: var(--white); font-size: 26px; opacity: 0; transition: opacity .3s ease; } .galeri-oge:hover .galeri-overlay { opacity: 1; } /* Ok butonları şeridin dışına (hizmet carousel'iyle aynı yaklaşım). */ .gallery-box .swiper-button-prev, .gallery-box .swiper-button-next { position: absolute; top: 120px; /* görsel yüksekliğinin (240px) ortası */ transform: translateY(-50%); z-index: 3; width: 44px; height: 44px; border-radius: 50%; } /* Oklar görselin İÇ kenarına (kullanıcı: dışa fazla taşınca kesiliyordu). */ .gallery-box .swiper-button-prev { left: 8px; right: auto; } .gallery-box .swiper-button-next { right: 8px; left: auto; } @media (max-width: 991px) { .gallery-box .swiper-button-prev { left: 0; right: auto; } .gallery-box .swiper-button-next { right: 0; left: auto; } } /* -------------------------------------------------------------------- PAKET CAROUSEL — "önerilen" kart (popular-item) düzeltmesi Temanın popular-item kuralı ızgara (col) için: width: calc(100% + 20px), left: -10px, margin-top: -30px. Swiper slaytı SABİT genişlikte olduğundan bu genişlik taşmaya ve kaymaya yol açıyor. Carousel içinde nötrle. ⚠️ swiper-wrapper'daki pt-30px zaten kartın hafif yukarı taşması için yer açıyor. -------------------------------------------------------------------- */ .swiper-slide.popular-item { width: auto; left: 0; margin-top: -20px; } /* -------------------------------------------------------------------- İLETİŞİM SAYFASI — şube kartları sosyal ikonları (açık zemin) -------------------------------------------------------------------- */ .iletisim-sosyal { display: flex; flex-wrap: wrap; gap: 8px; } .iletisim-sosyal a { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--extra-medium-gray); color: var(--dark-gray); font-size: 15px; transition: background-color .25s ease, color .25s ease, border-color .25s ease; } .iletisim-sosyal a:hover { background-color: var(--base-color); border-color: var(--base-color); color: var(--white); } /* İletişim formu alanları arası nefes payı. */ .public-form .form-label { font-weight: 500; color: var(--dark-gray); } /* -------------------------------------------------------------------- SİTE POPUP — 5 sn sonra açılan kampanya/duyuru modalı -------------------------------------------------------------------- */ .site-popup { position: fixed; inset: 0; z-index: 1100; display: none; align-items: center; justify-content: center; } .site-popup.acik { display: flex; } .site-popup-arka { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); } .site-popup-kutu { position: relative; z-index: 1; max-width: 90vw; max-height: 88vh; /* Görsel/video kutuyu belirler; kutu içeriğe göre büzülür. */ display: inline-block; border-radius: 8px; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); animation: sitePopupGir .3s ease; } @keyframes sitePopupGir { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } } .site-popup-medya { display: block; max-width: 90vw; max-height: 88vh; width: auto; height: auto; } .site-popup-kapat { position: absolute; top: 8px; right: 8px; z-index: 2; width: 36px; height: 36px; border: none; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; transition: background-color .2s; } .site-popup-kapat:hover { background: rgba(0, 0, 0, .8); } /* -------------------------------------------------------------------- İLETİŞİM ŞUBE KARTI — modern (2026-07-24 revizyon) -------------------------------------------------------------------- */ .iletisim-kart { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--extra-medium-gray); border-radius: 10px; padding: 26px; transition: box-shadow .3s ease, transform .3s ease, border-color .3s ease; } .iletisim-kart:hover { box-shadow: 0 18px 40px rgba(0, 0, 0, .08); transform: translateY(-4px); border-color: transparent; } /* Başlık: ikon rozeti + firma/şube adı. */ .iletisim-kart-bas { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid rgba(0, 0, 0, .07); } .iletisim-kart-ikon { flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px; background: var(--solitude-blue); color: var(--base-color); display: inline-flex; align-items: center; justify-content: center; font-size: 20px; } .iletisim-firma { display: block; font-family: var(--alt-font); font-weight: 600; font-size: 18px; color: var(--dark-gray); line-height: 1.3; } .iletisim-sube-ad { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--base-color); font-weight: 600; margin-top: 2px; } /* İletişim satırları: ikon + metin. */ .iletisim-kart-govde .iletisim-satir { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 14px; color: var(--medium-gray); line-height: 1.5; } .iletisim-kart-govde .iletisim-satir i { color: var(--base-color); font-size: 16px; margin-top: 2px; flex-shrink: 0; } .iletisim-kart-govde .iletisim-satir small { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--extra-medium-gray); } .iletisim-kart-govde .iletisim-satir a { color: var(--dark-gray); } .iletisim-kart-govde .iletisim-satir a:hover { color: var(--base-color); } /* POPUP alt şeridi — başlık + buton (görselin altında) */ .site-popup-kutu { background: var(--white); } .site-popup-alt { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; /* Kutu görsel genişliğinde; şerit taşarsa sarsın. */ flex-wrap: wrap; } .site-popup-baslik { font-family: var(--alt-font); font-weight: 600; font-size: 16px; color: var(--dark-gray); line-height: 1.3; } .site-popup-buton { flex-shrink: 0; white-space: nowrap; } /* ------------------------------------------------------------------- PUBLIC FORM — KVKK ONAY KUTUSU ⚠️ Tema, form kontrollerine (input/select) buton benzeri yükseklik/dolgu/kenarlık veriyor; onay kutusu bu yüzden kocaman ve çirkin çıkıyordu. Burada YALNIZ bu kutu izole edilir — temanın kendi .form-check kuralına dokunulmaz. ------------------------------------------------------------------- */ .pf-onay input.pf-consent { /* Tema kurallarını sıfırla: kutu, kutu boyutunda kalsın. */ -webkit-appearance: checkbox; appearance: checkbox; width: 16px; height: 16px; min-height: 0; margin: 3px 0 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; flex: 0 0 16px; cursor: pointer; } /* ------------------------------------------------------------------- PUBLIC FORM/ANKET — SEÇİM KUTULARI (radio + checkbox) ⚠️ AYNI TEMA SIZMASI, İKİNCİ KEZ (kullanıcı bildirimi 2026-08-14): "anket ekranındaki kutucuklar mevcut temanın butonları gibi oval görünüyor." Tema, form kontrollerine buton benzeri yükseklik/dolgu/kenarlık/yuvarlaklık veriyor; KVKK kutusu için yukarıda (.pf-consent) çözülmüştü ama ALAN içindeki radio/checkbox'lar kapsam dışında kalmıştı. Anketler seçenekli sorulardan oluştuğu için sorun orada göze battı — formda da vardı, yalnız az kullanılıyordu. ⚠️ KAPSAM .pf-form İLE SINIRLI: temanın kendi .form-check / input kurallarına DOKUNULMAZ, yoksa tema sürümü yükseltildiğinde ya da başka bir bileşende beklenmedik kırılma olur. ------------------------------------------------------------------- */ .pf-form input[type="radio"], .pf-form input[type="checkbox"] { /* Tarayıcının kendi çizimine dön: kutu, kutu boyutunda kalsın. */ -webkit-appearance: auto; appearance: auto; width: 16px; height: 16px; min-height: 0; margin: 0 6px 0 0; padding: 0; border: 0; /* ⚠️ Oval görünümün asıl sebebi buydu: tema büyük bir border-radius veriyor. */ border-radius: 0; background: none; box-shadow: none; flex: 0 0 16px; vertical-align: middle; cursor: pointer; } /* Radyo düğmesi YUVARLAK kalmalı — yukarıdaki sıfırlama onu da köşeli yapardı. ⚠️ appearance:auto ile tarayıcı zaten yuvarlak çizer; bu satır, tema kuralı yeniden sızarsa diye açık bir güvence. */ .pf-form input[type="radio"] { border-radius: 50%; } /* Kutu ile etiket AYNI HİZADA (kullanıcı bildirimi 2026-08-15: "radio butonları ile açıklama satırları aynı hizada değil"). ⚠️ SEBEP `vertical-align: middle`: kutunun ortasını metnin TABAN ÇİZGİSİ + x-yüksekliğinin yarısı hizasına koyar. Satır yüksekliği 1.5 olduğunda (15px yazı → 22.5px satır kutusu) bu nokta metnin görsel ortasının ÜSTÜNDE kalır — kutu yukarıda, yazı aşağıda görünür. ⚠️ ÇÖZÜM flex + align-items:center: iki ögenin de ORTASI hizalanır, satır yüksekliğinden ve yazı boyutundan BAĞIMSIZ. vertical-align'ı elle bir piksel değerine çekmek (ör. margin-top:-2px) aynı sonucu verir ama yazı boyutu her değiştiğinde yeniden ayar ister. ⚠️ padding-left:0 — Bootstrap `.form-check` kutuyu negatif kenar boşluğuyla dışarı taşır; flex düzeninde kutu zaten akışın içinde, o dolgu boşta bir girinti bırakırdı. */ .pf-form .form-check { display: flex; align-items: center; padding-left: 0; margin-bottom: 4px; /* Artık bu öge