/* Frues — paylaşılan baz CSS. Tüm Frues varyantları (frues1-classic ... frues5-showcase)
   bu dosyayı önce yükler, sonra kendi {kod}.css'i ile değişkenleri override eder. */

html.frues-html, .frues-site { min-height: 100%; }
body.frues-site { min-height: 100vh; display: flex; flex-direction: column; }
body.frues-site > .frues-main { flex: 1 0 auto; }
body.frues-site > .frues-footer { flex-shrink: 0; }

/* Token tanımları frues-tokens.css'e taşındı (:root üzerinde, koyu tema türevleriyle).
   Burada yalnızca uygulama kalır. */
.frues-site {
    font-family: var(--font);
    color: var(--text-primary);
    background: var(--body-bg);
    line-height: 1.5;
}

.frues-site * { box-sizing: border-box; }

.pub-container { max-width: 1400px; margin: 0 auto; padding: 0 24px; }

/* :where() ŞART — ÖZGÜLLÜĞÜ SIFIR. Bu kural `.frues-site a` olarak yazıldığında
   (0,2,0) özgüllüğe sahipti ve tek sınıflı buton kurallarını (0,1,0) YENİYORDU:
   bağlantı biçimindeki her buton kendi rengi yerine ebeveyninin rengini alıyordu.
   Kodda bunun izi de var — .frues-hero-cta, .frues-card-cta, .frues-promo-cta,
   .frues-cart-empty-cta gibi kurallar rengi `!important` ile yazmak zorunda kalmış.
   Yazılmayanlar sessizce kırılıyordu: .frues-filter-clearall-btn koyu modda açık
   zeminde açık yazı veriyordu (ölçülen kontrast ~1.1), .frues-blog-card-cta primary
   rengini hiç almıyordu. :where() ile kural "varsayılan" hâline geliyor: sınıflı bir
   kural varsa o kazanıyor, yoksa bağlantı yine miras alıyor. */
:where(.frues-site) a { color: inherit; text-decoration: none; }
.frues-site img { max-width: 100%; height: auto; display: block; }
.frues-site button { font-family: inherit; }

/* Header — Frues1Header portu (variant-agnostic, palet/font değişkenlerle değişir) */
.frues-header { position: sticky; top: 0; z-index: 1001; background: var(--header-bg); backdrop-filter: none; border-bottom: 1px solid var(--border-color); }
.frues-header { position: relative; }
.frues-header-row { display: flex !important; align-items: center; justify-content: space-between; height: 80px; gap: 24px; position: relative; }
/* Menü akışın içinde durur.
   Eskiden mutlak konumlandırılıp konteynerin sabit %33'üne çivilenmişti (hero'nun
   sol kartıyla hizalamak için). Akış dışında olduğu için ne logonun genişliğini ne
   de menü öğesi sayısını hesaba katıyordu: menü büyüdükçe iki yana da büyüyüp
   logonun üstüne biniyordu. Menü içeriği admin'den yönetildiği için sabit yüzde
   sürdürülebilir değil.
   flex:0 1 auto + space-between → logo ile ikonlar arasında eşit boşlukla oturur;
   gap ve yazı boyutu daralan ekranda akıcı küçülür. overflow KULLANILMIYOR:
   bir eksen visible değilse diğeri de auto olur ve alt menüler kırpılırdı. */
.frues-header-row > .frues-nav {
    flex: 0 1 auto;
    min-width: 0;
    flex-wrap: nowrap;
    justify-content: center;
    gap: clamp(10px, 1.3vw, 28px);
}
.frues-header-row > .frues-nav .frues-link {
    white-space: nowrap;
    font-size: clamp(13px, 1.05vw, 15px);
}
.frues-header-row > .frues-logo,
.frues-header-row > .frues-icons { flex: 0 0 auto; }

/* Dar masaüstünde ikon şeridini sıkıştır — menüye ~70px yer açar.
   Admin ikonu ve dil kodu gizlenir; dil bayrağı kalır, admin panele
   çekmeceden ve /admin adresinden erişilebilir. */
@media (min-width: 1200px) and (max-width: 1365px) {
    .frues-icons .frues-icon-admin,
    .frues-icons .frues-icon-puan { display: none; }
    .frues-lang-switch .frues-lang-code { display: none; }
}
.frues-hamburger { display: none; background: none; border: none; cursor: pointer; padding: 6px; color: var(--text-primary); }
.frues-mobile-bottombar { display: none; }
.frues-mobile-drawer { display: none; }

/* Hamburger eşiği 991 değil 1199: ölçümle 8 öğelik menü 1200px'in altında
   logo (141px) + ikonlar (~320px) ile birlikte sığmıyor. Mobil çekmece tüm menü
   öğelerini ve alt menülerini zaten basıyor, bu bantta hiçbir bağlantı kaybolmaz. */
@media (max-width: 1199px) {
    .frues-header { display: block !important; position: sticky !important; top: 0; background: var(--header-bg); z-index: 100; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
    .frues-header-row { display: flex !important; grid-template-columns: unset !important; align-items: center; justify-content: space-between; height: 64px !important; padding: 0 16px; gap: 12px; }
    .frues-hamburger { display: inline-flex !important; align-items: center; justify-content: center; order: 1; }
    .frues-header-row > .frues-nav { display: none !important; }
    .frues-header-row > .frues-logo { order: 2; flex: 1; display: flex; justify-content: center; position: static !important; }
    .frues-header-row > .frues-logo img { max-height: 38px; width: auto; }
    .frues-header-row > .frues-icons { order: 3; }
    .frues-icons .frues-icon-puan, .frues-icons .frues-icon-fav, .frues-icons .frues-icon-admin, .frues-icons .frues-lang-switch { display: none !important; }
    .frues-mobile-bottombar { display: flex !important; }
    .frues-mobile-drawer { display: block !important; }
    body { padding-bottom: 70px; }
}

/* Mobil sol slide-in drawer */
.frues-mobile-drawer { position: fixed; inset: 0; z-index: 4000; visibility: hidden; pointer-events: none; }
.frues-mobile-drawer.open { visibility: visible; pointer-events: auto; }
.frues-mobile-drawer-bd { position: absolute; inset: 0; background: rgba(0,0,0,0.55); opacity: 0; transition: opacity .25s; }
.frues-mobile-drawer.open .frues-mobile-drawer-bd { opacity: 1; }
.frues-mobile-drawer-panel { position: absolute; top: 0; left: 0; bottom: 0; width: 88%; max-width: 360px; background: var(--surface); transform: translateX(-100%); transition: transform .3s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column; box-shadow: 4px 0 20px rgba(0,0,0,0.15); }
.frues-mobile-drawer.open .frues-mobile-drawer-panel { transform: translateX(0); }
.frues-mobile-drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid #e5e7eb; }
.frues-mobile-drawer-logo img { height: 32px; width: auto; }
.frues-mobile-drawer-logo .frues-logo-text { color: var(--primary); font-weight: 800; font-size: 1.3rem; }
.frues-mobile-drawer-close { background: none; border: none; cursor: pointer; padding: 6px; color: #6b7280; display: flex; align-items: center; }
.frues-mobile-nav { flex: 1; padding: 12px 0; overflow-y: auto; }
.frues-mobile-nav-link, .frues-mobile-nav-group summary { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; color: var(--text-primary); font-size: 1rem; font-weight: 600; border-bottom: 1px solid #f3f4f6; text-decoration: none; cursor: pointer; }
.frues-mobile-nav-link:hover, .frues-mobile-nav-group summary:hover { background: var(--surface-2); }
.frues-mobile-nav-group summary::-webkit-details-marker { display: none; }
.frues-mobile-nav-group[open] summary { background: var(--surface-2); color: var(--primary); }
.frues-mobile-nav-group[open] summary .material-icons { transform: rotate(180deg); }
.frues-mobile-nav-subs { background: var(--surface-2); padding: 4px 0; }
.frues-mobile-nav-sublink { display: block; padding: 12px 36px; color: var(--text-secondary); font-size: .92rem; text-decoration: none; }
.frues-mobile-nav-sublink:hover { background: #f3f4f6; color: var(--primary); }
.frues-mobile-drawer-foot { padding: 14px 20px 20px; border-top: 1px solid #e5e7eb; background: var(--surface-2); display: flex; flex-direction: column; gap: 6px; }
.frues-mobile-drawer-foot-link { display: flex; align-items: center; gap: 12px; padding: 10px 12px; color: var(--text-primary); font-size: .92rem; font-weight: 600; text-decoration: none; border-radius: 8px; }
.frues-mobile-drawer-foot-link:hover { background: var(--surface); color: var(--primary); }
.frues-mobile-drawer-foot-link .material-icons-outlined { font-size: 20px; }

/* Mobil alt sabit nav bar */
.frues-mobile-bottombar { position: fixed; bottom: 0; left: 0; right: 0; background: var(--surface); border-top: 1px solid #e5e7eb; box-shadow: 0 -4px 12px rgba(0,0,0,0.06); justify-content: space-around; align-items: center; padding: 6px 0 max(6px, env(safe-area-inset-bottom)); z-index: 3000; height: 64px; }
.frues-mobile-bottombar-btn { flex: 1; background: none; border: none; cursor: pointer; padding: 6px; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--text-secondary); text-decoration: none; font-size: .68rem; font-weight: 600; position: relative; }
.frues-mobile-bottombar-btn .material-icons-outlined { font-size: 24px; color: var(--text-primary); }
.frues-mobile-bottombar-btn:hover, .frues-mobile-bottombar-btn:active { color: var(--primary); }
.frues-mobile-bottombar-btn:hover .material-icons-outlined, .frues-mobile-bottombar-btn:active .material-icons-outlined { color: var(--primary); }
.frues-mobile-bottombar-badge { position: absolute; top: 0; right: calc(50% - 18px); background: var(--primary); color: #fff; font-size: .62rem; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }

@media (max-width: 480px) {
    .frues-icons { gap: 0 !important; }
    .frues-icons .frues-icon-btn { width: 36px !important; height: 36px !important; }
}
.frues-logo { display: flex; align-items: center; flex-shrink: 0; }
.frues-logo img { height: 46px; }
.frues-logo-text { font-size: 1.6rem; font-weight: 900; letter-spacing: -0.5px; color: var(--primary); font-family: var(--font); }
.frues-nav { display: flex; gap: 28px; align-items: center; }
.frues-nav-item { position: relative; }
.frues-link { display: inline-flex; align-items: center; font-size: 0.9rem; font-weight: 600; color: var(--text-primary); padding: 12px 0; position: relative; transition: color 0.2s; font-family: var(--font); text-transform: none; letter-spacing: 0; -webkit-font-smoothing: antialiased; }
.frues-link:hover, .frues-link.active { color: var(--primary); }
.frues-link.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; background: var(--primary); border-radius: 1px; }
.frues-submenu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px); background: var(--surface); border: 1px solid rgba(0,0,0,.06); border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.12); padding: 8px 0; min-width: 220px; opacity: 0; visibility: hidden; transition: opacity .18s, visibility .18s, transform .18s; z-index: 1100; }
.frues-nav-item.has-sub:hover .frues-submenu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.frues-submenu-link { display: block; padding: 10px 18px; font-size: 0.86rem; font-weight: 500; color: var(--text-primary); transition: background .15s, color .15s; white-space: nowrap; }
.frues-submenu-link:hover { background: var(--secondary); color: var(--primary); }

/* ============ Kategori Mega Menü (opsiyonel — Settings.CategoryMegaMenu) ============
   "Ürünler" öğesinin üzerine gelince açılan tam genişlikte kategori paneli.
   Saf CSS :hover — .frues-submenu ile aynı mantık, JS yok.
   Panel .frues-header-row'a göre değil viewport'a göre yayılır; başlık sticky ve
   z-index:1001, açılır menü 1100 olduğu için panel 1101 alır.
   Yalnız bu dosyada duruyor; eski düzen (_view.cshtml) frues-base.css'i yüklemiyor,
   dolayısıyla kurallar kendiliğinden Frues'e özel kalıyor. */
.frues-megamenu {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--surface);
    border-top: 1px solid var(--border-color);
    box-shadow: 0 24px 48px rgba(0,0,0,.14);
    padding: 28px 0 24px;
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
    z-index: 1101;
}
.frues-nav-item.frues-has-mega { position: static; }
.frues-nav-item.frues-has-mega:hover .frues-megamenu { opacity: 1; visibility: visible; transform: translateY(0); }

.frues-megamenu-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 18px 14px; }

.frues-megamenu-card {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 12px 10px; text-align: center; text-decoration: none;
    background: var(--surface);
    /* Çerçeve KALINLIĞI sabit, yalnız rengi değişiyor: GioWeb'de 1px→3px geçişi
       kartı 2px zıplatıyor, burada tekrarlanmasın. */
    border: 2px solid var(--border-color);
    border-radius: 12px;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.frues-megamenu-card:hover {
    border-color: var(--primary);
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0,0,0,.10);
}

.frues-megamenu-media {
    width: 100%; height: 64px; display: flex; align-items: center; justify-content: center;
    overflow: hidden; border-radius: 8px;
}
.frues-megamenu-media img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform .25s ease; }
.frues-megamenu-card:hover .frues-megamenu-media img { transform: scale(1.07); }

/* Görseli olmayan (ya da yüklenemeyen) kategori: baş harf. Kategori kartlarındaki
   mevcut çözümün aynısı — iki kategorinin dosyası bugün eksik. */
.frues-megamenu-initial { display: none; font-size: 1.6rem; font-weight: 800; color: var(--text-muted); }
.frues-megamenu-media.no-img { background: var(--surface-2); }
.frues-megamenu-media.no-img .frues-megamenu-initial { display: block; }

.frues-megamenu-name { font-size: .74rem; font-weight: 700; line-height: 1.25; color: var(--text-primary); letter-spacing: .01em; }
.frues-megamenu-card:hover .frues-megamenu-name { color: var(--primary); }

.frues-megamenu-subs { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.frues-megamenu-sub { font-size: .66rem; color: var(--text-muted); background: var(--surface-2); border-radius: 999px; padding: 2px 7px; }

.frues-megamenu-all {
    display: inline-block; margin-top: 18px; font-size: .8rem; font-weight: 700;
    color: var(--primary); text-decoration: none;
}
.frues-megamenu-all:hover { text-decoration: underline; }

@media (max-width: 1400px) { .frues-megamenu-grid { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 1199px) { .frues-megamenu { display: none; } }

.frues-icons { display: flex; gap: 4px; align-items: center; }
.frues-icon-btn { width: 40px; height: 40px; border-radius: 50%; background: transparent; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative; color: var(--text-primary); transition: background 0.18s; }
.frues-icon-btn:hover { background: rgba(0,0,0,0.05); }
.frues-icon-btn svg { display: block; }

/* Rozetler (sepet / favori / puan) AŞAĞIDA, ikon düğmelerinin yanında tanımlı.
   Burada bir kez daha tanımlıydılar; sonra gelen blok kazandığı için bu üç kural
   ölüydü — üstelik jetonlu (var(--primary)) sürüm ölü olan taraftı. Silindi. */

/* ============ Cart drawer — sağdan slide-in panel (Shopify Frues stil) ============ */
.frues-cart-drawer { position: fixed; inset: 0; z-index: 2000; pointer-events: none; }
.frues-cart-drawer-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.5); opacity: 0; transition: opacity 0.3s ease; }
.frues-cart-drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: 440px; max-width: 100%; background: var(--surface); color: var(--text-primary); transform: translateX(100%); transition: transform 0.32s cubic-bezier(.4,.0,.2,1); display: flex; flex-direction: column; box-shadow: -20px 0 60px rgba(0,0,0,0.18); }
.frues-cart-drawer.open { pointer-events: auto; }
.frues-cart-drawer.open .frues-cart-drawer-overlay { opacity: 1; }
.frues-cart-drawer.open .frues-cart-drawer-panel { transform: translateX(0); }
body.frues-cart-drawer-open { overflow: hidden; }
.frues-cart-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px; border-bottom: 1px solid var(--border-color); }
.frues-cart-drawer-head h2 { font-size: 1.3rem; font-weight: 800; color: var(--heading-color); margin: 0; font-family: var(--font); }
.frues-cart-drawer-close { width: 36px; height: 36px; border-radius: 50%; background: transparent; border: none; color: var(--text-secondary); font-size: 1.1rem; cursor: pointer; transition: background 0.18s, color 0.18s; }
.frues-cart-drawer-close:hover { background: rgba(0,0,0,0.05); color: var(--text-primary); }

/* Empty state */
.frues-cart-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 32px; text-align: center; }
.frues-cart-empty-icon { width: 100px; height: 100px; border-radius: 50%; background: var(--secondary); display: flex; align-items: center; justify-content: center; font-size: 2.4rem; color: var(--text-secondary); margin-bottom: 24px; }
.frues-cart-empty h3 { font-size: 1.4rem; font-weight: 800; color: var(--heading-color); margin: 0 0 10px; font-family: var(--font); }
.frues-cart-empty p { font-size: 0.95rem; color: var(--text-secondary); line-height: 1.5; margin: 0 0 28px; max-width: 280px; }
.frues-cart-empty-cta { display: inline-block; padding: 14px 32px; background: var(--btn-dark-bg); color: var(--btn-dark-color) !important; font-size: 0.78rem; font-weight: 800; letter-spacing: 2px; border-radius: 999px; text-transform: uppercase; transition: filter 0.18s, transform 0.18s, background 0.18s; }
.frues-cart-empty-cta:hover { background: var(--primary); transform: translateY(-1px); }

/* FREE shipping progress bar */
.frues-cart-shipping-bar { padding: 14px 24px 16px; border-bottom: 1px solid var(--border-color); }
.frues-cart-shipping-msg { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--text-primary); margin-bottom: 8px; }
.frues-cart-shipping-msg strong { color: var(--primary); font-weight: 800; }
.frues-cart-shipping-icon { color: var(--primary); font-size: 0.9rem; flex-shrink: 0; transition: color .3s ease; }
/* Ray: overflow:hidden YOK — yıldız dolum ucunda çubuğun dışına taşıyor. */
.frues-cart-progress { position: relative; height: 6px; background: color-mix(in srgb, var(--text-primary) 8%, transparent); border-radius: 99px; }
.frues-cart-progress-fill {
    height: 100%; border-radius: 99px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 65%, #fff), var(--primary));
    transition: width .45s cubic-bezier(.4, 0, .2, 1), background .3s ease;
}
.frues-cart-progress-star {
    position: absolute; top: 50%;
    width: 20px; height: 20px; margin-left: -10px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--surface);
    color: var(--primary);
    font-size: .62rem;
    box-shadow: 0 1px 5px rgba(0,0,0,.16);
    transform: translateY(-50%);
    transition: left .45s cubic-bezier(.4, 0, .2, 1), color .3s ease;
}
/* Eşik aşıldığında çubuk ve yıldız başarı rengine döner, yıldız bir kez zıplar. */
.frues-cart-shipping-bar.is-reached .frues-cart-progress-fill { background: linear-gradient(90deg, color-mix(in srgb, var(--success) 62%, #fff), var(--success)); }
.frues-cart-shipping-bar.is-reached .frues-cart-progress-star { color: var(--success); animation: fruesShipPop .5s cubic-bezier(.34, 1.56, .64, 1); }
.frues-cart-shipping-bar.is-reached .frues-cart-shipping-icon { color: var(--success); }
@keyframes fruesShipPop {
    0% { transform: translateY(-50%) scale(1); }
    45% { transform: translateY(-50%) scale(1.45); }
    100% { transform: translateY(-50%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .frues-cart-progress-fill, .frues-cart-progress-star { transition: none; }
    .frues-cart-shipping-bar.is-reached .frues-cart-progress-star { animation: none; }
}

/* Tools — Order Note / Coupon / Shipping accordion */
.frues-cart-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 12px 24px 0; }
.frues-cart-tool-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px; background: var(--surface); border: 1.5px solid var(--border-color); border-radius: 10px; font-size: 0.74rem; font-weight: 700; color: var(--text-primary); cursor: pointer; transition: border-color 0.18s, background 0.18s, color 0.18s; font-family: inherit; }
.frues-cart-tool-btn i { font-size: 1rem; color: var(--text-secondary); transition: color 0.18s; }
.frues-cart-tool-btn:hover { border-color: var(--primary); }
.frues-cart-tool-btn.active { border-color: var(--primary); background: var(--secondary); color: var(--primary); }
.frues-cart-tool-btn.active i { color: var(--primary); }
.frues-cart-tool-panel { max-height: 0; overflow: hidden; padding: 0 24px; transition: max-height 0.35s ease, padding 0.35s ease; }
.frues-cart-tool-panel.open { max-height: 260px; padding: 14px 24px; border-bottom: 1px solid var(--border-color); }
.frues-cart-tool-label { display: block; font-size: 0.78rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 8px; }
.frues-cart-tool-panel textarea { width: 100%; border: 1.5px solid var(--border-color); border-radius: 10px; padding: 10px 12px; font-size: 0.92rem; font-family: inherit; resize: vertical; outline: none; transition: border-color 0.18s; }
.frues-cart-tool-panel textarea:focus { border-color: var(--primary); }
.frues-cart-coupon-row { display: flex; gap: 8px; }
.frues-cart-coupon-row input { flex: 1; border: 1.5px solid var(--border-color); border-radius: 999px; padding: 10px 16px; font-size: 0.9rem; outline: none; transition: border-color 0.18s; font-family: inherit; }
.frues-cart-coupon-row input:focus { border-color: var(--primary); }
.frues-cart-coupon-apply { padding: 10px 20px; border-radius: 999px; background: var(--btn-dark-bg); color: var(--btn-dark-color); border: none; font-weight: 700; font-size: 0.82rem; letter-spacing: 0.5px; cursor: pointer; transition: filter 0.18s; font-family: inherit; }
.frues-cart-coupon-apply:hover { filter: brightness(0.85); }

.frues-cart-coupon-applied { display: flex; align-items: center; justify-content: space-between; background: #f0fdf4; border: 1.5px solid #16a34a; border-radius: 12px; padding: 12px 14px; gap: 12px; }
.frues-cart-coupon-applied strong { color: #15803d; font-weight: 800; letter-spacing: 0.5px; }
.frues-cart-coupon-discount { display: block; font-size: 0.84rem; color: #15803d; font-weight: 700; margin-top: 2px; }
.frues-cart-coupon-remove { background: transparent; border: none; color: #dc2626; font-size: 0.82rem; font-weight: 700; cursor: pointer; text-decoration: underline; padding: 0; font-family: inherit; }
.frues-cart-coupon-remove:hover { color: #991b1b; }

.frues-cart-subtotal-row, .frues-cart-discount-row { display: flex; justify-content: space-between; font-size: 0.92rem; margin-bottom: 6px; }
.frues-cart-subtotal-row { color: var(--text-secondary); }
.frues-cart-discount-row { color: #15803d; font-weight: 700; }
.frues-cart-tool-hint { font-size: 0.85rem; color: var(--text-secondary); margin: 0; line-height: 1.45; }
.frues-cart-tool-hint strong { color: var(--primary); }

/* Cross-sell add button */
.frues-cart-crossell-add { display: inline-block; margin-top: 4px; padding: 4px 10px; background: transparent; border: 1px solid var(--primary); color: var(--primary); border-radius: 999px; font-size: 0.7rem; font-weight: 700; cursor: pointer; transition: background 0.18s, color 0.18s; font-family: inherit; }
.frues-cart-crossell-add:hover { background: var(--primary); color: #fff; }

/* Items list */
.frues-cart-drawer-list { flex: 1; overflow-y: auto; padding: 20px 24px; }
.frues-cart-item { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--border-color); }
.frues-cart-item:last-child { border-bottom: none; }
.frues-cart-item-img { width: 80px; height: 80px; border-radius: 10px; overflow: hidden; background: var(--secondary); flex-shrink: 0; }
.frues-cart-item-img img { width: 100%; height: 100%; object-fit: cover; }
.frues-cart-item-body { flex: 1; min-width: 0; }
.frues-cart-item-name { font-size: 0.92rem; font-weight: 600; color: var(--text-primary); line-height: 1.35; margin: 0 0 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.frues-cart-item-price { font-size: 1.02rem; font-weight: 800; color: var(--primary); margin-bottom: 10px; }
.frues-cart-item-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.frues-cart-qty { display: inline-flex; align-items: center; gap: 0; border: 1.5px solid var(--border-color); border-radius: 999px; overflow: hidden; padding: 2px; }
.frues-cart-qty-btn { width: 28px; height: 28px; border: none; background: transparent; cursor: pointer; font-size: 1rem; font-weight: 700; color: var(--text-primary); transition: background 0.15s; border-radius: 50%; }
.frues-cart-qty-btn:hover { background: rgba(0,0,0,0.06); }
.frues-cart-qty-val { padding: 0 12px; font-size: 0.92rem; font-weight: 700; color: var(--text-primary); min-width: 24px; text-align: center; }
.frues-cart-remove { background: none; border: none; color: var(--text-secondary); font-size: 0.82rem; cursor: pointer; text-decoration: underline; padding: 0; }
.frues-cart-remove:hover { color: var(--primary); }

/* Cross-sell */
.frues-cart-crossell { padding: 20px 24px; border-top: 1px solid var(--border-color); background: var(--secondary); }
.frues-cart-crossell-head { display: flex; align-items: center; justify-content: space-between; font-size: 0.85rem; font-weight: 700; color: var(--text-primary); margin-bottom: 14px; letter-spacing: 0.3px; }
.frues-cart-crossell-nav { display: flex; gap: 6px; }
.frues-cart-crossell-arrow { width: 32px; height: 32px; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--border-color); color: var(--text-primary); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.78rem; transition: background 0.18s, border-color 0.18s, color 0.18s; }
.frues-cart-crossell-arrow:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
.frues-cart-crossell-track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; }
.frues-cart-crossell-track::-webkit-scrollbar { display: none; }
.frues-cart-crossell-item { scroll-snap-align: start; }
.frues-cart-crossell-item { display: flex; gap: 10px; min-width: 230px; max-width: 250px; background: var(--surface); border-radius: 10px; padding: 10px; border: 1px solid var(--border-color); }
.frues-cart-crossell-img { width: 56px; height: 56px; border-radius: 8px; overflow: hidden; background: var(--secondary); flex-shrink: 0; }
.frues-cart-crossell-img img { width: 100%; height: 100%; object-fit: cover; }
.frues-cart-crossell-info { flex: 1; min-width: 0; }
.frues-cart-crossell-name { font-size: 0.78rem; font-weight: 600; color: var(--text-primary); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 4px; }
.frues-cart-crossell-price { font-size: 0.88rem; font-weight: 800; color: var(--primary); }

/* Footer */
.frues-cart-drawer-foot { padding: 18px 24px 24px; border-top: 1px solid var(--border-color); background: var(--surface); }
.frues-cart-total-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.frues-cart-total-label { font-size: 1rem; font-weight: 700; color: var(--text-primary); }
.frues-cart-total-val { font-size: 1.4rem; font-weight: 900; color: var(--primary); font-family: var(--font); }
.frues-cart-tax-note { font-size: 0.78rem; color: var(--text-secondary); margin-bottom: 16px; }
.frues-cart-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.frues-cart-action { padding: 14px 16px; border-radius: var(--cta-radius); font-size: 0.78rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; text-align: center; transition: filter 0.18s, transform 0.18s, background 0.18s, color 0.18s; cursor: pointer; }
.frues-cart-action-secondary { background: var(--surface); color: var(--text-primary) !important; border: 1.5px solid #1a1a1a; border-radius: 999px; }
.frues-cart-action-secondary:hover { background: var(--secondary); border-color: var(--primary); color: var(--primary) !important; }
.frues-cart-action-primary { background: var(--btn-dark-bg); color: var(--btn-dark-color) !important; border: 1.5px solid #1a1a1a; border-radius: 999px; }
.frues-cart-action-primary:hover { background: var(--primary); border-color: var(--primary); filter: brightness(0.95); transform: translateY(-1px); }

@media (max-width: 480px) {
    .frues-cart-drawer-panel { width: 100%; }
    .frues-cart-drawer-head { padding: 18px 16px; }
    .frues-cart-drawer-list { padding: 16px; }
    .frues-cart-drawer-foot { padding: 16px; }
}

/* Frues toast — sağ üstte küçük bildirim (sepete eklendi vs.) */
.frues-toast { position: fixed; top: 24px; right: 24px; background: #16a34a; color: #fff; padding: 14px 20px; border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,0.2); display: flex; align-items: center; gap: 10px; font-size: 0.92rem; font-weight: 600; z-index: 3000; max-width: 320px; transform: translateY(-20px); opacity: 0; transition: transform 0.3s cubic-bezier(.4,0,.2,1), opacity 0.3s; pointer-events: none; }
.frues-toast.show { transform: translateY(0); opacity: 1; }
.frues-toast.is-error { background: #dc2626; }
.frues-toast i { font-size: 1.15rem; flex-shrink: 0; }
@media (max-width: 480px) {
    .frues-toast { top: 16px; right: 16px; left: 16px; max-width: none; }
}

/* Bag icon badge */
.frues-bag-badge { position: absolute; top: 2px; right: 2px; background: var(--primary); color: #fff; font-size: 0.62rem; font-weight: 800; min-width: 16px; height: 16px; border-radius: 8px; padding: 0 4px; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.frues-icon-btn { position: relative; }

/* Search bar — header'dan açılan input */
.frues-search-bar { max-height: 0; overflow: hidden; background: var(--secondary); border-bottom: 1px solid var(--border-color); transition: max-height 0.3s ease, padding 0.3s ease; padding: 0 0; }
.frues-search-bar.open { max-height: 800px; padding: 14px 0 0; overflow: visible; }
.frues-icon-fav { position: relative; }
.frues-icon-fav i { color: var(--text-primary); transition: color 0.18s, transform 0.18s; }
.frues-icon-fav:hover i { transform: scale(1.15); color: var(--danger); }
.frues-icon-fav.has-fav i { color: var(--danger); }
.frues-fav-badge { position: absolute; top: -2px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; background: var(--danger); color: #fff; border-radius: 999px; font-size: 0.66rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 5px rgba(0,0,0,0.28); border: 2px solid var(--surface); line-height: 1; }

.frues-icon-puan { position: relative; }
.frues-icon-puan i { color: var(--text-primary); transition: color 0.18s, transform 0.18s; }
.frues-icon-puan:hover i { transform: scale(1.15); color: #ff9800; }
.frues-icon-puan.has-puan i { color: #ff9800; }
.frues-puan-badge { position: absolute; top: -2px; right: -4px; min-width: 22px; height: 18px; padding: 0 6px; background: linear-gradient(135deg,#ff9800,#e65100); color: #fff; border-radius: 999px; font-size: 0.62rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 5px rgba(230,81,0,0.35); border: 2px solid var(--surface); line-height: 1; }

/* Frues dil seçici — flag pill + dropdown */
.frues-lang-switch { position: relative; display: inline-flex; align-items: center; margin: 0 4px; }
.frues-lang-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; height: 34px; background: transparent; border: 1px solid var(--border-color); border-radius: 999px; cursor: pointer; font-family: inherit; color: var(--text-primary); transition: background 0.15s, border-color 0.15s, transform 0.15s; }
.frues-lang-btn:hover { background: var(--surface-2); border-color: var(--text-primary); }
.frues-lang-flag { font-size: 1.05rem; line-height: 1; }
.frues-lang-code { font-weight: 700; font-size: 0.75rem; letter-spacing: 0.5px; }
.frues-lang-caret { font-size: 0.65rem; color: var(--text-secondary); transition: transform 0.2s ease; margin-left: 2px; }
.frues-lang-switch.open .frues-lang-caret { transform: rotate(180deg); }
.frues-lang-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 200px; background: var(--surface); border-radius: 14px; box-shadow: 0 18px 40px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.04); padding: 6px; list-style: none; margin: 0; opacity: 0; pointer-events: none; transform: translateY(-6px); transition: opacity 0.18s ease, transform 0.18s ease; z-index: 1500; backdrop-filter: saturate(160%) blur(12px); border: 1px solid var(--border-color); }
.frues-lang-switch.open .frues-lang-menu { opacity: 1; pointer-events: auto; transform: translateY(0); }
.frues-lang-menu li { padding: 0; margin: 0; }
.frues-lang-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; text-decoration: none; color: var(--text-primary); font-size: 0.88rem; font-weight: 500; transition: background 0.12s, color 0.12s; }
.frues-lang-item:hover { background: var(--surface-2); }
.frues-lang-item.active { background: var(--secondary); color: var(--primary); font-weight: 700; }
.frues-lang-name { flex: 1; }
.frues-lang-tick { color: var(--primary); font-size: 0.78rem; }

@media (max-width: 768px) {
    .frues-lang-code { display: none; }
    .frues-lang-btn { padding: 6px 10px; }
}

/* Frues canlı arama önerisi dropdown */
.frues-suggest-panel { max-height: 0; opacity: 0; overflow: hidden; background: var(--surface); border-top: 1px solid var(--border-color); transition: max-height 0.25s ease, opacity 0.2s ease; }
.frues-suggest-panel.open { max-height: 620px; opacity: 1; overflow-y: auto; box-shadow: 0 10px 30px rgba(0,0,0,0.08); padding-bottom: 14px; }
.frues-suggest-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 4px 8px; }
.frues-suggest-title { font-size: 0.72rem; font-weight: 700; letter-spacing: 2px; color: #6a7184; text-transform: uppercase; }
.frues-suggest-count { font-size: 0.78rem; color: var(--text-secondary); }
.frues-suggest-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 4px 0; }
@media (max-width: 768px) { .frues-suggest-list { grid-template-columns: 1fr; } }
.frues-suggest-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--surface-2); border-radius: 14px; text-decoration: none; color: var(--text-primary); transition: background 0.15s, transform 0.15s, box-shadow 0.15s; border: 1px solid transparent; }
.frues-suggest-item:hover { background: var(--surface); border-color: #e8eaf0; box-shadow: 0 6px 18px rgba(0,0,0,0.06); transform: translateY(-1px); }
.frues-suggest-img { width: 56px; height: 56px; border-radius: 10px; overflow: hidden; background: var(--surface); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.frues-suggest-img img { width: 100%; height: 100%; object-fit: contain; }
.frues-suggest-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.frues-suggest-name { font-weight: 700; font-size: 0.92rem; color: var(--text-primary); text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frues-suggest-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.frues-suggest-code { font-size: 0.72rem; color: #2563eb; background: #eef4ff; padding: 2px 8px; border-radius: 999px; font-weight: 600; }
.frues-suggest-cat { font-size: 0.75rem; color: var(--text-secondary); }
.frues-suggest-price-col { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.frues-suggest-price { font-weight: 700; color: var(--primary); font-size: 0.92rem; }
.frues-suggest-old { font-size: 0.75rem; color: var(--text-secondary); text-decoration: line-through; }
.frues-suggest-arrow { color: var(--text-secondary); font-size: 0.85rem; margin-left: 6px; flex-shrink: 0; transition: transform 0.15s; }
.frues-suggest-item:hover .frues-suggest-arrow { transform: translateX(4px); color: var(--primary); }
.frues-suggest-footer { padding: 12px 4px 4px; text-align: center; border-top: 1px solid #ecedef; margin-top: 8px; }
.frues-suggest-all { color: var(--primary); font-weight: 700; font-size: 0.85rem; text-decoration: none; letter-spacing: 0.5px; }
.frues-suggest-all:hover { text-decoration: underline; }
.frues-suggest-empty { text-align: center; padding: 30px 16px; color: var(--text-secondary); }
.frues-suggest-empty i { font-size: 1.6rem; color: #c5c8cf; margin-bottom: 10px; display: block; }
.frues-suggest-empty p { margin: 0; font-size: 0.9rem; }
.frues-search-form { display: flex; align-items: center; gap: 10px; position: relative; }
.frues-search-icon { color: var(--text-secondary); font-size: 1rem; margin-left: 4px; }
.frues-search-input { flex: 1; height: 44px; padding: 0 16px; font-size: 0.95rem; border: 1.5px solid var(--border-color); border-radius: 999px; background: var(--surface); color: var(--text-primary); font-family: inherit; outline: none; transition: border-color 0.18s, box-shadow 0.18s; }
.frues-search-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0,0,0,0.05); }
.frues-search-submit { height: 44px; padding: 0 24px; border: none; border-radius: 999px; background: var(--primary); color: #fff; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.5px; cursor: pointer; transition: filter 0.18s, transform 0.18s; font-family: inherit; }
.frues-search-submit:hover { filter: brightness(0.9); transform: translateY(-1px); }
.frues-search-close { width: 40px; height: 40px; border-radius: 50%; background: transparent; border: none; color: var(--text-secondary); cursor: pointer; font-size: 1.1rem; }
.frues-search-close:hover { color: var(--text-primary); background: rgba(0,0,0,0.04); }

/* ============ Generic page content — _view-frues.cshtml ile render olan tüm view'lar için ============ */
/* Breadcrumb — Bootstrap default'unu ezerek flex'e çeviriyoruz */
.frues-site .breadcrumb,
.frues-site .breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 0; margin: 0; background: transparent !important; list-style: none; font-size: 0.85rem; }
.frues-site .breadcrumb__item { list-style: none; }
.frues-site .breadcrumb__item-link, .frues-site .breadcrumb a { color: var(--text-secondary); text-decoration: none; transition: color 0.18s; }
.frues-site .breadcrumb__item-link:hover, .frues-site .breadcrumb a:hover { color: var(--primary); }
.frues-site .breadcrumb__item + .breadcrumb__item::before { content: "/"; color: var(--text-secondary); margin-right: 4px; opacity: 0.5; }
.frues-site .breadcrumb__spaceship-safe-area, .frues-site .breadcrumb__title-safe-area { display: none; }
.frues-site .block-header { padding: 24px 0; }
.frues-site .block-header__title, .frues-site .block-header__title-text { font-size: 2rem; font-weight: 800; color: var(--heading-color); margin: 8px 0 0; font-family: var(--font); letter-spacing: -0.5px; }

/* Bootstrap button tema rengini al.
   :not(.fx-btn) — frues-ui.css'in buton sistemi bu yakalayıcının dışında kalmalı.
   Aksi halde `button[type="submit"]` seçicisi (0,3,1) özgüllüğüyle .fx-btn--dark /
   --ghost / --danger varyantlarını eziyor ve tüm butonlar primary çıkıyordu;
   hesap, sepet ve ödeme sayfalarında buton hiyerarşisi kayboluyordu. */
.frues-site .btn-primary, .frues-site .button--primary, .frues-site button[type="submit"]:not(.frues-search-submit):not(.frues-newsletter-btn):not(.fx-btn) { background: var(--primary) !important; border-color: var(--primary) !important; color: var(--cta-color) !important; }
.frues-site .btn-primary { color: #fff !important; }
.frues-site .btn-primary:hover, .frues-site .button--primary:hover { background: var(--primary) !important; border-color: var(--primary) !important; filter: brightness(0.9); transform: translateY(-1px); }

/* Generic content area — Contact, About, Privacy, vb. */
.frues-site main h1, .frues-site main > h1, .frues-site main h2 { color: var(--heading-color); font-family: var(--font); }
.frues-site main .container, .frues-site .container { max-width: 1280px; padding: 0 24px; }
.frues-site .pricelist, .frues-site .page-block,
.frues-site .typography, .frues-site .post-author__about,
.frues-site .contacts__contacts-section { background: var(--surface); border-radius: 18px; padding: 28px; box-shadow: 0 8px 24px rgba(0,0,0,0.04); border: 1px solid var(--border-color); }

/* Form input/select/textarea consistency */
.frues-site .form-control, .frues-site input:not([type="radio"]):not([type="checkbox"]):not(.frues-search-input):not(.frues-newsletter-input),
.frues-site select, .frues-site textarea { background: var(--surface); border: 1.5px solid var(--border-color); border-radius: 10px; padding: 10px 14px; font-size: 0.95rem; color: var(--text-primary); transition: border-color 0.18s, box-shadow 0.18s; font-family: inherit; }
.frues-site .form-control:focus, .frues-site input:focus, .frues-site select:focus, .frues-site textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0,0,0,0.04); outline: none; }

/* ====================================================================== */
/* Hero variants — Frues 1-5 birebir Shopify demo paritesi                 */
/* ====================================================================== */

/* Variant 1 — Classic 2-col */
.frues1-hero { position: relative; background: var(--secondary); padding: 60px 0 80px; overflow: hidden; }
.frues1-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; min-height: 480px; }
.frues1-hero-text { padding-right: 20px; }
.frues1-hero-eyebrow { font-size: 0.85rem; font-weight: 700; letter-spacing: 1px; color: var(--primary); margin-bottom: 18px; text-transform: uppercase; }
.frues1-hero-title { font-size: 4rem; font-weight: 900; line-height: 1.05; letter-spacing: -2px; color: var(--heading-color); margin: 0 0 24px; font-family: var(--font); }
.frues1-hero-sub { font-size: 1.05rem; color: var(--text-secondary); line-height: 1.6; margin: 0 0 32px; max-width: 480px; }
.frues1-hero-cta { display: inline-block; padding: 14px 32px; background: var(--btn-dark-bg); color: var(--btn-dark-color) !important; font-size: 0.85rem; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; transition: background 0.25s, transform 0.2s; border-radius: 0; }
.frues1-hero-cta:hover { background: var(--primary); transform: translateY(-2px); }
.frues1-hero-image { display: flex; align-items: center; justify-content: center; }
.frues1-hero-image img { max-width: 100%; max-height: 520px; object-fit: contain; }
.frues1-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 56px; height: 56px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border-color); cursor: pointer; color: var(--text-primary); display: flex; align-items: center; justify-content: center; z-index: 10; box-shadow: 0 4px 12px rgba(0,0,0,0.06); transition: 0.2s; }
.frues1-arrow:hover { background: var(--primary); color: #fff; border-color: transparent; }
.frues1-arrow-prev { left: 30px; }
.frues1-arrow-next { right: 30px; }

/* Variant 2 — Discount (dot indicators + rounded pill) */
.frues2-hero { position: relative; background: var(--surface); padding: 60px 0 100px; overflow: hidden; }
.frues2-hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 50px; align-items: center; min-height: 480px; }
.frues2-hero-eyebrow { display: inline-block; padding: 6px 14px; background: var(--primary); color: #fff; font-size: 0.78rem; font-weight: 800; letter-spacing: 1.5px; border-radius: 999px; margin-bottom: 22px; }
.frues2-hero-title { font-size: 3.6rem; font-weight: 900; line-height: 1.08; letter-spacing: -1.5px; color: var(--heading-color); margin: 0 0 22px; font-family: var(--font); }
.frues2-hero-sub { font-size: 1.05rem; color: var(--text-secondary); line-height: 1.6; margin: 0 0 32px; max-width: 480px; }
.frues2-hero-cta { display: inline-block; padding: 14px 36px; background: var(--btn-dark-bg); color: var(--btn-dark-color) !important; font-size: 0.85rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; border-radius: 999px; transition: background 0.25s, transform 0.2s; }
.frues2-hero-cta:hover { background: var(--primary); transform: translateY(-2px); }
.frues2-hero-image { display: flex; align-items: center; justify-content: center; }
.frues2-hero-image img { max-width: 100%; max-height: 520px; object-fit: contain; border-radius: 999px 999px 24px 24px; }
.frues2-dots { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 10; }
.frues2-dot { width: 10px; height: 10px; border-radius: 999px; background: var(--border-color); border: none; cursor: pointer; transition: width 0.3s, background 0.3s; padding: 0; }
.frues2-dot.active { width: 32px; background: var(--primary); }

/* Variant 3 — Dual Card */
.frues3-hero { padding: 0 0 24px; background: #f0f0f2; }
.frues3-hero-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: stretch; }
.frues3-card { position: relative; overflow: hidden; display: flex; text-decoration: none !important; background-size: cover; background-position: center; }
/* Kart bütün olarak hareket etmez — sadece içerdeki .frues3-card-bg büyür */
.frues3-card-bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; transition: transform 0.6s ease; will-change: transform; }
.frues3-card-cover:hover .frues3-card-bg { transform: scale(1.06); }

/* Sol BÜYÜK kart: full-cover + Hero hizalama admin'den (left/right) */
.frues3-card-cover { height: 460px; padding: 50px 48px; align-items: center; color: #fff; background-color: #6b8e58; }
.frues3-card-cover .frues3-card-content { max-width: 55%; display: flex; flex-direction: column; }
.frues3-card-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

/* Varsayılan: sol hizalı */
.frues3-hero[data-hero-align="left"] .frues3-card-cover { justify-content: flex-start; }
.frues3-hero[data-hero-align="left"] .frues3-card-cover .frues3-card-content { text-align: left; align-items: flex-start; }
.frues3-hero[data-hero-align="left"] .frues3-card-cover .frues3-card-cta { align-self: flex-start !important; }
.frues3-hero[data-hero-align="left"] .frues3-card-overlay { background: linear-gradient(90deg, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.12) 50%, rgba(0,0,0,0) 100%); }

/* Sağ hizalı (admin Ayarlar → Hizalama: Sağ) */
.frues3-hero[data-hero-align="right"] .frues3-card-cover { justify-content: flex-end; }
.frues3-hero[data-hero-align="right"] .frues3-card-cover .frues3-card-content { text-align: right; align-items: flex-end; }
.frues3-hero[data-hero-align="right"] .frues3-card-cover .frues3-card-cta { align-self: flex-end !important; }
.frues3-hero[data-hero-align="right"] .frues3-card-overlay { background: linear-gradient(270deg, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.12) 50%, rgba(0,0,0,0) 100%); }

/* Hiçbiri ayarlanmadıysa sol default — uyumluluk için */
.frues3-hero:not([data-hero-align]) .frues3-card-cover,
.frues3-hero[data-hero-align=""] .frues3-card-cover { justify-content: flex-start; }
.frues3-hero:not([data-hero-align]) .frues3-card-cover .frues3-card-content,
.frues3-hero[data-hero-align=""] .frues3-card-cover .frues3-card-content { text-align: left; align-items: flex-start; }
.frues3-hero:not([data-hero-align]) .frues3-card-cover .frues3-card-cta,
.frues3-hero[data-hero-align=""] .frues3-card-cover .frues3-card-cta { align-self: flex-start !important; }
.frues3-hero:not([data-hero-align]) .frues3-card-overlay,
.frues3-hero[data-hero-align=""] .frues3-card-overlay { background: linear-gradient(90deg, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.12) 50%, rgba(0,0,0,0) 100%); }

.frues3-card-content { position: relative; z-index: 2; }

.frues3-card-title { font-size: 2.8rem; font-weight: 600; line-height: 1.1; margin: 0 0 14px; color: var(--heading-color); letter-spacing: -0.5px; font-family: var(--font); -webkit-font-smoothing: antialiased; }
.frues3-card-title.white { color: #fff; text-shadow: 0 2px 16px rgba(0,0,0,0.28); }
.frues3-card-sub { font-size: 0.95rem; line-height: 1.55; margin: 0 0 22px; color: var(--text-secondary); max-width: 360px; }
.frues3-card-sub.white { color: rgba(255,255,255,0.95); text-shadow: 0 2px 10px rgba(0,0,0,0.25); }

/* Sağ stack — 2 dikey kart */
.frues3-side-stack { display: grid; grid-template-rows: 1fr 1fr; gap: 16px; height: 460px; }
.frues3-side-stack[data-count="1"] { grid-template-rows: 1fr; }
.frues3-side-stack[data-count="3"] { grid-template-rows: 1fr 1fr 1fr; gap: 10px; }
.frues3-side-stack[data-count="3"] .frues3-card-side { padding: 18px 22px; }
.frues3-side-stack[data-count="3"] .frues3-card-title-sm { font-size: 1.05rem; }
.frues3-side-stack[data-count="3"] .frues3-card-sub-sm { font-size: 0.74rem; margin: 0 0 8px; }
.frues3-side-stack[data-count="3"] .frues3-card-cta { padding: 8px 16px; font-size: .62rem; }
.frues3-card-side { padding: 26px 28px; min-height: 0; gap: 16px; align-items: stretch; }
.frues3-card-side .frues3-card-content { flex: 1; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.frues3-card-side-img { width: 38%; flex-shrink: 0; object-fit: cover; align-self: stretch; }

.frues3-card-light-sm { background: var(--surface); color: var(--heading-color); border: 1px solid #eeefe9; }
.frues3-card-accent-sm { background: var(--primary); color: #fff; }

.frues3-card-title-sm { font-size: 1.3rem; font-weight: 600; line-height: 1.18; margin: 0 0 8px; color: var(--heading-color); font-family: var(--font); letter-spacing: -0.3px; -webkit-font-smoothing: antialiased; }
.frues3-card-title-sm.white { color: #fff; }
.frues3-card-sub-sm { font-size: 0.78rem; line-height: 1.45; margin: 0 0 14px; color: var(--text-secondary); }
.frues3-card-sub-sm.white { color: rgba(255,255,255,0.92); }

/* Pill button stilleri — Shopify SHOP NOW birebir */
.frues3-card-cta { display: inline-flex; align-items: center; justify-content: center; padding: 10px 22px; background: var(--surface) !important; color: var(--text-primary) !important; font-size: .68rem; font-weight: 500; letter-spacing: 1.8px; text-transform: uppercase; border: none; border-radius: 0; align-self: flex-start; width: fit-content; overflow: hidden; position: relative; font-family: var(--font); -webkit-font-smoothing: antialiased; line-height: 1; }
.frues3-card-cta-text { display: inline-block; }
.frues3-card-cta:hover .frues3-card-cta-text { animation: ctaTextDip 0.4s ease; }
@keyframes ctaTextDip {
    0%   { transform: translateY(0); opacity: 1; }
    50%  { transform: translateY(18px); opacity: 0; }
    51%  { transform: translateY(-18px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}
.frues3-card-cta-text { display: inline-block; }
/* Hover'da buton sabit — sadece arka plan görseli büyür */

/* Koyu pill — Bolkar deseni: avocado bg + beyaz text */
.frues3-card-cta.dark { background: var(--heading-color); color: #fff; padding: 12px 26px; }
.frues3-card:hover .frues3-card-cta.dark { background: var(--primary); }
.frues3-card-cta.sm { padding: 9px 18px; font-size: .66rem; letter-spacing: 1.2px; }

@media (max-width: 991px) {
    .frues3-hero-grid { grid-template-columns: 1fr; }
    .frues3-card-cover { height: 360px; padding: 36px 28px; }
    .frues3-card-cover .frues3-card-content { max-width: 100%; }
    .frues3-side-stack { height: auto; }
    .frues3-card-side { min-height: 180px; }
}

/* ============================ BEST SELLER (ProductCircles override) ============================ */
.frues-site .frues-product-circles, .frues-circles { padding: 56px 0; background: var(--surface); }
.frues-product-circles-head, .frues-circles-head { text-align: center; margin-bottom: 36px; }
.frues-product-circles-title, .frues-circles-title { font-size: 1.05rem; font-weight: 800; letter-spacing: 4px; text-transform: uppercase; color: var(--heading-color); margin: 0 0 6px; position: relative; display: inline-block; padding-bottom: 8px; }
.frues-product-circles-title::after, .frues-circles-title::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 48px; height: 2px; background: var(--primary); }
.frues-product-circles-sub, .frues-circles-sub { font-size: 0.88rem; color: var(--text-secondary); margin: 14px 0 0; font-weight: 400; }

/* ============================ CategoryShowcase — pastel asimetrik kartlar (Shopify demo birebir) ============================ */
.frues-catshow { padding: 24px 0 64px; background: var(--surface); }
.frues-catshow-grid { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: 320px 320px; gap: 14px; }
.frues-catshow-card { position: relative; overflow: hidden; padding: 30px 36px; text-decoration: none !important; color: var(--heading-color); display: block; isolation: isolate; }
/* Yumuşak ışık katmanı — düz pastel zemine derinlik verir (sağ üstten sol alta) */
.frues-catshow-glow {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(120% 90% at 88% 12%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 58%),
        linear-gradient(160deg, rgba(255,255,255,.22) 0%, rgba(0,0,0,.06) 100%);
    transition: opacity .45s ease;
}
.frues-catshow-card:hover .frues-catshow-glow { opacity: .75; }
/* Görseli olmayan kartta baş harf filigranı — boş pastel kutu görüntüsünü kırar */
.frues-catshow-initial {
    position: absolute; right: 6%; bottom: -6%; z-index: 1; pointer-events: none;
    font-family: var(--font); font-weight: 800; font-size: 11rem; line-height: 1;
    color: rgba(26,46,26,.09); letter-spacing: -6px; transition: transform .5s ease;
}
.frues-catshow-card:hover .frues-catshow-initial { transform: scale(1.06) translateY(-4px); }
/* Kart hover'da kart hareket etmez — sadece resim ölçeklenir */
.frues-catshow-cell-1 { grid-column: 1 / span 2; grid-row: 1; }    /* Banana 2/8 */
.frues-catshow-cell-2 { grid-column: 3 / span 4; grid-row: 1; }    /* Cantaloupe 4/8 - merkez büyük */
.frues-catshow-cell-3 { grid-column: 7 / span 2; grid-row: 1; }    /* Fresh Fruit 2/8 */
.frues-catshow-cell-4 { grid-column: 1 / span 4; grid-row: 2; }    /* Pestil 4/8 - eşit */
.frues-catshow-cell-5 { grid-column: 5 / span 4; grid-row: 2; }    /* Dondurularak 4/8 - eşit */

/* Sol-üst başlık + DISCOVER NOW link */
.frues-catshow-text { position: absolute; top: 34px; left: 30px; z-index: 3; max-width: 60%; }
.frues-catshow-title { font-size: 1.75rem; font-weight: 700; margin: 0 0 16px; line-height: 1.1; color: var(--heading-color); font-family: var(--font); letter-spacing: -0.4px; -webkit-font-smoothing: antialiased; }
.frues-catshow-link { position: relative; font-size: .82rem; font-weight: 500; letter-spacing: 1.8px; color: var(--heading-color); text-transform: uppercase; padding-bottom: 8px; display: inline-block; }
/* Alt çizgi sabit — wrapper ::after sabit konumda durur, hareket etmez */
.frues-catshow-link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1.5px;
    background: var(--heading-color);
}
/* Yazı animasyon — hover'da iç span çizginin altına inip orijinaline geri döner */
.frues-catshow-link-text { display: inline-block; }
.frues-catshow-link:hover .frues-catshow-link-text { animation: catshowTextDip 0.4s ease; }
@keyframes catshowTextDip {
    0%   { transform: translateY(0); opacity: 1; }
    50%  { transform: translateY(18px); opacity: 0; }
    51%  { transform: translateY(-18px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

/* Resim sağda kart yüksekliğinin %85'ini kaplar */
.frues-catshow-img {
    position: absolute; right: 8%; bottom: 8%; height: 70%; width: auto; max-width: 65%;
    object-fit: contain; object-position: center bottom; z-index: 1; pointer-events: none;
    transform-origin: center bottom;
    transition: transform .55s cubic-bezier(.22,.61,.36,1), filter .55s ease;
    filter: drop-shadow(0 14px 22px rgba(26,46,26,.16));
}
.frues-catshow-card:hover .frues-catshow-img { transform: scale(1.07) translateY(-6px); filter: drop-shadow(0 22px 30px rgba(26,46,26,.22)); }
/* Sol kart (cell-1) resim daha küçük olsun */
.frues-catshow-cell-1 .frues-catshow-img, .frues-catshow-cell-3 .frues-catshow-img, .frues-catshow-cell-5 .frues-catshow-img { right: 6%; max-width: 75%; height: 60%; }
/* Geniş kartlarda (cell-2, cell-4) resim daha sağa kaymış */
.frues-catshow-cell-2 .frues-catshow-img, .frues-catshow-cell-4 .frues-catshow-img { right: 6%; max-width: 50%; height: 78%; }

@media (max-width: 991px) {
    .frues-catshow-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 240px 240px 240px; }
    .frues-catshow-cell-1 { grid-column: 1; grid-row: 1; }
    .frues-catshow-cell-2 { grid-column: 1 / span 2; grid-row: 2; }
    .frues-catshow-cell-3 { grid-column: 2; grid-row: 1; }
    .frues-catshow-cell-4 { grid-column: 1; grid-row: 3; }
    .frues-catshow-cell-5 { grid-column: 2; grid-row: 3; }
    .frues-catshow-title { font-size: 1.15rem; }
    .frues-catshow-text { top: 22px; left: 20px; max-width: 68%; }
    .frues-catshow-card { padding: 22px 20px; }
    .frues-catshow-initial { font-size: 7rem; }
}

@media (max-width: 480px) {
    .frues-catshow-grid { grid-template-columns: 1fr; grid-template-rows: repeat(5, 200px); gap: 12px; }
    .frues-catshow-cell-1, .frues-catshow-cell-2, .frues-catshow-cell-3,
    .frues-catshow-cell-4, .frues-catshow-cell-5 { grid-column: 1; }
    .frues-catshow-cell-1 { grid-row: 1; }
    .frues-catshow-cell-2 { grid-row: 2; }
    .frues-catshow-cell-3 { grid-row: 3; }
    .frues-catshow-cell-4 { grid-row: 4; }
    .frues-catshow-cell-5 { grid-row: 5; }
    .frues-catshow-cell-1 .frues-catshow-img, .frues-catshow-cell-2 .frues-catshow-img,
    .frues-catshow-cell-3 .frues-catshow-img, .frues-catshow-cell-4 .frues-catshow-img,
    .frues-catshow-cell-5 .frues-catshow-img { right: 5%; max-width: 46%; height: 76%; }
}

/* ============================ TriColumn Products (Shopify demo birebir) ============================ */
.frues-tricol { padding: 56px 0 64px; background: var(--surface); }
.frues-tricol-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px; }
.frues-tricol-col { display: flex; flex-direction: column; }
.frues-tricol-title { font-size: 1rem; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; color: var(--text-primary); margin: 0; padding-bottom: 24px; border-bottom: 1px solid #e6e6e6; font-family: var(--font); -webkit-font-smoothing: antialiased; }
.frues-tricol-list { display: flex; flex-direction: column; }
.frues-tricol-row { display: flex; gap: 16px; align-items: center; text-decoration: none !important; color: var(--text-primary); padding: 18px 0; border-bottom: 1px solid #f1f1f1; cursor: pointer; }
.frues-tricol-row:last-child { border-bottom: none; }
.frues-tricol-thumb { width: 140px !important; height: 140px !important; flex-shrink: 0; background: transparent; display: flex; align-items: center; justify-content: center; border-radius: 0; overflow: hidden; }
.frues-tricol-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform .4s ease; transform-origin: center; }
.frues-tricol-row:hover .frues-tricol-thumb img { transform: scale(1.15); }
.frues-tricol-thumb img.bad { display: none; }
.frues-tricol-body { flex: 1; min-width: 0; }
.frues-tricol-name { font-size: 1.15rem; font-weight: 700; color: var(--text-primary); margin-bottom: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--font); transition: color .2s ease; -webkit-font-smoothing: antialiased; }
.frues-tricol-row:hover .frues-tricol-name { color: var(--primary); }
.frues-tricol-price-row { display: flex; gap: 8px; align-items: baseline; }
.frues-tricol-price { font-size: 1.05rem; font-weight: 500; color: var(--text-primary); font-family: var(--font); }
.frues-tricol-old-price { font-size: .76rem; font-weight: 400; color: #c0c0c0; text-decoration: line-through; font-family: var(--font); }

@media (max-width: 991px) {
    .frues-tricol-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ============================ Newsletter — GET UPDATE avocado bar (Shopify demo birebir) ============================ */
.frues-newsletter { background: #9eb87a !important; color: #fff; padding: 70px 0; margin-top: 48px; }
.frues-newsletter-inner { display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; align-items: center; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.frues-newsletter-text { text-align: center; padding-right: 0; }
.frues-newsletter h2, .frues-newsletter .frues-newsletter-title, .frues-site .frues-newsletter h2, .frues-site main .frues-newsletter h2, .frues-site main h2.frues-newsletter-title { color: #fff !important; }
.frues-newsletter-title { font-size: 2rem; font-weight: 700; margin: 0 0 10px; letter-spacing: 2px; text-transform: uppercase; font-family: var(--font); -webkit-font-smoothing: antialiased; }
.frues-newsletter-sub { font-size: .88rem; color: rgba(255,255,255,0.95); margin: 0; font-weight: 400; -webkit-font-smoothing: antialiased; }

.frues-newsletter-form { display: flex; gap: 16px; align-items: stretch; max-width: 560px; }
.frues-newsletter-input { flex: 1; padding: 0 24px; height: 50px; background: transparent; border: 1px solid rgba(255,255,255,0.7); border-radius: 4px; color: #fff; font-size: .88rem; outline: none; font-family: inherit; transition: border-color .2s; }
.frues-newsletter-input::placeholder { color: rgba(255,255,255,0.75); }
.frues-newsletter-input:focus { border-color: #fff; }
.frues-newsletter-btn { padding: 0 26px; height: 50px; background: var(--surface); color: var(--text-primary); border: none; border-radius: 4px; font-size: .72rem; font-weight: 800; letter-spacing: 1.5px; cursor: pointer; transition: background .2s, transform .2s; white-space: nowrap; flex-shrink: 0; font-family: inherit; }
.frues-newsletter-btn:hover { background: #f1f1f1; transform: translateY(-1px); }

@media (max-width: 991px) {
    .frues-newsletter-inner { grid-template-columns: 1fr; gap: 32px; }
    .frues-newsletter-form { flex-direction: column; max-width: 100%; }
    .frues-newsletter-btn { padding: 0; }
}

/* ============================ Footer — 5 sütun + alt bar ============================ */
.frues-footer { background: var(--surface); color: var(--text-primary); padding: 64px 0 0; border-top: 1px solid #eee; }
.frues-footer-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1.3fr 1.2fr; gap: 36px; margin-bottom: 48px; }
.frues-footer-col h4 { font-size: 1.05rem; font-weight: 800; margin: 0 0 18px; padding-bottom: 12px; color: var(--text-primary); font-family: var(--font); letter-spacing: 0.3px; border-bottom: 1px solid #e6e6e6; -webkit-font-smoothing: antialiased; }
.frues-footer-col ul { list-style: none; padding: 0; margin: 0; }
.frues-footer-col ul li { margin-bottom: 11px; }
.frues-footer-col ul li a, .frues-footer-col p { font-size: .88rem; color: #666; text-decoration: none; transition: color .2s; line-height: 1.5; }
.frues-footer-col ul li a:hover { color: var(--primary); }
.frues-footer-col p { margin: 0 0 14px; }
.frues-footer-contact { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: #666; margin-bottom: 11px; }
.frues-footer-contact svg { flex-shrink: 0; width: 14px; height: 14px; }
.frues-footer-social { display: flex; gap: 8px; margin-top: 16px; }
.frues-footer-social a { width: 38px; height: 38px; border: 1px solid #ddd; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--text-primary); transition: background .2s, border-color .2s, color .2s; }
.frues-footer-social a:hover { background: var(--primary); border-color: var(--primary); color: #fff; }

.frues-footer-bottom { border-top: 1px solid #eee; padding: 22px 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.frues-footer-bottom-logo { display: flex; align-items: center; }
.frues-footer-bottom-logo img { height: 32px; }
.frues-footer-bottom-logo .frues-logo-text { font-size: 1.4rem; font-weight: 900; color: var(--primary); letter-spacing: -0.5px; }
.frues-footer-pay { display: flex; gap: 8px; align-items: center; }
.frues-footer-pay img, .frues-footer-pay svg { height: 28px; display: block; }
.frues-pay-icon { display: inline-flex; align-items: center; }
.frues-pay-icon svg { width: 44px; height: 28px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.frues-footer-news-text { font-size: .82rem; color: #6b7280; line-height: 1.55; margin: 0; }
.frues-footer-copy { font-size: .82rem; color: #888; }
.frues-footer-copy a { color: #888; text-decoration: none; }

@media (max-width: 991px) {
    .frues-footer-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
    .frues-footer-bottom { flex-direction: column; text-align: center; }
}

/* Variant 4 — Full-Bleed Dark */
.frues4-hero { position: relative; min-height: 640px; background: var(--btn-dark-bg); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.frues4-hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0.55) 100%); z-index: 1; }
.frues4-hero-content { position: relative; z-index: 2; text-align: center; max-width: 720px; padding: 60px 24px; }
.frues4-hero-title { font-size: 4.5rem; font-weight: 900; line-height: 1.05; letter-spacing: -1px; color: #fff !important; margin: 0 0 22px; text-transform: uppercase; text-shadow: 0 2px 16px rgba(0,0,0,0.65); font-family: var(--font); }
.frues4-hero-sub { font-size: 1.1rem; color: rgba(255,255,255,0.92); line-height: 1.6; margin: 0 0 32px; text-shadow: 0 1px 4px rgba(0,0,0,0.4); }
.frues4-hero-cta { display: inline-block; padding: 16px 40px; background: transparent; color: #fff !important; font-size: 0.85rem; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; border: 2px solid #fff; transition: background 0.25s, color 0.25s; }
.frues4-hero-cta:hover { background: var(--surface); color: var(--text-primary) !important; }
.frues4-dots { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 3; }
.frues4-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.4); border: none; cursor: pointer; padding: 0; transition: background 0.3s, transform 0.3s; }
.frues4-dot.active { background: var(--surface); transform: scale(1.2); }

/* Variant 5 — Grid Mosaic (6 kategori asymmetric grid) */
.frues5-hero { padding: 40px 0 60px; background: var(--surface); }
.frues5-grid { display: grid; grid-template-columns: 1fr 2fr 1fr; grid-auto-rows: 280px; gap: 16px; }
.frues5-span-2 { grid-row: span 2; }
.frues5-cell { position: relative; padding: 28px 32px; border-radius: 14px; overflow: hidden; text-decoration: none !important; color: var(--heading-color); display: flex; flex-direction: column; justify-content: flex-start; transition: transform 0.3s ease; }
.frues5-cell:hover { transform: translateY(-4px); }
.frues5-bg-1 { background: #d8eaf2; }
.frues5-bg-2 { background: #e0d2ef; }
.frues5-bg-3 { background: #fbe1e1; }
.frues5-bg-4 { background: #f9c7b4; }
.frues5-bg-5 { background: #ffe7c7; }
.frues5-bg-6 { background: #d8ead0; }
.frues5-cell-text { position: relative; z-index: 2; }
.frues5-cell-title { font-size: 1.55rem; font-weight: 900; margin: 0 0 12px; line-height: 1.1; color: var(--heading-color); letter-spacing: -0.5px; font-family: var(--font); }
.frues5-cell-cta { display: inline-block; font-size: 0.72rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--heading-color); padding-bottom: 3px; border-bottom: 2px solid var(--heading-color); transform: rotateX(0deg); transform-origin: center; transition: transform 0.4s cubic-bezier(.4,0,.2,1), color 0.25s; perspective: 600px; }
.frues5-cell:hover .frues5-cell-cta { transform: rotateX(360deg); color: var(--primary); border-bottom-color: var(--primary); }
.frues5-cell-img { position: absolute; right: -10%; bottom: 0; height: 75%; width: auto; object-fit: contain; transition: transform 0.4s ease; z-index: 1; pointer-events: none; }
.frues5-cell:hover .frues5-cell-img { transform: scale(1.06); }
.frues5-span-2 .frues5-cell-title { font-size: 2.2rem; }
.frues5-span-2 .frues5-cell-img { height: 65%; right: -5%; }

/* Shared placeholder (variant fallback için) */
.frues-hero-placeholder { width: 100%; max-width: 560px; aspect-ratio: 5 / 4; border-radius: 18px; overflow: hidden; box-shadow: 0 16px 40px rgba(0,0,0,0.08); }
.frues-hero-placeholder svg { display: block; width: 100%; height: 100%; }

/* Responsive */
@media (max-width: 991px) {
    .frues1-hero-grid, .frues2-hero-grid { grid-template-columns: 1fr; gap: 28px; min-height: auto; }
    .frues1-hero-title { font-size: 2.4rem; letter-spacing: -1px; }
    .frues2-hero-title { font-size: 2.2rem; }
    .frues3-hero-grid { grid-template-columns: 1fr; }
    .frues3-card { height: 380px; padding: 36px 28px; }
    .frues4-hero { min-height: 480px; }
    .frues4-hero-title { font-size: 2.6rem; }
    .frues5-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 220px; }
    .frues5-span-2 { grid-row: auto; }
    .frues5-cell-title, .frues5-span-2 .frues5-cell-title { font-size: 1.3rem; }
}
@media (max-width: 480px) {
    .frues5-grid { grid-template-columns: 1fr; }
}

/* ============ Promo Banner ============ */
.frues-promo { padding: 32px 0 32px; background: var(--surface); }
.frues-promo-card { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: center; padding: 36px 48px; background: var(--surface-2); border-radius: 0; min-height: 220px; position: relative; overflow: hidden; }
.frues-promo-shopify .frues-promo-card { background: #efe9de; box-shadow: none; }
.frues-promo-title { font-size: 2.1rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.5px; color: var(--text-primary); margin: 0 0 10px; font-family: var(--font); -webkit-font-smoothing: antialiased; }
.frues-promo-sub { font-size: .85rem; color: #6b7280; line-height: 1.5; margin: 0 0 20px; max-width: 360px; }
.frues-promo-cta { display: inline-block; padding: 12px 28px; background: var(--btn-dark-bg); color: var(--btn-dark-color) !important; font-size: 0.7rem; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; border-radius: 0; transition: background 0.18s ease; overflow: hidden; position: relative; }
/* SHOP NOW hover — yazı çizginin altına inip yerine döner (KEŞFET tarzı dip) */
.frues-promo-cta-text { display: inline-block; }
.frues-promo-cta:hover .frues-promo-cta-text { animation: promoCtaDip 0.4s ease; }
@keyframes promoCtaDip {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(18px); opacity: 0; }
    51%  { transform: translateY(-18px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}
.frues-promo-image { display: flex; align-items: center; justify-content: flex-end; }
.frues-promo-image img, .frues-promo-image svg { max-width: 100%; max-height: 220px; border-radius: 0; object-fit: contain; }
@media (max-width: 768px) {
    .frues-promo-card { grid-template-columns: 1fr; padding: 32px 28px; }
    .frues-promo-title { font-size: 1.8rem; }
}

/* ============ Features Bar (4-col trust badges) ============ */
.frues-features { padding: 50px 0; background: var(--secondary); border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); }
.frues-features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.frues-feature-item { display: flex; align-items: center; gap: 16px; }
.frues-feature-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--surface); display: flex; align-items: center; justify-content: center; color: var(--primary); font-size: 1.4rem; flex-shrink: 0; border: 1.5px solid var(--border-color); }
.frues-feature-body h4 { font-size: 1rem; font-weight: 800; color: var(--heading-color); margin: 0 0 4px; font-family: var(--font); }
.frues-feature-body p { font-size: 0.85rem; color: var(--text-secondary); margin: 0; line-height: 1.4; }
@media (max-width: 991px) { .frues-features-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; } }
@media (max-width: 480px) { .frues-features-grid { grid-template-columns: 1fr; } }

/* ============ Blog Preview ============ */
.frues-blog { padding: 60px 0 40px; background: var(--surface); }
.frues-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 36px; }
.frues-blog-card { background: var(--surface); border-radius: 14px; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,0.05); transition: transform 0.25s, box-shadow 0.25s; text-decoration: none !important; color: inherit; display: flex; flex-direction: column; }
.frues-blog-card:hover { transform: translateY(-6px); box-shadow: 0 18px 38px rgba(0,0,0,0.10); }
.frues-blog-card-img { width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: var(--secondary); }
.frues-blog-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.frues-blog-card:hover .frues-blog-card-img img { transform: scale(1.05); }
.frues-blog-card-placeholder { width: 100%; height: 100%; }
.frues-blog-card-placeholder svg { width: 100%; height: 100%; display: block; }
.frues-blog-card-body { padding: 20px 22px 22px; flex: 1; display: flex; flex-direction: column; }
.frues-blog-card-meta { font-size: 0.78rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.frues-blog-card-title { font-size: 1.15rem; font-weight: 800; color: var(--heading-color); line-height: 1.35; margin: 0 0 14px; font-family: var(--font); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.frues-blog-card-cta { font-size: 0.78rem; font-weight: 800; color: var(--primary); letter-spacing: 0.5px; text-transform: uppercase; margin-top: auto; transition: gap 0.25s; }
.frues-blog-card:hover .frues-blog-card-cta { color: var(--accent); }
@media (max-width: 991px) { .frues-blog-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .frues-blog-grid { grid-template-columns: 1fr; } }

/* Eski generic .frues-hero CSS (kullanılmıyor, eski referanslar için tutuluyor) */
.frues-hero { position: relative; background: var(--secondary); padding: 60px 0 80px; overflow: hidden; }
.frues-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; min-height: 480px; }
.frues-hero-text { padding-right: 20px; }
.frues-hero-eyebrow { font-size: 0.85rem; font-weight: 700; letter-spacing: 1px; color: var(--primary); margin-bottom: 18px; text-transform: uppercase; }
.frues-hero-title { font-size: 4rem; font-weight: 900; line-height: 1.05; letter-spacing: -2px; color: var(--heading-color); margin: 0 0 24px; font-family: var(--font); }
.frues-hero-sub { font-size: 1.05rem; color: var(--text-secondary); line-height: 1.6; margin: 0 0 32px; max-width: 480px; }
.frues-hero-cta { display: inline-block; padding: 14px 32px; background: var(--cta-bg); color: var(--cta-color) !important; font-size: 0.85rem; font-weight: 800; letter-spacing: 2px; border-radius: var(--cta-radius); transition: 0.25s; text-transform: uppercase; }
.frues-hero-cta:hover { background: var(--primary); transform: translateY(-2px); }
.frues-hero-image { display: flex; justify-content: center; align-items: center; }
.frues-hero-image img { max-width: 100%; max-height: 520px; object-fit: contain; border-radius: 8px; }
.frues-hero-placeholder { width: 100%; max-width: 560px; aspect-ratio: 5 / 4; border-radius: 18px; overflow: hidden; box-shadow: 0 16px 40px rgba(0,0,0,0.08); }
.frues-hero-placeholder svg { display: block; width: 100%; height: 100%; }
.frues-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 56px; height: 56px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border-color); cursor: pointer; color: var(--text-primary); font-size: 1rem; display: flex; align-items: center; justify-content: center; z-index: 10; transition: 0.2s; box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.frues-arrow:hover { background: var(--primary); color: #fff; border-color: transparent; }
.frues-arrow-prev { left: 30px; }
.frues-arrow-next { right: 30px; }
.frues-hero-dots { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 10; }
.frues-hero-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(0,0,0,0.18); cursor: pointer; transition: 0.2s; }
.frues-hero-dot.active { width: 28px; border-radius: 4px; background: var(--primary); }

/* 1199px, 1200px DEĞİL. Mobil header'ı açan blok (yukarıda) max-width:1199px
   kullanıyor; burası 1200px olduğu için tam 1200px genişlikte masaüstü header'ı
   gizleniyor ama mobil header açılmıyordu — o tek genişlikte sayfada hiç header
   olmuyordu. İki eşik hizalandı. */
@media (max-width: 1199px) { .frues-header { display: none; } }
@media (max-width: 991px) {
    .frues-hero-grid { grid-template-columns: 1fr; gap: 28px; min-height: auto; }
    .frues-hero-title { font-size: 2.4rem; letter-spacing: -1px; }
    .frues-hero { padding: 40px 0 56px; }
    .frues-arrow { width: 40px; height: 40px; }
    .frues-arrow-prev { left: 10px; }
    .frues-arrow-next { right: 10px; }
}

/* Product card (Shopify Frues paritesi) — Sale ribbon + hover actions + grid/carousel */
.frues-products-head--centered { text-align: center; margin-bottom: 56px; }
.frues-products-title-rule { width: 56px; height: 1px; background: #d6d6cf; margin: 14px auto 14px; border-radius: 0; }
.frues-products-subtitle { font-size: 0.88rem; color: var(--text-secondary); margin: 0; font-weight: 400; }
.frues-products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px; }
.frues-products-carousel { display: flex; gap: 24px; }
.frues-products-carousel.owl-carousel { display: block; }

.frues-product-card { position: relative; background: transparent; border-radius: 0; display: flex; flex-direction: column; overflow: visible; }
/* Hover'da kart hareket etmez — sadece resim ölçeklenir */

/* Sale ribbon — sol üst kırmızı kurdele (Shopify Frues stil) */
/* Demo birebir: kırmızı eğik banner-strip sağ-üst köşede, parent .frues-card-img-frame overflow:hidden ile kırpılır */
.frues-card-sale-ribbon {
    position: absolute; top: 16px; right: -34px;
    width: 120px; height: 22px;
    /* Tek kırmızı ailesi, token'dan türetiliyor: koyu modda ve 35 marka varyantında tutarlı. */
    background: linear-gradient(180deg, var(--ribbon-c) 0%, color-mix(in srgb, var(--ribbon-c) 78%, #000) 100%);
    color: #fff;
    transform: rotate(45deg);
    display: flex; align-items: center; justify-content: center;
    z-index: 5; pointer-events: none;
    box-shadow: 0 1px 4px rgba(0,0,0,.18);
}
/* Kumaş hissi veren ince üst ışık — şerit düz bir dikdörtgen gibi durmasın. */
.frues-card-sale-ribbon::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.22), transparent 55%);
    pointer-events: none;
}
/* Şerit 120px sabit ve kırpılıyor; "СКИДКА"/"ANGEBOT" gibi uzun karşılıklar taşmasın diye
   punto ve harf aralığı kelime uzunluğuna göre esniyor. */
/* Rozet türü rengi belirler; --ribbon-* panelden gelir, yoksa tema token'ına düşer.
   Gradyan/eğim/gölge aynı kalıyor, yalnız renk kaynağı değişti. */
.frues-card-sale-ribbon { --ribbon-c: var(--danger); }
.frues-card-sale-ribbon.is-discount { --ribbon-c: var(--ribbon-discount, var(--danger)); }
.frues-card-sale-ribbon.is-sale     { --ribbon-c: var(--ribbon-sale, var(--success)); }
.frues-card-sale-ribbon.is-request  { --ribbon-c: var(--ribbon-request, #4b5563); }

/* İndirim rozeti kapatıldığında kartın dışındaki iki yer de kapansın; yalnız kartta
   işleseydi "kapattım ama ürün detayında hâlâ çıkıyor" durumu olurdu. */
body[data-ribbon-discount="off"] .frues-card-sale-ribbon.is-discount,
body[data-ribbon-discount="off"] .frues-pd-sale-ribbon,
body[data-ribbon-discount="off"] .frues-pd-save-badge,
body[data-ribbon-discount="off"] .frues-quickview-save-badge { display: none !important; }

.frues-card-sale-ribbon span { font-size: clamp(0.5rem, 0.58rem, 0.62rem); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; white-space: nowrap; max-width: 108px; overflow: hidden; text-overflow: clip; }

/* Kartlar sırayla, aşağıdan yukarı belirir — ızgara tek blok hâlinde "yapışmasın".
   Gecikme --i ile sınırlı tutuluyor: geç sıradaki kartlar dakikalarca beklemesin. */
@keyframes fruesCardIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}
.frues-pgrid > .frues-product-card {
    animation: fruesCardIn .5s cubic-bezier(.2,.6,.2,1) both;
    animation-delay: calc(min(var(--i, 0), 11) * 45ms);
}
@media (prefers-reduced-motion: reduce) {
    .frues-pgrid > .frues-product-card { animation: none; }
    .frues-card-img-frame img, .frues-card-img-alt { transition: none; }
}

/* Kırpma çerçevede DEĞİL linkte: görsel yakınlaşması ve indirim şeridi yine kırpılıyor,
   ama hover aksiyonlarının ipuçları kartın dışına taşabiliyor. Önceden çerçeve
   overflow:hidden olduğu için dar kartlarda (5-6 sütun) ipucunun solu kesiliyordu. */
/* min-height: 0 ŞART. Kart bir flex kolonu, çerçeve de onun öğesi; flex öğesinin
   varsayılan min-height:auto'su içeriğin doğal boyunu taban yapıyor ve aspect-ratio'yu
   eziyor. Görselin height:100%'ü çerçevenin oranından türeyen bir yükseklikle döngüye
   girdiği için tarayıcı görselin kendi oranına düşüyordu: 251px'lik kolonda 608x1080
   bir fotoğraf çerçeveyi 420px'e çıkarıyor, kart 482px oluyor ve ürünün altında beyaz
   bir bant kalıyordu. Bu, .frues-category'de min-width:0 ile çözdüğümüz tuzağın dikey
   kardeşi — kaldırma. */
.frues-card-img-frame { position: relative; width: 100%; aspect-ratio: 1 / 1; min-height: 0; border-radius: 0; background: var(--surface); }
.frues-card-img-link { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; }
/* padding 8px: kaynak dosyaların kendi beyaz kenarı zaten geniş, üstüne 16px binince
   ürün kare çerçevede küçücük kalıyordu. */
.frues-card-img-frame img { width: 100%; height: 100%; object-fit: contain; padding: 8px; transition: transform 0.55s cubic-bezier(.2,.6,.2,1), opacity .45s ease; }

/* Galeride ikinci görsel varsa kart üzerine gelince yumuşakça ona geçilir.
   Yoksa markup'a hiç basılmıyor, dolayısıyla ek istek de olmuyor. */
.frues-card-img-alt { position: absolute; inset: 0; opacity: 0; }
body[data-card-hover="swap"] .frues-product-card:hover .frues-card-img-alt,
body[data-card-hover="both"] .frues-product-card:hover .frues-card-img-alt { opacity: 1; }
/* .has-alt ŞART: kural eskiden her kartta geçerliydi ve ikinci görseli olmayan üründe
   birinci görsel de saydamlaşıp kart hover'da bembeyaz kalıyordu. Galeri boşken
   (ProductImages'ta satır yokken) bu tüm vitrini etkiliyordu. */
body[data-card-hover="swap"] .frues-product-card.has-alt:hover .frues-card-img-link > img:not(.frues-card-img-alt),
body[data-card-hover="both"] .frues-product-card.has-alt:hover .frues-card-img-link > img:not(.frues-card-img-alt) { opacity: 0; }
/* Kart hover efekti yönetim panelinden seçiliyor (Ayarlar → Tema).
   body[data-card-hover] = zoom | swap | both | none. Ayar yoksa "both". */
body[data-card-hover="zoom"] .frues-product-card:hover .frues-card-img-frame img,
body[data-card-hover="both"] .frues-product-card:hover .frues-card-img-frame img { transform: scale(1.06); }

/* Hover actions overlay (siyah daire iconlar) — Discover bar üstünde dururlar */
/* Sol-üst favori kalp — hover'da görünür, demo birebir */
.frues-card-fav-left { position: absolute; top: 14px; left: 14px; width: 36px; height: 36px; border-radius: 50%; background: var(--surface); color: var(--text-primary); border: none; cursor: pointer; display: flex !important; align-items: center; justify-content: center; opacity: 1 !important; pointer-events: auto !important; transition: opacity 0.25s ease, background 0.2s ease, color 0.2s ease, transform 0.2s ease; z-index: 10; box-shadow: 0 4px 14px rgba(0,0,0,.12); }
.frues-product-card:hover .frues-card-fav-left,
.frues-card-img-frame:hover .frues-card-fav-left,
.frues-product-card:focus-within .frues-card-fav-left { opacity: 1 !important; pointer-events: auto !important; }
.frues-card-fav-left:hover { background: var(--danger); color: #fff; transform: scale(1.08); }
.frues-card-fav-left.active { background: var(--danger); color: #fff; }
.frues-card-fav-left.active svg { fill: currentColor; }
.frues-card-fav-left[data-tip]:hover::before { content: attr(data-tip); position: absolute; top: 50%; left: calc(100% + 8px); transform: translateY(-50%); background: var(--btn-dark-bg); color: var(--btn-dark-color); font-size: .68rem; font-weight: 600; padding: 5px 10px; border-radius: 3px; white-space: nowrap; pointer-events: none; z-index: 100; }

/* İkonlar görselin ALTINA yakın duruyor (referans temadaki gibi); önceden bottom:28%/38%
   ile ortaya yakın çıkıp ürünün gövdesini kapatıyordu. Yüzde yerine piksel: kart boyutu
   değişince şeritle çakışma öngörülemez oluyordu. */
.frues-card-hover-actions { position: absolute; left: 50%; bottom: 10px; transform: translate(-50%, 0); display: flex; gap: 8px; opacity: 0; pointer-events: none; transition: opacity 0.25s ease, bottom 0.3s cubic-bezier(.4,0,.2,1); z-index: 10; }
.frues-product-card:hover .frues-card-hover-actions { opacity: 1; pointer-events: auto; bottom: 18px; }
/* "ŞİMDİ KEŞFET" katmanı çerçevenin alt 64px'ini kaplıyor ve o da hover'da beliriyor;
   ikonlar onun üstüne alınmazsa yazının üzerine biniyorlar. */
.frues-product-card.has-discover .frues-card-hover-actions { bottom: 68px; }
.frues-product-card.has-discover:hover .frues-card-hover-actions { bottom: 76px; }
.frues-card-action { width: 38px; height: 38px; border-radius: 50%; background: var(--surface); color: var(--text-primary); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; position: relative; z-index: 11; box-shadow: 0 4px 14px rgba(0,0,0,.12); }
.frues-card-action:hover { background: var(--btn-dark-bg); color: var(--btn-dark-color); transform: translateY(-2px); }

/* Ürün kart hover butonu tooltip — siyah küçük tag ÜSTTE */
.frues-card-action[data-tip]:hover::before { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--btn-dark-bg); color: var(--btn-dark-color); font-size: .68rem; font-weight: 600; padding: 5px 10px; border-radius: 3px; white-space: nowrap; pointer-events: none; z-index: 100; letter-spacing: .2px; }
.frues-card-action[data-tip]:hover::after { content: ''; position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%); border: 4px solid transparent; border-top-color: var(--text-primary); z-index: 100; pointer-events: none; }
.frues-card-fav.is-fav { background: #e02d3c; }
.frues-card-fav.is-fav i { color: #fff; animation: fruesHeartPop 0.32s cubic-bezier(.4,1.6,.6,1); }
@keyframes fruesHeartPop { 0% { transform: scale(1); } 35% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* Frues custom tooltip — data-tip attribute'una sahip elemanlar için */
[data-tip] { position: relative; }
/* Boş ipucu hiç çizilmesin: Razor, değeri null olan öznitelikleri bazı bağlamlarda
   atmak yerine data-tip="" olarak basıyor ve seçici onu da yakalıyordu — yazısı
   görünen butonun altında boş bir balon beliriyordu. */
[data-tip=""]::before, [data-tip=""]::after { content: none; display: none; }
[data-tip]::before, [data-tip]::after { position: absolute; opacity: 0; pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease; z-index: 1500; }
[data-tip]::before { content: attr(data-tip); bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(4px); background: var(--btn-dark-bg); color: var(--btn-dark-color); padding: 6px 12px; border-radius: 8px; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.3px; white-space: nowrap; box-shadow: 0 6px 16px rgba(0,0,0,0.2); font-family: var(--font); text-transform: none; }
[data-tip]::after { content: ""; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%) translateY(4px); border: 5px solid transparent; border-top-color: var(--text-primary); width: 0; height: 0; }
[data-tip]:hover::before, [data-tip]:hover::after, [data-tip]:focus-visible::before, [data-tip]:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }
[data-tip].tip-below::before { bottom: auto; top: calc(100% + 10px); }
[data-tip].tip-below::after { bottom: auto; top: calc(100% + 4px); border-top-color: transparent; border-bottom-color: var(--text-primary); }

/* Header içindeki tooltipler altta açılır (üstte ekran dışına taşmasın) */
.frues-header [data-tip]::before { bottom: auto !important; top: calc(100% + 12px) !important; transform: translateX(-50%) translateY(-4px) !important; }
.frues-header [data-tip]::after { content: "" !important; bottom: auto !important; top: calc(100% - 2px) !important; left: 50% !important; border: 6px solid transparent !important; border-top-color: transparent !important; border-bottom-color: var(--text-primary) !important; width: 0 !important; height: 0 !important; transform: translateX(-50%) translateY(-4px) !important; opacity: 0; position: absolute; }
.frues-header [data-tip]:hover::before, .frues-header [data-tip]:hover::after { transform: translateX(-50%) translateY(0) !important; opacity: 1 !important; }

/* ============================ TOOLTIP ŞABLONLARI ============================ */
/* body[data-tooltip-style="..."] ile değiştirilir. Admin Ayarlar'dan seçilir. */

/* 1) classic (varsayılan) — koyu kutu, üstte ok (zaten yukarıda tanımlı, ek yok) */

/* 2) shopify — siyah dikdörtgen, ALTTA, ok yok (Shopify Frues home-3) */
body[data-tooltip-style="shopify"] [data-tip]::before {
    bottom: auto !important; top: calc(100% + 8px) !important;
    background: var(--btn-dark-bg) !important; color: var(--btn-dark-color) !important;
    padding: 6px 11px !important; border-radius: 4px !important;
    font-size: 0.75rem !important; font-weight: 500 !important;
    letter-spacing: 0 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12) !important;
    transform: translateX(-50%) translateY(-4px) !important;
}
/* Shopify şablonunda küçük üst üçgen ok — HEADER'A ÖZEL DEĞİL, her yerde.
   Önceden yalnız header'da vardı, ürün kartlarında yoktu; aynı sitede iki farklı
   ipucu görünüyordu. Ok rengi baloncuğun arka planından alınıyor ki koyu modda
   da ayrışmasın (eskiden --text-primary idi). */
body[data-tooltip-style="shopify"] [data-tip]::after {
    display: block !important;
    content: "" !important;
    position: absolute !important;
    bottom: auto !important;
    top: calc(100% - 2px) !important;
    left: 50% !important;
    border: 6px solid transparent !important;
    border-top-color: transparent !important;
    border-bottom-color: var(--btn-dark-bg) !important;
    width: 0 !important; height: 0 !important;
    transform: translateX(-50%) translateY(-4px) !important;
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.18s ease;
}
body[data-tooltip-style="shopify"] [data-tip]:hover::after,
body[data-tooltip-style="shopify"] [data-tip]:focus-visible::after { opacity: 1 !important; transform: translateX(-50%) translateY(0) !important; }
body[data-tooltip-style="shopify"] [data-tip]:hover::before { transform: translateX(-50%) translateY(0) !important; }

/* 3) glass — yarı saydam buzlu, beyaz text, ALTTA */
body[data-tooltip-style="glass"] [data-tip]::before {
    bottom: auto !important; top: calc(100% + 10px) !important;
    background: rgba(15, 23, 42, 0.78) !important;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    color: #fff !important; border-radius: 999px !important;
    padding: 7px 14px !important; font-weight: 600 !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18) !important;
    transform: translateX(-50%) translateY(-4px) !important;
}
body[data-tooltip-style="glass"] [data-tip]::after { display: none !important; }
body[data-tooltip-style="glass"] [data-tip]:hover::before { transform: translateX(-50%) translateY(0) !important; }

/* 4) gradient — accent renkli pill, çift renk geçiş, glow */
body[data-tooltip-style="gradient"] [data-tip]::before {
    bottom: auto !important; top: calc(100% + 10px) !important;
    background: linear-gradient(135deg, var(--primary) 0%, var(--heading-color) 100%) !important;
    color: #fff !important; border-radius: 999px !important;
    padding: 7px 14px !important; font-weight: 700 !important;
    font-size: 0.72rem !important; letter-spacing: 0.5px !important;
    box-shadow: 0 6px 20px color-mix(in srgb, var(--primary) 35%, transparent), 0 0 0 1px rgba(255,255,255,0.18) inset !important;
    transform: translateX(-50%) translateY(-4px) !important;
}
body[data-tooltip-style="gradient"] [data-tip]::after { display: none !important; }
body[data-tooltip-style="gradient"] [data-tip]:hover::before { transform: translateX(-50%) translateY(0) !important; }

/* 5) outline — beyaz arka plan + koyu border, minimal */
body[data-tooltip-style="outline"] [data-tip]::before {
    bottom: auto !important; top: calc(100% + 10px) !important;
    background: var(--surface) !important; color: var(--text-primary) !important;
    border: 1.5px solid #1a1a1a !important;
    border-radius: 6px !important;
    padding: 6px 12px !important; font-weight: 700 !important;
    font-size: 0.73rem !important;
    box-shadow: 3px 3px 0 #1a1a1a !important;
    transform: translateX(-50%) translateY(-4px) !important;
}
body[data-tooltip-style="outline"] [data-tip]::after { display: none !important; }
body[data-tooltip-style="outline"] [data-tip]:hover::before { transform: translateX(-50%) translateY(0) !important; }

/* ========================== TOOLTIP ŞABLONLARI SONU ========================== */

/* DISCOVER NOW alt-yarı slide-up + 180° rotateX flip (Shopify Frues paritesi) */
.frues-card-discover { display: none !important; }

/* "ŞİMDİ KEŞFET" katmanı: .frues-card-discover-overlay'in CSS'i hiç yoktu, bu yüzden
   normal akışta bir bağlantı gibi çiziliyordu. Çerçeve overflow:hidden olduğu sürece
   görünmüyordu; kırpma linke taşınınca kart adının üstüne bindi. Artık görsel alanının
   alt şeridine mutlak konumlu ve hover'a kadar gizli. */
.frues-card-discover-overlay {
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 64px;
    display: flex; align-items: flex-end; justify-content: center;
    padding-bottom: 14px;
    text-decoration: none;
    perspective: 400px;
    z-index: 6;
}
.frues-product-card:hover .frues-card-discover { transform: translateY(0); }
.frues-card-discover-text { opacity: 0; display: inline-block; font-size: 0.78rem; font-weight: 800; letter-spacing: 2px; color: var(--text-primary); text-transform: uppercase; transform: rotateX(180deg); transform-origin: center bottom; transition: transform 0.4s ease 0.12s, opacity 0.25s ease; position: relative; padding-bottom: 6px; }
.frues-card-discover-text::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--text-primary); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease 0.3s; }
.frues-product-card:hover .frues-card-discover-text { opacity: 1; transform: rotateX(0deg); }
.frues-product-card:hover .frues-card-discover-text::after { transform: scaleX(1); }

.frues-card-info { padding: 16px 8px 8px; text-align: center; }
/* Anasayfa/bileşen kartı. Listeleme sayfasıyla aynı ölçeği kullanır; iki yerde
   aynı ürün iki farklı boyda görünmesin diye. Fiyat rengi sabit zeytin yeşili
   (#7d9344) idi — temaya bağlı değildi ve koyu modda okunmuyordu. */
.frues-card-name-link { display: -webkit-box; font-size: var(--fs-body); font-weight: 600; color: var(--text-primary); text-decoration: none; line-height: 1.45; margin-bottom: var(--sp-1); min-height: 2.6em; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-align: center; font-family: var(--font); letter-spacing: 0; -webkit-font-smoothing: antialiased; transition: color .15s ease; }
.frues-card-name-link:hover { color: var(--primary); }
.frues-card-price-row { display: flex; align-items: baseline; justify-content: center; gap: 6px; }
.frues-card-price { font-size: 1rem; font-weight: 700; color: var(--price); font-family: var(--font); letter-spacing: 0; -webkit-font-smoothing: antialiased; }
.frues-card-old-price { font-size: var(--fs-meta); font-weight: 400; color: var(--text-muted); text-decoration: line-through; font-family: var(--font); -webkit-font-smoothing: antialiased; }

@media (max-width: 991px) {
    .frues-products-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (max-width: 480px) {
    .frues-products-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
    .frues-card-action { width: 38px; height: 38px; }
}

/* ============ Quickview modal ============ */
.frues-quickview-modal { position: fixed; inset: 0; z-index: 2100; display: none; align-items: center; justify-content: center; padding: 24px; }
.frues-quickview-modal.open { display: flex; }
.frues-quickview-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.6); cursor: pointer; }
.frues-quickview-panel { position: relative; background: var(--surface); border-radius: 14px; max-width: 920px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: 0 30px 80px rgba(0,0,0,0.3); display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.frues-quickview-close { position: absolute; top: 18px; right: 18px; width: 36px; height: 36px; border-radius: 50%; background: transparent; border: none; color: var(--text-secondary); font-size: 1.1rem; cursor: pointer; z-index: 2; transition: background 0.18s, color 0.18s; }
.frues-quickview-close:hover { background: rgba(0,0,0,0.06); color: var(--text-primary); }
.frues-quickview-img { background: var(--secondary); display: flex; align-items: center; justify-content: center; padding: 32px; border-radius: 14px 0 0 14px; }
.frues-quickview-img img { max-width: 100%; max-height: 380px; object-fit: contain; }
.frues-quickview-body { padding: 36px 32px 32px; }
.frues-quickview-title { font-size: 1.6rem; font-weight: 800; color: var(--heading-color); margin: 0 0 8px; font-family: var(--font); }
.frues-quickview-rating-row { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; }
.frues-quickview-stars { color: #f5a623; font-size: 0.95rem; letter-spacing: 1px; display: inline-flex; gap: 2px; }
.frues-quickview-rating-text { font-size: 0.82rem; color: var(--text-secondary); }
.frues-quickview-price-row { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--border-color); }
.frues-quickview-price { font-size: 1.6rem; font-weight: 900; color: var(--primary); }
.frues-quickview-old-price { font-size: 1.1rem; color: var(--text-secondary); text-decoration: line-through; }
.frues-quickview-save-badge { background: linear-gradient(135deg, color-mix(in srgb, var(--danger) 88%, #fff), var(--danger)); color: #fff; font-size: 0.74rem; font-weight: 800; padding: 4px 10px; border-radius: 6px; letter-spacing: 0.5px; }
.frues-quickview-desc { font-size: 0.95rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 24px; max-height: 8em; overflow: hidden; }
.frues-quickview-qty-row { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.frues-quickview-qty { display: inline-flex; align-items: center; border: 1.5px solid var(--border-color); border-radius: 999px; padding: 2px 6px; }
.frues-quickview-qty button { width: 32px; height: 32px; border: none; background: transparent; cursor: pointer; font-size: 1.1rem; font-weight: 700; color: var(--text-primary); border-radius: 50%; }
.frues-quickview-qty button:hover { background: rgba(0,0,0,0.06); }
.frues-quickview-qty span { padding: 0 14px; font-size: 0.95rem; font-weight: 700; min-width: 30px; text-align: center; }
/* Quickview popup butonları — ürün detay sayfasıyla aynı stil: outline beyaz SEPETE EKLE + dolu siyah HEMEN AL / DETAY, 12px köşe */
.frues-quickview-add { flex: 1; padding: 14px 26px; background: var(--surface); color: var(--text-primary) !important; border: 2px solid #1a1a1a; border-radius: 12px; font-size: 0.82rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; transition: background 0.18s, color 0.18s, transform 0.18s; }
.frues-quickview-add:hover { background: var(--btn-dark-bg); color: var(--btn-dark-color) !important; transform: translateY(-1px); }
.frues-quickview-buy { display: block; width: 100%; padding: 14px 26px; background: var(--btn-dark-bg); color: var(--btn-dark-color) !important; border: 2px solid #1a1a1a; border-radius: 12px; font-size: 0.82rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; transition: background 0.18s, color 0.18s, transform 0.18s; text-align: center; text-decoration: none; }
.frues-quickview-buy:hover { background: var(--surface); color: var(--text-primary) !important; transform: translateY(-1px); }

@media (max-width: 768px) {
    .frues-quickview-panel { grid-template-columns: 1fr; }
    .frues-quickview-img { border-radius: 14px 14px 0 0; padding: 24px; }
    .frues-quickview-img img { max-height: 240px; }
    .frues-quickview-body { padding: 24px; }
}

/* Featured products — Frues Sage Circles benzeri */
.frues-products { padding: 60px 0; background: var(--surface); }
.frues-products-head { text-align: center; margin-bottom: 48px; }
.frues-products-eyebrow { font-size: 0.78rem; font-weight: 800; letter-spacing: 2px; color: var(--primary); text-transform: uppercase; margin-bottom: 12px; }
.frues-products-title { font-size: 1.05rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--text-primary); margin: 0; font-family: var(--font); }
.frues-products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.frues-card { display: flex; flex-direction: column; text-align: center; transition: transform 0.25s; }
.frues-card:hover { transform: translateY(-4px); }
.frues-card-img-wrap { width: 100%; aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; background: var(--secondary); margin-bottom: 16px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-color); }
.frues-card-img-wrap img { width: 86%; height: 86%; object-fit: contain; }
.frues-card-cta { display: inline-block; padding: 10px 22px; background: var(--cta-bg); color: var(--cta-color) !important; font-size: 0.72rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; border-radius: var(--cta-radius); transition: background 0.2s, transform 0.2s; }
.frues-card-cta:hover { background: var(--primary); transform: translateY(-1px); }

.frues-empty-cta { text-align: center; padding: 56px 24px; background: var(--secondary); border-radius: 20px; max-width: 720px; margin: 0 auto; }
.frues-empty-icon { color: var(--primary); margin-bottom: 18px; display: inline-flex; }
.frues-empty-title { font-size: 1.6rem; font-weight: 800; color: var(--heading-color); margin: 0 0 10px; letter-spacing: -0.5px; }
.frues-empty-sub { font-size: 0.98rem; color: var(--text-secondary); margin: 0 0 24px; max-width: 420px; margin-left: auto; margin-right: auto; line-height: 1.55; }

@media (max-width: 991px) {
    .frues-products-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .frues-products-title { font-size: 1.8rem; }
    .frues-products { padding: 40px 0; }
}
@media (max-width: 480px) {
    .frues-products-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
    .pub-container { padding: 0 16px; }
}

/* Footer — Clean 4-Col, paylaşılan */
.frues-footer { background: var(--footer-bg); color: var(--text-primary); padding: 60px 0 24px; border-top: 1px solid var(--border-color); font-family: var(--font); }
.frues-footer-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1.3fr 1.2fr; gap: 36px; }
.frues-footer-brand { display: flex; flex-direction: column; gap: 10px; }
.frues-footer-logo { height: 46px; width: auto; }
.frues-footer-logo-text { font-size: 1.6rem; font-weight: 900; letter-spacing: -0.5px; color: var(--primary); font-family: var(--font); }
.frues-footer-tagline { font-size: 0.92rem; color: var(--text-secondary); line-height: 1.5; margin: 0 0 8px; max-width: 320px; }
.frues-footer-meta { font-size: 0.85rem; color: var(--text-secondary); margin: 2px 0; }
.frues-footer-col { display: flex; flex-direction: column; gap: 10px; }
.frues-footer-title { font-size: 0.78rem; font-weight: 800; letter-spacing: 2px; color: var(--text-primary); text-transform: uppercase; margin: 0 0 14px; }
.frues-footer-link { font-size: 0.9rem; color: var(--text-secondary); transition: color 0.18s; display: block; padding: 2px 0; }
.frues-footer-link:hover { color: var(--primary); }
.frues-footer-news-tagline { font-size: 0.88rem; color: var(--text-secondary); margin: 0 0 12px; line-height: 1.45; }
/* Eski footer-newsletter pill stilleri nötralize — Frues3 hero newsletter geçerli */
.frues-footer-social { display: flex; gap: 10px; margin-top: 18px; }
.frues-social { width: 36px; height: 36px; border-radius: 50%; background: var(--surface); color: var(--text-primary); display: flex; align-items: center; justify-content: center; transition: 0.2s; border: 1.5px solid var(--border-color); }
.frues-social:hover { background: var(--primary); color: #fff; border-color: transparent; transform: translateY(-2px); }
.frues-footer-divider { border: none; border-top: 1px solid var(--border-color); margin: 36px 0 18px; }
.frues-footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.frues-copy { font-size: 0.82rem; color: var(--text-secondary); opacity: 0.75; }
.frues-payment-band { display: flex; align-items: center; justify-content: flex-end; flex: 1; }
.frues-payment-band img { max-height: 36px; height: auto; width: auto; max-width: 100%; object-fit: contain; display: block; }
@media (max-width: 480px) {
    .frues-payment-band { justify-content: flex-start; margin-top: 12px; }
    .frues-payment-band img { max-height: 28px; }
}

@media (max-width: 991px) {
    .frues-footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
    .frues-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
    .frues-footer-grid { grid-template-columns: 1fr; }
    .frues-footer { padding: 40px 0 20px; }
    .frues-footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* Kategoriler sayfası — Frues kart grid */
.frues-cats-page { padding: 50px 0 80px; background: var(--surface); }
.frues-breadcrumb { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 30px; }
.frues-breadcrumb a { color: var(--text-secondary); text-decoration: none; transition: color 0.15s; }
.frues-breadcrumb a:hover { color: var(--primary); }
.frues-bc-sep { color: #ccc; }
.frues-bc-current { color: var(--text-primary); font-weight: 600; }
.frues-cats-head { text-align: center; margin-bottom: 50px; }
.frues-cats-eyebrow { display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 3px; color: var(--primary); text-transform: uppercase; margin-bottom: 14px; padding: 6px 18px; border: 1px solid var(--primary); border-radius: 999px; }
.frues-cats-title { font-size: 2.5rem; font-weight: 800; color: var(--text-primary); margin: 0 0 12px; letter-spacing: -0.5px; }
.frues-cats-sub { font-size: 1rem; color: var(--text-secondary); margin: 0; }
.frues-cats-empty { text-align: center; padding: 80px 20px; color: var(--text-secondary); }
.frues-cats-empty i { font-size: 3rem; color: #c5c8cf; margin-bottom: 14px; display: block; }
.frues-cats-empty p { margin: 0; font-size: 1.1rem; }
.frues-cats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 1200px) { .frues-cats-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .frues-cats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .frues-cats-grid { grid-template-columns: 1fr; } }
.frues-cat-card { display: flex; flex-direction: column; background: var(--surface); border-radius: 18px; overflow: hidden; text-decoration: none; color: var(--text-primary); box-shadow: 0 2px 8px rgba(0,0,0,0.04); border: 1px solid var(--border-color); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s; }
.frues-cat-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,0.10); border-color: transparent; }
.frues-cat-card-media { position: relative; height: 180px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--surface); }
.frues-cat-card-media img { width: 100%; height: 100%; object-fit: contain; padding: 12px; transition: transform 0.5s ease; }
.frues-cat-card:hover .frues-cat-card-media img { transform: scale(1.08); }
.frues-cat-card-initial { font-size: 4.5rem; font-weight: 800; color: rgba(255,255,255,0.92); text-shadow: 0 4px 12px rgba(0,0,0,0.15); letter-spacing: -2px; }
.frues-cat-card-count { position: absolute; top: 14px; right: 14px; background: rgba(255,255,255,0.92); color: var(--text-primary); font-size: 0.7rem; font-weight: 700; padding: 5px 11px; border-radius: 999px; letter-spacing: 0.3px; backdrop-filter: blur(6px); }
.frues-cat-card-body { padding: 20px 18px 22px; display: flex; flex-direction: column; gap: 10px; }
.frues-cat-card-name { font-size: 1.1rem; font-weight: 700; margin: 0; color: var(--text-primary); letter-spacing: -0.2px; }
.frues-cat-card-sub { list-style: none; padding: 0; margin: 0 0 4px; display: flex; flex-wrap: wrap; gap: 6px; }
.frues-cat-card-sub li { font-size: 0.72rem; padding: 4px 10px; background: var(--surface-2); color: var(--text-secondary); border-radius: 999px; }
.frues-cat-card-cta { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 700; color: var(--primary); letter-spacing: 0.5px; text-transform: uppercase; margin-top: auto; }
.frues-cat-card-cta i { transition: transform 0.2s; font-size: 0.78rem; }
.frues-cat-card:hover .frues-cat-card-cta i { transform: translateX(5px); }

/* ===== Frues Category — toggle inline filter sidebar ===== */
/* ── Ürün listeleme sayfası: tipografi ve boşluk ölçeği ───────────────────────
   Ölçeğin kendisi artık frues-tokens.css'te, :root üzerinde — anasayfa kartları da
   aynı ölçeği kullanıyor. Buradaki kurallar yalnızca listeleme sayfasına özgü
   yerleşimi tarif eder.

   Neden gerekiyordu: kart adı .8rem/500 ve fiyat .78rem/500 idi; ikisi de ekmek
   kırıntısından (.85rem) ve filtre listesinden (.88rem) küçüktü. Sayfanın asıl
   konusu olan ürün, tipografik olarak en sessiz öğeydi. Fiyat rengi de sabit bir
   zeytin yeşiliydi (#7d9344), temaya bağlı değildi ve koyu modda okunmuyordu. */

.frues-category .frues-breadcrumb { font-size: var(--fs-meta); margin-bottom: var(--sp-3); }
.frues-category .frues-category-title { font-size: var(--fs-hero); margin: var(--sp-3) 0 var(--sp-1); }
.frues-category .frues-category-count { font-size: var(--fs-lead); }

.frues-category .frues-filter-block-title { font-size: var(--fs-eyebrow); }
.frues-category .frues-filter-cat-row { font-size: var(--fs-body); }

/* Kart gövdesi. Bu kurallar bir dönem .frues-category altına yazılmıştı; kapsam dışına
   çıkan ilk çağıran (ürün detayındaki benzer ürünler kaydırması) adı yine tarayıcının
   stilsiz <h3>'ü olarak çizdi — 28px/500. Kural artık global: kartı nereye koyarsan koy
   aynı ölçek geçerli. Sınıfları yalnız _FruesProductCard.cshtml kullanıyor. */
.frues-card-body { padding: var(--sp-2) var(--sp-1) var(--sp-1); text-align: center; }
.frues-card-name {
    margin: 0 0 var(--sp-1);
    font-size: var(--fs-body);
    font-weight: 600;
    line-height: 1.45;
    min-height: 2.6em;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.frues-card-name a { color: var(--text-primary); text-decoration: none; transition: color .15s ease; }
.frues-card-name a:hover { color: var(--primary); }


.frues-category .frues-pgrid { gap: var(--sp-3) var(--sp-3); row-gap: var(--sp-4); }
.frues-category .frues-pagination { margin-top: var(--sp-5); }
.frues-category .frues-category-toolbar { padding: var(--sp-1) 0 var(--sp-3); }

.frues-category { padding-bottom: 60px; background: var(--surface); }
/* Degradenin bitiş rengi sabit #fff değil: koyu modda kategori/arama başlığı bandı
   sağa doğru beyaza dönüyordu. */
.frues-category-hero { background: linear-gradient(135deg, var(--secondary) 0%, var(--surface) 100%); padding: 40px 0 50px; margin-bottom: 24px; }
.frues-category-title { font-size: 2.2rem; font-weight: 800; margin: 18px 0 6px; color: var(--text-primary); letter-spacing: -0.5px; }
.frues-category-count { color: var(--text-secondary); font-size: 0.95rem; margin: 0; }

.frues-category-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 4px 0 20px; gap: 16px; }
.frues-filter-toggle { display: inline-flex; align-items: center; gap: 10px; padding: 11px 22px; background: var(--surface); border: 1.5px solid var(--text-primary); color: var(--text-primary); border-radius: 999px; font-weight: 600; font-size: 0.88rem; cursor: pointer; transition: all 0.15s; position: relative; }
.frues-filter-toggle:hover { background: var(--btn-dark-bg); color: var(--btn-dark-color); }
.frues-filter-toggle i { font-size: 0.92rem; }
.frues-filter-badge { background: var(--primary); color: #fff; font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; min-width: 22px; text-align: center; }
.frues-category-toolbar-right { display: flex; align-items: center; gap: 14px; margin-left: auto; }
/* Sıralama — yerli <select> yerine özel liste (referans temadaki gibi kenarlıksız panel). */
.frues-sort { position: relative; }
.frues-sort-btn { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border: 1px solid var(--border-color); border-radius: 999px; background: var(--surface); color: var(--text-primary); font-family: inherit; font-weight: 600; font-size: 0.88rem; cursor: pointer; transition: border-color .15s ease; }
.frues-sort-btn:hover, .frues-sort.open .frues-sort-btn { border-color: var(--border-strong); }
.frues-sort-btn i { color: var(--text-secondary); font-size: 0.85rem; }
.frues-sort-caret { transition: transform .18s ease; }
.frues-sort.open .frues-sort-caret { transform: rotate(180deg); }

.frues-sort-menu {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 1200;
    min-width: 240px; padding: 10px 0;
    background: var(--surface-raised, var(--surface));
    border-radius: 12px;
    box-shadow: var(--shadow-2);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.frues-sort.open .frues-sort-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.frues-sort-opt {
    display: block; width: 100%;
    padding: 9px 22px;
    border: none; background: transparent;
    font-family: inherit; font-size: 0.92rem; font-weight: 500;
    color: var(--text-muted);
    text-align: left; white-space: nowrap; cursor: pointer;
    transition: color .12s ease;
}
.frues-sort-opt:hover { color: var(--text-primary); }
.frues-sort-opt.on { color: var(--text-primary); font-weight: 700; }

/* Kenar çubuğu masaüstünde sabit bir sütun; referans tasarımda da hep açık.
   ≤991px'te aşağıdaki media query çekmeceye çeviriyor. */
.frues-category-grid-row { display: grid; grid-template-columns: 260px 1fr; gap: 30px; transition: grid-template-columns 0.3s ease; }
.frues-category-wrap.filter-open .frues-category-grid-row { grid-template-columns: 260px 1fr; }
.frues-filter-sidebar { display: block; }
.frues-filter-toggle { display: none; }  /* masaüstünde gereksiz: çubuk zaten açık */
/* Masaüstünde gizli: "FİLTRELE" başlığı ve kapatma çarpısı yalnızca mobil
   çekmecenin parçası; aşağıdaki media query onları geri açıyor. */
.frues-filter-sidebar-head { display: none; align-items: center; justify-content: space-between; padding: 4px 4px 16px; border-bottom: 1px solid var(--border-color); margin-bottom: 18px; }
.frues-filter-sidebar-title { font-size: 0.85rem; font-weight: 800; letter-spacing: 2px; color: var(--text-primary); }
.frues-filter-close { background: transparent; border: none; cursor: pointer; color: var(--text-secondary); font-size: 1rem; width: 32px; height: 32px; border-radius: 50%; transition: background 0.15s; }
.frues-filter-close:hover { background: var(--surface-2); color: var(--text-primary); }
.frues-filter-clearall { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; color: #ef4444; text-decoration: none; margin-bottom: 18px; padding: 6px 10px; border-radius: 6px; transition: background 0.15s; }
.frues-filter-clearall:hover { background: #fef2f2; }

.frues-filter-block { margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--border-color); }
.frues-filter-block:last-child { border-bottom: none; }
.frues-filter-block-title { display: flex; align-items: center; gap: 12px; font-size: 0.78rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-primary); margin: 0 0 14px; padding-left: 10px; border-left: 3px solid var(--primary); }
/* Başlığın sağına uzanan ince ayraç — referans tasarımdaki çizgi. */
.frues-filter-block-title::after { content: ''; flex: 1; height: 1px; background: var(--divider); }

.frues-filter-cats { list-style: none; padding: 0; margin: 0; }
.frues-filter-cat-item { margin-bottom: 2px; }
/* Referans temada hover dolgusuz: solda küçük bir ok açılıyor, yazı koyulaşıyor.
   Dolgulu blok yerine bu daha sakin duruyor ve seçili satır onay işaretiyle ayrışıyor. */
.frues-filter-cat-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 2px; border-radius: 8px; cursor: pointer; font-size: 0.88rem; color: var(--text-secondary); transition: color .15s ease, padding-left .18s ease; }
.frues-filter-cat-row::before {
    content: '\203A';                 /* › */
    flex-shrink: 0;
    width: 0; overflow: hidden;
    opacity: 0;
    color: var(--primary);
    font-size: 1rem; line-height: 1;
    transition: width .18s ease, opacity .18s ease;
}
.frues-filter-cat-row:hover { color: var(--text-primary); }
.frues-filter-cat-row:hover::before,
.frues-filter-cat-row.active::before { width: 12px; opacity: 1; }
.frues-filter-cat-row.active { color: var(--primary); font-weight: 700; }
.frues-filter-cat-name { flex: 1; min-width: 0; }
/* Radyo düğmesi görünmüyor ama DOM'da duruyor: klavye ve ekran okuyucu için gerekli,
   seçim görsel olarak onay işaretiyle anlatılıyor. */
.frues-filter-cat-row input { position: absolute; opacity: 0; width: 0; height: 0; }
.frues-filter-cat-tick { font-size: 17px; color: var(--primary); opacity: 0; transition: opacity 0.12s; flex-shrink: 0; }
.frues-filter-cat-row.active .frues-filter-cat-tick { opacity: 1; }
.frues-filter-cat-chevron { font-size: 0.72rem; color: var(--text-muted); flex-shrink: 0; transition: transform 0.15s; }
.frues-filter-cats--child { margin: 2px 0 6px 14px; padding-left: 10px; border-left: 1px solid var(--divider); display: none; }
.frues-filter-cats--child.open { display: block; }
.frues-filter-cat-item:has(.frues-filter-cats--child.open) .frues-filter-cat-chevron { transform: rotate(180deg); }
.frues-filter-cat-clear { display: block; padding: 7px 10px; font-size: 0.78rem; color: var(--text-secondary); text-decoration: none; }
.frues-filter-cat-clear:hover { color: var(--primary); }

.frues-filter-price { padding: 4px; }
.frues-filter-price-range { position: relative; height: 40px; margin: 8px 0 12px; }
.frues-filter-price-track { position: absolute; left: 0; right: 0; top: 18px; height: 4px; border-radius: 999px; background: var(--border-color); pointer-events: none; }
.frues-filter-price-fill { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: var(--primary); }
.frues-filter-price-range input[type="range"] { position: absolute; top: 16px; left: 0; right: 0; width: 100%; appearance: none; -webkit-appearance: none; background: transparent; pointer-events: none; }
.frues-filter-price-range input[type="range"]::-webkit-slider-runnable-track { height: 3px; background: #e5e7eb; border-radius: 999px; }
.frues-filter-price-range input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--primary); border: 3px solid var(--surface); box-shadow: 0 2px 6px rgba(0,0,0,0.2); cursor: pointer; pointer-events: auto; margin-top: -8px; }
.frues-filter-price-range input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--primary); border: 3px solid var(--surface); box-shadow: 0 2px 6px rgba(0,0,0,0.2); cursor: pointer; pointer-events: auto; }
.frues-filter-price-vals { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--text-secondary); margin-bottom: 12px; flex-wrap: wrap; }
.frues-filter-price-vals strong { color: var(--text-primary); font-weight: 700; }
.frues-filter-price-apply { width: 100%; padding: 9px 14px; background: var(--btn-dark-bg); color: var(--btn-dark-color); border: none; border-radius: 8px; font-weight: 700; font-size: 0.82rem; letter-spacing: 0.5px; cursor: pointer; transition: filter 0.15s; }
.frues-filter-price-apply:hover { filter: brightness(1.2); }

.frues-filter-colors { display: flex; flex-wrap: wrap; gap: 8px; }
.frues-filter-color-swatch { position: relative; cursor: pointer; }
.frues-filter-color-swatch input { position: absolute; opacity: 0; pointer-events: none; }
.frues-filter-color-swatch span { display: block; width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #d1d5db; transition: box-shadow 0.15s, transform 0.15s; }
.frues-filter-color-swatch:hover span { transform: scale(1.1); }
.frues-filter-color-swatch.active span { box-shadow: 0 0 0 2px var(--text-primary); }

.frues-filter-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.frues-filter-tag-chip { cursor: pointer; }
.frues-filter-tag-chip input { position: absolute; opacity: 0; pointer-events: none; }
.frues-filter-tag-chip span { display: inline-block; padding: 6px 14px; font-size: 0.78rem; border: 1px solid #d1d5db; border-radius: 999px; color: var(--text-secondary); transition: all 0.12s; background: var(--surface); }
.frues-filter-tag-chip:hover span { border-color: var(--text-primary); color: var(--text-primary); }
.frues-filter-tag-chip.active span { background: var(--btn-dark-bg); color: var(--btn-dark-color); border-color: var(--btn-dark-bg); }

.frues-filter-brands { list-style: none; padding: 0; margin: 0; max-height: 250px; overflow-y: auto; }
.frues-filter-brand-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; cursor: pointer; font-size: 0.86rem; color: var(--text-secondary); border-radius: 6px; transition: background 0.12s; }
.frues-filter-brand-row:hover { background: var(--surface-2); color: var(--text-primary); }
.frues-filter-brand-row input { accent-color: var(--primary); }

.frues-category-grid { min-width: 0; }
.frues-pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }

/* Sıra başına ürün seçici — Frues'teki gibi ikonun üzerine gelince sayılar açılır.
   Yalnızca geniş ekranda etkili; dar ekranlarda aşağıdaki media query'ler karar verir. */
.frues-cols-picker { position: relative; display: inline-flex; align-items: center; }
.frues-cols-btn { width: 38px; height: 38px; border: 1.5px solid var(--border-strong); background: var(--surface); color: var(--text-primary); border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s, color .15s; }
.frues-cols-btn:hover, .frues-cols-picker.open .frues-cols-btn { background: var(--text-primary); color: var(--surface); }
.frues-cols-options { position: absolute; right: calc(100% + 8px); top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 6px; padding: 4px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-2); opacity: 0; visibility: hidden; transition: opacity .15s; white-space: nowrap; }
.frues-cols-picker:hover .frues-cols-options,
.frues-cols-picker:focus-within .frues-cols-options,
.frues-cols-picker.open .frues-cols-options { opacity: 1; visibility: visible; }
/* Görünmez köprü: ikondan sayılara imleçle kesintisiz geçilebilsin diye aradaki
   boşluğu dolduruyor. Olmadan panel yolda kapanıyordu. */
.frues-cols-options::after { content: ''; position: absolute; left: 100%; top: 0; bottom: 0; width: 12px; }
.frues-cols-opt { width: 34px; height: 34px; border: none; border-radius: 50%; background: transparent; color: var(--text-secondary); font-weight: 700; font-size: .85rem; cursor: pointer; transition: background .12s, color .12s; }
.frues-cols-opt:hover { background: var(--surface-2); color: var(--text-primary); }
.frues-cols-opt.on { background: var(--text-primary); color: var(--surface); }

@media (min-width: 1201px) {
    .frues-pgrid[data-cols="2"], .frues-category-wrap.filter-open .frues-pgrid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
    .frues-pgrid[data-cols="3"], .frues-category-wrap.filter-open .frues-pgrid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
    .frues-pgrid[data-cols="4"], .frues-category-wrap.filter-open .frues-pgrid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
    .frues-pgrid[data-cols="5"], .frues-category-wrap.filter-open .frues-pgrid[data-cols="5"] { grid-template-columns: repeat(5, 1fr); }
    .frues-pgrid[data-cols="6"], .frues-category-wrap.filter-open .frues-pgrid[data-cols="6"] { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 991px) { .frues-cols-picker { display: none; } }
.frues-category-wrap.filter-open .frues-pgrid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1200px) { .frues-pgrid, .frues-category-wrap.filter-open .frues-pgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 991px) { .frues-pgrid, .frues-category-wrap.filter-open .frues-pgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .frues-pgrid, .frues-category-wrap.filter-open .frues-pgrid { grid-template-columns: 1fr; } }

/* Boş durum: sepet çekmecesindeki daire ile aynı aile, sabit gri yerine token. */
.frues-category-empty { text-align: center; padding: 70px 20px; color: var(--text-secondary); }
.frues-category-empty-icon {
    width: 96px; height: 96px; margin: 0 auto 22px;
    border-radius: 50%;
    background: var(--secondary);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted);
    animation: fruesCardIn .5s cubic-bezier(.2,.6,.2,1) both;
}
.frues-category-empty-icon i { font-size: 2.2rem; }
.frues-category-empty h3 { font-size: 1.25rem; font-weight: 800; color: var(--heading-color); margin: 0 0 8px; }
.frues-category-empty p { margin: 0 auto 20px; max-width: 380px; line-height: 1.55; }
.frues-filter-clearall-btn { display: inline-block; padding: 10px 22px; background: var(--btn-dark-bg); color: var(--btn-dark-color); border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 0.85rem; }
.frues-filter-clearall-btn:hover { background: var(--primary); }

.frues-pagination { display: flex; justify-content: center; gap: 6px; margin-top: 40px; }
.frues-page-link { padding: 9px 14px; min-width: 38px; text-align: center; background: var(--surface); border: 1px solid var(--border-color); border-radius: 8px; color: var(--text-primary); text-decoration: none; font-weight: 600; font-size: 0.88rem; transition: all 0.15s; }
.frues-page-link:hover { background: var(--secondary); border-color: var(--text-primary); }
.frues-page-link.active { background: var(--btn-dark-bg); color: var(--btn-dark-color); border-color: var(--btn-dark-bg); }

/* Drawer modu — overlay olarak açılır, grid kaymaz */
.frues-category[data-filter-mode="drawer"] .frues-category-wrap.filter-open .frues-category-grid-row { grid-template-columns: 1fr; }
.frues-category[data-filter-mode="drawer"] .frues-category-wrap.filter-open .frues-filter-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 320px; background: var(--surface); z-index: 1100; padding: 24px; overflow-y: auto; box-shadow: 4px 0 24px rgba(0,0,0,0.12); animation: fruesSlideIn 0.25s ease-out; }
@keyframes fruesSlideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } }

/* Mobil — sidebar her zaman drawer modunda */
@media (max-width: 991px) {
    .frues-category-wrap.filter-open .frues-category-grid-row { grid-template-columns: 1fr; }
    .frues-category-wrap.filter-open .frues-filter-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 88%; max-width: 340px; background: var(--surface); z-index: 1100; padding: 24px; overflow-y: auto; box-shadow: 4px 0 24px rgba(0,0,0,0.18); animation: fruesSlideIn 0.25s ease-out; }
}

/* Eski duplicate ürün kartı blokları — nötralize (üstteki Shopify demo stili geçerli) */

/* ---- Ürün detay: AI Vision aksiyonları ---- */
.frues-pd-ai { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-color); }
.frues-pd-ai-label { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: #94a3b8; margin-bottom: 10px; }
.frues-pd-ai-label .material-icons-outlined { font-size: 17px; color: var(--primary); }
.frues-pd-ai-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.frues-pd-ai-btn {
    display: inline-flex; align-items: center; gap: 7px; padding: 10px 18px; border-radius: 999px;
    border: 1px solid var(--border-color); background: var(--surface); cursor: pointer;
    font-family: var(--font); font-size: .82rem; font-weight: 600; color: var(--heading-color);
    transition: all .18s ease;
}
.frues-pd-ai-btn .material-icons-outlined { font-size: 18px; }
.frues-pd-ai-btn:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.07); }
@media (max-width: 480px) {
    .frues-pd-ai-btns { flex-direction: column; }
    .frues-pd-ai-btn { justify-content: center; }
}

/* ---- Ürün detay: varyant seçimi (beden / numara / boyut / renk) ---- */
.frues-pd-variants { margin: 20px 0 4px; padding: 18px 0; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); }
.frues-pd-vgroup { margin-bottom: 16px; }
.frues-pd-vgroup:last-of-type { margin-bottom: 0; }
.frues-pd-vlabel { display: block; font-size: .74rem; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; color: #94a3b8; margin-bottom: 10px; }
.frues-pd-vlabel em { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 500; color: #64748b; }
.frues-pd-vchips { display: flex; flex-wrap: wrap; gap: 8px; }
.frues-pd-vchip {
    min-width: 48px; padding: 9px 15px; border: 1.5px solid var(--border-color); background: var(--surface);
    color: var(--heading-color); font-family: var(--font); font-size: .84rem; font-weight: 600;
    border-radius: 8px; cursor: pointer; transition: all .16s ease;
}
.frues-pd-vchip.wide { min-width: auto; padding: 9px 18px; }
.frues-pd-vchip:hover:not(:disabled) { border-color: var(--primary); }
.frues-pd-vchip.on { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 5px 14px rgba(0,0,0,.12); }
.frues-pd-vchip.out, .frues-pd-vswatch.out { opacity: .4; text-decoration: line-through; cursor: not-allowed; }
.frues-pd-vswatch {
    width: 38px; height: 38px; border: 2px solid var(--border-color); background: var(--surface);
    border-radius: 50%; cursor: pointer; padding: 2px; transition: all .16s ease;
}
.frues-pd-vswatch span { display: block; width: 100%; height: 100%; border-radius: 50%; }
.frues-pd-vswatch:hover:not(:disabled) { border-color: var(--primary); transform: scale(1.06); }
.frues-pd-vswatch.on { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent); }
.frues-pd-vhint { margin-top: 12px; font-size: .8rem; color: #94a3b8; font-weight: 500; }
.frues-pd-vhint.ok { color: #16a34a; font-weight: 600; }
.frues-pd-vhint.low { color: #c2410c; }
.frues-pd-vhint.out { color: #b91c1c; font-weight: 600; }
.frues-pd-vhint.warn { color: #b45309; font-weight: 600; }

/* ── "Fiyat Alınız" ────────────────────────────────────────────────────────────
   B2C satış fiyatı 0 olan üründe tutarın yerini alır. Rozet biçimi
   .frues-quickview-save-badge'den geliyor; rengi indirim rozetinden ayrışsın diye
   uyarı tonu kullanıyoruz — bu bir kampanya değil, "bize sorun" çağrısı.
   Renkler token'lardan: koyu modda da doğru okunur.                            */
.frues-price-request {
    display: inline-block;
    background: color-mix(in srgb, var(--warning) 14%, transparent);
    color: var(--warning);
    border: 1px solid color-mix(in srgb, var(--warning) 32%, transparent);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.4px;
    padding: 3px 10px;
    border-radius: 6px;
    text-decoration: none;
    white-space: nowrap;
}

/* Kart üzerindeki hover aksiyonlarında sepet butonunun yerini alır; boyutu
   .frues-card-action'dan gelir, burada yalnız renk verilir. */
.frues-card-action.frues-price-request-btn {
    color: var(--warning);
}

/* Ürün detayda tam genişlikte buton (.frues-pd-add ile birlikte kullanılır). */
.frues-pd-add.frues-price-request-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
}

/* Sepet çekmecesindeki çapraz satış kartı */
.frues-cart-crossell-add.frues-price-request-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}

/* Detay sayfasındaki büyük fiyat alanında rozet, tutar boyutunda durmasın.
   Özgüllük notu: ProductDetail.cshtml kendi <style> bloğunda `.frues-pd-price`
   için `color: var(--primary)` yazıyor ve bu dosyadan SONRA yükleniyor. Aynı
   (0,1,0) özgüllükte olduğu için sonraki kazanırdı; iki sınıfı birlikte yazarak
   (0,2,0) ile öne geçiyoruz — !important'a gerek yok. */
.frues-pd-price.frues-price-request {
    font-size: 0.9rem;
    vertical-align: middle;
    color: var(--warning);
    background: color-mix(in srgb, var(--warning) 14%, transparent);
}

/* Aynı gerekçe: kart ve benzer ürün fiyatları da kendi renklerini dayatıyor. */
.frues-card-price.frues-price-request,
.frues-tricol-price.frues-price-request,
.frues-suggest-price.frues-price-request,
.frues-pd-related-price.frues-price-request,
.frues-cart-crossell-price.frues-price-request {
    color: var(--warning);
}

/* ── Filtre kenar çubuğu: mobil çekmece ───────────────────────────────────────
   Masaüstünde çubuk sabit sütun; dar ekranda eski çekmece davranışına dönüyor.
   Perde ve ESC ile kapanma eklendi — önceden kapatmanın tek yolu köşedeki X idi. */
.frues-filter-backdrop { display: none; }
@media (max-width: 991px) {
    .frues-category-grid-row { grid-template-columns: 1fr; }
    .frues-filter-sidebar { display: none; }
    .frues-filter-toggle { display: inline-flex; }
    .frues-category-wrap.filter-open .frues-filter-sidebar { display: block; }
    .frues-filter-sidebar-head { display: flex; }
    .frues-category-wrap.filter-open .frues-filter-backdrop {
        display: block; position: fixed; inset: 0; z-index: 1099;
        background: rgba(0,0,0,0.45);
    }
}

/* ============================================================================
   DOKUNMA HEDEFLERİ — yalnız dokunmatik genişliklerde büyütülür.

   Ölçülen: sepet adet düğmeleri 28x28, hızlı bakış adedi ve çapraz satış okları
   32x32, filtre kapatma 32x32, çekmece/hızlı bakış kapatma 36x36. WCAG 2.5.5
   44px önerir, 40px yaygın taban. Bunların en kritiği sepet adet düğmesi:
   birincil ticaret kontrolü ve mobil çekmecede başparmakla kullanılıyor.

   Masaüstü ölçüleri BİLİNÇLİ olarak değiştirilmiyor — onaylanmış tasarımın
   oranları korunsun; büyütme yalnız fare olmayan / dar ekranlarda geçerli.
   ========================================================================== */
@media (hover: none), (max-width: 768px) {
    .frues-cart-qty-btn { width: 40px; height: 40px; }
    .frues-quickview-qty button { width: 40px; height: 40px; }
    .frues-cart-crossell-arrow { width: 40px; height: 40px; }
    .frues-filter-close { width: 40px; height: 40px; }
    .frues-cart-drawer-close { width: 40px; height: 40px; }
    .frues-quickview-close { width: 40px; height: 40px; }
    .frues-card-action { width: 40px; height: 40px; }
    .frues-card-fav-left { width: 40px; height: 40px; }
    .frues-lang-btn { height: 40px; }
    .frues-page-link { min-width: 40px; padding: 11px 14px; }
    /* Karusel noktaları: görünen boyut aynı kalır, tıklama alanı büyür */
    .frues-hero-dot, .frues2-dot, .frues4-dot { position: relative; }
    .frues-hero-dot::after, .frues2-dot::after, .frues4-dot::after {
        content: ""; position: absolute; inset: -14px;
    }
}

/* ============================================================================
   BLOG — liste kartı özeti ve yazı sayfası.
   Blog sayfaları tema dili kullanmıyordu (Bootstrap ızgarası, emoji başlık, sabit
   metin renkleri, markayla ilgisiz mor degrade). Liste anasayfanın
   frues-blog-card bileşenine bağlandı; aşağıdakiler eksik olan parçalar.
   ========================================================================== */
.frues-blog-card-excerpt {
    font-size: var(--fs-body); line-height: 1.55; color: var(--text-secondary);
    margin: 0 0 16px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

.frues-article { max-width: 860px; margin: 0 auto; }
.frues-article-cover {
    width: 100%; aspect-ratio: 16 / 8; overflow: hidden;
    border-radius: 16px; background: var(--surface-2); margin-bottom: 28px;
}
.frues-article-cover img { width: 100%; height: 100%; object-fit: cover; }
.frues-article-title {
    font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 800; letter-spacing: -0.6px;
    line-height: 1.2; color: var(--heading-color); margin: 0 0 12px; font-family: var(--font);
}
.frues-article-meta {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font-size: var(--fs-meta); color: var(--text-muted); margin: 0 0 26px;
}
.frues-article-lead {
    font-size: 1.1rem; line-height: 1.65; color: var(--text-secondary);
    border-left: 3px solid var(--primary); padding-left: 18px; margin: 0 0 28px;
}
.frues-article-related { margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--divider); }

@media (max-width: 768px) {
    .frues-article-cover { aspect-ratio: 3 / 2; border-radius: 12px; margin-bottom: 20px; }
    .frues-article-lead { font-size: 1rem; padding-left: 14px; }
}

/* Footer "Yardım" kolonundaki eylem bağlantısı. Eskiden bu kolon "Bülten"di ve
   içinde ne input ne buton vardı — abone olunacak hiçbir şey yoktu. */
.frues-footer-help-cta {
    display: inline-flex; width: fit-content; align-items: center; gap: 8px; margin-top: 14px;
    padding: 9px 16px; border-radius: 999px;
    border: 1px solid var(--border-strong); color: var(--text-primary);
    font-size: var(--fs-meta); font-weight: 600; text-decoration: none;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.frues-footer-help-cta:hover { background: var(--btn-dark-bg); color: var(--btn-dark-color); border-color: var(--btn-dark-bg); }

/* ============================================================================
   ÜRÜN KARTI BİLGİ KATMANI — indirim yüzdesi ve tükendi rozeti.
   Kartta ad dışında hiçbir bilgi görünmüyordu: canlıda listelenen ürünlerin
   hiçbirinde fiyat yok ve fiyat satırı 0px yükseklikte boş kalıyordu. Üçü de
   Ayarlar → Ürün Kartı altından kapatılabilir.
   ========================================================================== */
.frues-card-disc-chip {
    flex: 0 0 auto;
    padding: 2px 7px; border-radius: 999px;
    background: color-mix(in srgb, var(--danger) 14%, transparent);
    color: var(--danger);
    font-size: var(--fs-eyebrow); font-weight: 800; line-height: 1.5;
    letter-spacing: .2px;
}

.frues-card-soldout-badge {
    position: absolute; top: 14px; right: 14px; z-index: 6;
    padding: 5px 12px; border-radius: 999px;
    background: var(--btn-dark-bg); color: var(--btn-dark-color);
    font-size: var(--fs-eyebrow); font-weight: 800; letter-spacing: .6px;
    text-transform: uppercase;
    box-shadow: 0 3px 10px rgba(0,0,0,.18);
}
/* Tükenmiş ürünün görseli soluk: rozet tek başına yeterince okunmuyordu. */
.frues-product-card:has(.frues-card-soldout-badge) .frues-card-img-frame img { opacity: .55; }

/* ============================================================================
   AKTİF FİLTRE ÇİPLERİ ve FİLTRE YÜKLENME DURUMU

   Başlıkta yalnız "N ürün bulundu • 3 aktif filtre" yazıyordu: hangi filtrelerin
   açık olduğu görünmüyor, birini kaldırmanın tek yolu kenar çubuğunu yeniden açmak
   ya da hepsini temizlemekti. Ayrıca her filtre tıklaması tam sayfa GET'i olduğu
   için ekran beyaz bir flaşla yenileniyor, hiçbir yükleniyor işareti yoktu.
   ========================================================================== */
.frues-active-filters {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    margin: 0 0 20px;
}
.frues-active-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 12px; border-radius: 999px;
    background: var(--surface-2); border: 1px solid var(--border-color);
    color: var(--text-primary); text-decoration: none;
    font-size: var(--fs-meta); font-weight: 600;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.frues-active-chip i { font-size: 0.7rem; opacity: .55; }
.frues-active-chip:hover { background: var(--btn-dark-bg); color: var(--btn-dark-color); border-color: var(--btn-dark-bg); }
.frues-active-chip:hover i { opacity: 1; }
.frues-active-clear {
    font-size: var(--fs-meta); font-weight: 700; color: var(--text-secondary);
    text-decoration: underline; margin-left: 4px;
}
.frues-active-clear:hover { color: var(--primary); }

/* Filtre gönderilirken ızgara sönümlenir — sayfanın yenilendiği belli olsun. */
.frues-category-wrap.is-loading .frues-pgrid,
.frues-category-wrap.is-loading .frues-pagination { opacity: .45; pointer-events: none; transition: opacity .18s ease; }
.frues-category-wrap.is-loading .frues-filter-sidebar { pointer-events: none; }
.frues-filter-loading {
    position: fixed; left: 50%; top: 96px; transform: translateX(-50%);
    display: none; align-items: center; gap: 9px; z-index: 60;
    padding: 10px 18px; border-radius: 999px;
    background: var(--surface); border: 1px solid var(--border-color);
    box-shadow: var(--shadow-2);
    font-size: var(--fs-meta); font-weight: 600; color: var(--text-primary);
}
.frues-category-wrap.is-loading .frues-filter-loading { display: inline-flex; }
.frues-filter-loading::before {
    content: ""; width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid var(--border-strong); border-top-color: var(--primary);
    animation: fruesSpin 0.7s linear infinite;
}
@keyframes fruesSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .frues-filter-loading::before { animation: none; }
}

/* Aramada sonuç yoksa gösterilen ipuçları ve eylemler. Öncesinde yalnız genel bir
   "ürün bulunamadı" metni vardı; ne arandığı yazmıyor, öneri de verilmiyordu. */
.frues-empty-tips {
    list-style: none; padding: 0; margin: 0 auto 22px; max-width: 420px;
    text-align: left; display: grid; gap: 8px;
}
.frues-empty-tips li { display: flex; align-items: flex-start; gap: 9px; font-size: var(--fs-body); color: var(--text-secondary); }
.frues-empty-tips i { color: var(--primary); font-size: 0.72rem; margin-top: 5px; }
.frues-empty-actions { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.frues-empty-link { font-size: var(--fs-meta); font-weight: 600; color: var(--text-secondary); text-decoration: underline; }
.frues-empty-link:hover { color: var(--primary); }