/* OOS Hero Banner & Arama Kutusu — ön yüz stilleri */ /* Tam genişlik hero görseli + görsel üzerindeki tıklama bölgeleri */ .oos-hero-image-wrap { position: relative; line-height: 0; margin-bottom: 24px; container-type: inline-size; /* CSS-only tam genişlik denemesi (ilk katman). Tema/sayfa oluşturucudaki bir üst kapsayıcıda overflow:hidden varsa bu tek başına yetmeyebilir — JS bu durumda devreye girip elementi 'nin doğrudan altına taşır (bkz. oos-hero.js + .oos-hero-portaled), o zaman hiçbir üst kapsayıcı onu kesemez. */ width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); overflow-x: clip; } /* JS tarafından 'ye taşındıktan sonra uygulanan gerçek tam genişlik konumlandırması — artık hiçbir üst kapsayıcının overflow/max-width'inden etkilenmez. "top" JS tarafından, elementin sayfadaki orijinal konumuna göre hesaplanıp satır içi stil olarak yazılır. */ .oos-hero-image-wrap.oos-hero-portaled { position: absolute; left: 0; right: 0; width: 100vw; max-width: 100vw; margin: 0; z-index: 2; } .oos-hero-placeholder { width: 100%; } .oos-hero-image-wrap picture, .oos-hero-image-wrap img { display: block; width: 100%; height: auto; } /* Görsel üzerindeki GERÇEK butonlar: görseldeki mevcut pilin tam üzerine oturur, aynı renkte/boyutta çizilir ama artık gerçek bir düğmesidir — hover'da koyulaşır, basılınca çöker (gerçekten "basılıyor" hissi verir). */ .oos-hero-btn { position: absolute; display: flex; align-items: center; justify-content: center; gap: 0.4em; box-sizing: border-box; padding: 0 1em; line-height: 1.15; text-align: center; text-decoration: none; white-space: nowrap; overflow: hidden; color: #fff; background: #5f9ee0; font-family: inherit; font-weight: 800; letter-spacing: 0.01em; text-transform: uppercase; border-radius: 999px; box-shadow: 0 3px 10px rgba(20, 45, 80, 0.28); cursor: pointer; font-size: clamp(9px, 1.6vw, 21px); font-size: clamp(9px, 1.6cqw, 21px); transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease; } .oos-hero-btn span { overflow: hidden; text-overflow: ellipsis; } .oos-hero-btn-icon { width: 1.1em; height: 1.1em; flex: none; } /* Telefon butonu ikon + daha uzun metin taşıdığı için biraz daha küçük yazı boyutuyla başlar, böylece numara kesilmeden sığar. */ .oos-hero-btn--phone { gap: 0.3em; padding: 0 0.8em; font-size: clamp(8px, 1.3vw, 17px); font-size: clamp(8px, 1.3cqw, 17px); } .oos-hero-btn:hover, .oos-hero-btn:focus-visible { background: #4a86cc; box-shadow: 0 4px 14px rgba(20, 45, 80, 0.34); } .oos-hero-btn:active { background: #3f75b8; box-shadow: 0 1px 4px rgba(20, 45, 80, 0.3); transform: translateY(2px) scale(0.98); } .oos-hero-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .oos-hero-banners { --oos-accent: #0e7c66; --oos-accent-dark: #0a5f4f; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 24px 0; } @media (max-width: 900px) { .oos-hero-banners { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .oos-hero-banners { grid-template-columns: 1fr; } } .oos-hero-banner { position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 4 / 3; background: #eee; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); } .oos-hero-banner img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s ease; } .oos-hero-banner:hover img { transform: scale(1.04); } .oos-hero-banner-overlay { position: absolute; inset: auto 0 0 0; padding: 14px 12px; display: flex; justify-content: center; background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%); } .oos-hero-banner-btn { display: inline-block; background: var(--oos-accent); color: #fff; font-weight: 600; font-size: 14px; text-decoration: none; padding: 9px 18px; border-radius: 999px; transition: background 0.2s ease; } .oos-hero-banner-btn:hover, .oos-hero-banner-btn:focus { background: var(--oos-accent-dark); color: #fff; } /* Arama / telefon kutusu */ .oos-search-phone { --oos-accent: #0e7c66; display: flex; align-items: stretch; max-width: 480px; margin: 20px 0; border: 1px solid #d7ded6; border-radius: 999px; background: #fff; overflow: hidden; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } .oos-search-phone-icon { flex: none; width: 20px; margin: auto 0 auto 16px; height: 20px; background: currentColor; color: #8a9a92; -webkit-mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1.1-.2 1.2.4 2.5.6 3.8.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C11.6 21 3 12.4 3 2c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.6.6 3.8.1.4 0 .8-.2 1.1L6.6 10.8z'/%3E%3C/svg%3E"); mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1.1-.2 1.2.4 2.5.6 3.8.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C11.6 21 3 12.4 3 2c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.6.6 3.8.1.4 0 .8-.2 1.1L6.6 10.8z'/%3E%3C/svg%3E"); } .oos-search-phone-input { flex: 1 1 auto; border: none; outline: none; padding: 12px 12px; font-size: 14.5px; min-width: 0; background: transparent; color: #14201c; } .oos-search-phone-btn { flex: none; border: none; cursor: pointer; background: var(--oos-accent); color: #fff; font-weight: 600; font-size: 14px; padding: 0 22px; } .oos-search-phone-btn:hover, .oos-search-phone-btn:focus { background: #0a5f4f; } .oos-hero-notice { background: #af3a3414; color: #af3a34; border: 1px solid #af3a3440; border-radius: 8px; padding: 10px 14px; font-size: 13.5px; }