/*
 * Parla Su - siteye özel CSS.
 *
 * solox.css'ten SONRA yüklenir. Template'in kendi dosyalarına dokunmayın;
 * şablon güncellemesi geldiğinde üzerine yazılır. Sadece template'te karşılığı
 * olmayan küçük eklentiler buraya yazılır.
 */

/* İletişim sayfasındaki Google Haritalar gömme kodu duyarlı olsun. */
.contact-page__map {
    line-height: 0;
}

.contact-page__map iframe {
    width: 100%;
    height: 450px;
    border: 0;
    display: block;
}

/* contact-one__info listesinde satırlar arası nefes payı. */
.contact-one__info__item + .contact-one__info__item {
    margin-top: 20px;
}

/*
 * Slaytların eşit yükseklikte olması.
 *
 * Slayt yüksekliğini içeriği belirliyor: başlığı iki satıra kayan bir slayt,
 * tek satırlık olandan ~120px daha uzun oluyor. Owl carousel kapsayıcıyı en
 * uzun slayta göre ayarladığı için kısa slaytların altında boşluk kalıyor,
 * gezinme noktaları da o beyaz alana düşüp görünmez oluyordu.
 *
 * Şablonun demosunda üç slaytın başlığı da aynı olduğu için sorun fark
 * edilmemiş. Stage'i flex yaparak tüm slaytları en uzun olana eşitliyoruz;
 * içerik dikeyde ortalanır ve arka plan görseli alanı tam doldurur.
 */
.main-slider-two__carousel .owl-stage {
    display: flex;
    align-items: stretch;
}

.main-slider-two__carousel .owl-item {
    /* Genişliği owl satır içi stille veriyor; flex onu daraltmasın. */
    flex: 0 0 auto;
    display: flex;
}

.main-slider-two__carousel .owl-item > .item {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
}

/*
 * Dikey (column) bir flex kutusunda çocuğun yüksekliği içeriğe göre belirlenir;
 * align-items: stretch yalnızca yatayda çalışır. Bu yüzden slayt kutusuna
 * açıkça "büyü" demek gerekiyor, yoksa sarmalayıcı uzasa da kutu kısa kalır.
 */
.main-slider-two__carousel .main-slider-two__item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 1 auto;
    width: 100%;
}

/*
 * Form alanları: solox.css yalnızca input[type=text] ve input[type=email]
 * biçimlendiriyor. Telefon alanı type="tel" olduğu için hiç stil almıyordu
 * (arka plan, yükseklik, iç boşluk yok). Aynı kuralları tel ve diğer metin
 * benzeri türlere de uyguluyoruz ki ileride eklenen alanlar da bozulmasın.
 */
.form-one input[type='tel'],
.form-one input[type='date'],
.form-one input[type='number'],
.form-one input[type='url'] {
    display: block;
    width: 100%;
    height: 58px;
    background-color: var(--solox-gray, #f9f6f1);
    color: var(--solox-text, #838184);
    font-size: 14px;
    font-weight: 500;
    border: none;
    outline: none;
    padding-left: 30px;
    padding-right: 30px;
}

/*
 * Altın zeminli randevu formunda alanlar kutu değil, şeffaf ve alt çizgili.
 * solox.css bunu yalnızca text/email için tanımlıyor; tel de aynı görünsün.
 */
.contact-one__form input[type='tel'] {
    padding: 0;
    height: 58px;
    background-color: rgba(0, 0, 0, 0);
    border-bottom: 2px solid rgba(var(--solox-white-rgb, 255, 255, 255), 0.15);
    color: var(--solox-white, #fff);
}

/*
 * Hizmet kartlarında ikon hizası.
 *
 * Kart 992px üstünde flex + flex-wrap:wrap ile diziliyor. Bazı ikon glifleri
 * (örn. icon-face-mask) diğerlerinden geniş olduğu için ikon + metin tek satıra
 * sığmıyor, metin alt satıra kayıyor ve ikon tek başına üstte kalıyor.
 * Metnin daralabilmesine izin vererek tüm kartlarda ikonu solda tutuyoruz.
 */
@media (min-width: 992px) {
    .membership-two-card__icon {
        flex: 0 0 auto;
        line-height: 1;
    }

    .membership-two-card__content {
        flex: 1 1 0;
        min-width: 0;
    }
}

/* Panelden girilen zengin metinlerde son paragrafın alt boşluğu fazla olmasın. */
.contact-one__text > p:last-child,
.why-choose-two__text > p:last-child,
.service-details__text > p:last-child {
    margin-bottom: 0;
}

/*
 * Yorum bölümündeki müşteri fotoğrafları artık bağlantı (<a href>) değil;
 * adres çubuğunu kirletmemesi için href kaldırıldı. İmleç yine de tıklanabilir
 * olduklarını göstersin.
 */
.testimonials-two__carousel-thumb .item {
    cursor: pointer;
}