/* ============================================
   HatayBB Typography System
   Merkezi Tipografi Yönetim Sistemi
   ============================================ */

/* ============================================
   1. BASE TYPOGRAPHY
   ============================================ */

body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--hbb-font-base);
  font-weight: var(--hbb-font-normal);
  color: var(--hbb-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   2. HEADINGS (h1-h6)
   Standardize başlık sistemı
   ============================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: 'Anek Latin', 'DM Sans', sans-serif;
  font-weight: var(--hbb-font-bold);
  color: var(--hbb-navy);
  line-height: 1.2;
  margin: 0 0 var(--hbb-spacing-md) 0;
}

h1 {
  font-size: var(--hbb-font-4xl);  /* 2.5rem / 40px */
  margin-bottom: var(--hbb-spacing-lg);
}

h2 {
  font-size: var(--hbb-font-3xl);  /* 2rem / 32px */
}

h3 {
  font-size: var(--hbb-font-2xl);  /* 1.5rem / 24px */
}

h4 {
  font-size: var(--hbb-font-xl);   /* 1.25rem / 20px */
}

h5 {
  font-size: var(--hbb-font-lg);   /* 1.125rem / 18px */
}

h6 {
  font-size: var(--hbb-font-base); /* 1rem / 16px */
}

/* Responsive Headings */
@media (max-width: 768px) {
  h1 {
    font-size: var(--hbb-font-3xl);  /* 2rem / 32px */
  }

  h2 {
    font-size: var(--hbb-font-2xl);  /* 1.5rem / 24px */
  }

  h3 {
    font-size: var(--hbb-font-xl);   /* 1.25rem / 20px */
  }
}

/* ============================================
   3. BODY TEXT
   Paragraf ve genel metin stilleri
   ============================================ */

p {
  font-size: var(--hbb-font-lg);  /* 1.125rem / 18px - Daha büyük ve okunabilir */
  margin: 0 0 1.125rem 0;
  line-height: 1.75;
}

small, .text-small {
  font-size: var(--hbb-font-sm);
  color: var(--hbb-text-light);
}

strong, b {
  font-weight: var(--hbb-font-bold);
}

em, i {
  font-style: italic;
}

/* ============================================
   4. SECTION TITLES
   Bölüm başlıkları - tüm sayfalar için
   ============================================ */

.sec-title,
.hbb-section__title,
.section-title {
  font-family: 'Anek Latin', 'DM Sans', sans-serif;
  font-size: var(--hbb-section-title-size);
  font-weight: var(--hbb-font-semibold);
  color: var(--hbb-navy);
  line-height: 1.25;
  margin-bottom: var(--hbb-spacing-md);
}

.sub-title,
.hbb-section__subtitle,
.section-subtitle {
  font-size: var(--hbb-section-label-size);
  font-weight: var(--hbb-font-semibold);
  color: var(--hbb-gold);
  text-transform: uppercase;
  letter-spacing: var(--hbb-section-label-spacing);
  display: block;
  margin-bottom: var(--hbb-spacing-sm);
}

/* Responsive Section Titles */
@media (max-width: 768px) {
  .sec-title,
  .hbb-section__title,
  .section-title {
    font-size: var(--hbb-section-title-size-mobile);
  }
}

/* ============================================
   5. CARD TITLES
   Tüm card bileşenleri için birleştirilmiş başlık sistemi
   ============================================ */

.blog-title,
.box-title,
.box-title2,
.hbb-card__title,
.card-title {
  font-family: 'Anek Latin', 'DM Sans', sans-serif;
  font-size: var(--hbb-font-xl);
  font-weight: var(--hbb-font-bold);
  color: var(--hbb-navy);
  line-height: 1.4;
  margin-bottom: var(--hbb-spacing-sm);
}

.hbb-card__subtitle,
.card-subtitle {
  font-size: var(--hbb-font-sm);
  color: var(--hbb-text-light);
  margin-bottom: var(--hbb-spacing-xs);
}

.hbb-card__text,
.card-text {
  font-size: var(--hbb-font-base);
  color: var(--hbb-text);
  line-height: 1.6;
}

/* Event Card Specific */
.event-detail .box-title2 {
  font-size: clamp(1.05rem, 1.3vw, 1.25rem);
}

.event-detail .box-text {
  font-size: 0.975rem;
  color: #46566a;
}

.event-detail .price {
  font-size: var(--hbb-font-base);
  font-weight: var(--hbb-font-semibold);
  color: #10325b;
}

/* ============================================
   6. NEWS COMPONENTS
   Haber ve slider başlıkları
   ============================================ */

.hbb-news-title,
.news-title {
  font-size: var(--hbb-font-3xl);
  font-weight: var(--hbb-font-bold);
  color: var(--hbb-navy);
  line-height: 1.3;
}

.hbb-news-label,
.news-label {
  font-size: var(--hbb-section-label-size);
  font-weight: var(--hbb-font-semibold);
  color: var(--hbb-gold);
  text-transform: uppercase;
  letter-spacing: var(--hbb-section-label-spacing);
}

.hbb-news-slide__title {
  font-size: var(--hbb-news-slide-title-size);
  font-weight: var(--hbb-font-semibold);
  color: var(--hbb-white);
  line-height: 1.4;
}

/* Responsive News */
@media (max-width: 768px) {
  .hbb-news-title,
  .news-title {
    font-size: var(--hbb-section-title-size-mobile);
  }

  .hbb-news-slide__title {
    font-size: var(--hbb-news-slide-title-mobile);
  }
}

/* ============================================
   7. MAYOR CARD
   Başkan kartı metinleri
   ============================================ */

.hbb-mayor-card__name {
  font-size: var(--hbb-mayor-card-name-size);
  font-weight: var(--hbb-font-bold);
  color: var(--hbb-navy);
  margin-bottom: var(--hbb-spacing-xs);
}

.hbb-mayor-card__title {
  font-size: var(--hbb-font-sm);
  font-weight: var(--hbb-font-medium);
  color: var(--hbb-gold);
  text-transform: uppercase;
  margin-bottom: var(--hbb-spacing-sm);
}

.hbb-mayor-card__description {
  font-size: var(--hbb-mayor-card-desc-size);
  color: var(--hbb-text);
  line-height: 1.6;
}

/* ============================================
   8. NAVIGATION
   Menü ve navigasyon metinleri
   ============================================ */

.hbb-nav__link {
  font-weight: var(--hbb-font-medium);
  color: var(--hbb-navy);
  transition: color 0.3s ease;
}

.hbb-nav__link--active {
  font-weight: var(--hbb-font-semibold);
  color: var(--hbb-gold);
}

.hbb-nav__dropdown-link {
  color: var(--hbb-text);
}

.hbb-header__top {
  font-size: var(--hbb-font-sm);
  color: var(--hbb-white);
}

@media (max-width: 768px) {
  .hbb-header__top {
    font-size: var(--hbb-font-xs);
  }
}

/* ============================================
   9. FOOTER
   Footer metinleri
   ============================================ */

.hbb-footer__title {
  font-size: var(--hbb-font-xl);
  font-weight: var(--hbb-font-bold);
  color: var(--hbb-gold);
  margin-bottom: var(--hbb-spacing-md);
}

.hbb-footer__text {
  color: var(--hbb-white);
  line-height: 1.7;
}

.hbb-footer__link {
  color: rgba(255, 255, 255, 0.8);
  transition: color 0.3s ease;
}

.hbb-footer__link:hover {
  color: var(--hbb-white);
}

.hbb-footer__copyright {
  font-size: var(--hbb-font-sm);
  color: rgba(255, 255, 255, 0.6);
}

.hbb-footer__info-icon {
  font-size: var(--hbb-font-sm);
  color: var(--hbb-navy);
}

/* ============================================
   10. BUTTONS
   Button metinleri
   ============================================ */

.hbb-btn,
.th-btn {
  font-size: var(--hbb-font-base);
  font-weight: var(--hbb-font-semibold);
  line-height: 1;
}

.hbb-btn--sm {
  font-size: var(--hbb-font-sm);
}

.hbb-btn--lg {
  font-size: var(--hbb-font-lg);
}

/* ============================================
   11. ORGANIZATIONAL CHART
   Organizasyon şeması metinleri
   ============================================ */

.org-chart-name {
  font-size: var(--hbb-font-xl);
  font-weight: var(--hbb-font-bold);
  color: var(--hbb-text);
}

.org-chart-title {
  font-size: var(--hbb-font-sm);
  font-weight: var(--hbb-font-semibold);
  color: var(--hbb-white);
}

.org-chart-department {
  font-size: var(--hbb-font-sm);
  color: var(--hbb-text-light);
}

@media (max-width: 768px) {
  .org-chart-name {
    font-size: var(--hbb-font-base);
  }

  .org-chart-title,
  .org-chart-department {
    font-size: var(--hbb-font-xs);
  }
}

/* ============================================
   12. BADGES & LABELS
   Etiket ve badge metinleri
   ============================================ */

.hbb-badge,
.hbb-card__badge,
.badge {
  font-size: var(--hbb-font-xs);
  font-weight: var(--hbb-font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ============================================
   13. UTILITY CLASSES
   Yardımcı tipografi class'ları
   ============================================ */

/* Font Size Utilities */
.text-xs { font-size: var(--hbb-font-xs) !important; }
.text-sm { font-size: var(--hbb-font-sm) !important; }
.text-base { font-size: var(--hbb-font-base) !important; }
.text-lg { font-size: var(--hbb-font-lg) !important; }
.text-xl { font-size: var(--hbb-font-xl) !important; }
.text-2xl { font-size: var(--hbb-font-2xl) !important; }
.text-3xl { font-size: var(--hbb-font-3xl) !important; }
.text-4xl { font-size: var(--hbb-font-4xl) !important; }

/* Font Weight Utilities */
.font-normal { font-weight: var(--hbb-font-normal) !important; }
.font-medium { font-weight: var(--hbb-font-medium) !important; }
.font-semibold { font-weight: var(--hbb-font-semibold) !important; }
.font-bold { font-weight: var(--hbb-font-bold) !important; }

/* Text Color Utilities */
.text-navy { color: var(--hbb-navy) !important; }
.text-navy-light { color: var(--hbb-navy-light) !important; }
.text-gold { color: var(--hbb-gold) !important; }
.text-white { color: var(--hbb-white) !important; }
.text-dark { color: var(--hbb-text) !important; }
.text-light { color: var(--hbb-text-light) !important; }
.text-muted { color: var(--hbb-text-muted) !important; }

/* Status Color Utilities */
.text-success { color: var(--hbb-success) !important; }
.text-warning { color: var(--hbb-warning) !important; }
.text-danger { color: var(--hbb-danger) !important; }
.text-info { color: var(--hbb-info) !important; }

/* Line Height Utilities */
.leading-none { line-height: 1 !important; }
.leading-tight { line-height: 1.25 !important; }
.leading-snug { line-height: 1.375 !important; }
.leading-normal { line-height: 1.5 !important; }
.leading-relaxed { line-height: 1.625 !important; }
.leading-loose { line-height: 2 !important; }

/* Letter Spacing Utilities */
.tracking-tighter { letter-spacing: -0.05em !important; }
.tracking-tight { letter-spacing: -0.025em !important; }
.tracking-normal { letter-spacing: 0 !important; }
.tracking-wide { letter-spacing: 0.025em !important; }
.tracking-wider { letter-spacing: 0.05em !important; }
.tracking-widest { letter-spacing: 0.1em !important; }

/* Text Transform Utilities */
.uppercase { text-transform: uppercase !important; }
.lowercase { text-transform: lowercase !important; }
.capitalize { text-transform: capitalize !important; }
.normal-case { text-transform: none !important; }

/* Text Alignment Utilities */
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-justify { text-align: justify !important; }

/* Text Decoration Utilities */
.underline { text-decoration: underline !important; }
.line-through { text-decoration: line-through !important; }
.no-underline { text-decoration: none !important; }

/* ============================================
   14. LINK STYLES
   Link metinleri
   ============================================ */

a {
  color: var(--hbb-navy);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--hbb-gold);
}

a:focus-visible {
  outline: 2px solid var(--hbb-gold);
  outline-offset: 2px;
}

/* ============================================
   15. LISTS
   Liste stilleri
   ============================================ */

ul, ol {
  margin: 0 0 1.125rem 0;
  padding-left: 1.5rem;
}

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

/* ============================================
   16. BLOCKQUOTES
   Alıntı metinleri
   ============================================ */

blockquote {
  margin: 0 0 1.125rem 0;
  padding-left: 1.5rem;
  border-left: 4px solid var(--hbb-gold);
  font-style: italic;
  color: var(--hbb-text-light);
}

/* ============================================
   17. CODE & PRE
   Kod bloğu metinleri
   ============================================ */

code {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.9em;
  background-color: rgba(0, 0, 0, 0.05);
  padding: 0.125rem 0.25rem;
  border-radius: 3px;
}

pre {
  font-family: 'Courier New', Courier, monospace;
  font-size: var(--hbb-font-sm);
  background-color: rgba(0, 0, 0, 0.05);
  padding: 1rem;
  border-radius: 6px;
  overflow-x: auto;
  margin: 0 0 1.125rem 0;
}

pre code {
  background-color: transparent;
  padding: 0;
}