/** Shopify CDN: Minification failed Line 2201:12 Expected identifier but found whitespace Line 2201:33 Unexpected bad string token Line 2201:77 Unterminated string token Line 2203:72 Unterminated string token **/ /* ============================================================ Medkaltec — Premium Design System v2 Apple / Feastables kalitesinde medikal e-ticaret ============================================================ */ /* ── Inter fontu artık theme.liquid içinde paralel + preload + non-blocking yükleniyor (LCP/CLS için). Buradaki @import seri-zincir oluşturuyordu: CSS in → @import keşfi → font in. Kaldırıldı. ─────────── */ /* ── Design Tokens (CSS Variables) ──────────────────────── */ :root { --clr-primary: #0C4A6E; /* Koyu medikal mavi */ --clr-blue-mid: #0369A1; --clr-blue-lt: #E0F2FE; --clr-cta: #DC2626; /* Kırmızı — sepete ekle */ --clr-cta-hover: #B91C1C; --clr-green: #16A34A; /* Stok / onay */ --clr-text: #111827; --clr-text-mid: #374151; --clr-text-lt: #6B7280; --clr-bg: #F9FAFB; --clr-white: #FFFFFF; --clr-border: #E5E7EB; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05); --shadow-md: 0 4px 12px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.07); --shadow-lg: 0 10px 30px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.08); --shadow-cta: 0 4px 14px rgba(220,38,38,.40); --transition: all 0.22s cubic-bezier(.4,0,.2,1); --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* ── Base Typography ─────────────────────────────────────── */ body, .shopify-section, .product-item, .product-item__title, nav, header, footer, h1, h2, h3, h4, h5, h6, p, a, span, div, li { font-family: var(--font-sans) !important; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ── Announcement Bar — güven şeridi ─────────────────────── */ .announcement-bar, [class*="announcement"], .shopify-section--announcement-bar { background: var(--clr-primary) !important; color: var(--clr-white) !important; font-size: 13px !important; font-weight: 500 !important; letter-spacing: .3px !important; } /* ── Header — temiz & yapışkan ───────────────────────────── */ header, .site-header, [class*="header--"] { background: var(--clr-white) !important; box-shadow: 0 1px 0 var(--clr-border), var(--shadow-sm) !important; } /* ── Sepete Ekle (ATC) Butonu — dönüşüm motoru ───────────── */ .product-form__submit, button[name="add"], .btn-atc, [class*="add-to-cart"], form[action="/cart/add"] button[type="submit"] { background: var(--clr-cta) !important; border: 2px solid var(--clr-cta) !important; color: var(--clr-white) !important; font-family: var(--font-sans) !important; font-size: 16px !important; font-weight: 700 !important; letter-spacing: .4px !important; border-radius: var(--radius-md) !important; min-height: 54px !important; padding: 0 28px !important; transition: var(--transition) !important; box-shadow: var(--shadow-cta) !important; text-transform: uppercase !important; } .product-form__submit:hover, button[name="add"]:hover, form[action="/cart/add"] button[type="submit"]:hover { background: var(--clr-cta-hover) !important; border-color: var(--clr-cta-hover) !important; transform: translateY(-2px) !important; box-shadow: 0 8px 20px rgba(220,38,38,.50) !important; } .product-form__submit:active, button[name="add"]:active { transform: translateY(0) !important; box-shadow: var(--shadow-cta) !important; } /* ── Fiyat — belirgin ────────────────────────────────────── */ .price__regular, .price--large, [class*="price"] .money, .product__price { font-family: var(--font-sans) !important; font-weight: 800 !important; color: var(--clr-primary) !important; } .price--sale .price__sale, [class*="price--on-sale"] { color: var(--clr-cta) !important; } /* ── Ürün Başlığı ─────────────────────────────────────────── */ .product__title, .product-title, h1.m5, [class*="product__title"] { font-size: clamp(1.3rem, 3vw, 1.8rem) !important; font-weight: 700 !important; line-height: 1.3 !important; color: var(--clr-text) !important; } /* ── Ürün Kart — premium hover ───────────────────────────── */ .product-item, .grid-product, [class*="product-card"], [class*="card--product"] { background: var(--clr-white) !important; border-radius: var(--radius-md) !important; border: 1px solid var(--clr-border) !important; overflow: hidden !important; transition: var(--transition) !important; box-shadow: var(--shadow-sm) !important; } .product-item:hover, [class*="product-card"]:hover { transform: translateY(-4px) !important; box-shadow: var(--shadow-lg) !important; border-color: rgba(12,74,110,.15) !important; } /* Kart görsel zoom */ .product-item:hover img, [class*="product-card"]:hover img, .product-item:hover picture img { transform: scale(1.04) !important; transition: transform 0.4s ease !important; } .product-item img, [class*="product-card"] img { transition: transform 0.4s ease !important; } /* Kart başlık */ .product-item__title, [class*="card__heading"], .product-item .h4 { font-size: 0.88rem !important; font-weight: 600 !important; line-height: 1.35 !important; color: var(--clr-text) !important; } /* Kart fiyat */ .product-item .price, [class*="card__price"] { font-weight: 700 !important; color: var(--clr-primary) !important; } /* ── Koleksiyon Sayfası ─────────────────────────────────── */ @media (max-width: 640px) { .product-list, .collection__grid, [class*="product-grid"], [data-section-type="collection"] .grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; } } /* Aktif filtre / sıralama butonları */ .collection-filter-button, [class*="filter__toggle"], [class*="sort__button"] { border-radius: var(--radius-sm) !important; font-weight: 500 !important; font-size: 14px !important; } /* ── Güven Rozetleri — yeniden tasarım ───────────────────── */ .trust-badges { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important; gap: 10px !important; margin: 20px 0 !important; padding: 0 !important; background: transparent !important; } .trust-badge-item { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; padding: 12px 8px !important; background: var(--clr-white) !important; border: 1px solid var(--clr-border) !important; border-radius: var(--radius-md) !important; transition: var(--transition) !important; box-shadow: var(--shadow-sm) !important; } .trust-badge-item:hover { border-color: var(--clr-blue-mid) !important; box-shadow: 0 0 0 3px var(--clr-blue-lt) !important; } .trust-badge-item svg { margin-bottom: 6px !important; } .trust-badge-item strong { display: block !important; font-size: 12px !important; font-weight: 700 !important; color: var(--clr-text) !important; line-height: 1.2 !important; } .trust-badge-item span { font-size: 11px !important; color: var(--clr-text-lt) !important; } /* ── Stok Uyarısı / Urgency ──────────────────────────────── */ .urgency-label { display: inline-flex !important; align-items: center !important; gap: 5px !important; background: #FEF3C7 !important; color: #92400E !important; border: 1px solid #F59E0B !important; border-radius: 20px !important; padding: 4px 12px !important; font-size: 12px !important; font-weight: 600 !important; margin: 8px 0 !important; } .product__inventory, [class*="inventory"] { color: var(--clr-cta) !important; font-weight: 600 !important; font-size: 0.88rem !important; } /* ── Sticky Sepete Ekle ─────────────────────────────────── */ @media (max-width: 768px) { .sticky-atc-bar { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; z-index: 9000 !important; background: var(--clr-white) !important; padding: 10px 14px !important; box-shadow: 0 -4px 24px rgba(0,0,0,.14), 0 -1px 0 var(--clr-border) !important; display: flex !important; gap: 10px !important; align-items: center !important; } .sticky-atc-bar .sticky-price { font-weight: 800 !important; font-size: 1.05rem !important; color: var(--clr-primary) !important; white-space: nowrap !important; } .sticky-atc-bar .sticky-btn { flex: 1 !important; background: var(--clr-cta) !important; color: var(--clr-white) !important; border: none !important; border-radius: var(--radius-sm) !important; padding: 14px !important; font-size: 15px !important; font-weight: 700 !important; cursor: pointer !important; font-family: var(--font-sans) !important; text-transform: uppercase !important; letter-spacing: .3px !important; box-shadow: var(--shadow-cta) !important; } } /* ── WhatsApp Floating Button ────────────────────────────── */ .mk-whatsapp-fab { position: fixed !important; right: 20px !important; bottom: 24px !important; z-index: 8999 !important; width: 56px !important; height: 56px !important; border-radius: 50% !important; background: #25D366 !important; display: flex !important; align-items: center !important; justify-content: center !important; text-decoration: none !important; box-shadow: 0 4px 20px rgba(37,211,102,.45), 0 2px 8px rgba(0,0,0,.15) !important; transition: var(--transition) !important; animation: mk-pulse 2.5s infinite !important; } .mk-whatsapp-fab:hover { transform: scale(1.1) !important; box-shadow: 0 8px 28px rgba(37,211,102,.55), 0 4px 12px rgba(0,0,0,.18) !important; animation: none !important; } .mk-whatsapp-fab svg { width: 30px !important; height: 30px !important; fill: #fff !important; } @keyframes mk-pulse { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,.5); } 70% { box-shadow: 0 0 0 12px rgba(37,211,102,0); } 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); } } /* Sticky ATC varsa WhatsApp butonu yukarı çık */ @media (max-width: 768px) { .template-product .mk-whatsapp-fab { bottom: 88px !important; } } /* ── Breadcrumb ──────────────────────────────────────────── */ .breadcrumbs, nav[aria-label="breadcrumb"], [class*="breadcrumb"] { font-size: 12px !important; color: var(--clr-text-lt) !important; margin-bottom: 8px !important; } /* ── Sayfa geneli butonlar ───────────────────────────────── */ .btn, .button, [class*="btn--primary"], [class*="button--primary"] { border-radius: var(--radius-sm) !important; font-family: var(--font-sans) !important; font-weight: 600 !important; transition: var(--transition) !important; } /* İkincil buton */ [class*="btn--secondary"], [class*="button--secondary"], .btn-secondary { border: 2px solid var(--clr-primary) !important; color: var(--clr-primary) !important; background: transparent !important; border-radius: var(--radius-sm) !important; font-weight: 600 !important; transition: var(--transition) !important; } [class*="btn--secondary"]:hover, [class*="button--secondary"]:hover { background: var(--clr-primary) !important; color: var(--clr-white) !important; } /* ── Arama kutusu ─────────────────────────────────────────── */ .search__input, [class*="search__input"], input[type="search"] { border-radius: var(--radius-sm) !important; border: 1.5px solid var(--clr-border) !important; font-family: var(--font-sans) !important; transition: var(--transition) !important; } .search__input:focus, input[type="search"]:focus { border-color: var(--clr-blue-mid) !important; box-shadow: 0 0 0 3px var(--clr-blue-lt) !important; outline: none !important; } /* ── Form input'lar ───────────────────────────────────────── */ input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], select, textarea { font-size: 16px !important; /* iOS zoom önler */ font-family: var(--font-sans) !important; border-radius: var(--radius-sm) !important; transition: var(--transition) !important; } input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px var(--clr-blue-lt) !important; border-color: var(--clr-blue-mid) !important; outline: none !important; } /* ── Sepet / Ödeme ───────────────────────────────────────── */ .cart__checkout, [class*="cart__checkout"], .cart-checkout-btn { background: var(--clr-cta) !important; border-color: var(--clr-cta) !important; border-radius: var(--radius-md) !important; min-height: 54px !important; font-size: 16px !important; font-weight: 700 !important; font-family: var(--font-sans) !important; transition: var(--transition) !important; box-shadow: var(--shadow-cta) !important; text-transform: uppercase !important; } .cart__checkout:hover, [class*="cart__checkout"]:hover { background: var(--clr-cta-hover) !important; transform: translateY(-2px) !important; } /* ── Koleksiyon/Blog Banner ──────────────────────────────── */ .collection__banner, [class*="collection-hero"], [class*="banner--collection"] { border-radius: var(--radius-lg) !important; overflow: hidden !important; } /* ── Başlıklar — sıralama ────────────────────────────────── */ h1 { font-size: clamp(1.6rem, 4vw, 2.4rem) !important; font-weight: 800 !important; } h2 { font-size: clamp(1.3rem, 3vw, 2rem) !important; font-weight: 700 !important; } h3 { font-size: clamp(1.1rem, 2.5vw, 1.5rem) !important; font-weight: 700 !important; } /* ── Blog Makale Sayfası ─────────────────────────────────── */ .article__content, [class*="article-content"], .rte { font-size: 1rem !important; line-height: 1.75 !important; color: var(--clr-text-mid) !important; } .article__title, [class*="article__title"] { font-weight: 800 !important; color: var(--clr-text) !important; } /* ── Rozet / Etiket ──────────────────────────────────────── */ .badge, [class*="product-label"], [class*="label--sale"], [class*="label--new"] { font-family: var(--font-sans) !important; font-weight: 700 !important; border-radius: 4px !important; font-size: 11px !important; text-transform: uppercase !important; letter-spacing: .5px !important; } /* ── Ana Sayfa Hero ──────────────────────────────────────── */ .hero, [class*="hero--"], [class*="banner--homepage"] { border-radius: var(--radius-lg) !important; overflow: hidden !important; } @media (max-width: 768px) { .hero__title, [class*="banner__title"], [class*="hero__heading"] { font-size: clamp(1.5rem, 6vw, 2rem) !important; font-weight: 800 !important; line-height: 1.15 !important; } } /* ── Footer ──────────────────────────────────────────────── */ footer, .site-footer, [class*="footer__"] { font-family: var(--font-sans) !important; } /* ── Scroll bar (WebKit) ─────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--clr-bg); } ::-webkit-scrollbar-thumb { background: var(--clr-border); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--clr-blue-mid); } /* ── Selection rengi ─────────────────────────────────────── */ ::selection { background: var(--clr-blue-lt); color: var(--clr-primary); } /* ── Responsive yardımcılar ──────────────────────────────── */ @media (max-width: 768px) { /* Fiyat daha büyük mobilde */ .price__regular .money, .price .money { font-size: 1.4rem !important; } /* Başlık okunabilirliği */ h1.product-title, .product__title h1, .pdp-title { font-size: 1.2rem !important; } /* Buton tam genişlik */ .product-form__submit, button[name="add"] { width: 100% !important; } /* Kart başlık küçük */ .product-item__title, [class*="card__heading"] { font-size: 0.82rem !important; line-height: 1.3 !important; } /* Sepet görseli */ .cart__item-image { width: 68px !important; height: 68px !important; } } /* ── Ödeme İkonları (footer) ─────────────────────────────── */ .l4pm { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; align-items: center !important; } .l4pm li svg, .l4pm li img { height: 24px !important; border-radius: 3px !important; opacity: .85 !important; transition: opacity .2s !important; } .l4pm li:hover svg, .l4pm li:hover img { opacity: 1 !important; } /* ── Erişilebilirlik: focus halkası ──────────────────────── */ :focus-visible { outline: 3px solid var(--clr-blue-mid) !important; outline-offset: 2px !important; border-radius: 4px !important; } /* ── Loading skeleton animasyonu ────────────────────────── */ @keyframes mk-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .mk-skeleton { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%) !important; background-size: 200% 100% !important; animation: mk-shimmer 1.4s infinite !important; border-radius: var(--radius-sm) !important; } /* ============================================================ Medkaltec — Ek Stiller: Blog, Koleksiyon, Arama ============================================================ */ /* ── Blog Makale Kartları ────────────────────────────────── */ .article-card, [class*="blog-post"], [class*="article--card"] { border-radius: var(--radius-md) !important; overflow: hidden !important; transition: var(--transition) !important; box-shadow: var(--shadow-sm) !important; } .article-card:hover, [class*="blog-post"]:hover { transform: translateY(-4px) !important; box-shadow: var(--shadow-lg) !important; } /* Blog kapak görseli */ .article-card__image-wrapper img, [class*="article__image"] img, [class*="blog-post"] img { transition: transform 0.4s ease !important; } .article-card:hover img, [class*="blog-post"]:hover img { transform: scale(1.05) !important; } /* Makale başlığı */ .article-card__title, [class*="article__title"] { font-weight: 700 !important; line-height: 1.35 !important; color: var(--clr-text) !important; } /* Blog görsel yüksekliği */ .article-card__image-wrapper, [class*="article__image-wrapper"] { aspect-ratio: 16/9 !important; overflow: hidden !important; border-radius: var(--radius-sm) !important; } /* ── Koleksiyon başlıkları ───────────────────────────────── */ .collection-card, [class*="collection-item"] { border-radius: var(--radius-md) !important; overflow: hidden !important; transition: var(--transition) !important; } .collection-card:hover { transform: translateY(-3px) !important; box-shadow: var(--shadow-md) !important; } /* ── Arama sonuçları ─────────────────────────────────────── */ .search-results .product-item { border-radius: var(--radius-md) !important; } /* ── Sayfalama / Pagination ──────────────────────────────── */ .pagination a, [class*="pagination__item"], .pagination__item { border-radius: var(--radius-sm) !important; font-family: var(--font-sans) !important; font-weight: 500 !important; transition: var(--transition) !important; } [class*="pagination__item--current"], .pagination__item.active { background: var(--clr-primary) !important; color: var(--clr-white) !important; border-color: var(--clr-primary) !important; } /* ── Hesap / Login sayfası ───────────────────────────────── */ .account-form, [class*="login-form"], [class*="register-form"] { border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-md) !important; padding: 32px !important; } /* ── Tooltip / Popup ─────────────────────────────────────── */ [class*="tooltip"], [class*="popup"] { border-radius: var(--radius-md) !important; box-shadow: var(--shadow-lg) !important; } /* ── Ürün hızlı satın al (quick buy) ────────────────────── */ [class*="quick-buy"], [class*="quickbuy"], [class*="quick_buy"] { border-radius: var(--radius-sm) !important; font-family: var(--font-sans) !important; font-weight: 600 !important; background: var(--clr-primary) !important; color: var(--clr-white) !important; transition: var(--transition) !important; } [class*="quick-buy"]:hover { background: var(--clr-cta) !important; } /* ── Loading indicator ───────────────────────────────────── */ [class*="loading"], [class*="spinner"] { color: var(--clr-primary) !important; } /* ── Stok rozetleri ──────────────────────────────────────── */ [class*="sold-out"], [class*="out-of-stock"] { background: #fee2e2 !important; color: var(--clr-cta) !important; border-radius: 4px !important; font-weight: 700 !important; padding: 2px 8px !important; } [class*="in-stock"], [class*="available"] { color: var(--clr-green) !important; font-weight: 600 !important; } /* ── Dropdown menus ──────────────────────────────────────── */ [class*="dropdown__content"], .mega-menu, [class*="megamenu"] { border-radius: var(--radius-md) !important; box-shadow: var(--shadow-lg) !important; border: 1px solid var(--clr-border) !important; } /* ── Yan sepet (drawer) ──────────────────────────────────── */ [class*="side-cart"], [class*="cart-drawer"], [class*="drawer--cart"] { border-radius: var(--radius-lg) 0 0 var(--radius-lg) !important; } /* Panel/drawer (sepet, quickshop vb.) — solid arka plan (şeffaflık bug fix) */ .m6pn, #cart { background: #ffffff !important; } /* === Kategoriye Göre Alışveriş — canlı kartlar (hover zoom + yükselme + gölge) === */ .l4cl.category > li{ transition:transform .28s cubic-bezier(.2,.7,.3,1); } .l4cl.category > li figure{ overflow:hidden !important; border-radius:14px; transition:box-shadow .28s ease; } .l4cl.category > li figure img{ transition:transform .5s cubic-bezier(.2,.7,.3,1); will-change:transform; } .l4cl.category > li:hover{ transform:translateY(-6px); } .l4cl.category > li:hover figure{ box-shadow:0 14px 36px rgba(12,74,110,.15); } .l4cl.category > li:hover figure img{ transform:scale(1.08); } .l4cl.category > li a.strong{ transition:color .2s ease; } .l4cl.category > li:hover a.strong{ color:#0369a1 !important; } .l4cl.category > li:hover .icon-chevron-right{ transform:translateX(3px); transition:transform .2s ease; } /* ── Cookie banner ───────────────────────────────────────── */ [class*="cookie"], [class*="cookie-banner"] { border-radius: var(--radius-md) var(--radius-md) 0 0 !important; font-family: var(--font-sans) !important; } /* ── Bildirim / Alert ────────────────────────────────────── */ .alert, [class*="notice"], [class*="notification"] { border-radius: var(--radius-sm) !important; font-family: var(--font-sans) !important; } /* ── Rating stars ────────────────────────────────────────── */ .r6rt, [class*="rating"], [class*="stars"] { color: #f59e0b !important; } /* ============================================================ Medkaltec — Canlı Tasarım Aksan v3 (Feastables kalitesi) ============================================================ */ /* ── Animasyon keyframes ─────────────────────────────────── */ @keyframes mk-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @keyframes mk-fade-in-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes mk-shine { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } @keyframes mk-bounce-in { 0% { transform: scale(0.85); opacity: 0; } 60% { transform: scale(1.05); } 100% { transform: scale(1); opacity: 1; } } /* ── Ürün kartları — giriş animasyonu ───────────────────── */ .product-item, [class*="product-card"] { animation: mk-fade-in-up 0.4s ease both; } /* Staggered animasyon kart grid'i için */ .product-item:nth-child(1) { animation-delay: 0.05s; } .product-item:nth-child(2) { animation-delay: 0.10s; } .product-item:nth-child(3) { animation-delay: 0.15s; } .product-item:nth-child(4) { animation-delay: 0.20s; } .product-item:nth-child(5) { animation-delay: 0.25s; } .product-item:nth-child(6) { animation-delay: 0.30s; } .product-item:nth-child(7) { animation-delay: 0.35s; } .product-item:nth-child(8) { animation-delay: 0.40s; } /* ── Sepete Ekle — parıltı efekti hover'da ───────────────── */ .product-form__submit, button[name="add"], #mk-buy-now { position: relative !important; overflow: hidden !important; } .product-form__submit::after, button[name="add"]::after { content: '' !important; position: absolute !important; top: 0 !important; left: -100% !important; width: 100% !important; height: 100% !important; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.25) 50%, transparent 70%) !important; transition: left 0.4s ease !important; } .product-form__submit:hover::after, button[name="add"]:hover::after { left: 100% !important; } /* ── ATC buton — glow animasyonu bekleme durumunda ────────── */ @keyframes mk-glow-pulse { 0%, 100% { box-shadow: 0 4px 14px rgba(220,38,38,.40); } 50% { box-shadow: 0 6px 22px rgba(220,38,38,.65), 0 0 0 4px rgba(220,38,38,.15); } } .product-form__submit, button[name="add"] { animation: mk-glow-pulse 2.5s ease-in-out infinite !important; } .product-form__submit:hover, button[name="add"]:hover { animation: none !important; } /* ── Trust bar — giriş animasyonu ───────────────────────── */ .mk-trust-bar { animation: mk-fade-in-up 0.5s ease both !important; animation-delay: 0.1s !important; } /* ── Ürün başlığı — fade in ─────────────────────────────── */ .product__title, h1[class*="product"] { animation: mk-fade-in-up 0.5s ease both !important; } /* ── Fiyat — bounce in ──────────────────────────────────── */ .price__regular, .price--large { display: inline-block !important; animation: mk-bounce-in 0.5s cubic-bezier(.68,-.55,.265,1.55) both !important; animation-delay: 0.15s !important; } /* ── WhatsApp FAB — güvenilir pulse ─────────────────────── */ .mk-whatsapp-fab { animation: mk-pulse 2.5s infinite !important; } /* ── Hero/Banner başlık rengi ────────────────────────────── */ [class*="banner__title"], [class*="hero__title"], [class*="hero__heading"], .slideshow-slide__title { text-shadow: 0 2px 8px rgba(0,0,0,.35) !important; } /* ── Koleksiyon kartları — renkli alt çizgi hover'da ────── */ .collection-card, [class*="collection-item"] { position: relative !important; } .collection-card::after, [class*="collection-item"]::after { content: '' !important; position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; height: 3px !important; background: linear-gradient(90deg, #0c4a6e, #0369a1, #dc2626) !important; transform: scaleX(0) !important; transform-origin: left !important; transition: transform 0.3s ease !important; } .collection-card:hover::after, [class*="collection-item"]:hover::after { transform: scaleX(1) !important; } /* ── Ürün kartı — renkli sol kenar hover'da ──────────────── */ .product-item { border-left: 3px solid transparent !important; transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important; } .product-item:hover { border-left-color: var(--clr-primary) !important; } /* ── Sayfa yükleme — smooth transition ──────────────────── */ body { animation: mk-fade-in-up 0.3s ease !important; } /* ── Blog kartları — hover renk geçişi ──────────────────── */ .article-card__title, [class*="article__title"] { transition: color 0.2s ease !important; } .article-card:hover .article-card__title, [class*="blog-post"]:hover [class*="article__title"] { color: var(--clr-primary) !important; } /* ── Ana sayfa koleksiyon slider — ok butonları ──────────── */ [class*="slider__btn"], [class*="swiper-button"], [class*="slick-arrow"] { background: var(--clr-white) !important; border: 2px solid var(--clr-border) !important; border-radius: 50% !important; box-shadow: var(--shadow-md) !important; color: var(--clr-primary) !important; transition: var(--transition) !important; width: 44px !important; height: 44px !important; } [class*="slider__btn"]:hover, [class*="swiper-button"]:hover { background: var(--clr-primary) !important; color: var(--clr-white) !important; border-color: var(--clr-primary) !important; transform: scale(1.1) !important; } /* ── Sale badge — canlı renk ────────────────────────────── */ [class*="label--sale"], .badge--sale { background: linear-gradient(135deg, #dc2626, #b91c1c) !important; color: #fff !important; font-weight: 800 !important; animation: mk-bounce-in 0.4s ease !important; } /* ── Yeni ürün badge ────────────────────────────────────── */ [class*="label--new"], .badge--new { background: linear-gradient(135deg, #0c4a6e, #0369a1) !important; color: #fff !important; font-weight: 800 !important; } /* ── Footer — alt çizgisi ───────────────────────────────── */ footer, .site-footer { border-top: 3px solid var(--clr-primary) !important; } /* ── Scroll-to-top butonu ───────────────────────────────── */ [class*="back-to-top"], [id*="back-to-top"] { background: var(--clr-primary) !important; border-radius: 50% !important; color: #fff !important; box-shadow: var(--shadow-md) !important; transition: var(--transition) !important; } [class*="back-to-top"]:hover, [id*="back-to-top"]:hover { background: var(--clr-cta) !important; transform: translateY(-3px) !important; } /* ── Hemen Satın Al butonu ──────────────────────────────── */ #mk-buy-now { background: var(--clr-primary) !important; position: relative !important; overflow: hidden !important; } #mk-buy-now::after { content: '' !important; position: absolute !important; top: 0 !important; left: -100% !important; width: 100% !important; height: 100% !important; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.20) 50%, transparent 70%) !important; transition: left 0.5s ease !important; } #mk-buy-now:hover { background: #0369a1 !important; } #mk-buy-now:hover::after { left: 100% !important; } /* ── Mikro-animasyon: güven rozetleri ────────────────────── */ .trust-badge-item { animation: mk-fade-in-up 0.4s ease both !important; } .trust-badge-item:nth-child(1) { animation-delay: 0.1s !important; } .trust-badge-item:nth-child(2) { animation-delay: 0.15s !important; } .trust-badge-item:nth-child(3) { animation-delay: 0.20s !important; } .trust-badge-item:nth-child(4) { animation-delay: 0.25s !important; } .trust-badge-item:nth-child(5) { animation-delay: 0.30s !important; } /* ── Yan sepet açılış animasyonu ────────────────────────── */ [class*="side-cart"][class*="open"], [class*="cart-drawer"][class*="open"] { animation: mk-fade-in-up 0.25s ease !important; } /* ============================================================ Medkaltec — Ana Sayfa Premium Stiller v4 ============================================================ */ /* ── Slideshow hero — tam genişlik, keskin ───────────────── */ .shopify-section--header ~ .shopify-section:first-of-type, .shopify-section:has(.l4sl) { margin-top: 0 !important; } /* Hero slideshow butonlar — büyük ve belirgin ───────────── */ [class*="slideshow"] .btn, [class*="slideshow"] [class*="button"], [class*="l4sl"] .btn { min-height: 48px !important; padding: 0 28px !important; font-weight: 700 !important; border-radius: 6px !important; font-size: 15px !important; letter-spacing: .3px !important; } /* Hero metin gölgesi */ [class*="slideshow"] h1, [class*="slideshow"] h2, [class*="l4sl"] h1, [class*="l4sl"] h2 { text-shadow: 0 2px 12px rgba(0,0,0,.5) !important; color: #fff !important; } [class*="slideshow"] p, [class*="l4sl"] p { text-shadow: 0 1px 6px rgba(0,0,0,.4) !important; color: rgba(255,255,255,.92) !important; font-size: 1.1rem !important; } /* ── Promo gallery kartları — hover çerçeve ─────────────── */ [class*="promo-gallery"], [class*="promo_gallery"], [class*="gallery-item"] { position: relative !important; overflow: hidden !important; border-radius: var(--radius-sm) !important; } [class*="promo-gallery"]::after, [class*="gallery-item"]::after { content: '' !important; position: absolute !important; inset: 0 !important; border: 3px solid rgba(255,255,255,0) !important; border-radius: var(--radius-sm) !important; transition: border-color .3s ease !important; pointer-events: none !important; } [class*="promo-gallery"]:hover::after, [class*="gallery-item"]:hover::after { border-color: rgba(255,255,255,.5) !important; } /* ── Bölüm başlıkları — büyük ve etkileyici ─────────────── */ .shopify-section h2 { font-size: clamp(1.4rem, 2.5vw, 2.2rem) !important; font-weight: 800 !important; letter-spacing: -.02em !important; color: var(--clr-text) !important; } /* Accent underline — başlık altı çizgisi ────────────────── */ [class*="underline-accent"] h2, [class*="underline--accent"] h2, .title_underline_style-accent h2 { background: linear-gradient(transparent 60%, rgba(12,74,110,.15) 60%) !important; display: inline !important; padding-bottom: 2px !important; } /* ── Koleksiyon slider başlık + buton ────────────────────── */ [class*="collection-list"] h2, [class*="section-collection"] h2 { margin-bottom: 4px !important; } /* ── İkon text blokları — kart tasarımı ──────────────────── */ [class*="icon-text"] [class*="block"], [class*="icon_text"] [class*="item"] { padding: 24px 16px !important; border-radius: var(--radius-md) !important; background: var(--clr-white) !important; border: 1px solid var(--clr-border) !important; transition: var(--transition) !important; text-align: center !important; } [class*="icon-text"] [class*="block"]:hover, [class*="icon_text"] [class*="item"]:hover { box-shadow: var(--shadow-md) !important; border-color: rgba(12,74,110,.2) !important; transform: translateY(-3px) !important; } /* İkon rengi */ [class*="icon-text"] svg, [class*="icon_text"] svg { color: var(--clr-primary) !important; stroke: var(--clr-primary) !important; } /* ── Blog kartları — görsel oranı ────────────────────────── */ [class*="blog-posts"] [class*="article"] img, [class*="section-blog"] img { aspect-ratio: 16/9 !important; object-fit: cover !important; border-radius: var(--radius-sm) !important; } /* Blog başlıkları */ [class*="blog-posts"] [class*="article__title"] { font-weight: 700 !important; font-size: 1rem !important; line-height: 1.4 !important; } /* ── Image+Products bölümü ───────────────────────────────── */ [class*="image-with-products"] h2 { color: #fff !important; text-shadow: 0 2px 8px rgba(0,0,0,.4) !important; } /* ── Koleksiyon kartları büyük başlık ────────────────────── */ [class*="collection-list"] [class*="card__heading"], [class*="collection-list"] [class*="title"] { font-weight: 700 !important; font-size: 0.95rem !important; } /* ── Slideshow ok butonları ──────────────────────────────── */ [class*="slideshow"] [class*="prev"], [class*="slideshow"] [class*="next"], [class*="l4sl"] [class*="prev"], [class*="l4sl"] [class*="next"] { background: rgba(255,255,255,.2) !important; backdrop-filter: blur(8px) !important; border: 1px solid rgba(255,255,255,.3) !important; border-radius: 50% !important; color: #fff !important; width: 44px !important; height: 44px !important; transition: var(--transition) !important; } [class*="slideshow"] [class*="prev"]:hover, [class*="slideshow"] [class*="next"]:hover { background: rgba(255,255,255,.35) !important; } /* ── Slideshow nokta göstergesi ──────────────────────────── */ [class*="slideshow"] [class*="dots"], [class*="l4sl"] [class*="dots"] { gap: 8px !important; } [class*="slideshow"] [class*="dot"], [class*="l4sl"] [class*="dot"] { background: rgba(255,255,255,.5) !important; border-radius: 2px !important; transition: all .3s ease !important; width: 24px !important; height: 3px !important; } [class*="slideshow"] [class*="dot"][class*="active"], [class*="slideshow"] [class*="dot"]:hover { background: #fff !important; width: 36px !important; } /* ============================================================ Medkaltec — Son Dokunuşlar: Sayaçlar, Sepet, Mobil Nav ============================================================ */ /* ── Counters section ────────────────────────────────────── */ [class*="section-counters"], [class*="l4co"] { padding: 48px 0 !important; } [class*="counter__number"], [class*="l4co__number"], [class*="counter-number"] { font-size: clamp(2rem, 4vw, 3rem) !important; font-weight: 800 !important; color: var(--clr-primary) !important; line-height: 1.1 !important; font-family: var(--font-sans) !important; } [class*="counter__text"], [class*="l4co__text"] { font-size: 14px !important; font-weight: 500 !important; color: var(--clr-text-lt) !important; margin-top: 4px !important; } /* ── Mobil kategori navigation bar ──────────────────────── */ #mk-cat-bar { scrollbar-width: none !important; } #mk-cat-bar::-webkit-scrollbar { display: none !important; } #mk-cat-bar a:hover { background: #f0f7ff !important; color: var(--clr-primary) !important; } /* ── Ücretsiz kargo progress bar ────────────────────────── */ #mk-shipping-bar { animation: mk-fade-in-up 0.4s ease !important; } /* ── Teslimat tahmini ────────────────────────────────────── */ #mk-delivery-est { animation: mk-fade-in-up 0.4s ease !important; } /* ── Announcement bar — scrolling text ──────────────────── */ .shopify-section-announcement-bar-container { overflow: hidden !important; } .shopify-section-announcement-bar-container p { white-space: nowrap !important; display: inline-block !important; animation: mk-marquee 30s linear infinite !important; } @keyframes mk-marquee { 0% { transform: translateX(30vw); } 100% { transform: translateX(-100%); } } @media (hover: hover) { .shopify-section-announcement-bar-container:hover p { animation-play-state: paused !important; } } /* ── Collection page — filtre sidebar ───────────────────── */ [class*="collection-filter"], [class*="facet-filters"] { font-family: var(--font-sans) !important; } [class*="filter__label"], [class*="facet__label"] { font-weight: 600 !important; color: var(--clr-text) !important; } /* Aktif filtre badge ────────────────────────────────────── */ [class*="filter--active"], [class*="facet--active"], [class*="active-facets"] { background: var(--clr-blue-lt) !important; color: var(--clr-primary) !important; border-color: var(--clr-blue-mid) !important; font-weight: 600 !important; } /* ── Checkout butonu — sepet sayfası ────────────────────── */ [class*="cart__footer"] [type="submit"], [name="checkout"], #checkout, .cart-checkout { background: var(--clr-cta) !important; border-color: var(--clr-cta) !important; border-radius: var(--radius-md) !important; min-height: 56px !important; font-size: 17px !important; font-weight: 800 !important; font-family: var(--font-sans) !important; letter-spacing: .3px !important; text-transform: uppercase !important; box-shadow: var(--shadow-cta) !important; transition: var(--transition) !important; } [class*="cart__footer"] [type="submit"]:hover, [name="checkout"]:hover { background: var(--clr-cta-hover) !important; transform: translateY(-2px) !important; box-shadow: 0 8px 20px rgba(220,38,38,.5) !important; } /* ── Sepet ürün satırı ───────────────────────────────────── */ [class*="cart__item"], [class*="cart-item"] { border-radius: var(--radius-sm) !important; padding: 12px !important; transition: background .2s !important; } [class*="cart__item"]:hover, [class*="cart-item"]:hover { background: var(--clr-bg) !important; } /* ── 404 Sayfası ─────────────────────────────────────────── */ .m6er { text-align: center !important; padding: 60px 24px !important; } .m6er h1 { font-size: clamp(2rem, 5vw, 3.5rem) !important; font-weight: 800 !important; } /* ── Arama sayfası ───────────────────────────────────────── */ [class*="search__results"], [class*="search-results"] { margin-top: 24px !important; } /* ── Recent products — sepet altı ───────────────────────── */ [class*="recently-viewed"], [class*="section-recently"] { padding-top: 40px !important; border-top: 1px solid var(--clr-border) !important; margin-top: 40px !important; } /* ── Sosyal paylaşım butonları ───────────────────────────── */ [class*="social-share"], [class*="share-buttons"] { gap: 8px !important; } [class*="social-share"] a, [class*="share-buttons"] a { border-radius: 50% !important; transition: var(--transition) !important; } /* ── Mobil menu drawer ───────────────────────────────────── */ [class*="mobile-menu"], [class*="drawer--menu"] { font-family: var(--font-sans) !important; } [class*="mobile-menu"] a, [class*="drawer--menu"] a { font-weight: 500 !important; color: var(--clr-text) !important; transition: color .2s !important; } [class*="mobile-menu"] a:hover, [class*="drawer--menu"] a:hover { color: var(--clr-primary) !important; } /* ── Genel sayfa padding — mobil category bar ile ─────── */ @media (max-width: 768px) { body:has(#mk-cat-bar) .shopify-section:first-child { margin-top: 0 !important; } } /* ── Footer ──────────────────────────────────────────────── */ [class*="footer__"] h4, [class*="footer__"] .h4 { font-weight: 700 !important; font-size: 14px !important; text-transform: uppercase !important; letter-spacing: .8px !important; color: var(--clr-text) !important; } [class*="footer__"] a { color: var(--clr-text-lt) !important; text-decoration: none !important; transition: color .2s !important; font-size: 14px !important; } [class*="footer__"] a:hover { color: var(--clr-primary) !important; } /* Footer alt çizgi */ [class*="footer__bottom"], [class*="site-footer__bottom"] { border-top: 1px solid var(--clr-border) !important; padding-top: 16px !important; font-size: 12px !important; color: var(--clr-text-lt) !important; } /* ── Anasayfa: daha yumuşak genel görünüm ───────────────────── */ /* Hero — daha güçlü, daha az meşgul */ .section-slideshow .slide__content h1, .section-slideshow .slide__content h2 { font-size: clamp(26px, 5vw, 52px) !important; font-weight: 800 !important; letter-spacing: -.5px !important; line-height: 1.15 !important; } .section-slideshow .slide__content p { font-size: clamp(14px, 2vw, 18px) !important; opacity: .88 !important; font-weight: 400 !important; } /* Kategori grid — kart tasarımı, hover animasyonu */ .section-collection-list .collection-item, .section-collection-list [class*="collection-item"] { border-radius: 14px !important; overflow: hidden !important; transition: transform .22s, box-shadow .22s !important; box-shadow: 0 2px 8px rgba(0,0,0,.06) !important; } .section-collection-list .collection-item:hover, .section-collection-list [class*="collection-item"]:hover { transform: translateY(-4px) !important; box-shadow: 0 8px 24px rgba(12,74,110,.14) !important; } /* Kategori başlıkları */ .section-collection-list [class*="collection-item__title"], .section-collection-list [class*="collection__title"], .section-collection-list p { font-weight: 600 !important; font-size: 14px !important; } /* Icon text bloklar — daha az sıkışık */ .section-icon-text-blocks [class*="icon-text__icon"] svg, .section-icon-text-blocks [class*="icon-text__icon"] img { opacity: .85 !important; } /* Counters — daha büyük rakamlar */ .section-counters [class*="counter__number"], .section-counters [class*="numbers__value"] { font-size: clamp(32px, 5vw, 52px) !important; font-weight: 800 !important; letter-spacing: -1px !important; } /* Blog kartları — yumuşak köşe */ .section-blog-posts [class*="blog-post"], .section-blog-posts article { border-radius: 14px !important; overflow: hidden !important; transition: box-shadow .2s, transform .2s !important; box-shadow: 0 2px 8px rgba(0,0,0,.05) !important; } .section-blog-posts [class*="blog-post"]:hover, .section-blog-posts article:hover { box-shadow: 0 6px 20px rgba(0,0,0,.10) !important; transform: translateY(-2px) !important; } /* Ürün kartları — premium look */ .product-item, [class*="product-item"], .product-card { border-radius: 12px !important; overflow: hidden !important; transition: box-shadow .22s, transform .22s !important; box-shadow: 0 1px 4px rgba(0,0,0,.06) !important; } .product-item:hover, [class*="product-item"]:hover { box-shadow: 0 6px 20px rgba(12,74,110,.12) !important; transform: translateY(-3px) !important; } /* Fiyatlar — belirgin */ .product-item__price, [class*="product-item__price"], [class*="product__price"], .price { font-size: 16px !important; font-weight: 700 !important; color: var(--clr-cta) !important; } /* Mobil — daha iyi boşluklar */ @media (max-width: 768px) { .section-collection-list [class*="collection-item"] { border-radius: 10px !important; } .section-blog-posts [class*="blog-post"], .section-blog-posts article { border-radius: 10px !important; } /* Bölüm başlıkları mobilde daha büyük */ .shopify-section h2 { font-size: clamp(20px, 5.5vw, 28px) !important; } } /* Bölüm başlıkları — tutarlı stil */ .shopify-section h2 { font-weight: 800 !important; letter-spacing: -.4px !important; color: var(--clr-text) !important; } /* Genel buton yumuşatma */ .btn, .button, [class*="btn--"], [class*="button--primary"], [class*="button--secondary"] { border-radius: 8px !important; font-weight: 600 !important; letter-spacing: .2px !important; transition: var(--transition) !important; } /* Neden Medkaltec bölümü — açık mavi arka plan */ .shopify-section:has(.section-icon-text-blocks) { background: #EFF6FF !important; } /* ── Satış odaklı iyileştirmeler ──────────────────────────── */ /* Trust bar on all pages */ .mk-trust { position: relative; z-index: 10; } /* Hero CTA butonları daha büyük ve belirgin */ .section-slideshow .btn, .section-slideshow [class*="button"], .section-slideshow a[class*="btn"] { font-size: 16px !important; font-weight: 700 !important; padding: 14px 32px !important; border-radius: 8px !important; letter-spacing: .3px !important; } /* Arama çubuğu — daha önde */ .mk-sb { background: #fff !important; border-bottom: 2px solid #E0F2FE !important; box-shadow: 0 4px 16px rgba(12,74,110,.06) !important; } /* Sayaç bölümü — daha kompakt */ .section-counters { padding-top: 32px !important; padding-bottom: 32px !important; } /* Kategori grid — mobilde 2 sütun düzgün */ @media (max-width: 640px) { .section-collection-list [class*="l4cl"] { grid-template-columns: repeat(2, 1fr) !important; } } /* Ürün başlıkları — okunabilir */ .product-item__title, [class*="product-item__title"] { font-size: 14px !important; font-weight: 600 !important; line-height: 1.35 !important; color: #111827 !important; } /* "Sepete Ekle" — tam genişlik mobilde */ @media (max-width: 640px) { .product-form__submit, button[name="add"] { width: 100% !important; font-size: 17px !important; min-height: 52px !important; } } /* Testimonials bölümü — daha hafif */ .section-testimonials [class*="testimonial"], .section-testimonials [class*="review"] { border: 1px solid #F3F4F6 !important; box-shadow: none !important; } /* Blog — minimal */ .section-blog-posts [class*="blog-post__title"], .section-blog-posts h4 { font-size: 15px !important; font-weight: 700 !important; } /* Footer — daha temiz */ footer, [class*="site-footer"] { border-top: 2px solid #E5E7EB !important; } /* Scroll to top button — belirgin */ [class*="scrolltotop"], #scrolltotop { background: #0C4A6E !important; border-radius: 8px !important; } /* Mobil nav — daha iyi spacing */ @media (max-width: 768px) { [class*="mobile-nav"], [class*="drawer--menu"] { font-size: 15px !important; } } /* ═══ PREMIUM HOMEPAGE UPGRADE ════════════════════════════ */ /* Sayaç (Counters) — premium kart görünümü */ .section-counters .counter-item { border: 1px solid rgba(12,74,110,.10) !important; border-radius: 12px !important; padding: 24px 32px !important; background: rgba(12,74,110,.03) !important; transition: transform .2s ease, box-shadow .2s ease !important; } .section-counters .counter-item:hover { transform: translateY(-3px) !important; box-shadow: 0 8px 24px rgba(12,74,110,.12) !important; } .section-counters .counter-number { font-family: 'Inter', sans-serif !important; font-weight: 800 !important; letter-spacing: -.02em !important; } /* Hero — alt metin daha okunabilir */ .section-slideshow .slide__text p { font-size: 17px !important; line-height: 1.65 !important; max-width: 520px !important; margin: 0 auto !important; } /* Kategoriler — hover efekti */ .collection-card { transition: transform .2s ease, box-shadow .2s ease !important; } .collection-card:hover { transform: translateY(-4px) !important; box-shadow: 0 12px 32px rgba(0,0,0,.12) !important; } /* Yorumlar (Testimonials) — premium kart */ .testimonial-item, .testimonial__item { border: 1px solid rgba(12,74,110,.08) !important; border-radius: 12px !important; transition: box-shadow .2s ease !important; } .testimonial-item:hover, .testimonial__item:hover { box-shadow: 0 6px 20px rgba(12,74,110,.10) !important; } /* Trust bar — SVG stroke rengi uyumu */ .mkt-bar__item svg { stroke: #60a5fa; } /* ═══════════════════════════════════════════════════════ */ /* ═══ HOMEPAGE FULL REDESIGN CSS ═══════════════════════════ */ /* Global section headings */ .section-collection-list h2, .section-image-with-products h2, .section-counters h2, .section-testimonials h2, .section-blog-posts h2 { font-family: 'Inter', sans-serif !important; font-weight: 800 !important; letter-spacing: -.025em !important; } /* Search bar — premium upgrade */ .mk-search-bar { background: linear-gradient(180deg,#f8faff 0%,#fff 100%) !important; border-bottom: 1px solid #e2e8f0 !important; } /* Category grid — card hover + image zoom */ .section-collection-list .collection-item, .section-collection-list .collection-card { border-radius: 14px !important; overflow: hidden !important; transition: transform .25s ease, box-shadow .25s ease !important; border: 1.5px solid #e8f0fe !important; } .section-collection-list .collection-item:hover, .section-collection-list .collection-card:hover { transform: translateY(-5px) !important; box-shadow: 0 14px 40px rgba(12,74,110,.1) !important; border-color: #bfdbfe !important; } .section-collection-list .collection-item img, .section-collection-list .collection-card img { transition: transform .4s ease !important; } .section-collection-list .collection-item:hover img, .section-collection-list .collection-card:hover img { transform: scale(1.06) !important; } /* Counters — card style */ .section-counters .counter-item, .section-counters .numbers__item { border: 1.5px solid rgba(12,74,110,.1) !important; border-radius: 14px !important; padding: 28px 24px !important; background: #fff !important; transition: transform .2s, box-shadow .2s !important; } .section-counters .counter-item:hover, .section-counters .numbers__item:hover { transform: translateY(-3px) !important; box-shadow: 0 8px 28px rgba(12,74,110,.1) !important; } .section-counters .counter-number, .section-counters .numbers__number { font-weight: 800 !important; letter-spacing: -.02em !important; } /* Testimonials — premium cards */ .section-testimonials .testimonial-item, .section-testimonials .testimonials__item, [class*="testimonial"] > * { border: 1.5px solid #e2e8f0 !important; border-radius: 16px !important; transition: box-shadow .2s, transform .2s !important; } .section-testimonials .testimonial-item:hover, .section-testimonials .testimonials__item:hover { box-shadow: 0 8px 28px rgba(0,0,0,.07) !important; transform: translateY(-3px) !important; } /* Blog cards */ .section-blog-posts .blog-post, .section-blog-posts article { border-radius: 14px !important; overflow: hidden !important; border: 1.5px solid #e8f0fe !important; transition: box-shadow .2s, transform .2s !important; } .section-blog-posts .blog-post:hover, .section-blog-posts article:hover { box-shadow: 0 10px 32px rgba(12,74,110,.08) !important; transform: translateY(-4px) !important; } /* Quick buy button */ .quick-buy-btn, [class*="quick-buy"] button { background: var(--clr-primary) !important; /* mavi #2563eb yerine palette laciverti */ border-color: var(--clr-primary) !important; } /* ═══════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════ Medkaltec — v5 · SAKİN LÜKS (Apple-Calm) KATMANI Hedef: Apple sadeliği + medikal güven. Dosyanın sonunda olduğu için önceki "yoğun" kuralları kaynak-sırası ile sakinleştirir. Renkleri GLOBAL zorlamaz → koyu section'larda kontrast bozulmaz. ════════════════════════════════════════════════════════════ */ /* ── 1) Yoğun animasyonları durdur (dinginlik) ─────────────── */ body, .product-item, [class*="product-card"], .product-form__submit, button[name="add"], #mk-buy-now, .mk-trust-bar, .product__title, h1[class*="product"], .price__regular, .price--large, .trust-badge-item, [class*="label--sale"], .badge--sale, [class*="label--new"], .badge--new, .mk-whatsapp-fab { animation: none !important; } /* Kayan (marquee) duyuru metnini durdur — sabit, ortalı */ .shopify-section-announcement-bar-container p { animation: none !important; white-space: normal !important; display: block !important; transform: none !important; text-align: center !important; } /* CTA parıltı (shine sweep) efektini kapat */ .product-form__submit::after, button[name="add"]::after, #mk-buy-now::after { display: none !important; } /* ── 2) Sakin lüks renk/yüzey token'ları ──────────────────── */ :root { --clr-bg: #FAFAFA; /* kırık beyaz zemin */ --clr-bg-soft: #F4F6F8; /* hafif gri bölüm zemini */ --clr-border: #ECEFF3; /* çok yumuşak kenar */ --clr-teal: #0F766E; /* opsiyonel medikal teal accent */ --shadow-sm: 0 1px 2px rgba(16,24,40,.04) !important; --shadow-md: 0 6px 20px rgba(16,24,40,.07) !important; --shadow-lg: 0 14px 40px rgba(16,24,40,.10) !important; } body { background: var(--clr-bg) !important; font-weight: 400 !important; } /* ── 3) Tipografi — ince & dingin (SADECE ağırlık/boşluk) ──── */ h1, .h1 { font-weight: 600 !important; letter-spacing: -.02em !important; line-height: 1.15 !important; } h2, .h2, .shopify-section h2 { font-weight: 600 !important; letter-spacing: -.02em !important; line-height: 1.2 !important; } h3, .h3 { font-weight: 600 !important; letter-spacing: -.01em !important; } h4, h5, h6 { font-weight: 600 !important; letter-spacing: 0 !important; } p, li, .rte { line-height: 1.7 !important; } .product-item__title, [class*="product-item__title"], [class*="card__heading"] { font-weight: 500 !important; letter-spacing: 0 !important; } /* ── 4) Yüzeyler — yumuşak, düşük kontrast ────────────────── */ .product-item, [class*="product-card"], .collection-card, .section-blog-posts article, .section-blog-posts .blog-post, .testimonial-item, .testimonials__item { border: 1px solid var(--clr-border) !important; border-radius: 14px !important; box-shadow: 0 1px 2px rgba(16,24,40,.04) !important; } .product-item { border-left: 1px solid var(--clr-border) !important; } /* renkli sol kenarı sakinleştir */ .product-item:hover { transform: translateY(-2px) !important; box-shadow: 0 10px 30px rgba(16,24,40,.08) !important; border-color: #DDE3EA !important; border-left-color: #DDE3EA !important; } /* ── 5) CTA — net ama parıltısız, doğal ───────────────────── */ .product-form__submit, button[name="add"], form[action="/cart/add"] button[type="submit"] { border-radius: 12px !important; font-weight: 600 !important; letter-spacing: .2px !important; text-transform: none !important; /* CAPS yerine doğal yazım */ box-shadow: 0 1px 2px rgba(220,38,38,.18) !important; } .product-form__submit:hover, button[name="add"]:hover { transform: translateY(-1px) !important; box-shadow: 0 6px 16px rgba(220,38,38,.24) !important; } [name="checkout"], [class*="cart__checkout"], .cart-checkout { text-transform: none !important; border-radius: 12px !important; font-weight: 600 !important; box-shadow: 0 1px 2px rgba(220,38,38,.18) !important; } /* ── 6) Fiyat — sakin, normal ağırlık ─────────────────────── */ .price__regular, .price--large, .product__price { font-weight: 600 !important; letter-spacing: -.01em !important; } /* ── 7) Genel butonlar — yumuşak & doğal ──────────────────── */ .btn, .button, [class*="btn--"], [class*="button--"] { text-transform: none !important; letter-spacing: .1px !important; font-weight: 600 !important; border-radius: 12px !important; } /* ── 8) Bölüm accent çizgisi — ince teal vurgu ────────────── */ [class*="underline-accent"] h2, [class*="underline--accent"] h2, .title_underline_style-accent h2 { background: linear-gradient(transparent 62%, rgba(15,118,110,.16) 62%) !important; } /* ── 9) Trust bar — biraz daha hafif ──────────────────────── */ .mkt-bar { padding: 9px 0 !important; } .mkt-bar__item { font-weight: 600 !important; letter-spacing: .05em !important; } /* ── 10) WhatsApp FAB — pulse yerine sade gölge ───────────── */ .mk-whatsapp-fab { box-shadow: 0 6px 20px rgba(37,211,102,.32) !important; } /* ── 11) "Neden Medkaltec" zemini — kırık beyaz ───────────── */ .shopify-section:has(.section-icon-text-blocks) { background: var(--clr-bg-soft) !important; } /* ════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════ AŞAMA 1 — HEADER (sade, güven veren, mobil dokunma dostu) Not: header.liquid çekirdeği ellenmedi; sadece overlay rafine. ════════════════════════════════════════════════════════════ */ /* Arama kutusu — daha davetkâr & satış odaklı */ #header #search input[type="search"] { border-radius: 10px !important; border: 1.5px solid #E5E9F0 !important; background: #F8FAFB !important; transition: border-color .18s, box-shadow .18s, background .18s !important; } #header #search input[type="search"]:focus { border-color: #0369A1 !important; background: #fff !important; box-shadow: 0 0 0 3px rgba(3,105,161,.12) !important; } /* Sepet linki — net ve okunur */ #nav-user li.cart > a { font-weight: 600 !important; } /* Mobil: dokunma hedefleri ≥44px (sepet, arama, hesap, katalog) */ @media (max-width: 760px) { #nav-user > ul > li > a, #header .search-compact, #header .link-btn > a { min-height: 44px !important; display: inline-flex !important; align-items: center !important; } } /* Sticky header — SOLID zemin (scroll'da içerik sızmasını engeller) */ #header-outer, #header, #header-inner { background: #ffffff !important; } #header-inner.sticky-nav { box-shadow: 0 2px 14px rgba(16,24,40,.10) !important; } /* Menü çubuğu da sticky'de solid kalsın */ #nav-bar.sticky-menu, #nav-outer { background: #ffffff !important; } /* Footer "Abone ol" butonu → lacivert (geniş selektör) */ .shopify-section-group-footer-group form button, .shopify-section-group-footer-group form input[type="submit"], .shopify-section-group-footer-group .submit button, .shopify-section-group-footer-group button[type="submit"] { background: #0C4A6E !important; border-color: #0C4A6E !important; color: #fff !important; } /* Footer politika linkleri — TEK temiz satır (Liquid mk-footer-policies) */ .mk-footer-policies { display: flex !important; flex-wrap: wrap !important; align-items: baseline !important; gap: 8px 24px !important; width: 100% !important; padding-top: 18px !important; margin-top: 8px !important; border-top: 1px solid #E5E7EB !important; } .mk-footer-policies .mk-foot-policy-link { font-size: 12.5px !important; font-weight: 500 !important; color: #6B7280 !important; text-decoration: none !important; white-space: nowrap !important; } .mk-footer-policies .mk-foot-policy-link:hover { color: #0C4A6E !important; } .mk-footer-policies .mk-foot-col { width: auto !important; } /* ════════════════════════════════════════════════════════════ MOBİL ANA SAYFA İYİLEŞTİRMELERİ (18 Haz 2026) - Header: "Kataloğu görüntüle" + büyüteç çakışması düzeltmesi - Duyuru çubuğu: mobilde kompakt - Arama overlay: "kategori bombası" grid stilleri - Mobil akıcılık: sürekli dönen animasyonları mobilde kapat ════════════════════════════════════════════════════════════ */ /* ── 1) Header çakışması — mobilde fazlalık büyüteç ikonunu gizle ── Mobilde header'ın hemen altında zaten tam genişlikte arama çubuğu görünüyor (mobile-visible-search). "Kataloğu görüntüle" yazısının üzerine binen küçük büyüteç ikonu gereksiz → mobilde kaldırıyoruz. */ @media (max-width: 47.5em) { #header-inner .link-btn .search-compact { display: none !important; } /* "Kataloğu görüntüle" uzun yazısı mobilde kırık/iç içe görünüyordu. Yerine TEMİZ bir hamburger menü ikonu koyuyoruz — yazı yok, taşma yok, dokununca yine menü açılır (aria-controls="nav"). */ #header-inner .link-btn > a:first-child { font-size: 0 !important; width: 30px !important; height: 30px !important; min-width: 30px !important; max-width: 30px !important; padding: 0 !important; overflow: hidden !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%230C1A2E' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M3 6h18M3 12h18M3 18h18'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 24px 24px !important; } #header-inner .link-btn > a:first-child > i, #header-inner .link-btn > a:first-child .icon-chevron-down { display: none !important; } } /* ── 2) Duyuru çubuğu — mobilde kompakt ────────────────────────── "Türkiye'nin Medikal Ekipman Uzmanı..." satırı mobilde çok yer kaplıyordu. Yazıyı küçültüp boşlukları daraltıyoruz. */ @media (max-width: 47.5em) { .shopify-section-announcement-bar, .shopify-section-announcement-bar p { font-size: 11px !important; line-height: 1.4 !important; letter-spacing: 0 !important; } .shopify-section-announcement-bar { --ann_p: 7px !important; } .shopify-section-announcement-bar > p { padding-bottom: 7px !important; } .shopify-section-announcement-bar > p:first-child { padding-top: 7px !important; } .shopify-section-announcement-bar strong { font-weight: 700 !important; } } /* ── 3) Arama overlay — "Kategori Bombası" grid ────────────────── header.liquid içindeki #livesearch placeholder'ında render edilir. */ .mk-srch-cats { margin: 2px 0 4px; } .mk-srch-cats__h { font-size: 13px; font-weight: 700; color: #0C1A2E; margin: 0 0 12px; letter-spacing: -.2px; } .mk-srch-cats__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .mk-srch-cat { display: flex; align-items: center; gap: 9px; padding: 11px 13px; border: 1px solid #E6EDF3; border-radius: 11px; background: #fff; color: #0f2742 !important; font-size: 13.5px; font-weight: 600; line-height: 1.2; text-decoration: none !important; transition: all .16s ease; } .mk-srch-cat::before { content: ''; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, #0891b2, #0C4A6E); box-shadow: 0 0 0 3px rgba(8,145,178,.12); } .mk-srch-cat:hover { border-color: #0C4A6E; background: #F2F8FC; transform: translateY(-1px); box-shadow: 0 6px 16px -8px rgba(12,74,110,.45); } .mk-srch-cat span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (min-width: 47.5em) { .mk-srch-cats__grid { grid-template-columns: repeat(3, 1fr); gap: 9px; } } /* ── 4) Mobil akıcılık — sürekli dönen animasyonları kapat ──────── Hero'daki sonsuz arka plan/parçacık/parıltı animasyonları mobilde sürekli yeniden çizim yapıp takılmaya (jank) ve pil tüketimine yol açıyordu. Mobilde durağan hale getiriyoruz; görsel aynı kalır. */ @media (max-width: 47.5em) { .mkh { animation: none !important; background-position: 0% 50% !important; } .mkh__pcl { display: none !important; } .mkh__land, .mkh__route, .mkh__city, .mkh__ring, .mkh__dot, .mkh__shield-ic, .mkh__hub { animation: none !important; } } /* ── Perf: BOYA-AĞIR (background-position / box-shadow / blur) sürekli animasyonları mobilde durdur. Ana iş parçacığı paint yükünü + pil tüketimini azaltır; görsel statik kalır, layout bozulmaz. */ @media (max-width: 768px) { .mkt-bar, .mkt-bar::after, /* güven barı: gradient kaydırma + sheen */ .mksb__one::after, /* kargo banner sheen */ .mksb__aura, /* blur'lu aura hareketi (pahalı) */ .mkusp__icon::after, /* usp ikon halka pulse */ .mk-pulse, .mpp__pulse { animation: none !important; } } /* ── Perf (25 Haz 2026): KALAN sürekli animasyonlar da mobilde dursun. İlk 4 bölümde (hero/kargo/usp/showroom) onlarca küçük transform/opacity animasyonu sürekli kompozitörü uyandırıp ana iş parçacığının boşa çıkmasını engelliyordu (TBT/jank). Hız acil durumu + 0 satış → tamamen durağan; ikonlar/parçacıklar statik kalır, görsel kayıp yok. */ @media (max-width: 768px) { /* kargo banner: yüzen parçacıklar (ekstra kompozit katman) tamamen kaldır */ .mksb__p { display: none !important; } .mksb__one::before, /* blob radial hareketi */ .mksb__cic::after, /* ikon halka pulse */ .mksb__cic--truck svg, /* kamyon sallanma */ .mksb__cic--star svg, /* yıldız dönme */ /* usp ikon mikro-animasyonları */ .mkusp__icon--truck svg, .mkusp__icon--check svg, .mkusp__icon--shield svg, .mkusp__icon--phone svg, /* showroom "açık" nokta pulse */ .mshow__tag i { animation: none !important; } } /* Erişilebilirlik: hareketi azalt tercihi olan kullanıcılarda kapat */ @media (prefers-reduced-motion: reduce) { .mkh, .mkh__pcl, .mkh__land, .mkh__route, .mkh__city, .mkh__ring, .mkh__dot, .mkh__shield-ic, .mkh__hub, .mkcat__card { animation: none !important; transition: none !important; } .mkcat__card { opacity: 1 !important; transform: none !important; } } /* ════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════ ÜRÜN SAYFASI + YAPIŞKAN HEADER DÜZELTMELERİ (22 Haz 2026) - Yapışkan header/arama mobilde opak (içerik arkadan sızmasın) - Premium yapışkan satın-alma çubuğu en üstte + opak (Forms "Kaçırmayın!" teaser'ı ve chat butonu CTA'yı örtmesin) ════════════════════════════════════════════════════════════ */ /* ── 1) Yapışkan header + mobil arama çubuğu OPAK ──────────────── Aşağı kaydırınca arama çubuğu (no-bg = şeffaf) arkasından ürün içeriği görünüyor, "iç içe / örtüyor" gibi duruyordu. Mobilde tüm header bölgesini ve arama çubuğunu beyaz/opak yapıyoruz. */ @media (max-width: 47.5em) { .shopify-section-header, #header-outer, #header, #header-inner { background: #fff !important; } #header-inner #search, #header-inner #search.no-bg, #header-inner #search.blur { background: #fff !important; backdrop-filter: none !important; } } /* ── 2) Premium yapışkan satın-alma çubuğu (#mppBar) ───────────── Çubuk yukarıdayken sayfanın en üst katmanında dursun; böylece sol-alttaki Forms "Kaçırmayın!" teaser'ı ve sağ-alttaki sohbet balonları "Sepete Ekle" butonunu ÖRTMESİN. Şeffaflığı kaldırıp tam opak yapıyoruz ki arkadaki app öğeleri görünmesin. */ .mpp__bar.is-on { z-index: 2147483646 !important; } @media (max-width: 768px) { .mpp__bar { background: #fff !important; backdrop-filter: none !important; } /* Sağ-alttaki Shopify Inbox sohbet balonu "Sepete Ekle" butonunun sağ ucunu örtüyordu. Butonu sola çekip balonun oturduğu alanı boş bırakıyoruz → buton artık balonun altında kalmıyor. */ .mpp__bar__in { padding-right: 72px !important; } .mpp__bar__btn { padding-left: 20px !important; padding-right: 20px !important; } } /* ════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════ ANİMASYONLU AURORA ARKA PLAN (24 Haz 2026) Masaüstünde içerik ortada; iki yandaki boş beyaz kenarları havalı, hareketli, 3D-derinlikli aurora ile dolduruyoruz. Sabit (kaydırınca yerinde durur), GPU-dostu (yalnız transform), alta doğru beyaza yaklaşır → beyaz bölümlerle kaynaşır. İçeriğin ARKASINDA (z-index:-1) → opak bölümler örter, sadece boş kenarlar görünür (okunabilirlik OK). Mobilde + reduced-motion'da animasyon kapalı → performans korunur. */ ÖNEMLİ: gradient YALNIZ html'e; body şeffaf — yoksa body arka planı, z-index:-1 canvas'ı üstten örter (negatif-z, body bg'den önce boyanır) ve animasyon hiç görünmez. mk-webgl-bg canvas'ı bu html zemininin üstüne sürüklenen ışıltılı parçacıkları çizer. */ /* KLİNİK AÇIK ZEMİN (2026-07-09): koyu aurora kaldırıldı — sade, ferah, tek dil. */ html { background: #f7f9fb !important; } /* body + tema sarmalayıcıları ŞEFFAF → canvas + html zemini boş kenarlarda görünür */ body, #root, #PageContainer, #MainContent, main, .main-content { background: transparent !important; } /* ════════════════════════════════════════════════════════════ */ /* ─── 2026-08-16: ekran dışı bölüm render erteleme — hiçbir bölüm kapatılmadı ─── AI sohbet (.mkc) hariç: position:fixed öğe içeriyor, containment bozabilir. */ .mkdd,.mkpr,.mkusp,.mshow,.myt,.mkvs,.mkbr,.mkco,.mkgr,.mkbl{ content-visibility:auto; contain-intrinsic-size:auto 640px; }