/* FILE: assets/css/style.css */
/* ==========================================================================
Saha Automotive - Anasayfa Özel Stilleri
NOT: Bu dosyada @media / responsive kod bulunmaz. Tüm responsive kurallar
assets/css/responsive.css içerisindedir.
========================================================================== */
/* -------------------- Yerel Font Tanımı (Outfit) -------------------- */
/* KÖK NEDEN (Türkçe "Ş"/"ş" farklı görünüyordu): outfit-XXX.woff2/.woff
dosyaları Google Fonts'un "latin" alt kümesiyle sınırlıydı (U+0000-00FF
+ birkaç ek karakter) — Ş (U+015E), ş (U+015F), Ğ, ğ, İ gibi Latin
Extended-A karakterlerinin glyph'leri bu dosyalarda YOKTU (fontTools/
fontkit ile doğrulandı: glyphId=0/.notdef). Karakter font dosyasında
bulunamayınca tarayıcı sessizce font-family listesindeki bir sonraki
fonta (Arial/Helvetica/sans-serif) düşüyor, bu yüzden sadece o harf
farklı görünüyordu.
ÇÖZÜM: Google Fonts'un (fontsource/@fontsource/outfit paketi üzerinden
indirilen, CDN'siz/yerel) "latin-ext" alt kümesi eklendi (bkz. aşağıdaki
ikinci blok, outfit-XXX-ext.woff2/.woff — Ş/ş/Ğ/ğ/İ dahil). unicode-range
ile iki blok birbirini TAMAMLAR: temel Latin karakterler ilk bloktaki
(latin) dosyadan, Ş/ş gibi Latin Extended-A karakterler ikinci bloktaki
(latin-ext) dosyadan çiziliyor — ikisi de aynı "Outfit" ailesi/ağırlığı
olduğundan görsel olarak kesintisiz tek bir font gibi davranıyor. Aralık
değerleri Google Fonts'un bu iki alt küme için ürettiği DEĞERLERLE
birebir aynıdır. */
@font-face {
font-family: "Outfit";
src: url("../fonts/outfit-300.woff2") format("woff2"),
url("../fonts/outfit-300.woff") format("woff");
font-weight: 300;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
font-family: "Outfit";
src: url("../fonts/outfit-300-ext.woff2") format("woff2"),
url("../fonts/outfit-300-ext.woff") format("woff");
font-weight: 300;
font-style: normal;
font-display: swap;
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
font-family: "Outfit";
src: url("../fonts/outfit-400.woff2") format("woff2"),
url("../fonts/outfit-400.woff") format("woff");
font-weight: 400;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
font-family: "Outfit";
src: url("../fonts/outfit-400-ext.woff2") format("woff2"),
url("../fonts/outfit-400-ext.woff") format("woff");
font-weight: 400;
font-style: normal;
font-display: swap;
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
font-family: "Outfit";
src: url("../fonts/outfit-500.woff2") format("woff2"),
url("../fonts/outfit-500.woff") format("woff");
font-weight: 500;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
font-family: "Outfit";
src: url("../fonts/outfit-500-ext.woff2") format("woff2"),
url("../fonts/outfit-500-ext.woff") format("woff");
font-weight: 500;
font-style: normal;
font-display: swap;
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
font-family: "Outfit";
src: url("../fonts/outfit-600.woff2") format("woff2"),
url("../fonts/outfit-600.woff") format("woff");
font-weight: 600;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
font-family: "Outfit";
src: url("../fonts/outfit-600-ext.woff2") format("woff2"),
url("../fonts/outfit-600-ext.woff") format("woff");
font-weight: 600;
font-style: normal;
font-display: swap;
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
font-family: "Outfit";
src: url("../fonts/outfit-700.woff2") format("woff2"),
url("../fonts/outfit-700.woff") format("woff");
font-weight: 700;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
font-family: "Outfit";
src: url("../fonts/outfit-700-ext.woff2") format("woff2"),
url("../fonts/outfit-700-ext.woff") format("woff");
font-weight: 700;
font-style: normal;
font-display: swap;
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
font-family: "Outfit";
src: url("../fonts/outfit-800.woff2") format("woff2"),
url("../fonts/outfit-800.woff") format("woff");
font-weight: 800;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
font-family: "Outfit";
src: url("../fonts/outfit-800-ext.woff2") format("woff2"),
url("../fonts/outfit-800-ext.woff") format("woff");
font-weight: 800;
font-style: normal;
font-display: swap;
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* -------------------- Renk Paleti / Değişkenler -------------------- */
:root {
--color-blue: #0057b8;
--color-blue-dark: #00458f;
--color-yellow: #edbf28;
--bg-local-power: #e2e0e0;
--bg-light-gray: #f1f2f2;
--bg-mid-gray: #a7a8ab;
--text-dark: #17181a;
--text-gray: #6c6f73;
/* .container'ın sağ/sol boşluğu — responsive.css bu değişkeni her
breakpoint'te günceller. Kenara kadar uzanan görseller (örn.
.local-power-image) bu değeri negatif margin olarak kullanır. */
--container-pad-x: 360px;
--radius-lg: 24px;
--radius-md: 16px;
--radius-sm: 10px;
}
/* -------------------- Genel / Reset -------------------- */
html {
scroll-behavior: smooth;
}
body {
font-family: "Outfit", Arial, Helvetica, sans-serif;
font-weight: 400;
color: var(--text-dark);
/* Hero bölümünün yuvarlatılmış alt köşelerinde açığa çıkan alanın
beyaz değil gri görünmesi için body arkaplanı --bg-local-power ile
aynı tona ayarlandı. Diğer bölümlerin kendi (beyaz/gri) arkaplanı
olduğundan bu değişiklik sadece o köşe boşluğunu etkiler. */
background-color: var(--bg-local-power);
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Outfit", Arial, Helvetica, sans-serif;
font-weight: 700;
margin: 0;
}
p {
margin: 0;
}
a {
text-decoration: none;
color: inherit;
}
body.no-scroll {
overflow: hidden;
}
.custom-input.is-invalid {
border-color: #e35353;
background-color: #fff5f5;
}
img {
max-width: 100%;
display: block;
}
/* -------------------- İçerik Sarmalayıcı (Container) Boşluğu --------------------
Geniş masaüstü ekranlarda ana içerik sağ/soldan 360px içeride başlar.
Bootstrap'in kademeli max-width sınırlaması (540/720/960/1140/1320px)
burada devre dışı bırakılıp (max-width: 100%) boşluk tamamen bu padding
değeriyle kontrol edilir. Küçük ekranlarda bu değer responsive.css
içerisindeki @media kurallarıyla kademeli olarak azaltılır. */
.container {
max-width: 100%;
padding-left: var(--container-pad-x);
padding-right: var(--container-pad-x);
}
.text-blue {
color: var(--color-blue);
}
.text-yellow {
color: var(--color-yellow);
}
.text-dark-strong {
color: var(--text-dark);
font-weight: 600;
}
.section-eyebrow {
font-size: 15px;
font-weight: 500;
color: var(--text-gray);
margin-bottom: 10px;
letter-spacing: 0.2px;
}
.section-title {
font-size: 34px;
line-height: 1.25;
font-weight: 400;
margin-bottom: 22px;
}
.section-text {
font-size: 15px;
line-height: 1.7;
color: var(--text-gray);
margin-bottom: 16px;
max-width: 300px;
}
/* -------------------- Ortak Buton Stilleri -------------------- */
.btn-primary-custom {
background-color: var(--color-blue);
color: #ffffff;
font-weight: 600;
font-size: 15px;
padding: 13px 28px;
border-radius: 8px;
border: none;
display: inline-block;
transition: background-color 0.2s ease;
}
.btn-primary-custom:hover {
background-color: var(--color-blue-dark);
color: #ffffff;
}
.btn-hero-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background-color: var(--color-blue);
color: #ffffff;
font-weight: 500;
font-size: 15px;
padding: 13px 26px;
border-radius: 8px;
margin-right: 14px;
margin-bottom: 10px;
transition: background-color 0.2s ease;
}
.btn-hero-primary:hover {
background-color: var(--color-blue-dark);
color: #ffffff;
}
.btn-hero-primary strong {
font-weight: 800;
}
.btn-pagerm-logo {
height: 14px;
width: auto;
}
/* Mobil hero arama kutusu (madde 1) — .btn-hero-primary ile AYNI
genişlik/yükseklik oranında olması için aynı dikey padding (13px) ve
aynı border-radius (8px) kullanılıyor; genişlik butonla aynı şekilde
%100 (bkz. responsive.css .btn-hero-primary{width:100%}). */
.hero-search-form {
position: relative;
width: 100%;
margin-top: 4px;
}
/* İkonu inputun DIŞINDA ayrı bir eleman olarak değil (bkz. .search-form,
mega menü aramasıyla paylaşılan temel yapı), inputun KENDİ border'ının
İÇİNDE göstermek için: buton mutlak konumlandırılıp inputun sol
kenarına bindiriliyor, inputun sol padding'i ikon genişliği kadar
artırılıyor. Sadece bu bileşene özgü (mega menü aramasını etkilemez). */
.hero-search-form .search-form-btn {
position: absolute;
left: 18px;
top: 50%;
transform: translateY(-50%);
z-index: 1;
}
.hero-search-form .search-form-btn img {
width: 20px;
height: 20px;
/* .search-form-btn img'nin temel kuralı (mega menü aramasındaki mavi
bant üzerinde görünür olması için) beyaza çeviren bir filtre taşıyor
(brightness(0) invert(1)) — search.svg'nin KENDİ çizgi rengi zaten
--color-blue (#0057b8) ile birebir aynı olduğundan, bu bileşende
filtre kaldırılınca ikon doğal/mavi haliyle görünür. */
filter: none;
}
.hero-search-form .search-form-input {
width: 100%;
flex: 1 1 auto;
padding: 13px 20px 13px 52px;
border-radius: 8px;
border-color: var(--color-blue);
}
.btn-browse-all {
display: block;
width: 100%;
text-align: center;
background-color: var(--bg-mid-gray);
color: #ffffff;
font-weight: 500;
font-size: 14px;
padding: 14px 20px;
border-radius: 10px;
/* .carousel-item-row'un kendi padding-bottom'u (28px - Değerlerimiz'in
aktif kart gölgesine yer açmak için, bkz. .carousel-item-row) kartın
görünür alt kenarı ile bu satırın ölçülen alt kenarı arasına görünmez
bir boşluk ekliyor. Gerçek görünen boşluğun (kart görünür alt kenarı
-> buton üst kenarı) 24px olması için bu 28px'i telafi edecek negatif
bir margin gerekiyor: 24 - 28 = -4px. */
margin-top: -4px;
transition: background-color 0.2s ease;
}
.btn-browse-all:hover {
background-color: #8f9093;
color: #ffffff;
}
.btn-pagerm-catalog {
background-color: #ffffff;
color: var(--color-blue);
font-weight: 600;
font-size: 13px;
padding: 10px 18px;
border-radius: 8px;
white-space: nowrap;
transition: background-color 0.2s ease;
}
.btn-pagerm-catalog:hover {
background-color: var(--color-blue-dark);
color: #ffffff;
}
.btn-outline-catalog {
display: inline-block;
background-color: var(--bg-mid-gray);
color: #ffffff;
font-weight: 500;
font-size: 14px;
padding: 13px 24px;
border-radius: 8px;
margin-top: 6px;
transition: background-color 0.2s ease;
}
.btn-outline-catalog:hover {
background-color: #8f9093;
color: #ffffff;
}
.btn-send {
display: flex;
align-items: center;
justify-content: center;
width: 127.5px;
height: 127.5px;
background-color: var(--color-blue);
color: #ffffff;
font-weight: 400;
font-size: 13px;
padding: 0;
border: none;
border-radius: 10px;
margin-left: 12px;
flex-shrink: 0;
transition: background-color 0.2s ease;
}
.btn-send:hover {
background-color: var(--color-blue-dark);
color: #ffffff;
}
.badge-pill {
display: block;
text-align: center;
background-color: var(--color-blue);
color: #ffffff;
font-weight: 500;
font-size: 14px;
padding: 18px 18px;
border-radius: 12px;
transition: background-color 0.2s ease;
}
.badge-pill:hover {
background-color: var(--color-blue-dark);
color: #ffffff;
}
/* ==========================================================================
HEADER / NAVİGASYON
========================================================================== */
.site-header {
background-color: #000000;
z-index: 1040;
}
/* Mega menü açıkken .site-header'ın GÖRÜNÜR alanları (üst satır ve gri
panel) zaten kendi opak arkaplanlarını taşıyan .site-header > .container
ve .mega-menu tarafından kaplanıyor (aşağıda). .site-header'ın KENDİ
arkaplanı sadece bunların KAPLAMADIĞI kalan alanlarda görünür — en
belirgini .mega-menu-search'ün yuvarlatılmış alt köşe boşluğu. Burada
gri bırakılırsa (site-header'ı boyayıp backdrop onu karartsa bile)
köşe, ARKASINDAKİ GERÇEK SAYFAYI değil "karartılmış boş gri"yi
gösterir ve sayfanın geri kalanındaki karartılmış GERÇEK içerikle
uyuşmayan bir gri leke gibi görünür. Şeffaf bırakmak, o köşede de
backdrop'un doğrudan gerçek body/sayfa rengini karartmasını sağlar. */
body.no-scroll .site-header {
background-color: transparent;
}
/* Üst satırı saran .container (hamburger/EN solda, logo sağda — .header-row
bunun içinde). .mega-menu-backdrop (z-index:1030, position:fixed, inset:0)
.site-header içindeki (z-index:1040) diğer her şeyin üstünde boyanıyor,
çünkü bu kapsayıcının kendi z-index'i yoktu (auto/0) VE arkaplanı
şeffaftı — bu yüzden hem tıklamalar backdrop'a gidiyordu hem de (üst
satır griye çevrilince) backdrop'un koyu tonu görsel olarak altından
sızıyordu. .header-row'a değil, onu saran BU .container'a (padding
alanı dahil TÜM üst satır genişliğine) uygulanmalı; aksi halde sadece
.header-row'un kendi kutusu kapanır, kenar boşlukları (--container-pad-x)
dimlenmiş halde kalır. Çözüm: backdrop'un üstüne çıkar VE (menü
açıkken) kendi opak gri arkaplanını alır. */
.site-header > .container {
position: relative;
z-index: 1032;
}
body.no-scroll .site-header > .container {
background-color: var(--bg-mid-gray);
}
.header-row {
/* Önceden 50px/26px (asimetrik) idi — d-flex align-items-center içeriği
kendi satırında ortalasa da, üstteki fazladan 24px, hamburger/EN/logo'yu
bandın tam dikey merkezine göre aşağıda gösteriyordu. Toplam yükseklik
(76px) aynı kalacak şekilde eşit paylaştırıldı (38/38). */
padding-top: 38px;
padding-bottom: 38px;
}
.header-left {
gap: 18px;
}
.hamburger-btn {
background: none;
border: none;
padding: 6px 4px;
display: flex;
flex-direction: column;
gap: 5px;
cursor: pointer;
}
.hamburger-btn--mobile {
display: none;
}
.hamburger-line {
display: block;
width: 26px;
height: 2px;
background-color: #ffffff;
border-radius: 2px;
transition: transform 0.2s ease, opacity 0.2s ease, width 0.2s ease;
}
/* 1. ve 3. çizgi (üst/alt) 2 katı uzunlukta; 2. (orta) çizgi aynı kalır */
.hamburger-line:nth-child(1),
.hamburger-line:nth-child(3) {
width: 52px;
}
.hamburger-btn[aria-expanded="true"] .hamburger-line:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.hamburger-btn[aria-expanded="true"] .hamburger-line:nth-child(2) {
opacity: 0;
}
.hamburger-btn[aria-expanded="true"] .hamburger-line:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
.lang-btn {
background: none;
border: none;
color: #ffffff;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.5px;
padding: 4px 8px;
}
.lang-btn::after {
display: none;
}
.lang-menu {
background-color: #ffffff;
border-radius: 8px;
border: none;
padding: 6px;
min-width: 90px;
box-shadow: 0 10px 30px rgba(0,0,0,0.18);
}
.lang-menu .dropdown-item {
font-size: 14px;
border-radius: 6px;
padding: 6px 10px;
}
.lang-menu .dropdown-item.active,
.lang-menu .dropdown-item:hover {
background-color: var(--bg-light-gray);
color: var(--color-blue);
}
.header-logo img {
height: 45px;
width: auto;
}
/* -------------------- Mega Menü (Hamburger Dropdown) -------------------- */
.mega-menu {
/* tasarim/acilir-hamburger-menu.png referansında panel arkaplanı
orta gri (piksel ölçümü #a7a8ab = --bg-mid-gray) */
background-color: var(--bg-mid-gray);
/* KÖK NEDEN DÜZELTMESİ: .mega-menu-backdrop position:fixed + z-index:1030
ile tüm viewport'u kaplıyordu. .mega-menu'nün position/z-index'i
olmadığı (static/auto) için backdrop, normal akıştaki menü
içeriğinin HER ZAMAN üstünde boyanıyor ve document.elementFromPoint
ile doğrulandığı üzere linklere giden tüm tıklamaları yutuyordu.
Menüyü backdrop'un (z-index:1030) üstüne çıkarmak sorunu çözer. */
position: relative;
z-index: 1031;
/* Alt köşeler yuvarlak + taşan çocuklar (mavi arama bandı dahil) bu
köşeye göre kırpılır, böylece köşe boşluğunda menünün ARKASINDAKİ
(karartılmış sayfa) görünür — gri değil, transparan gibi davranır. */
border-bottom-left-radius: 28px;
border-bottom-right-radius: 28px;
overflow: hidden;
}
/* Bootstrap'in kendi .collapsing kuralı (bootstrap.min.css: height .35s ease)
süre olarak zaten uygun (350ms) ama easing'i simetrik değil — burada
ease-in-out'a çevirip backdrop/hero-section fade'leriyle (ikisi de aynı
0.35s ease-in-out) aynı "hissi" vermesi sağlanıyor. */
.mega-menu.collapsing {
transition: height 0.35s ease-in-out;
}
.mega-menu-tabs {
padding: 20px 0 0;
/* Link satırını (ve altındaki border'ı, bkz. .mega-menu-tabs ul)
kapsayıcının TAM ORTASINDA yatayda ortalar. */
display: flex;
justify-content: center;
}
.mega-menu-tabs ul {
list-style: none;
margin: 0;
padding: 0 0 14px;
display: flex;
flex-wrap: wrap;
gap: 34px;
/* Border artık .ul'nin (yani linklerin gerçek genişliğinin) kendi
kutusunda — flex item olarak içeriği kadar (fit-content) geniş
olduğundan, border da linklerle birebir aynı genişlikte ve
merkezde kalır. */
border-bottom: 1px solid rgba(255,255,255,0.4);
}
.mega-menu-tabs a {
font-size: 14px;
font-weight: 400;
color: rgba(255,255,255,0.85);
padding-bottom: 10px;
display: inline-block;
border-bottom: 2px solid transparent;
}
.mega-menu-tabs a.active {
color: var(--color-blue);
font-weight: 700;
}
.mega-menu-tabs a:hover {
color: var(--color-blue);
}
/* KÖK NEDEN: global "img { display:block }" resetinden dolayı, logo
inline değil BLOK eleman olarak davranıp metnin ÜSTÜNE düşüyordu (kendi
satırını alıyordu). ".brand-tab"ı inline-flex yapıp align-items:center
ile logoyu metnin SOLUNA, aynı satırda hizalıyoruz — li zaten
flex-wrap:wrap içinde fit-content genişlikte olduğundan taşma olmadan
büyür. */
.mega-menu-tabs a.brand-tab {
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.brand-tab-logo {
display: block;
height: 11px;
width: auto;
}
.mega-submenu {
/* display:none DEĞİL visibility:hidden: alt menü görünmez olsa bile
KENDİ YÜKSEKLİĞİ KADAR yer kaplamaya devam eder — böylece menünün
toplam yüksekliği hangi sekme hover/aktif olursa olsun SABİT kalır
(bkz. main.js showMegaSubmenuFor/hideAllMegaSubmenus). Menü açılır
açılmaz JS, Kurumsal'ın alt menüsünü varsayılan olarak görünür yapar
ve sol hizasını (marginLeft) sekme satırıyla eşitler. */
visibility: hidden;
padding-bottom: 48px;
padding-top: 20px;
}
.mega-submenu ul {
list-style: none;
margin: 0;
padding: 0;
}
.mega-submenu li {
/* Sadece sekme satırı ile alt menü arasında TEK bir ayraç
(.mega-menu-tabs'ın border-bottom'u) kalsın diye, satırlar
arası tekrarlayan border kaldırıldı. */
padding-bottom: 10px;
margin-bottom: 10px;
}
.mega-submenu a {
font-size: 13px;
color: rgba(255,255,255,0.85);
}
.mega-submenu a:hover {
color: #ffffff;
}
.mega-menu-search {
/* tasarim/acilir-hamburger-menu.png referansında bu bant tam genişlikte
ve site paletindeki mavi (--color-blue = #0057b8) */
background-color: var(--color-blue);
padding: 8px;
/* Alt köşe yuvarlaması artık üst kapsayıcı olan .mega-menu üzerinde
(border-radius + overflow:hidden) — bu bant onun son çocuğu olduğu
için otomatik olarak aynı köşeden kırpılıyor. */
}
.search-form {
display: flex;
align-items: center;
gap: 14px;
}
.search-form-btn {
background: none;
border: none;
display: flex;
padding: 0;
}
.search-form-btn img {
width: 36px;
height: 36px;
/* İkon dosyası mavi (#0057b8) çizili; mavi bant üzerinde görünür olması
için beyaza çeviriliyor. */
filter: brightness(0) invert(1);
}
.search-form-input {
/* Kutunun kendisi şeffaf/mavi, sadece ince beyaz çerçeve görünür
(tasarim/acilir-hamburger-menu.png referansı). */
background-color: transparent;
border: 1.5px solid rgba(255,255,255,0.85);
border-radius: 12px;
outline: none;
font-family: "Outfit", sans-serif;
font-size: 14px;
padding: 6px 20px;
width: 340px;
max-width: 100%;
color: #ffffff;
}
.search-form-input::placeholder {
color: rgba(255,255,255,0.8);
}
/* Sidebar arama kutusu (Views/Public/_ProductGroupSidebar.cshtml, Ürünler sayfası sol
sütun) — header/ana sayfadakiyle AYNI .mega-menu-search/.search-form/.search-form-input
class'larını kullanır (main.js JS'i ".js-product-search-form/.js-product-search-input"
üzerinden bağlandığından bu class'lar kaldırılamaz), ama o class'ların tasarlandığı geniş
mavi header bandı dar sidebar sütununda (230px) taşıyor ve okunaksız kalıyordu.
.sidebar-search-wrapper SADECE bu bağlamda yukarıdaki kuralları override eder — header'daki
ORİJİNAL mavi kutuya dokunmaz (o hâlâ sadece .mega-menu-search/.search-form-input'a göre render edilir). */
.sidebar-search-wrapper {
background-color: transparent;
padding: 0;
}
.sidebar-search-wrapper .search-form-wrap {
width: 100%;
}
.sidebar-search-wrapper .search-form-input {
width: 100%;
max-width: 100%;
box-sizing: border-box;
background-color: var(--bg-light-gray);
border: 1.5px solid #e5e5e5;
color: var(--text-dark);
/* İkon artık inputun İÇİNDE sol kenarda (bkz. .search-form-btn altındaki yorum) —
metin ikonun üzerine binmesin diye sol padding ikon genişliği kadar artırıldı. */
padding-left: 30px;
}
.sidebar-search-wrapper .search-form-input::placeholder {
color: var(--text-gray);
}
/* İkonu inputun DIŞINDA ayrı bir eleman olarak değil (hero-search-form'daki aynı teknik,
bkz. .hero-search-form .search-form-btn), inputun KENDİ border'ının İÇİNDE göstermek için:
buton mutlak konumlandırılıp inputun sol kenarına bindiriliyor. Konumlandırma bağlamı
.search-form-wrap'in position:relative'i (temel kural, bkz. yukarısı). */
.sidebar-search-wrapper .search-form-btn {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
z-index: 1;
}
.sidebar-search-wrapper .search-form-btn img {
/* Header'daki mavi bant üzerinde ikon beyaza çevriliyordu (bkz. .search-form-btn img) —
burada zemin açık olduğundan ikon kendi orijinal rengiyle (search.svg stroke="#0057b8") kalır. */
filter: none;
/* Dar sidebar sütununa (230px) uygun kompakt ikon boyutu — temel kuraldaki 36x36 burada taşardı. */
width: 14px;
height: 14px;
}
/* -------------------- Faz 8: Arama Autocomplete -------------------- */
.search-form-wrap {
position: relative;
}
.hero-search-form-wrap {
width: 100%;
}
/* KÖK NEDEN: mega menü açıkken bant, üst kapsayıcısı olan .mega-menu'nün
overflow:hidden'ı (alt köşe yuvarlama için, bkz. .mega-menu-search yorumu)
ile kırpılıyor — position:absolute + top:calc(100%+8px) ile bandın altına
taşan bu dropdown, üst atanın overflow:hidden'ı yüzünden HİÇ görünmüyordu.
Çözüm: position:fixed (viewport'a göre, overflow:hidden ata tarafından
kırpılmaz) — top/left/width main.js tarafından input'un
getBoundingClientRect()'ine göre satır içi (inline style) atanır. */
.search-suggestions {
display: none;
position: fixed;
max-height: 320px;
overflow-y: auto;
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 12px 32px rgba(0,0,0,0.18);
z-index: 1050;
}
.search-suggestions.is-open {
display: block;
}
.search-suggestion-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
color: var(--text-dark);
transition: background-color 0.15s ease;
}
.search-suggestion-item:hover {
background-color: var(--bg-light-gray);
}
/* Kutunun kendisi her zaman gri placeholder arkaplanı taşır (.product-card-img/
.category-product-card'daki görselsiz-placeholder deseniyle aynı mantık) —
resim varsa üstüne ![]()
eklenir, yoksa kutu boş/gri kalır. */
.search-suggestion-thumb {
width: 36px;
height: 36px;
border-radius: 6px;
background-color: var(--bg-light-gray);
flex-shrink: 0;
overflow: hidden;
}
.search-suggestion-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.search-suggestion-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.search-suggestion-name {
font-size: 13px;
line-height: 1.4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* OEM kodu — admin listesindeki ikincil/muted satır metniyle aynı ton
(bkz. .category-product-card-text: color:var(--text-gray)), sadece daha
küçük punto (bu satır bir alt-başlık, ana metin değil). */
.search-suggestion-oem {
font-size: 11px;
line-height: 1.3;
color: var(--text-gray);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.search-suggestion-empty {
padding: 14px;
font-size: 13px;
color: var(--text-gray);
text-align: center;
}
.header-address {
color: #ffffff;
font-size: 13px;
font-style: normal;
line-height: 1.6;
margin: 0;
text-align: right;
}
.mega-menu-backdrop {
position: fixed;
inset: 0;
background-color: rgba(0,0,0,0.55);
opacity: 0;
visibility: hidden;
/* Süre/easing .mega-menu.collapsing ve .hero-section'ın opacity geçişiyle
(ikisi de 0.35s ease-in-out) BİREBİR eşleşir — bkz. o kuralların yorumu.
"visibility" de transition listesinde: KAPANIRKEN (is-visible kaldırılınca)
visibility, opacity 0.35s'lik solmayı bitirene KADAR "visible" kalır (0s
süreli ama 0.35s GECİKMELİ) — aksi halde visibility anında "hidden" olup
fade-out animasyonunu görünmeden kesiyordu (sert kapanma hissi). AÇILIRKEN
ise .is-visible kuralındaki "visibility 0s linear 0s" gecikmesiz devreye
girer, element hemen "visible" olur ve opacity 0'dan 1'e yumuşak açılır. */
transition: opacity 0.35s ease-in-out, visibility 0s linear 0.35s;
z-index: 1030;
}
.mega-menu-backdrop.is-visible {
opacity: 1;
visibility: visible;
transition: opacity 0.35s ease-in-out, visibility 0s linear 0s;
}
/* -------------------- Mobil Off-canvas Menü -------------------- */
.mobile-menu {
background-color: var(--bg-mid-gray);
width: 320px;
}
.mobile-menu .offcanvas-header {
padding: 22px 24px;
border-bottom: 1px solid rgba(255,255,255,0.3);
}
.mobile-menu-logo img {
height: 30px;
width: auto;
}
.mobile-menu .offcanvas-body {
padding: 24px;
display: flex;
flex-direction: column;
}
.mobile-nav-list {
list-style: none;
margin: 0 0 auto;
padding: 0;
flex-grow: 1;
}
.mobile-nav-list li {
border-bottom: 1px solid rgba(255,255,255,0.3);
}
.mobile-nav-list a {
display: flex;
align-items: center;
justify-content: space-between;
color: #ffffff;
font-size: 15px;
font-weight: 500;
padding: 16px 2px;
}
/* Aktif sayfa vurgusu: main.js'te dinamik olarak (gerçek dosya adına
göre) eklenen "active" class'ı, masaüstü .mega-menu-tabs a.active ile
aynı renk mantığıyla (mavi) vurgular. */
.mobile-nav-list a.active {
color: var(--color-blue);
}
.mobile-nav-list a img {
width: 14px;
height: 14px;
opacity: 0.8;
}
/* "Kurumsal" satırı artık kurumsal.html'e gitmiyor; sadece alttaki
.mobile-nav-sublist'i (Yönetim Kurulu Mesajı / Hakkımızda / Vizyon /
Misyon / Kurumsal Kit) açıp kapatan bir Bootstrap collapse tetikleyicisi
— mobilde hover olmadığından masaüstündeki hover-alt-menü davranışının
yerini alıyor. Alt menüye asıl sayfalara gitmek isteyenler zaten
"- Hakkımızda" vb. üzerinden ulaşıyor. */
.mobile-nav-toggle .mobile-nav-chevron {
transition: transform 0.2s ease;
}
.mobile-nav-toggle:not(.collapsed) .mobile-nav-chevron {
transform: rotate(90deg);
}
.mobile-nav-sublist {
list-style: none;
margin: 0;
padding: 0 0 0 14px;
}
.mobile-nav-sublist li {
border-bottom: 1px solid rgba(255,255,255,0.3);
}
.mobile-nav-sublist a {
font-size: 13px;
color: #ffffff;
}
/* Mobil "PAGERM Online Katalog" — masaüstündeki .brand-tab ile aynı
mantık: logo metnin SOLUNDA, yan yana. Seçici bilerek ".mobile-nav-list
a img" (0,1,2) genel kuralını (14x14, opacity:0.8 — chevron ikonları
için tasarlanmış) EZECEK şekilde (0,3,2) yapıldı, aksi halde logo
14x14'e sıkışıp bozulurdu. */
.mobile-nav-list a.mobile-brand-tab img.mobile-brand-tab-logo {
display: block;
height: 13px;
width: auto;
opacity: 1;
}
/* Logo+"Online Katalog" birlikte tek grup olarak sarmalanır; ".mobile-nav-list a"
zaten justify-content:space-between olduğundan sarmalayıcı olmadan
logo/metin/chevron üçü eşit aralıklarla dağılır (logo ile metin arasında
istenmeyen geniş boşluk oluşur) — bu span logo+metni bir arada tutar,
space-between sadece bu grup ile trailing chevron arasında çalışır. */
.mobile-brand-tab-label {
display: inline-flex;
align-items: center;
gap: 6px;
}
/* KÖK NEDEN: son menü linki (İletişim, bkz. ".mobile-nav-list li" border-bottom)
ile bu footer bloğu arka arkaya İKİ çizgi oluşturuyordu (li'nin kendi
border-bottom'u + bu bloğun border-top'u) — üsttekini (li'ninkini)
koruyup buradaki alttaki çizgiyi kaldırdık. */
.mobile-menu-footer {
margin-top: 30px;
padding-top: 20px;
}
.mobile-menu-address {
color: rgba(255,255,255,0.85);
font-size: 13px;
line-height: 1.6;
margin-bottom: 18px;
}
.mobile-menu-social {
display: flex;
gap: 12px;
}
.mobile-menu-social a {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
}
.mobile-menu-social img {
width: 30px;
height: 30px;
}
/* whatsapp.svg dosyası içinde SABİT YAN SEKME'deki (.whatsapp-tab, 90°
döndürülmüş) görünüm için yatay aynalanmış (matrix flip) - burada
döndürme UYGULANMADIĞI için ikon ters/yanlış görünüyordu; footer'daki
(aynalanmamış) ikonla aynı yönde görünmesi için aynalama iptal ediliyor. */
.mobile-menu-social a[aria-label="Whatsapp"] img {
transform: scaleX(-1);
}
/* ==========================================================================
HERO BÖLÜMÜ
========================================================================== */
.hero-section {
background-color: #000000;
padding: 90px 0 130px;
border-bottom-left-radius: 32px;
border-bottom-right-radius: 32px;
/* position+overflow: video modlarında (bkz. .hero-video-bg) mutlak konumlu iframe/video
katmanının section'ın kendi sınırları İÇİNDE kalmasını (yuvarlak alt köşeler dahil) ve
.container'ın z-index ile bunun ÜZERİNDE görünmesini sağlar — Image modunda (background-
image kullanan mevcut davranış) bu iki özelliğin hiçbir görsel etkisi yoktur. */
position: relative;
overflow: hidden;
/* Mega menü açılırken/kapanırken (bkz. body.no-scroll.hero-section) opacity,
max-height ve padding'in YUMUŞAK geçmesi için — süre/easing mega menünün
kendi collapse animasyonuyla (.mega-menu.collapsing, 0.35s ease-in-out) ve
backdrop fade'iyle (.mega-menu-backdrop, aynı süre/easing) BİREBİR eşleşir
ki tüm hareket tek bir bütün gibi hissettirsin. max-height'ın gerçek
(px cinsinden) başlangıç/bitiş değerleri main.js'te (show/hide.bs.collapse)
JS ile ölçülüp inline style olarak atanır — "auto" yükseklik CSS ile
doğrudan animasyonlanamadığı için. */
transition: opacity 0.35s ease-in-out, max-height 0.35s ease-in-out,
padding-top 0.35s ease-in-out, padding-bottom 0.35s ease-in-out;
}
.hero-section > .container {
position: relative;
z-index: 2;
}
/* Ana Sayfa hero'sunda arka plan videosu (YouTube embed veya yüklenen MP4) — section'ın
tüm alanını kaplar, .hero-title/.hero-text ile aynı görsel yerde ama ARKADA durur. */
.hero-video-bg {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.hero-video-bg iframe,
.hero-video-bg video {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
min-width: 100%;
min-height: 100%;
transform: translate(-50%, -50%);
object-fit: cover;
border: 0;
}
/* Image modundaki linear-gradient(rgba(0,0,0,.55)...) overlay'iyle AYNI koyuluk — video
üzerine bindirilen bir 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: 46px;
font-weight: 400;
line-height: 1.25;
margin-bottom: 22px;
}
.hero-text {
color: rgba(255,255,255,0.7);
font-size: 15px;
line-height: 1.7;
max-width: 475px;
margin-bottom: 34px;
}
/* ==========================================================================
YEREL GÜÇ, GLOBAL VİZYON
========================================================================== */
.local-power-section {
background-color: var(--bg-local-power);
padding: 30px 0;
}
.local-power-cta {
gap: 16px;
margin-top: 8px;
}
.badge-check {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.badge-check img {
/* verified-badge.svg kendi mavi/beyaz görselini içerir, wrapper
sadece boyut/hizalama sağlar */
width: 100%;
height: 100%;
}
.local-power-image {
/* Görsel, .container'ın sağ boşluğunu iptal eden negatif margin ile
sayfanın sağ kenarına kadar uzanır (metin sütunuyla çakışmaz,
çünkü bu sadece kendi kolonunun/görselin genişliğini etkiler). */
margin-right: calc(-1 * var(--container-pad-x));
}
.local-power-image img {
border-radius: var(--radius-lg);
border-top-right-radius: 0;
border-bottom-right-radius: 0;
width: 100%;
height: auto;
display: block;
}
/* ==========================================================================
ÖNE ÇIKAN GENİŞ ÜRÜN YELPAZESİ
========================================================================== */
.product-range-section {
background-color: #ffffff;
padding: 90px 0;
}
.product-range-row {
margin-top: 46px;
}
.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;
}
.pagerm-card {
background-color: var(--color-blue);
border-radius: var(--radius-md);
padding: 30px 32px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/* İçerik bloğu bir bütün olarak kart içinde yatayda ortalanır (kartın
align-items:center'ı sayesinde kendi içeriğine göre daralır/shrink-wrap
olur), ama İÇİNDEKİ elemanlar (logo, başlık, buton) kendi aralarında
sola yaslı kalır - bu yüzden text-align burada YOK. */
.pagerm-card-content {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.pagerm-card-logo {
margin: 0 0 20px;
}
.pagerm-card-logo-img {
height: 20px;
width: auto;
}
.pagerm-card-title-row {
margin-top: 14px;
gap: 30px;
}
.pagerm-card-text {
color: #ffffff;
font-size: 22px;
font-weight: 400;
line-height: 1.5;
margin: 0;
}
.pagerm-card-text .text-yellow {
font-weight: 600;
}
.pagerm-card-url {
color: rgba(255,255,255,0.75);
font-size: 13px;
margin-top: 14px;
}
.pagerm-card-url a {
color: inherit;
text-decoration: none;
transition: color 0.2s ease;
}
.pagerm-card-url a:hover {
color: var(--color-yellow);
}
/* ==========================================================================
MULTI-ITEM CAROUSEL (Ürün Grubu Kartları + Değerlerimiz Slider'ları)
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). Ok butonları artık carousel'in
kenarlarında değil, bölüm başlığının sağ üst köşesinde (.carousel-nav-row)
yer alır; data-bs-target ile ilgili carousel'i tetikler.
Her iki carousel de (Ürün Grubu + Değerlerimiz) aynı .carousel-item-col
sarmalayıcısını kullandığı için kart boyutu (genişlik/yükseklik) tek bir
ortak kuralda tanımlanır: kartlar sabit/kompakt boyutta kalır, satırı
doldurup gerilmez (boş alan kalması normaldir).
========================================================================== */
.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;
}
/* Her iki carousel için de özel durum: kartların/kutucukların toplam
genişliği, üstteki ok navigasyonunun (ve Ürün Grupları'nda ayrıca
"Tüm Ürün Gruplarını İncele" butonunun) sağ kenarına kadar uzanmalı -
bu yüzden mevcut genişliği eşit paylaşarak BÜYÜRLER (satırı doldururlar). */
.product-carousel .carousel-item-col,
.values-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;
}
.product-card-title,
.value-card-title {
font-size: 16px;
font-weight: 700;
margin-bottom: 8px;
}
.product-card-title {
color: var(--color-blue);
}
.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;
}
.carousel-nav-row {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 4px;
margin-bottom: 14px;
}
.carousel-nav-row .carousel-control-prev,
.carousel-nav-row .carousel-control-next {
position: static;
inset: auto;
width: auto;
height: auto;
background: none;
border: none;
border-radius: 0;
box-shadow: none;
opacity: 1;
padding: 6px 8px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.carousel-nav-row .carousel-control-next {
border-left: 1px solid rgba(23,24,26,0.12);
}
.carousel-nav-icon {
width: 14px;
height: 14px;
display: flex;
align-items: center;
justify-content: center;
}
.carousel-nav-icon img {
width: 100%;
height: 100%;
transition: filter 0.2s ease;
}
.carousel-nav-row .carousel-control-prev .carousel-nav-icon img {
transform: scaleX(-1);
}
.carousel-nav-row .carousel-control-prev:hover .carousel-nav-icon img,
.carousel-nav-row .carousel-control-next:hover .carousel-nav-icon img {
filter: brightness(0.7);
}
/* ==========================================================================
BAŞARIMIZIN ARKASINDAKI DEĞERLERİMİZ
========================================================================== */
.values-section {
background-color: #ffffff;
padding: 90px 0;
}
.values-row {
margin-top: 46px;
}
/* .value-card temel boyutu/padding'i artık Ürün Grubu kartıyla paylaşılan
ortak kuralda tanımlı (bkz. MULTI-ITEM CAROUSEL bölümü). */
.value-card--active {
background-color: var(--color-blue);
/* tasarim/golge.png referansına göre ayarlandı: kart kenarında neredeyse
tam kart-mavisi yoğunlukta başlayıp yumuşak/geniş bir bulanıklıkla
aşağı doğru solan gölge (spread yok/0 - golge.png'de gölge kartın
kendi genişliğine yakın, keskin şekilde daraltılmamış). Diğer
kutucuklarla aynı hizada kalması için pozisyon kaydırması
(translateY) kaldırıldı. */
box-shadow: 0 20px 30px rgba(0,87,184,0.5);
}
.value-card--active .value-card-title,
.value-card--active .value-card-text {
color: #ffffff;
}
/* ==========================================================================
55+ ÜLKEYE GÜVENİLİR TEDARİK
========================================================================== */
.global-reach-section {
background-color: var(--bg-light-gray);
padding: 90px 0;
}
.global-reach-badges {
margin-top: 28px;
--bs-gutter-x: 0.75rem;
}
.world-map-box {
position: relative;
background: radial-gradient(circle at 32% 42%, #0d3a66 0%, #071c33 45%, #04101f 100%);
border-radius: var(--radius-lg);
overflow: hidden;
}
/* operasyonel.png haritanın kendi içinde "Türkiye" etiketi ve bağlantı
noktaları (dot) zaten hazır şekilde bulunduğundan, eskiden CSS ile
üretilen ayrı .world-map-dot/.world-map-label katmanlarına gerek kalmadı. */
.world-map-box img {
width: 100%;
height: auto;
display: block;
}
/* ==========================================================================
ARADIĞINIZ ÜRÜNÜ HEMEN BULUN (FORM)
========================================================================== */
.contact-form-section {
background-color: #ffffff;
padding: 90px 0;
}
.custom-input {
background-color: var(--bg-light-gray);
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;
}
/* 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;
}
.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: var(--bg-mid-gray);
color: #ffffff;
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;
}
.whatsapp-tab:hover {
background-color: var(--color-blue-dark);
color: #ffffff;
}
.whatsapp-tab img {
width: 25px;
height: 25px;
transform: rotate(90deg);
}
/* ==========================================================================
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;
}
.site-footer {
background-color: var(--bg-mid-gray);
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: var(--color-blue-dark);
}
.footer-nav li:not(:last-child)::after {
content: "|";
display: inline-block;
margin-left: 12px;
color: rgba(255, 255, 255, 0.4);
}
.footer-logo {
display: flex;
justify-content: flex-end;
margin-left: auto;
}
.footer-logo img {
height: 45px;
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: 18px;
width: auto;
display: inline-block;
}
.footer-social {
gap: 14px;
}
/* İkonlar dosya (img/mask) yerine inline