/* ============================================================ Sandline Theme — Main Stylesheet Dark e-commerce theme for Sandline textile/garment brand ============================================================ */ /* CSS Variables — "Steel Atelier" palette Deep slate-navy backgrounds + warm coral/copper accent + cool ivory text. Different from the previous near-black + gold scheme. */ :root { --bg-primary: #0b1018; /* deep slate-navy */ --bg-secondary: #121925; --bg-tertiary: #1a2332; --bg-card: #161e2c; --bg-elevated: #1f2a3b; --text-primary: #eef2f8; /* cool ivory */ --text-secondary: #a8b3c7; /* slate-grey */ --text-muted: #6f7c92; --text-faint: #4a5468; --accent: #e07a5f; /* warm coral / copper */ --accent-hover: #ea9682; --accent-dark: #c25a3f; --accent-soft: rgba(224, 122, 95, 0.12); /* Secondary tint used by lookbook / category headers */ --accent-2: #6ec3c5; /* dusty teal — cool counterpoint */ --accent-2-soft: rgba(110, 195, 197, 0.12); --border: #232c3c; --border-light: #2f3a4e; --shadow-sm: 0 2px 8px rgba(0, 8, 24, 0.45); --shadow-md: 0 10px 30px rgba(0, 8, 24, 0.55); --shadow-lg: 0 22px 60px rgba(0, 8, 24, 0.65); --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-display: 'Inter', sans-serif; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 28px; --max-width: 1280px; --transition: 0.28s cubic-bezier(.4,.0,.2,1); } /* Reset / Base */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; /* Sticky header'ın yükseklik geçişi sırasında tarayıcının scroll-anchor mekanizması scrollY'yi otomatik düzeltip "header titreme" feedback loop'u tetikliyor. Bunu kapat. */ overflow-anchor: none; /* Mobile menu panel uses position:fixed and slides in from the right. Without overflow-x:hidden on the root, iOS Safari and some Android browsers let the user horizontally scroll the document by ~panel-width (≈92vw / 400px) — exposing the off-screen panel area. We close the gap on both html and body so the lock holds in every viewport mode. */ overflow-x: hidden; max-width: 100vw; } body { margin: 0; font-family: var(--font-sans); font-size: 16px; line-height: 1.6; color: var(--text-primary); background: var(--bg-primary); overflow-x: hidden; overflow-anchor: none; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: var(--accent); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--accent-hover); } button { font-family: inherit; cursor: pointer; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 700; line-height: 1.2; color: var(--text-primary); margin: 0 0 0.6em; } h1 { font-size: clamp(2rem, 5vw, 3.5rem); } h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); } h3 { font-size: clamp(1.25rem, 2.5vw, 1.6rem); } h4 { font-size: 1.15rem; } p { margin: 0 0 1em; } ul, ol { padding-left: 1.5em; } /* Layout */ .container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 24px; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--accent); color: #000; padding: 8px 16px; z-index: 9999; } .skip-link:focus { left: 0; } /* ============================================================ HEADER — "Atelier Luxe" Promo marquee + glass main bar + magnetic nav + search overlay ============================================================ */ .site-header { /* `position: sticky` was the original choice but stopped working once we added `overflow-x: hidden` on / (needed by the mobile-hero fix) — Safari and parts of Chrome treat any ancestor overflow other than `visible` as the sticky's scroll container and the element ceases to stick. Switch to `position: fixed` which is bullet-proof; we add `padding-top` to further down so content doesn't slip under it. */ position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: transparent; transition: background 0.4s ease; will-change: transform; transform: translateZ(0); isolation: isolate; } /* Reserve space under the fixed header so the hero / page content doesn't slide underneath it. 190px = promo bar (38px) + main shell (148px = padding 40px + logo 108px) + 4px buffer. When .scrolled the header collapses to ~80px but the body padding stays constant — fine, just a clean strip. We use a custom property so it can be tweaked from one place. */ :root { --site-header-height: 190px; } body { padding-top: var(--site-header-height); } @media (max-width: 768px) { :root { --site-header-height: 124px; } } /* === PROMO MARQUEE ============================================ */ .promo-bar { position: relative; overflow: hidden; background: linear-gradient(90deg, #0b1018 0%, #121925 35%, #1a2332 50%, #121925 65%, #0b1018 100%); border-bottom: 1px solid rgba(224, 122, 95, 0.18); color: var(--text-secondary); font-size: 12px; height: 38px; transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, border-color 0.3s ease; } .promo-bar::before, .promo-bar::after { content: ''; position: absolute; top: 0; bottom: 0; width: 100px; z-index: 2; pointer-events: none; } .promo-bar::before { left: 0; background: linear-gradient(90deg, #0b1018, transparent); } .promo-bar::after { right: 0; background: linear-gradient(270deg, #0b1018, transparent); } .promo-bar__track { display: inline-flex; align-items: center; height: 100%; white-space: nowrap; animation: promoMarquee 42s linear infinite; will-change: transform; } .promo-bar:hover .promo-bar__track { animation-play-state: paused; } .promo-bar__item { display: inline-flex; align-items: center; gap: 10px; padding: 0 28px; letter-spacing: 0.06em; color: var(--text-secondary); font-size: 12px; text-transform: uppercase; font-weight: 500; } .promo-bar__icon { display: inline-flex; color: var(--accent); opacity: 0.95; filter: drop-shadow(0 0 8px rgba(224, 122, 95, 0.4)); } .promo-bar__text { color: var(--text-secondary); } .promo-bar__diamond { color: var(--accent); opacity: 0.7; font-size: 8px; transform: translateY(-1px); margin-left: 18px; } @keyframes promoMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .site-header.scrolled .promo-bar { height: 0; opacity: 0; border-color: transparent; pointer-events: none; } /* === MAIN BAR (glass shell) =================================== */ /* Horizontal gradient: noticeably lighter on the LEFT (slate ≈ #2e3a4d muted blue-grey) so the black logo lands on a softer surface, then fades back to the deep navy on the right. The vertical depth still reads dark — overall theme intact, no obvious "plate" or halo. */ .header-shell { position: relative; /* Brighter left spotlight (~#7a8aa3) so the native-black logo lands on a clearly lit surface and reads instantly. Right side keeps the deep brand navy so the overall theme stays dark. */ background: linear-gradient(105deg, rgba(126, 142, 168, 0.95) 0%, rgba(96, 112, 138, 0.93) 14%, rgba(60, 74, 96, 0.92) 32%, rgba(28, 36, 50, 0.93) 60%, rgba(11, 16, 24, 0.95) 100%); backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%); /* No hairline border-bottom here — the decorative `.header-thread` running-stitch SVG already lives at the same spot and the user saw the two as a doubled line. */ border-bottom: 0; transition: background 0.35s ease, backdrop-filter 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; overflow: visible; } .site-header.scrolled .header-shell { /* Scroll state: brighten the left even more so the shrunken logo remains readable against the now-more-opaque shell. */ background: linear-gradient(105deg, rgba(112, 128, 154, 0.96) 0%, rgba(78, 92, 116, 0.95) 20%, rgba(40, 52, 70, 0.96) 50%, rgba(15, 21, 31, 0.97) 80%, rgba(7, 11, 18, 0.97) 100%); box-shadow: 0 12px 40px rgba(0, 8, 24, 0.55); /* border removed (see comment above) — scrolled state inherits border: 0. */ } /* Decorative corner ornaments — gizli (logo etrafındaki brand-corner yeterli) */ .header-ornament { display: none; } .header-shell__inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 20px 28px; min-height: 124px; z-index: 2; transition: min-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .site-header.scrolled .header-shell__inner { min-height: 80px; padding: 10px 28px; } /* === BRANDING (left) ========================================== */ .site-branding { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; isolation: isolate; } .site-branding a { position: relative; display: inline-flex; align-items: center; text-decoration: none; z-index: 2; } .site-branding .custom-logo, .site-branding img { max-height: 108px; width: auto; transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s ease, filter 0.4s ease; position: relative; z-index: 2; /* Logo stays its native black colour (brand requirement). No inversion. */ } /* Earlier we tried a halo and then a cream "plate" behind the logo — both stood out too much. New approach: leave the logo bare and instead subtly lighten the LEFT portion of the header shell where the logo sits, creating a natural spotlight without any obvious backdrop. See `.header-shell` rule below where the horizontal gradient is defined. */ .site-header.scrolled .site-branding .custom-logo, .site-header.scrolled .site-branding img { max-height: 62px; } .site-branding a:hover .custom-logo, .site-branding a:hover img { transform: translateY(-1px) scale(1.02); } .site-branding .site-title-link { font-size: 1.7rem; font-weight: 800; color: var(--text-primary); letter-spacing: 0.06em; text-transform: uppercase; } /* Logo glow halo (left) */ .brand-glow { position: absolute; left: -20%; top: 50%; width: 280px; height: 280px; transform: translateY(-50%); background: radial-gradient(circle at center, rgba(224, 122, 95, 0.30) 0%, rgba(224, 122, 95, 0.08) 40%, transparent 70%); filter: blur(32px); opacity: 0; pointer-events: none; transition: opacity 0.6s ease; z-index: 0; } .site-branding:hover .brand-glow { opacity: 1; } /* Brand corners — yeni layoutta kullanılmıyor */ .brand-corner { display: none; } /* === NAVIGATION (center) ====================================== */ .main-navigation { position: relative; display: flex; align-items: center; justify-content: center; flex: 1 1 auto; } .main-navigation .nav-menu { position: relative; list-style: none; margin: 0; padding: 6px; display: flex; gap: 0; align-items: center; border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 999px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.008)); backdrop-filter: blur(6px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 8px 24px rgba(0, 8, 24, 0.25); } .main-navigation .nav-menu > li { position: relative; z-index: 2; } .main-navigation .nav-menu > li > a { position: relative; display: inline-flex; align-items: center; gap: 6px; color: var(--text-primary); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; padding: 11px 18px; border-radius: 999px; transition: color 0.3s ease; white-space: nowrap; } .main-navigation .nav-menu > li.menu-item-has-children > a::after { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); margin-left: 4px; opacity: 0.7; transition: transform 0.3s ease; } /* Pill kapsam dışındayken aktif item görünür kalsın (beyaz default) — sadece pill üstüne geldiğinde metin koyu (kontrast) yapılır. */ .main-navigation .nav-menu > li.current-menu-item > a, .main-navigation .nav-menu > li.current-menu-parent > a, .main-navigation .nav-menu > li.current-menu-ancestor > a { color: var(--text-primary); } .main-navigation .nav-menu > li.is-pill-active > a { color: #0a0a0a; } /* Magnetic gold pill */ .nav-pill { position: absolute; top: 6px; left: 0; width: 0; height: calc(100% - 12px); border-radius: 999px; background: linear-gradient(135deg, #e7c987 0%, #e07a5f 50%, #c25a3f 100%); box-shadow: 0 4px 14px rgba(224, 122, 95, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.4); opacity: 0; pointer-events: none; z-index: 1; transform: translateX(0); transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), width 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease; } .nav-pill.is-visible { opacity: 1; } /* Submenu (dropdown) */ .main-navigation .nav-menu .sub-menu { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(8px); list-style: none; padding: 10px 0; margin: 0; background: linear-gradient(180deg, #1a2332 0%, #121925 100%); backdrop-filter: blur(20px); border: 1px solid rgba(224, 122, 95, 0.18); border-radius: 14px; min-width: 230px; opacity: 0; visibility: hidden; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 20px 50px rgba(0, 8, 24, 0.7), 0 0 0 1px rgba(224, 122, 95, 0.06); z-index: 100; } .main-navigation .nav-menu .sub-menu::before { content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 12px; height: 12px; background: #1a2332; border-left: 1px solid rgba(224, 122, 95, 0.18); border-top: 1px solid rgba(224, 122, 95, 0.18); } .main-navigation .nav-menu > li:hover > .sub-menu, .main-navigation .nav-menu > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .main-navigation .nav-menu .sub-menu li { display: block; } .main-navigation .nav-menu .sub-menu a { display: block; padding: 11px 22px; color: var(--text-secondary); font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: 0.02em; border-left: 2px solid transparent; transition: color 0.25s ease, background 0.25s ease, padding 0.25s ease, border-color 0.25s ease; } .main-navigation .nav-menu .sub-menu a:hover { color: var(--accent); background: rgba(224, 122, 95, 0.08); padding-left: 30px; border-left-color: var(--accent); } /* === HEADER TOOLS (right) ===================================== */ .header-tools { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .tool-btn { color: var(--text-primary); background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(255, 255, 255, 0.09); display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; padding: 0; overflow: hidden; } .tool-btn::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(224, 122, 95, 0.25), transparent 60%); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .tool-btn:hover { background: rgba(224, 122, 95, 0.08); border-color: rgba(224, 122, 95, 0.4); color: var(--accent); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(224, 122, 95, 0.18); } .tool-btn:hover::before { opacity: 1; } .tool-btn:active { transform: translateY(0); } .tool-btn svg { position: relative; z-index: 1; transition: transform 0.3s ease; } .tool-btn:hover svg { transform: scale(1.08); } .header-lang-wrap { display: inline-flex; align-items: center; padding: 0 10px; height: 42px; border-left: 1px solid rgba(255, 255, 255, 0.08); border-right: 1px solid rgba(255, 255, 255, 0.08); margin: 0 6px; } .header-cart { position: relative; overflow: visible; } .cart-count { position: absolute; top: -6px; right: -6px; z-index: 2; background: linear-gradient(135deg, #f0a48e 0%, #e07a5f 60%, #c25a3f 100%); color: #fff; font-size: 10px; font-weight: 800; min-width: 19px; height: 19px; border-radius: 10px; display: flex; align-items: center; justify-content: center; padding: 0 5px; border: 2px solid var(--bg-primary); line-height: 1; box-shadow: 0 2px 8px rgba(224, 122, 95, 0.55); animation: cartBadgeIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both; } @keyframes cartBadgeIn { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } } .cart-count[data-count="0"] { display: none; } .header-cart.is-bumped svg { animation: cartBump 0.5s ease; } @keyframes cartBump { 30% { transform: scale(1.18) rotate(-6deg); } 60% { transform: scale(0.96) rotate(4deg); } 100% { transform: scale(1.08); } } /* === Iridescent pearl "running stitch" thread ================= */ .header-thread { position: absolute; left: 0; right: 0; bottom: -1px; height: 8px; pointer-events: none; z-index: 3; overflow: hidden; } .header-thread__svg { width: 100%; height: 100%; display: block; } .header-thread__base { /* Base line removed — it sat directly under the running stitch and read as a second hairline. Only the animated stitches remain now. */ stroke: transparent; stroke-width: 0; } .header-thread__stitch { stroke: url(#header-thread-gradient); stroke-width: 1.6; stroke-dasharray: 16 8; stroke-dashoffset: 0; animation: stitchRun 6s linear infinite, threadHue 8s ease-in-out infinite; filter: drop-shadow(0 0 4px rgba(200, 215, 240, 0.65)) drop-shadow(0 0 10px rgba(170, 190, 230, 0.35)); } @keyframes stitchRun { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -240; } } @keyframes threadHue { 0%, 100% { filter: drop-shadow(0 0 4px rgba(200, 215, 240, 0.65)) drop-shadow(0 0 10px rgba(170, 190, 230, 0.35)); } 33% { filter: drop-shadow(0 0 4px rgba(230, 210, 240, 0.7)) drop-shadow(0 0 10px rgba(210, 180, 240, 0.4)); } 66% { filter: drop-shadow(0 0 4px rgba(200, 230, 235, 0.7)) drop-shadow(0 0 10px rgba(170, 220, 230, 0.4)); } } .site-header.scrolled .header-thread__stitch { stroke-dasharray: 20 6; stroke-width: 1.8; } /* === SEARCH OVERLAY =========================================== Background applied DIRECTLY to the parent overlay (and reinforced on the inner backdrop div). Both fully opaque so the page below is never visible. ============================================================ */ .header-search-overlay { position: fixed !important; inset: 0 !important; width: 100vw; height: 100vh; z-index: 1200; pointer-events: none; visibility: hidden; opacity: 0; isolation: isolate; background-color: #070a12 !important; background-image: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(224, 122, 95, 0.10), transparent 65%), radial-gradient(ellipse 80% 60% at 50% 100%, rgba(110, 195, 197, 0.05), transparent 70%), linear-gradient(180deg, #0b1018 0%, #060912 100%) !important; transition: opacity 0.35s ease, visibility 0s linear 0.35s; } .header-search-overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.35s ease, visibility 0s linear 0s; } /* Inner backdrop div — reinforcing fully-opaque layer so the page is never visible regardless of backdrop-filter support or stacking quirks. */ .header-search-overlay__backdrop { position: absolute !important; inset: 0 !important; width: 100%; height: 100%; z-index: 0; pointer-events: none; background-color: #070a12 !important; background-image: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(224, 122, 95, 0.10), transparent 65%), radial-gradient(ellipse 80% 60% at 50% 100%, rgba(110, 195, 197, 0.05), transparent 70%), linear-gradient(180deg, #0b1018 0%, #060912 100%) !important; } .header-search-overlay__panel { position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-start; justify-content: center; padding: 12vh 24px 24px; transform: translateY(-30px); transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); } .header-search-overlay.is-open .header-search-overlay__panel { transform: translateY(0); } .header-search-overlay__close { position: absolute; top: 28px; right: 28px; width: 52px; height: 52px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--text-primary); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; } .header-search-overlay__close:hover { background: var(--accent); border-color: var(--accent); color: #0a0a0a; transform: rotate(90deg); box-shadow: 0 6px 24px rgba(224, 122, 95, 0.45); } .header-search-overlay__inner { width: 100%; max-width: 760px; text-align: center; } .header-search-overlay__eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; padding: 6px 16px; border: 1px solid rgba(224, 122, 95, 0.35); border-radius: 999px; background: rgba(224, 122, 95, 0.06); margin-bottom: 18px; } .header-search-overlay__title { font-family: var(--font-display); font-size: clamp(1.6rem, 4vw, 2.8rem); font-weight: 700; color: var(--text-primary); margin: 0 0 28px; letter-spacing: 0.01em; } .header-search-overlay__form { position: relative; display: flex; align-items: center; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(224, 122, 95, 0.3); border-radius: 999px; padding: 6px 6px 6px 22px; margin-bottom: 24px; transition: border-color 0.3s ease, box-shadow 0.3s ease; } .header-search-overlay__form:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(224, 122, 95, 0.12), 0 12px 36px rgba(0, 0, 0, 0.5); } .header-search-overlay__icon { color: var(--accent); display: inline-flex; flex-shrink: 0; } .header-search-overlay__input { flex: 1; background: transparent; border: 0; outline: 0; color: var(--text-primary); font-size: 1.05rem; font-family: inherit; padding: 18px 16px; letter-spacing: 0.02em; } .header-search-overlay__input::placeholder { color: var(--text-muted); } .header-search-overlay__submit { display: inline-flex; align-items: center; gap: 8px; padding: 14px 26px; background: linear-gradient(135deg, #e7c987 0%, #e07a5f 50%, #c25a3f 100%); color: #0a0a0a; border: 0; border-radius: 999px; font-family: inherit; font-weight: 700; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: transform 0.25s ease, box-shadow 0.25s ease; flex-shrink: 0; } .header-search-overlay__submit:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(224, 122, 95, 0.5); } .header-search-overlay__suggest { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-bottom: 18px; } .header-search-overlay__suggest-label { color: var(--text-muted); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; margin-right: 6px; } .header-search-overlay__chip { display: inline-flex; align-items: center; padding: 8px 16px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 999px; color: var(--text-secondary); font-size: 12px; font-weight: 500; background: rgba(255, 255, 255, 0.02); transition: all 0.25s ease; text-decoration: none; } .header-search-overlay__chip:hover { color: var(--accent); border-color: rgba(224, 122, 95, 0.4); background: rgba(224, 122, 95, 0.08); transform: translateY(-1px); } .header-search-overlay__hint { color: var(--text-muted); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 10px; } .header-search-overlay__hint kbd { display: inline-block; padding: 3px 8px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 4px; color: var(--text-primary); font-family: var(--font-sans); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; margin-right: 6px; } /* === Live AJAX search results === */ .header-search-results { margin-top: 14px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; overflow: hidden; max-height: 52vh; display: flex; flex-direction: column; opacity: 0; transform: translateY(-4px); transition: opacity 0.2s ease, transform 0.2s ease; } .header-search-results.is-visible { opacity: 1; transform: translateY(0); } .header-search-results__status { padding: 14px 18px; color: var(--text-muted); font-size: 13px; letter-spacing: 0.04em; } .header-search-results__list { list-style: none; margin: 0; padding: 4px; overflow-y: auto; flex: 1 1 auto; scrollbar-width: thin; } .header-search-results__list::-webkit-scrollbar { width: 6px; } .header-search-results__list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; } .header-search-results__item { margin: 0; } .header-search-results__link { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 10px; color: var(--text-primary); text-decoration: none; transition: background 0.15s ease, transform 0.15s ease; } .header-search-results__link:hover, .header-search-results__link.is-active, .header-search-results__link:focus-visible { background: rgba(224, 122, 95, 0.10); outline: none; } .header-search-results__thumb { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 8px; overflow: hidden; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06); display: flex; align-items: center; justify-content: center; } .header-search-results__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .header-search-results__noimg { width: 22px; height: 22px; border-radius: 50%; background: rgba(224, 122, 95, 0.25); display: block; } .header-search-results__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; } .header-search-results__title { font-size: 14px; font-weight: 600; color: var(--text-primary); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .header-search-results__price { font-size: 13px; color: var(--accent); line-height: 1; } .header-search-results__price del { color: var(--text-muted); opacity: 0.7; margin-right: 6px; } .header-search-results__price ins { text-decoration: none; font-weight: 600; } .header-search-results__viewall { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px; background: rgba(224, 122, 95, 0.08); border-top: 1px solid rgba(255, 255, 255, 0.06); color: var(--accent); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; transition: background 0.15s ease; } .header-search-results__viewall:hover { background: rgba(224, 122, 95, 0.16); } @media (max-width: 768px) { .header-search-results { max-height: 48vh; } .header-search-results__thumb { flex: 0 0 44px; width: 44px; height: 44px; } .header-search-results__title { font-size: 13px; white-space: normal; } } /* === Language switcher (topbar) — TranslatePress v3 shortcode === */ .lang-switcher { display: inline-flex; align-items: center; position: relative; } .lang-switcher .trp-shortcode-switcher__wrapper, .lang-switcher .trp-language-switcher-container, .lang-switcher .trp-floater-ls { display: inline-flex; position: relative; } /* Override TP inline CSS variables for dark theme */ .lang-switcher .trp-shortcode-switcher__wrapper { --bg: transparent !important; --bg-hover: rgba(224, 122, 95, 0.12) !important; --text: #d8d8d8 !important; --text-hover: #e07a5f !important; --border: 1px solid rgba(255, 255, 255, 0.14) !important; --border-width: 1px !important; --border-color: rgba(255, 255, 255, 0.14) !important; --border-radius: 6px !important; --flag-radius: 3px !important; --flag-size: 18px !important; --aspect-ratio: 4/3 !important; --font-size: 12px !important; --transition-duration: 0.25s !important; } /* Switcher containers */ .lang-switcher .trp-shortcode-anchor, .lang-switcher .trp-shortcode-overlay { background: transparent !important; } /* Anchor — sadece layout için (TP overlay'i bunun üstüne render ediyor) */ .lang-switcher .trp-shortcode-anchor .trp-current-language-item__wrapper { background: transparent !important; border: 1px solid transparent !important; border-radius: 6px !important; padding: 6px 10px !important; min-width: 0 !important; box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; } /* Overlay — görünen ve etkileşimli buton */ .lang-switcher .trp-shortcode-overlay .trp-current-language-item__wrapper { background: rgba(255, 255, 255, 0.02) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; border-radius: 6px !important; padding: 6px 10px !important; transition: all 0.25s ease !important; cursor: pointer; display: inline-flex !important; align-items: center !important; gap: 8px !important; box-sizing: border-box !important; } .lang-switcher .trp-shortcode-overlay .trp-current-language-item__wrapper:hover, .lang-switcher .trp-shortcode-overlay .trp-current-language-item__wrapper[aria-expanded="true"] { background: rgba(224, 122, 95, 0.1) !important; border-color: rgba(224, 122, 95, 0.4) !important; } /* Each language item (in anchor + dropdown) */ .lang-switcher .trp-language-item { background: transparent !important; color: #d8d8d8 !important; padding: 4px 6px !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0.02em !important; border-radius: 4px !important; transition: color 0.2s ease, background 0.2s ease !important; } .lang-switcher .trp-language-item__current, .lang-switcher .trp-shortcode-anchor .trp-language-item { color: var(--text-primary) !important; padding: 0 !important; } .lang-switcher .trp-current-language-item__wrapper:hover .trp-language-item { color: #e07a5f !important; } /* Flag */ .lang-switcher .trp-flag-image { width: 18px !important; height: 14px !important; border-radius: 2px !important; object-fit: cover !important; display: inline-block !important; flex-shrink: 0; box-shadow: 0 1px 2px rgba(0,0,0,0.3); } /* Caret arrow */ .lang-switcher .trp-shortcode-arrow { width: 12px !important; height: 12px !important; margin-left: 4px; color: #888 !important; transition: transform 0.25s ease, color 0.25s ease !important; } .lang-switcher .trp-shortcode-arrow path { stroke: currentColor !important; } .lang-switcher .trp-current-language-item__wrapper:hover .trp-shortcode-arrow { color: #e07a5f !important; transform: rotate(180deg); } /* Anchor (in-flow, inert) — görünmez yap, sadece layout için */ .lang-switcher .trp-shortcode-anchor { visibility: hidden !important; pointer-events: none !important; } /* Dropdown list — KAPALIYKEN tam görünmez (hidden attribute respect) */ .lang-switcher .trp-switcher-dropdown-list[hidden], .lang-switcher .trp-switcher-dropdown-list[inert] { display: none !important; } /* Dropdown list — AÇIKKEN — sadece görsel override, TP pozisyonuna dokunma */ .lang-switcher .trp-switcher-dropdown-list { background: #161616 !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: 8px !important; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.3) !important; padding: 6px !important; min-width: 160px; z-index: 1100; margin-top: 6px !important; } /* Combobox border-radius temiz */ .lang-switcher .trp-shortcode-overlay .trp-current-language-item__wrapper { border-radius: 6px !important; } .lang-switcher .trp-switcher-dropdown-list .trp-language-item { background: transparent !important; padding: 8px 12px !important; border-radius: 5px !important; color: #d8d8d8 !important; text-decoration: none !important; } .lang-switcher .trp-switcher-dropdown-list .trp-language-item:hover { background: rgba(224, 122, 95, 0.12) !important; color: #e07a5f !important; } .lang-switcher .trp-language-item-name { font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0.03em !important; line-height: 1.2 !important; } /* Mobile toggle */ .mobile-toggle { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; } .mobile-toggle span { display: block; width: 22px; height: 2px; background: var(--text-primary); border-radius: 2px; transition: all var(--transition); } .mobile-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .mobile-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .mobile-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ============================================================ MOBILE MENU PANEL — "Atelier" slate-navy drawer ============================================================ */ .mobile-menu-panel { /* Pinned to the right edge; we slide it off-screen with transform. Using `right: -100%` (the old approach) puts the panel inside the document layout flow → user can horizontally scroll to it. Transform is purely visual, so the document never grows wider than the viewport. */ position: fixed; top: 0; right: 0; width: min(92vw, 400px); height: 100vh; height: 100dvh; max-width: 100vw; transform: translateX(100%); background: radial-gradient(800px 600px at 0% 0%, rgba(224, 122, 95, 0.06), transparent 60%), radial-gradient(700px 700px at 100% 100%, rgba(110, 195, 197, 0.05), transparent 60%), linear-gradient(180deg, #0f1626 0%, #0b1018 60%, #080d15 100%); padding: 0; transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1), box-shadow 0.45s ease; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; z-index: 1100; box-shadow: -30px 0 60px rgba(0, 8, 24, 0.6); display: flex; flex-direction: column; border-left: 1px solid rgba(255, 255, 255, 0.06); will-change: transform; } .mobile-menu-panel.open { transform: translateX(0); } /* Decorative top-right accent glow */ .mobile-menu-panel::after { content: ''; position: absolute; top: -120px; right: -120px; width: 280px; height: 280px; background: radial-gradient(circle at center, rgba(224, 122, 95, 0.18) 0%, transparent 70%); filter: blur(36px); pointer-events: none; } /* === Head (logo + close) === */ .mobile-menu-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); flex-shrink: 0; position: relative; z-index: 1; } .mobile-menu-brand { display: inline-flex; align-items: center; flex: 1 1 auto; min-width: 0; max-width: calc(100% - 70px); /* `overflow: hidden` used to be here but it clipped the glow halo behind the logo and made the backlight invisible. The logo image itself already has `max-width: 100%` so it can't overflow on its own — letting the halo escape the box is exactly what we want. */ overflow: visible; position: relative; isolation: isolate; } .mobile-menu-brand img { max-height: 38px; width: auto; max-width: 100%; object-fit: contain; position: relative; z-index: 2; } /* Mobile drawer: bright slate band at the top — same treatment as the header so the black logo reads instantly when the menu opens. */ .mobile-menu-brand::before { content: none; } .mobile-menu-head { background: linear-gradient(180deg, rgba(150, 165, 188, 0.92) 0%, rgba(126, 142, 168, 0.60) 50%, rgba(78, 92, 112, 0.20) 85%, transparent 100%); } .mobile-close { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--text-primary); width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; position: relative; overflow: hidden; padding: 0; flex-shrink: 0; margin-left: 12px; } .mobile-close::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at center, var(--accent) 0%, transparent 70%); opacity: 0; transition: opacity 0.3s ease; border-radius: 50%; } .mobile-close svg { position: relative; z-index: 1; width: 20px; height: 20px; stroke-width: 2.4; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .mobile-close:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: rotate(90deg); box-shadow: 0 6px 20px rgba(224, 122, 95, 0.45); } .mobile-close:hover::before { opacity: 0.18; } .mobile-close:active { transform: rotate(90deg) scale(0.94); } .mobile-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* === Quick action tiles — search / account / cart === */ .mobile-menu-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 18px 22px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); position: relative; z-index: 1; } .mobile-quick-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 14px 6px; min-height: 96px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 14px; color: var(--text-primary); font-family: inherit; font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; text-align: center; text-decoration: none; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; word-break: normal; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; } .mobile-quick-tile::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle at center, rgba(224, 122, 95, 0.25) 0%, transparent 60%); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; } .mobile-quick-tile:hover, .mobile-quick-tile:focus-visible { background: linear-gradient(180deg, rgba(224, 122, 95, 0.12), rgba(224, 122, 95, 0.04)); border-color: rgba(224, 122, 95, 0.45); color: var(--accent); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 8, 24, 0.4), 0 0 0 1px rgba(224, 122, 95, 0.2); } .mobile-quick-tile:hover::before { opacity: 1; } .mobile-quick-tile:active { transform: translateY(0); } .mobile-quick-tile__icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: rgba(224, 122, 95, 0.08); border: 1px solid rgba(224, 122, 95, 0.2); color: var(--accent); transition: all 0.3s ease; } .mobile-quick-tile:hover .mobile-quick-tile__icon { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 4px 12px rgba(224, 122, 95, 0.4); } .mobile-quick-tile__label { line-height: 1.25; max-width: 100%; display: block; white-space: normal; text-wrap: balance; } .mobile-quick-tile__badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: linear-gradient(135deg, #f0a48e 0%, #e07a5f 60%, #c25a3f 100%); color: #fff; font-size: 10px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; border: 2px solid #0f1626; box-shadow: 0 2px 6px rgba(224, 122, 95, 0.5); } /* === Menu section === */ .mobile-menu-section { padding: 20px 0 8px; flex: 1; position: relative; z-index: 1; } .mobile-menu-section__label { display: block; padding: 0 22px 12px; color: var(--text-muted); font-size: 10px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; } .mobile-menu-list { list-style: none; margin: 0; padding: 0; } .mobile-menu-list > li { border-bottom: 1px solid rgba(255, 255, 255, 0.04); position: relative; } .mobile-menu-list > li:last-child { border-bottom: none; } .mobile-menu-list > li > a { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 22px; color: var(--text-primary); font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .mobile-menu-list > li > a::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%) scaleY(0); width: 3px; height: 60%; background: linear-gradient(180deg, #f0a48e, #e07a5f, #c25a3f); border-radius: 2px; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); transform-origin: center; } .mobile-menu-list > li > a::after { content: ''; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: rotate(45deg); opacity: 0.4; transition: opacity 0.3s ease, transform 0.3s ease; } .mobile-menu-list > li > a:hover, .mobile-menu-list > li.current-menu-item > a, .mobile-menu-list > li.current-menu-parent > a { color: var(--accent); background: linear-gradient(90deg, rgba(224, 122, 95, 0.10), transparent 80%); padding-left: 30px; } .mobile-menu-list > li > a:hover::before, .mobile-menu-list > li.current-menu-item > a::before, .mobile-menu-list > li.current-menu-parent > a::before { transform: translateY(-50%) scaleY(1); } .mobile-menu-list > li > a:hover::after { opacity: 1; transform: rotate(45deg) translate(3px, -3px); } .mobile-menu-list .sub-menu { list-style: none; padding: 0; margin: 0; background: rgba(0, 8, 24, 0.35); border-top: 1px solid rgba(255, 255, 255, 0.04); } .mobile-menu-list .sub-menu a { display: block; padding: 12px 22px 12px 42px; color: var(--text-secondary); font-size: 13px; font-weight: 500; letter-spacing: 0.04em; text-transform: none; text-decoration: none; transition: all var(--transition); position: relative; } .mobile-menu-list .sub-menu a::before { content: ''; position: absolute; left: 28px; top: 50%; width: 6px; height: 1px; background: var(--text-muted); transform: translateY(-50%); transition: width 0.3s ease, background 0.3s ease; } .mobile-menu-list .sub-menu a:hover { color: var(--accent); padding-left: 52px; background: rgba(224, 122, 95, 0.06); } .mobile-menu-list .sub-menu a:hover::before { width: 12px; background: var(--accent); } /* === Lang switcher block === */ .mobile-menu-lang { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 22px; border-top: 1px solid rgba(255, 255, 255, 0.05); border-bottom: 1px solid rgba(255, 255, 255, 0.05); background: linear-gradient(90deg, rgba(255, 255, 255, 0.025), transparent); position: relative; z-index: 1; } .mobile-menu-lang-label { color: var(--text-secondary); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; } .lang-switcher--inmenu { display: inline-flex; align-items: center; } /* === Footer === */ .mobile-menu-foot { padding: 20px 22px 24px; background: linear-gradient(180deg, transparent 0%, rgba(0, 8, 24, 0.4) 100%); display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; position: relative; z-index: 1; } .mobile-foot-link { display: inline-flex; align-items: center; gap: 10px; color: var(--text-secondary); font-size: 13px; font-weight: 500; text-decoration: none; transition: color var(--transition); } .mobile-foot-link__icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: rgba(224, 122, 95, 0.1); border: 1px solid rgba(224, 122, 95, 0.22); color: var(--accent); flex-shrink: 0; } .mobile-foot-link:hover { color: var(--accent); } .mobile-foot-meta { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; padding-top: 4px; } .mobile-foot-meta__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: mobileFootPulse 2.6s ease-in-out infinite; } @keyframes mobileFootPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(224, 122, 95, 0.55); } 50% { box-shadow: 0 0 0 6px rgba(224, 122, 95, 0); } } /* Mobile menu overlay backdrop */ .mobile-menu-panel.open::before { content: ''; position: fixed; inset: 0; background: rgba(4, 8, 16, 0.78); z-index: -1; backdrop-filter: blur(8px) saturate(120%); -webkit-backdrop-filter: blur(8px) saturate(120%); } /* Responsive */ @media (max-width: 1180px) { .header-shell__inner { gap: 20px; padding: 18px 22px; min-height: 110px; } .main-navigation .nav-menu > li > a { padding: 10px 14px; font-size: 12px; letter-spacing: 0.1em; } .site-branding .custom-logo, .site-branding img { max-height: 92px; } } @media (max-width: 1024px) { .main-navigation { display: none; } .mobile-toggle { display: flex; } .header-shell__inner { min-height: 90px; padding: 12px 20px; } .site-branding .custom-logo, .site-branding img { max-height: 70px; } .site-header.scrolled .site-branding .custom-logo, .site-header.scrolled .site-branding img { max-height: 52px; } .header-lang-wrap { margin: 0 4px; padding: 0 6px; border-left-color: rgba(255, 255, 255, 0.05); border-right-color: rgba(255, 255, 255, 0.05); } } /* Tabletten küçük ekranlarda promo bar tamamen gizli */ @media (max-width: 1024px) { .promo-bar { display: none; } } @media (max-width: 768px) { .header-shell__inner { min-height: 78px; padding: 10px 14px; gap: 12px; } .site-branding .custom-logo, .site-branding img { max-height: 58px; } .site-header.scrolled .site-branding .custom-logo, .site-header.scrolled .site-branding img { max-height: 46px; } .tool-btn { width: 40px; height: 40px; border-radius: 10px; } .header-tools { gap: 4px; } .header-lang-wrap { display: none; } .header-search-overlay__panel { padding-top: 10vh; } .header-search-overlay__close { top: 18px; right: 18px; width: 44px; height: 44px; } .header-search-overlay__form { padding: 4px 4px 4px 16px; } .header-search-overlay__input { font-size: 0.95rem; padding: 14px 10px; } .header-search-overlay__submit { padding: 12px 18px; font-size: 11px; } .header-search-overlay__submit span { display: none; } } @media (max-width: 480px) { .header-account { display: none; } .tool-search-trigger { display: none; } .mobile-menu-panel { width: 100vw; } } /* ============================================================ BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 32px; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; border-radius: var(--radius-sm); border: 1px solid transparent; transition: all var(--transition); cursor: pointer; text-decoration: none; line-height: 1; } .btn-primary { background: var(--accent); color: #000; } .btn-primary:hover { background: var(--accent-hover); color: #000; transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn-outline { background: transparent; color: var(--text-primary); border-color: var(--text-primary); } .btn-outline:hover { background: var(--text-primary); color: var(--bg-primary); } .btn-sm { padding: 10px 20px; font-size: 12px; } /* ============================================================ HERO (Front Page) — Professional animated dark hero ============================================================ */ .hero { position: relative; min-height: 88vh; display: flex; align-items: center; background: radial-gradient(1200px 600px at 80% 10%, rgba(224,122,95,0.10), transparent 60%), radial-gradient(900px 500px at 10% 90%, rgba(224,122,95,0.06), transparent 65%), linear-gradient(135deg, #141414 0%, #0a0a0a 55%, #050505 100%); background-size: cover; background-position: center; color: var(--text-primary); padding: 120px 0 100px; overflow: hidden; isolation: isolate; } .hero--has-image::before { content: ""; position: absolute; inset: 0; background: inherit; background-image: inherit; background-size: cover; background-position: center; transform: scale(1.08); animation: heroKenBurns 22s ease-in-out infinite alternate; z-index: 0; opacity: 0.55; } .hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.85) 70%, rgba(5,5,5,0.96) 100%), linear-gradient(90deg, rgba(10,10,10,0.7) 0%, rgba(10,10,10,0.15) 60%, rgba(10,10,10,0) 100%); z-index: 1; } /* Decorative grid */ .hero-bg-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 40%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 40%, transparent 80%); z-index: 1; opacity: 0.7; pointer-events: none; } /* Soft glows */ .hero-bg-glow { position: absolute; width: 520px; height: 520px; border-radius: 50%; filter: blur(110px); z-index: 1; pointer-events: none; will-change: transform; } .hero-bg-glow--1 { top: -120px; right: -140px; background: radial-gradient(circle, rgba(224,122,95,0.35), transparent 70%); animation: heroGlowFloat 14s ease-in-out infinite alternate; } .hero-bg-glow--2 { bottom: -160px; left: -120px; background: radial-gradient(circle, rgba(120,90,40,0.30), transparent 70%); animation: heroGlowFloat 18s ease-in-out -6s infinite alternate-reverse; } /* Floating geometric shapes */ .hero-shapes { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .hero-shape { position: absolute; display: block; border: 1px solid rgba(224,122,95,0.25); border-radius: 4px; opacity: 0.6; } .hero-shape--1 { width: 140px; height: 140px; top: 18%; right: 8%; transform: rotate(18deg); animation: heroFloat 12s ease-in-out infinite; } .hero-shape--2 { width: 80px; height: 80px; bottom: 22%; right: 22%; border-color: rgba(224,122,95,0.18); border-radius: 50%; animation: heroFloat 9s ease-in-out -3s infinite reverse; } .hero-shape--3 { width: 60px; height: 60px; top: 26%; left: 6%; border-color: rgba(245,245,245,0.10); transform: rotate(45deg); animation: heroFloat 15s ease-in-out -5s infinite; } /* Content */ .hero-content { position: relative; z-index: 2; /* Inherit container's max-width so the left edge aligns with the header logo */ } /* Eyebrow */ .hero-eyebrow { display: flex; align-items: center; gap: 16px; font-size: 11px; letter-spacing: 0.32em; color: var(--accent); margin: 0 0 32px; font-weight: 600; text-transform: uppercase; opacity: 0; transform: translateY(20px); animation: heroFadeUp 0.8s 0.15s ease-out forwards; } .hero-eyebrow-line { display: inline-block; width: 56px; height: 1px; background: linear-gradient(90deg, var(--accent), transparent); transform-origin: left; animation: heroLineGrow 1s 0.25s ease-out backwards; } /* Title */ .hero-title { font-size: clamp(2rem, 4.4vw, 3.5rem); line-height: 1.1; margin: 0 0 28px; font-weight: 700; letter-spacing: -0.025em; max-width: 860px; } .hero-title-line { display: block; opacity: 0; transform: translateY(24px); animation: heroFadeUp 0.9s ease-out forwards; } .hero-title-line:nth-child(1) { animation-delay: 0.3s; } .hero-title-line:nth-child(2) { animation-delay: 0.55s; } .hero-title-accent { font-style: normal; background: linear-gradient(135deg, var(--accent) 0%, #f0a48e 50%, var(--accent) 100%); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: heroShimmer 4s linear infinite; } /* Typewriter line */ .hero-title-line--type { display: flex; align-items: baseline; min-height: 1.15em; color: var(--accent); margin-top: 0.1em; } .hero-typer { display: inline-block; white-space: pre; background: linear-gradient(135deg, var(--accent) 0%, #f0a48e 50%, var(--accent) 100%); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: heroShimmer 5s linear infinite; } .hero-caret { display: inline-block; width: 3px; height: 0.95em; margin-left: 6px; background: var(--accent); border-radius: 1px; transform: translateY(0.1em); animation: heroCaretBlink 0.9s steps(2, start) infinite; } @keyframes heroCaretBlink { to { opacity: 0; } } /* Subtitle */ .hero-subtitle { font-size: clamp(0.95rem, 1.15vw, 1.1rem); line-height: 1.7; color: var(--text-secondary); max-width: 560px; margin: 0 0 44px; opacity: 0; transform: translateY(20px); animation: heroFadeUp 0.9s 0.6s ease-out forwards; } /* Actions */ .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; opacity: 0; transform: translateY(20px); animation: heroFadeUp 0.9s 0.75s ease-out forwards; } /* Hero primary CTA — refined, no arrow */ .btn-hero { position: relative; overflow: hidden; padding: 16px 36px; font-size: 13px; font-weight: 600; letter-spacing: 0.12em; color: #0a0a0a; background: linear-gradient(180deg, #d6b87a 0%, var(--accent) 55%, #b69458 100%); border: 1px solid rgba(255,255,255,0.18); border-radius: var(--radius-sm); box-shadow: 0 1px 0 rgba(255,255,255,0.35) inset, 0 -1px 0 rgba(0,0,0,0.18) inset, 0 10px 24px -10px rgba(224,122,95,0.45), 0 2px 0 rgba(0,0,0,0.3); transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s ease, color 0.35s ease; isolation: isolate; } .btn-hero .btn-label { position: relative; z-index: 2; } .btn-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #e1c388 0%, #e07a5f 50%, #ac8b50 100%); opacity: 0; transition: opacity 0.35s ease; z-index: 1; } .btn-hero::after { content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.5) 50%, transparent 100%); transform: skewX(-20deg); transition: left 0.8s cubic-bezier(0.22,1,0.36,1); z-index: 1; pointer-events: none; } .btn-hero:hover { color: #0a0a0a; transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,0.45) inset, 0 -1px 0 rgba(0,0,0,0.22) inset, 0 18px 36px -12px rgba(224,122,95,0.55), 0 3px 0 rgba(0,0,0,0.3); } .btn-hero:hover::before { opacity: 1; } .btn-hero:hover::after { left: 120%; } .btn-hero:active { transform: translateY(0); box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 6px 16px -8px rgba(224,122,95,0.4); } .btn-hero:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* Hero ghost CTA — refined outline */ .btn-hero-ghost { padding: 16px 32px; font-size: 13px; font-weight: 600; letter-spacing: 0.12em; color: var(--text-primary); background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.18); border-radius: var(--radius-sm); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: all 0.3s ease; } .btn-hero-ghost:hover { color: var(--accent); background: rgba(224,122,95,0.08); border-color: rgba(224,122,95,0.55); transform: translateY(-2px); } /* Stats */ .hero-stats { display: flex; flex-wrap: wrap; gap: 56px; margin-top: 80px; padding-top: 36px; border-top: 1px solid rgba(255,255,255,0.08); max-width: 720px; opacity: 0; transform: translateY(20px); animation: heroFadeUp 0.9s 0.95s ease-out forwards; } .hero-stat { display: flex; flex-direction: column; gap: 8px; } .hero-stat-num { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 700; line-height: 1; color: var(--text-primary); letter-spacing: -0.02em; } .hero-stat-suffix { color: var(--accent); margin-left: 2px; } .hero-stat-label { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); font-weight: 500; } /* Hero animations */ @keyframes heroFadeUp { to { opacity: 1; transform: translateY(0); } } @keyframes heroLineGrow { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } } @keyframes heroShimmer { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } @keyframes heroPulse { 0% { box-shadow: 0 0 0 0 rgba(224,122,95,0.55); } 70% { box-shadow: 0 0 0 12px rgba(224,122,95,0); } 100% { box-shadow: 0 0 0 0 rgba(224,122,95,0); } } @keyframes heroFloat { 0%, 100% { transform: translate(0, 0) rotate(var(--rot, 0deg)); } 50% { transform: translate(10px, -18px) rotate(calc(var(--rot, 0deg) + 6deg)); } } .hero-shape--1 { --rot: 18deg; } .hero-shape--3 { --rot: 45deg; } @keyframes heroGlowFloat { 0% { transform: translate(0, 0) scale(1); opacity: 0.9; } 100% { transform: translate(-40px, 30px) scale(1.15); opacity: 0.7; } } @keyframes heroKenBurns { 0% { transform: scale(1.08) translate(0, 0); } 100% { transform: scale(1.18) translate(-1.5%, -1.5%); } } /* ============================================================ SECTIONS ============================================================ */ .section { padding: 96px 0; } .section-services { background: var(--bg-secondary); } .section-categories { background: var(--bg-primary); } .section-products { background: var(--bg-secondary); } .section-why-us { background: var(--bg-primary); } .section-cta { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%); color: #000; text-align: center; padding: 80px 0; } .section-cta h2 { color: #000; font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 12px; } .section-cta p { color: #1a1a1a; font-size: 1.1rem; margin-bottom: 28px; } .section-cta .btn-primary { background: #000; color: var(--accent); border-color: #000; } .section-cta .btn-primary:hover { background: var(--bg-tertiary); color: var(--accent); } .section-header { text-align: center; margin-bottom: 56px; } .section-title { margin-bottom: 12px; } .section-subtitle { color: var(--text-secondary); font-size: 1.1rem; max-width: 600px; margin: 0 auto; } /* Services Grid */ .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; } .service-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 32px; transition: all var(--transition); text-align: left; } .service-card:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: var(--shadow-md); } .service-icon { color: var(--accent); margin-bottom: 16px; width: 56px; height: 56px; background: rgba(224, 122, 95, 0.1); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; } .service-title { margin-bottom: 8px; font-size: 1.25rem; } .service-card p { color: var(--text-secondary); margin: 0; } /* Categories Grid */ .categories-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; } .category-card { position: relative; aspect-ratio: 4/3; background: var(--bg-card) center/cover no-repeat; border-radius: var(--radius-md); overflow: hidden; display: block; transition: transform var(--transition); } .category-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.85) 100%); } .category-card:hover { transform: scale(1.02); } .category-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 24px; z-index: 1; color: #fff; } .category-name { color: #fff; margin: 0 0 4px; font-size: 1.3rem; } .category-count { color: var(--accent); font-size: 14px; font-weight: 500; } /* Homepage Products Grid (custom front-page section) */ .products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; list-style: none; padding: 0; margin: 0; } @media (min-width: 1100px) { .products-grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 600px) { .products-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } } .product-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; transition: all var(--transition); } .product-card:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: var(--shadow-md); } .product-thumb { width: 100%; aspect-ratio: 1/1; object-fit: cover; background: var(--bg-tertiary); } .product-info { padding: 12px 14px; } .product-name { font-size: 0.95rem; margin: 0 0 6px; line-height: 1.3; } .product-name a { color: var(--text-primary); } .product-name a:hover { color: var(--accent); } .product-price { color: var(--accent); font-weight: 700; font-size: 1rem; margin: 0 0 10px; } .call-for-price { color: var(--text-secondary); font-style: italic; font-size: 0.85rem; } /* NOT: WooCommerce mağaza ve kart stilleri "SHOP — Atelier Pro" bölümünde tanımlı. */ /* Features Grid (Why Us) */ .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; } .feature-item { padding: 28px; background: var(--bg-card); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); } .feature-num { display: inline-block; font-size: 1.1rem; font-weight: 700; color: var(--accent); margin-bottom: 8px; letter-spacing: 0.05em; } .feature-item h4 { margin: 0 0 8px; font-size: 1.15rem; } .feature-item p { color: var(--text-secondary); margin: 0; font-size: 0.95rem; } /* ============================================================ PAGE (default page template) ============================================================ */ .page-hero { position: relative; background-size: cover; background-position: center; padding: 120px 0 100px; margin-bottom: 0; } .page-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,10,0.5), rgba(10,10,10,0.9)); } .page-hero .container { position: relative; z-index: 1; } .page-hero-title { color: #fff; margin: 0; font-size: clamp(2.5rem, 5vw, 4rem); } .page-header-plain { padding: 80px 0 40px; background: linear-gradient(135deg, var(--bg-secondary), var(--bg-primary)); border-bottom: 1px solid var(--border); } .page-header-plain .page-title { margin: 0; } .page-article { padding: 60px 0 96px; } .page-article .container { max-width: 820px; } .entry-content { color: var(--text-secondary); font-size: 1.05rem; line-height: 1.8; } .entry-content h2 { color: var(--text-primary); margin: 2em 0 0.6em; padding-bottom: 0.4em; border-bottom: 1px solid var(--border); } .entry-content h3 { color: var(--text-primary); margin-top: 1.5em; } .entry-content a { color: var(--accent); border-bottom: 1px solid var(--accent); } .entry-content a.btn { border-bottom: none; } .entry-content a.btn-primary { color: #000; } .entry-content a.btn-primary:hover { color: #000; } .entry-content a.btn-outline { color: var(--text-primary); } .entry-content a.btn-outline:hover { color: var(--bg-primary); } .entry-content img { border-radius: var(--radius-md); margin: 1.5em 0; } .entry-content blockquote { border-left: 3px solid var(--accent); background: var(--bg-card); padding: 20px 24px; margin: 1.5em 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-style: italic; } .entry-content ul, .entry-content ol { padding-left: 1.5em; margin-bottom: 1em; } .entry-content li { margin-bottom: 0.5em; } /* Posts grid (blog/archive) */ .posts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; margin: 40px 0; } .post-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; transition: all var(--transition); } .post-card:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: var(--shadow-md); } .post-card .post-thumb img { width: 100%; aspect-ratio: 16/10; object-fit: cover; } .post-card-body { padding: 20px; } .post-title { margin: 0 0 8px; font-size: 1.2rem; } .post-title a { color: var(--text-primary); } .post-title a:hover { color: var(--accent); } .post-meta { color: var(--text-muted); font-size: 13px; margin-bottom: 12px; } .post-excerpt { color: var(--text-secondary); margin-bottom: 16px; font-size: 0.95rem; } /* Single post */ .single-post-wrap { padding: 60px 0 96px; max-width: 800px; } .single-post .entry-header { margin-bottom: 32px; } .single-post .entry-title { margin-bottom: 12px; } .single-post .entry-meta { color: var(--text-muted); font-size: 14px; } .entry-thumbnail { margin: 24px 0; border-radius: var(--radius-md); overflow: hidden; } .entry-footer { padding-top: 32px; margin-top: 40px; border-top: 1px solid var(--border); color: var(--text-secondary); font-size: 14px; } /* 404 */ .error-404 { padding: 120px 0; text-align: center; min-height: 60vh; display: flex; align-items: center; } .error-content { width: 100%; } .error-code { font-size: clamp(6rem, 20vw, 10rem); color: var(--accent); line-height: 1; margin: 0 0 16px; } .error-title { margin-bottom: 16px; } .error-message { color: var(--text-secondary); margin-bottom: 32px; } /* Pagination */ .navigation.pagination { display: flex; justify-content: center; gap: 8px; margin: 48px 0; } .navigation.pagination .nav-links { display: flex; gap: 8px; } .navigation.pagination a, .navigation.pagination span { padding: 10px 16px; border-radius: var(--radius-sm); background: var(--bg-card); color: var(--text-primary); text-decoration: none; min-width: 44px; text-align: center; border: 1px solid var(--border); transition: all var(--transition); } .navigation.pagination a:hover { background: var(--accent); color: #000; border-color: var(--accent); } .navigation.pagination .current { background: var(--accent); color: #000; border-color: var(--accent); } /* ============================================================ WOOCOMMERCE OVERRIDES ============================================================ */ /* .wc-main sits on the same element as .container — use long-form padding so it does NOT reset the horizontal padding coming from .container. */ .wc-main { padding-top: 56px; padding-bottom: 80px; max-width: 1200px; } @media (max-width: 768px) { .wc-main { padding-top: 32px; padding-bottom: 56px; } } /* Shop archive: tighten gutter at the very edges, but keep breathing room */ @media (max-width: 480px) { .wc-main { padding-left: 16px; padding-right: 16px; } } .woocommerce { color: var(--text-primary); } .woocommerce .page-title, .woocommerce-products-header__title { color: var(--text-primary); margin-bottom: 16px; } .woocommerce .woocommerce-result-count { color: var(--text-muted); } .woocommerce-ordering select, .woocommerce form .form-row select { background: var(--bg-card) !important; color: var(--text-primary) !important; border: 1px solid var(--border) !important; padding: 10px 14px !important; border-radius: var(--radius-sm) !important; font-family: inherit !important; } /* === WooCommerce notices (sepete eklendi, vb.) — icon + text + button hizalı === */ .woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice, .woocommerce-noreviews, .wc-block-components-notice-banner { background: var(--bg-card) !important; color: var(--text-primary) !important; border-top: 3px solid var(--accent) !important; border-left: none !important; padding: 18px 24px 18px 56px !important; border-radius: var(--radius-sm) !important; margin: 0 0 24px !important; list-style: none !important; display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 12px !important; position: relative !important; line-height: 1.5 !important; min-height: 56px !important; } .woocommerce-error { border-top-color: #d63638 !important; } /* Icon (pseudo) — absolutely positioned, vertically centered */ .woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before, .woocommerce-notice::before { color: var(--accent) !important; position: absolute !important; top: 50% !important; left: 20px !important; transform: translateY(-50%) !important; margin: 0 !important; font-size: 18px !important; line-height: 1 !important; } .woocommerce-error::before { color: #d63638 !important; } /* Sepetim / devam et butonu — sağa yaslı */ .woocommerce .button.wc-forward, .woocommerce-message .wc-forward, .woocommerce-info .wc-forward { background: var(--accent) !important; color: #000 !important; padding: 10px 20px !important; border-radius: var(--radius-sm) !important; font-weight: 600 !important; font-size: 13px !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; text-decoration: none !important; border: none !important; margin-left: auto !important; line-height: 1.2 !important; white-space: nowrap !important; order: 2 !important; transition: background var(--transition) !important; } .woocommerce .button.wc-forward:hover { background: var(--accent-hover) !important; } /* Mesaj metni esnesin, butonu sağa itsin */ .woocommerce-message > :not(.button):not(::before), .woocommerce-info > :not(.button):not(::before) { flex: 1 1 auto; } /* Liste içindeki mesajlar (ul.woocommerce-error) */ .woocommerce-error li, ul.woocommerce-error li { margin: 0 !important; padding: 0 !important; } /* Single product — global overrides removed. All single product page styles are owned by the dedicated block: "SINGLE PRODUCT — Professional redesign (v5)" — search for .sandline-product */ /* ============================================================ CART — Profesyonel iki kolonlu sepet (Dark / Gold) Scope: body.woocommerce-cart. Klasik shortcode + WC Cart Block. ============================================================ */ /* Çekirdek shop_table (cart + checkout paylaşır) */ .woocommerce table.shop_table { background: var(--bg-card) !important; color: var(--text-primary) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-md) !important; overflow: hidden; border-collapse: separate !important; border-spacing: 0 !important; } .woocommerce table.shop_table th, .woocommerce table.shop_table td { color: var(--text-primary) !important; border-color: var(--border-light) !important; padding: 16px !important; } .woocommerce a.remove { color: var(--accent) !important; } .woocommerce a.remove:hover { background: var(--accent) !important; color: #000 !important; } /* Sayfa kabı — diğer WC sayfalarıyla uyumlu nefes alanı. NOT: page.php sepeti .page-article > .container içine sarar; default container max-width: 820px'tir ve iki kolonlu grid'i sıkıştırarak tablo'nun özet kutusunun altına taşmasına yol açar. Checkout ile aynı şekilde container'ı genişletip grid'in nefes almasını sağlıyoruz. */ .woocommerce-cart .wc-main, .woocommerce-cart main, .woocommerce-cart .site-main { padding: 0 0 90px !important; } /* Header ile başlık konteyneri birleşik — gradient/border kaldırıldı, dar padding */ .woocommerce-cart .page-header-plain { padding: 48px 0 10px !important; background: transparent !important; border: 0 !important; margin: 0 !important; } .woocommerce-cart .page-header-plain .container { max-width: 1240px !important; } .woocommerce-cart .page-article { padding: 20px 0 100px !important; } .woocommerce-cart .page-article .container { max-width: 1240px !important; } .woocommerce-cart .entry-content { color: var(--text-primary); font-size: 1rem; line-height: 1.5; } .woocommerce-cart .entry-title, .woocommerce-cart .page-title { font-size: clamp(26px, 2.8vw, 36px); font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); margin: 0 !important; position: relative; padding-bottom: 14px; line-height: 1.15; } .woocommerce-cart .page-header-plain .page-title::after, .woocommerce-cart .entry-title::after { content: ''; display: block; width: 48px; height: 2px; background: var(--accent); margin-top: 12px; border-radius: 2px; } /* ---------- İki kolonlu yerleşim: ürünler (sol) + özet (sağ) ---------- */ .woocommerce-cart .entry-content > .woocommerce, .woocommerce-cart .woocommerce { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); column-gap: 28px; row-gap: 24px; align-items: start; margin: 0; } .woocommerce-cart .woocommerce > .woocommerce-notices-wrapper, .woocommerce-cart .woocommerce > .return-to-shop, .woocommerce-cart .woocommerce > .cart-empty, .woocommerce-cart .woocommerce > .wc-empty-cart-message { grid-column: 1 / -1; } .woocommerce-cart form.woocommerce-cart-form { grid-column: 1 / 2; grid-row: auto; float: none !important; width: auto !important; max-width: 100%; margin: 0 !important; min-width: 0; overflow: hidden !important; } .woocommerce-cart .cart-collaterals { grid-column: 2 / 3; grid-row: auto; width: auto !important; max-width: 100%; float: none !important; position: sticky; top: 96px; min-width: 0; } .woocommerce-cart .cart-collaterals .cross-sells { grid-column: 1 / -1; width: 100% !important; float: none !important; margin-top: 24px; } /* ---------- Ürün tablosu — kart yüzeyi ---------- */ .woocommerce-cart table.shop_table.cart { box-shadow: var(--shadow-md); margin: 0 !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } .woocommerce-cart table.shop_table.cart thead { background: var(--bg-secondary) !important; } .woocommerce-cart table.shop_table.cart thead th { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--border) !important; padding: 14px 16px !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: var(--text-muted) !important; } .woocommerce-cart table.shop_table.cart tbody tr.cart_item { transition: background var(--transition); } .woocommerce-cart table.shop_table.cart tbody tr.cart_item:hover { background: rgba(255, 255, 255, 0.015); } .woocommerce-cart table.shop_table.cart tbody tr.cart_item td { border: 0 !important; border-bottom: 1px solid var(--border) !important; padding: 20px 16px !important; vertical-align: middle !important; background: transparent !important; } .woocommerce-cart table.shop_table.cart tbody tr.cart_item:last-child td { border-bottom: 0 !important; } /* Kaldır butonu — yuvarlak, kırmızı hover */ .woocommerce-cart table.shop_table.cart td.product-remove { width: 48px; padding-right: 0 !important; } .woocommerce-cart table.shop_table.cart td.product-remove a.remove { width: 30px !important; height: 30px !important; line-height: 28px !important; border-radius: 50% !important; background: rgba(255, 255, 255, 0.04) !important; border: 1px solid var(--border) !important; color: var(--text-muted) !important; font-size: 16px !important; font-weight: 400 !important; text-align: center; display: inline-block; text-decoration: none !important; transition: background var(--transition), color var(--transition), border-color var(--transition); } .woocommerce-cart table.shop_table.cart td.product-remove a.remove:hover { background: #ef4444 !important; border-color: #ef4444 !important; color: #fff !important; } /* Ürün görseli */ .woocommerce-cart table.shop_table.cart td.product-thumbnail { width: 100px; padding-right: 8px !important; } .woocommerce-cart table.shop_table.cart td.product-thumbnail a { display: block; } .woocommerce-cart table.shop_table.cart td.product-thumbnail img { width: 84px !important; height: 84px !important; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-secondary); display: block; } /* Ürün adı + varyasyon */ .woocommerce-cart table.shop_table.cart td.product-name a { color: var(--text-primary) !important; font-weight: 600; font-size: 15px; line-height: 1.35; text-decoration: none; letter-spacing: -0.005em; } .woocommerce-cart table.shop_table.cart td.product-name a:hover { color: var(--accent) !important; } .woocommerce-cart table.shop_table.cart td.product-name .variation, .woocommerce-cart table.shop_table.cart td.product-name dl.variation { margin: 6px 0 0 !important; padding: 0 !important; border: 0 !important; font-size: 12px; color: var(--text-muted); } .woocommerce-cart table.shop_table.cart td.product-name .variation dt, .woocommerce-cart table.shop_table.cart td.product-name .variation dd { display: inline !important; margin: 0 6px 0 0 !important; padding: 0 !important; font-weight: 400 !important; color: var(--text-muted) !important; background: transparent !important; } /* Fiyat ve satır toplamı */ .woocommerce-cart table.shop_table.cart td.product-price, .woocommerce-cart table.shop_table.cart td.product-subtotal { font-size: 15px !important; font-weight: 600 !important; color: var(--text-primary) !important; white-space: nowrap; } .woocommerce-cart table.shop_table.cart td.product-subtotal { color: var(--accent) !important; font-weight: 700 !important; } /* Miktar seçici — pill stil */ .woocommerce-cart table.shop_table.cart td.product-quantity { width: 140px; } .woocommerce-cart .quantity, .woocommerce .quantity { display: inline-flex !important; align-items: center; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; height: 42px; } .woocommerce-cart .quantity input.qty, .woocommerce .quantity input.qty { width: 50px !important; height: 100% !important; min-height: 0 !important; border: 0 !important; background: transparent !important; color: var(--text-primary) !important; text-align: center; font-weight: 600; font-size: 14px; padding: 0 !important; -moz-appearance: textfield; box-shadow: none !important; } .quantity input.qty::-webkit-outer-spin-button, .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .quantity .qty-button, .quantity .plus, .quantity .minus, .quantity button { width: 36px; height: 100%; border: 0; background: transparent; color: var(--text-secondary); font-size: 16px; cursor: pointer; transition: color var(--transition), background var(--transition); } .quantity .qty-button:hover, .quantity .plus:hover, .quantity .minus:hover, .quantity button:hover { background: rgba(224, 122, 95, 0.12); color: var(--accent); } /* ---------- Actions satırı (kupon + güncelle) ---------- */ .woocommerce-cart table.shop_table.cart tfoot td, .woocommerce-cart table.shop_table.cart td.actions { background: var(--bg-secondary) !important; border: 0 !important; border-top: 1px solid var(--border) !important; padding: 18px 16px !important; } .woocommerce-cart td.actions .coupon { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; } .woocommerce-cart td.actions .coupon label { display: none; } .woocommerce-cart td.actions .coupon input[type="text"], .woocommerce-cart td.actions #coupon_code { width: 240px !important; min-height: 42px !important; padding: 10px 16px !important; border-radius: 999px !important; background: var(--bg-card) !important; border: 1px solid var(--border) !important; color: var(--text-primary) !important; font-size: 14px; } .woocommerce-cart td.actions .coupon input[type="text"]:focus, .woocommerce-cart td.actions #coupon_code:focus { outline: 0 !important; border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(224, 122, 95, 0.18) !important; } .woocommerce-cart td.actions .button, .woocommerce-cart td.actions button[name="apply_coupon"], .woocommerce-cart td.actions button[name="update_cart"] { min-height: 42px !important; padding: 0 22px !important; border-radius: 999px !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0.02em !important; } .woocommerce-cart td.actions button[name="update_cart"]:disabled { opacity: 0.45 !important; cursor: not-allowed; } /* ---------- Cart totals (sağ özet kutusu) ---------- */ .woocommerce-cart .cart_totals { background: var(--bg-card) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-md) !important; padding: 26px 26px 22px !important; box-shadow: var(--shadow-md); margin: 0 !important; } .woocommerce-cart .cart_totals h2 { margin: 0 0 18px !important; padding: 0 0 14px !important; font-size: 18px !important; font-weight: 700 !important; letter-spacing: -0.01em !important; color: var(--text-primary) !important; border-bottom: 1px solid var(--border); text-transform: none !important; } .woocommerce-cart .cart_totals table { background: transparent !important; border: 0 !important; box-shadow: none !important; margin: 0 !important; border-radius: 0 !important; border-collapse: collapse !important; } .woocommerce-cart .cart_totals table th, .woocommerce-cart .cart_totals table td { border: 0 !important; border-bottom: 1px dashed var(--border) !important; background: transparent !important; padding: 12px 0 !important; font-size: 14px !important; vertical-align: middle !important; color: var(--text-primary) !important; } .woocommerce-cart .cart_totals table th { font-weight: 500 !important; color: var(--text-secondary) !important; text-transform: none !important; letter-spacing: 0 !important; width: 50%; } .woocommerce-cart .cart_totals table td { text-align: right; font-weight: 600; } .woocommerce-cart .cart_totals table tr.shipping td, .woocommerce-cart .cart_totals table tr.shipping th { vertical-align: top; } .woocommerce-cart .cart_totals table tr.shipping ul#shipping_method { margin: 0; padding: 0; list-style: none; } .woocommerce-cart .cart_totals table tr.shipping ul#shipping_method li { margin: 0 0 6px; text-align: right; font-size: 14px; } .woocommerce-cart .cart_totals table tr.shipping ul#shipping_method li label { color: var(--text-primary); margin-left: 6px; } .woocommerce-cart .cart_totals .shipping-calculator-button { color: var(--accent) !important; font-weight: 600; text-decoration: none; font-size: 13px; } /* Toplam satırı — vurgulu */ .woocommerce-cart .cart_totals table tr.order-total th, .woocommerce-cart .cart_totals table tr.order-total td { border-bottom: 0 !important; border-top: 1px solid var(--border) !important; padding-top: 18px !important; padding-bottom: 6px !important; font-size: 16px !important; } .woocommerce-cart .cart_totals table tr.order-total th { color: var(--text-primary) !important; font-weight: 700 !important; } .woocommerce-cart .cart_totals table tr.order-total td, .woocommerce-cart .cart_totals table tr.order-total .amount, .woocommerce-cart .cart_totals table tr.order-total .woocommerce-Price-amount { color: var(--accent) !important; font-weight: 800 !important; font-size: 22px !important; letter-spacing: -0.015em; } .woocommerce-cart .cart_totals table tr.order-total small { display: block; margin-top: 4px; color: var(--text-muted) !important; font-size: 11px !important; font-weight: 400 !important; letter-spacing: 0; } /* Checkout butonu — tam genişlik altın CTA */ .woocommerce-cart .wc-proceed-to-checkout { padding: 16px 0 0 !important; margin: 14px 0 0 !important; border-top: 1px solid var(--border); } .woocommerce-cart .wc-proceed-to-checkout a.checkout-button { display: block !important; width: 100% !important; min-height: 54px !important; padding: 14px 20px !important; text-align: center !important; font-size: 15px !important; font-weight: 700 !important; letter-spacing: 0.02em !important; border-radius: var(--radius-sm) !important; background: var(--accent) !important; color: #000 !important; border: 0 !important; box-shadow: 0 4px 20px rgba(224, 122, 95, 0.25); transition: background var(--transition), transform var(--transition), box-shadow var(--transition); } .woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover { background: var(--accent-hover) !important; transform: translateY(-1px); box-shadow: 0 8px 28px rgba(224, 122, 95, 0.35); } /* ---------- Boş sepet ---------- */ .woocommerce-cart .cart-empty.woocommerce-info, .woocommerce-cart p.cart-empty { background: var(--bg-card) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-md) !important; padding: 60px 30px !important; text-align: center !important; font-size: 18px !important; color: var(--text-secondary) !important; margin: 0 !important; box-shadow: var(--shadow-sm); } .woocommerce-cart .cart-empty.woocommerce-info::before, .woocommerce-cart p.cart-empty::before { display: none !important; } .woocommerce-cart .return-to-shop { text-align: center; margin: 20px 0 0 !important; padding: 0 !important; } .woocommerce-cart .return-to-shop a.button { display: inline-block !important; min-height: 50px; padding: 14px 32px !important; border-radius: var(--radius-sm) !important; background: var(--accent) !important; color: #000 !important; font-weight: 700 !important; font-size: 15px !important; } .woocommerce-cart .return-to-shop a.button:hover { background: var(--accent-hover) !important; } .woocommerce-cart .cross-sells > h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--text-primary); margin: 0 0 18px; } /* ---------- WooCommerce CART BLOCK (yeni Gutenberg cart) ---------- */ .wp-block-woocommerce-cart, .wc-block-cart { color: var(--text-primary) !important; } .wc-block-cart .wc-block-cart-items, .wc-block-cart table.wc-block-cart-items { background: var(--bg-card) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-md) !important; overflow: hidden; box-shadow: var(--shadow-md); } .wc-block-cart-items__header { background: var(--bg-secondary) !important; border-bottom: 1px solid var(--border) !important; } .wc-block-cart-items__header th { color: var(--text-muted) !important; font-size: 11px !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; padding: 14px 16px !important; border: 0 !important; } .wc-block-cart-items__row, tr.wc-block-cart-items__row { border-bottom: 1px solid var(--border) !important; } .wc-block-cart-items__row td { padding: 20px 16px !important; border: 0 !important; background: transparent !important; vertical-align: middle !important; } .wc-block-cart-item__image img { border-radius: var(--radius-sm); border: 1px solid var(--border); width: 84px !important; height: 84px !important; object-fit: cover; } .wc-block-components-product-name { color: var(--text-primary) !important; font-weight: 600 !important; font-size: 15px !important; text-decoration: none !important; } .wc-block-components-product-name:hover { color: var(--accent) !important; } .wc-block-components-product-metadata, .wc-block-components-product-details { color: var(--text-muted) !important; font-size: 12px !important; } .wc-block-components-product-price, .wc-block-components-product-price__value { color: var(--text-primary) !important; font-weight: 600 !important; } .wc-block-cart-item__total .wc-block-components-product-price__value { color: var(--accent) !important; font-weight: 700 !important; } .wp-block-woocommerce-cart-order-summary-block, .wc-block-components-sidebar { background: var(--bg-card) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-md) !important; padding: 26px !important; box-shadow: var(--shadow-md); } .wc-block-components-totals-item, .wc-block-components-totals-wrapper { color: var(--text-primary) !important; border-color: var(--border) !important; } .wc-block-components-totals-item__label { color: var(--text-secondary) !important; } .wc-block-components-totals-footer-item, .wc-block-components-totals-footer-item .wc-block-formatted-money-amount { color: var(--accent) !important; font-weight: 800 !important; font-size: 20px !important; } .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button, button.wc-block-components-button:not(.wc-block-components-button--link) { background: var(--accent) !important; color: #000 !important; border: 0 !important; border-radius: var(--radius-sm) !important; padding: 14px 24px !important; font-weight: 700 !important; font-size: 15px !important; box-shadow: 0 4px 20px rgba(224, 122, 95, 0.25); transition: background var(--transition), transform var(--transition); } .wc-block-cart__submit-button:hover, .wc-block-components-checkout-place-order-button:hover { background: var(--accent-hover) !important; transform: translateY(-1px); } .wc-block-components-quantity-selector { background: var(--bg-secondary) !important; border: 1px solid var(--border) !important; border-radius: 999px !important; overflow: hidden; } .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input { background: transparent !important; color: var(--text-primary) !important; border: 0 !important; font-weight: 600; } .wc-block-components-quantity-selector__button { color: var(--text-secondary) !important; background: transparent !important; border: 0 !important; transition: color var(--transition), background var(--transition); } .wc-block-components-quantity-selector__button:hover { color: var(--accent) !important; background: rgba(224, 122, 95, 0.12) !important; } .wc-block-components-totals-coupon input[type="text"] { background: var(--bg-secondary) !important; border: 1px solid var(--border) !important; color: var(--text-primary) !important; border-radius: 999px !important; padding: 10px 16px !important; } /* ---------- Cart — tablet/mobil ---------- */ @media (max-width: 1024px) { .woocommerce-cart .page-header-plain { padding: 24px 0 6px !important; } .woocommerce-cart .page-article { padding: 18px 0 80px !important; } .woocommerce-cart .entry-content > .woocommerce, .woocommerce-cart .woocommerce { grid-template-columns: minmax(0, 1fr); row-gap: 20px; } .woocommerce-cart form.woocommerce-cart-form, .woocommerce-cart .cart-collaterals { grid-column: 1 / -1; } .woocommerce-cart .cart-collaterals { position: static !important; top: auto !important; } } @media (max-width: 600px) { .woocommerce-cart .page-header-plain { padding: 18px 0 4px !important; } .woocommerce-cart .page-header-plain .container { padding-left: 14px; padding-right: 14px; } .woocommerce-cart .page-article { padding: 14px 0 60px !important; } .woocommerce-cart .page-article .container { padding-left: 14px; padding-right: 14px; } .woocommerce-cart .entry-content > .woocommerce, .woocommerce-cart .woocommerce { row-gap: 16px; } /* Tablo'yu kart yığını gibi göster (klasik shortcode) */ .woocommerce-cart table.shop_table.cart { display: block; border: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; } .woocommerce-cart table.shop_table.cart thead { display: none; } .woocommerce-cart table.shop_table.cart tbody { display: block; } .woocommerce-cart table.shop_table.cart tbody tr.cart_item { display: grid; grid-template-columns: 84px 1fr 32px; grid-template-areas: "thumb name remove" "thumb price remove" "thumb qty remove" "thumb sub remove"; gap: 4px 14px; padding: 16px; margin: 0 0 12px; background: var(--bg-card) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-md) !important; box-shadow: var(--shadow-sm); } .woocommerce-cart table.shop_table.cart tbody tr.cart_item:last-child { margin-bottom: 0; } .woocommerce-cart table.shop_table.cart tbody tr.cart_item td { border: 0 !important; padding: 2px 0 !important; background: transparent !important; width: auto !important; } .woocommerce-cart table.shop_table.cart td.product-remove { grid-area: remove; padding-right: 0 !important; } .woocommerce-cart table.shop_table.cart td.product-thumbnail { grid-area: thumb; padding: 0 !important; } .woocommerce-cart table.shop_table.cart td.product-thumbnail img { width: 84px !important; height: 84px !important; } .woocommerce-cart table.shop_table.cart td.product-name { grid-area: name; font-size: 14px !important; } .woocommerce-cart table.shop_table.cart td.product-price { grid-area: price; font-size: 13px !important; color: var(--text-muted) !important; } .woocommerce-cart table.shop_table.cart td.product-quantity { grid-area: qty; } .woocommerce-cart table.shop_table.cart td.product-subtotal { grid-area: sub; font-size: 15px !important; } /* Actions (kupon + güncelle) — mobilde tablo değil, blok */ .woocommerce-cart table.shop_table.cart tfoot { display: block; } .woocommerce-cart table.shop_table.cart tfoot tr, .woocommerce-cart table.shop_table.cart tr:has(td.actions) { display: block; background: var(--bg-card) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-md) !important; margin-top: 4px; } .woocommerce-cart table.shop_table.cart td.actions { display: block; width: 100% !important; padding: 14px !important; border-top: 0 !important; background: transparent !important; } .woocommerce-cart td.actions .coupon { display: flex; width: 100%; gap: 8px; flex-wrap: wrap; } .woocommerce-cart td.actions .coupon input[type="text"], .woocommerce-cart td.actions #coupon_code { flex: 1 1 180px; min-width: 0; width: auto !important; } .woocommerce-cart td.actions button[name="apply_coupon"] { flex: 0 0 auto; } .woocommerce-cart td.actions button[name="update_cart"] { width: 100% !important; margin-top: 8px !important; } /* Sepet toplamları — mobilde kompakt */ .woocommerce-cart .cart_totals { padding: 20px 16px !important; } .woocommerce-cart .cart_totals h2 { font-size: 17px !important; } .woocommerce-cart .cart_totals table tr.order-total td, .woocommerce-cart .cart_totals table tr.order-total .amount, .woocommerce-cart .cart_totals table tr.order-total .woocommerce-Price-amount { font-size: 20px !important; } } /* ============================================================ WC "Coming Soon" (Store Only) — Sandline diline uyumlu splash Site şu an store-only modunda; /shop, /cart, /checkout bu bloğu render eder. ============================================================ */ .wp-block-woocommerce-coming-soon.woocommerce-coming-soon-store-only { min-height: calc(100vh - 80px); display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 0%, rgba(224, 122, 95, 0.08), transparent 60%), var(--bg-primary); padding: 60px 24px; } .wp-block-woocommerce-coming-soon .wp-block-group { max-width: 720px; margin: 0 auto; text-align: center; } .wp-block-woocommerce-coming-soon h1.wp-block-heading { font-size: clamp(34px, 5vw, 56px) !important; line-height: 1.1 !important; letter-spacing: -0.02em !important; color: var(--text-primary) !important; margin: 0 0 18px !important; font-weight: 700 !important; } .wp-block-woocommerce-coming-soon h1.wp-block-heading.has-cardo-font-family { font-family: 'Cardo', Georgia, serif !important; } .wp-block-woocommerce-coming-soon p.wp-block-paragraph { font-size: 17px !important; color: var(--text-secondary) !important; max-width: 540px; margin: 0 auto !important; line-height: 1.65; } .wp-block-woocommerce-coming-soon .wp-block-spacer { height: 28px !important; } .woocommerce input[type="text"], .woocommerce input[type="email"], .woocommerce input[type="tel"], .woocommerce input[type="number"], .woocommerce input[type="password"], .woocommerce textarea, input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="password"], input[type="search"], textarea, select { background: var(--bg-card) !important; color: var(--text-primary) !important; border: 1px solid var(--border) !important; padding: 12px 14px !important; border-radius: var(--radius-sm) !important; font-family: inherit !important; width: 100%; } input::placeholder, textarea::placeholder { color: var(--text-muted) !important; } .woocommerce form .form-row { margin-bottom: 16px; } .woocommerce form .form-row label { color: var(--text-primary); margin-bottom: 6px; display: block; font-weight: 500; font-size: 14px; } /* ============================================================ CHECKOUT — Profesyonel iki kolonlu yerleşim (Dark / Gold) Sayfa şablonu: page.php

[woocommerce_checkout] →
WooCommerce ve WordPress markup'ı KORUNUR. Sadece görsel CSS katmanı. ============================================================ */ /* --- Sayfa başlığı: "Ödeme" (the_title filter ile Türkçeleştirildi) --- */ .woocommerce-checkout .page-header-plain { padding: 56px 0 28px !important; background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%); border-bottom: 1px solid var(--border); margin-bottom: 0 !important; } .woocommerce-checkout .page-header-plain .page-title { font-family: var(--font-display) !important; font-size: clamp(28px, 3.4vw, 40px) !important; font-weight: 700 !important; letter-spacing: -0.015em !important; text-align: center; margin: 0 !important; color: var(--text-primary) !important; text-transform: none !important; line-height: 1.2 !important; position: relative; padding-bottom: 18px; } .woocommerce-checkout .page-header-plain .page-title::after { content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 56px; height: 2px; background: var(--accent); } /* --- İçerik kabı --- */ .woocommerce-checkout .page-article { background: var(--bg-primary); padding: 40px 0 100px !important; } .woocommerce-checkout .page-article .container { max-width: 1240px !important; } .woocommerce-checkout .entry-content { color: var(--text-primary); } /* --- Üst bildirimler (login / kupon ipucu) --- */ .woocommerce-checkout .entry-content .woocommerce-form-login-toggle, .woocommerce-checkout .entry-content .woocommerce-form-coupon-toggle { background: var(--bg-card) !important; border: 1px solid var(--border) !important; border-left: 3px solid var(--accent) !important; border-radius: var(--radius-md) !important; padding: 16px 20px !important; box-shadow: var(--shadow-sm); margin: 0 0 18px !important; color: var(--text-secondary) !important; font-size: 14px; } .woocommerce-checkout .entry-content .woocommerce-form-login-toggle .woocommerce-info, .woocommerce-checkout .entry-content .woocommerce-form-coupon-toggle .woocommerce-info { background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 !important; color: inherit !important; box-shadow: none !important; } .woocommerce-checkout .entry-content .woocommerce-form-login-toggle .woocommerce-info::before, .woocommerce-checkout .entry-content .woocommerce-form-coupon-toggle .woocommerce-info::before { display: none !important; } .woocommerce-checkout .entry-content .woocommerce-form-login-toggle a, .woocommerce-checkout .entry-content .woocommerce-form-coupon-toggle a, .woocommerce-checkout .entry-content .showcoupon { color: var(--accent) !important; font-weight: 600; text-decoration: none; } .woocommerce-checkout .entry-content .woocommerce-form-login-toggle a:hover, .woocommerce-checkout .entry-content .woocommerce-form-coupon-toggle a:hover, .woocommerce-checkout .entry-content .showcoupon:hover { color: var(--accent-hover) !important; } /* Login & kupon açılır formları */ .woocommerce-checkout .entry-content .woocommerce-form-login, .woocommerce-checkout .entry-content form.login, .woocommerce-checkout .entry-content .checkout_coupon, .woocommerce-checkout .entry-content form.checkout_coupon { background: var(--bg-card) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-md) !important; padding: 24px !important; margin: 0 0 20px !important; box-shadow: var(--shadow-sm); } /* ============================================================ İki kolonlu grid (sol: fatura+kargo, sağ: yapışkan sipariş özeti) ============================================================ */ .woocommerce-checkout .entry-content form.checkout.woocommerce-checkout { display: grid !important; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 28px; align-items: flex-start; margin-top: 8px; } .woocommerce-checkout .entry-content form.checkout #customer_details, .woocommerce-checkout .entry-content form.checkout .customer-details { grid-column: 1; display: flex; flex-direction: column; gap: 20px; min-width: 0; } .woocommerce-checkout .entry-content form.checkout #customer_details > .col-1, .woocommerce-checkout .entry-content form.checkout #customer_details > .col-2 { width: 100% !important; max-width: none !important; float: none !important; margin: 0 !important; padding: 0 !important; } .woocommerce-checkout .entry-content form.checkout .checkout-order-review { grid-column: 2; position: sticky; top: 96px; min-width: 0; display: flex; flex-direction: column; gap: 16px; } /* --- Kart yüzeyleri --- */ .woocommerce-checkout .entry-content form.checkout #customer_details .col-1, .woocommerce-checkout .entry-content form.checkout #customer_details .col-2, .woocommerce-checkout .entry-content form.checkout #order_review { background: var(--bg-card) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-md) !important; padding: 28px 28px 26px !important; box-shadow: var(--shadow-md); } /* --- Bölüm başlıkları + numara rozetleri --- */ .woocommerce-checkout .entry-content form.checkout .woocommerce-billing-fields > h3, .woocommerce-checkout .entry-content form.checkout .woocommerce-shipping-fields > h3, .woocommerce-checkout .entry-content form.checkout .woocommerce-additional-fields > h3, .woocommerce-checkout .entry-content form.checkout #order_review_heading { margin: 0 0 22px !important; padding: 0 0 16px !important; font-size: 18px !important; font-weight: 700 !important; letter-spacing: -0.005em !important; color: var(--text-primary) !important; border-bottom: 1px solid var(--border) !important; display: flex !important; align-items: center; gap: 12px; line-height: 1.3 !important; text-transform: none !important; font-family: var(--font-display) !important; } .woocommerce-checkout .entry-content form.checkout .woocommerce-billing-fields > h3::before, .woocommerce-checkout .entry-content form.checkout .woocommerce-shipping-fields > h3::before, .woocommerce-checkout .entry-content form.checkout #order_review_heading::before { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #000; font-size: 13px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; line-height: 1; } .woocommerce-checkout .entry-content form.checkout .woocommerce-billing-fields > h3::before { content: "1"; } .woocommerce-checkout .entry-content form.checkout .woocommerce-shipping-fields > h3::before { content: "2"; } .woocommerce-checkout .entry-content form.checkout #order_review_heading::before { content: "3"; } /* "Farklı bir adrese kargolansın" */ .woocommerce-checkout .entry-content form.checkout #ship-to-different-address { margin: 0 0 18px !important; padding: 0 !important; border: 0 !important; font-size: 15px; } .woocommerce-checkout .entry-content form.checkout #ship-to-different-address::before { display: none !important; } .woocommerce-checkout .entry-content form.checkout #ship-to-different-address label { display: inline-flex !important; align-items: center; gap: 8px; font-weight: 600; color: var(--text-primary) !important; cursor: pointer; margin: 0; } /* ============================================================ Form alanları — 2 kolon grid + büyük, belirgin inputlar ============================================================ */ .woocommerce-checkout .entry-content form.checkout .form-row { margin: 0 0 18px !important; padding: 0 !important; } .woocommerce-checkout .entry-content form.checkout .woocommerce-billing-fields__field-wrapper, .woocommerce-checkout .entry-content form.checkout .woocommerce-shipping-fields__field-wrapper, .woocommerce-checkout .entry-content form.checkout .woocommerce-additional-fields__field-wrapper { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; } .woocommerce-checkout .entry-content form.checkout .form-row-wide, .woocommerce-checkout .entry-content form.checkout #order_comments_field, .woocommerce-checkout .entry-content form.checkout #billing_address_1_field, .woocommerce-checkout .entry-content form.checkout #billing_address_2_field, .woocommerce-checkout .entry-content form.checkout #shipping_address_1_field, .woocommerce-checkout .entry-content form.checkout #shipping_address_2_field, .woocommerce-checkout .entry-content form.checkout #billing_company_field, .woocommerce-checkout .entry-content form.checkout #shipping_company_field, .woocommerce-checkout .entry-content form.checkout #billing_country_field, .woocommerce-checkout .entry-content form.checkout #shipping_country_field, .woocommerce-checkout .entry-content form.checkout #billing_email_field, .woocommerce-checkout .entry-content form.checkout #billing_phone_field { grid-column: 1 / -1; } .woocommerce-checkout .entry-content form.checkout .form-row label { display: block !important; margin: 0 0 8px !important; font-size: 13px !important; font-weight: 500 !important; color: var(--text-secondary) !important; letter-spacing: 0; } .woocommerce-checkout .entry-content form.checkout .form-row label .required { color: #ef4444 !important; text-decoration: none; margin-left: 2px; } .woocommerce-checkout .entry-content form.checkout .form-row label .optional { color: var(--text-muted) !important; font-weight: 400; margin-left: 4px; } /* Input & textarea — daha açık fon ki sayfa fonundan ayrışsın */ .woocommerce-checkout .entry-content form.checkout .form-row .input-text, .woocommerce-checkout .entry-content form.checkout .form-row input[type="text"], .woocommerce-checkout .entry-content form.checkout .form-row input[type="email"], .woocommerce-checkout .entry-content form.checkout .form-row input[type="tel"], .woocommerce-checkout .entry-content form.checkout .form-row input[type="number"], .woocommerce-checkout .entry-content form.checkout .form-row input[type="password"], .woocommerce-checkout .entry-content form.checkout .form-row textarea { display: block !important; width: 100% !important; min-height: 50px !important; height: auto !important; padding: 13px 16px !important; background: var(--bg-elevated) !important; border: 1px solid var(--border-light) !important; border-radius: var(--radius-sm) !important; color: var(--text-primary) !important; font-size: 15px !important; font-family: inherit !important; line-height: 1.4 !important; box-shadow: none !important; transition: border-color var(--transition), box-shadow var(--transition), background var(--transition); } .woocommerce-checkout .entry-content form.checkout .form-row textarea { min-height: 120px !important; line-height: 1.5 !important; resize: vertical; } .woocommerce-checkout .entry-content form.checkout .form-row .input-text::placeholder, .woocommerce-checkout .entry-content form.checkout .form-row textarea::placeholder { color: var(--text-muted) !important; } .woocommerce-checkout .entry-content form.checkout .form-row .input-text:hover, .woocommerce-checkout .entry-content form.checkout .form-row textarea:hover { border-color: var(--accent-dark) !important; } .woocommerce-checkout .entry-content form.checkout .form-row .input-text:focus, .woocommerce-checkout .entry-content form.checkout .form-row textarea:focus { outline: 0 !important; border-color: var(--accent) !important; background: #2a2a2a !important; box-shadow: 0 0 0 3px rgba(224, 122, 95, 0.22) !important; } /* Select2 */ .woocommerce-checkout .entry-content .select2-container--default .select2-selection--single { min-height: 50px !important; height: 50px !important; background: var(--bg-elevated) !important; border: 1px solid var(--border-light) !important; border-radius: var(--radius-sm) !important; display: flex !important; align-items: center; padding: 0 16px !important; transition: border-color var(--transition), box-shadow var(--transition); } .woocommerce-checkout .entry-content .select2-container--default .select2-selection--single:hover { border-color: var(--accent-dark) !important; } .woocommerce-checkout .entry-content .select2-container--default.select2-container--open .select2-selection--single, .woocommerce-checkout .entry-content .select2-container--default.select2-container--focus .select2-selection--single { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(224, 122, 95, 0.22) !important; } .woocommerce-checkout .entry-content .select2-container--default .select2-selection--single .select2-selection__rendered { padding: 0 !important; line-height: 1.5 !important; color: var(--text-primary) !important; font-size: 15px; } .woocommerce-checkout .entry-content .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100% !important; right: 12px !important; } .woocommerce-checkout .entry-content .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: var(--text-secondary) transparent transparent transparent !important; } body .select2-dropdown { background: var(--bg-elevated) !important; border: 1px solid var(--border-light) !important; color: var(--text-primary) !important; } body .select2-container--default .select2-results__option--highlighted[aria-selected], body .select2-container--default .select2-results__option--highlighted { background: var(--accent) !important; color: #000 !important; } body .select2-search--dropdown .select2-search__field { background: var(--bg-secondary) !important; border: 1px solid var(--border-light) !important; color: var(--text-primary) !important; padding: 8px 12px !important; } /* Hata durumu */ .woocommerce-checkout .entry-content form.checkout .form-row.woocommerce-invalid .input-text, .woocommerce-checkout .entry-content form.checkout .form-row.woocommerce-invalid textarea, .woocommerce-checkout .entry-content form.checkout .form-row.woocommerce-invalid .select2-container--default .select2-selection--single { border-color: #ef4444 !important; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18) !important; } /* ============================================================ Sipariş özeti (sağ kolon) ============================================================ */ .woocommerce-checkout .entry-content form.checkout #order_review table.shop_table { background: transparent !important; border: 0 !important; border-radius: 0 !important; margin: 0 0 8px !important; overflow: visible !important; box-shadow: none !important; border-collapse: collapse !important; width: 100%; } .woocommerce-checkout .entry-content form.checkout #order_review table.shop_table thead { display: none; } .woocommerce-checkout .entry-content form.checkout #order_review table.shop_table tbody tr.cart_item td, .woocommerce-checkout .entry-content form.checkout #order_review table.shop_table tfoot tr th, .woocommerce-checkout .entry-content form.checkout #order_review table.shop_table tfoot tr td { border: 0 !important; border-bottom: 1px solid var(--border) !important; background: transparent !important; padding: 14px 0 !important; font-size: 14px !important; vertical-align: middle !important; color: var(--text-primary) !important; } .woocommerce-checkout .entry-content form.checkout #order_review table.shop_table tbody tr.cart_item td.product-name { font-weight: 500 !important; line-height: 1.45 !important; padding-right: 12px !important; } .woocommerce-checkout .entry-content form.checkout #order_review table.shop_table tbody tr.cart_item td.product-name .product-quantity { color: var(--text-muted) !important; font-weight: 600; margin-left: 4px; } .woocommerce-checkout .entry-content form.checkout #order_review table.shop_table tbody tr.cart_item td.product-total { text-align: right !important; white-space: nowrap; font-weight: 600 !important; } .woocommerce-checkout .entry-content form.checkout #order_review table.shop_table tfoot tr th { color: var(--text-muted) !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: normal !important; text-align: left !important; } .woocommerce-checkout .entry-content form.checkout #order_review table.shop_table tfoot tr td { text-align: right !important; font-weight: 600 !important; } .woocommerce-checkout .entry-content form.checkout #order_review table.shop_table tfoot tr.order-total th, .woocommerce-checkout .entry-content form.checkout #order_review table.shop_table tfoot tr.order-total td { border-bottom: 0 !important; padding-top: 20px !important; padding-bottom: 4px !important; font-size: 16px !important; } .woocommerce-checkout .entry-content form.checkout #order_review table.shop_table tfoot tr.order-total th { font-weight: 700 !important; color: var(--text-primary) !important; } .woocommerce-checkout .entry-content form.checkout #order_review table.shop_table tfoot tr.order-total .amount, .woocommerce-checkout .entry-content form.checkout #order_review table.shop_table tfoot tr.order-total .woocommerce-Price-amount { font-size: 24px !important; font-weight: 800 !important; letter-spacing: -0.015em; color: var(--accent) !important; font-family: var(--font-display) !important; } .woocommerce-checkout .entry-content form.checkout #order_review table.shop_table tfoot tr.order-total small.includes_tax, .woocommerce-checkout .entry-content form.checkout #order_review table.shop_table tfoot tr.order-total small { display: block; margin-top: 6px; font-size: 12px; font-weight: 400; color: var(--text-muted) !important; } /* ============================================================ Ödeme yöntemleri ============================================================ */ .woocommerce-checkout .entry-content form.checkout #payment { background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; margin-top: 20px !important; } .woocommerce-checkout .entry-content form.checkout #payment::before { display: none !important; } .woocommerce-checkout .entry-content form.checkout #payment ul.payment_methods { border: 0 !important; padding: 0 !important; margin: 0 0 16px !important; list-style: none !important; display: flex !important; flex-direction: column; gap: 10px; } .woocommerce-checkout .entry-content form.checkout #payment ul.payment_methods > li { list-style: none !important; background: var(--bg-elevated) !important; border: 1px solid var(--border-light) !important; border-radius: var(--radius-md) !important; padding: 14px 16px !important; margin: 0 !important; transition: border-color var(--transition), background var(--transition), box-shadow var(--transition); } .woocommerce-checkout .entry-content form.checkout #payment ul.payment_methods > li:hover { border-color: var(--accent-dark) !important; } .woocommerce-checkout .entry-content form.checkout #payment ul.payment_methods > li:has(input[type="radio"]:checked) { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(224, 122, 95, 0.18) !important; background: #262626 !important; } .woocommerce-checkout .entry-content form.checkout #payment ul.payment_methods > li > label { display: inline-flex !important; align-items: center; gap: 10px; margin: 0 !important; font-weight: 600; color: var(--text-primary) !important; cursor: pointer; font-size: 14px; } .woocommerce-checkout .entry-content form.checkout #payment ul.payment_methods > li input[type="radio"] { accent-color: var(--accent); width: 16px; height: 16px; } .woocommerce-checkout .entry-content form.checkout #payment ul.payment_methods > li img { max-height: 24px; width: auto; margin-left: 8px; vertical-align: middle; } .woocommerce-checkout .entry-content form.checkout #payment ul.payment_methods .payment_box { background: var(--bg-tertiary) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-sm) !important; color: var(--text-secondary) !important; font-size: 13px !important; line-height: 1.55 !important; padding: 12px 14px !important; margin: 12px 0 0 !important; } .woocommerce-checkout .entry-content form.checkout #payment ul.payment_methods .payment_box::before { display: none !important; } .woocommerce-checkout .entry-content form.checkout #payment ul.payment_methods .payment_box a { color: var(--accent) !important; } /* Şartlar & koşullar */ .woocommerce-checkout .entry-content form.checkout .woocommerce-terms-and-conditions-wrapper { background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 0 14px !important; font-size: 13px; color: var(--text-secondary) !important; } .woocommerce-checkout .entry-content form.checkout .woocommerce-terms-and-conditions { margin: 0 0 12px !important; padding: 14px !important; max-height: 160px; overflow-y: auto; border: 1px solid var(--border) !important; border-radius: var(--radius-sm) !important; background: var(--bg-tertiary) !important; font-size: 12px; line-height: 1.55; color: var(--text-secondary); } /* --- "Siparişi Tamamla" CTA --- */ .woocommerce-checkout .entry-content form.checkout #payment .form-row.place-order { margin: 18px 0 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; } .woocommerce-checkout .entry-content form.checkout #payment #place_order { display: block !important; width: 100% !important; margin: 0 !important; padding: 18px 24px !important; min-height: 60px !important; font-size: 15px !important; font-weight: 700 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; border: 0 !important; border-radius: 999px !important; background: var(--accent) !important; color: #000 !important; box-shadow: 0 8px 24px rgba(224, 122, 95, 0.28) !important; cursor: pointer !important; transition: transform var(--transition), box-shadow var(--transition), background var(--transition); font-family: var(--font-sans) !important; } .woocommerce-checkout .entry-content form.checkout #payment #place_order:hover { background: var(--accent-hover) !important; transform: translateY(-1px); box-shadow: 0 12px 32px rgba(224, 122, 95, 0.4) !important; } .woocommerce-checkout .entry-content form.checkout #payment #place_order:active { transform: translateY(0); } .woocommerce-checkout .entry-content form.checkout #payment #place_order:disabled { opacity: 0.55; cursor: not-allowed; transform: none; } /* Güven şeridi */ .woocommerce-checkout .entry-content form.checkout #payment .place-order::after { content: "🔒 256-bit SSL ile şifrelenmiş güvenli ödeme"; display: block; margin-top: 14px; text-align: center; font-size: 12px; color: var(--text-muted); letter-spacing: 0.03em; } /* Checkbox */ .woocommerce-checkout .entry-content input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; vertical-align: middle; } /* WC notice kartları */ .woocommerce-checkout .entry-content .woocommerce-notices-wrapper .woocommerce-message, .woocommerce-checkout .entry-content .woocommerce-notices-wrapper .woocommerce-info, .woocommerce-checkout .entry-content .woocommerce-notices-wrapper .woocommerce-error, .woocommerce-checkout .entry-content .woocommerce-NoticeGroup { background: var(--bg-card) !important; border: 1px solid var(--border) !important; border-left: 3px solid var(--accent) !important; border-radius: var(--radius-md) !important; color: var(--text-primary) !important; padding: 14px 18px !important; box-shadow: var(--shadow-sm); margin: 0 0 18px !important; } .woocommerce-checkout .entry-content .woocommerce-notices-wrapper .woocommerce-error { border-left-color: #ef4444 !important; } .woocommerce-checkout .entry-content .woocommerce-notices-wrapper .woocommerce-message { border-left-color: #22c55e !important; } /* Yükleme overlay'i */ .woocommerce-checkout .entry-content .blockUI.blockOverlay { border-radius: var(--radius-md) !important; background-color: rgba(10, 10, 10, 0.65) !important; } /* ============================================================ Responsive ============================================================ */ @media (max-width: 1024px) { .woocommerce-checkout .entry-content form.checkout.woocommerce-checkout { grid-template-columns: 1fr !important; gap: 20px; } .woocommerce-checkout .entry-content form.checkout #customer_details, .woocommerce-checkout .entry-content form.checkout .customer-details, .woocommerce-checkout .entry-content form.checkout .checkout-order-review { grid-column: 1; } .woocommerce-checkout .entry-content form.checkout .checkout-order-review { position: static !important; top: auto !important; } } @media (max-width: 600px) { .woocommerce-checkout .page-header-plain { padding: 36px 0 22px !important; } .woocommerce-checkout .page-article { padding: 28px 0 70px !important; } .woocommerce-checkout .entry-content form.checkout .woocommerce-billing-fields__field-wrapper, .woocommerce-checkout .entry-content form.checkout .woocommerce-shipping-fields__field-wrapper, .woocommerce-checkout .entry-content form.checkout .woocommerce-additional-fields__field-wrapper { grid-template-columns: 1fr; } .woocommerce-checkout .entry-content form.checkout #customer_details .col-1, .woocommerce-checkout .entry-content form.checkout #customer_details .col-2, .woocommerce-checkout .entry-content form.checkout #order_review { padding: 22px 18px !important; } .woocommerce-checkout .entry-content form.checkout .woocommerce-billing-fields > h3, .woocommerce-checkout .entry-content form.checkout .woocommerce-shipping-fields > h3, .woocommerce-checkout .entry-content form.checkout #order_review_heading { font-size: 16px !important; } .woocommerce-checkout .entry-content form.checkout #payment #place_order { font-size: 14px !important; min-height: 54px !important; } } /* ============================================================ MY ACCOUNT — "Atelier Pro" professional dashboard Dark navy + warm coral · two-column · fully responsive WooCommerce / WordPress markup is preserved 1:1; visual layer only. ============================================================ */ /* Page background — match shop hero ambience */ body.woocommerce-account { background: radial-gradient(900px 600px at 90% 0%, rgba(224, 122, 95, 0.07), transparent 60%), radial-gradient(800px 600px at 0% 60%, rgba(110, 195, 197, 0.05), transparent 65%), var(--bg-primary) !important; } /* Page header — kipcak markup: .page-header-plain > .container > h1.page-title */ body.woocommerce-account .page-header-plain { text-align: center; padding: 60px 0 8px !important; border: 0 !important; background: transparent !important; margin-bottom: 0 !important; } body.woocommerce-account .page-header-plain .container { max-width: var(--max-width); } body.woocommerce-account .page-header-plain .page-title, body.woocommerce-account .page-header-plain h1.page-title { font-size: clamp(34px, 5vw, 48px) !important; font-weight: 700 !important; letter-spacing: -0.02em; color: var(--text-primary) !important; margin: 0 auto 6px !important; text-align: center; line-height: 1.1; position: relative; display: inline-block; } body.woocommerce-account .page-header-plain .page-title::after, body.woocommerce-account .page-header-plain h1.page-title::after { content: ""; display: block; width: 56px; height: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-dark)); border-radius: 2px; margin: 14px auto 0; } /* Article + entry-content wrappers */ body.woocommerce-account .page-article { padding: 24px 0 90px !important; background: transparent !important; } body.woocommerce-account .page-article > .container { max-width: var(--max-width); padding-left: 24px; padding-right: 24px; } body.woocommerce-account .page-article .entry-content { max-width: none !important; padding: 0 !important; margin: 0 !important; background: transparent !important; text-align: left; } /* Two-column grid container — applied to .woocommerce wrapper */ body.woocommerce-account .entry-content > .woocommerce, body.woocommerce-account .woocommerce { display: grid !important; grid-template-columns: 280px minmax(0, 1fr) !important; gap: 28px !important; align-items: flex-start !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; text-align: left !important; overflow: visible; } /* Defeat WC clearfix pseudo-elements that mess with grid */ body.woocommerce-account .woocommerce::before, body.woocommerce-account .woocommerce::after { content: none !important; display: none !important; } /* KILL WC's default float:30%/68% on nav + content so grid governs sizing */ body.woocommerce-account .woocommerce-MyAccount-navigation, body.woocommerce-account .woocommerce-MyAccount-content, .woocommerce-account .woocommerce-MyAccount-navigation, .woocommerce-account .woocommerce-MyAccount-content { float: none !important; width: auto !important; max-width: none !important; margin: 0 !important; clear: none !important; } /* Logged-out login/register page — eski tek-kolon 520px CAP'i kaldırıldı. Artık registration aktif olduğu için 2 kolon (login + register) yan yana yerleştirmek üzere genişliği serbest bırakıyoruz. v10 PATCH'inde .u-columns.col2-set zaten 2-kolon grid uyguluyor. */ body:not(.logged-in).woocommerce-account .entry-content > .woocommerce, body:not(.logged-in).woocommerce-account .woocommerce { display: block !important; max-width: 100% !important; width: 100% !important; margin: 0 auto !important; } /* Notices wrapper — full width across both columns when in grid */ body.woocommerce-account .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; } /* ============================================================ SIDEBAR — woocommerce-MyAccount-navigation ============================================================ */ body.woocommerce-account .woocommerce-MyAccount-navigation { background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-secondary) 100%); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px 14px; box-shadow: var(--shadow-md); position: sticky; top: 24px; overflow: hidden; } body.woocommerce-account .woocommerce-MyAccount-navigation::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--accent) 0%, var(--accent-dark) 50%, var(--accent) 100%); pointer-events: none; } body.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; background: transparent; border: 0; } body.woocommerce-account .woocommerce-MyAccount-navigation ul li { border: 0 !important; padding: 0; margin: 0; background: transparent; } body.woocommerce-account .woocommerce-MyAccount-navigation ul li a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 14.5px; font-weight: 500; text-decoration: none; background: transparent; border: 1px solid transparent; transition: all var(--transition); position: relative; overflow: hidden; } body.woocommerce-account .woocommerce-MyAccount-navigation ul li a::before { content: ""; width: 18px; height: 18px; flex-shrink: 0; background-repeat: no-repeat; background-position: center; background-size: contain; opacity: 0.75; transition: opacity var(--transition), transform var(--transition); } body.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover { background: var(--bg-tertiary); color: var(--text-primary); border-color: var(--border-light); transform: translateX(2px); } body.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover::before { opacity: 1; } /* Active state — coral pill */ body.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%); color: #fff; border-color: var(--accent-dark); box-shadow: 0 8px 22px rgba(224, 122, 95, 0.28), inset 0 1px 0 rgba(255,255,255,0.12); font-weight: 600; transform: none; } body.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a::before { opacity: 1; } /* Per-endpoint SVG icons */ body.woocommerce-account .woocommerce-MyAccount-navigation-link--dashboard a::before { background-image: url("data:image/svg+xml;utf8,"); } body.woocommerce-account .woocommerce-MyAccount-navigation-link--orders a::before { background-image: url("data:image/svg+xml;utf8,"); } body.woocommerce-account .woocommerce-MyAccount-navigation-link--downloads a::before { background-image: url("data:image/svg+xml;utf8,"); } body.woocommerce-account .woocommerce-MyAccount-navigation-link--edit-address a::before { background-image: url("data:image/svg+xml;utf8,"); } body.woocommerce-account .woocommerce-MyAccount-navigation-link--payment-methods a::before { background-image: url("data:image/svg+xml;utf8,"); } body.woocommerce-account .woocommerce-MyAccount-navigation-link--edit-account a::before { background-image: url("data:image/svg+xml;utf8,"); } body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a::before { background-image: url("data:image/svg+xml;utf8,"); } /* Active state — switch icons to white */ body.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a::before { filter: brightness(0) invert(1); } /* Logout — visually separated, warm tone */ body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout { margin-top: 10px !important; padding-top: 10px !important; border-top: 1px solid var(--border) !important; } body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--accent-hover) !important; } body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a:hover { background: rgba(224, 122, 95, 0.10) !important; color: var(--accent) !important; border-color: rgba(224, 122, 95, 0.30) !important; } /* ============================================================ CONTENT — woocommerce-MyAccount-content ============================================================ */ body.woocommerce-account .woocommerce-MyAccount-content { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 34px 36px; box-shadow: var(--shadow-md); color: var(--text-primary); min-width: 0; } /* Dashboard intro paragraphs */ body.woocommerce-account .woocommerce-MyAccount-content > p { color: var(--text-secondary); font-size: 15px; line-height: 1.7; margin: 0 0 16px; } body.woocommerce-account .woocommerce-MyAccount-content > p:first-of-type { font-size: 18px; color: var(--text-primary); font-weight: 500; padding: 18px 22px; background: linear-gradient(135deg, rgba(224, 122, 95, 0.10), rgba(110, 195, 197, 0.06)); border: 1px solid var(--border-light); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); margin-bottom: 20px; } body.woocommerce-account .woocommerce-MyAccount-content > p strong { color: var(--accent); font-weight: 700; } body.woocommerce-account .woocommerce-MyAccount-content a { color: var(--accent); font-weight: 500; } body.woocommerce-account .woocommerce-MyAccount-content a:hover { color: var(--accent-hover); text-decoration: underline; } /* Content headings (Orders, Addresses, Account Details, etc.) */ body.woocommerce-account .woocommerce-MyAccount-content h2, body.woocommerce-account .woocommerce-MyAccount-content h3 { font-size: 20px; color: var(--text-primary); margin: 28px 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--border); position: relative; } body.woocommerce-account .woocommerce-MyAccount-content h2:first-child, body.woocommerce-account .woocommerce-MyAccount-content h3:first-child { margin-top: 0; } body.woocommerce-account .woocommerce-MyAccount-content h2::after, body.woocommerce-account .woocommerce-MyAccount-content h3::after { content: ""; position: absolute; bottom: -1px; left: 0; width: 36px; height: 1px; background: var(--accent); } /* ============================================================ TABLES — orders, downloads ============================================================ */ body.woocommerce-account .woocommerce-MyAccount-content table, body.woocommerce-account .woocommerce-orders-table, body.woocommerce-account .shop_table { width: 100% !important; border-collapse: separate; border-spacing: 0; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--bg-secondary); margin: 0; } body.woocommerce-account .woocommerce-MyAccount-content table thead, body.woocommerce-account .shop_table thead { background: var(--bg-tertiary); } body.woocommerce-account .woocommerce-MyAccount-content table th, body.woocommerce-account .shop_table th { padding: 14px 18px !important; text-align: left; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--border) !important; background: transparent !important; } body.woocommerce-account .woocommerce-MyAccount-content table td, body.woocommerce-account .shop_table td { padding: 16px 18px !important; border-bottom: 1px solid var(--border) !important; color: var(--text-primary); font-size: 14.5px; vertical-align: middle; background: transparent !important; } body.woocommerce-account .woocommerce-MyAccount-content table tbody tr:last-child td, body.woocommerce-account .shop_table tbody tr:last-child td { border-bottom: 0 !important; } body.woocommerce-account .woocommerce-MyAccount-content table tbody tr:hover, body.woocommerce-account .shop_table tbody tr:hover { background: rgba(224, 122, 95, 0.04); } /* Order status badges */ body.woocommerce-account .woocommerce-orders-table__cell-order-status, body.woocommerce-account .order-status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; text-transform: capitalize; background: rgba(110, 195, 197, 0.10); color: var(--accent-2); border: 1px solid rgba(110, 195, 197, 0.30); } body.woocommerce-account .order-status.status-completed { background: rgba(34, 197, 94, 0.10); color: #4ade80; border-color: rgba(74, 222, 128, 0.30); } body.woocommerce-account .order-status.status-processing { background: rgba(110, 195, 197, 0.12); color: var(--accent-2); border-color: rgba(110, 195, 197, 0.30); } body.woocommerce-account .order-status.status-pending, body.woocommerce-account .order-status.status-on-hold { background: rgba(224, 122, 95, 0.12); color: var(--accent); border-color: rgba(224, 122, 95, 0.30); } body.woocommerce-account .order-status.status-cancelled, body.woocommerce-account .order-status.status-failed, body.woocommerce-account .order-status.status-refunded { background: rgba(239, 68, 68, 0.12); color: #f87171; border-color: rgba(248, 113, 113, 0.30); } /* Empty state notices — WC ships a WooCommerce icon font we don't load; hide pseudo-icon. */ body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info, body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-notice, body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Message, body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message { background: var(--bg-secondary) !important; border: 1px dashed var(--border-light) !important; border-top: 1px dashed var(--border-light) !important; border-left: 3px solid var(--accent) !important; border-radius: var(--radius-md) !important; color: var(--text-secondary) !important; padding: 20px 24px !important; display: flex !important; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; box-shadow: none !important; margin: 0 0 18px !important; list-style: none !important; width: 100%; box-sizing: border-box; } /* Kill the WC font-icon character that renders as fallback glyph */ body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info::before, body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-notice::before, body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Message::before, body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message::before, body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info::after, body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-notice::after, body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Message::after, body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message::after { content: none !important; display: none !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; position: static !important; } /* Button inside notice → align right */ body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info .button, body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message .button, body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Message .button { float: none !important; margin-left: auto; flex-shrink: 0; } /* ============================================================ ADDRESSES — billing & shipping cards (side by side) WC markup: .u-columns.col2-set.woocommerce-Addresses └─ .u-column1.col-1.woocommerce-Address (billing) └─ .u-column2.col-2.woocommerce-Address (shipping) We override WC's .col-1{float:left;width:48%} / .col-2{float:right;width:48%}. ============================================================ */ body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses, body.woocommerce-account .woocommerce-MyAccount-content .u-columns.woocommerce-Addresses, body.woocommerce-account .woocommerce-MyAccount-content .col2-set.addresses, body.woocommerce-account .woocommerce-MyAccount-content .col2-set.woocommerce-Addresses, .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important; gap: 20px !important; margin: 8px 0 0 !important; padding: 0 !important; width: 100% !important; float: none !important; clear: both !important; } /* Defeat WC clearfix on the wrapper that breaks grid item placement */ body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses::before, body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses::after, body.woocommerce-account .woocommerce-MyAccount-content .col2-set::before, body.woocommerce-account .woocommerce-MyAccount-content .col2-set::after { content: none !important; display: none !important; } /* Kill WC's .col-1/.col-2 float + 48% width so grid governs */ body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address, body.woocommerce-account .woocommerce-MyAccount-content .u-column1, body.woocommerce-account .woocommerce-MyAccount-content .u-column2, body.woocommerce-account .woocommerce-MyAccount-content .col-1, body.woocommerce-account .woocommerce-MyAccount-content .col-2, .woocommerce-account .woocommerce-MyAccount-content .col-1, .woocommerce-account .woocommerce-MyAccount-content .col-2 { float: none !important; width: auto !important; max-width: none !important; margin: 0 !important; clear: none !important; } body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address { background: var(--bg-secondary) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-md) !important; padding: 22px 24px !important; color: var(--text-primary) !important; transition: border-color var(--transition), transform var(--transition) !important; box-sizing: border-box; display: flex; flex-direction: column; gap: 4px; } body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address:hover { border-color: var(--accent) !important; transform: translateY(-2px); } /* Address header (template uses

) */ body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title { display: flex !important; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin: 0 0 12px !important; padding: 0 0 12px !important; border-bottom: 1px solid var(--border); } body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title h2, body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title h3 { font-size: 17px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; color: var(--text-primary) !important; font-weight: 600 !important; } body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title h2::after, body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title h3::after { display: none !important; content: none !important; } body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title .edit { font-size: 11.5px !important; font-weight: 600 !important; padding: 7px 14px !important; border-radius: 999px !important; background: var(--accent-soft) !important; color: var(--accent) !important; border: 1px solid rgba(224, 122, 95, 0.35) !important; transition: all var(--transition) !important; text-decoration: none !important; white-space: nowrap; letter-spacing: 0.04em; text-transform: uppercase; } body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title .edit:hover { background: var(--accent) !important; color: #fff !important; text-decoration: none !important; border-color: var(--accent) !important; } body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address address { color: var(--text-secondary); line-height: 1.7; font-style: normal; font-size: 14.5px; margin: 0; padding: 0; display: block; } /* ============================================================ FORMS — edit-account / edit-address / lost-password / login / register ============================================================ */ body.woocommerce-account .woocommerce-MyAccount-content form, body.woocommerce-account form.woocommerce-EditAccountForm, body.woocommerce-account form.edit-account, body.woocommerce-account form.woocommerce-address-fields, body.woocommerce-account form.lost_reset_password { background: transparent; padding: 0; margin: 0; } body.woocommerce-account .woocommerce-MyAccount-content form .form-row, body.woocommerce-account .woocommerce-MyAccount-content form p.form-row { margin: 0 0 18px !important; padding: 0 !important; width: 100%; } body.woocommerce-account .woocommerce-MyAccount-content form .form-row-first, body.woocommerce-account .woocommerce-MyAccount-content form .form-row-last { width: calc(50% - 10px) !important; display: inline-block; vertical-align: top; } body.woocommerce-account .woocommerce-MyAccount-content form .form-row-first { margin-right: 16px !important; } body.woocommerce-account .woocommerce-MyAccount-content form label { display: block; font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; letter-spacing: 0.02em; } body.woocommerce-account .woocommerce-MyAccount-content form label .required { color: var(--accent); text-decoration: none; } body.woocommerce-account .woocommerce-MyAccount-content form input[type="text"], body.woocommerce-account .woocommerce-MyAccount-content form input[type="email"], body.woocommerce-account .woocommerce-MyAccount-content form input[type="tel"], body.woocommerce-account .woocommerce-MyAccount-content form input[type="number"], body.woocommerce-account .woocommerce-MyAccount-content form input[type="password"], body.woocommerce-account .woocommerce-MyAccount-content form input.input-text, body.woocommerce-account .woocommerce-MyAccount-content form select, body.woocommerce-account .woocommerce-MyAccount-content form textarea { width: 100% !important; padding: 13px 16px !important; background: var(--bg-secondary) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-sm) !important; color: var(--text-primary) !important; font-size: 15px !important; font-family: inherit !important; line-height: 1.5 !important; transition: border-color var(--transition), background var(--transition), box-shadow var(--transition) !important; box-shadow: none !important; height: auto !important; min-height: 48px; } body.woocommerce-account .woocommerce-MyAccount-content form input::placeholder, body.woocommerce-account .woocommerce-MyAccount-content form textarea::placeholder { color: var(--text-faint); } body.woocommerce-account .woocommerce-MyAccount-content form input:hover, body.woocommerce-account .woocommerce-MyAccount-content form select:hover, body.woocommerce-account .woocommerce-MyAccount-content form textarea:hover { border-color: var(--border-light) !important; background: var(--bg-tertiary) !important; } body.woocommerce-account .woocommerce-MyAccount-content form input:focus, body.woocommerce-account .woocommerce-MyAccount-content form select:focus, body.woocommerce-account .woocommerce-MyAccount-content form textarea:focus { border-color: var(--accent) !important; background: var(--bg-tertiary) !important; box-shadow: 0 0 0 4px rgba(224, 122, 95, 0.15) !important; outline: none !important; } /* "Şifre değiştir" fieldset */ body.woocommerce-account .woocommerce-MyAccount-content fieldset { margin: 28px 0 18px !important; padding: 22px 24px !important; border: 1px solid var(--border) !important; border-radius: var(--radius-md) !important; background: var(--bg-secondary); } body.woocommerce-account .woocommerce-MyAccount-content fieldset legend { padding: 4px 12px !important; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); background: var(--bg-card); border: 1px solid var(--border); border-radius: 999px; } /* Buttons (Kaydet, Adresi kaydet, Yeniden gönder ...) */ body.woocommerce-account .woocommerce-MyAccount-content .button, body.woocommerce-account .woocommerce-MyAccount-content button[type="submit"], body.woocommerce-account .woocommerce-MyAccount-content input[type="submit"], body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 28px !important; background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%) !important; color: #fff !important; border: 1px solid var(--accent-dark) !important; border-radius: var(--radius-sm) !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: 0.04em; text-transform: uppercase !important; cursor: pointer; text-decoration: none !important; transition: all var(--transition) !important; box-shadow: 0 6px 16px rgba(224, 122, 95, 0.22) !important; min-height: 48px; } body.woocommerce-account .woocommerce-MyAccount-content .button:hover, body.woocommerce-account .woocommerce-MyAccount-content button[type="submit"]:hover, body.woocommerce-account .woocommerce-MyAccount-content input[type="submit"]:hover { background: linear-gradient(135deg, var(--accent-hover) 0%, var(--accent) 100%) !important; box-shadow: 0 10px 28px rgba(224, 122, 95, 0.36) !important; transform: translateY(-1px); } body.woocommerce-account .woocommerce-orders-table__cell-order-actions .button { padding: 8px 16px !important; font-size: 12px !important; min-height: 0; border-radius: 999px !important; } /* Order details / view order */ body.woocommerce-account .woocommerce-order-details, body.woocommerce-account .woocommerce-customer-details { margin-top: 28px; } body.woocommerce-account .woocommerce-order-details h2, body.woocommerce-account .woocommerce-customer-details h2 { font-size: 18px; } body.woocommerce-account .woocommerce-customer-details address { padding: 18px 22px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-secondary); font-style: normal; line-height: 1.7; } /* Pagination (orders) */ body.woocommerce-account .woocommerce-pagination { margin-top: 22px; text-align: center; } body.woocommerce-account .woocommerce-pagination ul.page-numbers { display: inline-flex; gap: 6px; list-style: none; padding: 0; margin: 0; border: 0; } body.woocommerce-account .woocommerce-pagination ul.page-numbers li { margin: 0; border: 0; } body.woocommerce-account .woocommerce-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 12px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 14px; font-weight: 500; transition: all var(--transition); } body.woocommerce-account .woocommerce-pagination .page-numbers:hover, body.woocommerce-account .woocommerce-pagination .page-numbers.current { background: var(--accent); border-color: var(--accent); color: #fff; } /* "Beni hatırla" checkbox */ body.woocommerce-account .woocommerce-form__label-for-checkbox, body.woocommerce-account label.woocommerce-form__label-for-checkbox { display: inline-flex !important; align-items: center; gap: 8px; cursor: pointer; color: var(--text-secondary); font-size: 14px; } body.woocommerce-account input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; } /* ============================================================ MOBILE RESPONSIVENESS ============================================================ */ @media (max-width: 1024px) { body.woocommerce-account .woocommerce { grid-template-columns: 240px 1fr !important; gap: 20px !important; } body.woocommerce-account .woocommerce-MyAccount-content { padding: 28px 28px; } } @media (max-width: 860px) { body.woocommerce-account .woocommerce { grid-template-columns: 1fr !important; gap: 18px !important; padding: 0 18px !important; } body.woocommerce-account .woocommerce-MyAccount-navigation { position: static; padding: 16px 12px; } /* Horizontal scrollable tabs on tablet */ body.woocommerce-account .woocommerce-MyAccount-navigation ul { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 6px; scrollbar-width: thin; scrollbar-color: var(--border-light) transparent; padding-bottom: 4px; -webkit-overflow-scrolling: touch; } body.woocommerce-account .woocommerce-MyAccount-navigation ul::-webkit-scrollbar { height: 4px; } body.woocommerce-account .woocommerce-MyAccount-navigation ul::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 4px; } body.woocommerce-account .woocommerce-MyAccount-navigation ul li { flex-shrink: 0; } body.woocommerce-account .woocommerce-MyAccount-navigation ul li a { white-space: nowrap; padding: 10px 14px; font-size: 14px; } body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout { margin-top: 0 !important; padding-top: 0 !important; border-top: 0 !important; margin-left: 8px; padding-left: 8px; border-left: 1px solid var(--border) !important; } } @media (max-width: 600px) { body.woocommerce-account .page-header-plain, body.woocommerce-account .entry-header { padding: 40px 0 6px !important; } body.woocommerce-account .page-header-plain .entry-title, body.woocommerce-account .entry-header .entry-title, body.woocommerce-account h1.entry-title { font-size: 30px; } body.woocommerce-account .woocommerce { padding: 0 14px !important; margin-top: 20px !important; } body.woocommerce-account .woocommerce-MyAccount-content { padding: 22px 18px; border-radius: var(--radius-md); } body.woocommerce-account .woocommerce-MyAccount-content > p:first-of-type { font-size: 16px; padding: 16px 18px; } body.woocommerce-account .woocommerce-MyAccount-content h2, body.woocommerce-account .woocommerce-MyAccount-content h3 { font-size: 17px; } body.woocommerce-account .woocommerce-MyAccount-content form .form-row-first, body.woocommerce-account .woocommerce-MyAccount-content form .form-row-last { width: 100% !important; margin-right: 0 !important; } /* Tables become card-list */ body.woocommerce-account .woocommerce-MyAccount-content table, body.woocommerce-account .woocommerce-orders-table, body.woocommerce-account .shop_table { border: 0; background: transparent; } body.woocommerce-account .woocommerce-MyAccount-content table thead, body.woocommerce-account .shop_table thead { display: none; } body.woocommerce-account .woocommerce-MyAccount-content table tbody tr, body.woocommerce-account .shop_table tbody tr { display: block; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 12px; } body.woocommerce-account .woocommerce-MyAccount-content table tbody td, body.woocommerce-account .shop_table tbody td { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 0 !important; border-bottom: 1px dashed var(--border) !important; text-align: right; } body.woocommerce-account .woocommerce-MyAccount-content table tbody td:last-child, body.woocommerce-account .shop_table tbody td:last-child { border-bottom: 0 !important; padding-top: 12px !important; } body.woocommerce-account .woocommerce-MyAccount-content table tbody td::before, body.woocommerce-account .shop_table tbody td::before { content: attr(data-title); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); flex-shrink: 0; } body.woocommerce-account .woocommerce-orders-table__cell-order-actions { justify-content: flex-end !important; } } /* Breadcrumb */ .woocommerce-breadcrumb { color: var(--text-muted) !important; font-size: 14px; padding: 16px 0; margin-bottom: 24px; border-bottom: 1px solid var(--border); } .woocommerce-breadcrumb a { color: var(--accent) !important; } /* ============================================================ SHOP — "Atelier Pro" professional storefront Hero · category chips · toolbar · grid · cards · pagination ============================================================ */ /* === Page background — subtle navy gradient with decorative blobs === */ .woocommerce.archive, .woocommerce-page.archive, body.archive.woocommerce, body.post-type-archive-product, body.tax-product_cat, body.tax-product_tag { background: radial-gradient(900px 600px at 90% 0%, rgba(224, 122, 95, 0.07), transparent 60%), radial-gradient(800px 600px at 0% 60%, rgba(110, 195, 197, 0.05), transparent 65%), var(--bg-primary) !important; } /* Container padding */ .woocommerce .wc-main, .woocommerce-page .wc-main { padding: 24px 0 90px !important; position: relative; } /* Hide WC's default page header — custom hero rendered via hook */ .woocommerce .woocommerce-products-header, .woocommerce-page .woocommerce-products-header { display: none !important; } /* === HERO ================================================== */ .sandline-shop-hero { text-align: center; max-width: 760px; margin: 0 auto 36px; padding: 4px 0 28px; position: relative; } /* Eyebrow boş ise (örn. mağaza sayfasında) altında margin doğmasın */ .sandline-shop-hero .shop-hero-eyebrow:empty { display: none; } /* Decorative side ornaments */ .sandline-shop-hero::before, .sandline-shop-hero::after { content: ''; position: absolute; top: 50%; width: 80px; height: 1px; background: linear-gradient(90deg, transparent, rgba(224, 122, 95, 0.5), transparent); transform: translateY(-50%); pointer-events: none; } .sandline-shop-hero::before { left: -10%; } .sandline-shop-hero::after { right: -10%; } @media (max-width: 1024px) { .sandline-shop-hero::before, .sandline-shop-hero::after { display: none; } } .shop-hero-eyebrow { display: inline-flex; align-items: center; gap: 14px; padding: 7px 18px; border: 1px solid rgba(224, 122, 95, 0.28); border-radius: 999px; background: rgba(224, 122, 95, 0.05); font-size: 10px; font-weight: 700; letter-spacing: 0.34em; text-transform: uppercase; color: var(--accent); margin: 0 0 22px; } .shop-hero-eyebrow::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: shopHeroDot 2.4s ease-in-out infinite; } @keyframes shopHeroDot { 0%, 100% { box-shadow: 0 0 0 0 rgba(224, 122, 95, 0.55); } 50% { box-shadow: 0 0 0 6px rgba(224, 122, 95, 0); } } .shop-hero-title { font-size: clamp(2.2rem, 5.2vw, 3.6rem) !important; line-height: 1 !important; font-weight: 800 !important; letter-spacing: 0.04em !important; margin: 0 !important; padding: 0 !important; color: var(--text-primary) !important; text-align: center !important; text-transform: uppercase !important; background: linear-gradient(180deg, #ffffff 0%, #c8d0de 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .shop-hero-tagline { max-width: 560px; margin: 20px auto 0 !important; padding: 0 !important; color: var(--text-secondary) !important; font-size: 1rem !important; line-height: 1.7 !important; font-weight: 400 !important; font-style: italic; } .shop-hero-count { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; padding: 7px 16px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 999px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)); color: var(--text-secondary); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; } .shop-hero-count::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } /* === CATEGORY CHIPS (rendered via woocommerce_archive_description hook) === */ .shop-cat-chips { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 0 auto 44px; padding: 0 16px; max-width: 1100px; } .shop-cat-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 999px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.008)); color: var(--text-secondary); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .shop-cat-chip:hover { color: var(--accent); border-color: rgba(224, 122, 95, 0.42); background: rgba(224, 122, 95, 0.08); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 8, 24, 0.4); } .shop-cat-chip.is-active { background: linear-gradient(135deg, #f0a48e 0%, #e07a5f 60%, #c25a3f 100%); border-color: transparent; color: #fff; box-shadow: 0 6px 18px rgba(224, 122, 95, 0.45); } .shop-cat-chip__count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 18px; padding: 0 6px; border-radius: 9px; background: rgba(255, 255, 255, 0.08); color: inherit; font-size: 10px; font-weight: 700; opacity: 0.85; } .shop-cat-chip.is-active .shop-cat-chip__count { background: rgba(255, 255, 255, 0.22); color: #fff; } /* === TOOLBAR (glass capsule) =============================== */ .sandline-shop-toolbar { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px; margin: 0 0 36px !important; padding: 12px 18px !important; width: 100%; clear: both; background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.008)); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 14px; backdrop-filter: blur(8px); } .sandline-shop-toolbar .woocommerce-result-count { float: none !important; margin: 0 !important; padding: 0 !important; font-size: 11px !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; color: var(--text-muted) !important; font-weight: 600 !important; display: none; /* hidden — count badge already in hero */ } .sandline-shop-toolbar .woocommerce-ordering { float: none !important; margin: 0 0 0 auto !important; position: relative; display: inline-flex; align-items: center; gap: 12px; } .sandline-shop-toolbar .woocommerce-ordering::before { content: 'Sırala'; color: var(--text-muted); font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; } .sandline-shop-toolbar .woocommerce-ordering select { min-width: 220px; padding: 11px 40px 11px 16px !important; font-size: 13px !important; font-weight: 500; color: var(--text-primary) !important; background: url("data:image/svg+xml;utf8,") no-repeat right 14px center, linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)) !important; background-color: transparent !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 10px !important; appearance: none !important; -webkit-appearance: none !important; cursor: pointer; transition: all 0.25s ease; } .sandline-shop-toolbar .woocommerce-ordering select:hover, .sandline-shop-toolbar .woocommerce-ordering select:focus { border-color: rgba(224, 122, 95, 0.45) !important; outline: none; box-shadow: 0 0 0 4px rgba(224, 122, 95, 0.1); } .sandline-shop-toolbar .woocommerce-ordering select option { background: #121925; color: var(--text-primary); } /* === PRODUCT GRID ========================================== */ .woocommerce ul.products, .woocommerce-page ul.products { clear: both !important; display: grid !important; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important; grid-auto-flow: row dense !important; justify-items: stretch !important; justify-content: start !important; align-items: stretch !important; gap: 28px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; padding-inline-start: 0 !important; margin-inline-start: 0 !important; text-align: left !important; list-style: none !important; } .woocommerce ul.products::before, .woocommerce ul.products::after, .woocommerce-page ul.products::before, .woocommerce-page ul.products::after { content: none !important; display: none !important; } .woocommerce ul.products > *:not(li) { display: none !important; } .woocommerce ul.products > li:not(.product):not(.product-category) { display: none !important; } .woocommerce ul.products > li.product:first-of-type { grid-column-start: 1 !important; } /* === PRODUCT CARD — "Atelier Boutique" ===================== Clean luxury e-commerce styling. WC markup: ← [.onsale, img, h2, .price] ← sibling, sits at bottom ============================================================ */ .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { position: relative; background: #161e2c !important; border: 1px solid rgba(255, 255, 255, 0.06) !important; border-radius: 14px !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; width: auto !important; margin: 0 !important; padding: 0 !important; text-align: left !important; isolation: isolate; transition: transform 0.45s cubic-bezier(0.34, 1.4, 0.64, 1), border-color 0.3s ease, box-shadow 0.4s ease !important; } .woocommerce ul.products li.product:hover, .woocommerce-page ul.products li.product:hover { transform: translateY(-4px); border-color: rgba(224, 122, 95, 0.45) !important; box-shadow: 0 20px 44px rgba(0, 8, 24, 0.5) !important; } /* The product link wraps img + h2 + price */ .woocommerce ul.products li.product > a.woocommerce-LoopProduct-link, .woocommerce-page ul.products li.product > a.woocommerce-LoopProduct-link { display: flex !important; flex-direction: column !important; text-decoration: none !important; color: inherit !important; flex: 1 1 auto; background: transparent !important; } /* === IMAGE === */ .woocommerce ul.products li.product img, .woocommerce-page ul.products li.product img { display: block !important; width: 100% !important; height: auto !important; aspect-ratio: 4 / 5 !important; object-fit: cover !important; margin: 0 !important; background: var(--bg-tertiary); transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); order: 1; } .woocommerce ul.products li.product:hover img { transform: scale(1.04); } /* === TITLE === */ .woocommerce ul.products li.product h2, .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce-page ul.products li.product h2, .woocommerce-page ul.products li.product .woocommerce-loop-product__title { order: 2; position: relative; z-index: 2; background: #161e2c !important; font-size: 0.92rem !important; font-weight: 500 !important; line-height: 1.45 !important; letter-spacing: 0.005em !important; color: var(--text-primary) !important; padding: 18px 18px 8px !important; margin: 0 !important; min-height: 2.7em; transition: color 0.3s ease; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .woocommerce ul.products li.product:hover .woocommerce-loop-product__title { color: var(--accent) !important; } /* === PRICE === */ .woocommerce ul.products li.product .price, .woocommerce-page ul.products li.product .price { order: 3; position: relative; z-index: 2; background: #161e2c !important; color: var(--accent) !important; font-weight: 700 !important; font-size: 1.05rem !important; padding: 0 18px 16px !important; margin: 0 !important; display: flex !important; align-items: baseline; gap: 10px; flex-wrap: wrap; letter-spacing: 0.005em; font-variant-numeric: tabular-nums; } .woocommerce ul.products li.product .price .woocommerce-Price-amount { color: var(--accent) !important; font-weight: 700 !important; } .woocommerce ul.products li.product .price .woocommerce-Price-currencySymbol { color: inherit !important; margin-right: 1px; font-weight: 700; } .woocommerce ul.products li.product .price .call-for-price { color: var(--accent) !important; font-style: normal !important; font-weight: 700 !important; font-size: 0.78rem !important; text-transform: uppercase; letter-spacing: 0.14em; } .woocommerce ul.products li.product .price del { color: var(--text-muted) !important; opacity: 0.7; font-weight: 500 !important; font-size: 0.85rem !important; text-decoration: line-through; text-decoration-thickness: 1px; order: 2; } .woocommerce ul.products li.product .price del .woocommerce-Price-amount, .woocommerce ul.products li.product .price del .woocommerce-Price-currencySymbol { color: inherit !important; font-weight: 500 !important; } .woocommerce ul.products li.product .price ins { background: transparent !important; text-decoration: none !important; color: var(--accent) !important; font-weight: 700 !important; order: 1; } .woocommerce ul.products li.product .price ins .woocommerce-Price-amount, .woocommerce ul.products li.product .price ins .woocommerce-Price-currencySymbol { color: var(--accent) !important; } /* === ADD-TO-CART BUTTON — boutique outline → fill on card hover === */ .woocommerce ul.products li.product .button, .woocommerce-page ul.products li.product .button { position: relative; margin: 0 14px 14px !important; padding: 12px 16px !important; background: transparent !important; color: var(--accent) !important; border: 1.5px solid rgba(224, 122, 95, 0.45) !important; border-radius: 10px !important; font-family: inherit !important; font-weight: 700 !important; font-size: 11.5px !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; text-align: center !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px; line-height: 1 !important; cursor: pointer; overflow: hidden; transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.25s ease !important; } /* Arrow icon after button text */ .woocommerce ul.products li.product .button::after, .woocommerce-page ul.products li.product .button::after { content: ''; width: 14px; height: 14px; flex-shrink: 0; background-color: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; transition: transform 0.3s ease; } /* Direct hover on button itself */ .woocommerce ul.products li.product .button:hover, .woocommerce-page ul.products li.product .button:hover { background: linear-gradient(135deg, #f0a48e 0%, #e07a5f 55%, #c25a3f 100%) !important; border-color: transparent !important; color: #fff !important; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(224, 122, 95, 0.42); } .woocommerce ul.products li.product .button:hover::after, .woocommerce-page ul.products li.product .button:hover::after { transform: translateX(4px); } .woocommerce ul.products li.product .button:active { transform: translateY(0); } /* When the whole card is hovered, lift the button too — subtle pre-fill */ .woocommerce ul.products li.product:hover .button { background: rgba(224, 122, 95, 0.08) !important; border-color: rgba(224, 122, 95, 0.7) !important; } .woocommerce ul.products li.product:hover .button:hover { background: linear-gradient(135deg, #f0a48e 0%, #e07a5f 55%, #c25a3f 100%) !important; border-color: transparent !important; } /* "Sepete eklendi" confirmation link — teal accent */ .woocommerce ul.products li.product .added_to_cart { margin: 0 14px 14px !important; padding: 10px 14px !important; background: rgba(110, 195, 197, 0.1) !important; color: var(--accent-2) !important; border: 1.5px solid rgba(110, 195, 197, 0.45) !important; border-radius: 10px !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; text-decoration: none !important; text-align: center !important; display: flex !important; align-items: center; justify-content: center; gap: 8px; transition: all 0.25s ease !important; } .woocommerce ul.products li.product .added_to_cart:hover { background: var(--accent-2) !important; color: var(--bg-primary) !important; border-color: transparent !important; } /* === SALE BADGE — minimal coral chip === */ .woocommerce span.onsale, .woocommerce ul.products li.product .onsale { background: linear-gradient(135deg, #f0a48e 0%, #e07a5f 100%) !important; color: #fff !important; border-radius: 6px !important; min-height: auto !important; min-width: auto !important; padding: 5px 10px !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; line-height: 1 !important; top: 12px !important; left: 12px !important; right: auto !important; margin: 0 !important; position: absolute !important; z-index: 4; box-shadow: 0 4px 12px rgba(224, 122, 95, 0.4); } /* Out-of-stock state — diagonal stripes overlay */ .woocommerce ul.products li.product.outofstock a.woocommerce-LoopProduct-link::before { content: 'Tükendi'; position: absolute; top: 14px; right: 14px; z-index: 4; padding: 6px 14px; border-radius: 999px; background: rgba(11, 16, 24, 0.85); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--text-secondary); font-size: 10px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1; } .woocommerce ul.products li.product.outofstock a img { filter: grayscale(0.6) brightness(0.85); } /* === PAGINATION ============================================ */ .woocommerce nav.woocommerce-pagination, .woocommerce-page nav.woocommerce-pagination { margin-top: 64px; text-align: center; border: none; clear: both; } .woocommerce nav.woocommerce-pagination ul { border: none !important; display: inline-flex; gap: 8px; padding: 8px !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.008)); border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.07) !important; } .woocommerce nav.woocommerce-pagination ul li { border: none !important; margin: 0 !important; } .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { min-width: 42px; height: 42px; line-height: 42px !important; padding: 0 14px !important; border: 0 !important; border-radius: 999px !important; color: var(--text-secondary) !important; background: transparent !important; font-weight: 600 !important; font-size: 13px !important; transition: all 0.28s ease; display: inline-flex; align-items: center; justify-content: center; } .woocommerce nav.woocommerce-pagination ul li a:hover { background: rgba(224, 122, 95, 0.1) !important; color: var(--accent) !important; } .woocommerce nav.woocommerce-pagination ul li span.current { background: linear-gradient(135deg, #f0a48e 0%, #e07a5f 60%, #c25a3f 100%) !important; color: #fff !important; box-shadow: 0 4px 14px rgba(224, 122, 95, 0.4); } /* === RESPONSIVE ============================================ */ @media (min-width: 768px) and (max-width: 1199px) { .woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: repeat(3, 1fr) !important; } } @media (max-width: 768px) { .sandline-shop-hero { margin-bottom: 36px; padding: 16px 0 32px; } .shop-hero-eyebrow { font-size: 9px; letter-spacing: 0.24em; padding: 6px 14px; } .shop-hero-tagline { font-size: 0.9rem !important; } .sandline-shop-toolbar { padding: 10px 12px !important; margin-bottom: 24px !important; } .sandline-shop-toolbar .woocommerce-ordering::before { display: none; } .sandline-shop-toolbar .woocommerce-ordering select { min-width: 0; width: 100%; } /* === Mobile category chip strip (horizontal scroll) === On phones the chips were `flex-wrap: wrap` so every category broke to its own line — a messy stack. Switch to a single-row, finger-scrollable strip with snap points and edge-fade gradients to indicate overflow. Hidden scrollbar (cleaner; still scrollable via touch and wheel). */ .shop-cat-chips { position: relative; gap: 8px; margin-bottom: 28px; padding: 4px 16px 14px; max-width: 100%; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; /* Firefox */ mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%); } .shop-cat-chips::-webkit-scrollbar { display: none; } /* WebKit */ .shop-cat-chip { flex: 0 0 auto; padding: 9px 16px; font-size: 12px; letter-spacing: 0.06em; scroll-snap-align: start; white-space: nowrap; } .shop-cat-chip__count { min-width: 20px; height: 18px; font-size: 10px; } } @media (max-width: 600px) { .woocommerce .wc-main, .woocommerce-page .wc-main { padding: 16px 0 70px !important; } .woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; } .woocommerce ul.products li.product { border-radius: 12px !important; } .woocommerce ul.products li.product h2, .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 0.82rem !important; padding: 12px 12px 4px !important; min-height: 2.6em; } .woocommerce ul.products li.product .price { font-size: 0.95rem !important; padding: 0 12px 12px !important; gap: 6px; } .woocommerce ul.products li.product .price del { font-size: 0.78rem !important; } .woocommerce ul.products li.product .button, .woocommerce ul.products li.product .added_to_cart { margin: 0 10px 10px !important; padding: 10px 8px !important; font-size: 10px !important; letter-spacing: 0.08em !important; gap: 6px; } .woocommerce ul.products li.product .button::after, .woocommerce-page ul.products li.product .button::after { width: 12px; height: 12px; } .woocommerce span.onsale, .woocommerce ul.products li.product .onsale { top: 10px !important; left: 10px !important; padding: 5px 10px !important; font-size: 9px !important; } .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { min-width: 36px; height: 36px; line-height: 36px !important; padding: 0 10px !important; font-size: 12px !important; } } /* ============================================================ FOOTER v3 — "Editorial Statement" Markup: themes/kipcak/footer.php Namespace: .kp-footer__* (eski .site-footer/.footer-grid kuralları bu HTML'e ETKİ ETMEZ → browser cache temizlenmeden yeni tasarım görünür) ============================================================ */ .kp-footer { position: relative; background: #0a0d14; color: var(--text-secondary); font-family: 'Inter', system-ui, -apple-system, sans-serif; margin-top: 120px; padding: 0; overflow: hidden; } /* Dramatic radial spotlight + subtle horizontal weave lines for textile vibe */ .kp-footer::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 1200px 600px at 70% -20%, rgba(224, 122, 95, 0.10) 0%, transparent 65%), radial-gradient(ellipse 800px 400px at 10% 100%, rgba(110, 195, 197, 0.05) 0%, transparent 60%); pointer-events: none; z-index: 0; } .kp-footer::after { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(255,255,255,0.012) 39px, rgba(255,255,255,0.012) 40px); pointer-events: none; z-index: 0; } /* Top hairline coral edge */ .kp-footer__edge { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%); opacity: 0.55; z-index: 1; } .kp-footer__shell { position: relative; z-index: 2; max-width: 1320px; margin: 0 auto; padding: 56px clamp(20px, 4vw, 64px) 28px; } /* ============================================================ 1) META BAR (top): brand logo only (Est. rozet kaldırıldı) ============================================================ */ .kp-footer__meta { display: flex; align-items: center; justify-content: flex-start; gap: 16px; padding-bottom: 36px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .kp-footer__mark { display: inline-flex; align-items: center; text-decoration: none; transition: opacity var(--transition); } .kp-footer__mark:hover { opacity: 0.8; } .kp-footer .kp-footer__mark-img, .kp-footer__mark-img { height: 140px !important; max-height: 140px !important; width: auto !important; max-width: 400px !important; display: block; object-fit: contain; position: relative; z-index: 2; /* Logo rendered in its native black colour. */ } /* Same warm glow plate behind the footer logo so the black mark stays visible on the dark footer background. */ .kp-footer .kp-footer__mark { position: relative; display: inline-block; isolation: isolate; } /* Footer logo backdrop — strong slate spotlight centred behind the logo. Matches the same lit-slate tone the header uses on its left side, just shaped as a radial because the footer logo is centred. */ .kp-footer .kp-footer__mark::before { content: ""; position: absolute; inset: -45% -40%; background: radial-gradient(ellipse 60% 65% at 50% 50%, rgba(150, 165, 188, 0.95) 0%, rgba(126, 142, 168, 0.75) 22%, rgba(96, 112, 138, 0.45) 48%, rgba(52, 64, 84, 0.15) 72%, transparent 100%); filter: blur(34px); border-radius: 50%; z-index: 1; pointer-events: none; opacity: 1; } @media (max-width: 720px) { .kp-footer .kp-footer__mark-img, .kp-footer__mark-img { height: 88px !important; max-height: 88px !important; max-width: 260px !important; } } .kp-footer__mark-text { font-size: 22px; font-weight: 700; color: var(--text-primary); letter-spacing: 0.18em; text-transform: uppercase; } /* ============================================================ 2) HERO: statement (sol, 60%) + newsletter card (sağ, 40%) ============================================================ */ .kp-footer__hero { display: grid; grid-template-columns: 1.4fr 1fr; gap: 72px; align-items: start; padding: 64px 0 56px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } /* ---- Statement (left) ---- */ .kp-footer__headline { font-size: clamp(32px, 4.4vw, 64px); line-height: 1.05; font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); margin: 0 0 24px; max-width: 18ch; } /* coral period as accent */ .kp-footer__headline::after { content: '.'; color: var(--accent); margin-left: -0.05em; } .kp-footer__lede { font-size: 16px; line-height: 1.65; color: var(--text-secondary); max-width: 44ch; margin: 0 0 36px; font-weight: 300; } .kp-footer__cta-row { display: flex; flex-wrap: wrap; gap: 12px; } .kp-footer__cta { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.025); color: var(--text-primary); text-decoration: none; font-size: 14px; font-weight: 500; letter-spacing: 0.01em; transition: transform var(--transition), border-color var(--transition), background var(--transition), box-shadow var(--transition), color var(--transition); } .kp-footer__cta svg { opacity: 0.85; transition: opacity var(--transition); } .kp-footer__cta:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.22); color: var(--text-primary); } .kp-footer__cta:hover svg { opacity: 1; } .kp-footer__cta--primary { background: var(--accent); border-color: var(--accent); color: #0a0d14; font-weight: 700; box-shadow: 0 10px 28px rgba(224, 122, 95, 0.22); } .kp-footer__cta--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #0a0d14; box-shadow: 0 14px 34px rgba(224, 122, 95, 0.36); } /* ---- Newsletter card (right) ---- */ .kp-footer__newsletter { position: relative; padding: 36px 32px 32px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.015) 100%); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.04); } /* coral glow accent on top edge */ .kp-footer__newsletter::before { content: ''; position: absolute; top: -1px; left: 24px; right: 24px; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0.8; border-radius: 999px; } .kp-footer__pill { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); background: rgba(224, 122, 95, 0.10); border: 1px solid rgba(224, 122, 95, 0.25); padding: 6px 12px; border-radius: 999px; margin-bottom: 18px; } .kp-footer__newsletter-title { margin: 0 0 10px; font-size: 22px; line-height: 1.3; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; } .kp-footer__newsletter-sub { margin: 0 0 22px; font-size: 13px; line-height: 1.6; color: var(--text-secondary); } /* Fallback form (when shortcode renders nothing) */ .kp-footer__fallback-form { display: flex; gap: 8px; align-items: stretch; } .kp-footer__fallback-form input[type="email"] { flex: 1; min-width: 0; height: 46px; padding: 0 18px; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 999px; color: var(--text-primary); font-size: 14px; outline: none; transition: border-color var(--transition), background var(--transition), box-shadow var(--transition); } .kp-footer__fallback-form input[type="email"]:focus { border-color: var(--accent); background: rgba(0, 0, 0, 0.5); box-shadow: 0 0 0 3px rgba(224, 122, 95, 0.18); } .kp-footer__fallback-form input::placeholder { color: var(--text-muted); } .kp-footer__fallback-form button[type="submit"] { display: inline-flex; align-items: center; gap: 6px; height: 46px; padding: 0 22px; background: var(--accent); border: 1px solid var(--accent); border-radius: 999px; color: #0a0d14; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; box-shadow: 0 8px 22px rgba(224, 122, 95, 0.24); transition: transform var(--transition), background var(--transition), box-shadow var(--transition); } .kp-footer__fallback-form button[type="submit"]:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(224, 122, 95, 0.34); } .kp-footer__form-hint { margin: 14px 0 0; font-size: 11px; color: var(--text-faint); font-style: italic; line-height: 1.5; } /* MailPoet / MC4WP / CF7 — generic skin so real shortcodes blend in too */ .kp-footer__newsletter-form .mailpoet_form, .kp-footer__newsletter-form .mc4wp-form, .kp-footer__newsletter-form .wpcf7-form { width: 100%; } .kp-footer__newsletter-form .mailpoet_form_form, .kp-footer__newsletter-form .mc4wp-form-fields { display: flex; flex-wrap: wrap; gap: 8px; } .kp-footer__newsletter-form input[type="email"], .kp-footer__newsletter-form input[type="text"], .kp-footer__newsletter-form .mailpoet_text, .kp-footer__newsletter-form .mailpoet_email { flex: 1 1 200px; min-width: 0; height: 46px !important; padding: 0 18px !important; background: rgba(0, 0, 0, 0.35) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: 999px !important; color: var(--text-primary) !important; font-size: 14px !important; outline: none !important; box-shadow: none !important; } .kp-footer__newsletter-form input[type="email"]:focus, .kp-footer__newsletter-form input[type="text"]:focus, .kp-footer__newsletter-form .mailpoet_text:focus, .kp-footer__newsletter-form .mailpoet_email:focus { border-color: var(--accent) !important; background: rgba(0, 0, 0, 0.5) !important; box-shadow: 0 0 0 3px rgba(224, 122, 95, 0.18) !important; } .kp-footer__newsletter-form input[type="submit"], .kp-footer__newsletter-form button[type="submit"], .kp-footer__newsletter-form .mailpoet_submit { height: 46px !important; padding: 0 22px !important; background: var(--accent) !important; border: 1px solid var(--accent) !important; border-radius: 999px !important; color: #0a0d14 !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; cursor: pointer; box-shadow: 0 8px 22px rgba(224, 122, 95, 0.24) !important; transition: transform var(--transition), background var(--transition); } .kp-footer__newsletter-form input[type="submit"]:hover, .kp-footer__newsletter-form button[type="submit"]:hover, .kp-footer__newsletter-form .mailpoet_submit:hover { background: var(--accent-hover) !important; transform: translateY(-2px); } .kp-footer__newsletter-form .mailpoet_validate_success, .kp-footer__newsletter-form .mailpoet_message { color: #6ec3c5; font-size: 13px; margin-top: 10px; } .kp-footer__newsletter-form .mailpoet_validate_error { color: #ff7a7a; font-size: 13px; margin-top: 10px; } /* ============================================================ 3) INLINE LINK STRIP — tek satır yatay, nokta ayraçlı ============================================================ */ .kp-footer__inline-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; padding: 32px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .kp-footer__inline-nav a { position: relative; color: var(--text-secondary); font-size: 14px; font-weight: 400; letter-spacing: 0.01em; text-decoration: none; transition: color var(--transition); } .kp-footer__inline-nav a:hover { color: var(--accent); } /* dot separator between links (desktop) */ @media (min-width: 768px) { .kp-footer__inline-nav a + a::before { content: '·'; position: absolute; left: -17px; top: 50%; transform: translateY(-55%); color: rgba(255, 255, 255, 0.18); font-weight: 700; pointer-events: none; } } /* ============================================================ 4) ALT BAR — copyright | locale | credit ============================================================ */ .kp-footer__base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding: 24px 0 4px; font-size: 12.5px; color: var(--text-muted); letter-spacing: 0.02em; } .kp-footer__copy { margin: 0; } .kp-footer__copy strong { color: var(--text-primary); font-weight: 600; } .kp-footer__locale { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); } .kp-footer__locale svg { color: var(--accent); flex-shrink: 0; } .kp-footer__credit { display: inline-flex; align-items: center; gap: 10px; color: var(--text-muted); text-decoration: none; padding: 4px 6px; border-radius: 6px; transition: color var(--transition), background var(--transition); } .kp-footer__credit:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.03); } .kp-footer__credit-logo { height: 24px !important; width: auto !important; max-width: 70px !important; object-fit: contain; opacity: 0.7; transition: opacity var(--transition); } .kp-footer__credit:hover .kp-footer__credit-logo { opacity: 1; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1024px) { .kp-footer__hero { grid-template-columns: 1fr; gap: 48px; padding: 48px 0; } .kp-footer__newsletter { padding: 32px 28px 28px; } } @media (max-width: 720px) { .kp-footer { margin-top: 72px; } .kp-footer__shell { padding: 36px 18px 20px; } .kp-footer__meta { padding-bottom: 28px; } .kp-footer__hero { padding: 36px 0 32px; gap: 36px; } .kp-footer__headline { letter-spacing: -0.015em; } .kp-footer__lede { font-size: 15px; margin-bottom: 28px; } .kp-footer__cta-row { flex-direction: column; align-items: stretch; } .kp-footer__cta { justify-content: center; width: 100%; } .kp-footer__newsletter { padding: 26px 20px 22px; border-radius: 14px; } .kp-footer__newsletter-title { font-size: 19px; } /* --------- FORM FIX: column'a geçince flex:1 inputu DİKEY büyütüyordu. width:100% + flex:0 0 auto ile sabit 46px yüksekliği koru. --------- */ .kp-footer__fallback-form, .kp-footer__newsletter-form .mailpoet_form_form, .kp-footer__newsletter-form .mc4wp-form-fields { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; } .kp-footer__fallback-form input[type="email"], .kp-footer__newsletter-form input[type="email"], .kp-footer__newsletter-form input[type="text"], .kp-footer__newsletter-form .mailpoet_text, .kp-footer__newsletter-form .mailpoet_email { flex: 0 0 auto !important; width: 100% !important; height: 46px !important; max-height: 46px !important; align-self: stretch !important; box-sizing: border-box !important; } .kp-footer__fallback-form button[type="submit"], .kp-footer__newsletter-form input[type="submit"], .kp-footer__newsletter-form button[type="submit"], .kp-footer__newsletter-form .mailpoet_submit { flex: 0 0 auto !important; width: 100% !important; height: 46px !important; max-height: 46px !important; align-self: stretch !important; justify-content: center !important; box-sizing: border-box !important; } .kp-footer__inline-nav { gap: 12px 18px; padding: 24px 0; } .kp-footer__inline-nav a { font-size: 13px; } /* mobilde nokta ayraçları kaldır (medya query >=768 zaten dışlıyor ama emin olalım) */ .kp-footer__inline-nav a + a::before { content: none !important; } .kp-footer__base { flex-direction: column; align-items: flex-start; gap: 14px; padding-top: 20px; } .kp-footer__credit { margin-left: 0; } } /* ============================================================ CONTACT PAGE (custom layout via blocks/HTML) ============================================================ */ .contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; margin: 40px 0; } .contact-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 28px; text-align: center; } .contact-item .contact-icon { color: var(--accent); margin: 0 auto 12px; width: 48px; height: 48px; background: rgba(224, 122, 95, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .contact-item h3 { margin: 0 0 8px; font-size: 1.1rem; color: var(--text-primary); } .contact-item p { color: var(--text-secondary); margin: 0; } /* CF7 form styling */ .wpcf7-form { background: var(--bg-card); padding: 32px; border-radius: var(--radius-md); border: 1px solid var(--border); } .wpcf7-form p { margin-bottom: 16px; } .wpcf7-form label { display: block; color: var(--text-primary); font-weight: 500; margin-bottom: 6px; } .wpcf7-form input, .wpcf7-form textarea, .wpcf7-form select { width: 100%; margin-top: 4px; } .wpcf7-form input[type="submit"], .wpcf7-submit { background: var(--accent) !important; color: #000 !important; border: none !important; padding: 14px 32px !important; border-radius: var(--radius-sm) !important; font-weight: 600 !important; text-transform: uppercase !important; font-size: 14px !important; letter-spacing: 0.05em !important; cursor: pointer; width: auto !important; transition: background var(--transition) !important; } .wpcf7-form input[type="submit"]:hover { background: var(--accent-hover) !important; } .wpcf7-response-output { border: 1px solid var(--border) !important; color: var(--text-primary) !important; border-radius: var(--radius-sm) !important; padding: 12px 16px !important; } .wpcf7 form.sent .wpcf7-response-output { border-color: var(--accent) !important; } /* Stat / vision / mission blocks for About page */ .about-pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin: 40px 0; } .about-pillar { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 32px; } .about-pillar h3 { color: var(--accent); margin-bottom: 12px; font-size: 1.4rem; } .about-pillar p { color: var(--text-secondary); margin: 0; } /* Why us list */ .why-list { list-style: none !important; padding: 0 !important; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; } .why-list li { background: var(--bg-card); border-left: 3px solid var(--accent); padding: 16px 20px; margin: 0 !important; color: var(--text-primary); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } /* Services page list */ .services-list { display: grid; gap: 32px; margin: 40px 0; } .service-row { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .service-row:nth-child(even) .service-row-text { order: -1; } .service-row-image img { border-radius: var(--radius-md); aspect-ratio: 4/3; object-fit: cover; } .service-row-text h3 { color: var(--accent); font-size: 1.6rem; } .service-row-text p { color: var(--text-secondary); font-size: 1.05rem; line-height: 1.7; } @media (max-width: 768px) { .service-row { grid-template-columns: 1fr; gap: 24px; } .service-row:nth-child(even) .service-row-text { order: 0; } } /* ============================================================ SERVICES PAGE (page-hizmetlerimiz.php) Dark-theme, animated, professional — namespace: .srv-* ============================================================ */ /* Reveal-on-scroll base */ .services-page .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--delay, 0ms); will-change: opacity, transform; } .services-page .reveal.is-visible { opacity: 1; transform: translateY(0); } /* ---------- HERO ---------- */ .srv-hero { position: relative; min-height: 86vh; display: flex; align-items: center; padding: 140px 0 120px; overflow: hidden; isolation: isolate; background: radial-gradient(1200px 600px at 78% 12%, rgba(224,122,95,0.12), transparent 60%), radial-gradient(900px 500px at 8% 88%, rgba(224,122,95,0.07), transparent 65%), linear-gradient(135deg, #141414 0%, #0a0a0a 55%, #050505 100%); background-size: cover; background-position: center; color: var(--text-primary); } .srv-hero--has-image::before { content: ""; position: absolute; inset: 0; background: inherit; background-image: inherit; background-size: cover; background-position: center; transform: scale(1.08); animation: srvKenBurns 24s ease-in-out infinite alternate; z-index: 0; opacity: 0.45; } .srv-hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.85) 70%, rgba(5,5,5,0.96) 100%), linear-gradient(90deg, rgba(10,10,10,0.65) 0%, rgba(10,10,10,0.1) 60%, rgba(10,10,10,0) 100%); z-index: 1; } .srv-hero-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 40%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 40%, transparent 80%); z-index: 1; opacity: 0.6; pointer-events: none; } .srv-hero-glow { position: absolute; width: 540px; height: 540px; border-radius: 50%; filter: blur(120px); z-index: 1; pointer-events: none; will-change: transform; } .srv-hero-glow--1 { top: -140px; right: -160px; background: radial-gradient(circle, rgba(224,122,95,0.38), transparent 70%); animation: srvGlowFloat 14s ease-in-out infinite alternate; } .srv-hero-glow--2 { bottom: -180px; left: -140px; background: radial-gradient(circle, rgba(120,90,40,0.32), transparent 70%); animation: srvGlowFloat 18s ease-in-out -6s infinite alternate-reverse; } .srv-hero-shapes { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .srv-hero-shape { position: absolute; display: block; border: 1px solid rgba(224,122,95,0.22); border-radius: 4px; opacity: 0.55; } .srv-hero-shape--1 { width: 150px; height: 150px; top: 18%; right: 9%; transform: rotate(18deg); animation: srvFloat 12s ease-in-out infinite; --rot: 18deg; } .srv-hero-shape--2 { width: 84px; height: 84px; bottom: 22%; right: 24%; border-color: rgba(224,122,95,0.16); border-radius: 50%; animation: srvFloat 9s ease-in-out -3s infinite reverse; } .srv-hero-shape--3 { width: 62px; height: 62px; top: 28%; left: 6%; border-color: rgba(245,245,245,0.10); transform: rotate(45deg); animation: srvFloat 15s ease-in-out -5s infinite; --rot: 45deg; } .srv-hero-content { position: relative; z-index: 2; max-width: 900px; } .srv-badge { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; background: rgba(224, 122, 95, 0.08); border: 1px solid rgba(224, 122, 95, 0.25); border-radius: 999px; color: var(--accent); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 28px; opacity: 0; transform: translateY(20px); animation: srvFadeUp 0.8s 0.1s ease-out forwards; backdrop-filter: blur(6px); } .srv-badge-dot { width: 8px; height: 8px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 0 0 rgba(224,122,95,0.55); animation: srvPulse 2.2s ease-out infinite; } .srv-eyebrow { display: flex; align-items: center; gap: 16px; font-size: 11px; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; color: var(--accent); margin: 0 0 28px; opacity: 0; transform: translateY(20px); animation: srvFadeUp 0.8s 0.2s ease-out forwards; } .srv-eyebrow-line { display: inline-block; width: 56px; height: 1px; background: linear-gradient(90deg, var(--accent), transparent); transform-origin: left; animation: srvLineGrow 1s 0.3s ease-out backwards; } .srv-hero-title { font-size: clamp(2.25rem, 5vw, 4.2rem); line-height: 1.05; margin: 0 0 28px; font-weight: 700; letter-spacing: -0.025em; color: var(--text-primary); } .srv-hero-title-line { display: block; overflow: hidden; opacity: 0; transform: translateY(40px); animation: srvFadeUp 0.9s ease-out forwards; } .srv-hero-title-line:nth-child(1) { animation-delay: 0.35s; } .srv-hero-title-line:nth-child(2) { animation-delay: 0.5s; } .srv-hero-title-accent { font-style: normal; background: linear-gradient(135deg, var(--accent) 0%, #f0a48e 50%, var(--accent) 100%); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: srvShimmer 4s linear infinite; } .srv-hero-subtitle { font-size: clamp(1rem, 1.2vw, 1.15rem); line-height: 1.7; color: var(--text-secondary); max-width: 620px; margin: 0 0 44px; opacity: 0; transform: translateY(20px); animation: srvFadeUp 0.9s 0.65s ease-out forwards; } .srv-hero-actions { display: flex; gap: 16px; flex-wrap: wrap; opacity: 0; transform: translateY(20px); animation: srvFadeUp 0.9s 0.8s ease-out forwards; } .srv-hero-actions .btn { position: relative; overflow: hidden; } .srv-hero-actions .btn .btn-icon { transition: transform 0.35s ease; } .srv-hero-actions .btn:hover .btn-icon { transform: translateX(4px); } .srv-hero-actions .btn-primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.28) 50%, transparent 70%); transform: translateX(-120%); transition: transform 0.75s ease; pointer-events: none; } .srv-hero-actions .btn-primary:hover::after { transform: translateX(120%); } .srv-hero-scroll { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 12px; z-index: 2; color: var(--text-muted); font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; text-decoration: none; opacity: 0; animation: srvFadeUp 0.9s 1.1s ease-out forwards; transition: color var(--transition); } .srv-hero-scroll:hover { color: var(--accent); } .srv-hero-scroll-label { color: inherit; } .srv-hero-scroll-line { width: 1px; height: 48px; background: linear-gradient(180deg, var(--accent), transparent); position: relative; overflow: hidden; } .srv-hero-scroll-line::after { content: ""; position: absolute; top: -100%; left: 0; width: 100%; height: 50%; background: linear-gradient(180deg, transparent, var(--accent)); animation: srvScrollDot 2.2s ease-in-out infinite; } /* ---------- STAT BAR ---------- */ .srv-statbar { background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%); border-bottom: 1px solid var(--border); padding: 56px 0; position: relative; } .srv-statbar::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(720px, 70%); height: 1px; background: linear-gradient(90deg, transparent, rgba(224,122,95,0.45), transparent); } .srv-statbar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; } .srv-stat { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; position: relative; padding: 0 12px; } .srv-stat + .srv-stat::before { content: ""; position: absolute; left: 0; top: 20%; height: 60%; width: 1px; background: linear-gradient(180deg, transparent, var(--border-light), transparent); } .srv-stat-num { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; line-height: 1; background: linear-gradient(135deg, #f5e9d0 0%, var(--accent) 50%, #b08d50 100%); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -0.02em; font-feature-settings: "tnum"; } .srv-stat-label { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); font-weight: 500; } /* ---------- SECTIONS GENERIC ---------- */ .srv-section { padding: 110px 0; position: relative; } .srv-section--services { background: var(--bg-primary); } .srv-section--process { background: var(--bg-secondary); overflow: hidden; } .srv-section--capabilities{ background: var(--bg-primary); } .srv-section--content { background: var(--bg-secondary); } .srv-section--cta { background: var(--bg-primary); padding: 80px 0 120px; } .srv-section--process::before { content: ""; position: absolute; top: -100px; right: -120px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(224,122,95,0.10), transparent 70%); filter: blur(60px); z-index: 0; pointer-events: none; } .srv-section--process > .container { position: relative; z-index: 1; } .srv-section-header { text-align: center; max-width: 720px; margin: 0 auto 64px; } .srv-section-eyebrow { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; position: relative; padding: 6px 0; } .srv-section-eyebrow::before, .srv-section-eyebrow::after { content: ""; position: absolute; top: 50%; width: 40px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent)); } .srv-section-eyebrow::before { right: calc(100% + 16px); transform: scaleX(-1); } .srv-section-eyebrow::after { left: calc(100% + 16px); } .srv-section-title { font-size: clamp(1.8rem, 3.5vw, 2.6rem); margin: 0 0 16px; letter-spacing: -0.02em; } .srv-section-subtitle { color: var(--text-secondary); font-size: 1.05rem; line-height: 1.7; margin: 0; } /* ---------- SERVICES GRID (CARDS) ---------- */ .srv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; } .srv-card { position: relative; background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-secondary) 100%); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 40px 32px 36px; overflow: hidden; isolation: isolate; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s ease, box-shadow 0.4s ease; cursor: default; } .srv-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 50%), rgba(224,122,95,0.10), transparent 40%); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; z-index: -1; } .srv-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, rgba(224,122,95,0.5), transparent 35%, transparent 65%, rgba(224,122,95,0.3)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.4s ease; pointer-events: none; } .srv-card:hover { transform: translateY(-6px); border-color: rgba(224,122,95,0.35); box-shadow: 0 24px 60px -16px rgba(0,0,0,0.7), 0 0 0 1px rgba(224,122,95,0.08); } .srv-card:hover::before, .srv-card:hover::after { opacity: 1; } .srv-card-num { position: absolute; top: 24px; right: 28px; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; color: var(--text-faint); transition: color 0.4s ease; } .srv-card:hover .srv-card-num { color: var(--accent); } .srv-card-icon { width: 64px; height: 64px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(224,122,95,0.18), rgba(224,122,95,0.04)); border: 1px solid rgba(224,122,95,0.2); color: var(--accent); margin-bottom: 24px; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), background 0.4s ease, border-color 0.4s ease; position: relative; } .srv-card:hover .srv-card-icon { transform: scale(1.06) rotate(-3deg); background: linear-gradient(135deg, rgba(224,122,95,0.28), rgba(224,122,95,0.08)); border-color: rgba(224,122,95,0.45); } .srv-card-icon svg { transition: transform 0.5s ease; } .srv-card:hover .srv-card-icon svg { transform: scale(1.05); } .srv-card-title { font-size: 1.35rem; margin: 0 0 12px; color: var(--text-primary); letter-spacing: -0.01em; transition: color 0.3s ease; } .srv-card:hover .srv-card-title { color: var(--accent-hover); } .srv-card-desc { color: var(--text-secondary); font-size: 0.97rem; line-height: 1.7; margin: 0 0 20px; } .srv-card-list { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-direction: column; gap: 8px; } .srv-card-list li { position: relative; padding-left: 22px; color: var(--text-secondary); font-size: 0.9rem; line-height: 1.5; } .srv-card-list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 12px; height: 1px; background: var(--accent); transition: width 0.35s ease; } .srv-card:hover .srv-card-list li::before { width: 16px; } .srv-card-arrow { position: absolute; bottom: 24px; right: 24px; width: 40px; height: 40px; border-radius: 50%; background: rgba(224,122,95,0.08); border: 1px solid rgba(224,122,95,0.25); color: var(--accent); display: flex; align-items: center; justify-content: center; opacity: 0; transform: translate(-6px, 6px) scale(0.85); transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .srv-card:hover .srv-card-arrow { opacity: 1; transform: translate(0, 0) scale(1); background: var(--accent); color: #000; border-color: var(--accent); } /* ---------- PROCESS / TIMELINE ---------- */ .srv-timeline { position: relative; max-width: 880px; margin: 0 auto; padding: 12px 0; } .srv-timeline-line { position: absolute; left: 31px; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, transparent 0%, rgba(224,122,95,0.5) 8%, rgba(224,122,95,0.5) 92%, transparent 100%); border-radius: 2px; } .srv-step { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 28px; align-items: flex-start; padding: 16px 0 40px; } .srv-step:last-child { padding-bottom: 0; } .srv-step-marker { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, var(--bg-elevated), var(--bg-card)); border: 1px solid rgba(224,122,95,0.35); color: #f5e9d0; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.15rem; letter-spacing: 0.05em; position: relative; z-index: 1; box-shadow: 0 0 0 4px var(--bg-secondary), 0 8px 24px rgba(0,0,0,0.4); transition: transform 0.4s ease, background 0.4s ease, color 0.4s ease; } .srv-step-marker > span { position: relative; z-index: 2; color: inherit; line-height: 1; text-shadow: 0 1px 2px rgba(0,0,0,0.45); } .srv-step-marker::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid rgba(224,122,95,0.18); opacity: 0; transition: opacity 0.4s ease, transform 0.4s ease; } .srv-step.is-visible .srv-step-marker { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: #0a0a0a; } .srv-step.is-visible .srv-step-marker > span { text-shadow: 0 1px 0 rgba(255,255,255,0.25); } .srv-step.is-visible .srv-step-marker::before { opacity: 1; transform: scale(1.05); } .srv-step-body { padding-top: 8px; } .srv-step-title { color: var(--text-primary); margin: 0 0 8px; font-size: 1.2rem; letter-spacing: -0.01em; } .srv-step-body p { color: var(--text-secondary); margin: 0; font-size: 0.98rem; line-height: 1.7; } /* ---------- CAPABILITIES ---------- */ .srv-cap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; } .srv-cap { display: flex; gap: 16px; align-items: flex-start; padding: 22px; background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); transition: transform 0.35s ease, background 0.35s ease, border-color 0.35s ease; } .srv-cap:hover { transform: translateX(4px); background: var(--bg-elevated); border-color: var(--border-light); border-left-color: var(--accent-hover); } .srv-cap-icon { width: 36px; height: 36px; border-radius: 50%; background: rgba(224,122,95,0.12); color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform 0.35s ease; } .srv-cap:hover .srv-cap-icon { transform: scale(1.08) rotate(-6deg); } .srv-cap h4 { margin: 0 0 4px; font-size: 1rem; color: var(--text-primary); } .srv-cap p { margin: 0; color: var(--text-secondary); font-size: 0.92rem; line-height: 1.55; } /* ---------- CONTENT SECTION (optional WP content) ---------- */ .srv-content-inner { max-width: 820px; } /* ---------- CTA ---------- */ .srv-cta { position: relative; background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-card) 100%); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 64px clamp(28px, 5vw, 56px); display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: center; overflow: hidden; isolation: isolate; } .srv-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(700px 320px at 100% 50%, rgba(224,122,95,0.12), transparent 65%), radial-gradient(500px 280px at 0% 100%, rgba(224,122,95,0.08), transparent 70%); z-index: -1; pointer-events: none; } .srv-cta::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, rgba(224,122,95,0.6), transparent 40%, transparent 60%, rgba(224,122,95,0.4)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0.7; z-index: -1; pointer-events: none; } .srv-cta-glow { position: absolute; width: 380px; height: 380px; top: -120px; right: -120px; border-radius: 50%; background: radial-gradient(circle, rgba(224,122,95,0.22), transparent 70%); filter: blur(70px); z-index: -1; animation: srvGlowFloat 16s ease-in-out infinite alternate; } .srv-cta-text .srv-section-eyebrow { margin-bottom: 14px; } .srv-cta-text .srv-section-eyebrow::before, .srv-cta-text .srv-section-eyebrow::after { display: none; } .srv-cta-text h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 0 0 12px; line-height: 1.2; color: var(--text-primary); } .srv-cta-text p { color: var(--text-secondary); margin: 0; font-size: 1.02rem; line-height: 1.7; } .srv-cta-actions { display: flex; justify-content: flex-end; gap: 12px; flex-wrap: wrap; } .srv-cta-actions .btn { position: relative; overflow: hidden; } .srv-cta-actions .btn .btn-icon { transition: transform 0.35s ease; } .srv-cta-actions .btn:hover .btn-icon { transform: translateX(4px); } .srv-cta-actions .btn-primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.28) 50%, transparent 70%); transform: translateX(-120%); transition: transform 0.75s ease; pointer-events: none; } .srv-cta-actions .btn-primary:hover::after { transform: translateX(120%); } /* ---------- KEYFRAMES ---------- */ @keyframes srvFadeUp { to { opacity: 1; transform: translateY(0); } } @keyframes srvLineGrow { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } } @keyframes srvShimmer { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } @keyframes srvPulse { 0% { box-shadow: 0 0 0 0 rgba(224,122,95,0.55); } 70% { box-shadow: 0 0 0 12px rgba(224,122,95,0); } 100% { box-shadow: 0 0 0 0 rgba(224,122,95,0); } } @keyframes srvFloat { 0%, 100% { transform: translate(0, 0) rotate(var(--rot, 0deg)); } 50% { transform: translate(10px, -18px) rotate(calc(var(--rot, 0deg) + 6deg)); } } @keyframes srvGlowFloat { 0% { transform: translate(0, 0) scale(1); opacity: 0.9; } 100% { transform: translate(-40px, 30px) scale(1.15); opacity: 0.65; } } @keyframes srvKenBurns { 0% { transform: scale(1.08) translate(0, 0); } 100% { transform: scale(1.18) translate(-1.5%, -1.5%); } } @keyframes srvScrollDot { 0% { top: -100%; } 100% { top: 100%; } } /* ---------- RESPONSIVE ---------- */ @media (max-width: 1024px) { .srv-statbar-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; } .srv-stat + .srv-stat::before { display: none; } .srv-cta { grid-template-columns: 1fr; } .srv-cta-actions { justify-content: flex-start; } } @media (max-width: 768px) { .srv-hero { min-height: 80vh; padding: 110px 0 90px; } .srv-hero-shape--1 { width: 100px; height: 100px; right: -20px; top: 10%; } .srv-hero-shape--2 { width: 60px; height: 60px; right: 12%; } .srv-hero-shape--3 { display: none; } .srv-hero-actions { flex-direction: column; align-items: stretch; } .srv-hero-actions .btn { width: 100%; justify-content: center; } .srv-hero-scroll { display: none; } .srv-statbar { padding: 40px 0; } .srv-statbar-grid { grid-template-columns: repeat(2, 1fr); } .srv-section { padding: 70px 0; } .srv-section-header { margin-bottom: 44px; } .srv-section-eyebrow::before, .srv-section-eyebrow::after { width: 24px; } .srv-card { padding: 32px 24px 28px; } .srv-step { grid-template-columns: 52px 1fr; gap: 20px; padding-bottom: 32px; } .srv-step-marker { width: 52px; height: 52px; font-size: 0.95rem; } .srv-timeline-line { left: 25px; } .srv-cta { padding: 44px 24px; } } @media (max-width: 480px) { .srv-statbar-grid { grid-template-columns: 1fr; gap: 28px; } .srv-badge { font-size: 11px; padding: 6px 12px; } .srv-hero-title { font-size: clamp(1.85rem, 8vw, 2.4rem); } } /* TranslatePress floater fix for dark theme */ .trp-floater-ls { background: var(--bg-elevated) !important; border: 1px solid var(--border) !important; color: var(--text-primary) !important; } .trp-language-switcher-container .trp-ls-shortcode-current-language { background: var(--bg-tertiary) !important; color: var(--text-primary) !important; border: 1px solid var(--border) !important; } /* Responsive */ @media (max-width: 768px) { .section { padding: 60px 0; } .hero { min-height: 88vh; padding: 96px 0 80px; } .hero-actions { flex-direction: column; align-items: stretch; } .hero-actions .btn { width: 100%; justify-content: center; } .hero-stats { gap: 24px 32px; margin-top: 48px; padding-top: 28px; } .hero-shape--1 { width: 90px; height: 90px; right: -20px; top: 12%; } .hero-shape--2 { width: 60px; height: 60px; right: 12%; } .hero-shape--3 { display: none; } .header-tools a { width: 36px; height: 36px; } .header-tools .lang-switcher { display: none; } } /* ============================================================ FRONT PAGE V2 — Modern, animated sections ============================================================ */ /* === Reveal animations === */ .reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; } .reveal.is-visible { opacity: 1; transform: translateY(0); } /* === Section eyebrow (gold label) === */ .section-eyebrow { display: inline-block; color: var(--accent); font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 16px; } .section-title-accent { color: var(--accent); font-style: italic; font-weight: 300; } /* === 1) HİZMETLER V2 === */ .section-services-v2 { background: var(--bg-primary); padding: 120px 0 100px; } .services-v2-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 56px; } .service-v2 { position: relative; aspect-ratio: 3/4; background-size: cover; background-position: center; border-radius: var(--radius-md); overflow: hidden; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .service-v2:hover { transform: translateY(-8px); } .service-v2-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,10,0.2) 0%, rgba(10,10,10,0.95) 100%); transition: background 0.4s ease; } .service-v2:hover .service-v2-overlay { background: linear-gradient(180deg, rgba(10,10,10,0.5) 0%, rgba(10,10,10,0.98) 100%); } .service-v2-content { position: absolute; inset: 0; padding: 32px 28px; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; z-index: 2; } .service-v2-number { position: absolute; top: 24px; left: 28px; font-size: 14px; font-weight: 700; letter-spacing: 0.15em; color: var(--accent); } .service-v2-title { color: #fff; font-size: 1.5rem; margin: 0 0 12px; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .service-v2-desc { color: var(--text-secondary); font-size: 14px; line-height: 1.6; margin: 0 0 16px; max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.5s ease, opacity 0.4s ease, margin 0.4s ease; } .service-v2-link { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; text-decoration: none; opacity: 0; transform: translateY(8px); transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s; } .service-v2-link svg { transition: transform var(--transition); } .service-v2-link:hover svg { transform: translateX(4px); } .service-v2:hover .service-v2-title { transform: translateY(-4px); } .service-v2:hover .service-v2-desc { max-height: 200px; opacity: 1; margin-bottom: 16px; } .service-v2:hover .service-v2-link { opacity: 1; transform: translateY(0); } /* === 2) ÜRETİM SÜRECİ === */ .section-process { position: relative; background: var(--bg-secondary); padding: 120px 0 100px; overflow: hidden; } .process-bg { position: absolute; inset: 0; background: radial-gradient(circle at 80% 20%, rgba(224, 122, 95, 0.05) 0%, transparent 50%), radial-gradient(circle at 20% 80%, rgba(224, 122, 95, 0.04) 0%, transparent 50%); z-index: 0; } .section-process .container { position: relative; z-index: 1; } .process-track { position: relative; margin-top: 80px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; } .process-line, .process-line-fill { position: absolute; top: 32px; left: 10%; right: 10%; height: 2px; } .process-line { background: var(--border-light); } .process-line-fill { background: linear-gradient(90deg, var(--accent) 0%, var(--accent-dark) 100%); width: 0%; transition: width 1.4s cubic-bezier(0.16, 1, 0.3, 1); } .process-track.is-active .process-line-fill { width: 80%; } .process-step { position: relative; text-align: center; padding: 0 8px; } .process-step-num { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; background: var(--bg-elevated); border: 2px solid var(--border-light); border-radius: 50%; color: var(--accent); font-size: 16px; font-weight: 800; letter-spacing: 0.08em; margin-bottom: 20px; position: relative; z-index: 2; transition: all 0.4s ease; } .process-step.is-visible .process-step-num { border-color: var(--accent); background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%); color: #000; box-shadow: 0 0 0 6px rgba(224, 122, 95, 0.12), 0 8px 20px rgba(224, 122, 95, 0.3); } .process-step-content h4 { color: var(--text-primary); font-size: 1.05rem; margin: 0 0 8px; } .process-step-content p { color: var(--text-secondary); font-size: 13px; line-height: 1.5; margin: 0; } /* === 3) RAKAMLARLA === */ .section-stats { position: relative; background-size: cover; background-position: center; background-attachment: fixed; padding: 100px 0; color: #fff; } .stats-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(10,10,10,0.92) 0%, rgba(10,10,10,0.85) 100%); } .section-stats .container { position: relative; z-index: 1; } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .stat-card { text-align: center; padding: 32px 16px; position: relative; } .stat-card + .stat-card::before { content: ''; position: absolute; top: 25%; left: 0; width: 1px; height: 50%; background: linear-gradient(180deg, transparent 0%, var(--border-light) 50%, transparent 100%); } .stat-num { display: block; font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 800; color: var(--accent); line-height: 1; margin-bottom: 12px; font-variant-numeric: tabular-nums; background: linear-gradient(180deg, var(--accent) 0%, var(--accent-dark) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .stat-label { display: block; color: #fff; font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 8px; } .stat-desc { color: var(--text-secondary); font-size: 13px; margin: 0; } /* === 4) KATEGORİLER V2 === */ .section-categories-v2 { background: var(--bg-primary); padding: 120px 0 100px; } .categories-v2-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 240px); gap: 20px; margin-top: 56px; } .category-v2 { position: relative; background: var(--bg-card) center/cover no-repeat; border-radius: var(--radius-md); overflow: hidden; text-decoration: none; display: block; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .category-v2:hover { transform: scale(1.02); z-index: 2; } .category-v2--featured { grid-column: span 2; grid-row: span 2; } .category-v2-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(10,10,10,0.3) 0%, rgba(10,10,10,0.85) 100%); transition: background 0.4s ease; } .category-v2:hover .category-v2-overlay { background: linear-gradient(135deg, rgba(10,10,10,0.5) 0%, rgba(0,0,0,0.95) 100%); } .category-v2-content { position: absolute; inset: 0; padding: 24px; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; z-index: 2; } .category-v2--featured .category-v2-content { padding: 40px; } .category-v2-meta { margin-bottom: 8px; } .category-v2-count { display: inline-block; color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; padding: 4px 10px; background: rgba(224, 122, 95, 0.15); border: 1px solid rgba(224, 122, 95, 0.3); border-radius: 20px; } .category-v2-name { color: #fff; font-size: 1.4rem; margin: 0; line-height: 1.2; transition: transform 0.4s ease; } .category-v2--featured .category-v2-name { font-size: 2.4rem; font-weight: 800; } .category-v2:hover .category-v2-name { transform: translateX(4px); } .category-v2-arrow { position: absolute; top: 24px; right: 24px; color: #fff; width: 44px; height: 44px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(8px); opacity: 0; transform: translateX(-8px); transition: all 0.4s ease; } .category-v2:hover .category-v2-arrow { opacity: 1; transform: translateX(0); background: var(--accent); border-color: var(--accent); color: #000; } /* === 5) ÜRÜNLER V2 === */ .section-products-v2 { background: var(--bg-secondary); padding: 120px 0 100px; } .products-v2-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 56px; } .product-v2 { background: var(--bg-card); border-radius: var(--radius-md); overflow: hidden; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease; } .product-v2:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); } .product-v2-thumb { display: block; aspect-ratio: 4/5; position: relative; overflow: hidden; background: var(--bg-tertiary); } .product-v2-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .product-v2:hover .product-v2-thumb img { transform: scale(1.08); } .product-v2-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(10,10,10,0.85) 100%); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 24px; opacity: 0; transition: opacity 0.4s ease; } .product-v2:hover .product-v2-overlay { opacity: 1; } .product-v2-cta { color: var(--accent); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; padding: 10px 24px; background: rgba(0,0,0,0.6); border: 1px solid var(--accent); border-radius: var(--radius-sm); backdrop-filter: blur(4px); } .product-v2-badge { position: absolute; top: 16px; left: 16px; background: #c0392b; color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; padding: 6px 12px; border-radius: var(--radius-sm); z-index: 2; } .product-v2-badge--quote { background: var(--accent); color: #000; } .product-v2-info { padding: 20px 24px 24px; } .product-v2-cat { display: block; color: var(--accent); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 8px; } .product-v2-name { margin: 0 0 12px; font-size: 1.05rem; line-height: 1.3; } .product-v2-name a { color: var(--text-primary); text-decoration: none; transition: color var(--transition); } .product-v2-name a:hover { color: var(--accent); } .product-v2-price { color: var(--accent); font-size: 1.2rem; font-weight: 700; } .product-v2-price .call-for-price { color: var(--text-secondary); font-size: 14px; font-style: italic; font-weight: 400; } .products-v2-cta { text-align: center; margin-top: 48px; } .products-v2-cta .btn { gap: 8px; } /* === 6) NEDEN SANDLINE V2 === */ .section-why-v2 { background: var(--bg-primary); padding: 120px 0; } .why-v2-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .why-v2-visual { position: relative; } .why-v2-img-frame { position: relative; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4/5; box-shadow: var(--shadow-lg); } .why-v2-img-frame::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(224, 122, 95, 0.15) 0%, transparent 60%); z-index: 2; pointer-events: none; } .why-v2-img-frame img { width: 100%; height: 100%; object-fit: cover; } .why-v2-badge { position: absolute; bottom: -32px; right: -32px; width: 180px; height: 180px; background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #000; box-shadow: 0 12px 32px rgba(224, 122, 95, 0.3); text-align: center; border: 8px solid var(--bg-primary); } .why-v2-badge-num { font-size: 3rem; font-weight: 800; line-height: 1; color: #000; } .why-v2-badge-label { color: #000; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; margin-top: 4px; } .why-v2-content .section-title { margin-bottom: 20px; } .why-v2-lead { color: var(--text-secondary); font-size: 1.05rem; line-height: 1.7; margin-bottom: 32px; } .why-v2-list { list-style: none; padding: 0; margin: 0 0 40px; } .why-v2-list li { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--border); } .why-v2-list li:last-child { border-bottom: none; } .why-v2-icon { flex-shrink: 0; width: 40px; height: 40px; background: rgba(224, 122, 95, 0.1); border: 1px solid rgba(224, 122, 95, 0.3); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--accent); } .why-v2-list h4 { color: var(--text-primary); font-size: 1rem; margin: 0 0 4px; } .why-v2-list p { color: var(--text-secondary); font-size: 14px; margin: 0; } /* === 7) CTA V2 === */ .section-cta-v2 { position: relative; background-size: cover; background-position: center; background-attachment: fixed; padding: 140px 0; color: #fff; text-align: center; } .cta-v2-overlay { position: absolute; inset: 0; background: radial-gradient(circle at center, rgba(10,10,10,0.7) 0%, rgba(0,0,0,0.95) 100%); } .cta-v2-inner { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; } .cta-v2-eyebrow { color: var(--accent); } .cta-v2-title { color: #fff; font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 800; line-height: 1.1; margin: 0 0 20px; } .cta-v2-accent { color: var(--accent); font-style: italic; font-weight: 400; } .cta-v2-desc { color: var(--text-secondary); font-size: 1.15rem; line-height: 1.7; margin: 0 auto 40px; max-width: 600px; } .cta-v2-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } .cta-v2-actions .btn { padding: 16px 36px; } .btn-ghost-light { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.3); backdrop-filter: blur(8px); } .btn-ghost-light:hover { background: rgba(255, 255, 255, 0.1); border-color: #fff; color: #fff; transform: translateY(-2px); } /* === Responsive — Front page v2 === */ @media (max-width: 1024px) { .services-v2-grid { grid-template-columns: repeat(2, 1fr); } .process-track { grid-template-columns: repeat(3, 1fr); gap: 40px 24px; } .process-line, .process-line-fill { display: none; } .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; } .stat-card + .stat-card::before { display: none; } .categories-v2-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; } .category-v2--featured { grid-column: span 2; } .category-v2 { aspect-ratio: 4/3; } .products-v2-grid { grid-template-columns: repeat(2, 1fr); } .why-v2-layout { grid-template-columns: 1fr; gap: 60px; } .why-v2-badge { width: 140px; height: 140px; bottom: -20px; right: -20px; } .why-v2-badge-num { font-size: 2.2rem; } } @media (max-width: 640px) { .section-services-v2, .section-process, .section-categories-v2, .section-products-v2, .section-why-v2 { padding: 80px 0 60px; } .section-cta-v2 { padding: 100px 0; } .services-v2-grid { grid-template-columns: 1fr; gap: 20px; } .service-v2 { aspect-ratio: 4/3; } .process-track { grid-template-columns: 1fr; gap: 32px; } .process-step { text-align: left; display: flex; gap: 20px; align-items: flex-start; } .process-step-num { margin-bottom: 0; width: 56px; height: 56px; flex-shrink: 0; } .stats-grid { grid-template-columns: 1fr; gap: 24px; } .categories-v2-grid { grid-template-columns: 1fr; } .category-v2--featured { grid-column: span 1; } .category-v2--featured .category-v2-name { font-size: 1.8rem; } .products-v2-grid { grid-template-columns: 1fr; } .section-stats { background-attachment: scroll; } .section-cta-v2 { background-attachment: scroll; } .cta-v2-actions { flex-direction: column; } .cta-v2-actions .btn { width: 100%; } } /* ============================================================ SINGLE PRODUCT — Professional redesign (v6) ------------------------------------------------------------ - WooCommerce + Sandline markup'ı korunur. - Apple/Allbirds tarzı sıkı, dengeli, modern e-ticaret layout'u. - Mobile-first, sticky summary, tek otorite blok. ============================================================ */ /* ---------- Local design tokens (single-product scope) ---------- */ .sandline-product { --sp-pad-x: clamp(16px, 3vw, 40px); --sp-pad-y: clamp(28px, 4.5vw, 64px); --sp-max: 1240px; --sp-gap: clamp(28px, 4vw, 56px); --sp-stack: 14px; --sp-radius-sm: 8px; --sp-radius: 12px; --sp-radius-lg: 16px; --sp-border: rgba(255, 255, 255, 0.07); --sp-border-strong: rgba(255, 255, 255, 0.13); --sp-surface: rgba(255, 255, 255, 0.025); --sp-surface-card: #141b27; --sp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.18); --sp-shadow: 0 12px 36px -20px rgba(0, 0, 0, 0.55); --sp-accent: var(--accent, #e07a5f); --sp-accent-hover: var(--accent-hover, #ea9682); --sp-accent-soft: rgba(224, 122, 95, 0.1); --sp-success: #22c55e; --sp-success-soft: rgba(34, 197, 94, 0.12); --sp-danger: #ef4444; --sp-danger-soft: rgba(239, 68, 68, 0.12); } /* ============================================================ WRAPPER ============================================================ */ body.woocommerce div.product.sandline-product { max-width: none; margin: 0; padding: var(--sp-pad-y) var(--sp-pad-x); display: block; background: var(--bg-primary); position: relative; } .sandline-product__hero, .sandline-product .woocommerce-tabs, .sandline-product__pillars, .sandline-product__inquiry, .sandline-product .related, .sandline-product .upsells { width: 100%; max-width: var(--sp-max); margin-left: auto; margin-right: auto; } /* ============================================================ HERO — Gallery + Summary (clean two-column, no heavy cards) ============================================================ */ .sandline-product__hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: flex-start; gap: var(--sp-gap); margin: 0 auto clamp(40px, 5vw, 72px); } /* HARD KILL — WooCommerce'in default `.images` ve `.summary` kurallarını geçersiz kılıyoruz. WC default'u: .woocommerce div.product .images { float: left; width: 48%; } .woocommerce div.product .summary { float: right; width: 48%; } Bizim grid layout'unu bozuyordu. Yüksek-specificity ile zorla 100% yap. */ body.woocommerce div.product.sandline-product .sandline-product__gallery, body.woocommerce div.product.sandline-product .images, body.woocommerce div.product.sandline-product .woocommerce-product-gallery, body.woocommerce div.product.sandline-product .summary, body.woocommerce div.product.sandline-product .summary.entry-summary, body.woocommerce div.product.sandline-product .sandline-product__summary { float: none !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; } /* Decorative bg layer (very subtle — only at very top of page) */ .sandline-product__hero-bg { display: none; /* Removed heavy ambient layer for cleaner look */ } .sandline-product__glow { display: none; } /* ============================================================ GALLERY (left column) ============================================================ */ .sandline-product__gallery { position: relative; z-index: 1; margin: 0; width: 100%; max-width: 100%; } /* Main image frame — 1:1 ratio, image fills via cover */ .sandline-product__gallery .woocommerce-product-gallery { width: 100%; max-width: 100%; aspect-ratio: 1 / 1; height: auto; position: relative; overflow: hidden; margin: 0; padding: 0; background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-lg); float: none; opacity: 1 !important; visibility: visible !important; } /* Flexslider'ın multi-image init'inde araya soktuğu .flex-viewport katmanı: .woocommerce-product-gallery > .flex-viewport > .woocommerce-product-gallery__wrapper Bu katmanı da gallery'yi 1:1 dolduracak şekilde zorla — yoksa height: 0 olur. */ .sandline-product__gallery .woocommerce-product-gallery .flex-viewport, .sandline-product__gallery .woocommerce-product-gallery > .flex-viewport { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; margin: 0 !important; padding: 0 !important; position: relative !important; overflow: hidden !important; display: block !important; } /* Wrapper: clean reset (Sandline JS owns slide visibility). `!important` height/width — flexslider inline width/transform yazıyor. */ .sandline-product__gallery .woocommerce-product-gallery__wrapper { width: 100% !important; height: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; position: relative !important; transform: none !important; list-style: none !important; overflow: hidden !important; inset: 0 !important; } /* Slides: stacked absolute, only active (.sandline-active veya :first-child) görünür. `display: block !important` — flexslider'ın inline `float:left;display:block` ile yan yana hizalama girişimini ezelim. */ .sandline-product__gallery .woocommerce-product-gallery__wrapper > div, .sandline-product__gallery .woocommerce-product-gallery__wrapper > li { position: absolute !important; inset: 0 !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; float: none !important; display: block !important; list-style: none !important; opacity: 0; visibility: hidden; pointer-events: none; z-index: 1; transition: opacity 0.4s ease; } .sandline-product__gallery .woocommerce-product-gallery__wrapper > div:first-child, .sandline-product__gallery .woocommerce-product-gallery__wrapper > li:first-child, .sandline-product__gallery .woocommerce-product-gallery__wrapper > .sandline-active, .sandline-product__gallery .woocommerce-product-gallery__wrapper > .flex-active-slide { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; z-index: 3 !important; } .sandline-product__gallery .woocommerce-product-gallery__wrapper:has(.sandline-active) > div:first-child:not(.sandline-active), .sandline-product__gallery .woocommerce-product-gallery__wrapper:has(.sandline-active) > li:first-child:not(.sandline-active) { opacity: 0; visibility: hidden; z-index: 1; } /* Slide anchor + image: COVER fill (modern e-commerce look). Multi-image yapıda
  • içinde bir __image div'i var; tek-image'de doğrudan slide. */ .sandline-product__gallery .woocommerce-product-gallery__image { width: 100% !important; height: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; float: none !important; display: block !important; position: relative; } .sandline-product__gallery .woocommerce-product-gallery__image a { display: block; width: 100%; height: 100%; cursor: zoom-in; } .sandline-product__gallery .woocommerce-product-gallery__image img { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover; object-position: center; display: block; transition: transform 0.7s cubic-bezier(.2, .7, .2, 1); } .sandline-product__gallery .woocommerce-product-gallery:hover .woocommerce-product-gallery__image img { transform: scale(1.04); } /* Sale flash pill */ .sandline-product .woocommerce span.onsale { position: absolute; top: 16px; left: 16px; z-index: 5; min-height: 0; min-width: 0; line-height: 1; padding: 7px 12px; margin: 0; background: var(--sp-accent); color: #0b0b0b; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; box-shadow: 0 4px 14px rgba(224, 122, 95, 0.28); } /* Zoom / lightbox trigger */ .sandline-product .woocommerce-product-gallery__trigger { position: absolute; top: 14px; right: 14px; z-index: 5; width: 38px; height: 38px; padding: 0; border-radius: 50%; background: rgba(11, 16, 24, 0.72); border: 1px solid var(--sp-border-strong); backdrop-filter: blur(8px); color: var(--text-primary); font-size: 0; text-indent: -9999px; display: inline-flex; align-items: center; justify-content: center; transition: background 0.25s ease, transform 0.25s ease, border-color 0.25s ease; } .sandline-product .woocommerce-product-gallery__trigger::before { content: ''; width: 15px; height: 15px; text-indent: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23eef2f8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3M8 11h6M11 8v6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; } .sandline-product .woocommerce-product-gallery__trigger:hover { background: var(--sp-accent); border-color: var(--sp-accent); transform: scale(1.06); } .sandline-product .woocommerce-product-gallery__trigger:hover::before { filter: brightness(0); } /* ---------- Thumbnail strip ---------- */ .sandline-product .sandline-gallery-thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; width: 100%; } .sandline-product .sandline-gallery-thumb { appearance: none; background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-sm); padding: 0; margin: 0; cursor: pointer; overflow: hidden; aspect-ratio: 1 / 1; display: block; position: relative; opacity: 0.7; transition: border-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .sandline-product .sandline-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform 0.5s cubic-bezier(.2, .7, .2, 1); } .sandline-product .sandline-gallery-thumb:hover { opacity: 1; border-color: var(--sp-border-strong); } .sandline-product .sandline-gallery-thumb:hover img { transform: scale(1.08); } .sandline-product .sandline-gallery-thumb.is-active { opacity: 1; border-color: var(--sp-accent); box-shadow: 0 0 0 1px var(--sp-accent); } .sandline-product .sandline-gallery-thumb:focus-visible { outline: 2px solid var(--sp-accent); outline-offset: 2px; } /* Hide flexslider native thumb nav (we use custom strip) */ .sandline-product .woocommerce-product-gallery .flex-control-nav, .sandline-product .woocommerce-product-gallery .flex-control-thumbs { display: none !important; } /* ============================================================ SUMMARY (right column, sticky on desktop) ============================================================ */ .sandline-product__summary { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--sp-stack); margin: 0; width: 100%; max-width: 100%; padding: 0; } @media (min-width: 1024px) { .sandline-product__summary { position: sticky; top: 96px; align-self: flex-start; padding-left: 8px; } } /* Eyebrow */ .sandline-product__eyebrow { display: inline-flex; align-items: center; gap: 12px; color: var(--sp-accent); font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; margin: 0; } .sandline-product__eyebrow-line { width: 28px; height: 1px; background: var(--sp-accent); display: block; } /* Title */ .sandline-product .product_title, .sandline-product h1.product_title.entry-title { color: var(--text-primary); font-family: var(--font-display, var(--font-sans)); font-size: clamp(26px, 3.2vw, 40px); font-weight: 700; line-height: 1.15; letter-spacing: -0.015em; /* text-wrap kullanmıyoruz: 'balance' başlığı 3 satıra eşit dağıtıyor; ekstra dar görünüyor. */ text-wrap: wrap; margin: 6px 0 0; max-width: 100%; word-break: normal; overflow-wrap: break-word; hyphens: manual; } /* Star rating */ .sandline-product .woocommerce-product-rating { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--text-secondary); font-size: 13px; } .sandline-product .woocommerce-product-rating .star-rating { font-size: 14px; color: var(--sp-accent); } .sandline-product .woocommerce-product-rating .woocommerce-review-link { color: var(--text-muted); } /* Price */ .sandline-product p.price, .sandline-product .summary p.price, .sandline-product .summary span.price { color: var(--text-primary); font-size: clamp(22px, 2.6vw, 32px); font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; margin: 4px 0 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; } .sandline-product p.price del, .sandline-product .summary p.price del { color: var(--text-muted); font-size: 0.7em; font-weight: 500; text-decoration: line-through; opacity: 0.7; } .sandline-product p.price ins, .sandline-product .summary p.price ins { color: var(--sp-accent); background: transparent; text-decoration: none; } .sandline-product .call-for-price { color: var(--sp-accent); font-size: clamp(18px, 2vw, 22px); font-weight: 700; letter-spacing: -0.005em; margin-top: 4px; } /* Stock + saving row */ .sandline-product__pricerow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; } .sandline-product__stock { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; } .sandline-product__stock--ok { background: var(--sp-success-soft); color: #4ade80; border: 1px solid rgba(34, 197, 94, 0.28); } .sandline-product__stock--out { background: var(--sp-danger-soft); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.28); } .sandline-product__saving { display: inline-block; padding: 5px 10px; border-radius: 999px; background: var(--sp-accent); color: #0b0b0b; font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; } /* Short description (lighter, inline — not a heavy card) */ .sandline-product__excerpt { position: relative; background: transparent; border: 0; border-left: 2px solid var(--sp-accent); border-radius: 0; padding: 2px 0 2px 16px; margin: 4px 0 0; } .sandline-product__excerpt-mark { display: none; } .sandline-product__excerpt-body { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.65; } .sandline-product__excerpt-body :last-child { margin-bottom: 0; } .sandline-product__excerpt-body p { margin: 0 0 8px; } .sandline-product__excerpt-body p:last-child { margin-bottom: 0; } /* Variations / select */ .sandline-product table.variations { width: 100%; margin: 4px 0 0; background: transparent; border-collapse: collapse; } .sandline-product table.variations tr { background: transparent; } .sandline-product table.variations th, .sandline-product table.variations td { background: transparent; border: 0; padding: 6px 0; color: var(--text-primary); vertical-align: middle; } .sandline-product table.variations th { font-weight: 700; font-size: 11px; letter-spacing: 0.1em; width: 100px; text-transform: uppercase; color: var(--text-muted); } .sandline-product table.variations select { width: 100%; background: var(--sp-surface-card); color: var(--text-primary); border: 1px solid var(--sp-border-strong); border-radius: var(--sp-radius-sm); padding: 12px 38px 12px 14px; font-size: 14px; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23a8b3c7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; transition: border-color 0.2s ease; cursor: pointer; } .sandline-product table.variations select:focus { outline: none; border-color: var(--sp-accent); } .sandline-product .reset_variations { display: inline-block; color: var(--text-muted); font-size: 12px; margin-top: 6px; text-decoration: underline; text-underline-offset: 3px; } .sandline-product .single_variation_wrap .woocommerce-variation-price { margin: 6px 0; } /* ---------- Cart row (compact, premium) ---------- */ .sandline-product form.cart { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; gap: 10px; margin: 6px 0 0; padding: 0; background: transparent; border: 0; } .sandline-product form.cart .quantity { flex: 0 0 auto; width: auto; margin: 0; display: flex; align-items: stretch; background: var(--sp-surface-card); border: 1px solid var(--sp-border-strong); border-radius: var(--sp-radius-sm); overflow: hidden; } .sandline-product form.cart .quantity .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } .sandline-product form.cart div.quantity input.qty, .sandline-product form.cart .quantity input.qty { width: 64px; height: 52px; background: transparent; color: var(--text-primary); border: 0; text-align: center; font-size: 15px; font-weight: 700; appearance: textfield; -moz-appearance: textfield; padding: 0; margin: 0; } .sandline-product form.cart .quantity input.qty::-webkit-outer-spin-button, .sandline-product form.cart .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .sandline-product form.cart .single_add_to_cart_button, .sandline-product form.cart .button { flex: 1 1 auto; min-width: 0; width: auto; margin: 0; height: 52px; background: var(--sp-accent) !important; color: #0b0b0b !important; border: 0 !important; border-radius: var(--sp-radius-sm) !important; padding: 0 24px !important; font-size: 13px !important; font-weight: 800 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; line-height: 1 !important; cursor: pointer; position: relative; overflow: hidden; transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 6px 18px rgba(224, 122, 95, 0.25); } .sandline-product form.cart .single_add_to_cart_button::before { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%); transform: translateX(-100%); transition: transform 0.7s cubic-bezier(.2, .7, .2, 1); pointer-events: none; } .sandline-product form.cart .single_add_to_cart_button:hover { background: var(--sp-accent-hover) !important; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(224, 122, 95, 0.36); } .sandline-product form.cart .single_add_to_cart_button:hover::before { transform: translateX(100%); } .sandline-product form.cart .single_add_to_cart_button:active { transform: translateY(0); } .sandline-product form.cart .single_add_to_cart_button:disabled { background: var(--bg-tertiary) !important; color: var(--text-muted) !important; box-shadow: none; cursor: not-allowed; opacity: 0.7; } /* ---------- WhatsApp CTA (slim secondary action) ---------- */ .sandline-product__wa { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 10px 14px; border-radius: var(--sp-radius-sm); background: linear-gradient(135deg, #2bb863 0%, #1f9b50 100%); color: #ffffff; text-decoration: none; position: relative; overflow: hidden; box-shadow: 0 4px 12px rgba(37, 165, 80, 0.22); transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease; isolation: isolate; align-self: flex-start; max-width: 100%; } .sandline-product__wa:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(37, 165, 80, 0.3); filter: brightness(1.05); color: #ffffff; } .sandline-product__wa:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .sandline-product__wa-icon { flex: 0 0 28px; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.24); color: #fff; } .sandline-product__wa-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; line-height: 1.2; } .sandline-product__wa-top { display: flex; align-items: center; gap: 6px; font-size: 10px; color: rgba(255, 255, 255, 0.85); letter-spacing: 0.02em; } .sandline-product__wa-brand { font-weight: 500; } .sandline-product__wa-status { display: inline-flex; align-items: center; gap: 3px; padding: 0 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.22); font-size: 9px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .sandline-product__wa-dot { width: 4px; height: 4px; border-radius: 50%; background: #fff; animation: spWaPulse 1.8s ease-out infinite; } @keyframes spWaPulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55); } 70% { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } } .sandline-product__wa-title { font-size: 12.5px; font-weight: 700; color: #fff; } /* ---------- Trust strip (inline, slim) ---------- */ .sandline-product__trust { list-style: none; margin: 4px 0 0; padding: 0; border-top: 1px solid var(--sp-border); padding-top: 14px; display: flex; gap: 18px; } .sandline-product__trust--single .sandline-product__trust-item { flex: 1 1 auto; } .sandline-product__trust-item { display: flex; align-items: center; gap: 10px; } .sandline-product__trust-icon { flex: 0 0 32px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--sp-accent-soft); color: var(--sp-accent); } .sandline-product__trust-icon svg { width: 16px; height: 16px; } .sandline-product__trust-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; line-height: 1.3; } .sandline-product__trust-text strong { font-size: 12.5px; font-weight: 700; color: var(--text-primary); } .sandline-product__trust-text small { font-size: 10.5px; color: var(--text-muted); letter-spacing: 0.02em; } /* ---------- Meta bar (SKU / Category / Production) — slim row ---------- */ .sandline-product__metabar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 4px 0 0; border-top: 1px solid var(--sp-border); padding-top: 14px; } .sandline-product__metaitem { position: relative; padding: 0 16px 0 0; background: transparent; border: 0; } .sandline-product__metaitem + .sandline-product__metaitem { border-left: 1px solid var(--sp-border); padding-left: 16px; } .sandline-product__metaitem::before { display: none; } .sandline-product__metalabel { display: block; color: var(--text-muted); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 4px; } .sandline-product__metavalue { display: block; color: var(--text-primary); font-size: 13.5px; font-weight: 600; line-height: 1.35; word-break: break-word; } /* WC default product_meta — hide if our metabar already shows the same info */ .sandline-product .product_meta { display: none; } /* SR text helper */ .sandline-product .summary .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); } /* ============================================================ PILLARS — feature highlights row ============================================================ */ .sandline-product__pillars { margin: 0 auto clamp(40px, 5vw, 64px); padding: clamp(20px, 2.5vw, 28px) clamp(20px, 2.5vw, 32px); background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-lg); position: relative; overflow: hidden; } .sandline-product__pillars-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); } .sandline-pillar { display: flex; align-items: flex-start; gap: 12px; } .sandline-pillar__icon { flex: 0 0 40px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--sp-accent-soft); color: var(--sp-accent); } .sandline-pillar__icon svg { width: 20px; height: 20px; } .sandline-pillar__body { min-width: 0; } .sandline-pillar__title { color: var(--text-primary); font-size: 14px; font-weight: 700; margin: 0 0 4px; line-height: 1.3; letter-spacing: -0.005em; } .sandline-pillar__desc { color: var(--text-muted); font-size: 12.5px; line-height: 1.55; margin: 0; } /* ============================================================ INQUIRY CTA — for call-for-price products only ============================================================ */ .sandline-product__inquiry { margin: 0 auto clamp(40px, 5vw, 64px); padding: clamp(28px, 3.6vw, 44px); background: radial-gradient(ellipse 70% 100% at 100% 0%, rgba(224, 122, 95, 0.1), transparent 60%), var(--sp-surface-card); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-lg); position: relative; overflow: hidden; box-shadow: var(--sp-shadow); } .sandline-product__inquiry::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--sp-accent); } .sandline-product__inquiry-inner { display: grid; grid-template-columns: minmax(0, 1.6fr) auto; align-items: center; gap: 28px; } .sandline-product__inquiry-eyebrow { display: inline-block; color: var(--sp-accent); font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 10px; } .sandline-product__inquiry-title { color: var(--text-primary); font-size: clamp(20px, 2.4vw, 28px); font-weight: 700; line-height: 1.25; letter-spacing: -0.015em; margin: 0 0 8px; } .sandline-product__inquiry-desc { color: var(--text-secondary); font-size: 14px; line-height: 1.65; margin: 0; max-width: 56ch; } .sandline-product__inquiry-actions { display: flex; gap: 10px; flex-wrap: wrap; } /* ============================================================ TABS — modern segmented ============================================================ */ .sandline-product .woocommerce-tabs { margin: 0 auto clamp(40px, 5vw, 64px); background: transparent; border: 1px solid var(--sp-border); border-radius: var(--sp-radius-lg); overflow: hidden; } .sandline-product .woocommerce-tabs ul.tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; margin: 0 !important; padding: 0 8px !important; list-style: none; background: var(--sp-surface); border: 0; border-bottom: 1px solid var(--sp-border) !important; box-shadow: none; scrollbar-width: thin; scrollbar-color: var(--sp-border-strong) transparent; } .sandline-product .woocommerce-tabs ul.tabs::-webkit-scrollbar { height: 3px; } .sandline-product .woocommerce-tabs ul.tabs::-webkit-scrollbar-track { background: transparent; } .sandline-product .woocommerce-tabs ul.tabs::-webkit-scrollbar-thumb { background: var(--sp-border-strong); border-radius: 2px; } .sandline-product .woocommerce-tabs ul.tabs::before, .sandline-product .woocommerce-tabs ul.tabs::after { display: none !important; } .sandline-product .woocommerce-tabs ul.tabs li { flex: 0 0 auto; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; } .sandline-product .woocommerce-tabs ul.tabs li::before, .sandline-product .woocommerce-tabs ul.tabs li::after { display: none !important; } .sandline-product .woocommerce-tabs ul.tabs li a { position: relative; display: inline-flex; align-items: center; padding: 16px 22px !important; color: var(--text-secondary) !important; font-size: 12.5px !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; white-space: nowrap; background: transparent !important; border: 0 !important; text-shadow: none !important; text-decoration: none !important; transition: color 0.25s ease; } .sandline-product .woocommerce-tabs ul.tabs li a::after { content: ''; position: absolute; left: 50%; bottom: -1px; width: 0; height: 2px; background: var(--sp-accent); transition: width 0.3s ease, left 0.3s ease; } .sandline-product .woocommerce-tabs ul.tabs li a:hover { color: var(--text-primary) !important; } .sandline-product .woocommerce-tabs ul.tabs li:hover a::after, .sandline-product .woocommerce-tabs ul.tabs li.active a::after { width: calc(100% - 30px); left: 15px; } .sandline-product .woocommerce-tabs ul.tabs li.active a { color: var(--sp-accent) !important; } /* Tab panels */ .sandline-product .woocommerce-tabs .panel, .sandline-product .woocommerce-tabs .woocommerce-Tabs-panel { padding: clamp(24px, 3vw, 40px) !important; margin: 0 !important; color: var(--text-secondary); font-size: 1rem; line-height: 1.75; background: transparent !important; border: 0 !important; } .sandline-product .woocommerce-tabs .panel > h2:first-child { color: var(--text-primary); font-size: clamp(18px, 2vw, 22px); font-weight: 700; letter-spacing: -0.01em; margin: 0 0 18px; padding-bottom: 12px; position: relative; } .sandline-product .woocommerce-tabs .panel > h2:first-child::after { content: ''; position: absolute; left: 0; bottom: 0; width: 40px; height: 2px; background: var(--sp-accent); } /* ---------- Description tab editorial typography ---------- */ .sandline-tab-desc { max-width: 78ch; } .sandline-tab-desc__body { color: var(--text-secondary); font-size: 1.02rem; line-height: 1.8; overflow: hidden; } .sandline-tab-desc__body > p:first-of-type::first-letter { color: var(--sp-accent); font-family: var(--font-display, var(--font-sans)); font-weight: 800; font-size: 3.2rem; line-height: 1; float: left; padding: 6px 12px 0 0; margin: 0; letter-spacing: -0.02em; } .sandline-tab-desc__body p { margin: 0 0 1.2em; } .sandline-tab-desc__body p:last-child { margin-bottom: 0; } .sandline-tab-desc__body h2, .sandline-tab-desc__body h3 { color: var(--text-primary); margin-top: 1.4em; } .sandline-tab-desc__body h2 { font-size: 1.35rem; } .sandline-tab-desc__body h3 { font-size: 1.15rem; } .sandline-tab-desc__body ul, .sandline-tab-desc__body ol { list-style: none; padding: 0; margin: 16px 0 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 28px; } .sandline-tab-desc__body ul li, .sandline-tab-desc__body ol li { position: relative; padding-left: 24px; color: var(--text-secondary); line-height: 1.6; } .sandline-tab-desc__body ul li::before { content: ''; position: absolute; left: 0; top: 0.65em; width: 12px; height: 1.5px; background: var(--sp-accent); } .sandline-tab-desc__body ol { counter-reset: sdl; } .sandline-tab-desc__body ol li { counter-increment: sdl; } .sandline-tab-desc__body ol li::before { content: counter(sdl, decimal-leading-zero); position: absolute; left: 0; top: 0; color: var(--sp-accent); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.05em; } .sandline-tab-desc__body blockquote { border-left: 3px solid var(--sp-accent); padding: 12px 22px; margin: 24px 0; background: var(--sp-accent-soft); color: var(--text-primary); font-style: italic; border-radius: 0 var(--sp-radius-sm) var(--sp-radius-sm) 0; } .sandline-tab-desc__body a { color: var(--sp-accent); border-bottom: 1px solid rgba(224, 122, 95, 0.4); } .sandline-tab-desc__body a:hover { border-bottom-color: var(--sp-accent); } .sandline-tab-desc__body img { border-radius: var(--sp-radius); margin: 18px 0; max-width: 100%; height: auto; } /* ---------- Additional information table ---------- */ .sandline-product .woocommerce-tabs .shop_attributes, .sandline-tab-info table.shop_attributes { width: 100%; background: transparent !important; border: 1px solid var(--sp-border) !important; border-radius: var(--sp-radius) !important; overflow: hidden; margin: 0 !important; border-collapse: separate; border-spacing: 0; } .sandline-product .woocommerce-tabs .shop_attributes th, .sandline-product .woocommerce-tabs .shop_attributes td { padding: 14px 18px !important; border-bottom: 1px solid var(--sp-border) !important; border-top: 0 !important; color: var(--text-primary) !important; background: transparent !important; font-style: normal !important; line-height: 1.5; } .sandline-product .woocommerce-tabs .shop_attributes tr:last-child th, .sandline-product .woocommerce-tabs .shop_attributes tr:last-child td { border-bottom: 0 !important; } .sandline-product .woocommerce-tabs .shop_attributes th { background: var(--sp-accent-soft) !important; font-weight: 700 !important; color: var(--sp-accent) !important; text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px !important; width: 32%; } .sandline-product .woocommerce-tabs .shop_attributes td { color: var(--text-secondary) !important; } /* ---------- Process tab (custom) ---------- */ .sandline-tab-process__head h2 { margin-top: 0; } .sandline-tab-process__head p { color: var(--text-muted); max-width: 70ch; margin: 0 0 24px; } .sandline-tab-process__list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; } .sandline-tab-process__step { position: relative; background: var(--bg-card, #161e2c); border: 1px solid var(--sp-border); border-radius: var(--sp-radius); padding: 22px; display: flex; flex-direction: column; gap: 10px; transition: border-color 0.25s ease, transform 0.25s ease; } .sandline-tab-process__step:hover { border-color: rgba(224, 122, 95, 0.4); transform: translateY(-3px); } .sandline-tab-process__num { font-size: 1.6rem; font-weight: 800; color: var(--sp-accent); letter-spacing: -0.02em; line-height: 1; font-family: var(--font-display, var(--font-sans)); } .sandline-tab-process__body h4 { font-size: 1rem; margin: 0 0 6px; color: var(--text-primary); font-weight: 700; } .sandline-tab-process__body p { font-size: 0.9rem; color: var(--text-muted); margin: 0; line-height: 1.6; } /* ---------- FAQ tab (custom) ---------- */ .sandline-tab-faq__head h2 { margin: 0 0 20px; } .sandline-tab-faq__list { display: flex; flex-direction: column; gap: 8px; } .sandline-tab-faq__item { background: var(--bg-card, #161e2c); border: 1px solid var(--sp-border); border-radius: var(--sp-radius); overflow: hidden; transition: border-color 0.25s ease; } .sandline-tab-faq__item[open] { border-color: rgba(224, 122, 95, 0.32); } .sandline-tab-faq__q { list-style: none; cursor: pointer; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--text-primary); font-weight: 600; font-size: 0.96rem; user-select: none; } .sandline-tab-faq__q::-webkit-details-marker { display: none; } .sandline-tab-faq__icon { position: relative; width: 14px; height: 14px; flex-shrink: 0; } .sandline-tab-faq__icon::before, .sandline-tab-faq__icon::after { content: ''; position: absolute; background: var(--sp-accent); border-radius: 2px; transition: transform 0.25s ease; } .sandline-tab-faq__icon::before { left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%); } .sandline-tab-faq__icon::after { top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%); } .sandline-tab-faq__item[open] .sandline-tab-faq__icon::after { transform: translateX(-50%) scaleY(0); } .sandline-tab-faq__a { padding: 0 20px 18px; color: var(--text-secondary); line-height: 1.7; border-top: 1px solid var(--sp-border); padding-top: 14px; } .sandline-tab-faq__a p { margin: 0; } /* ---------- Reviews panel ---------- */ .sandline-product #reviews .comment-reply-title { color: var(--text-primary); font-size: 1.05rem; } .sandline-product #reviews .woocommerce-noreviews, .sandline-product #reviews .woocommerce-Reviews-title { color: var(--text-secondary); } .sandline-product #reviews #respond { background: var(--bg-card, #161e2c); border: 1px solid var(--sp-border); border-radius: var(--sp-radius); padding: 24px; margin-top: 18px; } .sandline-product #reviews ol.commentlist { list-style: none; padding: 0; margin: 0 0 24px; } .sandline-product #reviews ol.commentlist li { background: var(--bg-card, #161e2c); border: 1px solid var(--sp-border); border-radius: var(--sp-radius); padding: 18px 20px; margin: 0 0 14px; } .sandline-product #reviews ol.commentlist li img.avatar { border: 1px solid var(--sp-border); background: var(--sp-surface-card); padding: 4px; border-radius: 50%; } /* ============================================================ RELATED / UPSELL ============================================================ */ .sandline-product .related, .sandline-product .upsells { padding: clamp(28px, 4vw, 56px) 0 0; } .sandline-product .related > h2, .sandline-product .upsells > h2 { font-size: clamp(20px, 2.4vw, 28px); font-weight: 700; letter-spacing: -0.015em; color: var(--text-primary); margin: 0 0 24px; position: relative; padding-bottom: 12px; } .sandline-product .related > h2::after, .sandline-product .upsells > h2::after { content: ''; position: absolute; left: 0; bottom: 0; width: 44px; height: 2px; background: var(--sp-accent); } /* ============================================================ RESPONSIVE BREAKPOINTS ============================================================ */ /* Laptop ≤1200px */ @media (max-width: 1200px) { .sandline-product__pillars-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Tablet large ≤1024px — drop sticky */ @media (max-width: 1024px) { .sandline-product__summary { position: static; top: auto; padding-left: 0; } .sandline-product__hero { gap: 36px; } } /* Tablet ≤860px — stack to single column */ @media (max-width: 860px) { .sandline-product__hero { grid-template-columns: 1fr; gap: 28px; } .sandline-product__gallery { max-width: 560px; margin-left: auto; margin-right: auto; } .sandline-product__summary { max-width: 100%; } .sandline-product__inquiry-inner { grid-template-columns: 1fr; gap: 18px; } .sandline-product__metabar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; } .sandline-product__metaitem:nth-child(2) { border-left: 1px solid var(--sp-border); } .sandline-product__metaitem:nth-child(3) { grid-column: 1 / -1; border-left: 0; padding-left: 0; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--sp-border); } } /* Mobile ≤640px */ @media (max-width: 640px) { body.woocommerce div.product.sandline-product { padding: 24px 14px 48px; } .sandline-product__hero { gap: 22px; margin-bottom: 36px; } .sandline-product__gallery { max-width: 100%; } .sandline-product__summary { gap: 12px; } .sandline-product__eyebrow { font-size: 10.5px; letter-spacing: 0.18em; } .sandline-product__eyebrow-line { width: 22px; } /* Thumbnails: 5 cols still ok with smaller gap */ .sandline-product .sandline-gallery-thumbs { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; } /* Cart row: stack quantity above button */ .sandline-product form.cart { flex-direction: column; align-items: stretch; gap: 10px; } .sandline-product form.cart .quantity { width: 100%; justify-content: center; } .sandline-product form.cart div.quantity input.qty, .sandline-product form.cart .quantity input.qty { width: 100%; max-width: 100%; } .sandline-product form.cart .single_add_to_cart_button, .sandline-product form.cart .button { /* Mobile Add-to-cart — full-width, proper finger-size target. Old rule used `flex: 1 1 100%` in a column flexbox which fights with the explicit height and can collapse the button to text-height (the "incecik" look the user reported). Drop the flex shorthand and use min-height + vertical padding so the button keeps a fat 56px tap target with breathing room around the label. */ display: flex !important; align-items: center; justify-content: center; flex: 0 0 auto; width: 100%; min-height: 56px; height: auto; padding: 16px 24px !important; font-size: 14px !important; line-height: 1.2 !important; white-space: normal; } /* WA full width */ .sandline-product__wa { width: 100%; align-self: stretch; } /* Trust: stack */ .sandline-product__trust { flex-direction: column; gap: 12px; padding-top: 12px; } /* Metabar: single column */ .sandline-product__metabar { grid-template-columns: 1fr; gap: 0; } .sandline-product__metaitem { padding: 12px 0; border-bottom: 1px solid var(--sp-border); } .sandline-product__metaitem + .sandline-product__metaitem { border-left: 0; padding-left: 0; } .sandline-product__metaitem:last-child { border-bottom: 0; padding-bottom: 0; } /* Pillars: single column horizontal */ .sandline-product__pillars { padding: 20px; } .sandline-product__pillars-grid { grid-template-columns: 1fr; gap: 14px; } .sandline-pillar__icon { flex: 0 0 36px; width: 36px; height: 36px; } .sandline-pillar__icon svg { width: 18px; height: 18px; } .sandline-pillar__title { font-size: 13.5px; } .sandline-pillar__desc { font-size: 12px; } /* Inquiry actions stack */ .sandline-product__inquiry-actions { flex-direction: column; } .sandline-product__inquiry-actions .btn { width: 100%; text-align: center; } /* Tabs */ .sandline-product .woocommerce-tabs ul.tabs li a { padding: 14px 14px !important; font-size: 11.5px !important; } .sandline-product .woocommerce-tabs .panel { padding: 22px 16px 28px !important; } .sandline-tab-desc__body { font-size: 0.98rem; line-height: 1.7; } .sandline-tab-desc__body > p:first-of-type::first-letter { font-size: 2.6rem; padding-right: 10px; } .sandline-tab-process__list { grid-template-columns: 1fr; gap: 10px; } .sandline-tab-process__step { padding: 18px; } .sandline-tab-faq__q { padding: 14px 16px; font-size: 0.94rem; } .sandline-tab-faq__a { padding-left: 16px; padding-right: 16px; padding-bottom: 14px; padding-top: 12px; } /* Smaller sale flash + zoom */ .sandline-product .woocommerce span.onsale { top: 10px; left: 10px; padding: 6px 10px; font-size: 10px; } .sandline-product .woocommerce-product-gallery__trigger { top: 10px; right: 10px; width: 34px; height: 34px; } /* Title slightly smaller on mobile */ .sandline-product .product_title { font-size: clamp(22px, 5vw, 28px); } .sandline-product p.price { font-size: clamp(20px, 5vw, 26px); } } /* Very small phones ≤380px */ @media (max-width: 380px) { body.woocommerce div.product.sandline-product { padding: 20px 12px 44px; } .sandline-product .sandline-gallery-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); } .sandline-product__pillars { padding: 18px; } .sandline-product__inquiry { padding: 24px 18px; } } /* ---------- SEPET — Flexbox ile garantili 2-kolon ---------- */ /* Eski grid kurallarını sıfırla, yerine flex koy. body. ile en yüksek specificity. */ body.woocommerce-cart .entry-content { padding: 50px 0 90px !important; } body.woocommerce-cart .entry-content > .woocommerce { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: flex-start !important; gap: 28px !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } /* Notice / boş sepet / mağazaya dön — tam genişlik */ body.woocommerce-cart .entry-content > .woocommerce > .woocommerce-notices-wrapper, body.woocommerce-cart .entry-content > .woocommerce > .wc-empty-cart-message, body.woocommerce-cart .entry-content > .woocommerce > .cart-empty, body.woocommerce-cart .entry-content > .woocommerce > .return-to-shop { flex: 0 0 100% !important; width: 100% !important; order: -1; } /* Sol: ürün listesi — esnek, kalan alanı doldur */ body.woocommerce-cart .entry-content form.woocommerce-cart-form { flex: 1 1 0 !important; min-width: 0 !important; max-width: calc(100% - 388px) !important; float: none !important; width: auto !important; margin: 0 !important; overflow: visible !important; } /* Sağ: özet kutusu — 360px sabit sticky */ body.woocommerce-cart .entry-content .cart-collaterals { flex: 0 0 360px !important; width: 360px !important; max-width: 360px !important; min-width: 0 !important; float: none !important; position: sticky !important; top: 96px !important; align-self: flex-start !important; margin: 0 !important; } /* WC'nin default'ı .cart_totals'a float:right + width:48% verir — agresif iptal */ body.woocommerce-cart .cart-collaterals .cart_totals, body.woocommerce-cart .cart-collaterals > .cross-sells, body.woocommerce-cart .cart-collaterals .shipping_calculator { float: none !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; clear: none !important; } body.woocommerce-cart .cart-collaterals > .cross-sells { margin-top: 20px !important; } /* Totals — fiyatın taşmasını engelle */ body.woocommerce-cart .cart_totals h2 { font-size: 17px !important; white-space: nowrap; } body.woocommerce-cart .cart_totals table tr.order-total th, body.woocommerce-cart .cart_totals table tr.order-total td { font-size: 15px !important; padding-top: 16px !important; white-space: nowrap !important; } body.woocommerce-cart .cart_totals table tr.order-total td, body.woocommerce-cart .cart_totals table tr.order-total .amount, body.woocommerce-cart .cart_totals table tr.order-total .woocommerce-Price-amount { font-size: 18px !important; font-weight: 800 !important; white-space: nowrap !important; } /* "Ödeme sayfasına git" — tek satır */ body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button { font-size: 14px !important; white-space: nowrap !important; padding: 14px 16px !important; min-height: 50px !important; line-height: 1.2 !important; letter-spacing: 0.01em !important; } /* "Sepeti güncelle" + "Kupon kullan" — dark tema'da görünür buton */ body.woocommerce-cart td.actions .button, body.woocommerce-cart td.actions button[name="apply_coupon"], body.woocommerce-cart td.actions button[name="update_cart"] { background: var(--accent) !important; color: #000 !important; border: 1px solid var(--accent) !important; } body.woocommerce-cart td.actions button[name="update_cart"]:disabled, body.woocommerce-cart td.actions button[name="update_cart"][disabled] { background: var(--bg-tertiary) !important; color: var(--text-muted) !important; border-color: var(--border) !important; opacity: 1 !important; cursor: not-allowed; } /* entry-content link altçizgisi sepete sızmasın */ body.woocommerce-cart .entry-content a, body.woocommerce-checkout .entry-content a { border-bottom: 0 !important; text-decoration: none !important; } body.woocommerce-cart .entry-content table.shop_table.cart td.product-name a { border-bottom: 0 !important; text-decoration: none !important; white-space: normal !important; overflow-wrap: break-word !important; word-break: normal !important; } /* Sepet — mobil */ @media (max-width: 1024px) { body.woocommerce-cart .entry-content form.woocommerce-cart-form { flex: 0 0 100% !important; max-width: 100% !important; } body.woocommerce-cart .entry-content .cart-collaterals { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; position: static !important; top: auto !important; } } /* ---------- ÖDEME — Sticky'i kaldır + sipariş özetini görünür yap ---------- */ /* Sticky bazı durumlarda görünürlüğü bozabiliyor — düz akışa al, basit ve güvenli. */ body.woocommerce-checkout .entry-content form.checkout .checkout-order-review { position: static !important; top: auto !important; } /* Heading ve order_review'u garantili göster */ body.woocommerce-checkout #order_review_heading { display: block !important; visibility: visible !important; } body.woocommerce-checkout #order_review { display: block !important; visibility: visible !important; opacity: 1 !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; position: relative !important; z-index: 1; } body.woocommerce-checkout #order_review table.shop_table.woocommerce-checkout-review-order-table { display: table !important; width: 100% !important; visibility: visible !important; opacity: 1 !important; } body.woocommerce-checkout #order_review table tbody { display: table-row-group !important; visibility: visible !important; } body.woocommerce-checkout #order_review table tbody tr.cart_item { display: table-row !important; visibility: visible !important; } body.woocommerce-checkout #order_review table tbody tr.cart_item td, body.woocommerce-checkout #order_review table tfoot tr th, body.woocommerce-checkout #order_review table tfoot tr td { display: table-cell !important; visibility: visible !important; color: var(--text-primary) !important; } body.woocommerce-checkout #order_review table tfoot { display: table-footer-group !important; visibility: visible !important; } body.woocommerce-checkout #payment { display: block !important; visibility: visible !important; margin-top: 18px !important; } /* WC blockUI overlay'ini zorla görünmez kıl (AJAX takılırsa içerik gözüksün) */ body.woocommerce-checkout .blockUI.blockOverlay { opacity: 0 !important; background: transparent !important; } /* entry-content blog tipografisinin tabloya bulaşmasını engelle */ body.woocommerce-checkout #order_review table th, body.woocommerce-checkout #order_review table td { font-size: 14px !important; line-height: 1.5 !important; color: var(--text-primary) !important; } /* (Eski v1 hotfix bloğu kaldırıldı — v3 (yukarıda) v2 ile birlikte tek otorite. Buradaki kurallar v3'ün üzerine yazıyordu ve hero ortalamayı bozuyordu.) */ /* ============================================================ WhatsApp Floating Button ============================================================ */ .wa-float { position: fixed; bottom: 28px; right: 28px; z-index: 9998; width: 60px; height: 60px; background: #25D366; color: #fff; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3); transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1); -webkit-tap-highlight-color: transparent; } .wa-float:hover { background: #1da851; color: #fff; transform: translateY(-3px) scale(1.06); box-shadow: 0 12px 28px rgba(37, 211, 102, 0.5), 0 6px 16px rgba(0, 0, 0, 0.4); } .wa-float:active { transform: translateY(-1px) scale(1.0); } .wa-float-icon { position: relative; z-index: 2; width: 30px; height: 30px; flex-shrink: 0; display: block; } .wa-float-label { position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%); background: var(--bg-elevated, #222); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; padding: 8px 14px; border-radius: 8px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); } .wa-float-label::after { content: ''; position: absolute; left: 100%; top: 50%; transform: translateY(-50%); border: 6px solid transparent; border-left-color: var(--bg-elevated, #222); } .wa-float:hover .wa-float-label { opacity: 1; transform: translateY(-50%) translateX(-2px); } /* Pulse ring animation */ .wa-float-pulse { position: absolute; inset: 0; border-radius: 50%; background: #25D366; opacity: 0.6; z-index: 1; animation: wa-pulse 2.2s cubic-bezier(0.16, 1, 0.3, 1) infinite; } @keyframes wa-pulse { 0% { transform: scale(1); opacity: 0.6; } 70% { transform: scale(1.55); opacity: 0; } 100% { transform: scale(1.55); opacity: 0; } } /* Mobile — smaller, padded from edges */ @media (max-width: 768px) { .wa-float { bottom: 18px; right: 18px; width: 54px; height: 54px; } .wa-float-icon { width: 26px; height: 26px; } .wa-float-label { display: none; } } @media (max-width: 480px) { .wa-float { bottom: 16px; right: 16px; width: 50px; height: 50px; } .wa-float-icon { width: 24px; height: 24px; } } /* ============================================================ Custom Language Switcher (button + listbox, controlled by JS) Replaces the old
    -based version which was unreliable after BFCache restores in Safari/Chrome. ============================================================ */ .sl-lang { position: relative; display: inline-block; font-family: inherit; /* iOS Safari pops a Share/"Compose mail" sheet when a link is held longer than ~0.5s. Customers were triggering it accidentally when tapping language options on phone. Disable that long-press callout for everything inside the switcher, and prefer the fast tap path (no double-tap-zoom hesitation). */ -webkit-touch-callout: none; touch-action: manipulation; } .sl-lang *, .sl-lang-trigger, .sl-lang-item { -webkit-touch-callout: none; touch-action: manipulation; -webkit-user-drag: none; } /* Reset button defaults */ .sl-lang-trigger { appearance: none; -webkit-appearance: none; font-family: inherit; font-size: inherit; } /* Trigger */ .sl-lang-trigger { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 6px; color: #d8d8d8; font-size: 12px; font-weight: 500; letter-spacing: 0.03em; line-height: 1.4; cursor: pointer; transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease; white-space: nowrap; user-select: none; outline: none; } .sl-lang-trigger:hover { background: rgba(224, 122, 95, 0.1); border-color: rgba(224, 122, 95, 0.4); color: #e07a5f; } .sl-lang.is-open .sl-lang-trigger, .sl-lang-trigger[aria-expanded="true"] { background: rgba(224, 122, 95, 0.15); border-color: rgba(224, 122, 95, 0.5); color: #e07a5f; } .sl-lang-trigger:focus-visible { outline: 2px solid rgba(224, 122, 95, 0.5); outline-offset: 2px; } .sl-lang-flag { width: 20px; height: 14px; object-fit: cover; border-radius: 2px; display: block; flex-shrink: 0; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } .sl-lang-name { color: inherit; line-height: 1.4; } .sl-lang-caret { color: #888; flex-shrink: 0; transition: transform 0.25s ease, color 0.25s ease; } .sl-lang-trigger:hover .sl-lang-caret, .sl-lang.is-open .sl-lang-trigger .sl-lang-caret, .sl-lang-trigger[aria-expanded="true"] .sl-lang-caret { color: #e07a5f; } .sl-lang.is-open .sl-lang-trigger .sl-lang-caret, .sl-lang-trigger[aria-expanded="true"] .sl-lang-caret { transform: rotate(180deg); } /* Dropdown — visible only when JS removes the [hidden] attribute */ .sl-lang-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 170px; margin: 0; padding: 6px; list-style: none; background: #161616; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.3); z-index: 1100; } .sl-lang-menu li { margin: 0; padding: 0; list-style: none; } .sl-lang-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; color: #d8d8d8; text-decoration: none; font-size: 13px; font-weight: 500; border-radius: 5px; transition: background 0.2s ease, color 0.2s ease; white-space: nowrap; } .sl-lang-item:hover, .sl-lang-item:focus-visible { background: rgba(224, 122, 95, 0.12); color: #e07a5f; outline: none; } /* Mobile variant — menü içinde */ .sl-lang--mobile .sl-lang-trigger { padding: 8px 14px; font-size: 13px; min-width: 140px; justify-content: flex-end; } .sl-lang--mobile .sl-lang-menu { right: 0; left: auto; min-width: 180px; } @media (max-width: 480px) { .sl-lang--desktop .sl-lang-name { display: none; } .sl-lang--desktop .sl-lang-trigger { padding: 6px 10px; gap: 6px; } } /* ============================================================ WOOCOMMERCE BLOCKS CHECKOUT — Dark theme refresh (v2) Hedef: /tr/afrekenen/ (yeni Gutenberg blocks tabanlı ödeme sayfası) İlkeler: 1) WooCommerce blocks markup'ı (wp-block-woocommerce-checkout-*) KORUNUR. Hiçbir PHP / JS / template değişikliği yok — sadece görsel CSS katmanı. 2) WC Blocks'un kendi floating-label/animasyon mantığını YENİDEN YAZMAYIZ; sadece renk + padding + tipografi ile koyu temaya uyumlu hale getiririz. 3) Combobox (Ülke / Bölge) farklı bir component'tir — label'ı static (alanın üstünde) gösterip, üst üste binmesini kalıcı çözeriz. 4) Loading skeleton ve money-amount chip'lerine agresif renk override UYGULANMAZ (yoksa skeleton sürekli görünür gibi durur). ============================================================ */ /* --- 1) SAYFA KAPSAYICISI ----------------------------------- */ body.woocommerce-checkout .page-article { background: var(--bg-primary) !important; padding: 32px 0 96px !important; } body.woocommerce-checkout .page-article .container { max-width: 1240px !important; } body.woocommerce-checkout .entry-content { max-width: none !important; color: var(--text-primary); } body.woocommerce-checkout .page-header-plain { background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%) !important; border-bottom: 1px solid var(--border) !important; padding: 48px 0 24px !important; } /* --- 2) ANA YERLEŞİM: 2 kolon (form | sticky sidebar) ------- */ .wc-block-checkout.wp-block-woocommerce-checkout { display: grid !important; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 28px; align-items: flex-start; color: var(--text-primary); } .wc-block-checkout__main { grid-column: 1; min-width: 0; } .wc-block-checkout__sidebar { grid-column: 2; min-width: 0; position: sticky; top: 24px; } /* --- 3) ADIM KARTLARI --------------------------------------- */ .wc-block-components-checkout-step { background: var(--bg-card) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-md) !important; padding: 28px !important; margin: 0 0 20px !important; box-shadow: var(--shadow-sm); position: relative; } .wc-block-components-checkout-step::after { display: none !important; } .wc-block-components-checkout-step__container { padding: 0 !important; } .wc-block-components-checkout-step__heading { margin: 0 0 22px !important; padding: 0 0 16px !important; border-bottom: 1px solid var(--border); display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .wc-block-components-checkout-step__title { font-size: 18px !important; font-weight: 700 !important; color: var(--text-primary) !important; letter-spacing: -0.01em !important; margin: 0 !important; line-height: 1.3 !important; } .wc-block-components-checkout-step__description, .wc-block-components-checkout-step__heading-content { font-size: 13px !important; color: var(--text-muted) !important; margin: 0 !important; } .wc-block-components-checkout-step__heading-content a { color: var(--accent) !important; text-decoration: none; } /* --- 4) FORM IZGARASI --------------------------------------- */ .wc-block-components-address-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; } .wc-block-components-address-form > * { margin: 0 !important; } .wc-block-components-address-form > .wc-block-components-address-form__country, .wc-block-components-address-form > .wc-block-components-address-form__address_1, .wc-block-components-address-form > .wc-block-components-address-form__address_2, .wc-block-components-address-form > .wc-block-components-address-form__company, .wc-block-components-address-form > .wc-block-components-address-form__phone, .wc-block-components-address-form > #shipping-country, .wc-block-components-address-form > #billing-country, .wc-block-components-address-form > #shipping-address_1, .wc-block-components-address-form > #shipping-address_2, .wc-block-components-address-form > #billing-address_1, .wc-block-components-address-form > #billing-address_2, .wc-block-components-address-form > #shipping-phone, .wc-block-components-address-form > #billing-phone { grid-column: 1 / -1; } /* --- 5) TEXT INPUT — WC default floating label KORUNUR ----- */ .wc-block-components-text-input { margin-bottom: 0 !important; } .wc-block-components-text-input input[type="text"], .wc-block-components-text-input input[type="email"], .wc-block-components-text-input input[type="tel"], .wc-block-components-text-input input[type="number"], .wc-block-components-text-input input[type="password"], .wc-block-components-textarea { width: 100% !important; background: var(--bg-secondary) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-sm) !important; color: var(--text-primary) !important; /* WC default ile uyumlu padding — label çakışmadan üste oturur */ padding: 1.6em 14px 0.55em !important; height: auto !important; font-size: 15px !important; line-height: 1.3 !important; box-shadow: none !important; transition: border-color var(--transition), background var(--transition); } .wc-block-components-textarea { padding: 14px !important; min-height: 96px; resize: vertical; } .wc-block-components-text-input input:hover { border-color: var(--border-light) !important; } .wc-block-components-text-input input:focus, .wc-block-components-textarea:focus { border-color: var(--accent) !important; background: var(--bg-tertiary) !important; outline: none !important; box-shadow: 0 0 0 3px rgba(224, 122, 95, 0.18) !important; } /* Chrome / Safari autofill */ .wc-block-components-text-input input:-webkit-autofill, .wc-block-components-text-input input:-webkit-autofill:hover, .wc-block-components-text-input input:-webkit-autofill:focus { -webkit-text-fill-color: var(--text-primary) !important; -webkit-box-shadow: 0 0 0 1000px var(--bg-secondary) inset !important; caret-color: var(--text-primary) !important; transition: background-color 9999s ease-in-out 0s; } /* Label rengi — pozisyon WC default kontrol eder */ .wc-block-components-text-input label { color: var(--text-muted) !important; background: transparent !important; font-size: 15px !important; font-weight: 400 !important; } .wc-block-components-text-input.is-active label { color: var(--text-muted) !important; } .wc-block-components-text-input:focus-within label { color: var(--accent) !important; } .wc-block-components-text-input label .required, .wc-block-components-required-label { color: var(--accent) !important; text-decoration: none !important; margin-left: 2px; } /* --- 6) COMBOBOX — STATIC LABEL ABOVE FIELD ---------------- Combobox WC Blocks'da floating label uygulamasında en sorunlu component. Kalıcı çözüm: label'ı absolute yerine static yapıp alanın üstüne çıkartmak. ----------------------------------------------------------- */ .wc-block-components-combobox, .wc-block-components-combobox-control { display: block; position: relative; } .wc-block-components-combobox-control .components-base-control__label, .wc-block-components-combobox-control label, .wc-block-components-combobox label, .wc-block-components-country-input label, .wc-block-components-state-input label { position: static !important; display: block !important; transform: none !important; font-size: 11px !important; font-weight: 600 !important; color: var(--text-muted) !important; margin: 0 0 6px !important; padding: 0 !important; text-transform: uppercase; letter-spacing: 0.08em; line-height: 1.2; background: transparent !important; pointer-events: auto; width: auto; max-width: none; } .wc-block-components-combobox-control .components-form-token-field__input-container, .wc-block-components-country-input input, .wc-block-components-state-input input { background: var(--bg-secondary) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-sm) !important; padding: 14px 14px !important; min-height: 50px; color: var(--text-primary) !important; display: flex; align-items: center; box-shadow: none !important; } .wc-block-components-combobox-control .components-form-token-field__input { background: transparent !important; color: var(--text-primary) !important; font-size: 15px !important; line-height: 1.3 !important; height: auto !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; border: 0 !important; width: 100% !important; } .wc-block-components-combobox-control:focus-within .components-form-token-field__input-container, .wc-block-components-country-input input:focus, .wc-block-components-state-input input:focus { border-color: var(--accent) !important; background: var(--bg-tertiary) !important; box-shadow: 0 0 0 3px rgba(224, 122, 95, 0.18) !important; } /* Combobox açılır liste */ .components-form-token-field__suggestions-list { background: var(--bg-card) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-sm) !important; box-shadow: var(--shadow-md) !important; color: var(--text-primary) !important; margin-top: 4px !important; max-height: 240px; overflow-y: auto; } .components-form-token-field__suggestion { color: var(--text-primary) !important; padding: 10px 14px !important; font-size: 14px; background: transparent !important; } .components-form-token-field__suggestion.is-selected, .components-form-token-field__suggestion:hover { background: var(--accent-soft) !important; color: var(--accent) !important; } /* Native