/* ═══════════════════════════════════════════════════════
   FORSID BAR  —  attribution strip
═══════════════════════════════════════════════════════ */

.forsid-bar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    background: var(--f-bg, #f6f6f3);
    border-top: 1px solid var(--f-border, #e1e1dc);
}

.forsid-bar__text {
    font-size: 11px;
    font-weight: 400;
    color: var(--f-text-muted, #141414);
    letter-spacing: 0.02em;
}

.forsid-bar__link {
    font-size: 11px;
    font-weight: 400;
    color: var(--f-text-muted, #141414);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: var(--f-border, #e1e1dc);
    letter-spacing: 0.02em;
    transition: color 0.15s ease;
}

.forsid-bar__link:hover {
    color: var(--f-text, #555550);
    text-decoration-color: currentColor;
}

/* ── DARK ── */
.forsid-bar--dark {
    background: #0e0e0e;
    border-top: 1px solid #1e1e1e;
}

.forsid-bar--dark .forsid-bar__text        { color: #333330; }
.forsid-bar--dark .forsid-bar__link        { color: #333330; text-decoration-color: #2a2a2a; }
.forsid-bar--dark .forsid-bar__link:hover  { color: #666660; }

/* ═══════════════════════════════════════
   BİLDİRİM
═══════════════════════════════════════ */
:root {
    --notify-bg: #ffffff;
    --notify-text: #1d1d1f;
    --notify-text-secondary: #86868b;
    --notify-border: rgba(0, 0, 0, 0.08);
    --notify-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.1);
    --notify-font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif;
}
.notify-container {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
    pointer-events: none;
    width: 100%;
    max-width: 380px;
    padding: 0 20px;
    box-sizing: border-box;
}
.notify {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: var(--notify-bg);
    border: 1px solid var(--notify-border);
    border-radius: 14px;
    box-shadow: var(--notify-shadow);
    font-family: var(--notify-font);
    pointer-events: auto;
    animation: notifyIn 0.3s ease-out forwards;
}
.notify.exit {
    animation: notifyOut 0.2s ease-in forwards;
}
.notify-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--notify-text);
    opacity: 0.9;
}
.notify-icon svg { width: 100%; height: 100%; }
.notify-content  { flex: 1; min-width: 0; }
.notify-message {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--notify-text);
    margin: 0;
    letter-spacing: -0.01em;
}
.notify-close {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--notify-text-secondary);
    transition: background 0.15s ease, color 0.15s ease;
    margin: -4px -6px -4px 0;
}
.notify-close:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--notify-text);
}
.notify-close svg { width: 16px; height: 16px; }
@keyframes notifyIn {
    0%   { opacity: 0; transform: translateY(-8px) scale(0.98); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes notifyOut {
    0%   { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-4px) scale(0.98); }
}
@media (max-width: 480px) {
    .notify-container { top: 12px; padding: 0 12px; }
    .notify           { padding: 14px 16px; gap: 12px; border-radius: 12px; }
    .notify-message   { font-size: 13px; }
}

/* ═══════════════════════════════════════
   404
═══════════════════════════════════════ */
.page-404 {
    min-height: 60vh;
    display: flex;
    align-items: center;
    padding: 80px 0;
}
.page-404__inner {
    text-align: center;
    max-width: 480px;
    margin: 0 auto;
}
.page-404__code {
    font-size: 120px;
    font-weight: 800;
    line-height: 1;
    color: #111;
    letter-spacing: -4px;
    margin-bottom: 24px;
}
.page-404__title {
    font-size: 24px;
    font-weight: 600;
    color: #111;
    margin-bottom: 12px;
}
.page-404__desc {
    font-size: 15px;
    color: #6d6d6d;
    margin-bottom: 32px;
    line-height: 1.6;
}
.page-404__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #111;
    color: #fff;
    padding: 12px 28px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background .18s;
}
.page-404__btn:hover {
    background: #333;
    color: #fff;
}

/* Bu alan özel css kodlarınızı yazabilirsiniz. */

.card-product .marquee-product .marquee-wrapper {
    background-color: mistyrose;
    padding: 3px 0;
}
.card-product .card-product-info .old-price {
    font-size: 13px;
}


.showcase-oc .flat-title, .categoris-homes .flat-title{
    padding-left:0;
    padding-right:0;
}

.tf-payment {
    justify-content: center;
}

/* ══════════════════════════════════════════════════════════════
   FORSID OCEAN — Product Card Design Variants
   design-3 → design-7

   Kullanım: <div class="card-product design-3">
   Orijinal blade değişmez. Sadece class eklenir.
   Rozetler, marquee indirim barı, renk swatchları hepsi çalışır.
══════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════
   DESIGN-3 — CLEAN FLOAT
   Beyaz kart, hafif gölge, hover'da yukarı kayma
   ATC butonu hover'da slide-up
══════════════════════════════════════════════════════════════ */
.card-product.design-3 {
    background: #ffffff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 8px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.04);
    transition: box-shadow .3s ease, transform .3s ease;
}
.card-product.design-3:hover {
    box-shadow: 0 10px 32px rgba(0,0,0,.11), 0 0 0 1px rgba(0,0,0,.04);
    transform: translateY(-4px);
}
.card-product.design-3 .card-product-wrapper {
    border-radius: 0;
    aspect-ratio: 3 / 4;
}
.card-product.design-3 .card-product-wrapper img {
    transition: opacity .5s ease, transform .8s cubic-bezier(.4,0,.2,1);
}
.card-product.design-3 .card-product-wrapper:hover .img-product { opacity: 0; }
.card-product.design-3 .card-product-wrapper:hover .img-hover   { opacity: 1; transform: scale(1.06); }
.card-product.design-3 .card-product-info {
    gap: 6px;
}
.card-product.design-3 .card-product-info .title {
    font-size: 13.5px;
    font-weight: 500;
    color: #ffffff;
    line-height: 1.4;
}
.card-product.design-3 .card-product-info .price { font-size: 14px; }
.card-product.design-3 .card-product-info .new-price { color: #111; font-weight: 700; }
.card-product.design-3 .card-product-info .old-price {
    font-size: 11.5px;
    font-weight: 400;
    color: #b0b0b0;
}
.card-product.design-3 .on-sale-wrap .on-sale-item {
    background: #111 !important;
    border-radius: 4px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .04em;
}
.card-product.design-3 .btn-quick-add {
    height: 40px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: #111;
    color: #fff;
    border-radius: 0;
    transform: translateY(100%);
    transition: transform .26s cubic-bezier(.4,0,.2,1), background .2s;
}
.card-product.design-3 .card-product-wrapper:hover .btn-quick-add { transform: translateY(0); }
.card-product.design-3 .btn-quick-add:hover { background: #333; }
.card-product.design-3 .list-color-product { margin-top: 2px; }
.card-product.design-3 .marquee-product .marquee-wrapper { background: #f5f5f3; }


/* ══════════════════════════════════════════════════════════════
   DESIGN-4 — POLAROID
   Fotoğraf albümü efekti, serif italic ürün adı
   Hover'da hafif dönerek kalkar
══════════════════════════════════════════════════════════════ */
.card-product.design-4 {
    background: #fff;
    border: 1px solid #e8e8e4;
    border-radius: 3px;
    padding: 7px 7px 0;
    box-shadow: 0 1px 5px rgba(0,0,0,.07), 0 3px 0 0 #e0e0db;
    transition: box-shadow .25s ease, transform .25s ease;
}
.card-product.design-4:hover {
    box-shadow: 0 8px 22px rgba(0,0,0,.1), 0 3px 0 0 #d0d0cb;
    transform: rotate(-0.6deg) translateY(-3px);
}
.card-product.design-4 .card-product-wrapper {
    border-radius: 2px;
    aspect-ratio: 1 / 1;
}
.card-product.design-4 .card-product-wrapper img {
    transition: opacity .5s ease, transform .7s cubic-bezier(.4,0,.2,1);
}
.card-product.design-4 .card-product-wrapper:hover .img-product { opacity: 0; }
.card-product.design-4 .card-product-wrapper:hover .img-hover   { opacity: 1; transform: scale(1.05); }
.card-product.design-4 .card-product-info {
    padding: 11px 4px 15px;
    gap: 4px;
}
.card-product.design-4 .card-product-info .title {
    font-size: 12.5px;
    font-weight: 400;
    font-style: italic;
    font-family: Georgia, 'Times New Roman', serif;
    color: #444;
    -webkit-line-clamp: 1;
    line-height: 1.5;
}
.card-product.design-4 .card-product-info .price { font-size: 13px; }
.card-product.design-4 .card-product-info .new-price { color: #111; font-weight: 700; }
.card-product.design-4 .card-product-info .old-price {
    font-size: 11px;
    color: #c0c0c0;
    font-weight: 400;
}
.card-product.design-4 .on-sale-wrap .on-sale-item {
    font-size: 10px !important;
    font-weight: 700 !important;
    border-radius: 2px !important;
    padding: 2px 8px !important;
}
.card-product.design-4 .btn-quick-add {
    border-radius: 0;
    height: 36px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    background: #111;
    color: #fff;
    transform: translateY(100%);
    transition: transform .26s cubic-bezier(.4,0,.2,1);
}
.card-product.design-4 .card-product-wrapper:hover .btn-quick-add { transform: translateY(0); }
.card-product.design-4 .marquee-product .marquee-wrapper { background: #f5f2ed; }
.card-product.design-4 .list-color-product .list-color-item {
    width: 20px;
    height: 20px;
}
.card-product.design-4 .list-color-product .list-color-item .swatch-value {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: none;
}


/* ══════════════════════════════════════════════════════════════
   DESIGN-5 — EDITORIAL DARK
   Koyu zemin, beyaz metin, kırmızı indirim aksan
   Premium / gece koleksiyonu hissi
══════════════════════════════════════════════════════════════ */
.card-product.design-5 {
    background: #141414;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.07);
    transition: border-color .3s;
}
.card-product.design-5:hover { border-color: rgba(255,255,255,.18); }
.card-product.design-5 .card-product-wrapper {
    border-radius: 0;
    aspect-ratio: 3 / 4;
}
.card-product.design-5 .card-product-wrapper img {
    transition: opacity .5s ease, transform .9s cubic-bezier(.4,0,.2,1);
}
.card-product.design-5 .card-product-wrapper:hover .img-product { opacity: 0; }
.card-product.design-5 .card-product-wrapper:hover .img-hover   { opacity: 1; transform: scale(1.07); }
.card-product.design-5 .card-product-info {
    padding: 13px 15px 18px;
    gap: 7px;
    background: #141414;
}
.card-product.design-5 .card-product-info .title {
    color: rgba(255,255,255,.88);
    font-size: 13.5px;
    font-weight: 400;
    letter-spacing: .01em;
    line-height: 1.45;
}
.card-product.design-5 .card-product-info .title:hover { color: #fff; }
.card-product.design-5 .card-product-info .price { font-size: 14px; }
.card-product.design-5 .card-product-info .new-price { color: #fff; font-weight: 700; }
.card-product.design-5 .card-product-info .old-price {
    color: rgba(255,255,255,.3);
    font-size: 11.5px;
    font-weight: 400;
}
.card-product.design-5 .on-sale-wrap .on-sale-item {
    background: #db1215 !important;
    color:#fff !important;
    border-radius: 3px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 3px 8px !important;
}
.card-product.design-5 .btn-quick-add {
    background: rgba(255,255,255,.1);
    color: #fff;
    height: 40px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-radius: 0;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transform: translateY(100%);
    transition: transform .26s cubic-bezier(.4,0,.2,1), background .2s;
}
.card-product.design-5 .card-product-wrapper:hover .btn-quick-add { transform: translateY(0); }
.card-product.design-5 .btn-quick-add:hover { background: rgba(255,255,255,.22); }
.card-product.design-5 .marquee-product .marquee-wrapper { background: rgba(255,255,255,.06); }
.card-product.design-5 .marquee-product .marquee-child-item span { color: rgba(255,255,255,.4); }
.card-product.design-5 .marquee-product .marquee-child-item .on-sale-badge {
    background-color: rgba(255,255,255,.1);
    color: rgba(255,255,255,.7);
}
.card-product.design-5 .list-color-product .list-color-item .swatch-value {
    border: 2px solid #141414;
    box-shadow: 0 0 0 1.5px rgba(255,255,255,.25);
}


/* ══════════════════════════════════════════════════════════════
   DESIGN-6 — BORDERLESS MINIMAL
   Çerçeve yok, ince aspect-ratio, isim hover underline animasyonu
   Zara / COS sitesi hissi
══════════════════════════════════════════════════════════════ */
.card-product.design-6 {
    background: transparent;
}
.card-product.design-6 .card-product-wrapper {
    border-radius: 6px;
    aspect-ratio: 2 / 3;
    overflow: hidden;
}
.card-product.design-6 .card-product-wrapper img {
    transition: opacity .5s ease, transform .8s cubic-bezier(.4,0,.2,1);
}
.card-product.design-6 .card-product-wrapper:hover .img-product { opacity: 0; }
.card-product.design-6 .card-product-wrapper:hover .img-hover   { opacity: 1; transform: scale(1.05); }
.card-product.design-6 .card-product-info {
    padding: 10px 0 0;
    gap: 3px;
}
.card-product.design-6 .card-product-info .title {
    font-size: 13px;
    font-weight: 400;
    color: #111;
    letter-spacing: .01em;
    line-height: 1.4;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    padding-bottom: 1px;
    transition: background-size .35s ease;
    display: inline;
}
.card-product.design-6:hover .card-product-info .title { background-size: 100% 1px; }
.card-product.design-6 .card-product-info .price { font-size: 13px; font-weight: 400; }
.card-product.design-6 .card-product-info .new-price { color: #111; font-weight: 600; }
.card-product.design-6 .card-product-info .old-price {
    font-size: 12px;
    color: #bbb;
    font-weight: 400;
}
.card-product.design-6 .on-sale-wrap .on-sale-item {
    background: #111 !important;
    border-radius: 2px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: .04em;
    padding: 2px 7px !important;
}
.card-product.design-6 .btn-quick-add {
    height: 36px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    background: #111;
    color: #fff;
    border-radius: 0 0 6px 6px;
    transform: translateY(100%);
    transition: transform .26s cubic-bezier(.4,0,.2,1);
}
.card-product.design-6 .card-product-wrapper:hover .btn-quick-add { transform: translateY(0); }
.card-product.design-6 .marquee-product { display: none; }
.card-product.design-6 .list-color-product { margin-top: 5px; gap: 5px; }
.card-product.design-6 .list-color-product .list-color-item { width: 20px; height: 20px; }
.card-product.design-6 .list-color-product .list-color-item .swatch-value {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: none;
    box-shadow: 0 0 0 1px rgba(0,0,0,.12);
}


/* ══════════════════════════════════════════════════════════════
   DESIGN-7 — GLASS CARD
   Cam / frost efekti, açık arka planlarda iyi görünür
   Rounded-XL köşeler, görsel içeride padding ile
══════════════════════════════════════════════════════════════ */
.card-product.design-7 {
    background: rgba(255,255,255,.68);
    border: 1px solid rgba(255,255,255,.92);
    border-radius: 18px;
    overflow: hidden;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 2px 14px rgba(0,0,0,.07);
    transition: box-shadow .3s, transform .3s;
}
.card-product.design-7:hover {
    box-shadow: 0 14px 36px rgba(0,0,0,.12);
    transform: translateY(-5px);
}
.card-product.design-7 .card-product-wrapper {
    border-radius: 12px;
    aspect-ratio: 1 / 1.3;
    overflow: hidden;
    margin: 8px 8px 0;
}
.card-product.design-7 .card-product-wrapper img {
    transition: opacity .5s ease, transform .8s cubic-bezier(.4,0,.2,1);
    border-radius: 12px;
}
.card-product.design-7 .card-product-wrapper:hover .img-product { opacity: 0; }
.card-product.design-7 .card-product-wrapper:hover .img-hover   { opacity: 1; transform: scale(1.06); border-radius: 12px; }
.card-product.design-7 .card-product-info {
    padding: 12px 14px 16px;
    gap: 6px;
}
.card-product.design-7 .card-product-info .title {
    font-size: 13.5px;
    font-weight: 500;
    color: #111;
    line-height: 1.4;
}
.card-product.design-7 .card-product-info .price { font-size: 14px; }
.card-product.design-7 .card-product-info .new-price { color: #111; font-weight: 700; }
.card-product.design-7 .card-product-info .old-price {
    font-size: 11.5px;
    color: #aaa;
    font-weight: 400;
}
.card-product.design-7 .on-sale-wrap .on-sale-item {
    border-radius: 50px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 3px 10px !important;
    backdrop-filter: blur(4px);
}
.card-product.design-7 .btn-quick-add {
    height: 38px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    background: rgba(17,17,17,.86);
    color: #fff;
    border-radius: 0;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transform: translateY(100%);
    transition: transform .26s cubic-bezier(.4,0,.2,1), background .2s;
}
.card-product.design-7 .card-product-wrapper:hover .btn-quick-add { transform: translateY(0); }
.card-product.design-7 .btn-quick-add:hover { background: rgba(17,17,17,1); }
.card-product.design-7 .marquee-product .marquee-wrapper { background: rgba(255,255,255,.3); }
.card-product.design-7 .list-color-product .list-color-item .swatch-value {
    border: 2px solid rgba(255,255,255,.8);
    box-shadow: 0 0 0 1px rgba(0,0,0,.1);
}

.card-product.design-8 {
    background: #fff;
    border: 1px solid #e4e4e0;
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow .25s ease, border-color .25s ease;
}
.card-product.design-8:hover {
    border-color: #c8c8c4;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.card-product.design-8 .card-product-wrapper {
    border-radius: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-bottom: 1px solid #e4e4e0;
}
.card-product.design-8 .card-product-wrapper img {
    transition: opacity .5s ease, transform .8s cubic-bezier(.4,0,.2,1);
}
.card-product.design-8 .card-product-wrapper:hover .img-product { opacity: 0; }
.card-product.design-8 .card-product-wrapper:hover .img-hover   { opacity: 1; transform: scale(1.04); }
.card-product.design-8 .card-product-info {
    padding: 14px 16px 18px;
    gap: 6px;
    position: relative;
    z-index: 25;
}
.card-product.design-8 .card-product-info .title {
    font-size: 13px;
    font-weight: 500;
    color: #1a1a18;
    line-height: 1.45;
    letter-spacing: -.005em;
}
.card-product.design-8 .card-product-info .price { font-size: 14px; }
.card-product.design-8 .card-product-info .new-price { color: #1a1a18; font-weight: 700; }
.card-product.design-8 .card-product-info .old-price {
    font-size: 12px;
    color: #a0a09c;
    font-weight: 400;
}
.card-product.design-8 .btn-quick-add {
    height: 40px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: #1a1a18;
    color: #fff;
    border-radius: 0;
    transform: translateY(100%);
    transition: transform .26s cubic-bezier(.4,0,.2,1), background .2s;
}
.card-product.design-8 .card-product-wrapper:hover .btn-quick-add { transform: translateY(0); }
.card-product.design-8 .btn-quick-add:hover { background: #333; }
.card-product.design-8 .marquee-product .marquee-wrapper { background: #f4f4f0; }
.card-product.design-8 .list-color-product { margin-top: 4px; gap: 5px; }
.card-product.design-8 .list-color-product .list-color-item { width: 20px; height: 20px; }
.card-product.design-8 .list-color-product .list-color-item .swatch-value {
    width: 12px; height: 12px;
    border-radius: 50%;
    border: none;
    box-shadow: 0 0 0 1px rgba(0,0,0,.15);
}

/* ═══════════════════════════════════════════════════════════
   DESIGN 9 — Warm Paper
   Krem zemin, iç rounded görsel, serif italic title
   ═══════════════════════════════════════════════════════════ */
.card-product.design-9 {
    background: #f7f4ef; border-radius: 12px; overflow: hidden;
    transition: box-shadow .3s ease, transform .3s ease;
}
.card-product.design-9:hover {
    box-shadow: 0 12px 32px rgba(0,0,0,.1); transform: translateY(-3px);
}
.card-product.design-9 .card-product-wrapper {
    border-radius: 8px; aspect-ratio: 1 / 1.2;
    overflow: hidden; margin: 8px 8px 0;
}
.card-product.design-9 .card-product-wrapper img {
    transition: opacity .5s ease, transform .8s cubic-bezier(.4,0,.2,1);
}
.card-product.design-9 .card-product-wrapper:hover .img-product { opacity: 0; }
.card-product.design-9 .card-product-wrapper:hover .img-hover   { opacity: 1; transform: scale(1.06); }
.card-product.design-9 .card-product-info { padding: 12px 14px 16px; gap: 5px; position: relative; z-index: 25; }
.card-product.design-9 .card-product-info .title {
    font-size: 13px; font-weight: 400; font-style: italic;
    font-family: Georgia, 'Times New Roman', serif;
    color: #3a3228; line-height: 1.5;
}
.card-product.design-9 .card-product-info .price { font-size: 14px; }
.card-product.design-9 .card-product-info .new-price { color: #3a3228; font-weight: 700; }
.card-product.design-9 .card-product-info .old-price { font-size: 12px; color: #b8a898; font-weight: 400; }
.card-product.design-9 .btn-quick-add {
    height: 40px; font-size: 11px; font-weight: 600;
    letter-spacing: .04em; text-transform: uppercase;
    background: #3a3228; color: #f7f4ef; border-radius: 0 0 12px 12px;
    transform: translateY(100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1), background .2s;
}
.card-product.design-9 .card-product-wrapper:hover .btn-quick-add { transform: translateY(0); }
.card-product.design-9 .btn-quick-add:hover { background: #574840; }
.card-product.design-9 .marquee-product .marquee-wrapper { background: #ede8e0; }
.card-product.design-9 .list-color-product { margin-top: 4px; gap: 5px; }
.card-product.design-9 .list-color-product .list-color-item .swatch-value {
    border: 2px solid #f7f4ef; box-shadow: 0 0 0 1px rgba(0,0,0,.12);
}

/* ═══════════════════════════════════════════════════════════
   DESIGN 10 — Outlined Frame
   Siyah border, hover'da offset shadow, bold grafik his
   ═══════════════════════════════════════════════════════════ */
.card-product.design-10 {
    background: #fff; border: 1.5px solid #1a1a18; border-radius: 0; overflow: hidden;
    transition: box-shadow .2s ease, transform .2s ease;
}
.card-product.design-10:hover {
    box-shadow: 5px 5px 0 0 #1a1a18; transform: translate(-3px, -3px);
}
.card-product.design-10 .card-product-wrapper {
    border-radius: 0; aspect-ratio: 3 / 4;
    overflow: hidden; border-bottom: 1.5px solid #1a1a18;
}
.card-product.design-10 .card-product-wrapper img {
    transition: opacity .5s ease, transform .8s cubic-bezier(.4,0,.2,1);
}
.card-product.design-10 .card-product-wrapper:hover .img-product { opacity: 0; }
.card-product.design-10 .card-product-wrapper:hover .img-hover   { opacity: 1; transform: scale(1.06); }
.card-product.design-10 .card-product-info { padding: 12px 14px 16px; gap: 5px; position: relative; z-index: 25; }
.card-product.design-10 .card-product-info .title {
    font-size: 13.5px; font-weight: 600; color: #1a1a18;
    line-height: 1.35; letter-spacing: -.01em;
}
.card-product.design-10 .card-product-info .price { font-size: 14px; }
.card-product.design-10 .card-product-info .new-price { color: #1a1a18; font-weight: 800; }
.card-product.design-10 .card-product-info .old-price { font-size: 12px; color: #999; font-weight: 400; }
.card-product.design-10 .btn-quick-add {
    height: 40px; font-size: 11px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    background: #1a1a18; color: #fff; border-radius: 0;
    border-top: 1.5px solid #1a1a18;
    transform: translateY(100%);
    transition: transform .26s cubic-bezier(.4,0,.2,1);
}
.card-product.design-10 .card-product-wrapper:hover .btn-quick-add { transform: translateY(0); }
.card-product.design-10 .btn-quick-add:hover { background: #333; }
.card-product.design-10 .marquee-product .marquee-wrapper { background: #f0f0ec; }
.card-product.design-10 .list-color-product { margin-top: 4px; gap: 5px; }
.card-product.design-10 .list-color-product .list-color-item .swatch-value {
    border-radius: 0; border: 1px solid rgba(0,0,0,.15);
}
.card-product.design-10 .list-color-product .list-color-item{border-radius:0}
.card-product.design-10 .list-color-product .list-color-item{width: 22px; height: 22px;}
.card-product.design-10 .list-color-product .list-color-item .swatch-value{width:14px;height:14px}

/* ═══════════════════════════════════════════════════════════
   DESIGN 11 — Soft Shadow
   Beyaz, belirgin bottom shadow, mint ATC accent
   ═══════════════════════════════════════════════════════════ */
.card-product.design-11 {
    background: #ffffff; border-radius: 16px; overflow: hidden;
    box-shadow: 0 2px 0 0 #e0e0da, 0 1px 6px rgba(0,0,0,.06);
    transition: box-shadow .3s ease, transform .3s ease;
}
.card-product.design-11:hover {
    box-shadow: 0 10px 28px rgba(0,0,0,.1), 0 2px 0 0 #c8c8c2;
    transform: translateY(-4px);
}
.card-product.design-11 .card-product-wrapper {
    border-radius: 0; aspect-ratio: 1 / 1.1; overflow: hidden;
}
.card-product.design-11 .card-product-wrapper img {
    transition: opacity .5s ease, transform .8s cubic-bezier(.4,0,.2,1);
}
.card-product.design-11 .card-product-wrapper:hover .img-product { opacity: 0; }
.card-product.design-11 .card-product-wrapper:hover .img-hover   { opacity: 1; transform: scale(1.06); }
.card-product.design-11 .card-product-info { padding: 12px 14px 16px; gap: 5px; position: relative; z-index: 25; }
.card-product.design-11 .card-product-info .title {
    font-size: 13px; font-weight: 500; color: #1a1a18; line-height: 1.4;
}
.card-product.design-11 .card-product-info .price { font-size: 14px; }
.card-product.design-11 .card-product-info .new-price { color: #1a1a18; font-weight: 700; }
.card-product.design-11 .card-product-info .old-price { font-size: 12px; color: #b8b8b4; font-weight: 400; }
.card-product.design-11 .btn-quick-add {
    height: 40px; font-size: 11px; font-weight: 700;
    letter-spacing: .05em; text-transform: uppercase;
    background: #9eceb3; color: #1a1a18; border-radius: 0;
    transform: translateY(100%);
    transition: transform .26s cubic-bezier(.4,0,.2,1), background .2s;
}
.card-product.design-11 .card-product-wrapper:hover .btn-quick-add { transform: translateY(0); }
.card-product.design-11 .btn-quick-add:hover { background: #8abfa3; }
.card-product.design-11 .marquee-product .marquee-wrapper { background: #f0f9f4; }
.card-product.design-11 .marquee-product .marquee-child-item .on-sale-badge {
    background-color: #9eceb3; color: #1a1a18;
}
.card-product.design-11 .list-color-product { margin-top: 4px; gap: 5px; }
.card-product.design-11 .list-color-product .list-color-item{width: 22px;height: 22px;}
.card-product.design-11 .list-color-product .list-color-item .swatch-value {width: 14px;height: 14px;box-shadow: 0 0 0 1px rgba(0,0,0,.1);}

/* ═══════════════════════════════════════════════════════════
   DESIGN 12 — Dark Luxe
   Koyu zemin, beyaz tipografi, glassmorphism ATC
   ═══════════════════════════════════════════════════════════ */
.card-product.design-12 {
    background: #111110; border-radius: 14px; overflow: hidden;
    border: 1px solid #2a2a28;
    transition: border-color .3s, box-shadow .3s;
}
.card-product.design-12:hover {
    border-color: #4a4a46; box-shadow: 0 16px 40px rgba(0,0,0,.5);
}
.card-product.design-12 .card-product-wrapper {
    border-radius: 0; aspect-ratio: 3 / 4; overflow: hidden;
}
.card-product.design-12 .card-product-wrapper img {
    transition: opacity .5s ease, transform .9s cubic-bezier(.4,0,.2,1);
    filter: brightness(.92);
}
.card-product.design-12 .card-product-wrapper:hover .img-product { opacity: 0; }
.card-product.design-12 .card-product-wrapper:hover .img-hover   { opacity: 1; transform: scale(1.07); filter: brightness(1); }
.card-product.design-12 .card-product-info { padding: 13px 15px 18px; gap: 6px; background: #111110; position: relative; z-index: 25; }
.card-product.design-12 .card-product-info .title {
    font-size: 13px; font-weight: 400; color: rgba(255,255,255,.7);
    letter-spacing: .02em; line-height: 1.5; transition: color .2s;
}
.card-product.design-12:hover .card-product-info .title { color: rgba(255,255,255,.95); }
.card-product.design-12 .card-product-info .price { font-size: 14px; }
.card-product.design-12 .card-product-info .new-price { color: #fff; font-weight: 700; }
.card-product.design-12 .card-product-info .old-price {
    color: rgba(255,255,255,.25); font-size: 11.5px; font-weight: 400;
}
.card-product.design-12 .btn-quick-add {
    background: rgba(255,255,255,.08); color: rgba(255,255,255,.9);
    height: 40px; font-size: 11px; font-weight: 600;
    letter-spacing: .07em; text-transform: uppercase; border-radius: 0;
    border-top: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    transform: translateY(100%);
    transition: transform .26s cubic-bezier(.4,0,.2,1), background .2s;
}
.card-product.design-12 .card-product-wrapper:hover .btn-quick-add { transform: translateY(0); }
.card-product.design-12 .btn-quick-add:hover { background: rgba(255,255,255,.16); color: #fff; }
.card-product.design-12 .marquee-product .marquee-wrapper { background: rgba(0,0,0,.55); }
.card-product.design-12 .marquee-product .marquee-child-item span { color: rgba(255,255,255,.3); }
.card-product.design-12 .marquee-product .marquee-child-item .on-sale-badge {
    background-color: rgba(255,255,255,.1); color: rgba(255,255,255,.6);
}
.card-product.design-12 .list-color-product { margin-top: 4px; gap: 5px; }
.card-product.design-12 .list-color-product .list-color-item .swatch-value {
    border: 2px solid #111110; box-shadow: 0 0 0 1.5px rgba(255,255,255,.2);
}

.card-product.design-12 .list-color-product .list-color-item:hover{
    border-color: #ffffff;
}