/* =========================================================
   ZENKA DİJİTAL — BİLEŞENLER
   ---------------------------------------------------------
   Sitenin her sayfasında tekrar kullanılan parçalar:
   1) Düğmeler
   2) Üst menü (header) + tema düğmesi
   3) Telefon menüsü (hamburger)
   4) Alt bilgi (footer)

   İsimlendirme düzeni (BEM benzeri):
   .parca            → bileşenin kendisi       (ör. .site-ust)
   .parca__oge       → bileşenin içindeki öğe  (ör. .site-ust__ic)
   .parca--cesit     → bileşenin bir çeşidi    (ör. .dugme--birincil)
   ========================================================= */


/* ---------- 1) DÜĞMELER ---------- */

.dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bosluk-2);
  min-height: 44px;                 /* Parmakla rahat dokunulabilir en küçük boyut */
  padding: var(--bosluk-3) var(--bosluk-5);
  border: 1px solid transparent;
  border-radius: var(--kose-kucuk);
  font-family: var(--font-metin);
  font-size: var(--boyut-sm);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color var(--gecis-hizli), border-color var(--gecis-hizli),
              color var(--gecis-hizli), transform var(--gecis-hizli);
}

.dugme:active {
  transform: translateY(1px);       /* Basılınca hafifçe çöker */
}

/* Birincil: en önemli eylem (mor) */
.dugme--birincil {
  background-color: var(--renk-vurgu);
  color: var(--renk-vurgu-uzerinde);
}

.dugme--birincil:hover {
  background-color: var(--renk-vurgu-koyu);
  color: var(--renk-vurgu-uzerinde);
}

/* İkincil: daha az önemli eylem (çerçeveli) */
.dugme--ikincil {
  background-color: var(--renk-yuzey);
  border-color: var(--renk-kenarlik);
  color: var(--renk-metin);
}

.dugme--ikincil:hover {
  border-color: var(--renk-vurgu);
  color: var(--renk-vurgu);
}

/* Sadece simgeden oluşan kare düğme (tema, hamburger) */
.ikon-dugme {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--renk-kenarlik);
  border-radius: var(--kose-kucuk);
  background-color: var(--renk-yuzey);
  color: var(--renk-metin);
  transition: border-color var(--gecis-hizli), color var(--gecis-hizli),
              background-color var(--gecis-hizli);
}

.ikon-dugme:hover {
  border-color: var(--renk-vurgu);
  color: var(--renk-vurgu);
}

.ikon-dugme svg {
  width: 20px;
  height: 20px;
}


/* ---------- 2) ÜST MENÜ (HEADER) ---------- */

.site-ust {
  position: sticky;                 /* Sayfa kaydırılınca üstte yapışık kalır */
  top: 0;
  z-index: var(--katman-menu);
  border-bottom: 1px solid var(--renk-kenarlik);
}

/* Yarı saydam, buzlu cam görünümlü arka plan.
   Neden ayrı bir katmanda (::before)? Bulanıklaştırma efekti doğrudan
   header'a verilirse, içindeki telefon menüsü tam ekran açılamaz.
   Bu yüzden efekti header'ın arkasındaki görünmez bir katmana koyuyoruz. */
.site-ust::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: color-mix(in srgb, var(--renk-arkaplan) 85%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.site-ust__ic {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bosluk-4);
  height: var(--menu-yukseklik);
}

/* Logo: simge + yazı */
.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--bosluk-3);
  font-family: var(--font-baslik);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--renk-metin);
  text-decoration: none;
  white-space: nowrap;
}

.logo:hover {
  color: var(--renk-metin);
}

/* İki satırlı logo yazısı, logodaki gibi: üstte kalın "ZENKA",
   altında aralıklı "DİJİTAL". İki satır ortalanır ve aynı genişlikte durur. */
:root { --font-logo: "Montserrat", var(--font-baslik); }

.logo__yazi {
  display: grid;
  justify-items: center;
  gap: 2px;
  line-height: 1;
  font-family: var(--font-logo);
}

.logo__ust {
  font-size: 1.32rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--renk-logo-yazi);
}

.logo__alt {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.42em;
  margin-right: -0.42em;              /* Son harften sonraki boşluğu dengele, ortalı dursun */
  text-transform: uppercase;          /* Türkçe sayfa olduğu için "i" → "İ" doğru çevrilir */
  color: var(--renk-logo-alt-yazi);
}

/* Footer her iki temada da koyu zeminli; açık renkler kullanılır */
.site-alt .logo__ust { color: #F2F6FF; }
.site-alt .logo__alt { color: #5CC4F0; }

.logo img {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

/* Menü bağlantıları */
.ana-menu__liste {
  display: flex;
  gap: var(--bosluk-1);
  padding: 0;
  list-style: none;
}

.ana-menu__baglanti {
  display: block;
  padding: var(--bosluk-2) var(--bosluk-3);
  border-radius: var(--kose-kucuk);
  font-weight: 500;
  font-size: var(--boyut-sm);
  color: var(--renk-metin-soluk);
  text-decoration: none;
  transition: color var(--gecis-hizli), background-color var(--gecis-hizli);
}

.ana-menu__baglanti:hover {
  color: var(--renk-metin);
  background-color: var(--renk-yuzey-2);
}

/* Şu an açık olan sayfa: aria-current="page" ile işaretlenir.
   Bu hem görünümü değiştirir hem de ekran okuyuculara
   "buradasınız" bilgisini verir. */
.ana-menu__baglanti[aria-current="page"] {
  color: var(--renk-vurgu);
  background-color: var(--renk-vurgu-yumusak);
}

/* Sağdaki düğmeler (tema + hamburger) */
.ust-araclar {
  display: flex;
  align-items: center;
  gap: var(--bosluk-2);
}

/* Tema düğmesi: açık temada AY simgesi (koyuya geç),
   koyu temada GÜNEŞ simgesi (açığa geç) görünür. */
.tema-dugmesi .ikon-gunes { display: none; }
[data-theme="dark"] .tema-dugmesi .ikon-gunes { display: block; }
[data-theme="dark"] .tema-dugmesi .ikon-ay { display: none; }

/* JavaScript kapalıysa tema ve hamburger düğmeleri çalışamaz,
   o yüzden hiç göstermeyiz. (.js sınıfını <head> içindeki küçük
   betik ekler.) */
html:not(.js) .tema-dugmesi,
html:not(.js) .menu-dugmesi {
  display: none;
}


/* ---------- 3) TELEFON VE TABLET MENÜSÜ (1023px ve altı) ---------- */

/* Hamburger simgesi: üç çizgi. Menü açılınca X'e dönüşür. */
.menu-dugmesi__cizgiler {
  position: relative;
  width: 20px;
  height: 14px;
}

.menu-dugmesi__cizgiler span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background-color: currentColor;
  transition: transform var(--gecis-normal), opacity var(--gecis-hizli), top var(--gecis-normal);
}

.menu-dugmesi__cizgiler span:nth-child(1) { top: 0; }
.menu-dugmesi__cizgiler span:nth-child(2) { top: 6px; }
.menu-dugmesi__cizgiler span:nth-child(3) { top: 12px; }

/* aria-expanded="true" = menü açık → çizgiler X şeklini alır */
.menu-dugmesi[aria-expanded="true"] .menu-dugmesi__cizgiler span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.menu-dugmesi[aria-expanded="true"] .menu-dugmesi__cizgiler span:nth-child(2) { opacity: 0; }
.menu-dugmesi[aria-expanded="true"] .menu-dugmesi__cizgiler span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

@media (max-width: 1023px) {

  /* JavaScript çalışıyorsa: menü gizli durur, hamburgerle açılır */
  .js .ana-menu {
    position: fixed;
    inset: var(--menu-yukseklik) 0 0 0;   /* Header'ın hemen altından ekranın sonuna kadar */
    z-index: var(--katman-mobil-menu);
    overflow-y: auto;
    padding: var(--bosluk-5) var(--kenar-boslugu);
    background-color: var(--renk-arkaplan);
    /* Gizli hâl */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--gecis-normal), transform var(--gecis-normal),
                visibility var(--gecis-normal);
  }

  /* Açık hâl (menu.js bu sınıfı ekler) */
  .js .ana-menu.acik {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    /* Açılırken görünürlük BEKLEMEDEN değişsin; yoksa menü bir an
       "gizli" sayılır ve klavye odağı ilk bağlantıya taşınamaz. */
    transition: opacity var(--gecis-normal), transform var(--gecis-normal),
                visibility 0s;
  }

  .js .ana-menu__liste {
    flex-direction: column;
    gap: var(--bosluk-2);
  }

  .js .ana-menu__baglanti {
    padding: var(--bosluk-4);
    font-family: var(--font-baslik);
    font-size: var(--boyut-lg);
    font-weight: 600;
    color: var(--renk-metin);
  }

  /* Menü açıkken arkadaki sayfa kaymasın */
  body.menu-acik {
    overflow: hidden;
  }

  /* JavaScript kapalıysa: menü logonun altında satır olarak görünür,
     böylece site yine de gezilebilir. */
  html:not(.js) .site-ust__ic {
    flex-wrap: wrap;
    height: auto;
    padding-block: var(--bosluk-3);
  }

  html:not(.js) .ana-menu {
    width: 100%;
    overflow-x: auto;
  }

  html:not(.js) .ana-menu__baglanti {
    white-space: nowrap;           /* "Ana Sayfa" iki satıra bölünmesin */
  }
}

/* Bilgisayar ekranı: hamburger gizlenir, menü yatay görünür */
@media (min-width: 1024px) {
  .menu-dugmesi {
    display: none;
  }
}


/* ---------- 4) ALT BİLGİ (FOOTER) ---------- */

.site-alt {
  padding-block: var(--bosluk-8) var(--bosluk-5);
  background-color: var(--renk-alt-zemin);
  color: var(--renk-alt-metin);
  font-size: var(--boyut-sm);
}

.site-alt__izgara {
  display: grid;
  gap: var(--bosluk-6);
}

/* Tablette 2 sütun, bilgisayarda 3 sütun (marka sütunu daha geniş) */
@media (min-width: 768px) {
  .site-alt__izgara { grid-template-columns: 1fr 1fr; }
  .site-alt__marka { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
  .site-alt__izgara { grid-template-columns: 2fr 1fr 1fr; }
  .site-alt__marka { grid-column: auto; }
}

.site-alt .logo {
  color: var(--renk-alt-baslik);
}

.site-alt__slogan {
  margin-top: var(--bosluk-4);
  max-width: 36ch;                  /* Satır çok uzamasın (yaklaşık 36 harf) */
}

.site-alt__baslik {
  margin-bottom: var(--bosluk-4);
  font-size: var(--boyut-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--renk-alt-baslik);
}

.site-alt__liste {
  display: grid;
  gap: var(--bosluk-2);
  padding: 0;
  list-style: none;
}

.site-alt a {
  color: var(--renk-alt-metin);
  text-decoration: none;
}

.site-alt a:hover {
  color: var(--renk-alt-baslik);
  text-decoration: underline;
}

.site-alt__alt-satir {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bosluk-3);
  margin-top: var(--bosluk-7);
  padding-top: var(--bosluk-5);
  border-top: 1px solid var(--renk-alt-kenarlik);
}


/* ---------- 5) KATEGORİ RENKLERİ ----------
   Bu sınıflar bir öğeye kendi kategorisinin renklerini verir.
   İçindeki .etiket, .kategori-karti gibi parçalar
   --k-metin ve --k-zemin değişkenlerini kullanır. */

.renk-web     { --k-metin: var(--kat-web-metin);     --k-zemin: var(--kat-web-zemin); }
.renk-yz      { --k-metin: var(--kat-yz-metin);      --k-zemin: var(--kat-yz-zemin); }
.renk-yazilim { --k-metin: var(--kat-yazilim-metin); --k-zemin: var(--kat-yazilim-zemin); }
.renk-ipucu   { --k-metin: var(--kat-ipucu-metin);   --k-zemin: var(--kat-ipucu-zemin); }


/* ---------- 6) ETİKET (kategori hapı) ---------- */

.etiket {
  display: inline-block;
  align-self: flex-start;           /* Kartın içinde tüm genişliğe yayılmasın */
  padding: var(--bosluk-1) var(--bosluk-3);
  border-radius: var(--kose-tam);
  background-color: var(--k-zemin, var(--renk-vurgu-yumusak));
  color: var(--k-metin, var(--renk-vurgu));
  font-size: var(--boyut-xs);
  font-weight: 600;
  line-height: 1.5;
}


/* ---------- 7) BÖLÜM BAŞLIĞI ----------
   Başlık + kısa açıklama + sağda "Tümünü gör" bağlantısı */

.bolum-baslik {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--bosluk-4);
  margin-bottom: var(--bosluk-6);
}

/* Başlığın altında kısa altın çizgi: logodaki altın çubuğun bir yankısı */
.bolum-baslik h2::after {
  content: "";
  display: block;
  width: 40px;
  height: 4px;
  margin-top: var(--bosluk-3);
  border-radius: 2px;
  background-color: var(--renk-altin);
}

.bolum-baslik__aciklama {
  margin-top: var(--bosluk-2);
  max-width: 55ch;
  color: var(--renk-metin-soluk);
}

.ok-baglanti {
  display: inline-flex;
  align-items: center;
  gap: var(--bosluk-2);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.ok-baglanti span {
  transition: transform var(--gecis-hizli);
}

.ok-baglanti:hover span {
  transform: translateX(4px);       /* Ok işareti sağa kayar */
}


/* ---------- 8) YAZI KARTI ---------- */

/* Kartları yan yana dizen ızgara:
   Her kart en az 320px; sığdığı kadar sütun oluşur.
   (Telefonda 1, tablette 2, bilgisayarda 3 sütun) */
.kart-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: var(--bosluk-5);
}

.yazi-karti {
  position: relative;               /* Kartı kaplayan bağlantı için gerekli */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--renk-kenarlik);
  border-radius: var(--kose-orta);
  background-color: var(--renk-yuzey);
  box-shadow: var(--golge-kucuk);
  transition: transform var(--gecis-normal), box-shadow var(--gecis-normal);
}

.yazi-karti:hover {
  transform: translateY(-4px);
  box-shadow: var(--golge-buyuk);
}

/* Klavyeyle karta gelindiğinde çerçeve kartın tamamına çizilir */
.yazi-karti:has(a:focus-visible) {
  outline: 3px solid var(--renk-vurgu);
  outline-offset: 3px;
}

.yazi-karti__gorsel {
  aspect-ratio: 16 / 9;             /* Görsel alanı her zaman aynı oranda */
  overflow: hidden;
  background-color: var(--renk-yuzey-2);
}

.yazi-karti__gorsel img {
  width: 100%;
  height: 100%;
  object-fit: cover;                /* Görsel alanı doldurur, oranı bozulmaz */
  transition: transform 400ms ease;
}

.yazi-karti:hover .yazi-karti__gorsel img {
  transform: scale(1.05);
}

.yazi-karti__govde {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--bosluk-3);
  padding: var(--bosluk-5);
}

.yazi-karti__baslik {
  font-size: var(--boyut-lg);
  line-height: 1.3;
}

.yazi-karti__baslik a {
  color: var(--renk-metin);
  text-decoration: none;
}

/* Başlıktaki bağlantıyı görünmez şekilde kartın tamamına yayar */
.yazi-karti__baslik a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.yazi-karti__baslik a:focus-visible {
  outline: none;                    /* Çerçeveyi kartın kendisi çiziyor */
}

.yazi-karti:hover .yazi-karti__baslik a {
  color: var(--renk-vurgu);
}

.yazi-karti__ozet {
  font-size: var(--boyut-sm);
  line-height: 1.6;
  color: var(--renk-metin-soluk);
  /* En fazla 3 satır göster, fazlası "..." ile kesilsin */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.yazi-karti__bilgi {
  margin-top: auto;                 /* Hep kartın en altına yaslanır */
  padding-top: var(--bosluk-2);
  font-size: var(--boyut-xs);
  color: var(--renk-metin-soluk);
}

/* Büyük kart (öne çıkan yazı): bilgisayar ekranında görsel solda, yazı sağda.
   (Tablette yan yana çok sıkışıyor, o yüzden normal kart gibi alt alta kalır.) */
@media (min-width: 1024px) {
  .yazi-karti--buyuk {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
  }

  .yazi-karti--buyuk .yazi-karti__gorsel {
    aspect-ratio: auto;
    height: 100%;
    min-height: 320px;
  }

  .yazi-karti--buyuk .yazi-karti__govde {
    justify-content: center;
    gap: var(--bosluk-4);
    padding: var(--bosluk-7);
  }

  .yazi-karti--buyuk .yazi-karti__baslik {
    font-size: var(--boyut-2xl);
    line-height: 1.2;
  }

  .yazi-karti--buyuk .yazi-karti__ozet {
    font-size: var(--boyut-md);
    -webkit-line-clamp: 4;
    line-clamp: 4;
  }

  .yazi-karti--buyuk .yazi-karti__bilgi {
    margin-top: var(--bosluk-2);
    font-size: var(--boyut-sm);
  }
}


/* ---------- 9) FORM ÖĞELERİ ---------- */

.girdi {
  width: 100%;
  min-height: 48px;
  padding: var(--bosluk-3) var(--bosluk-4);
  border: 1px solid var(--renk-kenarlik);
  border-radius: var(--kose-kucuk);
  background-color: var(--renk-yuzey);
  color: var(--renk-metin);
  transition: border-color var(--gecis-hizli), box-shadow var(--gecis-hizli);
}

.girdi::placeholder {
  color: var(--renk-metin-soluk);
  opacity: 1;
}

.girdi:focus {
  outline: none;
  border-color: var(--renk-vurgu);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--renk-vurgu) 35%, transparent);
}

/* Hatalı alan: kırmızı çerçeve */
.girdi[aria-invalid="true"] {
  border-color: var(--renk-hata);
}

/* Formun altındaki uyarı/bilgi mesajı */
.form-mesaji {
  min-height: 1.5em;                /* Mesaj gelince sayfa zıplamasın */
  margin-top: var(--bosluk-3);
  font-size: var(--boyut-sm);
}

.form-mesaji--hata  { color: var(--renk-hata); }
.form-mesaji--bilgi { color: var(--renk-metin); }


/* ---------- 10) SAYFA BAŞLIĞI (iç sayfaların üst alanı) ----------
   Ana sayfa dışındaki sayfalarda: konum şeridi + başlık + açıklama */

.sayfa-ust {
  position: relative;
  overflow: hidden;
  padding-block: var(--bosluk-7) var(--bosluk-6);
  border-bottom: 1px solid var(--renk-kenarlik);
  /* Sağ üstte yumuşak mor bir ışık */
  background:
    radial-gradient(ellipse 60% 120% at 100% 0%, var(--renk-vurgu-yumusak), transparent 70%),
    var(--renk-arkaplan);
}

@media (min-width: 1024px) {
  .sayfa-ust {
    padding-block: var(--bosluk-8) var(--bosluk-7);
  }
}

.sayfa-ust h1 {
  margin-top: var(--bosluk-4);
  font-size: var(--boyut-3xl);
}

.sayfa-ust__aciklama {
  margin-top: var(--bosluk-3);
  max-width: 60ch;
  font-size: var(--boyut-lg);
  color: var(--renk-metin-soluk);
}

/* Konum şeridi (breadcrumb): Ana Sayfa / Blog */
.konum ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bosluk-2);
  padding: 0;
  list-style: none;
  font-size: var(--boyut-sm);
  color: var(--renk-metin-soluk);
}

.konum li + li::before {
  content: "/";
  margin-right: var(--bosluk-2);
  opacity: 0.6;
}

.konum a {
  color: var(--renk-metin-soluk);
  text-decoration: none;
}

.konum a:hover {
  color: var(--renk-vurgu);
  text-decoration: underline;
}

.konum [aria-current="page"] {
  color: var(--renk-metin);
  font-weight: 500;
}


/* ---------- 11) FORM DÜZENİ (iletişim formu) ---------- */

.form {
  display: grid;
  gap: var(--bosluk-5);
}

.form-alani {
  display: grid;
  gap: var(--bosluk-2);
}

.form-alani label {
  font-weight: 600;
  font-size: var(--boyut-sm);
}

.form-alani__ust {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--bosluk-3);
}

.zorunlu {
  color: var(--renk-hata);
}

/* Açılır liste (select): kendi ok işaretimiz */
select.girdi {
  appearance: none;
  padding-right: 2.75rem;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

textarea.girdi {
  min-height: 9rem;
  resize: vertical;                 /* Sadece yukarı-aşağı büyütülebilsin */
  line-height: 1.6;
}

/* Alanın altındaki kırmızı hata metni (boşken yer kaplamaz) */
.alan-hata {
  font-size: var(--boyut-sm);
  font-weight: 500;
  color: var(--renk-hata);
}

.alan-hata:empty {
  display: none;
}

.alan-ipucu,
.form-zorunlu-bilgi,
.form-not {
  font-size: var(--boyut-xs);
  color: var(--renk-metin-soluk);
}

.karakter-sayac {
  font-size: var(--boyut-xs);
  color: var(--renk-metin-soluk);
  font-variant-numeric: tabular-nums;   /* Rakamlar zıplamasın */
}

.karakter-sayac--uyari {
  color: var(--renk-hata);
  font-weight: 600;
}

.form__gonder {
  justify-self: start;
  min-width: 160px;
}

/* Gönderim sonrası mesaj kutusu (boşken görünmez) */
.form-sonuc:empty {
  display: none;
}

.form-sonuc {
  padding: var(--bosluk-4) var(--bosluk-5);
  border: 1px solid;
  border-left-width: 4px;
  border-radius: var(--kose-kucuk);
  font-size: var(--boyut-sm);
}

.form-sonuc--hata {
  border-color: var(--renk-hata);
  color: var(--renk-hata);
  background-color: color-mix(in srgb, var(--renk-hata) 8%, transparent);
}

.form-sonuc--bilgi {
  border-color: var(--renk-vurgu);
  color: var(--renk-metin);
  background-color: var(--renk-vurgu-yumusak);
}


/* ---------- 12) OKUMA LİSTESİ (kaydet düğmeleri, sayaç, bildirim) ---------- */

/* Menüdeki okuma listesi simgesi ve üzerindeki sayaç */
.okuma-listesi-baglanti {
  position: relative;
}

.okuma-listesi-baglanti[aria-current="page"] {
  border-color: var(--renk-vurgu);
  background-color: var(--renk-vurgu-yumusak);
  color: var(--renk-vurgu);
}

.okuma-sayac {
  position: absolute;
  top: -7px;
  right: -7px;
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border: 2px solid var(--renk-arkaplan);
  border-radius: var(--kose-tam);
  background-color: var(--renk-vurgu);
  color: var(--renk-vurgu-uzerinde);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
}

/* Kayıtlıyken yer imi simgesinin içi dolu görünsün */
.kaydet-dugmesi[aria-pressed="true"] svg {
  fill: currentColor;
}

/* Kartın sağ üst köşesindeki yuvarlak kaydet düğmesi */
.kaydet-dugmesi--kart {
  position: absolute;
  top: var(--bosluk-3);
  right: var(--bosluk-3);
  z-index: 2;                       /* Kartı kaplayan bağlantının üstünde dursun */
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.92);
  color: #0F1B3D;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: transform var(--gecis-hizli), background-color var(--gecis-hizli),
              color var(--gecis-hizli);
}

.kaydet-dugmesi--kart:hover {
  transform: scale(1.08);
}

.kaydet-dugmesi--kart svg {
  width: 20px;
  height: 20px;
}

.kaydet-dugmesi--kart[aria-pressed="true"] {
  background-color: var(--renk-vurgu);
  color: var(--renk-vurgu-uzerinde);
}

/* Yazı sayfasındaki yazılı kaydet düğmesi */
.kaydet-dugmesi--metin {
  margin-top: var(--bosluk-5);
}

.kaydet-dugmesi--metin svg {
  width: 18px;
  height: 18px;
}

.kaydet-dugmesi--metin[aria-pressed="true"] {
  border-color: var(--renk-vurgu);
  background-color: var(--renk-vurgu-yumusak);
  color: var(--renk-vurgu);
}

/* Kısa bildirim: ekranın altında belirip kaybolur */
.bildirim {
  position: fixed;
  bottom: var(--bosluk-5);
  left: 50%;
  z-index: 300;
  max-width: calc(100% - 2rem);
  padding: var(--bosluk-3) var(--bosluk-5);
  border-radius: var(--kose-tam);
  background-color: var(--renk-metin);      /* Temanın tersi renkler: her iki temada belirgin */
  color: var(--renk-arkaplan);
  box-shadow: var(--golge-buyuk);
  font-size: var(--boyut-sm);
  font-weight: 600;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, 150%);
  transition: opacity var(--gecis-normal), transform var(--gecis-normal);
  pointer-events: none;
}

.bildirim--gorunur {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Tehlikeli işlem onayı (ör. "Emin misin? Silmek için tekrar bas") */
.dugme--tehlike,
.dugme--tehlike:hover {
  border-color: var(--renk-hata);
  background-color: var(--renk-hata);
  color: #FFFFFF;
}

/* Çok dar ekranlarda (360px altı) menüye yer açmak için logo yazısını
   gizle; ekran okuyucular için yazı yine de okunur. */
@media (max-width: 359px) {
  .site-ust .logo span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
}

/* ---------- Üst menüdeki "Bültene Katıl" düğmesi ----------
   Telefonda yer kalmadığı için gizli; bilgisayarda tema düğmesinin
   yanında görünür ve sağ tarafı dengeler. */
.ust-cta {
  display: none;
}

@media (min-width: 1024px) {
  .ust-cta {
    display: inline-flex;
    margin-left: var(--bosluk-1);
    white-space: nowrap;
  }
}

/* Bülten başlığına atlanınca yapışkan menünün altında kalmasın */
#bulten-baslik {
  scroll-margin-top: 120px;
}