/* ÜRETİLDİ — ELLE DÜZENLEMEYİN. Kaynak: kaynak/stil/*.css (ad sırasıyla), node araclar/derle.js */ /* ── kaynak/stil/01-temel.css ────────────────────────────────────────────── */ /* Temel: renkler, yazı, ızgara, düğmeler. Palet LOGODAN (01.11.2026): koyu lacivert-antrasit zemin · kireç yazı · altın (TEK vurgu; logonun SY ve SAĞLAM rengi) · gümüş (logonun halkası ve el yazısı) · beton (açık zemin). Yazı: yalnız Archivo. Başlıklar NORMAL YAZIMLA ve ölçülü (büyük harf değil), etiketler aralıklı küçük büyük harf, sayılar tablo rakamıyla. 02.11.2026'ya kadar başlıklar geniş + kalın BÜYÜK HARF, etiketler mono idi — İLGERU: "siteyi yapay zeka tasarlamış gibi olmasın … daha premium olsun". */ :root { --zemin: #12171d; --zemin-2: #161c23; --zemin-3: #1d252e; --zemin-4: #28313b; --kirec: #f1eee8; --kagit: #ebe7e0; --beton: #d8d4cc; --murekkep: #15181a; --gri: #67645e; --gri-acik: rgba(var(--kirec-k), .66); --vurgu: #c9a45c; --vurgu-acik: #e3c98f; --vurgu-koyu: #7a5c27; --gumus: #c3c9cf; --celik: #8a969e; --cizgi-koyu: rgba(var(--kirec-k), .12); --cizgi-acik: rgba(21, 24, 26, .14); /* Tema (04.11.2026 — GÜNDÜZ teması: 12-gunduz.css bu belirteçleri açık değerlerle yeniden tanımlar). Kanal belirteçleri rgba(var(--kirec-k), α) içindir. SABİT olanlar iki temada da aynı kalır: altın zeminin yazısı, açık zeminli bileşenin (z-acik / katalog) mürekkep üstü yazısı, altın düğmenin üzerine gelince rengi. */ --kirec-k: 241, 238, 232; --zemin-k: 18, 23, 29; --altin-ustu: #12171d; --kirec-sabit: #f1eee8; --vurgu-parlak: #e3c98f; --goster-gece: block; --goster-gunduz: none; --govde: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --kenar: clamp(20px, 5vw, 72px); --kap: 1440px; --ust-boy: 76px; --serit-boy: 38px; --ust-toplam: calc(var(--serit-boy) + var(--ust-boy)); /* sayfa açılışındaki boşluk: şerit + çubuk */ --egri: cubic-bezier(.2, .7, .1, 1); --egri-yumusak: cubic-bezier(.45, 0, .1, 1); color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--ust-boy) + 16px); } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { margin: 0; background: var(--zemin); color: var(--kirec); font: 400 1.0625rem/1.65 var(--govde); font-feature-settings: 'kern', 'liga'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg, video { display: block; max-width: 100%; } img { height: auto; } svg { fill: currentColor; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } input, select, textarea { font: inherit; color: inherit; } h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; } ul, ol { padding: 0; list-style: none; } address { font-style: normal; } ::selection { background: var(--vurgu); color: var(--altin-ustu); } :focus-visible { outline: 2px solid var(--vurgu-acik); outline-offset: 3px; } main { display: block; } main:focus { outline: none; } [hidden] { display: none !important; } .gizli { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .atla { position: fixed; left: 12px; top: -60px; z-index: 200; background: var(--kirec); color: var(--zemin); padding: 10px 16px; font-weight: 700; transition: top .2s; } .atla:focus { top: 12px; } /* ── Zeminler ───────────────────────────────────────────────── */ .z-koyu { background: var(--zemin); color: var(--kirec); --cizgi: var(--cizgi-koyu); --ikincil: var(--gri-acik); } .z-koyu2 { background: var(--zemin-2); color: var(--kirec); --cizgi: var(--cizgi-koyu); --ikincil: var(--gri-acik); } .z-acik { background: var(--kagit); color: var(--murekkep); --cizgi: var(--cizgi-acik); --ikincil: var(--gri); color-scheme: light; } .z-beton { background: var(--beton); color: var(--murekkep); --cizgi: var(--cizgi-acik); --ikincil: #55524c; color-scheme: light; } .z-acik ::selection, .z-beton ::selection { background: var(--murekkep); color: var(--kirec-sabit); } /* ── Yerleşim ───────────────────────────────────────────────── */ .kap { width: 100%; max-width: calc(var(--kap) + 2 * var(--kenar)); margin-inline: auto; padding-inline: var(--kenar); } .kap--dar { max-width: calc(1080px + 2 * var(--kenar)); } .bolum { position: relative; padding-block: clamp(80px, 10vw, 160px); } .bolum--siki { padding-block: clamp(56px, 7vw, 104px); } /* ── Yazı ───────────────────────────────────────────────────── */ .etiket { display: inline-flex; align-items: center; gap: 1em; font: 600 .74rem/1.3 var(--govde); letter-spacing: .16em; text-transform: uppercase; color: var(--vurgu-acik); } .etiket::before { content: ''; flex: none; width: 28px; height: 1px; background: currentColor; } .z-acik .etiket { color: var(--vurgu-koyu); } .z-beton .etiket { color: #6b501f; } /* beton zeminde küçük yazı ≥ 4,5:1 (vurgu-koyu 4,19 veriyordu) */ .etiket--yalin::before { display: none; } .d1, .d2, .d3, .d4 { font-family: var(--govde); font-weight: 700; text-wrap: balance; } .d1 { font-size: clamp(2.3rem, 4.6vw, 4.2rem); line-height: 1.04; letter-spacing: -.03em; } .d2 { font-size: clamp(1.85rem, 3.2vw, 2.9rem); line-height: 1.08; letter-spacing: -.026em; } .d3 { font-size: clamp(1.4rem, 2vw, 1.85rem); line-height: 1.15; letter-spacing: -.018em; } .d4 { font-size: clamp(1.1rem, 1.35vw, 1.28rem); line-height: 1.25; letter-spacing: -.01em; } .d1 em, .d2 em, .d3 em, .d4 em { font-style: normal; color: var(--vurgu-acik); } .z-acik .d1 em, .z-acik .d2 em, .z-acik .d3 em, .z-acik .d4 em, .z-beton .d2 em, .z-beton .d3 em { color: #97722f; } /* açık zeminde altın: büyük yazıda ≥ 3:1 */ .z-beton .d2 em, .z-beton .d3 em { color: var(--vurgu-koyu); } /* beton zeminde #97722f 2,98 veriyordu (04.11.2026 ölçüldü) */ .giris-metni { font-size: clamp(1.1rem, 1.4vw, 1.28rem); line-height: 1.6; color: var(--ikincil, var(--gri-acik)); max-width: 40em; text-wrap: pretty; } .metin { color: var(--ikincil, var(--gri-acik)); max-width: 38em; text-wrap: pretty; } .metin + .metin { margin-top: 1.1em; } .z-acik .giris-metni, .z-acik .metin { color: #4b4843; } .sayi { font-variant-numeric: tabular-nums lining-nums; } .bag { display: inline-flex; align-items: center; gap: .55em; font-weight: 700; font-size: .95rem; letter-spacing: .01em; border-bottom: 1px solid currentColor; padding-bottom: 3px; transition: color .25s, gap .3s var(--egri); } .bag svg { width: 18px; height: 18px; transition: transform .35s var(--egri); } .bag:hover { color: var(--vurgu-acik); } .z-acik .bag:hover, .z-beton .bag:hover { color: var(--vurgu); } .bag:hover svg { transform: translateX(4px); } @media (pointer: coarse) { .bag { position: relative; } .bag::after { content: ''; position: absolute; inset: -8px -4px; } } /* ── Düğmeler ──────────────────────────────────────────────── */ .dugme { --d-zemin: var(--vurgu); --d-yazi: var(--altin-ustu); --d-ust: var(--vurgu-parlak); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .7em; min-height: 52px; padding: 0 26px; background: var(--d-zemin); color: var(--d-yazi); font: 700 .8rem/1 var(--govde); font-stretch: 112%; letter-spacing: .12em; text-transform: uppercase; border: 1px solid var(--d-zemin); border-radius: 0; white-space: nowrap; overflow: hidden; isolation: isolate; transition: color .4s var(--egri), border-color .4s var(--egri); } .dugme svg { width: 18px; height: 18px; flex: none; } .dugme::before { content: ''; position: absolute; inset: 0; background: var(--d-ust); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--egri); z-index: -1; } .dugme:hover::before, .dugme:focus-visible::before { transform: none; transform-origin: left; } .dugme--cizgi { --d-zemin: transparent; --d-yazi: var(--kirec); --d-ust: var(--kirec); border-color: rgba(var(--kirec-k), .38); } .dugme--cizgi:hover, .dugme--cizgi:focus-visible { color: var(--zemin); border-color: var(--kirec); } .dugme--kirec { --d-zemin: var(--kirec); --d-yazi: var(--zemin); --d-ust: var(--vurgu); } .dugme--kirec:hover, .dugme--kirec:focus-visible { color: var(--zemin); border-color: var(--vurgu); } .z-acik .dugme--cizgi, .z-beton .dugme--cizgi { --d-yazi: var(--murekkep); --d-ust: var(--murekkep); border-color: rgba(21, 24, 26, .35); } .z-acik .dugme--cizgi:hover, .z-beton .dugme--cizgi:hover { color: var(--kirec-sabit); border-color: var(--murekkep); } .dugme--kucuk { min-height: 42px; padding: 0 18px; font-size: .74rem; } .dugme[disabled] { opacity: .45; pointer-events: none; } .dugme-grup { display: flex; flex-wrap: wrap; gap: 12px; } /* ── Görsel ─────────────────────────────────────────────────── */ .foto { width: 100%; height: 100%; object-fit: cover; } html.js .foto:not(.foto--lqip) { opacity: 0; transition: opacity .7s var(--egri); } html.js .foto.foto--hazir { opacity: 1; } /* Bölüm başlığı (etiket + başlık + metin) */ .bas { display: grid; gap: 22px; max-width: 980px; } .bas--orta { margin-inline: auto; text-align: center; justify-items: center; } .bas + * { margin-top: clamp(40px, 5vw, 72px); } .bas--yan { max-width: none; grid-template-columns: 1fr; align-items: end; } @media (min-width: 900px) { .bas--yan { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: 48px; } .bas--yan > .etiket { grid-column: 1 / -1; } } /* Ölçü çizgisi: iki ucunda dik çentik, ortasında mono ölçü (mimari çizim dili). */ .olcu { position: relative; display: flex; align-items: center; gap: 12px; font: 500 .72rem/1 var(--govde); letter-spacing: .08em; color: var(--ikincil, var(--gri-acik)); } .olcu::before, .olcu::after { content: ''; flex: 1; height: 1px; background: currentColor; opacity: .45; } .olcu > span { flex: none; } .olcu--cerceve { border-inline: 1px solid currentColor; padding-inline: 2px; } /* İnce ayraç */ .ayrac { height: 1px; background: var(--cizgi); border: 0; margin: 0; } .rozet { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; background: var(--vurgu); color: var(--altin-ustu); font: 600 .7rem/1 var(--govde); border-radius: 10px; } /* ── kaynak/stil/02-ust-alt.css ──────────────────────────────────────────── */ /* Üst bilgi, perde menü, alt bilgi, yüzen iletişim (Ara + WhatsApp), önizleme işareti. */ /* ── Logo (satır içi SVG; SAĞLAM yazısı currentColor, işaret ve YAPI tuğla rengi) ── */ .logo { display: var(--goster-gece); height: 100%; width: auto; } .logo--gunduz { display: var(--goster-gunduz); } /* gündüz temasının logosu (derle.js › logoImg iki basar) */ /* ── Üst bilgi ─────────────────────────────────────────────── */ /* İki kat: üstte ince iletişim şeridi (adres · saat · Instagram · telefon — Marmara İnan'ın başlığı örnek alındı, 02.11.2026), altında menü çubuğu. Sayfa açılışındaki boşluk ikisinin toplamıdır (--ust-toplam); kaydırınca şerit yukarı katlanır ve yalnız çubuk kalır — yapışkan öğeler, çapa kaydırma payı bu yüzden --ust-boy (çubuk) kullanır. */ .ust { position: fixed; inset: 0 0 auto; z-index: 100; height: var(--ust-toplam); display: flex; flex-direction: column; color: var(--kirec); transition: background-color .45s var(--egri), border-color .45s, transform .5s var(--egri); border-bottom: 1px solid transparent; } .ust::before { content: ''; position: absolute; inset: 0 0 -30px; background: linear-gradient(rgba(var(--zemin-k), .62), rgba(var(--zemin-k), 0)); pointer-events: none; transition: opacity .45s; } .ust.is-kaydi { background: rgba(var(--zemin-k), .88); -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); border-bottom-color: var(--cizgi-koyu); transform: translateY(calc(-1 * var(--serit-boy))); } /* Klavyeyle şeride gelinirse katlı şerit geri iner (fareyle tıklama :focus-visible değildir, çubuk zıplamaz). */ .ust.is-kaydi:has(.ust-serit :focus-visible) { transform: none; } .ust.is-kaydi::before { opacity: 0; } .ust.is-gizli { transform: translateY(-101%); } body.menu-acik .ust { transform: none; background: transparent; border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; } body.menu-acik .ust::before { opacity: 0; } .ust-serit { position: relative; flex: none; height: var(--serit-boy); border-bottom: 1px solid var(--cizgi-koyu); background: rgba(10, 13, 17, .38); font-size: .78rem; line-height: 1; color: rgba(var(--kirec-k), .8); } .ust-serit__ic { display: flex; align-items: stretch; gap: clamp(18px, 2.4vw, 40px); height: 100%; } .ust-serit__sag { margin-left: auto; display: flex; align-items: stretch; gap: clamp(18px, 2.4vw, 40px); min-width: 0; } .ust-serit__oge { display: inline-flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; transition: color .3s; } .ust-serit__oge svg { flex: none; width: 15px; height: 15px; color: var(--vurgu-acik); } .ust-serit__etiket { flex: none; font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gri-acik); } .ust-serit__deger { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .ust-serit__tel .ust-serit__deger { color: var(--kirec); font-weight: 600; letter-spacing: .02em; } a.ust-serit__oge:hover .ust-serit__deger { color: var(--vurgu-acik); } .ust-serit__sokak, .ust-serit__ig, .ust-serit__saat { display: none; } @media (min-width: 900px) { .ust-serit__ig { display: inline-flex; } } @media (min-width: 1180px) { .ust-serit__saat { display: inline-flex; } } @media (min-width: 1280px) { .ust-serit__sokak { display: inline; } .ust-serit__adres .ust-serit__deger { max-width: 52ch; } } /* Telefon: etiketler düşer, yalnız konum + numara (dokunma hedefi şeridin tam boyu). */ @media (max-width: 639px) { :root { --serit-boy: 34px; } .ust-serit { font-size: .76rem; } .ust-serit__etiket { display: none; } } .ust__ic { position: relative; flex: none; display: flex; align-items: center; gap: clamp(14px, 2.2vw, 36px); height: var(--ust-boy); } .ust__marka { flex: none; height: 48px; display: block; } .menu { flex: 1; display: none; } .menu__liste { display: flex; justify-content: center; gap: clamp(18px, 2.2vw, 40px); } .menu__bag { position: relative; display: block; padding: 10px 0; font-size: .78rem; font-weight: 700; font-stretch: 112%; letter-spacing: .12em; text-transform: uppercase; color: rgba(var(--kirec-k), .78); transition: color .3s; white-space: nowrap; } .menu__bag::after { content: ''; position: absolute; left: 0; right: 0; bottom: 3px; height: 2px; background: var(--vurgu); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--egri); } .menu__bag:hover, .menu__bag[aria-current="page"] { color: var(--kirec); } .menu__bag:hover::after, .menu__bag[aria-current="page"]::after { transform: none; transform-origin: left; } .ust__sag { margin-left: auto; display: flex; align-items: center; gap: 10px; } .ust__liste, .ust__giris { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 10px; font-size: .76rem; font-weight: 700; font-stretch: 112%; letter-spacing: .12em; text-transform: uppercase; color: rgba(var(--kirec-k), .86); white-space: nowrap; transition: color .3s, background-color .3s; } .ust__liste svg, .ust__giris svg { width: 20px; height: 20px; color: var(--vurgu-acik); } .ust__liste:hover, .ust__giris:hover { color: var(--kirec); } .ust__liste .rozet { margin-left: 2px; } .ust__liste.is-titresim { animation: liste-titre .6s var(--egri); } @keyframes liste-titre { 30% { transform: translateY(-3px); } 60% { transform: translateY(1px); } } .ust__giris span { display: none; } .ust__giris { width: 42px; justify-content: center; padding: 0; } .ust__cagri { display: none; } .menu-dugme { display: inline-flex; align-items: center; gap: 12px; height: 44px; padding: 0 2px 0 6px; font-size: .76rem; font-weight: 700; font-stretch: 112%; letter-spacing: .16em; text-transform: uppercase; } .menu-dugme__cizgiler { position: relative; width: 26px; height: 12px; } .menu-dugme__cizgiler span { position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: transform .5s var(--egri), top .5s var(--egri); } .menu-dugme__cizgiler span:first-child { top: 0; } .menu-dugme__cizgiler span:last-child { top: 10px; left: 8px; } .menu-dugme[aria-expanded="true"] .menu-dugme__cizgiler span:first-child { top: 5px; transform: rotate(45deg); } .menu-dugme[aria-expanded="true"] .menu-dugme__cizgiler span:last-child { top: 5px; left: 0; transform: rotate(-45deg); } @media (min-width: 640px) { .ust__cagri { display: inline-flex; } } @media (min-width: 1180px) { .menu { display: block; } .menu-dugme { display: none; } } @media (max-width: 1179px) { :root { --ust-boy: 68px; } .ust__marka { height: 42px; } } /* Telefon: liste yalnız simge + rozet (yazı ekran okuyucuda), "Fiyat sor" yerine perde menüdeki WhatsApp. */ @media (max-width: 639px) { .ust__sag { gap: 4px; } .ust__liste { width: 44px; justify-content: center; padding: 0; } .ust__liste-yazi { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .ust__liste .rozet { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; font-size: .66rem; } .ust__giris { width: 44px; height: 44px; } } @media (max-width: 399px) { .ust__marka { height: 34px; } .menu-dugme { width: 44px; justify-content: center; padding: 0; } .menu-dugme__yazi { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } } /* ── Perde menü (< 1180 px) ─────────────────────────────────── */ /* Kayan kutu perdenin KENDİSİ değil, üst bilginin altındaki iç kutu (Karmer'de 26.10.2026'da ölçülen ders): perde kaysaydı kısa / yatay ekranda zemin içerikle birlikte yukarı kayar, alttan sayfa görünürdü. */ .perde-menu { position: fixed; inset: 0; z-index: 90; color: var(--kirec); } .perde-menu__zemin { position: absolute; inset: 0; background: var(--zemin); } .perde-menu__zemin::after { content: ''; position: absolute; inset: 0; background: url(/assets/img/foto/beton-960.webp?v=036af00c) center / cover; opacity: .1; } .perde-menu__ic { position: absolute; inset: var(--ust-toplam) 0 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding-top: 4vh; padding-bottom: max(32px, env(safe-area-inset-bottom)); } .perde-menu__liste { display: grid; gap: 0; } .perde-menu__bag { display: flex; align-items: baseline; gap: 18px; padding: 10px 0; font: 700 clamp(1.7rem, 6.4vw, 2.6rem)/1.15 var(--govde); letter-spacing: -.02em; border-bottom: 1px solid var(--cizgi-koyu); } .perde-menu__bag[aria-current="page"] { color: var(--vurgu-acik); } .perde-menu__no { font: 500 .72rem/1 var(--govde); letter-spacing: .14em; color: var(--vurgu-acik); transform: translateY(-.7em); } .perde-menu__alt { display: grid; gap: 6px; } .perde-menu__tel { font: 700 clamp(1.5rem, 6vw, 2rem)/1.1 var(--govde); letter-spacing: -.02em; } .perde-menu__ek { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 700; font-stretch: 110%; font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; color: var(--vurgu-acik); } .perde-menu__ek svg { width: 20px; height: 20px; } .perde-menu__adres { color: var(--gri-acik); font-size: .9rem; } html.hareket .perde-menu { clip-path: inset(0 0 100% 0); transition: clip-path .7s var(--egri-yumusak); } html.hareket .perde-menu.is-acik { clip-path: inset(0 0 0 0); } html.hareket .perde-menu__liste li { opacity: 0; transform: translateY(40px); transition: opacity .6s var(--egri), transform .8s var(--egri); transition-delay: calc(.18s + var(--i) * 55ms); } html.hareket .perde-menu.is-acik .perde-menu__liste li { opacity: 1; transform: none; } html.hareket .perde-menu__alt { opacity: 0; transition: opacity .6s .5s; } html.hareket .perde-menu.is-acik .perde-menu__alt { opacity: 1; } body.menu-acik { overflow: hidden; } @media (max-height: 520px) and (orientation: landscape) { .perde-menu__ic { padding-top: 10px; gap: 24px; } .perde-menu__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } .perde-menu__bag { font-size: clamp(1.4rem, 7.5vh, 2rem); } .perde-menu__alt { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); align-items: center; } } /* ── Alt bilgi ─────────────────────────────────────────────── */ .alt { position: relative; background: var(--zemin-2); color: var(--kirec); padding: clamp(72px, 9vw, 128px) 0 28px; overflow: hidden; isolation: isolate; } .alt__doku { position: absolute; inset: 0; z-index: -1; background: url(/assets/img/foto/beton-1600.webp?v=01b63ebb) center / cover; opacity: .08; } .alt__doku::after { content: ''; position: absolute; inset: 0; background: linear-gradient(var(--zemin-2) 0%, transparent 40%, var(--zemin-2) 100%); } .alt__ust { display: grid; gap: 40px; padding-bottom: clamp(48px, 6vw, 88px); border-bottom: 1px solid var(--cizgi-koyu); } .alt__slogan { font: 700 clamp(2.2rem, 4.6vw, 4rem)/1.05 var(--govde); letter-spacing: -.03em; } .alt__slogan em { font-style: normal; color: var(--vurgu-acik); } .alt__cagri { display: grid; gap: 18px; align-content: end; justify-items: start; } .alt__tel { font: 500 clamp(1.7rem, 3.2vw, 2.6rem)/1 var(--govde); letter-spacing: -.03em; transition: color .3s; } .alt__tel:hover { color: var(--vurgu-acik); } .alt__izgara { display: grid; gap: 40px 32px; padding-block: clamp(44px, 5vw, 72px); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .alt__logo { display: block; height: 64px; margin-bottom: 20px; } .alt__marka p { color: var(--gri-acik); font-size: .9rem; } .alt__sutun .etiket { margin-bottom: 18px; } .alt__sutun li a:not(.bag) { display: inline-block; padding-block: 4px; } @media (max-width: 899px) { .alt__sutun li a:not(.bag) { padding-block: 9px; } } .alt__sutun a:not(.bag) { color: rgba(var(--kirec-k), .82); transition: color .25s; } .alt__sutun a:not(.bag):hover { color: var(--vurgu-acik); } .alt__sutun address { color: rgba(var(--kirec-k), .82); margin-bottom: 16px; } .alt__taban { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-top: 22px; border-top: 1px solid var(--cizgi-koyu); font: 400 .76rem/1.5 var(--govde); letter-spacing: .04em; color: var(--gri-acik); } /* İLGERU imzası — Köroğlu / Çağöz / Yükselen / Ada sitelerindeki AYNI söz; paragraf: cümle içi bağlantı (WCAG 2.5.8 istisnası). */ .alt__imza { margin: 0; } .alt__imza a { color: var(--kirec); font-weight: 500; text-decoration: none; } .alt__imza a:hover { color: var(--vurgu-acik); text-decoration: underline; text-underline-offset: 4px; } @media (min-width: 900px) { .alt__ust { grid-template-columns: 1.4fr 1fr; align-items: end; } .alt__izgara { grid-template-columns: 1.4fr 1fr 1fr 1fr; } } /* ── Yüzen iletişim: Ara + WhatsApp ─────────────────────────── */ /* Sağ altta üst üste iki hap (masaüstünde numara ve "WhatsApp" yazılı, telefonda yuvarlak simge). Sayfanın tepesinde gizli — orada üst bilgi (şeritte numara, çubukta "Fiyat sor") var; aşağı inince görünür, alt bilgideki çağrı ekrana girince yine gizlenir (site.js › ustGuncelle). Firma: "iletişim kısmı kolay ve her yerden ulaşılır olsun, direkt benim numarama". */ .yuzen { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 80; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; transition: transform .5s var(--egri), opacity .4s; } .wa-yuzen, .yuzen__tel { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 20px 0 16px; background: rgba(var(--zemin-k), .9); color: var(--kirec); border: 1px solid rgba(201, 164, 92, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: .76rem; font-weight: 700; font-stretch: 112%; letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); transition: border-color .3s, background-color .3s; } .wa-yuzen svg, .yuzen__tel svg { width: 22px; height: 22px; flex: none; } .wa-yuzen svg { color: #3fd27a; } .yuzen__tel { background: var(--vurgu); border-color: var(--vurgu); color: var(--altin-ustu); font-size: .9rem; letter-spacing: .02em; text-transform: none; } .wa-yuzen:hover { border-color: var(--vurgu-acik); } .yuzen__tel:hover { background: var(--vurgu-parlak); border-color: var(--vurgu-parlak); } html.js .yuzen:not(.is-gorunur) { opacity: 0; transform: translateY(20px); pointer-events: none; } body.menu-acik .yuzen, html.liste-acik .yuzen { opacity: 0; pointer-events: none; } @media (max-width: 599px) { .wa-yuzen span, .yuzen__tel span { display: none; } .wa-yuzen, .yuzen__tel { width: 52px; padding: 0; justify-content: center; } } /* ── Önizleme işareti (icerik.json › onay_bekleyen boş değilken) ── */ .onay-isareti { position: fixed; left: max(12px, env(safe-area-inset-left)); bottom: max(12px, env(safe-area-inset-bottom)); z-index: 79; margin: 0; padding: 6px 10px; background: #f2c14e; color: #1a1600; font: 500 .7rem/1.2 var(--govde); letter-spacing: .06em; text-transform: uppercase; pointer-events: none; } /* ── kaynak/stil/03-hareket.css ──────────────────────────────────────────── */ /* Hareket dili: belirme, görsel perdesi, kelime kelime yükselen başlık, şerit. Gizli başlangıç durumları YALNIZ html.hareket altındadır (betik yoksa içerik görünür). */ html.hareket [data-reveal]:not([data-reveal="perde"]):not([data-reveal="kelime"]):not([data-reveal="cizgi"]) { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity .9s var(--egri), transform 1.1s var(--egri); transition-delay: calc(var(--i, 0) * 70ms); } html.hareket [data-reveal].is-gorundu:not([data-reveal="perde"]):not([data-reveal="kelime"]):not([data-reveal="cizgi"]) { opacity: 1; transform: none; } /* Görsel perdesi: kap aşağıdan yukarı açılır, görsel içeride hafifçe küçülür. */ html.hareket [data-reveal="perde"] { clip-path: inset(100% 0 0 0); transition: clip-path 1.2s var(--egri-yumusak); transition-delay: calc(var(--i, 0) * 90ms); } html.hareket [data-reveal="perde"] img { transform: scale(1.16); transition: transform 1.8s var(--egri); transition-delay: calc(var(--i, 0) * 90ms); } html.hareket [data-reveal="perde"].is-gorundu { clip-path: inset(0 0 0 0); } html.hareket [data-reveal="perde"].is-gorundu img { transform: none; } /* Kelime kelime: site.js her kelimeyi .k > span ile sarar. Büyük harf başlıkta İ Ğ Ü Ö'nün noktası/şapkası kutunun üstüne taşar — dolgu + eksi kenar boşluğu kırpma alanını büyütür (Karmer'de "Önce" → "Once" basılıyordu). */ [data-reveal="kelime"] .k { display: inline-block; overflow: hidden; vertical-align: top; padding: .26em 0 .22em; margin: -.26em 0 -.22em; } [data-reveal="kelime"] .k > span { display: inline-block; } html.hareket [data-reveal="kelime"] .k > span { transform: translate3d(0, 160%, 0); transition: transform 1.05s var(--egri); transition-delay: calc(var(--k, 0) * 60ms + var(--i, 0) * 70ms); } html.hareket [data-reveal="kelime"].is-gorundu .k > span { transform: none; } /* Çizgi: soldan sağa */ html.hareket [data-reveal="cizgi"] { position: relative; } html.hareket [data-reveal="cizgi"]::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--cizgi); transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--egri); transition-delay: calc(var(--i, 0) * 60ms); } html.hareket [data-reveal="cizgi"].is-gorundu::before { transform: none; } /* Geri/ileri ile gelinen sayfada açılış oynamaz */ html.hareket-sessiz [data-reveal] { transition-duration: 0s !important; transition-delay: 0s !important; } html.hareket-sessiz [data-reveal] * { transition-duration: 0s !important; transition-delay: 0s !important; } /* ── Şerit (kayan yazı) ─────────────────────────────────────── */ .serit { overflow: hidden; border-block: 1px solid var(--cizgi, var(--cizgi-koyu)); padding-block: clamp(16px, 2.2vw, 28px); white-space: nowrap; } .serit__ic { display: inline-flex; align-items: center; will-change: transform; } .serit__k { font: 800 clamp(1.7rem, 4.2vw, 3.8rem)/1 var(--govde); font-stretch: 118%; text-transform: uppercase; letter-spacing: -.01em; padding-inline: clamp(18px, 2.2vw, 34px); } .serit__k:nth-child(4n+1) { color: transparent; -webkit-text-stroke: 1px var(--kirec); } .z-acik .serit__k:nth-child(4n+1), .z-beton .serit__k:nth-child(4n+1) { -webkit-text-stroke-color: var(--murekkep); } .serit__ayrac { width: 14px; height: 14px; flex: none; background: var(--vurgu); } html.hareket .serit__ic.is-hazir { animation: serit var(--serit-sure, 60s) linear infinite; } .serit:hover .serit__ic { animation-play-state: paused; } @keyframes serit { to { transform: translate3d(-50%, 0, 0); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* ── kaynak/stil/04-bilesenler.css ───────────────────────────────────────── */ /* Ortak bileşenler: süreç, ilkeler, hizmetler, yazı kartı, SSS, tablo, form alanları, marka logosu ve vitrini. */ /* ── Süreç ─────────────────────────────────────────────────── */ .surec { display: grid; gap: 40px; counter-reset: s; } @media (min-width: 900px) { .surec { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } } .surec__adim { position: relative; display: grid; gap: 14px; padding-top: 26px; border-top: 1px solid var(--cizgi); } .surec__adim::before { content: ''; position: absolute; left: 0; top: -2px; width: 56px; height: 3px; background: var(--vurgu); } .surec__no { font: 600 .8rem/1 var(--govde); letter-spacing: .16em; color: var(--vurgu-acik); } .z-acik .surec__no, .z-beton .surec__no { color: var(--vurgu-koyu); } .surec__ad { font: 700 1.22rem/1.25 var(--govde); letter-spacing: -.012em; } .surec__adim p { color: var(--ikincil); max-width: 30em; } /* ── İlkeler ───────────────────────────────────────────────── */ .ilkeler { display: grid; gap: 1px; background: var(--cizgi); border: 1px solid var(--cizgi); } @media (min-width: 700px) { .ilkeler { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { .ilkeler { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .ilke { display: grid; align-content: start; gap: 12px; padding: 28px 24px 32px; background: var(--zemin-2); } .z-acik .ilke { background: var(--kagit); } .ilke__no { font: 500 .74rem/1 var(--govde); color: var(--vurgu-acik); } .z-acik .ilke__no { color: var(--vurgu); } .ilke__ad { font: 700 1.12rem/1.25 var(--govde); letter-spacing: -.01em; } .ilke p { color: var(--ikincil); font-size: .97rem; } /* ── Hizmetler ─────────────────────────────────────────────── */ .hizmetler { display: grid; gap: 1px; background: var(--cizgi); border: 1px solid var(--cizgi); } /* Üçlü sıra; son sıra eksik kalırsa kalan kartlar satırı doldurur (5 → 3 + 2) — boş hücre çizgi renginde görünürdü. Tam DÖRT kart 2 + 2 dizilir (3 + 1'de dördüncü kart tek başına satırı kaplıyordu). */ @media (min-width: 900px) { .hizmetler { grid-template-columns: repeat(6, minmax(0, 1fr)); } .hizmet { grid-column: span 2; } .hizmet:nth-child(3n+1):nth-last-child(2), .hizmet:nth-child(3n+1):nth-last-child(2) ~ .hizmet { grid-column: span 3; } .hizmet:nth-child(3n+1):last-child { grid-column: span 6; } .hizmet:first-child:nth-last-child(4), .hizmet:first-child:nth-last-child(4) ~ .hizmet { grid-column: span 3; } } .hizmet { display: grid; align-content: start; gap: 14px; padding: 32px 28px 36px; background: var(--beton); } .hizmet__ikon { width: 34px; height: 34px; color: var(--vurgu); } .hizmet .metin { color: #4f4c46; } /* ── Yazı kartları (rehber tanıtımı) ───────────────────────── */ .yazilar { display: grid; gap: 1px; background: var(--cizgi-koyu); border: 1px solid var(--cizgi-koyu); } @media (min-width: 900px) { .yazilar { grid-template-columns: 1.3fr 1fr 1fr; } } .yazi-kart { position: relative; display: grid; align-content: end; gap: 12px; min-height: 280px; height: 100%; padding: 28px; background: var(--zemin-2); overflow: hidden; isolation: isolate; transition: background-color .4s; } .yazi-kart:hover, .yazi-kart:focus-visible { background: var(--zemin-3); } .yazi-kart__doku { position: absolute; inset: 0; z-index: -1; background-size: cover; background-position: center; opacity: .2; transition: opacity .6s, transform 1.2s var(--egri); } .yazi-kart:hover .yazi-kart__doku { opacity: .32; transform: scale(1.04); } .yazi-kart__no { position: absolute; top: 24px; left: 28px; font-size: .74rem; color: var(--vurgu-acik); } .yazi-kart .metin { font-size: .95rem; } /* ── SSS ───────────────────────────────────────────────────── */ .sss { border-top: 1px solid var(--cizgi); } .sss details { border-bottom: 1px solid var(--cizgi); } .sss summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; padding: 16px 0; cursor: pointer; list-style: none; font: 700 1.05rem/1.35 var(--govde); } .sss summary::-webkit-details-marker { display: none; } .sss summary::after { content: ''; flex: none; width: 14px; height: 14px; background: linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 14px no-repeat; transition: transform .35s var(--egri); color: var(--vurgu); } .sss details[open] summary::after { transform: rotate(45deg); } .sss details p { padding: 0 0 22px; max-width: 46em; color: var(--ikincil); } /* ── Tablo ─────────────────────────────────────────────────── */ .tablo-kap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--cizgi); } .tablo { width: 100%; border-collapse: collapse; font-size: .95rem; } .tablo th, .tablo td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--cizgi); vertical-align: top; } .tablo thead th { font: 500 .72rem/1.3 var(--govde); letter-spacing: .1em; text-transform: uppercase; color: var(--ikincil); background: rgba(127, 127, 127, .06); } .tablo tbody th { font-weight: 700; white-space: nowrap; } .tablo tbody tr:last-child > * { border-bottom: 0; } .tablo--sayi td, .tablo--sayi tbody th { font-family: var(--govde); font-variant-numeric: tabular-nums; } .tablo--sayi td { text-align: right; } .tablo--sayi thead th:not(:first-child) { text-align: right; } /* ── Form alanları ─────────────────────────────────────────── */ .alan { display: grid; gap: 8px; min-width: 0; align-content: start; } .alan > span:first-child { font: 500 .72rem/1.2 var(--govde); letter-spacing: .1em; text-transform: uppercase; color: var(--ikincil, var(--gri-acik)); } .alan input, .alan select, .alan textarea, .alan__kutu { width: 100%; min-height: 50px; padding: 12px 14px; background: rgba(var(--kirec-k), .04); border: 1px solid rgba(var(--kirec-k), .22); border-radius: 0; color: inherit; font: 500 1rem/1.3 var(--govde); outline: none; transition: border-color .25s, background-color .25s; } .alan__kutu { display: flex; align-items: center; gap: 8px; padding: 0 14px 0 0; } .alan__kutu input { border: 0; background: none; min-height: 48px; font-family: var(--govde); font-variant-numeric: tabular-nums; } .alan__kutu b { flex: none; font: 500 .82rem/1 var(--govde); color: var(--ikincil, var(--gri-acik)); } .alan input:focus, .alan select:focus, .alan textarea:focus, .alan__kutu:focus-within { border-color: var(--vurgu-acik); background: rgba(var(--kirec-k), .07); } .alan select { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; } .alan select option { color: #111; } .alan textarea { min-height: 120px; resize: vertical; } .z-acik .alan input, .z-acik .alan select, .z-acik .alan textarea, .z-acik .alan__kutu { background: #fff; border-color: rgba(21, 24, 26, .2); } .alan-iki { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } input[type="number"] { -moz-appearance: textfield; appearance: textfield; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } @media (max-width: 599px) { .alan input, .alan select, .alan textarea { font-size: 16px; } } /* ── Marka logosu ── RENKLİ, zemini saydam ve KOYU ZEMİNE UYARLANMIŞ (araclar/marka-hatti.js › .webp: siyah / gri yazı kireç, koyu renk tonu korunarak açılmış, canlı renk aynen). Logo PLAKASIZ, sayfanın koyu zemininde kendi renkleriyle durur. 02.11.2026'da sırasıyla: tek renk maske → krem plakada renkli → İLGERU: "markalar arkası beyaz bir fonda olması güzel değil, sayfa ile uyumlu premium gözüksünler, kendi renklerinde olsunlar". Açık zemine logo KOYMAYIN (kireç yazılar kaybolur). --lh logo ölçüsü; --k logoya özel boy oranı (alan eşitlemesi), --o en/boy (parcalar.js › markaKutu). */ .mkutu { --lh: 36px; display: inline-flex; align-items: center; justify-content: center; max-width: 100%; height: calc(var(--lh) * 1.25); color: var(--kirec); } .mlogo, .mlogo-g { display: block; width: auto; height: calc(var(--k, .8) * var(--lh)); max-width: 100%; object-fit: contain; } .mlogo { display: var(--goster-gece); } .mlogo-g { display: var(--goster-gunduz); } /* gündüz teması: asıl renkli logo (marka-hatti.js › -gunduz.webp) */ /* Logosu olmayan marka: yazı logosu — ilk sözcük kalın (yazıldığı gibi: Türkçe büyük harf yabancı adı bozar — "Vizotherm" → "VİZOTHERM"), kalanı altında aralıklı küçük büyük harf ("Kılıçoğlu / KİREMİT"). */ .mkutu--yazi { flex-direction: column; gap: calc(var(--lh) * .1); text-align: center; line-height: 1; overflow: hidden; } .mkutu__ad { font: 800 calc(var(--lh) * .42)/1 var(--govde); font-stretch: 112%; letter-spacing: -.01em; white-space: nowrap; } .mkutu__alt { font: 500 max(10px, calc(var(--lh) * .2))/1 var(--govde); letter-spacing: .24em; text-transform: uppercase; opacity: .62; white-space: nowrap; } /* ── Marka vitrini: yetkili bayilikler + satılan markalar (parcalar.js › markaVitrini) ── Bölümün koyu zemininde ince kireç çizgili ızgara (panel YOK): en çok 5 sütun — 5 bayilik bir sırada, 10 marka iki sırada; dar ekranda hücre en az 140 px (bayilik 160 px). Hücre: ortada renkli logo, altında ne satıldığı; üstüne gelince üstte altın çizgi + altın ışık, logo hafif kalkar, ok belirir. */ .mvitrin__kap { display: grid; gap: clamp(40px, 5vw, 64px); } .mvitrin__bas { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; font: 500 .72rem/1.6 var(--govde); letter-spacing: .14em; text-transform: uppercase; color: var(--vurgu-acik); } .mvitrin__bas::after { content: ''; flex: 1; height: 1px; background: var(--cizgi, var(--cizgi-koyu)); } .mvitrin { --sutun: 5; --en-az: 140px; display: grid; border-top: 1px solid var(--cizgi); border-left: 1px solid var(--cizgi); grid-template-columns: repeat(auto-fill, minmax(max(var(--en-az), calc(100% / var(--sutun))), 1fr)); } .mvitrin--bayi { --en-az: 160px; } .mvitrin > li { display: flex; border-right: 1px solid var(--cizgi); border-bottom: 1px solid var(--cizgi); } .mkart { position: relative; isolation: isolate; overflow: hidden; flex: 1; display: grid; justify-items: center; align-content: center; gap: clamp(14px, 1.6vw, 20px); min-height: clamp(132px, 12vw, 176px); padding: 20px 14px 18px; color: var(--kirec); background: linear-gradient(180deg, rgba(var(--kirec-k), .028), rgba(var(--kirec-k), 0) 70%); } .mvitrin--bayi .mkart { min-height: clamp(164px, 16vw, 232px); } .mkart::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .4s ease; background: radial-gradient(110% 85% at 50% 0%, rgba(201, 164, 92, .16), transparent 64%); } .mkart::after { content: ''; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, var(--vurgu), transparent); opacity: 0; transform: scaleX(.4); transition: opacity .4s ease, transform .5s var(--egri); } /* Logo hücreyi doldurur (02.11.2026, İLGERU: "görseller çerçeveler içinde küçük yer kaplıyor, markalar ve bayilikler büyüsün"): en geniş logo 2,39 × --lh genişlikte çizilir (parcalar.js › markaKutu) — 1440 px'te hücrenin iç eni ~223 px; dar ekranda logo max-width ile hücreye sığacak kadar küçülür (oranı bozulmaz). Önceki boylar 36–50 / 44–70 px idi. */ .mkart .mkutu { --lh: clamp(44px, 5.2vw, 76px); transition: transform .4s ease; } .mvitrin--bayi .mkart .mkutu { --lh: clamp(52px, 6.2vw, 92px); } .mkart__urun { display: inline-flex; align-items: center; gap: 8px; font: 500 .66rem/1 var(--govde); letter-spacing: .18em; text-transform: uppercase; color: var(--gri-acik); } .mkart__urun svg { flex: none; width: 12px; height: 12px; color: var(--vurgu); opacity: 0; transform: translateX(-4px); transition: opacity .3s ease, transform .3s ease; } .mkart:hover::before, .mkart:focus-visible::before, .mkart:hover::after, .mkart:focus-visible::after { opacity: 1; } .mkart:hover::after, .mkart:focus-visible::after { transform: none; } .mkart:hover .mkutu, .mkart:focus-visible .mkutu { transform: translateY(-2px); } .mkart:hover .mkart__urun svg, .mkart:focus-visible .mkart__urun svg { opacity: 1; transform: none; } .mkart:focus-visible { outline: 2px solid var(--vurgu); outline-offset: -2px; } @media (hover: none) { .mkart__urun svg { opacity: .7; transform: none; } } /* ── kaynak/stil/05-anasayfa.css ─────────────────────────────────────────── */ /* Anasayfa: üstte marka bandı, altında ürün görselleri; konum. 03.11.2026 firmanın isteğiyle (Sağlam Yapı: "şimdilik üstte markalar — bu şekilde [bayi takvimi] — altında ürünlerin görselleri", "ürünlerin markalarını yazmak yerine görsellerini kullanmak", örnek kabatas.com.tr). Önceki açılış — ürün grupları kaydırağı, kartın üstünde grubun logoları (Marmara İnan örneği) — kalktı: markalar YALNIZ üstteki bantta, ürün kartı yalnız fotoğraf + ad. */ /* ── Marka bandı ───────────────────────────────────────────── */ /* Sayfanın İLK bölümü: üst bilginin (şerit + çubuk) altından başlar. Bütün markalar EŞİT boyda (alan eşitlemesi --k) — takvimdeki gibi: masaüstünde iki sıra (8 + 7, ortalı), tablette üç sıra; logonun altında bayilikte altın "Yetkili bayi", öbürlerinde ne satıldığı. Telefonda tek sıra, kendiliğinden kayar (liste kopyasıyla kesintisiz döngü); az hareket isteyende kaymaz, parmakla kaydırılır. */ .marka-bant { padding: calc(var(--ust-toplam) + clamp(12px, 2.2vh, 24px)) 0 0; } .marka-bant__bas { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; font: 500 .7rem/1.6 var(--govde); letter-spacing: .14em; text-transform: uppercase; color: var(--vurgu-acik); } .marka-bant__bas::after { content: ''; flex: 1; height: 1px; background: var(--cizgi-koyu); } .marka-bant__liste { --sira: 8; --aralik: 10px; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--aralik); } .marka-bant__liste > li { display: flex; flex: 0 0 calc((100% - (var(--sira) - 1) * var(--aralik)) / var(--sira)); } .marka-bant__liste > [data-kopya] { display: none; } @media (max-width: 1099px) { .marka-bant__liste { --sira: 5; } } .mbk { position: relative; flex: 1; display: grid; justify-items: center; align-content: center; gap: 8px; min-width: 0; padding: 10px 8px 11px; border: 1px solid var(--cizgi-koyu); color: var(--kirec); background: linear-gradient(180deg, rgba(var(--kirec-k), .035), rgba(var(--kirec-k), .008)); transition: border-color .3s ease, background-color .3s ease; } .mbk .mkutu { --lh: clamp(36px, 3.1vw, 46px); transition: transform .35s ease; } .mbk__etiket { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 .64rem/1.2 var(--govde); letter-spacing: .14em; text-transform: uppercase; color: var(--gri-acik); } .mbk__etiket--bayi { color: var(--vurgu-acik); } .mbk:hover, .mbk:focus-visible { border-color: rgba(201, 164, 92, .55); background-color: rgba(201, 164, 92, .06); } .mbk:hover .mkutu, .mbk:focus-visible .mkutu { transform: translateY(-2px); } .mbk:focus-visible { outline: 2px solid var(--vurgu); outline-offset: -2px; } @media (max-width: 759px) { .marka-bant__kap { overflow: hidden; margin-inline: calc(-1 * var(--kenar)); -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); } .marka-bant__liste { flex-wrap: nowrap; justify-content: flex-start; gap: 0; width: max-content; animation: marka-kay 46s linear infinite; } .marka-bant__liste > li, .marka-bant__liste > [data-kopya] { display: flex; flex: 0 0 auto; width: 138px; padding-right: 10px; } .marka-bant__kap:hover .marka-bant__liste, .marka-bant__kap:focus-within .marka-bant__liste { animation-play-state: paused; } .mbk .mkutu { --lh: 38px; } } @keyframes marka-kay { to { transform: translateX(-50%); } } @media (max-width: 759px) and (prefers-reduced-motion: reduce) { .marka-bant__kap { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding-inline: var(--kenar); -webkit-mask-image: none; mask-image: none; } .marka-bant__kap::-webkit-scrollbar { display: none; } .marka-bant__liste { animation: none; } .marka-bant__liste > [data-kopya] { display: none; } } /* ── Açılış: başlık + ürün görselleri ──────────────────────── */ .giris { position: relative; padding: clamp(22px, 3.4vh, 40px) 0 clamp(48px, 7vh, 88px); overflow: hidden; isolation: isolate; } .giris__ust { display: grid; gap: 16px 64px; align-items: end; margin-bottom: clamp(20px, 3.2vh, 34px); } .giris__yazi { display: grid; gap: 14px; } .giris__baslik { font-size: clamp(2.2rem, 4.2vw, 3.6rem); } .giris__yan { display: grid; gap: 18px; justify-items: start; } .giris__yan .giris-metni { font-size: clamp(1rem, 1.2vw, 1.1rem); } @media (min-width: 1000px) { .giris__ust { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } } /* Ürün görselleri: kart = grubun fotoğrafı (4:3) + adı + ürün sayısı. Masaüstünde 4, tablette 3, telefonda 2 sütun; İş Makinesi kartı (firmanın kendi Manitou fotoğrafı) iki sütun kaplar ve son satırı tamamlar (10 + 2 = 12 · 9 + 1 + 2 · 10 + 2). */ .ukartlar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } @media (min-width: 760px) { .ukartlar { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } } @media (min-width: 1100px) { .ukartlar { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .ukart { display: flex; min-width: 0; } .ukart--genis { grid-column: span 2; } .ukart__bag { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; color: var(--kirec); background: var(--zemin-2); border: 1px solid var(--cizgi-koyu); transition: border-color .35s ease; } .ukart__foto { position: relative; display: block; flex: none; aspect-ratio: 4 / 3; overflow: hidden; background: var(--zemin-3); } .ukart__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--egri); } .ukart__govde { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 15px 18px 14px; } .ukart__ad { font: 700 1.06rem/1.28 var(--govde); letter-spacing: -.01em; } .ukart__metin { font-size: .92rem; line-height: 1.55; color: var(--gri-acik); } .ukart__son { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--cizgi-koyu); } .ukart__sayi { font-size: .82rem; color: var(--gri-acik); } .ukart__git { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; min-height: 24px; font: 600 .72rem/1 var(--govde); letter-spacing: .1em; text-transform: uppercase; color: var(--vurgu-acik); } .ukart__git svg { width: 14px; height: 14px; transition: transform .35s var(--egri); } .ukart__bag:hover, .ukart__bag:focus-visible { border-color: rgba(201, 164, 92, .55); } .ukart__bag:hover .ukart__foto img, .ukart__bag:focus-visible .ukart__foto img { transform: scale(1.05); } .ukart__bag:hover .ukart__git svg, .ukart__bag:focus-visible .ukart__git svg { transform: translateX(4px); } .ukart__bag:focus-visible { outline: 2px solid var(--vurgu); outline-offset: -2px; } @media (prefers-reduced-motion: reduce) { .ukart__foto img { transition: none; } .ukart__bag:hover .ukart__foto img { transform: none; } } /* Geniş kart: tablet ve masaüstünde fotoğraf solda (kart boyunca), yazı sağda; telefonda fotoğraf üstte (16:9). */ @media (min-width: 760px) { .ukart--genis .ukart__bag { flex-direction: row; } /* Fotoğraf satırın yüksekliğini BELİRLEMEZ (dikey Manitou fotoğrafı satırı uzatıyordu): kutu kartın boyunca, görsel içine kırpılır. */ .ukart--genis .ukart__foto { flex: 0 0 calc(50% - 8px); aspect-ratio: auto; } .ukart--genis .ukart__foto img { position: absolute; inset: 0; } .ukart--genis .ukart__govde { justify-content: center; gap: 12px; padding: 22px 24px 18px; } .ukart--genis .ukart__ad { font-size: 1.24rem; } } @media (max-width: 759px) { .ukart--genis .ukart__foto { aspect-ratio: 16 / 9; } } /* Telefon: ürün görselleri ilk ekranda başlasın — açıklama gizli, düğmeler küçük ve yan yana; kart yazısı biraz küçük. */ @media (max-width: 599px) { .giris__yan .giris-metni { display: none; } .giris__ust { gap: 14px; } .giris__yan .dugme-grup { flex-wrap: nowrap; gap: 8px; width: 100%; } .giris__yan .dugme { flex: 1 1 0; justify-content: center; min-width: 0; padding-inline: 10px; } .ukart__govde { gap: 8px; padding: 12px 12px 10px; } .ukart__ad { font-size: .95rem; } .ukart__son { padding-top: 8px; } .ukart__git { gap: 5px; letter-spacing: .06em; } } /* ── Konum ─────────────────────────────────────────────────── */ .konum { padding-block: clamp(64px, 8vw, 120px); } .konum__ic { display: grid; gap: 32px; } .konum__yer { margin-top: 18px; font: 700 clamp(2.2rem, 5.4vw, 4.6rem)/1.02 var(--govde); letter-spacing: -.03em; } .konum__yer span { display: block; color: var(--vurgu-koyu); font-size: .5em; letter-spacing: -.01em; margin-top: .2em; } .konum__bilgi { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 40px; padding-top: 28px; border-top: 1px solid var(--cizgi); } .konum__bilgi address { color: #4b4843; } .konum__tel { font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: -.03em; } .konum__tel:hover { color: var(--vurgu); } /* ── kaynak/stil/06-urunler.css ──────────────────────────────────────────── */ /* Sayfa başı (iç sayfalar) ve Ürünler kataloğu. */ /* ── Sayfa başı ────────────────────────────────────────────── */ .sayfa-bas { position: relative; padding: calc(var(--ust-toplam) + clamp(56px, 9vw, 120px)) 0 clamp(56px, 7vw, 96px); overflow: hidden; isolation: isolate; } .sayfa-bas::before { content: ''; position: absolute; inset: 0; z-index: -2; background: var(--doku) center / cover; opacity: .22; } .sayfa-bas::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--zemin) 0%, rgba(var(--zemin-k), .82) 55%, rgba(var(--zemin-k), .55) 100%), linear-gradient(0deg, var(--zemin) 0%, transparent 40%); } .sayfa-bas__ic { display: grid; gap: 24px; justify-items: start; } .sayfa-bas .d1 { font-size: clamp(2.8rem, 7.2vw, 7rem); } .icindekiler { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .icindekiler a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--cizgi-koyu); font: 500 .74rem/1 var(--govde); letter-spacing: .06em; color: var(--gri-acik); transition: color .25s, border-color .25s; } .icindekiler a:hover { color: var(--kirec); border-color: var(--vurgu); } /* ── Katalog ───────────────────────────────────────────────── */ .katalog__cubuk { position: sticky; top: 0; z-index: 20; background: rgba(235, 231, 224, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--cizgi-acik); transition: top .5s var(--egri); } html:not(.liste-acik) body:has(.ust:not(.is-gizli)) .katalog__cubuk { top: var(--ust-boy); } /* Kaydırılmışken klavyeyle üst şeride gelinirse şerit iner (02-ust-alt.css) — çubuk onun altına geçer. */ html:not(.liste-acik) body:has(.ust.is-kaydi .ust-serit :focus-visible) .katalog__cubuk { top: var(--ust-toplam); } .katalog__cubuk-ic { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding-block: 14px; } .katalog__ara { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; background: #fff; border: 1px solid rgba(21, 24, 26, .18); } .katalog__ara:focus-within { border-color: var(--vurgu-koyu); } .katalog__ara svg { width: 20px; height: 20px; flex: none; color: var(--vurgu-koyu); } .katalog__ara input { flex: 1; min-width: 0; height: 46px; border: 0; background: none; outline: none; font: 500 1rem/1 var(--govde); color: var(--murekkep); } .katalog__gruplar { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; } .katalog__gruplar::-webkit-scrollbar { display: none; } .kdugme { flex: none; min-height: 40px; padding: 0 14px; border: 1px solid rgba(21, 24, 26, .2); font: 700 .74rem/1 var(--govde); font-stretch: 108%; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; color: var(--murekkep); transition: background-color .25s, color .25s, border-color .25s; } .kdugme:hover { border-color: var(--murekkep); } .kdugme[aria-pressed="true"] { background: var(--murekkep); color: var(--kirec-sabit); border-color: var(--murekkep); } .katalog__sayac { font-size: .76rem; color: var(--gri); } @media (min-width: 1000px) { .katalog__cubuk-ic { grid-template-columns: 300px minmax(0, 1fr) auto; align-items: center; } } .katalog__ic { padding-block: clamp(32px, 4vw, 56px) clamp(80px, 9vw, 140px); display: grid; gap: clamp(48px, 6vw, 88px); } .katalog__bos { display: grid; gap: 14px; justify-items: start; padding: 40px 0; } .kgrup { display: grid; gap: 0; scroll-margin-top: calc(var(--ust-boy) + 150px); } .kgrup__bas { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); background: var(--zemin); color: var(--kirec); overflow: hidden; isolation: isolate; --ikincil: var(--gri-acik); } .kgrup__doku { position: relative; min-height: 140px; background-size: cover; background-position: center; background-color: var(--renk); } .kgrup__doku::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(var(--zemin-k), 0) 40%, rgba(var(--zemin-k), .9)); } .kgrup__yazi { display: grid; align-content: center; gap: 10px; padding: 26px 24px 28px; } .kgrup__no { font-size: .78rem; color: var(--vurgu-acik); } .kgrup__yazi .metin { color: var(--gri-acik); } @media (min-width: 800px) { .kgrup__bas { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); } .kgrup__doku { min-height: 220px; } .kgrup__yazi { padding: 36px 40px; } } .urunler { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; background: var(--cizgi-acik); border: 1px solid var(--cizgi-acik); border-top: 0; } @media (min-width: 1100px) { .urunler { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Görünen ürün sayısı TEK ise sonuncusu tam satır: yoksa yanında boş gri hücre (aralık zemini) kalıyordu — yuvarlak köşeyle göze batıyordu. Aramada gizlenenler sayılmaz (`of :not([hidden])`). */ .urunler > .urun:nth-child(odd of :not([hidden])):nth-last-child(1 of :not([hidden])) { grid-column: 1 / -1; } } .urun { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto; align-items: center; gap: 16px; padding: 14px 16px; background: var(--kagit); transition: background-color .25s; } .urun:hover { background: #f4f1ec; } .urun__doku { width: 56px; height: 56px; background-size: 200px auto; background-position: center; background-color: var(--renk, var(--beton)); display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(21, 24, 26, .08); } .urun__doku span { font: 800 1.3rem/1 var(--govde); font-stretch: 118%; color: var(--vurgu-koyu); } .urun__yazi { display: grid; gap: 3px; min-width: 0; } .urun__ad { font-weight: 700; line-height: 1.3; } .urun__not { font-size: .88rem; color: #5a5650; line-height: 1.4; } /* Birim: kutu DEĞİL, sağa yaslı iki satırlık künye — küçük aralıklı "BİRİM" etiketi, altında birimin kendisi; solunda ince ayraç. "Listeye ekle": ince çerçeveli AÇIK düğme, solda kutusuz koyu altın artı; üstüne gelince düğme mürekkeple dolar, artı açık altına döner (02.11.2026, İLGERU: "listeye ekle ve birim kutularının css tasarımlarını beğenmedim" — önceki: çerçeveli birim kutusu + siyah büyük harfli düğme; aynı gün artı koyu kare içindeydi → "+ lar neden karanlık kötü duruyorlar": dolgulu kare açık satırda ağır duruyordu, düğmede de artıda da dolgu YOK). */ .urun__birim { display: grid; justify-items: end; gap: 5px; min-width: 64px; padding-left: 16px; border-left: 1px solid var(--cizgi-acik); text-align: right; white-space: nowrap; } .urun__birim-ad { font: 500 .64rem/1 var(--govde); letter-spacing: .16em; text-transform: uppercase; color: var(--gri); } .urun__birim-deger { font: 600 .92rem/1 var(--govde); color: var(--murekkep); } .urun__ekle { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 17px 0 14px; border: 1px solid rgba(21, 24, 26, .2); color: var(--murekkep); font: 600 .84rem/1 var(--govde); white-space: nowrap; transition: background-color .25s, color .25s, border-color .25s; } .urun__ekle-simge { display: grid; place-items: center; flex: none; width: 16px; height: 16px; color: var(--vurgu-koyu); transition: color .25s; } .urun__ekle svg { width: 16px; height: 16px; } .urun__ekle:hover, .urun__ekle:focus-visible { background: var(--murekkep); border-color: var(--murekkep); color: var(--kirec-sabit); } .urun__ekle:hover .urun__ekle-simge, .urun__ekle:focus-visible .urun__ekle-simge { color: var(--vurgu-acik); } .urun__ekle:focus-visible { outline: 2px solid var(--vurgu-koyu); outline-offset: 2px; } @media (max-width: 599px) { .urun { grid-template-columns: 48px minmax(0, 1fr) auto; grid-template-areas: 'doku yazi ekle' 'doku birim ekle'; gap: 4px 12px; padding: 12px; } .urun__doku { grid-area: doku; width: 48px; height: 48px; align-self: start; } .urun__yazi { grid-area: yazi; } .urun__birim { grid-area: birim; justify-self: start; display: flex; align-items: baseline; gap: 6px; min-width: 0; padding: 2px 0 0; border: 0; } .urun__birim-deger { font-size: .8rem; } .urun__ekle { grid-area: ekle; width: 44px; height: 44px; padding: 0; justify-content: center; } .urun__ekle-simge, .urun__ekle svg { width: 18px; height: 18px; } .urun__ekle-yazi { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } } /* ── Çağrı bandı ───────────────────────────────────────────── */ .cagri-bant__ic { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 28px; } .cagri-bant__ic > div:first-child { display: grid; gap: 14px; } /* ── Markalar: grup başlığındaki logolar (sayfa sonundaki vitrin #markalar: 04-bilesenler › .mvitrin) ── */ .kgrup__markalar { display: grid; gap: 8px; margin-top: 8px; } .kgrup__markalar-bas { font: 500 .68rem/1.6 var(--govde); letter-spacing: .14em; text-transform: uppercase; color: var(--vurgu-acik); } /* Renkli logolar başlığın koyu zemininde yan yana (plaka YOK), aralarında ince kireç çizgi. */ .kgrup__logolar { display: flex; flex-wrap: wrap; align-items: center; justify-self: start; max-width: 100%; } .kgrup__logolar .mkutu { --lh: 36px; height: auto; padding: 6px 18px; } .kgrup__logolar .mkutu:first-child { padding-left: 0; } .kgrup__logolar .mkutu + .mkutu { border-left: 1px solid var(--cizgi-koyu); } /* ── kaynak/stil/08-sayfalar.css ─────────────────────────────────────────── */ /* Yapı Rehberi, Hakkımızda, İletişim, 404. */ /* ── Rehber ────────────────────────────────────────────────── */ .rehber__iki { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: start; } /* minmax: tablo sütunu sayfayı taşırmasın (320 px) */ @media (min-width: 1000px) { .rehber__iki { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 72px; } } .rehber__iki > .bas { position: sticky; top: calc(var(--ust-boy) + 24px); } .rehber__iki > .bas + * { margin-top: 0; } @media (max-width: 999px) { .rehber__iki > .bas { position: static; } } .rehber__metin { display: grid; gap: 18px; justify-items: start; } .rehber__not { margin-top: 14px; font-size: .86rem; color: var(--ikincil); max-width: 60em; } .duvar-kartlari { display: grid; gap: 12px; margin-bottom: 28px; } @media (min-width: 900px) { .duvar-kartlari { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .duvar-kart { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--beton); } .duvar-kart figcaption { position: absolute; left: 0; bottom: 0; padding: 10px 14px; background: var(--zemin); color: var(--kirec); font: 700 .78rem/1 var(--govde); font-stretch: 110%; letter-spacing: .08em; text-transform: uppercase; } .tanimlar { display: grid; gap: 1px; background: var(--cizgi); border: 1px solid var(--cizgi); } .tanimlar > div { display: grid; gap: 8px; padding: 22px 24px; background: var(--zemin-2); } .tanimlar dt { font: 800 1.35rem/1 var(--govde); font-stretch: 116%; color: var(--vurgu-acik); } .tanimlar dd { color: var(--ikincil); } .kurallar { display: grid; gap: 1px; background: var(--cizgi); border: 1px solid var(--cizgi); } @media (min-width: 700px) { .kurallar { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { .kurallar { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .kurallar li { display: grid; align-content: start; gap: 10px; padding: 26px 24px 30px; background: var(--beton); } .kurallar p { color: #4f4c46; } .z-acik .tablo-kap { background: #fff; } /* ── Hakkımızda ────────────────────────────────────────────── */ .kurumsal__iki { display: grid; gap: 48px; align-items: center; } @media (min-width: 1000px) { .kurumsal__iki { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 80px; } } .kurumsal__logo { display: grid; place-items: center; padding: clamp(28px, 4vw, 56px); background: var(--zemin); box-shadow: 0 40px 80px rgba(var(--zemin-k), .25); } .logo-dikey { display: var(--goster-gece); width: 100%; max-width: 520px; height: auto; } .logo-dikey--gunduz { display: var(--goster-gunduz); } /* ── İletişim ──────────────────────────────────────────────── */ .iletisim { display: grid; gap: 48px; align-items: start; } @media (min-width: 1000px) { .iletisim { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 72px; } } .iletisim__kartlar { display: grid; gap: 1px; background: var(--cizgi-acik); border: 1px solid var(--cizgi-acik); } .ik { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 16px; row-gap: 2px; align-items: start; padding: 20px 22px; background: var(--kagit); transition: background-color .25s; } a.ik:hover { background: #f5f2ed; } .ik svg { grid-row: span 2; width: 26px; height: 26px; color: var(--vurgu-koyu); } .ik__etiket { font: 500 .7rem/1.3 var(--govde); letter-spacing: .1em; text-transform: uppercase; color: var(--gri); } .ik__deger { font-weight: 700; font-size: 1.05rem; overflow-wrap: anywhere; } .wa-form { display: grid; gap: 18px; padding: clamp(24px, 3vw, 40px); background: #fff; border: 1px solid var(--cizgi-acik); } .wa-form .d3 em { color: var(--vurgu-koyu); } .wa-form .alan > span:first-child i { font-style: normal; text-transform: none; letter-spacing: 0; opacity: .7; } .wa-form .dugme { justify-self: start; } .wa-form__hata { min-height: 1.2em; color: #a3271b; font-weight: 600; font-size: .92rem; } /* ── Harita ────────────────────────────────────────────────── */ .harita { position: relative; min-height: 460px; overflow: hidden; isolation: isolate; } .harita__ortu { position: relative; z-index: 1; display: grid; place-content: center; justify-items: center; gap: 18px; min-height: 460px; padding: 56px var(--kenar); text-align: center; background: linear-gradient(rgba(var(--zemin-k), .78), rgba(var(--zemin-k), .9)), var(--doku) center / cover; } .harita__yer { font: 700 clamp(2.2rem, 5vw, 4rem)/1.04 var(--govde); letter-spacing: -.03em; } .harita__yer span { color: var(--vurgu-acik); } .harita .dugme-grup { justify-content: center; } .harita__not { font-size: .82rem; color: var(--gri-acik); } .harita.is-yuklu .harita__ortu { display: none; } .harita__cerceve { display: block; width: 100%; height: 520px; border: 0; filter: grayscale(.35) contrast(1.05); } /* ── 404 ───────────────────────────────────────────────────── */ .bos-sayfa { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-items: center; padding: calc(var(--ust-toplam) + 40px) 0 60px; overflow: hidden; isolation: isolate; } .bos-sayfa::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--doku) center / cover; opacity: .14; } .bos-sayfa__ic { display: grid; gap: 24px; justify-items: start; } .bos-sayfa__kod { font-size: clamp(6rem, 22vw, 16rem); line-height: .8; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1.5px var(--vurgu); } /* ── kaynak/stil/09-giris.css ────────────────────────────────────────────── */ /* Kurumsal giriş: sağdan kayan panel (.gp; site.js › giriş). Karmer / Yükselen ile aynı sözleşme. İki kip: html[data-giris="panel"] (uygulama aynı ana alan adında, çerçeve izni var) ya da html[data-giris="yonlendir"] (bağlantılar giris.html üzerinden uygulamaya gider). */ .gp-perde { position: fixed; inset: 0; z-index: 960; background: rgba(10, 11, 12, .64); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; } .gp { position: fixed; top: 0; right: 0; bottom: 0; z-index: 970; display: grid; grid-template-rows: auto 1fr auto; width: min(480px, 100vw); background: var(--kirec); color: var(--murekkep); box-shadow: -30px 0 80px rgba(0, 0, 0, .45); transform: translateX(100%); visibility: hidden; transition: transform .6s var(--egri-yumusak), visibility .6s; } html.gp-acik { overflow: hidden; } html.gp-acik .gp-perde { opacity: 1; visibility: visible; } html.gp-acik .gp { transform: none; visibility: visible; } .gp__ust { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; background: var(--zemin); color: var(--kirec); overflow: hidden; isolation: isolate; border-bottom: 3px solid var(--vurgu); } .gp__ust::before { content: ''; position: absolute; inset: 0; z-index: -1; background: url(/assets/img/foto/beton-960.webp?v=036af00c) center / cover; opacity: .14; } .gp__marka { display: flex; align-items: center; gap: 16px; min-width: 0; } .gp__marka .logo { height: 36px; width: auto; } .gp__baslik { padding-left: 16px; border-left: 1px solid rgba(var(--kirec-k), .22); font: 500 .72rem/1.1 var(--govde); letter-spacing: .12em; text-transform: uppercase; color: rgba(var(--kirec-k), .85); white-space: nowrap; } .gp__kapat { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border: 1px solid rgba(var(--kirec-k), .3); color: var(--kirec); transition: background .3s, color .3s; } .gp__kapat svg { width: 20px; height: 20px; } .gp__kapat:hover { background: var(--kirec); color: var(--zemin); } .gp__govde { position: relative; background: var(--kirec); } .gp__cerceve { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity .45s; } .gp.is-yuklendi .gp__cerceve { opacity: 1; } .gp__doner { position: absolute; left: 50%; top: 40%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 2px solid rgba(21, 24, 26, .14); border-top-color: var(--vurgu); animation: gp-don .9s linear infinite; } @keyframes gp-don { to { transform: rotate(360deg); } } .gp.is-yuklendi .gp__doner, .gp.is-engelli .gp__doner { display: none; } .gp__yedek { position: absolute; inset: 0; display: none; place-content: center; justify-items: center; gap: 16px; padding: 24px; text-align: center; color: var(--gri); } .gp.is-engelli .gp__yedek { display: grid; } .gp.is-engelli .gp__cerceve { display: none; } .gp__alt { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px; font-size: .78rem; color: var(--gri); border-top: 1px solid var(--cizgi-acik); background: var(--kirec); } .gp__alt span { display: inline-flex; align-items: center; gap: 8px; } .gp__alt span svg { width: 15px; height: 15px; color: var(--vurgu); } .gp__alt a { color: var(--murekkep); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(21, 24, 26, .3); } .gp__alt a:hover { text-decoration-color: currentColor; } @media (max-width: 420px) { .gp__alt span { display: none; } } @media (prefers-reduced-motion: reduce) { .gp, .gp-perde { transition: none; } .gp__doner { animation: none; } } /* ── kaynak/stil/10-liste.css ────────────────────────────────────────────── */ /* Malzeme listesi: çekmece (her sayfada), gömülü panel (Metraj), bildirim, baskı kâğıdı (liste.js). */ .lst-perde { position: fixed; inset: 0; z-index: 940; background: rgba(10, 11, 12, .6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; } .lst--cekmece { position: fixed; top: 0; right: 0; bottom: 0; z-index: 950; width: min(460px, 100vw); transform: translateX(100%); visibility: hidden; transition: transform .55s var(--egri-yumusak), visibility .55s; box-shadow: -30px 0 80px rgba(0, 0, 0, .45); } html.liste-acik { overflow: hidden; } html.liste-acik .lst-perde { opacity: 1; visibility: visible; } html.liste-acik .lst--cekmece { transform: none; visibility: visible; } .lst { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: var(--zemin-2); color: var(--kirec); --ikincil: var(--gri-acik); } .lst__ust { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 16px; border-bottom: 3px solid var(--vurgu); } .lst__sayi { margin-top: 4px; font: 700 1.3rem/1.1 var(--govde); letter-spacing: -.01em; min-height: 1em; } .lst__kapat { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border: 1px solid rgba(var(--kirec-k), .3); transition: background .3s, color .3s; } .lst__kapat svg { width: 20px; height: 20px; } .lst__kapat:hover { background: var(--kirec); color: var(--zemin); } .lst__govde { overflow-y: auto; overscroll-behavior: contain; padding: 6px 20px 20px; } .lst__ogeler { display: grid; } .lst__oge { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'ad sil' 'miktar miktar'; gap: 10px 12px; padding: 16px 0; border-bottom: 1px solid var(--cizgi-koyu); } .lst__ad { grid-area: ad; display: grid; gap: 3px; font-weight: 600; line-height: 1.35; } .lst__ad small { font: 400 .78rem/1.35 var(--govde); color: var(--gri-acik); } .lst__sil { grid-area: sil; display: grid; place-items: center; width: 40px; height: 40px; margin: -8px -8px 0 0; color: var(--gri-acik); transition: color .25s; } .lst__sil svg { width: 18px; height: 18px; } .lst__sil:hover { color: var(--vurgu-acik); } .lst__miktar { grid-area: miktar; display: flex; align-items: center; gap: 0; } .lst__adim { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(var(--kirec-k), .22); transition: background .25s, border-color .25s; } .lst__adim svg { width: 16px; height: 16px; } .lst__adim:hover { background: rgba(var(--kirec-k), .08); border-color: var(--vurgu-acik); } .lst__kutu input { width: 96px; height: 44px; padding: 0 10px; border: 1px solid rgba(var(--kirec-k), .22); border-inline: 0; background: rgba(var(--kirec-k), .04); color: inherit; text-align: center; font: 500 1rem/1 var(--govde); font-variant-numeric: tabular-nums; outline: none; border-radius: 0; } .lst__kutu input:focus { background: rgba(var(--kirec-k), .1); } .lst__birim { margin-left: 12px; font: 500 .8rem/1 var(--govde); letter-spacing: .06em; color: var(--vurgu-acik); } .lst__bilgi { display: grid; gap: 14px; padding-top: 22px; } .lst__bilgi .alan > span:first-child i { font-style: normal; text-transform: none; letter-spacing: 0; opacity: .7; } .lst__bilgi .alan input, .lst__bilgi .alan textarea { min-height: 44px; font-size: 16px; } .lst__bilgi .alan textarea { min-height: 72px; } .lst__alt { display: grid; gap: 12px; padding: 16px 20px max(18px, env(safe-area-inset-bottom)); border-top: 1px solid var(--cizgi-koyu); background: var(--zemin); } .lst__alt:empty { display: none; } .lst__gonder { width: 100%; } .lst__gonder svg { color: #3fd27a; } .lst__ikincil { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--cizgi-koyu); border: 1px solid var(--cizgi-koyu); } .lst__ikincil button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; background: var(--zemin); font: 700 .72rem/1 var(--govde); font-stretch: 110%; letter-spacing: .1em; text-transform: uppercase; transition: background .25s, color .25s; } .lst__ikincil button svg { width: 17px; height: 17px; color: var(--vurgu-acik); } .lst__ikincil button:hover { background: var(--zemin-3); } .lst__dipnot { font-size: .78rem; line-height: 1.5; color: var(--gri-acik); } .lst__bos { display: grid; justify-items: start; gap: 12px; padding: 28px 0; } .lst__bos > svg { width: 40px; height: 40px; color: var(--vurgu-acik); } .lst__bos > p:first-of-type { font: 700 1.25rem/1.2 var(--govde); } .lst__bos-metin { color: var(--gri-acik); max-width: 26em; } @media (max-width: 380px) { .lst__ikincil button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .lst__kutu input { width: 76px; } } /* "Listeye ekle" düğmelerinin eklendi işareti */ .is-eklendi { animation: eklendi 1.2s var(--egri); } @keyframes eklendi { 0% { box-shadow: 0 0 0 0 rgba(227, 201, 143, .7); } 100% { box-shadow: 0 0 0 14px rgba(227, 201, 143, 0); } } /* Bildirim */ .lst-bildirim { position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); z-index: 990; display: flex; align-items: center; gap: 16px; max-width: calc(100vw - 32px); padding: 12px 12px 12px 18px; background: var(--kirec); color: var(--zemin); box-shadow: 0 20px 50px rgba(0, 0, 0, .35); font-size: .92rem; font-weight: 600; transform: translate(-50%, 140%); opacity: 0; transition: transform .5s var(--egri), opacity .4s; pointer-events: none; } .lst-bildirim.is-gorunur { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; } .lst-bildirim button { flex: none; min-height: 40px; padding: 0 14px; background: var(--vurgu); color: var(--altin-ustu); font: 700 .72rem/1 var(--govde); font-stretch: 110%; letter-spacing: .1em; text-transform: uppercase; } .lst-bildirim:not(:has(button)) { padding-right: 18px; } /* Baskı kâğıdı: yalnız liste basılır */ .lst-baski { display: none; } @media print { html.lst-yazdiriliyor body > *:not(.lst-baski) { display: none !important; } html.lst-yazdiriliyor .lst-baski { display: block; color: #111; background: #fff; font: 11pt/1.5 var(--govde); } .lst-baski header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12pt; border-bottom: 2pt solid #c4532b; margin-bottom: 14pt; } .lst-baski header .logo { height: 22pt; width: auto; color: #111; } .lst-baski header div { display: grid; text-align: right; } .lst-baski header b { font-size: 14pt; text-transform: uppercase; letter-spacing: .04em; } .lst-baski header span { font: 9pt var(--govde); color: #555; } .lst-baski table { width: 100%; border-collapse: collapse; } .lst-baski th, .lst-baski td { padding: 6pt 8pt; border-bottom: .6pt solid #bbb; text-align: left; vertical-align: top; } .lst-baski th { font: 8pt var(--govde); text-transform: uppercase; letter-spacing: .08em; color: #555; } .lst-baski td:nth-child(3) { font-family: var(--govde); text-align: right; white-space: nowrap; } .lst-baski td small { display: block; font: 8pt var(--govde); color: #666; } .lst-baski dl { display: grid; grid-template-columns: auto 1fr; gap: 4pt 14pt; margin-top: 16pt; } .lst-baski dt { font: 8pt var(--govde); text-transform: uppercase; color: #555; } .lst-baski > p { margin-top: 18pt; font-size: 9pt; color: #555; } } /* ── kaynak/stil/11-koseler.css ──────────────────────────────────────────── */ /* Yumuşak köşeler — sitenin TEK köşe dili (02.11.2026, İLGERU: "web sitede her yerde köşeler sivri, biraz daha uyumlu yumuşak geçiş olsa daha iyi olmaz mı"). Önceden bütün kutular bilerek 0 idi (keskin, "mimari" görünüm); bu dosya en son birleştirilir (derle.js ad sırası) ve önceki dosyalardaki `border-radius: 0`'ları ezer. Ölçüler aşağıdaki dört değişkende — yeni bir kutu / düğme / alan eklerseniz buradan bir ölçü verin, sivri bırakmayın. ⚠ Hücreleri 1 px ARALIKLA çizgilenen ızgaralarda (ilkeler, hizmetler, yazılar, tanımlar, kurallar, iletişim kartları, liste ikincil düğmeleri) köşe KABA verilir ve hücre kırpılır (overflow: hidden) — hücrelere tek tek verilmez. Tablo kabının yatay kaydırması olduğu için ona yalnız köşe verilir (overflow: auto zaten kırpar). */ :root { --r-ince: 6px; --r-kucuk: 10px; --r: 14px; --r-buyuk: 22px; } /* ── Düğmeler, alanlar, küçük denetimler ── */ .dugme, .urun__ekle, .katalog__ara, .lst__kapat, .gp__kapat, .atla, .alan input, .alan select, .alan textarea, .alan__kutu { border-radius: var(--r-kucuk); } .alan__kutu input { border-radius: 0; } .kdugme, .icindekiler a, .wa-yuzen, .yuzen__tel { border-radius: 999px; } .urun__doku, .onay-isareti, .lst-bildirim button { border-radius: var(--r-ince); } .lst-bildirim { border-radius: var(--r); } /* Liste miktar adımı: [−][sayı][+] tek parça görünür — dış köşeler yuvarlak, ortadaki kutu düz. */ .lst__adim[data-azalt] { border-radius: var(--r-kucuk) 0 0 var(--r-kucuk); } .lst__adim[data-artir] { border-radius: 0 var(--r-kucuk) var(--r-kucuk) 0; } /* ── Kartlar ve paneller ── */ .ukart__bag, .mbk, .duvar-kart, .tablo-kap { border-radius: var(--r); } .ilkeler, .hizmetler, .yazilar, .tanimlar, .kurallar, .iletisim__kartlar { border-radius: var(--r); overflow: hidden; } .lst__ikincil { border-radius: var(--r-kucuk); overflow: hidden; } .kurumsal__logo, .wa-form, .harita, .lst--gomulu { border-radius: var(--r-buyuk); } .lst--gomulu { overflow: hidden; } /* Sağdan açılan çekmeceler (malzeme listesi, kurumsal giriş): ekrana bakan sol köşeler yuvarlak. */ .lst--cekmece, .gp { border-radius: var(--r-buyuk) 0 0 var(--r-buyuk); overflow: hidden; } @media (max-width: 479px) { .lst--cekmece, .gp { border-radius: 0; } } /* tam genişlikte köşe ekran kenarına denk gelir */ /* Ürünler grubu tek kart: başlık üst köşeleri, ürün listesi alt köşeleri. */ .kgrup__bas { border-radius: var(--r-buyuk) var(--r-buyuk) 0 0; } .urunler { border-radius: 0 0 var(--r-buyuk) var(--r-buyuk); overflow: hidden; } /* Marka vitrini: ince çizgili ızgara yerine ARALIKLI yuvarlak hücreler (ortak kenarlı ızgarada köşe hücrelerinin çizgisi kırpılıyordu). Sütun sayısı aralığı düşerek hesaplanır — yoksa 5 sütun 4'e iner. */ .mvitrin { --aralik: 10px; gap: var(--aralik); border: 0; grid-template-columns: repeat(auto-fill, minmax(max(var(--en-az), calc((100% - (var(--sutun) - 1) * var(--aralik)) / var(--sutun))), 1fr)); } .mvitrin > li { border: 1px solid var(--cizgi); border-radius: var(--r); overflow: hidden; } /* ── kaynak/stil/12-gunduz.css ───────────────────────────────────────────── */ /* Gündüz teması (04.11.2026, İLGERU: "renk temasının gündüzü de olsun"; aynı gün: "varsayılan olarak gündüz modu kalsın"). html[data-tema="gunduz"] sablon.html'de VARSAYILAN; baş betiği kayıtlı GECE seçimini (localStorage 'tema') boyamadan ÖNCE uygular, site.js › tema düğmesi değiştirir. Yalnız BELİRTEÇLER yeniden tanımlanır: bileşenler --zemin / --kirec / --kirec-k … üzerinden boyandığı için kendiliğinden döner. İki temada da AYNI kalması gerekenler 01-temel.css'te SABİT belirteçtedir (--altin-ustu, --kirec-sabit, --vurgu-parlak); z-acik / z-beton bölümleri zaten açık zemindir, dokunulmaz. Logolar iki : --goster-gece / --goster-gunduz hangisinin görüneceğini söyler (marka logoları ve sitenin logosu). ⚠ Bir bileşen rgba(241, 238, 232, α) / rgba(18, 23, 29, α) yazarsa bu temada dönmez — kanal belirteçlerini kullanın. */ html[data-tema="gunduz"] { --zemin: #f5f2ec; --zemin-2: #ebe6dd; --zemin-3: #e2dcd1; --zemin-4: #d4ccbf; --kirec: #15181a; --kirec-k: 21, 24, 26; --zemin-k: 245, 242, 236; --gri-acik: rgba(21, 24, 26, .68); --vurgu-acik: #7a5c27; /* açık zeminde altın YAZI (küçük yazıda ≥ 4,5:1) */ --gumus: #59626a; --celik: #626d75; --cizgi-koyu: rgba(21, 24, 26, .13); --goster-gece: none; --goster-gunduz: block; color-scheme: light; } html[data-tema="gunduz"] .ust-serit { background: rgba(21, 24, 26, .04); } html[data-tema="gunduz"] .kurumsal__logo { box-shadow: 0 30px 60px rgba(21, 24, 26, .12); } /* Gündüzde de GECE kalan alt ağaçlar: belirteçler gece değerlerine geri döner. Kayan giriş panelinin başlığı koyu (içindeki uygulama girişi zaten açık kâğıttır). */ html[data-tema="gunduz"] .gp { --zemin: #12171d; --zemin-2: #161c23; --zemin-3: #1d252e; --zemin-4: #28313b; --kirec: #f1eee8; --kirec-k: 241, 238, 232; --zemin-k: 18, 23, 29; --gri-acik: rgba(241, 238, 232, .66); --vurgu-acik: #e3c98f; --gumus: #c3c9cf; --celik: #8a969e; --cizgi-koyu: rgba(241, 238, 232, .12); --goster-gece: block; --goster-gunduz: none; } /* ── Tema düğmesi ──────────────────────────────────────────── */ /* Gece temasında GÜNEŞ (gündüze geç), gündüzde AY. Masaüstünde üst çubukta (≥ 1180 px — daha darda çubuk dolu: logo, liste, giriş, Fiyat sor, menü); daha darda perde menüde. */ .tema-dugme svg { flex: none; } .tema-dugme .tema-dugme__gunes { display: var(--goster-gece); } .tema-dugme .tema-dugme__ay { display: var(--goster-gunduz); } .ust__tema { display: none; place-items: center; width: 42px; height: 42px; color: var(--vurgu-acik); transition: color .3s; } .ust__tema svg { width: 20px; height: 20px; } .ust__tema:hover { color: var(--kirec); } @media (min-width: 1180px) { .ust__tema { display: grid; } } .perde-menu__tema { justify-self: start; } /* 1180–1279 px: tema düğmesi çubuğa 21 px fazla geliyordu (araclar/test/ust-bilgi.js ölçtü) — bu aralıkta "Liste" yalnız simge + rozet (telefondaki gibi; yazı ekran okuyucuda kalır). */ @media (min-width: 1180px) and (max-width: 1279px) { .ust__liste { width: 42px; justify-content: center; padding: 0; } .ust__liste-yazi { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .ust__liste .rozet { position: absolute; top: 2px; right: -2px; min-width: 18px; height: 18px; font-size: .66rem; } }