:root{--ink:#242422;--muted:#706d68;--paper:#fff;--soft:#f7f6f3;--line:#e6e3df;--accent:#2783de;--accent-soft:#e5f2fc;--radius:12px;font:16px/1.55 Arial,sans-serif;color:var(--ink);background:var(--paper)}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink)}a{color:inherit}.skip{position:fixed;top:-70px;left:16px;z-index:20;background:var(--ink);color:#fff;padding:12px}.skip:focus{top:16px}.store-header{height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 max(24px,calc((100vw - 1120px)/2));border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10;background:rgba(255,255,255,.94);backdrop-filter:blur(12px)}.store-logo{font-size:1.25rem;font-weight:800;text-decoration:none}.store-header nav,.store-header nav a{display:flex;align-items:center;gap:24px}.store-header nav a{text-decoration:none;min-height:44px}.store-header nav span{display:grid;place-items:center;min-width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;font-size:.75rem}main{min-height:70vh}.hero{min-height:540px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:64px;max-width:1120px;margin:auto;padding:64px 24px}.hero h1,.simple-head h1,.catalog-head h1,.product-buy h1{font-size:clamp(2.5rem,6vw,4.5rem);line-height:1.02;letter-spacing:-.04em;margin:10px 0 20px}.hero p{max-width:55ch;color:var(--muted)}.kicker{text-transform:uppercase;letter-spacing:.09em;color:var(--accent);font-weight:800;font-size:.8rem}.store-button{min-height:48px;display:inline-flex;align-items:center;justify-content:center;padding:11px 18px;border:1px solid var(--accent);border-radius:9px;background:var(--accent);color:#fff;text-decoration:none;font:inherit;font-weight:800;cursor:pointer}.store-button--wide{width:100%}.hero-visual{aspect-ratio:1;position:relative;border-radius:32px;background:var(--soft);overflow:hidden}.hero-visual span{position:absolute;border-radius:50%;background:var(--accent-soft);border:1px solid rgba(39,131,222,.2)}.hero-visual span:nth-child(1){width:72%;height:72%;left:14%;top:14%}.hero-visual span:nth-child(2){width:42%;height:42%;left:29%;top:29%;background:var(--paper)}.hero-visual span:nth-child(3){width:16%;height:16%;left:42%;top:42%;background:var(--accent)}.store-section,.catalog-head,.catalog-layout,.product-detail,.simple-head,.checkout-layout,.account-orders,.store-state{max-width:1120px;margin:auto;padding:48px 24px}.store-section-head,.catalog-head{display:flex;justify-content:space-between;align-items:end;gap:24px}.store-section h2{font-size:2rem;margin:6px 0}.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.product-card a{text-decoration:none}.product-image,.product-main-image{display:block;aspect-ratio:4/5;border-radius:var(--radius);background:linear-gradient(145deg,var(--soft),var(--accent-soft));background-size:cover;background-position:center}.product-meta{display:grid;gap:3px;padding:12px 2px}.product-meta small{color:var(--muted)}.catalog-head h1,.simple-head h1{font-size:clamp(2.2rem,5vw,3.6rem)}.catalog-layout{display:grid;grid-template-columns:220px 1fr;gap:40px;padding-top:0}.catalog-layout .product-grid{grid-template-columns:repeat(3,1fr)}.catalog-filters{border-top:1px solid var(--line)}.catalog-filters fieldset{border:0;border-bottom:1px solid var(--line);padding:18px 0}.catalog-filters label{display:block;margin:10px 0}.product-detail{display:grid;grid-template-columns:1.1fr .9fr;gap:64px}.product-buy{padding:24px 0}.product-buy h1{font-size:clamp(2.2rem,5vw,3.8rem)}.price{font-size:1.5rem;font-weight:800}.product-buy fieldset,.checkout-form fieldset{border:0;padding:18px 0;margin:0;border-top:1px solid var(--line)}.option-grid{display:flex;flex-wrap:wrap;gap:8px}.option-grid input{position:absolute;opacity:0}.option-grid span{display:grid;place-items:center;min-width:48px;min-height:44px;border:1px solid var(--line);border-radius:8px;padding:8px}.option-grid input:checked+span{border-color:var(--accent);background:var(--accent-soft)}.option-grid input:disabled+span{opacity:.45;text-decoration:line-through}.buy-note{display:block;color:var(--muted);margin-top:10px}.checkout-layout{display:grid;grid-template-columns:1fr 360px;gap:48px;padding-top:0}.cart-line{display:grid;grid-template-columns:100px 1fr auto;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}.cart-line .product-image{width:100px}.cart-line small{display:block;color:var(--muted)}.cart-line input{width:72px;min-height:44px;margin-top:8px}.order-summary{background:var(--soft);border:1px solid var(--line);border-radius:var(--radius);padding:24px;height:max-content;position:sticky;top:96px}.order-summary h2{margin-top:0}.order-summary div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--line)}.order-summary .store-button{margin-top:18px}.checkout-form{display:grid;gap:16px}.checkout-form label>input,.checkout-form label>textarea{display:block;width:100%;min-height:48px;margin-top:6px;border:1px solid #bdb9b3;border-radius:8px;padding:10px;font:inherit}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.payment-method,.consent{display:flex;gap:12px;align-items:flex-start;padding:12px;border:1px solid var(--line);border-radius:8px;margin-top:8px}.payment-method input,.consent input{margin-top:5px}.payment-method small{display:block;color:var(--muted)}.account-orders{display:grid;gap:10px;padding-top:0}.account-orders a{display:grid;grid-template-columns:1fr auto auto;gap:24px;align-items:center;padding:18px;border:1px solid var(--line);border-radius:10px;text-decoration:none}.account-orders small{display:block;color:var(--muted)}.store-state{text-align:center;min-height:500px;display:grid;place-items:center;align-content:center}.store-state p{color:var(--muted);max-width:55ch}footer{max-width:1120px;margin:64px auto 0;padding:40px 24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:24px;color:var(--muted)}footer nav{display:flex;gap:20px}:focus-visible{outline:3px solid #0b6bc2;outline-offset:3px}@media(prefers-color-scheme:dark){:root{--ink:#fff;--muted:rgba(255,255,255,.68);--paper:#191919;--soft:#242424;--line:rgba(255,255,255,.18);--accent:#5e9fe8;--accent-soft:#203448}.store-header{background:rgba(25,25,25,.94)}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}@media(max-width:850px){.hero,.product-detail{grid-template-columns:1fr;gap:32px}.hero{padding-top:40px}.hero-visual{max-height:420px}.product-grid,.catalog-layout .product-grid{grid-template-columns:repeat(2,1fr)}.catalog-layout{grid-template-columns:1fr}.catalog-filters{display:none}.checkout-layout{grid-template-columns:1fr}.order-summary{position:static}}@media(max-width:520px){.store-header{padding:0 16px}.store-header nav{gap:12px}.store-header nav a:first-child{display:none}.hero,.store-section,.catalog-head,.catalog-layout,.product-detail,.simple-head,.checkout-layout,.account-orders,.store-state{padding-left:16px;padding-right:16px}.product-grid,.catalog-layout .product-grid{grid-template-columns:1fr 1fr;gap:12px}.store-section-head,.catalog-head{align-items:flex-start;display:grid}.cart-line{grid-template-columns:72px 1fr}.cart-line .product-image{width:72px}.cart-line>strong{grid-column:2}.form-row{grid-template-columns:1fr}.account-orders a{grid-template-columns:1fr auto}.account-orders a strong{grid-column:1/-1}footer{display:grid;padding:32px 16px}footer nav{display:grid;gap:8px}} .compare-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}.compare-scroll:focus-visible{outline:3px solid var(--focus);outline-offset:3px}.compare-scroll table{min-width:720px;width:100%;border-collapse:collapse}.compare-scroll th,.compare-scroll td{padding:14px;border-bottom:1px solid var(--line);text-align:left}.compare-scroll thead th{position:sticky;top:0;background:var(--surface)} /* M1 vitrin: görselsiz kart, stok rozeti, bilgilendirici seçenek listesi ve sayfalama. Sepet akışı açılmadığı için seçenekler seçilebilir kontrol DEĞİL; stil de onu yansıtır. */ .product-image--empty,.product-main-image--empty{display:grid;place-items:center;background:var(--soft);border:1px dashed var(--line)}.product-image-note,.product-main-image--empty span{color:var(--muted);font-size:.8rem}.store-button--secondary{background:transparent;color:var(--ink);border-color:var(--line)}.catalog-results{min-width:0}.catalog-sort{display:block;padding:18px 0;border-bottom:1px solid var(--line)}.catalog-sort select{width:100%;min-height:44px;margin-top:6px;border:1px solid #bdb9b3;border-radius:8px;padding:8px;font:inherit;background:var(--paper);color:var(--ink)}.catalog-filters .store-button{margin-top:18px;width:100%}.catalog-pagination{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:32px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted)}.stock-badge{display:inline-flex;align-items:center;gap:8px;margin:0 0 12px;padding:6px 12px;border-radius:999px;border:1px solid var(--line);font-weight:700;font-size:.85rem}.stock-badge--ok{background:var(--accent-soft);border-color:var(--accent)}.stock-badge--out{background:var(--soft);color:var(--muted)}.product-description{color:var(--muted);max-width:60ch}.option-group{padding:18px 0;border-top:1px solid var(--line)}.option-group h2{font-size:1rem;margin:0 0 10px}.option-grid{list-style:none;margin:0;padding:0}.option-chip{display:grid;place-items:center;min-width:48px;min-height:44px;border:1px solid var(--line);border-radius:8px;padding:8px}.option-chip small{color:var(--muted);font-size:.7rem}.option-chip.is-unavailable{opacity:.55}.option-chip.is-unavailable span{text-decoration:line-through}.empty-note{color:var(--muted)}.store-button[disabled],.store-button[aria-disabled="true"]{opacity:.5;cursor:not-allowed} /* Sepet akışı: ürün sayfasındaki gerçek "sepete ekle" formu, sepet satırı formları, ara toplam kutusu ve stoksuz satır işareti. Renkler YALNIZ mevcut değişkenlerden gelir; karanlık tema ve azaltılmış hareket blokları bu yüzden olduğu gibi geçerli kalır. Stoksuzluk tek başına saydamlıkla anlatılmaz — düşük kontrast okunabilirliği bozar; zemin, kenar ve metindeki rozet birlikte söyler. */ .sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;white-space:nowrap;clip-path:inset(50%);border:0} .store-notice{max-width:1120px;margin:auto;padding:0 24px}.store-notice p{margin:0;padding:14px 18px;border:1px solid var(--accent);border-radius:var(--radius);background:var(--accent-soft);font-weight:700} .cart-lines{min-width:0}.cart-lines h2{margin:0 0 8px;font-size:1.1rem}.cart-lines>.store-button{margin-top:24px} .cart-line-body{display:grid;gap:4px;align-content:start;min-width:0}.cart-line-title{font-size:1.05rem}.cart-line-title a{text-decoration:none} .cart-line .stock-badge{margin:8px 0 0;justify-self:start} .cart-line.is-unavailable{background:var(--soft);border-left:4px solid var(--muted);padding-left:12px;padding-right:12px} .cart-line-total{font-size:1.05rem;white-space:nowrap;text-align:right} .cart-line-actions{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin-top:10px} .cart-quantity{display:flex;align-items:flex-end;gap:8px;margin:0} .cart-quantity-field{display:grid;gap:4px;font-size:.85rem;color:var(--muted)} .cart-quantity input{width:88px;margin-top:0;border:1px solid #bdb9b3;border-radius:8px;padding:10px;font:inherit;background:var(--paper);color:var(--ink)} .cart-remove{margin:0} .summary-note{color:var(--muted);font-size:.85rem;margin:12px 0 0} .add-to-cart{display:grid;gap:14px;margin-top:18px} .selected-sku{margin:0;color:var(--muted)} .sku-choice legend{padding:0 0 10px;font-weight:800}.sku-list{display:grid;gap:8px} .sku-option{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;min-height:48px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;cursor:pointer} .sku-option:has(input:checked){border-color:var(--accent);background:var(--accent-soft)} .sku-option-label{display:grid;gap:2px;min-width:0}.sku-option-label small{color:var(--muted);font-size:.72rem} .sku-option-price{font-weight:700;white-space:nowrap} .sale-list-price{display:inline-block;color:var(--muted);font-size:.82em;font-weight:400} .sale-discount{display:inline-block;margin-left:.2em;padding:0 .32em;border-radius:5px;background:var(--accent-soft);color:var(--accent);font-size:.7em;font-weight:800;white-space:nowrap} /* CURRENCY */ .store-currency{display:flex;align-items:center;gap:6px;flex:0 0 auto;margin:0} .store-currency label{font-size:.78rem;color:var(--muted);white-space:nowrap} .store-currency select,.store-currency button{min-height:40px;border:1px solid var(--line);border-radius:8px;padding:7px 10px;background:var(--paper);color:var(--ink);font:inherit} .store-currency button{cursor:pointer;font-weight:700} .currency-payment-note{margin:12px 0;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--soft);font-weight:700} @media(max-width:520px){.store-currency{order:3}.store-currency select{max-width:90px}} .sku-option.is-unavailable{background:var(--soft);cursor:not-allowed}.sku-option.is-unavailable .sku-option-label>span{text-decoration:line-through} .quantity-field{display:grid;gap:6px;max-width:150px;font-size:.9rem;color:var(--muted)} .quantity-field input{width:100%;min-height:48px;border:1px solid #bdb9b3;border-radius:8px;padding:10px;font:inherit;background:var(--paper);color:var(--ink)} @media(max-width:520px){.store-notice{padding:0 16px}.cart-line-actions{display:grid;gap:10px}.cart-quantity{flex-wrap:wrap}.sku-option{grid-template-columns:auto 1fr}.sku-option-price{grid-column:2}} /* StoreWire: token aliases and responsive layout for the storefront shell and content pages. */ :root { --color-primary: var(--accent); --color-text: var(--ink); --font-body: Arial, sans-serif; font-family: var(--font-body); } .store-announcement { padding: 10px 16px; text-align: center; background: var(--accent); color: #fff; font-weight: 700; } .store-announcement a { color: inherit; text-underline-offset: .18em; } .store-header { height: auto; min-height: 72px; flex-wrap: wrap; } .store-logo { flex: 0 0 auto; } .store-logo img { display: block; max-width: min(180px, 38vw); max-height: 52px; object-fit: contain; } .store-menu,.store-menu-submenu,.store-footer ul { list-style: none; margin: 0; padding: 0; } .store-header nav .store-menu,.store-menu-submenu { display: flex; align-items: center; gap: 18px; } .store-menu li { position: relative; } .store-menu a,.store-footer a { min-height: 44px; display: inline-flex; align-items: center; } .store-menu-submenu { display: none; position: absolute; z-index: 15; top: 100%; left: 0; min-width: 190px; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); box-shadow: 0 8px 24px rgba(0,0,0,.12); } .store-menu li:focus-within > .store-menu-submenu,.store-menu li:hover > .store-menu-submenu { display: grid; gap: 2px; } /* CATMENU */ .store-menu-item { display: flex; align-items: center; gap: 4px; } .store-menu-link { gap: 9px; } .store-menu-toggle { display: inline-grid; place-items: center; width: 36px; min-width: 36px; min-height: 44px; border: 0; border-radius: 7px; background: transparent; color: var(--ink); cursor: pointer; } .store-menu-toggle::after { width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; content: ""; transform: translateY(-2px) rotate(45deg); } .store-menu-toggle[aria-expanded="true"]::after { transform: translateY(2px) rotate(225deg); } .store-menu-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .store-menu-submenu { width: min(560px,calc(100vw - 32px)); max-width: calc(100vw - 32px); padding: 12px; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; } .store-menu .store-menu-item[data-store-menu-js]:hover > .store-menu-submenu,.store-menu .store-menu-item[data-store-menu-js]:focus-within > .store-menu-submenu { display: none; } .store-menu .store-menu-item.is-open[data-store-menu-js] > .store-menu-submenu,.store-menu .store-menu-item:not([data-store-menu-js]):focus-within > .store-menu-submenu { display: grid; } .store-menu-submenu > li { min-width: 0; border-radius: 9px; } .store-menu-submenu a { display: grid; grid-template-columns: 68px minmax(0,1fr); align-items: center; gap: 11px; min-height: 76px; padding: 5px; border-radius: 8px; text-decoration: none; } .store-menu-submenu a:hover,.store-menu-submenu a:focus-visible { background: var(--soft); } .store-menu-image { display: block; width: 68px; height: 64px; border-radius: 6px; background: var(--soft); object-fit: cover; } .store-header__desktop-menu { display: block; } .store-drawer__open { display: none; } .store-drawer { position: fixed; inset: 0; width: 100vw; max-width: none; height: 100vh; height: 100dvh; max-height: none; margin: 0; padding: 0; overflow: hidden; border: 0; background: var(--paper); color: var(--ink); transform: translateX(-100%); transition: transform 280ms ease; } .store-drawer[open] { display: block; } .store-drawer.is-open { transform: translateX(0); } .store-drawer::backdrop { background: rgb(0 0 0 / .38); opacity: 0; transition: opacity 280ms ease; } .store-drawer.is-open::backdrop { opacity: 1; } .store-drawer__panel { display: block; width: 100%; height: 100%; overflow: auto; overscroll-behavior: contain; padding: max(16px,env(safe-area-inset-top)) 16px max(24px,env(safe-area-inset-bottom)); } .store-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); } .store-drawer__head h2 { margin: 0; font-size: 1.2rem; } .store-drawer__open,.store-drawer__close { min-height: 44px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; background: var(--paper); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; } .store-drawer__open { align-items: center; gap: 8px; } .store-drawer__close:focus-visible,.store-drawer__open:focus-visible,.store-drawer__link:focus-visible,.store-drawer__children a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .store-drawer__list,.store-drawer__children { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .store-drawer__item { min-width: 0; } .store-drawer__link { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink); text-decoration: none; font-weight: 700; cursor: pointer; } .store-drawer__item--image .store-drawer__link { min-height: 96px; } .store-drawer__image { display: block; flex: 0 0 112px; width: 112px; height: 80px; border-radius: calc(var(--radius) * .65); background: var(--soft); object-fit: cover; } .store-drawer__label { min-width: 0; } .store-drawer__group > summary { list-style: none; } .store-drawer__group > summary::-webkit-details-marker { display: none; } .store-drawer__group > summary::after { flex: 0 0 auto; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; content: ""; transform: translateY(-2px) rotate(45deg); } .store-drawer__group[open] > summary::after { transform: translateY(2px) rotate(225deg); } .store-drawer__children { gap: 4px; padding: 8px 0 4px 16px; } .store-drawer__children a { display: flex; align-items: center; min-height: 44px; padding: 8px 10px; border-radius: 7px; color: var(--ink); text-decoration: none; } .store-drawer__children a:hover,.store-drawer__children a:focus-visible { background: var(--soft); } .store-drawer__all { font-weight: 700; } .store-drawer-locked { overflow: hidden; } @media (max-width: 850px) { .store-header__desktop-menu { display: none; } .store-drawer__open { display: inline-flex; } } @media (prefers-reduced-motion: reduce) { .store-drawer,.store-drawer::backdrop { transition: none; } } .category-hero-image { display: block; width: min(100%,360px); max-height: 240px; margin: 0 0 16px; border-radius: var(--radius); background: var(--soft); object-fit: cover; } .category-grid .category-card { display: grid; align-content: start; gap: 10px; overflow: hidden; min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink); text-decoration: none; } .category-card img { display: block; width: 100%; aspect-ratio: 3 / 2; border-radius: calc(var(--radius) * .65); background: var(--soft); object-fit: cover; } .category-card span { font-weight: 700; } @media (max-width: 850px) { .store-header nav .store-menu > .store-menu-item { flex-wrap: wrap; } .store-menu-submenu { position: static; inset: auto; width: 100%; max-width: 100%; min-width: 0; flex-basis: 100%; box-shadow: none; } } @media (max-width: 520px) { .store-menu-submenu { grid-template-columns: minmax(0,1fr); } } .store-search { display: flex; flex: 1 1 180px; gap: 6px; max-width: 360px; } .store-search input { min-width: 0; flex: 1; min-height: 44px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font: inherit; background: var(--paper); color: var(--ink); } .store-search button { min-height: 44px; border: 1px solid var(--accent); border-radius: 8px; padding: 8px 12px; background: var(--accent); color: #fff; font: inherit; font-weight: 700; } /* LIVESEARCH */ .store-search { position: relative; } .store-search-live-list { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0; max-height: min(70vh, 480px); overflow-y: auto; margin: 0; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); box-shadow: 0 12px 32px rgb(0 0 0 / .14); color: var(--ink); list-style: none; } .store-search-live-list[hidden] { display: none; } .store-search-live-option { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 58px; padding: 7px; border-radius: 7px; color: inherit; text-decoration: none; } .store-search-live-option:hover, .store-search-live-option[aria-selected="true"] { background: var(--soft); } .store-search-live-image, .store-search-live-placeholder { display: block; width: 48px; height: 44px; border-radius: 6px; background: var(--soft); object-fit: cover; } .store-search-live-placeholder { border: 1px solid var(--line); } .store-search-live-copy { display: grid; min-width: 0; gap: 3px; } .store-search-live-title { overflow: hidden; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; } .store-search-live-title mark { background: var(--accent-soft); color: var(--ink); } .store-search-live-price { color: var(--muted); font-size: .9em; } .store-search-live-stock { color: var(--muted); font-size: .8em; } .store-search-live-empty { padding: 10px 8px; color: var(--muted); } .store-search-live-more { display: block; padding: 10px 8px; border-top: 1px solid var(--line); color: var(--accent); font-weight: 700; text-decoration: none; } .store-search-live-more:hover, .store-search-live-more[aria-selected="true"] { background: var(--accent-soft); } /* LIVESEARCH END */ .store-utilities { display: flex; align-items: center; gap: 12px; } .store-utilities a { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; } .store-utilities span { display: inline-grid; place-items: center; min-width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff; font-size: .75rem; } .store-footer { max-width: 1120px; display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,190px),1fr)); align-items: start; gap: 24px; } .store-footer__identity { display: grid; gap: 8px; } .store-footer__identity p { margin: 0; } .store-footer address { font-style: normal; } .store-footer nav ul { display: grid; gap: 4px; } /* ad1: panelden verilen alt menü sütun başlığı (yoksa basılmaz). */ .store-footer__heading { margin: 0 0 8px; font-size: 1rem; font-weight: 600; } .store-footer a { color: var(--ink); text-underline-offset: .18em; } .hero__copy { max-width: 58ch; } .hero__visual { min-width: 0; aspect-ratio: 1; overflow: hidden; border-radius: 24px; background: var(--soft); } .hero__visual img { width: 100%; height: 100%; display: block; object-fit: cover; } /* MEDIASLOTS — keep video inside the same artwork box as the existing image. */ .hero__visual video { width: 100%; height: 100%; display: block; object-fit: cover; } .store-banner { max-width: 1120px; margin: 32px auto; padding: 24px; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--soft); } .store-banner img { width: 100%; max-height: 360px; object-fit: cover; border-radius: var(--radius); } .store-banner video { width: 100%; max-height: 360px; display: block; object-fit: cover; border-radius: var(--radius); } .store-banner h2 { margin-top: 0; } .rich-text { max-width: 72ch; line-height: 1.75; overflow-wrap: anywhere; } .rich-text h2,.rich-text h3 { line-height: 1.2; margin-top: 1.7em; } .rich-text img { max-width: 100%; height: auto; } .rich-text table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; } .rich-text th,.rich-text td { padding: .55rem .7rem; border: 1px solid var(--line); text-align: left; } .page,.category-page { max-width: 1120px; margin: 0 auto; padding: 40px 24px; } .page__header,.category-hero { margin-bottom: 24px; } .page__header h1,.category-hero h1 { margin: 0 0 12px; font-size: clamp(2rem,5vw,3.5rem); line-height: 1.1; } .page__body { margin-bottom: 32px; } .breadcrumbs { max-width: 1120px; margin: 0 auto; padding: 20px 24px 0; } .breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } .breadcrumbs li+li::before { content: "/"; margin-right: 8px; color: var(--muted); } .category-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 24px 0; } .category-card { min-height: 64px; display: flex; align-items: center; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; font-weight: 700; } .pagination { display: flex; justify-content: flex-end; margin-top: 24px; } /* Ürün yorumları bölümü sayfa kabının dışındaydı (görünüm kenarına yapışıyordu): ürün ayrıntısıyla aynı genişlik ve kenar boşluğu. */ .product-reviews { max-width: 1120px; margin: 0 auto; padding: 0 24px 56px; } @media (max-width: 850px) { .product-reviews { padding: 0 16px 40px; } } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .product-grid,.catalog-layout .product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } /* Etiket rozetleri görselin sol üst köşesinde: rozetli ve rozetsiz kartların başlık ve fiyatı aynı hizada kalır. */ .product-card > a { position: relative; display: block; } .product-card-badges { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; pointer-events: none; } .product-card-badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 4px 10px; background: var(--ink); color: var(--paper); font-size: .75rem; font-weight: 700; letter-spacing: .01em; box-shadow: 0 1px 2px rgba(0,0,0,.18); } @media (min-width: 640px) { .category-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } .product-grid,.catalog-layout .product-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } } @media (min-width: 1000px) { .product-grid { grid-template-columns: repeat(4,minmax(0,1fr)); } .catalog-layout .product-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } } @media (max-width: 850px) { .store-header { position: static; padding: 12px 20px; } .store-header nav .store-menu { gap: 12px; flex-wrap: wrap; } .store-search { order: 3; flex-basis: 100%; max-width: none; } .store-banner { margin: 24px 16px; grid-template-columns: 1fr; } .store-banner img,.store-banner video { max-height: 260px; } } @media (max-width: 520px) { .store-header { gap: 8px 12px; padding: 10px 16px; } .store-header > nav[aria-label="Mağaza menüsü"] { order: 4; flex-basis: 100%; } .store-header nav .store-menu { gap: 8px 14px; } .store-search { order: 5; } .store-utilities { margin-left: auto; gap: 8px; } .store-menu-submenu { left: auto; right: 0; } .store-footer { padding: 32px 16px; } .store-footer__etbis { margin-inline: auto; } .page,.category-page { padding: 28px 16px; } .breadcrumbs { padding: 16px 16px 0; } } .brand-logo { display: block; width: auto; max-width: min(180px, 36vw); max-height: 112px; object-fit: contain; } .product-image,.product-main-image{background-color:var(--soft)} /* VARIMG */ .varimg-option{display:grid;gap:8px;margin:12px 0 0;padding:0;border:0} .varimg-option legend{padding:0 0 8px;font-size:.9rem;font-weight:700} .varimg-option-values{display:flex;flex-wrap:wrap;gap:8px} .varimg-choice{display:grid;justify-items:center;gap:4px;min-width:58px;min-height:58px;padding:6px;border:1px solid var(--line);border-radius:8px;cursor:pointer} .varimg-choice:has(input:checked){border-color:var(--accent);background:var(--accent-soft)} .varimg-choice.is-unavailable{opacity:.7} .varimg-choice input{margin:0} .varimg-swatch{display:grid;place-items:center;width:40px;height:40px;overflow:hidden;border-radius:5px;background:var(--soft)} .varimg-swatch img{display:block;width:100%;height:100%;object-fit:cover} .varimg-value-name{align-self:center;min-height:20px;padding:6px 2px;font-size:.85rem} .varimg-status{min-height:1.2em;margin:0;color:var(--muted);font-size:.8rem} .varimg-thumbnails{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px} .varimg-thumbnail{width:56px;height:56px;padding:3px;border:1px solid var(--line);border-radius:6px;background:var(--paper);cursor:pointer} .varimg-thumbnail[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)} .varimg-thumbnail img{display:block;width:100%;height:100%;object-fit:cover} /* CATMENU: menü etiketleri içinde; üst çubuktaki sepet sayısı rozeti kuralı (.store-header nav span) onları boyamasın. */ .store-header nav .store-menu span { display: inline; min-width: 0; height: auto; place-items: normal; border-radius: 0; background: none; color: inherit; font-size: inherit; } /* CURRENCY: sade seçici — değişince uygulanır (store.js); "Uygula" düğmesi yalnız JS yokken görünür. */ .store-currency select { min-height: 40px; padding: 6px 30px 6px 10px; border-radius: 999px; font-weight: 700; cursor: pointer; } .store-currency.is-enhanced button { display: none; } /* CONTACTFORM — iletişim formunun alanları alt alta ve tam genişlikte; form sınıfsız olduğu için eylem adresine bağlanır. */ .page form[action="/iletisim"] { display: grid; gap: 6px; max-width: 640px; margin-top: 12px; } .page form[action="/iletisim"] label { margin-top: 10px; font-size: .9rem; font-weight: 700; } .page form[action="/iletisim"] input, .page form[action="/iletisim"] textarea { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid #bdb9b3; border-radius: 8px; background: var(--paper); color: var(--ink); font: inherit; } .page form[action="/iletisim"] textarea { min-height: 160px; resize: vertical; } .page form[action="/iletisim"] button { justify-self: start; min-height: 48px; margin-top: 16px; padding: 11px 22px; border: 1px solid var(--accent); border-radius: 9px; background: var(--accent); color: #fff; font: inherit; font-weight: 800; cursor: pointer; } /* BANNERWIDTH — art arda iki yarım afiş yan yana; dar ekranda alt alta. */ .store-banner-row { max-width: 1120px; margin: 32px auto; padding: 0 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .store-banner-row .store-banner { margin: 0; grid-template-columns: minmax(0, 1fr); } @media (max-width: 850px) { .store-banner-row { grid-template-columns: minmax(0, 1fr); padding: 0 16px; margin: 24px auto; } } /* DATEPICK — tarih alanı (store.js): yerel alan kutunun içinde gizli değer taşıyıcıdır; görünen kontrol metin + takvim düğmesi. Ölçü ve çerçeve standart form alanıyla aynıdır (.checkout-form label>input); renkler tema belirteçlerinden gelir. */ .sf-date { position: relative; display: flex; align-items: center; width: 100%; min-height: 48px; margin-top: 6px; border: 1px solid #bdb9b3; border-radius: 8px; background: var(--paper); color: var(--ink); transition: border-color .15s, box-shadow .15s; } .sf-date:focus-within, .sf-date.is-open { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .sf-date.is-invalid { border-color: #c0392b; } .sf-date-native { position: absolute !important; left: 14px; bottom: 2px; width: 1px !important; height: 1px !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; opacity: 0; pointer-events: none; } .sf-date .sf-date__text { flex: 1; min-width: 0; min-height: 46px; margin: 0; padding: 0 0 0 12px; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: inherit; font: inherit; font-variant-numeric: tabular-nums; } .sf-date .sf-date__text:focus, .sf-date .sf-date__text:focus-visible { outline: none; } .sf-date .sf-date__text::placeholder { color: var(--muted); opacity: .8; } .sf-date__btn { flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin-right: 3px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer; transition: background-color .15s, color .15s; } .sf-date__btn:hover { background: var(--soft); color: var(--ink); } .sf-date.is-open .sf-date__btn { background: var(--accent-soft); color: var(--accent); } .sf-date__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .sf-cal { position: fixed; z-index: 40; padding: 12px 12px 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); color: var(--ink); box-shadow: 0 18px 44px -12px rgba(20, 24, 40, .28), 0 4px 12px -4px rgba(20, 24, 40, .1); font-size: 15px; line-height: 1.3; animation: sf-cal-in .12s ease-out; } .sf-cal:focus { outline: none; } @keyframes sf-cal-in { from { opacity: 0; transform: translateY(-3px); } } .sf-cal__head { display: grid; grid-template-columns: 36px 1fr 36px; align-items: center; margin-bottom: 6px; } .sf-cal__nav { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--ink); cursor: pointer; } .sf-cal__nav:hover:not(:disabled) { background: var(--soft); } .sf-cal__nav:disabled { opacity: .3; cursor: default; } .sf-cal__title { text-align: center; font-weight: 700; } .sf-cal__dow { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 2px; color: var(--muted); font-size: 12px; font-weight: 700; text-align: center; } .sf-cal__dow span { padding: 5px 0; } .sf-cal__days { display: grid; gap: 2px; } .sf-cal__week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .sf-cal__day { position: relative; height: 38px; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--ink); font: inherit; font-size: 14px; font-variant-numeric: tabular-nums; cursor: pointer; } .sf-cal__day:hover:not(:disabled) { background: var(--soft); } .sf-cal__day.is-out { color: var(--muted); } .sf-cal__day.is-today { color: var(--accent); font-weight: 700; } .sf-cal__day.is-today::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; } .sf-cal__day[aria-selected="true"] { background: var(--accent); color: #fff; font-weight: 700; } .sf-cal__day:disabled { opacity: .32; cursor: not-allowed; } .sf-cal__day:focus-visible, .sf-cal__nav:focus-visible, .sf-cal__link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .sf-cal__day[aria-selected="true"]:focus-visible { z-index: 1; outline: none; box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--accent); } .sf-cal__foot { display: flex; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); } .sf-cal__link { min-height: 34px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--accent); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; } .sf-cal__link:hover { background: var(--accent-soft); } @media (pointer: coarse) { .sf-cal__day { height: 42px; } } @media (prefers-reduced-motion: reduce) { .sf-cal { animation: none; } } /* BLOGPAGE — blog listesi ve yazısı kabuğun
'i içinde (eskiden iç içe
ve hiç biçim yoktu, sayfa kenara yapışıyordu). */ .store-page { max-width: 1120px; margin: 0 auto; padding: 40px 24px; } .store-page__header { margin-bottom: 28px; } .store-page__header h1 { margin: 0 0 8px; font-size: clamp(2rem, 5vw, 3rem); line-height: 1.1; } .store-page__header p { margin: 0; color: var(--muted); } .blog-list__items { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 28px 24px; } .blog-list__item { display: grid; align-content: start; gap: 8px; } .blog-list__item img { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius); background: var(--soft); object-fit: cover; } .blog-list__item h2 { margin: 6px 0 0; font-size: 1.2rem; line-height: 1.3; } .blog-list__item h2 a { text-decoration: none; } .blog-list__item time { color: var(--muted); font-size: .85rem; } .blog-list__item p { margin: 0; color: var(--muted); } .blog-pagination { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 36px; } .blog-detail article { max-width: 760px; } .blog-detail article > img { display: block; max-width: 100%; height: auto; margin: 0 0 24px; border-radius: var(--radius); } .blog-detail__body { line-height: 1.75; overflow-wrap: anywhere; } .blog-detail__body img { max-width: 100%; height: auto; } @media (max-width: 520px) { .store-page { padding: 28px 16px; } } /* SFPAY — banka hesapları ve ödeme bildirimi (standart tema; müşteri teması kendi katmanında ezer) */ .bank-accounts-head p:last-child, .payment-notification-head p:last-child { max-width: 62ch; color: var(--muted); } .bank-accounts, .payment-notification { padding-top: 0; } .bank-accounts .bank-accounts__currency { font-size: .85rem; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin: 32px 0 12px; } .bank-accounts .bank-accounts__currency:first-child { margin-top: 0; } .bank-account-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 16px; } .bank-account { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; background: var(--paper); } .bank-account h3 { margin: 0 0 14px; font-size: 1.1rem; } .bank-account dl { display: grid; gap: 12px; margin: 0; } .bank-account dl div { display: grid; gap: 2px; min-width: 0; } .bank-account dt { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .bank-account dd { margin: 0; overflow-wrap: anywhere; } .bank-account__iban { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.02rem; letter-spacing: .02em; user-select: all; } .bank-accounts__next { margin: 28px 0 0; } .payment-notification-form { max-width: 760px; } .payment-notification-form label > select { display: block; width: 100%; min-height: 48px; margin-top: 6px; border: 1px solid #bdb9b3; border-radius: 8px; padding: 10px; font: inherit; background: var(--paper); color: var(--ink); } .payment-notification-form__help { margin: -6px 0 0; } /* RCPT — isteğe bağlı dekont alanı: yerel dosya seçici, metin alanlarıyla aynı çerçeve. */ .payment-notification-form input[type="file"] { padding: 8px 10px; background: var(--paper); color: var(--ink); cursor: pointer; } .payment-notification__message { max-width: 760px; margin: 0 0 20px; padding: 14px 18px; border: 1px solid var(--accent); border-radius: var(--radius); background: var(--accent-soft); font-weight: 700; } .payment-notification__message--error { border-color: #c0392b; background: color-mix(in srgb, #c0392b 10%, var(--paper)); } /* FOOTERBADGES */ .store-footer__badges { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; } .store-footer__badges img { display: block; max-width: min(100%, 260px); max-height: 64px; object-fit: contain; object-position: left center; } .store-footer__etbis { text-decoration: none; } .store-footer__etbis-fallback { display: inline-flex; align-items: center; gap: 6px; } .store-footer__etbis-icon { display: inline-grid; width: 18px; height: 18px; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-size: .75rem; line-height: 1; } /* SFX — iletişim sayfası haritası (mağaza ayarlarındaki Google Haritalar adresi) */ .contact-map__frame { display: block; width: 100%; max-width: 860px; height: 380px; border: 1px solid var(--line); border-radius: var(--radius, 10px); background: var(--soft, #f3f4f7); } @media (max-width: 640px) { .contact-map__frame { height: 300px; } } /* SFX — havale hesabı kartındaki banka logosu */ .bank-account__logo { display: inline-block; width: auto; max-width: 96px; height: 28px; margin-right: 10px; object-fit: contain; vertical-align: middle; } /* REFS — yönetilen referanslar (Site içeriği › Referanslar): Referanslarımız sayfasındaki sektör gruplu kartlar ve /referans/ ayrıntı sayfası. Yalnız mevcut değişkenler; bağlantı başlığın içindedir ve kartın tamamına yayılır. */ .references { display: grid; gap: 32px; margin: 8px 0 32px; } .references__heading { margin: 0 0 14px; font-size: 1.25rem; line-height: 1.25; } .references__grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 16px; margin: 0; padding: 0; list-style: none; } .reference-cell { display: flex; min-width: 0; } .reference-card { position: relative; display: flex; flex: 1 1 auto; flex-direction: column; gap: 12px; min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); } .reference-card--link:hover { border-color: var(--accent); } .reference-card--link:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; } .reference-card__logo { display: grid; place-items: center; height: 88px; padding: 12px; overflow: hidden; border-radius: calc(var(--radius) * .7); background: var(--soft); } .reference-card__logo img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; } .reference-card__logo--mono { color: var(--muted); font-size: 1.5rem; font-weight: 800; letter-spacing: .03em; } .reference-card__name { margin: 0; font-size: 1.05rem; line-height: 1.3; } .reference-card__link { color: inherit; text-decoration: none; } .reference-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .reference-card__link:focus-visible { outline: none; } .reference-card__text { margin: 0; color: var(--muted); font-size: .95rem; } .reference-card__more { margin-top: auto; color: var(--accent); font-size: .9rem; font-weight: 700; } .reference__header { display: grid; grid-template-columns: minmax(0,1fr); gap: 20px; align-items: center; margin-bottom: 28px; } .reference__logo { display: grid; place-items: center; height: 120px; padding: 16px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--soft); } .reference__logo img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; } .reference__logo--mono { color: var(--muted); font-size: 2.2rem; font-weight: 800; letter-spacing: .03em; } .reference__title { min-width: 0; } .reference__title h1 { margin: 0 0 10px; font-size: clamp(1.8rem, 4.5vw, 2.8rem); line-height: 1.12; overflow-wrap: anywhere; } .reference__sector { margin: 0 0 6px; color: var(--accent); font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .reference__lead { max-width: 62ch; margin: 0 0 16px; color: var(--muted); font-size: 1.1rem; } .reference__all { margin: 32px 0 0; } @media (min-width: 560px) { .references__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (min-width: 720px) { .reference__header { grid-template-columns: 220px minmax(0,1fr); gap: 32px; } } @media (min-width: 900px) { .references__grid { grid-template-columns: repeat(3, minmax(0,1fr)); } } /* Sadakat: standart temada toplamın altındaki puan seçimi ve hesap özeti. */ .checkout-loyalty { padding-top:18px; margin-top:18px; border-top:1px solid var(--line); } .checkout-loyalty h3 { margin:0 0 12px; font-size:18px; } .checkout-loyalty p { font-size:14px; line-height:1.55; } .checkout-loyalty form { display:grid; gap:10px; } .checkout-loyalty input[type=number] { width:100%; min-width:0; min-height:44px; border:1px solid var(--line); padding:10px 12px; border-radius:9px; font:inherit; background:var(--paper); color:var(--ink); } .checkout-loyalty input:focus-visible { outline:3px solid var(--accent); outline-offset:2px; } .checkout-loyalty [role=alert] { padding:12px; border:1px solid #fda4af; background:#fff1f2; color:#9f1239; border-radius:9px; } .checkout-layout:has(.checkout-loyalty) .cart-line { grid-template-columns:minmax(0,1fr) auto; gap:16px; } .checkout-layout:has(.checkout-loyalty) .cart-line-body { min-width:0; overflow-wrap:anywhere; } .account-loyalty { max-width:1120px; margin:auto; padding:0 24px 48px; overflow-wrap:anywhere; } .account-loyalty .simple-head { padding-inline:0; } .account-loyalty > section { padding:24px 0; border-top:1px solid var(--line); } .account-loyalty nav { padding-bottom:20px; } .account-loyalty nav a { display:inline-flex; align-items:center; min-height:44px; } .account-loyalty h2 { font-size:22px; margin-top:0; } @media(max-width:520px) { .account-loyalty { padding-inline:16px; } .checkout-layout:has(.checkout-loyalty) .cart-line { grid-template-columns:minmax(0,1fr); } .checkout-layout:has(.checkout-loyalty) .cart-line > strong { grid-column:1; } } @media(max-width:850px) { .checkout-layout:has(.checkout-loyalty) { display:flex; flex-direction:column; gap:24px; } .checkout-layout:has(.checkout-loyalty) > .checkout-form { display:contents; } .checkout-layout:has(.checkout-loyalty) .checkout-form > h2, .checkout-layout:has(.checkout-loyalty) .checkout-form > article { order:1; width:100%; } .checkout-layout:has(.checkout-loyalty) .order-summary { order:2; width:100%; } .checkout-layout:has(.checkout-loyalty) .checkout-form > form { order:3; width:100%; } } .checkout-loyalty [hidden] { display:none; } /* ===== CARTM ===== */ [data-cart-line-message]:empty { display: none; } [data-cart-line-message], [data-cart-notice] { color: #854d0e; overflow-wrap: anywhere; } .cartm-coupon { margin-block: 1rem; min-width: 0; } .cartm-coupon h3 { margin-block: 0 .5rem; font-size: 1rem; } .cartm-coupon form { margin-block: .5rem; } .cartm-coupon label { display: block; margin-bottom: .35rem; } .cartm-coupon__entry { display: flex; flex-wrap: wrap; gap: .5rem; } .cartm-coupon__entry input { flex: 1 1 8rem; min-width: 0; width: 100%; padding: .65rem; border: 1px solid #cbd5e1; border-radius: .5rem; font: inherit; } .cartm-coupon__entry input:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } [data-cart-mutations] .order-summary b, [data-cart-mutations] .z-summary dd { overflow-wrap: anywhere; } /* ===== /CARTM ===== */ /* ===== Checkout credit ===== */ .checkout-credit { padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--line); } .checkout-credit h3 { margin: 0 0 12px; font-size: 16px; } .checkout-credit p { margin: 8px 0; overflow-wrap: anywhere; } .checkout-credit form { margin-top: 12px; } .checkout-country { min-width: 0; } .checkout-country select { width: 100%; min-width: 0; } /* ===== /Checkout credit ===== */ /* ===== refgrid ===== */ /* REFS — Referanslarımız: bütün referanslar TEK ızgarada (sütunlar `.references__grid` ile aynı, değişmedi); kategori her kartta küçük etiket, iki ya da daha çok kategori varsa üstte filtre çipleri. Çipler betiksiz sayfa içi bağlantıdır; betik yerinde filtreler (store.js `refgrid`). */ .references[data-refs] { gap: 20px; } .references__filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; } .references__chip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 44px; padding: 0 10px 0 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); font-size: .95rem; font-weight: 700; line-height: 1.25; text-decoration: none; overflow-wrap: anywhere; cursor: pointer; } .references__chip:hover { border-color: var(--ink); } .references__chip:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .references__chip[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--paper); } .references__count { display: inline-grid; place-items: center; flex: none; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; background: var(--soft); color: var(--muted); font-size: .8rem; font-weight: 800; font-variant-numeric: tabular-nums; } .references__chip[aria-pressed="true"] .references__count { background: rgba(255, 255, 255, .2); color: var(--paper); } .reference-cell[hidden] { display: none; } .reference-card__category { margin: 0; overflow: hidden; color: var(--accent); font-size: .78rem; font-weight: 800; letter-spacing: .06em; line-height: 1.3; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } /* ===== /refgrid ===== */ /* ===== featqa ===== */ .product-questions { max-width: 1120px; margin: 28px auto; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); } .product-questions ol { padding-inline-start: 24px; } .product-questions li { padding-block: 12px; border-bottom: 1px solid var(--line); } .product-questions form { display: grid; gap: 14px; max-width: 680px; margin-top: 20px; } .product-questions label { display: grid; gap: 6px; } .product-questions input, .product-questions textarea { width: 100%; max-width: 100%; } /* ===== /featqa ===== */ /* ===== featcfg2 ===== */ .cfg-page { padding-block: 36px 64px; color: var(--ink); } .cfg-head { margin-bottom: 26px; max-width: 780px; } .cfg-head h1 { margin: 6px 0 10px; font-size: clamp(1.8rem, 3vw, 2.3rem); line-height: 1.2; overflow-wrap: anywhere; } .cfg-head > p:last-child { margin: 0; color: var(--muted); max-width: 64ch; } .cfg-kicker { margin: 16px 0 0; color: var(--accent); font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .cfg-back { color: var(--muted); font-size: .85rem; } .cfg-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 26px; align-items: start; } .cfg-layout > form, .cfg-slots, .cfg-slot, .cfg-option__body { min-width: 0; } .cfg-slots { display: grid; gap: 14px; } .cfg-slot { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); } .cfg-slot > summary { display: flex; align-items: center; gap: 14px; padding: 20px; cursor: pointer; list-style: none; } .cfg-slot > summary::-webkit-details-marker { display: none; } .cfg-slot__number { display: grid; place-items: center; flex: 0 0 38px; height: 38px; background: var(--soft); color: var(--muted); border-radius: 9px; font-size: .85rem; font-weight: 800; } .cfg-slot__heading { display: grid; gap: 3px; flex: 1; min-width: 0; } .cfg-slot__heading > strong { font-size: 1.05rem; } .cfg-slot__heading > span { color: var(--muted); font-size: .84rem; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .cfg-slot__tag { color: var(--muted); font-size: .73rem; } .cfg-slot__arrow { color: var(--muted); font-size: 1.4rem; } .cfg-slot[open] .cfg-slot__arrow { transform: rotate(180deg); } .cfg-slot.has-finding { border-color: #c58060; } .cfg-slot__content { padding: 0 20px 20px; border-top: 1px solid var(--line); } .cfg-options { display: grid; gap: 8px; margin: 0; padding: 16px 0 0; border: 0; min-width: 0; } .cfg-option { display: grid; grid-template-columns: 18px 64px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; background: var(--paper); } .cfg-option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); } .cfg-option:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; } .cfg-option:has(input:disabled) { cursor: default; background: var(--soft); } .cfg-option input { accent-color: var(--accent); width: 18px; height: 18px; margin: 0; } .cfg-option__image { display: grid; place-items: center; width: 64px; height: 64px; background: #fff; border-radius: 6px; } .cfg-option__image img { width: 100%; height: 100%; object-fit: contain; } .cfg-option__image > span { font-size: .7rem; text-align: center; color: var(--muted); } .cfg-option__body { display: grid; gap: 4px; overflow-wrap: anywhere; } .cfg-option__body > strong { font-size: .9rem; line-height: 1.45; } .cfg-option__body > span { color: var(--muted); font-size: .75rem; } .cfg-option__body .cfg-option__stock.is-ok { color: #116a35; } .cfg-option__price { font-size: .96rem; max-width: 200px; overflow-wrap: anywhere; } .cfg-option--none { display: flex; min-height: 44px; padding: 8px 12px; color: var(--muted); font-size: .84rem; } .cfg-slot__footer { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--line); } .cfg-slot__footer label { display: grid; font-size: .85rem; font-weight: 600; } .cfg-slot__footer label span { color: var(--muted); font-size: .75rem; font-weight: 400; } .cfg-slot__footer input { width: 78px; min-height: 44px; } .cfg-slot__footer > a { margin-left: auto; font-size: .8rem; } .cfg-page input[type="number"], .cfg-page input[type="search"] { padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); font: inherit; box-sizing: border-box; } .cfg-search { display: flex; gap: 8px; margin-top: 16px; } .cfg-search input { width: 100%; min-width: 0; } .cfg-pagination { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 16px; font-size: .83rem; } .cfg-pagination a { padding-block: 8px; } .cfg-check { margin-top: 20px; } .cfg-summary { position: sticky; top: 24px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); min-width: 0; } .cfg-summary__content { padding: 24px; } .cfg-summary h2 { margin: 0 0 12px; font-size: 1.15rem; } .cfg-status { font-size: .82rem; font-weight: 700; margin: 0; color: #984617; background: #fff6eb; padding: 9px 12px; border-radius: 7px; } .cfg-status.is-ok { color: #116a35; background: #edf8f0; } .cfg-summary__empty { font-size: .86rem; color: var(--muted); padding-block: 16px; } .cfg-chosen { list-style: none; padding: 0; margin: 18px 0; } .cfg-chosen li { display: grid; gap: 3px; padding: 12px 0; border-bottom: 1px solid var(--line); } .cfg-chosen__slot { color: var(--muted); font-size: .74rem; } .cfg-chosen__name { font-size: .86rem; font-weight: 600; overflow-wrap: anywhere; } .cfg-chosen__price { font-size: .81rem; color: var(--muted); } .cfg-findings { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 8px; } .cfg-findings li, .cfg-error { padding: 10px 12px; border-radius: 7px; font-size: .8rem; overflow-wrap: anywhere; line-height: 1.55; } .cfg-findings .is-blocking, .cfg-error { color: #a4261c; background: #fff0ef; border-left: 3px solid #c33224; } .cfg-findings .is-warning { color: #854310; background: #fff6eb; border-left: 3px solid #b56519; } .cfg-findings .is-missing { color: var(--muted); background: var(--soft); border-left: 3px solid var(--muted); } .cfg-price-note { color: var(--muted); font-size: .75rem; margin: 20px 0 0; } .cfg-summary__bar { padding: 20px 24px 24px; border-top: 1px solid var(--line); } .cfg-total { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 18px; } .cfg-total > span { font-size: .85rem; color: var(--muted); } .cfg-total > strong { font-size: 1.45rem; overflow-wrap: anywhere; } .cfg-add { width: 100%; } .cfg-summary[aria-busy="true"] .cfg-total { opacity: .6; } .cfg-templates { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; } .cfg-template { display: flex; flex-direction: column; align-items: start; padding: 28px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); min-width: 0; } .cfg-template h2 { margin: 16px 0 12px; font-size: 1.25rem; overflow-wrap: anywhere; } .cfg-template > p { color: var(--muted); font-size: .9rem; margin: 0 0 24px; } .cfg-template .store-button { margin-top: auto; } .cfg-template__count { color: var(--accent); background: var(--accent-soft); padding: 5px 10px; border-radius: 6px; font-size: .75rem; font-weight: 600; } .cfg-empty { display: grid; justify-items: center; text-align: center; padding: 48px 24px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); } .cfg-empty h2 { margin: 16px 0 8px; font-size: 1.3rem; } .cfg-empty p { margin: 0 0 24px; color: var(--muted); max-width: 48ch; } .cfg-empty__mark { display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); width: 60px; height: 60px; font-size: 1.8rem; border-radius: 50%; } .cfg-edit-note, .cfg-network { padding: 14px 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); font-size: .85rem; } .cfg-filter-form { display: none; } .cfg-option__image > svg { color: var(--muted); } .cfg-summary-link { display: none; } .cfg-cart-heading { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--accent-soft); } .cfg-cart-heading h3 { margin: 0; font-size: 1rem; overflow-wrap: anywhere; } .cfg-cart-heading > div { min-width: 0; flex: 1; } .cfg-cart-heading p { font-size: .8rem; margin: 6px 0 0; } @media (max-width: 900px) { .cfg-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; } .cfg-option { grid-template-columns: 18px 48px minmax(0, 1fr); } .cfg-option__image { width: 48px; height: 48px; } .cfg-option__price { grid-column: 3; } .cfg-templates { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 700px) { .cfg-page { padding-block: 24px 36px; } body:has([data-configurator]) { padding-bottom: 90px; } .cfg-head { margin-bottom: 20px; } .cfg-layout { display: flex; flex-direction: column; gap: 24px; } .cfg-layout > *, .cfg-summary { width: 100%; } .cfg-summary { position: static; } .cfg-summary__content { padding: 20px; } .cfg-summary__bar { position: fixed; z-index: 30; bottom: 0; left: 0; width: 100%; display: flex; gap: 12px; align-items: center; padding: 14px max(16px, env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); background: var(--paper); border-top: 1px solid var(--line); box-sizing: border-box; box-shadow: 0 -4px 18px rgb(23 26 34 / .06); } .cfg-total { display: grid; gap: 2px; margin: 0; flex: 1; min-width: 0; } .cfg-total > strong { font-size: 1.13rem; line-height: 1.35; } .cfg-summary-link { display: inline; margin-left: 8px; font-size: .72rem; } .cfg-add { width: auto; flex: 0 0 auto; max-width: 50%; font-size: .84rem; padding: 12px 16px; } .cfg-slot > summary { gap: 10px; padding: 16px; flex-wrap: wrap; } .cfg-slot__heading { flex-basis: calc(100% - 90px); } .cfg-slot__tag { margin-left: 48px; margin-top: -6px; } .cfg-slot__arrow { position: absolute; right: 16px; top: 24px; } .cfg-slot { position: relative; } .cfg-slot__content { padding: 0 12px 16px; } .cfg-option { gap: 10px; padding: 10px; } .cfg-option__body > strong { font-size: .85rem; } .cfg-slot__footer { gap: 10px; } .cfg-slot__footer > a { flex-basis: 100%; margin-left: 0; } .cfg-templates { grid-template-columns: 1fr; } .cfg-template { padding: 24px; } .cfg-cart-heading { padding: 14px; } } @media (prefers-reduced-motion: reduce) { .cfg-page *, .cfg-page *::before, .cfg-page *::after { transition: none; animation: none; scroll-behavior: auto; } } /* ===== /featcfg2 ===== */ /* ===== featquickview ===== */ .product-card { position: relative; } .product-card-quick-view, .z-card__quick-view { position: absolute; z-index: 3; inset-inline-end: 12px; inset-block-end: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 0 13px; border: 1px solid var(--store-border, #d9dee7); border-radius: 999px; background: var(--store-surface, #fff); color: var(--store-text, #202938); font: inherit; font-size: .875rem; cursor: pointer; opacity: 0; transition: opacity .16s ease, background-color .16s ease; } .product-card:hover .product-card-quick-view, .product-card:focus-within .product-card-quick-view, .z-card:hover .z-card__quick-view, .z-card:focus-within .z-card__quick-view { opacity: 1; } .product-card-quick-view:focus-visible, .z-card__quick-view:focus-visible, .qv-dialog :focus-visible { outline: 3px solid var(--store-accent, #2457c5); outline-offset: 2px; } .qv-backdrop { position: fixed; z-index: 10000; inset: 0; display: grid; place-items: center; padding: 20px; background: rgb(17 24 39 / 54%); } .qv-dialog { display: flex; flex-direction: column; width: min(860px, 100%); max-height: min(760px, calc(100dvh - 40px)); overflow: hidden; border-radius: 18px; background: var(--store-surface, #fff); color: var(--store-text, #202938); box-shadow: 0 24px 80px rgb(0 0 0 / 24%); } .qv-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex: 0 0 auto; padding: 18px 22px; border-bottom: 1px solid var(--store-border, #e2e6ed); } .qv-head h2 { margin: 0; font-size: 1.2rem; line-height: 1.3; } .qv-close { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 1.8rem; cursor: pointer; } .qv-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 24px; min-height: 0; padding: 22px; overflow: hidden; } .qv-gallery { min-width: 0; } .qv-image { display: block; width: 100%; max-height: 420px; aspect-ratio: 1; object-fit: contain; border-radius: 12px; background: #f5f6f8; } .qv-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .qv-thumbs button { flex: 0 0 62px; width: 62px; height: 62px; padding: 3px; border: 1px solid var(--store-border, #d9dee7); border-radius: 8px; background: white; } .qv-thumbs button[aria-pressed="true"] { border-color: var(--store-accent, #2457c5); } .qv-thumbs img { width: 100%; height: 100%; object-fit: contain; } .qv-no-image { display: grid; place-items: center; min-height: 180px; color: var(--store-muted, #667085); } .qv-info { display: flex; flex-direction: column; min-width: 0; min-height: 0; } .qv-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin: 0 0 8px; } .qv-price strong { font-size: 1.4rem; } .qv-price del { color: var(--store-muted, #667085); } .qv-stock { margin: 0 0 10px; color: var(--store-muted, #667085); } .qv-description { min-height: 0; flex: 1 1 auto; overflow-y: auto; margin-bottom: 14px; line-height: 1.6; white-space: pre-wrap; } .qv-buy-row { display: flex; flex: 0 0 auto; gap: 10px; margin-top: auto; } .qv-buy-row input { width: 82px; min-height: 48px; padding: 0 10px; border: 1px solid var(--store-border, #d9dee7); border-radius: 9px; font: inherit; } .qv-buy { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; border: 0; border-radius: 9px; background: var(--store-accent, #2457c5); color: #fff; font: inherit; font-weight: 650; text-decoration: none; cursor: pointer; } .qv-buy:disabled { opacity: .6; cursor: wait; } .qv-message { min-height: 1.4em; margin: 8px 0 0; color: var(--store-text, #202938); } @media (hover: none), (pointer: coarse) { .product-card-quick-view, .z-card__quick-view { opacity: 1; } } @media (max-width: 600px) { .qv-backdrop { padding: 8px; } .qv-dialog { max-height: calc(100dvh - 16px); border-radius: 14px; } .qv-head { padding: 10px 14px; } .qv-main { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 10px; padding: 12px 14px; } .qv-image { max-height: min(30dvh, 230px); } .qv-thumbs { margin-top: 6px; } .qv-thumbs button { flex-basis: 48px; width: 48px; height: 48px; } .qv-info { flex: 1 1 auto; min-height: 0; } .qv-description { min-height: 30px; max-height: 15dvh; } .qv-buy-row { position: sticky; bottom: 0; padding-top: 8px; background: var(--store-surface, #fff); } .qv-buy-row .qv-buy { flex: 1; } .product-card-quick-view, .z-card__quick-view { inset-inline-end: 8px; inset-block-end: 8px; padding: 0 10px; font-size: .8rem; } } @media (prefers-reduced-motion: reduce) { .product-card-quick-view, .z-card__quick-view { transition: none; } } /* ===== /featquickview ===== */ /* ===== featcompare ===== */ .comparison-card-toggle, .comparison-product-toggle { margin-block-start: .6rem; } .comparison-card-toggle button, .comparison-product-toggle button, .comparison-bar button, .comparison-bar__inner > .comparison-bar__actions > a, .comparison-product button, .comparison-product > a:not(:first-child) { min-height: 44px; padding: .55rem .85rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink); font: inherit; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; cursor: pointer; } .comparison-card-toggle button[aria-pressed="true"], .comparison-product-toggle button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); } .comparison-bar { position: fixed; z-index: 1000; inset-inline: 0; inset-block-end: 0; padding: .65rem max(1rem, env(safe-area-inset-left)) calc(.65rem + env(safe-area-inset-bottom)); border-block-start: 1px solid var(--line); background: var(--paper); color: var(--ink); } .comparison-bar__inner, .comparison-bar__items, .comparison-bar__actions, .comparison-bar__item { display: flex; align-items: center; gap: .6rem; } .comparison-bar__inner { max-width: 1280px; margin-inline: auto; justify-content: space-between; } .comparison-bar__items { min-width: 0; overflow-x: auto; scroll-snap-type: x proximity; } .comparison-bar__item { flex: 0 0 auto; max-width: 15rem; padding-inline-start: .65rem; border: 1px solid var(--line); border-radius: var(--radius); scroll-snap-align: start; overflow-wrap: anywhere; } .comparison-bar__item form { display: flex; } .comparison-bar__item button, .comparison-bar__actions button { min-width: 44px; min-height: 44px; border: 0; background: transparent; color: var(--ink); font: inherit; cursor: pointer; } .comparison-bar__actions { flex: 0 0 auto; } .comparison-bar__notice { max-width: 1280px; margin: .35rem auto 0; } .comparison-empty { padding: 2rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); } .comparison-filter { margin-block: 1rem; } .comparison-filter label { min-height: 44px; display: inline-flex; align-items: center; gap: .6rem; } .comparison-filter button { min-height: 44px; padding: .5rem .8rem; } .comparison-table-region { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; scrollbar-gutter: stable; } .comparison-table { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; color: var(--ink); } .comparison-table th, .comparison-table td { min-width: 12rem; padding: .8rem; border-inline-end: 1px solid var(--line); border-block-end: 1px solid var(--line); text-align: start; vertical-align: top; overflow-wrap: anywhere; background: var(--paper); } .comparison-table th:first-child { min-width: 9rem; } .comparison-sticky { position: sticky; inset-inline-start: 0; z-index: 2; } .comparison-table thead .comparison-sticky { z-index: 4; } .comparison-product-col { scroll-snap-align: start; } .comparison-product { min-width: 11rem; display: grid; align-content: start; gap: .5rem; } .comparison-product > a:first-child { display: grid; gap: .5rem; color: inherit; text-decoration: none; } .comparison-product img, .comparison-no-image { width: 100%; height: 9rem; object-fit: contain; border-radius: var(--radius); background: var(--soft); } .comparison-no-image { display: grid; place-items: center; } .comparison-product del { color: var(--muted); } .comparison-product button, .comparison-product form button { min-height: 44px; } .comparison-page :focus-visible, .comparison-bar :focus-visible, .comparison-card-toggle :focus-visible, .comparison-product-toggle :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } @media (max-width: 680px) { .comparison-bar__inner { align-items: stretch; flex-direction: column; } .comparison-bar__actions { justify-content: space-between; } .comparison-table th, .comparison-table td { min-width: 13rem; } .comparison-table th:first-child { min-width: 8rem; max-width: 8rem; } } /* ===== /featcompare ===== */ /* ===== featfxprices ===== */ .fx-source-price{display:block;margin-top:6px;color:var(--muted,#5b6272);font-size:13px;line-height:1.5} .store-currency{display:inline-flex;align-items:center;flex:none;gap:4px;margin:0;border:1px solid var(--line,#d5d9e3);border-radius:999px;overflow:hidden} .store-currency select{min-width:112px;max-width:none;min-height:36px;padding:6px 30px 6px 14px;border:0;border-radius:999px;font:inherit;font-weight:700;background:transparent} .store-currency:focus-within{outline:2px solid var(--accent,#0077b0);outline-offset:3px} @media(max-width:600px){.store-currency{order:0;margin-block:0}} /* ===== /featfxprices ===== */ /* ===== pubpolish1 ===== */ /* SKU radios remain the visible purchase controls; gallery listeners keep their data. */ .pubpolish-single-axis .option-group, .pubpolish-single-axis .varimg-option { display: none; } /* ===== /pubpolish1 ===== */ /* Product alerts: quiet disclosure forms and owner-scoped account list. */ .product-alert{margin-top:20px;border-top:1px solid var(--line);padding-top:16px;min-width:0} .product-alert h2{font-size:1rem;margin:0 0 8px}.product-alert p,.product-alert small{color:var(--muted);font-size:.875rem;line-height:1.6} .product-alert__offer{border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);margin-bottom:10px;overflow:hidden} .product-alert__offer summary{padding:16px;cursor:pointer;font-size:.95rem;font-weight:700;list-style-position:inside;min-height:48px} .product-alert__offer summary small{display:block;margin:6px 0 0 18px;font-weight:400;overflow-wrap:anywhere} .product-alert__form{padding:0 16px 18px;display:grid;gap:10px}.product-alert__form p{margin:0}.product-alert__form label{font-size:.875rem;font-weight:600} .product-alert__form input[type=number]{min-height:46px;max-width:160px;width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);font:inherit} .product-alert__baseline strong{display:block;color:var(--ink)}.product-alert__consent{display:flex;gap:10px;align-items:flex-start}.product-alert__consent input{margin-top:4px;flex:none}.product-alert__form .store-button{justify-self:start} .alert-account,.alert-result{max-width:1120px;margin:0 auto;padding:32px 24px 64px;color:var(--ink)} .alert-account__nav{display:flex;gap:10px;font-size:.8rem;color:var(--muted);margin-bottom:28px}.alert-account__nav a{color:inherit;text-decoration:none} .alert-account__head{display:flex;gap:24px;align-items:center;justify-content:space-between;margin-bottom:28px}.alert-account__head h1{font-size:2rem;margin:0 0 8px;letter-spacing:-.03em}.alert-account__head p{color:var(--muted);margin:0;font-size:.95rem} .alert-account__list{list-style:none;padding:0;margin:0;display:grid;gap:14px}.alert-account__item{display:flex;align-items:center;gap:28px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);padding:24px;min-width:0} .alert-account__product{flex:1;min-width:0;overflow-wrap:anywhere}.alert-account__product h2{font-size:1rem;line-height:1.5;margin:10px 0 4px;letter-spacing:0}.alert-account__product a{text-decoration:none;color:inherit}.alert-account__product small,.alert-account__product p{color:var(--muted);font-size:.8rem}.alert-account__product p{margin:12px 0 0} .alert-account__status{display:inline-block;padding:4px 9px;border:1px solid var(--line);border-radius:6px;font-size:.72rem;font-weight:600;color:var(--accent);background:var(--accent-soft)} .alert-account__prices{margin:0;display:grid;gap:14px;flex-shrink:0}.alert-account__prices dt{font-size:.75rem;color:var(--muted);margin-bottom:5px}.alert-account__prices dd{font-size:.9rem;font-weight:700;margin:0;overflow-wrap:anywhere} .alert-account__stop{margin:0;flex-shrink:0}.alert-account__stop .store-button{font-size:.8rem;min-height:44px;padding:10px 14px} .alert-account__empty,.alert-result__panel{border:1px solid var(--line);background:var(--paper);border-radius:var(--radius);text-align:center;padding:56px 24px;display:grid;justify-items:center;align-content:center;min-height:340px} .alert-account__mark{width:48px;height:48px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);background:var(--soft);color:var(--accent);font-size:1.4rem;margin-bottom:20px} .alert-account__empty h2{font-size:1.25rem;margin:0 0 12px}.alert-account__empty p,.alert-result__panel p{max-width:52ch;font-size:.95rem;line-height:1.7;color:var(--muted);margin:0 0 24px} .alert-account__notice{border:1px solid var(--line);background:var(--accent-soft);padding:14px 18px;border-radius:8px;margin-bottom:20px} .alert-result{max-width:800px}.alert-result__back{display:inline-block;font-size:.85rem;margin-bottom:24px;color:var(--muted)}.alert-result__panel h1{font-size:1.75rem;letter-spacing:-.02em;margin:0 0 16px}.alert-result__panel--success .alert-account__mark{color:#176344;background:#edf7f1;border-color:#c8e6d5} @media(max-width:600px){.alert-account,.alert-result{padding:24px 16px 40px}.alert-account__head{display:grid;gap:18px;margin-bottom:24px}.alert-account__head .store-button{justify-self:start}.alert-account__head h1{font-size:1.6rem}.alert-account__item{display:grid;gap:20px;padding:20px}.alert-account__prices{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}.alert-account__stop .store-button{width:100%}.alert-account__empty,.alert-result__panel{padding:36px 20px;min-height:320px}.alert-result__panel h1{font-size:1.4rem}.product-alert__form .store-button{width:100%;justify-self:stretch}} .product-alert button,.alert-account button,.alert-result .store-button{font-family:inherit} .alert-result__panel--attention .alert-account__mark{color:#93411d;background:#fff5eb;border-color:#eedbc9} .alert-account__pagination{display:flex;justify-content:space-between;gap:24px;margin-top:24px;font-size:.875rem}.alert-account__pagination a{padding:12px 0;color:var(--accent)} /* GEOSELECT — adres formlarında Ülke / İl / İlçe seçimi (store.js GEOSELECT). Yerel