/* ─────────────────────────────────────────────────────────────
   anasayfa.css — bölüm bölüm yenilenen anasayfa stilleri
   home.css'ten SONRA yüklenir, sadece yenilenen bölümleri ezer.
   Her bölüm kendi başlığı altında durur.
   ───────────────────────────────────────────────────────────── */

:root{
    --ay-brand:      #ff7e00;   /* marka turuncusu — sadece eylem için */
    --ay-brand-koyu: #e06e00;
    --ay-ink:        #222;
    --ay-beyaz:      #fff;
}


/* ═══ TÜM BÖLÜMLERİ İLGİLENDİREN ═══════════════════════════════

   Sol kenarda sabit duran "Uygunluk Testi" sekmesi (footer.php'deki
   .dikey-link, 32px genişlik) ekranın dikey ortasında durduğu için
   mobilde hangi bölüm o hizadaysa onun metnini kapatıyor — hero'da
   doktorun adını, tedavi kartlarında başlığı.

   Mobilde sadece anasayfada gizliyoruz (`#home ~` seçicisi bunu
   sağlıyor; diğer sayfalarda sekme aynen kalır). Anasayfada uygunluk
   testine hero kartındaki "Uygun muyum?" butonundan zaten gidiliyor,
   yani erişim kaybolmuyor.

   Masaüstünde sekme bir şeyi kapatmıyor, orada dokunulmadı.
   ─────────────────────────────────────────────────────────── */
@media only screen and (max-width:800px){
    #home ~ .dikey-link{ display: none; }
}


/* ═══ BÖLÜM 1 — HERO ═══════════════════════════════════════════
   Doktor fotoğrafta sağda duruyor; metin ve akıllı lens kartı
   soldaki koyu alana yerleşir, doktorun üstüne taşmaz.
   ─────────────────────────────────────────────────────────── */

/* Soldaki koyu alanı kartın okunabileceği kadar güçlendir */
#home .sect20 .center:before{
    background: linear-gradient(to right,
        rgba(0,0,0,.88) 0%,
        rgba(0,0,0,.80) 32%,
        rgba(0,0,0,.35) 55%,
        rgba(0,0,0,.15) 100%);
}

/* İçerik bloğu artık tam genişlik değil — sol yarıda kalır */
#home .sect20 .content1{
    padding: 0 0 0 8vw;
    max-width: 56%;
}

#home .sect20 .content1 .text1{ font-size: clamp(15px, 1.5vw, 24px); letter-spacing:.02em; }
#home .sect20 .content1 .text2{ font-size: clamp(24px, 3vw, 52px); line-height:1.1; margin:4px 0 6px 0; }
#home .sect20 .content1 .text3{ font-size: clamp(13px, 1.15vw, 19px); opacity:.85; }

/* ── Akıllı lens kartı ── */
#home .sect20 .lenskart{
    margin: clamp(14px, 2vw, 30px) 0 0 0;
    max-width: 480px;
    padding: clamp(14px, 1.4vw, 22px) clamp(16px, 1.6vw, 26px);
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.22);
    border-left: 3px solid var(--ay-brand);
    border-radius: 10px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
#home .sect20 .lenskart .etiket{
    font-family:'poppins_bold',Arial,sans-serif;
    font-size: clamp(10px, .72vw, 12px);
    letter-spacing:.16em;
    text-transform:uppercase;
    color: var(--ay-brand);
    margin: 0 0 6px 0;
}
#home .sect20 .lenskart .baslik{
    font-family:'poppins_bold',Arial,sans-serif;
    font-size: clamp(16px, 1.35vw, 23px);
    line-height:1.25;
    color: var(--ay-beyaz);
}
#home .sect20 .lenskart .vaat{
    font-size: clamp(12px, .95vw, 16px);
    line-height:1.5;
    opacity:.85;
    margin: 7px 0 0 0;
}
#home .sect20 .lenskart .butonlar{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin: clamp(12px, 1.2vw, 18px) 0 0 0;
}
#home .sect20 .lenskart .butonlar a{
    display:inline-block;
    padding: 11px 20px;
    border-radius: 6px;
    font-family:'poppins_bold',Arial,sans-serif;
    font-size: clamp(12px, .85vw, 14px);
    text-decoration:none;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
#home .sect20 .lenskart .butonlar a.b1{
    background: var(--ay-brand);
    color:#fff;
}
#home .sect20 .lenskart .butonlar a.b1:hover{ background: var(--ay-brand-koyu); }
#home .sect20 .lenskart .butonlar a.b2{
    background: transparent;
    color:#fff;
    border:1px solid rgba(255,255,255,.45);
}
#home .sect20 .lenskart .butonlar a.b2:hover{
    border-color: var(--ay-brand);
    color: var(--ay-brand);
}

/* Lazer tedavisi kısayolları — akıllı lens CTA'larının altında.
   Etiketler kısaltıldığı için ("LASIK", "No-Touch, PRK", "Smile Pro")
   tek satıra sığıyor; bağlamı üstteki kategori linki veriyor. */
#home .sect20 .lenskart .lazerlinkler{
    margin: clamp(12px, 1.2vw, 16px) 0 0 0;
    padding: clamp(12px, 1.2vw, 16px) 0 0 0;
    border-top: 1px solid rgba(255,255,255,.18);
}
/* 9.5px'e kadar düşüyordu; dar ekranda okunmuyordu. */
#home .sect20 .lenskart .lazer-baslik{
    display:inline-block;
    margin: 0 0 9px 0;
    font-family:'poppins_bold',Arial,sans-serif;
    font-size: clamp(11px, .68vw, 12px);
    letter-spacing:.16em;
    text-transform:uppercase;
    color: rgba(255,255,255,.62);
    text-decoration:none;
    transition: color .2s ease;
}
#home .sect20 .lenskart a.lazer-baslik:hover{ color: var(--ay-brand); }
#home .sect20 .lenskart .lazer-secenekler{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}
#home .sect20 .lenskart .lazer-secenekler a{
    display:inline-block;
    padding: 9px 16px;
    border-radius: 6px;
    border:1px solid rgba(255,255,255,.28);
    background: rgba(255,255,255,.07);
    color:#fff;
    font-family:'poppins_semibold',Arial,sans-serif;
    font-size: clamp(11.5px, .78vw, 13.5px);
    line-height:1.2;
    white-space:nowrap;
    text-decoration:none;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
#home .sect20 .lenskart .lazer-secenekler a:hover{
    background: var(--ay-brand);
    border-color: var(--ay-brand);
    transform: translateY(-2px);
}
/* Klavyeyle gezenler için görünür odak — hover'a bağlı kalmasın */
#home .sect20 .lenskart .lazer-secenekler a:focus-visible,
#home .sect20 .lenskart a.lazer-baslik:focus-visible{
    outline: 2px solid var(--ay-brand);
    outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce){
    #home .sect20 .lenskart .lazer-secenekler a:hover{ transform:none; }
}


/* ── Mesleki üyelik logoları ────────────────────────────────────
   Hero'nun SAĞ duvarına asılı dikey kule — doktorun yanında,
   hakkımda sayfasındaki logo kulesiyle aynı görsel dil.
   Soldaki metin/kart bloğuyla çakışmıyor (o blok en fazla %56–66).

   Başlık yok; okunaklılık logonun kendisinde. Üç logo da açık
   zemin için tasarlanmış (koyu çizim) olduğu için beyaz "hap"ların
   içinde duruyor ve hap genişliğini sonuna kadar kullanıyorlar.

   Boyutlar üç farklı orana göre ayrı ayarlandı:
     (varsayılan) ESCRS 300x180 — dikeyde yer isteyen bileşik logo
     .genis      TOD   340x54  — çok yatık; aynı yükseklikte devasa durur
     .kare       TCOD  200x200 — kare mühür
   ─────────────────────────────────────────────────────────── */
#home .sect20 .uyelikserit{
    position:absolute;
    z-index:4;
    right: clamp(10px, 1.4vw, 26px);
    top:50%;
    transform: translateY(-50%);
    display:flex;
    flex-direction:column;
    gap: clamp(8px, .8vw, 12px);
    width: clamp(148px, 12.5vw, 184px);
    margin:0;
    padding:0;
    list-style:none;
}
#home .sect20 .us-oge{
    display:flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    padding: clamp(8px, .8vw, 12px) clamp(10px, 1vw, 14px);
    background:#fff;
    border-radius:12px;
    box-shadow: 0 12px 28px -14px rgba(0,0,0,.85);
    transition: transform .2s ease, box-shadow .2s ease;
}
#home .sect20 .us-oge:hover{
    transform: translateX(-4px);
    box-shadow: 0 16px 32px -14px rgba(0,0,0,.9);
}
/* Genel img kuralları en/boy oranını ezmesin diye !important.
   max-width:100% ile logo hapın içini dolduruyor; yükseklik
   sınırı yalnızca aşırı uzamayı engelliyor. */
#home .sect20 .us-oge img{
    width:auto !important;
    height:auto !important;
    max-width:100%;
    max-height: clamp(58px, 5.2vw, 78px);
    object-fit: contain;
    display:block;
}
#home .sect20 .us-oge.genis img{ max-height: clamp(24px, 2.2vw, 34px); }
#home .sect20 .us-oge.kare  img{ max-height: clamp(56px, 5vw, 74px); }

@media (prefers-reduced-motion: reduce){
    #home .sect20 .us-oge:hover{ transform:none; }
}

/* ── Hero yüksekliği ──────────────────────────────────────────
   Hero 1920/731 oranına bağlıydı; 801-930px arası ekranlarda
   metin + kart hero'dan TAŞIYORDU (ölçüm: 900px'te kart alt
   kenarı hero sınırına yapışık, üstteki yazı tepeden kesiliyor).
   Üyelik şeridi eklenince bu daha da daralacaktı.

   Alt sınır veriyoruz: dar masaüstlerinde hero orana değil bu
   değere göre yükseliyor, geniş ekranlarda oran zaten büyük
   olduğu için hiçbir şey değişmiyor (1366px'ten sonra etkisiz).
   Görsel `cover` olduğu için kırpılıyor; kırpma noktası doktoru
   kadrajda tutacak şekilde sağa alındı.
   ─────────────────────────────────────────────────────────── */
@media only screen and (min-width:801px){
    /* width:100% şart — aspect-ratio ile min-height birlikteyken
       Chrome yüksekliği orandan GENİŞLİĞE taşıyor ve blok 1024px
       kapsayıcının içinde 1366px'e çıkıyordu (sayfa yatay kayıyordu).
       Genişlik açıkça verilince oran yalnızca yüksekliği belirliyor. */
    /* 92vh üst sınırı yatay tutulan telefonlar için: 844x390 gibi
       kısa ekranlarda 520px'lik hero ekranı tamamen yutuyordu. */
    #home .sect20 .center{ min-height: clamp(340px, 92vh, 520px); width:100%; box-sizing:border-box; }
}
@media only screen and (min-width:801px) and (max-width:1370px){
    #home .sect20 .center img.im1{ object-position: 62% center; }
}

/* ── Orta genişlik: içerik alanı biraz genişler, kart 480px'te kalır ── */
@media only screen and (max-width:1100px){
    #home .sect20 .content1{ max-width:66%; padding-left:6vw; }
    #home .sect20 .lenskart .vaat{ font-size:14px; }
}

/* ── Mobil: fotoğraf üstte, içerik altında koyu panelde ──
   Mevcut hero mobilde 1920/731 oranında kalıp ~150px yüksekliğe
   düşüyordu; kart oraya sığmaz. Mobilde blok düzene geçiyoruz. */
@media only screen and (max-width:800px){
    #home .sect20 .center{
        aspect-ratio: auto;
        background: #111;
    }
    #home .sect20 .center img.im1{
        position: static;
        width: 100%;
        height: auto;
        aspect-ratio: 16/10;
        object-fit: cover;
        object-position: 72% center;   /* doktor kadrajda kalsın */
        display: block;
    }
    #home .sect20 .center:before{ display:none; }
    #home .sect20 .content1{
        position: static;
        transform: none;
        max-width: none;
        padding: 22px 20px 18px 20px;
        background: #111;
    }
    #home .sect20 .content1 .text1{ font-size:14px; }
    #home .sect20 .content1 .text2{ font-size:26px; }
    #home .sect20 .content1 .text3{ font-size:14px; }
    #home .sect20 .lenskart{
        max-width:none;
        margin-top:20px;
        background: rgba(255,255,255,.07);
    }
    #home .sect20 .lenskart .vaat{ display:block; font-size:14px; }
    #home .sect20 .lenskart .baslik{ font-size:19px; }
    #home .sect20 .lenskart .butonlar a{ flex:1 1 auto; text-align:center; font-size:13px; }
    /* Mobilde hero blok düzene geçiyor: kule sağ duvardan inip
       kartın altına yerleşiyor — dar ekranda dikey kule fotoğrafın
       yarısını kapatıyordu.

       Yerleşim okunaklılığa göre kuruldu: TOD logosu 340x54, yani
       çok yatık — üç logo yan yana dizilince yazısı 14px'e düşüyor
       ve okunmuyordu. Bu yüzden kare oranlı ikisi (ESCRS + TCOD)
       üstte yan yana, yatık olan TOD altta TAM GENİŞLİKTE duruyor;
       böylece dernek adı telefonda da net okunuyor.
       (order: DOM sırası ESCRS-TOD-TCOD, görsel sıra değişiyor.) */
    #home .sect20 .uyelikserit{
        position:static;
        transform:none;
        width:auto;
        display:grid;
        grid-template-columns:repeat(2, minmax(0,1fr));
        gap:10px;
        margin:0;
        padding:2px 20px 26px 20px;
        box-sizing:border-box;
    }
    #home .sect20 .us-oge{
        padding:10px 12px;
        border-radius:10px;
        box-shadow:0 8px 18px -12px rgba(0,0,0,.9);
    }
    #home .sect20 .us-oge img{ max-height:64px; }
    #home .sect20 .us-oge.kare{ order:1; }
    #home .sect20 .us-oge.kare img{ max-height:62px; }
    #home .sect20 .us-oge.genis{ order:2; grid-column:1 / -1; }
    #home .sect20 .us-oge.genis img{ max-height:46px; }
}

/* Çok dar telefonlar (≤380px) — kenar boşlukları ve logo tavanları biraz düşer */
@media only screen and (max-width:380px){
    #home .sect20 .uyelikserit{ gap:8px; padding-left:16px; padding-right:16px; }
    #home .sect20 .us-oge{ padding:9px 10px; }
    #home .sect20 .us-oge img{ max-height:56px; }
    #home .sect20 .us-oge.kare img{ max-height:54px; }
    #home .sect20 .us-oge.genis img{ max-height:40px; }
}


/* ═══ BÖLÜM 2 — TEDAVİ KARTLARI ════════════════════════════════
   Kartlar eski haline döndü: tek büyük dikey fotoğraf, tedavi adı
   ve "İzmir-Türkiye" etiketi görselin içinde gömülü (her dil için
   ayrı dosya). Yaş rozeti, madde listesi ve buton kaldırıldı.

   Eskisinden farkı görsel dilde: yuvarlak köşe, ince kenarlık,
   hover'da turuncu kenarlık + hafif yükselme ve fotoğrafta yakınlaşma.
   ─────────────────────────────────────────────────────────── */

/* Kaynak görseller 400x600. Kartı 400px'in üstüne çıkarmak görseli
   büyütür ve bulanıklaştırır — ızgara bu yüzden 400px'te sabitleniyor
   ve ortalanıyor. 6 kart 3 kolonda iki tam sıra yapıyor, boşluk kalmıyor. */
#home .sect40 .tedavigrid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 340px));
    justify-content: center;
    gap: clamp(18px, 1.8vw, 30px);
    margin: clamp(24px, 3vw, 44px) 0 0 0;
}

#home .sect40 .tk{
    display: block;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    overflow: hidden;
    background: #f1f5f9;
    text-decoration: none;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
#home .sect40 .tk:hover{
    border-color: var(--ay-brand);
    box-shadow: 0 .6rem 1.8rem rgba(0,35,58,.12);
    transform: translateY(-4px);
}

#home .sect40 .tk .tk-im{
    display: block;
    aspect-ratio: 4/5;          /* kaynak 400x600; alttan kırpılıyor */
    overflow: hidden;
}
#home .sect40 .tk .tk-im img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* ÜSTTEN hizalı: tedavi adı ve "İzmir-Türkiye" etiketi görselin
       üst kısmında. Varsayılan (center) olsaydı kırpma üstten de
       yapılır ve başlık kesilirdi. */
    object-position: center top;
    display: block;
    transition: transform .45s ease;
}
#home .sect40 .tk:hover .tk-im img{ transform: scale(1.05); }

@media (prefers-reduced-motion: reduce){
    #home .sect40 .tk,
    #home .sect40 .tk .tk-im img{ transition: none; }
    #home .sect40 .tk:hover{ transform: none; }
    #home .sect40 .tk:hover .tk-im img{ transform: none; }
}

@media only screen and (max-width:1100px){
    #home .sect40 .tedavigrid{ grid-template-columns: repeat(2, minmax(0, 340px)); }
}
@media only screen and (max-width:640px){
    #home .sect40 .tedavigrid{ grid-template-columns: 1fr 1fr; gap: 12px; }
}


/* ═══ BÖLÜM 3 — HAKKIMDA + UYGUNLUK TESTİ (yan yana) ═══════════
   İkisi tedavi kartlarının hemen altında, eşit iki kolonda.
   Hakkımda eskiden aşağıdaki .sect30'daydı, buraya taşındı;
   uygunluk testi ise eski .sect40 ızgarasının içindeydi.
   ─────────────────────────────────────────────────────────── */

#home .sect-ikili{
    position: relative;
    z-index: 3;
    background: #fff;
    padding: 0 0 clamp(50px, 6vw, 100px) 0;
}
#home .sect-ikili .ikili-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(18px, 1.8vw, 30px);
    align-items: stretch;
}

#home .sect-ikili .ik{
    display: grid;
    gap: clamp(16px, 1.6vw, 28px);
    align-items: center;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: clamp(20px, 2vw, 34px);
}

/* ── Hakkımda: metin solda, fotoğraf sağda ── */
#home .sect-ikili .ik-hakkimda{ grid-template-columns: 1fr auto; }
#home .sect-ikili .ik-hakkimda h1{
    margin: 0;
    font-family: 'poppins_bold', Arial, sans-serif;
    font-size: clamp(20px, 1.7vw, 30px);
    line-height: 1.2;
    color: #17375e;
    text-transform: uppercase;
}
#home .sect-ikili .ik-hakkimda h5{
    margin: 8px 0 0 0;
    font-size: clamp(14px, 1.05vw, 18px);
    color: #222;
    font-weight: normal;
}
#home .sect-ikili .ik-hakkimda .ik-icerik{
    margin: clamp(12px, 1.2vw, 20px) 0 0 0;
}
#home .sect-ikili .ik-hakkimda .ik-icerik p{
    margin: 0;
    font-size: clamp(13px, .92vw, 15px);
    line-height: 1.65;
    color: #4a5568;
}
#home .sect-ikili .ik-hakkimda .ik-gorsel img{
    display: block;
    width: clamp(140px, 13vw, 210px);
    height: auto;
    border-radius: 14px;
}

/* ── Uygunluk testi: video solda, metin sağda ── */
#home .sect-ikili .ik-uygunluk{ grid-template-columns: auto 1fr; }
#home .sect-ikili .ik-uygunluk .ik-baslik{
    font-family: 'poppins_bold', Arial, sans-serif;
    font-size: clamp(17px, 1.35vw, 24px);
    line-height: 1.3;
    color: #17375e;
}
#home .sect-ikili .ik-uygunluk .ik-alt{
    margin: 8px 0 0 0;
    font-size: clamp(13px, .95vw, 16px);
    line-height: 1.5;
    color: #4a5568;
}

/* Video kapağı — iframe tıklanınca yükleniyor */
#home .ik-video{
    position: relative;
    width: clamp(110px, 9.5vw, 145px);
    aspect-ratio: 405/720;          /* kapak görselinin gerçek oranı */
    border-radius: 22px;
    overflow: hidden;
    cursor: pointer;
    background: #000;
    /* Referanstaki telefon görünümü: ince beyaz çerçeve + yumuşak gölge */
    border: 5px solid #fff;
    box-shadow: 0 .6rem 1.8rem rgba(0,35,58,.18);
}
#home .ik-video img{
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
#home .ik-video .ik-oynat{
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 48px; height: 34px;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: rgba(220,32,32,.92);
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}
#home .ik-video .ik-oynat:before{
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-40%, -50%);
    border-style: solid;
    border-width: 8px 0 8px 13px;
    border-color: transparent transparent transparent #fff;
}
#home .ik-video:hover .ik-oynat{
    background: #dc2020;
    transform: translate(-50%, -50%) scale(1.06);
}
#home .ik-video.acildi img,
#home .ik-video.acildi .ik-oynat{ display: none; }
#home .ik-video.acildi iframe{
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
    border: 0;
}

/* ── Ortak buton ── */
#home .sect-ikili .ik-buton{
    display: inline-block;
    margin: clamp(16px, 1.6vw, 24px) 0 0 0;
    padding: 12px 28px;
    border-radius: 999px;
    font-family: 'poppins_bold', Arial, sans-serif;
    font-size: clamp(12px, .85vw, 14px);
    text-decoration: none;
    transition: background .2s ease, color .2s ease;
}
#home .sect-ikili .ik-buton.cizgili{
    border: 1.5px solid var(--ay-brand);
    color: var(--ay-brand);
    background: transparent;
}
#home .sect-ikili .ik-buton.cizgili:hover{ background: var(--ay-brand); color: #fff; }
#home .sect-ikili .ik-buton.dolu{
    background: var(--ay-brand);
    color: #fff;
}
#home .sect-ikili .ik-buton.dolu:hover{ background: var(--ay-brand-koyu); }

/* ── Dar ekranlar ── */
@media only screen and (max-width:1100px){
    #home .sect-ikili .ikili-grid{ grid-template-columns: 1fr; }
}
@media only screen and (max-width:640px){
    #home .sect-ikili .ik-hakkimda,
    #home .sect-ikili .ik-uygunluk{ grid-template-columns: 1fr; }
    #home .sect-ikili .ik-hakkimda .ik-gorsel{ order: -1; }
    #home .sect-ikili .ik-hakkimda .ik-gorsel img{ width: 150px; }
    #home .ik-video{ width: 100%; }
    #home .sect-ikili .ik-buton{ display: block; text-align: center; }
}


/* ── Bölüm 3 — referans görünümüne yaklaştırma ────────────────
   Eklenenler: metnin arkasındaki açık yeşil onay dairesi,
   kartların köşelerindeki turuncu vurgular ve butonların
   yaprak biçimi (pill değil).
   ─────────────────────────────────────────────────────────── */

/* Kartlar dekoratif öğeleri kırpsın */
#home .sect-ikili .ik{
    position: relative;
    overflow: hidden;
}

/* Uygunluk kartı: metnin arkasında açık yeşil onay dairesi */
/* Daire kartın kendisine göre konumlanır (metne göre değil) */
#home .sect-ikili .ik-onay{
    position: absolute;
    right: -8.5%;          /* referans: merkez kart genişliğinin %87'sinde */
    top: 56%;
    transform: translateY(-50%);
    width: 43%;            /* referans: çap kart genişliğinin %43'ü */
    aspect-ratio: 1;
    border-radius: 50%;
    background: #d9efd9;
    z-index: 0;
    pointer-events: none;
}
/* Dairenin içindeki beyaz onay işareti */
#home .sect-ikili .ik-onay:before{
    content: "";
    position: absolute;
    left: 27%;
    top: 20%;
    width: 30%;
    height: 54%;
    border-right: 20px solid #fff;
    border-bottom: 20px solid #fff;
    border-radius: 4px;
    transform: rotate(45deg);
}
/* Metin dairenin üstünde kalsın */
#home .sect-ikili .ik-uygunluk .ik-baslik,
#home .sect-ikili .ik-uygunluk .ik-alt,
#home .sect-ikili .ik-uygunluk .ik-buton{ position: relative; z-index: 1; }

/* Kart köşelerindeki turuncu vurgular */
#home .sect-ikili .ik-uygunluk:before{
    content: "";
    position: absolute;
    right: -22px; top: -22px;
    width: 62px; height: 62px;
    background: var(--ay-brand);
    border-radius: 0 0 0 100%;
    pointer-events: none;
}
#home .sect-ikili .ik-uygunluk:after{
    content: "";
    position: absolute;
    right: 20px; bottom: 16px;
    width: 36px; height: 36px;
    border: 2px solid var(--ay-brand);
    border-radius: 50%;
    opacity: .55;
    pointer-events: none;
}

/* Buton biçimleri referanstakiyle aynı:
   HAKKIMDA (çizgili) yaprak biçimi, HADİ BAŞLAYALIM (dolu) pill. */
#home .sect-ikili .ik-buton{
    padding: 14px 34px;
    letter-spacing: .02em;
}
#home .sect-ikili .ik-buton.cizgili{
    border-radius: 30px 8px 30px 8px;
}
#home .sect-ikili .ik-buton.dolu{
    border-radius: 999px;
    font-size: clamp(13px, .95vw, 16px);
    padding: 16px 38px;
}

/* Doktor fotoğrafı referanstaki gibi biraz daha büyük */
#home .sect-ikili .ik-hakkimda .ik-gorsel img{
    width: clamp(150px, 15.5vw, 250px);
}

@media only screen and (max-width:640px){
    #home .sect-ikili .ik-onay{ display: none; }
    /* Halka mobilde butonun altına giriyordu */
    #home .sect-ikili .ik-uygunluk:after{ display: none; }
    #home .ik-video{ width: clamp(150px, 46vw, 210px); margin: 0 auto; }
}

/* Video ile metin arası referanstaki gibi ferah olsun */
#home .sect-ikili .ik-uygunluk{ gap: clamp(12px, 1.4vw, 22px); }

/* Referans kartın en/boy oranı 0.68; dikey boşluk artırılmazsa kart
   0.54'te kalıyor ve video orantısız büyük duruyor. */
#home .sect-ikili .ik-uygunluk{
    padding-top: clamp(34px, 6.5vw, 96px);
    padding-bottom: clamp(34px, 6.5vw, 96px);
}

/* Referansta buton metin bloğunun SAĞINA yaslı, sola değil */
#home .sect-ikili .ik-uygunluk .ik-metin{ text-align: right; }
#home .sect-ikili .ik-uygunluk .ik-baslik,
#home .sect-ikili .ik-uygunluk .ik-alt{ text-align: left; }

/* Kart ve video köşeleri referanstaki gibi daha yumuşak, kartta hafif gölge */
#home .sect-ikili .ik{
    border-radius: 26px;
    box-shadow: 0 .4rem 1.4rem rgba(0,35,58,.05);
}
#home .ik-video{ border-radius: 26px; }

/* Mobilde metin ortalanır. Bu blok dosyanın sonunda duruyor çünkü
   yukarıdaki `text-align: right` kuralı medya sorgusuz — medya
   sorguları özgüllük eklemediği için sırayı korumak şart. */
@media only screen and (max-width:640px){
    #home .sect-ikili .ik-uygunluk .ik-metin{ text-align: center; }
}


/* ── "Hadi başlayalım" butonu: hover'da sağa kayma, ok sürekli hareket ──
   Ok ayrı bir <span class="ok"> içinde; böylece buton kaymasıyla okun
   kendi hareketi çakışmıyor (ikisi de transform kullanıyor, aynı
   elemanda olsalar biri diğerini ezerdi). */
#home .sect-ikili .ik-buton.dolu{
    transition: background .2s ease, transform .25s ease, box-shadow .25s ease;
}
#home .sect-ikili .ik-buton.dolu:hover{
    transform: translateX(8px);
    box-shadow: 0 .5rem 1.2rem rgba(255,126,0,.35);
}
#home .sect-ikili .ik-buton.dolu .ok{
    display: inline-block;
    margin-left: 10px;
    animation: ay-ok-gidip-gel 1.4s ease-in-out infinite;
}
@keyframes ay-ok-gidip-gel{
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(8px); }
}

/* Hareket azaltma tercihi olan kullanıcılarda sürekli animasyon durur;
   hover'daki tek seferlik kayma kalır ama anında olur. */
@media (prefers-reduced-motion: reduce){
    #home .sect-ikili .ik-buton.dolu .ok{ animation: none; }
    #home .sect-ikili .ik-buton.dolu{ transition: background .2s ease; }
    #home .sect-ikili .ik-buton.dolu:hover{ transform: none; }
}


/* ═══ BÖLÜM 5 — AKILLI LENS TANITIMI ═══════════════════════════
   Simülatörün hemen üstünde: solda etiket/başlık/maddeler/butonlar,
   sağda TV programı videosu. Video kapağı ortak bileşen (#home
   .ik-video); ölçü ve çerçeve burada eziliyor.
   ─────────────────────────────────────────────────────────── */

#home .sect-lens{
    position: relative;
    z-index: 3;
    background: #fff;
    padding: 0 0 clamp(50px, 6vw, 100px) 0;
}
#home .sect-lens .lens-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 3.5vw, 60px);
    align-items: center;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 26px;
    padding: clamp(24px, 3vw, 52px);
}

#home .sect-lens .lens-etiket{
    font-family: 'poppins_bold', Arial, sans-serif;
    font-size: clamp(10px, .74vw, 12px);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ay-brand);
}
#home .sect-lens .lens-baslik{
    margin: 8px 0 0 0;
    font-family: 'poppins_bold', Arial, sans-serif;
    font-size: clamp(21px, 1.9vw, 34px);
    line-height: 1.2;
    color: #17375e;
}
#home .sect-lens .lens-ayrac{
    display: block;
    width: 58px; height: 3px;
    margin: 14px 0 0 0;
    background: var(--ay-brand);
    border-radius: 2px;
}

#home .sect-lens .lens-maddeler{
    list-style: none;
    margin: clamp(16px, 1.8vw, 26px) 0 0 0;
    padding: 0;
}
#home .sect-lens .lens-maddeler li{
    position: relative;
    padding: 0 0 0 30px;
    margin: 0 0 14px 0;
    font-size: clamp(13px, 1vw, 16px);
    line-height: 1.6;
    color: #4a5568;
}
#home .sect-lens .lens-maddeler li:last-child{ margin-bottom: 0; }
#home .sect-lens .lens-maddeler li:before{
    content: "";
    position: absolute;
    left: 0; top: .3em;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--ay-brand);
}
/* Dairenin içindeki beyaz onay işareti */
#home .sect-lens .lens-maddeler li:after{
    content: "";
    position: absolute;
    left: 6px; top: .55em;
    width: 4px; height: 8px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
}

#home .sect-lens .lens-butonlar{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: clamp(20px, 2.2vw, 32px) 0 0 0;
}
#home .sect-lens .lens-buton{
    display: inline-block;
    padding: 14px 30px;
    border-radius: 999px;
    font-family: 'poppins_bold', Arial, sans-serif;
    font-size: clamp(12px, .88vw, 15px);
    text-decoration: none;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .25s ease;
}
#home .sect-lens .lens-buton.dolu{ background: var(--ay-brand); color: #fff; }
#home .sect-lens .lens-buton.dolu:hover{ background: var(--ay-brand-koyu); transform: translateX(6px); }
#home .sect-lens .lens-buton.dolu .ok{
    display: inline-block;
    margin-left: 8px;
    animation: ay-ok-gidip-gel 1.4s ease-in-out infinite;
}
#home .sect-lens .lens-buton.cizgili{
    border: 1.5px solid var(--ay-brand);
    color: var(--ay-brand);
    background: transparent;
}
#home .sect-lens .lens-buton.cizgili:hover{ background: var(--ay-brand); color: #fff; }

/* Video: yatay 16/9, Bölüm 3'teki dikey kapaktan farklı oran */
#home .sect-lens .lens-video .ik-video{
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 18px;
    border: 0;
    box-shadow: 0 .6rem 1.8rem rgba(0,35,58,.14);
}

@media (prefers-reduced-motion: reduce){
    #home .sect-lens .lens-buton.dolu .ok{ animation: none; }
    #home .sect-lens .lens-buton.dolu:hover{ transform: none; }
}

@media only screen and (max-width:900px){
    #home .sect-lens .lens-grid{ grid-template-columns: 1fr; }
    #home .sect-lens .lens-video{ order: -1; }
}
@media only screen and (max-width:640px){
    #home .sect-lens .lens-buton{ flex: 1 1 100%; text-align: center; }
}

/* Oynat butonu dikey telefon kapağına göre ölçülmüştü; büyük yatay
   videoda orantısız küçük kalıyordu. */
#home .sect-lens .ik-video .ik-oynat{
    width: 74px; height: 52px;
    border-radius: 13px;
}
#home .sect-lens .ik-video .ik-oynat:before{
    border-width: 11px 0 11px 18px;
}


/* ── Hakkımda kartı mobilde çok yer kaplıyordu ────────────────
   Ölçülen: 375x667 ekranda kart 526px, yani görünür alanın %79'u.
   Fotoğraf 167px, paragraf 172px'ti.

   Paragraf 4 satıra kırpılıyor; tam metin zaten hemen altındaki
   "HAKKIMDA" butonunun gittiği sayfada duruyor.
   ─────────────────────────────────────────────────────────── */
@media only screen and (max-width:640px){
    #home .sect-ikili .ik-hakkimda{
        padding: 20px;
        gap: 14px;
    }
    /* Mobilde fotoğraf metnin üstünde ve ORTADA. Masaüstünde sağda
       kalıyor — bu kural yalnızca ≤640px'te geçerli. */
    #home .sect-ikili .ik-hakkimda .ik-gorsel{
        justify-self: center;
        text-align: center;
    }
    #home .sect-ikili .ik-hakkimda .ik-gorsel img{
        width: 104px;
        border-radius: 12px;
        margin: 0 auto;
    }
    #home .sect-ikili .ik-hakkimda h1{ font-size: 19px; }
    #home .sect-ikili .ik-hakkimda h5{ font-size: 13px; margin-top: 4px; }
    #home .sect-ikili .ik-hakkimda .ik-icerik{ margin-top: 10px; }
    #home .sect-ikili .ik-hakkimda .ik-icerik p{
        font-size: 13px;
        line-height: 1.55;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    #home .sect-ikili .ik-hakkimda .ik-buton{
        margin-top: 14px;
        padding: 11px 24px;
    }
}


/* ═══ SAYFA İÇİ BAĞLANTILAR (anchor) ═══════════════════════════
   Hero → #smart-lens (akıllı lens bölümü)
   Akıllı lens bölümü → #lens-simulasyon (simülatör)

   Bağlantılar gerçek href="#..." — JavaScript gerekmiyor. Böylece
   klavyeyle, yeni sekmede açmayla ve geri tuşuyla düzgün çalışıyor.

   scroll-margin-top şart: header.sticky1 yapışkan ve 122px (masaüstü)
   / 111px (mobil) yükseklikte. Bu değer olmasaydı hedef bölümün
   başlığı menünün ALTINDA kalırdı.
   ─────────────────────────────────────────────────────────── */

html{ scroll-behavior: smooth; }

#home #smart-lens,
#home #lens-simulasyon{
    scroll-margin-top: 140px;   /* 122px menü + nefes payı */
}

/* Odak yönetimi: tabindex="-1" sayesinde ekran okuyucu hedefe iner.
   Bu elemanlar sekme sırasında olmadığı için odak çerçevesi
   gösterilmiyor — görsel gürültü olurdu. */
#home #smart-lens:focus,
#home #lens-simulasyon:focus{ outline: none; }

/* Aşağı ok, sayfa içi bağlantı olduğunu belli etsin */
#home .ok-asagi{
    display: inline-block;
    margin-left: 8px;
    animation: ay-ok-asagi 1.6s ease-in-out infinite;
}
@keyframes ay-ok-asagi{
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(4px); }
}

@media only screen and (max-width:900px){
    #home #smart-lens,
    #home #lens-simulasyon{ scroll-margin-top: 125px; }
}

/* Hareket azaltma tercihi: yumuşak kaydırma da, ok animasyonu da kapanır */
@media (prefers-reduced-motion: reduce){
    html{ scroll-behavior: auto; }
    #home .ok-asagi{ animation: none; }
}


/* ═══ MOBİL ALT AKSİYON BARI ═══════════════════════════════════
   Yalnızca anasayfada ve yalnızca ≤900px'te görünür. Markup
   home.php'de, stiller burada — diğer sayfalar hiç etkilenmiyor.

   Dikkat edilenler:
   - Sayfa altına bar yüksekliği kadar boşluk ekleniyor, yoksa
     footer'ın son satırı barın altında kalırdı
   - env(safe-area-inset-bottom): iPhone'da alt çubuk alanına saygı
   - Mevcut sabit WhatsApp butonu ve "Uygunluk Testi" sekmesi mobilde
     gizleniyor; ikisi de bu barda zaten var, mükerrer olurlardı
   ─────────────────────────────────────────────────────────── */

.mobilbar{ display: none; }

@media only screen and (max-width:900px){
    .mobilbar{
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));  /* minmax(0,..): ızgara
            hücreleri varsayılan min-width:auto yüzünden içeriğinden küçülemez;
            uzun bir etiket hücreyi ve barı taşırabilirdi */
        position: fixed;
        left: 0; right: 0; bottom: 0;
        width: 100%;
        max-width: 100vw;
        z-index: 999;
        background: #fff;
        border-top: 1px solid #e2e8f0;
        box-shadow: 0 -.25rem .9rem rgba(0,35,58,.10);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .mobilbar .mb-oge{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 9px 3px 8px 3px;
        min-height: 58px;          /* dokunma hedefi */
        min-width: 0;              /* hücre içeriğinden küçülebilsin */
        overflow: hidden;          /* hiçbir koşulda dışarı taşmasın */
        text-decoration: none;
        color: #17375e;
        border-right: 1px solid #eef2f6;
    }
    .mobilbar .mb-oge:last-child{ border-right: 0; }
    .mobilbar .mb-oge .mb-ikon{
        display: block;
        width: 20px; height: 20px;
        line-height: 0;
    }
    .mobilbar .mb-oge .mb-ikon svg{
        width: 100%; height: 100%;
        fill: currentColor;        /* ikonlar Font Awesome, fill'i yok */
        display: block;
    }
    .mobilbar .mb-oge .mb-yazi{
        font-family: 'poppins_semibold', Arial, sans-serif;
        font-size: 10px;
        line-height: 1.15;
        text-align: center;
        letter-spacing: 0;
        max-width: 100%;
        /* İki satıra kadar sarabilir; yazı tipi geç yüklenip yedek font
           daha geniş bassa bile hücreden taşmaz. */
        overflow-wrap: anywhere;
    }
    .mobilbar .mb-oge.vurgu{ color: var(--ay-brand); }
    .mobilbar .mb-oge:active{ background: #f8fafc; }

    /* Sayfa altına bar kadar boşluk — footer barın altında kalmasın.
       #home ~ seçicisi: yalnızca anasayfadaki footer etkileniyor. */
    #home ~ #footer1{
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    }

    /* Mükerrer olanları gizle */
    #home ~ .whatsapp-icon{ display: none; }
}


/* ── Sayfanın yatay taşması ──────────────────────────────────
   390px ekranda sayfa 422px genişliğindeydi; mobil alt bar
   position:fixed olduğu için bu genişliğe uzuyor ve son öğesi
   ekran dışında kalıyordu.

   Kaynağı ölçüldü: TEK eleman — .astg-signature ("Powered by
   GoMauna"). shortcode.css'te max-width:1100px + padding:18px 24px
   tanımlı ama box-sizing yok, dolayısıyla dolgu genişliğe 48px
   ekleyip kapsayıcıyı aşıyor.

   shortcode.css global olduğu için ona dokunmuyoruz; düzeltme
   anasayfa kapsamında. Aynı kusur bu imzanın çıktığı diğer
   sayfalarda da var, ayrı iş olarak duruyor. */
#home .astg-signature{ box-sizing: border-box; }