/*
 * Projeye ait EK stiller.
 *
 * Orijinal dosyalar (style.css, dark.css, ...) arsivdeki hali korunsun diye
 * hic degistirilmiyor; sonradan gereken kurallar buraya yaziliyor.
 * Bu dosya <link> sirasinda en sonda yuklenir.
 */

/* ============ Anime detay ust yerlesimi ============
   Dis tablo: solda kapak sutunu, sagda kunye. */
.detayUst {
  width: 100%;
  table-layout: fixed;
}
.detayUst > tbody > tr > td:first-child {
  width: 235px;
}

/* ============ Kunye tablosu ============
   table-layout:fixed olmadan uzun degerler (fansub rozetleri, puan metni)
   tabloyu panelden tasirip yatay kaydirma aciyordu. */
.detayTablo {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}
.detayTablo > tbody > tr > td {
  border: 1px solid #ddd;
  padding: 6px 10px;
  vertical-align: middle;
  /* Uzun basliklar ve rozetler hucre icinde satir atlasin */
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.detayTablo > tbody > tr > td:first-child {
  width: 120px;
}
.detayTablo > tbody > tr > td.ayrac {
  width: 16px;
  text-align: center;
  padding: 6px 0;
}

/* Koyu temada hucre cizgileri tema rengine sabitlenir */
body.dark .detayTablo > tbody > tr > td {
  border-color: #17191f;
}
body.dark .detayTablo > tbody > tr > td:first-child,
body.dark .detayTablo > tbody > tr > td.ayrac {
  background: #1e2026;
}

/* Ozet satiri hucre cizgisi tasimaz */
.detayTablo > tbody > tr > td.ozetHucre {
  border-left: none;
  border-right: none;
}

/* Buton grubu hucreden tasmasin (Bootstrap 3 float'lari kendiliginden sarar) */
.detayTablo .btn-group {
  max-width: 100%;
}

/* ============ Kapak alani ============ */
.imaj {
  display: inline-block;
  position: relative;
  line-height: 0;
  max-width: 100%;
}
.imaj img {
  max-width: 100%;
  height: auto;
}

/* ============ Dar ekran ============
   col-xs-* hicbir kirilimda yigilmadigi icin detay ustu burada elle yigiliyor:
   kapak sutunu ustte, kunye altta. */
@media (max-width: 991px) {
  .detayUst,
  .detayUst > tbody,
  .detayUst > tbody > tr {
    display: block;
    width: 100%;
  }
  .detayUst > tbody > tr > td {
    display: block;
    width: 100% !important;
  }
  .detayUst > tbody > tr > td:first-child {
    margin-bottom: 10px;
  }
  .detayTablo > tbody > tr > td:first-child {
    width: 100px;
  }
}

/* Panel govdesinde yatay kaydirma olusmasin */
#detayPaylas .table-responsive {
  overflow-x: visible;
}

/* ============ Kaydirma cubuklari ============
   Orijinalde kayan paneller perfect-scrollbar eklentisiyle
   (.ps-container / .ps-theme-genel) cizdiriliyordu. Eklenti yerine
   tarayicinin kendi kaydirma cubugu temaya uyduruldu. */

/* Firefox */
html {
  scrollbar-width: thin;
  scrollbar-color: #c1c1c1 #f1f1f1;
}
body.dark,
body.dark * {
  scrollbar-color: #3a3d47 #1e2026;
}

/* WebKit / Blink */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
::-webkit-scrollbar-corner {
  background: transparent;
}

body.dark ::-webkit-scrollbar-track {
  background: #1e2026;
}
body.dark ::-webkit-scrollbar-thumb {
  background: #3a3d47;
  border: 2px solid #1e2026;
  border-radius: 5px;
}
body.dark ::-webkit-scrollbar-thumb:hover {
  background: #4f5460;
}

/* Kayan panel govdesi: sabit yukseklik + dikey kaydirma.
   Orijinaldeki .ps-container'larin yerini tutar. */
.kaydir {
  overflow-y: auto;
  overflow-x: hidden;
}

/* Kenar sutunundaki uzun listeler (Tam Liste, Bölümler, Türler)
   sayfayi asiri uzatmasin diye sinirlandirildi. */
.yanSutunIcerik {
  max-height: 420px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ============ Profil ============
   Kapak ve avatar mock veride bos; gorsel gelene kadar
   accentColor'dan uretilen yer tutucu kullanilir. */
.avatarYer {
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
  font-size: 64px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  user-select: none;
}

/* Kapak uzerindeki ad bloklari koyu zeminde okunakli kalsin */
.KapakResmi h2 {
  margin: 0;
}
.KapakResmi h2 p {
  margin: 4px 0 0;
}

/* Dar ekranda ad, avatarin uzerine binmesin */
@media (max-width: 767px) {
  .KapakResmi h2 {
    left: 15px !important;
    font-size: 22px;
  }
}

/* ============ Anime listesi filtre cubugu ============
   Orijinal btn-group gorunumu korunur; tek fark satirlarin
   duzgun sarmasi icin float yerine flex kullanilmasi. */
.filtreSatiri {
  display: flex;
  align-items: flex-start;
  margin-bottom: 8px;
}
.filtreSatiri > .filtreAd {
  flex: 0 0 76px;
  padding-top: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  opacity: 0.75;
}
.filtreSatiri > .filtreSecenekler {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* Aktif filtre ozeti */
.aktifFiltreler {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #ddd;
}
body.dark .aktifFiltreler {
  border-top-color: #17191f;
}
.aktifFiltreler .filtreAd {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  opacity: 0.75;
  margin-right: 4px;
}

/* Arama kutusu filtre panelinin ustunde */
.filtreArama {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}
.filtreArama input {
  flex: 1 1 auto;
  min-width: 0;
}

/* Dar ekranda etiket ustte dursun */
@media (max-width: 767px) {
  .filtreSatiri {
    display: block;
  }
  .filtreSatiri > .filtreAd {
    margin-bottom: 4px;
  }
}

/* ============ Video sayfasi alt bilgisi ============
   Tarih solda, butonlar sagda. Dar alanda butonlar alt satira gecer;
   float kullanildiginda tarih yazisinin uzerine biniyordu. */
.videoAltBilgi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.videoTarih {
  flex: 1 1 auto;
  min-width: 0;
}
.videoButonlar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* Dar ekranda butonlar tam genislige yayilsin */
@media (max-width: 767px) {
  .videoButonlar {
    margin-left: 0;
    width: 100%;
  }
}

/* ============ Site logosu ============
   Orijinal kural mutlak adrese bagliydi:
     img[src^="//www.turkanime.co/imajlar/logo.png"]{max-width:200px}
   Gorseller yerel yola tasininca (/imajlar/logo.png) eslesmez oldu ve
   logo 1959x803'luk dogal boyutuyla basilmaya basladi. Ayni sinir
   burada sinif uzerinden yeniden tanimlanir. */
.siteLogo {
  display: block;
  width: 100%;
  max-width: 200px;
  height: auto;
}

/* ============ Header: arama kutusu ============
   Orijinal kural (#search input[type="search"]) 150px sabit genislikteydi
   ve odak durumu yoktu. Gorunum korunur; sadece genisletilir,
   koseler yuvarlatilir ve odaklanildigi belli olur. */
#search input[type="search"] {
  width: 190px;
  border-radius: 4px;
  transition: width 0.25s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
#search input[type="search"]:focus {
  width: 280px;
  outline: none;
  background-color: #3a3a3a;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.2) inset,
    0 0 0 2px rgba(124, 92, 255, 0.55);
}
#search input[type="search"]::placeholder {
  color: #8b90a0;
}
/* Tarayicinin kendi temizleme carpisi koyu zeminde gorunmuyordu */
#search input[type="search"]::-webkit-search-cancel-button {
  filter: invert(0.7);
  cursor: pointer;
}

@media (max-width: 991px) {
  #search input[type="search"],
  #search input[type="search"]:focus {
    width: 150px;
  }
}

/* ============ Header: tema dugmesi ============
   dark.css'teki `.toggleDark .sun/.moon { width: 22px }` kurali orijinaldeki
   <img> ikonlari icindi. Ikon fontuna gecince genislik ikonu sikistiriyordu;
   burada ikon olarak boyutlandirilir. */
.toggleDark {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  height: 50px;
  cursor: pointer;
}
.toggleDark .sun,
.toggleDark .moon {
  width: auto;
  font-size: 19px;
  line-height: 1;
  color: #c5c8ce;
  transition: color 0.2s ease, transform 0.2s ease;
}
.toggleDark:hover .sun {
  color: #ffc107;
}
.toggleDark:hover .moon {
  color: #9db4ff;
}
.toggleDark:focus-visible {
  outline: 2px solid rgba(124, 92, 255, 0.7);
  outline-offset: -2px;
  border-radius: 4px;
}

/* ============ Site formlari ============
   Bootstrap'in `form-horizontal` sinifi .form-group'lara negatif yan
   bosluk verir; alanlar izgaraya konulmadan kullanilinca panel disina
   tasiyordu. Formlar bunun yerine bu sinifi kullanir. */
.siteForm .form-group {
  margin-bottom: 16px;
}
.siteForm label {
  display: block;
  margin-bottom: 5px;
}
.siteForm .form-control {
  width: 100%;
  height: auto;
  padding: 9px 12px;
  border-radius: 4px;
}
.siteForm .help-block {
  margin-top: 5px;
  font-size: 12px;
  opacity: 0.75;
}
.siteForm .btn-block {
  padding: 10px;
  font-weight: 700;
}

/* Onay kutulu satirlar: kutu ile metin ayni hizada */
.siteForm .onayKutusu {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-weight: normal;
  margin: 0;
}
.siteForm .onayKutusu input[type="checkbox"] {
  margin: 3px 0 0;
  flex: 0 0 auto;
}

/* "Beni hatırla" + "Şifremi unuttum" satiri */
.siteForm .formSatir {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

body.dark .siteForm .form-control {
  background-color: #1a1c22;
  border-color: #2b2e37;
  color: #c5c8ce;
}
body.dark .siteForm .form-control:focus {
  border-color: #7c5cff;
  box-shadow: 0 0 0 2px rgba(124, 92, 255, 0.25);
}
body.dark .siteForm .form-control::placeholder {
  color: #7d8292;
}

/* ============ Karsilama paneli ============
   Siteye ilk girisde acilan Zerstudios tanitim penceresi.
   Bootstrap modal eklentisi yerine kendi katmanimiz. */
.karsilamaArka {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.72);
  overflow-y: auto;
}
.karsilamaKutu {
  width: 100%;
  max-width: 560px;
  margin: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.karsilamaKutu .panel-ust {
  position: relative;
}
.karsilamaKapat {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: inherit;
  font-size: 24px;
  line-height: 1;
  opacity: 0.7;
  cursor: pointer;
}
.karsilamaKapat:hover {
  opacity: 1;
}
.karsilamaGiris {
  margin: 0 0 14px;
}

/* One cikan platform karti */
.karsilamaOne,
.karsilamaKart {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.2s ease, transform 0.15s ease;
}
.karsilamaOne {
  border-width: 2px;
  margin-bottom: 4px;
}
.karsilamaOne:hover,
.karsilamaKart:hover {
  text-decoration: none;
  color: inherit;
  transform: translateY(-1px);
}
body.dark .karsilamaOne:hover,
body.dark .karsilamaKart:hover {
  background-color: #22242b;
}
.karsilamaKart {
  border-color: #2b2e37;
}

.karsilamaIkon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: #fff;
  font-size: 20px;
}
.karsilamaIkon.kucuk {
  width: 34px;
  height: 34px;
  font-size: 15px;
}

.karsilamaMetin {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.karsilamaMetin strong {
  font-size: 15px;
}
.karsilamaMetin span {
  font-size: 12px;
  opacity: 0.8;
  line-height: 1.5;
}
.karsilamaGit {
  flex: 0 0 auto;
}

.karsilamaAyrac {
  margin: 16px 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  opacity: 0.6;
}
.karsilamaListe {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.karsilamaAlt {
  text-align: right;
}

@media (max-width: 575px) {
  .karsilamaOne {
    flex-wrap: wrap;
  }
  .karsilamaGit {
    width: 100%;
    text-align: center;
  }
}

/* ============ Footer: Zerstudios serit ============ */
.studioSerit {
  border-top: 1px solid #2b2e37;
  padding: 12px 0;
  font-size: 12px;
}
body.dark .studioSerit {
  background: #1a1c22;
  border-top-color: #17191f;
}
.studioSerit .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
}
.studioAd {
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  opacity: 0.85;
}
.studioBaglantilar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-left: auto;
}
.studioBaglantilar a {
  opacity: 0.85;
}
.studioBaglantilar a:hover {
  opacity: 1;
  text-decoration: none;
}

@media (max-width: 767px) {
  .studioBaglantilar {
    margin-left: 0;
  }
}

/* ============ Sezon secici ============
   Orijinal sitede sezon kavrami yoktu; Animezer semasindaki
   episodes.season kolonu icin eklendi. Filtre cubuguyla ayni dil. */
.sezonSecici {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ddd;
}
body.dark .sezonSecici {
  border-bottom-color: #2b2e37;
}
.sezonSecici > .sezonAd {
  padding-top: 5px;
  margin-right: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  opacity: 0.75;
}
.sezonSecici > .sezonSecenekler {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}

/* Kenar sutununda dar alan: butonlar kucultulur */
.yanSutunIcerik ~ .sezonSecici,
#aktif-icerik .sezonSecici {
  margin-bottom: 8px;
}

/* ============ Detay sayfasi bolum listesi ============ */
.bolumListesi {
  max-height: 520px;
  overflow-y: auto;
  overflow-x: hidden;
}
.bolumListesi .list-group-item {
  padding: 8px 12px;
}
.bolumRozet {
  margin-left: 8px;
  font-size: 10px;
  vertical-align: middle;
}

/* ============ Filtre acilir listeleri ============
   Tur (63) ve yil (31) buton olarak basildiginda cubuk okunmaz
   hale geliyordu; bu ikisi acilir listeye alindi. */
.filtreAcilirlar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.filtreSecim {
  flex: 1 1 180px;
  min-width: 0;
  max-width: 260px;
  height: auto;
  padding: 6px 10px;
  border-radius: 4px;
}
body.dark .filtreSecim {
  background-color: #1a1c22;
  border-color: #2b2e37;
  color: #c5c8ce;
}
body.dark .filtreSecim:focus {
  border-color: #7c5cff;
  box-shadow: 0 0 0 2px rgba(124, 92, 255, 0.25);
  outline: none;
}

@media (max-width: 575px) {
  .filtreSecim {
    max-width: none;
    flex-basis: 100%;
  }
}

/* ============ S.S.S. ============ */
.sssListe .sssMadde {
  border-radius: 0;
  padding: 14px 16px;
}
.sssSoru {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
}
.sssNo {
  flex: 0 0 auto;
  min-width: 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  border-radius: 4px;
  background: #1f1f1f;
  color: #fff;
  font-size: 11px;
}
.sssCevap {
  margin: 0;
  padding-left: 32px;
  line-height: 1.65;
  opacity: 0.92;
}

@media (max-width: 575px) {
  .sssCevap {
    padding-left: 0;
  }
}

/* ============ Kart izgarasi ============
   Float izgarada farkli yukseklikteki kartlar birbirine takilip
   aralarinda bosluk birakiyordu; flex ile satir bazinda esitlenir. */
.kartIzgara {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.kartIzgara > [class*="col-"] {
  display: flex;
  float: none;
}
.kartIzgara > [class*="col-"] > .panel {
  width: 100%;
  margin-bottom: 0;
}

/* ============ Arama kutusu + Ara butonu ============
   Buton ikon ve metni alt alta sarip kutudan uzun kaliyordu. */
.filtreArama {
  align-items: stretch;
}
.filtreArama input {
  height: auto;
}
.filtreArama .btn {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  padding-top: 0;
  padding-bottom: 0;
}

/* ============ Karakter & Seslendiren ============ */
.karakterIzgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  padding: 10px;
}
.karakterKart {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid #2b2e37;
  border-radius: 6px;
  min-width: 0;
}
body.dark .karakterKart {
  background: #1a1c22;
}
.karakterGorsel {
  flex: 0 0 auto;
  width: 48px;
  height: 64px;
  object-fit: cover;
  border-radius: 4px;
}
.karakterHarf {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #3a3d47;
  color: rgba(255, 255, 255, 0.85);
  font-size: 20px;
  font-weight: 700;
}
.karakterBilgi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.karakterBilgi strong {
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: break-word;
}
.karakterBilgi span {
  font-size: 11px;
}
.karakterSes {
  opacity: 0.85;
}

/* ============ Animeden Kareler ============
   Ayri ekran goruntusu tablosu olmadigi icin bolum kareleri gosterilir. */
.karelerIzgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
  padding: 10px;
}
.kareKutu {
  position: relative;
  display: block;
  border-radius: 6px;
  overflow: hidden;
  line-height: 0;
}
.kareKutu img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.25s ease;
}
.kareKutu:hover img {
  transform: scale(1.04);
}
.kareEtiket {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 8px 6px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  color: #fff;
  font-size: 11px;
  line-height: 1.4;
}
.kareKutu:hover .kareEtiket {
  text-decoration: none;
}

/* ============ Detay sayfasi sol sutun ============
   Kapak `.thumbnail.pull-left` ile float'lanir; alt menu float'i
   temizlemezse hucrenin tepesinden baslayip kapagin uzerine biniyor. */
.detayMenu {
  clear: both;
}
.detayUst .thumbnail.pull-left {
  float: none;
  display: block;
  margin-bottom: 10px;
}

/* ============ Oynatici: ekip ve sunucu secimi ============
   Ust satir ceviri ekibi, alt satir o ekibin sunuculari. */
.kaynakSatiri {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.kaynakSatiri > .kaynakAd {
  flex: 0 0 110px;
  padding-top: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  opacity: 0.75;
}
.kaynakSatiri > .kaynakSecenekler {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.kaynakRozet {
  margin-left: 6px;
  font-size: 10px;
  vertical-align: middle;
}
/*
  "N kalite" rozeti: dolu yesil zemin dugmenin kendi rengiyle yarisiyordu.
  Saydam zemin + ince cerceve, bilgiyi okunur birakip dikkati dugmede tutuyor.
*/
.kaliteRozet {
  background: transparent;
  border: 1px solid currentColor;
  color: inherit;
  opacity: 0.75;
  font-weight: 600;
}

/* Oynatici cercevesi - en-boy orani korunur */
.oynaticiCerceve {
  position: relative;
  height: 0;
  background: #000;
  margin-top: 10px;
  border-radius: 4px;
  overflow: hidden;
  transition: padding-bottom 0.25s ease;
}
.oynaticiCerceve iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/*
  AzPlayer kendi kabini %100 en/boy ile dolduruyor (.az-player);
  en-boy oranini koruyan cerceve icinde konumlanabilmesi icin
  mutlak konumlu bir yuvaya alinir.
*/
.azPlayerYuva {
  position: absolute;
  inset: 0;
}
.oynaticiBos {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  text-align: center;
  color: #8b90a0;
}

/* Alt satir: sinema modu dugmesi */
.oynaticiAlt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

/* ============ Oynatici altindaki ekip bilgisi ============
   Ust satirda ekip karti ile BD & SSZ aciklamasi yan yana,
   altinda tam genislikte DİKKAT! notu. */
.fansubBolumu {
  margin-top: 15px;
}
.fansubSerit {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
}
/* Kart biraz genis tutulur - alt satirdaki uc buton tek satira sigsin */
.fansubSerit > .fansubKart {
  flex: 1.2 1 300px;
  min-width: 0;
  margin-bottom: 0;
}
.fansubKart .panel-footer {
  padding-left: 10px;
  padding-right: 10px;
}
.fansubSerit > .fansubKalite {
  flex: 1 1 260px;
  min-width: 0;
  margin-bottom: 0;
}
.fansubKalite p {
  font-size: 12px;
  line-height: 1.6;
}
.fansubKart .panel-body {
  overflow: hidden;
}
/* Ekip tablosunda etiket sutunu dar kalsin, deger sutunu esnesin */
.fansubTablo > tbody > tr > td:first-child {
  width: 40%;
}
.fansubRutbe {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
}
.fansubButonlar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}
.fansubButonlar > .btn {
  border-radius: 4px;
  /* Uc buton dar kartta da tek satirda kalsin */
  padding-left: 8px;
  padding-right: 8px;
  white-space: nowrap;
}
.fansubUyari {
  margin-top: 12px;
  margin-bottom: 0;
}
.fansubUyari p {
  font-size: 12px;
  line-height: 1.6;
  margin-bottom: 4px;
}
.fansubKunye {
  margin-top: 8px;
  font-weight: 700;
}

@media (max-width: 767px) {
  .kaynakSatiri {
    display: block;
  }
  .kaynakSatiri > .kaynakAd {
    display: block;
    margin-bottom: 4px;
  }
  .fansubButonlar {
    justify-content: flex-start;
  }
}

/* ============ "Ne Çıkarsa Bahtıma!" ============
   Yerlesimin en altinda, tur butonlariyla rastgele anime secimi. */
.bahtima {
  margin: 15px 0;
}
.bahtima > .aciklama {
  font-size: 13px;
}
.bahtima .btn[disabled] {
  opacity: 0.55;
}
.bahtimaHata {
  margin: 8px 0 0;
  font-size: 12px;
  color: #d9534f;
}

/* ============ Yorumlar ============ */
.yorumSayac {
  margin-left: 8px;
  background: #7c5cff;
}
.yorumYaz {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
  border: 1px dashed #2b2e37;
  border-radius: 6px;
  font-size: 13px;
}
/* Yorum yazma kutusu - giris yapmis kullaniciya .yorumYaz yerine bu cikar */
.yorumForm {
  padding: 10px 12px;
  margin-bottom: 12px;
  border: 1px dashed #2b2e37;
  border-radius: 6px;
}
.yorumAlan {
  resize: vertical;
  min-height: 70px;
  font-size: 13px;
}
.yorumFormAlt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  font-size: 12px;
}
.yorumSecenek {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  font-weight: normal;
  cursor: pointer;
}
.yorumPuan {
  height: 26px;
  padding: 0 4px;
  color: inherit;
  background: transparent;
  border: 1px solid #2b2e37;
  border-radius: 4px;
}
/* Kalan karakter sayaci - gonder dugmesini saga iter */
.yorumKalan {
  margin-left: auto;
  opacity: 0.5;
}
.yorumKalan.az {
  color: #d9534f;
  opacity: 1;
}
.yorumHata {
  margin: 8px 0 0;
  font-size: 12px;
  color: #d9534f;
}

.yorumListe {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.yorumKarti {
  display: flex;
  gap: 10px;
  padding: 12px;
  border: 1px solid #2b2e37;
  border-radius: 6px;
}
body.dark .yorumKarti {
  background: #1a1c22;
}
.yorumAvatar {
  flex: 0 0 auto;
}
/*
  Avatar ve bas harf rozeti ayni olcude durur (UyeAvatar bileseni ikisinden
  birini cizer); boylece gorsel yuklenemeyince yerlesim kaymaz.
*/
.uyeAvatarGorsel,
.uyeAvatarHarf {
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  background: #3a3d47;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 700;
}
.uyeAvatarHarf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  user-select: none;
}
.yorumAvatar a {
  display: block;
  line-height: 0;
}
/* Yazar adi baglantisi metin rengini korusun, ustune gelince belli olsun */
.yorumYazar,
.yorumYazar:hover,
.yorumYazar:focus {
  color: inherit;
  text-decoration: none;
}
.yorumYazar:hover strong {
  text-decoration: underline;
}

/* Duzenle / Sil - alt satirda, sagda */
.yorumEylemler {
  margin-left: auto;
  display: inline-flex;
  gap: 10px;
}
.yorumEylem {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: 12px;
  opacity: 0.75;
  cursor: pointer;
}
.yorumEylem:hover:not(:disabled) {
  opacity: 1;
  text-decoration: underline;
}
.yorumEylem:disabled {
  opacity: 0.4;
  cursor: default;
}
.yorumEylemTehlike {
  color: #d9534f;
}
.yorumDuzenle {
  margin: 4px 0 2px;
}
.yorumGovde {
  flex: 1 1 auto;
  min-width: 0;
}
.yorumUst {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.yorumRozet {
  font-size: 10px;
}
.yorumTarih {
  margin-left: auto;
  font-size: 11px;
  opacity: 0.65;
}
.yorumMetin {
  margin: 0;
  line-height: 1.6;
  overflow-wrap: break-word;
}
.yorumSpoiler {
  display: block;
  width: 100%;
  padding: 10px;
  background: #2b2e37;
  border: 0;
  border-radius: 4px;
  color: #c5c8ce;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}
.yorumSpoiler:hover {
  background: #343844;
}
.yorumAlt {
  display: flex;
  gap: 14px;
  margin-top: 6px;
  font-size: 12px;
  opacity: 0.7;
}

/* Oynatici ile sunucu secimi arasina nefes payi */
.oynaticiCerceve + .kaynakSatiri {
  margin-top: 16px;
}

/* ============ Uyelik formlari ============
   Giris, kayit, sifre sifirlama ekranlarinin ortak parcalari. */
.formUyari {
  padding: 10px 12px;
  margin-bottom: 14px;
  font-size: 13px;
  line-height: 1.5;
}
.formAlanHata {
  display: block;
  margin-top: 5px;
  color: #d9534f;
  font-size: 12px;
  line-height: 1.4;
}
.formAciklama {
  margin-bottom: 14px;
  font-size: 13px;
  line-height: 1.6;
  opacity: 0.8;
}
.formAlt {
  margin: 14px 0 0;
  text-align: center;
  font-size: 13px;
}
.formYukleniyor {
  padding: 24px 0;
  text-align: center;
  font-size: 13px;
  opacity: 0.7;
}

/* ============ Ust menu: bildirim ve profil ============
   Bootstrap'in .dropdown/.open/.dropdown-menu siniflari kullaniliyor;
   acilip kapanmasi React tarafindan yonetiliyor (projede jQuery yok). */
.navbar-nav > li.uyeMenu {
  position: relative;
}
.uyeMenuTetik {
  display: flex !important;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.uyeMenuProfil .uyeAd {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.uyeAvatar {
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
.uyeAvatarBos {
  opacity: 0.85;
}

/* Okunmamis bildirim sayaci - zilin sag ustune oturur */
.uyeMenuTetik {
  position: relative;
}
.bildirimSayac {
  position: absolute;
  top: 6px;
  right: 0;
  padding: 2px 5px;
  font-size: 10px;
  line-height: 1;
  border-radius: 10px;
}

.uyeMenuKutu {
  min-width: 220px;
  padding: 0;
  border-radius: 4px;
  overflow: hidden;
}
.bildirimKutu {
  width: 320px;
  max-height: 60vh;
  overflow-y: auto;
}

/*
  Bootstrap'in acilir menu baglantilari hover'da zemini #f5f5f5'e, yaziyi da
  neredeyse beyaza cekiyor - koyu temada yazi zeminde kayboluyordu. Menu icindeki
  tum baglantilar icin hover burada yeniden tanimlanir (olculdu: normalde
  rgb(197,200,206), hover'da rgb(233,234,236) / #f5f5f5).
*/
.uyeMenuKutu > li > a,
.uyeMenuKutu > li > a:visited {
  color: inherit;
}
.uyeMenuKutu > li > a:hover,
.uyeMenuKutu > li > a:focus {
  background: rgba(127, 127, 127, 0.18) !important;
  color: inherit !important;
  text-decoration: none;
}

.uyeMenuBaslik {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-bottom: 1px solid rgba(127, 127, 127, 0.25);
}
.uyeMenuBaslikEylem {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
.uyeMenuKucukDugme {
  padding: 0;
  border: 0;
  background: none;
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  color: inherit;
  opacity: 0.75;
}
.uyeMenuKucukDugme:hover {
  opacity: 1;
  text-decoration: underline;
}

.uyeMenuKimlik {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
}
.uyeMenuKimlikMetin {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.uyeMenuKimlikMetin strong,
.uyeMenuKimlikMetin small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.uyeMenuKimlikMetin small {
  opacity: 0.7;
}

.uyeMenuBos {
  padding: 18px 12px;
  text-align: center;
  font-size: 13px;
  opacity: 0.7;
}

/* Cikis, menudeki baglantilarla ayni gorunmeli ama <button> olmali */
.uyeMenuCikis {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  background: none;
  text-align: left;
  font-size: 13px;
  cursor: pointer;
  color: inherit;
}
.uyeMenuCikis:hover:not(:disabled) {
  background: rgba(127, 127, 127, 0.15);
}
.uyeMenuCikis:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Bildirim satiri - metin solda, "kaldir" dugmesi sagda */
.bildirimSatir {
  position: relative;
}
.bildirimSatir > a {
  display: block;
  padding: 10px 30px 10px 12px;
  border-bottom: 1px solid rgba(127, 127, 127, 0.15);
  white-space: normal;
  line-height: 1.45;
}
.bildirimSatir.okunmadi > a {
  /* Okunmamis olan sol kenardaki serit ile ayrilir */
  box-shadow: inset 3px 0 0 #b22222;
}

/* Tek bildirimi kaldirma - satirin uzerine gelince belirir */
.bildirimSil {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease;
}
.bildirimSatir:hover .bildirimSil,
.bildirimSil:focus {
  opacity: 0.7;
}
.bildirimSil:hover {
  opacity: 1;
  background: rgba(178, 34, 34, 0.25);
}

/* "Daha fazla göster" - listenin sonunda tam genislikte bir satir */
.bildirimDaha > button {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  background: none;
  font-size: 12px;
  cursor: pointer;
  color: inherit;
  opacity: 0.85;
}
.bildirimDaha > button:hover:not(:disabled) {
  background: rgba(127, 127, 127, 0.18);
  opacity: 1;
}
.bildirimDaha > button:disabled {
  cursor: default;
  opacity: 0.6;
}
.bildirimBaslik {
  display: block;
  font-size: 13px;
  font-weight: 700;
}
.bildirimMetin {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  opacity: 0.8;
}
.bildirimTarih {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  opacity: 0.6;
}

/* ============ Izleme listesi ve profil liste sekmesi ============ */
.listeGrubu + .listeGrubu {
  margin-top: 20px;
}
.listeGrupBaslik {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  padding-bottom: 6px;
  font-size: 14px;
  font-weight: 700;
  border-bottom: 1px solid rgba(127, 127, 127, 0.2);
}
.listeGrupSayi {
  margin-left: 6px;
  font-size: 10px;
  vertical-align: middle;
}

/* ============ Ayarlar ============ */
.ayarBolum + .ayarBolum {
  margin-top: 22px;
}
.ayarBolumBaslik {
  margin: 0 0 10px;
  padding-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-bottom: 1px solid rgba(127, 127, 127, 0.2);
}
.ayarHesapTablo {
  width: 100%;
  table-layout: fixed;
}

/* Tek ayar satiri: solda aciklama, sagda kontrol */
.ayarSatir {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 10px 0;
}
.ayarSatir + .ayarSatir {
  border-top: 1px solid rgba(127, 127, 127, 0.12);
}
.ayarMetin {
  flex: 1 1 auto;
  min-width: 0;
}
.ayarEtiket {
  display: block;
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.ayarAciklama {
  margin: 3px 0 0;
  font-size: 12px;
  line-height: 1.5;
  opacity: 0.7;
}
.ayarHata {
  margin: 4px 0 0;
  font-size: 12px;
  color: #d9534f;
}
.ayarKontrol {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding-top: 2px;
}
.ayarSecim {
  width: 130px;
}

/* Kaydetme geri bildirimi - yer kaplayip satiri oynatmasin diye sabit genislik */
.ayarDurum {
  display: inline-block;
  width: 14px;
  font-size: 12px;
  text-align: center;
  opacity: 0.7;
}
.ayarDurumTamam {
  color: #5cb85c;
  opacity: 1;
}

/* Ac/kapa anahtari - onay kutusu gorsel olarak gizlenir, ray cizilir */
.ayarAnahtar {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 22px;
  margin: 0;
  flex: none;
  cursor: pointer;
}
.ayarAnahtar input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.ayarAnahtarRay {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(127, 127, 127, 0.35);
  transition: background 0.15s ease;
}
.ayarAnahtarRay::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s ease;
}
.ayarAnahtar input:checked + .ayarAnahtarRay {
  background: #b22222;
}
.ayarAnahtar input:checked + .ayarAnahtarRay::after {
  transform: translateX(20px);
}
.ayarAnahtar input:focus-visible + .ayarAnahtarRay {
  outline: 2px solid #b22222;
  outline-offset: 2px;
}

@media (max-width: 767px) {
  .ayarSatir {
    flex-wrap: wrap;
  }
  .ayarKontrol {
    width: 100%;
    justify-content: flex-end;
  }
}

/* ============ Bolum begenisi ============ */
.begeniKutu {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.begeniUyari {
  font-size: 12px;
  opacity: 0.85;
}
.begeniGiris {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
}

/* ============ Ayarlardaki hesap formlari ============ */
.hesapForm {
  max-width: 420px;
}
.hesapForm .form-group {
  margin-bottom: 12px;
}
.hesapForm textarea {
  resize: vertical;
}

/* ============ İzleme listesi acilir menusu ============
   Secenekler artik <a> degil <button>: Bootstrap'in .dropdown-menu > li > a
   kurallari islemedigi icin ayni gorunum burada tanimlanir. */
.listeSecenek {
  display: block;
  width: 100%;
  padding: 3px 20px;
  border: 0;
  background: none;
  color: inherit;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.listeSecenek:hover,
.listeSecenek:focus {
  background: rgba(127, 127, 127, 0.15);
}
.dropdown-menu > li.active > .listeSecenek {
  font-weight: 700;
}
/* Secili durumun yanindaki onay isareti sagda dursun */
.listeSeciliIsaret {
  float: right;
  margin-left: 10px;
}

/* ============ Bolum kartindaki eylem satiri ============
   Begen / izlenme / izlediklerime ekle - sagdan hizali tek satir. */
.kartButonlar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}
.kartButonlar .begeniKutu {
  gap: 0;
}

/* ==========================================================================
   MOBIL
   --------------------------------------------------------------------------
   Orijinal tasarim masaustu icin yazilmis: `.container` min-width 1000px ve
   yerlesim Bootstrap 3'un `col-xs-*` siniflariyla kurulu. `col-xs-*` HICBIR
   genislikte alt alta gecmez - 390px ekranda ana sutun 253px, kenar sutunu
   127px kaliyordu. Arsivden gelen mobil.css yalnizca container genisligini ve
   birkac kaydirma cubugunu duzeltiyor; asil yerlesim burada toparlaniyor.

   Bu blok EN SONDA duruyor: ek.css stil siralamasinin sonuncusu oldugu icin
   onceki dosyalari ezer.
   ========================================================================== */

/* Kart govdesi ve eylem satiri - masaustu degerleri (eskiden satir ici stildi) */
.kartGovde {
  padding: 5px;
  height: 150px;
  overflow: hidden;
}
.kartEylemSatiri {
  margin: 0 auto;
  position: absolute;
  right: 5px;
  bottom: 8px;
}

@media (max-width: 991px) {
  /*
    Kok duzeltme: style.css `.container`a min-width:1000px veriyor, arsivden
    gelen mobil.css bunu yalnizca 767px ALTINDA geri aliyor. Arada kalan
    768-991px araliginda (tabletler) container 1000px kaliyor ve
    `body{overflow:hidden}` yuzunden tasan kisim kaydirilamadan kirpiliyordu.
  */
  .container {
    min-width: 320px !important;
    max-width: 100%;
  }

  /* ---- Ana yerlesim: yan yana sutunlar alt alta ----
     Kirilim 991px: orijinal tasarim 1000px genislik istiyor, 768px'lik
     tabletlerde de iki sutun okunakli sigmiyor. */
  .row > .col-xs-8,
  .row > .col-xs-4,
  .row > .col-xs-3,
  .row > .col-xs-9 {
    width: 100%;
    float: none;
    padding-left: 5px;
    padding-right: 5px !important;
  }

  /* ---- Ust menu ----
     Bootstrap her iki listeye de `float:left!important` veriyor; float'i tek
     tek iptal edince listeler ust uste biniyordu. Container'i flex SUTUNA
     cevirip iki listeyi ayri satirlara koymak, float duzenini tamamen devre
     disi biraktigi icin daha saglam. */
  .navbar-fixed-top > .container {
    display: flex;
    flex-direction: column;
    padding: 0;
  }

  /* 1. satir: ana menu, sigmazsa yatay kaydirilir */
  .navbar-nav.navbar-left {
    order: 1;
    width: 100%;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    float: none !important;
    margin: 0 !important;
    white-space: nowrap;
  }
  .navbar-nav.navbar-left > li {
    float: none !important;
    flex: 0 0 auto;
  }
  .navbar-nav.navbar-left > li > a {
    padding: 12px 10px;
    font-size: 12px;
  }

  /* 2. satir: arama + tema + uye baglantilari */
  .navbar-nav.navbar-right,
  .navbar-nav.navbar-right:last-child {
    order: 2;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    float: none !important;
    margin: 0 0 5px !important;
    padding: 0 5px;
  }
  .navbar-nav.navbar-right > li {
    float: none !important;
  }
  /*
    Arama kutusu esneyen tek oge; 80px taban genislikle baslar ki yanindaki
    "Üye Girişi / Kayıt Ol" ekran disina tasmasin.
  */
  #search {
    flex: 1 1 80px;
    min-width: 0;
    margin: 0 !important;
    padding: 0;
    border: 0;
  }
  #search input[type="search"] {
    width: 100% !important;
    min-width: 0;
  }
  .navbar-nav.navbar-right > li > a {
    padding-left: 8px;
    padding-right: 8px;
    font-size: 12px;
    white-space: nowrap;
  }

  /* Sabit ust menu iki satira ciktigi icin govde ustten daha cok bosluk ister */
  body {
    padding-top: 96px;
  }

  /* ---- Bolum karti ---- */
  .kartGovde {
    height: auto;
  }
  /* Mutlak konumdan cikip normal akisa girer - metnin ustune binmesin */
  .kartEylemSatiri {
    position: static;
    display: block;
    margin-top: 8px;
  }
  .kartButonlar {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  /* ---- Kenar sutunu ---- */
  .yanSutunIcerik {
    max-height: 320px;
  }

  /* ---- Sekmeler ve alfabe: kesilmek yerine kaydirilir ---- */
  .panel-tabs,
  .nav-tabs {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  .panel-tabs > li,
  .nav-tabs > li {
    float: none;
    flex: 0 0 auto;
  }
  .btn-group.alphabet {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 5px;
  }
  .btn-group.alphabet > .btn {
    flex: 0 0 auto;
  }

  /* ---- Kunye tablosu: dar ekranda etiket sutunu kucultulur ---- */
  .detayTablo > tbody > tr > td:first-child {
    width: 84px;
    font-size: 12px;
  }

  /* ---- Oynatici alti ekip karti ---- */
  .fansubSerit {
    display: block;
  }
  .fansubSerit > .fansubKart,
  .fansubSerit > .fansubKalite {
    margin-bottom: 10px;
  }

  /* ---- Dokunma hedefleri: 36px altina dusmesin ---- */
  .btn-sm,
  .btn-xs {
    min-height: 32px;
  }
}

/* Cok dar telefonlar */
@media (max-width: 380px) {
  .navbar-nav.navbar-left > li > a {
    padding: 12px 7px;
    font-size: 11px;
  }
  .kartButonlar {
    gap: 3px;
  }
}