.share-links .copy-info {
    margin-left: 10px;
    font-size: 13px;
    color: #28a745;
    font-weight: 500;
}

.copy-link-offscreen {
    position: fixed;
    top: -9999px;
    left: -9999px;
}

@media (max-width: 480px) {
    .share-links .th-social {
        flex-wrap: wrap;
        row-gap: 8px;
    }

        .share-links .th-social a {
            --icon-size: 38px;
            margin-right: 6px;
            font-size: 12px;
        }

    .share-links-title {
        display: block;
        margin-bottom: 8px;
    }
}

.widget_search {
    position: relative;
}

.blog-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 6px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    z-index: 50;
    max-height: 360px;
    overflow-y: auto;
    margin-top: 6px;
}

    .blog-search-results .search-result-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 14px;
        text-decoration: none;
        color: #222;
        border-bottom: 1px solid #f2f2f2;
    }

        .blog-search-results .search-result-item:last-child {
            border-bottom: none;
        }

        .blog-search-results .search-result-item:hover {
            background: #f8f8f8;
        }

        .blog-search-results .search-result-item img {
            width: 42px;
            height: 42px;
            object-fit: cover;
            border-radius: 4px;
            flex-shrink: 0;
        }

    .blog-search-results .search-result-title {
        display: block;
        font-size: 14px;
        font-weight: 500;
        line-height: 1.3;
    }

    .blog-search-results .search-result-date {
        font-size: 12px;
        color: #888;
    }

    .blog-search-results .search-result-empty {
        padding: 12px 14px;
        color: #888;
        font-size: 13px;
    }

.blog-content h3 {
    font-size: 26px;
    line-height: 1.278;
}
@media (max-width: 1199px) {
    .recent-post .media-img {
        margin-right: 15px;
        width: 90px;
        height: 97px;
        overflow: hidden;
        border-radius: 20px;
        position: relative;
    }
}

/* NOT (2026-08-17 EK ÖZELLİK — kullanıcı isteği: "İçindekiler" / TOC + smooth scroll +
   scrollspy): bkz. Detail.cshtml'deki #tocWidget/#tocList notu. Liste JS ile üretiliyor, burada
   sadece görünüm.
   NOT (2026-08-17 EK GÖRSEL DÜZELTME — kullanıcı bildirdi: "görünüyor ama emanet gibi duruyor,
   daha şık olmalı"): Düz metin linkler, temanın diğer widget'larıyla (tagcloud'un dolgulu/
   gölgeli etiketleri, recent-post'un kartsı görünümü vb.) TUTARSIZ kalıyordu — her satır artık
   ikonlu (ana madde: ok, alt madde: nokta), dolgulu, hover/active durumunda temanın kendi
   --theme-color/--theme-color2 renkleriyle vurgulanan bir "buton" gibi görünüyor. */
.widget-toc .toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .widget-toc .toc-list li {
        margin-bottom: 4px;
    }

        .widget-toc .toc-list li:last-child {
            margin-bottom: 0;
        }

        .widget-toc .toc-list li.toc-sub {
            padding-left: 14px;
        }

    .widget-toc .toc-list a {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 11px 16px;
        border-radius: 12px;
        text-decoration: none;
        color: var(--body-color);
        font-size: 18px;
        font-weight: 500;
        line-height: 1.4;
        transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
    }

        .widget-toc .toc-list li.toc-sub a {
            font-size: 16px;
            padding-top: 8px;
            padding-bottom: 8px;
        }

    .widget-toc .toc-list .toc-icon {
        flex-shrink: 0;
        font-size: 10px;
        color: var(--theme-color2);
        transition: -webkit-transform .2s ease;
        transition: transform .2s ease;
        transition: transform .2s ease, -webkit-transform .2s ease;
    }

        .widget-toc .toc-list li.toc-sub .toc-icon {
            font-size: 6px;
        }

    .widget-toc .toc-list a:hover,
    .widget-toc .toc-list a.active {
        background-color: var(--white-color);
        color: var(--theme-color);
        -webkit-box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.06);
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.06);
    }

    .widget-toc .toc-list a.active {
        font-weight: 700;
    }

    .widget-toc .toc-list a:hover .toc-icon,
    .widget-toc .toc-list a.active .toc-icon {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }

/* Sabit/yapışkan header (bkz. main.js ".sticky-wrapper"/".sticky") başlığın üstünü kapatmasın
   diye — TOC linkine tıklanınca kayan hedef, üstte bu kadar boşluk bırakır.
   NOT (2026-08-17 DÜZELTME): kapsam SADECE .blog-detail-content idi — TOC artık .blog-content
   genelini (blog başlığı h2 + gövde + alt-detay blokları h3) taradığı için bu kural da AYNI
   genişlikte olmalı, yoksa blog başlığına veya alt-detay başlıklarına tıklandığında sabit header
   üstü kapatır. */
.blog-content h1,
.blog-content h2,
.blog-content h3,
.blog-content h4,
.blog-content h5,
.blog-content h6 {
    scroll-margin-top: 100px;
}
.blog-detail-content {
    margin-bottom: 30px;
}
img:not([draggable]), embed, object, video {
    max-width: 100%;
    height:stretch;
}

.recent-post .media-img {
    margin-right: 15px;
    width: 85px;
    height: 80px;
    overflow: hidden;
    border-radius: 20px;
    position: relative;
}

/* ---------------------------------------------------------------------------
   NOT (2026-09-09 — ILGILI YAZILAR GORSEL ORANI, Lighthouse "Image display
   dimensions should match natural aspect ratio")

   OLCULDU (canli /blog/... detay sayfasi):
       gosterilen 85 x 80  -> oran 1.06
       gercek     431 x 235 -> oran 1.83
   Yani gorsel yatay olarak sikistiriliyor, insan ve urun fotograflari eziliyor.

   NEDEN: Kapsayici (.recent-post .media-img) sabit 85x80. Icindeki img'ye ise
   temanin style.css'i "width: 100%" veriyor, YUKSEKLIGI ise bu dosyadaki
   "img:not([draggable]) { height: stretch }" kurali kapsayicinin yuksekligine
   ceviriyor. Ikisi birlesince object-fit varsayilani "fill" ile goruntu
   gerilip eziliyor.

   COZUM: object-fit: cover — kutu ayni kaliyor, goruntu oranini koruyup
   TASAN kismi kirpiliyor (ezilme yerine kirpma). Kapsayicida zaten
   "overflow: hidden" var, tasma disari sizmaz. Lighthouse de object-fit'i
   "fill" olmayan gorselleri bu denetimden muaf tutar.

   KAPSAM: blogdetail.css'i UC sayfa yukluyor — Blog/Detail, Haber/Detail,
   Basin/Detail. Ucunde de ayni "Ilgili Yazilar" widget'i var, tek kural
   ucunu birden kapsiyor. 1199px altindaki 90x97 varyanti da dahil.
   --------------------------------------------------------------------------- */
.recent-post .media-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* NOT (2026-08-17 EK ÖZELLİK — kullanıcı isteği: "sol tarafta çok veri, sağ tarafta boşluk
   kalıyor"): sidebar, sol içerik kaydıkça ekranda sabit kalıp onunla "yürüsün" diye sticky
   yapıldı. Sadece masaüstünde (lg ve üstü) — mobilde sütunlar alt alta dizildiği için (bkz.
   Detail.cshtml col-lg-5/col-lg-7) sticky'nin bir anlamı yok, kapatıldı. top değeri site
   header'ının yaklaşık yüksekliğine göre seçildi — header tasarımı değişirse ayarlanmalı. */
/* NOT (2026-09-05 — kullanici: "webde sayfayi asagi kaydirdikca orasi sabit kaliyordu,
   bir sayfada yaptik ama hangisi hatirlamiyorum"). Iki duzeltme:

   1) BU KURAL 2026-08-22'DEN BERI CALISMIYORDU. O tarihte customoverflow.css'e
      "html { overflow-x: hidden }" eklendi (mobilde yatay kayma icin). overflow-x:hidden
      ogeyi bir KAYDIRMA BAGLAMI haline getirir; position:sticky en yakin kaydirma baglamina
      gore calistigi icin kok seviyede boyle bir baglam olusunca sayfadaki HICBIR sticky oge
      viewport'a gore yapisamaz. Yani sticky 17 Agustos'ta eklendi, 22 Agustos'ta kendi
      elimizle sessizce olduruldu — kullanici calistigini dogru hatirliyor.
      Cozum customoverflow.css'te: hidden -> clip (kirpar ama baglam olusturmaz).

   2) top: 100px -> 24px. Eski deger "sabit/yapiskan header basligin ustunu kapatmasin" diye
      secilmisti. Canlida olculdu (1400x900): .sticky-wrapper kaydirmada position:static
      kaliyor ve ekran ustu -534 px'e gidiyor — yani header YAPISMIYOR, yukari kayip gidiyor.
      Dolayisiyla 100 px'lik pay bos yere bosluk birakiyordu. Ayrica paylasilan kuralla
      (site-custom.bundle.css icindeki .sidebar-area) ayni degeri kullanmak, iki dosyada iki
      farkli "top" olmasini onluyor.

   Kirilim NEDEN burada 992, bundle'da 1200: bu sayfa col-lg-5/col-lg-7 kullaniyor (992'nin
   altinda sutunlar alt alta dizilir), sozlesme/urun detaylari ise col-xl-4/col-xl-8 (1200).
   Her sayfa kendi diziliminin kirilimini kullaniyor. */
@media (min-width: 992px) {
    .sidebar-area {
        position: sticky;
        top: 24px;
    /*    max-height: calc(100vh - 48px);*/
        /* overflow-y:auto; */
    }
}

/* ---------------------------------------------------------------------------
   NOT (2026-09-09 — kullanici istegi: etiketler kenar cubugundan alinip paylas
   satirinin altina tasindi; markup icin bkz. Blog/Haber/Basin Detail.cshtml).

   Amac: satirin PAYLAS satiriyla ayni dilde konusmasi. Bu yuzden baslik boyutu
   ve agirligi temanin ".share-links-title" degerleriyle ayni (18px / 500,
   canlida olculdu) ve ikisi de "etiket + yaninda yatay liste" duzeninde.

   Temanin ".tagcloud a" kurali cipleri "display: block" + kendi margin'iyle
   diziyor; kenar cubugunun dar sutununda bu dogruydu. Genis icerik sutununda
   flex + gap daha duzgun sariyor, o yuzden margin sifirlaniyor.
   OLCULDU: 1440px ekranda satir yuksekligi 258px (14 etiket, 4 sutun);
   ayni etiketler kenar cubugunda daha uzun yer kapliyordu.

   align-items: baseline — "Etiketler:" yazisi ilk cip satirinin metniyle ayni
   taban cizgisinde otursun diye (center olsayd, cok satirli cip blogunda
   baslik ortada asili kalirdi).
   --------------------------------------------------------------------------- */
/* NOT (2026-09-09 EK — kullanici istegi: "paylasin altina hr koy etiketle birbirine
   girmesin, ustteki hr ile ayni hizada olsun simetri gorunsun").

   Sayfada gercek bir <hr> etiketi YOK; kullanicinin "ustteki hr" dedigi cizgi temanin
   ".share-links" kuralindaki ust kenarlik (canlida olculdu):
       margin: 32px 0 0;  border-top: 1px solid var(--th-border-color);  padding: 40px 0 0;
   Etiket satirina AYNI degerler veriliyor. Ikisi de ayni kapsayicinin (.blog-content) tam
   genisligini kapladigi icin cizgiler kendiliginden ayni hizada basliyor ve bitiyor
   (olculdu: sol 110, genislik 767 - ikisinde de ayni), araliklar da simetrik oluyor. */
.post-tags {
    margin: 32px 0 0;
    border-top: 1px solid var(--th-border-color);
    padding: 40px 0 0;
}

/* NOT (2026-09-09 DUZELTME - kullanici bildirimi: "Etiketler kelimesi cok kotu duruyor,
   bak Paylas ne guzel duruyor; onun gibi yanda kalsin").

   NEDEN ALTA DUSUYORDU: satir zaten flex idi ama ".tagcloud" flex temel olcusu "auto"
   ile, yani ICERIGININ tercih ettigi genislikle (14 etiket TEK SATIRDA ne kadar yer
   kaplarsa o kadar - ~2000px) hesaplaniyordu. Bu deger satira sigmadigi icin
   "flex-wrap: wrap" ogeyi komple ALT SATIRA atiyordu. Yani baslik degil, etiket bloguydu
   asagi inen.

   Temanin PAYLAS satirinda ayni sorun cikmiyor cunku oradaki ".th-social" (8 ikon,
   ~400px) satira zaten sigiyor - yani temanin cozumu bizim etiket sayimizda calismaz.

   COZUM: satir artik sarmiyor (nowrap); etiket blogu "flex: 1 1 0" ile KALAN genisligi
   aliyor ve sarma isini KENDI ICINDE yapiyor. Boylece "Etiketler:" solda sabit kaliyor,
   etiketler onun sagindan basliyor ve alt satirlari da ayni hizadan devam ediyor.
   min-width: 0 - flex ogelerinin varsayilan "icerigimden dar olamam" kuralini kaldirir;
   olmazsa en uzun etiket satirin genisligini zorlar ve tasma yapardi. */
    .post-tags .col-md-auto {
        display: flex;
        align-items: baseline;
        flex-wrap: nowrap;
    }

    .post-tags .post-tags-title {
        font-size: 18px;
        font-weight: 500;
        color: var(--title-color);
        margin-right: 12px;
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .post-tags .tagcloud {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        flex: 1 1 0;
        min-width: 0;
    }

        .post-tags .tagcloud a {
            margin: 0;
        }

/* Dar ekranda yan yana duzen ters teper: "Etiketler:" ~95px yer kaplar, geriye kalan
   ~230px'e "Keciboynuzu Pekmezi Ve Carob Extract Farki" gibi tek parca bir etiket
   sigmaz ve yatay tasma yapar. Bu yuzden telefonda baslik yine USTE aliniyor - istenen
   "yanda dursun" gorunumu, yerin gercekten oldugu ekranlarda gecerli. */
@media (max-width: 575px) {
    .post-tags .col-md-auto {
        display: block;
    }

    .post-tags .post-tags-title {
        display: block;
        margin: 0 0 12px;
    }
}