/* ==========================================================================
   design-system.css — bilaldemir.com Tasarim Sistemi Katmani (Faz A)
   --------------------------------------------------------------------------
   Amac:  Axil temasini SOKMEDEN, temanin kendi token'larini (:root degiskenleri)
          ve birkac global inceltmeyi yukselterek Apple / Microsoft / Udemy
          duzeyinde net, ferah ve tutarli bir his kazandirmak.
   Nasil: Tema `var(--radius)`, `var(--shadow-primary)`, `var(--font-primary)`,
          `var(--h1)` gibi token'lari HER YERDE kullaniyor. Bu token'lari tek
          noktadan iyilestirince tum arayuz kendini yeniler (dusuk risk, yuksek
          kaldirac). Ayrica global tipografi/odak/hareket cilasi eklenir.
   Yukleme: head.asp icinde style.css'ten SONRA (son gelen kazanir).
   Karanlik mod: temanin `body.active-dark-mode` mekanizmasi desteklenir.
   ========================================================================== */

/* 0) TIPOGRAFI — temada eksik olan agirliklar (500/600/800) da yuklensin.
      Tema --p-semi-bold:600 ve --p-extra-bold:800 tanimliyor ama font import'u
      bu agirliklari indirmiyordu; burada tam skala indirilir. */
@import url("https://fonts.googleapis.com/css2?family=Red+Hat+Display:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600&display=swap");

/* ==========================================================================
   1) TOKEN YUKSELTME  (en yuksek kaldirac — tema bunlari her yerde kullanir)
   ========================================================================== */
:root {
  /* Akiskan baslik olcegi: mobilde yumusakca kuculur, masaustunde mevcut
     degeri (44/36/30/24px) ASMAZ — tasma riski yok, sadece daha oranli. */
  --h1: clamp(2rem,    1.35rem + 2.60vw, 2.75rem);  /* <= 44px */
  --h2: clamp(1.70rem, 1.20rem + 1.90vw, 2.25rem);  /* <= 36px */
  --h3: clamp(1.45rem, 1.15rem + 1.20vw, 1.875rem); /* <= 30px */
  --h4: clamp(1.25rem, 1.05rem + 0.70vw, 1.50rem);  /* <= 24px */

  /* Yumusak, katmanli golgeler (Apple tarzi yukselti — tek katli sert
     golge yerine iki katli, genis ve dusuk-opaklikli) */
  --shadow-light:   0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
  --shadow-primary: 0 1px 2px rgba(16,24,40,.04), 0 12px 28px -8px rgba(16,24,40,.12);
  --shadow-dark:    0 2px 4px rgba(0,0,0,.20),     0 16px 32px -8px rgba(0,0,0,.35);
  --shadow-hover:   0 2px 4px rgba(16,24,40,.05), 0 20px 40px -12px rgba(16,24,40,.18);

  /* Biraz daha yumusak koseler */
  --radius:       12px;
  --radius-big:   18px;
  --radius-small: 8px;

  /* YENI token'lar (temayi bozmadan eklenir) */
  --ease: cubic-bezier(.4, 0, .2, 1);   /* premium hareket egrisi */
  --tracking-tight:   -.02em;           /* buyuk basliklar icin harf araligi */
  --tracking-tighter: -.03em;
  --content-measure: 72ch;              /* okuma genisligi ust siniri */
}

/* ==========================================================================
   2) GLOBAL TABAN  (net tipografi, akici kaydirma, secim, odak)
   ========================================================================== */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;   /* yapiskan header altinda kalmasin */
}

body {
  -webkit-font-smoothing: antialiased;      /* net, ince metin — en belirgin
                                               "premium web" sinyali */
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Buyuk basliklari Apple gibi hafif sikilastir (daha "tasarlanmis" his) */
h1, .h1, h2, .h2,
.section-title .title,
.hero-title {
  letter-spacing: var(--tracking-tight);
}
h1, .h1 { letter-spacing: var(--tracking-tighter); }

/* Marka tonlu metin secimi */
::selection { background: rgba(80, 59, 75, .18); color: inherit; }
body.active-dark-mode ::selection { background: rgba(255, 255, 255, .22); }

/* Erisilebilir + premium ODAK HALKASI (yalnizca klavye kullanicilarina) */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-small);
}
:focus:not(:focus-visible) { outline: none; }   /* fareyle tiklamada halka yok */

/* ==========================================================================
   3) BILESEN CILASI  (gercek tema siniflarina hedefli, dusuk riskli)
   ========================================================================== */

/* Butonlar: yumusak gecis + hafif kalkis (layout'u etkilemez) */
a.axil-button,
button.axil-button {
  border-radius: var(--radius);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              background-color .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease);
}
a.axil-button.button-rounded,
button.axil-button.button-rounded { border-radius: 500px; }

a.axil-button:hover,
button.axil-button:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}
a.axil-button:active,
button.axil-button:active { transform: translateY(0); box-shadow: var(--shadow-light); }

/* Kartlar: yumusak yukselti + hover kalkisi — yalnizca izgara/kart varyantlari
   (tam-genislik liste satirlarina uygulanmaz) */
.content-block.post-grid,
.content-block.modern-post-style,
.content-block.trend-post {
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.content-block.post-grid:hover,
.content-block.modern-post-style:hover {
  transform: translateY(-4px);
}

/* Kart gorsellerine yumusak kose */
.content-block .post-thumbnail img,
.content-block .thumbnail img,
.post-thumbnail img { border-radius: var(--radius); }

/* Yazar avatari — tema yalnizca `min-width:50px` + `img{width:100%}` veriyor;
   sabit yukseklik / object-fit YOK. Kucuk kare PNG'de sorunsuz ama gercek foto
   (uye/*.jpg gibi buyuk/dikdortgen) slider'da tasip buyuk gorunuyor. Her kaynagi
   temanin 50px'lik dairesine sabitle (slider + featured + liste ayni). */
.post-meta .post-author-avatar {
  width: 50px;
  min-width: 50px;
  height: 50px;
  overflow: hidden;
}
.post-meta .post-author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ==========================================================================
   4) TEKNIK ICERIK TIPOGRAFISI  (sozluk / egitim / sorun giderme / sayfalar)
      Microsoft Learn / MDN okunabilirligi — kod, alinti, tablo.
      Kapsam: icerik govde saricilari (.inner, .axil-post-details .content).
   ========================================================================== */

/* Uzun metinlerde rahat okuma genisligi (yalnizca dar govde saricilari) */
.axil-privacy-area .content .inner > p,
.axil-post-details .content > p { max-width: var(--content-measure); }

/* Satir ici kod */
.inner code,
.axil-post-details code {
  font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;
  font-size: .9em;
  background: var(--color-lightest);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  padding: .12em .4em;
}

/* Kod bloklari */
.inner pre,
.axil-post-details pre {
  background: var(--color-extra04);
  color: #e8e8ea;
  border-radius: var(--radius);
  padding: 20px 22px;
  overflow-x: auto;
  line-height: 1.6;
  box-shadow: var(--shadow-light);
}
.inner pre code,
.axil-post-details pre code { background: transparent; border: 0; padding: 0; color: inherit; }

/* Alintilar */
.inner blockquote,
.axil-post-details blockquote {
  border-left: 3px solid var(--color-primary);
  padding: 4px 20px;
  margin: 24px 0;
  color: var(--color-gray);
  font-style: italic;
}

/* Tablolar */
.inner table {
  border-collapse: collapse;
  width: 100%;
  margin: 20px 0;
  font-size: var(--font-size-b2);
}
.inner table th,
.inner table td {
  border: 1px solid var(--color-border);
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
}
.inner table th { background: var(--color-lightest); font-weight: var(--p-semi-bold); }
.inner table tr:hover td { background: rgba(80, 59, 75, .03); }

/* --- Sozluk icerik govdesi (8.768 terim — en cok okunan icerik tipi) -------
   .sozluk-icerik hicbir yerde tanimli degildi (tema varsayilanina dusuyordu);
   .eg-icerik ile ayni kaliteli okuma ritmine kavusturulur. --------------- */
.sozluk-icerik {
  font-size: var(--font-size-b1);
  line-height: 1.8;
  color: var(--color-body);
}
.sozluk-icerik p { margin: 0 0 18px; }
.sozluk-icerik h2 {
  font-size: 24px; margin: 36px 0 14px;
  font-weight: var(--p-bold); letter-spacing: var(--tracking-tight);
}
.sozluk-icerik h3 { font-size: 19px; margin: 28px 0 10px; font-weight: var(--p-semi-bold); }
.sozluk-icerik ul, .sozluk-icerik ol { padding-left: 22px; margin: 0 0 18px; }
.sozluk-icerik li { margin-bottom: 8px; }
.sozluk-icerik strong { font-weight: var(--p-bold); color: var(--color-heading); }
.sozluk-icerik img { border-radius: var(--radius); margin: 8px 0; max-width: 100%; height: auto; }

/* Icerik ici baglantilar: net, alt  cizgili (MDN/MS Learn okunabilirligi) */
.sozluk-icerik a,
.eg-icerik a:not(.eg-btn) {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: text-decoration-thickness .15s var(--ease);
}
.sozluk-icerik a:hover,
.eg-icerik a:not(.eg-btn):hover { text-decoration-thickness: 2px; }

/* ==========================================================================
   5) KARANLIK MOD PARITESI
   ========================================================================== */

/* Icerik ici baglanti kontrasti: #503b4b marka rengi koyu zeminde okunmaz;
   karanlik modda acik bir mor tonuna gecilir (erisilebilirlik). */
body.active-dark-mode .sozluk-icerik a,
body.active-dark-mode .eg-icerik a:not(.eg-btn),
body.active-dark-mode .axil-post-details .content a { color: #c9a3bd; }
body.active-dark-mode .sozluk-icerik strong { color: #fff; }

body.active-dark-mode {
  --shadow-light:   0 1px 2px rgba(0,0,0,.25), 0 1px 3px rgba(0,0,0,.30);
  --shadow-primary: 0 1px 2px rgba(0,0,0,.30), 0 12px 28px -8px rgba(0,0,0,.55);
  --shadow-hover:   0 2px 4px rgba(0,0,0,.35), 0 20px 40px -12px rgba(0,0,0,.60);
}
body.active-dark-mode .inner code,
body.active-dark-mode .axil-post-details code {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .12);
  color: #e8e8ea;
}
body.active-dark-mode .inner table th { background: rgba(255, 255, 255, .06); }
body.active-dark-mode .inner table td,
body.active-dark-mode .inner table th { border-color: rgba(255, 255, 255, .10); }
body.active-dark-mode .inner table tr:hover td { background: rgba(255, 255, 255, .04); }

/* ==========================================================================
   6) MEGA MENU  (bilgi mimarisi — Microsoft tarzi kategorili acilir panel)
      13 dagi­nik ust oge -> 5 kategori. "Egitimler / Ansiklopedi / Araclar"
      parent'lari menu_yerlesim='mega' ile bu izgara panele donusur.
      Temanin .axil-submenu hover/konum mekanizmasi miras alinir; yalnizca
      panel duzeni (genislik + izgara + ikon dosemesi) yukseltilir.
   ========================================================================== */
.mainmenu-nav ul.mainmenu > li.menu-item-has-children .axil-submenu.ds-megamenu {
  display: grid;
  grid-template-columns: repeat(3, minmax(168px, 1fr));
  gap: 2px;
  width: -webkit-max-content;
  width: max-content;
  max-width: min(94vw, 620px);
  padding: 12px;
  border-radius: 0 0 var(--radius) var(--radius);
}

.ds-megamenu li { margin: 0 !important; padding: 0 !important; }

/* Hucre: ikon dosemesi + baslik */
.mainmenu-nav ul.mainmenu > li.menu-item-has-children .axil-submenu.ds-megamenu li a.ds-mega-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-small);
  color: var(--color-heading);
  font-size: var(--font-size-b2);
  font-weight: var(--p-medium);
  line-height: 1.25;
  transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.ds-megamenu li a.ds-mega-link:hover {
  background: var(--color-lightest);
  transform: translateX(2px);
}

/* Ikon dosemesi (marka tonlu, yumusak kose) */
.ds-mega-ico {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: rgba(80, 59, 75, .10);
  color: var(--color-primary);
  font-size: 15px;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.ds-megamenu li a.ds-mega-link:hover .ds-mega-ico {
  background: var(--color-primary);
  color: #fff;
}
/* Uzun basliklar (or. "Bilisim Kisaltmalari") 2 satira sardiginda kalitilan
   text-align:center yuzunden ortalanmis gorunuyordu -> acikca sola yasla. */
.ds-mega-text { display: inline-block; text-align: left; }
.ds-megamenu li a.ds-mega-link { text-align: left; justify-content: flex-start; }

/* ===================================================================
   .ds-crumb — TEK STANDART breadcrumb (tema hero'su icinde, sayfa-serit.asp)
   Mobilde satira sarar, yatay tasma yapmaz.
   =================================================================== */
.axil-breadcrumb-area .ds-crumb { margin-bottom: 12px; }
.axil-breadcrumb-area .ds-crumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;          /* mobilde alt satira sarar */
  align-items: center;
  row-gap: 4px;
}
.axil-breadcrumb-area .ds-crumb li {
  display: inline-flex;
  align-items: center;
  font-size: 16px;              /* hero'daki p ile ayni olcek — daha kucuk kalmiyor */
  line-height: 1.4;
  color: var(--color-body, #65676b);
  min-width: 0;
}
.axil-breadcrumb-area .ds-crumb li:not(:last-child)::after {
  content: "\203A";
  margin: 0 6px 0 10px;
  opacity: .5;
  font-size: 15px;
}
.axil-breadcrumb-area .ds-crumb li > i.fa-home { margin-right: 7px; font-size: 15px; color: #503b4b; }
.axil-breadcrumb-area .ds-crumb a { color: inherit; text-decoration: none; transition: color .15s; }
.axil-breadcrumb-area .ds-crumb a:hover { color: #503b4b; }
.axil-breadcrumb-area .ds-crumb .aktif { color: #503b4b; font-weight: 700; }
body.active-dark-mode .axil-breadcrumb-area .ds-crumb li { color: rgba(255, 255, 255, .72); }
body.active-dark-mode .axil-breadcrumb-area .ds-crumb .aktif { color: #fff; }
body.active-dark-mode .axil-breadcrumb-area .ds-crumb li > i.fa-home { color: #fff; }
@media (max-width: 575px) {
  .axil-breadcrumb-area .ds-crumb li { font-size: 15px; }
  .axil-breadcrumb-area .ds-crumb li:not(:last-child)::after { margin: 0 4px 0 7px; }
}

/* ===================================================================
   Sayfa hero'su (.breadcrumb-style-1) — TEK STANDART
   KURAL: h1'de ikon YOK (bkz. sayfa-serit.asp). Baslik ve aciklama her
   sayfada ayni olcekte; sayfaya ozel renk/ikon gövdede tasinir.
   Tema 80px sabit dolgu veriyordu; mobilde ekranin ucte birini yiyordu.
   =================================================================== */
.breadcrumb-style-1 .description {
  font-size: 16px;              /* kirinti ile ayni olcek */
  line-height: 1.7;
  margin-bottom: 0;
  max-width: 78ch;
}
.breadcrumb-style-1 .page-title { letter-spacing: -.02em; }
/* Kompakt varyant (2026-09-18): sayfanın kendi h1'i gövdede (findik, bilisim-odasi,
   arac). Aynı bant, aynı kırıntı; başlık tekrarı yok, yalnız ince bir iz şeridi. */
.breadcrumb-style-1.serit-kompakt { padding: 14px 0; }
.breadcrumb-style-1.serit-kompakt .ds-crumb { margin: 0; }
@media (max-width: 991px) {
  .breadcrumb-style-1 { padding: 48px 0; }
  .breadcrumb-style-1.serit-kompakt { padding: 12px 0; }
}
@media (max-width: 575px) {
  .breadcrumb-style-1 { padding: 32px 0; }
  .breadcrumb-style-1 .description { font-size: 15px; }
}

/* Karanlik mod paritesi */
body.active-dark-mode .mainmenu-nav ul.mainmenu > li.menu-item-has-children .axil-submenu.ds-megamenu li a.ds-mega-link {
  color: rgba(255, 255, 255, .92);
}
body.active-dark-mode .ds-megamenu li a.ds-mega-link:hover { background: rgba(255, 255, 255, .06); }
body.active-dark-mode .ds-mega-ico { background: rgba(255, 255, 255, .10); color: #fff; }

/* Dar ekranda (mega'nin gorundugu tek yer >=1200px; yine de guvence) */
@media (max-width: 1199.98px) {
  .mainmenu-nav ul.mainmenu > li.menu-item-has-children .axil-submenu.ds-megamenu {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: none;
  }
}

/* ==========================================================================
   7) ANA SAYFA HERO + URUN BLOKLARI  (icerik yerlesimi — Apple/MS kompozisyon)
      Kisisel marka acilisi + "Ne var burada" (Ansiklopedi/Araclar/Egitimler).
   ========================================================================== */

/* --- Ortak: eyebrow + bolum basligi --- */
.ds-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: var(--p-semi-bold);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 14px;
}
.ds-section-head { text-align: center; margin-bottom: 34px; }
.ds-section-head__title {
  margin: 0;
  letter-spacing: var(--tracking-tight);
}

/* --- HERO --- */
.ds-hero {
  padding: clamp(56px, 4vw + 30px, 104px) 0 clamp(48px, 3vw + 24px, 88px);
  text-align: center;
  background:
    radial-gradient(60% 120% at 50% 0%, rgba(80, 59, 75, .07) 0%, rgba(80, 59, 75, 0) 70%),
    var(--color-white);
}
.ds-hero__inner { max-width: 840px; margin: 0 auto; }
.ds-hero__title {
  margin: 0 0 18px;
  font-size: clamp(2.1rem, 1.2rem + 3.4vw, 3.4rem);
  font-weight: var(--p-extra-bold);
  line-height: 1.08;
  letter-spacing: var(--tracking-tighter);
  color: var(--color-heading);
}
.ds-hero__title span { color: var(--color-primary); }
.ds-hero__lead {
  max-width: 620px;
  margin: 0 auto;
  font-size: clamp(1.05rem, .95rem + .5vw, 1.28rem);
  line-height: 1.6;
  color: var(--color-gray);
}
.ds-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 30px;
}

/* Ikincil (ghost) buton — axil-button ile ayni olcu */
.ds-btn-ghost {
  display: inline-flex;
  align-items: center;
  height: 50px;
  padding: 0 28px;
  border: 2px solid var(--color-border);
  border-radius: 500px;
  background: transparent;
  color: var(--color-heading);
  font-weight: var(--p-medium);
  font-size: var(--font-size-b2);
  transition: border-color .25s var(--ease), color .25s var(--ease),
              transform .25s var(--ease), background-color .25s var(--ease);
}
.ds-btn-ghost:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: translateY(-2px);
}

/* Istatistik seridi */
.ds-hero__stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 40px;
  margin: 42px 0 0;
  padding: 0;
  list-style: none;
}
.ds-hero__stats li {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
}
.ds-hero__stats strong {
  font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.25rem);
  font-weight: var(--p-extra-bold);
  color: var(--color-heading);
  letter-spacing: var(--tracking-tight);
}
.ds-hero__stats span {
  font-size: 13px;
  color: var(--color-gray);
  margin-top: 4px;
}

/* --- URUN BLOKLARI --- */
.ds-features { padding: clamp(48px, 3vw + 24px, 84px) 0; background: var(--color-white); }
.ds-features__head { text-align: center; margin-bottom: 40px; }
.ds-features__title { margin: 0; letter-spacing: var(--tracking-tight); }

.ds-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(266px, 1fr));
  gap: 22px;
}
.ds-feature {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 30px 28px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-big);
  background: var(--color-white);
  box-shadow: var(--shadow-light);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.ds-feature:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
  border-color: transparent;
}
.ds-feature__ico {
  width: 54px; height: 54px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 14px;
  background: rgba(80, 59, 75, .10);
  color: var(--color-primary);
  font-size: 22px;
  margin-bottom: 20px;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.ds-feature:hover .ds-feature__ico { background: var(--color-primary); color: #fff; }
.ds-feature__title { margin: 0 0 10px; font-size: 20px; letter-spacing: var(--tracking-tight); }
.ds-feature__desc {
  margin: 0 0 20px;
  color: var(--color-gray);
  font-size: var(--font-size-b2);
  line-height: 1.6;
}
.ds-feature__link {
  margin-top: auto;
  color: var(--color-primary);
  font-weight: var(--p-semi-bold);
  font-size: var(--font-size-b2);
}
.ds-feature__link i { margin-left: 6px; transition: transform .25s var(--ease); }
.ds-feature:hover .ds-feature__link i { transform: translateX(4px); }

/* --- HERO/FEATURES karanlik mod --- */
body.active-dark-mode .ds-hero {
  background:
    radial-gradient(60% 120% at 50% 0%, rgba(201, 163, 189, .10) 0%, rgba(201, 163, 189, 0) 70%),
    #212121;
}
body.active-dark-mode .ds-hero__title,
body.active-dark-mode .ds-hero__stats strong,
body.active-dark-mode .ds-features__title,
body.active-dark-mode .ds-section-head__title,
body.active-dark-mode .ds-feature__title { color: #fff; }
body.active-dark-mode .ds-hero__title span,
body.active-dark-mode .ds-eyebrow,
body.active-dark-mode .ds-feature__link { color: #c9a3bd; }
body.active-dark-mode .ds-btn-ghost { border-color: rgba(255,255,255,.22); color: #fff; }
body.active-dark-mode .ds-btn-ghost:hover { border-color: #c9a3bd; color: #c9a3bd; }
body.active-dark-mode .ds-features { background: #212121; }
body.active-dark-mode .ds-feature {
  background: #2a2a2a;
  border-color: rgba(255,255,255,.08);
}
body.active-dark-mode .ds-feature__ico { background: rgba(201,163,189,.14); color: #c9a3bd; }
body.active-dark-mode .ds-feature:hover .ds-feature__ico { background: #c9a3bd; color: #212121; }

/* --- Dar ekran --- */
@media (max-width: 575.98px) {
  .ds-hero__cta { flex-direction: column; }
  .ds-hero__cta .axil-button, .ds-hero__cta .ds-btn-ghost { justify-content: center; width: 100%; }
  .ds-hero__stats { gap: 18px 28px; }
}

/* ==========================================================================
   8) HAREKETI AZALT tercihi (erisilebilirlik)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ==========================================================================
   "bd" MARKA ROZETI + MARKA MENUSU  (header.asp, menu_yerlesim='marka')
   Ana menunun EN BASINDA duran kucuk rozet; altinda markanin alt bolumleri.
   Her satirin rengi tr_menu.menu_css'ten --bd degiskenine basilir; renk
   yalnizca KARE SUSLEME ve ikonda kullanilir, METINDE ASLA kullanilmaz —
   boylece acik temada #503b4b, koyu temada saf beyaz okunur kalir.
   ========================================================================== */
.mainmenu-nav ul.mainmenu > li.ds-bd-parent > a.ds-bd {
  padding-left: 0 !important;
  padding-right: 14px !important;
}
.mainmenu-nav ul.mainmenu > li.ds-bd-parent > a.ds-bd::after { display: none; }  /* tema oku gizlensin */

.ds-bd-mark {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 12px;
  background: linear-gradient(135deg, #6b5266 0%, #503b4b 55%, #2e2230 100%);
  color: #fff;
  font-size: 15px; font-weight: 800; letter-spacing: -.04em; line-height: 1;
  box-shadow: 0 4px 12px rgba(80, 59, 75, .38), inset 0 1px 0 rgba(255, 255, 255, .22);
  overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
/* Ustunden periyodik gecen isilti */
.ds-bd-mark::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.5) 50%, transparent 62%);
  transform: translateX(-130%);
  animation: dsBdParla 5.5s ease-in-out infinite;
}
@keyframes dsBdParla {
  0%, 62% { transform: translateX(-130%); }
  78%     { transform: translateX(130%); }
  100%    { transform: translateX(130%); }
}
.ds-bd-parent:hover .ds-bd-mark {
  transform: translateY(-2px) rotate(-3deg);
  box-shadow: 0 8px 20px rgba(80, 59, 75, .5), inset 0 1px 0 rgba(255, 255, 255, .3);
}
body.active-dark-mode .ds-bd-mark {
  background: linear-gradient(135deg, #8d6f86 0%, #6b5266 55%, #3b2b37 100%);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .25);
}

/* --- Acilir marka listesi --- */
.mainmenu-nav ul.mainmenu > li.menu-item-has-children .axil-submenu.ds-bd-menu {
  width: -webkit-max-content;
  width: max-content;
  min-width: 240px;
  padding: 10px;
  border-radius: 0 0 var(--radius) var(--radius);
}
.ds-bd-menu li { margin: 0 !important; padding: 0 !important; }

.mainmenu-nav ul.mainmenu > li.menu-item-has-children .axil-submenu.ds-bd-menu li a.ds-bd-link {
  position: relative;
  display: flex; align-items: center; justify-content: flex-start;
  text-align: left;               /* tema alt menuyu ortaliyor; sola yasla */
  gap: 11px;
  padding: 9px 14px 9px 12px;
  border-radius: var(--radius-small);
  color: var(--color-heading);            /* METIN: tema rengi, marka rengi DEGIL */
  font-size: var(--font-size-b2);
  font-weight: var(--p-medium);
  line-height: 1.25;
  transition: background-color .2s var(--ease), transform .2s var(--ease);
}
/* Kare susleme kaldirildi: satirda yalniz ikon + metin kalir. */
.ds-bd-menu li a.ds-bd-link::before { content: none; }
.ds-bd-menu li a.ds-bd-link i {
  font-size: 15px; width: 20px; text-align: center;
  color: var(--bd, #503b4b);
  opacity: .85;
}
.ds-bd-menu li a.ds-bd-link:hover {
  background: var(--color-lightest);
  transform: translateX(2px);
}

body.active-dark-mode .mainmenu-nav ul.mainmenu > li.menu-item-has-children .axil-submenu.ds-bd-menu li a.ds-bd-link {
  color: #fff;                             /* koyu temada TAM BEYAZ */
}
body.active-dark-mode .ds-bd-menu li a.ds-bd-link:hover { background: rgba(255, 255, 255, .07); }
/* Koyu zeminde ikon beyaza dogru acilir */
body.active-dark-mode .ds-bd-menu li a.ds-bd-link i {
  color: color-mix(in srgb, var(--bd, #503b4b) 55%, #fff);
  opacity: 1;
}

/* --- Alt menu ayraci (Egitimler > bd Ozel Egitimler oncesi) --- */
.ds-ayrac {
  grid-column: 1 / -1;
  height: 1px !important;
  margin: 8px 10px !important;
  padding: 0 !important;
  background: var(--color-border, #e5e7eb);
  list-style: none;
}
body.active-dark-mode .ds-ayrac { background: rgba(255, 255, 255, .12); }

@media (prefers-reduced-motion: reduce) {
  .ds-bd-mark::after { animation: none; }
  .ds-bd-mark, .ds-bd-menu li a.ds-bd-link, .ds-bd-menu li a.ds-bd-link::before { transition: none; }
}

/* ==========================================================================
   KURAL: HİÇBİR YERDE SABİT AÇIK RENK YOK
   Sayfa içine gömülü style="background:#fff" gibi degerler koyu temada
   kirilir (beyaz kutu + beyaz yazi). Bunun yerine asagidaki anlamsal
   yuzey token'lari ve .ds-kart yardimci sinifi kullanilir; ikisi de
   body.active-dark-mode ile kendiliginden doner.
   Yeni bir kart/kutu yazarken: <div class="ds-kart"> — inline renk YOK.
   ========================================================================== */
:root {
  --ds-yuzey:   #ffffff;
  --ds-yuzey-2: #f6f7f9;
  --ds-metin:   #23252a;
  --ds-soluk:   #6b7280;
  --ds-cizgi:   #e4e7eb;
  --ds-golge:   0 1px 2px rgba(16,24,40,.04), 0 10px 24px -10px rgba(16,24,40,.14);
}
body.active-dark-mode {
  --ds-yuzey:   #131518;
  --ds-yuzey-2: #0c0d0f;
  --ds-metin:   #dcdee2;
  --ds-soluk:   #939aa4;
  --ds-cizgi:   #2a2e33;
  --ds-golge:   0 1px 2px rgba(0,0,0,.4), 0 10px 24px -10px rgba(0,0,0,.65);
}

.ds-kart {
  background: var(--ds-yuzey);
  color: var(--ds-metin);
  border: 1px solid var(--ds-cizgi);
  border-radius: var(--radius);
  box-shadow: var(--ds-golge);
}
.ds-kart .title, .ds-kart h2, .ds-kart h3, .ds-kart h4 { color: var(--ds-metin); }
.ds-kart .title a, .ds-kart h3 a { color: inherit; }
.ds-kart p { color: var(--ds-soluk); }
body.active-dark-mode .ds-kart .title a:hover, body.active-dark-mode .ds-kart h3 a:hover { color: #c9a3bd; }

/* --------------------------------------------------------------------------
   Slider oklari: acik temada gri cerceve yeterliydi, koyu temada
   neredeyse gorunmuyordu (--color-gray zeminle ayni tonda kaliyor).
   -------------------------------------------------------------------------- */
body.active-dark-mode .slide-arrow {
  border-color: rgba(255, 255, 255, .38);
  background: rgba(255, 255, 255, .07);
}
body.active-dark-mode .slide-arrow i { color: #fff; }
body.active-dark-mode .slide-arrow:hover {
  background: #fff;
  border-color: #fff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .55);
}
body.active-dark-mode .slide-arrow:hover i { color: #1a1a1a; }

/* Footer tanitim kartlari — hover satir ici JS ile yaziliyordu (sabit renk,
   koyu temada bozuk). Artik CSS ve token uzerinden. */
.fr-kart { transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease); }
.fr-kart:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: var(--color-primary); }
body.active-dark-mode .fr-kart:hover { border-color: #c9a3bd; }

/* ==========================================================================
   ERISILEBILIRLIK TEMELLERI  (WCAG 2.2 AA)
   2.4.1 Bypass Blocks  -> .ds-atla ("Iceriğe atla")
   3.3.2 Labels         -> .ds-gorsel-gizli (gorunmeyen ama okunan etiket)
   Ikisi de gorsel olarak yoktur; klavye/ekran okuyucu icin vardir.
   ========================================================================== */
.ds-atla {
  position: absolute; left: 16px; top: -60px; z-index: 3000;
  display: inline-flex; align-items: center;
  height: 44px; padding: 0 20px; border-radius: 0 0 10px 10px;
  background: #503b4b; color: #fff !important;
  font-size: 15px; font-weight: 700; text-decoration: none;
  box-shadow: 0 8px 22px rgba(0,0,0,.32);
  transition: top .18s var(--ease);
}
.ds-atla:focus, .ds-atla:focus-visible { top: 0; outline: 3px solid #fff; outline-offset: -6px; }
body.active-dark-mode .ds-atla { background: #c9a3bd; color: #17151a !important; }
body.active-dark-mode .ds-atla:focus { outline-color: #17151a; }

/* Ana icerik yer isareti odaklandiginda cerceve cizmesin (programatik odak) */
#icerik:focus { outline: none; }

/* Gorsel olarak gizli ama ekran okuyucuya acik (etiketler icin) */
.ds-gorsel-gizli {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* ==========================================================================
   Icerik imzasi — eski hali tek satir metindi ("... tarafindan yazildi").
   Yazar kartina donusturuldu: foto + ad + unvan + son guncelleme.
   Renkler --ds-* uzerinden; koyu/acik temada ayni okunurluk.
   ========================================================================== */
.ic-imza {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 26px 0;
  padding: 14px 18px;
  background: var(--ds-zemin-2);
  border: 1px solid var(--ds-cizgi);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-small);
}
.ic-imza-foto { flex: 0 0 48px; line-height: 0; }
.ic-imza-foto img {
  width: 48px; height: 48px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--ds-cizgi); background: var(--ds-zemin);
}
.ic-imza-govde { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ic-imza-ust {
  font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ds-soluk);
}
.ic-imza a.ic-imza-ad {
  font-size: 15.5px; font-weight: 700; line-height: 1.3;
  color: var(--ds-metin); text-decoration: none;
}
.ic-imza a.ic-imza-ad:hover { color: var(--color-primary); text-decoration: underline; }
.ic-imza-unvan { font-size: 13px; color: var(--ds-soluk); }
.ic-imza-tarih {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--ds-soluk); white-space: nowrap;
}
.ic-imza-tarih i { opacity: .8; }
body.active-dark-mode .ic-imza { border-left-color: #c9a3bd; }
body.active-dark-mode .ic-imza a.ic-imza-ad:hover { color: #c9a3bd; }
@media (max-width: 575px) {
  .ic-imza { gap: 11px; padding: 12px 14px; }
  .ic-imza-tarih { margin-left: 0; flex-basis: 100%; }
}

/* Ilgili terim rozetleri — daha once cerceves,z dolgu renkli etiketlerdi;
   duz sayfada "yan yana anlamsiz metin" gibi duruyordu. Artik cerceveli. */
.ds-etiketler { display: flex; flex-wrap: wrap; gap: 8px; }
.ds-etiket {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px;
  font-size: 13.5px; font-weight: 500; line-height: 1.2;
  color: var(--ds-metin) !important;
  background: var(--ds-zemin-2);
  border: 1px solid var(--ds-cizgi);
  border-radius: 999px;
  text-decoration: none !important;
  transition: border-color .18s var(--ease), background-color .18s var(--ease), transform .18s var(--ease);
}
.ds-etiket::before {
  content: ""; flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-primary); opacity: .55;
}
.ds-etiket:hover {
  border-color: var(--color-primary);
  background: var(--ds-zemin);
  transform: translateY(-2px);
}
.ds-etiket:hover::before { opacity: 1; }
body.active-dark-mode .ds-etiket:hover { border-color: #c9a3bd; }
body.active-dark-mode .ds-etiket::before { background: #c9a3bd; }

/* Mega menu bolum basligi (Egitimler panelinde acik kaynak / bd ozel ayrimi) */
.ds-megamenu li.ds-mega-baslik {
  grid-column: 1 / -1;
  padding: 2px 12px 6px;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--ds-soluk);
  pointer-events: none;
}
.ds-megamenu li.ds-ayrac { grid-column: 1 / -1; }

/* ==========================================================================
   GERI BILDIRIM KUTUSU (geri-bildirim.asp)
   Ansiklopedi detay sayfalarinin altinda kapali <details> olarak durur.
   Renkler --ds-* uzerinden: acik/koyu temada ayni okunurluk.
   ========================================================================== */
.gb-kutu { margin: 34px 0 8px; }

.gb-durum {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0 0 14px; padding: 13px 16px;
  border-radius: var(--radius-small);
  font-size: 14.5px; line-height: 1.55;
  border: 1px solid var(--ds-cizgi);
  background: var(--ds-zemin-2);
  color: var(--ds-metin);
}
.gb-durum i { font-size: 17px; margin-top: 1px; }
.gb-ok    { border-left: 3px solid #4b8b5f; }
.gb-ok i  { color: #4b8b5f; }
.gb-hata  { border-left: 3px solid #b4564e; }
.gb-hata i{ color: #b4564e; }
body.active-dark-mode .gb-ok    { border-left-color: #7cc191; }
body.active-dark-mode .gb-ok i  { color: #7cc191; }
body.active-dark-mode .gb-hata  { border-left-color: #e08a82; }
body.active-dark-mode .gb-hata i{ color: #e08a82; }

.gb-ac {
  border: 1px solid var(--ds-cizgi);
  border-radius: var(--radius-small);
  background: var(--ds-zemin-2);
  overflow: hidden;
}
.gb-ac > summary {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 18px;
  cursor: pointer;
  list-style: none;
  transition: background-color .18s var(--ease);
}
.gb-ac > summary::-webkit-details-marker { display: none; }
.gb-ac > summary:hover { background: var(--ds-zemin); }
.gb-ac > summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }

.gb-ikon {
  flex: 0 0 38px; width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--ds-zemin);
  border: 1px solid var(--ds-cizgi);
  color: var(--color-primary);
  font-size: 15px;
}
body.active-dark-mode .gb-ikon { color: #c9a3bd; }

.gb-summary-metin { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gb-summary-metin b { font-size: 15.5px; font-weight: 700; color: var(--ds-metin); line-height: 1.3; }
.gb-summary-metin > span { font-size: 13.5px; color: var(--ds-soluk); line-height: 1.45; }

.gb-ok-isareti { margin-left: auto; color: var(--ds-soluk); transition: transform .2s var(--ease); }
.gb-ac[open] .gb-ok-isareti { transform: rotate(180deg); }

/* --- Form --- */
.gb-form {
  padding: 4px 18px 20px;
  border-top: 1px solid var(--ds-cizgi);
  margin-top: -1px;
}
.gb-satir { margin-top: 16px; }
.gb-etiket {
  display: block; margin-bottom: 6px;
  font-size: 13px; font-weight: 600; color: var(--ds-metin);
}
.gb-zorunlu { color: #b4564e; }
.gb-istege  { font-weight: 400; color: var(--ds-soluk); }

/* Tema formlara width:100% + kendi renklerini basiyor; burada kendi
   tokenlarimizla eziyoruz ki koyu temada beyaz kutu kalmasin. */
.gb-form .gb-alan {
  width: 100%;
  padding: 11px 14px;
  font-size: 14.5px; line-height: 1.5;
  font-family: inherit;
  color: var(--ds-metin);
  background: var(--ds-zemin);
  border: 1px solid var(--ds-cizgi);
  border-radius: var(--radius-small);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.gb-form textarea.gb-alan { resize: vertical; min-height: 96px; }
.gb-form select.gb-alan { height: auto; cursor: pointer; }
.gb-form .gb-alan::placeholder { color: var(--ds-soluk); opacity: .85; }
.gb-form .gb-alan:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
}
body.active-dark-mode .gb-form .gb-alan:focus {
  border-color: #c9a3bd;
  box-shadow: 0 0 0 3px rgba(201, 163, 189, .22);
}
@supports not (color: color-mix(in srgb, red 10%, transparent)) {
  .gb-form .gb-alan:focus { box-shadow: none; }
}

.gb-onay {
  display: flex; align-items: flex-start; gap: 9px;
  margin-top: 14px;
  font-size: 13.5px; line-height: 1.5; color: var(--ds-soluk);
  cursor: pointer;
}
.gb-onay input { width: auto; margin-top: 2px; accent-color: var(--color-primary); }

.gb-alt {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 18px;
}
.gb-gonder {
  width: auto;                        /* tema butonlara width:100% veriyor */
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 24px;
  font-size: 14.5px; font-weight: 600;
  color: #fff;
  background: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: 999px;
  cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), opacity .18s var(--ease);
}
.gb-gonder:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); opacity: .95; }
.gb-not { font-size: 12.5px; color: var(--ds-soluk); flex: 1 1 220px; line-height: 1.45; }

/* Honeypot: ekran okuyucudan da uzak, gorunmez */
.gb-tuzak { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 575px) {
  .gb-ac > summary { gap: 11px; padding: 13px 14px; }
  .gb-form { padding: 4px 14px 18px; }
  .gb-gonder { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .gb-ok-isareti, .gb-gonder { transition: none; }
}

/* ==========================================================================
   GORUSLER (gorusler.asp)
   Onceki hal tema kart bilesenini kullaniyordu: tarih basliktan buyuk
   duruyor, kartlar farkli yukseklikte kaliyor, koyu temada cerceve
   kayboluyordu. Burada kendi izgaramiz var — grid satirdaki tum kartlari
   esit yukseklige zorlar, mesaj buyur, tarih en alta kucuk olarak iner.
   ========================================================================== */
.go-sayac { margin: 0 0 22px; font-size: 14px; color: var(--ds-soluk); }
.go-sayac b { color: var(--ds-metin); }

.go-izgara {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
  align-items: stretch;                 /* esit yukseklik */
}
@media (max-width: 991px) { .go-izgara { grid-template-columns: 1fr; gap: 20px; } }

.go-kart {
  position: relative;
  display: flex; flex-direction: column;
  height: 100%;
  padding: 26px 26px 20px;
  background: var(--ds-zemin-2);
  border: 1px solid var(--ds-cizgi);
  border-radius: var(--radius);
  overflow: hidden;                     /* mobilde tasma olmasin */
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.go-kart:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
/* Ust cizgi kartin cinsiyet rengini tasir — dekoratif, bilgi tasimaz */
.go-kart::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--go-renk, var(--color-primary));
  opacity: .75;
}
.go-kadin { --go-renk: #a8577e; }
.go-erkek { --go-renk: #46688f; }
.go-notr  { --go-renk: #6f6478; }
body.active-dark-mode .go-kadin { --go-renk: #d79ab8; }
body.active-dark-mode .go-erkek { --go-renk: #8fb2d9; }
body.active-dark-mode .go-notr  { --go-renk: #b3a7bb; }
body.active-dark-mode .go-kart:hover { border-color: var(--go-renk); }

.go-tirnak {
  position: absolute; top: 4px; right: 18px;
  font-size: 76px; line-height: 1;
  font-family: Georgia, "Times New Roman", serif;
  color: var(--go-renk, var(--color-primary));
  opacity: .10;
  pointer-events: none;
}

.go-ust { display: flex; align-items: center; gap: 13px; margin-bottom: 15px; }
.go-avatar {
  flex: 0 0 44px; width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 17px;
  color: var(--go-renk, var(--color-primary));
  background: var(--ds-zemin);
  border: 1px solid var(--ds-cizgi);
}
.go-kimlik { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.go-ad {
  font-size: 16px; font-weight: 700; line-height: 1.25;
  color: var(--ds-metin);
  overflow-wrap: anywhere;
}
.go-unvan { font-size: 13px; line-height: 1.35; color: var(--ds-soluk); overflow-wrap: anywhere; }

.go-mesaj {
  flex: 1 1 auto;                       /* alt satiri hep dibe iter */
  margin: 0 0 18px;
  padding: 0;
  border: 0;
  font-size: 15px; line-height: 1.68;
  color: var(--ds-metin);
  overflow-wrap: anywhere;
}

.go-alt {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px solid var(--ds-cizgi);
}
.go-site {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--ds-soluk);
  text-decoration: none;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 100%;
}
.go-site:hover { color: var(--go-renk, var(--color-primary)); text-decoration: underline; }
.go-bosluk { flex: 1 1 auto; }
.go-tarih {
  margin-left: auto;
  font-size: 12px; color: var(--ds-soluk); opacity: .85; white-space: nowrap;
}

/* --- Sayfalama --- */
.go-sayfalama {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 8px; margin-top: 40px;
}
.go-syf {
  display: inline-flex; align-items: center; gap: 7px;
  min-width: 40px; height: 40px; padding: 0 14px;
  justify-content: center;
  font-size: 14px; font-weight: 600;
  color: var(--ds-metin);
  background: var(--ds-zemin-2);
  border: 1px solid var(--ds-cizgi);
  border-radius: var(--radius-small);
  text-decoration: none !important;
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.go-syf:hover { border-color: var(--color-primary); background: var(--ds-zemin); }
.go-aktif {
  color: #fff;
  background: var(--color-primary);
  border-color: var(--color-primary);
  cursor: default;
}
body.active-dark-mode .go-syf:hover { border-color: #c9a3bd; }
body.active-dark-mode .go-aktif { background: #7d5c72; border-color: #7d5c72; }

/* --- Davet seridi (gorusler -> gorus yazin) --- */
.go-davet {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  margin-top: 44px; padding: 24px 28px;
  background: var(--ds-zemin-2);
  border: 1px solid var(--ds-cizgi);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-small);
}
body.active-dark-mode .go-davet { border-left-color: #c9a3bd; }
.go-davet-metin { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.go-davet-metin b { font-size: 16.5px; color: var(--ds-metin); }
.go-davet-metin span { font-size: 14px; color: var(--ds-soluk); line-height: 1.55; }

.go-cta {
  width: auto;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 26px;
  font-size: 15px; font-weight: 600;
  color: #fff !important;
  background: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: 999px;
  text-decoration: none !important;
  white-space: nowrap;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.go-cta:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }

/* --- Bos durum --- */
.go-bos {
  text-align: center; padding: 60px 20px;
  border: 1px dashed var(--ds-cizgi); border-radius: var(--radius);
  background: var(--ds-zemin-2);
}
.go-bos i { font-size: 40px; color: var(--ds-soluk); opacity: .6; }
.go-bos h4 { margin: 16px 0 6px; color: var(--ds-metin); }
.go-bos p { margin: 0 0 20px; color: var(--ds-soluk); }

@media (max-width: 575px) {
  .go-kart { padding: 22px 20px 18px; }
  .go-tirnak { font-size: 58px; right: 12px; }
  .go-mesaj { font-size: 14.5px; }
  .go-alt { gap: 8px; }
  .go-tarih { margin-left: 0; }
  .go-davet { padding: 20px; }
  .go-cta { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .go-kart, .go-cta, .go-syf { transition: none; }
  .go-kart:hover, .go-cta:hover { transform: none; }
}

/* ==========================================================================
   GORUS YAZIN formu — cinsiyet secimi ve istege bagli etiketler
   ========================================================================== */
.gy-istege { font-weight: 400; font-size: 12.5px; color: var(--ds-soluk); }
.gy-grup-etiket {
  display: block; margin-bottom: 8px;
  font-size: 14px; font-weight: 500; color: var(--ds-metin);
}
.gy-secim { display: flex; flex-wrap: wrap; gap: 8px; }
.gy-secenek { margin: 0; cursor: pointer; }
.gy-secenek input {
  position: absolute; opacity: 0; width: 1px; height: 1px;
}
.gy-secenek > span {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px;
  font-size: 14px;
  color: var(--ds-metin);
  background: var(--ds-zemin-2);
  border: 1px solid var(--ds-cizgi);
  border-radius: 999px;
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.gy-secenek:hover > span { border-color: var(--color-primary); }
.gy-secenek input:checked + span {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  font-weight: 600;
}
.gy-secenek input:focus-visible + span { outline: 2px solid var(--color-primary); outline-offset: 2px; }
@supports not (color: color-mix(in srgb, red 10%, transparent)) {
  .gy-secenek input:checked + span { background: var(--ds-zemin); }
}
body.active-dark-mode .gy-secenek:hover > span,
body.active-dark-mode .gy-secenek input:checked + span { border-color: #c9a3bd; }

.gy-alt { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.gy-alt .axil-button { width: auto; }
.gy-baglanti {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14.5px; font-weight: 500;
  color: var(--ds-soluk); text-decoration: none;
}
.gy-baglanti:hover { color: var(--color-primary); text-decoration: underline; }
body.active-dark-mode .gy-baglanti:hover { color: #c9a3bd; }

/* ==========================================================================
   S.S.S (sss.asp)
   Onceki hal tema akordeonunu satir ici stille kuruyordu; koyu temada
   zemin beyaz kalip yazi okunmuyordu. Burasi tamamen --ds-* token'lari
   uzerinde ve <details> tabanli — Bootstrap JS yuklenmese de calisir.
   ========================================================================== */

/* --- Arama --- */
.ss-arama {
  position: relative;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  max-width: 680px; margin: 0 0 30px;
}
.ss-arama-ikon {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  color: var(--ds-soluk); font-size: 15px; pointer-events: none;
}
.ss-arama-alan {
  flex: 1 1 260px; min-width: 0;
  padding: 13px 16px 13px 44px;
  font-size: 15px; font-family: inherit;
  color: var(--ds-metin);
  background: var(--ds-zemin-2);
  border: 1px solid var(--ds-cizgi);
  border-radius: 999px;
  transition: border-color .18s var(--ease);
}
.ss-arama-alan::placeholder { color: var(--ds-soluk); opacity: .9; }
.ss-arama-alan:focus { outline: none; border-color: var(--color-primary); }
body.active-dark-mode .ss-arama-alan:focus { border-color: #c9a3bd; }
.ss-arama-dugme {
  width: auto; padding: 13px 26px;
  font-size: 15px; font-weight: 600; color: #fff;
  background: var(--color-primary); border: 1px solid var(--color-primary);
  border-radius: 999px; cursor: pointer;
}
.ss-arama-dugme:hover { opacity: .92; }
.ss-arama-temizle { font-size: 14px; color: var(--ds-soluk); text-decoration: underline; }

/* --- Kategori rozetleri --- */
.ss-kat-serit { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 34px; }
.ss-kat-rozet {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 15px;
  font-size: 13.5px; font-weight: 500;
  color: var(--ds-metin) !important;
  background: var(--ds-zemin-2);
  border: 1px solid var(--ds-cizgi);
  border-radius: 999px;
  text-decoration: none !important;
  transition: border-color .18s var(--ease), transform .18s var(--ease);
}
.ss-kat-rozet span {
  font-size: 11.5px; font-weight: 700;
  padding: 2px 7px; border-radius: 999px;
  background: var(--ds-zemin); color: var(--ds-soluk);
}
.ss-kat-rozet:hover { border-color: var(--color-primary); transform: translateY(-2px); }
body.active-dark-mode .ss-kat-rozet:hover { border-color: #c9a3bd; }

/* --- Bolumler ve akordeon --- */
.ss-bolum { margin-bottom: 42px; scroll-margin-top: 90px; }
.ss-bolum-baslik {
  margin: 0 0 16px;
  padding-bottom: 10px;
  font-size: 21px; font-weight: 700;
  color: var(--ds-metin);
  border-bottom: 2px solid var(--ds-cizgi);
}
.ss-sorular { display: flex; flex-direction: column; gap: 10px; }

.ss-soru {
  background: var(--ds-zemin-2);
  border: 1px solid var(--ds-cizgi);
  border-radius: var(--radius-small);
  overflow: hidden;
  transition: border-color .18s var(--ease);
}
.ss-soru[open] { border-color: var(--color-primary); }
body.active-dark-mode .ss-soru[open] { border-color: #c9a3bd; }

.ss-soru > summary {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 18px;
  cursor: pointer; list-style: none;
  transition: background-color .18s var(--ease);
}
.ss-soru > summary::-webkit-details-marker { display: none; }
.ss-soru > summary:hover { background: var(--ds-zemin); }
.ss-soru > summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }

.ss-soru-metin {
  flex: 1 1 auto;
  font-size: 15.5px; font-weight: 600; line-height: 1.45;
  color: var(--ds-metin);
  overflow-wrap: anywhere;
}
.ss-soru-ok {
  flex: 0 0 28px; width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 12px;
  color: var(--color-primary);
  background: var(--ds-zemin);
  border: 1px solid var(--ds-cizgi);
  transition: transform .2s var(--ease);
}
.ss-soru[open] .ss-soru-ok { transform: rotate(45deg); }
body.active-dark-mode .ss-soru-ok { color: #c9a3bd; }

.ss-yanit {
  padding: 2px 18px 18px;
  font-size: 15px; line-height: 1.72;
  color: var(--ds-metin);
  border-top: 1px solid var(--ds-cizgi);
  margin-top: -1px; padding-top: 16px;
}
.ss-yanit p { color: inherit; }
.ss-yanit a { color: var(--color-primary); }
body.active-dark-mode .ss-yanit a { color: #c9a3bd; }
.ss-yanit img { max-width: 100%; height: auto; border-radius: var(--radius-small); }
.ss-yanit pre, .ss-yanit table { overflow-x: auto; max-width: 100%; }

/* --- Bos durum --- */
.ss-bos {
  text-align: center; padding: 54px 20px;
  border: 1px dashed var(--ds-cizgi); border-radius: var(--radius);
  background: var(--ds-zemin-2);
}
.ss-bos i { font-size: 38px; color: var(--ds-soluk); opacity: .6; }
.ss-bos h4 { margin: 14px 0 6px; color: var(--ds-metin); }
.ss-bos p { margin: 0; color: var(--ds-soluk); }

/* --- Soru sorma bolumu --- */
.ss-sor {
  margin-top: 48px; padding: 30px;
  background: var(--ds-zemin-2);
  border: 1px solid var(--ds-cizgi);
  border-radius: var(--radius);
  scroll-margin-top: 90px;
}
.ss-sor-ust { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 22px; }
.ss-sor-ikon {
  flex: 0 0 46px; width: 46px; height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 19px;
  color: var(--color-primary);
  background: var(--ds-zemin);
  border: 1px solid var(--ds-cizgi);
}
body.active-dark-mode .ss-sor-ikon { color: #c9a3bd; }
.ss-sor-ust h2 { margin: 0 0 6px; font-size: 21px; color: var(--ds-metin); }
.ss-sor-ust p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ds-soluk); }

.ss-durum {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0 0 18px; padding: 13px 16px;
  border-radius: var(--radius-small);
  font-size: 14.5px; line-height: 1.55;
  background: var(--ds-zemin);
  border: 1px solid var(--ds-cizgi);
  color: var(--ds-metin);
}
.ss-ok   { border-left: 3px solid #4b8b5f; }
.ss-ok i { color: #4b8b5f; }
.ss-hata { border-left: 3px solid #b4564e; }
.ss-hata i { color: #b4564e; }
body.active-dark-mode .ss-ok { border-left-color: #7cc191; }
body.active-dark-mode .ss-ok i { color: #7cc191; }
body.active-dark-mode .ss-hata { border-left-color: #e08a82; }
body.active-dark-mode .ss-hata i { color: #e08a82; }

.ss-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.ss-genis { grid-column: 1 / -1; }
@media (max-width: 767px) { .ss-form { grid-template-columns: 1fr; } }

.ss-etiket { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--ds-metin); }
.ss-zorunlu { color: #b4564e; }
.ss-istege { font-weight: 400; color: var(--ds-soluk); }

.ss-form .ss-alan {
  width: 100%;
  padding: 11px 14px;
  font-size: 14.5px; line-height: 1.5; font-family: inherit;
  color: var(--ds-metin);
  background: var(--ds-zemin);
  border: 1px solid var(--ds-cizgi);
  border-radius: var(--radius-small);
  transition: border-color .18s var(--ease);
}
.ss-form textarea.ss-alan { resize: vertical; min-height: 82px; }
.ss-form .ss-alan::placeholder { color: var(--ds-soluk); opacity: .85; }
.ss-form .ss-alan:focus { outline: none; border-color: var(--color-primary); }
body.active-dark-mode .ss-form .ss-alan:focus { border-color: #c9a3bd; }

.ss-onay { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; color: var(--ds-soluk); cursor: pointer; }
.ss-onay input { width: auto; margin-top: 3px; accent-color: var(--color-primary); }
.ss-onay small { display: block; font-size: 12.5px; opacity: .85; }

.ss-form-alt { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ss-gonder {
  width: auto;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 26px;
  font-size: 15px; font-weight: 600; color: #fff;
  background: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: 999px; cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.ss-gonder:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.ss-not { flex: 1 1 240px; font-size: 12.5px; line-height: 1.5; color: var(--ds-soluk); }
.ss-tuzak { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 575px) {
  .ss-sor { padding: 22px 18px; }
  .ss-arama-dugme { flex: 1 1 auto; }
  .ss-gonder { width: 100%; justify-content: center; }
  .ss-bolum-baslik { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .ss-soru-ok, .ss-kat-rozet, .ss-gonder { transition: none; }
  .ss-kat-rozet:hover, .ss-gonder:hover { transform: none; }
}

/* ==========================================================================
   BILISIM SIRKETLERI (bilisim-sirketleri.asp)
   Onceki hal 885 karti tek sayfada basiyordu. Simdi vitrin (kategori
   basina 12) + filtreli liste (36/sayfa) kipleri var; ustte A-Z, ulke
   ve kategori seritleri. Tum renkler --ds-* token'i uzerinden.
   ========================================================================== */

/* --- Arama --- */
.sr-arama {
  position: relative; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  max-width: 620px; margin: 0 0 24px;
}
.sr-arama-ikon {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  color: var(--ds-soluk); font-size: 15px; pointer-events: none;
}
.sr-arama-alan {
  flex: 1 1 240px; min-width: 0;
  padding: 12px 16px 12px 44px;
  font-size: 15px; font-family: inherit;
  color: var(--ds-metin);
  background: var(--ds-zemin-2);
  border: 1px solid var(--ds-cizgi);
  border-radius: 999px;
}
.sr-arama-alan::placeholder { color: var(--ds-soluk); opacity: .9; }
.sr-arama-alan:focus { outline: none; border-color: var(--color-primary); }
body.active-dark-mode .sr-arama-alan:focus { border-color: #c9a3bd; }
.sr-arama-dugme {
  width: auto; padding: 12px 26px;
  font-size: 15px; font-weight: 600; color: #fff;
  background: var(--color-primary); border: 1px solid var(--color-primary);
  border-radius: 999px; cursor: pointer;
}

/* --- A-Z seridi --- */
.sr-harfler { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 18px; }
.sr-harf-kutu {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding: 0 9px;
  font-size: 13.5px; font-weight: 600;
  color: var(--ds-metin) !important;
  background: var(--ds-zemin-2);
  border: 1px solid var(--ds-cizgi);
  border-radius: 8px;
  text-decoration: none !important;
  transition: border-color .16s var(--ease), background-color .16s var(--ease);
}
.sr-harf-kutu:hover { border-color: var(--color-primary); background: var(--ds-zemin); }
.sr-harf-kutu.sr-pasif { opacity: .32; cursor: default; pointer-events: none; }
.sr-harf-kutu.sr-secili,
.sr-rozet.sr-secili {
  color: #fff !important;
  background: var(--color-primary);
  border-color: var(--color-primary);
}
body.active-dark-mode .sr-harf-kutu.sr-secili,
body.active-dark-mode .sr-rozet.sr-secili { background: #7d5c72; border-color: #7d5c72; }

/* --- Ulke / kategori seritleri --- */
.sr-serit { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; }
.sr-serit-baslik {
  font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ds-soluk); margin-right: 3px;
}
.sr-rozet {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px;
  font-size: 13.5px;
  color: var(--ds-metin) !important;
  background: var(--ds-zemin-2);
  border: 1px solid var(--ds-cizgi);
  border-radius: 999px;
  text-decoration: none !important;
  transition: border-color .16s var(--ease), transform .16s var(--ease);
}
.sr-rozet span {
  font-size: 11px; font-weight: 700;
  padding: 2px 7px; border-radius: 999px;
  background: var(--ds-zemin); color: var(--ds-soluk);
}
.sr-rozet.sr-secili span { background: rgba(255, 255, 255, .22); color: #fff; }
.sr-rozet:hover { border-color: var(--color-primary); transform: translateY(-2px); }
body.active-dark-mode .sr-rozet:hover { border-color: #c9a3bd; }

/* --- Vitrin bolumleri --- */
.sr-bolum { margin-top: 38px; }
.sr-bolum-ust {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  margin-bottom: 16px; padding-bottom: 9px;
  border-bottom: 2px solid var(--ds-cizgi);
}
.sr-bolum-baslik { margin: 0; font-size: 20px; font-weight: 700; color: var(--ds-metin); }
.sr-tumu {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600;
  color: var(--color-primary) !important;
  text-decoration: none !important;
  white-space: nowrap;
}
.sr-tumu span {
  font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: var(--ds-zemin-2); border: 1px solid var(--ds-cizgi); color: var(--ds-soluk);
}
.sr-tumu:hover { text-decoration: underline !important; }
body.active-dark-mode .sr-tumu { color: #c9a3bd !important; }

/* --- Kart izgarasi: vitrinde 6'li satir --- */
.sr-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 1199px) { .sr-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .sr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; } }
@media (max-width: 479px)  { .sr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.sr-kart {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  height: 100%;
  padding: 18px 12px 14px;
  text-align: center;
  text-decoration: none !important;
  background: var(--ds-zemin-2);
  border: 1px solid var(--ds-cizgi);
  border-radius: var(--radius-small);
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s var(--ease);
}
.sr-kart:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: var(--color-primary); }
body.active-dark-mode .sr-kart:hover { border-color: #c9a3bd; }

.sr-logo {
  height: 52px; width: 100%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 10px;
}
.sr-logo img { max-height: 44px; max-width: 100%; object-fit: contain; }
/* Koyu temada beyaz zeminli logolar kaybolur — hafif alt zemin verilir */
body.active-dark-mode .sr-logo {
  background: rgba(255, 255, 255, .07);
  border-radius: 8px;
  padding: 4px 8px;
}
.sr-harf {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  font-size: 19px; font-weight: 700;
  color: var(--ds-soluk);
  background: var(--ds-zemin);
  border: 1px solid var(--ds-cizgi);
}
.sr-ad {
  display: block; font-size: 13.5px; font-weight: 600; line-height: 1.35;
  color: var(--ds-metin); overflow-wrap: anywhere;
}
.sr-ulke { display: block; margin-top: 3px; font-size: 11.5px; color: var(--ds-soluk); }

/* --- Liste kipi --- */
.sr-sayac { margin: 0 0 18px; font-size: 14px; color: var(--ds-soluk); }
.sr-sayac b { color: var(--ds-metin); }
.sr-sayac a { color: var(--color-primary); }
body.active-dark-mode .sr-sayac a { color: #c9a3bd; }

.sr-sayfalama {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 7px; margin-top: 34px;
}
.sr-syf {
  display: inline-flex; align-items: center; gap: 7px;
  min-width: 38px; height: 38px; padding: 0 13px; justify-content: center;
  font-size: 14px; font-weight: 600;
  color: var(--ds-metin) !important;
  background: var(--ds-zemin-2);
  border: 1px solid var(--ds-cizgi);
  border-radius: var(--radius-small);
  text-decoration: none !important;
}
.sr-syf:hover { border-color: var(--color-primary); background: var(--ds-zemin); }
.sr-syf-aktif { color: #fff !important; background: var(--color-primary); border-color: var(--color-primary); cursor: default; }
body.active-dark-mode .sr-syf-aktif { background: #7d5c72; border-color: #7d5c72; }
.sr-syf-ara { color: var(--ds-soluk); padding: 0 4px; }

.sr-bos {
  text-align: center; padding: 54px 20px;
  border: 1px dashed var(--ds-cizgi); border-radius: var(--radius);
  background: var(--ds-zemin-2);
}
.sr-bos i { font-size: 36px; color: var(--ds-soluk); opacity: .6; }
.sr-bos h4 { margin: 14px 0 6px; color: var(--ds-metin); }
.sr-bos p { margin: 0; color: var(--ds-soluk); }
.sr-bos a { color: var(--color-primary); }

@media (prefers-reduced-motion: reduce) {
  .sr-kart, .sr-rozet, .sr-harf-kutu { transition: none; }
  .sr-kart:hover, .sr-rozet:hover { transform: none; }
}

/* Sirket detayi — rakip/alternatif blogu (sr-grid'i yeniden kullanir) */
.sd-benzer-not { margin: -6px 0 16px; font-size: 14px; color: var(--ds-soluk); }
.sd-rakip { margin-bottom: 18px; }
.sd-kategori-git { margin: 0 0 8px; }
.sd-kategori-git a {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14.5px; font-weight: 600;
  color: var(--color-primary); text-decoration: none;
}
.sd-kategori-git a:hover { text-decoration: underline; }
body.active-dark-mode .sd-kategori-git a { color: #c9a3bd; }

/* ==========================================================================
   OYUN KODLARI (oyun-kodlari.asp / oyun-detay.asp)
   Arama, tur seridi ve bos durum bilesenleri sirketler sayfasindan
   yeniden kullanilir (.sr-arama, .sr-rozet, .sr-bos, .sr-bolum-baslik).
   Burada yalniz oyuna ozgu parcalar tanimlanir.
   ========================================================================== */

/* --- Hub: oyun kartlari --- */
.oy-bolum { margin-top: 36px; }
.oy-izgara {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 991px) { .oy-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .oy-izgara { grid-template-columns: 1fr; } }

.oy-kart {
  display: flex; flex-direction: column; gap: 8px;
  height: 100%;
  padding: 20px;
  text-decoration: none !important;
  background: var(--ds-zemin-2);
  border: 1px solid var(--ds-cizgi);
  border-radius: var(--radius-small);
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s var(--ease);
}
.oy-kart:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: var(--color-primary); }
body.active-dark-mode .oy-kart:hover { border-color: #c9a3bd; }

.oy-ust { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.oy-ad { font-size: 17px; font-weight: 700; color: var(--ds-metin); line-height: 1.3; }
.oy-adet {
  flex: 0 0 auto;
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
  padding: 3px 9px; border-radius: 999px;
  color: var(--color-primary);
  background: var(--ds-zemin);
  border: 1px solid var(--ds-cizgi);
}
body.active-dark-mode .oy-adet { color: #c9a3bd; }
.oy-meta { font-size: 12.5px; color: var(--ds-soluk); }
.oy-aciklama { flex: 1 1 auto; font-size: 13.5px; line-height: 1.6; color: var(--ds-soluk); }
.oy-platform {
  display: inline-flex; align-items: center; gap: 7px;
  padding-top: 10px; margin-top: 2px;
  border-top: 1px solid var(--ds-cizgi);
  font-size: 12px; color: var(--ds-soluk);
}

/* --- Detay: kunye --- */
.oy-kunye {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: 24px;
  background: var(--ds-cizgi);
  border: 1px solid var(--ds-cizgi);
  border-radius: var(--radius-small);
  overflow: hidden;
}
@media (max-width: 767px) { .oy-kunye { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.oy-kunye > div {
  display: flex; flex-direction: column; gap: 3px;
  padding: 14px 16px;
  background: var(--ds-zemin-2);
}
.oy-kunye-etiket {
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ds-soluk);
}
.oy-kunye-deger { font-size: 14.5px; font-weight: 600; color: var(--ds-metin); text-decoration: none; }
a.oy-kunye-deger { color: var(--color-primary); }
a.oy-kunye-deger:hover { text-decoration: underline; }
body.active-dark-mode a.oy-kunye-deger { color: #c9a3bd; }

.oy-giris { margin: 0 0 28px; font-size: 15.5px; line-height: 1.7; color: var(--ds-metin); }
.oy-tur-baslik { margin-top: 34px; }
.oy-kat-baslik {
  margin: 22px 0 10px;
  font-size: 15px; font-weight: 700;
  color: var(--ds-soluk);
  letter-spacing: .04em; text-transform: uppercase;
}

/* --- Detay: kod tablosu --- */
.oy-tablo-sar { overflow-x: auto; margin-bottom: 8px; }
.oy-tablo {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--ds-cizgi);
  border-radius: var(--radius-small);
  overflow: hidden;
}
.oy-tablo th {
  padding: 11px 14px;
  text-align: left;
  font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ds-soluk);
  background: var(--ds-zemin);
  border-bottom: 1px solid var(--ds-cizgi);
  white-space: nowrap;
}
.oy-tablo td {
  padding: 12px 14px;
  vertical-align: top;
  font-size: 14.5px;
  color: var(--ds-metin);
  background: var(--ds-zemin-2);
  border-bottom: 1px solid var(--ds-cizgi);
}
.oy-tablo tr:last-child td { border-bottom: 0; }
.oy-tablo tr:hover td { background: var(--ds-zemin); }

.oy-kod {
  width: auto;
  display: inline-block;
  padding: 6px 12px;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 13.5px; font-weight: 700;
  color: var(--color-primary);
  background: var(--ds-zemin);
  border: 1px dashed var(--ds-cizgi);
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .16s var(--ease), background-color .16s var(--ease);
}
.oy-kod:hover { border-style: solid; border-color: var(--color-primary); }
.oy-kod.oy-kopyalandi { color: #4b8b5f; border-color: #4b8b5f; border-style: solid; }
body.active-dark-mode .oy-kod { color: #d7aecb; }
body.active-dark-mode .oy-kod:hover { border-color: #c9a3bd; }
body.active-dark-mode .oy-kod.oy-kopyalandi { color: #7cc191; border-color: #7cc191; }

.oy-etki { display: block; font-weight: 500; }
.oy-not {
  display: block; margin-top: 5px;
  font-size: 13px; line-height: 1.55; color: var(--ds-soluk);
}
.oy-not code {
  padding: 1px 5px; border-radius: 4px;
  background: var(--ds-zemin); border: 1px solid var(--ds-cizgi);
  font-size: 12.5px;
}
.oy-plat { white-space: nowrap; color: var(--ds-soluk); font-size: 13px; }
.oy-geri { margin-top: 30px; }

@media (max-width: 575px) {
  .oy-tablo th, .oy-tablo td { padding: 10px 11px; font-size: 13.5px; }
  .oy-kod { font-size: 12.5px; padding: 5px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .oy-kart, .oy-kod { transition: none; }
  .oy-kart:hover { transform: none; }
}

/* ==========================================================================
   DOSYA INDIRME MERKEZI (dosya-indir.asp / dosya-indir-detay.asp)
   Onceki hal sabit #eee cerceve ve satir ici stil kullaniyordu; koyu
   temada kartlar kayboluyordu. Arama kutusu .sr-arama'ya devredildi.
   ========================================================================== */

.di-izgara {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 991px) { .di-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .di-izgara { grid-template-columns: 1fr; } }

.di-kart {
  display: flex; align-items: center; gap: 13px;
  padding: 15px 16px;
  text-decoration: none !important;
  background: var(--ds-zemin-2);
  border: 1px solid var(--ds-cizgi);
  border-radius: var(--radius-small);
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s var(--ease);
}
.di-kart:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: var(--color-primary); }
body.active-dark-mode .di-kart:hover { border-color: #c9a3bd; }
.di-ikon {
  flex: 0 0 40px; width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 16px;
  color: var(--color-primary);
  background: var(--ds-zemin);
  border: 1px solid var(--ds-cizgi);
}
body.active-dark-mode .di-ikon { color: #c9a3bd; }
.di-govde { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.di-govde b { font-size: 15px; color: var(--ds-metin); overflow-wrap: anywhere; }
.di-govde small { font-size: 12.5px; color: var(--ds-soluk); }
.di-bos { color: var(--ds-soluk); }

/* --- Detay: kunye --- */
.di-kunye {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; margin: 0 0 20px;
  background: var(--ds-cizgi);
  border: 1px solid var(--ds-cizgi);
  border-radius: var(--radius-small);
  overflow: hidden;
}
.di-kunye > div {
  display: flex; flex-direction: column; gap: 3px;
  padding: 13px 15px; background: var(--ds-zemin-2);
}
.di-kunye-e {
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ds-soluk);
}
.di-kunye-d { font-size: 14px; font-weight: 600; color: var(--ds-metin); text-decoration: none; }
a.di-kunye-d { color: var(--color-primary); }
a.di-kunye-d:hover { text-decoration: underline; }
body.active-dark-mode a.di-kunye-d { color: #c9a3bd; }
.di-lisans { color: #4b8b5f; }
.di-lisans-yok { color: #b4564e; }
body.active-dark-mode .di-lisans { color: #7cc191; }
body.active-dark-mode .di-lisans-yok { color: #e08a82; }

.di-resmi { margin: 0 0 22px; font-size: 14px; color: var(--ds-soluk); }
.di-resmi a { color: var(--color-primary); }
body.active-dark-mode .di-resmi a { color: #c9a3bd; }
.di-bolum-baslik {
  margin: 30px 0 14px; padding-bottom: 8px;
  font-size: 18px; font-weight: 700; color: var(--ds-metin);
  border-bottom: 2px solid var(--ds-cizgi);
}

/* --- Detay: surum tablosu --- */
.di-tablo-sar { overflow-x: auto; }
.di-tablo { width: 100%; border-collapse: collapse; border: 1px solid var(--ds-cizgi); }
.di-tablo th {
  padding: 11px 14px; text-align: left; white-space: nowrap;
  font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ds-soluk); background: var(--ds-zemin);
  border-bottom: 1px solid var(--ds-cizgi);
}
.di-tablo td {
  padding: 12px 14px; vertical-align: top; font-size: 14px;
  color: var(--ds-metin); background: var(--ds-zemin-2);
  border-bottom: 1px solid var(--ds-cizgi);
}
.di-tablo tr:last-child td { border-bottom: 0; }
.di-tablo tr:hover td { background: var(--ds-zemin); }
.di-sag { text-align: right; white-space: nowrap; }
.di-surum-not { display: block; margin-top: 4px; font-size: 12.5px; color: var(--ds-soluk); }
.di-sha {
  display: block; margin-top: 4px;
  font-family: Consolas, monospace; font-size: 11px; color: var(--ds-soluk);
  word-break: break-all; opacity: .8;
}
.di-indir {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px;
  font-size: 13.5px; font-weight: 600;
  color: #fff !important; text-decoration: none !important;
  background: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: 999px;
}
.di-indir:hover { opacity: .92; }
.di-kilitli {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--ds-soluk);
}

/* --- Lisans uyarisi --- */
.di-lisans-uyari {
  display: flex; align-items: flex-start; gap: 13px;
  margin: 8px 0 20px; padding: 16px 18px;
  background: var(--ds-zemin-2);
  border: 1px solid var(--ds-cizgi);
  border-left: 3px solid #b4564e;
  border-radius: var(--radius-small);
}
body.active-dark-mode .di-lisans-uyari { border-left-color: #e08a82; }
.di-lisans-uyari i { font-size: 19px; color: #b4564e; margin-top: 2px; }
body.active-dark-mode .di-lisans-uyari i { color: #e08a82; }
.di-lisans-uyari b { display: block; font-size: 15px; color: var(--ds-metin); margin-bottom: 4px; }
.di-lisans-uyari span { font-size: 13.5px; line-height: 1.6; color: var(--ds-soluk); }

@media (max-width: 575px) {
  .di-tablo th, .di-tablo td { padding: 10px 11px; font-size: 13px; }
  .di-sag { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .di-kart { transition: none; }
  .di-kart:hover { transform: none; }
}

/* ==========================================================================
   UZANTI ORNEK DOSYASI (uzanti-detay.asp)
   Yalniz acik metin bicimleri icin doldurulur; dosyalar /assets/ornek/
   altinda durur ve ornek-dosya.asp uzerinden indirilir.
   ========================================================================== */
.uz-ornek {
  display: flex; align-items: center; gap: 15px; flex-wrap: wrap;
  margin: 24px 0;
  padding: 18px 20px;
  background: var(--ds-zemin-2);
  border: 1px solid var(--ds-cizgi);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-small);
}
body.active-dark-mode .uz-ornek { border-left-color: #c9a3bd; }
.uz-ornek-ikon {
  flex: 0 0 42px; width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 17px;
  color: var(--color-primary);
  background: var(--ds-zemin); border: 1px solid var(--ds-cizgi);
}
body.active-dark-mode .uz-ornek-ikon { color: #c9a3bd; }
.uz-ornek-govde { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 220px; }
.uz-ornek-govde b { font-size: 15px; color: var(--ds-metin); }
.uz-ornek-govde span { font-size: 13.5px; line-height: 1.55; color: var(--ds-soluk); }
.uz-ornek-govde small {
  font-family: Consolas, monospace; font-size: 12px; color: var(--ds-soluk); opacity: .85;
}
.uz-ornek-indir {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; white-space: nowrap;
  font-size: 14px; font-weight: 600;
  color: #fff !important; text-decoration: none !important;
  background: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: 999px;
}
.uz-ornek-indir:hover { opacity: .92; }
.uz-ornek-yok {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 24px 0; padding: 14px 16px;
  font-size: 13.5px; line-height: 1.6; color: var(--ds-soluk);
  background: var(--ds-zemin-2);
  border: 1px dashed var(--ds-cizgi);
  border-radius: var(--radius-small);
}
.uz-ornek-yok i { margin-top: 2px; }
.uz-ornek-yok a { color: var(--color-primary); }
body.active-dark-mode .uz-ornek-yok a { color: #c9a3bd; }
@media (max-width: 575px) { .uz-ornek-indir { width: 100%; justify-content: center; } }

/* Sorun giderme — henuz cevrilmemis kayit bildirimi.
   Kayit arsivde durur; yabanci kaynak metni yayimlanmaz. */
.sr-hazirlaniyor {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 22px 24px;
  background: var(--ds-zemin-2);
  border: 1px solid var(--ds-cizgi);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-small);
}
body.active-dark-mode .sr-hazirlaniyor { border-left-color: #c9a3bd; }
.sr-hazirlaniyor i { font-size: 22px; color: var(--color-primary); margin-top: 2px; }
body.active-dark-mode .sr-hazirlaniyor i { color: #c9a3bd; }
.sr-hazirlaniyor > div { display: flex; flex-direction: column; gap: 6px; }
.sr-hazirlaniyor b { font-size: 16px; color: var(--ds-metin); }
.sr-hazirlaniyor span { font-size: 14.5px; line-height: 1.65; color: var(--ds-soluk); }
.sr-hazirlaniyor a { font-size: 14.5px; font-weight: 600; color: var(--color-primary); }
body.active-dark-mode .sr-hazirlaniyor a { color: #c9a3bd; }

/* ==========================================================================
   FOOTER-TOP (2026-09-18)
   Tema, ciZgiyi her kolonun .inner'ina ayri ayri veriyordu; sol/sag kolonun
   yuksekligi farkli olunca iki ayri, kaymis cizgi cikiyordu. Cizgi artik
   TEK ve container genisliginde (col-12 gibi). "Abone Ol" dugmesi de metni
   kadar: tema button'a genislik dayatinca alt satira dusuyordu.
   ========================================================================== */
.axil-footer-style-1 .footer-top .inner { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.axil-footer-style-1 .footer-top > .container {
  padding-bottom: 22px; margin-bottom: 22px;
  border-bottom: 1px solid var(--color-lighter);
}
body.active-dark-mode .axil-footer-style-1 .footer-top > .container { border-bottom-color: #333333; }
.axil-footer-style-1 .footer-top form { gap: 10px; }
.axil-footer-style-1 .footer-top form .axil-search.form-group { flex: 0 1 auto; margin-right: 0 !important; }
.axil-footer-style-1 .footer-top form .axil-button {
  width: auto !important; flex: 0 0 auto; white-space: nowrap;
  padding-left: 26px; padding-right: 26px;
}

/* ==========================================================================
   Tema dugmesi (header) — 2026-10-10 denetimi
   Temanin sag kenardaki dikey AÇIK/KOYU sekmesi 991px altinda icerigin
   ustune biniyordu. Dar ekranda sekme gizlenir; header metabar'daki
   ay/gunes dugmesi ayni #my_switcher baglantisini tetikler (light-dark.asp).
   ========================================================================== */
.ds-tema-li { display: none; }
.ds-tema-dugme .fa-sun { display: none; }
body.active-dark-mode .ds-tema-dugme .fa-moon { display: none; }
body.active-dark-mode .ds-tema-dugme .fa-sun { display: inline-block; }
@media only screen and (max-width: 991px) {
  .my_switcher { display: none; }
  .ds-tema-li { display: block; }
}

/* 404: yardimci yollar satiri */
.ds-404-yollar { font-size: 15px; margin: 6px 0 22px; }
.ds-404-yollar a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }
body.active-dark-mode .ds-404-yollar a { color: #c9a3bd; }

/* --- S.S.S kategori sekmeleri (2026-10-10): rozet satiri sekme gibi calisir --- */
.ss-kat-serit.ss-sekmeli .ss-kat-rozet.aktif {
  color: #fff !important; background: var(--color-primary); border-color: var(--color-primary);
}
.ss-kat-serit.ss-sekmeli .ss-kat-rozet.aktif span { background: rgba(255,255,255,.22); color: #fff; }
body.active-dark-mode .ss-kat-serit.ss-sekmeli .ss-kat-rozet.aktif { background: #7a5a70; border-color: #7a5a70; }
.ss-bolum[hidden] { display: none; }
.ss-kalici { margin: 14px 0 0; font-size: 13.5px; }
.ss-kalici a { color: var(--ds-soluk) !important; text-decoration: none; }
.ss-kalici a:hover { color: var(--color-primary) !important; text-decoration: underline; }
.ss-kalici i { font-size: 11px; margin-left: 2px; }

/* ==========================================================================
   Footer Alt Ek Rozetler ve Ayırıcı Çizgi (Faz A - Profesyonel Çip Tasarımı)
   ========================================================================== */
.footer-extra-divider {
  height: 1px;
  width: 100%;
  margin: 26px 0 20px 0;
  background: linear-gradient(90deg, var(--color-border, #e5e7eb) 0%, rgba(229, 231, 235, 0.4) 65%, transparent 100%);
  border: 0;
}
body.active-dark-mode .footer-extra-divider,
html[data-tema="koyu"] .footer-extra-divider {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 65%, transparent 100%);
}

.footer-extra-bar {
  padding-bottom: 6px;
}

.footer-chips-group {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.footer-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 13px;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--ds-soluk, #64748b);
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.footer-chip:hover {
  color: var(--ds-metin, #1e293b);
  background: var(--ds-zemin, #ffffff);
  border-color: rgba(80, 59, 75, 0.22);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transform: translateY(-1px);
}

.footer-chip strong {
  color: var(--ds-metin, #0f172a);
  font-weight: 600;
}

.footer-chip-dim {
  opacity: 0.75;
}

.footer-chip-ico {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 10.5px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.footer-chip:hover .footer-chip-ico {
  transform: scale(1.12);
}

.ico-heart {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

.ico-brain {
  color: #a855f7;
  background: rgba(168, 85, 247, 0.1);
}

.ico-code {
  color: #0284c7;
  background: rgba(2, 132, 199, 0.1);
}

.footer-chip-smile {
  display: inline-block;
  font-weight: 700;
  font-size: 11px;
  padding: 1px 6px;
  margin-left: 2px;
  border-radius: 4px;
  background: rgba(168, 85, 247, 0.12);
  color: #9333ea;
  line-height: 1.3;
}

.footer-chip-dot {
  font-size: 4px;
  color: var(--color-midgray, #9ca3af);
  opacity: 0.45;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

/* Koyu mod renk ayarlari */
body.active-dark-mode .footer-chip,
html[data-tema="koyu"] .footer-chip {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  box-shadow: none;
}

body.active-dark-mode .footer-chip:hover,
html[data-tema="koyu"] .footer-chip:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(201, 163, 189, 0.35);
  color: #f1f5f9;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

body.active-dark-mode .footer-chip strong,
html[data-tema="koyu"] .footer-chip strong {
  color: #f8fafc;
}

body.active-dark-mode .ico-heart {
  color: #f87171;
  background: rgba(248, 113, 113, 0.16);
}

body.active-dark-mode .ico-brain {
  color: #c084fc;
  background: rgba(192, 132, 252, 0.16);
}

body.active-dark-mode .ico-code {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.16);
}

body.active-dark-mode .footer-chip-smile {
  background: rgba(192, 132, 252, 0.18);
  color: #d8b4fe;
}

body.active-dark-mode .footer-chip-dot,
html[data-tema="koyu"] .footer-chip-dot {
  color: #64748b;
  opacity: 0.5;
}

@media (max-width: 767px) {
  .footer-chip-dot {
    display: none;
  }
  .footer-chips-group {
    gap: 8px;
  }
  .footer-chip {
    padding: 5px 11px;
    font-size: 12px;
  }
}