/* =====================================================================
   T1 — EK STİLLER
   ---------------------------------------------------------------------
   site.css'in tasarımına DOKUNULMAZ. Bu dosya yalnızca katalog
   entegrasyonuyla gelen YENİ öğeleri biçimlendirir ve site.css'te
   bulunan bir hatayı düzeltir.
   Renk ve font değerleri site.css'in kendi değişkenlerinden gelir:
   --red, --dark, --line, --gray, --f-head, --f-body
   ===================================================================== */

/* =====================================================================
   1) ÇEREZ UYARISI HATASI
   ---------------------------------------------------------------------
   site.css satır 483: .kvkk{ ... display:flex ... }
   HTML'deki hidden niteliği tarayıcının varsayılan sayfasından
   display:none olarak gelir. Yazar sayfasındaki herhangi bir display
   bildirimi onu ezer. Sonuç: "Tamam" düğmesi hidden=true yapıyor ama
   kutu ekranda kalıyor.
   Çözüm hidden durumunu açıkça ele almak.
   ===================================================================== */
.kvkk[hidden]{display:none !important}

/* =====================================================================
   2) ÜRÜN SAYFASI — BEDEN SEÇİMİ
   Yeni öğe: katalogdan gelen varyantlar için.
   ===================================================================== */
.t1-beden-sec{margin:0 0 1rem}
.t1-beden-sec__bas{
  margin:0 0 .5rem;
  font-family:var(--f-head);font-weight:700;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.08em;
}
.t1-beden-sec__bas span{color:var(--gray);font-weight:500;text-transform:none;letter-spacing:0}
.t1-beden-sec__pullar{display:flex;flex-wrap:wrap;gap:.35rem}
.t1-beden-pul{position:relative;cursor:pointer}
.t1-beden-pul input{position:absolute;opacity:0;pointer-events:none}
.t1-beden-pul span{
  display:block;min-width:46px;padding:.6rem .7rem;text-align:center;
  background:#fff;border:1px solid var(--line);border-radius:4px;
  font-family:var(--f-body);font-weight:600;font-size:.85rem;
  font-variant-numeric:tabular-nums;
  transition:background .15s,color .15s,border-color .15s;
}
.t1-beden-pul:hover span{border-color:var(--dark)}
.t1-beden-pul input:checked + span{background:var(--dark);color:#fff;border-color:var(--dark)}
.t1-beden-pul input:focus-visible + span{outline:2px solid var(--red);outline-offset:2px}
.t1-beden-pul--tuk span{
  color:#aaa;text-decoration:line-through;cursor:not-allowed;background:#f4f4f5;
}
.t1-buy__satir{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}

/* =====================================================================
   3) YAN PANEL — MARKA / BEDEN / HOMOLOGASYON FİLTRELERİ
   Yeni öğeler. Kategori filtresinin görünümünü izler (.fcheck),
   o yüzden burada yalnızca kendi kapsayıcıları tanımlanıyor.
   ===================================================================== */
.t1-fscroll{max-height:230px;overflow-y:auto;padding-right:4px}
.t1-fscroll::-webkit-scrollbar{width:6px}
.t1-fscroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}

.t1-fbeden{display:flex;flex-wrap:wrap;gap:.3rem}
.t1-fbeden__pul{position:relative;cursor:pointer}
.t1-fbeden__pul input{position:absolute;opacity:0;pointer-events:none}
.t1-fbeden__pul span{
  display:block;min-width:40px;padding:.45rem .55rem;text-align:center;
  background:#fff;border:1px solid var(--line);border-radius:4px;
  font-family:var(--f-body);font-weight:600;font-size:.8rem;
  font-variant-numeric:tabular-nums;
  transition:background .15s,color .15s,border-color .15s;
}
.t1-fbeden__pul:hover span{border-color:var(--dark)}
.t1-fbeden__pul.on span{background:var(--red);color:#fff;border-color:var(--red)}
.t1-fbeden__pul input:focus-visible + span{outline:2px solid var(--red);outline-offset:2px}

.t1-fselect{
  width:100%;padding:.6rem .7rem;background:#fff;
  border:1px solid var(--line);border-radius:4px;
  font-family:var(--f-body);font-size:.85rem;
}
.t1-fnote{margin:.5rem 0 0;font-size:.74rem;color:var(--gray);line-height:1.5}

/* =====================================================================
   4) ÜRÜN GÖRSELİNDE MARKA ETİKETİ
   Sol alt köşe. Kart görselinin üzerinde durduğu için konumlandırma
   kapsayıcısının relative olması gerekiyor; site.css'te .pc-media
   zaten relative, ancak ürün detayında değil.
   ===================================================================== */
.pc-media,.p-gallery,.p-main{position:relative}
.t1-marka-etiket{
  position:absolute;left:0;bottom:0;z-index:3;
  background:var(--dark);color:#fff;
  font-family:var(--f-head);font-weight:700;
  font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;
  padding:.3rem .5rem;
  border-top-right-radius:4px;
  pointer-events:none;
}
.t1-marka-etiket--buyuk{font-size:.72rem;padding:.4rem .65rem}

/* =====================================================================
   5) MAĞAZA SAYFASI — AÇIK ZEMİN
   ---------------------------------------------------------------------
   site.css'te mağaza koyu tasarlanmış: .pcard #151518, .pc-media #16161a,
   filtre sütunu #111114, başlıklar beyaz. Bu blok yalnızca ürünler
   sayfasını açık zemine çeviriyor.

   Kapsam DAR: her kural body.shop-page ile başlıyor. Ana sayfa,
   eğitim sayfaları, haberler ve panel etkilenmez.

   Renkler:
     zemin      #FFFFFF
     kart       #FFFFFF, kenarlık #E4E4E7
     görsel     #F4F4F5 (fotoğrafın beyazı üstünde hafif çerçeve)
     metin      #18181B
     ikincil    #71717A
   ===================================================================== */

body.shop-page{background:#fff;color:#18181b}

/* KOYU ZEMİNİN GERÇEK KAYNAĞI.
   body değil: site.css .section sınıfına background:var(--dark) veriyor
   ve mağaza ızgarası <section class="section shop-sec"> içinde duruyor.
   Canlı sayfada ata zinciri ölçüldü:
     article.pcard        → rgb(255,255,255)
     div.pgrid            → şeffaf
     div.shop-layout      → şeffaf
     section.shop-sec     → rgb(13,13,13)   ← kaynak burası
     body.shop-page       → rgb(255,255,255)
   Bu yüzden gövde beyaz olmasına rağmen sayfa siyah görünüyordu ve
   koyu filtre yazıları okunmuyordu. */
body.shop-page .section,
body.shop-page .shop-sec{background:#fff}

/* --- Sayfa başlığı ve güven şeridi --- */
body.shop-page .shop-head{background:#fff;border-bottom:1px solid #e4e4e7}
body.shop-page .shop-head h1{color:#18181b}
body.shop-page .shop-sub{color:#71717a}
body.shop-page .crumbs{color:#71717a}
body.shop-page .crumbs a{color:#71717a}
body.shop-page .crumbs a:hover{color:var(--red)}
body.shop-page .crumbs b{color:#18181b}
body.shop-page .trust-bar{background:#fafafa;border-bottom:1px solid #e4e4e7}
body.shop-page .trust-bar b{color:#18181b}
body.shop-page .trust-bar span{color:#71717a}
body.shop-page .demo-note{background:#fffbeb;border-color:#fcd34d;color:#78350f}

/* --- Filtre sütunu --- */
body.shop-page .filters-col{background:transparent}
body.shop-page .fc-head{border-bottom-color:#e4e4e7}
body.shop-page .fc-head h2{color:#18181b}
body.shop-page .fgrp{border-bottom-color:#e4e4e7}
body.shop-page .fgrp h3{color:#18181b}
body.shop-page .fsearch{background:#fff;border-color:#d4d4d8}
body.shop-page .fsearch input{color:#18181b}
body.shop-page .fsearch input::placeholder{color:#a1a1aa}
body.shop-page .fcheck{color:#3f3f46}
body.shop-page .fcheck:hover span{color:var(--red)}
body.shop-page .fcheck i{color:#71717a;background:#f4f4f5}
body.shop-page .frange input{background:#fff;border-color:#d4d4d8;color:#18181b}
body.shop-page .frange span{color:#a1a1aa}
body.shop-page .fquick a{color:#52525b;border-color:#d4d4d8}
body.shop-page .fquick a:hover{border-color:#18181b;color:#18181b}
body.shop-page .fhelp{background:#fafafa;border-color:#e4e4e7}
body.shop-page .fhelp b{color:#18181b}
body.shop-page .fhelp p{color:#71717a}

/* --- Araç çubuğu --- */
body.shop-page .shop-toolbar{border-bottom-color:#e4e4e7}
body.shop-page .res-n{color:#71717a}
body.shop-page .res-n b{color:#18181b}
body.shop-page .fbtn{background:#fff;border-color:#d4d4d8;color:#18181b}
body.shop-page .sortf select{background:#fff;border-color:#d4d4d8;color:#18181b}
body.shop-page .sortf option{background:#fff;color:#18181b}
body.shop-page .viewsw{border-color:#d4d4d8}
body.shop-page .viewsw a{color:#a1a1aa}
body.shop-page .viewsw a.on{background:var(--red);color:#fff}

/* --- Filtre etiketleri --- */
body.shop-page .chip{background:#f4f4f5;border-color:#e4e4e7;color:#3f3f46}
body.shop-page .chip span{color:#a1a1aa}
body.shop-page .chip:hover{border-color:var(--red);color:var(--red)}
body.shop-page .chip.clear{color:#71717a}

/* --- Ürün kartı --- */
body.shop-page .pcard{background:#fff;border-color:#e4e4e7}
body.shop-page .pcard:hover{border-color:#a1a1aa;box-shadow:0 8px 22px rgba(24,24,27,.08)}
body.shop-page .pc-media{background:#f4f4f5}
body.shop-page .pc-media .noimg{color:#d4d4d8}
body.shop-page .pc-cat{color:#71717a}
body.shop-page .pc-body h3 a{color:#18181b}
body.shop-page .pc-body h3 a:hover{color:var(--red)}
body.shop-page .pc-short{color:#71717a}
body.shop-page .pc-sku{color:#a1a1aa}
body.shop-page .pc-foot{border-top-color:#f4f4f5}
body.shop-page .pc-price b{color:#18181b}
body.shop-page .pc-price s{color:#a1a1aa}
body.shop-page .pc-price .ask{color:#71717a}
body.shop-page .st.in{color:#16a34a}
body.shop-page .st.out{color:#dc2626}
body.shop-page .st.low{color:#ea580c}
/* Öne çıkan rozeti fıstık yeşiliydi, açık zeminde okunmuyor */
body.shop-page .bg-feat{background:#18181b;color:#fff !important}
body.shop-page .bg-oos{background:#71717a;color:#fff !important}

/* --- Boş durum ve sayfalama --- */
body.shop-page .shop-empty{color:#a1a1aa}
body.shop-page .shop-empty h3{color:#18181b}
body.shop-page .pager a{border-color:#d4d4d8;color:#3f3f46}
body.shop-page .pager a:hover{border-color:#18181b;color:#18181b}
body.shop-page .pager a.on{background:var(--red);border-color:var(--red);color:#fff}

/* --- Yeni filtrelerim açık zeminde --- */
body.shop-page .t1-fscroll::-webkit-scrollbar-thumb{background:#d4d4d8}
body.shop-page .t1-fbeden__pul span{background:#fff;border-color:#d4d4d8;color:#3f3f46}
body.shop-page .t1-fbeden__pul:hover span{border-color:#18181b;color:#18181b}
body.shop-page .t1-fbeden__pul.on span{background:var(--red);border-color:var(--red);color:#fff}
body.shop-page .t1-fselect{background:#fff;border-color:#d4d4d8;color:#18181b}
body.shop-page .t1-fnote{color:#71717a}

/* Mobil filtre çekmecesi de açık olsun */
@media(max-width:980px){
  body.shop-page .filters-col{background:#fff;border-right-color:#e4e4e7}
}

/* =====================================================================
   6) FİLTRE LİSTESİNDE ALT KATEGORİLER
   all_categories() alt kategori adlarının önüne "— " ekliyor.
   Şablon düz liste bastığı için hiyerarşi burada görsel olarak veriliyor.
   ===================================================================== */
body.shop-page .fcheck span{line-height:1.35}
/* "— " ile başlayan satırlar alt kategori: biraz sola çekilmiş ve soluk */
body.shop-page .fgrp .fcheck span:first-letter{letter-spacing:.15em}

/* =====================================================================
   7) AÇIK ZEMİNDE GÖRÜNMEYEN DÜĞMELER
   ---------------------------------------------------------------------
   site.css satır 170:
       .btn-ghost{background:transparent; border:2px solid #3a3a40; color:#fff}
   Beyaz yazı, koyu tasarım için doğru. Açık zeminde kayboluyor —
   "BİLGİ AL" ve "BİZE ULAŞIN" düğmeleri boş kutu gibi duruyordu.
   ===================================================================== */
body.shop-page .btn-ghost{
  background:#fff;border-color:#d4d4d8;color:#18181b;
}
body.shop-page .btn-ghost:hover{
  background:#18181b;border-color:#18181b;color:#fff;
}
/* Yardım kutusundaki düğme de aynı */
body.shop-page .fhelp .btn-ghost{background:#fff;color:#18181b}

/* =====================================================================
   8) ÜRÜN KARTINDA STOK GÖSTERGESİ KAPALI
   ---------------------------------------------------------------------
   Kartta "Stokta / Son N adet / Stokta yok" gösterilmiyor. Stok bilgisi
   ürün detay sayfasında kalıyor; vitrinde her kartta tekrar etmesi
   dikkati fiyattan ve üründen kaydırıyor.
   Ürün kodu (SKU) satırda kalıyor, şerit yapısı korunuyor.
   ===================================================================== */
body.shop-page .pc-stock .st{display:none}
/* Şeritte tek öğe kalınca SKU sola gelsin */
body.shop-page .pc-stock .pc-sku{margin-left:0}
/* Şerit tamamen boşsa çizgileri de gizle */
body.shop-page .pc-stock:not(:has(.pc-sku)){display:none}

/* =====================================================================
   9) KARTTAKİ SEPET DÜĞMESİ
   ---------------------------------------------------------------------
   site.css satır 738-741: .pc-add .btn span{display:none} — ızgara
   görünümünde yazı gizli, yalnızca ikon kalıyordu. Küçük kırmızı bir
   kare olarak duruyor ve ne yaptığı anlaşılmıyordu.

   Düğme artık kartın altında tam genişlikte, ikon + "Sepete ekle"
   yazısıyla. Fiyat kendi satırında kalıyor.

   Renk: asfalt zemin, üzerine gelince kerb kırmızısı. Kırmızıyı
   varsayılan yapmak 12 kartın hepsinde tekrar edince gürültü
   oluyordu; vurgu rengi olarak hover'da kullanmak daha sakin.
   Kırmızı isterseniz .pc-add .btn arka planını var(--red) yapın.
   ===================================================================== */
body.shop-page .pc-foot{flex-wrap:wrap;gap:.55rem}
body.shop-page .pc-price{flex:1 1 100%}
body.shop-page .pc-add{flex:1 0 100%;margin:0}

body.shop-page .pc-add .btn{
  display:flex;align-items:center;justify-content:center;gap:.45rem;
  width:100%;padding:.72rem 1rem;
  background:#18181b;color:#fff;border:0;
  font-family:var(--f-head);font-weight:700;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.06em;
  transition:background .16s;
}
body.shop-page .pc-add .btn:hover{background:var(--red)}
/* Yazı geri geliyor — site.css onu gizliyordu */
body.shop-page .pc-add .btn span{display:inline}
body.shop-page .pc-add .btn svg{flex:none}

/* Stokta olmayan ürün: ikinci derece görünüm */
body.shop-page .pc-add .btn-ghost{
  background:#fff;border:1px solid #d4d4d8;color:#18181b;
}
body.shop-page .pc-add .btn-ghost:hover{background:#18181b;color:#fff;border-color:#18181b}

/* "TÜKENDİ" rozeti de stok göstergesi — kartlarda gösterilmiyor */
body.shop-page .pc-badges .bg-oos{display:none}

/* Liste görünümünde düğme yeniden yanda dursun */
body.shop-page .pgrid.list .pc-foot{flex-wrap:nowrap}
body.shop-page .pgrid.list .pc-price{flex:1 1 auto}
body.shop-page .pgrid.list .pc-add{flex:0 0 auto}
body.shop-page .pgrid.list .pc-add .btn{width:auto;padding:.6rem 1.3rem}

/* =====================================================================
   10) MENÜDE SHOP DÜĞMESİ
   ---------------------------------------------------------------------
   Menü kayıtları veritabanından geldiği için işaretlemeye class
   eklenemiyor. Bağlantı adresinden hedefliyoruz: menu_href() mağaza
   öğesi için './?p=urunler' üretiyor.

   Diğer menü öğelerinin dolgusu yok, 76px'lik başlık satırında flex
   ile ortalanıyorlar. Kırmızı kutuya dolgu verince o öğe uzayıp
   diğerlerini kaydırıyordu; ul'ye align-items:center ekleyerek
   çözülüyor — kutu büyüse de diğerleri ortada kalıyor.

   NOT: Bu blok site.css'in kendi tasarımını değiştirmiyor, yalnızca
   tek bir menü öğesini vurguluyor. Sitenin her sayfasında geçerli.
   ===================================================================== */
.main-nav > ul{align-items:center}

.main-nav > ul > li > a[href*="p=urunler"]{
  background:var(--red);
  color:#fff;
  border:2px solid var(--red);
  border-radius:4px;
  padding:.5rem 1.1rem;
  letter-spacing:.09em;
  transition:background .16s,color .16s,border-color .16s;
}
/* Üzerine gelince ters çevir: beyaz zemin, kırmızı çerçeve ve yazı */
.main-nav > ul > li > a[href*="p=urunler"]:hover{
  background:#fff;
  color:var(--red);
  border-color:var(--red);
}
/* Mağaza sayfasındayken düğme koyu dursun — nerede olduğun belli olsun */
body.shop-page .main-nav > ul > li > a[href*="p=urunler"]{
  background:#18181b;border-color:#18181b;color:#fff;
}
body.shop-page .main-nav > ul > li > a[href*="p=urunler"]:hover{
  background:var(--red);border-color:var(--red);color:#fff;
}

/* Mobil menüde dikey liste oluyor: kutu satırı kaplamasın */
@media (max-width:1100px){
  .main-nav > ul{align-items:stretch}
  .main-nav > ul > li > a[href*="p=urunler"]{
    align-self:flex-start;
    margin:.4rem 0;
    padding:.6rem 1.2rem;
  }
}

/* =====================================================================
   11) MOBİLDE TEK SIRADA TEK ÜRÜN
   ---------------------------------------------------------------------
   site.css satır 703: .pgrid.grid{minmax(min(240px,100%),1fr)}
   site.css satır 786: @media(max-width:400px){.pgrid.grid{1fr 1fr}}

   240px alt sınır yüzünden 480-640px arası telefonlarda 2 kolon
   çıkıyordu; 400px altında da açıkça 2'ye zorlanıyor. Sonuç: küçük
   ekranda kartlar sıkışıyor, ürün adı ve fiyat okunmuyor.

   640px altında tek kolon. Tabletlerde (641px+) 2-3 kolon devam eder.
   ===================================================================== */
@media (max-width:640px){
  body.shop-page .pgrid.grid{grid-template-columns:1fr !important;gap:14px}

  /* Tek kolonda kart genişleyince yazılar da rahatlasın */
  body.shop-page .pc-body{padding:1rem 1.1rem 1.1rem;gap:.45rem}
  body.shop-page .pc-body h3{font-size:1.02rem;line-height:1.3}
  body.shop-page .pc-short{
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;font-size:.85rem;
  }
  body.shop-page .pc-price b{font-size:1.15rem}

  /* Sepet düğmesi tam genişlik, parmakla rahat basılacak yükseklik */
  body.shop-page .pc-add .btn{padding:.85rem 1rem;font-size:.82rem}

  /* Marka etiketi küçük ekranda görseli boğmasın */
  body.shop-page .t1-marka-etiket{font-size:.58rem;padding:.25rem .45rem}
}

/* Çok küçük ekranlarda araç çubuğu alt alta gelsin */
@media (max-width:480px){
  body.shop-page .shop-toolbar{gap:.6rem}
  body.shop-page .res-n{flex:1 1 100%;order:-1}
  body.shop-page .tb-right{flex:1 1 100%;display:flex;gap:.5rem}
  body.shop-page .sortf{flex:1}
  body.shop-page .sortf select{width:100%}
}

/* =====================================================================
   11) MENÜ TAŞMASI — 10. bloğun yol açtığı hatanın düzeltmesi
   ---------------------------------------------------------------------
   SHOP kutusuna verilen dolgu (.5rem 1.1rem) + 2px çerçeve menüye
   yaklaşık 40px ekledi. site.css'te .main-nav>ul flex ve öğelerin
   min-width'i sınırlanmamış; nav sığmayınca öğeler daraldı ve
   "ANASAYFA" harf harf alt satıra düştü.

   Üç önlem:
     · white-space:nowrap — yazı hiçbir koşulda kırılmaz
     · flex:0 0 auto      — öğeler daralmaz
     · daralan ekranda boşluk ve punto kademeli küçülür
   ===================================================================== */
.main-nav > ul > li{flex:0 0 auto}
.main-nav > ul > li > a{white-space:nowrap}
.main-nav .sub li a{white-space:normal}

/* Kademeli sıkışma: hamburger devralana kadar menü sığsın */
@media (max-width:1500px){
  .main-nav > ul{gap:24px}
  .main-nav > ul > li > a[href*="p=urunler"]{padding:.45rem .85rem}
}
@media (max-width:1320px){
  .main-nav > ul{gap:16px}
  .main-nav > ul > li > a{font-size:.79rem;letter-spacing:.04em}
  .main-nav > ul > li > a[href*="p=urunler"]{padding:.42rem .7rem;letter-spacing:.05em}
}
@media (max-width:1180px){
  .main-nav > ul{gap:11px}
  .main-nav > ul > li > a{font-size:.74rem;letter-spacing:.02em}
}

/* =====================================================================
   12) MOBİLDE ÜRÜNLER TEK SIRADA
   ---------------------------------------------------------------------
   site.css satır 786: @media(max-width:...) .pgrid.grid{grid-template-
   columns:1fr 1fr} — mobilde iki kolon. 360px genişlikte kart 170px'e
   düşüyor; görsel, ad, fiyat ve sepet düğmesi o alanda okunmuyor.
   Tek kolona indiriyoruz.
   ===================================================================== */
/* Kart iç ölçüleri — ızgara kolonu 15. blokta (820px) belirleniyor. */
@media (max-width:820px){
  body.shop-page .pgrid.grid .pc-body h3{font-size:.9rem}
  body.shop-page .pgrid.grid .pc-foot{flex-wrap:wrap;gap:.45rem}
  body.shop-page .pgrid.grid .pc-price{flex:1 1 100%}
  body.shop-page .pgrid.grid .pc-add{flex:1 0 100%}
  body.shop-page .pgrid.grid .pc-add .btn{padding:.6rem .8rem;font-size:.72rem}
  body.shop-page .pc-badges b{font-size:.58rem;padding:.2rem .42rem}
  body.shop-page .t1-marka-etiket{font-size:.56rem;padding:.22rem .42rem}
}

/* =====================================================================
   13) KATEGORİ ŞERİDİ
   ---------------------------------------------------------------------
   Güven şeridinin (5.000 ₺ üzeri ücretsiz kargo…) yerini aldı.
   Ana kategoriler yatay şerit, seçili olanın alt kategorileri altında.

   Tamamı bağlantı — JavaScript yok. Mobilde şerit yatay kayıyor,
   dokunma hedefleri 44px'in üstünde, kaydırma çubuğu gizli ama
   kenarda solan gölge kaydırılabileceğini gösteriyor.
   ===================================================================== */
.t1-kat-serit{
  background:#fff;
  border-bottom:1px solid #e4e4e7;
  position:relative;
}

/* --- Ana kategoriler --- */
.t1-kat-serit__ana{
  list-style:none;margin:0;padding:.7rem 0;
  display:flex;gap:.4rem;align-items:center;
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.t1-kat-serit__ana::-webkit-scrollbar{display:none}
.t1-kat-serit__ana > li{flex:0 0 auto}

.t1-kat-serit__ana > li > a{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.6rem 1rem;min-height:42px;
  background:#f4f4f5;border:1px solid transparent;border-radius:4px;
  font-family:var(--f-head);font-weight:700;font-size:.8rem;
  text-transform:uppercase;letter-spacing:.05em;
  color:#3f3f46;white-space:nowrap;
  transition:background .15s,color .15s,border-color .15s;
}
.t1-kat-serit__ana > li > a i{
  font-style:normal;font-size:.72rem;font-weight:600;
  color:#a1a1aa;font-variant-numeric:tabular-nums;
}
.t1-kat-serit__ana > li > a:hover{background:#e4e4e7;color:#18181b}
.t1-kat-serit__ana > li > a.etkin{
  background:var(--red);color:#fff;border-color:var(--red);
}
.t1-kat-serit__ana > li > a.etkin i{color:rgba(255,255,255,.75)}

/* --- Alt kategoriler --- */
.t1-kat-serit__alt{
  list-style:none;margin:0;padding:0 0 .8rem;
  display:flex;gap:.35rem;align-items:center;flex-wrap:wrap;
}
.t1-kat-serit__alt > li{flex:0 0 auto}
.t1-kat-serit__alt > li > a{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.42rem .8rem;min-height:34px;
  background:#fff;border:1px solid #d4d4d8;border-radius:20px;
  font-family:var(--f-body);font-weight:500;font-size:.8rem;
  color:#3f3f46;white-space:nowrap;
  transition:background .15s,color .15s,border-color .15s;
}
.t1-kat-serit__alt > li > a i{
  font-style:normal;font-size:.7rem;color:#a1a1aa;font-variant-numeric:tabular-nums;
}
.t1-kat-serit__alt > li > a:hover{border-color:#18181b;color:#18181b}
.t1-kat-serit__alt > li > a.etkin{
  background:#18181b;border-color:#18181b;color:#fff;
}
.t1-kat-serit__alt > li > a.etkin i{color:rgba(255,255,255,.7)}

/* --- Mobil --- */
@media (max-width:640px){
  .t1-kat-serit__ana{padding:.6rem 0;gap:.35rem}
  .t1-kat-serit__ana > li > a{
    padding:.6rem .85rem;font-size:.74rem;min-height:44px;
  }
  /* Alt kategoriler de kaysın, satırlara bölünüp yer kaplamasın */
  .t1-kat-serit__alt{
    flex-wrap:nowrap;overflow-x:auto;
    scrollbar-width:none;padding-bottom:.7rem;
  }
  .t1-kat-serit__alt::-webkit-scrollbar{display:none}
  .t1-kat-serit__alt > li > a{min-height:40px}
  /* Solma kuralı 14. bloğa taşındı — orada overflow ile birlikte */
}

/* =====================================================================
   14) KATEGORİ ŞERİDİ — ORTALAMA VE MOBİL
   ---------------------------------------------------------------------
   ORTALAMA
   justify-content:center kaydırılabilir bir şeritte tuzak: içerik
   taştığında tarayıcı başa geri kaydıramıyor, ilk öğeler erişilemez
   kalıyor. Bunun yerine width:fit-content + margin auto:
     · içerik sığıyorsa şerit ortalanır
     · taşıyorsa max-width:100% devreye girer ve baştan kayar
   ===================================================================== */
.t1-kat-serit__ana,
.t1-kat-serit__alt{
  width:fit-content;
  max-width:100%;
  margin-inline:auto;
}
.t1-kat-serit__alt{justify-content:center}

/* =====================================================================
   MOBİL
   Şerit ekran kenarlarına kadar uzuyor — .wrap dolgusu şeritten
   kaldırılıp listenin içine veriliyor. Böylece parmakla kaydırma
   alanı tüm genişlik oluyor ve son öğe kenara yapışmıyor.
   Kaydırma tutması (scroll-snap) ekleniyor, öğeler yarım kalmıyor.
   ===================================================================== */
/* 821-900px aralığı için özel kural GEREKMİYOR: 820px altı 15. blokta
   sarmalı ızgaraya geçiyor, üstü masaüstü ortalanmış şeridi kullanıyor.
   Buradaki eski yatay kaydırma bloğu kaldırıldı — 820-900 arasında
   kaydırma açıp altında kapatmak tutarsız davranış üretiyordu. */

/* 640px şerit kuralları 15. bloğa taşındı (820px eşiği). */

/* Solma gölgesi kaldırıldı: mobilde artık kaydırma yok, hepsi görünüyor.
   Gölge olmayan bir kaydırmayı ima ediyordu. */

/* =====================================================================
   15) MOBİL — YENİDEN DÜŞÜNÜLDÜ
   ---------------------------------------------------------------------
   390px'de ölçüm: ızgara tek kolon, kart yatay, şerit kaydırılabilir,
   dokunma hedefi 44px, yatay taşma yok. Teknik olarak çalışıyordu.

   Ama YATAY KAYDIRMA kötü bir desen: 390px ekranda şeridin 1001px'lik
   içeriğinden yalnızca 375px görünüyor, yani 8 kategoriden 3'ü.
   Kullanıcı kaydırabileceğini fark etmezse geri kalanı yok sayıyor.

   Çözüm: kaydırma yerine SARMALI IZGARA — bütün kategoriler aynı anda
   görünür, kaydırma gerekmez, keşfedilecek bir şey kalmaz.

   Eşik 640'tan 820'ye çıkarıldı: 768px'lik tabletler ve yatay
   tutulan telefonlar da mobil düzene giriyor.
   ===================================================================== */
@media (max-width:820px){

  /* --- Ürünler tek kolon --- */
  body.shop-page .pgrid.grid{grid-template-columns:1fr;gap:12px}
  body.shop-page .pgrid.grid .pcard{flex-direction:row}
  body.shop-page .pgrid.grid .pc-media{width:38%;flex:none;aspect-ratio:1/1}
  body.shop-page .pgrid.grid .pc-body{flex:1;padding:.8rem .9rem}
  body.shop-page .pgrid.grid .pc-short{display:none}

  /* --- Kategori şeridi: kaydırma YOK, hepsi görünür --- */
  .t1-kat-serit{overflow:visible}
  .t1-kat-serit::after{display:none}          /* solma gölgesi gereksiz */
  .t1-kat-serit .wrap{padding-inline:var(--pad)}

  .t1-kat-serit__ana{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:.4rem;
    width:auto;max-width:none;margin:0;padding:.7rem 0;
    overflow:visible;
    scroll-snap-type:none;
  }
  .t1-kat-serit__ana > li{flex:initial}
  .t1-kat-serit__ana > li > a{
    display:flex;justify-content:space-between;
    width:100%;min-height:46px;
    padding:.65rem .85rem;font-size:.76rem;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  /* "Tümü" tek başına tam satır — listenin başı belli olsun */
  .t1-kat-serit__ana > li:first-child{grid-column:1 / -1}

  /* Alt kategoriler de sarmalı, kaydırma yok */
  .t1-kat-serit__alt{
    flex-wrap:wrap;overflow:visible;
    width:auto;max-width:none;margin:0;
    justify-content:flex-start;
    gap:.35rem;padding:0 0 .8rem;
    scroll-snap-type:none;
  }
  .t1-kat-serit__alt > li > a{min-height:40px;font-size:.78rem}
}

/* Çok dar ekranda tek kolon kategori, kart tamamen dikey */
@media (max-width:400px){
  .t1-kat-serit__ana{grid-template-columns:1fr}
  .t1-kat-serit__ana > li:first-child{grid-column:auto}
  body.shop-page .pgrid.grid .pcard{flex-direction:column}
  body.shop-page .pgrid.grid .pc-media{width:100%;aspect-ratio:4/3}
}

/* =====================================================================
   16) LOGO ORANI — yatayda ezilme düzeltmesi
   ---------------------------------------------------------------------
   Ölçüm (390px genişlikte):
       doğal boyut   800 × 162 px   oran 4.94
       çizilen       80 × 46 px     oran 1.74
       yatayda %65 sıkışma

   Sebep: site.css logoya hem width hem height veriyor ve object-fit
   varsayılan olarak 'fill'. Görsel kendi oranını koruyamıyor, kutuya
   zorla sığdırılıyor — harfler daralıyor.

   Çözüm: yüksekliği koru, genişliği serbest bırak. Böylece oran
   otomatik korunur ve hiçbir ekranda ezilmez.
   ===================================================================== */
.site-head .brand{
  display:flex;
  align-items:center;
  width:auto;
  height:auto;
  flex:0 0 auto;
}
.site-head .brand img{
  width:auto;
  height:38px;
  max-width:none;
  max-height:none;
  object-fit:contain;
  display:block;
}

/* Geniş ekranda biraz daha büyük */
@media (min-width:1100px){
  .site-head .brand img{height:44px}
}

/* Mobilde başlık yüksekliğine göre küçült — 390px'de logo 174px
   genişliğinde oluyor, menü ikonlarına yer kalıyor */
@media (max-width:640px){
  .site-head .brand img{height:32px}
}
@media (max-width:380px){
  .site-head .brand img{height:28px}
}

/* Footer ve panel logosu varsa aynı kural */
.site-foot .brand img,
.site-foot img[src*="t1-logo"]{
  width:auto;height:auto;max-height:52px;object-fit:contain;
}

/* =====================================================================
   17) ÜRÜN KARTINDA T1 MARKA İŞARETİ
   ---------------------------------------------------------------------
   Kart görselinin sağ alt köşesine T1 logosu. Sitenin kendi arayüz
   öğesi — görsel dosyalarına dokunulmuyor, yalnızca kart üzerine
   çiziliyor.

   Konum seçimi: sol altta zaten marka etiketi (.t1-marka-etiket)
   duruyor, bu yüzden sağ alt. İkisi çakışmıyor.

   Okunabilirlik: ürün fotoğrafları çoğunlukla beyaz zeminli ama
   siyah tulum/kask gibi koyu ürünler de var. Logonun arkasına hafif
   beyaz bir zemin konuyor, iki durumda da görünüyor.

   Fare olaylarını engellemiyor (pointer-events:none) — kartın
   tamamı tıklanabilir kalıyor.
   ===================================================================== */
body.shop-page .pc-media{position:relative}

body.shop-page .pc-media::after{
  content:'';
  position:absolute;
  right:8px;
  bottom:8px;
  width:58px;
  height:12px;                      /* 800x162 oranı: 58 / 4.94 ≈ 12 */
  background-image:url('/assets/img/t1-logo.png');
  background-repeat:no-repeat;
  background-position:center right;
  background-size:contain;
  opacity:.72;
  pointer-events:none;
  z-index:2;
  /* Koyu ürün fotoğraflarında da okunsun */
  filter:drop-shadow(0 0 2px rgba(255,255,255,.95))
         drop-shadow(0 0 4px rgba(255,255,255,.7));
  transition:opacity .18s;
}
/* Karta gelince biraz belirginleşsin */
body.shop-page .pcard:hover .pc-media::after{opacity:.9}

/* Görseli olmayan kartta gösterme — orada "T1" yer tutucusu var,
   iki T1 yan yana gelmesin */
body.shop-page .pc-media:has(.noimg)::after{display:none}

/* Liste görünümünde görsel alanı daha büyük, işaret de büyüsün */
body.shop-page .pgrid.list .pc-media::after{
  width:72px;height:15px;right:10px;bottom:10px;
}

/* Mobil: kart görseli %38 genişlikte, işaret küçülsün */
@media (max-width:820px){
  body.shop-page .pc-media::after{
    width:46px;height:10px;right:6px;bottom:6px;
  }
}
@media (max-width:400px){
  body.shop-page .pc-media::after{width:54px;height:11px}
}

/* =====================================================================
   18) ÜRÜN DETAY SAYFASINDA MARKA İŞARETİ
   ---------------------------------------------------------------------
   Önce .p-main / .p-gallery seçicileri yazılmıştı ama o sınıflar
   demo17'de YOK — detayda hiç çıkmıyordu. Gerçek yapı ölçüldü:

       div.product-media   581 × 662
         img#pmain         581 × 581   (kare, üstten 0)
         span.t1-marka-etiket--buyuk   (görselin sol altı)
         div.pgal          581 × 70    (küçük görsel şeridi)

   Kapsayıcı görselden 81px daha uzun olduğu için `bottom` ile
   konumlandırmak işareti küçük görsel şeridinin içine düşürüyordu.

   Çözüm kapsayıcı sorgusu: görsel kare olduğundan 100cqw tam olarak
   görselin yüksekliğine eşit. İşaret görselin alt kenarından
   yukarıya doğru yerleştiriliyor, şeride taşmıyor.
   ===================================================================== */
.product-media{position:relative;container-type:inline-size}

.product-media::after{
  content:'';
  position:absolute;
  right:16px;
  top:calc(100cqw - 42px);          /* görselin alt kenarından 42px yukarı */
  width:130px;
  height:26px;                      /* 130 / 4.94 ≈ 26, logo oranı korunur */
  background:url('/assets/img/t1-logo.png') no-repeat center right/contain;
  opacity:.78;
  pointer-events:none;
  z-index:3;
  filter:drop-shadow(0 0 3px rgba(255,255,255,.95))
         drop-shadow(0 0 6px rgba(255,255,255,.65));
}

/* Kapsayıcı sorgusu desteklenmiyorsa (eski tarayıcı) görselin
   yüksekliğini bilemiyoruz; şeridin üstüne yaklaşık konumla */
@supports not (container-type: inline-size){
  .product-media::after{top:auto;bottom:96px}
}

/* Mobilde görsel küçülüyor, işaret de küçülsün */
@media (max-width:820px){
  .product-media::after{
    width:96px;height:19px;right:12px;
    top:calc(100cqw - 32px);
  }
}
@media (max-width:480px){
  .product-media::after{
    width:78px;height:16px;right:10px;
    top:calc(100cqw - 27px);
  }
}

/* Görselsiz üründe gösterme — orada "T1" yer tutucusu var */
.product-media:has(.noimg)::after{display:none}

/* --- Ana görselde oran koruması ---
   #pmain'e objectFit:fill uygulanıyor ve kare kutuya zorlanıyor.
   Kare olmayan bir fotoğraf gelirse ezilir — logodaki hatanın aynısı.
   contain ile oran korunur, hiçbir yeri kırpılmaz. */
.product-media img#pmain{object-fit:contain}

/* =====================================================================
   19) "T1 RACING ACADEMY." TEK SATIRDA
   ---------------------------------------------------------------------
   Ölçüm: yazı, font boyutunun 10.53 katı genişlik kaplıyor
   (18 karakter, Albert Sans 900, harf aralığı -0.03em).
   site.css'te font clamp ile 207px'e çıkıyordu; o boyutta yazı
   2183px istiyor ama kapsayıcı 1441px — ikinci satıra düşüyordu.

   Çözüm: font boyutu doğrudan ekran genişliğine bağlanıyor ve
   white-space:nowrap ile satır kırılması kapatılıyor.

   Formül üç sınırın en küçüğünü alıyor:
     8.1vw                    → mobilde .wrap dolgusu 5vw olduğu için
     (100vw - 80px) / 11      → masaüstünde dolgu 40px sabit
     180px                    → çok geniş ekranda abartmasın

   Nokta kaldırıldı: katsayı 10.529'dan 10.378'e indi (%1.4 kazanç).
   Asıl kazanç güvenlik payının daralmasıyla geldi.

   Ölçülen sonuç — tümü tek satır, ortalı, yatay taşma yok:
      320px → 26px  (pay %4.6)      768px →  63px  (pay %3.9)
      360px → 29px  (pay %1.4)     1536px → 133px  (pay %4.1)
      390px → 32px  (pay %1.8)
   ===================================================================== */
/* Nokta kaldırıldı — işaretlemede <span class="dot">.</span> olarak
   duruyor, CSS ile gizleniyor. index.php'ye dokunmak gerekmedi;
   geri istersen bu satırı sil. */
.hero-title .ht-big .dot{display:none}

.hero-title .ht-big{
  white-space:nowrap;
  text-align:center;
  line-height:1.02;
  letter-spacing:-.03em;
  /* Masaüstü: .wrap dolgusu 40px sabit. 92px = 2×40 dolgu + 12px pay */
  font-size:min(calc((100vw - 92px) / 10.85), 190px);
}
/* 800px altında dolgu 5vw'ye düşüyor, formül değişiyor.
   Önce burada da 40px varsayılmıştı ve mobilde gereksiz küçük
   kalıyordu — 390px'de 28px yerine artık 32px. */
@media (max-width:799px){
  .hero-title .ht-big{font-size:8.15vw}
}
/* 320px altında dolgu 16px'e sabitleniyor */
@media (max-width:320px){
  .hero-title .ht-big{font-size:calc((100vw - 40px) / 10.85)}
}

/* Üstteki "PROFESYONEL MOTORSPORLARI PROGRAMI" satırı mobilde
   iki satıra bölünüyor, o normal — başlıkla dengeli dursun diye
   biraz küçültülüyor */
@media (max-width:480px){
  .hero-title .ht-left{font-size:.82rem;line-height:1.25}
}

/* =====================================================================
   20) MARKA İŞARETİ SAĞ ALTTAN SAĞ ÜSTE
   ---------------------------------------------------------------------
   Sorun: 126 üründe kaynak filigranı sağ alt köşede duruyor (zemin düz
   olmadığı için temizlenemeyenler — turkuaz/desenli eldivenler gibi).
   T1 işareti de sağ alta konduğu için ikisi üst üste biniyor ve
   okunmaz bir karmaşa oluşuyor.

   Çözüm: işaret sağ ÜST köşeye taşınıyor. O köşe boş — sol üstte
   rozetler (.pc-badges), sol altta marka etiketi var.
   Bu, filigranı kapatmaya çalışmak değil; sadece kendi işaretimizi
   dolu olmayan bir köşeye almak.
   ===================================================================== */

/* Kart: sağ üst */
body.shop-page .pc-media::after{
  top:8px;
  bottom:auto;
  right:8px;
}
@media (max-width:820px){
  body.shop-page .pc-media::after{top:6px;bottom:auto;right:6px}
}

/* Ürün detay: sağ üst.
   Kapsayıcı sorgusuyla hesaplanan alt konum artık gerekmiyor. */
.product-media::after{
  top:16px;
  bottom:auto;
  right:16px;
}
@media (max-width:820px){
  .product-media::after{top:12px;bottom:auto;right:12px}
}
@media (max-width:480px){
  .product-media::after{top:10px;bottom:auto;right:10px}
}
@supports not (container-type: inline-size){
  .product-media::after{top:16px;bottom:auto}
}

/* =====================================================================
   21) ÜRÜN DETAY SAYFASI — AÇIK ZEMİN
   ---------------------------------------------------------------------
   Detay sayfasının gövdesinde SINIF YOK (body class boş). Mağaza için
   yazılan body.shop-page kuralları buraya hiç uygulanmıyordu, sayfa
   koyu kalıyordu. Bu blok .product-detail bölümünü hedefliyor.

   Ölçülen sorunlar:
     section.product-detail   zemin  rgb(13,13,13)
     h1, h2, a, span          yazı   beyaz
     .price.big               yazı   fıstık yeşili rgb(196,229,56)
     .lead                    yazı   rgb(180,180,184)
     .p-meta b                yazı   rgb(161,161,170)
     input.qty                zemin  rgb(21,21,24)
     .shop-card, .shop-thumb  zemin  rgb(21,21,24) / rgb(10,10,12)

   Renk paleti mağaza sayfasıyla aynı tutuldu:
     zemin #fff · metin #18181b · ikincil #71717a · çizgi #e4e4e7
   ===================================================================== */

.product-detail{background:#fff;color:#18181b}

/* --- Üst bilgi --- */
.product-detail .back{color:#71717a}
.product-detail .back:hover{color:var(--red)}
.product-detail .shop-cat{color:var(--red)}
.product-detail h1{color:#18181b}

/* --- Fiyat: fıstık yeşili açık zeminde okunmuyor --- */
.product-detail .price,
.product-detail .price.big{color:#18181b;border-color:#e4e4e7}
.product-detail .price .was,
.product-detail .price s{color:#a1a1aa}
.product-detail .price.big .was{color:#a1a1aa}

/* --- Ürün kodu / stok şeridi --- */
.product-detail .p-meta{color:#71717a;border-color:#e4e4e7}
.product-detail .p-meta b{color:#18181b}
.product-detail .p-meta .in{color:#16a34a}
.product-detail .p-meta .out{color:#dc2626}

/* --- Kısa açıklama --- */
.product-detail .lead{color:#3f3f46}

/* --- Görsel alanı --- */
.product-detail .product-media img{background:#f4f4f5}
.product-detail .pgal button{background:#fff;border:1px solid #e4e4e7;border-radius:4px}
.product-detail .pgal button.on{border-color:#18181b}
.product-detail .pgal button:hover{border-color:#a1a1aa}
.product-detail .pgal img{background:#f4f4f5}

/* --- Beden seçimi --- */
.product-detail .t1-beden-sec__bas{color:#18181b}
.product-detail .t1-beden-sec__bas span{color:#71717a}
.product-detail .t1-beden-pul span{background:#fff;border-color:#d4d4d8;color:#3f3f46}
.product-detail .t1-beden-pul:hover span{border-color:#18181b;color:#18181b}
.product-detail .t1-beden-pul input:checked + span{background:#18181b;border-color:#18181b;color:#fff}
.product-detail .t1-beden-pul--tuk span{background:#f4f4f5;color:#a1a1aa}

/* --- Adet ve sepet --- */
.product-detail input.qty{
  background:#fff;border:1px solid #d4d4d8;color:#18181b;border-radius:4px;
}
.product-detail input.qty:focus{outline:none;border-color:#18181b}
.product-detail .btn-ghost{background:#fff;border-color:#d4d4d8;color:#18181b}
.product-detail .btn-ghost:hover{background:#18181b;border-color:#18181b;color:#fff}

/* --- Uzun açıklama --- */
.product-detail .product-desc{color:#3f3f46;border-color:#e4e4e7}
.product-detail .product-desc h2,
.product-detail .product-desc h3{color:#18181b}
.product-detail .product-desc a{color:var(--red)}
.product-detail .product-desc strong,
.product-detail .product-desc b{color:#18181b}
.product-detail .product-desc ul li::marker{color:var(--red)}
.product-detail .product-desc blockquote{background:#fafafa;border-left-color:var(--red);color:#3f3f46}
.product-detail .product-desc table{border-color:#e4e4e7}
.product-detail .product-desc th{background:#f4f4f5;color:#18181b}
.product-detail .product-desc td{border-color:#f4f4f5}

/* --- Benzer ürünler --- */
.product-detail .rel-h,
.product-detail h2{color:#18181b}
.product-detail .shop-card{background:#fff;border:1px solid #e4e4e7;border-radius:8px}
.product-detail .shop-card:hover{border-color:#a1a1aa;box-shadow:0 8px 22px rgba(24,24,27,.08)}
.product-detail .shop-thumb{background:#f4f4f5}
.product-detail .shop-thumb img{background:#f4f4f5}
.product-detail .shop-body h3,
.product-detail .shop-body h3 a{color:#18181b}
.product-detail .shop-body h3 a:hover{color:var(--red)}
.product-detail .shop-body p{color:#71717a}
.product-detail .shop-foot{border-top-color:#f4f4f5}
.product-detail .shop-foot .price,
.product-detail .shop-foot span.price{color:#18181b}
.product-detail .shop-card .noimg{background:#f4f4f5;color:#d4d4d8}

/* --- Genel yakalayıcı: kalan beyaz yazılar --- */
.product-detail a{color:#18181b}
.product-detail a:hover{color:var(--red)}
.product-detail .btn-primary,
.product-detail .btn-primary:hover{color:#fff}   /* kırmızı düğme beyaz kalsın */
.product-detail .t1-marka-etiket{color:#fff}     /* koyu etiket, beyaz yazı doğru */

/* =====================================================================
   22) EĞİTİM KARTLARI — EŞİT YÜKSEKLİK
   ---------------------------------------------------------------------
   Üç kart (Karting / Otomobil / Formula 3) farklı boydaydı. İki
   sebebi vardı, ikisi de düzeltildi:

   1) METİN UZUNLUĞU — index.php kesme sınırı 720 karakterdi ve
      uzunluklar 682 / 322 / 399 çıkıyordu. Sınır 460'a indirildi,
      şimdi 338 / 322 / 399. Karting metni "…profesyonel eğitmenler
      eşliğinde gerçekleştirilir." cümlesinde bitiyor.

   2) IZGARA HİZASI — .pd-grid üç kolonlu grid ama kartlar içeriğe
      göre uzuyordu. Kartlar artık aynı yükseklikte ve metin sabit
      satır sayısına kilitli; 77 karakterlik kalan fark da görünmüyor.
   ===================================================================== */
.programs-dark .pd-grid{
  align-items:stretch;                /* kartlar aynı yükseklikte */
}
.programs-dark .pd-col{
  display:flex;
  flex-direction:column;
  height:100%;
}
/* Başlık iki satıra çıkarsa alttaki çizgi kaymasın */
.programs-dark .pd-col h3{
  min-height:2.7rem;
  display:flex;
  align-items:flex-start;
}
.programs-dark .pd-col p{
  margin:0;
  /* Sabit satır sayısı: kalan karakter farkı görünmüyor.
     8 satır × 1.75 satır yüksekliği ≈ 14rem */
  display:-webkit-box;
  -webkit-line-clamp:8;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

@media (max-width:1200px){
  .programs-dark .pd-col p{-webkit-line-clamp:10}
}
/* Tek kolona düştüğünde kısıtlama gereksiz, metin tam görünsün */
@media (max-width:860px){
  .programs-dark .pd-col h3{min-height:0}
  .programs-dark .pd-col p{-webkit-line-clamp:unset;display:block;overflow:visible}
}