/* SiberTema - Modern/Profesyonel Overlay (Önyüz) ------------------------------------------------ Author: Sibermimar (Güray Avcı) Amaç: - Klasik temanın tüm sayfalarını bozmadan, admin paneline daha uyumlu, modern ve profesyonel bir görünüm vermek. - Sadece CSS ile (yüksek performans / düşük risk) iyileştirme. Not: - Bu dosya yalnızca olduğunda etkili olur. - Renkler mümkün olduğunca temalar tablosundaki ana renk (t37) ile uyumludur. */ /* Temel renk/typography */ body.sibertema{ --sm-surface: #ffffff; --sm-surface-2: #f8fafc; --sm-border: rgba(148,163,184,0.28); --sm-text: #0f172a; --sm-text-muted: rgba(15,23,42,0.68); /* Admin panel hissiyatına uyumlu koyu header */ --sm-header-bg: #0b1220; --sm-header-bg-2: #0f1b34; --sm-header-text: rgba(255,255,255,0.92); --sm-header-muted: rgba(255,255,255,0.70); /* Varsa temaheader içinden gelen --sm-primary kullanılır */ background: radial-gradient(1200px 600px at 10% -10%, rgba(99,102,241,0.10), transparent 60%), radial-gradient(900px 500px at 90% 0%, rgba(14,165,233,0.10), transparent 55%), #ffffff; color: var(--sm-text); } body.sibertema a{ color: var(--sm-primary, #0ea5e9); } body.sibertema a:hover{ opacity:.92; } /* Genel yüzeyler */ body.sibertema .card, body.sibertema .card-box, body.sibertema .panel, body.sibertema .box, body.sibertema .product-item, body.sibertema .collection-product-card, body.sibertema .product-card, body.sibertema .product-grid-item{ border-radius: var(--sm-radius, 16px) !important; box-shadow: var(--sm-shadow, 0 10px 30px rgba(2,6,23,0.10)) !important; border: 1px solid rgba(148,163,184,0.18) !important; background: var(--sm-surface) !important; } body.sibertema .section, body.sibertema .container, body.sibertema .page-container{ max-width: 1320px; } /* Header / Menü */ body.sibertema .header, body.sibertema .main-header, body.sibertema .navigation, body.sibertema .top-bar, body.sibertema .header-top, body.sibertema .header-middle, body.sibertema .header-bottom{ background-color: var(--sm-header-bg) !important; color: var(--sm-header-text) !important; } body.sibertema .top-bar a, body.sibertema .header a, body.sibertema .main-header a, body.sibertema .navigation a{ color: var(--sm-header-text) !important; } body.sibertema .top-bar a:hover, body.sibertema .header a:hover, body.sibertema .navigation a:hover{ color: #ffffff !important; } /* Header alt çizgi */ body.sibertema .header, body.sibertema .main-header{ box-shadow: 0 10px 24px rgba(2,6,23,0.22) !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; } /* Menü dropdown yüzeyi */ body.sibertema .dropdown-menu, body.sibertema .submenu, body.sibertema .mega-menu{ border-radius: calc(var(--sm-radius, 16px) - 4px) !important; border: 1px solid var(--sm-border) !important; box-shadow: 0 18px 40px rgba(2,6,23,0.18) !important; } /* Arama inputları */ body.sibertema input[type="text"], body.sibertema input[type="search"], body.sibertema input[type="email"], body.sibertema input[type="password"], body.sibertema input[type="tel"], body.sibertema input[type="number"], body.sibertema select, body.sibertema textarea{ border-radius: calc(var(--sm-radius, 16px) - 6px) !important; border: 1px solid rgba(148,163,184,0.28) !important; background: rgba(255,255,255,0.96) !important; box-shadow: none !important; } body.sibertema input:focus, body.sibertema select:focus, body.sibertema textarea:focus{ outline: none !important; border-color: rgba(99,102,241,0.55) !important; box-shadow: 0 0 0 4px rgba(99,102,241,0.18) !important; } /* Butonlar */ body.sibertema .btn, body.sibertema button, body.sibertema input[type="submit"], body.sibertema .button, body.sibertema .shopify-payment-button__button{ border-radius: calc(var(--sm-radius, 16px) - 6px) !important; } body.sibertema .btn-primary, body.sibertema .button-primary, body.sibertema .btn-success{ background: var(--sm-primary, #0ea5e9) !important; border-color: var(--sm-primary, #0ea5e9) !important; color:#fff !important; } body.sibertema .btn-primary:hover, body.sibertema .button-primary:hover, body.sibertema .btn-success:hover{ filter: brightness(0.95); } body.sibertema .btn-outline, body.sibertema .btn-secondary{ background: transparent !important; border: 1px solid rgba(148,163,184,0.40) !important; } /* Başlıklar */ body.sibertema h1, body.sibertema h2, body.sibertema h3, body.sibertema h4, body.sibertema h5, body.sibertema h6{ color: var(--sm-text) !important; letter-spacing: -0.2px; } /* Breadcrumb / sayfa üst bilgi */ body.sibertema .breadcrumb, body.sibertema .breadcrumbs, body.sibertema .page-title, body.sibertema .page-header{ border-radius: var(--sm-radius, 16px) !important; } /* Listeleme / tablo */ body.sibertema table{ border-radius: var(--sm-radius, 16px); overflow: hidden; } body.sibertema table th{ background: rgba(2,6,23,0.04); } /* Bildirimler */ body.sibertema .alert, body.sibertema .notice, body.sibertema .woocommerce-info, body.sibertema .woocommerce-message{ border-radius: var(--sm-radius, 16px) !important; border: 1px solid rgba(148,163,184,0.22) !important; } /* Footer */ body.sibertema footer, body.sibertema .footer, body.sibertema .footer-area{ border-top: 1px solid rgba(148,163,184,0.18); } /* Mobil iyileştirmeler */ @media (max-width: 768px){ body.sibertema .container, body.sibertema .page-container{ padding-left: 12px; padding-right: 12px; } body.sibertema .card, body.sibertema .card-box, body.sibertema .product-item{ border-radius: 14px !important; } } /* ========================================================== SiberTema Premium UI Pack (v0.1.55) Odak: Ürün kartı + kategori filtre + sepet/ödeme + mobil menü Not: Sadece CSS/ufak JS ile, sunucuyu yormadan (performans dostu). ========================================================== */ body.sibertema{ --sm-soft: rgba(2,6,23,0.04); --sm-soft-2: rgba(2,6,23,0.06); --sm-danger: #ef4444; --sm-success: #16a34a; --sm-warning: #f59e0b; } /* 1) Ürün kartları (liste/grid) */ body.sibertema .laber-product-item-default .product-collection{ overflow: hidden; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } body.sibertema .laber-product-item-default .product-collection:hover{ transform: translateY(-4px); box-shadow: 0 24px 60px rgba(2,6,23,0.16) !important; border-color: rgba(99,102,241,0.22) !important; } body.sibertema .laber-product-item-default .product-collection__image{ background: linear-gradient(180deg, rgba(2,6,23,0.02), rgba(2,6,23,0.00)); } body.sibertema .laber-product-item-default .product-collection__image .card__media, body.sibertema .laber-product-item-default .product-collection__image .media{ background: #fff !important; } body.sibertema .laber-product-item-default .product-collection__image img{ object-fit: contain !important; background: #fff !important; } /* Etiketler (Sale/New) */ body.sibertema .laber-product-item-default .label{ border-radius: 999px !important; padding: 6px 10px !important; font-weight: 800 !important; font-size: 12px !important; letter-spacing: -0.1px; box-shadow: 0 10px 24px rgba(2,6,23,0.12) !important; } body.sibertema .laber-product-item-default .label--sale{ background: var(--sm-danger) !important; color:#fff !important; } body.sibertema .laber-product-item-default .label--new{ background: #22c55e !important; color:#fff !important; } /* Hover aksiyonları (favori/karşılaştır/hızlı gözat) */ body.sibertema .laber-product-item-default .product-image__overlay-bottom{ pointer-events:none; } body.sibertema .laber-product-item-default .product-image__overlay-bottom .group-button{ opacity: 0; transform: translateY(10px); transition: opacity .18s ease, transform .18s ease; pointer-events:none; } body.sibertema .laber-product-item-default .product-collection:hover .product-image__overlay-bottom .group-button{ opacity: 1; transform: translateY(0); pointer-events:auto; } body.sibertema .laber-product-item-default .group-button .inner{ display: grid; gap: 8px; } body.sibertema .laber-product-item-default .group-button .inner a{ display:flex; align-items:center; gap: 10px; background: rgba(255,255,255,0.94) !important; border: 1px solid rgba(148,163,184,0.26) !important; color: #0f172a !important; border-radius: 999px !important; padding: 10px 12px !important; box-shadow: 0 12px 30px rgba(2,6,23,0.12) !important; } body.sibertema .laber-product-item-default .group-button .inner a:hover{ background: #fff !important; border-color: rgba(99,102,241,0.35) !important; transform: translateY(-1px); } body.sibertema .laber-product-item-default .group-button .inner a i{ font-size: 16px; color: var(--sm-primary, #0ea5e9); } body.sibertema .laber-product-item-default .group-button .inner a .text{ font-size: 12px; font-weight: 800; letter-spacing: -0.1px; } /* İçerik düzeni */ body.sibertema .laber-product-item-default .product-collection__content{ padding: 14px 14px 16px !important; } body.sibertema .laber-product-item-default .product-collection__title h2{ font-size: 14px !important; font-weight: 800 !important; line-height: 1.25 !important; margin: 0 0 8px 0 !important; } body.sibertema .laber-product-item-default .product-collection__title a{ color: var(--sm-text) !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } body.sibertema .laber-product-item-default .product-collection__reviews .spr-badge{ color: var(--sm-warning) !important; font-size: 12px; letter-spacing: 1px; } body.sibertema .laber-product-item-default .product-collection__reviews .spr-badge-caption{ color: var(--sm-text-muted) !important; font-size: 12px; font-weight: 600; } body.sibertema .laber-product-item-default .product-collection__price .price{ font-size: 16px !important; font-weight: 900 !important; color: var(--sm-text) !important; } body.sibertema .laber-product-item-default .product-collection__availability p{ margin: 10px 0 0 0 !important; font-size: 12px !important; font-weight: 900; display:flex; align-items:center; gap:6px; } body.sibertema .laber-product-item-default .product-collection__availability .in_stock{ color: var(--sm-success) !important; } body.sibertema .laber-product-item-default .product-collection__availability .out_stock{ color: var(--sm-danger) !important; } body.sibertema .laber-product-item-default .button-cart-bottom a.add-to-cart{ margin-top: 12px !important; width: 100% !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:10px; background: var(--sm-primary, #0ea5e9) !important; border: 1px solid rgba(255,255,255,0.0) !important; color: #fff !important; padding: 12px 14px !important; border-radius: calc(var(--sm-radius,16px) - 6px) !important; font-weight: 900 !important; letter-spacing: 0.2px; box-shadow: 0 14px 30px rgba(14,165,233,0.28) !important; } body.sibertema .laber-product-item-default .button-cart-bottom a.add-to-cart:hover{ filter: brightness(0.95); box-shadow: 0 18px 40px rgba(14,165,233,0.32) !important; } /* 2) Kategori filtre bloğu (facets) */ body.sibertema #main-collection-filters.facets-wrapper{ background: var(--sm-surface) !important; border: 1px solid rgba(148,163,184,0.20) !important; border-radius: var(--sm-radius,16px) !important; box-shadow: var(--sm-shadow-sm, 0 10px 24px rgba(2,6,23,0.10)) !important; padding: 12px !important; } @media (min-width: 992px){ body.sibertema #main-collection-filters.facets-wrapper{ position: sticky; top: 120px; } } body.sibertema .facets__disclosure-vertical{ margin-bottom: 12px; } body.sibertema .facets__summary{ background: rgba(248,250,252,0.92) !important; border: 1px solid rgba(148,163,184,0.18) !important; border-radius: calc(var(--sm-radius,16px) - 6px) !important; padding: 12px 14px !important; } body.sibertema details.facets__disclosure-vertical[open] > summary{ border-bottom-left-radius: 10px !important; border-bottom-right-radius: 10px !important; } body.sibertema .facets__display-vertical{ background: #fff !important; border: 1px solid rgba(148,163,184,0.18) !important; border-top: none !important; border-radius: calc(var(--sm-radius,16px) - 6px) !important; padding: 12px !important; } body.sibertema #main-collection-filters input[type="text"], body.sibertema #main-collection-filters input[type="search"], body.sibertema #main-collection-filters select{ width: 100% !important; height: 42px; padding: 10px 12px !important; background: #fff !important; border: 1px solid rgba(148,163,184,0.24) !important; border-radius: calc(var(--sm-radius,16px) - 6px) !important; } body.sibertema #main-collection-filters label, body.sibertema #main-collection-filters .filter-option, body.sibertema #main-collection-filters .facets__label{ font-size: 13px; font-weight: 700; color: var(--sm-text) !important; } /* 3) Sepet / Ödeme (cart/checkout) */ body.sibertema .cart-container{ padding: 0 !important; } body.sibertema .cart-container-left, body.sibertema .cart-container-right{ background: var(--sm-surface) !important; border: 1px solid rgba(148,163,184,0.18) !important; border-radius: var(--sm-radius,16px) !important; box-shadow: var(--sm-shadow-sm, 0 10px 24px rgba(2,6,23,0.10)) !important; } body.sibertema .cart-container-left{ padding: 14px !important; } body.sibertema .cart-product-container{ z-index: auto !important; float: none !important; width: 100% !important; display: flex !important; gap: 12px !important; align-items: center; margin-bottom: 12px !important; padding: 12px !important; border: 1px solid rgba(148,163,184,0.20) !important; background: rgba(248,250,252,0.92) !important; border-radius: var(--sm-radius-sm,12px) !important; } body.sibertema .cart-product-container-left, body.sibertema .cart-product-container-middle, body.sibertema .cart-product-container-right{ float: none !important; } body.sibertema .cart-product-container-left{ width: 84px !important; flex: 0 0 84px; } body.sibertema .cart-product-container-left img{ width: 84px !important; height: 84px !important; object-fit: contain !important; background: #fff !important; border: 1px solid rgba(148,163,184,0.18) !important; border-radius: 14px !important; } body.sibertema .cart-product-container-middle{ width: auto !important; flex: 1 1 auto; padding-left: 0 !important; } body.sibertema .cart-product-title h2{ font-size: 14px !important; font-weight: 900 !important; margin: 0 0 4px 0 !important; color: var(--sm-text) !important; } body.sibertema .cart-product-variant-title h3{ font-size: 12px !important; font-weight: 600 !important; color: var(--sm-text-muted) !important; } body.sibertema .cart-product-prices .newfiyat{ font-size: 16px !important; font-weight: 900 !important; color: var(--sm-text) !important; } body.sibertema .cart-product-container-right{ width: 62px !important; flex: 0 0 62px; margin-top: 0 !important; } body.sibertema .cart-product-quantity-changer{ width: 100% !important; height: auto !important; border: 1px solid rgba(148,163,184,0.28) !important; border-radius: 999px !important; background: #fff !important; overflow: hidden; } body.sibertema .cart-product-quantity-changer-increaser, body.sibertema .cart-product-quantity-changer-decreaser, body.sibertema .cart-product-quantity-changer-quantity{ width: 100% !important; height: 36px !important; display:flex; align-items:center; justify-content:center; } body.sibertema .cart-product-quantity-changer-quantity input{ width: 100% !important; height: 36px !important; border: none !important; background: transparent !important; text-align: center !important; font-weight: 900; } body.sibertema .cart-product-remove{ border: none !important; background: transparent !important; color: var(--sm-danger) !important; padding: 10px !important; border-radius: 12px !important; } body.sibertema .cart-product-remove:hover{ background: rgba(239,68,68,0.12) !important; } /* Sipariş özeti / ödeme butonu */ body.sibertema .cart-summary{ background: rgba(248,250,252,0.92) !important; border: 1px solid rgba(148,163,184,0.20) !important; border-radius: var(--sm-radius-sm,12px) !important; padding: 14px !important; } body.sibertema .cart-summary h2{ font-size: 16px; font-weight: 900; margin: 0 0 12px 0; color: var(--sm-text); } body.sibertema .cart-summary table td{ padding: 8px 0; font-size: 13px; font-weight: 700; } body.sibertema .cart-summary .cart-summary-total-price{ font-size: 18px; font-weight: 900; color: var(--sm-text); } body.sibertema .cart-container-right .butonok{ border-radius: var(--sm-radius-sm,12px) !important; padding: 12px 14px; font-weight: 900; box-shadow: 0 16px 34px rgba(2,6,23,0.16); } body.sibertema .cart-container-right .butonok:hover{ filter: brightness(0.97); } @media (max-width: 768px){ body.sibertema .cart-product-container{ align-items: flex-start; } body.sibertema .cart-product-container-left{ width: 72px !important; flex: 0 0 72px; } body.sibertema .cart-product-container-left img{ width: 72px !important; height: 72px !important; } body.sibertema .cart-product-container-right{ width: 52px !important; flex: 0 0 52px; } } /* 4) Mobil menü (drawer) */ html.sm-noscroll, body.sm-noscroll{ overflow: hidden !important; } body.sibertema .overlay{ display: none; background: rgba(2,6,23,0.55); backdrop-filter: blur(2px); } body.sibertema .overlay.active, body.sibertema .overlay.show{ display: block !important; } body.sibertema .sm-mobile-menu-btn{ display: none; align-items:center; justify-content:center; width: 42px; height: 42px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.10); color: rgba(255,255,255,0.95); } body.sibertema .sm-mobile-menu-btn svg{ width: 22px; height: 22px; fill: currentColor; } body.sibertema .sm-mobile-drawer{ position: fixed; top: 0; left: 0; height: 100vh; width: 320px; max-width: 88vw; background: var(--sm-surface); border-right: 1px solid rgba(148,163,184,0.20); box-shadow: 0 30px 80px rgba(2,6,23,0.35); transform: translateX(-105%); transition: transform .22s ease; z-index: 2000; display: flex; flex-direction: column; } body.sibertema .sm-mobile-drawer.active{ transform: translateX(0); } body.sibertema .sm-md-header{ display:flex; align-items:center; justify-content:space-between; padding: 14px; border-bottom: 1px solid rgba(148,163,184,0.18); background: var(--sm-surface); } body.sibertema .sm-md-logo{ display:flex; align-items:center; gap:10px; color: var(--sm-text) !important; text-decoration:none !important; font-weight: 900; } body.sibertema .sm-md-logo img{ height: 28px; width: auto; } body.sibertema .sm-md-close{ width: 40px; height: 40px; border-radius: 14px; border: 1px solid rgba(148,163,184,0.25); background: #fff; display:flex; align-items:center; justify-content:center; } body.sibertema .sm-md-close:hover{ background: rgba(248,250,252,0.92); } body.sibertema .sm-md-close svg{ width: 20px; height: 20px; fill: rgba(15,23,42,0.80); } body.sibertema .sm-md-body{ padding: 14px; overflow: auto; } body.sibertema .sm-md-section-title{ font-size: 12px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sm-text-muted); margin: 12px 0 8px; } body.sibertema .sm-md-search{ display:flex; gap: 10px; margin-bottom: 12px; } body.sibertema .sm-md-search input{ flex: 1; height: 44px; } body.sibertema .sm-md-search button{ height: 44px; padding: 0 14px; border-radius: 14px !important; } body.sibertema .sm-md-links a, body.sibertema .sm-md-navlinks a, body.sibertema .sm-md-cat > a{ display:flex; align-items:center; justify-content:space-between; padding: 10px 12px; border: 1px solid rgba(148,163,184,0.18); border-radius: 14px; background: rgba(248,250,252,0.92); color: var(--sm-text) !important; text-decoration:none !important; font-weight: 900; margin-bottom: 10px; } body.sibertema .sm-md-links a:hover, body.sibertema .sm-md-navlinks a:hover, body.sibertema .sm-md-cat > a:hover{ border-color: rgba(99,102,241,0.28); } body.sibertema .sm-md-cat details{ margin-bottom: 10px; } body.sibertema .sm-md-cat summary{ list-style:none; cursor:pointer; } body.sibertema .sm-md-cat summary::-webkit-details-marker{ display:none; } body.sibertema .sm-md-cat summary{ padding: 10px 12px; border: 1px solid rgba(148,163,184,0.18); border-radius: 14px; background: rgba(248,250,252,0.92); font-weight: 900; color: var(--sm-text); } body.sibertema .sm-md-cat .sm-md-sub{ padding: 8px 8px 0 8px; } body.sibertema .sm-md-cat .sm-md-sub a{ display:block; padding: 8px 10px; border: 1px solid rgba(148,163,184,0.16); border-radius: 12px; background: #fff; color: var(--sm-text) !important; text-decoration:none !important; font-weight: 700; margin-bottom: 8px; } @media (max-width: 1024px){ body.sibertema .sm-mobile-menu-btn{ display: inline-flex; } body.sibertema .navigation{ display:none !important; } body.sibertema .main-header .category-dropdown{ display:none !important; } }