/* =========================================
   KOMUT ROTASI - MOBIL PROGRAMLAMA SOZLUK
   F6-14-S028: sozluk.html icindeki <style> blogundan tasindi
   ========================================= */
/* ============================================
   TEMA DEĞİŞKENLERİ (Mevcut)
   ============================================ */
:root {
  --mod-color: #ff4fa0;
  --mod-rgb: 255, 79, 160;
  --tray-act: rgba(255, 255, 255, .08);
  --ai5: #ff4fa0;
}

[data-theme="corporate"] {
  --mod-color: #2563eb;
  --mod-rgb: 37, 99, 235;
  --ai5: #2563eb;
  --tray-act: rgba(0, 0, 0, .04);
}

/* HERO */
.sozluk-hero {
  padding: 2rem 4vw 1.5rem;
  border-bottom: 1px solid var(--border);
}

.sozluk-hero-label {
  font: 700 .7rem/1 'JetBrains Mono', monospace;
  letter-spacing: .12em;
  color: var(--mod-color, var(--c1));
  margin-bottom: .75rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sozluk-hero-label::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 2px;
  background: var(--mod-color, var(--c1));
}

.sozluk-hero h1 {
  font: 800 2rem/1.15 'Montserrat', sans-serif;
  color: var(--text1);
  margin-bottom: .5rem;
}

.sozluk-hero h1 span {
  background: linear-gradient(110deg, var(--mod-color, var(--c1)), var(--ai5));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.sozluk-stats {
  display: flex;
  gap: 16px;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.stat-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: .6rem 1.2rem;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.stat-number {
  font: 800 1.4rem/1 'Montserrat', sans-serif;
  color: var(--mod-color, var(--c1));
}

.stat-label {
  font: 400 .75rem/1 'Inter', sans-serif;
  color: var(--text3);
}

/* ARAMA VE FİLTRE */
.sozluk-filters {
  padding: 1rem 4vw;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 60px;
  z-index: 90;
  backdrop-filter: blur(10px);
}

.search-box {
  flex: 1;
  min-width: 200px;
  position: relative;
}

.search-box input {
  width: 100%;
  padding: .7rem 1rem .7rem 2.5rem;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 10px;
  color: var(--text1);
  font-size: .85rem;
  transition: all .2s;
}

.search-box input:focus {
  outline: none;
  border-color: var(--mod-color, var(--c1));
}

.search-box i {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text3);
  font-size: .8rem;
}

.modul-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.filter-btn {
  padding: .4rem .9rem;
  border-radius: 20px;
  font: 600 .7rem/1 'JetBrains Mono', monospace;
  background: var(--bg3);
  border: 1px solid var(--border2);
  color: var(--text2);
  cursor: pointer;
  transition: all .2s;
}

.filter-btn:hover,
.filter-btn.active {
  background: rgba(var(--mod-rgb, 255, 79, 160), .12);
  border-color: var(--mod-color, var(--c1));
  color: var(--mod-color, var(--c1));
}

.filter-btn.reset {
  background: transparent;
  border-color: var(--border);
}

.filter-btn.reset:hover {
  border-color: var(--c3);
  color: var(--c3);
}

.result-info {
  font: 500 .7rem/1 'JetBrains Mono', monospace;
  color: var(--text3);
  white-space: nowrap;
}

/* SÖZLÜK GRİDİ */
.sozluk-body {
  padding: 2rem 4vw 4rem;
}

.term-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
  gap: 1rem;
}

.term-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: all .2s;
  position: relative;
}

.term-card:hover {
  border-color: var(--mod-color, var(--c1));
  transform: translateY(-2px);
}

.term-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 1rem 1.2rem .5rem;
  border-bottom: 1px solid var(--border);
}

.term-letter {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 800 1rem/1 'Montserrat', sans-serif;
  background: rgba(var(--mod-rgb, 255, 79, 160), .12);
  color: var(--mod-color, var(--c1));
}

.term-name {
  font: 600 .95rem/1.3 'Inter', sans-serif;
  color: var(--text1);
  flex: 1;
}

.term-mod-badge {
  font: 600 .55rem/1 'JetBrains Mono', monospace;
  padding: .2rem .5rem;
  border-radius: 5px;
  background: rgba(var(--mod-rgb, 255, 79, 160), .1);
  color: var(--mod-color, var(--c1));
  white-space: nowrap;
}

.term-body {
  padding: .8rem 1.2rem 1rem;
}

.term-def {
  font: 400 .82rem/1.55 'Inter', sans-serif;
  color: var(--text2);
  margin-bottom: .6rem;
}

.term-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: .5rem;
  padding-top: .5rem;
  border-top: 1px dashed var(--border);
}

.term-modul {
  font: 500 .6rem/1 'JetBrains Mono', monospace;
  color: var(--text3);
  display: flex;
  align-items: center;
  gap: 4px;
}

.term-modul i {
  font-size: .55rem;
}

.term-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

/* D1: terim kartından ilgili konuya geçiş. Sözlük verisindeki `konu`
   alanı eskiden hiç kullanılmıyordu; artık gerçek bir bağlantı üretiyor.
   Dokunma hedefi 44 px eşiğinin üstünde tutulur. */
.term-konu-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: .6rem;
  min-height: 44px;
  padding: .55rem .75rem;
  border: 1px solid color-mix(in srgb, var(--mod-color, var(--c1)), transparent 58%);
  border-radius: 10px;
  background: color-mix(in srgb, var(--mod-color, var(--c1)), transparent 92%);
  color: var(--mod-color, var(--c1));
  font: 700 .72rem/1.25 'Inter', sans-serif;
  text-decoration: none;
  transition: background .18s, border-color .18s;
}

.term-konu-link:hover {
  background: color-mix(in srgb, var(--mod-color, var(--c1)), transparent 84%);
  border-color: color-mix(in srgb, var(--mod-color, var(--c1)), transparent 40%);
}

.term-konu-link i {
  font-size: .62rem;
}

.term-tag {
  font: 500 .55rem/1 'JetBrains Mono', monospace;
  padding: .15rem .4rem;
  border-radius: 4px;
  background: var(--bg3);
  color: var(--text3);
}

/* BOŞ DURUM */
.empty-state {
  text-align: center;
  padding: 3rem;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 16px;
}

.empty-state i {
  font-size: 2.5rem;
  color: var(--text3);
  margin-bottom: 1rem;
  display: block;
}

.empty-state p {
  color: var(--text2);
}

/* ALFABETİK NAVIGASYON */
.alpha-nav {
  padding: 0 4vw .5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  border-bottom: 1px solid var(--border);
}

.alpha-nav-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 .7rem/1 'JetBrains Mono', monospace;
  background: var(--bg3);
  border: 1px solid var(--border2);
  color: var(--text2);
  cursor: pointer;
  transition: all .2s;
}

.alpha-nav-btn:hover,
.alpha-nav-btn.active {
  background: var(--mod-color, var(--c1));
  border-color: var(--mod-color, var(--c1));
  color: #fff;
}

.alpha-nav-btn.disabled {
  opacity: .3;
  cursor: not-allowed;
}

/* TEMA FAB */
.tfab {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 999;
}

.tray {
  position: absolute;
  bottom: calc(100% + 12px);
  right: 0;
  width: 220px;
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 14px;
  padding: 12px;
  display: none;
  flex-direction: column;
  gap: 6px;
}

.tray.open {
  display: flex;
}

.tray-label {
  font: 700 .6rem/1 'JetBrains Mono', monospace;
  letter-spacing: .12em;
  color: var(--text3);
  padding: 2px 4px 8px;
}

@media (max-width: 768px) {

  .sozluk-hero,
  .sozluk-filters,
  .sozluk-body,
  .alpha-nav {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .term-grid {
    grid-template-columns: 1fr;
  }

  .sozluk-filters {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    position: relative;
    top: 0;
  }

  .result-info {
    text-align: center;
  }
}

/* Kartın modül kimlik rengi (--mod-color, JS kart başına yazar) rozet
   oranıyla metin rengine karıştırılır: açık temada oran %100 (renk aynen),
   koyu temada %65 (koyu zeminde okunur kalsın diye açılır). Kural önceden
   yalnız açık temaya kapsanmıştı; koyu temada kontrast 3.29'du (25 Eylül 2026). */
.term-card .term-letter,
.term-card .term-mod-badge,
.term-card .term-konu-link {
  color: color-mix(in srgb, var(--mod-color, var(--c1)) var(--rozet-yazi-orani, 100%), var(--text1));
}

/* Koyu tema okunurluğu (25 Eylül 2026): modül rengindeki küçük yazılar rozet
   oranıyla açılır (açık temada oran %100 → renk aynen); etkin harf düğmesinin
   beyaz yazısı için koyu temada zemin %70 koyulaştırılır (pembe/indigo düz
   zeminde beyaz yazı 3.05'e düşüyordu). */
.sozluk-hero-label,
.stat-number,
.filter-btn.active {
  color: color-mix(in srgb, var(--mod-color, var(--c1)) var(--rozet-yazi-orani, 100%), var(--text1));
}
[data-theme="siber"] .alpha-nav-btn.active,
[data-theme=""] .alpha-nav-btn.active {
  background: color-mix(in srgb, var(--mod-color, var(--c1)) 70%, black);
  border-color: color-mix(in srgb, var(--mod-color, var(--c1)) 70%, black);
}