/* =================================================================
   XGRIDS Türkiye — yazılım sayfaları (yazilimlar/<slug>.html, 2026-10-29)
   Bileşenlerin çoğu urun.css'ten (hero, bölüm çubuğu, zikzak, adım kartları, SSS, talep bandı); burada yalnız ekler:
   sütun sayılı kart ızgarası, gruplu kartlar, görselsiz metin kartı, "Yeni" rozeti, sürüm tablosu, yazılım vitrinli kartlar.
   Tüm ölçüler rem (masaüstü orantılı ölçekleme, site.css).
   ================================================================= */

/* ---------- Kart ızgarası: sütun sayısı veriden (kartlar--N), satırdaki kartlar eşit yükseklikte ---------- */
.kartlar--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kartlar--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kartlar--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tkartlar.kartlar--2, .tkartlar.kartlar--3, .tkartlar.kartlar--4 { gap: 1.5rem; }
.sayfa-yazilim .tkart__medya, .sayfa-yazilim .akart__medya { aspect-ratio: var(--oran, 16 / 9); }
.sayfa-yazilim .tkart__govde { display: flex; flex: 1; flex-direction: column; }
.sayfa-yazilim .tkart .etiketler { margin-top: auto; padding-top: 1rem; }

/* Video sekmeleri (CyberColor editör kartları, kullanıcı 2026-10-31): resmî sayfadaki gibi videonun altında hap biçimli sekmeler; seçilen
   sekmenin videosu oynar (js/urun.js). Satır hizası: sekmeli ızgarada kartlar alt ızgaralı üç satır (medya, sekmeler, gövde); sekmesiz kartın
   medyası sekme satırına da uzar, başlıklar yan kartlarla aynı hizada kalır (sekmeli kart olmayan satırda 16:9). */
.tkartlar--sekmeli > .tkart { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
.tkartlar--sekmeli .tkart__medya { justify-self: stretch; }
.tkartlar--sekmeli .tkart__govde { grid-row: 3; }
.tkartlar--sekmeli > .tkart:not(.tkart--sekmeli) > .tkart__medya { grid-row: 1 / span 2; align-self: stretch; position: relative; }
.tkartlar--sekmeli > .tkart:not(.tkart--sekmeli) > .tkart__medya > .u-medya { position: absolute; inset: 0; }
.vsekmeler {
  display: flex; gap: 0.125rem; margin: 1rem 1.5rem 0; padding: 0.25rem; overflow-x: auto; scrollbar-width: none;
  border-radius: 2rem; background: rgba(var(--xg-rgb), .15);
}
.vsekmeler::-webkit-scrollbar { display: none; }
/* Dar ekranda sığmayan liste kayar; devamı olan kenar solar (js/urun.js) */
.vsekmeler.is-sag { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 3rem), transparent); }
.vsekmeler.is-sol { -webkit-mask-image: linear-gradient(90deg, transparent, #000 3rem); mask-image: linear-gradient(90deg, transparent, #000 3rem); }
.vsekmeler.is-sol.is-sag { -webkit-mask-image: linear-gradient(90deg, transparent, #000 3rem calc(100% - 3rem), transparent); mask-image: linear-gradient(90deg, transparent, #000 3rem calc(100% - 3rem), transparent); }
.vsekmeler button {
  flex: 1 0 auto; padding: 0.5rem 0.5625rem; border-radius: 2rem; white-space: nowrap;
  font-size: 0.875rem; line-height: 1.3; color: rgba(255, 255, 255, .62); transition: color .2s, background-color .2s;
}
.vsekmeler button:hover { color: #fff; }
.vsekmeler button[aria-pressed="true"] { background: var(--xg); color: #fff; }
.vsekmeler button:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.bolum--kart { background: var(--kagit-2); }

/* Görselsiz metin kartı (UE kullanım alanları): üstte mavi çizgi, etiketler kart dibinde hizalı */
.akart--metin .akart__ic { border-top: 0.1875rem solid var(--xg); }
.akart--metin .akart__govde { padding: 2rem 1.75rem 1.75rem; }
.akart--metin .akart__ad { font-size: 1.875rem; }
/* Öne çıkan kart (CyberColor çıktı karşılaştırmasında LCC) */
.akart--vurgu .akart__ic { border-color: var(--xg); box-shadow: 0 0 0 1px var(--xg), 0 1.25rem 2.75rem rgba(var(--xg-rgb), .14); }
.akart__not {
  align-self: flex-start; margin-top: auto; padding: 0.1875rem 0.625rem; border-radius: 2rem;
  background: var(--xg-50); font-size: var(--fs-xs); font-weight: 600; color: var(--xg-koyu);
}
.akart--vurgu .akart__not { background: var(--xg); color: #fff; }
.akart .etiketler + .akart__not { margin-top: 0; }
/* Koyu kartta not (UE referansları koyu zeminde, kullanıcı 2026-10-31) */
.tkart__not {
  align-self: flex-start; margin-top: auto; padding: 0.1875rem 0.625rem; border-radius: 2rem;
  background: rgba(var(--xg-rgb), .18); font-size: var(--fs-xs); font-weight: 600; color: var(--xg-acik);
}
.tkart__metin:has(+ .tkart__not) { margin-bottom: 1rem; }   /* not kart dibinde; metinle arasında en az boşluk */
.tkart .etiketler + .tkart__not { margin-top: 0.75rem; }

/* "Yeni" rozeti (resmî sayfadaki NEW işareti) */
.rozet {
  display: inline-block; margin-left: 0.625rem; padding: 0.1875rem 0.5rem 0.125rem; border-radius: 2rem; vertical-align: 0.25em;
  background: var(--xg); color: #fff; font-family: var(--font); font-size: 0.6875rem; font-weight: 700; line-height: 1.2; letter-spacing: .08em;
}

/* ---------- Gruplu kartlar (LixelStudio: işleme, analiz, entegrasyon) ---------- */
.kgrup h4 { margin: 0; }   /* kart başlıkları grup altında h4; site.css sıfırlaması h1–h3'ü kapsar */
.kgrup + .kgrup { margin-top: 4.5rem; }
.kgrup__bas {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 3rem; align-items: end;
  margin-bottom: 2rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--cizgi);
}
.kgrup__ad { display: flex; align-items: center; gap: 1rem; font-family: var(--font-baslik); font-size: 2.25rem; font-weight: 700; line-height: 1.05; text-transform: uppercase; color: var(--ink); }
.kgrup__no { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--xg-50); color: var(--xg-koyu); font-size: 1.125rem; }
.kgrup__metin { font-size: var(--fs-base); line-height: 1.6; color: var(--soluk); }
.kgrup--koyu .kgrup__bas { border-bottom-color: var(--cizgi-koyu); }
.kgrup--koyu .kgrup__ad { color: #fff; }
.kgrup--koyu .kgrup__no { background: rgba(var(--xg-rgb), .22); color: var(--xg-acik); }
.kgrup--koyu .kgrup__metin { color: var(--koyu-soluk); }

/* ---------- Sürüm tablosu ---------- */
.bolum--plan { background: var(--kagit-2); }
.plan-kap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }   /* minmax(0): geniş tablo sayfayı değil kendi kabını kaydırsın */
.plan-kap--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* iki tablonun kutusu aynı boyda (stretch) */
.plan-kap .tablo-kap { background: var(--kagit); }
.plan { min-width: 34rem; }
.plan th, .plan td { padding: 0.8125rem 1.25rem; vertical-align: middle; }
.plan thead th:not(:first-child), .plan td { width: 9.5rem; text-align: center; }
.plan-kap--2 .plan thead th:not(:first-child), .plan-kap--2 .plan td { width: 7rem; }
.plan thead th { white-space: nowrap; }
.plan tbody th { font-weight: 500; white-space: normal; color: var(--metin); }
.plan tbody tr:last-child > * { border-bottom: 1px solid var(--cizgi); }
.plan tbody:last-child tr:last-child > * { border-bottom: 0; }
.plan__grup th {
  padding-block: 0.625rem; background: var(--kagit-2); font-family: var(--font-baslik); font-size: var(--fs-sm); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--xg-koyu);
}
.plan__var .ikon { width: 1.25rem; height: 1.25rem; color: var(--xg); }
.plan__yok .ikon { width: 1.125rem; height: 1.125rem; color: var(--soluk); opacity: .45; }
.plan__deger { font-weight: 600; color: var(--ink); }
.plan__dipnot { margin-top: 1rem; font-size: var(--fs-xs); line-height: 1.5; color: var(--soluk); }

/* Diğer yazılımlar kartı (.dkart--yazilim) urun.css'te: Ürünler sayfasının yazılım bölümü de kullanır (2026-10-31) */

/* ---------- Talep bandı: vitrinde yazılım görseli ---------- */
.sayfa-yazilim .utalep__vitrin { height: auto; }
.sayfa-yazilim .utalep__vitrin img {
  height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--yaricap);
  border: 1px solid rgba(255, 255, 255, .14); filter: none; box-shadow: 0 2rem 3.5rem rgba(0, 0, 0, .45);
}

/* ---------- Tablet / mobil ---------- */
@media (max-width: 1100px) {
  .kartlar--3, .kartlar--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kgrup__bas { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
  .kgrup__ad { font-size: 1.75rem; }
  .plan-kap--2 { grid-template-columns: minmax(0, 1fr); }
  .plan { min-width: 30rem; }
}
@media (max-width: 760px) {
  .kartlar--2, .kartlar--3, .kartlar--4 { grid-template-columns: minmax(0, 1fr); }
  .kgrup + .kgrup { margin-top: 3rem; }
  /* Hero rakamları: "LAS · E57 · RCP", "60–90" gibi değerler tire ya da noktadan bölünmesin */
  .sayfa-yazilim .uhero__rakamlar dd { font-size: 1.5rem; white-space: nowrap; }
  /* Sürüm tablosu telefonda yatay kaydırmasız: özellik adı kırılır, işaret sütunları dar, sürüm adları iki satıra inebilir */
  .plan { min-width: 0; }
  .plan th, .plan td { padding: 0.75rem 0.5rem; }
  .plan tbody th, .plan thead th:first-child { padding-left: 0.875rem; }
  .plan thead th { white-space: normal; font-size: var(--fs-xs); letter-spacing: .04em; }
  .plan thead th:not(:first-child), .plan td, .plan-kap--2 .plan thead th:not(:first-child), .plan-kap--2 .plan td { width: 4.25rem; }
  .plan__deger { font-size: var(--fs-xs); }
}

/* ---------- Zemin ritmi: açık bölüm varyantları ---------- */
.bolum--kart.bolum--beyaz { background: var(--kagit); }
/* Açık zeminli numaralı adımlar (Revit; urun.css .ckart koyu zemine göre) */
.bolum--adim { background: var(--kagit-2); }
.bolum--adim .ckart__medya { border-color: var(--cizgi); box-shadow: 0 1rem 2.5rem rgba(var(--ink-rgb), .1); }
.bolum--adim .ckart__ad { color: var(--ink); }
.bolum--adim .ckart__metin { color: var(--soluk); }
/* 360 px'te "LAS · E57 · RCP" sütuna sığsın (2026-11-02 ölçüm: 1,3125rem'de 111 px > 92 px sütun; yan boşluk 1rem, yazı 1,1875rem → 100 / 104 px) */
@media (max-width: 400px) {
  .sayfa-yazilim .uhero__rakamlar dd { font-size: 1.1875rem; }
  .sayfa-yazilim .uhero__rakamlar div { padding-right: 1rem; }
  .sayfa-yazilim .uhero__rakamlar div + div { padding-left: 1rem; }
  .sayfa-yazilim .uhero__rakamlar div:nth-child(3) { padding-left: 0; }
}