/* Türk Bayrağı sayfası (/turk-bayragi) — .tbf-*
   Ayrı dosyada: bu bölümün ~6 KB'ı 210 haber sayfasının hiçbirinde
   kullanılmıyor. front_header.php'deki $extra_css mekanizmasıyla yükleniyor.

   RENKLER DÜZ HEX, var(--*) DEĞİL: sayfa açık/koyu tema seçiminden bağımsız
   olarak koyu kalmalı. Emsal: eski .hm2-hero da sabit hex kullanıyordu. */

.tbf-body{background:#0b0f18}
.tbf{max-width:500px;margin:0 auto;background:#0b0f18;color:#eef2f8;
     padding-bottom:calc(60px + env(safe-area-inset-bottom,0));position:relative}

/* Okuma ilerlemesi — pencere kaydırmasını dinliyor (sayfa ayrı katman değil). */
.tbf-prog{position:fixed;top:0;left:0;height:3px;width:0;z-index:70;
          background:linear-gradient(90deg,#e30a17,#ff7a86);transition:width .1s linear}
.tbf-close{position:fixed;top:14px;right:14px;z-index:71;width:38px;height:38px;border-radius:50%;
           display:grid;place-items:center;background:rgba(12,17,27,.72);color:#fff;
           border:1px solid rgba(255,255,255,.14);text-decoration:none;backdrop-filter:blur(10px)}

/* ── Hero ── */
.tbf-hero{padding:64px 20px 44px;text-align:center;
          background:radial-gradient(120% 90% at 50% 0,#2a0b12 0,#0b0f18 62%)}
.tbf-mark{display:block;width:150px;height:auto;margin:0 auto 22px;border-radius:7px;
          box-shadow:0 18px 40px rgba(227,10,23,.28)}
.tbf-eyebrow{font-size:9px;font-weight:800;letter-spacing:2.4px;color:#ff6b78;text-transform:uppercase}
.tbf-hero h1{margin:12px 0 14px;font-size:38px;line-height:1.06;letter-spacing:-1.4px;font-weight:900;color:#fff}
.tbf-hero p{margin:0 auto;max-width:34ch;font-size:12.5px;line-height:1.72;color:#93a1b5}
/* Ok METNİN ALTINDA: yan yanayken harf aralığı (letter-spacing) son harften
   sonra da boşluk bıraktığı için blok görsel olarak sola kayık duruyordu.
   Alt alta gelince ok metnin gerçek ortasına hizalanıyor ve aşağı doğru
   zıplaması da "aşağı kaydır" mesajını güçlendiriyor. */
.tbf-scroll{margin-top:30px;display:inline-flex;flex-direction:column;align-items:center;gap:7px;
            font-size:8.5px;font-weight:800;letter-spacing:1.6px;color:#6d7d93}
/* Harf aralığı son harften sonra da uygulanıyor; o kadarı geri alınmazsa
   yazı okun bir tık soluna düşüyor. */
.tbf-scroll span{margin-right:-1.6px}
.tbf-scroll svg{display:block;animation:tbfbob 1.8s ease-in-out infinite}
@keyframes tbfbob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@media (prefers-reduced-motion:reduce){.tbf-scroll svg{animation:none}}

/* ── Bölümler ── */
.tbf-body-in{padding:0 18px}
.tbf-sec{padding:34px 0;border-top:1px solid rgba(255,255,255,.07)}
.tbf-kick{font-size:8px;font-weight:900;letter-spacing:2px;color:#ff6b78;text-transform:uppercase}
.tbf-sec h2{margin:9px 0 12px;font-size:24px;line-height:1.16;letter-spacing:-.8px;font-weight:900;color:#fff}
.tbf-sec p{margin:0 0 12px;font-size:12.5px;line-height:1.78;color:#a3b0c2}
.tbf-sec b,.tbf-sec strong{color:#e6edf7;font-weight:800}
.tbf-lead{font-size:13.5px !important;color:#c2ccda !important}
.tbf-note{margin-top:14px !important;padding:11px 13px;border-left:3px solid #e30a17;
          border-radius:0 10px 10px 0;background:rgba(227,10,23,.07);font-size:11px !important;color:#9fb0c4 !important}
.tbf-fine{margin:8px 0 0 !important;font-size:11px !important;color:#7d8ca1 !important}
.tbf-sec code{background:rgba(255,255,255,.07);border-radius:5px;padding:1px 5px;font-size:11px}

/* ── Tarihçe ── */
.tbf-tl{position:relative;margin-top:18px;padding-left:22px}
.tbf-tl:before{content:"";position:absolute;left:5px;top:5px;bottom:5px;width:2px;
               background:linear-gradient(#e30a17,rgba(227,10,23,.06))}
.tbf-tli{position:relative;padding-bottom:20px}
.tbf-tli:before{content:"";position:absolute;left:-22px;top:4px;width:12px;height:12px;border-radius:50%;
                background:#0b0f18;border:2px solid #55637a}
.tbf-tli-on:before{border-color:#e30a17;box-shadow:0 0 0 4px rgba(227,10,23,.16)}
.tbf-tli small{font-size:8px;font-weight:900;letter-spacing:1.2px;color:#ff6b78}
.tbf-tli h3{margin:5px 0 5px;font-size:14px;font-weight:800;color:#fff}
.tbf-tli p{margin:0;font-size:11.5px;line-height:1.7;color:#94a2b6}

/* ── Semboller ── */
.tbf-sym{display:grid;gap:10px;margin-top:16px}
.tbf-symc{padding:14px;border:1px solid rgba(255,255,255,.09);border-radius:15px;background:#121826}
.tbf-symc h3{margin:10px 0 6px;font-size:14px;font-weight:800;color:#fff}
.tbf-symc p{margin:0;font-size:11.5px;line-height:1.7;color:#94a2b6}
.tbf-symi{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
          background:rgba(255,255,255,.06);color:#fff}
/* Al rengin kendisi bir "ikon": tek renk sabitinden geliyor. */
.tbf-swatch{display:block;width:40px;height:40px;border-radius:12px;background:#E30A17;
            box-shadow:0 8px 20px rgba(227,10,23,.3)}

/* ── Ölçüler ── */
.tbf-measure{margin:16px 0 18px;border:1px solid rgba(255,255,255,.09);border-radius:15px;
             overflow:hidden;background:#121826}
.tbf-diag{display:block;width:100%;height:auto}
.tbf-grid{display:grid;gap:7px;margin:0}
.tbf-grid>div{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:start;
              padding:10px 12px;border:1px solid rgba(255,255,255,.07);border-radius:12px;background:#111726}
.tbf-grid dt{font-size:15px;font-weight:900;color:#ff6b78;line-height:1.2}
.tbf-grid dd{margin:0;font-size:11px;line-height:1.62;color:#a3b0c2}
.tbf-grid dd span{color:#6d7d93}

/* ── Kurallar ── */
.tbf-rules{display:grid;gap:10px;margin-top:16px}
.tbf-rule{padding:14px;border:1px solid rgba(255,255,255,.09);border-radius:15px;background:#121826}
.tbf-rule h3{margin:0 0 7px;font-size:13.5px;font-weight:800;color:#fff}
.tbf-rule p{margin:0;font-size:11.5px;line-height:1.72;color:#94a2b6}

/* ── Ülkeler ── */
.tbf-countries{display:grid;gap:10px;margin-top:16px}
.tbf-country{display:grid;grid-template-columns:74px 1fr;gap:12px;align-items:center;
             padding:12px;border:1px solid rgba(255,255,255,.09);border-radius:15px;background:#121826}
.tbf-mini{display:block;border-radius:5px;overflow:hidden;box-shadow:0 5px 14px rgba(0,0,0,.35)}
.tbf-mini svg{display:block;width:100%;height:auto}
.tbf-country h3{margin:0 0 4px;font-size:13px;font-weight:800;color:#fff}
.tbf-country p{margin:0;font-size:10.5px;line-height:1.62;color:#94a2b6}

/* ── Bilinmeyenler ── */
.tbf-unk{display:grid;gap:10px;margin-top:16px}
.tbf-unkc{position:relative;padding:14px 14px 14px 52px;border:1px solid rgba(255,255,255,.09);
          border-radius:15px;background:#121826}
.tbf-num{position:absolute;left:14px;top:13px;font-size:17px;font-weight:900;color:#33405a}
.tbf-unkc h3{margin:0 0 6px;font-size:13.5px;font-weight:800;color:#fff}
.tbf-unkc p{margin:0;font-size:11.5px;line-height:1.72;color:#94a2b6}

/* ── Kaynaklar ── */
.tbf-src p{font-size:10.5px !important;line-height:1.8;color:#718199 !important}

@media(min-width:420px){
  .tbf-sym{grid-template-columns:1fr 1fr 1fr}
  .tbf-hero h1{font-size:42px}
}