/* ============================================================
   program-indir.css — Program İndir bölümü.

   TASARIM KARARLARI (ui-ux-pro-max: Marketplace/Directory + Bento Grid)
   - Patern "Marketplace / Directory": arama kutusu CTA'nın kendisidir.
     Hero bu yüzden arama odaklı; kategoriler hemen altında; güven bandı zorunlu.
   - Izgara BENTO: kartlar eşit değil. Öne çıkan kayıt 2 sütun kaplar, geri kalanı
     kompakt satır. Eşit kutu dizisi ritim üretmez, katalog gibi durmaz.
   - OTOMATİK DARK MODE YOK — bilinçli. Site kabuğu (header/footer) yalnız açık tema
     destekliyor; bölümü sisteme göre karartmak kabukla kopukluk yaratır. Onun yerine
     KASITLI İKİ TON: koyu hero + koyu güven bandı, açık içerik yüzeyi.
   - Sınır olarak 1px solid yerine inset ring: yüzeyler kâğıt gibi değil cam gibi ayrışır.
   - Sayısal her alan tabular-nums: sürüm ve boyut sütunları zıplamaz.

   Renk yalnız aşağıdaki değişkenlerden. Dosyanın gerisinde ham renk yok.
   ============================================================ */

/* JETONLAR :root'ta.
   Once yalniz .pi-hero/.pi-pano/.pi-tekil uzerinde tanimliydi. Gerekce
   "temaya sizmasin" idi ama --pi-* adlarini tema zaten kullanmiyor; sizacak
   bir sey yok. Buna karsilik dar kapsam gercek bir hata uretiyordu: bu uc
   sarmalin DISINDA kalan ya da rengini ust ogeden miras alan her parca
   (yan sutun kartlari, kiyas tablosu hucreleri) gece modunda ACIK temanin
   degerine dusuyordu -- koyu zemin uzerinde koyu yazi. Olculdu 17 Eylul:
   .pi-yan__ad rengi #0B1120, zemini #131C31.
   Kapsayicilara ayrica acik renk veriliyor ki miras zinciri her yerde
   tanimli olsun. */
:root {
  /* yüzey — DEĞERLER PORTALLE AYNI (portal.css :root).
     İki palet aynı sitede iki ayrı gri ve iki ayrı mavi üretiyordu. */
  --pi-zemin:      #F3F6FC;
  --pi-yuzey:      #FFFFFF;
  --pi-yuzey-2:    #E9EFFA;
  --pi-yuzey-3:    #DDE6F5;

  /* Koyu yüzey (hero + güven bandı). Renkler sitenin kendi marka
     gradyanindan devralindi (--mi-grad) =
     linear-gradient(269deg, #20359f 10%, #00126B 100%). Önceki #0c1424
     nötr, neredeyse siyah bir laciverttti ve kabukla akraba durmuyordu. */
  /* Hero yüzeyi. Eskiden koyu lacivert bir banttı (--pi-koyu/--pi-koyu-2
     gradyanı). Sayfanın geri kalanı açık yüzeyli ve düz olduğu için o bant
     yapıştırma duruyordu. Artık hero da sayfanın yüzeyinde; adlar korundu
     çünkü kırk kadar kural onlara bakıyor. */
  --pi-koyu:       var(--pi-yuzey);
  --pi-koyu-2:     var(--pi-yuzey);
  --pi-koyu-us:    var(--pi-metin);
  --pi-koyu-us-2:  var(--pi-metin-2);

  /* CTA yuzeyi: indirme kutusu, guven bandi, komut satiri.
     Bunlar BILEREK koyu ve iki temada da koyu kaliyor -- sayfadaki tek
     birincil eylem ve cevresinden ayrilmasi gerekiyor (Flat Design'da
     hiyerarsi golgeyle degil renkle kurulur). Hero'nun aksine burada koyu
     yuzey bir karar, miras degil. */
  --pi-cta:        #16255C;
  --pi-cta-2:      #1E3A8A;
  --pi-cta-us:     #EEF2FB;
  --pi-cta-us-2:   #A8B7D6;

  /* metin */
  --pi-metin:      #0B1120;
  --pi-metin-2:    #54627D;
  /* #667085 yalniz BEYAZ uzerinde AA'yi geciyordu (4.97:1). Bu renk cogu
     yerde --pi-yuzey-2 (#E9EFFA) ya da tonlu hucre uzerinde kullaniliyor
     ve orada 4.31:1'e dusuyordu -- olculdu 17 Eylul, 13 ayri oge.
     #5C6A83 uc yuzeyin ucunde de geciyor: 5.46 / 4.73 / 5.05. */
  --pi-metin-3:    #5C6A83;

  /* çizgi: ring olarak kullanılır, layout'a genişlik eklemez */
  --pi-ring:       rgba(11, 18, 32, 0.09);
  --pi-ring-2:     rgba(11, 18, 32, 0.16);

  /* marka + anlam */
  --pi-marka:      #2A55D8;
  --pi-marka-2:    #5B8CFF;
  --pi-marka-yum:  rgba(42, 85, 216, 0.10);
  /* Vurgu renginin UZERINDEKI yazi.
     Gece modunda vurgu renkleri aciliyor (--pi-marka #2A55D8 -> #5B8CFF,
     --pi-uyari #B4530C -> #FFA14D). Dolgulu rozetlerde yazi #fff kalirsa
     acik zemin uzerine beyaz yazi olur: olculdu, "v5.92.0.10042 ile guncel"
     rozeti 2.01:1'e dusuyordu. Bu jeton gunduz beyaz, gece koyu. */
  --pi-vurgu-us:   #FFFFFF;

  /* Anlam renkleri KENDI tonlu zeminlerinde olculdu, beyazda degil: guven
     ve uyari kutularinin zemini --pi-*-yum. Portalin degerleri (#0F7A52 /
     #B4530C) beyazda geciyor ama tonlu zeminde 4.59 ve 4.32'ye dusuyordu
     (olculdu 17 Eylul, on ayri oge). Bir tik koyulastirildi. */
  --pi-guven:      #0D6B48;   /* tonlu zeminde 5.60, beyazda 6.53 */
  --pi-guven-yum:  rgba(15, 122, 82, 0.11);
  --pi-uyari:      #A2490A;   /* tonlu zeminde 5.17, beyazda 6.01 */
  --pi-uyari-yum:  rgba(180, 83, 12, 0.11);
  --pi-yildiz:     #B4530C;

  /* yükseklik */
  --pi-golge-1: 0 1px 2px rgba(11, 18, 32, 0.04), 0 6px 16px -6px rgba(11, 18, 32, 0.08);
  --pi-golge-2: 0 2px 6px rgba(11, 18, 32, 0.06), 0 22px 48px -18px rgba(11, 18, 32, 0.24);

  /* köşe + ritim (4/8 tabanlı) */
  --pi-r-sm: 10px;
  --pi-r:    16px;
  --pi-r-lg: 22px;
  --pi-r-xl: 30px;
  --pi-u1: 4px;  --pi-u2: 8px;  --pi-u3: 12px;
  --pi-u4: 16px; --pi-u5: 24px; --pi-u6: 32px; --pi-u7: 48px;

  /* Sitenin kendi fontlari. Onceki surumde Space Grotesk getiriliyordu; teknik
     ama daktilo gibi duruyordu ve kurumsal hosting kabuguyla uyusmuyordu.
     Urbanist zaten temanin baslik fontu — ek istek de gitmiyor. */
  /* 1.47: baslik fontu TEMADAN. Eklentinin kendi yazi tipini dayatmasi
     sayfayi sitenin geri kalanindan kopariyordu. */
  --pi-display: inherit;
  --pi-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --pi-gecis: 180ms cubic-bezier(0.22, 1, 0.36, 1);

}

/* ============================================================
   GECE MODU

   Eski notta "OTOMATIK DARK MODE YOK -- bilincli" yaziyordu; gerekce site
   kabugunun yalniz acik temayi desteklemesiydi. O gerekce artik gecersiz:
   tema gece modunu kazandi, <html> uzerine "dark-mode" sinifi koyuyor ve
   portal o sinyali okuyor. Bu dosya okumadigi icin kategori ve program
   sayfalari gece modunda beyaz kaliyordu -- sayfanin yarisi koyu, yarisi
   acik.

   prefers-color-scheme BILEREK YOK, portal.css ile ayni gerekce: karari
   isletim sistemi degil temanin anahtari veriyor.

   Degerler portal.css'in koyu blogunun aynisi.
   ============================================================ */
:root.dark-mode {
  --pi-zemin:      #0B1120;
  --pi-yuzey:      #131C31;
  --pi-yuzey-2:    #1A2440;
  --pi-yuzey-3:    #223056;

  --pi-metin:      #E6ECF9;
  --pi-metin-2:    #8B99B6;
  --pi-metin-3:    #A3AFC8;   /* --pi-yuzey uzerinde 5.0:1; #9AA7C2 ile
                                 kirinti yolu 4.38e dusuyordu (olculdu) */

  --pi-ring:       rgba(255, 255, 255, 0.085);
  --pi-ring-2:     rgba(255, 255, 255, 0.19);

  --pi-marka:      #5B8CFF;
  --pi-marka-2:    #8FB0FF;
  --pi-marka-yum:  rgba(91, 140, 255, 0.14);
  --pi-guven:      #34D399;
  --pi-guven-yum:  rgba(52, 211, 153, 0.13);
  --pi-uyari:      #FFA14D;
  --pi-uyari-yum:  rgba(255, 161, 77, 0.13);
  --pi-yildiz:     #FFA14D;
  --pi-vurgu-us:   #0B1120;

  --pi-golge-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 28px rgba(0, 0, 0, 0.26);
  --pi-golge-2: 0 2px 6px rgba(0, 0, 0, 0.45), 0 20px 46px rgba(0, 0, 0, 0.34);
}

.pi-pano,
.pi-tekil {
  background: var(--pi-zemin);
  color: var(--pi-metin);
  padding-bottom: var(--pi-u7);
}

/* Ic baglanti (hero'daki editor butonu) yumusak kaysin — yalniz bu bolumde.
   Sabit baslik varsa hedef altinda kalmasin diye scroll-margin. */
html:has(.pi-tekil) { scroll-behavior: smooth; }
.pi-bolum[id] { scroll-margin-top: 90px; }

@media (prefers-reduced-motion: reduce) {
  html:has(.pi-tekil) { scroll-behavior: auto; }
}

/* ============================================================
   HERO — arama CTA'nın kendisi (Marketplace patterni)
   ============================================================ */
/* Bolumun kapsayicilari rengi ACIKCA veriyor: icerideki hicbir parca
   temanin ya da tarayicinin varsayilanina dusmesin. */
.pi-pano,
.pi-tekil { color: var(--pi-metin); }

/* Liste sayfasinda hero KIMLIK BANDI, sahne degil: okur kategoriyi zaten
   secmis, sayfanin isi listeyi gostermek. Dolgu kisaldi ki programlar
   ilk ekranda basllasin. */
.pi-hero {
  position: relative;
  padding: clamp(22px, 3vw, 32px) 0 clamp(20px, 2.5vw, 28px);
  /* Kendi yüzeyinde, sayfadan ince bir çizgiyle ayrılıyor. Eskiden koyu
     lacivert gradyan bir banttı ve sitenin geri kalanıyla akraba durmuyordu. */
  /* Duz beyaz yerine sayfadan bir ton ayrilan yuzey + alta dogru acilan
     ince bir gecis. Kullanici "cok beyaz" dedi: hero ile govde arasinda
     tek ayrim 1px cizgiydi ve sayfa tek bir beyaz alan gibi duruyordu.
     Gradyan yok, iki duz katman var -- secilen dil Flat Design. */
  background: var(--pi-yuzey);
  border-bottom: 1px solid var(--pi-ring-2);
  box-shadow: 0 1px 0 var(--pi-ring), 0 10px 24px -20px rgba(11, 18, 32, 0.45);
  color: var(--pi-metin);
}

/* Başlığın arkasında çok hafif bir marka tonu: bant değil, vurgu.
   Tek renkli, gradyan yok — seçilen dil Flat Design. */
/* TEK ton, solda, basligin arkasinda.
   Ikinci bir yesil ton sagda duruyordu ve sayfanin sag ust kosesinde
   capraz bir bulasik gibi gorunuyordu (kullanici canlida bildirdi). Iki
   farkli renkli ton zaten Flat Design'in "gradyan yok" kuraliyla da
   celisiyordu; biri kaldi ve o da cok hafif. */
.pi-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(46% 120% at 6% 0%, var(--pi-marka-yum), transparent 62%);
}
.pi-hero > * { position: relative; }

/* Hero iki sütun: solda kimlik, sağda künye kartı.
   Kart yoksa (kategori sayfası) tek sütun kalıyor. */
.pi-hero__izgara {
  display: grid;
  gap: var(--pi-u5);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1000px) {
  /* Sag sutun 260 -> 320px: arama kutusunun yer tutucusu uc satira
     sariyordu. Kunye karti da 320'de rahat. */
  .pi-hero--kartli .pi-hero__izgara {
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
  }
}

/* ---------------- KÜNYE KARTI ----------------
   Hero düz bir giriş bloğu gibi duruyordu: her şey solda, sağ yarı boş.
   Kartı dolduran veri zaten sayfada var. Puan sayı OLARAK DA yıldız olarak
   da: 4,7'yi okumak için insanın çevirmesi gerekiyor, yıldız bir bakışta
   anlaşılıyor. */
.pi-kunye-kart {
  padding: var(--pi-u4);
  border: 1px solid var(--pi-ring);
  border-radius: var(--pi-r);
  background: var(--pi-yuzey-2);
  text-align: center;
}

.pi-kunye-kart__etiket {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pi-metin-2);
}

.pi-kunye-kart__puan {
  margin: 4px 0 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  font-variant-numeric: tabular-nums;
}
.pi-kunye-kart__puan strong {
  font-size: 2.3rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--pi-metin);
}
.pi-kunye-kart__bes { font-size: 0.9rem; color: var(--pi-metin-2); }

.pi-kunye-kart__yildiz {
  margin: 8px 0 0;
  display: flex;
  justify-content: center;
  gap: 3px;
}
.pi-kunye-kart__yildiz span { color: var(--pi-ring-2); display: inline-flex; }
.pi-kunye-kart__yildiz span svg { width: 17px; height: 17px; }
.pi-kunye-kart__yildiz .dolu { color: var(--pi-yildiz); }

.pi-kunye-kart__liste {
  margin: var(--pi-u4) 0 0;
  padding: var(--pi-u3) 0 0;
  border-top: 1px solid var(--pi-ring);
  display: flex;
  flex-direction: column;
  gap: 7px;
  text-align: left;
}
.pi-kunye-kart__liste > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pi-u2);
}
.pi-kunye-kart__liste dt { font-size: 0.8rem; color: var(--pi-metin-2); }
.pi-kunye-kart__liste dd {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--pi-metin);
  font-variant-numeric: tabular-nums;
}

.pi-kunye-kart__bag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--pi-u3);
  min-height: 44px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--pi-marka);
  text-decoration: none;
}
.pi-kunye-kart__bag:hover { text-decoration: underline; }
.pi-kunye-kart__bag svg { width: 15px; height: 15px; }

/* Dar ekranda kart baslikla listeyi yan yana tasiyor: dikeyde bos yer
   kaplamasin. */
@media (max-width: 999.98px) {
  .pi-kunye-kart { display: flex; align-items: center; flex-wrap: wrap; gap: var(--pi-u4); text-align: left; }
  .pi-kunye-kart__puan { justify-content: flex-start; }
  .pi-kunye-kart__yildiz { justify-content: flex-start; }
  .pi-kunye-kart__liste { margin: 0; padding: 0; border-top: 0; flex: 1 1 200px; }
  .pi-kunye-kart__bag { margin-top: 0; }
}

.pi-hero__kirinti {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--pi-u4);
  font-size: 0.8125rem;
  color: var(--pi-metin-3);
}
.pi-hero__kirinti a { color: var(--pi-metin-2); text-decoration: none; }
/* Bulunulan sayfanin adi: --pi-metin-3 ile 4.38'de kaliyordu (olculdu,
   gece modu). Kirinti yolu sayfanin neresinde oldugunu soyluyor, soluk
   olmasi gerekmiyor. */
.pi-hero__kirinti [aria-current="page"] { color: var(--pi-metin-2); }
.pi-hero__kirinti a:hover { color: var(--pi-marka); text-decoration: underline; }
.pi-hero__kirinti svg { width: 12px; height: 12px; opacity: 0.5; flex-shrink: 0; }

.pi-hero__baslik {
  margin: 0;
  max-width: 22ch;
  font-family: var(--pi-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.6vw, 2.35rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--pi-metin);
}

/* H1 altindaki kisa aciklama: lead'den biraz daha buyuk ve koyu -- okurun
   ilk okudugu cumle bu. */
.pi-hero__ozet {
  margin: var(--pi-u3) 0 0;
  max-width: 68ch;
  font-size: clamp(0.95rem, 1.5vw, 1.05rem);
  line-height: 1.65;
  color: var(--pi-metin-2);
}

.pi-hero__lead {
  margin: var(--pi-u3) 0 0;
  max-width: 62ch;
  font-size: clamp(0.9rem, 1.4vw, 1rem);
  line-height: 1.6;
  color: var(--pi-metin-2);
}

/* Arama: hero'nun asıl CTA'sı (Marketplace/Directory paterni). */
.pi-hero__arama { margin-top: var(--pi-u4); max-width: 560px; }

.pi-hero__arama form,
.pi-hero__arama .search-form {
  display: flex;
  align-items: center;
  gap: var(--pi-u2);
  padding: 5px 5px 5px var(--pi-u4);
  border: 1px solid var(--pi-ring-2);
  border-radius: 999px;
  background: var(--pi-yuzey-2);
  transition: border-color var(--pi-gecis), box-shadow var(--pi-gecis);
}
.pi-hero__arama form:focus-within,
.pi-hero__arama .search-form:focus-within {
  border-color: var(--pi-marka);
  box-shadow: 0 0 0 3px var(--pi-marka-yum);
}

.pi-hero__arama input[type="search"],
.pi-hero__arama input[type="text"] {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--pi-metin);
  font: inherit;
  font-size: 0.9375rem;
}
.pi-hero__arama input::placeholder { color: var(--pi-metin-3); }
.pi-hero__arama input:focus { outline: none; box-shadow: none; }

.pi-hero__arama button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: 0;
  border-radius: 999px;
  background: var(--pi-marka);
  color: var(--pi-vurgu-us);
  cursor: pointer;
  transition: filter var(--pi-gecis), transform var(--pi-gecis);
}
.pi-hero__arama button:hover { filter: brightness(1.08); }
.pi-hero__arama button:active { transform: scale(0.97); }

/* Kimlik: ikon/logo + başlık aynı ritimde.
   align-items FLEX-START: metin bloğu artık açıklamayı da taşıyor ve
   ortalanınca logo metnin ortasına kayıyordu. Logo başlığın hizasında. */
.pi-hero__kimlik { display: flex; align-items: flex-start; gap: var(--pi-u4); }
.pi-hero__kimlik-metin { min-width: 0; flex: 1; }

/* Başlık satırı: H1 + sayaç yan yana, dar ekranda alt alta. */
.pi-hero__bas-satir {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px var(--pi-u4);
}
.pi-hero__sayac {
  font-size: 0.875rem;
  color: var(--pi-metin-2);
  font-variant-numeric: tabular-nums;
}

/* Filtre izi: hangi süzgecin açık olduğunu başlığın altında söylüyor.
   Her çip aynı zamanda o filtreyi kaldıran bağlantı. */
.pi-hero__izler {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: var(--pi-u3) 0 0;
  /* Aciklamayla ayni sutun genisligi. Iz satiri serbest birakilinca
     kabin sag kenarina kadar uzuyordu (1280'de 1040px); iki filtre
     varken fark edilmez ama bes filtre secilince metin blogundan
     tasan ikinci bir sutun gibi duruyor. */
  max-width: 68ch;
}
.pi-hero__izler-et {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pi-metin-2);
}
/* Metin --pi-marka DEGIL: tonlu zeminde gece modunda 4.38'e dusuyordu
   (olculdu). Isareti cerceve ve zemin veriyor, yazi normal metin renginde. */
.pi-hero__iz {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border: 1px solid var(--pi-marka);
  border-radius: 999px;
  background: var(--pi-marka-yum);
  color: var(--pi-metin);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
}
.pi-hero__iz span[aria-hidden] { font-size: 1.05rem; line-height: 1; opacity: 0.7; }
.pi-hero__iz:hover { background: var(--pi-marka); color: var(--pi-vurgu-us); }
.pi-hero__iz:hover span[aria-hidden] { opacity: 1; }

/* Açıklama artık kimlik bloğunun içinde: başlığın hizasında başlıyor.
   Genişlik sınırı okunabilirlik için -- satır sayfanın sağ kenarına kadar
   uzayınca göz satır başını bulamıyor. */
.pi-hero__metin { margin-top: var(--pi-u3); max-width: 68ch; }
.pi-hero__metin p {
  margin: 0 0 var(--pi-u2);
  font-size: clamp(0.9rem, 1.4vw, 0.98rem);
  line-height: 1.65;
  color: var(--pi-metin-2);
}
.pi-hero__metin p:last-child { margin-bottom: 0; }

/* Logo 64 -> 84px. Bir indirme sayfasinda okurun ilk tanidigi sey programin
   simgesi; basligin yaninda kucuk kaliyordu. */
.pi-hero__logo {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  flex-shrink: 0;
  border-radius: var(--pi-r-sm);
  border: 1px solid var(--pi-ring);
  background: var(--pi-yuzey-2);
  color: var(--pi-marka);
  overflow: hidden;
}
.pi-hero__logo img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.pi-hero__logo svg { width: 38px; height: 38px; }

.pi-hero__kimlik .pi-hero__baslik { margin: 0; }
.pi-hero__kimlik .pi-hero__lead { margin: 6px 0 0; }

/* Çipler: sürüm, lisans, dil gibi ölçülmüş değerler. */
.pi-hero__cipler {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pi-u2);
  margin: var(--pi-u4) 0 0;
  padding: 0;
  list-style: none;
}
.pi-hero__cip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--pi-ring);
  border-radius: 999px;
  background: var(--pi-yuzey-2);
  font-size: 0.8125rem;
  color: var(--pi-metin-2);
}
.pi-hero__cip svg { width: 14px; height: 14px; color: var(--pi-marka); flex-shrink: 0; }

.pi-hero__eylem { display: flex; flex-wrap: wrap; gap: var(--pi-u2); margin-top: var(--pi-u4); }

.pi-hero__dg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--pi-ring-2);
  border-radius: 999px;
  background: var(--pi-yuzey-2);
  color: var(--pi-metin);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color var(--pi-gecis), background var(--pi-gecis);
}
.pi-hero__dg:hover { border-color: var(--pi-marka); background: var(--pi-marka-yum); color: var(--pi-marka); }
.pi-hero__dg .pi-hero__yildiz { color: var(--pi-yildiz); width: 16px; height: 16px; }
.pi-hero__dg strong { font-variant-numeric: tabular-nums; }

/* ---------------- Hero kategori rayı ----------------
   Sağ taraf boştu. Ana sayfadaki kategori menüsünün karşılığı: okur
   "başka ne var" sorusunu sayfayı terk etmeden cevaplıyor. */
.pi-hero__ray {
  border: 1px solid var(--pi-ring);
  border-radius: var(--pi-r);
  background: var(--pi-yuzey-2);
  overflow: hidden;
}
.pi-hero__ray-h {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 12px 16px;
  border-bottom: 1px solid var(--pi-ring);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--pi-metin-2);
}
.pi-hero__ray-h svg { width: 15px; height: 15px; color: var(--pi-marka); }
.pi-hero__ray-l { margin: 0; padding: 6px; list-style: none; max-height: 340px; overflow-y: auto; }
.pi-hero__ray-b {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--pi-r-sm);
  color: var(--pi-metin);
  font-size: 0.875rem;
  text-decoration: none;
  transition: background var(--pi-gecis), color var(--pi-gecis);
}
.pi-hero__ray-b:hover { background: var(--pi-marka-yum); color: var(--pi-marka); }
.pi-hero__ray-b[aria-current="page"] { background: var(--pi-marka); color: var(--pi-vurgu-us); font-weight: 600; }
.pi-hero__ray-b[aria-current="page"] .pi-hero__ray-s { color: rgba(255, 255, 255, 0.85); }
.pi-hero__ray-b svg { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.8; }
.pi-hero__ray-ad { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pi-hero__ray-s {
  flex-shrink: 0;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  /* --pi-metin-3 degil: rayin zemini --pi-yuzey-2 ve orada oran 4.31:1'e
     dusuyordu (olculdu). --pi-metin-2 ile 5.5:1. */
  color: var(--pi-metin-2);
}

/* Hero ile govde arasindaki bosluk.
   Kural yalnizca ".container" secicisine yaziliydi ama sablonlar ".pi-kap"
   kullaniyor: bosluk hic uygulanmiyordu ve indirme kutusu hero'nun alt
   cizgisine yapisik duruyordu (kullanici canlida bildirdi). Iki secici de
   yazili -- tema kendi sarmalini kullanirsa o da calissin. */
.pi-pano > .container,
.pi-tekil > .container,
.pi-pano > .pi-kap,
.pi-tekil > .pi-kap { padding-top: var(--pi-u5); }

.pi-modul { margin-bottom: clamp(40px, 6vw, 64px); }

.pi-modul__ust {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pi-u3);
  margin-bottom: var(--pi-u5);
}

.pi-modul__baslik {
  margin: 0;
  font-family: var(--pi-display);
  font-weight: 600;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  letter-spacing: -0.015em;
  line-height: 1.2;
}

/* Başlığın solundaki ince marka çubuğu: bölüm sınırını çizgi çekmeden belli eder. */
.pi-modul__baslik::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 0.85em;
  margin-right: 12px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--pi-marka-2), var(--pi-marka));
  vertical-align: -0.06em;
}

.pi-modul__tumu {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--pi-marka);
  background: var(--pi-marka-yum);
  transition: background var(--pi-gecis), transform var(--pi-gecis);
}

.pi-modul__tumu:hover { background: rgba(29, 78, 216, 0.16); color: var(--pi-marka); transform: translateX(2px); }
.pi-modul__tumu i { font-size: 0.78em; }

.pi-bos {
  margin: 0;
  padding: var(--pi-u6);
  border-radius: var(--pi-r-lg);
  background: var(--pi-yuzey);
  box-shadow: inset 0 0 0 1px var(--pi-ring);
  color: var(--pi-metin-2);
  text-align: center;
}

/* ============================================================
   KATEGORİLER — bento: ilk kart geniş, gerisi kompakt
   ============================================================ */
.pi-kategoriler {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: var(--pi-u3);
}

.pi-kategori {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--pi-u3);
  padding: var(--pi-u4);
  border-radius: var(--pi-r-lg);
  background: var(--pi-yuzey);
  box-shadow: inset 0 0 0 1px var(--pi-ring), var(--pi-golge-1);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform var(--pi-gecis), box-shadow var(--pi-gecis);
}

.pi-kategori::after {
  content: "";
  position: absolute;
  inset: auto -30% -60% auto;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: var(--pi-marka-yum);
  opacity: 0;
  transition: opacity var(--pi-gecis);
}

.pi-kategori:hover {
  color: inherit;
  transform: translateY(-3px);
  box-shadow: inset 0 0 0 1px rgba(29, 78, 216, 0.35), var(--pi-golge-2);
}

.pi-kategori:hover::after { opacity: 1; }

.pi-kategori__ikon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: linear-gradient(150deg, var(--pi-marka-2), var(--pi-marka));
  color: #fff;
  box-shadow: 0 6px 14px -6px rgba(29, 78, 216, 0.75);
}

.pi-kategori__govde { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.pi-kategori__ad {
  font-family: var(--pi-display);
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1.25;
}

.pi-kategori__sayi {
  font-size: 0.8rem;
  color: var(--pi-metin-3);
  font-variant-numeric: tabular-nums;
}

.pi-ikon { display: block; }

/* ============================================================
   PROGRAM KARTI — bento ızgara
   ============================================================ */
.pi-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: var(--pi-u3);
}

/* Öne çıkan kayıt iki sütun kaplar: ritim buradan doğuyor. */
.pi-izgara--bento > .pi-kart:first-child { grid-column: span 2; }

@media (max-width: 719px) {
  .pi-izgara--bento > .pi-kart:first-child { grid-column: span 1; }
}

/* Esit yukseklik zaten var: izgara ogeleri stretch oluyor ve
   .pi-kart__bag height:100% aliyor. Ek bir flex katmani gerekmiyor. */
.pi-kart { min-width: 0; }

/* KART: UC SATIR.
   Once uc SUTUNDU (ikon | metin | indirme) ve ucu de dikey ortaliydi. Orta
   sutun uzun oldugu icin ikon ve dugme havada kaliyor, her kartta baska
   yukseklikte duruyordu. Satir duzeninde ikon basligin yanina, indirme de
   kartin dibine sabitleniyor; kartlar yan yana geldiginde dip satirlari
   ayni hizada. */
.pi-kart__bag {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--pi-u3);
  height: 100%;
  padding: var(--pi-u4);
  border-radius: var(--pi-r);
  background: var(--pi-yuzey);
  box-shadow: inset 0 0 0 1px var(--pi-ring);
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--pi-gecis), transform var(--pi-gecis);
}

.pi-kart__bag:hover {
  color: inherit;
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px var(--pi-marka), var(--pi-golge-1);
}
.pi-kart__bag:active { transform: none; }
.pi-kart__bag:focus-visible {
  outline: 2px solid var(--pi-marka);
  outline-offset: 2px;
}

/* --- ust satir: ikon + kimlik --- */
.pi-kart__ust {
  display: flex;
  align-items: flex-start;
  gap: var(--pi-u3);
  min-width: 0;
}

.pi-kart__ikon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: var(--pi-r-sm);
  background: var(--pi-yuzey-2);
  box-shadow: inset 0 0 0 1px var(--pi-ring);
  overflow: hidden;
}
.pi-kart__ikon img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.pi-ikon--kart { width: 24px; height: 24px; color: var(--pi-marka); }

.pi-kart__kimlik { min-width: 0; display: flex; flex-direction: column; gap: 3px; }

.pi-kart__ad {
  /* Etiket <span> ya da <h2> olabiliyor (kart.php 'etiket' argumani);
     baslik etiketinde tarayicinin kendi kenar boslugu ve yazi boyu
     gelmesin. */
  margin: 0;
  font-size: 1rem;
  font-family: var(--pi-display);
  font-weight: 650;
  font-size: 1rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--pi-metin);
  /* Uzun adlar iki satirda kalsin: uc satira tasan bir ad kartin ritmini
     bozuyordu. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

/* Olcu satiri: uretici, surum, boyut. Sayilar tabular -- kartlar yan yana
   dizilince rakamlar ziplamiyor. */
.pi-kart__satir {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px var(--pi-u2);
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--pi-metin-3);
  font-variant-numeric: tabular-nums;
}
/* Ayirac ::after ile ONCEKI ogeye bagli; ::before olsaydi satir sarilinca
   yeni satirin basinda yetim kalirdi. */
.pi-kart__satir > span:not(:last-child)::after {
  content: "·";
  margin-left: var(--pi-u2);
  opacity: 0.5;
}
.pi-kart__uretici { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 14ch; }

/* --- ozet: iki satir --- */
.pi-kart__ozet {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--pi-metin-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- dip satiri: rozetler solda, puan + indirme sagda ---
   margin-top:auto ile kartin dibine yapisiyor: kartlarin yuksekligi farkli
   olsa da dip satirlari ayni hizada kaliyor. */
.pi-kart__dip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pi-u2);
  margin-top: auto;
  padding-top: var(--pi-u3);
  border-top: 1px solid var(--pi-ring);
}

.pi-kart__rozetler {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.pi-kart__sag { display: flex; align-items: center; gap: var(--pi-u2); flex-shrink: 0; }

.pi-kart__indir {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--pi-r-sm);
  background: var(--pi-yuzey-2);
  color: var(--pi-metin-2);
  transition: background var(--pi-gecis), color var(--pi-gecis);
}
.pi-kart__bag:hover .pi-kart__indir {
  background: var(--pi-marka);
  color: var(--pi-vurgu-us);
}

/* One cikan kart (bento): genis sutunda ust satir yatay yayiliyor. */
.pi-izgara--bento > .pi-kart:first-child .pi-kart__bag { padding: var(--pi-u5); }
.pi-izgara--bento > .pi-kart:first-child .pi-kart__ikon { width: 64px; height: 64px; }
.pi-izgara--bento > .pi-kart:first-child .pi-kart__ad { font-size: 1.2rem; }
.pi-izgara--bento > .pi-kart:first-child .pi-kart__ozet { -webkit-line-clamp: 3; }

/* Ozet kirpma .pi-kart__ozet'te; burada ayrica tanimlanmasi gereksizdi. */

/* ============================================================
   ROZETLER
   ============================================================ */
.pi-rozet {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 8px;
  font-size: 0.735rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.55;
  white-space: nowrap;
}

.pi-rozet--iyi   { background: var(--pi-guven-yum); color: var(--pi-guven); }
.pi-rozet--uyari { background: var(--pi-uyari-yum); color: var(--pi-uyari); }
.pi-rozet--notr  { background: var(--pi-yuzey-3); color: var(--pi-metin-2); }

.pi-puan {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--pi-yildiz);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   İNDİRME KUTUSU — iki blok
   Önceki sürüm dört yatay şerit üst üste yığıyordu (koyu bant, yeşil güvence
   şeridi, diğer sürümler, söz metni) ve sayfada gereksiz yer kaplıyordu.
   Şimdi: koyu kart (kimlik + buton + güvence bir arada) ve ince alt satır.
   ============================================================ */
.pi-indirme {
  margin-bottom: var(--pi-u5);
  border-radius: var(--pi-r-xl);
  background: var(--pi-yuzey);
  box-shadow: inset 0 0 0 1px var(--pi-ring), var(--pi-golge-2);
  overflow: hidden;
}

.pi-indirme__ana {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--pi-u4);
  padding: var(--pi-u5);
  background: var(--pi-cta);
  color: var(--pi-cta-us);
}

.pi-indirme__sol { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 300px; }

.pi-indirme__etiket {
  font-family: var(--pi-display);
  font-weight: 700;
  font-size: 1.12rem;
  line-height: 1.25;
  color: #fff;
}

.pi-indirme__olcu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pi-u3);
  font-size: 0.88rem;
  color: var(--pi-cta-us-2);
  font-variant-numeric: tabular-nums;
}

.pi-indirme__olcu strong { color: #fff; font-weight: 600; font-size: 1.02rem; }

/* Asıl eylem: sayfadaki tek yeşil ve en büyük öğe.

   SECICI NEDEN IKI SINIF: temel .pi-dg kurali bu dosyada DAHA SONRA (buton
   bolumunde) tanimli ve tek sinif oldugu icin ayni ozgullukte kaliyor —
   min-height, font-size, padding ve font-weight degerlerini sessizce geri
   aliyordu. Olculdu: buton 72px yerine 38px, 1.3rem yerine 0.86rem
   basiliyordu. .pi-indirme ile ozgullugu yukseltmek sirali baglilik
   kurmadan cozer. */
.pi-indirme .pi-dg--dev {
  display: inline-flex;
  /* Dar ekranda width:100% aliyor; content-box ile 64px yan dolgu kartin
     disina tasiyordu (375px'te buton 368px, kart 336px). Bilesen temanin
     genel sifirlamasina bel baglamasin. */
  box-sizing: border-box;
  align-items: center;
  gap: var(--pi-u3);
  flex: 0 0 auto;
  min-height: 72px;
  padding: 0 var(--pi-u6);
  border-radius: 16px;
  /* Beyaz metin icin KOYU yesil sart. Onceki #22c55e -> #15a34a gradyaninda
     beyaz 2.28 kontrast veriyordu (WCAG AA 4.5 istiyor, buton yazisi 16px
     kalin = normal metin sayiliyor). Bu gradyanda en acik nokta 5.02. */
  background: linear-gradient(180deg, #15803d, #0f6a32);
  color: #fff;
  font-family: var(--pi-display);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  box-shadow: 0 14px 34px -12px rgba(21, 128, 61, 0.95);
  transition: filter var(--pi-gecis), transform var(--pi-gecis);
}

.pi-indirme .pi-dg--dev i { font-size: 1.15rem; }
.pi-indirme .pi-dg--dev:hover { color: #fff; filter: brightness(1.08); transform: translateY(-1px); }
.pi-indirme .pi-dg--dev:active { transform: scale(0.98); }
.pi-indirme .pi-dg--dev small { display: block; font-size: 0.8rem; font-weight: 600; opacity: 0.75; }

/* ---------- güvence şeridi ----------
   Hash, VirusTotal, doğrulama tarihi ve üretici bağlantısı. Bir indirme
   sayfasında kullanıcının güven kurduğu yer burasıdır; kart içinde 0.8rem'lik
   bir satır olarak gözden kaçıyordu, artık butonun altında kendi şeridinde. */
.pi-guvence {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--pi-u3);
  padding: var(--pi-u4) var(--pi-u5);
  /* Koyu kartin DEVAMI. Yalniz yari saydam beyaz vermek yetmiyor: kartin
     govdesi (.pi-indirme) beyaz oldugu icin serit beyaza dusuyor ve hash
     yazisi tamamen okunmaz hale geliyordu. Alta acik bir koyu zemin sart. */
  background: var(--pi-cta-2);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.pi-guvence__olgular,
.pi-guvence__eylemler {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pi-u2) var(--pi-u3);
  width: 100%;
}

/* OLGULAR — mavi. Tiklanmaz; renk de bunu soyler, yesil yalniz eylemin rengi. */
.pi-guvence__oge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.12);
  box-shadow: inset 0 0 0 1px rgba(147, 197, 253, 0.28);
  font-size: 0.9rem;
  line-height: 1.2;
  color: #dbeafe;
  cursor: default;
}

.pi-guvence__oge i { font-size: 0.95rem; color: #93c5fd; }
.pi-guvence__ad { color: #93c5fd; }
.pi-guvence__oge strong { color: #fff; font-weight: 600; }
/* Hash rozeti KENDI zeminini ve rengini veriyor.
   Tema <code> ogesine acik gri bir zemin bastiriyor; uzerine beyaz yazi
   dusunce parmak izi okunmuyordu (kullanici canlida bildirdi). Renk ve
   zemin burada acikca veriliyor, temanin kurali gecersiz kaliyor. */
.pi-guvence__oge code {
  font-family: var(--pi-mono);
  font-size: 0.82rem;
  color: var(--pi-cta-us);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  padding: 2px 7px;
  letter-spacing: -0.01em;
}

/* Tıklanabilirler olgulardan AYRI görünür: yeşil kenarlık, ok işareti, imleç.
   Hepsi aynı rozet gibi durunca hangisine basılabileceği anlaşılmıyordu. */
/* EYLEMLER — buton gibi. Dolgulu zemin, belirgin kenarlik, 44px dokunma
   hedefi ve imlec: rozetten ayrildigi anlasilsin diye hepsi birden. */
.pi-guvence__bag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 var(--pi-u4);
  border-radius: 12px;
  background: rgba(34, 197, 94, 0.22);
  box-shadow: inset 0 0 0 1.5px rgba(74, 222, 128, 0.65);
  color: #dcfce7;
  font-family: var(--pi-display);
  font-size: 0.93rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--pi-gecis), box-shadow var(--pi-gecis),
              color var(--pi-gecis), transform var(--pi-gecis);
}

.pi-guvence__bag:hover {
  background: rgba(34, 197, 94, 0.38);
  box-shadow: inset 0 0 0 1.5px #4ade80, 0 6px 18px -8px rgba(34, 197, 94, 0.8);
  color: #fff;
  transform: translateY(-1px);
}

.pi-guvence__bag:active { transform: scale(0.985); }
.pi-guvence__bag:focus-visible { outline: 2px solid #4ade80; outline-offset: 2px; }
.pi-guvence__ok { font-size: 0.72rem; opacity: 0.8; }

@media (prefers-reduced-motion: reduce) {
  .pi-guvence__bag:hover { transform: none; }
}

/* Alt satır: diğer sürümler + tek satırlık söz, yan yana. */
.pi-indirme__alt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--pi-u2) var(--pi-u4);
  padding: var(--pi-u2) var(--pi-u5);
  background: var(--pi-yuzey-2);
}

/* Tam genislik: onceden flex:0 0 auto ile daralip kartin solunda kaliyordu,
   sagi bos duruyordu. */
.pi-diger { flex: 1 1 100%; min-width: 0; }

.pi-diger > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--pi-u2) 0;
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--pi-marka);
  cursor: pointer;
  list-style: none;
}

.pi-diger > summary::-webkit-details-marker { display: none; }
.pi-diger > summary:hover { text-decoration: underline; }
.pi-diger > summary i { transition: transform var(--pi-gecis); }
.pi-diger[open] > summary i { transform: rotate(180deg); }

.pi-diger__adet {
  padding: 0 7px;
  border-radius: 999px;
  background: var(--pi-marka-yum);
  font-size: 0.74rem;
}

.pi-diger__liste {
  margin: 0 0 var(--pi-u2);
  padding: 0;
  list-style: none;
  width: 100%;
}

/* Kimlik solda, indirme butonu SAGDA — ana butonla ayni hizada okunuyor.
   Tam genislikte alt buton denendi, kart hantallasiyordu. */
.pi-diger__liste li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--pi-u3);
  padding: var(--pi-u4);
  margin-top: var(--pi-u3);
  border-radius: var(--pi-r);
  background: var(--pi-yuzey);
  box-shadow: inset 0 0 0 1px var(--pi-ring), var(--pi-golge-1);
  font-size: 0.88rem;
}

.pi-diger__kimlik { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pi-diger__ad { font-weight: 700; font-size: 0.98rem; color: var(--pi-metin); }

.pi-diger__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pi-u1) var(--pi-u3);
  font-size: 0.82rem;
  color: var(--pi-metin-3);
}

.pi-diger__boyut { color: var(--pi-metin-3); font-variant-numeric: tabular-nums; }
.pi-diger__hash { font-family: var(--pi-mono); font-size: 0.76rem; color: var(--pi-metin-2); }

/* Ana butonun kucuk kardesi: AYNI dolgulu yesil, sadece olcusu kucuk.
   Cerceveli/dolgusuz hali "ikincil bir sey" gibi duruyordu; oysa bu da
   dogrudan indirme — ayni eylem, farkli varyant. */
.pi-diger__indir {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pi-u2);
  flex: 0 0 auto;
  box-sizing: border-box;
  min-height: 48px;
  padding: 0 var(--pi-u5);
  border-radius: 12px;
  /* Beyaz metin icin KOYU yesil sart. Onceki #22c55e -> #15a34a gradyaninda
     beyaz 2.28 kontrast veriyordu (WCAG AA 4.5 istiyor, buton yazisi 16px
     kalin = normal metin sayiliyor). Bu gradyanda en acik nokta 5.02. */
  background: linear-gradient(180deg, #15803d, #0f6a32);
  color: #fff;
  font-family: var(--pi-display);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  box-shadow: 0 8px 20px -10px rgba(21, 128, 61, 0.9);
  transition: filter var(--pi-gecis), transform var(--pi-gecis);
}

.pi-diger__indir:hover { color: #fff; filter: brightness(1.08); transform: translateY(-1px); }
.pi-diger__indir:active { transform: scale(0.98); }
.pi-diger__indir:focus-visible { outline: 2px solid var(--pi-guven); outline-offset: 2px; }

.pi-diger__vt {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--pi-guven);
  text-decoration: none;
}
.pi-diger__vt:hover { text-decoration: underline; }
.pi-diger__vt { font-size: 0.79rem; color: var(--pi-guven); text-decoration: none; }
.pi-diger__vt:hover { text-decoration: underline; color: var(--pi-guven); }

.pi-dg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pi-u2);
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 var(--pi-u4);
  border-radius: 10px;
  font-weight: 650;
  font-size: 0.86rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--pi-gecis), transform var(--pi-gecis);
}

.pi-dg--ikincil {
  background: var(--pi-yuzey);
  color: var(--pi-marka);
  box-shadow: inset 0 0 0 1px var(--pi-ring-2);
}

.pi-dg--ikincil:hover { background: var(--pi-marka-yum); color: var(--pi-marka); }
.pi-dg:active { transform: scale(0.97); }

.pi-gizli {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.pi-soz {
  display: inline-flex;
  align-items: center;
  gap: var(--pi-u2);
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--pi-metin-3);
}

.pi-soz i { color: var(--pi-guven); flex: 0 0 auto; }

/* ============================================================
   YAN SUTUN — programa ozel (blog sidebar'i degil)
   ============================================================ */
.pi-yan { display: flex; flex-direction: column; gap: var(--pi-u4); }

.pi-yan__kutu {
  padding: var(--pi-u5);
  border-radius: var(--pi-r-lg);
  background: var(--pi-yuzey);
  box-shadow: inset 0 0 0 1px var(--pi-ring), var(--pi-golge-1);
}

/* Yan sutun basliklari H2 DEGIL: sayfa mobilyasi, icerik degil. Olculdu --
   12 H2'nin 4'u yan sutun ve yorum bolumundendi, icerik ana hatti okunmaz
   haldeydi. Gorunum ayni kaliyor, yalniz belge ana hattindan cikiyorlar. */
p.pi-yan__baslik { margin: 0 0 var(--pi-u3); }

.pi-yan__baslik {
  margin: 0 0 var(--pi-u3);
  padding-bottom: var(--pi-u2);
  border-bottom: 2px solid var(--pi-ring);
  font-family: var(--pi-display);
  font-weight: 600;
  font-size: 1.05rem;
}

.pi-yan__liste, .pi-yan__programlar, .pi-yan__kural { margin: 0; padding: 0; list-style: none; }

.pi-yan__liste a {
  display: flex;
  align-items: center;
  gap: var(--pi-u3);
  padding: var(--pi-u2) 0;
  text-decoration: none;
  color: var(--pi-metin);
  font-size: 0.92rem;
  transition: color var(--pi-gecis);
}

.pi-yan__liste a:hover { color: var(--pi-marka); }

.pi-yan__ikon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--pi-marka-yum);
  color: var(--pi-marka);
}

.pi-ikon--yan { width: 17px; height: 17px; }
.pi-yan__ad { flex: 1 1 auto; min-width: 0; }

.pi-yan__sayi {
  flex: 0 0 auto;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--pi-yuzey-2);
  color: var(--pi-metin-3);
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
}

.pi-yan__tumu {
  display: inline-block;
  margin-top: var(--pi-u3);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--pi-marka);
  text-decoration: none;
}

.pi-yan__tumu:hover { text-decoration: underline; color: var(--pi-marka); }

.pi-yan__programlar a {
  display: flex;
  align-items: center;
  gap: var(--pi-u3);
  padding: var(--pi-u2) 0;
  text-decoration: none;
  color: inherit;
}

.pi-yan__kucuk {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--pi-yuzey-2);
  overflow: hidden;
}

.pi-yan__kucuk img { width: 40px; height: 40px; object-fit: contain; }
.pi-yan__govde { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pi-yan__programlar .pi-yan__ad { font-weight: 600; font-size: 0.9rem; line-height: 1.3; }
.pi-yan__meta { font-size: 0.78rem; color: var(--pi-metin-3); font-variant-numeric: tabular-nums; }
.pi-yan__programlar a:hover .pi-yan__ad { color: var(--pi-marka); }

.pi-yan__kutu--guven { background: var(--pi-guven-yum); box-shadow: inset 0 0 0 1px rgba(21, 128, 61, 0.18); }
.pi-yan__kutu--guven .pi-yan__baslik { border-bottom-color: rgba(21, 128, 61, 0.22); color: var(--pi-guven); }

.pi-yan__kural li {
  display: flex;
  align-items: flex-start;
  gap: var(--pi-u2);
  padding: 6px 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--pi-guven);
}

.pi-yan__kural i { margin-top: 3px; flex: 0 0 auto; }

/* ============================================================
   TEKİL BÖLÜMLER
   ============================================================ */
.pi-bolum { margin-bottom: var(--pi-u6); }

/* Baslik GIBI duran ama baslik OLMAYAN etiket.
   Komut satiri bolumu bunu kullaniyor: indirme alaninin devami oldugu icin
   baslik agacinda yer tutmamali (bkz. single-program.php). Bicim ayni,
   yalnizca bir tik kucuk ve biraz daha sessiz. */
.pi-bolum__etiket {
  display: flex;
  align-items: center;
  gap: var(--pi-u2);
  margin: 0 0 var(--pi-u3);
  font-family: var(--pi-display);
  font-weight: 600;
  font-size: clamp(1.02rem, 1.8vw, 1.15rem);
  letter-spacing: -0.015em;
  color: var(--pi-metin);
}

.pi-bolum__baslik {
  display: flex;
  align-items: center;
  gap: var(--pi-u2);
  margin: 0 0 var(--pi-u4);
  font-family: var(--pi-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  letter-spacing: -0.015em;
}

/* ------------------------------------------------------------
   YAZI GOVDESI
   Govde duz HTML (h2/h3/p/ul) — yazar sussuz yazar, bicim BURADA verilir.
   Programa ozel elde HTML yazmak surdurulemez; bir programin gorunumu
   degistiginde 400 kaydi elden gecirmek gerekirdi.
   ------------------------------------------------------------ */
.pi-icerik { font-size: 1.04rem; line-height: 1.78; color: var(--pi-metin); }

.pi-icerik > *:first-child { margin-top: 0; }
.pi-icerik > *:last-child { margin-bottom: 0; }

/* Giris paragrafi: govdenin ilk paragrafi ozet gorevi gorur. */
.pi-icerik > p:first-of-type {
  font-size: 1.14rem;
  line-height: 1.7;
  color: var(--pi-metin-2);
  padding-left: var(--pi-u4);
  border-left: 3px solid var(--pi-marka-2);
}

.pi-icerik h2 {
  margin: var(--pi-u7) 0 var(--pi-u4);
  padding-bottom: var(--pi-u2);
  border-bottom: 2px solid var(--pi-ring);
  font-family: var(--pi-display);
  font-weight: 600;
  font-size: clamp(1.18rem, 2.2vw, 1.42rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--pi-metin);
}

.pi-icerik h3 {
  margin: var(--pi-u5) 0 var(--pi-u3);
  font-family: var(--pi-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--pi-metin);
}

.pi-icerik p { margin: 0 0 var(--pi-u4); }

/* Listeler: tema blog CSS'i madde imini kaldiriyordu, geri veriliyor.
   Isaret olarak nokta yerine marka renkli kare — kart dilimiyle tutarli. */
.pi-icerik ul,
.pi-icerik ol {
  margin: 0 0 var(--pi-u4);
  padding: 0;
  list-style: none;
}

.pi-icerik ul > li,
.pi-icerik ol > li {
  position: relative;
  padding: 6px 0 6px var(--pi-u6);
  line-height: 1.7;
}

.pi-icerik ul > li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 15px;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--pi-marka-2);
}

.pi-icerik ol { counter-reset: pi-sira; }

.pi-icerik ol > li::before {
  counter-increment: pi-sira;
  content: counter(pi-sira);
  position: absolute;
  left: 0;
  top: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--pi-marka-yum);
  color: var(--pi-marka);
  font-size: 0.76rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* "<strong>Terim.</strong> aciklama" kalibi: terim one ciksin. */
.pi-icerik li > strong:first-child { color: var(--pi-metin); font-weight: 650; }

.pi-icerik a {
  color: var(--pi-marka);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pi-icerik a:hover { color: var(--pi-marka-2); }

.pi-icerik code {
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--pi-yuzey-3);
  font-family: var(--pi-mono);
  font-size: 0.86em;
  color: var(--pi-metin);
}

.pi-icerik kbd {
  display: inline-block;
  min-width: 22px;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--pi-yuzey);
  box-shadow: inset 0 0 0 1px var(--pi-ring-2), 0 2px 0 var(--pi-ring-2);
  font-family: var(--pi-display);
  font-size: 0.8em;
  font-weight: 600;
  text-align: center;
  color: var(--pi-metin);
}

.pi-icerik blockquote {
  margin: 0 0 var(--pi-u4);
  padding: var(--pi-u4) var(--pi-u5);
  border-radius: var(--pi-r);
  border-left: 4px solid var(--pi-marka-2);
  background: var(--pi-yuzey);
  box-shadow: inset 0 0 0 1px var(--pi-ring);
  color: var(--pi-metin-2);
}

.pi-icerik blockquote p:last-child { margin-bottom: 0; }

.pi-icerik table {
  width: 100%;
  margin: 0 0 var(--pi-u4);
  border-collapse: collapse;
  border-radius: var(--pi-r);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--pi-ring);
  font-size: 0.94rem;
}

.pi-icerik th,
.pi-icerik td { padding: var(--pi-u3) var(--pi-u4); text-align: left; }
.pi-icerik thead th { background: var(--pi-yuzey-2); font-weight: 650; }
.pi-icerik tbody tr { border-top: 1px solid var(--pi-ring); }

/* SSS listesi: son h2'den sonraki liste soru-cevap kaliginda yazilir. */
.pi-icerik h2 + ul > li { padding-top: 10px; padding-bottom: 10px; }

.pi-icerik img {
  max-width: 100%;
  height: auto;
  border-radius: var(--pi-r);
  box-shadow: inset 0 0 0 1px var(--pi-ring);
}

/* Editör yorumu: puan halkası + alıntı bloğu */
.pi-editor {
  padding: var(--pi-u5);
  border-radius: var(--pi-r-xl);
  background: var(--pi-yuzey);
  box-shadow: inset 0 0 0 1px var(--pi-ring), var(--pi-golge-1);
}

.pi-editor__ust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pi-u4);
  margin-bottom: var(--pi-u4);
}

.pi-editor__puan {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--pi-yuzey-2);
  box-shadow: inset 0 0 0 3px rgba(180, 83, 9, 0.28);
  font-family: var(--pi-display);
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--pi-yildiz);
  font-variant-numeric: tabular-nums;
}

.pi-editor__puan small { font-size: 0.62rem; font-weight: 600; opacity: 0.72; }

.pi-editor__kim { font-size: 0.86rem; line-height: 1.6; color: var(--pi-metin-2); }
.pi-editor__kim em { color: var(--pi-metin-3); }

.pi-editor__metin {
  padding-left: var(--pi-u4);
  border-left: 3px solid var(--pi-marka-yum);
  font-size: 1rem;
  line-height: 1.72;
}

.pi-editor__metin p:last-child { margin-bottom: 0; }

/* Kurulum uyarısı */
.pi-uyari {
  padding: var(--pi-u5);
  border-radius: var(--pi-r-xl);
  background: var(--pi-uyari-yum);
  box-shadow: inset 0 0 0 1px rgba(162, 87, 11, 0.22);
}

.pi-uyari .pi-bolum__baslik { color: var(--pi-uyari); }
.pi-uyari__metin { line-height: 1.7; }
.pi-uyari__metin p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------
   KÜNYE — bento ızgarası
   Önceki sürüm dt/dd tablosuydu ve sayfanın en altındaydı. Künye karar
   verisidir: kullanıcı indirmeden önce hangi Windows, hangi lisans, hangi dil
   olduğunu bilmek ister. Tablo dar ekranda da taşıyordu — tasarım motorunun
   kuralı: mobilde tablo yerine kart düzeni.
   ------------------------------------------------------------ */
.pi-kunye-bolum { margin-bottom: var(--pi-u6); }

.pi-kunye {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--pi-u3);
  /* dense: genis hucrenin actigi bosluga sonraki kisa hucre geri dolar.
     Olculdu (Dexpot): 5 hucreden ikisi tek basina satirda kaliyor,
     izgara delik desik gorunuyordu. */
  grid-auto-flow: row dense;
  align-items: stretch;
}

.pi-kunye__hucre {
  display: flex;
  align-items: flex-start;
  gap: var(--pi-u3);
  padding: var(--pi-u4);
  border-radius: var(--pi-r-lg);
  background: var(--pi-yuzey);
  box-shadow: inset 0 0 0 1px var(--pi-ring);
}

/* Uzun metin (sistem gereksinimleri, uzun OS listesi) icin iki sutun yeter.
   Onceden `1 / -1` ile tum satiri kapiyordu; yanindaki hucre asagi dusuyor ve
   yarim bos satirlar olusuyordu. `span 2` tek sutunlu ekranda kendiliginden
   1 sutuna kirpilir, ayri bir kural gerekmiyor. */
.pi-kunye__hucre--genis { grid-column: span 2; }

/* Cok satirli deger (sistem gereksinimleri) yine tam genislik ister. */
.pi-kunye__hucre--tam { grid-column: 1 / -1; }

/* Deger bir liste ise virgullu uzun dize yerine saran rozetler.
   "Windows 8.1, Windows 8, Windows 7, Windows Vista, Windows XP" tek satirda
   okunmuyordu; parcalara ayrilinca hem sigiyor hem taranabiliyor. */
.pi-kunye__rozetler {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.pi-kunye__rozet {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--pi-yuzey-2);
  box-shadow: inset 0 0 0 1px var(--pi-ring);
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--pi-metin);
  white-space: nowrap;
}

.pi-kunye__ikon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--pi-marka-yum);
  color: var(--pi-marka);
  font-size: 0.95rem;
}

.pi-kunye__ikon--iyi { background: var(--pi-guven-yum); color: var(--pi-guven); }
.pi-kunye__ikon--uyari { background: var(--pi-uyari-yum); color: var(--pi-uyari); }
.pi-kunye__ikon--notr { background: var(--pi-yuzey-3); color: var(--pi-metin-2); }

.pi-kunye__govde { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.pi-kunye__etiket {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pi-metin-3);
}

.pi-kunye__deger {
  font-family: var(--pi-display);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--pi-metin);
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

.pi-kunye__deger a { color: var(--pi-marka); text-decoration: none; }
.pi-kunye__deger a:hover { text-decoration: underline; color: var(--pi-marka); }

.pi-kunye__alt { font-size: 0.78rem; color: var(--pi-metin-3); font-variant-numeric: tabular-nums; }

.pi-kunye__hucre--genis .pi-kunye__deger {
  font-family: inherit;
  font-weight: 400;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* UC SUTUN, iki degil.
   auto-fill + minmax(280px) kullaniliyordu; govde sutunu ~850px oldugu
   icin ucuncu sutun bosluklarla birlikte sigmiyor ve izgara pratikte
   ikili cikiyordu. Kareler o yuzden gereginden buyuk duruyordu.
   Sutun sayisi artik ekrana gore acik acik yaziliyor. */
.pi-ekranlar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pi-u3);
}
@media (min-width: 768px) {
  .pi-ekranlar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 479px) {
  .pi-ekranlar { grid-template-columns: 1fr; }
}

 /* ASIL CERCEVE BURADA. Onceden yalniz gorselin uzerinde %9 saydamlikta 1px
    halka vardi; ekran goruntulerinin cogu beyaz oldugu icin acik zeminde
    hicbir sinir gorunmuyordu, resimler sayfada "yuzuyordu". Simdi gorsel,
    dolgusu ve kenarligi olan bir kartin icinde duruyor — foto pasparturu gibi. */
/* ============================================================
   EKRAN GORUNTUSU CERCEVESI — "yuva" (Soft UI Evolution)

   PROBLEM: Ekran goruntusunun rengi onceden bilinmiyor. Beyaz dosya
   yoneticisi de gelebilir, simsiyah terminal de. Cerceveye TEK BIR RENK
   vermek imkansiz: beyaz cerceve acik gorselle, koyu cerceve koyu gorselle
   birlesiyor. Uc deneme bu yuzden basarisiz oldu.

   COZUM: Siniri RENK degil ISIK kuruyor. Gorsel, notr gri bir yuvanin icine
   gomuluyor; yuvanin ust kenarinda koyu, alt kenarinda acik ic golge var.
   Bu iki hat gorselin renginden BAGIMSIZ olarak kenari cizer — beyaz gorselde
   koyu hat, siyah gorselde acik hat is goruyor. Fiziksel bir cukur gibi.

   Her platformda ayni calisir: yuva notr gri (#eef1f6 ailesi), yani ne
   ekranin beyaziyla ne siyahiyla ayni tonda.
   ============================================================ */
.pi-ekran-kutu {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--pi-u2);
  padding: var(--pi-u3);
  border-radius: var(--pi-r-lg);
  background: linear-gradient(180deg, #ffffff, var(--pi-yuzey-2));
  /* En distaki ince MARKA RENGI hat: kartin cerceve oldugunu soyleyen sey bu.
     Deger olculdu — %22'de hat kart zeminiyle 1.42 kontrast veriyordu ve goz
     onu kenar olarak okumuyordu. %45'te 2.16; ince bir hat icin dogru bant
     bu: secilir ama gorseli bastirmaz. */
  box-shadow:
    inset 0 0 0 1px rgba(29, 78, 216, 0.45),
    0 1px 2px rgba(11, 18, 32, 0.05),
    0 12px 28px -14px rgba(11, 18, 32, 0.22);
  transition: box-shadow var(--pi-gecis), transform var(--pi-gecis);
}

.pi-ekran-kutu:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 0 0 1px rgba(59, 130, 246, 0.45),
    0 2px 4px rgba(11, 18, 32, 0.06),
    0 22px 44px -18px rgba(29, 78, 216, 0.38);
}

@media (prefers-reduced-motion: reduce) {
  .pi-ekran-kutu:hover { transform: none; }
}

.pi-ekran-ac {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: var(--pi-r-sm);
  /* Notr yuva zemini: gorsel yuklenene kadar burasi gorunuyor ve
     gorselin kendisiyle asla ayni ton olmuyor. */
  background: var(--pi-yuzey-3);
  /* UC KATMANLI IC GOLGE — cercevenin butun isi burada:
       1) ustte koyu hat  -> ACIK gorsellerde kenari cizer
       2) altta acik hat  -> KOYU gorsellerde kenari cizer
       3) notr ince halka -> orta tonlu gorsellerde devreye girer
     Ucu birden oldugu icin gorselin rengi ne olursa olsun bir sinir var. */
  box-shadow:
    inset 0 2px 4px rgba(11, 18, 32, 0.28),
    inset 0 -1px 0 rgba(255, 255, 255, 0.65),
    inset 0 0 0 1px rgba(100, 116, 139, 0.30);
  cursor: zoom-in;
  transition: box-shadow var(--pi-gecis);
}

.pi-ekran-ac:focus-visible { outline: 2px solid var(--pi-marka); outline-offset: 3px; }

/* Uzerine gelince yuva biraz derinlesir: tiklanabilir oldugu hissedilsin. */
.pi-ekran-kutu:hover .pi-ekran-ac {
  box-shadow:
    inset 0 3px 6px rgba(11, 18, 32, 0.34),
    inset 0 -1px 0 rgba(255, 255, 255, 0.7),
    inset 0 0 0 1px rgba(29, 78, 216, 0.35);
}

.pi-ekran {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* Buyutme isareti: tiklanabilir oldugu gorunsun. */
.pi-ekran__buyut {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(12, 20, 36, 0.72);
  color: #fff;
  font-size: 0.82rem;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--pi-gecis), transform var(--pi-gecis);
}

.pi-ekran-ac:hover .pi-ekran__buyut,
.pi-ekran-ac:focus-visible .pi-ekran__buyut { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .pi-ekran-ac:hover { transform: none; }
  .pi-ekran__buyut { transition: none; }
}

/* ---------- büyütme katmanı ---------- */
.pi-kilit { overflow: hidden; }

.pi-buyut {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--pi-u3);
  padding: clamp(12px, 4vw, 48px);
  background: rgba(6, 10, 20, 0.92);
  backdrop-filter: blur(4px);
}

.pi-buyut[hidden] { display: none; }

.pi-buyut__cerceve {
  margin: 0;
  max-width: min(1200px, 92vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  gap: var(--pi-u3);
}

.pi-buyut__resim {
  max-width: 100%;
  max-height: 78vh;
  border-radius: var(--pi-r);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8);
  object-fit: contain;
}

.pi-buyut__yazi {
  text-align: center;
  font-size: 0.84rem;
  line-height: 1.5;
  color: #97a5c4;
}

.pi-buyut__kapat,
.pi-buyut__ok {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--pi-gecis);
}

.pi-buyut__kapat:hover,
.pi-buyut__ok:hover { background: rgba(255, 255, 255, 0.22); }
.pi-buyut__kapat:focus-visible,
.pi-buyut__ok:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; }

.pi-buyut__kapat {
  position: absolute;
  top: clamp(12px, 3vw, 28px);
  right: clamp(12px, 3vw, 28px);
  font-size: 2rem;
}

@media (max-width: 40rem) {
  .pi-buyut__ok { width: 40px; height: 40px; font-size: 1.3rem; }
}

/* Görsel künyesi: lisans gereği görünür olmalı, ama içeriği bastırmamalı. */
/* Kunye: lisans zorunlu ama gorseli bastirmiyor. Kartin icinde, yuvanin
   hemen altinda. */
.pi-ekran__kunye {
  padding: 0 2px;
  font-size: 0.73rem;
  line-height: 1.45;
  color: var(--pi-metin-3);
}

.pi-ekran__kunye a { color: inherit; text-decoration: none; }
.pi-ekran__kunye a:hover {
  color: var(--pi-metin-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Buyutme rozeti: gorsel acik da olsa koyu da olsa okunsun diye koyu zemin
   + beyaz ikon + ince acik hat. Ayni gerekce, ayni cozum. */
.pi-ekran__buyut {
  background: rgba(9, 14, 26, 0.86);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.32), 0 4px 12px -4px rgba(0, 0, 0, 0.5);
  color: #fff;
}

/* ============================================================
   GİRİŞ ANİMASYONU — kartlar sırayla belirir (30ms kademe)
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .pi-izgara > .pi-kart,
  .pi-kategoriler > .pi-kategori {
    animation: pi-bel 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .pi-izgara > .pi-kart:nth-child(1),  .pi-kategoriler > .pi-kategori:nth-child(1)  { animation-delay: 0ms; }
  .pi-izgara > .pi-kart:nth-child(2),  .pi-kategoriler > .pi-kategori:nth-child(2)  { animation-delay: 35ms; }
  .pi-izgara > .pi-kart:nth-child(3),  .pi-kategoriler > .pi-kategori:nth-child(3)  { animation-delay: 70ms; }
  .pi-izgara > .pi-kart:nth-child(4),  .pi-kategoriler > .pi-kategori:nth-child(4)  { animation-delay: 105ms; }
  .pi-izgara > .pi-kart:nth-child(5),  .pi-kategoriler > .pi-kategori:nth-child(5)  { animation-delay: 140ms; }
  .pi-izgara > .pi-kart:nth-child(6),  .pi-kategoriler > .pi-kategori:nth-child(6)  { animation-delay: 175ms; }
  .pi-izgara > .pi-kart:nth-child(n+7), .pi-kategoriler > .pi-kategori:nth-child(n+7) { animation-delay: 200ms; }
}

@keyframes pi-bel {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   DAR EKRAN
   ============================================================ */
@media (max-width: 575px) {
  /* Kategoriler mobilde iki sutun, ikon ustte: 12 kategori 12 satir yerine 6 satir.
     Kart yine 44px'ten buyuk bir dokunma alani sunar. */
  .pi-kategoriler { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pi-u2); }

  .pi-kategori {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--pi-u2);
    padding: var(--pi-u3);
    border-radius: var(--pi-r);
  }

  .pi-kategori__ikon { width: 40px; height: 40px; border-radius: 12px; }
  .pi-kategori__ad { font-size: 0.92rem; }
  .pi-kategori__sayi { font-size: 0.75rem; }

  .pi-kart__bag { grid-template-columns: 48px minmax(0, 1fr); padding: var(--pi-u3); }
  .pi-kart__ikon { width: 48px; height: 48px; }
  .pi-kart__ikon img { width: 48px; height: 48px; }
  .pi-kart__indir { display: none; }

  .pi-izgara--bento > .pi-kart:first-child .pi-kart__bag { grid-template-columns: 56px minmax(0, 1fr); padding: var(--pi-u4); }
  .pi-izgara--bento > .pi-kart:first-child .pi-kart__ikon { width: 56px; height: 56px; }
  .pi-izgara--bento > .pi-kart:first-child .pi-kart__ad { font-size: 1.12rem; }

  .pi-indirme__ana { padding: var(--pi-u4); }
  .pi-indirme .pi-dg--dev { width: 100%; justify-content: center; min-height: 64px; font-size: 1.18rem; }
  .pi-guvence { padding: var(--pi-u3) var(--pi-u4); }
  .pi-guvence__oge { font-size: 0.85rem; padding: 7px 12px; }
  /* Dar ekranda hash rozeti tek basina satiri doldurmasin: kisaltma zaten var,
     tasmayi da engelliyoruz. */
  .pi-guvence__oge code { overflow: hidden; text-overflow: ellipsis; }
  .pi-indirme__alt { padding: var(--pi-u2) var(--pi-u4); }

  /* Dar ekranda yan yana sigmiyor: buton alta gecip tam genislige yayilsin. */
  .pi-diger__liste li { flex-direction: column; align-items: stretch; }
  .pi-diger__indir { width: 100%; }
  .pi-diger__meta { row-gap: 6px; }
  .pi-guvence__bag { flex: 1 1 100%; justify-content: center; }
  .pi-diger__liste .pi-dg { width: 100%; }
  .pi-kunye { grid-template-columns: minmax(0, 1fr); }
  .pi-editor, .pi-uyari { padding: var(--pi-u4); }
}

@media (prefers-reduced-motion: reduce) {
  .pi-kategori,
  .pi-kart__bag,
  .pi-kart__bag::before,
  .pi-modul__tumu,
  .pi-dg { transition: none; }

  .pi-kategori:hover,
  .pi-kart__bag:hover,
  .pi-kart__bag:active,
  .pi-dg:active { transform: none; }
}

/* ============================================================
   FILTRE YAN SUTUNU — liste sayfalari
   Her filtre bir baglanti: durum URL'de, JS yok, geri tusu calisiyor.
   ============================================================ */
.pi-filtre { display: flex; flex-direction: column; gap: var(--pi-u3); }

.pi-filtre__kutu {
  padding: var(--pi-u4);
  border-radius: var(--pi-r-lg);
  background: var(--pi-yuzey);
  box-shadow: inset 0 0 0 1px var(--pi-ring);
}

.pi-filtre__kutu--aktif {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pi-u3);
  background: var(--pi-marka-yum);
  box-shadow: inset 0 0 0 1px rgba(29, 78, 216, 0.25);
}

.pi-filtre__aktif-yazi { font-size: 0.85rem; font-weight: 600; color: var(--pi-marka); }

.pi-filtre__temizle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--pi-marka);
  text-decoration: none;
}

.pi-filtre__temizle:hover { text-decoration: underline; color: var(--pi-marka); }

.pi-filtre__baslik {
  margin: 0 0 var(--pi-u2);
  font-family: var(--pi-display);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  color: var(--pi-metin-3);
  text-transform: uppercase;
}

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

.pi-filtre__oge {
  display: flex;
  align-items: center;
  gap: var(--pi-u2);
  min-height: 40px;
  padding: 4px 8px;
  margin: 0 -8px;
  border-radius: 9px;
  font-size: 0.9rem;
  color: var(--pi-metin);
  text-decoration: none;
  transition: background var(--pi-gecis), color var(--pi-gecis);
}

.pi-filtre__oge:hover { background: var(--pi-yuzey-2); color: var(--pi-marka); }

.pi-filtre__oge--secili {
  background: var(--pi-marka-yum);
  color: var(--pi-marka);
  font-weight: 600;
}

.pi-filtre__oge--secili:hover { background: var(--pi-marka-yum); }

.pi-filtre__ikon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--pi-yuzey-2);
  color: var(--pi-marka);
}

.pi-filtre__oge--secili .pi-filtre__ikon { background: #fff; }

/* Kutucuk: gorsel olarak onay kutusu, teknik olarak baglanti.
   Gercek input kullanilsaydi form + JS gerekirdi. */
.pi-filtre__kutucuk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1.5px var(--pi-ring-2);
  font-size: 0.6rem;
  color: #fff;
}

.pi-filtre__kutucuk--yuvarlak { border-radius: 50%; font-size: 0.42rem; }

.pi-filtre__oge--secili .pi-filtre__kutucuk {
  background: var(--pi-marka);
  box-shadow: inset 0 0 0 1.5px var(--pi-marka);
}

.pi-filtre__ad { flex: 1 1 auto; min-width: 0; }

.pi-filtre__sayi {
  flex: 0 0 auto;
  font-size: 0.76rem;
  color: var(--pi-metin-3);
  font-variant-numeric: tabular-nums;
}

.pi-filtre__oge--secili .pi-filtre__sayi { color: var(--pi-marka); }

/* Kartta uretici adi ve isletim sistemi simgeleri */
.pi-kart__uretici {
  font-size: 0.79rem;
  color: var(--pi-metin-3);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pi-kart__os {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 2px;
  color: var(--pi-metin-3);
  font-size: 0.82rem;
}

.pi-kart__satir > .pi-kart__os::after { content: none; }

@media (max-width: 991px) {
  .pi-filtre { flex-direction: row; flex-wrap: wrap; }
  .pi-filtre__kutu { flex: 1 1 220px; }
}

/* ============================================================
   GÜNCELLEME DUYURUSU — gövdenin üstünde, gövdeden ayrı alan.

   Görsel dil bilinçli olarak "yeni/taze": bölümün geri kalanı mavi-yeşil
   üzerine kurulu, burada amber kullanılıyor çünkü mesaj bir DURUM bildirimi,
   bir eylem çağrısı değil. Kullanıcı sayfayı ikinci kez açtığında "bu değişti"
   sinyalini renkten alıyor.
   ============================================================ */
.pi-guncelleme {
  display: flex;
  flex-direction: column;
  gap: var(--pi-u2);
  margin: 0 0 var(--pi-u5);
  padding: var(--pi-u4) var(--pi-u5);
  border-radius: var(--pi-r);
  background: var(--pi-uyari-yum);
  box-shadow: inset 0 0 0 1px rgba(162, 87, 11, 0.28);
}

.pi-guncelleme__rozet {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--pi-uyari);
  color: var(--pi-vurgu-us);
  font-family: var(--pi-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.pi-guncelleme__rozet time { font-weight: 600; opacity: 0.9; }

.pi-guncelleme__metin { color: var(--pi-metin); font-size: 0.97rem; line-height: 1.7; }
.pi-guncelleme__metin p { margin: 0 0 var(--pi-u2); }
.pi-guncelleme__metin p:last-child { margin-bottom: 0; }
.pi-guncelleme__metin a { color: var(--pi-marka); font-weight: 600; }

/* Güncelleme banner'ının kaynak bağlantısı ve sürüm geçmişi listesi. */
.pi-guncelleme__kaynak {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--pi-uyari);
  text-decoration: none;
}

.pi-guncelleme__kaynak:hover { text-decoration: underline; }
.pi-guncelleme__kaynak i { font-size: 0.7rem; opacity: 0.75; }

.pi-gecmis { margin: var(--pi-u5) 0 0; }

.pi-gecmis > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: var(--pi-u2) 0;
  font-family: var(--pi-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--pi-marka);
  cursor: pointer;
  list-style: none;
}

.pi-gecmis > summary::-webkit-details-marker { display: none; }
.pi-gecmis > summary:hover { text-decoration: underline; }

.pi-gecmis__adet {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--pi-marka-yum);
  font-size: 0.76rem;
  font-weight: 600;
}

.pi-gecmis__liste {
  margin: var(--pi-u3) 0 0;
  padding: 0 0 0 var(--pi-u4);
  border-left: 2px solid var(--pi-ring-2);
  list-style: none;
  counter-reset: none;
}

.pi-gecmis__liste li { position: relative; padding: 0 0 var(--pi-u4); }

/* Zaman cizgisi noktasi: girisler bir gecmis gibi okunsun. */
.pi-gecmis__liste li::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--pi-u4) - 5px);
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--pi-marka-2);
  box-shadow: 0 0 0 3px var(--pi-zemin);
}

.pi-gecmis__ust {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--pi-u3);
  font-size: 0.95rem;
  color: var(--pi-metin);
}

.pi-gecmis__ust time { font-size: 0.82rem; color: var(--pi-metin-3); }

.pi-gecmis__ozet { margin-top: 4px; font-size: 0.92rem; line-height: 1.65; color: var(--pi-metin-2); }
.pi-gecmis__ozet p { margin: 0 0 var(--pi-u2); }
.pi-gecmis__ozet p:last-child { margin-bottom: 0; }

/* ============================================================
   KARSILASTIRMA TABLOSU

   Rakiplerde program karsilastirmasi yok; bu bolum sayfanin ayirt edici
   parcasi. Tasarim kararlari:
   - Bu sayfanin programi sutunu VURGULU: okur once kendi baktigi seyi
     bulmali, sonra digerlerine bakmali.
   - Ilk sutun (olcu adi) yapiskan: yatay kaydirirken hangi satirda
     oldugunu kaybetmiyorsun. Genis tablonun tek gercek sorunu budur.
   - Tablo kendi kutusunda kayar; sayfa govdesi yatay kaymaz.
   ============================================================ */

.pi-kiyas__giris { margin-bottom: var(--pi-u4); color: var(--pi-metin-2); }

.pi-kiyas__kaydir {
  overflow-x: auto;
  border-radius: var(--pi-r-lg);
  box-shadow: inset 0 0 0 1px var(--pi-ring);
  background: var(--pi-yuzey);
  -webkit-overflow-scrolling: touch;
}

/* Klavye ile kaydirilabilsin diye tabindex verildi; odak gorunur olmali. */
.pi-kiyas__kaydir:focus-visible {
  outline: 2px solid var(--pi-marka);
  outline-offset: 2px;
}

.pi-kiyas {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.pi-kiyas th,
.pi-kiyas td {
  padding: var(--pi-u3);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--pi-ring);
}

.pi-kiyas tbody tr:last-child th,
.pi-kiyas tbody tr:last-child td { border-bottom: 0; }

.pi-kiyas__olcu-bas,
.pi-kiyas__olcu {
  position: sticky;
  left: 0;
  z-index: 1;
  width: 30%;
  min-width: 9.5rem;
  background: var(--pi-yuzey-2);
  font-weight: 600;
  color: var(--pi-metin);
}

.pi-kiyas__olcu-bas {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pi-metin-3);
}

.pi-kiyas__aday {
  background: var(--pi-yuzey-2);
  font-weight: 600;
  line-height: 1.35;
}

.pi-kiyas__aday--bu,
.pi-kiyas__hucre--bu { background: var(--pi-marka-yum); }
/* Tonlu hucrede baglanti rengi --pi-marka ile 4.38:1'e dusuyordu
   (olculdu, gece modu). Acik ton AA'yi geciyor. */
.pi-kiyas__hucre--bu .pi-kiyas__ad a { color: var(--pi-marka-2); }

.pi-kiyas__ad { display: block; }
.pi-kiyas__ad a { color: var(--pi-marka); text-decoration: none; }
/* Kiyas hucreleri tonlu; gece modunda --pi-marka orada 4.38'e dusuyordu
   (olculdu). Acik ton hem tonlu hem duz hucrede AA'yi geciyor. */
:root.dark-mode .pi-kiyas__ad a { color: var(--pi-marka-2); }
.pi-kiyas__ad a:hover { text-decoration: underline; }

.pi-kiyas__rozet {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--pi-marka);
  color: var(--pi-vurgu-us);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.pi-kiyas__ozet {
  display: block;
  margin-top: 4px;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--pi-metin-3);
}

.pi-kiyas__yok { color: var(--pi-metin-3); }

/* Sayisal degerler sutun icinde zıplamasin. */
.pi-kiyas td { font-variant-numeric: tabular-nums; }

@media (max-width: 575.98px) {
  .pi-kiyas { font-size: 0.86rem; }
  .pi-kiyas th, .pi-kiyas td { padding: var(--pi-u2) var(--pi-u3); }
  .pi-kiyas__olcu-bas, .pi-kiyas__olcu { min-width: 8rem; }
}

/* H1 altindaki ozet. Indirme kutusundan ONCE geliyor: okurun ilk sorusu
   "bu ne?", ikincisi "nereden indiririm?". Punto govde metninden buyuk,
   cunku bu bir giris cumlesi degil, sayfanin ozeti. */
.pi-ozet {
  margin: 0 0 var(--pi-u4);
  font-size: 1.06rem;
  line-height: 1.65;
  color: var(--pi-metin-2);
  max-width: 68ch;
}

@media (max-width: 575.98px) {
  .pi-ozet { font-size: 1rem; }
}

/* Kategori ikonu logo yuvasini paylasiyor. Hero koyu bantken yari saydam
   beyaz bir cam yuzeydi; hero artik acik yuzeyde oldugu icin o kural ikonu
   gorunmez yapiyordu (beyaz uzerine beyaz). Jetonlara baglandi: iki temada
   da dogru. */
.pi-hero__logo--ikon {
  background: var(--pi-marka-yum);
  box-shadow: inset 0 0 0 1px var(--pi-ring);
  color: var(--pi-marka);
}

.pi-hero__logo--ikon svg {
  width: 52%;
  height: 52%;
  stroke: currentColor;
  fill: none;
}

@media (max-width: 575.98px) {
  .pi-hero__logo--ikon svg { width: 56%; height: 56%; }
}

/* Kategori giris metni: sayfanin ustunde, listeden once. Kategori
   sayfalari yalniz kart dizisiyken cok bostu. */
.pi-kategori-giris {
  max-width: 74ch;
  margin: 0 0 var(--pi-u5);
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--pi-metin-2);
}

.pi-kategori-giris p { margin: 0 0 var(--pi-u3); }
.pi-kategori-giris p:last-child { margin-bottom: 0; }
.pi-kategori-giris strong { color: var(--pi-metin); }

/* ============================================================
   FILTRE: GORSEL SOLDA, KAYNAKTA SONRA

   Filtre HTML'de icerikten SONRA geliyor (bkz. taxonomy ve arama
   sablonlari). Sebebi: kaynakta once gelirse sayfanin ilk icerigi kategori
   metni degil filtre listesi oluyor, mobilde de butun govde filtrenin
   altina dusuyor.

   Gorsel yer burada geri veriliyor. Bootstrap'in order yardimcilarina
   GUVENILMIYOR: tema onlari yuklemiyor olabilir, o zaman filtre sessizce
   saga kayardi. .pi-satir zaten flex bir satir, order yetiyor.
   ============================================================ */
@media (min-width: 992px) {
  .pi-satir > .pi-filtre { order: -1; }
}

/* ============================================================
   IZGARA — Bootstrap'in yerine
   ------------------------------------------------------------
   Sablonlar temadan eklentiye tasinirken Bootstrap izgarasi
   (container / row / col-lg-*) cikarildi: yeni temada Bootstrap
   olmayabilir ve o zaman duzen SESSIZCE bozulurdu. Projedeki
   toplam rolu 10 sinif niteligiydi, karsiligi bu blok.

   DIKKAT: .pi-satir'in flex olmasi eskiden .row'dan geliyordu.
   Burada kendi tanimi var; yoksa yan sutun govdenin altina duserdi.
   ============================================================ */
.pi-kap {
  /* Kutu modelini temadan beklemiyoruz. width:100% + padding-inline birlikte
     duruyor; tema border-box kurmazsa dolgu genisligin ustune biniyor ve
     sayfa yatay kayiyor. (Canli temada border-box var, onizlemede yoktu ve
     785px gorus alaninda govde 825px cikti.) */
  box-sizing: border-box;
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 1rem;
}
@media (min-width: 768px) {
  .pi-kap { padding-inline: 1.5rem; }
}

.pi-satir {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: flex-start;
}
.pi-satir--genis { gap: 2rem; }

/* Govde esner, yan sutun sabit genislige yakin durur. Yuzde kolon
   yerine flex-basis: 8/4 ile 9/3 arasindaki fark boyle korunuyor,
   ustelik ara genisliklerde daha iyi davraniyor. */
.pi-sutun { min-width: 0; }
.pi-sutun--govde { flex: 1 1 min(100%, 34rem); }

@media (min-width: 992px) {
  .pi-satir > .pi-filtre { flex: 0 0 clamp(230px, 25%, 290px); }
  .pi-satir > .pi-yan    { flex: 0 0 clamp(280px, 32%, 340px); }
}
@media (max-width: 991.98px) {
  .pi-satir > .pi-filtre,
  .pi-satir > .pi-yan { flex: 1 1 100%; }
}

/* ============================================================
   BENZER PROGRAMLAR — yan sutun
   ------------------------------------------------------------
   Bu blok govdenin dibinden yan sutuna tasindi. Yan sutunda
   durdugu icin SIKI tutuluyor: satir yuksekligi ~46px, logo
   32px, iki satir metin. Aciklama ve indirme dugmesi yok --
   onlar kartin isi, burasi bir liste.

   On tane kayit var; her satir sismeye baslarsa blok tek
   basina yan sutunu doldurur ve altindaki kategoriler
   gorunmez olur.
   ============================================================ */
.pi-yan__liste--benzer > li + li {
  border-top: 1px solid var(--pi-cizgi);
}
.pi-yan__liste--benzer a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.25rem;
  min-height: 44px;          /* dokunma hedefi */
}
.pi-yan__liste--benzer .pi-yan__kucuk {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
}
.pi-yan__liste--benzer .pi-yan__kucuk img {
  width: 32px;
  height: 32px;
}
.pi-yan__liste--benzer .pi-yan__ad {
  font-size: 0.86rem;
  line-height: 1.25;
  /* Uzun program adlari satiri tasirmasin */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pi-yan__liste--benzer .pi-yan__meta {
  font-size: 0.72rem;
}

/* ============================================================
   ARAYUZ IKONLARI — FontAwesome'in yerine
   ------------------------------------------------------------
   Sablonlar `<i class="fa-solid fa-download">` kullaniyordu ve
   FontAwesome'i TEMA yukluyordu. Eklenti baska bir temada
   acildiginda 32 ikon hicbir hata vermeden kayboluyordu.

   1em BILEREK: <i> etiketi font-size'dan boyut aliyordu, bu da
   oyle aliyor. Boylece degistirme sirasinda tek bir mevcut CSS
   kuralina dokunmak gerekmedi -- ikonlar bulunduklari yerde
   eskisiyle ayni buyuklukte cikiyor.
   ============================================================ */
.pi-ui-ikon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.125em;   /* metin taban cizgisine otursun */
  flex-shrink: 0;
  fill: none;
}
/* Dolu cizilen semboller (yildiz, daire, marka logolari) kendi
   fill'ini tasiyor; stroke tabanlilar currentColor'dan besleniyor. */
.pi-ui-ikon use { color: inherit; }

/* Olculemeyen parmak izi.

   Gizlemek yerine soylemek: arsiv buyudukce hash'siz kayit artacak ve
   sessiz bir eksik, SHA-256'nin kazandirdigi guveni sessizce tuketirdi.
   Solgun ve kesik cizgili -- "burada bir sey yok" degil, "burada bir sey
   OLMASI gerekirdi ama olcemedik" diyor. */
.pi-guvence__oge--eksik {
  color: var(--pi-metin-3, #6b7280);
  border-style: dashed;
  opacity: .85;
}

.pi-guvence__oge--eksik strong { font-weight: 600; }

/* ---------- yonlendirme kutusu ----------

   Dosyasi olmayan kayitta indirme kutusu yerine bu basiliyor. INDIRME
   BUTONU GIBI DURMUYOR: farkli renk ve "X uzerinden indir" metni, cunku
   dosyayi biz sunmuyoruz. Ayni gorunumu vermek okuru yanlis beklentiye
   sokardi. */
.pi-indirme--yonlendirme {
  /* DOLGU BURADA VERILIYOR.
     .pi-indirme'nin kendi dolgusu yok; normal kutuda dolguyu koyu
     .pi-indirme__ana seridi tasiyor. Yonlendirme kutusunda o serit
     olmadigi icin metin kartin yuvarlatilmis kenarina yapisiyor ve
     ilk harf kirpilmis gorunuyordu. */
  padding: var(--pi-u5);

  /* Kesikli cerceve GORUNSUN.
     Once "border-style: dashed" yaziliydi ama .pi-indirme cerceveyi
     border ile degil "box-shadow: inset 0 0 0 1px" ile ciziyor --
     border-width sifir oldugu icin kural hicbir sey yapmiyordu, yani
     kutunun normalden farkli oldugunu gosteren tek isaret yoktu. */
  box-shadow: none;
  border: 1px dashed var(--pi-ring-2);
}

.pi-yonlendirme__neden {
  margin: 0 0 var(--pi-u3);
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--pi-metin-2);
}

/* Disari goturen dugme.
   Once ".pi-indirme__dugme--dis" adiyla yazilmisti ama o temel sinif
   (.pi-indirme__dugme) bu dosyada HIC tanimli degil -- sitenin buton
   sinifi .pi-dg. Sonuc: baglanti bicimsiz bir metin olarak basiliyordu.
   Indirme butonuyla ayni boyda DEGIL, bilerek: dosyayi biz sunmuyoruz. */
.pi-dg--dis {
  min-height: 46px;
  background: var(--pi-yuzey-2);
  color: var(--pi-metin);
  box-shadow: inset 0 0 0 1px var(--pi-ring-2);
}

.pi-dg--dis:hover {
  color: var(--pi-marka);
  box-shadow: inset 0 0 0 1px var(--pi-marka);
}

/* Dar ekranda alan adi + ikon tek satira sigmayabiliyor; .pi-dg
   "white-space: nowrap" diyor ve buton kartin disina tasardi. */
@media (max-width: 480px) {
  .pi-dg--dis { white-space: normal; text-align: center; }
}

.pi-yonlendirme__fiyat {
  display: flex;
  align-items: baseline;
  gap: var(--pi-u2);
  flex-wrap: wrap;
  margin: var(--pi-u3) 0 0;
  font-size: .875rem;
  color: var(--pi-metin-2);
}

.pi-yonlendirme__fiyat strong {
  font-size: 1.0625rem;
  color: var(--pi-metin);
}

/* ---------- SSS akordeonu ----------

   SSS duz liste olarak basiliyordu: sekiz soru, her birinin altinda uc-dort
   cumle, hepsi acik. Sayfanin en uzun ve en yorucu bolumuydu; okur aradigi
   soruyu bulmak icin tamamini taramak zorundaydi.

   Icerik GIZLENMIYOR, katlaniyor: metin HTML'in icinde, sunucudan tam
   geliyor. Google katlanmis icerigi indeksliyor; cezalandirdigi sey sayfada
   HIC OLMAYAN icerik. (Uretim tarafi: includes/class-spi-sss.php) */
.pi-sss {
  display: flex;
  flex-direction: column;
  gap: var(--pi-u2);
  margin: 0 0 var(--pi-u4);
}

.pi-sss__oge {
  border-radius: var(--pi-r);
  background: var(--pi-yuzey);
  box-shadow: inset 0 0 0 1px var(--pi-ring);
  transition: box-shadow var(--pi-gecis);
}

.pi-sss__oge[open] { box-shadow: inset 0 0 0 1px var(--pi-ring-2); }
.pi-sss__oge:hover { box-shadow: inset 0 0 0 1px var(--pi-ring-2); }

.pi-sss__soru {
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: var(--pi-u3);
  padding: var(--pi-u4);
  font-family: var(--pi-display);
  font-weight: 650;
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--pi-metin);
  /* Varsayilan ucgen isaret kaldiriliyor; yerine sagda kendi artimiz.
     WebKit ayri bir sozde-oge kullaniyor, ikisi de gerekiyor. */
  list-style: none;
}

.pi-sss__soru::-webkit-details-marker { display: none; }

/* Isaret SAGDA ve metinden bagimsiz: uzun sorular sarinca sola hizali bir
   ucgen satirin ortasinda yetim kaliyordu. */
.pi-sss__soru::after {
  content: "";
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  margin: 6px 0 0 auto;
  border-right: 2px solid var(--pi-metin-3);
  border-bottom: 2px solid var(--pi-metin-3);
  transform: rotate(45deg);
  transition: transform var(--pi-gecis);
}

.pi-sss__oge[open] > .pi-sss__soru::after {
  transform: rotate(-135deg);
  margin-top: 10px;
}

.pi-sss__soru:focus-visible {
  outline: 2px solid var(--pi-marka);
  outline-offset: 2px;
  border-radius: var(--pi-r);
}

.pi-sss__cevap {
  padding: 0 var(--pi-u4) var(--pi-u4);
  color: var(--pi-metin-2);
}

.pi-sss__cevap > *:first-child { margin-top: 0; }
.pi-sss__cevap > *:last-child { margin-bottom: 0; }

/* Yazdirirken hepsi acik olsun: kagitta tiklama yok. */
@media print {
  .pi-sss__oge { box-shadow: none; }
  .pi-sss__cevap { display: block !important; }
}

/* ---------- karsilastirmanin ayrintili yarisi ----------

   Ayni karsilastirma sayfada iki yerdeydi (olculdu: 6/6 kayitta): ortada
   duz yazi, en altta tablo. Iki ayri H2 "ceza" almiyor ama Google bir
   sorguya sayfadan PASAJ seciyor; olculer bir pasajda, gerekce baska bir
   pasajda kalinca ikisi de eksik oluyor. Okur tarafinda daha basit: ayni
   seyi iki kez okuyor.

   Simdi tek bolum. Ust H2 arama dilini tasiyor ("X vs Y Karsilastirmasi"),
   tablo olculeri veriyor, bu blok da gerekceyi. Taşıma:
   includes/class-spi-kiyas-bag.php */
.pi-kiyas__ayrinti {
  margin-top: var(--pi-u5);
  padding-top: var(--pi-u5);
  /* Ince ayirac: tabloyla ayni bolumde olduklari belli olsun ama
     "burada anlatim basliyor" da gorunsun. */
  border-top: 1px solid var(--pi-ring);
}

/* Tasinan karsilastirma metnindeki eski alt basliklarin yerini alan
   paragraf. Baslik degil: agacta kademe acmiyor ama metinde ayrim
   goruluyor. (bkz. class-spi-kiyas-bag.php) */
.pi-kiyas__ara {
  margin: var(--pi-u4) 0 var(--pi-u2);
  font-weight: 700;
  color: var(--pi-metin);
}
.pi-kiyas__ara:first-child { margin-top: 0; }

.pi-kiyas__ayrinti-baslik {
  margin: 0 0 var(--pi-u3);
  font-family: var(--pi-display);
  font-weight: 700;
  font-size: 1.18rem;
  line-height: 1.35;
  color: var(--pi-metin);
}

/* Bu blok .pi-icerik sinifini de tasiyor (govde tipografisi icin);
   govdedeki ilk paragraf buyutmesi burada istenmiyor. */
.pi-kiyas__ayrinti.pi-icerik > p:first-of-type {
  font-size: inherit;
  color: inherit;
}


/* Yorum bölümünün çağrısı: formun hemen üstünde, kısa. */
.pi-yorumlar__cagri {
  margin: 0 0 var(--pi-u4);
  max-width: 62ch;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--pi-metin-2);
}

/* Editör yorumunun dibindeki bağlantı. Düğme değil: sayfanın birincil
   eylemi indirme, bu ikincil bir davet. */
.pi-editor__cagri {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: var(--pi-u4);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--pi-marka);
  text-decoration: none;
}
.pi-editor__cagri:hover { text-decoration: underline; }
.pi-editor__cagri svg { width: 14px; height: 14px; }

/* ============================================================
   SON GÜNCELLEMELER — editör yorumunun altındaki sürüm geçmişi.

   Önce yalnız EN YENİ giriş, gövdenin üstünde tek satırlık bir banner
   olarak basılıyordu; biriken bütün sürüm özetleri görünmüyordu. Kırk
   sürümün gerçek özeti hiçbir rakipte yok, yani bu sitenin en ayırt edici
   parçası saklı kalıyordu.

   Renk amber kalıyor (banner'la aynı dil): bu bir DURUM bildirimi, eylem
   çağrısı değil. Sol kenar çizgisi girişleri zaman çizelgesi gibi diziyor;
   en yeni üstte, eskiler altında birikiyor.
   ============================================================ */
.pi-guncellemeler__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--pi-u4);
}

.pi-guncellemeler__oge {
  position: relative;
  padding: var(--pi-u4) var(--pi-u5);
  border-radius: var(--pi-r);
  background: var(--pi-uyari-yum);
  box-shadow: inset 0 0 0 1px rgba(162, 87, 11, 0.28);
}

/* İlk giriş en yeni: rozeti dolu, ötekiler daha sakin. */
.pi-guncellemeler__ust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pi-u2);
  margin-bottom: var(--pi-u2);
}

.pi-guncellemeler__surum {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--pi-uyari);
  color: var(--pi-vurgu-us);
  font-family: var(--pi-display);
  font-size: 0.78rem;
  font-weight: 700;
}

.pi-guncellemeler__oge:not(:first-child) .pi-guncellemeler__surum {
  background: transparent;
  color: var(--pi-uyari);
  box-shadow: inset 0 0 0 1px currentColor;
}

.pi-guncellemeler__tarih {
  font-size: 0.85rem;
  font-weight: 600;
  /* Tonlu satir zemininde --pi-metin-3 4.36'ya dusuyordu (olculdu). */
  color: var(--pi-metin-2);
}

.pi-guncellemeler__metin { color: var(--pi-metin); font-size: 0.97rem; line-height: 1.7; }
.pi-guncellemeler__metin p { margin: 0 0 var(--pi-u2); }
.pi-guncellemeler__metin p:last-child { margin-bottom: 0; }
.pi-guncellemeler__metin a { color: var(--pi-marka); font-weight: 600; }

.pi-guncellemeler__kaynak {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--pi-u2);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--pi-uyari);
}

@media (max-width: 560px) {
  .pi-guncellemeler__oge { padding: var(--pi-u3) var(--pi-u4); }
}

/* ---------------------------------------------------------------------------
   1.28: video (tikla-yukle), dogrulama tablosu, komut satiri, kategori tablosu
   --------------------------------------------------------------------------- */
.pi-video__cerceve {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 100%;
  border-radius: var(--pi-r);
  overflow: hidden;
  background: #000;
  box-shadow: var(--pi-golge-1);
}
.pi-video__oynatici { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pi-video__kunye { margin: var(--pi-u3) 0 0; color: var(--pi-metin-2); font-size: 0.92rem; line-height: 1.55; }
.pi-video__baslik { color: var(--pi-metin); font-weight: 600; }
.pi-video__rozet { margin-left: var(--pi-u2); }
.pi-video__rozet {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--pi-guven-yum);
  color: var(--pi-guven);
  font-size: 0.8rem;
  font-weight: 600;
}
/* 1.30: videolar esit izgarada; buyuk-kucuk ayrimi kalkti */
.pi-video__izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--pi-u5);
}
/* Tek video sayfayi kaplamasin: yarim genislikte durur, yaninda bosluk kalir. */
.pi-video__izgara--tek { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
.pi-video__oge { margin: 0; min-width: 0; }
.pi-video__kanal { display: inline; }
.pi-video__kanal::before { content: " · "; }

.pi-tablo-kaydir { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pi-tablo { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.pi-tablo th,
.pi-tablo td { padding: var(--pi-u2) var(--pi-u3); text-align: left; border-bottom: 1px solid var(--pi-ring); vertical-align: top; }
.pi-tablo th { color: var(--pi-metin-2); font-weight: 600; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.02em; }
.pi-tablo tbody tr:hover { background: var(--pi-yuzey-2); }

/* 1.29: komut satiri kendi bolumunde (dogrulama bolumu kaldirildi) */
.pi-komut__etiket { margin: var(--pi-u3) 0 var(--pi-u1); color: var(--pi-metin-2); font-size: 0.85rem; font-weight: 600; }
.pi-komut {
  margin: 0 0 var(--pi-u2);
  padding: var(--pi-u3) var(--pi-u4);
  border-radius: var(--pi-r-sm);
  background: var(--pi-cta);
  color: var(--pi-cta-us);
  font-family: var(--pi-mono);
  font-size: 0.9rem;
  overflow-x: auto;
}
.pi-komut code { font-family: inherit; color: inherit; background: none; }
.pi-komut__nasil { margin-top: var(--pi-u3); }
.pi-komut__nasil summary {
  cursor: pointer;
  color: var(--pi-vurgu);
  font-weight: 600;
  font-size: 0.95rem;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: var(--pi-u2);
}
.pi-komut__nasil summary::-webkit-details-marker { display: none; }
.pi-komut__nasil summary::before {
  content: "";
  width: 0.5em; height: 0.5em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}
.pi-komut__nasil[open] summary::before { transform: rotate(45deg); }
.pi-komut__adimlar { margin: var(--pi-u3) 0 0; padding-left: 1.4em; color: var(--pi-metin-2); line-height: 1.7; }
.pi-komut__adimlar li + li { margin-top: var(--pi-u2); }
.pi-komut__adimlar code { font-family: var(--pi-mono); font-size: 0.88em; }

.pi-kategori-tablo { margin-bottom: var(--pi-u6); }
.pi-kategori-tablo__not { margin-top: var(--pi-u2); color: var(--pi-metin-3); font-size: 0.88rem; }