.ribbon {
  padding: 15px;
  height: 50px;
  background: #202030;
  clip-path: polygon(100% 0, 95% 50%, 100% 100%, 0% 100%, 5% 50%, 0% 0%);
  font-family: "font_condensed";
  text-transform: uppercase;
  color: #dddeda;
  letter-spacing: 0.18em;
  font-size: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1000px;
}



.w-30{
  width:30%!important
}
.w-70{
  width:70%!important
}
.pointer{
  cursor: pointer;
}
.text-shadow-white:hover{
  text-shadow: 2px 1px 12px white;
}

.text-hover-underline:hover{
  text-decoration: underline;
}

.notice-title{
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  text-align: start;
  text-decoration: none;
  color: #16324a;
  font-weight: bold;
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
  font-size: 0.9em;
  transition: color .2s ease;
}

.notice-title-icon{
  flex: none;
  font-size: .82em;
  color: #45a8b5;
}

.notice-title:hover{
  color: #1c7480;
  text-decoration: none;
}


.notice-body{
  margin-left: 0;
  margin-right: 0;
  margin-top: 4px;
  text-align: start;
  font-size: .85em;
  line-height: 1.5em;
  vertical-align: baseline;
  font-weight: 450;
  overflow-wrap: break-word;
  color: rgba(22, 50, 74, .75);
}

.notice-card,
.notice-card-last{
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 10px;
  box-shadow: 0 4px 18px rgba(20, 40, 60, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.55);
  height: 190px!important;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}

.notice-card{
  margin-bottom: 10px;
}

/* Son kartın içindeki "Tüm Duyurular" artık buton değil, düz bir metin
   linki gibi görünsün. */
.notice-card-last .all-notices-link{
  margin-top: 10px;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
  color: #16324a !important;
  font-weight: 600;
}

.notice-card-last .all-notices-link:hover{
  background: none;
  border: none;
  box-shadow: none;
  color: #1c7480 !important;
  text-decoration: underline !important;
}

.notice-card:hover,
.notice-card-last:hover{
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 10px 24px rgba(20, 40, 60, 0.16);
}

.all-notices-link{
  display: inline-flex;
  align-items: center;
  align-self: flex-end;
  gap: 6px;
  margin-top: 16px;
  padding: 6px 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(32, 32, 48, .12);
  box-shadow: 0 2px 10px rgba(20, 40, 60, .08);
  color: #202030 !important;
  font-style: normal !important;
  font-weight: 600;
  font-size: .8rem !important;
  text-decoration: none !important;
  transition: background-color .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.all-notices-link i{
  font-size: .9em;
  transition: transform .25s ease;
}

.all-notices-link:hover{
  background: #45a8b5;
  border-color: #45a8b5;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(20, 40, 60, .16);
}

.all-notices-link:hover i{
  transform: translateX(3px);
}

/* #carouselNewsIndicators'ın sağ alt köşesinde, görselin üzerinde duran
   "Tüm Haberler" rozeti; carousel görseli değişse de her zaman okunur
   kalması için koyu/bulanık cam zemin kullanılıyor. */
.all-notices-link-overlay{
  position: absolute;
  right: 16px;
  bottom: 48px;
  z-index: 3;
  margin-top: 0;
  background: rgba(20, 22, 34, .55);
  border-color: rgba(255, 255, 255, .25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
}

.all-notices-link-overlay:hover{
  background: #45a8b5;
  border-color: #45a8b5;
}

/* Duyurular sayfasındaki (notice.html) tam liste */
.notice-list-item{
  position: relative;
  padding: 16px 90px 28px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color, #202030), transparent 85%);
}

.notice-list-item:last-child{
  border-bottom: none;
}

.notice-list-title{
  display: block;
  color: #202030;
  font-weight: bold;
  font-size: 1.1em;
  text-decoration: none;
}

.notice-list-title:hover{
  text-decoration: underline;
}

.notice-list-body{
  margin-top: 6px;
  color: color-mix(in srgb, var(--default-color, #202030), transparent 25%);
  font-size: .95em;
  line-height: 1.5em;
}

.notice-list-date{
  position: absolute;
  right: 0;
  bottom: 8px;
  color: color-mix(in srgb, var(--default-color, #202030), transparent 45%);
  font-size: .8em;
  font-style: italic;
}

/* SSS sayfasındaki (sss.html) açılır/kapanır soru listesi */
.faq-list-item{
  border-bottom: none;
  background: transparent;
}

.faq-list-item:last-child{
  border-bottom: none;
}

.faq-list-title{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  padding: 10px 0;
  border: none;
  background: none;
  color: #444444;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
}

.faq-toggle-icon{
  flex: none;
  margin-top: 0.15em;
  font-size: 16px;
  color: #45a8b5;
}

.faq-list-item-open .faq-list-title{
  color: #444444;
}

.faq-list-body{
  padding: 0 0 14px 24px;
  color: #626262;
  font-size: 15px;
  line-height: 1.7;
}

.faq-list-body p{
  margin: 0 0 12px;
}

.faq-list-body p:last-child{
  margin-bottom: 0;
}

/* Ana sayfa SSS bölümündeki istatistik kartları (index.html #faq) */
.trdizin-count-card{
  position: relative;
  display: block;
  cursor: pointer;
  height: 100%;
  padding: 38px 28px 30px;
  border-radius: 12px;
  background: linear-gradient(160deg, #23233a 0%, #191927 100%);
  color: #93e7fa !important;
  text-decoration: none !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, .06);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  text-align: center;
}

.trdizin-count-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .26);
  border-color: rgba(147, 231, 250, .22);
}

.trdizin-count-card-icon{
  width: 82px;
  height: 82px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(69, 168, 181, .12);
  border: 1px solid rgba(147, 231, 250, .3);
  transition: border-color .3s ease, background-color .3s ease;
}

.trdizin-count-card-icon i{
  font-size: 2.15rem;
  line-height: 1;
  color: #93e7fa;
}

.trdizin-count-card:hover .trdizin-count-card-icon{
  border-color: #93e7fa;
  background-color: rgba(69, 168, 181, .18);
}

.trdizin-count-card h3{
  color: #fff;
  font-size: 1.08em;
  font-weight: 700;
  line-height: 1.4em;
  margin: 0;
}

.trdizin-count-card-underline{
  display: block;
  width: 30px;
  height: 2px;
  margin: 14px auto 0;
  border-radius: 2px;
  background: #45a8b5;
  transition: width .3s ease;
}

.trdizin-count-card:hover .trdizin-count-card-underline{
  width: 46px;
}

.trdizin-count-card p{
  color: rgba(255, 255, 255, 0.85);
  font-size: .95em;
  line-height: 1.6em;
  margin: 12px 0 0;
}

@media (prefers-reduced-motion: reduce){
  .trdizin-count-card,
  .trdizin-count-card-icon,
  .trdizin-count-card-underline{
    transition: none;
  }
}

/* Ana sayfa SSS bölümü "Sık Sorulan Sorular" butonu (index.html #faq) */
.btn-faq-see-all{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 34px;
  margin-top: 6px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 1em;
  letter-spacing: .3px;
  color: #202030;
  background: #fff;
  border: 2px solid #202030;
  text-decoration: none;
  cursor: pointer;
  transition: color .3s ease, background-color .3s ease, border-color .3s ease, transform .25s ease, box-shadow .3s ease;
  box-shadow: 0 4px 14px rgba(32, 32, 48, .1);
}

.btn-faq-see-all i{
  font-size: 1.1em;
  line-height: 1;
  transition: transform .3s ease;
}

.btn-faq-see-all:hover,
.btn-faq-see-all:focus-visible{
  color: #fff;
  background-color: #202030;
  border-color: #202030;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(32, 32, 48, .22);
  text-decoration: none;
}

.btn-faq-see-all:hover i,
.btn-faq-see-all:focus-visible i{
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce){
  .btn-faq-see-all{
    transition: none;
  }
}

/* Ana sayfa "Sık Sorulan Sorular" — trdizin.gov.tr (açık gri, kartsız) */
#faq.citation-counts.section{
  position: relative;
  background: #f5f5f5 !important;
  overflow: hidden;
}

#faq.citation-counts.section::before{
  display: none;
}

#faq.citation-counts.section .container{
  position: relative;
  z-index: 1;
}

#faq.citation-counts.section h3{
  color: #161922;
}

#faq .faq-list{
  max-width: 820px;
  margin: 0 auto;
  background: transparent;
  box-shadow: none;
  border: none;
}

#faq .faq-list-item{
  border-bottom: none;
  background: transparent;
  box-shadow: none;
}

#faq .faq-list-title{
  color: #444444;
  font-weight: 400;
  font-size: 16px;
}

#faq .faq-list-item-open .faq-list-title{
  color: #444444;
}

#faq .faq-list-body{
  color: #626262;
  padding-left: 24px;
}

#faq.citation-counts.section .btn-faq-see-all{
  background: transparent;
  border: none;
  color: #656b6f;
  box-shadow: none;
  padding: 0;
}

#faq.citation-counts.section .btn-faq-see-all:hover,
#faq.citation-counts.section .btn-faq-see-all:focus-visible{
  background-color: transparent;
  border-color: transparent;
  color: #00c1cf;
  transform: none;
  box-shadow: none;
}

/* Sayılarla TR Dizin sayfası (sayilar.html) */
.mostcited-nav{
  margin: 0;
  padding: 0;
}

.mostcited-nav-link{
  display: block;
  width: 100%;
  padding: 0 0 0.4em;
  margin-bottom: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #333;
  font-weight: 400;
  font-size: 18px;
  text-align: left;
  line-height: 1.4;
  cursor: pointer;
  transition: color .2s ease;
  box-shadow: none;
}

.mostcited-nav-link:hover{
  background: transparent;
  color: #0089f7;
}

.mostcited-nav-link.active{
  background: transparent;
  border: none;
  color: #0089f7;
  box-shadow: none;
}

.mostcited-table-head{
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 12px;
  border-bottom: 1px solid #eee;
  font-size: 1em;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: #555;
  background-color: transparent;
  text-align: center;
}

.mostcited-col-name{
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  font-weight: 700;
}

.mostcited-col-year,
.mostcited-year{
  flex: 0 0 90px;
  text-align: center;
  display: none;
  font-weight: 700;
}

.mostcited-table.has-year .mostcited-col-year,
.mostcited-table.has-year .mostcited-year{
  display: block;
}

.mostcited-col-metric{
  flex: 0 0 140px;
  text-align: right;
  font-weight: 700;
}

.mostcited-list{
  list-style: none;
  margin: 0;
  padding: 0;
}

.mostcited-item{
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 12px;
  border-bottom: 1px solid #eee;
  transition: background-color 0.15s ease;
}

.mostcited-item:hover{
  background-color: #dae2eb;
}

.mostcited-item:last-child{
  border-bottom: none;
}

.mostcited-title{
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  color: #555;
  font-weight: 500;
  font-size: 1em;
  line-height: 1.5em;
  text-decoration: none;
}

a.mostcited-title:hover{
  color: #555;
  text-decoration: none;
}

.mostcited-year{
  color: #555;
  font-size: 1em;
  font-weight: 500;
}

.mostcited-citation-count{
  flex: 0 0 140px;
  text-align: right;
  font-size: 1em;
  font-weight: 500;
  color: #555;
}

.mostcited-empty{
  padding: 24px 12px;
  color: color-mix(in srgb, var(--default-color, #202030), transparent 40%);
  text-align: center;
}

@media (max-width: 575px){
  .mostcited-title{
    font-size: .95em;
  }

  .mostcited-col-year,
  .mostcited-year{
    flex-basis: 60px;
  }

  .mostcited-col-metric,
  .mostcited-citation-count{
    flex-basis: 90px;
  }
}

/* Duyuru detay sayfası (duyuru-detay.html) */
.notice-detail-date{
  color: color-mix(in srgb, var(--default-color, #202030), transparent 45%);
  font-size: .85em;
  font-style: italic;
  margin-bottom: 16px;
}

.notice-detail-body{
  font-size: 1em;
  line-height: 1.7em;
}

/* Haberler sayfası (haberler.html) - 3'lü kart grid'i */
.news-grid{
  margin-top: 8px;
}

.news-card{
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--surface-color, #ffffff);
  border: 1px solid color-mix(in srgb, var(--default-color, #202030), transparent 90%);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none !important;
  color: inherit;
  box-shadow: 0 4px 18px rgba(20, 40, 60, .06);
  transition: transform .25s ease, box-shadow .25s ease;
}

.news-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(20, 40, 60, .14);
}

.news-card-image{
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: color-mix(in srgb, var(--default-color, #202030), transparent 92%);
}

.news-card-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}

.news-card:hover .news-card-image img{
  transform: scale(1.05);
}

.news-card-body{
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 16px 18px 18px;
}

.news-card-title{
  font-size: 1.05em;
  font-weight: bold;
  color: #202030;
  margin: 0 0 8px;
}

.news-card-excerpt{
  flex: 1;
  font-size: .9em;
  line-height: 1.5em;
  color: color-mix(in srgb, var(--default-color, #202030), transparent 25%);
  margin: 0 0 12px;
}

.news-card-date{
  color: color-mix(in srgb, var(--default-color, #202030), transparent 45%);
  font-size: .8em;
  font-style: italic;
}

.news-empty{
  color: color-mix(in srgb, var(--default-color, #202030), transparent 40%);
}

/* Haber detay sayfası (haber-detay.html) */
.news-detail-cover{
  display: block;
  max-width: 100%;
  max-height: 420px;
  width: auto;
  margin: 20px auto 28px;
  border-radius: 12px;
  object-fit: cover;
}

.news-detail-date{
  color: #999;
  font-size: 0.9em;
  font-style: normal;
  margin: 12px 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  line-height: 1.2;
}

.news-detail-date .bi-clock {
  font-size: 0.95em;
  line-height: 1;
  color: #999;
}

.news-detail-date .news-detail-date-text {
  color: #999;
}

.news-detail-body{
  font-size: 1em;
  line-height: 1.7em;
}

/* CMS içeriği (ör. eski Visual Composer düzenlerinden kalan float'lı
   satır/sütun div'leri) kendi float'larını temizlemeden bitebiliyor; bu
   durumda konteyner yüksekliği çöküyor ve galeri, o float'ın yanına
   sıkışarak dar/garip görünüyordu. */
.news-detail-body::after{
  content: "";
  display: table;
  clear: both;
}

/* Haber içeriğinden çıkarılan resimlerin gösterildiği galeri (haber-detay.html) */
.news-gallery{
  clear: both;
  margin-top: 28px;
  border-radius: 12px;
  overflow: hidden;
  height: 420px;
  background: #000;
}

.news-gallery .carousel-inner,
.news-gallery .carousel-item{
  height: 100%;
}

.news-gallery .carousel-item img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.news-gallery .carousel-control-prev,
.news-gallery .carousel-control-next{
  color: #ffffff;
}

.news-gallery .slide-selector{
  color: #ffffff;
  background-color: #ffffff;
}

@media (max-width: 575px){
  .news-gallery{
    height: 260px;
  }
}

@media (max-width: 575px){
  .news-card-image{
    aspect-ratio: 4 / 3;
  }
}


.counts-label{
  color: #93e7fa;
}
.counts{
  color:white;
}

hr.hr-17 {
  border: 0;
  height: 0;
  box-shadow: 0 0 10px 5px black;
}
hr.hr-16 {
  border: 0;
  height: 0;
  box-shadow: 0 0 10px 2px #202030;
}

hr.hr-17:after {
  content: "\00a0";
}



.card-counts {
  background-color: #202030;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 22px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
  color: white;
  width: fit-content;
  height: fit-content;
  min-height: 15vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /*padding: 25px 25px;*/
  /*gap: 20px;*/
}

/* for all social containers*/
.socialContainer {
  /*width: 52px;*/
  /*height: 52px;*/
  background-color: #202030;
  overflow: hidden;
  transition-duration: .3s;
}

/* Dergi/Makale/Proje kutularında başlık ("Dergi") ve büyük sayı ("1.818")
   varsayılan olarak aynı satırda (row + flex-wrap) yan yana dururken, sayı
   basamak sayısı sütuna göre değiştiği (1.818 / 682.745 / 27.996) için bu
   satır bazı genişliklerde (~1250-1649px) bazı sütunlarda sığıp bazılarında
   sığmayıp alt satıra kayıyordu; üç sütun aynı anda farklı düzende göründüğü
   için sayılar "sağa sola kaymış" gibi görünüyordu. 1650px altında (header'daki
   hamburger eşiğiyle aynı) başlığı sayının üstüne sabitleyip üç sütunu da
   tutarlı hale getiriyoruz; yeterli genişlik olan 1650px+ üzerinde yan yana
   düzen kalıyor. */
@media (max-width: 1649px) {
  .card-counts .socialContainer {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .card-counts .socialContainer > div {
    align-items: center;
    text-align: center;
  }

  /* socialContainer bu genişlikte column'a döndüğü için card-counts
     boy uzatıyor; .searchBox'ın alt boşluğu olmadan altındaki section'a
     yapışık duruyordu. */
  .searchBox {
    padding-bottom: 16px;
  }
}

.containerFour:hover {
  /*background-color: #128C7E;*/
  transition-duration: .3s;
  border-radius: 10px;
  /*box-shadow: 0px 0px 10px 2px #128C7E;*/
  transition-duration: .3s;
}

/*.socialContainer:active {*/
/*  transform: scale(0.9);*/
/*  transition-duration: .3s;*/
/*}*/



@keyframes slide-in-top {
  0% {
    transform: translateY(-50px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}


.search-wrapper {
  max-width: 600px;
  margin: 0 auto;
}

.search-box {
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(to right, #13859a, #f5f5f5) border-box;
  border: 3px solid transparent;
  overflow: hidden;
  resize: none;
  transition: height .2s ease;
  /*position: relative;*/
  /*background: white;*/
  /*border-radius: 30px;*/
  /*box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);*/
  /*transition: all 0.3s ease;*/
}

.search-box:focus-within {
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(to right, #202030, #f5f5f5) border-box;
  transform: translateY(-2px);
}

/* #searchBox input'a tıklanınca/odaklanınca görünüm (border, gölge, konum)
   hiç değişmesin diye Bootstrap'ın .form-control:focus mavi halkasını ve
   yukarıdaki :focus-within geçişini bastırıp dinlenme haliyle aynı tutuyoruz. */
#searchBox:focus,
#searchBox.form-control:focus {
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(to right, #13859a, #f5f5f5) border-box;
  border-color: transparent;
  box-shadow: none;
  outline: none;
  transform: none;
}

.search-input {
  border: 2px solid #eee;
  border-radius: 30px;
  padding: 15px 25px;
  padding-right: 50px;
  width: 100%;
  transition: all 0.3s ease;
}

.search-input:focus {
  /*border-color: #007bff;*/
  box-shadow: none;
}

.search-icon {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
  transition: all 0.3s ease;
}

/*.search-box:focus-within .search-icon {*/
/*  color: #007bff;*/
/*}*/

/*.search-box:focus-within .suggestions {*/
/*  opacity: 1;*/
/*  transform: translateY(0);*/
/*}*/


/* Fonts */
:root {
  --default-font: "Inter",  system-ui, -apple-system, "Segoe UI", Inter, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Raleway",  sans-serif;
  --nav-font: "Poppins",  sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root { 
  --background-color: #ffffff; /* Background color for the entire website, including individual sections */
  --default-color: #444444; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #2a2c39; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #2a2c39; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
  --contrast-color: #ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --nav-color: #202030;  /* The default color of the main navmenu links */
  --nav-hover-color: #23464a; /* Applied to main navmenu links when they are hovered over or active */
  --nav-mobile-background-color: #ffffff; /* Used as the background color for mobile navigation menu */
  --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #060606; /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #1c7480; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */

.light-background {
  --background-color: #f9f9f9;
  --surface-color: #ffffff;
}

.dark-background {
  --background-color: #2a2c39;
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --surface-color: #404356;
  --contrast-color: #ffffff;
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/

.headerLogo {
  display: none; /* İlk başta ikisini de gizle */
  width: 200px;  /* Logonuzun genişliği neyse onu yazın */
  height: auto;
}

.headerLogo.active {
  display: block; /* Sadece 'active' class'ı olan görünsün */
}

@media (max-width: 575px) {
  /* 200px sabit logo genişliği dar ekranda dil seçiciyle iç içe geçiyordu */
  .headerLogo {
    width: 120px;
  }

  .header .logo {
    margin-right: 10px;
  }
}

body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
  max-width: 100%;
  overflow-x: hidden;
}

/*a {*/
/*  text-decoration: none;*/
/*  transition: 0.3s;*/
/*}*/

a:hover {
  color: #009dff;
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
}

/* PHP Email Form Messages
------------------------------*/
.php-email-form .error-message {
  display: none;
  background: #df1529;
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.php-email-form .sent-message {
  display: none;
  color: #ffffff;
  background: #059652;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.php-email-form .loading {
  display: none;
  background: var(--surface-color);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}

.php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--surface-color);
  animation: php-email-form-loading 1s linear infinite;
}

@keyframes php-email-form-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  --background-color: rgba(255, 255, 255, 0);
  --heading-color: #ffffff;
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 20px 0;
  transition: all 0.5s;
  z-index: 997;
}

.header .logo {
  line-height: 1;
  margin-right: 40px;
}

.header .logo img {
  max-height: 64px;
  margin-right: 8px;
}

.header .logo h1 {
  font-size: 30px;
  margin: 0;
  font-weight: 700;
  color: var(--heading-color);
}

.scrolled .header {
  box-shadow: 0px 0 18px rgba(0, 0, 0, 0.1);
}

/* Global Header on Scroll
------------------------------*/
.scrolled .header {
  --background-color: #2a2c39;
  --nav-color: white;
  --nav-hover-color: #434655;
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Navmenu - Desktop
   Not: Logo + 10 menü linki + dil seçici yan yana en az ~1600px genişlik
   istiyor (bkz. aşağıdaki header-nav-wrap kuralı); Bootstrap'ın xl(1200)/
   xxl(1400) kırılma noktaları bu içerik için yetersiz kalıp menünün yarısının
   viewport dışına taşmasına yol açıyordu. Bu yüzden burada ve mobil blokta
   (aşağıda) standart Bootstrap breakpoint'i yerine özel 1650px eşiği (biraz
   pay bırakmak için 1600'den fazla) kullanılıyor. */
.header-nav-wrap {
  justify-content: flex-end;
}

#navmenu {
  order: 6;
}

@media (min-width: 1200px) {
  .header-nav-wrap {
    justify-content: flex-start;
  }

  #navmenu {
    order: -1;
  }

  .mobile-nav-toggle {
    display: none;
  }

  /* nav-item-icon ve navmenu-mobile-header sadece mobil açılır menüde
     kullanılan zenginleştirmeler; masaüstü yatay menüde kalabalık yapmasınlar. */
  .navmenu-mobile-header {
    display: none;
  }

  .nav-item-icon {
    display: none;
  }

  .navmenu {
    padding: 0;
  }

  .navmenu ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }

  .navmenu li {
    position: relative;
    margin-left: 1px;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-color);
    padding: 8px 15px;
    font-size: 17px;
    text-decoration: unset;
    font-family: var(--nav-font);
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
    border-radius: 50px;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    transition: 0.3s;
  }

  .navmenu>ul>li>a {
    position: relative;
  }

  .navmenu>ul>li>a::after {
    content: "";
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 2px;
    height: 2px;
    border-radius: 2px;
    background-color: rgb(252 0 0 / 0.8);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.35s ease;
  }

  .navmenu>ul>li:hover>a::after,
  .navmenu>ul>li.active>a::after,
  .navmenu>ul>li>a.active::after {
    transform: scaleX(1);
  }

  .navmenu .dropdown ul {
    margin: 0;
    padding: 10px 0;
    background: var(--nav-dropdown-background-color);
    display: block;
    position: absolute;
    visibility: hidden;
    left: 0;
    top: 130%;
    opacity: 0;
    transition: 0.3s;
    border-radius: 15px;
    z-index: 99;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  }

  .navmenu .dropdown ul li {
    min-width: 200px;
    margin-left: 0;
  }

  .navmenu .dropdown ul a {
    padding: 6px 20px;
    font-size: 15px;
    text-transform: none;
    color: var(--nav-dropdown-color);
  }

  .navmenu .dropdown ul li hr {
    margin: 2px 0;
  }

  .navmenu .dropdown ul a i {
    font-size: 12px;
  }

  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul .active:hover,
  .navmenu .dropdown ul li:hover>a {
    background-color: transparent;
    color: var(--nav-hover-color);
  }

  .navmenu .dropdown:hover>ul {
    opacity: 1;
    top: 105%;
    visibility: visible;
  }

  .navmenu .dropdown .dropdown ul {
    top: 0;
    left: -90%;
    visibility: hidden;
  }

  .navmenu .dropdown .dropdown:hover>ul {
    opacity: 1;
    top: 0;
    left: -100%;
    visibility: visible;
  }
}

/* Navmenu - Mobile */
@media (max-width: 1199px) {
  .mobile-nav-toggle {
    color: var(--nav-color);
    font-size: 28px;
    line-height: 0;
    margin-right: 10px;
    cursor: pointer;
    transition: color 0.3s;
  }

  .navmenu {
    padding: 0;
    /*z-index: 9997;*/
  }

  /* Floating panel kaldırıldı — Side_slide stilleri trdizin-theme.css'te */
  .navmenu ul {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: none;
    box-shadow: none;
  }

  .navmenu>ul>li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  .navmenu>ul>li:last-child {
    border-bottom: none;
  }

  .navmenu-mobile-header {
    display: none !important;
  }

  .navmenu-mobile-eyebrow {
    display: none !important;
  }

  .navmenu a,
  .navmenu a:focus {
    position: relative;
    color: #a6a6a6;
    padding: 11px 5px 10px 20px;
    font-family: var(--nav-font);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    text-decoration: unset;
    display: block;
    text-align: left;
    white-space: normal;
    border-radius: 0;
    transition: color .25s ease;
  }

  .navmenu .nav-item-label {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .navmenu a .nav-item-icon,
  .navmenu a:focus .nav-item-icon {
    flex: none;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    border-radius: 50%;
    margin-left: 0;
    background: rgba(69, 168, 181, .14);
    border: 1px solid rgba(147, 231, 250, .22);
    color: #93e7fa;
    transition: background-color .25s ease, border-color .25s ease, color .25s ease;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 14px;
    line-height: 0;
    width: 30px;
    height: 30px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .06) !important;
    border: 1px solid rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .55);
    transition: transform .25s ease, color .25s ease, background-color .25s ease, border-color .25s ease;
  }

  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: #fff;
    background-color: rgba(147, 231, 250, .1);
  }

  .navmenu a:hover .nav-item-icon,
  .navmenu .active .nav-item-icon,
  .navmenu .active:focus .nav-item-icon {
    background: #45a8b5;
    border-color: #45a8b5;
    color: #fff;
  }

  .navmenu a:hover i,
  .navmenu a:focus:hover i {
    color: #93e7fa;
    border-color: rgba(147, 231, 250, .3);
  }

  .navmenu .active i,
  .navmenu .active:focus i {
    color: #93e7fa;
    background-color: rgba(147, 231, 250, .14) !important;
    border-color: rgba(147, 231, 250, .3);
  }

  .navmenu .active i.toggle-dropdown,
  .navmenu .active:focus i.toggle-dropdown {
    transform: rotate(180deg);
  }

  .navmenu .dropdown ul {
    position: static;
    display: none;
    z-index: 99;
    padding: 6px;
    margin: 4px 4px 8px;
    background-color: rgba(0, 0, 0, .18);
    border: none;
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
    transition: all 0.3s ease-in-out;
  }

  .navmenu .dropdown ul a {
    padding: 9px 12px;
    font-size: 15.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, .68);
    border-radius: 10px;
  }

  .navmenu .dropdown ul a .nav-item-icon {
    width: 30px;
    height: 30px;
    font-size: 15px;
    background: rgba(69, 168, 181, .1);
    border-color: rgba(147, 231, 250, .16);
  }

  .navmenu .dropdown ul a:hover {
    background-color: rgba(147, 231, 250, .08);
    color: #fff;
  }

  .navmenu .dropdown ul a:hover .nav-item-icon {
    background: #45a8b5;
    border-color: #45a8b5;
    color: #fff;
  }

  .navmenu .dropdown ul ul {
    background-color: rgba(0, 0, 0, .12);
  }

  .navmenu .dropdown>.dropdown-active {
    display: block;
    background-color: transparent;
  }

  .mobile-nav-active {
    overflow: hidden;
  }

  /* Menü açıkken lang-switcher'ın diğer elemanları (Giriş Yap, bildirim,
     widget, dil seçici) X kapatma düğmesiyle aynı köşede çakışıyordu;
     menü açıkken sadece kapatma düğmesi görünür/tıklanabilir kalsın. */
  .mobile-nav-active .lang-switcher > *:not(.mobile-nav-toggle) {
    opacity: 0;
    pointer-events: none;
  }

  .mobile-nav-active .mobile-nav-toggle {
    color: #fff;
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    width: 40px;
    height: 40px;
    top: 16px;
    right: 16px;
    margin-right: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .25);
    transition: background-color .25s ease;
    z-index: 9999;
    /*z-index: 9999;*/
  }

  .mobile-nav-active .mobile-nav-toggle:hover {
    background: rgba(255, 255, 255, .2);
  }

  .mobile-nav-active .navmenu {
    position: fixed;
    inset: 0;
    background: transparent;
    transition: none;
  }

  .mobile-nav-active .navmenu>ul {
    display: block;
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav-active .navmenu>ul {
    animation: none;
  }
}

/*--------------------------------------------------------------
# Language Switcher
--------------------------------------------------------------*/
.lang-switcher {
  margin-left: auto;
}

.lang-switcher-toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 16px 7px 12px;
  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;
  border-radius: 50px;
  color: var(--nav-color, var(--default-color));
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.25s, transform 0.15s;
}

.lang-switcher-toggle:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 88%);
  transform: translateY(-1px);
}

.lang-switcher-toggle[aria-expanded="true"] {
  background-color: var(--accent-color);
  color: var(--contrast-color);
}

.lang-switcher-toggle .lang-flag {
  font-size: 16px;
  line-height: 1;
}

.lang-switcher-toggle .bi-chevron-down {
  font-size: 10px;
  opacity: 0.7;
  transition: transform 0.3s;
}

.lang-switcher-toggle[aria-expanded="true"] .bi-chevron-down {
  transform: rotate(180deg);
  opacity: 1;
}

/* Dar ekranlarda dil seçme komponentinde "Türkçe/English" metni yer
   kaplıyordu; 450px altında sadece bayrak ikonu (lang-flag) kalsın. */
@media (max-width: 1000px) {
  /*#notificationIconATag{*/
  /*  margin-top: 0.25rem !important;*/
  /*}*/
  /*#widget-area{*/
  /*  margin-top: 0.25rem !important;*/
  /*}*/
  /*#logoutBtn{*/
  /*  margin-top: 0.25rem !important;*/
  /*}*/
  .lang-switcher-toggle .lang-code {
    display: none;
  }
  .lang-switcher-toggle .bi-chevron-down {
    display: none;
  }
  .lang-switcher .signin {
    /*margin-top: 0 !important;*/
    /*margin-right: 10px !important;*/
    /*font-size: 0.8rem !important;*/
  }
  .lang-switcher-toggle{
    /*gap: 8px;*/
    padding: 0px 0px;
    margin-right: 10px;
    background: transparent;
    border:none;
    color: var(--nav-color, var(--default-color));
    font-size: 1px;
    /*font-weight: 500;*/
    line-height: 1;
    cursor: pointer;
    transition: 0.3s;
  }
  .lang-switcher-toggle:hover,
  .lang-switcher-toggle[aria-expanded="true"] {
    background-color: transparent;
    color: var(--nav-color, var(--default-color));
    transform: none;
  }
}

.lang-switcher .dropdown-menu {
  min-width: 180px;
  padding: 8px;
  margin-top: 12px !important;
  border: none;
  border-radius: 14px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.14);
  animation: lang-dropdown-in 0.18s ease;
}

@keyframes lang-dropdown-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.lang-switcher .dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 500;
  color: var(--default-color);
  transition: background-color 0.2s, color 0.2s;
}

.lang-switcher .dropdown-item .lang-flag {
  font-size: 17px;
  line-height: 1;
}

.lang-switcher .dropdown-item-check {
  margin-left: auto;
  font-size: 14px;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.2s, transform 0.2s;
}

.lang-switcher .dropdown-item:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  color: var(--accent-color);
}

.lang-switcher .dropdown-item.active {
  background-color: color-mix(in srgb, var(--accent-color), transparent 88%);
  color: var(--accent-color);
  font-weight: 600;
}

.lang-switcher .dropdown-item.active .dropdown-item-check {
  opacity: 1;
  transform: scale(1);
}

/* Header'daki widget-menu (uygulama seçici) açılır ızgarası; her satırda 3 eleman. */
.widget-menu {
  font-size: 20px;
  color: var(--nav-color, var(--default-color));
}

.widget-dropdown-menu {
  width: 300px;
  padding: 6px;
  margin-top: 8px !important;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 3px;
  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15);
  inset: auto 0 auto auto !important;
  z-index: 10050;
}

.widget-dropdown-menu.show {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.widget-dropdown-menu li {
  min-width: 0;
  list-style: none;
}

.widget-menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  padding: 16px 2px;
  border-radius: 3px;
  font-size: 12px;
  text-align: center;
  color: #343748;
  text-decoration: none;
  transition: 0.3s;
}

.widget-menu-item:hover {
  background-color: #d5e0f2;
  color: #343748;
}

.widget-menu-item-icon {
  font-size: 20px;
  line-height: 1;
  color: #343748;
}

.widget-menu-item-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  color: #343748;
}

/* Bildirim modalı: varsayılan orta boydan biraz geniş, header'ı site rengiyle uyumlu koyu lacivert */
#notificationModal .modal-dialog {
  max-width: 60%;
  margin-left: auto;
  margin-right: auto;
}

#notificationModal .modal-header {
  background-image: linear-gradient(to right, #6cc3ca, #13859a, #2e6984, #384e66, #343646) !important;
  background-color: #343646;
  padding: 0.6rem;
  color: #fff;
}

/* Modal içerik arttıkça aşağı doğru uzamasın; yükseklik sabit kalsın,
   taşan kısım modal-body içinde kendi içinde kaysın. */
#notificationModal .modal-content {
  height: 80vh;
}

#notificationModal .modal-body {
  overflow-y: auto;
  min-height: 0;
}

/* Bildirim detay modalı: liste modalıyla aynı header rengi, içerik boyuna göre esner. */
#notificationDetailModal .modal-header {
  background-image: linear-gradient(to right, #6cc3ca, #13859a, #2e6984, #384e66, #343646) !important;
  background-color: #343646;
  padding: 0.6rem;
  color: #fff;
}

#notificationDetailModal .modal-dialog {
  width: 60%!important;
  max-width: 60%!important;
  margin-left: auto;
  margin-right: auto;
}
/*#notificationDetailModal .modal-body {*/
/*  width: 60%!important;*/
/*  max-width: 60%!important;*/
/*  margin-left: auto;*/
/*  margin-right: auto;*/
/*}*/

#notificationDetailModal .modal-content {
  height: 60vh;
}
/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  --footer-bg: #202030;
  color: #c7c8d6;
  background-color: var(--footer-bg);
  font-size: 14px;
  text-align: center;
  position: relative;
}

.footer-top {
  padding: 28px 0 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Footer: soldaki iletişim metni + sağdaki logo. Masaüstünde yan yana,
   mobilde (logo metnin genişliğiyle yarışıp sıkışmasın diye) alt alta
   dizilip logo metnin altına geliyor; ikisi de mobilde küçülüyor. */
.footer-info {
  font-size: 0.85rem;
  line-height: 1.7;
}

.footer-info > p {
  color: #e8e9f2;
  font-weight: 600;
  margin-bottom: 8px !important;
}

.footer-contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 420px;
  margin-bottom: 6px;
}

.footer-contact-list li i {
  color: #8a8db8;
  font-size: 0.9rem;
  margin-top: 3px;
  flex-shrink: 0;
}

.footer-contact-inline {
  flex-wrap: wrap;
  column-gap: 20px;
}

.footer-contact-inline > span {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.footer-logo {
  flex: 0 0 auto;
}

.footer-logo img {
  height: auto;
  width: 560px;
  max-width: 100%;
}

.footer-copyright {
  font-size: 0.78rem;
  color: #9294ab;
  padding: 12px 20px;
  letter-spacing: 0.01em;
}

@media (max-width: 1650px) {
  #notificationModal .modal-dialog {
    max-width: 90%;
    max-height: 90vh;
    margin-left: auto;
    margin-right: auto;
  }

  #notificationDetailModal .modal-dialog {
    width: 90% !important;
    max-width: 90% !important;
    margin-left: auto;
    margin-right: auto;
  }
}


@media (max-width: 576px) {
  #notificationModal .modal-dialog {
    max-width: 90%;
    max-height: 90vh;
    margin-left: auto;
    margin-right: auto;
  }
  #notificationDetailModal .modal-dialog {
    width: 90%!important;
    max-width: 90%!important;
    margin-left: auto;
    margin-right: auto;
  }

  #notificationDetailModal .modal-content {
    height: 90vh;
  }
  .footer-top {
    padding: 22px 0 14px;
  }

  .footer-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .footer-info {
    font-size: 0.72rem;
  }

  .footer-copyright {
    font-size: 0.68rem;
    text-align: center;
  }

  .footer-logo {
    align-self: center;
  }

  .footer-logo img {
    align-content: center;
    margin-top: 4px;
    width: 280px;
    max-width: 100%;
  }
}

.footer h3 {
  font-size: 36px;
  font-weight: 700;
  position: relative;
  padding: 0;
  margin: 0 0 15px 0;
}

.footer p {
  font-size: 15;
  font-style: italic;
  padding: 0;
  margin: 0 0 30px 0;
}

.footer .social-links {
  margin: 0 0 30px 0;
}

.footer .social-links a {
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-color);
  color: var(--contrast-color);
  line-height: 1;
  margin: 0 4px;
  border-radius: 50%;
  text-align: center;
  width: 36px;
  height: 36px;
  transition: 0.3s;
}

.footer .social-links a:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
  text-decoration: none;
}

.footer .copyright {
  padding-top: 25px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.footer .credits {
  font-size: 13px;
  padding-top: 5px;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
/* Kitabın sayfaları çevrilirken "TR DİZİN" harfleri aralarından dökülüyor
   gibi düşüyor (search.trdizin.gov.tr'deki yükleme ekranıyla aynı efekt). */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  background-image: linear-gradient(0, #759297 22%, #699498 35%, white 100%);
  transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.preloader-book {
  position: relative;
  width: 90px;
  height: 68px;
  border: 5px solid #ffffff;
  background: #dfe6e9;
  perspective: 220px;
  margin-bottom: 64px;
}

.preloader-page {
  display: block;
  width: 45px;
  height: 68px;
  border: 5px solid #ffffff;
  border-left: 2px solid #1c7480;
  margin: 0;
  position: absolute;
  right: -5px;
  top: -5px;
  overflow: hidden;
  background: #1c7480;
  transform-style: preserve-3d;
  transform-origin: left center;
}

.preloader-page:nth-child(1) { animation: preloader-page-turn 1.2s cubic-bezier(0, .39, 1, .68) 1s infinite; }
.preloader-page:nth-child(2) { animation: preloader-page-turn 1.2s cubic-bezier(0, .39, 1, .68) .8s infinite; }
.preloader-page:nth-child(3) { animation: preloader-page-turn 1.2s cubic-bezier(0, .39, 1, .68) .6s infinite; }
.preloader-page:nth-child(4) { animation: preloader-page-turn 1.2s cubic-bezier(0, .39, 1, .68) .4s infinite; }
.preloader-page:nth-child(5) { animation: preloader-page-turn 1.2s cubic-bezier(0, .39, 1, .68) .3s infinite; }

@keyframes preloader-page-turn {
  0% { background: #1c7480; transform: rotateY(0); }
  20% { background: #1c7480; }
  40% { background: #45a8b5; transform: rotateY(-180deg); }
  100% { background: #45a8b5; transform: rotateY(-180deg); }
}

.preloader-logo {
  width: 180px;
  max-width: 60vw;
  height: auto;
}

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: -15px;
  z-index: 99999;
  background-color: var(--accent-color);
  width: 44px;
  height: 44px;
  border-radius: 50px;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 24px;
  color: var(--contrast-color);
  line-height: 0;
}

.scroll-top:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  color: var(--contrast-color);
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
  bottom: 15px;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
  color: var(--default-color);
  background-color: var(--background-color);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 160px 0 80px 0;
  text-align: center;
  position: relative;
}

.page-title:before {
  content: "";
  background-color: color-mix(in srgb, var(--background-color), transparent 50%);
  position: absolute;
  inset: 0;
}

.page-title h1 {
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 10px;
}

.page-title .breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  justify-content: center;
  padding: 0;
  margin: 0;
  font-size: 16px;
  font-weight: 400;
}

.page-title .breadcrumbs ol li+li {
  padding-left: 10px;
}

.page-title .breadcrumbs ol li+li::before {
  content: "/";
  display: inline-block;
  padding-right: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

/* Kriterler/Hakkında/Rehber sayfalarında CMS API'den gelen ham HTML içeriği
   (özellikle tablolar) mobilde konteynerden geniş olup sayfayı sağa doğru
   taşırıyordu; tabloyu kendi içinde yatay kaydırılabilir yap, görselleri
   ve uzun kelimeleri konteynere sığdır. */
.criteria-body,
.about-body,
.guide-body {
  max-width: 100%;
  overflow-wrap: break-word;
}

.criteria-body table,
.about-body table,
.guide-body table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.criteria-body img,
.about-body img,
.guide-body img {
  max-width: 100%;
  height: auto;
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 60px 0;
  scroll-margin-top: 77px;
  overflow: clip;
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
  padding-bottom: 60px;
  position: relative;
}

.section-title h2 {
  font-size: 14px;
  font-weight: 500;
  padding: 0;
  line-height: 1px;
  margin: 0;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  position: relative;
}

.section-title h2::after {
  content: "";
  width: 120px;
  height: 1px;
  display: inline-block;
  background: var(--accent-color);
  margin: 4px 10px;
}

.section-title p {
  color: var(--heading-color);
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
  font-family: var(--heading-font);
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.searchBox {
  position: relative;
  /*background-image: linear-gradient(to right, #93bfb8 5%, #83afa8 40%, #568079 100%);*/
  /*box-shadow: #759297 0px 0px 50px;  */
  /*box-shadow:  0px 5px 15px;*/
  /*box-shadow: rgb(21 44 53 / 0.32) 0px 2px 4px 0px, rgb(255 255 255) 0px 2px 16px 0px;*/
  /* Sabit 60vw, 768-1650px aralığında (mobildeki 90vw'a göre) aniden dar
     kalıp kutuyu sıkışık gösteriyordu; min() ile tüm genişliklerde aynı
     akışkan (90vw) oranı kullanıp sadece çok geniş ekranlarda 1200px'de
     sabitliyoruz, böylece ani bir kırılma noktası olmuyor. */
  width: min(90vw, 1200px);
  height: auto;
  background: transparent;
  /* .searchBox, karanlık temalı .hero.dark-background içinde olduğu için
     --heading-color/--default-color/--surface-color burada beyaza döner;
     kutu kendisi beyaz olduğundan, içeriği okunaklı kılmak için bu
     değişkenleri açık tema değerlerine sabitliyoruz. */
  --default-color: #444444;
  --heading-color: #2a2c39;
  --surface-color: #ffffff;
  color: var(--default-color);


}

/* eski .searchBox .nav-tabs stilleri kaldırıldı — vc_tta kullanılıyor */
.searchBox .nav-tabs { display: none !important; }




.searchBox .nav-tabs .nav-link {
  position: relative;
  border: none;
  /*border-radius: 10px 10px 0 0;*/
  /*background-color: color-mix(in srgb, var(--heading-color), transparent 93%);*/
  background: transparent;
  color: #202030;
  font-weight: 500;
  font-size: 18px;
  padding: 14px 22px 11px;
  transition: 0.3s;
  margin-top: 15px;
  cursor: pointer;
}
.searchBox .nav-tabs label {
  margin-top: 7px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
}

.searchBox .nav-tabs .nav-link::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 6px;
  height: 1px;
  border-radius: 2px;
  background-color: rgb(252 0 0 / 0.8);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.35s ease;
}

/*.searchBox .nav-tabs .nav-link:hover {*/
/*  !*color: #93e7fa;*!*/
/*  background-color: color-mix(in srgb, var(--heading-color), transparent 88%);*/
/*}*/

.searchBox .nav-tabs .nav-link:hover::after,
.searchBox .nav-tabs .nav-link.active::after {
  transform: scaleX(1);
}

/*.searchBox .nav-tabs .nav-link.active {*/
/*  color: #93e7fa;*/
/*}*/

.searchBox .tab-pane.active {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* Arama kutusunu saran w-75, arama input'u + buton + "Gelişmiş Arama"
   linkini tek satırda yan yana diziyordu; #advanceSearch kendi satırına
   insin. Bootstrap'ın .form-control'e verdiği width:100%, flex-wrap
   açılınca input'un tek başına ilk satırı kaplayıp butonu da alt satıra
   itmesine yol açıyordu; input'u flex:1 ile daraltıp sadece buton ile
   aynı satırda paylaştırıyoruz. */
.searchBox .w-75 {
  flex-wrap: wrap;
}

#searchBox {
  width: auto;
  flex: 1 1 0%;
  min-width: 0;
}

#advanceSearch {
  width: 100%;
}

#carouselNewsIndicators .carousel-inner,
#carouselNewsIndicators .carousel-item {
  height: 100%;
}

/* #carouselNewsIndicators, .carousel-fade sınıflı dıştaki #hero-carousel'in
   İÇİNDE olduğu için Bootstrap'ın ".carousel-fade .carousel-item" kuralı bu
   iç carousel'e de sızıp opacity tabanlı geçişe çeviriyor; bu da slide (kaydırma)
   animasyonunu ve aktif indikatör takibini bozup birkaç döngü sonra
   carousel.js'in çökmesine (beyaz ekran) yol açıyordu. ID özgüllüğüyle
   normal slide davranışını geri yüklüyoruz. */
#carouselNewsIndicators .carousel-item {
  opacity: 1;
  transform: none;
  transition: transform .6s ease-in-out;
}

#carouselNewsIndicators .carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#carouselNewsIndicators .carousel-control-prev,
#carouselNewsIndicators .carousel-control-next {
  color: #202030;
}
#carouselNewsIndicators .slide-selector {
  color: #202030;
  background-color: #202030;
}

/* .hero-notices'in kendi yüksekliğini kısıtlayan tek kural mobil media query
   içindeydi; masaüstü/tablet genişliklerinde (>=768px) duyuru metinleri
   carousel'in 40vh'lik yüksekliğinden uzun olduğunda flex satırı (hero-media-row)
   duyuru sütununa göre gerilip carousel'in altında boş alan bırakıyordu.
   Duyuru sütununu her genişlikte carousel ile aynı yükseklikte tutup taşan
   kısmı kendi içinde kaydırıyoruz. */
.hero-notices {
  max-height: 40vh;
  overflow-y: hidden;
}

/* Haber carousel'i + duyurular satırı genişte yan yana (75/25), dar
   sütunlara sıkışıp duyuru metnini aşırı uzatıyordu; 1333px altında
   alt alta diz. */
@media (max-width: 1333px) {
  .hero-media-row {
    flex-direction: column;
  }

  .hero-news-carousel {
    width: 100% !important;
    height: 220px !important;
  }

  .hero-notices {
    width: 100% !important;
    max-height: none;
    overflow-y: visible;
    margin: 16px 0 0 !important;
    padding: 0;
  }

  /* max-height'lı .hero-notices flex sütununda kartların height:120px!important
     değeri flex-shrink varsayılanı (1) yüzünden sıkıştırılıp metinler üst üste
     biniyordu; sabit yükseklik yerine içeriğe göre otomatik yükseklik kullan. */
  .notice-card,
  .notice-card-last {
    height: auto !important;
  }

  .all-notices-link {
    margin-top: 12px !important;
  }

  .all-notices-link-overlay {
    margin-top: 0 !important;
  }

  /* Dergi/Makale/Proje sayaçları, socialContainer'ın 1649px altında
     column'a döndüğü sabit fs-1..fs-5 boyutları ve gap-5 (48px) ile
     counts-label'in altındaki sayı bloğundan aşırı uzakta duruyor,
     hatta taşarak .hero'nun overflow:hidden'ı arkasında kayboluyordu;
     küçült ve boşlukları daralt. */
  .card-counts {
    padding: 10px 4px;
  }

  .card-counts .socialContainer {
    gap: 6px !important;
  }

  .card-counts .gap-sm-5 {
    gap: 6px !important;
  }

  .card-counts .fs-1 {
    font-size: 1.4rem !important;
  }

  .card-counts .fs-2 {
    font-size: 0.9rem !important;
  }

  .card-counts .fs-4 {
    font-size: 0.85rem !important;
  }

  .card-counts .fs-5 {
    font-size: 0.65rem !important;
  }
}

@media (max-width: 767px) {
  /* Arama kutusunu saran div (id="searchBox" input'unun üstündeki), mobilde
     w-75 ile dar kalıp input'u sıkıştırıyordu; mobilde tam genişlik kullansın. */
  .searchBox .w-75 {
    width: 100% !important;
  }

  /* 4 sekme (Yayın/Dergi/Yazar/Kurum Arama) mobilde de tek satırda yan yana
     dursun, aralardaki dikey ayraç çizgiler bu düzende anlamsız kaldığı için gizlenir. */
  .searchBox .nav-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    padding: 0 6px;
  }

  .searchBox .nav-tabs li:not(.nav-item) {
    display: none;
  }

  .searchBox .nav-tabs .nav-item {
    width: 100%;
  }

  .searchBox .nav-tabs .nav-link {
    width: 100%;
    padding: 8px 2px;
    font-size: 10px;
  }

  .searchBox .nav-tabs .nav-link img {
    width: 1.5em;
  }
}

.searchBox{
}
.hero {
  width: 100%;
  overflow: hidden;
  position: relative;
  /*background: linear-gradient(0deg, var(--background-color) 0%, color-mix(in srgb, var(--background-color) 90%, white 10%) 100%);*/
  /*background-image: linear-gradient(to right, #6cc3ca, #13859a, #2e6984, #384e66, #343646);*/
  /*background-image: linear-gradient(50deg, rgb(81, 255, 182), rgb(87, 160, 255));*/
  /*background-image: linear-gradient(to bottom, #30cfd0 0%, #330867 100%);*/
  /*background-image: linear-gradient(to bottom, #a0c3c8 5%, #699498 20%, #033439 100%);*/
  /*-------*/
  /*background-image: linear-gradient(to bottom, #759297 5%, #699498 10%, #202030 100%);*/

  /*background-image: linear-gradient(to right, #759297 11%, #699498 22%, #202030 100%);*/
/*background: white;*/

  background-image: linear-gradient(0, #759297 22%, #699498 35%, white 100%);


  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: center;
}

.hero .carousel-container {
  margin-top: 15px;
  display: flex;
  /*justify-content: center;*/
  align-items: center;
  flex-direction: column;
  text-align: center;
  position: relative;
  min-height: 100vh;
  padding-top: 100px;
}

.hero h2 {
  margin-bottom: 30px;
  font-size: 48px;
  font-weight: 700;
}

.hero h2 span {
  text-decoration: underline;
}

.hero p {
  max-width: 80%;
  animation-delay: 0.4s;
  margin: 0 auto 30px auto;
}

.hero .carousel-control-prev,
.hero .carousel-control-next {
  width: 10%;
}

.hero .carousel-control-next-icon,
.hero .carousel-control-prev-icon {
  background: none;
  font-size: 48px;
  line-height: 1;
  width: auto;
  height: auto;
}

.hero .btn-get-started {
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 12px 32px;
  border-radius: 50px;
  transition: 0.5s;
  line-height: 1;
  margin: 10px;
  animation-delay: 0.8s;
  color: var(--default-color);
  border: 2px solid var(--accent-color);
}

.hero .btn-get-started:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
  text-decoration: none;
}

@media (min-width: 1024px) {
  .hero p {
    max-width: 60%;
  }

  .hero .carousel-control-prev,
  .hero .carousel-control-next {
    width: 5%;
  }
}

@media (max-width: 768px) {
  .searchBox{
    /* Sabit 80vh yükseklik mobilde içerik (özellikle duyuru listesi) taştığında
       sayfayı anormal uzatıyordu; mobilde kutu içeriğe göre boy alsın.
       Genişlik artık base kuraldaki min(90vw,1200px) üzerinden geliyor. */
    height: auto;
    min-height: auto;
    padding-bottom: 16px;
  }

  .hero .carousel-container {
    min-height: 90vh;
    padding-top: 90px;
  }

  .hero h2 {
    font-size: 28px;
  }

}

.hero .hero-waves {
  display: block;
  width: 100%;
  height: 60px;
  position: relative;
}

.hero .wave1 use {
  animation: move-forever1 10s linear infinite;
  animation-delay: -3s;
  fill: var(--default-color);
  opacity: 0.6;
}

.hero .wave2 use {
  animation: move-forever2 8s linear infinite;
  animation-delay: -3s;
  fill: var(--default-color);
  opacity: 0.4;
}

.hero .wave3 use {
  animation: move-forever3 6s linear infinite;
  animation-delay: -3s;
  fill: var(--default-color);
}

@keyframes move-forever1 {
  0% {
    transform: translate(85px, 0%);
  }

  100% {
    transform: translate(-90px, 0%);
  }
}

@keyframes move-forever2 {
  0% {
    transform: translate(-90px, 0%);
  }

  100% {
    transform: translate(85px, 0%);
  }
}

@keyframes move-forever3 {
  0% {
    transform: translate(-90px, 0%);
  }

  100% {
    transform: translate(85px, 0%);
  }
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about ul {
  list-style: none;
  padding: 0;
}

.about ul li {
  padding-bottom: 5px;
  display: flex;
  align-items: center;
}

.about ul i {
  font-size: 20px;
  padding-right: 4px;
  color: var(--accent-color);
}

.about .read-more {
  background: var(--accent-color);
  color: var(--contrast-color);
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  padding: 10px 28px;
  border-radius: 5px;
  transition: 0.3s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.about .read-more i {
  font-size: 18px;
  margin-left: 5px;
  line-height: 0;
  transition: 0.3s;
}

.about .read-more:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.about .read-more:hover i {
  transform: translate(5px, 0);
}

/*--------------------------------------------------------------
# Features Section
--------------------------------------------------------------*/
.features .nav-tabs {
  border: 0;
}

.features .nav-link {
  background-color: var(--surface-color);
  color: var(--heading-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  padding: 15px 20px;
  transition: 0.3s;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  height: 100%;
}

.features .nav-link i {
  padding-right: 15px;
  font-size: 48px;
}

.features .nav-link h4 {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

.features .nav-link:hover {
  color: var(--accent-color);
  border-color: var(--accent-color);
}

.features .nav-link.active {
  background: var(--accent-color);
  color: var(--contrast-color);
  border-color: var(--accent-color);
}

.features .nav-link.active h4 {
  color: var(--contrast-color);
}

@media (max-width: 768px) {
  .features .nav-link i {
    padding: 0;
    line-height: 1;
    font-size: 36px;
  }
}

@media (max-width: 575px) {
  .features .nav-link {
    padding: 15px;
  }

  .features .nav-link i {
    font-size: 24px;
  }
}

.features .tab-content {
  margin-top: 30px;
}

.features .tab-pane h3 {
  color: var(--heading-color);
  font-weight: 700;
  font-size: 26px;
}

.features .tab-pane ul {
  list-style: none;
  padding: 0;
}

.features .tab-pane ul li {
  padding-bottom: 10px;
}

.features .tab-pane ul i {
  font-size: 20px;
  padding-right: 4px;
  color: var(--accent-color);
}

.features .tab-pane p:last-child {
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Call To Action Section
--------------------------------------------------------------*/
.call-to-action {
  padding: 80px 0;
  position: relative;
  clip-path: inset(0);
}

.call-to-action .container {
  position: relative;
  z-index: 3;
}

.call-to-action h3 {
  color: var(--default-color);
  font-size: 28px;
  font-weight: 700;
}

.call-to-action p {
  color: var(--default-color);
}

.call-to-action .cta-btn {
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 12px 40px;
  border-radius: 50px;
  transition: 0.5s;
  margin: 10px;
  background: var(--accent-color);
  color: var(--contrast-color);
}

.call-to-action .cta-btn:hover {
  background: color-mix(in srgb, var(--accent-color) 90%, white 15%);
}

/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services .service-item {
  background-color: var(--surface-color);
  box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.1);
  padding: 60px 30px 60px 70px;
  transition: all ease-in-out 0.3s;
  border-radius: 18px;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.services .service-item .icon {
  position: absolute;
  left: -20px;
  top: calc(50% - 30px);
}

.services .service-item .icon i {
  font-size: 64px;
  line-height: 1;
  transition: 0.5s;
}

.services .service-item h3 {
  font-weight: 700;
  margin: 10px 0 15px 0;
  font-size: 22px;
  transition: ease-in-out 0.3s;
}

.services .service-item p {
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
}

@media (min-width: 1365px) {
  .services .service-item:hover {
    transform: translateY(-10px);
  }

  .services .service-item:hover h3 {
    color: var(--accent-color);
  }
}

/*--------------------------------------------------------------
# Portfolio Section
--------------------------------------------------------------*/
.portfolio .portfolio-filters {
  padding: 0;
  margin: 0 auto 20px auto;
  list-style: none;
  text-align: center;
}

.portfolio .portfolio-filters li {
  cursor: pointer;
  display: inline-block;
  padding: 8px 20px 10px 20px;
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  margin-bottom: 5px;
  border-radius: 50px;
  transition: all 0.3s ease-in-out;
  font-family: var(--heading-font);
}

.portfolio .portfolio-filters li:hover,
.portfolio .portfolio-filters li.filter-active {
  color: var(--contrast-color);
  background-color: var(--accent-color);
}

.portfolio .portfolio-filters li:first-child {
  margin-left: 0;
}

.portfolio .portfolio-filters li:last-child {
  margin-right: 0;
}

@media (max-width: 575px) {
  .portfolio .portfolio-filters li {
    font-size: 14px;
    margin: 0 0 10px 0;
  }
}

.portfolio .portfolio-item {
  position: relative;
  overflow: hidden;
}

.portfolio .portfolio-item .portfolio-info {
  opacity: 0;
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -100%;
  z-index: 3;
  transition: all ease-in-out 0.5s;
  background: color-mix(in srgb, var(--surface-color), transparent 10%);
  padding: 15px;
}

.portfolio .portfolio-item .portfolio-info h4 {
  font-size: 18px;
  font-weight: 600;
  padding-right: 50px;
}

.portfolio .portfolio-item .portfolio-info p {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-size: 14px;
  margin-bottom: 0;
  padding-right: 50px;
}

.portfolio .portfolio-item .portfolio-info .preview-link,
.portfolio .portfolio-item .portfolio-info .details-link {
  position: absolute;
  right: 50px;
  font-size: 24px;
  top: calc(50% - 14px);
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  transition: 0.3s;
  line-height: 0;
}

.portfolio .portfolio-item .portfolio-info .preview-link:hover,
.portfolio .portfolio-item .portfolio-info .details-link:hover {
  color: var(--accent-color);
}

.portfolio .portfolio-item .portfolio-info .details-link {
  right: 14px;
  font-size: 28px;
}

.portfolio .portfolio-item:hover .portfolio-info {
  opacity: 1;
  bottom: 0;
}

/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
.testimonials .testimonial-item {
  background-color: var(--surface-color);
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
  box-sizing: content-box;
  padding: 30px;
  margin: 30px 15px;
  position: relative;
  height: 100%;
}

.testimonials .testimonial-item .testimonial-img {
  width: 90px;
  border-radius: 50px;
  margin-right: 15px;
}

.testimonials .testimonial-item h3 {
  font-size: 18px;
  font-weight: bold;
  margin: 10px 0 5px 0;
}

.testimonials .testimonial-item h4 {
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin: 0;
}

.testimonials .testimonial-item .stars {
  margin: 10px 0;
}

.testimonials .testimonial-item .stars i {
  color: #ffc107;
  margin: 0 1px;
}

.testimonials .testimonial-item .quote-icon-left,
.testimonials .testimonial-item .quote-icon-right {
  color: color-mix(in srgb, var(--accent-color), transparent 50%);
  font-size: 26px;
  line-height: 0;
}

.testimonials .testimonial-item .quote-icon-left {
  display: inline-block;
  left: -5px;
  position: relative;
}

.testimonials .testimonial-item .quote-icon-right {
  display: inline-block;
  right: -5px;
  position: relative;
  top: 10px;
  transform: scale(-1, -1);
}

.testimonials .testimonial-item p {
  font-style: italic;
  margin: 15px auto 15px auto;
}

.testimonials .swiper-wrapper {
  height: auto;
}

.testimonials .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.testimonials .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: color-mix(in srgb, var(--default-color), transparent 85%);
  opacity: 1;
}

.testimonials .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}

@media (max-width: 767px) {
  .testimonials .testimonial-wrap {
    padding-left: 0;
  }

  .testimonials .testimonial-item {
    padding: 30px;
    margin: 15px;
  }

  .testimonials .testimonial-item .testimonial-img {
    position: static;
    left: auto;
  }
}

/*--------------------------------------------------------------
# Pricing Section
--------------------------------------------------------------*/
.pricing .pricing-item {
  background-color: var(--surface-color);
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
  padding: 20px;
  text-align: center;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
}

.pricing .pricing-item h3 {
  font-weight: 400;
  margin: -20px -20px 20px -20px;
  padding: 20px 15px;
  font-size: 16px;
  font-weight: 600;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  background: color-mix(in srgb, var(--default-color), transparent 95%);
}

.pricing .pricing-item h4 {
  font-size: 36px;
  font-weight: 600;
  font-family: var(--heading-font);
}

.pricing .pricing-item h4 sup {
  font-size: 20px;
  top: -15px;
  left: -3px;
}

.pricing .pricing-item h4 span {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-size: 16px;
  font-weight: 300;
}

.pricing .pricing-item ul {
  padding: 15px 0;
  list-style: none;
  text-align: center;
  line-height: 20px;
  font-size: 14px;
}

.pricing .pricing-item ul li {
  padding-bottom: 16px;
}

.pricing .pricing-item ul i {
  color: var(--accent-color);
  font-size: 18px;
  padding-right: 4px;
}

.pricing .pricing-item ul .na {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  text-decoration: line-through;
}

.pricing .btn-wrap {
  background: color-mix(in srgb, var(--default-color), transparent 95%);
  margin: 0 -20px -20px -20px;
  padding: 20px 15px;
  text-align: center;
}

.pricing .btn-buy {
  background: var(--accent-color);
  color: var(--contrast-color);
  display: inline-block;
  padding: 8px 35px 10px 35px;
  border-radius: 4px;
  transition: none;
  font-size: 14px;
  font-weight: 400;
  font-family: var(--heading-font);
  font-weight: 600;
  transition: 0.3s;
}

.pricing .btn-buy:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.pricing .featured h3 {
  background: var(--accent-color);
  color: var(--contrast-color);
}

.pricing .advanced {
  background: var(--accent-color);
  color: var(--contrast-color);
  width: 200px;
  position: absolute;
  top: 18px;
  right: -68px;
  transform: rotate(45deg);
  z-index: 1;
  font-size: 14px;
  padding: 1px 0 3px 0;
}

/*--------------------------------------------------------------
# Faq Section
--------------------------------------------------------------*/
.faq .content-subtitle {
  font-size: 15px;
  margin-bottom: 10px;
  display: block;
  color: var(--default-color);
}

.faq .content-title {
  color: var(--heading-color);
  font-size: 22px;
  margin-bottom: 30px;
}

.faq p {
  line-height: 1.7;
  color: var(--default-color);
}

.faq .custom-accordion .accordion-item {
  background-color: var(--surface-color);
  margin-bottom: 0px;
  position: relative;
  border-radius: 0px;
  overflow: hidden;
}

.faq .custom-accordion .accordion-item .btn-link {
  display: block;
  width: 100%;
  padding: 15px 0;
  text-decoration: none;
  text-align: left;
  color: var(--default-color);
  border: none;
  padding-left: 40px;
  border-radius: 0;
  position: relative;
  background-color: color-mix(in srgb, var(--default-color), transparent 94%);
}

.faq .custom-accordion .accordion-item .btn-link:before {
  content: "\f282";
  display: inline-block;
  font-family: "bootstrap-icons" !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: -0.125em;
  -webkit-font-smoothing: antialiased;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 15px;
}

.faq .custom-accordion .accordion-item .btn-link[aria-expanded=true] {
  color: var(--accent-color);
}

.faq .custom-accordion .accordion-item .btn-link[aria-expanded=true]:before {
  font-family: "bootstrap-icons" !important;
  content: "\f286";
  position: absolute;
  color: var(--accent-color);
  top: 50%;
  transform: translateY(-50%);
}

.faq .custom-accordion .accordion-item .accordion-body {
  padding: 20px 20px 20px 20px;
  color: var(--default-color);
}

/*--------------------------------------------------------------
# Team Section
--------------------------------------------------------------*/
.team .team-member {
  background-color: var(--surface-color);
  overflow: hidden;
  border-radius: 5px;
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
  height: 100%;
}

.team .team-member .member-img {
  position: relative;
  overflow: hidden;
}

.team .team-member .social {
  position: absolute;
  left: 0;
  bottom: 30px;
  right: 0;
  opacity: 0;
  transition: ease-in-out 0.3s;
  text-align: center;
}

.team .team-member .social a {
  background: color-mix(in srgb, var(--contrast-color), transparent 25%);
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin: 0 3px;
  border-radius: 4px;
  width: 36px;
  height: 36px;
  transition: ease-in-out 0.3s;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.team .team-member .social a:hover {
  color: var(--contrast-color);
  background: var(--accent-color);
}

.team .team-member .social i {
  font-size: 18px;
  line-height: 0;
}

.team .team-member .member-info {
  padding: 25px 15px;
}

.team .team-member .member-info h4 {
  font-weight: 700;
  margin-bottom: 5px;
  font-size: 18px;
}

.team .team-member .member-info span {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.team .team-member:hover .social {
  opacity: 1;
  bottom: 15px;
}

/*--------------------------------------------------------------
# Recent Posts Section
--------------------------------------------------------------*/
.recent-posts article {
  background: var(--surface-color);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  padding: 30px;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
}

.recent-posts .post-img {
  max-height: 240px;
  margin: -30px -30px 15px -30px;
  overflow: hidden;
}

.recent-posts .post-category {
  font-size: 16px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  margin-bottom: 10px;
}

.recent-posts .title {
  font-size: 20px;
  font-weight: 700;
  padding: 0;
  margin: 0 0 20px 0;
}

.recent-posts .title a {
  color: var(--heading-color);
  transition: 0.3s;
}

.recent-posts .title a:hover {
  color: var(--accent-color);
}

.recent-posts .post-author-img {
  width: 50px;
  border-radius: 50%;
  margin-right: 15px;
}

.recent-posts .post-author {
  font-weight: 600;
  margin-bottom: 5px;
}

.recent-posts .post-date {
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact .info-item+.info-item {
  margin-top: 40px;
}

.contact .info-item i {
  color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color), transparent 92%);
  font-size: 20px;
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  transition: all 0.3s ease-in-out;
  margin-right: 15px;
}

.contact .info-item h3 {
  padding: 0;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 5px;
}

.contact .info-item p {
  padding: 0;
  margin-bottom: 0;
  font-size: 14px;
}

.contact .info-item:hover i {
  background: var(--accent-color);
  color: var(--contrast-color);
}

.contact .php-email-form {
  height: 100%;
}

.contact .php-email-form input[type=text],
.contact .php-email-form input[type=email],
.contact .php-email-form textarea {
  font-size: 14px;
  padding: 10px 15px;
  box-shadow: none;
  border-radius: 0;
  color: var(--default-color);
  background-color: color-mix(in srgb, var(--background-color), transparent 50%);
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.contact .php-email-form input[type=text]:focus,
.contact .php-email-form input[type=email]:focus,
.contact .php-email-form textarea:focus {
  border-color: var(--accent-color);
}

.contact .php-email-form input[type=text]::placeholder,
.contact .php-email-form input[type=email]::placeholder,
.contact .php-email-form textarea::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.contact .php-email-form button[type=submit] {
  color: var(--contrast-color);
  background: var(--accent-color);
  border: 0;
  padding: 10px 30px;
  transition: 0.4s;
  border-radius: 50px;
}

.contact .php-email-form button[type=submit]:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 25%);
}

/*--------------------------------------------------------------
# Portfolio Details Section
--------------------------------------------------------------*/
.portfolio-details .portfolio-details-slider img {
  width: 100%;
}

.portfolio-details .swiper-wrapper {
  height: auto;
}

.portfolio-details .swiper-button-prev,
.portfolio-details .swiper-button-next {
  width: 48px;
  height: 48px;
}

.portfolio-details .swiper-button-prev:after,
.portfolio-details .swiper-button-next:after {
  color: rgba(255, 255, 255, 0.8);
  background-color: rgba(0, 0, 0, 0.15);
  font-size: 24px;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
}

.portfolio-details .swiper-button-prev:hover:after,
.portfolio-details .swiper-button-next:hover:after {
  background-color: rgba(0, 0, 0, 0.3);
}

@media (max-width: 575px) {
  .portfolio-details .swiper-button-prev,
  .portfolio-details .swiper-button-next {
    display: none;
  }
}

.portfolio-details .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.portfolio-details .swiper-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background-color: color-mix(in srgb, var(--default-color), transparent 85%);
  opacity: 1;
}

.portfolio-details .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}

.portfolio-details .portfolio-info h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
}

.portfolio-details .portfolio-info h3:after {
  content: "";
  position: absolute;
  display: block;
  width: 50px;
  height: 3px;
  background: var(--accent-color);
  left: 0;
  bottom: 0;
}

.portfolio-details .portfolio-info ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.portfolio-details .portfolio-info ul li {
  display: flex;
  flex-direction: column;
  padding-bottom: 15px;
}

.portfolio-details .portfolio-info ul strong {
  text-transform: uppercase;
  font-weight: 400;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 14px;
}

.portfolio-details .portfolio-info .btn-visit {
  padding: 8px 40px;
  background: var(--accent-color);
  color: var(--contrast-color);
  border-radius: 50px;
  transition: 0.3s;
}

.portfolio-details .portfolio-info .btn-visit:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.portfolio-details .portfolio-description h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 20px;
}

.portfolio-details .portfolio-description p {
  padding: 0;
}

.portfolio-details .portfolio-description .testimonial-item {
  padding: 30px 30px 0 30px;
  position: relative;
  background: color-mix(in srgb, var(--default-color), transparent 97%);
  margin-bottom: 50px;
}

.portfolio-details .portfolio-description .testimonial-item .testimonial-img {
  width: 90px;
  border-radius: 50px;
  border: 6px solid var(--background-color);
  float: left;
  margin: 0 10px 0 0;
}

.portfolio-details .portfolio-description .testimonial-item h3 {
  font-size: 18px;
  font-weight: bold;
  margin: 15px 0 5px 0;
  padding-top: 20px;
}

.portfolio-details .portfolio-description .testimonial-item h4 {
  font-size: 14px;
  color: #6c757d;
  margin: 0;
}

.portfolio-details .portfolio-description .testimonial-item .quote-icon-left,
.portfolio-details .portfolio-description .testimonial-item .quote-icon-right {
  color: color-mix(in srgb, var(--accent-color), transparent 50%);
  font-size: 26px;
  line-height: 0;
}

.portfolio-details .portfolio-description .testimonial-item .quote-icon-left {
  display: inline-block;
  left: -5px;
  position: relative;
}

.portfolio-details .portfolio-description .testimonial-item .quote-icon-right {
  display: inline-block;
  right: -5px;
  position: relative;
  top: 10px;
  transform: scale(-1, -1);
}

.portfolio-details .portfolio-description .testimonial-item p {
  font-style: italic;
  margin: 0 0 15px 0 0 0;
  padding: 0;
}

/*--------------------------------------------------------------
# Service Details Section
--------------------------------------------------------------*/
.service-details .service-box {
  background-color: var(--surface-color);
  padding: 20px;
  box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.1);
}

.service-details .service-box+.service-box {
  margin-top: 30px;
}

.service-details .service-box h4 {
  font-size: 20px;
  font-weight: 700;
  border-bottom: 2px solid color-mix(in srgb, var(--default-color), transparent 92%);
  padding-bottom: 15px;
  margin-bottom: 15px;
}

.service-details .services-list {
  background-color: var(--surface-color);
}

.service-details .services-list a {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  background-color: color-mix(in srgb, var(--default-color), transparent 96%);
  display: flex;
  align-items: center;
  padding: 12px 15px;
  margin-top: 15px;
  transition: 0.3s;
}

.service-details .services-list a:first-child {
  margin-top: 0;
}

.service-details .services-list a i {
  font-size: 16px;
  margin-right: 8px;
  color: var(--accent-color);
}

.service-details .services-list a.active {
  color: var(--contrast-color);
  background-color: var(--accent-color);
}

.service-details .services-list a.active i {
  color: var(--contrast-color);
}

.service-details .services-list a:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
  color: var(--accent-color);
}

.service-details .download-catalog a {
  color: var(--default-color);
  display: flex;
  align-items: center;
  padding: 10px 0;
  transition: 0.3s;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.service-details .download-catalog a:first-child {
  border-top: 0;
  padding-top: 0;
}

.service-details .download-catalog a:last-child {
  padding-bottom: 0;
}

.service-details .download-catalog a i {
  font-size: 24px;
  margin-right: 8px;
  color: var(--accent-color);
}

.service-details .download-catalog a:hover {
  color: var(--accent-color);
}

.service-details .help-box {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  margin-top: 30px;
  padding: 30px 15px;
}

.service-details .help-box .help-icon {
  font-size: 48px;
}

.service-details .help-box h4,
.service-details .help-box a {
  color: var(--contrast-color);
}

.service-details .services-img {
  margin-bottom: 20px;
}

.service-details h3 {
  font-size: 26px;
  font-weight: 700;
}

.service-details p {
  font-size: 15px;
}

.service-details ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.service-details ul li {
  padding: 5px 0;
  display: flex;
  align-items: center;
}

.service-details ul i {
  font-size: 20px;
  margin-right: 8px;
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Starter Section Section
--------------------------------------------------------------*/
.starter-section {
  /* Add your styles here */
}

/*--------------------------------------------------------------
# Blog Posts Section
--------------------------------------------------------------*/
.blog-posts article {
  background-color: var(--surface-color);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  padding: 30px;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
}

.blog-posts .post-img {
  max-height: 240px;
  margin: -30px -30px 15px -30px;
  overflow: hidden;
}

.blog-posts .post-category {
  font-size: 16px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 10px;
}

.blog-posts .title {
  font-size: 20px;
  font-weight: 700;
  padding: 0;
  margin: 0 0 20px 0;
}

.blog-posts .title a {
  color: var(--heading-color);
  transition: 0.3s;
}

.blog-posts .title a:hover {
  color: var(--accent-color);
}

.blog-posts .post-author-img {
  width: 50px;
  border-radius: 50%;
  margin-right: 15px;
}

.blog-posts .post-author {
  font-weight: 600;
  margin-bottom: 5px;
}

.blog-posts .post-date {
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Blog Pagination Section
--------------------------------------------------------------*/
.blog-pagination {
  padding-top: 0;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.blog-pagination ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
}

.blog-pagination li {
  margin: 0 5px;
  transition: 0.3s;
}

.blog-pagination li a {
  color: var(--accent-color);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--accent-color);
}

.blog-pagination li a.active,
.blog-pagination li a:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
}

.blog-pagination li a.active a,
.blog-pagination li a:hover a {
  color: var(--contrast-color);
}

/*--------------------------------------------------------------
# Blog Details Section
--------------------------------------------------------------*/
.blog-details {
  padding-bottom: 30px;
}

.blog-details .article {
  background-color: var(--surface-color);
  padding: 30px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.blog-details .post-img {
  margin: -30px -30px 20px -30px;
  overflow: hidden;
}

.blog-details .title {
  color: var(--heading-color);
  font-size: 28px;
  font-weight: 700;
  padding: 0;
  margin: 30px 0;
}

.blog-details .content {
  margin-top: 20px;
}

.blog-details .content h3 {
  font-size: 22px;
  margin-top: 30px;
  font-weight: bold;
}

.blog-details .content blockquote {
  overflow: hidden;
  background-color: color-mix(in srgb, var(--default-color), transparent 95%);
  padding: 60px;
  position: relative;
  text-align: center;
  margin: 20px 0;
}

.blog-details .content blockquote p {
  color: var(--default-color);
  line-height: 1.6;
  margin-bottom: 0;
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
}

.blog-details .content blockquote:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: var(--accent-color);
  margin-top: 20px;
  margin-bottom: 20px;
}

.blog-details .meta-top {
  margin-top: 20px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.blog-details .meta-top ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  align-items: center;
  padding: 0;
  margin: 0;
}

.blog-details .meta-top ul li+li {
  padding-left: 20px;
}

.blog-details .meta-top i {
  font-size: 16px;
  margin-right: 8px;
  line-height: 0;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.blog-details .meta-top a {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-size: 14px;
  display: inline-block;
  line-height: 1;
}

.blog-details .meta-bottom {
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.blog-details .meta-bottom i {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  display: inline;
}

.blog-details .meta-bottom a {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  transition: 0.3s;
}

.blog-details .meta-bottom a:hover {
  color: var(--accent-color);
}

.blog-details .meta-bottom .cats {
  list-style: none;
  display: inline;
  padding: 0 20px 0 0;
  font-size: 14px;
}

.blog-details .meta-bottom .cats li {
  display: inline-block;
}

.blog-details .meta-bottom .tags {
  list-style: none;
  display: inline;
  padding: 0;
  font-size: 14px;
}

.blog-details .meta-bottom .tags li {
  display: inline-block;
}

.blog-details .meta-bottom .tags li+li::before {
  padding-right: 6px;
  color: var(--default-color);
  content: ",";
}

.blog-details .meta-bottom .share {
  font-size: 16px;
}

.blog-details .meta-bottom .share i {
  padding-left: 5px;
}

/*--------------------------------------------------------------
# Blog Comments Section
--------------------------------------------------------------*/
.blog-comments {
  padding: 10px 0;
}

.blog-comments .comments-count {
  font-weight: bold;
}

.blog-comments .comment {
  margin-top: 30px;
  position: relative;
}

.blog-comments .comment .comment-img {
  margin-right: 14px;
}

.blog-comments .comment .comment-img img {
  width: 60px;
}

.blog-comments .comment h5 {
  font-size: 16px;
  margin-bottom: 2px;
}

.blog-comments .comment h5 a {
  font-weight: bold;
  color: var(--default-color);
  transition: 0.3s;
}

.blog-comments .comment h5 a:hover {
  color: var(--accent-color);
}

.blog-comments .comment h5 .reply {
  padding-left: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.blog-comments .comment h5 .reply i {
  font-size: 20px;
}

.blog-comments .comment time {
  display: block;
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 5px;
}

.blog-comments .comment.comment-reply {
  padding-left: 40px;
}

/*--------------------------------------------------------------
# Comment Form Section
--------------------------------------------------------------*/
.comment-form {
  padding-top: 10px;
}

.comment-form form {
  background-color: var(--surface-color);
  margin-top: 30px;
  padding: 30px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.comment-form form h4 {
  font-weight: bold;
  font-size: 22px;
}

.comment-form form p {
  font-size: 14px;
}

.comment-form form input {
  background-color: var(--surface-color);
  color: var(--default-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
  font-size: 14px;
  border-radius: 4px;
  padding: 10px 10px;
}

.comment-form form input:focus {
  color: var(--default-color);
  background-color: var(--surface-color);
  box-shadow: none;
  border-color: var(--accent-color);
}

.comment-form form input::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.comment-form form textarea {
  background-color: var(--surface-color);
  color: var(--default-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
  border-radius: 4px;
  padding: 10px 10px;
  font-size: 14px;
  height: 120px;
}

.comment-form form textarea:focus {
  color: var(--default-color);
  box-shadow: none;
  border-color: var(--accent-color);
  background-color: var(--surface-color);
}

.comment-form form textarea::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.comment-form form .form-group {
  margin-bottom: 25px;
}

.comment-form form .btn-primary {
  border-radius: 4px;
  padding: 10px 20px;
  border: 0;
  background-color: var(--accent-color);
  color: var(--contrast-color);
}

.comment-form form .btn-primary:hover {
  color: var(--contrast-color);
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
}

/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widgets-container {
  margin: 60px 0 30px 0;
}

.widget-title {
  color: var(--heading-color);
  font-size: 20px;
  font-weight: 600;
  padding: 0 0 0 10px;
  margin: 0 0 20px 0;
  border-left: 4px solid var(--accent-color);
}

.widget-item {
  margin-bottom: 30px;
  background-color: color-mix(in srgb, var(--default-color), transparent 98%);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  padding: 30px;
  border-radius: 5px;
}

.widget-item:last-child {
  margin-bottom: 0;
}

.blog-author-widget img {
  max-width: 160px;
}

.blog-author-widget h4 {
  font-weight: 600;
  font-size: 24px;
  margin: 15px 0 0 0;
  padding: 0;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.blog-author-widget .social-links {
  margin: 5px 0;
}

.blog-author-widget .social-links a {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
  margin: 0 3px;
  font-size: 18px;
}

.blog-author-widget .social-links a:hover {
  color: var(--accent-color);
}

.blog-author-widget p {
  font-style: italic;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin: 10px 0 0 0;
}

.search-widget form {
  background: var(--background-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 75%);
  padding: 3px 10px;
  position: relative;
  border-radius: 50px;
  transition: 0.3s;
}

.search-widget form input[type=text] {
  border: 0;
  padding: 4px 10px;
  border-radius: 4px;
  width: calc(100% - 40px);
  background-color: var(--background-color);
  color: var(--default-color);
}

.search-widget form input[type=text]:focus {
  outline: none;
}

.search-widget form button {
  background: none;
  color: var(--default-color);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  border: 0;
  font-size: 16px;
  padding: 0 16px;
  transition: 0.3s;
  line-height: 0;
}

.search-widget form button i {
  line-height: 0;
}

.search-widget form button:hover {
  color: var(--accent-color);
}

.search-widget form:is(:focus-within) {
  border-color: var(--accent-color);
}

.categories-widget ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.categories-widget ul li {
  padding-bottom: 10px;
}

.categories-widget ul li:last-child {
  padding-bottom: 0;
}

.categories-widget ul a {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  transition: 0.3s;
}

.categories-widget ul a:hover {
  color: var(--accent-color);
}

.categories-widget ul a span {
  padding-left: 5px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 14px;
}

.recent-posts-widget .post-item {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

.recent-posts-widget .post-item:last-child {
  margin-bottom: 0;
}

.recent-posts-widget .post-item h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 5px;
}

.recent-posts-widget .post-item h4 a {
  color: var(--default-color);
  transition: 0.3s;
}

.recent-posts-widget .post-item h4 a:hover {
  color: var(--accent-color);
}

.recent-posts-widget .post-item time {
  display: block;
  font-style: italic;
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.tags-widget ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tags-widget ul li {
  display: inline-block;
}

.tags-widget ul a {
  background-color: color-mix(in srgb, var(--default-color), transparent 94%);
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  border-radius: 50px;
  font-size: 14px;
  padding: 5px 15px;
  margin: 0 6px 8px 0;
  display: inline-block;
  transition: 0.3s;
}

.tags-widget ul a:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
}

.tags-widget ul a span {
  padding-left: 5px;
  color: color-mix(in srgb, var(--default-color), transparent 60%);
  font-size: 14px;
}