/* template-30 ("Haber") — Figma "01_Home" tasarımından. Tüm seçiciler .t30-shell ile scope'lu;
   html/body seçicisi YOK. Bu dosya hiçbir yerden import edilmez (bkz. TemplateStylesheet.tsx). */

.t30-shell {
  background: var(--t30-bg, #ffffff);
  color: var(--t30-text, #4d4d4d);
  font-family: var(--t30-font-body, sans-serif), sans-serif;
  line-height: 1.5;
}

.t30-shell h1, .t30-shell h2, .t30-shell h3, .t30-shell h4 {
  font-family: var(--t30-font-display, sans-serif), sans-serif;
  margin: 0;
}

:where(.t30-shell) a { color: inherit; text-decoration: none; }
.t30-shell img { max-width: 100%; display: block; }

.t30-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.t30-container {
  max-width: var(--t30-container-width, 1170px);
  margin: 0 auto;
  padding: 0 16px;
}

/* ---- Top bar ---- */
.t30-topbar { background: var(--t30-topbar-bg, #fff); border-bottom: 1px solid var(--t30-border, #e3e3e3); }
.t30-topbar-row { display: flex; align-items: center; gap: 24px; min-height: 42px; font-size: 13px; color: var(--t30-text-muted, #6b6b6b); }
.t30-topbar-date { white-space: nowrap; }
.t30-ticker { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.t30-ticker-label {
  flex: 0 0 auto;
  background: var(--t30-badge-bg, #b82a2a); color: var(--t30-on-accent, #fff);
  font-weight: 600; font-size: 11px; padding: 2px 8px; border-radius: 2px; white-space: nowrap;
}
/* Viewport kırpar (label'ın hemen sağında, sabit genişlik); track kendi içinde kayar — track'in
   transform'u yalnız VIEWPORT'un kendi kutusu içinde hareket eder, label'ın ASLA altına girmez
   (eski sürüm flex kardeşini kaydırıyordu ve negatif offsette label'ı eziyordu). */
.t30-ticker-viewport { flex: 1; min-width: 0; overflow: hidden; position: relative; height: 1.2em; }
.t30-ticker-list {
  position: absolute; top: 0; left: 0; display: flex; gap: 48px; list-style: none; margin: 0; padding: 0;
  white-space: nowrap; animation: t30-scroll 22s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .t30-ticker-list { animation: none; position: static; } .t30-ticker-viewport { overflow-x: auto; } }
@keyframes t30-scroll { from { transform: translateX(100%); } to { transform: translateX(-100%); } }
.t30-topbar-social { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; }
.t30-topbar-social a { display: inline-flex; width: 20px; height: 20px; color: var(--t30-text, #4d4d4d); }

/* ---- Logo row ---- */
.t30-logo-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px 0; flex-wrap: wrap; }
.t30-logo { display: inline-flex; align-items: center; min-height: 62px; }
.t30-logo img { max-height: 62px; max-width: 247px; width: auto; height: auto; object-fit: contain; }
.t30-logo-text { font-family: var(--t30-font-display, sans-serif), sans-serif; font-size: 24px; font-weight: 500; color: var(--t30-text, #4d4d4d); }
.t30-header-promo { max-width: 771px; width: 100%; }

/* ---- Nav ---- */
.t30-nav { background: var(--t30-nav-bg, #393939); }
.t30-nav-row { display: flex; align-items: stretch; gap: 4px; overflow-x: auto; }
.t30-nav-item {
  display: flex; align-items: center; padding: 0 18px; min-height: 48px;
  color: var(--t30-nav-text, #fff); font-family: var(--t30-font-display, sans-serif), sans-serif;
  font-size: 15px; white-space: nowrap;
}
.t30-nav-item--active, .t30-nav-item:hover { background: var(--t30-accent, #f65050); }

/* ---- Promo / ad slots ---- */
.t30-promo { position: relative; border-radius: 4px; overflow: hidden; background: var(--t30-promo-bg, #24243a); color: var(--t30-promo-text, #fff); }
.t30-promo-label { position: absolute; top: 6px; left: 10px; font-size: 10px; opacity: 0.7; letter-spacing: 0.05em; text-transform: uppercase; }
.t30-promo-body { display: flex; align-items: center; gap: 12px; padding: 16px; }
.t30-promo-logo { height: 32px; width: auto; }
.t30-promo-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.t30-promo-title { font-size: 15px; }
.t30-promo-subtitle { font-size: 12px; opacity: 0.85; }
.t30-promo-cta {
  background: var(--t30-accent, #f65050); color: var(--t30-on-accent, #fff);
  font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: 4px; white-space: nowrap;
}
.t30-promo--box { min-height: 250px; display: flex; align-items: flex-end; }
.t30-promo--box .t30-promo-body { width: 100%; flex-direction: column; align-items: flex-start; }
.t30-promo-mid { margin: 24px 0; }

/* ---- Home layout ---- */
.t30-home { padding: 24px 0 40px; }
.t30-empty { padding: 40px 0; text-align: center; color: var(--t30-text-muted, #6b6b6b); }
.t30-hero { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 16px; margin-bottom: 32px; }
.t30-hero-card { position: relative; border-radius: 4px; overflow: hidden; background: var(--t30-surface, #f4f4f4); }
/* Figma 1:115 — büyük sol 670x570 (2 kolon x 2 satır), sağ üstte iki küçük kare, sağ altta geniş
   (2 kolon x 1 satır). Dördü de GÖRSEL kart: başlık+meta+rozet görselin ÜZERİNDE. */
.t30-hero-card:first-child { grid-column: span 2; grid-row: span 2; }
.t30-hero-card:nth-child(4) { grid-column: span 2; }
.t30-hero-card-link { position: relative; display: block; width: 100%; height: 100%; min-height: 220px; }
.t30-hero-card-link img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.t30-hero-card-content {
  position: absolute; inset: auto 0 0 0; padding: 16px;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.15) 40%, rgba(0,0,0,.82) 100%);
  display: flex; flex-direction: column; gap: 6px; color: var(--t30-overlay-text, #fff);
}
.t30-hero-card-title { font-family: var(--t30-font-display, sans-serif), sans-serif; font-weight: 500; font-size: 18px; line-height: 1.25; }
.t30-hero-card:first-child .t30-hero-card-title { font-size: 24px; }
.t30-hero-card-content .t30-meta { color: rgba(255,255,255,.82); }

.t30-home-grid { display: grid; grid-template-columns: 1fr 300px; gap: 30px; align-items: start; }
.t30-home-main { min-width: 0; }
.t30-sidebar { display: flex; flex-direction: column; gap: 24px; position: sticky; top: 16px; align-self: start; }

.t30-section-heading { margin: 32px 0 16px; padding-bottom: 8px; border-bottom: 1px solid var(--t30-border, #e3e3e3); position: relative; }
.t30-section-heading h2 { font-size: 24px; font-weight: 500; color: var(--t30-accent, #f65050); }
.t30-section-heading::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 60px; height: 2px; background: var(--t30-accent, #f65050); }

/* ---- Category section header (Figma: başlık solda kırmızı alt çizgili; çipler + oklar sağda
   AYNI satırda; altında ince gri TAM GENİŞLİK çizgi — Casino/Spor/Bahis/Makaleler ortak dil) ---- */
.t30-cat-section { margin-top: 32px; }
.t30-section-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 8px; position: relative; }
.t30-section-header-title {
  font-size: 24px; font-weight: 500; color: var(--t30-accent, #f65050); position: relative; padding-bottom: 8px;
}
.t30-section-header-title::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 60px; height: 2px; background: var(--t30-accent, #f65050); }
.t30-section-header-controls { display: flex; align-items: center; gap: 12px; }
.t30-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.t30-chip {
  border: none; cursor: pointer; font-family: var(--t30-font-display, sans-serif), sans-serif;
  font-size: 12px; padding: 4px 12px; border-radius: 2px; background: var(--t30-surface, #f4f4f4); color: var(--t30-text, #4d4d4d);
}
.t30-chip--active { background: var(--t30-accent, #f65050); color: var(--t30-on-accent, #fff); }
.t30-header-arrows { display: flex; gap: 4px; }
.t30-header-arrow {
  width: 20px; height: 20px; border: none; border-radius: 2px; cursor: pointer; line-height: 1;
  background: var(--t30-accent, #f65050); color: var(--t30-on-accent, #fff); font-size: 13px;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.t30-header-arrow:hover:not(:disabled) { opacity: 0.85; }
.t30-header-arrow:disabled { background: rgba(246,80,80,.4); cursor: default; }
.t30-section-line { height: 1px; background: var(--t30-border, #e3e3e3); margin-bottom: 20px; }

.t30-badge {
  display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 2px;
  color: var(--t30-on-accent, #fff); background: var(--t30-accent, #f65050); margin-bottom: 6px;
}
.t30-badge--tag-1 { background: var(--t30-tag-1, #7a3f93); }
.t30-badge--tag-2 { background: var(--t30-tag-2, #146b35); }
.t30-badge--tag-3 { background: var(--t30-tag-3, #004a9e); }

.t30-meta { display: flex; gap: 10px; font-size: 12px; color: var(--t30-text-muted, #6b6b6b); }

.t30-feature-card { display: flex; flex-direction: column; }
.t30-feature-media { display: block; aspect-ratio: 393 / 250; overflow: hidden; border-radius: 4px; background: var(--t30-surface, #f4f4f4); }
.t30-feature-media img { width: 100%; height: 100%; object-fit: cover; }
.t30-feature-title { font-size: 18px; font-weight: 500; margin: 10px 0 6px; }
.t30-feature-excerpt { font-size: 14px; color: var(--t30-text-muted, #6b6b6b); font-weight: 300; line-height: 1.4; }
.t30-feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }

.t30-dontmiss { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; align-items: start; }
.t30-dontmiss .t30-feature-card { grid-row: span 5; }
.t30-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.t30-list-item { display: flex; gap: 12px; align-items: flex-start; }
.t30-list-thumb { flex: 0 0 77px; width: 77px; height: 60px; border-radius: 4px; overflow: hidden; background: var(--t30-border, #e3e3e3); }
.t30-list-thumb img { width: 100%; height: 100%; object-fit: cover; }
.t30-list-title { font-size: 15px; font-weight: 400; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 4px; }

/* ---- Casino (1:231) / Video (1:541): tam genişlik görsel-üstü slayt ---- */
.t30-slide { position: relative; border-radius: 4px; overflow: hidden; min-height: 280px; background: var(--t30-surface, #f4f4f4); }
.t30-slide-link { position: relative; display: block; height: 100%; min-height: 280px; }
.t30-slide-link img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.t30-slide-content {
  position: absolute; inset: auto 0 0 0; padding: 24px;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.2) 35%, rgba(0,0,0,.78) 100%);
  color: var(--t30-overlay-text, #fff); display: flex; flex-direction: column; gap: 10px;
}
.t30-slide-title { font-family: var(--t30-font-display, sans-serif), sans-serif; font-weight: 700; font-size: 24px; line-height: 1.3; }
.t30-slide-rule { display: block; width: 80px; height: 2px; background: var(--t30-accent, #f65050); }
.t30-slide-excerpt { font-size: 15px; font-weight: 300; max-width: 640px; line-height: 1.3; }

/* Küçük yatay liste öğesi (77x60 görsel solda, meta+başlık sağda) — Casino alt şeridi + Spor listesi */
.t30-hlist { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.t30-hlist--row { flex-direction: row; gap: 16px; }
.t30-hlist--row .t30-hlist-item { flex: 1; min-width: 0; }
.t30-hlist-item { display: flex; gap: 10px; align-items: flex-start; }
.t30-hlist-thumb { flex: 0 0 77px; width: 77px; height: 60px; border-radius: 4px; overflow: hidden; background: var(--t30-border, #e3e3e3); }
.t30-hlist-thumb img { width: 100%; height: 100%; object-fit: cover; }
.t30-hlist-body { min-width: 0; }
.t30-hlist-title { font-size: 15px; font-weight: 400; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---- Spor (1:276): büyük kart solda (görsel üstte, meta/başlık/özet altta) + 5'li liste sağda ---- */
.t30-sports-body { display: grid; grid-template-columns: 393px 1fr; gap: 30px; align-items: start; }
.t30-big-card { display: flex; flex-direction: column; }
.t30-big-card-media { position: relative; display: block; aspect-ratio: 393 / 250; border-radius: 4px; overflow: hidden; background: var(--t30-surface, #f4f4f4); }
.t30-big-card-media img { width: 100%; height: 100%; object-fit: cover; }
.t30-big-card-media .t30-badge { position: absolute; top: 12px; left: 12px; margin-bottom: 0; }
.t30-big-card-body { padding-top: 12px; }
.t30-big-card-title { font-size: 18px; font-weight: 500; margin: 6px 0 8px; }
.t30-big-card-excerpt { font-size: 14px; color: var(--t30-text-muted, #6b6b6b); font-weight: 300; line-height: 1.3; }

/* ---- Bahis (1:392): 2 büyük kart yan yana + 2x2 küçük kart grid'i ---- */
.t30-bahis-big-row { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.t30-bahis-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 30px; margin-top: 24px; }
.t30-small-grid-card { display: flex; gap: 12px; align-items: flex-start; }
.t30-small-grid-media { flex: 0 0 120px; width: 120px; height: 90px; border-radius: 4px; overflow: hidden; background: var(--t30-surface, #f4f4f4); }
.t30-small-grid-media img { width: 100%; height: 100%; object-fit: cover; }
.t30-small-grid-title { font-family: var(--t30-font-display, sans-serif), sans-serif; font-size: 18px; font-weight: 400; margin-top: 4px; }

/* ---- Makaleler/Video (1:541) alt kartları: 270 genişlik, görsel üstte rozetli ---- */
.t30-video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 16px; }
.t30-video-card { display: flex; flex-direction: column; }
.t30-video-media { position: relative; display: block; aspect-ratio: 270 / 200; border-radius: 4px; overflow: hidden; background: var(--t30-surface, #f4f4f4); }
.t30-video-media img { width: 100%; height: 100%; object-fit: cover; }
.t30-video-media .t30-badge { position: absolute; top: 10px; left: 10px; margin-bottom: 0; }
.t30-video-title { font-family: var(--t30-font-display, sans-serif), sans-serif; font-size: 14px; font-weight: 500; margin-top: 8px; }

/* ---- Sidebar tabs ---- */
.t30-tabs, .t30-tabs-single { background: var(--t30-surface, #f4f4f4); border-radius: 4px; padding: 16px; }
.t30-tablist { display: flex; gap: 8px; margin-bottom: 12px; }
.t30-tab { background: none; border: none; cursor: pointer; font-size: 14px; padding: 6px 10px; color: var(--t30-text-muted, #6b6b6b); font-family: var(--t30-font-display, sans-serif), sans-serif; }
.t30-tab--active { color: var(--t30-accent, #f65050); border-bottom: 2px solid var(--t30-accent, #f65050); }

.t30-sidebar-categories, .t30-sidebar-social { background: var(--t30-surface, #f4f4f4); border-radius: 4px; padding: 16px; }
.t30-category-counts { list-style: none; margin: 0; padding: 0; }
.t30-category-counts li a { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--t30-border, #e3e3e3); }
.t30-category-count-label { display: flex; align-items: center; gap: 6px; }
.t30-category-chevron { color: var(--t30-text-muted, #6b6b6b); }
.t30-category-count-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px;
  padding: 0 4px; color: var(--t30-on-accent, #fff); font-size: 12px; border-radius: 2px;
}
.t30-social-boxes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.t30-social-boxes a { display: block; padding: 8px 12px; background: var(--t30-bg, #fff); border: 1px solid var(--t30-border, #e3e3e3); border-radius: 4px; text-transform: capitalize; }

/* ---- Footer ---- */
.t30-footer { background: var(--t30-footer-bg, #333); color: var(--t30-footer-text, #fff); margin-top: 40px; padding: 40px 0 0; }
.t30-footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px 30px; padding-bottom: 32px; }
.t30-footer-heading { font-size: 15px; margin-bottom: 12px; }
.t30-footer-logo { max-height: 48px; }
.t30-footer-logo-text { font-family: var(--t30-font-display, sans-serif), sans-serif; font-size: 20px; }
.t30-footer-desc { font-size: 13px; color: var(--t30-footer-muted, #d0d0d0); margin: 12px 0; }
.t30-footer-social { display: flex; gap: 10px; list-style: none; margin: 12px 0 0; padding: 0; }
.t30-footer-social a { display: inline-flex; width: 20px; height: 20px; color: var(--t30-footer-text, #fff); }
.t30-footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.t30-footer-links a { color: var(--t30-footer-muted, #d0d0d0); }
.t30-footer-gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.t30-footer-gallery a { display: block; aspect-ratio: 1; border-radius: 2px; overflow: hidden; background: var(--t30-border, #555); }
.t30-footer-gallery img { width: 100%; height: 100%; object-fit: cover; }
.t30-footer-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.t30-footer-tag { display: inline-block; padding: 4px 12px; border-radius: 2px; font-size: 13px; color: #fff; }
.t30-footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12); padding: 16px 0 24px;
  display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 12px; color: var(--t30-footer-muted, #d0d0d0);
}
.t30-footer-disclosure { flex-basis: 100%; }

/* ---- Article detail prose (reused by generic ContentDetail via SafeHtml) ---- */
.t30-shell .t30-prose { font-size: 16px; line-height: 1.7; }
.t30-shell .t30-prose img { border-radius: 4px; margin: 16px 0; }

/* ---- Responsive (§1.7) ---- */
@media (max-width: 1199px) {
  .t30-container { padding: 0 24px; }
}
@media (max-width: 991px) {
  /* Sidebar ANA KOLONUN ALTINA iner — sticky yalnız masaüstünde anlamlı (plan §10). */
  .t30-home-grid { grid-template-columns: 1fr; }
  .t30-sidebar { position: static; }
  .t30-hero { grid-template-columns: repeat(2, 1fr); }
  .t30-hero-card:first-child { grid-column: span 2; grid-row: auto; }
  .t30-hero-card:nth-child(4) { grid-column: span 2; }
  .t30-sports-body { grid-template-columns: 1fr; }
  .t30-bahis-big-row, .t30-bahis-grid { grid-template-columns: 1fr 1fr; }
  .t30-video-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .t30-container { padding: 0 16px; }
  .t30-topbar-row { flex-wrap: wrap; }
  .t30-topbar-date { display: none; }
  .t30-logo-row { justify-content: center; text-align: center; }
  .t30-header-promo { order: 3; }
  .t30-nav-row { overflow-x: auto; scroll-snap-type: x mandatory; }
  .t30-nav-item { scroll-snap-align: start; }
  .t30-hero { grid-template-columns: 1fr; }
  .t30-hero-card:first-child, .t30-hero-card:nth-child(4) { grid-column: span 1; }
  .t30-dontmiss { grid-template-columns: 1fr; }
  .t30-slide { min-height: 220px; }
  .t30-slide-link { min-height: 220px; }
  /* Şerit/kartlar KAYAR (yatay scroll-snap) — plan §10 "carousels swipe". */
  .t30-hlist--row { overflow-x: auto; scroll-snap-type: x proximity; flex-wrap: nowrap; }
  .t30-hlist--row .t30-hlist-item { flex: 0 0 85%; scroll-snap-align: start; }
  .t30-bahis-big-row, .t30-bahis-grid { grid-template-columns: 1fr; }
  .t30-video-grid { grid-template-columns: 1fr; }
  .t30-footer-grid { grid-template-columns: 1fr 1fr; }
}

/* ---- Secondary routes: content list (/haberler, /makaleler, /yazar/{slug}), author pages,
   static/legal pages, article detail — real t30 (Figma) skin, not t28's (plan amendment
   2026-10-01: "normal site, only visual design differs"). ---- */

.t30-content-list { padding: 24px 0 40px; }
.t30-content-list-hero { margin-bottom: 24px; }
.t30-content-list-title { font-size: 28px; font-weight: 500; }
.t30-content-list-intro { color: var(--t30-text-muted, #6b6b6b); margin-top: 8px; }
.t30-content-list-below { margin-top: 32px; }

.t30-list-card { display: flex; flex-direction: column; background: var(--t30-surface, #f4f4f4); border-radius: 4px; overflow: hidden; }
.t30-list-card-media { display: block; aspect-ratio: 393 / 250; background: var(--t30-border, #e3e3e3); }
.t30-list-card-media img { width: 100%; height: 100%; object-fit: cover; }
.t30-list-card-body { padding: 12px 14px 16px; }
.t30-list-card-title { font-size: 16px; font-weight: 500; margin-bottom: 6px; }
.t30-list-card-excerpt { font-size: 13px; color: var(--t30-text-muted, #6b6b6b); font-weight: 300; }

.t30-pager { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; gap: 12px; }
.t30-pager a, .t30-pager span { padding: 6px 12px; }

/* Author profile + list */
.t30-author-profile { padding: 24px 0; border-bottom: 1px solid var(--t30-border, #e3e3e3); margin-bottom: 24px; }
.t30-author-profile-head { display: flex; align-items: center; gap: 16px; }
.t30-author-avatar { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; }
.t30-author-avatar--sm { width: 56px; height: 56px; }
.t30-author-avatar--fallback { display: flex; align-items: center; justify-content: center; background: var(--t30-accent, #f65050); color: var(--t30-on-accent, #fff); font-weight: 600; font-size: 28px; }
.t30-author-avatar--sm.t30-author-avatar--fallback { font-size: 18px; }
.t30-author-kicker { font-size: 12px; text-transform: uppercase; color: var(--t30-accent, #f65050); font-weight: 600; }
.t30-author-name { font-size: 24px; font-weight: 500; margin: 4px 0; }
.t30-author-occupation { color: var(--t30-text-muted, #6b6b6b); font-size: 14px; }
.t30-author-interests { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 8px 0 0; padding: 0; }
.t30-author-interests li { font-size: 12px; background: var(--t30-surface, #f4f4f4); padding: 2px 8px; border-radius: 2px; }
.t30-author-bio { margin-top: 16px; color: var(--t30-text-muted, #6b6b6b); }
.t30-author-stats { margin-top: 8px; font-size: 13px; }
.t30-author-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.t30-author-card { background: var(--t30-surface, #f4f4f4); border-radius: 4px; padding: 16px; }
.t30-author-card-head { display: flex; align-items: center; gap: 10px; }
.t30-author-card-name { display: flex; flex-direction: column; gap: 2px; }
.t30-author-card-name a { font-weight: 500; }
.t30-author-badge { font-size: 11px; color: var(--t30-text-muted, #6b6b6b); }
.t30-author-counts { font-size: 12px; color: var(--t30-text-muted, #6b6b6b); margin-top: 8px; }

/* Static/legal pages */
.t30-static-page { max-width: 820px; margin: 0 auto; padding: 32px 0; }
.t30-prose { font-size: 16px; line-height: 1.7; }
.t30-prose img { border-radius: 4px; margin: 16px 0; }
.t30-prose h2 { font-family: var(--t30-font-display, sans-serif), sans-serif; font-size: 22px; margin: 24px 0 12px; }

/* Article detail */
.t30-article { max-width: 100%; }
.t30-breadcrumb { font-size: 13px; color: var(--t30-text-muted, #6b6b6b); margin-bottom: 16px; }
.t30-breadcrumb a { color: var(--t30-text-muted, #6b6b6b); }
.t30-breadcrumb-sep { margin: 0 6px; }
.t30-article-back { display: inline-block; margin-bottom: 16px; font-size: 14px; color: var(--t30-text-muted, #6b6b6b); }
.t30-article-head { margin-bottom: 16px; }
.t30-article-title { font-size: 32px; font-weight: 500; line-height: 1.2; }
.t30-article-meta { margin-top: 10px; font-size: 13px; }
.t30-article-author { display: inline-flex; align-items: center; gap: 6px; }
.t30-article-author-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.t30-article-author-avatar--fallback { display: flex; align-items: center; justify-content: center; background: var(--t30-accent, #f65050); color: var(--t30-on-accent, #fff); font-size: 13px; font-weight: 600; }
.t30-article-cover { margin: 16px 0; border-radius: 4px; overflow: hidden; }
.t30-article-cover img { width: 100%; height: auto; }
.t30-article-source { margin-top: 20px; font-size: 13px; color: var(--t30-text-muted, #6b6b6b); }
.t30-article-source-label { font-weight: 600; }
.t30-share { margin-top: 20px; }
.t30-article-faq { margin-top: 32px; }
.t30-faq-list { display: flex; flex-direction: column; gap: 10px; }
.t30-faq-item { background: var(--t30-surface, #f4f4f4); border-radius: 4px; padding: 12px 16px; }
.t30-faq-item summary { cursor: pointer; font-weight: 500; }
.t30-article-prevnext { display: flex; justify-content: space-between; gap: 16px; margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--t30-border, #e3e3e3); }
.t30-prevnext-link { display: flex; flex-direction: column; font-size: 14px; max-width: 45%; }
.t30-prevnext-link--next { text-align: right; align-items: flex-end; }
.t30-prevnext-link span { font-size: 12px; color: var(--t30-text-muted, #6b6b6b); }
.t30-article-related { margin-top: 32px; }
.t30-article-views { font-size: 13px; color: var(--t30-text-muted, #6b6b6b); }
.t30-sidebar-list { background: var(--t30-surface, #f4f4f4); border-radius: 4px; padding: 16px; }

.t30-article-layout .t30-home-main { min-width: 0; }