/* ============================================================
   Tarihte Bugün — anasayfadaki bölüm (inc/tarihte-bugun.php), üstteki ince satır (index.php)
   ve /tarihte-bugun sayfaları. Davranış: assets/js/tarihte-bugun.js
   Renk ve yazı tipleri style.css'teki :root değişkenlerinden gelir (yeni yazı tipi yok).
   Ayrı dosya: yalnız kullanan sayfada, sürüm ekiyle (?v=) çağrılır.
   ============================================================ */

/* ---------- açılış bölümünün altındaki ince satır ---------- */
.tb-satir{display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; text-align:center;
  background:var(--card); border-radius:var(--pill); padding:11px 22px; font-size:14px; color:var(--mut);
  transition:color .25s var(--ease), box-shadow .25s var(--ease)}
.tb-satir:hover{color:var(--ink); box-shadow:var(--sh)}
.tb-satir__on{font-family:var(--disp); font-weight:600; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--olive)}
.tb-satir b{font-family:var(--disp); font-weight:700; color:var(--ink)}
.tb-satir svg{flex:none; color:var(--olive)}

/* ---------- bölüm başlığı ----------
   Diğer anasayfa kartlarıyla aynı düzen (style.css .sec-head): solda etiket (.eyebrow) + başlık (.d2),
   sağda "Tüm takvim" (.more). Buraya yalnız alt yazı ve çapa boşluğu kalır. */
.tb{scroll-margin-top:96px}
.tb__alt{font-style:italic; color:var(--mut); font-size:14.5px; margin-top:8px}

/* ---------- gün şeridi ---------- */
/* Şerit kartın TAM genişliğine yayılır: günler eşit aralıklı, ilk nokta sola, son nokta sağa yakın.
   Her gün 150 px'lik kutu; kutular arası boşluk eşit dağılır, çizgi ilk kutunun ortasından son kutunun ortasına. */
.tb__serit{position:relative; display:flex; justify-content:space-between; margin:0 0 clamp(20px,2.6vw,28px)}
.tb__serit::before{content:""; position:absolute; left:75px; right:75px; top:14px; height:1px; background:var(--line)}
.tb__gun{position:relative; flex:0 0 150px; min-width:0; display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:5px 4px 6px; border:0; background:none; cursor:pointer; color:var(--fai); border-radius:var(--r-sm)}
/* Geçmiş günler renkle soluk (saydamlıkla değil): içi boş nokta, açık gri yazı */
.tb__nokta{width:12px; height:12px; border-radius:50%; background:var(--card); border:1.5px solid var(--sage); margin:3px 0 9px;
  transition:transform .25s var(--ease), background .25s, border-color .25s}
.tb__gunisim{font-family:var(--disp); font-weight:700; font-size:clamp(13px,1.6vw,16px); line-height:1.2; text-transform:uppercase; letter-spacing:-.005em}
.tb__gunnot{font-size:12px; line-height:1.3}
.tb__gun:hover{color:var(--mut)}
.tb__gun:hover .tb__nokta{border-color:var(--olive)}
.tb__gun[aria-selected="true"]{color:var(--ink); cursor:default}
.tb__gun[aria-selected="true"] .tb__nokta{background:var(--olive); border-color:var(--olive); transform:scale(1.5)}
.tb__gun[aria-selected="true"] .tb__gunnot{color:var(--olive); font-weight:600}

/* ---------- olay kartları ---------- */
.tb__panel{transition:opacity .25s var(--ease), transform .25s var(--ease)}
.tb__panel[hidden]{display:none}
.tb__panel.giriyor{opacity:0; transform:translateY(6px)}
.tb__kartlar{display:grid; gap:14px; grid-template-columns:repeat(3,minmax(0,1fr))}
.tb__kartlar--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.tb__kartlar--1{grid-template-columns:minmax(0,1fr)}
.tb__kart{display:flex; flex-direction:column; align-items:flex-start; gap:0; text-align:left; width:100%; min-width:0;
  background:var(--card-2); border:1px solid var(--line); border-radius:var(--r-md); padding:20px 22px 18px; color:var(--ink);
  transition:border-color .25s, background .25s, transform .25s var(--ease)}
button.tb__kart, a.tb__kart{cursor:pointer}
button.tb__kart:hover, a.tb__kart:hover{background:#EDEBE3; transform:translateY(-2px)}
.tb__kart[aria-expanded="true"]{border-color:var(--olive); background:var(--card)}
.tb__yil{font-family:var(--disp); font-weight:700; font-size:clamp(26px,3vw,34px); line-height:1; letter-spacing:-.02em; color:var(--olive)}
.tb__kat{font-family:var(--disp); font-weight:600; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--fai); margin-top:10px}
.tb__olay{font-family:var(--disp); font-weight:700; font-size:clamp(15px,1.7vw,17.5px); line-height:1.25; text-transform:uppercase; margin-top:6px; overflow-wrap:anywhere}
.tb__ozet{font-size:13.5px; line-height:1.6; color:var(--mut); margin-top:8px;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden}
.tb__ac{display:inline-flex; align-items:center; gap:6px; margin-top:auto; padding-top:14px; font-family:var(--disp); font-weight:600; font-size:12px; color:var(--olive)}
.tb__ac svg{transition:transform .25s var(--ease)}
.tb__kart[aria-expanded="true"] .tb__ac svg{transform:rotate(180deg)}
/* Ayrıntısı olmayan olay: tıklanmaz, daha sakin görünür */
.tb__kart--duz{background:transparent}
.tb__kart--fazla .tb__olay{margin-top:10px}

/* ---------- açılır ayrıntı: bilgisayarda kartların ALTINDA tam genişlikte ---------- */
.tb__detay{position:relative; grid-column:1 / -1; order:10; background:var(--card-2); border-left:3px solid var(--olive); border-radius:0;
  padding:22px 54px 20px 24px; animation:tb-ac .25s var(--ease)}
.tb__detay[hidden]{display:none}
@keyframes tb-ac{from{opacity:0; transform:translateY(-4px)}}
.tb__detay-bas{font-family:var(--disp); font-weight:700; font-size:clamp(16px,1.9vw,20px); line-height:1.22; text-transform:uppercase; margin-bottom:12px}
.tb__detay-bas span{color:var(--olive); margin-left:6px; white-space:nowrap}
.tb__detay p{font-size:15px; line-height:1.75; color:var(--ink); max-width:78ch}
.tb__detay p + p{margin-top:10px}
.tb__detay p.tb__kaynak{font-size:13px; font-style:italic; color:var(--mut); margin-top:14px}
.tb__kaynak a{text-decoration:underline; text-decoration-color:var(--sage); text-underline-offset:3px}
.tb__baglar{display:flex; flex-wrap:wrap; align-items:center; gap:6px 22px; margin-top:14px}
.tb__devam{margin-left:auto}
.tb__kapat{position:absolute; top:12px; right:12px; width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:var(--card);
  color:var(--ink); display:grid; place-items:center; cursor:pointer; transition:background .2s}
.tb__kapat:hover{background:#EDEBE3}

/* ============================================================
   Kalıcı sayfalar (tarihte-bugun.php): takvim ve gün sayfası
   ============================================================ */
/* Başlık kutusu daralabilsin: içindeki ay şeridi (telefonda tek satır) kartı dışarı itmesin */
.tbs-bas{min-width:0; flex:1 1 100%}
/* Takvim: kaydı olmayan ay — tıklanmaz, renkle soluk (saydamlıkla değil) */
.tbs-ay-bos{font-family:var(--disp); font-weight:600; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
  padding:11px 18px; border-radius:var(--pill); border:1px dashed var(--line); color:var(--fai)}
.tbs-gunler{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
.tbs-gun{display:flex; flex-direction:column; min-width:0; background:var(--card-2); border:1px solid var(--line); border-radius:var(--r-md);
  padding:20px 22px 16px; transition:background .25s, transform .25s var(--ease), border-color .25s}
.tbs-gun:hover{background:#EDEBE3; border-color:var(--sage); transform:translateY(-2px); color:var(--ink)}
.tbs-gun__ad{font-family:var(--disp); font-weight:700; font-size:clamp(20px,2.4vw,26px); line-height:1.1; letter-spacing:-.015em; text-transform:uppercase; color:var(--olive)}
.tbs-gun__liste{display:grid; gap:7px; margin-top:12px}
.tbs-gun__olay{font-size:14px; line-height:1.45; color:var(--mut)}
.tbs-gun__olay b{font-family:var(--disp); font-weight:700; color:var(--ink); margin-right:4px; font-variant-numeric:tabular-nums}

/* Gün sayfası: her olay yıl + metin */
.tbs-olaylar{display:grid; gap:14px}
.tbs-olay{display:grid; grid-template-columns:118px minmax(0,1fr); gap:22px; align-items:start; padding:24px; border-radius:var(--r-md);
  background:var(--card-2); scroll-margin-top:100px}
.tbs-olay:target{box-shadow:0 0 0 2px var(--olive)}
.tbs-olay__yil{font-family:var(--disp); font-weight:700; font-size:clamp(28px,3.6vw,40px); line-height:1; letter-spacing:-.02em; color:var(--olive)}
.tbs-olay__govde .tb__kat{display:block; margin-top:0; margin-bottom:6px}
.tbs-olay__govde h2{font-family:var(--disp); font-weight:700; font-size:clamp(18px,2.2vw,24px); line-height:1.2; text-transform:uppercase; letter-spacing:-.01em; margin-bottom:12px; overflow-wrap:anywhere}
.tbs-olay__govde p{font-size:15.5px; line-height:1.75; color:var(--ink); max-width:74ch}
.tbs-olay__govde p + p{margin-top:10px}
.tbs-olay__govde p.tbs-olay__ozet{font-size:16.5px; color:var(--mut)}
.tbs-olay__govde p.tb__kaynak{font-size:13px; font-style:italic; color:var(--mut); margin-top:14px}
.tbs-gezin{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; background:var(--card); border-radius:var(--r-md); padding:18px 24px}
.tbs-gezin__bag{display:grid; gap:2px; justify-self:start}
.tbs-gezin__bag--sag{justify-self:end; text-align:right}
.tbs-gezin__bag span{font-size:12px; color:var(--mut)}
.tbs-gezin__bag b{font-family:var(--disp); font-weight:700; font-size:15px; text-transform:uppercase; color:var(--olive)}
.tbs-gezin__bag:hover b{color:var(--olive-lt)}
@media(max-width:900px){ .tbs-gunler{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:600px){
  .tbs-gunler{grid-template-columns:minmax(0,1fr)}
  .tbs-olay{grid-template-columns:minmax(0,1fr); gap:10px; padding:18px}
  .tbs-gezin{grid-template-columns:1fr 1fr; padding:16px 18px}
  .tbs-gezin > .more{grid-column:1 / -1; grid-row:2; justify-self:center}
}

/* ---------- telefon: kartlar alt alta, ayrıntı tıklanan kartın HEMEN altında ---------- */
@media(max-width:760px){
  .tb__kartlar, .tb__kartlar--2{grid-template-columns:minmax(0,1fr)}
  .tb__detay{order:0; padding:18px 48px 18px 18px}
  .tb__devam{margin-left:0}
  /* Dar ekranda günler genişliği eşit paylaşır (150 px'lik kutular sığmaz) */
  .tb__serit::before{top:13px; left:calc(50% / var(--tb-n, 4)); right:calc(50% / var(--tb-n, 4))}
  .tb__gun{flex:1 1 0; padding-inline:2px}
  /* Takvim sayfası: ay düğmeleri alt alta 5 satır olmasın — tek satırda, parmakla yana kaydırılır.
     Seçili ayı görünür yere tarihte-bugun.js getirir. Sağdaki solma devamı olduğunu belli eder. */
  .tbs-aylar{flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    scroll-snap-type:x proximity; padding:2px 30px 2px 2px; margin-right:calc(-1 * clamp(26px,4vw,52px));
    -webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 34px), transparent); mask-image:linear-gradient(90deg, #000 calc(100% - 34px), transparent)}
  .tbs-aylar::-webkit-scrollbar{display:none}
  .tbs-aylar > *{flex:none; scroll-snap-align:center}
  .tb__gunnot{font-size:11px}
  .tb-satir{border-radius:var(--r-md); padding:11px 16px; font-size:13.5px}
}
@media(prefers-reduced-motion:reduce){
  .tb__panel, .tb__nokta, .tb__kart, .tb__ac svg{transition:none}
  .tb__detay{animation:none}
}