/* fixes.css — semantik ve erişilebilirlik düzeltmeleri için ek stiller.
   style.css'i değiştirmeden üzerine yazar; sıra önemli (header.php'de sonra yüklenir). */

/* --- SSS başlıkları artık <button> (klavye ile açılabilir) --- */
button.faq-header {
    width: 100%;
    background: none;
    border: 0;
    color: inherit;
    text-align: left;
    gap: 16px;
}

.faq-header > span {
    flex: 1 1 auto;
}

/* --- İstatistik başlıkları h2 olarak işaretlendi (h1 -> h2 sırası korunur) --- */
.stat-item h2 {
    font-size: 2rem;
    color: var(--accent);
    margin-bottom: 4px;
}

/* --- Konum kartı başlığı --- */
.floating-info-text .floating-info-title {
    color: var(--bg-white);
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0 0 2px;
}

/* --- Sertifika maddeleri (ana sayfa vurgu bloğu) --- */
.cert-list {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    color: #e2e8f0;
}

.cert-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.95rem;
    margin-bottom: 8px;
}

.cert-list li i {
    color: var(--accent);
    margin-top: 4px;
}

@media (max-width: 768px) {
    .cert-block {
        grid-template-columns: 1fr !important;
        padding: 28px !important;
    }
}

/* --- Form durum mesajı --- */
.form-status {
    display: none;
    margin-top: 16px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 0.92rem;
    line-height: 1.5;
}

.form-status.is-success {
    display: block;
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.form-status.is-error {
    display: block;
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

/* --- Gizli tuzak alan (botlar doldurur, insanlar görmez) --- */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- Klavye odak görünürlüğü --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

/* --- Görsellerin yerleşimi (CLS) --- */
.blog-card-image img,
.treatment-article img,
.about-page-content img,
.author-image {
    display: block;
    max-width: 100%;
}

/* ==========================================================================
   YASAL SAYFALAR (Gizlilik / Çerez / Kullanım Koşulları) + çerez onay penceresi
   + mobil dokunma hedefleri  — 2026-09-27
   ========================================================================== */

/* --- Yasal metin kartı: okunabilir satır uzunluğu ve net başlık hiyerarşisi --- */
.legal-card {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 40px;
    box-shadow: var(--shadow-sm);
    max-width: 900px;
}

.legal-content {
    font-size: 1.02rem;
    line-height: 1.8;
}

.legal-content h2 {
    font-size: 1.35rem;
    margin: 32px 0 12px;
}

.legal-content h2:first-child {
    margin-top: 0;
}

.legal-content h3 {
    font-size: 1.12rem;
    margin: 24px 0 10px;
}

.legal-content ul,
.legal-content ol {
    margin: 12px 0 16px;
    padding-left: 22px;
}

.legal-content li {
    margin-bottom: 8px;
}

.legal-content code {
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 0.92em;
}

.legal-content a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: underline;
}

.legal-updated {
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* --- Alt bilgi: yasal metin bağlantıları --- */
.footer-legal a {
    color: #94a3b8;
    font-size: 0.85rem;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.footer-legal a:hover,
.footer-legal a:focus-visible {
    color: var(--bg-white);
}

.footer-legal__reset {
    font-size: 0.85rem !important;
}

.footer-legal__note {
    font-size: 0.82rem;
    color: var(--success);
    flex-basis: 100%;
    text-align: center;
}

/* --- Çerez onay penceresi (yalnızca GA4 kimliği girilmişse basılır) --- */
.cookie-banner {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 1200;              /* WhatsApp düğmesinin üstünde kalır */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 20px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 18px 22px;
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: var(--shadow-premium, 0 10px 30px rgba(0, 0, 0, 0.18));
}

.cookie-banner[hidden] {
    display: none;
}

.cookie-banner__text {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.6;
    flex: 1 1 380px;
}

.cookie-banner__text a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: underline;
}

.cookie-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cookie-banner__actions .btn {
    padding: 10px 18px;
    font-size: 0.88rem;
}

@media (max-width: 860px) {
    .cookie-banner {
        left: 10px;
        right: 10px;
        bottom: 88px;            /* yüzen WhatsApp düğmesini kapatmasın */
        padding: 14px 16px;
    }

    .cookie-banner__actions {
        width: 100%;
    }

    .cookie-banner__actions .btn {
        flex: 1 1 auto;
        justify-content: center;
    }
}

/* Onay penceresi açıkken yüzen WhatsApp düğmesi pencerenin üstüne çıkarılır */
body.has-cookie-banner .whatsapp-widget {
    bottom: 140px;
}

@media (max-width: 860px) {
    /* Mobilde pencere zaten düğmenin üstünde durur; düğme yerinde kalır */
    body.has-cookie-banner .whatsapp-widget {
        bottom: 30px;
    }
}

@media (max-width: 768px) {
    .legal-card {
        padding: 24px 18px;
    }

    .legal-content {
        font-size: 1rem;
    }
}

/* ==========================================================================
   MOBİL DOKUNMA HEDEFLERİ (≥40-48px) ve 320px başlık taşması düzeltmesi
   ========================================================================== */
@media (max-width: 768px) {
    /* GERÇEK HATA DÜZELTMESİ: style.css'te `.nav-menu { display: none }` kuralı
       (≤768px) panelin opacity/visibility geçişini iptal ediyordu; hamburger
       düğmesine basıldığında menü hiç açılmıyordu. Açık durum burada açıkça
       tanımlanır (fixes.css en son yüklendiği için bu kurallar geçerlidir). */
    .nav-menu {
        display: none;
    }

    .nav-menu {
        z-index: 1300; /* çerez onay penceresinin üstünde (bkz. not yukarıda) */
    }

    .nav-menu.active {
        display: flex;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }
}

@media (max-width: 860px) {
    .btn,
    button,
    .faq-header {
        min-height: 44px;
    }

    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .nav-link {
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-menu-toggle {
        min-height: 48px;
        min-width: 48px;
    }

    .lang-switcher a {
        min-height: 44px;
        min-width: 44px;
        justify-content: center;
    }

    .footer-links a,
    .footer-legal a,
    .footer-about a,
    #cookie-reset {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
    }

    .blog-card .btn,
    .hero-actions .btn,
    .sidebar-card .btn {
        min-height: 44px;
    }

    /* Tek başına duran (cümle içinde olmayan) bağlantılar */
    .page-dynamic-content p > a:only-child,
    .page-dynamic-content li > a:only-child,
    .legal-content p > a:only-child,
    .legal-content li > a:only-child {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
    }

    /* Telefon / WhatsApp / e-posta bağlantıları: paragraf içinde simgeyle birlikte
       durdukları için ":only-child" kuralına takılmıyorlardı. */
    .footer p a,
    .footer-about a,
    .contact-info-text a,
    .contact-card a,
    a[href^="tel:"],
    a[href^="mailto:"],
    a[href*="wa.me"] {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
    }

    .page-dynamic-content,
    .legal-content {
        line-height: 1.75;
    }
}

/* 320-420px: logo + menü düğmesi yan yana sığsın (taşma/kırpılma olmasın) */
@media (max-width: 420px) {
    .nav-container {
        gap: 10px;
    }

    .logo {
        font-size: 1.05rem;
        gap: 6px;
        min-width: 0;
        flex: 1 1 auto;
        line-height: 1.15;
    }

    .logo i {
        font-size: 1.1rem;
        flex: 0 0 auto;
    }

    .logo span {
        /* "Bilgilendirme" kelimesi ortadan bölünmesin ("Bilgilen/dirme" oluyordu);
           kelimeler arasından sarılır. */
        word-break: normal;
        overflow-wrap: normal;
        hyphens: none;
    }

    .mobile-menu-toggle {
        flex: 0 0 auto;
        padding: 6px 4px;
    }

    .mobile-menu-toggle .toggle-text {
        font-size: 0.78rem;
    }
}

/* ==========================================================================
   BAŞLIK / MENÜ DÜZELTMELERİ — 769-991px arası ve mobil dil değiştirici
   ========================================================================== */

/* 769-991px: masaüstü menü sığmıyordu; son bağlantılar kırpılıyordu (ör. 800px'te
   "İletişim ve Konum" ekran dışında kalıyordu). Bu aralıkta hamburger menüye geçilir. */
@media (min-width: 769px) and (max-width: 991px) {
    .mobile-menu-toggle {
        display: flex;
    }

    .lang-switcher {
        display: none;
    }

    .nav-menu {
        position: fixed;
        top: 70px;
        left: 0;
        width: 100%;
        height: calc(100vh - 70px);
        background-color: var(--bg-white);
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: 40px 24px;
        gap: 24px;
        list-style: none;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
        pointer-events: none;
        border-top: 1px solid var(--border-color);
        /* Çerez onay penceresi (z-index 1200) daha aşağıda kalır; açık menü
           kullanıcı isteğiyle açıldığı için her şeyin üstünde olmalıdır. */
        z-index: 1300;
        display: none;
    }

    .nav-menu.active {
        display: flex;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }

    .nav-link {
        font-size: 1.2rem;
        font-weight: 600;
        width: 100%;
        text-align: center;
        padding: 12px 0;
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Mobil/tablet menüde dil değiştirici tamamen kaybolmasın: menü açıkken
   panelin altında görünür (main.js gövdeye "menu-acik" sınıfını ekler). */
@media (max-width: 991px) {
    /* NOT: `.header` position:fixed + backdrop-filter:blur() taşıdığı için
       içindeki position:fixed öğeler viewport'a değil BAŞLIĞA göre konumlanır.
       Bu yüzden yükseklik viewport'tan hesaplanır (top: 84px = başlığın altı). */
    .lang-switcher {
        display: flex;
        position: fixed;
        left: 50%;
        top: 84px;
        bottom: auto;
        margin: 0;
        transform: translateX(-50%) translateY(-10px);
        z-index: 1310;
        background-color: var(--bg-light);
        box-shadow: var(--shadow-sm);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    }

    body.menu-acik .lang-switcher {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
        pointer-events: auto;
    }

    /* Dil seçimi panelin en üstünde durduğu için menüye üst boşluk verilir;
       küçük ekranlarda panel kaydırılabilir olsun. */
    .nav-menu {
        padding-top: 132px;
        overflow-y: auto;
    }
}

@media (min-width: 769px) and (max-width: 991px) {
    .nav-menu {
        padding: 132px 24px 40px;
        overflow-y: auto;
    }
}

/* Menü açıkken başlık yığın bağlamı yükseltilir: aksi hâlde `.header{z-index:1000}`
   yüzünden panelin 1300 değeri işe yaramaz ve çerez penceresi (1200) menünün
   altındaki bağlantıları kapatır. */
body.menu-acik .header {
    z-index: 1400;
}

/* ==========================================================================
   BLOG IZGARASI — 320-380px taşma düzeltmesi
   ========================================================================== */
/* style.css: `.blog-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) }`
   → 320px ekranda kolon en az 320px olduğu için kartlar sağdan taşıyordu
   (blog-card / blog-card-image / img sağ kenarı ekran dışında). */
@media (max-width: 380px) {
    .blog-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .blog-card-image img {
        height: 170px;
    }
}

/* 380px altı: başlıkta yer kalmadığı için "MENÜ" yazısı gizlenir (hamburger
   simgesi kalır) ve marka adı ortadan bölünmez. */
@media (max-width: 380px) {
    .mobile-menu-toggle .toggle-text {
        display: none;
    }

    /* Marka adı hamburger simgesine değmesin: yazı bir tık küçültülür ve
       araya nefes payı konur. */
    .logo {
        font-size: 0.92rem;
        padding-right: 10px;
    }

    .mobile-menu-toggle {
        padding-left: 8px;
    }
}