/* =====================================================================
   Dosya Adı : assets/css/t-blog.css
   Amacı     : Blog/Makale listesi (blog.php) ve tek yazı (yazi.php)
               görünümü: süzgeç hapları, öne çıkan ilk yazı, eğilen
               kartlar, sayfalama; yazı başı, kapak, zengin metin
               (panel düzenleyicisinin biçimleri), diğer yazılar.
               Ortak parçalar tasarim.css'te.
   Hazırlayan: Özgür Elibol
   Oluşturma : 2026-09-28
   Güncelleme: 2026-09-28
   ===================================================================== */

/* =========================================================
   1. Liste: süzgeç
   ========================================================= */
.blog { padding: 0 var(--kenar) clamp(5rem, 10vw, 8rem); }
.suzgec { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; }
.suzgec:last-of-type { margin-bottom: clamp(2rem, 4vw, 3rem); }
.suzgec a {
  min-height: 46px; padding: .5em 1.2em; border-radius: 999px; display: inline-flex; align-items: center; gap: .5rem; text-decoration: none;
  font: 600 .9375rem var(--yazi-metin); color: var(--kopuk); background: rgba(241, 228, 207, .1); transition: background-color .3s, color .3s;
}
.suzgec a:hover { background: rgba(241, 228, 207, .18); }
.suzgec a small { font-size: .75rem; opacity: .7; }
.suzgec a[aria-current="true"] { background: var(--kopuk); color: var(--koyu); }
.suzgec.kategori a { min-height: 38px; font-size: .875rem; font-weight: 500; background: transparent; box-shadow: inset 0 0 0 1.5px rgba(241, 228, 207, .2); }
.suzgec.kategori a[aria-current="true"] { background: var(--saman); color: var(--koyu); box-shadow: none; }

/* =========================================================
   2. Liste: kartlar
   ========================================================= */
.yazi-listesi { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.5rem); list-style: none; margin: 0; padding: 0; }
.yazi-kart { perspective: 1000px; }
.yazi-kart a {
  display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 26px; text-decoration: none;
  background: #26170F; box-shadow: inset 0 0 0 1px rgba(241, 228, 207, .1); transform-style: preserve-3d; will-change: transform;
  transition: box-shadow .4s;
}
.yazi-kart a:hover { box-shadow: inset 0 0 0 1px rgba(226, 195, 106, .5), 0 40px 70px -35px rgba(0, 0, 0, .9); }
.yazi-kart .kapak { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #1E120C; }
.yazi-kart .kapak img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--yay); }
.yazi-kart a:hover .kapak img { transform: scale(1.08); }
.yazi-kart .kapak.bos { display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #3A2217, #1E120C 70%); }
.yazi-kart .kapak.bos img { width: 72px; height: 72px; object-fit: contain; opacity: .55; }
.yazi-kart .oynat { position: absolute; left: 1rem; bottom: 1rem; display: inline-flex; align-items: center; gap: .4rem; padding: .35em .8em; border-radius: 999px; background: rgba(20, 11, 7, .75); backdrop-filter: blur(6px); font-size: .8125rem; font-weight: 600; }
.yazi-kart .icerik { display: flex; flex-direction: column; gap: .6rem; padding: 1.4rem 1.4rem 1.5rem; flex: 1; }
.yazi-kart .etiketler { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.yazi-kart .tur { padding: .25em .75em; border-radius: 999px; background: var(--saman); color: var(--koyu); font-size: .8125rem; font-weight: 700; }
.yazi-kart .kat { font-size: .8125rem; opacity: .7; }
.yazi-kart h2 { font-size: clamp(1.6rem, 2.2vw, 2rem); line-height: 1.08; }
.yazi-kart p.ozet { opacity: .8; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.yazi-kart .alt-bilgi { margin-top: auto; padding-top: .75rem; font-size: .875rem; opacity: .6; }
.yazi-kart.one { grid-column: span 2; }
.yazi-kart.one a { flex-direction: row; }
.yazi-kart.one .kapak { aspect-ratio: auto; width: 52%; flex: none; }
.yazi-kart.one h2 { font-size: clamp(2rem, 3.4vw, 3rem); }
.yazi-kart.one .icerik { justify-content: center; padding: clamp(1.5rem, 3vw, 2.5rem); }
.bos-durum { padding: 3rem 1.5rem; border-radius: 26px; text-align: center; box-shadow: inset 0 0 0 1.5px rgba(241, 228, 207, .2); }
.bos-durum h2, .bos-durum h1 { font-size: 2rem; margin-bottom: .5rem; }
.bos-durum p { opacity: .75; margin-bottom: 1.5rem; }

/* sayfalama */
.sayfalama { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem 1.25rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.sayfalama span { opacity: .65; font-size: .9375rem; }

@media (max-width: 960px) { .yazi-listesi { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .yazi-listesi { grid-template-columns: 1fr; }
  .yazi-kart.one { grid-column: auto; }
  .yazi-kart.one a { flex-direction: column; }
  .yazi-kart.one .kapak { width: auto; aspect-ratio: 4 / 3; }
}

/* =========================================================
   3. Tek yazı: baş ve kapak
   ========================================================= */
.onizleme-seridi { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; padding: .7rem var(--kenar); padding-bottom: calc(.7rem + env(safe-area-inset-bottom)); background: #8A5E1C; color: var(--kopuk); font-size: .9375rem; }
.onizleme-seridi a { color: var(--kopuk); font-weight: 700; margin-left: .5rem; }
.yazi-bas { padding: clamp(8rem, 15vw, 10rem) var(--kenar) 2rem; max-width: 62rem; margin: 0 auto; }
.yazi-geri { display: inline-flex; align-items: center; gap: .45rem; margin-bottom: 1.5rem; font-weight: 600; text-decoration: none; opacity: .8; }
.yazi-geri:hover { opacity: 1; color: var(--saman); }
.yazi-geri svg { width: 18px; height: 18px; }
.yazi-etiket { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.yazi-etiket a { padding: .25em .8em; border-radius: 999px; font-size: .8125rem; font-weight: 700; text-decoration: none; box-shadow: inset 0 0 0 1.5px rgba(241, 228, 207, .25); }
.yazi-etiket a.yazi-tur { background: var(--saman); color: var(--koyu); box-shadow: none; }
.yazi-bas h1 { font-size: clamp(2.8rem, 7vw, 6rem); line-height: 1; }
.yazi-giris { font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.5; margin-top: 1.25rem; opacity: .85; }
.yazi-alt { margin-top: 1.25rem; opacity: .6; font-size: .9375rem; }
.yazi-kapak { margin: 1rem auto 0; max-width: 72rem; padding: 0 var(--kenar); }
.yazi-kapak div { overflow: hidden; border-radius: 28px; aspect-ratio: 16 / 9; }
.yazi-kapak img { width: 100%; height: 120%; object-fit: cover; }
.yazi-kapak figcaption { margin-top: .6rem; font-size: .875rem; opacity: .6; text-align: center; }

/* =========================================================
   4. Tek yazı: gövde (panel düzenleyicisinin biçimleri)
   ========================================================= */
.yazi-govde { max-width: 42rem; margin: 0 auto; padding: clamp(2.5rem, 5vw, 4rem) var(--kenar) clamp(4rem, 8vw, 6rem); font-size: 1.1875rem; line-height: 1.75; }
.yazi-govde > :first-child { margin-top: 0; }
.yazi-govde > p:first-child::first-letter { float: left; font-family: var(--yazi-baslik); font-size: 4.6em; line-height: .8; margin: .08em .12em 0 0; color: var(--saman); }
.yazi-govde p { margin: 0 0 1.25rem; }
.yazi-govde h2 { font-size: clamp(1.8rem, 3vw, 2.3rem); line-height: 1.1; margin: 2.2rem 0 .8rem; }
.yazi-govde h3 { font-size: clamp(1.4rem, 2.2vw, 1.7rem); line-height: 1.15; margin: 1.8rem 0 .6rem; }
.yazi-govde ul, .yazi-govde ol { margin: 0 0 1.25rem; padding-left: 1.4em; }
.yazi-govde li { margin: .35em 0; }
.yazi-govde li::marker { color: var(--saman); }
.yazi-govde a { color: var(--saman); text-underline-offset: .2em; }
.yazi-govde strong { color: #fff4e2; }
.yazi-govde blockquote { margin: 2rem 0; padding: .4rem 0 .4rem 1.4rem; border-left: 3px solid var(--saman); font-family: var(--yazi-baslik); font-size: 1.45em; line-height: 1.3; }
.yazi-govde blockquote p:last-child { margin-bottom: 0; }
.yazi-govde img { display: block; max-width: 100%; height: auto; margin: 2rem 0; border-radius: 20px; }
.yazi-govde video { display: block; width: 100%; height: auto; max-height: 80vh; border-radius: 20px; margin: 2rem 0; background: #000; }
.yazi-youtube { position: relative; aspect-ratio: 16 / 9; margin: 2rem 0; border-radius: 24px; overflow: hidden; background: #000; }
.yazi-youtube.dikey { aspect-ratio: 9 / 16; width: min(100%, 22rem); margin-left: auto; margin-right: auto; }
.yazi-youtube iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* =========================================================
   5. Tek yazı: diğer yazılar
   ========================================================= */
.diger { padding: clamp(4rem, 8vw, 6rem) var(--kenar); border-top: 1px solid rgba(241, 228, 207, .12); }
.diger h2 { font-size: clamp(2.2rem, 4.5vw, 3.6rem); margin-bottom: 2rem; }
.diger ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 1.25rem; }
.diger a { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; align-items: center; padding: .75rem; border-radius: 20px; text-decoration: none; background: #26170F; transition: transform .4s var(--yay), background-color .3s; }
.diger a:hover { transform: translateX(8px); background: #2F1D13; }
.diger img { width: 7rem; aspect-ratio: 1; object-fit: cover; border-radius: 14px; }
.diger .bos-kapak { width: 7rem; aspect-ratio: 1; border-radius: 14px; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #3A2217, #1E120C 70%); }
.diger .bos-kapak img { width: 44px; height: 44px; object-fit: contain; opacity: .55; }
.diger b { font-family: var(--yazi-baslik); font-weight: 400; font-size: 1.4rem; line-height: 1.1; display: block; }
.diger small { opacity: .6; }