/* Stüdyo Market - genel site
   Renkler Electron uygulamasıyla birebir aynı (src/index.css @theme),
   böylece siteden uygulamaya geçen kullanıcı aynı yerde olduğunu hissediyor.

   Açık tema: programların kendisi (Vesikalık, Kasa, Albüm, Paylaş) krem
   arayüzler; koyu olan yalnızca site ve Market'ti, aileye yabancı duruyordu.

   TEK vurgu rengi var: kiremit (#BC5D3D, ürün ikonlarından örneklendi).
   Eskiden aynı sayfada kiremit + yeşil + sarı + somon birlikte duruyordu;
   "ücretsiz", "lisans", "yakında" gibi her durum ayrı bir renkti ve sayfa
   karışık görünüyordu. Artık: eylem ve vurgu kiremit, durumlar nötr,
   yalnızca hata kırmızı.

   Nötr ölçek Tailwind düzeninde: 50 en açık, 950 en koyu. */

:root {
  --ink-50: #faf8f6;
  --ink-100: #f3efeb;
  --ink-200: #e6e0d9;
  --ink-300: #d3cabf;
  --ink-400: #b0a69c;
  --ink-500: #7c736b;
  --ink-600: #5b534c;
  --ink-700: #423b35;
  --ink-800: #2b2521;
  --ink-900: #1c1917;
  --ink-950: #12100e;

  --brand-50: #fbf2ee;
  --brand-100: #f4ded4;
  --brand-200: #e7bfae;
  --brand-500: #bc5d3d;
  --brand-600: #a54e31;
  /* Açık zeminde YAZI olarak kullanılan ton: brand-500 metin olarak
     4.1:1'de kalıyor, brand-700 ile 7:1'e çıkıyor. */
  --brand-700: #8a3f28;

  --danger-50: #fcecea;
  --danger-200: #f0c3bd;
  --danger-600: #b4362c;

  /* Kartlara derinlik renkle değil gölgeyle veriliyor. */
  /* Kart yüzeyi: sayfa zemininden bir ton açık ki kart öne çıksın. */
  --beyaz: #ffffff;

  --golge-1: 0 1px 2px rgba(28, 25, 23, 0.06);
  --golge-2: 0 6px 20px rgba(28, 25, 23, 0.08);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ink-50);
  color: var(--ink-900);
  font: 16px/1.6 "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--brand-700);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
  display: block;
  /* height: auto ŞART. Görsellere width/height nitelikleri eklendi (tarayıcı
     yer ayırabilsin, sayfa zıplamasın). Ama "height=900" niteliği tarayıcıda
     height:900px gibi davranıyor; genişliği CSS'ten gelen görsellerde kutu
     900 piksel yüksekliğinde kalıp object-fit:cover ile görseli kırpıyordu -
     ürün kapağı bir anda yakınlaşmış göründü. Burada auto'ya çekiliyor;
     gerçekten sabit yükseklik isteyen kurallar (.yazi-kapak img gibi) kendi
     height'ını zaten yazıyor ve daha baskın. */
  height: auto;
}

.kap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

/* --- Üst çubuk ------------------------------------------------------------ */
.ust {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(250, 248, 246, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ink-200);
}
.ust .kap {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 64px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 17px;
  color: var(--ink-900);
}
.logo:hover {
  text-decoration: none;
}
.logo img {
  width: 28px;
  height: 28px;
  border-radius: 7px;
}
.ust nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 22px;
}
.ust nav a {
  color: var(--ink-500);
  font-size: 15px;
}
.ust nav a:hover {
  color: var(--ink-900);
  text-decoration: none;
}
/* Menü düğmesi yalnızca telefonda görünüyor; masaüstünde bağlantılar
   zaten tek satıra sığıyor. */
.menu-kutu,
.menu-dugme {
  display: none;
}

/* Menüdeki indirme düğmesi: yukarıdaki ".ust nav a" seçicisi .dugme'den daha
   güçlü olduğu için beyaz yazıyı eziyordu, burada geri alıyoruz. */
.ust nav a.dugme,
.ust nav a.dugme:hover {
  color: #fff;
}

/* --- Düğmeler ------------------------------------------------------------- */
.dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: 11px;
  background: var(--brand-500);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}
.dugme:hover {
  background: var(--brand-600);
  text-decoration: none;
  color: #fff;
}
.dugme svg {
  width: 18px;
  height: 18px;
}
.dugme-sade {
  background: var(--ink-100);
  color: var(--ink-900);
  border: 1px solid var(--ink-200);
}
.dugme-sade:hover {
  background: var(--ink-200);
  color: var(--ink-900);
}
.dugme-kucuk {
  padding: 9px 16px;
  font-size: 14px;
  border-radius: 9px;
}

/* --- Duyuru şeridi -------------------------------------------------------- */
.serit {
  background: var(--brand-50);
  border-bottom: 1px solid var(--brand-100);
  font-size: 14.5px;
}
.serit .kap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: baseline;
  padding-top: 11px;
  padding-bottom: 11px;
}
.serit strong {
  color: var(--ink-900);
}
.serit span {
  color: var(--ink-500);
}

/* --- Giriş bölümü --------------------------------------------------------- */
.giris {
  padding: 76px 0 56px;
  position: relative;
  overflow: hidden;
}
.giris-kap {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 56px;
  align-items: center;
}
/* Slayt şeridi max-content genişliğiyle sütunu şişirmesin. */
.giris-metin,
.giris-gorsel {
  min-width: 0;
}
.giris-metin h1 {
  max-width: 14ch;
}

/* Uygulama görüntüsünü çerçeveleyen sahte pencere: ekran görüntüsünün
   gerçek bir program olduğunu tek bakışta anlatıyor. */
.pencere {
  border: 1px solid var(--ink-200);
  border-radius: 13px;
  overflow: hidden;
  background: var(--beyaz);
  box-shadow:
    0 24px 60px rgba(28, 25, 23, 0.12),
    0 4px 12px rgba(28, 25, 23, 0.06);
}
.pencere-cubuk {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  background: var(--ink-100);
  border-bottom: 1px solid var(--ink-200);
}
.pencere-cubuk span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ink-200);
}
.pencere-cubuk em {
  margin-left: 10px;
  font-style: normal;
  font-size: 12.5px;
  color: var(--ink-500);
}
.pencere img {
  width: 100%;
  height: auto;
}
.giris::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--brand-50), transparent 52%);
  pointer-events: none;
}
.giris .kap {
  position: relative;
}
.giris h1 {
  font-size: clamp(34px, 5.2vw, 58px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0 0 20px;
  max-width: 16ch;
}
.giris p.acik {
  font-size: clamp(17px, 2vw, 20px);
  color: var(--ink-500);
  max-width: 56ch;
  margin: 0 0 34px;
}
.giris-eylem {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.giris-not {
  color: var(--ink-500);
  font-size: 14px;
  margin: 20px 0 0;
}

/* --- Özellik şeridi ------------------------------------------------------- */
.ozellikler {
  border-top: 1px solid var(--ink-200);
  border-bottom: 1px solid var(--ink-200);
  background: var(--beyaz);
}
.ozellikler .kap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 30px;
  padding-top: 38px;
  padding-bottom: 38px;
}
.ozellik {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.ozellik-ikon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--brand-50);
  color: var(--brand-700);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ozellik-ikon svg {
  width: 19px;
  height: 19px;
}
.ozellik h3 {
  margin: 1px 0 5px;
  font-size: 15.5px;
}
.ozellik p {
  margin: 0;
  font-size: 14px;
  color: var(--ink-500);
  line-height: 1.5;
}

/* --- Bölüm başlıkları ----------------------------------------------------- */
.bolum {
  padding: 64px 0;
}
.bolum-bas {
  margin-bottom: 34px;
}
.bolum-bas h2 {
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}
.bolum-bas p {
  color: var(--ink-500);
  margin: 0;
  max-width: 62ch;
}

/* --- Ürün kartları -------------------------------------------------------- */
.izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 22px;
}

.kart {
  background: var(--beyaz);
  border: 1px solid var(--ink-200);
  border-radius: 14px;
  box-shadow: var(--golge-1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    border-color 0.15s,
    transform 0.15s;
}
.kart:hover {
  border-color: var(--ink-300);
  box-shadow: var(--golge-2);
  transform: translateY(-2px);
}
.kart-kapak {
  aspect-ratio: 16 / 9;
  background: var(--ink-100);
  position: relative;
  display: block;
}
/* Deneme rozeti sola alındı: sağ üst köşeyi artık kullanıcı sayısı şeridi
   kaplıyor, ikisi üst üste biniyordu. */
.kapak-rozet {
  position: absolute;
  top: 11px;
  left: 11px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  border: 1px solid var(--ink-200);
  color: var(--brand-700);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 999px;
}
.kart-kapak img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kart-govde {
  padding: 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.kart-bas {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.kart-bas img {
  width: 40px;
  height: 40px;
  border-radius: 9px;
  flex-shrink: 0;
}
.kart-ad {
  font-weight: 600;
  font-size: 16px;
  color: var(--ink-900);
}
.kart-ad:hover {
  text-decoration: none;
}
.kart-ust {
  font-size: 12.5px;
  color: var(--ink-500);
}
.kart-metin {
  color: var(--ink-500);
  font-size: 14.5px;
  margin: 14px 0 0;
  flex: 1;
}
/* Kartın eylem satırı: solda fiyat, sağda düğme. İnce bir çizgiyle
   açıklamadan ayrılıyor ki göz doğrudan buraya gelsin. */
.kart-alt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  padding-top: 15px;
  border-top: 1px solid var(--ink-200);
  font-size: 13px;
  color: var(--ink-500);
}
.kart-dugme {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  padding: 10px 17px;
  border-radius: 10px;
  background: var(--brand-500);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  box-shadow: var(--golge-1);
  transition:
    background 0.15s,
    gap 0.15s;
}
.kart-dugme:hover,
.kart:hover .kart-dugme {
  background: var(--brand-600);
  color: #fff;
  text-decoration: none;
}
.kart-dugme:hover {
  gap: 11px;
}
.kart-dugme svg {
  width: 15px;
  height: 15px;
}

.rozet {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.rozet-ucretsiz {
  background: var(--brand-50);
  color: var(--brand-700);
}
.rozet-lisans {
  background: var(--brand-50);
  color: var(--brand-700);
}
.rozet-yakinda {
  background: var(--ink-100);
  color: var(--ink-500);
  border: 1px solid var(--ink-200);
}
.rozet-deneme {
  background: var(--brand-50);
  color: var(--brand-700);
}
.kart-boyut {
  white-space: nowrap;
  align-self: flex-end;
}

/* Fiyat: peşin tutar büyük, taksit notu altında küçük */
.kart-fiyat strong {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: var(--ink-900);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.kart-fiyat span {
  display: block;
  font-size: 12.5px;
  color: var(--ink-500);
  margin-top: 2px;
}

/* --- Ürün sayfası --------------------------------------------------------- */
/* Kapak görseli ürün adını ve açıklamayı zaten içeriyor; bu yüzden onu
   KIRPMIYORUZ. Tam ekran genişliğinde gösterip yüksekliği sınırlasaydık
   alttaki açıklama satırı kesiliyordu - içerik sütununa alıp 16:9 oranını
   olduğu gibi bırakmak her ikisini de görünür tutuyor. */
.urun-kapak {
  position: relative;
  background: var(--ink-100);
  border: 1px solid var(--ink-200);
  border-radius: 14px;
  overflow: hidden;
  margin-top: 28px;
}
.urun-kapak img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.kunye {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 40px;
  background: var(--beyaz);
  border: 1px solid var(--ink-200);
  border-radius: 12px;
  padding: 18px 22px;
  margin: 26px 0 0;
}
.kunye div span {
  display: block;
  font-size: 12.5px;
  color: var(--ink-500);
}
.kunye div strong {
  font-size: 15px;
  font-weight: 600;
}

.kisim {
  margin-top: 44px;
}
.kisim h2 {
  font-size: 21px;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}
.kisim p {
  color: var(--ink-700);
  margin: 0 0 14px;
  white-space: pre-line;
}
.kisim img {
  border-radius: 12px;
  margin-top: 18px;
}
.kisim-gorselli {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  align-items: center;
}
.kisim-gorselli img {
  margin: 0;
}

.maddeler {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
}
.maddeler li {
  display: flex;
  gap: 10px;
  color: var(--ink-700);
  font-size: 15px;
}
.maddeler li::before {
  content: "\2713";
  color: var(--ink-600);
  font-weight: 700;
  flex-shrink: 0;
}

.galeri {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 10px;
  margin-top: 30px;
}
.galeri figure {
  margin: 0;
  flex-shrink: 0;
}
.galeri img {
  height: 210px;
  width: auto;
  border-radius: 11px;
  border: 1px solid var(--ink-200);
}
.galeri figcaption {
  font-size: 12.5px;
  color: var(--ink-500);
  margin-top: 7px;
}

/* --- Kurulum çağrısı ------------------------------------------------------ */
/* Ortalanmış tek sütun. Önceden metin solda, düğme sağdaydı; düğmenin altındaki
   uyarı satırı düğmeden geniş olduğu için sağ blok kendi içinde kayıyor ve
   ortada büyük bir boşluk kalıyordu - kutu dağınık görünüyordu. */
.cagri {
  background: var(--beyaz);
  border: 1px solid var(--ink-200);
  border-radius: 16px;
  padding: 40px 34px;
  margin-top: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.cagri h2 {
  margin: 0 0 10px;
  font-size: 24px;
  letter-spacing: -0.01em;
}
/* text-wrap:balance satırları eşit uzunlukta böler; desteklemeyen tarayıcıda
   yok sayılır, düzen bozulmaz. Tek kelimelik ikinci satırı önlüyor. */
.cagri p {
  margin: 0;
  color: var(--ink-500);
  max-width: 60ch;
  text-wrap: balance;
}
.cagri .sag {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cagri .kurulum-ipucu {
  margin-top: 12px;
  text-align: center;
}

/* --- Adımlar -------------------------------------------------------------- */
.adimlar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 22px;
}
.adim {
  background: var(--beyaz);
  border: 1px solid var(--ink-200);
  border-radius: 13px;
  padding: 22px;
}
.adim .no {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--brand-50);
  color: var(--brand-700);
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 13px;
}
.adim h3 {
  margin: 0 0 7px;
  font-size: 16px;
}
.adim p {
  margin: 0;
  color: var(--ink-500);
  font-size: 14.5px;
}

/* --- Alt bilgi ------------------------------------------------------------ */
.alt {
  border-top: 1px solid var(--ink-200);
  margin-top: 74px;
  padding: 34px 0 44px;
}
.alt .kap {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
}
.alt p {
  margin: 0;
  color: var(--ink-500);
  font-size: 14px;
}
.alt nav {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}
.alt nav a {
  color: var(--ink-500);
  font-size: 14px;
}
/* Bağlantılar arasına dikey çizgi. Ayıraç işaretleme değil ::after ile
   basılıyor: ekran okuyucular ve kopyala-yapıştır metne "|" karışmasın. */
.alt nav a + a::before {
  content: "|";
  margin-right: 18px;
  color: var(--ink-300);
}

/* --- Geri bağlantısı ------------------------------------------------------ */
.geri {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-500);
  font-size: 15px;
  margin: 26px 0 0;
}
.geri:hover {
  color: var(--ink-900);
  text-decoration: none;
}

@media (max-width: 980px) {
  .giris-kap {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .giris-metin h1 {
    max-width: none;
  }
}

@media (max-width: 720px) {
  .kisim-gorselli,
  .maddeler {
    grid-template-columns: 1fr;
  }
  .cagri .sag {
    margin-left: 0;
  }
  .giris {
    padding: 60px 0 50px;
  }
}

/* --- Windows SmartScreen bilgilendirmesi ----------------------------------
   Kurulum dosyaları imzalı olmadığı için Windows ilk indirmede uyarı
   gösteriyor. Müşteri bunu görüp vazgeçmesin diye önceden anlatıyoruz;
   panik havası vermemek için uyarı kırmızısı değil, nötr bir kutu. */
.uyari-not {
  margin: 36px auto 0;
  max-width: 720px;
  padding: 20px 24px;
  border: 1px solid var(--ink-200);
  border-left: 3px solid var(--brand-500);
  border-radius: 12px;
  background: var(--beyaz);
}
.uyari-not h3 { margin: 0 0 8px; font-size: 16px; }
.uyari-not p { margin: 0 0 10px; color: var(--ink-500); font-size: 14px; line-height: 1.6; }
.uyari-not p:last-child { margin-bottom: 0; }
.uyari-not strong { color: var(--ink-900); }

/* --- İndirme düğmesi altındaki SmartScreen ipucu -------------------------
   Müşteri kırmızı Windows penceresini görüp vazgeçmesin diye, ne yapacağı
   düğmenin hemen altında yazıyor. Uyarı havası vermemesi için küçük ve soluk. */
.kurulum-ipucu {
  flex-basis: 100%;
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-500);
}
.kurulum-ipucu strong { color: var(--ink-700); font-weight: 600; }
.kurulum-ipucu a { color: var(--brand-700); margin-left: 8px; }

/* --- Blog ----------------------------------------------------------------- */
/* Üçlü ızgara. Ürün kartlarıyla (.izgara) aynı desen: sabit 3 sütun yerine
   auto-fill kullanılıyor ki dar ekranda kendiliğinden 2'ye, telefonda 1'e
   düşsün. minmax değeri ürünlerdekinden (320px) küçük: blog kartında kapak
   daha küçük, metin daha kısa. */
.yazilar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 22px;
}
.yazi-kart {
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--ink-200);
  border-radius: 12px;
  background: var(--beyaz);
  box-shadow: var(--golge-1);
  transition: border-color .15s, box-shadow .15s;
}
.yazi-kart:hover { border-color: var(--ink-300); box-shadow: var(--golge-2); }
.yazi-kart-govde { padding: 18px 20px; }
/* h3 de aynı: ürün sayfasındaki "ilgili yazılar" kartları h3 kullanıyor -
   o sayfada zaten h2'ler var, başlık sırası bozulmasın diye. */
.yazi-kart h2,
.yazi-kart h3 { margin: 0 0 8px; font-size: 17px; line-height: 1.35; }

/* Metin sayfalarındaki madde listesi (gizlilik, KVKK, koşullar, mesafeli satış).
   .maddeler ürün sayfası için yazıldı: iki sütunlu ızgara ve li'si flex. Cümle
   uzunluğundaki maddelerde bu kalıp metni dar sütunlara sıkıştırıyor, daha
   kötüsü madde içindeki <strong> ya da <a> AYRI BİR FLEX ÖĞESİ olup cümleyi
   yan yana kutulara bölüyor. Aynı hata önce blog yazılarında yaşandı
   (.yazi .maddeler), sonra bu sayfalarda tekrarlandı. Uzun maddeli her yeni
   liste bu sınıfı kullanmalı. */
.maddeler-metin {
  display: block;
  grid-template-columns: none;
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  color: var(--ink-700);
  line-height: 1.75;
}
.maddeler-metin li {
  display: block;
  position: relative;
  padding-left: 28px;
  margin-bottom: 9px;
  font-size: inherit;
}
.maddeler-metin li::before {
  content: "\2713";
  position: absolute;
  left: 3px;
  top: 0;
  color: var(--brand-500);
  font-weight: 700;
}
.maddeler-metin li strong { color: var(--ink-900); font-weight: 650; }

/* --- Tanıtım videosu ------------------------------------------------------
   Kapak + oynat düğmesi; gerçek oynatıcı ancak tıklanınca yükleniyor
   (bkz. lib/video.php). Kutu 16:9 oranında sabit: oynatıcı sonradan
   geldiğinde sayfa zıplamasın diye yer baştan ayrılıyor. */
.video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: var(--ink-900);
  border: 1px solid var(--ink-200);
  box-shadow: var(--golge-2);
}
.video-kapak {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  cursor: pointer;
}
.video-kapak img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s, filter .25s;
}
.video-kapak:hover img { transform: scale(1.03); filter: brightness(.86); }
.video iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Oynat düğmesi - YouTube'un kendi biçimine yakın ama marka renginde. */
.video-oynat {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.video-oynat svg { width: 86px; height: 60px; filter: drop-shadow(0 4px 14px rgba(0,0,0,.45)); }
/* Düğme KIRMIZI: eskiden koyu şeffaftı ve kapaklarımız da koyu olduğu için
   üstünde kaybolup gidiyordu, kutunun video olduğu anlaşılmıyordu. YouTube
   kırmızısı her kapakta ayrışıyor ve "burada video var"ı tek bakışta söylüyor. */
.video-oynat-zemin { fill: #ff0000; transition: fill .2s, opacity .2s; opacity: .94; }
.video-kapak:hover .video-oynat-zemin { fill: #ff0000; opacity: 1; }

/* JavaScript kapalıyken de doğru olan not; oynatıcı açılınca kaldırılıyor. */
.video-not {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  margin: 0;
  padding: 8px 14px;
  background: linear-gradient(transparent, rgba(28, 25, 23, .75));
  color: rgba(255, 253, 249, .9);
  font-size: 12.5px;
  text-align: center;
  pointer-events: none;
}
.video-acik { border-color: var(--ink-300); }

/* Yazı/ürün sayfasında videonun üstündeki başlıkla arası */
.video-alan { margin: 26px 0 0; }
.video-alan h2 { margin-bottom: 14px; }

/* --- Video şeridi (ana sayfa) --------------------------------------------
   Video bloğu, üstündeki "Nasıl çalışır" adım kartlarıyla aynı açık
   zeminde duruyordu ve ikisi birbirine karışıyordu. Kendi koyu zemininde
   durunca hem bölüm ayrışıyor hem de video kapaklarıyla (hepsi koyu
   lacivert) uyumlu görünüyor. */
.video-serit {
  /* Kendi bölümünün (.bolum-video) içinde tek başına; üst boşluğu
     bölümün dolgusu veriyor. */
  margin: 0;
  padding: 30px 30px 26px;
  border-radius: 20px;
  background:
    radial-gradient(900px 300px at 85% -10%, rgba(188, 93, 61, .22), transparent 70%),
    linear-gradient(165deg, #241d1a, #141110);
  border: 1px solid rgba(255, 253, 249, .08);
  box-shadow: 0 22px 50px rgba(28, 25, 23, .16);
}
.video-serit-bas { margin-bottom: 22px; }
.video-serit-bas h3 {
  margin: 0 0 6px;
  font-size: 20px;
  color: #fffdf9;
  letter-spacing: -.01em;
}
.video-serit-bas p { margin: 0; color: rgba(255, 253, 249, .62); font-size: 14.5px; }

/* Koyu zeminde yan sütunun renkleri çevriliyor. */
.video-serit .video-duzen { margin-top: 0; }
.video-serit .video-yan-bas h2 { color: #fffdf9; }
.video-serit .video-yan-bas a { color: var(--brand-200); }
.video-serit .video-yan-liste a:hover { background: rgba(255, 253, 249, .07); }
.video-serit .video-yan-metin strong { color: rgba(255, 253, 249, .94); }
.video-serit .video-yan-metin time { color: rgba(255, 253, 249, .5); }
.video-serit .video-yan-kanal { color: rgba(255, 253, 249, .58); }
.video-serit .video-yan-aktif > a { background: rgba(255, 253, 249, .09); }
.video-serit .video-yan-bos { color: rgba(255, 253, 249, .6); }
.video-serit .video-yan-kapak { background: rgba(255, 253, 249, .08); }
.video-serit .video-ana-baslik { color: #fffdf9; }
.video-serit .video-ana-alt { color: rgba(255, 253, 249, .55); }
.video-serit .video-ana-kanal { color: rgba(255, 253, 249, .85); }
.video-serit .video { border-color: rgba(255, 253, 249, .12); box-shadow: none; }
.video-serit .video-duzen-alt { color: rgba(255, 253, 249, .6); }
.video-serit .video-duzen-alt a { color: var(--brand-200); }

@media (max-width: 720px) {
  .video-serit { padding: 20px 16px 18px; border-radius: 16px; }
  .video-serit-bas h3 { font-size: 18px; }
}

/* --- Video düzeni: solda oynatılan, sağda kanaldaki diğerleri ------------
   Hem ana sayfada hem /videolar.php'de kullanılıyor. YouTube'un izleme
   sayfasındaki yerleşim: sol sütun esner, sağ sütun sabit genişlikte.
   Dar ekranda alt alta geçiyor. */
.video-duzen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 372px;
  gap: 26px;
  align-items: start;
  margin-top: 30px;
}
/* Kanalda tek video varsa sağ sütun hiç çizilmiyor; sol sütun ortalanıyor. */
.video-duzen-tek { grid-template-columns: minmax(0, 1fr); max-width: 860px; margin-inline: auto; }

/* Oynatıcının altındaki başlık - YouTube'un izleme sayfasındaki gibi. */
.video-ana-baslik { margin: 14px 0 5px; font-size: 19px; line-height: 1.35; font-weight: 700; }
.video-ana-alt { margin: 0; color: var(--ink-500); font-size: 13.5px; }
.video-ana-alt a { color: var(--brand-700); font-weight: 600; }
.video-ana-kanal { font-weight: 650; color: var(--ink-700); }
.video-not-alt { margin: 14px 0 0; color: var(--ink-400); font-size: 12.5px; }
.video-duzen-alt { margin: 18px 0 0; text-align: center; font-size: 14px; }
.video-duzen-alt a { color: var(--brand-700); font-weight: 600; }

/* Sağ sütun */
.video-yan-bas {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.video-yan-bas h2 { margin: 0; font-size: 16px; }
.video-yan-bas a { font-size: 13px; color: var(--brand-700); font-weight: 600; white-space: nowrap; }

.video-yan-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
/* Üç sütun: işaret boşluğu | kapak | yazı.
   İlk sütun HER satırda duruyor, yalnızca oynayanda içi dolu. Yalnız o
   satırda açılsaydı liste gezilirken satırlar sağa sola kayardı. */
.video-yan-liste a {
  display: grid;
  grid-template-columns: 14px 148px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 6px 7px;
  border-radius: 11px;
  text-decoration: none;
  transition: background .15s;
}
.video-yan-liste a:hover { background: var(--brand-50); }

/* Oynayan videonun işareti */
.video-yan-imi {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 34px;
}
.video-yan-imi svg { width: 9px; height: 11px; fill: #ff0000; display: block; }
.video-yan-aktif > a { background: var(--brand-50); }

.video-yan-kapak {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 9px;
  overflow: hidden;
  background: var(--ink-100);
}
.video-yan-kapak img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Süre rozeti - YouTube'daki gibi sağ alt köşede. Süre RSS'te gelmiyor,
   izleme sayfasından okunup önbelleğe yazılıyor (bkz. lib/youtube.php);
   bilinmiyorsa rozet hiç çizilmiyor. */
.video-yan-sure {
  position: absolute;
  right: 4px;
  bottom: 4px;
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(0, 0, 0, .8);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}

.video-yan-metin strong {
  font-size: 13.5px;
  line-height: 1.35;
  font-weight: 620;
  color: var(--ink-900);
  /* YouTube gibi iki satır; uzun başlık üç nokta ile kesiliyor. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.video-yan-kanal { display: block; margin-top: 4px; color: var(--ink-500); font-size: 12px; }
.video-yan-metin time { display: block; margin-top: 1px; color: var(--ink-500); font-size: 12px; }
.video-yan-bos { color: var(--ink-500); font-size: 14px; margin: 0; }

@media (max-width: 1000px) {
  .video-duzen { grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; }
  .video-yan-liste a { grid-template-columns: 12px 124px minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .video-duzen { grid-template-columns: minmax(0, 1fr); }
  .video-yan { margin-top: 10px; }
  .video-yan-liste { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  .video-yan-liste a { grid-template-columns: 12px 148px minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .video-yan-liste a { grid-template-columns: 11px 124px minmax(0, 1fr); gap: 8px; }
}

@media (max-width: 720px) {
  .video-oynat svg { width: 64px; height: 45px; }
  .video-not { font-size: 11.5px; padding: 6px 10px; }
}

/* --- Sayfalama ------------------------------------------------------------ */
.sayfalama {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 38px 0 0;
}
.sayfalama a,
.sayfalama span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--ink-200);
  border-radius: 9px;
  background: var(--beyaz);
  color: var(--ink-700);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .15s, background .15s;
}
.sayfalama a:hover { border-color: var(--brand-200); background: var(--brand-50); color: var(--brand-700); }
.sayfalama .secili {
  background: var(--brand-500);
  border-color: var(--brand-500);
  color: #fff;
}
.sayfalama-bilgi {
  margin: 12px 0 0;
  text-align: center;
  color: var(--ink-500);
  font-size: 13.5px;
}

/* Ürün sayfasındaki ilgili yazılar bölümü */
.ilgili-yazilar { margin-top: 44px; }
.ilgili-yazilar .yazilar { margin-top: 18px; }
.ilgili-tumu { margin: 18px 0 0; }
.ilgili-tumu a { color: var(--brand-700); font-weight: 600; font-size: 14.5px; }

/* Kapak görseli - 16:9, kart genişliğinde */
.yazi-kapak { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink-100); }
.yazi-kapak img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.yazi-kart:hover .yazi-kapak img { transform: scale(1.03); }

.yazi-kapak-buyuk {
  width: 100%; border-radius: 12px; margin: 0 0 28px; display: block;
}
.yazi-kart a { color: inherit; text-decoration: none; }
.yazi-kart p {
  margin: 0; color: var(--ink-500); font-size: 13.5px; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* Kart yüksekliği eşitlensin diye tarih satırı en alta yapışıyor. */
.yazi-kart { display: flex; flex-direction: column; }
.yazi-kart-govde { display: flex; flex-direction: column; flex: 1; }
/* Kartın eylem satırı - ürün kartındaki (.kart-alt) desenin aynısı:
   solda künye, sağda düğme, üstünde ince ayırıcı çizgi. */
.yazi-tarih {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px; margin-top: auto; padding-top: 15px;
  border-top: 1px solid var(--ink-200);
  font-size: 12.5px; color: var(--ink-500);
}
/* Seçici ".yazi-kart a"dan (color: inherit) güçlü olmalı: yoksa düğmenin
   beyaz yazısı soluk gri renge dönüyor ve kiremit zeminde okunmuyor. */
.yazi-kart a.yazi-devam {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  padding: 9px 15px;
  border-radius: 10px;
  background: var(--brand-500);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: var(--golge-1);
  transition:
    background 0.15s,
    gap 0.15s;
}
.yazi-kart a.yazi-devam:hover,
.yazi-kart:hover a.yazi-devam {
  background: var(--brand-600);
  color: #fff;
  text-decoration: none;
}
.yazi-kart a.yazi-devam:hover { gap: 11px; }
.yazi-kart a.yazi-devam svg { width: 14px; height: 14px; }

.yazi h1 { font-size: 30px; line-height: 1.25; margin: 18px 0 10px; }
.yazi-kunye { color: var(--ink-500); font-size: 13px; margin: 0 0 26px; }
/* Okuma tipografisi: gövde 16,5 piksel ve 1,8 satır aralığı. Uzun bir
   makale 15 pikselde yorucu oluyordu; gövde sütunu 710 piksel olduğu için
   satır başına ~80 karakter kalıyor, bu aralık orada rahat okunuyor. */
.yazi-govde { font-size: 16.5px; }
/* Ara başlık metinden açıkça ayrılsın: üstünde geniş boşluk, solunda ince
   marka rengi çizgi. Yazı taranarak okunduğunda göz başlıkları buluyor. */
.yazi h2 {
  font-size: 21px;
  font-weight: 650;
  color: var(--ink-900);
  margin: 38px 0 14px;
  padding-left: 14px;
  border-left: 3px solid var(--brand-500);
  line-height: 1.3;
}
.yazi p { color: var(--ink-700); line-height: 1.8; margin: 0 0 18px; }
/* Giriş paragrafı: yapay zekâ araçları ve okuyucu çoğunlukla bunu alıyor,
   bir punto büyük ve biraz koyu. */
.yazi > p:first-child {
  font-size: 17.5px;
  color: var(--ink-800);
  line-height: 1.7;
  margin-bottom: 22px;
}
/* Madde listesi - YAZI İÇİNDE.
   .maddeler aslında ürün sayfası için yazıldı: kısa özellik satırları, iki
   sütunlu ızgara, her satır flex (işaret + metin). Blog yazısında maddeler
   birer cümle; o kalıp burada iki şeyi birden bozuyordu:
     1) iki sütun -> 710 piksellik gövde 340'a düşüyor, metin sıkışıyor;
     2) li'nin flex olması -> madde içindeki <a> AYRI BİR FLEX ÖĞESİ oluyor,
        cümle yan yana dar kutulara bölünüyor (05.10.2026'da canlıda görüldü).
   Bu yüzden ikisi de burada sıfırlanıyor: tek sütun ve blok li. İşaret
   mutlak konumlu ki satır içi metin normal akışında kalsın. */
.yazi .maddeler {
  display: block;
  grid-template-columns: none;
  color: var(--ink-700);
  line-height: 1.75;
  margin: 0 0 22px;
  padding: 0;
}
.yazi .maddeler li {
  display: block;
  position: relative;
  padding-left: 30px;
  margin-bottom: 10px;
  font-size: inherit;
}
.yazi .maddeler li::before {
  position: absolute;
  left: 4px;
  top: 0;
  color: var(--brand-500);
}
/* Maddenin başındaki kalın ifade bir mini başlık gibi çalışıyor; metinden
   bir ton koyu olunca göz listeyi tarayabiliyor. */
.yazi .maddeler li strong,
.yazi .yazi-adimlar li strong,
.yazi p strong {
  color: var(--ink-900);
  font-weight: 650;
}

/* Numaralı adımlar. Sayı kendi dairesinde duruyor ki sıralı anlatım
   maddelerden ayırt edilsin. Sayaç elle sayılıyor: list-style ile gelen
   numarayı biçimlendirmek mümkün değil. */
.yazi .yazi-adimlar {
  list-style: none;
  counter-reset: adim;
  margin: 0 0 22px;
  padding: 0;
  color: var(--ink-700);
  line-height: 1.8;
}
.yazi .yazi-adimlar li {
  counter-increment: adim;
  position: relative;
  padding-left: 42px;
  margin-bottom: 14px;
  min-height: 28px;
}
.yazi .yazi-adimlar li::before {
  content: counter(adim);
  position: absolute;
  left: 0;
  top: 2px;
  width: 27px;
  height: 27px;
  border-radius: 8px;
  background: var(--brand-50);
  color: var(--brand-700);
  border: 1px solid var(--brand-100);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Kategori süzgeci ------------------------------------------------------ */
/* Market uygulamasındaki şeridin sitedeki karşılığı. Sitede JavaScript yok,
   her düğme ayrı bir adres; kategori sayfası paylaşılabiliyor ve arama
   motoruna ayrı giriş sayfası olarak veriliyor. */
.filtre {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -14px 0 28px;
}
.filtre a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--ink-200);
  background: var(--beyaz);
  color: var(--ink-600);
  box-shadow: var(--golge-1);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition:
    border-color 0.15s,
    background 0.15s,
    color 0.15s;
}
.filtre a:hover {
  border-color: var(--brand-500);
  color: var(--ink-900);
}
/* Seçili görünüm uygulamadaki kategori şeridiyle (StoreHome.tsx) aynı:
   dolu marka rengi yerine koyu marka zemini + marka rengi yazı. */
.filtre a.secili {
  background: var(--brand-50);
  border-color: var(--brand-200);
  color: var(--brand-700);
}
.filtre a span {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-500);
}
.filtre a.secili span {
  color: var(--brand-700);
  opacity: 0.75;
}

/* Yazının kategorisi: kartta başlığın üstünde, yazı sayfasında en üstte. */
.yazi-kategori {
  align-self: flex-start;
  display: inline-block;
  margin-bottom: 9px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand-700);
  text-decoration: none;
}
.yazi-kategori:hover {
  text-decoration: underline;
}
.yazi > .yazi-kategori {
  margin: 18px 0 0;
}
.yazi > .yazi-kategori + h1 {
  margin-top: 6px;
}

/* --- Paylaş satırı -------------------------------------------------------- */
/* WhatsApp ve e-posta düz bağlantı; kopyalama ve telefonun yerleşik paylaşım
   penceresi tarayıcı desteğine bağlı olduğu için gizli geliyor, paylas.js
   destek varsa açıyor. Bu yüzden [hidden] burada kesin olarak gizleniyor:
   aşağıdaki inline-flex kuralı yoksa gizli düğmeler yine görünürdü. */
[hidden] {
  display: none !important;
}

.paylas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 28px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--ink-200);
}
.paylas-etiket {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-right: 4px;
}
.paylas-dugme {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  border-radius: 10px;
  border: 1px solid var(--ink-200);
  background: var(--beyaz);
  color: var(--ink-700);
  box-shadow: var(--golge-1);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition:
    border-color 0.15s,
    color 0.15s;
}
.paylas-dugme:hover {
  border-color: var(--ink-300);
  color: var(--ink-900);
  text-decoration: none;
}
.paylas-dugme svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}
/* Kopyalandı geri bildirimi - iki saniye sonra kendiliğinden geri dönüyor. */
.paylas-dugme.tamam {
  border-color: var(--brand-500);
  color: var(--brand-700);
}

/* --- Telefon uyumu -------------------------------------------------------- */
/* Aşağıdaki kurallar 720px altında devreye giriyor. Dokunmatik hedefler
   en az 44px yükseklikte kalıyor, hiçbir satır yatay kaydırmaya zorlamıyor. */
@media (max-width: 720px) {
  .kap {
    padding: 0 16px;
  }

  /* Üst çubuk telefonda: solda logo, sağda menü düğmesi. Bağlantılar
     alt satıra taşındığında indirme düğmesi üç satıra bölünüyor ve şerit
     dağınık görünüyordu; artık hepsi açılır panelin içinde. */
  .ust .kap {
    height: 60px;
    flex-wrap: nowrap;
    gap: 12px;
  }
  .logo {
    font-size: 18px;
    white-space: nowrap;
  }
  .logo img {
    width: 34px;
    height: 34px;
    border-radius: 9px;
  }

  /* Onay kutusu görünmez ama sayfada duruyor: klavyeyle sekmelenip
     boşlukla açılabilsin. display:none olsaydı erişilemezdi. */
  .menu-kutu {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }
  .menu-dugme {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    margin-left: auto;
    width: 44px;
    height: 44px;
    padding: 0 9px;
    border: 1px solid var(--ink-200);
    border-radius: 11px;
    background: var(--beyaz);
    cursor: pointer;
  }
  .menu-dugme span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: var(--ink-700);
    transition: transform .18s, opacity .18s;
  }
  .menu-kutu:focus-visible + .menu-dugme {
    outline: 2px solid var(--brand-500);
    outline-offset: 2px;
  }
  /* Açıkken üç çizgi çarpıya dönüyor. */
  .menu-kutu:checked + .menu-dugme span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .menu-kutu:checked + .menu-dugme span:nth-child(2) {
    opacity: 0;
  }
  .menu-kutu:checked + .menu-dugme span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* Panel: üst çubuğun altına açılıyor. .ust sticky olduğu için burada
     konumlandırma çerçevesi o. */
  .ust nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 6px 16px 16px;
    background: var(--beyaz);
    border-bottom: 1px solid var(--ink-200);
    box-shadow: var(--golge-2);
  }
  .menu-kutu:checked ~ nav {
    display: flex;
  }
  .ust nav a {
    padding: 14px 2px;
    font-size: 16px;
    color: var(--ink-700);
    border-bottom: 1px solid var(--ink-100);
  }
  .ust nav a.dugme {
    margin-top: 14px;
    justify-content: center;
    padding: 14px;
    font-size: 15px;
    border-bottom: 0;
  }

  /* Çağrı kutusundaki indirme düğmesi dar ekranda sıkışıyordu. */
  .cagri {
    padding: 30px 20px;
  }
  .cagri h2 {
    font-size: 20px;
  }
  .cagri .sag,
  .cagri .sag .dugme {
    width: 100%;
  }
  .cagri .sag .dugme {
    justify-content: center;
  }

  /* Alt bilgi: bağlantılar tek satıra sıkışmak yerine serbest sarsın. */
  .alt .kap {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  /* Sağ alttaki WhatsApp balonu sabit duruyor ve sayfanın en dibinde
     son satırın üstüne biniyordu ("Koşullar" bağlantısı kapanıyordu).
     Alt bilgiye balon yüksekliği kadar pay bırakılıyor. */
  .alt {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }
  .alt nav {
    margin-left: 0;
    flex-wrap: wrap;
    gap: 10px 18px;
  }
  /* Dört bağlantı telefonda tek satıra sığıyor; ayıraç aralığı da
     ona göre kısaltılıyor. */
  .alt nav a + a::before {
    margin-right: 16px;
  }

  .bolum {
    padding: 44px 0;
  }
  .giris-metin h1 {
    font-size: 32px;
  }

  /* Kategori şeridi: telefonda alt alta yığılmak yerine yana kaysın. */
  .filtre {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: none;
  }
  .filtre::-webkit-scrollbar {
    display: none;
  }
  .filtre a {
    flex: 0 0 auto;
  }

  /* Paylaş düğmeleri: dar ekranda ikonlu ama kısa. */
  .paylas {
    gap: 8px;
  }
  .paylas-dugme {
    padding: 11px 14px;
  }

  /* Alt bilgi: telefon numarası satır ortasından bölünüyordu. */
  .alt .kap {
    gap: 14px;
  }
  .alt nav {
    margin-left: 0;
    flex-wrap: wrap;
    gap: 14px 18px;
  }
  .alt nav a {
    white-space: nowrap;
  }

  /* Künye kutusu: telefonda alanlar arasındaki 40px boşluk tek sütuna
     düşmeye zorluyordu; daraltınca ikişerli sıralanıyor. */
  .kunye {
    gap: 14px 26px;
    padding: 16px 18px;
  }
}

@media (max-width: 420px) {
  /* Not: burada eskiden "Nasıl çalışır" menüden gizleniyordu; bağlantılar
     artık açılır panelde alt alta durduğu için gerek kalmadı. */
  .giris-metin h1 {
    font-size: 28px;
  }
}

/* --- Ana sayfa slayt şeridi ------------------------------------------------ */
/* Şerit JavaScript olmadan da çalışsın diye yatay kaydırma + scroll-snap
   üzerine kurulu. slider.js yalnızca ok, nokta ve kendiliğinden ilerlemeyi
   ekliyor; olmadığında slaytlar parmakla sürülerek geziliyor. */
.slayt {
  position: relative;
}
.slayt-serit {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.slayt-serit::-webkit-scrollbar {
  display: none;
}
/* min-width:0 şart: esnek öğenin varsayılan min-width:auto değeri, içindeki
   satır kaymayan açıklama kadar genişlemesine izin veriyor ve slayt pencere
   çerçevesinden taşıyordu. */
.slayt-oge {
  position: relative;
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
  display: block;
  color: inherit;
  text-decoration: none;
}
.slayt-oge img {
  width: 100%;
  height: auto;
  display: block;
}
.slayt-oge:hover {
  text-decoration: none;
}

/* Görselin altındaki bilgi şeridi: hangi program olduğunu ve tıklanabilir
   olduğunu söylüyor. Görselin üstüne bindirilmiyor - arayüzü kapatıyordu. */
.slayt-bilgi {
  display: flex;
  align-items: center;
  gap: 12px;
  overflow: hidden;
  padding: 12px 16px;
  background: var(--beyaz);
  border-top: 1px solid var(--ink-200);
}
/* Seçici ".pencere img"e karşı yeterince güçlü olmalı: onun width:100%
   kuralı ikonu pencere genişliğinde çiziyordu. */
.pencere img.slayt-ikon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  flex-shrink: 0;
}
/* min-width/overflow olmadan uzun açıklama "İncele" bağlantısını
   şeridin dışına itiyordu. */
.slayt-metin {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
.slayt-metin strong {
  font-size: 15px;
  color: var(--ink-900);
  line-height: 1.3;
}
.slayt-metin small {
  font-size: 12.5px;
  color: var(--ink-500);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.slayt-git {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-700);
  white-space: nowrap;
}
.slayt-oge:hover .slayt-git {
  text-decoration: underline;
}

/* Oklar: görselin üstünde değil kenarında dursun ki arayüzü kapatmasın. */
.slayt-ok {
  position: absolute;
  top: 42%;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--ink-200);
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink-700);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--golge-2);
  transition:
    background 0.15s,
    color 0.15s;
}
.slayt-ok:hover {
  background: var(--beyaz);
  color: var(--brand-600);
}
.slayt-ok-sol {
  left: -19px;
}
.slayt-ok-sag {
  right: -19px;
}

.slayt-noktalar {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 16px;
}
.slayt-noktalar button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--ink-300);
  cursor: pointer;
  transition:
    width 0.2s,
    background 0.2s;
}
.slayt-noktalar button.etkin {
  width: 22px;
  background: var(--brand-500);
}

@media (max-width: 720px) {
  /* Dar ekranda oklar kadrajın dışına taşıyordu; parmakla kaydırma zaten var. */
  .slayt-ok {
    display: none;
  }
  .slayt-metin small {
    display: none;
  }
}

/* --- WhatsApp destek düğmesi ---------------------------------------------- */
/* Sağ altta sabit. WhatsApp'ın kendi yeşiliyle: markanın kiremiti yerine
   burada tanınırlık önemli - ziyaretçi rengi ve ikonu görünce ne olduğunu
   okumadan biliyor. Sitedeki tek istisna renk. */
.wa-destek {
  position: fixed;
  right: 22px;
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 56px;
  padding: 0 16px;
  border-radius: 999px;
  background: #25d366;
  color: #fff;
  box-shadow:
    0 10px 26px rgba(37, 211, 102, 0.32),
    0 2px 6px rgba(28, 25, 23, 0.14);
  transition:
    background 0.15s,
    gap 0.2s,
    box-shadow 0.15s;
}
.wa-destek:hover {
  background: #1da851;
  color: #fff;
  text-decoration: none;
  gap: 10px;
}
.wa-destek svg {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}
/* Etiket normalde kapalı; üzerine gelince açılıyor. Baloncuk küçük kalıyor,
   metin gerektiğinde görünüyor. */
.wa-destek span {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 14.5px;
  font-weight: 600;
  transition: max-width 0.25s;
}
.wa-destek:hover span,
.wa-destek:focus-visible span {
  max-width: 190px;
}

@media (prefers-reduced-motion: reduce) {
  .wa-destek,
  .wa-destek span {
    transition: none;
  }
}

@media (max-width: 720px) {
  /* Telefonda yalnızca yuvarlak ikon; etiket yeri dar. */
  .wa-destek {
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    height: 52px;
    padding: 0 13px;
  }
  .wa-destek:hover span {
    max-width: 0;
  }
}

/* Alt bilgideki telif satırı: iletişim satırından ince bir çizgiyle ayrılıp
   sayfanın tam ortasında duruyor. ".alt .kap" esnek kutu olduğu için burada
   blok'a çevriliyor, yoksa metin sola yaslanıyordu. */
/* Seçici ".alt .kap"tan (display: flex) güçlü olmalı; yoksa satır esnek
   kutu olarak kalıyor ve text-align: center işlemiyor, yazı sola yaslanıyor. */
.alt .kap.alt-telif {
  display: block;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--ink-200);
  text-align: center;
}
/* Satıcı kimliği satırı: telif satırının üstünde, ondan bir ton silik. */
.alt .kap.alt-telif .alt-kimlik {
  margin: 0 0 6px;
  color: var(--ink-500);
  font-size: 12.5px;
  line-height: 1.6;
}
.alt .kap.alt-telif p {
  margin: 0;
  font-size: 13px;
  color: var(--ink-500);
}
.alt .kap.alt-telif a {
  color: var(--ink-600);
  font-weight: 600;
}
.alt .kap.alt-telif a:hover {
  color: var(--brand-700);
}

/* --- İletişim sayfası ------------------------------------------------------ */
.iletisim-yollar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 44px;
}
.iletisim-kart {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--ink-200);
  border-radius: 14px;
  background: var(--beyaz);
  box-shadow: var(--golge-1);
  color: var(--ink-900);
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.iletisim-kart:hover {
  border-color: var(--ink-300);
  box-shadow: var(--golge-2);
  text-decoration: none;
}
.iletisim-kart strong {
  display: block;
  font-size: 15.5px;
}
.iletisim-kart small {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: var(--ink-500);
}
.iletisim-ikon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 11px;
  background: var(--brand-50);
  color: var(--brand-700);
  display: flex;
  align-items: center;
  justify-content: center;
}
.iletisim-ikon svg {
  width: 21px;
  height: 21px;
}
/* WhatsApp asıl yol: kendi rengiyle ayrışıyor (sağ alttaki düğmeyle aynı
   gerekçe - ziyaretçi rengi görünce ne olduğunu okumadan biliyor). */
.iletisim-kart-oncelikli .iletisim-ikon {
  background: #25d366;
  color: #fff;
}

.iletisim-form {
  border-top: 1px solid var(--ink-200);
  padding-top: 34px;
  /* Üst çubuk yapışkan: çıpaya gidildiğinde başlığı örtmesin diye
     yukarıda pay bırakılıyor. */
  scroll-margin-top: 90px;
}
.iletisim-form h2 {
  margin: 0 0 6px;
  font-size: 21px;
}
.iletisim-form-not {
  margin: 0 0 22px;
  color: var(--ink-500);
}
.alan {
  margin-bottom: 16px;
}
.alan label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-600);
}
.alan input,
.alan textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--ink-200);
  border-radius: 10px;
  background: var(--beyaz);
  color: var(--ink-900);
  font: inherit;
}
.alan textarea {
  resize: vertical;
  min-height: 130px;
}
.alan input:focus,
.alan textarea:focus {
  outline: none;
  border-color: var(--brand-500);
}
.alan-ikili {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Tuzak alan: yalnızca botlar görsün diye ekrandan çıkarılıyor. display:none
   kullanılmıyor - bazı botlar onu atlıyor. */
.tuzak {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.bildirim {
  padding: 13px 16px;
  border-radius: 10px;
  border: 1px solid;
  margin-bottom: 20px;
  font-size: 14.5px;
}
.bildirim-ok {
  background: var(--brand-50);
  border-color: var(--brand-200);
  color: var(--brand-700);
}
.bildirim-hata {
  background: var(--danger-50);
  border-color: var(--danger-200);
  color: var(--danger-600);
}

@media (max-width: 720px) {
  .alan-ikili {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* --- Hata sayfası (404 / 403) ---------------------------------------------- */
.hata {
  text-align: center;
  padding: 90px 0 100px;
}
.hata-kod {
  margin: 0 0 6px;
  font-size: clamp(64px, 12vw, 104px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--brand-200);
}
.hata h1 {
  margin: 0 0 12px;
  font-size: clamp(24px, 4vw, 32px);
  letter-spacing: -0.02em;
}
.hata-metin {
  margin: 0 auto;
  max-width: 52ch;
  color: var(--ink-500);
  text-wrap: balance;
}
.hata-yollar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}

/* --- Doğrulama kutusu ------------------------------------------------------ */
/* Onay kutusu, etiketi ve kod alanı KARDEŞ öğeler: kod yalnızca kutu
   işaretlenince açılıyor ve bu tamamen CSS ile yapılıyor. JavaScript
   kapalıyken de çalışıyor. */
.robot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 13px;
  max-width: 420px;
  margin: 4px 0 22px;
  padding: 16px 18px;
  border: 1px solid var(--ink-200);
  border-radius: 12px;
  background: var(--beyaz);
  box-shadow: var(--golge-1);
}
.robot > input[type="checkbox"] {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin: 0;
  accent-color: var(--brand-500);
  cursor: pointer;
}
.robot-onay {
  flex: 1 1 auto;
  min-width: 0;
  cursor: pointer;
}
.robot-onay strong {
  display: block;
  font-size: 15px;
  color: var(--ink-900);
}
.robot-onay small {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--ink-500);
}

/* Kod alanı: kutu işaretlenene kadar kapalı. */
.robot-kod {
  display: none;
  flex: 0 0 100%;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
  margin-top: 3px;
  padding-top: 16px;
  border-top: 1px solid var(--ink-200);
}
.robot > input[type="checkbox"]:checked ~ .robot-kod {
  display: flex;
}
.robot-kod img {
  border: 1px solid var(--ink-200);
  border-radius: 8px;
  flex-shrink: 0;
}
.robot-kod-alan {
  flex: 1 1 150px;
  min-width: 0;
}
.robot-kod-alan label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-600);
}
.robot-kod-alan input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--ink-200);
  border-radius: 10px;
  background: var(--beyaz);
  color: var(--ink-900);
  font: 600 16px/1.2 "Cascadia Mono", Consolas, monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.robot-kod-alan input:focus {
  outline: none;
  border-color: var(--brand-500);
}
.robot-yenile {
  margin-top: 8px;
  padding: 0;
  border: none;
  background: none;
  color: var(--brand-700);
  font: 600 12.5px/1.4 inherit;
  cursor: pointer;
  text-decoration: underline;
}

/* --- Kimdir sayfası -------------------------------------------------------- */
.kimdir-bas {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 26px;
}
.kimdir-foto {
  width: 116px;
  height: 116px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--ink-200);
  box-shadow: var(--golge-2);
}
.kimdir-bas h1 {
  margin: 0 0 6px;
  font-size: clamp(26px, 4vw, 34px);
  letter-spacing: -0.02em;
}
.kimdir-unvan {
  margin: 0;
  color: var(--brand-700);
  font-weight: 600;
}
.kimdir-kunye {
  margin: 5px 0 0;
  font-size: 14px;
  color: var(--ink-500);
}
/* Özet: sayfanın en çok okunan cümlesi, gövdeden ayrılıyor. */
.kimdir-ozet {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink-700);
  padding-left: 16px;
  border-left: 3px solid var(--brand-500);
}
.kimdir-govde h2 {
  font-size: 20px;
}

.kimdir-programlar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.kimdir-program {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 16px;
  border: 1px solid var(--ink-200);
  border-radius: 12px;
  background: var(--beyaz);
  box-shadow: var(--golge-1);
  color: var(--ink-900);
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.kimdir-program:hover {
  border-color: var(--ink-300);
  box-shadow: var(--golge-2);
  text-decoration: none;
}
.kimdir-program img {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  flex-shrink: 0;
}
.kimdir-program strong {
  display: block;
  font-size: 15px;
}
.kimdir-program small {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-500);
}

/* Sık sorulanlar: yapay zekâ araçlarının alıntıladığı bölüm. */
.sss-oge {
  padding: 16px 0;
  border-top: 1px solid var(--ink-200);
}
.sss-oge:last-child {
  border-bottom: 1px solid var(--ink-200);
}
.sss-oge h3 {
  margin: 0 0 6px;
  font-size: 16px;
  color: var(--ink-900);
}
.sss-oge p {
  margin: 0;
  color: var(--ink-600);
  line-height: 1.65;
}

@media (max-width: 720px) {
  .kimdir-bas {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .kimdir-foto {
    width: 92px;
    height: 92px;
  }
}

/* Kimdir sayfasındaki dış bağlantılar (kişisel site, Instagram). */
.kimdir-baglar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
}
.kimdir-baglar a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border: 1px solid var(--ink-200);
  border-radius: 999px;
  background: var(--beyaz);
  color: var(--ink-600);
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--golge-1);
}
.kimdir-baglar a:hover {
  border-color: var(--ink-300);
  color: var(--brand-700);
  text-decoration: none;
}
.kimdir-baglar svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--brand-600);
}

/* Sık sorulanlar içindeki bağlantılar gövde metninden ayrılsın. */
.sss-oge p a {
  color: var(--brand-700);
  font-weight: 600;
}

/* İletişim yolları şeridi: tek satır. Dar ekranda alta kaymak yerine
   yana kayıyor - satır kırılınca liste dağınık görünüyordu. */
.yollar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.yollar::-webkit-scrollbar {
  display: none;
}
.yollar a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  white-space: nowrap;
  color: var(--ink-700);
  font-weight: 600;
}
.yollar a:hover {
  color: var(--brand-700);
  text-decoration: none;
}
.yollar a svg {
  width: 15px;
  height: 15px;
  color: var(--brand-600);
}
.yollar i {
  flex-shrink: 0;
  font-style: normal;
  color: var(--ink-300);
}

/* Yazı sonundaki etiketler. Tıklanabilir değil: her etiket için ayrı sayfa
   üretmek yüzlerce ince içerikli sayfa demek olurdu. */
.etiketler {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 30px;
}
.etiketler > span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin-right: 2px;
}
.etiketler em {
  font-style: normal;
  font-size: 13px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--ink-100);
  color: var(--ink-600);
}


/* --- Yazı sayfası: iki sütun ----------------------------------------------
   Sol sütunda kapak ve yazının kendisi, sağ sütunda yazar kartı, yazarın
   bağlantıları, diğer makaleler ve paylaş kutusu.

   Genişlik: sitenin geri kalanı 1120 piksel; yazı sayfası 810'da kalınca
   yanlarda kocaman boşluk oluyor ve sayfa dar görünüyordu. 980'e çıkarıldı:
   gövde 710 piksel (satır başına ~83 karakter), yan sütun 244. */
.yazi-kap {
  max-width: 980px;
}
.yazi-duzen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 244px;
  grid-template-areas:
    "basi  ."
    "kapak yazar"
    "govde diger";
  column-gap: 26px;
}
/* Başlık bloğu artık <article class="yazi"> içinde değil, ayrı bir ızgara
   alanı; ".yazi h1" gibi kurallar ona ulaşmıyor, burada karşılıkları var. */
.yazi-basi { grid-area: basi; margin-top: 18px; }
/* Yazar kartı kapakla aynı yükseklikte bitsin: ızgara satırı zaten kapağın
   boyu kadar, kart da bu alanı boydan boya dolduruyor. Alt boşluk kapağınkiyle
   aynı (28px), yoksa kartın alt kenarı kapaktan 28 piksel aşağıda kalıyor. */
.yazi-yazar { display: flex; margin-bottom: 28px; }
.yazi-yazar > .yazar-kart { flex: 1; }
.yazi-basi .yazi-kategori { margin: 0 0 6px; }
.yazi-basi h1 { font-size: 30px; line-height: 1.25; margin: 0 0 10px; }
.yazi-kapak-alan { grid-area: kapak; }
.yazi-yazar      { grid-area: yazar; }
.yazi-govde      { grid-area: govde; min-width: 0; }
.yazi-yan-alt    { grid-area: diger; align-self: start; }

.yazi-kapak-alan .yazi-kapak-buyuk {
  margin: 0 0 28px;
}

/* DİKKAT: yapışkanlık YALNIZCA alttaki bloğa verilebilir.
   İkisine birden verilirse yazar kartı da ekranın tepesine yapışıyor ve
   "Diğer makaleler" onun üstüne biniyor - bu hata bir kez yaşandı.
   Yalnızca alt blok yapıştığında sorun yok: alt blok tepeye ulaştığında
   yazar kartı zaten yukarı kaymış oluyor (aradaki 22 piksellik boşluk
   yapışma eşiğinden küçük). */
.yazi-yan-alt {
  margin-top: 22px;
  position: sticky;
  top: 84px;
}

.yazar-kart {
  display: flex;
  flex-direction: column;
  padding: 20px 14px 16px;
  border: 1px solid var(--ink-200);
  border-radius: 14px;
  background: var(--beyaz);
}
.yazar-kimlik {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  color: inherit;
  /* Kart kapak boyuna uzadığında fotoğraf ve ad dikeyde ortalanıyor,
     ikon şeridi kartın altına yaslanıyor. */
  margin: auto 0;
}
.yazar-kimlik:hover {
  text-decoration: none;
}
.yazar-kimlik:hover .yazar-ad {
  color: var(--brand-700);
}
.yazar-kimlik img {
  /* Kart 226 piksel geniş, iç boşluk düşünce 198 kalıyor: 108 piksellik
     portre rahat sığıyor ve kartın odağı oluyor. */
  width: 108px;
  height: 108px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  /* Portrenin arka planı açık; kart da beyaz olduğu için yuvarlak kırpma
     hiç görünmüyordu, yüz boşlukta duruyor gibiydi. İnce halka çerçeveliyor. */
  border: 1px solid var(--ink-200);
  background: var(--ink-100);
}
.yazar-metin {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.yazar-ad {
  font-weight: 700;
  font-size: 15px;
  color: var(--ink-900);
  line-height: 1.3;
}
.yazar-rol {
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-400);
}

@media (max-width: 860px) {
  /* Telefon ve tablette tek sütun: kapak, yazar kartı, yazı, diğer makaleler.
     Yazar kartı yazının başında kalıyor; diğer makaleler okuma bitince
     geliyor - sırayla okunacak bir sayfada doğru sıra bu. */
  .yazi-duzen {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "basi"
      "kapak"
      "yazar"
      "govde"
      "diger";
  }
  .yazi-yazar,
  .yazi-diger {
    position: static;
  }
  .yazi-kapak-alan .yazi-kapak-buyuk {
    margin-bottom: 16px;
  }
  .yazi-yazar {
    display: block;
    margin-bottom: 26px;
  }
  .yazar-kimlik {
    margin: 0;
  }
  .yazi-diger {
    margin-top: 40px;
  }
  .yazar-kimlik {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    text-align: left;
  }
  .yazar-kimlik img {
    width: 64px;
    height: 64px;
  }
  .yazar-metin {
    align-items: flex-start;
  }
  .yazar-baglar a {
    height: 40px;
  }
}


/* --- Yazarın bağlantıları (yalnızca ikon) ---------------------------------- */
/* Tek sıra: ikonlar sarıp iki satıra bölününce dağınık duruyordu.
   flex: 1 1 0 ile eşit paya bölünüyorlar, kaç tane olursa olsun sığıyorlar. */
.yazar-baglar {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--ink-100);
}
.yazar-baglar a {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  border: 1px solid var(--ink-200);
  border-radius: 9px;
  background: var(--beyaz);
  color: var(--ink-500);
}
.yazar-baglar a:hover {
  color: var(--brand-700);
  border-color: var(--brand-500);
  text-decoration: none;
}
.yazar-baglar svg {
  width: 17px;
  height: 17px;
  flex: none;
}

/* --- Yan sütun: diğer makaleler -------------------------------------------- */
.yazi-diger {
  padding: 18px 16px 16px;
  border: 1px solid var(--ink-200);
  border-radius: 14px;
  background: var(--beyaz);
}
.yazi-diger h2 {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-400);
}
.yazi-diger ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.yazi-diger li {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ink-100);
}
.yazi-diger li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.yazi-diger a {
  display: block;
  color: var(--ink-800);
}
.yazi-diger a:hover {
  color: var(--brand-700);
  text-decoration: none;
}
.yazi-diger a span {
  font-size: 13.5px;
  line-height: 1.35;
  /* Üç satırdan uzun başlık yan sütunu şişiriyor. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.diger-tumu {
  display: inline-block;
  margin-top: 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--brand-700);
}

@media (max-width: 860px) {
  /* Tek sütunda yer bol: kapaklar büyüyor, liste iki sütuna yayılıyor. */
  .yazi-diger ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px 20px;
  }
  .yazi-diger h2 {
    font-size: 14px;
  }
}


/* --- Yan sütundaki paylaş kutusu ------------------------------------------
   Yazının sonundaki geniş paylaş satırının dar sütuna uyarlanmış hâli:
   aynı düğmeler, ama alt alta ve çerçeve içinde. */
.paylas-yan {
  display: block;
  margin: 22px 0 0;
  padding: 18px 16px 16px;
  border: 1px solid var(--ink-200);
  border-radius: 14px;
  background: var(--beyaz);
}
.paylas-yan .paylas-etiket {
  display: block;
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--ink-400);
}
.paylas-yan .paylas-dugme {
  display: flex;
  width: 100%;
  margin-bottom: 8px;
  padding: 10px 13px;
  font-size: 13.5px;
  box-shadow: none;
}
.paylas-yan .paylas-dugme:last-child {
  margin-bottom: 0;
}

@media (max-width: 860px) {
  /* Telefonda tek sütun: yazının sonundaki paylaş satırı zaten hemen
     yukarıda duruyor, ikincisi gereksiz tekrar olurdu. */
  .paylas-yan {
    display: none;
  }
}


/* Ekranda görünmeyen ama ekran okuyucunun ve arama motorunun okuduğu metin.
   Kapak görselinin içine yazılmış başlıkların metin karşılığı için gerekli:
   görseldeki yazıyı arama motoru okuyamıyor. display:none KULLANMA -
   o zaman içerik tamamen yok sayılır. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* --- Kapaktaki kullanıcı sayısı şeridi ------------------------------------
   Köşeye oturan küçük kare pencere (.kapak-serit) ve içinde 45 derece
   dönmüş bant (> span). Kare köşeye yapışık olduğu için merkezi köşenin
   çapraz ekseninde; bant da tam o merkeze oturduğu için iki ucundan EŞİT
   kırpılıyor ve ortadaki yazı köşe hizasına düşüyor.

   Ortalama elle hesaplanmıyor: top/left %50 + translate(-%50, -%50) ile
   tarayıcı yapıyor. Yazı tipi ya da satır yüksekliği değişse de bant
   merkezde kalır - önceki hâlinde piksel hesabı tutmayınca yazı kayıyordu. */
.kart-kapak,
.urun-kapak {
  overflow: hidden;
}
.kapak-serit {
  position: absolute;
  top: 0;
  right: 0;
  width: 88px;
  height: 88px;
  overflow: hidden;
  pointer-events: none;
}
.kapak-serit > span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 170px;
  display: block;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--danger-600);
  color: #fff;
  text-align: center;
  font-size: 11px;
  line-height: 1.95;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.kapak-serit b {
  font-weight: 700;
}

/* Ürün detay sayfasındaki kapak daha büyük; kare ve bant da ona göre. */
.urun-kapak .kapak-serit {
  width: 108px;
  height: 108px;
}
.urun-kapak .kapak-serit > span {
  width: 210px;
  font-size: 12.5px;
  line-height: 2;
}