/* ==========================================================================
   BLOG (.blg) ve BLOG KARTI (.bkr)
   --------------------------------------------------------------------------
   Iki kolon: solda arama + kategoriler + son yazilar, sagda icerik.
   Liste gorunumunde ilk yazi genis bir vitrin karti olur; kalanlar izgara.
   Detay gorunumunde ayni kolonda yazi tipografisi calisir.
   ========================================================================== */
.blg { display: grid; grid-template-columns: 264px minmax(0, 1fr);
       gap: var(--s5); align-items: start; }

.blg__ana { min-width: 0; display: flex; flex-direction: column; gap: var(--s5); }


/* ==========================================================================
   1. SOL SUTUN
   ========================================================================== */
.blg__yan { position: sticky; top: calc(var(--hd-h-s) + var(--s4)); }
.blg__yg  { display: flex; flex-direction: column; gap: var(--s4); }

.blg__krt { padding: var(--s4); background: var(--white);
            border: 1px solid var(--line); border-radius: var(--r3); }

.blg__krt-b { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3);
              font-size: 10px; font-weight: var(--fw-800); letter-spacing: var(--ls-cap);
              text-transform: uppercase; color: var(--tx-faint); }
.blg__krt-b svg { color: var(--brand); }

/* -- Arama -- */
.blg__ara { position: relative; display: flex; align-items: center; }
.blg__ara-i { position: absolute; left: var(--s3); color: var(--tx-faint); pointer-events: none; }
.blg__ara input { width: 100%; appearance: none; min-height: 42px;
                  padding: 0 var(--s3) 0 36px;
                  font-family: var(--font); font-size: var(--fs-3xs);
                  font-weight: var(--fw-500); color: var(--tx);
                  background: var(--mist); border: 1.5px solid transparent;
                  border-radius: var(--r2);
                  transition: border-color var(--t1), background var(--t1), box-shadow var(--t1); }
.blg__ara input:hover { background: var(--mist-2); }
.blg__ara input:focus { outline: none; background: var(--white); border-color: var(--brand);
                        box-shadow: 0 0 0 3px var(--brand-50); }

/* -- Kategoriler -- */
/* Liste kendi icinde KAYDIRILMAZ: uzarsa sutun uzar, sutun da ekrana
   sigmadiginda dipten yapisir (js/app.js -> yapiskanSutunlar). */
.blg__ktl { list-style: none; display: flex; flex-direction: column; gap: 1px; }
.blg__ktl a { display: flex; align-items: center; justify-content: space-between;
              gap: var(--s2); padding: 7px var(--s3);
              font-size: var(--fs-3xs); line-height: 1.4; color: var(--tx-soft);
              border-radius: var(--r2); border-left: 2px solid transparent;
              transition: all var(--t1); }
.blg__ktl a:hover { color: var(--brand-700); background: var(--mist); }
.blg__ktl a.on { font-weight: var(--fw-800); color: var(--brand-700);
                 background: var(--brand-50); border-left-color: var(--brand); }
.blg__ktl em { flex: none; font-size: 9px; font-style: normal; font-weight: var(--fw-700);
               color: var(--tx-faint); }
.blg__ktl a:hover em, .blg__ktl a.on em { color: var(--brand); }

/* -- Son yazilar -- */
.blg__sn { list-style: none; display: flex; flex-direction: column; }
.blg__sn a { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) 0;
             border-bottom: 1px solid var(--line-soft); }
.blg__sn li:last-child a { border-bottom: 0; }
.blg__sn img, .blg__sn-b { flex: none; width: 52px; height: 52px; border-radius: var(--r2);
                           object-fit: cover; background: var(--mist-2); }
.blg__sn-b { display: inline-flex; align-items: center; justify-content: center;
             color: var(--tx-faint); }
.blg__sn b { display: block; font-size: var(--fs-3xs); font-weight: var(--fw-700);
             line-height: 1.4; color: var(--tx); transition: color var(--t1); }
.blg__sn a:hover b { color: var(--brand-700); }
.blg__sn i { display: block; margin-top: 2px; font-size: 9px; font-style: normal;
             color: var(--tx-faint); }

.blg__dst { background: var(--mist); }
.blg__dst p { margin: 0 0 var(--s3); font-size: 10px; line-height: 1.6; color: var(--tx-mute); }

/* Dar ekranda acilir baslik */
.blg__ac { display: none; align-items: center; gap: 7px; width: 100%;
           min-height: 44px; padding: 0 var(--s4);
           font-family: var(--font); font-size: var(--fs-2xs); font-weight: var(--fw-700);
           color: var(--tx); background: var(--white);
           border: 1.5px solid var(--line); border-radius: var(--r2); }
.blg__ac svg { color: var(--brand); }


/* ==========================================================================
   2. VITRIN KARTI
   ========================================================================== */
.blg__one { display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
            overflow: hidden; background: var(--white);
            border: 1px solid var(--line); border-radius: var(--r4);
            transition: border-color var(--t1), box-shadow var(--t1), transform var(--t1); }
.blg__one:hover { border-color: var(--brand-200); box-shadow: var(--sh2);
                  transform: translateY(-2px); }

.blg__one-g { position: relative; aspect-ratio: 4 / 3; overflow: hidden;
              background: var(--mist-2); }
.blg__one-g img { width: 100%; height: 100%; object-fit: cover;
                  transition: transform var(--t3); }
.blg__one:hover .blg__one-g img { transform: scale(1.04); }
.blg__one-e { position: absolute; left: var(--s4); top: var(--s4);
              padding: 4px var(--s3); font-size: 9px; font-weight: var(--fw-800);
              letter-spacing: var(--ls-cap); text-transform: uppercase;
              color: var(--koyu); background: var(--brand); border-radius: var(--rp); }

.blg__one-i { display: flex; flex-direction: column; justify-content: center;
              gap: var(--s3); padding: var(--s6); }
.blg__one-i h2 { font-size: var(--fs-h4); font-weight: var(--fw-800);
                 line-height: 1.28; letter-spacing: var(--ls-tt); color: var(--tx); }
.blg__one:hover .blg__one-i h2 { color: var(--brand-700); }
.blg__one-i p { font-size: var(--fs-3xs); line-height: 1.7; color: var(--tx-mute); }

.blg__kt { align-self: flex-start; padding: 3px var(--s3);
           font-size: 9px; font-weight: var(--fw-800); letter-spacing: var(--ls-cap);
           text-transform: uppercase; color: var(--brand-700);
           background: var(--brand-50); border-radius: var(--rp);
           transition: all var(--t1); }
a.blg__kt:hover { color: var(--white); background: var(--brand); }

.blg__meta { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
             font-size: 10px; color: var(--tx-mute); }
.blg__meta span { display: inline-flex; align-items: center; gap: 4px; }
.blg__meta svg { color: var(--tx-faint); }

.blg__say { font-size: var(--fs-3xs); color: var(--tx-mute); }
.blg__say b { font-weight: var(--fw-800); color: var(--tx); }


/* ==========================================================================
   3. KART IZGARASI
   ========================================================================== */
.blg__iz { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
           gap: var(--s4); }

.bkr { display: flex; flex-direction: column; overflow: hidden;
       background: var(--white); border: 1px solid var(--line);
       border-radius: var(--r3);
       transition: border-color var(--t1), box-shadow var(--t1), transform var(--t1); }
.bkr:hover { border-color: var(--brand-200); box-shadow: var(--sh2);
             transform: translateY(-3px); }

.bkr__g { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--mist-2); }
.bkr__g img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t3); }
.bkr:hover .bkr__g img { transform: scale(1.05); }
.bkr__bos { position: absolute; inset: 0; display: flex; align-items: center;
            justify-content: center; color: var(--tx-faint); }
.bkr__kt { position: absolute; left: var(--s3); bottom: var(--s3);
           padding: 3px var(--s3); font-size: 9px; font-weight: var(--fw-800);
           letter-spacing: var(--ls-cap); text-transform: uppercase;
           color: var(--koyu); background: rgba(255,255,255,.92);
           border-radius: var(--rp); }

.bkr__i { display: flex; flex-direction: column; gap: 6px; flex: 1;
          padding: var(--s4); }
.bkr__b { font-size: var(--fs-2xs); font-weight: var(--fw-800); line-height: 1.35;
          color: var(--tx); transition: color var(--t1); }
.bkr:hover .bkr__b { color: var(--brand-700); }
.bkr__o { flex: 1; font-size: var(--fs-3xs); line-height: 1.6; color: var(--tx-mute); }
.bkr__m { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3);
          padding-top: var(--s2); font-size: 10px; color: var(--tx-faint);
          border-top: 1px solid var(--line-soft); }
.bkr__m span { display: inline-flex; align-items: center; gap: 4px; }

.blg__yok { display: flex; align-items: center; justify-content: center; gap: var(--s3);
            padding: var(--s8) var(--s5); font-size: var(--fs-2xs); color: var(--tx-mute);
            background: var(--white); border: 1px dashed var(--line);
            border-radius: var(--r3); }
.blg__yok svg { color: var(--brand); }


/* ==========================================================================
   4. YAZI DETAYI
   ========================================================================== */
/* Okuma ilerlemesi — basligin DIBINE yapisik ince bir cizgi.
   --hd-yer headerin KUCULTULMEMIS yuksekligidir ve kaydirmayla degismez;
   cubuk ona baglaninca header kuculunce arada bosluk kaliyordu. JS cubugu
   headerin icine tasir ve asagidaki --hd sinifi devreye girer: cubuk artik
   headerin alt kenarina gore konumlanir, kucultme animasyonunu da izler. */
.blg__ilr { position: fixed; left: 0; right: 0; top: var(--hd-yer, var(--hd-h));
            z-index: var(--z-hd); height: 3px; pointer-events: none; }
.blg__ilr--hd { position: absolute; top: 100%; z-index: 1; }
.blg__ilr span { display: block; width: 0; height: 100%;
                 background: var(--g-brand); transition: width .1s linear; }

.blg__yz { padding: var(--s7); background: var(--white);
           border: 1px solid var(--line); border-radius: var(--r4); }

.blg__bas { display: flex; flex-direction: column; gap: var(--s3);
            padding-bottom: var(--s5); margin-bottom: var(--s5);
            border-bottom: 1px solid var(--line-soft); }
.blg__bas h1 { font-size: var(--fs-h2); font-weight: var(--fw-800);
               line-height: 1.2; letter-spacing: var(--ls-tt); color: var(--tx); }

.blg__kpk { margin-bottom: var(--s6); overflow: hidden; border-radius: var(--r3); }
.blg__kpk img { display: block; width: 100%; height: auto; }

/* -- Govde tipografisi: icerik editorden geldigi icin ETIKETE baglanir -- */
.blg__gvd { font-size: var(--fs-2xs); line-height: 1.9; color: var(--tx-soft); }
.blg__gvd > * + * { margin-top: var(--s4); }
.blg__gvd h2 { margin-top: var(--s7); font-size: var(--fs-h4); font-weight: var(--fw-800);
               line-height: 1.3; letter-spacing: var(--ls-tt); color: var(--tx); }
.blg__gvd h3 { margin-top: var(--s6); font-size: var(--fs-s); font-weight: var(--fw-800);
               color: var(--brand-700); }
.blg__gvd h4 { margin-top: var(--s5); font-size: var(--fs-2xs); font-weight: var(--fw-800);
               color: var(--tx); }
.blg__gvd b, .blg__gvd strong { font-weight: var(--fw-700); color: var(--tx); }
.blg__gvd a { color: var(--brand-700); text-decoration: underline; text-underline-offset: 3px; }
.blg__gvd a:hover { color: var(--brand); }
.blg__gvd img { display: block; width: 100%; height: auto; margin-block: var(--s5);
                border-radius: var(--r3); }
.blg__gvd ul, .blg__gvd ol { display: flex; flex-direction: column; gap: var(--s2);
                             padding-left: 0; list-style: none; }
.blg__gvd li { position: relative; padding-left: var(--s5); }
.blg__gvd ul > li::before { content: ''; position: absolute; left: 5px; top: .78em;
                            width: 6px; height: 6px; border-radius: var(--rp);
                            background: var(--brand); }
.blg__gvd ol { counter-reset: bl; }
.blg__gvd ol > li { counter-increment: bl; }
.blg__gvd ol > li::before { content: counter(bl) '.'; position: absolute; left: 0; top: 0;
                            font-size: var(--fs-3xs); font-weight: var(--fw-800);
                            color: var(--brand); }
.blg__gvd li ul, .blg__gvd li ol { margin-top: var(--s2); }
.blg__gvd iframe { width: 100%; aspect-ratio: 16 / 9; height: auto;
                   border: 0; border-radius: var(--r3); }

/* -- Paylas -- */
.blg__pyl { display: flex; align-items: center; justify-content: space-between;
            gap: var(--s4); flex-wrap: wrap;
            padding: var(--s4) var(--s5); margin-top: var(--s7);
            background: var(--mist); border-radius: var(--r3); }
.blg__pyl > span { display: inline-flex; align-items: center; gap: var(--s2);
                   font-size: var(--fs-3xs); font-weight: var(--fw-800); color: var(--tx); }
.blg__pyl > span svg { color: var(--brand); }
.blg__pyl-l { display: flex; gap: var(--s2); }
.blg__pyl-l a, .blg__pyl-l button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; color: var(--tx-soft); background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r2);
  transition: all var(--t1); cursor: pointer;
}
.blg__pyl-l a:hover, .blg__pyl-l button:hover {
  color: var(--white); background: var(--brand); border-color: var(--brand);
  transform: translateY(-2px);
}
.blg__pyl-l button.ok { color: var(--white); background: #1C6340; border-color: #1C6340; }

.blg__blk { margin-top: var(--s7); }
.blg__b { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4);
          font-size: var(--fs-h4); font-weight: var(--fw-800);
          letter-spacing: var(--ls-tt); color: var(--tx); }
.blg__b svg { color: var(--brand); }

.blg__don { margin-top: var(--s6); }


/* ==========================================================================
   5. DAR EKRAN
   ========================================================================== */
@media (max-width: 1024px) {
  .blg { grid-template-columns: minmax(0, 1fr); }
  .blg__yan { position: static; }
  .blg__ac { display: inline-flex; }
  .blg__yg { display: none; margin-top: var(--s3); }
  .blg__yan.acik .blg__yg { display: grid;
                            grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
                            align-items: start; }
}

@media (max-width: 720px) {
  .blg__one { grid-template-columns: minmax(0, 1fr); }
  .blg__one-i { padding: var(--s4); }
  .blg__yz { padding: var(--s4); }
  .blg__bas h1 { font-size: var(--fs-h3); }
}