.hero {
    padding-block: 2.5rem;
    background-color: var(--color-surface); /* düz beyaz */
}

.hero__title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--color-primary-dark);
    
}

.hero__text {
    color: var(--color-muted);
    max-width: 480px;
    font-size: 0.95rem;
    color: var(--color-muted);
}

/* public/assets/css/home.css */



/* ===========================
   HOME FEATURES STRIP
   =========================== */

.home-features {
    background-color: #ffffff;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    padding: 1.5rem 0 1.6rem;
}

.home-features__grid {
    display: grid;
    grid-template-columns: repeat(var(--home-features-cols, 4), minmax(0, 1fr));
    gap: var(--grid-gap);
    align-items: stretch;
}

.home-feature {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    border-radius: 0.9rem;
    background-color: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.25);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
    min-height: 90px; /* biraz daha yüksek görünüm */
}

/* İkon */

.home-feature__icon {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;

    /* mavi daireyi kaldır */
    background-color: transparent;

    /* premium dursun diye çok hafif border (istersen bunu da tamamen silebilirsin) */
    border: 1px solid rgba(148, 163, 184, 0.35);

    color: var(--color-primary);
}

.home-feature__icon i {
    /* ikon biraz büyük */
    font-size: 1.65rem;
    line-height: 1;
}
.home-feature__icon svg {
    width: 26px;
    height: 26px;
}


/* Metin */

.home-feature__content {
    flex: 1;
}

.home-feature__title {
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.25rem;
    color: #111827;
}

.home-feature__text {
    font-size: 0.85rem;
    color: #6b7280;
}

/* Hover efekti */

.home-feature:hover {
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.09);
    transform: translateY(-1px);
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}


/* ===========================
   HOME CATEGORY CARDS
   =========================== */

.home-categories {
    background-color: #ffffff;
    padding: 2.5rem 0 3rem;
}

.home-categories__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--grid-gap-lg);
}

/* Kart */

.home-category-card {
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
    border: 1px solid rgba(148, 163, 184, 0.25);
}

/* Üst başlık */

.home-category-card__header {
    padding: 1rem 1.25rem 0.6rem;
    text-align: center;
}

.home-category-card__shop {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #111827;
}

.home-category-card__underline {
    display: inline-block;
    margin-top: 0.35rem;
    width: 26px;
    height: 2px;
    border-radius: 999px;
    background-color: var(--color-primary);
}

/* Görsel */

.home-category-card__image-link {
    display: block;
    overflow: hidden;
     height: 300px;
}

.home-category-card__image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;

    transform: scale(1.02);
    transition: transform 0.35s ease;
}

/* Alt kısım */

.home-category-card__footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto; /* sol metin taşmadan kısalsın, sağ sabit kalsın */
    gap: 12px;
    align-items: start;

    padding: 0.9rem 1.25rem 1rem;
    border-top: 1px solid #e5e7eb;
    font-size: 0.9rem;
}

.home-category-card__name {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #111827;

    min-width: 0;                 /* grid içinde taşmayı engeller */
    line-height: 1.2;
    overflow: hidden;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;        /* max 2 satır */
}
.home-category-card__meta{
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;          /* “$3.39 / sqft” bölünmesin */
}
.home-category-card__meta-label {
    color: #6b7280;
    font-size: 0.85rem;
    margin-right: 0;
}

.home-category-card__price {
    color: #ef4444;
    font-weight: 700;
}
@media (max-width: 576px){
  .home-category-card__image-link{ height: 240px; }
}
/* Hover efekti */

.home-category-card:hover .home-category-card__image {
    transform: scale(1.06);
}

.home-category-card:hover {
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12);
    transform: translateY(-3px);
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}

/* ===========================
   HOME FEATURED PRODUCTS
   =========================== */

.home-featured {
    background-color: #ffffff;
    padding: 2.6rem 0 3rem;
}

.home-featured__header {
    text-align: center;
    margin-bottom: 2rem;
}

.home-featured__title {
    font-size: 1rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
    color: #111827;
}

.home-featured__underline {
    display: inline-block;
    margin-top: 0.45rem;
    width: 30px;
    height: 2px;
    border-radius: 999px;
    background-color: var(--color-primary);
}

.home-featured__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--grid-gap);
}
.home-featured__more {
    margin-top: 2rem;
    text-align: center;
}

.home-featured__more-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1.8rem;
    border-radius: 999px;
    border: 1px solid #d1d5db;
    font-size: 0.85rem;
    font-weight: 500;
    color: #374151;
    background-color: #ffffff;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: background-color 0.15s ease, color 0.15s ease,
                box-shadow 0.15s ease, transform 0.15s ease;
}

.home-featured__more-link:hover {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.35);
    transform: translateY(-1px);
}


/* ===========================
   HOME BLOG SECTION
   =========================== */

.home-blog {
    background-color: #ffffff;
    padding: 2.8rem 0 3rem;
}

.home-blog__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--grid-gap);
}

.home-blog-card {
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.25);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.07);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.home-blog-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 55px rgba(15, 23, 42, 0.12);
}

/* Görsel */

.home-blog-card__image-link {
    display: block;
    overflow: hidden;
}

.home-blog-card__image {
    display: block;
    width: 100%;
    transition: transform 0.4s ease;
}

.home-blog-card:hover .home-blog-card__image {
    transform: scale(1.05);
}

/* Metin alanı */

.home-blog-card__body {
    padding: 1rem 1.25rem 1.2rem;
}

.home-blog-card__meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #9ca3af;
    margin-bottom: 0.4rem;
}

.home-blog-card__dot {
    font-size: 0.6rem;
    opacity: 0.8;
}

.home-blog-card__title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.5rem;
}

.home-blog-card__title a {
    color: inherit;
}

.home-blog-card__title a:hover {
    color: var(--color-primary);
}

.home-blog-card__excerpt {
    font-size: 0.85rem;
    color: #6b7280;
    margin-bottom: 0.75rem;
}

/* Devamını oku linki */

.home-blog-card__read-more {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-primary);
}

/* Tüm blog linki */

.home-blog__more {
    margin-top: 2rem;
    text-align: center;
}

.home-blog__more-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1.8rem;
    border-radius: 999px;
    border: 1px solid #d1d5db;
    font-size: 0.85rem;
    font-weight: 500;
    color: #374151;
    background-color: #ffffff;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: background-color 0.15s ease, color 0.15s ease,
                box-shadow 0.15s ease, transform 0.15s ease;
}

.home-blog__more-link:hover {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.35);
    transform: translateY(-1px);
}

/* Ürün kartı */

.product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.25);
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.06);
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.product-card:hover {
    box-shadow: 0 20px 55px rgba(15, 23, 42, 0.12);
    transform: translateY(-3px);
}

/* Media: FIX height (365w card -> 300h image area look) */
.product-card__media {
    position: relative;
    background: #fff;
    height: 300px;
    overflow: hidden;
    margin: 0;
}

/* Link wrapper (if image is inside link) */
.product-card__image-link {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Image fills the fixed media area (no bottom “overlay/blank”) */
.product-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Remove any hover overlay */
.product-card__media::after {
    content: none;
}

/* Quick View butonu */
.product-card__quick-view {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, calc(-50% + 14px));
    z-index: 2;
    opacity: 0;
    pointer-events: none;

    padding: 0.45rem 1.3rem;
    border-radius: 999px;
    border: none;
    background-color: #ffffff;
    color: #111827;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.25);
}

.product-card:hover .product-card__quick-view {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%);
}

/* Brand bar (CSS FLOORS) – full width and flush to image */
.product-card__brand-bar {
    display: block;
    background: #f3f4f6;
    color: #111827;
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-top: 1px solid #e5e7eb;
    margin: 0;
}

/* Eğer brand bar product-card__body içine girerse, padding’i bypass etsin */
.product-card__body .product-card__brand-bar {
    margin-left: -14px;
    margin-right: -14px;
}

/* Kart gövdesi (name + price) */
.product-card__body {
    padding: 0 14px 14px;
}

.product-card__categories {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #9ca3af;
    margin-bottom: 0.3rem;
}

.product-card__name {
    font-size: 0.95rem;
    font-weight: 600;
    color: #111827;
    margin: 10px 0 8px;
    line-height: 1.25;
}

.product-card__name a {
    color: inherit;
}

.product-card__name a:hover {
    color: var(--color-primary);
}

/* Rating (şimdilik kullanılmıyor) */
.product-card__rating {
    display: none;
}

/* Fiyat */
.product-card__price {
    font-size: 0.95rem;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

/* Wishlist ikonu */
.product-card__wishlist {
    position: absolute;
    top: 0.8rem;
    right: 0.85rem;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    border: none;
    background-color: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.16);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.product-card__wishlist i {
    font-size: 1rem;
    color: #6b7280;
}

.product-card__wishlist:hover i {
    color: var(--color-primary);
}

/* ===========================
   HOME TABBED PRODUCTS
   =========================== */

.home-tabs {
    background-color: #ffffff;
    padding: 2.8rem 0 3.2rem;
}

.home-tabs__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 1rem;
}

.home-tabs__title {
    text-align: left;
}

.home-tabs__view-all {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.home-tabs__view-all:hover {
    text-decoration: underline;
}

/* Sekme başlıkları */

.home-tabs__nav {
    display: flex;
    gap: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 1.4rem;
}

.home-tabs__tab {
    position: relative;
    padding: 0.65rem 0;
    border: none;
    background: none;
    font-size: 0.9rem;
    color: #6b7280;
    cursor: pointer;
}

.home-tabs__tab::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    border-radius: 999px;
    background-color: transparent;
}

.home-tabs__tab.is-active {
    color: var(--color-primary);
    font-weight: 600;
}

.home-tabs__tab.is-active::after {
    background-color: var(--color-primary);
}

/* Paneller */

.home-tabs__panel {
    display: none;
}

.home-tabs__panel.is-active {
    display: block;
}

/* Carousel */

.home-tabs__carousel {
    position: relative;
}

.home-tabs__track-wrapper {
    overflow-x: auto;
    scroll-behavior: smooth;
}

.home-tabs__track {
    display: flex;
    gap: var(--grid-gap);              /* daha önce varsa override eder */
}
.home-tabs__track > .tab-product-card {
    margin-right: 0;     /* ekstra margin varsa temizler */
}
/* Ürün kartları (mini kartlar) */

.tab-product-card {
    flex: 0 0 230px;
    max-width: 230px;
    background-color: #ffffff;
    border-radius: 0.9rem;
    border: 1px solid rgba(148, 163, 184, 0.25);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}

.tab-product-card__image-link {
    display: block;
    background-color: #f3f4f6;
}

.tab-product-card__image {
    display: block;
    width: 100%;
}

.tab-product-card__body {
    padding: 0.8rem 0.85rem 0.9rem;
}

.tab-product-card__category {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #9ca3af;
    margin-bottom: 0.25rem;
}

.tab-product-card__name {
    font-size: 0.9rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 0.3rem;
}

.tab-product-card__rating {
    font-size: 0.8rem;
    color: #fbbf24;
    margin-bottom: 0.35rem;
}

.tab-product-card__rating i {
    margin-right: 1px;
}

.tab-product-card__prices {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    font-size: 0.9rem;
}

.tab-product-card__price-old {
    font-size: 0.8rem;
    color: #9ca3af;
    text-decoration: line-through;
}

.tab-product-card__price {
    font-weight: 600;
    color: #111827;
}

/* Ok tuşları */

.home-tabs__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: none;
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.home-tabs__arrow i {
    font-size: 1.2rem;
    color: #111827;
}

.home-tabs__arrow--prev {
    left: -16px;
}

.home-tabs__arrow--next {
    right: -16px;
}

/* Responsive */

@media (max-width: 1199.98px) {
    .tab-product-card {
        flex: 0 0 210px;
        max-width: 210px;
    }
}

@media (max-width: 991.98px) {
    .home-tabs__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .home-tabs__arrow--prev {
        left: 0;
    }

    .home-tabs__arrow--next {
        right: 0;
    }
}

@media (max-width: 575.98px) {
    .home-tabs__nav {
        gap: 1rem;
        overflow-x: auto;
    }

    .tab-product-card {
        flex: 0 0 70%;
        max-width: 70%;
    }
    .home-features__grid,
    .home-featured__grid,
    .home-categories__grid,
    .home-blog__grid{
    gap: 1rem;
    }

    .home-tabs__track{
    gap: .9rem;
    }
}
/* ===========================
   PRODUCT QUICK VIEW MODAL
   =========================== */

body.no-scroll {
    overflow: hidden;
}

.product-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.product-modal--open {
    opacity: 1;
    pointer-events: auto;
}

.product-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
}

.product-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(960px, 96vw);
    max-height: 90vh;
    background-color: #ffffff;
    border-radius: 16px;
    box-shadow: 0 32px 80px rgba(15, 23, 42, 0.45);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.product-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: none;
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
}

.product-modal__close i {
    font-size: 18px;
    color: #111827;
}

.product-modal__content {
    padding: 24px 28px 28px;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 24px;
    overflow: auto;
}

/* Sol kolon */

.product-modal__image-main {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    background-color: #f3f4f6;
}

.product-modal__image-main img {
    display: block;
    width: 100%;
    transform: scale(1);
    transform-origin: center center;
    transition: transform 0.25s ease;
}

.product-modal__badges {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.product-modal__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    color: #ffffff;
}

.product-modal__badge--primary {
    background-color: #16a34a;
}

.product-modal__badge--danger {
    background-color: #ef4444;
}

.product-modal__thumbs{
    margin-top: 10px;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
}

.product-modal__thumb{
    flex: initial !important;        /* eski flex:0 0 64px'i öldürür */
    width: 100% !important;
    aspect-ratio: 1 / 1;             /* kare tile */
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid transparent;
    padding: 0;
    background: #f3f4f6;
    cursor: pointer;
    box-sizing: border-box;
}

.product-modal__thumb img{
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
}



.product-modal__thumb.is-active {
    border-color: var(--color-primary);
}

/* Sağ kolon */

.product-modal__title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 8px;
    color: #111827;
}

.product-modal__rating-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

.product-modal__stars {
    color: #fbbf24;
    font-size: 16px;
}

.product-modal__reviews {
    font-size: 13px;
    color: #6b7280;
}

.product-modal__price {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #111827;
}

.product-modal__excerpt {
    font-size: 14px;
    color: #4b5563;
    margin-bottom: 12px;
}

.product-modal__meta {
    margin: 0;
}

.product-modal__meta-row {
    display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #eef2f7; /* hafif çizgi */
}

.product-modal__meta-row dt {
  margin: 0;
  font-weight: 800;       /* başlıklar bold */
  color: #111827;
  font-size: 12px;
  letter-spacing: 0.2px;
}

.product-modal__meta-row dd {
  margin: 0;
  color: #111827;
  font-weight: 600;
  font-size: 13px;
}
/* Description block under meta */
.product-modal__desc{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #eef2f7;
}
.product-modal__desc-title{
  font-weight: 800;
  color: #111827;
  font-size: 12px;
  letter-spacing: 0.2px;
  margin-bottom: 8px;
}

.product-modal__excerpt{
  color: #374151;
  font-size: 13px;
  line-height: 1.55;
}
/* Quick View – fixed image boxes (image fits the box) */
:root{
  --qv-main: 360px;   /* ana görsel kutusu */
  --qv-thumb: 78px;   /* thumb kutuları */
}

/* Ana görsel kutusu sabit */
.product-modal__image-main{
  position: relative;
    overflow: hidden;
    border-radius: 12px;
    background-color: #f3f4f6;

    width: 100%;
    aspect-ratio: 1 / 1; 
}

/* Ana görsel kutusundaki img kutuya uysun */
.product-modal__image-main img{
  display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;            /* resim kutuya uysun */
    object-position: center;

    transform: scale(1);
    transform-origin: center center;
    transition: transform 0.25s ease;
}

/* Thumb satırı sabit yükseklik */
.product-modal__thumbs{
  margin-top: 10px;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* 4 eşit kolon -> boşluk kalmaz */
    gap: 10px;
}

/* Thumb kutuları sabit */
.product-modal__thumb{
  width: 100%;
    aspect-ratio: 1 / 1;          /* thumb kutuları sabit kare */
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid transparent;
    padding: 0;
    background: #f3f4f6;
    cursor: pointer;
    box-sizing: border-box;
}

/* Thumb img kutuya uysun */
.product-modal__thumb img{
 display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* boşsa gizle */
.product-modal__excerpt:empty{ display:none; }
.product-modal__meta-row:last-child{
  border-bottom: 0;
}
/* Quick View – right column: CTA bottom-right */
.product-modal__right{
    display:flex;
    flex-direction:column;
    min-height:100%;
}

.product-modal__actions{
    margin-top:auto;
    justify-content:flex-end;
}

/* boş excerpt görünmesin */
.product-modal__excerpt:empty{ display:none; }

/* Diğer renkler – variant kutuları (Quick View) */

.product-modal__variants {
    margin: 0 0 14px;
}

.product-modal__variants-title {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #374151;
}

.product-modal__variants-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.product-modal__variant {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    background-color: #ffffff;
    padding: 4px;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease,
                transform 0.1s ease;
}

.product-modal__variant-thumb {
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 1 / 1;
}

.product-modal__variant-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-modal__variant-name {
    margin-top: 4px;
    font-size: 11px;
    color: #4b5563;
    text-align: center;
}

.product-modal__variant.is-active {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.12);
}
/* QUICK VIEW – other colors area */
.product-modal__variants {
    margin: 0 0 16px;
}

.product-modal__variants-title {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #374151;
}

.product-modal__variants-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.product-modal__options {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
}

.product-modal__option {
    min-width: 36px;
    padding: 3px 8px;
    font-size: 12px;
    border-radius: 999px;
    border: 1px solid #d1d5db;
    background-color: #ffffff;
    cursor: pointer;
}

.product-modal__option.is-active {
    border-color: var(--color-primary);
    background-color: rgba(37, 99, 235, 0.08);
}

/* Actions */

.product-modal__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.product-modal__qty {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid #d1d5db;
    overflow: hidden;
}

.product-modal__qty-btn {
    width: 32px;
    height: 36px;
    border: none;
    background-color: #f9fafb;
    cursor: pointer;
}

.product-modal__qty-input {
    width: 42px;
    height: 36px;
    border: none;
    text-align: center;
    font-size: 14px;
    outline: none;
}

.product-modal__add-to-cart {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 20px;
    border-radius: 999px;
    border: none;
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    cursor: pointer;
}

.product-modal__wish-btn {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid #d1d5db;
    background-color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.product-modal__wish-btn i {
    font-size: 18px;
    color: #6b7280;
}

/* Share */

.product-modal__share {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: #6b7280;
}

.product-modal__share-label {
    margin-right: 4px;
}

.product-modal__share-btn {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background-color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.product-modal__share-btn i {
    font-size: 15px;
    color: #4b5563;
}

/* Basit hover zoom (fallback) */

.js-image-zoom:hover img {
    transform: scale(1.4);
}

/* =========================================
   Home Tabs – Tab Product Cards (Porto benzeri)
   ========================================= */

.home-tabs__panel .tab-product-card {
    position: relative;
    background-color: #ffffff;
    padding: 18px 16px 22px;
    display: flex;
    flex-direction: column;
    height: 100%;
    border-right: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    flex: 0 0 230px; /* kart genişliği */
    border-radius: 0;
    box-shadow: none;
}

.home-tabs__panel .tab-product-card:last-child {
    border-right: none;
}

.home-tabs__panel .tab-product-card:hover {
    transform: translateY(-2px);
    box-shadow: none;
}

/* Medya (resim) alanı */

.home-tabs__panel .tab-product-card__media {
    position: relative;
    margin-bottom: 14px;
    min-height: 170px;
    align-items: center;
    justify-content: center;
    height: 190px;              /* sabit medya yüksekliği */
    overflow: hidden;           /* taşanı kes */
    display: block;
}

.home-tabs__panel .tab-product-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;          /* kartlar eşitlensin */
    display: block;
    transition: transform 0.2s ease;
}

.home-tabs__panel .tab-product-card:hover .tab-product-card__image {
    transform: scale(1.03);
}

/* Wishlist ikonu */

.home-tabs__panel .tab-product-card__wishlist {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: none;
    background-color: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.18);
}

.home-tabs__panel .tab-product-card__wishlist i {
    font-size: 16px;
    color: #9ca3af;
}

.home-tabs__panel .tab-product-card__wishlist:hover i {
    color: #ef4444;
}

/* Quick View – küçük ve altta */

.home-tabs__panel .tab-product-card__quick-view {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%) translateY(6px);
    padding: 5px 14px;
    border-radius: 999px;
    border: none;
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    white-space: nowrap;
}

.home-tabs__panel .tab-product-card:hover .tab-product-card__quick-view {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

/* Gövde / tipografi */

.home-tabs__panel .tab-product-card__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.home-tabs__panel .tab-product-card__category {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #9ca3af;
}

.home-tabs__panel .tab-product-card__name {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
}

.home-tabs__panel .tab-product-card__name a {
    color: #111827;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 40px;
}

.home-tabs__panel .tab-product-card__name a:hover {
    color: var(--color-primary, #2563eb);
}

.home-tabs__panel .tab-product-card__rating {
    font-size: 14px;
    color: #fbbf24;
    display: none;

}

/* Fiyatlar */

.home-tabs__panel .tab-product-card__prices {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: auto;
}

.home-tabs__panel .tab-product-card__price-old {
    font-size: 13px;
    color: #9ca3af;
    text-decoration: line-through;
}

.home-tabs__panel .tab-product-card__price {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
}

/* ====================================== */

/* Home tabs – ok ikonlarını kartların ortasına al */
.home-tabs__carousel {
    position: relative;
}

/* Ortaya hizalanmış sol / sağ oklar */
.home-tabs__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
}

/* Sol ok */
.home-tabs__arrow--prev {
    left: 0;
}

/* Sağ ok */
.home-tabs__arrow--next {
    right: 0;
}

/* Okların kartların üstüne binmemesi için iç track'e biraz iç boşluk verelim */
.home-tabs__track-wrapper {
    padding: 0 25px; /* gerekirse 32–48 arasında oynatabilirsin */
}



/* =========================================
   PRODUCT DETAIL PAGE
   ========================================= */

.product-detail {
    padding: 32px 0 60px;
    background-color: #ffffff;
}

.product-detail__breadcrumb {
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.product-detail__breadcrumb a {
    color: #6b7280;
    text-decoration: none;
}

.product-detail__breadcrumb a:hover {
    color: var(--color-primary, #2563eb);
}

.product-detail__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: flex-start;
}

@media (max-width: 991.98px) {
    .product-detail__layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }
}

/* Galeri */

.product-detail__gallery {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
}

.product-detail__image-main {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background-color: #f3f4f6;
}

.product-detail__image-main img {
    display: block;
    width: 100%;
    transform-origin: center center;
    transition: transform 0.25s ease;
}

.product-detail__badge-list {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.product-detail__badge-list--right {
    left: auto;
    right: 12px;
    align-items: flex-end;
}
.product-detail__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    color: #ffffff;
}

.product-detail__badge--primary {
    background-color: #16a34a;
}

.product-detail__badge--danger {
    background-color: #ef4444;
}

.product-detail__thumbs {
    margin-top: 10px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.product-detail__thumb {
    flex: 0 0 64px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid transparent;
    padding: 0;
    background: none;
    cursor: pointer;
}

.product-detail__thumb img {
    display: block;
    width: 100%;
}

.product-detail__thumb.is-active {
    border-color: var(--color-primary, #2563eb);
}

/* Sağ panel – bilgi */

.product-detail__info {
    padding: 8px 0;
}

.product-detail__title {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 8px;
    color: #111827;
}

.product-detail__rating-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.product-detail__stars {
    font-size: 16px;
    color: #fbbf24;
}

.product-detail__reviews-link {
    border: none;
    background: none;
    padding: 0;
    font-size: 13px;
    color: #6b7280;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-thickness: 1px;
}

.product-detail__meta-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 12px;
}

.product-detail__meta-item {
    display: flex;
    gap: 4px;
    align-items: baseline;
}

.product-detail__meta-label {
    font-weight: 500;
    color: #4b5563;
}

.product-detail__meta-availability--in-stock {
    color: #16a34a;
    font-weight: 500;
}

.product-detail__meta-link {
    color: var(--color-primary, #2563eb);
    text-decoration: none;
}

.product-detail__meta-link:hover {
    text-decoration: underline;
}

/* Fiyat */

.product-detail__price-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 14px;
}

.product-detail__price-current {
    font-size: 24px;
    font-weight: 700;
    color: #111827;
}

.product-detail__price-old {
    font-size: 14px;
    color: #9ca3af;
    text-decoration: line-through;
}
.product-detail__price-current--sale {
    color: #b91c1c;
}
.product-detail__price-badge {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    color: #b91c1c;
    background-color: #fee2e2;
}

/* Coverage satırı – input + açıklama */
.product-detail__coverage-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 4px;
}

.product-detail__coverage-hint {
    font-size: 11px;
    color: #6b7280;
}

.product-detail__coverage-hint strong {
    font-weight: 600;
}

/* Özet */

.product-detail__excerpt {
    font-size: 14px;
    color: #4b5563;
    margin-bottom: 16px;
    line-height: 1.6;
}

/* Options */

.product-detail__options-group {
    margin-bottom: 14px;
}

.product-detail__options-label {
    font-size: 13px;
    color: #374151;
    margin-bottom: 6px;
}

.product-detail__options-selected {
    font-weight: 600;
    margin-left: 4px;
}

.product-detail__options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.product-detail__option {
    min-width: 38px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid #d1d5db;
    background-color: #ffffff;
    font-size: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.product-detail__option.is-active {
    border-color: var(--color-primary, #2563eb);
    background-color: rgba(37, 99, 235, 0.06);
}

.product-detail__option-color-dot {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    border: 1px solid #d1d5db;
}

.product-detail__option-color-dot--black {
    background-color: #111827;
}

.product-detail__option-color-dot--silver {
    background-color: #e5e7eb;
}

.product-detail__option-color-dot--blue {
    background-color: #1d4ed8;
}

/* Qty + Buttons */

.product-detail__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.product-detail__qty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;

    /* Eski pill tasarımını nötrle */
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.product-detail__qty-label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: #4b5563;
    margin: 0;
}
.product-detail__qty-btn {
    width: 32px;
    height: 36px;
    border: none;
    background-color: #f9fafb;
    cursor: pointer;
}
.product-detail__qty-control {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.product-detail__qty-input {
    width: 90px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    padding: 6px 10px;
    font-size: 13px;
    text-align: right;
    line-height: 1.2;
}


.product-detail__add-to-cart,
.product-detail__buy-now {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 22px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    cursor: pointer;
}

.product-detail__add-to-cart {
    border: none;
    background-color: var(--color-primary, #2563eb);
    color: #ffffff;
}

.product-detail__add-to-cart i {
    font-size: 16px;
}

.product-detail__buy-now {
    border: 1px solid var(--color-primary, #2563eb);
    background-color: #ffffff;
    color: var(--color-primary, #2563eb);
}

.product-detail__wish-btn {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid #d1d5db;
    background-color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.product-detail__wish-btn i {
    font-size: 18px;
    color: #6b7280;
}

/* Meta + Share */

.product-detail__meta-extra {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 4px;
}

.product-detail__share {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 10px;
}

.product-detail__share-label {
    font-size: 13px;
    color: #6b7280;
    margin-right: 4px;
}

.product-detail__share-btn {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background-color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.product-detail__share-btn i {
    font-size: 15px;
    color: #4b5563;
}

/* Tabs */

.product-detail__tabs {
    margin-top: 40px;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
    padding: 18px 20px 22px;
}

.product-detail__tabs-header {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 16px;
}

.product-detail__tab-btn {
    padding: 8px 14px;
    border: none;
    background: none;
    border-bottom: 2px solid transparent;
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
}

.product-detail__tab-btn.is-active {
    color: var(--color-primary, #2563eb);
    border-color: var(--color-primary, #2563eb);
}

.product-detail__tab-panels {
    font-size: 14px;
    color: #4b5563;
}

.product-detail__tab-panel {
    display: none;
    padding-top: 4px;
}

.product-detail__tab-panel.is-active {
    display: block;
}

.product-detail__list {
    margin: 10px 0 0;
    padding-left: 18px;
}

.product-detail__list li {
    margin-bottom: 4px;
}

/* Additional info table */

.product-detail__info-table {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
}

.product-detail__info-row {
    display: flex;
    padding: 6px 0;
    border-bottom: 1px solid #e5e7eb;
    font-size: 14px;
}

.product-detail__info-label {
    flex: 0 0 160px;
    font-weight: 500;
    color: #4b5563;
}

.product-detail__info-value {
    flex: 1;
    color: #6b7280;
}


/* Moldings (Product detail tab) */
.product-detail__moldings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 14px;
}

.product-detail__molding-card {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
}

.product-detail__molding-media {
    aspect-ratio: 16 / 10;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-detail__molding-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-detail__molding-media--empty::after {
    content: "No Image";
    font-size: 12px;
    color: #6b7280;
}

.product-detail__molding-body {
    padding: 12px 12px 14px;
}

.product-detail__molding-title {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 4px;
}

.product-detail__molding-code {
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 8px;
}

.product-detail__molding-desc {
    font-size: 13px;
    color: #4b5563;
    line-height: 1.45;
}
/* Moldings – row/table style */
.product-detail__moldings-rows {
    display: flex;
    flex-direction: column;
}

.product-detail__molding-row {
    display: flex;
    gap: 22px;
    padding: 14px 0;
    border-bottom: 1px solid #e5e7eb;
}

.product-detail__molding-row:last-child {
    border-bottom: 0;
}

.product-detail__molding-thumb {
    width: 120px;           /* 110px -> 120px (isteğe bağlı) */
    flex: 0 0 120px;
    padding-right: 6px;     /* metinden biraz ayırır */
}

.product-detail__molding-thumb img {
    width: 100%;
    height: 78px;
    object-fit: contain;
    background: #f3f4f6;
    border-radius: 10px;
    display: block;
}

.product-detail__molding-thumb--empty {
    width: 100%;
    height: 78px;
    background: #f3f4f6;
    border-radius: 10px;
}

.product-detail__molding-text {
    flex: 1;
    min-width: 0;
}

.product-detail__molding-title {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
}

.product-detail__molding-code {
    font-size: 12px;
    color: #6b7280;
    margin-top: 4px;
}

.product-detail__molding-desc {
    font-size: 13px;
    color: #4b5563;
    margin-top: 8px;
    line-height: 1.45;
}

/* Mobile */
@media (max-width: 576px) {
    .product-detail__molding-row {
        flex-direction: column;
    }
    .product-detail__molding-thumb {
        width: 100%;
        flex: 0 0 auto;
    }
    .product-detail__molding-thumb img,
    .product-detail__molding-thumb--empty {
        height: 120px;
    }
}

/* Reviews */

.product-detail__reviews-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.product-detail__reviews-score {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.product-detail__reviews-score-number {
    font-size: 24px;
    font-weight: 700;
    color: #111827;
}

.product-detail__reviews-count {
    font-size: 13px;
    color: #6b7280;
}

.product-detail__write-review {
    border-radius: 999px;
    border: 1px solid #d1d5db;
    background-color: #ffffff;
    padding: 8px 16px;
    font-size: 13px;
    cursor: pointer;
}

.product-detail__reviews-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.product-detail__review-item {
    padding: 10px 0;
    border-bottom: 1px solid #e5e7eb;
}

.product-detail__review-header {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.product-detail__review-author {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
}

.product-detail__review-date {
    font-size: 12px;
    color: #9ca3af;
}

.product-detail__review-text {
    font-size: 14px;
    color: #4b5563;
    margin: 0;
}

/* =========================================
   Product detail – color image swatches
   ========================================= */

/* Genel color option'ı kare haline getiriyoruz */
.product-detail__option.product-detail__option--color {
    position: relative;
    padding: 0;
    width: 56px;
    height: 56px;
    border-radius: 8px;
    border: 2px solid transparent;
    background: none;
    overflow: hidden;
    cursor: pointer;
}

/* İçteki küçük resim */
.product-detail__color-thumb {
    display: block;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}



/* Seçili renk etrafında border */
.product-detail__option--color.is-active {
    border-color: var(--color-primary, #2563eb);
}

/* Renk kareleri yan yana güzel dursun */
.product-detail__options[data-option-group="color"] {
    gap: 8px;
}

/* =========================================
   RELATED PRODUCTS – SLIDER
   ========================================= */

.product-related {
    padding: 32px 0 60px;
    background-color: #ffffff;
}

.product-related__header {
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.product-related__title {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #111827;
    margin: 0;
}

/* Carousel yapısı */

.product-related__carousel {
    position: relative;
}

/* Track wrapper: yatay scroll */
.product-related__track-wrapper {
    position: relative;
    z-index: 1;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    padding: 0 25px;
    margin: 0 -25px; /* oklar için dış boşluk */
    -webkit-overflow-scrolling: touch;
}

/* Track: kartlar yan yana */
.product-related__track {
    display: flex;
    gap: 24px;
}

/* Kartlar – min genişlik: 4 tane sığacak şekilde */
.product-related-card {
    flex: 0 0 260px;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Hover efekti varsa bile slider'ı bozmasın */
.product-related-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
}

/* Media */

.product-related-card__media {
    position: relative;
    background-color: #f3f4f6;
}

.product-related-card__image-link,
.product-related-card__image {
    display: block;
    width: 100%;
}

.product-related-card__image {
    object-fit: cover;
}

/* Badge'ler */
.product-related-card__badges {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.product-related-card__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    color: #ffffff;
}

.product-related-card__badge--primary {
    background-color: #16a34a;
}

.product-related-card__badge--danger {
    background-color: #ef4444;
}

/* Body */

.product-related-card__body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.product-related-card__category {
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #9ca3af;
    margin-bottom: 4px;
}

.product-related-card__name {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 4px;
    color: #111827;
}

.product-related-card__name a {
    color: inherit;
    text-decoration: none;
}

.product-related-card__name a:hover {
    color: var(--color-primary, #2563eb);
}

.product-related-card__rating {
    font-size: 14px;
    color: #fbbf24;
    margin-bottom: 4px;
}

/* Fiyat */
.product-related-card__prices {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 8px;
}

.product-related-card__price-old {
    font-size: 13px;
    color: #9ca3af;
    text-decoration: line-through;
}

.product-related-card__price {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
}

/* Buton */
.product-related-card__btn {
    margin-top: auto;
    width: 100%;
    border-radius: 999px;
    border: 1px solid #d1d5db;
    background-color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 9px 12px;
    cursor: pointer;
text-align: center;
}

.product-related-card__btn:hover {
    border-color: var(--color-primary, #2563eb);
    color: var(--color-primary, #2563eb);
}

/* Ok butonları */

.product-related__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: none;
    background-color: #ffffff;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3; /* track'in üstünde */
}

.product-related__arrow i {
    font-size: 18px;
    color: #111827;
}

.product-related__arrow--prev {
    left: 0;
}

.product-related__arrow--next {
    right: 0;
}

/* Product detail – CTA buttons under share */

.product-detail__cta-row {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.product-detail__cta-btn {
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
}

/* Ortak ikon stili – küçük ve kibar */
.product-detail__cta-icon {
    font-size: 15px;
    line-height: 1;
}

/* Koyu buton – Ask for Quote */
.product-detail__cta-btn--quote{
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  border-color: var(--color-primary);
}

/* Açık buton – How Many Do You Need? / Flooring Calculator */
.product-detail__cta-btn--calculator{
  background-color: #ffffff;
  color: var(--color-primary-ink);
  border-color: var(--color-primary-ink);
}

/* İki satırlı text bloğu */
.product-detail__cta-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.25;
}

/* Üst satır: daha hafif ve Title Case */
.product-detail__cta-main {
    font-size: 11.5px;
    font-weight: 500;      /* daha zayıf */
    letter-spacing: 0.04em;
    text-transform: none;  /* Title Case zaten HTML'de */
}

/* Alt satır: daha da hafif, açıklama */
.product-detail__cta-sub {
    font-size: 11px;
    font-weight: 400;
    color: #6b7280;
    letter-spacing: 0.02em;
    text-transform: none;
}

/* Hover – tersine dönsünler ama kibar kalsınlar */
.product-detail__cta-btn--quote:hover{
  background-color: #ffffff;
  color: var(--color-primary-ink);
  border-color: var(--color-primary-ink);
}

.product-detail__cta-btn--calculator:hover{
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  border-color: var(--color-primary);
}

.product-detail__cta-btn--calculator:hover .product-detail__cta-sub{
  color: rgba(255,255,255,.85);
}
/* Product detail – actions layout */
.product-detail__actions {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.product-detail__qty-label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: #4b5563;
    margin-bottom: 2px;
}

.product-detail__qty-input {
    width: 90px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    padding: 7px 9px;
    font-size: 13px;
    text-align: right;
}

/* Yeni CTA butonu – başlangıçta gizli */
.product-detail__quote-btn {
    display: none; /* hesaplama yokken görünmesin */
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 999px;
    border: 1px solid var(--color-primary);
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.product-detail__quote-btn.is-visible {
    display: inline-flex;
}

.product-detail__quote-btn:hover:not(:disabled) {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

.product-detail__quote-btn:disabled {
    opacity: 0.55;
    cursor: default;
}

@media (max-width: 575.98px) {
    .product-detail__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .product-detail__quote-btn.is-visible {
        width: 100%;
        justify-content: center;
    }
}


/* =========================================
   ASK FOR QUOTE MODAL
   ========================================= */

.quote-modal {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease-out;
}

.quote-modal--open {
    opacity: 1;
    pointer-events: auto;
}

.quote-modal__backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(15, 23, 42, 0.55);
}

.quote-modal__dialog {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 640px;
    margin: 16px;
    background-color: #ffffff;
    border-radius: 16px;
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.25);
    padding: 22px 22px 20px;
}

@media (max-width: 575.98px) {
    .quote-modal__dialog {
        margin: 12px;
        padding: 18px 16px 18px;
        border-radius: 14px;
    }
}

.quote-modal__close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: none;
    background-color: #f3f4f6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.quote-modal__close i {
    font-size: 18px;
    color: #4b5563;
}

.quote-modal__content {
    margin-top: 6px;
}

.quote-modal__title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 4px;
    color: #111827;
}

.quote-modal__subtitle {
    font-size: 13px;
    color: #6b7280;
    margin: 0 0 14px;
}

/* Form layout */

.quote-modal__form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.quote-modal__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
}

@media (max-width: 575.98px) {
    .quote-modal__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.quote-modal__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.quote-modal__field--full {
    grid-column: 1 / -1;
}

.quote-modal__label {
    font-size: 12px;
    font-weight: 500;
    color: #374151;
}

.quote-modal__input,
.quote-modal__select,
.quote-modal__textarea {
    width: 100%;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    padding: 7px 9px;
    font-size: 13px;
    color: #111827;
    outline: none;
    background-color: #ffffff;
}

.quote-modal__input:focus,
.quote-modal__select:focus,
.quote-modal__textarea:focus {
    border-color: var(--color-primary, #2563eb);
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.15);
}

.quote-modal__textarea {
    min-height: 90px;
    resize: vertical;
}

/* Consent */

.quote-modal__consent {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid #e5e7eb;
}

.quote-modal__checkbox {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    color: #4b5563;
}

.quote-modal__checkbox input[type="checkbox"] {
    margin-top: 2px;
}

.quote-modal__consent-note {
    font-size: 11px;
    color: #9ca3af;
    margin: 6px 0 0;
}

/* Actions */

.quote-modal__actions {
    margin-top: 12px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.quote-modal__btn {
    border-radius: 999px;
    padding: 7px 16px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid transparent;
    cursor: pointer;
}

.quote-modal__btn--secondary {
    background-color: #ffffff;
    color: #111827;
    border-color: #d1d5db;
}

.quote-modal__btn--secondary:hover {
    border-color: #9ca3af;
}

.quote-modal__btn--primary {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    border-color: var(--color-primary);
}

.quote-modal__btn--primary:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

@media (max-width: 575.98px) {
    .quote-modal__actions {
        flex-direction: row-reverse;
        justify-content: space-between;
    }

    .quote-modal__btn {
        flex: 1;
        text-align: center;
    }
}
/* Quote modal – quantity (How much flooring do you need?) */

.quote-modal__quantity-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

.quote-modal__quantity-input {
    max-width: 120px;
}

/* Box / Sqft toggle benzeri görünüm */
.quote-modal__quantity-units {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px;
    border-radius: 999px;
    background-color: #f3f4f6;
}

.quote-modal__quantity-unit {
    position: relative;
    font-size: 11px;
    cursor: pointer;
}

.quote-modal__quantity-unit input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.quote-modal__quantity-unit span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 999px;
    color: #4b5563;
}

/* Seçili unit için aktif görünüm */
.quote-modal__quantity-unit input[type="radio"]:checked + span {
    background-color: #ffffff;
    color: #111827;
    box-shadow: 0 0 0 1px #d1d5db;
}

.quote-modal__quantity-hint {
    margin-top: 4px;
    font-size: 11px;
    color: #9ca3af;
}

@media (max-width: 575.98px) {
    .quote-modal__quantity-row {
        flex-direction: column;
        align-items: stretch;
    }

    .quote-modal__quantity-input {
        max-width: 100%;
    }

    .quote-modal__quantity-units {
        justify-content: center;
    }
}


/* =========================================
   FLOORING CALCULATOR MODAL
   ========================================= */

.calc-modal {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease-out;
}

.calc-modal--open {
    opacity: 1;
    pointer-events: auto;
}

.calc-modal__backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(15, 23, 42, 0.55);
}

.calc-modal__dialog {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 640px;
    margin: 16px;
    background-color: #ffffff;
    border-radius: 16px;
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.25);
    padding: 22px 22px 20px;
}

@media (max-width: 575.98px) {
    .calc-modal__dialog {
        margin: 12px;
        padding: 18px 16px 18px;
        border-radius: 14px;
    }
}

.calc-modal__close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: none;
    background-color: #f3f4f6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.calc-modal__close i {
    font-size: 18px;
    color: #4b5563;
}

.calc-modal__content {
    margin-top: 6px;
}

.calc-modal__title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 4px;
    color: #111827;
}

.calc-modal__subtitle {
    font-size: 13px;
    color: #6b7280;
    margin: 0 0 14px;
}

/* Form layout */

.calc-modal__form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Oda / alan satırları */

.calc-modal__rooms {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.calc-modal__room {
    padding: 10px 12px;
    border-radius: 10px;
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
}

.calc-modal__room-header {
    margin-bottom: 6px;
}

.calc-modal__room-title {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6b7280;
}

.calc-modal__room-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
}

@media (max-width: 575.98px) {
    .calc-modal__room-fields {
        grid-template-columns: minmax(0, 1fr);
    }
}

.calc-modal__field {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.calc-modal__label {
    font-size: 12px;
    font-weight: 500;
    color: #374151;
}

.calc-modal__input {
    width: 100%;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    padding: 7px 9px;
    font-size: 13px;
    color: #111827;
    outline: none;
    background-color: #ffffff;
}

.calc-modal__input--number {
    text-align: right;
}

.calc-modal__input:focus {
    border-color: var(--color-primary, #2563eb);
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.15);
}

/* Add area butonu */

.calc-modal__add-area {
    align-self: flex-start;
    margin-top: 2px;
    border-radius: 999px;
    border: 1px dashed #9ca3af;
    background-color: #ffffff;
    font-size: 12px;
    font-weight: 500;
    padding: 6px 12px;
    cursor: pointer;
    color: #374151;
}

.calc-modal__add-area:hover {
    border-style: solid;
}

/* Özet alanları */

/* Özet alanları – sağa hizalı, dar inputlar */
.calc-modal__summary {
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.calc-modal__summary-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.calc-modal__summary-row .calc-modal__label {
    font-size: 12px;
    font-weight: 500;
    color: #374151;
}
.product-detail__calc-totalprice {
    display: block;        /* Tam satır kaplasın */
    margin-top: 8px;
    font-size: 15px;       /* Diğer satırlardan belirgin şekilde büyük */
    font-weight: 700;      /* Daha kalın */
    letter-spacing: 0.01em;
}


/* Rooms Total, Waste, Total inputları – dar ve sağa yaslı */
.calc-modal__input--summary,
.js-calc-waste {
    width: 130px;
    text-align: right;
    margin-left: auto;
}

@media (max-width: 575.98px) {
    .calc-modal__summary {
        align-items: stretch;
    }

    .calc-modal__summary-row {
        flex-direction: column;
        align-items: stretch;
    }

    .calc-modal__input--summary,
    .js-calc-waste {
        width: 100%;
        margin-left: 0;
    }
}

/* Footer – Cancel & Update Product butonları */

.calc-modal__footer {
    margin-top: 12px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.calc-modal__btn {
    border-radius: 999px;
    padding: 7px 16px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid transparent;
    cursor: pointer;
}

.calc-modal__btn--secondary {
    background-color: #ffffff;
    color: #111827;
    border-color: #d1d5db;
}

.calc-modal__btn--secondary:hover {
    border-color: #9ca3af;
}

.calc-modal__btn--primary {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    border-color: var(--color-primary);
}

.calc-modal__btn--primary:hover {
    background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

@media (max-width: 575.98px) {
    .calc-modal__footer {
        flex-direction: row-reverse;
        justify-content: space-between;
    }

    .calc-modal__btn {
        flex: 1;
        text-align: center;
    }
}


/* Product detail – Coverage / Enter your sqft */

.product-detail__coverage {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 260px;
}

.product-detail__coverage-label {
    font-size: 12px;
    font-weight: 500;
    color: #374151;
}

.product-detail__sqft-input {
    border-radius: 8px;
    border: 1px solid #d1d5db;
    padding: 7px 9px;
    font-size: 13px;
    color: #111827;
    text-align: right;
}

.product-detail__sqft-input:focus {
    border-color: var(--color-primary, #2563eb);
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.15);
    outline: none;
}

.product-detail__coverage-hint {
    font-size: 11px;
    color: #9ca3af;
}


/* Product detail – sqft info (Box Coverage / Total Required) */

.product-detail__calc-summary {
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.5;
    color: #e11d48; /* tatlı pembe-kırmızı */
    display: none;  /* JS varsa gösterilecek */
}

.product-detail__calc-summary.is-visible {
    display: block;
}

.product-detail__calc-line {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.product-detail__calc-label {
    font-weight: 600;
}

.product-detail__calc-value {
    font-weight: 400;
}





/* ===========================
   RESPONSIVE
   =========================== */
@media (max-width: 1199.98px) {
    .home-featured__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 991.98px) {
    .hero-slide {
        gap: 2rem;
        min-height: 0;
    }
    .home-categories__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .home-featured__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .home-features__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .home-blog__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .product-modal__content {
        grid-template-columns: minmax(0, 1fr);
        padding: 18px 18px 22px;
    }

    .product-modal__dialog {
        max-height: 100vh;
        border-radius: 0;
    }
}




@media (max-width: 575.98px) {
    .home-features__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .home-feature {
        min-height: 0;
    }
    .home-categories__grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .home-featured__grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .home-blog__grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .product-modal__actions {
        flex-wrap: wrap;
    }

    .product-modal__add-to-cart {
        flex: 1;
        justify-content: center;
    }
    .product-detail {
        padding: 20px 0 40px;
    }
    .product-detail__tabs {
        padding: 14px 14px 18px;
    }

    .product-detail__actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .product-detail__add-to-cart,
    .product-detail__buy-now {
        width: 100%;
        justify-content: center;
    }
    .product-related__arrow {
        display: none;
    }
    .product-detail__cta-row {
        flex-direction: column;
        align-items: stretch;
    }

    .product-detail__cta-btn {
        width: 100%;
        justify-content: center;
    }

    .product-detail__cta-text {
        align-items: center;
    }
}
/* ---------------------------------------------
   Card text rhythm
---------------------------------------------- */
.tab-product-card__title,
.home-blog__title,
.home-feature__title{
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.tab-product-card__desc,
.home-blog__excerpt,
.home-feature__desc{
  line-height: 1.6;
  color: rgba(71, 85, 105, .95);
}
/* ==================================================
   PREMIUM CARD SYSTEM (HOME + LISTING)
   ================================================== */

/* Base card look */
.product-card,
.tab-product-card,
.home-feature,
.home-category-card,
.home-blog-card{
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  will-change: transform;
}

/* Hover + keyboard focus */
.product-card:hover,
.tab-product-card:hover,
.home-feature:hover,
.home-category-card:hover,
.home-blog-card:hover,
.product-card:focus-within,
.tab-product-card:focus-within,
.home-feature:focus-within,
.home-category-card:focus-within,
.home-blog-card:focus-within{
  transform: translateY(-3px);
  box-shadow: var(--card-shadow-hover);
  border-color: var(--card-border-hover);
}

/* Fix: tab-product-card hover'da shadow'ı "none" yapıyordu — premium değil */
.tab-product-card:hover{
  box-shadow: var(--card-shadow-hover) !important;
}

/* Product image micro-zoom */
.product-card__image,
.tab-product-card__image{
  transition: transform .35s ease;
}

.product-card:hover .product-card__image,
.tab-product-card:hover .tab-product-card__image{
  transform: scale(1.04);
}
/* ==================================================
   CARD CONTENT RHYTHM (premium typography + spacing)
   ================================================== */

:root{
  --card-pad: 1rem;
  --card-gap: .55rem;
}

/* Card iç padding standardı (varsa mevcut padding'i override eder) */
.product-card__body,
.tab-product-card__body,
.home-blog__body{
  padding: var(--card-pad) !important;
}

/* Başlıklar: tok, 2 satır clamp */
.product-card__title,
.tab-product-card__title,
.home-blog__title{
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0 0 var(--card-gap, .55rem) 0;

  display: -webkit-box;
  -webkit-box-orient: vertical;

  line-clamp: 2;          /* standard (lint için) */
  -webkit-line-clamp: 2;  /* webkit fallback */

  overflow: hidden;
}


/* Açıklama: daha soft, 2 satır clamp */
.product-card__desc,
.tab-product-card__desc,
.home-blog__excerpt{
  color: rgba(71, 85, 105, .95);
  line-height: 1.55;
  margin: 0;

  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Meta / küçük yazılar (SKU vb.) */
.product-card__meta,
.tab-product-card__meta{
  color: rgba(71, 85, 105, .85);
  font-size: .94em;
  line-height: 1.45;
}

/* Fiyat alanı: hizalama + emphasis */
.product-card__price,
.tab-product-card__price{
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Quick view chip daha premium */
.tab-product-card__quick-view{
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(15,23,42,.10);
  transition: transform .16s ease, opacity .16s ease;
}

.tab-product-card__quick-view:hover{
  transform: translateY(-1px);
}

/* Home tab product cards: make image area consistent */
.tab-product-card__media{
  aspect-ratio: 4 / 3;
  background: #f8fafc;
  border-radius: calc(var(--card-radius) - 2px);
  overflow: hidden;
}

.tab-product-card__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* ==================================================
   PRODUCT DETAIL GALLERY — 478/112 SPEC (NO SHADOW, SHARP)
   ================================================== */

.product-detail__gallery{
  /* beyaz alt alanı kaldır */
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;

  /* tam köşeli */
  border-radius: 0 !important;

  /* ölçüler */
  width: 478px;
  height: 600px;
}

/* büyük resim 478x478 */
.product-detail__image-main{
  width: 478px;
  height: 478px;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #f3f4f6;

  /* zoom için */
  overflow: hidden;
}

.product-detail__image-main img{
  width: 100%;
  height: 100%;
  object-fit: cover; /* istersen contain yaparız */
  display: block;
}

/* thumbs alanı: 10px boşluk + 478 genişlik */
.product-detail__thumbs-wrap{
  width: 478px;
  height: 112px;
  margin-top: 10px;
  position: relative;
}

/* thumbs track: 4’lü dizilim + overflow hidden */
.product-detail__thumbs{
  margin-top: 0 !important;
  width: 478px;
  height: 112px;

  display: flex;
  gap: 10px;
  flex-wrap: nowrap;

  overflow-x: auto;   /* oklarla scroll */
  overflow-y: hidden;

  /* scrollbar gizle */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.product-detail__thumbs::-webkit-scrollbar{
  display: none;
}

/* thumb: 112x112, köşesiz */
.product-detail__thumb{
  flex: 0 0 112px !important;
  width: 112px !important;
  height: 112px !important;

  border-radius: 0 !important;
  overflow: hidden;
  padding: 0 !important;

  border: 1px solid rgba(148,163,184,.35);
  box-sizing: border-box;
  background: #fff;
}

/* aktif thumb: size bozmadan outline */
.product-detail__thumb.is-active{
  border-color: transparent !important;
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.product-detail__thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* oklar (sadece gerektiğinde JS gösterecek) */
.product-detail__thumbs-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;

  border-radius: 0;         /* köşesiz istedin */
  border: 1px solid rgba(15,23,42,.14);
  background: #fff;
  color: #111827;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  box-shadow: none;
  cursor: pointer;
  z-index: 2;
}

.product-detail__thumbs-nav--prev{ left: -42px; }
.product-detail__thumbs-nav--next{ right: -42px; }

.product-detail__thumbs-nav.is-disabled{
  opacity: .35;
  pointer-events: none;
}
/* Product detail: gallery <-> info spacing */
.product-detail__layout{
  gap: 50px !important;
}


/* Product detail: gallery <-> info arası boşluk */
.product-detail__layout{
  gap: 50px !important;
  column-gap: 50px !important;
}
.product-detail__wrap,
.product-detail__inner,
.product-detail__grid,
.product-detail__main{
  gap: 50px !important;
  column-gap: 50px !important;
}
/* =========================================================
   PRODUCT DETAIL – Gallery exact sizing (478/112) + 20px gap
   Put this at the VERY END of home.css
   ========================================================= */

.product-detail__layout{
  /* solda sabit 478px galeri, sağda içerik */
  grid-template-columns: 478px minmax(0, 1fr) !important;
  gap: 50px !important;
}

/* Beyaz kart alanını kaldır: padding/radius/shadow sıfır */
.product-detail__gallery{
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  width: 478px;
  max-width: 100%;
}

/* Büyük resim: 478x478, tam köşeli */
.product-detail__image-main{
  width: 478px;
  height: 478px;
  max-width: 100%;

  border-radius: 0 !important;
  overflow: hidden; /* zoom için şart */
  background: #f3f4f6;
}

/* img tam doldursun */
.product-detail__image-main img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Thumbs satırı: 10px boşluk, 4 adet 112 = 478 */
.product-detail__thumbs{
  margin-top: 10px;

  width: 478px;
  max-width: 100%;
  height: 112px;

  display: flex;
  flex-wrap: nowrap !important;
  gap: 10px !important;

  overflow-x: auto;     /* fazla varsa kaydırılabilir */
  overflow-y: hidden;
  scroll-behavior: smooth;

  /* scrollbar gizle */
  scrollbar-width: none;         /* Firefox */
  -ms-overflow-style: none;      /* IE/Edge legacy */
}
.product-detail__thumbs::-webkit-scrollbar{ display:none; }

.product-detail__thumb{
  flex: 0 0 112px !important;
  width: 112px;
  height: 112px;

  border-radius: 0 !important;
  overflow: hidden;
}

.product-detail__thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mobilde sabit px yerine esne */
@media (max-width: 991.98px){
  .product-detail .product-detail__layout{
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
  }

  .product-detail .product-detail__gallery,
  .product-detail .product-detail__thumbs{
    width: 100% !important;
  }

  .product-detail .product-detail__image-main{
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
  }
}


/* ==================================================
   HOME (Featured Products) – Image ile Brand Bar arasındaki gap'i kaldır
   ================================================== */

/* 1) Brand bar, body’nin padding’i yüzünden aşağı itiliyor.
      Home Featured’ta body padding’ini üstten sıfırla. */
.home-featured .product-card__body{
  padding: 0 0 1rem 0 !important; /* üst:0, yanlar:0, alt:1rem */
}

/* 2) Manufacturer bar: tam yapışık + dikey ortalı + full-width */
.home-featured .product-card__brand-bar{
  display: flex;
  align-items: center;
  justify-content: flex-start;

  background: #f3f4f6;
  color: #111827;

  padding: 0 14px;
  min-height: 44px;

  width: 100%;
  margin: 0;
  box-sizing: border-box;

  line-height: 1;

  /* Subpixel rounding yüzünden 1px “ince çizgi” kalıyorsa kesin yok et */
  margin-top: -1px;
}

/* 3) Body padding’i kaldırdığımız için, metinlerin yan boşluğunu geri ver */
.home-featured .product-card__name,
.home-featured .product-card__price{
  padding: 0 1rem;
}

/* 4) Brand bar ile ürün adı arasına kontrollü boşluk */
.home-featured .product-card__name{
  margin-top: .65rem;
}

/* -------------------------------------------------
   HOME - Selected Products cards: fixed image + equal height
   ------------------------------------------------- */

/* Track içindeki item’lar esnesin (eşit yükseklik) */
.home-tabs__panel .home-tabs__track{
  align-items: stretch;
}

/* Kart = flex column, yükseklik sabitlenebilir */
.home-tabs__panel .tab-product-card{
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 420px; /* gerekirse 400/440 oynarız */
}

/* Görsel alanı: tam dolsun */
.home-tabs__panel .tab-product-card__media{
  position: relative;
  height: 240px;          /* görsel alanı sabit */
  width: 100%;
  padding: 0 !important;
  margin: 0 0 14px 0;
  overflow: hidden;
}

/* Link de 100% alan kaplasın */
.home-tabs__panel .tab-product-card__image-link{
  display: block;
  width: 100%;
  height: 100%;
}

/* Img kesin 100% dolsun (cover) */
.home-tabs__panel img.tab-product-card__image{
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
}

/* İçerik alanı: fiyat en altta sabit kalsın */
.home-tabs__panel .tab-product-card__body{
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Başlık 2 satır sabit */
.home-tabs__panel .tab-product-card__name a{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 44px;
}

/* Fiyat alanı yoksa da yer ayırsın (kartlar eşitlensin) */
.home-tabs__panel .tab-product-card__prices{
  margin-top: auto;
  min-height: 28px;
}
/* --- Selected Products: image height smaller + equal card heights --- */

/* Foto alanı daha kısa */
.home-tabs__panel .tab-product-card__media{
  height: 200px; /* 240 -> 200 (istersen 190 da olur) */
}

/* Kartların tamamı aynı min yükseklikte kalsın */
.home-tabs__panel .tab-product-card{
  min-height: 400px; /* 420 -> 400 (gerekirse 390/410) */
}

/* Fiyat olmayan kartlar da aynı yüksekliği korusun:
   prices yoksa pseudo-element ile boş yer ayır */
.home-tabs__panel .tab-product-card__prices{
  min-height: 28px; /* zaten vardı; koruyoruz */
}

.home-tabs__panel .tab-product-card__prices:empty::before{
  content: "\00a0"; /* non-breaking space */
  display: block;
  height: 28px;
}
/* Selected Products – strict equal cards + shorter image */
.home-tabs__panel .tab-product-card{
  display: flex;
  flex-direction: column;
  height: 395px;            /* hepsi aynı boy */
}

/* Foto alanı daha kısa */
.home-tabs__panel .tab-product-card__media{
  height: 190px;            /* 200 yerine 190 yaptım; istersen 180 */
  overflow: hidden;
  display: block;           /* eski flex-center davranışını iptal eder */
  margin-bottom: 14px;
}

.home-tabs__panel .tab-product-card__image-link{
  display: block;
  width: 100%;
  height: 100%;
}

.home-tabs__panel .tab-product-card__image{
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  display: block;
}

/* Body tüm boşluğu alsın, fiyat satırı en alta insin */
.home-tabs__panel .tab-product-card__body{
  flex: 1;
  display: flex;
  flex-direction: column;
}

.home-tabs__panel .tab-product-card__prices{
  margin-top: auto;
  min-height: 28px;         /* fiyat yoksa da eşit kalsın */
}
/* === HOME CONTENT BLOCKS (Section Builder) === */
.home-block {
  background: var(--hb-bg, var(--color-surface-2, #f3f4f6));
  color: var(--hb-text, var(--color-text, #111827));
  padding: 72px 0;
}

.home-block__inner {
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}

.home-block__eyebrow {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted, #6b7280);
  margin-bottom: 14px;
}

.home-block__title {
  margin: 0 0 14px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.12;
}

.home-block__lead {
  margin: 0 auto 22px;
  max-width: 720px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-muted, #6b7280);
}

.home-block__bullets {
  margin: 0 auto 26px;
  padding: 0;
  max-width: 720px;
  list-style: none;
  text-align: left;
  display: grid;
  gap: 10px;
}

.home-block__bullets li {
  position: relative;
  padding-left: 18px;
  color: var(--color-text, #111827);
}

.home-block__bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 2px;
  background: var(--color-primary, #2563eb);
}

.home-block__actions {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.home-block__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border: 1px solid var(--color-border, rgba(17,24,39,.16));
  text-decoration: none;
  font-weight: 600;
  background: transparent;
  color: inherit;

  /* themev2 hedefinle uyum: radius yok */
  border-radius: 0;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.home-block__btn--primary {
  background: var(--color-primary, #2563eb);
  border-color: var(--color-primary, #2563eb);
  color: var(--color-on-primary, #fff);
}

.home-block__btn--primary:hover {
  filter: brightness(0.96);
}

.home-block__btn--ghost:hover {
  border-color: var(--color-primary, #2563eb);
}
/* Content Blocks: butonları home-featured__more-link standardına çek */
.home-block .home-block__btn.home-featured__more-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.8rem;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  font-size: 0.85rem;
  font-weight: 500;
  color: #374151;
  background-color: #ffffff;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background-color 0.15s ease, color 0.15s ease,
              box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.home-block .home-block__btn.home-featured__more-link:hover {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  border-color: var(--color-primary);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.35);
  transform: translateY(-1px);
}

/* Zemin AÇIK: primary default koyu, hover açık (tam tersi) */
.home-block--bg-light .home-block__btn--primary.home-featured__more-link {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  border-color: var(--color-primary);
}
.home-block--bg-light .home-block__btn--primary.home-featured__more-link:hover {
  background-color: #ffffff;
  color: #374151;
  border-color: #d1d5db;
}

/* Zemin KOYU: secondary (ghost) outline açık kalsın; hover koyuya dönsün */
.home-block--bg-dark .home-block__btn--ghost.home-featured__more-link {
  background-color: transparent;
  color: rgba(255,255,255,.92);
  border-color: rgba(255,255,255,.30);
}
.home-block--bg-dark .home-block__btn--ghost.home-featured__more-link:hover {
  border-color: var(--color-primary);
}
/* Content Blocks: background + text contrast auto */

.home-block {
  background-color: var(--hb-bg, transparent);
  color: var(--hb-text, var(--color-text, #0f172a));
}

/* Title / eyebrow / lead / bullets */
.home-block__title {
  color: var(--hb-text, var(--color-text, #0f172a));
}

.home-block__eyebrow,
.home-block__lead,
.home-block__bullets,
.home-block__bullets li {
  color: var(--hb-text-muted, var(--color-muted, rgba(15, 23, 42, 0.74)));
}

/* Dark background => light text */
.home-block--bg-dark {
  --hb-text: rgba(255, 255, 255, 0.95);
  --hb-text-muted: rgba(255, 255, 255, 0.78);
}

.home-block--bg-dark .home-block__title { color: var(--hb-text); }

/* Light background => readable dark-muted (sende çok soluk kalıyordu) */
.home-block--bg-light {
  --hb-text: var(--color-text, #0f172a);
  --hb-text-muted: rgba(15, 23, 42, 0.74);
}
/* =========================================================
   PRODUCT DETAIL – 5 thumbnails visible (600/112) OVERRIDE
   Put this at the VERY END of home.css
   ========================================================= */

.product-detail__layout{
  grid-template-columns: 600px minmax(0, 1fr) !important;
}

/* Galeri genişliği */
.product-detail__gallery{
  width: 600px !important;
  max-width: 100% !important;
}

/* Büyük resim: genişlesin (kare) */
.product-detail__image-main{
  width: 600px !important;
  height: 600px !important;
  max-width: 100% !important;
}

/* Thumbs satırı: 5 adet 112px + 4 gap(10px) = 600px */
.product-detail__thumbs,
.product-detail__thumbs-wrap{
  width: 600px !important;
  max-width: 100% !important;
  height: 112px !important;
}

.product-detail__thumbs{
  gap: 10px !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

.product-detail__thumb{
  flex: 0 0 112px !important;
  width: 112px !important;
  height: 112px !important;
}
/* =========================================================
   FIX: Product detail gallery height must be AUTO
   (prevents thumbs overlapping tabs/description)
   ========================================================= */

.product-detail__gallery{
  height: auto !important;
  overflow: visible !important;
}
/* ==================================================
   RELATED PRODUCTS – FIXED IMAGE HEIGHT + THEME BUTTON
   ================================================== */

/* İstersen burayı da beyaz yap (site genel hedefinle uyumlu) */
.product-related{
  background-color: #ffffff !important;
}

/* Görsel alanı sabitle (tüm kartlarda aynı yükseklik) */
.product-related-card__media{
  height: 280px;            /* ihtiyaca göre: 260 / 280 / 300 */
  background-color: #f3f4f6;
}

.product-related-card__image-link{
  height: 100%;
}

.product-related-card__image{
  height: 100%;
  object-fit: cover;
}

/* Buton için sadece yerleşim: stil .btn’den gelsin */
.product-related-card__btn{
  margin-top: auto;
}
/* ==================================================
   RELATED PRODUCTS – fixed text/body height
   ================================================== */

.product-related-card{
  display: flex;
  flex-direction: column;
}

/* Alt yazı alanını sabitle */
.product-related-card__body{
  display: flex;
  flex-direction: column;
  height: 220px;          /* ihtiyaca göre: 210 / 220 / 235 */
}

/* Kategori/etiket satırı (üstteki ince yazı) max 2 satır */
.product-related-card__category{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: calc(2 * 1.2em);  /* 2 satır için yer ayır */
}

/* Ürün adı max 2 satır */
.product-related-card__name a{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: calc(2 * 1.25em);
}

/* Fiyat alanı sabit boşluk tutsun */
.product-related-card__prices{
  min-height: 24px;
}

/* Buton her zaman en altta kalsın */
.product-related-card__btn{
  margin-top: auto !important;
}
/* ==================================================
   PRODUCT DETAIL – Tabs: remove card shadow + bigger typography
   ================================================== */

/* Kart etkisini kaldır: zeminle aynı olsun */
.product-detail__tabs{
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* Tab başlıkları: biraz daha büyük + bold */
.product-detail__tab-btn{
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 10px 16px !important;
}

/* İçerik yazısı: biraz daha büyük */
.product-detail__tab-panels{
  font-size: 16px !important;
  line-height: 1.8;
}

/* Paragraflar daha rahat okunsun */
.product-detail__tab-panel p{
  margin: 0 0 12px;
}
/* Product detail tabs: remove shadow, bump fonts (override) */
.product-detail__tabs{
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
}

.product-detail__tabs-header{
    margin-bottom: 14px;
}

.product-detail__tab-btn{
    font-size: 14px;
    font-weight: 700;
}

.product-detail__tab-panels{
    font-size: 15px;
    color: #111827;
}

.product-detail__tab-panel p{
    line-height: 1.7;
}

/* Downloads list */
.product-detail__downloads{
    display: flex;
    flex-direction: column;
}

.product-detail__download-item{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #e5e7eb;
}

.product-detail__download-title{
    font-weight: 600;
    color: #111827;
}

.product-detail__download-actions{
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Downloads viewer modal */
.pd-dl-viewer{
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0,0,0,.55);
    z-index: 9999;
}
.pd-dl-viewer.is-open{ display:flex; }

.pd-dl-viewer__panel{
    background: #fff;
    width: min(980px, 100%);
    max-height: calc(100vh - 48px);
    overflow: hidden;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
}

.pd-dl-viewer__header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid #e5e7eb;
}

.pd-dl-viewer__title{
    font-weight: 700;
    color: #111827;
}

.pd-dl-viewer__close{
    border: 0;
    background: transparent;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: #111827;
}

.pd-dl-viewer__body{
    flex: 1;
    min-height: 60vh;
}

.pd-dl-viewer__iframe{
    width: 100%;
    height: 100%;
    border: 0;
}

.pd-dl-viewer__img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
}
/* ==================================================
   DOWNLOAD VIEWER – make preview area large
   ================================================== */

/* Overlay padding’i azalt, daha çok alan kalsın */
.pd-dl-viewer{
  padding: 12px !important;
}

/* Panel: gerçek bir yükseklik ver ki body/iframe doldursun */
.pd-dl-viewer__panel{
  width: min(1200px, 100%) !important;
  height: calc(100vh - 24px) !important;      /* kritik */
  max-height: calc(100vh - 24px) !important;
  border-radius: 12px !important;
}

/* Header sabit, body kalan alanı alsın */
.pd-dl-viewer__header{
  flex: 0 0 auto !important;
}

.pd-dl-viewer__body{
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;                   /* kritik (flex overflow fix) */
  overflow: hidden !important;
}

/* iframe/img alanı tam doldursun */
.pd-dl-viewer__iframe,
.pd-dl-viewer__img{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}