.sub-footer {
    border-top: 1px solid #c1c1c1;
    text-align: center;
    padding: 10px 0 !important;
}

.copyright {
    color: #000;
}

#content {
    padding-bottom: 0 !important;
}
.stars .fas, .stars .far {
    display: inline-block;
    font-size: 1.4em;
    margin-right: 2px;
    color: #ffae00;
}

.smartbanner {
    position: fixed;
    z-index: 99;
}

#empty-house-cleaning, #office-cleaning, #house-cleaning.disinfection, #house-cleaning.insectpestcontrol {
    background: url(../images/house-cleaning-bg.jpg) no-repeat !important;
    min-height: 670px !important;
    background-position: -60px 0px !important;
    background-color: #5ab9f1 !important;
    background-position: center !important;
}

/* Ultra-wide screens: the hero art is 2083x670, so beyond a 2083px viewport
   'cover' upscales it and the centered crop cuts the model's head off.
   Anchoring to the top moves the whole crop to the bottom edge (white
   floor, which blends into the white section below) and keeps the head. */
@media (min-width: 2084px) {
    #house-cleaning,
    #empty-house-cleaning,
    #office-cleaning,
    #house-cleaning.disinfection,
    #house-cleaning.insectpestcontrol {
        background-position: center top !important;
    }
}

#empty-house-cleaning .how-does-it-work .btn-tmz-solid {
    color: #FFFFFF;
    border: 1px #FFFFFF solid;
    font-size: 16px;
    font-weight: 400 !important;
    line-height: normal;
    height: auto;
    padding: 15px 16px;
    background: none;
}

#empty-house-cleaning .info-box-title {
    color: #fff !important;
    font-weight: 300 !important;
}

#empty-house-cleaning #cleaner-tab .panel-heading a:hover {
    color: #fff !important;
    font-weight: 500;
}

#empty-house-cleaning #cleaner-tab .panel-group .active .panel-body {
    color: #FFF;
    background-color: inherit;
    padding: 0px;
    border-radius: 0px;
}

#empty-house-cleaning #cleaner-tab .panel-group .active .panel-heading a {
    color: #fff;
}

/* =====================================================
   MOBILE MENU FIXES - Israfix Style Mobile Menu
   ===================================================== */

/* Hide desktop user dropdown on mobile/tablet - use mobile menu instead */
@media (max-width: 1200px) {
    #user-menu {
        display: none !important;
    }

    /* Hide login link on mobile - it's in mobile menu */
    #user-login-link {
        display: none !important;
    }
}

/* Hamburger button - use brandcolor1 */
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
    background-color: var(--brand-color-1, #5ab9f1) !important;
}

/* Scroll state hamburger */
.scroll-background .hamburger-inner,
.scroll-background .hamburger-inner::before,
.scroll-background .hamburger-inner::after {
    background-color: var(--brand-color-1, #5ab9f1) !important;
}

/* Order/Customer/Page header hamburger */
#main-header.order-header .hamburger-inner,
#main-header.order-header .hamburger-inner::before,
#main-header.order-header .hamburger-inner::after,
#main-header.customer-header .hamburger-inner,
#main-header.customer-header .hamburger-inner::before,
#main-header.customer-header .hamburger-inner::after,
#main-header.page-header .hamburger-inner,
#main-header.page-header .hamburger-inner::before,
#main-header.page-header .hamburger-inner::after {
    background-color: var(--brand-color-1, #5ab9f1) !important;
}

/* Mobile Menu User Header */
.mobile-menu-user-header {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    background: linear-gradient(135deg, var(--brand-color-1, #5ab9f1) 0%, var(--brand-color-2, #3498db) 100%);
    color: #fff;
    margin-bottom: 10px;
}

.mobile-menu-user-header .user-icon {
    font-size: 2.5em;
    margin-right: 12px;
}

.mobile-menu-user-header .user-info {
    display: flex;
    flex-direction: column;
}

.mobile-menu-user-header .greeting-text {
    font-size: 1.1em;
    font-weight: 600;
    margin-bottom: 4px;
}

.mobile-menu-user-header .balance-badge {
    background: rgba(255, 255, 255, 0.2);
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.9em;
    font-weight: 500;
}

/* RTL support for mobile menu header */
.ar .mobile-menu-user-header,
.he .mobile-menu-user-header {
    flex-direction: row-reverse;
    text-align: right;
}

.ar .mobile-menu-user-header .user-icon,
.he .mobile-menu-user-header .user-icon {
    margin-right: 0;
    margin-left: 12px;
}

/* Mobile Menu Divider */
.mobile-menu-divider {
    border: none !important;
    border-top: 1px solid #ddd !important;
    margin: 10px 0 !important;
    padding: 0 !important;
    height: 0 !important;
}

/* Mobile Menu User Items Icons */
.mobile-menu ul li a i.fa {
    width: 20px;
    margin-right: 10px;
    text-align: center;
    color: var(--brand-color-1, #5ab9f1);
}

.ar .mobile-menu ul li a i.fa,
.he .mobile-menu ul li a i.fa {
    margin-right: 0;
    margin-left: 10px;
}

/* Mobile Menu Logout Button */
.mobile-menu-logout {
    color: #e74c3c !important;
}

.mobile-menu-logout i.fa {
    color: #e74c3c !important;
}
/* ============================================
   SITE FONT — Poppins (2026-06-10)
   style.css declares body as "Rubik" but Rubik was NEVER loaded (layout
   only pulled Roboto), so the whole site fell back to the browser's
   generic sans-serif — the "fontless" look. Poppins is now loaded in the
   layout; these rules make it the effective site font. Form controls
   don't inherit font by default, so they're set explicitly.
   ============================================ */
body {
    font-family: 'Poppins', 'Rubik', Roboto, sans-serif !important;
}
button, input, select, textarea {
    font-family: inherit;
}

/* Poppins is taller/wider than the old fallback font, so fixed-height flex
   rows started squeezing their non-text flex items to near-zero
   (flex-shrink defaults to 1): the hero service-tab sprite icons collapsed
   to ~7px when the label wrapped to two lines, and header images got
   crushed under width pressure. Pin them. */
.services-swiper-wrapper .swiper-slide a span[id$="-icon"],
.main-menu.services ul li a span[id$="-icon"],
#main-header img,
#main-header .avatar {
    flex-shrink: 0;
}
/* Contact block labels stay on one line so they don't push their icons out */
#phones-menu a, #phones-menu span, #phones-menu div, #phones-menu li {
    white-space: nowrap;
}
/* Header user button: keep avatar + name + balance on a single line */
#user-menu .dropdown-toggle {
    white-space: nowrap;
}

/* Hero form question titles (How long do you need your cleaner / Hangi
   sıklıkla...) read oversized in Poppins — optical correction, scoped to
   the service hero sections only. !important because style.css sets them
   via the more specific "#house-cleaning .tab-content .section
   .section-title" chain (1.3em). */
#house-cleaning h4.section-title,
#empty-house-cleaning h4.section-title,
#office-cleaning h4.section-title {
    font-size: 16px !important;
}

/* Order pages load the wizard stylesheet for the funnel components; its
   footer-heading branding (2rem bold + brand bar — asset/wizard/custom.css
   .footer-links .links-header) must NOT leak into TY's own footer. Assert
   the homepage footer look (browser-default sized div headings). */
#main-footer .footer-links .links-header {
    font-size: 14px !important;
    font-weight: 700 !important;
    border-left: 0 !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
}

/* ============================================
   BACK LINK INLINE (Calendar, Select Address pages)
   Gray pill button look (Koray, 2026-06-10) — the wizard stylesheet only
   colored the text; TY wants a visible button with a soft gray background.
   ============================================ */
.back-link-inline {
    color: #555;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
    background: #f1f2f5;
    border: 1px solid #e2e4ea;
    border-radius: 18px;
    padding: 8px 16px;
    line-height: 1.2;
    transition: background 0.15s, color 0.15s;
}
.back-link-inline:hover {
    color: var(--brand-color-1, #00BFEB);
    background: #e9ebf0;
    text-decoration: none;
}


/* Order funnel pages: breathing room between the fixed site header and the
   first content row (the wizard layout provides this on wizard tenants;
   ty2's fixed header leaves content flush against it). */
#content.order {
    padding-top: 18px !important;
}
@media (max-width: 767px) {
    #content.order {
        padding-top: 10px !important;
    }
}

/* Hero FAQ accordion questions ("Nasıl rezervasyon yapabilirim?" etc.) were
   rgba(0,0,0,.51) on the blue hero — unreadable (Koray, 2026-06-11). */
#house-cleaning .panel-group .panel-title a,
#office-cleaning .panel-group .panel-title a {
    color: #dff3ff !important;
}

/* Hero hour-pill digits ("Süre Belirle" 4/5/6...) — were inline 14px;
   Poppins explicit + larger per Koray (2026-06-11). */
.hour-btn-group .hour-btn .ptypelabel {
    font-family: 'Poppins', 'Rubik', Roboto, sans-serif !important;
    font-size: 18px !important;
    line-height: 27px !important;
    font-weight: 600 !important;
}

/* ============================================
   SELECTED-SERVICE HEADER (2026-06-11)
   Replaces the city/district dropdowns at the top of every hero order
   form — dhobee-style: brand icon tile + service name over a brand
   underline. Area selection happens on the address step now.
============================================ */
.ty-service-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 0;
    position: relative;
    margin: 0 50px 14px;
}
.ty-service-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #2098d1;
    border-radius: 2px;
}
.ty-service-icon {
    width: 35px;
    height: 35px;
    border-radius: 8px;
    background: #2098d1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ty-service-icon i {
    font-size: 17px;
    color: #fff;
}
.ty-service-name {
    font-family: 'Poppins', 'Rubik', Roboto, sans-serif;
    font-size: 17px;
    font-weight: 600;
    color: #2098d1;
}
@media screen and (max-width: 800px) {
    .ty-service-header { margin: 0 16px 10px; }
}

/* Hour pills: explicit geometry — the old padding/line-height interplay
   left the 18px digits clipping and squeezed the 1px ellipse borders at
   the container edges. Fixed 44px pill, digit dead-centered via flex,
   breathing room on the group so borders never touch the clip edge. */
.hour-btn-group {
    padding: 3px 0 !important;
}
.hour-btn-group .hour-btn {
    height: 44px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    box-sizing: border-box;
}
.hour-btn-group .hour-btn .ptypelbl {
    display: flex;
    align-items: center;
    justify-content: center;
}
.hour-btn-group .hour-btn .ptypelabel {
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Period toggle (TEK SEFERLİK / PAKETLER...): Poppins + true vertical
   centering (labels carried an inline line-height:38px that misaligned
   the text inside the taller button). */
#hkDt label.btn-tmz, .hkDetails label.btn-tmz {
    font-family: 'Poppins', 'Rubik', Roboto, sans-serif !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1.25 !important;
}

/* Hero total price ("2250 TL") bold (Koray, 2026-06-11). */
.total-price, #house-cleaning-total-price {
    font-weight: 700 !important;
}

/* Busy/disabled form effect — applied while the order form is submitting
   or the visitor switches service (dhobee pattern): blocks double-clicks
   and makes the wait read as loading. Cleared on pageshow. */
.ty-form-busy {
    opacity: .55 !important;
    pointer-events: none !important;
    -webkit-filter: grayscale(25%);
    filter: grayscale(25%);
    transition: opacity .2s ease;
}

/* "Giriş Yap" link: design-config.php emits white !important (meant for
   transparent headers) — unreadable on TY's light-gray bar. body-prefixed
   for higher specificity; green to match the phone number. */
body #main-header #user-login-link,
body #main-header #user-login-link i,
body #main-header .header-nav#user-login-link {
    color: #0a991a !important;
}
body #main-header #user-login-link:hover,
body #main-header #user-login-link:hover i {
    color: #0a991a !important;
    opacity: .8;
}

/* Logged-in user button (name + balance): style.css pins it to height:77px —
   a relic of a taller header; in today's 62px bar the text sat visibly low.
   Compact + flex-center instead. */
#user-menu .dropdown-toggle {
    height: auto !important;
    padding: 4px 12px !important;
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
}
#user-menu .dropdown-toggle .avatar {
    top: 0 !important;
}
/* The .dropdown wrapper carried top:-19px to offset the old 77px button;
   with the compact button that pulled the name above the bar. Span the
   header instead and flex-center — width-agnostic. Desktop only. */
@media (min-width: 801px) {
    #user-menu {
        top: 0 !important;
        height: 100% !important;
        display: flex !important;
        align-items: center;
    }
    #user-menu .dropdown {
        position: relative !important;
        top: 0 !important;
    }
}

/* Balance badge: bootstrap .label padding (.2em .6em .3em) floats the
   digits high in the red pill — equal-flex centering instead. */
#user-menu .dropdown-toggle .label {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px !important;
    line-height: 1 !important;
    border-radius: 10px;
}

/* Single-hour services (e.g. Empty House = 8h only): badge + note instead
   of one lonely full-width pill (wizard/WFS pattern). */
.ty-single-hour {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px 0 10px;
}
.ty-single-hour-badge {
    background: #2098d1;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    padding: 8px 16px;
    border-radius: 6px;
    white-space: nowrap;
}
.ty-single-hour-note {
    font-size: 13px;
    color: #666;
}

/* Package table currency suffix (small, dhobee-style) */
.package-table .pkg-cur {
    font-size: 11px;
    font-weight: 400;
    opacity: .75;
}

/* Only one-off available (no packages defined): hide the whole "Hangi
   Sıklıkla Temizlensin" chooser — wizard behaviour. The checked one-off
   radio inside still submits (display:none keeps inputs in the form). */
.section.select-period.ty-no-packages {
    display: none !important;
}

/* Washing sub-service switcher (Koltuk/Sandalye/Yatak) — sits UNDER the
   service header now; segmented-pill look instead of the legacy block
   buttons (Koray, 2026-06-11). */
.upholstery-cleaning-menu {
    /* .section sets width:100%; side margins would overflow the card —
       use inner padding instead. Bottom padding keeps the pills off the
       section separator line. */
    margin: 0 !important;
    padding: 0 12px 14px !important;
    box-sizing: border-box;
}
.upholstery-cleaning-menu .row {
    display: flex !important;
    gap: 6px;
    margin: 0 !important; /* bootstrap row's -15px gutters pushed the pills out of the card */
}
.upholstery-cleaning-menu .row > div,
.upholstery-cleaning-menu .col-xs-4 {
    width: auto !important;
    flex: 1;
    min-width: 0;
    padding: 0 !important;
    float: none !important;
    /* legacy tystyle paints the COLUMNS (#006aa6 active / #f4f4f4 idle) —
       that bled around/behind the new pills as blue frames. */
    background: transparent !important;
}
.upholstery-cleaning-menu .btn {
    font-family: 'Poppins', 'Rubik', Roboto, sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: #555 !important;
    background: #fff !important;
    border: 1px solid #d9dee3 !important;
    border-radius: 8px !important;
    padding: 9px 2px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: none !important;
}
.upholstery-cleaning-menu .active .btn {
    background: #2098d1 !important;
    border-color: #2098d1 !important;
    color: #fff !important;
}
@media screen and (max-width: 800px) {
    .upholstery-cleaning-menu { padding: 0 10px 12px !important; }
}

/* design-config emits brand link colors with !important (#00bfeb) which
   beat the pill text colors — out-specificity them via #content. */
#content .upholstery-cleaning-menu .btn.btn-block {
    color: #555 !important;
}
#content .upholstery-cleaning-menu .active .btn.btn-block,
#content .upholstery-cleaning-menu .col-xs-4.active .btn.btn-block {
    color: #fff !important;
}

/* Attribute quantity widget (chair/mattress counter): the trailing
   pictogram wrapped below the row ("stray chair icon"). Single-line flex,
   label shrinks with ellipsis, icon pinned inline. */
.quantity-btn.attr-quantity {
    display: flex !important;
    align-items: center;
    flex-wrap: nowrap;
    /* no gap: the -/+ squares and their fake-border are designed as one
       joined control; spacing comes from label/img margins instead */
    gap: 0;
}
.quantity-btn.attr-quantity .quantity-btn-label {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 10px;
}
.quantity-btn.attr-quantity .quantity-number {
    margin-left: 8px;
}
.quantity-btn.attr-quantity img {
    margin-top: 0 !important;
    margin-left: 6px;
    flex-shrink: 0;
}

/* Video play button: the circular icon is a left background image but the
   button has no left padding — longer EN label ("Promotional film") slid
   under the icon. */
.play-btn {
    padding-left: 60px !important;
    white-space: nowrap;
}

/* "Tamam Ama Sorularım Var!" section: fixed 600px + cover cropped the photo
   vertically on wide screens (bucket base cut off, looked broken). Scale the
   photo to the section height instead (no vertical crop), anchor left, and
   fill the remainder with white — the photo's edges are pure white so the
   fill is seamless. Auto height keeps long content from being clipped. */
#home-faq {
    height: auto !important;
    min-height: 0;
    /* Photo moved into a real column (.faq-side-image, wizard pattern) —
       the legacy CSS background goes away entirely. */
    background-image: none !important;
    background-color: #ffffff;
    padding: 30px 0;
}
/* Photo column: flex the row so the image vertically centers against the
   taller questions block (sits lower), and let it fill the full column
   width — the first cut (max-width 420 + top-aligned) rendered small and
   high for TY's proportions. */
@media (min-width: 768px) {
    #home-faq .container > .row {
        display: flex;
        align-items: center;
    }
    #home-faq .faq-image-container {
        display: flex;
        align-items: center;
        /* LEFT-aligned: shares the container's left edge with the woman
           image in the services band above — same alignment at every
           width because both live in .container columns. */
        justify-content: flex-start;
    }
}
#home-faq .faq-side-image {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
}
/* Match the services-band woman image's left pull (.tab-thumb left:-50%
   renders as a constant -112px while the container is fixed at 1170) so
   the two photos share the exact same left edge. */
@media (min-width: 1200px) {
    #home-faq .faq-side-image { position: relative; left: -112px; }
}
@media (min-width: 992px) and (max-width: 1199px) {
    #home-faq .faq-side-image { position: relative; left: -93px; }
}
@media screen and (max-width: 767px) {
    #home-faq .faq-side-image { max-width: 300px; margin-bottom: 12px; }
}

/* Header step/nav links (SELECT THE SERVICE / ADDRESS / SECURE PAYMENT and
   the homepage main menu): Poppins + 1px larger (Koray, 2026-06-11). */
.main-menu ul li a {
    font-family: 'Poppins', 'Rubik', Roboto, sans-serif !important;
    font-size: 14px !important;
}

/* "Evimi Temizle" CTA in the services band: white label (was inheriting a
   dark tone on the dark band). */
#home-services .clean_my_home {
    color: #ffffff !important;
}

/* Order-form attention shake — triggered after the "Evimi Temizle" CTA
   scrolls back up to the hero form. */
@keyframes tyShake {
    0%, 100% { transform: translateX(0); }
    15%, 45%, 75% { transform: translateX(-7px); }
    30%, 60%, 90% { transform: translateX(7px); }
}
.ty-shake {
    animation: tyShake 0.7s ease-in-out;
}

/* Account area (6 customer tabs): center the tab bar — wizard parity.
   Wizard gets this from asset/css/style.css (.menu_bar flex centerer),
   which the ty2 layout never loads. The ul shrink-fits as a flex item,
   so the li's keep their natural width (no stretching). */
#content.customer .menu_bar {
    display: flex;
    justify-content: center;
    align-items: center;
}
#content.customer .menu_bar .nav.nav-tabs {
    max-width: 100%;
}

/* ---------------------------------------------------------------------------
   Customer testimonials ("Müşteri Yorumları") — +20% box height so longer
   reviews fit. The base rule (css/style.css) fixes .slide-item-text at 205px
   with overflow:hidden, which clipped longer comments. Loaded after style.css
   + responsive.css so these win by source order (same specificity). (Koray, 2026-08-11)
   --------------------------------------------------------------------------- */
.comment-slider .slide-item { height: 492px; }
.comment-slider .slide-item .slide-item-content { height: 408px; }
.comment-slider .slide-item .slide-item-content .slide-item-text { height: 246px; }

@media screen and (max-width: 768px) {
    .comment-slider .slide-item .slide-item-content { height: 360px; }
}