/* ------------------------------------------------------------------
   YEREL DÜZENLEME KATMANI  (orijinal tasarım dosyalarına dokunmaz)

   Reklamlar yerelde yüklenmediği için sitenin reklama ayırdığı boş
   alanlar kocaman boşluk olarak görünüyor. Burası onları kapatır.

   Orijinal (reklam boşlukları dahil) görünümü istersen:
   index.html içindeki  <link ... assets/local/offline.css>  satırını sil.
   ------------------------------------------------------------------ */

/* Nav altındaki 560px'lik marka banner alanı ve diğer page-skin alanları.
   Sitenin kendi kuralı  body.desktop-theme #brand-skinundernav { height:560px !important }
   (özgüllük 0,1,1,1). Onu geçmek için id'yi iki kez yazıyoruz (0,2,0,0). */
#brand-skinundernav#brand-skinundernav,
#brand-skinright#brand-skinright,
#brand-skinleft#brand-skinleft {
    height: 0 !important;
    min-height: 0 !important;
    padding-top: 0 !important;
    overflow: hidden !important;
}

/* Doldurulmamış GPT reklam kutuları */
[id^="div-gpt-ad"]:empty {
    display: none !important;
}

/* ------------------------------------------------------------------
   "AI Persona'ya Sor" karuseli index.html'den kaldırıldı. O bölüm
   kartlarla arama kutusu arasındaki boşluğu sağlıyordu; kalkınca kartlar
   114px'e çıkıp arama kutusunun (alt kenarı 134px) altına giriyordu.
   Arama kutusunun altı 134px; kartların üstünde rahat bir nefes payı
   bırakmak için ilk kartı ~186px'e indiriyoruz.
   ------------------------------------------------------------------ */
#tiles-container {
    margin-top: 72px;
}

/* …ama artık konu şeridi ana sayfada da açık (aşağıdaki "KONU ŞERİDİ
   ANA SAYFADA DA GÖRÜNSÜN" bloğu) ve arama kutusuyla kartların arasını
   o dolduruyor, yani telafi payına hiç gerek kalmadı.

   Referansta (kizlarsoruyor.com) #tiles-container'ın margin'i YOK —
   temanın CSS'inde böyle bir kural hiç bulunmuyor. Arşiv kopyasında
   (web.archive.org, 2025-10, CSS'i yüklenmiş hâlde) ölçülen:
       şerit altı → başlık üstü :  9px
       .tiles-main-header       :  margin: 0 0 20px 0
       .tiles-column-container  :  margin-top: 15px
   Kendi eklediğimiz 24px, başlığı kategorilerden 34px aşağı itip
   referanstaki dengeyi bozuyordu. Sıfırlıyoruz: aradaki 10px
   ara sarmalayıcılardan geliyor, referanstaki 9px ile aynı. */
body.desktop-theme.homepage #tiles-container {
    margin-top: 0;
}

/* ------------------------------------------------------------------
   FOOTER DÜZENLEMELERİ
   BiBilen linki, uygulama rozetleri ve sosyal ikonlar kaldırıldı.
   Telif yazısı logo altından sağdaki o alana taşındı.
   ------------------------------------------------------------------ */

/* ------------------------------------------------------------------
   POST SAYFASI (post.html)
   Sitede içerik alanının `min-height:70%` kuralı var; canlı sayfada
   altındaki cevap listesi burayı dolduruyordu. Şablonda cevaplar
   olmadığı için kocaman boş bir alan kalıyordu.
   ------------------------------------------------------------------ */
/* İçerik kısa kaldığında altta boş mavi alan kalmasın */
body.single-page #container-wrapper {
    min-height: calc(100vh - 214px);
}

/* Gönderi altındaki 32 kartlık liste.
   Kartın kendi görünümü desktop.min.css'ten geliyor; ızgara kuralı
   (`width:24%; float:left`) ise sadece ana sayfaya yüklenen
   desktop-home-page.min.css'te olduğu için kartlar burada tek sütun
   kalıyordu. Float yerine CSS sütunları kullanıyoruz — kart boyları
   farklı olduğunda float'ta oluşan boşluklar/takılmalar olmuyor. */
/* "Devamını oku" ve altına JS'in gömdüğü sonsuz-içerik iframe'i.
   iframe canlı siteye (kizlarsoruyor.com/sc/...) gidiyor, yerelde
   "bağlanmayı reddetti" hata sayfası olarak 2000px yer kaplıyordu. */
#sc-continue,
body > iframe[src*="/sc/"] {
    display: none !important;
}

/* Yorumların arasındaki ve üstündeki boş reklam alanları
   (reklam yüklenmediği için sadece boşluk olarak duruyorlar) */
body.single-page #haveopiniontop,
body.single-page aside[id^="opinion-xth"],
body.single-page .ad-slot:empty {
    display: none !important;
}

#post-tiles {
    margin-top: 28px;
}

#post-tiles .tile-column {
    column-count: 4;
    column-gap: 16px;
}

#post-tiles .tile-item {
    width: 100%;
    float: none;
    display: inline-block;
    margin-bottom: 16px;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
}

/* Gönderi, ana sayfadaki kart alanıyla aynı genişlikte (1050px) olsun.
   #main-column float:left ve genişliği yok — içeriğine göre 730px'e
   büzülüyordu (kenar çubuklu düzenin ölçüsü). */
body.single-page #main-column {
    width: 100%;
    max-width: 1050px;
}

body.single-page #post-content,
body.single-page #single-post-main,
body.single-page #post-comment-section {
    width: 100%;
}

/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------
   FOOTER EKRANIN ALTINA SABİT
   Her sayfada, her kaydırma konumunda ekranın en altında dursun.
   Sitenin kendi `docked-footer` davranışının aynısı (position:fixed),
   ama JS'e bağlı olmadan ve slide-up/slide-down animasyonu olmadan.
   ------------------------------------------------------------------ */
footer#main-footer#main-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    z-index: 2000;

    /* AÇILIR FOOTER (kizlarsoruyor.com davranışı)
       Normalde ekranın altında gizli; aşağı kaydırınca yukarı çıkar,
       yukarı kaydırınca tekrar iner.

       Sitenin kendi mekanizması buydu: gcore.min.js içindeki
       gag.dockFooter() gövdeye `docked-footer` sınıfı ekleyip
       jQuery slideDown/slideUp çalıştırıyordu. O akış sonsuz
       kaydırmaya bağlıydı ve klonda çalışmıyor; aynı davranışı
       transform + transition ile yeniden kuruyoruz (jQuery'siz,
       düzen hesabı yaptırmadığı için kaydırmada takılma yapmaz).
       Sınıfı ekleyip kaldıran kod: assets/local/footer-dock.js */
    transform: translateY(100%);
    transition: transform .28s ease;
    will-change: transform;
}

body.footer-acik footer#main-footer#main-footer {
    transform: translateY(0);
}

/* Footer artık içeriğin ÜSTÜNE biniyor (akıştan çıktı). Sayfa sonunda
   göründüğünde son satırı örtmesin diye alta pay bırakıyoruz. */
#container-wrapper {
    padding-bottom: 120px;
}

/* Footer tek satır: logo solda, menü ortada, telif sağda — üçü de dikeyde
   aynı hizada. Orijinal düzen float tabanlıydı; flex'e çeviriyoruz. */
footer#main-footer .inner.content {
    display: flex;
    align-items: center;
    min-height: 56px;
}

footer#main-footer .logo-menu-wrap {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
}

footer#main-footer .logo-menu-wrap .logo-copy {
    float: none;
    width: auto;
    flex: 0 0 auto;
}

footer#main-footer .logo-menu-wrap .logo-copy .footer-logo {
    padding: 0;
}

/* img satır-içi olduğu için altında satır boşluğu kalıyor ve logo
   diğerlerine göre birkaç piksel yukarıda duruyordu.
   Yükseklik: tema `height:35px` diyor ama logo yeni oranıyla (6.53:1)
   o yükseklikte 228px'e çıkıp footer'ın logo sütununu şişiriyor;
   27px'te ~176px kalıyor ve menüye yer bırakıyor. */
footer#main-footer .logo-menu-wrap .logo-copy .footer-logo a img {
    display: block;
    height: 27px;
    width: auto;
    max-width: 100%;
}

/* menü, logo ile telif arasındaki boşluğu doldurup ortalanır */
footer#main-footer .logo-menu-wrap .footer-menu {
    float: none;
    flex: 1 1 auto;
    overflow: visible;
}

footer#main-footer .logo-menu-wrap .footer-menu ul {
    float: none;
    width: auto;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

footer#main-footer .logo-menu-wrap .footer-menu ul li {
    padding: 0;
    line-height: 1;
    margin: 0 7px;
}

/* Ayraç çizgileri: site kuralı sondan 3. öğeyi sıfırlıyor (silinen öğeler
   yüzünden yanlış öğeye denk geliyor). Çift id ile özgüllüğü aşıp
   çizgiyi yalnızca gerçek son öğede kaldırıyoruz. */
footer#main-footer#main-footer .footer-menu ul li a {
    border-right: 1px solid rgba(255, 255, 255, .35);
    padding-right: 14px;
}

footer#main-footer#main-footer .footer-menu ul li:last-child a {
    border-right: none;
    padding-right: 0;
}

/* Telif yazısı sağ uçta, aynı hizada.
   Site kuralı sosyal ikonları float + top:23px + -50px ile kaydırıyordu. */
footer#main-footer .soc-glam-wrap {
    flex: 0 0 auto;
}

footer#main-footer .soc-glam-wrap .footer-social-bar {
    float: none !important;
    top: 0 !important;
    margin-right: 0 !important;
}

footer#main-footer .soc-glam-wrap .social-bar {
    width: auto;
    height: auto;
    float: none;
    display: flex;
    align-items: center;
}

footer#main-footer .soc-glam-wrap .copyright {
    margin: 0 !important;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
}

/* ------------------------------------------------------------------
   FOOTER
   Ana sayfada footer'ı home-tiles.min.js gizliyor ($("#main-footer").hide());
   canlı sitede sonsuz kaydırma sonunda ortaya çıkıyor. Yerelde sonsuz
   kaydırma hiç bitmediği için görünmez kalıyordu — açtık.
   jQuery .hide() inline style="display:none" yazdığı için !important şart.
   ------------------------------------------------------------------ */
#main-footer#main-footer {
    display: block !important;
}

/* ==================================================================
   RESPONSIVE — TEK TASARIM
   Site aslında "adaptive"di: sunucu masaüstü/mobil diye iki ayrı sürüm
   veriyordu ve elimizdeki masaüstü sürümü her şeyi 1050px'e sabitliyordu.
   Aşağısı o sabit genişlikleri akışkan hale getirip tek tasarımın her
   ekranda çalışmasını sağlar.
   ================================================================== */

html, body {
    min-width: 0 !important;
}

/* Site `html,body{height:100%}` veriyor. Sticky footer'ın yapışma aralığı
   ebeveyninin kutusu kadar olduğu için body 100vh'de kalınca footer
   ekranın 70px altına düşüyordu. Yüksekliği içeriğe bırakıyoruz. */
html, body {
    height: auto !important;
    min-height: 100%;
}

/* overflow-x sadece html'de: body'ye de verilince body kendi kaydırma
   bağlamı oluyor, genişliği kaydırma çubuğu kadar daralıyor ve içerik
   sütunu sabit footer'a göre 8px kayıyordu. */
html {
    overflow-x: hidden;
}

/* --- tam genişlikte barlar --- */
#mainHeader,
footer#main-footer,
.subnav-topics {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
}

/* --- header bandı tam genişlik ---
   Sitenin kendi tasarımı: #mainHeader { position:fixed; left:0; right:0 }
   ve .header-inner tam genişlikte, mavi zeminli, 60px iç boşluklu.
   Bunu 1050px'e kapatmak bandı ortada bırakıp kenarları boş bırakıyor. */
#mainHeader .header-inner {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
}

/* --- ortalanmış içerik kapsayıcıları --- */
footer#main-footer .inner,
.content-wrapper,
#container-wrapper,
.subnav-topics .topics-inner,
#tiles-container,
.tiles-column-container,
.tiles-column-container .tile-column {
    width: 100% !important;
    max-width: 1050px !important;
    min-width: 0 !important;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* dar ekranda kenar boşluğu */
@media (max-width: 1082px) {
    footer#main-footer .inner,
    #container-wrapper {
        padding-left: 14px;
        padding-right: 14px;
    }
}

/* ------------------------------------------------------------------
   KART IZGARASI
   Ana sayfadaki kartları home-tiles.min.js mutlak konumlandırıyor
   (masonry) — JS ile yazılan left/top değerleri ekran daralınca
   uyum sağlamıyor. CSS sütunlarına çevirip JS'in konumlarını
   !important ile geçersiz kılıyoruz; post sayfasındaki #post-tiles
   zaten böyle çalışıyordu, ikisi de aynı davranıyor artık.
   ------------------------------------------------------------------ */
.tiles-column-container .tile-column,
#post-tiles .tile-column {
    height: auto !important;
    position: static !important;
    column-count: 4;
    column-gap: 16px;
}

.tiles-column-container .tile-column .tile-item,
#post-tiles .tile-item {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    float: none !important;
    display: inline-block;
    margin-bottom: 16px;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
}

@media (max-width: 1000px) {
    .tiles-column-container .tile-column,
    #post-tiles .tile-column { column-count: 3; }
}

@media (max-width: 720px) {
    .tiles-column-container .tile-column,
    #post-tiles .tile-column { column-count: 2; column-gap: 12px; }
}

@media (max-width: 480px) {
    .tiles-column-container .tile-column,
    #post-tiles .tile-column { column-count: 1; }
}

/* ------------------------------------------------------------------
   HEADER — dar ekran
   Logo mutlak konumlu ve ekranın ortasına hizalı; dar ekranda
   "Keşfet" ve "Ara" öğelerinin üstüne biniyordu. Bu ikisi zaten
   hamburger menünün içinde de var, dar ekranda gizliyoruz:
   [hamburger] [logo] [giriş] şeklinde temiz bir satır kalıyor.
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
    #mainHeader .nav-menu-link,
    #mainHeader .search-menu-div {
        display: none !important;
    }

    /* Logo yeni oranıyla (6.53:1) daha yayvan; dar ekranda ayarı burada.
       İKİ TUZAK VAR:
       1) `#mainHeader .logo img{max-width:40vw}` kuralı bundan SONRA
          yükleniyor ve aynı özgüllükte (1,1,1) — id'yi ikileyip (2,1,1)
          öne geçiyoruz.
       2) `.logo` bir flex kapsayıcı (display:flex). img flex öğesi olduğu
          için varsayılan `align-items:stretch` ile kapsayıcının yüksekliğine
          GERİLİYOR; `height:auto` hiç devreye girmiyordu ve logo dikey
          eziliyordu (150x44 ölçüldü, doğrusu 150x23). `align-self:center`
          germeyi kapatıyor. */
    #mainHeader#mainHeader .logo img {
        /* Logo mutlak konumlu ve tam ortada; soldaki hamburger "Menü"
           yazısıyla birlikte 97px'te bitiyor. Ortalanmış logonun sol
           kenarı (100vw - genişlik)/2 olduğundan, çakışmamak için
           genişlik ≤ 100vw - 220px olmalı (97 + 8px pay, iki yana).
           375px'te 155px, 430px'te 210px'e oturuyor. */
        max-width: min(210px, calc(100vw - 220px));
        height: auto;
        align-self: center;
    }

    /* "Giriş Yap / Üye Ol" yazısı ortadaki logonun üstüne biniyordu;
       dar ekranda sadece profil ikonu kalsın */
    #mainHeader .user-avatar .nav-user-text {
        display: none !important;
    }

    #mainHeader .user-avatar {
        max-width: 25vw;
    }
}

/* ------------------------------------------------------------------
   ARAMA ÇUBUĞU
   .ask-wrapper 600px sabit + margin-right:-241px ile ortalanıyordu;
   dar ekranda ekranın dışına taşıyordu.
   ------------------------------------------------------------------ */
.ask-section .ask-wrapper {
    width: 100% !important;
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}

.ask-search-box {
    max-width: 100% !important;
}

@media (max-width: 640px) {
    .ask-section .ask-wrapper {
        width: calc(100% - 28px) !important;
    }
}

/* ------------------------------------------------------------------
   FOOTER — dar ekran
   Masaüstünde ekranın altına sabit tek satır. Dar ekranda sabit
   kalırsa ekranın önemli bir kısmını yiyor ve logo/menü/telif
   üst üste biniyor: akışa döndürüp alt alta diziyoruz.
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
    /* Footer artık her boyutta açılır-kapanır sabit çubuk (yukarıdaki
       "AÇILIR FOOTER" bloğu). Eskiden mobilde akışa döndürüyorduk çünkü
       sürekli sabit kalınca ekranın büyük kısmını yiyordu — kendiliğinden
       gizlendiği için artık buna gerek yok. */

    /* mobilde footer alt alta dizildiği için daha yüksek: pay da yüksek */
    #container-wrapper {
        padding-bottom: 170px;
    }

    /* Footer artık içeriğin üstüne binen bir çubuk; yüksekliği ekrandan
       çalıyor (sıkıştırmadan önce 320px'te 234px = ekranın %41'i).
       Boşlukları kısıp menü satırlarını sıkılaştırıyoruz. */
    footer#main-footer .inner.content {
        flex-direction: column;
        gap: 6px;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    footer#main-footer .logo-menu-wrap {
        flex-direction: column;
        gap: 6px;
        width: 100%;
    }

    /* menü linkleri dokunulabilir kalsın ama satır arası dar olsun */
    footer#main-footer .logo-menu-wrap .footer-menu ul li {
        margin: 0 6px;
    }

    footer#main-footer#main-footer .footer-menu ul li a {
        min-height: 40px;
    }

    footer#main-footer .logo-menu-wrap .footer-menu ul {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 8px;
    }

    /* alt alta gelince dikey ayraç çizgileri anlamsızlaşıyor */
    footer#main-footer#main-footer .footer-menu ul li a {
        border-right: none;
        padding-right: 0;
    }

    footer#main-footer .soc-glam-wrap .copyright {
        font-size: 12px;
        opacity: .85;
    }
}

/* Dar telefonda footer logosunu düşürüyoruz: marka zaten header'da
   duruyor ve bu satır ~44px yer yiyordu. Menü + telif kalıyor. */
@media (max-width: 480px) {
    footer#main-footer .logo-menu-wrap .logo-copy {
        display: none;
    }
}

/* ------------------------------------------------------------------
   POST SAYFASI — dar ekran
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
    /* Gönderi sayfasının header'ında ana sayfada olmayan bir "Sor"
       butonu var; ortadaki mutlak konumlu logonun üstüne biniyor.
       Aynı işlev hamburger menüde ve sayfa altındaki cevap kutusunda
       zaten mevcut. */
    #mainHeader .nav-ask {
        display: none !important;
    }

    /* Beğen / Paylaş / Takip Et: dar alanda kelimeler ortadan
       bölünüyordu ("Beğe n"). Bölünmeyi engelleyip butonları
       içeriğe göre daraltıyoruz. */
    article.single-post .ibar-like,
    article.single-post .ibar-menu-option,
    article.single-post .share-col,
    article.single-post .share-action,
    article.single-post .share-icon-text {
        white-space: nowrap;
    }
}

@media (max-width: 420px) {
    /* çok dar ekranda buton yazıları sığmazsa punto küçülsün */
    article.single-post .ibar-like,
    article.single-post .ibar-menu-option,
    article.single-post .share-icon-text {
        font-size: 13px;
    }
}

/* Yorum sayacı satırı ("… Kız / … Erkek yanıtladı") dar ekranda
   tek satıra sığmayıp taşıyordu; alta sarmasına izin veriyoruz. */
@media (max-width: 520px) {
    .comments-header-bottom,
    .comments-header-bottom .count-flex,
    .comments-header-bottom .answer-count {
        flex-wrap: wrap !important;
        max-width: 100%;
        row-gap: 6px;
    }

    .comments-header-bottom .gender-answer-count {
        white-space: normal;
    }
}

/* ==================================================================
   HAMBURGER MENÜ — SOLDAN AÇILAN ÇEKMECE (drawer)

   Temanın kendi menüsü masaüstü için "mega dropdown": .hamburger-menu-box
   1170x490px, ortada açılıyor, içinde solda iki sütunlu bağlantı listesi
   sağda konu listesi yan yana. Mobilde ekranın üç katı genişliğe çıkıp
   sayfayı yana kaydırılabilir yapıyordu.

   Burada her ekran boyutunda soldan içeri kayan tek sütunlu bir çekmeceye
   çeviriyoruz. Mekanizma tamamen CSS — markup'ta zaten hazır:
       <input type="checkbox" id="hamburger-menu-open">   ← durum
       <label class="menu-btn" for="…">Menü</label>        ← açar
       <label class="menu-overlay" for="…">               ← karartma, tıkla-kapat
       <div class="hamburger-menu-box">                    ← çekmece
   Üçü de kardeş olduğu için `:checked ~ …` ile sürülüyor; JS gerekmiyor.

   NOT: temanın kapalı hâli `display:none`. Kayma animasyonu görünmesi için
   çekmeceyi hep `display:block` tutup ekran dışına `translateX(-100%)` ile
   itiyoruz; erişilebilirlik/tıklanabilirlik `visibility` ile kapanıyor
   (temanın kendi `:checked` kuralı zaten visible yapıyor). `visibility`
   geçişini kapanışta gecikmeli veriyoruz ki çekmece kaybolmadan kaysın.
   ================================================================== */
#mainHeader .hamburger-menu-div .hamburger-menu-box {
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: min(360px, 86vw);
    height: 100vh;
    height: 100dvh;
    max-height: none;
    margin: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: 2px 0 18px rgba(0, 0, 0, .22);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    z-index: 999;
    transform: translateX(-100%);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .3s;
}

#mainHeader .hamburger-menu-div .hamburger-menu-open:checked ~ .hamburger-menu-box {
    transform: translateX(0);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1), visibility 0s;
}

/* karartma: temanın kuralı sadece visibility değiştiriyordu, sertçe
   yanıp sönüyordu — opaklık geçişi ekliyoruz */
#mainHeader .hamburger-menu-div .menu-overlay {
    background: rgba(0, 0, 0, .5);
    opacity: 0;
    transition: opacity .3s ease, visibility 0s linear .3s;
}

#mainHeader .hamburger-menu-div .hamburger-menu-open:checked ~ .menu-overlay {
    opacity: 1;
    transition: opacity .3s ease, visibility 0s;
}

/* çekmece açıkken arkadaki sayfa kaymasın.
   Sadece dikey ekseni kilitliyoruz: `overflow:hidden` yatayda da geçerli
   olup gövdeyi kaydırma bağlamı yapıyor ve sabit footer'a göre içeriği
   kaydırıyordu (aşağıdaki `overflow-x: clip` notuyla aynı tuzak). */
body:has(#hamburger-menu-open:checked) {
    overflow-y: hidden;
}

/* --- çekmece içi: her şey tek sütun --- */
#mainHeader .hamburger-menu-box .hamburger-menu-box-wrapper {
    display: block;
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
}

#mainHeader .hamburger-menu-box #hamburger-menu-nav {
    flex: none;
    width: auto;
    max-width: 100%;
    padding: 14px 14px 4px;
    box-sizing: border-box;
}

/* iki sütunlu bağlantı listesi → tek sütun, kendi kaydırması yok
   (çekmecenin tamamı zaten kayıyor; iç içe kaydırma kötü davranıyor) */
#mainHeader .hamburger-menu-box .hamburger-main-ul {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: none;
    overflow: visible;
    margin-bottom: 4px;
}

#mainHeader .hamburger-menu-box .hamburger-main-ul > li {
    flex: none;
    width: auto;
    max-width: 100%;
    margin-bottom: 8px;
    box-sizing: border-box;
}

/* satırlar: sabit 73px yükseklik dar çekmecede açıklama metnini kesiyordu */
#mainHeader .hamburger-menu-box #hamburger-menu-nav .menu-click {
    height: auto;
    min-height: 56px;
    width: auto;
    padding: 11px 14px;
    border-radius: 10px;
    box-sizing: border-box;
}

#mainHeader .hamburger-menu-box #hamburger-menu-nav .menu-click .icon {
    margin-right: 13px;
    flex: 0 0 auto;
}

#mainHeader .hamburger-menu-box .menu-item-left,
#mainHeader .hamburger-menu-box .menu-item-right {
    min-width: 0;
    max-width: 100%;
}

#mainHeader .hamburger-menu-box .menu-desc {
    line-height: 1.35;
}

/* konu listesi: sağdaki sütundan alta iniyor, kendi kaydırması kalkıyor */
#mainHeader .hamburger-menu-box .hamburger-menu-topics {
    flex: none;
    width: auto;
    max-width: 100%;
    height: auto;
    padding: 0 14px;
    box-sizing: border-box;
}

#mainHeader .hamburger-menu-box .hamburger-topics-header {
    padding: 6px 6px 12px;
    font-size: 17px;
}

#mainHeader .hamburger-menu-box .topicsul {
    max-height: none;
    height: auto;
    overflow: visible;
    padding: 0;
}

#mainHeader .hamburger-menu-box .topicsul li {
    height: 60px;
}

#mainHeader .hamburger-menu-box .topicsul li img {
    width: 44px;
    height: 44px;
}

/* alt bağlantılar dar sütunda sarsın */
#mainHeader .hamburger-menu-box .hamburger-bottom-ul {
    width: auto;
    max-width: 100%;
    flex-wrap: wrap;
    row-gap: 10px;
    padding: 4px 0 14px;
    box-sizing: border-box;
}

/* Menüden kaldırılan bölümler: Yapay Zeka, BiBilenler, Anketler.
   Bunlar kizlarsoruyor'a özgü özellikler; markanın kapsamında yoklar.
   href üzerinden seçiyoruz — listede sıra değişse de doğru satırı bulur
   (data-ga-label bu öğelerde yok, sınıflar da ortak). */
#mainHeader .hamburger-main-ul > li:has(> a[href*="/yapay-zeka-cevapliyor"]),
#mainHeader .hamburger-main-ul > li:has(> a[href*="/bibilenler"]),
#mainHeader .hamburger-main-ul > li:has(> a[href*="/anket"]) {
    display: none;
}

/* Sosyal medya ikonları ve mobil uygulama rozetleri menüden kaldırıldı.
   (.hamburger-social kapsayıcısı ikisini birden içeriyor: içinde
   .hamburger-sm = X/Facebook/Instagram/YouTube, .hamburger-app = Google
   Play / App Store rozetleri.) Hepsi kizlarsoruyor hesaplarına gidiyordu
   ve dar çekmecede alt bağlantıların üstüne biniyorlardı. */
#mainHeader .hamburger-menu-box .hamburger-social {
    display: none;
}

/* --- kapatma düğmesi (markup'a eklendi: index.html / post.html) --- */
#mainHeader .hamburger-menu-box .ik-menu-kapat {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 48px;
    padding: 0 16px;
    margin: 0;
    font-size: 30px;
    line-height: 1;
    color: #334d5e;
    background: #fff;
    cursor: pointer;
}

/* Gövdede yatay taşmayı kes ama `clip` ile: `hidden` body'yi kaydırma
   bağlamı yapıp genişliğini kaydırma çubuğu kadar daraltıyor ve içerik
   sabit footer'a göre kayıyordu. `clip` böyle bir yan etki yaratmaz.

   DİKKAT — özgüllük: sadece `body { overflow-x: clip }` (0,0,1) yazmak
   ETKİSİZ kalıyordu. Sitenin kendi kuralı sayfa içi <style> bloğunda:
     body.desktop-theme { overflow-x: hidden }                     (0,1,1)
     body.desktop-theme.single-page, …listing { overflow-x: hidden } (0,2,1)
   ve o <style> blokları offline.css'ten SONRA yükleniyor. Aynı seçicileri
   burada tekrarlayıp kaynak sırasıyla kazanıyoruz. */
body.desktop-theme,
body.desktop-theme.single-page,
body.desktop-theme.listing {
    overflow-x: clip;
}


/* ==================================================================
   MOBİL UYUMLULUK KATMANI
   Tarayıcıda (Chromium/Playwright) 16 ekran boyutunda ölçülen
   sorunların düzeltmeleri. Ölçüm tabanı: 27/32 ekran sorunluydu.

   KIRILMA NOKTASI: aşağıdaki bloklar tutarlı olarak
     @media (max-width: 900px), (max-height: 500px) and (orientation: landscape)
   kullanır. Sebep: yatay çevrilmiş telefonlar 812px, 932px gibi GENİŞ
   ama 375-430px YÜKSEK oluyor — tek başına genişlik eşiği onları
   kaçırıyordu (ölçüm: 812x375 ve 932x430'da header çakışması ve
   ekranın %36'sını yiyen sabit çubuklar).
   ================================================================== */

/* ==================================================================
   MARKA RENGİ — ÜST BANT
   Header bandı ve altındaki arama şeridi tek bir CSS değişkeninden
   besleniyor. index.html / post.html içindeki <style> bloğunda:
     :root { --header-bg-color: #12298F }          (lacivert)
     .desktop-theme #mainHeader .header-inner,
     .ask-section, … { background: var(--header-bg-color) }

   Yeni renk stripchat.app'in hero kırmızısı: #a2252d
   (sitedeki diğer tonlar — istersen tek satırda değiştirilir:
      #a22027  bölüm başlığı gradyanının tabanı
      #c22934  "Watch Now" butonu, daha parlak)

   ÖZGÜLLÜK NOTU: sayfa içi <style> bloğu offline.css'ten SONRA
   yüklendiği için düz `:root` (0,1,0) yazmak yetmez; `html:root`
   (0,1,1) ile özgüllüğü aşıyoruz.
   ------------------------------------------------------------------ */
html:root {
    --header-bg-color: #a2252d;

    /* ALT KISIM (içerik alanı) — kizlarsoruyor.com'daki gibi açık gri.
       Klonda lacivere çevrilmişti (#0c1f6c / #0b1e6b). Temanın kendi
       taban rengi zaten bu: desktop.min.css → body{background:#f3f3f3} */
    --desktop-home-bg-color: #f3f3f3;
    --desktop-single-bg-color: #f3f3f3;
    --mobile-home-bg-color: #f3f3f3;

    /* SAYFAYI AŞAĞI ÇEKİNCE ÇIKAN BOŞLUK
       Mobil tarayıcılar sayfanın en üstünde/altında lastik gibi esner
       (overscroll / rubber-band). O esneme alanında tuval rengi görünür.
       Arka planı açık griye çevirince üstte kırmızı bandın ÜSTÜNDE gri
       bir şerit belirdi — "boşluk" bu.

       Çözüm: rengi <html>'e veriyoruz. CSS'te arka plan normalde
       body'den tuvale terfi eder; html'in kendi arka planı olunca terfi
       durur ve tuval html'in rengini alır. Böylece:
         esneme alanı (üst ve alt) → kırmızı
         içerik alanı (body kutusu) → açık gri
       Not: bu yüzden aşağıdaki `background-color` html'de, body'de değil. */
    background-color: #a2252d;
}

/* Footer, header ile aynı renk.
   Sitenin kendi kuralı: footer#main-footer{background:#46377a} (0,1,1),
   çift id ile (0,2,1) aşıyoruz. Değişken kullanıyoruz ki header rengini
   değiştirince footer da kendiliğinden takip etsin. */
footer#main-footer#main-footer {
    background: var(--header-bg-color);

    /* Footer'dan sonra sayfada birkaç görünmez düğüm kalıyor (noscript,
       boş ad-slot'lar). Bunlar anonim bir satır kutusu üretiyor ve
       gövdenin AÇIK GRİ zemini footer'ın ~10px altından sızıyordu —
       sayfa sonuna inince görünen ince gri şerit buydu.
       box-shadow düzeni hiç etkilemeden footer'ın altını da boyar. */
    box-shadow: 0 40px 0 var(--header-bg-color);
}

/* Aynı sızıntının kaynağını da kapatıyoruz (düzen etkisi yok) */
footer#main-footer ~ noscript {
    display: none;
}


/* ------------------------------------------------------------------
   0. PLATFORM TABANI
   ------------------------------------------------------------------ */

/* iOS Safari yatay çevirmede metni kendiliğinden büyütüyor (hesaplanan
   değer "auto" idi); tasarımı bozuyor. */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* dokunma vurgusu varsayılan açık maviydi (rgba(51,181,229,.4)),
       sitenin mor/lacivert paletiyle uyumsuzdu */
    -webkit-tap-highlight-color: rgba(117, 69, 255, .24);
}

/* ------------------------------------------------------------------
   1. HEADER — çakışmalar
   Kök neden: desktop.min.css'te
     #mainHeader .logo { position:absolute; left:50%; transform:translate(-50%,-50%) }
   Logo kardeşlerinin akışından çıktığı için onların ÜSTÜNE biniyor.
   Ölçülen çakışmalar:
     320px  → "Menü" etiketi ile logo            10px
     1024px → "Sor" butonu ile logo (post.html)  69px
     812px yatay → "Sor" ile logo               138px
   ------------------------------------------------------------------ */

/* "Sor" butonu 1050px'lik masaüstü düzenine göre ölçülmüş; logo ortada
   sabit olduğu için ~1100px altında kaçınılmaz çakışıyor. Aynı işlev
   hamburger menüde ve sayfa altındaki cevap kutusunda zaten var.
   (Mevcut 768px kuralı yetmiyordu — 1024px iPad yatayda da çakışıyor.) */
@media (max-width: 1100px) {
    #mainHeader .nav-ask {
        display: none !important;
    }
}

/* Yatay çevrilmiş telefon: genişlik 812-932px, yani 768px eşiğinin
   üstünde — header öğeleri geri gelip logoya biniyordu. */
@media (max-height: 500px) and (orientation: landscape) {
    #mainHeader .nav-menu-link,
    #mainHeader .search-menu-div,
    #mainHeader .nav-ask,
    #mainHeader .user-avatar .nav-user-text {
        display: none !important;
    }
}

/* Çok dar ekranda "Menü" yazısı logoya giriyor. Metin düğümü ayrı bir
   elemana sarılı değil (<label><i class="icon icon-menu"></i>Menü</label>),
   bu yüzden font-size:0 ile gizleyip ikonun puntosunu geri veriyoruz. */
@media (max-width: 360px) {
    #mainHeader label.menu-btn {
        font-size: 0 !important;
    }

    #mainHeader label.menu-btn .icon {
        font-size: 22px;
    }
}

/* Header'ın kendisi 280px'te +51px, 320px'te +11px taşıyordu:
   .header-inner yan boşluğu (20px+20px) ve içeriğin küçülememesi. */
@media (max-width: 420px) {
    #mainHeader .header-inner {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    #mainHeader .header-inner > * {
        min-width: 0;
    }

    #mainHeader .logo img {
        max-width: 40vw;
    }
}

/* ------------------------------------------------------------------
   2. YAPIŞKAN GÖNDERİ ÇUBUĞU (#top-dock)
   post.html'de kaydırınca beliren sabit başlık çubuğu. Masaüstü
   genişliğinde (744px) kalıyor; 430px ekranda +314px taşıyordu.
   ------------------------------------------------------------------ */
@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {
    #top-dock,
    #top-dock.sticky {
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        max-width: 100% !important;
        box-sizing: border-box;
        overflow: hidden;
    }

    /* çubuk içindeki sabit genişlikli sütunlar */
    #top-dock .ibar,
    #top-dock .ibar-container,
    #top-dock .ibar-shareopinion {
        max-width: 100% !important;
        min-width: 0 !important;
    }
}

/* ------------------------------------------------------------------
   3. DOKUNMA HEDEFLERİ  (WCAG 2.5.5 / iOS HIG: en az 44x44 CSS px)
   Ölçüm: index'te 147 tıklanabilirin 92'si, post'ta 183'ün 127'si
   44px'in altındaydı.
   ------------------------------------------------------------------ */
@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {

    /* Hamburger — sitenin EN kritik dokunma hedefi (75x21 idi) */
    #mainHeader label.menu-btn {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 0 6px;
    }

    /* "Cevapla" rozeti (65x22, sayfada 29 adet).
       desktop.min.css: .respond-action{height:22px}. Yükseklik yerine
       min-height veriyoruz ki iç hizalama bozulmasın. */
    .respond-action {
        min-height: 44px;
        height: auto;
        padding: 0 14px;
    }

    /* Kart başlığı linki (327x22) — blok yapıp dikey nefes payı veriyoruz;
       genişlik zaten yeterli, eksik olan yükseklikti. */
    .tile-item > a.tgepc,
    .tile-item .tile-title {
        display: block;
    }

    .tile-item > a.tgepc {
        padding: 6px 0;
    }

    /* Kart üzerindeki konu etiketi + "Soru" rozeti (54x15 @10px).
       .card-infos içindeki satırı hem büyütüyor hem tıklanabilir
       yüksekliğe çıkarıyoruz. */
    .tile-item .card-infos > span {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    .tile-item .card-infos a.tgec {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    /* Kart alt eylem satırı (yorum/beğeni sayaçları) */
    .tile-item .card-actions .actions-left > span,
    .tile-item .card-actions .actions-right > a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    /* Kart içi kullanıcı adı / avatar linkleri */
    .tile-item .user-info a,
    .user-info .name.profile-hover {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    /* Yorum eylemleri (57x14, 11 adet). Seçici geniş tutuldu: bu linkler
       hem #post-comment-section hem de gönderi kartı içinde geçiyor. */
    a.connect-link,
    .comment-actions a,
    .comments-ul a.tgec {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    /* Kırıntı yolu (breadcrumbs) linkleri — 20px yükseklikteydiler */
    .breadcrumbs a,
    a.no-posting.tgec {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    /* Footer menü linkleri 14px yükseklikteydi */
    footer#main-footer .footer-menu ul li a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    /* Header logosu 40px idi */
    #mainHeader a.logo {
        min-height: 44px;
    }

    /* Yan yana duran linkler yanlış dokunma üretiyordu — araya boşluk */
    .tile-item .card-actions .actions-left > span + span,
    .tile-item .card-infos > span + span {
        margin-left: 10px;
    }
}

/* ------------------------------------------------------------------
   4. YAZI PUNTOSU
   Mobilde okunabilirlik alt sınırı 12px. Ölçüm: index'te 92, post'ta
   137 öğe 12px'in altındaydı (10px konu etiketleri, 10px seviye
   rozetleri, 11px "+28" balonu vb.).
   ------------------------------------------------------------------ */
@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {
    .tile-item .card-infos,
    .tile-item .card-infos a.tgec,
    .tile-item .card-infos span,
    .tile-item .card-actions,
    .tile-item .user-info,
    .tile-item .username,
    .subnav-topics a,
    .subnav-topics span,
    span.moreplus,
    span.age,
    p.count-text,
    span.xperlvl,
    span.indicator-btn,
    span.badge,
    .comments-header-bottom,
    .comments-header-bottom span,
    article.single-post .item-topic,
    article.single-post .post-time {
        font-size: 12px !important;
    }
}

/* ------------------------------------------------------------------
   5. iOS SAFARI ZORLA YAKINLAŞTIRMA
   font-size < 16px olan bir form alanına odaklanınca iOS Safari
   sayfayı zorla yakınlaştırır ve GERİ ÇIKMAZ. Ölçülen suçlular:
   textarea.answer-textarea (14px), select#unified-sorts (12px),
   input#ai-title-now-opt (13.33px).
   Görünümü korumak için 16px + transform yerine doğrudan 16px
   veriyoruz; alanlar zaten geniş, taşma yapmıyor (ölçüldü).
   ------------------------------------------------------------------ */
@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* ------------------------------------------------------------------
   6. SADECE :hover İLE AÇILAN UI — dokunmatikte ULAŞILAMAZ
   desktop.min.css:
     #like-actions-section .actions-right .share-col .share-action:hover
       .share-buttons { display:flex }
   Dokunmatik cihazda :hover güvenilir tetiklenmediği için PAYLAŞ
   butonu hiçbir şey yapmıyordu. Açılır panel yerine paylaşım
   ikonlarını satır içinde, her zaman görünür yapıyoruz — dokunmatikte
   tek tıkla erişilir tek CSS çözümü bu.
   ------------------------------------------------------------------ */
@media (hover: none) {
    #like-actions-section .actions-right .share-col .share-buttons,
    .share-col .share-buttons {
        display: flex !important;
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        padding-bottom: 0 !important;
        gap: 6px;
    }

    .share-col .share-action {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
    }

    /* paylaşım ikonları da dokunma hedefi boyutunda olsun */
    .share-col .share-buttons .s-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
    }

    /* kart üzerindeki hover ipucu kutuları dokunmatikte açılamıyor,
       yer kaplamasınlar */
    .card-info-icon .ecom-tooltiptext {
        display: none !important;
    }
}

/* ------------------------------------------------------------------
   7. GÖNDERİ EYLEM SATIRI (Beğen / Paylaş / Takip Et)
   280px'te +51px, 320px'te +11px taşıyordu ve gövde kırpması yüzünden
   "Takip Et" TIKLANAMIYORDU.
   ------------------------------------------------------------------ */
@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {
    article.single-post #like-actions-section,
    article.single-post .actions-right,
    article.single-post .actions-left {
        display: flex;
        flex-wrap: wrap;
        min-width: 0;
        max-width: 100%;
        gap: 8px;
        row-gap: 8px;
    }

    article.single-post .share-col,
    article.single-post .follow-col,
    article.single-post .ibar-menu-option {
        min-width: 0;
        max-width: 100%;
        flex: 0 1 auto;
    }
}

/* 380px altında butonların yazıları da sığmıyor — satır sarmalı
   kalsın ama punto biraz insin (mevcut 420px kuralıyla uyumlu). */
@media (max-width: 380px) {
    article.single-post .ibar-like,
    article.single-post .ibar-menu-option,
    article.single-post .share-icon-text {
        font-size: 12px;
    }
}

/* ------------------------------------------------------------------
   8. SABİT ÖĞELER — yatay çevirmede ekranı yiyorlardı
   Ölçüm: 812x375 yatayda sabit header (70px) + sabit footer (64px)
   ekran yüksekliğinin %36'sını kaplıyordu.
   ------------------------------------------------------------------ */
@media (max-height: 500px) and (orientation: landscape) {
    /* Yatayda footer tek satır kalsın (dikeydeki alt alta dizilim
       375px'lik yüksekliğin yarısını yerdi). Sabit kalması sorun değil:
       kendiliğinden gizleniyor. */
    #container-wrapper {
        padding-bottom: 90px;
    }

    footer#main-footer .inner.content {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    /* header alçalsın: 70px yatayda çok yer kaplıyor */
    #mainHeader .header-inner {
        height: 54px;
    }

    /* Yapışkan gönderi çubuğu yatayda üçüncü bir bant ekliyor; sabit
       öğeler 375px'lik yüksekliğin %30'unu yiyordu. Yatayda gizli. */
    #top-dock.sticky {
        display: none !important;
    }
}

/* "Yukarı çık" düğmesi masaüstü içindi: içerik sütununun SOLUNDA,
   dışarıda konumlanıyor (.jump-top-side{position:absolute;left:-59px}).
   Mobilde sütun ekran kenarına dayandığı için soldan içeri sızıp yarım
   gri daire olarak görünüyordu. Dokunma hedefi de 33x33 ile zaten
   küçüktü; mobilde tamamen gizliyoruz (parmakla kaydırmak kolay). */
@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {
    #jump-top-side,
    .jump-top-side,
    span#btn-jump-top-link.btn-jump-top {
        display: none !important;
    }
}

/* ------------------------------------------------------------------
   9. KONU ÇUBUĞU (.subnav-topics) — post.html'de görünüyor
   Konu pilleri mobil ekrana sığmıyor. Kesmek yerine yatay
   kaydırılabilir şerit yapıyoruz (kaydırma çubuğu gizli).
   ------------------------------------------------------------------ */
@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {
    .subnav-topics .topics-inner {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        padding-left: 10px;
        padding-right: 10px;
    }

    .subnav-topics .topics-inner::-webkit-scrollbar {
        display: none;
    }

    .subnav-topics .topics-inner > * {
        flex: 0 0 auto;
    }
}

/* ------------------------------------------------------------------
   10. GÖMÜLÜ MEDYA taşmasın
   ------------------------------------------------------------------ */
@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {
    article.single-post img,
    article.single-post video,
    article.single-post iframe,
    #post-comment-section img,
    .tile-item img {
        max-width: 100%;
        height: auto;
    }
}


/* ==================================================================
   GİRİŞ / ÜYE OL MODALI
   Header'daki "Giriş Yap / Üye Ol" düğmesine basınca açılır.
   Önce GİRİŞ formu gelir; altındaki "Üye Ol" bağlantısı KAYIT formuna
   geçirir. Sosyal medya girişleri yok.

   Tema'nın kendi .login-modal CSS'i (desktop-modals.min.css) 730px
   sabit genişlik ve `padding:0 170px` üzerine kurulu — mobilde
   kullanılamaz. Bu yüzden temanın ATOMLARINI kullanıyoruz
   (.btngag / .btngag-purple / .inputgag / .selectgag — görünüm birebir
   site standardı), kabuğu ise kendimiz akışkan yazıyoruz (.ik- öneki).

   Davranış: assets/local/auth-modal.js
   ================================================================== */

.ik-auth-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(12, 17, 19, .7);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
    overflow-y: auto;
}

.ik-auth-overlay.acik {
    opacity: 1;
    visibility: visible;
}

.ik-auth-kutu {
    position: relative;
    width: 100%;
    max-width: 420px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 18px 60px rgba(0, 0, 0, .45);
    padding: 28px 26px 24px;
    box-sizing: border-box;
    transform: translateY(14px);
    transition: transform .22s ease;
}

.ik-auth-overlay.acik .ik-auth-kutu {
    transform: translateY(0);
}

/* kapatma düğmesi — dokunma hedefi 44px */
.ik-auth-kapat {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 44px;
    height: 44px;
    border: none;
    background: none;
    color: #98a2b3;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
}

.ik-auth-kapat:hover {
    background: #f2f4f7;
    color: #334d5e;
}

.ik-auth-baslik {
    font: 600 22px/30px Roboto, Arial, sans-serif;
    color: #334d5e;
    text-align: center;
    margin: 4px 0 6px;
}

.ik-auth-alt-baslik {
    font: 400 14px/20px Roboto, Arial, sans-serif;
    color: rgba(51, 77, 94, .7);
    text-align: center;
    margin-bottom: 22px;
}

.ik-auth-adim[hidden] {
    display: none;
}

.ik-alan {
    margin-bottom: 14px;
}

.ik-alan > label {
    display: block;
    font: 600 13px/18px Roboto, Arial, sans-serif;
    color: #344054;
    margin-bottom: 6px;
}

/* tema'nın input'u; yüksekliği dokunma hedefi ölçüsüne çekiyoruz */
.ik-auth-kutu .inputgag,
.ik-auth-kutu .selectgag {
    height: 46px;
    border-radius: 8px;
    border: 1px solid #d0d5dd;
    padding: 10px 14px;
    /* iOS: 16px altına inerse odaklanınca sayfayı zorla yakınlaştırır */
    font-size: 16px;
}

.ik-auth-kutu .inputgag:focus,
.ik-auth-kutu .selectgag:focus {
    border-color: var(--header-bg-color);
    outline: none;
}

/* Beni hatırla + şifremi unuttum */
.ik-hatirla-satir {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 2px 0 18px;
    flex-wrap: wrap;
}

.ik-hatirla-satir label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    font: 500 14px/20px Roboto, Arial, sans-serif;
    color: #344054;
    cursor: pointer;
}

.ik-hatirla-satir input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--header-bg-color);
}

.ik-unuttum {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font: 600 14px/20px Roboto, Arial, sans-serif;
    color: var(--header-bg-color);
}

/* ana düğme — marka rengini kullanıyor (header/footer ile aynı) */
.ik-auth-kutu .btngag.ik-ana-btn {
    width: 100%;
    height: 48px;
    line-height: 48px;
    border-radius: 8px;
    font: 600 16px/48px Roboto, Arial, sans-serif;
    background: var(--header-bg-color);
    color: #fff;
}

.ik-auth-kutu .btngag.ik-ana-btn:hover {
    filter: brightness(1.08);
}

/* alt geçiş satırı: "Üye değil misin? Üye Ol" */
.ik-gecis {
    text-align: center;
    margin-top: 18px;
    font: 400 15px/22px Roboto, Arial, sans-serif;
    color: #475467;
}

.ik-gecis a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 6px;
    font-weight: 600;
    color: var(--header-bg-color);
}

.ik-onay {
    font: 400 12px/17px Roboto, Arial, sans-serif;
    color: rgba(51, 77, 94, .7);
    margin: 4px 0 18px;
}

.ik-onay a {
    color: rgba(51, 77, 94, .85);
    font-weight: 700;
    text-decoration: underline;
}

/* form gönderimi henüz bir sunucuya bağlı değil (tema taslağı) */
.ik-not {
    display: none;
    margin-top: 14px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #f2f4f7;
    font: 400 13px/18px Roboto, Arial, sans-serif;
    color: #475467;
    text-align: center;
}

.ik-not.gorunur {
    display: block;
}

/* modal açıkken arka plan kaymasın */
body.ik-auth-acik {
    overflow: hidden;
}

@media (max-width: 420px) {
    .ik-auth-kutu {
        padding: 24px 18px 20px;
        border-radius: 16px;
    }

    .ik-auth-baslik {
        font-size: 20px;
    }
}


/* ------------------------------------------------------------------
   KONU ŞERİDİ ANA SAYFADA DA GÖRÜNSÜN
   Markup index.html'de zaten var ve tam istenen yerde: arama kutusunun
   (<section class="ask-section">) hemen altında. Ama sayfa içi <style>
   bloğu onu gizliyordu:
       .subnav-topics { display: none !important; }        (0,1,0)
   ve yalnızca gönderi/liste sayfalarında açıyordu:
       body.desktop-theme.single-page .subnav-topics { … }  (0,3,1)

   !important'ı !important + daha yüksek özgüllükle aşıyoruz (0,2,1).
   Kaynak sırası burada belirleyici değil; özgüllük belirleyici.
   ------------------------------------------------------------------ */
body.desktop-theme .subnav-topics {
    display: block !important;
}

/* Arama kutusu (.ask-wrapper) kendi bölümünün DIŞINA taşıyor:
   .ask-section 104px'te bitiyor ama beyaz kutu 134px'e kadar iniyor
   (tasarım gereği bandın altına sarkıyor). Şerit 104'ten başlayınca
   kutu şeridin üst 30px'ini örtüyordu.
   Şeridi kutunun altına indiriyoruz: 30px örtüşme + 28px nefes payı.
   Sadece ana sayfada — gönderi sayfasında arama kutusu yok, şerit
   doğrudan header'ın altında duruyor. */
body.desktop-theme.homepage .subnav-topics {
    margin-top: 58px;
}

/* Başlık ile kartlar arası: temanın kendi değeri 20px
   (.tiles-main-header{margin:0 0 20px 0}). Biraz daha nefes payı.
   Not: alt kardeş .tiles-column-container'ın margin-top'u (15px) bununla
   çöküyor, yani sonucu tek başına bu satır belirliyor — max(32,15)=32. */
#tiles-container .tiles-main-header {
    margin-bottom: 32px;
}


/* ------------------------------------------------------------------
   "ÖNE ÇIKANLAR" BAŞLIK SATIRI
   Konu şeridinin altında, kartların üstünde: iki yana uzanan ince
   çizgi + ortada başlık. Tema'da hazır (.tiles-main-header h1'in
   ::before / ::after sözde öğeleri %33'lük çizgileri çiziyor) ama
   sayfa içi <style> gizliyordu:
       .desktop-theme #tiles-container .tiles-main-header
           { display: none !important; }

   DİKKAT — bu kural iç içe (CSS nesting) bir bağlamda duruyor: Chrome
   onu "& .desktop-theme #tiles-container .tiles-main-header" olarak
   raporluyor. `&` üst seçicinin özgüllüğünü de devraldığı için
   `body.desktop-theme #tiles-container .tiles-main-header` (1,2,1)
   yazmak BERABERE kalıyordu — ve sayfa içi <style> offline.css'ten
   sonra yüklendiği için beraberliği o kazanıyordu.
   id'yi ikileyip (2,2,1) tartışmasız üste çıkıyoruz.

   Metin index.html içinde: "İÇİMDEKALMASIN'DA ÖNE ÇIKANLAR"
   ------------------------------------------------------------------ */
body.desktop-theme #tiles-container#tiles-container .tiles-main-header {
    display: block !important;
}

/* Dar ekranda çizgiler yazının üstüne biniyordu.
   Tema çizgileri MUTLAK konumla ve sabit %33 genişlikle çiziyor
   (h1::before{position:absolute;left:0;width:33%}) — dar ekranda
   metin genişleyince kaçınılmaz olarak çakışıyor.

   Mobilde h1'i flex satırına çevirip çizgileri akışa alıyoruz:
   [çizgi] BAŞLIK [çizgi] — kalan boşluğu paylaştıkları için her
   genişlikte kendiliğinden oturuyorlar, çakışma imkânsız. */
@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {
    #tiles-container .tiles-main-header {
        padding: 0 4px;
    }

    #tiles-container .tiles-main-header h1 {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 12px;
        letter-spacing: 1.5px;
        line-height: 18px;
    }

    #tiles-container .tiles-main-header h1::before,
    #tiles-container .tiles-main-header h1::after {
        position: static;
        width: auto;
        flex: 1 1 auto;
        min-width: 0;
        top: auto;
        left: auto;
        right: auto;
    }
}

/* ==================================================================
   ÜST BANT — REFERANS DÜZENE DÖNÜŞ (kizlarsoruyor.com)

   Referansta üst kısımdaki renk şeması şöyle kurulu:
     • bant           → marka rengi (onlarda mor, bizde kırmızı)
     • "Sor" butonu   → turuncu vurgu, banttan ayrışan tek öğe
     • "+28" rozeti   → marka rengi (bantla aynı)

   Klonda ikisi de lacivert/mor kalmıştı:
     .ask-section .ask-button → var(--header-ask-button) = #002BD7
     .moreplus                → #7545ff  (kizlarsoruyor'un mor markası)
   Bant kırmızıya döndüğü için ikisi de bandın içinde yamalı duruyordu.
   ------------------------------------------------------------------ */

/* --- "Yaz" butonu: temanın kendi turuncu gradyanı ---
   desktop.min.css → .ask-button{background:linear-gradient(90deg,#de581c,#f96416)}
   Sayfa içi <style> bunu `.ask-section .ask-button` (0,2,0) ile eziyor ve
   offline.css'ten SONRA yükleniyor; sınıfı ikileyip (0,3,0) öne geçiyoruz. */
html:root {
    --header-ask-button: #de581c;    /* gradyanı desteklemeyen yerler için düz ton */
}

.ask-section .ask-button.ask-button {
    background: #de581c;
    background: linear-gradient(90deg, #de581c 0, #f96416 100%);
    color: #fff;
}

/* --- "+28" rozeti: bantla aynı marka rengi --- */
.subnav-topics .moreplus {
    background: var(--header-bg-color);
}

/* Masaüstünde de flex germesini kapat: kapsayıcı yüksekliği logodan
   geliyor, ama başka bir öğe header'ı uzatırsa logo onunla birlikte
   dikey esner. Oran her koşulda korunsun. */
#mainHeader .logo img {
    align-self: center;
}

/* 360px altı: hamburger + profil ikonu arasında kalan alan daralıyor */
@media (max-width: 360px) {
    #mainHeader#mainHeader .logo img {
        max-width: 180px;
    }
}

/* ==================================================================
   GÖNDERİ SAYFASI — SOSYAL PAYLAŞIM KALDIRILDI
   Facebook / X / WhatsApp paylaş düğmeleri ve sayfa sonundaki sosyal
   çubuk. Hepsi kizlarsoruyor hesaplarına/paylaşım uçlarına gidiyordu.
   .share-col'un tamamını kapatıyoruz: içindeki "Paylaş" etiketi sadece
   bu düğmeleri açan tetikleyici, tek başına işlevsiz kalırdı.
   ================================================================== */
body.single-page .share-col,
body.single-page .share-buttons,
body.single-page .side-share,
body.single-page #social-bar,
body.single-page .footer-social-bar,
body.single-page #social-buttons-side {
    display: none !important;
}

/* ==================================================================
   ALT SABİT ÇUBUK — mobil, gönderi sayfası
   Markup: post.html sonunda <nav class="ik-alt-bar">
   Referans: kizlarsoruyor.com gönderi sayfası (Sor / Keşfet / Cevapla /
   Ara / Profil), ortadaki eylem vurgulu.
   ================================================================== */
.ik-alt-bar {
    display: none;
}

@media (max-width: 900px) {
    body.single-page .ik-alt-bar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1900;
        align-items: stretch;
        background: #fff;
        border-top: 1px solid #e6e6e6;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, .07);
        /* çentikli telefonlarda alt güvenli alan */
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    body.single-page .ik-alt-bar .ik-alt-oge {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        /* WCAG 2.5.5 / iOS: en az 44px dokunma hedefi */
        min-height: 56px;
        padding: 6px 2px;
        border: 0;
        background: none;
        font-family: inherit;
        font-size: 12px;
        font-weight: 500;
        line-height: 1;
        color: #667085;
        text-decoration: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    body.single-page .ik-alt-bar .ik-alt-oge .icon {
        font-size: 20px;
        line-height: 1;
    }

    body.single-page .ik-alt-bar .ik-alt-oge > span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    /* ortadaki ana eylem — arama kutusundaki "Yaz" ile aynı turuncu */
    body.single-page .ik-alt-bar .ik-alt-vurgu {
        flex: 0 0 auto;
        min-width: 92px;
        margin: 6px 4px;
        padding: 6px 12px;
        border-radius: 10px;
        background: linear-gradient(90deg, #de581c 0, #f96416 100%);
        color: #fff;
        font-weight: 700;
    }

    /* Alt çubuk ile açılır footer aynı yeri paylaşıyor: aşağı kaydırınca
       footer (z-index 2000) çubuğun (1900) üstüne biniyordu. İkisi birden
       ekranın altını ~170px kaplıyor; dar ekranda gönderi sayfasında çubuk
       kalıyor, footer kapanıyor. Footer'daki tüm bağlantılar (İletişim,
       Site Sözleşmesi, KVKK, …) hamburger menüsünde de var.

       `!important` ŞART: yukarıdaki `#main-footer#main-footer{display:block
       !important}` kuralı (ana sayfada jQuery'nin inline `display:none`
       yazmasına karşı konmuştu) yoksa bunu eziyor. Özgüllüğümüz (2,1,2)
       onunkinden (2,0,0) yüksek ama !important olmadan yetmiyor. */
    body.single-page footer#main-footer#main-footer {
        display: none !important;
    }

    /* içeriğin son satırı çubuğun altında kalmasın */
    body.single-page #container-wrapper {
        padding-bottom: 96px;
    }
}