/* ==========================================================================
   CSKPEDIA — cskpedia.css
   1) Aydınlık tema değişkenleri — ana sayfa ve bütün hesap/panel sayfaları
      bunu yüklüyor (marka kılavuzu CSKPEDIA için lacivert–turkuaz–beyaz).
   2) Ana sayfa "Sistem Kataloğu" — yalnız body.katalog-sayfa altında.
      Bu dosyayı yükleyen diğer sayfalara sızmasın diye her kural kapsamlı.
   ========================================================================== */

:root{
  --bg:            #FFFFFF;
  --bg-grad:       radial-gradient(120% 70% at 50% -12%, #F0FAFB 0%, #FFFFFF 55%);
  --panel:         #F7F9FB;
  --panel-solid:   #F2F6F8;
  --ink:           #0C1730;
  --ink-2:         #56637E;
  --ink-3:         #8894AB;
  --line:          #E2E8EF;
  --line-soft:     #EEF2F6;
  --vurgu:         var(--turkuaz);
  --vurgu-dim:     rgba(0,152,162,.12);
}


/* ==========================================================================
   2) ANA SAYFA — SİSTEM KATALOĞU
   Dört sistem numaralı katalog levhaları. Çalışan CSKDINE tam levha;
   yoldaki üç sistem sicil satırı. Durum damgaları dürüst: "Kullanımda" /
   "Yakında".
   ========================================================================== */

.katalog-sayfa{
  /* Okunur küçük metin için ink-3 burada koyulaştırıldı (4.5:1 üstü). */
  --ink-3:     #66728C;
  --zemin-2:   #F5F7FA;
  --cizgi:     #DCE3EB;
  --gece:      #0A1120;           /* CSKDINE menü zemini */
  /* Mercan (#FC5E30) beyazda 3.1:1 — yalnız büyük yazıda kullanılır.
     Küçük metin için aynı tonun koyusu: 5.0:1. */
  --mercan-metin: #C8401A;
  --ease-out:  cubic-bezier(0.23, 1, 0.32, 1);
  --kenar:     clamp(20px, 4.2vw, 56px);
  --genislik:  1240px;

  background: #FFFFFF;
  background-image: none;
  font-size: 15px;
  line-height: 1.55;
  overscroll-behavior-y: auto;
}
.katalog-sayfa ::selection{ background: rgba(0,152,162,.2); color: var(--lacivert) }
.katalog-sayfa :focus-visible{ outline: 2px solid var(--turkuaz); outline-offset: 3px; border-radius: 4px }
@media (prefers-reduced-motion: no-preference){
  html:has(.katalog-sayfa){ scroll-behavior: smooth }
}

.katalog-sayfa .atla{
  position: absolute; left: 12px; top: -60px; z-index: 60;
  background: var(--lacivert); color: #FFF; padding: 10px 14px; border-radius: 8px;
  font-weight: 700; font-size: 13px;
}
.katalog-sayfa .atla:focus{ top: 12px }

.katalog-sayfa h1, .katalog-sayfa h2, .katalog-sayfa h3{ text-wrap: balance }
.katalog-sayfa p{ text-wrap: pretty }


/* --- ortak düğmeler ------------------------------------------------------ */
.katalog-sayfa .eylemler{ display: flex; flex-wrap: wrap; align-items: center; gap: 12px }

.katalog-sayfa .dugme-ana,
.katalog-sayfa .dugme-ikinci{
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 0 24px; border-radius: 8px;
  font-family: var(--font-marka); font-size: 15.5px; font-weight: 600; letter-spacing: .01em;
  transition: transform 160ms var(--ease-out), background-color 180ms ease, border-color 180ms ease, color 180ms ease;
  -webkit-tap-highlight-color: transparent;
}
.katalog-sayfa .dugme-ana{ background: var(--lacivert); color: #FFFFFF }
.katalog-sayfa .dugme-ana svg{
  width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform 200ms var(--ease-out);
}
.katalog-sayfa .dugme-ikinci{ color: var(--lacivert); border: 1px solid var(--cizgi); background: #FFFFFF }
.katalog-sayfa .dugme-ana:active,
.katalog-sayfa .dugme-ikinci:active{ transform: scale(0.97) }
@media (hover: hover) and (pointer: fine){
  .katalog-sayfa .dugme-ana:hover{ background: #13307F }
  .katalog-sayfa .dugme-ana:hover svg{ transform: translateX(3px) }
  .katalog-sayfa .dugme-ikinci:hover{ border-color: var(--lacivert) }
}


/* --- marka kilidi (logo + slogan) --------------------------------------- */
.katalog-sayfa .kilit{ display: inline-flex; align-items: center; gap: 14px; min-height: 44px }
.katalog-sayfa .kilit .marka{ font-size: 21px }
.katalog-sayfa .kilit-slogan{
  font-family: var(--font-marka); font-size: 11px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3);
  padding-left: 14px; border-left: 1px solid var(--cizgi); line-height: 1.2;
}


/* --- başlık çubuğu ------------------------------------------------------- */
.katalog-sayfa .baslik-cubugu{ border-bottom: 1px solid var(--line-soft) }
.katalog-sayfa .cubuk-ic{
  max-width: var(--genislik); margin: 0 auto;
  padding: calc(12px + var(--safe-t)) var(--kenar) 12px;
  display: flex; align-items: center; gap: 28px;
}
.katalog-sayfa .sayfa-nav{ display: flex; gap: 4px; margin-left: auto }
.katalog-sayfa .sayfa-nav a{
  font-family: var(--font-marka); font-size: 14px; font-weight: 500; color: var(--ink-2);
  padding: 10px 12px; border-radius: 6px; transition: color 160ms ease;
}
@media (hover: hover) and (pointer: fine){
  .katalog-sayfa .sayfa-nav a:hover{ color: var(--lacivert) }
}
.katalog-sayfa .uyelik-yeri{ min-height: 40px; display: flex; align-items: center }
.katalog-sayfa .uyelik-yeri .ust-bar{ position: static }
.katalog-sayfa .uyelik-yeri .ust-dugme{ font-size: 13px; padding: 10px 16px; border-radius: 8px }
.katalog-sayfa .uyelik-yeri .ust-dugme.birincil{ background: var(--turkuaz); border-color: var(--turkuaz) }

@media (max-width: 860px){
  .katalog-sayfa .sayfa-nav{ display: none }
  .katalog-sayfa .uyelik-yeri{ margin-left: auto }
  .katalog-sayfa .baslik-cubugu .kilit-slogan{ display: none }
}
@media (max-width: 400px){
  .katalog-sayfa .cubuk-ic{ gap: 12px }
  .katalog-sayfa .kilit .marka{ font-size: 18px }
  .katalog-sayfa .uyelik-yeri .ust-dugme{ padding: 9px 12px; font-size: 12.5px }
}


/* --- ana içerik genişliği ----------------------------------------------- */
.katalog-sayfa main > section{
  max-width: var(--genislik); margin-left: auto; margin-right: auto;
  padding-left: var(--kenar); padding-right: var(--kenar);
}


/* ==========================================================================
   KAPAK — sol: başlık ve eylem · sağ: katalog dizini
   ========================================================================== */
.katalog-sayfa .kapak{
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(40px, 6vw, 96px); align-items: end;
  padding-top: clamp(48px, 8vw, 112px); padding-bottom: clamp(56px, 8vw, 104px);
}
.katalog-sayfa .kapak h1{
  font-family: var(--font-marka); font-weight: 300;
  font-size: clamp(42px, 5.9vw, 80px); line-height: 1.02; letter-spacing: -.035em;
  color: var(--lacivert); margin: 0; max-width: 13ch;
}
.katalog-sayfa .kapak-ozet{
  font-size: clamp(16.5px, 1.35vw, 19px); line-height: 1.6; color: var(--ink-2);
  max-width: 44ch; margin: 28px 0 0;
}
.katalog-sayfa .kapak-ozet b{ color: var(--mercan-metin); font-family: var(--font-marka); font-weight: 600; letter-spacing: .04em }
.katalog-sayfa .kapak .eylemler{ margin-top: 36px }
.katalog-sayfa .kapak-not{ margin: 16px 0 0; font-size: 13.5px; color: var(--ink-3) }

/* --- dizin --------------------------------------------------------------- */
.katalog-sayfa .dizin{ border-top: 2px solid var(--lacivert) }
.katalog-sayfa .dizin-baslik{
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-marka); font-size: 13px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--lacivert);
  margin: 0; padding: 14px 0 12px;
}
.katalog-sayfa .dizin ol{ list-style: none; margin: 0; padding: 0 }
.katalog-sayfa .dizin-satir{
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  min-height: 74px; padding: 10px 10px 10px 0;
  border-top: 1px solid var(--cizgi);
  transition: background-color 180ms ease;
  -webkit-tap-highlight-color: transparent;
}
.katalog-sayfa .dz-no, .katalog-sayfa .dz-ad{ transition: transform 220ms var(--ease-out) }
.katalog-sayfa .dizin li:last-child .dizin-satir{ border-bottom: 1px solid var(--cizgi) }
.katalog-sayfa .dz-no{
  font-family: var(--font-marka); font-weight: 300; font-size: 30px; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--sistem); letter-spacing: -.02em;
}
.katalog-sayfa .dz-ad{
  font-family: var(--font-marka); font-size: 16px; font-weight: 600; letter-spacing: .07em;
  color: var(--ink); display: flex; flex-direction: column; gap: 3px;
}
.katalog-sayfa .dz-ad small{
  font-family: var(--font-metin); font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--ink-3);
}
.katalog-sayfa .dizin-satir:active{ background: var(--zemin-2) }
@media (hover: hover) and (pointer: fine){
  .katalog-sayfa .dizin-satir:hover{ background: var(--zemin-2) }
  .katalog-sayfa .dizin-satir:hover .dz-no,
  .katalog-sayfa .dizin-satir:hover .dz-ad{ transform: translateX(8px) }
}
.katalog-sayfa .dizin-dip{ margin: 14px 0 0; font-size: 13.5px; color: var(--ink-3) }

/* durum etiketi (dizinde) */
.katalog-sayfa .durum{
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-marka); font-size: 12px; font-weight: 600; letter-spacing: .06em;
  white-space: nowrap;
}
.katalog-sayfa .durum::before{ content: ""; width: 7px; height: 7px; border-radius: 50% }
.katalog-sayfa .durum.kullanimda{ color: #007C85 }
.katalog-sayfa .durum.kullanimda::before{ background: var(--turkuaz); box-shadow: 0 0 0 3px rgba(0,152,162,.18) }
.katalog-sayfa .durum.yakinda{ color: var(--bordo) }
.katalog-sayfa .durum.yakinda::before{ border: 1.5px solid var(--bordo) }

/* giriş: dizin satırları katalogdaki sırayla yerine oturur — tek sefer */
@media (prefers-reduced-motion: no-preference){
  .katalog-sayfa .dizin li{ animation: dizin-otur 520ms var(--ease-out) both }
  .katalog-sayfa .dizin li:nth-child(2){ animation-delay: 60ms }
  .katalog-sayfa .dizin li:nth-child(3){ animation-delay: 120ms }
  .katalog-sayfa .dizin li:nth-child(4){ animation-delay: 180ms }
}
@keyframes dizin-otur{
  from{ opacity: 0; transform: translateY(10px) }
}


/* ==========================================================================
   DAMGA — "Kullanımda" / "Yakında"
   Katalog levhasına basılmış lastik damga. Hafif eğik, çift çizgi.
   ========================================================================== */
.katalog-sayfa .damga{
  display: inline-block; flex: 0 0 auto;
  font-family: var(--font-marka); font-size: 12px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; line-height: 1;
  padding: 8px 11px 7px; border-radius: 3px;
  border: 1.5px solid currentColor;
  box-shadow: inset 0 0 0 2px #FFFFFF, inset 0 0 0 3px currentColor;
  transform: rotate(-4deg);
  transition: opacity 320ms ease, transform 420ms var(--ease-out);
}
.katalog-sayfa .damga.kullanimda{ color: #007C85 }
.katalog-sayfa .damga.yakinda{ color: var(--bordo) }
/* katalog.js görünmeyen damgaları "bekliyor" yapar; ekrana girince basılır */
.katalog-sayfa .damga.bekliyor{ opacity: 0; transform: rotate(-11deg) scale(1.25) }


/* ==========================================================================
   LEVHA 01 — CSKDINE
   ========================================================================== */
.katalog-sayfa .levha-ana{
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  padding-top: 0 !important; padding-bottom: 0 !important;
  scroll-margin-top: 24px;
}
.katalog-sayfa .levha-ana > *{ min-width: 0 }
.katalog-sayfa .levha-govde{
  border: 1px solid var(--cizgi); border-right: 0; border-radius: 8px 0 0 8px;
  padding: clamp(28px, 4vw, 56px);
}
.katalog-sayfa .levha-bas{ display: flex; align-items: flex-start; gap: 22px }
.katalog-sayfa .levha-bas .damga{ margin-left: auto; margin-top: 6px }
.katalog-sayfa .levha-no{
  font-family: var(--font-marka); font-weight: 300; line-height: .8;
  font-size: clamp(64px, 7.5vw, 104px); letter-spacing: -.04em;
  font-variant-numeric: tabular-nums; color: var(--sistem);
}
.katalog-sayfa .levha-ad{
  font-family: var(--font-marka); font-size: clamp(26px, 2.6vw, 34px); font-weight: 600;
  letter-spacing: .1em; color: var(--sistem); margin: 4px 0 0;
}
.katalog-sayfa .levha-sektor{ margin: 6px 0 0; font-size: 14.5px; color: var(--ink-2); font-weight: 600 }
.katalog-sayfa .levha-tanim{
  font-size: clamp(16px, 1.3vw, 18px); line-height: 1.65; color: var(--ink);
  max-width: 52ch; margin: 30px 0 0;
}

/* özellik tablosu — noktalı yönlendirme çizgisiyle */
.katalog-sayfa .ozellikler{ margin: 34px 0 0; border-top: 1px solid var(--cizgi) }
.katalog-sayfa .ozellikler > div{
  display: grid; grid-template-columns: minmax(150px, 34%) minmax(0, 1fr); gap: 16px;
  padding: 13px 0; border-bottom: 1px solid var(--line-soft);
}
.katalog-sayfa .ozellikler dt{
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--font-marka); font-size: 14.5px; font-weight: 600; color: var(--lacivert);
}
.katalog-sayfa .ozellikler dt::after{
  content: ""; flex: 1; min-width: 12px; border-bottom: 1.5px dotted #B9C3D1; transform: translateY(-4px);
}
.katalog-sayfa .ozellikler dd{ margin: 0; font-size: 14.5px; color: var(--ink-2); line-height: 1.55 }
.katalog-sayfa .ozellikler .sonra dt,
.katalog-sayfa .ozellikler .sonra dd{ color: var(--ink-3) }
.katalog-sayfa .mini-yakinda{
  display: inline-block; margin-left: 6px; padding: 2px 7px 1px; border-radius: 3px;
  border: 1px solid var(--bordo); color: var(--bordo);
  font-family: var(--font-marka); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  vertical-align: 1px;
}

/* --- menü numunesi: CSKDINE'ın kendi gece zemini ------------------------ */
.katalog-sayfa .numune{
  margin: 0; border-radius: 0 8px 8px 0;
  background: radial-gradient(120% 80% at 50% -10%, #14243C 0%, #0A1120 60%, #070C16 100%);
  padding: clamp(28px, 4vw, 52px) clamp(20px, 3vw, 44px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
}
.katalog-sayfa .numune-cerceve{
  width: 100%; max-width: 340px;
  border-radius: 30px; padding: 22px 18px 20px;
  background: #070C16; border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 30px 60px -28px rgba(0,0,0,.8), 0 0 0 6px rgba(255,255,255,.035);
  color: #E7EDF7; font-size: 13px;
}
.katalog-sayfa .numune figcaption{ font-size: 12.5px; color: #9AABC6; text-align: center }

.katalog-sayfa .nm-ust{ text-align: center; padding-bottom: 14px }
.katalog-sayfa .nm-etiket{
  display: block; font-family: var(--font-marka); font-size: 11px; font-weight: 700;
  letter-spacing: .2em; color: var(--mercan);
}
.katalog-sayfa .nm-isletme{
  display: block; font-family: var(--font-baslik); font-size: 27px; line-height: 1.1; margin-top: 6px;
}
.katalog-sayfa .nm-masa{
  display: inline-block; margin-top: 10px; padding: 5px 12px; border-radius: 999px;
  font-family: var(--font-marka); font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  background: rgba(252,94,48,.15); color: #FF9A78;
}
.katalog-sayfa .nm-kampanya{
  border: 1px solid var(--mercan); border-radius: 12px; padding: 11px 13px;
  background: rgba(252,94,48,.12);
}
.katalog-sayfa .nm-kampanya span{
  display: block; font-family: var(--font-marka); font-size: 11px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--mercan); margin-bottom: 4px;
}
.katalog-sayfa .nm-kampanya b{ font-size: 12.5px; font-weight: 700; line-height: 1.4 }
.katalog-sayfa .nm-kategori{
  margin: 18px 0 2px; font-family: var(--font-marka); font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: #8FA3C2;
}
.katalog-sayfa .nm-urun{
  display: flex; justify-content: space-between; gap: 12px; align-items: flex-start;
  padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.08);
}
.katalog-sayfa .nm-urun:last-child{ border-bottom: 0; padding-bottom: 0 }
.katalog-sayfa .nm-urun b{ font-size: 13.5px; font-weight: 600 }
.katalog-sayfa .nm-urun.tukendi{ opacity: .5 }
.katalog-sayfa .nm-fiyat{ font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums }
.katalog-sayfa .nm-rozetler{ display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px }
.katalog-sayfa .nm-rozetler i{
  font-style: normal; font-size: 11px; letter-spacing: .01em; font-weight: 700; line-height: 1.3;
  padding: 3px 7px; border-radius: 5px;
}
.katalog-sayfa .nm-rozetler .alerjen{ background: rgba(226,76,116,.16); color: #FF8FAC }
.katalog-sayfa .nm-rozetler .temiz{ background: rgba(0,145,116,.18); color: #5FD3B4 }
.katalog-sayfa .nm-rozetler .sorunuz{ background: rgba(214,158,46,.16); color: #E7BC6A }
.katalog-sayfa .nm-rozetler .yok{ background: rgba(255,255,255,.06); color: #A9B8D0 }
.katalog-sayfa .nm-boyutlar{ display: flex; gap: 6px; margin-top: 8px }
.katalog-sayfa .nm-boyutlar span{
  font-size: 11.5px; font-weight: 600; padding: 5px 9px; border-radius: 6px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
}
.katalog-sayfa .nm-boyutlar em{ font-style: normal; font-weight: 700; margin-left: 5px; font-variant-numeric: tabular-nums }


/* hedef vurgusu — dizinden tıklanınca levha kısa bir an işaretlenir */
@media (prefers-reduced-motion: no-preference){
  .katalog-sayfa .levha-ana:target .levha-govde,
  .katalog-sayfa .sicil-satir:target{ animation: hedef-isaret 1400ms var(--ease-out) }
}
@keyframes hedef-isaret{
  0%  { background-color: color-mix(in srgb, var(--sistem) 12%, #FFFFFF) }
  100%{ background-color: #FFFFFF }
}


/* ==========================================================================
   KATILIM — dört adım
   ========================================================================== */
.katalog-sayfa .katilim{ padding-top: clamp(88px, 11vw, 152px); padding-bottom: clamp(72px, 9vw, 120px); scroll-margin-top: 8px }
.katalog-sayfa .katilim h2,
.katalog-sayfa .yolda-bas h2,
.katalog-sayfa .kapanis h2{
  font-family: var(--font-marka); font-weight: 300; color: var(--lacivert);
  font-size: clamp(32px, 3.8vw, 52px); line-height: 1.06; letter-spacing: -.03em; margin: 0;
}
.katalog-sayfa .adimlar{
  list-style: none; margin: 48px 0 44px; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px;
  counter-reset: none;
}
.katalog-sayfa .adimlar li{ position: relative; padding-top: 58px }
/* adımları birbirine bağlayan çizgi */
.katalog-sayfa .adimlar li::before{
  content: ""; position: absolute; left: 0; right: -32px; top: 19px; height: 1px; background: var(--cizgi);
}
.katalog-sayfa .adimlar li:last-child::before{ right: 0 }
.katalog-sayfa .adim-no{
  position: absolute; top: 0; left: 0;
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: #FFFFFF; border: 1.5px solid var(--lacivert); color: var(--lacivert);
  font-family: var(--font-marka); font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums;
}
/* son adım mercan: üzerinde lacivert rakam (4.9:1) — beyaz 3.1:1 kalıyordu */
.katalog-sayfa .adimlar li:last-child .adim-no{ background: var(--mercan); border-color: var(--mercan); color: var(--lacivert) }
.katalog-sayfa .adimlar h3{ font-family: var(--font-marka); font-size: 18px; font-weight: 600; color: var(--ink); margin: 0 }
.katalog-sayfa .adimlar p{ margin: 10px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); max-width: 30ch }


/* ==========================================================================
   YOLDAKİ SİSTEMLER — sicil satırları
   ========================================================================== */
.katalog-sayfa .yolda{ padding-bottom: clamp(88px, 11vw, 144px); scroll-margin-top: 8px }
.katalog-sayfa .yolda-bas{
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: end;
  padding-bottom: 28px; border-bottom: 2px solid var(--lacivert);
}
.katalog-sayfa .yolda-bas p{ margin: 0; font-size: 16px; color: var(--ink-2); max-width: 42ch }

.katalog-sayfa .sicil-satir{
  display: grid;
  grid-template-columns: 112px minmax(140px, 200px) minmax(0, 1fr) 168px;
  gap: clamp(20px, 3vw, 40px); align-items: start;
  padding: 36px 0; border-bottom: 1px solid var(--cizgi);
  scroll-margin-top: 24px;
}
.katalog-sayfa .sicil-satir .levha-no{ font-size: clamp(48px, 5vw, 72px) }
.katalog-sayfa .sicil-kimlik h3{
  font-family: var(--font-marka); font-size: 21px; font-weight: 600; letter-spacing: .09em;
  color: var(--sistem); margin: 4px 0 0;
}
.katalog-sayfa .sicil-kimlik p{ margin: 6px 0 0; font-size: 14px; font-weight: 600; color: var(--ink-2) }
.katalog-sayfa .sicil-icerik > p{ margin: 2px 0 0; font-size: 16px; line-height: 1.65; color: var(--ink); max-width: 60ch }
.katalog-sayfa .sicil-icerik ul{ list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px }
.katalog-sayfa .sicil-icerik li{
  position: relative; padding-left: 20px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2);
}
.katalog-sayfa .sicil-icerik li::before{
  content: ""; position: absolute; left: 1px; top: .58em; width: 7px; height: 7px; background: var(--sistem); border-radius: 1px;
}
.katalog-sayfa .sicil-son{ display: flex; flex-direction: column; align-items: flex-end; gap: 22px; padding-top: 8px }
.katalog-sayfa .oku{
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  font-family: var(--font-marka); font-size: 14.5px; font-weight: 600; color: #007C85;
}
.katalog-sayfa .oku svg{
  width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; transition: transform 200ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine){
  .katalog-sayfa .oku:hover{ color: var(--lacivert) }
  .katalog-sayfa .oku:hover svg{ transform: translateX(3px) }
}


/* ==========================================================================
   VERİ — lacivert bant
   ========================================================================== */
.katalog-sayfa main > section.veri{
  max-width: none; padding: 0; background: var(--lacivert); color: #FFFFFF;
  scroll-margin-top: 0;
}
.katalog-sayfa .veri-ic{
  max-width: var(--genislik); margin: 0 auto;
  padding: clamp(72px, 9vw, 128px) var(--kenar);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px);
}
.katalog-sayfa .veri h2{
  font-family: var(--font-baslik); font-weight: 400;
  font-size: clamp(38px, 4.4vw, 60px); line-height: 1.05; letter-spacing: -.01em; margin: 0; max-width: 12ch;
}
.katalog-sayfa .ilkeler{ margin: 0; display: grid; gap: 0 }
.katalog-sayfa .ilkeler > div{ padding: 22px 0; border-top: 1px solid rgba(255,255,255,.16) }
.katalog-sayfa .ilkeler > div:last-child{ border-bottom: 1px solid rgba(255,255,255,.16) }
.katalog-sayfa .ilkeler dt{ font-family: var(--font-marka); font-size: 18px; font-weight: 600; color: #FFFFFF }
.katalog-sayfa .ilkeler dd{ margin: 8px 0 0; font-size: 15px; line-height: 1.65; color: #BFCAE2; max-width: 56ch }
.katalog-sayfa .ilkeler a{ color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #2CC6CE }
.katalog-sayfa .veri :focus-visible{ outline-color: #2CC6CE }


/* ==========================================================================
   KAPANIŞ ve ALT
   ========================================================================== */
.katalog-sayfa .kapanis{ padding-top: clamp(88px, 11vw, 144px); padding-bottom: clamp(88px, 11vw, 144px) }
.katalog-sayfa .kapanis p{ margin: 18px 0 32px; font-size: 17px; color: var(--ink-2); max-width: 48ch }

/* ==========================================================================
   TANITIM SAYFALARI — her sistemin kendi levhası (optivera, pastoria,
   cskbook, cskdine/tanitim). Ana sayfa levhasının tek başına hâli.
   ========================================================================== */
.katalog-sayfa .geri-bag{
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  font-family: var(--font-marka); font-size: 14px; font-weight: 600; color: var(--lacivert);
  padding: 0 4px;
}
.katalog-sayfa .geri-bag svg{
  width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; transform: scaleX(-1);
  transition: transform 200ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine){
  .katalog-sayfa .geri-bag:hover svg{ transform: scaleX(-1) translateX(3px) }
}

.katalog-sayfa .tanitim-bas{
  padding-top: clamp(48px, 7vw, 96px); padding-bottom: clamp(40px, 5vw, 64px);
  position: relative;
}
/* alt çizgi içerik genişliğinde: border kullanılsa kenar boşluğuna taşardı */
.katalog-sayfa .tanitim-bas::after{
  content: ""; position: absolute; left: var(--kenar); right: var(--kenar); bottom: 0;
  height: 2px; background: var(--lacivert);
}
.katalog-sayfa .tb-ust{ display: flex; align-items: flex-start; gap: clamp(18px, 2.4vw, 32px) }
.katalog-sayfa .tb-ust .damga{ margin-left: auto; margin-top: 10px }
.katalog-sayfa .tanitim-bas h1{
  font-family: var(--font-marka); font-size: clamp(30px, 3.6vw, 48px); font-weight: 600;
  letter-spacing: .09em; color: var(--sistem); margin: 6px 0 0; line-height: 1.05;
}
.katalog-sayfa .tanitim-bas .ust-sistem{
  margin: 8px 0 0; font-size: 15px; font-weight: 600; color: var(--ink-2);
}
.katalog-sayfa .tanitim-bas .ust-sistem a{ color: var(--lacivert); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--cizgi) }
.katalog-sayfa .tanitim-ozet{
  font-size: clamp(17px, 1.5vw, 21px); line-height: 1.6; color: var(--ink);
  max-width: 58ch; margin: clamp(28px, 3vw, 40px) 0 0;
}

.katalog-sayfa .tanitim-bolum{ padding-top: clamp(56px, 7vw, 96px) }
.katalog-sayfa .tanitim-bolum > h2{
  font-family: var(--font-marka); font-weight: 300; color: var(--lacivert);
  font-size: clamp(28px, 3vw, 40px); line-height: 1.1; letter-spacing: -.025em; margin: 0 0 8px;
}
.katalog-sayfa .tanitim-bolum > p{ font-size: 16px; line-height: 1.65; color: var(--ink-2); max-width: 62ch; margin: 12px 0 0 }
.katalog-sayfa .tanitim-bolum .ozellikler{ max-width: 860px; margin-top: 28px }
.katalog-sayfa .tanitim-bolum .sicil{ margin-top: 28px; border-top: 1px solid var(--cizgi) }

/* durum etiketi özellik satırının sağında */
.katalog-sayfa .ozellikler dd .mini-yakinda,
.katalog-sayfa .ozellikler dd .mini-canli{ white-space: nowrap }
.katalog-sayfa .mini-canli{
  display: inline-block; margin-left: 6px; padding: 2px 7px 1px; border-radius: 3px;
  border: 1px solid #007C85; color: #007C85;
  font-family: var(--font-marka); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  vertical-align: 1px;
}

/* uzun akışlar: her genişlikte dikey zaman çizgisi */
.katalog-sayfa .adimlar.dikey{ grid-template-columns: 1fr; gap: 0; max-width: 760px; margin: 32px 0 0 }
.katalog-sayfa .adimlar.dikey li{ padding: 0 0 28px 60px; min-height: 40px }
.katalog-sayfa .adimlar.dikey li::before{ left: 19px; right: auto; top: 40px; bottom: 0; width: 1px; height: auto }
.katalog-sayfa .adimlar.dikey li:last-child{ padding-bottom: 0 }
.katalog-sayfa .adimlar.dikey li:last-child::before{ display: none }
.katalog-sayfa .adimlar.dikey h3{ padding-top: 8px }
.katalog-sayfa .adimlar.dikey p{ max-width: 56ch }
/* son adım lacivert dolgu: sistem renklerinin bazılarında (pembe) beyaz rakam 4.5:1'i tutmuyor */
.katalog-sayfa .adimlar.dikey li:last-child .adim-no{ background: var(--lacivert); border-color: var(--lacivert); color: #FFFFFF }

/* LensPedia giriş karoları — tıklanamaz, ad olarak listelenir */
.katalog-sayfa .giris-karolari{
  list-style: none; margin: 28px 0 0; padding: 0; max-width: 860px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--cizgi); border-left: 1px solid var(--cizgi);
}
.katalog-sayfa .giris-karolari li{
  border-right: 1px solid var(--cizgi); border-bottom: 1px solid var(--cizgi);
  padding: 26px 20px; min-height: 96px; display: flex; align-items: flex-end;
  font-family: var(--font-marka); font-size: 15px; font-weight: 600; letter-spacing: .08em; color: var(--sistem);
}

/* düz not kutusu — kenar şeridi yok, çerçeve var */
.katalog-sayfa .not-kutu{
  max-width: 860px; margin-top: 28px; padding: 22px 24px; border: 1px solid var(--cizgi); border-radius: 8px;
  background: var(--zemin-2);
}
.katalog-sayfa .not-kutu b{ display: block; font-family: var(--font-marka); font-size: 16px; font-weight: 600; color: var(--lacivert); margin-bottom: 6px }
.katalog-sayfa .not-kutu p{ margin: 0; font-size: 15px; line-height: 1.65; color: var(--ink-2) }

.katalog-sayfa .tanitim-kapanis{ padding-top: clamp(72px, 9vw, 120px); padding-bottom: clamp(72px, 9vw, 120px) }
.katalog-sayfa .tanitim-kapanis h2{
  font-family: var(--font-marka); font-weight: 300; color: var(--lacivert);
  font-size: clamp(28px, 3vw, 40px); line-height: 1.1; letter-spacing: -.025em; margin: 0;
}
.katalog-sayfa .tanitim-kapanis p{ margin: 14px 0 28px; font-size: 16.5px; color: var(--ink-2); max-width: 52ch }

@media (max-width: 640px){
  .katalog-sayfa .tb-ust{ flex-wrap: wrap; gap: 12px 18px }
  .katalog-sayfa .tb-ust .damga{ margin-left: 0; order: 3 }
  .katalog-sayfa .giris-karolari{ grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .katalog-sayfa .giris-karolari li{ min-height: 80px; padding: 20px 14px; font-size: 13.5px }
  .katalog-sayfa .tanitim-kapanis .eylemler{ flex-direction: column; align-items: stretch }
  .katalog-sayfa .tanitim-kapanis .eylemler a{ justify-content: center }
}


/* 404 — kapanış düzeninin başlık seviyesi H1 */
.katalog-sayfa .bulunamadi{ min-height: 70vh; display: flex; flex-direction: column; justify-content: center }
.katalog-sayfa .bulunamadi .levha-no{ margin-bottom: 28px }
.katalog-sayfa .bulunamadi h1{
  font-family: var(--font-marka); font-weight: 300; color: var(--lacivert);
  font-size: clamp(32px, 3.8vw, 52px); line-height: 1.06; letter-spacing: -.03em; margin: 0;
}

.katalog-sayfa .sayfa-alt{ border-top: 1px solid var(--cizgi) }
.katalog-sayfa .alt-ic{
  max-width: var(--genislik); margin: 0 auto;
  padding: 28px var(--kenar) calc(32px + var(--safe-b));
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px;
}
.katalog-sayfa .alt-nav{ display: flex; flex-wrap: wrap; gap: 4px 6px }
.katalog-sayfa .alt-nav a{
  font-size: 14px; color: var(--ink-2); padding: 10px 10px; border-radius: 8px;
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px;
  transition: text-decoration-color 160ms ease, color 160ms ease;
}
@media (hover: hover) and (pointer: fine){
  .katalog-sayfa .alt-nav a:hover{ color: var(--lacivert); text-decoration-color: currentColor }
}


/* ==========================================================================
   DUYARLI DÜZEN
   ========================================================================== */
@media (max-width: 1020px){
  .katalog-sayfa .sicil-satir{ grid-template-columns: 88px minmax(0, 1fr) auto; }
  .katalog-sayfa .sicil-icerik{ grid-column: 2 / -1; grid-row: 2 }
  .katalog-sayfa .sicil-son{ grid-column: 3; grid-row: 1; flex-direction: row; align-items: center }
  .katalog-sayfa .adimlar{ grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px }
  .katalog-sayfa .adimlar li:nth-child(2)::before{ right: 0 }
}

@media (max-width: 900px){
  .katalog-sayfa .kapak{ grid-template-columns: 1fr; align-items: start }
  .katalog-sayfa .kapak h1{ max-width: 14ch }
  .katalog-sayfa .levha-ana{ grid-template-columns: 1fr }
  .katalog-sayfa .levha-govde{ border-right: 1px solid var(--cizgi); border-bottom: 0; border-radius: 8px 8px 0 0 }
  .katalog-sayfa .numune{ border-radius: 0 0 8px 8px }
  .katalog-sayfa .veri-ic{ grid-template-columns: 1fr; gap: 36px }
  .katalog-sayfa .yolda-bas{ grid-template-columns: 1fr; gap: 14px }
}

@media (max-width: 640px){
  .katalog-sayfa .kapak .eylemler{ flex-direction: column; align-items: stretch }
  .katalog-sayfa .kapak .eylemler a,
  .katalog-sayfa .kapanis .eylemler a{ justify-content: center }
  .katalog-sayfa .kapanis .eylemler{ flex-direction: column; align-items: stretch }
  .katalog-sayfa .katilim > .dugme-ana{ display: flex; justify-content: center }

  .katalog-sayfa .levha-bas{ flex-wrap: wrap; gap: 14px 18px }
  .katalog-sayfa .levha-bas .damga{ margin-left: 0; order: 3; flex-basis: auto }
  .katalog-sayfa .ozellikler > div{ grid-template-columns: 1fr; gap: 3px; padding: 12px 0 }
  .katalog-sayfa .ozellikler dt::after{ display: none }

  .katalog-sayfa .adimlar{ grid-template-columns: 1fr; gap: 0; margin-top: 36px }
  .katalog-sayfa .adimlar li{ padding: 0 0 30px 60px; min-height: 40px }
  .katalog-sayfa .adimlar li::before{ left: 19px; right: auto; top: 40px; bottom: 0; width: 1px; height: auto }
  .katalog-sayfa .adimlar li:last-child{ padding-bottom: 0 }
  .katalog-sayfa .adimlar li:last-child::before{ display: none }
  .katalog-sayfa .adimlar h3{ padding-top: 8px }

  .katalog-sayfa .sicil-satir{ grid-template-columns: auto minmax(0, 1fr); gap: 4px 18px; padding: 30px 0 }
  .katalog-sayfa .sicil-satir .levha-no{ grid-row: 1; grid-column: 1; font-size: 48px }
  .katalog-sayfa .sicil-kimlik{ grid-row: 1; grid-column: 2 }
  .katalog-sayfa .sicil-icerik{ grid-column: 1 / -1; grid-row: 2; margin-top: 16px }
  .katalog-sayfa .sicil-son{ grid-column: 1 / -1; grid-row: 3; flex-direction: row; justify-content: space-between; align-items: center; margin-top: 18px; padding-top: 0 }

  .katalog-sayfa .alt-ic{ flex-direction: column; align-items: flex-start }
  .katalog-sayfa .alt-nav{ margin-left: -10px }
}