/*
 * CPAP Merkezi blog — tüm site stili.
 *
 * Eski yığın: XStore + Elementor + WPBakery = 2,3 MB CSS.
 * Bu dosya onun yerini alıyor. Yazı tipi sistem yığınından geliyor;
 * web fontu indirilmiyor çünkü trafiğin çoğu mobil ve ilk boyama
 * süresi en çok oradan zarar görüyordu.
 *
 * Renk kimliği mağazadan (#337ab7) geliyor — okur blog ile mağaza arasında
 * geçerken kopukluk hissetmemeli. Koyu lacivert ton başlıklarda ve alt
 * bölümde kullanılıyor; tıbbi içerikte ciddiyet hissini veren şey o.
 */

/* ---------------- Palet ---------------- */

/*
 * Marka aslinda UC renkli ve tasarim uzun sure yalnizca birini kullandi.
 * Logodan orneklendi:
 *
 *   #337ab7  magaza mavisi  — baglantilar, eylem dugmeleri
 *   #2f9e2f  logo yesili    — blogun kendi imzasi: bolum isaretleri,
 *                             kategori rozetleri, okuma cubugu
 *   #f2c230  "blog" sarisi  — yalnizca ipucu kutularinda, az ve seyrek
 *
 * Mavi eylem rengi olarak kaldi: okur blogdan magazaya gecerken ayni
 * dugme rengini gormeli. Yesil bloga kimlik veriyor; ikisini ayirmak,
 * "burasi blog" ile "buradan magazaya gidilir"i gozle ayirt edilebilir
 * kiliyor.
 */

:root {
    --metin: #1c2024;
    --baslik: #0f2440;
    --soluk: #5b666f;
    --cizgi: #e3e8ec;
    --cizgi-yumusak: #eef2f5;
    --zemin: #ffffff;
    --zemin-yumusak: #f5f8fa;
    --zemin-kart: #ffffff;

    --vurgu: #337ab7;
    --vurgu-koyu: #23527c;
    --vurgu-yazi: #ffffff;
    --vurgu-tul: #eaf2f9;

    --yesil: #2f9e2f;
    --yesil-koyu: #237a23;
    --yesil-tul: #ecf7ec;

    --sari: #f2c230;
    --sari-tul: #fdf6e0;

    --lacivert: #0f2440;
    --uyari-zemin: #fff8e6;
    --uyari-cizgi: #e8c56a;

    --golge: 0 1px 2px rgb(15 36 64 / 6%);
    --golge-orta: 0 4px 14px rgb(15 36 64 / 8%);
    --golge-yuksek: 0 10px 30px rgb(15 36 64 / 10%);

    --olcu: 70rem;

    /*
     * Yazi olcusu 43rem'di ve 17px puntoyla satir basina ~81 karakter
     * dusuyordu. Okuma arastirmalarinin isaret ettigi aralik 60-75; uzun
     * satirda goz satir basina donerken yerini kaybediyor. 40rem + 18px
     * punto ~68 karakter veriyor.
     */
    --yazi-olcu: 40rem;

    --gecis: 160ms cubic-bezier(0.4, 0, 0.2, 1);
    --yuvarlak: 0.65rem;
    --yuvarlak-buyuk: 1rem;
}

/*
 * Koyu palet iki yerden geliyor:
 *  1) sistem tercihi — ama kullanici elle "gunduz" sectiyse devre disi
 *  2) ustteki dugmeyle elle secim
 * Ikisi de ayni degerleri kullansin diye blok iki kez yaziliyor; CSS'te
 * secici listesi ile birlestirmek mumkun degil (media sorgusu icinde).
 */
@media (prefers-color-scheme: dark) {
    :root:not([data-tema='gunduz']) {
        --metin: #e6eaed;
        --baslik: #f2f6f9;
        --soluk: #a2aeb7;
        --cizgi: #2a3238;
        --cizgi-yumusak: #222a30;
        --zemin: #14181b;
        --zemin-yumusak: #1b2126;
        --zemin-kart: #1a2025;

        --vurgu: #7fb4dd;
        --vurgu-koyu: #a8cced;
        --vurgu-yazi: #10171c;
        --vurgu-tul: #1a2733;

        --yesil: #5ec95e;
        --yesil-koyu: #86dd86;
        --yesil-tul: #17281a;

        --sari: #f0cd5a;
        --sari-tul: #2a2517;

        --lacivert: #0c1116;
        --uyari-zemin: #2a2517;
        --uyari-cizgi: #6b5a2a;

        --golge: 0 1px 2px rgb(0 0 0 / 40%);
        --golge-orta: 0 4px 14px rgb(0 0 0 / 42%);
        --golge-yuksek: 0 10px 30px rgb(0 0 0 / 45%);
    }
}

:root[data-tema='gece'] {
    --metin: #e6eaed;
    --baslik: #f2f6f9;
    --soluk: #a2aeb7;
    --cizgi: #2a3238;
    --cizgi-yumusak: #222a30;
    --zemin: #14181b;
    --zemin-yumusak: #1b2126;
    --zemin-kart: #1a2025;

    --vurgu: #7fb4dd;
    --vurgu-koyu: #a8cced;
    --vurgu-yazi: #10171c;
    --vurgu-tul: #1a2733;

    --yesil: #5ec95e;
    --yesil-koyu: #86dd86;
    --yesil-tul: #17281a;

    --sari: #f0cd5a;
    --sari-tul: #2a2517;

    --lacivert: #0c1116;
    --uyari-zemin: #2a2517;
    --uyari-cizgi: #6b5a2a;

    --golge: 0 1px 2px rgb(0 0 0 / 40%);
    --golge-orta: 0 4px 14px rgb(0 0 0 / 42%);
    --golge-yuksek: 0 10px 30px rgb(0 0 0 / 45%);
}

/* ---------------- Temel ---------------- */

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--zemin);
    color: var(--metin);
    font: 1.125rem/1.72 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    -webkit-text-size-adjust: 100%;
}

.kap { max-width: var(--olcu); margin: 0 auto; padding: 0 1.5rem; }

a { color: var(--vurgu); }

img { max-width: 100%; height: auto; }

h1, h2, h3 { color: var(--baslik); }

/* ---------------- Üst ---------------- */

.ust {
    border-bottom: 1px solid var(--cizgi);
    background: var(--zemin);
    position: sticky;
    top: 0;
    z-index: 10;
}

.ust-ic {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 4.25rem;
    flex-wrap: wrap;
}

.marka { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; }
.marka img { display: block; width: 162px; height: 40px; }

/*
 * Logonun iki sürümü var; hangisinin görüneceğini tema belirliyor.
 *
 * Önce renkli logonun arkasına beyaz bir kutu konuyordu: koyu bir
 * sayfanın üstünde duran beyaz dikdörtgen, çözümden çok yama gibiydi.
 * Beyaz sürüm (`logo_beyaz.png`) o kutuyu gereksiz kılıyor.
 */
.logo-gece { display: none; }

@media (prefers-color-scheme: dark) {
    :root:not([data-tema='gunduz']) .logo-gunduz { display: none; }
    :root:not([data-tema='gunduz']) .logo-gece { display: block; }
}

:root[data-tema='gece'] .logo-gunduz { display: none; }
:root[data-tema='gece'] .logo-gece { display: block; }

/* Elle "gündüz" seçildiyse sistem tercihi ne olursa olsun renkli sürüm. */
:root[data-tema='gunduz'] .logo-gunduz { display: block; }
:root[data-tema='gunduz'] .logo-gece { display: none; }

.ust nav a ...).
 *
 * O işaretleme artık yok; yerine yeşil `.ana-menu` şeridi geçti. Kurallar
 * dosyada kaldığı sürece zararsız değillerdi: `.ust nav a` özgüllüğü
 * (0,1,2) `.ana-menu-liste a` (0,1,1) kuralını yeniyor ve menü yazısını
 * yeşil zeminde gri (--soluk) basıyordu.
 */

/* Gece / gündüz düğmesi */
.tema-dugmesi {
    background: none;
    border: 1px solid var(--cizgi);
    border-radius: 0.35rem;
    color: var(--soluk);
    cursor: pointer;
    padding: 0.35rem 0.5rem;
    line-height: 1;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
}
.tema-dugmesi:hover { border-color: var(--vurgu); color: var(--vurgu); }
.tema-dugmesi .gece-ikon { display: none; }
:root[data-tema='gece'] .tema-dugmesi .gece-ikon { display: inline; }
:root[data-tema='gece'] .tema-dugmesi .gunduz-ikon { display: none; }

@media (prefers-color-scheme: dark) {
    :root:not([data-tema='gunduz']) .tema-dugmesi .gece-ikon { display: inline; }
    :root:not([data-tema='gunduz']) .tema-dugmesi .gunduz-ikon { display: none; }
}

@media (max-width: 30rem) {
    .marka img { width: 130px; height: 32px; }
}

/* ---------------- Liste ---------------- */

.sayfa-basligi {
    font-size: 2.25rem;
    line-height: 1.2;
    margin: 3rem 0 0.75rem;
    letter-spacing: -0.025em;
}
.sayfa-aciklamasi { color: var(--soluk); margin: 0 0 2rem; max-width: var(--yazi-olcu); font-size: 1.0625rem; }

.kategori-seridi {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 2.5rem;
    padding: 0;
    list-style: none;
}
.kategori-seridi a {
    display: inline-block;
    padding: 0.35rem 0.8rem;
    border: 1px solid var(--cizgi);
    border-radius: 999px;
    font-size: 0.8125rem;
    text-decoration: none;
    color: var(--soluk);
}
.kategori-seridi a:hover,
.kategori-seridi a[aria-current] { border-color: var(--vurgu); color: var(--vurgu); }
.kategori-seridi .adet { color: var(--soluk); opacity: 0.65; }

.izgara {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: 1.75rem;
    margin: 0 0 4rem;
    padding: 0;
    list-style: none;
}

/*
 * Hareket kuralı: yalnızca kullanıcının yaptığı bir şeye karşılık veren
 * geçişler. Sayfa açılırken kendiliğinden oynayan animasyon yok — o tür
 * efektler ilk boyamayı geciktiriyor ve trafiğin çoğu mobil.
 * Süreler kısa (120–200 ms); daha uzunu arayüzü yavaş hissettirir.
 */
.kart {
    border: 1px solid var(--cizgi);
    border-radius: 0.85rem;
    overflow: hidden;
    background: var(--zemin);
    box-shadow: var(--golge);
    display: flex;
    flex-direction: column;
    transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.kart:hover {
    border-color: var(--vurgu);
    box-shadow: var(--golge-yuksek);
    transform: translateY(-3px);
}
.kart:focus-within { border-color: var(--vurgu); }

.kart-gorsel {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    width: 100%;
    background: var(--zemin-yumusak);
    transition: transform 220ms ease;
}
.kart:hover .kart-gorsel { transform: scale(1.03); }

.kart-gorsel-yok {
    aspect-ratio: 16 / 9;
    background: var(--zemin-yumusak);
    display: grid;
    place-items: center;
    color: var(--soluk);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
}

.kart-ic { padding: 1.25rem 1.35rem 1.4rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.kart-ic h2 { font-size: 1.09375rem; line-height: 1.45; margin: 0; }
.kart-ic h2 a { text-decoration: none; color: var(--baslik); }
.kart-ic h2 a:hover { color: var(--vurgu); }
.kart-ozet { margin: 0; font-size: 0.9rem; color: var(--soluk); }
.kart-bilgi { margin-top: auto; font-size: 0.8125rem; color: var(--soluk); display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* ---------------- Yazı ---------------- */

.yazi { max-width: var(--yazi-olcu); margin: 0 auto; }

.kirinti { font-size: 0.8125rem; color: var(--soluk); margin: 2rem 0 1rem; }
.kirinti a { color: var(--soluk); }

/*
 * Akiskan olcek: 320px ekranda 1.95rem, 1100px ustunde 3rem. clamp()
 * ara degerleri kendi hesapliyor, kirilma noktasi gerekmiyor — dar
 * ekranda sabit 2.4rem bir basligi uc satira bolebiliyordu.
 */
.yazi h1 {
    font-size: clamp(1.95rem, 1.4rem + 2.6vw, 3rem);
    line-height: 1.14;
    letter-spacing: -0.03em;
    margin: 0 0 1rem;
    text-wrap: balance;
}

.yazi-bilgi {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    font-size: 0.875rem;
    color: var(--soluk);
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--cizgi);
    margin-bottom: 2.25rem;
}

/*
 * Cevap-önce bloğu. İçerik standardının en önemli maddesi (2.1):
 * başlığın sorduğu soruya ilk 2–3 cümlede doğrudan cevap.
 * Görsel olarak ayrılması hem okuru hem tarayıcıyı doğru yere bakmaya
 * yönlendiriyor.
 */
.cevap-once {
    background: var(--zemin-yumusak);
    border-left: 4px solid var(--vurgu);
    padding: 1.25rem 1.5rem;
    margin: 0 0 2.5rem;
    border-radius: 0 0.5rem 0.5rem 0;
    font-size: 1.125rem;
    line-height: 1.65;
}
.cevap-once p { margin: 0; }

.govde > *:first-child { margin-top: 0; }
/*
 * H2'nin onunde yesil bir isaret var. Sebebi susleme degil: 1.682
 * kelimelik, 35 paragrafli yazilarda punto farki tek basina bolum
 * baslangicini gostermeye yetmiyordu — goz sayfayi tararken tutunacak
 * bir sey ariyor. Isaret ::before ile, metne dokunmuyor.
 */
.govde h2 {
    font-size: clamp(1.4rem, 1.2rem + 0.9vw, 1.75rem);
    line-height: 1.25;
    margin: 3.25rem 0 1rem;
    letter-spacing: -0.02em;
    position: relative;
    padding-left: 1rem;
    text-wrap: balance;
}
.govde h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.18em;
    bottom: 0.18em;
    width: 4px;
    border-radius: 2px;
    background: var(--yesil);
}

.govde h3 {
    font-size: 1.25rem;
    line-height: 1.35;
    margin: 2.4rem 0 0.6rem;
    text-wrap: balance;
}
.govde p { margin: 0 0 1.35rem; }
.govde ul, .govde ol { margin: 0 0 1.4rem; padding-left: 1.4rem; }
.govde li { margin-bottom: 0.45rem; }
.govde img { border-radius: 0.6rem; }
.govde figure { margin: 2rem 0; }
.govde blockquote {
    margin: 2rem 0;
    padding: 0.25rem 0 0.25rem 1.4rem;
    border-left: 3px solid var(--cizgi);
    color: var(--soluk);
}
.govde hr { border: 0; border-top: 1px solid var(--cizgi); margin: 3rem 0; }

/* Tablolar dar ekranda taşmasın; kendi içinde kaysın. */
.tablo-kaydir { overflow-x: auto; margin: 0 0 1.75rem; }
.govde table { border-collapse: collapse; width: 100%; font-size: 0.9375rem; }
.govde th, .govde td { border: 1px solid var(--cizgi); padding: 0.65rem 0.85rem; text-align: left; vertical-align: top; }
.govde th { background: var(--zemin-yumusak); font-weight: 600; }

/* ---------------- SSS ---------------- */

.sss { margin: 3.5rem 0 0; }
.sss h2 { font-size: 1.5625rem; margin: 0 0 1.25rem; }
.sss details {
    border: 1px solid var(--cizgi);
    border-radius: 0.65rem;
    padding: 1rem 1.25rem;
    margin-bottom: 0.7rem;
    background: var(--zemin);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.sss details:hover { border-color: var(--vurgu); box-shadow: var(--golge); }

.sss summary {
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.65rem;
}
.sss summary::-webkit-details-marker { display: none; }

/* Ok işareti: kapalıyken sağa, açıkken aşağı bakıyor. */
.sss summary::before {
    content: '';
    width: 0.45rem;
    height: 0.45rem;
    border-right: 2px solid var(--vurgu);
    border-bottom: 2px solid var(--vurgu);
    transform: rotate(-45deg);
    transition: transform 170ms ease;
    flex: none;
}
.sss details[open] summary::before { transform: rotate(45deg); }
.sss details > *:not(summary) { margin-bottom: 0; padding-top: 0.7rem; color: var(--soluk); }
.sss details[open] > *:not(summary) { animation: belir 190ms ease both; }

@keyframes belir {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: none; }
}

/* ---------------- Yazar ve kapsam ---------------- */

.yazar {
    display: flex;
    gap: 1rem;
    margin: 3.5rem 0 0;
    padding: 1.5rem;
    border: 1px solid var(--cizgi);
    border-radius: 0.85rem;
    background: var(--zemin-yumusak);
}
/* Flex ogesi varsayilan olarak daralir; flex-shrink kapatilmazsa
   uzun ozgecmis fotografi ezip oval hale getiriyor. */
.yazar-foto {
    flex: 0 0 auto;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--zemin);
}
.yazar-ad { font-weight: 600; margin: 0 0 0.15rem; color: var(--baslik); }
.yazar-unvan { font-size: 0.875rem; color: var(--soluk); margin: 0 0 0.6rem; }
.yazar-ozgecmis { font-size: 0.9rem; color: var(--soluk); margin: 0; }

.kapsam-notu {
    margin: 2.5rem 0 0;
    padding: 1rem 1.25rem;
    background: var(--uyari-zemin);
    border: 1px solid var(--uyari-cizgi);
    border-radius: 0.6rem;
    font-size: 0.9rem;
}

.etiketler { margin: 2.5rem 0 0; display: flex; flex-wrap: wrap; gap: 0.4rem; font-size: 0.8125rem; }
.etiketler a {
    text-decoration: none;
    color: var(--soluk);
    border: 1px solid var(--cizgi);
    border-radius: 999px;
    padding: 0.25rem 0.7rem;
}
.etiketler a:hover { border-color: var(--vurgu); color: var(--vurgu); }

.ilgili { margin: 4rem 0 0; padding-top: 2.5rem; border-top: 1px solid var(--cizgi); }
.ilgili h2 { font-size: 1.3125rem; margin: 0 0 1.25rem; }
.ilgili ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.7rem; }
.ilgili a { text-decoration: none; }
.ilgili a:hover { text-decoration: underline; }

/* ---------------- Sorular ---------------- */

.soru-listesi { list-style: none; padding: 0; margin: 0 0 3.5rem; }
.soru-listesi li { border-bottom: 1px solid var(--cizgi); padding: 1.15rem 0; }
.soru-listesi h2 { font-size: 1.09375rem; margin: 0 0 0.3rem; }
.soru-listesi h2 a { text-decoration: none; color: var(--baslik); }
.soru-listesi h2 a:hover { color: var(--vurgu); }
.soru-listesi .bilgi { font-size: 0.8125rem; color: var(--soluk); }

.soru-cevap {
    border-left: 4px solid var(--vurgu);
    background: var(--zemin-yumusak);
    padding: 1.25rem 1.5rem;
    border-radius: 0 0.5rem 0.5rem 0;
}

/* ---------------- Sayfalama ve alt ---------------- */

.sayfalama { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 0 0 4rem; font-size: 0.9375rem; }
.sayfalama a, .sayfalama span {
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--cizgi);
    border-radius: 0.35rem;
    text-decoration: none;
    color: var(--soluk);
}
.sayfalama a:hover { border-color: var(--vurgu); color: var(--vurgu); }
.sayfalama .etkin { border-color: var(--vurgu); color: var(--vurgu); font-weight: 600; }

.bos-liste { color: var(--soluk); padding: 3rem 0; }

/*
 * Alt bölüm koyu lacivert. Sayfanın sonunu net kapatıyor ve tıbbi
 * içerikte aranan kurumsal tonu veriyor.
 */
.alt {
    margin-top: 5rem;
    padding: 2.5rem 0 3rem;
    background: var(--lacivert);
    color: #c8d3de;
    font-size: 0.875rem;
}
.alt p { margin: 0 0 0.6rem; }
.alt strong { color: #fff; }
.alt a { color: #9ec7e8; }
.alt .kapsam { font-size: 0.8125rem; opacity: 0.85; }

/* ---------------- Hareket ve erişilebilirlik ---------------- */

a, .ana-menu-liste a, .kategori-seridi a, .etiketler a, .sayfalama a {
    transition: color 130ms ease, background-color 130ms ease, border-color 130ms ease;
}

.ana-menu-magaza { transition: background-color 150ms ease, transform 150ms ease; }
.ana-menu-magaza:active { transform: translateY(1px); }
.kategori-seridi a:hover { background: var(--zemin-yumusak); }

/*
 * Tema değişirken tüm geçişler kapatılıyor.
 *
 * İki sebep: (1) gece/gündüz geçişinin solarak olması istenmez, anlık
 * olmalı; (2) renk değişkenleri değişirken devrede olan bir geçiş,
 * öğenin eski renkte takılı kalmasına yol açıyordu — mağaza düğmesinde
 * bu, okunmaz bir kontrast (1,9:1) demekti.
 */
:root[data-gecis-kapali] *,
:root[data-gecis-kapali] *::before,
:root[data-gecis-kapali] *::after {
    transition: none !important;
}

/* Klavye ile gezenler için görünür odak halkası. */
a:focus-visible, summary:focus-visible, button:focus-visible {
    outline: 2px solid var(--vurgu);
    outline-offset: 2px;
    border-radius: 0.2rem;
}

/*
 * İşletim sisteminde "hareketi azalt" seçili olan kullanıcılarda her şey
 * kapanıyor. Vestibüler rahatsızlığı olanlar için erişilebilirlik
 * gerekliliği; uyku bozukluğu okuyan bir kitlede karşılığı var.
 */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .kart:hover { transform: none; }
    .kart:hover .kart-gorsel { transform: none; }
}

@media (max-width: 40rem) {
    .yazi h1 { font-size: 1.75rem; }
    .sayfa-basligi { font-size: 1.75rem; margin-top: 2rem; }
    .govde h2 { font-size: 1.3125rem; margin-top: 2.25rem; }
    .cevap-once { padding: 1rem 1.15rem; font-size: 1.0625rem; }

    /* Fotograf yaninda ozgecmise 182px kaliyordu: satir basina ~25
       karakter. Ustte durunca metin tam genisligi kullaniyor. */
    .yazar { flex-direction: column; gap: 0.9rem; }
}

/* ---------------- Çapa hedefleri ---------------- */

/*
 * Üst çubuk sticky ve 4,25rem yüksekliğinde. Bir çapaya (#baslik)
 * gidildiğinde hedef başlık tam o çubuğun altında kalıyor ve okur
 * nereye geldiğini göremiyordu.
 *
 * Bu iki yerde birden önemli: `icerik:yapi` 312 başlığa id verdi ve
 * Google bunlardan bölüm bağlantısı üretiyor — arama sonucundan gelen
 * okur doğrudan çapaya düşer. SSS konu sayfalarındaki içindekiler
 * listesi de aynı yolu kullanıyor.
 */
:target { scroll-margin-top: 5.5rem; }
.govde h2, .govde h3, .sss-madde h2 { scroll-margin-top: 5.5rem; }

/*
 * Dar ekranda ust cubuk sarmaliyor ve iki satira dusuyor: 69 pikselden
 * 94 piksele cikiyor. Canlida olculdu. 5,5rem (88px) o durumda yetmiyor,
 * baslik cubugun altinda 6 piksel gizli kaliyordu.
 */
@media (max-width: 48rem) {
    :target { scroll-margin-top: 7rem; }
    .govde h2, .govde h3, .sss-madde h2 { scroll-margin-top: 7rem; }
}

/* ---------------- SSS konu sayfası ---------------- */

/*
 * Yazı sayfasından ayrı bir düzen: burada gövde değil, soru listesi asıl
 * içerik. Her soru kendi bloğu; okur göz gezdirip aradığını buluyor.
 */
.sss-konu .govde { margin-bottom: 2.5rem; }

.icindekiler {
    background: var(--zemin-yumusak);
    border: 1px solid var(--cizgi);
    border-radius: 0.75rem;
    padding: 1.1rem 1.35rem;
    margin: 0 0 2.5rem;
}
.icindekiler-basligi {
    margin: 0 0 0.6rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--soluk);
}
.icindekiler ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.icindekiler a {
    text-decoration: none;
    font-size: 0.9375rem;
    line-height: 1.5;
    display: inline-block;
    padding: 0.1rem 0;
}
.icindekiler a:hover { text-decoration: underline; }

/*
 * Soru blokları. Yazıdaki `.sss` bölümü açılır-kapanır (details) ama
 * burası öyle değil: bu sayfaların TEK içeriği sorular, hepsi kapalı
 * gelseydi sayfa boş görünürdü. Ayrıca gizli metin FAQPage schema'sı ile
 * çelişir — Google, işaretlenen cevabın sayfada görünür olmasını ister.
 */
.sss-madde {
    padding: 1.6rem 0;
    border-top: 1px solid var(--cizgi);
}
.sss-madde:first-of-type { border-top: 0; padding-top: 0; }

.sss-madde h2 {
    font-size: 1.3125rem;
    line-height: 1.35;
    margin: 0 0 0.75rem;
    letter-spacing: -0.01em;
}

/* Çapayla gelindiğinde hangi soruya düşüldüğü belli olsun. */
.sss-madde:target h2 { color: var(--vurgu); }
.sss-madde:target {
    background: var(--zemin-yumusak);
    border-radius: 0.6rem;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-left: -1rem;
    margin-right: -1rem;
}

.sss-madde .govde > *:last-child { margin-bottom: 0; }

/* ---------------- SSS konu listesi ---------------- */

.konu-listesi {
    list-style: none;
    padding: 0;
    margin: 0 0 3.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: 1rem;
}
.konu-listesi li {
    border: 1px solid var(--cizgi);
    border-radius: 0.75rem;
    padding: 1.15rem 1.3rem;
    background: var(--zemin);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.konu-listesi li:hover { border-color: var(--vurgu); box-shadow: var(--golge); }
.konu-listesi h2 { font-size: 1.0625rem; line-height: 1.4; margin: 0 0 0.35rem; }
.konu-listesi h2 a { text-decoration: none; color: var(--baslik); }
.konu-listesi h2 a:hover { color: var(--vurgu); }
.konu-listesi .bilgi { margin: 0; font-size: 0.8125rem; color: var(--soluk); }

@media (max-width: 40rem) {
    .sss-madde h2 { font-size: 1.1875rem; }
    .icindekiler { padding: 1rem 1.15rem; }

    /* Dar ekranda dokunma hedefi 44px'in altına düşmesin. */
    .icindekiler a { padding: 0.35rem 0; }
}

/* ---------------- Okunabilirlik düzeltmeleri ---------------- */

/*
 * Uzun adresler ve kesintisiz uzun kelimeler dar ekranda kabı taşırıyordu.
 * Yazılarda kaynak adresleri ve cihaz model kodları geçiyor.
 */
.govde, .sss-madde .govde { overflow-wrap: break-word; }

/*
 * Kart özetleri artık dolu: 148 yazıya 150-160 karakterlik meta açıklama
 * üretildi ve kartta o metin görünüyor. Üç satırda kesiliyor ki kartlar
 * aynı ritmi tutsun; tamamı zaten yazının kendisinde.
 */
.kart-ozet {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------------- Dokunma hedefleri ---------------- */

/*
 * Trafiğin çoğu mobil. Etiket, kategori ve sayfalama bağlantıları
 * 30 piksel civarındaydı; parmakla ıskalanan boyut. Dar ekranda
 * 44 pikselin altına düşmüyorlar artık.
 *
 * Yalnızca dar ekranda büyütülüyor: masaüstünde fare hassas ve aynı
 * ölçüler şeridi gereksiz kalın gösteriyor.
 */
@media (max-width: 48rem) {
    .kategori-seridi { gap: 0.45rem; }
    .kategori-seridi a { padding: 0.6rem 0.95rem; font-size: 0.875rem; }
    .etiketler a { padding: 0.5rem 0.9rem; font-size: 0.875rem; }
    .sayfalama { gap: 0.45rem; }
    .sayfalama a, .sayfalama span { padding: 0.65rem 1rem; }
}

/* ---------------- Yorumlar ---------------- */

.yorumlar {
    max-width: var(--yazi-olcu);
    margin: 4rem auto 0;
    padding: 0 1.5rem;
}
.yorumlar h2 {
    font-size: 1.5rem;
    margin: 0 0 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.yorum-adet {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--soluk);
    background: var(--zemin-yumusak);
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
}

.yorum-bildirim {
    background: var(--zemin-yumusak);
    border-left: 4px solid var(--vurgu);
    border-radius: 0 0.5rem 0.5rem 0;
    padding: 0.9rem 1.2rem;
    margin: 0 0 1.75rem;
}
.yorum-bos { color: var(--soluk); margin: 0 0 2rem; }

.yorum-listesi, .yorum-cevaplar { list-style: none; padding: 0; margin: 0; }
.yorum-listesi > li { padding: 1.4rem 0; border-top: 1px solid var(--cizgi); }
.yorum-listesi > li:first-child { border-top: 0; padding-top: 0; }

.yorum-bas {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}
.yorum-ad { font-weight: 600; color: var(--baslik); }
.yorum-bas time { color: var(--soluk); }

.yorum-govde > *:last-child { margin-bottom: 0; }
.yorum-govde p { margin: 0 0 0.8rem; }

/*
 * Kurumun cevabı ayırt edilebilir olmalı: okur, gördüğü tavsiyenin başka
 * bir hastadan mı yoksa siteden mi geldiğini bilmeli. Tıbbi içerikte bu
 * ayrım biçimsel değil, bilgi güvenilirliğiyle ilgili.
 */
.yorum-cevaplar {
    margin: 1rem 0 0 1.25rem;
    padding-left: 1.25rem;
    border-left: 2px solid var(--cizgi);
    display: grid;
    gap: 1.25rem;
}
.yorum-kurum { border-left: 2px solid var(--vurgu); margin-left: -1.27rem; padding-left: 1.25rem; }
.yorum-rozet {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--vurgu);
    color: var(--vurgu-yazi);
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
    margin-left: 0.4rem;
    vertical-align: 0.05em;
}

/* ---------------- Yorum formu ---------------- */

.yorum-form-sarmal {
    margin: 3rem 0 0;
    padding: 1.75rem;
    border: 1px solid var(--cizgi);
    border-radius: 0.85rem;
    background: var(--zemin-yumusak);
}
.yorum-form-sarmal h3 { margin: 0 0 1.25rem; font-size: 1.1875rem; }

.yorum-form { display: grid; gap: 1.1rem; }
.yorum-satir { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.yorum-alan { display: grid; gap: 0.35rem; }
.yorum-alan label { font-size: 0.875rem; font-weight: 600; color: var(--baslik); }
.yorum-alan small { font-size: 0.8125rem; color: var(--soluk); }
.zorunlu { color: #c0392b; font-weight: 400; }
.istege-bagli { font-weight: 400; color: var(--soluk); font-size: 0.8125rem; }

.yorum-form input, .yorum-form textarea {
    font: inherit;
    font-size: 1rem;
    color: var(--metin);
    background: var(--zemin);
    border: 1px solid var(--cizgi);
    border-radius: 0.5rem;
    padding: 0.7rem 0.85rem;
    width: 100%;
    transition: border-color 130ms ease, box-shadow 130ms ease;
}
.yorum-form textarea { resize: vertical; min-height: 7rem; line-height: 1.6; }
.yorum-form input:focus, .yorum-form textarea:focus {
    outline: none;
    border-color: var(--vurgu);
    box-shadow: 0 0 0 3px rgb(51 122 183 / 18%);
}

/* Bal küpü: ekranda yok ama display:none botların atladığı bir işaret. */
.bal-kupu {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.yorum-kvkk { font-size: 0.8125rem; color: var(--soluk); margin: 0; line-height: 1.6; }

.yorum-gonder {
    font: inherit;
    font-weight: 600;
    background: var(--vurgu);
    color: var(--vurgu-yazi);
    border: 0;
    border-radius: 0.5rem;
    padding: 0.8rem 1.6rem;
    cursor: pointer;
    justify-self: start;
    min-height: 44px;
    transition: background-color 150ms ease, transform 150ms ease;
}
.yorum-gonder:hover { background: var(--vurgu-koyu); }
.yorum-gonder:active { transform: translateY(1px); }

.yorum-not { font-size: 0.8125rem; color: var(--soluk); margin: 0; }

.yorum-hata {
    background: var(--uyari-zemin);
    border: 1px solid var(--uyari-cizgi);
    border-radius: 0.6rem;
    padding: 0.9rem 1.2rem;
    margin: 0 0 1.25rem;
    font-size: 0.9rem;
}
.yorum-hata ul { margin: 0; padding-left: 1.2rem; }

@media (max-width: 40rem) {
    .yorum-satir { grid-template-columns: 1fr; }
    .yorum-form-sarmal { padding: 1.25rem; }
    .yorum-cevaplar { margin-left: 0.5rem; padding-left: 1rem; }
    .yorum-kurum { margin-left: -1.02rem; padding-left: 1rem; }
}

/* ================================================================
   YENİLEME — 23.08.2026
   ================================================================
   Bu bölüm mevcut stilin üzerine biniyor, onu değiştirmiyor. Amaç
   "süslemek" değildi; ölçüm şunu gösterdi:

     - satır başına 81 karakter (okuma aralığı 60–75)
     - 1.682 kelimelik yazıda 0 başlık, 0 liste, 0 tablo
     - tek vurgu rengi, oysa logoda üç renk var

   Aşağıdakiler bu üç bulguya karşılık geliyor.
   ================================================================ */

/* ---------------- Cevap-önce bloğu ---------------- */

/*
 * Blok zaten vardı; eksik olan ne olduğunu SÖYLEMESİYDİ. Okur gri bir
 * kutu görüyordu ama neden orada durduğunu bilmiyordu. Başlık hem okura
 * "aradığın cevap burada" diyor hem de üretken motorlara alıntılanacak
 * parçayı işaret ediyor.
 */
.cevap-once {
    position: relative;
    background: linear-gradient(180deg, var(--yesil-tul), var(--zemin-yumusak));
    border: 1px solid var(--cizgi);
    border-left: 4px solid var(--yesil);
    border-radius: 0 var(--yuvarlak) var(--yuvarlak) 0;
    padding: 1.6rem 1.6rem 1.4rem;
}

.cevap-once::before {
    content: 'Kısa cevap';
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--yesil-koyu);
    margin-bottom: 0.6rem;
}

/* ---------------- Metin içi bloklar ---------------- */

/*
 * Uzun yazıda göz tutunacak yer arıyor; bu bloklar duraklama noktası
 * veriyor.
 */
.govde blockquote {
    background: var(--zemin-yumusak);
    border-left: 3px solid var(--vurgu);
    border-radius: 0 var(--yuvarlak) var(--yuvarlak) 0;
    padding: 1.1rem 1.4rem;
    color: var(--metin);
    font-size: 1.0625rem;
}
.govde blockquote p:last-child { margin-bottom: 0; }

/* Madde imleri yeşil: bölüm işaretiyle aynı dil. */
.govde ul { list-style: none; padding-left: 0; }
.govde ul > li { position: relative; padding-left: 1.5rem; }
.govde ul > li::before {
    content: '';
    position: absolute;
    left: 0.35rem;
    top: 0.72em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--yesil);
}
.govde ol { padding-left: 1.3rem; }
.govde ol > li::marker { color: var(--yesil-koyu); font-weight: 700; }

/* ---------------- Tablolar ---------------- */

/*
 * Tablo, karşılaştırma içeriğinin en yoğun biçimi ve bu blogda SGK
 * tutarları gibi doğrudan aranan veriler tabloda duruyor. Çizgili satır,
 * uzun tabloda gözün satır kaydırmasını engelliyor.
 */
.tablo-kaydir {
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    box-shadow: var(--golge);
}
.govde table { font-size: 0.9375rem; }
.govde th, .govde td { border: 0; border-bottom: 1px solid var(--cizgi-yumusak); }
.govde th {
    background: var(--lacivert);
    color: #fff;
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}
.govde tbody tr:nth-child(even) { background: var(--zemin-yumusak); }
.govde tbody tr:last-child td { border-bottom: 0; }

/* ---------------- Görsel ızgarası ---------------- */

/*
 * Aktarılan sayfaların bir kısmında düzeni eklentide kalmış görsel
 * dizileri var: `cpap-sd-kart-veri-raporlama-programlari` sayfasında 144
 * kelimeye karşılık 56 görsel, hepsi alt alta. Dikey yığın hem bitmek
 * bilmiyor hem aralarındaki ilişkiyi göstermiyor.
 *
 * Ardışık figure'ler ızgaraya alınıyor. Sınıfı JS ekliyor; gövdenin
 * kendisine dokunulmuyor, çünkü gövde WordPress'ten geldiği gibi durmalı.
 */
.govde figure { margin: 2rem 0; text-align: center; }
.govde figure img { border-radius: var(--yuvarlak); }
.govde figcaption { font-size: 0.8125rem; color: var(--soluk); margin-top: 0.5rem; }

.gorsel-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: 1rem;
    margin: 2rem 0;
    align-items: center;
}
.gorsel-izgara figure {
    margin: 0;
    padding: 0.9rem;
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    background: var(--zemin-kart);
    transition: border-color var(--gecis), box-shadow var(--gecis), transform var(--gecis);
}
.gorsel-izgara figure:hover {
    border-color: var(--vurgu);
    box-shadow: var(--golge-orta);
    transform: translateY(-2px);
}
.gorsel-izgara img { max-height: 5.5rem; width: auto; }

/* ---------------- Okuma ilerlemesi ---------------- */

/*
 * Uzun yazılarda ne kadar kaldığını gösteren ince çubuk. Yalnızca yazı
 * sayfalarında ve yalnızca gövde ekranı belirgin biçimde aşıyorsa
 * eklenir — kısa yazıda hep dolu duran bir çubuk bilgi değil, gürültü.
 */
.okuma-cubugu {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, var(--yesil), var(--vurgu));
    z-index: 60;
    transition: width 90ms linear;
    pointer-events: none;
}

/* ---------------- Yazı içi içindekiler ---------------- */

/*
 * Üç ve üzeri H2'si olan yazılarda beliriyor. Kısa yazıya içindekiler
 * koymak sayfayı uzatmaktan başka işe yaramaz.
 */
.yazi-icindekiler {
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    background: var(--zemin-kart);
    padding: 1.1rem 1.4rem;
    margin: 0 0 2.5rem;
    box-shadow: var(--golge);
}
.yazi-icindekiler > summary {
    cursor: pointer;
    font-weight: 650;
    color: var(--baslik);
    font-size: 0.9375rem;
    list-style: none;
}
.yazi-icindekiler > summary::-webkit-details-marker { display: none; }
.yazi-icindekiler > summary::after {
    content: '\2304';
    float: right;
    transition: transform var(--gecis);
    font-size: 1.1rem;
    line-height: 1;
}
.yazi-icindekiler[open] > summary::after { transform: rotate(180deg); }
.yazi-icindekiler ol { margin: 1rem 0 0; padding-left: 1.2rem; font-size: 0.9375rem; }
.yazi-icindekiler li { margin-bottom: 0.4rem; }
.yazi-icindekiler a { color: var(--metin); text-decoration: none; }
.yazi-icindekiler a:hover { color: var(--vurgu); text-decoration: underline; }

/* ---------------- Mağaza kutusu ---------------- */

/*
 * Blog sitenin tıklamalarının %22'sini getiriyor ve asıl işi o trafiği
 * satışa bağlamak. Üstteki tek düğme bunun için zayıf bir kanal: okur
 * yazıyı bitirdiğinde menü çoktan yukarıda kalmış oluyor.
 *
 * Kutu yazının SONUNDA, kapsam notundan SONRA duruyor — tıbbi içerikte
 * satış çağrısını bilgilendirmenin önüne koymak güveni zedeler.
 */
.magaza-kutu {
    margin: 3rem 0 0;
    padding: 1.75rem;
    border-radius: var(--yuvarlak-buyuk);
    background: linear-gradient(135deg, var(--vurgu-tul), var(--yesil-tul));
    border: 1px solid var(--cizgi);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem 1.75rem;
}
.magaza-kutu-metin { flex: 1 1 16rem; }
.magaza-kutu h2 {
    font-size: 1.2rem;
    margin: 0 0 0.4rem;
    padding-left: 0;
    line-height: 1.3;
}
.magaza-kutu h2::before { content: none; }
.magaza-kutu p { margin: 0; font-size: 0.9375rem; color: var(--soluk); }
.magaza-kutu .dugme {
    display: inline-block;
    background: var(--vurgu);
    color: var(--vurgu-yazi);
    font-weight: 650;
    padding: 0.75rem 1.5rem;
    border-radius: 0.45rem;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: var(--golge);
    transition: background-color var(--gecis), transform var(--gecis), box-shadow var(--gecis);
}
.magaza-kutu .dugme:hover {
    background: var(--vurgu-koyu);
    transform: translateY(-1px);
    box-shadow: var(--golge-orta);
}
.magaza-kutu .dugme:active { transform: translateY(0); }

/* ---------------- Kart ve liste yenilemesi ---------------- */

.kart { border-radius: var(--yuvarlak); background: var(--zemin-kart); }
.kart:hover { box-shadow: var(--golge-yuksek); }

/* Kategori rozeti kartın içinde: göz önce konuyu görsün. */
.kart-etiket {
    display: inline-block;
    align-self: flex-start;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--yesil-koyu);
    background: var(--yesil-tul);
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
}

.kategori-seridi a[aria-current] {
    background: var(--yesil-tul);
    border-color: var(--yesil);
    color: var(--yesil-koyu);
    font-weight: 650;
}

.sayfa-basligi {
    font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.75rem);
    text-wrap: balance;
}

/* ---------------- Hareket ---------------- */

/*
 * Belirirken kayan bloklar. Ölçülü: 12px yer değiştirme, 380 ms. Daha
 * uzunu okuru bekletir, daha fazlası içeriğin önüne geçer.
 *
 * Başlangıç durumunu JS ekliyor, CSS değil. Sebebi somut: CSS'e gömülü
 * bir `opacity: 0`, JS çalışmazsa içeriği KALICI olarak görünmez bırakır.
 * Görünürlük, çalışmasına güvenilen bir şeye bağlanmamalı.
 */
.beliren {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 380ms ease, transform 380ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.beliren.gorundu { opacity: 1; transform: none; }

/* Bağlantı altı çizgisi üzerine gelince kalınlaşsın. */
.govde p > a,
.govde li > a {
    text-decoration: none;
    background-image: linear-gradient(var(--vurgu), var(--vurgu));
    background-size: 100% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    padding-bottom: 1px;
    transition: background-size var(--gecis), color var(--gecis);
}
.govde p > a:hover,
.govde li > a:hover {
    background-size: 100% 2px;
    color: var(--vurgu-koyu);
}

/*
 * Hareketi azaltma tercihi. Bu bir nezaket değil şart: vestibüler
 * duyarlılığı olan okurda kayan içerik baş dönmesi yapabiliyor ve burası
 * bir sağlık sitesi.
 */
@media (prefers-reduced-motion: reduce) {
    .beliren,
    .beliren.gorundu {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .okuma-cubugu { transition: none; }
    .gorsel-izgara figure:hover,
    .magaza-kutu .dugme:hover,
    .kart:hover { transform: none; }
    * { scroll-behavior: auto !important; }
}

/* ---------------- Dar ekran ---------------- */

@media (max-width: 40rem) {
    .magaza-kutu { padding: 1.35rem; }
    .magaza-kutu .dugme { width: 100%; text-align: center; }
    .govde h2 { padding-left: 0.8rem; }
    .gorsel-izgara { grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); }
}

/* ================================================================
   KAPAK VE VİTRİN — 23.08.2026
   ================================================================ */

/* ---------------- Yazı kapağı ---------------- */

/*
 * Tam genişlik görsel, başlık görselin üstünde.
 *
 * Öge `main.kap` sarmalayıcısının DIŞINDA duruyor; bu yüzden `100vw` ve
 * kaydırma çubuğu hesabı gerekmiyor. `100vw` yaklaşımı çubuk genişliği
 * kadar yatay taşma üretiyordu.
 */
.kapak {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    min-height: clamp(20rem, 15rem + 22vw, 30rem);
    overflow: hidden;
    background: var(--lacivert);
}

.kapak-gorsel {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    border-radius: 0;
}

/*
 * Alttan yükselen yeşil filigran.
 *
 * Süsleme değil, OKUNABİLİRLİK aracı: başlık doğrudan fotoğrafın üstüne
 * konsaydı açık zeminli görsellerde okunmaz olurdu ve hangi görselin
 * geleceğini önceden bilemeyiz. Degrade, görselin kendi renginden bağımsız
 * sabit bir kontrast tabanı veriyor.
 *
 * Duraklar BAŞLIĞIN GERÇEK KONUMUNA göre ayarlandı, göze göre değil. İlk
 * denemede degrade %72'de tümüyle saydamlaşıyordu; başlık ise kapağın
 * üstünden %37'de, yani alttan %63'te başlıyor — tam degradenin bittiği
 * yerde. Beyaz zeminli bir fotoğrafta başlığın ilk satırında kontrast
 * 1,16:1 çıkıyordu. Okunmaz. Şimdi en kötü durumda 4,6:1; ölçüldü.
 *
 * İki katman üst üste: önce nötr bir koyulaştırma, sonra marka yeşili.
 * Yalnızca yeşil kullanılsaydı, yeşil ağırlıklı bir fotoğrafta (bu blogda
 * çok var — yatak odası, doğa) ayrım kaybolurdu.
 */
.kapak-filigran {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(
            to top,
            rgb(20 61 20 / 95%) 0%,
            rgb(20 61 20 / 88%) 38%,
            rgb(20 61 20 / 55%) 62%,
            rgb(20 61 20 / 18%) 80%,
            transparent 95%
        ),
        linear-gradient(
            to top,
            rgb(8 14 10 / 75%) 0%,
            rgb(8 14 10 / 58%) 40%,
            rgb(8 14 10 / 28%) 65%,
            transparent 88%
        );
}

/* Alt kenarda ince bir marka şeridi: kapağın bittiği yeri belli ediyor. */
.kapak::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--yesil), var(--vurgu));
}

/*
 * Kapağın üstündeki kırıntı: sayfa zemini üzerinde, filigranın dışında.
 * Kontrast ölçümü bunu gerektirdi (bkz. kapak.blade.php).
 */

.kapak-ic {
    position: relative;
    width: 100%;
    padding-top: 4rem;
    padding-bottom: 2.75rem;
}

/*
 * Kapak metni her zaman AÇIK renk. Tema değişkenlerine bağlanmıyor:
 * altında her zaman koyu bir degrade var, gündüz temasında da.
 */
.kapak-ic .kirinti,
.kapak-ic .kirinti a {
    color: rgb(255 255 255 / 82%);
}
.kapak-ic .kirinti a:hover { color: #fff; }

.kapak-ic h1 {
    color: #fff;
    font-size: clamp(1.6rem, 1.05rem + 2.9vw, 3.1rem);
    line-height: 1.12;
    letter-spacing: -0.03em;
    margin: 0 0 0.9rem;
    max-width: 22ch;
    text-wrap: balance;
    /* Fotoğrafın açık bir bölgesine denk gelirse diye ince bir gölge. */
    text-shadow: 0 2px 12px rgb(0 0 0 / 45%);
}

.kapak-bilgi {
    color: rgb(255 255 255 / 88%);
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}

/* Kapak varsa yazının üstündeki boşluk kapaktan geliyor. */
.yazi.kapakli { padding-top: 2.5rem; }

/* ---------------- Dar ekran ---------------- */

@media (max-width: 40rem) {
    /* Uzun başlık dar ekranda 5 satıra çıkıyor ve fotoğrafı ince bir
       şeride düşürüyordu; kapak biraz daha yüksek. */
    .kapak { min-height: 19rem; }
    .kapak-ic { padding-top: 3rem; padding-bottom: 1.75rem; }
    .kapak-ic h1 { max-width: none; }

    /*
     * Kategori şeridi tek satırda, yatay kaydırılabilir.
     *
     * 15 rozet alt alta sarınca şerit dar ekranda 409px tutuyordu —
     * yazı kartlarının kendisinden fazla. Okur listeye gelmiş, süzgeç
     * listesini aşmadan tek bir yazı göremiyor.
     *
     * Kaydırma çubuğı gizlenmiyor: gizlenirse devamının olduğu
     * anlaşılmıyor. Sağ kenardaki solma da aynı işi görüyor.
     */
    .kategori-seridi {
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: thin;
        padding-bottom: 0.5rem;
        margin-bottom: 2rem;
        /* Kenar boşluğu içeri taşarak son rozetin yapışmasını önlüyor. */
        -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
        mask-image: linear-gradient(to right, #000 88%, transparent 100%);
    }
    .kategori-seridi li { flex: 0 0 auto; }
    .kategori-seridi a { white-space: nowrap; }

}



/* ================================================================
   TASARIM YENİLEMESİ

   Üst şerit, arama, yeşil ana menü, ana sayfa bölümleri, kart
   yenilemesi, paylaşım, punto ayarı, alt bölüm, çerez bildirimi.

   Bu blok dosyanın SONUNDA duruyor ve yukarıdaki kuralların bir
   kısmını geçersiz kılıyor. Sebebi bilinçli: yukarıdaki bölümler
   devir sürecinde satır satır gerekçelendirilmiş; onları yerinde
   düzenlemek gerekçeleri de dağıtırdı. Yeni tasarım kendi bloğunda
   duruyor ve neyi neden değiştirdiği burada okunuyor.
   ================================================================ */

:root {
    /*
     * Yazı puntosu çarpanı. Yazı sayfasındaki A− / A / A+ düğmeleri
     * bunu değiştiriyor; <head> içindeki küçük betik sayfa çizilmeden
     * önce localStorage'daki değeri geri koyuyor.
     */
    --yazi-olcek: 1;

    --ust-yukseklik: 4.5rem;

    /*
     * Yapışkan üst bölümün toplam yüksekliği: duyuru şeridi (2,25rem) +
     * marka satırı (4,5rem) + yeşil menü (3rem). Yazı içindeki yapışkan
     * araç şeridi buna dayanıyor; sayı elle girilmiş olsaydı üst bölüm
     * her değiştiğinde şerit menünün altına kayardı.
     */
    --ust-toplam: 9.75rem;
}

/* ---------------- Erişilebilirlik yardımcıları ---------------- */

/*
 * Klavye kullanıcısı için "içeriğe geç". Görünmez duruyor, odaklanınca
 * beliriyor. Menü artık kategorileri de içerdiği için her sayfada
 * atlanacak bağlantı sayısı arttı; bu bağlantı olmadan klavyeyle gezen
 * biri her sayfada 10 sekme tuşu basıyor.
 */
.atla {
    position: absolute;
    left: 0.75rem;
    top: -4rem;
    z-index: 100;
    background: var(--vurgu);
    color: var(--vurgu-yazi);
    padding: 0.6rem 1rem;
    border-radius: 0 0 0.4rem 0.4rem;
    text-decoration: none;
    transition: top var(--gecis);
}
.atla:focus { top: 0; }

.gizli-metin {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* İkonlar metnin yanında; taban çizgisine değil ortaya hizalanıyorlar. */
.ikon { flex: 0 0 auto; vertical-align: middle; }

/* ---------------- Üst şerit ---------------- */

/*
 * Duyuru şeridi. Koyu değil çok açık bir zemin: üstte koyu bir çubuk
 * olsaydı sayfanın ilk 40 pikseli duyuruya gitmiş olurdu ve duyuru
 * içerikten önemli değil.
 */
.ust-serit {
    background: var(--zemin-yumusak);
    border-bottom: 1px solid var(--cizgi-yumusak);
    font-size: 0.8125rem;
}

.ust-serit-ic {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1.5rem;
    min-height: 2.25rem;
    flex-wrap: wrap;
}

.ust-serit a, .ust-serit span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--soluk);
    text-decoration: none;
}
.ust-serit a:hover { color: var(--vurgu); }

/* ---------------- Üst bölüm ---------------- */

.ust { border-bottom: 0; }

.ust-ic {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.5rem;
    min-height: var(--ust-yukseklik);
}

.ust-eylemler { display: flex; align-items: center; gap: 0.9rem; }

.ust-telefon {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
    color: var(--baslik);
    font-weight: 650;
    white-space: nowrap;
}
.ust-telefon:hover { color: var(--vurgu); }

/* ---------------- Arama ---------------- */

.arama { position: relative; }

.arama-kutu {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.35rem 0 0.9rem;
    border: 1px solid var(--cizgi);
    border-radius: 999px;
    background: var(--zemin);
    transition: border-color var(--gecis), box-shadow var(--gecis);
}
.arama-kutu:focus-within {
    border-color: var(--vurgu);
    box-shadow: 0 0 0 3px var(--vurgu-tul);
}
.arama-kutu > .ikon { color: var(--soluk); }

.arama-kutu input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 0.9375rem;
    padding: 0.7rem 0;
    outline: none;
}
/* Tarayıcının kendi temizleme çarpısı kutunun yuvarlağını bozuyor. */
.arama-kutu input::-webkit-search-cancel-button { display: none; }

.arama-dugmesi {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: 999px;
    background: var(--yesil);
    color: #fff;
    cursor: pointer;
    transition: background var(--gecis);
}
.arama-dugmesi:hover { background: var(--yesil-koyu); }

/*
 * Öneri listesi kutunun altına düşüyor. `position: absolute` ve üst
 * bölüm `sticky`: liste açıkken sayfa kaydırılırsa liste kutuyla
 * birlikte gidiyor, sayfada asılı kalmıyor.
 */
.arama-onerileri {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    z-index: 30;
    max-height: 70vh;
    overflow-y: auto;
    background: var(--zemin-kart);
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    box-shadow: var(--golge-yuksek);
    padding: 0.35rem;
}

.arama-onerileri a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.6rem;
    border-radius: 0.5rem;
    text-decoration: none;
    color: var(--baslik);
}
.arama-onerileri a:hover,
.arama-onerileri a:focus-visible { background: var(--vurgu-tul); }

.arama-onerileri img {
    width: 56px;
    height: 56px;
    border-radius: 0.4rem;
    object-fit: cover;
    background: var(--zemin-yumusak);
}
.arama-onerileri span { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.arama-onerileri strong { font-size: 0.9375rem; font-weight: 600; line-height: 1.35; }
.arama-onerileri small { color: var(--soluk); font-size: 0.75rem; }

.arama-tumu {
    justify-content: center;
    font-weight: 600;
    color: var(--vurgu) !important;
    border-top: 1px solid var(--cizgi-yumusak);
    border-radius: 0 0 0.5rem 0.5rem;
    margin-top: 0.25rem;
}

.arama-bos { margin: 0; padding: 1rem 0.75rem; color: var(--soluk); font-size: 0.9rem; }

/* ---------------- Yeşil ana menü ---------------- */

/*
 * Menü şeridi yeşil: blogun kendi imzası. Mağaza düğmesi sarı, çünkü
 * yeşil zeminde maviyi ayırt etmek zor ve o düğme şeridin içinde en çok
 * ayrılması gereken öğe.
 */
.ana-menu {
    background: var(--yesil);
    color: #fff;
    font-size: 0.9375rem;
}

.ana-menu-ic {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
    min-height: 3rem;
}

/* Onay kutusu ve etiketi yalnızca dar ekranda görünür (aşağıda). */
.menu-anahtari,
.arama-anahtari { position: absolute; opacity: 0; pointer-events: none; }
.ana-menu-dugmesi { display: none; }

.ana-menu-liste {
    display: flex;
    align-items: stretch;
    gap: 0.25rem;
    list-style: none;
    /*
     * Sagdaki ikiliyi `justify-content` degil bu `auto` itiyor.
     * Space-between ile uyku testi ile magaza serit boyunca esit
     * araliga dagiliyordu; oysa ikisi bir arada duran tek bir kume.
     */
    margin: 0 auto 0 0;
    padding: 0;
}
/*
 * `<li>` de esnek kutu: değilse `<a>` kendi metni kadar yükseklik
 * alıyor ve şeridin üstüne yapışıyordu. Menü, sağdaki düğmeler
 * yüzünden 3rem'den yüksek ve öğeler ortalanmış görünmüyordu.
 */
.ana-menu-liste li { display: flex; align-items: stretch; }

.ana-menu-liste a {
    display: flex;
    align-items: center;
    padding: 0 0.9rem;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    /*
     * Alt çizgi 3 piksel; üstte de aynı kalınlıkta SAYDAM bir kenarlık
     * var. Yalnızca altta olsaydı yazı üç piksel yukarıda kalırdı ve
     * menü şeridinde ortalanmamış görünürdü — öyleydi.
     */
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
    transition: background var(--gecis), border-color var(--gecis);
}
.ana-menu-liste a:hover { background: rgb(0 0 0 / 10%); color: #fff; }
.ana-menu-liste a[aria-current] { border-bottom-color: #fff; }

.ana-menu-araclar { display: flex; align-items: stretch; gap: 0.5rem; }

/* Buyutec yalnizca dar ekranda: genis ekranda arama kutusu zaten acik. */
.ana-menu-ikon { display: none; }

.ana-menu-testi,
.ana-menu-magaza {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0 1rem;
    text-decoration: none;
    font-weight: 700;
    white-space: nowrap;
}
.ana-menu-testi { color: #fff; }
.ana-menu-testi:hover { background: rgb(0 0 0 / 10%); color: #fff; }

.ana-menu-magaza {
    background: var(--sari);
    color: #4a3a05;
}
.ana-menu-magaza:hover { background: #e0ad1c; color: #4a3a05; }

/* ---------------- Bölüm başlıkları ---------------- */

.bolum-basligi { margin: 0 0 1.75rem; }
.bolum-basligi h1,
.bolum-basligi h2 {
    font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.25rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0 0 0.4rem;
    text-wrap: balance;
}
.bolum-basligi p { margin: 0; color: var(--soluk); font-size: 1.0625rem; }

.bolum-basligi.ortali { text-align: center; }
.bolum-basligi.ortali p { margin-inline: auto; max-width: 42rem; }

/* ---------------- Hoş geldiniz bölümü ---------------- */

.hosgeldin {
    background: linear-gradient(180deg, var(--yesil-tul), var(--zemin));
    border-bottom: 1px solid var(--cizgi-yumusak);
}

.hosgeldin-ic {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
    max-width: 52rem;
    text-align: center;
}
.hosgeldin-ic h1 {
    font-size: clamp(1.9rem, 1.3rem + 2.6vw, 2.85rem);
    line-height: 1.15;
    letter-spacing: -0.03em;
    margin: 0 0 0.9rem;
    color: var(--baslik);
    text-wrap: balance;
}
.hosgeldin-ic p {
    margin: 0 auto;
    max-width: 44rem;
    color: var(--soluk);
    font-size: 1.0625rem;
}

.hosgeldin-dugmeler {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.75rem;
}
.hosgeldin-dugmeler .dugme,
.hosgeldin-dugmeler .dugme-ikincil {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.4rem;
    border-radius: 999px;
    font-weight: 650;
    text-decoration: none;
    transition: background var(--gecis), border-color var(--gecis), color var(--gecis);
}
.hosgeldin-dugmeler .dugme { background: var(--vurgu); color: var(--vurgu-yazi); }
.hosgeldin-dugmeler .dugme:hover { background: var(--vurgu-koyu); color: var(--vurgu-yazi); }
.hosgeldin-dugmeler .dugme-ikincil {
    border: 1px solid var(--cizgi);
    background: var(--zemin);
    color: var(--baslik);
}
.hosgeldin-dugmeler .dugme-ikincil:hover { border-color: var(--yesil); color: var(--yesil-koyu); }

/* ---------------- Bölüm aralıkları ---------------- */

.one-cikanlar,
.magaza-kartlari,
.yazi-listesi { padding: 3.5rem 0; }

.magaza-kartlari { background: var(--zemin-yumusak); }

/* ---------------- Öne çıkan yazılar ---------------- */

/*
 * İlk kayıt büyük, kalanlar yanında liste hâlinde. Hepsi eşit boyutta
 * olsaydı "öne çıkan" bölümü ikinci bir yazı listesinden ayırt
 * edilemezdi; boyut farkı bölümün tek bilgi taşıyan öğesi.
 */
/*
 * İki sütun EŞİT yükseklikte. `align-items: start` iken sağdaki dört
 * kart kendi içeriği kadar yer kaplıyor ve sütunun altı soldaki büyük
 * kartla hizalanmıyordu; bölüm bir tarafı sarkan bir blok gibi
 * duruyordu.
 *
 * Sağdaki liste sütunun tamamını dolduruyor ve satırları eşit paylara
 * bölünüyor (`1fr`): kart sayısı değişse de hiza bozulmuyor.
 */
.one-cikan-duzen {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 1.75rem;
    align-items: stretch;
}
.one-cikan-buyuk { display: flex; }
.one-cikan-buyuk > .kart { flex: 1; }

.one-cikan-buyuk .kart-baslik { font-size: 1.5rem; }
.one-cikan-buyuk .kart-gorsel { aspect-ratio: 16 / 10; }

.one-cikan-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
}

/* ---------------- Mağaza kartları ---------------- */

.magaza-izgara {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    /*
     * Sütun sayısı SABİT dört.
     *
     * Önce `auto-fit, minmax(11rem, 1fr)` vardı ve geniş ekranda beş
     * sütun açılıyordu: sekiz kart 5 + 3 diziliyor ve ikinci satır
     * yarım kalıyordu. Dörtlü ızgarada 4 + 4 oturuyor ve kartlar
     * ürün fotoğrafına yakışan bir genişlikte kalıyor.
     */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.magaza-izgara a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    height: 100%;
    padding: 1.5rem 1rem;
    text-align: center;
    text-decoration: none;
    background: var(--zemin-kart);
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    transition: border-color var(--gecis), box-shadow var(--gecis), transform var(--gecis);
}
.magaza-izgara a:hover {
    border-color: var(--yesil);
    box-shadow: var(--golge-orta);
    transform: translateY(-3px);
}

.magaza-kart-gorsel {
    display: grid;
    place-items: center;
    width: 100%;
    height: 8rem;
    color: var(--soluk);
}
.magaza-kart-gorsel img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.magaza-kart-ad { font-weight: 650; color: var(--baslik); }
.magaza-kart-aciklama { font-size: 0.8125rem; color: var(--soluk); }

/* ---------------- Kart yenilemesi ---------------- */

/*
 * Kart artık `<article>`; içindeki başlık `<h3>`. Bölüm başlıkları h2
 * olduğu için liste öğelerinin h2 kalması başlık hiyerarşisini
 * bozuyordu — ekran okuyucuda sayfa 13 tane eşdüzey başlık gibi
 * görünüyor ve gezinme işe yaramaz hâle geliyor.
 */
.kart { position: relative; }

.kart-gorsel-baglantisi {
    position: relative;
    display: block;
    overflow: hidden;
}

.kart-baslik { font-size: 1.09375rem; line-height: 1.45; margin: 0; }
.kart-baslik a { text-decoration: none; color: var(--baslik); }
.kart-baslik a:hover { color: var(--vurgu); }

/* Tarih rozeti görselin üstünde: liste tarandığında yazının ne kadar
   yeni olduğu, başlığı okumadan önce görünsün. */
.kart-tarih {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    display: grid;
    place-items: center;
    width: 3.1rem;
    height: 3.1rem;
    border-radius: 999px;
    background: var(--yesil);
    color: #fff;
    font-size: 0.6875rem;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    box-shadow: var(--golge-orta);
}
.kart-tarih strong { font-size: 1.0625rem; font-weight: 700; }

/* Kategori rozeti görselin alt kenarında; kartın metin alanında
   ikinci kez tekrarlanmıyor. */
.kart-gorsel-baglantisi .kart-etiket {
    position: absolute;
    left: 0.75rem;
    bottom: 0.75rem;
    background: var(--sari);
    color: #4a3a05;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.75rem;
}

.kart-devam {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: auto;
    font-size: 0.9375rem;
    font-weight: 650;
    color: var(--yesil-koyu);
    text-decoration: none;
}
.kart-devam:hover { color: var(--yesil); gap: 0.65rem; }
.kart-devam .ikon { transition: transform var(--gecis); }

.kart-alt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--cizgi-yumusak);
}
.kart-alt .kart-bilgi { margin: 0; }

/* Yan yana biçim: öne çıkanlar listesi ve dar alanlar. */
.kart-genis { flex-direction: row; }
.kart-genis .kart-gorsel-baglantisi { flex: 0 0 9.5rem; }
.kart-genis .kart-gorsel { height: 100%; aspect-ratio: auto; min-height: 7.5rem; }
.kart-genis .kart-tarih { width: 2.5rem; height: 2.5rem; font-size: 0.5625rem; top: 0.5rem; left: 0.5rem; }
.kart-genis .kart-tarih strong { font-size: 0.875rem; }
.kart-genis .kart-gorsel-baglantisi .kart-etiket { display: none; }
.kart-genis .kart-ic { padding: 0.9rem 1.1rem; gap: 0.5rem; }
.kart-genis .kart-baslik { font-size: 1rem; }
.kart-genis .kart-devam { display: none; }

/* ---------------- Bilgi şeridi ---------------- */

.yazi-bilgi { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }

.bilgi-oge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}
.bilgi-oge .ikon { opacity: 0.7; }

.kart-bilgi { font-size: 0.8125rem; color: var(--soluk); gap: 0.4rem 0.75rem; }

/* ---------------- Paylaşım ---------------- */

.paylas { position: relative; }
.paylas > summary { list-style: none; cursor: pointer; }
.paylas > summary::-webkit-details-marker { display: none; }

.paylas-dugmesi {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    border: 1px solid var(--cizgi);
    border-radius: 999px;
    font-size: 0.8125rem;
    color: var(--soluk);
    background: none;
    transition: border-color var(--gecis), color var(--gecis);
}
.paylas-dugmesi:hover { border-color: var(--yesil); color: var(--yesil-koyu); }
.paylas[open] .paylas-dugmesi { border-color: var(--yesil); color: var(--yesil-koyu); }

/* Kart içindeki küçük biçim: yalnızca ikon. */
.paylas-sade .paylas-etiket { display: none; }
.paylas-sade .paylas-dugmesi { padding: 0.3rem 0.45rem; }

.paylas-sayi { font-variant-numeric: tabular-nums; }

.paylas-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 0.4rem);
    z-index: 30;
    min-width: 12rem;
    display: grid;
    gap: 0.1rem;
    padding: 0.35rem;
    background: var(--zemin-kart);
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    box-shadow: var(--golge-yuksek);
}
.paylas-menu a,
.paylas-menu button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.65rem;
    border: 0;
    border-radius: 0.4rem;
    background: none;
    font: inherit;
    font-size: 0.875rem;
    color: var(--metin);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.paylas-menu a:hover,
.paylas-menu button:hover { background: var(--vurgu-tul); }

/* Kapak koyu zeminde: düğme oradaki metinle aynı renkte olmalı. */
.kapak-bilgi .paylas-dugmesi {
    border-color: rgb(255 255 255 / 45%);
    color: #fff;
}
.kapak-bilgi .paylas-dugmesi:hover { border-color: #fff; color: #fff; }

.yazi-sonu-paylas {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 2.5rem 0 0;
    padding: 1rem 1.25rem;
    background: var(--zemin-yumusak);
    border-radius: var(--yuvarlak);
    font-size: 0.9375rem;
    color: var(--soluk);
}

/*
 * Ölçek YALNIZCA gövdeye uygulanıyor. Başlıklar `em` ile bağlı olduğu
 * için onlar da birlikte büyüyor; kenar çubukları, kartlar ve menü
 * sabit kalıyor.
 */
.yazi .govde { font-size: calc(1.125rem * var(--yazi-olcek)); }

/* ---------------- İlgili yazılar ---------------- */

/*
 * Artık kartlı ve yazı ölçüsünün dışında: burası okuma alanı değil,
 * gezinme alanı. Düz bağlantı listesiyken metin bloğunun altında ikinci
 * bir metin bloğu gibi duruyordu ve okur oraya varmadan sayfayı
 * kapatıyordu.
 */
.ilgili { margin-top: 4rem; padding-top: 2.5rem; border-top: 1px solid var(--cizgi); }
.ilgili h2 { font-size: 1.4rem; margin: 0 0 1.5rem; }
.ilgili .izgara {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ilgili .izgara a { text-decoration: none; }
.ilgili .izgara a:hover { text-decoration: none; }

/* ---------------- Alt bölüm ---------------- */

.alt { margin-top: 0; padding: 3.5rem 0 0; }

.alt-ic {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.2fr);
    gap: 2.5rem;
    padding-bottom: 3rem;
}

.alt-kunye img { display: block; margin-bottom: 1rem; }
.alt-tanim { color: #c8d3de; }

.alt-iletisim { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.alt-iletisim li { display: flex; align-items: flex-start; gap: 0.55rem; line-height: 1.5; }
.alt-iletisim .ikon { margin-top: 0.2rem; opacity: 0.7; }

.alt-sutun h2 {
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #fff;
    margin: 0 0 0.9rem;
}
.alt-sutun ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.alt-sutun a { color: #c8d3de; text-decoration: none; }
.alt-sutun a:hover { color: #fff; text-decoration: underline; }

/*
 * Uyku testi kutusu ayrı duruyor: bağlantı sütunlarından birinde
 * kaybolacak kadar önemsiz değil. Ücretsiz test, mağaza ziyaretine
 * giden en kısa yol.
 */
.alt-test {
    background: rgb(255 255 255 / 6%);
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: var(--yuvarlak);
    padding: 1.25rem;
}
.alt-test h2 { font-size: 1rem; color: #fff; margin: 0 0 0.5rem; }
.alt-test p { color: #c8d3de; font-size: 0.8125rem; }
.alt-test .dugme {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.5rem;
    padding: 0.6rem 1rem;
    background: var(--yesil);
    color: #fff !important;
    border-radius: 0.4rem;
    font-weight: 650;
    text-decoration: none;
}
.alt-test .dugme:hover { background: var(--yesil-koyu); }

/*
 * Kapsam notu alt bölümün en altında ve HER SAYFADA.
 * Tıbbi cihaz satan bir işletmenin blogu YMYL içeriği yayınlıyor;
 * notun burada olması hukuki bir yükümlülüğün karşılığı, süsleme değil.
 */
.alt-kapsam {
    border-top: 1px solid rgb(255 255 255 / 10%);
    padding-top: 1.5rem;
    padding-bottom: 2rem;
    font-size: 0.8125rem;
    color: #a9b8c7;
}
.alt-kapsam p { margin: 0 0 0.75rem; }
.alt-telif { opacity: 0.8; }

/* ---------------- Çerez bildirimi ---------------- */

/*
 * Ekranın altına yapışık, sayfayı ENGELLEMİYOR. İçerik okunabilir
 * kalıyor: blogun işi bilgi vermek ve okuru kapıda tutmak o işe aykırı.
 */
.cerez {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 60;
    max-width: 44rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem 1.25rem;
    background: var(--zemin-kart);
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    box-shadow: var(--golge-yuksek);
    font-size: 0.875rem;
}
.cerez p { margin: 0; flex: 1 1 18rem; color: var(--soluk); }
.cerez .dugme {
    padding: 0.6rem 1.4rem;
    border: 0;
    border-radius: 0.4rem;
    background: var(--yesil);
    color: #fff;
    font: inherit;
    font-weight: 650;
    cursor: pointer;
}
.cerez .dugme:hover { background: var(--yesil-koyu); }

/* ---------------- Dar ekran ---------------- */

@media (max-width: 62rem) {
    .one-cikan-duzen { grid-template-columns: 1fr; }
    .magaza-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .alt-ic { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
    .alt-kunye, .alt-test { grid-column: 1 / -1; }
}

@media (max-width: 52rem) {
    /*
     * Üst bölüm iki satıra ayrılıyor: marka + eylemler üstte, arama
     * kutusu altta tam genişlikte. Üçünü tek satıra sıkıştırmak arama
     * kutusunu 90 piksele düşürüyordu — o genişlikte yer tutucu metin
     * bile sığmıyor.
     */
    .ust-ic {
        grid-template-columns: auto auto;
        justify-content: space-between;
        row-gap: 0.75rem;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }
    .arama { grid-column: 1 / -1; grid-row: 2; }

    .ust-telefon span { display: none; }

    /* Menü katlanıyor. Açma/kapama betiksiz: gizli onay kutusu. */
    .ana-menu-ic { flex-wrap: wrap; }

    .ana-menu-dugmesi {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex: 1 1 100%;
        padding: 0.85rem 0;
        font-weight: 700;
        cursor: pointer;
    }
    .ana-menu-dugmesi .cizgi {
        width: 1.1rem;
        height: 2px;
        background: currentColor;
        box-shadow: 0 5px 0 currentColor, 0 -5px 0 currentColor;
    }
    /* Klavyeyle gezerken odak görünsün: kutu gizli, halka etikette. */
    .menu-anahtari:focus-visible + .ana-menu-dugmesi { outline: 2px solid #fff; outline-offset: 2px; }

    .ana-menu-liste {
        display: none;
        flex: 1 1 100%;
        flex-direction: column;
        gap: 0;
        padding-bottom: 0.5rem;
    }
    .menu-anahtari:checked ~ .ana-menu-liste { display: flex; }
    .ana-menu-liste a {
        padding: 0.7rem 0;
        border-bottom: 1px solid rgb(255 255 255 / 18%);
    }
    .ana-menu-liste a[aria-current] { border-bottom-color: #fff; }

    /*
     * Üst bölüm dar ekranda YAPIŞKAN DEĞİL.
     *
     * İki satırlık başlık + yeşil menü şeridi 239 piksel tutuyor; 812
     * piksellik bir telefon ekranının neredeyse üçte biri. Sayfayla
     * birlikte kayması, okuma alanını kalıcı olarak o kadar daraltmak
     * demekti.
     */
    .ust { position: static; }

    /*
     * Serit tek satir: [Menu] ............ [buyutec] [magaza].
     *
     * Onceki duzende "Menu" bir satir, altinda tam genislikte iki metinli
     * dugme daha vardi; ust serit, baslik ve arama satiriyla birlikte
     * telefonda 300 pikseli asiyordu. Iki eylem ikona indi, uyku testi
     * menunun icine girdi.
     */
    .ana-menu-dugmesi { flex: 1 1 auto; order: 1; }
    .ana-menu-araclar { order: 2; gap: 0.35rem; align-items: center; }
    .ana-menu-liste { order: 3; margin-right: 0; }

    .ana-menu-ikon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 0.4rem;
        color: #fff;
        cursor: pointer;
    }
    .ana-menu-ikon:hover,
    .arama-anahtari:checked ~ .ana-menu .ana-menu-ikon { background: rgb(0 0 0 / 14%); }
    /* Kutu gorunmez; odak halkasi etiketin uzerinde. */
    .arama-anahtari:focus-visible ~ .ana-menu .ana-menu-ikon {
        outline: 2px solid #fff;
        outline-offset: 2px;
    }

    /*
     * Magaza da ikona iniyor. Metin SILINMIYOR, gorsel olarak gizleniyor:
     * ikonun kendisi ekran okuyucuya hicbir sey soylemiyor.
     */
    .ana-menu-magaza {
        justify-content: center;
        width: 2.5rem;
        height: 2.5rem;
        padding: 0;
        border-radius: 0.4rem;
        align-self: center;
    }
    .ana-menu-magaza span {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    /*
     * Uyku testi menunun ICINDE: yalnizca menu acikken, listenin altinda.
     * Seritte ucuncu bir dugme olarak durmasi, en cok basilan iki seyi
     * (menu ve magaza) daraltiyordu.
     */
    .ana-menu-testi {
        display: none;
        order: 4;
        flex: 1 1 100%;
        justify-content: center;
        margin-bottom: 0.75rem;
        padding: 0.65rem 1rem;
        border: 1px solid rgb(255 255 255 / 45%);
        border-radius: 0.4rem;
    }
    .menu-anahtari:checked ~ .ana-menu-testi { display: flex; }

    /*
     * Arama kutusu KAPALI basliyor; buyutec aciyor. Kapaliyken baslikta
     * ikinci satir hic olusmuyor.
     */
    .arama { display: none; }
    .arama-anahtari:checked ~ .ust-ic .arama { display: block; }
}

@media (max-width: 40rem) {
    .one-cikanlar, .magaza-kartlari, .yazi-listesi { padding: 2.5rem 0; }
    .hosgeldin-ic { padding-top: 2.5rem; padding-bottom: 2.5rem; }
    .hosgeldin-dugmeler .dugme,
    .hosgeldin-dugmeler .dugme-ikincil { flex: 1 1 100%; justify-content: center; }

    .magaza-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .magaza-kart-gorsel { height: 6rem; }

    /*
     * Dar ekranda ana sayfa çok uzuyordu: ilk yazı kartına ulaşmak için
     * 3.500 piksel kaydırmak gerekiyordu. Öne çıkanlar listesi bunun en
     * büyük parçasıydı — dört yan yana kart, her biri 245 piksel.
     *
     * Kartlar sıkıştırılıyor (görsel dar, bilgi şeridi gizli, başlık üç
     * satırda kesiliyor) ve liste üç öğeye iniyor. Gizlenen yazılar
     * kaybolmuyor: hemen altındaki listede zaten varlar.
     */
    .kart-genis .kart-gorsel-baglantisi { flex: 0 0 6.5rem; }
    .kart-genis .kart-gorsel { min-height: 6rem; }
    .kart-genis .kart-alt { display: none; }
    .kart-genis .kart-ic { padding: 0.7rem 0.9rem; }
    .kart-genis .kart-baslik {
        font-size: 0.9375rem;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .one-cikan-liste li:nth-child(n+4) { display: none; }

    .magaza-izgara a { padding: 1rem 0.75rem; }

    /* Üç duyuru dar ekranda alt alta sarıp şeridi 70 piksele çıkarıyordu.
       Tek satırda, yatay kaydırılabilir. */
    .ust-serit-ic {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;
        gap: 1.1rem;
        min-height: 2.1rem;
    }
    .ust-serit-ic::-webkit-scrollbar { display: none; }
    .ust-serit a, .ust-serit span { white-space: nowrap; }

    .alt-ic { grid-template-columns: 1fr; }
    .cerez { left: 0.5rem; right: 0.5rem; bottom: 0.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .magaza-izgara a:hover { transform: none; }
    .kart-devam:hover { gap: 0.4rem; }
}

/* ================================================================
   GERİ BİLDİRİM DÜZELTMELERİ

   Yayına alındıktan sonra görülenler. Her biri somut bir kusura
   karşılık geliyor; ne olduğu kuralın başında yazıyor.
   ================================================================ */

/* ---------------- Çerez bildirimi kapanmıyordu ---------------- */

/*
 * `hidden` özniteliği tarayıcı stilinde `display: none` demek — ama
 * `.cerez { display: flex }` onu geçersiz kılıyordu. Sonuç: bildirim
 * hem sayfa açılışında hep görünüyordu hem de "Tamam" düğmesi hiçbir
 * şey yapmıyor gibi duruyordu (betik hidden'ı doğru ayarlıyor, CSS
 * onu dinlemiyordu).
 *
 * Aynı tuzak `hidden` verilen her esnek/ızgara kutusunda var; o yüzden
 * kural tek tek değil hepsi için yazıldı.
 */
[hidden] { display: none !important; }

/* ---------------- Menü yazısı okunmuyordu ---------------- */

/*
 * Yeşil zeminde gri yazı çıkıyordu: eski `.ust nav a` kuralı (0,1,2)
 * yeni menüyü (0,1,1) özgüllükle yeniyordu. O kurallar kaldırıldı;
 * burada da menü yazısı okunur bir ölçüye çekiliyor.
 *
 * Beyaz üzerine yeşil değil, yeşil üzerine beyaz: kontrast 4,9:1.
 * Öğeler sarmıyor — "Tüm yazılar" iki satıra düştüğünde şerit iki kat
 * yer kaplıyor ve menü çubuğu olmaktan çıkıyor.
 */
.ana-menu { font-size: 1rem; }

.ana-menu-liste a {
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: -0.005em;
}
.ana-menu-liste a:hover,
.ana-menu-liste a:focus-visible { color: #fff; }

.ana-menu-testi span,
.ana-menu-magaza span { white-space: nowrap; }

/* ---------------- Bölüm üst başlığı ---------------- */

.bolum-basligi .ust-baslik {
    margin: 0 0 0.35rem;
    font-size: 0.9375rem;
    font-weight: 650;
    color: var(--soluk);
}
.bolum-basligi.ortali .ust-baslik { text-align: center; }

/* ---------------- Kart yükseklikleri eşitlendi ---------------- */

/*
 * Izgaradaki kartlar farklı boylardaydı: `<li>` satır yüksekliğine
 * uzuyor ama içindeki `.kart` kendi içeriği kadar kalıyordu. Alt
 * bilgi şeridi de bu yüzden her kartta başka hizada duruyordu.
 *
 * `<li>` esnek kutuya çevriliyor ve kart onu dolduruyor; kartın kendi
 * iç düzeni zaten `margin-top: auto` ile alt şeridi dibe itiyor.
 */
.izgara > li,
.one-cikan-liste > li,
.ilgili .izgara > li {
    display: flex;
    align-items: stretch;
}
.izgara > li > .kart,
.one-cikan-liste > li > .kart,
.ilgili .izgara > li > .kart { flex: 1; min-width: 0; }

/* Öne çıkanlar listesindeki kartlar eşit yükseklikte ve sütunun
   tamamını dolduruyorlar. */
.one-cikan-liste { height: 100%; grid-auto-rows: 1fr; }

/*
 * Yan yana kartta metin sütunu ortalanıyor. Görsel sabit yükseklikte,
 * başlık bir ya da üç satır olabiliyor; üste yaslandığında kısa
 * başlıklı kartlarda altta boşluk kalıyordu.
 */
.kart-genis .kart-ic { justify-content: center; }
.kart-genis .kart-alt { margin-top: 0.75rem; }

/* ---------------- Mağaza kartı görselleri ---------------- */

/*
 * Kartlarda artık gerçek ürün fotoğrafları var (ikon değil). Oranları
 * birbirini tutmuyor — maske geniş, filtre uzun — bu yüzden sabit
 * yükseklikli bir alana `contain` ile oturuyorlar: kırpılmıyorlar ve
 * kart yükseklikleri eşit kalıyor.
 */
.magaza-izgara li { display: flex; }
.magaza-izgara a { width: 100%; }
.magaza-kart-gorsel { height: 9rem; }

/* ---------------- Okuma araçları çubuğu ---------------- */

/*
 * Sayfayla birlikte kayıyor. Önce yazının başında sabit duruyordu;
 * okur birkaç ekran aşağı inince araçlar yukarıda kalıyor ve punto
 * düğmesine basmak için başa dönmek gerekiyordu. Ayarın etkisini
 * görmek için de metnin YANINDA durması gerekiyor.
 *
 * Geniş ekranda yazının solunda dikey şerit. `left` hesabı: sayfa
 * ortası eksi yarım okuma genişliği (20rem) eksi çubuk payı; ekran
 * daralınca `max()` onu kenardan 1rem'de tutuyor.
 */
/*
 * Şerit YAZIYLA BİRLİKTE başlıyor ve onunla aşağı iniyor.
 *
 * Önce ekrana sabitlenmişti (`fixed`, dikeyde ortalanmış) ve sayfanın
 * neresinde olursanız olun aynı yerde duruyordu: kapak görselinin ve
 * başlığın üstüne biniyordu. `sticky` + sola kaydırılmış `float` ile
 * şerit yazının ilk satırının hizasında beliriyor, okur aşağı indikçe
 * üst menünün altında takılıp kalıyor.
 *
 * `float` metni daraltmıyor: kutu negatif kenar boşluğuyla tamamen
 * okuma sütununun DIŞINDA duruyor, satır kutularıyla kesişmiyor.
 */
.yazi { position: relative; }

.yazi-araclari {
    position: sticky;
    /* Yapışkan üst bölümün altı + bir nefes payı. */
    top: calc(var(--ust-toplam) + 1rem);
    z-index: 20;

    float: left;
    width: 3.5rem;
    margin-left: -5.5rem;
    margin-bottom: 1.5rem;

    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--zemin-kart);
    border: 1px solid var(--cizgi);
    border-radius: 999px;
    box-shadow: var(--golge-orta);
}

.yazi-araclari .arac-punto {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.35rem 0;
    border-top: 1px solid var(--cizgi-yumusak);
    border-bottom: 1px solid var(--cizgi-yumusak);
}

.yazi-araclari button,
.yazi-araclari .arac-yorum,
.yazi-araclari .paylas-dugmesi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--soluk);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 650;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--gecis), color var(--gecis);
}
.yazi-araclari button:hover,
.yazi-araclari .arac-yorum:hover,
.yazi-araclari .paylas-dugmesi:hover {
    background: var(--yesil-tul);
    color: var(--yesil-koyu);
}

/* Şeritte etiket ve sayaç yazısı yok: 2,5rem'lik yuvarlağa sığmıyor
   ve ikonlar zaten `title` taşıyor. */
.yazi-araclari .paylas-etiket,
.yazi-araclari .paylas-sayi,
.yazi-araclari .arac-etiket,
.yazi-araclari .arac-sayi { display: none; }

/* Şerit solda; paylaşım menüsü SAĞA açılıyor, yoksa okuma sütununun
   üstüne biner. */
.yazi-araclari .paylas-menu {
    left: calc(100% + 0.5rem);
    right: auto;
    top: 0;
    transform: none;
}

/*
 * Dar ekranda solda yer yok: şerit ekranın altında yatay bir çubuğa
 * dönüyor ve başparmağın olduğu yere geliyor.
 */
@media (max-width: 68rem) {
    .yazi-araclari {
        position: fixed;
        float: none;
        width: auto;
        margin: 0;
        left: 50%;
        right: auto;
        top: auto;
        bottom: 1rem;
        transform: translateX(-50%);
        flex-direction: row;
        align-items: center;
        z-index: 40;
    }
    .yazi-araclari .arac-punto {
        flex-direction: row;
        padding: 0 0.35rem;
        border-top: 0;
        border-bottom: 0;
        border-left: 1px solid var(--cizgi-yumusak);
        border-right: 1px solid var(--cizgi-yumusak);
    }
    .yazi-araclari .paylas-menu {
        left: 50%;
        right: auto;
        top: auto;
        bottom: calc(100% + 0.5rem);
        transform: translateX(-50%);
    }
}

/* ---------------- Bildirim zili ---------------- */

/*
 * Ekranın SOL alt köşesi. Sağ taraf "başa dön" düğmesinin; ikisi aynı
 * köşede olsaydı mobilde üst üste binerlerdi.
 *
 * `z-index` başa dön düğmesiyle aynı katmanda (45): ikisi de sayfanın
 * üstünde yüzüyor ama çerez bildiriminin (60) altında kalıyorlar —
 * bildirim bir hukuki yükümlülüğün karşılığı, sırayı o alır.
 */
.push-zil {
    position: fixed;
    left: 1.25rem;
    bottom: 1.25rem;
    z-index: 45;
    max-width: calc(100vw - 2.5rem);
}
.push-zil-sira {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.6rem 0.35rem 0.35rem;
    border: 1px solid var(--cizgi);
    border-radius: 999px;
    background: var(--zemin-kart);
    box-shadow: var(--golge-orta);
}

.push-zil-dugme {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 999px;
    background: var(--yesil);
    color: #fff;
    cursor: pointer;
    transition: background var(--gecis), transform var(--gecis);
}
.push-zil-dugme:hover { background: var(--yesil-koyu); }
.push-zil-dugme:active { transform: translateY(1px); }
.push-zil-dugme[disabled] { opacity: 0.6; cursor: default; }

.push-zil-etiket {
    font-size: 0.875rem;
    font-weight: 650;
    color: var(--metin);
    white-space: nowrap;
}

.push-zil-kapat {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--soluk);
    cursor: pointer;
}
.push-zil-kapat:hover { background: var(--zemin-yumusak); color: var(--metin); }

/* Sonuç metni zilin ÜSTÜNDE: yanına konsaydı şerit ekranın yarısını
   kaplardı ve dar ekranda taşardı. */
.push-durum {
    margin: 0 0 0.5rem;
    max-width: 17rem;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    background: var(--zemin-kart);
    box-shadow: var(--golge-orta);
    font-size: 0.8125rem;
    color: var(--soluk);
}

/*
 * Zil arada bir sallanıyor. Salınım 0,9 saniye, arası yaklaşık 8 saniye:
 * hareketin işi göz köşesine takılmak, sürekli titreyen bir düğme okuma
 * sırasında rahatsız eder.
 *
 * Oynayan şey İKON, düğme değil: düğmenin kendisi dönseydi yuvarlak
 * gölge de onunla birlikte kayardı.
 *
 * `transform-origin` zilin asıldığı nokta — gerçek bir zil tepesinden
 * sallanır, ortasından değil.
 */
@keyframes push-zil-salla {
    0%, 78%, 100% { transform: rotate(0); }
    80% { transform: rotate(-16deg); }
    83% { transform: rotate(13deg); }
    86% { transform: rotate(-10deg); }
    89% { transform: rotate(7deg); }
    92% { transform: rotate(-4deg); }
    95% { transform: rotate(2deg); }
}
.push-zil-dugme .ikon {
    transform-origin: 50% 18%;
    animation: push-zil-salla 8s ease-in-out infinite;
}

/*
 * Hareket tercihi kapalıysa hiç oynamıyor. Vestibüler rahatsızlığı olan
 * okur için sallanan bir öğe baş dönmesi sebebi; düğme hareketsiz de
 * aynı işi görüyor.
 */
@media (prefers-reduced-motion: reduce) {
    .push-zil-dugme .ikon { animation: none; }
}

/* ---------------- Başa dön ---------------- */

.yukari {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 45;
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--cizgi);
    border-radius: 999px;
    background: var(--zemin-kart);
    color: var(--soluk);
    cursor: pointer;
    box-shadow: var(--golge-orta);
    transition: background var(--gecis), color var(--gecis), transform var(--gecis);
}
.yukari:hover { background: var(--yesil); color: #fff; border-color: var(--yesil); }
.yukari:active { transform: translateY(1px); }

/*
 * Dar ekranda araç çubuğu ekranın altında duruyor; başa dön düğmesi
 * onun üstüne çıkıyor ki ikisi çakışmasın.
 */
@media (max-width: 68rem) {
    .yukari { bottom: 5.5rem; right: 1rem; }

    /* Zil de araç çubuğunun üstüne çıkıyor; etiket dar ekranda düşüyor,
       geriye yalnızca ikon kalıyor. */
    .push-zil { bottom: 5.5rem; left: 1rem; }
    .push-zil-etiket { display: none; }
    .push-zil-sira { padding: 0.35rem; }

    /*
     * Çubuk ekranın altında sabit duruyor ve sayfanın sonundaki içeriğin
     * (yorum formunun gönder düğmesi) üstüne biniyordu. Sayfaya çubuk
     * kadar alt boşluk veriliyor.
     *
     * `:has` desteklenmeyen eski bir tarayıcıda kural hiç uygulanmıyor;
     * o durumda da sayfa okunuyor, yalnızca son satır çubuğun altında
     * kalıyor ve biraz kaydırmak yetiyor.
     */
    body:has(.yazi-araclari) { padding-bottom: 5rem; }
}

/*
 * Çerez bildirimi açıkken yüzen düğmeler bir kat yukarı.
 *
 * Kardeş seçici SONRAKİ kardeşe bakıyor: çerez bildirimi düzende ikisinden
 * de önce durmak zorunda (bkz. duzen.blade.php). Bir süre başa dön düğmesi
 * çerezden ÖNCE duruyordu ve bu kural hiç uygulanmadı.
 */
.cerez:not([hidden]) ~ .yukari,
.cerez:not([hidden]) ~ .push-zil { bottom: 8rem; }

/* ---------------- Ana içerik odağı ---------------- */

/*
 * "Başa dön" ve "İçeriğe geç" odağı buraya taşıyor. Odak halkası
 * bastırılmıyor — klavyeyle gezen kullanıcının nerede olduğunu görmesi
 * gerekiyor — ama fareyle gelen tıklamada halka çizilmiyor.
 */
#icerik:focus { outline: none; }
#icerik:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 4px; }

/* ---------------- Raporlama programları ---------------- */

/*
 * `/blog/cpap-sd-kart-veri-raporlama-programlari` bir yazı değil, arama
 * tablosu: "cihazım şu, hangi programı indireceğim". Eski hâlinde 144
 * kelimeye karşılık 56 görsel ve 29 metinsiz bağlantı vardı.
 *
 * Bölüm yazı ölçüsünün (40rem) DIŞINDA: burada okunacak bir metin yok,
 * taranacak bir liste var ve dar sütun listeyi gereksiz uzatıyor.
 */
.raporlama {
    /* Genişlik `main.kap`'tan geliyor; burada ayrıca sınır verilmiyor.
       Verildiğinde bölüm `.yazi`nin 40rem'lik sütunundan taşıyordu. */
    margin: 3rem auto 0;
    padding-top: 2.5rem;
    border-top: 1px solid var(--cizgi);
}

.raporlama > h2 { font-size: 1.5rem; margin: 0 0 1.5rem; }

/* ---------------- Seçici ---------------- */

.raporlama-secici {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
    padding: 1.25rem;
    margin-bottom: 2rem;
    background: var(--yesil-tul);
    border: 1px solid var(--yesil);
    border-radius: var(--yuvarlak);
}

.raporlama-alan { display: flex; flex-direction: column; gap: 0.35rem; flex: 1 1 14rem; }
.raporlama-alan label { font-size: 0.8125rem; font-weight: 650; color: var(--baslik); }

.raporlama-alan select {
    /*
     * Dokunma hedefi 2,75rem: kullanıcı kitlesinin büyük kısmı 50 yaş
     * üstü ve trafiğin çoğu mobil. Tarayıcı varsayılanı 1,6rem civarı.
     */
    height: 2.75rem;
    padding: 0 0.75rem;
    border: 1px solid var(--cizgi);
    border-radius: 0.4rem;
    background: var(--zemin);
    color: var(--metin);
    font: inherit;
    font-size: 0.9375rem;
}
.raporlama-alan select:disabled { color: var(--soluk); background: var(--zemin-yumusak); }
.raporlama-alan select:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 1px; }

.raporlama-sifirla {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: 2.75rem;
    padding: 0 1rem;
    border: 1px solid var(--cizgi);
    border-radius: 0.4rem;
    background: var(--zemin);
    color: var(--soluk);
    font: inherit;
    font-size: 0.875rem;
    cursor: pointer;
}
.raporlama-sifirla:hover { border-color: var(--yesil); color: var(--yesil-koyu); }

.raporlama-bos { color: var(--soluk); padding: 1.5rem 0; }

/* ---------------- Liste ---------------- */

.raporlama-marka-grubu { margin-bottom: 2.5rem; }
.raporlama-marka-grubu h3 {
    font-size: 1.0625rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--yesil-koyu);
    margin: 0 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--yesil-tul);
}

.raporlama-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: 1rem;
}

.raporlama-kart {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: var(--zemin-kart);
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    box-shadow: var(--golge);
}

.raporlama-gorsel {
    flex: 0 0 5rem;
    width: 5rem;
    height: auto;
    max-height: 5rem;
    object-fit: contain;
    align-self: flex-start;
}

.raporlama-ic { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }

.raporlama-ad { margin: 0; font-weight: 700; color: var(--baslik); }
.raporlama-modeller { margin: 0; font-size: 0.8125rem; color: var(--soluk); }
.raporlama-uygulama { margin: 0; font-size: 0.8125rem; color: var(--soluk); }

/*
 * Bağlantılar METİNLE ve türe göre ayrı renkte. Eski sayfada hepsi
 * yalnızca bir resmi saran `<a>` idi; hangisinin Windows programı
 * hangisinin telefon uygulaması olduğu resme bakmadan anlaşılmıyordu.
 */
.raporlama-baglantilar { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.35rem; }

.raporlama-baglanti {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.8rem;
    border: 1px solid var(--cizgi);
    border-radius: 0.4rem;
    font-size: 0.8125rem;
    font-weight: 650;
    text-decoration: none;
    color: var(--baslik);
    background: var(--zemin);
}
.raporlama-baglanti:hover { border-color: var(--vurgu); color: var(--vurgu); }

.raporlama-desktop { border-color: var(--yesil); color: var(--yesil-koyu); }
.raporlama-desktop:hover { background: var(--yesil-tul); color: var(--yesil-koyu); }

.raporlama-uzanti {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--soluk);
}

.raporlama-not {
    margin: 0.35rem 0 0;
    font-size: 0.8125rem;
    color: var(--soluk);
    line-height: 1.5;
}

.raporlama-yardim {
    padding: 1rem 1.25rem;
    background: var(--zemin-yumusak);
    border-radius: var(--yuvarlak);
    font-size: 0.9375rem;
    color: var(--soluk);
}

@media (max-width: 40rem) {
    .raporlama-liste { grid-template-columns: 1fr; }
    .raporlama-alan { flex: 1 1 100%; }
    .raporlama-sifirla { width: 100%; justify-content: center; }
}