/* ============================================================
FIMAK — style.css
Bolumler
1. Degiskenler ve reset
2. Temel (body, link)
3. Header ve navigasyon
4. Mega menu
5. Butonlar ve metin linkleri
6. Hero slider (Apple tarzi urun sunumu)
7. Kurumsal bolumler
7a. Hakkimizda (fimak-about, bento)
7b. Urun gruplari (ps)
7c. Teknoloji sahnesi (sus)
7d. Dunyada Fimak (gmap, dunya haritasi)
7e. Haberler slider (news)
8. Footer
9. Responsive (tum media query'ler burada)
============================================================ */
/* ------------------------------------------------------------
1. Degiskenler ve reset
------------------------------------------------------------ */
:root {
--brand: #e20613;
--brand-dark: #c00510;
--text: #1d1d1f;
--text-secondary: #6e6e73;
--text-tertiary: #86868b;
--text-muted: #a1a1a6;
--text-footer-link: #424245;
--text-on-dark: #f5f5f7;
--surface: #ffffff;
--surface-light: #fbfbfd;
--surface-alt: #f5f5f7;
--border: #d2d2d7;
--nav-height: 44px;
--content-width: 980px;
--font-sans: "SFPro", "SF Pro Display", "SF Pro Text", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: var(--font-sans);
}
/* ------------------------------------------------------------
2. Temel
------------------------------------------------------------ */
body {
background-color: var(--surface);
color: var(--text);
line-height: 1.47059;
font-weight: 400;
letter-spacing: -0.022em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
a {
text-decoration: none;
color: var(--brand-dark);
}
/* ------------------------------------------------------------
3. Header ve navigasyon
Uc bolge: marka logosu | menu | eylemler (arama)
Menu space-evenly ile dagitilir; logo ve arama kenarlarda sabit kalir.
------------------------------------------------------------ */
.site-header {
background-color: rgba(0, 0, 0, 0.8);
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
position: sticky;
top: 0;
z-index: 9999;
width: 100%;
}
.nav-wrap {
display: flex;
align-items: center;
justify-content: space-between;
max-width: var(--content-width);
margin: 0 auto;
height: var(--nav-height);
padding: 0 2px;
}
.site-nav {
flex: 1;
display: flex;
height: var(--nav-height);
}
/* Sadece dogrudan cocuklar: mega menu icindeki listeler etkilenmez */
.site-nav > ul {
flex: 1;
display: flex;
justify-content: space-evenly;
list-style: none;
}
.site-nav > ul > li {
display: flex;
align-items: center;
height: var(--nav-height);
}
/* Navbar tipografisi: 14px / 400, hafif sikilastirilmis harf araligi */
.nav-link {
display: flex;
align-items: center;
height: var(--nav-height);
padding: 0 10px;
color: var(--text-on-dark);
opacity: 0.8;
font-size: 14px;
font-weight: 400;
line-height: 1;
letter-spacing: -0.3px;
white-space: nowrap;
transition: opacity 0.3s ease-out;
}
.nav-link:hover {
opacity: 1;
}
a.brand.nav-link.logo {
opacity: 1 !important;
}
.brand-logo {
width: 142px;
height: 22px;
}
.nav-actions {
display: flex;
align-items: center;
}
.nav-search-icon {
filter: invert(1);
}
/* ---------- Dil secici (masaustu) ----------
Header yuksekligini degistirmemek icin dugme de nav-link gibi
tam yukseklikte; arka plan, kenarlik ve dolgu yok. */
.lang-select {
position: relative;
display: flex;
align-items: center;
}
.lang-toggle {
gap: 4px;
padding: 0 8px;
border: 0;
background: none;
font-size: 12.5px;
letter-spacing: -0.2px;
cursor: pointer;
}
.lang-toggle__chevron {
width: 9px;
height: 6px;
transition: transform 0.3s ease-out;
}
.lang-toggle[aria-expanded="true"] {
opacity: 1;
}
.lang-toggle[aria-expanded="true"] .lang-toggle__chevron {
transform: rotate(180deg);
}
/* Acilir kutu: visibility ile gizlenir, boylece kapaliyken
klavyeyle de odaklanilmaz */
.lang-menu {
position: absolute;
top: calc(var(--nav-height) - 6px);
right: 0;
z-index: 20;
width: 140px;
padding: 6px;
border-radius: 9px;
background-color: rgba(38, 38, 40, 0.82);
-webkit-backdrop-filter: saturate(180%) blur(16px);
backdrop-filter: saturate(180%) blur(16px);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
list-style: none;
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity 0.22s ease-out, transform 0.22s ease-out, visibility 0s linear 0.22s;
}
.lang-menu.is-open {
opacity: 1;
visibility: visible;
transform: none;
transition: opacity 0.22s ease-out, transform 0.22s ease-out, visibility 0s;
}
.lang-menu a {
display: block;
padding: 8px 10px;
border-radius: 6px;
color: var(--text-on-dark);
opacity: 0.6;
font-size: 13px;
letter-spacing: -0.2px;
transition: opacity 0.2s ease-out, background-color 0.2s ease-out;
}
.lang-menu a:hover,
.lang-menu a:focus-visible {
opacity: 1;
background-color: rgba(255, 255, 255, 0.08);
}
/* Secili dil daha parlak durur */
.lang-menu a.is-active {
opacity: 1;
}
/* ---------- Mobil menu tetikleyicisi ----------
Iki cizgi; acilinca carpiya doner. 734px ustunde gizli. */
.nav-menu-toggle {
display: none;
width: 34px;
padding: 0;
border: 0;
background: none;
cursor: pointer;
}
.nav-menu-toggle__bars,
.nav-menu-toggle__bars::before,
.nav-menu-toggle__bars::after {
display: block;
width: 17px;
height: 1.5px;
border-radius: 2px;
background-color: currentColor;
transition: transform 0.3s ease-out, opacity 0.2s ease-out;
}
.nav-menu-toggle__bars {
position: relative;
background-color: transparent;
}
.nav-menu-toggle__bars::before,
.nav-menu-toggle__bars::after {
content: "";
position: absolute;
left: 0;
}
.nav-menu-toggle__bars::before { top: -4px; }
.nav-menu-toggle__bars::after { top: 4px; }
.nav-menu-toggle[aria-expanded="true"] .nav-menu-toggle__bars::before {
transform: translateY(4px) rotate(45deg);
}
.nav-menu-toggle[aria-expanded="true"] .nav-menu-toggle__bars::after {
transform: translateY(-4px) rotate(-45deg);
}
/* ---------- Mobil navigasyon katmani ----------
Header'in hemen altindan acilir; modal degil, sade bir katman. */
.mobile-nav {
position: fixed;
top: var(--nav-height);
left: 0;
z-index: 9998;
width: 100%;
height: calc(100vh - var(--nav-height));
height: calc(100dvh - var(--nav-height));
overflow-y: auto;
overscroll-behavior: contain;
padding: 8px 20px calc(40px + env(safe-area-inset-bottom, 0px));
/* Duz zemin: header'in kendi backdrop-filter'i icinde ikinci bir
blur katmani tarayicida guvenilir boyanmiyor */
background-color: #000;
color: var(--text-on-dark);
/* Kapaliyken gizli: icindeki baglantilar odaklanamaz */
visibility: hidden;
opacity: 0;
transform: translateY(-8px);
transition: opacity 0.3s ease-out, transform 0.3s ease-out, visibility 0s linear 0.3s;
}
.mobile-nav.is-open {
visibility: visible;
opacity: 1;
transform: none;
transition: opacity 0.3s ease-out, transform 0.3s ease-out, visibility 0s;
}
/* Menu acikken arkadaki sayfa kaymaz */
body.nav-open { overflow: hidden; }
.mobile-nav__list { list-style: none; }
.mobile-nav__list > li + li {
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.mobile-nav__link {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
width: 100%;
height: auto;
padding: 18px 0;
border: 0;
background: none;
font-size: 26px;
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.6px;
text-align: left;
color: var(--text-on-dark);
opacity: 0.92;
cursor: pointer;
transition: opacity 0.2s ease-out;
}
.mobile-nav__link:hover,
.mobile-nav__link:focus-visible { opacity: 1; }
.mobile-nav__chevron {
width: 14px;
height: 9px;
flex-shrink: 0;
opacity: 0.55;
transition: transform 0.3s ease-out;
}
.mobile-nav__trigger[aria-expanded="true"] .mobile-nav__chevron {
transform: rotate(180deg);
opacity: 1;
}
/* Akordeon: satir yuksekligi 0fr <-> 1fr ile animasyonlanir */
.mobile-nav__panel {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.3s ease-out;
}
.mobile-nav__trigger[aria-expanded="true"] + .mobile-nav__panel {
grid-template-rows: 1fr;
}
.mobile-nav__panel > div {
min-height: 0;
overflow: hidden;
}
.mobile-nav__sub {
list-style: none;
padding-bottom: 14px;
}
.mobile-nav__sub a {
display: block;
padding: 10px 0 10px 2px;
font-size: 16px;
letter-spacing: -0.2px;
color: var(--text-on-dark);
opacity: 0.58;
transition: opacity 0.2s ease-out;
}
.mobile-nav__sub a:hover,
.mobile-nav__sub a:focus-visible { opacity: 1; }
.mobile-nav__sub a.is-active { opacity: 1; }
/* Baslik kendi sayfasina sahipse alt menunun en ustunde duran satir.
Baslik mobilde butona dondugu icin ona tiklayarak sayfaya gidilemiyor. */
.mobile-nav__all {
font-weight: 500;
opacity: 0.85 !important;
}
/* Alt menu icindeki grup basligi (Insan Kaynaklari, Haberler, urun gruplari).
Baglanti degil, yalnizca ayirac. */
.mobile-nav__grup {
margin: 10px 0 2px;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.4px;
text-transform: uppercase;
color: var(--text-on-dark);
opacity: 0.38;
}
/* Bulunulan sayfa: alt menude oldugu gibi ust basliklarda da isaretli */
.mobile-nav__link.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.lang-menu,
.lang-toggle__chevron,
.mobile-nav,
.mobile-nav__panel,
.mobile-nav__chevron,
.nav-menu-toggle__bars::before,
.nav-menu-toggle__bars::after { transition: none; }
}
.site-header :where(.lang-toggle, .nav-menu-toggle, .lang-menu a, .mobile-nav a, .mobile-nav button):focus-visible {
outline: 2px solid var(--text-on-dark);
outline-offset: -2px;
border-radius: 4px;
}
/* ------------------------------------------------------------
4. Mega menu (Apple tarzi flyout)
- Hover / focus ile acilir, 0.25s ease-out opacity + translateY
- Panel navbarin hemen altinda baslar, tam genislik
- Sayfanin kalani body::after ile blur + karartma alir
------------------------------------------------------------ */
.has-mega {
position: static;
}
.has-mega:hover > .nav-link,
.has-mega:focus-within > .nav-link {
opacity: 1;
}
.mega-menu {
position: absolute;
top: var(--nav-height);
left: 0;
width: 100%;
background-color: rgba(255, 255, 255, 0.96);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
color: var(--text);
border-radius: 0 0 12px 12px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
text-align: left;
cursor: default;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
pointer-events: none;
transition: opacity 0.25s ease-out, transform 0.25s ease-out, visibility 0s linear 0.25s;
}
.has-mega:hover .mega-menu,
.has-mega:focus-within .mega-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
transition: opacity 0.25s ease-out, transform 0.25s ease-out, visibility 0s;
}
/* Apple flyout duzeni: solda buyuk kesif alani, sagda kucuk kolonlar */
.mega-inner {
max-width: var(--content-width);
margin: 0 auto;
padding: 44px 22px 52px;
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: 56px;
}
.mega-inner ul {
list-style: none;
}
/* Kucuk gri etiketler (sol alan basligi ve kolon basliklari) */
.mega-label,
.mega-group h3 {
font-size: 14px;
line-height: 1.4;
font-weight: 400;
letter-spacing: -0.1px;
color: var(--text-secondary);
margin-bottom: 14px;
}
/* Sol buyuk alan: 28px / 600 baslik linkleri */
.mega-featured li {
margin-bottom: 10px;
}
.mega-featured li a {
font-size: 28px;
line-height: 1.2;
font-weight: 600;
letter-spacing: -0.5px;
color: var(--text);
transition: opacity 0.2s ease-out;
}
.mega-featured li a:hover {
opacity: 0.65;
}
.mega-more {
display: inline-block;
margin-top: 22px;
font-size: 14px;
line-height: 1.4;
color: var(--text-secondary);
transition: color 0.2s ease-out;
}
.mega-more::after {
content: " →";
}
.mega-more:hover {
color: var(--text);
}
/* Sag kolonlar: 15px / 400 linkler, genis satir araligi */
.mega-columns {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 32px;
}
.mega-group li {
margin-bottom: 12px;
}
.mega-group a {
font-size: 15px;
line-height: 1.5;
font-weight: 400;
letter-spacing: -0.2px;
color: var(--text);
transition: opacity 0.2s ease-out;
}
.mega-group a:hover {
opacity: 0.65;
}
/* Sayfanin kalani: hafif cam efekti (Apple tarzi), gradient gorunur kalir */
body::after {
content: "";
position: fixed;
inset: 0;
z-index: 9998;
background-color: rgba(0, 0, 0, 0.08);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.25s ease-out, visibility 0s linear 0.25s;
}
body:has(.has-mega:hover)::after,
body:has(.has-mega:focus-within)::after {
opacity: 1;
visibility: visible;
transition: opacity 0.25s ease-out, visibility 0s;
}
/* --- Arama paneli (ikon tiklaninca; mega menu ile ayni gorsel dil) --- */
.nav-search-toggle {
border: 0;
background: none;
cursor: pointer;
}
.search-panel {
position: absolute;
top: var(--nav-height);
left: 0;
width: 100%;
background-color: rgba(255, 255, 255, 0.96);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
color: var(--text);
border-radius: 0 0 12px 12px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
text-align: left;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
pointer-events: none;
transition: opacity 0.25s ease-out, transform 0.25s ease-out, visibility 0s linear 0.25s;
}
.search-panel.is-open {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
transition: opacity 0.25s ease-out, transform 0.25s ease-out, visibility 0s;
}
.search-inner {
max-width: var(--content-width);
margin: 0 auto;
padding: 40px 22px 48px;
}
/* Buyuk, kenarliksiz arama alani; solda ikon */
.search-form {
display: flex;
align-items: center;
gap: 14px;
padding-bottom: 14px;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.search-form-icon {
flex: 0 0 auto;
color: var(--text-secondary);
}
.search-input {
flex: 1;
min-width: 0;
border: 0;
outline: 0;
background: none;
font-size: 28px;
line-height: 1.2;
font-weight: 400;
letter-spacing: -0.5px;
color: var(--text);
}
.search-input::placeholder {
color: var(--text-muted);
}
.search-input::-webkit-search-decoration,
.search-input::-webkit-search-cancel-button {
-webkit-appearance: none;
}
.search-quick-title {
margin: 28px 0 14px;
font-size: 12px;
line-height: 1.33;
color: var(--text-secondary);
}
.search-quick-links {
list-style: none;
}
.search-quick-links li {
margin-bottom: 10px;
}
.search-quick-links a {
font-size: 14px;
line-height: 1.4;
color: var(--text);
transition: opacity 0.2s ease-out;
}
.search-quick-links a::before {
content: "→";
display: inline-block;
width: 22px;
color: var(--text-secondary);
}
.search-quick-links a:hover {
opacity: 0.65;
}
/* Arama acikken arka plan: mega menu ile ayni cam efekti */
body.search-open::after {
opacity: 1;
visibility: visible;
transition: opacity 0.25s ease-out, visibility 0s;
}
/* Arama acikken mega menu hover'i panelin ustune binmesin */
body.search-open .mega-menu {
display: none;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
/* ------------------------------------------------------------
5. Butonlar ve metin linkleri
------------------------------------------------------------ */
.links-container {
display: flex;
justify-content: center;
align-items: center;
gap: 35px;
margin-top: 20px;
margin-bottom: 44px;
}
/* Tek CTA dili: compact primary pill + sade metin linki.
Sayfadaki tum bolumler bu iki sinifi kullanir. */
.cta {
display: inline-flex;
align-items: center;
height: 36px;
font-size: 14px;
font-weight: 500;
line-height: 1;
letter-spacing: -0.01em;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
}
.cta:focus-visible {
outline: 2px solid var(--brand);
outline-offset: 3px;
border-radius: 999px;
}
.cta--primary {
padding: 0 18px;
border: 0;
border-radius: 999px;
background-color: var(--brand);
color: #fff;
transition: background-color 300ms ease;
}
.cta--primary:hover {
background-color: var(--brand-dark);
}
.cta--link {
gap: 5px;
padding: 0;
border: 0;
background: none;
color: var(--brand);
}
.cta--link::after {
content: "›";
font-size: 17px;
line-height: 1;
transition: transform 300ms ease;
}
.cta--link:hover::after {
transform: translateX(3px);
}
/* Koyu zeminli bolumler icin metin linki */
.cta--on-dark {
color: rgb(245 245 247 / .72);
transition: color 300ms ease;
}
.cta--on-dark:hover {
color: #f5f5f7;
}
@media (prefers-reduced-motion: reduce) {
.cta,
.cta--link::after {
transition: none;
}
.cta--link:hover::after {
transform: none;
}
}
/* ------------------------------------------------------------
6. Hero (Apple tarzi urun sunumu)
Katmanlar: CSS gradient arka plan -> metin -> gölge katmani -> seffaf PNG.
Slide basina degisenler: metinler, --hero-bg-top / --hero-bg-bottom
(inline style), urun gorseli. Geri kalan her sey ortak.
------------------------------------------------------------ */
.hero-slider {
position: relative;
margin-bottom: 10px;
/* Dikey kompozisyon (flex column): metin blogu sabit, medya kalan alani alir.
Asagidaki degiskenler ayni olculeri CSS'te de turetir; oklarin dikey konumu
ve medya tavani bunlardan hesaplanir. Metin: baslik 2 satir + alt baslik 2 satir
+ aciklama 1 satir (25px) + CTA (36px) + aralar (18 + 16 + 20) = 115px. */
--hero-pad-top: clamp(32px, 4.5vh, 62px);
--hero-pad-bottom: 48px;
--hero-title-size: clamp(46px, min(4vw, 6.4vh), 64px);
--hero-sub-size: clamp(22px, calc(2.4vh + 5px), 28px);
--hero-text-h: calc(var(--hero-title-size) * 2 + var(--hero-sub-size) * 2.4 + 115px);
--hero-media-gap: 22px;
/* Medya alani = kalan dikey alan (flex ile birebir); medya bu alanda ortalanir, tavani 560px */
--hero-media-area-h: max(240px, calc(100svh - var(--nav-height) - var(--hero-pad-top) - var(--hero-text-h) - var(--hero-media-gap) - var(--hero-pad-bottom)));
--hero-media-h: min(560px, var(--hero-media-area-h));
--hero-media-w: min(1100px, calc(100vw - 96px));
}
.hero-slides {
display: grid;
}
.hero-slide {
grid-area: 1 / 1;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
/* Ilk ekran: nav haric viewport yuksekligi; medya kalan alani alir */
min-height: calc(100vh - var(--nav-height));
min-height: calc(100svh - var(--nav-height));
padding: var(--hero-pad-top) 40px var(--hero-pad-bottom);
text-align: center;
overflow: hidden;
/* Slide rengi inline degiskenlerden gelir; ustune urunun arkasinda
hafif beyaz radyal parlama biner (Apple urun render hissi). */
background-image:
radial-gradient(ellipse 60% 45% at 50% 68%, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0) 100%),
linear-gradient(180deg, var(--hero-bg-top, #ffffff) 0%, var(--hero-bg-bottom, #f2f5f8) 100%);
}
/* --- Tam zeminli slayt --- */
/* Urun PNG'si / videosu yok; gorsel butun slaydi kaplar. Metin solda ve
beyaz; okunurlugu gorselden bagimsiz tutmak icin altinda koyu perde var. */
.hero-slide--bg {
justify-content: center;
text-align: left;
/* Gorsel kendi zeminini tasir: urun arkasindaki beyaz parlama burada istenmez.
background-image markup'taki style ozelliginden gelir: url() goreli yolu
sayfaya gore cozulsun diye (Chrome, custom property icindeki goreli url'yi
CSS dosyasina gore cozer; burada yazilsa gorsel 404 olur). */
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* Soldan saga acilan perde: acik zeminli gorsellerde de baslik okunur kalir.
Yalnizca slaytta metin varken basilir; salt gorsel slaytta gorseli
gereksiz yere karartmasin diye :has() ile kosullandirildi. */
.hero-slide--bg:has(.hero-content)::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgb(0 0 0 / 0.45) 0%, rgb(0 0 0 / 0.15) 45%, transparent 75%);
pointer-events: none;
}
.hero-slide--bg .hero-content {
width: 100%;
max-width: var(--content-width, 1200px);
margin-inline: auto;
}
/* Ortalayan auto margin'ler sifirlanir, metin sola yaslanir */
.hero-slide--bg .hero-title,
.hero-slide--bg .hero-subtitle {
max-width: 18ch;
margin-inline: 0;
color: #fff;
}
.hero-slide--bg .hero-desc { color: rgb(255 255 255 / 0.78); }
.hero-slide--bg .links-container { justify-content: flex-start; }
/* Kirmizi zeminde kirmizi dugme kaybolur: birincil CTA beyaza doner */
.hero-slide--bg .cta--primary {
background-color: #fff;
color: var(--text);
}
.hero-slide--bg .cta--primary:hover { background-color: rgb(255 255 255 / 0.88); }
.hero-slide--bg .cta:focus-visible { outline-color: #fff; }
/* Dar ekranda gorselin urunu ortada kalir: metin alta iner, perde dikeye doner;
yoksa yazi urunun ustune biner */
@media (max-width: 834px) {
.hero-slide--bg {
justify-content: flex-end;
text-align: center;
background-position: center 35%;
}
.hero-slide--bg:has(.hero-content)::before {
background: linear-gradient(180deg, transparent 20%, rgb(0 0 0 / 0.55) 70%);
}
.hero-slide--bg .hero-title,
.hero-slide--bg .hero-subtitle {
max-width: none;
margin-inline: auto;
}
.hero-slide--bg .links-container { justify-content: center; }
}
/* --- Metin --- */
.hero-content {
position: relative;
z-index: 2;
max-width: 760px;
flex: 0 0 auto;
}
/* Font paketinde Semibold yok: 600, Bold (700) ile cizilir. */
.hero-title {
font-size: var(--hero-title-size);
line-height: 1;
font-weight: 600;
letter-spacing: -2px;
color: var(--text);
margin: 0 auto 18px;
}
.hero-subtitle {
font-size: var(--hero-sub-size);
line-height: 1.2;
font-weight: 400;
letter-spacing: -0.5px;
color: var(--text);
margin: 0 auto 16px;
}
.hero-desc {
font-size: 17px;
line-height: 1.47059;
font-weight: 400;
letter-spacing: -0.2px;
color: var(--text-secondary);
}
.hero-content .links-container {
margin-top: 20px;
margin-bottom: 0;
}
/* --- Medya sahnesi: CTA'larin 22px altinda, kalan dikey alani alir --- */
.hero-product {
position: relative;
z-index: 1;
flex: 1 1 auto;
min-height: 0;
width: 100%;
margin-top: var(--hero-media-gap);
display: flex;
flex-direction: column;
align-items: center;
/* Medya alanin USTUNDEN baslar; tavana takilinca kalan bosluk altta kalir */
justify-content: flex-start;
}
/* Medya kutusu: genislik degiskenden, yukseklik flex'ten (kalan alan), tavan 560px;
kirpma yok, golge/kenarlik yok. Icerik mutlak konumla kutuyu doldurur. */
.hero-media {
position: relative;
flex: 1 1 auto;
min-height: 0;
width: var(--hero-media-w);
max-width: 100%;
max-height: var(--hero-media-h);
border-radius: 24px;
overflow: visible;
background-color: transparent;
/* Medya tiklama almaz; oklar/CTA'lar etkilenmez */
pointer-events: none;
}
/* Video: kutuyu doldurur, contain ile dogal oran; kirpilmaz, scale yok */
.hero-video {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center center;
pointer-events: none;
}
/* Urun PNG (slide 2-3): sahne icinde ortali, hafif drop-shadow + yansima + yuzme */
.hero-product-image {
position: absolute;
inset: 9% 6%;
display: block;
width: 88%;
height: 82%;
object-fit: contain;
filter: drop-shadow(0 24px 32px rgba(0, 0, 0, 0.12));
-webkit-box-reflect: below -6px linear-gradient(transparent 72%, rgba(0, 0, 0, 0.14));
animation: hero-float 6s ease-in-out infinite alternate;
}
/* Zemin golgesi (yalnizca PNG sahnelerinde): genis oval, yuksek blur, dusuk opaklik */
.hero-shadow {
position: absolute;
left: 50%;
bottom: 6%;
width: 70%;
height: 8%;
transform: translateX(-50%);
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.08) 40%, rgba(0, 0, 0, 0) 70%);
filter: blur(18px);
animation: hero-shadow 6s ease-in-out infinite alternate;
}
@keyframes hero-float {
from { transform: translateY(0); }
to { transform: translateY(-15px); }
}
@keyframes hero-shadow {
from { transform: translateX(-50%) scale(1); opacity: 1; }
to { transform: translateX(-50%) scale(0.94); opacity: 0.75; }
}
/* --- Slide gecisi (premium, kontrollu) ---
Slide: opacity 550ms + cok hafif translateY(8px) scale(0.985) 650ms, easing cubic-bezier(0.22, 1, 0.36, 1).
Icerik stagger: baslik 60ms, alt baslik 100ms, aciklama 140ms, CTA 180ms, medya 100ms.
Kapanan slide ayni egriyle soner; visibility gecis bitince kapanir. */
.hero-slide {
opacity: 0;
visibility: hidden;
transform: translateY(8px) scale(0.985);
transition:
opacity 550ms cubic-bezier(0.22, 1, 0.36, 1),
transform 650ms cubic-bezier(0.22, 1, 0.36, 1),
visibility 0s linear 650ms;
}
.hero-slide.is-active {
opacity: 1;
visibility: visible;
z-index: 1;
transform: translateY(0) scale(1);
transition:
opacity 550ms cubic-bezier(0.22, 1, 0.36, 1),
transform 650ms cubic-bezier(0.22, 1, 0.36, 1),
visibility 0s;
}
.hero-slide .hero-title,
.hero-slide .hero-subtitle,
.hero-slide .hero-desc,
.hero-slide .links-container,
.hero-slide .hero-product {
opacity: 0;
transform: translateY(8px);
transition:
opacity 550ms cubic-bezier(0.22, 1, 0.36, 1),
transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-slide.is-active .hero-title,
.hero-slide.is-active .hero-subtitle,
.hero-slide.is-active .hero-desc,
.hero-slide.is-active .links-container,
.hero-slide.is-active .hero-product {
opacity: 1;
transform: translateY(0);
}
.hero-slide.is-active .hero-title { transition-delay: 60ms; }
.hero-slide.is-active .hero-subtitle { transition-delay: 100ms; }
.hero-slide.is-active .hero-desc { transition-delay: 140ms; }
.hero-slide.is-active .links-container { transition-delay: 180ms; }
.hero-slide.is-active .hero-product { transition-delay: 100ms; }
/* Video: hazir olana kadar gorunmez (siyah/bos kare yok); JS loadeddata'da .is-ready ekler */
.hero-video {
background: transparent;
opacity: 0;
transition: opacity 250ms ease;
}
.hero-video.is-ready {
opacity: 1;
}
/* --- Oklar: arka plansiz ince chevron, dusuk opaklik; hover / odakta belirginlesir --- */
.hero-arrow {
position: absolute;
/* Dikey: videonun merkezi. Video alanin ustunden basladigi icin
alttan = alt bosluk + medya alani - video yuksekligi / 2
(tavana takilmayan ekranlarda alan = video, yani alt bosluk + video / 2). */
bottom: calc(var(--hero-pad-bottom) + var(--hero-media-area-h) - var(--hero-media-h) / 2);
transform: translateY(50%);
z-index: 30;
pointer-events: auto;
width: 44px;
height: 44px;
border: 0;
padding: 0;
background: none;
color: var(--text);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0.5;
transition: opacity 250ms ease, transform 250ms ease;
}
/* Yatay: medya kutusunun DISINDA, kenardan 12px (urunun uzerine gelmez); dar ekranda en az 8px */
.hero-arrow-prev { left: max(8px, calc((100% - var(--hero-media-w)) / 2 - 56px)); }
.hero-arrow-next { right: max(8px, calc((100% - var(--hero-media-w)) / 2 - 56px)); }
.hero-arrow:hover,
.hero-arrow:focus-visible {
opacity: 0.9;
}
.hero-arrow-prev:hover { transform: translate(-2px, 50%); }
.hero-arrow-next:hover { transform: translate(2px, 50%); }
/* --- Noktalar: medya kutusunun disinda, 24px altinda --- */
.hero-dots {
position: absolute;
left: 50%;
bottom: 20px;
z-index: 3;
display: flex;
gap: 10px;
transform: translateX(-50%);
}
.hero-dot {
width: 8px;
height: 8px;
padding: 0;
border: 0;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.22);
cursor: pointer;
transition: background-color 250ms ease, transform 250ms ease, opacity 250ms ease;
}
.hero-dot:hover {
background-color: rgba(0, 0, 0, 0.45);
}
.hero-dot.is-active {
background-color: rgba(0, 0, 0, 0.75);
transform: scale(1.15);
}
/* Tam zeminli slayt koyu bir fotograf tasidigi icin siyah oklar ve noktalar
kaybolur. Kontroller slider'in icinde, slaydin disinda durdugundan hangi
slaydin acik oldugunu :has() ile sorup aydinlik varyanta geciyoruz. */
.hero-slider:has(.hero-slide--bg.is-active) .hero-arrow { color: #fff; }
.hero-slider:has(.hero-slide--bg.is-active) .hero-dot {
background-color: rgb(255 255 255 / 0.4);
}
.hero-slider:has(.hero-slide--bg.is-active) .hero-dot:hover {
background-color: rgb(255 255 255 / 0.7);
}
.hero-slider:has(.hero-slide--bg.is-active) .hero-dot.is-active {
background-color: #fff;
}
@media (prefers-reduced-motion: reduce) {
.hero-slide,
.hero-slide .hero-title,
.hero-slide .hero-subtitle,
.hero-slide .hero-desc,
.hero-slide .links-container,
.hero-slide .hero-product,
.hero-slide.is-active .hero-title,
.hero-slide.is-active .hero-subtitle,
.hero-slide.is-active .hero-desc,
.hero-slide.is-active .links-container,
.hero-slide.is-active .hero-product {
transform: none;
transition: opacity 150ms linear, visibility 0s linear 150ms;
transition-delay: 0ms;
}
.hero-slide.is-active {
transition: opacity 150ms linear, visibility 0s;
}
.hero-dot,
.hero-dot.is-active {
transform: none;
}
.hero-product-image,
.hero-shadow {
animation: none;
}
}
/* ------------------------------------------------------------
7. Kurumsal bolumler (hakkinda, rakamlar, cozum alanlari,
teknoloji, global, referans)
Ortak iskelet: .band + .band-head. Kart, golge, gradient yok;
ritim buyuk tipografi ve genis bosluklarla kurulur.
------------------------------------------------------------ */
.band {
padding: 140px 24px;
text-align: center;
}
.band--tight {
padding: 100px 24px;
}
.band-head {
max-width: 760px;
margin: 0 auto 64px;
}
.band-head:last-child {
margin-bottom: 0;
}
.band-title {
font-size: 56px;
line-height: 1.07;
font-weight: 600;
letter-spacing: -1.8px;
margin-bottom: 20px;
}
.band-text {
font-size: 24px;
line-height: 1.35;
letter-spacing: -0.4px;
color: var(--text-secondary);
margin-bottom: 24px;
}
.band-text:last-child {
margin-bottom: 0;
}
.bg-dark .band-text {
color: var(--text-muted);
}
/* --- Gorsel alanlari --- */
.media {
position: relative;
width: 100%;
max-width: 1200px;
margin: 0 auto;
overflow: hidden;
border-radius: 28px;
background-color: var(--surface-alt);
display: flex;
align-items: center;
justify-content: center;
}
.media img {
display: block;
width: 100%;
max-width: 100%;
height: 100%;
object-fit: cover;
}
/* Gorseli olmayan alan: sadece kucuk etiket */
.media::after {
content: attr(data-label);
font-size: 13px;
letter-spacing: -0.1px;
color: var(--text-tertiary);
}
.media:has(img)::after,
.media:has(svg)::after {
display: none;
}
/* Global: illustrasyon, kutu yok */
/* --- Referans: sektorler, logo listesi yerine sade metin --- */
.sectors {
list-style: none;
max-width: 960px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px 48px;
font-size: 24px;
font-weight: 500;
letter-spacing: -0.4px;
color: var(--text-tertiary);
}
/* Arka plan varyantlari */
.bg-light {
background-color: var(--surface-light);
}
.bg-dark {
background-color: #000000;
color: var(--text-on-dark);
}
/* Scroll reveal: JS .is-visible ekler; JS yoksa hep gorunur */
html.js .reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.8s ease, transform 0.8s ease;
}
html.js .reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
/* ------------------------------------------------------------
7a. Hakkimizda (fimak-about) — bento duzen
Tum kurallar .fimak-about / .fimak-about-card / [data-about-reveal]
ad alaninda; hero ve diger bolumlere sizmaz. Scroll reveal:
js/about-reveal.js. Kendi media query'leri blok icinde tutuldu.
------------------------------------------------------------ */
.fimak-about {
--fimak-red: #e30613;
--fimak-black: #1d1d1f;
--fimak-gray: #6e6e73;
--fimak-surface: #f5f5f7;
position: relative;
background: #ffffff;
/* Alt bosluk: sonraki urun bolumune gecis. 1920: 112px, 1440: 101px, 1024: 72px, mobil: 64px */
padding:
clamp(80px, 8vw, 150px)
clamp(20px, 5vw, 80px)
clamp(56px, 7vw, 112px);
overflow: hidden;
}
.fimak-about__container {
width: min(100%, 1440px);
margin-inline: auto;
}
/* --- Label --- */
.fimak-about__label {
display: inline-flex;
align-items: center;
gap: 12px;
color: var(--fimak-black);
font-size: 17px;
font-weight: 600;
line-height: 1;
}
.fimak-about__label-mark {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--fimak-red);
}
/* --- Intro --- */
.fimak-about__intro {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
gap: 48px;
margin-top: clamp(25px, 2vw, 22px);
margin-bottom: clamp(56px, 6vw, 96px);
}
/* Masaustu: intro ile kartlar arasi ~24px daha siki (1440: 86 -> 62px, 1920: 96 -> 72px) */
@media (min-width: 1025px) {
.fimak-about__intro {
margin-bottom: clamp(56px, calc(6vw - 24px), 72px);
}
}
.fimak-about__title {
max-width: 1120px;
margin: 0;
color: var(--fimak-black);
font-size: clamp(38px, 4.3vw, 68px);
font-weight: 600;
line-height: 1.06;
letter-spacing: -0.04em;
text-wrap: balance;
}
/* --- CTA --- */
.fimak-about__cta {
display: inline-flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
color: var(--fimak-red);
text-decoration: none;
font-size: 17px;
font-weight: 500;
padding-bottom: 8px;
}
.fimak-about__cta-icon {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
color: #ffffff;
background: var(--fimak-red);
transition:
transform 450ms cubic-bezier(0.22, 1, 0.36, 1),
background-color 450ms ease;
}
.fimak-about__cta:hover .fimak-about__cta-icon {
transform: translate(3px, -3px);
}
/* --- Bento grid --- */
.fimak-about__grid {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
grid-auto-rows: clamp(245px, 21vw, 300px);
gap: clamp(14px, 1.4vw, 22px);
}
/* --- Base card --- */
.fimak-about-card {
position: relative;
min-width: 0;
/* Icerik her duzende karta yayilsin (mobil flex sutunda height:100% cozulmez) */
display: flex;
flex-direction: column;
border-radius: clamp(24px, 2vw, 32px);
overflow: hidden;
text-decoration: none;
color: inherit;
isolation: isolate;
transform: translateZ(0);
}
.fimak-about-card__content {
position: relative;
z-index: 4;
height: 100%;
flex: 1 1 auto;
display: flex;
flex-direction: column;
padding: clamp(28px, 3vw, 46px);
}
.fimak-about-card__eyebrow {
display: block;
margin-bottom: 20px;
font-size: 13px;
font-weight: 600;
line-height: 1;
letter-spacing: 0.06em;
}
.fimak-about-card__title {
max-width: 520px;
margin: 0;
font-size: clamp(28px, 2.1vw, 38px);
font-weight: 600;
line-height: 1.06;
letter-spacing: -0.035em;
}
.fimak-about-card__description {
max-width: 520px;
margin: 20px 0 0;
font-size: clamp(15px, 1.1vw, 18px);
line-height: 1.5;
opacity: 0.78;
}
.fimak-about-card__arrow {
position: absolute;
right: clamp(24px, 2.5vw, 40px);
bottom: clamp(24px, 2.5vw, 40px);
display: grid;
place-items: center;
width: 42px;
height: 42px;
border-radius: 50%;
font-size: 20px;
transition:
transform 500ms cubic-bezier(0.22, 1, 0.36, 1),
background-color 400ms ease;
}
/* --- Large image card --- */
.fimak-about-card--hero {
grid-column: span 7;
grid-row: span 2;
min-height: 520px;
color: #ffffff;
background: #111111;
}
.fimak-about-card__image {
position: absolute;
inset: 0;
z-index: -3;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
.fimak-about-card__overlay {
position: absolute;
inset: 0;
z-index: -2;
background:
linear-gradient(
180deg,
rgba(0, 0, 0, 0.08) 10%,
rgba(0, 0, 0, 0.12) 38%,
rgba(0, 0, 0, 0.72) 100%
);
}
.fimak-about-card--hero .fimak-about-card__content {
justify-content: flex-end;
}
.fimak-about-card--hero .fimak-about-card__arrow {
color: var(--fimak-black);
background: rgba(255, 255, 255, 0.92);
}
.fimak-about-card--hero:hover .fimak-about-card__image {
transform: scale(1.035);
}
.fimak-about-card--hero:hover .fimak-about-card__arrow {
transform: translate(3px, -3px);
}
/* --- Light technology card --- */
.fimak-about-card--light {
grid-column: span 5;
background: var(--fimak-surface);
color: var(--fimak-black);
}
.fimak-about-card--light .fimak-about-card__eyebrow {
color: var(--fimak-red);
}
.fimak-about-card--light .fimak-about-card__description {
color: var(--fimak-gray);
}
.fimak-about-card--light .fimak-about-card__arrow {
color: #ffffff;
background: var(--fimak-red);
}
/* Dekoratif teknik halkalar (gorsel yok): dort es merkezli halka, biri kirmizi vurgu.
Arka planda cok hafif kalir, metne karismaz. */
.fimak-about-card__tech-shape {
position: absolute;
right: -70px;
bottom: -90px;
width: 300px;
height: 300px;
pointer-events: none;
}
.fimak-about-card__tech-shape span {
position: absolute;
inset: 0;
border-radius: 50%;
border: 1px solid rgba(0, 0, 0, 0.10);
}
/* 2. halka: en ince, en dista */
.fimak-about-card__tech-shape span:nth-child(2) {
transform: scale(0.78);
border-width: 1.5px;
border-color: rgba(0, 0, 0, 0.085);
}
/* 3. halka: kirmizi vurgu, dis yay hissi icin biraz daha belirgin */
.fimak-about-card__tech-shape span:nth-child(3) {
transform: scale(0.56);
border: 1.5px solid rgba(227, 6, 19, 0.34);
}
/* 4. halka: ic disk, cok hafif kirmizi dolgu */
.fimak-about-card__tech-shape span:nth-child(4) {
transform: scale(0.34);
border: none;
background: var(--fimak-red);
opacity: 0.09;
}
/* Kirmizi isaret noktasi: kirmizi halkanin ust noktasinda, ince hale ile (orbit hissi) */
.fimak-about-card__tech-shape::after {
content: "";
position: absolute;
left: 50%;
top: 22%;
width: 9px;
height: 9px;
margin-left: -4.5px;
border-radius: 50%;
background: var(--fimak-red);
opacity: 0.85;
box-shadow: 0 0 0 4px rgba(227, 6, 19, 0.10);
}
/* Ikinci, sessiz nokta: dis halkanin sol-ust yayinda, gri */
.fimak-about-card__tech-shape::before {
content: "";
position: absolute;
left: 14.6%;
top: 14.6%;
width: 6px;
height: 6px;
margin: -3px 0 0 -3px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.22);
}
/* CTA dairesi cevresinde cok hafif radyal vurgu */
.fimak-about-card--light .fimak-about-card__arrow {
box-shadow:
0 0 0 8px rgba(227, 6, 19, 0.07),
0 0 0 18px rgba(227, 6, 19, 0.035);
}
/* --- Dark product card --- */
.fimak-about-card--dark {
grid-column: span 5;
color: #ffffff;
/* Antrasit studyo zemini: hafif sicak-koyu gecis + urunun arkasinda cok hafif radyal isik */
background:
radial-gradient(56% 58% at 80% 48%, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0) 72%),
linear-gradient(150deg, #2d2c2e 0%, #1c1b1d 52%, #111112 100%);
}
/* Okunurluk katmani: soldan antrasit -> seffaf (metin alani), ustten cok hafif koyulastirma.
Render'in acik sisli sol-ust kosesini bastirir; urun sagda net kalir. */
.fimak-about-card--dark::before {
content: "";
position: absolute;
inset: 0;
z-index: 2;
background:
linear-gradient(90deg, rgba(22, 22, 24, 0.95) 0%, rgba(22, 22, 24, 0.85) 30%, rgba(22, 22, 24, 0.5) 50%, rgba(22, 22, 24, 0) 68%),
linear-gradient(180deg, rgba(22, 22, 24, 0.35) 0%, rgba(22, 22, 24, 0) 45%);
pointer-events: none;
}
.fimak-about-card--dark .fimak-about-card__content {
width: 60%;
}
/* Metin ile urun arasinda bilincli bosluk: metin kendi alaninda kalir */
.fimak-about-card--dark .fimak-about-card__title,
.fimak-about-card--dark .fimak-about-card__description {
max-width: 100%;
}
.fimak-about-card--dark .fimak-about-card__description {
color: rgba(255, 255, 255, 0.66);
}
.fimak-about-card--dark .fimak-about-card__arrow {
color: var(--fimak-black);
background: #ffffff;
/* Ok, %60 genislikteki icerik kutusuna degil KARTA hizali: icerik sag kenari ile kart sag kenari
arasi = kart * 0.40 = icerik * 66.667%. Boylece ok aciklama metninin ustune binmez. */
right: calc(28px - 66.667%);
bottom: 28px;
}
.fimak-about-card__product-image {
/* Gorsel (img/hakkimizda-sag-alt.png, 1672x941) opak studyo render'i: sol ~%35 bos koyu alan,
sagda firin. Karti tam yukseklikte kaplar; %108 genislik + saga hizalama ile bos sol kenar
kartin disinda kalir, urun ~%20 buyur ve sag tarafta, zemine oturmus durur. */
position: absolute;
top: 0;
right: -3%;
bottom: 0;
z-index: 1;
width: 104%;
height: 100%;
max-height: none;
object-fit: cover;
object-position: right 40%;
pointer-events: none;
transform-origin: 62% 60%;
transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}
.fimak-about-card--dark:hover .fimak-about-card__product-image {
transform: scale(1.03);
}
/* --- General hover --- */
.fimak-about-card:hover .fimak-about-card__arrow {
transform: translate(3px, -3px);
}
/* --- Scroll reveal --- */
[data-about-reveal] {
opacity: 0;
transform: translateY(24px);
transition:
opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}
[data-about-reveal].is-visible {
opacity: 1;
transform: translateY(0);
}
.fimak-about__grid [data-about-reveal]:nth-child(2) {
transition-delay: 80ms;
}
.fimak-about__grid [data-about-reveal]:nth-child(3) {
transition-delay: 140ms;
}
/* --- Tablet --- */
@media (max-width: 1024px) {
.fimak-about__intro {
grid-template-columns: 1fr;
align-items: start;
gap: 28px;
}
.fimak-about__grid {
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: auto;
}
.fimak-about-card--hero {
grid-column: span 12;
min-height: 520px;
}
.fimak-about-card--light,
.fimak-about-card--dark {
grid-column: span 6;
min-height: 350px;
}
}
/* --- Mobile --- */
@media (max-width: 700px) {
.fimak-about {
padding: 72px 18px 64px;
}
.fimak-about__title {
font-size: clamp(36px, 10vw, 48px);
}
.fimak-about__grid {
display: flex;
flex-direction: column;
gap: 14px;
}
.fimak-about-card {
min-height: 390px;
}
.fimak-about-card--hero {
min-height: 500px;
}
.fimak-about-card--light {
min-height: 380px;
}
.fimak-about-card--dark {
min-height: 440px;
}
.fimak-about-card--dark .fimak-about-card__content {
width: 88%;
}
/* icerik %88 -> kart kenarina mesafe = icerik * 13.636% */
.fimak-about-card--dark .fimak-about-card__arrow {
right: calc(28px - 13.636%);
bottom: 28px;
}
/* Aciklama metni ok dugmesinin altina girmesin */
.fimak-about-card__description {
padding-right: 56px;
}
.fimak-about-card__product-image {
top: auto;
left: -32%;
right: auto;
width: 110%;
height: 54%;
object-fit: contain;
object-position: left bottom;
}
.fimak-about-card--dark {
background:
radial-gradient(60% 40% at 30% 78%, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0) 72%),
linear-gradient(150deg, #2d2c2e 0%, #1c1b1d 52%, #111112 100%);
}
/* Mobilde metin bloguna sabit yer: gorsel metnin altina girmez */
.fimak-about-card--dark .fimak-about-card__content {
min-height: 48%;
padding-bottom: 0;
}
.fimak-about-card--dark::before {
background:
linear-gradient(180deg, rgba(22, 22, 24, 0.96) 0%, rgba(22, 22, 24, 0.92) 46%, rgba(22, 22, 24, 0) 64%);
}
}
/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
[data-about-reveal] {
opacity: 1;
transform: none;
transition: none;
}
.fimak-about-card__image,
.fimak-about-card__product-image,
.fimak-about-card__arrow,
.fimak-about__cta-icon {
transition: none;
}
}
/* ------------------------------------------------------------
7b. Urun gruplari (ps)
1 flagship sahne + 4 bagimsiz split sahne. Grid / bento yok.
Urun ritmi: merkez -> sag -> sol -> sag -> sol.
Sahne zeminleri CSS ile; urun sahneleri gercek ![]()
.
Render'lar 1672x941 (16:9) ve kendi studyo zeminlerini tasir:
split sahnelerde gorsel sutunu tam doldurur, yalnizca bos
studyo kenari disarida kalir; urun her zaman tam kadrajda.
Sahneler arasi 8px, radius 0 — gercek sayfa bolumu hissi.
------------------------------------------------------------ */
.ps {
--ps-red: #e30613;
--ps-ink: #1d1d1f;
--ps-gray: #6e6e73;
display: grid;
gap: 8px;
background: #ffffff;
}
/* --- Intro: kompakt --- */
.ps__intro {
width: min(100%, 1440px);
margin-inline: auto;
padding: 0 clamp(16px, 4vw, 72px) clamp(20px, 2.4vw, 36px);
}
.ps__label {
display: inline-flex;
align-items: center;
gap: 12px;
color: var(--ps-ink);
font-size: 17px;
font-weight: 600;
line-height: 1;
}
.ps__label-mark {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--ps-red);
}
.ps__heading {
max-width: 22ch;
margin: clamp(14px, 1.6vw, 24px) 0 0;
color: var(--ps-ink);
font-size: clamp(28px, 2.7vw, 44px);
font-weight: 600;
line-height: 1.08;
letter-spacing: -0.035em;
}
/* --- Ortak metin ogeleri --- */
.ps__title { margin: 0; font-weight: 600; }
.ps__eyebrow {
display: block;
margin-bottom: 10px;
font-size: clamp(14px, 1.05vw, 18px);
font-weight: 600;
letter-spacing: -0.01em;
color: var(--ps-red);
}
.ps__headline {
display: block;
font-size: clamp(30px, 2.7vw, 50px);
font-weight: 600;
line-height: 1.06;
letter-spacing: -0.036em;
}
.ps__desc {
margin: clamp(12px, 1.2vw, 20px) 0 0;
color: var(--ps-gray);
font-size: clamp(15px, 1.1vw, 18px);
line-height: 1.45;
}
.ps__cta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 22px;
margin-top: clamp(18px, 1.8vw, 28px);
}
.ps__btn {
display: inline-flex;
align-items: center;
padding: 9px 20px;
border-radius: 980px;
background: var(--ps-red);
color: #fff;
font-size: clamp(14px, 1.05vw, 16px);
font-weight: 500;
letter-spacing: -0.01em;
text-decoration: none;
transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1), background-color 400ms ease;
}
.ps__btn:hover { transform: translateY(-2px); background: #c4050f; }
.ps__link {
display: inline-flex;
align-items: center;
color: var(--ps-red);
font-size: clamp(14px, 1.05vw, 16px);
font-weight: 500;
letter-spacing: -0.01em;
text-decoration: none;
transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ps__link::after { content: "›"; margin-left: 7px; font-size: 1.2em; line-height: 1; }
.ps__link:hover { transform: translateX(3px); }
/* ------------------------------------------------------------
1. FLAGSHIP — Pisirme Grubu
Gorsel tam genislik (en fazla 1528px), sahne yuksekligi
gorselin oraniyla gelir. Metin, render'in bos ust alanina
(olculen: ust %35.7) biner; olculer --ps-w'ye baglidir, bu
yuzden metin/urun orani her genislikte sabit kalir.
------------------------------------------------------------ */
.ps-flag {
--ps-w: min(100vw, 1528px);
position: relative;
overflow: hidden;
background: linear-gradient(180deg, #06080b 0%, #15171c 100%);
color: #fff;
}
.ps-flag__media { margin: 0; }
.ps-flag__media img {
display: block;
width: var(--ps-w);
height: auto;
margin-inline: auto;
object-fit: contain;
}
/* Ortalama transform ile yapilmaz: bu oge [data-about-reveal] tasir ve
reveal sistemi transform ozelligini kullanir, ikisi cakisirdi. */
.ps-flag__text {
position: absolute;
z-index: 2;
top: 0;
left: 0;
right: 0;
width: var(--ps-w);
margin-inline: auto;
padding: calc(var(--ps-w) * 0.024) 6% 0;
text-align: center;
}
.ps-flag .ps__eyebrow {
margin-bottom: calc(var(--ps-w) * 0.007);
font-size: max(13px, calc(var(--ps-w) * 0.011));
color: rgba(255, 255, 255, 0.62);
}
.ps-flag .ps__headline { font-size: max(26px, calc(var(--ps-w) * 0.029)); }
.ps-flag .ps__desc {
max-width: 52ch;
margin: calc(var(--ps-w) * 0.01) auto 0;
font-size: max(13px, calc(var(--ps-w) * 0.011));
color: rgba(255, 255, 255, 0.64);
}
.ps-flag .ps__cta {
justify-content: center;
margin-top: calc(var(--ps-w) * 0.014);
}
.ps-flag .ps__btn,
.ps-flag .ps__link { font-size: max(13px, calc(var(--ps-w) * 0.0105)); }
.ps-flag .ps__btn { padding: calc(var(--ps-w) * 0.006) calc(var(--ps-w) * 0.014); }
.ps-flag .ps__link { color: #fff; }
/* ------------------------------------------------------------
2-5. DIGER DORT KATEGORI — tek bolum icinde 2x2
Urun gorselleri seffaf PNG (gastro / yogurma / yardimci).
Her biri ![]()
olarak, object-fit: contain ile yerlesir; hicbir
urun kirpilmaz. Konum ve olcek kategori bazli modifier siniflarla
verilir, cunku her render'in seffaf kenar boslugu farkli:
gastro tuval 1122x1402, urun 756x1366 (sol %17.3 sag %15.3 alt %2.4)
yogurma tuval 1254x1254, urun 920x1250 (sol %13.1 sag %13.6 alt %0.3)
yardimci tuval 1122x1402, urun 674x1370 (sol %20.1 sag %19.8 alt %1.9)
Kart yuksekligi genislikle orantili (66vw), boylece urun/kart orani
her ekranda sabit kalir ve urun metin alanina girmez.
------------------------------------------------------------ */
.ps-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.ps-card {
position: relative;
display: flex;
flex-direction: column;
min-height: max(640px, 50vw);
overflow: hidden;
border-radius: 6px;
background: var(--ps-bg, #f5f5f7);
color: var(--ps-ink);
}
.ps-card__text {
position: relative;
z-index: 2;
padding: clamp(30px, 2.8vw, 48px) clamp(22px, 2.6vw, 44px) clamp(20px, 1.8vw, 28px);
text-align: center;
}
.ps-card .ps__headline { font-size: clamp(26px, 2.2vw, 38px); }
.ps-card .ps__desc { max-width: auto; margin-inline: auto; }
.ps-card .ps__cta { justify-content: center; }
/* Urun katmani: metnin altinda, karti kaplar */
.ps-card__media {
position: absolute;
inset: 0;
z-index: 1;
margin: 0;
pointer-events: none;
}
/* Urun: her zaman contain, hicbir kenari kirpilmaz */
.ps-product {
position: absolute;
display: block;
width: auto;
object-fit: contain;
}
/* Gastro: metin ust-sol, urun sag-alt.
Gorunur urun ~ kart yuksekliginin %62'si, genisliginin %46'si */
.ps-card--gastro .ps-card__text,
.ps-card--isleme .ps-card__text { text-align: center; }
.ps-card--gastro .ps__desc,
.ps-card--isleme .ps__desc { margin-inline: 0; }
.ps-card--gastro .ps__cta,
.ps-card--isleme .ps__cta { justify-content: center; }
.ps-product--gastro {
height: 61%;
right: 17.1%;
bottom: 0.5%;
}
/* Yogurma: metin ust-orta, urun alt merkez.
Gorunur urun ~ kart yuksekliginin %58'i, genisliginin %56'si */
.ps-product--yogurma {
height: 58%;
left: 50%;
bottom: 1.3%;
transform: translateX(-50%);
}
/* Yardimci: dikey kabin. Gorunur urun ~ kart yuksekliginin %62'si;
genislik auto, tekerlekler ve ust tamamen gorunur */
.ps-product--yardimci {
height: 62%;
right: 7.1%;
bottom: -0.2%;
}
/* Koyu kart */
.ps-card--yogurma {
--ps-bg: #0e1014;
color: #fff;
}
.ps-card--yogurma .ps__eyebrow { color: rgba(255, 255, 255, 0.62); }
.ps-card--yogurma .ps__desc { color: rgba(255, 255, 255, 0.64); }
.ps-card--yogurma .ps__link { color: #fff; }
/* Kart zeminleri */
.ps-card--gastro { --ps-bg: #efecea; }
.ps-card--isleme { --ps-bg: #eef0f3; }
.ps-card--yardimci { --ps-bg: #f2f5f9; }
/* Isleme: final render henuz yok. Urunun gelecegi alt-sag bolgede
hafif studyo isigi var; sahte urun veya kirik ![]()
yok. */
.ps-card__media--empty {
background:
radial-gradient(40% 34% at 66% 68%, #ffffff 0%, rgba(255, 255, 255, 0) 72%),
radial-gradient(48% 12% at 66% 94%, rgba(29, 41, 61, 0.08) 0%, rgba(29, 41, 61, 0) 74%);
}
/* Dar masaustu (900-1150px): metin blogu orantili kuculmedigi icin
urun bir kademe kucultulur; metin ile urun arasi bosluk korunur. */
@media (min-width: 900px) and (max-width: 1150px) {
.ps-product--gastro { height: 55%; }
.ps-product--yardimci { height: 56%; }
.ps-product--yogurma { height: 52%; }
}
/* ------------------------------------------------------------
Dar tablet ve mobil: 2x2 tek sutuna iner, metin her zaman once.
------------------------------------------------------------ */
@media (max-width: 899px) {
.ps-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
.ps__intro { padding: 0 18px 20px; }
.ps__heading { max-width: none; font-size: clamp(26px, 7.4vw, 34px); }
.ps__heading br { display: none; }
/* Flagship telefonda: metin akista ustte, urun altta */
.ps-flag { display: flex; flex-direction: column; }
.ps-flag__text {
position: static;
order: 1;
width: auto;
transform: none;
padding: 40px 18px 24px;
}
/* Flagship telefonda da kirpilmaz: dogal 16:9, contain */
.ps-flag__media { order: 2; width: 100%; }
.ps-flag__media img { width: 100%; height: auto; object-fit: contain; }
.ps-flag .ps__headline { font-size: clamp(30px, 8.4vw, 40px); }
.ps-flag .ps__eyebrow,
.ps-flag .ps__desc { font-size: 15px; }
.ps-flag .ps__btn { padding: 9px 20px; font-size: 15px; }
.ps-flag .ps__link { font-size: 15px; }
/* Telefonda kart tek sutun; urun orani genislige gore yeniden kurulur */
.ps-card { min-height: clamp(560px, 158vw, 700px); }
.ps-product--gastro { height: 52%; right: -3%; }
.ps-product--yogurma { height: 47%; }
.ps-product--yardimci { height: 49%; right: -4%; }
.ps-card--gastro .ps-card__text,
.ps-card--isleme .ps-card__text { text-align: center; }
.ps-card--gastro .ps__desc,
.ps-card--isleme .ps__desc { margin-inline: auto; }
.ps-card--gastro .ps__cta,
.ps-card--isleme .ps__cta { justify-content: center; }
.ps-card__text { padding: 36px 18px 22px; }
.ps__headline,
.ps-card .ps__headline { font-size: clamp(28px, 7.8vw, 36px); }
}
/* Hareket azaltma */
@media (prefers-reduced-motion: reduce) {
.ps__btn, .ps__link { transition: none; }
.ps__btn:hover, .ps__link:hover { transform: none; }
}
/* ------------------------------------------------------------
7c. Teknoloji sahnesi (fimak "sus" bolumu) — #teknoloji
Scroll ile ilerleyen sahne: daire tam ekrana acilir ve gercek
Fimak uretim fotografini gosterir. Animasyon js/tech-scene.js
(GSAP + ScrollTrigger). Tum kurallar .sus ad alaninda; global
reset / font / body kurali yok, site sistemi bozulmaz.
Akiskan olcu: --fl ile 375px -> 1920px arasi dogrusal buyur.
------------------------------------------------------------ */
.sus {
--fl: calc((100vw - 375px) / 1545);
--sus-ink: #111;
/* --sus-navy: #02102e; */
--sus-ease: cubic-bezier(0.22, 1, 0.36, 1);
position: relative;
background: #fff;
height: 300svh;
min-height: 1920px;
color: var(--sus-ink);
}
.sus__stage {
position: sticky;
top: 0;
display: grid;
width: 100%;
height: 100svh;
min-height: 640px;
overflow: hidden;
isolation: isolate;
}
.sus__bg-gradient {
position: absolute;
pointer-events: none;
left: clamp(12px, calc(12px + 20 * var(--fl)), 32px);
right: clamp(12px, calc(12px + 20 * var(--fl)), 32px);
top: 20px;
bottom: 34px;
background: linear-gradient(177deg, #fff 56.208%, #ffffff4d 95.397%);
}
/* Alt atmosfer isigi */
.sus__landscape {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 29%;
pointer-events: none;
}
.sus__glow {
position: absolute;
inset: auto 0 0 0;
width: 100%;
height: 100%;
display: block;
}
/* Icerik */
.sus__content {
position: relative;
grid-column: 1;
grid-row: 1;
display: grid;
grid-template-rows: 1fr auto 1fr;
width: 100%;
height: 100%;
padding-inline: clamp(24px, calc(24px + 96 * var(--fl)), 120px);
}
.sus__title {
grid-row: 2;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: clamp(20px, calc(20px + 40 * var(--fl)), 60px);
margin: 0;
font-size: clamp(30px, calc(30px + 50 * var(--fl)), 80px);
font-weight: 500;
line-height: 1.1;
letter-spacing: -0.04em;
color: var(--sus-ink);
}
.sus__word {
position: relative;
z-index: 2;
max-width: 9.5em;
text-wrap: balance;
}
.sus__word--left { justify-self: end; text-align: right; }
.sus__word--right { justify-self: start; text-align: left; }
.sus__target {
position: relative;
display: block;
width: clamp(180px, calc(180px + 146 * var(--fl)), 326px);
height: clamp(180px, calc(180px + 146 * var(--fl)), 326px);
}
.sus__ring {
position: absolute;
top: 50%;
left: 50%;
max-width: none;
pointer-events: none;
display: block;
}
.sus__ring--inner { width: 117.79%; }
.sus__ring--outer { width: 188.34%; }
.sus__image {
position: absolute;
top: 50%;
left: 50%;
z-index: 3;
display: block;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 50%;
background: #12212f; /* gorsel yuklenmezse */
}
.sus__scene {
position: absolute;
top: 50%;
left: 50%;
display: block;
height: 125.15%;
width: 223.93%;
max-width: none;
transform: translate(-50%, -50%);
object-fit: cover;
}
.sus__scene--blur { filter: blur(5px); }
.sus__shade {
position: absolute;
inset: 0;
pointer-events: none;
}
.sus__blur {
position: absolute;
inset: 0;
-webkit-mask-image: linear-gradient(180deg, transparent 17.13%, #000 71%);
mask-image: linear-gradient(180deg, transparent 17.13%, #000 71%);
}
.sus__shade-gradient {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 82.87%;
background: linear-gradient(180deg, #02102e00 0%, var(--sus-navy) 90.371%);
}
.sus__caption {
position: relative;
z-index: 2;
grid-row: 3;
align-self: start;
max-width: 376px;
margin: clamp(40px, calc(40px + 37 * var(--fl)), 77px) auto 0;
text-align: center;
font-size: clamp(16px, calc(16px + 4 * var(--fl)), 20px);
line-height: 1.3;
color: rgb(17 17 17 / 0.5);
}
/* Intro: tam ekran gorsel uzerindeki metin */
.sus__intro {
position: relative;
z-index: 4;
grid-column: 1;
grid-row: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
padding: 0 24px 21vh;
text-align: center;
color: #fff;
pointer-events: none;
}
.sus__intro-content {
display: flex;
flex-direction: column;
align-items: center;
}
.sus__brand {
display: flex;
align-items: center;
gap: clamp(20px, calc(20px + 24 * var(--fl)), 44px);
}
.sus__logo {
width: clamp(40px, calc(40px + 20 * var(--fl)), 60px);
height: auto;
border-radius: 12px;
}
.sus__divider {
width: 1px;
height: clamp(40px, calc(40px + 32 * var(--fl)), 72px);
background: rgb(255 255 255 / 0.6);
}
.sus__label {
font-size: clamp(12px, calc(12px + 8.571 * var(--fl)), 20.571px);
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.sus__intro-title {
margin-top: clamp(28px, calc(28px + 8 * var(--fl)), 36px);
font-size: clamp(38px, calc(38px + 38.8 * var(--fl)), 76.8px);
font-weight: 500;
line-height: 1;
letter-spacing: -0.03em;
}
.sus__intro-text {
margin-top: clamp(24px, calc(24px + 16 * var(--fl)), 40px);
max-width: 624px;
font-size: clamp(16px, calc(16px + 4 * var(--fl)), 20px);
line-height: 1.45;
letter-spacing: -0.03em;
color: rgb(255 255 255 / 0.7);
}
/* Asagi kaydir butonu */
.sus__scroll {
position: relative;
z-index: 4;
grid-column: 1;
grid-row: 1;
justify-self: center;
align-self: end;
display: flex;
align-items: center;
gap: 12px;
margin-bottom: clamp(32px, calc(32px + 32 * var(--fl)), 64px);
padding: 12px 18px;
font: inherit;
font-size: 14px;
color: rgb(255 255 255 / 0.78);
background: transparent;
border: 1px solid transparent;
border-radius: 999px;
cursor: pointer;
transition:
color 0.45s var(--sus-ease),
background-color 0.45s var(--sus-ease),
border-color 0.45s var(--sus-ease);
}
.sus__scroll img {
display: block;
filter: invert(1);
transition: transform 0.45s var(--sus-ease);
}
.sus__scroll:hover,
.sus__scroll:focus-visible {
color: #fff;
background: rgb(255 255 255 / 0.08);
border-color: rgb(255 255 255 / 0.2);
}
.sus__scroll:hover img { transform: translateY(3px); }
.sus__scroll:focus-visible { outline: 2px solid #fff; outline-offset: 8px; }
/* GSAP yuklenemezse: sahne statik. Uretim fotografi zemin olur,
metin koyu katman uzerinde okunur kalir. */
.sus--static {
height: auto;
min-height: 0;
}
.sus--static .sus__stage {
position: relative;
height: clamp(520px, 74svh, 780px);
min-height: 0;
background-image:
linear-gradient(180deg, rgba(2, 16, 46, 0.45) 0%, rgba(2, 16, 46, 0.88) 100%),
url("../img/hakkimizda-sol.png");
background-size: cover;
background-position: center;
}
.sus--static .sus__bg-gradient,
.sus--static .sus__landscape,
.sus--static .sus__content,
.sus--static .sus__scroll {
display: none;
}
.sus--static .sus__intro {
justify-content: center;
padding-bottom: 0;
}
/* Mobil */
@media (max-width: 1023.98px) {
.sus__title {
grid-template-columns: 1fr;
justify-items: center;
}
.sus__word--left,
.sus__word--right {
justify-self: center;
text-align: center;
}
.sus__intro { padding-bottom: 21%; }
}
/* Film modu: ?film=1 — scroll yok, sahne tam ekran sabit */
html.is-film,
html.is-film body { overflow: hidden; height: 100%; }
html.is-film .sus { height: 100svh; min-height: 0; }
html.is-film ::-webkit-scrollbar { display: none; }
html.is-film .sus__scroll { cursor: default; }
/* ------------------------------------------------------------
7d. Dunyada Fimak (gmap) — #global-map
Dunya haritasi, ulke pinleri, bolge filtresi, zoom, ulke penceresi.
Akiskan olcu: --fl ile 375px -> 1920px arasi dogrusal buyur.
Tum degiskenler .gmap altina kapatildi; global sizinti yok.
Google Font import edilmez; site fontu (--font-sans) kullanilir.
------------------------------------------------------------ */
.gmap {
--primary: #e10714; /* marka rengi – tek yerden degistir */
--primary-rgb: 41 56 150;
--land: #e6e9eb; /* ulkeler */
--land-pinned: #d5dbdf; /* ihracat yapilan ulkeler */
--ink: #101828;
--muted: #98a2b3;
--body: #475467;
--header-height: 0px; /* bolum sayfa ortasinda; tam dvh kalir */
--side-space: clamp(20px, calc(20px + 60 * var(--fl)), 80px);
--max-width: 1440px;
--fl: calc((100vw - 375px) / 1545);
--ease: cubic-bezier(0.22, 1, 0.36, 1);
position: relative;
z-index: 10;
width: 100%;
max-width: 1920px;
margin-inline: auto;
padding-block: clamp(30px, calc(30px + 30 * var(--fl)), 60px);
overflow: hidden;
background: #fff;
color: var(--ink);
/* site body'sindeki -0.022em ve 1.47 satir yuksekligini notrle */
letter-spacing: normal;
line-height: normal;
}
/* Scroll'da belirme (reveal-move) */
.gmap[data-reveal] {
opacity: 0;
transform: translateY(20px);
transition: opacity 1s var(--ease) .3s, transform 1s var(--ease) .3s;
}
.gmap[data-reveal].is-in {
opacity: 1;
transform: none;
}
/* Metin blogu */
.gmap__info {
position: relative;
z-index: 100;
display: flex;
flex-direction: column;
align-items: center;
gap: 30px;
padding-top: 30px;
pointer-events: none;
}
.gmap__badge {
display: flex;
align-items: center;
gap: 10px;
width: fit-content;
padding: 10px 20px;
border: 1px solid rgb(var(--primary-rgb) / .15);
border-bottom: 0;
border-radius: 9px;
background: linear-gradient(180deg, rgb(var(--primary-rgb) / .06) 0%, rgb(var(--primary-rgb) / 0) 113.79%);
-webkit-backdrop-filter: blur(9px);
backdrop-filter: blur(9px);
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 12px;
font-weight: 500;
color: var(--primary);
}
.gmap__badge-mark {
width: 6px;
height: 11px;
background: var(--primary);
transform: skewX(-30deg);
}
.gmap__info-row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 20px;
width: 100%;
padding-inline: 20px;
}
.gmap__texts {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 5px;
}
.gmap__title {
margin: 0;
font-size: clamp(20px, calc(20px + 28 * var(--fl)), 48px);
font-weight: 400;
line-height: 1;
color: var(--muted);
}
.gmap__title strong {
font-weight: 600;
color: var(--primary);
}
.gmap__divider {
display: none;
width: 100%;
max-width: 280px;
height: 1px;
background: rgb(0 0 0 / .1);
}
.gmap__lead {
margin: 0;
font-size: clamp(18px, calc(18px + 10 * var(--fl)), 28px);
line-height: 1.3;
color: var(--body);
}
.gmap__br {
display: none;
}
.gmap__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
pointer-events: auto;
}
/* Harita */
.gmap__stage {
overflow: hidden;
}
.gmap__frame {
width: 100%;
max-width: clamp(1024px, calc(1024px + 256 * var(--fl)), 1280px);
margin-inline: auto;
padding: 40px var(--side-space);
}
.gmap__viewport {
overflow: hidden;
touch-action: pan-y;
user-select: none;
-webkit-user-select: none;
}
.gmap__viewport.is-zoomed {
cursor: grab;
touch-action: none;
}
.gmap__viewport.is-dragging {
cursor: grabbing;
}
.gmap__svg {
display: block;
width: 100%;
height: auto;
transform-origin: center center;
transition: transform .3s var(--ease);
will-change: transform;
}
.gmap__viewport.is-dragging .gmap__svg {
transition: none;
}
.map-path {
fill: var(--land);
stroke: rgb(255 255 255 / .3);
stroke-width: 1;
vector-effect: non-scaling-stroke;
transition: fill .3s;
}
.map-path.is-pinned {
fill: var(--land-pinned);
cursor: pointer;
}
.map-path.is-dim {
fill: var(--land-pinned);
}
.map-path.is-active,
.map-path.is-hover {
fill: var(--primary) !important;
}
.map-path:focus {
outline: none;
}
.map-path:focus-visible {
fill: var(--primary);
}
/* Pinler */
.marker {
cursor: pointer;
pointer-events: auto;
}
.marker__pin {
fill: #2c2c2c;
stroke: transparent;
stroke-width: 1;
transition: fill .3s, stroke .3s;
}
.marker__tip {
opacity: 0;
transform: translateY(5px);
transition: opacity .3s, transform .3s;
pointer-events: none;
}
.marker__tip-bg {
fill: #fff;
stroke: #000;
stroke-opacity: .1;
stroke-width: 1;
filter: drop-shadow(0 4px 3px rgb(0 0 0 / .07)) drop-shadow(0 2px 2px rgb(0 0 0 / .06));
}
.marker__tip-text {
font: 600 12px var(--font-sans);
fill: #2c2c2c;
letter-spacing: normal;
pointer-events: none;
}
/* Bolge filtresi */
.gmap__filter-wrap {
position: relative;
z-index: 100;
margin-inline: 30px;
}
.gmap__filter {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1px;
padding: 4px;
overflow-x: auto;
border: 2px solid rgb(0 0 0 / .05);
border-radius: 10px;
background: #fff;
scrollbar-width: thin;
scrollbar-color: var(--primary) rgb(var(--primary-rgb) / .2);
}
.gmap__filter::-webkit-scrollbar {
height: 3px;
}
.gmap__filter::-webkit-scrollbar-track {
background: rgb(var(--primary-rgb) / .2);
}
.gmap__filter::-webkit-scrollbar-thumb {
background: var(--primary);
}
.gmap__filter-btn {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
height: clamp(35px, calc(35px + 15 * var(--fl)), 50px);
padding: 8px clamp(24px, calc(24px + 12 * var(--fl)), 36px);
border: 0;
border-radius: 8px;
background: transparent;
font: 600 12px/1.75 var(--font-sans);
letter-spacing: normal;
color: var(--ink);
cursor: pointer;
transition: background-color .3s, color .3s;
}
.gmap__filter-btn.is-active {
background: var(--primary);
color: #fff;
}
.gmap__filter-btn:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
.gmap__swipe {
position: absolute;
top: 6px;
right: 6px;
bottom: 6px;
display: flex;
align-items: center;
justify-content: flex-end;
width: 56px;
padding-right: 6px;
border-radius: 0 8px 8px 0;
background: linear-gradient(90deg, rgb(255 255 255 / 0), #fff 55%);
color: var(--primary);
pointer-events: none;
transition: opacity .3s;
}
.gmap__swipe svg {
width: 20px;
animation: gmap-swipe 1.2s ease-in-out infinite;
}
.gmap__filter-wrap.is-scrolled .gmap__swipe {
opacity: 0;
}
@keyframes gmap-swipe {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(-6px); }
}
/* Yakinlastirma */
.gmap__zoom {
position: absolute;
right: 40px;
bottom: 20px;
z-index: 500;
display: none;
align-items: center;
gap: 4px;
padding: 4px;
border: 2px solid rgb(0 0 0 / .05);
border-radius: 10px;
background: #fff;
box-shadow: 0 1px 2px rgb(0 0 0 / .05);
}
.gmap__zoom-btn {
display: flex;
align-items: center;
justify-content: center;
width: clamp(35px, calc(35px + 15 * var(--fl)), 50px);
height: clamp(35px, calc(35px + 15 * var(--fl)), 50px);
border: 2px solid transparent;
border-radius: 8px;
background: #fff;
color: #000;
cursor: pointer;
transition: background-color .3s, color .3s;
}
.gmap__zoom-btn svg {
width: 16px;
}
.gmap__zoom-btn:disabled {
opacity: .5;
pointer-events: none;
}
.gmap__zoom-btn:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
/* Ulke penceresi */
.cmodal {
/* sitedeki "* { margin: 0 }" reset'i dialog'un varsayilan
margin:auto ortalamasini eziyor; burada geri veriliyor */
margin: auto;
width: 94vw;
max-width: 1040px;
max-height: 90vh;
padding: 24px;
border: 0;
border-radius: 24px;
background: #fff;
color: var(--ink);
letter-spacing: normal;
line-height: normal;
box-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);
}
.cmodal::backdrop {
background: rgb(16 24 40 / .55);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
.cmodal[open] {
animation: gmap-modal-in .35s var(--ease);
}
@keyframes gmap-modal-in {
from { opacity: 0; transform: translateY(16px) scale(.98); }
to { opacity: 1; transform: none; }
}
.cmodal__head {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 18px;
border-bottom: 1px solid rgb(0 0 0 / .05);
}
.cmodal__heading {
display: flex;
align-items: center;
gap: 12px;
}
.cmodal__dot {
width: 10px;
height: 10px;
flex-shrink: 0;
border-radius: 50%;
background: #528a2c;
}
.cmodal__title {
margin: 0;
font-size: 22px;
font-weight: 700;
letter-spacing: -0.02em;
}
.cmodal__close {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: 0;
border-radius: 50%;
background: transparent;
color: #667085;
cursor: pointer;
transition: background-color .2s, color .2s;
}
.cmodal__close svg {
width: 22px;
}
.cmodal__close:hover {
background: rgb(0 0 0 / .05);
color: var(--ink);
}
.cmodal__body {
max-height: 72vh;
padding-top: 20px;
overflow-y: auto;
scrollbar-width: thin;
}
/* Ulke icerigi: kart listesi */
.cmodal__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 16px;
}
.cmodal__card {
display: flex;
flex-direction: column;
gap: 6px;
padding: 16px;
border: 1px solid rgb(0 0 0 / .06);
border-radius: 14px;
background: #f9fafb;
}
.cmodal__card-title {
margin: 0;
font-size: 16px;
font-weight: 600;
}
.cmodal__card-meta {
margin: 0;
font-size: 14px;
color: rgb(0 0 0 / .6);
}
/* Ulke icerigi bossa */
.cmodal__empty {
display: flex;
flex-direction: column;
align-items: center;
padding: 44px 20px;
text-align: center;
}
.cmodal__empty-icon {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
margin-bottom: 16px;
border-radius: 50%;
background: rgb(var(--primary-rgb) / .1);
color: var(--primary);
}
.cmodal__empty-icon svg {
width: 26px;
}
.cmodal__empty h4 {
margin: 0 0 8px;
font-size: 18px;
font-weight: 700;
}
.cmodal__empty p {
max-width: 440px;
margin: 0 0 24px;
font-size: 14px;
line-height: 1.6;
color: rgb(0 0 0 / .6);
}
/* Responsive — gmap bolumune ait tum media query'ler */
@media (max-width: 479.98px) {
.gmap__info-row {
flex-direction: column;
justify-content: center;
gap: 30px;
}
.gmap__texts {
align-items: center;
text-align: center;
}
}
@media (min-width: 640px) {
.cmodal {
padding: 32px;
border-radius: 32px;
}
.cmodal__head {
padding-bottom: 24px;
}
.cmodal__title {
font-size: 26px;
}
.cmodal__close {
width: 40px;
height: 40px;
}
.cmodal__close svg {
width: 24px;
}
.cmodal__body {
padding-top: 24px;
}
}
@media (min-width: 768px) {
.gmap__swipe {
display: none;
}
}
@media (min-width: 1024px) {
.gmap__filter-btn {
font-size: 14px;
}
}
/* Masaustu: harita tam ekran, metin sol altta, filtre ve zoom sag altta */
@media (min-width: 1280px) {
.gmap {
display: grid;
height: calc(100dvh - var(--header-height));
min-height: 720px;
max-height: 880px;
}
.gmap__info {
position: absolute;
bottom: 9%;
left: 50%;
align-items: flex-start;
gap: 20px;
width: 100%;
max-width: var(--max-width);
padding: 0 var(--side-space);
transform: translateX(-50%);
}
.gmap__badge {
font-size: 12px;
letter-spacing: .025em;
}
.gmap__info-row,
.gmap__texts {
display: contents;
}
.gmap__title {
order: 1;
margin-bottom: clamp(10px, calc(10px + 10 * var(--fl)), 20px);
line-height: 1.12;
}
.gmap__actions {
order: 2;
margin-bottom: 20px;
}
.gmap__divider {
display: block;
order: 3;
margin-top: clamp(15px, calc(15px + 15 * var(--fl)), 30px);
margin-bottom: clamp(10px, calc(10px + 10 * var(--fl)), 20px);
}
.gmap__lead {
order: 4;
}
.gmap__br {
display: inline;
}
.gmap__stage {
display: flex;
align-items: center;
height: 100%;
}
.gmap__frame {
max-width: 1120px;
padding-block: 20px;
}
.gmap__filter-wrap {
position: absolute;
right: 220px;
bottom: 20px;
margin: 0;
}
.gmap__filter-btn:hover:not(.is-active) {
background: rgb(var(--primary-rgb) / .3);
}
.gmap__zoom {
display: flex;
}
.gmap__zoom-btn:hover {
background: var(--primary);
color: #fff;
}
/* Masaustunde pin etiketi hover'da acilir */
.marker.is-hover .marker__pin {
fill: #fff;
stroke: var(--primary);
}
.marker.is-hover .marker__tip {
opacity: 1;
transform: none;
}
}
@media (prefers-reduced-motion: reduce) {
.gmap[data-reveal] {
opacity: 1;
transform: none;
transition: none;
}
.gmap__svg,
.marker__tip,
.map-path {
transition: none;
}
.gmap__swipe svg,
.cmodal[open] {
animation: none;
}
}
/* ------------------------------------------------------------
7e. Haberler slider (news)
Kutuphanesiz slider: yerel kaydirma + ok butonlari + surukleme.
Akiskan olcu: --fl ile 375px -> 1920px arasi dogrusal buyur.
Tum degiskenler .news altina kapatildi; global sizinti yok.
Google Font import edilmez; site fontu (--font-sans) kullanilir.
Gorsel dil: beyaz zemin, sakin tipografi, sessiz kontroller.
------------------------------------------------------------ */
.news {
--news-bg: var(--surface); /* beyaz zemin */
--news-ink: var(--text); /* birincil metin */
--news-dim: var(--text-secondary); /* destekleyici metin */
--news-faint: var(--text-tertiary); /* tarih gibi ikincil bilgi */
--news-line: var(--border); /* ince kenarlik */
--fl: calc((100vw - 375px) / 1545);
--ease: cubic-bezier(0.22, 1, 0.36, 1);
position: relative;
z-index: 10;
display: block;
width: 100%;
padding-top: clamp(50px, calc(60px + 20 * var(--fl)), 80px);
padding-bottom: clamp(50px, calc(20px + 60 * var(--fl)), 80px);
background: var(--news-bg);
color: var(--news-ink);
overflow: hidden;
/* site body'sindeki -0.022em ve 1.47 satir yuksekligini notrle */
letter-spacing: normal;
line-height: normal;
}
.news__container {
position: relative;
width: 100%;
max-width: 1920px;
margin-inline: auto;
padding-left: 60px; /* sagda bosluk yok: slider kenara tasar */
}
/* Scroll'da belirme — yalniz bu bolumun icinde */
.news [data-reveal] {
opacity: 0;
transform: translateY(30px);
transition: opacity .9s var(--ease) .15s, transform .9s var(--ease) .15s;
}
.news [data-reveal].is-in {
opacity: 1;
transform: none;
}
/* Baslik satiri */
.news__head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 25px;
padding-right: 60px;
padding-bottom: clamp(32px, calc(32px + 20 * var(--fl)), 52px);
}
/* Tek guclu headline + soluk destek metni */
.news__intro {
display: flex;
flex-direction: column;
gap: clamp(8px, calc(8px + 4 * var(--fl)), 12px);
max-width: 640px;
}
.news__heading {
margin: 0;
font-size: clamp(28px, calc(28px + 28 * var(--fl)), 56px);
font-weight: 600;
line-height: 1.05;
letter-spacing: -0.035em;
color: var(--news-ink);
text-wrap: balance;
}
.news__sub {
margin: 0;
font-size: clamp(15px, calc(15px + 3 * var(--fl)), 18px);
font-weight: 400;
line-height: 1.5;
letter-spacing: -0.012em;
color: var(--news-dim);
text-wrap: balance;
}
.news__controls {
display: flex;
flex-shrink: 0;
align-items: center;
gap: 12px;
padding-bottom: 2px;
}
.news__arrows {
display: flex;
align-items: center;
gap: 8px;
}
/* Sessiz ok butonlari: dolgu yok, ince kenarlik, dusuk kontrast */
.news__arrow {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
padding: 0;
border: 1px solid var(--news-line);
border-radius: 50%;
background: transparent;
color: var(--news-dim);
cursor: pointer;
transition: border-color .4s var(--ease), color .4s var(--ease), background-color .4s var(--ease);
}
.news__arrow svg {
width: 15px;
transition: transform .4s var(--ease);
}
.news__arrow:disabled {
border-color: rgb(0 0 0 / .08);
color: rgb(0 0 0 / .22);
background: transparent;
pointer-events: none;
}
.news__arrow:focus-visible {
outline: 1px solid var(--news-ink);
outline-offset: 3px;
}
/* "Tum Haberler": kucuk, sade; hover'da yazi yukari kayar */
/* Slider */
.news__slider {
width: 100%;
}
.news__track {
display: flex;
gap: 27px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
overscroll-behavior-x: contain;
padding-right: 60px;
cursor: grab;
}
.news__track::-webkit-scrollbar {
display: none;
}
.news__track:focus-visible {
outline: 1px solid rgb(0 0 0 / .4);
outline-offset: 6px;
border-radius: 12px;
}
.news__track.is-dragging {
cursor: grabbing;
scroll-snap-type: none;
scroll-behavior: auto;
}
.news__track.is-dragging .news__card {
pointer-events: none;
}
.news__slide {
flex: 0 0 auto;
width: min(1030px, 85%);
scroll-snap-align: start;
}
.news__card {
display: grid;
grid-template-columns: 460px auto;
align-items: center;
gap: clamp(20px, calc(20px + 36 * var(--fl)), 56px);
height: 100%;
color: inherit;
text-decoration: none;
-webkit-user-drag: none;
}
.news__card:focus-visible {
outline: 1px solid var(--news-ink);
outline-offset: 6px;
border-radius: 14px;
}
.news__media {
position: relative;
overflow: hidden;
border-radius: 12px;
background: var(--surface-alt);
/* Yukseklik gorselde degil kutuda: kapagi olmayan haberde kart
cokmez, serit boyunca kartlar ayni boyda kalir */
height: 360px;
}
.news__media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .6s var(--ease);
-webkit-user-drag: none;
user-select: none;
}
/* Beyaz zeminde koyu gecis yerine fotografin kenarini tanimlayan ince cerceve */
.news__shade {
position: absolute;
inset: 0;
pointer-events: none;
border-radius: inherit;
box-shadow: inset 0 0 0 1px rgb(0 0 0 / .07);
transition: box-shadow .5s var(--ease);
}
.news__body {
display: flex;
flex-direction: column;
justify-content: center;
gap: 14px;
max-width: 493px;
height: 100%;
}
/* Tarih: kucuk, soluk, genis harf araligi */
.news__date {
font-size: 12px;
font-weight: 500;
line-height: 1.4;
letter-spacing: 0.08em;
color: var(--news-faint);
transition: color .4s var(--ease);
}
/* Baslik: en fazla iki satir, siki satir yuksekligi */
.news__title {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
margin: 0;
font-size: clamp(18px, calc(18px + 8 * var(--fl)), 26px);
font-weight: 600;
line-height: 1.25;
letter-spacing: -0.022em;
color: var(--text-footer-link);
transition: color .4s var(--ease);
}
/* CTA: pill degil, sade metin linki + minimal chevron */
/* Hover — yalniz fareli cihazlar */
@media (hover: hover) and (min-width: 768px) {
.news__arrow:hover {
border-color: var(--news-dim);
color: var(--news-ink);
}
.news__arrow[data-news-prev]:hover svg {
transform: translateX(-2px);
}
.news__arrow[data-news-next]:hover svg {
transform: translateX(2px);
}
/* Gorselde cok hafif yaklasma */
.news__card:hover .news__media img {
transform: scale(1.02);
}
.news__card:hover .news__shade {
box-shadow: inset 0 0 0 1px rgb(0 0 0 / .14);
}
.news__card:hover .news__date {
color: var(--news-dim);
}
.news__card:hover .news__title {
color: var(--news-ink);
}
/* Kart hover edilince CTA chevron'i da kayar */
.news__card:hover .cta--link::after {
transform: translateX(3px);
}
}
/* Responsive — news bolumune ait tum media query'ler */
@media (max-width: 1023.98px) {
.news__head {
align-items: flex-end;
}
.news__intro {
padding-right: 30px;
}
.news__card {
grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
}
.news__media {
height: 300px;
}
}
@media (max-width: 767.98px) {
.news__container {
padding-inline: 30px 0;
}
.news__head {
padding-right: 30px;
padding-bottom: 28px;
}
.news__track {
padding-right: 30px;
}
.news__card {
grid-template-columns: 1fr;
align-items: start;
}
.news__media {
height: 260px;
}
.news__body {
padding-top: 16px;
}
.news__title {
color: var(--news-ink);
}
.news__slide {
width: min(460px, 85%);
}
}
@media (max-width: 639.98px) {
.news__container {
padding-left: 20px;
}
.news__head {
flex-direction: column;
align-items: flex-start;
gap: 20px;
padding-right: 20px;
}
.news__intro {
padding-right: 0;
}
.news__track {
padding-right: 20px;
gap: 16px;
}
.news__media {
height: 220px;
}
}
@media (prefers-reduced-motion: reduce) {
.news [data-reveal] {
opacity: 1;
transform: none;
transition: none;
}
.news__track {
scroll-behavior: auto;
}
.news__media img {
transition: none;
}
}
/* ------------------------------------------------------------
8. Footer
Iki panel: solda koyu marka alani, sagda acik icerik alani.
Olculer akiskan: --fu birimi 375px ekranda 0, 1920px'de 1 olur;
calc(MIN + FARK * var(--fu)) kalibiyla her deger birlikte buyur.
Media query'leri "9. Responsive" bolumunde.
------------------------------------------------------------ */
.footer {
--fu: calc(clamp(0px, 100vw - 375px, 1545px) / 1545);
--f-side: calc(20px + 12 * var(--fu));
--f-ink: var(--text);
--f-accent: var(--brand);
--f-dark: #1d1d1f;
overflow: hidden;
margin-top: 0;
padding: 0;
border-top: 0;
background-color: var(--surface-alt);
color: var(--text-secondary);
font-size: 14px;
line-height: 1.47059;
}
.footer *,
.footer *::before,
.footer *::after {
box-sizing: border-box;
}
.footer :where(p, h2, h3, ul) {
margin: 0;
padding: 0;
}
.footer :where(ul) {
list-style: none;
}
.footer :where(a) {
color: inherit;
text-decoration: none;
}
.footer :where(img, svg) {
display: block;
max-width: 100%;
}
.footer :where(button, input) {
font: inherit;
color: inherit;
}
.footer img[hidden] {
display: none;
}
.footer :where(a, button):focus-visible {
outline: 2px solid currentColor;
outline-offset: 4px;
border-radius: 4px;
}
.footer__sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.footer__icon {
width: 1em;
height: 1em;
flex-shrink: 0;
}
.footer__icon--line {
fill: none;
stroke: currentColor;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.footer__icon--solid {
fill: currentColor;
}
.footer__container {
width: 100%;
max-width: 1680px;
margin-inline: auto;
padding-inline: var(--f-side);
}
.footer__grid {
display: grid;
}
/* --- Sol panel (koyu zemin) --- */
.footer__brand {
position: relative;
isolation: isolate;
padding-top: calc(60px + 50 * var(--fu));
padding-bottom: calc(40px + 4 * var(--fu));
color: #fff;
}
/* Zemin 100vw genisliginde; her ekranda sol kenara kadar uzanir */
.footer__brand-bg {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
z-index: -1;
width: 100vw;
transform: translateX(-50%);
background: linear-gradient(180deg, #2b2b2f 0%, var(--f-dark) 58%);
}
/* Kirmizi parlama: 100vw zeminin degil, gorunur panelin olculerine gore konumlanir */
.footer__brand::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: radial-gradient(90% 65% at 85% 0%, rgba(226, 6, 19, 0.42), transparent 66%);
pointer-events: none;
}
.footer__brand-inner {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
}
.footer__logo {
display: flex;
align-items: center;
gap: calc(12px + 4 * var(--fu));
width: fit-content;
}
.footer__logo img {
width: calc(165px + 16 * var(--fu));
height: auto;
}
.footer__logo-text {
font-size: calc(26px + 12 * var(--fu));
font-weight: 700;
line-height: 1;
letter-spacing: 0.04em;
}
.footer__about {
margin-top: calc(20px + 46 * var(--fu));
font-size: calc(16px + 4 * var(--fu));
font-weight: 500;
line-height: 1.35;
letter-spacing: -0.022em;
color: rgba(255, 255, 255, 0.6);
}
.footer__about strong {
font-weight: inherit;
color: #fff;
}
.footer__contacts {
display: flex;
flex-wrap: wrap;
gap: calc(20px + 20 * var(--fu));
margin-top: calc(20px + 20 * var(--fu));
}
.footer__contact {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: calc(14px + 6 * var(--fu));
min-width: 0;
}
.footer__contact .footer__icon {
font-size: calc(26px + 6 * var(--fu));
color: rgba(255, 255, 255, 0.5);
transition: color 0.3s ease;
}
.footer__contact-label {
display: block;
font-size: calc(14px + 3 * var(--fu));
line-height: 1.33;
color: rgba(255, 255, 255, 0.5);
}
.footer__contact-value {
position: relative;
display: block;
margin-top: calc(4px + 3 * var(--fu));
font-size: calc(22px + 8 * var(--fu));
font-weight: 500;
line-height: 1.5;
letter-spacing: -0.022em;
}
.footer__contact-value--mail {
font-size: calc(19px + 9 * var(--fu));
}
/* Alt cizgi: uzerine gelince soldan dolar, ayrilinca saga dogru kapanir */
.footer__contact-value::before {
content: "";
position: absolute;
right: 0;
bottom: 0;
width: 0;
height: 1px;
border-radius: 999px;
background-color: #fff;
transition: width 0.2s ease;
}
.footer__social {
margin-top: calc(30px + 30 * var(--fu));
}
.footer__social-title {
font-size: calc(14px + 3 * var(--fu));
line-height: 1.33;
color: rgba(255, 255, 255, 0.5);
}
.footer__social-list {
display: flex;
align-items: center;
gap: 20px;
margin-top: calc(12px + 5 * var(--fu));
}
.footer__social-list a {
position: relative;
display: flex;
font-size: calc(20px + 4 * var(--fu));
color: rgba(255, 255, 255, 0.4);
transition: color 0.3s ease;
}
/* Dokunma alanini gorunumu degistirmeden buyutur */
.footer__social-list a::after {
content: "";
position: absolute;
inset: -10px;
}
.footer__copyright {
font-size: calc(13px + 3 * var(--fu));
line-height: 1.66;
}
.footer__copyright--brand {
display: none;
margin-top: calc(20px + 20 * var(--fu));
color: rgba(255, 255, 255, 0.4);
}
.footer__copyright--bottom {
color: var(--text-tertiary);
}
/* --- Sag panel (acik zemin) --- */
.footer__main {
min-width: 0;
}
.footer__map-wrap {
padding-top: calc(16px + 16 * var(--fu));
}
.footer__map {
position: relative;
height: calc(240px + 109 * var(--fu));
overflow: hidden;
border-radius: calc(14px + 10 * var(--fu));
background-color: rgba(0, 0, 0, 0.05);
}
.footer__map-img {
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: center;
mix-blend-mode: darken;
opacity: 0.8;
}
/* Harita yer tutucusu: gercek harita tiklanana kadar bu cizim duruyor */
.footer__map-fallback {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
}
.footer__map.is-fallback .footer__map-fallback {
display: block;
}
.footer__pin {
position: absolute;
top: 44%;
left: 39%;
width: calc(50px + 16 * var(--fu));
aspect-ratio: 1;
transform: translate(-50%, -50%);
border-radius: 50%;
background-color: rgba(226, 6, 19, 0.16);
}
.footer__pin::before {
content: "";
position: absolute;
inset: 0;
width: 26%;
height: 26%;
margin: auto;
border-radius: 50%;
background-color: var(--f-accent);
}
.footer__pin::after {
content: "";
position: absolute;
inset: 0;
border: 1px solid rgba(226, 6, 19, 0.4);
border-radius: 50%;
animation: footer-pin-pulse 2.6s ease-out infinite;
}
.footer .footer__pin:focus-visible {
outline: 2px solid var(--f-accent);
outline-offset: 3px;
border-radius: 50%;
}
.footer__pin-label {
position: absolute;
top: 50%;
left: calc(100% + 12px + 13 * var(--fu));
transform: translateY(-50%);
padding: calc(7px + 3 * var(--fu)) calc(14px + 6 * var(--fu));
border-radius: 999px;
background-color: var(--surface);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
font-size: calc(12px + 1 * var(--fu));
font-weight: 600;
line-height: 2;
letter-spacing: -0.016em;
white-space: nowrap;
color: var(--f-ink);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.footer__pin:focus-visible .footer__pin-label {
opacity: 1;
}
@keyframes footer-pin-pulse {
0% {
transform: scale(0.6);
opacity: 0.9;
}
100% {
transform: scale(1.6);
opacity: 0;
}
}
.footer__body {
padding-top: calc(40px + 5 * var(--fu));
padding-bottom: calc(32px + 14 * var(--fu));
}
/* --- E-bulten --- */
.footer__newsletter-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: calc(16px + 4 * var(--fu)) calc(20px + 11 * var(--fu));
}
.footer__newsletter-title {
display: flex;
flex: 0 0 auto;
align-items: center;
gap: calc(10px + 4 * var(--fu));
color: var(--f-ink);
}
.footer__newsletter-title .footer__icon {
font-size: calc(22px + 6 * var(--fu));
}
.footer__newsletter-title h2 {
font-size: calc(19px + 5 * var(--fu));
font-weight: 600;
line-height: 1.5;
letter-spacing: -0.022em;
}
.footer__field {
display: flex;
flex: 1 1 340px;
align-items: center;
gap: calc(16px + 7 * var(--fu));
min-width: 0;
}
.footer__input {
flex: 1 1 0;
min-width: 0;
height: calc(46px + 10 * var(--fu));
padding: 0 calc(20px + 18 * var(--fu));
border: 1px solid var(--border);
border-radius: 999px;
background-color: var(--surface);
font-size: calc(15px + 2 * var(--fu));
line-height: 1.66;
letter-spacing: -0.022em;
color: var(--text);
outline: none;
transition: border-color 0.3s ease;
}
.footer__input::placeholder {
color: var(--text-muted);
opacity: 1;
}
.footer__input:focus {
border-color: var(--f-accent);
}
.footer__input:focus-visible {
outline: 2px solid var(--f-accent);
outline-offset: 0;
}
.footer__input[aria-invalid="true"] {
border-color: var(--f-accent);
}
.footer__submit {
flex-shrink: 0;
width: calc(150px + 45 * var(--fu));
height: calc(46px + 10 * var(--fu));
padding: 0;
border: 0;
border-radius: 999px;
background-color: var(--f-accent);
font-size: calc(16px + 3 * var(--fu));
font-weight: 600;
line-height: 1.5;
letter-spacing: -0.022em;
color: #fff;
cursor: pointer;
transition: background-color 0.3s ease;
}
.footer .footer__submit:focus-visible {
outline: 2px solid var(--f-ink);
outline-offset: 2px;
border-radius: 999px;
}
.footer__consent {
display: flex;
align-items: center;
gap: calc(8px + 4 * var(--fu));
width: fit-content;
margin-top: calc(6px + 5 * var(--fu));
padding-block: 4px;
font-size: 13px;
color: var(--text-tertiary);
cursor: pointer;
}
.footer__consent-box {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
border: 1px solid var(--border);
border-radius: 50%;
transition: border-color 0.3s ease;
}
.footer__consent-box::after {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background-color: var(--f-accent);
opacity: 0;
transition: opacity 0.3s ease;
}
.footer__consent input:checked+.footer__consent-box {
border-color: var(--f-accent);
}
.footer__consent input:checked+.footer__consent-box::after {
opacity: 1;
}
.footer__consent input:focus-visible+.footer__consent-box {
outline: 2px solid var(--f-accent);
outline-offset: 3px;
}
.footer__status {
min-height: 0;
font-size: 13px;
line-height: 1.5;
}
.footer__status:not(:empty) {
margin-top: 8px;
}
.footer__status[data-type="error"] {
color: var(--brand-dark);
}
.footer__status[data-type="success"] {
color: #0f6b45;
}
/* --- Menuler --- */
.footer__menus {
display: grid;
margin-top: calc(40px + 5 * var(--fu));
}
.footer__menu:not(:last-child) {
border-bottom: 1px solid var(--border);
}
.footer__menu-toggle {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: calc(16px + 6 * var(--fu)) 0;
border: 0;
background: none;
font-size: calc(17px + 5 * var(--fu));
font-weight: 600;
line-height: 1.5;
letter-spacing: -0.022em;
text-align: left;
color: var(--f-ink);
cursor: pointer;
}
.footer__menu-toggle .footer__icon {
font-size: 18px;
stroke-width: 2;
transition: transform 0.3s ease;
}
.footer__menu.is-open .footer__menu-toggle .footer__icon {
transform: scaleY(-1);
}
/* Yukseklik animasyonu: grid satiri 0fr <-> 1fr */
.footer__menu-panel {
display: grid;
grid-template-rows: 1fr;
transition: grid-template-rows 0.3s ease;
}
.footer__menu-panel-inner {
min-height: 0;
overflow: hidden;
}
.footer__menu-list {
display: flex;
flex-direction: column;
gap: calc(12px + 6 * var(--fu));
padding-bottom: calc(16px + 6 * var(--fu));
}
.footer__menu-list a {
display: flex;
align-items: center;
gap: calc(8px + 10 * var(--fu));
font-size: calc(14px + 3 * var(--fu));
line-height: 1.66;
letter-spacing: -0.016em;
color: var(--text-footer-link);
transition: color 0.3s ease;
}
.footer__menu-list a::before {
content: "";
flex-shrink: 0;
width: calc(6px + 3 * var(--fu));
height: calc(6px + 3 * var(--fu));
border-radius: 50%;
background-color: var(--border);
transition: background-color 0.3s ease;
}
/* --- Alt satir --- */
.footer__bottom {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: calc(24px + 30 * var(--fu));
margin-top: 24px;
padding-top: calc(26px + 4 * var(--fu));
border-top: 1px solid var(--border);
}
.footer__legal {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: calc(10px + 6 * var(--fu)) calc(20px + 30 * var(--fu));
font-size: calc(13px + 3 * var(--fu));
line-height: 1.66;
letter-spacing: -0.016em;
color: var(--text-secondary);
}
.footer__legal a {
background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
transition: background-size 0.3s ease, color 0.3s ease;
}
/* --- Ajans imzasi (Stick Reklam Ajansi) --- */
.footer__signature {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12px;
line-height: 1;
letter-spacing: -0.012em;
white-space: nowrap;
color: var(--text-tertiary);
transition: color 0.3s ease;
}
.footer__signature-mark {
width: 7px;
height: 7px;
flex-shrink: 0;
border-radius: 2px;
background-color: var(--f-accent);
transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.footer__signature-brand {
font-weight: 600;
color: var(--text-footer-link);
transition: color 0.3s ease;
}
/* --- Uzerine gelme efektleri (yalnizca fare/trackpad olan cihazlarda) --- */
@media (hover: hover) {
.footer__contact:hover .footer__icon {
color: var(--f-accent);
}
.footer__contact:hover .footer__contact-value::before {
right: auto;
left: 0;
width: 100%;
}
.footer__social-list a:hover {
color: var(--f-accent);
}
.footer__pin:hover .footer__pin-label {
opacity: 1;
}
.footer__input:hover {
border-color: var(--text-muted);
}
.footer__submit:hover {
background-color: var(--brand-dark);
}
.footer__menu-list a:hover {
color: var(--f-ink);
}
.footer__menu-list a:hover::before {
background-color: var(--f-accent);
}
.footer__legal a:hover {
background-size: 100% 1px;
color: var(--f-ink);
}
.footer__signature:hover .footer__signature-mark {
transform: rotate(135deg) scale(1.15);
}
.footer__signature:hover .footer__signature-brand {
color: var(--f-accent);
}
}
/* Dokunmatik ekranda hover olmadigi icin etiket hep gorunur */
@media (hover: none) {
.footer__pin-label {
opacity: 1;
}
}
/* --- Kaydirinca belirme (js/footer.js .is-visible ekler) --- */
html.js .footer [data-reveal] {
opacity: 0;
transform: translateY(var(--translate-y, 24px));
transition:
opacity var(--duration, 0.8s) ease,
transform var(--duration, 0.8s) cubic-bezier(0.22, 1, 0.36, 1);
}
html.js .footer [data-reveal].is-visible {
opacity: 1;
transform: none;
}
/* ------------------------------------------------------------
9. Responsive
Tum media query'ler dosyanin sonunda; boylece ustteki
kurallari ozgulluk artirmadan ezerler.
------------------------------------------------------------ */
@media (max-width: 734px) {
/* Masaustu nav ve hover tabanli mega menu yerine mobil katman devreye girer */
.mega-menu,
.site-nav,
.lang-select {
display: none;
}
.nav-menu-toggle { display: flex; }
/* Logo solda, eylemler sagda; yukseklik degismez */
.nav-wrap { padding-inline: 20px; }
.nav-actions { gap: 4px; }
.search-inner {
padding: 24px 20px 32px;
}
.search-input {
font-size: 22px;
}
/* Hero: dar kenar boslugu, akici baslik, medya tam genislik */
.hero-slider {
--hero-media-w: calc(100vw - 32px);
}
.hero-slide {
min-height: 0;
}
.hero-product,
.hero-media {
flex: none;
}
.hero-media {
aspect-ratio: 16 / 9;
max-height: none;
}
.hero-slide {
padding: 40px 16px 48px;
}
.hero-title {
font-size: clamp(36px, 10vw, 54px);
letter-spacing: -1.2px;
}
.hero-subtitle {
font-size: 21px;
letter-spacing: -0.3px;
}
.hero-title br,
.hero-subtitle br {
display: none;
}
.hero-product {
margin-top: 24px;
}
.hero-media {
border-radius: 16px;
}
/* CTA'lar kompakt; sigmazsa alt alta */
.hero-content .links-container {
flex-wrap: wrap;
gap: 12px 20px;
}
.links-container {
gap: 24px;
margin-bottom: 32px;
}
.hero-dots {
bottom: 20px;
}
/* Oklar dokunmatikte gizli, kaydirma ve noktalar calisir */
.hero-arrow {
display: none;
}
}
@media (min-width: 735px) and (max-width: 1200px) {
.hero-slider {
--hero-media-w: calc(100vw - 64px);
}
.hero-slide {
padding-left: 24px;
padding-right: 24px;
}
.hero-title {
font-size: 48px;
letter-spacing: -1.5px;
}
.hero-subtitle {
font-size: 24px;
}
}
@media (max-width: 1068px) {
.band-title {
font-size: 44px;
letter-spacing: -1.4px;
}
.band-text {
font-size: 21px;
}
}
@media (max-width: 734px) {
.band {
padding: 88px 20px;
}
.band--tight {
padding: 64px 20px;
}
.band-head {
margin-bottom: 40px;
}
.band-title {
font-size: 34px;
letter-spacing: -1px;
}
.band-text {
font-size: 17px;
}
.media {
border-radius: 16px;
}
.sectors {
font-size: 17px;
gap: 10px 28px;
}
}
/* --- Footer: mobil / tablet (1024px alti) --- */
@media (max-width: 1023.98px) {
/* Uzun e-posta adresi dar ekranda tasmasin */
.footer__contact-value {
overflow-wrap: anywhere;
}
/* Akordeon yalnizca JS acikken kapanir; JS yoksa menuler acik kalir */
html.js .footer__menu:not(.is-open) .footer__menu-panel {
grid-template-rows: 0fr;
}
.footer__menu-panel-inner {
transition: visibility 0s linear 0s;
}
/* Kapali menudeki baglantilar klavyeyle de erisilmez olur */
html.js .footer__menu:not(.is-open) .footer__menu-panel-inner {
visibility: hidden;
transition-delay: 0.3s;
}
}
@media (max-width: 639.98px) {
/* Dar ekranda telefon ve e-posta alt alta; uzun adres icin tam genislik */
.footer__contacts {
flex-direction: column;
flex-wrap: nowrap;
}
.footer__field {
flex-direction: column;
align-items: stretch;
}
.footer__input {
flex: none;
width: 100%;
}
.footer__submit {
width: 100%;
}
}
/* --- Footer: masaustu (1024px ve uzeri) --- */
@media (min-width: 1024px) {
.footer__grid {
grid-template-columns: 35.36% 64.64%;
}
.footer__brand {
padding-right: calc(24px + 86 * var(--fu));
}
.footer__brand-bg {
right: 0;
left: auto;
transform: none;
}
.footer__brand-inner {
max-width: 422px;
}
.footer__contacts {
flex-direction: column;
flex-wrap: nowrap;
}
.footer__copyright--brand {
display: block;
}
.footer__copyright--bottom {
display: none;
}
.footer__map-wrap {
padding-left: calc(24px + 16 * var(--fu));
}
.footer__body {
padding-left: calc(24px + 94 * var(--fu));
}
.footer__menus {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: calc(36px + 24 * var(--fu));
}
.footer__menu:not(:last-child) {
border-bottom: 0;
}
/* Masaustunde baslik yalnizca basliktir: tiklanmaz, liste hep acik */
.footer__menu-toggle {
padding: 0;
cursor: default;
pointer-events: none;
}
.footer__menu-toggle .footer__icon {
display: none;
}
.footer__menu-panel {
display: block;
}
.footer__menu-panel-inner {
overflow: visible;
}
.footer__menu-list {
padding-top: calc(16px + 6 * var(--fu));
padding-bottom: 0;
}
.footer__bottom {
flex-direction: row;
align-items: center;
justify-content: space-between;
margin-top: calc(32px + 22 * var(--fu));
}
}
/* --- Footer: hareketi azalt tercihi ve yazdirma --- */
@media (prefers-reduced-motion: reduce) {
html.js .footer [data-reveal] {
opacity: 1;
transform: none;
transition: none;
}
.footer__pin::after {
animation: none;
}
.footer__menu-panel,
.footer__menu-toggle .footer__icon,
.footer__signature-mark {
transition: none;
}
}
@media print {
.footer {
display: none;
}
}
/* ------------------------------------------------------------
Footer haritasi: tiklaninca yuklenen Google embed
Kutunun olculeri, kose yuvarlakligi ve konumu DEGISMEDI; yalnizca
uzerine bir acma dugmesi ve yuklenince iframe ekleniyor. Sayfa
acilirken Google'a istek gitmiyor (hiz ve KVKK).
------------------------------------------------------------ */
.footer__map-ac {
position: absolute;
inset: 0;
z-index: 2;
display: grid;
/* Etiket alt-ortada: kutunun ortasindaki kirmizi pine degmesin */
place-items: end center;
padding-bottom: calc(14px + 10 * var(--fu));
width: 100%;
height: 100%;
padding: 0;
border: 0;
background: none;
cursor: pointer;
}
.footer__map-ac-etiket {
padding: 9px 20px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
font-size: 14px;
font-weight: 500;
color: #1d1d1f;
}
.footer__map-ac:hover .footer__map-ac-etiket { background: #fff; }
.footer__map-ac:focus-visible {
outline: 2px solid var(--brand);
outline-offset: -4px;
}
/* Harita yuklendikten sonra acma dugmesi ve sabit gorsel gizlenir */
.footer__map.is-harita-acik .footer__map-ac,
.footer__map.is-harita-acik .footer__map-img,
.footer__map.is-harita-acik .footer__map-fallback { display: none; }
.footer__map-cerceve {
position: absolute;
inset: 0;
z-index: 1;
width: 100%;
height: 100%;
border: 0;
/* Sitenin koyu/soluk tonuna yaklassin: sabit gorselde de
mix-blend-mode darken + 0.8 opaklik vardi */
filter: grayscale(0.35) contrast(0.92) brightness(0.97);
}
/* Harita acikken yol tarifi dugmesi ustte kalsin */
.footer__map.is-harita-acik .footer__pin { z-index: 3; }