/* ==========================================================================
   Lider Halı Yıkama - Site özel stiller (tema üstüne ek/override)
   ========================================================================== */

/* ---- Fiyat Listesi: Halı Yıkama Ücret Hesaplama Aracı ---- */
.price-calc-wrap {
    padding: 30px 0 10px;
}

.price-calc-card {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecf3;
}

.price-calc-header {
    background: #1d70f9;
    padding: 22px 30px;
}

.price-calc-header h2 {
    color: #ffffff;
    font-size: 22px;
    margin: 0;
    font-weight: 400;
}

.price-calc-body {
    background: #ffffff;
    padding: 28px 30px;
}

.price-calc-desc {
    color: #5c6478;
    margin-bottom: 16px;
}

.price-calc-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
}

.price-calc-badges li {
    color: #16203c;
    font-size: 14px;
    font-weight: 500;
}

.price-calc-badges li i {
    color: #287ff9;
    margin-right: 6px;
}

.price-calc-field {
    margin-bottom: 22px;
}

.price-calc-field label {
    display: block;
    font-weight: 600;
    color: #16203c;
    margin-bottom: 8px;
}

.price-calc-field label span {
    color: #287ff9;
    font-weight: 700;
}

.price-calc-field input[type="range"] {
    width: 100%;
    height: 6px;
    border-radius: 4px;
    background: #e5e9f2;
    outline: none;
    accent-color: #287ff9;
    cursor: pointer;
}

.price-calc-field select.form-control {
    width: 100%;
    height: auto;
    padding: 12px 16px;
    line-height: 1.4;
    border: 1px solid #e5e9f2;
    border-radius: 6px;
    font-size: 15px;
    color: #16203c;
    background: #ffffff;
}

.price-calc-result {
    background: #f4f6fb;
    border-radius: 8px;
    padding: 18px 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.price-calc-result-label {
    display: block;
    color: #5c6478;
    font-size: 14px;
    margin-bottom: 4px;
}

.price-calc-result-value {
    font-size: 20px;
    font-weight: 700;
    color: #16203c;
}

.price-calc-result-value.price-calc-total {
    color: #287ff9;
    font-size: 26px;
}

.price-calc-warning {
    background: #fff4e9;
    border-left: 4px solid #ff6a1a;
    color: #b8560f;
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 14px;
    margin-bottom: 16px;
}

.price-calc-warning i {
    margin-right: 6px;
}

.price-calc-notes {
    list-style: none;
    padding: 0;
    margin: 0;
}

.price-calc-notes li {
    position: relative;
    padding-left: 14px;
    color: #5c6478;
    font-size: 13px;
    line-height: 1.7;
}

.price-calc-notes li:before {
    content: "*";
    position: absolute;
    left: 0;
}

@media (max-width: 767px) {
    .price-calc-header {
        padding: 18px 20px;
    }

    .price-calc-header h2 {
        font-size: 19px;
    }

    .price-calc-body {
        padding: 22px 20px;
    }

    .price-calc-result {
        flex-direction: column;
    }
}

/* ---- .section-bubble aynı 1920x47 section-bubble.png'yi content:url()
   ile kullanıyor - konteyner genişliğine göre germiyor, mobilde
   kırpılmış/bozuk görünüyor. Aynı background-image tekniğiyle düzeltiyoruz
   (bkz. .hero-bubble-anchor::after) ---- */
.section-bubble:after {
    content: "";
    background-image: url('img/figure/section-bubble.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 47px;
}

@media (max-width: 767px) {
    .section-bubble:after {
        background-repeat: repeat-x;
        background-size: 175% 100%;
        background-position: center top;
        height: 24px;
    }
}

/* ---- İç sayfa banner'ı (breadcrumb) ile altındaki içerik arası çok
   fazla boşluk vardı (tema varsayılanı 12rem = 192px üstten). Hakkımızda,
   iletişim, hizmet detay sayfaları ve fiyat listesi/hizmet bölgeleri bu
   sınıfları paylaşıyor ---- */
.section-padding-12,
.section-padding-12-9,
.section-padding-12-10 {
    padding-top: 70px;
}

/* ---- Hakkımızda sayfası: section-padding-12-9 sınıfı sayfada 2 kez
   kullanılıyor (arka arkaya), varsayılan alt boşluk (9rem=144px) aradaki
   mesafeyi çok açıyordu ---- */
.section-padding-12-9 {
    padding-bottom: 45px;
}

/* ---- Hakkımızda'nın 2. bölümü ("Halınız Bize Ulaştıktan Sonra...")
   üstteki bölüme fazla yaklaşınca başlığın üstündeki sparkle görseli
   (heading-layout1:after, -50px ofset) üstteki bölümle çakışıp
   görünmez oluyordu; bu bölüme özel ekstra üst boşluk + garanti z-index ---- */
.section-bubble.section-padding-12-9 {
    padding-top: 110px;
    position: relative;
    z-index: 1;
}

.section-bubble.section-padding-12-9 .heading-layout1 {
    position: relative;
    z-index: 2;
}

@media (max-width: 767px) {
    .section-padding-12,
    .section-padding-12-9,
    .section-padding-12-10 {
        padding-top: 40px;
    }

    .section-padding-12-9 {
        padding-bottom: 25px;
    }

    .section-bubble.section-padding-12-9 {
        padding-top: 65px;
    }

    /* ---- Hizmet detay sayfaları: mobilde "Hızlı Randevu" kutusu ile
       footer arası çok açıktı (section-padding-12 varsayılan alt boşluk
       12rem=192px) ---- */
    .section-padding-12 {
        padding-bottom: 30px;
    }

    /* ---- Üst boşluk daraltılınca başlık üstündeki dekoratif "sparkle"
       (figure3.png, -50px ofset) breadcrumb banner'ının içine giriyordu;
       banner'a en yakın başlıklarda (fiyat listesi, hizmet bölgelerimiz)
       mobilde gizliyoruz ---- */
    .heading-no-mobile-star:after {
        content: none;
    }
}

/* ---- Ana sayfa/Hizmetlerimiz: "Halı ve Stor Perde Yıkamada Tek Adresiniz"
   bölümünün üst/alt boşluğu çok fazlaydı (tema varsayılanı 17rem/9rem =
   272px/144px) ---- */
.section-padding-lg {
    padding-top: 130px;
    padding-bottom: 25px;
}

@media (max-width: 767px) {
    .section-padding-lg {
        padding-top: 70px;
        padding-bottom: 12px;
    }
}

/* ---- Hero görselindeki negatif margin (%115 genişlik) tekniği yatay
   taşmaya sebep oluyor. ÖNEMLİ: bunu html/body'ye DEĞİL, #wrapper'a
   uygulayın - html veya body'ye overflow-x eklemek, html'in overflow'u
   viewport'a "visible" olarak devretmesini engelleyip html'i kendi
   içine kapanan ayrı bir scroll kutusuna çeviriyor (yüksekliği viewport'a
   sabitleniyor), bu da window scroll'unu ve ona bağlı tüm JS'i (sticky
   header, back-to-top butonu vb.) tamamen kırıyor. #wrapper sıradan bir
   div olduğu için bu sorunu yaşamadan taşmayı güvenle kırpıyor; floating
   butonlar position:fixed olduğu için zaten bundan etkilenmiyor. ---- */
#wrapper {
    overflow-x: hidden;
}

/* ---- Ana sayfa: mobilde hero altı story-tarzı hızlı erişim butonları ---- */
.mobile-story-buttons {
    padding: 18px 0 4px;
    background-color: #ffffff;
    position: relative;
}

.mobile-story-buttons .story-btn-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
    position: relative;
    z-index: 11;
}

.mobile-story-buttons .story-btn-row:last-child {
    margin-bottom: 0;
}

.story-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 31%;
    text-decoration: none;
}

.story-btn-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid #14287b;
    padding: 2px;
    margin-bottom: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: border-color 0.3s ease;
    overflow: hidden;
}

.story-btn-icon img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.story-btn-label {
    font-size: 11px;
    font-weight: 600;
    color: #16203c;
    text-align: center;
    line-height: 1.25;
}

.story-btn:hover .story-btn-icon,
.story-btn:active .story-btn-icon {
    border-color: #cc1f1f;
}

/* ---- Hero altı ayraç: story butonları eklenince eski konumundan kaydı,
   asıl bubble geçişini hero fotoğrafının hemen altına (story butonlarının
   üstüne) taşıyoruz; About section'daki eski kopya mobilde tekrar etmesin ---- */
@media (max-width: 767px) {
    .mobile-story-buttons::before {
        content: "";
        background-image: url('img/figure/section-bubble.png');
        background-repeat: repeat-x;
        background-size: 175% 100%;
        background-position: center top;
        position: absolute;
        top: -6px;
        left: 0;
        width: 100%;
        height: 24px;
        z-index: 10;
        pointer-events: none;
    }
}

/* ---- Footer Google yorumları kutusu ---- */
.footer-google-badge {
    width: 150px;
    height: auto;
    display: inline-block;
    margin-bottom: 16px;
}

.footer-google-text {
    color: #b7bcc9;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 18px;
}

.footer-google-btn {
    display: inline-block;
    background: #fff;
    color: #14287b;
    padding: 10px 22px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.footer-google-btn:hover {
    background: #cc1f1f;
    color: #fff;
}

/* ---- Sarı buton hover'ı: mavi yerine kırmızı ---- */
.btn-slide-hover.btn-hover-red:after {
    background-color: #cc1f1f;
}

/* ---- Kırmızı buton, üzerine gelince mavi ---- */
.btn-bg-red {
    background-color: #cc1f1f;
    color: #fff;
}

.btn-slide-hover.btn-hover-blue:after {
    background-color: #287ff9;
}

/* ---- İletişim sayfası: Gönder butonu mavi, üzerine gelince kırmızı ---- */
.widget-contact-form .contact-form-box .fw-btn-fill {
    background-color: #287ff9;
    color: #ffffff;
}

.widget-contact-form .contact-form-box .fw-btn-fill:hover {
    background-color: #cc1f1f;
    color: #ffffff;
}

/* ---- İletişim sayfası: telefon/e-posta linkleri siyah, tıklanabilir ---- */
.contact-box-layout1 .contact-info .media-body ul li a {
    color: #16203c;
}

.contact-box-layout1 .contact-info .media-body ul li a:hover {
    color: #cc1f1f;
}

/* ---- Hizmet detay sayfaları: Hızlı Randevu kutusu telefon butonu mavi, üzerine gelince kırmızı ---- */
.btn-phone-solid {
    background-color: #287ff9;
    color: #ffffff;
    transition: background-color 0.3s ease-out;
}

.btn-phone-solid:hover {
    background-color: #cc1f1f;
    color: #ffffff;
}

/* ---- Hizmet detay sayfaları: aşama/adım kutucukları için mavi ikon rozeti ---- */
.step-icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background-color: #287ff9;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 14px;
}

/* ---- WhatsApp butonu hover: koyu yeşil ---- */
.btn-whatsapp-solid {
    background: #25D366;
    color: #fff;
    transition: background-color 0.3s ease-out;
}

.btn-whatsapp-solid:hover {
    background: #1ea952;
    color: #fff;
}

/* ---- CTA bölümü: tam ekran değil, üstteki kutularla hizalı, footer'dan ayrık ---- */
.action-contained {
    background-color: transparent !important;
    padding: 50px 0 60px !important;
}

.action-contained .container {
    background-color: #14287b;
    border-radius: 12px;
    padding: 50px 40px;
}

@media (max-width: 767px) {
    .action-contained .container {
        padding: 40px 20px;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
    }
}

/* ---- Tıklanabilir hizmet kartları ---- */
a.service-box-layout1 {
    text-decoration: none;
    color: inherit;
}

a.service-box-layout1 .item-content .item-title {
    color: #14287b;
    transition: color 0.3s ease-out;
}

a.service-box-layout1:hover .item-content .item-title {
    color: #287ff9;
}

.service-desc-text {
    color: #5c6478;
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
    text-align: center;
}

/* ---- Tek görselli Hero (sadece fotoğraf, kırpılmadan tam gösterim) ---- */
.hero-image-only {
    line-height: 0;
}

.hero-image-only img {
    width: 100%;
    max-height: 740px;
    object-fit: cover;
    object-position: center 27%;
    display: block;
}

@media (max-width: 767px) {
    .hero-image-only {
        overflow: hidden;
    }

    .hero-image-only img {
        max-height: none;
        max-width: none;
        width: 115%;
        height: auto;
        object-fit: unset;
        object-position: unset;
        margin-left: -15%;
    }
}

/* ---- Hero altında baloncuk geçiş çizgisi ---- */
.hero-bubble-anchor {
    position: relative;
}

.hero-bubble-anchor::after {
    content: "";
    background-image: url('img/figure/section-bubble.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: -44px;
    left: 0;
    width: 100%;
    height: 47px;
    z-index: 10;
    pointer-events: none;
}

@media (max-width: 767px) {
    .hero-bubble-anchor::after {
        content: none;
    }
}

/* ---- Hero/story butonları ile alttaki tesis fotoğrafı arası boşluk çok
   fazlaydı (tema varsayılanı section-padding-md-2 = 172.8px üstten,
   147.2px alttan) ---- */
.hero-bubble-anchor {
    padding-top: 60px;
    padding-bottom: 50px;
}

@media (max-width: 767px) {
    .hero-bubble-anchor {
        padding-top: 28px;
        padding-bottom: 25px;
    }
}

/* ---- Bölge / mahalle etiketleri ---- */
.area-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.area-tags li {
    background: #f4f6fb;
    border: 1px solid #e5e9f2;
    color: #16203c;
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 500;
}

.area-note {
    background: #fff4e9;
    border-left: 4px solid #ff6a1a;
    padding: 16px 20px;
    border-radius: 6px;
    margin: 25px 0;
    font-size: 15px;
}

/* ---- Basit fiyat tablosu ---- */
.price-table-wrap {
    overflow-x: auto;
    margin: 25px 0;
}

.price-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
}

.price-table th,
.price-table td {
    padding: 14px 18px;
    text-align: left;
    border-bottom: 1px solid #e9ecf3;
    font-size: 15px;
}

.price-table thead th {
    background: #1d70f9;
    color: #fff;
    font-weight: 600;
}

.price-table tbody tr:nth-child(even) {
    background: #f8f9fc;
}

.price-table td.price-cell {
    font-weight: 700;
    color: #ff6a1a;
    white-space: nowrap;
}

/* ---- Süreç adımları ---- */
.process-steps {
    counter-reset: step;
    list-style: none;
    padding: 0;
    margin: 0;
}

.process-steps li {
    counter-increment: step;
    position: relative;
    padding: 6px 0 6px 55px;
    margin-bottom: 18px;
}

.process-steps li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #cc1f1f;
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---- "29 Yıllık Tecrübe" vb. liste ikonları: hover'da sarı yerine kırmızı ---- */
.about-box-layout1 .list-item ul li:hover:after {
    color: #cc1f1f !important;
}

/* ---- Breadcrumb: aktif sayfa sarı yerine beyaz + kalın ---- */
.inner-page-banner .breadcrumbs-area ul li {
    color: #f2f2f2;
}

.inner-page-banner .breadcrumbs-area ul li:last-child {
    color: #ffffff;
    font-weight: 700;
}

.process-steps h3 {
    font-size: 18px;
    margin-bottom: 4px;
}

.process-steps p {
    margin: 0;
    color: #5c6478;
}

/* ---- Sticky whatsapp butonu ---- */
.floating-contact-buttons {
    position: fixed;
    left: 24px;
    bottom: 24px;
    display: flex;
    flex-direction: column-reverse;
    gap: 14px;
    z-index: 999;
}

.floating-contact-buttons a {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 26px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    text-decoration: none;
    transition: transform 0.2s ease;
}

.floating-contact-buttons a:hover {
    color: #fff;
    transform: scale(1.06);
}

.floating-whatsapp-btn {
    background: #25D366;
}

.floating-call-btn {
    background: #14287b;
}

/* ---- Gerçek logo görseli ---- */
.site-logo {
    max-height: 68px;
    width: auto;
    display: block;
}

@media (max-width: 991px) {
    .site-logo {
        max-height: 50px;
    }
}

/* ---- Header alanlarını dikey genişlet ---- */
#header-topbar {
    padding: 12px 0;
}

.header-menu.menu-layout1 > .container > .row {
    padding: 14px 0;
}

.site-logo-footer-wrap {
    display: inline-block;
    margin-bottom: 20px;
}

.site-logo-footer {
    max-height: 80px;
    width: auto;
    display: block;
}

/* ---- Mobil menüdeki logo boyutu ---- */
.mean-container .mean-bar .mobile-menu-nav-back {
    height: 78px;
}

.mean-container .mobile-menu-nav-back .logo-mobile img {
    max-height: 58px;
    width: auto;
    display: block;
}

/* ---- Ana menü öğelerinin tek satırda sığması ---- */
.header-menu.menu-layout1 nav.template-main-menu > ul > li > a {
    padding: 40px 14px;
    font-size: 15px;
    white-space: nowrap;
}

@media (max-width: 1399px) {
    .header-menu.menu-layout1 nav.template-main-menu > ul > li > a {
        padding: 40px 10px;
        font-size: 14px;
    }
}

.header-menu.menu-layout1.rt-sticky nav.template-main-menu > ul > li > a {
    padding: 28px 12px;
    font-size: 15px;
    white-space: nowrap;
}

/* ---- Metin logo ---- */
.text-logo {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    text-decoration: none;
}

.text-logo .text-logo-main {
    font-size: 26px;
    font-weight: 800;
    color: #16203c;
    letter-spacing: 0.5px;
}

.text-logo .text-logo-main span {
    color: #ff6a1a;
}

.text-logo .text-logo-sub {
    font-size: 12px;
    font-weight: 500;
    color: #5c6478;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.bg-Primary .text-logo .text-logo-main,
footer .text-logo .text-logo-main {
    color: #fff;
}

.carpet-type-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    margin: 25px 0;
    list-style: none;
    padding: 0;
}

.carpet-type-list li {
    background: #f8f9fc;
    border: 1px solid #e9ecf3;
    border-radius: 8px;
    padding: 16px 18px;
}

.carpet-type-list li strong {
    display: block;
    color: #16203c;
    margin-bottom: 6px;
}