* {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
      }

      :root {
          --bg-primary: #eeeeee;
          /* #F2F2F2 */
          --bg-secondary: #ffffff;
          /* Reklam arkaplanları burayı çekecek */
          --text-primary: #212529;
          --text-secondary: #5a636b;
          /* Reklam yazıları burayı çekecek */
          --text-third: #4a4a4a;
          --text-fourth: #b8c1ce;
          --accent: #ff6b6b;
          --accent-hover: #ee5a52;
          --border: #dee2e6;
          /* Reklam kenarlıkları burayı çekecek */
          --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
          --toast-shadow: 0 10px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08);
          --toast-bg: rgba(255, 255, 255, 0.98);
          --toast-border: rgba(0, 0, 0, 0.06);
      }

      .dark-mode {
          --bg-primary: #101828;
          --bg-secondary: #1E2939;
          /* Dark mode'da reklam arkaplanı */
          --text-primary: #b7c1d4;
          --text-secondary: #a8b2d1;
          /* Dark mode'da reklam yazısı */
          --text-third: #a3abb3;
          --border: #2d3748;
          /* Dark mode'da reklam kenarlığı */
          --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
          --toast-shadow: 0 25px 50px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06);
          --toast-bg: rgba(30, 41, 57, 0.98);
          --toast-border: rgba(255, 255, 255, 0.08);
      }

      h2 {
          font-size: 2rem;
      }

      .no-posts-found {
          color: var(--text-secondary);
      }

      /* Resim Silme Butonu Stili */
      .img-delete-btn {
          width: 25px;
          height: 25px;
          background-color: var(--accent);
          /* Canlı kırmızı */
          color: white;
          border: 2px solid white;
          border-radius: 50%;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 18px;
          font-weight: bold;
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
          transition: all 0.2s ease;
      }

      .img-delete-btn:hover {
          background-color: var(--accent-hover);
          transform: scale(1.1);
      }

      /* Dosya seçme inputu için küçük bir dokunuş */
      .file-input {
          padding: 10px;
          background: var(--bg-secondary);
          border-radius: 8px;
          border: 1px dashed var(--border);
          width: 100%;
      }











      body {
          font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
          background: var(--bg-primary);
          color: var(--text-primary);
          transition: background 0.3s ease, color 0.3s ease;
          line-height: 1.6;
      }

      /* Header */
      header {
          background: var(--bg-secondary);
          padding: 0.5rem 0;
          box-shadow: var(--card-shadow);
          position: sticky;
          top: 0;
          z-index: 100;
      }

      .static {
          position: static;
      }


      .hidden {
          display: none;

      }

      .custom-spinner {
          /* animate-spin */
          animation: spin 1s linear infinite;

          margin-left: 0.5rem;

          width: 1.25rem;

          height: 1.25rem;

          /* text-white */
          color: #ffffff;
      }

      .opacity {
          opacity: 0.6;

      }

      .opacity-25 {
          opacity: 0.25;

      }



      /* Dönme animasyonu için gerekli keyframes */
      @keyframes spin {
          from {
              transform: rotate(0deg);
          }

          to {
              transform: rotate(360deg);
          }
      }


      /* Nav - Firefox flicker çözümü ile */
      nav {
          max-width: 1200px;
          margin: 0 auto;
          padding: 0 0.8rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
          position: relative;

          /* Firefox için kritik özellikler */
      }




      .logo a {
          display: block;
          width: 100%;
          height: 100%;
          text-decoration: none;

      }

      .logo_img {
          display: block;
          width: 100%;
          height: 100%;
          background-repeat: no-repeat;
          background-position: center;
          background-size: contain;
      }

      /* Logo Text */
      .logo-text {
          font-size: 2rem;
          /* Biraz daha vurgulu */
          font-weight: 800;
          z-index: 1;
          display: inline-block;

          /* Modern Gradient: Ana rengini, o rengin biraz daha koyu/açık haliyle karıştırıyoruz */
          background: linear-gradient(135deg,
                  var(--accent) 0%,
                  color-mix(in srgb, var(--accent), #fff 30%) 50%,
                  color-mix(in srgb, var(--accent), #000 20%) 100%);

          /* Gradient'i yazıya maskeleme */
          -webkit-background-clip: text;
          background-clip: text;
          -webkit-text-fill-color: transparent;

          /* Hafif derinlik için drop-shadow (Metin gölgesinden daha modern durur) */
          filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));

          /* Karakter arası daraltma: Modern tasarımın vazgeçilmezi */
          letter-spacing: -0.5px;
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }

      /* Logo Image - Firefox Optimize */




      /* Logo container - SABİT ALAN */
      .logo {
          display: flex;
          align-items: center;
          flex-shrink: 0;
      }

      /* Logo görsel alanı */
      .logo_img {
          display: block;
          width: 100%;
          height: 100%;
          background-repeat: no-repeat;
          background-position: left center;
          background-size: contain;
      }






      /* Hamburger Menu */
      .hamburger {
          display: none;
          flex-direction: column;
          cursor: pointer;
          z-index: 1001;
          padding: 0.5rem;
      }

      .hamburger span {
          width: 25px;
          height: 3px;
          background: var(--text-primary);
          margin: 3px 0;
          transition: 0.3s;
          border-radius: 2px;
      }

      .hamburger.active span:nth-child(1) {
          transform: rotate(-45deg) translate(-5px, 6px);
      }

      .hamburger.active span:nth-child(2) {
          opacity: 0;
      }

      .hamburger.active span:nth-child(3) {
          transform: rotate(45deg) translate(-5px, -6px);
      }

      .nav-links {
          display: flex;
          gap: 1rem;
          align-items: center;
      }

      .nav-links a {
          color: var(--text-primary);
          text-decoration: none;
          transition: color 0.3s;
      }

      .nav-links a:hover {
          color: var(--accent);
      }

      /* Search Box */
      .search-container {
          position: relative;
          margin-top: 2px;

      }

      .search-box {
          flex: 1;
          /* Mevcut boşluğu kaplar */
          padding: 0.6rem 1rem;
          border: 2px solid var(--border);
          /* Butonla birleştiği için sağ kenarlığı kaldır */
          border-radius: 18px;
          /* Sadece sol köşeleri yuvarla */
          background: var(--bg-secondary);
          color: var(--text-primary);
          font-size: 0.9rem;
          height: 34px;
          /* Sabit yükseklik hizalamayı garantiler */
          outline: none;
          margin: 0;
          /* Kaymaya sebep olan dış boşlukları sıfırla */
      }

      .search-form {
          display: flex;
          align-items: stretch;
          /* İçindeki elemanların boyunu eşitler */
          gap: 10px;
          /* Aradaki boşluğu kapatır */
          width: 100%;
          /* Kapsayıcıya yayılır */
      }


      .search_box_fixing {
          margin-top: 0 !important;
          /* Üstteki 5px'lik kaymayı iptal et */
          height: 32px;
          /* Input ile aynı yükseklik */
          border-radius: 18px;
          /* Sadece sağ köşeleri yuvarla */
          padding: 0 1.2rem;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          white-space: nowrap;
          border: none;
          cursor: pointer;
          background: var(--accent);
          /* Root değişkeninden rengi alır */
      }


      .search_box_fixing svg {
          margin: 0;
          /* Ekstra boşlukları temizle */
          flex-shrink: 0;
      }










      .search-box:focus {
          outline: none;
          border-color: var(--accent);
      }

      .search-icon {
          position: absolute;
          left: 0.8rem;
          top: 50%;
          transform: translateY(-50%);
          color: var(--text-secondary);
          pointer-events: none;
      }




      .theme-toggle {
          /* Hizalama Ayarları (Tam ortalamayı sağlayan kısım) */
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          /* İkon ve yazı arasındaki mesafe */

          /* Tasarım Ayarları */
          color: white;
          border: none;
          padding: 0.5rem 1rem;
          border-radius: 20px;
          cursor: pointer;

          background: linear-gradient(135deg,
                  var(--accent) 0%,
                  color-mix(in srgb, var(--accent), #fff 10%) 50%,
                  color-mix(in srgb, var(--accent), #444 30%) 100%);

          /* opacity: 0.8; */
      }

      .theme-toggle i {
          display: block;
          flex-shrink: 0;
          /* İkonun ezilmesini engeller */
      }

      .theme-toggle:hover {
          background: var(--accent-hover);
      }

      /* Color Picker */
      .color-picker {
          position: relative;
          display: inline-block;
      }

      .color-options {
          position: absolute;
          top: 100%;
          right: 0;
          background: var(--bg-secondary);
          border: 1px solid var(--border);
          border-radius: 12px;
          padding: 1rem;
          margin-top: 0.5rem;
          display: none;
          box-shadow: var(--card-shadow);
          z-index: 1000;
      }

      .color-options.show {
          display: block;
      }

      .color-options h4 {
          margin-bottom: 0.8rem;
          color: var(--text-primary);
          font-size: 0.9rem;
      }

      .color-grid {
          display: grid;
          grid-template-columns: repeat(5, 1fr);
          gap: 0.5rem;
      }

      .color-option {
          width: 40px;
          height: 40px;
          border-radius: 8px;
          cursor: pointer;
          border: 3px solid transparent;
          transition: transform 0.2s, border 0.2s;
      }

      .color-option:hover {
          transform: scale(1.1);
      }

      .color-option.active {
          border: 4px solid var(--text-third);
          transform: scale(1.1);
      }


      /* MAVİ TONLARI */
      .color-blue {
          background: linear-gradient(135deg, #6366f1, #4f46e5);
      }

      .color-indigo {
          background: linear-gradient(135deg, #4338ca, #3730a3);
      }

      /* GÜNCELLENDİ: Daha koyu indigo */
      .color-navy {
          background: linear-gradient(135deg, #1e3a8a, #1e40af);
      }

      .color-sky {
          background: linear-gradient(135deg, #0ea5e9, #0284c7);
      }

      .color-cyan {
          background: linear-gradient(135deg, #06b6d4, #0891b2);
      }

      .color-turquoise {
          background: linear-gradient(135deg, #4dd0e1, #00acc1);
      }

      /* YEŞİL / TURKUAZ TONLARI */
      .color-teal {
          background: linear-gradient(135deg, #0d9488, #0f766e);
      }

      /* GÜNCELLENDİ: Petrol Yeşili */
      .color-mint {
          background: linear-gradient(135deg, #26a69a, #00897b);
      }

      .color-emerald {
          background: linear-gradient(135deg, #10b981, #059669);
      }

      .color-green {
          background: linear-gradient(135deg, #16a34a, #15803d);
      }

      /* GÜNCELLENDİ: Çimen Yeşili */
      .color-lime {
          background: linear-gradient(135deg, #65a30d, #4d7c0f);
      }

      /* GÜNCELLENDİ: Canlı Lime */
      .color-olive {
          background: linear-gradient(135deg, #9e9d24, #827717);
      }

      /* KIRMIZI / PEMBE / MOR TONLARI */
      .color-red {
          background: linear-gradient(135deg, #ef4444, #dc2626);
      }

      .color-crimson {
          background: linear-gradient(135deg, #dc143c, #b22234);
      }

      .color-rose {
          background: linear-gradient(135deg, #f43f5e, #e11d48);
      }

      .color-pink {
          background: linear-gradient(135deg, #ec4899, #db2777);
      }

      .color-fuchsia {
          background: linear-gradient(135deg, #d946ef, #c026d3);
      }

      .color-magenta {
          background: linear-gradient(135deg, #e91e63, #c2185b);
      }

      .color-purple {
          background: linear-gradient(135deg, #a855f7, #9333ea);
      }

      .color-violet {
          background: linear-gradient(135deg, #8b5cf6, #7c3aed);
      }

      .color-lavender {
          background: linear-gradient(135deg, #b39ddb, #9575cd);
      }

      .color-maroon {
          background: linear-gradient(135deg, #991b1b, #7f1d1d);
      }

      /* SARI / TURUNCU / KAHVE TONLARI */
      .color-yellow {
          background: linear-gradient(135deg, #eab308, #ca8a04);
      }

      .color-orange {
          background: linear-gradient(135deg, #f59e0b, #d97706);
      }

      .color-portakal {
          background: linear-gradient(135deg, #f87118, #e78e53);
      }

      .color-coral {
          background: linear-gradient(135deg, #f77066, #e6574f);
      }

      .color-peach {
          background: linear-gradient(135deg, #a54b34, #8a3c2a);
      }

      .color-gold {
          background: linear-gradient(135deg, #aa7b6f, #8d5e56);
      }

      .color-bronze {
          background: linear-gradient(135deg, #cd7f32, #b8860b);
      }

      /* DİĞER */
      .color-slate {
          background: linear-gradient(135deg, #64748b, #475569);
      }

      /* Featured Slider */
      .featured-section {
          max-width: 1200px;
          margin-right: auto;
          margin-left: auto;
          margin-top: 2rem;
          margin-bottom: 3rem;
          padding: 0 1rem
      }

      .featured-slider {
          position: relative;
          overflow: hidden;
          border-radius: 12px;
          box-shadow: var(--card-shadow);
      }

      .slides {
          display: flex;
          transition: transform 0.5s ease;
      }

      .slide {
          min-width: 100%;
          height: 500px;
          position: relative;
          cursor: pointer;
      }

      .slide img {
          width: 100%;
          height: 100%;
          object-fit: cover;
      }

      .slide-content {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
          color: white;
          padding: 3rem 2rem;
      }

      .slide-content h2 {
          font-size: 2.5rem;
          margin-bottom: 1rem;
      }

      .slide-content p {
          font-size: 1.1rem;
          margin-bottom: 1rem;
      }

      .slide-dots {
          position: absolute;
          bottom: 20px;
          left: 50%;
          transform: translateX(-50%);
          display: flex;
          gap: 14px;
          z-index: 10;
      }

      .dot {
          width: 22px;
          height: 22px;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.5);
          cursor: pointer;
          /* transition: background 0.3s; */
          opacity: 0.4;
          transition: all 0.3s ease-in-out;
          /* Bu satır çok önemli! */
      }

      .dot.active {
          background: linear-gradient(145deg, #ffffff, #e2e2e2d5);
          /* Hafif gradyan */
          opacity: 1;
          transform: scale(1.25);
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3),
              /* Altına düşen gölge */
              inset 0 -2px 4px rgba(0, 0, 0, 0.1);
          /* İç gölgeyle derinlik */
          border: 2px solid #ffffffa4;
      }

      /* Dark Mode Aktif Hali */
      .dark-mode .dot.active {
          /* 1. Arka planı koyu metalik griye çekiyoruz */
          background: linear-gradient(145deg, #444444, #2a2a2a);

          /* 2. Sınırları yumuşatmak için bordürü gri yapıyoruz */
          border: 2px solid #555;

          /* 3. Gölgeleri dark moda göre ayarlıyoruz:
                - Dış gölgeyi (siyahı) daha koyu ve belirgin yapıyoruz.
                - İç gölgeyi koruyoruz.
                - EN ÖNEMLİSİ: En sona hafif beyaz bir 'glow' (parlama) ekliyoruz 
                    ki koyu zemin üzerinde kaybolmasın (0 0 5px...) */
          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.9),
              inset 0 -2px 4px rgba(0, 0, 0, 0.5),
              0 0 4px rgba(255, 255, 255, 0.2);

          /* Parlaklığı biraz kıstık, göz almasın diye */
          opacity: 1;
      }


      /* Slider Navigation Arrows */
      .slider-nav {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          background: rgba(255, 255, 255, 0.9);
          color: var(--text-primary);
          border: none;
          width: 50px;
          height: 50px;
          border-radius: 50%;
          cursor: pointer;
          font-size: 1.5rem;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: background 0.3s, transform 0.3s;
          z-index: 10;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      }

      .slider-nav:hover {
          background: white;
          transform: translateY(-50%) scale(1.1);
      }

      .slider-nav-prev {
          left: 20px;
      }

      .slider-nav-next {
          right: 20px;
      }

      .dark-mode .slider-nav {
          background: rgba(30, 30, 46, 0.9);
          color: var(--text-primary);
      }

      .dark-mode .slider-nav:hover {
          background: var(--bg-secondary);
      }

      .cat_container {
          max-width: 1200px;
          margin: 2rem auto 1rem auto;
          padding: 0 1rem;
          font-size: 1.5rem;
          font-weight: 600;
          color: var(--accent);
      }

      .cat_container a:link,
      .cat_container a:visited {
          text-decoration: none;
          color: var(--accent);

      }

      /* Main Container */
      .container {
          max-width: 1200px;
          margin-top: 0;
          margin-bottom: 3rem;
          margin-left: auto;
          margin-right: auto;


          padding: 0 1rem;
          display: grid;
          grid-template-columns: 1fr 300px;
          gap: 2rem;
          align-items: start;
          /* Grid itemlerini üstten hizala */
      }

      .container-post-read {
          max-width: 1200px;
          margin-top: 33px;
          margin-bottom: 3rem;
          margin-left: auto;
          margin-right: auto;


          padding: 0 1rem;
          display: grid;
          grid-template-columns: 1fr 300px;
          gap: 2rem;
          align-items: start;
          /* Grid itemlerini üstten hizala */
      }



      .container-category-header {
          margin-bottom: 1rem;
          max-width: 1200px;
          margin: 2rem auto;
          padding: 0 1rem;
          gap: 2rem;
      }

      .container-backbuton {
          margin-top: 1rem;
          margin-bottom: -2rem;
          max-width: 1200px;
          margin-right: auto;
          margin-left: auto;
          padding-left: 2rem;
          gap: 2rem;
          position: relative;
      }

      #blog-grid {
          scroll-margin-top: 120px;
          /* 50px yerine, varsa menü boyunu + biraz boşluk ekle */
      }


      /* Blog Grid */
      .blog-grid {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
          gap: 2rem;
      }

      .blog-card {
          background: var(--bg-secondary);
          border-radius: 8px;
          /* Special card: 8px, Blog card: 12px idi, 8px yaparsan tam aynısı olur */
          overflow: hidden;
          cursor: pointer;
          min-height: 437px;
          display: flex;
          flex-direction: column;

          /* İŞTE BURASI ÖNEMLİ: Special Card Ayarları */
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
          transition: transform 0.2s, box-shadow 0.2s;
          /* cubic-bezier yok, sadece süre */
      }

      .blog-card:hover {
          transform: translateY(-5px);
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      }

      .blog-card img {
          width: 100%;
          height: 200px;
          object-fit: cover;

          /* Special Card Resmi ile aynı süre */
          transition: transform 0.3s;
      }

      .blog-card:hover img {
          transform: scale(1.05);
      }

      .blog-card-content {
          padding: 1.5rem;
      }

      .blog-card h3 {
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
      }

      .blog-meta {
          color: var(--text-third);
          font-size: 0.9rem;
          margin-bottom: 1rem;
      }

      .blog-meta-featured {
          color: var(--text-fourth);
          font-size: 0.9rem;
          margin-bottom: 1rem;
      }

      .blog-excerpt {
          color: var(--text-secondary);
          line-height: 1.6;
          margin-top: 5px;

          /* --- MODERN METİN KESME (LINE CLAMP) --- */
          display: -webkit-box;
          /* Gerekli bir esnek kutu modeli */
          -webkit-line-clamp: 3;
          /* Metni 3. satırdan sonra kes (İstersen 2 yap) */
          -webkit-box-orient: vertical;
          /* Kutunun yönünü dikey yap */
          overflow: hidden;
          /* Taşan metni gizle */
          text-overflow: ellipsis;
          /* Kesilen yerin sonuna üç nokta (...) koy */

          /* Opsiyonel: Eğer metin kısa olsa bile 3 satırlık yer kaplasın istersen */
          /* min-height: calc(1.6em * 3); */

          /* Opsiyonel: Alt kısımla mesafeyi sabitlemek için */
          margin-bottom: 1rem;
      }

      /* Sidebar */
      .sidebar {
          position: sticky;
          top: 100px;
          height: fit-content;
          align-self: start
      }



      .sidebar_fixed {
          position: sticky;
          top: 20px;
          height: fit-content;
          align-self: start
      }

      .sidebar-widget {
          background: var(--bg-secondary);
          padding: 1.5rem;
          border-radius: 12px;
          margin-bottom: 2rem;
          box-shadow: var(--card-shadow);
      }

      .sidebar-widget h2 {
          font-size: 1.2rem;
          margin-bottom: 1rem;
          color: var(--accent);
      }

      .sidebar-widget h3 {
          margin-bottom: 1rem;
          color: var(--accent);
      }

      .ad-space {
          background: linear-gradient(135deg, var(--accent), var(--accent-hover));
          height: 250px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: white;
          font-size: 1.2rem;
          border-radius: 8px;
          opacity: 0.40;
      }

      .recent-posts {
          margin-left: -0.3rem;
      }

      .recent-posts li {
          list-style: none;
          padding: 0.4rem 0;
          border-bottom: 1px solid var(--border);
          cursor: pointer;
      }

      .recent-posts li a {
          color: var(--text-primary);
          text-decoration: none;
      }

      .recent-posts li a:hover {
          color: var(--accent-hover);
      }


      .recent-posts li:last-child {
          border-bottom: none;
      }


      .category-count {
          background: var(--accent);
          color: white;
          padding: 0.2rem 0.6rem;
          border-radius: 12px;
          font-size: 0.85rem;
          font-weight: bold;
      }

      .category-list li:hover .category-count {
          background: white;
          color: var(--accent);
      }

      /* Clear Both (Blog Kartlarının Altındaki Boşluğu Kaldırmak İçin) */
      .clear_both {
          clear: both;
      }





      /* Sayfalama Konteynırı */
      /* 1. Kapsayıcıya Flex ekliyoruz ki hepsi yan yana ve ortalı dursun */
      .pagination {
          display: flex;
          align-items: center;
          justify-content: center;
          /* İstersen sola yaslamak için 'flex-start' yapabilirsin */
          gap: 10px;
          /* Butonlar birbirine yapışmasın diye boşluk */
          flex-wrap: wrap;
          /* Mobilde taşarsa aşağı geçsin ama düzgün geçsin */
          margin-top: 20px;
          margin-bottom: 20px;

      }

      .pagination button {
          background: var(--bg-secondary);
          color: var(--text-primary);
          border: 1px solid var(--border);
          padding: 8px;
          border-radius: 10px;
          font-weight: 500;
          cursor: pointer;
          display: inline-flex;
          /* Burası önemli, içerik ortalaması için */
          align-items: center;
          justify-content: center;
          height: 40px;
          /* Biraz küçülttük */
          min-width: 40px;
      }

      /* Navigasyon (Önceki/Sonraki) Butonları */
      .nav-btn {
          min-width: 150px;
          /* Genişlik isteğin kalıyor */
          font-size: 0.9rem;

      }

      /* =========================================
   MOBİL SAYFALAMA (SADECE ÖNCEKİ/SONRAKİ)
   ========================================= */

      @media (max-width: 480px) {

          .pagination {
              /* Butonları ortaya toplayalım, kenarlara yapışmasın */
              justify-content: center !important;
              gap: 10px;
              /* Butonlar arası boşluk */
              padding: 0 10px;
              /* Ekranın sol ve sağından güvenli boşluk */
              flex-wrap: nowrap;
              /* Asla alt satıra geçmesinler */
          }

          /* Sayı butonlarını gizle (Aynı kalıyor) */
          .pagination .num-btn,
          .pagination span,
          .pagination .dots {
              display: none !important;
          }

          /* Önceki / Sonraki Buton Ayarı */
          .nav-btn {
              /* Flex: 1'i İPTAL EDİYORUZ. Artık uzamasınlar. */
              flex: initial !important;

              /* Genişlik: İçerik kadar olsun ama çok da dar olmasın */
              width: auto !important;
              min-width: 110px !important;
              /* En az bu kadar geniş olsun ki parmak otursun */
              max-width: 45%;
              /* Ekranın yarısından fazlasını asla kaplamasın (Güvenlik kilidi) */

              /* Yükseklik ve Font */
              height: 44px !important;
              font-size: 0.9rem !important;

              /* İç boşluk verelim ki yazılar kenara yapışmasın */
              padding: 0 15px !important;

              /* Kenar Yuvarlama */
              border-radius: 8px !important;
          }

          .dot {
              width: 20px;
              height: 20px;
          }

      }


      @media (max-width: 768px) {

          /* Mobilde slider oklarını gizle, metin açılsın */
          .slider-nav-next,
          .slider-nav-prev {
              display: none !important;
          }

          /* Başlık boyutunu küçült */
          .slide-content h2 {
              /* Başlık class'ın neyse */
              font-size: 1.2rem !important;
              line-height: 1.2;
          }
      }


      /* Sayı Butonları İçin Karemsi Yapı */
      .pagination .num-btn {
          padding: 0;
      }


      .pagination button:hover:not(.active):not(:disabled) {
          background: var(--accent);
          color: white;
          border-color: var(--accent);
          transform: translateY(-1px);
      }

      .pagination button.active {
          background: var(--accent);
          color: white;
          border-color: var(--accent);
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      }

      .pagination button:disabled {
          opacity: 0.5;
          cursor: not-allowed;
      }

      .pagination .page-info {
          color: var(--text-secondary);
          font-size: 0.95rem;
          padding: 0 0.5rem;
      }



      /* Scroll Buttons */
      .scroll-btn {
          position: fixed;
          right: 2rem;
          width: 50px;
          height: 50px;
          background: var(--accent);
          color: white;
          border: none;
          border-radius: 50%;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 1.5rem;
          opacity: 0;
          /* transition: opacity 0.3s, background 0.3s; */
          z-index: 99;
      }

      .scroll-btn.visible {
          opacity: 1;
      }

      .scroll-btn:hover {
          background: var(--accent-hover);
      }

      .scroll-top {
          bottom: 5.5rem;
      }

      .scroll-bottom {
          bottom: 2rem;
      }

      /* Blog Post Page */
      .blog-post {
          background: var(--bg-secondary);
          padding-top: 1.7rem;
          padding-right: 1.8rem;
          padding-bottom: 3rem;
          padding-left: 1.8rem;
          border-radius: 12px;
          box-shadow: var(--card-shadow);
      }

      .blog-post.active {
          display: block;
      }

      .blog-post h1 {
          font-size: 1.7rem;
          margin-bottom: 1rem;
          color: var(--text-primary);
      }

      .blog-post h2,
      .blog-post h3 {
          margin-bottom: 0.5rem;
      }

      .blog-post h2 {
          font-size: 1.4rem;
      }

      .blog-post h3 {
          font-size: 1.2rem;
      }


      /* Sadece ilk sırada DEĞİLSELER (yani üstlerinde bir şey varsa) */
      .blog-post h2:not(:first-child),
      .blog-post h3:not(:first-child) {
          margin-top: 2rem;
      }

      .blog-post-baslik {
          font-size: 1.7rem !important;
          margin-bottom: 1rem;
          color: var(--text-primary);
      }



      .blog-post-meta {
          color: var(--text-secondary);
          margin-bottom: 0.3rem;
          padding-bottom: 0.5rem;
          border-bottom: 2px solid var(--border);
      }

      .blog-post-meta a {
          color: var(--text-secondary);
          text-decoration: underline;
      }

      .blog-post-meta span {
          margin-right: 0.6rem;
      }

      .blog-post img {
          width: 100%;
          max-height: 500px;
          object-fit: cover;
          border-radius: 8px;
          margin: 1rem 0;
      }

      .blog-post p {
          margin-bottom: 1.5rem;
          line-height: 1.8;
      }

      .blog-post p>img {
          margin-bottom: 0rem;
      }

      .back-btn {
          /* Görünüm Ayarları */
          display: inline-flex;
          align-items: center;
          gap: 8px;
          /* Ok ve metin arasındaki mesafe */
          text-decoration: none;

          background-color: var(--accent);
          color: #ffffff;

          padding: 0.4rem 0.9rem;
          border-radius: 8px;
          margin: 1rem 0 1rem 1rem;
          /* Üst, Sağ, Alt, Sol */

          font-weight: 500;
          font-size: 1rem;

          cursor: pointer;
          border: none;
      }

      .logout-btn {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          /* Ok ve metin arasındaki mesafe */
          text-decoration: none;

          background-color: var(--accent);
          color: #ffffff;

          padding: 0.2rem 0.2rem;
          border-radius: 8px;
          margin: 0;
          /* Üst, Sağ, Alt, Sol */

          font-weight: 500;
          font-size: 1rem;

          cursor: pointer;
          border: none;
      }

      .back-btn:hover {
          background-color: var(--accent-hover);
          transform: translateX(-1px);
          /* Hafif sola kayma efekti ile "geri" hissi verir */
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      }

      /* Tıklama anı (Active) efekti */
      .back-btn:active {
          transform: scale(0.98);
      }



      /* Footer */
      footer {
          background: var(--bg-secondary);
          padding: 3rem 0 1.5rem;
          margin-top: 4rem;
          border-top: 1px solid var(--border);
      }

      .footer-content {
          max-width: 1200px;
          margin: 0 auto;
          padding: 0 1rem;
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
          gap: 2rem;
          margin-bottom: 2rem;
      }

      .footer-section-title {
          color: var(--accent);
          margin-bottom: 0.5rem;
          font-size: 1.2rem;
          font-weight: 700;
      }

      .footer-section p {
          color: var(--text-secondary);
          line-height: 2;
          margin-bottom: 1rem;
      }

      .footer-links {
          list-style: none;
          padding: 0;
          margin: 0;
      }

      .footer-links li {

          margin-bottom: 0.5rem;
          line-height: 1.6;
      }

      .footer-links a {
          display: block;
          padding: 8px 0;
          color: var(--text-secondary);
          text-decoration: none;
          transition: all 0.3s ease;
      }

      .footer-links a:hover {
          color: var(--accent);
          padding-left: 5px;
      }

      @media (max-width: 768px) {
          .search-form {
              flex-direction: column;
              gap: 10px;
          }

          .search-box,
          .search_box_fixing {
              width: 100% !important;
              margin: 0 !important;
          }



          .footer-links li {
              margin-bottom: 0;
              border-bottom: 1px solid rgba(255, 255, 255, 0.05);
          }

          .footer-links a {
              font-size: 1rem;
              padding: 12px 0;
          }
      }

      .social-links {
          display: flex;
          gap: 1.4rem;
          margin-top: 1rem;
      }

      .social-links a {
          width: 40px;
          height: 40px;
          background: var(--accent);
          color: white;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          text-decoration: none;
          transition: background 0.3s, transform 0.3s;
      }

      .social-links a:hover {
          background: var(--accent-hover);
          transform: translateY(-3px);
      }

      .footer-bottom {
          max-width: 1200px;
          margin: 0 auto;
          padding: 1.5rem 2rem 0;
          border-top: 1px solid var(--border);
          text-align: center;
          color: var(--text-secondary);
      }

      @media (max-width: 1200px) {
          .container {
              grid-template-columns: 1fr;
              padding: 0 1rem
          }

          .container-category-header {
              padding: 0 1rem;
          }

          .container-post-read {
              grid-template-columns: 1fr;
              padding: 0 1rem
          }



          .sidebar {
              margin-top: 50px;
              position: static;
          }

          .sidebar_fixed {
              position: static;
          }

          .slide-content h2 {
              font-size: 1.8rem;
          }

          /* Mobile Header with Hamburger */
          nav {
              padding: 0 1rem;
          }

          .hamburger {
              display: flex;
          }

          .logo {
              font-size: 1.5rem;
          }

          .nav-links {
              position: fixed;
              top: 0;
              /* Menü kapalıyken ekranın sağında, tamamen dışarıda dursun */
              right: -100%;
              height: 100vh;
              width: 80%;
              /* İdeal genişlik */
              max-width: 300px;
              /* Tabletlerde çok devasa görünmemesi için limit */
              background: var(--bg-secondary, #fff);
              display: flex;
              /* Flexbox aktif değilse ekleyelim */
              flex-direction: column;
              justify-content: flex-start;
              align-items: flex-start;
              padding: 1rem 1rem 1rem;
              /* margin-left: -2rem;  <- Bunu kaldırıyoruz, padding zaten içeriden boşluk verir */
              gap: 0.4rem;
              transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
              /* Daha şık bir geçiş */
              box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2);
              overflow-y: auto;
              z-index: 1000;
          }

          /* Menü açıldığında eklenecek sınıf */
          .nav-links.active {
              right: 0;
          }

          .nav-links a {
              font-size: 0.93rem;
              width: 100%;
              padding: 0.5rem 0;
              border-bottom: 1px solid var(--border);

              display: inline-flex;
              /* Elemanları yan yana ve esnek yapar */
              align-items: center;
              /* Dikeyde tam merkeze hizalar */
              gap: 8px;
              /* İkon ve metin arasındaki boşluk */
              text-decoration: none;
              line-height: 1;
              /* Satır yüksekliği kaynaklı kaymaları engeller */

          }

          .nav-links a svg {
              flex-shrink: 0;
              /* İkonun daralmasını engeller */
              /* vertical-align: middle; -> Flexbox kullandığımız için artık buna gerek yok */
          }


          .search-container {
              width: 100%;
          }


          .search-box {
              width: 100%;
              font-size: 0.95rem;
              padding: 0.6rem 1rem 0.6rem 2.5rem;
              margin-bottom: 12px;
          }

          .search-box:focus {
              width: 100%;
          }

          .search-icon {
              font-size: 1rem;
              left: 0.8rem;
          }

          .theme-toggle {
              width: 100%;
              text-align: left;
              font-size: 0.95rem;
              padding: 0.6rem 1rem;
              border-radius: 8px;
          }

          .color-picker {
              width: 100%;
          }

          .color-picker .theme-toggle {
              width: 100%;
          }

          .color-options {
              position: relative;
              top: 0;
              right: 0;
              margin-top: 0.5rem;
              width: 100%;
          }

          .color-options.show {
              display: block;
          }

          .color-grid {
              grid-template-columns: repeat(5, 1fr);
              gap: 0.4rem;
          }

          .color-option {
              width: 35px;
              height: 35px;
          }

          /* Mobile Footer */
          .footer-content {
              grid-template-columns: 1fr;
              gap: 2.5rem;
          }

          .footer-section {
              text-align: center;
          }

          .footer-links {
              display: flex;
              flex-direction: column;
              align-items: center;
              gap: 0.5rem;
          }

          .social-links {
              justify-content: center;
          }

          .footer-bottom {
              font-size: 0.9rem;
          }

          /* Mobile Scroll Buttons */
          .scroll-btn {
              width: 45px;
              height: 45px;
              font-size: 1.3rem;
              right: 0.5rem;
              /* transition: opacity 0.3s ease, visibility 0.3s ease; */
              /* Yumuşak kayboluş için */
              opacity: 1;
              visibility: visible;

              transition: all 0.3s ease-in-out;
              /* Yumuşak geçiş */
              pointer-events: auto;
              /* Tıklanabilir */
          }

          /* JavaScript'in ekleyeceği sınıf */
          .scroll-btn.gizle {
              opacity: 0;
              /* Görünmez yap */
              visibility: hidden;
              /* Tıklanmasını da engelle (AdSense için en önemlisi bu) */
              pointer-events: none;

              transform: translateY(20px);
          }


          .scroll-top {
              bottom: 4.7rem;
          }

          .scroll-bottom {
              bottom: 1.5rem;
          }

          /* Mobile Blog Grid */
          .blog-grid {
              grid-template-columns: 1fr;
          }

          /* Mobile Featured Slider */
          .slide {
              height: 350px;
          }

          .slide-content {
              padding: 2rem 1.5rem;
          }

          .slide-content h2 {
              font-size: 1.5rem;
          }

          .slide-content p {
              font-size: 0.95rem;
          }

          .slider-nav {
              width: 40px;
              height: 40px;
              font-size: 1.3rem;
          }

          .slider-nav-prev {
              left: 10px;
          }

          .slider-nav-next {
              right: 10px;
          }
      }

      @media (max-width: 480px) {

          .recent-posts li a {
              display: block;
              padding: 10px 0;
              margin: 0;
          }

          .blog-post {
              padding-top: 1.1rem;
              padding-right: 0.5rem;
              padding-bottom: 1rem;
              padding-left: 0.5rem;
              border-radius: 12px;
              box-shadow: var(--card-shadow);
          }


          .blog-post h1 {
              font-size: 1.5rem;
          }

          .blog-post-baslik {
              font-size: 1.25rem !important;
              margin-bottom: 1rem;
              color: var(--text-primary);
          }

          .blog-post h2 {
              font-size: 1.2rem;
          }

          .blog-post h3 {
              font-size: 1.1rem;
          }


          .logo {
              font-size: 1.3rem;
          }

          .nav-links {
              width: 85%;
          }

          .color-grid {
              grid-template-columns: repeat(5, 1fr);
              gap: 0.35rem;
          }

          .color-option {
              width: 32px;
              height: 32px;
          }

          .slide {
              height: 280px;
          }

          .slide-content h2 {
              font-size: 1.2rem;
          }

          .slide-content p {
              font-size: 0.85rem;
          }

          .slider-nav {
              width: 35px;
              height: 35px;
              font-size: 1.1rem;
          }

          .slider-nav-prev {
              left: 5px;
          }

          .slider-nav-next {
              right: 5px;
          }

          .footer-bottom {
              font-size: 0.85rem;
              padding: 1rem 1rem 0;
          }
      }


      /* Sadece 350px ve altı (yani 320px grubu) için özel kurtarma operasyonu */
      @media (max-width: 350px) {
          .nav-links {
              position: fixed;
              top: 0;
              right: -120%;
              height: 100vh;

              width: 100%;
              max-width: 320px;

              background: var(--bg-secondary, #fff);

              display: flex;
              flex-direction: column;

              justify-content: flex-start;
              align-items: stretch;

              padding: 1rem 0.5rem;

              gap: 0.5rem;
              transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
              box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2);
              overflow-y: auto;
              z-index: 1000;
          }

          .nav-links * {
              max-width: 100%;
              box-sizing: border-box;
          }
      }

      /* --- GÜNCELLENMİŞ MODERN QUILL TASARIMI --- */

      /* 1. Üst Kısım (Araç Çubuğu): Otomatik yükseklik ve yuvarlak köşeler */
      .ql-toolbar.ql-snow {
          border: 1px solid var(--border) !important;
          border-top-left-radius: 12px;
          border-top-right-radius: 12px;
          background-color: var(--bg-secondary);
          padding: 10px 8px !important;
          /* Biraz daha geniş nefes payı */

          /* Taşmayı ve kesilmeyi önleyen kritik ayarlar */
          height: auto !important;
          display: flex !important;
          flex-wrap: wrap !important;
          overflow: visible !important;
      }

      /* 2. Araç Çubuğundaki Buton Grupları: Satır arası boşluk */
      .ql-snow.ql-toolbar .ql-formats {
          margin-right: 10px !important;
          margin-bottom: 6px !important;
          /* Butonlar 2. veya 3. satıra geçerse araları açılır */
          display: inline-flex;
      }

      /* 3. Alt Kısım (Yazı Alanı): Yuvarlak köşeler ve form gap düzeltme */
      .ql-container.ql-snow {
          border: 1px solid var(--border) !important;
          border-bottom-left-radius: 12px;
          border-bottom-right-radius: 12px;
          background-color: var(--bg-secondary);
          font-family: inherit;
          font-size: 1rem;
      }

      /* 4. Formdaki gap: 1.5rem kuralını ezip iki kutuyu birleştirme */
      .ql-toolbar.ql-snow+.ql-container.ql-snow {
          margin-top: -0.9rem !important;
          /* Formun gap'ini burada nötrlüyoruz */
          border-top: none !important;
      }

      /* 5. Editöre Odaklanınca (Focus) Efekti */
      .ql-container.ql-snow.ql-focus,
      .ql-container.ql-snow:focus-within {
          border-color: var(--accent) !important;
          box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.1);
          transition: border-color 0.2s, box-shadow 0.2s;
      }

      /* Dark Mode İkon Düzeltmesi */
      .dark-mode .ql-stroke {
          stroke: var(--text-primary) !important;
      }

      .dark-mode .ql-fill {
          fill: var(--text-primary) !important;
      }

      .dark-mode .ql-picker {
          color: var(--text-primary) !important;
      }

      /* Liste Stilleri */

      ul {
          list-style-position: outside;
          /* İşaretlerin metin hizasının dışında kalması için */
          padding-left: 0px;
          /* Bu değeri artırarak daha fazla içeri sokabilirsin */
      }

      li {
          margin-bottom: 15px;
          /* Maddeler arası boşluk için */
      }

      ol {
          list-style-type: decimal;
          /* Numaralandırma için */
          padding-left: 25px;
          /* Bu değeri artırarak daha fazla içeri sokabilirsin */
      }

      blockquote {
          border-left: 4px solid var(--accent);
          padding-left: 15px;
          color: var(--text-secondary);
          font-style: italic;
          margin: 2.5rem 0;
      }

      .blog-post ul {
          list-style-position: outside;
          /* İşaretlerin metin hizasının dışında kalması için */
          padding-left: 25px;
          /* Bu değeri artırarak daha fazla içeri sokabilirsin */
      }

      .blog-post li {
          margin-bottom: 15px;
          /* Maddeler arası boşluk için */
      }

      /* --- FORM STİLLERİ --- */
      /* "logout-container" içindeki formu tamamen sıfırlıyoruz */
      .logout-container form {
          all: unset;
          /* Diğer tüm form özelliklerini (gölge, padding, genişlik) tek hamlede siler */
          display: inline-block;
          /* Yan yana durmasını sağlar */
      }

      .logout-container button {
          /* Genel buton stillerinden etkilenmemesi için değerleri kendimiz veriyoruz */
          background-color: var(--accent);
          color: white;
          padding: 4px 6px;
          border: none;
          border-radius: 6px;
          font-family: sans-serif;
          font-size: 12px;
          font-weight: 600;
          cursor: pointer;
          display: flex;
          align-items: center;
          gap: 4px;
          transition: all 0.2s ease;
      }

      /* Üzerine gelince çok hafif bir tepki */
      .logout-container button:hover {
          filter: brightness(0.9);
          transform: translateY(-1px);
      }

      /* Küçük ikon ayarı */
      .logout-container button i {
          font-size: 1.1rem;
      }


      /* Sadece bu class'a sahip formlar büyük ve kaba görünecek */
      .main-form {
          min-width: 90%;
          max-width: 1200px;
          /* EKSİK: Çok geniş ekranlarda formun devasa yayılmasını engeller */
          margin: 2rem auto;
          padding: 2rem;
          background-color: var(--bg-secondary);
          border-radius: 12px;
          box-shadow: var(--card-shadow);
          display: flex;
          flex-direction: column;
          gap: 1rem;
          font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      }

      .main-form .flex label {
          font-size: 0.9rem;
          font-weight: 600;
          color: var(--text-primary);
          margin-bottom: 6px;
          display: block;
          /* EKSİK: Label'ın tüm satırı kaplaması tıklanabilirliği artırır */
      }

      /* Alt elemanları da bu class'a bağladık */
      .main-form label {
          font-size: 0.9rem;
          font-weight: 600;
          color: var(--text-primary);
          margin-bottom: 0;
          display: block;
          /* EKSİK: Label'ın tüm satırı kaplaması tıklanabilirliği artırır */
      }

      /* 1. Diğer inputlar standart kalsın */
      .main-form input[type="text"],
      .main-form input[type="password"],
      .main-form input[type="email"],
      .main-form input[type="number"],
      .main-form select {
          width: 100%;
          padding: 0.8rem 1rem;
          border: 1.5px solid var(--border);
          border-radius: 8px;
          background-color: var(--bg-secondary);
          color: var(--text-primary);
          font-size: 1rem;
          outline: none;
          transition: all 0.2s ease;
      }

      /* 2. Textarea için ÖZEL ayarlar (Font ve resize sorununu çözer) */
      .main-form textarea {
          width: 100%;
          padding: 0.8rem 1rem;
          border: 1.5px solid var(--border);
          border-radius: 8px;
          background-color: var(--bg-secondary);
          /* Dark mode'da otomatik koyu olur */
          color: var(--text-primary);
          /* Dark mode'da otomatik açık renk olur */
          font-size: 1rem;
          outline: none;
          transition: all 0.2s ease;

          font-family: inherit;
          resize: vertical;
          /* Sadece aşağı yukarı uzatılabilir, tasarımı bozmaz */
          min-height: 120px;
          /* Başlangıçta çok dar görünmemesi için */
      }



      .main-form input[type="file"] {
          width: 17rem;
          padding: 0.8rem 1rem;
          border: 1.5px solid var(--border);
          border-radius: 8px;
          background-color: var(--bg-secondary);
          color: var(--text-primary);
          font-size: 1rem;
          outline: none;
          transition: all 0.2s ease;
          /* EKSİK: Odaklanma geçişi yumuşak olmalı */
      }

      .main-form input:focus,
      .main-form textarea:focus,
      .main-form select:focus {
          border-color: var(--accent);
          /* box-shadow kısmındaki renk değerini de değişkene bağladım */
          box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent), transparent 80%);
          background-color: var(--bg-secondary);
      }

      /* YANLIŞ: button[type="file"] diye bir şey yoktur dostum. Input'tur o. */
      /* Doğrusu hem normal butonları hem de özel sınıfları kapsamaktır */
      .main-form button[type="submit"],
      .main-form .btn-primary {
          background-color: color-mix(in srgb, var(--accent), black 20%);
          color: white;
          padding: 1rem;
          border: none;
          border-radius: 8px;
          font-size: 1rem;
          font-weight: 700;
          cursor: pointer;
          margin-top: 1rem;
          transition: all 0.2s ease;
          /* Eksik geçiş efekti */
      }

      .main-form button[type="submit"]:hover,
      .main-form .btn-primary:hover {
          background-color: var(--accent-hover);
          transform: translateY(-2px);
          /* Biraz daha belirgin tepki */
      }

      /* EKSİK: Butona tıklandığında (active) basılma hissi */
      .main-form button[type="submit"]:active {
          transform: translateY(0);
      }

      /* EKSİK: Engelli (disabled) buton hali */
      .main-form button:disabled {
          opacity: 0.6;
          cursor: not-allowed;
      }



      /* Placeholder Rengi */
      ::placeholder {
          color: var(--text-secondary);
          opacity: 0.7;
      }

      /* Yazıyı biraz sönükleştirmek ve gri tonu vermek için */
      .text-muted {
          color: #79828a !important;
      }

      /* Yazıyı küçültmek ve daha zarif göstermek için */
      .small {
          font-size: 0.875em;
          /* Ana metne göre %14-15 daha küçük */
          font-weight: 400;
      }

      /* İstersen ikisini birleştirip özel bir yan metin stili de yapabilirsin */
      .post-date {
          color: #999;
          font-size: 12px;
          margin-left: 8px;
          font-style: italic;
      }

      /* Kullanıcı Profil Kapsayıcı */
      .user-profile-wrapper {
          position: relative;
          display: inline-block;
      }

      .user-nav-item {
          cursor: pointer;
          color: var(--text-primary);
          /* Temaya göre yazı rengi */
          transition: color 0.3s ease;

          display: flex;
          /* float veya inline-block yerine esnek kutu */
          align-items: center;
          /* Hepsini dikeyde aynı hizaya getirir */
          gap: 8px;
          padding: 8px;
      }

      .user-nav-item:hover {
          color: var(--accent);
          /* Üzerine gelince tema rengi */
      }

      .user-nav-item-post {
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: end;
          gap: 4px;
          padding: 8px 4px;
          color: var(--text-primary);
          /* Temaya göre yazı rengi */
          transition: color 0.3s ease;
          margin-left: 0.1rem;
      }

      .user-nav-item-post:hover {
          color: var(--accent);
          /* Üzerine gelince tema rengi */
      }

      /* Yüzen Menü Kutusu */
      .user-floating-menu2 {
          position: absolute;
          top: 100%;
          right: -2.5rem;
          background: var(--bg-secondary);
          /* Dark/Light uyumlu arka plan */
          border: 1px solid var(--border);
          /* Temaya uygun kenarlık */
          box-shadow: var(--card-shadow);
          /* Senin tanımladığın gölge */
          border-radius: 12px;
          z-index: 9999;
          min-width: 160px;
          margin-top: 5px;
          overflow: hidden;
          /* Köşelerin taşmaması için */

      }

      /* Menü İçindeki Linkler */
      .menu-inner2 a {
          display: flex;
          align-items: center;
          gap: 10px;
          padding: 8px 10px;
          color: var(--text-primary);
          text-decoration: none;
          font-size: 0.92rem;
          transition: all 0.2s ease;
      }

      .menu-inner2 a i {
          color: var(--text-secondary);
          /* İkonlar biraz daha sönük */
          font-size: 1.1rem;
      }

      /* Link Üzerine Gelince */
      .menu-inner2 a:hover {
          background: var(--bg-secondary);
          /* Arka planı hafifçe değiştir */
          color: var(--accent);
          /* Yazıyı tema rengi yap */
      }

      .menu-inner2 a:hover i {
          color: var(--accent);
          /* İkonu da tema rengi yap */
      }






















      /* Yüzen Menü Kutusu */
      .user-floating-menu {
          position: absolute;
          top: 100%;
          right: 0;
          background: var(--bg-secondary);
          /* Dark/Light uyumlu arka plan */
          border: 1px solid var(--border);
          /* Temaya uygun kenarlık */
          box-shadow: var(--card-shadow);
          /* Senin tanımladığın gölge */
          border-radius: 12px;
          z-index: 9999;
          min-width: 200px;
          margin-top: 0px;
          overflow: hidden;
          /* Köşelerin taşmaması için */
      }

      /* Menü İçindeki Linkler */
      .menu-inner a {
          display: flex;
          align-items: center;
          gap: 10px;
          padding: 8px 10px;
          color: var(--text-primary);
          text-decoration: none;
          font-size: 0.95rem;
          transition: all 0.2s ease;
          margin: 0;
      }

      .menu-inner li {

          padding: 0;

          margin: 0;
      }

      .menu-inner a i {
          color: var(--text-secondary);
          /* İkonlar biraz daha sönük */
          font-size: 1.1rem;
      }

      /* Link Üzerine Gelince */
      .menu-inner a:hover {
          background: var(--bg-secondary);
          /* Arka planı hafifçe değiştir */
          color: var(--accent);
          /* Yazıyı tema rengi yap */
      }

      .menu-inner a:hover i {
          color: var(--accent);
          /* İkonu da tema rengi yap */
      }

      /* Ayırıcı Çizgi */
      .menu-divider {
          height: 1px;
          background: var(--border);
          /* Temaya uygun çizgi rengi */
          margin: 4px 0;
          opacity: 0.5;
      }

      /* Mobil Düzenleme (Dark Mode Uyumlu) */
      @media (max-width: 1200px) {
          .nav-links .user-profile-wrapper {
              display: block;
              margin-left: 25px;
              margin-top: 5px;
              width: fit-content;
          }

          .nav-links .user-floating-menu {
              position: relative;
              top: 0;
              left: 0;
              width: 100%;
              box-shadow: none;
              border: none;
              background: transparent;
              padding-left: 10px;
          }

          .menu-inner a {
              padding: 6px 0;
              /* Mobilde daha sade görünüm */
          }

          .nav-links a {
              display: flex;
              /* Mobilde tam genişlik olduğu için flex daha iyidir */
              align-items: center;
              padding: 0.8rem 0;
              /* Tıklama alanını dikeyde genişletir */
              gap: 10px;
          }
      }



      /* --- LOGIN SAYFASI ÖZEL STİLLERİ --- */

      .contact_container {
          max-width: 600px !important;
          margin: 2rem auto !important;

      }

      .login-container {
          max-width: 450px;
          /* Giriş kutusunun ideal genişliği */
          margin: 4rem auto;
          /* Sayfada dikeyde ve yatayda ortalama */
          padding: 0 1rem;
      }

      .login-container h2 {
          color: var(--text-primary);
          margin-bottom: 0.5rem;
          font-weight: 700;
          letter-spacing: -0.5px;
      }

      /* Şifre alanını mevcut text input stillerinle eşitleyelim */
      .login-container form input[type="password"] {
          width: 100%;
          padding: 0.8rem 1rem;
          border: 1.5px solid var(--border);
          border-radius: 8px;
          background-color: var(--bg-secondary);
          color: var(--text-primary);
          font-size: 1rem;
          outline: none;
          transition: all 0.2s ease;
      }

      /* Şifre alanı odaklanma efekti */
      .login-container form input[type="password"]:focus {
          border-color: var(--accent);
          box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.2);
          background-color: var(--bg-secondary);
      }

      /* Mevcut form yapını login-container içinde biraz daha kompakt yapalım */
      .login-container form {
          min-width: 100%;
          margin: 1.5rem 0;
          padding: 2.5rem;
          /* İç boşluğu biraz artırarak daha kurumsal bir hava verdik */
      }

      /* Mobilde Giriş Yap Butonu Genişliği */
      @media (max-width: 480px) {
          .login-container {
              margin: 2rem auto;
          }

          .login-container form {
              padding: 1.5rem;
          }
      }


      .highlight {
          background-color: #fff176;
          /* Parlak sarı arka plan */
          color: #000;
          /* Siyah metin */
          padding: 0 2px;
          border-radius: 3px;
          font-weight: bold;
      }

      iframe {
          max-width: 100%;
          height: auto;
          aspect-ratio: 16 / 9;
          /* Videonun oranını korur */
      }

      .editor-wrapper {

          margin-top: 10px;

      }


      /* TOAST BİLDİRİM — Dark mode uyumlu, modern görünüm */

      .toast-container {
          position: fixed;
          bottom: 24px;
          right: 24px;
          z-index: 9999;
          display: flex;
          flex-direction: column;
          gap: 12px;
          pointer-events: none;
      }

      .toast-container > * {
          pointer-events: auto;
      }

      .toast {
          background: var(--toast-bg);
          color: var(--text-primary);
          box-shadow: var(--toast-shadow);
          border: 1px solid var(--toast-border);
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);

          max-width: 400px;
          min-width: 280px;
          width: fit-content;
          padding: 14px 18px 14px 14px;
          border-radius: 12px;

          display: flex;
          align-items: center;
          gap: 14px;
          margin-top: 0;

          opacity: 0;
          transform: translateX(120%) scale(0.96);
          transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);

          font-family: 'Inter', sans-serif;
          font-size: 14px;
          font-weight: 500;
          line-height: 1.5;
          letter-spacing: 0.01em;
          white-space: normal;
          word-break: break-word;
      }

      .toast.show {
          opacity: 1;
          transform: translateX(0) scale(1);
      }

      .toast-icon {
          width: 32px;
          height: 32px;
          min-width: 32px;
          min-height: 32px;
          border-radius: 10px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 14px;
          flex-shrink: 0;
          font-weight: 600;
      }

      /* Başarılı — Yeşil (light & dark uyumlu) */
      .toast.success {
          border-left: 4px solid #22c55e !important;
      }

      .toast.success .toast-icon {
          background: color-mix(in srgb, #22c55e 18%, transparent);
          color: #16a34a;
      }

      .dark-mode .toast.success .toast-icon {
          background: color-mix(in srgb, #22c55e 28%, transparent);
          color: #4ade80;
      }

      /* Bilgi — Mavi (light & dark uyumlu) */
      .toast.info {
          border-left: 4px solid #3b82f6 !important;
      }

      .toast.info .toast-icon {
          background: color-mix(in srgb, #3b82f6 18%, transparent);
          color: #2563eb;
      }

      .dark-mode .toast.info .toast-icon {
          background: color-mix(in srgb, #3b82f6 28%, transparent);
          color: #60a5fa;
      }

      /* Hata — Kırmızı (light & dark uyumlu) */
      .toast.error {
          border-left: 4px solid #ef4444 !important;
      }

      .toast.error .toast-icon {
          background: color-mix(in srgb, #ef4444 18%, transparent);
          color: #dc2626;
      }

      .dark-mode .toast.error .toast-icon {
          background: color-mix(in srgb, #ef4444 28%, transparent);
          color: #f87171;
      }


      /* Kod Bloğu Konteynırı (PRE) */
      pre {
          background-color: var(--bg-secondary);
          color: var(--text-primary);
          border: 1px solid var(--border);
          border-radius: 8px;
          padding-top: 1rem;
          padding-bottom: 1rem;
          padding-left: 1rem;
          padding-right: 1rem;

          /* KAYDIRMA İÇİN KRİTİK AYARLAR */
          display: block;
          /* Blok element olduğunu netleştirelim */
          width: 100%;
          /* Genişliği kapsayıcıya sabitleyelim */
          overflow-x: auto;
          /* Yatay taşma olunca kaydır */
          overflow-y: hidden;
          /* Dikeyde kaydırma istemiyoruz */
          white-space: pre;
          /* Satırları kırmadan dümdüz devam ettir */

          /* Modern tarayıcılar için genişlik sınırlama */
          max-width: 100%;
          box-sizing: border-box;
          /* Padding ve border'ı genişliğe dahil et */

          font-family: 'Fira Code', monospace;
          font-size: 0.9rem;
          line-height: 1.5;
          margin: 1rem 0;
          position: relative;
          box-shadow: var(--card-shadow);
      }

      /* Kod metninin kırılmasını kesin olarak engelleme */
      pre code {
          white-space: pre;
          display: block;
          /* Veya inline-block */
          word-wrap: normal;
          word-break: normal;
      }

      /* Mobilde kaydırma çubuğunun görünür olduğundan emin olalım */
      @media (max-width: 768px) {
          pre {
              /* Bazı mobil cihazlar kaydırma çubuğunu gizler, 
           bunu ekleyerek kaydırmanın aktif olduğunu belirtiriz */
              -webkit-overflow-scrolling: touch;
          }
      }

      /* Container içindeki ana içerik alanını (genellikle ilk çocuktur) hedefliyoruz */
      .container> :first-child {
          min-width: 0;
          /* Bu kural olmazsa 1fr olan kolon içeriğe göre sonsuza kadar genişler */
      }

      .container-post-read> :first-child {

          min-width: 0;
      }

      .blog-post {
          min-width: 0;
          width: 100%;
          /* Genişliği kapsayıcıya zorla */
          overflow-x: hidden;
          display: block;
          /* Flex veya grid olma ihtimaline karşı */
      }

      pre {
          /* Mevcut kodlarına ek olarak/güncelleyerek: */
          display: block;
          width: 100%;
          max-width: 100%;
          overflow-x: auto !important;
          /* Kaydırmayı zorla */
          white-space: pre !important;
          /* Satırın kırılmadığından emin ol */

          /* Bazı tarayıcı bugları için */
          table-layout: fixed;
          word-wrap: normal;
      }

      pre code {
          white-space: pre;
          /* Code içinde de kırılma olmasın */
          display: block;
      }


      /* Satır içi (Inline) Kod */
      :not(pre)>code {
          background-color: var(--bg-secondary);
          color: var(--accent);
          padding: 0.2rem 0.4rem;
          border-radius: 4px;
          font-size: 0.85em;
          /* Metin içinde biraz daha dengeli durur */
          border: 1px solid var(--border);
          font-family: inherit;

          /* MOBİL İÇİN KRİTİK: Uzun kodların satır sonuna geldiğinde kırılmasını sağlar */
          word-break: break-word;
          white-space: normal;
      }

      /* --- MOBİL UYUMLULUK (Media Query) --- */
      @media (max-width: 768px) {
          pre {
              padding: 0.8rem;
              /* Mobilde yer kazanmak için padding düşürüldü */
              font-size: 0.8rem;
              /* Mobilde daha iyi sığması için font küçültüldü */
              margin: 0.5rem 0;
          }

          /* Mobilde yatay kaydırma çubuğunu biraz daha belirgin yapabilirsin (opsiyonel) */
          pre::-webkit-scrollbar {
              height: 4px;
          }
      }

      /* Dark Mode için özel dokunuşlar */
      .dark-mode pre {
          border-left: 4px solid var(--accent);
      }

      /* Kaydırma Çubuğu Güzelleştirme (Webkit) */
      pre::-webkit-scrollbar {
          height: 6px;
      }

      pre::-webkit-scrollbar-track {
          background: transparent;
      }

      pre::-webkit-scrollbar-thumb {
          background-color: var(--border);
          border-radius: 10px;
      }


      /* Yüzen Menü Kutusu */
      .user-floating-menu2 {
          position: absolute;
          top: 100%;
          /* Sağa daha çok yaklaşması (kayması) için bu değeri değiştirdik */
          right: -2rem;

          background: var(--bg-secondary);
          border: 1px solid var(--border);
          box-shadow: var(--card-shadow);
          border-radius: 12px;
          z-index: 9999;
          min-width: 160px;
          margin-top: 5px;
          overflow: hidden;
      }


      /* 2. Mobil Cihazlar İçin Özel Ayar (Ekran 768px'den küçükse) */
      @media (max-width: 768px) {
          .user-floating-menu2 {
              left: -1.9rem;
              min-width: 160px;
          }
      }

      /* Menü içindeki formları ve butonları link gibi göster */
      .menu-inner2 form {
          margin: 0;
          padding: 0;
          display: block;
          width: 100%;
      }

      .menu-inner2 button {
          /* Butonun tüm varsayılan özelliklerini sıfırla */
          all: unset;

          /* Linklerin (a etiketi) görünümünü taklit et */
          display: flex;
          align-items: center;
          gap: 10px;
          padding: 8px 10px;
          color: var(--text-primary);
          text-decoration: none;
          font-size: 0.92rem;
          cursor: pointer;
          width: 100%;
          box-sizing: border-box;
          /* Padding'in genişliğe dahil olması için */
          transition: all 0.2s ease;
      }

      /* Buton içindeki ikonların rengi (Aynı a etiketi gibi) */
      .menu-inner2 button i {
          color: var(--text-secondary);
          font-size: 1.1rem;
      }

      /* Butonun üzerine gelince (Hover) oluşacak efekt */
      .menu-inner2 button:hover {
          background: var(--bg-secondary);
          color: var(--accent);
      }

      .menu-inner2 button:hover i {
          color: var(--accent);
      }

      /* Özel renkli buton (Silme butonu gibi) için istisna */
      .menu-inner2 button[style*="color: #ef4444"]:hover {
          color: #ef4444 !important;
      }



      /* Kopyala Butonu Konumlandırma */
      pre {
          position: relative;
          /* Butonun pre içinde kalması için şart */
      }

      .copy-btn {
          position: absolute;
          top: 8px;
          right: 8px;
          background: var(--bg-secondary);
          /* İçerik renginden farklı görünsün */
          color: var(--text-secondary);
          border: 1px solid var(--border);
          padding: 5px 10px;
          border-radius: 6px;
          font-size: 0.75rem;
          cursor: pointer;
          display: flex;
          align-items: center;
          gap: 5px;
          opacity: 0;
          /* Başta gizli */
          transition: all 0.2s ease;
          z-index: 10;
          font-family: 'Segoe UI', sans-serif;
      }

      /* Pre üzerine gelince butonu göster */
      pre:hover .copy-btn {
          opacity: 1;
      }

      .copy-btn:hover {
          background: var(--accent);
          color: white;
          border-color: var(--accent);

      }

      .copy-btn:active {
          transform: scale(0.95);
      }

      /* Başarı durumu (Kopyalandı efekti) */
      .copy-btn.copied {
          background: #2ecc71;
          /* Yeşil tonu */
          color: white;
          border-color: #2ecc71;
      }

      /* Mobil cihazlarda buton her zaman görünsün (çünkü hover yok) */
      @media (max-width: 768px) {
          .copy-btn {
              opacity: 1;
              padding: 4px 8px;
          }
      }


      .flex {

          display: flex;
          gap: 2rem;
          align-items: center;
      }

      /* .flex'in hemen altındaki elemanları (input gruplarını) hedefler */
      .flex>div {
          flex: 1;
          /* Mevcut boşluğu eşit olarak paylaşmalarını sağlar */
          width: 100%;
          /* Garantilemek için genişliği %100 yapar */
      }


      /* Ekran genişliği 600px ve altına düştüğünde çalışır */
      @media (max-width: 600px) {
          .flex {
              flex-direction: column;
              /* Elemanları alt alta dizer */
              align-items: stretch;
              /* Kutuların tüm genişliği kaplamasını sağlar */
          }

          .flex>div {
              width: 100%;
              /* Mobil cihazda her biri tam satır olur */
          }
      }

      /* --- PROFİL SAYFASI GÜNCEL (DARK MODE & ACCENT UYUMLU) --- */

      .profile-container {
          max-width: 1200px;
          /* Diğer konteynırlarınla eşitledim */
          margin: 2rem auto;
          display: flex;
          gap: 2rem;
          padding: 0 1rem;
      }

      /* Yan Menü (Sidebar) */
      .profile-sidebar {
          flex: 1;
          background: var(--bg-secondary);
          padding: 2rem;
          border-radius: 12px;
          box-shadow: var(--card-shadow);
          border: 1px solid var(--border);
          height: fit-content;
          text-align: center;
          color: var(--text-primary);
      }


      .avatar-wrapper-profil {
          position: relative;
          margin-bottom: 0rem;
      }

      .avatar-wrapper-profil img {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          object-fit: cover;
          border: 2px solid var(--bg-secondary);
          /* İçerideki renk */
          outline: 1px solid var(--border);
          /* Dıştaki ince çizgi */
          box-shadow: var(--card-shadow);
          display: block;
          /* Resmin altındaki hayali boşluğu siler */
      }

      .avatar-wrapper {
          position: relative;
          margin-bottom: 1.5rem;
      }

      .avatar-wrapper img {
          width: 160px;
          height: 160px;
          border-radius: 50%;
          object-fit: cover;
          border: 4px solid var(--bg-secondary);
          /* İçerideki renk */
          outline: 2px solid var(--border);
          /* Dıştaki ince çizgi */
          box-shadow: var(--card-shadow);
      }

      .upload-btn {
          display: inline-block;
          margin-top: 10px;
          font-size: 0.9rem;
          color: var(--accent);
          /* Seçilen renk neyse o olur */
          cursor: pointer;
          font-weight: 600;
          transition: color 0.2s;
      }

      .upload-btn:hover {
          color: var(--accent-hover);
          text-decoration: underline;
      }

      /* Kullanıcı Kısa Bilgi */
      .user-info-short h3 {
          color: var(--text-primary);
          font-size: 1.25rem;
          margin-bottom: 5px;
      }

      .user-info-short p {
          color: var(--text-secondary);
          font-size: 0.9rem;
      }

      /* Ana İçerik Alanı */
      .profile-content {
          flex: 2.5;
          display: flex;
          flex-direction: column;
          gap: 2rem;
      }

      .profile-card-comment {
          background: var(--bg-secondary);
          padding: 2rem;
          border-radius: 12px;
          box-shadow: var(--card-shadow);
          border: 1px solid var(--border);
      }

      .profile-card {
          background: var(--bg-secondary);
          padding: 2rem;
          border-radius: 12px;
          box-shadow: var(--card-shadow);
          border: 1px solid var(--border);
      }

      .profile-card h2 {
          margin-bottom: 1.5rem;
          font-size: 1.4rem;
          border-bottom: 2px solid var(--border);
          padding-bottom: 0.8rem;
          color: var(--accent);
          /* Başlıklar seçili renk temasına bürünür */
          font-weight: 700;
      }

      /* Form Grupları */
      .profile-card .form-group {
          margin-bottom: 1.2rem;
      }

      .profile-card label {
          /* Hizalama ayarları */
          display: flex;
          /* İçerikleri yan yana dizer */
          align-items: center;
          /* SVG ve yazıyı dikeyde tam ortalar */
          gap: 6px;

          font-size: 0.85rem;
          margin-bottom: 6px;
          font-weight: 600;
          color: var(--text-secondary);
      }

      /* Input ve Textarea Ayarları */
      .profile-card input,
      .profile-card textarea {
          width: 100%;
          min-width: 320px;
          padding: 0.8rem 1rem;
          background: var(--bg-secondary);
          /* Kart secondary ise input primary olmalı (zıtlık için) */
          border: 1px solid var(--border);
          border-radius: 8px;
          color: var(--text-primary);
          font-family: inherit;
          font-size: 1rem;
          outline: none;
          transition: border-color 0.2s, box-shadow 0.2s;
      }

      .profile-card input:focus,
      .profile-card textarea:focus {
          border-color: var(--accent);
          box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent), transparent 85%);
      }

      .profile-card .form-row {
          display: flex;
          gap: 1rem;
      }

      /* İçindeki elemanlara eşit genişlik veriyoruz */
      .profile-card .form-row .form-group {
          flex: 1;
          min-width: 0;
          /* İçerik taşarsa kutunun patlamasını önler (güvenlik önlemi) */
      }


      /* Mobil cihazlar için (768px ve altı) */
      @media (max-width: 768px) {

          /* Form satırlarını dikey hale getirir */
          .profile-card .form-row {
              flex-direction: column;
          }

          /* Mobilde inputların minimum genişlik zorlamasını kaldırabilirsin (Opsiyonel ama önerilir) */
          .profile-card input,
          .profile-card textarea {
              min-width: 100%;
              /* Kutu genişliğine tam otursun */
          }
      }

      /* Buton Düzenlemeleri */
      .profile-card .btn-primary {
          background: var(--accent);
          color: #fff;
          padding: 0.8rem 1.5rem;
          border: none;
          border-radius: 8px;
          font-weight: 700;
          cursor: pointer;
          transition: all 0.3s ease;
      }

      .profile-card .btn-primary:hover {
          background: var(--accent-hover);
          transform: translateY(-2px);
          box-shadow: 0 4px 12px color-mix(in srgb, var(--accent), transparent 70%);
      }

      .profile-card .btn-dark {
          background: var(--text-primary);
          /* Dark modda açık, light modda koyu renk olur */
          color: var(--bg-secondary);
          padding: 0.8rem 1.5rem;
          border: none;
          border-radius: 8px;
          font-weight: 700;
          cursor: pointer;
          transition: opacity 0.2s;
      }

      .profile-card .btn-dark:hover {
          opacity: 0.9;
      }

      .profile-delete-btn {
          background: none;
          border: none;
          cursor: pointer;
          font-size: 13px;
          font-weight: 600;
          color: var(--accent);
          /* Senin vurgu rengin */
          display: flex;
          align-items: center;
          gap: 6px;
          margin: 10px auto 0;
          padding: 5px 10px;
          border-radius: 6px;
          transition: all 0.2s ease;
          opacity: 0.8;
      }

      .profile-delete-btn i {
          font-size: 14px;
      }

      .profile-delete-btn:hover {
          opacity: 1;
          background-color: color-mix(in srgb, var(--accent), transparent 90%);
          color: var(--accent-hover);
          transform: scale(1.02);
      }


      /* --- Responsive (Mobil) --- */
      @media (max-width: 992px) {
          .profile-container {
              flex-direction: column;
          }

          .profile-sidebar {
              width: 100%;
          }
      }

      @media (max-width: 480px) {
          .profile-card .form-row {
              flex-direction: column;
          }

          .profile-card {
              padding: 1.2rem;
          }
      }


      /* BLOG CARD ETİKET CSS'LERİ */

      .blog-card {
          position: relative;
          /* Etiketin kart içinde konumlanması için şart */
      }

      .category-badge {
          position: absolute;
          top: 15px;
          left: 15px;
          z-index: 10;

          /* 1. Transparan Arka Plan: %80 senin rengin, %20 transparanlık */
          background: color-mix(in srgb, var(--accent), transparent 75%);

          /* 2. Buzlu Cam Efekti: Arkadaki resmi yumuşatır */
          backdrop-filter: blur(8px);
          -webkit-backdrop-filter: blur(8px);
          /* Safari desteği için */

          /* 3. İnce Kenarlık: Transparan elementin sınırlarını belirginleştirir */
          border: 1px solid rgba(255, 255, 255, 0.2);

          color: white;
          padding: 6px 15px;
          border-radius: 10px;
          /* Biraz daha köşeli/modern bir kavis */
          font-size: 0.75rem;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.5px;
          box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
          transition: all 0.3s ease;
      }

      /* Hover durumunda transparanlığı azaltıp rengi doygunlaştıralım */
      .blog-card:hover .category-badge {
          transform: scale(1.05);
          /* Üzerine gelince netleşsin */
          position: absolute;
          top: 15px;
          left: 15px;
          z-index: 10;
          background: color-mix(in srgb, var(--accent), transparent 75%);
          backdrop-filter: blur(8px);
          border: 1px solid rgba(255, 255, 255, 0.2);
          color: white;
          padding: 6px 15px;
          border-radius: 10px;
          font-size: 0.75rem;
          font-weight: 700;
          text-transform: uppercase;
          box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);

          /* SENKRONİZE GEÇİŞ SÜRESİ */
          transition: all 0.3s;


      }

      .blog-card:hover img {
          transform: scale(1.05);
          transition: transform 0.3s;


      }

      .blog-card:hover .category-badge {
          background: color-mix(in srgb, var(--accent), transparent 45%);
          /* Eğer kartla beraber yukarı çıksın istemiyorsan translateY'i silebilirsin */
          transform: scale(1.05);
          box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
          backdrop-filter: none;
      }

      /* Kategori Listesi Genel Kapsayıcı */
      .recent-posts-cat {
          margin-left: 0 !important;
          /* Mevcut negatif margin'i sıfırladık */
          padding: 0;
      }

      .recent-posts-cat li {
          list-style: none;
          padding: 0;
          /* İç boşluğu linke vereceğiz */
          border-bottom: 1px solid var(--border);
          transition: all 0.3s ease;
      }

      /* Kategori Link Yapısı */
      .recent-posts-cat li a {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 12px 10px;
          color: var(--text-primary);
          text-decoration: none;
          border-radius: 8px;
          /* Hover için köşeleri yumuşat */
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }

      /* Hover Efekti: Hafif sağa kayma ve arka plan değişimi */
      .recent-posts-cat li a:hover {
          background: var(--bg-secondary);
          color: var(--accent) !important;
          padding-left: 18px;
          /* Zarif bir sağa kayma hareketi */
      }

      /* Kategori Sayı Balonları (Badge) */
      .category-count {
          /* Balonun rengini ana temanın çok açık bir versiyonu yapıyoruz */
          background: color-mix(in srgb, var(--accent), transparent 88%) !important;
          color: var(--accent) !important;

          padding: 4px 10px !important;
          border-radius: 20px !important;
          /* Daha oval, modern bir kapsül */
          font-size: 0.8rem !important;
          font-weight: 700 !important;
          min-width: 32px;
          text-align: center;
          border: 1px solid color-mix(in srgb, var(--accent), transparent 80%);
          transition: all 0.3s ease;
      }

      /* Hover anında sayının renklerini ters çevir (Vurgu için) */
      .recent-posts-cat li a:hover .category-count {
          background: var(--accent) !important;
          color: white !important;
          transform: scale(1.1);
      }

      /* Son çizgiyi kaldır */
      .recent-posts-cat li:last-child {
          border-bottom: none;
      }


      /*  Yazı listesi İconu  */

      /* CSS dosyana ekle */
      .blog_post_icon {
          color: var(--accent);
          opacity: 0.60;
          /* Şeffaflık oranı */
          transition: opacity 0.3s ease;
          /* Hover efekti için bonus */
          vertical-align: middle;
          padding-right: 2px;
      }

      .checkbox-group {
          display: flex;
          /* Yan yana getirir */
          align-items: center;
          /* Dikeyde tam ortalar */
          gap: 10px;
          /* Aradaki boşluğu ayarlar */
          margin-bottom: 20px;
          cursor: pointer;
      }

      .checkbox-group input[type="checkbox"] {
          width: 18px;
          height: 18px;
          cursor: pointer;
          accent-color: #3b82f6;
          /* Checkbox rengini markana göre değiştirebilirsin */
      }

      .checkbox-group label {
          cursor: pointer;
          font-size: 0.9rem;
          color: #4b5563;
          user-select: none;
          /* Yazıya tıklandığında metnin seçilmesini engeller */
      }




      /* --- ADMİN KART (SİSTEM UYUMLU) --- */

      .admin-card {
          display: flex;
          align-items: center;
          gap: 25px;
          /* Sisteme Bağlandı: Arka plan artık Dark Mode'da kararacak */
          background: var(--bg-secondary);
          padding: 25px;
          border-radius: 12px;
          /* Sisteme Bağlandı: Kenarlık rengi */
          border: 1px solid var(--border);
          /* Sisteme Bağlandı: Senin tanımladığın gölge */
          box-shadow: var(--card-shadow);
          margin-top: 15px;
          transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease;
      }

      .admin-card:hover {
          transform: translateY(-2px);
      }

      /* Profil Resmi */
      .admin-avatar img {
          width: 100px;
          height: 100px;
          border-radius: 50%;
          object-fit: cover;
          /* Sisteme Bağlandı: Seçilen tema rengi (Accent) çerçeve olur */
          padding: 3px;
          background: var(--bg-primary);
          border: 2px solid var(--bg-primary);
          /* İçerideki renk */
          outline: 1px solid var(--border);
          /* Dıştaki ince çizgi */

      }

      /* Profil Resmi */
      .admin-avatar70 img {
          width: 80px;
          height: 80px;
          border-radius: 50%;
          object-fit: cover;
          /* Sisteme Bağlandı: Seçilen tema rengi (Accent) çerçeve olur */
          padding: 3px;
          background: var(--bg-primary);
          border: 2px solid var(--bg-primary);
          /* İçerideki renk */
          outline: 1px solid var(--border);
          /* Dıştaki ince çizgi */
          vertical-align: middle;

      }

      /* Admin Bilgileri */
      .admin-content {
          flex: 1;
      }

      .admin-header div {
          margin: 0 0 8px 0;
          font-size: 1.25rem;
          font-weight: 700;
          /* Sisteme Bağlandı: Ana yazı rengi */
          color: var(--text-primary);
          display: flex;
          align-items: center;
          gap: 10px;
      }

      /* Yazar Rozeti (Dinamik Renkli) */
      .badge {
          font-size: 0.75rem;
          /* Diğer badge'lerinle uyumlu olması için color-mix kullandım */
          background: color-mix(in srgb, var(--accent), transparent 85%);
          color: var(--accent);
          padding: 4px 12px;
          border-radius: 20px;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.5px;
      }

      /* Bio Yazısı */
      .admin-bio {
          /* Sisteme Bağlandı: İkincil yazı rengi (gri tonları) */
          color: var(--text-secondary);
          font-size: 0.95rem;
          line-height: 1.6;
          margin-bottom: 15px;
      }

      /* Alt Bölüm ve Çizgi */
      .admin-footer {
          display: flex;
          justify-content: space-between;
          align-items: center;
          /* Sisteme Bağlandı: Tema border rengi */
          border-top: 1px solid var(--border);
          padding-top: 15px;
      }

      /* Admin Yazı Linki */
      .admin-link {
          /* Sisteme Bağlandı: Tema ana rengi */
          color: var(--accent);
          font-weight: 600;
          text-decoration: none;
          font-size: 0.9rem;
          transition: color 0.2s ease;
      }

      .admin-link:hover {
          color: var(--accent-hover);
          text-decoration: underline;
      }


      .admin-link2 {
          /* Buton varsayılanlarını sıfırlıyoruz */
          background: none;
          border: none;
          padding: 0;
          cursor: pointer;
          display: inline-flex;
          align-items: center;

          /* Senin stil tercihlerin */
          color: var(--accent);
          font-weight: 400;
          text-decoration: none;
          font-size: 0.95rem;
          transition: all 0.2s ease;
      }

      .admin-link2:hover {
          color: var(--accent-hover);
          text-decoration: none;
          /* Alt çizgi yerine hafif bir parlama daha şık durabilir */
          opacity: 0.8;
          transform: translateY(-1px);
          /* Çok hafif bir yükselme efekti */
      }




      /* Sosyal İkonlar */
      .social-links_blog {
          display: flex;
          gap: 15px;
      }

      .social-links_blog a {
          /* Sisteme Bağlandı: Normalde gri, hoverda tema rengi */
          color: var(--text-secondary);
          font-size: 1.2rem;
          text-decoration: none;
          transition: all 0.2s ease;
      }

      .social-links_blog a:hover {
          color: var(--accent);
          transform: scale(1.1);
      }

      /* Mobil Uyumluluk */
      @media (max-width: 600px) {
          .admin-card {
              flex-direction: column;
              text-align: center;
              padding: 20px;
              gap: 15px;
          }

          .admin-header div {
              justify-content: center;
          }

          .admin-footer {
              flex-direction: column;
              gap: 15px;
          }
      }

      /* Yorum Konteynırı */
      .comments-container {
          margin-top: 3rem;
          margin-bottom: 5rem;
      }

      .comments-title {
          color: var(--text-primary);
          margin-bottom: 1.5rem;
          display: flex;
          align-items: center;
          gap: 10px;
      }

      .comments-title i {
          color: var(--accent);
      }

      /* Yorum Listesi */
      .comments-list {
          display: flex;
          flex-direction: column;
          gap: 1.5rem;
      }

      .comment-card {
          margin-top: 0 !important;
          align-items: flex-start !important;
          padding: 1.5rem !important;
      }

      .comment-avatar {
          width: 70px;
          height: 70px;
          object-fit: cover;
          /* Resmin bozulmaması için eklendi */
          border-radius: 50%;
          /* Genelde avatarlar yuvarlak olur, istersen silebilirsin */
      }

      .comment-body {
          width: 100%;
      }

      .comment-header {
          display: flex;
          justify-content: space-between;
          width: 100%;
      }

      .comment-author-name {
          font-size: 1rem;
          margin-bottom: 4px;
      }

      .admin-badge {
          font-size: 0.6rem !important;
          vertical-align: middle;
      }

      .comment-text {
          margin-bottom: 0;
          margin-top: 8px;
          color: var(--text-primary);
          line-height: 1.5;
          /* Okunabilirliği artırmak için ekledim */
          overflow-wrap: anywhere;
      }

      /* Yorum Yoksa */
      .no-comments {
          text-align: center;
          padding: 2rem;
      }

      .no-comments i {
          font-size: 2rem;
          color: var(--text-third);
          margin-bottom: 1rem;
          display: block;
      }

      .no-comments p {
          color: var(--text-secondary);
      }

      /* Mobil Düzenlemeleri */
      @media (max-width: 768px) {

          .comment-card {
              /* Kartın içindeki elemanların ortalanmasını engelle, sola yasla */
              display: flex !important;
              flex-direction: row !important;
              /* Avatar ve metni yan yana tutar */
              align-items: flex-start !important;
              text-align: left !important;
              padding: 1rem !important;
              /* Mobilde biraz daha az boşluk */
          }

          .comment-header {
              /* İsim ve tarih alt alta gelsin ama sola yaslı kalsın */
              flex-direction: column !important;
              align-items: flex-start !important;
              gap: 2px;
          }

          .no-comments {
              /* "Henüz yorum yok" kısmını da sola çekmek istersen */
              text-align: left !important;
          }

          .no-comments i {
              /* İkonu sola yasla */
              margin-left: 0;
              margin-right: auto;
          }
      }


      /* --- MODERN KATEGORİ MENÜSÜ (SİSTEM UYUMLU) --- */

      .sidebar-widget .cat-list {
          list-style: none;
          padding: 0;
          margin: 0;
      }

      /* Ana Kategori Satırı */
      .cat-item {
          border-bottom: 1px solid var(--border);
          transition: background 0.3s ease;
      }

      .cat-header {
          display: flex;
          align-items: center;
          padding: 12px 5px;
      }

      .cat-link {
          display: flex;
          align-items: center;
          flex-grow: 1;
          text-decoration: none;
          color: var(--text-primary);
          font-weight: 400;
          transition: transform 0.2s ease;
      }

      .cat-link:hover {
          transform: translateX(3px);
          /* Hafif sağa kayma efekti */
      }

      /* Renkli Nokta */
      .cat-dot {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          margin-right: 12px;
          flex-shrink: 0;
          box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
      }

      .cat-name {
          font-size: 0.95rem;
          flex-grow: 1;
      }

      /* Sayı Rozeti (Badge) - Sisteme Uygun Renk Miksi */
      .cat-badge {
          background: color-mix(in srgb, var(--accent), transparent 85%);
          color: var(--accent);
          font-size: 11px;
          font-weight: 700;
          padding: 2px 8px;
          border-radius: 10px;
          margin-right: 10px;
          border: 1px solid color-mix(in srgb, var(--accent), transparent 80%);
          opacity: 0.6;
      }

      /* Açma/Kapama İkonu */
      .toggle-submenu {
          cursor: pointer;
          color: var(--text-third);
          font-size: 14px;
          transition: all 0.3s ease;
          padding: 5px;
          display: flex;
          align-items: center;
      }

      .toggle-submenu:hover {
          color: var(--accent);
          transform: scale(1.2);
      }

      /* Alt Kategoriler (Tree View Mantığı) */
      .sub-cat-list {
          list-style: none;
          padding-left: 18px;
          margin: 0 0 10px 18px;
          /* Nokta hizasından başlar */
          /*border-left: 1px dashed var(--border);  Modern kesikli çizgi */
          display: none;
          /* JS ile kontrol edilecek */
      }

      .sub-cat-item {
          padding: 6px 0;
      }

      .sub-cat-link {
          display: flex;
          justify-content: space-between;
          align-items: center;
          text-decoration: none;
          color: var(--text-secondary);
          font-size: 0.9rem;
          transition: color 0.2s ease;
      }

      .sub-cat-link:hover {
          color: var(--accent);
      }

      .sub-cat-badge {
          font-size: 10px;
          background: var(--bg-secondary);
          padding: 1px 6px;
          border-radius: 6px;
          color: var(--text-third);
          border: 1px solid var(--border);
      }

      /* Son öğenin çizgisini kaldıralım */
      .cat-list .cat-item:last-child {
          border-bottom: none;
      }





      /* 404 Sayfasına Özel CSS - Dark Mode Uyumlu */
      .page-404-wrapper {
          display: flex;
          justify-content: center;
          align-items: center;
          text-align: center;
          padding: 80px 20px;
          /* my-5 karşılığı */
          font-family: system-ui, -apple-system, sans-serif;
          /* Modern varsayılan font */
          background-color: var(--bg-secondary);
          /* Arka planı temaya bağladık */
      }

      .page-404-content {
          max-width: 600px;
          width: 100%;
      }

      .page-404-code {
          font-size: 6rem;
          /* display-1 karşılığı */
          font-weight: 700;
          /* fw-bold karşılığı */
          color: var(--text-secondary);
          /* text-muted yerine değişken */
          margin: 0;
          line-height: 1.2;
      }

      .page-404-title {
          font-size: 2rem;
          margin-bottom: 1.5rem;
          /* mb-4 karşılığı */
          color: var(--text-primary);
          /* Siyah yerine değişken */
      }

      .page-404-desc {
          font-size: 1.25rem;
          /* lead karşılığı */
          color: var(--text-secondary);
          /* text-secondary yerine değişken */
          margin-bottom: 3rem;
          /* mb-5 karşılığı */
          line-height: 1.6;
      }

      .page-404-btn {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          padding: 12px 24px;
          /* btn-lg karşılığı */
          font-size: 1.1rem;
          color: #fff;
          /* Yazı rengi hep beyaz kalsın */
          background-color: var(--accent);
          /* Bootstrap mavisi yerine tema rengi */
          border: 1px solid var(--accent);
          border-radius: 6px;
          text-decoration: none;
          transition: background-color 0.2s, border-color 0.2s;
          cursor: pointer;
      }

      .page-404-btn:hover {
          background-color: var(--accent-hover);
          /* Bootstrap mavisi yerine tema hover rengi */
          border-color: var(--accent-hover);
      }

      .page-404-btn svg {
          margin-right: 8px;
          /* me-2 karşılığı */
      }


      /* --- İçindekiler Tablosu (ToC) Tasarımı (Dark Mode Uyumlu) --- */

      /* Mobil Düzenlemeler */
      @media (max-width: 850px) {
          .post_body_nav {
              display: none;
          }
      }

      .toc-wrapper {
          background-color: var(--bg-secondary);
          /* Değişken yaptık: Light'ta gri, Dark'ta koyu lacivert olur */
          border: 1px solid var(--border);
          /* Çerçeve rengi de temaya göre değişir */
          border-radius: 8px;
          padding: 20px;
          margin-bottom: 30px;
          display: inline-block;
          min-width: 300px;
          max-width: 100%;

          /* Dark mode'da kutu havada dursun diye gölge ekledik */
          box-shadow: var(--card-shadow);
          transition: background-color 0.3s ease, border-color 0.3s ease;
      }

      .toc-title {
          margin-top: 0;
          margin-bottom: 10px;
          font-size: 1.2rem;
          font-weight: bold;
          color: var(--text-primary);
          /* Başlık rengi siyaha/beyaza döner */
          border-bottom: 2px solid var(--border);
          /* Alt çizgi rengi uyumlu olur */
          padding-bottom: 5px;
      }

      .toc-list {
          list-style-type: none;
          padding-left: 0;
          margin: 0;
      }

      .toc-list li {
          margin-bottom: 10px;
          line-height: 1.6;
      }

      .toc-list li a {
          text-decoration: none;
          /* Sabit mavi (#007bff) yerine senin tema rengini (kırmızı/pembe) kullandım.
       Böylece siteyle bütün durur. İllaki mavi olsun dersen burayı #3b82f6 yapabilirsin. */
          color: var(--accent);
          transition: color 0.2s;
          font-weight: 400;
      }

      .toc-list li a:hover {
          color: var(--accent-hover);
          /* Hover rengi de değişken oldu */
          text-decoration: underline;
      }

      /* H3 Başlıklar (Alt başlıklar) için girinti */
      .toc-list li.toc-sub {
          padding-left: 20px;
          font-size: 0.95em;
          position: relative;
      }

      /* Alt başlıkların başındaki tire (-) işareti */
      .toc-list li.toc-sub::before {
          content: "-";
          position: absolute;
          left: 5px;
          color: var(--text-third);
          /* Gri tonu değişkene bağladık */
      }

      /* Tıklayınca yumuşak kaydırma */
      html {
          scroll-behavior: smooth;
      }

      /* Blog yazısı içindeki H2 ve H3 başlıklarına "görünmez" tepe boşluğu */
      .post-body h2,
      .post-body h3 {
          scroll-margin-top: 100px;
      }

      .post-body-fixed h2,
      .post-body-fixed h3 {
          scroll-margin-top: 20px;
      }




      /* --- RESET / HATA SAYFASI KAPSAYICILARI --- */

      /* Sayfa wrapper: Ekranı ortalar ve arka planı ayarlar */
      .reset-page-wrapper {
          display: flex;
          justify-content: center;
          align-items: center;
          min-height: 80vh;
          /* Ekranın çoğunu kaplasın */
          padding: 20px;
          background-color: var(--bg-primary);
          /* Sayfa arkaplanı ile uyumlu */
      }

      /* Kart yapısı: Login ve Blog kartlarıyla aynı dokuda */
      .reset-card {
          background: var(--bg-secondary);
          /* Dark Mode'da kararacak */
          padding: 40px 30px;
          border-radius: 12px;
          /* Senin genel border-radius ayarın */
          box-shadow: var(--card-shadow);
          border: 1px solid var(--border);
          /* İnce çerçeve */

          width: 100%;
          max-width: 450px;
          /* İstenilen ince yapı */
          text-align: center;
          /* İçeriği ortala */

          display: flex;
          flex-direction: column;
          align-items: center;
          /* Yatayda tam ortalama */
      }

      /* Başlık Stili */
      .reset-card h2 {
          margin-top: 15px;
          margin-bottom: 10px;
          font-size: 1.5rem;
          font-weight: 700;
          color: var(--text-primary);
          /* Siyah/Beyaz değişimi */
      }

      /* Açıklama Metni */
      .reset-description {
          font-size: 0.95rem;
          color: var(--text-secondary);
          /* Gri tonları */
          margin-bottom: 25px;
          line-height: 1.6;
      }

      /* Hata Mesajları (Form altı küçük yazılar) */
      .form-text-muted {
          font-size: 0.85rem;
          color: var(--text-third);
          margin-top: 5px;
      }

      /* --- İKON ALANI (Sistem Rengine Duyarlı) --- */

      .error-icon-wrapper {
          width: 80px;
          height: 80px;
          /* Hafif kırmızı zemin - Opaklık ile ayarlandı */
          background-color: rgba(239, 68, 68, 0.1);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 15px;
      }

      .error-icon-svg {
          width: 40px;
          height: 40px;
          stroke: #ef4444;
          /* Sabit hata kırmızısı */
          stroke-width: 2;
      }

      /* Eğer ikonun "Accent" (Tema) renginde olmasını istersen üsttekini silip bunu kullan: */
      /* .error-icon-wrapper {
    background-color: color-mix(in srgb, var(--accent), transparent 90%);
}
.error-icon-svg {
    stroke: var(--accent);
}
*/

      /* --- BUTON STİLİ (.btn-primary ile eşleşti) --- */

      .action-btn {
          display: inline-flex;
          justify-content: center;
          align-items: center;
          width: 100%;
          padding: 0.8rem 1.5rem;

          background-color: var(--accent);
          /* Senin tema rengin */
          color: #ffffff;

          text-decoration: none;
          font-size: 1rem;
          font-weight: 600;
          border: none;
          border-radius: 8px;
          cursor: pointer;
          transition: all 0.2s ease;
      }

      .action-btn:hover {
          background-color: var(--accent-hover);
          transform: translateY(-2px);
          box-shadow: 0 4px 12px color-mix(in srgb, var(--accent), transparent 70%);
      }

      .action-btn:active {
          transform: scale(0.98);
      }



      .no-content-wrapper {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          text-align: center;
          padding: 60px 20px;
          color: #6c757d;
          /* Gri yumuşak ton */
          width: 100%;
          grid-column: 1 / -1;
          /* Grid yapısını bozmaması için tam genişlik */
      }

      .no-content-icon svg {
          width: 64px;
          height: 64px;
          color: #cbd5e0;
          /* İkon için daha açık bir gri */
          margin-bottom: 20px;
      }

      .no-content-wrapper h3 {
          font-size: 1.5rem;
          font-weight: 600;
          color: #2d3748;
          margin-bottom: 10px;
      }

      .no-content-wrapper p {
          font-size: 1rem;
          color: #718096;
          max-width: 400px;
          line-height: 1.6;
      }




      .header-ad {
          /* Çakışan margin düzeltildi, alttaki geçerli olanı bıraktım */
          margin: 4rem auto;
          width: calc(100% - 40px);
          max-width: 728px;
          height: 90px;
          /* Sabit renk yerine değişken kullanıyoruz */
          background-color: var(--bg-secondary);
          border: 2px dashed var(--border);
          display: flex;
          align-items: center;
          justify-content: center;
          /* Metin rengi için değişken */
          color: #a8b4c0;
          font-weight: bold;
          border-radius: 8px;
      }

      .sidebar-ad {
          margin: 20px auto;
          width: 100%;
          height: 250px;
          /* Sabit renk yerine değişken kullanıyoruz */
          background-color: var(--bg-secondary);
          border: 2px dashed var(--border);
          display: flex;
          align-items: center;
          justify-content: center;
          /* Metin rengi için değişken */
          color: #a8b4c0;
          font-weight: bold;
          border-radius: 8px;
      }

      .content-ad {
          width: 100%;
          max-width: 728px;
          height: 90px;
          /* Sabit renk yerine değişken kullanıyoruz */
          background-color: var(--bg-secondary);
          border: 2px dashed var(--border);
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 40px auto;
          /* Metin rengi için değişken */
          color: #a8b4c0;
          font-weight: bold;
          border-radius: 8px;
      }

      .footer-ad {
          width: calc(100% - 40px);
          max-width: 728px;
          height: 90px;
          /* Sabit renk yerine değişken kullanıyoruz */
          background-color: var(--bg-secondary);
          border: 2px dashed var(--border);
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 20px auto;
          /* Metin rengi için değişken */
          color: #a8b4c0;
          font-weight: bold;
          border-radius: 8px;
      }

      .ad-label {
          display: block;
          font-size: 12px;
          color: #999;
          margin-top: 20px;
          text-transform: uppercase;
          text-align: center;
      }

      .ad-label-header {
          display: block;
          font-size: 12px;
          color: #999;
          margin-top: 0px;
          text-transform: uppercase;
          text-align: center;
      }

      .username {
          font-size: 0.96rem;
          border: 0 none;
          background-color: var(--bg-secondary);
          color: var(--text-primary);
          cursor: pointer;
      }

      .arrow-icon {
          margin-left: -10px;

      }

      .arrow-icon2 {
          vertical-align: middle;
      }

      @media (max-width: 768px) {

          /* 1. Önce Navigasyon çubuğunun boyunu mobilde biraz kısalım (Opsiyonel ama şık durur) */
          nav {
              height: 60px !important;
              /* PHP'den gelen değeri ezer */
              padding: 0 1rem;
          }

          /* 2. Şimdi Logoyu küçültüyoruz */
          .logo {
              /* Genişliği manuel ayarlıyoruz. 
           Logon çok yatay ise 140px, daha kare ise 50-60px yapabilirsin. */
              width: 140px !important;

              /* Yüksekliği nav barın içine sığacak şekilde ayarlıyoruz */
              height: 45px !important;
          }

          /* 3. Görselin bu yeni küçük kutuya tam oturmasını sağlıyoruz */
          .logo_img {
              background-size: contain;
              background-position: left center;
          }

          .blog-grid {
              /* Mobilde yan yana zorlamasın, tek sütun olsun */
              grid-template-columns: 1fr;

              /* Kartlar arasındaki boşluğu mobilde biraz azaltalım, yer kazanalım */
              gap: 1.5rem;
          }

          .blog-grid {
              display: grid;
              grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
              gap: 2rem;
          }



          .blog-card {

              min-height: auto !important;

              /* Mobilde "hover" efekti (yukarı kalkma) bazen takılma hissi verir.
           İstersen bunu kapatabilirsin (Opsiyonel) */
              transform: none !important;
          }
      }

      /* Çok küçük ekranlar için (Eski telefonlar vs.) ekstra güvenlik */
      @media (max-width: 480px) {
          .logo-text {
              font-size: 1.2rem;
          }

          nav {
              padding: 0 0.5rem;
          }
      }


      /* ---  MODERN PAGINATION --- */

      /* 1. Kapsayıcı: Flexbox ile ortala */
      .pagination-wrapper {
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 8px;
          /* Butonlar arası boşluk */
          margin-top: 2rem;
          margin-bottom: 3rem;
          font-family: inherit;
          /* Ana fontu kullan */
      }

      /* 2. Tüm Butonlar İçin Ortak Stil */
      .pagination-wrapper .nav-btn,
      .pagination-wrapper .num-btn,
      .pagination-wrapper .dots {
          display: flex;
          align-items: center;
          justify-content: center;
          min-width: 40px;
          /* Dokunmatik için ideal genişlik */
          height: 40px;
          padding: 0 12px;

          border-radius: 10px;
          /* Senin genel radius ayarın */
          border: 1px solid var(--border);
          /* Senin border değişkenin */
          background-color: var(--bg-secondary);
          /* Senin ikincil arkaplanın */
          color: var(--text-primary);
          /* Senin ana yazı rengin */

          text-decoration: none;
          font-size: 0.95rem;
          font-weight: 600;
          transition: all 0.2s ease;
          user-select: none;
          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
          /* Hafif gölge */
      }

      /* 3. Link Olanların Hover Efekti (Aktif ve Disabled hariç) */
      .pagination-wrapper a.nav-btn:hover:not(.disabled),
      .pagination-wrapper a.num-btn:hover {
          background-color: var(--bg-secondary);
          /* Hoverda ana zemin rengi */
          border-color: var(--accent);
          /* Hoverda senin accent rengin */
          color: var(--accent);
          /* Yazı da accent rengi olur */
          transform: translateY(-2px);
          /* Senin buton efektin */
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      }

      /* 4. Aktif Sayfa (Seçili Olan) */
      .pagination-wrapper .num-btn.active {
          background-color: var(--accent);
          /* Senin ana rengin */
          color: #ffffff;
          /* Beyaz yazı */
          border-color: var(--accent);
          pointer-events: none;
          /* Tıklanamaz */
          box-shadow: 0 4px 10px color-mix(in srgb, var(--accent), transparent 60%);
          /* Accent renginde gölge */
      }

      /* 5. Noktalar (...) */
      .pagination-wrapper .dots {
          border: none;
          background: transparent;
          color: var(--text-third);
          /* Senin 3. derece yazı rengin */
          box-shadow: none;
          font-weight: bold;
          letter-spacing: 1px;
      }

      /* 6. Önceki/Sonraki Butonları (Pasif Durum) */
      .pagination-wrapper .nav-btn.disabled {
          opacity: 0.5;
          cursor: not-allowed;
          background-color: var(--bg-secondary);
          color: var(--text-third);
          box-shadow: none;
      }

      /* --- MOBİL UYUMLULUK --- */
      @media (max-width: 480px) {
          .pagination-wrapper {
              gap: 5px;
              /* Mobilde arayı sıkılaştır */
              width: 100%;
              padding: 0 10px;
          }

          .pagination-wrapper .nav-btn,
          .pagination-wrapper .num-btn {
              min-width: 34px;
              /* Mobilde biraz küçült */
              height: 34px;
              font-size: 0.85rem;
              padding: 0 6px;
          }

          /* Mobilde "Önceki/Sonraki" yazıları sığmazsa sadece ikon kalsın diye fontu küçültüyoruz */
          .pagination-wrapper .nav-btn {
              font-size: 0.8rem;
          }
      }



      /* --- ÖZEL KATEGORİ VİTRİNİ (SİSTEM UYUMLU - TAM GENİŞLİK) --- */

      /* Yeni Container: Sidebar payı bırakmaz, tam 1200px kullanır */
      .container-showcase {
          max-width: 1200px;
          margin: 1rem auto 4rem auto;
          /* Üst 0, Alt 3rem, Sağ-Sol Oto */
          padding: 0 1rem;
          /* Mobilde kenarlardan boşluk */
          width: 100%;
      }

      .special-category-grid {
          display: grid;
          /* 3 Eşit Sütun */
          grid-template-columns: repeat(3, 1fr);
          gap: 25px;
          width: 100%;
      }

      .special-card {
          background: var(--bg-secondary);

          border-radius: 8px;
          overflow: hidden;
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
          transition: transform 0.2s, box-shadow 0.2s;
          text-decoration: none;
          color: inherit;
          display: flex;
          flex-direction: column;
          height: 100%;
          /* Kartların boyunu eşitle */
      }

      .special-card:hover {
          transform: translateY(-5px);
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      }

      .special-card-img {
          height: 220px;
          overflow: hidden;
          position: relative;
          flex-shrink: 0;
          /* Resim alanı küçülmesin */
      }

      .special-card-img img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: transform 0.3s;
      }

      .special-card:hover .special-card-img img {
          transform: scale(1.05);
      }

      .special-date {
          position: absolute;
          bottom: 10px;
          right: 10px;
          background: rgba(0, 0, 0, 0.7);
          color: #fff;
          padding: 3px 8px;
          border-radius: 4px;
          font-size: 0.75rem;
      }

      .special-card-content {
          padding: 15px;
          flex-grow: 1;
          /* İçerik alanı kalan boşluğu doldursun */
          display: flex;
          flex-direction: column;
      }

      .special-card-content h3 {
          margin: 0;
          margin-bottom: 0.2rem;
          font-size: 1.1rem;
          font-weight: 600;
          line-height: 1.4;
          color: var(--text-primary);

          /* Başlığı 2 satırla sınırla (Opsiyonel ama şık durur) */
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
      }

      .special-card-content .blog-excerpt {
          color: var(--text-secondary);
          line-height: 1.6;
          margin-top: -7px;

          /* --- MODERN METİN KESME (LINE CLAMP) --- */
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;


          margin-bottom: 1rem;
      }

      /* Kategori Başlığı */
      .cat_container {
          max-width: 1200px;
          margin: 2rem auto 1rem auto;
          padding: 0 1rem;
          font-size: 1.5rem;
          font-weight: 600;
          color: var(--accent);
          /* Temanızdaki renk */
      }

      /* Tablet Uyumluluğu */
      @media (max-width: 992px) {
          .special-category-grid {
              grid-template-columns: repeat(2, 1fr);
              /* Tablette 2'li */
          }
      }

      /* Mobil Uyumluluk */
      @media (max-width: 576px) {
          .special-category-grid {
              grid-template-columns: 1fr;
              /* Mobilde tekli */
          }

          .special-card-img {
              height: 200px;
          }
      }



      /* --- POPÜLER YAZILAR (MOST READ) BİLEŞENİ --- */

      .popular-list {
          list-style: none;
          padding: 0;
          margin: 0;
      }

      .popular-list li {
          border-bottom: 1px solid var(--border);
          padding: 12px 0;
          transition: transform 0.2s ease;
      }

      .popular-list li:last-child {
          border-bottom: none;
      }

      /* Link Yapısı: Yan Yana (Flex) */
      .popular-list li a {
          display: flex;
          align-items: center;
          gap: 15px;
          text-decoration: none;
          color: var(--text-primary);
      }

      /* Hover Efekti */
      .popular-list li a:hover .popular-title {
          color: var(--accent);
      }

      /* Thumbnail (Resim Kutusu) */
      .popular-thumb {
          width: 70px;
          height: 70px;
          flex-shrink: 0;
          border-radius: 8px;
          overflow: hidden;
          border: 1px solid var(--border);
          position: relative;
          /* Sıra numarası koymak istersen lazım olur */
      }

      .popular-thumb img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: transform 0.3s ease;
      }

      .popular-list li a:hover .popular-thumb img {
          transform: scale(1.1);
      }

      /* Yazı Alanı */
      .popular-info {
          display: flex;
          flex-direction: column;
          justify-content: center;
      }

      .popular-title {
          font-size: 0.95rem;
          font-weight: 600;
          line-height: 1.4;
          margin-bottom: 5px;

          /* 2 Satır sınırı */
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
      }

      .popular-meta {
          font-size: 0.8rem;
          color: var(--text-third);
          display: flex;
          align-items: center;
          gap: 5px;
      }

      .popular-meta svg {
          vertical-align: middle;
          width: 16px;
          height: 16px;
      }

      /* Bülten SweetAlert - Tema uyumlu popup */
      .newsletter-swal-popup {
          border: 1px solid var(--border) !important;
          border-radius: 12px !important;
          box-shadow: var(--card-shadow) !important;
      }

      /* ==========================================
         COOKIE CONSENT BANNER
         ========================================== */
      .cookie-consent {
          position: fixed;
          bottom: 0;
          left: 0;
          right: 0;
          z-index: 9999;
          padding: 0;
          transform: translateY(100%);
          opacity: 0;
          transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
      }

      .cookie-consent.show {
          transform: translateY(0);
          opacity: 1;
      }

      .cookie-consent.hide {
          transform: translateY(100%);
          opacity: 0;
      }

      .cookie-consent-inner {
          background: var(--bg-secondary);
          border-top: 1px solid var(--border);
          box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
          padding: 1.25rem 1.5rem;
      }

      .dark-mode .cookie-consent-inner {
          box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
      }

      .cookie-consent-container {
          max-width: 1200px;
          margin: 0 auto;
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 1.5rem;
          flex-wrap: wrap;
      }

      .cookie-consent-content {
          flex: 1;
          min-width: 280px;
          display: flex;
          align-items: flex-start;
          gap: 1rem;
      }

      .cookie-consent-icon {
          flex-shrink: 0;
          width: 48px;
          height: 48px;
          background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent), black 15%));
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      }

      .cookie-consent-icon svg {
          width: 26px;
          height: 26px;
          fill: white;
      }

      .cookie-consent-text h3 {
          font-size: 1rem;
          font-weight: 600;
          color: var(--text-primary);
          margin-bottom: 0.35rem;
      }

      .cookie-consent-text p {
          font-size: 0.875rem;
          color: var(--text-secondary);
          line-height: 1.5;
          margin: 0;
      }

      .cookie-consent-text a {
          color: var(--accent);
          text-decoration: none;
          font-weight: 500;
          transition: opacity 0.2s ease;
      }

      .cookie-consent-text a:hover {
          opacity: 0.8;
          text-decoration: underline;
      }

      .cookie-consent-actions {
          display: flex;
          gap: 0.75rem;
          flex-shrink: 0;
      }

      .cookie-btn {
          padding: 0.75rem 1.5rem;
          border-radius: 10px;
          font-size: 0.9rem;
          font-weight: 600;
          cursor: pointer;
          transition: all 0.25s ease;
          border: none;
          display: inline-flex;
          align-items: center;
          gap: 0.5rem;
      }

      .cookie-btn-accept {
          background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent), black 10%));
          color: white;
          box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
      }

      .cookie-btn-accept:hover {
          transform: translateY(-2px);
          box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
      }

      .cookie-btn-accept:active {
          transform: translateY(0);
      }

      .cookie-btn-decline {
          background: var(--bg-primary);
          color: var(--text-primary);
          border: 1px solid var(--border);
      }

      .cookie-btn-decline:hover {
          background: var(--border);
      }

      /* Mobil Uyumluluk */
      @media (max-width: 768px) {
          .cookie-consent-inner {
              padding: 1rem;
          }

          .cookie-consent-container {
              flex-direction: column;
              text-align: center;
              gap: 1rem;
          }

          .cookie-consent-content {
              flex-direction: column;
              align-items: center;
          }

          .cookie-consent-icon {
              width: 42px;
              height: 42px;
          }

          .cookie-consent-icon svg {
              width: 22px;
              height: 22px;
          }

          .cookie-consent-text h3 {
              font-size: 0.95rem;
          }

          .cookie-consent-text p {
              font-size: 0.8rem;
          }

          .cookie-consent-actions {
              width: 100%;
              flex-direction: column;
          }

          .cookie-btn {
              width: 100%;
              justify-content: center;
              padding: 0.85rem 1rem;
          }
      }

      @media (max-width: 480px) {
          .cookie-consent-inner {
              padding: 0.875rem;
          }

          .cookie-consent-icon {
              width: 38px;
              height: 38px;
              border-radius: 10px;
          }

          .cookie-consent-icon svg {
              width: 20px;
              height: 20px;
          }
      }