/* Theme Name: MYKENNZ Theme URI: https://mykennz.com/ Author: Onox Yazılım Author URI: https://onox.com.tr/ Description: MYKENNZ ayakkabı, çanta, bavul ve aksesuar mağazaları için eklentisiz, SEO odaklı katalog teması. Ürün ve şube içerik tipleri, gömülü SEO motoru (başlık/meta/canonical/robots/Open Graph), JSON-LD şema grafiği, görsel destekli site haritası ve sekmeli tema ayar paneli içerir. Version: 1.0.0 Requires at least: 6.2 Tested up to: 6.8 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: mykennz Tags: e-commerce, portfolio, custom-menu, custom-logo, featured-images, translation-ready, block-styles, wide-blocks, accessibility-ready */ /* ================================================================= * 1. Jetonlar * Not: --mk-marka, --mk-koyu, --mk-zemin gibi renkler panelden * yönetilir ve içine satır içi basılır (inc/enqueue.php). * ============================================================== */ :root { /* Yedek değerler — satır içi jetonlar yüklenmezse devreye girer. */ --mk-marka: #1F6FEB; --mk-marka-koyu: #1554B8; --mk-marka-metin: #1554B8; --mk-marka-yumusak: #EEF3FD; --mk-marka-acik: #9DB8E8; --mk-koyu: #0F1216; --mk-koyu-2: #1B1E22; --mk-koyu-3: #262A2E; --mk-zemin: #F6F6F4; --mk-metin: #14171C; --mk-trendyol: #F27A1A; --mk-trendyol-2: #D06916; --mk-wa: #25D366; --mk-wa-2: #1FB156; /* Sabit nötr ölçek. */ --mk-beyaz: #FFFFFF; --mk-metin-2: #3A4048; --mk-soluk: #676D75; /* metin için — beyaz zeminde 5,2:1 */ --mk-soluk-2: #8A8F96; /* yalnızca ikon/kenarlık — metin için kullanma */ --mk-cizgi: #E4E4DF; --mk-cizgi-2: #ECECE8; --mk-cizgi-3: #D8D8D3; --mk-hata: #B4232A; /* Koyu zeminde metin katmanları (hepsi ≥ 4,5:1). */ --mk-ak-1: rgba(255, 255, 255, 0.92); --mk-ak-2: rgba(255, 255, 255, 0.75); --mk-ak-3: rgba(255, 255, 255, 0.62); --mk-ak-cizgi: rgba(255, 255, 255, 0.14); --mk-kap: 1280px; --mk-kap-dar: 860px; --mk-pad: 28px; --mk-ust-h: 78px; --mk-r-s: 8px; --mk-r: 10px; --mk-r-l: 14px; --mk-r-xl: 16px; --mk-r-tam: 100px; --mk-golge: 0 12px 28px -12px rgba(15, 18, 22, 0.18); --mk-golge-l: 0 18px 36px -14px rgba(15, 18, 22, 0.35); --mk-golge-xl: 0 24px 48px -16px rgba(15, 18, 22, 0.25); --mk-gecis: 0.22s ease; } /* ================================================================= * 2. Temel * ============================================================== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } body { margin: 0; background: var(--mk-zemin); color: var(--mk-metin); font-family: 'Archivo', 'Segoe UI', system-ui, -apple-system, sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-wrap: break-word; } body.mk-kilit, body.mk-menu-acik { overflow: hidden; } img, svg, iframe, video { max-width: 100%; height: auto; display: block; } a { color: var(--mk-marka-metin); text-decoration: none; transition: color var(--mk-gecis); } a:hover { color: var(--mk-marka); } h1, h2, h3, h4, h5, h6 { margin: 0; line-height: 1.18; letter-spacing: -0.012em; font-weight: 800; text-wrap: pretty; } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } input, textarea, select, button { font: inherit; } ::selection { background: var(--mk-marka); color: var(--mk-beyaz); } :focus-visible { outline: 3px solid var(--mk-marka); outline-offset: 2px; border-radius: 4px; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); border: 0; white-space: nowrap; } .mk-atla { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--mk-marka); color: var(--mk-beyaz); padding: 12px 20px; border-radius: 0 0 var(--mk-r) 0; font-weight: 700; } .mk-atla:focus { left: 0; color: var(--mk-beyaz); } .mk-vurgu { color: var(--mk-marka-acik); } /* Kapsayıcılar */ .mk-kap { width: 100%; max-width: var(--mk-kap); margin-inline: auto; padding-inline: var(--mk-pad); } .mk-kap--dar { max-width: var(--mk-kap-dar); } .mk-govde { display: block; } /* Görünürlük geçişi — sınıf JavaScript ile eklenir, kapalıyken içerik görünür kalır. */ .mk-goster { opacity: 0; transform: translateY(24px); transition: opacity 0.65s ease, transform 0.65s ease; } .mk-goster.is-gorundu { opacity: 1; transform: none; } /* ================================================================= * 3. Butonlar, rozetler, ikon kutuları * ============================================================== */ .mk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border: 1px solid transparent; border-radius: var(--mk-r); font-size: 14px; font-weight: 700; letter-spacing: 0.01em; line-height: 1.25; cursor: pointer; text-align: center; transition: background var(--mk-gecis), color var(--mk-gecis), border-color var(--mk-gecis), transform var(--mk-gecis); } .mk-btn:hover { transform: translateY(-1px); } .mk-btn .mk-ikon { flex: 0 0 auto; } .mk-btn--buyuk { padding: 15px 26px; font-size: 15px; } .mk-btn--tam { width: 100%; } .mk-btn--marka { background: var(--mk-marka); color: var(--mk-beyaz); } .mk-btn--marka:hover { background: var(--mk-marka-koyu); color: var(--mk-beyaz); } .mk-btn--koyu { background: var(--mk-koyu); color: var(--mk-beyaz); } .mk-btn--koyu:hover { background: var(--mk-marka); color: var(--mk-beyaz); } .mk-btn--beyaz { background: var(--mk-beyaz); color: var(--mk-koyu); } .mk-btn--beyaz:hover { background: var(--mk-marka); color: var(--mk-beyaz); } .mk-btn--acik { background: var(--mk-beyaz); color: var(--mk-metin); border-color: var(--mk-cizgi); } .mk-btn--acik:hover { color: var(--mk-marka-metin); border-color: var(--mk-marka); } .mk-btn--cerceve { background: rgba(255, 255, 255, 0.07); color: var(--mk-beyaz); border-color: rgba(255, 255, 255, 0.34); } .mk-btn--cerceve:hover { background: rgba(255, 255, 255, 0.14); border-color: var(--mk-beyaz); color: var(--mk-beyaz); } .mk-btn--trendyol { background: var(--mk-trendyol); color: var(--mk-beyaz); } .mk-btn--trendyol:hover { background: var(--mk-trendyol-2); color: var(--mk-beyaz); } .mk-btn--wa { background: var(--mk-wa); color: var(--mk-beyaz); } .mk-btn--wa:hover { background: var(--mk-wa-2); color: var(--mk-beyaz); } .mk-ikon-btn { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex: 0 0 auto; border-radius: var(--mk-r); border: 1px solid rgba(255, 255, 255, 0.22); color: rgba(255, 255, 255, 0.85); transition: border-color var(--mk-gecis), color var(--mk-gecis), background var(--mk-gecis); } .mk-ikon-btn:hover { border-color: var(--mk-beyaz); color: var(--mk-beyaz); background: rgba(255, 255, 255, 0.08); } /* İkon kutusu — kendi kendine zincirlenerek kap içi tip seçicilerine karşı korunur. */ .mk-ibox.mk-ibox { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: var(--mk-r); font-size: inherit; color: var(--mk-marka-metin); background: var(--mk-marka-yumusak); } .mk-ibox--buyuk.mk-ibox--buyuk { width: 52px; height: 52px; flex-basis: 52px; border-radius: var(--mk-r-l); background: rgba(255, 255, 255, 0.12); color: var(--mk-marka-acik); } .mk-rozet { position: absolute; top: 12px; left: 12px; z-index: 2; background: var(--mk-marka); color: var(--mk-beyaz); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 11px; border-radius: var(--mk-r-tam); line-height: 1; } .mk-rozet--buyuk { top: 16px; left: 16px; font-size: 12px; padding: 7px 14px; } .mk-goz { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.16em; color: var(--mk-marka-acik); text-transform: uppercase; } .mk-bag-vurgu { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; font-size: 14px; font-weight: 700; color: var(--mk-marka-metin); white-space: nowrap; } .mk-yer-tutucu { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: repeating-linear-gradient(45deg, #EDEEEF 0 14px, #E6E8EA 14px 28px); } .mk-yer-tutucu > span { font-family: ui-monospace, 'SFMono-Regular', 'JetBrains Mono', Menlo, Consolas, monospace; font-size: 12px; letter-spacing: 0.08em; color: var(--mk-soluk); } /* ================================================================= * 4. Üst menü * ============================================================== */ .mk-ust { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--mk-koyu) 92%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--mk-ak-cizgi); } @supports not (background: color-mix(in srgb, red 50%, blue)) { .mk-ust { background: var(--mk-koyu); } } .mk-ust.is-kaydi { box-shadow: 0 8px 24px -14px rgba(0, 0, 0, 0.7); } .mk-ust__ic { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: var(--mk-ust-h); } /* Dokunma hedefi: logo bağlantısı en az 44 px yüksekliğinde olmalı. */ .mk-logo { flex: 0 0 auto; display: flex; align-items: center; min-height: 44px; line-height: 0; } .mk-logo img { height: 30px; width: auto; max-width: 190px; object-fit: contain; } .mk-nav { display: none; } .mk-nav__liste { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; } .mk-nav__oge { position: relative; } .mk-nav__bag { display: flex; align-items: center; gap: 5px; padding: 10px 15px; border-radius: var(--mk-r-s); font-size: 14px; font-weight: 600; letter-spacing: 0.015em; color: var(--mk-ak-3); transition: color var(--mk-gecis), background var(--mk-gecis); } .mk-nav__bag:hover, .mk-nav__bag:focus-visible { color: var(--mk-beyaz); background: rgba(255, 255, 255, 0.09); } .mk-nav__bag.is-aktif { color: var(--mk-beyaz); background: rgba(255, 255, 255, 0.11); } .mk-nav__ok { display: inline-flex; } .mk-ust__eylem { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; } /* Mobilde gizlenen üst menü butonları — temel kuralda gizli, masaüstünde açılır. */ .mk-ust__gizle-mobil { display: none; } .mk-hamburger { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: var(--mk-r-s); border: 1px solid rgba(255, 255, 255, 0.24); background: none; color: var(--mk-beyaz); cursor: pointer; } .mk-hamburger__kapat { display: none; } .mk-hamburger.is-acik .mk-hamburger__ac { display: none; } .mk-hamburger.is-acik .mk-hamburger__kapat { display: inline-flex; } /* * Mega menü. * Panel, menü ögesine değil BAŞLIĞA göre konumlanır: `li` static bırakılır, * en yakın konumlu ata olan `.mk-ust` (sticky) kapsayıcı blok olur. Aksi hâlde * 1024–1280 px arasında panel kadrajın soluna taşıyordu (ölçümde doğrulandı). * Not: `li` static olduğu için menü bağlantısına mutlak `::after` çizgi EKLEME — * çizgi tüm başlığa yayılır. */ .mk-ust .mk-nav__oge--mega { position: static; } .mk-ust .mk-mega { position: absolute; left: 0; right: 0; top: 100%; transform: translateY(-8px); background: var(--mk-beyaz); border-bottom: 1px solid var(--mk-cizgi); box-shadow: var(--mk-golge-xl); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; } .mk-ust .mk-nav__oge--mega:hover .mk-mega, .mk-ust .mk-nav__oge--mega:focus-within .mk-mega, .mk-ust .mk-nav__oge--mega.is-acik .mk-mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } .mk-ust .mk-mega__ic { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 280px); gap: 26px; padding-block: 30px; } .mk-ust .mk-mega__sutun { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .mk-mega__baslik { display: flex; align-items: center; gap: 10px; color: var(--mk-metin); } .mk-mega__ad { display: flex; flex-direction: column; min-width: 0; } .mk-mega__ad strong { font-size: 15px; font-weight: 700; color: var(--mk-metin); } .mk-mega__ad em { font-size: 12px; font-style: normal; color: var(--mk-soluk); } .mk-mega__alt { display: flex; flex-direction: column; gap: 7px; margin: 0 0 0 21px; padding: 0 0 0 14px; list-style: none; border-left: 1px solid var(--mk-cizgi-2); } .mk-mega__alt a { font-size: 13px; color: var(--mk-soluk); } .mk-mega__alt a:hover { color: var(--mk-marka-metin); } .mk-mega__tumu.mk-mega__tumu { font-size: 12.5px; font-weight: 700; color: var(--mk-marka-metin); } .mk-ust .mk-mega__promo { position: relative; display: block; min-height: 220px; border-radius: var(--mk-r-l); overflow: hidden; background: var(--mk-koyu); } .mk-mega__promo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.6; } .mk-mega__promo-metin { position: absolute; inset: auto 18px 16px; display: flex; flex-direction: column; gap: 4px; background: linear-gradient(180deg, transparent, rgba(15, 18, 22, 0.9)); padding-top: 60px; } .mk-mega__promo-metin em { font-size: 12px; font-style: normal; font-weight: 700; letter-spacing: 0.12em; color: var(--mk-marka-acik); } .mk-mega__promo-metin strong { font-size: 17px; font-weight: 800; color: var(--mk-beyaz); } /* Mobil menü — temel kuralda kapalı; `hidden` özniteliği korunur. */ .mk-mobil { background: var(--mk-koyu-2); border-top: 1px solid var(--mk-ak-cizgi); padding-block: 8px 22px; max-height: calc(100vh - var(--mk-ust-h)); overflow-y: auto; } .mk-mobil[hidden] { display: none; } .mk-mobil__liste, .mk-mobil__alt { margin: 0; padding: 0; list-style: none; } .mk-mobil__liste > li > a { display: block; padding: 14px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); color: var(--mk-ak-1); font-size: 16px; font-weight: 600; } .mk-mobil__liste > li > a.is-aktif { color: var(--mk-marka-acik); } .mk-mobil__alt { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 4px 4px; } .mk-mobil__alt a { display: inline-block; padding: 8px 15px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--mk-r-tam); color: var(--mk-ak-2); font-size: 13.5px; font-weight: 600; } .mk-mobil__eylem { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; } /* ================================================================= * 5. Karşılama (hero) * ============================================================== */ .mk-hero { position: relative; background: var(--mk-koyu); overflow: hidden; isolation: isolate; } .mk-hero__zemin { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.4; animation: mk-kenburns 20s ease-out both; z-index: -2; } .mk-hero__perde { position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, rgba(15, 18, 22, 0.92) 22%, rgba(15, 18, 22, 0.45) 66%, rgba(15, 18, 22, 0.85) 100%); } @keyframes mk-kenburns { from { transform: scale(1); } to { transform: scale(1.08); } } @media (prefers-reduced-motion: reduce) { .mk-hero__zemin { animation: none; } } .mk-hero__ic { padding-block: 84px 76px; } .mk-hero__rozet { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 8px 16px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--mk-r-tam); background: rgba(255, 255, 255, 0.08); color: var(--mk-ak-1); font-size: 12.5px; font-weight: 600; letter-spacing: 0.13em; } .mk-hero__rozet .mk-ikon { color: var(--mk-marka-acik); } .mk-hero__baslik { margin: 22px 0 0; max-width: 760px; color: var(--mk-beyaz); font-size: clamp(32px, 5.2vw, 68px); font-weight: 800; line-height: 1.05; letter-spacing: -0.018em; } .mk-hero__metin { margin: 20px 0 0; max-width: 540px; color: var(--mk-ak-2); font-size: clamp(16px, 1.6vw, 18px); line-height: 1.65; } .mk-hero__btn { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; } /* ================================================================= * 6. Güven şeridi * ============================================================== */ .mk-guven { background: var(--mk-beyaz); border-bottom: 1px solid var(--mk-cizgi-2); } .mk-guven__ic { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 20px; padding-block: 26px; } .mk-guven__oge { display: flex; align-items: center; gap: 12px; min-width: 0; } .mk-guven__metin { display: flex; flex-direction: column; min-width: 0; } .mk-guven__metin strong { font-size: 14.5px; font-weight: 700; color: var(--mk-metin); } .mk-guven__metin > span { font-size: 12.5px; color: var(--mk-soluk); margin-top: 1px; } /* ================================================================= * 7. Bölüm başlıkları * ============================================================== */ .mk-bolum { padding-block: 68px; } .mk-bolum--kategori { padding-bottom: 8px; } .mk-bolum--one-cikan { padding-block: 60px 72px; } .mk-bolum--koyu { background: var(--mk-koyu); color: var(--mk-ak-2); } .mk-bolum__bas { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; } .mk-bolum__bas--orta { justify-content: center; text-align: center; } .mk-bolum__bas h2, .mk-bolum__h2-koyu { font-size: clamp(24px, 3vw, 30px); font-weight: 800; } .mk-bolum__h2-koyu { margin: 0 0 30px; color: var(--mk-beyaz); } /* ================================================================= * 8. Kategori kartları * ============================================================== */ .mk-kat-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 16px; } .mk-kat { position: relative; display: block; min-width: 0; height: 300px; border-radius: var(--mk-r-l); overflow: hidden; background: var(--mk-koyu); transition: transform var(--mk-gecis), box-shadow var(--mk-gecis); } .mk-kat:hover { transform: translateY(-4px); box-shadow: var(--mk-golge-l); } .mk-kat__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .mk-kat:hover .mk-kat__img { transform: scale(1.05); } .mk-kat__perde { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 18, 22, 0.06) 32%, rgba(15, 18, 22, 0.92) 100%); } .mk-kat__alt { position: absolute; inset: auto 20px 18px; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .mk-kat__ad { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .mk-kat__ad strong { font-size: 20px; font-weight: 800; color: var(--mk-beyaz); } .mk-kat__ad em { font-size: 12.5px; font-style: normal; color: var(--mk-ak-2); } .mk-kat__ok { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: var(--mk-r-tam); background: rgba(255, 255, 255, 0.2); color: var(--mk-beyaz); backdrop-filter: blur(4px); } /* ================================================================= * 9. Ürün kartları * ============================================================== */ .mk-urun-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(255px, 100%), 1fr)); gap: 20px; } .mk-kart { min-width: 0; } .mk-kart__bag { display: flex; flex-direction: column; height: 100%; background: var(--mk-beyaz); border: 1px solid var(--mk-cizgi); border-radius: var(--mk-r-l); overflow: hidden; color: inherit; transition: transform var(--mk-gecis), box-shadow var(--mk-gecis), border-color var(--mk-gecis); } .mk-kart__bag:hover { transform: translateY(-3px); box-shadow: var(--mk-golge); border-color: var(--mk-cizgi-3); color: inherit; } .mk-kart__gorsel { position: relative; display: block; aspect-ratio: 4 / 3; background: #EDEEEF; overflow: hidden; } .mk-kart__gorsel img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s ease; } .mk-kart__bag:hover .mk-kart__gorsel img { transform: scale(1.04); } .mk-kart__metin { display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 20px; flex: 1 1 auto; } .mk-kart__kat { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mk-marka-metin); } .mk-kart__baslik { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--mk-metin); } .mk-kart__ozet { font-size: 13.5px; line-height: 1.55; color: var(--mk-soluk); } .mk-kart__fiyat { display: flex; align-items: baseline; gap: 8px; margin-top: auto; padding-top: 8px; } .mk-kart__fiyat strong { font-size: 18px; font-weight: 800; color: var(--mk-metin); } .mk-kart__fiyat del { font-size: 14px; color: var(--mk-soluk); } /* ================================================================= * 10. Koleksiyon vitrini + kayan şerit * ============================================================== */ .mk-vitrin { background: var(--mk-koyu); overflow: hidden; } .mk-vitrin__ic { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 40px; align-items: center; } .mk-vitrin__metin { padding-block: 64px; min-width: 0; } .mk-vitrin__metin h2 { font-size: clamp(26px, 3.4vw, 42px); font-weight: 800; line-height: 1.12; color: var(--mk-beyaz); } .mk-vitrin__metin p { margin: 18px 0 0; max-width: 440px; font-size: 16px; line-height: 1.65; color: var(--mk-ak-2); } .mk-vitrin__btn { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } .mk-vitrin__gorsel { position: relative; align-self: stretch; min-height: 320px; min-width: 0; } .mk-vitrin__gorsel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .mk-vitrin__perde { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15, 18, 22, 0.4) 0%, transparent 42%); } .mk-serit { border-top: 1px solid var(--mk-ak-cizgi); overflow: hidden; padding-block: 18px; } .mk-serit__ray { display: flex; width: max-content; animation: mk-kay 30s linear infinite; } .mk-serit__grup { display: flex; align-items: center; gap: 40px; padding-right: 40px; } .mk-serit__kelime { color: var(--mk-ak-2); font-size: 13.5px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; white-space: nowrap; } .mk-serit__nokta { color: var(--mk-marka-acik); font-size: 11px; } @keyframes mk-kay { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .mk-serit__ray { animation: none; } } /* ================================================================= * 11. Şubeler * ============================================================== */ .mk-sube-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px; } .mk-sube-kart { display: flex; flex-direction: column; min-width: 0; background: var(--mk-beyaz); border: 1px solid var(--mk-cizgi); border-radius: var(--mk-r-l); overflow: hidden; color: inherit; transition: transform var(--mk-gecis), box-shadow var(--mk-gecis); } .mk-sube-kart:hover { transform: translateY(-3px); box-shadow: var(--mk-golge); color: inherit; } .mk-sube-kart--koyu { background: var(--mk-koyu-2); border-color: var(--mk-ak-cizgi); } .mk-sube-kart__gorsel { display: block; aspect-ratio: 16 / 10; background: #EDEEEF; overflow: hidden; } .mk-sube-kart__gorsel img { width: 100%; height: 100%; object-fit: cover; } .mk-sube-kart__alt { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 20px 22px; } .mk-sube-kart__metin { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .mk-sube-kart__metin h2, .mk-sube-kart__metin h3 { font-size: 19px; font-weight: 800; color: var(--mk-metin); } .mk-sube-kart--koyu .mk-sube-kart__metin h2, .mk-sube-kart--koyu .mk-sube-kart__metin h3 { color: var(--mk-beyaz); } .mk-sube-kart__adres { font-size: 13.5px; color: var(--mk-soluk); } .mk-sube-kart--koyu .mk-sube-kart__adres { color: var(--mk-ak-3); } .mk-sube-kart__ok { flex: 0 0 auto; color: var(--mk-marka-metin); } .mk-sube-kart--koyu .mk-sube-kart__ok { color: var(--mk-marka-acik); } /* ================================================================= * 12. SSS * ============================================================== */ .mk-sss { background: var(--mk-beyaz); } .mk-sss__liste { display: flex; flex-direction: column; gap: 12px; } .mk-sss__oge { border: 1px solid var(--mk-cizgi); border-radius: var(--mk-r-l); background: var(--mk-zemin); overflow: hidden; } .mk-sss__oge summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; cursor: pointer; font-size: 16px; font-weight: 700; color: var(--mk-metin); list-style: none; } .mk-sss__oge summary::-webkit-details-marker { display: none; } .mk-sss__ok { flex: 0 0 auto; color: var(--mk-marka-metin); transition: transform var(--mk-gecis); } .mk-sss__oge[open] .mk-sss__ok { transform: rotate(180deg); } .mk-sss__cevap { padding: 0 22px 20px; font-size: 15px; line-height: 1.7; color: var(--mk-metin-2); } /* ================================================================= * 13. İç sayfa başlığı + sayfa yolu * ============================================================== */ .mk-sayfa-bas { position: relative; background: var(--mk-koyu); overflow: hidden; isolation: isolate; } .mk-sayfa-bas__zemin { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.24; z-index: -2; } .mk-sayfa-bas__perde { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(15, 18, 22, 0.72) 0%, rgba(15, 18, 22, 0.95) 100%); } .mk-sayfa-bas__ic { padding-block: 54px 48px; } .mk-sayfa-bas__satir { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .mk-sayfa-bas h1 { margin: 0; color: var(--mk-beyaz); font-size: clamp(28px, 4vw, 46px); font-weight: 800; letter-spacing: -0.018em; } .mk-sayfa-bas__sag { font-size: 14px; color: var(--mk-ak-3); } .mk-sayfa-bas__metin { margin: 14px 0 0; max-width: 560px; color: var(--mk-ak-2); font-size: 16px; line-height: 1.65; } .mk-yol { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; font-size: 13px; } /* Dokunma hedefi: sayfa yolu bağlantıları en az 24 px (WCAG 2.2 — 2.5.8). */ .mk-yol a, .mk-yol__son { display: inline-flex; align-items: center; min-height: 24px; } .mk-yol a { color: var(--mk-marka-metin); } .mk-yol__son { font-weight: 600; } .mk-yol__ayrac { display: inline-flex; color: var(--mk-soluk-2); } .mk-yol--koyu a { color: var(--mk-ak-3); } .mk-yol--koyu a:hover { color: var(--mk-beyaz); } .mk-yol--koyu .mk-yol__son { color: var(--mk-beyaz); } .mk-yol--koyu .mk-yol__ayrac { color: rgba(255, 255, 255, 0.45); } /* ================================================================= * 14. Katalog (arşiv + kategori) * ============================================================== */ .mk-katalog { padding-block: 34px 80px; } .mk-katalog__filtre { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; } .mk-cipler { display: flex; flex-wrap: wrap; gap: 8px; } .mk-cip { display: inline-block; padding: 10px 18px; border: 1px solid var(--mk-cizgi); border-radius: var(--mk-r-tam); background: var(--mk-beyaz); color: var(--mk-metin-2); font-size: 14px; font-weight: 600; transition: background var(--mk-gecis), color var(--mk-gecis), border-color var(--mk-gecis); } .mk-cip:hover { border-color: var(--mk-koyu); color: var(--mk-metin); } .mk-cip.is-aktif { background: var(--mk-koyu); border-color: var(--mk-koyu); color: var(--mk-beyaz); } .mk-arama { position: relative; display: flex; align-items: center; gap: 8px; min-width: min(260px, 100%); padding: 9px 18px; background: var(--mk-beyaz); border: 1px solid var(--mk-cizgi); border-radius: var(--mk-r-tam); } .mk-arama__ikon { flex: 0 0 auto; color: var(--mk-soluk); } .mk-arama input[type="search"] { flex: 1 1 auto; min-width: 0; border: 0; outline: none; background: none; font-size: 14px; color: var(--mk-metin); } .mk-arama input::placeholder { color: var(--mk-soluk); } .mk-arama-kutu { margin-bottom: 28px; } .mk-arama-kutu .mk-arama { max-width: 460px; } .mk-katalog__arama-bilgi { margin: -12px 0 24px; font-size: 14px; color: var(--mk-soluk); } .mk-katalog__arama-bilgi a { margin-left: 6px; font-weight: 700; } .mk-bos { padding: 64px 0; text-align: center; color: var(--mk-soluk); } .mk-bos p { margin-bottom: 22px; font-size: 16px; } .mk-sayfalama { margin-top: 40px; } .mk-sayfalama ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; } .mk-sayfalama a, .mk-sayfalama span { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding-inline: 14px; border: 1px solid var(--mk-cizgi); border-radius: var(--mk-r-s); background: var(--mk-beyaz); font-size: 14px; font-weight: 700; color: var(--mk-metin-2); } .mk-sayfalama a:hover { border-color: var(--mk-marka); color: var(--mk-marka-metin); } .mk-sayfalama .current { background: var(--mk-koyu); border-color: var(--mk-koyu); color: var(--mk-beyaz); } /* ================================================================= * 15. Ürün detay * ============================================================== */ .mk-urun__yol { padding-top: 26px; } .mk-urun__ic { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 44px; padding-block: 22px 64px; align-items: start; } .mk-urun__medya { min-width: 0; } .mk-urun__ana { position: relative; aspect-ratio: 4 / 3; border-radius: var(--mk-r-xl); overflow: hidden; background: #EDEEEF; border: 1px solid var(--mk-cizgi); } .mk-urun__ana img { width: 100%; height: 100%; object-fit: cover; } .mk-urun__serit { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; padding-bottom: 4px; } .mk-urun__kucuk { flex: 0 0 82px; width: 82px; height: 62px; padding: 0; border: 1px solid var(--mk-cizgi); border-radius: var(--mk-r-s); overflow: hidden; background: none; cursor: pointer; transition: border-color var(--mk-gecis); } .mk-urun__kucuk img { width: 100%; height: 100%; object-fit: cover; } .mk-urun__kucuk.is-aktif, .mk-urun__kucuk:hover { border-color: var(--mk-marka); } .mk-urun__bilgi { display: flex; flex-direction: column; gap: 14px; min-width: 0; } /* Kategori bağlantısı — dokunma hedefi en az 24 px. */ .mk-urun__kat.mk-urun__kat { display: inline-flex; align-items: center; align-self: flex-start; min-height: 24px; color: var(--mk-marka-metin); } .mk-urun__baslik { margin: 0; font-size: clamp(24px, 3.2vw, 34px); font-weight: 800; } .mk-urun__fiyat { display: flex; align-items: baseline; gap: 10px; margin: 0; } .mk-urun__fiyat strong { font-size: 26px; font-weight: 800; } .mk-urun__fiyat del { font-size: 17px; color: var(--mk-soluk); } .mk-urun__metin { font-size: 16px; line-height: 1.75; color: var(--mk-metin-2); } .mk-urun__ozellik { width: 100%; border-collapse: collapse; font-size: 14.5px; } .mk-urun__ozellik th, .mk-urun__ozellik td { padding: 11px 0; border-bottom: 1px solid var(--mk-cizgi-2); text-align: left; vertical-align: top; } .mk-urun__ozellik th { width: 42%; font-weight: 600; color: var(--mk-soluk); } .mk-urun__ozellik td { font-weight: 600; color: var(--mk-metin); } .mk-urun__kod { margin: 0; font-size: 13.5px; color: var(--mk-soluk); } .mk-urun__nerede { padding: 20px 22px; border: 1px solid var(--mk-cizgi); border-radius: var(--mk-r-l); background: var(--mk-beyaz); } .mk-urun__nerede-bas, .mk-urun__saat { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 14px; font-weight: 700; color: var(--mk-metin); } .mk-urun__nerede-bas .mk-ikon, .mk-urun__saat .mk-ikon { flex: 0 0 auto; color: var(--mk-marka-metin); } .mk-urun__nerede ul { margin: 14px 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; } .mk-urun__nerede ul a { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; } .mk-urun__nerede ul em { display: block; padding-left: 24px; font-size: 13px; font-style: normal; color: var(--mk-soluk); } .mk-urun__saat { padding-top: 14px; border-top: 1px solid var(--mk-cizgi-2); font-weight: 600; color: var(--mk-metin-2); } .mk-urun__eylem { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; } .mk-benzer { background: var(--mk-beyaz); border-top: 1px solid var(--mk-cizgi-2); } /* ================================================================= * 16. Şube detay / iletişim * ============================================================== */ .mk-iletisim { padding-block: 40px 80px; } .mk-iletisim__giris { margin-bottom: 32px; } .mk-iletisim__izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); gap: 24px; } .mk-sube-detay { display: flex; flex-direction: column; min-width: 0; background: var(--mk-beyaz); border: 1px solid var(--mk-cizgi); border-radius: var(--mk-r-xl); overflow: hidden; } .mk-sube-detay__gorsel { aspect-ratio: 16 / 10; background: #EDEEEF; overflow: hidden; } .mk-sube-detay__gorsel img { width: 100%; height: 100%; object-fit: cover; } .mk-sube-detay__ic { display: flex; flex-direction: column; gap: 15px; padding: 26px; } .mk-sube-detay__ad { margin: 0; font-size: 22px; font-weight: 800; } .mk-sube-detay__satir { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 15px; line-height: 1.6; color: var(--mk-metin-2); font-style: normal; } .mk-sube-detay__ikon.mk-sube-detay__ikon { flex: 0 0 auto; margin-top: 2px; color: var(--mk-marka-metin); } .mk-sube-detay__satir a { color: var(--mk-metin-2); font-weight: 600; } .mk-sube-detay__satir a:hover { color: var(--mk-marka-metin); } .mk-sube-detay__harita { width: 100%; height: 200px; border: 0; border-radius: var(--mk-r-l); } .mk-sube-detay__btn { display: flex; flex-wrap: wrap; gap: 10px; } .mk-iletisim__cta { display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; margin-top: 24px; padding: 32px; border-radius: var(--mk-r-xl); background: var(--mk-koyu); } .mk-iletisim__cta h2 { margin: 0; font-size: 20px; font-weight: 800; color: var(--mk-beyaz); } .mk-iletisim__cta p { margin: 6px 0 0; font-size: 14.5px; color: var(--mk-ak-2); } .mk-iletisim__cta-btn { display: flex; flex-wrap: wrap; gap: 10px; } .mk-sube-sayfa { padding-block: 40px 80px; } .mk-sube-sayfa__ic { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); gap: 36px; align-items: start; } .mk-sube-sayfa__metin { min-width: 0; } .mk-sube-sayfa__diger-bas { margin: 32px 0 16px; font-size: 20px; font-weight: 800; } .mk-sube-sayfa__metin > .mk-sube-sayfa__diger-bas:first-child { margin-top: 0; } /* ================================================================= * 17. Hakkımızda + sayaç * ============================================================== */ .mk-hakkinda { padding-block: 56px 52px; } .mk-hakkinda__ic { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 44px; align-items: start; } .mk-hakkinda__metin { min-width: 0; } .mk-hakkinda__metin .mk-btn { margin-top: 10px; } .mk-hakkinda__galeri { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; min-width: 0; } .mk-hakkinda__galeri img { width: 100%; height: 160px; object-fit: cover; border-radius: var(--mk-r-l); } .mk-hakkinda__genis { grid-column: 1 / -1; height: 220px !important; } .mk-sayac { background: var(--mk-koyu); } .mk-sayac__ic { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 28px; padding-block: 50px; } .mk-sayac__oge { min-width: 0; } .mk-sayac__oge strong { display: block; font-size: clamp(30px, 4vw, 42px); font-weight: 800; color: var(--mk-beyaz); line-height: 1.1; } .mk-sayac__oge span { display: block; margin-top: 5px; font-size: 14px; color: var(--mk-ak-2); } /* ================================================================= * 18. Yazı gövdesi (WYSIWYG) * ============================================================== */ .mk-yazi { font-size: 16.5px; line-height: 1.78; color: var(--mk-metin-2); } .mk-yazi > *:first-child { margin-top: 0; } .mk-yazi > *:last-child { margin-bottom: 0; } .mk-yazi h2 { margin: 34px 0 14px; font-size: 22px; color: var(--mk-metin); } .mk-yazi h3 { margin: 26px 0 10px; font-size: 18px; color: var(--mk-metin); } .mk-yazi ul, .mk-yazi ol { margin: 0 0 1em; padding-left: 22px; } .mk-yazi li { margin-bottom: 8px; } .mk-yazi strong { color: var(--mk-metin); } .mk-yazi img { border-radius: var(--mk-r-l); margin-block: 20px; } .mk-yazi blockquote { margin: 22px 0; padding: 16px 22px; border-left: 3px solid var(--mk-marka); background: var(--mk-beyaz); border-radius: 0 var(--mk-r) var(--mk-r) 0; } .mk-yazi table { width: 100%; border-collapse: collapse; font-size: 15px; } .mk-yazi th, .mk-yazi td { padding: 10px 12px; border: 1px solid var(--mk-cizgi); text-align: left; } .mk-sayfa, .mk-yasal, .mk-tekil { padding-block: 48px 80px; } .mk-tekil__ust { margin: 0 0 20px; font-size: 13.5px; color: var(--mk-soluk); } .mk-tekil__gezinti { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 48px; padding-top: 26px; border-top: 1px solid var(--mk-cizgi); } .mk-tekil__gezinti a { display: flex; flex-direction: column; gap: 3px; max-width: 46%; min-width: 200px; } .mk-tekil__gezinti em { font-size: 12px; font-style: normal; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mk-soluk); } .mk-tekil__sag { text-align: right; margin-left: auto; } .mk-liste { padding-block: 44px 80px; } .mk-yazi-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 20px; } .mk-yazi-kart { min-width: 0; } .mk-yazi-kart > a { display: flex; flex-direction: column; height: 100%; background: var(--mk-beyaz); border: 1px solid var(--mk-cizgi); border-radius: var(--mk-r-l); overflow: hidden; color: inherit; transition: transform var(--mk-gecis), box-shadow var(--mk-gecis); } .mk-yazi-kart > a:hover { transform: translateY(-3px); box-shadow: var(--mk-golge); color: inherit; } .mk-yazi-kart__gorsel { display: block; aspect-ratio: 16 / 10; background: #EDEEEF; } .mk-yazi-kart__gorsel img { width: 100%; height: 100%; object-fit: cover; } .mk-yazi-kart__metin { display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 20px; } /* ================================================================= * 19. 404 * ============================================================== */ .mk-404 { padding-block: 72px 90px; text-align: center; } .mk-404__kod { margin: 0; font-size: clamp(64px, 12vw, 118px); font-weight: 800; line-height: 1; color: var(--mk-marka); letter-spacing: -0.03em; } .mk-404 h1 { margin: 8px 0 12px; font-size: clamp(24px, 3.4vw, 34px); } .mk-404__metin { margin: 0 auto 28px; max-width: 460px; color: var(--mk-soluk); } .mk-404 .mk-arama-kutu { display: flex; justify-content: center; } .mk-404 .mk-arama { width: min(460px, 100%); } .mk-404__btn { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } .mk-404__kategori { margin-top: 42px; } .mk-404__kategori h2 { margin-bottom: 14px; font-size: 15px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mk-soluk); } .mk-404__kategori .mk-cipler { justify-content: center; } /* ================================================================= * 20. Alt bilgi * ============================================================== */ .mk-alt { background: var(--mk-koyu); margin-top: auto; } .mk-alt__cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-block: 42px; border-bottom: 1px solid var(--mk-ak-cizgi); } .mk-alt__cta-metin { display: flex; align-items: center; gap: 16px; min-width: 0; } .mk-alt__cta-metin strong { display: block; font-size: 19px; font-weight: 800; color: var(--mk-beyaz); } .mk-alt__cta-metin span { display: block; margin-top: 3px; font-size: 14px; color: var(--mk-ak-2); } .mk-alt__cta-btn { display: flex; flex-wrap: wrap; gap: 12px; } .mk-alt__sutunlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 32px; padding-block: 48px; } .mk-alt__marka, .mk-alt__sutun { min-width: 0; } .mk-alt__marka { display: flex; flex-direction: column; gap: 16px; } .mk-alt__logo { display: inline-flex; align-items: center; align-self: flex-start; min-height: 44px; line-height: 0; } .mk-alt__logo img { height: 28px; width: auto; max-width: 180px; object-fit: contain; } .mk-alt__marka p { margin: 0; max-width: 300px; font-size: 14px; line-height: 1.65; color: var(--mk-ak-2); } .mk-alt__sosyal { display: flex; gap: 10px; } .mk-alt__ust { margin: 0 0 14px; font-size: 12px; font-weight: 700; letter-spacing: 0.13em; color: var(--mk-ak-3); text-transform: uppercase; } .mk-alt__liste, .mk-alt__subeler, .mk-alt__iletisim, .mk-alt__yasal-liste { margin: 0; padding: 0; list-style: none; } .mk-alt__liste li { margin-bottom: 9px; } /* Dokunma hedefi: alt bilgi bağlantıları en az 26 px yüksekliğinde. */ .mk-alt__liste a, .mk-alt__iletisim a, .mk-alt__yasal-liste a, .mk-alt__subeler a { display: inline-flex; align-items: center; min-height: 26px; } .mk-alt__liste a, .mk-alt__iletisim a { gap: 6px; font-size: 14px; color: var(--mk-ak-2); } .mk-alt__liste a:hover, .mk-alt__iletisim a:hover, .mk-alt__subeler a:hover { color: var(--mk-beyaz); } .mk-alt__subeler li { margin-bottom: 14px; } .mk-alt__subeler a { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 700; color: var(--mk-beyaz); } .mk-alt__pin.mk-alt__pin { color: var(--mk-marka-acik); flex: 0 0 auto; } .mk-alt__subeler address { margin: 3px 0 0 25px; font-size: 13px; font-style: normal; line-height: 1.5; color: var(--mk-ak-3); } .mk-alt__saat, .mk-alt__iletisim li { display: flex; align-items: center; gap: 9px; margin: 0 0 11px; font-size: 13.5px; color: var(--mk-ak-2); } .mk-alt__saat .mk-ikon, .mk-alt__iletisim .mk-ikon { flex: 0 0 auto; color: var(--mk-marka-acik); } .mk-alt__trendyol { margin-top: 6px; } .mk-alt__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 22px 26px; border-top: 1px solid var(--mk-ak-cizgi); } .mk-alt__telif { font-size: 13px; color: var(--mk-ak-3); } .mk-alt__yasal-liste { display: flex; flex-wrap: wrap; gap: 20px; } .mk-alt__yasal-liste a { font-size: 12.5px; color: var(--mk-ak-3); } .mk-alt__yasal-liste a:hover { color: var(--mk-beyaz); } /* ================================================================= * 21. Sabit WhatsApp + hızlı bakış * ============================================================== */ .mk-wa-sabit { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: inline-flex; align-items: center; gap: 8px; padding: 13px 20px; border-radius: var(--mk-r-tam); background: var(--mk-wa); color: var(--mk-beyaz); font-size: 14px; font-weight: 800; letter-spacing: 0.02em; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28); transition: background var(--mk-gecis); } .mk-wa-sabit:hover { background: var(--mk-wa-2); color: var(--mk-beyaz); } .mk-hizli { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity 0.2s ease; } .mk-hizli[hidden] { display: none; } .mk-hizli.is-acik { opacity: 1; } .mk-hizli__perde { position: absolute; inset: 0; background: rgba(10, 12, 15, 0.66); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } .mk-hizli__kutu { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); width: 100%; max-width: 880px; max-height: 88vh; overflow: auto; background: var(--mk-beyaz); border-radius: 18px; transform: translateY(12px); transition: transform 0.2s ease; } .mk-hizli.is-acik .mk-hizli__kutu { transform: none; } .mk-hizli__kapat { position: absolute; top: 14px; right: 14px; z-index: 3; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: var(--mk-r-tam); background: rgba(15, 18, 22, 0.78); color: var(--mk-beyaz); cursor: pointer; } .mk-hizli__kapat:hover { background: var(--mk-koyu); } .mk-hizli__gorsel { position: relative; min-height: 280px; background: #EDEEEF; overflow: hidden; } .mk-hizli__gorsel img { width: 100%; height: 100%; object-fit: cover; } .mk-hizli__metin { display: flex; flex-direction: column; gap: 12px; padding: 40px 32px 32px; min-width: 0; } .mk-hizli__metin h2 { margin: 0; font-size: 25px; font-weight: 800; } .mk-hizli__metin > p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--mk-soluk); } .mk-hizli__bilgi { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--mk-cizgi-2); } .mk-hizli__bilgi > span { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--mk-metin-2); } .mk-hizli__bilgi .mk-ikon { flex: 0 0 auto; color: var(--mk-marka-metin); } .mk-hizli__eylem { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; } /* ================================================================= * 22. Duyarlı düzen * ============================================================== */ @media (max-width: 640px) { :root { --mk-pad: 20px; --mk-ust-h: 66px; } .mk-hero__ic { padding-block: 56px 52px; } .mk-bolum { padding-block: 48px; } .mk-bolum--one-cikan { padding-block: 44px 52px; } .mk-vitrin__metin { padding-block: 48px 40px; } .mk-vitrin__gorsel { min-height: 260px; } .mk-sayfa-bas__ic { padding-block: 38px 34px; } .mk-alt__sutunlar { padding-block: 36px; gap: 28px; } .mk-hizli__metin { padding: 28px 22px 26px; } .mk-logo img { height: 26px; max-width: 150px; } .mk-wa-sabit { right: 14px; bottom: 14px; padding: 12px 16px; font-size: 13px; } .mk-hakkinda__galeri img { height: 130px; } .mk-hakkinda__genis { height: 180px !important; } } @media (min-width: 980px) { .mk-nav { display: block; } .mk-ust__gizle-mobil { display: inline-flex; } .mk-hamburger { display: none; } .mk-mobil { display: none !important; } .mk-hero__ic { padding-block: 122px 112px; } .mk-sayfa-bas__ic { padding-block: 70px 62px; } .mk-urun__ic { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } .mk-sube-sayfa__ic { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } @media (max-width: 1180px) and (min-width: 980px) { .mk-ust .mk-mega__ic { grid-template-columns: repeat(4, minmax(0, 1fr)); } .mk-ust .mk-mega__promo { display: none; } } /* Yazdırma */ @media print { .mk-ust, .mk-alt__cta, .mk-wa-sabit, .mk-hizli, .mk-mobil, .mk-atla { display: none !important; } body { background: #fff; } .mk-hero__zemin, .mk-sayfa-bas__zemin { display: none; } .mk-hero, .mk-sayfa-bas { background: #fff; } .mk-hero h1, .mk-sayfa-bas h1 { color: #000; } }