` olduğu için gövdeden 16px alt boşluk miras alıyordu; flex `gap`
bunu kapatmıyor ve üst satır ürün adından kopuk duruyordu (ölçüm: gap
3px ama görünen boşluk 19px). Boşluk sıfırlandı, aralık yalnız gap'ten.
Satır aralığı da 1.6 gövde değerinden 1.3'e indi: tek satırlık mono
etiket, gövde metni değil. */
margin: 0;
font-size: var(--fs-0);
line-height: var(--lh-snug);
color: var(--ink-3);
/* Tek satır mono etiket telefonda kartların %80'inde kesiliyordu (ölçüm: 320px'te
24 kartın 23'ü, "Vual dokulu pamuk şal · 6…"). Gövde yazısıyla en çok iki satıra
sarar; renk sayısı ("6 renk") bölünmez kalır. Alttaki eylemler dibe yaslı olduğu için
sarma kart sırasının hizasını bozmaz. */
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
max-width: 100%;
}
.card__colors { white-space: nowrap; }
/* Bölüm başlığı: tek bileşen `.head` (motifs.css). Eski `.section-head` kaldırıldı. */
/* --- Form ----------------------------------------------------------------- */
/* Tek kutu dili: .input, .select, .textarea ve aramalı seçimin düğmesi (.combo__btn) aynı
kalıptan çıkar. Odak halkası kutunun İÇİNDE çizilir (inset gölge): kaydırılan bir kabın
içinde dış halka kenardan kırpılıyordu (çark formu). */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field__label { font-size: var(--fs-1); color: var(--ink); font-weight: var(--fw-medium); }
.field__label .muted { font-weight: var(--fw-regular); }
.field__hint { margin: 0; font-size: var(--fs-0); color: var(--ink-2); line-height: 1.45; }
.input, .select, .textarea, .combo__btn {
width: 100%;
min-height: 48px;
padding: 0 var(--sp-4);
background: var(--surface);
color: var(--ink);
border: 1px solid var(--line);
border-radius: var(--radius);
font-size: var(--fs-2); /* 16px: iOS odakta sayfayı büyütmesin */
line-height: 1.4;
-webkit-appearance: none;
appearance: none;
transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.textarea { padding-block: var(--sp-3); min-height: 88px; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--ink-3); opacity: 1; }
.select {
padding-inline-end: var(--sp-10);
background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%236A605A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 16px;
cursor: pointer;
}
@media (hover: hover) {
.input:hover, .select:hover, .textarea:hover, .combo__btn:hover:not(:disabled) { border-color: var(--ink-3); }
}
.input:focus, .select:focus, .textarea:focus, .combo__btn:focus-visible, .combo.is-open .combo__btn {
outline: none;
border-color: var(--brand-500);
box-shadow: inset 0 0 0 1px var(--brand-500);
}
.input:disabled, .select:disabled, .textarea:disabled, .combo__btn:disabled {
background-color: var(--line-2); color: var(--ink-3); border-color: var(--line); cursor: not-allowed;
}
.field--error .input, .field--error .select, .field--error .textarea, .field--error .combo__btn,
.input[aria-invalid="true"] {
border-color: var(--danger);
background-color: var(--danger-bg);
}
.field--error .input:focus, .field--error .textarea:focus, .field--error .combo__btn:focus-visible,
.input[aria-invalid="true"]:focus { box-shadow: inset 0 0 0 1px var(--danger); background-color: var(--surface); }
.field__error, .field__err { margin: 0; font-size: var(--fs-0); color: var(--danger); line-height: 1.45; }
/* --- Aramalı seçim (combo.js) --------------------------------------------- */
.combo { position: relative; min-width: 0; }
.combo__native {
position: absolute; inset: 0; width: 100%; height: 100%;
opacity: 0; pointer-events: none; /* otomatik doldurma için DOM'da kalır */
}
.combo__btn {
display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
text-align: start; cursor: pointer;
}
.combo__value { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo__btn.is-empty .combo__value { color: var(--ink-3); }
.combo__chev { flex: 0 0 auto; color: var(--ink-2); transition: transform var(--dur-fast) var(--ease); }
.combo.is-open .combo__chev { transform: rotate(180deg); }
.comboPop {
position: fixed; z-index: calc(var(--z-drawer) + 20);
display: flex; flex-direction: column;
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
box-shadow: var(--shadow-pop);
opacity: 0; transform: translateY(-4px); pointer-events: none;
transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
overflow: hidden;
}
.comboPop.is-up { transform: translateY(4px); }
.comboPop:focus { outline: none; }
.comboPop.is-open { opacity: 1; transform: none; pointer-events: auto; }
.comboPop__search {
position: relative; flex: 0 0 auto; display: flex; align-items: center;
padding: var(--sp-2); border-block-end: 1px solid var(--line-2);
}
.comboPop__search svg { position: absolute; inset-inline-start: calc(var(--sp-2) + 12px); color: var(--ink-3); pointer-events: none; }
.comboPop__q {
width: 100%; min-height: 44px; padding: 0 var(--sp-3) 0 40px;
border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2);
font-size: var(--fs-2); color: var(--ink); -webkit-appearance: none; appearance: none;
}
.comboPop__q::-webkit-search-cancel-button { -webkit-appearance: none; }
.comboPop__q:focus { outline: none; border-color: var(--brand-500); background: var(--surface); }
.comboPop__list { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-1); margin: 0; list-style: none; }
.comboPop__list [role="option"] {
display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
min-height: 44px; padding: 0 var(--sp-3); border-radius: var(--radius-sm);
font-size: var(--fs-2); color: var(--ink); cursor: pointer;
}
.comboPop__list [role="option"].is-active { background: var(--surface-2); }
.comboPop__list [aria-selected="true"] { font-weight: var(--fw-semibold); color: var(--brand-600); }
.comboPop__list mark { background: none; color: inherit; font-weight: var(--fw-semibold); text-decoration: underline; text-decoration-color: var(--brand-300); text-underline-offset: 3px; }
.combo__tick { flex: 0 0 auto; visibility: hidden; color: var(--brand-500); }
.comboPop__list [aria-selected="true"] .combo__tick { visibility: visible; }
.comboPop__empty { padding: var(--sp-5) var(--sp-3); font-size: var(--fs-1); color: var(--ink-2); text-align: center; }
/* Dokunmatik: tam ekran alt sayfa. Üste sabitli, klavye açılınca liste klavyenin üstünde kalır. */
.comboPop--sheet {
inset: 0; width: auto; max-height: none; border: 0; border-radius: 0;
box-shadow: none; transform: translateY(24px);
transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.comboPop--sheet.is-open { transform: none; }
.comboPop__head {
flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
padding: calc(var(--sp-2) + env(safe-area-inset-top)) var(--sp-2) var(--sp-2) var(--sp-5);
border-block-end: 1px solid var(--line-2);
}
.comboPop__title { margin: 0; font-size: var(--fs-3); font-weight: var(--fw-semibold); }
.comboPop__close { width: var(--tap); height: var(--tap); display: grid; place-items: center; border: 0; background: none; color: var(--ink-2); }
.comboPop--sheet .comboPop__search { padding: var(--sp-3) var(--gutter); }
.comboPop--sheet .comboPop__search svg { inset-inline-start: calc(var(--gutter) + 12px); }
.comboPop--sheet .comboPop__list { padding: var(--sp-1) var(--sp-2) calc(var(--sp-6) + env(safe-area-inset-bottom)); }
.comboPop--sheet .comboPop__list [role="option"] { min-height: 52px; border-block-end: 1px solid var(--line-2); border-radius: 0; }
.comboScrim { position: fixed; inset: 0; z-index: calc(var(--z-drawer) + 19); background: rgb(26 22 20 / 0.4); opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease); }
.comboScrim.is-open { opacity: 1; pointer-events: auto; }
html.combo-lock, html.combo-lock body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
.comboPop, .comboPop--sheet, .comboScrim, .combo__chev { transition: none; }
}
/* --- Metin içi bağlantı: genel a alt çizgisiz; paragraf içinde bağlantı olduğu belli olmalı. */
.link { color: var(--brand-600); text-decoration: underline; text-decoration-color: var(--brand-300); text-underline-offset: 0.2em; }
.link:hover { color: var(--brand-700); text-decoration-color: currentColor; }
/* --- Kart logoları (partials/pay-logos.php) ------------------------------- */
.payLogos { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; justify-content: flex-end; }
.payLogo {
display: grid; place-items: center; width: 46px; height: 30px;
background: #fff; border: 1px solid var(--line); border-radius: 4px;
}
.payLogo svg { display: block; width: auto; max-width: 38px; height: auto; }
.co__trustLogos { justify-content: center; }
/* --- Adet sayacı ---------------------------------------------------------- */
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.stepper button { width: var(--tap); height: var(--tap); background: none; border: 0; color: var(--ink-2); font-size: var(--fs-3); }
.stepper input { width: 44px; height: var(--tap); border: 0; text-align: center; background: none; font-size: var(--fs-2); }
/* --- Güven şeridi --------------------------------------------------------- */
.trust { display: grid; gap: var(--sp-3); }
.trust__item { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--fs-1); }
.trust__item svg { flex: 0 0 auto; width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.5; fill: none; color: var(--ink-2); }
.trust__item b { font-weight: var(--fw-semibold); }
@media (min-width: 640px) { .trust { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .trust { grid-template-columns: repeat(4, 1fr); } }
/* --- Sabit alt çubuk (ürün sayfası) -------------------------------------- */
.stickybar {
position: fixed; inset-inline: 0; inset-block-end: 0; z-index: var(--z-sticky);
display: flex; align-items: center; gap: var(--sp-3);
padding: var(--sp-3) var(--gutter);
padding-block-end: max(var(--sp-3), env(safe-area-inset-bottom));
background: var(--surface);
border-block-start: 1px solid var(--line);
transform: translateY(110%);
transition: transform var(--dur) var(--ease);
}
.stickybar.is-visible { transform: translateY(0); }
/* Çubuk sayfa açılışında görünür olduğu için sayfa sonuna pay gerekiyor;
yoksa footer'ın son satırı çubuğun altında kalıyor. */
@media (max-width: 899px) { body[data-page="product"] { padding-block-end: 86px; } }
.stickybar .price { flex: 0 0 auto; }
.stickybar .btn { flex: 1 1 auto; }
/* --- Kampanya ilerleme çubuğu -------------------------------------------- */
.progress { height: 6px; border-radius: var(--radius-pill); background: var(--line-2); overflow: hidden; }
.progress__fill { height: 100%; background: var(--accent); transition: width var(--dur-slow) var(--ease); }
/* --- Akordeon ------------------------------------------------------------- */
.acc { border-block-start: 1px solid var(--line); }
.acc__item { border-block-end: 1px solid var(--line); }
.acc__btn {
width: 100%; min-height: var(--tap);
display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
padding: var(--sp-4) 0; background: none; border: 0; text-align: start;
font-size: var(--fs-2); font-weight: var(--fw-medium);
}
.acc__btn::after { content: "+"; color: var(--ink-2); font-size: var(--fs-3); }
.acc__btn[aria-expanded="true"]::after { content: "−"; }
.acc__panel { padding-block-end: var(--sp-4); color: var(--ink-2); font-size: var(--fs-1); }
.acc__panel[hidden] { display: none; }
.acc__links { list-style: none; margin: 0; padding: 0; }
.acc__links a { display: inline-flex; align-items: center; min-height: 44px; }
/* Kutu butonu: ikon değişimi (içerik JS ile değiştirilmez) */
.card__boxTick { display: none; }
.card__box.is-in .card__boxIcon { display: none; }
.card__box.is-in .card__boxTick { display: block; }
.card__box.is-full { background: var(--warning-bg); border-color: var(--warning); color: var(--warning); }
@media (prefers-reduced-motion: no-preference) {
.card__box.is-in { animation: boxPulse 320ms var(--ease-fold); }
@keyframes boxPulse { 0% { transform: scale(1); } 50% { transform: scale(1.12); } 100% { transform: scale(1); } }
}
/* --- Kart üstü rozet: kompakt ---------------------------------------------
Görselin sol üstünde tek rozet. 12px yazı + dar iç boşluk: 375px'te ~80px genişlik,
görselin ancak köşesini kapatır. Dar kartta uzun metin kısalır (Fenomen tercihi → Fenomen). */
.card__flags .badge { font-size: 11px; line-height: 1.4; padding: 3px 8px 3px 7px; gap: 4px; letter-spacing: 0; }
.card__flags .badge::before { width: 12px; height: 12px; }
.card__flags .badge__short { display: none; }
@container card (max-width: 200px) {
.card__flags .badge--fenomen .badge__text { display: none; }
.card__flags .badge--fenomen .badge__short { display: inline; }
}
/* 320px sınıfı telefonda (kart ≤150px) en uzun tanım + renk sayısı ("Kendinden desenli
parlak jakar eşarp · 22 renk") iki satıra sığmıyor; orada üç satıra izin var.
Container query özgüllük eklemez, bu yüzden dosyanın sonunda durur. */
@container card (max-width: 150px) {
.card__meta { -webkit-line-clamp: 3; }
}
/* nav.css */
/* ==========================================================================
Navigasyon — masaüstü mega menü + mobil seviye çekmecesi
========================================================================== */
/* --- Masaüstü mega menü --------------------------------------------------- */
.mega { display: none; }
@media (min-width: 1024px) {
.header__bar > [data-drawer-open="nav"] { display: none; }
.mega { display: block; border-block-start: var(--hairline) solid var(--line-2); }
.mega__bar {
display: flex;
justify-content: center;
gap: clamp(var(--sp-3), 1.6vw, var(--sp-6));
padding-inline: var(--sp-6);
}
.mega__item { position: relative; }
.mega__link {
display: flex; align-items: center;
min-height: 46px;
font-size: var(--fs-1);
letter-spacing: 0.02em;
border-block-end: 2px solid transparent;
transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.mega__item.is-open > .mega__link,
.mega__link:hover { border-block-end-color: var(--accent); color: var(--ink); }
/* Öne çıkan menü girişleri (panelden seçilir: Ayarlar › Vitrin).
Dolu bordo pill denendi ve ağır kaçtı: menü çubuğu iki reklam etiketi
gibi görünüyordu. Vurgu artık en hafif araçla — bordo metin + bir tık
kalın. Zemin, kenarlık, pill yok; çubuk sakin kalıyor. */
.mega__item.is-featured > .mega__link {
color: var(--brand-700);
font-weight: var(--fw-semibold);
}
.mega__item.is-featured > .mega__link .mega__n { color: var(--brand-500); }
.mega__item.is-featured.is-open > .mega__link,
.mega__item.is-featured > .mega__link:hover {
color: var(--brand-500);
border-block-end-color: var(--accent);
}
.mega__panel {
position: absolute;
inset-inline: 0;
inset-block-start: 100%;
z-index: var(--z-header);
background: var(--surface);
border-block-end: var(--hairline) solid var(--line);
box-shadow: var(--shadow-pop);
}
/* Panel tam genişlik: konumlandırma header'a göre */
.mega__item .mega__panel {
position: fixed;
inset-inline: 0;
inset-block-start: auto;
}
.mega__panel[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
.mega__panel { animation: megaIn 180ms var(--ease); }
@keyframes megaIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
}
.mega__grid {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
gap: clamp(var(--sp-5), 2.5vw, var(--sp-8));
padding-block: var(--sp-6) var(--sp-8);
align-items: start;
}
.mega__feature { max-width: 260px; }
.mega__col ul { display: grid; gap: var(--sp-1); }
.mega__colHead { display: block; margin-bottom: var(--sp-3); }
.mega__col a {
display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
min-height: 30px; font-size: var(--fs-1);
}
.mega__col a:hover { color: var(--accent); }
/* --ink-3 beyaz üzerinde 3.07 ölçüldü (4.5 altı); sayılar okunur olmalı. */
.mega__n { font-size: var(--fs-0); color: var(--ink-2); }
.mega__swatches { gap: var(--sp-2) !important; }
.mega__swatches a { align-items: center; }
.mega__swatches i {
width: 14px; height: 14px; border-radius: var(--radius-pill);
box-shadow: inset 0 0 0 1px rgb(26 22 20 / 0.14);
margin-inline-end: var(--sp-2); flex: 0 0 auto;
}
.mega__swatches a { justify-content: flex-start; }
.mega__feature { display: grid; gap: var(--sp-3); align-content: start; }
.mega__featureMedia { display: block; overflow: hidden; border-radius: var(--radius); background: var(--surface-3); }
.mega__feature img {
width: 100%; aspect-ratio: var(--ratio-product); object-fit: cover;
transition: transform var(--dur-slow) var(--ease);
}
.mega__feature:hover img { transform: scale(1.04); }
.mega__featureBody { display: grid; gap: 2px; }
.mega__featureTitle {
font-size: var(--fs-1); font-weight: var(--fw-medium); line-height: var(--lh-snug);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mega__featurePrice { font-size: var(--fs-1); font-weight: var(--fw-semibold); }
}
/* --- Mobil seviye çekmecesi ---------------------------------------------- */
.dd { position: relative; flex: 1 1 auto; overflow: hidden; }
.dd__pane {
padding: var(--sp-3) 0 calc(var(--sp-8) + env(safe-area-inset-bottom));
overflow-y: auto;
max-height: 100%;
}
.dd__pane[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
.dd__pane.is-entering { animation: paneIn 240ms var(--ease); }
.dd__pane.is-entering-back { animation: paneBack 240ms var(--ease); }
@keyframes paneIn { from { transform: translateX(28%); opacity: 0.4; } to { transform: none; opacity: 1; } }
@keyframes paneBack { from { transform: translateX(-28%); opacity: 0.4; } to { transform: none; opacity: 1; } }
}
.dd__list { display: grid; }
.dd__row {
display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
width: 100%; min-height: 52px;
padding-inline: var(--gutter);
background: none; border: 0; text-align: start;
font-size: var(--fs-2); font-weight: var(--fw-medium);
border-block-end: var(--hairline) solid var(--line-2);
}
.dd__row:active { background: var(--surface-2); }
.dd__meta { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-0); color: var(--ink-2); font-weight: var(--fw-regular); }
.dd__back {
display: inline-flex; align-items: center; gap: var(--sp-1);
min-height: var(--tap); padding: 0;
background: none; border: 0; color: var(--ink-2);
font-size: var(--fs-1);
}
.dd__back[hidden] { display: none; }
.dd__all {
display: flex; align-items: center; justify-content: space-between;
margin: 0 var(--gutter) var(--sp-4);
padding: var(--sp-3) var(--sp-4);
background: var(--ink); color: var(--ink-inverse);
border-radius: var(--radius);
font-size: var(--fs-1); font-weight: var(--fw-medium);
}
.dd__all .counter { color: rgb(251 248 246 / 0.7); }
.dd__sectionHead { display: block; padding: var(--sp-5) var(--gutter) var(--sp-2); }
.dd__swatches { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-1); padding-inline: var(--gutter); }
.dd__swatches a { display: flex; align-items: center; gap: var(--sp-2); min-height: 40px; font-size: var(--fs-1); }
.dd__swatches i { width: 14px; height: 14px; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px rgb(26 22 20 / 0.14); flex: 0 0 auto; }
.dd__swatches .counter { margin-inline-start: auto; font-size: var(--fs-0); color: var(--ink-2); }
.dd__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: 0 var(--gutter) var(--sp-4); }
/* ==========================================================================
Çekmece altı kısayolları
Dört eş dikdörtgendi, hiyerarşisi yoktu ve sitenin geri kalanına
yakışmıyordu. Artık: bir ana eylem (kampanya, bordo dolu), altında
ikon + alt satırlı 2x2 ızgara, en altta tek satır güven sözü.
========================================================================== */
.ddQuick {
display: grid; gap: var(--sp-3);
padding: var(--sp-5) var(--gutter) var(--sp-4);
margin-block-start: var(--sp-3);
border-block-start: var(--hairline) solid var(--line);
}
/* Ana eylem: çekmecedeki tek dolu buton, gözün gideceği yer */
.ddQuick__hero {
display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-3);
min-height: 62px; padding: var(--sp-3) var(--sp-4);
border-radius: var(--radius);
background: var(--accent); color: #fff;
transition: background-color var(--dur-fast) var(--ease);
}
.ddQuick__hero:hover, .ddQuick__hero:active { background: var(--brand-700); }
.ddQuick__heroIcon { display: grid; place-items: center; color: var(--thread-300); }
.ddQuick__heroText { display: grid; gap: 1px; min-width: 0; }
.ddQuick__heroText b { font-size: var(--fs-2); font-weight: var(--fw-medium); }
.ddQuick__heroText span { font-size: var(--fs-0); color: rgb(255 255 255 / 0.76); }
.ddQuick__arrow { color: rgb(255 255 255 / 0.7); }
/* İkincil kısayollar: çekmecedeki menüyle aynı dilde eşit satırlar (ikon · başlık + tek satır açıklama · ok).
2x2 ızgarada beş öğe son satırda tek kalıyor, başlık/açıklama uzunluğu değişince kartlar farklı
boyda duruyordu (kullanıcı ekran görüntüsü, 26.09.2026). */
.ddQuick__grid { display: grid; list-style: none; margin: 0; padding: 0; border-block-start: var(--hairline) solid var(--line); }
.ddQuick__grid > li { margin: 0; border-block-end: var(--hairline) solid var(--line); }
.ddQuick__item {
display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: var(--sp-3);
min-height: 60px; padding-block: var(--sp-2);
color: var(--ink);
transition: color var(--dur-fast) var(--ease);
}
.ddQuick__item:hover, .ddQuick__item:active { color: var(--accent); }
.ddQuick__icon {
display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
background: var(--surface-3); color: var(--brand-500);
}
.ddQuick__icon svg { display: block; }
.ddQuick__text { display: grid; gap: 2px; min-width: 0; }
.ddQuick__text b { font-size: var(--fs-1); font-weight: var(--fw-medium); line-height: var(--lh-snug); }
.ddQuick__text span {
font-size: var(--fs-0); color: var(--ink-3); line-height: var(--lh-snug);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ddQuick__chev { color: var(--ink-3); }
/* Güven sözü: üç kısa, eşit öğe (tek uzun cümle telefonda ikiye bölünüyordu). */
.ddQuick__promise {
display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: var(--sp-2);
list-style: none; margin: 0; padding: var(--sp-2) 0 0;
}
.ddQuick__promise li {
display: grid; justify-items: center; gap: 4px; margin: 0;
font-size: var(--fs-0); color: var(--ink-2); text-align: center; line-height: var(--lh-snug);
}
.ddQuick__promise svg { color: var(--success); }
.searchHints { margin-top: var(--sp-4); }
.searchHints .dd__chips { padding-inline: 0; }
/* Çekmecede öne çıkan girişler. Trafiğin ~%99'u mobil: vurgu burada görünmek
zorunda. Tam satırı bordoya boyamak liste düzenini bozuyor, bunun yerine
sol kenarda 3px bordo çözgü çizgisi + bordo metin + koyu ağırlık.
Çizgi inset gölge ile veriliyor: kenarlık eklemek satırı kaydırırdı. */
.dd__list > li.is-featured > .dd__row {
color: var(--brand-700);
font-weight: var(--fw-semibold);
}
.dd__list > li.is-featured > .dd__row:active { background: var(--surface-2); }
/* Öne çıkan satırın sayacı bordo zeminde kalıyor: kendi renginde ve okunur olsun. */
/* Sayaç öne çıkan satırda da ikincil kalmalı: vurgu adın kendisinde. */
.dd__list > li.is-featured > .dd__row .counter,
.dd__list > li.is-featured > .dd__row .dd__meta { color: var(--brand-500); }
/* layout.css */
/* ==========================================================================
Nice Scarfs — Sayfa/bölüm yerleşimleri
========================================================================== */
.skip {
position: absolute; inset-block-start: -100px; inset-inline-start: var(--sp-4); z-index: var(--z-toast);
padding: var(--sp-3) var(--sp-4); background: var(--ink); color: #fff; border-radius: var(--radius);
}
.skip:focus { inset-block-start: var(--sp-2); color: #fff; }
/* --- Duyuru şeridi -------------------------------------------------------- */
.announce {
background: var(--ink);
color: #fff;
font-size: var(--fs-0);
letter-spacing: 0.02em;
overflow: hidden;
}
/* Kenarlarda yumuşak kesim: metin ekranın kenarında aniden kesiliyordu ve
şerit yarım kalmış gibi duruyordu. Maske ile kenara doğru siliniyor. */
.announce__viewport {
overflow: hidden;
-webkit-mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.announce__track {
display: flex; width: max-content; gap: var(--sp-8);
padding-block: var(--sp-2); white-space: nowrap;
animation: marquee 56s linear infinite;
}
/* Üstüne gelince duruyor: okumak isteyen okuyabilsin */
.announce:hover .announce__track { animation-play-state: paused; }
.announce__item { display: inline-flex; align-items: center; gap: var(--sp-3); }
/* Ayırıcı noktaya çevrildi: tire, metnin tirelerine karışıyordu */
.announce__item::before { content: "·"; color: var(--brand-300); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
/* Hareket istemeyende akış durur; tek başlık ortada kalır ve maske kalkar,
yoksa duran metnin kenarları soluk görünür. */
.announce__track { animation: none; width: auto; justify-content: center; }
.announce__viewport { -webkit-mask: none; mask: none; }
.announce__item:nth-child(n+2) { display: none; }
}
/* --- Header --------------------------------------------------------------- */
.header {
position: sticky; inset-block-start: 0; z-index: var(--z-header);
background: var(--surface);
border-block-end: 1px solid var(--line);
}
.header__bar {
display: grid;
grid-template-columns: var(--tap) 1fr auto;
align-items: center;
gap: var(--sp-2);
min-height: var(--header-h);
padding-inline: max(var(--sp-2), calc(var(--gutter) - var(--sp-2)));
}
.header__icon {
position: relative;
width: var(--tap); height: var(--tap);
display: grid; place-items: center;
background: none; border: 0; color: var(--ink);
}
.header__brand { justify-self: center; }
/* Logo. Tipografik wordmark yerine gerçek marka işareti kullanılıyor.
Yükseklikle ölçekleniyor (genişlik oranla), böylece başlık çubuğunun
yüksekliği logo dosyasına bağlı kalmıyor.
Hover: hafif koyulaşma — logo bir bağlantı, tıklanabilir olduğu belli olsun.
Gölge/parlama yok: marka işareti süslenmez. */
.header__brand { display: inline-flex; align-items: center; }
.header__logo {
display: block; width: auto; height: 26px;
transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.header__brand:hover .header__logo { opacity: 0.78; }
.header__brand:active .header__logo { transform: scale(0.98); }
.header__brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }
@media (min-width: 1024px) { .header__logo { height: 30px; } }
/* Küçültülmüş başlıkta (scroll) logo da küçülür */
.header.is-compact .header__logo { height: 22px; }
.header__actions { display: flex; align-items: center; }
.header__count {
position: absolute; inset-block-start: 6px; inset-inline-end: 4px;
min-width: 18px; height: 18px; padding-inline: 4px;
display: grid; place-items: center;
background: var(--accent); color: #fff;
border-radius: var(--radius-pill);
font-size: 10px; font-weight: var(--fw-semibold);
}
.header__desknav { display: none; }
@media (min-width: 1024px) {
.header__bar { grid-template-columns: 1fr auto 1fr; min-height: 68px; padding-inline: var(--sp-6); }
.header__bar > [data-drawer-open="nav"] { display: none; }
.header__brand { grid-column: 2; }
.header__actions { justify-self: end; }
.header__desknav {
display: flex; justify-content: center; gap: var(--sp-6);
padding-block: var(--sp-3); border-block-start: 1px solid var(--line-2);
font-size: var(--fs-1); letter-spacing: 0.02em;
}
.header__desknav a:hover { text-decoration: underline; text-underline-offset: 0.35em; }
}
/* --- Çekmece (menü / arama) ---------------------------------------------- */
.drawer { position: fixed; inset: 0; z-index: var(--z-drawer); }
.drawer[hidden] { display: none; }
.drawer::before {
content: ""; position: absolute; inset: 0;
background: rgb(28 26 25 / 0.42);
animation: fade var(--dur) var(--ease);
}
.drawer__panel {
position: absolute; inset-block: 0; inset-inline-start: 0;
width: min(86vw, 380px);
display: flex; flex-direction: column;
background: var(--surface);
animation: slideIn var(--dur) var(--ease);
overflow-y: auto;
}
.drawer--top .drawer__panel {
inset: 0 0 auto 0; width: 100%;
padding: var(--sp-4) var(--gutter) var(--sp-5);
animation: slideDown var(--dur) var(--ease);
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes slideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } }
.drawer__head {
display: flex; align-items: center; justify-content: space-between;
padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--gutter);
border-block-end: 1px solid var(--line);
position: sticky; inset-block-start: 0; background: var(--surface);
}
.drawer__toggle::after { content: ""; width: 8px; height: 8px; border-inline-end: 1.5px solid var(--ink-3); border-block-end: 1.5px solid var(--ink-3); transform: rotate(45deg); transition: transform var(--dur) var(--ease); }
.drawer__toggle[aria-expanded="true"]::after { transform: rotate(225deg); }
.drawer__toggle .drawer__count { margin-inline-start: auto; }
.drawer__count { font-size: var(--fs-0); color: var(--ink-3); font-weight: var(--fw-regular); }
.drawer__sub { padding: 0 var(--gutter) var(--sp-3); background: var(--surface-2); }
.drawer__sub[hidden] { display: none; }
.drawer__sub a { display: flex; justify-content: space-between; gap: var(--sp-3); min-height: var(--tap); align-items: center; font-size: var(--fs-1); }
.drawer__foot { margin-top: auto; padding: var(--sp-4) var(--gutter) calc(var(--sp-4) + env(safe-area-inset-bottom)); }
.search { display: flex; gap: var(--sp-2); }
.search__input { flex: 1 1 auto; }
/* --- Kategori çipleri ----------------------------------------------------- */
.chipsWrap { background: var(--surface); border-block: 1px solid var(--line-2); }
.chips { grid-auto-columns: max-content; gap: var(--sp-2); }
.chip {
display: inline-flex; align-items: center; gap: var(--sp-2);
min-height: 40px; padding-inline: var(--sp-4);
border: 1px solid var(--line); border-radius: var(--radius-pill);
font-size: var(--fs-1); white-space: nowrap;
transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip__count { font-size: var(--fs-0); color: var(--ink-3); }
/* --- Kategori sayfası ---------------------------------------------------- */
.crumbs { display: flex; flex-wrap: wrap; gap: var(--sp-2); font-size: var(--fs-0); color: var(--ink-2); padding-block: var(--sp-3); }
.crumbs a:hover { color: var(--accent); }
.crumbs span::after { content: "›"; margin-inline-start: var(--sp-2); color: var(--ink-3); }
.cathead { padding-block: var(--sp-2) var(--sp-5); }
.cathead h1 { margin-bottom: var(--sp-2); }
.cathead p { color: var(--ink-2); font-size: var(--fs-1); max-width: 62ch; }
/* Alt kategori çipleri ile araç çubuğu arası boşluk fazlaydı (sp-5) ve ikisi
aynı düzlemde duruyordu. Boşluk kısıldı, ayrım araç çubuğunun kendi
zemini ve üst çizgisiyle yapılıyor. */
.subcats { display: flex; gap: var(--sp-2); overflow-x: auto; padding-block: var(--sp-1) var(--sp-3); scrollbar-width: none; }
.subcats::-webkit-scrollbar { display: none; }
.catcopy { max-width: 72ch; padding-block: var(--sp-8) 0; }
.catcopy + .catcopy { padding-block-start: var(--sp-6); }
.catcopy__title { margin: 0 0 var(--sp-3); }
.catcopy p { color: var(--ink-2); margin: 0 0 var(--sp-3); }
.catcopy__label { margin: var(--sp-4) 0 var(--sp-2); }
.catcopy__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; column-gap: var(--sp-5); }
.catcopy__links a { display: inline-flex; align-items: center; min-height: 44px; }
/* Araç çubuğu üstteki çip şeridiyle aynı düzlemde duruyordu: zemini
--surface-2 idi, o da sayfa zemininin ta kendisi (#F5F2F0). Artık BEYAZ
zeminli, iki yanı çizgili kendi bandı; üstteki çiplerden net ayrışıyor. */
.toolbar {
position: sticky; inset-block-start: var(--header-h); z-index: var(--z-sticky);
display: flex; align-items: center; gap: var(--sp-2);
margin-inline: calc(var(--gutter) * -1);
padding: var(--sp-3) var(--gutter);
background: var(--surface);
border-block: 1px solid var(--line);
}
.toolbar__count { margin-inline-start: auto; font-size: var(--fs-0); color: var(--ink-2); }
@media (min-width: 1024px) { .toolbar { inset-block-start: 0; position: static; } }
.grid-products { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4) var(--sp-3); padding-block: var(--sp-5); }
@media (min-width: 640px) { .grid-products { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6) var(--sp-4); } }
@media (min-width: 1024px) { .grid-products { grid-template-columns: repeat(4, 1fr); } }
.pager { display: flex; justify-content: center; gap: var(--sp-2); padding-block: var(--sp-6) var(--sp-10); }
.pager a, .pager span {
min-width: var(--tap); min-height: var(--tap);
display: grid; place-items: center;
border: 1px solid var(--line); border-radius: var(--radius);
font-size: var(--fs-1);
}
.pager .is-current { background: var(--ink); color: #fff; border-color: var(--ink); }
/* Filtre panelleri */
.filters { display: grid; gap: var(--sp-5); }
.filters__group { border-block-start: 1px solid var(--line); padding-block-start: var(--sp-4); }
.filters__title { font-size: var(--fs-1); font-weight: var(--fw-semibold); margin-bottom: var(--sp-3); }
.swatches { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.swatchBtn {
display: inline-flex; align-items: center; gap: var(--sp-2);
min-height: 40px; padding: var(--sp-2) var(--sp-3);
border: 1px solid var(--line); border-radius: var(--radius-pill);
background: var(--surface); font-size: var(--fs-0);
}
.swatchBtn[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: #fff; }
.swatchBtn i { width: 16px; height: 16px; border-radius: var(--radius-pill); border: 1px solid rgb(0 0 0 / 0.12); }
.checks { display: grid; gap: var(--sp-2); }
.checks label { display: flex; align-items: center; gap: var(--sp-3); min-height: 40px; font-size: var(--fs-1); }
.checks .drawer__count { margin-inline-start: auto; }
/* --- Footer -------------------------------------------------------------- */
/* Üst dış boşluk KALDIRILDI: bordo kapanış bandı ile beyaz footer arasında
sayfa zemini rengi (krem) bir şerit olarak görünüyordu ve bozuk duruyordu.
Footer artık kendinden önceki bölüme yapışıyor. */
.footer { padding-block: var(--sp-8) var(--sp-6); background: var(--surface); border-block-start: 1px solid var(--line); }
/* Mobilde sol altta çark düğmesi, sağ altta WhatsApp/başa dön yüzüyor: son satır (telif) altlarında kalmasın. */
@media (max-width: 1023px) { .footer { padding-block-end: calc(var(--sp-16) + var(--sp-4) + env(safe-area-inset-bottom)); } }
.footer__top { text-align: center; margin-bottom: var(--sp-6); }
/* Footer koyu zeminde: tek renk logo, currentColor ile beyaz.
SVG dosyası currentColor kullandığı için içinde renk miras almaz —
bu yüzden maske ile boyanıyor; böylece tek dosya her zeminde çalışır. */
.footer__brand { display: inline-block; }
.footer__logo {
display: block; width: auto; height: 32px; margin: 0 auto var(--sp-2);
transition: opacity var(--dur) var(--ease);
}
.footer__brand:hover .footer__logo { opacity: 0.75; }
.footer__brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }
.footer__help {
display: grid; justify-items: center; gap: 4px;
text-align: center; padding-block: var(--sp-5);
border-block: 1px solid var(--line-2); margin-bottom: var(--sp-4);
}
.footer__help > * { margin: 0; }
.footer__wa { display: block; font-size: var(--fs-3); font-weight: var(--fw-semibold); }
.footer__acc { margin-bottom: var(--sp-6); }
.footer__links { display: grid; gap: var(--sp-1); }
.footer__links a { display: block; min-height: 36px; display: flex; align-items: center; font-size: var(--fs-1); }
/* Sosyal hesaplar: ince çerçeveli daireler, ödeme şeridinin üstünde */
.footer__social { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding-block: var(--sp-4); border-block-start: 1px solid var(--line-2); }
.footer__socialList { display: flex; gap: var(--sp-3); list-style: none; margin: 0; padding: 0; }
.footer__socialBtn {
position: relative; display: grid; place-items: center;
width: 40px; height: 40px; border-radius: 50%;
border: var(--hairline) solid var(--line); color: var(--ink-2); background: var(--surface);
transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.footer__socialBtn::after { content: ""; position: absolute; inset: -3px; } /* dokunma alanı 46px */
.footer__socialBtn:hover { color: var(--brand-500); border-color: var(--brand-300); transform: translateY(-1px); }
.footer__pay { display: flex; flex-direction: column; gap: var(--sp-2); align-items: center; padding-block: var(--sp-4); border-block-start: 1px solid var(--line-2); }
.footer__paylogos { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; }
.footer__cards { justify-content: center; }
.paychip { display: inline-grid; place-items: center; height: 30px; padding-inline: var(--sp-3); background: #fff; border: 1px solid var(--line); border-radius: 4px; font-size: var(--fs-0); font-weight: var(--fw-medium); color: var(--ink-2); white-space: nowrap; }
.footer__legal { text-align: center; margin-top: var(--sp-3); }
@media (min-width: 900px) {
.footer__acc { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-8); border: 0; }
.footer__acc .acc__item { border: 0; }
.footer__acc .acc__btn { pointer-events: none; padding-block: 0 var(--sp-3); font-size: var(--fs-1); text-transform: uppercase; letter-spacing: var(--ls-eyebrow); color: var(--ink-2); }
.footer__acc .acc__btn::after { content: ""; }
.footer__acc .acc__panel { display: block !important; padding: 0; }
}
/* --- Doküman / rehber sayfaları ------------------------------------------ */
.doc { max-width: var(--container-narrow); }
.doc__title { margin-block: var(--sp-2) var(--sp-3); }
.doc__lead { font-size: var(--fs-3); color: var(--ink-2); margin-bottom: var(--sp-8); }
.doc__body h3 { margin-block: var(--sp-6) var(--sp-2); }
.doc__body p { margin-bottom: var(--sp-4); }
.doc__body ul { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-4); padding-inline-start: var(--sp-5); list-style: disc; }
.doc__body a { text-decoration: underline; text-decoration-color: var(--brand-300); }
.doc__body a:hover { text-decoration-color: currentColor; }
.doc__body h2 { font-size: var(--fs-4); margin-block: var(--sp-10) var(--sp-3); scroll-margin-top: var(--sp-16); }
.doc__body h3 { scroll-margin-top: var(--sp-16); }
.doc__body .guideStep__name { margin-block: 0 var(--sp-2); }
.doc__body .guideStep p { margin-bottom: 0; }
.doc__cover img { aspect-ratio: 4 / 3; }
.doc__byline { font-size: var(--fs-1); margin: calc(-1 * var(--sp-5)) 0 var(--sp-6); }
.doc__cover { margin: 0 0 var(--sp-8); }
.doc__cover img { width: 100%; object-fit: cover; border-radius: var(--radius); }
.doc__cover figcaption { font-size: var(--fs-1); margin-top: var(--sp-2); }
.doc__note { padding: var(--sp-4); background: var(--surface); border: var(--hairline) solid var(--line); border-radius: var(--radius); font-size: var(--fs-1); color: var(--ink-2); margin: 0 0 var(--sp-5); }
.doc__products { margin-block: var(--sp-4) var(--sp-8); min-width: 0; }
.doc__products .rail { padding-inline: 0; }
.guideList { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.guideList__item { margin: 0; border-block-start: var(--hairline) solid var(--line); }
.guideList__item a { display: grid; gap: var(--sp-1); padding-block: var(--sp-4); min-height: 44px; }
.guideList__title { font-weight: var(--fw-medium, 500); color: var(--ink); }
.guideList__lead { font-size: var(--fs-1); }
.faq__more { margin-block-start: var(--sp-8); }
.doc__updated { display: block; margin-top: var(--sp-8); padding-block-start: var(--sp-4); border-block-start: var(--hairline) solid var(--line); }
mark.todo { background: var(--warning-bg); color: var(--warning); padding: 1px 6px; border-radius: var(--radius-sm); font-size: var(--fs-1); }
.guideSteps { display: grid; gap: var(--sp-5); margin-block: var(--sp-6) var(--sp-10); }
.guideStep { display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--sp-3); padding-block-start: var(--sp-4); border-block-start: var(--hairline) solid var(--line); }
.guideStep__no { color: var(--ink-3); }
.guideStep__name { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.tableWrap { overflow-x: auto; margin-block: var(--sp-6) var(--sp-10); }
.specTable { width: 100%; border-collapse: collapse; font-size: var(--fs-1); }
.specTable th, .specTable td { text-align: start; padding: var(--sp-3) var(--sp-3) var(--sp-3) 0; border-block-end: var(--hairline) solid var(--line); vertical-align: top; }
.specTable th { font-family: var(--font-mono); font-weight: var(--fw-regular); white-space: nowrap; color: var(--ink); }
.specTable__tag { white-space: nowrap; color: var(--ink-3); }
.specTable thead th { white-space: normal; color: var(--ink-3); }
.doc__body .specTable th[scope="row"] { font-family: var(--font-num); font-weight: var(--fw-medium); }
.tips { padding: var(--sp-5); background: var(--surface); border: var(--hairline) solid var(--line); border-radius: var(--radius); }
.tips__list { display: grid; gap: var(--sp-3); margin-top: var(--sp-4); }
.tips__list li { padding-inline-start: var(--sp-5); position: relative; font-size: var(--fs-1); color: var(--ink-2); }
.tips__list li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.6em; width: 8px; height: 1px; background: var(--accent); }
.docNext { margin-top: var(--sp-10); padding-block-start: var(--sp-5); border-block-start: var(--hairline) solid var(--line); }
.docNext ul { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-3); }
.docNext a { text-decoration: underline; text-decoration-color: var(--line); }
.contact { display: grid; gap: var(--sp-5); margin-bottom: var(--sp-8); }
.contact > div { padding-block-start: var(--sp-4); border-block-start: var(--hairline) solid var(--line); }
.contact dd { margin: var(--sp-1) 0 0; font-size: var(--fs-2); }
/* --- Ölçü şeması ---------------------------------------------------------- */
.sizeFig { margin: var(--sp-5) 0 0; }
.sizeFig svg { width: 100%; max-width: 280px; height: auto; }
.sizeFig__ref line { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 3; }
.sizeFig__ref circle { fill: none; stroke: var(--ink-3); stroke-width: 1; }
.sizeFig__ref text, .sizeFig__scarf text {
font-family: var(--font-mono); font-size: 9px; fill: var(--ink-2); letter-spacing: 0.04em;
}
.sizeFig__scarf rect { fill: var(--brand-100); stroke: var(--brand-400); stroke-width: 1; }
.sizeFig__ground { stroke: var(--line); stroke-width: 1; }
.sizeFig figcaption { margin-top: var(--sp-2); }
/* --- Kategori: araç çubuğu ve aktif filtreler ---------------------------- */
/* Düğmeler beyaz zeminde beyaz kalmasın: kendi kenarlığıyla dursun,
.btn--quiet'ın şeffaf zeminini eziyoruz. */
.toolbar__btn {
display: inline-flex; align-items: center; gap: var(--sp-2);
--btn-bg: var(--surface); --btn-fg: var(--ink); --btn-bd: var(--line);
background: var(--surface); color: var(--ink); border-color: var(--line);
}
.toolbar__btn:hover { border-color: var(--ink); }
.toolbar__btn.is-active { background: var(--accent); color: #fff; border-color: var(--accent); }
.activeFilters {
display: flex; flex-wrap: wrap; gap: var(--sp-2);
padding-block: var(--sp-3) 0;
}
.activeChip {
display: inline-flex; align-items: center; gap: var(--sp-2);
min-height: 32px; padding-inline: var(--sp-3);
background: var(--brand-50); color: var(--brand-700);
border: var(--hairline) solid var(--brand-100);
border-radius: var(--radius-pill);
font-size: var(--fs-0);
transition: background-color var(--dur) var(--ease);
}
.activeChip:hover { background: var(--brand-100); color: var(--brand-700); }
.activeChip svg { opacity: 0.6; }
.activeFilters__clear {
align-self: center; font-size: var(--fs-0); color: var(--ink-2);
text-decoration: underline; text-decoration-color: var(--line); padding-inline: var(--sp-1);
}
.activeFilters__clear:hover { color: var(--danger); }
.filters__price { display: flex; align-items: flex-end; gap: var(--sp-2); }
.filters__price .field { flex: 1 1 0; margin: 0; }
.filters__priceDash { padding-block-end: var(--sp-3); color: var(--ink-3); }
/* Sıralama çekmecesi: seçili olan işaretli */
.sortList { display: grid; gap: var(--sp-1); margin-top: var(--sp-3); }
.sortList a {
display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
min-height: var(--tap); padding-inline: var(--sp-4);
border: var(--hairline) solid var(--line); border-radius: var(--radius);
font-size: var(--fs-1);
}
.sortList a.is-current { border-color: var(--ink); font-weight: var(--fw-medium); }
.sortList a.is-current::after { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: url('data:image/svg+xml;utf8,') center / contain no-repeat; mask: url('data:image/svg+xml;utf8,') center / contain no-repeat; }
/* home.css */
/* ==========================================================================
Anasayfa bölümleri — dokuma hero, spesifikasyon şeridi, kampanya,
renk aileleri, kumaş keşfi, renk sözü
========================================================================== */
/* --- Dokuma Duvarı hero --------------------------------------------------- */
.wHero {
position: relative;
min-height: min(86svh, 720px);
display: grid;
align-items: end;
overflow: hidden;
background: var(--ink);
isolation: isolate;
}
.wHero__weave {
position: absolute;
inset: -6% 0;
z-index: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3px;
}
.wHero__col { overflow: hidden; }
.wHero__strip { display: grid; gap: 3px; will-change: transform; }
.wHero__tile { margin: 0; aspect-ratio: var(--ratio-product); background: var(--surface-3); }
/* Görsel gelene kadar ürünün renk grubundan yumuşak ton: boş gri karo yerine şalın kendi rengi */
.wHero__tile[style] { background: color-mix(in srgb, var(--tile) 45%, var(--surface-3)); }
.wHero__tile img { width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: no-preference) {
.wHero__col[data-dir="up"] .wHero__strip { animation: weave-up 56s linear infinite; }
.wHero__col[data-dir="down"] .wHero__strip { animation: weave-up 64s linear infinite reverse; }
@keyframes weave-up {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(0, -50%, 0); }
}
}
.wHero__veil {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(to top,
rgb(26 22 20 / 0.97) 0%,
rgb(26 22 20 / 0.95) 26%,
rgb(26 22 20 / 0.74) 44%,
rgb(26 22 20 / 0.30) 68%,
rgb(26 22 20 / 0.42) 100%);
}
.wHero__body {
position: relative;
z-index: 2;
padding-block: var(--sp-16) var(--sp-10);
color: var(--ink-inverse);
background: linear-gradient(to top,
rgb(26 22 20 / 0.97) 0%,
rgb(26 22 20 / 0.92) 58%,
rgb(26 22 20 / 0.55) 82%,
transparent 100%);
}
.wHero__stats { margin-bottom: var(--sp-4); }
/* Satırın tamamı sayı yazı tipinde: yalnız sayılar DM Sans, "Şal ve eşarp" DM Mono kalınca karışık duruyordu. */
.wHero__stats, .wHero__stats .counter { font-family: var(--font-num); letter-spacing: 0.02em; }
/* Hero başlığı 14ch ile iki-üç kısa satıra kırılıyor ve çok büyük: orada
sıkı satır aralığı doğru duruyor, gövde başlıklarındaki 1.16 gevşek kalır. */
.wHero__title { font-size: var(--fs-6); line-height: var(--lh-tight); color: var(--ink-inverse); max-width: 14ch; margin-bottom: var(--sp-4); }
.wHero__text { color: rgb(251 248 246 / 0.82); max-width: 42ch; margin-bottom: var(--sp-6); }
.wHero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
@media (min-width: 720px) {
.wHero__weave { grid-template-columns: repeat(5, 1fr); }
.wHero__body { padding-block: var(--sp-16) var(--sp-12); }
}
@media (max-width: 719px) {
.wHero__col:nth-child(n+4) { display: none; }
}
.btn--onDark { --btn-bg: transparent; --btn-fg: var(--ink-inverse); --btn-bd: rgb(251 248 246 / 0.5); }
.btn--onDark:hover { --btn-bg: rgb(251 248 246 / 0.12); opacity: 1; }
/* --- Spesifikasyon şeridi ------------------------------------------------- */
.specStrip { background: var(--surface); border-block-end: var(--hairline) solid var(--line); }
.specStrip__list { display: grid; grid-template-columns: repeat(2, 1fr); }
/* İkon + metin: ikon üstte değil YANDA, çünkü şerit iki satırlık (etiket+değer)
ve ikon üstte olsa satır yüksekliği iki katına çıkıyor. */
.specStrip__list li {
display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--sp-3);
padding: var(--sp-4) var(--sp-2) var(--sp-4) 0; font-size: var(--fs-1);
}
.specStrip__text { display: grid; gap: 2px; min-width: 0; }
.specStrip__icon { display: grid; place-items: center; color: var(--ink-3); }
.specStrip__icon svg { display: block; }
.specStrip__list li + li { border-inline-start: var(--hairline) solid var(--line-2); padding-inline-start: var(--sp-4); }
.specStrip__list li:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; }
.specStrip__list li:nth-child(-n+2) { border-block-end: var(--hairline) solid var(--line-2); }
.specStrip__list b { font-weight: var(--fw-medium); }
@media (min-width: 720px) {
.specStrip__list { grid-template-columns: repeat(4, 1fr); }
.specStrip__list li:nth-child(-n+2) { border-block-end: 0; }
.specStrip__list li:nth-child(3) { border-inline-start: var(--hairline) solid var(--line-2); padding-inline-start: var(--sp-4); }
}
/* --- Şal Kutusu tanıtımı -------------------------------------------------- */
.bundleTeaser {
background: var(--brand-700);
color: var(--ink-inverse);
padding-block: var(--sp-section);
position: relative;
overflow: hidden;
}
.bundleTeaser::before {
content: "";
position: absolute; inset: 0;
background-image: repeating-linear-gradient(to right, rgb(251 248 246 / 0.07) 0 1px, transparent 1px 4.5rem);
pointer-events: none;
}
.bundleTeaser__inner { position: relative; display: grid; gap: var(--sp-8); }
.bundleTeaser__title { font-size: var(--fs-5); color: var(--ink-inverse); margin-block: var(--sp-2) var(--sp-3); }
.bundleTeaser__text { color: rgb(251 248 246 / 0.82); max-width: 42ch; margin-bottom: var(--sp-4); }
.bundleTeaser__spec { margin-bottom: var(--sp-6); }
.bundleTeaser__tray { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); }
.bslot {
position: relative; aspect-ratio: var(--ratio-product);
border-radius: var(--radius); overflow: hidden;
background: rgb(251 248 246 / 0.08);
box-shadow: inset 0 0 0 1px rgb(251 248 246 / 0.18);
}
.bslot img { width: 100%; height: 100%; object-fit: cover; }
.bslot.is-empty {
display: grid; place-items: center;
border: 1px dashed rgb(246 238 220 / 0.7);
box-shadow: none;
background: rgb(255 255 255 / 0.08);
}
.bslot__hint { font-family: var(--font-mono); font-size: var(--fs-0); letter-spacing: var(--ls-mono); color: var(--thread-100); text-align: center; }
@media (prefers-reduced-motion: no-preference) {
.bslot.is-empty { animation: slot-breathe 2.6s var(--ease) infinite; }
@keyframes slot-breathe {
0%, 100% { border-color: rgb(246 238 220 / 0.5); background: rgb(255 255 255 / 0.05); }
50% { border-color: rgb(246 238 220 / 0.95); background: rgb(255 255 255 / 0.14); }
}
}
/* Açık zeminde altın buton (tepsi, sepet) */
.btn--thread { --btn-bg: var(--thread-500); --btn-fg: #1A1614; --btn-bd: transparent; font-weight: var(--fw-semibold); }
.btn--thread:hover { --btn-bg: var(--thread-300); opacity: 1; }
/* Bordo zeminde beyaz buton — altın orada okunmuyor */
.btn--onBrand { --btn-bg: #FFFFFF; --btn-fg: var(--brand-700); --btn-bd: transparent; font-weight: var(--fw-semibold); }
.btn--onBrand:hover { --btn-bg: var(--thread-100); opacity: 1; }
@media (min-width: 880px) {
.bundleTeaser__inner { grid-template-columns: 1fr 1.15fr; align-items: center; gap: var(--sp-12); }
}
/* --- Renk aileleri -------------------------------------------------------- */
.colorFam { background: var(--surface); }
.colorFam__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
@media (min-width: 620px) { .colorFam__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 980px) { .colorFam__grid { grid-template-columns: repeat(5, 1fr); } }
.colorTile { display: grid; gap: var(--sp-2); }
.colorTile__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-3); }
/* Ürün fotoğrafları dikey, kutu yatay: ortadan kırpınca gövde görünüyor, şal
(baş ve omuz) kadrajın dışında kalıyordu. Kadraj üst kısma kaydırıldı. */
.colorTile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.colorTile:hover .colorTile__media img { transform: scale(1.04); }
.colorTile__row { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-1); }
.colorTile__dot { width: 12px; height: 12px; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px rgb(26 22 20 / 0.14); flex: 0 0 auto; }
.colorTile__name { font-weight: var(--fw-medium); }
.colorTile__count { margin-inline-start: auto; font-size: var(--fs-0); color: var(--ink-3); }
/* --- Kumaş keşfi ---------------------------------------------------------- */
.fabricEx { background: var(--surface-2); }
.fabricEx__rail { grid-auto-columns: minmax(58%, 1fr); }
@media (min-width: 640px) { .fabricEx__rail { grid-auto-columns: minmax(30%, 1fr); } }
@media (min-width: 1024px) { .fabricEx__rail { grid-auto-columns: minmax(20%, 1fr); } }
.fabricCard { display: grid; gap: var(--sp-2); }
.fabricCard__media { display: block; aspect-ratio: var(--ratio-product); overflow: hidden; background: var(--surface-3); }
.fabricCard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.fabricCard:hover .fabricCard__media img { transform: scale(1.04); }
.fabricCard__body { display: grid; gap: 2px; }
.fabricCard__name { font-family: var(--font-display); font-size: var(--fs-3); letter-spacing: var(--ls-display); }
/* --- Renk sözü ------------------------------------------------------------ */
.promise { background: var(--surface); }
.promise__title { margin-block: var(--sp-2) var(--sp-3); max-width: 24ch; }
.promise__lead { margin-bottom: var(--sp-8); max-width: 46ch; }
.promise__list { display: grid; gap: var(--sp-6); }
.promise__item { display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--sp-3); padding-block-start: var(--sp-4); border-block-start: var(--hairline) solid var(--line); }
.promise__item h3 { margin-bottom: var(--sp-1); }
/* Maddeler sıralı değil: numara/işaret sütunu yok (numaralandırma yalnız gerçek sırada). */
.promise__item--plain { grid-template-columns: 1fr; }
/* ==========================================================================
Akan müşteri yorumu şeridi
Gerçek, onaylı yorumlar akıyor; her karo ürününe bağlı. Üstteki duyuru
şeridiyle aynı kayma dili (marquee), ama kart ölçeğinde ve tıklanabilir.
========================================================================== */
.revBand { padding-block: var(--sp-10); background: var(--surface); border-block: var(--hairline) solid var(--line); overflow: hidden; }
.revBand__head { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.revBand__title { font-size: var(--fs-4); }
.revBand__lead { max-width: 52ch; font-size: var(--fs-1); }
.revBand__lead b { color: var(--ink); }
/* Hover'da kart 2px yukarı kalkıyor ve üst kenarlığı viewport'un
overflow:hidden'ı tarafından kırpılıyordu — çizgi yarım görünüyordu.
Şeride dikey pay verildi; kalkan kart pay içinde kalıyor. */
.revBand__viewport { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.revBand__track { display: flex; gap: var(--sp-4); width: max-content; padding-block: 6px; animation: revScroll 62s linear infinite; }
.revBand__viewport:hover .revBand__track,
.revBand__viewport:focus-within .revBand__track { animation-play-state: paused; }
@keyframes revScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.revCard {
flex: 0 0 auto; width: 17.5rem;
display: grid; grid-template-rows: 1fr auto auto;
padding: var(--sp-4) var(--sp-4) 0;
background: var(--bg); border: var(--hairline) solid var(--line-2); border-radius: var(--radius);
transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
/* Hover: kenarlık bordoya döner, gölge yükselme hissini taşır. Yalnız
kenar rengi değişmesi zayıf kalıyordu. */
.revCard:hover {
border-color: var(--accent);
transform: translateY(-3px);
box-shadow: 0 6px 20px rgb(26 22 20 / 0.10);
}
.revCard:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.revCard__quote { display: grid; gap: var(--sp-1); align-content: start; }
.revCard__mark { font-family: var(--font-display); font-size: var(--fs-4); line-height: 0.5; color: var(--brand-300); }
.revCard__text { font-size: var(--fs-1); line-height: 1.5; color: var(--ink); }
/* Doğrulama: rozet değil, isimle birlikte küçük tik + tek satır etiket */
.revCard__who {
display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
padding-block: var(--sp-3);
font-size: var(--fs-0);
}
.revCard__tick { flex: 0 0 auto; color: var(--success); }
.revCard__who b { font-weight: var(--fw-medium); }
.revCard__vLabel {
font-family: var(--font-mono); letter-spacing: var(--ls-mono); color: var(--ink-3);
}
/* Ürün satırı: karonun asıl işi buraya götürmek */
.revCard__prod {
display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-3);
margin-inline: calc(var(--sp-4) * -1);
padding: var(--sp-3) var(--sp-4);
border-block-start: var(--hairline) solid var(--line-2);
background: var(--surface);
border-end-start-radius: var(--radius); border-end-end-radius: var(--radius);
}
.revCard__img { border-radius: var(--radius-sm); object-fit: cover; background: var(--surface-3); }
.revCard__prodBody { display: grid; gap: 1px; min-width: 0; }
.revCard__prodName {
font-size: var(--fs-1); font-weight: var(--fw-medium); color: var(--ink);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.revCard__prodPrice { font-size: var(--fs-0); color: var(--price-sale); }
.revCard__arrow { flex: 0 0 auto; color: var(--ink-3); transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); }
.revCard:hover .revCard__arrow { color: var(--accent); transform: translateX(3px); }
/* Kayma bir süs değil, ama hareket istemeyen kullanıcıda şerit yatay
kaydırmalı sakin bir rafa dönüşüyor — içerik kaybolmuyor. */
@media (prefers-reduced-motion: reduce) {
.revBand__track { animation: none; width: auto; overflow-x: auto; padding-inline: var(--gutter); }
.revBand__viewport { -webkit-mask: none; mask: none; }
.revCard:nth-child(n+15) { display: none; }
}
/* ==========================================================================
Kapanış bandı — sayfanın sonundaki tek net eylem
========================================================================== */
.closeBand { padding-block: var(--sp-10); background: var(--brand-700); color: var(--ink-inverse); position: relative; overflow: hidden; }
.closeBand::before {
content: ""; position: absolute; inset: 0;
background-image: repeating-linear-gradient(to right, rgb(251 248 246 / 0.06) 0 1px, transparent 1px 4.5rem);
pointer-events: none;
}
.closeBand__inner { position: relative; display: grid; gap: var(--sp-6); }
.closeBand__text { display: grid; gap: var(--sp-3); }
.closeBand .spec-label { color: var(--thread-100); }
.closeBand__title { font-size: var(--fs-5); color: var(--ink-inverse); max-width: 24ch; }
.closeBand__lead { color: rgb(251 248 246 / 0.84); max-width: 48ch; font-size: var(--fs-1); }
.closeBand__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); margin-block-start: var(--sp-2); }
/* İkon üstte, altında başlık ve alt etiket: bantta yer bol, ikon yanda
olsa üç kolon daralıp metin sarkardı. */
.closeBand__facts li {
display: grid; gap: 2px;
padding-inline-start: var(--sp-3);
border-inline-start: 2px solid var(--thread-500);
}
.closeBand__icon { color: var(--thread-300); margin-block-end: 2px; }
.closeBand__icon svg { display: block; }
.closeBand__facts b { font-size: var(--fs-1); font-weight: var(--fw-medium); }
.closeBand__facts span { font-family: var(--font-mono); font-size: var(--fs-0); letter-spacing: var(--ls-mono); color: rgb(251 248 246 / 0.66); }
.closeBand__actions { display: grid; gap: var(--sp-3); align-content: start; }
/* Bordo zeminde bordo düğme kayboluyordu: birincil eylem açık zeminli (üstteki Şal Kutusu bandıyla aynı). */
.closeBand__actions .btn--accent { --btn-bg: var(--ink-inverse); --btn-fg: var(--brand-700); font-weight: var(--fw-semibold); }
.closeBand__actions .btn--accent:hover { --btn-bg: #fff; --btn-fg: var(--brand-800); }
.closeBand__actions .btn:not(.btn--accent) { background: transparent; border-color: rgb(251 248 246 / 0.4); color: var(--ink-inverse); }
.closeBand__actions .btn:not(.btn--accent):hover { background: rgb(251 248 246 / 0.1); border-color: var(--ink-inverse); }
/* Bordo zeminde bağlantı. base.css'teki `a:hover { color: var(--accent) }`
bordo zemin üstüne bordo yazı yapıyordu. Alt çizgi yok; hover yalnız
yazıyı beyaza açıyor. */
.closeBand__help {
display: inline-block; font-size: var(--fs-0); color: var(--thread-100); text-align: center;
transition: color var(--dur-fast) var(--ease);
}
.closeBand__help:hover { color: #fff; }
.closeBand__help:focus-visible { outline: 2px solid var(--thread-300); outline-offset: 3px; }
@media (min-width: 900px) {
.closeBand__inner { grid-template-columns: 1.4fr 0.8fr; gap: var(--sp-10); align-items: center; }
}
/* --- Hikaye şeridi: telefonda üstteki yuvarlak kısayollar -----------------
Kaynakta ve Instagram'da alışılmış kalıp; menüyü açmadan ana bölümlere tek dokunuş.
Bizim dilimize uyarlandı: altın halka değil ince çözgü halkası + mono etiket,
yalnız kampanya kısayolu bordo halka alır. Masaüstünde gizli (menü zaten açık). */
.stories { display: block; border-block-end: var(--hairline) solid var(--line-2); background: var(--surface); }
.stories__list {
display: flex; gap: var(--sp-4); list-style: none; margin: 0;
padding: var(--sp-3) var(--gutter);
overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
scroll-snap-type: x proximity;
/* Yapışma kenar boşluğunu da saysın: yoksa ilk halka ekranın soluna dayanıyordu. */
scroll-padding-inline: var(--gutter);
}
.stories__list::-webkit-scrollbar { display: none; }
.stories__item { flex: 0 0 auto; scroll-snap-align: start; margin: 0; }
.stories__link { display: grid; justify-items: center; gap: 6px; width: 72px; color: var(--ink-2); }
/* Halka ile görsel AYNI daire olmalı. Önceki hâlde ring grid + yüzde yükseklikti;
Safari yüzdeyi çözemeyip görseli kendi oranında (oval) bırakıyor, çizgi ile görsel
birbirinden kayıyordu (kullanıcı ekran görüntüsü, 20.09.2026). Artık ölçü sabit:
kutu modeli border-box, görsel kare ve kırpılmış. */
.stories__ring {
display: block; box-sizing: border-box;
width: 66px; height: 66px; border-radius: 50%; overflow: hidden;
border: 3px solid var(--surface); background: var(--surface-3);
box-shadow: 0 0 0 1px var(--line);
transition: box-shadow var(--dur) var(--ease);
}
.stories__ring img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; display: block; }
.stories__link.is-accent .stories__ring { box-shadow: 0 0 0 2px var(--accent); }
.stories__link:hover .stories__ring,
.stories__link:focus-visible .stories__ring { box-shadow: 0 0 0 2px var(--brand-300); }
.stories__label {
/* mono + harf aralığı 72px'lik sütuna sığmıyordu ("…ÖDE" diye kesiliyordu) */
font-family: var(--font-body); letter-spacing: 0; text-transform: none;
font-size: 11px; line-height: 1.2; text-align: center; color: var(--ink-2);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (min-width: 900px) { .stories { display: none; } }
@media (prefers-reduced-motion: reduce) { .stories__ring { transition: none; } }
/* box.css */
/* ==========================================================================
Şal Kutusu — kurucu sayfa + sabit tepsi
========================================================================== */
/* --- Sayfa başı ---------------------------------------------------------- */
.boxHead {
background: var(--brand-700);
color: var(--ink-inverse);
padding-block: var(--sp-10) var(--sp-8);
position: relative;
overflow: hidden;
}
.boxHead::before {
content: "";
position: absolute; inset: 0;
background-image: repeating-linear-gradient(to right, rgb(251 248 246 / 0.07) 0 1px, transparent 1px 4.5rem);
}
.boxHead > .container { position: relative; }
.boxHead .spec-label { color: var(--thread-100); }
.boxHead__title { font-size: var(--fs-5); color: var(--ink-inverse); margin-block: var(--sp-2) var(--sp-3); }
.boxHead__text { color: rgb(251 248 246 / 0.82); max-width: 46ch; margin-bottom: var(--sp-5); }
.boxHead__steps { color: rgb(251 248 246 / 0.7); counter-reset: s; }
.boxHead__steps li { counter-increment: s; }
.boxHead__steps li::after { content: none; }
/* --- Seçim alanı --------------------------------------------------------- */
.boxPick { padding-block: var(--sp-6) calc(var(--sp-16) + 140px); }
.boxPick__bar {
flex-wrap: wrap;
position: sticky;
inset-block-start: var(--header-h);
z-index: var(--z-sticky);
display: flex; align-items: center; gap: var(--sp-3);
padding-block: var(--sp-3);
background: var(--surface-2);
border-block-end: var(--hairline) solid var(--line);
}
.boxPick__filters { display: flex; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none; flex: 1 1 100%; min-width: 0; }
@media (min-width: 720px) { .boxPick__filters { flex: 0 1 auto; } }
.boxPick__filters::-webkit-scrollbar { display: none; }
/* MOBİL DÜZELTME: sayaç `margin-inline-start:auto` ile çip şeridinin sağına
yapışıyordu; 375px'te şerit kayarken sayacın üstüne biniyordu. Dar ekranda
sayaç kendi satırına iniyor, geniş ekranda sağda kalıyor. */
.boxPick__count { white-space: nowrap; color: var(--ink-3); }
@media (min-width: 720px) { .boxPick__count { margin-inline-start: auto; } }
.chip--btn { background: var(--surface); border-color: var(--ink); font-weight: var(--fw-medium); }
.chip--swatch { gap: var(--sp-2); }
.chip--swatch i { width: 12px; height: 12px; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px rgb(26 22 20 / 0.14); }
.chip--swatch.is-on { background: var(--ink); color: var(--ink-inverse); border-color: var(--ink); }
.boxPick__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--sp-4) var(--sp-3);
padding-block: var(--sp-5);
}
@media (min-width: 640px) { .boxPick__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .boxPick__grid { grid-template-columns: repeat(4, 1fr); } }
.boxPick__more { display: flex; justify-content: center; padding-block: var(--sp-4); }
/* --- Seçim kartı --------------------------------------------------------- */
.boxCard { position: relative; display: grid; gap: var(--sp-2); container-type: inline-size; container-name: boxcard; }
.boxCard__media {
position: relative; overflow: hidden; border-radius: var(--radius);
aspect-ratio: var(--ratio-product); background: var(--surface-3); cursor: pointer;
}
.boxCard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.boxCard:hover .boxCard__media img { transform: scale(1.03); }
.boxCard__add {
position: absolute; inset-block-end: var(--sp-2); inset-inline-end: var(--sp-2);
width: 44px; height: 44px; display: grid; place-items: center; /* dokunma hedefi ≥44 */
background: var(--surface); color: var(--ink);
border: var(--hairline) solid var(--line); border-radius: var(--radius-pill);
box-shadow: var(--shadow-lift);
transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.boxCard__add:hover { background: var(--ink); color: var(--ink-inverse); }
.boxCard__chosen {
position: absolute; inset-block-start: var(--sp-2); inset-inline-start: var(--sp-2);
padding: 3px var(--sp-2);
background: var(--brand-500); color: #fff;
font-family: var(--font-mono); font-size: var(--fs-0); letter-spacing: var(--ls-mono);
border-radius: var(--radius-sm);
opacity: 0; transform: translateY(-4px);
transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.boxCard.is-chosen .boxCard__chosen { opacity: 1; transform: none; }
.boxCard.is-chosen .boxCard__media { box-shadow: inset 0 0 0 2px var(--brand-500); }
.boxCard.is-chosen .boxCard__add { background: var(--brand-500); color: #fff; border-color: var(--brand-500); transform: rotate(45deg); }
/* `
` miras boşluğu: kart gövdesindeki gap'i aşıyordu (aynı hata) */ /* Ürün kartının üst etiketiyle AYNI stil (küçük harf, dar aralık): büyük harf + geniş aralıkla telefonda "VUAL İPEK · KUM TA…" diye kesiliyordu. */ .boxCard__meta { margin: 0; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: none; letter-spacing: 0; } /* Yan yana kartlar hizalı (19.09.2026): etiket tek satır, ad her zaman tam 2 satırlık yer; fiyat dibe yaslanır. Ad 3. satırın üst kenarını da gösteriyordu (başlık boşluğu miras) — yükseklik 2 satıra sabit. */ .boxCard { grid-template-rows: auto auto auto 1fr; } .boxCard__title { margin: 0; font-size: var(--fs-1); font-weight: var(--fw-medium); line-height: var(--lh-snug); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: calc(2em * var(--lh-snug)); } .boxCard__price { margin: 0; align-self: end; font-size: var(--fs-1); font-weight: var(--fw-medium); } /* --- Sabit tepsi --------------------------------------------------------- */ .tray { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: var(--z-sticky); background: var(--surface); border-block-start: var(--hairline) solid var(--line); box-shadow: var(--shadow-sheet); padding-block-end: env(safe-area-inset-bottom); overflow: hidden; } .tray__inner { display: grid; gap: var(--sp-3); padding-block: var(--sp-3); } .tray__grip { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--sp-3); width: 100%; padding: 0; background: none; border: 0; text-align: start; } .tray__status { display: grid; gap: 2px; } .tray__headline { font-size: var(--fs-1); font-weight: var(--fw-medium); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .tray__chev { width: 10px; height: 10px; border-inline-end: 1.5px solid var(--ink-3); border-block-start: 1.5px solid var(--ink-3); transform: rotate(-45deg); transition: transform var(--dur) var(--ease); } .tray__grip[aria-expanded="true"] .tray__chev { transform: rotate(135deg); } .tray__meter { grid-column: 1 / -1; height: 4px; border-radius: var(--radius-pill); background: var(--line-2); overflow: hidden; } .tray__meterFill { display: block; height: 100%; width: 0; background: var(--ink); transition: width var(--dur-slow) var(--ease), background-color var(--dur) var(--ease); } .tray__slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); } .tslot { position: relative; aspect-ratio: var(--ratio-square); border-radius: var(--radius); overflow: hidden; background: var(--surface-3); display: grid; place-items: center; } .tslot.is-empty { background: transparent; border: 1px dashed var(--line); } .tslot__num { color: var(--ink-3); } .tslot img { width: 100%; height: 100%; object-fit: cover; } .tslot__x { position: absolute; inset-block-start: 3px; inset-inline-end: 3px; width: 22px; height: 22px; display: grid; place-items: center; background: rgb(26 22 20 / 0.72); color: #fff; border: 0; border-radius: var(--radius-pill); } .tslot__gift { position: absolute; inset-block-end: 0; inset-inline: 0; padding-block: 2px; text-align: center; background: var(--thread-500); color: #1A1614; font-size: 9px; letter-spacing: 0.08em; } .tslot.is-free { box-shadow: inset 0 0 0 2px var(--thread-500); } .tray__foot { display: flex; align-items: center; gap: var(--sp-3); } .tray__sum { display: grid; gap: 0; } .tray__total { font-size: var(--fs-3); font-weight: var(--fw-medium); } .tray__save { font-size: var(--fs-0); color: var(--success); } .tray__save::before { content: "− "; } .tray__cta { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: clamp(0.8125rem, 0.72rem + 0.6vw, var(--fs-1)); padding-inline: var(--sp-3); } /* Kutu TAMAMLANMADAN önce: bordo çerçeveli (outline). Henüz sepete eklenecek bir şey yok, birincil buton gibi durmamalı. TAMAMLANINCA: dolu bordo — eylem hazır, göz oraya gitsin. Sarı kalktı (kullanıcı kararı 18.09.2026): sarı zemin üstüne siyah yazı belli durmuyordu ve marka rengiyle yarışıyordu. Sırma yalnız gerçek hediye işaretinde (HEDİYE etiketi) kaldı. */ .tray__cta:not(:disabled) { background: transparent; border-color: var(--accent); color: var(--brand-700); } .tray__cta:not(:disabled):hover { background: var(--brand-50); } .tray.is-complete .tray__cta { background: var(--accent); border-color: var(--accent); color: #fff; } .tray.is-complete .tray__cta:hover { background: var(--brand-700); border-color: var(--brand-700); opacity: 1; } .tray__body { border-block-start: var(--hairline) solid var(--line-2); padding-block-start: var(--sp-3); } .tray__body[hidden] { display: none; } .tray__list { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-3); max-height: 40vh; overflow-y: auto; } .trayItem { display: grid; grid-template-columns: 44px 1fr auto; gap: var(--sp-3); align-items: center; } .trayItem img { border-radius: var(--radius-sm); object-fit: cover; } .trayItem__body { display: grid; gap: 2px; font-size: var(--fs-1); min-width: 0; } .trayItem__body a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .trayItem.is-free .trayItem__body .spec-label { color: var(--thread-700); } /* 3/4 dürtme */ .tray.is-near .tray__meterFill { background: var(--accent); } .tray.is-near .tslot.is-empty { border-color: var(--accent); } @media (prefers-reduced-motion: no-preference) { .tray.is-near .tslot.is-empty { animation: slot-pulse 2s var(--ease) infinite; } @keyframes slot-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } } } /* 4/4 tamamlandı */ /* Tamamlanma vurgusu bordo dilinde; sırma yalnız hediye yuvasında */ .tray.is-complete { border-block-start-color: var(--accent); } .tray.is-complete .tray__meterFill { background: var(--accent); } .tray.is-complete .tray__headline { color: var(--brand-700); } @media (prefers-reduced-motion: no-preference) { .tray.is-shimmer::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgb(217 190 134 / 0.42) 50%, transparent 65%); transform: translateX(-100%); animation: shimmer 780ms var(--ease) 1; pointer-events: none; } @keyframes shimmer { to { transform: translateX(100%); } } } /* --- Site genelinde mini tepsi ------------------------------------------- */ .boxMini { position: sticky; inset-block-start: var(--header-h); z-index: calc(var(--z-sticky) + 1); background: var(--ink); color: var(--ink-inverse); } .boxMini[hidden] { display: none; } .boxMini__inner { display: flex; align-items: center; gap: var(--sp-3); min-height: 40px; } .boxMini__label { font-family: var(--font-mono); font-size: var(--fs-0); letter-spacing: var(--ls-mono); } .boxMini__go { margin-inline-start: auto; font-size: var(--fs-0); font-family: var(--font-mono); letter-spacing: var(--ls-mono); color: var(--thread-100); border-block-end: 1px solid rgb(246 238 220 / 0.55); padding-block-end: 1px; } .boxMini__meter { position: absolute; inset-block-end: 0; inset-inline-start: 0; height: 2px; background: var(--thread-500); transition: width var(--dur-slow) var(--ease); } .boxMini.is-complete { background: var(--brand-600); } @media (min-width: 900px) { .tray__inner { grid-template-columns: 1.1fr auto 1fr; align-items: center; gap: var(--sp-6); } .tray__grip { grid-column: 1; } .tray__slots { grid-column: 2; grid-template-columns: repeat(4, 64px); } .tslot { aspect-ratio: var(--ratio-product); } .tray__foot { grid-column: 3; justify-content: flex-end; } .tray__body { grid-column: 1 / -1; } .boxPick { padding-block-end: calc(var(--sp-16) + 120px); } } /* --- Ürün sayfasındaki kutu kutusu --------------------------------------- */ .pdp__bundle { display: grid; gap: var(--sp-3); padding: var(--sp-4); background: var(--brand-50); border: var(--hairline) solid var(--brand-100); border-radius: var(--radius); } .pdp__bundleText { margin: 0; color: var(--brand-700); } .pdp__bundleText b { font-weight: var(--fw-semibold); } /* --- Sepet sayfası -------------------------------------------------------- */ .cartEmpty__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); } .cartNote { padding: var(--sp-3); background: var(--brand-50); border-radius: var(--radius); color: var(--brand-700); } .cartNote a { text-decoration: underline; } .cartActions { display: flex; gap: var(--sp-3); margin-block: var(--sp-6) var(--sp-4); } .cartActions .btn--accent { flex: 1 1 auto; } .cartDev { padding-block-start: var(--sp-4); border-block-start: var(--hairline) solid var(--line-2); } .cartItem.is-out { opacity: 0.66; } .cartItem.is-out .cartItem__media { filter: grayscale(1); } /* --- Sepet sayfası (sunucu taraflı) -------------------------------------- */ .cartGrid { display: grid; gap: var(--sp-8); padding-block-end: var(--sp-10); } .cartMain { min-width: 0; } .cartCamp { padding: var(--sp-4); background: var(--brand-50); border: var(--hairline) solid var(--brand-100); border-radius: var(--radius); display: grid; gap: var(--sp-2); margin-bottom: var(--sp-5); } .cartCamp__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); } .cartCamp__row .spec-label { color: var(--brand-700); } .cartCamp__text { margin: 0; color: var(--brand-700); } .cartCamp__text a { text-decoration: underline; } .cartCamp .progress__fill { background: var(--accent); } .cartCamp.is-complete { background: var(--thread-100); border-color: var(--thread-300); } .cartCamp.is-complete .progress__fill { background: var(--thread-500); } .cartCamp.is-complete .spec-label, .cartCamp.is-complete .cartCamp__text { color: var(--thread-700); } .cartList { display: grid; gap: 0; } .cartItem { display: grid; grid-template-columns: 80px 1fr auto; gap: var(--sp-4); padding-block: var(--sp-4); border-block-end: var(--hairline) solid var(--line); align-items: start; } .cartItem__media img { width: 80px; height: 107px; object-fit: cover; border-radius: var(--radius-sm); background: var(--surface-3); } .cartItem__body { display: grid; gap: var(--sp-2); min-width: 0; } .cartItem__name { font-size: var(--fs-1); font-weight: var(--fw-medium); } .cartItem__body .spec-row { margin: 0; } .cartItem__controls { display: flex; align-items: center; gap: var(--sp-3); margin-block-start: var(--sp-1); } .cartItem__remove { background: none; border: 0; padding: 0; font-size: var(--fs-0); color: var(--ink-2); text-decoration: underline; min-height: 32px; } .cartItem__remove:hover { color: var(--danger); } .cartItem__price { display: grid; gap: 2px; justify-items: end; text-align: end; font-size: var(--fs-1); font-weight: var(--fw-medium); } .cartItem.is-free { background: linear-gradient(to right, var(--thread-100), transparent 55%); } .cartItem.is-out { opacity: 0.6; } .stepper--sm button { width: 34px; height: 34px; font-size: var(--fs-2); } .stepper--sm input { width: 34px; height: 34px; font-size: var(--fs-1); } /* Dokunmatikte parmak hedefi 44px (Bitti listesi kuralı). */ @media (pointer: coarse) { .stepper--sm button, .stepper--sm input { width: 44px; height: 44px; } .cartItem__remove { min-height: 44px; min-width: 44px; } } .cartSuggest { margin-block-start: var(--sp-8); } .cartSuggest .card__body .btn { margin-block-start: var(--sp-1); } .cartSide { min-width: 0; } .cartSum { padding: var(--sp-5); background: var(--surface); border: var(--hairline) solid var(--line); border-radius: var(--radius); display: grid; gap: var(--sp-3); } .cartSum__title { font-family: var(--font-display); font-size: var(--fs-4); letter-spacing: var(--ls-display); } .cartSum dl { display: grid; gap: var(--sp-2); margin: 0; } .cartSum dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); font-size: var(--fs-1); } .cartSum dt { color: var(--ink-2); } .cartSum dd { margin: 0; } .cartSum__disc dd { color: var(--success); } .cartSum__total { padding-block-start: var(--sp-3); border-block-start: var(--hairline) solid var(--line); font-size: var(--fs-3) !important; } .cartSum__total dt { color: var(--ink) !important; font-weight: var(--fw-medium); } .cartSum__total dd { font-weight: var(--fw-semibold); } .cartSum__note { display: block; } .cartSum__trust { display: grid; gap: var(--sp-2); padding-block-start: var(--sp-3); border-block-start: var(--hairline) solid var(--line-2); } .cartSum__trust li { position: relative; padding-inline-start: var(--sp-4); font-size: var(--fs-0); color: var(--ink-2); } .cartSum__trust li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.55em; width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--success); } .cartEmpty { padding-block: var(--sp-8) var(--sp-16); } @media (min-width: 900px) { .cartGrid { grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.9fr); align-items: start; } .cartSide { position: sticky; inset-block-start: var(--sp-5); } } /* --- Toast --------------------------------------------------------------- */ .toast { position: fixed; inset-inline: var(--gutter); inset-block-end: calc(var(--sp-4) + env(safe-area-inset-bottom)); z-index: var(--z-toast); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4); background: var(--ink); color: var(--ink-inverse); border-radius: var(--radius); box-shadow: var(--shadow-pop); font-size: var(--fs-1); transform: translateY(150%); opacity: 0; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); } .toast.is-on { transform: none; opacity: 1; } .toast a { color: var(--thread-300); font-family: var(--font-mono); font-size: var(--fs-0); letter-spacing: var(--ls-mono); white-space: nowrap; } @media (min-width: 700px) { .toast { inset-inline: auto var(--sp-6); max-width: 380px; } } .cartCoupon { display: grid; gap: var(--sp-2); padding-block: var(--sp-3); border-block-start: var(--hairline) solid var(--line-2); } .cartCoupon__row { display: flex; gap: var(--sp-2); } .cartCoupon__row .input { flex: 1 1 auto; min-width: 0; width: 100%; text-transform: uppercase; } /* flex öğesi içsel genişliğe düşmesin: 320px'te sayfayı 7px taşırıyordu */ .cartCoupon__row .input::placeholder { text-transform: none; } .cartCoupon__btn { flex: 0 0 auto; min-height: 48px; padding-inline: var(--sp-5); } .cartSum__vat { margin-inline-start: var(--sp-2); font-family: var(--font-mono); font-size: var(--fs-0); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--ink-3); font-weight: var(--fw-regular); } .cartSum .payLogos { justify-content: flex-start; } /* Dar ekranda fiyat sütunu ürün koduyla çakışıyordu: fiyat adet satırının altına iner. */ @media (max-width: 479px) { .cartItem { grid-template-columns: 72px minmax(0, 1fr); } .cartItem__media img { width: 72px; height: 96px; } .cartItem__price { grid-column: 2; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: var(--sp-2); text-align: start; } } .cartCoupon__remove { background: none; border: 0; padding: 0; color: var(--danger); text-decoration: underline; font-size: var(--fs-0); } .cartCoupon__msg { color: var(--danger); margin: 0; } /* ========================================================================== Şal Kutusu vurgusu — kart eylemi + ürün sayfasındaki büyük buton Özellik her yerde vardı ama görünmüyordu: kartta 15px'lik köşe ikonu, ürün sayfasında küçük bir hayalet buton. Vurgu sırma (--thread-*) üzerinden yapılıyor: tasarım sisteminde sırma yalnız HEDİYE/KAZANÇ durumlarına ayrıldı ve bu kampanyanın kendisi bir hediye durumu. Bordo, birincil "Sepete ekle"nin rengi olarak kalıyor — ikisi yarışmıyor. ========================================================================== */ /* --- Kartta: görselin sağ üstünde, ikon olarak --------------------------- */ /* İki kart eylemi birbirinin AYNASI (kullanıcı kararı 18.09.2026): Sepete ekle → beyaz, hover'da bordo dolu Kutuma → bordo dolu, hover'da beyaz + bordo yazı Böylece iki farklı eylem olduğu ilk bakışta belli oluyor ve ikisi de marka renginde kalıyor. Sırma vurgu ürün sayfasındaki büyük butonda ve tepsinin hediye durumunda duruyor — kazanç dili orada anlamlı. */ .card__boxBtn { /* GÖRSELİN ALTINDA, tam genişlikte ve ADIYLA (kullanıcı revizesi 20.09.2026): ikon olarak ne işe yaradığı anlaşılmıyordu, gövdeye inince de sepetle yarışıyordu. Kampanya şeridi gövdede, "Sepete ekle"nin altında kaldı. */ display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 7px var(--sp-2); font-size: 0.8125rem; font-weight: var(--fw-medium); border: 1px solid rgb(255 255 255 / 0.6); border-radius: var(--radius); /* Cam beyaz: görselin üstünde okunur, kartın tek dolu bordo öğesi kampanya şeridi kalır */ background: rgb(255 255 255 / 0.88); color: var(--brand-700); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-family: var(--font-body); letter-spacing: 0; line-height: 1.25; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .card__boxBtn:hover { background: var(--surface); color: var(--brand-700); border-color: var(--brand-300); } .card__boxBtn .card__boxTick { display: none; } /* Kutuda: sırma dolu — "eklendi" durumu kazanç dili, eylemden ayrışıyor. Zemin --thread-500 değil --thread-700: beyaz yazı 500 üzerinde 3,42:1 ölçüldü, WCAG eşiği 4,5. 700 üzerinde 5,87:1. Hover bordoya dönüyor çünkü oradaki eylem "kutudan çıkar". */ .card__boxBtn.is-in { background: var(--thread-700); border-color: var(--thread-700); color: #fff; } .card__boxBtn.is-in:hover { background: var(--brand-700); border-color: var(--brand-700); color: #fff; } .card__boxBtn.is-in .card__boxIcon { display: none; } .card__boxBtn.is-in .card__boxTick { display: block; } /* Kart eylemleri artık tek: görselde kutu ikonu, gövdede tam genişlikte "Sepete ekle". Eski dar-kart kuralları (iki yan yana buton, etiket gizleme) gereksiz kaldı, kaldırıldı. */ /* --- Ürün sayfası: adet + sepetin ALTINDA tek büyük eylem ---------------- */ /* Sırma zemin kalktı: tepsi ve kart butonları bordo diline geçince bu buton tek başına altın kaldı ve yabancı duruyordu. Artık bordo çerçeveli, hover'da hafif bordo zemin — kart butonlarının aynı dili. */ .boxCta { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-3); width: 100%; min-height: 58px; margin-block-start: var(--sp-3); padding: var(--sp-3) var(--sp-4); border: 1.5px solid var(--brand-200); border-radius: var(--radius); background: var(--surface); color: var(--ink); text-align: start; cursor: pointer; transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur-fast) var(--ease); } .boxCta:hover { border-color: var(--accent); background: var(--brand-50); box-shadow: 0 2px 14px rgb(122 31 43 / 0.10); } .boxCta:active { transform: translateY(1px); } .boxCta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .boxCta__icon { position: relative; display: grid; place-items: center; width: 34px; height: 34px; color: var(--brand-500); } .boxCta__tick { display: none; } .boxCta__text { display: grid; gap: 1px; min-width: 0; } .boxCta__text b { font-size: var(--fs-2); font-weight: var(--fw-medium); } .boxCta__sub { font-size: var(--fs-0); color: var(--ink-2); } /* Kaç yuva doldu. Yuvarlak noktalar "üç nokta menüsü" gibi okunuyordu; artık KUTU YUVASI gibi kareler — kutunun kendi görsel dili. Dolanlar bordo, boşlar kesikli çerçeve: tepsideki yuvalarla aynı mantık. */ .boxCta__slots { display: inline-flex; gap: 4px; } .boxCta__slots i { width: 12px; height: 15px; border-radius: 2px; border: 1.5px dashed var(--brand-200); transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); } .boxCta__slots i.is-on { background: var(--accent); border-style: solid; border-color: var(--accent); } .boxCta.is-in { background: var(--brand-50); border-color: var(--accent); } .boxCta.is-in .boxCta__box { display: none; } .boxCta.is-in .boxCta__tick { display: block; } /* Tamamlandı: hediye kazanıldı. Yalnız burada sırma kalıyor — kazanç anı. */ .boxCta.is-complete { border-color: var(--thread-500); background: var(--thread-100); } .boxCta.is-complete .boxCta__sub { color: var(--thread-700); font-weight: var(--fw-medium); } .boxCta.is-complete .boxCta__icon { color: var(--thread-700); } .boxCta.is-complete .boxCta__slots i.is-on { background: var(--thread-500); border-color: var(--thread-500); } @media (prefers-reduced-motion: no-preference) { .boxCta.is-bump { animation: boxBump 420ms var(--ease-fold); } .boxCta__slots i.is-just { animation: dotPop 340ms var(--ease-fold); } } @keyframes boxBump { 0% { transform: scale(1); } 45% { transform: scale(1.015); } 100% { transform: scale(1); } } @keyframes dotPop { 0% { transform: scale(1); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } } /* --- Tepsi açılır listesinin altı -------------------------------------- */ .tray__bodyFoot { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; } /* Tepsi her sayfada olduğu için sayfa sonu onun altında kalmasın */ body:has(.tray:not([hidden])) { padding-block-end: 132px; } @media (min-width: 900px) { body:has(.tray:not([hidden])) { padding-block-end: 104px; } } /* Kart altındaki kampanya satırı — Merci Coco'daki rozetin karşılığı. Düz mono yazıyken gözden kaçıyordu; kampanya kartın en güçlü satış argümanı olduğu için artık bordo zeminli şerit. Satırın tamamını değil metin kadar yer kaplıyor (inline-flex): kart altı bordo bir bant olmasın. */ .card__campaign { display: flex; align-items: center; justify-content: center; margin: 2px 0 0; padding: 5px var(--sp-2); border-radius: var(--radius-sm); background: var(--accent); color: #fff; /* Gövde fontu, sıfır harf aralığı: mono + geniş aralıkla telefonda 2-3 satıra kırılıp "kırık" görünüyordu (kullanıcı ekran görüntüsü, 19.09.2026). */ font-family: var(--font-body); font-size: var(--fs-0); font-weight: var(--fw-semibold, 600); letter-spacing: 0; line-height: 1.3; max-width: 100%; white-space: nowrap; } /* Kart eylemleri GÖRSEL olarak ince (kullanıcı revizesi 19.09.2026: 44px dolu buton görselin üstünde kaba duruyordu), dokunma alanı yine ≥44px: ::after butonu dikeyde 4px taşar. Görsel 36px (dokunmatik) / 34px (fare). Yatayda taşmaz, iki buton arası 8px boşluk korunur. */ .card__add { position: relative; min-height: 34px; } .card__add::after { content: ""; position: absolute; inset: -5px 0; } .card__boxBtn::after { content: ""; position: absolute; inset: -4px; } /* 44px dokunma alanı */ @media (pointer: coarse) { .card__add { min-height: 36px; } .card__add::after { inset: -4px 0; } } /* Kutu sayfası hızlı sekmeleri — seçim yapmak bu sayfanın işi, yön değiştirmek filtre çekmecesi açmayı gerektirmemeli. Alt çizgili sekme: çip şeridiyle karışmasın, hiyerarşide onun üstünde dursun. */ .boxTabs { display: flex; gap: var(--sp-5); margin-block-end: var(--sp-4); overflow-x: auto; scrollbar-width: none; border-block-end: var(--hairline) solid var(--line-2); } .boxTabs::-webkit-scrollbar { display: none; } .boxTabs__t { flex: 0 0 auto; padding-block: var(--sp-3); font-size: var(--fs-1); color: var(--ink-2); white-space: nowrap; border-block-end: 2px solid transparent; transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .boxTabs__t:hover { color: var(--ink); } .boxTabs__t.is-active { color: var(--brand-700); font-weight: var(--fw-semibold); border-block-end-color: var(--accent); } /* ========================================================================== Sepette sabit alt bar Sepet uzadığında "Ödemeye geç" ekranın dışında kalıyordu. Bar her zaman elin altında; özet bloğundaki asıl buton görünür olduğunda gizleniyor, yoksa aynı eylem iki kez görünüyor. z-index: tepsinin (--z-sticky) üstünde değil, aynı seviyede — sepette tepsi görünmüyor, ikisi çakışmıyor. ========================================================================== */ .cartBar { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: var(--z-sticky); background: var(--surface); border-block-start: var(--hairline) solid var(--line); box-shadow: var(--shadow-sheet); padding-block-end: env(safe-area-inset-bottom); } .cartBar[hidden] { display: none; } .cartBar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding-block: var(--sp-3); } .cartBar__sum { display: grid; gap: 0; min-width: 0; } /* "Sepette ödenecek" 320px'te bir satıra sığmıyor: etiket sarar, bar taşmaz */ .cartBar__sum > .spec-label { white-space: normal; line-height: 1.25; } .cartBar__total { font-size: var(--fs-3); font-weight: var(--fw-semibold); letter-spacing: -0.01em; } .cartBar__save { font-size: var(--fs-0); color: var(--success); } .cartBar__go { flex: 0 0 auto; min-width: 11rem; } @media (max-width: 420px) { .cartBar__go { min-width: 8.5rem; } } /* Bar görünürken sayfa sonu altında kalmasın */ body:has(.cartBar:not([hidden])) { padding-block-end: 92px; } /* Sepet ve ödeme ekranında Şal Kutusu tepsisi GÖSTERİLMEZ: kullanıcı zaten sepette, kutu tepsisi orada gürültü ve sepet barıyla üst üste biner. Kutunun durumu localStorage'da korunur, kaybolmaz. */ body[data-page="cart"] .tray, body[data-page="checkout"] .tray { display: none; } body[data-page="cart"] { padding-block-end: 92px; } /* Kampanya şeridi dar kartta tek satıra sığmıyordu ve "1 Öd…" diye kırpılıyordu. Mesaj kırpılmaz: iki satıra sarıyor. NOT: bu blok dosyanın SONUNDA olmak zorunda — temel .card__campaign kuralı daha aşağıdaydı ve aynı özgüllükte olduğu için sarmayı eziyordu. Container query özgüllük eklemez, sıra belirleyici. */ @container card (max-width: 259px) { .card__campaign { display: block; align-self: stretch; text-align: center; white-space: normal; text-wrap: balance; } /* Fiyat düzeni artık grid (components.css): çip solda iki satır boyunda, eski fiyat üstte, güncel fiyat altta — dar kartta da aynı. */ } /* Çok dar kart (320px telefon, ~131px): "Sepete ekle" kesilmesin. Kenar ve aralık birkaç piksel daraltılır, yazı 12px; kutu butonu 44px kare kalır. */ @container card (max-width: 150px) { .card__actions { inset-inline: 6px; inset-block-end: 6px; gap: 6px; } .card__add { padding-inline: 4px; font-size: var(--fs-0); } } @container card (max-width: 140px) { .card__actions { inset-inline: 5px; inset-block-end: 5px; gap: 5px; } .card__add { padding-inline: 2px; font-size: 0.71875rem; letter-spacing: -0.01em; } } /* --- Tepsi: küçük hâl ---------------------------------------------------- Kullanıcı isteği (19.09.2026): tepsi ekranın ~⅓'ünü kaplıyordu, gezmeye devam etmek isteyen küçültebilmeli ama kutunun durumunu görmeye devam etmeli. Küçük hâl tek satır: eklenen şalların küçük görselleri, adet, toplam, tamamlanınca doğrudan "Sepete ekle". Tercih tarayıcıda hatırlanır (localStorage, yalnız bu cihaz). */ .tray__head { display: flex; align-items: flex-start; gap: var(--sp-2); } .tray__head .tray__grip { flex: 1 1 auto; min-width: 0; } .tray__min { position: relative; flex: 0 0 auto; width: 32px; height: 32px; margin: -4px -4px 0 0; padding: 0; display: grid; place-items: center; background: var(--surface-2, #F5F2F0); color: var(--ink-2); border: var(--hairline) solid var(--line); border-radius: var(--radius-pill); } .tray__min::after { content: ""; position: absolute; inset: -6px; } .tray__min:hover { color: var(--ink); border-color: var(--ink-3); } .tray__mini { display: none; align-items: center; gap: var(--sp-3); } .tray__miniOpen { flex: 1 1 auto; min-width: 0; min-height: 44px; display: flex; align-items: center; gap: var(--sp-3); padding: 0; background: none; border: 0; text-align: start; color: inherit; } .tray__miniThumbs { display: flex; gap: 4px; flex: 0 0 auto; } .tray__miniThumbs i { width: 30px; height: 30px; border-radius: var(--radius-sm); overflow: hidden; border: 1px dashed var(--line); background: transparent; } .tray__miniThumbs i.is-on { border: 0; background: var(--surface-3); } .tray__miniThumbs i.is-free { outline: 2px solid var(--thread-500); outline-offset: -2px; } .tray.is-complete .tray__miniChev { display: none; } /* yer "Sepete ekle"ye kalsın; çubuğun kendisi yine büyütür */ .tray__miniThumbs img { width: 100%; height: 100%; object-fit: cover; display: block; } .tray__miniText { display: grid; gap: 1px; min-width: 0; } .tray__miniText > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tray__miniTotal { font-size: var(--fs-1); font-weight: var(--fw-medium); } .tray__miniChev { margin-inline-start: auto; flex: 0 0 auto; width: 9px; height: 9px; border-inline-end: 1.5px solid var(--ink-3); border-block-start: 1.5px solid var(--ink-3); transform: translateY(2px) rotate(-45deg); } .tray__miniCta { flex: 0 0 auto; } .tray.is-mini .tray__mini { display: flex; } .tray.is-mini .tray__head, .tray.is-mini .tray__slots, .tray.is-mini .tray__foot, .tray.is-mini .tray__body { display: none; } .tray.is-mini .tray__inner { padding-block: var(--sp-2); } body:has(.tray.is-mini:not([hidden])) { padding-block-end: 76px; } @media (min-width: 900px) { body:has(.tray.is-mini:not([hidden])) { padding-block-end: 76px; } } @media (min-width: 900px) { .tray__miniThumbs i { width: 34px; height: 34px; } } /* 360px altında dört küçük görsel + metin + "Sepete aktar" sığmıyor: yalnız ilk iki görsel */ @media (max-width: 360px) { .tray__miniThumbs i:nth-child(n+3) { display: none; } } /* Mono etiket harf aralığıyla 375px'te "Kutun tam…" diye kesiliyordu: küçük hâlde gövde fontu */ .tray__miniText .spec-label { font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-size: var(--fs-0); color: var(--ink-2); } .card__boxBtn .card__boxIcon, .card__boxBtn .card__boxTick { flex: 0 0 auto; } /* Görselin üstünde duruyor: yazı her zeminde okunsun diye hafif gölge */ .card__actions .card__boxBtn { box-shadow: var(--shadow-lift); } @container card (max-width: 170px) { .card__boxBtn { font-size: 12px; gap: 4px; padding-inline: 4px; } .card__boxBtn svg { display: none; } } /* --- Tepside sepetten gelen şal ------------------------------------------ Tepsi sepet + kutu birleşik sayar. Sepetteki şal aynı yuvada durur, küçük "Sepette" etiketiyle nereden geldiği belli olur; çarpı ona basınca sunucudan silinir. */ .tslot.is-cart { box-shadow: inset 0 0 0 2px var(--brand-200); } .tslot__gift--cart { background: var(--brand-50); color: var(--brand-700); } .tslot.is-free.is-cart { box-shadow: inset 0 0 0 2px var(--thread-500); } /* Kart/PDP kutu butonu: ürün zaten sepetteyse sakin durum (bordo değil, açık zemin + tik) */ .card__boxBtn.is-cart, .boxCta.is-cart { background: var(--brand-50); border-color: var(--brand-200); color: var(--brand-700); } /* Çok dar kutu kartı (320px telefon, ~136px): en uzun doku adı ("Lyocell Bambu Jakar") 1px taşıp "…" ile kesiliyordu. Ölçü karta bağlı; dosyanın sonunda (container query özgüllük eklemez). */ @container boxcard (max-width: 150px) { .boxCard__meta { font-size: 0.71875rem; } } /* Kupon kodu büyük harf görünür (sunucu yine katlar: Str::codeFold) */ .cartCoupon__input { text-transform: uppercase; } .cartCoupon__input::placeholder { text-transform: none; } /* drawer.css */ /* ========================================================================== Sepet çekmecesi — sepete ekleme akışının kalbi ========================================================================== */ .cdr { position: fixed; inset: 0; z-index: var(--z-drawer); } .cdr[hidden] { display: none; } .cdr::before { content: ""; position: absolute; inset: 0; background: rgb(26 22 20 / 0.42); opacity: 0; transition: opacity var(--dur) var(--ease); } .cdr.is-open::before { opacity: 1; } .cdr__panel { position: absolute; inset-block: 0; inset-inline-end: 0; width: min(92vw, 420px); display: flex; flex-direction: column; background: var(--surface); box-shadow: -12px 0 40px rgb(26 22 20 / 0.18); transform: translateX(100%); transition: transform var(--dur-slow) var(--ease); } .cdr.is-open .cdr__panel { transform: none; } @media (prefers-reduced-motion: reduce) { .cdr__panel, .cdr::before { transition: none; } .cdr .cdr__panel { transform: none; } } .cdr__head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-5); border-block-end: var(--hairline) solid var(--line); } .cdr__title { font-family: var(--font-display); font-size: var(--fs-3); letter-spacing: var(--ls-display); margin: 0; } .cdr__content { flex: 1 1 auto; overflow-y: auto; padding: var(--sp-4) var(--sp-5); display: grid; gap: var(--sp-4); align-content: start; } /* Eklenen ürün bildirimi */ .cdr__added { display: grid; grid-template-columns: auto 48px 1fr; gap: var(--sp-3); align-items: center; padding: var(--sp-3); background: var(--success-bg); border-radius: var(--radius); } .cdr__addedIcon { width: 24px; height: 24px; display: grid; place-items: center; background: var(--success); color: #fff; border-radius: var(--radius-pill); } .cdr__added img { width: 48px; height: 64px; object-fit: cover; border-radius: var(--radius-sm); } .cdr__addedBody { display: grid; gap: 2px; min-width: 0; font-size: var(--fs-1); } .cdr__addedBody .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (prefers-reduced-motion: no-preference) { .cdr__added { animation: cdrPop 320ms var(--ease-fold); } @keyframes cdrPop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } } /* Kampanya ilerlemesi */ .cdr__camp { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); padding: var(--sp-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); } .cdr__campIcon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius); background: var(--brand-50); color: var(--accent); } .cdr__campBody { display: grid; gap: 2px; min-width: 0; } .cdr__campTitle { margin: 0; font-weight: 600; color: var(--ink); line-height: 1.3; } .cdr__campText { margin: 0; color: var(--ink-2); } .cdr__campSlots { display: inline-flex; gap: 4px; } .cdr__campSlots i { width: 12px; height: 15px; border-radius: 2px; border: 1.5px dashed var(--brand-200); } .cdr__campSlots i.is-on { background: var(--accent); border-style: solid; border-color: var(--accent); } .cdr__camp.is-complete { border-color: var(--thread-300); } .cdr__camp.is-complete .cdr__campIcon { background: var(--thread-100); color: var(--thread-700); } .cdr__camp.is-complete .cdr__campText b { color: var(--thread-700); font-weight: 600; } .cdr__camp.is-complete .cdr__campSlots i.is-on { background: var(--thread-500); border-color: var(--thread-500); } /* Satırlar */ .cdr__list { display: grid; gap: var(--sp-4); } .cdr__item { display: grid; grid-template-columns: 56px 1fr auto; gap: var(--sp-3); align-items: start; } .cdr__item.is-free { background: linear-gradient(to right, var(--thread-100), transparent 70%); border-radius: var(--radius); padding: var(--sp-2); margin: calc(var(--sp-2) * -1); } .cdr__media img { width: 56px; height: 75px; object-fit: cover; border-radius: var(--radius-sm); background: var(--surface-3); } .cdr__body { display: grid; gap: var(--sp-1); min-width: 0; } .cdr__name { font-size: var(--fs-1); font-weight: var(--fw-medium); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cdr__qty { display: flex; align-items: center; gap: var(--sp-3); margin-block-start: var(--sp-1); } .cdr__remove { background: none; border: 0; padding: 0; font-size: var(--fs-0); color: var(--ink-3); text-decoration: underline; min-height: 32px; } .cdr__remove:hover { color: var(--danger); } .cdr__price { font-size: var(--fs-1); font-weight: var(--fw-medium); white-space: nowrap; } /* Yanına iyi gider */ .cdr__upsell { padding-block-start: var(--sp-3); border-block-start: var(--hairline) solid var(--line-2); display: grid; gap: var(--sp-2); } .cdr__upsellList { display: grid; gap: var(--sp-2); } .cdr__upsellList li { display: grid; grid-template-columns: 40px 1fr auto; gap: var(--sp-3); align-items: center; } .cdr__upsellList img { width: 40px; height: 40px; object-fit: cover; border-radius: var(--radius-sm); background: var(--surface-3); } .cdr__upsellBody { display: grid; gap: 0; min-width: 0; } .cdr__upsellBody .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Alt bölüm */ .cdr__foot { border-block-start: var(--hairline) solid var(--line); padding: var(--sp-4) var(--sp-5) calc(var(--sp-4) + env(safe-area-inset-bottom)); display: grid; gap: var(--sp-2); background: var(--surface); } .cdr__totals { display: grid; gap: var(--sp-1); margin-bottom: var(--sp-1); } .cdr__totals > div { display: flex; justify-content: space-between; gap: var(--sp-4); font-size: var(--fs-1); color: var(--ink-2); } .cdr__disc { color: var(--success) !important; } .cdr__total { font-size: var(--fs-3) !important; color: var(--ink) !important; font-weight: var(--fw-semibold); padding-block-start: var(--sp-2); border-block-start: var(--hairline) solid var(--line-2); } .cdr__ship { text-align: center; } .cdr__continue { background: none; border: 0; padding: var(--sp-2); font-size: var(--fs-0); color: var(--ink-2); text-decoration: underline; } /* İskelet */ .cdr__skeleton { display: grid; gap: var(--sp-3); } .cdr__skeleton span { display: block; height: 74px; border-radius: var(--radius); background: linear-gradient(90deg, var(--surface-3) 25%, var(--line-2) 50%, var(--surface-3) 75%); background-size: 200% 100%; } @media (prefers-reduced-motion: no-preference) { .cdr__skeleton span { animation: cdrShimmer 1.2s linear infinite; } @keyframes cdrShimmer { to { background-position: -200% 0; } } } .cdr__empty { display: grid; gap: var(--sp-3); text-align: center; padding-block: var(--sp-6); } .cdr__emptyTitle { font-family: var(--font-display); font-size: var(--fs-4); margin: 0; } /* pdp.css */ /* ========================================================================== Ürün sayfası — yoğun, kendinden emin, premium ========================================================================== */ .pdp { padding-block-end: calc(var(--stickybar-h) + var(--sp-8)); } .pdp__grid { display: grid; gap: var(--sp-6); } .pdp__grid > * { min-width: 0; } /* --- Galeri --------------------------------------------------------------- */ .pdp__gallery { position: relative; margin-inline: calc(var(--gutter) * -1); } .gallery { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; background: var(--surface-3); } .gallery::-webkit-scrollbar { display: none; } .gallery__slide { scroll-snap-align: center; aspect-ratio: var(--ratio-product); padding: 0; border: 0; background: none; cursor: zoom-in; } .gallery__slide img { width: 100%; height: 100%; object-fit: cover; } .gallery__counter { position: absolute; inset-block-start: var(--sp-3); inset-inline-end: var(--sp-3); padding: 3px var(--sp-2); background: rgb(26 22 20 / 0.62); color: #fff; border-radius: var(--radius-pill); font-size: var(--fs-0); backdrop-filter: blur(4px); } .gallery__dots { position: absolute; inset-block-end: var(--sp-3); inset-inline: 0; display: flex; justify-content: center; gap: 6px; } .gallery__dots span { width: 6px; height: 6px; border-radius: var(--radius-pill); background: rgb(255 255 255 / 0.5); transition: background-color var(--dur) var(--ease), width var(--dur) var(--ease); } .gallery__dots span.is-active { background: #fff; width: 18px; } .gallery__thumbs { display: flex; gap: var(--sp-2); padding: var(--sp-3) var(--gutter) 0; overflow-x: auto; scrollbar-width: none; } .gallery__thumbs::-webkit-scrollbar { display: none; } .gthumb { flex: 0 0 auto; width: 56px; padding: 0; border: 0; background: none; border-radius: var(--radius-sm); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); opacity: 0.6; transition: opacity var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .gthumb img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; } .gthumb.is-active { opacity: 1; box-shadow: inset 0 0 0 2px var(--ink); } /* --- Bilgi sütunu --------------------------------------------------------- */ .pdp__info { display: grid; gap: var(--sp-4); align-content: start; min-width: 0; } /* Satın alma grubu: adet + sepete ekle + hemen al + kutu + teslimat birbirine yakın, tek karar alanı. */ .pdp__purchase { display: grid; gap: var(--sp-3); min-width: 0; } .pdp__purchase > * { min-width: 0; margin: 0; } .pdp__buyNow { min-height: 52px; background: var(--ink); border-color: var(--ink); color: #fff; font-weight: var(--fw-medium); } .pdp__buyNow:hover { background: #000; border-color: #000; color: #fff; } .pdp__info > * { min-width: 0; } .pdp__head { display: grid; gap: var(--sp-2); } .pdp__collection { display: inline-block; width: fit-content; border-block-end: var(--hairline) solid var(--line); padding-block-end: 2px; } .pdp__collection:hover { color: var(--accent); border-color: currentColor; } .pdp__title { font-size: var(--fs-5); } .pdp__specRow { margin: 0; } .pdp__priceBlock { display: grid; gap: var(--sp-1); padding-block: var(--sp-3); border-block: var(--hairline) solid var(--line); } .pdp__price { align-items: center; gap: var(--sp-3); } .pdp__price .price__now { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); letter-spacing: -0.02em; } .pdp__inst { margin: 0; } /* Renk şeridi */ .pdp__colorsHead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-2); } .colorRail { grid-auto-columns: 64px; gap: var(--sp-2); margin-inline: 0; padding-inline: 0; } .colorRail__item { position: relative; display: block; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line); } .colorRail__item.is-current { box-shadow: inset 0 0 0 2px var(--ink); } .colorRail__item.is-out { opacity: 0.55; } .colorRail__item img { width: 100%; aspect-ratio: 3/4; object-fit: cover; } .colorRail__out { position: absolute; inset: auto 0 0 0; padding-block: 2px; background: rgb(255 255 255 / 0.92); color: var(--ink-2); font-family: var(--font-mono); font-size: 8px; text-align: center; } /* Satın alma */ .pdp__buy { display: flex; gap: var(--sp-3); align-items: center; } .pdp__buy .btn { flex: 1 1 auto; } /* Teslimat */ .pdp__delivery { padding: var(--sp-3) var(--sp-4); background: var(--surface); border: var(--hairline) solid var(--line); border-radius: var(--radius); display: grid; gap: var(--sp-1); } .pdp__deliveryMain { margin: 0; font-size: var(--fs-1); } .pdp__deliveryMain b { font-weight: var(--fw-semibold); } .pdp__deliveryDate { color: var(--ink-2); } /* Güven listesi */ .pdp__trust { display: grid; gap: var(--sp-2); } .pdp__trust li { display: grid; grid-template-columns: 20px 1fr; gap: var(--sp-3); align-items: start; font-size: var(--fs-1); color: var(--ink-2); } .pdp__trust svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.4; fill: none; color: var(--ink-3); margin-block-start: 2px; } .pdp__trust b { color: var(--ink); font-weight: var(--fw-medium); } /* WhatsApp: logo + yeşil (--wa, beyaz/açık zeminde 4,97:1), ilk bakışta WhatsApp olduğu anlaşılsın. */ .pdp__ask { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); padding-inline: var(--sp-3) var(--sp-4); border: var(--hairline) solid rgb(23 128 74 / 0.35); border-radius: var(--radius-pill); background: rgb(23 128 74 / 0.07); color: var(--wa); font-size: var(--fs-1); font-weight: var(--fw-medium); width: fit-content; text-decoration: none; } .pdp__askIcon { flex: 0 0 auto; } .pdp__askSub { color: var(--ink-2); font-weight: var(--fw-regular); } .pdp__askSub::before { content: "·"; margin-inline-end: var(--sp-2); } .pdp__ask:hover { background: var(--wa); border-color: var(--wa); color: #fff; } .pdp__ask:hover .pdp__askSub { color: rgb(255 255 255 / 0.85); } .pdp__features { display: grid; gap: var(--sp-2); margin-block: var(--sp-3) 0; } .pdp__features li { position: relative; padding-inline-start: var(--sp-4); font-size: var(--fs-1); color: var(--ink-2); } .pdp__features li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.62em; width: 6px; height: 1px; background: var(--ink-3); } .spec { display: grid; grid-template-columns: 7.5rem 1fr; row-gap: var(--sp-2); column-gap: var(--sp-3); margin: 0; font-size: var(--fs-1); } .spec dt { font-family: var(--font-mono); font-size: var(--fs-0); letter-spacing: var(--ls-mono); color: var(--ink-2); text-transform: uppercase; padding-block-start: 2px; } .spec dd { margin: 0; } .pdp__share { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); padding-block-end: var(--sp-6); } .pdp__shareLabel { margin-inline-end: var(--sp-1); font-family: var(--font-mono); font-size: var(--fs-0); letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--ink-2); } .pdp__shareBtn { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); padding-inline: var(--sp-3); border: var(--hairline) solid var(--line); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--fs-0); text-decoration: none; cursor: pointer; } .pdp__shareBtn:hover { border-color: var(--ink); } .pdp__shareBtn--wa svg { color: var(--wa); } .pdp__shareBtn.is-done { border-color: var(--success); color: var(--success); } .pdp__shareBtn[hidden] { display: none; } @media (max-width: 420px) { .pdp__shareLabel { display: none; } } /* üç düğme tek satıra sığsın; grup aria-label taşıyor */ /* --- Tamamlayıcı ürünler -------------------------------------------------- */ .addons { background: var(--surface); border-block: var(--hairline) solid var(--line-2); } .addons__list { display: grid; gap: var(--sp-3); } .addon { display: grid; grid-template-columns: 56px 1fr auto; gap: var(--sp-3); align-items: center; } .addon__media img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-sm); background: var(--surface-3); } .addon__body { display: grid; gap: 2px; min-width: 0; font-size: var(--fs-1); } .addon__body a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (min-width: 720px) { .addons__list { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4) var(--sp-8); } } @media (min-width: 1100px) { .addons__list { grid-template-columns: repeat(3, 1fr); } } /* --- Sabit alt çubuk ------------------------------------------------------ */ .stickybar { gap: var(--sp-3); } .stickybar__img { width: 40px; height: 53px; object-fit: cover; border-radius: var(--radius-sm); flex: 0 0 auto; } .stickybar__body { display: grid; gap: 0; min-width: 0; flex: 1 1 auto; } .stickybar__name { font-size: var(--fs-0); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stickybar .btn { flex: 0 0 auto; } /* 320px telefonda "₺" alt satıra düşüyordu (denetim 19.09.2026): fiyat bölünmez, gerekirse ürün adı kısalır ve fiyat bir kademe küçülür. */ .stickybar .price__now { white-space: nowrap; } @media (max-width: 359px) { .stickybar .price__now { font-size: var(--fs-2); } .stickybar .btn { padding-inline: var(--sp-4); } } /* --- Lightbox ------------------------------------------------------------- */ .lightbox { position: fixed; inset: 0; z-index: var(--z-toast); background: rgb(26 22 20 / 0.96); display: grid; } .lightbox[hidden] { display: none; } .lightbox__track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; align-items: center; } .lightbox__track::-webkit-scrollbar { display: none; } .lightbox__slide { scroll-snap-align: center; display: grid; place-items: center; padding: var(--sp-8) var(--sp-4); } .lightbox__slide img { max-width: 100%; max-height: 86svh; width: auto; height: auto; object-fit: contain; } .lightbox__close { position: absolute; inset-block-start: var(--sp-3); inset-inline-end: var(--sp-3); z-index: 2; width: var(--tap); height: var(--tap); display: grid; place-items: center; background: none; border: 0; color: #fff; } .lightbox__counter { position: absolute; inset-block-start: var(--sp-4); inset-inline-start: var(--gutter); color: rgb(255 255 255 / 0.7); font-size: var(--fs-0); } /* --- Masaüstü ------------------------------------------------------------- */ @media (min-width: 900px) { .pdp__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--sp-10); align-items: start; padding-block-start: var(--sp-4); } .pdp__gallery { margin-inline: 0; position: sticky; inset-block-start: var(--sp-5); } .gallery { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, 1fr); gap: 3px; overflow: visible; background: none; } .gallery__slide { aspect-ratio: var(--ratio-product); } .gallery__dots, .gallery__counter, .gallery__thumbs { display: none; } .stickybar { display: none; } .pdp { padding-block-end: var(--sp-12); } .pdp__info { gap: var(--sp-5); } } /* --- Fenomen tercihi ------------------------------------------------------ */ /* Sayaç sağ üstte; bu sol üstte durur, ikisi çakışmaz. */ .gallery__fenomen { position: absolute; inset-block-start: var(--sp-3); inset-inline-start: var(--sp-3); z-index: 2; display: inline-flex; align-items: center; gap: 5px; padding: 4px var(--sp-2); background: rgb(255 255 255 / 0.9); color: var(--brand-600); border-radius: var(--radius-pill); font-size: var(--fs-0); font-weight: var(--fw-medium); letter-spacing: 0.02em; box-shadow: 0 1px 6px rgb(26 22 20 / 0.12); backdrop-filter: blur(6px); } .fenomen { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: var(--sp-3); row-gap: var(--sp-2); margin-block-start: var(--sp-3); padding: var(--sp-3); background: var(--brand-50); border: var(--hairline) solid rgb(122 31 43 / 0.12); border-radius: var(--radius-md); } /* Profil halkası: Instagram hikâye halkasının marka karşılığı (bordo → sırma). */ .fenomen__ring { flex: 0 0 auto; display: grid; place-items: center; width: 64px; height: 64px; border-radius: var(--radius-pill); background: conic-gradient(from 210deg, var(--brand-600), var(--thread-500), var(--brand-600)); } .fenomen .fenomen__ava { /* Sabit px: halkada yüzde yükseklik Safari'de görseli oval bırakıyor (CLAUDE.md dersi). */ display: block; width: 58px; height: 58px; aspect-ratio: 1; border-radius: var(--radius-pill); border: 2px solid var(--surface); object-fit: cover; background: var(--surface-3); } .fenomen .fenomen__ava--mono { display: grid; place-items: center; background: var(--brand-600); color: #fff; font-family: var(--font-display); font-size: var(--fs-3); line-height: 1; } .fenomen__text { min-width: 0; display: grid; gap: 2px; } .fenomen__eyebrow { margin: 0; font-family: var(--font-mono); font-size: var(--fs-0); letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-600); } .fenomen__title { margin: 0; font-size: var(--fs-1); font-weight: var(--fw-semibold); color: var(--ink); } .fenomen__facts { margin: 0; display: flex; flex-wrap: wrap; column-gap: var(--sp-2); row-gap: 0; font-size: var(--fs-0); color: var(--ink-2); } .fenomen__facts b { font-family: var(--font-num); font-weight: var(--fw-semibold); color: var(--ink); } .fenomen__facts span::before { content: "·"; margin-inline-end: var(--sp-2); color: var(--ink-3); } .fenomen__facts > :first-child::before { content: none; } .fenomen__facts a { color: var(--brand-600); text-decoration: none; font-weight: var(--fw-medium); } .fenomen__facts a:hover { text-decoration: underline; } .fenomen__note { margin: 0; font-size: var(--fs-0); color: var(--ink-2); line-height: 1.5; } .fenomen__follow { position: relative; justify-self: end; padding: var(--sp-1) var(--sp-3); border: var(--hairline) solid var(--brand-600); border-radius: var(--radius-pill); color: var(--brand-600); font-size: var(--fs-0); font-weight: var(--fw-medium); text-decoration: none; white-space: nowrap; } .fenomen__follow::after { content: ""; position: absolute; inset: -8px; } /* dokunma alanı ≥ 44px */ .fenomen__follow:hover { background: var(--brand-600); color: #fff; } /* Dar ekranda düğme metnin altına iner, avatar solda kalır. */ @media (max-width: 460px) { .fenomen { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--sp-3); padding: var(--sp-3); } .fenomen__ring { width: 56px; height: 56px; grid-row: span 2; align-self: start; } .fenomen .fenomen__ava { width: 50px; height: 50px; } .fenomen__follow { justify-self: start; } } /* --- Müşteri yorumları ------------------------------------------------------- */ .reviews { margin-block-start: var(--sp-6); } .reviews__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-2) var(--sp-4); margin-block-end: var(--sp-4); } .reviews__title { font-family: var(--font-display); font-size: var(--fs-4); } .reviews__headText { min-width: 0; } .reviews__headText .eyebrow { margin: 0 0 var(--sp-1); } .reviews__count { font-family: var(--font-mono); font-size: var(--fs-0); color: var(--ink-3); margin: 0; } .reviews__avg { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-1); color: var(--ink-2); } .reviews__stars { --rating: 0; position: relative; display: inline-block; width: 5em; height: 1em; font-size: 14px; line-height: 1; } .reviews__stars::before, .reviews__stars::after { content: "★★★★★"; position: absolute; inset: 0; letter-spacing: 0.05em; color: var(--line); } .reviews__stars::after { color: var(--thread-500); width: calc(var(--rating) / 5 * 100%); overflow: hidden; white-space: nowrap; } .reviews__stars--sm { font-size: 11px; } .reviews__head { align-items: flex-end; } .reviews__count b { color: var(--ink); font-weight: var(--fw-medium); } .reviews__nav { display: flex; gap: var(--sp-2); } .reviews__nav[hidden] { display: none; } .reviews__arrow { display: grid; place-items: center; width: var(--tap); height: var(--tap); border: var(--hairline) solid var(--line); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); cursor: pointer; } .reviews__arrow:hover:not(:disabled) { border-color: var(--ink); } .reviews__arrow:disabled { opacity: 0.35; cursor: default; } /* Kartlar ana sayfa şeridiyle aynı (.revCard, home.css); burada kaydırılabilir rafta, dikey pay kalkma gölgesi için. */ .reviews__rail { grid-auto-columns: minmax(16.5rem, 78%); padding-block: 6px 10px; scroll-padding-inline-start: 0; } @media (min-width: 720px) { .reviews__rail { grid-auto-columns: calc((100% - 2 * var(--sp-3)) / 3); } } @media (min-width: 1100px) { .reviews__rail { grid-auto-columns: calc((100% - 3 * var(--sp-3)) / 4); } } .reviews__card { width: auto; background: var(--surface); border-color: var(--line); box-shadow: 0 1px 2px rgb(26 22 20 / 0.04); } .reviews__card.is-own { border-color: rgb(122 31 43 / 0.28); } .reviews__card .revCard__prod { background: var(--bg); } .reviews__card:hover { transform: none; } .reviews__date { margin-inline-start: auto; font-family: var(--font-mono); font-size: var(--fs-0); color: var(--ink-3); } /* Gerçek stok adedi kaynaktan geliyor; yalnız 10'un altında gösterilir (sayı uydurulmaz). */ .pdp__stock { display: flex; align-items: center; gap: var(--sp-2); margin-block-start: var(--sp-2); color: var(--warning-text); font-variant-numeric: tabular-nums; } .pdp__stock::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; } .stepper.is-max input { color: var(--ink-2); } /* ========================================================================== Fiyat bloğu — dönüşüm odaklı Kullanıcı notu (18.09.2026): indirim oranı fiyatla aynı ağırlıkta olsun, kaçtan kaça düştüğü ve ne kadar kâr kaldığı göze gelsin. Önce: küçük bir "%13" rozeti, kazanılan tutar hiç yok. ========================================================================== */ .pdp__priceBlock.is-sale { gap: var(--sp-2); } .pdp__price { flex-wrap: wrap; row-gap: var(--sp-1); } /* "önce 1.549,90 ₺" — etiket, üstü çizili fiyatın ne olduğunu söylüyor */ .pdp__was, .pdp__now { display: inline-flex; align-items: baseline; gap: var(--sp-1); } .pdp__wasNote { margin: 0; } .pdp__wasLabel { font-family: var(--font-mono); font-size: var(--fs-0); letter-spacing: var(--ls-mono); color: var(--ink-3); text-transform: uppercase; } .pdp__price .price__old { font-size: var(--fs-3); } /* İndirim oranı. Önce --fs-4 (2rem'e kadar) idi ve fiyattan büyük görünüp abartı duruyordu. Artık fiyatın ALTINDA bir kademe (--fs-2) ve dolu bordo çipte: fiyat baş aktör, oran onu destekleyen etiket. Fiyatın orta hizasına oturması için kendi satır yüksekliği sıkı. */ .pdp__off { display: inline-flex; align-items: center; align-self: center; padding: 0.3em 0.6em; border-radius: var(--radius); background: var(--accent); color: #fff; font-size: var(--fs-2); font-weight: var(--fw-semibold); line-height: 1; letter-spacing: 0; } /* Avantaj satırı — yeşil (kullanıcı kararı 29.09.2026: müşteri kârda olduğunu hissetsin; eskiden sırma). */ .pdp__save { display: inline-flex; align-items: center; gap: var(--sp-2); margin: 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--radius); background: var(--success-bg); color: var(--success); font-size: var(--fs-1); justify-self: start; } .pdp__save b { font-weight: var(--fw-semibold); } .pdp__save svg { flex: 0 0 auto; } /* Taksit satırı: düz gri yazıydı, gözden kaçıyordu. Kart ikonu + tutarın vurgulanması taksit seçeneğini gerçek bir satın alma kolaylığı gibi gösteriyor. Zemin yok: fiyat bloğunda iki kutu (kazanç + taksit) üst üste gelince blok ağırlaşıyor. */ .pdp__inst { display: inline-flex; align-items: center; gap: var(--sp-2); margin: 0; font-size: var(--fs-1); color: var(--ink-2); } .pdp__inst svg { flex: 0 0 auto; color: var(--brand-500); } .pdp__inst b { color: var(--ink); font-weight: var(--fw-medium); } .pdp__instSep { color: var(--ink-3); } /* ========================================================================== Galeri — fotoğraf sayısına göre üç ayrı kurgu Ölçüm (18.09.2026): 1 fotoğraf 1049 ürün, 2-3 fotoğraf 1300, 4+ 738. Tek kurgu üçünü de iyi göstermiyordu: tek fotoğraflı üründe kaydırıcı ölü duruyor, iki fotoğraflı üründe kapak şeridi gürültü yapıyordu. ========================================================================== */ /* Tek fotoğraf: büyütme ipucu, kaydırma yok */ .gallery__zoomHint { position: absolute; inset-block-end: var(--sp-3); inset-inline-start: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-3); background: rgb(26 22 20 / 0.62); color: #fff; border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: var(--fs-0); letter-spacing: var(--ls-mono); white-space: nowrap; /* 320px'te iki satıra kırılıyordu */ backdrop-filter: blur(4px); pointer-events: none; } .pdp__gallery--single .gallery { scroll-snap-type: none; overflow-x: hidden; } @media (min-width: 900px) { /* Masaüstünde galeri zaten 2 kolonlu ızgara (satır 146) ve tüm görseller görünüyor — 2-3 fotoğraf için ayrı bir kurala gerek yok, o hâli daha iyi. Tek fotoğrafta ise 2 kolonun biri boş kalıyordu: tek kolona indiriyoruz, görsel galeri sütununun tamamını kaplıyor. */ .pdp__gallery--single .gallery { grid-template-columns: 1fr; } .pdp__gallery--single .gallery__slide { max-height: 80vh; } .pdp__gallery--single .gallery__slide img { object-fit: contain; background: var(--surface-3); } .pdp__gallery--single .gallery__zoomHint { display: none; } /* imleç zaten zoom-in */ } /* Mobilde üç durumda da kaydırma; yalnız göstergeler değişiyor */ @media (max-width: 899px) { .pdp__gallery--few .gallery__thumbs { display: none; } } /* Taksit tablosu (Ödeme seçenekleri) — tutarlar DM Sans (.counter), sağa yaslı */ .instTable { margin-block-start: var(--sp-3); } .instTable:empty { display: none; } .instTable__title { margin: 0 0 var(--sp-2); font-weight: var(--fw-medium); color: var(--ink); } .instTable__grid { width: 100%; border-collapse: collapse; font-size: var(--fs-1); } .instTable__grid th, .instTable__grid td { padding: var(--sp-2) 0; border-block-end: var(--hairline) solid var(--line); text-align: end; font-weight: var(--fw-regular); } .instTable__grid th[scope="row"], .instTable__grid thead th:first-child { text-align: start; } .instTable__grid thead th { color: var(--ink-3); font-size: var(--fs-0); } .instTable__grid td { font-family: var(--font-num); color: var(--ink); } .instTable__note { margin: var(--sp-2) 0 0; font-size: var(--fs-0); } .instTable__fam summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; } /* checkout.css */ /* ========================================================================== Ödeme akışı — Shopify düzeni, marka diliyle ========================================================================== */ .co { background: var(--surface-2); min-height: 100svh; } .co__head { background: var(--surface); border-block-end: var(--hairline) solid var(--line); } .co__headInner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: 60px; } .co__brand { display: inline-flex; align-items: center; } .co__logo { display: block; width: auto; height: 24px; transition: opacity var(--dur) var(--ease); } .co__brand:hover .co__logo { opacity: 0.78; } .co__brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; } .co__steps { display: flex; gap: var(--sp-2); align-items: center; } .co__steps > * { color: var(--ink-3); } .co__steps > *:not(:last-child)::after { content: "›"; margin-inline-start: var(--sp-2); } .co__steps [aria-current="step"] { color: var(--ink); } .co__steps a:hover { color: var(--accent); } .co__headSecure { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-0); font-weight: var(--fw-medium); color: var(--ink-2); white-space: nowrap; } .co__headSecure svg { color: var(--success); } /* Dar ekranda adımlar yerine güven rozeti kalır: logo + kilit okunur, adımlar sıkışmaz. */ @media (max-width: 559px) { .co__steps { display: none; } } /* Mobil özet */ .co__summaryMobile { background: var(--surface); border-block-end: var(--hairline) solid var(--line); } .co__summaryMobile > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--gutter); cursor: pointer; font-size: var(--fs-1); list-style: none; } .co__summaryMobile > summary::-webkit-details-marker { display: none; } .co__summaryMobile > summary span:first-child { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--accent); } .co__summaryMobile > summary span:first-child::after { content: ""; width: 7px; height: 7px; border-inline-end: 1.5px solid currentColor; border-block-end: 1.5px solid currentColor; transform: rotate(45deg); } .co__summaryMobile[open] > summary span:first-child::after { transform: rotate(225deg); } .co__summaryMobile[open] > summary { border-block-end: var(--hairline) solid var(--line-2); } .co__summaryMobile .coSum { padding: var(--sp-4) var(--gutter); } .co__grid { display: grid; gap: var(--sp-8); padding-block: var(--sp-8) var(--sp-12); } /* Başlık bloğu ile bölümler arası tek ritim: form aralığı (sp-5). Başlığa ayrıca marj verilmez. */ .co__form { display: grid; gap: var(--sp-5); min-width: 0; align-content: start; } .co__section { display: grid; gap: var(--sp-4); padding: var(--sp-5); background: var(--surface); border: var(--hairline) solid var(--line); border-radius: var(--radius); min-width: 0; } /* Sayfa başlığı: gövde fontuyla — ödeme adımında display font gürültü olur. */ .co__intro { display: grid; gap: var(--sp-1); } .co__intro p { margin: 0; } .co__title { font-family: var(--font-body); font-size: var(--fs-4); font-weight: var(--fw-semibold); letter-spacing: 0; line-height: var(--lh-snug); margin: 0; } .co__sectionHead h2 { margin: 0; font-family: var(--font-body); font-size: var(--fs-3); font-weight: var(--fw-semibold); letter-spacing: 0; } .co__row { display: grid; gap: var(--sp-4); } @media (min-width: 560px) { .co__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Onay kutusu ve radyo: tarayıcı çizimi yerine marka dili, 20px çizim + 44px dokunma satırı. */ .co__check { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; min-height: var(--tap); padding-block: var(--sp-1); font-size: var(--fs-1); color: var(--ink); cursor: pointer; } .co__check > span { flex: 1 1 0; min-width: 0; line-height: 1.5; } /* Arka arkaya onay kutuları tek grup gibi okunur (fatura). */ .co__check + .co__check, .co__check + [hidden] + .co__check { margin-block-start: calc(var(--sp-4) * -1 + var(--sp-1)); } .co__check input[type="checkbox"], .co__radio input[type="radio"] { flex: 0 0 auto; width: 20px; height: 20px; margin: 0; display: grid; place-items: center; -webkit-appearance: none; appearance: none; background: var(--surface); border: 1.5px solid var(--ink-3); cursor: pointer; transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); } .co__check input[type="checkbox"] { border-radius: 3px; } .co__check input[type="checkbox"]:checked { background: var(--brand-500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; border-color: var(--brand-500); } .co__radio input[type="radio"] { border-radius: 50%; } .co__radio input[type="radio"]::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--brand-500); transform: scale(0); transition: transform var(--dur-fast) var(--ease); } .co__radio input[type="radio"]:checked { border-color: var(--brand-500); } .co__radio input[type="radio"]:checked::before { transform: scale(1); } .co__check input:focus-visible, .co__radio input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } .co__check--contract a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; } .co__radio { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: var(--sp-2) var(--sp-3); align-items: center; min-height: 64px; padding: var(--sp-3) var(--sp-4); border: var(--hairline) solid var(--line); border-radius: var(--radius); background: var(--surface); cursor: pointer; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); } @media (hover: hover) { .co__radio:hover { border-color: var(--ink-3); } } .co__radio:has(input:checked) { border-color: var(--brand-500); box-shadow: inset 0 0 0 1px var(--brand-500); } .co__radioBody { display: grid; gap: 2px; min-width: 0; } .co__radioTitle { font-size: var(--fs-2); font-weight: var(--fw-semibold); color: var(--ink); } .co__radioSub { font-size: var(--fs-0); color: var(--ink-2); } .co__radioPrice { font-size: var(--fs-1); font-weight: var(--fw-medium); white-space: nowrap; } .co__radioPrice.is-free { color: var(--success); } @media (max-width: 479px) { /* Dar ekranda logolar başlığın altına iner, satırı sıkıştırmaz. */ .co__radio--pay .co__radioLogos { grid-column: 2 / -1; justify-content: flex-start; } } /* Seçilen yöntemin açıklaması kartın hemen altına bağlanır. */ .co__payNote { display: flex; gap: var(--sp-2); align-items: flex-start; margin: calc(var(--sp-4) * -1 + 2px) 0 0; padding: var(--sp-3) var(--sp-4); background: var(--surface-2); border: var(--hairline) solid var(--brand-500); border-block-start: 0; border-radius: 0 0 var(--radius) var(--radius); font-size: var(--fs-0); line-height: 1.5; color: var(--ink-2); } .co__payNote svg { flex: 0 0 auto; margin-block-start: 1px; color: var(--success); } .co__radio--pay:has(input:checked):has(+ .co__payNote:not([hidden])) { border-end-start-radius: 0; border-end-end-radius: 0; } .co__warn { padding: var(--sp-3); background: var(--warning-bg); color: var(--warning-text); border-radius: var(--radius); } .co__error { margin: 0; padding: var(--sp-3) var(--sp-4); background: var(--danger-bg); color: var(--danger); border-radius: var(--radius); font-size: var(--fs-1); } /* Onay + buton + güven: tek kart, tek karar anı. */ .co__confirm { display: grid; gap: var(--sp-4); padding: var(--sp-5); background: var(--surface); border: var(--hairline) solid var(--line); border-radius: var(--radius); } .co__submit { min-height: 56px; font-size: var(--fs-2); font-weight: var(--fw-semibold); letter-spacing: 0.01em; } .co__submit.is-busy { opacity: 0.8; } .co__oblig { margin: calc(var(--sp-2) * -1) 0 0; font-size: var(--fs-0); color: var(--ink-2); text-align: center; } .co__trust { display: grid; gap: var(--sp-3); justify-items: center; padding-block-start: var(--sp-4); border-block-start: var(--hairline) solid var(--line-2); } .co__secure { display: flex; align-items: center; gap: var(--sp-2); margin: 0; font-size: var(--fs-1); color: var(--ink); } .co__secure svg { color: var(--success); } .co__trustList { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2) var(--sp-4); } .co__trustList li { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-0); color: var(--ink-2); } .co__trustList svg { color: var(--success); } .co__legal { display: flex; gap: var(--sp-2) var(--sp-5); justify-content: center; flex-wrap: wrap; } .co__legal a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; } .co__card { padding-block: var(--sp-8) var(--sp-12); } .co__iframeWrap { background: var(--surface); border: var(--hairline) solid var(--line); border-radius: var(--radius); overflow: hidden; margin-block: var(--sp-5) var(--sp-4); } /* Özet */ .co__side { display: none; } .coSum { display: grid; gap: var(--sp-4); } .coSum__list { display: grid; gap: var(--sp-3); } .coSum__item { display: grid; grid-template-columns: 52px 1fr auto; gap: var(--sp-3); align-items: center; } .coSum__media { position: relative; display: block; } .coSum__media img { width: 52px; height: 69px; object-fit: cover; border-radius: var(--radius-sm); background: var(--surface-3); } .coSum__qty { position: absolute; inset-block-start: -6px; inset-inline-end: -6px; min-width: 20px; height: 20px; padding-inline: 4px; display: grid; place-items: center; background: var(--ink); color: var(--ink-inverse); border-radius: var(--radius-pill); font-size: 10px; } .coSum__body { display: grid; gap: 2px; min-width: 0; font-size: var(--fs-1); } .coSum__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .coSum__price { font-size: var(--fs-1); white-space: nowrap; } .coSum__item.is-free { background: linear-gradient(to right, var(--thread-100), transparent 70%); } .coSum__totals { display: grid; gap: var(--sp-2); padding-block-start: var(--sp-4); border-block-start: var(--hairline) solid var(--line); margin: 0; } .coSum__totals > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); font-size: var(--fs-1); } .coSum__totals dt { color: var(--ink-2); } .coSum__totals dd { margin: 0; } .coSum__disc dd { color: var(--success); } .coSum__total { padding-block-start: var(--sp-3); border-block-start: var(--hairline) solid var(--line-2); font-size: var(--fs-3) !important; } .coSum__total dt { color: var(--ink) !important; font-weight: var(--fw-medium); } .coSum__total dd { font-weight: var(--fw-semibold); } @media (min-width: 900px) { .co__summaryMobile { display: none; } .co__grid { grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.85fr); align-items: start; } .co__side { display: block; position: sticky; inset-block-start: var(--sp-6); padding: var(--sp-5); background: var(--surface); border: var(--hairline) solid var(--line); border-radius: var(--radius); } } /* --- Sipariş onayı (thanks.php) ------------------------------------------- */ .thx { padding-block: var(--sp-8) var(--sp-16); } .thx__wrap { display: grid; gap: var(--sp-8); } .thx__hero { display: grid; justify-items: start; gap: var(--sp-2); max-width: 44rem; } .thx__badge { width: 56px; height: 56px; display: grid; place-items: center; margin-block-end: var(--sp-2); background: var(--success-bg); color: var(--success); border-radius: var(--radius-pill); animation: thxPop var(--dur-slow) var(--ease-fold) both; } @keyframes thxPop { from { transform: scale(0.6); opacity: 0; } } .thx__no { margin: 0; color: var(--ink-2); } .thx__no b { color: var(--ink); font-weight: var(--fw-semibold); } .thx__title { margin: 0; font-family: var(--font-display); font-size: var(--fs-5); line-height: var(--lh-display); letter-spacing: var(--ls-display); font-weight: 400; } .thx__lead { margin: 0; font-size: var(--fs-3); line-height: var(--lh-snug); color: var(--ink-2); } .thx__mail { margin: 0; font-size: var(--fs-1); color: var(--ink-2); } .thx__mail b { color: var(--ink); font-weight: var(--fw-medium); overflow-wrap: anywhere; } .thx__grid { display: grid; gap: var(--sp-5); } .thx__main, .thx__side { display: grid; gap: var(--sp-5); align-content: start; min-width: 0; } .thx__card { display: grid; gap: var(--sp-4); padding: var(--sp-5); background: var(--surface); border: var(--hairline) solid var(--line); border-radius: var(--radius); min-width: 0; } .thx__cardHead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); } .thx__card h2 { margin: 0; font-family: var(--font-body); font-size: var(--fs-3); font-weight: var(--fw-semibold); letter-spacing: 0; } .thx__items { display: grid; } .thx__item { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: var(--sp-4); align-items: center; padding-block: var(--sp-3); border-block-end: var(--hairline) solid var(--line-2); } .thx__item:first-child { padding-block-start: 0; } .thx__item.is-free { background: linear-gradient(to right, var(--thread-100), transparent 60%); } .thx__media { position: relative; display: block; width: 72px; height: 96px; border-radius: var(--radius-sm); background: var(--surface-3); } .thx__media img { width: 72px; height: 96px; object-fit: cover; border-radius: var(--radius-sm); } .thx__qty { position: absolute; inset-block-start: -6px; inset-inline-end: -6px; min-width: 22px; height: 22px; padding-inline: 5px; display: grid; place-items: center; background: var(--ink); color: var(--ink-inverse); border-radius: var(--radius-pill); font-size: var(--fs-0); } .thx__body { display: grid; gap: 4px; justify-items: start; min-width: 0; } .thx__name { font-size: var(--fs-1); font-weight: var(--fw-medium); color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } a.thx__name:hover { color: var(--accent); } .thx__meta { font-size: var(--fs-0); color: var(--ink-2); } .thx__price { display: grid; justify-items: end; gap: 2px; font-size: var(--fs-1); font-weight: var(--fw-medium); white-space: nowrap; } .thx__price small { font-size: var(--fs-0); font-weight: var(--fw-regular); color: var(--ink-2); } .thx__totals { display: grid; gap: var(--sp-2); margin: 0; } .thx__totals > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); font-size: var(--fs-1); } .thx__totals dt { color: var(--ink-2); } .thx__totals dd { margin: 0; } .thx__totals .is-disc dd { color: var(--success); } .thx__totals .is-free { color: var(--success); } .thx__total { padding-block-start: var(--sp-3); margin-block-start: var(--sp-1); border-block-start: var(--hairline) solid var(--line); font-size: var(--fs-3) !important; } .thx__total dt { color: var(--ink) !important; font-weight: var(--fw-medium); } .thx__total dd { font-weight: var(--fw-semibold); white-space: nowrap; } /* Sırada ne var: dikey zaman çizelgesi, yapılan adım yeşil, şimdiki bordo. */ .thx__steps { display: grid; margin: 0; padding: 0; list-style: none; } .thx__step { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--sp-3); padding-block-end: var(--sp-5); } .thx__step:last-child { padding-block-end: 0; } .thx__step:not(:last-child)::before { content: ""; position: absolute; inset-inline-start: 11px; inset-block: 26px 2px; width: 2px; background: var(--line); } .thx__step.is-done:not(:last-child)::before { background: var(--success); } .thx__dot { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 2px var(--line); color: #fff; } .thx__step.is-done .thx__dot { background: var(--success); box-shadow: none; } .thx__step.is-now .thx__dot { box-shadow: inset 0 0 0 2px var(--brand-500), 0 0 0 4px var(--brand-100); } .thx__step.is-now .thx__dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-500); } .thx__stepBody { display: grid; gap: 2px; padding-block-start: 2px; } .thx__stepBody b { font-size: var(--fs-2); font-weight: var(--fw-semibold); color: var(--ink); } .thx__step.is-next .thx__stepBody b { color: var(--ink-2); font-weight: var(--fw-medium); } .thx__stepBody span { font-size: var(--fs-1); color: var(--ink-2); } .thx__info { gap: 0; padding-block: var(--sp-2); } .thx__infoRow { display: grid; gap: 4px; padding-block: var(--sp-3); border-block-end: var(--hairline) solid var(--line-2); } .thx__infoRow:last-child { border-block-end: 0; } .thx__infoRow p { margin: 0; font-size: var(--fs-1); line-height: 1.5; overflow-wrap: anywhere; } .thx__infoRow .spec-label { color: var(--ink-2); } .thx__bank { border-color: var(--brand-300); padding-block-start: var(--sp-5); } .thx__bank .thx__cardHead { padding-block-end: var(--sp-2); } .thx__iban { font-size: var(--fs-2); letter-spacing: .02em; user-select: all; overflow-wrap: anywhere; } .thx__status { color: var(--success); font-weight: var(--fw-medium); } .thx__help p { margin: 0; font-size: var(--fs-1); color: var(--ink-2); } .thx__help .btn { min-height: 48px; font-size: var(--fs-1); } .thx__more { margin: 0; text-align: center; } @media (min-width: 900px) { .thx__grid { grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); align-items: start; } .thx__side { position: sticky; inset-block-start: var(--sp-6); } } @media (max-width: 479px) { .thx__item { grid-template-columns: 64px minmax(0, 1fr); } .thx__media, .thx__media img { width: 64px; height: 85px; } .thx__price { grid-column: 2; justify-items: start; } } @media (prefers-reduced-motion: reduce) { .thx__badge { animation: none; } } /* Fatura adresi bloğu ve alan ipuçları */ .co__billing { display: grid; gap: var(--sp-4); padding: var(--sp-4); margin-block: 0; background: var(--surface-2); border: var(--hairline) solid var(--line); border-radius: var(--radius); } .field--error .field__label { color: var(--danger); } .co__check.field--error span { color: var(--danger); } /* Hata satırı: kırmızı çerçeve tek başına ne yapılacağını söylemiyor. */ .co__check .field__err { flex-basis: 100%; } /* Özet yenilenirken içerik yerinde kalır, yalnızca soluklaşır (sıçrama yok). */ [data-sum-host].is-busy { opacity: .55; transition: opacity .15s ease; } @media (prefers-reduced-motion: reduce) { [data-sum-host].is-busy { transition: none; } } /* --- Sayfa içi modal (sözleşmeler) --------------------------------------- */ .nsModal { position: fixed; inset: 0; z-index: var(--z-toast); display: grid; place-items: end center; } .nsModal[hidden] { display: none; } .nsModal::before { content: ""; position: absolute; inset: 0; background: rgb(26 22 20 / 0.5); opacity: 0; transition: opacity var(--dur) var(--ease); } .nsModal.is-open::before { opacity: 1; } .nsModal__panel { position: relative; width: min(100%, 680px); max-height: 92svh; display: flex; flex-direction: column; background: var(--surface); border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--shadow-sheet); transform: translateY(100%); transition: transform var(--dur-slow) var(--ease); } .nsModal.is-open .nsModal__panel { transform: none; } @media (min-width: 760px) { .nsModal { place-items: center; } .nsModal__panel { border-radius: var(--radius); max-height: 84svh; transform: translateY(16px) scale(0.98); } .nsModal.is-open .nsModal__panel { transform: none; } } @media (prefers-reduced-motion: reduce) { .nsModal__panel, .nsModal::before { transition: none; } .nsModal .nsModal__panel { transform: none; } } .nsModal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-3) var(--sp-4) var(--sp-5); border-block-end: var(--hairline) solid var(--line); } .nsModal__title { font-family: var(--font-display); font-size: var(--fs-3); letter-spacing: var(--ls-display); margin: 0; } .nsModal__close { width: var(--tap); height: var(--tap); display: grid; place-items: center; background: none; border: 0; color: var(--ink-2); } .nsModal__close:hover { color: var(--ink); } .nsModal__body { flex: 1 1 auto; overflow-y: auto; padding: var(--sp-5); font-size: var(--fs-1); line-height: var(--lh-body); } .nsModal__body h3 { margin-block: var(--sp-5) var(--sp-2); font-size: var(--fs-2); } .nsModal__body p { margin-bottom: var(--sp-3); } .nsModal__body ul { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-3); padding-inline-start: var(--sp-5); list-style: disc; } .nsModal__body mark.todo { background: var(--warning-bg); color: var(--warning); } .nsModal__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5) calc(var(--sp-3) + env(safe-area-inset-bottom)); border-block-start: var(--hairline) solid var(--line); } .nsModal__link { font-size: var(--fs-0); color: var(--ink-2); text-decoration: underline; } .nsModal__skeleton { display: grid; gap: var(--sp-3); } .nsModal__skeleton span { height: 14px; border-radius: 3px; background: var(--line-2); } .nsModal__skeleton span:nth-child(2) { width: 88%; } .nsModal__skeleton span:nth-child(3) { width: 72%; } .nsModal__skeleton span:nth-child(4) { width: 94%; } /* ========================================================================== Sipariş / kargo sorgulama (/siparis-sorgula/) Üyelik yerine bu ekran var: sipariş no + telefon/e-posta ile durum ve kargo takip numarası. Ödeme akışıyla aynı dil kullanılıyor — ikisi de "işlem" ekranı, vitrin değil. ========================================================================== */ .track { padding-block: var(--sp-8) var(--sp-12); } .track__title { font-size: var(--fs-5); margin-block: var(--sp-2) var(--sp-3); } .track__lead { max-width: 46ch; margin-bottom: var(--sp-6); } .track__form { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-5); } @media (min-width: 640px) { .track__form { grid-template-columns: 1fr 1fr auto; align-items: end; } } .track__err { margin-bottom: var(--sp-5); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius); background: var(--danger-bg, #FBEDEC); color: var(--danger, #8A2B22); font-size: var(--fs-1); } .track__result { padding: var(--sp-5); border: var(--hairline) solid var(--line); border-radius: var(--radius); background: var(--surface); } .track__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); } .track__status { font-size: var(--fs-4); margin-block: 2px var(--sp-1); } .track__total { font-size: var(--fs-3); font-weight: var(--fw-semibold); white-space: nowrap; } .track__closed { margin-block: var(--sp-4) 0; font-size: var(--fs-1); } /* Aşama çubuğu */ .trackSteps { display: grid; gap: var(--sp-3); margin-block: var(--sp-5) 0; padding: 0; list-style: none; counter-reset: none; } @media (min-width: 640px) { .trackSteps { grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); } } .trackSteps__s { display: flex; align-items: center; gap: var(--sp-3); position: relative; } @media (min-width: 640px) { .trackSteps__s { flex-direction: column; align-items: flex-start; gap: var(--sp-2); } /* Adımlar arası bağlantı çizgisi */ .trackSteps__s:not(:last-child)::after { content: ""; position: absolute; inset-block-start: 7px; inset-inline-start: 18px; inset-inline-end: -8px; height: 2px; background: var(--line-2); } .trackSteps__s.is-done::after { background: var(--success); } } .trackSteps__dot { flex: 0 0 auto; display: grid; place-items: center; width: 16px; height: 16px; border-radius: var(--radius-pill); background: var(--surface); box-shadow: inset 0 0 0 2px var(--line); color: #fff; position: relative; z-index: 1; } .trackSteps__s.is-done .trackSteps__dot { background: var(--success); box-shadow: none; } .trackSteps__s.is-now .trackSteps__dot { background: var(--accent); box-shadow: 0 0 0 4px var(--brand-50); } .trackSteps__label { font-size: var(--fs-1); color: var(--ink-3); } .trackSteps__s.is-done .trackSteps__label { color: var(--ink-2); } .trackSteps__s.is-now .trackSteps__label { color: var(--brand-700); font-weight: var(--fw-semibold); } /* Kargo kutusu — takip numarası ve bağlantı */ .trackCargo { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-3); margin-block-start: var(--sp-5); padding: var(--sp-4); border-radius: var(--radius); background: var(--surface-2); border: var(--hairline) solid var(--line-2); } .trackCargo__icon { color: var(--brand-500); } .trackCargo__body { display: grid; gap: 2px; min-width: 0; } .trackCargo__no { font-size: var(--fs-2); word-break: break-all; } .track__lines { margin-block-start: var(--sp-5); } .track__lines ul { display: grid; gap: var(--sp-2); margin-block-start: var(--sp-2); padding: 0; list-style: none; } .track__lines li { display: flex; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-1); } .track__addr { margin-block-start: var(--sp-4); } .track__help { margin-block-start: var(--sp-6); } /* Pazarlama izni: tek onay noktası. İndirim kodu sitede hiç gösterilmiyor, yalnız e-postayla gidiyor; kutu bu yüzden görünür bir teklif gibi duruyor, gri bir satır değil. */ .co__optin { align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3); border: var(--hairline) solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2, var(--bg)); } .co__optin:has(input:checked) { border-color: var(--brand-500); background: var(--brand-50); } .co__optinText { display: grid; gap: 2px; } .co__optinText b { font-weight: var(--fw-semibold); } .co__optinNote { font-size: var(--fs-0); color: var(--ink-3); line-height: 1.45; } /* --- Ürün değerlendirme sayfası (/degerlendir/, ReviewRequest) ------------ */ .rvf { max-width: 640px; display: grid; gap: var(--sp-5); } .rvf__head { display: grid; gap: var(--sp-2); } .rvf__head .eyebrow { margin: 0; } .rvf__title { margin: 0; font-family: var(--font-display); font-size: var(--fs-5); line-height: 1.1; } .rvf__lead { margin: 0; color: var(--ink-2); line-height: 1.55; } .rvf__note { margin: 0; padding: var(--sp-3) var(--sp-4); border-radius: var(--radius); } .rvf__note--ok { background: var(--success-bg); color: var(--success); } .rvf__note--err { background: var(--warning-bg); color: var(--warning-text); } .rvf__form { display: grid; gap: var(--sp-4); } .rvf__item { display: grid; gap: var(--sp-3); margin: 0; padding: var(--sp-4); background: var(--surface); border: var(--hairline) solid var(--line); border-radius: var(--radius-md); min-width: 0; } .rvf__item:disabled { opacity: 0.7; } .rvf__prod { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3); align-items: center; } .rvf__prod img { width: 64px; height: 85px; object-fit: cover; border-radius: var(--radius-sm); background: var(--surface-3); } .rvf__name { margin: 0; font-weight: var(--fw-medium); } .rvf__state { margin: var(--sp-1) 0 0; font-size: var(--fs-0); color: var(--ink-2); } /* Yıldızlar: DOM'da 5→1, görsel olarak soldan 1→5 (row-reverse); seçilen ve solundakiler dolar. */ .rvf__stars { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; } .rvf__stars input { position: absolute; opacity: 0; width: 1px; height: 1px; } .rvf__stars label { display: grid; place-items: center; width: 44px; height: 44px; cursor: pointer; color: var(--line); } .rvf__stars svg { fill: currentColor; transition: color var(--dur) var(--ease), transform var(--dur) var(--ease); } .rvf__stars input:checked ~ label, .rvf__stars label:hover, .rvf__stars label:hover ~ label { color: var(--thread-500); } .rvf__stars input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); } @media (prefers-reduced-motion: no-preference) { .rvf__stars label:hover svg { transform: scale(1.08); } } .rvf__textLabel { font-size: var(--fs-1); font-weight: var(--fw-medium); } .rvf__submit { min-height: 52px; } /* fab.css */ /* --- Sağ alt yardımcılar: WhatsApp + başa dön ---------------------------- --fab-lift JS'ten gelir: o an görünen yapışkan çubuğun (ürün çubuğu, Şal Kutusu tepsisi, sepet çubuğu) yüksekliği. Butonlar hep onun üstünde durur. z-index: yapışkan çubukların (90) üstü, çerez/e-posta kutusunun (140) ve çekmecelerin (200) altı. */ .fab { position: fixed; z-index: calc(var(--z-sticky) + 5); inset-inline-end: max(var(--sp-3), env(safe-area-inset-right)); inset-block-end: calc(var(--sp-3) + var(--fab-lift, 0px) + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); transition: inset-block-end var(--dur) var(--ease), opacity var(--dur) var(--ease); pointer-events: none; } .fab.is-off { opacity: 0; } .fab.is-off .fab__btn { pointer-events: none; } .fab__btn { pointer-events: auto; display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border-radius: 50%; border: var(--hairline) solid var(--line); background: rgb(255 255 255 / 0.94); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: var(--shadow-lift); color: var(--brand-500); cursor: pointer; transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), opacity var(--dur) var(--ease); } .fab__btn:active { transform: scale(0.94); } .fab__btn:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; } @media (hover: hover) { .fab__btn:hover { box-shadow: var(--shadow-pop); transform: translateY(-1px); } } /* WhatsApp: kendi logosu gibi dolu yeşil daire, beyaz ikon (kullanıcı kararı 19.09.2026). Logonun #25D366'sı üzerinde beyaz 1,98:1 ölçüldü; bir ton koyusu #1DA851'de 3,1:1 — ikon (grafik öğe) için WCAG 3:1 eşiğini geçer, göz yine WhatsApp yeşili olarak okur. */ /* 27.09.2026: sitedeki tüm WhatsApp düğmeleri tek token'da (--wa #17804A, beyazla 4,97:1). */ .fab__wa { background: var(--wa); border-color: var(--wa); color: #fff; box-shadow: 0 4px 14px rgb(23 128 74 / 0.32); } .fab__wa svg { display: block; width: 24px; height: 24px; } @media (hover: hover) { .fab__wa:hover { background: var(--wa-hover); border-color: var(--wa-hover); box-shadow: 0 6px 18px rgb(23 128 74 / 0.4); } } .fab__top[hidden] { display: grid; opacity: 0; transform: translateY(6px); pointer-events: none; visibility: hidden; } .fab__top { visibility: visible; } @media (min-width: 1024px) { .fab { inset-inline-end: var(--sp-6); inset-block-end: calc(var(--sp-6) + var(--fab-lift, 0px)); } } @media (prefers-reduced-motion: reduce) { .fab, .fab__btn { transition: none; } } /* theme-sf.css */ /* ========================================================================== Şal Fabrikası vitrin teması — tokens.css'ten HEMEN sonra yüklenir. Kullanıcı kararı (29.09.2026): Nice Scarfs'ın sıcak perakende tonu ile soğuk kurumsal arasında. Bordo marka rengi ve Newsreader büyük başlık kalır; zemin nötr taş, koyu bantlar antrasit, bölüm başlıkları sans (kurumsal okunuş). Nice Scarfs bileşen dosyalarına dokunulmaz; fark yalnız token ve birkaç temel kural. ========================================================================== */ :root { --surface-2: #F3F2EF; /* nötr taş zemin (Nice Scarfs ten #F5F2F0) */ --surface-3: #E6E4DF; --line: #DDDAD4; --line-2: #EBE9E5; /* Okunabilirlik hedefi WCAG AAA (kullanıcı kararı 29.09.2026): normal metin ≥ 7:1, büyük ≥ 4,5:1. Oranlar en koyu zemine (taş #F3F2EF) göre ÖLÇÜLDÜ; yeni renk eklerken ölç, göz kararı yazma. */ --ink: #1C1D20; /* taş zeminde 15,6:1 */ --ink-2: #4B4C51; /* taş 7,65 · beyaz 8,57 */ --ink-3: #4F5155; /* taş 7,10 · beyaz 7,95 (hiyerarşi boyutla, açıklıkla değil) */ --ink-inverse: #F6F5F2; --success: #305942; /* açık yeşil zeminde 7,07 */ --warning-text: #6F4C0C; /* uyarı zemininde 7,01 */ --danger: #98261F; /* hata zemininde 7,00 */ --thread-700: #634C27; /* sırma zemininde 7,01 */ --wa: #12663B; /* beyaz yazı/simge 7,02 (#17804A 4,97 idi) */ --wa-hover: #0E5230; /* Antrasit bantlar: hero altı koşullar, özel üretim, kapanış */ --sf-dark: #1F2328; --sf-dark-2: #2A2F36; --sf-dark-line: rgb(246 245 242 / 0.14); --sf-on-dark: #F6F5F2; --sf-on-dark-2: rgb(246 245 242 / 0.8); /* antrasitte ≥ 7,9 · antrasit-2'de ≥ 7,5 */ --container: 1320px; --shadow-pop: 0 8px 28px rgb(28 29 32 / 0.12); --shadow-lift: 0 2px 10px rgb(28 29 32 / 0.08); } body { background: var(--surface-2); } /* Bölüm başlıkları sans: kurumsal, bilgi yoğun sayfada daha net. Büyük hero ve doküman başlığı Newsreader kalır. */ .head__title, .cathead h1, .catcopy__title, .closeBand__title, .promise__title, .bundleTeaser__title { font-family: var(--font-body); font-weight: var(--fw-semibold); letter-spacing: -0.018em; line-height: 1.15; } /* Özel üretim bandı antrasit (kapanış bandı bordo kalır: marka anı) */ .bundleTeaser { background: var(--sf-dark); color: var(--sf-on-dark); } /* b2b.css */ /* ========================================================================== Şal Fabrikası — toptan eklentileri. Tasarım sistemi Nice Scarfs'tan (tokens, motifs, base, components, nav, layout, home, box, drawer, pdp, checkout, fab) BİREBİR gelir; o dosyalar burada değiştirilmez. Bu dosya yalnız Nice Scarfs'ta karşılığı olmayan toptan bileşenlerini aynı token'larla ekler (fiyat kilidi, en az adet, özel üretim bandı, tesis rafı, referanslar, bayi hesabı). Ölçek dışı değer, yeni renk yok. ========================================================================== */ /* --- Fiyat: yalnız onaylı bayiye ----------------------------------------- */ .price__vat { font-size: var(--fs-0); color: var(--ink-2); align-self: baseline; } /* Toptan fiyatta indirim çipi yok: Nice Scarfs kart fiyat ızgarası yerine tek satır (fiyat + "+ KDV") */ .card__body .price--b2b, .price--b2b { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-2); } .priceLock { display: flex; align-items: center; gap: var(--sp-2); margin: 0; font-size: var(--fs-0); color: var(--ink-2); line-height: var(--lh-snug); } .priceLock svg { flex: 0 0 auto; color: var(--brand-500); } .priceLock a { color: var(--brand-600); font-weight: var(--fw-medium); position: relative; z-index: 1; } .priceLock a::after { content: ""; position: absolute; inset: -12px -6px; } .priceLock--block { display: grid; gap: var(--sp-3); padding: var(--sp-4); background: var(--surface-2); border-radius: var(--radius); font-size: var(--fs-1); } .priceLock--block p { margin: 0; } .pdp__lockCta { display: flex; flex-wrap: wrap; gap: var(--sp-2); } /* Kart: SKU + stok satırı (mono), fiyatın altında */ .card__stock { margin: 0; font-size: 11px; letter-spacing: var(--ls-mono); color: var(--success); text-transform: none; } .card__stock.is-low { color: var(--warning-text); } /* Header: onay bekleyen bayi noktası */ .header__dot { position: absolute; inset-block-start: 9px; inset-inline-end: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--warning); box-shadow: 0 0 0 2px var(--surface); } /* --- Adet: toptan sayaç (50–1000+ adet sığar) ---------------------------- */ .stepper--wide input { width: 72px; font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: var(--fw-medium); } .stepper--sm.stepper--wide input { width: 56px; } @media (pointer: coarse) { .stepper--sm.stepper--wide input { width: 60px; } } .qtyPresets { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .qtyPresets .chip { min-height: 36px; padding-inline: var(--sp-3); background: var(--surface); font-family: var(--font-num); font-size: var(--fs-0); } .qtyPresets .chip.is-current { border-color: var(--ink); } .pdp__line { margin: 0; } .pdp__stock.is-ok { color: var(--success); } .pdp__fav { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); padding: 0; background: none; border: 0; color: var(--ink-2); font-size: var(--fs-1); } .pdp__fav[aria-pressed="true"] { color: var(--brand-600); } .pdp__fav[aria-pressed="true"] svg { fill: currentColor; } /* --- Özel üretim bandı (Nice Scarfs .bundleTeaser üzerine) --------------- */ .prodTeaser__steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2) var(--sp-4); margin: 0 0 var(--sp-6); padding: 0; list-style: none; } .prodTeaser__steps li { display: grid; gap: 2px; padding-inline-start: var(--sp-3); border-inline-start: 2px solid var(--thread-500); } .prodTeaser__steps .counter { font-size: var(--fs-0); color: var(--thread-100); } .prodTeaser__steps b { font-size: var(--fs-1); font-weight: var(--fw-medium); } .prodTeaser__tray { grid-template-columns: repeat(2, 1fr); } .prodTeaser__tray .bslot { aspect-ratio: 4 / 3; margin: 0; } .prodTeaser__cap { position: absolute; inset: auto 0 0 0; padding: var(--sp-6) var(--sp-3) var(--sp-2); background: linear-gradient(to top, rgb(26 22 20 / 0.72), transparent); font-family: var(--font-mono); font-size: var(--fs-0); letter-spacing: var(--ls-mono); color: var(--ink-inverse); } .prodHero .crumbs { color: rgb(251 248 246 / 0.7); } .prodHero .crumbs a:hover { color: #fff; } .prodHero__media { margin: 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; background: rgb(251 248 246 / 0.08); } .prodHero__media img { width: 100%; height: 100%; object-fit: cover; } @media (max-width: 879px) { .prodHero__media { max-height: 420px; } } /* --- Tesis rafı (Nice Scarfs .fabricCard, yatay fotoğraf) ---------------- */ .fabricCard--wide { margin: 0; } .fabricCard--wide .fabricCard__media { aspect-ratio: 3 / 2; } .facility__lead { max-width: 62ch; margin: calc(var(--sp-3) * -1) 0 var(--sp-5); font-size: var(--fs-1); } .fabricEx .fabricCard--wide .spec-row { margin-top: var(--sp-1); } /* --- Yorumlar ve referanslar (Nice Scarfs .revBand) ---------------------- */ .revCard--static { grid-template-rows: 1fr auto; padding-block-end: var(--sp-4); margin: 0; } .revCard--static:hover { transform: none; box-shadow: none; } .revCard--static .revCard__quote { margin: 0; } .refs { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3) var(--sp-8); margin: var(--sp-8) 0 0; padding: var(--sp-5) 0 0; list-style: none; border-block-start: var(--hairline) solid var(--line-2); } .refs li { font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--ink-2); } /* --- Adımlar ızgarası (Nice Scarfs .guideSteps) -------------------------- */ @media (min-width: 900px) { .guideSteps--grid { grid-template-columns: repeat(4, 1fr); } } /* --- Boş durum ----------------------------------------------------------- */ .listEmpty { display: grid; gap: var(--sp-3); justify-items: start; padding-block: var(--sp-8); } .listEmpty > * { margin: 0; } .listEmpty__title { font-size: var(--fs-3); } /* --- Form yerleşimi (Nice Scarfs form standardı .field/.input) ----------- */ .formStack { display: grid; gap: var(--sp-4); } .formStack > * { margin: 0; } .formRow { display: grid; gap: var(--sp-4); } @media (min-width: 640px) { .formRow { grid-template-columns: 1fr 1fr; } } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .filters--drawer { padding: var(--sp-4) var(--gutter); } .filters__actions { display: flex; gap: var(--sp-2); } /* --- Bayi hesabı --------------------------------------------------------- */ .accSplit { display: grid; gap: var(--sp-8); } .accSplit > * { min-width: 0; } .accSplit .doc { max-width: none; } @media (min-width: 1024px) { .accSplit { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr); align-items: start; } .accAside { position: sticky; inset-block-start: calc(var(--header-h) + var(--sp-8)); } } .accAside { display: grid; gap: var(--sp-4); } .accNarrow { max-width: 480px; } .accNav { margin-block-end: var(--sp-6); } .accNav .chip.is-current { border-color: var(--ink); background: var(--ink); color: var(--ink-inverse); } .accNav__out { margin: 0 0 0 auto; } .accNav__out .chip { background: none; cursor: pointer; } .accGrid { display: grid; gap: var(--sp-8); } .accGrid > * { min-width: 0; } @media (min-width: 1024px) { .accGrid { grid-template-columns: 1.3fr 1fr; align-items: start; } } .accTimeline { display: grid; gap: var(--sp-2); margin: 0 0 var(--sp-4); padding: 0; list-style: none; font-size: var(--fs-1); } .accTimeline li { padding-inline-start: var(--sp-3); border-inline-start: 2px solid var(--line); } .stTag { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-0); white-space: nowrap; } .stTag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); } .stTag--ok::before { background: var(--success); } .stTag--wait::before { background: var(--warning); } .stTag--off::before { background: var(--danger); } /* --- Sepet: toptan ekleri ------------------------------------------------ */ .cartNote--err { border-color: var(--danger); background: var(--danger-bg); color: var(--danger); } .cartCheckout { display: grid; gap: var(--sp-3); margin-block: var(--sp-4); } .cartShip { border: var(--hairline) solid var(--line); border-radius: var(--radius); padding: 0 var(--sp-4); background: var(--surface); } .cartShip > summary { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); cursor: pointer; list-style: none; font-size: var(--fs-1); } .cartShip > summary::-webkit-details-marker { display: none; } .cartShip > summary::after { content: "+"; margin-inline-start: auto; color: var(--ink-2); } .cartShip[open] > summary::after { content: "−"; } .cartShip > .formStack { padding-block-end: var(--sp-4); } .bulkAdd { margin-block: var(--sp-8) var(--sp-12); padding-block-start: var(--sp-6); border-block-start: var(--hairline) solid var(--line); max-width: 680px; } .bulkAdd .head { margin-bottom: var(--sp-3); } .bulkAdd__list { font-family: var(--font-mono); font-size: var(--fs-1); } .payFrame { width: 100%; min-height: 640px; border: 0; } /* --- Hakkımızda ---------------------------------------------------------- */ .aboutStats { margin-block-end: var(--sp-6); } /* ========================================================================== Toptan vitrin v2 (29.09.2026) — kurumsal düzen. Token'lar theme-sf.css'te. ========================================================================== */ /* --- Üst şerit: koşullar + iletişim (kayan duyuru yerine, sabit) --------- */ .utilbar { background: var(--sf-dark); color: var(--sf-on-dark-2); font-size: var(--fs-0); } .utilbar__in { display: flex; align-items: center; justify-content: center; gap: var(--sp-4); min-height: 34px; } :where(.utilbar) ul { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; } .utilbar__terms { gap: var(--sp-2) var(--sp-4); flex-wrap: nowrap; overflow: hidden; } .utilbar__terms li { white-space: nowrap; } .utilbar__terms li + li::before { content: "·"; margin-inline-end: var(--sp-4); color: var(--sf-dark-line); color: rgb(246 245 242 / 0.4); } .utilbar__terms li:nth-child(n+3) { display: none; } .utilbar__links { display: none; gap: var(--sp-5); } .utilbar__links a { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; color: var(--sf-on-dark); } .utilbar__links a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; } @media (min-width: 640px) { .utilbar__terms li:nth-child(n+3) { display: list-item; } } @media (min-width: 1024px) { .utilbar__in { justify-content: space-between; } .utilbar__links { display: flex; } } /* --- Başlık: masaüstünde logo solda, açık arama, etiketli hesap/sepet ----- */ .hsearch { display: none; } .header__label { display: none; } .header__cta { display: none; } @media (min-width: 1024px) { .header__bar { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-6); min-height: 72px; } .header__brand { grid-column: 1; justify-self: start; } .hsearch { grid-column: 2; display: flex; align-items: center; gap: var(--sp-2); width: 100%; max-width: 560px; justify-self: center; height: 44px; padding-inline: var(--sp-4); background: var(--surface-2); border: var(--hairline) solid var(--line); border-radius: var(--radius-pill); color: var(--ink-2); transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); } .hsearch:focus-within { border-color: var(--ink); background: var(--surface); } .hsearch__input { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; background: none; font: inherit; font-size: var(--fs-1); color: var(--ink); outline: none; } .hsearch__input::placeholder { color: var(--ink-3); } .header__actions { grid-column: 3; gap: var(--sp-1); } .header__icon--search { display: none; } .header__cta { display: inline-flex; margin-inline-start: var(--sp-2); } } @media (min-width: 1200px) { .header__icon--labelled { width: auto; display: inline-flex; gap: var(--sp-2); padding-inline: var(--sp-2); } .header__label { display: inline; font-size: var(--fs-1); white-space: nowrap; } .header__icon--labelled .header__count { inset-inline-end: auto; inset-inline-start: 22px; } } /* Mega menü ekleri */ @media (min-width: 1024px) { .mega__colHead--gap { margin-block-start: var(--sp-5); } .mega__col--text { max-width: 320px; } .mega__facts { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; font-size: var(--fs-1); color: var(--ink-2); } .mega__facts b { color: var(--ink); font-weight: var(--fw-semibold); } } .dd__sub { margin: var(--sp-5) 0 var(--sp-1); padding-inline: var(--gutter); } /* --- Hero ---------------------------------------------------------------- */ .b2bHero { padding-block: var(--sp-8) var(--sp-10); background: var(--surface-2); overflow: hidden; } .b2bHero__in { display: grid; gap: var(--sp-8); align-items: center; } .b2bHero__in > * { min-width: 0; } .b2bHero__eyebrow { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-mono); font-size: var(--fs-0); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--ink-2); } .b2bHero__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px var(--success-bg); } .b2bHero__title { margin: var(--sp-4) 0 var(--sp-4); font-family: var(--font-display); font-size: clamp(2.25rem, 1.5rem + 3.6vw, 4rem); font-weight: var(--fw-medium); line-height: 1.04; letter-spacing: -0.02em; max-width: 14ch; } .b2bHero__title em { font-style: italic; color: var(--brand-500); } .b2bHero__lead { margin: 0 0 var(--sp-6); max-width: 54ch; font-size: var(--fs-3); line-height: var(--lh-body); color: var(--ink-2); } .b2bHero__lead b { color: var(--ink); font-weight: var(--fw-semibold); } .b2bHero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); } .b2bHero__cta .btn { min-height: 48px; padding-inline: var(--sp-6); font-size: var(--fs-2); } .b2bHero__note { margin: var(--sp-3) 0 0; font-size: var(--fs-1); color: var(--ink-3); } .b2bHero__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: var(--sp-4); margin: var(--sp-8) 0 0; padding: var(--sp-5) 0 0; list-style: none; border-block-start: var(--hairline) solid var(--line); } .b2bHero__stats li { display: grid; gap: 2px; } .b2bHero__stats b { font-family: var(--font-num); font-size: var(--fs-4); font-weight: var(--fw-semibold); line-height: 1.1; letter-spacing: -0.02em; } .b2bHero__stats span { font-size: var(--fs-0); color: var(--ink-2); } .b2bHero__media { position: relative; } .b2bHero__tiles { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, auto); gap: var(--sp-2); } .b2bHero__tile { display: block; overflow: hidden; border-radius: var(--radius); background: var(--surface-3); aspect-ratio: 3 / 4; } .b2bHero__tile:first-child { grid-row: span 2; aspect-ratio: auto; } .b2bHero__tile img { width: 100%; height: 100%; object-fit: cover; } .b2bHero__tile:nth-child(n+6) { display: none; } .b2bHero__card { position: absolute; inset-inline-start: var(--sp-3); inset-block-end: var(--sp-3); display: grid; gap: 2px; max-width: 240px; padding: var(--sp-3) var(--sp-4); background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-pop); } .b2bHero__card b { font-family: var(--font-num); font-size: var(--fs-4); font-weight: var(--fw-semibold); line-height: 1.1; } .b2bHero__card > span:last-child { font-size: var(--fs-0); color: var(--ink-2); } @media (max-width: 639px) { .b2bHero__tiles { grid-template-columns: repeat(3, 1fr); } .b2bHero__tile:first-child { grid-row: auto; aspect-ratio: 3 / 4; } .b2bHero__tile:nth-child(n+4) { display: none; } .b2bHero__card { position: static; margin-block-start: var(--sp-3); max-width: none; box-shadow: none; border: var(--hairline) solid var(--line); } .b2bHero__cta .btn { flex: 1 1 100%; } } @media (min-width: 1024px) { .b2bHero { padding-block: var(--sp-12) var(--sp-16); } .b2bHero__in { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--sp-12); } } /* --- Koşul bandı (antrasit) --------------------------------------------- */ .termsBand { background: var(--sf-dark); color: var(--sf-on-dark); } .termsBand__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; } .termsBand__list li { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-2); border-block-end: var(--hairline) solid var(--sf-dark-line); } .termsBand__icon { flex: 0 0 auto; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--sf-dark-2); color: var(--thread-300); } .termsBand__text { display: grid; min-width: 0; line-height: 1.3; } .termsBand__text span { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--sf-on-dark-2); } .termsBand__text b { font-size: var(--fs-1); font-weight: var(--fw-semibold); } @media (min-width: 900px) { .termsBand__list { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .termsBand__list li { border-block-end: 0; border-inline-start: var(--hairline) solid var(--sf-dark-line); padding: var(--sp-5) var(--sp-4); } .termsBand__list li:first-child { border-inline-start: 0; padding-inline-start: 0; } } /* --- Dört adım ------------------------------------------------------------ */ .steps4 { padding-block: var(--sp-12) var(--sp-8); } .steps4__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); margin: 0; padding: 0; list-style: none; } .steps4__item { position: relative; display: grid; gap: var(--sp-1); align-content: start; padding: var(--sp-4) var(--sp-3); background: var(--surface); border: var(--hairline) solid var(--line); border-radius: var(--radius); } .steps4__item h3 { margin: 0; font-size: var(--fs-2); font-weight: var(--fw-semibold); letter-spacing: -0.01em; } .steps4__item p { font-size: var(--fs-0); } @media (min-width: 640px) { .steps4__list { gap: var(--sp-3); } .steps4__item { padding: var(--sp-5); gap: var(--sp-2); } .steps4__item h3 { font-size: var(--fs-3); } .steps4__item p { font-size: var(--fs-1); } } .steps4__item p { margin: 0; color: var(--ink-2); } .steps4__no { font-family: var(--font-num); font-size: var(--fs-0); font-weight: var(--fw-semibold); color: var(--brand-500); letter-spacing: 0.06em; } .steps4__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: var(--sp-6) 0 0; } @media (min-width: 1024px) { .steps4__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } .steps4__item:not(:last-child)::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-end: calc(var(--sp-3) * -1); width: var(--sp-3); height: 1px; background: var(--line); } } /* --- Bayi avantajları ------------------------------------------------------ */ .perks { background: var(--surface); border-block: var(--hairline) solid var(--line); } .perks__grid { display: grid; gap: var(--sp-6) var(--sp-5); margin: 0; padding: 0; list-style: none; } .perks__item { display: grid; gap: var(--sp-2); align-content: start; } .perks__item h3 { margin: var(--sp-1) 0 0; font-size: var(--fs-2); font-weight: var(--fw-semibold); } .perks__item p { margin: 0; font-size: var(--fs-1); color: var(--ink-2); } .perks__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius); background: var(--brand-50); color: var(--brand-600); } .perks__item--plain { padding-block-start: var(--sp-3); border-block-start: 2px solid var(--brand-500); } @media (min-width: 640px) { .perks__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .perks__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* --- Marka kutuları -------------------------------------------------------- */ .brandTiles__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin: 0; padding: 0; list-style: none; } .brandTile { position: relative; display: block; overflow: hidden; border-radius: var(--radius); background: var(--sf-dark); color: var(--sf-on-dark); aspect-ratio: 4 / 5; } .brandTile__media { position: absolute; inset: 0; } .brandTile__media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.78; transition: transform var(--dur-slow) var(--ease), opacity var(--dur) var(--ease); } .brandTile__body { position: absolute; inset: auto 0 0; display: grid; gap: 2px; padding: var(--sp-8) var(--sp-4) var(--sp-4); background: linear-gradient(to top, rgb(20 22 26 / 0.86), transparent); } .brandTile__body b { font-size: var(--fs-3); font-weight: var(--fw-semibold); } .brandTile__body span { font-family: var(--font-mono); font-size: var(--fs-0); color: var(--sf-on-dark-2); } @media (hover: hover) { .brandTile:hover img { transform: scale(1.04); opacity: 0.9; } } @media (min-width: 900px) { .brandTiles__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } } /* --- Toptan kart ----------------------------------------------------------- */ .card--b2b .card__body { gap: 4px; } .card__code { display: flex; flex-wrap: wrap; gap: 0 var(--sp-2); margin: 0; font-size: 11px; line-height: 1.35; color: var(--ink-3); } .card__sku { font-family: var(--font-mono); letter-spacing: var(--ls-mono); color: var(--ink-2); } .card__code > span + span::before { content: "·"; margin-inline-end: var(--sp-2); } .card__avail { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--fs-0); color: var(--ink-2); } .card__avail::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); } .card__avail.is-ok::before { background: var(--success); } .card__avail.is-low::before { background: var(--warning); } .card__avail.is-out::before { background: var(--danger); } /* Renk kartelası: görselin sağ altında, üst üste binen küçük noktalar (ilk nokta bu kartın rengi) */ .card__swatches { position: absolute; inset-inline-end: var(--sp-2); inset-block-end: var(--sp-2); z-index: 1; display: flex; align-items: center; padding: 3px 6px 3px 3px; border-radius: var(--radius-pill); background: rgb(255 255 255 / 0.92); box-shadow: 0 1px 3px rgb(26 22 20 / 0.12); pointer-events: none; } .card__dot { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid #fff; box-shadow: 0 0 0 1px rgb(26 22 20 / 0.18); flex: 0 0 auto; } .card__dot + .card__dot { margin-inline-start: -4px; } .card__dot.is-current { box-shadow: 0 0 0 1px var(--ink); } .card__dot.is-out { opacity: 0.45; } .card__dotMore { margin-inline-start: 4px; font-size: 11px; font-weight: var(--fw-medium); color: var(--ink); font-family: var(--font-num); } .b2bPrice { display: grid; gap: 2px; margin-block-start: 2px; } .b2bPrice .price, .b2bPrice .priceLock { margin: 0; } .b2bPrice__retail { margin: 0; font-size: 11px; color: var(--ink-3); } .b2bPrice__retail .counter { font-family: var(--font-num); } .card--b2b .card__add { margin-block-start: var(--sp-2); } /* --- Ürün sayfası: kâr payı, kademe tablosu, renk tablosu ------------------ */ .pdpDeal { display: grid; gap: var(--sp-1); margin: var(--sp-3) 0 0; padding: var(--sp-3) var(--sp-4); background: var(--success-bg); border-radius: var(--radius); } .pdpDeal > div { display: flex; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-1); } .pdpDeal dt { color: var(--ink-2); } .pdpDeal dd { margin: 0; font-family: var(--font-num); font-weight: var(--fw-semibold); } .pdpDeal__win dd { color: var(--success); } .tierTable { width: 100%; margin: var(--sp-3) 0 0; border-collapse: collapse; font-size: var(--fs-1); } .tierTable caption { text-align: start; padding-block-end: var(--sp-2); } .tierTable th, .tierTable td { padding: var(--sp-2) var(--sp-3); text-align: start; border-block-end: var(--hairline) solid var(--line-2); } .tierTable th { font-weight: var(--fw-medium); color: var(--ink-2); font-size: var(--fs-0); } .tierTable td.counter, .tierTable td:last-child { font-family: var(--font-num); } .tierTable--wide { max-width: 640px; background: var(--surface); border: var(--hairline) solid var(--line); border-radius: var(--radius); } .pdp__matrixLink { color: var(--brand-600); text-decoration: underline; text-underline-offset: 3px; } .colorMatrix { scroll-margin-top: calc(var(--header-h) + var(--sp-8)); } .colorMatrix__form { background: var(--surface); border: var(--hairline) solid var(--line); border-radius: var(--radius); } .colorMatrix__table { width: 100%; border-collapse: collapse; font-size: var(--fs-1); } .colorMatrix__table th { padding: var(--sp-3) var(--sp-4); text-align: start; font-family: var(--font-mono); font-size: 11px; font-weight: var(--fw-regular); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--ink-2); border-block-end: var(--hairline) solid var(--line); } .colorMatrix__table td { padding: var(--sp-2) var(--sp-4); border-block-end: var(--hairline) solid var(--line-2); vertical-align: middle; } .colorMatrix__table tr.is-current td { background: var(--surface-2); } .colorMatrix__table tr.is-picked td { background: var(--success-bg); } .colorMatrix__table tr.is-low td { background: var(--warning-bg); } .colorMatrix__table tr.is-out { color: var(--ink-3); } .colorMatrix__color { display: flex; align-items: center; gap: var(--sp-3); min-height: 44px; } .colorMatrix__color img { width: 40px; height: 53px; object-fit: cover; border-radius: var(--radius-sm); background: var(--surface-3); } .colorMatrix__sku { font-family: var(--font-mono); font-size: var(--fs-0); color: var(--ink-2); } .colorMatrix__stock.is-ok { color: var(--success); } .colorMatrix__bar { position: sticky; inset-block-end: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--surface); border-block-start: var(--hairline) solid var(--line); } .colorMatrix__sum { margin: 0; font-size: var(--fs-1); color: var(--ink-2); } .colorMatrix__err { margin: 0; padding: 0 var(--sp-4) var(--sp-3); font-size: var(--fs-1); color: var(--warning-text); } @media (max-width: 719px) { .colorMatrix__table thead { display: none; } .colorMatrix__table, .colorMatrix__table tbody { display: block; } .colorMatrix__table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "c q" "s q"; align-items: center; padding: var(--sp-2) var(--sp-3); border-block-end: var(--hairline) solid var(--line-2); } .colorMatrix__table td { display: block; padding: 0; border: 0; background: none !important; } .colorMatrix__table tr.is-picked { background: var(--success-bg); } .colorMatrix__table tr.is-low { background: var(--warning-bg); } .colorMatrix__table td:first-child { grid-area: c; } .colorMatrix__table td:last-child { grid-area: q; } .colorMatrix__sku { display: none !important; } .colorMatrix__table td:nth-child(3), .colorMatrix__table td:nth-child(4):not(:last-child) { grid-area: s; font-size: var(--fs-0); padding-inline-start: 52px; } .colorMatrix__table td:nth-child(4):not(:last-child) { display: none; } .colorMatrix__bar .btn { flex: 1 1 100%; } } /* --- Katalog: görünüm düğmesi ve tablo ------------------------------------ */ .viewToggle { display: inline-flex; margin-inline-start: auto; border: var(--hairline) solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); } .viewToggle__btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding-inline: var(--sp-3); font-size: var(--fs-0); color: var(--ink-2); } .viewToggle__btn + .viewToggle__btn { border-inline-start: var(--hairline) solid var(--line); } .viewToggle__btn.is-current { background: var(--ink); color: var(--ink-inverse); } @media (max-width: 479px) { .viewToggle__btn span { display: none; } .viewToggle__btn { padding-inline: var(--sp-2); min-width: 40px; justify-content: center; } } .pTable { margin-block: var(--sp-4) var(--sp-8); background: var(--surface); border: var(--hairline) solid var(--line); border-radius: var(--radius); } .pTable__head { display: none; } .pTable__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "p p" "s pr" "q q"; gap: var(--sp-2) var(--sp-3); padding: var(--sp-3) var(--sp-4); border-block-end: var(--hairline) solid var(--line-2); } .pTable__row:last-child { border-block-end: 0; } .pTable__row.is-out { color: var(--ink-3); } .pTable__prod { grid-area: p; display: flex; gap: var(--sp-3); align-items: center; min-width: 0; } .pTable__img { flex: 0 0 auto; } .pTable__img img { width: 48px; height: 64px; object-fit: cover; border-radius: var(--radius-sm); background: var(--surface-3); } .pTable__name { display: grid; gap: 2px; min-width: 0; } .pTable__name a { font-size: var(--fs-1); font-weight: var(--fw-medium); line-height: var(--lh-snug); } .pTable__meta { font-size: 11px; color: var(--ink-3); } .pTable__stock { grid-area: s; font-size: var(--fs-0); color: var(--ink-2); align-self: center; } .pTable__stock.is-ok { color: var(--success); } .pTable__label { margin-inline-end: 4px; color: var(--ink-3); } .pTable__price { grid-area: pr; justify-self: end; text-align: end; } .pTable__price .b2bPrice { justify-items: end; } .pTable__qty { grid-area: q; display: flex; gap: var(--sp-2); align-items: center; } .pTable__add { flex: 1 1 auto; min-height: 40px; } @media (min-width: 900px) { .pTable__head, .pTable__row { grid-template-columns: minmax(0, 2.4fr) minmax(90px, 0.8fr) minmax(130px, 1fr) auto; grid-template-areas: none; align-items: center; } .pTable__head { display: grid; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-block-end: var(--hairline) solid var(--line); font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--ink-2); } .pTable__prod, .pTable__stock, .pTable__price, .pTable__qty { grid-area: auto; } .pTable__price { justify-self: start; text-align: start; } .pTable__price .b2bPrice { justify-items: start; } .pTable__label { display: none; } .pTable__add { flex: 0 0 auto; min-width: 96px; } } /* --- Toptan alım koşulları sayfası ----------------------------------------- */ .wsHead { padding-block: var(--sp-6) var(--sp-8); background: var(--surface); border-block-end: var(--hairline) solid var(--line); } .wsHead__title { margin: var(--sp-2) 0 var(--sp-3); font-family: var(--font-display); font-size: var(--fs-5); font-weight: var(--fw-medium); line-height: var(--lh-display); } .wsHead__lead { max-width: 62ch; margin: 0 0 var(--sp-5); font-size: var(--fs-2); color: var(--ink-2); } .wsHead__jump { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .wsTerms { display: grid; gap: var(--sp-3); margin: 0; } .wsTerms__item { padding: var(--sp-4) var(--sp-5); background: var(--surface); border: var(--hairline) solid var(--line); border-radius: var(--radius); } .wsTerms__item dt { margin: 0 0 var(--sp-1); font-weight: var(--fw-semibold); } .wsTerms__item dd { margin: 0; font-size: var(--fs-1); color: var(--ink-2); } @media (min-width: 720px) { .wsTerms { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { .wsTerms { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .wsWho { margin-block-start: var(--sp-6); } .wsWho__list { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-2) 0 0; padding: 0; list-style: none; } .wsWho__list li { padding: var(--sp-2) var(--sp-3); border: var(--hairline) solid var(--line); border-radius: var(--radius-pill); background: var(--surface); font-size: var(--fs-1); } #kosullar, #adimlar, #iskonto, #avantajlar, #sorular { scroll-margin-top: calc(var(--header-h) + var(--sp-8)); } @media (min-width: 900px) { .wsSteps { grid-template-columns: repeat(5, minmax(0, 1fr)); } } /* --- Kurumsal alt bilgi --------------------------------------------------- */ .sfFoot { padding-block: var(--sp-12) var(--sp-8); background: var(--sf-dark); color: var(--sf-on-dark-2); font-size: var(--fs-1); } @media (max-width: 1023px) { .sfFoot { padding-block-end: calc(var(--sp-16) + var(--sp-4) + env(safe-area-inset-bottom)); } } .sfFoot a { color: var(--sf-on-dark); } .sfFoot a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; } .sfFoot__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8) var(--sp-6); } .sfFoot__grid > * { min-width: 0; } .sfFoot__brand { grid-column: 1 / -1; display: grid; gap: var(--sp-4); align-content: start; } .sfFoot__logo img { display: block; width: auto; height: 30px; } .sfFoot__claim { max-width: 44ch; margin: 0; } .sfFoot__stats { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin: 0; padding: 0; list-style: none; } .sfFoot__stats li { display: grid; } .sfFoot__stats b { font-family: var(--font-num); font-size: var(--fs-3); color: var(--sf-on-dark); font-weight: var(--fw-semibold); } .sfFoot__stats span { font-size: var(--fs-0); } .sfFoot__contact { display: grid; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; } .sfFoot__contact li { display: grid; gap: 2px; } .sfFoot__contact .spec-label { color: rgb(246 245 242 / 0.6); } .sfFoot__contact a { font-size: var(--fs-2); font-weight: var(--fw-medium); } .sfFoot__head { margin: 0 0 var(--sp-3); font-family: var(--font-mono); font-size: 11px; font-weight: var(--fw-regular); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: rgb(246 245 242 / 0.6); } .sfFoot__col ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; } .sfFoot__col a { display: flex; align-items: center; min-height: 36px; } .sfFoot__pay { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-block: var(--sp-10) var(--sp-6); padding-block-start: var(--sp-6); border-block-start: var(--hairline) solid var(--sf-dark-line); } .sfFoot__chip { padding: 6px var(--sp-3); border: var(--hairline) solid var(--sf-dark-line); border-radius: var(--radius-pill); font-size: var(--fs-0); color: var(--sf-on-dark); } .sfFoot__legal { display: grid; gap: var(--sp-1); font-size: var(--fs-0); } .sfFoot__legal p { margin: 0; } @media (min-width: 900px) { .sfFoot__grid { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); } .sfFoot__brand { grid-column: auto; } .sfFoot__legal { grid-auto-flow: column; justify-content: space-between; } } .toolbar__btn { white-space: nowrap; } @media (max-width: 479px) { .toolbar__count { display: none; } .toolbar { gap: 6px; } .toolbar__btn { padding-inline: var(--sp-2); } } @media (max-width: 399px) { .toolbar__btn--sort .toolbar__lbl { display: none; } .toolbar__btn--sort { min-width: 40px; justify-content: center; } } /* ========================================================================== Bayi hesabı v2 — yan menülü kabuk, kartlar, listeler (29.09.2026) ========================================================================== */ .accShell { display: grid; gap: var(--sp-6); align-items: start; } .accShell > * { min-width: 0; } .accMain { display: grid; gap: var(--sp-4); min-width: 0; } .accMain > * { margin: 0; } @media (min-width: 1024px) { .accShell { grid-template-columns: 260px minmax(0, 1fr); gap: var(--sp-8); } } .accSide { display: grid; gap: var(--sp-3); } .accSide__card { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); background: var(--sf-dark); color: var(--sf-on-dark); border-radius: var(--radius); } .accSide__avatar { flex: 0 0 40px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--brand-500); font-weight: var(--fw-semibold); } .accSide__who { display: grid; gap: 4px; min-width: 0; } .accSide__who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .accSide__card .stTag { color: var(--sf-on-dark-2); } .accSide__nav { display: flex; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); } .accSide__nav::-webkit-scrollbar { display: none; } .accSide__link { flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 40px; padding-inline: var(--sp-3); border: var(--hairline) solid var(--line); border-radius: var(--radius-pill); background: var(--surface); font-size: var(--fs-1); color: var(--ink-2); white-space: nowrap; } .accSide__link svg { color: var(--ink-3); } .accSide__link.is-current { background: var(--ink); color: var(--ink-inverse); border-color: var(--ink); } .accSide__link.is-current svg { color: currentColor; } .accSide__foot { display: none; } @media (min-width: 1024px) { .accSide { position: sticky; inset-block-start: calc(var(--header-h) + var(--sp-10)); } .accSide__nav { display: grid; gap: 2px; overflow: visible; margin: 0; padding: var(--sp-2); background: var(--surface); border: var(--hairline) solid var(--line); border-radius: var(--radius); } .accSide__link { min-height: 42px; border: 0; border-radius: var(--radius); background: none; } .accSide__link:hover { background: var(--surface-2); color: var(--ink); } .accSide__link.is-current { background: var(--surface-2); color: var(--ink); box-shadow: inset 3px 0 0 var(--brand-500); font-weight: var(--fw-medium); } .accSide__link.is-current svg { color: var(--brand-500); } .accSide__foot { display: grid; gap: var(--sp-2); } } .accSide__help { display: grid; gap: 2px; padding: var(--sp-3) var(--sp-4); background: var(--success-bg); border-radius: var(--radius); color: var(--success); } .accSide__out { min-height: 40px; padding: 0 var(--sp-4); background: none; border: 0; color: var(--ink-2); text-align: start; font: inherit; font-size: var(--fs-1); cursor: pointer; } .accSide__out:hover { color: var(--danger); } .accHead { display: grid; gap: var(--sp-1); } .accHead > * { margin: 0; } .accHead--row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-3); } .accHead__title { font-family: var(--font-body); font-size: var(--fs-4); font-weight: var(--fw-semibold); letter-spacing: -0.018em; line-height: 1.15; } .accHead__lead { max-width: 64ch; color: var(--ink-2); font-size: var(--fs-1); } .accCard { padding: var(--sp-5); background: var(--surface); border: var(--hairline) solid var(--line); border-radius: var(--radius); } .accCard > * + * { margin-block-start: var(--sp-3); } .accCard > p { margin-block-end: 0; } .accCard__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-3); } .accCard__title { margin: 0; font-size: var(--fs-3); font-weight: var(--fw-semibold); } .accCard__grid { display: grid; gap: var(--sp-3); } @media (min-width: 640px) { .accCard__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .accTile { display: grid; gap: 2px; padding: var(--sp-4); border: var(--hairline) solid var(--line); border-radius: var(--radius); transition: border-color var(--dur-fast) var(--ease); } .accTile:hover { border-color: var(--ink); } .accTile span { font-size: var(--fs-1); color: var(--ink-2); } .accSteps { display: grid; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; } .accSteps li { position: relative; display: grid; gap: 2px; padding-inline-start: var(--sp-8); } .accSteps li::before { content: ""; position: absolute; inset-inline-start: 4px; inset-block-start: 3px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); background: var(--surface); } .accSteps li.is-done::before { background: var(--success); border-color: var(--success); } .accSteps li.is-current::before { border-color: var(--warning); box-shadow: 0 0 0 4px var(--warning-bg); } .accSteps li span { font-size: var(--fs-1); color: var(--ink-2); } .accKpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin: 0; padding: 0; list-style: none; } .accKpis li > a, .accKpis li { display: grid; gap: 2px; } .accKpis li { padding: var(--sp-4); background: var(--surface); border: var(--hairline) solid var(--line); border-radius: var(--radius); } .accKpis li > a { margin: calc(var(--sp-4) * -1); padding: var(--sp-4); border-radius: var(--radius); } .accKpis li > a:hover { background: var(--surface-2); } .accKpis span { font-size: var(--fs-0); color: var(--ink-2); } .accKpis b { font-family: var(--font-num); font-size: var(--fs-4); font-weight: var(--fw-semibold); line-height: 1.15; } .accKpis small { font-family: var(--font-num); font-size: var(--fs-0); color: var(--ink-2); } @media (min-width: 900px) { .accKpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .accTier { background: var(--thread-100); border-color: var(--thread-300); } .accTier p { margin: 0; font-size: var(--fs-1); } .accTier__bar { height: 8px; margin-block-start: var(--sp-2); border-radius: var(--radius-pill); background: rgb(255 255 255 / 0.7); overflow: hidden; } .accTier__bar span { display: block; height: 100%; background: var(--thread-500); border-radius: inherit; } .accQuick { display: grid; gap: var(--sp-3); } @media (min-width: 640px) { .accQuick { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } } .accActions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); } .accActions form { margin: 0; } .accList { display: grid; gap: var(--sp-2); margin: 0; padding-inline-start: var(--sp-5); font-size: var(--fs-1); color: var(--ink-2); } .accTable { font-size: var(--fs-1); } .accGridProducts { margin: 0; } .orderList { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; } .orderRow { display: grid; gap: var(--sp-3); padding: var(--sp-4); background: var(--surface); border: var(--hairline) solid var(--line); border-radius: var(--radius); } .orderRow__main { display: grid; gap: 2px; min-width: 0; } .orderRow__no { font-family: var(--font-num); font-weight: var(--fw-semibold); font-size: var(--fs-2); } .orderRow__meta, .orderRow__track { font-size: var(--fs-0); color: var(--ink-2); } .orderRow__sum { display: flex; align-items: center; gap: var(--sp-3); } .orderRow__sum b { font-family: var(--font-num); } .orderRow__act { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .orderRow__act form { margin: 0; } @media (min-width: 900px) { .orderRow { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; align-items: center; } .orderRow__act { justify-content: flex-end; } } .addrList { display: grid; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; } @media (min-width: 720px) { .addrList { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .addrCard { display: grid; gap: var(--sp-2); align-content: start; padding: var(--sp-4); background: var(--surface); border: var(--hairline) solid var(--line); border-radius: var(--radius); } .addrCard.is-default { border-color: var(--success); } .addrCard p { margin: 0; color: var(--ink-2); } .addrCard__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); } /* Sepet: kayıtlı adres seçimi + kademe ipucu */ .shipPick { display: grid; gap: var(--sp-2); margin: 0; padding: 0; border: 0; } .shipPick legend { margin-block-end: var(--sp-2); } .shipPick__opt { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3); border: var(--hairline) solid var(--line); border-radius: var(--radius); background: var(--surface); cursor: pointer; } .shipPick__opt:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); } .shipPick__opt input { margin-block-start: 3px; accent-color: var(--brand-500); } .shipPick__opt span { display: grid; gap: 2px; min-width: 0; } .shipPick__opt small { font-size: var(--fs-0); color: var(--ink-2); } .cartTier { margin: var(--sp-3) 0 0; padding: var(--sp-3); border-radius: var(--radius); background: var(--thread-100); font-size: var(--fs-1); } /* --- Bayi başvurusu ----------------------------------------------------- */ .applyWrap { display: grid; gap: var(--sp-8); align-items: start; } .applyWrap > * { min-width: 0; } @media (min-width: 1024px) { .applyWrap { grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.9fr); gap: var(--sp-12); } .applySide { position: sticky; inset-block-start: calc(var(--header-h) + var(--sp-10)); } } .applyTitle { margin: var(--sp-2) 0 var(--sp-3); font-family: var(--font-display); font-size: var(--fs-5); font-weight: var(--fw-medium); line-height: var(--lh-display); } .applyLead { max-width: 60ch; margin: 0 0 var(--sp-6); color: var(--ink-2); } .applySteps { display: flex; gap: var(--sp-2); margin: 0 0 var(--sp-5); padding: 0; list-style: none; counter-reset: none; } .applySteps li { flex: 1 1 0; display: flex; align-items: center; gap: var(--sp-2); min-width: 0; padding-block-end: var(--sp-2); border-block-end: 3px solid var(--line); font-size: var(--fs-0); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .applySteps li .counter { display: grid; place-items: center; flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-3); color: var(--ink-2); font-weight: var(--fw-semibold); } .applySteps li.is-current { border-color: var(--brand-500); color: var(--ink); font-weight: var(--fw-medium); } .applySteps li.is-current .counter { background: var(--brand-500); color: #fff; } .applySteps li.is-done { border-color: var(--success); color: var(--ink-2); } .applySteps li.is-done .counter { background: var(--success); color: #fff; } .applyForm { display: grid; gap: var(--sp-4); } .applyStep { display: grid; gap: var(--sp-4); margin: 0; padding: var(--sp-5); border: var(--hairline) solid var(--line); border-radius: var(--radius); background: var(--surface); } .applyStep[hidden] { display: none; } .applyStep > * { margin: 0; } .applyStep__title { display: flex; align-items: center; gap: var(--sp-2); padding: 0; font-size: var(--fs-3); font-weight: var(--fw-semibold); } .applyStep__title .counter { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: #fff; font-size: var(--fs-0); } .applyNav { display: flex; justify-content: flex-end; gap: var(--sp-2); padding-block-start: var(--sp-2); border-block-start: var(--hairline) solid var(--line-2); } .applyNav .btn { min-width: 140px; } @media (max-width: 479px) { .applyNav .btn { flex: 1 1 0; min-width: 0; } } .pickChips { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .pickChip { position: relative; cursor: pointer; } .pickChip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .pickChip span { display: inline-flex; align-items: center; min-height: 40px; padding-inline: var(--sp-3); border: var(--hairline) solid var(--line); border-radius: var(--radius-pill); background: var(--surface); font-size: var(--fs-1); } .pickChip input:checked + span { border-color: var(--ink); background: var(--ink); color: var(--ink-inverse); } .pickChip input:focus-visible + span { outline: 2px solid var(--focus-ring); outline-offset: 2px; } .applySide { display: grid; gap: var(--sp-3); } .applyCard { margin: 0; padding: var(--sp-5); background: var(--surface); border: var(--hairline) solid var(--line); border-radius: var(--radius); } .applyList { display: grid; gap: var(--sp-2); margin: var(--sp-3) 0 0; padding: 0; list-style: none; font-size: var(--fs-1); } .applyList li { position: relative; padding-inline-start: var(--sp-6); } .applyList li::before { content: ""; position: absolute; inset-inline-start: 2px; inset-block-start: 5px; width: 10px; height: 6px; border-inline-start: 2px solid var(--success); border-block-end: 2px solid var(--success); transform: rotate(-45deg); } .applyAfter { display: grid; gap: var(--sp-3); margin: var(--sp-3) 0 0; padding: 0; list-style: none; counter-reset: aa; } .applyAfter li { display: grid; gap: 2px; padding-inline-start: var(--sp-8); position: relative; counter-increment: aa; font-size: var(--fs-1); } .applyAfter li::before { content: counter(aa); position: absolute; inset-inline-start: 0; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-2); font-family: var(--font-num); font-size: var(--fs-0); font-weight: var(--fw-semibold); } .applyAfter span { color: var(--ink-2); } .applyQuote blockquote { margin: 0 0 var(--sp-3); font-family: var(--font-display); font-size: var(--fs-3); line-height: var(--lh-snug); } .applyQuote figcaption { font-size: var(--fs-1); color: var(--ink-2); } .applyStats { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin: 0; font-size: var(--fs-1); color: var(--ink-2); } .applyStats b { font-family: var(--font-num); color: var(--ink); } /* --- Yazdırma: sipariş özeti proforma gibi --------------------------------- */ @media print { .utilbar, .header, .sfFoot, .fab, .accSide, [data-print], .cartActions, .closeBand, .stickybar, .cartBar { display: none !important; } body { background: #fff; } .accShell { display: block; } .cartGrid { display: block; } } .section.accShell, .section.applyWrap { padding-block: var(--sp-8) var(--sp-12); } .accCard__title, .cartSum__title { font-family: var(--font-body); letter-spacing: -0.01em; } .applyStep__title { margin: 0; } @media (max-width: 479px) { .applySteps li:not(.is-current) { flex: 0 0 auto; font-size: 0; gap: 0; } .applySteps li:not(.is-current) .counter { font-size: var(--fs-0); } .applySteps li.is-current { flex: 1 1 auto; } } /* ========================================================================== Katalog v2 — filtre paneli, tür çipleri, sıralama (29.09.2026) ========================================================================== */ html.is-locked { overflow: hidden; } .plp { padding-block-end: var(--sp-12); } .plpHead { margin-block: var(--sp-2) var(--sp-4); } .plpHead h1 { margin: 0 0 var(--sp-1); font-size: var(--fs-5); font-weight: var(--fw-semibold); letter-spacing: -0.02em; line-height: 1.1; } .plpHead p { margin: 0; max-width: 70ch; color: var(--ink-2); font-size: var(--fs-1); } .typeChips { display: flex; gap: var(--sp-2); overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding: var(--sp-1) var(--gutter) var(--sp-4); scrollbar-width: none; } .typeChips::-webkit-scrollbar { display: none; } .typeChip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 40px; padding-inline: var(--sp-4); border: var(--hairline) solid var(--line); border-radius: var(--radius-pill); background: var(--surface); font-size: var(--fs-1); white-space: nowrap; transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); } .typeChip:hover { border-color: var(--ink); } .typeChip__n { font-family: var(--font-num); font-size: var(--fs-0); color: var(--ink-3); } .typeChip.is-on { background: var(--ink); border-color: var(--ink); color: var(--ink-inverse); } .typeChip.is-on .typeChip__n { color: rgb(246 245 242 / 0.7); } .plp__grid { display: grid; gap: var(--sp-6); align-items: start; } .plp__grid > * { min-width: 0; } .plpMain { min-width: 0; } .plpBar { position: sticky; inset-block-start: var(--header-h); z-index: var(--z-sticky); display: flex; align-items: center; gap: var(--sp-2); margin-inline: calc(var(--gutter) * -1); padding: var(--sp-2) var(--gutter); background: var(--surface-2); border-block-end: var(--hairline) solid var(--line); } .plpBar__filter { position: relative; background: var(--surface); border-color: var(--line); color: var(--ink); white-space: nowrap; } .plpBar__badge { display: grid; place-items: center; min-width: 18px; height: 18px; padding-inline: 4px; border-radius: var(--radius-pill); background: var(--brand-500); color: #fff; font-size: 11px; font-weight: var(--fw-semibold); } .plpBar__count { font-size: var(--fs-0); color: var(--ink-2); white-space: nowrap; } .plpBar__count b { color: var(--ink); font-family: var(--font-num); } .plpSort { position: relative; display: inline-flex; align-items: center; gap: var(--sp-2); margin-inline-start: auto; } .plpSort__label { font-size: var(--fs-0); color: var(--ink-2); } .plpSort__select { appearance: none; min-height: 36px; max-width: 190px; padding: 0 var(--sp-8) 0 var(--sp-3); border: var(--hairline) solid var(--line); border-radius: var(--radius); font: inherit; font-size: var(--fs-1); color: var(--ink); cursor: pointer; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='14' height='14' fill='none' stroke='%231C1D20' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center; } .plpSort__select:hover { border-color: var(--ink); } .plpSort__select:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; } .plpBar .viewToggle { margin-inline-start: 0; } @media (max-width: 559px) { .plpSort__label, .plpBar__count { display: none; } .plpSort__select { max-width: 150px; } } .plpGrid { margin-block-start: var(--sp-4); } .plp .activeFilters { margin-block: var(--sp-3) 0; } .plp .pTable { margin-block-start: var(--sp-4); } /* Filtre formu */ .pf { display: flex; flex-direction: column; background: var(--surface); } .pf__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-block-end: var(--hairline) solid var(--line); } .pf__head b { font-size: var(--fs-2); } .pf__close { display: grid; place-items: center; width: var(--tap); height: var(--tap); margin-inline-end: calc(var(--sp-2) * -1); background: none; border: 0; color: var(--ink); cursor: pointer; } .pf__body { display: grid; gap: 0; padding: var(--sp-2) var(--sp-4); overflow-y: auto; overscroll-behavior: contain; } .pf__group { border-block-end: var(--hairline) solid var(--line-2); } .pf__group > summary { display: flex; align-items: center; gap: var(--sp-2); min-height: 48px; cursor: pointer; list-style: none; font-size: var(--fs-1); font-weight: var(--fw-semibold); } .pf__group > summary::-webkit-details-marker { display: none; } .pf__group > summary::after { content: ""; margin-inline-start: auto; width: 8px; height: 8px; border-inline-end: 1.5px solid var(--ink-2); border-block-end: 1.5px solid var(--ink-2); transform: rotate(45deg) translateY(-2px); transition: transform var(--dur-fast) var(--ease); } .pf__group[open] > summary::after { transform: rotate(-135deg) translateY(-2px); } .pf__count { display: grid; place-items: center; min-width: 18px; height: 18px; padding-inline: 4px; border-radius: var(--radius-pill); background: var(--ink); color: var(--ink-inverse); font-size: 11px; } .pf__opts { display: grid; gap: 0; padding-block-end: var(--sp-3); max-height: 320px; overflow-y: auto; } .pf__opt { position: relative; display: flex; align-items: center; gap: var(--sp-3); min-height: 40px; cursor: pointer; font-size: var(--fs-1); } .pf__opt[hidden] { display: none; } .pf__opt input, .pf__swatch input, .pf__switch input { position: absolute; opacity: 0; width: 1px; height: 1px; } .pf__box { flex: 0 0 18px; width: 18px; height: 18px; border: 1.5px solid var(--ink-3); border-radius: 4px; background: var(--surface); transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .pf__opt input:checked + .pf__box { background: var(--brand-500); border-color: var(--brand-500); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); background-size: 14px; background-position: center; background-repeat: no-repeat; } .pf__opt input:focus-visible + .pf__box { outline: 2px solid var(--focus-ring); outline-offset: 2px; } .pf__opt:hover .pf__box { border-color: var(--ink); } .pf__label { flex: 1 1 auto; min-width: 0; } .pf__n { font-family: var(--font-num); font-size: var(--fs-0); color: var(--ink-3); } .pf__search { width: 100%; min-height: 40px; margin-block-end: var(--sp-2); padding: 0 var(--sp-3); border: var(--hairline) solid var(--line); border-radius: var(--radius); background: var(--surface-2); font: inherit; font-size: var(--fs-1); } .pf__swatches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-1) var(--sp-2); padding-block-end: var(--sp-3); } .pf__swatch { position: relative; display: flex; align-items: center; gap: var(--sp-2); min-height: 40px; padding-inline: var(--sp-2); border: var(--hairline) solid transparent; border-radius: var(--radius); cursor: pointer; font-size: var(--fs-1); } .pf__swatch i { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.14); } .pf__swatch:hover { background: var(--surface-2); } .pf__swatch:has(input:checked) { border-color: var(--ink); background: var(--surface-2); } .pf__swatch:has(input:checked) i { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); } .pf__swatch:has(input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 1px; } .pf__switch { position: relative; display: flex; align-items: center; gap: var(--sp-3); padding-block: var(--sp-3); border-block-end: var(--hairline) solid var(--line-2); cursor: pointer; } .pf__switch span:last-child { display: grid; gap: 2px; font-size: var(--fs-1); } .pf__switch small { font-size: var(--fs-0); color: var(--ink-2); } .pf__track { position: relative; flex: 0 0 40px; width: 40px; height: 24px; border-radius: var(--radius-pill); background: var(--line); transition: background-color var(--dur-fast) var(--ease); } .pf__track::after { content: ""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 0.2); transition: transform var(--dur-fast) var(--ease); } .pf__switch input:checked + .pf__track { background: var(--success); } .pf__switch input:checked + .pf__track::after { transform: translateX(16px); } .pf__switch input:focus-visible + .pf__track { outline: 2px solid var(--focus-ring); outline-offset: 2px; } .pf__foot { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom)); border-block-start: var(--hairline) solid var(--line); background: var(--surface); } .pf__foot .btn[disabled] { opacity: 0.5; } /* Telefon/tablet: alttan açılan sayfa */ @media (max-width: 1023px) { .plpSide { position: fixed; inset: 0; z-index: var(--z-drawer); visibility: hidden; pointer-events: none; } .plpSide.is-open { visibility: visible; pointer-events: auto; } .plpSide__scrim { position: absolute; inset: 0; background: rgb(20 22 26 / 0.45); opacity: 0; transition: opacity var(--dur) var(--ease); } .plpSide.is-open .plpSide__scrim { opacity: 1; } .plpSide .pf { position: absolute; inset-inline: 0; inset-block-end: 0; max-height: 88svh; border-radius: 14px 14px 0 0; box-shadow: var(--shadow-sheet); transform: translateY(100%); transition: transform var(--dur-slow) var(--ease); } .plpSide.is-open .pf { transform: none; } .plpSide .pf__head::before { content: ""; position: absolute; inset-block-start: 6px; inset-inline-start: 50%; width: 36px; height: 4px; margin-inline-start: -18px; border-radius: 2px; background: var(--line); } .plpSide .pf__head { position: relative; } } @media (prefers-reduced-motion: reduce) { .plpSide .pf, .plpSide__scrim { transition: none; } } /* Masaüstü: yapışkan yan panel, seçim anında uygulanır */ @media (min-width: 1024px) { .plp__grid { grid-template-columns: 260px minmax(0, 1fr); gap: var(--sp-8); } .plpSide { position: sticky; inset-block-start: calc(var(--header-h) + var(--sp-8)); } .plpSide__scrim, .pf__close, .pf__foot, .plpBar__filter { display: none; } .pf { border: var(--hairline) solid var(--line); border-radius: var(--radius); max-height: calc(100vh - var(--header-h) - var(--sp-16)); } .pf__head { padding-block: var(--sp-4); } .plpBar { position: static; margin: 0; padding: 0 0 var(--sp-3); background: none; } .plpSide.is-loading .pf { opacity: 0.6; pointer-events: none; } } /* --- Ana sayfa: türe göre / renge göre ------------------------------------ */ .typeTiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin: 0; padding: 0; list-style: none; } .typeTiles > li:first-child { grid-column: 1 / -1; } .typeTile { position: relative; display: block; overflow: hidden; border-radius: var(--radius); background: var(--surface-3); aspect-ratio: 3 / 4; } .typeTiles > li:first-child .typeTile { aspect-ratio: 16 / 10; } .typeTile__media, .typeTile__media img { display: block; width: 100%; height: 100%; } .typeTile__media img { object-fit: cover; transition: transform var(--dur-slow) var(--ease); } .typeTile__body { position: absolute; inset: auto 0 0; display: grid; gap: 2px; padding: var(--sp-10) var(--sp-4) var(--sp-4); background: linear-gradient(to top, rgb(20 22 26 / 0.78), transparent); color: #fff; } .typeTile__body b { font-size: var(--fs-3); font-weight: var(--fw-semibold); letter-spacing: -0.01em; } .typeTile__body span { font-family: var(--font-mono); font-size: var(--fs-0); color: rgb(255 255 255 / 0.82); } @media (hover: hover) { .typeTile:hover img, .colorTile:hover img { transform: scale(1.04); } } @media (min-width: 900px) { .typeTiles { grid-template-columns: repeat(5, minmax(0, 1fr)); } .typeTiles > li:first-child { grid-column: auto; } .typeTiles > li:first-child .typeTile { aspect-ratio: 3 / 4; } } .colorTiles { margin: 0; list-style: none; grid-auto-columns: minmax(34%, 1fr); } @media (min-width: 640px) { .colorTiles { grid-auto-columns: minmax(20%, 1fr); } } @media (min-width: 1024px) { .colorTiles { grid-auto-columns: minmax(11.5%, 1fr); } } .colorTile { display: grid; gap: var(--sp-2); } .colorTile__media { position: relative; display: block; overflow: hidden; border-radius: var(--radius); background: var(--surface-3); aspect-ratio: 3 / 4; } .colorTile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); } .colorTile__dot { position: absolute; inset-inline-start: 10px; inset-block-end: 10px; width: 26px; height: 26px; border-radius: 50%; box-shadow: 0 0 0 3px #fff, 0 2px 8px rgb(0 0 0 / 0.25); } .colorTile__body { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); font-size: var(--fs-1); } .colorTile__body span { font-size: var(--fs-0); color: var(--ink-3); } .shopBy + .shopBy { padding-block-start: 0; } /* --- Dosya yükleme alanı ---------------------------------------------------- */ .fileDrop { display: grid; gap: var(--sp-2); } .fileDrop__input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; } .fileDrop__zone { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); cursor: pointer; border: 1.5px dashed var(--line); border-radius: var(--radius-lg); background: var(--surface-2); transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .fileDrop__zone[hidden] { display: none; } .fileDrop__zone:hover { border-color: var(--ink-3); background: var(--surface); } .fileDrop.is-over .fileDrop__zone { border-color: var(--brand-500); background: var(--brand-50); transform: scale(1.01); } .fileDrop__input:focus-visible + .fileDrop__zone { outline: 2px solid var(--focus-ring); outline-offset: 2px; } .fileDrop__icon { flex: 0 0 44px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--surface); color: var(--brand-500); box-shadow: var(--shadow-lift); } .fileDrop__text { display: grid; gap: 2px; min-width: 0; font-size: var(--fs-1); } .fileDrop__text > span { font-size: var(--fs-0); color: var(--ink-2); } .fileDrop__text u { color: var(--brand-600); text-underline-offset: 2px; } @media (pointer: coarse) { .fileDrop__drag { display: none; } } .fileDrop__file { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border: var(--hairline) solid var(--success); border-radius: var(--radius-lg); background: var(--success-bg); } .fileDrop__file[hidden] { display: none; } .fileDrop__badge { flex: 0 0 auto; display: grid; place-items: center; min-width: 44px; height: 44px; padding-inline: 6px; border-radius: var(--radius); background: var(--surface); color: var(--success); font-family: var(--font-mono); font-size: 11px; font-weight: var(--fw-medium); } .fileDrop__meta { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; font-size: var(--fs-1); } .fileDrop__meta b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--fw-medium); } .fileDrop__meta span { font-size: var(--fs-0); color: var(--ink-2); } .fileDrop__clear { min-height: var(--tap); padding-inline: var(--sp-3); background: none; border: 0; color: var(--ink-2); font: inherit; font-size: var(--fs-1); cursor: pointer; } .fileDrop__clear:hover { color: var(--danger); } .fileDrop__err { margin: 0; font-size: var(--fs-0); color: var(--danger); } .fileDrop.is-error .fileDrop__zone { border-color: var(--danger); } /* --- Yasal metin penceresi (dialog) ------------------------------------------ */ .docModal { width: min(720px, calc(100vw - 2 * var(--gutter))); max-height: min(84vh, 820px); padding: 0; border: 0; border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); box-shadow: 0 24px 64px rgb(20 22 26 / 0.28); overflow: hidden; } .docModal[open] { display: flex; flex-direction: column; animation: docIn var(--dur) var(--ease); } .docModal::backdrop { background: rgb(20 22 26 / 0.5); animation: docFade var(--dur) var(--ease); } .docModal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-block-end: var(--hairline) solid var(--line); } .docModal__title { margin: 0; font-family: var(--font-body); font-size: var(--fs-3); font-weight: var(--fw-semibold); } .docModal__close { display: grid; place-items: center; width: var(--tap); height: var(--tap); margin-inline-end: calc(var(--sp-2) * -1); background: none; border: 0; border-radius: 50%; color: var(--ink); cursor: pointer; } .docModal__close:hover { background: var(--surface-2); } .docModal__body { flex: 1 1 auto; padding: var(--sp-5); overflow-y: auto; overscroll-behavior: contain; font-size: var(--fs-1); line-height: var(--lh-body); } .docModal__body h3 { margin: var(--sp-5) 0 var(--sp-2); font-size: var(--fs-2); } .docModal__body p { margin: 0 0 var(--sp-3); } .docModal__foot { display: flex; justify-content: flex-end; gap: var(--sp-2); padding: var(--sp-3) var(--sp-5); border-block-start: var(--hairline) solid var(--line); background: var(--surface-2); } .docModal__foot [hidden] { display: none; } @keyframes docIn { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } } @keyframes docFade { from { opacity: 0; } to { opacity: 1; } } @media (max-width: 639px) { .docModal { width: 100%; max-width: 100%; max-height: 90svh; margin: auto 0 0; border-radius: 16px 16px 0 0; } .docModal[open] { animation: docUp var(--dur-slow) var(--ease); } .docModal__foot .btn { flex: 1 1 0; } @keyframes docUp { from { transform: translateY(100%); } to { transform: none; } } } @media (prefers-reduced-motion: reduce) { .docModal[open], .docModal::backdrop { animation: none; } } /* --- Başvuru adım geçişi ve gönderim durumu ------------------------------------ */ .applyStep.is-enter-next { animation: stepNext var(--dur-slow) var(--ease); } .applyStep.is-enter-prev { animation: stepPrev var(--dur-slow) var(--ease); } @keyframes stepNext { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } } @keyframes stepPrev { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } } .applySteps li { transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); } .applySteps li .counter { transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); } .btn.is-busy { position: relative; color: transparent !important; pointer-events: none; } .btn.is-busy::after { content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgb(255 255 255 / 0.4); border-top-color: #fff; animation: btnSpin 0.7s linear infinite; } .btn--ghost.is-busy::after, .btn--quiet.is-busy::after { border-color: rgb(28 29 32 / 0.2); border-top-color: var(--ink); } @keyframes btnSpin { to { transform: rotate(360deg); } } /* --- Duyuru izni (bayi paneli): göze değen ama bağırmayan şerit ---------------- */ .optin { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--sp-3) var(--sp-4); padding: var(--sp-4) var(--sp-5); border: var(--hairline) solid var(--thread-300); border-radius: var(--radius); background: linear-gradient(90deg, var(--thread-100), var(--surface)); } .optin__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--surface); color: var(--thread-700); } .optin__text { margin: 0; font-size: var(--fs-1); color: var(--ink-2); } .optin__text b { color: var(--ink); } .optin__form { grid-column: 1 / -1; margin: 0; } @media (min-width: 720px) { .optin { grid-template-columns: auto minmax(0, 1fr) auto; } .optin__form { grid-column: auto; } } .accConsent form { margin: 0; } @media (max-width: 399px) { .plpSort__select { max-width: 132px; padding-inline-start: var(--sp-2); } } @media (max-width: 359px) { .plpBar .viewToggle { display: none; } } /* ========================================================================== Kontrast (AAA) düzeltmeleri — genel `a:hover { color: bordo }` koyu/renkli zemindeki bağlantıları okunmaz yapıyordu (WhatsApp düğmesi 2,05, kapanış bandı bağlantısı 1,39). Koyu zemindeki her bağlantı kendi hover rengini taşır. ========================================================================== */ .fab__wa, .fab__wa:hover { color: #fff; } @media (hover: hover) { .fab__wa:hover { background: #fff; color: var(--wa); border-color: var(--wa); box-shadow: 0 6px 18px rgb(18 102 59 / 0.28); } .fab__top:hover { color: var(--ink); } } .fab__btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; } .brandTile:hover, .typeTile:hover, .colorTile:hover, .accTile:hover, .b2bHero__tile:hover { color: inherit; } .brandTile:hover .brandTile__body b, .typeTile:hover .typeTile__body b { text-decoration: underline; text-underline-offset: 3px; } .closeBand a:not(.btn):hover { color: #fff; text-decoration: underline; } .skip:hover, .skip:focus { color: #fff; } .revCard__mark { color: var(--brand-400); } .sfFoot__contact .spec-label, .sfFoot__head { color: rgb(246 245 242 / 0.8); } .closeBand p, .closeBand span:not(.btn) { color: rgb(251 248 246 / 0.86); } .btn--quiet:hover { opacity: 1; color: var(--ink); border-color: var(--ink); } .priceLock a.btn { color: var(--btn-fg); } /* bordo düğmede bordo yazı (1,16) — fiyat kilidi bağlantı rengi ezmesin */ .priceLock a.btn::after { content: none; } .pdp__ask { color: var(--wa-hover); } /* açık yeşil zeminde 7+ */ .applySteps li .counter { color: var(--ink); } /* ========================================================================== Sepet çekmecesi ========================================================================== */ .cartDrawer { position: fixed; inset: 0; z-index: var(--z-drawer); } .cartDrawer[hidden] { display: none; } .cartDrawer__scrim { position: absolute; inset: 0; background: rgb(20 22 26 / 0.5); opacity: 0; transition: opacity var(--dur) var(--ease); } .cartDrawer.is-open .cartDrawer__scrim { opacity: 1; } .cartDrawer__panel { position: absolute; inset-block: 0; inset-inline-end: 0; display: flex; flex-direction: column; width: min(460px, 100vw); background: var(--surface); box-shadow: -12px 0 40px rgb(20 22 26 / 0.18); transform: translateX(100%); transition: transform var(--dur-slow) var(--ease); } .cartDrawer.is-open .cartDrawer__panel { transform: none; } @media (prefers-reduced-motion: reduce) { .cartDrawer__panel, .cartDrawer__scrim { transition: none; } } .cd__loading { padding: var(--sp-8) var(--sp-5); color: var(--ink-2); } .cd__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); border-block-end: var(--hairline) solid var(--line); } .cd__title { margin: 0; font-family: var(--font-body); font-size: var(--fs-3); font-weight: var(--fw-semibold); } .cd__meta { margin-inline-start: var(--sp-2); font-size: var(--fs-1); font-weight: var(--fw-regular); color: var(--ink-2); } .cd__close { display: grid; place-items: center; width: var(--tap); height: var(--tap); margin-inline-end: calc(var(--sp-2) * -1); background: none; border: 0; border-radius: 50%; color: var(--ink); cursor: pointer; } .cd__close:hover { background: var(--surface-2); } .cd__body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-4) var(--sp-5) var(--sp-6); display: grid; gap: var(--sp-4); align-content: start; } .cd__body > * { margin: 0; min-width: 0; } .cd__empty p { margin: 0 0 var(--sp-3); } .cd__emptyCta { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .cd__added { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius); background: var(--success-bg); color: var(--success); font-size: var(--fs-1); animation: cdPop var(--dur-slow) var(--ease); } .cd__issue { padding: var(--sp-2) var(--sp-3); border-radius: var(--radius); background: var(--warning-bg); color: var(--warning-text); font-size: var(--fs-1); } .cd__tier { padding: var(--sp-3); border-radius: var(--radius); background: var(--thread-100); font-size: var(--fs-1); } .cd__tier p { margin: 0; } .cd__lines { display: grid; margin: 0; padding: 0; list-style: none; } .cd__line { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--sp-3); padding-block: var(--sp-3); border-block-end: var(--hairline) solid var(--line-2); transition: opacity var(--dur) var(--ease); } .cd__line.is-new { animation: cdPop var(--dur-slow) var(--ease); } .cd__line.is-removing { opacity: 0.35; } .cd__line.is-warn .cd__qty { border-color: var(--warning-text); } .cd__img img { width: 64px; height: 85px; object-fit: cover; border-radius: var(--radius-sm); background: var(--surface-3); } .cd__info { display: grid; gap: 2px; min-width: 0; } .cd__name { font-size: var(--fs-1); font-weight: var(--fw-medium); line-height: var(--lh-snug); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cd__sku { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); } .cd__warn { font-size: var(--fs-0); color: var(--warning-text); font-weight: var(--fw-medium); } .cd__row { display: flex; align-items: center; gap: var(--sp-2); margin-block-start: var(--sp-2); } .cd__qty { display: inline-flex; align-items: center; height: 40px; border: var(--hairline) solid var(--line); border-radius: var(--radius); overflow: hidden; } .cd__qty button { width: 40px; height: 100%; background: var(--surface); border: 0; font-size: var(--fs-3); color: var(--ink); cursor: pointer; } .cd__qty button:hover { background: var(--surface-2); } .cd__qty input { width: 56px; height: 100%; border: 0; border-inline: var(--hairline) solid var(--line); text-align: center; font-family: var(--font-num); font-size: var(--fs-1); font-weight: var(--fw-medium); color: var(--ink); } .cd__price { margin-inline-start: auto; font-family: var(--font-num); font-size: var(--fs-1); font-weight: var(--fw-semibold); } .cd__remove { min-height: var(--tap); padding-inline: var(--sp-2); background: none; border: 0; color: var(--ink-2); font: inherit; font-size: var(--fs-0); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } .cd__price + .cd__remove { margin-inline-start: 0; } .cd__row .cd__remove:only-of-type { margin-inline-start: auto; } .cd__remove:hover { color: var(--danger); } .cd__recs { padding-block-start: var(--sp-2); } .cd__recsTitle { margin: 0 0 var(--sp-3); font-family: var(--font-body); font-size: var(--fs-2); font-weight: var(--fw-semibold); } .cd__recList { display: grid; grid-auto-flow: column; grid-auto-columns: 132px; gap: var(--sp-3); margin: 0 calc(var(--sp-5) * -1); padding: 0 var(--sp-5) var(--sp-2); list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--sp-5); scrollbar-width: none; } .cd__recList::-webkit-scrollbar { display: none; } .cd__rec { display: grid; gap: 4px; align-content: start; scroll-snap-align: start; } .cd__recImg img { width: 132px; height: 176px; object-fit: cover; border-radius: var(--radius-sm); background: var(--surface-3); } .cd__recWhy { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); } .cd__recName { font-size: var(--fs-0); font-weight: var(--fw-medium); line-height: var(--lh-snug); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cd__recPrice { font-family: var(--font-num); font-size: var(--fs-0); color: var(--ink); } .cd__recAdd { min-height: 36px; margin-block-start: 2px; border: var(--hairline) solid var(--ink); border-radius: var(--radius); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--fs-0); font-weight: var(--fw-medium); cursor: pointer; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .cd__recAdd:hover { background: var(--ink); color: var(--ink-inverse); } .cd__recAdd[disabled] { opacity: 0.6; } .cd__foot { padding: var(--sp-4) var(--sp-5) calc(var(--sp-4) + env(safe-area-inset-bottom)); border-block-start: var(--hairline) solid var(--line); background: var(--surface-2); display: grid; gap: var(--sp-3); } .cd__sum { display: grid; gap: 4px; margin: 0; font-size: var(--fs-1); } .cd__sum > div { display: flex; justify-content: space-between; gap: var(--sp-3); } .cd__sum dt { color: var(--ink-2); } .cd__sum dd { margin: 0; font-family: var(--font-num); } .cd__total { padding-block-start: var(--sp-2); border-block-start: var(--hairline) solid var(--line); font-size: var(--fs-2); font-weight: var(--fw-semibold); } .cd__total dt { color: var(--ink); } .cd__note { margin: 0; font-size: var(--fs-1); color: var(--ink-2); } .cd__actions { display: grid; gap: var(--sp-2); } @keyframes cdPop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } /* ========================================================================== Anlık arama ========================================================================== */ .srScrim { position: fixed; inset: 0; z-index: calc(var(--z-header) - 1); background: rgb(20 22 26 / 0.42); opacity: 0; transition: opacity var(--dur) var(--ease); } .srScrim.is-on { opacity: 1; } .srScrim[hidden] { display: none; } @media (min-width: 1024px) { .hsearch { position: relative; } .hsearch__kbd { display: grid; place-items: center; min-width: 22px; height: 22px; padding-inline: 6px; border: var(--hairline) solid var(--line); border-radius: 5px; background: var(--surface); font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); } .hsearch:focus-within .hsearch__kbd { display: none; } .hsearch__panel { position: absolute; inset-block-start: calc(100% + 10px); inset-inline-start: 50%; z-index: 2; width: min(760px, calc(100vw - 48px)); max-height: min(72vh, 680px); overflow-y: auto; overscroll-behavior: contain; transform: translateX(-50%); background: var(--surface); border: var(--hairline) solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 24px 60px rgb(20 22 26 / 0.22); animation: srIn var(--dur) var(--ease); } .hsearch__panel[hidden] { display: none; } } @media (max-width: 1023px) { .hsearch__kbd, .hsearch__panel { display: none; } } @keyframes srIn { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .hsearch__panel { animation: none; } .srScrim { transition: none; } } .hsearch__panel.is-loading::before, .search__results.is-loading::before { content: ""; position: sticky; inset-block-start: 0; display: block; height: 2px; margin-block-end: -2px; background: linear-gradient(90deg, transparent, var(--brand-500), transparent); background-size: 50% 100%; background-repeat: no-repeat; animation: srBar 0.9s linear infinite; } @keyframes srBar { from { background-position: -50% 0; } to { background-position: 150% 0; } } .sr { display: grid; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5) var(--sp-5); } .sr > * { margin: 0; min-width: 0; } .sr__label { margin: 0 0 var(--sp-2); font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--ink-2); } .sr__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .sr__chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding-inline: var(--sp-3); border: var(--hairline) solid var(--line); border-radius: var(--radius-pill); background: var(--surface); font-size: var(--fs-1); color: var(--ink); } .sr__chip span { font-family: var(--font-num); font-size: var(--fs-0); color: var(--ink-2); } .sr__chip:hover, .sr__chip.is-active { border-color: var(--ink); color: var(--ink); background: var(--surface-2); } .sr__chip--strong { background: var(--surface-2); font-weight: var(--fw-medium); } .sr__hint, .sr__fixed { font-size: var(--fs-1); color: var(--ink-2); } .sr__fixed b { color: var(--ink); } .sr__none p { margin: 0 0 var(--sp-3); font-size: var(--fs-1); } .sr__list { display: grid; margin: 0; padding: 0; list-style: none; } .sr__item { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); padding: var(--sp-2); margin-inline: calc(var(--sp-2) * -1); border-radius: var(--radius); color: var(--ink); } .sr__item:hover, .sr__item.is-active { background: var(--surface-2); color: var(--ink); } .sr__item img { width: 48px; height: 64px; object-fit: cover; border-radius: var(--radius-sm); background: var(--surface-3); } .sr__body { display: grid; gap: 2px; min-width: 0; } .sr__name { font-size: var(--fs-1); font-weight: var(--fw-medium); line-height: var(--lh-snug); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sr__name mark { background: var(--thread-100); color: var(--ink); border-radius: 2px; padding-inline: 1px; } .sr__meta { font-size: var(--fs-0); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sr__sku { font-family: var(--font-mono); } .sr__side { display: grid; justify-items: end; gap: 2px; font-size: var(--fs-0); } .sr__side b { font-family: var(--font-num); font-size: var(--fs-1); } .sr__stock { color: var(--ink-2); white-space: nowrap; } .sr__stock.is-ok { color: var(--success); } .sr__all { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 44px; border-radius: var(--radius); background: var(--ink); color: var(--ink-inverse); font-size: var(--fs-1); font-weight: var(--fw-medium); } .sr__all:hover, .sr__all.is-active { background: var(--brand-600); color: #fff; } .search__results { max-height: calc(100svh - 150px); overflow-y: auto; overscroll-behavior: contain; margin-inline: calc(var(--gutter) * -1); } .search__results .sr { padding-inline: var(--gutter); } @media (max-width: 479px) { .sr__side b { display: none; } } /* --- SEO blokları: canlı veri özeti, rehber içindekiler, ilgili sayfalar ------------------------------------------- */ .catFacts { max-width: 72ch; padding-block: var(--sp-8) 0; } .catFacts .tableWrap { margin-block: 0 var(--sp-3); } .catFacts .specTable th[scope="row"] { width: 9rem; white-space: normal; } .catFacts__note { font-size: var(--fs-1); margin: 0 0 var(--sp-4); } .catcopy .tableWrap { margin-block: var(--sp-2) var(--sp-6); } .doc__toc { padding: var(--sp-3) var(--sp-5); background: var(--surface); border: var(--hairline) solid var(--line); border-radius: var(--radius); margin: 0 0 var(--sp-8); } .doc__toc ol { margin: var(--sp-1) 0 0; padding-inline-start: var(--sp-5); } .doc__toc a { display: inline-flex; align-items: center; min-height: 44px; } .doc__related { margin-block-start: var(--sp-10); } .doc__relatedList { display: flex; flex-wrap: wrap; column-gap: var(--sp-5); } .pdp__moreLabel { margin: var(--sp-5) 0 0; } /* Galeri sayacı fotoğraf üstünde: beyaz fotoğrafta bile AAA (0,62 opaklıkta açık fotoğrafta 4,8:1 kalıyordu; 0,8 → ≥9:1). */ .gallery__counter { background: rgb(26 22 20 / 0.8); } /* Toptan kart: ad her zaman iki satırlık yer kaplar; tek satırlık adda stok/fiyat/düğme satırları yan kartlarla hizasız kayıyordu (kullanıcı revizyonu 29.09.2026: "kalem gibi" hizalı). */ .card--b2b .card__title { min-height: calc(2em * var(--lh-snug)); }