/* ============================================================
   YUMAK SHARED — tüm sayfalarda yüklenir (home + header.twig)
   style.css/home.css'in üstüne, küçük override'lar.
   ============================================================ */

/* ===== ALT SAYFA HEADER (header.twig'i kullanan sayfalar) =====
   - Default home.css'te header { position:absolute } (hero üstünde yüzer)
   - Alt sayfalarda header'a class="header" ekledik → position:relative
   - Aşağıda ufak detay düzeltmeleri */
header.header {
    background: #fff;
    border-bottom: 1px solid rgba(82, 109, 128, 0.15);
}
/* Alt sayfa header'ı arkaplanı belirli olsun (transparent kalmasın) */
header.header .b2b,
header.header .lang a.block,
header.header .menu .top li a,
header.header .menu .top li span,
header.header .menu .bottom li > a {
    color: #526D80;
}
/* Aktif menü item — turuncu alt çizgi (referans tasarımdaki gibi)
   Not: ilk öğe (Ürünler) turuncu kalır; hover'da renk değiştirmesin ki
   yanındaki turuncu ikonla uyumsuz görünmesin. */
header.header .menu .bottom li.active:not(:first-child) > a,
header.header .menu .bottom li:not(:first-child):hover > a {
    color: #152E74;
}
header.header .menu .bottom li.active > a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -8px;
    height: 2px;
    background: #e95f10;
}
header.header .menu .bottom li {
    position: relative;
}

/* ===== SEARCH (header + advanced-search + home-search içindeki form) =====
   OC4 default search component'i <button type="submit"> kullanıyor;
   eskiden CSS sadece <a>'yı stillendiriyordu. Şimdi ikisi de uyumlu. */
header .search a,
header .search button,
.openmenu .search a,
.openmenu .search button,
.home-search .search a,
.home-search .search button,
.advanced-search .search a,
.advanced-search .search button {
    white-space: nowrap;
    background: #152E74;
    color: #fff;
    border-radius: 70px;
    padding: 11px 18px;
    font-size: 12px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.2;
    transition: background .2s ease;
}
.advanced-search .search a,
.advanced-search .search button {
    padding: 15px 22px;
    font-size: 14px;
}
header .search button:hover,
.openmenu .search button:hover,
.home-search .search button:hover,
.advanced-search .search button:hover,
header .search a:hover,
.openmenu .search a:hover,
.home-search .search a:hover,
.advanced-search .search a:hover {
    background: #0c46c8;
}
header .search button:focus,
.openmenu .search button:focus,
.home-search .search button:focus,
.advanced-search .search button:focus {
    outline: 2px solid #1457f5;
    outline-offset: 2px;
}

/* ===== SEARCH İKONU =====
   OC4 search component'i <div class="object"><i class="fas fa-search"></i></div> kullanıyor.
   Eski CSS <object> TAG'ini stillendiriyordu (z-index:12) ama bu div'i değil →
   beyaz büyüteç ikonu turuncu dairenin (.search-icon:after, z-index:9) ALTINDA kalıp
   kayboluyordu. .object div'ini ve içindeki ikonu dairenin üstüne getir. */
header .search .search-icon .object,
.openmenu .search .search-icon .object,
.home-search .search .search-icon .object,
.advanced-search .search .search-icon .object {
    position: relative;
    z-index: 12;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-right: 10px;
}
.advanced-search .search .search-icon .object {
    width: 44px;
    height: 44px;
    margin-right: 13px;
}
header .search .search-icon .object i,
.openmenu .search .search-icon .object i,
.home-search .search .search-icon .object i,
.advanced-search .search .search-icon .object i {
    color: #fff;
    font-size: 15px;
    line-height: 1;
}
.advanced-search .search .search-icon .object i {
    font-size: 18px;
}

/* ===== SIRALAMA + GÖSTERİM ADEDİ — yan yana =====
   .notes .right içindeki "Sıralama Ölçütü:" etiketi üstte, iki .sort dropdown yan yana. */
.product-list .notes .right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    justify-content: flex-end;
}
.product-list .notes .right > span {
    flex-basis: 100%;
    text-align: left;
    margin-bottom: 2px;
}
.product-list .notes .right .sort {
    flex: 1 1 0;
    min-width: 0;
}

/* ===== AUTOCOMPLETE DROPDOWN (global) =====
   common/search.twig component'inin dropdown'ı hiçbir GLOBAL CSS'te stillenmemişti
   (yalnız not_found.twig / search.twig kendi içinde) → header dışındaki sayfalarda
   (category band vb.) stilsiz, devasa açılıyordu. Aşağısı her yerde geçerli. */
.autocomplete-wrapper {
    position: relative;
}
.autocomplete-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid rgba(82, 109, 128, .18);
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(21, 46, 116, .12);
    max-height: 420px;
    overflow-y: auto;
    z-index: 50;
    padding: 6px;
}
.autocomplete-results { display: flex; flex-direction: column; }
.autocomplete-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 10px;
    text-decoration: none;
    color: #526D80;
    transition: background .15s ease;
}
.autocomplete-item:hover,
.autocomplete-item.ac-active { background: rgba(82, 109, 128, .08); }
.autocomplete-thumb {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border-radius: 8px;
    overflow: hidden;
    background: #f5f6f8;
    display: flex;
    align-items: center;
    justify-content: center;
}
.autocomplete-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.autocomplete-info { min-width: 0; flex: 1; }
.autocomplete-name { font-size: 14px; font-weight: 700; color: #152E74; line-height: 1.3; }
.autocomplete-model { font-size: 13px; color: #e95f10; font-weight: 600; }
.autocomplete-arrow { flex: 0 0 auto; color: #aab6c0; display: flex; align-items: center; }
.ac-highlight { background: #fff2e6; color: #e95f10; border-radius: 3px; }
.autocomplete-empty,
.autocomplete-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    padding: 18px;
    color: #7a8a9a;
    font-size: 14px;
    text-align: center;
}
.autocomplete-empty { flex-direction: column; }
.ac-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(82, 109, 128, .25);
    border-top-color: #152E74;
    border-radius: 50%;
    animation: ac-spin .7s linear infinite;
}
@keyframes ac-spin { to { transform: rotate(360deg); } }
.autocomplete-footer {
    border-top: 1px solid rgba(82, 109, 128, .12);
    margin-top: 4px;
    padding-top: 4px;
}
.autocomplete-all-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    color: #152E74;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 10px;
}
.autocomplete-all-link:hover { background: rgba(21, 46, 116, .06); }

/* ===== AUTOCOMPLETE — ".search a" çakışması düzeltmesi =====
   style.css'teki `header .search a`, `.advanced-search .search a`, `.openmenu .search a`,
   `.home-search .search a` kuralları DETAYLI ARAMA butonu içindi ama OC bileşeninde o buton
   <button>; autocomplete önerileri ise <a class="autocomplete-item">. Bu yüzden o kurallar
   (specificity 0,1,2 / 0,2,1) autocomplete <a>'larını yakalayıp LACİVERT butona çeviriyordu.
   Aşağıda autocomplete linklerini geri alıyoruz (specificity savaşı yerine !important). */
.autocomplete-item {
    background: transparent !important;
    border-radius: 10px !important;
    padding: 8px 10px !important;
    font-weight: 400 !important;
    white-space: normal !important;
}
.autocomplete-item:hover,
.autocomplete-item.ac-active { background: rgba(82, 109, 128, .08) !important; }
.autocomplete-all-link {
    background: transparent !important;
    border-radius: 10px !important;
    padding: 10px !important;
    font-weight: 600 !important;
}
.autocomplete-all-link:hover { background: rgba(21, 46, 116, .06) !important; }

/* ===== Genel yardımcılar ===== */
img.lazyload { opacity: 1; }

/* ============================================================
   CMS SAYFA DÜZELTMELERİ (cms/blog twig'leri yumaktr.com yapısında)
   ============================================================ */

/* Sablon içinde sidebar YOKKEN .content tam genişlik almalı.
   Default .sablon .content { width: 66% } → form sayfasında .form > .left/.right
   sıkışıyordu. Aşağıdaki kural sadece sidebar render edilmediğinde geçerli. */
.sablon .d-flex > .content:only-child {
    width: 100%;
}

/* Sidebar aktif item highlight — yumaktr.com tarzı (hover ile aynı görünüm).
   Twig'te <a class="active"> verildiğinde parent <li>'yi seç (:has) ve
   mevcut hover mekanizmasını (li:after width:100% mavi cover) tetikle. */
.sidebar li:has(> a.active)::after {
    width: 100%;
    background: #152E74;
}
.sidebar li:has(> a.active) > a,
.sidebar a.active {
    color: #fff;
}
.sidebar li:has(> a.active) > a i {
    color: #fff;
}

/* Banner taşmasın + yükseklik sınırı (article/blog üst banner) */
.banner .pore { overflow: hidden; }
.banner-container {
    max-height: 280px;
    overflow: hidden;
}
.banner-container img {
    width: 100%;
    height: 280px;
    max-height: 280px;
    object-fit: cover;
    object-position: center;
    display: block;
}
@media (max-width: 991px) {
    .banner-container,
    .banner-container img { height: 220px; max-height: 220px; }
}
@media (max-width: 575px) {
    .banner-container,
    .banner-container img { height: 160px; max-height: 160px; }
}
.banner .breadcrumb { margin-bottom: 0; }