/*--------------------------------------------------------------
# Site overrides
# Loaded AFTER the theme's style.css / responsive.css so these rules win.
# Keep this file small and document why each override exists.
--------------------------------------------------------------*/

/*
 * Header menu text.
 *
 * The size is set in Ayarlar → Görünüm and arrives as --menu-font-size (see
 * layouts/app.blade.php). The row also holds the logo, the language switch and
 * the quote button, and the theme's stock 30px item gap only fits ~8 items, so:
 *   - the gap between items is tightened,
 *   - the chosen size applies in full on wide screens (>=1700px),
 *   - narrower screens cap it (16px, then 14px) so ~11 items stay on one line.
 * site.js is a safety net on top: if a longer menu still does not fit, it
 * lowers the size a little further.
 */
@media only screen and (min-width: 1200px) {
    .main-menu .main-menu__list > li + li,
    .stricky-header .main-menu__list > li + li {
        margin-left: 10px;
    }

    .main-menu .main-menu__list > li > a,
    .stricky-header .main-menu__list > li > a {
        font-size: min(var(--menu-font-size, 18px), 16px);
        white-space: nowrap;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .main-menu .main-menu__list > li + li,
    .stricky-header .main-menu__list > li + li {
        margin-left: 6px;
    }

    .main-menu .main-menu__list > li > a,
    .stricky-header .main-menu__list > li > a {
        font-size: min(var(--menu-font-size, 18px), 14px);
    }
}

@media only screen and (min-width: 1700px) {
    .main-menu .main-menu__list > li > a,
    .stricky-header .main-menu__list > li > a {
        font-size: var(--menu-font-size, 18px);
    }
}

/*
 * Top bar (phones, e-mail, address | working hours, social).
 *
 * The theme lets this row wrap, which pushed the working hours and the social
 * buttons onto a second line. It is now a single line: the address is the one
 * flexible piece and is cut with an ellipsis when space runs out.
 */
.main-menu__top-inner {
    flex-wrap: nowrap;
    gap: 24px;
    padding-top: 6px;
    padding-bottom: 6px;
}

.main-menu__contact-list {
    flex: 1 1 auto;
    min-width: 0;
}

.main-menu__contact-list li {
    flex: 0 0 auto;
    white-space: nowrap;
}

.main-menu__contact-list li + li {
    margin-left: 32px;
}

.main-menu__contact-list li:before {
    left: -16px;
}

.main-menu__contact-list li .text p,
.main-menu__top-text {
    font-size: 15px;
}

.main-menu__contact-list li.main-menu__contact-address {
    flex: 0 1 auto;
    min-width: 0;
}

.main-menu__contact-address .text {
    min-width: 0;
    overflow: hidden;
}

.main-menu__contact-address .text p {
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 20px;
}

.main-menu__top-right,
.main-menu__top-time {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.main-menu__social {
    margin-left: 24px;
}

.main-menu__social a {
    height: 34px;
    width: 34px;
}

.main-menu__social a.main-menu__social-whatsapp {
    font-size: 17px;
}

.main-menu__social a.main-menu__social-whatsapp:hover {
    color: #128c4a;
}

@media only screen and (max-width: 1399px) {
    .main-menu__top-time {
        display: none;
    }

    .main-menu__social {
        margin-left: 0;
    }
}

/*
 * Page banner (title + breadcrumb strip on inner pages).
 *
 * The theme's banner is ~420px tall; it is reduced to a compact strip so the
 * page content starts right below the header.
 */
.page-header__inner {
    padding: 20px 0 24px;
}

.page-header__inner h3 {
    font-size: 44px;
    line-height: 54px;
    margin-bottom: 6px;
}

@media only screen and (max-width: 767px) {
    .page-header__inner {
        padding: 20px 0 22px;
    }

    .page-header__inner h3 {
        font-size: 30px;
        line-height: 38px;
    }
}

/* Contact page: mobile number under the landline in the same card */
.contact-info__single h3.contact-info__mobile {
    margin-top: 2px;
}

/*
 * Logo sizing.
 *
 * The theme has no size limit on the logo image, so it renders at the
 * uploaded file's natural pixel size — a large upload fills the whole header.
 * These rules cap every place the site logo appears to a sensible box while
 * preserving its aspect ratio (object-fit: contain), so any upload — wide,
 * tall, big or small — always lands in the right spot and stays there.
 */
.main-menu__logo img,
.stricky-header .main-menu__logo img {
    height: 52px;
    width: auto;
    max-width: 190px;
    object-fit: contain;
}

/* Mobile side-nav header + the info sidebar widget */
.mobile-nav__content .logo-box img,
.xs-sidebar-widget .sidebar-info-contents .logo img {
    height: 46px;
    width: auto !important;      /* popups.blade.php sets a literal width=140 */
    max-width: 170px;
    object-fit: contain;
}

/* Footer logo (dark background) */
.footer-widget__logo img {
    height: 48px;
    width: auto;
    max-width: 190px;
    object-fit: contain;
}

@media only screen and (max-width: 767px) {
    .main-menu__logo img,
    .stricky-header .main-menu__logo img {
        height: 44px;
        max-width: 160px;
    }
}

/*
 * Reference logos (Hakkımızda): the theme fades them to 30% opacity, which
 * read as a grey filter over the logos. They are shown at full strength.
 */
.brand-one__img > img,
.brand-one__single:hover .brand-one__img img {
    opacity: 1;
}

/*
 * Destek (service) detail pages: the theme leaves 120px between the page
 * banner and the content; tightened to match the catalog / product pages.
 */
.service-details {
    padding-top: 60px;
}

@media only screen and (max-width: 767px) {
    .service-details {
        padding-top: 36px;
    }
}