/* ==========================================================================
Magnetiko — Ana Stil Dosyası
Premium mor paletli, dark/light mod, full responsive e-ticaret teması
========================================================================== */
/* Global perf: accessibility + düşük performanslı cihazlarda animasyonları neutralize et */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001s !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001s !important;
scroll-behavior: auto !important;
}
}
:root {
--purple-50: #f5f3ff;
--purple-100: #ede9fe;
--purple-200: #ddd6fe;
--purple-300: #c4b5fd;
--purple-400: #a78bfa;
--purple-500: #8b5cf6;
--purple-600: #7c3aed;
--purple-700: #6d28d9;
--purple-800: #5b21b6;
--purple-900: #4c1d95;
--pink-300: #f0abfc;
--gold: #fbbf24;
--radius-sm: 10px;
--radius: 16px;
--radius-lg: 22px;
--radius-xl: 32px;
--shadow-sm: 0 4px 12px rgba(91, 33, 182, .08);
--shadow: 0 18px 40px rgba(91, 33, 182, .14);
--shadow-lg: 0 30px 60px -10px rgba(91, 33, 182, .25);
--easing: cubic-bezier(.22, 1, .36, 1);
--container: 1280px;
--header-h: 78px;
}
/* THEME — DARK (default) */
html[data-theme="dark"] {
--bg: #0a0613;
--bg-2: #120a26;
--bg-3: #1a1033;
--surface: rgba(28, 18, 56, .65);
--surface-2: rgba(40, 25, 80, .55);
--surface-solid:#160c2c;
--border: rgba(167, 139, 250, .18);
--border-2: rgba(167, 139, 250, .32);
--text: #f5f3ff;
--text-2: #c4b5fd;
--text-3: #8d7cb8;
--accent: #a78bfa;
--accent-2: #c4b5fd;
--accent-strong:#7c3aed;
--hero-glow: radial-gradient(60% 60% at 30% 30%, rgba(124, 58, 237, .55), transparent 70%),
radial-gradient(50% 50% at 80% 20%, rgba(167, 139, 250, .35), transparent 70%),
radial-gradient(70% 70% at 70% 100%, rgba(76, 29, 149, .4), transparent 70%);
--grid-line: rgba(167, 139, 250, .08);
--header-bg: rgba(10, 6, 19, .78);
--card-bg: linear-gradient(160deg, rgba(36, 22, 70, .8), rgba(20, 12, 40, .7));
--shadow: 0 20px 50px rgba(0, 0, 0, .55);
--shadow-lg: 0 35px 80px rgba(0, 0, 0, .65);
}
/* THEME — LIGHT (default) — sıcak morumsu krem, mor efektleri öldürmez */
html[data-theme="light"] {
--bg: #f4eefb;
--bg-2: #ebe2f6;
--bg-3: #ddd1f0;
--surface: rgba(255, 255, 255, .58);
--surface-2: rgba(255, 255, 255, .38);
--surface-solid:#ffffff;
--border: rgba(124, 58, 237, .18);
--border-2: rgba(124, 58, 237, .32);
--text: #1a1033;
--text-2: #5b21b6;
--text-3: #6b5b8a;
--accent: #7c3aed;
--accent-2: #5b21b6;
--accent-strong:#5b21b6;
--hero-glow: radial-gradient(60% 60% at 30% 30%, rgba(167, 139, 250, .55), transparent 70%),
radial-gradient(50% 50% at 80% 20%, rgba(196, 181, 253, .50), transparent 70%),
radial-gradient(70% 70% at 70% 100%, rgba(167, 139, 250, .35), transparent 70%);
--grid-line: rgba(124, 58, 237, .09);
--header-bg: rgba(244, 238, 251, .78);
--card-bg: linear-gradient(160deg, #ffffff, #f6effc);
--shadow: 0 18px 40px rgba(91, 33, 182, .14);
--shadow-lg: 0 30px 60px rgba(91, 33, 182, .20);
}
* { box-sizing: border-box; }
*::before, *::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
overflow-x: hidden;
width: 100%;
max-width: 100%;
}
body {
margin: 0;
font-family: 'Poppins', system-ui, -apple-system, Segoe UI, sans-serif;
font-size: 16px;
line-height: 1.6;
color: var(--text);
background: var(--bg);
background-image:
linear-gradient(var(--grid-line) 1px, transparent 1px),
linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
background-size: 60px 60px;
background-attachment: fixed;
overflow-x: hidden;
width: 100%;
max-width: 100vw;
position: relative;
transition: background-color .35s var(--easing), color .35s var(--easing);
/* Sticky footer: az içerikte footer alta yapışsın, banner-footer arasında boşluk olmasın */
display: flex;
flex-direction: column;
min-height: 100vh;
}
main { flex: 1 0 auto; }
.site-footer { flex-shrink: 0; }
@media (max-width: 720px) {
body { background-attachment: scroll; }
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color .2s; }
a:hover { color: var(--accent); }
button { font-family: inherit; cursor: pointer; }
input, textarea, select, button { font: inherit; color: inherit; }
h1, h2, h3, h4 {
font-family: 'Poppins', sans-serif;
font-weight: 700;
line-height: 1.18;
letter-spacing: -.02em;
margin: 0 0 .6em;
color: var(--text);
}
h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
p { margin: 0 0 1em; }
.script { font-family: 'Pacifico', cursive; font-weight: 400; letter-spacing: -.01em; }
.handwrite{ font-family: 'Caveat', cursive; font-weight: 600; letter-spacing: 0; }
/* Skip link */
.skip-link {
position: absolute; top: -100px; left: 1rem;
background: var(--accent); color: #fff;
padding: .6rem 1rem; border-radius: 8px; z-index: 200;
transition: top .2s;
}
.skip-link:focus { top: 1rem; }
/* ============================ ANNOUNCE BAR ============================ */
.announce-bar {
position: relative;
overflow: hidden;
background: linear-gradient(90deg, var(--purple-700), var(--purple-500), var(--purple-700));
color: #fff;
font-size: .82rem;
padding: .5rem 0;
font-weight: 500;
letter-spacing: .01em;
}
.announce-track {
display: inline-flex; gap: 2.4rem;
white-space: nowrap;
animation: marquee 36s linear infinite;
padding-left: 100%;
}
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
/* ============================ HEADER ============================ */
.site-header {
position: sticky; top: 0; z-index: 100;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
background: var(--header-bg);
border-bottom: 1px solid var(--border);
transition: padding .25s var(--easing), background .25s var(--easing);
}
.site-header.scrolled {
padding-top: 0;
box-shadow: 0 8px 30px rgba(91, 33, 182, .18);
}
.header-inner {
/* Slider ile BİREBİR aynı geometri: width/max-width/margin slider ile aynı, iç padding YOK.
Böylece logonun sol kenarı slider'ın sol kenarına, Sepet'in sağ kenarı slider'ın sağ kenarına oturur. */
width: calc(100% - 3rem);
max-width: 1380px;
margin: 0 auto;
height: var(--header-h);
display: flex; align-items: center;
justify-content: space-between; /* logo↔menü ile menü↔ikonlar arası boşluk EŞİT → dengeli/ortalı */
gap: .55rem;
padding: 0;
}
.header-inner > .brand { flex: 0 0 auto; min-width: 0; }
.header-inner > .primary-nav { flex: 0 1 auto; }
.header-inner > .header-actions { flex: 0 0 auto; }
/* Link padding/font tek kaynaktan aşağıda (.primary-nav > a) tanımlı */
.primary-nav .nav-special { gap: .25rem; }
.primary-nav .nav-special .ns-icon { font-size: .95em; }
/* Brand alt yazı (KİŞİYE ÖZEL HEDİYELER) tüm masaüstünde gizli — gereksiz yer kaplıyordu */
.brand-sub { display: none !important; }
/* Tüm masaüstü (>1500): kompakt header */
.header-inner .btn-primary,
.header-inner .btn-ghost,
.header-inner .btn-secondary { padding: .5rem 1rem !important; font-size: .88rem !important; }
.header-inner .auth-pills { gap: .7rem !important; }
.header-actions { gap: .7rem !important; } /* nav metin gap'i ile eşit — her ikon ayrı obje */
/* Daha dar laptop'larda: ikonları da gizle, font biraz küçült, butonları kompakt */
@media (max-width: 1280px) {
.header-inner { gap: .65rem; padding: 0; }
.primary-nav > a, .primary-nav .has-mega > a { padding: .45rem .5rem; font-size: .88rem; }
.primary-nav .nav-special .ns-icon { display: none; }
.primary-nav .nav-special { gap: 0; }
.header-inner .btn-primary,
.header-inner .btn-ghost,
.header-inner .btn-secondary { padding: .45rem .85rem !important; font-size: .85rem !important; }
.header-inner .icon-btn { width: 36px; height: 36px; }
}
/* En dar masaüstü — daha sıkı pad ve font */
@media (max-width: 1100px) {
.header-inner { gap: .4rem; padding: 0; }
.primary-nav > a, .primary-nav .has-mega > a { padding: .35rem .4rem; font-size: .82rem; }
.header-inner .btn-primary,
.header-inner .btn-ghost,
.header-inner .btn-secondary { padding: .4rem .7rem !important; font-size: .8rem !important; }
}
.brand {
display: inline-flex; align-items: center; gap: .8rem;
-webkit-user-select: none; user-select: none; /* logoya basınca metin maviye seçilmesin */
-webkit-tap-highlight-color: transparent; /* mobilde dokunma parlaması olmasın */
-webkit-touch-callout: none;
}
.brand:hover { color: inherit; }
.brand-mark {
width: 40px; height: 40px;
display: inline-flex; align-items: center; justify-content: center;
filter: drop-shadow(0 8px 16px rgba(124, 58, 237, .4));
transition: transform .4s var(--easing);
}
.brand:hover .brand-mark { transform: rotate(-8deg) scale(1.05); }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name {
font-family: 'Poppins', sans-serif;
font-weight: 800;
font-size: 1.5rem;
letter-spacing: -.02em;
color: var(--text);
position: relative;
display: inline-flex; align-items: baseline;
}
.brand-name em {
font-family: 'Pacifico', cursive;
font-style: normal;
font-weight: 400;
background: linear-gradient(135deg, var(--purple-400), var(--purple-700));
-webkit-background-clip: text; background-clip: text;
color: transparent;
font-size: 1.6rem;
margin-left: 1px;
}
.brand-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--gold);
margin-left: 4px;
box-shadow: 0 0 12px var(--gold);
}
.brand-sub {
font-size: .68rem;
color: var(--text-3);
letter-spacing: .12em;
text-transform: uppercase;
margin-top: 2px;
font-weight: 500;
}
.primary-nav {
display: flex; align-items: center; gap: .7rem; /* her öğe = bir obje, header-actions ile eşit */
justify-content: center;
}
.primary-nav > a, .primary-nav .has-mega > a {
position: relative;
padding: .5rem .6rem;
border-radius: 999px;
font-size: .92rem;
font-weight: 500;
letter-spacing: -.005em;
color: var(--text-2);
transition: transform .2s, box-shadow .2s, border-color .2s, background-color .2s, color .2s, opacity .2s;
white-space: nowrap;
}
.primary-nav > a:hover,
.primary-nav .has-mega > a:hover,
.primary-nav > a.active {
color: var(--text);
background: var(--surface);
}
.primary-nav > a.active::after {
content: ''; position: absolute;
left: 50%; bottom: -2px; transform: translateX(-50%);
width: 5px; height: 5px; border-radius: 50%;
background: var(--accent);
}
.has-mega { position: relative; }
/* Görünmez köprü — trigger ile mega-menu arasındaki 14px boşluğu hover alanına dahil eder */
.has-mega::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
width: 240px;
height: 22px;
pointer-events: none;
}
.has-mega:hover::after,
.has-mega:focus-within::after {
pointer-events: auto;
}
.mega-menu {
position: absolute; top: calc(100% + 14px); left: 50%;
transform: translateX(-50%) translateY(8px);
width: 640px;
background: var(--surface-solid);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
padding: 1.2rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap: .4rem;
opacity: 0; pointer-events: none;
will-change: opacity, transform;
/* Kapanırken .2s grace period, açılırken anlık */
transition:
opacity .2s ease-out .15s,
transform .2s ease-out .15s;
}
.mega-menu::before {
content: ''; position: absolute;
top: -8px; left: 50%; transform: translateX(-50%) rotate(45deg);
width: 16px; height: 16px;
background: var(--surface-solid);
border-left: 1px solid var(--border);
border-top: 1px solid var(--border);
}
.has-mega:hover .mega-menu,
.has-mega:focus-within .mega-menu {
opacity: 1; pointer-events: auto;
transform: translateX(-50%) translateY(0);
transition:
opacity .15s ease-out 0s,
transform .15s ease-out 0s;
}
.mega-menu:not(.mega-products) a {
display: flex; align-items: center; gap: .85rem;
padding: .7rem; border-radius: var(--radius-sm);
transition: background .2s;
}
.mega-menu:not(.mega-products) a:hover { background: var(--surface); }
.mega-icon {
width: 38px; height: 38px;
border-radius: 12px;
display: inline-flex; align-items: center; justify-content: center;
font-size: 1.15rem; flex-shrink: 0;
}
.mega-text { display: flex; flex-direction: column; }
.mega-title { font-size: .92rem; font-weight: 600; color: var(--text); }
.mega-tag { font-size: .76rem; color: var(--text-3); }
.header-actions {
display: flex; align-items: center; gap: .7rem; /* primary-nav ile eşit obje aralığı */
}
.icon-btn {
width: 42px; height: 42px;
border-radius: 50%;
background: var(--surface);
border: 1px solid var(--border);
display: inline-flex; align-items: center; justify-content: center;
color: var(--text);
transition: transform .25s var(--easing), box-shadow .25s var(--easing), border-color .25s var(--easing), background-color .25s var(--easing), color .25s var(--easing), opacity .25s var(--easing);
position: relative;
flex-shrink: 0;
}
.icon-btn:hover {
background: var(--accent);
color: #fff;
border-color: var(--accent);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(124, 58, 237, .3);
}
.icon-btn.active {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
.icon-btn.header-avatar {
padding: 0;
overflow: hidden;
aspect-ratio: 1 / 1;
}
.icon-btn.header-avatar img {
width: 100%; height: 100%; object-fit: cover; display: block;
border-radius: 50%;
}
.icon-btn.header-avatar:hover img { transform: scale(1.05); transition: transform .25s; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
/* Mobilde gizlenenler — sipariş takip + tema (drawer'da var) */
@media (max-width: 768px) {
.icon-btn-desktop-only,
.header-actions .theme-toggle,
.header-actions #searchToggle { display: none !important; }
}
/* Sipariş Takip ikon — diğer ikonlarla aynı sade stil (eski hali) */
html[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
.badge {
position: absolute;
top: -4px; right: -4px;
min-width: 20px; height: 20px;
padding: 0 5px;
border-radius: 999px;
background: linear-gradient(135deg, #ec4899, #7c3aed);
color: #fff;
font-size: .72rem;
font-weight: 700;
display: inline-flex; align-items: center; justify-content: center;
box-shadow: 0 4px 10px rgba(236, 72, 153, .5);
animation: badge-pop .35s var(--easing);
}
@keyframes badge-pop {
0% { transform: scale(0); }
60% { transform: scale(1.2); }
100% { transform: scale(1); }
}
.cart-link {
display: inline-flex; align-items: center; gap: .55rem;
padding: .5rem .9rem .5rem .8rem;
border-radius: 999px;
background: linear-gradient(135deg, var(--purple-600), var(--purple-800));
color: #fff;
font-weight: 600;
font-size: .9rem;
border: none;
position: relative;
box-shadow: 0 8px 20px rgba(124, 58, 237, .35);
transition: transform .25s var(--easing), box-shadow .25s;
}
.cart-link:hover {
color: #fff;
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(124, 58, 237, .5);
}
.cart-link .badge {
position: relative; top: 0; right: 0;
background: rgba(255, 255, 255, .25);
box-shadow: none;
}
/* Header hediye/kupon ikonu — kullanıcının kullanılabilir kuponu varsa altın badge ile öne çıkar */
.icon-btn.coupons-link.has-gifts {
color: #f59e0b;
animation: gift-pulse 2.5s ease-in-out infinite;
}
.icon-btn.coupons-link.has-gifts:hover { color: #d97706; }
.icon-btn.coupons-link .gift-badge {
background: linear-gradient(135deg, #fbbf24, #f59e0b);
color: #fff;
box-shadow: 0 2px 6px rgba(245, 158, 11, .5);
font-weight: 700;
}
@keyframes gift-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.08); }
}
.btn-pill {
display: inline-flex; align-items: center; gap: .5rem;
padding: .55rem 1.1rem;
border-radius: 999px;
font-weight: 600;
font-size: .9rem;
background: var(--accent);
color: #fff;
border: none;
transition: transform .25s var(--easing), box-shadow .25s var(--easing), border-color .25s var(--easing), background-color .25s var(--easing), color .25s var(--easing), opacity .25s var(--easing);
box-shadow: 0 8px 20px rgba(124, 58, 237, .25);
white-space: nowrap;
}
.btn-pill:hover { transform: translateY(-2px); color: #fff; box-shadow: 0 14px 28px rgba(124, 58, 237, .4); }
.btn-pill.ghost {
background: transparent;
color: var(--text);
border: 1.5px solid var(--border-2);
box-shadow: none;
}
.btn-pill.ghost:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
/* Header'da "Giriş" + "Üye Ol" yan yana grubu */
.auth-pills {
display: inline-flex;
align-items: center;
gap: .4rem;
}
.mobile-toggle { display: none; flex-direction: column; gap: 4px; }
.mobile-toggle span { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .3s; }
/* ============== Arama overlay ============== */
.search-overlay {
position: fixed;
inset: 0;
background: rgba(15, 12, 35, .55);
backdrop-filter: blur(8px);
z-index: 250;
display: none;
align-items: flex-start;
justify-content: center;
padding: 12vh 1rem 1rem;
opacity: 0;
transition: opacity .25s var(--easing);
}
.search-overlay.open {
display: flex;
opacity: 1;
}
.search-form {
position: relative;
display: flex;
align-items: center;
gap: .5rem;
width: min(680px, 100%);
background: var(--surface-solid);
border: 1.5px solid var(--border-2);
border-radius: 18px;
padding: .55rem .55rem .55rem 1.2rem;
box-shadow: 0 30px 80px rgba(15, 12, 35, .35);
transform: translateY(-12px);
transition: transform .3s var(--easing);
}
.search-overlay.open .search-form { transform: translateY(0); }
.search-form .search-ic { color: var(--text-3); display: inline-flex; align-items: center; }
.search-form input[type="search"] {
flex: 1;
border: 0;
outline: 0;
background: transparent;
font-size: 1.05rem;
color: var(--text);
padding: .85rem .3rem;
font-family: inherit;
min-width: 0;
}
.search-form input[type="search"]::placeholder { color: var(--text-3); }
.search-submit {
background: linear-gradient(135deg, var(--accent), var(--accent-2));
color: #fff;
border: 0;
padding: .7rem 1.3rem;
border-radius: 12px;
font-weight: 600;
cursor: pointer;
transition: transform .2s var(--easing), box-shadow .2s;
}
.search-submit:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(124, 58, 237, .35); }
.search-close {
background: transparent;
border: 0;
width: 36px; height: 36px;
border-radius: 50%;
font-size: 22px;
line-height: 1;
cursor: pointer;
color: var(--text-2);
transition: background .2s;
}
.search-close:hover { background: var(--surface-2); }
/* Mobil drawer içinde arama */
.drawer-search {
display: flex;
align-items: center;
gap: .5rem;
margin: 1rem 1.2rem .4rem;
padding: .65rem .9rem;
border: 1.5px solid var(--border-2);
border-radius: 12px;
background: var(--surface);
color: var(--text-3);
}
.drawer-search input {
flex: 1;
border: 0;
outline: 0;
background: transparent;
font-size: .95rem;
color: var(--text);
font-family: inherit;
min-width: 0;
}
@media (max-width: 600px) {
.search-form { padding-left: .8rem; gap: .35rem; }
.search-form input[type="search"] { font-size: 1rem; padding: .75rem .25rem; }
.search-submit { padding: .55rem .9rem; font-size: .85rem; }
.search-overlay { padding-top: 8vh; }
}
/* Arama sonuç sayfası */
.search-page-form {
display: flex;
align-items: center;
gap: .6rem;
background: var(--surface-solid);
border: 1.5px solid var(--border-2);
border-radius: 14px;
padding: .5rem .5rem .5rem 1rem;
margin: 0 0 2rem;
box-shadow: 0 8px 24px rgba(15, 12, 35, .06);
}
.search-page-form .sp-ic { color: var(--text-3); display: inline-flex; }
.search-page-form input[type="search"] {
flex: 1;
border: 0;
outline: 0;
background: transparent;
font-size: 1rem;
color: var(--text);
padding: .8rem .3rem;
font-family: inherit;
min-width: 0;
}
.search-page-form .btn-primary { padding: .7rem 1.4rem; }
.search-empty {
text-align: center;
padding: 3rem 1rem;
}
.search-empty .se-icon {
font-size: 3.5rem;
margin-bottom: 1rem;
}
.search-empty h2 {
font-size: 1.5rem;
margin: 0 0 .6rem;
}
.search-empty p {
color: var(--text-2);
max-width: 460px;
margin: 0 auto 1.5rem;
}
.se-tags {
display: flex;
flex-wrap: wrap;
gap: .55rem;
justify-content: center;
}
.se-tag {
display: inline-flex;
align-items: center;
gap: .4rem;
padding: .55rem 1rem;
background: var(--surface);
border: 1.5px solid var(--border-2);
border-radius: 999px;
font-size: .9rem;
color: var(--text);
transition: transform .2s var(--easing), box-shadow .2s var(--easing), border-color .2s var(--easing), background-color .2s var(--easing), color .2s var(--easing), opacity .2s var(--easing);
}
.se-tag:hover {
background: linear-gradient(135deg, rgba(124, 58, 237, .1), rgba(167, 139, 250, .15));
border-color: var(--accent);
transform: translateY(-1px);
}
/* Sayfa sonuç kartları */
.search-section-h {
font-size: 1rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--text-3);
display: inline-flex;
align-items: center;
gap: .5rem;
margin: 1.4rem 0 .9rem;
}
.search-section-h:first-of-type { margin-top: .2rem; }
.search-section-h small {
font-weight: 500;
text-transform: none;
letter-spacing: 0;
color: var(--text-3);
}
.search-pages-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: .8rem;
margin-bottom: 2rem;
}
.sp-card {
display: flex;
align-items: center;
gap: .9rem;
padding: 1rem 1.1rem;
background: var(--surface-solid);
border: 1.5px solid var(--border-2);
border-radius: 14px;
color: var(--text);
transition: transform .25s var(--easing), box-shadow .25s var(--easing), border-color .25s var(--easing), background-color .25s var(--easing), color .25s var(--easing), opacity .25s var(--easing);
}
.sp-card:hover {
border-color: var(--accent);
transform: translateY(-2px);
box-shadow: 0 14px 28px rgba(124, 58, 237, .15);
}
.sp-card-icon {
font-size: 1.7rem;
line-height: 1;
flex-shrink: 0;
width: 44px; height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(124, 58, 237, .1), rgba(167, 139, 250, .15));
border-radius: 12px;
}
.sp-card-body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sp-card-body strong { font-size: .95rem; font-weight: 600; }
.sp-card-body small {
font-size: .82rem;
color: var(--text-3);
line-height: 1.4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sp-card-arrow {
color: var(--accent);
font-size: 1.2rem;
transition: transform .25s;
}
.sp-card:hover .sp-card-arrow { transform: translateX(4px); }
.mobile-drawer {
position: fixed; top: 0; right: -100%;
width: 320px; max-width: 90vw; height: 100vh;
background: var(--surface-solid);
border-left: 1px solid var(--border);
z-index: 1110; /* vacation-banner (1000) üstünde olmalı — banner drawer'ın arkasında kalsın */
transition: right .35s var(--easing);
overflow-y: auto;
box-shadow: -20px 0 50px rgba(0, 0, 0, .25);
}
.mobile-drawer.open { right: 0; }
.drawer-overlay {
position: fixed; inset: 0;
background: rgba(10, 6, 19, .65);
backdrop-filter: blur(4px);
z-index: 1100; /* drawer'ın hemen altı, banner'ın üstü */
opacity: 0; pointer-events: none;
transition: opacity .3s;
}
.drawer-overlay.open { opacity: 1; pointer-events: auto; }
.drawer-head {
padding: 1.2rem 1.5rem;
display: flex; align-items: center; justify-content: space-between;
border-bottom: 1px solid var(--border);
font-weight: 700;
font-size: 1.05rem;
}
.drawer-nav { display: flex; flex-direction: column; padding: .8rem 1.2rem 4rem; gap: .15rem; }
.drawer-nav a {
padding: .85rem 1rem;
border-radius: var(--radius-sm);
color: var(--text);
font-weight: 500;
font-size: .96rem;
transition: background .2s, transform .2s;
}
.drawer-nav a:hover { background: var(--surface); transform: translateX(4px); }
.drawer-cat { display: flex !important; align-items: center; gap: .8rem; }
/* ============================ HERO ============================ */
.hero {
position: relative;
min-height: clamp(540px, 82vh, 720px);
display: flex; align-items: center;
overflow: hidden;
padding: 3.5rem 0 2.5rem;
}
.hero::before {
content: ''; position: absolute; inset: -10%;
background: var(--hero-glow);
filter: blur(30px);
z-index: 0;
animation: float-glow 32s ease-in-out infinite;
/* Alt kenarda yumuşak fade — keskin "mor iz" oluşmasın */
-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 65%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 0%, #000 65%, transparent 100%);
}
@keyframes float-glow {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(20px, -30px) scale(1.05); }
}
.hero-inner {
position: relative; z-index: 2;
max-width: var(--container);
width: 100%;
margin: 0 auto;
padding: 0 1.5rem;
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 3rem;
align-items: center;
}
.hero-eyebrow {
display: inline-flex; align-items: center; gap: .5rem;
background: var(--surface);
border: 1px solid var(--border-2);
padding: .45rem 1rem;
border-radius: 999px;
font-size: .82rem;
font-weight: 500;
color: var(--text-2);
margin-bottom: 1.5rem;
backdrop-filter: blur(10px);
}
.hero-eyebrow .dot {
width: 8px; height: 8px; border-radius: 50%;
background: #34d399;
box-shadow: 0 0 0 0 #34d399;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .7); }
70% { box-shadow: 0 0 0 12px rgba(52, 211, 153, 0); }
100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}
.hero-title {
font-size: clamp(2.2rem, 5.5vw, 4.2rem);
font-weight: 800;
letter-spacing: -.03em;
line-height: 1.05;
margin-bottom: 1.2rem;
}
.hero-title .line { display: block; }
.hero-title .accent {
background: linear-gradient(135deg, var(--purple-300), var(--purple-600));
-webkit-background-clip: text; background-clip: text;
color: transparent;
}
.hero-title .script {
display: inline-block;
font-size: 1.1em;
background: linear-gradient(135deg, var(--purple-400), var(--purple-700));
-webkit-background-clip: text; background-clip: text;
color: transparent;
transform: rotate(-2deg);
padding: 0 .15em;
}
.hero-sub {
font-size: clamp(1.02rem, 1.5vw, 1.15rem);
color: var(--text-2);
max-width: 540px;
margin-bottom: 2rem;
line-height: 1.65;
}
.hero-cta {
display: flex; gap: .8rem; flex-wrap: wrap;
margin-bottom: 2.5rem;
}
.btn-primary, .btn-secondary {
display: inline-flex; align-items: center; gap: .55rem;
padding: 1rem 1.6rem;
border-radius: 999px;
font-size: .98rem;
font-weight: 600;
border: none;
transition: transform .3s var(--easing), box-shadow .3s var(--easing), border-color .3s var(--easing), background-color .3s var(--easing), color .3s var(--easing), opacity .3s var(--easing);
cursor: pointer;
}
.btn-primary {
background: linear-gradient(135deg, var(--purple-500), var(--purple-700));
color: #fff;
box-shadow: 0 12px 30px rgba(124, 58, 237, .45);
position: relative; overflow: hidden;
isolation: isolate;
}
.btn-primary::before {
content: ''; position: absolute; inset: 0;
background: linear-gradient(135deg, var(--purple-400), var(--purple-600));
opacity: 0; transition: opacity .3s;
z-index: -1;
pointer-events: none;
}
.btn-primary:hover {
color: #fff;
transform: translateY(-3px);
box-shadow: 0 18px 40px rgba(124, 58, 237, .6);
}
.btn-primary:hover::before { opacity: 1; }
.btn-secondary {
background: var(--surface);
color: var(--text);
border: 1.5px solid var(--border-2);
}
.btn-secondary:hover { background: var(--accent); color: #fff; border-color: var(--accent); transform: translateY(-3px); }
.hero-trust {
display: flex; align-items: center; gap: 2rem;
flex-wrap: wrap;
}
.trust-item {
display: flex; align-items: center; gap: .65rem;
font-size: .88rem;
color: var(--text-2);
}
.trust-item svg { color: var(--accent); flex-shrink: 0; }
.trust-item strong { color: var(--text); display: block; font-weight: 600; }
.trust-item small { font-size: .76rem; color: var(--text-3); display: block; }
/* HERO ART */
.hero-art {
position: relative;
aspect-ratio: 1 / 1;
max-width: 540px;
margin: 0 auto;
}
.hero-fridge {
position: absolute; inset: 5% 8% 0 5%;
background: linear-gradient(160deg, #f5f3ff, #d4c8f5);
border-radius: 32px 32px 18px 18px;
box-shadow:
0 30px 80px rgba(91, 33, 182, .35),
inset 0 -20px 50px rgba(91, 33, 182, .08),
inset 5px 0 8px rgba(255, 255, 255, .9);
border: 4px solid #c4b5fd;
}
html[data-theme="dark"] .hero-fridge {
background: linear-gradient(160deg, #2a1c52, #1a0f38);
border-color: #4c1d95;
}
.hero-fridge::after {
content: ''; position: absolute;
top: 35%; left: -2px; bottom: 0;
width: 8px;
background: linear-gradient(90deg, transparent, rgba(91, 33, 182, .3));
border-radius: 0 0 0 18px;
}
.hero-handle {
position: absolute;
right: 14%; top: 18%;
width: 14px; height: 70px;
background: linear-gradient(90deg, #a78bfa, #5b21b6);
border-radius: 999px;
box-shadow: 0 4px 12px rgba(91, 33, 182, .4);
}
.float-magnet {
position: absolute;
width: 130px; aspect-ratio: 1/1;
border-radius: 24px;
overflow: hidden;
box-shadow:
0 20px 50px rgba(91, 33, 182, .35),
0 6px 14px rgba(91, 33, 182, .25),
inset 0 -3px 0 rgba(0, 0, 0, .1);
animation: float-y 12s ease-in-out infinite;
transform-origin: center;
}
.float-magnet svg { width: 100%; height: 100%; }
.float-magnet.m1 { top: 12%; left: 10%; animation-delay: 0s; transform: rotate(-6deg); }
.float-magnet.m2 { top: 22%; right: 8%; width: 150px; animation-delay: -2s; transform: rotate(7deg); }
.float-magnet.m3 { bottom: 18%; left: 22%; width: 110px; animation-delay: -4s; transform: rotate(-3deg); }
.float-magnet.m4 { bottom: 8%; right: 18%; width: 120px; animation-delay: -1s; transform: rotate(5deg); }
@keyframes float-y {
0%, 100% { transform: translateY(0) rotate(var(--r, -4deg)); }
50% { transform: translateY(-14px) rotate(var(--r, -4deg)); }
}
.float-magnet.m1 { --r: -6deg; }
.float-magnet.m2 { --r: 7deg; }
.float-magnet.m3 { --r: -3deg; }
.float-magnet.m4 { --r: 5deg; }
/* HERO SHOWCASE V2 — 3 dramatik büyük polaroid */
.hero-showcase-v2 {
position: absolute;
inset: 0;
display: block;
}
.hsv-card {
position: absolute;
display: flex;
flex-direction: column;
width: 56%;
padding: 1rem 1rem 1.1rem;
background: #fff;
border-radius: 22px;
box-shadow:
0 32px 64px rgba(91, 33, 182, .32),
0 12px 24px rgba(91, 33, 182, .18),
0 0 0 1px rgba(124, 58, 237, .08);
text-decoration: none;
color: inherit;
overflow: hidden;
transform-origin: center;
animation: hsv-float 14s ease-in-out infinite;
transition: transform .35s var(--easing), box-shadow .35s, z-index 0s;
cursor: pointer;
}
html[data-theme="dark"] .hsv-card {
background: linear-gradient(160deg, #2a1c52, #1a0f38);
box-shadow:
0 32px 64px rgba(0, 0, 0, .55),
0 0 0 1px rgba(167, 139, 250, .15);
}
.hsv-card .hsv-img {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 16px;
overflow: hidden;
background: linear-gradient(135deg, #f5f3ff, #ddd6fe);
margin-bottom: .7rem;
box-shadow: inset 0 -3px 8px rgba(0,0,0,.05);
}
.hsv-card .hsv-img img {
width: 100%; height: 100%;
object-fit: cover; display: block;
transition: transform .5s var(--easing);
}
.hsv-card:hover .hsv-img img { transform: scale(1.06); }
.hsv-card .hsv-img svg { width: 100%; height: 100%; }
.hsv-badge {
position: absolute; top: 1.4rem; left: 1.4rem; z-index: 2;
display: inline-flex; align-items: center; gap: .3rem;
padding: .35rem .85rem;
background: var(--hsv-color, #7c3aed);
color: #fff;
border-radius: 99px;
font-size: .72rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
box-shadow: 0 6px 14px rgba(0, 0, 0, .2);
}
.hsv-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: .5rem;
}
.hsv-name {
font-size: .9rem;
font-weight: 700;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
}
.hsv-price {
font-size: .92rem;
font-weight: 800;
color: var(--accent, #7c3aed);
white-space: nowrap;
}
.hsv-price small { font-size: .68em; font-weight: 600; opacity: .7; }
.hsv-card:hover {
transform: translateY(-12px) scale(1.03) rotate(0deg) !important;
box-shadow:
0 40px 80px rgba(91, 33, 182, .45),
0 16px 32px rgba(91, 33, 182, .25);
z-index: 10;
animation-play-state: paused;
}
/* 3 kart yerleşimi — overlapping, dramatic */
.hsv-card-1 { top: 0; left: 0; transform: rotate(-6deg); animation-delay: 0s; z-index: 3; }
.hsv-card-2 { top: 16%; right: 0; transform: rotate(5deg); animation-delay: -2.5s; z-index: 5; }
.hsv-card-3 { bottom: 0; left: 18%; transform: rotate(-3deg); animation-delay: -5s; z-index: 4; }
@keyframes hsv-float {
0%, 100% { transform: translateY(0) rotate(var(--hsv-rot, 0deg)); }
50% { transform: translateY(-12px) rotate(var(--hsv-rot, 0deg)); }
}
.hsv-card-1 { --hsv-rot: -6deg; }
.hsv-card-2 { --hsv-rot: 5deg; }
.hsv-card-3 { --hsv-rot: -3deg; }
/* Dekoratif orb/blob — arka plana dinamizm */
.hsv-blob {
position: absolute;
border-radius: 50%;
filter: blur(40px);
z-index: 0;
pointer-events: none;
}
.hsv-blob-1 {
width: 220px; height: 220px;
top: 10%; right: -8%;
background: radial-gradient(circle, #f9a8d4, transparent);
opacity: .55;
animation: blob-float 16s ease-in-out infinite;
}
.hsv-blob-2 {
width: 180px; height: 180px;
bottom: 5%; left: -5%;
background: radial-gradient(circle, #a78bfa, transparent);
opacity: .5;
animation: blob-float 20s ease-in-out infinite -6s;
}
@keyframes blob-float {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(20px, -20px) scale(1.1); }
}
@media (max-width: 720px) {
.hsv-card { width: 70%; padding: .55rem .55rem .7rem; }
.hsv-name { font-size: .8rem; }
.hsv-price { font-size: .82rem; }
.hsv-badge { font-size: .6rem; padding: .25rem .65rem; top: .85rem; left: .85rem; }
.hsv-blob-1 { width: 150px; height: 150px; }
.hsv-blob-2 { width: 130px; height: 130px; }
}
/* HERO SHOWCASE — gerçek ürünlerden polaroid-style collage */
.hero-showcase {
position: absolute;
inset: 0;
display: block;
}
.hs-card {
position: absolute;
display: flex;
flex-direction: column;
width: 38%;
padding: .55rem .55rem .8rem;
background: #fff;
border: 1px solid rgba(124, 58, 237, .14);
border-radius: 18px;
box-shadow:
0 24px 50px rgba(91, 33, 182, .28),
0 8px 16px rgba(91, 33, 182, .14),
inset 0 -2px 0 rgba(0, 0, 0, .04);
text-decoration: none;
color: inherit;
overflow: hidden;
transform-origin: center;
animation: hs-float 12s ease-in-out infinite;
transition: transform .35s var(--easing), box-shadow .35s, z-index 0s .25s;
cursor: pointer;
}
html[data-theme="dark"] .hs-card {
background: linear-gradient(160deg, #2a1c52, #1a0f38);
border-color: #4c1d95;
}
.hs-card .hs-img {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 12px;
overflow: hidden;
background: linear-gradient(135deg, #f5f3ff, #ddd6fe);
margin-bottom: .55rem;
}
.hs-card .hs-img img {
width: 100%; height: 100%;
object-fit: cover; display: block;
}
.hs-card .hs-img .hs-placeholder { width: 100%; height: 100%; }
.hs-card .hs-img .hs-placeholder svg { width: 100%; height: 100%; }
.hs-card .hs-tag {
position: absolute; top: .85rem; left: .85rem;
z-index: 2;
display: inline-flex; align-items: center; gap: .25rem;
padding: 3px 9px;
background: var(--hs-color, #7c3aed);
color: #fff;
border-radius: 99px;
font-size: .68rem;
font-weight: 700;
letter-spacing: .03em;
text-transform: uppercase;
box-shadow: 0 4px 10px rgba(0, 0, 0, .15);
}
.hs-card .hs-emoji { font-size: .85rem; line-height: 1; }
.hs-card .hs-name {
font-size: .82rem;
font-weight: 600;
color: var(--text);
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 .25rem;
}
.hs-card:hover {
transform: translateY(-12px) scale(1.04) rotate(0deg) !important;
box-shadow:
0 32px 64px rgba(91, 33, 182, .42),
0 12px 24px rgba(91, 33, 182, .22);
z-index: 10;
animation-play-state: paused;
}
/* 6 kart yerleşimi — overlapping polaroid stack */
.hs-card-1 { top: 4%; left: 6%; transform: rotate(-8deg); animation-delay: 0s; z-index: 3; }
.hs-card-2 { top: 2%; right: 4%; transform: rotate(7deg); animation-delay: -1.2s; z-index: 5; }
.hs-card-3 { top: 38%; left: 0; transform: rotate(-4deg); animation-delay: -2.4s; z-index: 4; }
.hs-card-4 { top: 36%; right: 2%; transform: rotate(6deg); animation-delay: -3.6s; z-index: 6; }
.hs-card-5 { bottom: 4%; left: 14%; transform: rotate(-6deg); animation-delay: -4.8s; z-index: 2; }
.hs-card-6 { bottom: 6%; right: 12%; transform: rotate(5deg); animation-delay: -.6s; z-index: 1; }
@keyframes hs-float {
0%, 100% { transform: translateY(0) rotate(var(--hs-rot, 0deg)); }
50% { transform: translateY(-10px) rotate(var(--hs-rot, 0deg)); }
}
.hs-card-1 { --hs-rot: -8deg; }
.hs-card-2 { --hs-rot: 7deg; }
.hs-card-3 { --hs-rot: -4deg; }
.hs-card-4 { --hs-rot: 6deg; }
.hs-card-5 { --hs-rot: -6deg; }
.hs-card-6 { --hs-rot: 5deg; }
.hs-empty {
position: absolute; inset: 25%;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: .6rem; text-align: center;
background: rgba(255,255,255,.6);
border: 2px dashed var(--purple-300, #c4b5fd);
border-radius: 22px;
color: var(--text-2);
font-size: .9rem;
}
.hs-empty-emoji { font-size: 2.4rem; }
/* HERO MARQUEE — alt strip auto-scroll */
.hero-marquee {
position: relative;
overflow: hidden;
background: linear-gradient(135deg, var(--purple-700, #6d28d9), var(--purple-500, #8b5cf6));
padding: .8rem 0;
margin-top: -1rem;
z-index: 5;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.hm-track {
display: flex;
width: max-content;
gap: 0;
animation: hm-scroll 50s linear infinite;
}
.hm-track:hover { animation-play-state: paused; }
.hm-item {
display: inline-flex;
align-items: center;
gap: .5rem;
padding: .35rem 1.4rem .35rem 1rem;
color: rgba(255, 255, 255, .92);
font-size: .9rem;
text-decoration: none;
white-space: nowrap;
transition: color .15s;
border-right: 1px solid rgba(255,255,255,.12);
}
.hm-item:last-child { border-right: 0; }
.hm-item:hover { color: #fff; }
.hm-emoji { font-size: 1.05rem; line-height: 1; }
.hm-type {
font-size: .72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
opacity: .85;
}
.hm-sep { opacity: .4; }
.hm-name { font-weight: 500; }
@keyframes hm-scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* Mobil — hero showcase tek sütun olsun, marquee biraz daha küçük */
@media (max-width: 720px) {
.hs-card { width: 44%; padding: .35rem .35rem .55rem; }
.hs-card .hs-name { font-size: .72rem; }
.hs-card .hs-tag { font-size: .58rem; padding: 2px 7px; }
.hero-marquee { padding: .55rem 0; }
.hm-item { font-size: .78rem; padding: .25rem 1rem; }
.hm-emoji { font-size: .92rem; }
.hm-type { font-size: .65rem; }
}
.hero-sparkle {
position: absolute;
font-size: 1.6rem;
opacity: .8;
animation: sparkle 6s ease-in-out infinite;
}
.hero-sparkle.s1 { top: 8%; right: 30%; animation-delay: 0s; }
.hero-sparkle.s2 { top: 60%; left: 4%; animation-delay: 1s; }
.hero-sparkle.s3 { bottom: 15%; right: 10%; animation-delay: 2s; }
@keyframes sparkle {
0%, 100% { opacity: .3; transform: scale(.8) rotate(0); }
50% { opacity: 1; transform: scale(1.1) rotate(15deg); }
}
/* ============================ SECTIONS ============================ */
.section { padding: 5rem 0; position: relative; }
.section.tight { padding: 3rem 0; }
.container {
max-width: var(--container);
margin: 0 auto;
padding: 0 1.5rem;
}
.section-head {
text-align: center;
max-width: 720px;
margin: 0 auto 3rem;
}
.section-head .eyebrow {
display: inline-block;
font-family: 'Caveat', cursive;
font-size: 1.7rem;
color: var(--accent);
margin-bottom: .5rem;
transform: rotate(-2deg);
}
.section-head h2 {
font-size: clamp(1.7rem, 3.5vw, 2.7rem);
margin-bottom: .8rem;
}
.section-head h2 .accent {
background: linear-gradient(135deg, var(--purple-400), var(--purple-700));
-webkit-background-clip: text; background-clip: text;
color: transparent;
}
.section-head p { color: var(--text-2); font-size: 1.05rem; }
/* ============================ MAGNET ALT KATEGORİLERİ ============================ */
.magnet-sub-section { padding: 1rem 0 3.5rem; }
.magnet-sub-head {
display: flex;
align-items: center;
gap: 1.4rem;
margin-bottom: 2rem;
padding: 1rem 1.4rem;
background: linear-gradient(135deg, rgba(167, 139, 250, .08), rgba(124, 58, 237, .12));
border-left: 4px solid var(--accent, #7c3aed);
border-radius: 0 16px 16px 0;
}
.msh-badge {
display: inline-flex; align-items: center; gap: .5rem;
padding: .55rem 1rem;
background: #fff;
border: 2px solid var(--purple-300, #c4b5fd);
border-radius: 99px;
box-shadow: 0 6px 16px rgba(124, 58, 237, .18);
flex-shrink: 0;
}
html[data-theme="dark"] .msh-badge {
background: #1a0f38;
border-color: #5b21b6;
}
.msh-emoji { font-size: 1.5rem; }
.msh-type {
font-size: .92rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--accent, #7c3aed);
}
.msh-text { display: flex; flex-direction: column; gap: .3rem; }
.msh-text .eyebrow { margin: 0; }
.msh-text h2 {
font-size: 1.6rem;
font-weight: 800;
letter-spacing: -.02em;
margin: 0;
line-height: 1.2;
}
.msh-text p {
margin: 0;
font-size: .92rem;
color: var(--text-2);
line-height: 1.4;
}
@media (max-width: 720px) {
.magnet-sub-head { flex-direction: column; align-items: flex-start; gap: .8rem; padding: .9rem 1.1rem; }
.msh-text h2 { font-size: 1.3rem; }
}
/* ============================ HERO TRUST COMPACT ============================ */
.hero-trust-compact {
display: flex;
gap: .5rem;
flex-wrap: wrap;
margin-top: 1.4rem;
}
.hero-trust-compact .ht-pill {
display: inline-flex;
align-items: center;
padding: .4rem .85rem;
background: rgba(124, 58, 237, .08);
border: 1px solid rgba(124, 58, 237, .15);
border-radius: 99px;
font-size: .82rem;
font-weight: 600;
color: var(--text-2);
}
html[data-theme="dark"] .hero-trust-compact .ht-pill {
background: rgba(167, 139, 250, .12);
border-color: rgba(167, 139, 250, .22);
}
/* ============================ STATS STRIP — sosyal kanıt ============================ */
.stats-strip {
position: relative;
padding: 2.5rem 0;
background: linear-gradient(135deg, #1a0f38 0%, #2a1c52 50%, #4c1d95 100%);
overflow: hidden;
}
.stats-strip::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 10% 20%, rgba(167, 139, 250, .15), transparent 40%),
radial-gradient(circle at 90% 80%, rgba(236, 72, 153, .15), transparent 40%);
pointer-events: none;
}
.stats-row {
position: relative;
display: flex;
align-items: center;
justify-content: space-around;
gap: 1rem;
flex-wrap: wrap;
}
.stat-item {
display: flex;
flex-direction: column;
align-items: center;
gap: .35rem;
padding: .5rem 1rem;
text-align: center;
}
.stat-num {
font-size: clamp(2.2rem, 4.5vw, 3.4rem);
font-weight: 800;
background: linear-gradient(135deg, #fff, #c4b5fd);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
letter-spacing: -.02em;
line-height: 1;
}
.stat-lbl {
font-size: .85rem;
font-weight: 600;
color: rgba(255, 255, 255, .82);
letter-spacing: .05em;
text-transform: uppercase;
}
.stat-divider {
width: 1px;
height: 50px;
background: linear-gradient(to bottom, transparent, rgba(255,255,255,.25), transparent);
}
@media (max-width: 720px) {
.stats-strip { padding: 1.6rem 0; }
.stats-row { gap: .5rem; }
.stat-divider { display: none; }
.stat-item { flex: 0 0 calc(50% - .25rem); padding: .35rem .5rem; }
}
/* ============================ KATEGORİ VİTRİNİ — büyük renkli kartlar ============================ */
.cat-showcase-section {
padding: 1.5rem 0 1.5rem; /* Üst sıkı (trust-wall'un 2.5rem alt padding'i ekleniyor); alt sıkı (bestseller kendi üst padding'iyle nefes verir) */
position: relative;
}
.cat-showcase-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 200px;
grid-auto-flow: dense;
gap: 1.2rem;
}
.cat-showcase-card {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: .35rem;
padding: 1.5rem 1.4rem;
border-radius: 22px;
text-decoration: none;
color: #fff;
overflow: hidden;
isolation: isolate;
transition: transform .35s var(--easing), box-shadow .35s;
cursor: pointer;
min-height: 200px;
}
.cat-showcase-card.col-span-2 {
grid-column: span 2;
}
.csc-bg {
position: absolute;
inset: 0;
background: var(--cs-gradient, linear-gradient(135deg, #a78bfa, #7c3aed));
z-index: -2;
}
.csc-pattern {
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 20% 80%, rgba(255,255,255,.18), transparent 50%),
radial-gradient(circle at 80% 20%, rgba(255,255,255,.12), transparent 40%),
repeating-linear-gradient(45deg, transparent 0, transparent 18px, rgba(255,255,255,.04) 18px, rgba(255,255,255,.04) 19px);
z-index: -1;
transition: transform .6s var(--easing), opacity .35s;
}
.csc-emoji {
position: absolute;
top: 1rem; right: 1rem;
font-size: 4.5rem;
line-height: 1;
filter: drop-shadow(0 8px 16px rgba(0,0,0,.25));
transition: transform .4s var(--easing);
z-index: 1;
}
.cat-showcase-card.col-span-2 .csc-emoji {
font-size: 6.5rem;
top: 1.4rem; right: 1.6rem;
}
.csc-text {
display: flex;
flex-direction: column;
gap: .15rem;
z-index: 1;
}
.csc-label {
font-size: 1.4rem;
font-weight: 800;
letter-spacing: -.01em;
color: #fff;
text-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.cat-showcase-card.col-span-2 .csc-label { font-size: 1.8rem; }
.csc-desc {
font-size: .85rem;
font-weight: 500;
color: rgba(255, 255, 255, .92);
line-height: 1.4;
}
.csc-arrow {
position: absolute;
bottom: 1.3rem; right: 1.3rem;
width: 36px; height: 36px;
background: rgba(255, 255, 255, .25);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-radius: 50%;
display: grid; place-items: center;
color: #fff;
z-index: 2;
transform: translateX(-4px);
opacity: 0;
transition: opacity .3s, transform .3s;
}
.cat-showcase-card:hover {
transform: translateY(-6px);
box-shadow: 0 25px 50px rgba(0, 0, 0, .25);
color: #fff;
}
.cat-showcase-card:hover .csc-pattern { transform: scale(1.05); }
/* Sabit emoji — hover'da hareket yok (mide bulandırmıyor) */
.cat-showcase-card:hover .csc-emoji { transform: none; }
.cat-showcase-card:hover .csc-arrow { opacity: 1; transform: translateX(0); }
@media (max-width: 1100px) {
/* Ara tier: 2 kolon — col-span-2 tam genişliğe oturur, bento dinamizmi korunur */
.cat-showcase-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; gap: 1rem; }
.cat-showcase-card.col-span-2 { grid-column: span 2; }
.cat-showcase-card.col-span-2 .csc-emoji { font-size: 5.5rem; }
.cat-showcase-card.col-span-2 .csc-label { font-size: 1.55rem; }
}
@media (max-width: 720px) {
.cat-showcase-section { padding: 2.5rem 0 1rem; }
.cat-showcase-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; gap: .8rem; }
.cat-showcase-card.col-span-2 { grid-column: span 2; }
.cat-showcase-card { padding: 1.1rem 1rem; min-height: 160px; }
.csc-emoji { font-size: 3.4rem; top: .7rem; right: .8rem; }
.cat-showcase-card.col-span-2 .csc-emoji { font-size: 4.5rem; }
.csc-label { font-size: 1.1rem; }
.cat-showcase-card.col-span-2 .csc-label { font-size: 1.3rem; }
.csc-desc { font-size: .76rem; }
.csc-arrow { width: 30px; height: 30px; bottom: .9rem; right: .9rem; }
}
@media (max-width: 480px) {
.cat-showcase-grid { grid-template-columns: 1fr; grid-auto-rows: 130px; gap: .7rem; }
.cat-showcase-card.col-span-2 { grid-column: span 1; }
.cat-showcase-card { min-height: 130px; padding: 1rem; }
.csc-emoji { font-size: 3rem; }
.cat-showcase-card.col-span-2 .csc-emoji { font-size: 3.4rem; }
.csc-label, .cat-showcase-card.col-span-2 .csc-label { font-size: 1.05rem; }
}
/* ============================ QUICK CATEGORY CHIP BAR (sticky-ish nav) ============================ */
.quick-cats {
padding: 1.6rem 0 .6rem;
position: sticky;
top: var(--header-h, 72px);
z-index: 50;
background: linear-gradient(180deg, var(--bg) 0%, var(--bg) 80%, transparent);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.qc-bar {
display: flex;
gap: .55rem;
flex-wrap: wrap;
justify-content: center;
padding: .8rem 1.2rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 18px;
box-shadow: 0 8px 24px rgba(124, 58, 237, .1);
}
.qc-chip {
display: inline-flex;
align-items: center;
gap: .45rem;
padding: .5rem 1rem;
background: transparent;
border: 1.5px solid var(--border);
border-radius: 99px;
font-size: .9rem;
text-decoration: none;
color: var(--text);
transition: transform .2s var(--easing), border-color .2s, background .2s, color .2s, box-shadow .2s;
}
.qc-chip:hover {
transform: translateY(-2px);
border-color: var(--qc-color, var(--accent));
background: color-mix(in srgb, var(--qc-color, #7c3aed) 10%, transparent);
color: var(--text);
box-shadow: 0 8px 18px color-mix(in srgb, var(--qc-color, #7c3aed) 28%, transparent);
}
.qc-emoji { font-size: 1.15rem; line-height: 1; }
.qc-label { font-weight: 700; }
/* ============================ ÇOK SATANLAR — featured + grid ============================ */
.bestsellers-section {
padding: 2rem 0 1rem; /* Üst sıkı (cat-showcase'den sonra geliyor); alt minimal — sonraki section kendi padding'iyle nefes verir */
position: relative;
}
.bs-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1.5rem;
margin-bottom: 2rem;
flex-wrap: wrap;
}
.bs-head-text { flex: 1; min-width: 240px; }
.bs-head-text .eyebrow {
display: inline-block;
font-size: .8rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: #f59e0b;
margin-bottom: .5rem;
}
.bs-head-text h2 {
font-size: clamp(1.5rem, 3.2vw, 2.25rem);
font-weight: 800;
line-height: 1.15;
margin: 0 0 .4rem;
color: var(--text);
}
.bs-head-text h2 .accent {
background: linear-gradient(135deg, #f59e0b, #ec4899);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.bs-head-text p { margin: 0; color: var(--text-2); font-size: .98rem; line-height: 1.5; }
.bs-head-link {
display: inline-flex; align-items: center; gap: .4rem;
padding: .65rem 1.15rem;
background: var(--surface);
border: 1.5px solid var(--border);
border-radius: 99px;
color: var(--text);
font-size: .9rem; font-weight: 700;
text-decoration: none;
transition: transform .22s var(--easing), box-shadow .22s var(--easing), border-color .22s var(--easing), background-color .22s var(--easing), color .22s var(--easing), opacity .22s var(--easing);
white-space: nowrap; flex-shrink: 0;
}
.bs-head-link:hover {
border-color: #f59e0b;
color: #f59e0b;
transform: translateX(2px);
box-shadow: 0 6px 18px rgba(245, 158, 11, .18);
}
/* Layout: featured banner (top, full width) + 4-col grid (bottom) */
.bs-layout {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
/* ===== Duo featured: 2 ürün yan yana ===== */
.bs-featured-duo {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.bsf-card {
position: relative;
display: grid;
grid-template-columns: 45% 1fr;
background: linear-gradient(135deg,
color-mix(in srgb, var(--bs-color, #7c3aed) 5%, var(--surface)),
var(--surface) 60%);
border: 1px solid var(--border);
border-radius: 20px;
overflow: hidden;
height: 260px;
transition: transform .35s var(--easing), box-shadow .35s var(--easing), border-color .35s var(--easing);
}
.bsf-card:hover {
transform: translateY(-4px);
border-color: color-mix(in srgb, var(--bs-color, #7c3aed) 40%, var(--border));
box-shadow: 0 24px 50px color-mix(in srgb, var(--bs-color, #7c3aed) 22%, transparent);
}
.bsf-media {
position: relative;
display: block;
overflow: hidden;
aspect-ratio: 1 / 1;
background: linear-gradient(135deg,
color-mix(in srgb, var(--bs-color, #7c3aed) 10%, var(--surface)),
color-mix(in srgb, var(--bs-color, #7c3aed) 3%, var(--surface)));
}
.bsf-media img,
.bsf-media svg {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transition: transform .6s var(--easing);
}
.bsf-card:hover .bsf-media img,
.bsf-card:hover .bsf-media svg { transform: scale(1.06); }
.bsf-ribbon {
position: absolute;
top: 1rem;
left: -.5rem;
z-index: 2;
display: inline-flex; align-items: center; gap: .35rem;
padding: .5rem .9rem .5rem 1.05rem;
color: #fff;
font-size: .75rem;
font-weight: 800;
letter-spacing: .02em;
border-radius: 4px 99px 99px 4px;
}
.ribbon-gold {
background: linear-gradient(135deg, #fbbf24, #f59e0b 50%, #ec4899);
box-shadow: 0 8px 18px rgba(245, 158, 11, .35);
}
.ribbon-gold::before {
content: '';
position: absolute;
bottom: -6px; left: 0;
width: 0; height: 0;
border-style: solid;
border-width: 0 6px 6px 0;
border-color: transparent #b45309 transparent transparent;
}
.ribbon-pink {
background: linear-gradient(135deg, #a78bfa, #7c3aed 50%, #ec4899);
box-shadow: 0 8px 18px rgba(124, 58, 237, .35);
}
.ribbon-pink::before {
content: '';
position: absolute;
bottom: -6px; left: 0;
width: 0; height: 0;
border-style: solid;
border-width: 0 6px 6px 0;
border-color: transparent #5b21b6 transparent transparent;
}
.bsf-fav {
position: absolute;
top: .85rem;
right: .85rem; /* kartın tam sağ üst köşesi — diğer kartlarla tutarlı */
z-index: 3;
width: 34px; height: 34px;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(255, 255, 255, .95);
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
border: none;
border-radius: 50%;
color: var(--text-2);
cursor: pointer;
box-shadow: 0 6px 14px rgba(15, 23, 42, .15);
transition: transform .22s var(--easing), box-shadow .22s var(--easing), border-color .22s var(--easing), background-color .22s var(--easing), color .22s var(--easing), opacity .22s var(--easing);
}
.bsf-fav:hover { transform: scale(1.08); color: #ec4899; }
.bsf-fav.active { color: #ec4899; }
.bsf-body {
padding: 1.15rem 1.35rem 1.2rem;
display: flex; flex-direction: column;
justify-content: space-between;
gap: .6rem;
}
.bsf-body-top { display: flex; flex-direction: column; gap: .55rem; }
.bsf-desc {
margin: 0;
font-size: .82rem;
line-height: 1.45;
color: var(--text-3);
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
word-break: break-word;
overflow-wrap: anywhere;
/* Fail-safe: line-clamp tarayıcıda çalışmazsa max-height ile zorla 2 satır */
max-height: calc(1.45em * 2);
}
.bsf-meta {
display: flex; gap: .9rem; align-items: center;
font-size: .82rem;
color: var(--text-2);
padding: .35rem 0;
border-top: 1px dashed var(--border);
border-bottom: 1px dashed var(--border);
}
.bsf-meta strong { color: var(--text); font-weight: 700; }
.bsf-stars { color: #f59e0b; }
.bsf-stars small { color: var(--text-3); font-weight: 500; }
.bsf-sold { color: #ef4444; }
.bsf-perks {
display: flex; flex-wrap: wrap; gap: .35rem;
}
.bsf-perk {
display: inline-flex; align-items: center; gap: .25rem;
padding: .25rem .55rem;
font-size: .7rem;
font-weight: 600;
background: color-mix(in srgb, var(--bs-color, var(--accent)) 8%, var(--surface));
color: var(--text-2);
border: 1px solid color-mix(in srgb, var(--bs-color, var(--accent)) 18%, transparent);
border-radius: 999px;
white-space: nowrap;
}
.bsf-old {
display: inline-flex; align-items: center; gap: .35rem;
font-size: .72rem;
color: var(--text-3);
margin-bottom: 2px;
}
.bsf-old-num {
text-decoration: line-through;
text-decoration-color: var(--text-3);
text-decoration-thickness: 1.5px;
}
.bsf-old em {
display: inline-block;
font-style: normal;
text-decoration: none;
font-size: .8rem;
font-weight: 700;
color: #fff;
background: linear-gradient(135deg, #a78bfa, var(--accent));
box-shadow: 0 2px 6px color-mix(in srgb, var(--accent) 30%, transparent);
padding: 3px 10px;
border-radius: 999px;
letter-spacing: .02em;
}
@media (max-width: 640px){
.bsf-old em .disc-word{display:none}
.bsf-old em .disc-pct::before{content:'↓ '; font-weight:900; opacity:.9}
}
/* Bestseller grid mini meta */
.bs-mini-meta {
display: flex; gap: .55rem;
font-size: .72rem;
color: var(--text-2);
margin: .15rem 0;
}
.bs-mini-meta strong { color: var(--text); font-weight: 700; }
.bs-mini-meta span:first-child { color: #f59e0b; }
.bs-desc {
margin: 0;
font-size: .76rem;
line-height: 1.4;
color: var(--text-3);
display: -webkit-box;
-webkit-line-clamp: 1;
line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
word-break: break-word;
overflow-wrap: anywhere;
white-space: normal;
text-overflow: ellipsis;
max-height: 1.4em;
}
.bsf-tag {
align-self: flex-start;
display: inline-flex; align-items: center; gap: .3rem;
padding: 4px 10px;
font-size: .65rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
color: #fff;
border-radius: 99px;
box-shadow: 0 3px 8px rgba(0, 0, 0, .15);
}
.bsf-title {
margin: 0;
font-size: 1.15rem;
font-weight: 800;
line-height: 1.25;
color: var(--text);
letter-spacing: -.01em;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.bsf-title a { color: inherit; text-decoration: none; }
.bsf-title a:hover { color: var(--bs-color, var(--accent)); }
.bsf-foot {
display: flex; align-items: center; justify-content: space-between;
gap: .75rem;
margin-top: .2rem;
}
.bsf-price { display: flex; flex-direction: column; line-height: 1.1; }
.bsf-from {
font-size: .62rem;
font-weight: 600;
color: var(--text-3);
letter-spacing: .04em;
text-transform: uppercase;
}
.bsf-val {
font-size: 1.35rem;
font-weight: 800;
color: var(--text);
letter-spacing: -.02em;
line-height: 1;
margin-top: 2px;
}
.bsf-val .currency { font-size: .68em; font-weight: 700; color: var(--text-2); }
.bsf-cta {
display: inline-flex; align-items: center; gap: .35rem;
padding: .65rem 1.05rem;
background: var(--bs-color, #7c3aed);
color: #fff;
border-radius: 99px;
font-size: .82rem;
font-weight: 700;
text-decoration: none;
flex-shrink: 0;
transition: transform .22s var(--easing), box-shadow .22s var(--easing), border-color .22s var(--easing), background-color .22s var(--easing), color .22s var(--easing), opacity .22s var(--easing);
box-shadow: 0 6px 14px color-mix(in srgb, var(--bs-color, #7c3aed) 38%, transparent);
}
.bsf-cta:hover {
transform: translateX(3px) translateY(-1px);
box-shadow: 0 10px 22px color-mix(in srgb, var(--bs-color, #7c3aed) 50%, transparent);
}
/* ===== Grid #2-#5 — 4-col masaüstü ===== */
.bs-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
}
.bs-card {
position: relative;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 18px;
overflow: hidden;
display: flex; flex-direction: column;
transition: transform .28s var(--easing), box-shadow .28s var(--easing), border-color .28s var(--easing);
}
.bs-card:hover {
transform: translateY(-3px);
border-color: color-mix(in srgb, var(--bs-color, #7c3aed) 35%, var(--border));
box-shadow: 0 14px 30px color-mix(in srgb, var(--bs-color, #7c3aed) 16%, transparent);
}
.bs-media {
position: relative;
display: block;
aspect-ratio: 1 / 1;
overflow: hidden;
background: linear-gradient(135deg,
color-mix(in srgb, var(--bs-color, #7c3aed) 10%, var(--surface)),
color-mix(in srgb, var(--bs-color, #7c3aed) 3%, var(--surface)));
}
.bs-media img,
.bs-media svg {
width: 100%; height: 100%;
object-fit: cover;
object-position: center;
display: block;
transition: transform .5s var(--easing);
}
.bs-card:hover .bs-media img,
.bs-card:hover .bs-media svg { transform: scale(1.06); }
.bs-rank {
position: absolute;
top: .55rem; left: .55rem;
z-index: 2;
display: inline-flex; align-items: center; justify-content: center;
min-width: 30px; height: 30px;
padding: 0 .45rem;
background: rgba(255, 255, 255, .94);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
border-radius: 99px;
font-size: .75rem;
font-weight: 800;
color: var(--bs-color, #7c3aed);
box-shadow: 0 3px 10px rgba(0, 0, 0, .12);
}
.bs-type-tag {
align-self: flex-start;
display: inline-flex; align-items: center; gap: .25rem;
padding: 3px 9px;
font-size: .62rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
color: #fff;
background: var(--bs-color, #7c3aed);
border-radius: 99px;
box-shadow: 0 3px 8px rgba(0, 0, 0, .15);
}
/* Özel Günler "Öne Çıkanlar" — soft tinted outline-chip; dolgu mor pill'in göze batan ağırlığı yerine sakin görünüm */
.og-product-grid .bs-type-tag {
background: color-mix(in srgb, var(--bs-color, #7c3aed) 12%, var(--card-bg)) !important;
color: var(--bs-color, #7c3aed) !important;
border: 1px solid color-mix(in srgb, var(--bs-color, #7c3aed) 40%, transparent);
box-shadow: none !important;
font-weight: 600 !important;
font-size: .6rem !important;
padding: 3px 9px !important;
letter-spacing: .06em;
}
.bs-fav {
position: absolute;
top: .55rem; right: .55rem;
z-index: 3;
width: 28px; height: 28px;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(255, 255, 255, .95);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
border: none;
border-radius: 50%;
color: var(--text-2);
cursor: pointer;
box-shadow: 0 3px 8px rgba(0, 0, 0, .12);
transition: transform .22s var(--easing), box-shadow .22s var(--easing), border-color .22s var(--easing), background-color .22s var(--easing), color .22s var(--easing), opacity .22s var(--easing);
}
.bs-fav:hover { transform: scale(1.08); color: #ec4899; }
.bs-fav.active { color: #ec4899; }
.bs-body {
padding: .75rem .85rem .85rem;
display: flex; flex-direction: column;
gap: .45rem;
flex: 1;
min-height: 0;
}
.bs-title {
margin: .25rem 0 0;
font-size: .95rem;
font-weight: 700;
line-height: 1.3;
color: var(--text);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
word-break: break-word;
overflow-wrap: anywhere;
min-height: calc(.95rem * 1.3 * 2);
}
.bs-title a { color: inherit; text-decoration: none; }
.bs-title a:hover { color: var(--bs-color, var(--accent)); }
.bs-foot {
display: flex; align-items: flex-end; justify-content: space-between;
gap: .5rem;
margin-top: 0;
padding-top: 0;
min-height: 28px;
}
.bs-price-val {
font-size: 1rem;
font-weight: 800;
color: var(--text);
letter-spacing: -.01em;
line-height: 1;
display: inline-flex; align-items: center;
}
/* Fiyat bloğu — 3 satır: yıldız / üstü çizili / yeni fiyat (eşit boşluk) */
.bs-price-wrap {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 4px; /* 3 satır arası eşit nefes */
line-height: 1.05;
flex: 1;
min-width: 0;
}
/* Yıldız (+ sold) tek satır — yıldız her zaman üstte */
.bs-meta-line {
display: inline-flex;
align-items: center;
gap: .45rem;
flex-wrap: nowrap;
white-space: nowrap;
min-width: 0;
margin-top: -2px;
line-height: 1;
}
.bs-rate {
display: inline-flex; align-items: center; gap: .2rem;
font-size: .85rem; color: var(--text-2);
white-space: nowrap; font-weight: 500;
}
.bs-rate strong { color: var(--text); font-weight: 700; }
.bs-sold {
display: inline-flex; align-items: center;
font-size: .8rem; color: var(--text-3);
white-space: nowrap;
}
.bs-old {
display: inline-flex;
align-items: center;
gap: .35rem;
font-size: .76rem;
color: var(--text-3);
flex-wrap: nowrap;
white-space: nowrap;
margin-bottom: 1px;
}
.bs-old-num {
text-decoration: line-through;
text-decoration-color: var(--text-3);
text-decoration-thickness: 1.5px;
}
.bs-old em {
display: inline-block;
font-style: normal;
text-decoration: none;
font-size: .72rem;
font-weight: 700;
color: #fff;
background: linear-gradient(135deg, #a78bfa, var(--accent));
padding: 3px 9px;
border-radius: 999px;
letter-spacing: .02em;
white-space: nowrap;
box-shadow: 0 2px 6px color-mix(in srgb, var(--accent) 30%, transparent);
}
@media (max-width: 640px){
.bs-old em .disc-word{display:none}
.bs-old em .disc-pct::before{content:'↓ '; font-weight:900; opacity:.9}
}
.bs-cta-arrow {
width: 38px; height: 38px;
display: inline-flex; align-items: center; justify-content: center;
background: color-mix(in srgb, var(--bs-color, #7c3aed) 14%, transparent);
color: var(--bs-color, #7c3aed);
border-radius: 10px;
flex-shrink: 0;
transition: background .22s var(--easing), color .22s var(--easing), transform .22s var(--easing);
}
.bs-cta-arrow svg { display: block; width: 16px; height: 16px; }
.bs-card:hover .bs-cta-arrow {
background: var(--bs-color, #7c3aed);
color: #fff;
transform: translateX(2px);
}
/* ===== Daha fazlası bloğu — kategori filtreleyici (ortalı) ===== */
.bs-explore {
margin-top: 4rem; /* Üst boşluk = alt boşluk (bestsellers-section + ts-section) ile dengeli */
padding: 1.75rem 2rem 1.85rem;
border-radius: 20px;
background: linear-gradient(135deg,
color-mix(in srgb, #f59e0b 8%, var(--surface)),
color-mix(in srgb, #ec4899 6%, var(--surface)));
border: 1px solid var(--border);
display: flex;
flex-direction: column;
align-items: center;
gap: 1.15rem;
text-align: center;
}
.bs-explore-head {
display: flex;
flex-direction: column;
gap: .15rem;
}
.bse-title {
display: block;
font-size: 1.15rem;
font-weight: 800;
color: var(--text);
letter-spacing: -.01em;
}
.bse-sub {
font-size: .9rem;
color: var(--text-2);
}
.bs-explore-chips {
display: flex;
gap: .55rem;
flex-wrap: wrap;
justify-content: center;
max-width: 100%;
}
.bse-chip {
display: inline-flex;
align-items: center;
gap: .4rem;
padding: .55rem 1rem;
border-radius: 99px;
background: var(--surface-solid);
border: 1.5px solid var(--border);
font-size: .85rem;
font-weight: 600;
color: var(--text);
text-decoration: none;
white-space: nowrap;
transition: transform .22s var(--easing), box-shadow .22s var(--easing), border-color .22s var(--easing), background-color .22s var(--easing), color .22s var(--easing), opacity .22s var(--easing);
}
.bse-chip:hover {
border-color: var(--bse-c, var(--accent));
color: var(--bse-c, var(--accent));
background: color-mix(in srgb, var(--bse-c, var(--accent)) 8%, var(--surface-solid));
transform: translateY(-1px);
}
.bse-emoji { font-size: 1em; line-height: 1; }
.bse-chip-primary {
background: linear-gradient(135deg, #f59e0b, #ec4899);
color: #fff;
border-color: transparent;
box-shadow: 0 6px 14px color-mix(in srgb, #ec4899 25%, transparent);
}
.bse-chip-primary:hover {
color: #fff;
background: linear-gradient(135deg, #f59e0b, #ec4899);
border-color: transparent;
transform: translateY(-2px) scale(1.02);
box-shadow: 0 10px 22px color-mix(in srgb, #ec4899 35%, transparent);
}
/* ===== Responsive ===== */
@media (max-width: 1024px) {
.bsf-card { height: 240px; grid-template-columns: 42% 1fr; }
.bsf-body { padding: 1rem 1.15rem 1.1rem; gap: .5rem; }
.bsf-title { font-size: 1.05rem; }
.bsf-val { font-size: 1.2rem; }
.bs-featured-duo { gap: .8rem; }
.bsf-fav { right: .75rem; top: .75rem; }
}
@media (max-width: 720px) {
.bestsellers-section { padding: 2.5rem 0 2rem; }
.bs-layout { gap: 1rem; }
.bs-head { margin-bottom: 1.25rem; gap: .75rem; }
.bs-head-text h2 { font-size: 1.55rem; }
.bs-head-text p { font-size: .9rem; }
.bs-head-link { padding: .55rem .95rem; font-size: .82rem; }
/* Duo'da secondary'i gizle — mobilde sadece #1 görünür */
.bs-featured-duo { grid-template-columns: 1fr; gap: 0; }
.bsf-card.secondary { display: none; }
/* Primary: yatay split — sol görsel + sağ içerik (dengeli flex layout) */
.bsf-card.primary {
display: flex;
grid-template-columns: none;
grid-template-rows: none;
height: auto;
min-height: 220px;
border-radius: 18px;
overflow: hidden;
}
.bsf-card.primary .bsf-media {
flex: 0 0 45%;
aspect-ratio: auto;
min-height: 100%;
align-self: stretch;
}
.bsf-card.primary .bsf-media img,
.bsf-card.primary .bsf-media svg {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.bsf-card.primary .bsf-body {
flex: 1 1 auto;
min-width: 0;
}
.bsf-ribbon {
top: .55rem;
left: -.4rem;
font-size: .62rem;
padding: .32rem .6rem .32rem .75rem;
letter-spacing: .01em;
}
.bsf-ribbon::before { display: none; }
.bsf-fav {
width: 30px; height: 30px;
top: .5rem; right: .5rem;
}
/* Body — sıkı dikey ritim, tüm içerik tek bakışta net */
.bsf-card.primary .bsf-body {
padding: .85rem .9rem .9rem;
gap: .45rem;
justify-content: space-between;
}
.bsf-card.primary .bsf-body-top { gap: .4rem; }
.bsf-card.primary .bsf-tag {
/* Mobil featured: gold ribbon zaten "#1 Çok Satan" diyor — ek KUPA tag noise yapıyor, gizle */
display: none;
}
.bsf-card.primary .bsf-title {
font-size: .98rem;
line-height: 1.22;
-webkit-line-clamp: 2;
line-clamp: 2;
word-break: break-word;
overflow-wrap: anywhere;
max-height: calc(1.22em * 2);
}
.bsf-card.primary .bsf-desc {
font-size: .74rem;
line-height: 1.35;
-webkit-line-clamp: 1;
line-clamp: 1;
max-height: calc(1.35em * 1);
word-break: break-all;
overflow-wrap: anywhere;
}
.bsf-card.primary .bsf-meta {
font-size: .72rem;
gap: .55rem;
padding: .2rem 0;
}
.bsf-card.primary .bsf-meta strong { font-weight: 700; }
/* Foot — mobilde fiyat üstte, buton TAM GENİŞLİK altta (kırpılma yok, esnek) */
.bsf-card.primary .bsf-foot {
flex-direction: column;
align-items: stretch;
gap: .5rem;
margin-top: .35rem;
}
.bsf-card.primary .bsf-price { line-height: 1.05; }
.bsf-card.primary .bsf-from { font-size: .58rem; }
.bsf-card.primary .bsf-val { font-size: 1.1rem; }
.bsf-card.primary .bsf-old { font-size: .65rem; margin-bottom: 1px; }
.bsf-card.primary .bsf-cta {
width: 100%;
justify-content: center;
padding: .55rem .85rem;
font-size: .78rem;
border-radius: 10px;
white-space: nowrap;
}
/* Diğer .bsf-* mobile defaults (grid kartları için) */
.bsf-tag { font-size: .58rem; padding: 3px 8px; }
.bs-mini-meta { font-size: .68rem; }
.bs-desc { font-size: .72rem; }
/* Grid: 2-col sabit — hepsi tek bakışta */
.bs-grid {
grid-template-columns: 1fr 1fr;
gap: .75rem;
}
.bs-card { border-radius: 16px; }
.bs-body { padding: .65rem .75rem .8rem; gap: .35rem; }
.bs-rank {
min-width: 26px; height: 26px;
font-size: .68rem;
top: .45rem; left: .45rem;
}
.bs-fav {
width: 26px; height: 26px;
top: .45rem; right: .45rem;
}
.bs-type-tag {
font-size: .58rem;
padding: 3px 7px;
}
.bs-title { font-size: .9rem; }
.bs-price-val { font-size: .92rem; }
.bs-cta-arrow { width: 34px; height: 34px; }
/* Explore bloğu — mobil: 2-col grid, scroll yok */
.bs-explore {
margin-top: 1.25rem;
padding: 1.15rem 1rem 1.1rem;
flex-direction: column;
align-items: stretch;
gap: .85rem;
}
.bs-explore-head {
min-width: 0;
text-align: center;
}
.bse-title { font-size: 1.02rem; }
.bse-sub { font-size: .8rem; }
.bs-explore-chips {
display: grid;
grid-template-columns: 1fr 1fr;
gap: .5rem;
overflow: visible;
flex-wrap: initial;
flex: initial;
margin: 0;
padding: 0;
justify-content: stretch;
}
.bse-chip {
flex-shrink: 1;
padding: .6rem .75rem;
font-size: .82rem;
width: 100%;
justify-content: center;
border-width: 1.5px;
}
.bse-chip-primary {
grid-column: 1 / -1;
padding: .75rem 1rem;
font-size: .9rem;
font-weight: 700;
}
/* Tek başına kalan son chip (Tümü + tek sayıda ürün chip'i = lonely) ortala */
.bse-chip:not(.bse-chip-primary):last-child:nth-child(even) {
grid-column: 1 / -1;
justify-self: center;
width: clamp(50%, 60%, 70%);
}
}
@media (max-width: 420px) {
.bsf-card.primary { min-height: 195px; }
.bsf-card.primary .bsf-media { flex: 0 0 42%; }
.bsf-card.primary .bsf-body { padding: .7rem .8rem .8rem; gap: .35rem; }
.bsf-card.primary .bsf-title { font-size: .9rem; line-height: 1.2; max-height: calc(1.2em * 2); }
.bsf-card.primary .bsf-desc { font-size: .7rem; }
.bsf-card.primary .bsf-meta { font-size: .68rem; gap: .45rem; padding: .15rem 0; }
.bsf-card.primary .bsf-val { font-size: 1rem; }
.bsf-card.primary .bsf-from { font-size: .55rem; }
.bsf-card.primary .bsf-cta { padding: .45rem .7rem; font-size: .72rem; }
.bsf-card.primary .bsf-tag { font-size: .54rem; padding: 2px 7px; }
}
/* Aşırı dar ekran (~340px) — fiyat + buton stack'e dön */
@media (max-width: 360px) {
.bsf-card.primary .bsf-foot {
flex-direction: column;
align-items: stretch;
}
.bsf-card.primary .bsf-cta { width: 100%; justify-content: center; }
}
/* ============================ HER TİP İÇİN AYRI VİTRİN STRIP ============================ */
.cat-strip-section {
position: relative;
padding: 4rem 0 3rem;
overflow: hidden;
}
.cat-strip-section::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
color-mix(in srgb, var(--strip-color, #7c3aed) 4%, transparent) 0%,
color-mix(in srgb, var(--strip-color, #7c3aed) 8%, transparent) 50%,
color-mix(in srgb, var(--strip-color, #7c3aed) 2%, transparent) 100%
);
z-index: 0;
pointer-events: none;
}
.cat-strip-section::after {
/* Köşede dev emoji watermark */
content: '';
position: absolute;
top: -4rem;
right: -3rem;
width: 320px; height: 320px;
background: radial-gradient(circle, color-mix(in srgb, var(--strip-color, #7c3aed) 22%, transparent), transparent 65%);
filter: blur(40px);
z-index: 0;
pointer-events: none;
}
.cat-strip-section > .container { position: relative; z-index: 1; }
.cat-strip-section.first-strip { padding-top: 2.5rem; }
/* Alternating zig-zag — her stripe'ı çapraz hizala */
.cat-strip-section:nth-child(even) .cs-emoji {
transform: rotate(8deg);
}
.cat-strip-section:nth-child(odd) .cs-emoji {
transform: rotate(-8deg);
}
.cat-strip-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.6rem;
padding-bottom: 1rem;
border-bottom: 2px solid var(--border);
}
.cs-head-left {
display: flex;
align-items: center;
gap: 1rem;
}
.cs-emoji {
display: inline-grid;
place-items: center;
width: 56px;
height: 56px;
border-radius: 16px;
font-size: 1.7rem;
color: #fff;
box-shadow: 0 8px 22px color-mix(in srgb, var(--strip-color, #7c3aed) 35%, transparent),
0 2px 6px color-mix(in srgb, var(--strip-color, #7c3aed) 20%, transparent);
}
.cs-text { display: flex; flex-direction: column; gap: .15rem; }
.cs-text h2 {
font-size: 1.7rem;
font-weight: 800;
letter-spacing: -.02em;
line-height: 1.1;
margin: 0;
color: var(--text);
}
.cs-count {
font-size: .8rem;
color: var(--text-3);
font-weight: 600;
letter-spacing: .03em;
text-transform: uppercase;
}
.cs-link {
display: inline-flex;
align-items: center;
gap: .4rem;
padding: .55rem 1.1rem;
background: color-mix(in srgb, var(--strip-color, #7c3aed) 8%, transparent);
border: 1.5px solid color-mix(in srgb, var(--strip-color, #7c3aed) 30%, transparent);
color: var(--strip-color, var(--accent));
border-radius: 99px;
font-size: .85rem;
font-weight: 700;
text-decoration: none;
white-space: nowrap;
transition: background .2s, transform .15s, box-shadow .2s;
}
.cs-link:hover {
background: var(--strip-color, var(--accent));
color: #fff;
transform: translateY(-2px);
box-shadow: 0 8px 20px color-mix(in srgb, var(--strip-color, #7c3aed) 38%, transparent);
}
@media (max-width: 720px) {
.quick-cats { padding: 1rem 0 .3rem; position: static; }
.qc-bar { padding: .6rem .8rem; gap: .4rem; }
.qc-chip { padding: .4rem .8rem; font-size: .82rem; }
.qc-emoji { font-size: 1rem; }
.cs-emoji { width: 44px; height: 44px; font-size: 1.4rem; border-radius: 13px; }
.cs-text h2 { font-size: 1.3rem; }
.cs-count { font-size: .72rem; }
.cat-strip-head { flex-direction: column; align-items: flex-start; }
.cs-link { align-self: stretch; justify-content: center; }
}
/* ============================ VİTRİNİMİZ — kategori chip bar ============================ */
.vitrine-section { padding: 3rem 0 4rem; }
.ptypes-bar {
display: flex;
align-items: center;
gap: .9rem;
flex-wrap: wrap;
justify-content: center;
margin: 2.5rem auto 0;
padding: 1.1rem 1.4rem;
background: linear-gradient(135deg, var(--purple-50, #faf7ff), rgba(255,255,255,.6));
border: 1px solid var(--purple-200, #ddd6fe);
border-radius: 16px;
max-width: 980px;
}
html[data-theme="dark"] .ptypes-bar {
background: linear-gradient(135deg, #1a0f38, rgba(26,15,56,.6));
border-color: #4c1d95;
}
.ptb-label {
font-size: .85rem;
font-weight: 600;
color: var(--text-2);
white-space: nowrap;
}
.ptb-chips {
display: flex;
flex-wrap: wrap;
gap: .5rem;
justify-content: center;
}
.ptb-chip {
display: inline-flex;
align-items: center;
gap: .4rem;
padding: .5rem .9rem;
background: #fff;
border: 1.5px solid var(--border);
border-radius: 99px;
font-size: .85rem;
text-decoration: none;
color: var(--text);
transition: transform .2s, border-color .2s, box-shadow .2s, background .2s;
}
html[data-theme="dark"] .ptb-chip { background: rgba(255,255,255,.04); }
.ptb-chip:hover {
transform: translateY(-2px);
border-color: var(--pt-color, var(--accent));
background: color-mix(in srgb, var(--pt-color, #7c3aed) 8%, #fff);
box-shadow: 0 6px 14px color-mix(in srgb, var(--pt-color, #7c3aed) 25%, transparent);
color: var(--text);
}
.ptb-chip > span:first-child { font-size: 1.05rem; line-height: 1; }
.ptb-chip strong { font-weight: 700; }
/* Vitrinimiz product-card customization */
.vitrine-card .ptype-tag-pill {
font-size: .68rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 99px;
color: #fff;
display: inline-flex;
align-items: center;
gap: .3rem;
box-shadow: 0 4px 10px rgba(0,0,0,.18);
}
@media (max-width: 720px) {
.ptypes-bar { padding: .8rem 1rem; flex-direction: column; align-items: flex-start; }
.ptb-label { font-size: .78rem; }
.ptb-chips { width: 100%; justify-content: flex-start; }
.ptb-chip { font-size: .78rem; padding: .42rem .75rem; }
}
/* MOBİL — kategori filter chip'leri kompakt + estetik (sablonlar tarzı) */
@media (max-width: 768px) {
.products-toolbar {
flex-direction: column;
align-items: stretch !important;
padding: .85rem .9rem !important;
gap: .6rem !important;
border-radius: 14px !important;
}
.ptb-count {
flex-shrink: 0;
padding-right: 0 !important;
border-right: none !important;
border-bottom: 1px dashed var(--border) !important;
padding-bottom: .55rem !important;
justify-content: center;
}
.ptb-count strong { font-size: 1.35rem !important; }
.ptb-count span { font-size: .75rem !important; }
/* Mobile chip layout — sablonlar tarzı: 2 kolon grid, "Tümü" tam satır, hizalı */
.ptb-chips {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: .45rem !important;
width: 100%;
}
/* İlk chip ("Tümü") tam satır */
.ptb-chips > .ptype-chip:first-child {
grid-column: 1 / -1 !important;
justify-content: center !important;
}
/* Son chip yalnız kalırsa tam satır + ortalı.
Tümü (first-child) full-width olduğu için: total chip count even ise son chip yalnız.
8 chip → 8. eleman even → :nth-child(even) :last-child */
.ptb-chips > .ptype-chip:last-child:nth-child(even) {
grid-column: 1 / -1 !important;
justify-content: center !important;
}
.ptype-chip {
padding: .5rem .65rem !important;
font-size: .74rem !important;
gap: .35rem !important;
/* Eşit genişlik için flex */
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
/* Yazılar wrap edilebilir — kesilmesin, tam görünsün */
white-space: normal !important;
overflow: visible !important;
line-height: 1.2 !important;
min-height: 38px;
}
.ptype-chip .pf-emoji {
font-size: .95rem !important;
flex-shrink: 0;
}
.ptype-chip .pf-name {
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
-webkit-line-clamp: unset !important;
display: inline-block !important;
flex: 1;
text-align: left;
margin: 0 .2rem;
word-break: keep-all;
line-height: 1.2;
}
.ptype-chip .pf-count {
min-width: 22px !important;
height: 20px !important;
padding: 0 .45rem !important;
font-size: .68rem !important;
margin: 0 !important;
flex-shrink: 0;
}
.ptype-chip .pf-count {
min-width: 18px !important;
height: 18px !important;
padding: 0 .35rem !important;
font-size: .65rem !important;
margin-left: .1rem !important;
}
}
/* ============================ (Eski) Ürün tipleri tile grid — geri uyumluluk ============================ */
.product-types-section { padding: 3.5rem 0 1rem; }
.ptypes-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
}
.ptype-card {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: .35rem;
padding: 1.5rem 1.3rem 1.3rem;
background: var(--surface);
border: 1.5px solid var(--border);
border-radius: 18px;
text-decoration: none;
color: var(--text);
overflow: hidden;
transition: transform .25s var(--easing), border-color .25s, box-shadow .25s, background .25s;
cursor: pointer;
}
.ptype-card::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 4px;
background: var(--pt-color, var(--accent));
transform: scaleX(.3);
transform-origin: left center;
transition: transform .35s var(--easing);
}
.ptype-card:hover {
transform: translateY(-6px);
border-color: var(--pt-color, var(--accent));
box-shadow: 0 18px 40px rgba(0, 0, 0, .08), 0 6px 14px color-mix(in srgb, var(--pt-color, #7c3aed) 28%, transparent);
color: var(--text);
background: color-mix(in srgb, var(--pt-color, #7c3aed) 4%, var(--surface));
}
.ptype-card:hover::before { transform: scaleX(1); }
.ptype-emoji {
font-size: 2.6rem;
line-height: 1;
margin-bottom: .35rem;
filter: drop-shadow(0 6px 8px color-mix(in srgb, var(--pt-color, #7c3aed) 30%, transparent));
}
.ptype-name {
font-size: 1.05rem;
font-weight: 700;
color: var(--text);
}
.ptype-tag {
font-size: .8rem;
color: var(--text-3);
}
.ptype-arrow {
position: absolute;
bottom: 1rem; right: 1.1rem;
font-size: 1rem;
color: var(--pt-color, var(--accent));
font-weight: 700;
opacity: 0;
transform: translateX(-4px);
transition: opacity .25s, transform .25s;
}
.ptype-card:hover .ptype-arrow {
opacity: 1;
transform: translateX(0);
}
@media (max-width: 1024px) {
.ptypes-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
.ptypes-grid { grid-template-columns: repeat(2, 1fr); gap: .7rem; }
.ptype-card { padding: 1.1rem 1rem 1rem; }
.ptype-emoji { font-size: 2.1rem; }
.ptype-name { font-size: .95rem; }
.ptype-tag { font-size: .72rem; }
.product-types-section { padding: 2rem 0 .5rem; }
}
/* ============================ CATEGORY GRID ============================ */
.cat-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.8rem;
}
/* Desktop: 4 kart üstte, kalanlar (3) alta otomatik ortalanır */
.cat-grid > .cat-card {
flex: 0 0 calc((100% - 3 * 1.8rem) / 4);
max-width: calc((100% - 3 * 1.8rem) / 4);
}
@media (max-width: 980px) {
.cat-grid { gap: 1.4rem; }
.cat-grid > .cat-card {
flex: 0 0 calc((100% - 2 * 1.4rem) / 3);
max-width: calc((100% - 2 * 1.4rem) / 3);
}
}
@media (max-width: 640px) {
.cat-grid { gap: 1.2rem; }
.cat-grid > .cat-card {
flex: 0 0 calc((100% - 1.2rem) / 2);
max-width: calc((100% - 1.2rem) / 2);
}
}
@media (max-width: 440px) {
.cat-grid { gap: 1rem; }
.cat-grid > .cat-card {
flex: 0 0 100%;
max-width: 100%;
}
}
.cat-card {
position: relative;
padding: 2rem 1.5rem 1.5rem;
border-radius: var(--radius-lg);
background: var(--card-bg);
border: 1px solid var(--border);
transition: transform .35s var(--easing), box-shadow .35s var(--easing), border-color .35s var(--easing), background-color .35s var(--easing), color .35s var(--easing), opacity .35s var(--easing);
overflow: hidden;
display: flex; flex-direction: column;
min-height: 220px;
isolation: isolate;
}
.cat-card::before {
content: '';
position: absolute; inset: 0;
background: radial-gradient(60% 80% at 100% 0%, var(--cat-accent, var(--accent)), transparent 60%);
opacity: .12;
z-index: -1;
transition: opacity .4s;
}
.cat-card:hover {
color: inherit;
transform: translateY(-6px);
border-color: var(--cat-accent, var(--accent));
box-shadow: 0 25px 50px rgba(124, 58, 237, .25);
}
.cat-card:hover::before { opacity: .3; }
.cat-card .cat-emoji {
font-size: 2.2rem;
width: 60px; height: 60px;
border-radius: 18px;
background: var(--surface);
display: inline-flex; align-items: center; justify-content: center;
margin-bottom: 1rem;
transition: transform .3s;
}
.cat-card:hover .cat-emoji { transform: rotate(-8deg) scale(1.1); }
.cat-card h3 {
font-size: 1.05rem;
font-weight: 600;
margin-bottom: .35rem;
}
.cat-card p {
font-size: .82rem;
color: var(--text-3);
margin-bottom: 1.2rem;
flex: 1;
}
.cat-card .cat-link {
display: inline-flex; align-items: center; gap: .35rem;
font-size: .85rem;
font-weight: 600;
color: var(--cat-accent, var(--accent));
}
.cat-card .cat-link svg { transition: transform .3s; }
.cat-card:hover .cat-link svg { transform: translateX(4px); }
/* ============================ PRODUCT GRID & CARD ============================ */
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 1.5rem;
}
.product-card {
position: relative;
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
transition: transform .35s var(--easing), box-shadow .35s var(--easing), border-color .35s var(--easing), background-color .35s var(--easing), color .35s var(--easing), opacity .35s var(--easing);
display: flex; flex-direction: column;
}
.product-card:hover {
transform: translateY(-6px);
border-color: var(--accent);
box-shadow: 0 28px 56px rgba(124, 58, 237, .25);
}
.product-card.fav-leave,
.product-card.reveal.in.fav-leave {
opacity: 0 !important;
transform: scale(.92) translateY(-8px) !important;
pointer-events: none;
transition: opacity .35s ease, transform .35s ease !important;
}
.product-card .pc-media {
position: relative;
aspect-ratio: 1 / 1;
background: linear-gradient(135deg, var(--purple-100), var(--purple-200));
overflow: hidden;
display: flex; align-items: center; justify-content: center;
}
/* Stoksuz ürün rozeti (kart üzerinde + ürün detayında) */
.stock-badge-out {
display: inline-flex; align-items: center; gap: .3rem;
padding: .4rem .8rem;
background: rgba(245, 158, 11, .95);
color: #fff;
font-size: .78rem; font-weight: 700;
border-radius: 99px;
box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
letter-spacing: .02em;
white-space: nowrap;
}
/* VINTAGE TÜKENDİ DAMGASI — büyük, eğik, double-border, hiç kaçmaz */
.product-card .stock-badge-out,
.ts-card .stock-badge-out {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%) rotate(-14deg);
z-index: 5;
font-family: 'Courier New', 'Courier', monospace;
font-size: 1.25rem; font-weight: 900;
letter-spacing: .06em;
word-spacing: -.05em;
color: #b91c1c;
padding: .55rem 1.3rem;
background: rgba(255, 255, 255, .96);
border: 3px double #b91c1c;
border-radius: 4px;
box-shadow: 0 6px 20px rgba(185, 28, 28, .35),
0 0 0 6px rgba(255, 255, 255, .4);
text-transform: uppercase;
white-space: nowrap;
text-shadow: 1px 1px 0 rgba(185, 28, 28, .15);
animation: stampPulse 1.8s ease-in-out infinite;
}
@keyframes stampPulse {
0%, 100% { transform: translate(-50%, -50%) rotate(-14deg) scale(1); opacity: 1; }
50% { transform: translate(-50%, -50%) rotate(-14deg) scale(1.05); opacity: .96; }
}
/* Kart görsele soft koyu overlay → damga öne çıksın, foto soluksun */
.product-card.is-out .pc-media::before,
.ts-card.is-out .ts-media::before {
content: '';
position: absolute; inset: 0;
background: rgba(15, 23, 42, .28);
z-index: 3;
pointer-events: none;
}
@media (max-width: 600px) {
.product-card .stock-badge-out,
.ts-card .stock-badge-out {
font-size: .95rem;
padding: .42rem 1rem;
letter-spacing: .08em;
}
}
@keyframes stockBadgePulse {
0%, 100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 8px 24px rgba(0, 0, 0, .35), 0 0 0 4px rgba(245, 158, 11, .25); }
50% { transform: translate(-50%, -50%) scale(1.06); box-shadow: 0 8px 28px rgba(0, 0, 0, .4), 0 0 0 8px rgba(245, 158, 11, .15); }
}
/* is-out olduğunda çakışan tag/badge'leri gizle (favori/üst köşedeki iconlar dahil) */
.product-card.is-out .pc-tags,
.product-card.is-out .pc-fav,
.ts-card.is-out .ts-badge,
.ts-card.is-out .ts-disc,
.ts-card.is-out .ts-fav {
display: none !important;
}
.product-card.is-out .pc-media,
.ts-card.is-out .ts-media { filter: grayscale(.85) brightness(.78); }
.product-card.is-out .pc-cta,
.ts-card.is-out .ts-cta-arrow { opacity: .72; }
/* Stoğu sıfır kartlarda başlık her zaman normal koyu — accent mor yanılgısı olmasın */
.ts-card.is-out .ts-name,
.ts-card.is-out .ts-name a,
.bs-card.is-out .bs-title,
.bs-card.is-out .bs-title a,
.product-card.is-out .pc-title,
.product-card.is-out .pc-title a { color: var(--text) !important; }
/* Diyagonal "tükendi" pattern */
.product-card.is-out .pc-media::after,
.ts-card.is-out .ts-media::after {
content: ''; position: absolute; inset: 0; pointer-events: none;
background: repeating-linear-gradient(
-45deg,
transparent 0 16px,
rgba(245, 158, 11, .12) 16px 32px
);
z-index: 2;
}
.ts-card.is-out { opacity: .96; }
.ts-card.is-out .ts-name a { color: var(--text-2); }
/* Ürün detay sayfasında — büyük dikkat çekici kutu */
.pd-stock-warn {
display: flex; align-items: center; gap: .9rem;
padding: 1.1rem 1.3rem; margin: 1.2rem 0;
background: linear-gradient(135deg, rgba(254, 243, 199, .9), rgba(253, 230, 138, .7));
border: 2px solid rgba(245, 158, 11, .55);
border-left: 6px solid #f59e0b;
border-radius: 14px;
color: #78350f; font-weight: 600; font-size: .95rem;
box-shadow: 0 6px 20px rgba(245, 158, 11, .18);
position: relative;
}
.pd-stock-warn::before {
content: ''; position: absolute; inset: 0;
border-radius: 13px; pointer-events: none;
background: radial-gradient(circle at 12% 50%, rgba(245, 158, 11, .15), transparent 50%);
}
.pd-stock-warn > span:first-child {
font-size: 1.8rem !important;
line-height: 1;
filter: drop-shadow(0 2px 4px rgba(245, 158, 11, .35));
animation: pdStockPulse 2.4s ease-in-out infinite;
}
.pd-stock-warn > div { position: relative; z-index: 1; line-height: 1.5; }
.pd-stock-warn strong {
display: block;
font-size: 1.05rem; font-weight: 800;
color: #92400e; letter-spacing: .01em;
margin-bottom: .2rem;
text-transform: uppercase;
}
.pd-stock-warn a {
color: #92400e; font-weight: 700; text-decoration: underline;
text-underline-offset: 2px;
}
@keyframes pdStockPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.08); }
}
html[data-theme="dark"] .pd-stock-warn {
color: #fcd34d;
background: linear-gradient(135deg, rgba(120, 53, 15, .35), rgba(146, 64, 14, .25));
border-color: rgba(245, 158, 11, .65);
border-left-color: #fbbf24;
}
html[data-theme="dark"] .pd-stock-warn strong { color: #fde68a; }
html[data-theme="dark"] .pd-stock-warn a { color: #fcd34d; }
/* Stok yok → SADECE ana CTA satırı disable; iç formlar (stok bildirimi vb) etkilenmez */
.pd-info.is-out-of-stock .pd-actions > button[type="submit"],
.pd-info.is-out-of-stock .pd-actions > .btn-primary[type="submit"] {
opacity: .55; pointer-events: none; cursor: not-allowed;
}
html[data-theme="dark"] .product-card .pc-media {
background: linear-gradient(135deg, #2a1c52, #1a0f38);
}
.product-card .pc-media svg {
width: 78%; height: 78%;
filter: drop-shadow(0 12px 24px rgba(91, 33, 182, .25));
transition: transform .5s var(--easing);
}
.product-card:hover .pc-media svg { transform: scale(1.06) rotate(-2deg); }
.product-card .pc-media .pc-cover {
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform .5s var(--easing);
}
.product-card:hover .pc-media .pc-cover { transform: scale(1.05); }
/* Tükendi badge (kart) */
.pc-tag.oos {
background: #1f2937;
color: #fff;
font-weight: 800;
letter-spacing: .08em;
}
/* Stok bilgi banner (ürün sayfası) */
.stock-banner {
display: flex; align-items: center; gap: .6rem;
padding: .8rem 1rem; border-radius: 10px;
background: rgba(239, 68, 68, .08);
color: #b91c1c;
border: 1px solid rgba(239, 68, 68, .18);
font-size: 13.5px;
margin-bottom: 1rem;
}
.stock-banner.low {
background: rgba(245, 158, 11, .1);
color: #92400e;
border-color: rgba(245, 158, 11, .25);
}
html[data-theme="dark"] .stock-banner { background: rgba(239, 68, 68, .15); color: #fca5a5; }
html[data-theme="dark"] .stock-banner.low { background: rgba(245, 158, 11, .15); color: #fcd34d; }
.btn-primary[disabled], .btn-secondary[disabled] {
opacity: .5; cursor: not-allowed; pointer-events: none;
}
/* Stoka gelince haber al */
/* ===== Stoka gelince haber al — modern, site paletiyle uyumlu ===== */
.stock-notify-card {
margin-top: 2.5rem;
padding: 1.4rem 1.4rem 1.5rem;
background:
radial-gradient(circle at 0% 0%, rgba(167,139,250,.22), transparent 55%),
radial-gradient(circle at 100% 100%, rgba(236,72,153,.14), transparent 55%),
linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
border: 1px solid rgba(167,139,250,.35);
border-radius: 16px;
position: relative;
overflow: hidden;
animation: snc-pop .4s cubic-bezier(.34, 1.56, .64, 1);
box-shadow: 0 8px 24px -10px rgba(124,58,237,.25);
}
@keyframes snc-pop {
0% { opacity: 0; transform: translateY(8px) scale(.98); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* Basit flex: küçük icon (text bloğundan kısa) + center alignment → icon doğal olarak metnin TAM ortasında */
.snc-head {
display: flex !important;
gap: .9rem;
align-items: center !important;
margin-bottom: 1.1rem;
}
.snc-head > div:not(.snc-icon) {
flex: 1 1 auto;
min-width: 0;
align-self: center !important;
}
.snc-icon {
font-size: 1.4rem;
line-height: 1;
width: 38px;
height: 38px;
display: flex !important;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #ede9fe, #fae8ff);
border-radius: 11px;
flex-shrink: 0;
align-self: center !important;
box-shadow: 0 2px 8px rgba(124,58,237,.12);
box-sizing: border-box;
}
.snc-icon > * { line-height: 1; display: block; }
.snc-title {
font-weight: 800;
color: #6b21a8;
font-size: 1rem;
line-height: 1.25;
margin: 0 0 .2rem;
letter-spacing: -.01em;
}
.snc-sub {
font-size: .82rem;
color: #7e22ce;
line-height: 1.4;
opacity: .92;
margin: 0;
}
/* Form: yatay layout — input solda büyür, buton sağda sabit */
#stockNotifyCard .snc-form {
display: flex;
gap: .6rem;
align-items: stretch;
margin: 0;
padding: 0;
background: transparent;
border: 0;
}
/* Input wrapper: ikonlu beyaz pill */
#stockNotifyCard .snc-input-wrap {
flex: 1 1 auto;
min-width: 0;
display: flex;
align-items: center;
gap: .55rem;
padding: 0 .9rem;
background: #fff;
border: 1.5px solid rgba(167,139,250,.5);
border-radius: 12px;
transition: border-color .18s, box-shadow .18s, background .18s;
}
#stockNotifyCard .snc-input-wrap:focus-within {
border-color: #7c3aed;
box-shadow: 0 0 0 3px rgba(124,58,237,.18);
}
#stockNotifyCard .snc-input-ic {
color: #a78bfa;
flex-shrink: 0;
transition: color .18s;
}
#stockNotifyCard .snc-input-wrap:focus-within .snc-input-ic { color: #7c3aed; }
#stockNotifyCard .snc-form input[type="email"] {
flex: 1 1 auto;
min-width: 0;
width: 100%;
font-size: .93rem;
padding: .75rem 0;
background: transparent;
color: #1f2937;
border: 0;
outline: none;
box-shadow: none;
font-family: inherit;
line-height: 1.3;
-webkit-appearance: none;
appearance: none;
margin: 0;
}
#stockNotifyCard .snc-form input[type="email"]::placeholder { color: #9ca3af; opacity: 1; }
#stockNotifyCard .snc-form input[type="email"]:-webkit-autofill {
-webkit-box-shadow: 0 0 0 100px #fff inset;
-webkit-text-fill-color: #1f2937;
}
/* Buton: solid mor gradient + sağda ok */
#stockNotifyCard .snc-form button[type="submit"] {
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: .5rem;
background: linear-gradient(135deg, #a78bfa 0%, #7c3aed 55%, #6d28d9 100%);
color: #fff;
border: none;
padding: 0 1.25rem;
min-height: 46px;
border-radius: 12px;
font-weight: 700;
font-size: .92rem;
letter-spacing: .005em;
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
font-family: inherit;
line-height: 1;
box-shadow: 0 6px 16px rgba(124, 58, 237, .3);
transition: transform .18s ease, box-shadow .2s ease, filter .15s;
-webkit-appearance: none;
appearance: none;
text-shadow: none;
margin: 0;
position: relative;
overflow: hidden;
}
#stockNotifyCard .snc-form button[type="submit"]::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255,255,255,.18), transparent 50%);
pointer-events: none;
}
#stockNotifyCard .snc-form button[type="submit"] > span {
position: relative;
z-index: 1;
}
#stockNotifyCard .snc-form button[type="submit"] svg {
stroke: #fff;
flex-shrink: 0;
position: relative;
z-index: 1;
transition: transform .25s ease;
}
#stockNotifyCard .snc-form button[type="submit"]:hover {
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(124, 58, 237, .42);
filter: brightness(1.05);
}
#stockNotifyCard .snc-form button[type="submit"]:hover svg { transform: translateX(3px); }
#stockNotifyCard .snc-form button[type="submit"]:active { transform: translateY(0); }
#stockNotifyCard .snc-form button[type="submit"]:disabled {
opacity: .55; cursor: not-allowed; pointer-events: none;
box-shadow: none;
transform: none;
}
.snc-msg { font-size: .82rem; line-height: 1.4; }
.snc-msg:not(:empty) { margin-top: .7rem; }
.snc-msg.ok { color: #059669; font-weight: 600; }
.snc-msg.bad { color: #dc2626; font-weight: 600; }
/* Newsletter opt-in checkbox (gönüllü "indirim haberleri" aboneliği) */
#stockNotifyCard .snc-optin {
display: flex;
align-items: flex-start;
gap: .55rem;
margin-top: .8rem;
cursor: pointer;
font-size: .82rem;
color: #7e22ce;
line-height: 1.4;
user-select: none;
}
#stockNotifyCard .snc-optin input[type="checkbox"] {
margin: 2px 0 0;
width: 16px;
height: 16px;
accent-color: #7c3aed;
cursor: pointer;
flex-shrink: 0;
}
#stockNotifyCard .snc-optin:hover { color: #6b21a8; }
#stockNotifyCard.success .snc-optin { display: none !important; }
.stock-notify-card.success {
background:
radial-gradient(circle at 0% 0%, rgba(34,197,94,.18), transparent 55%),
linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
border-color: rgba(34,197,94,.4);
/* Form gizliyken icon+text grubunu kart İÇİNDE hem dikey hem yatay ortala */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.stock-notify-card.success .snc-head {
margin-bottom: 0; /* form yok — alt boşluk gereksiz */
flex: 0 0 auto; /* genişlik içeriğe göre, full-width almasın → ortalanabilir */
}
.stock-notify-card.success .snc-title { color: #166534; }
.stock-notify-card.success .snc-sub { color: #16a34a; }
.stock-notify-card.success .snc-icon {
background: linear-gradient(135deg, #d1fae5, #a7f3d0);
}
/* Mobil: dikey stack — input wrap ve buton full-width */
@media (max-width: 480px) {
#stockNotifyCard .snc-form { flex-direction: column; gap: .55rem; }
#stockNotifyCard .snc-form button[type="submit"] {
width: 100%;
padding: .85rem 1rem;
min-height: 48px;
}
}
/* Dark theme */
html[data-theme="dark"] .stock-notify-card {
background:
radial-gradient(circle at 0% 0%, rgba(167,139,250,.18), transparent 55%),
linear-gradient(135deg, rgba(124, 58, 237, .14), rgba(167, 139, 250, .08));
border-color: rgba(167, 139, 250, .3);
}
html[data-theme="dark"] .snc-title { color: #c4b5fd; }
html[data-theme="dark"] .snc-sub { color: #a78bfa; }
html[data-theme="dark"] .snc-icon { background: linear-gradient(135deg, rgba(167,139,250,.18), rgba(236,72,153,.14)); }
html[data-theme="dark"] .snc-form input[type=email] {
background: #1f1f2e; color: #e5e7eb;
border-color: rgba(167,139,250,.35);
}
html[data-theme="dark"] .snc-form input[type=email]::placeholder { color: #6b7280; }
/* Template-only ürün bilgi bandı */
.template-info {
display: flex; align-items: flex-start; gap: .6rem;
padding: .8rem 1rem; border-radius: 12px;
background: linear-gradient(135deg, rgba(167, 139, 250, .12), rgba(91, 33, 182, .06));
color: var(--purple-700);
border: 1px solid rgba(167, 139, 250, .25);
font-size: 13px;
margin-bottom: .8rem;
line-height: 1.5;
}
.template-info svg { flex-shrink: 0; margin-top: 2px; }
html[data-theme="dark"] .template-info { background: rgba(167, 139, 250, .12); color: #c4b5fd; border-color: rgba(167, 139, 250, .3); }
.pc-tags {
position: absolute;
top: 12px; left: 12px;
display: flex; flex-direction: column; gap: 6px;
z-index: 2;
}
.pc-tag {
padding: 4px 10px;
border-radius: 999px;
font-size: .68rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
background: rgba(255, 255, 255, .9);
color: var(--purple-700);
backdrop-filter: blur(6px);
}
.pc-tag.bestseller { background: var(--gold); color: #4c1d95; }
.pc-tag.new { background: var(--purple-700); color: #fff; }
.ci-fav {
width: 32px; height: 32px;
border-radius: 50%;
background: var(--surface);
border: 1px solid var(--border);
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
color: var(--text-3);
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease, color .2s ease, opacity .2s ease;
margin-bottom: .4rem;
}
.ci-fav:hover { color: #ec4899; border-color: #ec4899; transform: scale(1.06); }
.ci-fav.active { color: #ec4899; border-color: #fce7f3; background: #fce7f3; }
.pc-fav {
position: absolute;
top: 12px; right: 12px;
width: 36px; height: 36px;
border-radius: 50%;
background: rgba(255, 255, 255, .95);
border: none;
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
z-index: 2;
color: var(--text-3);
transition: transform .25s var(--easing), box-shadow .25s var(--easing), border-color .25s var(--easing), background-color .25s var(--easing), color .25s var(--easing), opacity .25s var(--easing);
backdrop-filter: blur(6px);
}
.pc-fav:hover { color: #ec4899; transform: scale(1.08); }
.pc-fav.active {
background: linear-gradient(135deg, #ec4899, #db2777);
color: #fff;
border-color: #db2777;
box-shadow: 0 8px 20px rgba(236, 72, 153, .35);
}
.pc-fav.active svg { fill: #fff; stroke: #fff; }
/* Favori toggle animasyonu — basınca kalp atışı */
@keyframes fav-pop {
0% { transform: scale(1); }
35% { transform: scale(1.25); }
60% { transform: scale(.92); }
100% { transform: scale(1); }
}
.pc-fav.fav-anim,
.icon-btn.fav-anim,
.ci-fav.fav-anim {
animation: fav-pop .42s var(--easing);
}
/* Aktif olunca kalp içinde nabız atışı */
@keyframes fav-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.12); }
}
.pc-fav.fav-burst svg,
.icon-btn.fav-burst svg {
animation: fav-pulse .6s var(--easing);
}
.pc-body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; flex: 1; }
.pc-rating { display: flex; align-items: center; gap: .35rem; font-size: .8rem; color: var(--text-3); margin-bottom: .35rem; }
.pc-rating .stars { color: var(--gold); letter-spacing: 1px; }
.pc-title {
font-size: 1rem;
font-weight: 600;
margin: 0 0 .3rem;
color: var(--text);
line-height: 1.3;
}
.pc-desc { font-size: .82rem; color: var(--text-3); margin-bottom: .9rem; min-height: 0; }
.pc-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; }
.pc-price { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.pc-price .from { font-size: .68rem; color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; }
.pc-price .val { font-size: 1.2rem; font-weight: 700; color: var(--text); }
.pc-price .val .currency { color: var(--accent); }
/* Eski fiyat çizili + %indirim badge — admin'de old_price girilince otomatik çıkar */
.pc-price .pc-old {
display: inline-flex;
align-items: center;
gap: .4rem;
font-size: .8rem;
color: var(--text-3);
margin-bottom: 2px;
flex-wrap: nowrap;
white-space: nowrap;
}
.pc-price .pc-old-num {
text-decoration: line-through;
text-decoration-color: var(--text-3);
text-decoration-thickness: 1.5px;
}
.pc-price .pc-old em {
display: inline-block;
font-style: normal;
text-decoration: none;
font-size: .76rem;
font-weight: 700;
color: #fff;
background: linear-gradient(135deg, #a78bfa, var(--accent));
padding: 3px 10px;
border-radius: 999px;
letter-spacing: .02em;
white-space: nowrap;
box-shadow: 0 2px 6px color-mix(in srgb, var(--accent) 30%, transparent);
}
@media (max-width: 640px){
.pc-price .pc-old em .disc-word{display:none}
.pc-price .pc-old em .disc-pct::before{content:'↓ '; font-weight:900; opacity:.9}
}
.pc-cta {
width: 40px; height: 40px;
border-radius: 12px;
background: var(--accent);
color: #fff;
border: none;
display: inline-flex; align-items: center; justify-content: center;
transition: transform .25s, box-shadow .25s, border-color .25s, background-color .25s, color .25s, opacity .25s;
}
.pc-cta, .pc-cta:visited { color: #fff; }
.pc-cta:hover, a.pc-cta:hover { background: var(--purple-700); color: #fff !important; transform: scale(1.1); }
.pc-cta svg, .pc-cta:hover svg { stroke: #fff; color: #fff; }
/* ============================ HOW IT WORKS ============================ */
.steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 2.6rem; /* badge'lar nefes alacak boşluk */
position: relative;
margin-top: 2.5rem;
}
.step {
text-align: center;
padding: 2.4rem 1.4rem 1.7rem;
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
position: relative;
transition: transform .35s var(--easing), box-shadow .35s var(--easing), border-color .35s var(--easing);
isolation: isolate;
overflow: visible;
}
.step::before {
/* Subtle ürün-rengi degrade fon */
content: '';
position: absolute; inset: 0;
z-index: -1;
border-radius: inherit;
background: linear-gradient(180deg,
color-mix(in srgb, var(--step-color, var(--accent)) 6%, transparent),
transparent 60%);
opacity: 0;
transition: opacity .35s var(--easing);
}
.step:hover {
transform: translateY(-6px);
border-color: color-mix(in srgb, var(--step-color, var(--accent)) 50%, var(--border));
box-shadow: 0 22px 48px color-mix(in srgb, var(--step-color, var(--accent)) 22%, transparent);
}
.step:hover::before { opacity: 1; }
.step .step-num {
position: absolute;
top: -22px; left: 50%; transform: translateX(-50%);
width: 48px; height: 48px;
border-radius: 50%;
background: linear-gradient(135deg,
color-mix(in srgb, var(--step-color, var(--accent)) 70%, #fff),
var(--step-color, var(--accent)));
color: #fff;
display: inline-flex; align-items: center; justify-content: center;
font-weight: 800;
font-size: 1.15rem;
letter-spacing: -.02em;
box-shadow: 0 10px 24px color-mix(in srgb, var(--step-color, var(--accent)) 40%, transparent),
0 0 0 4px var(--bg, #fff);
transition: transform .35s var(--easing);
}
.step:hover .step-num {
transform: translateX(-50%) scale(1.08);
}
.step .step-icon {
font-size: 2.4rem;
margin: .9rem 0 .9rem;
display: inline-block;
filter: drop-shadow(0 4px 8px color-mix(in srgb, var(--step-color, var(--accent)) 30%, transparent));
transition: transform .4s var(--easing);
}
.step:hover .step-icon {
transform: rotate(-8deg) scale(1.08);
}
.step h3 {
font-size: 1.1rem;
font-weight: 800;
margin-bottom: .5rem;
color: var(--text);
letter-spacing: -.01em;
}
.step p {
font-size: .88rem;
color: var(--text-2);
margin: 0;
line-height: 1.55;
}
/* Adımlar arası ok bağlayıcı (desktop only, last hariç) — yuvarlak rozet, net görünür */
.steps-flow .step:not(:last-child)::after {
content: '';
position: absolute;
top: 50%;
right: -1.3rem; /* gap (2.6rem) tam ortası */
transform: translate(50%, -50%);
z-index: 8;
width: 32px; height: 32px;
border-radius: 50%;
background-color: var(--step-color, var(--accent));
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: 18px 18px;
box-shadow: 0 4px 12px color-mix(in srgb, var(--step-color, var(--accent)) 35%, transparent),
0 0 0 4px var(--bg, #fff);
pointer-events: none;
}
@media (max-width: 900px) {
.steps { grid-template-columns: 1fr 1fr; gap: 2.2rem 1rem; }
.steps-flow .step:not(:last-child)::after { display: none; }
}
@media (max-width: 480px) {
.steps { grid-template-columns: 1fr; gap: 2.2rem 1rem; }
.step { padding: 2rem 1.2rem 1.4rem; }
}
/* ============================ TESTIMONIALS ============================ */
/* Agregat puan rozeti */
.rev-aggregate {
display: flex;
align-items: center;
justify-content: center;
gap: 1.5rem;
margin: 0 auto;
padding: 1.15rem 2rem;
width: fit-content;
max-width: 100%;
border-radius: 999px;
background: linear-gradient(135deg,
color-mix(in srgb, #fbbf24 14%, var(--surface-solid)),
color-mix(in srgb, #f59e0b 8%, var(--surface-solid)));
border: 1px solid color-mix(in srgb, #fbbf24 30%, var(--border));
box-shadow: 0 14px 36px -12px color-mix(in srgb, #f59e0b 35%, transparent);
}
/* === 3 grup eşit aralık (Nasıl çalışır → Müşteri kartı → Yorumlar) === */
/* Grup 1 → 2 boşluğu = .reviews-section padding-top
Grup 2 → 3 boşluğu = .rev-aggregate margin-bottom
İkisi aynı değer (4rem) → görsel denge */
#nasil-calisir { padding-bottom: 0 !important; }
.reviews-section { padding-top: 3rem !important; padding-bottom: 1.5rem !important; } /* Alt: footer'ın margin-top'u (1.5rem) ile birleşince button'un üstündeki 3rem'e eşitlenir */
.reviews-section .section-head { margin: 0 auto 1.25rem !important; } /* iç boşluk: eyebrow/başlık → sarı kart */
.reviews-section .rev-aggregate { margin: 0 auto 4rem !important; } /* dış boşluk: sarı kart → yorum kutuları */
.ra-score {
display: flex; align-items: baseline; gap: 4px;
font-weight: 800;
letter-spacing: -.03em;
background: linear-gradient(135deg, #fbbf24, #f59e0b);
-webkit-background-clip: text; background-clip: text;
color: transparent;
}
.ra-num { font-size: 2.3rem; line-height: 1; }
.ra-out {
font-size: 1rem;
font-weight: 700;
color: var(--text-3);
-webkit-text-fill-color: var(--text-3);
}
.ra-stars {
font-size: 1.1rem;
letter-spacing: 2px;
background: linear-gradient(135deg, #fbbf24, #f59e0b);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
.ra-meta {
display: flex; flex-direction: column;
line-height: 1.2;
}
.ra-meta strong {
font-size: 1rem;
font-weight: 800;
color: var(--text);
letter-spacing: -.01em;
}
.ra-meta span {
font-size: .78rem;
color: var(--text-2);
font-weight: 500;
margin-top: 1px;
}
.testimonials {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.4rem;
}
@media (max-width: 720px) {
.testimonials .testimonial:nth-child(n+5) { display: none; }
.section-home-cats { display: none !important; }
}
.testimonial {
padding: 1.5rem 1.5rem 1.4rem;
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: 18px;
position: relative;
transition: transform .35s var(--easing), box-shadow .35s var(--easing), border-color .35s var(--easing);
isolation: isolate;
display: flex;
flex-direction: column;
}
.testimonial:hover {
transform: translateY(-4px);
border-color: color-mix(in srgb, var(--accent, #7c3aed) 35%, var(--border));
box-shadow: 0 18px 40px color-mix(in srgb, var(--accent, #7c3aed) 14%, transparent);
}
/* Watermark tırnak (köşede) */
.testimonial .tm-quote {
position: absolute;
top: -.25rem; left: 1rem;
font-family: 'Pacifico', 'Georgia', cursive;
font-size: 5.5rem;
font-weight: 700;
background: linear-gradient(135deg, #ec4899, #7c3aed);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
opacity: .18;
line-height: 1;
pointer-events: none;
z-index: 0;
}
/* Eski ::before tırnağını sıfırla */
.testimonial::before { content: none; }
.tm-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: .55rem;
margin-bottom: .65rem;
position: relative;
z-index: 1;
}
.testimonial .stars {
color: #f59e0b;
letter-spacing: 1.5px;
font-size: .95rem;
margin-bottom: 0;
}
.tm-verified {
display: inline-flex; align-items: center; gap: 3px;
padding: 3px 8px;
font-size: .65rem;
font-weight: 700;
letter-spacing: .03em;
color: #10b981;
background: color-mix(in srgb, #10b981 12%, transparent);
border-radius: 99px;
white-space: nowrap;
}
.testimonial p {
color: var(--text);
font-weight: 500;
font-size: .94rem;
line-height: 1.6;
overflow-wrap: anywhere;
word-break: break-word;
margin: 0 0 .95rem;
position: relative;
z-index: 1;
flex: 1;
}
.testimonial .author {
display: flex;
align-items: center;
gap: .75rem;
position: relative;
z-index: 1;
padding-top: .75rem;
border-top: 1px dashed var(--border);
}
.testimonial .avatar {
width: 42px; height: 42px;
border-radius: 50%;
background: linear-gradient(135deg, #a78bfa, #ec4899);
color: #fff;
display: inline-flex; align-items: center; justify-content: center;
font-weight: 800;
font-size: 1rem;
letter-spacing: -.01em;
box-shadow: 0 4px 10px color-mix(in srgb, #ec4899 25%, transparent),
0 0 0 3px var(--surface-solid),
0 0 0 4px color-mix(in srgb, #ec4899 30%, transparent);
}
.testimonial .author-name {
font-weight: 700;
font-size: .92rem;
color: var(--text);
letter-spacing: -.01em;
}
.testimonial .author-role {
font-size: .74rem;
color: var(--text-3);
font-weight: 500;
margin-top: 1px;
}
@media (max-width: 720px) {
.rev-aggregate {
gap: .85rem;
padding: .9rem 1.25rem;
margin: 1rem auto 1.75rem;
}
.ra-num { font-size: 1.85rem; }
.ra-out { font-size: .85rem; }
.ra-stars { font-size: .9rem; letter-spacing: 1.5px; }
.ra-meta strong { font-size: .88rem; }
.ra-meta span { font-size: .7rem; }
.testimonial { padding: 1.25rem 1.25rem 1.15rem; }
.testimonial .tm-quote { font-size: 4rem; }
}
/* ============================ BANNER (CTA) ============================ */
.banner-cta {
margin: 5rem auto;
max-width: var(--container);
padding: 3rem 2.5rem;
border-radius: var(--radius-xl);
background: linear-gradient(135deg, #4c1d95, #7c3aed 50%, #a78bfa);
color: #fff;
position: relative;
overflow: hidden;
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: 2rem;
align-items: center;
box-shadow: 0 30px 80px rgba(76, 29, 149, .4);
}
.banner-cta::before, .banner-cta::after {
content: ''; position: absolute;
width: 360px; height: 360px;
border-radius: 50%;
background: rgba(255, 255, 255, .08);
pointer-events: none;
}
.banner-cta::before { top: -120px; right: -80px; }
.banner-cta::after { bottom: -160px; left: -60px; width: 280px; height: 280px; }
.banner-cta h2 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.4rem); margin-bottom: .6rem; }
.banner-cta p { color: rgba(255, 255, 255, .85); margin-bottom: 1.4rem; }
.banner-cta .btn-primary { background: #fff; color: var(--purple-800); box-shadow: 0 12px 30px rgba(0,0,0,.18); }
.banner-cta .btn-primary::before { display: none; }
.banner-cta .btn-primary:hover { background: var(--gold); color: var(--purple-900); box-shadow: 0 18px 40px rgba(251,191,36,.45); }
.banner-cta .btn-primary:hover svg { stroke: var(--purple-900); }
.banner-cta .banner-art { position: relative; aspect-ratio: 1 / 1; max-width: 300px; margin: 0 auto; }
.banner-cta .banner-art .float-magnet { box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
/* ============================ FEATURE STRIP ============================ */
.feature-strip {
position: relative;
padding: 3.5rem 0;
background:
radial-gradient(60% 100% at 50% 0%, rgba(167, 139, 250, .08), transparent 70%),
var(--surface-2);
border-block: 1px solid var(--border);
overflow: hidden;
}
.feature-strip::before {
content: '';
position: absolute;
left: 50%; top: -1px;
width: 200px; height: 1px;
transform: translateX(-50%);
background: linear-gradient(90deg, transparent, var(--accent), transparent);
opacity: .6;
}
.feature-row {
max-width: var(--container);
margin: 0 auto;
padding: 0 1.5rem;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
}
/* Tek kart */
.feature-row .feat {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
text-align: center;
gap: 1rem;
padding: .5rem .75rem;
cursor: default;
transition: transform .45s var(--easing);
}
.feature-row .feat:hover { transform: translateY(-6px); }
/* Yuvarlak emoji kabı — beyaz cam + mor halka */
.feature-row .feat-ic {
width: 76px; height: 76px;
border-radius: 50%;
background: linear-gradient(145deg, #ffffff, #f7f2ff);
border: 1px solid rgba(124, 58, 237, .18);
display: grid;
place-items: center;
font-size: 36px;
line-height: 1;
font-family:
'Apple Color Emoji', 'Segoe UI Emoji',
'Noto Color Emoji', 'EmojiOne Color',
'Twemoji Mozilla', sans-serif;
position: relative;
isolation: isolate;
box-shadow:
0 12px 26px rgba(124, 58, 237, .14),
0 2px 6px rgba(124, 58, 237, .08),
inset 0 -3px 6px rgba(124, 58, 237, .05),
inset 0 1px 0 rgba(255, 255, 255, 1);
transition:
transform .5s var(--easing),
box-shadow .5s var(--easing),
border-color .5s var(--easing);
}
/* Mor halo halkası — default da hafif görünür, hover'da kuvvetlenir */
.feature-row .feat-ic::before {
content: '';
position: absolute;
inset: -6px;
border-radius: 50%;
background: conic-gradient(
from 0deg,
var(--purple-300),
var(--purple-500),
var(--purple-300),
var(--purple-500),
var(--purple-300)
);
opacity: 0;
z-index: -2;
filter: blur(8px);
transition: opacity .5s var(--easing), inset .5s var(--easing);
}
/* Beyaz iç-katman (halo'nun arka planını maskeler) */
.feature-row .feat-ic::after {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
background: inherit;
z-index: -1;
}
/* HOVER — kart kalkıyor, halo açılıyor, kab hafif eğiliyor */
.feature-row .feat:hover .feat-ic {
transform: scale(1.08) rotate(-6deg);
border-color: rgba(124, 58, 237, .35);
box-shadow:
0 22px 44px rgba(124, 58, 237, .28),
0 6px 14px rgba(124, 58, 237, .15),
inset 0 -3px 6px rgba(124, 58, 237, .06),
inset 0 1px 0 rgba(255, 255, 255, 1);
}
.feature-row .feat:hover .feat-ic::before {
opacity: .65;
inset: -10px;
animation: feat-halo 10s linear infinite;
}
@keyframes feat-halo {
to { transform: rotate(360deg); }
}
/* Yazılar */
.feature-row .feat-title {
display: block;
font-weight: 700;
font-size: 1rem;
color: var(--text);
letter-spacing: -.01em;
margin: 0;
line-height: 1.25;
transition: color .3s;
}
.feature-row .feat:hover .feat-title { color: var(--accent); }
.feature-row .feat-sub {
display: block;
font-size: .82rem;
color: var(--text-3);
line-height: 1.4;
margin-top: -.45rem;
}
/* Dark tema */
html[data-theme="dark"] .feature-row .feat-ic {
background: linear-gradient(145deg, #1f1340, #160c2c);
border-color: rgba(167, 139, 250, .22);
box-shadow:
0 12px 26px rgba(0, 0, 0, .5),
inset 0 -3px 6px rgba(167, 139, 250, .08),
inset 0 1px 0 rgba(255, 255, 255, .08);
}
html[data-theme="dark"] .feature-row .feat:hover .feat-ic {
border-color: rgba(167, 139, 250, .5);
box-shadow:
0 22px 44px rgba(76, 29, 149, .55),
0 6px 14px rgba(124, 58, 237, .35),
inset 0 -3px 6px rgba(167, 139, 250, .12),
inset 0 1px 0 rgba(255, 255, 255, .12);
}
/* Responsive */
@media (max-width: 980px) {
.feature-strip { padding: 2.6rem 0; }
.feature-row { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; }
}
@media (max-width: 480px) {
.feature-strip { padding: 2.2rem 0; }
.feature-row { gap: 1.6rem 1rem; }
.feature-row .feat { gap: .75rem; }
.feature-row .feat-ic { width: 66px; height: 66px; font-size: 30px; }
.feature-row .feat-title { font-size: .95rem; }
.feature-row .feat-sub { font-size: .76rem; }
}
/* ============================ PRODUCT DETAIL PAGE ============================ */
.product-detail {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 3rem;
margin-bottom: 4rem;
align-items: start;
}
.pd-left {
display: flex;
flex-direction: column;
gap: 1.2rem;
position: sticky;
top: calc(var(--header-h) + 1.2rem);
}
.pd-gallery {
position: relative;
aspect-ratio: 1 / 1;
background:
radial-gradient(circle at 30% 30%, rgba(255,255,255,.5) 0%, transparent 60%),
linear-gradient(135deg, var(--purple-100), var(--purple-200));
border-radius: var(--radius-xl);
overflow: hidden;
display: flex; align-items: center; justify-content: center;
border: 1px solid var(--border);
max-height: calc(100vh - var(--header-h) - 2rem);
}
html[data-theme="dark"] .pd-gallery {
background: linear-gradient(135deg, #2a1c52, #1a0f38);
}
/* Magnet frame — beyaz polaroid kart, boyuta göre şekil değiştirir */
.pd-magnet {
position: relative;
border-radius: 22px;
overflow: hidden;
box-shadow:
0 30px 60px rgba(91, 33, 182, .28),
0 8px 20px rgba(91, 33, 182, .18),
inset 0 1px 0 rgba(255, 255, 255, .9);
background: #ffffff;
border: 1px solid rgba(124, 58, 237, .12);
transition:
width .45s var(--easing),
aspect-ratio .45s var(--easing),
box-shadow .35s var(--easing);
display: flex; align-items: center; justify-content: center;
}
html[data-theme="dark"] .pd-magnet {
background: #f5f3ff;
border-color: rgba(167, 139, 250, .25);
}
/* Polaroid çerçeve — tüm kenarlarda eşit beyaz şerit (uniform border)
6x6: kare → genişlik bazlı | 6x9: dikey → yükseklik bazlı (taşmayı engelle) */
.pd-magnet {
width: 70%;
max-height: 88%;
}
.pd-gallery.size-6x6 .pd-magnet { aspect-ratio: 1 / 1; width: 72%; }
.pd-gallery.size-6x9 .pd-magnet { aspect-ratio: 8 / 11; width: auto; height: 88%; }
/* Magnet gövdesi — boyuta göre şekil değişen mor blok. Polaroid içinde merkezde. */
.pd-print-area {
position: relative;
width: 75%;
border-radius: 22px;
background: linear-gradient(135deg, #a78bfa, #5b21b6);
box-shadow:
0 18px 36px rgba(91, 33, 182, .35),
inset 0 1px 0 rgba(255, 255, 255, .15);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
transition: aspect-ratio .45s var(--easing);
}
.pd-gallery.size-6x6 .pd-print-area { aspect-ratio: 1 / 1; }
.pd-gallery.size-6x9 .pd-print-area { aspect-ratio: 6 / 9; }
.pd-print-area svg {
width: 100%; height: 100%;
display: block;
}
.pd-print-area .preview-photo {
position: absolute;
inset: 0;
width: 100%; height: 100%;
object-fit: cover;
display: none;
border-radius: inherit;
}
.pd-gallery.has-preview .pd-print-area svg { display: none; }
.pd-gallery.has-preview .pd-print-area .preview-photo { display: block; }
/* Mockup img — admin görseli VEYA müşteri yoksa size'ın 1. admin görseli */
.pd-print-area .mockup {
position: absolute;
inset: 0;
width: 100%; height: 100%;
object-fit: cover;
border-radius: inherit;
display: block;
}
/* mockup gösterildiğinde SVG'yi gizle */
.pd-gallery.has-mockup .pd-print-area svg { display: none; }
/* Galeri okları + dotlar */
[hidden] { display: none !important; }
.pd-arrow {
position: absolute;
top: 50%; transform: translateY(-50%);
width: 42px; height: 42px;
border-radius: 50%;
border: 1px solid var(--border);
background: rgba(255,255,255,.92);
backdrop-filter: blur(8px);
color: var(--purple-700);
cursor: pointer;
display: grid; place-items: center;
z-index: 5;
transition: background .2s, transform .2s, box-shadow .2s;
box-shadow: 0 6px 18px rgba(91, 33, 182, .12);
}
.pd-arrow:hover { background: #fff; transform: translateY(-50%) scale(1.06); box-shadow: 0 10px 24px rgba(91, 33, 182, .20); }
.pd-arrow-prev { left: 12px; }
.pd-arrow-next { right: 12px; }
html[data-theme="dark"] .pd-arrow { background: rgba(20, 12, 50, .8); color: #fff; border-color: rgba(167, 139, 250, .25); }
/* Dot indikator (alt) */
.pd-dots {
position: absolute;
bottom: 14px; left: 0; right: 0;
display: flex;
justify-content: center;
gap: 6px;
z-index: 4;
}
.pd-dots button {
width: 8px; height: 8px; border-radius: 50%;
border: 0; padding: 0; cursor: pointer;
background: rgba(124, 58, 237, .25);
transition: background .2s, width .2s;
}
.pd-dots button.active { background: var(--purple-700); width: 22px; border-radius: 99px; }
/* eski .pd-magnet svg / .pd-magnet .preview-photo geriye-uyum (kullanılmıyor ama güvenli kalsın) */
.pd-magnet > svg, .pd-magnet > .preview-photo { display: none !important; }
/* Boyut badge'i — magnet'in sol-üstünde */
.pd-magnet::after {
content: attr(data-size);
position: absolute;
top: 10px; left: 10px;
background: rgba(124, 58, 237, .92);
color: #ffffff;
padding: 5px 11px;
font-size: .68rem;
font-weight: 700;
letter-spacing: .12em;
border-radius: 999px;
text-transform: uppercase;
backdrop-filter: blur(8px);
z-index: 3;
box-shadow: 0 4px 12px rgba(124, 58, 237, .35);
pointer-events: none;
}
.pd-gallery.size-6x6 .pd-magnet::after { content: '6 × 6 cm'; }
.pd-gallery.size-6x9 .pd-magnet::after { content: '6 × 9 cm'; }
/* Boyut karşılaştırma rehberi — sağ-altta minik bir ölçek hint'i */
.pd-magnet::before {
content: '';
position: absolute;
bottom: 12px; right: 12px;
width: 28px; height: 28px;
background: linear-gradient(135deg, var(--purple-300), var(--purple-500));
border-radius: 8px;
opacity: .25;
z-index: 2;
pointer-events: none;
transition: width .4s var(--easing), height .4s var(--easing);
}
.pd-gallery.size-6x9 .pd-magnet::before {
width: 22px;
height: 33px;
border-radius: 6px;
}
.pd-gallery svg {
filter: drop-shadow(0 14px 28px rgba(91, 33, 182, .25));
}
/* Eski uyumluluk — global galeri için */
.pd-gallery > .preview-photo {
position: absolute;
width: 60%;
aspect-ratio: 1/1;
border-radius: 28px;
object-fit: cover;
box-shadow: 0 24px 50px rgba(91, 33, 182, .4);
display: none;
}
.pd-gallery.has-preview > svg { display: none; }
.pd-gallery.has-preview .preview-photo { display: block; }
.pd-info h1 {
font-size: clamp(1.7rem, 3vw, 2.4rem);
margin-bottom: .5rem;
}
.pd-rating-row {
display: flex; align-items: center; gap: 1rem;
margin-bottom: 1.3rem;
font-size: .9rem;
color: var(--text-3);
}
.pd-rating-row .stars { color: var(--gold); letter-spacing: 1px; font-size: 1.05rem; }
.pd-price {
display: flex; align-items: baseline; gap: .8rem;
margin-bottom: 1.5rem;
}
.pd-price .now { font-size: 2rem; font-weight: 800; color: var(--text); }
.pd-price .now .currency { color: var(--accent); }
.pd-price .label { font-size: .78rem; color: var(--text-3); text-transform: uppercase; letter-spacing: .1em; }
.pd-section { margin-bottom: 1.6rem; }
.pd-section .lbl {
display: block;
font-size: .8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--text-3);
margin-bottom: .65rem;
}
.size-pick { display: flex; gap: .7rem; flex-wrap: wrap; }
.size-pick label {
cursor: pointer;
padding: .9rem 1.3rem;
border-radius: var(--radius);
border: 2px solid var(--border-2);
background: var(--surface);
display: flex; flex-direction: column; align-items: center;
min-width: 130px;
transition: transform .2s, box-shadow .2s, border-color .2s, background-color .2s, color .2s, opacity .2s;
}
.size-pick label:hover { border-color: var(--accent); }
.size-pick input { display: none; }
.size-pick input:checked + .size-content {
color: var(--accent);
}
.size-pick label:has(input:checked) {
border-color: var(--accent);
background: linear-gradient(135deg, rgba(124, 58, 237, .1), rgba(167, 139, 250, .15));
box-shadow: 0 8px 20px rgba(124, 58, 237, .15);
}
.size-pick .size-name { font-weight: 700; font-size: 1.05rem; }
.size-pick .size-price { font-size: .85rem; color: var(--text-3); margin-top: 4px; }
/* Tek boyut modu — kullanıcı seçim yapmıyor, sadece bilgi olarak gösteriyoruz */
.pd-section[data-single-size="1"] .size-pick label {
cursor: default;
border-color: var(--accent);
background: linear-gradient(135deg, rgba(124, 58, 237, .08), rgba(167, 139, 250, .12));
}
.pd-section[data-single-size="1"] .size-pick label:hover {
transform: none;
}
.qty-row { display: flex; align-items: center; gap: .9rem; }
.qty {
display: inline-flex; align-items: center;
background: var(--surface);
border: 1.5px solid var(--border-2);
border-radius: 999px;
overflow: hidden;
}
.qty button {
width: 38px; height: 42px;
background: transparent;
border: none;
font-size: 1.1rem;
font-weight: 700;
color: var(--text);
transition: background .2s;
}
.qty button:hover { background: var(--accent); color: #fff; }
.qty button:active { transform: scale(.94); }
/* Adet input — klavyeden düzenlenebilir */
.qty .qty-input {
width: 64px;
height: 42px;
border: none;
background: transparent;
text-align: center;
font-weight: 700;
font-size: 1.05rem;
color: var(--text);
outline: none;
-moz-appearance: textfield;
appearance: textfield;
}
.qty .qty-input::-webkit-outer-spin-button,
.qty .qty-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.qty .qty-input.invalid { color: #dc2626; }
.qty-hint { color: var(--text-3); font-size: .9rem; }
.qty-hint.error { color: #dc2626; font-weight: 500; }
/* Fiyat bloğu — eski fiyat üstünde küçük çizili, yeni fiyat altta belirgin */
.pd-price .price-block {
display: flex; flex-direction: column; gap: .2rem;
}
.pd-price .old-price {
display: inline-block;
align-self: flex-start;
font-size: .92rem;
color: var(--text-3);
text-decoration: line-through;
text-decoration-thickness: 1.5px;
font-weight: 500;
margin-bottom: .1rem;
}
.pd-price .price-now-row {
display: flex; align-items: baseline; gap: .8rem;
}
.pd-price .price-unit-hint {
font-size: .82rem;
color: var(--text-3);
}
.pd-price .price-unit-hint strong {
color: var(--text-2);
font-weight: 600;
}
.size-pick .size-price small {
display: block;
font-size: .72rem;
color: var(--text-3);
font-weight: 400;
margin-top: 2px;
}
.upload-zone {
position: relative;
border: 2px dashed var(--border-2);
border-radius: var(--radius);
padding: 1.8rem 1.4rem 1.6rem;
text-align: center;
background: var(--surface);
transition: transform .25s var(--easing), box-shadow .25s var(--easing), border-color .25s var(--easing), background-color .25s var(--easing), color .25s var(--easing), opacity .25s var(--easing);
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
gap: .35rem;
}
.upload-zone:hover, .upload-zone.drag {
border-color: var(--accent);
background: linear-gradient(135deg, rgba(124, 58, 237, .06), rgba(167, 139, 250, .1));
transform: translateY(-1px);
}
.upload-zone input[type=file] {
position: absolute; inset: 0;
opacity: 0;
cursor: pointer;
width: 100%;
height: 100%;
}
.upload-zone .up-ic {
width: 50px; height: 50px;
border-radius: 50%;
background: linear-gradient(135deg, var(--purple-500), var(--purple-700));
color: #fff;
display: inline-flex; align-items: center; justify-content: center;
margin-bottom: .3rem;
box-shadow: 0 8px 18px rgba(124, 58, 237, .3);
}
.upload-zone .up-title { display: block; font-weight: 600; font-size: .98rem; color: var(--text); }
.upload-zone .up-hint { display: block; color: var(--text-3); font-size: .82rem; }
/* Çoklu thumbnail grid */
.upload-thumbs {
margin-top: .85rem;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
gap: .55rem;
}
.upload-thumb {
position: relative;
aspect-ratio: 1/1;
border-radius: 12px;
overflow: hidden;
border: 2px solid var(--border);
background: var(--surface);
cursor: pointer;
transition: border-color .2s, transform .2s, box-shadow .2s;
}
.upload-thumb:hover {
border-color: var(--purple-400);
transform: translateY(-2px);
box-shadow: 0 6px 14px rgba(124, 58, 237, .25);
}
.upload-thumb.active {
border-color: var(--accent);
box-shadow: 0 0 0 2px rgba(124, 58, 237, .35), 0 6px 14px rgba(124, 58, 237, .25);
}
.upload-thumb.active::before {
content: '';
position: absolute;
top: 4px; left: 4px;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 2px rgba(255, 255, 255, .85);
z-index: 1;
}
.upload-thumb img {
width: 100%; height: 100%; object-fit: cover; display: block;
pointer-events: none;
}
.upload-thumb .thumb-remove {
position: absolute; top: 4px; right: 4px;
width: 22px; height: 22px;
border-radius: 50%;
border: none;
background: rgba(0, 0, 0, .65);
color: #fff;
font-size: 1rem; line-height: 1;
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
transition: background .2s, transform .2s;
z-index: 2;
}
.upload-thumb .thumb-remove:hover {
background: #dc2626;
transform: scale(1.08);
}
/* Yetersiz foto inline uyarı paneli */
.upload-warn {
margin-top: 1rem;
padding: 1.1rem 1.2rem;
border-radius: 16px;
background: linear-gradient(135deg, rgba(251, 191, 36, .08), rgba(124, 58, 237, .04));
border: 1.5px solid rgba(251, 191, 36, .35);
display: flex;
gap: .9rem;
align-items: flex-start;
animation: upwarn-in .35s var(--easing);
}
@keyframes upwarn-in {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.upload-warn.shake {
animation: upwarn-shake .55s var(--easing);
}
@keyframes upwarn-shake {
0%, 100% { transform: translateX(0); }
20% { transform: translateX(-6px); }
40% { transform: translateX(5px); }
60% { transform: translateX(-4px); }
80% { transform: translateX(3px); }
}
.upload-warn .uw-icon {
width: 36px; height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, #fbbf24, #f59e0b);
color: #fff;
display: grid; place-items: center;
font-size: 1.1rem;
flex-shrink: 0;
box-shadow: 0 6px 14px rgba(251, 191, 36, .35);
}
.upload-warn .uw-body {
flex: 1;
display: flex;
flex-direction: column;
gap: .55rem;
}
.upload-warn .uw-title {
font-weight: 700;
color: var(--text);
font-size: .96rem;
}
.upload-warn .uw-text {
font-size: .86rem;
color: var(--text-2);
line-height: 1.5;
}
.upload-warn .uw-text small {
display: inline-block;
color: var(--text-3);
font-size: .76rem;
margin-top: 2px;
}
.upload-warn .uw-actions {
display: flex;
gap: .55rem;
flex-wrap: wrap;
margin-top: .25rem;
}
.upload-warn .uw-btn {
padding: .55rem 1rem;
border-radius: 999px;
font-size: .82rem;
font-weight: 600;
cursor: pointer;
border: none;
transition: transform .25s var(--easing), box-shadow .25s var(--easing), border-color .25s var(--easing), background-color .25s var(--easing), color .25s var(--easing), opacity .25s var(--easing);
}
.upload-warn .uw-btn.primary {
background: linear-gradient(135deg, var(--purple-500), var(--purple-700));
color: #fff;
box-shadow: 0 6px 14px rgba(124, 58, 237, .35);
}
.upload-warn .uw-btn.primary:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(124, 58, 237, .5);
}
.upload-warn .uw-btn.ghost {
background: var(--surface);
color: var(--text);
border: 1.5px solid var(--border-2);
}
.upload-warn .uw-btn.ghost:hover {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
.upload-warn .uw-confirmed {
font-size: .82rem;
color: #16a34a;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: .35rem;
margin-top: .25rem;
}
.upload-warn.confirmed {
border-color: rgba(34, 197, 94, .4);
background: linear-gradient(135deg, rgba(34, 197, 94, .08), rgba(124, 58, 237, .04));
}
.upload-warn.confirmed .uw-icon {
background: linear-gradient(135deg, #22c55e, #16a34a);
box-shadow: 0 6px 14px rgba(34, 197, 94, .4);
}
.upload-warn.confirmed .uw-actions { display: none; }
/* hidden attr önceliği — author display:flex'i override et */
.upload-warn[hidden] { display: none; }
/* State-based pane görünürlüğü */
.upload-warn .uw-pane { display: none; gap: .9rem; align-items: flex-start; flex: 1; }
.upload-warn[data-state="under"] .uw-pane-under { display: flex; }
.upload-warn[data-state="over"] .uw-pane-over { display: flex; }
/* OVER durum için info-blue tema */
.upload-warn[data-state="over"] {
background: linear-gradient(135deg, rgba(99, 102, 241, .08), rgba(124, 58, 237, .04));
border-color: rgba(99, 102, 241, .35);
}
.upload-warn[data-state="over"] .uw-icon {
background: linear-gradient(135deg, #818cf8, #6366f1);
box-shadow: 0 6px 14px rgba(99, 102, 241, .35);
}
.upload-zone .preview-thumb {
display: block;
width: 110px; height: 110px;
margin: 0 auto .8rem;
object-fit: cover;
border-radius: 16px;
box-shadow: 0 12px 24px rgba(91, 33, 182, .25);
}
textarea.field, input.field, select.field {
width: 100%;
padding: .9rem 1.1rem;
background: var(--surface);
border: 1.5px solid var(--border-2);
border-radius: var(--radius);
color: var(--text);
font-size: .96rem;
transition: border-color .2s, box-shadow .2s;
font-family: inherit;
}
textarea.field { resize: vertical; min-height: 90px; }
input.field:focus, textarea.field:focus, select.field:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 4px rgba(124, 58, 237, .15);
}
input.field.has-error, textarea.field.has-error, select.field.has-error {
border-color: #ef4444;
background: rgba(239, 68, 68, .04);
}
input.field.has-error:focus, textarea.field.has-error:focus, select.field.has-error:focus {
box-shadow: 0 0 0 4px rgba(239, 68, 68, .15);
}
.field-msg {
display: none;
margin-top: .35rem;
font-size: .78rem;
color: #ef4444;
font-weight: 500;
line-height: 1.3;
}
.field-msg.show { display: flex; align-items: center; gap: .35rem; }
.field-msg.show::before {
content: "";
width: 14px; height: 14px; flex-shrink: 0;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-size: contain;
}
.checkout-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: .7rem;
}
@media (max-width: 720px) {
.checkout-row { grid-template-columns: 1fr; gap: .7rem; }
}
/* ============================ NAV SPECIAL (Hazır/Kendi) ============================ */
.primary-nav .nav-special {
display: inline-flex;
align-items: center;
gap: .35rem;
font-weight: 600;
}
.primary-nav .nav-special .ns-icon {
font-size: 1em;
filter: saturate(1.3);
}
.primary-nav .nav-special:hover { color: var(--accent); }
.drawer-highlight {
background: linear-gradient(135deg, rgba(167,139,250,.14), rgba(124,58,237,.08));
font-weight: 600;
border-radius: 12px;
margin-bottom: .35rem;
}
.drawer-divider {
font-size: .72rem;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--text-3);
padding: 1.1rem .6rem .35rem;
font-weight: 600;
}
/* ============================ PATH CHOICE (anasayfa 2 kart) ============================ */
.path-choice-section { padding-top: 1rem; }
.path-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
margin-top: 2rem;
}
.path-card {
position: relative;
display: block;
padding: 2.2rem 2rem 2rem;
border-radius: var(--radius-lg);
border: 2px solid var(--border);
background: var(--card-bg);
text-decoration: none;
color: inherit;
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
overflow: hidden;
}
.path-card::before {
content: "";
position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(167,139,250,.06), rgba(124,58,237,.02));
opacity: 0; transition: opacity .25s ease;
}
.path-card:hover {
transform: translateY(-6px);
box-shadow: 0 24px 60px rgba(124,58,237,.18);
border-color: var(--accent);
}
.path-card:hover::before { opacity: 1; }
.path-card > * { position: relative; z-index: 1; }
.path-card .path-emoji {
font-size: 3rem;
line-height: 1;
margin-bottom: 1rem;
display: inline-block;
}
.path-card .path-tag {
display: inline-block;
padding: .3rem .75rem;
background: linear-gradient(135deg, var(--purple-500), var(--purple-700));
color: #fff;
font-size: .72rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
border-radius: 999px;
margin-bottom: 1rem;
}
.path-card.path-own .path-tag {
background: linear-gradient(135deg, #ec4899, #db2777);
}
.path-card h3 {
font-size: 1.7rem;
margin: 0 0 .8rem;
font-weight: 800;
}
.path-card p {
color: var(--text-2);
line-height: 1.6;
margin: 0 0 1.4rem;
}
.path-features {
list-style: none;
padding: 0;
margin: 0 0 1.6rem;
display: flex;
flex-direction: column;
gap: .55rem;
}
.path-features li {
font-size: .92rem;
color: var(--text-2);
padding-left: .2rem;
}
.path-cta {
display: inline-block;
font-weight: 700;
color: var(--accent);
font-size: .98rem;
border-bottom: 2px solid transparent;
transition: border-color .2s ease;
}
.path-card:hover .path-cta { border-bottom-color: var(--accent); }
.path-card.path-own .path-cta { color: #ec4899; }
.path-card.path-own:hover .path-cta { border-bottom-color: #ec4899; }
.path-card.path-own:hover { border-color: #ec4899; }
/* ============================ VURUCU SAYFA HERO (sablonlar / kendi-tasarim) ============================ */
.page-hero {
position: relative;
padding: 2.4rem 0 2rem;
margin-top: .3rem;
margin-bottom: 1.6rem;
text-align: center;
overflow: hidden;
isolation: isolate;
}
/* Ana glow */
.page-hero::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(circle at 30% 20%, var(--ph-glow-1, color-mix(in srgb, var(--accent) 14%, transparent)) 0, transparent 45%),
radial-gradient(circle at 70% 70%, var(--ph-glow-2, color-mix(in srgb, var(--accent) 10%, transparent)) 0, transparent 50%);
z-index: 0;
pointer-events: none;
}
/* İnce dekoratif çizgi */
.page-hero::after {
content: '';
position: absolute;
bottom: 0; left: 50%;
transform: translateX(-50%);
width: min(420px, 60%);
height: 2px;
background: linear-gradient(90deg, transparent, var(--ph-line, var(--accent)), transparent);
opacity: .35;
z-index: 0;
pointer-events: none;
}
.page-hero > .container { position: relative; z-index: 2; }
/* Tema renkleri */
.page-hero.hazir {
--ph-glow-1: color-mix(in srgb, #f59e0b 20%, transparent);
--ph-glow-2: color-mix(in srgb, #ef4444 14%, transparent);
--ph-line: #f59e0b;
}
.page-hero.ozel {
--ph-glow-1: color-mix(in srgb, #ec4899 20%, transparent);
--ph-glow-2: color-mix(in srgb, #6366f1 14%, transparent);
--ph-line: #ec4899;
}
/* Floating dekoratif emoji'ler — sayfaya canlılık katar */
.ph-deco {
position: absolute;
font-size: 2.2rem;
opacity: .14;
z-index: 1;
pointer-events: none;
filter: saturate(1.2);
animation: ph-float 12s ease-in-out infinite;
}
.ph-deco.d1 { top: 18%; left: 8%; animation-delay: 0s; }
.ph-deco.d2 { top: 30%; right: 10%; animation-delay: -3s; font-size: 2.6rem; }
.ph-deco.d3 { bottom: 22%; left: 14%; animation-delay: -6s; font-size: 1.8rem; }
.ph-deco.d4 { bottom: 28%; right: 16%; animation-delay: -9s; font-size: 2.2rem; }
@keyframes ph-float {
0%, 100% { transform: translateY(0) rotate(-4deg); }
50% { transform: translateY(-12px) rotate(4deg); }
}
.ph-eyebrow {
display: inline-flex;
align-items: center;
gap: .45rem;
font-size: .76rem;
font-weight: 800;
letter-spacing: .16em;
text-transform: uppercase;
padding: .45rem 1rem;
background: linear-gradient(135deg, var(--surface), color-mix(in srgb, var(--ph-line, var(--accent)) 8%, var(--surface)));
color: var(--accent);
border: 1px solid color-mix(in srgb, var(--ph-line, var(--accent)) 25%, transparent);
border-radius: 999px;
margin-bottom: 1rem;
box-shadow: 0 6px 18px color-mix(in srgb, var(--ph-line, var(--accent)) 18%, transparent);
position: relative;
}
.ph-eyebrow::before {
content: '';
position: absolute;
inset: -2px;
border-radius: 999px;
background: linear-gradient(135deg, var(--ph-line, var(--accent)), transparent 70%);
opacity: .25;
z-index: -1;
filter: blur(6px);
animation: ph-eyebrow-glow 3s ease-in-out infinite;
}
@keyframes ph-eyebrow-glow {
0%, 100% { opacity: .15; }
50% { opacity: .35; }
}
.page-hero.hazir .ph-eyebrow { color: #f59e0b; }
.page-hero.ozel .ph-eyebrow { color: #ec4899; }
.ph-title {
font-size: clamp(2rem, 4.2vw, 3.2rem);
font-weight: 800;
margin: 0 0 .65rem;
letter-spacing: -.025em;
color: var(--text);
line-height: 1.1;
}
.ph-title .accent {
background: linear-gradient(135deg, var(--ph-line, var(--accent)), color-mix(in srgb, var(--ph-line, var(--accent)) 55%, #1a0033));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
position: relative;
display: inline-block;
}
.ph-sub {
font-size: clamp(.98rem, 1.4vw, 1.12rem);
color: var(--text-2);
max-width: 680px;
margin: 0 auto .9rem;
line-height: 1.55;
}
/* Perks 3'lü mini-pill grid — eskiden tek pill'di */
.ph-perks {
display: inline-flex;
align-items: center;
gap: .4rem;
flex-wrap: wrap;
justify-content: center;
margin-top: 0;
padding: 0;
background: transparent;
border-radius: 0;
}
.ph-perk {
display: inline-flex;
align-items: center;
gap: .4rem;
padding: .45rem .85rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 999px;
font-size: .82rem;
color: var(--text-2);
font-weight: 600;
letter-spacing: .01em;
box-shadow: 0 2px 8px color-mix(in srgb, var(--ph-line, var(--accent)) 6%, transparent);
transition: transform .2s ease-out, box-shadow .2s ease-out, border-color .2s ease-out;
}
.ph-perk:hover {
transform: translateY(-2px);
border-color: color-mix(in srgb, var(--ph-line, var(--accent)) 50%, transparent);
box-shadow: 0 6px 14px color-mix(in srgb, var(--ph-line, var(--accent)) 16%, transparent);
}
.ph-perk-icon {
font-size: 1rem;
filter: saturate(1.3);
}
.ph-perk strong {
color: var(--text);
font-weight: 700;
}
/* ============================ HERO V2 — SPLIT LAYOUT (sol text + sağ glass mockup) ============================ */
.page-hero.split { padding: 3rem 0 3.2rem; }
.page-hero.split > .container {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 3rem;
align-items: center;
text-align: left;
}
.page-hero.split .ph-eyebrow,
.page-hero.split .ph-title,
.page-hero.split .ph-sub,
.page-hero.split .ph-perks { text-align: left; margin-left: 0; margin-right: 0; }
.page-hero.split .ph-perks { justify-content: flex-start; }
.page-hero.split .ph-sub { margin: 0 0 1rem; max-width: 520px; }
/* Sağ taraf — glass card showcase */
.ph-visual {
position: relative;
height: 340px;
perspective: 1200px;
}
.ph-mock {
position: absolute;
display: flex;
align-items: center;
gap: .85rem;
padding: 1rem 1.25rem;
background: color-mix(in srgb, #fff 90%, transparent);
border: 1px solid color-mix(in srgb, var(--ph-line, var(--accent)) 18%, transparent);
border-radius: 18px;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
box-shadow:
0 24px 50px color-mix(in srgb, var(--ph-line, var(--accent)) 22%, transparent),
0 4px 12px rgba(15, 23, 42, .08);
white-space: nowrap;
animation: ph-mock-float 9s ease-in-out infinite;
}
html[data-theme="dark"] .ph-mock {
background: color-mix(in srgb, #1a0033 65%, transparent);
border-color: color-mix(in srgb, var(--ph-line, var(--accent)) 30%, transparent);
}
.ph-mock-emoji {
width: 50px; height: 50px;
border-radius: 14px;
display: inline-flex; align-items: center; justify-content: center;
font-size: 1.7rem;
background: linear-gradient(135deg, color-mix(in srgb, var(--mc-color, var(--ph-line)) 22%, transparent), color-mix(in srgb, var(--mc-color, var(--ph-line)) 6%, transparent));
flex-shrink: 0;
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mc-color, var(--ph-line)) 25%, transparent);
}
.ph-mock-body { display: flex; flex-direction: column; line-height: 1.2; }
.ph-mock-name {
font-weight: 700;
font-size: .98rem;
color: var(--text);
letter-spacing: -.005em;
}
.ph-mock-tag {
font-size: .75rem;
color: var(--text-3);
margin-top: 2px;
font-weight: 500;
}
/* Konumlar — fan layout */
.ph-mock-1 {
top: 10%; right: 12%;
--mc-color: #f59e0b;
transform: rotate(-3deg);
animation-delay: 0s;
z-index: 3;
}
.ph-mock-2 {
top: 38%; right: 0;
--mc-color: #ec4899;
transform: rotate(2deg);
animation-delay: -3s;
z-index: 4;
}
.ph-mock-3 {
top: 64%; right: 18%;
--mc-color: #06b6d4;
transform: rotate(-2deg);
animation-delay: -6s;
z-index: 2;
}
/* Arkaplan dekoratif blob */
.ph-visual::before {
content: '';
position: absolute;
top: 50%; left: 50%;
width: 320px; height: 320px;
transform: translate(-50%, -50%);
background: radial-gradient(circle, color-mix(in srgb, var(--ph-line, var(--accent)) 28%, transparent) 0, transparent 65%);
border-radius: 50%;
z-index: 0;
filter: blur(20px);
pointer-events: none;
}
.ph-visual > * { position: absolute; }
@keyframes ph-mock-float {
0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
50% { transform: translateY(-8px) rotate(var(--rot, 0deg)); }
}
.ph-mock-1 { --rot: -3deg; }
.ph-mock-2 { --rot: 2deg; }
.ph-mock-3 { --rot: -2deg; }
/* Çok satan rozeti hero kartlarında */
.ph-mock-badge {
position: absolute;
top: -8px; right: -8px;
background: linear-gradient(135deg, #f59e0b, #ef4444);
color: #fff;
font-size: .65rem;
font-weight: 700;
padding: 3px 9px;
border-radius: 999px;
box-shadow: 0 4px 10px rgba(239, 68, 68, .35);
letter-spacing: .03em;
}
/* Tablet */
@media (max-width: 1024px) {
.page-hero.split > .container { grid-template-columns: 1fr; gap: 2rem; text-align: center; }
.page-hero.split .ph-eyebrow,
.page-hero.split .ph-title,
.page-hero.split .ph-sub,
.page-hero.split .ph-perks { text-align: center; }
.page-hero.split .ph-sub { margin-left: auto; margin-right: auto; }
.page-hero.split .ph-perks { justify-content: center; }
.ph-visual {
height: 280px;
max-width: 480px;
margin: 0 auto;
}
}
/* Mobile — visual gizle, kompakt hero */
@media (max-width: 720px) {
.page-hero.split { padding: 1.7rem 0 1.5rem; }
.ph-visual { display: none; }
}
/* ============================ ÜRÜN TOOLBAR (filter + sayaç) ============================ */
.products-shell { padding-bottom: 0; margin-bottom: 0; }
/* cs-banner kendi alt margin'iyle footer'dan nefes alsın — override kaldırıldı */
.products-toolbar {
display: flex;
align-items: center;
justify-content: center;
gap: 1.2rem;
padding: 1rem 1.2rem;
margin: 0 0 1.2rem;
background: var(--surface);
border: 1.5px solid var(--border);
border-radius: 18px;
box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 6%, transparent);
}
.ptb-count {
display: inline-flex;
align-items: baseline;
gap: .4rem;
flex-shrink: 0;
padding-right: 1.1rem;
border-right: 1px dashed var(--border);
}
.ptb-count strong {
font-size: 1.6rem;
font-weight: 800;
line-height: 1;
letter-spacing: -.02em;
background: linear-gradient(135deg, var(--accent), #ec4899);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.ptb-count span {
font-size: .82rem;
color: var(--text-3);
font-weight: 600;
letter-spacing: .02em;
}
.ptb-chips {
display: flex;
align-items: center;
gap: .45rem;
flex-wrap: wrap;
justify-content: center;
}
/* ============================ ÜRÜN TİPİ FİLTRE CHIP'LERİ (toolbar içi) ============================ */
.ptype-filter-wrap {
/* Eski wrap stili — geriye dönük uyumluluk için tutuluyor */
margin: 0 0 1.6rem;
padding: 1.1rem 1.2rem 1.2rem;
background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 5%, transparent), color-mix(in srgb, var(--accent) 2%, transparent));
border: 1.5px solid var(--border);
border-radius: var(--radius-lg);
}
.ptype-filter-head {
text-align: center;
margin-bottom: .9rem;
padding-bottom: .8rem;
border-bottom: 1px dashed var(--border);
}
.ptype-filter-head strong {
display: block;
font-size: 1.05rem;
font-weight: 700;
color: var(--text);
margin-bottom: .15rem;
letter-spacing: -.005em;
}
.ptype-filter-head span {
font-size: .85rem;
color: var(--text-3);
}
.ptype-filter {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: .5rem;
}
.ptype-chip {
display: inline-flex;
align-items: center;
gap: .45rem;
padding: .5rem .85rem;
background: var(--surface);
border: 1.5px solid var(--border);
border-radius: 999px;
font-size: .88rem;
font-weight: 600;
color: var(--text-2);
cursor: pointer;
transition: transform .15s ease-out, border-color .15s ease-out, background .15s ease-out, color .15s ease-out, box-shadow .15s ease-out;
white-space: nowrap;
}
.ptype-chip:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--pf-color, var(--accent)) 60%, transparent);
color: var(--text);
box-shadow: 0 4px 12px color-mix(in srgb, var(--pf-color, var(--accent)) 18%, transparent);
}
.ptype-chip .pf-emoji { font-size: 1.05rem; line-height: 1; }
.ptype-chip .pf-name { letter-spacing: .01em; }
.ptype-chip .pf-count {
display: inline-flex;
align-items: center; justify-content: center;
min-width: 22px; height: 22px;
padding: 0 .45rem;
margin-left: .15rem;
font-size: .72rem;
font-weight: 700;
background: color-mix(in srgb, var(--pf-color, var(--accent)) 12%, transparent);
color: color-mix(in srgb, var(--pf-color, var(--accent)) 80%, var(--text));
border-radius: 999px;
}
.ptype-chip.is-active {
background: linear-gradient(135deg, var(--pf-color, var(--accent)), color-mix(in srgb, var(--pf-color, var(--accent)) 70%, #1a0033));
border-color: transparent;
color: #fff;
box-shadow: 0 6px 16px color-mix(in srgb, var(--pf-color, var(--accent)) 35%, transparent);
}
.ptype-chip.is-active .pf-count {
background: rgba(255,255,255,.22);
color: #fff;
}
/* Tek tip varsa: filter yerine bilgilendirici şerit */
.ptype-info-strip {
display: flex;
align-items: center;
gap: .9rem;
padding: 1rem 1.25rem;
margin: 0 0 1.6rem;
background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 6%, transparent), color-mix(in srgb, var(--accent) 2%, transparent));
border: 1.5px solid var(--border);
border-left: 4px solid var(--accent);
border-radius: var(--radius-lg);
}
.ptype-info-strip .pis-icon {
font-size: 1.5rem;
flex-shrink: 0;
}
.ptype-info-strip .pis-text {
display: flex;
flex-direction: column;
gap: .15rem;
line-height: 1.4;
}
.ptype-info-strip .pis-text strong {
font-size: .95rem;
color: var(--text);
font-weight: 700;
}
.ptype-info-strip .pis-text span {
font-size: .85rem;
color: var(--text-2);
}
.ptype-info-strip .pis-text a {
color: var(--accent);
font-weight: 600;
text-decoration: underline;
}
.ptype-empty {
text-align: center;
padding: 3rem 1.5rem;
margin: 0 0 4rem;
background: var(--surface);
border: 1.5px dashed var(--border);
border-radius: var(--radius-lg);
color: var(--text-2);
}
.ptype-empty span[aria-hidden] { font-size: 2rem; display: block; margin-bottom: .6rem; }
.ptype-empty strong { display: block; color: var(--text); font-size: 1.1rem; margin-bottom: .3rem; }
.ptype-empty p { margin: 0; font-size: .9rem; color: var(--text-3); }
@media (max-width: 720px) {
.ptype-filter { padding: .7rem .6rem; gap: .4rem; }
.ptype-chip { padding: .42rem .7rem; font-size: .82rem; }
.ptype-chip .pf-count { min-width: 20px; height: 20px; font-size: .68rem; }
/* Mobil hero — kompakt ama vurucu */
.page-hero { padding: 1.6rem 0 1.4rem; margin-bottom: 1rem; }
.ph-eyebrow { font-size: .68rem; padding: .3rem .75rem; margin-bottom: .7rem; }
.ph-title { font-size: 1.5rem; margin-bottom: .45rem; }
.ph-sub { font-size: .9rem; padding: 0 .5rem; }
.ph-perks { display: inline-flex; font-size: .76rem; margin-top: .55rem; padding: .3rem .7rem; }
.ph-deco { font-size: 1.6rem !important; opacity: .1; }
.ph-deco.d2 { font-size: 1.9rem !important; }
/* Mobil toolbar — sayaç üst, chip'ler altta GRID (yatay scroll yok) */
.products-toolbar {
flex-direction: column;
align-items: stretch;
gap: .8rem;
padding: .9rem .85rem;
border-radius: 16px;
}
.ptb-count {
border-right: none;
border-bottom: 1px dashed var(--border);
padding-right: 0;
padding-bottom: .65rem;
justify-content: center;
}
.ptb-count strong { font-size: 1.4rem; }
/* Flex wrap + justify-center: son tek chip de ortalanır */
.ptb-chips {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: .4rem;
overflow: visible;
}
.ptb-chips .ptype-chip {
flex: 0 0 calc(50% - .2rem);
justify-content: flex-start;
gap: .3rem;
padding: .48rem .55rem;
font-size: .74rem;
min-width: 0;
}
.ptb-chips .ptype-chip[data-ptype="all"] {
flex: 0 0 100%;
justify-content: center;
padding: .68rem .9rem;
font-size: .92rem;
font-weight: 700;
gap: .4rem;
}
.ptb-chips .ptype-chip .pf-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
min-width: 0;
}
.ptb-chips .ptype-chip .pf-count {
margin-left: auto;
flex-shrink: 0;
min-width: 18px;
height: 18px;
font-size: .65rem;
padding: 0 .3rem;
}
.ptb-chips .ptype-chip .pf-emoji { font-size: .95rem; }
}
@media (max-width: 480px) {
.ph-deco { display: none; }
}
/* Tablet — chip'ler ortalı wrap */
@media (min-width: 721px) and (max-width: 1024px) {
.ptb-chips { flex-wrap: wrap; }
}
/* ============================ FİYAT BOŞ DURUMU ============================ */
.pc-price-empty {
display: inline-flex;
align-items: center;
gap: .3rem;
font-size: .82rem;
font-weight: 600;
color: var(--text-3);
font-style: italic;
padding: .25rem .6rem;
background: var(--surface);
border: 1px dashed var(--border);
border-radius: 999px;
}
.pc-price-empty::before { content: '⏳'; font-style: normal; }
/* ============================ NASIL ÇALIŞIR — MİNİ İNLİNE RİBBON (üst) ============================ */
.how-mini {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 1.4rem;
padding: .85rem 1.2rem;
margin: 0 0 1rem;
background: linear-gradient(135deg, color-mix(in srgb, var(--hm-color, var(--accent)) 8%, var(--surface)), color-mix(in srgb, var(--hm-color, var(--accent)) 3%, var(--surface)));
border: 1.5px solid color-mix(in srgb, var(--hm-color, var(--accent)) 18%, var(--border));
border-radius: 14px;
}
.how-mini-step {
display: inline-flex;
align-items: center;
gap: .55rem;
font-size: .88rem;
font-weight: 600;
color: var(--text);
letter-spacing: -.005em;
}
.how-mini-num {
width: 26px; height: 26px;
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--hm-color, var(--accent)), color-mix(in srgb, var(--hm-color, var(--accent)) 60%, #1a0033));
color: #fff;
font-weight: 700;
font-size: .78rem;
flex-shrink: 0;
box-shadow: 0 4px 10px color-mix(in srgb, var(--hm-color, var(--accent)) 30%, transparent);
}
.how-mini-emoji { font-size: 1.05rem; }
.how-mini-arrow {
color: color-mix(in srgb, var(--hm-color, var(--accent)) 50%, var(--text-3));
font-size: 1.15rem;
font-weight: 600;
}
.page-hero.hazir + .container .how-mini { --hm-color: #f59e0b; }
.page-hero.ozel + .container .how-mini { --hm-color: #ec4899; }
@media (max-width: 720px) {
.how-mini {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: .55rem;
padding: .8rem .65rem;
border-radius: 16px;
flex-wrap: initial;
position: relative;
background: var(--surface);
border: 1.5px solid var(--border);
}
.how-mini-step {
flex-direction: column;
align-items: center;
text-align: center;
gap: .4rem;
font-size: .72rem;
font-weight: 700;
line-height: 1.2;
padding: .8rem .4rem .65rem;
background: linear-gradient(180deg, color-mix(in srgb, var(--hm-color, var(--accent)) 12%, var(--surface)), var(--surface));
border: 1.5px solid color-mix(in srgb, var(--hm-color, var(--accent)) 22%, transparent);
border-radius: 12px;
box-shadow: 0 4px 10px color-mix(in srgb, var(--hm-color, var(--accent)) 12%, transparent);
position: relative;
z-index: 1;
color: var(--text);
}
.how-mini-num {
position: absolute;
top: -8px; right: -6px;
width: 22px; height: 22px;
font-size: .68rem;
box-shadow: 0 4px 10px color-mix(in srgb, var(--hm-color, var(--accent)) 35%, transparent), 0 0 0 2px var(--surface);
}
.how-mini-emoji {
font-size: 1.7rem;
line-height: 1;
margin-top: .1rem;
margin-bottom: .15rem;
filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--hm-color, var(--accent)) 30%, transparent));
}
.how-mini-arrow { display: none; }
}
/* ============================ CROSS-SELL BANNER (vurucu) ============================ */
.cs-banner {
display: flex;
align-items: center;
gap: 1.4rem;
padding: 1.4rem 1.6rem;
margin: 2.5rem 0; /* Üst+alt simetrik — kt-faq 2rem üst margin ile collapse → 2.5rem net */
background: linear-gradient(135deg, var(--cs-grad-1, #6366f1), var(--cs-grad-2, #ec4899));
border-radius: 22px;
color: #fff;
position: relative;
overflow: hidden;
box-shadow: 0 10px 30px color-mix(in srgb, var(--cs-grad-2, #ec4899) 25%, transparent);
}
.cs-banner::before {
content: '';
position: absolute;
top: -40%; right: -10%;
width: 280px; height: 280px;
background: radial-gradient(circle, rgba(255,255,255,.18), transparent 60%);
pointer-events: none;
}
.cs-banner-icon {
font-size: 2.4rem;
flex-shrink: 0;
filter: drop-shadow(0 6px 14px rgba(0,0,0,.25));
position: relative;
z-index: 1;
}
.cs-banner-text {
flex: 1;
position: relative;
z-index: 1;
}
.cs-banner-text strong {
color: #fff;
font-size: 1.15rem;
font-weight: 800;
display: block;
margin-bottom: .2rem;
letter-spacing: -.01em;
}
.cs-banner-text span {
color: rgba(255,255,255,.88);
font-size: .92rem;
line-height: 1.4;
}
.cs-banner-cta {
display: inline-flex;
align-items: center;
gap: .5rem;
background: #fff;
color: var(--cs-grad-2, #ec4899);
padding: .8rem 1.4rem;
border-radius: 999px;
font-weight: 700;
font-size: .92rem;
text-decoration: none;
white-space: nowrap;
flex-shrink: 0;
box-shadow: 0 6px 16px rgba(0,0,0,.18);
transition: transform .2s ease-out, box-shadow .2s ease-out;
position: relative;
z-index: 1;
}
.cs-banner-cta:hover {
transform: translateY(-2px);
box-shadow: 0 10px 22px rgba(0,0,0,.25);
color: var(--cs-grad-2, #ec4899);
}
@media (max-width: 720px) {
.cs-banner {
flex-direction: column;
align-items: stretch;
text-align: center;
gap: .9rem;
padding: 1.2rem 1.1rem;
margin: 2rem 0; /* Mobil simetrik */
border-radius: 18px;
}
.cs-banner-icon { font-size: 2rem; }
.cs-banner-text strong { font-size: 1rem; }
.cs-banner-text span { font-size: .85rem; }
.cs-banner-cta { justify-content: center; }
}
/* ============================ NASIL ÇALIŞIR — COLLAPSIBLE BLOK (eski, hala mevcut sayfalarda) ============================ */
.how-block {
margin: 2rem 0 3rem;
background: var(--surface);
border: 1.5px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
}
.how-block summary {
display: flex;
align-items: center;
gap: .9rem;
padding: 1rem 1.2rem;
cursor: pointer;
list-style: none;
user-select: none;
transition: background .2s ease-out;
}
.how-block summary::-webkit-details-marker { display: none; }
.how-block summary:hover { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.how-block .hb-icon { font-size: 1.4rem; flex-shrink: 0; }
.how-block .hb-title {
flex: 1;
font-size: .98rem;
font-weight: 700;
color: var(--text);
line-height: 1.3;
}
.how-block .hb-title small {
display: block;
font-size: .82rem;
font-weight: 400;
color: var(--text-3);
margin-top: .15rem;
}
.how-block .hb-caret {
font-size: 1.2rem;
color: var(--text-3);
transition: transform .2s ease-out;
flex-shrink: 0;
}
.how-block[open] .hb-caret { transform: rotate(180deg); }
.how-block .hb-body {
padding: 0 1.2rem 1.2rem;
border-top: 1px dashed var(--border);
margin-top: .2rem;
padding-top: 1.2rem;
}
.how-block .hb-body .how-strip {
margin: 0 0 1rem;
}
.how-block .hb-note {
padding: .8rem 1rem;
background: linear-gradient(135deg, rgba(167,139,250,.08), rgba(124,58,237,.04));
border-left: 3px solid var(--accent);
border-radius: 8px;
font-size: .87rem;
color: var(--text-2);
line-height: 1.5;
}
.how-block .hb-note strong { color: var(--text); display: block; margin-bottom: .25rem; }
/* ============================ HOW STRIP (3 adım) ============================ */
.how-strip {
display: flex;
align-items: center;
justify-content: center;
gap: .75rem;
padding: 1.4rem 1.4rem;
background: linear-gradient(135deg, rgba(167,139,250,.08), rgba(124,58,237,.04));
border: 1.5px solid var(--border);
border-radius: var(--radius-lg);
margin-top: 2.6rem;
margin-bottom: 2.2rem;
flex-wrap: wrap;
}
.how-step {
display: flex;
align-items: center;
gap: .85rem;
padding: .35rem .8rem;
}
.how-num {
width: 28px; height: 28px;
border-radius: 50%;
background: var(--accent);
color: #fff;
display: inline-flex;
align-items: center; justify-content: center;
font-weight: 800;
font-size: .85rem;
flex-shrink: 0;
}
.how-icon { font-size: 1.6rem; line-height: 1; }
.how-text { display: flex; flex-direction: column; line-height: 1.3; }
.how-text strong { font-size: .98rem; font-weight: 700; }
.how-text span { font-size: .82rem; color: var(--text-3); }
.how-arrow { color: var(--accent); font-size: 1.5rem; opacity: .5; }
/* ============================ PRODUCT CARD — şablon/own farklılaştırma ============================ */
.pc-tag.template {
background: linear-gradient(135deg, #a78bfa, #7c3aed);
color: #fff;
}
.pc-tag.own {
background: linear-gradient(135deg, #ec4899, #db2777);
color: #fff;
}
.pc-cat-pill {
display: inline-block;
padding: .25rem .65rem;
background: var(--surface);
border-radius: 999px;
font-size: .72rem;
font-weight: 600;
color: var(--text-3);
margin-bottom: .55rem;
}
/* ============================ TPL PREVIEW NOTE (hazır şablon bilgilendirmesi) ============================ */
.tpl-preview-note {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1.1rem 1.3rem;
margin: 0 0 1.6rem;
background: linear-gradient(135deg, rgba(167,139,250,.10), rgba(124,58,237,.04));
border: 1.5px solid rgba(167,139,250,.4);
border-radius: var(--radius);
position: relative;
overflow: hidden;
}
.tpl-preview-note::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 4px;
background: linear-gradient(180deg, var(--purple-500), var(--purple-700));
}
.tpl-preview-note .tn-icon {
font-size: 1.6rem;
line-height: 1;
flex-shrink: 0;
margin-top: .15rem;
}
.tpl-preview-note .tn-body { flex: 1; }
.tpl-preview-note .tn-body strong {
display: block;
font-size: 1rem;
margin-bottom: .35rem;
color: var(--text);
}
.tpl-preview-note .tn-body p {
margin: 0;
font-size: .88rem;
line-height: 1.55;
color: var(--text-2);
}
.tpl-preview-note.compact { padding: .9rem 1.1rem; margin-bottom: 2rem; }
.tpl-preview-note.compact .tn-body strong { font-size: .92rem; }
.tpl-preview-note.compact .tn-body p { font-size: .82rem; }
/* Ürün başlığında "Hazır Tasarım" rozeti */
.pd-tpl-badge {
display: inline-flex;
align-items: center;
gap: .25rem;
margin-left: .5rem;
padding: .25rem .65rem;
background: linear-gradient(135deg, var(--purple-500), var(--purple-700));
color: #fff;
font-size: .72rem;
font-weight: 700;
letter-spacing: .04em;
border-radius: 999px;
vertical-align: middle;
text-transform: none;
}
/* Ürün tip rozeti (kupa, puzzle vs.) */
.pd-type-badge {
display: inline-flex;
align-items: center;
gap: .25rem;
margin-left: .5rem;
padding: .22rem .6rem;
background: rgba(139,92,246,.12);
color: var(--accent);
border: 1px solid rgba(139,92,246,.28);
font-size: .72rem;
font-weight: 600;
letter-spacing: .03em;
border-radius: 999px;
vertical-align: middle;
text-transform: uppercase;
}
/* === Non-magnet: galeri makul yükseklikte — oklar erişilebilir, layout dengeli === */
.product-detail.non-magnet .pd-gallery {
aspect-ratio: 1 / 1;
max-height: 520px;
width: 100%;
margin: 0 auto;
}
@media (max-width: 880px) {
.product-detail.non-magnet .pd-gallery {
max-height: 380px;
aspect-ratio: auto;
height: 380px;
}
}
@media (max-width: 480px) {
.product-detail.non-magnet .pd-gallery {
max-height: 320px;
height: 320px;
}
}
/* Magnet olmayan ürünler için galeri kartı (kupa, puzzle vs.) — görsel tam alanı doldurur */
.pd-gallery.type-kupa,
.pd-gallery.type-puzzle,
.pd-gallery.type-bardak_altligi,
.pd-gallery.type-foto_karton,
.pd-gallery.type-bebek_onlugu,
.pd-gallery.type-kumbara,
.pd-gallery.type-set {
padding: 0;
}
.pd-gallery.type-kupa .pd-product-card,
.pd-gallery.type-puzzle .pd-product-card,
.pd-gallery.type-bardak_altligi .pd-product-card,
.pd-gallery.type-foto_karton .pd-product-card,
.pd-gallery.type-bebek_onlugu .pd-product-card,
.pd-gallery.type-kumbara .pd-product-card,
.pd-gallery.type-set .pd-product-card {
position: relative;
width: 100%;
height: 100%;
display: block;
}
.pd-product-card .pd-print-area {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border-radius: 0;
overflow: hidden;
background: transparent;
}
.pd-product-card .pd-print-area svg,
.pd-product-card .pd-print-area .pd-cover-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* ===== Ürün özellikleri (açıklama altında, entegre) ===== */
.pd-specs-inline {
margin: 1.2rem 0 1.5rem;
padding: 1rem 1.2rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
}
.pd-specs-title {
font-size: .82rem;
margin: 0 0 .7rem;
color: var(--text-3);
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
}
.pd-specs-grid {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 1.5rem;
row-gap: 0;
}
.pd-spec-row {
display: grid;
grid-template-columns: 22px minmax(0, max-content) minmax(0, 1fr);
align-items: center;
gap: .55rem;
padding: .5rem .15rem;
border-bottom: 1px dashed var(--border);
font-size: .85rem;
}
/* Tek sütun için son satır border'sız; çift sütun için son iki satır border'sız */
.pd-specs-grid .pd-spec-row:last-child,
.pd-specs-grid .pd-spec-row:nth-last-child(2):not(:nth-child(odd)) { border-bottom: 0; }
.pd-spec-ic {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: .95rem;
}
.pd-spec-key { color: var(--text-2); font-size: .82rem; white-space: nowrap; }
.pd-spec-val { color: var(--text); font-weight: 600; text-align: left; font-size: .85rem; padding-left: .35rem; }
@media (max-width: 720px) {
.pd-specs-grid { grid-template-columns: 1fr; }
.pd-specs-grid .pd-spec-row { border-bottom: 1px dashed var(--border) !important; }
.pd-specs-grid .pd-spec-row:last-child { border-bottom: 0 !important; }
}
/* Kullanım talimatı — kapalı/açılır details */
.pd-usage-details {
margin: 0 0 1.5rem;
border: 1px solid rgba(139,92,246,.2);
border-radius: 12px;
background: linear-gradient(135deg, rgba(139,92,246,.04), rgba(236,72,153,.03));
overflow: hidden;
}
.pd-usage-details > summary {
list-style: none;
padding: .85rem 1.1rem;
cursor: pointer;
font-size: .88rem;
font-weight: 600;
color: var(--text);
user-select: none;
display: flex;
align-items: center;
justify-content: space-between;
}
.pd-usage-details > summary::-webkit-details-marker { display: none; }
.pd-usage-details > summary::after {
content: '▾';
color: var(--text-3);
transition: transform .2s;
}
.pd-usage-details[open] > summary::after { transform: rotate(180deg); }
.pd-usage-details > summary:hover { background: rgba(139,92,246,.05); }
.pd-usage-body {
padding: 0 1.1rem 1rem;
font-size: .87rem;
color: var(--text-2);
line-height: 1.55;
}
.pd-usage-body p { margin: 0 0 .5rem; }
.pd-usage-body p:last-child { margin: 0; }
.pd-usage-body ul,
.pd-usage-body ol { margin: .3rem 0 .5rem 1.2rem; padding: 0; }
/* Açıklama (Quill HTML render) — collapse + fade + "Devamını oku" */
.pd-desc-wrap { position: relative; margin-bottom: 1.5rem; }
.pd-desc {
color: var(--text-2);
font-size: .95rem;
line-height: 1.6;
word-break: break-word;
overflow-wrap: anywhere;
max-width: 100%;
overflow: hidden;
transition: max-height .35s ease;
}
.pd-desc-wrap[data-collapsed="1"] .pd-desc {
max-height: 9.6em; /* ~6 satır */
-webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
}
.pd-desc-wrap[data-collapsed="0"] .pd-desc { max-height: none; }
.pd-desc * { max-width: 100%; word-break: break-word; overflow-wrap: anywhere; }
.pd-desc p { margin: 0 0 .6rem; }
.pd-desc p:last-child { margin: 0; }
.pd-desc h2, .pd-desc h3 { color: var(--text); margin: 1rem 0 .5rem; font-weight: 700; }
.pd-desc ul, .pd-desc ol { margin: .4rem 0 .6rem 1.4rem; padding: 0; }
.pd-desc strong { color: var(--text); }
.pd-desc a { color: var(--accent); text-decoration: underline; }
.pd-desc-toggle {
display: inline-flex;
align-items: center;
gap: .4rem;
margin-top: .6rem;
padding: .55rem 1.1rem;
background: var(--bg-soft, #f5f3ff);
color: var(--accent);
border: 1.5px solid color-mix(in srgb, var(--accent) 22%, transparent);
border-radius: 999px;
font-size: .85rem;
font-weight: 600;
cursor: pointer;
transition: background .2s ease, border-color .2s ease, transform .15s ease;
}
.pd-desc-toggle:hover {
background: color-mix(in srgb, var(--accent) 12%, transparent);
border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.pd-desc-toggle:active { transform: scale(.97); }
.pd-desc-toggle svg { transition: transform .25s ease; }
.pd-desc-wrap[data-collapsed="0"] .pd-desc-toggle svg { transform: rotate(180deg); }
/* ===== Per-unit kişiselleştirme kartları ===== */
.pd-units-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1rem;
}
.pd-unit-card {
border: 1.5px solid var(--border);
border-radius: 14px;
background: var(--surface);
padding: 1rem;
display: flex;
flex-direction: column;
gap: .8rem;
transition: border-color .15s, box-shadow .15s, transform .15s;
}
.pd-unit-card:hover {
border-color: var(--purple-300, #c4b5fd);
box-shadow: 0 4px 14px rgba(124, 58, 237, .08);
}
.pd-unit-head {
display: flex;
align-items: center;
gap: .6rem;
padding-bottom: .7rem;
border-bottom: 1.5px dashed var(--border);
}
.pd-unit-head strong {
font-size: 1rem;
font-weight: 700;
color: var(--text);
}
.pd-unit-num {
flex-shrink: 0;
width: 30px; height: 30px;
border-radius: 50%;
background: linear-gradient(135deg, var(--purple-500, #8b5cf6), var(--purple-700, #6d28d9));
color: #fff;
font-weight: 700;
font-size: .9rem;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 6px rgba(124, 58, 237, .25);
}
.pd-unit-num-single {
background: linear-gradient(135deg, #ec4899, #db2777);
font-size: .9rem;
}
.pd-unit-body {
display: flex;
flex-direction: column;
gap: .8rem;
}
/* Tek photo field: ferah upload-zone tarzı (geniş, ortalı, mor yuvarlak icon) */
.pd-unit-photos {
display: flex;
flex-wrap: wrap;
gap: .55rem;
}
.pd-unit-photos > .pd-pf-slot {
width: 100%;
max-width: 100%;
height: 180px;
aspect-ratio: auto;
flex: 0 0 auto;
border-radius: 14px;
border-width: 2px;
background: rgba(139, 92, 246, .03);
}
.pd-unit-photos > .pd-pf-slot .pd-pf-slot-empty {
gap: .55rem;
padding: 1rem;
}
.pd-unit-photos > .pd-pf-slot .pd-pf-slot-empty svg {
width: 26px; height: 26px;
padding: 12px;
box-sizing: content-box;
background: var(--accent);
color: #fff;
border-radius: 50%;
}
.pd-unit-photos > .pd-pf-slot .pd-pf-slot-text {
font-size: 1rem;
margin-top: .2rem;
}
.pd-unit-photos > .pd-pf-slot .pd-pf-slot-empty small {
font-size: .78rem;
}
/* Çoklu field (kupa sol/sağ gibi): kompakt 120x120 grid */
.pd-unit-photos.multi {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: .55rem;
}
.pd-unit-photos.multi > .pd-pf-slot {
width: auto;
max-width: none;
height: auto;
aspect-ratio: 1 / 1;
border-radius: 10px;
border-width: 1.5px;
}
.pd-unit-photos.multi > .pd-pf-slot .pd-pf-slot-empty svg {
width: 20px; height: 20px;
padding: 0;
background: transparent;
color: var(--accent);
border-radius: 0;
}
.pd-unit-photos.multi > .pd-pf-slot .pd-pf-slot-text {
font-size: .78rem;
}
.pd-unit-texts {
display: flex;
flex-direction: column;
gap: .5rem;
}
.pd-unit-texts .pd-tf-row {
display: flex;
flex-direction: column;
gap: .25rem;
}
/* Eski (artık kullanılmayan) per-field kartlar — geri uyumluluk için kalıyor */
.pd-pf-grid {
display: grid;
grid-template-columns: 1fr;
gap: .8rem;
}
.pd-pf-grid.multi {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.pd-pf-card {
border: 1.5px solid var(--border);
border-radius: 12px;
padding: .9rem;
background: var(--surface);
display: flex;
flex-direction: column;
gap: .65rem;
transition: border-color .15s, box-shadow .15s;
}
.pd-pf-card:hover { border-color: var(--accent); }
.pd-pf-card-head {
display: flex;
align-items: flex-start;
gap: .6rem;
}
.pd-pf-num {
flex-shrink: 0;
width: 24px; height: 24px;
border-radius: 50%;
background: linear-gradient(135deg, var(--purple-500), var(--purple-700));
color: #fff;
font-weight: 700;
font-size: .78rem;
display: inline-flex;
align-items: center;
justify-content: center;
}
.pd-pf-meta { flex: 1; min-width: 0; }
.pd-pf-meta strong {
display: block;
font-size: .88rem;
color: var(--text);
line-height: 1.3;
}
.pd-pf-meta small {
display: block;
margin-top: .15rem;
font-size: .76rem;
color: var(--text-3);
line-height: 1.35;
}
.pd-pf-req {
color: var(--accent);
font-weight: 700;
font-size: 1rem;
margin-left: .15rem;
}
.pd-pf-drop {
position: relative;
display: block;
cursor: pointer;
border: 1.5px dashed rgba(139, 92, 246, .35);
border-radius: 10px;
padding: 1rem .8rem;
background: rgba(139, 92, 246, .04);
transition: border-color .15s, background .15s;
}
.pd-pf-drop:hover {
border-color: var(--accent);
background: rgba(139, 92, 246, .08);
}
.pd-pf-drop input[type=file] {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
}
.pd-pf-drop-content {
display: flex;
flex-direction: column;
align-items: center;
gap: .25rem;
color: var(--text-2);
}
.pd-pf-drop-content svg { color: var(--accent); }
.pd-pf-drop-text { font-size: .85rem; font-weight: 600; }
.pd-pf-drop-content small { font-size: .72rem; color: var(--text-3); }
.pd-pf-thumbs {
display: flex;
flex-wrap: wrap;
gap: .35rem;
}
.pd-pf-thumbs .thumb {
width: 60px;
height: 60px;
border-radius: 8px;
overflow: hidden;
background-size: cover;
background-position: center;
border: 1.5px solid var(--border);
}
/* ===== Foto slotları (her slot = 1 foto) ===== */
.pd-pf-slots {
display: grid;
grid-template-columns: repeat(auto-fill, 110px);
gap: .5rem;
justify-content: start;
}
.pd-pf-slot {
position: relative;
aspect-ratio: 1 / 1;
border: 1.5px dashed rgba(139, 92, 246, .35);
border-radius: 10px;
background: rgba(139, 92, 246, .04);
cursor: pointer;
overflow: hidden;
display: block;
transition: border-color .15s, background .15s;
}
.pd-pf-slot:hover {
border-color: var(--accent);
background: rgba(139, 92, 246, .08);
}
.pd-pf-slot input[type=file] {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
z-index: 1;
}
.pd-pf-slot-empty {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: .25rem;
color: var(--text-2);
text-align: center;
padding: .5rem;
}
.pd-pf-slot-empty svg { color: var(--accent); }
.pd-pf-slot-text {
font-size: .78rem;
font-weight: 600;
line-height: 1.2;
}
.pd-pf-slot-empty small {
font-size: .68rem;
color: var(--text-3);
}
.pd-pf-slot-thumb {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
border-radius: 8px;
}
.pd-pf-slot-rm {
position: absolute;
top: .35rem;
right: .35rem;
width: 24px; height: 24px;
border-radius: 50%;
border: none;
background: rgba(0,0,0,.65);
color: #fff;
font-size: 1.1rem;
line-height: 1;
cursor: pointer;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
transition: background .15s;
}
.pd-pf-slot-rm:hover { background: rgba(220, 38, 38, .9); }
/* ===== Çoklu adet foto modu (ask paneli) ===== */
.pd-photo-mode-pick { gap: .6rem; }
.pd-photo-mode-pick .size-content { padding-bottom: .15rem; }
.pd-photo-mode-ex {
display: block;
margin-top: .35rem;
font-size: .72rem;
color: var(--text-3);
font-style: italic;
line-height: 1.35;
}
.pd-photo-mode-hint {
display: block;
margin-top: .65rem;
padding: .55rem .7rem;
background: rgba(139, 92, 246, .07);
border-left: 3px solid var(--accent);
border-radius: 6px;
color: var(--text-2);
font-size: .82rem;
line-height: 1.4;
}
/* Yazı alanları — kompakt liste */
.pd-tf-list {
display: flex;
flex-direction: column;
gap: .7rem;
}
.pd-tf-row {
border: 1.5px solid var(--border);
border-radius: 10px;
padding: .7rem .85rem;
background: var(--surface);
}
.pd-tf-label {
display: flex;
align-items: center;
gap: .4rem;
margin-bottom: .45rem;
font-size: .85rem;
color: var(--text);
}
.pd-tf-icon { font-size: .95rem; }
.pd-tf-row .field {
width: 100%;
padding: .55rem .7rem;
border: 1.5px solid var(--border);
border-radius: 8px;
font-size: .9rem;
background: var(--bg);
color: var(--text);
}
.pd-tf-row .field:focus {
outline: 0;
border-color: var(--accent);
}
.pd-tf-hint {
display: block;
margin-top: .3rem;
font-size: .72rem;
color: var(--text-3);
}
/* ============================ CROSS-SELL PATH SWITCH ============================ */
.path-switch {
display: flex;
align-items: center;
gap: 1.4rem;
padding: 1.6rem 1.8rem;
background: linear-gradient(135deg, rgba(167,139,250,.08), rgba(124,58,237,.04));
border: 1.5px dashed var(--accent);
border-radius: var(--radius-lg);
margin-bottom: 3rem;
}
.path-switch .ps-icon { font-size: 2.2rem; line-height: 1; flex-shrink: 0; }
.path-switch .ps-text { flex: 1; }
.path-switch .ps-text strong { display: block; font-size: 1.05rem; margin-bottom: .25rem; }
.path-switch .ps-text span { color: var(--text-2); font-size: .92rem; line-height: 1.5; }
@media (max-width: 720px) {
.path-switch { flex-direction: column; text-align: center; padding: 1.4rem; }
.path-grid { grid-template-columns: 1fr; gap: 1rem; }
.path-card { padding: 1.8rem 1.4rem 1.6rem; }
.path-card h3 { font-size: 1.4rem; }
.how-strip { flex-direction: column; align-items: stretch; padding: 1.2rem; }
.how-arrow { display: none; }
.how-step { padding: .4rem 0; }
}
/* Kupon pill (kayıt sayfasında "İLK10" rozeti — tıklayınca kopyalar) */
.coupon-pill {
display: flex; align-items: center; gap: .55rem;
width: fit-content;
margin: .25rem auto 1.4rem;
padding: .55rem .9rem .55rem .85rem;
border: 1.5px dashed var(--accent);
background: linear-gradient(135deg, rgba(167,139,250,.12), rgba(124,58,237,.08));
border-radius: 999px;
color: var(--text);
font: inherit;
cursor: pointer;
transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.coupon-pill:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(124,58,237,.18); }
.coupon-pill .cp-label { font-size: .78rem; color: var(--text-2); }
.coupon-pill .cp-code {
font-weight: 800; font-size: .92rem; letter-spacing: .04em;
color: var(--accent);
padding: .2rem .55rem;
background: rgba(255,255,255,.65);
border-radius: 999px;
}
[data-theme="dark"] .coupon-pill .cp-code { background: rgba(15,10,40,.4); }
.coupon-pill .cp-icon { display: inline-flex; color: var(--text-3); }
.coupon-pill.copied { border-style: solid; border-color: #34d399; background: rgba(52,211,153,.12); }
.coupon-pill.copied .cp-icon { color: #34d399; }
.pd-actions {
display: grid;
grid-template-columns: 1fr 1fr 56px;
gap: .8rem;
margin-top: 1rem;
align-items: stretch;
}
.pd-actions .btn-primary,
.pd-actions .btn-secondary {
min-width: 0;
width: 100%;
justify-content: center;
padding: 1.1rem 1.4rem;
}
.pd-actions .icon-btn {
width: 56px;
min-width: 56px;
max-width: 56px;
height: 56px;
align-self: center;
padding: 0;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.pd-actions .icon-btn.active {
background: linear-gradient(135deg, #ec4899, #db2777);
border-color: #db2777;
color: #fff;
}
.pd-actions .icon-btn.active svg { fill: #fff; stroke: #fff; }
/* Sepete ekle — başarı durumu */
.pd-actions .btn-primary.added {
background: linear-gradient(135deg, #10b981, #059669);
border-color: #059669;
color: #fff;
cursor: default;
opacity: 1;
}
.pd-actions .btn-primary.added svg { stroke: #fff; }
.pd-actions .btn-primary.added:hover { transform: none; }
/* "Hemen al" eklendikten sonra "Sepete git" durumu — sepet aksiyonu öne çıksın */
.pd-actions .btn-secondary.go-cart {
background: linear-gradient(135deg, #7c3aed, #db2777);
border-color: transparent;
color: #fff;
font-weight: 700;
box-shadow: 0 8px 24px rgba(124, 58, 237, .35), 0 2px 6px rgba(219, 39, 119, .25);
animation: gocart-pulse 1.6s ease-in-out infinite;
position: relative;
}
.pd-actions .btn-secondary.go-cart svg { stroke: #fff; }
.pd-actions .btn-secondary.go-cart:hover {
background: linear-gradient(135deg, #8b5cf6, #ec4899);
border-color: transparent;
color: #fff;
transform: translateY(-3px);
box-shadow: 0 12px 32px rgba(124, 58, 237, .5), 0 4px 12px rgba(219, 39, 119, .35);
animation: none;
}
@keyframes gocart-pulse {
0%, 100% { box-shadow: 0 8px 24px rgba(124, 58, 237, .35), 0 2px 6px rgba(219, 39, 119, .25); }
50% { box-shadow: 0 10px 30px rgba(124, 58, 237, .55), 0 4px 12px rgba(219, 39, 119, .45); }
}
.pd-meta {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.pd-meta .meta-card {
position: relative;
display: flex;
align-items: center;
gap: .95rem;
padding: 1.05rem 1.15rem;
border-radius: 16px;
background: var(--surface);
border: 1px solid var(--border);
overflow: hidden;
transition:
transform .3s var(--easing),
border-color .3s var(--easing),
box-shadow .3s var(--easing);
}
.pd-meta .meta-card::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(124, 58, 237, .08), transparent 60%);
opacity: 0;
transition: opacity .3s;
pointer-events: none;
}
.pd-meta .meta-card::after {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: linear-gradient(180deg, var(--purple-400), var(--purple-700));
border-radius: 16px 0 0 16px;
transform: scaleY(.5);
transform-origin: center;
opacity: 0;
transition: opacity .3s, transform .3s;
}
.pd-meta .meta-card:hover {
border-color: rgba(124, 58, 237, .35);
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(124, 58, 237, .15);
}
.pd-meta .meta-card:hover::before { opacity: 1; }
.pd-meta .meta-card:hover::after { opacity: 1; transform: scaleY(1); }
.pd-meta .meta-card .mc-icon {
width: 46px;
height: 46px;
border-radius: 14px;
flex-shrink: 0;
display: grid;
place-items: center;
background: linear-gradient(135deg, var(--purple-400), var(--purple-700));
color: #fff;
box-shadow: 0 6px 14px rgba(124, 58, 237, .28);
transition: transform .3s var(--easing);
}
.pd-meta .meta-card:hover .mc-icon {
transform: rotate(-6deg) scale(1.05);
}
.pd-meta .meta-card .mc-icon svg {
width: 24px;
height: 24px;
color: #fff;
}
.pd-meta .meta-card .mc-body {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.pd-meta .meta-card .mc-body strong {
display: block;
font-weight: 700;
font-size: .98rem;
color: var(--text);
letter-spacing: -.005em;
}
/* Sadece doğrudan çocuk span'lar block — iç .st-edit gibi inline span'lar bozulmasın */
.pd-meta .meta-card .mc-body > span {
display: block;
font-size: .8rem;
color: var(--text-3);
line-height: 1.4;
}
.pd-meta .meta-card .mc-body > span .st-edit { display: inline; }
/* ============================ CART PAGE ============================ */
.cart-grid {
display: grid;
grid-template-columns: 1.7fr 1fr;
gap: 2rem;
margin: 3rem 0;
}
.cart-list { display: flex; flex-direction: column; gap: 1rem; }
.cart-item {
display: grid;
grid-template-columns: 110px 1fr auto;
gap: 1.1rem;
padding: 1.1rem;
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
align-items: center;
}
.cart-item .ci-thumb {
width: 110px; height: 110px;
border-radius: 16px;
background: linear-gradient(135deg, var(--purple-200), var(--purple-400));
overflow: hidden;
display: flex; align-items: center; justify-content: center;
}
.cart-item .ci-thumb img, .cart-item .ci-thumb svg { width: 100%; height: 100%; object-fit: cover; }
.cart-item h4 { font-size: 1rem; margin-bottom: .25rem; }
.cart-item .ci-meta { font-size: .82rem; color: var(--text-3); margin-bottom: .65rem; }
.cart-item .ci-price { font-weight: 700; color: var(--accent); font-size: 1.05rem; }
.cart-item .ci-side { display: flex; flex-direction: column; align-items: flex-end; gap: .8rem; }
.cart-item .remove-btn {
background: transparent;
border: none;
color: var(--text-3);
font-size: .82rem;
display: inline-flex; align-items: center; gap: .3rem;
transition: color .2s;
}
.cart-item .remove-btn:hover { color: #ef4444; }
/* Sepet — non-magnet kişiye özel: per-unit foto/yazı önizlemesi */
.cart-item .ci-units {
display: flex; flex-direction: column; gap: .55rem;
margin: .35rem 0 .7rem;
padding: .65rem .75rem;
background: var(--purple-50, #faf7ff);
border: 1px dashed var(--purple-200, #ddd6fe);
border-radius: 10px;
}
.cart-item .ci-unit {
display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
font-size: .82rem;
}
.cart-item .ci-unit-lbl {
font-weight: 700; color: var(--accent, #7c3aed);
letter-spacing: .03em; min-width: 64px;
}
.cart-item .ci-unit-thumbs { display: flex; gap: .35rem; align-items: center; }
.cart-item .ci-unit-thumbs img {
width: 36px; height: 36px; border-radius: 8px; object-fit: cover;
border: 1px solid var(--border);
}
.cart-item .ci-unit-more {
display: inline-grid; place-items: center;
width: 36px; height: 36px; border-radius: 8px;
background: #ede9fe; color: #5b21b6;
font-size: .72rem; font-weight: 700;
}
.cart-item .ci-unit-texts { display: flex; flex-wrap: wrap; gap: .35rem; }
.cart-item .ci-unit-text {
display: inline-block; padding: 2px 10px;
background: #fff; border: 1px solid var(--border);
border-radius: 99px; font-size: .76rem; color: var(--text-2);
max-width: 220px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
cursor: help;
}
.summary {
position: sticky; top: 100px;
padding: 1.6rem;
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
align-self: flex-start;
}
.summary h3 { font-size: 1.15rem; margin-bottom: 1rem; }
.summary-row { display: flex; justify-content: space-between; padding: .55rem 0; font-size: .94rem; color: var(--text-2); }
.summary-row.total { padding-top: 1rem; border-top: 1px solid var(--border); font-size: 1.15rem; font-weight: 700; color: var(--text); }
.summary-row.total .num { color: var(--accent); }
.coupon-row { display: flex; gap: .5rem; margin: 1rem 0; }
.coupon-row input { flex: 1; }
.coupon-row button {
padding: 0 1.2rem;
background: var(--surface);
border: 1.5px solid var(--border-2);
border-radius: var(--radius);
font-weight: 600;
}
.summary .btn-primary { width: 100%; justify-content: center; margin-top: 1rem; }
.cart-empty {
text-align: center;
padding: 3rem 2rem;
background: var(--card-bg);
border: 1px dashed var(--border-2);
border-radius: var(--radius-lg);
margin-bottom: 2.5rem; /* Footer ile arasında dengeli boşluk */
}
.cart-empty .ic {
width: 90px; height: 90px;
margin: 0 auto 1rem;
border-radius: 50%;
background: var(--surface);
display: inline-flex; align-items: center; justify-content: center;
color: var(--accent);
}
/* ============================ AUTH PAGES ============================ */
.auth-wrap {
min-height: calc(100vh - 200px);
display: grid;
place-items: center;
padding: 3rem 1.5rem;
}
.auth-card {
width: 100%;
max-width: 480px;
padding: 2.6rem 2.4rem;
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-lg);
}
.auth-card h1 { font-size: 1.7rem; text-align: center; margin-bottom: .4rem; }
.auth-card .sub { text-align: center; color: var(--text-3); margin-bottom: 1.6rem; }
.auth-card .field { margin-bottom: .8rem; }
.auth-card label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: .35rem; color: var(--text-2); }
.auth-card .btn-primary { width: 100%; justify-content: center; margin-top: .8rem; }
.auth-card .auth-foot { text-align: center; margin-top: 1.4rem; color: var(--text-3); font-size: .9rem; }
.auth-card .auth-foot a { color: var(--accent); font-weight: 600; }
.divider {
display: flex; align-items: center; gap: 1rem;
color: var(--text-3); font-size: .82rem;
margin: 1.4rem 0;
}
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.social-row { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.social-row.social-row-single { grid-template-columns: 1fr; }
.social-btn {
padding: .85rem;
border-radius: var(--radius);
border: 1.5px solid var(--border-2);
background: var(--surface);
display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
font-weight: 600;
font-size: .92rem;
color: var(--text);
transition: transform .2s, box-shadow .2s, border-color .2s, background-color .2s, color .2s, opacity .2s;
cursor: pointer;
}
.social-btn:hover { border-color: var(--accent); background: var(--bg-2); transform: translateY(-2px); }
.alert {
padding: .8rem 1rem;
border-radius: var(--radius);
font-size: .9rem;
margin-bottom: 1rem;
}
.alert.error { background: rgba(239, 68, 68, .1); color: #fca5a5; border: 1px solid rgba(239, 68, 68, .25); }
.alert.success { background: rgba(34, 197, 94, .12); color: #166534; border: 1px solid rgba(34, 197, 94, .35); font-weight: 600; }
/* ============================ CHECKOUT ADDRESS PICKER ============================ */
.ck-addr-pick {
display: grid; gap: .8rem;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
margin-bottom: .6rem;
}
.ck-addr-card {
position: relative; cursor: pointer;
background: var(--card-bg);
border: 2px solid var(--border);
border-radius: 12px;
padding: .9rem 1rem;
display: flex; flex-direction: column; gap: .35rem;
transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.ck-addr-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.ck-addr-card.is-selected {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(124,58,237,.15), 0 6px 16px rgba(124,58,237,.10);
}
.ck-addr-card.is-selected::after {
content: "✓"; position: absolute; top: 8px; right: 8px;
width: 22px; height: 22px; border-radius: 50%;
background: var(--accent); color: #fff;
display: grid; place-items: center;
font-size: 12px; font-weight: 800;
}
.ck-addr-card-head {
display: flex; align-items: center; justify-content: space-between;
min-height: 20px; margin-bottom: 2px;
}
.ck-addr-label {
font-size: .78rem; font-weight: 700; color: var(--text-2);
letter-spacing: .02em;
}
.ck-addr-def { font-size: .9rem; }
.ck-addr-card strong { font-size: .92rem; }
.ck-addr-phone {
font-size: .78rem; color: var(--text-3); margin-bottom: .2rem;
}
.ck-addr-card p {
margin: 0; font-size: .8rem; line-height: 1.5;
color: var(--text-3);
}
.ck-addr-new {
align-items: center; justify-content: center; text-align: center;
border-style: dashed; gap: .3rem;
}
.ck-addr-new-icon {
font-size: 28px; line-height: 1;
width: 38px; height: 38px; border-radius: 50%;
background: var(--surface); color: var(--text-3);
display: grid; place-items: center;
margin-bottom: .25rem;
transition: background .15s ease, color .15s ease;
}
.ck-addr-new:hover .ck-addr-new-icon {
background: var(--accent); color: #fff;
}
.ck-addr-new-hint { font-size: .75rem; color: var(--text-3); }
.ck-addr-manage {
display: inline-block; margin-top: .4rem;
font-size: .82rem; color: var(--text-3);
text-decoration: none;
transition: color .15s ease;
}
.ck-addr-manage:hover { color: var(--accent); text-decoration: underline; }
.ck-save-addr {
margin-top: .9rem; padding: .85rem 1rem;
background: var(--surface);
border: 1px solid var(--border); border-radius: 10px;
font-size: .92rem;
}
/* ============================ ADDRESSES (adreslerim) ============================ */
.addr-head {
display: flex; align-items: center; justify-content: space-between;
gap: 1rem; flex-wrap: wrap;
}
.addr-add-btn { padding: .55rem 1.1rem; font-size: .92rem; }
.addr-sub {
margin: .4rem 0 1.4rem; color: var(--text-3);
font-size: .92rem; line-height: 1.55;
}
.addr-form-card {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 1.5rem;
margin-bottom: 1.5rem;
box-shadow: 0 2px 12px rgba(0,0,0,.04);
}
.addr-form-card h3 {
margin: 0 0 1.2rem; font-size: 1.1rem;
}
.btn-ghost {
display: inline-flex; align-items: center; gap: 6px;
background: transparent; border: 1.5px solid var(--border);
color: var(--text-2); padding: .65rem 1.2rem;
border-radius: 999px; cursor: pointer; font: inherit; font-weight: 600;
text-decoration: none;
transition: border-color .15s ease, background .15s ease;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.addr-empty {
text-align: center; padding: 3rem 1rem;
background: var(--card-bg);
border: 1.5px dashed var(--border); border-radius: var(--radius-lg);
}
.addr-empty-icon { font-size: 48px; opacity: .55; margin-bottom: .8rem; }
.addr-empty h3 { margin: 0 0 .5rem; }
.addr-empty p { margin: 0 0 1.4rem; color: var(--text-3); }
.addr-list {
display: grid; gap: 1rem;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.addr-card {
position: relative;
background: var(--card-bg);
border: 1.5px solid var(--border);
border-radius: 14px;
padding: 1.1rem 1.2rem;
transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
display: flex; flex-direction: column; gap: .7rem;
}
.addr-card:hover {
border-color: var(--accent);
box-shadow: 0 6px 20px rgba(124,58,237,.10);
transform: translateY(-2px);
}
.addr-card.is-default {
border-color: var(--accent);
background: linear-gradient(180deg, rgba(167,139,250,.05), transparent);
}
.addr-card-head {
display: flex; align-items: center; justify-content: space-between;
gap: .6rem; min-height: 24px;
}
.addr-label {
display: inline-block; font-size: .8rem; font-weight: 700;
color: var(--text-2); margin-right: .4rem;
}
.addr-default-badge {
display: inline-block; font-size: .68rem; font-weight: 800;
background: var(--accent); color: #fff;
padding: 3px 9px; border-radius: 999px;
letter-spacing: .03em; text-transform: uppercase;
}
.addr-card-actions { display: flex; gap: 4px; }
.addr-action {
display: grid; place-items: center;
width: 28px; height: 28px; border-radius: 7px;
background: transparent; border: 0; cursor: pointer;
color: var(--text-3); padding: 0;
transition: background .15s ease, color .15s ease;
}
.addr-action:hover { background: rgba(124,58,237,.1); color: var(--accent); }
.addr-action.addr-del:hover { background: #fee2e2; color: #dc2626; }
.addr-card-body strong {
display: block; font-size: .98rem; margin-bottom: 2px;
}
.addr-card-body span {
display: block; font-size: .85rem; color: var(--text-3);
margin-bottom: .5rem;
}
.addr-card-body p {
margin: 0; font-size: .9rem; line-height: 1.55;
color: var(--text-2);
}
.addr-card-foot {
margin-top: auto; padding-top: .6rem;
border-top: 1px dashed var(--border);
}
.addr-default-btn {
background: transparent; border: 0; padding: 0; cursor: pointer;
font-size: .82rem; color: var(--text-3); font: inherit;
font-weight: 600;
transition: color .15s ease;
}
.addr-default-btn:hover { color: var(--accent); }
/* ============================ PROFILE / ORDERS ============================ */
.account-grid {
display: grid;
grid-template-columns: 240px 1fr;
gap: 2rem;
margin: 2.5rem 0;
}
.account-side {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 1.4rem;
position: sticky;
top: 100px;
align-self: flex-start;
}
.account-side .acc-user {
display: flex; align-items: center; gap: .8rem;
padding-bottom: 1rem;
margin-bottom: 1rem;
border-bottom: 1px solid var(--border);
}
.account-side .acc-user > div { min-width: 0; flex: 1; }
.account-side .acc-avatar {
position: relative;
flex: 0 0 48px;
width: 48px; height: 48px; border-radius: 50%;
background: linear-gradient(135deg, var(--purple-500), var(--purple-700));
color: #fff;
display: inline-flex; align-items: center; justify-content: center;
font-weight: 700;
font-size: 1.1rem;
overflow: hidden;
aspect-ratio: 1 / 1;
}
.account-side .acc-avatar img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
.account-side .acc-name {
font-weight: 600; font-size: .92rem;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.account-side .acc-mail {
font-size: .76rem; color: var(--text-3);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Avatar upload control */
.acc-avatar-edit {
position: relative;
display: flex; flex-direction: column; align-items: center; gap: .6rem;
padding: 1.2rem 1rem;
background: linear-gradient(135deg, rgba(167,139,250,.08), rgba(124,58,237,.05));
border: 1px dashed var(--border);
border-radius: var(--radius);
margin-bottom: 1.2rem;
}
.acc-avatar-edit .acc-avatar-big {
position: relative;
width: 96px; height: 96px;
display: inline-block;
cursor: pointer;
}
.acc-avatar-edit .acc-avatar-big .acc-photo {
width: 100%; height: 100%; border-radius: 50%;
background: linear-gradient(135deg, var(--purple-500), var(--purple-700));
color: #fff;
display: flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 2rem;
overflow: hidden;
aspect-ratio: 1 / 1;
box-shadow: 0 8px 22px rgba(91,33,182,.18);
}
.acc-avatar-edit .acc-avatar-big .acc-photo img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
.acc-avatar-edit .acc-cam {
position: absolute; bottom: -2px; right: -2px;
width: 30px; height: 30px; border-radius: 50%;
background: var(--purple-700); color: #fff;
display: grid; place-items: center;
cursor: pointer; box-shadow: 0 4px 10px rgba(91,33,182,.35);
border: 3px solid #fff;
transition: transform .2s;
z-index: 2;
}
.acc-avatar-edit .acc-cam:hover { transform: scale(1.08); }
.acc-avatar-edit input[type=file] { display: none; }
.acc-avatar-edit .acc-actions { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: center; }
.acc-avatar-edit .acc-actions button {
padding: .35rem .8rem; border-radius: 99px; border: 1px solid var(--border);
background: #fff; cursor: pointer; font-size: .78rem; color: var(--text-2);
}
.acc-avatar-edit .acc-actions button.primary {
background: var(--purple-700); color: #fff; border-color: var(--purple-700);
}
.acc-avatar-edit .acc-actions button:hover { transform: translateY(-1px); }
.account-side nav,
.account-side .acc-side-nav { display: flex; flex-direction: column; gap: .15rem; }
.account-side nav a,
.account-side .acc-side-nav a,
.account-side .acc-logout-btn {
padding: .7rem .9rem;
border-radius: var(--radius-sm);
font-size: .9rem;
font-weight: 500;
color: var(--text-2);
transition: transform .2s, box-shadow .2s, border-color .2s, background-color .2s, color .2s, opacity .2s;
display: flex;
align-items: center;
gap: .65rem;
width: 100%;
text-align: left;
}
.account-side .acc-nav-ico {
flex: 0 0 22px;
font-size: 1.05rem;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
}
.account-side .acc-nav-lbl { flex: 1; }
.account-side nav a:hover,
.account-side nav a.active,
.account-side .acc-side-nav a:hover,
.account-side .acc-side-nav a.active {
background: linear-gradient(135deg, rgba(124, 58, 237, .12), rgba(167, 139, 250, .15));
color: var(--accent);
}
.account-side .acc-logout-form { display: contents; }
.account-side .acc-logout-btn {
background: none;
border: none;
cursor: pointer;
color: #ef4444;
font: inherit;
margin-top: .4rem;
border-top: 1px dashed var(--border);
padding-top: 1rem;
border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.account-side .acc-logout-btn:hover {
background: rgba(239, 68, 68, .08);
color: #dc2626;
border-radius: var(--radius-sm);
}
.acc-nav-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 7px;
background: linear-gradient(135deg, #fbbf24, #f59e0b);
color: #fff;
border-radius: 99px;
font-size: .72rem;
font-weight: 700;
letter-spacing: .02em;
box-shadow: 0 2px 6px rgba(245, 158, 11, .35);
animation: gift-pulse 2.5s ease-in-out infinite;
}
.account-main {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 2rem;
}
.account-main h2 { margin-bottom: 1.5rem; }
.order-card {
padding: 1.2rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
margin-bottom: .9rem;
}
.order-card .oc-head {
display: flex; justify-content: space-between; align-items: center;
flex-wrap: wrap; gap: .5rem;
margin-bottom: .8rem;
}
.order-card .order-no { font-weight: 700; }
.order-card .order-date { font-size: .82rem; color: var(--text-3); }
.order-status {
padding: .25rem .8rem;
border-radius: 999px;
font-size: .72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
background: rgba(251, 191, 36, .15);
color: #fbbf24;
}
.order-status.tamamlandi { background: rgba(34, 197, 94, .15); color: #86efac; }
.order-status.kargoda { background: rgba(124, 58, 237, .15); color: var(--accent); }
.order-status.iptal { background: rgba(239, 68, 68, .15); color: #fca5a5; }
.order-status.iade { background: rgba(239, 68, 68, .15); color: #fca5a5; }
/* ============================ ORDER TRACKING ============================ */
.track-wrap { max-width: 720px; margin: 1.5rem auto 4rem; }
.track-head { text-align: center; margin-bottom: 2rem; }
.track-head h1 { font-size: 2rem; margin-bottom: .5rem; }
.track-head p { color: var(--text-2); }
.track-form {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.5rem;
margin-bottom: 1.2rem;
}
.track-fields {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-bottom: 1rem;
}
@media (max-width: 600px) { .track-fields { grid-template-columns: 1fr; } }
.track-field { display: flex; flex-direction: column; gap: .35rem; }
.track-field .lbl {
font-size: .8rem; font-weight: 600; color: var(--text-2);
text-transform: uppercase; letter-spacing: .04em;
}
.track-field input {
padding: .8rem 1rem;
background: var(--bg-2);
border: 1px solid var(--border);
border-radius: 12px;
color: var(--text);
font-size: .95rem;
transition: border .2s, background .2s;
}
.track-field input:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.track-form .btn-primary { width: 100%; justify-content: center; }
.track-error {
display: flex; align-items: center; gap: .6rem;
padding: .9rem 1.1rem;
background: rgba(239, 68, 68, .1);
border: 1px solid rgba(239, 68, 68, .25);
border-radius: 12px;
color: #fca5a5;
margin-bottom: 1rem;
font-size: .9rem;
}
.track-result {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.5rem;
margin-bottom: 1rem;
}
.track-result-head {
display: flex; justify-content: space-between; align-items: center;
flex-wrap: wrap; gap: .8rem;
padding-bottom: 1rem; margin-bottom: 1.2rem;
border-bottom: 1px dashed var(--border);
}
.track-no { display: block; font-weight: 700; font-size: 1.1rem; }
.track-date { display: block; font-size: .82rem; color: var(--text-3); }
.track-timeline {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: .4rem;
margin: 1.2rem 0 1.6rem;
position: relative;
}
.ts-step { text-align: center; position: relative; }
.ts-step::after {
content: '';
position: absolute;
top: 22px; left: 50%; right: -50%;
height: 2px;
background: var(--border);
z-index: 0;
}
.ts-step:last-child::after { display: none; }
.ts-step.done::after { background: var(--accent); }
.ts-ico {
width: 44px; height: 44px;
border-radius: 50%;
background: var(--bg-2);
border: 2px solid var(--border);
display: inline-flex; align-items: center; justify-content: center;
font-size: 1.1rem;
position: relative; z-index: 1;
margin-bottom: .4rem;
}
.ts-step.done .ts-ico { background: var(--accent); border-color: var(--accent); color: #fff; }
.ts-step.active .ts-ico {
background: rgba(124, 58, 237, .15);
border-color: var(--accent);
color: var(--accent);
animation: ts-pulse 1.4s ease-in-out infinite;
}
@keyframes ts-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(124,58,237,.4);} 50%{box-shadow:0 0 0 8px rgba(124,58,237,0);} }
.ts-label { font-size: .75rem; color: var(--text-2); font-weight: 600; }
.ts-step.done .ts-label, .ts-step.active .ts-label { color: var(--text); }
.track-status-desc {
display:flex; align-items:flex-start; gap:.7rem;
padding:.85rem 1rem; margin:.4rem 0 1.2rem;
background: color-mix(in srgb, var(--accent) 6%, var(--surface));
border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
border-radius: 12px;
font-size: .9rem; line-height: 1.45; color: var(--text);
}
.track-status-desc .tsd-ico { font-size: 1.15rem; flex-shrink:0; line-height:1; margin-top:.05rem; }
.track-status-desc .tsd-text { flex:1; }
.track-cancel {
padding: 1rem;
background: rgba(239, 68, 68, .08);
border: 1px solid rgba(239, 68, 68, .2);
border-radius: 12px;
color: var(--text);
margin-bottom: 1.2rem;
font-size: .9rem;
}
.track-cancel a { color: var(--accent); font-weight: 600; }
.track-section { margin-top: 1rem; }
.track-section h3 { font-size: .9rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); margin-bottom: .7rem; }
.track-items { list-style: none; padding: 0; }
.track-items li {
display: grid;
grid-template-columns: auto 1fr auto;
gap: .6rem;
padding: .55rem 0;
border-bottom: 1px dashed var(--border);
font-size: .9rem;
}
.track-items li:last-child { border-bottom: none; }
.ti-qty { font-weight: 700; color: var(--accent); }
.ti-price { font-weight: 600; }
/* Zengin sipariş kalemi kartı (non-magnet kişiye özel önizlemesi) */
.track-items-rich { display: flex; flex-direction: column; gap: .8rem; }
.ti-card {
display: grid;
grid-template-columns: 80px 1fr auto;
gap: 1rem;
padding: .9rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
align-items: flex-start;
}
.ti-cover {
width: 80px; height: 80px; border-radius: 10px; overflow: hidden;
background: linear-gradient(135deg, var(--purple-100), var(--purple-300));
display: grid; place-items: center;
}
.ti-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ti-cover-ph { font-size: 24px; opacity: .6; }
.ti-body { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.ti-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.ti-card .ti-name { font-size: .98rem; font-weight: 700; color: var(--text); }
.ti-type {
display: inline-block; padding: 1px 8px;
background: #ede9fe; color: #5b21b6;
border-radius: 99px; font-size: 11px; font-weight: 700; letter-spacing: .04em;
text-transform: uppercase;
}
.ti-meta {
display: flex; flex-wrap: wrap; gap: .55rem;
font-size: .82rem; color: var(--text-3);
}
.ti-meta .ti-mode {
padding: 2px 8px; border-radius: 6px; font-weight: 600; font-size: .76rem;
}
.ti-meta .ti-mode.same { background: #ede9fe; color: #5b21b6; }
.ti-meta .ti-mode.diff { background: #fce7f3; color: #9d174d; }
.ti-units {
display: flex; flex-direction: column; gap: .55rem;
margin-top: .25rem; padding: .65rem .75rem;
background: var(--purple-50, #faf7ff);
border: 1px dashed var(--purple-200, #ddd6fe);
border-radius: 10px;
}
.ti-unit { display: flex; flex-direction: column; gap: .35rem; }
.ti-unit-title {
font-size: .82rem; font-weight: 700; color: var(--accent);
letter-spacing: .02em;
}
.ti-unit-row {
display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
font-size: .8rem;
}
.ti-unit-row-lbl { color: var(--text-3); font-weight: 600; min-width: 80px; }
.ti-unit-thumbs { display: flex; gap: .35rem; align-items: center; }
.ti-unit-thumbs img {
width: 32px; height: 32px; border-radius: 6px; object-fit: cover;
border: 1px solid var(--border);
}
.ti-unit-more {
display: inline-grid; place-items: center;
width: 32px; height: 32px; border-radius: 6px;
background: #ede9fe; color: #5b21b6; font-size: .7rem; font-weight: 700;
}
.ti-unit-text {
background: #fff; border: 1px solid var(--border); border-radius: 6px;
padding: 2px 8px; font-size: .8rem; color: var(--text-2);
}
.ti-note {
margin-top: .35rem; padding: .45rem .65rem;
background: var(--bg-sub, #faf7ff);
border-radius: 8px; font-size: .82rem; color: var(--text-2);
}
.ti-note strong { color: var(--text); }
.ti-total { font-weight: 800; color: var(--accent); font-size: 1rem; align-self: center; white-space: nowrap; }
@media (max-width: 600px) {
.ti-card { grid-template-columns: 64px 1fr; gap: .7rem; padding: .7rem; }
.ti-card .ti-total { grid-column: 1 / -1; text-align: right; }
.ti-cover { width: 64px; height: 64px; }
.ti-unit-row-lbl { min-width: 0; }
}
.track-total {
display: flex; justify-content: space-between; align-items: center;
padding-top: .8rem; margin-top: .4rem;
border-top: 1px solid var(--border);
font-size: 1rem;
}
.track-total strong { color: var(--accent); font-size: 1.15rem; }
.track-meta { font-size: .88rem; color: var(--text-2); }
.track-meta div { padding: .25rem 0; }
.track-help { text-align: center; color: var(--text-3); font-size: .88rem; margin-top: 1rem; }
.track-help a { color: var(--accent); font-weight: 600; }
.copy-code { cursor: pointer; transition: color .2s, background .2s; border-radius: 6px; padding: 1px 6px; margin: -1px -2px; }
.copy-code:hover { background: rgba(124,58,237,.12); color: var(--accent); }
.copy-code.copied { background: rgba(34,197,94,.18); color: #16a34a; }
.track-list { list-style: none; padding: 0; margin: 0; }
.track-list li { margin-bottom: .5rem; }
.track-list a {
display: grid;
grid-template-columns: auto 1fr auto auto;
align-items: center;
gap: .8rem;
padding: .75rem 1rem;
background: var(--bg-2);
border: 1px solid var(--border);
border-radius: 12px;
color: var(--text);
transition: border-color .2s, transform .2s;
}
.track-list a:hover { border-color: var(--accent); transform: translateX(3px); color: var(--text); }
.track-list .tl-no { font-weight: 700; font-family: ui-monospace, monospace; }
.track-list .tl-date { color: var(--text-3); font-size: .85rem; }
.track-list .tl-total { font-weight: 700; color: var(--accent); }
@media (max-width: 600px) {
.track-list a { grid-template-columns: 1fr auto; row-gap: .35rem; }
.track-list .tl-date, .track-list .tl-total { grid-column: span 2; }
}
/* ============================ CONTACT ============================ */
.contact-grid {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 2rem;
margin: 2.5rem 0;
}
.contact-grid > .contact-card { min-width: 0; }
.contact-info-list li > div { min-width: 0; flex: 1; }
.contact-info-list span,
.contact-info-list a { overflow-wrap: anywhere; word-break: break-word; }
.contact-map {
margin: 0 0 3rem;
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--border);
box-shadow: 0 18px 40px rgba(15, 10, 40, .08);
}
.contact-map iframe {
display: block;
width: 100%;
height: 380px;
border: 0;
}
.contact-card {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 2rem 2rem 2rem; /* Alt padding = cf-submit margin-top → Gönder üst-alt eşit boşluk */
display: flex;
flex-direction: column; /* iki kart eşit yükseklik (grid stretch) + içerik dolsun */
}
/* Form kart yüksekliğini doldursun → sağdaki bilgi kartıyla dengeli */
.contact-card form { display: flex; flex-direction: column; flex: 1; }
/* İletişim formundaki field-group'lar arası boşluk — tutarlı/dengeli */
.contact-card form .field-group + .field-group { margin-top: 1.3rem; }
/* Label ↔ input arası ufak nefes — yapışık durmasın */
.contact-card form .field-group label { display: block; margin-bottom: .4rem; }
/* Mesaj alanı (textarea) kalan boşluğu doldursun → kart yüksekliği dengelenir */
.contact-card form .field-group:has(textarea) { flex: 1; display: flex; flex-direction: column; }
.contact-card form textarea.field { flex: 1; min-height: 180px; resize: vertical; }
/* Form gönder butonu — masaüstünde SAĞA yaslı, üst boşluk alt padding ile dengeli */
.cf-submit {
margin-top: 1.6rem !important;
align-self: flex-end; /* masaüstü: sağda */
width: auto !important;
padding: .65rem 1.5rem !important;
font-size: .9rem !important;
font-weight: 500 !important;
display: inline-flex !important;
align-items: center; gap: .4rem;
}
.contact-info-list { display: flex; flex-direction: column; gap: 1rem; padding: 0; margin: 0; }
.contact-info-list li {
display: flex; align-items: center; gap: 1rem;
padding: 1rem;
background: var(--surface);
border-radius: var(--radius);
list-style: none;
}
.contact-info-list .ic {
width: 44px; height: 44px;
border-radius: 14px;
background: linear-gradient(135deg, var(--purple-500), var(--purple-700));
color: #fff;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.contact-info-list strong { display: block; }
.contact-info-list span { color: var(--text-3); font-size: .85rem; }
/* ============================ SUCCESS PAGE ============================ */
.success-card {
text-align: center;
max-width: 600px;
margin: 4rem auto;
padding: 3rem 2rem;
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-lg);
}
.success-card .check {
width: 90px; height: 90px;
margin: 0 auto 1.4rem;
border-radius: 50%;
background: linear-gradient(135deg, #34d399, #10b981);
color: #fff;
display: inline-flex; align-items: center; justify-content: center;
box-shadow: 0 18px 36px rgba(16, 185, 129, .4);
animation: pop 0.6s var(--easing);
}
@keyframes pop { 0% { transform: scale(0); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
/* ============================ FOOTER ============================ */
.site-footer {
position: relative;
background: var(--bg-2);
border-top: 1px solid var(--border);
padding: 2rem 0 1rem; /* Sıkı ama nefes alan iç boşluk */
margin-top: 1.5rem;
overflow: hidden;
}
@media (max-width: 720px) {
.site-footer { padding: 1.5rem 0 .8rem; margin-top: 1rem; }
}
.footer-glow {
position: absolute;
inset: -50% -10% auto -10%;
height: 200px;
background: radial-gradient(50% 100% at 50% 0%, rgba(124, 58, 237, .25), transparent 70%);
filter: blur(40px);
pointer-events: none;
}
.footer-grid {
position: relative;
max-width: var(--container);
margin: 0 auto;
padding: 0 1.5rem;
display: grid;
grid-template-columns: 1.6fr 1fr 1fr 1fr 1.3fr;
gap: 2rem;
}
.footer-grid h4 { font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-2); margin-bottom: .7rem; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; }
.footer-grid ul a { color: var(--text-3); font-size: .9rem; transition: color .2s, transform .2s; display: inline-block; }
.footer-grid ul a:hover { color: var(--accent); transform: translateX(4px); }
.footer-desc { color: var(--text-3); font-size: .92rem; max-width: 320px; margin: .75rem 0 .9rem; }
.footer-social { display: flex; gap: .6rem; }
.footer-social a {
width: 38px; height: 38px;
border-radius: 50%;
background: var(--surface);
border: 1px solid var(--border);
color: var(--text-2);
display: inline-flex; align-items: center; justify-content: center;
transition: transform .25s, box-shadow .25s, border-color .25s, background-color .25s, color .25s, opacity .25s;
}
.footer-social a:hover { background: var(--accent); color: #fff; border-color: var(--accent); transform: translateY(-3px); }
.newsletter-form {
display: flex; gap: 0;
background: var(--surface);
border: 1.5px solid var(--border-2);
border-radius: 999px;
padding: 4px;
overflow: hidden;
}
.newsletter-form input {
flex: 1;
border: none;
background: transparent;
padding: .65rem 1rem;
font-size: .88rem;
outline: none;
}
.newsletter-form button {
width: 38px; height: 38px;
border-radius: 50%;
background: linear-gradient(135deg, var(--purple-500), var(--purple-700));
border: none;
color: #fff;
display: inline-flex; align-items: center; justify-content: center;
transition: transform .2s;
}
.newsletter-form button:hover { transform: scale(1.1); }
.newsletter-msg { display: block; font-size: .8rem; color: var(--accent); margin-top: .6rem; min-height: 1.2em; }
.footer-bottom {
position: relative;
max-width: var(--container);
margin: 1.5rem auto 0; /* 3rem → 1.5rem (yorumda işaretlediği büyük boşluk) */
padding: 1rem 1.5rem .25rem; /* Alt padding minimuma — telif altında fazla boşluk olmasın */
border-top: 1px solid var(--border);
display: flex; justify-content: space-between; align-items: center;
flex-wrap: wrap; gap: 1rem;
font-size: .82rem;
color: var(--text-3);
}
.payment-tags { display: inline-flex; gap: .5rem; flex-wrap: wrap; }
.pay-tag {
padding: .25rem .7rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 999px;
font-size: .75rem;
}
/* ============================ TOAST ============================ */
.toast-stack {
position: fixed;
top: 92px; right: 16px;
z-index: 300;
display: flex; flex-direction: column;
gap: .5rem;
pointer-events: none;
}
.toast {
pointer-events: auto;
padding: .85rem 1.1rem;
border-radius: var(--radius);
background: var(--surface-solid);
border: 1px solid var(--border-2);
color: var(--text);
font-size: .9rem;
font-weight: 500;
display: flex; align-items: center; gap: .65rem;
box-shadow: var(--shadow-lg);
min-width: 240px;
max-width: 380px;
transform: translateX(420px);
opacity: 0;
transition: transform .35s var(--easing), box-shadow .35s var(--easing), border-color .35s var(--easing), background-color .35s var(--easing), color .35s var(--easing), opacity .35s var(--easing);
}
.toast.show { transform: translateX(0); opacity: 1; }
.toast.success { border-color: rgba(34, 197, 94, .4); }
.toast.success .ti { color: #34d399; }
.toast.error { border-color: rgba(239, 68, 68, .4); }
.toast.error .ti { color: #fca5a5; }
.toast .ti {
width: 28px; height: 28px;
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: var(--surface);
flex-shrink: 0;
}
/* ============================ FLOATING WHATSAPP ============================ */
.floating-wa {
position: fixed; bottom: 24px; right: 24px;
width: 56px; height: 56px;
border-radius: 50%;
background: #25d366;
display: inline-flex !important;
align-items: center; justify-content: center;
box-shadow: 0 14px 30px rgba(37, 211, 102, .55);
z-index: 250;
transition: transform .3s var(--easing);
animation: pulse-green 2.6s infinite;
}
.floating-wa:hover { transform: scale(1.12); color: #fff; }
@keyframes pulse-green {
0%, 100% { box-shadow: 0 14px 30px rgba(37, 211, 102, .55), 0 0 0 0 rgba(37, 211, 102, .5); }
50% { box-shadow: 0 14px 30px rgba(37, 211, 102, .55), 0 0 0 14px rgba(37, 211, 102, 0); }
}
/* ============================ BREADCRUMB ============================ */
.breadcrumb {
display: flex; align-items: center; gap: .4rem;
font-size: .85rem;
color: var(--text-3);
margin: 1.5rem 0 1rem;
flex-wrap: wrap;
}
.breadcrumb a { color: var(--text-3); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb .sep { opacity: .5; }
/* ============================ PAGE HEAD ============================ */
.page-head {
text-align: center;
padding: .25rem 1.5rem 2rem; /* Üst boşluk minimum, alt biraz daha açık → kutudan boğulmasın */
position: relative;
}
.page-head h1 { font-size: clamp(1.8rem, 4vw, 3rem); margin-bottom: .55rem; }
.page-head .eyebrow { color: var(--accent); font-family: 'Caveat', cursive; font-size: 1.6rem; }
.page-head p { color: var(--text-2); max-width: 580px; margin: 0 auto; }
/* ============================ FILTER PILLS ============================ */
.filter-bar {
display: flex; gap: .5rem; flex-wrap: wrap;
margin: 1.5rem 0 2rem;
justify-content: center;
}
.filter-pill {
padding: .55rem 1.1rem;
border-radius: 999px;
background: var(--surface);
border: 1.5px solid var(--border);
font-size: .9rem;
font-weight: 500;
color: var(--text-2);
transition: transform .2s, box-shadow .2s, border-color .2s, background-color .2s, color .2s, opacity .2s;
}
.filter-pill:hover, .filter-pill.active {
background: linear-gradient(135deg, var(--purple-500), var(--purple-700));
border-color: transparent;
color: #fff;
transform: translateY(-2px);
box-shadow: 0 8px 18px rgba(124, 58, 237, .3);
}
/* ============================ POLICY PAGES ============================ */
.policy-page {
max-width: 820px;
margin: 1.5rem auto 4rem;
padding: 2.4rem 2.6rem;
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
box-shadow: 0 4px 24px rgba(0,0,0,.04);
}
.policy-head { margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border); }
.policy-head h1 { margin: .3rem 0 .4rem; font-size: 2rem; line-height: 1.15; }
.policy-meta { font-size: .82rem; color: var(--text-3); margin: 0; }
.policy-page section { margin-bottom: 2rem; }
.policy-page section:last-child { margin-bottom: 0; }
.policy-page h2 {
font-size: 1.18rem;
margin: 1.8rem 0 .8rem;
color: var(--text);
letter-spacing: -.01em;
}
.policy-page section h2,
.policy-page h2:first-child { margin-top: 0; }
.policy-page h3 {
font-size: 1rem;
margin: 1.2rem 0 .5rem;
color: var(--text);
}
.policy-page p { color: var(--text-2); line-height: 1.7; margin: 0 0 .9rem; font-size: .95rem; }
.policy-page ul { color: var(--text-2); line-height: 1.7; padding-left: 1.3rem; margin: 0 0 .9rem; }
.policy-page ul li { margin-bottom: .4rem; font-size: .94rem; }
.policy-page strong { color: var(--text); }
.policy-page a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.policy-page a:hover { color: var(--accent-strong, var(--accent)); }
@media (max-width: 720px) {
.policy-page { padding: 1.6rem 1.3rem; margin: 1rem auto 2.5rem; }
.policy-head h1 { font-size: 1.5rem; }
}
/* ============================ FAVORITES EMPTY ============================ */
.fav-grid { margin-top: 2rem; }
/* ============================ REVEAL ANIMATION ============================ */
/* Reveal animation — JS aktifse opacity:0 başlatır, scroll-in olunca .in eklenir.
JS yoksa veya hata verirse content garantili görünür kalır (failsafe). */
.reveal { opacity: 1; transform: none; transition: opacity .7s var(--easing), transform .7s var(--easing); }
html.js-reveal .reveal { opacity: 0; transform: translateY(20px); }
html.js-reveal .reveal.in { opacity: 1; transform: none; }
/* Mobile: reveal animasyonunu devre dışı bırak — içerik garantili görünür */
@media (max-width: 720px) {
html.js-reveal .reveal { opacity: 1 !important; transform: none !important; }
}
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }
/* ============================ RESPONSIVE ============================ */
/* 1700px ve altında primary-nav gizlenip hamburger menüye düşer.
Brand (~250px) + 5 nav (~800px) + 6 action item (~550px) + 40px padding = ~1640px;
güvenli marj için 1700 eşik. */
@media (max-width: 1700px) {
.primary-nav { display: none; }
.mobile-toggle { display: inline-flex; }
}
/* Brand'i SHRINK ETMEZ — kendi natural width'ini alır, asla "Mag..." şeklinde kesilmez.
Bu, header-inner > .brand { flex:1 1 0; min-width:0 } kuralını override ediyor. */
.header-inner > .brand { flex: 0 0 auto !important; min-width: max-content !important; }
.brand-text { min-width: 0; }
.brand-name { white-space: nowrap; }
/* Ara aralıkta gap'i azaltarak ferahlık sağla */
@media (max-width: 1280px) {
.header-inner { gap: 1rem; padding: 0 1rem; }
.header-actions { gap: .35rem; }
}
@media (max-width: 1024px) {
/* Bu eşikte cart pill sadeleşip yuvarlak ikon olur, auth-pills sığabilsin diye */
.cart-link .cart-text { display: none; }
.cart-link { width: 42px; height: 42px; padding: 0; border-radius: 50%; justify-content: center; }
/* Mobilde badge SVG'yi ezmesin — sağ-üst köşeye absolute */
.cart-link .badge {
position: absolute;
top: -4px; right: -4px;
background: linear-gradient(135deg, #ec4899, #7c3aed);
box-shadow: 0 3px 8px rgba(236, 72, 153, .55);
border: 2px solid var(--bg);
}
.footer-grid { grid-template-columns: 1fr 1fr; }
.product-detail {
grid-template-columns: 1fr;
grid-template-areas: "gallery" "info" "meta";
gap: 2rem;
}
.pd-left { display: contents; }
.pd-gallery { grid-area: gallery; position: relative; }
.pd-info { grid-area: info; }
.pd-meta { grid-area: meta; margin-top: 0; }
.cart-grid { grid-template-columns: 1fr; }
.summary { position: static; }
.account-grid { grid-template-columns: 1fr; }
.account-side { position: static; }
.contact-grid { grid-template-columns: 1fr; }
.banner-cta { grid-template-columns: 1fr; text-align: center; }
}
@media (max-width: 720px) {
:root { --header-h: 64px; }
body { font-size: 15px; }
/* Mobilde announce-bar (mor marquee) gizli — küçük ekranda tuhaf duruyordu */
.announce-bar { display: none; }
/* MOBİL HEADER — sadece brand + cart + hamburger
Logo slider edge'ine hizalı (sol pad 0), sağ butonlar nefes alsın (sağ pad 1rem) */
.header-inner { gap: .5rem; padding: 0 1rem 0 0; }
.header-actions { gap: .35rem; }
.header-actions > a.icon-btn[aria-label="Favoriler"],
.header-actions > a.icon-btn[aria-label="Hesabım"],
.header-actions > .btn-pill.ghost,
.header-actions > .auth-pills {
display: none;
}
/* Tema toggle mobilde de görünsün — biraz daha kompakt */
.header-actions .theme-toggle {
width: 38px; height: 38px;
}
/* HERO mobil — kompakt, ortalı, dengeli */
.hero { padding: 1.5rem 0 .5rem; min-height: auto; }
/* Mobilde mor glow yumuşak olsun — başlık okunaklı kalsın, alt kenara kadar yumuşak fade */
.hero::before {
opacity: .45;
filter: blur(40px);
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 25%, #000 50%, transparent 95%);
mask-image: linear-gradient(to bottom, transparent 0%, #000 25%, #000 50%, transparent 95%);
}
.path-choice-section { padding-top: 0; margin-top: -1rem; }
.path-choice-section .section-head { margin-bottom: 1.2rem; }
.hero-inner { grid-template-columns: 1fr; text-align: center; gap: 2.4rem; }
.hero-text { display: flex; flex-direction: column; align-items: center; width: 100%; }
.hero-eyebrow {
font-size: .76rem;
padding: .42rem .9rem;
margin-bottom: 1.2rem;
}
.hero-title {
font-size: clamp(1.85rem, 8.5vw, 2.6rem);
line-height: 1.08;
margin-bottom: 1.4rem;
}
.hero-title .script { font-size: 1em; }
.hero-sub {
font-size: .96rem;
line-height: 1.65;
max-width: 92%;
margin: 1rem auto 1.8rem;
padding: 0 .5rem;
}
.hero-cta {
justify-content: center;
gap: .7rem;
margin-bottom: 1.8rem;
width: 100%;
flex-direction: column;
align-items: center;
}
.hero-cta .btn-primary,
.hero-cta .btn-secondary {
padding: .9rem 1.3rem;
font-size: .94rem;
width: 100%;
max-width: 320px;
justify-content: center;
}
.hero-trust {
justify-content: center;
gap: 1.4rem;
width: 100%;
margin-top: 1.6rem;
}
.hero-trust .trust-item { font-size: .82rem; gap: .55rem; }
.hero-trust .trust-item small { font-size: .72rem; }
.hero-trust .trust-item svg { width: 20px; height: 20px; }
/* Mobilde hero görseli komple gizlensin — kalabalık yapıyor */
.hero-art { display: none !important; }
.section { padding: 3.5rem 0; }
.footer-grid { grid-template-columns: 1fr; gap: 1.8rem; text-align: center; }
.footer-bottom { flex-direction: column; text-align: center; padding: .75rem 1rem max(1.2rem, env(safe-area-inset-bottom)); margin-top: .6rem; gap: .55rem; }
.footer-desc { margin-left: auto; margin-right: auto; }
.footer-social { justify-content: center; }
/* MOBİL — Sepete ekle full satır; alt satırda Hemen al + Favori yan yana, dikey ortalı */
.pd-actions {
grid-template-columns: 1fr 56px;
gap: .7rem;
}
.pd-actions .btn-primary {
grid-column: 1 / -1;
}
.cart-item { grid-template-columns: 80px 1fr; }
.cart-item .ci-thumb { width: 80px; height: 80px; }
.cart-item .ci-side { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; padding-top: .5rem; border-top: 1px solid var(--border); }
.toast-stack { top: auto; bottom: 92px; right: 12px; left: 12px; }
.toast { transform: translateY(100px); }
.toast.show { transform: translateY(0); }
.floating-wa { bottom: 18px; right: 18px; width: 52px; height: 52px; }
.auth-card { padding: 2rem 1.5rem; }
.banner-cta { padding: 2.5rem 1.4rem; margin: 3rem 1rem; }
.pd-meta { grid-template-columns: 1fr 1fr; }
/* CONTACT — mobil */
.contact-grid { gap: 1.2rem; margin: 1.5rem 0; }
.contact-card { padding: 1.4rem 1.2rem; }
.contact-card h3 { font-size: 1.1rem; }
/* Mobil: Gönder tam genişlik ortalı (masaüstü sağa yaslıyı geçersiz kıl) */
.cf-submit { align-self: stretch; width: 100% !important; justify-content: center; }
.contact-card form textarea.field { min-height: 130px; }
.contact-info-list { gap: .7rem; }
.contact-info-list li { padding: .85rem .9rem; gap: .85rem; }
.contact-info-list .ic { width: 40px; height: 40px; border-radius: 12px; }
.contact-info-list strong { font-size: .95rem; }
.contact-info-list span { font-size: .82rem; line-height: 1.45; }
.contact-map { margin: 0 0 2rem; }
.contact-map iframe { height: 280px; }
}
@media (max-width: 480px) {
.brand-sub { display: none; }
.icon-btn { width: 38px; height: 38px; }
.header-actions { gap: .25rem; }
.pd-meta { grid-template-columns: 1fr; }
.social-row { grid-template-columns: 1fr; }
/* CONTACT — küçük mobil */
.contact-card { padding: 1.1rem 1rem; }
.contact-info-list li { padding: .75rem .8rem; gap: .7rem; }
.contact-info-list .ic { width: 36px; height: 36px; border-radius: 10px; }
.contact-info-list .ic svg { width: 17px; height: 17px; }
.contact-map iframe { height: 230px; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
}
/* ============ YORUMLAR ============ */
.review-form-card{
background:var(--surface);border:1px solid var(--border);border-radius:18px;
padding:1.6rem;box-shadow:0 6px 24px rgba(124,58,237,.04)
}
/* Yorum gönderildikten sonra: tatlı teşekkür kartı + konfeti */
.rev-thanks{
position: relative; overflow: hidden;
text-align:center; padding:2rem .5rem 1.2rem;
animation: revThanksFade .5s ease-out;
}
@keyframes revThanksFade {
from { opacity:0; transform: translateY(8px); }
to { opacity:1; transform: translateY(0); }
}
.rev-thanks-emoji{
font-size:42px; line-height:1; margin-bottom:.4rem;
display:inline-block;
animation: revEmojiBounce .8s cubic-bezier(.34,1.56,.64,1) .1s both;
}
@keyframes revEmojiBounce {
0% { transform: scale(.3) rotate(-30deg); opacity:0 }
60% { transform: scale(1.2) rotate(8deg); opacity:1 }
80% { transform: scale(.95) rotate(-4deg); }
100% { transform: scale(1) rotate(0); opacity:1 }
}
.rev-thanks h3{
margin:.4rem 0 .5rem; font-size:1.3rem; font-weight:700;
color: var(--text);
}
.rev-thanks p{
margin:0 auto 1.3rem; max-width:400px;
color: var(--text-2); font-size:.95rem; line-height:1.6;
}
.rev-thanks-cta{
display:inline-block !important; padding:.65rem 1.5rem !important;
background: linear-gradient(135deg, #a78bfa, #7c3aed) !important;
color:#fff !important; font-weight:600 !important; font-size:.92rem !important;
border-radius:999px !important; text-decoration:none !important;
border: 0 !important;
box-shadow: 0 4px 14px rgba(124,58,237,.25);
transition: transform .18s ease, box-shadow .18s ease;
}
.rev-thanks-cta:hover,
.rev-thanks-cta:focus,
.rev-thanks-cta:active{
background: linear-gradient(135deg, #7c3aed, #6d28d9) !important;
color:#fff !important; text-decoration:none !important;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(124,58,237,.40);
}
/* Konfeti — küçük renkli kareler aşağı düşer ve solar */
.rev-confetti{
position:absolute; top:-12px; left:0; right:0;
pointer-events:none; height:100%;
}
.rev-confetti i{
position:absolute; top:0;
width:8px; height:8px; opacity:0;
border-radius:2px;
animation: revConfettiFall 1.8s cubic-bezier(.45,.05,.55,.95) forwards;
}
@keyframes revConfettiFall{
0% { opacity:0; transform: translateY(-10px) rotate(0); }
20% { opacity:1; }
100% { opacity:0; transform: translateY(220px) rotate(540deg); }
}
.rev-confetti i:nth-child(1){ left: 8%; background:#a78bfa; animation-delay: .05s; }
.rev-confetti i:nth-child(2){ left:18%; background:#fbbf24; animation-delay: .25s; width:6px; height:6px; }
.rev-confetti i:nth-child(3){ left:28%; background:#10b981; animation-delay: .12s; }
.rev-confetti i:nth-child(4){ left:38%; background:#ec4899; animation-delay: .35s; width:10px; height:10px; }
.rev-confetti i:nth-child(5){ left:48%; background:#7c3aed; animation-delay: .18s; }
.rev-confetti i:nth-child(6){ left:58%; background:#fbbf24; animation-delay: .42s; width:6px; height:6px; }
.rev-confetti i:nth-child(7){ left:68%; background:#10b981; animation-delay: .08s; }
.rev-confetti i:nth-child(8){ left:78%; background:#ec4899; animation-delay: .30s; }
.rev-confetti i:nth-child(9){ left:88%; background:#a78bfa; animation-delay: .15s; width:10px; height:10px; }
.rev-confetti i:nth-child(10){ left:14%; background:#10b981; animation-delay: .50s; width:7px; height:7px; }
.rev-confetti i:nth-child(11){ left:64%; background:#7c3aed; animation-delay: .55s; }
.rev-confetti i:nth-child(12){ left:84%; background:#fbbf24; animation-delay: .38s; width:6px; height:6px; }
.review-info-card{
background:var(--surface);border:1px solid var(--border);border-radius:14px;
padding:1rem 1.4rem;color:var(--text-2);font-size:.95rem;text-align:center
}
.rev-stars-input{display:flex;align-items:center;gap:.4rem;margin-top:.4rem;flex-wrap:wrap}
.rev-stars-input span{
font-size:1.8rem;color:#d4d4d8;cursor:pointer;transition:transform .15s, color .15s;
user-select:none;line-height:1
}
.rev-stars-input span:hover{transform:scale(1.1)}
.rev-stars-input span.on,
.rev-stars-input span.hover{color:#fbbf24}
.rev-stars-label{margin-left:.6rem;color:var(--text-2);font-size:.85rem}
.rev-stars-label strong{color:var(--text);font-weight:700}
.reviews-list{display:flex;flex-direction:column;gap:1rem}
.review-item{
background:var(--surface);
border:1px solid var(--border);
border-radius:16px;
padding:1.3rem 1.5rem;
transition:border-color .2s, box-shadow .2s, transform .2s;
position:relative;
}
.review-item:hover{
transform:translateY(-2px);
border-color:color-mix(in srgb, var(--accent) 30%, var(--border));
box-shadow:0 10px 32px color-mix(in srgb, var(--accent) 12%, transparent);
}
.rev-head{display:flex;align-items:center;gap:.8rem;margin-bottom:.6rem}
.rev-avatar{
width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#a78bfa,#7c3aed);
color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;
flex-shrink:0;overflow:hidden
}
.rev-avatar img{width:100%;height:100%;object-fit:cover}
.rev-meta{flex:1;display:flex;flex-direction:column;gap:.15rem;min-width:0}
.rev-meta strong{font-size:.95rem}
.rev-meta small{color:var(--text-3);font-size:.78rem}
.rev-verified{
display:inline-block;font-size:.72rem;font-weight:600;color:#10b981;
background:rgba(16,185,129,.1);padding:1px 8px;border-radius:99px;width:fit-content
}
.rev-stars{color:#fbbf24;font-size:.95rem;letter-spacing:.05em;flex-shrink:0}
.rev-title{font-weight:700;margin:.4rem 0 .35rem;font-size:1.05rem;color:var(--accent);letter-spacing:-.005em;overflow-wrap:anywhere;word-break:break-word}
.rev-body{color:var(--text);font-weight:500;font-size:.94rem;line-height:1.65;margin:0;overflow-wrap:anywhere;word-break:break-word}
/* Anasayfa "tüm yorumları gör" butonu — üst (kartlardan) ve alt (footer'a) boşluk dengeli */
.testimonials-cta{text-align:center;margin-top:3rem}
.testimonials-cta .btn-ghost-pill{
display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.4rem;
border:1.5px solid var(--accent);color:var(--accent);background:transparent;
border-radius:99px;font-weight:600;font-size:.92rem;text-decoration:none;
transition:background .2s, color .2s
}
.testimonials-cta .btn-ghost-pill:hover{background:var(--accent);color:#fff}
/* "Yorum yap" butonu siparişlerde */
.review-cta-btn{
display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .9rem;
background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#fff;border:none;
border-radius:99px;font-weight:600;font-size:.78rem;cursor:pointer;
text-decoration:none;transition:transform .15s
}
.review-cta-btn:hover{transform:translateY(-1px)}
.review-cta-btn.done{background:#e5e7eb;color:#6b7280;cursor:default}
.review-cta-btn.done:hover{transform:none}
/* ============================================================ */
/* ============== HEADER v2: NAV + MEGA + DRAWER ============== */
/* ============================================================ */
/* ---- Nav link: zarif altı çizgi animasyonu ---- */
.primary-nav > a.nav-link,
.primary-nav .has-mega .mega-trigger {
position: relative;
padding: .55rem .85rem;
border-radius: 12px;
font-size: .94rem;
font-weight: 500;
color: var(--text-2);
display: inline-flex; align-items: center; gap: .35rem;
transition: color .2s var(--easing);
background: transparent;
white-space: nowrap;
}
.primary-nav > a.nav-link::after,
.primary-nav .has-mega .mega-trigger::after {
content: '';
position: absolute;
left: 50%; bottom: 4px;
transform: translateX(-50%) scaleX(0);
width: calc(100% - 1.7rem); height: 2px;
background: linear-gradient(90deg, #7c3aed, #ec4899);
border-radius: 2px;
transform-origin: center;
transition: transform .25s var(--easing);
}
.primary-nav > a.nav-link:hover,
.primary-nav .has-mega:hover .mega-trigger,
.primary-nav .has-mega:focus-within .mega-trigger,
.primary-nav > a.nav-link.active {
color: var(--text);
background: transparent;
}
.primary-nav > a.nav-link:hover::after,
.primary-nav .has-mega:hover .mega-trigger::after,
.primary-nav .has-mega:focus-within .mega-trigger::after,
.primary-nav > a.nav-link.active::after {
transform: translateX(-50%) scaleX(1);
}
/* Eski "active" altındaki dot'u kapat */
.primary-nav > a.active::after { content: none; }
.primary-nav > a.nav-link.active::after { content: ''; }
.primary-nav .nav-special .ns-icon {
font-size: 1em;
filter: saturate(1.3);
}
.mega-trigger .mega-caret {
margin-left: 1px;
transition: transform .25s var(--easing);
opacity: .7;
}
.has-mega:hover .mega-trigger .mega-caret,
.has-mega:focus-within .mega-trigger .mega-caret {
transform: rotate(180deg);
opacity: 1;
}
/* ---- Mega menu: ÜRÜNLER ---- */
.mega-menu.mega-products {
width: 720px;
display: block;
padding: 1.4rem;
}
.mp-head {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 1rem;
padding-bottom: .9rem;
margin-bottom: 1rem;
border-bottom: 1px dashed var(--border);
}
.mp-eyebrow {
font-size: .7rem; font-weight: 600;
letter-spacing: .14em; text-transform: uppercase;
color: var(--accent);
}
.mp-title {
font-size: 1.05rem; font-weight: 700;
color: var(--text);
margin-top: .25rem;
}
.mp-all {
display: inline-flex;
align-items: center;
font-size: .82rem;
font-weight: 700;
color: var(--accent);
padding: .5rem 1rem;
border-radius: 999px;
border: 1.5px solid color-mix(in srgb, var(--accent) 40%, transparent);
background: color-mix(in srgb, var(--accent) 8%, transparent);
transition: background .2s var(--easing), color .2s var(--easing), border-color .2s var(--easing), transform .2s var(--easing), box-shadow .2s var(--easing);
white-space: nowrap;
letter-spacing: .01em;
text-decoration: none;
}
.mp-all:hover,
.mp-all:focus-visible {
color: #ffffff;
background: var(--accent);
border-color: var(--accent);
transform: translateX(2px);
box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 30%, transparent);
text-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}
.mp-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: .55rem;
}
.mp-card {
position: relative;
display: flex; align-items: center; gap: .8rem;
padding: .85rem .95rem;
border-radius: 14px;
background: var(--surface);
border: 1px solid var(--border);
transition: transform .15s ease-out, box-shadow .15s ease-out, border-color .15s ease-out, background-color .15s ease-out, color .15s ease-out;
overflow: hidden;
contain: layout paint;
transform: translateZ(0);
}
.mp-card-wide,
.mp-card-big {
grid-column: 1 / -1;
justify-content: center;
text-align: center;
}
.mp-card-wide .mp-text,
.mp-card-big .mp-text { flex: 0 0 auto; align-items: center; }
.mp-card-wide .mp-tag,
.mp-card-big .mp-tag { white-space: normal; }
.mp-card-wide .mp-arrow,
.mp-card-big .mp-arrow { margin-left: .5rem; }
.mp-card:hover {
transform: translateY(-2px);
border-color: transparent;
background: linear-gradient(135deg, var(--mp-color, var(--accent)), color-mix(in srgb, var(--mp-color, var(--accent)) 65%, #1a0033));
color: #fff;
box-shadow: 0 10px 22px color-mix(in srgb, var(--mp-color, var(--accent)) 30%, transparent);
}
.mp-icon {
width: 42px; height: 42px;
border-radius: 12px;
display: inline-flex; align-items: center; justify-content: center;
font-size: 1.4rem;
background: color-mix(in srgb, var(--mp-color, var(--accent)) 15%, transparent);
flex-shrink: 0;
transition: background .15s ease-out, transform .15s ease-out;
}
.mp-card:hover .mp-icon {
background: rgba(255, 255, 255, .22);
transform: rotate(-6deg) scale(1.05);
}
.mp-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; flex: 1; }
.mp-name { font-weight: 700; font-size: .95rem; color: var(--text); transition: color .2s; }
.mp-tag { font-size: .76rem; color: var(--text-3); margin-top: 2px; transition: color .2s;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mp-card:hover .mp-name { color: #fff; }
.mp-card:hover .mp-tag { color: rgba(255, 255, 255, .85); }
.mp-arrow {
font-size: 1.05rem; font-weight: 700;
color: var(--text-3);
opacity: 0;
transform: translateX(-6px);
transition: opacity .15s ease-out, transform .15s ease-out, color .15s ease-out;
flex-shrink: 0;
}
.mp-card:hover .mp-arrow {
color: #fff;
opacity: 1;
transform: translateX(0);
}
.mp-foot {
display: grid; grid-template-columns: 1fr 1fr;
gap: .55rem;
margin-top: 1rem;
}
.mp-foot-link {
display: flex; align-items: center; gap: .7rem;
padding: .8rem .95rem;
border-radius: 14px;
border: 1px solid var(--border);
transition: transform .2s var(--easing), border-color .2s var(--easing), box-shadow .2s var(--easing), background .2s var(--easing);
background: linear-gradient(135deg, rgba(167, 139, 250, .08), rgba(236, 72, 153, .04));
}
.mp-foot-link:hover {
transform: translateY(-2px);
border-color: var(--accent);
background: linear-gradient(135deg, rgba(167, 139, 250, .18), rgba(236, 72, 153, .12));
box-shadow: 0 10px 22px rgba(124, 58, 237, .18);
}
.mp-foot-icon {
width: 36px; height: 36px;
border-radius: 10px;
display: inline-flex; align-items: center; justify-content: center;
font-size: 1.15rem;
background: rgba(255, 255, 255, .6);
flex-shrink: 0;
}
html[data-theme="dark"] .mp-foot-icon { background: rgba(255, 255, 255, .08); }
.mp-foot-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.mp-foot-text strong { font-size: .92rem; font-weight: 700; color: var(--text); }
.mp-foot-text small { font-size: .74rem; color: var(--text-3); margin-top: 2px; }
/* mega-products kendi width'ine sahip — eski 640px override */
.has-mega-products .mega-menu { width: 720px; }
@media (max-width: 1500px) {
.mega-menu.mega-products { width: 640px; }
}
/* ============================================================ */
/* =================== MOBILE DRAWER v2 ====================== */
/* ============================================================ */
.mobile-drawer {
width: 380px;
max-width: 92vw;
background: var(--surface-solid);
display: flex; flex-direction: column;
}
.mobile-drawer .drawer-head {
padding: 1rem 1.2rem;
display: flex; align-items: center; justify-content: space-between;
border-bottom: 1px solid var(--border);
background: linear-gradient(135deg,
color-mix(in srgb, #7c3aed 8%, transparent),
color-mix(in srgb, #ec4899 5%, transparent));
}
.drawer-brand {
display: inline-flex; align-items: center; gap: .7rem;
text-decoration: none; color: inherit;
}
.drawer-brand-mark {
width: 38px; height: 38px;
border-radius: 11px;
background: linear-gradient(135deg, #a78bfa, #5b21b6);
color: #fff;
font-family: 'Pacifico', cursive;
font-size: 1.5rem; line-height: 1;
display: inline-flex; align-items: center; justify-content: center;
box-shadow: 0 6px 14px rgba(124, 58, 237, .35);
flex-shrink: 0;
}
.drawer-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.drawer-brand-name {
font-family: 'Poppins', sans-serif;
font-weight: 800; font-size: 1.1rem;
color: var(--text);
letter-spacing: -.01em;
}
.drawer-brand-name em {
font-family: 'Pacifico', cursive;
font-style: normal;
background: linear-gradient(135deg, var(--purple-400), var(--purple-700));
-webkit-background-clip: text; background-clip: text;
color: transparent;
font-size: 1.2rem;
}
.drawer-brand-sub {
font-size: .68rem;
color: var(--text-3);
letter-spacing: .1em;
text-transform: uppercase;
font-weight: 500;
margin-top: 1px;
}
.drawer-close-btn {
width: 38px; height: 38px;
border-radius: 50%;
background: var(--surface);
border: 1px solid var(--border);
color: var(--text);
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
transition: transform .2s var(--easing), box-shadow .2s var(--easing), border-color .2s var(--easing), background-color .2s var(--easing), color .2s var(--easing), opacity .2s var(--easing);
}
.drawer-close-btn:hover {
background: var(--accent);
color: #fff;
border-color: var(--accent);
transform: rotate(90deg);
}
/* Search */
.mobile-drawer .drawer-search {
margin: 1rem 1.2rem 0;
padding: .55rem .9rem;
border-radius: 14px;
background: var(--surface);
border: 1px solid var(--border);
display: inline-flex; align-items: center; gap: .55rem;
transition: transform .2s var(--easing), box-shadow .2s var(--easing), border-color .2s var(--easing), background-color .2s var(--easing), color .2s var(--easing), opacity .2s var(--easing);
}
.mobile-drawer .drawer-search:focus-within {
border-color: var(--accent);
background: var(--surface-solid);
box-shadow: 0 0 0 3px rgba(124, 58, 237, .12);
}
.mobile-drawer .drawer-search svg { color: var(--text-3); flex-shrink: 0; }
.mobile-drawer .drawer-search input {
border: none; outline: none; background: transparent;
flex: 1; font-size: .92rem;
color: var(--text);
}
/* CTA grid: Hazır + Kendi */
.drawer-cta-grid {
display: grid; grid-template-columns: 1fr 1fr;
gap: .7rem;
padding: 1rem 1.2rem .25rem;
}
.drawer-cta {
position: relative;
display: flex; flex-direction: column; align-items: flex-start; gap: .15rem;
padding: 1.05rem 1rem;
border-radius: 18px;
text-decoration: none;
color: #fff;
overflow: hidden;
isolation: isolate;
transition: transform .25s var(--easing), box-shadow .25s var(--easing);
min-height: 110px;
}
.drawer-cta::before {
content: ''; position: absolute; inset: 0; z-index: -1;
background: linear-gradient(135deg, #7c3aed, #c026d3);
}
.drawer-cta-templates::before {
background: linear-gradient(135deg, #f59e0b, #ef4444);
}
.drawer-cta-custom::before {
background: linear-gradient(135deg, #6366f1, #ec4899);
}
.drawer-cta::after {
content: '';
position: absolute; right: -20px; bottom: -25px;
width: 100px; height: 100px;
border-radius: 50%;
background: rgba(255,255,255,.15);
z-index: -1;
}
.drawer-cta:hover {
transform: translateY(-3px);
box-shadow: 0 14px 30px rgba(0, 0, 0, .25);
}
.drawer-cta-icon {
font-size: 1.7rem;
margin-bottom: .25rem;
filter: drop-shadow(0 2px 6px rgba(0,0,0,.2));
}
.drawer-cta-title {
font-weight: 800; font-size: .98rem;
color: #fff;
line-height: 1.2;
}
.drawer-cta-tag {
font-size: .76rem;
color: rgba(255,255,255,.85);
font-weight: 500;
margin-top: 2px;
}
/* Section title */
.drawer-section-title {
display: flex; align-items: center; justify-content: space-between;
padding: 1.1rem 1.2rem .55rem;
font-size: .72rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--text-3);
}
.drawer-section-all {
font-size: .74rem; font-weight: 600;
color: var(--accent);
letter-spacing: .04em; text-transform: none;
transition: transform .2s;
}
.drawer-section-all:hover { transform: translateX(2px); color: var(--accent); }
/* Type chips grid */
/* Son chip tek kalırsa tam satırı kapla + içerik ortalı */
.drawer-types-grid > .drawer-type-chip:last-child:nth-child(odd) {
grid-column: 1 / -1;
justify-content: center;
text-align: center;
}
.drawer-types-grid > .drawer-type-chip:last-child:nth-child(odd) .drawer-type-name {
font-weight: 700;
}
.drawer-types-grid {
display: grid; grid-template-columns: 1fr 1fr;
gap: .5rem;
padding: 0 1.2rem;
}
.drawer-type-chip {
position: relative;
display: flex; align-items: center; gap: .65rem;
padding: .7rem .8rem;
border-radius: 14px;
background: var(--surface);
border: 1px solid var(--border);
font-weight: 600;
font-size: .88rem;
color: var(--text);
text-decoration: none;
transition: transform .2s var(--easing), box-shadow .2s var(--easing), border-color .2s var(--easing), background-color .2s var(--easing), color .2s var(--easing), opacity .2s var(--easing);
overflow: hidden;
isolation: isolate;
}
.drawer-type-chip::before {
content: ''; position: absolute; inset: 0; z-index: -1;
background: linear-gradient(135deg, var(--dt-color), color-mix(in srgb, var(--dt-color) 65%, #1a0033));
opacity: 0;
transition: opacity .2s var(--easing);
}
.drawer-type-chip:active,
.drawer-type-chip:hover {
color: #fff;
border-color: transparent;
transform: scale(.98);
}
.drawer-type-chip:active::before,
.drawer-type-chip:hover::before { opacity: 1; }
.drawer-type-emoji {
width: 34px; height: 34px;
border-radius: 10px;
display: inline-flex; align-items: center; justify-content: center;
font-size: 1.1rem;
background: color-mix(in srgb, var(--dt-color) 18%, transparent);
flex-shrink: 0;
transition: background .2s var(--easing);
}
.drawer-type-chip:hover .drawer-type-emoji,
.drawer-type-chip:active .drawer-type-emoji {
background: rgba(255,255,255,.25);
}
.drawer-type-name { line-height: 1.2; }
/* Drawer nav (Anasayfa, Nasıl çalışır etc.) */
.mobile-drawer .drawer-nav {
display: flex; flex-direction: column;
padding: 0 .8rem;
gap: .15rem;
}
.mobile-drawer .drawer-nav a {
display: flex; align-items: center; gap: .8rem;
padding: .8rem .85rem;
border-radius: 12px;
color: var(--text);
font-weight: 500;
font-size: .94rem;
text-decoration: none;
transition: background .15s, transform .15s, color .15s;
}
.mobile-drawer .drawer-nav a:hover {
background: var(--surface);
transform: translateX(3px);
color: var(--accent);
}
.mobile-drawer .drawer-nav .dn-ic {
width: 28px;
display: inline-flex; align-items: center; justify-content: center;
font-size: 1.05rem;
flex-shrink: 0;
}
.mobile-drawer .drawer-nav .dn-text { flex: 1; }
.mobile-drawer .drawer-nav .dn-badge {
min-width: 22px; height: 22px;
padding: 0 7px;
border-radius: 999px;
background: linear-gradient(135deg, #ec4899, #7c3aed);
color: #fff;
font-size: .72rem;
font-weight: 700;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
/* Account block (alt) */
.drawer-account {
margin: 1.2rem 1.2rem calc(1.2rem + env(safe-area-inset-bottom, 0));
padding-top: 1rem;
border-top: 1px solid var(--border);
display: flex; flex-direction: column; gap: .55rem;
}
.drawer-account-link {
display: flex; align-items: center; gap: .8rem;
padding: .9rem;
border-radius: 14px;
background: linear-gradient(135deg, rgba(124,58,237,.10), rgba(236,72,153,.06));
border: 1px solid var(--border);
text-decoration: none;
color: var(--text);
transition: transform .2s var(--easing), box-shadow .2s var(--easing), border-color .2s var(--easing), background-color .2s var(--easing), color .2s var(--easing), opacity .2s var(--easing);
}
.drawer-account-link:hover {
border-color: var(--accent);
transform: translateY(-1px);
box-shadow: 0 8px 18px rgba(124, 58, 237, .15);
}
.drawer-account-avatar {
width: 42px; height: 42px;
border-radius: 50%;
background: var(--surface);
border: 1px solid var(--border);
display: inline-flex; align-items: center; justify-content: center;
overflow: hidden;
flex-shrink: 0;
color: var(--text-2);
}
.drawer-account-avatar img { width: 100%; height: 100%; object-fit: cover; }
.drawer-account-text { flex: 1; display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.drawer-account-text strong { font-size: .96rem; font-weight: 700; color: var(--text); }
.drawer-account-text small { font-size: .76rem; color: var(--text-3); margin-top: 2px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px;
}
.drawer-account-arrow {
color: var(--text-3);
font-weight: 700; font-size: 1.05rem;
transition: transform .2s, color .2s;
flex-shrink: 0;
}
.drawer-account-link:hover .drawer-account-arrow {
color: var(--accent);
transform: translateX(3px);
}
.drawer-account-logout {
text-align: center;
padding: .7rem;
border-radius: 12px;
font-size: .85rem; font-weight: 600;
color: var(--text-3);
background: var(--surface);
border: 1px solid var(--border);
text-decoration: none;
transition: transform .2s, box-shadow .2s, border-color .2s, background-color .2s, color .2s, opacity .2s;
}
.drawer-account-logout:hover { color: #ef4444; border-color: #ef4444; background: rgba(239, 68, 68, .06); }
.drawer-auth-pill {
display: block;
text-align: center;
padding: .85rem;
border-radius: 14px;
font-weight: 700; font-size: .95rem;
text-decoration: none;
transition: transform .2s var(--easing), box-shadow .2s var(--easing), border-color .2s var(--easing), background-color .2s var(--easing), color .2s var(--easing), opacity .2s var(--easing);
}
.drawer-auth-primary {
background: linear-gradient(135deg, #7c3aed, #c026d3);
color: #fff;
box-shadow: 0 8px 20px rgba(124, 58, 237, .3);
}
.drawer-auth-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(124, 58, 237, .45); }
.drawer-auth-ghost {
background: var(--surface);
border: 1.5px solid var(--border-2);
color: var(--text);
}
.drawer-auth-ghost:hover { border-color: var(--accent); color: var(--accent); }
/* Drawer scrollable içerik */
.mobile-drawer { overflow-y: auto; }
/* Eski uyumluluk: drawer-divider/drawer-cat artık kullanılmıyor ama görünmemesi için */
.mobile-drawer .drawer-divider,
.mobile-drawer .drawer-cat,
.mobile-drawer .drawer-highlight { display: none !important; }
/* ============================================================ */
/* ============= ÜRÜN TİPİ SAYFASI (urunler.php) ============= */
/* ============================================================ */
.type-hero {
position: relative;
padding: 2.2rem 0 2rem;
margin-top: .3rem;
margin-bottom: 1.4rem;
overflow: hidden;
}
.type-hero.compact {
padding: 1.6rem 0 1.8rem;
margin-bottom: 1.2rem;
}
.type-hero.compact .th-title { font-size: clamp(1.6rem, 3.2vw, 2.4rem); margin: .35rem 0 .5rem; }
.type-hero.compact .th-desc { margin-bottom: .9rem; }
.type-hero.compact .th-stats { margin-top: .8rem; }
.type-hero.compact .th-emoji-xl { font-size: 4.5rem; }
.type-hero.compact .th-blob { width: 200px; height: 200px; }
.type-hero::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 15% 30%, color-mix(in srgb, var(--type-color) 22%, transparent) 0, transparent 45%),
radial-gradient(circle at 85% 70%, color-mix(in srgb, var(--type-color) 16%, transparent) 0, transparent 50%);
z-index: 0;
}
.type-hero .container { position: relative; z-index: 1; }
.th-inner {
display: grid;
grid-template-columns: 1.4fr .8fr;
gap: 2.5rem;
align-items: center;
background: var(--surface-solid);
border: 1px solid var(--border);
border-radius: 28px;
padding: 2.5rem 2.5rem;
box-shadow: 0 20px 50px color-mix(in srgb, var(--type-color) 18%, transparent);
}
.th-eyebrow {
display: inline-flex; align-items: center; gap: .4rem;
padding: .4rem .9rem;
border-radius: 999px;
background: color-mix(in srgb, var(--type-color) 14%, transparent);
color: var(--type-color);
font-size: .76rem;
font-weight: 700;
letter-spacing: .12em;
}
.th-title {
font-size: clamp(1.8rem, 3.4vw, 2.6rem);
font-weight: 800;
line-height: 1.15;
margin: .9rem 0 .7rem;
color: var(--text);
letter-spacing: -.02em;
}
.th-desc {
font-size: 1.02rem;
color: var(--text-2);
line-height: 1.6;
max-width: 560px;
margin-bottom: 1.2rem;
}
.th-features {
display: flex; flex-wrap: wrap; gap: .45rem;
margin-bottom: 1.4rem;
}
.th-feat {
font-size: .8rem;
font-weight: 600;
color: var(--text-2);
background: var(--surface);
border: 1px solid var(--border);
padding: .35rem .75rem;
border-radius: 999px;
}
.th-stats {
display: flex; gap: 2rem;
padding-top: 1.2rem;
border-top: 1px dashed var(--border);
}
.ths { display: flex; flex-direction: column; line-height: 1.1; }
.ths-num {
font-size: 1.6rem;
font-weight: 800;
background: var(--type-grad);
-webkit-background-clip: text; background-clip: text;
color: transparent;
letter-spacing: -.02em;
}
.ths-lbl {
font-size: .76rem;
color: var(--text-3);
text-transform: uppercase;
letter-spacing: .08em;
font-weight: 600;
margin-top: 4px;
}
.th-right {
position: relative;
height: 100%;
min-height: 240px;
display: flex; align-items: center; justify-content: center;
}
.th-blob {
position: absolute;
inset: 0;
margin: auto;
width: 280px; height: 280px;
background: var(--type-grad);
border-radius: 50%;
filter: blur(2px);
opacity: .9;
box-shadow: 0 30px 80px color-mix(in srgb, var(--type-color) 50%, transparent);
animation: thBlob 14s ease-in-out infinite;
}
@keyframes thBlob {
0%, 100% { border-radius: 50% 48% 52% 50%; transform: rotate(0); }
50% { border-radius: 48% 52% 50% 52%; transform: rotate(8deg) scale(1.04); }
}
.th-emoji-xl {
position: relative; z-index: 1;
font-size: 9rem;
line-height: 1;
filter: drop-shadow(0 12px 24px rgba(0,0,0,.25));
animation: thEmoji 10s ease-in-out infinite;
}
@keyframes thEmoji {
0%, 100% { transform: translateY(0) rotate(-3deg); }
50% { transform: translateY(-8px) rotate(3deg); }
}
@media (max-width: 900px) {
/* Mobile vertical rhythm — TÜM major section'lar arası tutarlı 1rem boşluk.
Margin collapse ile breadcrumb alt 1rem + type-hero üst 0 = 1rem (tek boşluk). */
.breadcrumb { margin: 1rem 0 1rem; font-size: .78rem; }
.type-hero { padding: 0; margin: 0 0 1.5rem; }
.type-hero::before {
background:
radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--type-color) 18%, transparent) 0, transparent 55%);
}
.th-inner {
display: block;
padding: 1.25rem 1.1rem 1.1rem;
border-radius: 22px;
text-align: center;
position: relative;
overflow: hidden;
}
/* Mobilde sadece sade emoji — halo/blob yok */
.th-right { display: none; }
.th-left { text-align: center; }
/* Mobilde eyebrow'a emoji'yi entegre et — aynı satır, sade */
.th-eyebrow {
font-size: .78rem;
padding: .45rem .9rem;
gap: .35rem;
}
.th-eyebrow::first-letter {
font-size: 1.1em;
}
/* TUTARLI içi vertical rhythm: 0.7rem üst, 0.55rem alt — her section arası aynı */
.th-title {
font-size: 1.5rem;
margin: .7rem 0 .55rem;
line-height: 1.25;
}
.th-desc {
font-size: .9rem;
margin: 0 auto .85rem;
max-width: 100%;
line-height: 1.55;
}
.th-features {
justify-content: center;
gap: .35rem;
margin: 0 0 .85rem;
}
.th-feat { font-size: .73rem; padding: .3rem .65rem; }
.th-stats {
justify-content: space-around;
gap: 1rem;
padding-top: .85rem;
margin-top: 0;
}
.ths { align-items: center; text-align: center; }
.ths-num { font-size: 1.5rem; }
.ths-lbl { font-size: .68rem; }
/* Toolbar üst margin yok (type-hero zaten 1.5rem alt verdi), alt 1.5rem → chip ile bölüm başlığı arası ferah + hero↔toolbar ile EŞİT ritim */
.products-toolbar { margin: 0 0 1.5rem !important; }
/* Alt section'lar (cat-sets-section, alt-kategori cardları) üst margin sıfırla — toolbar zaten 1rem verdi */
.cat-sets-section { margin-top: 0 !important; padding-top: 0 !important; border-top: none !important; }
}
@media (max-width: 480px) {
.th-inner { padding: 1.4rem 1rem 1.2rem; border-radius: 20px; }
.th-title { font-size: 1.35rem; }
.th-desc { font-size: .88rem; }
.th-stats { gap: .8rem; }
.ths-num { font-size: 1.3rem; }
.ths-lbl { font-size: .65rem; letter-spacing: .06em; }
.other-types-section { padding: 2rem 0 3rem; text-align: center; }
.ots-head h2 { font-size: 1.25rem; }
.ots-head p { font-size: .85rem; }
/* 2-col yan yana — icon sol + isim sağ, hizalı */
.ots-grid {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: .55rem !important;
max-width: 100% !important;
}
.ots-grid > .ots-card {
flex: none !important;
max-width: none !important;
width: auto !important;
}
.ots-card {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
gap: .55rem !important;
padding: .7rem .75rem !important;
font-size: .8rem !important;
text-align: left;
min-height: 54px;
border-radius: 12px;
}
.ots-name {
flex: 1 !important;
line-height: 1.2 !important;
font-weight: 600;
text-align: left !important;
word-break: break-word;
}
.ots-icon {
width: 32px !important; height: 32px !important;
font-size: 1rem !important;
border-radius: 9px !important;
flex-shrink: 0;
}
.ots-arrow { display: none; }
/* Tek kalan son kart → tam satır + tam genişlik + içerik (emoji+isim) ortalı */
.ots-grid > .ots-card:last-child:nth-child(odd) {
grid-column: 1 / -1;
width: 100%;
justify-self: stretch;
justify-content: center !important; /* emoji + isim birlikte ortada */
}
.ots-grid > .ots-card:last-child:nth-child(odd) .ots-name {
flex: none !important; /* isim genişlemesin, emoji ile yanında dursun */
}
}
/* ============================================================ */
/* ============= STATS STRIP V2 — kart tabanlı ============= */
/* ============================================================ */
/* ============== TRUST WALL — açık, hava gibi stats şeridi ============== */
.trust-wall {
padding: 2.5rem 0;
position: relative;
}
.trust-wall::before,
.trust-wall::after {
content: '';
position: absolute;
left: 8%; right: 8%;
height: 1px;
background: linear-gradient(to right,
transparent,
color-mix(in srgb, var(--accent, #7c3aed) 22%, transparent) 30%,
color-mix(in srgb, var(--accent, #7c3aed) 22%, transparent) 70%,
transparent);
}
.trust-wall::before { top: 0; }
.trust-wall::after { bottom: 0; }
.tw-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
align-items: center;
position: relative;
gap: 0;
}
.tw-stat {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: .35rem 1rem;
transition: transform .3s var(--easing);
}
.tw-stat:not(:last-child)::after {
content: '';
position: absolute;
right: 0;
top: 22%;
bottom: 22%;
width: 1px;
background: linear-gradient(to bottom,
transparent,
var(--border) 30%,
var(--border) 70%,
transparent);
}
.tw-stat:hover { transform: translateY(-3px); }
.tw-icon {
font-size: 1.45rem;
line-height: 1;
margin-bottom: .55rem;
filter: drop-shadow(0 4px 8px color-mix(in srgb, var(--tw-color, var(--accent)) 30%, transparent));
transition: transform .35s var(--easing);
}
.tw-stat:hover .tw-icon { transform: scale(1.15) rotate(-6deg); }
.tw-num {
font-size: 2.05rem;
font-weight: 800;
letter-spacing: -.025em;
line-height: 1;
background: linear-gradient(135deg,
var(--tw-color, var(--accent)),
color-mix(in srgb, var(--tw-color, var(--accent)) 60%, #1a0033));
-webkit-background-clip: text; background-clip: text;
color: transparent;
white-space: nowrap;
}
.tw-num small {
font-size: .42em;
font-weight: 700;
-webkit-text-fill-color: var(--text-3);
color: var(--text-3);
background: none;
margin-left: 1px;
letter-spacing: 0;
}
.tw-lbl {
font-size: .8rem;
font-weight: 600;
color: var(--text-2);
margin-top: .35rem;
letter-spacing: .01em;
}
/* ===== Tablet ===== */
@media (max-width: 900px) {
.trust-wall { padding: 1.75rem 0 2rem; }
.trust-wall::before, .trust-wall::after { left: 4%; right: 4%; }
.tw-grid {
grid-template-columns: 1fr 1fr;
gap: 0;
}
.tw-stat {
padding: 1rem .5rem;
}
/* 5'inci stat mobilde gizleniyor — temiz 2x2 */
.tw-stat:nth-child(5) { display: none; }
.tw-stat::after { display: none; }
/* 2x2 + ayırıcılar: hücreler arası ince çizgiler */
.tw-stat:nth-child(1)::before,
.tw-stat:nth-child(3)::before {
content: '';
position: absolute;
right: 0;
top: 18%; bottom: 18%;
width: 1px;
background: linear-gradient(to bottom,
transparent,
var(--border) 30%,
var(--border) 70%,
transparent);
}
.tw-stat:nth-child(3)::after,
.tw-stat:nth-child(4)::after {
content: '';
display: block;
position: absolute;
left: 14%; right: 14%;
top: 0;
height: 1px;
background: linear-gradient(to right,
transparent,
var(--border) 30%,
var(--border) 70%,
transparent);
width: auto;
bottom: auto;
}
.tw-icon { font-size: 1.3rem; margin-bottom: .45rem; }
.tw-num { font-size: 1.65rem; }
.tw-lbl { font-size: .72rem; }
}
@media (max-width: 480px) {
.tw-stat { padding: .8rem .4rem; }
.tw-num { font-size: 1.4rem; }
.tw-lbl { font-size: .68rem; }
.tw-icon { font-size: 1.15rem; }
}
/* ============================================================ */
/* ============= HERO COLLAGE — fotoğraf mozaiği ============= */
/* ============================================================ */
.hero-collage {
position: relative;
width: 100%;
min-height: 520px;
isolation: isolate;
}
.hc-glow {
position: absolute;
border-radius: 50%;
filter: blur(60px);
z-index: -1;
pointer-events: none;
}
.hc-glow-1 {
width: 360px; height: 360px;
top: -8%; right: -6%;
background: radial-gradient(circle, rgba(251, 191, 36, .35), transparent 70%);
}
.hc-glow-2 {
width: 420px; height: 420px;
bottom: -12%; left: -8%;
background: radial-gradient(circle, rgba(167, 139, 250, .4), transparent 70%);
}
/* Ana tile — sağ-merkez, dominant */
.hc-tile {
position: absolute;
border-radius: 24px;
overflow: hidden;
text-decoration: none;
color: inherit;
background: var(--surface-solid);
transition: transform .5s var(--easing), box-shadow .5s var(--easing);
}
.hc-main {
top: 50%;
right: 12%;
transform: translateY(-50%) rotate(2deg);
width: 64%;
max-width: 320px;
aspect-ratio: 4 / 5;
z-index: 2;
box-shadow:
0 30px 70px -15px rgba(15, 23, 42, .4),
0 0 0 1px rgba(255, 255, 255, .5) inset;
}
html[data-theme="dark"] .hc-main {
box-shadow:
0 30px 70px -10px rgba(0, 0, 0, .6),
0 0 0 1px rgba(255, 255, 255, .08) inset;
}
.hc-main:hover {
transform: translateY(calc(-50% - 6px)) rotate(0) scale(1.02);
}
.hc-main .hc-img {
width: 100%;
height: 100%;
background: linear-gradient(135deg,
color-mix(in srgb, var(--hc-color, #7c3aed) 12%, var(--surface)),
color-mix(in srgb, var(--hc-color, #7c3aed) 4%, var(--surface)));
}
.hc-img {
position: relative;
width: 100%;
height: 100%;
display: flex; align-items: center; justify-content: center;
}
.hc-img img,
.hc-img svg {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform .6s var(--easing);
}
.hc-tile:hover .hc-img img,
.hc-tile:hover .hc-img svg { transform: scale(1.06); }
.hc-tag {
position: absolute;
top: 14px; left: 14px;
z-index: 3;
display: inline-flex; align-items: center; gap: .3rem;
padding: .4rem .75rem;
border-radius: 99px;
background: var(--hc-color, #7c3aed);
color: #fff;
font-size: .72rem;
font-weight: 700;
letter-spacing: .02em;
box-shadow: 0 4px 12px color-mix(in srgb, var(--hc-color, #7c3aed) 45%, transparent);
}
.hc-info {
position: absolute;
left: 14px; right: 14px; bottom: 14px;
z-index: 3;
padding: .85rem 1rem;
border-radius: 16px;
background: rgba(255, 255, 255, .96);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
display: flex; align-items: center; justify-content: space-between;
gap: .6rem;
box-shadow: 0 8px 20px rgba(15, 23, 42, .15);
}
html[data-theme="dark"] .hc-info {
background: rgba(20, 14, 40, .92);
}
.hc-name {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: .92rem;
font-weight: 700;
color: var(--text);
letter-spacing: -.01em;
flex: 1;
min-width: 0;
}
.hc-old {
display: inline-flex; align-items: center; gap: .25rem;
font-size: .62rem; font-weight: 600;
color: var(--text-3);
margin-bottom: 1px;
}
.hc-old-num {
text-decoration: line-through;
text-decoration-color: var(--text-3);
text-decoration-thickness: 1.2px;
}
.hc-old em {
display: inline-block;
font-style: normal;
text-decoration: none;
font-size: .68rem;
font-weight: 700;
color: #fff;
background: linear-gradient(135deg, #a78bfa, var(--accent));
padding: 2px 8px;
border-radius: 999px;
letter-spacing: .02em;
white-space: nowrap;
box-shadow: 0 2px 6px color-mix(in srgb, var(--accent) 30%, transparent);
}
.hc-price-num { display: inline-block; }
.hc-price {
font-size: 1rem;
font-weight: 800;
color: var(--hc-color, var(--accent));
letter-spacing: -.02em;
white-space: nowrap;
flex-shrink: 0;
}
.hc-price small {
font-size: .65em;
font-weight: 600;
color: var(--text-3);
margin-left: 1px;
}
/* Yan tile'lar — küçük peek kartları */
.hc-side {
width: 38%;
max-width: 175px;
aspect-ratio: 3 / 4;
z-index: 1;
box-shadow:
0 20px 45px -12px rgba(15, 23, 42, .35),
0 0 0 1px rgba(255, 255, 255, .4) inset;
}
html[data-theme="dark"] .hc-side {
box-shadow:
0 20px 45px -8px rgba(0, 0, 0, .55),
0 0 0 1px rgba(255, 255, 255, .06) inset;
}
.hc-side-top {
top: 4%;
left: 0;
transform: rotate(-7deg);
border-radius: 22px;
}
.hc-side-bot {
bottom: 6%;
right: 0;
transform: rotate(6deg);
border-radius: 22px;
}
.hc-side:hover {
transform: rotate(0) scale(1.05);
z-index: 4;
}
.hc-side .hc-img {
background: linear-gradient(135deg,
color-mix(in srgb, var(--hc-color, #7c3aed) 14%, var(--surface)),
color-mix(in srgb, var(--hc-color, #7c3aed) 4%, var(--surface)));
}
.hc-side-tag {
position: absolute;
bottom: 10px; left: 10px;
z-index: 3;
padding: .3rem .55rem;
border-radius: 99px;
background: rgba(255, 255, 255, .95);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
font-size: .68rem;
font-weight: 700;
color: var(--text);
box-shadow: 0 3px 8px rgba(15, 23, 42, .15);
letter-spacing: .01em;
}
html[data-theme="dark"] .hc-side-tag {
background: rgba(20, 14, 40, .92);
color: #fff;
}
/* Yorum/puan rozeti */
.hc-rating {
position: absolute;
top: 14%;
right: -2%;
z-index: 5;
display: flex; align-items: center; gap: .65rem;
padding: .65rem .9rem .65rem .8rem;
border-radius: 99px;
background: var(--surface-solid);
box-shadow:
0 18px 40px -10px rgba(15, 23, 42, .35),
0 0 0 1px var(--border) inset;
transform: rotate(4deg);
}
.hcr-stars {
font-size: .9rem;
letter-spacing: 1px;
background: linear-gradient(135deg, #fbbf24, #f59e0b);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
.hcr-text { display: flex; flex-direction: column; line-height: 1.1; }
.hcr-text strong {
font-size: .9rem;
font-weight: 800;
color: var(--text);
letter-spacing: -.01em;
}
.hcr-text span {
font-size: .68rem;
font-weight: 600;
color: var(--text-3);
}
@media (max-width: 1024px) {
.hero-collage { min-height: 460px; }
.hc-main { width: 60%; max-width: 280px; right: 8%; }
.hc-side { width: 36%; max-width: 155px; }
.hc-glow-1, .hc-glow-2 { width: 320px; height: 320px; }
}
@media (max-width: 720px) {
.hero-collage { min-height: 380px; margin-top: 1.5rem; }
.hc-main { right: 8%; width: 62%; max-width: 240px; }
.hc-side { width: 38%; max-width: 130px; }
.hc-info { padding: .7rem .8rem; border-radius: 12px; gap: .45rem; }
.hc-name { font-size: .85rem; }
.hc-price { font-size: .92rem; }
.hc-tag { font-size: .65rem; padding: .32rem .6rem; }
.hc-side-tag { font-size: .62rem; padding: .25rem .5rem; }
.hc-rating { padding: .55rem .8rem; gap: .5rem; right: 0; top: 8%; }
.hcr-stars { font-size: .8rem; }
.hcr-text strong { font-size: .82rem; }
.hcr-text span { font-size: .62rem; }
.hc-glow-1, .hc-glow-2 { width: 240px; height: 240px; }
}
/* Eski hero-marquee tamamen gizle (HTML kalmadı ama yine de güvenlik) */
.hero-marquee { display: none !important; }
/* ============= urunler.php: BÖLÜMLER + MİNİ-NAV ============= */
.type-section-nav {
position: sticky;
top: var(--header-h, 64px);
z-index: 50;
margin: 1.5rem 0 .5rem;
padding: .55rem 0;
background: color-mix(in srgb, var(--surface-solid) 85%, transparent);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-radius: 16px;
}
.tsn-track {
display: flex;
gap: .5rem;
flex-wrap: wrap; /* sablonlar tarzı: kayma yok, hepsi sığar */
justify-content: center;
padding: .15rem .9rem;
scrollbar-width: none;
-ms-overflow-style: none;
}
.tsn-track::-webkit-scrollbar { display: none; }
/* MOBİL — sablonlar tarzı 2-kolon grid, "Tümü" tam satır */
@media (max-width: 768px) {
.tsn-track {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: .45rem !important;
padding: .35rem .5rem !important;
}
/* İlk pill (Tümü) tam satır */
.tsn-track > .tsn-pill:first-child {
grid-column: 1 / -1 !important;
justify-content: center !important;
}
/* Son pill yalnız kalırsa tam satır + ortalı (urunler.php) */
.tsn-track > .tsn-pill:last-child:nth-child(even) {
grid-column: 1 / -1 !important;
justify-content: center !important;
}
.tsn-pill {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
padding: .5rem .65rem !important;
font-size: .74rem !important;
gap: .35rem !important;
overflow: visible !important;
white-space: normal !important;
line-height: 1.2 !important;
min-height: 38px;
}
.tsn-emoji { font-size: .95rem !important; flex-shrink: 0; }
.tsn-label {
flex: 1;
text-align: left;
white-space: normal !important; /* uzun isim 2 satıra bölünsün, kesilmesin */
overflow: visible !important;
text-overflow: clip !important;
word-break: keep-all;
margin: 0 .2rem;
line-height: 1.2;
}
.tsn-count {
min-width: 22px !important;
height: 20px !important;
padding: 0 .45rem !important;
font-size: .68rem !important;
flex-shrink: 0;
margin: 0 !important;
}
}
.tsn-pill {
position: relative;
display: inline-flex; align-items: center; gap: .4rem;
padding: .5rem .9rem;
border-radius: 999px;
background: var(--surface);
border: 1px solid var(--border);
font-size: .82rem;
font-weight: 600;
color: var(--text-2);
text-decoration: none;
white-space: nowrap;
flex-shrink: 0;
transition: transform .2s var(--easing), box-shadow .2s var(--easing), border-color .2s var(--easing), background-color .2s var(--easing), color .2s var(--easing), opacity .2s var(--easing);
scroll-snap-align: start;
}
.tsn-pill:hover {
border-color: var(--tsn-color);
color: var(--text);
transform: translateY(-1px);
}
.tsn-pill.active {
background: var(--tsn-color);
border-color: var(--tsn-color);
color: #fff;
box-shadow: 0 6px 14px color-mix(in srgb, var(--tsn-color) 30%, transparent);
}
.tsn-emoji { font-size: 1em; }
.tsn-label { line-height: 1; }
.tsn-count {
display: inline-flex; align-items: center; justify-content: center;
min-width: 22px; height: 20px;
padding: 0 6px;
border-radius: 999px;
background: color-mix(in srgb, var(--tsn-color) 18%, transparent);
color: var(--tsn-color);
font-size: .72rem;
font-weight: 700;
}
.tsn-pill.active .tsn-count {
background: rgba(255, 255, 255, .25);
color: #fff;
}
/* Bölüm bloğu */
.type-cat-section {
scroll-margin-top: calc(var(--header-h, 64px) + 70px);
padding: 1.5rem 0 2.5rem;
}
.type-cat-section + .type-cat-section {
border-top: 1px dashed var(--border);
}
.tcs-head {
display: flex; align-items: center; justify-content: space-between;
gap: 1rem;
margin-bottom: 1.2rem;
}
.tcs-head-left {
display: flex; align-items: center; gap: .9rem;
min-width: 0;
}
.tcs-icon {
width: 46px; height: 46px;
border-radius: 14px;
display: inline-flex; align-items: center; justify-content: center;
background: color-mix(in srgb, var(--cat-color) 14%, transparent);
color: var(--cat-color);
font-size: 1.3rem;
flex-shrink: 0;
}
.tcs-title {
font-size: 1.35rem;
font-weight: 800;
color: var(--text);
margin: 0;
letter-spacing: -.01em;
}
.tcs-tagline {
font-size: .85rem;
color: var(--text-3);
margin: .15rem 0 0;
}
.tcs-count {
font-size: .76rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--cat-color);
background: color-mix(in srgb, var(--cat-color) 12%, transparent);
padding: .35rem .7rem;
border-radius: 999px;
flex-shrink: 0;
}
@media (max-width: 720px) {
/* Section üst padding sıfırla — toolbar zaten 1rem alt boşluk verdi (tutarlı rhythm) */
.type-cat-section { padding: 0 0 1.5rem; }
.type-cat-section + .type-cat-section { padding-top: 1rem; border-top: 1px dashed var(--border); }
.tcs-head { flex-direction: column; align-items: flex-start; gap: .55rem; margin-bottom: 1rem; }
.tcs-icon { width: 38px; height: 38px; font-size: 1.1rem; }
.tcs-title { font-size: 1.15rem; }
.tcs-tagline { font-size: .78rem; }
.type-section-nav { margin: 1rem 0 .25rem; }
.tsn-pill { padding: .45rem .8rem; font-size: .78rem; }
}
/* Diğer ürün tipleri stripi */
.other-types-section {
padding: 3rem 0 4rem;
border-top: 1px solid var(--border);
background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent) 4%, transparent));
}
.ots-head {
text-align: center;
margin-bottom: 1.8rem;
}
.ots-head h2 {
font-size: 1.6rem;
font-weight: 800;
color: var(--text);
margin-bottom: .35rem;
}
.ots-head p {
color: var(--text-3);
font-size: .95rem;
}
.ots-grid {
display: flex;
flex-wrap: wrap;
justify-content: center; /* Son sıra ortalı dursun */
gap: .9rem;
max-width: 1240px;
margin: 0 auto;
}
.ots-grid > .ots-card {
flex: 1 1 240px;
max-width: 290px;
}
@media (max-width: 1100px) {
.ots-grid { max-width: 980px; gap: .8rem; }
.ots-grid > .ots-card { flex: 1 1 200px; max-width: 240px; }
}
@media (max-width: 720px) {
.ots-grid > .ots-card { flex: 1 1 calc(50% - .35rem); max-width: none; }
}
.ots-card {
position: relative;
display: flex; align-items: center; gap: .95rem;
padding: 1.15rem 1.3rem;
border-radius: 18px;
background: var(--surface-solid);
border: 1px solid var(--border);
font-weight: 600;
font-size: 1.02rem;
color: var(--text);
text-decoration: none;
transition: transform .25s var(--easing), box-shadow .25s var(--easing), border-color .25s var(--easing), background-color .25s var(--easing), color .25s var(--easing), opacity .25s var(--easing);
overflow: hidden;
isolation: isolate;
}
@media (max-width: 1100px) {
.ots-card { padding: 1rem 1.1rem; font-size: .95rem; gap: .8rem; }
}
.ots-card::before {
content: ''; position: absolute; inset: 0; z-index: -1;
background: linear-gradient(135deg, var(--ot-color), color-mix(in srgb, var(--ot-color) 65%, #1a0033));
opacity: 0;
transition: opacity .25s var(--easing);
}
.ots-card:hover {
color: #fff;
border-color: transparent;
transform: translateY(-3px);
box-shadow: 0 14px 30px color-mix(in srgb, var(--ot-color) 30%, transparent);
}
.ots-card:hover::before { opacity: 1; }
.ots-icon {
width: 44px; height: 44px;
border-radius: 13px;
background: color-mix(in srgb, var(--ot-color) 18%, transparent);
display: inline-flex; align-items: center; justify-content: center;
font-size: 1.35rem;
flex-shrink: 0;
transition: background .25s var(--easing);
}
@media (max-width: 1100px) {
.ots-icon { width: 38px; height: 38px; border-radius: 11px; font-size: 1.2rem; }
}
.ots-card:hover .ots-icon {
background: rgba(255,255,255,.22);
}
.ots-name { flex: 1; line-height: 1.2; }
.ots-arrow {
color: var(--text-3);
font-weight: 700;
opacity: 0;
transform: translateX(-6px);
transition: transform .25s var(--easing), box-shadow .25s var(--easing), border-color .25s var(--easing), background-color .25s var(--easing), color .25s var(--easing), opacity .25s var(--easing);
flex-shrink: 0;
}
.ots-card:hover .ots-arrow {
color: #fff;
opacity: 1;
transform: translateX(0);
}
/* ============================================================ */
/* ============= MEGA MENÜ V2: GÖRSEL RÖTUŞ ============== */
/* ============================================================ */
.mega-menu.mega-products {
border-radius: 20px;
box-shadow:
0 30px 60px -15px rgba(15, 23, 42, .35),
0 0 0 1px var(--border);
background: linear-gradient(180deg, var(--surface-solid), color-mix(in srgb, var(--accent) 3%, var(--surface-solid)));
}
html[data-theme="dark"] .mega-menu.mega-products {
box-shadow:
0 30px 60px -10px rgba(0, 0, 0, .65),
0 0 0 1px var(--border);
}
.mp-grid { gap: .6rem; }
.mp-card {
padding: .95rem 1rem;
border-radius: 16px;
}
.mp-card:hover {
box-shadow: 0 16px 32px color-mix(in srgb, var(--mp-color, var(--accent)) 35%, transparent);
}
.mp-icon {
font-size: 1.5rem;
filter: drop-shadow(0 2px 4px rgba(0,0,0,.08));
}
.mp-foot {
margin-top: 1.1rem;
}
.mp-foot-link {
border-radius: 16px;
padding: .9rem 1rem;
}
/* ============================ HERO SLIDER (görsel-bazlı, hero yerine) ============================ */
.hero-slider {
position: relative;
width: calc(100% - 3rem);
max-width: 1380px;
margin: 1.6rem auto 0;
aspect-ratio: 12 / 5;
max-height: 540px;
overflow: hidden;
background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #0f172a 100%);
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
border-radius: 28px;
isolation: isolate;
cursor: grab; /* mouse drag mümkün — kullanıcıya işaret */
user-select: none; /* metin seçimi engelle — drag sırasında temiz UX */
box-shadow:
0 30px 60px -25px rgba(124, 58, 237, .35),
0 18px 40px -18px rgba(15, 23, 42, .4),
0 4px 12px -4px rgba(0, 0, 0, .12),
inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.hero-slider:active { cursor: grabbing; }
/* Slider içindeki tüm img/picture → browser native drag (hayalet görsel) engelle */
.hero-slider img,
.hero-slider picture {
-webkit-user-drag: none;
user-drag: none;
pointer-events: none; /* tıklama parent'a düşsün — JS drag handler için */
}
/* Soft glow ring — hover'da öne çıkar */
.hero-slider::after {
content: '';
position: absolute;
inset: -4px;
border-radius: 32px;
background: linear-gradient(135deg, rgba(124, 58, 237, .35), rgba(236, 72, 153, .25));
filter: blur(22px);
opacity: 0;
z-index: -1;
transition: opacity .35s ease;
pointer-events: none;
}
.hero-slider:hover::after { opacity: .9; }
.hs-slide {
grid-column: 1; grid-row: 1;
position: relative;
width: 100%; height: 100%;
opacity: 0;
transition: opacity .6s ease;
pointer-events: none;
}
.hs-slide.active {
opacity: 1;
pointer-events: auto;
z-index: 2;
}
.hero-slider[data-count="1"] .hs-slide {
opacity: 1;
pointer-events: auto;
}
.hs-pic {
position: absolute; inset: 0;
display: block;
width: 100%; height: 100%;
}
.hs-img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.hs-overlay {
position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.0) 30%, rgba(0,0,0,.25) 100%),
rgba(0, 0, 0, var(--hs-overlay, .3));
pointer-events: none;
}
.hs-content {
position: absolute; inset: 0;
display: flex;
padding: clamp(1.5rem, 5vh, 3.5rem) clamp(1.2rem, 6vw, 5rem);
pointer-events: none;
}
.hs-content-inner {
max-width: 560px;
pointer-events: auto;
color: var(--hs-text, #fff);
text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}
/* 9-pozisyon grid: top/middle/bottom × left/center/right */
.hs-pos-top-left .hs-content { align-items: flex-start; justify-content: flex-start; }
.hs-pos-top-center .hs-content { align-items: flex-start; justify-content: center; text-align: center; }
.hs-pos-top-right .hs-content { align-items: flex-start; justify-content: flex-end; text-align: right; }
.hs-pos-middle-left .hs-content { align-items: center; justify-content: flex-start; }
.hs-pos-middle-center .hs-content { align-items: center; justify-content: center; text-align: center; }
.hs-pos-middle-right .hs-content { align-items: center; justify-content: flex-end; text-align: right; }
.hs-pos-bottom-left .hs-content { align-items: flex-end; justify-content: flex-start; }
.hs-pos-bottom-center .hs-content { align-items: flex-end; justify-content: center; text-align: center; }
.hs-pos-bottom-right .hs-content { align-items: flex-end; justify-content: flex-end; text-align: right; }
/* Center pozisyonlarda text-align ile birlikte inner margin */
.hs-pos-top-center .hs-content-inner,
.hs-pos-middle-center .hs-content-inner,
.hs-pos-bottom-center .hs-content-inner { margin: 0 auto; }
.hs-title {
margin: 0;
font-size: clamp(1.6rem, 4.2vw, 3rem);
font-weight: 800;
line-height: 1.15;
letter-spacing: -.02em;
}
.hs-sub {
margin: .55rem 0 0;
font-size: clamp(.9rem, 1.6vw, 1.15rem);
font-weight: 500;
opacity: .95;
line-height: 1.4;
}
.hs-cta {
display: inline-flex;
align-items: center; gap: .45rem;
margin-top: 1.2rem;
padding: .85rem 1.6rem;
background: var(--accent, #7c3aed);
color: #fff !important;
text-decoration: none;
border-radius: 99px;
font-size: 1rem;
font-weight: 700;
letter-spacing: .01em;
white-space: nowrap;
max-width: 100%;
text-shadow: none;
box-shadow: 0 8px 24px rgba(124, 58, 237, .35);
transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.hs-cta:hover {
transform: translateY(-2px);
box-shadow: 0 12px 30px rgba(124, 58, 237, .5);
}
.hs-arrow {
position: absolute;
top: 50%; transform: translateY(-50%);
z-index: 4;
width: 48px; height: 48px;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(255, 255, 255, .25);
border: 1.5px solid rgba(255, 255, 255, .35);
color: #fff;
border-radius: 50%;
cursor: pointer;
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease, color .2s ease, opacity .2s ease;
}
.hs-arrow:hover {
background: rgba(255, 255, 255, .45);
transform: translateY(-50%) scale(1.08);
}
.hs-arrow-prev { left: 1.2rem; }
.hs-arrow-next { right: 1.2rem; }
.hs-dots {
position: absolute;
bottom: 1.2rem;
left: 50%;
transform: translateX(-50%);
z-index: 4;
display: flex;
gap: .45rem;
}
.hs-dot {
width: 32px; height: 4px;
background: rgba(255, 255, 255, .4);
border: none; padding: 0;
border-radius: 99px;
cursor: pointer;
transition: background .2s ease, transform .2s ease;
}
.hs-dot:hover { background: rgba(255, 255, 255, .65); }
.hs-dot.active { background: #fff; width: 44px; }
/* Slider counter (1 / 3) — sağ-üst köşe */
.hs-counter {
position: absolute;
top: 1.1rem;
right: 1.2rem;
z-index: 4;
display: inline-flex;
align-items: baseline;
gap: .15rem;
padding: .45rem .85rem;
background: rgba(15, 23, 42, .55);
backdrop-filter: blur(10px) saturate(160%);
-webkit-backdrop-filter: blur(10px) saturate(160%);
border: 1px solid rgba(255, 255, 255, .15);
border-radius: 99px;
color: #fff;
font-size: .82rem;
font-weight: 600;
letter-spacing: .03em;
font-variant-numeric: tabular-nums;
pointer-events: none;
user-select: none;
}
.hs-counter .hs-cur {
display: inline-block;
min-width: 1ch;
font-size: .95rem;
font-weight: 800;
color: #fff;
}
.hs-counter .hs-sep {
opacity: .5;
margin: 0 .15rem;
}
.hs-counter .hs-total {
opacity: .8;
}
.hs-counter .hs-cur.flip {
animation: hs-cur-flip .35s ease;
}
@keyframes hs-cur-flip {
0% { opacity: 0; transform: translateY(-6px); }
100% { opacity: 1; transform: translateY(0); }
}
@media (max-width: 768px) {
/* Mobilde önerilen 4:5 dikey mobil görsele tam uy → kırpılma yok */
.hero-slider { aspect-ratio: 4 / 5; }
/* Mobil: tüm yazıları alt'a topla (sol/orta/sağ horizontal'i KORU — title text-align değişir) */
.hs-content {
padding: 1rem 1.2rem 3.5rem !important;
align-items: flex-end !important;
}
/* Horizontal align'ı koru (left/center/right) — kullanıcı seçimi anlamlı kalır */
.hs-pos-top-left .hs-content,
.hs-pos-middle-left .hs-content,
.hs-pos-bottom-left .hs-content { justify-content: flex-start; text-align: left; }
.hs-pos-top-center .hs-content,
.hs-pos-middle-center .hs-content,
.hs-pos-bottom-center .hs-content { justify-content: center; text-align: center; }
.hs-pos-top-right .hs-content,
.hs-pos-middle-right .hs-content,
.hs-pos-bottom-right .hs-content { justify-content: flex-end; text-align: right; }
.hs-content-inner { max-width: 92%; }
.hs-cta { padding: .65rem 1.2rem; font-size: .88rem; margin-top: .8rem; }
.hs-arrow { width: 36px; height: 36px; top: 38%; }
.hs-arrow-prev { left: .5rem; }
.hs-arrow-next { right: .5rem; }
.hs-arrow svg { width: 18px; height: 18px; }
.hs-dots { bottom: .85rem; }
.hs-dot { width: 20px; height: 3px; }
}
@media (max-width: 480px) {
.hero-slider { aspect-ratio: 4 / 5; }
.hs-title { font-size: clamp(1.3rem, 6vw, 1.9rem) !important; }
.hs-sub { font-size: clamp(.78rem, 3.2vw, .92rem) !important; }
.hs-cta { padding: .55rem 1rem; font-size: .8rem; }
.hs-arrow { width: 32px; height: 32px; }
}
/* Admin liste: hero slide kartları */
.hs-list { display: grid; gap: .8rem; }
.hs-list-item {
background: var(--adm-card, #fff);
border: 1.5px solid var(--adm-border, #e5e7eb);
border-radius: 12px;
overflow: hidden;
display: grid;
grid-template-columns: 280px 1fr;
gap: 0;
}
.hs-list-item.off { opacity: .55; }
.hs-list-img {
position: relative;
aspect-ratio: 3 / 1;
background: #f3f4f6;
overflow: hidden;
}
.hs-list-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hs-list-title-overlay {
position: absolute; inset: 0;
display: flex; flex-direction: column; justify-content: center;
padding: .6rem .9rem;
background: rgba(0, 0, 0, .25);
font-size: 12px;
}
.hs-list-title-overlay strong { font-size: 13px; line-height: 1.2; }
.hs-list-title-overlay span { font-size: 11px; line-height: 1.3; margin-top: 2px; }
.hs-list-meta {
padding: .9rem 1.1rem;
display: flex; align-items: center; justify-content: space-between;
gap: .6rem;
flex-wrap: wrap;
}
.hs-list-actions { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
@media (max-width: 640px) {
.hs-list-item { grid-template-columns: 1fr; }
}
/* Admin yeni-slide form */
.hs-spec-card {
display: flex; align-items: center; gap: .7rem;
padding: .75rem 1rem;
background: linear-gradient(135deg, #fef3c7, #fde68a);
border: 1px solid #fbbf24;
border-radius: 10px;
margin-bottom: 1rem;
}
.hs-spec-icon {
width: 36px; height: 36px;
display: inline-flex; align-items: center; justify-content: center;
background: #fff; border-radius: 8px; font-size: 18px;
flex-shrink: 0;
box-shadow: 0 2px 4px rgba(180, 83, 9, .15);
}
.hs-spec-card strong { display: block; font-size: 13.5px; color: #78350f; }
.hs-spec-card small { display: block; font-size: 11.5px; color: #713f12; margin-top: 2px; }
.hs-current-img {
margin-bottom: .8rem;
padding: .6rem;
border: 1.5px dashed var(--adm-border, #e5e7eb);
border-radius: 10px;
background: #fafbfd;
}
.hs-current-img img {
display: block;
width: 100%; max-width: 480px;
aspect-ratio: 3 / 1;
object-fit: cover;
border-radius: 6px;
}
.hs-current-img small { display: block; margin-top: .35rem; color: var(--adm-text-3, #6b7280); font-size: 11.5px; }
.hs-preview-frame {
width: 100%; max-width: 480px;
aspect-ratio: 3 / 1;
border: 1.5px solid var(--adm-border, #e5e7eb);
border-radius: 8px;
overflow: hidden;
background: #f8f9fb;
}
.hs-preview-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ============================ TİP STRİP — yatay scroll vitrin ============================ */
.ts-section {
position: relative;
padding: 3rem 0 3.2rem; /* Üst+alt dengeli — vitrinler arası nefes alsın */
}
.ts-section:nth-of-type(odd) {
background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--ts-color, #7c3aed) 4%, transparent) 30%, transparent);
}
.ts-head {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 1rem; margin-bottom: 1.2rem; flex-wrap: wrap;
}
.ts-head-text { display: flex; align-items: center; gap: .9rem; }
.ts-emoji {
font-size: 2.4rem; line-height: 1;
filter: drop-shadow(0 4px 10px color-mix(in srgb, var(--ts-color, #7c3aed) 30%, transparent));
}
.ts-title { margin: 0; font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.ts-sub { margin: .2rem 0 0; font-size: .85rem; color: var(--text-2); }
.ts-all {
display: inline-flex; align-items: center; gap: .35rem;
padding: .55rem 1.1rem;
background: var(--surface);
border: 1.5px solid color-mix(in srgb, var(--ts-color, #7c3aed) 25%, var(--border));
color: var(--ts-color, #7c3aed); text-decoration: none;
border-radius: 99px;
font-size: .85rem; font-weight: 700;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease, color .2s ease, opacity .2s ease;
}
.ts-all:hover { background: var(--ts-color, #7c3aed); color: #fff; transform: translateX(3px); }
.ts-scroll-wrap { position: relative; }
.ts-scroll {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 240px;
gap: 1rem;
overflow-x: auto; overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
padding: .35rem .25rem 1rem;
scrollbar-width: thin;
scrollbar-color: color-mix(in srgb, var(--ts-color, #7c3aed) 40%, transparent) transparent;
}
.ts-scroll::-webkit-scrollbar { height: 6px; }
.ts-scroll::-webkit-scrollbar-track { background: transparent; }
.ts-scroll::-webkit-scrollbar-thumb {
background: color-mix(in srgb, var(--ts-color, #7c3aed) 35%, transparent);
border-radius: 99px;
}
.ts-arrow {
position: absolute; top: 40%; transform: translateY(-50%);
z-index: 5;
width: 40px; height: 40px;
display: inline-flex; align-items: center; justify-content: center;
background: #fff;
border: 1.5px solid var(--border);
border-radius: 50%;
color: var(--ts-color, #7c3aed);
cursor: pointer;
box-shadow: 0 6px 16px rgba(15,23,42,.1);
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease, color .2s ease, opacity .2s ease;
}
.ts-arrow:hover {
background: var(--ts-color, #7c3aed); color: #fff;
transform: translateY(-50%) scale(1.08);
border-color: transparent;
}
.ts-arrow-prev { left: -8px; }
.ts-arrow-next { right: -8px; }
.ts-arrow.disabled { opacity: 0; pointer-events: none; }
/* ====== TS STRIP CARD — PREMIUM DİKEY (Seçenek B): tag + başlık + desc + rating + fiyat ====== */
.ts-card {
position: relative;
box-sizing: border-box;
width: 240px;
min-width: 240px;
max-width: 240px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
overflow: hidden;
scroll-snap-align: start;
display: flex; flex-direction: column;
transition: transform .25s var(--easing), box-shadow .25s var(--easing), border-color .25s var(--easing);
}
.ts-card:hover {
transform: translateY(-3px);
border-color: color-mix(in srgb, var(--ts-color, #7c3aed) 35%, var(--border));
box-shadow: 0 12px 28px color-mix(in srgb, var(--ts-color, #7c3aed) 18%, transparent);
}
.ts-media {
position: relative; display: block;
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
background: linear-gradient(135deg,
color-mix(in srgb, var(--ts-color, #7c3aed) 8%, var(--surface)),
color-mix(in srgb, var(--ts-color, #7c3aed) 2%, var(--surface)));
}
.ts-media img, .ts-media svg, .ts-media .pc-cover {
width: 100%; height: 100%;
object-fit: cover; display: block;
transition: transform .5s var(--easing);
}
.ts-card:hover .ts-media img,
.ts-card:hover .ts-media svg { transform: scale(1.06); }
.ts-badge {
position: absolute; top: .55rem; left: .55rem;
padding: 3px 8px;
font-size: .62rem; font-weight: 800; letter-spacing: .03em;
color: #fff; border-radius: 99px; z-index: 2;
}
.ts-badge.bestseller { background: linear-gradient(135deg, #f59e0b, #ec4899); }
.ts-badge.fresh { background: linear-gradient(135deg, #06b6d4, #3b82f6); }
.ts-disc {
position: absolute; bottom: .55rem; left: .55rem;
padding: 3px 8px;
font-size: .65rem; font-weight: 800; letter-spacing: .03em;
color: #fff;
background: linear-gradient(135deg, #ef4444, #f59e0b);
border-radius: 99px; z-index: 2;
}
.ts-fav {
position: absolute; top: .55rem; right: .55rem;
z-index: 3;
width: 28px; height: 28px;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(255,255,255,.94);
border: none; border-radius: 50%;
color: var(--text-2); cursor: pointer;
box-shadow: 0 3px 10px rgba(15,23,42,.12);
transition: transform .2s var(--easing), box-shadow .2s var(--easing), border-color .2s var(--easing), background-color .2s var(--easing), color .2s var(--easing), opacity .2s var(--easing);
}
.ts-fav:hover { transform: scale(1.1); color: #ec4899; }
.ts-fav.active { color: #ec4899; }
.ts-body {
padding: .65rem .8rem .75rem;
display: flex; flex-direction: column;
gap: .35rem;
flex: 1;
/* foot her zaman dipte, üst içerik tepede — aradaki boşluk sıfır gözükür */
justify-content: flex-start;
}
.ts-type-tag {
align-self: flex-start;
display: inline-flex; align-items: center; gap: .25rem;
padding: 3px 9px;
font-size: .6rem; font-weight: 700;
letter-spacing: .04em; text-transform: uppercase;
color: #fff; border-radius: 99px;
box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.ts-name {
margin: .25rem 0 0;
font-size: .95rem; font-weight: 700; line-height: 1.3;
color: var(--text);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden; word-break: break-word; overflow-wrap: anywhere;
/* 2 satır sabit yer — uzun başlıklarda "..." ile kesilir, tüm kartlar aynı yükseklikte */
min-height: calc(.95rem * 1.3 * 2);
max-height: calc(.95rem * 1.3 * 2);
}
.ts-name a { color: inherit; text-decoration: none; }
.ts-name a:hover { color: var(--ts-color, var(--accent)); }
.ts-desc {
margin: 0;
font-size: .72rem; color: var(--text-3); line-height: 1.35;
display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
overflow: hidden; word-break: break-word; overflow-wrap: anywhere;
/* Her zaman 1 satır yer — tüm kartlarda yapı eşit */
min-height: calc(.72rem * 1.35);
max-height: calc(.72rem * 1.35);
}
.ts-mini-meta {
display: flex; gap: .5rem;
font-size: .7rem; color: var(--text-2);
/* Her zaman 1 satır yer — rating yoksa da yer tutar */
min-height: calc(.7rem * 1.4);
}
.ts-mini-meta strong { color: var(--text); font-weight: 700; }
.ts-mini-meta span:first-child { color: #f59e0b; }
.ts-foot {
margin-top: auto;
display: flex; align-items: center; justify-content: space-between;
gap: .5rem; padding-top: .25rem;
}
.ts-price {
font-size: 1rem; font-weight: 800; color: var(--accent);
letter-spacing: -.01em; line-height: 1.05;
display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px;
justify-content: flex-end;
}
/* yıldız + sold (ts-price'ın 1. satırı) — eski ts-mini-meta renk şemasıyla aynı */
.ts-meta-line {
display: inline-flex; align-items: center; gap: .5rem;
font-size: .82rem; color: var(--text-2);
font-weight: 500; letter-spacing: 0;
white-space: nowrap;
line-height: 1;
margin-top: -2px;
}
.ts-meta-line strong { color: var(--text); font-weight: 700; }
.ts-meta-line span:first-child { color: #f59e0b; }
.ts-price.empty { font-size: .78rem; color: var(--text-3); font-weight: 600; }
.ts-price-num { display: inline-block; }
.ts-old {
display: inline-flex; align-items: center; gap: .35rem;
font-size: .76rem; font-weight: 600;
color: var(--text-3);
flex-wrap: nowrap;
white-space: nowrap;
margin: 0;
}
.ts-old-num {
text-decoration: line-through;
text-decoration-color: var(--text-3);
text-decoration-thickness: 1.5px;
}
.ts-old em {
display: inline-block;
font-style: normal;
text-decoration: none;
font-size: .72rem;
font-weight: 700;
color: #fff;
background: linear-gradient(135deg, #a78bfa, var(--accent));
padding: 3px 9px;
border-radius: 999px;
letter-spacing: .02em;
white-space: nowrap;
box-shadow: 0 2px 6px color-mix(in srgb, var(--accent) 30%, transparent);
}
.ts-from, .bs-from, .hc-from {
display: block;
font-size: .68rem;
font-weight: 800;
color: var(--text-3);
text-transform: uppercase;
letter-spacing: .06em;
line-height: 1;
opacity: .9;
margin: 0;
}
.bs-price-val,
.hc-price {
display: inline-flex !important;
flex-direction: column;
align-items: flex-start;
line-height: 1.05;
}
.ts-cta-arrow {
width: 28px; height: 28px;
display: inline-flex; align-items: center; justify-content: center;
background: color-mix(in srgb, var(--ts-color, #7c3aed) 12%, transparent);
color: var(--ts-color, #7c3aed);
border-radius: 50%;
text-decoration: none;
flex-shrink: 0;
transition: transform .22s var(--easing), box-shadow .22s var(--easing), border-color .22s var(--easing), background-color .22s var(--easing), color .22s var(--easing), opacity .22s var(--easing);
}
.ts-card:hover .ts-cta-arrow {
background: var(--ts-color, #7c3aed);
color: #fff;
transform: translateX(2px);
}
@media (max-width: 768px) {
.ts-section { padding: 1.8rem 0 1rem; }
/* Header düzeni: emoji + title + sub solda, "Hepsini gör" SAĞDA inline (orphan kalmasın) */
.ts-head {
align-items: center;
gap: .6rem;
margin-bottom: .9rem;
flex-wrap: nowrap;
}
.ts-head-text { gap: .6rem; flex: 1; min-width: 0; }
.ts-title { font-size: 1.1rem; line-height: 1.15; }
.ts-sub {
/* Mobilde subtitle yer kaplar — gizle (curated zaten anlaşılıyor) */
display: none;
}
.ts-emoji { font-size: 1.85rem; }
.ts-all {
padding: .4rem .7rem .4rem .85rem;
font-size: .72rem;
flex-shrink: 0;
border-width: 1.5px;
white-space: nowrap;
}
/* Scroll alanı + sağ ok her zaman görünür */
.ts-arrow {
width: 34px; height: 34px;
box-shadow: 0 4px 12px rgba(15, 23, 42, .18);
}
.ts-arrow svg { width: 16px; height: 16px; }
.ts-arrow-prev { left: 2px; }
.ts-arrow-next { right: 2px; }
/* Sağ kenara fade ipucu — "burada devamı var" */
.ts-scroll-wrap::after {
content: '';
position: absolute;
top: 0; right: 0; bottom: 1rem;
width: 30px;
background: linear-gradient(to right, transparent, var(--bg, #fafafe));
pointer-events: none;
z-index: 3;
opacity: .85;
}
}
@media (max-width: 420px) {
.ts-title { font-size: 1rem; }
.ts-emoji { font-size: 1.6rem; }
.ts-all { font-size: .68rem; padding: .35rem .65rem; }
}
/* ============================ ÜRÜN GÖRSELİ ZOOM + LIGHTBOX ============================ */
.pd-zoomable { cursor: zoom-in; }
.pd-zoomable .pd-cover-img {
will-change: transform;
}
.pd-lightbox {
position: fixed;
inset: 0;
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
}
.pd-lightbox[hidden] { display: none; }
.pd-lb-backdrop {
position: absolute; inset: 0;
background: rgba(0, 0, 0, .92);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.pd-lb-stage {
position: relative;
z-index: 2;
max-width: 90vw;
max-height: 88vh;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
.pd-lb-img {
max-width: 100%;
max-height: 88vh;
object-fit: contain;
border-radius: 8px;
box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
display: block;
user-select: none;
-webkit-user-drag: none;
}
.pd-lb-close {
position: absolute;
top: 1.2rem;
right: 1.2rem;
z-index: 3;
width: 44px;
height: 44px;
background: rgba(255, 255, 255, .15);
border: 1.5px solid rgba(255, 255, 255, .3);
color: #fff;
border-radius: 50%;
font-size: 26px;
line-height: 1;
cursor: pointer;
transition: background .2s ease, transform .2s ease;
}
.pd-lb-close:hover { background: rgba(255, 255, 255, .3); transform: scale(1.08); }
.pd-lb-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 3;
width: 54px;
height: 54px;
background: rgba(255, 255, 255, .12);
border: 1.5px solid rgba(255, 255, 255, .25);
color: #fff;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease, color .2s ease, opacity .2s ease;
}
.pd-lb-arrow:hover { background: rgba(255, 255, 255, .28); transform: translateY(-50%) scale(1.08); }
.pd-lb-prev { left: 1.5rem; }
.pd-lb-next { right: 1.5rem; }
.pd-lb-bottom {
position: absolute;
bottom: 1.5rem;
left: 50%;
transform: translateX(-50%);
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
gap: .65rem;
color: #fff;
}
.pd-lb-counter {
font-size: .82rem;
font-weight: 600;
letter-spacing: .04em;
background: rgba(0, 0, 0, .35);
padding: .35rem .85rem;
border-radius: 99px;
border: 1px solid rgba(255, 255, 255, .15);
}
.pd-lb-counter:empty { display: none; }
.pd-lb-dots {
display: flex;
gap: .4rem;
}
.pd-lb-dot {
width: 9px;
height: 9px;
border-radius: 50%;
background: rgba(255, 255, 255, .35);
border: none;
cursor: pointer;
padding: 0;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease, color .2s ease, opacity .2s ease;
}
.pd-lb-dot:hover { background: rgba(255, 255, 255, .6); }
.pd-lb-dot.active { background: #fff; transform: scale(1.4); }
@media (max-width: 600px) {
.pd-lb-close { top: .8rem; right: .8rem; width: 38px; height: 38px; font-size: 22px; }
.pd-lb-arrow { width: 42px; height: 42px; }
.pd-lb-arrow svg { width: 22px; height: 22px; }
.pd-lb-prev { left: .6rem; }
.pd-lb-next { right: .6rem; }
.pd-lb-bottom { bottom: 1rem; }
}
/* Mobil/touch cihazlarda hover zoom devre dışı (zaten lightbox var) */
@media (hover: none) {
.pd-zoomable .pd-cover-img { transform: none !important; }
}
/* ============================ DUYURU ŞERİDİ (header üstü, tam genişlik) ============================ */
.ann-strip {
position: relative;
width: 100%;
margin: 0;
background: linear-gradient(90deg,
var(--ann-bg, #7c3aed) 0%,
color-mix(in srgb, var(--ann-bg, #7c3aed) 75%, #fff) 50%,
var(--ann-bg, #7c3aed) 100%);
color: var(--ann-fg, #fff);
border-radius: 0;
overflow: hidden;
font-size: .88rem;
font-weight: 600;
letter-spacing: .015em;
box-shadow: 0 2px 8px -4px color-mix(in srgb, var(--ann-bg, #7c3aed) 70%, transparent);
isolation: isolate;
border-bottom: 1px solid color-mix(in srgb, var(--ann-fg, #fff) 12%, transparent);
}
/* Hafif parlama efekti — sosyopix duyuru bandlarındaki "canlı" his */
.ann-strip::before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.18) 50%, transparent 100%);
background-size: 200% 100%;
animation: ann-shine 6s ease-in-out infinite;
pointer-events: none;
z-index: 1;
}
@keyframes ann-shine {
0%, 100% { background-position: -100% 0; }
50% { background-position: 200% 0; }
}
/* Static — tek satır ortalı */
.ann-static {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
padding: .55rem 1.2rem;
text-align: center;
}
/* Marquee — klasik haber bandı: sağ kenardan girer, sola kaybolur */
.ann-strip-marquee {
padding: .55rem 0;
}
.ann-viewport {
position: relative;
z-index: 2;
width: 100%;
overflow: hidden;
}
.ann-track {
display: inline-flex;
width: max-content;
will-change: transform;
animation: ann-marquee var(--ann-speed, 30s) linear infinite;
}
.ann-strip-marquee:hover .ann-track { animation-play-state: paused; }
.ann-row {
display: flex;
align-items: center;
gap: 1.4rem;
padding-right: 1.4rem;
white-space: nowrap;
}
@keyframes ann-marquee {
from { transform: translateX(100%); } /* viewport'un sağ kenarından girer */
to { transform: translateX(-100%); } /* sol kenardan tamamen kaybolur */
}
.ann-item {
display: inline-flex;
align-items: center;
gap: .45rem;
color: inherit;
text-decoration: none;
white-space: nowrap;
}
.ann-item[href]:hover { text-decoration: underline; text-underline-offset: 3px; }
.ann-icon {
font-size: 1.05em;
line-height: 1;
display: inline-flex;
align-items: center;
}
.ann-sep {
opacity: .5;
font-size: .9em;
font-weight: 700;
}
@media (max-width: 768px) {
.ann-strip {
width: 100%;
margin: 0;
border-radius: 0;
font-size: .8rem;
}
.ann-static { padding: .5rem .9rem; }
.ann-strip-marquee { padding: .45rem 0; }
.ann-row { gap: 1rem; padding-right: 1rem; }
}
@media (max-width: 480px) {
.ann-strip {
margin: 0;
border-radius: 0;
font-size: .74rem;
}
}
/* =================================================================
MOBILE OVERRIDES — sosyopix tarzı tek-blok mobil pass
Burası dosyanın EN ALTI: cascade'da en son geldiği için yukarıdaki
dağınık @media kuralların önüne geçer. Tek breakpoint sistemi:
≤768px (tablet/telefon), ≤480px (küçük telefon)
================================================================= */
@media (max-width: 768px) {
/* --- 1) Container: tutarlı yatay padding --- */
.container { padding: 0 14px; }
/* --- 2) HERO SLIDER: çerçeveli, kompakt — slider havası --- */
.hero-slider {
aspect-ratio: 4 / 3;
border-radius: 18px;
margin: 12px 14px 0 !important;
width: auto !important;
max-width: none !important;
max-height: 56vh;
box-shadow: 0 8px 24px -8px rgba(0,0,0,.18), 0 2px 6px -2px rgba(0,0,0,.08);
overflow: hidden;
}
.hs-img { object-fit: cover; }
/* Mobilde TÜM slide'lar bottom-center: admin'in pozisyon seçimini mobilde override et
— küçük ekranda en okunaklı/dengeli yer burası (sosyopix, hepsiburada vb. de böyle yapar) */
.hs-content {
padding: .85rem 1rem 2.4rem !important;
align-items: flex-end !important;
justify-content: center !important;
text-align: center !important;
}
.hs-content-inner {
max-width: 90%;
margin: 0 auto !important;
text-align: center !important;
}
.hs-title {
font-size: clamp(1.05rem, 4.2vw, 1.5rem) !important;
line-height: 1.2 !important;
text-align: center !important;
}
.hs-sub {
font-size: clamp(.72rem, 2.8vw, .88rem) !important;
margin-top: .3rem !important;
text-align: center !important;
}
.hs-cta {
padding: .5rem 1.1rem !important;
font-size: .78rem !important;
margin-top: .65rem !important;
box-shadow: 0 4px 12px rgba(0,0,0,.25) !important;
/* Buton metnine göre genişler (flex/hug-content), kırpılmaz */
width: auto !important;
max-width: 100% !important;
white-space: nowrap;
overflow: visible !important;
overflow: hidden;
text-overflow: ellipsis;
}
/* Slider noktaları slider'ın içinde kalsın */
.hs-dots { bottom: .55rem !important; gap: .35rem !important; }
.hs-dot { width: 18px !important; height: 3px !important; }
.hs-dot.active { width: 28px !important; }
.hs-arrow { width: 32px !important; height: 32px !important; }
.hs-arrow-prev { left: .4rem !important; }
.hs-arrow-next { right: .4rem !important; }
.hs-arrow svg { width: 16px !important; height: 16px !important; }
/* Counter mobilde daha kompakt */
.hs-counter {
top: .55rem !important;
right: .6rem !important;
padding: .3rem .6rem !important;
font-size: .7rem !important;
}
.hs-counter .hs-cur { font-size: .8rem !important; }
/* --- 3) TRUST WALL: 5 stat → 2 col grid, son kart ortalanır --- */
.tw-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: .65rem !important;
}
.tw-stat:nth-child(5) {
grid-column: 1 / -1;
max-width: 60%;
margin: 0 auto;
}
.tw-stat { padding: .9rem .7rem !important; }
.tw-num { font-size: 1.15rem !important; }
.tw-lbl { font-size: .72rem !important; }
/* --- 4) CAT-SHOWCASE GRID: mobil 2 kolon, masaüstü "büyük" override'ı kaldır --- */
.cat-showcase-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: .7rem !important;
}
/* Masaüstü için "big" işareti mobile'da etki etmesin */
.cat-showcase-card.col-span-2:not(.mobile-col-span-2) { grid-column: span 1 !important; }
/* Mobile için ayrı işaret: tüm satırı kaplasın */
.cat-showcase-card.mobile-col-span-2 { grid-column: span 2 !important; }
.cat-showcase-card {
min-height: 130px !important;
padding: 1rem .85rem !important;
}
.cat-showcase-card.mobile-col-span-2 { min-height: 150px !important; }
/* Emoji + label son blokta override edildiği için burada override yok */
.csc-desc { font-size: .72rem !important; line-height: 1.3 !important; -webkit-line-clamp: 2; }
/* --- 5) BESTSELLER section --- */
.bs-head {
flex-direction: column;
align-items: flex-start !important;
gap: .7rem !important;
}
.bs-head-link {
align-self: flex-end;
font-size: .85rem;
}
/* Featured-duo: dikey stack — primary üstte tam, secondary altta tam */
.bs-featured-duo {
grid-template-columns: 1fr !important;
gap: 1rem !important;
}
.bsf-card.primary,
.bsf-card.secondary {
flex-direction: column !important;
width: 100% !important;
}
.bsf-card .bsf-media {
width: 100% !important;
flex: none !important;
aspect-ratio: 4 / 3 !important;
min-height: 0 !important;
height: auto !important;
}
.bsf-card .bsf-body {
padding: 1rem !important;
gap: .6rem !important;
}
.bsf-title { font-size: 1rem !important; line-height: 1.25 !important; }
.bsf-desc { font-size: .82rem !important; -webkit-line-clamp: 2; }
.bsf-foot { gap: .6rem !important; flex-wrap: wrap; }
.bsf-val { font-size: 1.1rem !important; }
/* Bestseller grid #2-#5: 2 col */
.bs-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: .65rem !important;
}
.bs-card .bs-media { aspect-ratio: 1 / 1 !important; }
.bs-body {
padding: .55rem .65rem .7rem !important;
gap: .3rem !important;
flex: 1 !important;
min-height: 0 !important;
display: flex !important; flex-direction: column !important;
}
.bs-foot {
margin-top: 0 !important; /* gap zaten yeterli boşluk veriyor */
padding-top: 0 !important;
align-items: flex-end !important;
min-height: 28px;
}
/* Mobilde sold count gizle, yıldız okunaklı boyutta */
.bs-meta-line .bs-sold { display: none !important; }
.bs-meta-line { gap: .35rem !important; }
.bs-rate { font-size: .8rem !important; }
.ts-meta-line { font-size: .78rem !important; }
/* Mobilde rozet — sola yaslı, dengeli yükseklik, göze hoş duran pill */
.bs-type-tag {
align-self: flex-start !important; /* Sola yasla */
font-size: .62rem !important;
font-weight: 600 !important; /* Medium-bold ortası, dengeli ağırlık */
padding: .22rem .55rem !important;
letter-spacing: .03em;
max-width: calc(100% - 1rem); /* Kart sınırının içinde dursun */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
box-shadow: 0 2px 6px rgba(0,0,0,.12);
margin: 0 0 .25rem !important; /* Kart body'sinin tepesine yapışık, başlığa yakın */
}
.bs-title {
font-size: .9rem !important; line-height: 1.25 !important;
-webkit-line-clamp: 2 !important;
min-height: 2.5em; /* 2 satır yer ayır → kart yüksekliği sabit */
}
.bs-title a {
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bs-desc { display: none; }
.bs-mini-meta { font-size: .7rem !important; }
.bs-price-val { font-size: .9rem !important; line-height: 1; }
.bs-cta-arrow {
width: 32px !important; height: 32px !important;
border-radius: 9px !important;
}
.bs-cta-arrow svg { width: 14px !important; height: 14px !important; }
/* Explore chips: yatay scroll, kompakt */
.bs-explore { padding: 1rem .9rem !important; }
.bs-explore-chips {
display: flex !important;
gap: .45rem !important;
overflow-x: auto;
flex-wrap: nowrap !important;
padding-bottom: .4rem;
scroll-snap-type: x mandatory;
-ms-overflow-style: none;
scrollbar-width: none;
}
.bs-explore-chips::-webkit-scrollbar { display: none; }
.bse-chip {
flex: 0 0 auto !important;
scroll-snap-align: start;
padding: .55rem .85rem !important;
font-size: .8rem !important;
}
/* --- 6) TIP STRIP: kompakt yatay scroll, oklar gizli --- */
.ts-section { padding: 1.5rem 0 !important; }
.ts-head {
flex-direction: row !important;
align-items: center !important;
gap: .5rem !important;
margin-bottom: .9rem !important;
}
.ts-head-text { gap: .5rem !important; }
.ts-emoji { font-size: 1.5rem !important; }
.ts-title { font-size: 1.05rem !important; line-height: 1.2 !important; }
.ts-sub { display: none; } /* mobilde gereksiz */
.ts-all {
margin-left: auto;
font-size: .8rem !important;
padding: .4rem .7rem !important;
flex-shrink: 0;
}
/* Mobile'da SADECE NEXT okunu göster — keşfedilirlik için (kullanıcı "diğerleri var" anlasın) */
.ts-arrow-prev { display: none !important; }
.ts-arrow-next {
display: flex !important;
width: 36px !important;
height: 36px !important;
right: 4px !important;
top: 50% !important;
transform: translateY(-50%) !important;
background: var(--ts-color, #7c3aed) !important;
color: #fff !important;
border: none !important;
box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .35) !important;
z-index: 5;
animation: ts-arrow-pulse 2.2s ease-in-out infinite;
}
.ts-arrow-next svg {
width: 18px !important;
height: 18px !important;
stroke: #fff !important;
}
/* Tıklama anında pulse'u durdur */
.ts-arrow-next:active {
animation: none;
transform: translateY(-50%) scale(.92) !important;
}
}
@keyframes ts-arrow-pulse {
0%, 100% { transform: translateY(-50%) scale(1); box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .35); }
50% { transform: translateY(-50%) scale(1.08); box-shadow: 0 8px 20px -4px color-mix(in srgb, var(--ts-color, #7c3aed) 50%, transparent); }
}
@media (max-width: 768px) {
/* === Strip mobilde: 180px kart, 1rem gap, premium yapı kompakt === */
.ts-scroll-wrap { padding: 0 !important; margin: 0 -14px !important; }
.ts-scroll {
grid-auto-columns: 180px !important;
gap: 1rem !important;
padding: 0 14px .6rem !important;
margin: 0 !important;
scroll-padding-left: 14px;
}
.ts-card {
width: 180px !important;
min-width: 180px !important;
max-width: 180px !important;
border-radius: 14px !important;
}
.ts-body {
padding: .55rem .75rem .7rem !important;
gap: .3rem !important;
}
/* Mobilde indirim badge — okunaklı boyut ama kart genişliğine sığacak şekilde */
.ts-old {
font-size: .72rem !important;
gap: .3rem !important;
}
.ts-old em {
font-size: .68rem !important;
padding: 3px 8px !important;
}
/* Mobilde "indirim" kelimesi gizli, "↓ %29" formatı — kompakt + anlaşılır */
.ts-old em .disc-word { display: none !important; }
.ts-old em .disc-pct::before { content: '↓ '; font-weight: 900; opacity: .9; }
.ts-foot {
padding-right: 2px !important;
align-items: center !important;
}
.ts-price { min-height: 42px !important; }
.ts-type-tag { font-size: .58rem !important; padding: .2rem .5rem !important; }
.ts-name {
font-size: .88rem !important;
line-height: 1.25 !important;
-webkit-line-clamp: 2 !important;
min-height: calc(.88rem * 1.25 * 2) !important;
max-height: calc(.88rem * 1.25 * 2) !important;
}
.ts-desc {
font-size: .68rem !important;
line-height: 1.3 !important;
min-height: calc(.68rem * 1.3) !important;
max-height: calc(.68rem * 1.3) !important;
}
.ts-mini-meta { font-size: .65rem !important; min-height: calc(.65rem * 1.4) !important; }
.ts-price { font-size: .9rem !important; }
.ts-cta-arrow { width: 24px !important; height: 24px !important; }
.ts-foot { padding-top: .15rem !important; }
.ts-badge { font-size: .58rem !important; padding: .2rem .4rem !important; top: .4rem !important; left: .4rem !important; }
.ts-disc { font-size: .6rem !important; padding: .15rem .35rem !important; bottom: .4rem !important; left: .4rem !important; }
.ts-fav { width: 26px !important; height: 26px !important; top: .4rem !important; right: .4rem !important; }
/* --- 7) NASIL ÇALIŞIR: 4 step → dikey, dengeli boşluk --- */
.steps,
.steps.steps-flow {
grid-template-columns: 1fr !important;
gap: 1.4rem !important;
padding: 0 !important;
}
.step {
padding: 2.2rem 1.2rem 1.4rem !important;
text-align: center;
}
.step .step-num {
top: -18px !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 36px !important;
height: 36px !important;
font-size: 1rem !important;
}
.step-icon { font-size: 2rem !important; margin: .25rem 0 .55rem !important; }
.step h3 { font-size: 1.05rem !important; margin: 0 0 .4rem !important; }
.step p { font-size: .85rem !important; line-height: 1.5 !important; margin: 0 !important; }
/* --- 8) YORUMLAR: 1 col, kompakt, dengeli --- */
.testimonials {
grid-template-columns: 1fr !important;
gap: .8rem !important;
}
.testimonials .testimonial:nth-child(n+5) { display: none; }
.testimonial {
padding: 1.1rem 1.1rem 1rem !important;
border-radius: 14px !important;
}
.testimonial .tm-quote { font-size: 4rem !important; top: -.4rem !important; left: .8rem !important; }
.testimonial p {
font-size: .9rem !important;
line-height: 1.5 !important;
margin: 0 0 .85rem !important;
}
.tm-top { margin-bottom: .55rem !important; }
.testimonial .author {
padding-top: .65rem !important;
gap: .65rem !important;
}
.testimonial .avatar { width: 36px !important; height: 36px !important; font-size: .9rem !important; }
.testimonial .author-name { font-size: .88rem !important; }
.testimonial .author-role { font-size: .72rem !important; }
.rev-aggregate {
flex-direction: column;
align-items: center;
text-align: center;
gap: .55rem !important;
padding: 1.1rem 1.4rem 1.05rem !important;
margin: 0 auto !important;
max-width: 260px;
border-radius: 16px !important;
}
/* Mobil 3-grup eşit aralık (gap A == gap B == 2rem) */
#nasil-calisir { padding-bottom: 0 !important; }
.reviews-section { padding-top: 2rem !important; padding-bottom: 2rem !important; }
.reviews-section .section-head { margin: 0 auto .9rem !important; }
.reviews-section .rev-aggregate { margin: 0 auto 2rem !important; }
.testimonials-cta { margin-top: 2rem !important; }
.ra-score { gap: .35rem !important; align-items: baseline !important; }
.ra-num { font-size: 2.4rem !important; line-height: 1 !important; font-weight: 800 !important; }
.ra-out { font-size: .95rem !important; opacity: .8; }
.ra-stars { font-size: 1.1rem !important; letter-spacing: .15em !important; }
.ra-meta { gap: .15rem !important; }
.ra-meta strong { font-size: 1rem !important; font-weight: 700 !important; }
.ra-meta span { font-size: .78rem !important; opacity: .85; }
/* --- 9) SECTION HEAD: tipografi sade --- */
.section-head h2 { font-size: 1.5rem !important; line-height: 1.2 !important; }
.section-head .eyebrow { font-size: 1.45rem !important; line-height: 1.1 !important; margin-bottom: .45rem !important; }
.section-head { margin-bottom: .75rem !important; }
.section-head p { margin-bottom: 0 !important; }
.section-head p { font-size: .88rem !important; }
/* --- 10) SECTION SPACING — mobilde sıkı: kategoriler arası nefes alır ama abartmaz --- */
.bestsellers-section,
.cat-showcase-section,
.ts-section,
.reviews-section,
.trust-wall { padding: 1.2rem 0 !important; }
/* Adımlar (.section#nasil-calisir) kendi style ile padding-top:0 */
.section { padding: 1.2rem 0 !important; }
/* --- 11) HERO SLIDER content padding daha kompakt --- */
.hs-content { padding: .85rem 1rem 1.6rem !important; }
/* --- 12) FOOTER mobile padding container ile uyumlu --- */
.footer-grid,
.site-footer .container,
.ft-bottom {
padding-left: 14px !important;
padding-right: 14px !important;
}
.site-footer { padding: 2rem 0 1rem !important; }
.footer-grid {
grid-template-columns: 1fr !important;
gap: 1.2rem !important;
}
/* --- 13) NASIL ÇALIŞIR padding-top=0 override edilsin --- */
#nasil-calisir { padding-top: 0 !important; }
}
@media (max-width: 480px) {
/* Daha küçük ekranlarda kart boyutlarını biraz daha sık --- */
.container { padding: 0 12px; }
/* Hero slider: küçük telefonda biraz daha kompakt */
.hero-slider {
aspect-ratio: 4 / 3;
margin: 10px 12px 0 !important;
border-radius: 16px;
max-height: 50vh;
}
.hs-title { font-size: clamp(.95rem, 4vw, 1.3rem) !important; }
.hs-sub { font-size: clamp(.68rem, 2.6vw, .82rem) !important; }
.hs-cta { padding: .45rem .9rem; font-size: .75rem; }
/* Trust wall: tek satır son ortalı korunur */
.tw-stat { padding: .75rem .55rem !important; }
.tw-num { font-size: 1rem !important; }
.tw-lbl { font-size: .68rem !important; }
/* Cat showcase daha kompakt — küçük telefon için */
.cat-showcase-card { min-height: 110px !important; padding: .75rem !important; }
.csc-label { font-size: .92rem !important; }
/* Tip strip: küçük telefon — 165px kart, .85rem gap */
.ts-card {
width: 165px !important;
min-width: 165px !important;
max-width: 165px !important;
}
.ts-scroll-wrap { margin: 0 -12px !important; }
.ts-scroll {
grid-auto-columns: 165px !important;
gap: .85rem !important;
padding: 0 12px .5rem !important;
margin: 0 !important;
}
.ts-name { font-size: .85rem !important; }
.ts-price { font-size: .85rem !important; }
/* Bestseller foot fiyat + cta sığsın */
.bsf-foot { flex-direction: column; align-items: stretch !important; }
.bsf-cta { justify-content: center; }
/* Öne çıkan (primary) kart: dar gövdede fiyat+buton tek satıra sığmıyor →
dikey istifle, buton tam genişlik ortalı (kırpılma yok, esnek flex) */
.bsf-card.primary .bsf-foot { flex-direction: column; align-items: stretch; gap: .5rem; }
.bsf-card.primary .bsf-cta { width: 100%; justify-content: center; white-space: nowrap; }
/* Section head boyutu */
.section-head h2 { font-size: 1.35rem !important; }
}
/* ============================================================ */
/* MOBİL PERFORMANS + GÖRSEL DÜZELTMELERİ — son blok, yüksek öncelik */
/* ============================================================ */
@media (max-width: 768px) {
/* --- 1) PERFORMANS: blur ve heavy efekt'leri kapat (mobil GPU yormasın) --- */
.site-header,
.mega-menu,
.mega-products,
.bsf-fav,
.bs-fav,
.ts-fav,
.product-card-img-wrap::before,
.ann-strip {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* Karmaşık çoklu shadow'lar tek katmana */
.mega-menu, .mega-products {
box-shadow: 0 12px 30px -12px rgba(15, 23, 42, .25) !important;
}
/* will-change sadece hareket eden elementlere */
*, *::before, *::after { will-change: auto; }
.ann-track { will-change: transform; }
/* --- 2) PERFORMANS: sürekli dekoratif arka plan animasyonlarını mobilde kapat
(mobil GPU/pil yormasın; bunlar süs, kaydırma akıcılığı önce gelir) --- */
.hero::before,
.hsv-blob-1, .hsv-blob-2, .hsv-blob-3,
.ann-strip::before,
.ph-visual, .ph-mock, .ph-eyebrow::before,
.feat-ic::before {
animation: none !important;
}
}
/* Hareket azaltma tercihi olan kullanıcılar için tüm animasyonları neredeyse durdur
(erişilebilirlik + ek performans). Standart güvenli kalıp. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
}
/* ============================================================ */
/* CAT-SHOWCASE KARTLARI: mobilde dengeli emoji + boyut */
/* ============================================================ */
@media (max-width: 768px) {
.cat-showcase-card {
min-height: 110px !important;
padding: .85rem !important;
}
.cat-showcase-card.mobile-col-span-2 {
min-height: 130px !important;
padding: 1rem 1.1rem !important;
}
/* Emoji sabit, kart içinde dengeli — taşmasın, daha büyük, biraz aşağıda */
.csc-emoji {
font-size: 3.6rem !important;
top: 1.1rem !important;
right: .85rem !important;
animation: none !important;
transform: none !important;
}
.cat-showcase-card.mobile-col-span-2 .csc-emoji {
font-size: 4.6rem !important;
top: 1.3rem !important;
right: 1.2rem !important;
}
/* Yazı emojiye girmesin: emoji genişliği + sağ ofset kadar padding-right */
.cat-showcase-card .csc-text {
padding-right: 4.5rem !important; /* 3.6rem emoji + ~.9rem nefes */
box-sizing: border-box;
}
.cat-showcase-card.mobile-col-span-2 .csc-text {
padding-right: 6rem !important; /* 4.6rem emoji + ~1.4rem nefes */
}
}
/* Masaüstünde de hover'daki dans efektini kapat — sabit dursun */
.cat-showcase-card:hover .csc-emoji {
animation: none;
transform: none;
}
/* Kart kenarından emoji taşmasın — clip */
.cat-showcase-card { overflow: hidden; }
@media (max-width: 768px) {
/* Etiket + açıklama: küçük + okunaklı */
.csc-label {
font-size: 1rem !important;
line-height: 1.15 !important;
}
.cat-showcase-card.mobile-col-span-2 .csc-label {
font-size: 1.25rem !important;
}
.csc-desc {
font-size: .72rem !important;
line-height: 1.35 !important;
margin-top: .15rem !important;
/* Kart boyutuna sığsın — 2 satır sonrası ... */
display: -webkit-box !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.cat-showcase-card.mobile-col-span-2 .csc-desc {
font-size: .8rem !important;
-webkit-line-clamp: 2;
}
/* Sağ ok: küçük, sıkıştırma */
.csc-arrow { display: none !important; }
}
/* Masaüstünde de kategori kart açıklamaları taşmasın */
.csc-desc {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
/* ============================================================ */
/* ÖZEL GÜNLER LANDING (ozel-gunler.php) */
/* ============================================================ */
.og-hero {
padding: 3rem 0 2rem;
background: linear-gradient(135deg, #fdf2f8 0%, #faf5ff 50%, #eff6ff 100%);
text-align: center;
}
.og-hero-inner { max-width: 720px; margin: 0 auto; padding: 0 1rem; }
.og-hero-eyebrow {
display: inline-block;
font-family: var(--font-eyebrow, 'Caveat', cursive);
color: #ec4899;
font-size: 1.4rem;
margin-bottom: .5rem;
transform: rotate(-2deg);
}
.og-hero-title {
font-size: clamp(1.8rem, 4vw, 2.6rem);
font-weight: 800;
line-height: 1.15;
margin: 0 0 .85rem;
color: var(--text, #0f172a);
letter-spacing: -.02em;
}
.og-hero-accent {
background: linear-gradient(135deg, #ec4899, #f43f5e);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.og-hero-sub {
font-size: 1rem;
color: var(--text-2, #475569);
margin: 0;
line-height: 1.55;
}
.og-pick { padding: 2rem 0 0; } /* Alt boşluk og-grid-mixed margin'i + sonraki section'ın üst padding'i kontrol etsin */
.og-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.1rem;
}
.og-card {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 200px;
padding: 1.4rem 1.3rem 1.2rem;
border-radius: 18px;
background: #fff;
border: 2px solid var(--border, #e5e7eb);
text-decoration: none;
color: inherit;
overflow: hidden;
isolation: isolate;
transition: transform .25s var(--easing), border-color .25s var(--easing), box-shadow .3s;
}
.og-card-bg {
position: absolute;
inset: 0;
background: linear-gradient(135deg,
color-mix(in srgb, var(--og-color, #7c3aed) 12%, transparent),
transparent 70%);
z-index: -1;
transition: background .3s;
}
.og-card:hover {
transform: translateY(-6px);
border-color: var(--og-color, #7c3aed);
box-shadow: 0 20px 40px -16px color-mix(in srgb, var(--og-color, #7c3aed) 35%, transparent);
}
.og-card:hover .og-card-bg {
background: linear-gradient(135deg,
color-mix(in srgb, var(--og-color, #7c3aed) 22%, transparent),
color-mix(in srgb, var(--og-color, #7c3aed) 4%, transparent));
}
.og-card-emoji {
position: absolute;
top: 1.05rem; right: 1.1rem;
font-size: 3rem;
line-height: 1;
z-index: 1;
filter: drop-shadow(0 3px 6px color-mix(in srgb, var(--og-color, #7c3aed) 30%, transparent));
}
.og-card-text { z-index: 2; padding-right: 4rem; overflow-wrap: normal; word-break: normal; hyphens: none; }
.og-card-name {
display: block;
font-size: 1.18rem;
font-weight: 700;
color: var(--text, #0f172a);
letter-spacing: -.015em;
line-height: 1.18;
margin-bottom: .35rem;
overflow-wrap: normal;
word-break: normal;
hyphens: none;
}
.og-card-desc {
display: block;
font-size: .82rem;
color: var(--text-3, #64748b);
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.og-card-foot {
display: flex; align-items: center; justify-content: space-between;
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px dashed var(--border, #e5e7eb);
}
.og-card-count {
font-size: .8rem;
color: var(--text-2, #475569);
}
.og-card-count strong { color: var(--og-color, #7c3aed); font-weight: 700; }
.og-card-count em { font-style: italic; opacity: .7; }
.og-card-arrow {
width: 32px; height: 32px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--og-color, #7c3aed);
color: #fff;
border-radius: 50%;
transition: transform .2s var(--easing);
}
.og-card:hover .og-card-arrow {
transform: translateX(4px);
}
.og-products { padding: 0 0 4rem; } /* Üst boşluk yok — bir önceki section'ın grid alt margin'i tek kaynak */
.og-product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 1rem;
margin-top: 1.5rem;
}
/* özel-gunler.php ts-card variant — anasayfa şerit kartlarıyla BİREBİR aynı (sabit 240px) */
.og-product-grid.og-product-grid--ts {
display: grid;
grid-template-columns: repeat(auto-fit, 240px);
gap: 1.25rem;
justify-content: center;
margin-top: 1.5rem;
}
.og-product-grid.og-product-grid--ts .ts-card {
width: auto !important;
min-width: 0 !important;
max-width: none !important;
height: auto;
}
/* Mobile (≤700px): TEK kart, container'ı TAM doldursun (referans: kategori.php tek kart görünümü) */
@media (max-width: 700px){
.og-product-grid.og-product-grid--ts {
grid-template-columns: 1fr !important;
gap: 1rem;
padding: 0;
max-width: none;
margin-left: 0;
margin-right: 0;
justify-content: stretch;
}
/* Mobile'da büyük kart için biraz daha hava ver — ts-body iç boşluk artsın */
.og-product-grid.og-product-grid--ts .ts-body {
padding: .9rem 1rem 1.1rem;
gap: .5rem;
}
.og-product-grid.og-product-grid--ts .ts-name {
font-size: 1.05rem;
}
}
@media (max-width: 768px) {
/* Üst-alt eşit boşluk: breadcrumb (1rem alt) + hero (1rem üst) = 2rem; hero (1rem alt) + grid (1rem üst) = 2rem */
.og-hero { padding: 1rem 0; }
.og-grid-big { margin: 1rem 0 1rem !important; }
.og-grid { grid-template-columns: repeat(2, 1fr); gap: .7rem; }
/* Anasayfa cat-showcase-card mantığı: gradient bg + emoji sağ üstte renkli, text sol altta */
.og-card {
min-height: 145px;
padding: 1rem .85rem;
border-radius: 16px;
overflow: hidden;
color: #fff;
background: var(--og-color, #7c3aed);
background: linear-gradient(135deg,
color-mix(in srgb, var(--og-color, #7c3aed) 80%, #fff),
var(--og-color, #7c3aed));
border: none;
display: flex;
flex-direction: column;
justify-content: flex-end;
text-align: left;
}
.og-card-bg { display: none; } /* renkli gradient zaten var */
/* Emoji sağ üst — büyük, dengeli */
.og-card-emoji {
position: absolute;
top: .55rem;
right: .65rem;
font-size: 3rem;
line-height: 1;
filter: drop-shadow(0 2px 4px rgba(0,0,0,.25));
margin: 0;
align-self: auto;
}
.og-card-text {
max-width: 100%;
padding-right: 3.4rem; /* sağ üst emoji için yer */
margin: 0;
flex: none;
overflow-wrap: normal;
word-break: normal;
hyphens: none;
}
.og-card-name {
font-size: .92rem;
line-height: 1.15;
margin-bottom: .15rem;
color: #fff;
letter-spacing: -.015em;
overflow-wrap: normal;
word-break: normal;
hyphens: none;
}
.og-card-desc {
font-size: .72rem;
-webkit-line-clamp: 2;
line-height: 1.35;
color: rgba(255,255,255,.92);
}
.og-card-foot {
margin-top: .65rem;
padding-top: .55rem;
border-top: 1px dashed rgba(255,255,255,.3);
justify-content: space-between;
gap: .5rem;
}
.og-card-count {
font-size: .68rem;
color: rgba(255,255,255,.85);
}
.og-card-count strong, .og-card-count em { color: #fff; }
.og-card-arrow {
width: 26px; height: 26px;
background: rgba(255,255,255,.25);
color: #fff;
}
.og-card:hover .og-card-arrow { background: rgba(255,255,255,.4); }
.og-product-grid { grid-template-columns: repeat(2, 1fr); gap: .65rem; }
/* --ts varyantı bu kuralı geçer — TEK kart kalır */
.og-product-grid.og-product-grid--ts { grid-template-columns: 1fr; gap: 1rem; }
}
/* ============================================================ */
/* ALT KATEGORİ CHIP'LERİ (parent kategori sayfası) */
/* ============================================================ */
.subcat-chips {
display: flex;
flex-wrap: wrap;
gap: .55rem;
padding: 1rem 0 1.5rem;
margin: 0;
}
.subcat-chip {
display: inline-flex;
align-items: center;
gap: .4rem;
padding: .55rem 1rem;
background: #fff;
border: 1.5px solid var(--border, #e5e7eb);
border-radius: 999px;
color: var(--text, #0f172a);
text-decoration: none;
font-size: .88rem;
font-weight: 600;
transition: background .15s, border-color .15s, transform .12s, box-shadow .15s;
white-space: nowrap;
}
.subcat-chip:hover {
border-color: var(--sc-color, #7c3aed);
background: color-mix(in srgb, var(--sc-color, #7c3aed) 8%, #fff);
transform: translateY(-1px);
}
.subcat-chip.is-active {
background: var(--sc-color, #7c3aed);
color: #fff;
border-color: var(--sc-color, #7c3aed);
box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--sc-color, #7c3aed) 50%, transparent);
}
.subcat-chip-icon { font-size: 1.05em; line-height: 1; }
.subcat-chip-all { font-weight: 700; }
.subcat-chip-all small { opacity: .85; font-weight: 600; }
@media (max-width: 768px) {
.subcat-chips {
flex-wrap: nowrap;
overflow-x: auto;
padding: .85rem 0 1.25rem;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.subcat-chips::-webkit-scrollbar { display: none; }
.subcat-chip { flex-shrink: 0; padding: .5rem .85rem; font-size: .82rem; }
}
/* ============================================================ */
/* GLOBAL ÜRÜN KARTI AÇIKLAMA — kart boyutuna göre dinamik kesim */
/* (sablonlar, anasayfa, kategori, urunler, arama, favoriler vs.) */
/* ============================================================ */
.bsf-desc,
.bs-desc,
.ts-desc,
.pc-desc,
.product-card-desc,
.fp-desc,
.tpl-desc,
.pcard-desc,
.product-desc,
.search-result-desc,
.csc-desc {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-word;
overflow-wrap: anywhere;
/* word-wrap koruması — uzun kelimeler kart sınırını taşmasın (görseldeki "hazuirtrr..." sorunu) */
}
/* Mobilde 1 satır yeterli — kart yüksekliği şişmesin */
@media (max-width: 768px) {
.bsf-desc,
.bs-desc,
.ts-desc,
.pc-desc,
.product-card-desc,
.fp-desc,
.tpl-desc,
.pcard-desc,
.product-desc,
.search-result-desc {
-webkit-line-clamp: 1;
}
}
/* ============================================================ */
/* FAVORİ BUTONU — Instagram tarzı: anında, kırmızı buton + beyaz kalp */
/* ============================================================ */
.bsf-fav,
.bs-fav,
.ts-fav {
/* position: absolute orijinal kuralda — burada override etme */
/* Anında geçiş: sadece transform/box-shadow için kısa easing */
transition: transform .12s ease, box-shadow .15s ease;
}
.bsf-fav.active,
.bs-fav.active,
.ts-fav.active {
background: #ef4444 !important;
color: #fff !important;
box-shadow:
0 6px 18px -4px rgba(239, 68, 68, .55),
inset 0 0 0 1px rgba(255, 255, 255, .25) !important;
}
.bsf-fav.active svg,
.bs-fav.active svg,
.ts-fav.active svg {
fill: #fff !important;
stroke: #fff !important;
}
/* Tıklama anında bounce — JS fav-anim class'ı ekler */
.bsf-fav.fav-anim,
.bs-fav.fav-anim,
.ts-fav.fav-anim {
animation: fav-pulse .5s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes fav-pulse {
0% { transform: scale(1); }
35% { transform: scale(1.3); }
60% { transform: scale(.92); }
100% { transform: scale(1); }
}
/* Burst — kalp etrafında parlak halka (yeni favoride) */
.bsf-fav.fav-burst::after,
.bs-fav.fav-burst::after,
.ts-fav.fav-burst::after {
content: '';
position: absolute;
inset: -4px;
border-radius: 50%;
border: 2px solid #ec4899;
opacity: 0;
animation: fav-burst .55s ease-out;
pointer-events: none;
}
@keyframes fav-burst {
0% { transform: scale(.8); opacity: 1; border-width: 2px; }
100% { transform: scale(1.6); opacity: 0; border-width: 1px; }
}
/* === TS STRIP DESKTOP: 240px premium, 1rem gap === */
@media (min-width: 769px) {
.ts-scroll {
grid-auto-columns: 240px !important;
gap: 1rem !important;
align-items: stretch !important; /* tüm kartlar şeritte AYNI YÜKSEKLİK */
}
}
/* ============================================================ */
/* OZEL-GUNLER BIG CARD — sol metin + sağ otomatik slider */
/* ============================================================ */
.og-grid-big {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)); /* minmax(0, 1fr) — sub-pixel kayma engeller */
gap: 1.2rem;
margin: 2rem 0 3rem;
}
.og-bigcard {
position: relative;
display: flex; flex-direction: row;
width: 100%; /* Grid hücresinin tamamını kapla */
height: 260px; /* Tüm özel gün kartları aynı yükseklikte (compact/medium/wide hepsi 260) */
box-sizing: border-box;
border-radius: 18px;
text-decoration: none;
color: var(--og-text-color, #fff) !important;
overflow: hidden;
isolation: isolate;
box-shadow: 0 10px 26px -10px color-mix(in srgb, var(--og-color, #7c3aed) 35%, transparent);
transition: transform .3s var(--easing), box-shadow .3s var(--easing);
}
.og-bigcard:hover {
transform: translateY(-3px);
box-shadow: 0 16px 34px -10px color-mix(in srgb, var(--og-color, #7c3aed) 50%, transparent);
}
.og-bigcard-bg {
position: absolute; inset: 0; z-index: -1;
background: linear-gradient(135deg,
var(--og-color, #7c3aed),
color-mix(in srgb, var(--og-color, #7c3aed) 70%, #1a0033));
}
.og-bigcard-bg::after {
content: ''; position: absolute; inset: 0;
background: radial-gradient(circle at 90% 10%, rgba(255,255,255,.18), transparent 55%);
}
.og-bigcard-content {
flex: 1.05; /* metin sol — slider sağ daha geniş kalsın */
display: flex; flex-direction: column;
padding: 1.1rem 1.1rem 1rem;
min-width: 0;
}
.og-bigcard-head {
display: flex; align-items: center; justify-content: space-between;
gap: .5rem;
margin-bottom: .55rem;
}
.og-bigcard-emoji {
font-size: 2.2rem; line-height: 1;
filter: drop-shadow(0 3px 10px rgba(0,0,0,.25));
}
.og-bigcard-badge {
padding: .25rem .55rem;
background: rgba(255,255,255,.22);
backdrop-filter: blur(6px);
border-radius: 99px;
font-size: .68rem;
font-weight: 700;
color: var(--og-badge-color, #fff) !important;
white-space: nowrap;
}
.og-bigcard-badge strong { font-weight: 800; margin-right: .15rem; }
.og-bigcard-badge.muted { opacity: .75; font-style: italic; font-weight: 600; }
.og-bigcard-name {
margin: 0 0 .3rem;
font-size: 1.15rem;
font-weight: 800;
line-height: 1.15;
letter-spacing: -.01em;
color: var(--og-text-color, #fff) !important;
/* Başlık rengi sadece kendisi — desc rengini etkilemez */
}
.og-bigcard-desc {
margin: 0 0 .6rem;
font-size: .87rem;
line-height: 1.45;
font-weight: 400;
letter-spacing: -.005em;
color: var(--og-desc-color, var(--og-text-color, #fff)) !important;
opacity: 1;
text-shadow: 0 1px 2px rgba(0,0,0,.18);
word-break: break-word;
overflow-wrap: anywhere;
/* Akıcı paragraf — line-clamp + ellipsis garantili çalışır */
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* Kompakt kart için 3 satır — desktop ve mobil aynı */
text-overflow: ellipsis;
}
.og-bigcard-cta {
margin-top: auto;
align-self: flex-start;
display: inline-flex; align-items: center; gap: .35rem;
padding: .45rem .8rem;
background: rgba(255,255,255,.22);
backdrop-filter: blur(6px);
border-radius: 99px;
font-size: .78rem;
font-weight: 700;
color: var(--og-cta-color, #fff) !important;
transition: transform .22s var(--easing), box-shadow .22s var(--easing), border-color .22s var(--easing), background-color .22s var(--easing), color .22s var(--easing), opacity .22s var(--easing);
}
.og-bigcard:hover .og-bigcard-cta {
background: #fff;
color: var(--og-color, #7c3aed) !important;
transform: translateX(2px);
}
/* SLIDER — sağ tarafta, otomatik dönen ürün görselleri */
.og-bigcard-slider {
position: relative;
flex: 1.45; /* Görsel tarafı biraz daha geniş (1.25 → 1.45) */
min-width: 0;
overflow: hidden;
background-color: rgba(255,255,255,.08);
background-size: cover; /* Inline bg-image (ilk slide) tüm alanı kaplasın */
background-position: center;
background-repeat: no-repeat;
}
.og-bigcard-slide {
position: absolute; inset: 0;
opacity: 0;
/* Hız: her slide --og-slide-interval kadar görünür (default 3s, panelden değiştirilir) */
animation: ogSlideShow3 calc(var(--og-slider-count) * var(--og-slide-interval, 3s)) infinite;
animation-delay: calc(var(--og-slide-i) * var(--og-slide-interval, 3s));
}
.og-bigcard-slide img,
.og-bigcard-slide svg {
width: 100%; height: 100%;
object-fit: cover;
object-position: center top;
display: block;
}
/* SLIDE ANIMASYONU — yumuşak fade + zoom, peer slide'lar arası perfect crossfade overlap.
Her slide N için: kendi clock'ında 0-5% fade-in (zoom 1.06→1), 5-33% tam görünür,
33-38% fade-out (zoom 1→1.06). Bir sonraki slide'ın 0-5% fade-in penceresi
önceki slide'ın 33-38% fade-out penceresi ile parent timeline'da BİREBİR örtüşür
→ toplam opacity her an = 1, siyah boşluk yok, ama belirgin yumuşak geçiş var. */
@keyframes ogSlideShow3 {
0% { opacity: 0; transform: scale(1.06); }
5%, 33% { opacity: 1; transform: scale(1); }
38%, 100% { opacity: 0; transform: scale(1.06); }
}
/* N=2: slot 50%, fade 5% / 55% */
.og-bigcard-slider:has(.og-bigcard-slide:nth-child(2):last-child) .og-bigcard-slide {
animation-name: ogSlideShow2;
}
@keyframes ogSlideShow2 {
0% { opacity: 0; transform: scale(1.06); }
5%, 50% { opacity: 1; transform: scale(1); }
55%, 100% { opacity: 0; transform: scale(1.06); }
}
/* N=4: slot 25%, fade 4% / 29% */
.og-bigcard-slider:has(.og-bigcard-slide:nth-child(4)) .og-bigcard-slide {
animation-name: ogSlideShow4;
}
@keyframes ogSlideShow4 {
0% { opacity: 0; transform: scale(1.06); }
4%, 25% { opacity: 1; transform: scale(1); }
29%, 100% { opacity: 0; transform: scale(1.06); }
}
/* N=5: slot 20%, fade 3% / 23% */
.og-bigcard-slider:has(.og-bigcard-slide:nth-child(5)) .og-bigcard-slide {
animation-name: ogSlideShow5;
}
@keyframes ogSlideShow5 {
0% { opacity: 0; transform: scale(1.06); }
3%, 20% { opacity: 1; transform: scale(1); }
23%, 100% { opacity: 0; transform: scale(1.06); }
}
/* N=6+: slot ~16.6%, fade 2% / 18.6% */
.og-bigcard-slider:has(.og-bigcard-slide:nth-child(6)) .og-bigcard-slide {
animation-name: ogSlideShow6;
}
@keyframes ogSlideShow6 {
0% { opacity: 0; transform: scale(1.06); }
2%, 16.66% { opacity: 1; transform: scale(1); }
18.66%, 100% { opacity: 0; transform: scale(1.06); }
}
/* Tek slide varsa hep görünür, animasyon yok */
.og-bigcard-slider:has(.og-bigcard-slide:only-child) .og-bigcard-slide {
animation: none; opacity: 1; transform: none;
}
/* === Desktop/Mobile slider toggle (sadece mobil için ayrı görseller varsa kullanılır) === */
.og-bigcard-slider--mobile { display: none; }
@media (max-width: 640px) {
.og-bigcard-slider--desktop { display: none; }
.og-bigcard-slider--mobile { display: block; }
}
/* Ürün yoksa: dekoratif büyük emoji + pattern */
.og-bigcard-empty {
position: relative;
flex: 1.45; /* Slider ile aynı oran — kartlar birebir aynı görünür */
min-width: 0;
overflow: hidden;
display: flex; align-items: center; justify-content: center;
background: rgba(255,255,255,.06);
}
.og-bigcard-empty-emoji {
font-size: 6rem;
line-height: 1;
opacity: .55;
filter: drop-shadow(0 6px 18px rgba(0,0,0,.3));
transition: transform .4s var(--easing), opacity .4s var(--easing);
z-index: 1;
}
.og-bigcard:hover .og-bigcard-empty-emoji {
transform: scale(1.08) rotate(-6deg);
opacity: .8;
}
.og-bigcard-empty-pattern {
position: absolute; inset: 0;
background:
radial-gradient(circle at 20% 30%, rgba(255,255,255,.12), transparent 35%),
radial-gradient(circle at 80% 80%, rgba(255,255,255,.08), transparent 30%);
pointer-events: none;
}
@media (max-width: 1100px) {
.og-grid-big { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.og-bigcard { height: 260px; }
.og-bigcard-name { font-size: 1.05rem; }
.og-bigcard-emoji { font-size: 2rem; }
}
@media (max-width: 640px) {
.og-grid-big { grid-template-columns: 1fr; gap: .85rem; margin: 1.2rem 0 2rem; }
.og-bigcard { height: 200px; border-radius: 16px; } /* Mobilde de orantılı */
.og-bigcard-content { padding: .9rem 1rem .85rem; }
.og-bigcard-name { font-size: 1.05rem; }
.og-bigcard-emoji { font-size: 1.85rem; }
.og-bigcard-desc { font-size: .82rem; -webkit-line-clamp: 3; }
.og-bigcard-cta { font-size: .72rem; padding: .35rem .65rem; }
}
/* ============================================================
MIXED GRID — tek grid'de compact (1 kol), medium (2 kol), wide (3 kol)
Sıra korunur (admin'de seçilen sıra public'te birebir uygulanır).
============================================================ */
.og-grid-mixed {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.2rem;
margin: 2rem 0 3rem; /* Alt 3rem = section'lar arası tek dengeli boşluk (og-pick ve og-products padding'leri sıfırlandı) */
}
.og-bigcard--compact { grid-column: span 1; }
.og-bigcard--medium { grid-column: span 2; }
.og-bigcard--wide { grid-column: span 3; }
/* MEDIUM + WIDE — full-bg overlay layout (slider arkada, metin solda) */
.og-bigcard--medium,
.og-bigcard--wide {
display: block !important; /* row layout'u kaldır — slider ve content overlap */
border-radius: 22px;
}
/* Tüm özel gün kartları aynı yükseklikte — kullanıcı isteği: tutarlı görünüm (260px wide baz alındı) */
.og-bigcard--medium { height: 260px; }
.og-bigcard--wide { height: 260px; }
.og-bigcard--medium .og-bigcard-bg,
.og-bigcard--wide .og-bigcard-bg {
background: linear-gradient(135deg,
var(--og-color, #7c3aed),
color-mix(in srgb, var(--og-color, #7c3aed) 70%, #1a0033));
}
.og-bigcard--medium .og-bigcard-slider,
.og-bigcard--wide .og-bigcard-slider {
position: absolute; inset: 0; z-index: 0;
flex: none;
}
.og-bigcard--medium .og-bigcard-slider::after,
.og-bigcard--wide .og-bigcard-slider::after {
content: ''; position: absolute; inset: 0;
z-index: 1; /* overlay slide görsellerinin üstünde */
background: linear-gradient(90deg,
color-mix(in srgb, var(--og-color, #7c3aed) 95%, #000) 0%,
color-mix(in srgb, var(--og-color, #7c3aed) 85%, #000) 22%,
color-mix(in srgb, var(--og-color, #7c3aed) 55%, transparent) 50%,
transparent 80%);
pointer-events: none;
opacity: var(--og-overlay-opacity, 0.7);
}
/* Medium/wide'da görseli sağa kaydır → sol overlay'in altında değil, sağ tarafta tam görünür */
.og-bigcard--medium .og-bigcard-slide img,
.og-bigcard--wide .og-bigcard-slide img,
.og-bigcard--medium .og-bigcard-slide svg,
.og-bigcard--wide .og-bigcard-slide svg {
object-position: right center;
}
.og-bigcard--medium .og-bigcard-empty,
.og-bigcard--wide .og-bigcard-empty {
position: absolute; inset: 0; z-index: 0;
flex: none;
}
.og-bigcard--medium .og-bigcard-content,
.og-bigcard--wide .og-bigcard-content {
position: relative; z-index: 1;
flex: none;
height: 100%;
justify-content: center;
}
/* Medium compact ile aynı yükseklik (220px) → padding ve font compact'a yakın */
.og-bigcard--medium .og-bigcard-content {
width: 60%; max-width: 420px;
padding: 1.1rem 1.3rem 1rem;
}
.og-bigcard--wide .og-bigcard-content {
width: 52%; max-width: 540px;
padding: 1.4rem 1.7rem 1.3rem;
}
.og-bigcard--medium .og-bigcard-name { font-size: 1.25rem; line-height: 1.15; margin: 0 0 .35rem; text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.og-bigcard--wide .og-bigcard-name { font-size: 1.55rem; line-height: 1.1; margin: 0 0 .45rem; text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.og-bigcard--medium .og-bigcard-emoji { font-size: 2rem; filter: drop-shadow(0 3px 10px rgba(0,0,0,.4)); }
.og-bigcard--wide .og-bigcard-emoji { font-size: 2.4rem; filter: drop-shadow(0 4px 14px rgba(0,0,0,.45)); }
.og-bigcard--medium .og-bigcard-desc {
font-size: .85rem; -webkit-line-clamp: 2;
flex: 0 0 auto; text-shadow: 0 1px 6px rgba(0,0,0,.45);
}
.og-bigcard--wide .og-bigcard-desc {
font-size: .95rem; -webkit-line-clamp: 3;
flex: 0 0 auto; text-shadow: 0 1px 6px rgba(0,0,0,.45);
}
.og-bigcard--medium .og-bigcard-head { margin-bottom: .45rem; justify-content: flex-start; }
.og-bigcard--wide .og-bigcard-head { margin-bottom: .6rem; justify-content: flex-start; }
/* Badge medium/wide'da kart'ın direct child'ı (PHP'de content dışında render edilir).
Cam (frosted) görünüm: hafif beyaz tint + güçlü blur — slider'ın üstünde net dursun.
Panelden "Badge'i gizle" işaretliyse PHP zaten render etmez. */
.og-bigcard--medium > .og-bigcard-badge,
.og-bigcard--wide > .og-bigcard-badge {
position: absolute;
top: 1rem; right: 1rem;
z-index: 2;
background: rgba(255, 255, 255, .22);
backdrop-filter: blur(10px) saturate(140%);
-webkit-backdrop-filter: blur(10px) saturate(140%);
}
.og-bigcard--medium .og-bigcard-cta,
.og-bigcard--wide .og-bigcard-cta {
margin-top: .35rem;
background: rgba(255,255,255,.95);
color: var(--og-color, #7c3aed) !important;
text-shadow: none;
}
.og-bigcard--medium .og-bigcard-cta { padding: .42rem .85rem; font-size: .78rem; }
.og-bigcard--wide .og-bigcard-cta { padding: .5rem 1rem; font-size: .85rem; }
.og-bigcard--medium:hover,
.og-bigcard--wide:hover { transform: translateY(-4px); }
.og-bigcard--medium:hover .og-bigcard-cta,
.og-bigcard--wide:hover .og-bigcard-cta {
background: #fff;
transform: translateX(3px);
}
@media (max-width: 1100px) {
/* 2 kolon grid'e düş — compact hâlâ 1, medium ve wide tam genişlik (2 kol) */
.og-grid-mixed { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.og-bigcard--medium { grid-column: span 2; }
.og-bigcard--wide { grid-column: span 2; }
/* Hepsi 260 — tutarlı görünüm */
.og-bigcard--medium { height: 260px; }
.og-bigcard--wide { height: 260px; }
.og-bigcard--medium .og-bigcard-content { width: 65%; padding: 1.1rem 1.3rem; }
.og-bigcard--wide .og-bigcard-content { width: 60%; padding: 1.3rem 1.5rem; }
.og-bigcard--medium .og-bigcard-name { font-size: 1.25rem; }
.og-bigcard--wide .og-bigcard-name { font-size: 1.5rem; }
}
@media (max-width: 640px) {
/* Mobilde tek kolon — hepsi span 1, compact 200px ile hizalı */
.og-grid-mixed { grid-template-columns: 1fr; gap: .85rem; margin: 1.2rem 0 2rem; }
.og-bigcard--compact,
.og-bigcard--medium,
.og-bigcard--wide { grid-column: span 1; }
.og-bigcard--medium { height: 200px; border-radius: 16px; }
.og-bigcard--wide { height: 220px; border-radius: 16px; }
.og-bigcard--medium .og-bigcard-content,
.og-bigcard--wide .og-bigcard-content { width: 78%; padding: 1rem 1.1rem; }
.og-bigcard--medium .og-bigcard-name,
.og-bigcard--wide .og-bigcard-name { font-size: 1.15rem; }
.og-bigcard--medium .og-bigcard-emoji,
.og-bigcard--wide .og-bigcard-emoji { font-size: 2rem; }
.og-bigcard--medium .og-bigcard-desc,
.og-bigcard--wide .og-bigcard-desc { font-size: .82rem; -webkit-line-clamp: 2; }
.og-bigcard--medium .og-bigcard-slider::after,
.og-bigcard--wide .og-bigcard-slider::after {
background: linear-gradient(90deg,
color-mix(in srgb, var(--og-color, #7c3aed) 95%, #000) 0%,
color-mix(in srgb, var(--og-color, #7c3aed) 80%, #000) 35%,
color-mix(in srgb, var(--og-color, #7c3aed) 55%, transparent) 70%,
transparent 95%);
}
}
/* ============ SET ürünlerinin kategori rozetleri (set kartında) ============ */
.set-cat-badges {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin: 4px 0 6px;
}
.set-cat-badge {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 2px 7px;
background: color-mix(in srgb, var(--bg, #7c3aed) 12%, transparent);
color: var(--bg, #7c3aed);
border: 1px solid color-mix(in srgb, var(--bg, #7c3aed) 30%, transparent);
border-radius: 999px;
font-size: 10.5px;
font-weight: 500;
line-height: 1.4;
white-space: nowrap;
}
.set-cat-badge.is-primary {
background: var(--bg, #7c3aed);
color: #fff;
border-color: var(--bg, #7c3aed);
font-weight: 600;
}
.set-cat-badge-ico { font-size: 11px; line-height: 1; }
.set-cat-badge-name { line-height: 1; }