olarak (arka plan resmine gömülü gradient yerine, çünkü
video gerçek bir DOM öğesi, CSS background'a gömülemez). */
.hero-video-overlay {
position: absolute;
inset: 0;
z-index: 1;
background-color: rgba(0, 0, 0, .55);
pointer-events: none;
}
/* Mega menü açıkken (tasarim/acilir-hamburger-menu.png referansı) menü
panelinin altında dimmed olarak görünmesi gereken kısım hero-section
değil, ondan sonraki (açık renkli, kamyon görselli) local-power-section
ve devamındaki ürün grupları carousel'i (product-range-section). Zaten
siyah olan hero-section koyu overlay üzerine bindiğinde ekranda düz
siyah boşluk gibi göründüğü için menü açıkken gizlenir.
KÖK NEDEN #1 (DÜZELTİLDİ): eskiden display:none kullanılıyordu — bu,
section'ı layout akışından ANINDA (geçişsiz) çıkarıp/geri sokuyordu,
dolayısıyla altındaki her şey (ürün grupları carousel'i dahil) menü
her açılıp kapandığında SERT bir sıçramayla yukarı/aşağı zıplıyordu
("slider birden aşağı gidiyor" şikayeti).
KÖK NEDEN #2 (DÜZELTİLDİ): sonra sadece opacity:0 kullanıldı (sıçrama
düzeldi) ama section KENDİ YÜKSEKLİĞİNİ (padding dahil ~500px) korumaya
devam etti — altındaki gerçek içerik o kadar aşağı itilmiş durumda
kalıyordu ki menü açıkken arkada gerçek içerik yerine sadece boş/
karartılmış hero alanı ("düz gri blok" hissi) görünüyordu. Çözüm: max-
height'ı da (main.js'te JS ile ölçülüp inline atanan px değerinden) 0'a,
padding'i de 0'a çekmek — böylece section'ın kapladığı alan da YUMUŞAKÇA
(0.35s, sıçramasız) sıfırlanır ve altındaki içerik yukarı kayarak
arkada görünür hale gelir. pointer-events:none: soluk haldeyken hero
içindeki linkler/video tıklanamaz kalır (zaten üstünü mega-menu-backdrop
kaplıyor). */
body.no-scroll .hero-section {
opacity: 0;
padding-top: 0;
padding-bottom: 0;
pointer-events: none;
}
.hero-title {
color: #ffffff;
font-size: 26px;
font-weight: 400;
line-height: 1.25;
margin-bottom: 24px;
}
.hero-title-accent {
color: #eec21a;
}
/* Admin bir görsel/video yüklemediyse (varsayılan durum) sağda gösterilen
dekoratif ürün görseli (tasarim/slide-img.png) — hero-title/arama/CTA
sütununun (col-lg-7/col-xl-6) yanında, section'ın sağ yarısını kaplar. */
.hero-decor-img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 46%;
z-index: 1;
pointer-events: none;
display: flex;
align-items: center;
justify-content: flex-end;
}
.hero-decor-img img {
max-width: 100%;
max-height: 105%;
width: auto;
height: auto;
object-fit: contain;
}
.hero-search-form-wrap {
/* 460px * 1.3 = 598px (madde 4: mevcut genişliğin %30 fazlası) */
max-width: 598px;
margin-bottom: 26px;
}
/* ==========================================================================
ÜRÜNLER HEADER (Ürün Kategorileri / Ürün Grubu Detay / Ürün Detay — ORTAK)
tasarim/_Ürünler-Header_.png referansı. Views/Shared/_ProductPageHero.cshtml
içinde kullanılır. Ana Sayfa'nın .hero-section'ı BİLEREK reuse edilmedi —
o class'ın .years-strip ile (border-radius köşe boşluğu dolgusu, bkz.
.hero-section yorumu) sıkı bir bağımlılığı var, ürün sayfalarını etkilememesi
için ayrı bir class. İçindeki arama kutusu ise Ana Sayfa hero'suyla AYNI
.hero-search-form/.search-form-input class'larını (dolayısıyla AYNI
js-product-search-* JS davranışını) reuse eder — sadece .product-hero-search-wrap
ile YATAYDA ORTALANIR (Ana Sayfa'da sol hizalı sütun içinde kalıyor). */
.product-hero-section {
background-color: #1a1244;
/* .page-hero-banner ile AYNI bindirme tekniği (margin-top:-70px, bkz. o kuralın
yorumu) — sticky header'ın kendi 32px köşe yuvarlanması bu section'ın üzerine
binip kesintisiz tek bir eğri oluşturuyor. padding-top bu -70px'i telafi edip
ÜSTÜNE 60px görünür boşluk ekliyor (header'ın altından itibaren). */
margin-top: -70px;
padding: 130px 0 50px;
border-bottom-left-radius: 32px;
border-bottom-right-radius: 32px;
}
.product-hero-eyebrow {
color: #eec21a;
font-size: 14px;
font-weight: 500;
margin-bottom: 16px;
}
/* Kutunun kendi genişliği/yüksekliği Ana Sayfa'daki .hero-search-form ile
BİREBİR AYNI kalıyor (input'un padding-top/bottom'u — 13px — DEĞİŞMEDİ,
47px yükseklik buradan geliyor; max-width hâlâ paylaşılan .hero-search-
form-wrap kuralından). SADECE ikon+yazı, kutunun İÇİNDE bir GRUP olarak
ortalanıyor: ikon artık solda absolute değil, input'la yan yana akışta
(.search-form'un gap'i ile ayrılmış) ve ikisi birlikte justify-content:
center ile ortalanıyor. */
.product-hero-search-wrap {
margin-left: auto;
margin-right: auto;
/* Padding YOK (yükseklik input'un kendi padding'inden gelmeye devam
etsin diye) — sadece beyaz zemin/köşe, input'un auto genişliğe
küçülmesiyle kutunun KENDİSİ küçülmesin diye. */
background-color: #ffffff;
border-radius: 8px;
}
.product-hero-search-wrap .search-form {
justify-content: center;
/* Temel .search-form{gap:14px} ikonla input arasını çok açık bırakıyordu —
ikon yazıya yakın dursun diye daraltıldı (0 ise fazla yapışık oluyordu). */
gap: 6px;
}
.product-hero-search-wrap .search-form-btn {
/* .hero-search-form .search-form-btn eski absolute+dikey-ortalama tekniğinden
(top:50%;transform:translateY(-50%)) kalan transform, position:static
olsa da UYGULANMAYA devam edip ikonu yukarı kaydırıyordu — sıfırlandı;
dikey hizalama artık .search-form'un align-items:center'ından geliyor. */
position: static;
transform: none;
}
.product-hero-search-wrap .search-form-input {
/* Genişlik BURADA sabitlenmiyor — main.js #16 bölümü placeholder metnini
gerçek fontla ölçüp input'a TAM OTURAN bir width atıyor (bkz. main.js).
Sabit bir px tahmini (300px vb.) her zaman metinden BÜYÜK kalıp
görünmez bir boşluk bırakıyordu — grup (ikon+input) kutunun ortasında
olsa bile bu boşluk yüzünden GÖRÜNEN ikon+yazı gözle ortalı görünmüyordu. */
flex: 0 0 auto;
max-width: 100%;
padding-left: 0;
padding-right: 0;
text-align: left;
}
.product-hero-text {
color: #ffffff;
font-size: 14px;
max-width: 480px;
margin: 0 auto;
}
/* ==========================================================================
YIL ŞERİDİ
========================================================================== */
.years-strip {
background-color: #eec21a;
color: #1a1244;
text-align: center;
padding: 4px 0;
font-size: 24px;
font-weight: 800;
letter-spacing: 1px;
/* position+z-index: ::before/::after köşe dolgularının konum referansı
VE .hero-section'ın (z-index:2) her zaman üstte kalmasını sağlayan
açık kat sırası (bkz. .hero-section yorumu) için gerekli. */
position: relative;
z-index: 1;
}
/* Köşe dolguları: .hero-section'ın 32px'lik yuvarlatılmış alt köşesinin
AÇTIĞI boşluğu (bkz. .hero-section yorumu) TAM O NOKTADA sarıyla kapatır —
tam genişlik değil, sadece iki köşede 32x32'lik birer kare (düz orta kısım
zaten kesintisiz sarı, dokunulmuyor). */
.years-strip::before,
.years-strip::after {
content: "";
position: absolute;
top: -32px;
width: 32px;
height: 32px;
background-color: #eec21a;
}
.years-strip::before {
left: 0;
}
.years-strip::after {
right: 0;
}
/* ==========================================================================
DÜNYAYA ULAŞAN GÜÇLÜ ÜRÜN AĞI
========================================================================== */
.world-network-section {
background-color: #ffffff;
padding: 70px 0 30px;
}
.world-network-heading {
max-width: 640px;
margin: 0 auto;
}
.world-network-heading .section-text {
max-width: none;
}
.world-network-map {
position: relative;
margin-top: 40px;
}
.world-network-map-img {
width: 100%;
height: auto;
display: block;
border-radius: var(--radius-lg);
}
.world-network-boxes-img {
position: absolute;
left: 50%;
bottom: -24%;
transform: translate(-50%, -50%);
width: 70%;
height: auto;
/* Gölge kaldırıldı (madde 6) */
}
.world-network-btn {
position: absolute;
top: 24px;
/* left:24px (sabit sol köşe) yerine ortalama (madde 5) */
left: 50%;
transform: translateX(-50%);
z-index: 2;
margin-top: 0;
/* .btn-outline-catalog'un temel padding'inden (12px 24px) daha kompakt
bir buton için override (madde 5) — paylaşılan sınıfın kendisi
değiştirilmedi, sadece bu bileşende daraltıldı. */
padding: 8px 30px;
font-size: 13px;
/* .btn-outline-catalog'un temel border'ı çok soluk (rgba(26,18,68,0.2))
— bu buton için tam opak lacivert border'a override edildi. */
border-color: #1a1244;
}
/* ==========================================================================
ONE STOP SHOP
========================================================================== */
.one-stop-shop-section {
background-color: #ffffff;
padding: 60px 0 90px;
}
/* tasarim/edit4.png: tasarim/pagerm-shop.png (2038x839, sağda ürün/dünya
haritası + solda boş/açık degrade zemin) TEK PARÇA bant arkaplanı olarak
kullanılıyor — eskiden ayrı bir .one-stop-shop-image kutusunda object-fit:
cover ile kırpılıyordu, bu da görselin sağ kenarını kesip beyaz köşeli
AYRI bir kutu gibi gösteriyordu. background-size:cover + aspect-ratio
(görselin kendi oranı) ile görsel artık kartın TÜM alanını, kesintisiz
ve oranı bozulmadan kaplıyor; ayrıca madde 6'daki kompakt/yatay bant
görünümünü de bu aspect-ratio otomatik sağlıyor (kare/dikey değil). */
.one-stop-shop-card {
/* Butonların (.one-stop-shop-actions) position:absolute referans noktası
— bkz. aşağısı. */
position: relative;
background-color: var(--bg-light-gray);
background-image: url("../img/pagerm-shop.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
aspect-ratio: 2038 / 839;
border-radius: var(--radius-lg);
/* overflow:hidden KALDIRILDI (madde 4) — masaüstünde .one-stop-shop-actions
artık kartın alt kenarından taşıyor (bkz. aşağısı), overflow:hidden bu
taşmayı kırpardı. Arkaplan görseli border-radius sayesinde zaten
otomatik olarak yuvarlak köşelere kırpılıyor (border-box clip),
overflow:hidden'a bunun için ihtiyaç yoktu. */
display: flex;
align-items: center;
}
.one-stop-shop-content {
padding: 48px var(--radius-lg);
/* Sol boşluk 24px (--radius-lg) yerine sabit 60px — shorthand'dan SONRA
tanımlanarak sadece sol değeri override ediyor, üst/sağ/alt aynı
kalıyor. */
padding-left: 60px;
/* Görselin sağ tarafı ürün/harita içeriğiyle dolu — metin/buton bloğu
sadece solundaki boş/açık alanda kalsın diye genişliği sınırlandı. */
max-width: 520px;
/* Butonlar artık bu blok İÇİNDE normal akışta DEĞİL (position:absolute,
bkz. .one-stop-shop-actions) — DOM'da hâlâ burada duruyorlar ama
kapladıkları alan bu content bloğunun kendi yüksekliğine dahil
edilmiyor, bu yüzden altta fazladan boşluk kalmasın diye padding-bottom
normal 48px'ten daha az bırakıldı. */
padding-bottom: 24px;
}
.one-stop-shop-logo img {
height: 22px;
width: auto;
}
.one-stop-shop-title {
/* Önceki -webkit-text-stroke: 1px #1a1244 dış hat/kontur efekti
KALDIRILDI (madde 3) — artık düz/dolgu #eec21a, efektsiz. */
color: #eec21a;
font-size: 40px;
margin: 55px 0 20px;
}
.one-stop-shop-text {
font-size: 22px;
font-weight: 500;
line-height: 1.4;
color: #1a1244;
margin-bottom: 26px;
}
/* tasarim/edit4.png (piksel piksel ölçüldü — buton grubunun yatay merkezi
görselin TAM ORTASINDA, sol metin bloğunun sol kenarıyla DEĞİL): butonlar
sol metin bloğunun altında değil, TÜM kartın alt-orta noktasında duruyor.
.one-stop-shop-actions artık HTML'de .one-stop-shop-content'in DIŞINDA,
kartın doğrudan çocuğu (bkz. Index.cshtml) — en yakın konumlanmış ata
olan .one-stop-shop-card'a göre left:50%+translateX(-50%) ile yatayda
TAM ORTALANIYOR. */
.one-stop-shop-actions {
position: absolute;
left: 0;
right: 0;
/* Buton grubunun DİKEY MERKEZİ kartın alt kenar çizgisiyle çakışsın diye
(yarısı kart içinde, yarısı dışında taşarak) — ölçülen buton grubu
yüksekliği artık 37.5px ("Hakkımızda" butonuyla eşitlendi, bkz.
aşağısı .one-stop-shop-actions .btn), bu yüzden bottom =
-(37.5/2) = -18.75px. Sadece masaüstünde: mobilde (bkz. responsive.css,
max-width:991.98px) position:static'e dönüyor, bu değer devre dışı
kalıyor. */
bottom: -18.75px;
display: flex;
justify-content: center;
gap: 14px;
}
.one-stop-shop-actions .btn {
margin-right: 0;
margin-bottom: 0;
/* "Dünyaya Ulaşan Güçlü Ürün Ağı" bölümündeki "Hakkımızda" butonuyla
(.world-network-btn, padding:8px 30px) BİREBİR AYNI render yüksekliği
(37.5px) için — font-size (15px) değişmeden sadece dikey padding
6.5px'e düşürüldü (tarayıcıda ölçülerek doğrulandı: 13px->50.5px,
6.5px->37.5px, .world-network-btn'in yüksekliğiyle birebir eşit). */
padding-top: 6.5px;
padding-bottom: 6.5px;
/* .btn-cta-yellow (display:inline-flex, Bootstrap .btn'den miras 1px
şeffaf border) ile .btn-primary-custom (display:inline-block,
border:none) İKİSİ AYNI padding'e sahipken bile farklı render
yüksekliği veriyordu (mobilde .flex-wrap yüzünden satır kırılınca
37.5px'e karşı 35.5px — tarayıcıda ölçülerek tespit edildi). İkisini
AYNI layout moduna (inline-flex + border:1px solid transparent)
zorlayarak bu 2px'lik farkı ortadan kaldırıyoruz; iki buton da her
genişlikte birebir 37.5px. */
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid transparent;
box-sizing: border-box;
}
/* ==========================================================================
GENİŞ ÜRÜN YELPAZESİ GÜÇLÜ HİZMET
========================================================================== */
.product-range-section {
background-color: #ffffff;
padding: 30px 0 90px;
}
.product-range-heading {
max-width: 640px;
margin: 0 auto;
}
.product-range-heading .section-text {
max-width: none;
}
/* Etiketler video/görselin ÜZERİNE, ProductDiagramTag'teki X/Y yüzdesine göre absolute
konumlanır (bkz. Index.cshtml, AdminController.UrunSemasi/UrunSemasiEtiketler). Video
modunda main.js #15 bölümü videoyu bölüm viewport'a her girişte BAŞTAN oynatır,
çıkışta durdurup başa sarar ve etiketleri/okları tekrar gizler. 'ended' event'inde
her etiket + kendi bağlı ok/çizgisi main.js'in atadığı transition-delay ile TEK TEK
(.is-visible class'ı kendi üzerlerine eklenir) görünür olur — bkz. revealTagsStaggered.
Görsel modunda (video yoksa) main.js aynı sıralı reveal'ı gecikmesiz uygular. */
.product-diagram {
position: relative;
max-width: 1100px;
width: 100%;
margin: 44px auto;
}
.diagram-media img,
.diagram-media video {
width: 100%;
height: auto;
display: block;
}
/* Tüm etiket kutuları AYNI genişlikte (en uzun metin olan "Süspansiyon & Direksiyon"
kutusunun gerçek render genişliği ölçülüp yuvarlandı) — kısa metinler
justify-content:center ile kutu içinde ortalanır. Yükseklik/border-radius/font-size
".world-network-btn" ("Hakkımızda" butonu) ile BİREBİR AYNI (37.5px yükseklik,
8px radius, 13px font — bkz. style.css .world-network-btn tanımı). */
.diagram-tag {
position: absolute;
top: var(--tag-y);
width: 174px;
height: 37.5px;
display: inline-flex;
align-items: center;
justify-content: center;
background-color: #1a1244;
color: #ffffff;
border-radius: 8px;
padding: 0 14px;
font-size: 13px;
font-weight: 500;
text-align: center;
white-space: nowrap;
text-decoration: none;
opacity: 0;
pointer-events: none;
transition: opacity 0.45s ease, transform 0.45s ease;
z-index: 2;
}
/* Gizli haldeyken kutu kendi kenarından (sol/sağ) hafifçe İÇERİDE durur — .is-visible
olunca kayarak (slide) asıl konumuna (translateX:0) oturur. */
.diagram-tag--left {
left: 2%;
transform: translateY(-50%) translateX(-14px);
}
.diagram-tag--right {
right: 2%;
transform: translateY(-50%) translateX(14px);
}
.diagram-tag:hover {
color: #1a1244;
background-color: #eec21a;
}
.diagram-tag-nolink {
cursor: default;
}
.diagram-tag.is-visible {
opacity: 1;
pointer-events: auto;
transform: translateY(-50%) translateX(0);
}
/* Bağlantı çizgisi: tasarim/video-01.png referansındaki gibi TAMAMEN YATAY — etiketin
kenarından (2%/98%), parçanın üzerindeki gerçek noktaya (tag.XPercent) kadar uzanır.
Genişlik/konum sunucu tarafında (Index.cshtml) hesaplanıp CSS custom property olarak
geçilir (--connector-left, --connector-width, --connector-y). Kutunun ALTINDA durur
(z-index düşük) — kutu zaten kenara yaslı olduğundan çizginin başlangıcını doğal olarak
örter. Etiketle AYNI ANDA (main.js'in atadığı aynı transition-delay ile) fade-in olur —
video oynarken/bitene kadar TAMAMEN GİZLİ. */
.diagram-tag-connector {
position: absolute;
left: var(--connector-left);
top: var(--connector-y);
width: var(--connector-width);
height: 2px;
background-color: #eec21a;
transform: translateY(-50%);
opacity: 0;
transition: opacity 0.45s ease;
z-index: 1;
}
.diagram-tag-connector.is-visible {
opacity: 1;
}
.diagram-tag-connector::after {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 7px;
height: 7px;
border-radius: 50%;
background-color: #eec21a;
}
/* Nokta, çizginin PARÇAYA değen ucunda durmalı: sol yaslı etiketlerde çizgi
kenar(2%)→parça yönünde aktığından nokta SAĞ ucunda; sağ yaslı etiketlerde
çizgi parça→kenar(98%) yönünde aktığından nokta SOL ucunda. */
.diagram-tag-connector--left::after {
right: -3px;
}
.diagram-tag-connector--right::after {
left: -3px;
}
.product-card-img {
height: 135px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 18px;
}
.product-card-img img {
max-height: 100%;
max-width: 100%;
width: auto;
}
/* Ürün görseli + başlığını saran link: mevcut görünümü bozmadan tıklanabilir yapar */
.product-card-link {
display: block;
color: inherit;
text-decoration: none;
}
/* ==========================================================================
MULTI-ITEM CAROUSEL (Marka Logoları Slider'ı)
Bootstrap'in Carousel bileşeni üzerine kurulu; her carousel-item içinde
main.js tarafından ekran genişliğine göre birden fazla .carousel-item-col
oluşturulur (bkz. assets/js/main.js).
.carousel-item-col aynı zamanda .value-card ile boyut/padding/köşe
yuvarlaklığı paylaşıyor (aşağıdaki ortak kural) — Değerlerimiz artık
carousel değil ama kart görünümü aynı kalsın diye stil hâlâ ortak.
========================================================================== */
.carousel-item-row {
display: flex;
align-items: flex-start;
gap: 24px;
padding: 20px 0 28px;
}
.carousel-item-col {
flex: 0 1 260px;
max-width: 260px;
min-width: 0;
}
/* Kartların/kutucukların toplam genişliği, üstteki ok navigasyonunun sağ
kenarına kadar uzanmalı - bu yüzden mevcut genişliği eşit paylaşarak
BÜYÜRLER (satırı doldururlar). */
.brands-carousel .carousel-item-col {
flex: 1 1 0%;
max-width: none;
}
/* Ürün Grubu kartı + Değerlerimiz kutusu: aynı sabit boyut, padding,
köşe yuvarlaklığı. Bu sayede her iki carousel'deki kartlar piksel
bazında birebir aynı görünür. */
.product-card,
.value-card {
background-color: var(--bg-light-gray);
border-radius: var(--radius-md);
padding: 30px 30px 30px;
height: 250px;
transition: transform 0.2s ease;
}
/* Ürün Grubu kartına özel: üst/alt padding eşit, içerik ortalanmış.
Kart sabit yükseklikte (280px) ama içerik (görsel+başlık+metin) bunu
doldurmayabilir; display:flex + justify-content:center ile içerik
dikeyde ortalanır, böylece üst ve alt boşluk GÖRSEL olarak da eşit
kalır (sadece CSS padding değerleri eşit olması yetmez). */
.product-card {
padding-bottom: 26px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}
/* Değerlerimiz kutusuna özel: başlık/metin sola yaslı kalır (text-align
değişmez), ama kutunun yüksekliğine göre dikeyde ortalanır. Üst/alt
boşluğun GÖRSEL olarak da eşit olması için (bkz. .product-card'daki
aynı mantık) padding-bottom, padding-top ile eşitlenir. */
.value-card {
padding-bottom: 26px;
display: flex;
flex-direction: column;
justify-content: center;
/* .value-card--active'e geçişi (arka plan + gölge, bkz. aşağıdaki kural)
yumuşatır — hem class EKLENİRKEN hem KALDIRILIRKEN aynı geçiş
uygulansın diye burada, :hover/--active seçicisinde DEĞİL temel
kuralda tanımlı. Üstteki paylaşılan ".product-card, .value-card"
kuralındaki "transform 0.2s ease" (Ürün Grubu kartının KENDİ ayrı
hover'ı için, bkz. .urunler-product-grid .product-card:hover) burada
da korunuyor ki iki carousel'in davranışı birbirini etkilemesin. */
transition: transform 0.2s ease, background-color 0.28s ease-in-out, box-shadow 0.28s ease-in-out;
}
/* Gemi görseli iki satırın arasına daha FAZLA binsin diye (kullanıcı isteği)
metin, gemiyle çakışan kenardan UZAKLAŞTIRILIYOR: üst satırda kutunun
ÜST kısmına, alt satırda kutunun ALT kısmına itiliyor — böylece ortadaki
(gemiye yakın) boş alan büyüyor, gemi daha fazla binse bile başlık/metne
değmiyor. Sadece Değerlerimiz bölümüne özel, .product-card'ı etkilemez.
ÖNEMLİ: ikisi de justify-content:flex-start kullanıyor (flex-end DEĞİL) —
flex-end kullanılınca aynı satırdaki kartlar arasında metin uzunluğu
farklı olduğunda (örn. "Satış Sonrası Destek" vs "Rekabetçi Fiyat")
başlık Y konumu içerik yüksekliğine göre KAYIYOR, satır içi hizası
bozuluyordu (kullanıcı fark etti). flex-start + sabit padding-top ile
başlık konumu HER ZAMAN padding-top'a eşit, içerik uzunluğundan
bağımsız — satır içi hizalama garantili. */
.values-grid-row:first-child .value-card {
justify-content: flex-start;
}
.values-grid-row:last-child .value-card {
justify-content: flex-start;
padding-top: 95px;
}
.product-card-title,
.value-card-title {
font-size: 16px;
font-weight: 500;
margin-bottom: 8px;
}
.product-card-title {
color: #1a1244;
}
.product-card-text,
.value-card-text {
font-size: 13px;
line-height: 1.6;
color: var(--text-gray);
}
/* .value-card--active olunca beyaza dönen başlık/metin rengi — sadece
Değerlerimiz kartlarına scope'lu (Ürün Grubu kartının başlık/metin
rengi hiç değişmediğinden .product-card-title/-text'e dokunulmadı). */
.value-card-title,
.value-card-text {
transition: color 0.28s ease-in-out;
}
/* ==========================================================================
GLOBALDE DEĞERLERİMİZ
Artık carousel değil — 8 sabit kutu, iki satır (4+4), aralarında
our-values.png (gemi) görseli. .value-card temel boyutu/padding'i
Ürün Grubu kartıyla paylaşılan ortak kuralda tanımlı (bkz. MULTI-ITEM
CAROUSEL bölümü) — sadece burada carousel sarmalayıcısı yerine düz
bir grid içinde kullanılıyor.
========================================================================== */
.values-section {
background-color: #ffffff;
/* Üst padding 90px'ten 30px'e indirildi — sayfadaki diğer section
geçişleriyle (bkz. .product-range-section, .contact-form-section:
hepsi "30px 0 90px" desenini kullanıyor) tutarlı olsun diye;
90px 0 kullanınca bir önceki section'ın kendi 90px alt padding'iyle
toplanıp (180px) sayfadaki en büyük/orantısız section arası boşluğu
oluşturuyordu (kullanıcı fark etti). */
padding: 30px 0 90px;
}
.values-heading {
max-width: 640px;
margin: 0 auto;
}
.values-grid {
margin-top: 46px;
}
.values-grid-row {
display: flex;
gap: 24px;
}
.values-grid-row .value-card {
flex: 1 1 0%;
height: auto;
/* 190px yeterliyken, alt satırın padding-top:95px'i (gemiye yer açmak
için, bkz. aşağısı) içerikle birlikte ~211px'e ihtiyaç duyuyordu —
üst satır 190px'te sabit kalıp alt satırdan KISA görünüyordu
(kullanıcı fark etti). 212px, tarayıcıda ölçülen alt satır gerçek
yüksekliğine (210.6px) küçük bir payla göre ayarlandı; artık HER
İKİ satır da aynı 212px'te, üst satırda kalan fazladan boşluk
geminin daha rahat binmesine de yarıyor. */
min-height: 212px;
}
/* tasarim/gemi.png: 4 kutudan Premium Kalite, Güvenilir Çözümler, Tek
Noktadan Tedarik, Rekabetçi Fiyat sarı (#eec21a) — diğer 4'ü (Global Ağ,
Zamanında Teslimat, Güçlü İş Ortaklıkları, Satış Sonrası Destek) zaten
paylaşılan ".product-card, .value-card" kuralındaki var(--bg-light-gray)
(#f1f2f2) varsayılanını koruyor, üzerine yazmaya gerek yok. */
.value-card--accent {
background-color: #eec21a;
}
/* ÖNCEKİ (YANLIŞ) YÖNTEM: container'a sabit height:142px + overflow:hidden
+ img'e object-fit:cover veriliyordu. Container'ın en-boy oranı
(1185/142 ≈ 8.35:1) görselin GERÇEK piksel oranından (our-values.png
2032x506 ≈ 4.02:1) çok daha "yassı/geniş" olduğundan, cover görseli
GENİŞLİĞE göre ölçekleyip (1185px) yüksekliği FAZLA gelen kısmı
(≈295px hesaplanan yükseklik - 142px container = ≈153px, üstten ve
alttan yaklaşık yarı yarıya) KIRPIYORDU — tam olarak edit7.png'de
görülen, geminin tekne altının/üst yapının kesilmesi sorunu buydu.
DOĞRU YÖNTEM: kırpma YOK — width sabitlenir, height'i img'in KENDİ
piksel oranına göre (aspect-ratio ile) OTOMATİK hesaplanır. Böylece
görsel her zaman TAMAMEN (tekne altı dahil) görünür, sadece genel
boyutu değişir. width:950px → height otomatik ≈236px (950 / (2032/506))
— img satırın ortasında, KIRPILMADAN render ediliyor (mobilde
max-width:100% + aspect-ratio ile viewport'a göre orantılı küçülüyor,
yine kırpılmadan — bkz. responsive.css). */
.values-ship-image {
position: relative;
z-index: 2;
/* Üst/alt binme miktarı ASİMETRİK, kullanıcı isteğiyle gemi YUKARI
kaydırıldı: üst satıra daha FAZLA binsin (-105px), alt satırdaki
başlıklarla arasında daha FAZLA boşluk kalsın (-50px) — kartlar
eşit yüksekliğe (212px) çıkarıldıktan SONRA tarayıcıda tekrar
ölçülerek doğrulandı: üst satırda metnin altında ~8px, alt satırda
başlığın üstünde ~45px boşluk kalıyor, hiçbir başlık/metni
örtmüyor. */
margin-top: -105px;
margin-bottom: -50px;
pointer-events: none;
}
.values-ship-image img {
display: block;
width: 950px;
max-width: 100%;
aspect-ratio: 2032 / 506;
height: auto;
margin: 0 auto;
}
/* ==========================================================================
GÜÇLÜ MARKALAR
tasarim/edit8.png: başlık BEYAZ zeminde, ayrı; lacivert carousel paneli
(üst köşeleri yuvarlak) bunun ALTINDA — eskiden tüm section (başlık
dahil) lacivert arkaplan taşıyordu, artık sadece panel taşıyor.
Panel'in KENDİSİ (lacivert arkaplan + yuvarlak köşeler) TAM SAYFA
GENİŞLİĞİNDE (container'a sığdırılmış DEĞİL) — sadece İÇİNDEKİ
carousel/ok satırı (.brands-carousel-wrap) container genişliğine
sınırlı, böylece oklar da container'ın sol/sağ kenarında duruyor. */
.brands-section {
background-color: #ffffff;
padding: 60px 0 90px;
}
.brands-heading {
text-align: center;
margin-bottom: 34px;
}
.brands-heading .section-eyebrow {
color: var(--text-gray);
}
.brands-panel {
background-color: #1a1244;
/* Üst köşeler yuvarlak, alt köşeler düz — tasarim/edit8.png referansı. */
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
padding: 40px 0;
}
.brands-carousel-wrap {
display: flex;
align-items: center;
gap: 8px;
}
.brands-carousel-container {
flex: 1 1 auto;
min-width: 0;
}
.brands-carousel-arrow {
flex-shrink: 0;
/* Yuvarlak çerçeve (border-radius/border/background) KALDIRILDI —
tasarim/edit8.png'de oklar çerçevesiz, sade ikon olarak duruyor. */
width: 24px;
height: 24px;
border: none;
background: none;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.2s ease;
}
.brands-carousel-arrow:hover {
opacity: 0.65;
}
.brands-carousel-arrow img {
width: 14px;
height: 14px;
/* chevron-blue.svg mavi çiziliydi, koyu lacivert şerit üzerinde
beyaza çevrilir. */
filter: brightness(0) invert(1);
}
.brands-carousel-arrow-prev img {
transform: scaleX(-1);
}
.brand-card {
background-color: #ffffff;
border-radius: var(--radius-sm);
height: 90px;
display: flex;
align-items: center;
justify-content: center;
padding: 12px;
}
.brand-card a,
.brand-card img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
/* ==========================================================================
SÜREKLİLİK VE İSTİKRAR
tasarim/edit10.png: İÇERİK YATAY (sol metin + sağ görsel) DEĞİL, DİKEY
TEK SÜTUN — başlık/metin üstte ortalanmış, kamyon görseli altında TAM
GENİŞLİKTE, buton en altta ortalanmış. Eskiden .row/.col-lg-5/.col-lg-7
ile yan yana kuruluyordu (bkz. tasarim/edit9.png, YANLIŞ sonuç).
========================================================================== */
.continuity-section {
background-color: #ffffff;
padding: 90px 0;
/* Köşe süslemeleri (::before/::after) için konumlanma bağlamı. */
position: relative;
overflow: hidden;
}
/* tasarim/edit10.png: sağ üst ve sol alt köşelerde sarı (#eec21a) "L"
şeklinde köşe süslemeleri — iki kenarlı border ile oluşturuluyor,
section'ın kendi kenarlarına göre (container padding'ine göre DEĞİL)
konumlanıyor. Kalınlık tasarim/edit11.png'de canvas ile piksel piksel
ölçüldü: 33x33px'lik "L" kutusunda kenar kalınlığı 10px (~%30 oran) —
bizim 36px'lik kutumuza aynı oranla uygulanınca ~11px çıkıyor
(eskiden 3px'ti, ÇOK İNCE kalıyordu). */
.continuity-section::before,
.continuity-section::after {
content: "";
position: absolute;
width: 36px;
height: 36px;
pointer-events: none;
}
.continuity-section::before {
top: 28px;
right: 28px;
border-top: 11px solid #eec21a;
border-right: 11px solid #eec21a;
}
.continuity-section::after {
bottom: 28px;
left: 28px;
border-bottom: 11px solid #eec21a;
border-left: 11px solid #eec21a;
}
.continuity-heading {
max-width: 640px;
margin: 0 auto;
}
/* Paylaşılan .section-text'in temel max-width:300px'i zaten doğru
genişlik — paragraf kasıtlı olarak .continuity-heading'in 640px'lik
genişliğinden DAHA DAR (300px) tutulup ORTALANIYOR (block eleman
olduğundan text-align:center yetmez, kendi margin:auto'su gerekiyor). */
.continuity-heading .section-text {
max-width: 300px;
margin-left: auto;
margin-right: auto;
}
/* Paylaşılan .section-title varsayılanı (font-weight:400, body'den miras
#17181a) burada YETERSİZ — tasarim/edit10.png'de başlık kalın ve
lacivert (#1a1244). Sadece bu bileşene özel override. */
.continuity-heading .section-title {
color: #1a1244;
font-weight: 500;
}
.continuity-truck-image {
margin: 40px 0;
}
.continuity-truck-image img {
width: 100%;
height: auto;
/* border-radius KALDIRILDI — tasarim/edit10.png'de görsel bir "kart"
içinde değil, sayfanın beyaz zeminine doğrudan (kenarsız) oturuyor. */
display: block;
}
/* .world-network-btn ("Hakkımızda") ile BİREBİR AYNI render yüksekliği
için aynı padding/font-size override'ı kullanılıyor — ikisi de aynı
paylaşılan .btn-outline-catalog temelinden geliyor, tarayıcıda
ölçülerek doğrulandı (bkz. Index.cshtml). */
.continuity-btn {
padding: 8px 30px;
font-size: 13px;
}
/* ==========================================================================
BİNLERCE ÜRÜN TEK KAYNAK (FORM)
========================================================================== */
.contact-form-section {
background-color: #f1f2f2;
/* Üst/alt padding EŞİT — tasarim/edit13.png'de üst boşluğun (eskiden
30px) alt boşluğa (90px) göre belirgin dar kaldığı işaretlendi. */
padding: 90px 0;
}
.custom-input {
background-color: #ffffff;
border: 1px solid transparent;
border-radius: 10px;
padding: 14px 18px;
font-family: "Outfit", sans-serif;
font-size: 14px;
color: var(--text-dark);
width: 100%;
}
.custom-input::placeholder {
color: var(--text-gray);
}
.custom-input:focus {
outline: none;
border-color: var(--color-blue);
box-shadow: none;
background-color: #ffffff;
}
/* İletişim (Kariyer formu) — SADECE bu sayfadaki inputlar gri, paylaşılan
.custom-input'un (Anasayfa alt form, Tedarikçi Ol) varsayılan beyazına
dokunulmadı. */
#kariyer .custom-input {
background-color: #f1f2f2;
}
#kariyer .custom-input:focus {
background-color: #f1f2f2;
}
/* Kariyer formundaki "Departmanlar" dropdown'u — diğer .custom-input
alanlarıyla aynı görünümü korur, sadece tarayıcının varsayılan ok
ikonu yerine sitedeki chevron-down.svg kullanılır. */
select.custom-input {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("../img/icons/chevron-down.svg");
background-repeat: no-repeat;
background-position: right 18px center;
background-size: 12px;
padding-right: 40px;
cursor: pointer;
}
/* Seçilmemiş durumda ("Departmanlar" placeholder-benzeri option) diğer
input'ların ::placeholder rengiyle tutarlı görünsün. */
select.custom-input:invalid,
select.custom-input option[value=""] {
color: var(--text-gray);
}
.custom-textarea {
resize: none;
height: 127.5px;
}
/* "Araç Listesi" dropdown'u (Binlerce Ürün Tek Kaynak formu) — aynı
satırdaki Mesaj textarea'sıyla (.custom-textarea, height:127.5px) AYNI
yükseklikte olsun diye — sadece BU dropdown'a özel (id ile scope'lu),
paylaşılan select.custom-input'un KENDİSİ (Kariyer formundaki
"Departmanlar" dropdown'u da kullanıyor) değiştirilmedi. */
#arac-listesi {
height: 127.5px;
}
/* Sol kolon (eyebrow+başlık+metin+buton), sağdaki form grid'iyle AYNI
satırda (.row) olduğundan Bootstrap'in varsayılan davranışıyla (flex
align-items:stretch) zaten sağ kolonla AYNI yükseklikte — tasarim/
edit13.png: butonun ALT KENARI, sağdaki Mesaj kutusunun ALT KENARIYLA
hizalı olmalı. Kolonun kendisi flex-column yapılıp butona
margin-top:auto verilerek buton, kolonun (=satırın=sağ formun) TAM
altına itiliyor — tarayıcıda ölçülerek doğrulandı (bkz. görev özeti). */
.bottom-form-left-col {
display: flex;
flex-direction: column;
align-items: flex-start;
}
/* "Katalog Hesabı Oluştur" — .world-network-btn/.continuity-btn ile AYNI
teknik: paylaşılan .btn-cta-yellow tabanı üstüne, "Hakkımızda" butonuyla
birebir aynı render yüksekliğini (37.5px) veren padding/font-size
override'ı. margin-right/margin-bottom (.btn-cta-yellow'un flex-wrap
bağlamları içindi) burada tek başına durduğundan sıfırlandı; margin-top
artık sabit 22px DEĞİL, "auto" — butonu kolonun (üsttekiyle aynı
yükseklikteki) en altına iter. */
.bottom-form-catalog-btn {
margin-top: auto;
margin-right: 0;
margin-bottom: 0;
padding: 8px 30px;
font-size: 13px;
}
/* "Başvur" butonu: eskiden col-12 .message-row içinde kare (.btn-send,
127.5x127.5px, mavi) bir butondu; artık Mesaj/Araç Listesi ile AYNI
satırda üçüncü bir col-md-4 hücresi — satırdaki diğer alanlarla
(Mesaj textarea'sı .custom-textarea{height:127.5px}) aynı yükseklikte,
hücreyi TAM dolduracak şekilde genişletildi, rengi sarıya (.btn-cta-yellow)
çevrildi (paylaşılan mavi .btn-send'in KENDİSİ Kariyer/Tedarikçi
formlarında hâlâ kullanıldığından değiştirilmedi, bkz.
Iletisim.cshtml/TedarikcimizOl.cshtml). */
.bottom-form-submit-btn {
width: 100%;
height: 127.5px;
margin-right: 0;
margin-bottom: 0;
}
/* İletişim — tasarim/_İletişim_.png: SADECE Kariyer formundaki (#kariyer)
"Başvur" butonu sarı — paylaşılan .btn-send (Tedarikçi Ol formunda da
kullanılıyor, bkz. yukarıdaki yorum) mavi kalmaya devam ediyor. */
#kariyer .btn-send {
background-color: #eec21a;
color: #1a1244;
}
#kariyer .btn-send:hover {
background-color: #d6ad0f;
color: #1a1244;
}
.message-row {
gap: 0;
}
.message-row .custom-input {
flex-grow: 1;
}
/* ==========================================================================
WHATSAPP DESTEK (SABİT YAN SEKME)
========================================================================== */
.whatsapp-tab {
position: fixed;
top: 52%;
right: 0;
transform: translateY(-50%) rotate(-90deg);
transform-origin: right bottom;
background-color: #f1f2f2;
color: #1a1244;
border: 1px solid rgba(26,18,68,0.15);
border-bottom: none;
display: flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
border-radius: 8px 8px 0 0;
font-size: 13px;
font-weight: 500;
z-index: 1020;
transition: background-color 0.2s ease, color 0.2s ease;
}
.whatsapp-tab:hover {
background-color: #eec21a;
color: #1a1244;
}
.whatsapp-tab img {
width: 25px;
height: 25px;
transform: rotate(90deg);
/* whatsapp.svg beyaz dolgulu (fill="#ffffff"); açık zeminde görünür
olması için siyaha çevrilir. */
filter: brightness(0);
}
/* ==========================================================================
FOOTER
========================================================================== */
/* footer.png referansındaki yuvarlak üst köşelerde, body'nin global
arkaplanı (--bg-local-power, hero bölümünün köşeleri için ayarlanmıştı)
gri olarak açığa çıkıyordu. .footer-backdrop, footer ile birebir aynı
kutu boyutunda beyaz bir zemin sağlayarak sadece bu köşe boşluğunu
beyaza çeviriyor (body arkaplanını global olarak değiştirmeden). */
.footer-backdrop {
background-color: #ffffff;
}
/* Anasayfada (body.page-index) footer'dan hemen önceki son section artık
beyaz DEĞİL, gri (.contact-form-section, #f1f2f2) — bu yüzden SADECE bu
sayfada .footer-backdrop'un köşe dolgu rengi de aynı griye çevriliyor
(diğer TÜM sayfalarda üstteki beyaz varsayılan aynen korunuyor, çünkü
onlarda footer'dan önceki son section hâlâ beyaz). */
body.page-index .footer-backdrop {
background-color: #f1f2f2;
}
.site-footer {
background-color: #1a1244;
padding: 130px 0 30px;
/* tasarim/footer.png referansında üst köşeler yuvarlak (piksel
ölçümünde radius ~32px), alt köşeler sayfanın en altında olduğu
için düz bırakıldı. */
border-radius: 32px 32px 0 0;
}
.footer-nav ul {
list-style: none;
margin: 0;
padding: 0;
gap: 12px;
}
.footer-nav a {
color: #ffffff;
font-size: 14px;
font-weight: 500;
}
.footer-nav a:hover {
color: #eec21a;
}
.footer-nav li:not(:last-child)::after {
content: "|";
display: inline-block;
margin-left: 12px;
color: rgba(255, 255, 255, 0.4);
}
/* Sol kolon (nav+ayraç+telif) ile AYNI toplam yükseklikte (bkz. Views/
Shared/_PublicLayout.cshtml yorumu, .row'un varsayılan align-items:
stretch'i) — flex-column + space-between ile ana logo ÜSTTE, sosyal
medya ikonları ALTTA (telif satırıyla aynı hizada) duruyor. */
.footer-right-col {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
}
.footer-logo {
display: flex;
justify-content: flex-end;
margin-left: auto;
}
.footer-logo img {
height: 25px;
width: auto;
}
/* "PAGERM Online Katalog" linkindeki "PAGERM" kelimesi yerine geçen
footer-logo.png — .mega-menu-tabs a.brand-tab ile AYNI teknik
(inline-flex + align-items:center dikey ortalar). */
.footer-nav a.footer-online-katalog-link {
display: inline-flex;
align-items: center;
gap: 6px;
color: #eec21a;
}
.footer-online-katalog-logo {
display: block;
height: 11px;
width: auto;
}
.footer-divider {
border: none;
margin: 34px 0 26px;
}
.footer-copyright {
color: #ffffff;
font-size: 13px;
display: flex;
align-items: center;
gap: 8px;
}
.footer-copyright-logo {
height: 11px;
width: auto;
display: inline-block;
}
.footer-social {
gap: 14px;
}
/* İkonlar dosya (img/mask) yerine inline