/* * AkmazX — Referans Vitrin Teması v2 (TASK_ECOM_002A2) * * TASARIM SİSTEMİ ÖNCE, SAYFA SONRA. * Her değer bir token'dan gelir. Sayfa başına serbest stil yazılmaz; yoksa on * sayfa sonra sekiz farklı gri ve beş farklı köşe yarıçapı olur. * * Mağazaya özgü olan TEK şey, sunucunun üzerine bastığı birkaç değişkendir * (vurgu rengi, kapsayıcı genişliği, yarıçap). Marka adı, alan adı, kampanya * metni gibi hiçbir kiracı verisi bu dosyada YOKTUR. */ /* ============================================================ 1. TOKENS */ :root { /* Tipografi — sistem yığını. Yerelde dış font'a bağımlılık YOK. */ --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --font-heading: var(--font-family); --font-size-xs: 0.75rem; /* 12 */ --font-size-sm: 0.8125rem; /* 13 */ --font-size-base: 0.9375rem;/* 15 */ --font-size-md: 1rem; /* 16 */ --font-size-lg: 1.125rem; /* 18 */ --font-size-xl: 1.375rem; /* 22 */ --font-size-2xl: 1.75rem; /* 28 */ --font-size-3xl: 2.25rem; /* 36 */ --leading-tight: 1.22; --leading-normal: 1.6; --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Boşluk — 4px tabanlı */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-pill: 999px; --container-width: 1200px; --gutter: var(--space-4); /* Renk */ --text: #14181f; --text-muted: #5f6b7a; --text-faint: #8b95a3; --surface: #ffffff; --surface-soft: #f6f7f9; --surface-sunken: #eef1f5; --border: #e3e7ec; --border-strong: #cdd4dd; --accent: #1f6feb; --accent-ink: #ffffff; --accent-soft: #eaf1fe; --success: #12805c; --success-soft: #e8f6f1; --warning: #9a6206; --warning-soft: #fdf3e2; --danger: #b3261e; --danger-soft: #fdecea; --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05); --shadow-md: 0 4px 14px rgba(16, 24, 40, .08); --shadow-lg: 0 12px 32px rgba(16, 24, 40, .12); --focus-ring: 0 0 0 3px var(--accent-soft), 0 0 0 1px var(--accent); } /* ============================================================ 2. RESET */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-family); font-size: var(--font-size-base); line-height: var(--leading-normal); color: var(--text); background: var(--surface); /* Yatay tasma her zaman bir hatadir; kokten engellenir. */ overflow-x: hidden; } img, svg, video { max-width: 100%; height: auto; display: block; } h1, h2, h3, h4 { font-family: var(--font-heading); line-height: var(--leading-tight); margin: 0; font-weight: var(--weight-semibold); } h1 { font-size: var(--font-size-2xl); } h2 { font-size: var(--font-size-xl); } h3 { font-size: var(--font-size-lg); } p { margin: 0 0 var(--space-3); } ul, ol { margin: 0; padding: 0; } a { color: inherit; text-decoration: none; } a:hover { color: var(--accent); } button { font: inherit; color: inherit; } /* Klavye erisimi gorunur olmalidir; :focus-visible fare tiklamalarinda halka gostermez, klavyede gosterir. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); } .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; } .skip-link { position: absolute; left: var(--space-3); top: -4rem; z-index: 100; background: var(--surface); color: var(--text); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); box-shadow: var(--shadow-md); transition: top .15s ease; } .skip-link:focus { top: var(--space-3); } /* ============================================================ 3. LAYOUT */ .container { width: 100%; max-width: var(--container-width); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--space-7); } .section--tight { padding-block: var(--space-6); } .section--soft { background: var(--surface-soft); } .section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); flex-wrap: wrap; } .section__title { font-size: var(--font-size-xl); } .section__link { font-size: var(--font-size-sm); color: var(--accent); font-weight: var(--weight-medium); } .stack > * + * { margin-top: var(--space-4); } /* ============================================================ 4. BUTTONS */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 0.7rem 1.25rem; border: 1px solid transparent; border-radius: var(--radius-sm); font-size: var(--font-size-base); font-weight: var(--weight-semibold); cursor: pointer; text-align: center; transition: background .15s ease, border-color .15s ease, transform .05s ease; } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--accent); color: var(--accent-ink); } .btn--primary:hover { background: #1a5fd0; color: var(--accent-ink); } .btn--secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); } .btn--secondary:hover { background: var(--surface-soft); color: var(--text); } .btn--ghost { background: transparent; color: var(--text-muted); } .btn--ghost:hover { background: var(--surface-soft); color: var(--text); } .btn--danger { background: transparent; color: var(--danger); border-color: transparent; } .btn--danger:hover { background: var(--danger-soft); color: var(--danger); } .btn--block { width: 100%; } .btn--lg { padding: 0.9rem 1.5rem; font-size: var(--font-size-md); } .btn[disabled], .btn--disabled { opacity: .5; cursor: not-allowed; } /* ============================================================ 5. FORMS */ .field { display: block; margin-bottom: var(--space-4); } .field__label { display: block; font-size: var(--font-size-sm); font-weight: var(--weight-medium); margin-bottom: var(--space-1); } .field__hint { display: block; font-size: var(--font-size-xs); color: var(--text-muted); margin-top: var(--space-1); } .field__error { display: block; font-size: var(--font-size-xs); color: var(--danger); margin-top: var(--space-1); } .input, .select, .textarea { width: 100%; padding: 0.65rem 0.8rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; } .input:focus, .select:focus, .textarea:focus { outline: none; box-shadow: var(--focus-ring); border-color: var(--accent); } .input[disabled] { background: var(--surface-soft); color: var(--text-muted); } .textarea { min-height: 6rem; resize: vertical; } .checkbox { display: flex; gap: var(--space-2); align-items: flex-start; margin-bottom: var(--space-3); } .checkbox input { margin-top: 0.3rem; flex: none; } .checkbox span { font-size: var(--font-size-sm); } .field-row { display: grid; gap: var(--space-3); } @media (min-width: 640px) { .field-row--2 { grid-template-columns: 1fr 1fr; } } .fieldset { border: 0; padding: 0; margin: 0 0 var(--space-5); } .fieldset__legend { font-size: var(--font-size-lg); font-weight: var(--weight-semibold); margin-bottom: var(--space-3); padding: 0; } /* ============================================================ 6. CARD / PANEL */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-5); } .card--flush { padding: 0; overflow: hidden; } .card__head { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border); font-weight: var(--weight-semibold); } .card__body { padding: var(--space-5); } /* ============================================================ 7. BADGES / ALERTS */ .badge { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--font-size-xs); font-weight: var(--weight-medium); padding: 0.15rem 0.55rem; border-radius: var(--radius-pill); background: var(--surface-sunken); color: var(--text-muted); } .badge--success { background: var(--success-soft); color: var(--success); } .badge--warning { background: var(--warning-soft); color: var(--warning); } .badge--danger { background: var(--danger-soft); color: var(--danger); } .badge--accent { background: var(--accent-soft); color: var(--accent); } .alert { padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); font-size: var(--font-size-sm); margin-bottom: var(--space-4); } .alert--success { background: var(--success-soft); color: var(--success); } .alert--danger { background: var(--danger-soft); color: var(--danger); } .alert--info { background: var(--accent-soft); color: var(--accent); } /* ============================================================ 8. ANNOUNCEMENT */ .announce { background: var(--text); color: #fff; font-size: var(--font-size-sm); text-align: center; padding: var(--space-2) var(--gutter); } .announce a { text-decoration: underline; color: #fff; } /* ============================================================ 9. HEADER */ .header { background: color-mix(in srgb, var(--surface) 94%, transparent); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; backdrop-filter: blur(12px); } .header__bar { display: grid; grid-template-columns: minmax(0, auto) 1fr auto; align-items: center; gap: var(--space-3); padding-block: var(--space-4); } .header__bar > * { min-width: 0; } .header__brand { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-bold); font-size: var(--font-size-lg); /* Uzun magaza adi mobilde iki satira tasip hesap/sepet ikonlarini kenardan tasiriyordu. Marka sutunu KUCULEBILIR olmali ve tasarsa kirpilmali; basliktaki eylemler her zaman erisilebilir kalmali. */ min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .header__brand img { display:block; max-height: 2.5rem; max-width: 10rem; width: auto; height: auto; object-fit: contain; } @media (max-width: 560px) { .header__brand { font-size: var(--font-size-base); } } .header__search { display: none; } @media (min-width: 900px) { .header__search { display: block; } } .search { display: flex; width: 100%; max-width: 34rem; margin-inline: auto; } .search__input { flex: 1; padding: 0.6rem 0.9rem; font: inherit; border: 1px solid var(--border-strong); border-right: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); background: var(--surface-soft); } .search__input:focus { outline: none; box-shadow: var(--focus-ring); } .search__btn { border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); padding-inline: var(--space-4); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; cursor: pointer; font-weight: var(--weight-medium); } .search--disabled .search__input { color: var(--text-faint); } .header__actions { display: flex; align-items: center; gap: var(--space-1); } .header__action { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-size: var(--font-size-sm); color: var(--text-muted); position: relative; } .header__action:hover { background: var(--surface-soft); color: var(--text); } .header__action-label { display: none; } @media (min-width: 900px) { .header__action-label { display: inline; } } .cart-badge { position: absolute; top: 0.1rem; right: 0.1rem; min-width: 1.1rem; height: 1.1rem; padding-inline: 0.25rem; display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: var(--accent-ink); border-radius: var(--radius-pill); font-size: 0.6875rem; font-weight: var(--weight-bold); } .header__burger { display: inline-flex; background: none; border: 0; padding: var(--space-2); cursor: pointer; } @media (min-width: 900px) { .header__burger { display: none; } } /* Navigasyon */ .nav { border-top: 1px solid var(--border); display: none; } @media (min-width: 900px) { .nav { display: block; } } .nav__list { display: flex; gap: var(--space-1); list-style: none; flex-wrap: wrap; } .nav__link { display: inline-block; padding: var(--space-3) var(--space-3); font-size: var(--font-size-base); font-weight: var(--weight-medium); color: var(--text-muted); border-bottom: 2px solid transparent; } .nav__link:hover, .nav__link[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); } /* Mobil cekmece */ .drawer { position: fixed; inset: 0; z-index: 60; display: none; background: rgba(16, 24, 40, .45); } .drawer[data-open="true"] { display: block; } .drawer__panel { position: absolute; inset-block: 0; inset-inline-start: 0; width: min(20rem, 86vw); background: var(--surface); padding: var(--space-5); overflow-y: auto; box-shadow: var(--shadow-lg); } .drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); } .drawer__close { background: none; border: 0; font-size: var(--font-size-xl); cursor: pointer; line-height: 1; padding: var(--space-1); } .drawer__list { list-style: none; } .drawer__list a { display: block; padding: var(--space-3) 0; border-bottom: 1px solid var(--border); } .drawer__search { margin-bottom: var(--space-4); } /* ============================================================ 10. HERO */ .hero { position: relative; overflow: hidden; border-radius: var(--radius-lg); /* Gorsel yoksa BOS DIKDORTGEN degil, kasitli bir zemin. */ background: radial-gradient(120% 120% at 12% 0%, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 60%), linear-gradient(135deg, var(--surface-sunken) 0%, var(--surface-soft) 100%); color: var(--text); } .hero--image { min-height: clamp(22rem, 42vw, 34rem); color: #fff; display:grid; align-items:center; } .hero__media { position:absolute; inset:0; } .hero__media img { width:100%; height:100%; object-fit:cover; } .hero--image::after { content: ""; position: absolute; inset: 0; z-index: 0; /* İki eksenli geçiş: yatayda metin tarafını, dikeyde alt kenarı korur. Tek yönlü geçiş, görselin açık bölgesine denk gelen başlığı yutuyordu. Yoğunluk tüccarın seçtiği --hero-overlay değerine bağlı kalır. */ background: linear-gradient(90deg, color-mix(in srgb, #0a0e14 var(--hero-overlay, 30%), transparent) 0%, rgba(10,14,20,.20) 62%, rgba(10,14,20,.06) 100%), linear-gradient(to top, rgba(8,12,20,.42) 0%, rgba(8,12,20,0) 58%); } .hero__inner { position: relative; z-index: 1; padding: var(--space-7) var(--space-5); max-width: 34rem; display: flex; flex-direction: column; justify-content: center; min-height: 18rem; } @media (min-width: 768px) { .hero__inner { min-height: 26rem; } } @media (min-width: 768px) { .hero__inner { padding: var(--space-8) var(--space-7); } } .hero__eyebrow { font-size: var(--font-size-sm); font-weight: var(--weight-semibold); letter-spacing: .04em; text-transform: uppercase; opacity: .8; margin-bottom: var(--space-2); } .hero__title { font-size: var(--font-size-2xl); margin-bottom: var(--space-3); } @media (min-width: 768px) { .hero__title { font-size: var(--font-size-3xl); } } .hero__text { font-size: var(--font-size-md); opacity: .9; margin-bottom: var(--space-5); } .hero--center .hero__inner { max-width: 44rem; margin-inline: auto; text-align: center; } .hero--content-right .hero__inner { margin-inline-start:auto; } @media (max-width:639px) { .hero--image { min-height:22rem; } .hero__inner { padding:var(--space-6) var(--space-5); } } /* ============================================================ 11. CATEGORY CARDS */ .cat-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, 1fr); list-style: none; } @media (min-width: 640px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 960px) { .cat-grid { grid-template-columns: repeat(4, 1fr); } } .cat-card { display: block; position: relative; isolation: isolate; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border); background: var(--surface); transition: box-shadow .15s ease, transform .15s ease; } .cat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .cat-card__media { aspect-ratio: 3 / 4; background: var(--surface-sunken); position: relative; } @media (min-width: 640px) { .cat-card__media { aspect-ratio: 4 / 5; } } .cat-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; } .cat-card:hover .cat-card__media img { transform: scale(1.05); } /* Başlığı görselin ÜZERİNE almak, kartı "resim + altında gri şerit" görünümünden çıkarır. Okunabilirlik için altta koyu bir geçiş var; düz siyah bir katman görseli öldürürdü. */ .cat-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,12,20,.78) 0%, rgba(8,12,20,.28) 42%, rgba(8,12,20,0) 72%); } .cat-card__name { position: absolute; inset-inline: 0; bottom: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); padding: var(--space-4); color: #fff; font-weight: var(--weight-semibold); font-size: var(--font-size-md); text-shadow: 0 1px 2px rgba(0,0,0,.35); } .cat-card__name span { transition: transform .2s ease; } .cat-card:hover .cat-card__name span { transform: translateX(3px); } .cat-card:focus-visible { outline:none; box-shadow:var(--focus-ring); } /* ============================================================ 12. PRODUCT GRID + CARD */ .product-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, 1fr); list-style: none; } @media (min-width: 720px) { .product-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } } @media (min-width: 1024px) { .product-grid { grid-template-columns: repeat(4, 1fr); } } .product-card { display: flex; flex-direction: column; height: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; } .product-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--border-strong); } .product-card:focus-within { box-shadow: var(--focus-ring); } .product-card__media { position: relative; aspect-ratio: 1 / 1; background: var(--surface-soft); overflow: hidden; } .product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; } .product-card:hover .product-card__media img { transform: scale(1.04); } .product-card__flags { position: absolute; top: var(--space-2); left: var(--space-2); display: flex; flex-direction: column; gap: var(--space-1); z-index: 1; } .product-card__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--space-3) var(--space-3); flex: 1; } .product-card__brand { font-size: var(--font-size-xs); color: var(--text-faint); text-transform: uppercase; letter-spacing: .03em; } .product-card__name { font-size: var(--font-size-base); font-weight: var(--weight-medium); line-height: 1.35; } .product-card__name a::after { content: ""; position: absolute; inset: 0; } .product-card__foot { margin-top: auto; padding-top: var(--space-2); display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; } /* Fiyat kartın en güçlü öğesidir; rozet onunla aynı ağırlıkta olmamalı. */ .product-card__foot .price__now { font-size: var(--font-size-lg); letter-spacing: -.01em; } .product-card__foot .badge { font-size: 0.6875rem; } /* Kart yuzeyi tiklanabilir olsun diye konumlandirma */ .product-card { position: relative; } .product-card__favorite{position:absolute;top:var(--space-2);right:var(--space-2);z-index:3}.product-card__favorite button{border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--danger);width:2.5rem;height:2.5rem;font-size:1.25rem;cursor:pointer}.product-card__favorite button[aria-pressed="true"]{background:var(--danger);color:#fff}.pdp__favorite{margin-bottom:var(--space-4)} .reviews__layout{display:grid;gap:var(--space-6)}.review-list{display:grid;gap:var(--space-3)}.review-card{border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-4)}.review-card__head{display:flex;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap}.review-card__head span{color:var(--warning)}.review-form{display:grid;gap:var(--space-3)}.textarea{width:100%;min-height:8rem;padding:var(--space-3);border:1px solid var(--border);border-radius:var(--radius);font:inherit}.wishlist-list{list-style:none;display:grid;gap:var(--space-3)}.wishlist-item{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-3)}.wishlist-item__product{display:flex;align-items:center;gap:var(--space-3);min-width:0}.wishlist-item__product img{object-fit:cover;border-radius:var(--radius)}.wishlist-item__product small{display:block;color:var(--text-muted)}.wishlist-item__actions{display:flex;gap:var(--space-2);flex-wrap:wrap}@media(min-width:900px){.reviews__layout{grid-template-columns:minmax(0,2fr) minmax(18rem,1fr)}}@media(max-width:600px){.wishlist-item{align-items:stretch;flex-direction:column}.wishlist-item__actions,.wishlist-item__actions form,.wishlist-item__actions .btn{width:100%}} /* Gorsel yoksa: kasitli, oranini koruyan bir yer tutucu. */ .ph { width: 100%; height: 100%; display: grid; place-items: center; background: repeating-linear-gradient(45deg, var(--surface-soft) 0 10px, var(--surface-sunken) 10px 20px); color: var(--text-faint); } .ph__mark { display: grid; place-items: center; gap: var(--space-1); text-align: center; padding: var(--space-3); } .ph__glyph { font-size: 1.5rem; opacity: .55; } .ph__label { font-size: var(--font-size-xs); letter-spacing: .04em; text-transform: uppercase; } /* ============================================================ 13. PRICE */ .price { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; } .price__now { font-size: var(--font-size-md); font-weight: var(--weight-bold); } .price__was { font-size: var(--font-size-sm); color: var(--text-faint); text-decoration: line-through; } .price--lg .price__now { font-size: var(--font-size-2xl); } .price--muted { color: var(--text-muted); font-size: var(--font-size-sm); font-weight: var(--weight-normal); } /* ============================================================ 14. PDP */ .pdp { display: grid; gap: var(--space-6); } .pdp > * { min-width: 0; } @media (min-width: 900px) { .pdp { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-7); align-items: start; } } .gallery__main { aspect-ratio: 1 / 1; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--surface-soft); } .gallery__main img { width: 100%; height: 100%; object-fit: contain; } .gallery__thumbs { display: flex; gap: var(--space-2); margin-top: var(--space-3); flex-wrap: wrap; list-style: none; } .gallery__thumb { width: 4.5rem; height: 4.5rem; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-soft); padding: 0; cursor: pointer; } .gallery__thumb img { width: 100%; height: 100%; object-fit: contain; } .gallery__thumb[aria-current="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .pdp__brand { font-size: var(--font-size-sm); color: var(--text-faint); text-transform: uppercase; letter-spacing: .04em; } .pdp__title { font-size: var(--font-size-2xl); margin-block: var(--space-2) var(--space-3); } .pdp__meta { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; margin-bottom: var(--space-4); } .pdp__price { margin-bottom: var(--space-4); } .pdp__buy { display: flex; gap: var(--space-3); align-items: stretch; flex-wrap: wrap; margin-bottom: var(--space-5); } .pdp__desc { border-top: 1px solid var(--border); padding-top: var(--space-5); margin-top: var(--space-5); color: var(--text-muted); } .pdp__spec { list-style: none; font-size: var(--font-size-sm); color: var(--text-muted); } .pdp__spec li { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-2) 0; border-bottom: 1px solid var(--border); } .variants { margin-bottom: var(--space-5); } .variants__label { font-size: var(--font-size-sm); font-weight: var(--weight-medium); margin-bottom: var(--space-2); } .variants__list { display: flex; gap: var(--space-2); flex-wrap: wrap; list-style: none; } .variants__item { display: flex; align-items:center; gap:var(--space-2); padding: var(--space-2); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-size: var(--font-size-sm); background: var(--surface); } .variants__item img { width:2.75rem; height:2.75rem; object-fit:contain; border-radius:var(--radius-sm); background:var(--surface-soft); } .variants__item strong, .variants__item small { display:block; } .variants__item small { color:var(--text-muted); font-size:var(--font-size-xs); margin-top:.1rem; } .variants__item:hover { border-color: var(--accent); color: var(--accent); } .variants__item[aria-current="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: var(--weight-semibold); } /* Adet secici */ .qty { display: inline-flex; align-items: stretch; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; } .qty__btn { width: 2.5rem; background: var(--surface-soft); border: 0; cursor: pointer; font-size: var(--font-size-md); } .qty__btn:hover { background: var(--surface-sunken); } .qty__input { width: 3.25rem; border: 0; text-align: center; font: inherit; -moz-appearance: textfield; } .qty__input::-webkit-outer-spin-button, .qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .pdp__facts { display:grid; gap:var(--space-2); margin-top:var(--space-4); font-size:var(--font-size-sm); } .pdp__facts div { display:flex; justify-content:space-between; gap:var(--space-4); padding-bottom:var(--space-2); border-bottom:1px solid var(--border); } .pdp__facts dt { color:var(--text-muted); } .pdp__facts dd { margin:0; font-weight:var(--weight-medium); text-align:right; } @media (max-width:639px) { .pdp__buy { position:sticky; bottom:0; z-index:5; margin-inline:calc(var(--gutter) * -1); padding:var(--space-3) var(--gutter); background:color-mix(in srgb,var(--surface) 94%,transparent); border-block:1px solid var(--border); backdrop-filter:blur(8px); } .pdp__buy .btn { flex:1; } .variants__list { max-width:100%; flex-wrap:nowrap; overflow-x:auto; padding-bottom:var(--space-2); } .variants__item { min-width:13rem; } } /* ============================================================ 15. CART */ .cart-layout { display: grid; gap: var(--space-5); align-items: start; } @media (min-width: 900px) { .cart-layout { grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--space-6); } } .cart-line { display: grid; grid-template-columns: 5rem 1fr; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--border); } @media (min-width: 640px) { .cart-line { grid-template-columns: 6rem 1fr auto; align-items: center; } } .cart-line__media { aspect-ratio: 1 / 1; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-soft); } .cart-line__media img { width: 100%; height: 100%; object-fit: cover; } .cart-line__name { font-weight: var(--weight-medium); } .cart-line__sku { font-size: var(--font-size-xs); color: var(--text-faint); } .cart-line__controls { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-2); flex-wrap: wrap; } .cart-line__total { font-weight: var(--weight-semibold); white-space: nowrap; } .summary { position: sticky; top: var(--space-4); } .summary__row { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; font-size: var(--font-size-sm); } .summary__row--total { border-top: 1px solid var(--border); margin-top: var(--space-2); padding-top: var(--space-3); font-size: var(--font-size-md); font-weight: var(--weight-bold); } /* ============================================================ 16. CHECKOUT */ .checkout-layout { display: grid; gap: var(--space-5); align-items: start; } @media (min-width: 960px) { .checkout-layout { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--space-6); } } .mini-line { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-2) 0; font-size: var(--font-size-sm); } .mini-line__media { width: 3rem; height: 3rem; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-soft); flex: none; } .mini-line__media img { width: 100%; height: 100%; object-fit: cover; } .mini-line__name { flex: 1; } .mini-line__qty { color: var(--text-muted); } /* ============================================================ 17. ACCOUNT */ .account-layout { display: grid; gap: var(--space-5); align-items: start; } @media (min-width: 860px) { .account-layout { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--space-6); } } .account-nav { display: flex; gap: var(--space-1); overflow-x: auto; padding-bottom: var(--space-2); list-style: none; } @media (min-width: 860px) { .account-nav { flex-direction: column; overflow: visible; padding: 0; } } .account-nav__link { display: block; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); color: var(--text-muted); font-size: var(--font-size-base); white-space: nowrap; } .account-nav__link:hover { background: var(--surface-soft); color: var(--text); } .account-nav__link[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: var(--weight-semibold); } .auth-shell { max-width: 27rem; margin-inline: auto; } .order-card { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-4); margin-bottom: var(--space-3); } .order-card__head { display: flex; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; align-items: baseline; margin-bottom: var(--space-2); } .order-card__no { font-weight: var(--weight-semibold); } .order-card__meta { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; font-size: var(--font-size-sm); color: var(--text-muted); } .address-grid { display: grid; gap: var(--space-4); } @media (min-width: 640px) { .address-grid { grid-template-columns: repeat(2, 1fr); } } .address-card { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-4); } .address-card__head { display: flex; justify-content: space-between; gap: var(--space-2); align-items: baseline; margin-bottom: var(--space-2); } .address-card__flags { display: flex; gap: var(--space-1); flex-wrap: wrap; margin-block: var(--space-2); } .address-card__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-3); } .address-card__actions form { display: inline; } /* ============================================================ 18. TABLE */ .table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); } .table th, .table td { padding: var(--space-3); text-align: left; border-bottom: 1px solid var(--border); } .table th { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); font-weight: var(--weight-semibold); } .table tfoot td { font-weight: var(--weight-semibold); } .table-scroll { overflow-x: auto; } /* ============================================================ 19. TRUST STRIP */ .trust { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, 1fr); list-style: none; } @media (min-width: 860px) { .trust { grid-template-columns: repeat(4, 1fr); } } .trust__item { display: flex; gap: var(--space-3); align-items: flex-start; } .trust__glyph { font-size: 1.25rem; line-height: 1.2; flex: none; } .trust__title { font-weight: var(--weight-semibold); font-size: var(--font-size-base); } .trust__text { font-size: var(--font-size-sm); color: var(--text-muted); } /* ============================================================ 20. PROMO */ .promo { border-radius: var(--radius-lg); overflow:hidden; background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 12%, var(--surface-soft)) 0%, var(--surface-soft) 100%); display: grid; gap: var(--space-4); align-items: center; } .promo__content { padding:var(--space-6) var(--space-5); } .promo__content .btn { margin-top:var(--space-4); } .promo__media { height:100%; min-height:15rem; } .promo__media img { width:100%; height:100%; object-fit:cover; } @media (min-width: 768px) { .promo:has(.promo__media) { grid-template-columns:1fr 1fr; } .promo[data-direction="reverse"] .promo__media { order:2; } .promo__content { padding:var(--space-7); } } .promo__title { font-size: var(--font-size-xl); margin-bottom: var(--space-2); } .promo__text { color: var(--text-muted); margin: 0; } .category-hero { display:grid; gap:var(--space-5); align-items:center; margin-bottom:var(--space-4); padding:var(--space-5); background:var(--surface-soft); border-radius:var(--radius-lg); overflow:hidden; } .category-hero .muted { max-width:44rem; } .category-hero img { width:100%; aspect-ratio:2/1; object-fit:cover; border-radius:var(--radius-md); } @media (min-width:768px) { .category-hero:has(img) { grid-template-columns:1fr 1fr; padding:var(--space-6); } } /* ============================================================ 21. FOOTER */ .footer { background: var(--surface-soft); border-top: 1px solid var(--border); margin-top: var(--space-8); } .footer__cols { display: grid; gap: var(--space-5); padding-block: var(--space-7); grid-template-columns: 1fr; } @media (min-width: 640px) { .footer__cols { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 960px) { .footer__cols { grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--space-6); } } .footer__title { font-size: var(--font-size-sm); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--space-3); } .footer__list { list-style: none; display: grid; gap: var(--space-2); font-size: var(--font-size-sm); } .footer__list a { color: var(--text-muted); } .footer__list a:hover { color: var(--accent); } .footer__about { font-size: var(--font-size-sm); color: var(--text-muted); max-width: 24rem; } .footer__bottom { border-top: 1px solid var(--border); padding-block: var(--space-4); font-size: var(--font-size-xs); color: var(--text-muted); display: flex; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; } /* ============================================================ 22. EMPTY / ERROR STATES */ .empty { text-align: center; padding: var(--space-7) var(--space-4); } .empty__glyph { font-size: 2.5rem; opacity: .35; margin-bottom: var(--space-3); } .empty__title { font-size: var(--font-size-lg); margin-bottom: var(--space-2); } .empty__text { color: var(--text-muted); margin-bottom: var(--space-4); } .state { text-align: center; padding: var(--space-7) var(--space-4); max-width: 32rem; margin-inline: auto; } .state__glyph { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: var(--radius-pill); margin: 0 auto var(--space-4); font-size: 1.5rem; } .state--success .state__glyph { background: var(--success-soft); color: var(--success); } .state--pending .state__glyph { background: var(--warning-soft); color: var(--warning); } .state--danger .state__glyph { background: var(--danger-soft); color: var(--danger); } .state--neutral .state__glyph { background: var(--surface-sunken); color: var(--text-muted); } /* ============================================================ 23. BREADCRUMB */ .crumbs { display: flex; gap: var(--space-2); flex-wrap: wrap; list-style: none; font-size: var(--font-size-sm); color: var(--text-muted); padding-block: var(--space-4); } .crumbs li::after { content: "/"; margin-left: var(--space-2); color: var(--border-strong); } .crumbs li:last-child::after { content: ""; } /* ============================================================ 24. CATALOG */ .catalog-head { padding-bottom: var(--space-4); } .catalog-head__title { display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-4); flex-wrap:wrap; } .catalog-head__title h1 { margin-bottom:var(--space-1); } .catalog-count { color:var(--text-muted); font-size:var(--font-size-sm); white-space:nowrap; } .catalog-layout { display:grid; gap:var(--space-5); align-items:start; } .catalog-filters { border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface); } .catalog-filters summary { cursor:pointer; padding:var(--space-4); font-weight:var(--weight-semibold); } .catalog-filters[open] summary { border-bottom:1px solid var(--border); } .catalog-filter-form { display:grid; gap:var(--space-4); padding:var(--space-4); } .filter-fieldset { border:0; padding:0; margin:0; } .filter-fieldset legend, .field__label { display:block; margin-bottom:var(--space-2); font-size:var(--font-size-sm); font-weight:var(--weight-semibold); } .price-filter { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-2); } .price-filter label span { display:block; margin-bottom:var(--space-1); color:var(--text-muted); font-size:var(--font-size-xs); } .filter-check { display:flex; gap:var(--space-2); align-items:center; font-size:var(--font-size-sm); } .filter-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-2); } .filter-actions .btn { width:100%; } .catalog-results { min-width:0; } .catalog-results .product-grid { margin:0; } .pagination { display:flex; justify-content:center; align-items:center; gap:var(--space-2); flex-wrap:wrap; margin-top:var(--space-6); } .pagination__link { display:grid; min-width:2.5rem; min-height:2.5rem; padding:var(--space-2); place-items:center; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:var(--font-size-sm); } .pagination__link:hover { border-color:var(--accent); color:var(--accent); } .pagination__link[aria-current="page"] { border-color:var(--accent); background:var(--accent); color:#fff; font-weight:var(--weight-semibold); } @media (min-width:900px) { .catalog-layout { grid-template-columns:16rem minmax(0,1fr); gap:var(--space-6); } .catalog-sidebar { position:sticky; top:var(--space-4); } .catalog-filters > summary { cursor:default; } .catalog-results .product-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } } /* ============================================================ 25. UTIL */ .muted { color: var(--text-muted); } .small { font-size: var(--font-size-sm); } .tiny { font-size: var(--font-size-xs); } .center { text-align: center; } .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .flex-between { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }