.b-hero .k-hero-title { font-family: var(--font-display); font-weight: var(--font-display-weight); font-size: var(--text-hero); text-transform: var(--display-transform); color: var(--color-text-primary); } .b-hero .k-hero-text { font-family: var(--font-body); font-size: var(--text-body-lg); color: var(--color-text-secondary); } .b-hero .k-hero-actions a { font-family: var(--font-body); text-transform: var(--button-transform); } .b-hero .k-hero-actions a:focus-visible { outline-color: var(--color-focus); } .b-category-tiles, .b-product-row, .b-tabbed-products, .b-image-text, .b-image-grid, .b-service-strip, .b-spec-band, .b-steps, .b-rich-text, .b-faq, .b-other-options, .b-related-products, .b-detail-carousel, .b-product-spotlight { padding-block: calc(var(--section-gap-mobile) / 2); } .b-category-tiles.rt-accent, .b-category-tiles.rt-dark, .b-product-row.rt-accent, .b-product-row.rt-dark, .b-tabbed-products.rt-accent, .b-tabbed-products.rt-dark, .b-image-text.rt-accent, .b-image-text.rt-dark, .b-image-grid.rt-accent, .b-image-grid.rt-dark, .b-service-strip.rt-accent, .b-service-strip.rt-dark, .b-spec-band.rt-accent, .b-spec-band.rt-dark, .b-steps.rt-accent, .b-steps.rt-dark, .b-rich-text.rt-accent, .b-rich-text.rt-dark, .b-faq.rt-accent, .b-faq.rt-dark, .b-other-options.rt-accent, .b-other-options.rt-dark, .b-related-products.rt-accent, .b-related-products.rt-dark, .b-detail-carousel.rt-accent, .b-detail-carousel.rt-dark, .b-product-spotlight.rt-accent, .b-product-spotlight.rt-dark { padding-block: calc(var(--section-gap-mobile) * 0.6); } @media (min-width: 768px) { .b-category-tiles, .b-product-row, .b-tabbed-products, .b-image-text, .b-image-grid, .b-service-strip, .b-spec-band, .b-steps, .b-rich-text, .b-faq, .b-other-options, .b-related-products, .b-detail-carousel, .b-product-spotlight { padding-block: calc(var(--section-gap) / 2); } .b-category-tiles.rt-accent, .b-category-tiles.rt-dark, .b-product-row.rt-accent, .b-product-row.rt-dark, .b-tabbed-products.rt-accent, .b-tabbed-products.rt-dark, .b-image-text.rt-accent, .b-image-text.rt-dark, .b-image-grid.rt-accent, .b-image-grid.rt-dark, .b-service-strip.rt-accent, .b-service-strip.rt-dark, .b-spec-band.rt-accent, .b-spec-band.rt-dark, .b-steps.rt-accent, .b-steps.rt-dark, .b-rich-text.rt-accent, .b-rich-text.rt-dark, .b-faq.rt-accent, .b-faq.rt-dark, .b-other-options.rt-accent, .b-other-options.rt-dark, .b-related-products.rt-accent, .b-related-products.rt-dark, .b-detail-carousel.rt-accent, .b-detail-carousel.rt-dark, .b-product-spotlight.rt-accent, .b-product-spotlight.rt-dark { padding-block: calc(var(--section-gap) * 0.6); } } .k-bolum-basi { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: clamp(24px, 3vw, 40px); } .k-bolum-baslik { margin: 0; font-family: var(--font-display); font-weight: var(--font-display-weight); font-size: var(--text-h2); line-height: 1.14; text-transform: var(--display-transform); color: var(--color-text-primary); overflow-wrap: break-word; } .k-bolum-baslik::after { content: ""; display: block; width: 64px; margin-top: 14px; border-top: 1.5px dashed var(--color-accent); } .k-yb-orta .k-bolum-baslik::after { margin-inline: auto; } .k-tumu { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-body); font-size: var(--text-small); font-weight: 500; color: var(--color-text-primary); text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 1.5px; text-underline-offset: 6px; } .k-tumu:hover { text-decoration-thickness: 2px; } .k-tumu:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; } .k-dugme { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border: 1.5px solid var(--color-button-bg); border-radius: var(--radius-button); font-family: var(--font-body); font-size: var(--text-body); font-weight: 500; line-height: 1.2; text-align: center; text-decoration: none; text-transform: var(--button-transform); transition: background-color var(--motion-duration), border-color var(--motion-duration), color var(--motion-duration); } .k-dugme-birincil { background: var(--color-button-bg); color: var(--color-button-text); } .k-dugme-birincil:hover { background: var(--color-button-hover); border-color: var(--color-button-hover); } html[data-s-button-style="outline"] .k-dugme-birincil { background: transparent; color: var(--color-text-primary); } html[data-s-button-style="outline"] .k-dugme-birincil:hover { background: var(--color-button-bg); color: var(--color-button-text); } .k-dugme-ikincil { border-color: var(--color-text-primary); background: transparent; color: var(--color-text-primary); } .k-dugme-ikincil:hover { background: var(--color-surface-alt); } .k-dugme-yazi { min-height: 44px; padding: 0; border: 0; background: none; color: inherit; text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 1.5px; text-underline-offset: 7px; } .k-dugme-yazi:hover { text-decoration-thickness: 2px; } .k-dugme:focus-visible { outline-color: var(--color-focus); } .k-serit { position: relative; } .k-serit-liste { display: grid; grid-auto-flow: column; grid-auto-columns: 68%; gap: var(--grid-gap); margin: 0; padding: 0 0 4px; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--color-border-strong) transparent; } .k-serit-liste:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; } .k-serit-liste > .k-hucre { min-width: 0; scroll-snap-align: start; } .k-serit-oklar { display: none; } .k-serit-ok { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 40px; height: 40px; padding: 0; border-width: 1px; border-style: solid; border-color: transparent; border-radius: var(--radius-control); background: transparent; color: var(--color-text-primary); cursor: pointer; transition: border-color var(--motion-duration); } .k-serit-ok .k-simge { display: block; width: 18px; height: 18px; } .k-serit-ok:hover:not(:disabled) { border-color: var(--color-text-primary); } .k-serit-ok:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; } .k-serit-ok:disabled { color: var(--color-text-secondary); cursor: default; } @media (min-width: 768px) { .k-serit-liste { grid-auto-columns: calc((100% - 2 * var(--grid-gap)) / 3.35); } .k-serit-oklar { display: flex; gap: 4px; } } .k-kart-ad { font-family: var(--font-display); font-weight: var(--font-display-weight); font-size: 17px; line-height: 1.3; color: var(--color-text-primary); } .k-kart-fiyat { font-family: var(--font-body); font-variant-numeric: var(--num-style); } .k-kart-fiyat-indirimli .k-kart-fiyat-satis { color: var(--color-sale); } .k-kart-rozet { border-radius: var(--radius-control); } .k-kart-kartela { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; } .k-kart-kare { display: block; box-sizing: border-box; width: 22px; height: 22px; padding: 1px; background: var(--color-border-strong); clip-path: polygon(0 0, 12.5% 12%, 25% 0, 37.5% 12%, 50% 0, 62.5% 12%, 75% 0, 87.5% 12%, 100% 0, 88% 12.5%, 100% 25%, 88% 37.5%, 100% 50%, 88% 62.5%, 100% 75%, 88% 87.5%, 100% 100%, 87.5% 88%, 75% 100%, 62.5% 88%, 50% 100%, 37.5% 88%, 25% 100%, 12.5% 88%, 0 100%, 12% 87.5%, 0 75%, 12% 62.5%, 0 50%, 12% 37.5%, 0 25%, 12% 12.5%); } .k-kart-kare svg { display: block; width: 100%; height: 100%; clip-path: polygon(0 0, 12.5% 12%, 25% 0, 37.5% 12%, 50% 0, 62.5% 12%, 75% 0, 87.5% 12%, 100% 0, 88% 12.5%, 100% 25%, 88% 37.5%, 100% 50%, 88% 62.5%, 100% 75%, 88% 87.5%, 100% 100%, 87.5% 88%, 75% 100%, 62.5% 88%, 50% 100%, 37.5% 88%, 25% 100%, 12.5% 88%, 0 100%, 12% 87.5%, 0 75%, 12% 62.5%, 0 50%, 12% 37.5%, 0 25%, 12% 12.5%); } .k-kart-kartela .k-kart-arti { font-family: var(--font-body); font-size: var(--text-label); line-height: 1; font-variant-numeric: var(--num-style); color: var(--color-text-secondary); } .k-kart-renkler { display: block; font-family: var(--font-body); font-size: var(--text-label); line-height: 1.4; color: var(--color-text-secondary); } .k-kart-govde:has(> .k-kart-renkler) > .k-kart-sayi { display: none; } html[data-s-card-align="center"] .k-kart-kartela { justify-content: center; } @media (max-width: 599.98px) { .k-kart-ad { font-size: 15px; } } .b-coming-soon-main { padding-block: clamp(48px, 10vw, 120px); background: var(--color-surface-alt); } .k-yakinda { --zimba-dis: 14px; box-sizing: border-box; max-width: 640px; padding: 52px 48px 56px; background: var(--color-surface); -webkit-mask: conic-gradient(from 135deg at top, transparent, var(--color-text-primary) 1deg 89deg, transparent 90deg) top / var(--zimba-dis) 51% repeat-x, conic-gradient(from -45deg at bottom, transparent, var(--color-text-primary) 1deg 89deg, transparent 90deg) bottom / var(--zimba-dis) 51% repeat-x; mask: conic-gradient(from 135deg at top, transparent, var(--color-text-primary) 1deg 89deg, transparent 90deg) top / var(--zimba-dis) 51% repeat-x, conic-gradient(from -45deg at bottom, transparent, var(--color-text-primary) 1deg 89deg, transparent 90deg) bottom / var(--zimba-dis) 51% repeat-x; } .k-yakinda-logo { font-family: var(--font-display); font-weight: var(--font-display-weight); color: var(--color-accent); } .k-yakinda-baslik { font-family: var(--font-display); font-weight: var(--font-display-weight); line-height: 1.14; text-transform: var(--display-transform); color: var(--color-text-primary); } .k-yakinda-baslik::after { content: ""; display: block; width: 64px; margin: 14px auto 0; border-top: 1.5px dashed var(--color-accent); } .k-yakinda-yazi { font-family: var(--font-body); line-height: var(--line-height-body); color: var(--color-text-secondary); } @media (max-width: 599.98px) { .k-yakinda { margin-inline: 16px; padding: 40px 24px 44px; } }
.b-hero { padding-block: calc(var(--section-gap) / 2); } .b-hero .k-hero { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; } .b-hero .k-hero-title { margin: 0 0 16px; max-width: 16ch; line-height: 1.08; overflow-wrap: break-word; } .b-hero .k-hero-text { margin: 0 0 24px; max-width: 42ch; line-height: var(--line-height-body); } .b-hero .k-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; } .b-hero .k-hero-media { position: relative; overflow: hidden; margin: 0; background: var(--color-surface-alt); } .b-hero .k-hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; } .b-hero .k-hero.k-ortali { justify-items: center; text-align: center; } .b-hero .k-hero.k-ortali .k-hero-actions { justify-content: center; } .b-hero .k-hero.k-ortali .k-hero-media { justify-self: stretch; } .b-hero.d-full { padding-block: 0 calc(var(--section-gap) / 2); } .b-hero.d-full .k-hero { --kapak-kenar: max(clamp(16px, 4vw, 40px), calc((100% - var(--page-max, 1320px)) / 2 + clamp(16px, 4vw, 40px))); max-width: none; padding-inline: 0; grid-template-columns: [tam-bas] var(--kapak-kenar) [ic-bas] minmax(0, 3fr) [orta] minmax(0, 2fr) [ic-son] var(--kapak-kenar) [tam-son]; } .b-hero.d-full .k-hero-media { grid-column: tam-bas / tam-son; grid-row: 1; } .b-hero.d-full .k-hero-title, .b-hero.d-full .k-hero-text, .b-hero.d-full .k-hero-actions { grid-column: ic-bas / ic-son; } .b-hero.d-full .k-hero-title { padding-top: 24px; } .b-hero.d-full[data-s-height="adapt"] .k-hero-media { aspect-ratio: auto; background: transparent; } .b-hero.d-full[data-s-height="adapt"] .k-hero-media img { height: auto; max-height: max(56.25vw, calc(100svh - var(--header-height, 73px))); object-fit: contain; } .b-hero.d-full[data-s-overlay] .k-hero::before { --zimba-dis: 14px; content: ""; z-index: 1; grid-column: ic-bas / ic-son; grid-row: 2 / 5; align-self: stretch; background: var(--color-surface); -webkit-mask: conic-gradient(from 135deg at top, transparent, var(--color-text-primary) 1deg 89deg, transparent 90deg) top / var(--zimba-dis) 51% repeat-x, conic-gradient(from -45deg at bottom, transparent, var(--color-text-primary) 1deg 89deg, transparent 90deg) bottom / var(--zimba-dis) 51% repeat-x; mask: conic-gradient(from 135deg at top, transparent, var(--color-text-primary) 1deg 89deg, transparent 90deg) top / var(--zimba-dis) 51% repeat-x, conic-gradient(from -45deg at bottom, transparent, var(--color-text-primary) 1deg 89deg, transparent 90deg) bottom / var(--zimba-dis) 51% repeat-x; } .b-hero.d-full[data-s-overlay] .k-hero-title, .b-hero.d-full[data-s-overlay] .k-hero-text, .b-hero.d-full[data-s-overlay] .k-hero-actions { position: relative; z-index: 2; padding-inline: 20px; color: var(--color-text-primary); } .b-hero.d-full[data-s-overlay] .k-hero-title { grid-row: 2; margin-bottom: 12px; } .b-hero.d-full[data-s-overlay] .k-hero-text { grid-row: 3; color: var(--color-text-secondary); } .b-hero.d-full[data-s-overlay] .k-hero-actions { grid-row: 4; } .b-hero.d-full[data-s-overlay] .k-hero-media + .k-hero-title, .b-hero.d-full[data-s-overlay] .k-hero-media + .k-hero-text, .b-hero.d-full[data-s-overlay] .k-hero-media + .k-hero-actions { padding-top: 28px; } .b-hero.d-full[data-s-overlay] .k-hero > :not(.k-hero-media):last-child { margin-bottom: 0; padding-bottom: 28px; } @media (min-width: 768px) { .b-hero.d-full[data-s-overlay] .k-hero-media::after { content: ""; position: absolute; inset: 0; } .b-hero.d-full[data-s-overlay="5"] .k-hero-media::after { background: rgba(var(--color-media-overlay-rgb), 0.03); } .b-hero.d-full[data-s-overlay="10"] .k-hero-media::after { background: rgba(var(--color-media-overlay-rgb), 0.06); } .b-hero.d-full[data-s-overlay="15"] .k-hero-media::after { background: rgba(var(--color-media-overlay-rgb), 0.09); } .b-hero.d-full[data-s-overlay="20"] .k-hero-media::after { background: rgba(var(--color-media-overlay-rgb), 0.12); } .b-hero.d-full[data-s-overlay="25"] .k-hero-media::after { background: rgba(var(--color-media-overlay-rgb), 0.15); } .b-hero.d-full[data-s-overlay="30"] .k-hero-media::after { background: rgba(var(--color-media-overlay-rgb), 0.18); } .b-hero.d-full[data-s-overlay="35"] .k-hero-media::after { background: rgba(var(--color-media-overlay-rgb), 0.21); } .b-hero.d-full[data-s-overlay="40"] .k-hero-media::after { background: rgba(var(--color-media-overlay-rgb), 0.24); } .b-hero.d-full[data-s-overlay="45"] .k-hero-media::after { background: rgba(var(--color-media-overlay-rgb), 0.27); } .b-hero.d-full[data-s-overlay="50"] .k-hero-media::after { background: rgba(var(--color-media-overlay-rgb), 0.3); } .b-hero.d-full[data-s-overlay="55"] .k-hero-media::after { background: rgba(var(--color-media-overlay-rgb), 0.33); } .b-hero.d-full[data-s-overlay="60"] .k-hero-media::after { background: rgba(var(--color-media-overlay-rgb), 0.36); } .b-hero.d-full[data-s-overlay] { padding-block: 0 calc(var(--section-gap) / 2); } .b-hero.d-full[data-s-overlay] .k-hero { grid-template-rows: [ust] minmax(clamp(24px, 3vw, 40px), 1fr) auto auto auto [alt]; aspect-ratio: 2 / 1; } .b-hero.d-full[data-s-overlay][data-s-height="medium"] .k-hero { aspect-ratio: 5 / 2; } .b-hero.d-full[data-s-overlay][data-s-height="short"] .k-hero { aspect-ratio: 3 / 1; } .b-hero.d-full[data-s-overlay][data-s-height="adapt"] .k-hero { aspect-ratio: auto; } .b-hero.d-full[data-s-overlay] .k-hero-media { grid-row: ust / alt; align-self: stretch; height: auto; aspect-ratio: auto; } .b-hero.d-full[data-s-overlay] .k-hero-media img { position: absolute; inset: 0; } .b-hero.d-full[data-s-overlay][data-s-height="adapt"] .k-hero-media { background: rgb(var(--color-media-overlay-rgb)); } .b-hero.d-full[data-s-overlay][data-s-height="adapt"] .k-hero-media img { position: static; } .b-hero.d-full[data-s-overlay] .k-hero::before { grid-column: ic-bas / orta; justify-self: start; width: min(100%, 540px); margin-bottom: clamp(32px, 6vw, 72px); } .b-hero.d-full[data-s-overlay] .k-hero-title, .b-hero.d-full[data-s-overlay] .k-hero-text, .b-hero.d-full[data-s-overlay] .k-hero-actions { grid-column: ic-bas / orta; max-width: 540px; padding-inline: 36px; } .b-hero.d-full[data-s-overlay] .k-hero-media + .k-hero-title, .b-hero.d-full[data-s-overlay] .k-hero-media + .k-hero-text, .b-hero.d-full[data-s-overlay] .k-hero-media + .k-hero-actions { padding-top: 34px; } .b-hero.d-full[data-s-overlay] .k-hero > :not(.k-hero-media):last-child { margin-bottom: clamp(32px, 6vw, 72px); padding-bottom: 36px; } .b-hero.d-full[data-s-overlay] .k-hero.k-ortali::before { grid-column: ic-bas / ic-son; justify-self: center; } .b-hero.d-full[data-s-overlay] .k-hero.k-ortali > .k-hero-title, .b-hero.d-full[data-s-overlay] .k-hero.k-ortali > .k-hero-text, .b-hero.d-full[data-s-overlay] .k-hero.k-ortali > .k-hero-actions { grid-column: ic-bas / ic-son; justify-self: center; width: min(100%, 540px); } } @media (min-width: 768px) and (max-width: 1279.98px) { .b-hero.d-full[data-s-overlay] .k-hero { grid-template-rows: [ust] minmax(16px, 1fr) auto auto auto [alt]; } .b-hero.d-full[data-s-overlay] .k-hero::before { grid-column: ic-bas / ic-son; margin-bottom: 24px; } .b-hero.d-full[data-s-overlay] .k-hero-title, .b-hero.d-full[data-s-overlay] .k-hero-text, .b-hero.d-full[data-s-overlay] .k-hero-actions { grid-column: ic-bas / ic-son; padding-inline: 28px; } .b-hero.d-full[data-s-overlay] .k-hero-media + .k-hero-title, .b-hero.d-full[data-s-overlay] .k-hero-media + .k-hero-text, .b-hero.d-full[data-s-overlay] .k-hero-media + .k-hero-actions { padding-top: 26px; } .b-hero.d-full[data-s-overlay] .k-hero > :not(.k-hero-media):last-child { margin-bottom: 24px; padding-bottom: 26px; } } .b-hero.d-split .k-hero-media { grid-row: 4; width: 100%; margin-top: 24px; aspect-ratio: 4 / 5; border-radius: var(--radius-block); } .b-hero.d-split .k-hero-media img { object-fit: contain; } .b-hero.d-split[data-s-image-fit="cover"] .k-hero-media img { object-fit: cover; } .b-hero.d-split .k-hero-title { grid-row: 1; } .b-hero.d-split .k-hero-text { grid-row: 2; } .b-hero.d-split .k-hero-actions { grid-row: 3; } @media (min-width: 768px) { .b-hero.d-split .k-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto auto auto minmax(0, 1fr); column-gap: clamp(24px, 5vw, 80px); } .b-hero.d-split .k-hero:not(:has(> .k-hero-media)) { grid-template-columns: minmax(0, 1fr); } .b-hero.d-split .k-hero-media { grid-column: 2; grid-row: 1 / -1; align-self: center; justify-self: center; max-width: 608px; margin-top: 0; } .b-hero.d-split .k-hero-title { grid-column: 1; grid-row: 2; } .b-hero.d-split .k-hero-text { grid-column: 1; grid-row: 3; } .b-hero.d-split .k-hero-actions { grid-column: 1; grid-row: 4; } } .b-hero.d-text { padding-block: clamp(48px, 7vw, 96px) calc(var(--section-gap) / 2); } @media (max-width: 767.98px) { .b-hero { padding-block: calc(var(--section-gap-mobile) / 2); } .b-hero.d-full { padding-block: 0 calc(var(--section-gap-mobile) / 2); } .b-hero.d-text { padding-block: 40px calc(var(--section-gap-mobile) / 2); } .b-hero.d-full .k-hero-media { width: 100%; aspect-ratio: 1 / 1; } .b-hero.d-full[data-s-height="medium"] .k-hero-media { aspect-ratio: 4 / 3; } .b-hero.d-full[data-s-height="short"] .k-hero-media { aspect-ratio: 16 / 9; } .b-hero.d-full[data-s-height="adapt"] .k-hero-media { aspect-ratio: auto; } .b-hero .k-hero-title { max-width: none; } }
.b-category-tiles .k-karolar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--grid-gap); margin: 0; padding: 0; list-style: none; } .b-category-tiles .k-karo-kol-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .b-category-tiles .k-karo-kol-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .b-category-tiles .k-karo-kol-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .b-category-tiles .k-karo { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--color-text-primary); } .b-category-tiles .k-karo:focus-visible { outline-color: var(--color-focus); } .b-category-tiles .k-karo-gorsel { display: block; overflow: hidden; background: var(--color-surface-alt); border-radius: var(--radius-card); } .b-category-tiles .k-karo-gorsel img { display: block; width: 100%; height: 100%; object-fit: var(--card-fit); transition: transform var(--motion-duration); } .b-category-tiles .k-karo:hover .k-karo-gorsel img { transform: scale(1.03); } .b-category-tiles .k-oran-1-1 .k-karo-gorsel { aspect-ratio: 1 / 1; } .b-category-tiles .k-oran-4-5 .k-karo-gorsel { aspect-ratio: 4 / 5; } .b-category-tiles .k-oran-3-4 .k-karo-gorsel { aspect-ratio: 3 / 4; } .b-category-tiles .k-oran-4-3 .k-karo-gorsel { aspect-ratio: 4 / 3; } .b-category-tiles .k-oran-dogal .k-karo-gorsel img { height: auto; } .b-category-tiles .k-karo-sigdir .k-karo-gorsel img { object-fit: contain; } .b-category-tiles .k-oran-dogal .k-karo-gorsel:empty { aspect-ratio: 1 / 1; } .b-category-tiles .k-karo-ad { display: block; margin-top: 14px; font-family: var(--font-display); font-weight: var(--font-display-weight); font-size: 18px; line-height: 1.25; text-transform: var(--display-transform); } .b-category-tiles .k-karo-sayi { display: block; margin-top: 4px; font-family: var(--font-body); font-size: var(--text-label); font-variant-numeric: tabular-nums; color: var(--color-text-secondary); } .b-category-tiles .k-karo:hover .k-karo-ad { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 1.5px; text-underline-offset: 5px; } .b-category-tiles.d-large .k-karolar { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 24px); } .b-category-tiles.d-large .k-karo-kol-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .b-category-tiles.d-large .k-karo-ad { margin-top: 16px; font-size: var(--text-h3); line-height: 1.2; } @media (max-width: 899.98px) { .b-category-tiles.d-grid .k-karo-kol-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .b-category-tiles.d-grid .k-karo-kol-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 767.98px) { .b-category-tiles.d-large .k-karolar { grid-template-columns: minmax(0, 1fr); row-gap: 32px; } .b-category-tiles.d-large .k-karo-gorsel { aspect-ratio: 4 / 3; } } @media (max-width: 599.98px) { .b-category-tiles.d-grid .k-karolar { gap: 20px 12px; } .b-category-tiles.d-grid .k-karo-kol-3, .b-category-tiles.d-grid .k-karo-kol-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .b-category-tiles.d-grid .k-karo-ad { margin-top: 10px; font-size: 16px; } } @media (prefers-reduced-motion: reduce) { .b-category-tiles .k-karo:hover .k-karo-gorsel img { transform: none; } }
.b-product-row .k-bolum-basi { justify-content: normal; gap: 12px 16px; } .b-product-row .k-bolum-baslik { margin: 0 auto 0 0; padding-right: 8px; } @media (scripting: enabled) { .b-product-row .k-serit-liste { scrollbar-width: none; } .b-product-row .k-serit-liste::-webkit-scrollbar { display: none; } } .b-product-row .k-urunler-izgara > ul { display: grid; grid-template-columns: repeat(var(--list-columns-mobile), minmax(0, 1fr)); gap: 28px 12px; margin: 0; padding: 0; list-style: none; } .b-product-row .k-urunler-izgara > ul > .k-hucre { min-width: 0; } .b-product-row .k-urunler-sessiz .k-kart-fiyat, .b-product-row .k-urunler-sessiz .k-kart-fiyat-satis, .b-product-row .k-urunler-sessiz .k-kart-fiyat-eski { font-size: var(--text-small); font-weight: 400; } .b-product-row .k-urunler-sessiz .k-kart-fiyat:not(.k-kart-fiyat-indirimli) .k-kart-fiyat-satis { color: var(--color-text-secondary); } @media (min-width: 600px) { .b-product-row .k-urunler-izgara > ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px var(--grid-gap); } } @media (min-width: 768px) { .b-product-row .k-bolum-basi > .k-serit-oklar { align-items: center; min-height: 44px; } .b-product-row .k-serit > .k-serit-oklar { justify-content: flex-end; margin-top: 12px; } } @media (min-width: 900px) { .b-product-row .k-serit-liste { grid-auto-columns: calc((100% - (var(--list-columns-desktop) - 1) * var(--grid-gap)) / (var(--list-columns-desktop) + 0.35)); } .b-product-row .k-urunler-izgara > ul { grid-template-columns: repeat(var(--list-columns-desktop), minmax(0, 1fr)); } } .b-product-row .k-serit-oklar:not(:has(> .k-serit-ok:enabled)) { display: none; } @media (scripting: none) { .b-product-row .k-serit-oklar { display: none; } }
.b-image-grid .k-bolum-basi { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 12px; } .b-image-grid .k-bolum-not { max-width: 40ch; margin: 0; white-space: pre-line; font-family: var(--font-body); font-size: 15px; color: var(--color-text-secondary); } .b-image-grid .k-gi-liste { display: grid; gap: var(--grid-gap); margin: 0; padding: 0; list-style: none; } .b-image-grid .k-gi-oge { min-width: 0; } .b-image-grid .k-gi-oge, .b-image-grid .k-gi-baglanti { display: flex; flex-direction: column; } .b-image-grid .k-gi-baglanti { color: inherit; text-decoration: none; } .b-image-grid .k-gi-baglanti:hover .k-gi-etiket { text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 4px; } .b-image-grid .k-gi-baglanti:focus-visible { outline-color: var(--color-focus); outline-offset: 4px; } .b-image-grid .k-gi-gorsel { display: block; overflow: hidden; background: var(--color-surface-alt); border-radius: var(--radius-block); } .b-image-grid .k-gi-gorsel img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; } .b-image-grid .k-gi-etiket { margin: 12px 0 0; font-family: var(--font-body); font-weight: 500; font-size: var(--text-body); line-height: 1.35; color: var(--color-text-primary); } .b-image-grid .k-gi-yazi { margin: 4px 0 0; font-family: var(--font-body); font-size: var(--text-small); color: var(--color-text-secondary); } .b-image-grid.d-editorial-duo .k-gi-liste { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; gap: clamp(16px, 3vw, 48px); } .b-image-grid.d-editorial-duo .k-gi-oge:nth-child(2) { margin-top: clamp(40px, 8vw, 120px); } .b-image-grid.d-editorial-duo .k-gi-gorsel img { aspect-ratio: 3 / 4; } .b-image-grid.d-editorial-duo .k-gi-etiket { margin-top: 16px; font-family: var(--font-display); font-weight: var(--font-display-weight); font-size: 20px; line-height: 1.2; text-transform: var(--display-transform); } @media (max-width: 599.98px) { .b-image-grid.d-editorial-duo .k-gi-liste { grid-template-columns: minmax(0, 1fr); } .b-image-grid.d-editorial-duo .k-gi-oge:nth-child(2) { margin-top: 0; } } .b-image-grid.d-grid .k-gi-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; } @media (min-width: 768px) { .b-image-grid.d-grid .k-gi-kol-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .b-image-grid.d-grid .k-gi-kol-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .b-image-grid.d-texture-band .k-gi-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 12px; } @media (min-width: 768px) { .b-image-grid.d-texture-band .k-gi-liste { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } } .b-image-grid.d-texture-band .k-gi-gorsel { overflow: visible; border-radius: 0; background: transparent; } .b-image-grid.d-texture-band .k-gi-gorsel img { clip-path: polygon(0 0, 6.25% 3%, 12.5% 0, 18.75% 3%, 25% 0, 31.25% 3%, 37.5% 0, 43.75% 3%, 50% 0, 56.25% 3%, 62.5% 0, 68.75% 3%, 75% 0, 81.25% 3%, 87.5% 0, 93.75% 3%, 100% 0, 97% 6.25%, 100% 12.5%, 97% 18.75%, 100% 25%, 97% 31.25%, 100% 37.5%, 97% 43.75%, 100% 50%, 97% 56.25%, 100% 62.5%, 97% 68.75%, 100% 75%, 97% 81.25%, 100% 87.5%, 97% 93.75%, 100% 100%, 93.75% 97%, 87.5% 100%, 81.25% 97%, 75% 100%, 68.75% 97%, 62.5% 100%, 56.25% 97%, 50% 100%, 43.75% 97%, 37.5% 100%, 31.25% 97%, 25% 100%, 18.75% 97%, 12.5% 100%, 6.25% 97%, 0 100%, 3% 93.75%, 0 87.5%, 3% 81.25%, 0 75%, 3% 68.75%, 0 62.5%, 3% 56.25%, 0 50%, 3% 43.75%, 0 37.5%, 3% 31.25%, 0 25%, 3% 18.75%, 0 12.5%, 3% 6.25%); transition: transform var(--motion-duration); } .b-image-grid.d-texture-band .k-gi-baglanti:hover .k-gi-gorsel img { transform: scale(1.03); } .b-image-grid.d-texture-band .k-gi-etiket { margin-top: 10px; font-size: var(--text-small); font-weight: 500; line-height: 1.35; } .b-hero.rt-light + .b-image-grid.d-texture-band.rt-light, .b-hero.rt-accent + .b-image-grid.d-texture-band.rt-accent, .b-hero.rt-dark + .b-image-grid.d-texture-band.rt-dark { padding-top: 0; } @media (prefers-reduced-motion: reduce) { .b-image-grid.d-texture-band .k-gi-baglanti:hover .k-gi-gorsel img { transform: none; } } .b-image-grid.d-choice-guide .k-gi-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } .b-image-grid.d-choice-guide .k-gi-gorsel img { aspect-ratio: 4 / 3; } @media (min-width: 768px) { .b-image-grid.d-choice-guide .k-gi-liste { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } } .b-image-grid.d-choice-guide .k-gi-oge > .k-gi-baglanti { flex: 1; } .b-image-grid.d-choice-guide .k-gi-baglanti, .b-image-grid.d-choice-guide .k-gi-oge:not(:has(> .k-gi-baglanti)) { box-sizing: border-box; padding: 10px 10px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); transition: border-color var(--motion-duration); } .b-image-grid.d-choice-guide .k-gi-baglanti:hover { border-color: var(--color-border-strong); } .b-image-grid.d-choice-guide .k-gi-baglanti:focus-visible { outline-offset: 2px; } .b-image-grid.d-choice-guide .k-gi-gorsel { border-radius: var(--radius-control); } .b-image-grid.d-choice-guide .k-gi-etiket { margin-top: 12px; font-family: var(--font-display); font-weight: var(--font-display-weight); font-size: 19px; line-height: 1.25; text-transform: var(--display-transform); }
.b-trust-strip { padding-block: clamp(24px, 3vw, 40px); } .b-trust-strip .k-guvence { margin: 0; padding: 0; list-style: none; font-family: var(--font-body); font-size: 15px; line-height: 1.4; } .b-trust-strip .k-guvence-madde { display: flex; align-items: center; gap: 10px; min-width: 0; } .b-trust-strip .k-simge { flex: none; width: 24px; height: 24px; color: var(--color-accent); } .b-trust-strip.d-row .k-guvence { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px var(--grid-gap); } .b-trust-strip.d-row .k-guvence-madde { justify-content: center; text-align: left; } .b-trust-strip.d-row .k-guvence-madde:last-child:nth-child(odd) { grid-column: 1 / -1; } @media (min-width: 1024px) { .b-trust-strip.d-row .k-guvence { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } .b-trust-strip.d-row .k-guvence-madde:last-child:nth-child(odd) { grid-column: auto; } } .b-trust-strip.d-compact .k-guvence { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 40px; } @media (max-width: 599.98px) { .b-trust-strip.d-row .k-guvence-madde { justify-content: flex-start; } .b-trust-strip.d-compact .k-guvence { gap: 8px 24px; } }