/*
 * Küçük ekran düzeltmeleri (Hipno temaları: tema-1 / tema-2 / tema-3)
 *
 * NEDEN: Tema CSS'i masaüstü öncelikli ve yalnızca üç kırılma noktası içeriyor
 * (max-width 1024 / 991 / 767). 767px'in ALTINDA ayrı bir kural yok; bu yüzden
 * 480px ve altındaki telefonlar 767px düzenini kullanıyor — başlıklar sıkışık,
 * geniş içerikler (tablo, kod, saat ızgarası) yatay taşma yapıyor.
 *
 * Bu dosya tema CSS'inden SONRA yüklenir ve yalnızca küçük ekranlara dokunur;
 * vendor tema dosyası değiştirilmez (güncellemede kaybolmaz).
 */

/* ---------------------------------------------------------------- genel */

/* Görsel/medya asla konteynerini taşırmasın */
img,
video,
iframe,
svg {
    max-width: 100%;
}

/* Uzun kelime / URL taşmasını engelle */
p,
li,
dd,
h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

/*
 * Geniş içerik kendi konteynerinde kaysın — sayfanın tamamı yatay
 * kaymasın. (body'ye overflow-x:hidden vermek sorunu gizler, çözmez.)
 */
.blog-html table,
.dg-prose table,
table.icerik-tablo {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.blog-html pre,
.dg-prose pre {
    overflow-x: auto;
}


/* ---------------------------------------------------------------------
   T-6: Akışkan tipografi ölçeği (tüm ekran boyutlarında).

   Tema CSS'i sabit `rem` değerleri ve yalnızca üç kırılma noktası kullanıyor.
   `clamp()` ile başlıklar kırılma noktası eklemeden ekran genişliğine göre
   ölçekleniyor: küçük telefonda sıkışmıyor, geniş ekranda orantısız büyümüyor.

   Sıra önemli: bu blok yukarıdaki 480/380px kurallarından ÖNCE gelir ki
   o kurallar gerektiğinde üzerine yazabilsin.
   --------------------------------------------------------------------- */
:root {
    /* min ← tercih (viewport'a göre) → max */
    --ra-fs-h1: clamp(1.85rem, 1.2rem + 3.2vw, 3.5rem);
    --ra-fs-h2: clamp(1.55rem, 1.05rem + 2.4vw, 2.75rem);
    --ra-fs-h3: clamp(1.15rem, 0.95rem + 1.1vw, 1.6rem);
    --ra-fs-govde: clamp(0.94rem, 0.9rem + 0.2vw, 1.05rem);
}

.section-title h2,
.page-header-box h1,
.about-us-content h2 {
    font-size: var(--ra-fs-h2);
    line-height: 1.22;
}

.hero-content h1,
.main-slider__title {
    font-size: var(--ra-fs-h1);
    line-height: 1.12;
}

.our-services h3,
.why-choose-item-content h3,
.post-item-content h3 {
    font-size: var(--ra-fs-h3);
    line-height: 1.3;
}

.section-title p,
.about-us-content p,
.hk-metin p {
    font-size: var(--ra-fs-govde);
}

/* ------------------------------------------------- 480px ve altı (telefon) */

@media only screen and (max-width: 480px) {
    /* Akışkan başlık ölçeği: sabit rem yerine ekrana göre */
    .section-title h2,
    .page-header-box h1 {
        font-size: clamp(1.45rem, 7.5vw, 2rem);
        line-height: 1.25;
    }

    .section-title h3 {
        font-size: 0.78rem;
        letter-spacing: 0.08em;
    }

    .section-title p,
    .about-us-content p {
        font-size: 0.92rem;
        line-height: 1.7;
    }

    /* Bölüm boşlukları: 767px düzeninde telefonda çok yer kaplıyor */
    .about-us,
    .our-services,
    .why-choose-us,
    .what-we-do,
    .cta-section,
    .our-testimonial,
    .our-blog {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .section-row,
    .section-title {
        margin-bottom: 28px;
    }

    /* Butonlar: dar ekranda yan yana sığmıyordu */
    .btn-default {
        padding: 12px 18px;
        font-size: 0.85rem;
    }

    .about-us-content-btn,
    .cta-box-btn,
    .footer-cta-btn {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .about-us-content-btn .btn-default,
    .cta-box-btn .btn-default {
        width: 100%;
        text-align: center;
    }

    /* Sayaç / istatistik bloğu tek sütuna insin */
    .intro-video-counter {
        flex-direction: column;
        gap: 18px;
    }

    /* Footer iletişim kutuları alt alta */
    .footer-contact-box {
        flex-direction: column;
        gap: 14px;
    }

    .footer-contact-item {
        max-width: 100%;
    }
}

/* ------------------------------------------------- 380px ve altı (dar telefon) */

@media only screen and (max-width: 380px) {
    .section-title h2,
    .page-header-box h1 {
        font-size: clamp(1.3rem, 8vw, 1.6rem);
    }

    .btn-default {
        padding: 11px 14px;
        font-size: 0.8rem;
    }

    /* WhatsApp yüzen butonu içeriği kapatmasın */
    .wa-float {
        width: 46px;
        height: 46px;
        bottom: 14px;
        right: 14px;
    }

    .wa-float i {
        font-size: 22px;
    }
}