/* =================================================== CARBEZO THEME for OpenCart 3.0.x — stage 1: header, menu, footer Ported from the WordPress Carbezo theme (assets/css/main.css). =================================================== */ :root{ --brand: #2B8B4E; --brand-dark: #1F6B3A; --ink: #1A1A1A; --ink-soft: #5B5B58; --line: #E7E5DE; --bg: #FFFFFF; --bg-soft: #F7F6F2; } *{box-sizing:border-box;} body{ margin:0; font-family: "Oxanium", -apple-system, "Segoe UI", Roboto, Arial, sans-serif; background:var(--bg); color:var(--ink); } /* Tüm site genelinde standart hizalama genişliği — topbar, header, nav, banner ve sayfa içerikleri hepsi bu genişliğe göre ortalanır. */ .site-container{ max-width:1280px; margin:0 auto; padding:0 24px; } /* Header + nav bar birlikte kaydırınca üstte sabit kalır (sticky). Top bar (kampanya mesajı) bunun dışında, kaydırınca kaybolur. */ .site-header-sticky{ position:sticky; top:0; z-index:50; background:var(--bg); } /* Kaydırınca devreye giren kompakt mod: header + ΟΛΑ ΤΑ ΠΡΟΪΟΝΤΑ barı birleşip tek satıra dönüşür (arama kutusu gizlenir, nav barı gizlenir, menü linkleri header satırının içinde görünür). */ .header-compact-nav{ display:none; align-items:center; gap:24px; } .header-compact-nav .all-products-trigger{padding:6px;} .site-header-sticky.is-compact .header .site-container{ padding-top:10px; padding-bottom:10px; } .site-header-sticky.is-compact .logo-tagline{display:none;} .site-header-sticky.is-compact .logo img{width:auto; max-width:var(--logo-w, 200px); max-height:38px;} .site-header-sticky.is-compact .header-search{display:none;} .site-header-sticky.is-compact .header-compact-nav{display:flex;} .site-header-sticky.is-compact nav.mega .mega-bar{display:none;} /* Breadcrumb şeridi — header ile aynı gri tonda, tam genişlikte (kenardan kenara), içeriği standart site genişliğine (.site-container) ortalanmış. Tüm sayfalarda (kategori, ürün detay, sepet/checkout, sabit sayfalar) aynı görünüm. */ .breadcrumb-bar{ background:var(--bg-soft); border-bottom:1px solid var(--line); } .breadcrumb-bar .breadcrumb{ padding-top:14px; padding-bottom:14px; } /* ===== Topbar ===== */ .topbar{ background:var(--brand-dark); color:#fff; font-size:13px; display:flex; flex-wrap:wrap; } .topbar .site-container{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-top:6px; padding-bottom:6px; width:100%; } .topbar a{color:#fff; text-decoration:none; opacity:.9;} /* ===== Header (logo / arama / hesap) ===== */ .header{ background:var(--bg-soft); border-bottom:1px solid var(--line); } .header .site-container{ display:flex; align-items:center; gap:28px; flex-wrap:wrap; padding-top:16px; padding-bottom:16px; position:relative; } .logo{ font-size:22px; font-weight:700; color:var(--brand); letter-spacing:-0.5px; white-space:nowrap; } .logo span{color:var(--ink);} .logo-fallback{ text-decoration:none; display:flex; flex-direction:column; line-height:1.2; } .logo-text{font-size:24px; font-weight:800;} .logo-text span{color:var(--ink);} .logo-tagline{ font-size:10.5px; font-weight:500; color:var(--ink-soft); letter-spacing:.2px; margin-top:1px; } .logo-image{display:block; line-height:0;} .logo img{width:var(--logo-w, 200px); max-width:100%; height:auto; display:block;} .header-search{ flex:1; min-width:0; display:flex; border:1px solid var(--line); border-radius:6px; overflow:hidden; background:#fff; } .header-search input[type="search"]{ flex:1; width:0; min-width:0; border:none; padding:11px 14px; font-size:14px; outline:none; font-family:inherit; } .search-cat-select{ border:none; border-left:1px solid var(--line); background:var(--bg-soft); padding:0 10px; font-size:12.5px; color:var(--ink-soft); font-family:inherit; max-width:160px; } .header-search button{ background:var(--brand); border:none; color:#fff; padding:0 18px; cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center; } .header-search button:hover{background:var(--brand-dark);} .header-search button svg{width:18px; height:18px;} .header-actions{ display:flex; align-items:center; gap:20px; margin-left:auto; white-space:nowrap; } .header-account, .header-cart{ display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--ink); font-size:12.5px; } .header-account svg{width:26px; height:26px; color:var(--ink-soft); flex-shrink:0;} .header-account .chevron{width:14px; height:14px; margin-left:-2px;} .header-account-text{display:flex; flex-direction:column; font-weight:700;} .header-account-text small{font-weight:500; color:var(--ink-soft); font-size:10.5px;} .cart-icon-wrap{position:relative; display:flex;} .cart-icon-wrap svg{width:24px; height:24px; color:var(--ink-soft);} .header-cart .badge{ position:absolute; top:-6px; right:-8px; background:var(--brand); color:#fff; border-radius:50%; width:17px; height:17px; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; } .header-cart-text{display:flex; flex-direction:column; font-weight:700;} .header-cart-text small{font-weight:500; color:var(--ink-soft); font-size:10.5px;} /* =================================================== SADE NAV BAR — referans görsele göre Sol: "ΟΛΑ ΤΑ ΠΡΟΪΟΝΤΑ ☰" tetikleyici Sağ: düz metin linkler =================================================== */ nav.mega{ background:var(--bg); border-bottom:1px solid var(--line); position:relative; } .mega-bar{ max-width:1280px; margin:0 auto; padding:0 24px; display:flex; align-items:center; justify-content:space-between; height:50px; } .all-products-trigger{ display:flex; align-items:center; gap:12px; background:none; border:none; cursor:pointer; font-size:13.5px; font-weight:700; letter-spacing:.3px; color:var(--ink); padding:8px 4px; text-transform:uppercase; } .all-products-trigger .burger-icon{ display:flex; flex-direction:column; gap:4px; } .all-products-trigger .burger-icon span{ display:block; width:20px; height:2px; background:var(--ink); } .all-products-trigger.open{color:var(--brand-dark);} .all-products-trigger.open .burger-icon span{background:var(--brand-dark);} .simple-links{ list-style:none; display:flex; gap:30px; margin:0; padding:0; } .simple-links a{ color:var(--ink); text-decoration:none; font-size:13px; font-weight:500; letter-spacing:.2px; text-transform:uppercase; padding:6px 0; border-bottom:2px solid transparent; } .simple-links a:hover{color:var(--brand-dark); border-bottom-color:var(--brand);} /* ===== ΟΛΑ ΤΑ ΠΡΟΪΟΝΤΑ paneli (sidebar + content) ===== */ .all-products-panel{ display:none; background:#fff; border-top:1px solid var(--line); position:relative; z-index:31; } .all-products-panel.open{display:block;} .panel-inner{ max-width:1280px; margin:0 auto; display:flex; } .panel-sidebar{ width:280px; flex-shrink:0; border-right:1px solid var(--line); padding:10px 0; } .panel-cat{ display:flex; align-items:center; gap:10px; width:100%; background:none; border:none; text-align:left; padding:11px 22px; font-size:13.5px; color:var(--ink); cursor:pointer; border-left:3px solid transparent; } .panel-cat img{width:18px; height:18px; opacity:.8;} .panel-cat:hover, .panel-cat.active{ background:var(--bg-soft); color:var(--brand-dark); border-left-color:var(--brand); } .panel-cat:hover img, .panel-cat.active img{opacity:1;} .panel-content{ flex:1; position:relative; min-height:340px; } .panel-pane{ display:none; padding:26px 30px; } .panel-pane.active{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } .panel-pane.simple-pane.active{display:block;} .pane-col h4{ margin:0 0 8px; font-size:13px; color:var(--brand-dark); font-weight:700; border-bottom:2px solid var(--brand); padding-bottom:6px; } .pane-col a{ display:block; color:var(--ink-soft); text-decoration:none; font-size:13px; padding:4px 0; } .pane-col a:hover{color:var(--brand-dark);} .simple-pane p{ font-size:13.5px; color:var(--ink-soft); margin:0 0 14px; line-height:1.6; } .simple-pane a.view-all{ display:inline-block; color:#fff; background:var(--brand); text-decoration:none; font-size:13px; font-weight:600; padding:9px 18px; border-radius:4px; } /* Marka arama paneli */ .brand-search{ width:100%; max-width:340px; padding:9px 12px; border:1px solid var(--line); border-radius:4px; font-size:13px; margin-bottom:16px; outline:none; } .brand-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px 14px; } .brand-grid a{ color:var(--ink-soft); text-decoration:none; font-size:13px; padding:3px 0; } .brand-grid a:hover{color:var(--brand-dark);} .brand-more{ display:inline-block; margin-top:14px; color:var(--brand-dark); font-size:13px; font-weight:600; text-decoration:none; } .overlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:29; } .overlay.show{display:block;} /* =================================================== FOOTER — mevcut sitenizdeki içerikle birebir =================================================== */ footer.site-footer{ background:var(--brand-dark); color:rgba(255,255,255,.8); margin-top:24px; } .footer-top{ max-width:1280px; margin:0 auto; padding:44px 24px; display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:32px; } .footer-col h4{ color:#fff; font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; margin:0 0 16px; } .footer-col p{ font-size:13px; font-weight:600; line-height:1.9; margin:0 0 4px; color:rgba(255,255,255,.75); } .footer-col ul{list-style:none; margin:0; padding:0;} .footer-col li{margin-bottom:9px;} .footer-col a{ color:rgba(255,255,255,.75); text-decoration:none; font-size:13px; font-weight:600; } .footer-col a:hover{color:#fff;} .footer-partner-logo{ display:block; max-width:150px; height:auto; margin-top:14px; border-radius:4px; } .footer-social{ display:flex; gap:10px; margin-top:16px; } .footer-social a{ width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; color:#fff; transition:background .15s; } .footer-social a:hover{background:var(--brand);} .footer-social svg{width:15px; height:15px;} .footer-bottom{ border-top:1px solid rgba(255,255,255,.15); background:rgba(0,0,0,.12); } .footer-bottom-inner{ max-width:1280px; margin:0 auto; padding:18px 24px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:12.5px; color:rgba(255,255,255,.55); } .footer-payments{ display:flex; align-items:center; gap:10px; } .footer-payments img{height:22px; width:auto; display:block;} @media (max-width: 900px){ .footer-top{grid-template-columns:1fr 1fr; padding:32px 20px;} .footer-bottom-inner{flex-direction:column; align-items:flex-start; text-align:left;} } @media (max-width: 480px){ .footer-top{grid-template-columns:1fr;} } /* =================================================== BACK TO TOP — sağ altta beliren yukarı kaydır butonu =================================================== */ .back-to-top{ position:fixed; right:22px; bottom:22px; width:44px; height:44px; border-radius:50%; background:var(--brand); color:#fff; border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.18); opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .2s, transform .2s, background .15s; z-index:40; } .back-to-top.show{ opacity:1; visibility:visible; transform:translateY(0); } .back-to-top:hover{background:var(--brand-dark);} .back-to-top svg{width:20px; height:20px;} @media (max-width: 900px){ .back-to-top{right:14px; bottom:14px; width:40px; height:40px;} } /* ============================================ MOBİL (≤ 900px) ============================================ */ @media (max-width: 900px){ .topbar .site-container{font-size:11.5px; justify-content:center; text-align:center;} .topbar span{display:none;} .site-container{padding:0 14px;} .header .site-container{padding-top:12px; padding-bottom:12px; gap:10px;} .logo-text{font-size:19px;} .logo-tagline{display:none;} .header-actions{gap:12px;} .header-account-text, .header-cart-text{display:none;} .header-account .chevron{display:none;} .header-search{position:static; transform:none; max-width:100%; width:100%; order:5;} .search-cat-select{display:none;} .header-compact-nav{display:none !important;} .site-header-sticky.is-compact nav.mega .mega-bar{display:flex !important;} .site-header-sticky.is-compact .header-search{display:flex;} .mega-bar{padding:0 14px;} .all-products-trigger{font-size:12.5px;} .simple-links{display:none;} /* mobilde ana bar'da yer yok, panel içine taşınıyor */ /* Panel: dropdown yerine soldan kayan tam yükseklikte çekmece */ .all-products-panel{ display:block; position:fixed; top:0; left:0; width:86%; max-width:360px; height:100%; transform:translateX(-100%); transition:transform .25s ease; z-index:30; overflow-y:auto; border-top:none; box-shadow:2px 0 14px rgba(0,0,0,.15); } .all-products-panel.open{transform:translateX(0);} .panel-inner{flex-direction:column;} .panel-sidebar{width:100%; border-right:none; border-bottom:1px solid var(--line);} .panel-content{min-height:0;} .panel-pane{padding:18px;} .panel-pane.active{grid-template-columns:1fr; gap:16px;} .mobile-simple-links{ display:flex; flex-direction:column; border-bottom:1px solid var(--line); padding:6px 0; } .mobile-simple-links a{ padding:11px 22px; color:var(--ink); text-decoration:none; font-size:13.5px; font-weight:600; } .mobile-simple-links a:hover{color:var(--brand-dark);} .brand-grid{grid-template-columns:repeat(2,1fr);} } @media (min-width:901px){ .mobile-simple-links{display:none;} /* masaüstünde bar'da zaten görünüyor */ } /* =================================================== OPENCART UYUMLULUK Kategori, ürün, sepet ve hesap sayfaları şimdilik OpenCart'ın varsayılan şablonlarını (Bootstrap 3 + default stylesheet) kullanıyor. Aşağıdaki kurallar o stillerin header/menü/footer'a sızmasını engeller. Sayfalar Carbezo şablonlarına taşındıkça Bootstrap tamamen kaldırılacak. =================================================== */ body.cz{ font-family: "Oxanium", -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color:var(--ink); background:var(--bg); } .topbar, .site-header-sticky, .site-footer{line-height:1.25;} .topbar a:hover, .topbar a:focus, .site-header-sticky a:hover, .site-header-sticky a:focus, .site-footer a:hover, .site-footer a:focus{text-decoration:none;} .site-header-sticky button:focus, .site-header-sticky input:focus, .site-header-sticky select:focus{outline:none;} .site-header-sticky button:focus-visible, .site-header-sticky a:focus-visible{outline:2px solid var(--brand); outline-offset:2px;} /* Bootstrap .badge varsayılanları (padding, gri arka plan) sepet rozetini bozmasın */ .header-cart .badge{padding:0; min-width:0; line-height:1; white-space:nowrap;} /* Arama kutusu */ .header-search input[type="search"]{height:auto; box-shadow:none; color:var(--ink);} .header-search input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none;} .search-cat-select{height:auto; cursor:pointer;} /* Kategori panelindeki başlık/linkler OpenCart'ın link rengini almasın */ .all-products-panel a, .simple-links a, .mobile-simple-links a{color:var(--ink);} .pane-col a, .brand-grid a{color:var(--ink-soft);} .pane-col a:hover, .brand-grid a:hover, .simple-links a:hover, .mobile-simple-links a:hover{color:var(--brand-dark);} .simple-pane a.view-all, .simple-pane a.view-all:hover{color:#fff;} .simple-pane a.view-all:hover{background:var(--brand-dark);} .brand-more, .brand-more:hover{color:var(--brand-dark);} .brand-grid{margin-bottom:4px;} /* Footer: OpenCart'ın varsayılan "footer" etiketi stillerini sıfırla */ footer.site-footer{padding-top:0; border-top:none;} .site-footer h4{font-family:inherit; line-height:1.3;} /* Top bar'daki dil seçici (birden fazla dil kuruluysa görünür) */ .topbar-right{display:flex; align-items:center; gap:14px;} .topbar-right .pull-left{float:none !important;} .topbar-right .btn-link{color:#fff; padding:0; font-size:13px; text-decoration:none;} .topbar-right .btn-link img{vertical-align:-2px;} .topbar-right .dropdown-menu{font-size:13px;} /* OpenCart sayfa içeriği ile header arasında nefes payı */ .site-header-sticky + .container, .site-header-sticky + #common-home, .site-header-sticky ~ .container{margin-top:20px;} @media (max-width: 900px){ .logo img{width:auto; max-width:min(var(--logo-w, 200px), 46vw); max-height:44px;} .topbar-right{justify-content:center;} } /* Sepete ekledikten sonra sepet ikonunda kısa bir "zıplama" geri bildirimi */ .header-cart .cart-icon-wrap{transition:transform .2s;} .header-cart.cart-bump .cart-icon-wrap{transform:scale(1.18);} @media (max-width: 900px){ /* Arama kutusu mobilde kendi satırına insin (flex:1'in 0 tabanı satır kırılmasını engelliyordu) */ .header-search{flex:1 1 100%;} } /* =================================================== 2. AŞAMA — SAYFALAR Anasayfa, ürün listeleri, ürün detay, sepet, bilgi sayfaları. WordPress temasındaki main.css'ten taşındı; WooCommerce'e özel kurallar çıkarıldı, OpenCart'ın HTML çıktısına göre uyarlandı. =================================================== */ /* =================================================== HERO — tek statik banner (slider yok, hız için) =================================================== */ .hero{ max-width:1280px; margin:20px auto; padding:0 24px; } .hero-banner{ position:relative; border-radius:8px; overflow:hidden; display:block; line-height:0; } .hero-banner img{ width:100%; height:auto; display:block; border-radius:8px; } /* Customizer "Metin + Buton + Link" modu seçilirse kullanılır */ .hero-banner-text{ background:linear-gradient(120deg, var(--brand-dark) 0%, var(--brand) 100%); min-height:260px; display:flex; align-items:center; padding:0 48px; } .hero-banner-text .hero-text{max-width:480px;} .hero-banner-text .hero-text h1{ color:#fff; font-size:32px; font-weight:800; margin:0 0 12px; line-height:1.2; } .hero-banner-text .hero-text p{ color:rgba(255,255,255,.9); font-size:15px; margin:0 0 22px; line-height:1.5; } .hero-banner-text .hero-cta{ display:inline-block; background:#fff; color:var(--brand-dark); text-decoration:none; font-weight:700; font-size:14px; padding:12px 26px; border-radius:4px; } @media (max-width: 900px){ .hero-banner-text{min-height:200px; padding:0 24px;} .hero-banner-text .hero-text h1{font-size:24px;} .hero-banner-text .hero-text p{font-size:13.5px;} } /* =================================================== KATEGORİ GRID — sade ikon + isim, ağır görsel yok =================================================== */ .cat-section{ max-width:1280px; margin:0 auto 32px; padding:0 24px; } .cat-section h2{ font-size:19px; font-weight:700; margin:0 0 16px; color:var(--ink); } .cat-grid{ display:grid; grid-template-columns:repeat(5, 1fr); gap:14px; } .cat-tile{ background:#fff; border:1px solid var(--line); border-radius:8px; padding:20px 12px; text-align:center; text-decoration:none; color:var(--ink); transition:border-color .15s, transform .15s; } .cat-tile:hover{ border-color:var(--brand); transform:translateY(-2px); } .cat-tile img{ width:34px; height:34px; margin-bottom:10px; loading:lazy; } .cat-svg{ width:34px; height:34px; margin-bottom:10px; color:var(--brand-dark); } .cat-tile-featured{ background:var(--bg-soft); border-color:var(--brand); } .cat-tile span{ display:block; font-size:12.5px; font-weight:600; line-height:1.3; } @media (max-width: 900px){ .cat-grid{grid-template-columns:repeat(3, 1fr);} .cat-tile{padding:14px 8px;} .cat-tile img, .cat-svg{width:28px; height:28px;} .cat-tile span{font-size:11.5px;} } @media (max-width: 480px){ .cat-grid{grid-template-columns:repeat(2, 1fr);} } /* =================================================== SON EKLENEN ÜRÜNLER — statik grid, karusel yok =================================================== */ .products-section{ max-width:1280px; margin:0 auto 40px; padding:0 24px; } .products-section h2{ font-size:19px; font-weight:700; margin:0 0 16px; color:var(--ink); } .section-head{ display:flex; align-items:baseline; justify-content:space-between; border-bottom:2px solid var(--line); padding-bottom:10px; margin-bottom:16px; } .section-head h2{ margin:0; padding:0; border:none; } .section-head .view-all{ font-size:13px; font-weight:600; color:var(--brand-dark); text-decoration:none; white-space:nowrap; } .section-head .view-all:hover{text-decoration:underline;} .product-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; } .product-card{ background:#fff; border:1px solid var(--line); border-radius:8px; overflow:hidden; display:flex; flex-direction:column; transition:border-color .15s, box-shadow .15s, transform .15s; } .product-card:hover{ border-color:var(--brand); box-shadow:0 8px 20px rgba(0,0,0,.08); transform:translateY(-3px); } .product-link{ text-decoration:none; color:var(--ink); display:block; } .pc-thumb{ position:relative; aspect-ratio:1/1; background:var(--bg-soft); display:flex; align-items:center; justify-content:center; color:var(--ink-soft); font-size:11px; text-align:center; padding:8px; } .product-badge{ position:absolute; top:10px; left:10px; font-size:10.5px; font-weight:700; letter-spacing:.3px; color:#fff; padding:4px 9px; border-radius:3px; text-transform:uppercase; z-index:1; } .product-badge.badge-new{background:var(--brand);} .product-badge.badge-sale{background:#D64545;} .product-info{padding:12px 14px 14px;} .product-info .p-name{ font-size:12.5px; font-weight:600; line-height:1.4; margin:0 0 6px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .p-price-row{ display:flex; align-items:baseline; gap:8px; margin-bottom:10px; } .product-info .p-price{ font-size:14px; font-weight:700; color:var(--brand-dark); } .product-info .p-price-old{ font-size:12px; color:var(--ink-soft); text-decoration:line-through; } .add-cart-btn{ display:block; width:calc(100% - 28px); margin:0 14px 14px; background:var(--bg-soft); border:1px solid var(--line); color:var(--ink); font-size:12px; font-weight:600; padding:9px 0; border-radius:5px; cursor:pointer; text-align:center; transition:background .15s, color .15s, border-color .15s; } .product-card:hover .add-cart-btn{ background:var(--brand); border-color:var(--brand); color:#fff; } .pc-thumb img{ width:100%; height:100%; object-fit:cover; } @media (max-width: 900px){ .product-grid{grid-template-columns:repeat(2, 1fr);} } /* =================================================== KATEGORİ / ÜRÜN LİSTESİ SAYFASI (archive-product.php) =================================================== */ /* =================================================== KATEGORİ LİSTELEME SAYFASI =================================================== */ .breadcrumb{ font-size:12.5px; color:var(--ink-soft); } .breadcrumb a{color:var(--ink-soft); text-decoration:none;} .breadcrumb a:hover{color:var(--brand-dark);} .breadcrumb span{color:var(--ink); font-weight:600;} .archive-header{ max-width:1280px; margin:10px auto 20px; padding:0 24px; } .archive-header h1{ font-size:24px; font-weight:800; margin:0 0 6px; } .archive-header .count{ font-size:13px; color:var(--ink-soft); } .archive-layout{ max-width:1280px; margin:0 auto 40px; padding:0 24px; display:grid; grid-template-columns:260px 1fr; gap:28px; align-items:start; } /* --- Sidebar filtreler --- */ .filter-box{ background:#fff; border:1px solid var(--line); border-radius:8px; padding:18px 18px 20px; margin-bottom:16px; } .filter-box h3{ font-size:13.5px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; margin:0 0 14px; padding-bottom:10px; border-bottom:1px solid var(--line); } .filter-price-inputs{ display:flex; align-items:center; gap:8px; margin-bottom:12px; } .filter-price-inputs input{ width:0; flex:1; padding:8px 10px; border:1px solid var(--line); border-radius:4px; font-size:12.5px; font-family:inherit; } .filter-apply{ width:100%; padding:9px 0; background:var(--brand); color:#fff; border:none; border-radius:4px; font-size:12.5px; font-weight:700; cursor:pointer; } .filter-apply:hover{background:var(--brand-dark);} .filter-cats{list-style:none; margin:0; padding:0;} .filter-cats li{margin-bottom:2px;} .filter-cats a{ display:flex; justify-content:space-between; gap:6px; padding:6px 4px; color:var(--ink); text-decoration:none; font-size:13px; } .filter-cats a:hover{color:var(--brand-dark);} .filter-cats a.active{color:var(--brand-dark); font-weight:700;} .filter-cats .f-count{color:var(--ink-soft); font-size:11.5px;} /* --- Kategori ağacı (Tree) --- */ .cat-tree{ list-style:none; margin:0; padding:0; } .cat-tree .cat-tree{ padding-left:14px; margin-top:2px; } .cat-tree-item{margin-bottom:1px;} .cat-tree-row{ display:flex; align-items:center; justify-content:space-between; gap:4px; border-radius:5px; } .cat-tree-link{ flex:1; display:flex; justify-content:space-between; gap:6px; padding:8px 10px; color:var(--ink); text-decoration:none; font-size:13px; border-radius:5px; } .cat-tree-link:hover{color:var(--brand-dark);} .cat-tree-link .f-count{color:var(--ink-soft); font-size:11.5px;} .cat-tree-toggle{ flex-shrink:0; width:26px; height:26px; margin-right:4px; border:none; background:none; color:var(--ink-soft); cursor:pointer; display:flex; align-items:center; justify-content:center; border-radius:50%; transition:transform .15s, background .15s; } .cat-tree-toggle:hover{background:var(--bg-soft);} .cat-tree-toggle svg{width:16px; height:16px;} .cat-tree-item.is-open > .cat-tree-row .cat-tree-toggle{transform:rotate(180deg);} /* Aktif (şu an gezilen) kategori satırı — koyu vurgu */ .cat-tree-item.is-active > .cat-tree-row{background:var(--ink);} .cat-tree-item.is-active > .cat-tree-row .cat-tree-link{color:#fff; font-weight:700;} .cat-tree-item.is-active > .cat-tree-row .cat-tree-link .f-count{color:rgba(255,255,255,.7);} .cat-tree-item.is-active > .cat-tree-row .cat-tree-toggle{color:#fff;} .cat-tree-item.is-active > .cat-tree-row .cat-tree-toggle:hover{background:rgba(255,255,255,.15);} .cat-tree-note{ font-size:12.5px; color:var(--ink-soft); line-height:1.6; margin:0 0 12px; } .filter-checkbox-list{list-style:none; margin:0; padding:0;} .filter-checkbox-list li{margin-bottom:9px;} .filter-checkbox-list label{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink); cursor:pointer; } .filter-checkbox-list input{accent-color:var(--brand);} /* --- Toolbar --- */ .archive-toolbar{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; background:#fff; border:1px solid var(--line); border-radius:8px; padding:12px 16px; margin-bottom:18px; font-size:12.5px; } .view-toggle{display:flex; gap:6px;} .view-toggle button{ width:32px; height:32px; border:1px solid var(--line); background:#fff; border-radius:5px; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--ink-soft); } .view-toggle button.active{ background:var(--brand); border-color:var(--brand); color:#fff; } .view-toggle svg{width:15px; height:15px;} .toolbar-right{display:flex; align-items:center; gap:10px;} .toolbar-right select{ padding:7px 10px; border:1px solid var(--line); border-radius:5px; font-size:12.5px; font-family:inherit; color:var(--ink); background:#fff; } /* --- Ürün grid (kategori/arama sayfalarında 3 sütun) --- */ .archive-product-grid .product-grid{grid-template-columns:repeat(3, 1fr);} /* --- Sayfalama --- */ .pagination{ display:flex; justify-content:center; gap:6px; margin-top:28px; } .pagination a, .pagination span{ min-width:34px; height:34px; padding:0 6px; border:1px solid var(--line); border-radius:5px; display:flex; align-items:center; justify-content:center; font-size:12.5px; text-decoration:none; color:var(--ink); } .pagination a:hover{border-color:var(--brand); color:var(--brand-dark);} .pagination .current{ background:var(--brand); border-color:var(--brand); color:#fff; font-weight:700; } @media (max-width: 900px){ .archive-layout{grid-template-columns:1fr;} .archive-product-grid .product-grid{grid-template-columns:repeat(2, 1fr);} .archive-header h1{font-size:20px;} } /* =================================================== ÜRÜN DETAY SAYFASI (single-product.php) =================================================== */ /* =================================================== ÜRÜN DETAY SAYFASI =================================================== */ .breadcrumb{ font-size:12.5px; color:var(--ink-soft); } .breadcrumb a{color:var(--ink-soft); text-decoration:none;} .breadcrumb a:hover{color:var(--brand-dark);} .breadcrumb span{color:var(--ink); font-weight:600;} .pd-wrap{ max-width:1280px; margin:16px auto 0; padding:0 24px; } .pd-layout{ display:grid; grid-template-columns:1fr 1fr; gap:44px; margin-top:18px; } /* --- Galeri --- */ .pd-gallery-main{ aspect-ratio:1/1; background:var(--bg-soft); border:1px solid var(--line); border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--ink-soft); font-size:13px; position:relative; overflow:hidden; } .pd-gallery-main .product-badge{position:absolute; top:14px; left:14px;} .pd-gallery-main img{ width:100%; height:100%; object-fit:contain; } .pd-thumbs{ display:flex; gap:10px; margin-top:10px; } .pd-thumb{ width:64px; height:64px; border:2px solid var(--line); border-radius:6px; background:var(--bg-soft); cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--ink-soft); font-size:9px; text-align:center; padding:0; overflow:hidden; } .pd-thumb img{width:100%; height:100%; object-fit:cover;} .pd-thumb.active{border-color:var(--brand);} /* --- Bilgi sütunu --- */ .pd-info .pd-brand{ font-size:12.5px; font-weight:700; color:var(--brand-dark); text-transform:uppercase; letter-spacing:.4px; } .pd-info h1{ font-size:24px; font-weight:800; margin:8px 0 12px; line-height:1.3; } .pd-stock{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--brand-dark); margin-bottom:16px; } .pd-stock::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--brand); } .pd-price-row{ display:flex; align-items:baseline; gap:12px; padding:16px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:20px; } .pd-price-row .pd-price{ font-size:26px; font-weight:800; color:var(--brand-dark); } .pd-price-row .pd-price-old{ font-size:16px; color:var(--ink-soft); text-decoration:line-through; } .pd-short-desc{ font-size:13.5px; line-height:1.7; color:var(--ink-soft); margin-bottom:22px; } .pd-actions{ display:flex; align-items:center; gap:12px; margin-bottom:22px; } .pd-qty{ display:flex; align-items:center; border:1px solid var(--line); border-radius:6px; overflow:hidden; } .pd-qty button{ width:38px; height:44px; border:none; background:var(--bg-soft); font-size:16px; cursor:pointer; color:var(--ink); } .pd-qty input{ width:44px; height:44px; border:none; border-left:1px solid var(--line); border-right:1px solid var(--line); text-align:center; font-size:14px; font-family:inherit; } .pd-add-to-cart{ flex:1; height:44px; background:var(--brand); color:#fff; border:none; border-radius:6px; font-size:14px; font-weight:700; cursor:pointer; } .pd-add-to-cart:hover{background:var(--brand-dark);} .pd-meta{ font-size:12.5px; color:var(--ink-soft); line-height:2; } .pd-meta b{color:var(--ink); font-weight:600;} .pd-meta a{color:var(--brand-dark); text-decoration:none;} /* --- Sekmeler --- */ .pd-tabs{ max-width:1280px; margin:44px auto 0; padding:0 24px; } .pd-tab-nav{ display:flex; gap:28px; border-bottom:1px solid var(--line); margin-bottom:22px; } .pd-tab-nav button{ background:none; border:none; padding:12px 0; font-size:13.5px; font-weight:700; color:var(--ink-soft); cursor:pointer; border-bottom:2px solid transparent; } .pd-tab-nav button.active{ color:var(--ink); border-bottom-color:var(--brand); } .pd-tab-content{ max-width:820px; font-size:13.5px; line-height:1.85; color:var(--ink-soft); } .pd-tab-content h3{ font-size:14px; color:var(--ink); margin:22px 0 8px; } .pd-tab-content h3:first-child{margin-top:0;} .pd-tab-content ul{margin:8px 0; padding-left:20px;} .pd-tab-content li{margin-bottom:4px;} /* --- İlgili ürünler (anasayfadaki product-card yeniden kullanılıyor) --- */ .pd-related{ max-width:1280px; margin:44px auto 0; padding:0 24px; } /* =================================================== SEPET SAYFASI (WooCommerce cart şablonu üzerine) =================================================== */ /* =================================================== SEPET SAYFASI =================================================== */ .breadcrumb{ font-size:12.5px; color:var(--ink-soft); } .breadcrumb a{color:var(--ink-soft); text-decoration:none;} .breadcrumb a:hover{color:var(--brand-dark);} .breadcrumb span{color:var(--ink); font-weight:600;} .cart-wrap{ margin-top:16px; margin-bottom:40px; } .cart-wrap h1{ font-size:24px; font-weight:800; margin:14px 0 22px; } .cart-layout{ display:grid; grid-template-columns:1fr 340px; gap:28px; align-items:start; } /* --- Ürün tablosu --- */ .cart-table{ background:#fff; border:1px solid var(--line); border-radius:8px; overflow:hidden; } .cart-row{ display:grid; grid-template-columns:72px 1fr auto auto auto; align-items:center; gap:16px; padding:16px 18px; border-bottom:1px solid var(--line); } .cart-row:last-child{border-bottom:none;} .cart-row.cart-head{ background:var(--bg-soft); font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; color:var(--ink-soft); padding:12px 18px; } .cart-thumb{ width:60px; height:60px; border-radius:6px; background:var(--bg-soft); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--ink-soft); font-size:9px; text-align:center; } .cart-name{font-size:13px; font-weight:600; line-height:1.4;} .cart-price{font-size:13px; color:var(--ink-soft); white-space:nowrap;} .cart-subtotal{font-size:13.5px; font-weight:700; color:var(--brand-dark); white-space:nowrap;} .cart-remove{ width:30px; height:30px; border:none; background:none; color:var(--ink-soft); cursor:pointer; border-radius:50%; display:flex; align-items:center; justify-content:center; } .cart-remove:hover{background:#FDECEC; color:#D64545;} .cart-remove svg{width:15px; height:15px;} /* Bu sayfada ürün detay sayfasındaki adet seçici (.pd-qty) yeniden kullanılıyor — ürün detay sayfasını etkilememesi için .cart-wrap ile kapsamlandırıldı */ .cart-wrap .pd-qty{ display:flex; align-items:center; border:1px solid var(--line); border-radius:6px; overflow:hidden; width:fit-content; } .cart-wrap .pd-qty button{ width:30px; height:34px; border:none; background:var(--bg-soft); font-size:14px; cursor:pointer; color:var(--ink); } .cart-wrap .pd-qty input{ width:36px; height:34px; border:none; border-left:1px solid var(--line); border-right:1px solid var(--line); text-align:center; font-size:13px; font-family:inherit; } .cart-actions-row{ display:flex; justify-content:space-between; align-items:center; padding:16px 18px; } .continue-shopping{ font-size:13px; color:var(--ink); text-decoration:none; font-weight:600; } .continue-shopping:hover{color:var(--brand-dark);} .coupon-box{ display:flex; gap:8px; } .coupon-box input{ padding:9px 12px; border:1px solid var(--line); border-radius:5px; font-size:12.5px; font-family:inherit; width:170px; } .coupon-box button{ padding:9px 16px; background:var(--bg-soft); border:1px solid var(--line); border-radius:5px; font-size:12.5px; font-weight:600; cursor:pointer; color:var(--ink); white-space:nowrap; } .coupon-box button:hover{border-color:var(--brand); color:var(--brand-dark);} /* --- Sipariş özeti --- */ .cart-summary{ background:#fff; border:1px solid var(--line); border-radius:8px; padding:20px 20px 22px; } .cart-summary h3{ font-size:14.5px; font-weight:700; margin:0 0 16px; padding-bottom:12px; border-bottom:1px solid var(--line); } .summary-row{ display:flex; justify-content:space-between; font-size:13px; margin-bottom:12px; color:var(--ink-soft); } .summary-row.total{ font-size:16px; font-weight:800; color:var(--ink); padding-top:12px; border-top:1px solid var(--line); margin-top:4px; } .summary-row.total span:last-child{color:var(--brand-dark);} .shipping-note{ font-size:11.5px; color:var(--brand-dark); background:var(--bg-soft); padding:8px 10px; border-radius:5px; margin-bottom:14px; } .checkout-btn{ display:block; width:100%; padding:13px 0; background:var(--brand); color:#fff; border:none; border-radius:6px; font-size:14px; font-weight:700; cursor:pointer; text-align:center; margin-top:16px; } .checkout-btn:hover{background:var(--brand-dark);} /* =================================================== SABİT SAYFA ŞABLONU (page.php) =================================================== */ /* =================================================== GENEL SABİT SAYFA ŞABLONU (page.php) Tüm "Sayfalar" (Όροι Χρήσης, Πληρωμές, Αποστολή, GDPR vb.) bu şablonu kullanacak — WordPress editöründen yazılan başlık/paragraf/liste otomatik bu stille görünecek. =================================================== */ .breadcrumb{ font-size:12.5px; color:var(--ink-soft); } .breadcrumb a{color:var(--ink-soft); text-decoration:none;} .breadcrumb a:hover{color:var(--brand-dark);} .breadcrumb span{color:var(--ink); font-weight:600;} .static-page{ max-width:1280px; margin:20px auto 50px; padding:0 24px; } .static-page .breadcrumb{ margin:0 0 14px; padding:0; } .page-card{ background:#fff; border:1px solid var(--line); border-radius:8px; padding:32px 40px 40px; } .page-card h1{ font-size:26px; font-weight:800; margin:0 0 26px; padding-bottom:16px; border-bottom:2px solid var(--line); } /* Gutenberg editöründen gelecek gövde içeriği */ .page-content{ font-size:14px; line-height:1.85; color:var(--ink); } .page-content h2{ font-size:18px; font-weight:700; margin:32px 0 12px; color:var(--ink); } .page-content h2:first-child{margin-top:0;} .page-content h3{ font-size:15px; font-weight:700; margin:22px 0 8px; } .page-content p{margin:0 0 14px; color:var(--ink-soft);} .page-content ul, .page-content ol{ margin:0 0 16px; padding-left:22px; color:var(--ink-soft); } .page-content li{margin-bottom:7px;} .page-content a{color:var(--brand-dark); text-decoration:underline;} .page-content strong{color:var(--ink); font-weight:700;} /* Ödeme/kargo gibi sayfalarda sık kullanılan "yöntem kartı" bileşeni */ .method-card{ display:flex; gap:14px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:8px; padding:16px 18px; margin-bottom:14px; } .method-card .method-icon{ width:38px; height:38px; flex-shrink:0; border-radius:8px; background:var(--bg-soft); color:var(--brand-dark); display:flex; align-items:center; justify-content:center; } .method-card .method-icon svg{width:20px; height:20px;} .method-card h3{margin:0 0 4px;} .method-card p{margin:0; font-size:13px;} .info-box{ background:var(--bg-soft); border-left:3px solid var(--brand); border-radius:0 6px 6px 0; padding:14px 16px; font-size:13px; color:var(--ink-soft); margin:20px 0; } @media (max-width: 900px){ .page-card{padding:24px 22px 30px;} .page-card h1{font-size:21px;} } /* =================================================== OPENCART'A ÖZEL EKLER (2. aşama) =================================================== */ :where(.cz) h1, :where(.cz) h2, :where(.cz) h3, :where(.cz) h4{font-family:inherit; color:var(--ink);} /* :where() = sıfır özgüllük; bileşenlerin kendi link renkleri her zaman öncelikli kalır */ :where(.cz) a{color:var(--brand-dark);} :where(.cz) a:hover, :where(.cz) a:focus{color:var(--brand); text-decoration:none;} /* Breadcrumb şeridi: Bootstrap ve OpenCart'ın .breadcrumb stillerini sıfırla */ .breadcrumb-bar .breadcrumb{ background:none; border:none; border-radius:0; list-style:none; margin:0 auto; padding:14px 24px; } .breadcrumb-bar .breadcrumb a{color:var(--ink-soft);} .breadcrumb-bar .breadcrumb a:hover{color:var(--brand-dark);} #cz-alerts .alert{margin:14px 0 0;} /* Butonlar */ .btn-cz{ display:inline-block; background:var(--brand); color:#fff !important; border:none; border-radius:6px; padding:11px 22px; font-size:13.5px; font-weight:700; cursor:pointer; text-decoration:none; font-family:inherit; } .btn-cz:hover{background:var(--brand-dark); color:#fff;} /* Ürün kartı — OpenCart görselleri beyaz zeminle kırpılmadan geldiği için contain */ .pc-thumb{background:#fff; border-bottom:1px solid var(--line);} .pc-thumb img{object-fit:contain;} .product-card{height:100%;} .product-card .product-link{flex:1;} .product-card .product-link:hover{color:var(--ink);} .add-cart-btn{font-family:inherit;} /* --- Liste sayfaları --- */ .archive-header h1{color:var(--ink);} .filter-toggle{display:none;} .archive-main{min-width:0;} .archive-toolbar label{margin:0; font-weight:500; color:var(--ink-soft); font-size:12.5px;} .toolbar-left{color:var(--ink-soft);} .toolbar-right{flex-wrap:wrap;} .filter-box .view-all{ display:inline-block; font-size:13px; font-weight:700; color:var(--brand-dark); } .cat-tree-link{color:var(--ink);} .subcat-box{ background:#fff; border:1px solid var(--line); border-radius:8px; padding:16px 18px; margin-bottom:18px; } .subcat-box h2{font-size:13.5px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; margin:0 0 12px;} .subcat-chips{display:flex; flex-wrap:wrap; gap:8px;} .subcat-chips a{ display:inline-block; padding:7px 12px; border:1px solid var(--line); border-radius:999px; background:var(--bg-soft); color:var(--ink); font-size:12.5px; font-weight:600; } .subcat-chips a:hover{border-color:var(--brand); color:var(--brand-dark);} .category-description{ display:flex; gap:20px; align-items:flex-start; margin-top:30px; padding:22px 24px; background:#fff; border:1px solid var(--line); border-radius:8px; } .category-description-image{width:100px; height:auto; border-radius:6px; flex-shrink:0;} .empty-state{ background:#fff; border:1px solid var(--line); border-radius:8px; padding:30px; text-align:center; } .empty-state p{color:var(--ink-soft); font-size:14px; margin:0 0 16px;} /* Sayfalama (OpenCart