/* =======================================================
K-LAB COSMETIC — Responsive Layer + Stock Badge Helpers
Loaded after colors_and_type.css.
Targets:
1) Filling tablet (768-1024) gap that the inline render-design
block does not cover (only 900 + 560 today).
2) Improving 375 (XS phone) experience for inline-styled blocks.
3) Component-class helpers (.klab-stock-out-badge, .klab-card-out-of-stock).
4) Design-token consistency tokens (small overrides on hardcoded
spacing inside dist/*.js components).
IMPORTANT: do NOT change colors_and_type.css; this file is additive.
======================================================= */
/* =======================================================
KIRILIM ÖLÇEĞİ — cihaz sınıfları (2026-10-15)
Yeni responsive kurallar bu sınıflarla yazılır; her bileşen kendi CSS'inde aynı
sırayla cihaz bölümleri açar (telefon → tablet → masaüstü → geniş).
xs telefon dar ............ ≤359px (eski/küçük Android, 320)
sm telefon ................ 360–599px (iPhone, Galaxy, Pixel)
md tablet dikey ........... 600–899px (iPad mini/Air dikey, Fold açık)
lg tablet yatay / dizüstü . 900–1199px
xl masaüstü ............... 1200–1599px
xxl geniş masaüstü ......... ≥1600px
Örnek: @media (max-width:599px) telefon · (min-width:600px) and (max-width:899px) md ·
(min-width:1600px) xxl. SPA'daki eski 900px bandı (render-design.php) telefon+md'yi birlikte
kapsar; md'ye özel düzen o bloktan SONRA gelir. Doğrulama: tools/responsive (scan.js, interact.js).
======================================================= */
/* ---------- 0a) Android / mobile platform tuning (ALL viewports) ---------- */
/* Kill iOS/Android default tap-highlight (blue/gray flash on tap) for clean Material/Cupertino feel */
*{ -webkit-tap-highlight-color: transparent; }
/* Remove 300ms tap-delay on Chrome Android + improve tap responsiveness */
a, button, [role="button"], input[type="submit"], input[type="button"], label, summary{
touch-action: manipulation;
}
/* Eskiden burada html, body{ overscroll-behavior-y: contain } vardı. body'nin overflow-x:hidden ile
kaydırma kabına dönüştüğü yerde Android Chrome'da parmakla kaydırmayı tamamen kilitliyordu
(ana sayfa inmiyor, mağaza yukarı çıkmıyordu). iOS etkilenmiyordu. */
/* Selection color — match brand pink */
::selection{ background: rgba(255, 59, 154, .25); color: var(--klab-plum, #2D1B4E); }
::-moz-selection{ background: rgba(255, 59, 154, .25); color: var(--klab-plum, #2D1B4E); }
/* Smoother Chrome Android font rendering at small sizes */
html{ text-rendering: optimizeLegibility; }
/* Respect Android gesture-nav inset on bottom nav */
@supports (padding: env(safe-area-inset-bottom)) {
#klab-bottom-nav{ padding-bottom: max(env(safe-area-inset-bottom), 0px) !important; }
/* iPhone yatay: viewport-fit=cover yüzünden sayfa çentiğin / Dynamic Island'ın altına uzanıyor,
logo, menü, dil düğmeleri ve metin kenarları kesiliyordu. Yan güvenli alan kadar içeri çek.
env() yalnız çentikli iPhone yatay tutulunca sıfırdan büyük; başka hiçbir cihazda etkisi yok. */
html body{ padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
#klab-bottom-nav, .mob-tabbar{ padding-left: max(4px, env(safe-area-inset-left, 0px)) !important; padding-right: max(4px, env(safe-area-inset-right, 0px)) !important; }
.klab-pv-sticky{ padding-left: max(14px, env(safe-area-inset-left, 0px)) !important; padding-right: max(14px, env(safe-area-inset-right, 0px)) !important; }
}
/* Disable double-tap zoom on UI controls only (NOT body — keep pinch-zoom for accessibility) */
button, .kl-btn, [role="button"]{ touch-action: manipulation; }
/* Modern dynamic viewport units for drawer / full-height containers (Chrome Android 108+ / iOS 15.4+) */
@supports (height: 100dvh) {
#klab-drawer, .klab-drawer-panel, [data-klab-drawer]{ height: 100dvh !important; }
}
/* Hide outline on mouse focus but keep on keyboard focus (a11y) */
:focus:not(:focus-visible){ outline: 0; }
/* Erişilebilirlik — küçük metinde marka pembesi (#FF3B9A) beyaz üzerinde 3.31:1
kalıyor, WCAG AA 4.5 istiyor. Paletteki koyu ton #C8165E 5.63:1 veriyor.
Yalnızca küçük metinli iki yer değişiyor; büyük başlıklardaki pembe duruyor
(24px+ için eşik 3.0 ve pembe onu geçiyor). */
nav#klab-bottom-nav a.on .lb,
div#klab-cookie-banner p a { color: #C8165E !important; }
/* ---------- 0) Universal account-page hardening (ALL viewports) ----------
* .acc-page uses grid-template-columns:240px 1fr at >=900px. Inline product
* sub-grids (e.g. 1fr 1fr in account-wishlist) host natural-width ![]()
* which forces 1fr track expansion past viewport at narrow desktop (1009px).
* Promote img clamp + min-width:0 to ALL widths so 1024 viewport stays in. */
/* 404 page (.nf hero) — content can't force its own container wider than vp. */
.nf{ max-width: 100%; box-sizing: border-box; }
.nf .big, .nf .em{ overflow-wrap: anywhere; }
.acc-page,
.acc-page > *,
.acc-main,
.acc-main > *,
.acc-side {
min-width: 0;
}
.acc-page img,
.acc-main img {
max-width: 100%;
height: auto;
}
/* ---------- 1) Tablet-large (1024-1280px) :: container squeeze ---------- */
@media (max-width: 1280px) {
/* hero/section side padding tightens before mobile takes over */
section[style*="padding: 60px 40px"] {
padding: 48px 32px !important;
}
/* keep 5-col bestsellers to 4 on smaller laptop screens */
[style*="grid-template-columns: repeat(5, 1fr)"],
[style*="grid-template-columns: repeat(5,1fr)"] {
grid-template-columns: repeat(4, 1fr) !important;
}
}
/* ---------- 2) Tablet (901-1024px) :: NEW BREAKPOINT ---------- */
/* render-design.php only goes from desktop->mobile at 900px, so 768-1024
collapses too aggressively or not at all in some grids. We add a
true tablet step here. */
@media (min-width: 901px) and (max-width: 1024px) {
header[style*="position: sticky"] {
padding-left: 20px !important;
padding-right: 20px !important;
gap: 16px !important;
}
header > nav {
gap: 14px !important;
}
/* 4-col grids -> 3 on tablet */
[style*="grid-template-columns: repeat(4, 1fr)"],
[style*="grid-template-columns: repeat(4,1fr)"] {
grid-template-columns: repeat(3, 1fr) !important;
}
/* 5-col strips -> 3 on tablet */
[style*="grid-template-columns: repeat(5, 1fr)"],
[style*="grid-template-columns: repeat(5,1fr)"] {
grid-template-columns: repeat(3, 1fr) !important;
}
/* shop sidebar+grid stays side-by-side but narrower sidebar */
[style*="grid-template-columns: 260px 1fr"],
[style*="grid-template-columns: 300px 1fr"] {
grid-template-columns: 220px 1fr !important;
gap: 24px !important;
}
/* footer 4-col -> 2-col */
[style*="grid-template-columns: 1.4fr 1fr 1fr 1fr"] {
grid-template-columns: repeat(2, 1fr) !important;
gap: 28px !important;
}
/* hero text:visual at 1.2fr:1fr is fine but pad less */
section[style*="padding: 60px 40px"] {
padding: 40px 28px !important;
}
/* reduce big section margin */
section[style*="margin: 24px auto"] {
margin: 16px auto !important;
}
}
/* ---------- 3) Phone (max 560px) extras the existing block misses ---------- */
@media (max-width: 560px) {
/* Announce bar mobile: single horizontal line. Only first item visible — others hidden.
Cleaner than 3-line vertical stack. */
div[style*="background: linear-gradient(135deg, rgb(45, 27, 78)"][style*="text-align: center"] {
padding: 8px 12px !important;
gap: 8px !important;
font-size: 11px !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
overflow: hidden !important;
white-space: nowrap !important;
justify-content: center !important;
}
div[style*="background: linear-gradient(135deg, rgb(45, 27, 78)"] > span[style*="display: inline-flex"] {
font-size: 11px !important;
white-space: nowrap !important;
}
/* Hide separator dots (opacity:0.35 spans) + 2nd+3rd announce items on mobile.
Keep only first: "1.500₺ üzeri ÜCRETSİZ kargo". */
div[style*="background: linear-gradient(135deg, rgb(45, 27, 78)"] > span[style*="opacity: 0.35"],
div[style*="background: linear-gradient(135deg, rgb(45, 27, 78)"] > span[style*="border-radius: 50%"] {
display: none !important;
}
div[style*="background: linear-gradient(135deg, rgb(45, 27, 78)"] > span[style*="display: inline-flex"]:nth-of-type(n+3) {
display: none !important;
}
/* hero CTA buttons stack full-width — easier tap targets */
section[style*="border-radius: 24px"] [style*="display: flex"][style*="flex-wrap: wrap"][style*="gap: 12px"] > button {
flex: 1 1 100% !important;
width: 100% !important;
}
/* hero side-padding tightens */
section[style*="border-radius: 24px"][style*="padding: 60px 40px"],
section[style*="border-radius: 24px"][style*="padding: 48px 40px"] {
padding: 28px 18px !important;
border-radius: 18px !important;
margin: 12px 8px !important;
}
/* all section side padding (40px → 18px) */
section[style*="padding: 60px 40px"],
section[style*="padding: 48px 40px"],
section[style*="padding: 40px 40px"] {
padding-left: 18px !important;
padding-right: 18px !important;
}
/* section title vertical rhythm */
div[style*="text-align: center"][style*="margin: 64px 0px 24px"],
div[style*="text-align: center"][style*="margin: 64px 0 24px"] {
margin: 36px 0 16px !important;
}
/* footer gradients pad less, columns 1col on small phone */
footer[style*="padding: 64px 32px 24px"] {
padding: 40px 18px 16px !important;
margin-top: 32px !important;
}
footer [style*="grid-template-columns: 1.4fr 1fr 1fr 1fr"] {
grid-template-columns: 1fr !important;
gap: 24px !important;
}
/* product card: smaller image padding, larger price */
div[style*="aspect-ratio: 1 / 1"][style*="overflow: hidden"] img {
width: 92% !important;
height: 92% !important;
}
/* cart/checkout/account 2-col -> 1-col, the order summary lands below */
[style*="grid-template-columns: 1.2fr 1fr"],
[style*="grid-template-columns: 1.4fr 1fr"],
[style*="grid-template-columns: 1.6fr 1fr"],
[style*="grid-template-columns: 1.8fr 1fr"],
[style*="grid-template-columns: 1fr 1.1fr"],
[style*="grid-template-columns: 1fr 1.2fr"] {
grid-template-columns: 1fr !important;
gap: 18px !important;
}
/* Grid items (cards/inputs) must shrink — default min-width:auto causes
overflow when child min-content > viewport (input min-width, long text). */
[style*="grid-template-columns: 1.2fr 1fr"] > *,
[style*="grid-template-columns: 1.4fr 1fr"] > *,
[style*="grid-template-columns: 1.6fr 1fr"] > *,
[style*="grid-template-columns: 1.8fr 1fr"] > *,
[style*="grid-template-columns: 1fr 1.1fr"] > *,
[style*="grid-template-columns: 1fr 1.2fr"] > *,
[style*="grid-template-columns: 1fr 1fr"] > * {
min-width: 0 !important;
max-width: 100% !important;
}
/* Checkout form 2-col inner grids (firstName/lastName, exp/cvv) collapse */
[style*="grid-template-columns: 1fr 1fr"]:not([style*="1fr 1fr 1fr"]):not([style*="1fr 1fr;"]) {
grid-template-columns: 1fr !important;
gap: 10px !important;
}
/* Inputs/selects/textarea full-width inside grid */
input, select, textarea {
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Global box-sizing — React inline styles default to content-box;
padding adds to width and breaks overflow on narrow viewports (iPhone SE 320px). */
*, *::before, *::after {
box-sizing: border-box;
}
/* Süs öğelerinin yatay kaydırma açmasını önle. overflow-x:hidden body'ye de verilince body ayrı bir
kaydırma kabı oluyor ve Android'de dokunma kaydırmasını bozuyordu: clip kap oluşturmaz.
clip desteklemeyen eski tarayıcıda yalnız html (görünüm alanına aktarılır, iç kap oluşmaz). */
html { overflow-x: hidden !important; max-width: 100%; }
@supports (overflow-x: clip) {
html, body { overflow-x: clip !important; max-width: 100%; }
}
}
/* ---------- 3b) Wider tablet / phablet (561-900px) :: account + grid hardening ----------
* .acc-page collapses to 1-col below 900px (CSS line 11 mq), so the inline product
* grids + sidebar need the same min-width:0 / img clamp the 560-block applies.
*/
@media (max-width: 900px) {
img { max-width: 100% !important; height: auto; }
.acc-page,
.acc-page > *,
.acc-main,
.acc-main > *,
.acc-side {
min-width: 0 !important;
max-width: 100% !important;
}
.acc-page [style*="grid-template-columns"] { min-width: 0 !important; }
/* Re-open the original 560 block so the rest of its rules still close cleanly. */
}
@media (max-width: 560px) {
/* Image safety net — natural-width ![]()
shouldn't blow grid tracks. */
img {
max-width: 100% !important;
height: auto;
}
/* Account page grid hardening — sidebar + main + product grids min-width:0
so images / cards / chips don't force track expansion on mobile. */
.acc-page,
.acc-page > *,
.acc-main,
.acc-main > *,
.acc-side {
min-width: 0 !important;
max-width: 100% !important;
}
/* Account-page child product grids: any inline 1fr 1fr already collapses
above; ensure overflow stays clipped if child still tries to grow. */
.acc-page [style*="grid-template-columns"] {
min-width: 0 !important;
}
/* Mobile: hide ACCOUNT icon from top bar (Hesap reachable via bottom nav).
Keep search + cart visible. Cart routes to /sepet/. */
header .icons a[href*="account"],
header .icons a[href*="hesap"],
header button[aria-label*="Hesap"],
header button[aria-label*="Account"] {
display: none !important;
}
/* Iyzico pay-overlay — push above nav with smaller gap */
#iyzico-bpo1, [id*="iyzico-bpo"] {
bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
}
/* Tweaks dev panel hidden on small screens (production) */
body:not(.klab-edit-mode) .tweak-panel {
display: none !important;
}
}
/* ---------- 4) Extra-small (max 375px) :: fold/iphone SE ---------- */
@media (max-width: 375px) {
header[style*="position: sticky"] {
padding: 10px 12px !important;
gap: 8px !important;
}
header span[style*="font-size: 20px"] {
font-size: 17px !important;
}
/* logo image shrink */
header img[width="42"] {
width: 36px !important;
height: 36px !important;
}
/* hero h1 doesn't break */
section h1 {
font-size: clamp(1.5rem, 7vw, 2rem) !important;
letter-spacing: -1px !important;
}
/* product card padding */
div[style*="border-radius: 18px"] > div[style*="padding: 14px 14px 16px"] {
padding: 10px 10px 12px !important;
}
}
/* ---------- 5) Tap-target hardening (a11y, applies anywhere) ---------- */
@media (max-width: 900px) {
/* anything that looks like a small icon button -> 44x44 minimum */
button[style*="width: 38px"][style*="height: 38px"] {
width: 44px !important;
height: 44px !important;
min-width: 44px !important;
}
button[style*="width: 34px"][style*="height: 34px"] {
width: 40px !important;
height: 40px !important;
}
}
/* ---------- 6) Stock badge + out-of-stock card states ---------- */
.klab-stock-out-badge {
position: absolute;
top: 10px;
right: 10px;
z-index: 3;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 5px 10px;
border-radius: 6px;
background: var(--klab-error, #E11D48);
color: #fff;
font-family: var(--font-body, 'Inter', sans-serif);
font-size: 10px;
font-weight: 800;
letter-spacing: 1.2px;
line-height: 1;
text-transform: uppercase;
box-shadow: 0 4px 12px rgba(225, 29, 72, 0.25);
pointer-events: none;
white-space: nowrap;
}
/* Dark-tone variant — picks up plum gradient instead of flat red */
[data-tone="dark"] .klab-stock-out-badge,
.klab-tone-dark .klab-stock-out-badge {
background: var(--klab-plum, #2D1B4E);
color: var(--klab-pink-soft, #FFD1E8);
box-shadow: 0 4px 12px rgba(45, 27, 78, 0.45);
}
.klab-stock-out-badge svg {
width: 11px;
height: 11px;
}
/* Card visual treatment when stock = 0.
* - opacity .6 on the IMAGE area (not the whole card) so the
* STOK YOK badge stays at full contrast for readability.
* - "Sepete Ekle" / cart button: greyscale + disabled cursor
* - card itself stays interactive (so user can still open detail) */
.klab-card-out-of-stock {
position: relative;
}
.klab-card-out-of-stock > div[style*="aspect-ratio: 1 / 1"],
.klab-card-out-of-stock .klab-card-image {
opacity: 0.55;
filter: grayscale(0.25);
transition: opacity .25s var(--ease, cubic-bezier(.4,0,.2,1));
}
.klab-card-out-of-stock:hover > div[style*="aspect-ratio: 1 / 1"],
.klab-card-out-of-stock:hover .klab-card-image {
opacity: 0.7;
}
.klab-card-out-of-stock button[style*="background: linear-gradient(135deg, rgb(255, 59, 154)"],
.klab-card-out-of-stock .klab-add-to-cart {
background: var(--klab-blush-bg, #F3EEF9) !important;
color: var(--klab-muted, #8B7AA8) !important;
cursor: not-allowed !important;
box-shadow: none !important;
pointer-events: none;
}
.klab-card-out-of-stock button[style*="background: linear-gradient(135deg, rgb(255, 59, 154)"]::before,
.klab-card-out-of-stock .klab-add-to-cart::before {
content: "";
}
/* Notify-me CTA (when used in place of disabled add-to-cart) */
.klab-notify-me-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
margin-top: 10px;
width: 100%;
padding: 10px;
border: 2px solid var(--klab-plum, #2D1B4E);
border-radius: 999px;
background: transparent;
color: var(--klab-plum, #2D1B4E);
font-family: var(--font-body, 'Inter', sans-serif);
font-size: 11px;
font-weight: 800;
letter-spacing: 1px;
cursor: pointer;
transition: background .2s var(--ease), color .2s var(--ease);
}
.klab-notify-me-btn:hover {
background: var(--klab-plum, #2D1B4E);
color: #fff;
}
/* ---------- 7) Reduced motion respect ---------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ---------- 8) Prevent layout shift on font load (already handled
by Inter swap, but block scroll jump on keyboard-open mobile) ---------- */
@supports (height: 100dvh) {
body {
min-height: 100dvh;
}
}
/* ---------- 9) Newsletter card (gradUrgency) — mobile fix ----------
The form's inner row puts the email input + "ABONE OL" button in a flex
row, but the button has white-space:nowrap and padding 14px 28px which
pushes the row past the card's content area on narrow phones (~247px
after 44/40 padding). Keep them side-by-side, tighten card padding,
compact the button, and let the input shrink (min-width:0). */
@media (max-width: 560px) {
/* Tighten the gradient card's own padding/radius */
div[style*="padding: 44px 40px"][style*="border-radius: 28px"] {
padding: 28px 20px !important;
border-radius: 20px !important;
}
/* Allow grid item (form) and its inner flex row to shrink below content size.
Without min-width:0, the inner button's min-content forces the row past the
card's grid track, which then overflows left. */
[style*="grid-template-columns: 1.3fr 1fr"] form,
[style*="grid-template-columns: 1.3fr 1fr"] form > div:first-child {
min-width: 0 !important;
}
/* Let input shrink and tighten its padding (keep default 14/16px font for iOS) */
[style*="grid-template-columns: 1.3fr 1fr"] form input[type="email"] {
min-width: 0 !important;
padding: 12px 14px !important;
}
/* Compact the subscribe button so it fits next to the input */
[style*="grid-template-columns: 1.3fr 1fr"] form button {
padding: 12px 14px !important;
font-size: 12px !important;
letter-spacing: 0.4px !important;
flex-shrink: 0 !important;
}
}