/**
 * ÇATISER - Tema 1 (UpConstruction) özel bileşenleri
 * Şablonun CSS değişkenlerini kullanır; renk şeması main.css'ten gelir.
 */

/* ---------- Genel yardımcılar ---------- */
.btn-katiser {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  border: 0;
  border-radius: 4px;
  padding: 11px 26px;
  font-weight: 600;
  font-size: 15px;
  transition: 0.3s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-katiser:hover {
  background-color: color-mix(in srgb, var(--accent-color), #000 18%);
  color: var(--contrast-color);
}

.btn-whatsapp {
  background-color: #25d366;
  color: #fff;
  border-radius: 4px;
  padding: 11px 26px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: 0.3s;
}

.btn-whatsapp:hover {
  background-color: #1da851;
  color: #fff;
}

.whatsapp-float {
  position: fixed;
  right: 20px;
  bottom: 80px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  z-index: 996;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  transition: 0.3s;
}

.whatsapp-float:hover {
  color: #fff;
  transform: scale(1.08);
}

.header .logo img {
  max-height: 44px;
  width: auto;
}

.btn-getstarted {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  padding: 8px 22px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--nav-font);
  transition: 0.3s;
  white-space: nowrap;
  margin-left: 20px;
}

.btn-getstarted:hover {
  color: var(--contrast-color);
  background-color: color-mix(in srgb, var(--accent-color), #000 18%);
}

/* ---------- Ürün kartı ---------- */
.urun-karti {
  background-color: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: 0.3s;
}

.urun-karti:hover {
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
}

.urun-karti-gorsel {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  background: #f4f6f7;
  overflow: hidden;
}

.urun-karti-gorsel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.4s;
}

.urun-karti:hover .urun-karti-gorsel img {
  transform: scale(1.06);
}

.urun-karti-marka {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--heading-color);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 3px;
}

.urun-karti-govde {
  padding: 18px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.urun-karti-kategori {
  font-size: 12px;
  color: var(--accent-color);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 6px;
}

.urun-karti-govde h4 {
  font-size: 17px;
  line-height: 1.45;
  margin-bottom: 8px;
}

.urun-karti-govde h4 a {
  color: var(--heading-color);
}

.urun-karti-govde h4 a:hover {
  color: var(--accent-color);
}

.urun-karti-govde p {
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  margin-bottom: 14px;
  flex-grow: 1;
}

.urun-karti-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-color);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.urun-karti-link i {
  transition: 0.3s;
}

.urun-karti-link:hover i {
  transform: translateX(4px);
}

/* ---------- Yan panel (filtreler) ---------- */
.yan-panel {
  position: sticky;
  top: 100px;
}

.yan-blok {
  background-color: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  border-radius: 6px;
  padding: 20px;
  margin-bottom: 22px;
}

.yan-blok h4 {
  font-size: 17px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--accent-color);
  display: inline-block;
}

.yan-arama {
  position: relative;
}

.yan-arama input {
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
  border-radius: 4px;
  padding: 11px 44px 11px 14px;
  font-size: 14px;
  background: var(--surface-color);
  color: var(--default-color);
}

.yan-arama input:focus {
  outline: none;
  border-color: var(--accent-color);
}

.yan-arama button {
  position: absolute;
  right: 4px;
  top: 4px;
  bottom: 4px;
  width: 38px;
  border: 0;
  border-radius: 3px;
  background: var(--accent-color);
  color: var(--contrast-color);
  cursor: pointer;
}

.yan-kategori,
.yan-marka {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 460px;
  overflow-y: auto;
}

.yan-kategori ul {
  list-style: none;
  padding-left: 14px;
  margin: 4px 0 0;
  border-left: 2px solid color-mix(in srgb, var(--default-color), transparent 88%);
}

.yan-kategori li,
.yan-marka li {
  margin-bottom: 2px;
}

.yan-kategori a,
.yan-marka a {
  display: block;
  padding: 6px 4px;
  font-size: 14px;
  color: var(--default-color);
  border-radius: 3px;
  transition: 0.2s;
}

.yan-kategori a:hover,
.yan-marka a:hover {
  color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color), transparent 92%);
}

.yan-kategori a.aktif,
.yan-marka a.aktif {
  color: var(--accent-color);
  font-weight: 700;
}

.yan-kategori .seviye-0 > a {
  font-weight: 600;
}

.yan-marka .temizle {
  color: #b23c3c;
  font-size: 13px;
}

.yan-iletisim p {
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
}

/* ---------- Alt kategori şeridi ---------- */
.alt-kategori-serit {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
}

.alt-kategori-kutu {
  background-color: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  border-radius: 6px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: 0.25s;
}

.alt-kategori-kutu:hover {
  border-color: var(--accent-color);
  transform: translateY(-3px);
}

.alt-kategori-kutu .ikon {
  font-size: 22px;
  color: var(--accent-color);
  line-height: 1;
}

.alt-kategori-kutu .ad {
  font-weight: 600;
  font-size: 14px;
  color: var(--heading-color);
  line-height: 1.35;
}

.alt-kategori-kutu .adet {
  font-size: 12px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

/* ---------- Boş sonuç ---------- */
.bos-sonuc i {
  font-size: 56px;
  color: color-mix(in srgb, var(--default-color), transparent 65%);
  display: block;
  margin-bottom: 14px;
}

/* ---------- Ürün detay ---------- */
.urun-galeri-ana {
  display: block;
  position: relative;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  border-radius: 6px;
  overflow: hidden;
  background: #f4f6f7;
  aspect-ratio: 4 / 3;
}

.urun-galeri-ana img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.urun-galeri-ana .buyut {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.urun-galeri-kucuk {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.urun-galeri-kucuk a {
  width: 76px;
  height: 66px;
  border: 2px solid color-mix(in srgb, var(--default-color), transparent 85%);
  border-radius: 4px;
  overflow: hidden;
  background: #f4f6f7;
}

.urun-galeri-kucuk a.aktif {
  border-color: var(--accent-color);
}

.urun-galeri-kucuk img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.urun-bilgi-kategori {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent-color);
  margin-bottom: 10px;
}

.urun-bilgi h1 {
  font-size: 30px;
  line-height: 1.3;
  margin-bottom: 14px;
}

.urun-bilgi-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: 14px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.urun-bilgi-meta i {
  color: var(--accent-color);
  margin-right: 4px;
}

.urun-bilgi-ozet {
  font-size: 15px;
  line-height: 1.75;
}

.urun-hizli-ozellik {
  background: color-mix(in srgb, var(--default-color), transparent 95%);
  border-radius: 6px;
  padding: 16px 18px;
  margin: 20px 0;
}

.urun-hizli-ozellik h5 {
  font-size: 15px;
  margin-bottom: 10px;
}

.urun-hizli-ozellik table th {
  font-weight: 600;
  width: 45%;
  font-size: 14px;
  color: var(--heading-color);
  background: transparent;
}

.urun-hizli-ozellik table td {
  font-size: 14px;
  background: transparent;
}

.kucuk-link {
  font-size: 13px;
  font-weight: 600;
}

.urun-dosyalar h5 {
  font-size: 15px;
  margin-bottom: 10px;
}

.dosya-satir {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  border-radius: 5px;
  margin-bottom: 8px;
  color: var(--default-color);
  transition: 0.25s;
}

.dosya-satir:hover {
  border-color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color), transparent 94%);
  color: var(--default-color);
}

.dosya-satir > i:first-child {
  font-size: 22px;
  color: #d0342c;
}

.dosya-satir .ad {
  flex-grow: 1;
  font-size: 14px;
  font-weight: 600;
}

.dosya-satir .boyut {
  font-size: 12px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.dosya-satir .indir {
  color: var(--accent-color);
}

.dosya-kart {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  border-radius: 6px;
  color: var(--default-color);
  transition: 0.25s;
  height: 100%;
}

.dosya-kart:hover {
  border-color: var(--accent-color);
  color: var(--default-color);
}

.dosya-kart > i:first-child {
  font-size: 30px;
  color: #d0342c;
}

.dosya-kart div {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.dosya-kart small {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.urun-eylem {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.urun-telefon {
  margin-top: 14px;
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
}

.urun-telefon a {
  font-weight: 700;
}

.urun-sekmeler .nav-tabs {
  border-bottom: 2px solid color-mix(in srgb, var(--default-color), transparent 88%);
  gap: 4px;
}

.urun-sekmeler .nav-link {
  border: 0;
  border-bottom: 3px solid transparent;
  color: var(--default-color);
  font-weight: 600;
  font-size: 15px;
  padding: 12px 20px;
  background: transparent;
}

.urun-sekmeler .nav-link.active {
  color: var(--accent-color);
  border-bottom-color: var(--accent-color);
  background: transparent;
}

.urun-sekmeler .tab-content {
  padding: 26px 4px;
  line-height: 1.85;
}

.urun-sekmeler .tab-content img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

.ozellik-tablo th {
  background: color-mix(in srgb, var(--default-color), transparent 93%);
  color: var(--heading-color);
}

.benzer-urunler {
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
}

.benzer-urunler h3 {
  font-size: 22px;
}

/* ---------- Marka kartları ---------- */
.marka-serit {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
  align-items: stretch;
}

.marka-kutu {
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  border-radius: 6px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  transition: 0.25s;
}

.marka-kutu:hover {
  border-color: var(--accent-color);
}

.marka-kutu img {
  max-width: 100%;
  max-height: 60px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.75;
  transition: 0.3s;
}

.marka-kutu:hover img {
  filter: none;
  opacity: 1;
}

.marka-kutu span {
  font-weight: 700;
  color: var(--heading-color);
}

.marka-kart {
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: 0.25s;
}

.marka-kart:hover {
  border-color: var(--accent-color);
  transform: translateY(-4px);
}

.marka-kart-logo {
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: #fff;
}

.marka-kart-logo img {
  max-width: 100%;
  max-height: 76px;
  object-fit: contain;
}

.marka-kart-harf {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--accent-color);
  color: var(--contrast-color);
  font-size: 26px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.marka-kart-govde {
  padding: 14px;
  text-align: center;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.marka-kart-govde h4 {
  font-size: 16px;
  margin-bottom: 2px;
  color: var(--heading-color);
}

.marka-kart-govde .adet {
  font-size: 12px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

/* ---------- Blog ---------- */
.blog-karti {
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: 0.25s;
}

.blog-karti:hover {
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.09);
}

.blog-karti .post-img {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.blog-karti .post-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.4s;
}

.blog-karti:hover .post-img img {
  transform: scale(1.05);
}

.blog-karti-govde {
  padding: 18px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.blog-karti .post-category {
  font-size: 12px;
  color: var(--accent-color);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 6px;
}

.blog-karti .title {
  font-size: 18px;
  line-height: 1.4;
  margin-bottom: 8px;
}

.blog-karti .title a {
  color: var(--heading-color);
}

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

.blog-karti .ozet {
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  flex-grow: 1;
}

.blog-karti .post-meta {
  font-size: 12px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  padding-top: 10px;
  margin-top: 10px;
}

.blog-yazi .post-img img {
  width: 100%;
  border-radius: 6px;
  margin-bottom: 20px;
}

.blog-yazi .title {
  font-size: 30px;
  line-height: 1.3;
  color: var(--heading-color);
}

.blog-yazi .meta-top ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin: 12px 0 20px;
}

.blog-yazi .meta-top i {
  color: var(--accent-color);
  margin-right: 5px;
}

.blog-yazi .content {
  line-height: 1.85;
}

.blog-yazi .content img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

.son-yazi {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
  color: var(--default-color);
}

.son-yazi:last-child {
  border-bottom: 0;
}

.son-yazi img {
  width: 64px;
  height: 52px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}

.son-yazi strong {
  display: block;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
}

.son-yazi small {
  color: color-mix(in srgb, var(--default-color), transparent 45%);
  font-size: 12px;
}

.son-yazi:hover strong {
  color: var(--accent-color);
}

/* ---------- Hizmet detay ---------- */
.hizmet-maddeler {
  list-style: none;
  padding: 0;
  margin: 20px 0;
}

.hizmet-maddeler li {
  padding: 7px 0;
  font-size: 15px;
}

.hizmet-maddeler i {
  color: var(--accent-color);
  margin-right: 8px;
}

.service-box .services-list a.active {
  color: var(--accent-color);
  font-weight: 700;
}

/* ---------- Teklif sayfası ---------- */
.teklif-adimlar {
  margin-top: 26px;
}

.teklif-adim {
  display: flex;
  gap: 16px;
  padding: 14px 0;
}

.teklif-adim .no {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent-color);
  color: var(--contrast-color);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.teklif-adim h5 {
  font-size: 16px;
  margin-bottom: 3px;
}

.teklif-adim p {
  font-size: 14px;
  margin: 0;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
}

.teklif-telefon {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px dashed var(--accent-color);
  border-radius: 6px;
}

.teklif-telefon i {
  font-size: 26px;
  color: var(--accent-color);
}

.teklif-telefon small {
  display: block;
  font-size: 12px;
  color: color-mix(in srgb, var(--default-color), transparent 35%);
}

.teklif-telefon a {
  font-size: 19px;
  font-weight: 700;
}

.teklif-form {
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  border-radius: 8px;
  padding: 30px;
}

.teklif-form h3 {
  font-size: 22px;
  margin-bottom: 18px;
}

.teklif-form .form-label {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 5px;
  color: var(--heading-color);
}

/* ---------- Sayfalama ---------- */
.sayfalama .page-link {
  color: var(--default-color);
  border-color: color-mix(in srgb, var(--default-color), transparent 85%);
  margin: 0 3px;
  border-radius: 4px;
}

.sayfalama .page-item.active .page-link {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--contrast-color);
}

.sayfalama .page-link:hover {
  color: var(--accent-color);
  border-color: var(--accent-color);
}

/* ---------- Sabit sayfa / hata ---------- */
.sabit-sayfa .icerik {
  line-height: 1.85;
}

.sabit-sayfa .icerik img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

.sabit-sayfa .icerik h2,
.sabit-sayfa .icerik h3 {
  margin-top: 28px;
}

.hata-sayfa {
  padding: 90px 0;
}

.hata-kod {
  font-size: 92px;
  font-weight: 800;
  line-height: 1;
  color: var(--accent-color);
  font-family: var(--heading-font);
}

/* ---------- Duyarlı ---------- */
@media (max-width: 991px) {
  .yan-panel {
    position: static;
  }

  .urun-bilgi h1 {
    font-size: 24px;
  }

  .blog-yazi .title {
    font-size: 24px;
  }
}

/* ==========================================================
   AOS güvenlik ağı
   AOS, animasyonlu öğeleri başlangıçta opacity:0 yapar. Kullanıcı
   "hareketi azalt" tercihini açtıysa ya da AOS herhangi bir sebeple
   çalışmazsa içerik görünmez kalır. Aşağıdaki kurallar bunu önler.
   ========================================================== */

/* 1) Hareketi azalt tercihi: animasyon yok, içerik doğrudan görünür */
@media (prefers-reduced-motion: reduce) {
  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

/* 2) AOS çalışmazsa (JS hatası, dosya yüklenmedi vb.) içeriği göster */
html.aos-yedek [data-aos] {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* ---------- Sabit sayfa ikonlu başlığı ---------- */
.sayfa-ikon-baslik {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 18px;
  margin-bottom: 24px;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
}

.sayfa-ikon {
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  background: color-mix(in srgb, var(--accent-color), transparent 88%);
  color: var(--accent-color);
}

.sayfa-ikon-baslik h2 {
  font-size: 26px;
  margin: 0;
  color: var(--heading-color);
}

/* Alt bilgi bağlantı ikonları */
.footer-links ul li a i {
  opacity: 0.55;
  font-size: 0.9em;
}

@media (max-width: 575px) {
  .sayfa-ikon {
    width: 44px;
    height: 44px;
    font-size: 21px;
  }

  .sayfa-ikon-baslik h2 {
    font-size: 21px;
  }
}

/* ---------- Logo okunabilirliği ----------
   Tema 1'de üst menü sayfa başında saydamdır (koyu görselin üstünde durur) ve
   aşağı kaydırınca beyaza döner. Koyu renkli bir logo saydam durumda okunmaz.
   Bu yüzden saydam durumdayken logo beyaza çevrilir. Filtre yöntemi, firma
   panelden kendi logosunu yüklediğinde de çalışır.                        */
body:not(.scrolled) .header .logo img {
  filter: brightness(0) invert(1);
}

.header .logo img {
  transition: filter 0.3s;
}

/* ---------- Çerez bilgilendirme bandı ---------- */
.cerez-bandi {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1080;
  background: #16202e;
  color: #e6eaf0;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.22);
  transform: translateY(100%);
  transition: transform 0.32s ease;
}

.cerez-bandi.gorunur {
  transform: translateY(0);
}

.cerez-icerik {
  max-width: 1280px;
  margin: 0 auto;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.cerez-metin {
  flex: 1 1 420px;
  min-width: 0;
}

.cerez-metin strong {
  display: block;
  font-size: 15px;
  margin-bottom: 4px;
  color: #fff;
}

.cerez-metin p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: #b9c2ce;
}

.cerez-metin a {
  color: #fff;
  text-decoration: underline;
}

.cerez-dugmeler {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.cerez-btn {
  border: 0;
  border-radius: 4px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s;
  white-space: nowrap;
}

.cerez-btn-birincil {
  /* Bant koyu zeminli; tema rengi yerine sabit yüksek kontrastlı eşleşme */
  background: #ffffff;
  color: #16202e;
}

.cerez-btn-birincil:hover {
  filter: brightness(1.1);
}

.cerez-btn-ikincil {
  background: transparent;
  color: #cdd5df;
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.cerez-btn-ikincil:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

@media (max-width: 640px) {
  .cerez-icerik {
    padding: 16px;
    gap: 14px;
  }

  .cerez-dugmeler {
    width: 100%;
  }

  .cerez-btn {
    flex: 1;
    padding: 11px 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cerez-bandi {
    transition: none;
  }
}

/* Tema 1'in sarı vurgusu koyu bantta okunur, onu kullan */
.cerez-btn-birincil {
  background: #feb900;
  color: #16202e;
}

/* ---------- Menü ikonları ---------- */
.navmenu .menu-ikon {
  margin-right: 6px;
  font-size: 0.92em;
  opacity: 0.72;
  vertical-align: -1px;
}

/* Üst menüde dar ekranlarda ikonlar yer kaplamasın */
@media (min-width: 1200px) and (max-width: 1399px) {
  .navmenu > ul > li > a > .menu-ikon {
    display: none;
  }
}

/* Açılır menülerde ikon hizası */
.navmenu .dropdown ul .menu-ikon {
  width: 1.15em;
  text-align: center;
  opacity: 0.6;
}

.navmenu li:hover > a > .menu-ikon,
.navmenu .active > .menu-ikon {
  opacity: 1;
}

/* Alt bilgi sosyal medya ikonları */
.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================
   MEGA MENÜ  (yalnızca masaüstü — 1200px ve üzeri)
   1199px altında şablonun kendi akordiyon menüsü çalışır,
   bu kuralların hiçbiri devreye girmez.
   ========================================================== */
@media (min-width: 1200px) {

  /* Panelin container genişliğinde açılabilmesi için üst öğe
     konumlandırmadan çıkarılır; panel .container-xl'e göre yerleşir. */
  .navmenu .mega {
    position: static;
  }

  .navmenu .mega > ul {
    left: 0;
    right: 0;
    top: 100%;
    width: 100%;
    max-height: none;
    padding: 26px 28px 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* sablon .navmenu ul ogelerine align-items:center uyguluyor; sutunlar ustten hizalanmali */
    align-items: start;
    align-content: start;
    gap: 4px 26px;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.14);
    border-top: 3px solid var(--accent-color);
  }

  /* Sütunlar */
  .navmenu .mega > ul > li {
    min-width: 0;
    padding: 0 0 18px;
  }

  /* Ana kategori başlığı */
  .navmenu .mega > ul > li > a.mega-baslik {
    display: flex;
    align-items: flex-start;
    /* sablon .navmenu a ogelerine space-between uyguluyor */
    justify-content: flex-start;
    gap: 8px;
    padding: 6px 0 8px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    /* --heading-color ust menu baglaminda beyaza doner; acilir menu rengi kullanilir */
    color: var(--nav-dropdown-color);
    border-bottom: 1px solid color-mix(in srgb, var(--nav-dropdown-color), transparent 88%);
    margin-bottom: 8px;
    white-space: normal;
  }

  .navmenu .mega > ul > li > a.mega-baslik:hover {
    color: var(--accent-color);
    background: transparent;
  }

  .navmenu .mega > ul > li > a.mega-baslik .menu-ikon {
    font-size: 16px;
    opacity: 1;
    color: var(--accent-color);
    margin-top: 1px;
  }

  /* Mega menüde açılır ok işaretleri gereksiz */
  .navmenu .mega .toggle-dropdown {
    display: none;
  }

  /* Alt kategori listesi: her zaman açık, kutu değil düz liste */
  .navmenu .mega.dropdown > ul > li.dropdown > ul {
    position: static;
    display: block;
    visibility: visible;
    opacity: 1;
    box-shadow: none;
    background: transparent;
    padding: 0;
    margin: 0;
    border-radius: 0;
    transition: none;
  }

  .navmenu .mega.dropdown > ul > li.dropdown > ul > li {
    min-width: 0;
  }

  .navmenu .mega.dropdown > ul > li.dropdown > ul > li > a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding: 4px 0;
    font-size: 13.5px;
    line-height: 1.4;
    color: color-mix(in srgb, var(--nav-dropdown-color), transparent 15%);
    white-space: normal;
  }

  .navmenu .mega.dropdown > ul > li.dropdown > ul > li > a:hover {
    color: var(--nav-dropdown-hover-color);
    background: transparent;
    padding-left: 3px;
  }

  .navmenu .mega.dropdown > ul > li.dropdown > ul > li > a .menu-ikon {
    font-size: 11px;
    width: 13px;
    opacity: .45;
  }

  .navmenu .mega .mega-daha > a {
    font-weight: 600;
    color: var(--accent-color);
    font-size: 12.5px;
    padding-top: 6px;
  }

  /* Alt şerit: panelin tamamını kaplar */
  .navmenu .mega > ul > li.mega-alt-serit {
    grid-column: 1 / -1;
    display: flex;
    gap: 26px;
    flex-wrap: wrap;
    margin: 4px -28px 0;
    padding: 13px 28px;
    background: color-mix(in srgb, var(--nav-dropdown-color), transparent 95%);
    border-radius: 0 0 6px 6px;
  }

  .navmenu .mega > ul > li.mega-alt-serit a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    font-size: 13.5px;
    color: var(--nav-dropdown-color);
    white-space: nowrap;
  }

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

  .navmenu .mega > ul > li.mega-alt-serit .menu-ikon {
    color: var(--accent-color);
    opacity: 1;
  }
}

/* Çok geniş olmayan masaüstlerinde 3 sütun */
@media (min-width: 1200px) and (max-width: 1399px) {
  .navmenu .mega > ul {
    grid-template-columns: repeat(3, 1fr);
    padding: 22px 22px 0;
  }
}

/* Mobil menüde bağlantılar sola yaslansın.
   Şablon .navmenu bağlantılarına justify-content:space-between uyguluyor;
   menü ikonları eklendikten sonra bu, ikonu sola yazıyı sağa itiyordu. */
@media (max-width: 1199px) {
  .navmenu ul a,
  .navmenu ul a:focus {
    justify-content: flex-start;
    gap: 10px;
  }

  /* Açılır menü okunu en sağda tut */
  .navmenu ul a .toggle-dropdown {
    margin-left: auto;
  }

  .navmenu .menu-ikon {
    opacity: .8;
  }
}

/* Mobilde uzun kategori adları taşmasın, alt satıra sarsın */
@media (max-width: 1199px) {
  .navmenu ul a,
  .navmenu ul a:focus {
    white-space: normal;
    line-height: 1.35;
  }

  .navmenu ul a .toggle-dropdown {
    flex-shrink: 0;
  }
}