/* ========================================================================== İBM Group — Tasarım Sistemi -------------------------------------------------------------------------- Çift tema: açık (varsayılan) + koyu. Tema ile değişir, tercih localStorage'da saklanır (bkz. base.html). Renk kimliği kartvizit/broşürden gelir: lacivert #071F3E, turuncu #D75601. Bu iki renk her iki temada da korunur — sadece zemin/metin katmanları döner. Build adımı yok; düz CSS + değişkenler. ========================================================================== */ /* --- 1. Tema değişkenleri -------------------------------------------------- */ :root { /* Marka renkleri — her iki temada sabit */ --marka-lacivert: #071F3E; --marka-turuncu: #D75601; --turuncu-parlak: #FF6B10; --turuncu-koyu: #B84800; --yesil: #16A34A; /* AÇIK TEMA katmanları */ --zemin: #FFFFFF; --zemin-2: #F5F7FA; --zemin-3: #EDF1F6; --kart: #FFFFFF; --kart-ust: #FFFFFF; --metin: #0C1A2E; --metin-2: #46536B; --metin-3: #7A8699; --cizgi: #E2E8F0; --cizgi-koyu: #CBD5E1; --vurgu: var(--marka-turuncu); --baslik-renk: var(--marka-lacivert); /* Gölgeler — katmanlı, yumuşak */ --golge-s: 0 1px 2px rgba(7, 31, 62, .06), 0 2px 6px rgba(7, 31, 62, .04); --golge-m: 0 4px 12px rgba(7, 31, 62, .08), 0 10px 28px rgba(7, 31, 62, .06); --golge-l: 0 10px 24px rgba(7, 31, 62, .10), 0 24px 56px rgba(7, 31, 62, .10); --golge-turuncu: 0 8px 24px rgba(215, 86, 1, .28); /* Tipografi */ --font: "Montserrat", -apple-system, "Segoe UI", sans-serif; /* Ölçüler */ --sayfa: 1200px; --r-s: 10px; --r-m: 16px; --r-l: 22px; --r-tam: 999px; --r-blok: clamp(28px, 4vw, 56px); /* bölüm sınırlarındaki binme yarıçapı */ /* Hareket */ --gecis: .28s cubic-bezier(.4, 0, .2, 1); --gecis-yay: .45s cubic-bezier(.34, 1.56, .64, 1); --hero-katman: rgba(7, 31, 62, .78); color-scheme: light; } [data-tema="koyu"] { --zemin: #0B1220; --zemin-2: #111A2B; --zemin-3: #172136; --kart: #131D30; --kart-ust: #1A2740; --metin: #F2F5F9; --metin-2: #A7B4C8; --metin-3: #7C8AA0; --cizgi: #23304A; --cizgi-koyu: #33425F; --baslik-renk: #FFFFFF; --vurgu: var(--turuncu-parlak); --golge-s: 0 1px 2px rgba(0, 0, 0, .4); --golge-m: 0 6px 18px rgba(0, 0, 0, .45); --golge-l: 0 14px 40px rgba(0, 0, 0, .55); --golge-turuncu: 0 8px 28px rgba(255, 107, 16, .35); --hero-katman: rgba(4, 10, 20, .82); color-scheme: dark; } /* --- 2. Reset -------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; } body { font-family: var(--font); font-size: 16px; line-height: 1.65; color: var(--metin); background: var(--zemin); -webkit-font-smoothing: antialiased; overflow-x: hidden; /* mobilde 1px yatay taşmayı kesin engelle */ transition: background var(--gecis), color var(--gecis); } /* height:auto şart: HTML'deki width/height öznitelikleri tarayıcıda CSS height'a çevrilir ve aspect-ratio'yu ezer (hero görseli 600px olurdu). */ img, svg, video { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; } ul, ol { list-style: none; } input, textarea, select { font: inherit; } :focus-visible { outline: 3px solid var(--vurgu); outline-offset: 3px; border-radius: 4px; } ::selection { background: var(--marka-turuncu); color: #fff; } .gizli-metin { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* "İçeriğe geç" atlama bağlantısının TEK amacı klavyeyle gezinen görme engelli olmayan kullanıcının menüyü atlayabilmesi — bu yüzden odaklanınca görünür olmalı. Görünmez kalırsa WCAG 2.4.1'i (Bypass Blocks) sağlamaz. */ a.gizli-metin:focus { position: fixed; top: 12px; left: 12px; z-index: 1000; width: auto; height: auto; padding: 12px 20px; clip: auto; white-space: normal; background: var(--marka-lacivert); color: #fff; border-radius: var(--r-s); font-weight: 700; box-shadow: var(--golge-l); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* --- 3. Yerleşim ----------------------------------------------------------- */ .kapsa { width: min(var(--sayfa), 92vw); margin-inline: auto; } .bolum { padding-block: clamp(56px, 8vw, 104px); position: relative; } .bolum--gri { background: var(--zemin-2); } .bolum--zemin { background: var(--zemin); } .bolum--sik { padding-block: clamp(40px, 5vw, 64px); } /* --- Koyu/açık bölüm sınırı ----------------------------------------------- Degrade yerine biçim: AÇIK bölüm, komşusu olan KOYU bölümün üstüne yuvarlak köşeyle biner. Köşelerden görünen renk her zaman alttaki koyu bölümün kendisi olduğu için ara ton (pus) hiç oluşmaz ve hangi bölümün nereye komşu olduğundan bağımsız olarak doğru çalışır. Binen öğenin GÖRÜNÜR bir arka planı olmalı; şeffaf bölümde köşe belli olmaz. */ .biner-ust, .biner-alt { position: relative; z-index: 1; } .biner-ust { border-start-start-radius: var(--r-blok); border-start-end-radius: var(--r-blok); margin-top: calc(var(--r-blok) * -1); } .biner-alt { border-end-start-radius: var(--r-blok); border-end-end-radius: var(--r-blok); margin-bottom: calc(var(--r-blok) * -1); } /* --- 4. Tipografi ---------------------------------------------------------- */ h1, h2, h3, h4 { font-weight: 800; line-height: 1.12; letter-spacing: -.02em; color: var(--baslik-renk); } .h-dev { font-size: clamp(2rem, 6.2vw, 4.25rem); font-weight: 800; line-height: 1.06; letter-spacing: -.03em; /* Uzun Türkçe kelimeler (ör. "Şekillendiriyoruz") dar ekranda taşmasın */ overflow-wrap: break-word; hyphens: auto; } .h-bolum { font-size: clamp(1.6rem, 3.6vw, 2.6rem); font-weight: 800; letter-spacing: -.025em; } .h-kart { font-size: clamp(1.05rem, 1.6vw, 1.25rem); font-weight: 700; letter-spacing: -.01em; } .metin-2 { color: var(--metin-2); } .giris-metni { color: var(--metin-2); font-size: clamp(.98rem, 1.4vw, 1.1rem); max-width: 62ch; } /* Marka vurgusu — başlık içindeki turuncu kelime */ .vurgu-kelime { color: var(--vurgu); } /* Bölüm başlığı bloğu */ .bolum-basi { margin-bottom: clamp(28px, 4vw, 48px); } .bolum-basi--orta { text-align: center; } .bolum-basi--orta .giris-metni { margin-inline: auto; } .etiket { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--vurgu); margin-bottom: 14px; } .etiket::before { content: ""; width: 26px; height: 2px; background: var(--vurgu); border-radius: 2px; } .bolum-basi--orta .etiket::before { display: none; } .bolum-basi--orta .etiket { background: color-mix(in srgb, var(--vurgu) 12%, transparent); padding: 7px 16px; border-radius: var(--r-tam); margin-bottom: 16px; } /* --- 5. Butonlar ----------------------------------------------------------- */ .btn { --btn-bg: var(--marka-turuncu); --btn-renk: #fff; position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 26px; border-radius: var(--r-tam); font-size: .94rem; font-weight: 700; letter-spacing: .01em; background: var(--btn-bg); color: var(--btn-renk); border: 2px solid transparent; transition: transform var(--gecis), box-shadow var(--gecis), background var(--gecis), border-color var(--gecis); will-change: transform; } .btn:hover { transform: translateY(-2px); box-shadow: var(--golge-turuncu); } .btn:active { transform: translateY(0) scale(.98); } /* Tıklama dalgası (ripple) — JS ile konumlanır */ .btn .dalga { position: absolute; border-radius: 50%; transform: scale(0); background: rgba(255, 255, 255, .45); pointer-events: none; animation: dalga-yay .6s ease-out forwards; } @keyframes dalga-yay { to { transform: scale(3.2); opacity: 0; } } .btn--cizgi { --btn-bg: transparent; --btn-renk: var(--metin); border-color: var(--cizgi-koyu); } .btn--cizgi:hover { border-color: var(--vurgu); color: var(--vurgu); box-shadow: var(--golge-m); } .btn--beyaz { --btn-bg: transparent; --btn-renk: #fff; border-color: rgba(255,255,255,.35); } .btn--beyaz:hover { border-color: #fff; background: rgba(255,255,255,.1); box-shadow: none; } .btn--koyu { --btn-bg: var(--marka-lacivert); } [data-tema="koyu"] .btn--koyu { --btn-bg: var(--kart-ust); border-color: var(--cizgi); } .btn--wp { --btn-bg: #22C55E; } .btn--wp:hover { box-shadow: 0 8px 24px rgba(34, 197, 94, .35); } .btn--kucuk { padding: 10px 18px; font-size: .86rem; } .btn--blok { width: 100%; } /* --- 6. Üst bar ------------------------------------------------------------ */ .ust-bar { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--zemin) 82%, transparent); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; transition: border-color var(--gecis), box-shadow var(--gecis), background var(--gecis); } .ust-bar[data-kaydi="evet"] { border-bottom-color: var(--cizgi); box-shadow: var(--golge-s); } .ust-bar__ic { display: flex; align-items: center; gap: 20px; height: 74px; } /* width:auto şart — HTML'deki width="420" özniteliği CSS width'e çevrilir ve yükseklikle birlikte logoyu yamultur. */ .ust-bar__logo img { height: 46px; width: auto; transition: transform var(--gecis); } .ust-bar__logo:hover img { transform: scale(1.04); } /* Logo koyu zeminde okunmuyor (lacivert gövde + koyu detaylar). Koyu temada beyaz bir zemine oturtulur; açık temada zaten beyaz üzerinde duruyor. */ [data-tema="koyu"] .ust-bar__logo, [data-tema="koyu"] .alt-bilgi__logo { display: inline-block; background: #fff; padding: 6px 10px; border-radius: var(--r-s); } .menu { margin-left: auto; display: flex; align-items: center; gap: 4px; } /* :not(.btn) şart: aksi halde ".menu a" (0,1,1) özgüllüğü ".btn"in (0,1,0) rengini ezer — "Teklif Al" turuncu zeminde neredeyse görünmez koyu gri metinle kalırdı (1.93:1 kontrast, WCAG AA'nın çok altında). */ .menu a:not(.btn) { position: relative; padding: 9px 14px; border-radius: var(--r-s); font-size: .92rem; font-weight: 600; color: var(--metin-2); transition: color var(--gecis), background var(--gecis); } .menu a:not(.btn)::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; background: var(--vurgu); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform var(--gecis); } .menu a:not(.btn):hover { color: var(--metin); } .menu a:not(.btn):hover::after, .menu a.aktif:not(.btn)::after { transform: scaleX(1); } .menu a.aktif:not(.btn) { color: var(--vurgu); } .menu .btn { margin-left: 10px; } /* Tema düğmesi */ .tema-dugme { width: 40px; height: 40px; flex: none; border-radius: var(--r-tam); display: grid; place-items: center; color: var(--metin-2); border: 1px solid var(--cizgi); transition: color var(--gecis), border-color var(--gecis), transform var(--gecis), background var(--gecis); } .tema-dugme:hover { color: var(--vurgu); border-color: var(--vurgu); transform: rotate(18deg); } .tema-dugme svg { width: 19px; height: 19px; } .tema-dugme .ay { display: none; } [data-tema="koyu"] .tema-dugme .gunes { display: none; } [data-tema="koyu"] .tema-dugme .ay { display: block; } /* Hamburger */ .menu-dugme { display: none; width: 42px; height: 42px; border-radius: var(--r-s); align-items: center; justify-content: center; color: var(--metin); border: 1px solid var(--cizgi); } .menu-dugme svg { width: 22px; height: 22px; } .menu-dugme .kapat-ikon { display: none; } .menu-dugme[aria-expanded="true"] .ac-ikon { display: none; } .menu-dugme[aria-expanded="true"] .kapat-ikon { display: block; } /* --- 7. Hero --------------------------------------------------------------- */ .hero { position: relative; isolation: isolate; overflow: hidden; background: var(--marka-lacivert); color: #fff; } .hero__arka { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; transform: scale(1.06); filter: saturate(1.1); } .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(1000px 480px at 78% 18%, rgba(215, 86, 1, .30), transparent 62%), linear-gradient(105deg, var(--hero-katman) 32%, rgba(7, 31, 62, .55) 100%); } /* Nokta dokusu — AllCraftVision'daki parçacık hissinin hafif, performanslı karşılığı */ .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5; background-image: radial-gradient(rgba(255,255,255,.16) 1px, transparent 1px); background-size: 34px 34px; mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 78%); -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 78%); } .hero__ic { position: relative; z-index: 1; display: grid; align-items: center; gap: 44px; padding-block: clamp(64px, 10vw, 130px); /* Hero, sayfanın geri kalanından biraz geniş bir kapsayıcı kullanır ama ortalanmış kalır: banner 2.165:1 olduğu için 1200px'lik ızgarada yarım sütuna sıkışıp üzerindeki marka yazıları okunmaz hale geliyordu. */ width: min(1440px, 94vw); grid-template-columns: minmax(0, .84fr) minmax(0, 1fr); } /* vurgulu_baslik filtresi başlığın son bölümünü içine alır. */ .hero h1 { color: #fff; margin-block: 14px 0; } .hero h1 span { color: var(--turuncu-parlak); } .hero .etiket { color: #FFB37A; } .hero .etiket::before { background: #FFB37A; } .hero__metin { color: #C9D4E4; margin-top: 20px; max-width: 52ch; } .hero__butonlar { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; } /* Hero istatistik şeridi */ .hero__sayilar { display: flex; flex-wrap: wrap; gap: clamp(20px, 4vw, 46px); margin-top: clamp(32px, 5vw, 52px); padding-top: 26px; border-top: 1px solid rgba(255,255,255,.16); } .sayac__deger { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; color: #fff; letter-spacing: -.02em; line-height: 1; } .sayac__deger span { color: var(--turuncu-parlak); } .sayac__ad { font-size: .8rem; color: #A9B7CC; margin-top: 6px; font-weight: 600; letter-spacing: .04em; } /* --- Hero görseli -------------------------------------------------------- Masaüstünde tek parça geniş banner, 1024px altında dikey 5'li slider. Her ikisi de CSS arka planı: uygulanmayan medya sorgusundaki görsel hiç indirilmez, böylece telefon banner'ı, masaüstü de 5 slaydı boşuna çekmez. */ .hero__gorsel { position: relative; } .hero__banner { aspect-ratio: 1600 / 739; background: url("../img/hero/hero-masaustu.jpg") center / cover no-repeat; border-radius: var(--r-l); box-shadow: 0 30px 70px rgba(0, 0, 0, .42); } .hero__slider { display: none; } .hero__ray { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; border-radius: var(--r-l); box-shadow: 0 24px 56px rgba(0, 0, 0, .42); scrollbar-width: none; } .hero__ray::-webkit-scrollbar { display: none; } .hero__slayt { scroll-snap-align: start; aspect-ratio: 387 / 880; background-position: center; background-size: cover; background-repeat: no-repeat; } .hero__noktalar { display: flex; justify-content: center; gap: 9px; margin-top: 16px; } .hero__noktalar button { width: 9px; height: 9px; border-radius: var(--r-tam); padding: 0; background: rgba(255, 255, 255, .34); transition: background var(--gecis), width var(--gecis); } .hero__noktalar button[aria-current="true"] { background: var(--turuncu-parlak); width: 26px; } /* Dikey 5'li slider YALNIZCA telefonda. Tablet, hero için masaüstüyle aynı düzeni kullanır (metin solda + tek parça banner sağda) — bu yüzden eşik 1024 değil 768. Diğer bölümlerin 1024px kırılımı olduğu gibi durur. */ @media (max-width: 767px) { .hero__banner { display: none; } .hero__slider { display: block; width: min(100%, 420px); margin-inline: auto; } .hero__slayt--1 { background-image: url("../img/hero/hero-mobil-1.jpg"); } .hero__slayt--2 { background-image: url("../img/hero/hero-mobil-2.jpg"); } .hero__slayt--3 { background-image: url("../img/hero/hero-mobil-3.jpg"); } .hero__slayt--4 { background-image: url("../img/hero/hero-mobil-4.jpg"); } .hero__slayt--5 { background-image: url("../img/hero/hero-mobil-5.jpg"); } } /* Tablette sütunlar daraldığı için başlık ölçeği küçülür; düzen aynı kalır. */ @media (min-width: 768px) and (max-width: 1180px) { .hero .h-dev { font-size: clamp(1.7rem, 4.4vw, 3rem); } .hero__ic { gap: 28px; } } /* --- 8. Kartlar ------------------------------------------------------------ */ .kart { position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--r-l); box-shadow: var(--golge-s); transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis); } .kart:hover { transform: translateY(-6px); box-shadow: var(--golge-l); border-color: color-mix(in srgb, var(--vurgu) 45%, var(--cizgi)); } .kart__gorsel { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--zemin-3); } .kart__gorsel img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.6,.3,1); } .kart:hover .kart__gorsel img { transform: scale(1.07); } .kart__gorsel--bos { display: grid; place-items: center; color: var(--metin-3); font-size: .84rem; gap: 8px; } .kart__gorsel--bos svg { width: 34px; height: 34px; opacity: .5; } .kart__govde { padding: 20px; display: flex; flex-direction: column; flex: 1; gap: 6px; } .kart__alt-baslik { font-size: .8rem; color: var(--metin-3); font-weight: 600; letter-spacing: .02em; } .kart__fiyat { margin-top: 10px; font-weight: 800; color: var(--vurgu); font-size: 1rem; } .kart__link { margin-top: auto; padding-top: 14px; display: inline-flex; align-items: center; gap: 7px; color: var(--vurgu); font-weight: 700; font-size: .88rem; } .kart__link svg { width: 16px; height: 16px; transition: transform var(--gecis); } .kart:hover .kart__link svg { transform: translateX(5px); } /* Rozet (satılık/kiralık) — normalde satır içi; kart görselinde köşeye oturur */ .rozet { display: inline-block; padding: 6px 13px; border-radius: var(--r-tam); font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: var(--marka-lacivert); color: #fff; box-shadow: var(--golge-s); } [data-tema="koyu"] .rozet { background: var(--kart-ust); } .kart__gorsel .rozet { position: absolute; top: 12px; left: 12px; z-index: 2; } .rozet--kiralik { background: var(--marka-turuncu); } .rozet--ikisi { background: var(--yesil); } /* Kart içi teknik özet */ .ozet-liste { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--cizgi); display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; } .ozet-liste li { font-size: .78rem; color: var(--metin-3); display: flex; flex-direction: column; gap: 1px; } .ozet-liste b { color: var(--metin); font-weight: 700; font-size: .88rem; } /* Izgara */ .izgara { display: grid; gap: clamp(16px, 2vw, 24px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); } /* --- 9. Yatay kaydırmalı slider (mobilde uzun listeleri kısaltır) ---------- */ .slider { position: relative; } .slider__ray { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(268px, 1fr); gap: clamp(14px, 1.8vw, 22px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; /* Üstte kartın hover'da yükselmesine, altta kaydırma çubuğuna pay bırakır. */ padding: 6px 0 22px; scrollbar-width: thin; scrollbar-color: var(--cizgi-koyu) transparent; } .slider__ray > * { scroll-snap-align: start; } /* Kendiliğinden akan şeritler: snap ve CSS smooth kapalı olmalı — ikisi de JS'in kare kare yazdığı scrollLeft'i geri çeker. Ok tıklamaları kendi behavior:'smooth' değerini verdiği için yumuşak kalır. Kaydırma çubuğu da sürekli hareket ettiğinden gizlenir; oklar ve parmak hâlâ çalışır. */ @media (prefers-reduced-motion: no-preference) { [data-akis] [data-ray] { scroll-snap-type: none; scroll-behavior: auto; scrollbar-width: none; } [data-akis] [data-ray]::-webkit-scrollbar { display: none; } } .slider__ray::-webkit-scrollbar { height: 6px; } .slider__ray::-webkit-scrollbar-track { background: transparent; } .slider__ray::-webkit-scrollbar-thumb { background: var(--cizgi-koyu); border-radius: 99px; } .slider__ray::-webkit-scrollbar-thumb:hover { background: var(--vurgu); } /* Masaüstünde 4 kart sığsın, mobilde 1.15 kart (sonraki kartın ucu görünsün → kaydırma ipucu) */ @media (min-width: 1024px) { .slider__ray { grid-auto-columns: calc((100% - 3 * 22px) / 4); } } @media (max-width: 640px) { .slider__ray { grid-auto-columns: 86%; } } .slider__oklar { display: flex; gap: 8px; } .slider__ok { width: 42px; height: 42px; border-radius: var(--r-tam); display: grid; place-items: center; flex: none; border: 1px solid var(--cizgi); color: var(--metin-2); background: var(--kart); transition: all var(--gecis); } .slider__ok:hover:not(:disabled) { background: var(--vurgu); border-color: var(--vurgu); color: #fff; transform: scale(1.06); box-shadow: var(--golge-turuncu); } .slider__ok:disabled { opacity: .35; cursor: default; } .slider__ok svg { width: 18px; height: 18px; } /* Başlık + oklar aynı satırda */ .bolum-basi--satir { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; } /* --- 10. Faaliyet şeridi (ikonlu özet) ------------------------------------ */ /* Şerit hero'nun üstüne biner; üst kenarı yuvarlanmış olduğu için üst çizgi yok. overflow:hidden, öğe hover'ının yuvarlak köşenin dışına taşmasını keser. */ .faaliyet { background: var(--zemin-2); border-bottom: 1px solid var(--cizgi); overflow: hidden; } .faaliyet__ray { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(172px, 1fr); gap: 0; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; } .faaliyet__ray::-webkit-scrollbar { display: none; } /* Şerit akarken kopyalar başa dönüyor; ayraç her öğede olmalı ki tur birleşme noktasında bir çizgi eksik kalmasın. */ .faaliyet__oge { padding: 26px 18px; text-align: center; border-left: 1px solid var(--cizgi); scroll-snap-align: center; transition: background var(--gecis); } .faaliyet__oge:hover { background: var(--kart); } .faaliyet__no { display: block; font-size: 1.45rem; font-weight: 800; color: var(--vurgu); line-height: 1; margin-bottom: 8px; } .faaliyet__ad { font-size: .82rem; font-weight: 600; color: var(--metin-2); line-height: 1.4; } /* --- 11. Hizmet kartları --------------------------------------------------- */ .hizmet { background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--r-l); padding: 26px 24px; display: flex; flex-direction: column; gap: 10px; transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis); } .hizmet:hover { transform: translateY(-5px); box-shadow: var(--golge-l); border-color: color-mix(in srgb, var(--vurgu) 45%, var(--cizgi)); } .hizmet__ikon { width: 50px; height: 50px; border-radius: var(--r-m); flex: none; display: grid; place-items: center; margin-bottom: 6px; background: color-mix(in srgb, var(--vurgu) 14%, transparent); color: var(--vurgu); transition: background var(--gecis), color var(--gecis), transform var(--gecis-yay); } .hizmet:hover .hizmet__ikon { background: var(--vurgu); color: #fff; transform: scale(1.08) rotate(-6deg); } .hizmet__ikon svg { width: 24px; height: 24px; } .hizmet p { color: var(--metin-2); font-size: .92rem; } .hizmet ul { margin-top: 12px; padding-top: 14px; border-top: 1px dashed var(--cizgi); display: grid; gap: 9px; } .hizmet ul li { position: relative; padding-left: 24px; font-size: .86rem; color: var(--metin-2); } .hizmet ul li::before { content: ""; position: absolute; left: 0; top: .42em; width: 14px; height: 14px; border-radius: 50%; background: color-mix(in srgb, var(--yesil) 18%, transparent); box-shadow: inset 0 0 0 2px var(--yesil); } /* --- 12. Marka kartları ---------------------------------------------------- */ .marka-kart { background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--r-m); overflow: hidden; transition: all var(--gecis); display: block; } .marka-kart:hover { transform: translateY(-5px); box-shadow: var(--golge-l); border-color: color-mix(in srgb, var(--vurgu) 50%, var(--cizgi)); } /* Yükseklik KESİN olmalı: aspect-ratio ile verildiğinde alttaki img'nin max-height:100% değeri döngüsel kalır, çözümlenmez ve uzun logolar kutuyu şişirip kartın altında boşluk bırakır. */ .marka-kart__logo { height: clamp(118px, 13vw, 158px); display: grid; place-items: center; padding: 20px; background: var(--zemin-2); } .marka-kart__logo img { max-width: 100%; max-height: 100%; object-fit: contain; filter: grayscale(1); opacity: .74; transition: all var(--gecis); } .marka-kart:hover .marka-kart__logo img { filter: grayscale(0); opacity: 1; transform: scale(1.05); } [data-tema="koyu"] .marka-kart__logo { background: #fff; } .marka-kart__ad { font-family: var(--font); font-size: 1.05rem; font-weight: 800; color: var(--baslik-renk); letter-spacing: .02em; } .marka-kart__alt { padding: 13px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--cizgi); font-weight: 700; font-size: .9rem; } .marka-kart__sayi { font-size: .78rem; font-weight: 600; color: var(--metin-3); } /* Marka detay sayfasının başlığı: logo + ad yan yana */ .marka-basligi { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .marka-basligi__logo { width: 108px; height: 72px; flex: none; padding: 10px; display: grid; place-items: center; background: #fff; border: 1px solid var(--cizgi); border-radius: var(--r-m); box-shadow: var(--golge-s); } .marka-basligi__logo img { max-width: 100%; max-height: 100%; object-fit: contain; } /* Ürün grubu kartı */ .grup-kart { background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--r-l); padding: 26px 24px; display: flex; flex-direction: column; gap: 8px; transition: all var(--gecis); } .grup-kart:hover { transform: translateY(-5px); box-shadow: var(--golge-l); border-color: color-mix(in srgb, var(--vurgu) 50%, var(--cizgi)); } .grup-kart__sayi { font-size: .84rem; color: var(--metin-3); } .grup-kart__link { margin-top: auto; padding-top: 12px; color: var(--vurgu); font-weight: 700; font-size: .88rem; } /* --- 13. Boş durum --------------------------------------------------------- */ .bos-durum { border: 1.5px dashed var(--cizgi-koyu); border-radius: var(--r-l); padding: clamp(36px, 6vw, 60px) 24px; text-align: center; color: var(--metin-2); background: var(--kart); } .bos-durum b { display: block; font-size: 1.25rem; font-weight: 800; color: var(--baslik-renk); margin-bottom: 8px; } /* --- 14. İletişim ---------------------------------------------------------- */ .iletisim { background: var(--marka-lacivert); color: #fff; position: relative; overflow: hidden; } [data-tema="koyu"] .iletisim { background: var(--zemin-2); border-block: 1px solid var(--cizgi); } .iletisim::before { content: ""; position: absolute; inset: 0; background: radial-gradient(760px 400px at 88% 8%, rgba(215,86,1,.24), transparent 62%); pointer-events: none; } /* Koyu temada da zemin koyu kaldığı için başlık her iki temada beyaz. */ .iletisim .h-bolum { color: #fff; } .iletisim .etiket { color: var(--turuncu-parlak); } .iletisim .etiket::before { background: var(--turuncu-parlak); } .iletisim__ic { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); } .iletisim-liste { margin-top: 26px; display: grid; gap: 18px; } .iletisim-liste li { display: flex; gap: 15px; align-items: flex-start; } .iletisim-liste .ikon { width: 42px; height: 42px; flex: none; border-radius: var(--r-m); display: grid; place-items: center; color: #fff; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255,255,255,.14); transition: background var(--gecis), transform var(--gecis); } .iletisim-liste li:hover .ikon { background: var(--marka-turuncu); transform: scale(1.06); } .iletisim-liste .ikon svg { width: 19px; height: 19px; } .iletisim-liste small { display: block; color: #94A6BF; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 3px; } .iletisim-liste a, .iletisim-liste p, .iletisim-liste div { color: #EAF0F8; } .iletisim-liste a:hover { color: var(--turuncu-parlak); } [data-tema="koyu"] .iletisim-liste a, [data-tema="koyu"] .iletisim-liste p, [data-tema="koyu"] .iletisim-liste div { color: var(--metin); } /* --- 15. Formlar ----------------------------------------------------------- */ .form { display: grid; gap: 12px; } .form input, .form textarea, .form select { width: 100%; padding: 14px 16px; border-radius: var(--r-m); background: rgba(255, 255, 255, .07); color: #fff; border: 1px solid rgba(255, 255, 255, .18); transition: border-color var(--gecis), background var(--gecis), box-shadow var(--gecis); } .form input::placeholder, .form textarea::placeholder { color: #90A0B8; } .form input:focus, .form textarea:focus, .form select:focus { outline: none; border-color: var(--turuncu-parlak); background: rgba(255, 255, 255, .12); box-shadow: 0 0 0 4px rgba(215, 86, 1, .18); } .form select option { color: #0C1A2E; } .form .ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .form button[type="submit"] { margin-top: 4px; padding: 15px; border-radius: var(--r-tam); background: var(--marka-turuncu); color: #fff; font-weight: 800; font-size: .96rem; transition: all var(--gecis); } .form button[type="submit"]:hover { background: var(--turuncu-koyu); transform: translateY(-2px); box-shadow: var(--golge-turuncu); } .form .gizli-alan { position: absolute; left: -9999px; } /* --- 16. Filtreler / arama ------------------------------------------------- */ .filtreler { margin-bottom: 26px; } .filtreler__satir { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .filtreler input[type="search"], .filtreler select { padding: 12px 16px; border-radius: var(--r-tam); border: 1px solid var(--cizgi); background: var(--kart); color: var(--metin); transition: border-color var(--gecis), box-shadow var(--gecis); } .filtreler input[type="search"] { flex: 1 1 240px; min-width: 0; } .filtreler select { flex: 0 1 190px; } .filtreler input[type="search"]:focus, .filtreler select:focus { outline: none; border-color: var(--vurgu); box-shadow: 0 0 0 4px color-mix(in srgb, var(--vurgu) 16%, transparent); } .filtre-temizle { font-size: .86rem; color: var(--metin-3); text-decoration: underline; } .filtre-temizle:hover { color: var(--vurgu); } /* --- 17. Sayfalama / kırıntı ---------------------------------------------- */ .sayfalama { display: flex; gap: 16px; align-items: center; justify-content: center; margin-top: 40px; } .sayfalama a { color: var(--vurgu); font-weight: 700; font-size: .9rem; } .sayfalama span { color: var(--metin-3); font-size: .9rem; } .kirinti { font-size: .84rem; color: var(--metin-3); margin-bottom: 22px; display: flex; gap: 8px; flex-wrap: wrap; } .kirinti a:hover { color: var(--vurgu); } /* --- 18. Makine detay ------------------------------------------------------ */ .detay { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 4vw, 48px); align-items: start; } .detay__ana-gorsel { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-l); border: 1px solid var(--cizgi); background: var(--zemin-3); box-shadow: var(--golge-m); } .detay__kucukler { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; } .kucuk { width: 84px; height: 64px; padding: 0; overflow: hidden; border-radius: var(--r-s); border: 2px solid var(--cizgi); background: var(--zemin-3); transition: border-color var(--gecis), transform var(--gecis); } .kucuk img { width: 100%; height: 100%; object-fit: cover; } .kucuk:hover, .kucuk.aktif { border-color: var(--vurgu); transform: translateY(-2px); } .detay__ust-bilgi { color: var(--metin-3); font-size: .9rem; margin-top: 8px; } .detay__fiyat { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; color: var(--vurgu); margin-top: 16px; } .detay__butonlar { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; } .detay__alt-baslik { font-size: 1.15rem; font-weight: 800; color: var(--baslik-renk); margin-top: 34px; padding-bottom: 10px; border-bottom: 2px solid var(--vurgu); } .ozellik-tablo { width: 100%; border-collapse: collapse; margin-top: 14px; } .ozellik-tablo tr { border-bottom: 1px solid var(--cizgi); } .ozellik-tablo tr:hover { background: var(--zemin-2); } .ozellik-tablo th { text-align: left; font-weight: 600; color: var(--metin-3); font-size: .86rem; padding: 12px 12px 12px 0; width: 45%; } .ozellik-tablo td { font-weight: 700; font-size: .88rem; padding: 12px 0; } .detay__aciklama { margin-top: 14px; color: var(--metin-2); } .dokuman-liste { margin-top: 14px; display: grid; gap: 8px; } .dokuman-liste a { color: var(--vurgu); font-weight: 700; font-size: .9rem; } /* --- 19. Harita ------------------------------------------------------------ */ .harita-cerceve { position: relative; width: 100%; aspect-ratio: 16 / 7; min-height: 320px; border-radius: var(--r-l); overflow: hidden; border: 1px solid var(--cizgi); box-shadow: var(--golge-m); } .harita-cerceve iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } @media (max-width: 640px) { .harita-cerceve { aspect-ratio: 1 / 1; min-height: 0; } } /* --- 20. Sabit iletişim düğmeleri ----------------------------------------- */ .sabit-iletisim { position: fixed; right: 16px; bottom: 16px; z-index: 90; display: grid; gap: 10px; } .sabit-iletisim a { width: 52px; height: 52px; border-radius: var(--r-tam); display: grid; place-items: center; color: #fff; box-shadow: var(--golge-l); transition: transform var(--gecis-yay), box-shadow var(--gecis); } .sabit-iletisim a:hover { transform: scale(1.1) translateY(-2px); } .sabit-iletisim svg { width: 25px; height: 25px; } .sabit-iletisim .wp { background: #22C55E; } .sabit-iletisim .tel { background: var(--marka-turuncu); } /* --- 21. Alt bilgi --------------------------------------------------------- */ .alt-bilgi { background: var(--zemin-2); border-top: 1px solid var(--cizgi); padding-block: 44px 26px; } /* Sayfa koyu bir iletişim/teklif bölümüyle bitiyorsa (makine detayı, teklif formu, haritasız iletişim sayfası) alt bilgi de ona yuvarlak köşeyle biner. :has() desteklenmeyen tarayıcıda kural düşer, alt bilgi düz kenarla kalır. */ body:has(main > .iletisim:last-child) .alt-bilgi { position: relative; z-index: 1; border-top: 0; border-start-start-radius: var(--r-blok); border-start-end-radius: var(--r-blok); margin-top: calc(var(--r-blok) * -1); } .alt-bilgi__ust { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px; padding-bottom: 32px; border-bottom: 1px solid var(--cizgi); } .alt-bilgi__logo { display: inline-block; margin-bottom: 14px; } .alt-bilgi__logo img { height: 52px; width: auto; } .alt-bilgi p, .alt-bilgi a { color: var(--metin-2); font-size: .9rem; } .alt-bilgi a:hover { color: var(--vurgu); } .alt-bilgi h4 { font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--baslik-renk); margin-bottom: 14px; } .alt-bilgi__liste { display: grid; gap: 9px; } .alt-bilgi__alt { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 20px; font-size: .84rem; color: var(--metin-3); } /* --- 22. Duyuru kutusu ----------------------------------------------------- */ .not { background: color-mix(in srgb, var(--marka-turuncu) 10%, var(--kart)); border-left: 4px solid var(--marka-turuncu); padding: 15px 18px; border-radius: 0 var(--r-m) var(--r-m) 0; font-size: .89rem; color: var(--metin-2); } /* --- 23. Belirme animasyonu ----------------------------------------------- */ /* .js kancası base.html'deki head script'inden gelir — JS çalışmazsa içerik gizlenmez, doğrudan görünür kalır. */ .js .belir { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); } .js .belir.gorundu { opacity: 1; transform: none; } /* ========================================================================== 24. Duyarlı (responsive) ========================================================================== */ /* Hero yalnızca telefonda tek sütuna iner; tablette masaüstü düzeninde kalır. */ @media (max-width: 767px) { .hero__ic { grid-template-columns: 1fr; gap: 26px; } .hero__gorsel { order: 0; } /* başlık önce, slider onun altında */ } @media (max-width: 1024px) { .iletisim__ic { grid-template-columns: 1fr; } .detay { grid-template-columns: 1fr; } .alt-bilgi__ust { grid-template-columns: 1fr 1fr; } } @media (max-width: 900px) { .menu-dugme { display: inline-flex; margin-left: auto; } /* Mobil menü: başlığın hemen altına açılan tam genişlikte panel. position:fixed KULLANILAMAZ — .ust-bar'daki backdrop-filter onu fixed torunlar için kapsayıcı bloğa çevirdiğinden menü header'ın 66px'ine sıkışırdı. absolute + top:100% ile header'a göre konumlanır. */ .menu { position: absolute; top: 100%; left: 0; right: 0; z-index: 99; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 2px; margin: 0; padding: 14px 6vw 32px; max-height: calc(100dvh - 100%); overflow-y: auto; background: var(--zemin); border-bottom: 1px solid var(--cizgi); box-shadow: var(--golge-l); opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity .25s ease, transform .25s ease, visibility .25s; } .menu[data-acik="true"] { opacity: 1; visibility: visible; transform: none; } /* :not(.btn): aynı özgüllük tuzağı burada da geçerli — bkz. masaüstü kuralı. */ .menu a:not(.btn) { padding: 16px 8px; font-size: 1.05rem; font-weight: 700; color: var(--metin); border-bottom: 1px solid var(--cizgi); border-radius: 0; } .menu a:not(.btn):active { background: var(--zemin-2); } .menu .btn { margin: 20px 0 0; padding: 15px; font-size: 1rem; } } @media (max-width: 640px) { .ust-bar__ic { height: 66px; gap: 12px; } .ust-bar__logo img { height: 38px; } .form .ikili { grid-template-columns: 1fr; } .ozet-liste { grid-template-columns: 1fr 1fr; } .alt-bilgi { padding-block: 34px 20px; } /* Tanıtım bloğu tam genişlik, altındaki iki kısa liste yan yana. */ .alt-bilgi__ust { grid-template-columns: 1fr 1fr; gap: 24px 18px; padding-bottom: 22px; } .alt-bilgi__ust > :first-child { grid-column: 1 / -1; } .sabit-iletisim { right: 12px; bottom: 12px; } .sabit-iletisim a { width: 48px; height: 48px; } .detay__butonlar .btn { flex: 1 1 100%; } .detay__kucukler .kucuk { width: 68px; height: 52px; } /* padding-bottom, faaliyet şeridinin bindiği 28px'lik yarıçapı aşmalı; yoksa şerit sayaç yazılarının üstüne gelir. */ .hero__ic { padding-block: 34px 48px; gap: 26px; } .hero__butonlar { margin-top: 24px; } .hero__butonlar .btn { flex: 1 1 100%; } .hero__sayilar { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 14px; margin-top: 26px; padding-top: 20px; } }