/* ========================================================================== Gözde Alışveriş — Butik Tasarım Katmanı opencartvip (Journal 3) temasının üzerine binen görsel override dosyası. layout.twig içinde sonunda, tema CSS'inden SONRA yüklenir. ========================================================================== */ :root { --gb-bg: #ffffff; --gb-cream: #F6F3ED; --gb-blush: #EFEAE1; --gb-blush-2: #F0EBE2; --gb-nude: #D8D0C2; --gb-sage: #EFEAE1; --gb-taupe: #6E665C; --gb-ink: #23201C; --gb-ink-2: #1F2A33; --gb-muted: #6E665C; --gb-line: #E6E0D6; --gb-accent: #4E6375; --gb-radius: 14px; --gb-shadow: 0 18px 50px -28px rgba(35, 32, 28, .35); --gb-serif: 'Newsreader', 'Playfair Display', Georgia, serif; --gb-sans: 'Hanken Grotesk', 'Jost', system-ui, -apple-system, sans-serif; } /* -------------------------------------------------------------------------- 1. Tipografi temeli -------------------------------------------------------------------------- */ body, .btn, input, select, textarea, button, .form-control, .main-menu, .top-menu, .breadcrumb, .product-thumb, .module-body, footer { font-family: var(--gb-sans) !important; } body { background: var(--gb-bg) !important; color: var(--gb-ink) !important; font-weight: 300 !important; line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, .page-title, .module-title, .module-title span, .module-title h3, #logo h1, .product-info .product-details .page-title, .info-block .info-title, .title, .heading { font-family: var(--gb-serif) !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--gb-ink) !important; line-height: 1.15 !important; } a { color: inherit; } a:hover { color: var(--gb-accent) !important; } /* Bölüm başlıkları (modül başlıkları) — referans tasarımdaki .sec-title */ .module-title, .module-title > * { font-size: clamp(24px, 3.2vw, 38px) !important; } .site-wrapper > h1.page-title, .site-wrapper > h1.page-title > span { font-family: var(--gb-serif) !important; font-size: clamp(26px, 3.6vw, 42px) !important; font-weight: 500 !important; color: var(--gb-ink) !important; } /* -------------------------------------------------------------------------- 2. Duyuru şeridi + top bar — koyu ink şerit -------------------------------------------------------------------------- */ .gb-announce { background: var(--gb-ink); color: #fff; text-align: center; font-family: var(--gb-sans); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; font-weight: 300; padding: 10px 16px; line-height: 1.4; } .gb-announce b { font-weight: 500; color: #E6E0D6; } header .top-bar, .header-default .top-bar, .header-classic .top-bar, .header-compact .top-bar, .header-slim .top-bar, .header-mega .top-bar { background: var(--gb-ink) !important; color: #fff !important; border: none !important; font-size: 12px !important; letter-spacing: .14em !important; text-transform: uppercase !important; font-weight: 300 !important; } header .top-bar a, header .top-bar .menu-item > a, header .top-bar .dropdown > a { color: rgba(255, 255, 255, .85) !important; font-size: 12px !important; letter-spacing: .14em !important; text-transform: uppercase !important; } header .top-bar a:hover, header .top-bar .menu-item > a:hover { color: #E6E0D6 !important; } /* -------------------------------------------------------------------------- 3. Header — beyaz, buzlu cam, ince alt çizgi -------------------------------------------------------------------------- */ header, header .header, .header-classic, .header-default, .header-compact, .header-slim, .header-mega { background: rgba(255, 255, 255, .94) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: none !important; } header .mid-bar { background: transparent !important; border: none !important; } header .desktop-main-menu-wrapper { background: transparent !important; border-top: 1px solid var(--gb-line) !important; border-bottom: 1px solid var(--gb-line) !important; } .mobile-header { background: rgba(255, 255, 255, .96) !important; border-bottom: 1px solid var(--gb-line) !important; } /* Logo */ #logo h1, #logo a { font-family: var(--gb-serif) !important; font-size: 26px !important; font-weight: 600 !important; color: var(--gb-ink) !important; letter-spacing: .02em !important; } /* -------------------------------------------------------------------------- 4. Ana menü — ince, uppercase, accent alt çizgi -------------------------------------------------------------------------- */ .main-menu > ul > .menu-item > a, .desktop-main-menu-wrapper .main-menu > ul > li > a { font-family: var(--gb-sans) !important; font-size: 13.5px !important; font-weight: 400 !important; letter-spacing: .06em !important; text-transform: uppercase !important; color: var(--gb-ink) !important; background: transparent !important; position: relative; transition: color .25s ease; } .main-menu > ul > .menu-item > a::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: 10px; height: 1px; background: var(--gb-accent); transition: left .3s ease, right .3s ease; } .main-menu > ul > .menu-item:hover > a::after, .main-menu > ul > .menu-item.active > a::after { left: 16px; right: 16px; } .main-menu > ul > .menu-item:hover > a, .main-menu > ul > .menu-item.active > a { color: var(--gb-accent) !important; background: transparent !important; } /* Açılır menüler */ .j-dropdown, .dropdown-menu, .mega-menu, .main-menu .dropdown-menu { background: #fff !important; border: 1px solid var(--gb-line) !important; border-radius: var(--gb-radius) !important; box-shadow: var(--gb-shadow) !important; overflow: hidden; } .j-dropdown .menu-item > a, .dropdown-menu .menu-item > a { font-size: 13.5px !important; font-weight: 300 !important; color: var(--gb-ink) !important; letter-spacing: .02em !important; } .j-dropdown .menu-item > a:hover, .dropdown-menu .menu-item > a:hover { color: var(--gb-accent) !important; background: var(--gb-cream) !important; } /* -------------------------------------------------------------------------- 5. Butonlar — hap (pill) formu, ink → accent -------------------------------------------------------------------------- */ .btn, button.btn, a.btn, input[type='submit'], .btn-primary, .btn-default, .btn-cart, .btn-checkout, .buttons .btn { border-radius: 40px !important; font-family: var(--gb-sans) !important; font-size: 13px !important; font-weight: 400 !important; letter-spacing: .12em !important; text-transform: uppercase !important; transition: background .3s ease, color .3s ease, transform .3s ease, border-color .3s ease !important; } .btn-primary, .btn-cart, .btn-checkout, input[type='submit'], .buttons .btn-primary { background: var(--gb-ink) !important; color: #fff !important; border: 1px solid var(--gb-ink) !important; } .btn-primary:hover, .btn-cart:hover, .btn-checkout:hover, input[type='submit']:hover, .buttons .btn-primary:hover { background: var(--gb-accent) !important; border-color: var(--gb-accent) !important; color: #fff !important; transform: translateY(-2px); } .btn-default, .btn-secondary { background: transparent !important; color: var(--gb-ink) !important; border: 1px solid var(--gb-ink) !important; } .btn-default:hover, .btn-secondary:hover { background: var(--gb-ink) !important; color: #fff !important; } /* Sepet / istek listesi rozet sayacı */ .count-badge { background: var(--gb-accent) !important; color: #fff !important; font-family: var(--gb-sans) !important; font-weight: 500 !important; border-radius: 50% !important; } /* -------------------------------------------------------------------------- 6. Form elemanları — hap input, cream zemin -------------------------------------------------------------------------- */ .form-control, input[type='text'], input[type='email'], input[type='password'], input[type='tel'], select, textarea { border: 1px solid var(--gb-line) !important; border-radius: 40px !important; font-family: var(--gb-sans) !important; font-size: 14px !important; font-weight: 300 !important; color: var(--gb-ink) !important; background: #fff !important; box-shadow: none !important; } textarea.form-control, textarea { border-radius: 16px !important; } .form-control:focus, input:focus, select:focus, textarea:focus { border-color: var(--gb-accent) !important; box-shadow: none !important; outline: none !important; } /* Arama kutusu */ .header-search input, .full-search input, .mini-search input, #search input { border-radius: 40px !important; background: var(--gb-cream) !important; border: 1px solid var(--gb-line) !important; } .header-search .btn, .full-search .btn, #search .btn { border-radius: 40px !important; background: var(--gb-ink) !important; color: #fff !important; } .header-search .btn:hover, .full-search .btn:hover, #search .btn:hover { background: var(--gb-accent) !important; } /* -------------------------------------------------------------------------- 7. Ürün kartı — yumuşak köşe, hover zoom, hap "Sepete Ekle" -------------------------------------------------------------------------- */ .product-thumb { background: transparent !important; border: none !important; box-shadow: none !important; } .product-thumb .image, .product-thumb .product-img, .product-thumb .image > a, .product-thumb .image > a > div { border-radius: var(--gb-radius) !important; overflow: hidden !important; background: var(--gb-cream) !important; } .product-thumb .image img { transition: transform .7s ease !important; } .product-thumb:hover .image img, .product-layout:hover .product-thumb .image .img-first { transform: scale(1.05); } .product-thumb .caption { background: transparent !important; padding-top: 14px !important; text-align: left; } .product-thumb .name a { font-family: var(--gb-sans) !important; font-size: 15px !important; font-weight: 400 !important; color: var(--gb-ink) !important; letter-spacing: .01em !important; line-height: 1.4 !important; } .product-thumb .name a:hover { color: var(--gb-accent) !important; } .product-thumb .price, .product-thumb .price-normal, .product-thumb .price-new { font-family: var(--gb-sans) !important; font-size: 15px !important; font-weight: 500 !important; } .product-thumb .price-normal { color: var(--gb-ink) !important; } .product-thumb .price-new { color: var(--gb-accent) !important; } .product-thumb .price-old { color: var(--gb-muted) !important; font-weight: 300 !important; text-decoration: line-through !important; } .product-thumb .rating .fa-star, .product-thumb .rating .fa-star-o { color: var(--gb-nude) !important; } /* Etiketler (Yeni / İndirim) — hap rozet */ .product-label { border-radius: 30px !important; font-family: var(--gb-sans) !important; font-size: 11px !important; font-weight: 500 !important; letter-spacing: .1em !important; text-transform: uppercase !important; box-shadow: none !important; } .product-label b { font-weight: 500 !important; letter-spacing: .1em !important; } .product-label-1 { background: #fff !important; color: var(--gb-ink) !important; } .product-label-2, .product-label-sale { background: var(--gb-accent) !important; color: #fff !important; } /* Kart butonları */ .product-thumb .btn-cart { border-radius: 30px !important; background: var(--gb-ink) !important; color: #fff !important; font-size: 12px !important; letter-spacing: .12em !important; } .product-thumb .btn-cart:hover { background: var(--gb-accent) !important; } .product-thumb .btn-wishlist, .product-thumb .btn-compare, .product-thumb .btn-quickview { border-radius: 50% !important; background: #fff !important; color: var(--gb-ink) !important; border: 1px solid var(--gb-line) !important; } .product-thumb .btn-wishlist:hover, .product-thumb .btn-compare:hover, .product-thumb .btn-quickview:hover { background: var(--gb-accent) !important; border-color: var(--gb-accent) !important; color: #fff !important; } .product-thumb .stepper input, .stepper input { border-radius: 30px !important; background: var(--gb-cream) !important; } /* -------------------------------------------------------------------------- 8. Kategori / banner blokları — yuvarlatılmış, overlay -------------------------------------------------------------------------- */ .module-banners .banner-item, .module-banners img, .module-gallery img, .module-categories .category-item, .category-grid .image, .module-slider .swiper-slide img, .module-master .banner, .info-block { border-radius: var(--gb-radius) !important; overflow: hidden !important; } .module-banners .banner-item img, .module-categories img { transition: transform .9s ease !important; } .module-banners .banner-item:hover img, .module-categories .category-item:hover img { transform: scale(1.06); } .module-banners .caption, .module-categories .caption { font-family: var(--gb-serif) !important; font-weight: 500 !important; } /* Bilgi blokları (kargo, iade, güvenli alışveriş şeridi) */ .info-block { background: #fff !important; border: none !important; box-shadow: none !important; } .info-block .info-title, .info-block b { font-family: var(--gb-sans) !important; font-size: 13.5px !important; font-weight: 500 !important; letter-spacing: .02em !important; color: var(--gb-ink) !important; } .info-block .info-text, .info-block span { font-size: 12px !important; color: var(--gb-muted) !important; } .info-block i, .info-block svg { color: var(--gb-accent) !important; } /* -------------------------------------------------------------------------- 9. Breadcrumb -------------------------------------------------------------------------- */ .breadcrumb { background: transparent !important; font-size: 12.5px !important; letter-spacing: .04em !important; color: var(--gb-muted) !important; } .breadcrumb > li a { color: var(--gb-muted) !important; } .breadcrumb > li a:hover { color: var(--gb-accent) !important; } /* -------------------------------------------------------------------------- 10. Bülten modülü — cream zemin, hap input -------------------------------------------------------------------------- */ .module-newsletter { background: var(--gb-cream) !important; border-radius: 20px !important; padding: 46px 30px !important; } .module-newsletter .module-title, .module-newsletter .module-title > * { font-family: var(--gb-serif) !important; color: var(--gb-ink) !important; } .module-newsletter .module-body .newsletter-form form input { border-radius: 40px !important; border: 1px solid var(--gb-line) !important; background: #fff !important; padding: 16px 20px !important; } .module-newsletter .module-body .newsletter-form form .btn { border-radius: 40px !important; background: var(--gb-ink) !important; color: #fff !important; } .module-newsletter .module-body .newsletter-form form .btn:hover { background: var(--gb-accent) !important; } /* -------------------------------------------------------------------------- 11. Ürün detay sayfası -------------------------------------------------------------------------- */ .product-info .product-image, .product-info .additional-images img, .product-info .main-image { border-radius: var(--gb-radius) !important; overflow: hidden !important; } .product-info .product-details .page-title { font-family: var(--gb-serif) !important; font-size: clamp(24px, 3vw, 34px) !important; font-weight: 500 !important; } .product-info .product-price, .product-info .product-price-new { font-family: var(--gb-sans) !important; font-weight: 500 !important; color: var(--gb-accent) !important; } .product-info .product-price-old { color: var(--gb-muted) !important; font-weight: 300 !important; } .nav-tabs { border-bottom: 1px solid var(--gb-line) !important; } .nav-tabs > li > a { font-family: var(--gb-sans) !important; font-size: 13px !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: var(--gb-muted) !important; border: none !important; background: transparent !important; } .nav-tabs > li.active > a, .nav-tabs > li > a:hover { color: var(--gb-ink) !important; border-bottom: 2px solid var(--gb-accent) !important; background: transparent !important; } /* -------------------------------------------------------------------------- 12. Sepet / checkout panelleri -------------------------------------------------------------------------- */ .panel, .panel-default, .well, .cart-content, .quick-checkout-wrapper .panel { border-radius: var(--gb-radius) !important; border: 1px solid var(--gb-line) !important; box-shadow: none !important; background: #fff !important; } .panel-heading { background: var(--gb-cream) !important; border-bottom: 1px solid var(--gb-line) !important; font-family: var(--gb-sans) !important; font-size: 13px !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: var(--gb-ink) !important; } .table > thead > tr > th { background: var(--gb-cream) !important; border-color: var(--gb-line) !important; font-family: var(--gb-sans) !important; font-size: 12px !important; letter-spacing: .1em !important; text-transform: uppercase !important; font-weight: 500 !important; color: var(--gb-ink) !important; } .table > tbody > tr > td, .table-bordered > tbody > tr > td, .table-bordered > thead > tr > th { border-color: var(--gb-line) !important; } /* -------------------------------------------------------------------------- 13. Sayfalama -------------------------------------------------------------------------- */ .pagination > li > a, .pagination > li > span { border-radius: 50% !important; border: 1px solid var(--gb-line) !important; color: var(--gb-ink) !important; background: #fff !important; margin: 0 3px; } .pagination > li.active > span, .pagination > li > a:hover { background: var(--gb-ink) !important; border-color: var(--gb-ink) !important; color: #fff !important; } /* -------------------------------------------------------------------------- 14. Footer — koyu #1F2A33 -------------------------------------------------------------------------- */ footer, footer.top-row { background: var(--gb-ink-2) !important; color: #D8D0C2 !important; font-weight: 300 !important; } footer .module-title, footer .module-title > *, footer .links-menu .module-title { font-family: var(--gb-sans) !important; color: #fff !important; font-size: 13px !important; letter-spacing: .16em !important; text-transform: uppercase !important; font-weight: 500 !important; } footer a, footer .module-body a, footer .links-menu a { color: #6E665C !important; font-size: 14px !important; font-weight: 300 !important; transition: color .2s ease, padding-left .2s ease; } footer a:hover, footer .links-menu a:hover { color: #fff !important; padding-left: 4px; } footer p, footer span, footer .module-body { color: #6E665C !important; font-size: 14px !important; } footer b, footer strong { color: #fff !important; font-weight: 500 !important; } footer hr, footer .grid-row + .grid-row { border-color: rgba(255, 255, 255, .1) !important; } /* Sosyal medya ikonları — daire çerçeve */ footer .icons-menu > ul > .menu-item > a, footer .social-icons a { width: 38px !important; height: 38px !important; border: 1px solid rgba(255, 255, 255, .18) !important; border-radius: 50% !important; color: #fff !important; transition: background .25s ease, border-color .25s ease; } footer .icons-menu > ul > .menu-item > a:hover, footer .social-icons a:hover { background: var(--gb-accent) !important; border-color: var(--gb-accent) !important; padding-left: 0 !important; } /* -------------------------------------------------------------------------- 15. Yukarı çık butonu -------------------------------------------------------------------------- */ .scroll-top { background: var(--gb-ink) !important; border-radius: 50% !important; border: none !important; box-shadow: 0 12px 30px -10px rgba(35, 32, 28, .5) !important; transition: background .3s ease, transform .3s ease !important; } .scroll-top:hover { background: var(--gb-accent) !important; transform: translateY(-3px); } .scroll-top i { color: #fff !important; } /* -------------------------------------------------------------------------- 16. WhatsApp yüzen buton -------------------------------------------------------------------------- */ .gb-whatsapp { position: fixed; right: 22px; bottom: 92px; z-index: 80; width: 58px; height: 58px; background: #25d366; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 12px 30px -8px rgba(37, 211, 102, .6); transition: transform .3s ease; } .gb-whatsapp:hover { transform: scale(1.08); } .gb-whatsapp svg { width: 30px; height: 30px; fill: #fff; } /* -------------------------------------------------------------------------- 17. Popup / bildirim / tooltip -------------------------------------------------------------------------- */ .popup, .popup-content, .notification, .alert { border-radius: var(--gb-radius) !important; border: 1px solid var(--gb-line) !important; box-shadow: var(--gb-shadow) !important; } .alert-success { background: var(--gb-sage, #EFEAE1) !important; color: var(--gb-ink) !important; } .tooltip-inner { background: var(--gb-ink) !important; border-radius: 8px !important; font-family: var(--gb-sans) !important; font-size: 12px !important; letter-spacing: .04em !important; } /* -------------------------------------------------------------------------- 18. Mobil düzeltmeler -------------------------------------------------------------------------- */ @media (max-width: 760px) { .module-title, .module-title > * { font-size: 24px !important; } .module-newsletter { padding: 34px 20px !important; } .gb-whatsapp { right: 16px; bottom: 80px; width: 52px; height: 52px; } } /* ========================================================================== GÖZDE — Atölye düzeltmeleri Menü şeridindeki yeşil, CSS rengi değil bir arka plan GÖRSELİ: /image/cache/catalog/arkaplan/arkaplan2-1080x101.png Panelden görseli kaldırmak yerine burada bastırıyoruz. ========================================================================== */ .desktop-main-menu-wrapper::before{ background-image:none !important; background-color:var(--gb-ink-2) !important; } /* Renk zorlaması bilerek YOK: temanın kendi metin renkleri zaten koyu şerit için tasarlanmış. Buraya geniş bir color kuralı koymak açılır menülerdeki metni de beyaza çevirip görünmez yapıyor. */ /* Sağdaki telefon bloğu (main-menu-64): koyu şeritte açık metin. Sadece bu modüle kilitli — geniş bir kural açılır menüleri de bozuyor. */ .desktop-main-menu-wrapper .main-menu-64, .desktop-main-menu-wrapper .main-menu-64 *{ color:var(--gb-cream) !important; } /* "Tüm Kategoriler" düğmesi de bir arka plan GÖRSELİ (kırmızı): /image/cache/catalog/arkaplan/tumkategoriler-229x…png Görseli bastırıp arduvaz vurgusuna çeviriyoruz. */ .desktop-main-menu-wrapper .main-menu-3 > .j-menu > .menu-item > a.dropdown-toggle{ background-image:none !important; background-color:var(--gb-accent) !important; } /* ========================================================================== Kontrast düzeltmeleri ========================================================================== */ /* Ürün kuşağı başlıkları koyu bir kurdele üstünde duruyor (linear-gradient … #1F2A33). Metin de koyuydu: siyah üstüne siyah. */ .module-products .title.module-title, .module-products .title.module-title *{ color:var(--gb-cream) !important; } /* Haber bülteni kartı AÇIK zeminli; metni koyu olmalı. Önceki hâlinde beyaz/nü metin krem zeminde kayboluyordu. */ .module-newsletter, .module-newsletter *{ color:var(--gb-ink) !important; } .module-newsletter .newsletter-text, .module-newsletter .module-body{ color:var(--gb-muted) !important; } .module-newsletter .btn, .module-newsletter .btn *, .module-newsletter button, .module-newsletter button *{ color:#fff !important; } /* Kategori açılır paneli sitenin kart diline uysun: beyaz zemin, ince kenarlık, yumuşak köşe ve gölge. */ .desktop-main-menu-wrapper .dropdown-menu.j-dropdown{ background-color:#fff !important; border:1px solid var(--gb-line) !important; border-radius:var(--gb-radius) !important; box-shadow:var(--gb-shadow) !important; overflow:hidden !important; } .desktop-main-menu-wrapper .flyout-menu .menu-item + .menu-item > a{ border-top:1px solid var(--gb-line) !important; } /* Footer iletişim kutuları: kutu zemini BEYAZ, metin de beyazdı — okunmuyordu. */ footer .info-block .info-block-title, footer .info-block .info-block-title *{ color:var(--gb-ink) !important; } footer .info-block .info-block-text, footer .info-block .info-block-text *{ color:var(--gb-muted) !important; }