/* =====================================================================
   MARKA TEMASI
   Yalnızca marka sayfalarında (body.marka-tema) yüklenir. Renkler
   Tema.Master'da :root üzerine basılan değişkenlerden gelir:
     --mt-birincil / -koyu / -yazi   → geniş yüzeyler      (~%70)
     --mt-ikincil  / -koyu / -yazi   → vurgu ve etkileşim  (~%30)
   Renk kaynağı: marka-temalari.json, yoksa marka logosu (MarkaTema.cs)
   ===================================================================== */

/* ---------- Marka bandı: beyaz zemin, ince çizgiler, sade tipografi ---------- */
.marka-bandi {
    background: #fff;
}
/* Alt çizgi renk oranını birebir taşır: %70 birincil, %30 ikincil.
   Altta durur; üstte olsaydı masaüstünde aynı renkteki navbar'a karışırdı. */
.marka-bandi::after {
    content: "";
    display: block;
    height: 3px;
    background: linear-gradient(to right, var(--mt-birincil) 0, var(--mt-birincil) 70%, var(--mt-ikincil) 70%, var(--mt-ikincil) 100%);
}
.marka-bandi__icerik {
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 60px;
    padding-top: 12px;
    padding-bottom: 12px;
}
.marka-bandi__logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    height: 32px;
}
/* Yükseklik sabit, genişlik orandan; yüzde sınır kullanılmaz (kapsayıcı genişliği resme bağlı olduğundan 0'a çöker) */
.marka-bandi__logo img {
    height: 100%;
    width: auto;
    max-width: 140px;
    object-fit: contain;
}
.marka-bandi__baslik {
    position: relative;
    min-width: 0;
    padding-left: 14px;
    color: #1a1a1a;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .16em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.marka-bandi__baslik::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--mt-birincil);
}
.marka-bandi__baslik:hover { color: #1a1a1a; text-decoration: none; }
.marka-bandi__etiket {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #8c8c8c;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    white-space: nowrap;
}
.marka-bandi__etiket::before {
    content: "";
    width: 28px;
    height: 1px;
    background: var(--mt-ikincil);
}
.marka-bandi__link {
    margin-left: auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px solid var(--mt-birincil);
    color: #1a1a1a;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .06em;
    text-decoration: none;
    transition: border-color .15s;
}
.marka-bandi__link::after {
    content: "\2192";
    transition: transform .15s;
}
.marka-bandi__link:hover,
.marka-bandi__link:focus {
    border-bottom-color: var(--mt-ikincil);
    color: #1a1a1a;
    text-decoration: none;
}
.marka-bandi__link:hover::after { transform: translateX(3px); }
@media (max-width: 767.98px) {
    .marka-bandi::after { height: 2px; }
    .marka-bandi__icerik { gap: 14px; min-height: 48px; padding-top: 8px; padding-bottom: 8px; }
    .marka-bandi__logo { height: 26px; }
    .marka-bandi__logo img { max-width: 110px; }
    .marka-bandi__baslik { font-size: 14px; padding-left: 11px; }
    .marka-bandi__etiket { font-size: 10px; letter-spacing: .14em; gap: 8px; }
    .marka-bandi__etiket::before { width: 16px; }
    .marka-bandi__link { font-size: 12px; }
}
@media (max-width: 419.98px) {
    .marka-bandi__etiket { display: none; }
}

/* ---------- Marka logosu ---------- */
/* Yalnızca beyaz (koyu zemin) sürümü olan logolar beyaz zeminde siyaha çevrilir (marka-temalari.json: "logoTers": true) */
.mt-logo--ters { filter: brightness(0); }

/* Ürün detay: başlık altındaki marka satırı */
.pbrand--logolu {
    display: inline-flex;
    align-items: center;
    margin: 4px 0 2px;
}
.pbrand--logolu a {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding-left: 10px;
    border-left: 2px solid var(--mt-birincil);
}
.pbrand--logolu img {
    height: 100%;
    width: auto;
    max-width: 130px;
    object-fit: contain;
}

/* Ürün detay: galeri sağ üst köşesinde marka rozeti (büyütme butonu sol üstte) */
.pd-marka-rozet {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, .94);
    border: 1px solid #ebebeb;
    border-bottom: 2px solid var(--mt-birincil);
    border-radius: 2px;
}
.pd-marka-rozet img {
    height: 100%;
    width: auto;
    max-width: 104px;
    object-fit: contain;
}
@media (max-width: 767.98px) {
    .pd-marka-rozet { top: 8px; right: 8px; height: 32px; padding: 6px 9px; }
    .pd-marka-rozet img { max-width: 78px; }
    .pbrand--logolu a { height: 22px; }
}

/* ---------- BİRİNCİL (~%70): geniş yüzeyler ---------- */
body.marka-tema .header__navbar {
    background: var(--mt-birincil);
    color: var(--mt-birincil-yazi);
    border-top-color: var(--mt-birincil);
}
body.marka-tema .header__navbar-departments:after { background: currentColor; opacity: .25; }
body.marka-tema .main-menu .main-menu__link,
body.marka-tema .phone__body,
body.marka-tema .phone__title,
body.marka-tema .phone__number { color: var(--mt-birincil-yazi); }
body.marka-tema .departments__button {
    background: var(--mt-birincil-koyu);
    color: var(--mt-birincil-yazi);
}
body.marka-tema .departments__button .departments__button-icon { color: var(--mt-birincil-yazi); }

body.marka-tema .mobile-header { border-bottom: 2px solid var(--mt-birincil); }
body.marka-tema .search__input { border-color: var(--mt-birincil); }

body.marka-tema .btn-primary,
body.marka-tema .btn-primary.disabled,
body.marka-tema .btn-primary:disabled {
    background: var(--mt-birincil);
    border-color: var(--mt-birincil);
    color: var(--mt-birincil-yazi);
}

body.marka-tema .pagination .page-item.active .page-link {
    background: var(--mt-birincil);
    border-color: var(--mt-birincil);
    color: var(--mt-birincil-yazi);
}
body.marka-tema .layout-switcher__button--active,
body.marka-tema .layout-switcher__button--active:hover { color: var(--mt-birincil); }

body.marka-tema .site-footer { border-top: 2px solid var(--mt-birincil); }

/* ---------- İKİNCİL (~%30): vurgu ve etkileşim durumları ---------- */
body.marka-tema .main-menu .main-menu__item:hover .main-menu__link,
body.marka-tema .phone__body:hover,
body.marka-tema .departments__button:hover,
body.marka-tema .departments--open .departments__button {
    background: var(--mt-ikincil);
    color: var(--mt-ikincil-yazi);
}
body.marka-tema .phone__body:hover .phone__title,
body.marka-tema .phone__body:hover .phone__number,
body.marka-tema .departments__button:hover .departments__button-icon,
body.marka-tema .departments--open .departments__button .departments__button-icon { color: var(--mt-ikincil-yazi); }

body.marka-tema .btn-primary:hover,
body.marka-tema .btn-primary:focus,
body.marka-tema .btn-primary.focus,
body.marka-tema .btn-primary:not(:disabled):not(.disabled):active,
body.marka-tema .btn-primary:not(:disabled):not(.disabled).active {
    background: var(--mt-ikincil);
    border-color: var(--mt-ikincil);
    color: var(--mt-ikincil-yazi);
}

body.marka-tema .search__input:focus,
body.marka-tema .search__input:hover { border-color: var(--mt-ikincil); }

body.marka-tema .page-link:hover {
    background: var(--mt-ikincil);
    color: var(--mt-ikincil-yazi);
}

body.marka-tema .products-list .ns-product-tags span {
    background-color: var(--mt-ikincil);
    color: var(--mt-ikincil-yazi);
}

body.marka-tema ul.megamenu-links li a:hover,
body.marka-tema .brd__item a:hover { color: var(--mt-birincil); }

body.marka-tema .footer-newsletter__form-button {
    background: var(--mt-ikincil);
    color: var(--mt-ikincil-yazi);
}
body.marka-tema .footer-newsletter__form-button:hover {
    background: var(--mt-ikincil-koyu);
    color: var(--mt-ikincil-yazi);
}
