/* ==========================================================================
LivProje — tema üzerine özel düzenlemeler
Bu dosya tüm tema CSS'lerinden SONRA yüklenir; tema dosyaları değiştirilmez.
========================================================================== */
/* --------------------------------------------------------------------------
0) TİPOGRAFİ — livproje.com ile aynı font ailesi (Open Sans)
Tema varsayılanı: gövde 'Roboto', başlık/buton "Space Grotesk".
Tema fontu her yerde bu 3 değişken üzerinden kullandığı için (23 kullanım,
sabit kodlama yok) yalnızca değişkenleri geçersiz kılmak yeterli.
Font, index.html içinde Google Fonts'tan yükleniyor.
-------------------------------------------------------------------------- */
:root {
--pbmit-body-typography-font-family: "Open Sans", Arial, sans-serif;
--pbmit-heading-typography-font-family: "Open Sans", Arial, sans-serif;
--pbmit-btn-typography-font-family: "Open Sans", Arial, sans-serif;
}
/* --------------------------------------------------------------------------
1) SLIDER — Türkçe uzun başlıklar için tipografi
Tema varsayılanı .pbmit-slider-two .pbmit-title = 184px (tek kelime içindi).
"REHAU PVC PENCERE SİSTEMLERİ" gibi başlıklar için ölçekleniyor.
-------------------------------------------------------------------------- */
/* Slider tam ekran yüksekliğinde.
Tema yüksekliği padding (330+230) + içerik ile kuruyordu; başlık 184px
olduğu için ekranı dolduruyordu. Başlığı 52px'e indirince slider kısaldı.
Bu yüzden yükseklik artık içeriğe değil, ekrana bağlı.
100dvh: mobil tarayıcılarda adres çubuğu açılıp kapanınca zıplamayı önler. */
.pbmit-slider-two .pbmit-slider-item {
display: flex;
align-items: center;
min-height: 100vh;
min-height: 100dvh;
padding: 175px 0 115px 0;
}
.pbmit-slider-two .pbmit-sub-title {
font-size: 15px;
line-height: 26px;
font-weight: 600;
letter-spacing: 3.5px;
text-transform: uppercase;
margin: 0 0 20px 0;
color: var(--pbmit-white-color);
opacity: .92;
}
.pbmit-slider-two .pbmit-title {
font-size: 52px;
line-height: 62px;
font-weight: 800;
letter-spacing: -0.6px;
/* Tema BÜYÜK HARFE çeviriyordu; kaynak metinler zaten doğru yazımda
("Kış Bahçesi Sistemleri") olduğu için dönüşüm kapatıldı. */
text-transform: none;
max-width: 21ch;
/* en fazla 2 satır */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.pbmit-slider-two .pbmit-desc {
font-size: 17px;
line-height: 30px;
font-weight: 400;
max-width: 545px;
padding-top: 22px;
margin-bottom: 32px;
}
@media (max-width: 1400px) {
.pbmit-slider-two .pbmit-title { font-size: 46px; line-height: 56px; }
}
@media (max-width: 1200px) {
.pbmit-slider-two .pbmit-slider-item { padding: 155px 0 100px 0; }
.pbmit-slider-two .pbmit-title { font-size: 40px; line-height: 50px; }
}
@media (max-width: 991px) {
.pbmit-slider-two .pbmit-slider-item { padding: 135px 0 90px 0; }
.pbmit-slider-two .pbmit-title { font-size: 34px; line-height: 44px; max-width: 100%; }
}
@media (max-width: 767px) {
/* Mobilde tam ekran yerine biraz daha kısa: uzun hero'lar mobilde
içeriğe inmeyi zorlaştırıyor. */
.pbmit-slider-two .pbmit-slider-item { min-height: 82vh; min-height: 82dvh; padding: 120px 0 80px 0; }
.pbmit-slider-two .pbmit-sub-title { font-size: 12px; letter-spacing: 2px; margin-bottom: 14px; }
.pbmit-slider-two .pbmit-title { font-size: 27px; line-height: 36px; }
.pbmit-slider-two .pbmit-desc { font-size: 15px; line-height: 26px; padding-top: 18px; margin-bottom: 26px; }
}
/* --------------------------------------------------------------------------
2) ÜRÜN KARTLARI — başlık taşmasını önle
-------------------------------------------------------------------------- */
.pbmit-service-style-2 .pbmit-service-title {
font-size: 22px;
line-height: 30px;
}
.pbmit-service-style-2 .pbmit-service-description p {
font-size: 15px;
line-height: 26px;
}
/* --------------------------------------------------------------------------
2b) KURUMSAL — sol sütun görseli
-------------------------------------------------------------------------- */
.livproje-kurumsal-gorsel {
padding-right: 50px;
}
.livproje-kurumsal-gorsel img {
width: 100%;
height: auto;
border-radius: 8px;
display: block;
}
@media (max-width: 1199px) {
.livproje-kurumsal-gorsel { padding-right: 0; margin-bottom: 40px; }
}
/* --------------------------------------------------------------------------
2c) ÜRÜNLER — carousel yerine 3'lü × 3 satır ızgara
-------------------------------------------------------------------------- */
.livproje-urun-grid {
margin-top: 55px;
}
/* Tüm kartlar eşit yükseklikte dursun */
.livproje-urun-grid > [class*="col-"] {
display: flex;
}
.livproje-urun-grid .pbmit-ele-service,
.livproje-urun-grid .pbminfotech-post-item,
.livproje-urun-grid .pbminfotech-box-content,
.livproje-urun-grid .pbmit-service-image-wrapper,
.livproje-urun-grid .pbmit-featured-img-wrapper,
.livproje-urun-grid .pbmit-featured-wrapper {
width: 100%;
}
/* Dar sütunda başlık/metin kutusuna daha fazla alan */
.livproje-urun-grid .pbmit-content-box {
left: 30px;
right: 30px;
bottom: 26px;
width: auto;
}
@media (max-width: 767px) {
.livproje-urun-grid { margin-top: 35px; }
.livproje-urun-grid .pbmit-content-box { left: 24px; right: 24px; bottom: 22px; }
}
/* --------------------------------------------------------------------------
2d) ARKA PLAN RENGİ — kahverengi (#403226) yerine mavi (#2d5c9f)
ÖNEMLİ: --pbmit-secondary-color değişkeni bilinçli olarak DEĞİŞTİRİLMEDİ.
O değişken başlık ve link renklerinde de kullanılıyor; kahverengi metinler
maviyle uyumlu olduğu için korunuyor. Burada yalnızca temanın kahverengiyi
ARKA PLAN olarak kullandığı 23 kural hedefleniyor.
-------------------------------------------------------------------------- */
body .pbmit-bg-color-secondary,
.swiper-button-prev,
.swiper-rtl .swiper-button-next,
.pbmit-heading-subheading-style-1 .pbmit-subtitle,
.pbmit-ihbox-style-8 .pbmit-ihbox-box .pbmit-ihbox-icon::before,
.pbmit-ihbox-style-8 .pbmit-ihbox-box .pbmit-ihbox-svg::before,
.pbmit-bg-color-global.pbmit-ihbox-style-16:hover .pbmit-ihbox-icon-wrapper,
.pbmit-bg-color-global .pbmit-ihbox-style-16:hover .pbmit-ihbox-svg-wrapper,
.pbmit-bg-color-gradient .pbmit-ihbox-style-16:hover .pbmit-ihbox-icon-wrapper,
.pbmit-bg-color-gradient .pbmit-ihbox-style-16:hover .pbmit-ihbox-svg-wrapper,
.pbmit-bg-color-secondary .pbmit-ihbox-style-17 .pbmit-box-number-wrap,
.pbmit-elementor-bg-color-secondary .pbmit-team-style-2 .pbminfotech-post-item::after,
.pbmit-team-style-3 .pbminfotech-team-image-box::before,
.pbminfotech-ele-fid-style-7,
.pbmit-bg-color-secondary .pbmit-service-style-1 .pbminfotech-post-item .pbmit-box-content-wrap::before,
.pbmit-text-color-white .pbmit-service-style-1 .pbminfotech-post-item .pbmit-box-content-wrap::before,
.pbmit-bg-color-secondary .pbmit-service-style-4 .pbmit-featured-img-wrapper::after,
.pbmit-testimonial-style-4 .pbminfotech-post-item,
.pbminfotech-ele-ptable-style-1 .pbmit-ptable-col .pbmit-head-wrap::before,
.pbminfotech-ele-ptable-style-1 .pbminfotech-ptable-btn .pbmit-button a:hover,
.pbminfotech-ele-ptable-style-1 .pbmit-pricing-table-featured-col.pbmit-ptable-col:nth-child(odd) .pbmit-button a:hover,
.pbmit-bg-color-secondary .pbminfotech-ele-ptable-style-2 .pbminfotech-ptable-btn .pbmit-button a,
.pbmit-slider-four .pbmit-sub-title,
.sidebar .widget.widget-search,
.post.blog-classic .pbmit-meta-cat a:hover,
.blog-details .pbmit-author-box,
.team-single .pbmit-team-detail-inner,
.pbmit-team-share-btn:hover .pbmit-share-icon {
background-color: #2d5c9f;
}
/* --------------------------------------------------------------------------
2d-2) ÜRÜNLER — düz mavi yerine diyagonal degrade
Aralık, beyaz metin kontrastı bozulmayacak şekilde seçildi:
açık uç #3f72ba → 4.85:1 | orta #2d5c9f → 6.68:1 | koyu uç #1b3963 → 11.59:1
(hepsi WCAG AA 4.5:1 üzerinde). Açık uç bilinçli olarak bu tonda durduruldu;
daha açığı (#4478c0) 4.47:1'e düşüp eşiğin altına iniyor.
Footer düz mavi kalıyor.
Degradenin üstüne homepage-4'teki halftone nokta deseni eklendi. Orijinal
desen SİYAH nokta / %3.5 opaklık olduğu için koyu zeminde görünmüyordu;
beyaza çevrilip opaklığı %7'ye ayarlanmış kopyası kullanılıyor.
Desen alta konumlandığı için DİKEY ÇEVRİLMİŞ sürümü kullanılıyor
(urun-nokta-deseni-alt.png): noktalar alt kenarda yoğun, yukarı doğru
seyreliyor. Çevrilmemiş sürüm (urun-nokta-deseni.png) üst yerleşim için
klasörde duruyor.
-------------------------------------------------------------------------- */
body .service-one.pbmit-bg-color-secondary {
background-color: #2d5c9f; /* degradeyi desteklemeyen tarayıcılar için */
background-image:
url(../images/livproje/arka-plan/urun-nokta-deseni-alt.png),
linear-gradient(135deg, #3f72ba 0%, #2d5c9f 45%, #1b3963 100%);
background-repeat: no-repeat, no-repeat;
background-position: bottom center, center center;
/* desen ekran genişliğine yayılır, yanlarda boşluk kalmaz */
background-size: 100% auto, auto;
}
/* Kahverengi başlangıçlı degrade (about-us-five / offer-area) */
.about-us-five-bg::before,
.offer-area-bg .pbmit-bg-overlay {
background-image: linear-gradient(90deg, #2d5c9f 0%, #BB9A6533 100%);
}
/* --------------------------------------------------------------------------
2e) ANA BUTONLAR — mavi zemin + beyaz yazı
Tema varsayılanı altın zemin (#bb9a65) + beyaz yazıydı → kontrast 2.65:1
(WCAG AA eşiği 4.5'in altında). Zemin sitenin mavisine alındı:
beyaz üzerine #2d5c9f → 6.68:1 (AA geçer).
Not: --pbmit-global-color değişkenine dokunulmadı; altın ton vurgu rengi
olarak (kategori etiketleri, hover vb.) korunuyor.
-------------------------------------------------------------------------- */
.pbmit-btn-global,
.pbmit-btn-global:hover {
color: var(--pbmit-white-color);
background-color: #2d5c9f;
}
/* Buton içindeki ok simgesi de maviye alındı (altın kalırsa çakışıyor) */
.pbmit-btn-global:after {
color: #2d5c9f;
background-color: var(--pbmit-white-color);
}
/* --------------------------------------------------------------------------
2f) ÜRÜNLER — arkadaki "LİV PROJE" filigranı
Tema bunu şeffaf yazı + %15 opaklıkta ALTIN kontur ile çiziyor. Bölüm zemini
koyu maviye alınınca kontrast 1.12:1'e düşüp görünmez oldu.
Kontur beyaza çevrildi. Opaklık kademeli ayarlandı:
%15 altın = 1.12:1 (görünmez) → %38 beyaz = 2.32:1 (fazla belirgin)
→ %24 beyaz = ~1.7:1 (seçilen: fark ediliyor, öne çıkmıyor)
Not: Proje Süreci bölümündeki .pbmit-ih-highlight filigranına dokunulmadı.
-------------------------------------------------------------------------- */
.service-one .pbmit-service-highlight h2 {
-webkit-text-stroke: 0.9px rgba(255, 255, 255, .12);
-webkit-text-fill-color: rgba(255, 255, 255, .02);
}
/* --------------------------------------------------------------------------
2g) MİMARİ ÇİZGİSEL ARKA PLANLAR (Kurumsal + Markalar)
Boş kalan iki bölüme, sektöre özel "pencere teknik çizimi / blueprint"
motifi eklendi. SVG olduğu için her ekranda net, dosya boyutu çok küçük.
İçerik ::before'un üstünde kalsın diye z-index ayarlandı.
-------------------------------------------------------------------------- */
.livproje-kurumsal-bolum,
.livproje-markalar-bolum {
position: relative;
overflow: hidden;
}
.livproje-kurumsal-bolum > .container,
.livproje-markalar-bolum > .container {
position: relative;
z-index: 1;
}
.livproje-markalar-bolum::before {
content: "";
position: absolute;
pointer-events: none;
z-index: 0;
}
/* Kurumsal — temanın homepage-6 "Choose plan" bölümündeki abstract deseni
(.pricing-six-bg ile aynı görsel ve konumlandırma).
Not: denenen çizimler klasörde duruyor: kurumsal-cizgi.svg (pencere
elevasyonu), kurumsal-mimari.svg (kat planı). */
.livproje-kurumsal-bolum {
background-image: url(../images/homepage-6/bg/pattern-bg-02.png);
background-repeat: no-repeat;
background-position: bottom right;
}
/* Markalar — kartların arkasında cephe modülleri şeridi */
.livproje-markalar-bolum::before {
left: 50%;
transform: translateX(-50%);
top: 0;
width: 1600px;
max-width: none;
height: 100%;
background: url(../images/livproje/arka-plan/markalar-cizgi.svg) no-repeat center center;
background-size: cover;
opacity: .34;
}
/* Proje Süreci — Kurumsal'daki abstract desenin YATAY ÇEVRİLMİŞ hâli, solda.
Kurumsal sağda / Proje Süreci solda olacak şekilde simetri kuruldu.
Bölümde zaten overflow:hidden var, taşma yapmıyor. */
.process-section-two {
background-image: url(../images/livproje/arka-plan/desen-akan-cizgi-sol.png);
background-repeat: no-repeat;
background-position: bottom left;
}
@media (max-width: 1199px) {
.livproje-kurumsal-bolum { background-size: 280px auto; }
.process-section-two { background-size: 280px auto; }
.livproje-markalar-bolum::before { opacity: .26; }
}
@media (max-width: 767px) {
.livproje-kurumsal-bolum { background-image: none; }
.process-section-two { background-image: none; }
.livproje-markalar-bolum::before { opacity: .18; }
}
/* --------------------------------------------------------------------------
3) MARKALAR — görsel oranını sabitle
-------------------------------------------------------------------------- */
.pbmit-blog-style-5 .pbmit-featured-wrapper img {
width: 100%;
height: 420px;
object-fit: cover;
}
/* Kart sol üst köşesindeki marka logosu.
REHAU ve Elvial logoları koyu renkli/şeffaf zeminli olduğundan fotoğrafın
üstünde okunmuyordu; beyaz rozet içine alındı.
pointer-events:none → tıklama kartın kendi bağlantısına geçer. */
.pbmit-blog-style-5 .pbminfotech-box-content {
position: relative;
}
.livproje-marka-logo {
position: absolute;
top: 22px;
left: 22px;
z-index: 3;
/* yarı saydam zemin + arkaplan bulanıklığı: logolar koyu renkli olduğu
için blur olmadan bazı fotoğraflarda okunurluk düşüyordu */
background: rgba(255, 255, 255, .68);
-webkit-backdrop-filter: blur(9px) saturate(120%);
backdrop-filter: blur(9px) saturate(120%);
border: 1px solid rgba(255, 255, 255, .55);
border-radius: 7px;
padding: 13px 20px;
line-height: 0;
box-shadow: 0 4px 14px rgba(0, 0, 0, .10);
pointer-events: none;
}
.livproje-marka-logo img {
display: block;
height: 32px;
width: auto;
}
@media (max-width: 767px) {
.livproje-marka-logo { top: 16px; left: 16px; padding: 10px 15px; }
.livproje-marka-logo img { height: 25px; }
}
@media (max-width: 767px) {
.pbmit-blog-style-5 .pbmit-featured-wrapper img { height: 300px; }
}
/* --------------------------------------------------------------------------
4) REFERANSLAR — asimetrik (şaşırtmalı) düzen
Tema bu bölümü kasıtlı olarak dönüşümlü oranlarla kurgular:
tek sıradaki kart 1200x1000 (geniş/kısa), çift sıradaki 890x990 (dar/uzun).
swiper-wrapper'daki .align-items-center ile kartlar dikeyde ortalanır ve
şaşırtmalı ritim oluşur. Bu yüzden görsele SABİT YÜKSEKLİK VERİLMEZ —
yükseklik doğal en/boy oranından gelmelidir.
-------------------------------------------------------------------------- */
.pbmit-portfolio-style-2 .pbmit-featured-wrapper img {
width: 100%;
height: auto;
}
/* "Tüm Referansları İncele" butonu */
.livproje-referans-btn {
margin-top: 55px;
}
@media (max-width: 767px) {
.livproje-referans-btn { margin-top: 35px; }
}
/* Lightbox tetikleyicisi */
.pbmit-portfolio-style-2 .pbmit-featured-wrapper a.livproje-referans-lightbox {
display: block;
cursor: zoom-in;
}
/* Lightbox görünümü */
.mfp-livproje .mfp-bg,
.mfp-livproje.mfp-bg {
background: #0d1b2a;
opacity: .94;
}
.mfp-livproje .mfp-title {
font-size: 15px;
line-height: 22px;
padding-top: 10px;
color: #fff;
}
.mfp-livproje .mfp-counter {
font-size: 13px;
color: rgba(255, 255, 255, .7);
}
.mfp-livproje .mfp-arrow-left::after { border-right-color: #fff; }
.mfp-livproje .mfp-arrow-right::after { border-left-color: #fff; }
.mfp-livproje img.mfp-img {
border-radius: 6px;
}
/* --------------------------------------------------------------------------
5) ÇÖZÜM ORTAKLARI — logolar için beyaz zemin ve nefes payı
-------------------------------------------------------------------------- */
/* Logolar küçük kalıyordu. Asıl sınırlayıcı max-height değil, temanın
.pbmit-border-wrapper üzerindeki 70px yan iç boşluğuydu: 228px'lik kartta
logoya yalnızca 88px genişlik kalıyordu. Boşluk daraltıldı, max-height
yükseltildi; logo tuvalleri de 300x120 / %96 dolgu ile yeniden üretildi. */
.pbmit-client-style-1 .pbmit-border-wrapper {
padding: 10px 18px;
}
.pbmit-client-style-1 .pbmit-featured-wrapper img,
.pbmit-client-style-1 .pbmit-client-hover-img img {
max-height: 82px;
max-width: 100%;
width: auto;
margin: 0 auto;
object-fit: contain;
}
@media (max-width: 991px) {
.pbmit-client-style-1 .pbmit-border-wrapper { padding: 10px 14px; }
.pbmit-client-style-1 .pbmit-featured-wrapper img,
.pbmit-client-style-1 .pbmit-client-hover-img img { max-height: 66px; }
}
/* --------------------------------------------------------------------------
6) PROJE SÜRECİ — açıklama satırlarını dengele
-------------------------------------------------------------------------- */
.pbmit-ihbox-style-4 .pbmit-element-title {
font-size: 21px;
line-height: 29px;
min-height: 58px;
}
@media (max-width: 991px) {
.pbmit-ihbox-style-4 .pbmit-element-title { min-height: auto; }
}
/* --------------------------------------------------------------------------
7) HEADER — üst bilgi şeridi
-------------------------------------------------------------------------- */
.pbmit-pre-header-wrapper .pbmit-contact-info li a {
color: inherit;
}
.pbmit-pre-header-wrapper .pbmit-contact-info li a:hover {
text-decoration: underline;
}
/* Üst şerit okunurluk perdesi: şerit slider görselinin üstünde duruyor ve
açık renkli bir kare denk geldiğinde beyaz yazılar kayboluyor. Üstten aşağı
sönümlenen koyu bir gradyan, zemin ne olursa olsun kontrastı garantiler.
pointer-events:none → tıklamaları engellemez. */
.pbmit-pre-header-wrapper {
position: relative;
}
.pbmit-pre-header-wrapper::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 120px;
background: linear-gradient(to bottom,
rgba(0, 0, 0, .55) 0%,
rgba(0, 0, 0, .34) 42%,
rgba(0, 0, 0, 0) 100%);
pointer-events: none;
z-index: -1;
}
/* --- Üst şerit: sosyal ikonlar sağda, e-postanın solunda ---
Şerit slider görselinin üstünde (zemini şeffaf), bu yüzden içerik beyaz.
Sağdan içeri çekiliyor: alttaki menü çubuğu border-radius:50px ile hap
şeklinde; kenarla aynı hizada duran telefon, kıvrımdan ötürü dışarı
taşmış gibi görünüyordu. Son menü öğesiyle aynı hizaya alındı. */
.livproje-ust-serit {
padding-right: 32px;
}
.livproje-ust-serit .pbmit-pre-header-right {
gap: 26px;
}
.livproje-serit-sosyal {
display: flex;
align-items: center;
gap: 6px;
margin: 0;
padding: 0;
list-style: none;
}
.livproje-serit-sosyal li { margin: 0; padding: 0; }
.livproje-serit-sosyal li a {
width: 28px;
height: 28px;
line-height: 28px;
border-radius: 50%;
display: inline-block;
text-align: center;
font-size: 12px;
background: rgba(255, 255, 255, .16);
color: #fff;
transition: all .3s ease;
}
.livproje-serit-sosyal li a:hover {
background: #fff;
color: #2d5c9f;
}
/* --- Telefon: zeminsiz, tipografiyle vurgulanmış --- */
.livproje-tel {
display: inline-flex;
align-items: center;
gap: 10px;
color: #fff;
line-height: 1;
transition: all .3s ease;
}
.livproje-tel:hover { color: #fff; opacity: .85; }
.livproje-tel-ikon {
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(255, 255, 255, .16);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 15px;
flex-shrink: 0;
transition: all .3s ease;
}
.livproje-tel:hover .livproje-tel-ikon {
background: #fff;
color: #2d5c9f;
}
.livproje-tel-metin {
display: flex;
flex-direction: column;
gap: 3px;
}
.livproje-tel-ust {
font-size: 10px;
letter-spacing: .8px;
text-transform: uppercase;
opacity: .6;
line-height: 1;
font-weight: 600;
}
.livproje-tel-no {
font-size: 17px;
font-weight: 800;
line-height: 1;
white-space: nowrap;
}
@media (max-width: 1199px) {
.livproje-ust-serit .pbmit-pre-header-right { gap: 16px; }
.livproje-ust-serit .pbmit-contact-info li:nth-child(2) { display: none; } /* adres gizlenir */
}
@media (max-width: 767px) {
.livproje-ust-serit .pbmit-contact-info { display: none; }
.livproje-tel-no { font-size: 15px; }
.livproje-tel-ikon { width: 28px; height: 28px; font-size: 13px; }
}
/* base.css içindeki ".site-header .site-branding img{max-height:30px}" kuralı
logoyu 22px'e düşürüyordu; özgüllük artırılarak okunur boyuta çıkarıldı. */
.site-header .site-branding .logo-img,
.site-header .site-branding img.logo-img {
max-height: 50px;
height: auto;
width: auto;
}
/* Ana menü TEK SATIR kalsın.
8 Türkçe başlık varsayılan aralıklarla 1203px yer kaplıyordu ve 1002px'lik
alana sığmayıp 2 satıra düşüyordu. "Teklif Al" butonu kaldırıldı, öğe
aralıkları daraltıldı ve satır kırılması engellendi. */
.header-style-2 .navigation,
.site-navigation .navigation {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-end;
}
.site-navigation .navigation > li {
white-space: nowrap;
}
/* Header kapsayıcısı sağa/sola genişletildi: varsayılan Bootstrap container
(~1370px) menüye dar geliyordu. İçerik bölümleri varsayılan genişlikte kalır. */
.pbmit-main-header-area > .container,
.pbmit-pre-header-wrapper > .container {
max-width: 1660px;
width: 100%;
padding-left: 40px;
padding-right: 40px;
}
@media (max-width: 1199px) {
.pbmit-main-header-area > .container,
.pbmit-pre-header-wrapper > .container { padding-left: 15px; padding-right: 15px; }
}
/* --- Menü çubuğu: buzlu cam (frosted glass) efekti ---
Çubuk slider görselinin üstünde durduğu için arkadaki görsel bulanıklaşarak
geçiyor. Beyaz opaklık %72'de tutuldu: koyu bir slider karesinde bile
menü yazısı (#403226) ~6.5:1 kontrast veriyor, WCAG AA üstünde.
backdrop-filter desteklemeyen tarayıcıda düz yarı saydam beyaza düşer. */
body .site-header .pbmit-header-content.pbmit-bg-color-white {
/* %62: arkadaki görsel belirgin geçer ama en koyu slider karesinde bile
menü yazısı 5.07:1 kontrast korur. %58'e inince 4.49'a düşüp AA altına
iniyor — sınır burası. */
background-color: rgba(255, 255, 255, .62);
/* üstten gelen ışık yansıması */
background-image: linear-gradient(135deg,
rgba(255, 255, 255, .22) 0%,
rgba(255, 255, 255, .05) 42%,
rgba(255, 255, 255, 0) 70%);
-webkit-backdrop-filter: blur(34px) saturate(185%);
backdrop-filter: blur(34px) saturate(185%);
border: 1px solid rgba(255, 255, 255, .60);
/* dış gölge + cam kenar parıltıları (üstte parlak, altta hafif) */
box-shadow:
0 10px 36px rgba(0, 0, 0, .13),
inset 0 1px 0 rgba(255, 255, 255, .80),
inset 0 -1px 0 rgba(255, 255, 255, .28);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
body .site-header .pbmit-header-content.pbmit-bg-color-white {
background-color: rgba(255, 255, 255, .92);
}
}
/* MOBİL MENÜ İÇİN ŞART — buzlu cam 1200px altında kapatılıyor.
Sebep: backdrop-filter uygulanan bir öğe, içindeki position:fixed
torunlar için "kapsayıcı blok" hâline gelir. Mobil menü paneli
(.pbmit-menu-wrap, position:fixed) bu çubuğun içinde yer aldığından
ekrana değil çubuğa göre konumlanıyor, 300x85'lik bir kutuya sıkışıp
görünmez oluyordu — menü "açılıyor ama gözükmüyor" hatası buydu.
Tema menüyü navbar-expand-xl ile 1200px altında panele çevirdiği için
sınır 1199px. Üstünde cam efekti aynen duruyor. */
@media (max-width: 1200px) {
body .site-header .pbmit-header-content.pbmit-bg-color-white {
-webkit-backdrop-filter: none;
backdrop-filter: none;
background-color: rgba(255, 255, 255, .96);
}
/* --- MOBİL MENÜ AÇILIŞ HIZI ---
Tema iki animasyonu arka arkaya diziyordu:
1) siyah perde genişliğini 0%→100% yapıyor (sağa sabit olduğu için
ekranı sağdan sola süpürüyor), 900ms
2) panel 600ms bekleyip 900ms'de kayıyor
Toplam ~1,5 sn. Perdenin genişlik animasyonu kaldırıldı: perde artık
hep tam genişlikte, yalnızca saydamlığı değişiyor — süpürme yok.
Panelin bekleme süresi sıfırlandı, ikisi aynı anda ve kısa sürede
çalışıyor. Kapanış da aynı hızda. */
body .pbmit-mobile-menu-bg {
width: 100%;
opacity: 0;
visibility: hidden;
pointer-events: none;
-webkit-transition: opacity 200ms ease, visibility 200ms ease;
transition: opacity 200ms ease, visibility 200ms ease;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
body .active .pbmit-mobile-menu-bg {
width: 100%;
opacity: 1;
visibility: visible;
pointer-events: auto;
-webkit-transition: opacity 200ms ease;
transition: opacity 200ms ease;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
body .pbmit-menu-wrap,
body .active .pbmit-menu-wrap {
-webkit-transition: all 280ms ease;
transition: all 280ms ease;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
}
/* Logo flex içinde daralmasın — menü genişleyince 0px'e sıkışıp
tamamen kayboluyordu. */
.pbmit-header-content .site-branding {
flex: 0 0 auto;
min-width: 130px;
}
.pbmit-header-content .pbmit-menu-area {
min-width: 0;
}
.site-header .site-navigation .navigation > li > a {
padding-left: 9px;
padding-right: 9px;
font-size: 15.5px;
font-weight: 700;
letter-spacing: 0;
}
/* --- Menü çubuğu yüksekliği: 85px → 68px ---
Tema bunu ".header-style-2 .site-navigation ul.navigation > li > a" ile
height + line-height olarak kuruyor (özgüllük 0,3,3). Aşağıdaki seçici
0,4,3 olduğu için üstüne yazar. 1200px altında tema kendi !important
kurallarıyla mobil menüye geçtiği için oraya karışılmıyor. */
@media (min-width: 1201px) {
.site-header.header-style-2 .site-navigation ul.navigation > li > a {
height: 75px;
line-height: 75px;
}
.site-header.header-style-2 .site-branding .site-title {
height: 75px;
}
}
@media (max-width: 1500px) {
.site-navigation .navigation > li > a { padding-left: 10px; padding-right: 10px; font-size: 13px; }
}
/* 1400px altında menü daralan alana sığmıyordu; yazı ve boşluklar kademeli
küçültülüyor. 1200px altında tema zaten hamburger moduna geçiyor. */
@media (max-width: 1400px) {
.site-navigation .navigation > li > a { padding-left: 7px; padding-right: 7px; font-size: 12.5px; }
.pbmit-main-header-area > .container,
.pbmit-pre-header-wrapper > .container { padding-left: 25px; padding-right: 25px; }
}
@media (max-width: 1300px) {
.site-navigation .navigation > li > a { padding-left: 5px; padding-right: 5px; font-size: 12px; }
.pbmit-header-content .site-branding { min-width: 110px; }
.site-header .site-branding .logo-img { max-height: 42px; }
}
@media (max-width: 1200px) {
/* mobil/tablet açılır menüye geçtiği için sınırlamalar kaldırılır */
.header-style-2 .navigation,
.site-navigation .navigation { display: block; flex-wrap: wrap; }
.site-navigation .navigation > li { white-space: normal; }
.site-navigation .navigation > li > a { padding-left: 15px; padding-right: 15px; font-size: 15px; }
}
@media (max-width: 767px) {
.site-header .site-branding .logo-img,
.site-header .site-branding img.logo-img { max-height: 38px; }
}
/* --------------------------------------------------------------------------
7a) FOOTER — koyuya kaçan diyagonal degrade
Ürünler bölümüyle aynı 135° akış, ama sayfayı kapatması için daha derin
tonlarda. Beyaz metin kontrastı en açık noktada bile güvenli:
#2d5c9f → 6.68:1 | #22467a → 9.44:1 | #15294a → 14.9:1
-------------------------------------------------------------------------- */
body .site-footer.pbmit-bg-color-secondary {
background-color: #2d5c9f; /* degrade desteklenmezse */
background-image: linear-gradient(135deg, #2d5c9f 0%, #22467a 45%, #15294a 100%);
}
/* Alt telif şeridi degradenin en koyu ucuyla uyumlu kalsın */
.livproje-footer .pbmit-footer-text-area {
background-color: transparent;
border-top: 1px solid rgba(255, 255, 255, .13);
}
/* --------------------------------------------------------------------------
7b) FOOTER — 4 sütunlu yeni düzen
Sol: tam boy logo + hakkımızda metni · Orta: ürün listeleri · Sağ: harita,
iletişim, sosyal medya.
-------------------------------------------------------------------------- */
.livproje-footer .pbmit-footer-widget-area {
padding: 80px 0 60px;
}
.livproje-footer .row { row-gap: 40px; }
/* --- Sol sütun: logo + metin ---
Logo orijinal renkleriyle, marka kartlarındaki gibi yarı saydam beyaz
rozet üzerinde. Rozet şart: logonun mavisi (#3771c1) koyu mavi footer
zemininde neredeyse kayboluyor. */
.livproje-footer-logo {
display: inline-block;
background: rgba(255, 255, 255, .68);
-webkit-backdrop-filter: blur(9px) saturate(120%);
backdrop-filter: blur(9px) saturate(120%);
border: 1px solid rgba(255, 255, 255, .55);
border-radius: 7px;
padding: 16px 22px;
line-height: 0;
box-shadow: 0 4px 14px rgba(0, 0, 0, .10);
margin-bottom: 26px;
}
.livproje-footer-logo img {
width: 212px;
max-width: 100%;
height: auto;
display: block;
}
@media (max-width: 767px) {
.livproje-footer-logo { padding: 13px 18px; }
.livproje-footer-logo img { width: 180px; }
}
.livproje-footer-metin {
color: rgba(255, 255, 255, .82);
font-size: 15px;
line-height: 27px;
margin: 0 0 20px;
max-width: 430px;
}
.livproje-footer-link {
color: #fff;
font-weight: 600;
font-size: 15px;
border-bottom: 1px solid rgba(255, 255, 255, .45);
padding-bottom: 2px;
transition: all .3s ease;
}
.livproje-footer-link:hover {
color: #fff;
border-bottom-color: #fff;
}
/* --- Başlıklar --- */
.livproje-footer-baslik {
color: #fff;
font-size: 18px;
line-height: 26px;
font-weight: 700;
margin: 0 0 22px;
position: relative;
padding-bottom: 14px;
}
.livproje-footer-baslik::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 34px;
height: 2px;
background: rgba(255, 255, 255, .5);
}
/* boş başlık (ürünler 2. sütun) alt çizgisiz */
.livproje-footer-sutun .livproje-footer-baslik:empty::after { display: none; }
/* --- Ürün listeleri --- */
.livproje-footer-liste {
list-style: none;
padding: 0;
margin: 0;
}
.livproje-footer-liste li { margin-bottom: 11px; }
.livproje-footer-liste li:last-child { margin-bottom: 0; }
.livproje-footer-liste a {
color: rgba(255, 255, 255, .82);
font-size: 15px;
line-height: 24px;
transition: all .3s ease;
display: inline-block;
}
.livproje-footer-liste a:hover {
color: #fff;
transform: translateX(4px);
}
/* --- Harita --- */
.livproje-footer-harita {
border-radius: 8px;
overflow: hidden;
line-height: 0;
margin-bottom: 22px;
border: 1px solid rgba(255, 255, 255, .22);
}
.livproje-footer-harita iframe {
width: 100%;
height: 155px;
border: 0;
display: block;
filter: grayscale(25%);
}
/* --- İletişim listesi --- */
.livproje-footer-iletisim {
list-style: none;
padding: 0;
margin: 0 0 20px;
}
.livproje-footer-iletisim li {
display: flex;
align-items: flex-start;
gap: 11px;
margin-bottom: 13px;
color: rgba(255, 255, 255, .82);
font-size: 14.5px;
line-height: 23px;
}
.livproje-footer-iletisim i {
font-size: 15px;
line-height: 23px;
opacity: .8;
flex-shrink: 0;
}
.livproje-footer-iletisim a { color: rgba(255, 255, 255, .82); }
.livproje-footer-iletisim a:hover { color: #fff; }
/* --- Sosyal medya --- */
.livproje-footer-sosyal { margin: 0; padding: 0; }
.livproje-footer-sosyal li a {
width: 38px;
height: 38px;
line-height: 38px;
border-radius: 50%;
background: rgba(255, 255, 255, .13);
color: #fff;
text-align: center;
display: inline-block;
transition: all .3s ease;
}
.livproje-footer-sosyal li a:hover {
background: #fff;
color: #2d5c9f;
}
@media (max-width: 991px) {
.livproje-footer .pbmit-footer-widget-area { padding: 60px 0 45px; }
.livproje-footer-sutun .livproje-footer-baslik:empty { display: none; }
.livproje-footer-metin { max-width: 100%; }
}
/* --------------------------------------------------------------------------
8) WHATSAPP sabit buton + "yukarı çık" butonu
İkisi de sağ altta sabit. Tema'nın yukarı-çık butonu (.pbmit-progress-wrap)
varsayılan konumunda alttan 50–100px yer kaplıyor, WhatsApp ise 100–156px:
aralarında hiç boşluk kalmıyordu ve yatayda da hizasızdılar. Aşağıda ikisi
sağdan 50px merkezli tek sütuna hizalandı; yukarı-çık 24px'e indirildi,
WhatsApp 120px'e çıkarıldı (aralarında 46px boşluk).
-------------------------------------------------------------------------- */
.livproje-whatsapp {
position: fixed;
right: 22px;
bottom: 120px;
z-index: 999;
display: inline-flex;
align-items: center;
gap: 0;
transition: transform .25s ease;
}
.livproje-whatsapp:hover {
transform: scale(1.05);
}
/* Etiket: yeşil zemin üzerinde beyaz yazı 1.98:1 ile okunmuyor; bunun yerine
sitenin buzlu cam diliyle uyumlu açık rozet + koyu yazı (13.0:1).
Sağ ucu ikonun altına 16px giriyor: sadece bitiştirmek yetmiyor, dairenin
kavisi etiketin köşelerinde ~5px'lik boşluk bırakıyordu.
z-index şart: etiketteki backdrop-filter kendi yığılma bağlamını yaratıyor
ve onu DOM sırasına rağmen ikonun üstünde boyatıyordu. */
.livproje-whatsapp-etiket {
position: relative;
z-index: 1;
background: rgba(255, 255, 255, .93);
-webkit-backdrop-filter: blur(14px) saturate(160%);
backdrop-filter: blur(14px) saturate(160%);
border: 1px solid rgba(255, 255, 255, .70);
border-radius: 30px 0 0 30px;
border-right: 0;
margin-right: -16px;
padding: 8px 26px 8px 16px;
font-size: 14px;
font-weight: 700;
line-height: 1;
letter-spacing: .2px;
color: #14352a;
white-space: nowrap;
box-shadow: 0 4px 14px rgba(0, 0, 0, .16);
}
.livproje-whatsapp-ikon {
position: relative;
z-index: 2;
width: 56px;
height: 56px;
border-radius: 50%;
background: #25D366;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 27px;
box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
}
.livproje-whatsapp:hover .livproje-whatsapp-ikon {
color: #fff;
}
/* Yukarı çık: WhatsApp'ın altına, aynı dikey eksene */
.pbmit-progress-wrap {
right: 25px;
bottom: 24px;
}
@media (max-width: 767px) {
.livproje-whatsapp { right: 16px; bottom: 100px; }
.livproje-whatsapp-ikon { width: 50px; height: 50px; font-size: 24px; }
.livproje-whatsapp-etiket { font-size: 13px; padding: 7px 24px 7px 14px; margin-right: -15px; }
.pbmit-progress-wrap { right: 16px; bottom: 20px; }
}
/* --------------------------------------------------------------------------
9) İÇ SAYFALAR — sabit sayfa başlığı (slider yerine)
Menü bloğu (.pbmit-header-overlay) mutlak konumlu ve 127px yer kaplıyor;
ana sayfada slider'ın, iç sayfalarda bu başlığın üzerinde duruyor. Bu
yüzden başlık alanının üst dolgusu menüyü aşacak şekilde veriliyor.
-------------------------------------------------------------------------- */
body .pbmit-title-bar-wrapper.livproje-title-bar {
/* Perde: görselin ortası (evin aydınlık cephesi) yer yer rgb(190) kadar
parlak; %40 opaklıkta alt başlığın kontrastı 4.51'e kadar düşüyordu.
%46'da en kötü durum 5.2'ye çıkıyor, görsel hâlâ okunur kalıyor. */
background-image:
linear-gradient(180deg,
rgba(10, 16, 26, .60) 0%,
rgba(10, 16, 26, .46) 45%,
rgba(10, 16, 26, .68) 100%),
url(../images/livproje/arka-plan/header-background.png);
background-repeat: no-repeat, no-repeat;
background-position: center center, center center;
background-size: cover, cover;
}
body .pbmit-title-bar-wrapper.livproje-title-bar,
body .livproje-title-bar .pbmit-title-bar-content {
min-height: 470px;
}
body .livproje-title-bar .pbmit-title-bar-content {
padding: 150px 0 55px;
}
body .livproje-title-bar .pbmit-tbar-subtitle {
margin-bottom: 14px;
font-size: 14px;
font-weight: 700;
letter-spacing: 2.5px;
text-transform: none;
color: rgba(255, 255, 255, .88);
}
body .livproje-title-bar .pbmit-tbar-title {
font-size: 54px;
line-height: 62px;
font-weight: 800;
}
body .livproje-title-bar .pbmit-breadcrumb {
margin-top: 18px;
}
body .livproje-title-bar .pbmit-breadcrumb,
body .livproje-title-bar .pbmit-breadcrumb a {
font-weight: 500;
color: rgba(255, 255, 255, .90);
}
body .livproje-title-bar .pbmit-breadcrumb a:hover {
color: var(--pbmit-white-color);
text-decoration: underline;
}
body .livproje-title-bar .pbmit-breadcrumb .current-item {
color: rgba(255, 255, 255, .70);
}
@media (max-width: 991px) {
body .pbmit-title-bar-wrapper.livproje-title-bar,
body .livproje-title-bar .pbmit-title-bar-content { min-height: 380px; }
body .livproje-title-bar .pbmit-title-bar-content { padding: 140px 0 45px; }
body .livproje-title-bar .pbmit-tbar-title { font-size: 38px; line-height: 46px; }
}
@media (max-width: 575px) {
body .pbmit-title-bar-wrapper.livproje-title-bar,
body .livproje-title-bar .pbmit-title-bar-content { min-height: 330px; }
body .livproje-title-bar .pbmit-tbar-title { font-size: 30px; line-height: 38px; }
body .livproje-title-bar .pbmit-tbar-subtitle { font-size: 12px; letter-spacing: 2px; }
}
/* --------------------------------------------------------------------------
10) REFERANSLAR SAYFASI — 2 sütunlu grid
Tema'nın portfolio-style-2 kartı kullanılıyor (portfolio-grid-col-2.html).
-------------------------------------------------------------------------- */
.livproje-referans-giris {
margin-bottom: 50px;
}
.livproje-referans-giris-baslik {
font-size: 34px;
line-height: 44px;
font-weight: 700;
margin-bottom: 18px;
}
.livproje-referans-giris-metin {
font-size: 16px;
line-height: 29px;
margin-bottom: 0;
}
/* Satır aralığı için row-gap KULLANMA: tema zaten
".pbmit-element-posts-wrapper.row .pbmit-portfolio-style-2" kuralıyla
30px margin-bottom veriyor; ikisi toplanınca satır arası 60px, sütun arası
30px oluyordu. */
.livproje-referans-grid {
--bs-gutter-x: 30px;
}
/* Kartın tamamı tıklanabilir olsun: kutu içeriği (.pbminfotech-box-content)
mutlak konumlu ve görselin üzerinde durduğu için sadece ![]()
'i saran bir
bağlantı kartın alt kısmında tıklamayı yakalayamıyordu. */
.livproje-referans-ortu {
position: absolute;
inset: 0;
z-index: 3;
display: block;
}
/* Konum etiketi: tema bunu için biçimlendiriyor, burada kullanıldı
(referans konumları birer bağlantı değil).
Renk: tema altını rgb(187,154,101) beyaz kutuda yalnızca 2.65:1 veriyor.
Kutu artık sabit görünür olduğu için bu okunmuyordu; aynı ton korunarak
koyultuldu (HSL 37°/39%, L %56 → %40) ve 4.67:1'e çıkarıldı. */
.livproje-referans-grid .pbmit-port-cat span {
display: inline-block;
font-size: 14px;
line-height: 20px;
letter-spacing: .5px;
text-transform: uppercase;
font-weight: 600;
color: #8e6f3e;
}
.livproje-referans-grid .pbmit-portfolio-title {
color: var(--pbmit-heading-color);
margin-bottom: 0;
}
/* Proje bilgisi SABİT görünür.
Tema kartı :hover ile açıyordu (opacity 0 + translateY(100%) scale(.7));
böylece dokunmatik cihazlarda adlar hiç görünmüyor, masaüstünde de sayfa
açılır açılmaz okunamıyordu. Görselin üzerindeki büyütme animasyonu duruyor. */
.livproje-referans-grid .pbminfotech-box-content,
.livproje-referans-grid .pbmit-portfolio-style-2:hover .pbminfotech-box-content {
opacity: 1;
transform: none;
}
@media (max-width: 767px) {
.livproje-referans-grid .pbminfotech-box-content {
bottom: 18px;
left: 18px;
right: 18px;
padding: 16px 20px;
border-radius: 14px;
}
.livproje-referans-grid .pbmit-portfolio-title { font-size: 18px; line-height: 24px; }
.livproje-referans-giris { margin-bottom: 34px; }
.livproje-referans-giris-baslik { font-size: 26px; line-height: 34px; }
}
/* --------------------------------------------------------------------------
11) HAKKIMIZDA — about bölümü görsel hizası
Tema'nın görseli 0.83:1 dikey; showroom fotoğrafı ise ana sayfadakiyle aynı
kadrajda (1.27:1 yatay) kullanılıyor ve metin sütunundan belirgin kısa
kalıyor. Bu yüzden görsel bloğu sütun içinde dikey ortalanıyor.
:has() desteklenmezse görsel sütunun üstüne yaslanır (düzen bozulmaz).
-------------------------------------------------------------------------- */
/* Görsel yatay (ana sayfadakiyle aynı kadraj) ve sağ sütundan kısa kalıyor;
sütun içinde dikey ortalanıyor. */
.about-eight-left-box {
margin-top: auto;
margin-bottom: auto;
}
.row.g-0 > [class*="col-"]:has(> .about-eight-left-box) {
display: flex;
flex-direction: column;
}
/* Açıklama iki paragrafa çıktı; son paragrafın alt boşluğu listeyle çakışmasın */
.about-eight-right-box .pbmit-heading-desc p:last-child {
margin-bottom: 0;
}
/* --------------------------------------------------------------------------
11b) HAKKIMIZDA — koyu bant, görsel genişliği ve bölüm arası boşluk
-------------------------------------------------------------------------- */
/* Bant kahverengi kalmıştı: bu blok pbmit-bg-color-secondary değil
pbmit-bg-color-blackish kullanıyor (ikisi de #403226). Arka planlarda
kahverengi kullanılmama kararı gereği maviye çevrildi.
Tema kuralı "body .pbmit-bg-color-blackish" (0,1,1) olduğu için
sınıf zincirlenerek (0,2,1) özgüllük veriliyor. */
body .about-eight-ihbox-style-bg.pbmit-bg-color-blackish {
background-color: #2d5c9f;
}
/* #2d5c9f kahverengiden AÇIK olduğu için beyazın %60 opaklığı burada
3.53:1'e düşüyordu (kahverengide 5.56 idi). %82'ye çıkarıldı → 4.9:1.
Özgüllük: tema kuralı
".pbmit-ihbox-style-8-new.pbmit-bg-color-blackish .pbmit-ihbox-style-8 .pbmit-heading-desc"
(0,4,0) ile geliyor; sınıflar zincirlenerek (0,5,1)'e çıkarıldı. */
body .about-eight-ihbox-style-bg.pbmit-ihbox-style-8-new.pbmit-bg-color-blackish .pbmit-ihbox-style-8 .pbmit-heading-desc {
color: rgba(255, 255, 255, .82);
}
/* Görsel sütunun tamamını kaplasın: tema geniş ekranda 120px, dar ekranda
60px sol dolgu bırakıyordu ve fotoğraf dar görünüyordu. Dolgu tema'nın
dekoratif çerçevesine (.frame-img) yer açmak içindi; o öğe sayfadan
kaldırıldı. Sıfırlanınca görselin sol kenarı mavi bantla hizalanıyor. */
.about-eight-left-box {
padding-left: 0;
}
/* Mavi bant sağ sütunun metnini örtüyordu.
Bant (.about-eight-ihbox-style) "margin-top: -105px" ile satırın üstüne
biniyor ve "position:relative; z-index:1" olduğu için static olan sağ
sütunun ÜSTÜNE boyanıyor. Sağ sütunun içeriği satır sonuna kadar
uzandığından son iki liste maddesi bandın altında kalıyordu; görünen son
satır yarım kesilmiş gibi duruyordu.
Alt dolgu eklenince satır (ve dolayısıyla bant) aşağı kayıyor, metin ise
yerinde kaldığı için araya boşluk giriyor. Görsel alta hizalı olduğundan
bandın görsele binmesi (105px) korunuyor. */
@media (min-width: 1200px) {
.about-eight-right-box {
padding-bottom: 155px;
}
}
/* Başlık alanı ile içerik arası fazla boşluk vardı: bölümün 100px üst dolgusu
ile sağ kutunun 80px'i üst üste binip 181px yapıyordu. İkisi de kısaldı.
.section-lgt genel bir tema sınıfı olduğu için yalnızca bu bölüme
kapsamlandı (:has). */
.section-lgt:has(.about-eight-left-box) {
padding-top: 50px;
}
@media (min-width: 1200px) {
.about-eight-right-box {
padding-top: 50px;
}
}
@media (max-width: 767px) {
.section-lgt:has(.about-eight-left-box) {
padding-top: 30px;
}
}
/* 1200px altında sütunlar alt alta geçiyor: bandın altında artık görsel değil
METİN var, yani negatif marjın bindireceği bir köşe kalmıyor — sadece son
iki liste maddesini örtüyordu. Bu genişliklerde bindirme kaldırılıp yerine
normal boşluk veriliyor. */
@media (max-width: 1199px) {
.about-eight-ihbox-style {
margin-top: 45px;
}
}
/* Bant tam genişlik.
Tema "padding-left: 26%" ile bandı sağa kaydırıyordu; bu, görselin dikey ve
uzun olduğu özgün tasarımda bandın görselin sağ alt köşesine binmesi içindi.
Görsel artık yatay ve bant onun altında kaldığı için bu kaydırmanın işlevi
kalmadı: bant soldan görselin, sağdan sağ sütunun kenarına hizalanıyor.
(responsive.css dar ekranlarda 55px veriyor; bu kural sonra yüklendiği için
aynı özgüllükte kazanıyor ve her genişlikte tam genişlik oluyor.) */
.about-eight-ihbox-style {
padding-left: 0;
}
/* Koyu bant ile "Faaliyet Alanlarımız" bölümü bitişikti (0px). */
.ihbox-style-10-bg-area {
margin-top: 90px;
}
@media (max-width: 767px) {
.ihbox-style-10-bg-area { margin-top: 55px; }
}
/* --------------------------------------------------------------------------
12) İLETİŞİM SAYFASI — sol sütundaki adres/telefon/e-posta bloğu
Tema'nın iletişim sayfasında bu bilgiler için hazır bir blok yok
(contact-us.html'deki kartlar genel hizmet kartları), bu yüzden ayrıca
kuruldu. İkonlar üst şeritte kullanılanlarla aynı.
-------------------------------------------------------------------------- */
.livproje-iletisim-liste {
list-style: none;
margin: 38px 0 0;
padding: 0;
}
.livproje-iletisim-liste > li {
display: flex;
align-items: flex-start;
gap: 18px;
padding: 22px 0;
border-top: 1px solid rgba(var(--pbmit-blackish-color-rgb), .12);
}
.livproje-iletisim-liste > li:last-child {
border-bottom: 1px solid rgba(var(--pbmit-blackish-color-rgb), .12);
}
.livproje-iletisim-ikon {
flex: 0 0 auto;
width: 46px;
height: 46px;
border-radius: 50%;
background: #2d5c9f;
color: var(--pbmit-white-color);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
.livproje-iletisim-govde {
display: flex;
flex-direction: column;
gap: 4px;
}
/* Renk: tema altını rgb(187,154,101) beyaz zeminde 2.65:1 veriyor.
Referans kartlarındaki ile aynı koyultulmuş ton (4.67:1). */
.livproje-iletisim-baslik {
font-size: 13px;
font-weight: 700;
letter-spacing: 1.4px;
text-transform: uppercase;
color: #8e6f3e;
}
.livproje-iletisim-deger {
font-size: 17px;
line-height: 28px;
font-weight: 600;
color: var(--pbmit-heading-color);
}
.livproje-iletisim-deger a {
color: inherit;
}
.livproje-iletisim-deger a:hover {
color: #2d5c9f;
}
@media (max-width: 767px) {
.livproje-iletisim-liste { margin-top: 28px; }
.livproje-iletisim-liste > li { padding: 18px 0; gap: 14px; }
.livproje-iletisim-ikon { width: 40px; height: 40px; font-size: 16px; }
.livproje-iletisim-deger { font-size: 16px; line-height: 26px; }
}
/* Başlık alanı ile harita arası: bölümün 100px üst dolgusu fazlaydı.
.section-xl ana sayfada da kullanıldığı için yalnızca iletişim
sayfasının harita bölümüne kapsamlandı. */
.section-xl:has(> .container-fluid > .iframe-area) {
padding-top: 50px;
}
@media (max-width: 767px) {
.section-xl:has(> .container-fluid > .iframe-area) { padding-top: 30px; }
}
/* --------------------------------------------------------------------------
13) BÖLÜM BAŞLIKLARI ("Bize Ulaşın" tipi) — site geneli küçültme
Tema temeli 48px/48px/-2px; Türkçe başlıklarda fazla iri duruyordu.
Tema'nın duyarlı merdiveni tutarsızdı (1024'te 40px, 991'de 45px — sonraki
kural kazandığı için ekran daraldıkça başlık BÜYÜYORDU). Burada tek ve
artan bir merdiven kuruluyor.
-------------------------------------------------------------------------- */
.pbmit-heading-subheading .pbmit-title,
.pbmit-heading .pbmit-title {
font-size: 38px;
line-height: 46px;
letter-spacing: -0.8px;
}
@media (max-width: 1024px) {
.pbmit-heading-subheading .pbmit-title,
.pbmit-heading .pbmit-title { font-size: 35px; line-height: 43px; }
}
@media (max-width: 991px) {
.pbmit-heading-subheading .pbmit-title,
.pbmit-heading .pbmit-title { font-size: 33px; line-height: 41px; }
}
@media (max-width: 767px) {
.pbmit-heading-subheading .pbmit-title,
.pbmit-heading .pbmit-title { font-size: 29px; line-height: 37px; letter-spacing: -0.4px; }
}
@media (max-width: 575px) {
.pbmit-heading-subheading .pbmit-title,
.pbmit-heading .pbmit-title { font-size: 26px; line-height: 34px; }
}
/* --------------------------------------------------------------------------
14) İLETİŞİM — harita ile alttaki içerik arası
Harita bölümünün 100px alt dolgusu ile sol sütunun 100px üst dolgusu
üst üste binip 209px yapıyordu. Form kutusunun 100px üst marjı sol sütunla
hizalı durduğu için o da birlikte küçültülüyor.
-------------------------------------------------------------------------- */
.section-xl:has(> .container-fluid > .iframe-area) {
padding-bottom: 30px;
}
.contact-us-left-area {
padding-top: 55px;
}
.contact-form-area {
margin-top: 55px;
}
/* Harita yüksekliği: tema 600px veriyordu, konum göstermek için fazlaydı. */
.iframe-area iframe {
height: 440px;
}
@media (max-width: 991px) {
.iframe-area iframe { height: 380px; }
}
@media (max-width: 767px) {
.iframe-area iframe { height: 320px; }
}
@media (max-width: 767px) {
.section-xl:has(> .container-fluid > .iframe-area) { padding-bottom: 20px; }
.contact-us-left-area { padding-top: 35px; }
.contact-form-area { margin-top: 35px; }
}
/* --------------------------------------------------------------------------
15) İLETİŞİM — sosyal medya bağlantıları
-------------------------------------------------------------------------- */
.livproje-iletisim-sosyal {
margin-top: 28px;
}
.livproje-iletisim-sosyal ul {
list-style: none;
display: flex;
gap: 12px;
margin: 12px 0 0;
padding: 0;
}
.livproje-iletisim-sosyal a {
width: 46px;
height: 46px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 17px;
color: #2d5c9f;
border: 1px solid rgba(45, 92, 159, .35);
transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.livproje-iletisim-sosyal a:hover {
background: #2d5c9f;
border-color: #2d5c9f;
color: var(--pbmit-white-color);
}
@media (max-width: 767px) {
.livproje-iletisim-sosyal { margin-top: 22px; }
.livproje-iletisim-sosyal a { width: 40px; height: 40px; font-size: 15px; }
}
/* --------------------------------------------------------------------------
16) ÜRÜN KATEGORİ SAYFALARI (REHAU PVC Pencere vb.)
-------------------------------------------------------------------------- */
/* Büyük görselden maske kaldırıldı.
Tema ".about-two-leftbox .about-two-img" üzerine about-masking.png maskesi
uyguluyor; görselin üstünden dik bir ayırıcı iniyordu. Maske yerine
yuvarlatılmış köşe kullanılıyor. */
.about-two-leftbox .about-two-img {
-webkit-mask-image: none;
mask-image: none;
border-radius: 20px;
width: 100%;
height: auto;
display: block;
}
/* Görsel üzerindeki marka rozeti: tema zemini altın rengi veriyordu, REHAU
logosunun kendi renkleriyle (macenta/turkuaz) çakışıyor — beyaza alındı. */
.about-two-leftbox .pbmit-ihbox-style-11 .pbmit-ihbox-headingicon {
background-color: var(--pbmit-white-color);
padding: 26px 34px;
box-shadow: 0 6px 22px rgba(0, 0, 0, .12);
}
.livproje-marka-rozet-logo {
width: 132px;
max-width: 100%;
height: auto;
display: block;
}
@media (max-width: 767px) {
.about-two-leftbox .pbmit-ihbox-style-11 .pbmit-ihbox-headingicon { padding: 18px 24px; }
.livproje-marka-rozet-logo { width: 96px; }
}
/* Seri kartları: carousel yerine sabit ızgara */
.livproje-seri-grid {
margin-top: 50px;
}
.livproje-seri-grid > [class*="col-"] {
display: flex;
}
.livproje-seri-grid .pbminfotech-post-item,
.livproje-seri-grid .pbmit-box-content-wrap,
.livproje-seri-grid .pbmit-service-image-wrapper,
.livproje-seri-grid .pbmit-featured-img-wrapper,
.livproje-seri-grid .pbmit-featured-wrapper {
width: 100%;
}
/* Teknik etiket: tema bu kart tipinde kategoriyi gizliyor
(".pbmit-service-style-1 .pbmit-serv-cat { display:none }"), burada
profil bilgisi taşıdığı için görünür yapıldı. */
.livproje-seri-grid .pbmit-serv-cat {
display: block;
margin-bottom: 6px;
}
.livproje-seri-grid .pbmit-serv-cat span {
font-size: 13px;
line-height: 20px;
letter-spacing: .6px;
text-transform: uppercase;
font-weight: 700;
color: #8e6f3e;
}
/* Sıra numarası da tema altınıydı (beyazda 2.65:1) — koyultuldu. */
.livproje-seri-grid .pbminfotech-box-number {
color: #8e6f3e;
font-weight: 700;
letter-spacing: 1px;
}
/* Başlık ile açıklama arası.
Belirleyici değer temanın açıklamaya verdiği "margin-top: 55px"; başlığın
alt marjı komşu marj birleşmesi (margin collapsing) yüzünden yutuluyor,
yani onu küçültmek TEK BAŞINA hiçbir şey değiştirmiyor.
"REHAU Geneo Kaldırmalı Sürme Kapı" gibi iki satıra düşen adlarda açıklama
aşağı kayıp sağ alttaki ok butonunun hizasına giriyordu. */
.livproje-seri-grid .pbmit-service-title {
margin-bottom: 8px;
}
.livproje-seri-grid .pbmit-service-description {
margin-top: 22px;
padding-top: 16px;
}
@media (max-width: 767px) {
.livproje-seri-grid { margin-top: 32px; }
/* Tema mobilde açıklamanın sağ marjını 0'a düşürüyor; sağ alttaki 50px'lik
ok butonu için ayrılan pay kalmayınca son satır butonun üstüne geliyordu.
!important şart: responsive.css'teki kural da
".pbmit-service-style-1 .pbmit-service-description{margin:20px 0 0 0 !important}"
şeklinde geliyor, özgüllük artırmak yetmiyor. */
.livproje-seri-grid .pbmit-service-description {
margin-right: 30px !important;
}
}
/* --------------------------------------------------------------------------
17) ELVİAL PENCERE — seri filtresi (Isotope) ve 19'lu ızgara
Tema'nın hazır sortable mekanizması kullanılıyor (.pbmit-sortable-yes +
.pbmit-sortable-list + isotope). scripts.js açılışta ilk bağlantıyı
otomatik tıkladığı için varsayılan seri ICONIC oluyor; "Tümü" seçeneği yok.
-------------------------------------------------------------------------- */
/* Isotope öğeleri mutlak konumlanır: eşit yükseklik için kullanılan flex
kuralı burada anlamsız, dikey aralık da row-gap ile değil margin ile
verilmeli (isotope row-gap'i okumaz). */
.livproje-elvial-grid > [class*="col-"] {
display: block;
margin-bottom: 30px;
}
/* Açılış sıçraması: isotope ilk filtreyi uygulayana kadar 19 kart birden
basılıp sayfa uzuyor, sonra 5 karta düşüyordu.
ÖNEMLİ: kartların display'ine DOKUNULMAZ — isotope gizle/göster işini
inline display ile yapıyor, araya girince filtrelenen kartları bir daha
açamıyor (ESSENCE/ELVIAL sekmeleri boş kalıyordu). Bunun yerine yalnızca
kapsayıcı görünmez tutuluyor; livproje.js ilk filtre uygulanınca
.pbmit-filtre-hazir ekleyip serbest bırakıyor. */
.livproje-elvial-grid:not(.pbmit-filtre-hazir) {
visibility: hidden;
min-height: 700px;
}
/* Filtre düğmeleri */
.livproje-seri-filtre {
margin-top: 40px;
margin-bottom: 45px;
}
.livproje-seri-filtre .pbmit-sortable-list-ul {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 12px;
margin: 0;
padding: 0;
}
.livproje-seri-filtre .pbmit-sortable-link {
display: inline-block;
padding: 12px 26px;
border-radius: 40px;
border: 1px solid rgba(45, 92, 159, .30);
font-size: 14px;
font-weight: 700;
letter-spacing: .4px;
color: #2d5c9f;
background: transparent;
transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.livproje-seri-filtre .pbmit-sortable-link:hover {
border-color: #2d5c9f;
background: rgba(45, 92, 159, .08);
color: #2d5c9f;
}
.livproje-seri-filtre .pbmit-sortable-link.pbmit-selected {
background: #2d5c9f;
border-color: #2d5c9f;
color: var(--pbmit-white-color);
}
@media (max-width: 767px) {
.livproje-seri-filtre { margin-top: 28px; margin-bottom: 30px; }
.livproje-seri-filtre .pbmit-sortable-list-ul { gap: 8px; }
.livproje-seri-filtre .pbmit-sortable-link { padding: 10px 18px; font-size: 13px; }
.livproje-elvial-grid > [class*="col-"] { margin-bottom: 24px; }
}
/* --------------------------------------------------------------------------
18) BAŞLIK ALANI TAM GENİŞLİK
responsive.css @media(min-width:1201px) içinde
".pbmit-title-bar-wrapper{ margin:10px 10px 0; border-radius:20px }" var.
Bu yüzden iç sayfaların üst görseli iki yandan 10px içeride kalıyor ve
köşeleri yuvarlanıyordu; ana sayfadaki slider ise (aynı blokta yalnızca
border-radius alıyor, margin almıyor) kenara dayandığı için tam genişlikti.
Aradaki fark buydu — başlık alanı da slider gibi tam genişliğe alındı.
-------------------------------------------------------------------------- */
body .pbmit-title-bar-wrapper.livproje-title-bar {
margin: 0;
border-radius: 0;
max-width: none;
}
/* --------------------------------------------------------------------------
19) ÜRÜN DETAY — çoklu görsel galerisi (büyük görsel + küçük resimler)
Küçük resme tıklayınca büyük görsel değişir; büyük görsele tıklayınca
Magnific Popup ile tüm görseller gezilebilir. Tema'da zaten yüklü olan
Magnific kullanılıyor, yeni kütüphane eklenmedi.
-------------------------------------------------------------------------- */
.livproje-galeri {
margin-bottom: 40px;
}
.livproje-galeri-ana {
position: relative;
border-radius: 20px;
overflow: hidden;
background: var(--pbmit-light-color);
}
.livproje-galeri-buyuk {
display: block;
position: relative;
line-height: 0;
}
.livproje-galeri-buyuk img {
width: 100%;
height: auto;
display: block;
transition: transform .6s cubic-bezier(.4, .01, .14, .99);
}
.livproje-galeri-buyuk:hover img {
transform: scale(1.03);
}
/* Büyüteç rozeti — görselin tıklanabilir olduğunu belli eder */
.livproje-galeri-buyutec {
position: absolute;
right: 20px;
bottom: 20px;
width: 52px;
height: 52px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: var(--pbmit-white-color);
background: rgba(45, 92, 159, .92);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
transition: transform .25s ease;
}
.livproje-galeri-buyuk:hover .livproje-galeri-buyutec {
transform: scale(1.08);
}
.livproje-galeri-kucukler {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
margin-top: 12px;
}
.livproje-galeri-kucuk {
padding: 0;
border: 2px solid transparent;
border-radius: 10px;
overflow: hidden;
background: none;
cursor: pointer;
line-height: 0;
transition: border-color .2s ease, opacity .2s ease;
opacity: .72;
}
.livproje-galeri-kucuk img {
width: 100%;
height: auto;
display: block;
}
.livproje-galeri-kucuk:hover {
opacity: 1;
}
.livproje-galeri-kucuk.is-aktif {
border-color: #2d5c9f;
opacity: 1;
}
.livproje-galeri-kucuk:focus-visible {
outline: 3px solid rgba(45, 92, 159, .45);
outline-offset: 2px;
}
/* Görsel sayısı 6'dan az olan galeriler: 6 sütunlu ızgarada küçük resimler
sola sıkışıp sağda geniş boşluk bırakıyordu. Esnek dizilimle ana görselin
altında ortalanıyor, boyutları 6'lı sayfalarla aynı kalıyor. */
.livproje-galeri-kucukler.is-az {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.livproje-galeri-kucukler.is-az .livproje-galeri-kucuk {
flex: 0 1 124px;
max-width: 160px;
}
/* Görsel sayısı fazla olan galeriler (13 adet): 6'lı ızgarada son satırda
tek başına bir küçük resim kalıyordu; 7 sütunda 7+6, 5 sütunda 5+5+3 oluyor. */
.livproje-galeri-kucukler.is-cok {
grid-template-columns: repeat(7, 1fr);
gap: 10px;
}
@media (max-width: 991px) {
.livproje-galeri-kucukler { grid-template-columns: repeat(4, 1fr); }
.livproje-galeri-kucukler.is-cok { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 575px) {
.livproje-galeri { margin-bottom: 30px; }
.livproje-galeri-kucukler { grid-template-columns: repeat(3, 1fr); gap: 8px; }
/* 5 sütunda küçük resimler 59px'e düşüp dokunma hedefi olarak küçük kalıyordu */
.livproje-galeri-kucukler.is-cok { grid-template-columns: repeat(4, 1fr); gap: 8px; }
.livproje-galeri-buyutec { width: 42px; height: 42px; font-size: 15px; right: 14px; bottom: 14px; }
}
/* --------------------------------------------------------------------------
20) ÜRÜN DETAY — kenar çubuğu kutuları
-------------------------------------------------------------------------- */
/* Ürün başlığı satırı: başlık solda, marka logosu sağda.
Logo 100px genişlikte — 40px'lik başlıkla orantılı (yüksekliği ~38px,
başlığın harf yüksekliğine yakın). */
.livproje-urun-baslik {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
margin-bottom: 20px;
}
.livproje-urun-baslik .widget-title {
margin-bottom: 0;
flex: 1 1 auto;
}
.livproje-urun-marka {
flex: 0 0 auto;
width: 100px;
height: auto;
display: block;
}
/* İki markanın kapsamına giren ürünler: logolar yan yana, aralarında ince ayraç */
.livproje-urun-markalar {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 14px;
}
/* Tema global olarak box-sizing:border-box uyguluyor; ayraç dolgusu+kenarlığı
100px genişlikten düşülünce ikinci logo küçülüyordu. content-box ile iki logo
da aynı boyda kalıyor. */
.livproje-urun-markalar .livproje-urun-marka {
box-sizing: content-box;
}
.livproje-urun-markalar .livproje-urun-marka + .livproje-urun-marka {
padding-left: 14px;
border-left: 1px solid rgba(45, 92, 159, .22);
}
@media (max-width: 575px) {
.livproje-urun-baslik { gap: 14px; }
/* Dar ekranda başlık + iki logo tek satıra sığmıyor; yalnızca çift logolu
satırda logolar alta insin (tek logolu sayfalar tek satırda kalır). */
.livproje-urun-baslik.is-cift-marka { flex-wrap: wrap; }
.livproje-urun-marka { width: 76px; }
.livproje-urun-markalar { gap: 10px; }
.livproje-urun-markalar .livproje-urun-marka { width: 64px; }
.livproje-urun-markalar .livproje-urun-marka + .livproje-urun-marka { padding-left: 10px; }
}
/* Performans tablosu.
Önceki tasarımda Uf değeri büyük mavi bir blokta öne çıkarılıyordu; kutu
kenar çubuğunda fazla baskın kalıyordu. Artık altı değer de aynı kartın
içinde ince ayraçlarla listeleniyor. Etiketler siyah, değerler mavi;
ilk satır (Uf) hafif mavi zemin ve büyük puntoyla öne çıkıyor — eski
tasarımdaki tam mavi blok kadar baskın olmadan. */
.livproje-performans {
list-style: none;
margin: 0;
padding: 2px 18px;
background: #f4f7fb;
border: 1px solid rgba(45, 92, 159, .13);
border-radius: 12px;
}
.livproje-performans li {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
padding: 13px 0;
border-bottom: 1px solid rgba(45, 92, 159, .13);
}
.livproje-performans li:last-child {
border-bottom: 0;
}
.livproje-performans span {
flex: 1 1 auto;
font-size: 14px;
line-height: 21px;
}
.livproje-performans strong {
flex: 0 0 auto;
font-size: 15px;
line-height: 21px;
font-weight: 700;
color: #2d5c9f;
text-align: right;
white-space: nowrap;
}
/* Öne çıkan satır (Uf): kartın kenarına kadar uzanan hafif mavi zemin ve
büyütülmüş değer. Negatif marj, kartın 18px yan dolgusunu iptal ediyor. */
.livproje-performans li.is-one-cikan {
margin: 0 -18px;
padding: 16px 18px;
background: rgba(45, 92, 159, .07);
border-radius: 11px 11px 0 0;
}
.livproje-performans li.is-one-cikan span {
font-weight: 600;
}
.livproje-performans li.is-one-cikan strong {
font-size: 20px;
line-height: 26px;
letter-spacing: -.3px;
}
/* Dikey varyant: değerleri uzun olan teknik özellik listeleri (REHAU sayfaları).
Etiket ile değer yan yana sığmadığından alt alta diziliyor. */
.service-details .livproje-performans.is-dikey li {
flex-direction: column;
align-items: flex-start;
gap: 3px;
padding: 12px 0;
}
.service-details .livproje-performans.is-dikey span {
font-size: 13px;
line-height: 19px;
color: #3d4657;
}
.service-details .livproje-performans.is-dikey strong {
font-size: 15px;
line-height: 22px;
text-align: left;
white-space: normal;
}
/* "Tümünü Gör" — listenin diğer maddelerinden ayrılsın */
.all-post-list .livproje-tumunu {
margin-top: 6px;
padding-top: 12px;
border-top: 1px solid rgba(var(--pbmit-blackish-color-rgb), .12);
}
.all-post-list .livproje-tumunu a {
color: #2d5c9f;
font-weight: 700;
}
.all-post-list .livproje-tumunu i {
font-size: 13px;
margin-left: 3px;
vertical-align: middle;
}
/* Teklif Al kutusu — arka planda teklif-al.jpg, üstünde koyu perde.
Perde şart: görselin gökyüzü kısmı açık, beyaz yazı okunmuyordu. */
/* Özgüllük: tema dolguyu ".widget.pbmit-service-ad .pbmit-service-ads" (0,3,0)
ile veriyor; sınıf zincirlemek yetmiyor, aynı ata seçici kullanılıyor (0,4,0).
Görsel adresindeki ?v= önbellek içindir — dosya adı aynı kalıp içeriği
değiştiği için tarayıcı eski (kırpılmamış) sürümü gösteriyordu. */
.widget.pbmit-service-ad .pbmit-service-ads.livproje-teklif {
background-image:
linear-gradient(180deg, rgba(10, 22, 44, .82) 0%, rgba(10, 22, 44, .62) 45%, rgba(10, 22, 44, .88) 100%),
url(../images/livproje/arka-plan/teklif-al.jpg?v=2);
background-size: cover, cover;
background-position: center center, center center;
background-repeat: no-repeat, no-repeat;
/* Tema 85/90px dikey dolgu veriyordu; içerik 217px olduğu için kutu
gereksiz uzuyordu (487px). */
padding: 48px 30px 52px;
}
@media (max-width: 767px) {
.widget.pbmit-service-ad .pbmit-service-ads.livproje-teklif {
padding: 40px 26px 44px;
}
}
.livproje-teklif .pbmit-btn {
margin-top: 18px;
}
.livproje-teklif .pbmit-ads-desc {
font-size: 15px;
line-height: 25px;
margin-bottom: 18px;
}
/* display:inline-flex iken buton telefonun sağına akıyordu; flex ile telefon
kendi satırını kaplıyor ve buton alt satıra iniyor. Kutu ortalı olduğu için
justify-content:center gerekiyor (flex, text-align'ı devralmaz). */
.livproje-teklif-tel {
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
font-size: 19px;
font-weight: 800;
color: var(--pbmit-white-color);
margin-bottom: 22px;
}
.livproje-teklif-tel:hover {
color: var(--pbmit-white-color);
text-decoration: underline;
}
/* --------------------------------------------------------------------------
21) ÜRÜN DETAY — sütun oranı ve metin rengi
Tema'da (responsive.css, @media min-width:1201px) kenar çubuğu SOLDA ve
%28 (.service-left-col), içerik sağda %72. Kenar çubuğu performans tablosu
ve teklif kutusu için dardı; oran 32/68'e çekildi.
-------------------------------------------------------------------------- */
@media (min-width: 1201px) {
.service-details .service-left-col {
flex: 0 0 32%;
max-width: 32%;
}
.service-details .service-right-col {
flex: 0 0 68%;
max-width: 68%;
}
}
/* Ürün detayında tüm okuma metni düz siyah.
Tema gövdeyi #666 gri, başlıkları #403226 kahve-siyah veriyordu; ikisi de
soluk/kahverengi duruyordu.
DIŞARIDA BIRAKILANLAR — bunlar koyu zemin üzerinde beyaz yazı, siyaha
çevrilirse okunmaz olur: .livproje-teklif (Teklif Al kutusu) ve
.pbmit-download-content (katalog butonu). */
.service-details .pbmit-service-content p,
.service-details .pbmit-firstletter,
.service-details .pbmit-icon-list-text,
.service-details .widget-title,
.livproje-performans span {
color: #111111;
}
/* Bu ikisi tema'da daha yüksek özgüllükte tanımlı, aynı ata seçicilerle
eşleşmek gerekiyor:
".sidebar .widget .widget-title" (0,3,0) ve
".service-sidebar .all-post-list ul li a" (0,3,3 — ayrıca %70 saydam). */
.service-details .sidebar .widget .widget-title {
color: #111111;
}
.service-details .service-sidebar .all-post-list ul li a {
color: #111111;
}
/* Üzerine gelme / açık sayfa vurgusu. Tema'nın altın rengi (#bb9a65) beyaz
üzerinde 2,65:1 kalıyordu (AA altı); site mavisi 6,68:1 veriyor. */
.service-details .service-sidebar .all-post-list ul li:hover a,
.service-details .service-sidebar .all-post-list ul li.post-active a {
color: #2d5c9f;
}
.service-details .service-sidebar .all-post-list ul li.post-active a {
font-weight: 600;
}
/* --------------------------------------------------------------------------
22) ÜRÜN DETAY — özellik listesi (kart görünümü)
Tema'nın düz "ikon + metin" satırları sade kalıyordu; her madde açık
zeminli, yuvarlatılmış bir karta dönüştürüldü ve tik ikonu mavi daire
rozetin içine alındı.
-------------------------------------------------------------------------- */
/* Kartlar SABİT yükseklikte (min-height ile), sütunu doldurmak için
esnemezler. Esneme denendi ama madde sayısı tek olduğunda (ör. 7 madde =
4+3) az maddeli sütunun kartları 107px'e şişiyordu. Sabit yükseklikte
çift sayıda maddede iki sütun zaten aynı boyda biter; tek sayıda ise
yalnızca sağ sütun kısa kalır — kart boyutları her sayfada aynı. */
.livproje-ozellik-liste {
display: flex;
flex-direction: column;
margin-bottom: 0;
}
.livproje-ozellik-liste .list-group-item {
display: flex;
align-items: center;
flex: 0 0 auto;
/* İki satırlık maddenin yüksekliği taban alındı (14+14 dolgu + 2×23 satır
+ 2 kenarlık = 76px); böylece tek satırlık kartlar da aynı boyda olur
ve iki sütun karşılıklı hizalanır. */
min-height: 76px;
gap: 14px;
padding: 14px 18px;
margin: 0 0 12px;
background: #f4f7fb;
border: 1px solid rgba(45, 92, 159, .13);
border-radius: 12px;
transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
}
.livproje-ozellik-liste .list-group-item:hover {
background: #eaf1fa;
border-color: rgba(45, 92, 159, .38);
transform: translateY(-2px);
}
/* Tik rozeti: dolu mavi daire + beyaz simge bilardo topu gibi duruyordu.
Yuvarlatılmış kare, açık mavi zemin ve mavi simge — daha sakin. */
.livproje-ozellik-liste .pbmit-icon-list-icon {
flex: 0 0 32px;
width: 32px;
height: 32px;
border-radius: 9px;
background: rgba(45, 92, 159, .10);
border: 1px solid rgba(45, 92, 159, .18);
display: flex;
align-items: center;
justify-content: center;
}
.livproje-ozellik-liste .pbmit-icon-list-icon i {
color: #2d5c9f;
font-size: 15px;
line-height: 1;
}
/* Üzerine gelince rozet dolu maviye döner — hareket kartta kalır */
.livproje-ozellik-liste .list-group-item:hover .pbmit-icon-list-icon {
background: #2d5c9f;
border-color: #2d5c9f;
}
.livproje-ozellik-liste .list-group-item:hover .pbmit-icon-list-icon i {
color: var(--pbmit-white-color);
}
.livproje-ozellik-liste .list-group-item:last-child {
margin-bottom: 0;
}
.livproje-ozellik-liste .pbmit-icon-list-text {
font-size: 15px;
line-height: 23px;
font-weight: 600;
}
@media (max-width: 575px) {
.livproje-ozellik-liste .list-group-item {
gap: 11px;
padding: 12px 14px;
margin-bottom: 10px;
}
.livproje-ozellik-liste .pbmit-icon-list-icon {
flex: 0 0 30px;
width: 30px;
height: 30px;
}
.livproje-ozellik-liste .pbmit-icon-list-text { font-size: 14px; line-height: 21px; }
}
/* --------------------------------------------------------------------------
23) ÜRÜN DETAY — içerik bölümleri
Teknik Özellikler · Enerji Seviyeleri · Teknoloji · Tipolojiler
-------------------------------------------------------------------------- */
/* Bölüm başlığı: sayfa H1/H2'lerinden küçük, altında mavi vurgu çizgisi */
/* Slogan: görselin hemen altında, bölüm başlıklarıyla yarışmaması için
marka mavisiyle yazılıyor — başlık değil, öne çıkan cümle olarak okunur. */
.service-details .pbmit-service-content p.livproje-slogan {
position: relative;
margin: 0;
padding: 2px 0 2px 18px;
font-size: 20px;
line-height: 30px;
font-weight: 600;
letter-spacing: -.2px;
color: #2d5c9f;
}
.livproje-slogan::before {
content: "";
position: absolute;
left: 0;
top: 4px;
bottom: 4px;
width: 4px;
border-radius: 2px;
background: #2d5c9f;
}
/* Slogandan sonraki ilk bölüm başlığının üst boşluğu biraz daralsın */
.livproje-slogan + .livproje-bolum-baslik {
margin-top: 38px;
}
.livproje-bolum-baslik {
font-size: 24px;
line-height: 32px;
font-weight: 700;
color: #111111;
margin: 46px 0 22px;
padding-bottom: 12px;
position: relative;
border-bottom: 1px solid rgba(45, 92, 159, .16);
}
.livproje-bolum-baslik::after {
content: "";
position: absolute;
left: 0;
bottom: -1px;
width: 56px;
height: 3px;
background: #2d5c9f;
border-radius: 2px;
}
/* --- Enerji seviyeleri: tablo --- */
.livproje-enerji-tablo,
.livproje-ozellik-tablo {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: #f4f7fb;
border: 1px solid rgba(45, 92, 159, .13);
border-radius: 12px;
overflow: hidden;
}
.livproje-enerji-tablo th,
.livproje-ozellik-tablo th {
font-size: 13px;
font-weight: 700;
letter-spacing: .8px;
text-transform: uppercase;
color: var(--pbmit-white-color);
background: #2d5c9f;
padding: 12px 18px;
text-align: left;
}
.livproje-enerji-tablo th:last-child,
.livproje-enerji-tablo td:last-child,
.livproje-ozellik-tablo th:last-child,
.livproje-ozellik-tablo td:last-child {
text-align: right;
}
.livproje-enerji-tablo td,
.livproje-ozellik-tablo td {
font-size: 15px;
line-height: 22px;
color: #111111;
padding: 13px 18px;
border-top: 1px solid rgba(45, 92, 159, .13);
}
.livproje-enerji-tablo tbody tr:first-child td,
.livproje-ozellik-tablo tbody tr:first-child td {
border-top: 0;
}
/* Özellikler tablosunda ilk sütun etiket, ikinci sütun değer olduğundan
etiketi biraz daha sönük, değeri vurgulu tutuyoruz. */
.service-details .livproje-ozellik-tablo td:first-child {
width: 46%;
font-size: 14px;
color: #3d4657;
}
.service-details .livproje-ozellik-tablo td:last-child {
font-weight: 600;
}
/* En iyi seviye (listenin sonuncusu) vurgulu */
.livproje-enerji-tablo tr.is-en-iyi td {
background: rgba(45, 92, 159, .07);
font-weight: 700;
}
.livproje-enerji-tablo tr.is-en-iyi td:last-child {
color: #2d5c9f;
}
/* --------------------------------------------------------------------------
DİL SEÇİCİ — üst şeritte, telefonun solunda
-------------------------------------------------------------------------- */
.livproje-dil-secici {
display: flex;
align-items: center;
gap: 4px;
list-style: none;
margin: 0 18px 0 0;
padding: 0;
}
.livproje-dil-secici a {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 8px 4px 6px;
font-size: 12px;
font-weight: 700;
letter-spacing: .5px;
line-height: 16px;
border-radius: 5px;
color: rgba(255, 255, 255, .78);
transition: color .2s ease, background-color .2s ease;
}
/* Bayrak kutusu ölçüleri sabit: görsel geç yüklense bile satır kaymaz.
Kılcal çerçeve, açık renkli kenarı olan bayrakların (İngiliz bayrağının beyaz
şeritleri) beyaz etkin zemine karışmasını önler. */
.livproje-dil-secici img {
display: block;
width: 24px;
height: 16px;
border-radius: 2px;
box-shadow: 0 0 0 1px rgba(0, 0, 0, .22);
}
/* Seçili olmayan dilin bayrağı hafif sönük; üzerine gelince tam renk. */
.livproje-dil-secici li:not(.is-aktif) img {
opacity: .75;
transition: opacity .2s ease;
}
.livproje-dil-secici a:hover {
color: #ffffff;
background: rgba(255, 255, 255, .14);
}
.livproje-dil-secici a:hover img {
opacity: 1;
}
/* Açık olan dil: beyaz üzerine koyu — üst şeridin koyu zemininde 12,6:1 */
.livproje-dil-secici .is-aktif a {
color: #14243d;
background: rgba(255, 255, 255, .92);
}
/* 1400px altında üst şerit sıkışmaya başlıyor — adres 1199px'e kadar görünür
kalıyor ve telefon bloğu sabit genişlikte. Seçiciyi burada daraltıyoruz ki
şeritten taşıp menünün altına düşmesin. */
@media (max-width: 1400px) {
.livproje-dil-secici { margin-right: 12px; gap: 2px; }
.livproje-dil-secici a { gap: 4px; padding: 3px 6px 3px 4px; font-size: 11px; }
.livproje-dil-secici img { width: 20px; height: 13px; }
}
@media (max-width: 575px) {
.livproje-dil-secici { margin-right: 10px; }
}
/* --- Aynı seçicinin mobil menü panelindeki kopyası ---------------------------
Üst şerit 1200px altında temanın kendi kuralıyla gizleniyor (responsive.css),
dolayısıyla telefonda dil değiştirmenin tek yolu bu. Menü listesinin altına,
ince bir ayraç çizgisinin ardına yerleşir.
Panel zemini BEYAZ olduğu için renkler ters çevrildi: üst şeritteki beyaz
yazı burada okunmazdı. */
.livproje-dil-secici-mobil {
display: none;
}
@media (max-width: 1200px) {
.livproje-dil-secici-mobil {
display: flex;
justify-content: center;
gap: 10px;
margin: 18px 20px 34px;
padding-top: 20px;
border-top: 1px solid rgba(20, 36, 61, .13);
}
.livproje-dil-secici-mobil a {
gap: 8px;
padding: 9px 14px;
font-size: 13px;
line-height: 18px;
color: #3c4a5e; /* beyaz üzerinde 8,1:1 */
background: rgba(20, 36, 61, .06);
}
.livproje-dil-secici-mobil img {
width: 24px;
height: 16px;
}
.livproje-dil-secici-mobil a:hover {
color: #14243d;
background: rgba(20, 36, 61, .12);
}
/* Açık dil: dolu koyu hap — beyaz panelde 13,9:1 */
.livproje-dil-secici-mobil .is-aktif a {
color: #ffffff;
background: #14243d;
}
}
/* Kategori sayfası ürün kartlarında görsel bağlantısı.
Blok seviyesinde ve satır yüksekliği sıfır: img'in altında boşluk bırakmaz,
temanın kart içi ölçüleri değişmez. Kartın erişilebilir bağlantısı başlıktır;
bu bağlantı ile sağ alttaki ok tekrar sayılmasın diye erişim ağacından
çıkarıldı (tabindex="-1" aria-hidden="true"), fare tıklaması etkilenmez. */
.livproje-kart-gorsel {
display: block;
line-height: 0;
}
/* Ana sayfa kartlarında (.pbmit-service-style-2) görselin üstünde tam boy
dekoratif bir karartma katmanı var: .pbmit-featured-wrapper::before, z-index:1.
Başlık yazısı bu karartmanın üstünde okunuyor, yani katman görsel olarak
gerekli — ama tıklamayı yuttuğu için görsel bağlantısı çalışmıyordu.
Katmanı yerinde bırakıp yalnızca tıklamaya geçirgen yapıyoruz; böylece
görünüm aynı kalıyor, tık alttaki bağlantıya ulaşıyor.
(Kategori sayfalarındaki .pbmit-service-style-1'de böyle bir katman yok.) */
.pbmit-service-style-2 .pbmit-featured-wrapper::before {
pointer-events: none;
}
/* --------------------------------------------------------------------------
İLETİŞİM FORMU — sonuç mesajı, güvenlik sorusu, bal küpü
-------------------------------------------------------------------------- */
.livproje-form-sonuc {
margin-bottom: 24px;
padding: 15px 20px;
border-radius: 10px;
font-size: 15px;
line-height: 23px;
font-weight: 600;
border: 1px solid transparent;
}
.livproje-form-sonuc.is-basarili {
background: #e8f5ec;
border-color: rgba(21, 115, 71, .28);
color: #157347;
}
.livproje-form-sonuc.is-hatali {
background: #fdecec;
border-color: rgba(158, 32, 32, .28);
color: #9e2020;
}
/* --------------------------------------------------------------------------
TELEFON ALANI — baştaki 0 sabit, numara 532-666-77-55 biçiminde
-------------------------------------------------------------------------- */
.livproje-tel-alan {
position: relative;
}
.livproje-tel-onek {
position: absolute;
top: 0;
left: 0;
display: flex;
align-items: center;
height: 100%;
padding: 0 12px 0 20px;
font-size: 15px;
font-weight: 600;
color: #6b7280;
pointer-events: none; /* tıklama alanın kendisine gitsin */
}
/* Ön ekin genişliği kadar içeri girinti: rakamlar 0'ın üstüne binmesin. */
.livproje-tel-alan .form-control {
padding-left: 40px;
}
/* --------------------------------------------------------------------------
FORM SONUCU PENCERESİ
Aynı mesaj hem satır içinde hem pencerede duruyor. Sebep: form uzun,
gönderimden sonra sayfa başına dönüldüğünde satır içi kutu ekranın
dışında kalabiliyor ve ziyaretçi sonucu göremiyordu.
-------------------------------------------------------------------------- */
.livproje-uyari {
position: fixed;
inset: 0;
z-index: 2000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
background: rgba(11, 20, 34, .55);
opacity: 0;
visibility: hidden;
transition: opacity .2s ease, visibility .2s ease;
}
.livproje-uyari[hidden] {
display: none; /* JS açana kadar hiç yer kaplamasın */
}
.livproje-uyari.is-acik {
opacity: 1;
visibility: visible;
}
/* Pencere açıkken arka plan kaymasın. */
body.livproje-uyari-acik {
overflow: hidden;
}
.livproje-uyari-kutu {
width: 100%;
max-width: 420px;
padding: 34px 30px 28px;
border-radius: 14px;
background: #ffffff;
box-shadow: 0 24px 60px rgba(11, 20, 34, .3);
text-align: center;
transform: translateY(12px) scale(.97);
transition: transform .22s ease;
}
.livproje-uyari.is-acik .livproje-uyari-kutu {
transform: none;
}
.livproje-uyari-ikon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 62px;
height: 62px;
margin-bottom: 18px;
border-radius: 50%;
}
.livproje-uyari[data-tur="basarili"] .livproje-uyari-ikon {
background: #e8f5ec;
color: #157347;
}
.livproje-uyari[data-tur="hatali"] .livproje-uyari-ikon {
background: #fdecec;
color: #9e2020;
}
.livproje-uyari-baslik {
margin: 0 0 10px;
font-size: 21px;
line-height: 29px;
font-weight: 700;
color: #14243d;
}
.livproje-uyari-metin {
margin: 0 0 24px;
font-size: 15px;
line-height: 24px;
color: #4a5568;
}
.livproje-uyari-kapat {
min-width: 130px;
padding: 12px 26px;
border: 0;
border-radius: 8px;
font-size: 15px;
font-weight: 700;
color: #ffffff;
background: #14243d;
cursor: pointer;
transition: background-color .2s ease;
}
.livproje-uyari-kapat:hover,
.livproje-uyari-kapat:focus-visible {
background: #2d5c9f;
}
@media (max-width: 575px) {
.livproje-uyari-kutu { padding: 28px 22px 24px; }
.livproje-uyari-baslik { font-size: 19px; line-height: 27px; }
}
/* Hareketi azalt tercihi: pencere anında görünsün, kaymasın. */
@media (prefers-reduced-motion: reduce) {
.livproje-uyari,
.livproje-uyari-kutu { transition: none; }
.livproje-uyari-kutu { transform: none; }
}
.livproje-guvenlik-etiket {
display: block;
margin-bottom: 8px;
font-size: 14px;
line-height: 21px;
color: #111111;
}
.livproje-guvenlik-etiket strong {
color: #2d5c9f;
font-weight: 700;
}
/* Bal küpü: ekranda görünmez ama ekran okuyucudan da gizli (aria-hidden ile
birlikte), yalnızca formu otomatik dolduran bot'lar yakalanır. */
.livproje-hp {
position: absolute !important;
left: -9999px !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
}
/* Yan sütunda paragraflı açıklama kartı (kış bahçesi) — maddeli kardeşiyle
aynı kabuk, içeriği madde değil düz paragraf olan sayfalar için. */
.livproje-aciklama-metin {
margin: 0;
padding: 2px 18px;
background: #f4f7fb;
border: 1px solid rgba(45, 92, 159, .13);
border-radius: 12px;
}
.service-details .livproje-aciklama-metin p {
margin: 0;
padding: 14px 0;
font-size: 14px;
line-height: 22px;
color: #111111;
border-bottom: 1px solid rgba(45, 92, 159, .13);
}
.service-details .livproje-aciklama-metin p:last-child {
border-bottom: 0;
}
.service-details .livproje-aciklama-metin p.is-vurgu {
margin: 0 -18px;
padding: 16px 18px;
background: rgba(45, 92, 159, .07);
border-bottom: 0;
border-radius: 0 0 11px 11px;
font-weight: 600;
color: #23477c;
}
/* Yan sütunda açıklama kartı (giyotin sayfaları) — Performans kartının
yerine geçer, son madde "vurgu" olarak öne çıkar. */
.livproje-aciklama-liste {
list-style: none;
margin: 0;
padding: 2px 18px;
background: #f4f7fb;
border: 1px solid rgba(45, 92, 159, .13);
border-radius: 12px;
}
.service-details .livproje-aciklama-liste li {
position: relative;
padding: 14px 0 14px 20px;
font-size: 14px;
line-height: 22px;
color: #111111;
border-bottom: 1px solid rgba(45, 92, 159, .13);
}
.service-details .livproje-aciklama-liste li::before {
content: "";
position: absolute;
left: 0;
top: 21px;
width: 7px;
height: 7px;
border-radius: 2px;
background: #2d5c9f;
}
.livproje-aciklama-liste li:last-child {
border-bottom: 0;
}
.service-details .livproje-aciklama-liste li.is-vurgu {
margin: 0 -18px;
padding: 16px 18px 16px 38px;
background: rgba(45, 92, 159, .07);
border-bottom: 0;
border-radius: 0 0 11px 11px;
font-weight: 600;
color: #23477c;
}
.service-details .livproje-aciklama-liste li.is-vurgu::before {
left: 18px;
top: 23px;
}
/* Yan sütunda tek kolonlu teknoloji tablosu (katlanır sistem sayfası).
Performans kartıyla aynı zemin/kenarlık dilini kullanır. */
.livproje-teknoloji-tablo {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: #f4f7fb;
border: 1px solid rgba(45, 92, 159, .13);
border-radius: 12px;
overflow: hidden;
}
.service-details .livproje-teknoloji-tablo td {
font-size: 14px;
line-height: 21px;
font-weight: 500;
color: #111111;
padding: 13px 18px;
border-top: 1px solid rgba(45, 92, 159, .13);
}
.livproje-teknoloji-tablo tbody tr:first-child td {
border-top: 0;
}
/* --- Teknoloji --- */
.livproje-teknoloji-metin {
font-size: 16px;
line-height: 28px;
margin-bottom: 0;
}
.livproje-teknoloji {
list-style: none;
margin: 0;
padding: 0;
}
.livproje-teknoloji li {
position: relative;
padding: 0 0 0 26px;
margin-bottom: 12px;
font-size: 16px;
line-height: 27px;
color: #111111;
}
.livproje-teknoloji li::before {
content: "";
position: absolute;
left: 0;
top: 10px;
width: 8px;
height: 8px;
border-radius: 2px;
background: #2d5c9f;
}
.livproje-teknoloji li:last-child {
margin-bottom: 0;
}
/* --- Tipolojiler: etiket bulutu --- */
.livproje-tipoloji-etiket {
font-size: 15px;
line-height: 22px;
font-weight: 700;
color: #111111;
margin: 22px 0 12px;
}
.livproje-tipoloji-etiket:first-of-type {
margin-top: 0;
}
.livproje-tipoloji {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 0 0 4px;
padding: 0;
}
.livproje-tipoloji li {
padding: 9px 16px;
background: #f4f7fb;
border: 1px solid rgba(45, 92, 159, .16);
border-radius: 30px;
font-size: 14px;
line-height: 21px;
font-weight: 600;
color: #111111;
transition: background-color .2s ease, border-color .2s ease;
}
.livproje-tipoloji li:hover {
background: rgba(45, 92, 159, .10);
border-color: rgba(45, 92, 159, .40);
}
@media (max-width: 767px) {
.livproje-bolum-baslik { font-size: 21px; line-height: 29px; margin: 36px 0 18px; }
.service-details .pbmit-service-content p.livproje-slogan { font-size: 18px; line-height: 27px; padding-left: 14px; }
.livproje-slogan + .livproje-bolum-baslik { margin-top: 30px; }
.livproje-enerji-tablo th,
.livproje-enerji-tablo td,
.livproje-ozellik-tablo th,
.livproje-ozellik-tablo td { padding: 11px 14px; font-size: 14px; }
.service-details .livproje-ozellik-tablo td:first-child { font-size: 13px; }
.livproje-tipoloji { gap: 8px; }
.livproje-tipoloji li { padding: 8px 13px; font-size: 13px; }
.livproje-teknoloji li,
.livproje-teknoloji-metin { font-size: 15px; line-height: 26px; }
}