/* ==========================================================================
   CSKPEDIA — panel-gezinti.css
   Hesap ve panel sayfalarının ortak üst şeridi (panel-gezinti.js çizer).
   muhur-panel.css'ten SONRA yüklenir. Baskıda görünmez (QR, kitap PDF).
   ========================================================================== */

/* Şerit gelince sayfaların eski, her birinde farklı üst menüleri çekilir. */
.pg-var .yonetici-ust,
.pg-var .optik-ust{ display: none !important }
.pg-var .optik-baslik, .pg-var .yonetici-sayfa > .hesap-baslik:first-of-type{ margin-top: 6px }

@media print{ .pg{ display: none !important } }
/* telefon performansı (9 Ekim 2026): yapışkan çubukta bulanıklık kaydırmayı takıyordu */
@media (hover: none), (max-width: 760px){ .pg{ -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgb(7,13,31) !important } }

@media screen{

.pg{
  position: sticky; top: 0; z-index: 60;
  background: rgba(7,13,31,.9);
  -webkit-backdrop-filter: saturate(1.2) blur(14px); backdrop-filter: saturate(1.2) blur(14px);
  box-shadow: 0 1px 0 rgba(233,207,138,.16), 0 18px 30px -28px #000;
  font-family: var(--font-marka);
  padding-top: env(safe-area-inset-top);
}
.pg-ic{
  width: min(1180px, 100% - 40px); margin-inline: auto;
  display: flex; align-items: center; gap: 22px; min-height: 60px;
}

.pg-marka{ flex: none; display: inline-flex; align-items: center; text-decoration: none; border-radius: 10px }
.pg-marka .marka{ font-size: 17px }

/* Çalışma alanları: metin bağlantıları, seçili olanın altında pirinç çizgi. */
.pg-alanlar{
  flex: 1; min-width: 0; display: flex; align-items: stretch; gap: 4px; align-self: stretch;
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
}
.pg-alanlar::-webkit-scrollbar{ display: none }
.pg-alan{
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 9px;
  padding: 0 12px; font-size: 14.5px; font-weight: 500; letter-spacing: .01em;
  color: #BDB7AA; text-decoration: none; white-space: nowrap;
  transition: color .18s ease;
}
.pg-alan::before{
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: rgba(239,234,224,.34);
}
.pg-cskdine::before{ background: #FC5E30 }
.pg-optik::before{ background: #5B7BEA }
.pg-kitap::before{ background: #E08A3C }
.pg-yonetim::before{ background: transparent; box-shadow: inset 0 0 0 1.5px #E9CF8A }
.pg-alan::after{
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; border-radius: 2px 2px 0 0;
  background: linear-gradient(90deg, #F3DFA6, #C9A24A); transform: scaleX(0); transform-origin: left;
  transition: transform .32s cubic-bezier(.23,1,.32,1);
}
.pg-alan[aria-current="true"]{ color: #FFFFFF }
.pg-alan[aria-current="true"]::after{ transform: scaleX(1) }
.pg-kisa{ display: none }

.pg-hesap{ flex: none; display: flex; align-items: center; gap: 2px }
.pg-hesap-bag{
  display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 12px; border-radius: 10px;
  font: 500 14px var(--font-marka); color: #BDB7AA; text-decoration: none;
  background: none; border: 0; cursor: pointer;
  transition: color .18s ease, background-color .18s ease;
}
.pg-hesap-bag svg{ width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round }
.pg-hesap-bag[aria-current="page"]{ color: #E9CF8A }

/* Alanın sayfaları */
.pg-alt{ border-top: 1px solid rgba(233,207,138,.10) }
.pg-alt .pg-ic{ min-height: 54px; gap: 18px; width: min(var(--pg-gen, 1180px), 100% - 40px) }
.pg-yer{
  flex: none; max-width: 30ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #E9CF8A;
}
.pg-sekmeler{
  flex: 1; min-width: 0; display: flex; gap: 6px; padding-block: 8px;
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; scroll-padding-inline: 16px;
}
.pg-sekmeler::-webkit-scrollbar{ display: none }
.pg-sekmeler a{
  flex: none; display: inline-flex; align-items: center; min-height: 38px; padding: 0 15px; border-radius: 999px;
  font-size: 14px; font-weight: 500; color: #EFEAE0; text-decoration: none; white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(233,207,138,.26);
  transition: box-shadow .18s ease, background-color .18s ease, transform .16s cubic-bezier(.23,1,.32,1);
}
.pg-sekmeler a[aria-current="page"]{
  color: #1B1405; font-weight: 600;
  background: linear-gradient(180deg, #F3DFA6 0%, #D6B45E 38%, #B88E36 72%, #9C7628 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 8px 18px -12px #000;
}
.pg-sekmeler a:active, .pg-hesap-bag:active{ transform: scale(.97) }

.pg a:focus-visible, .pg button:focus-visible{ outline: 2px solid #E9CF8A; outline-offset: 2px }
.pg-alan:focus-visible{ outline-offset: -4px }

@media (hover: hover) and (pointer: fine){
  .pg-alan:hover{ color: #FFFFFF }
  .pg-hesap-bag:hover{ color: #FFFFFF; background: rgba(244,239,228,.06) }
  .pg-sekmeler a:not([aria-current="page"]):hover{ box-shadow: inset 0 0 0 1px rgba(233,207,138,.6); background: rgba(233,207,138,.06) }
}

/* Telefon: marka + hesap düğmeleri üstte; alanlar ve sayfalar kayar satırlar. */
@media (max-width: 860px){
  .pg-ic{ width: calc(100% - 24px); flex-wrap: wrap; gap: 0 8px; min-height: 0 }
  .pg-marka{ min-height: 52px }
  .pg-hesap{ margin-left: auto }
  .pg-hesap-bag span{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%) }
  .pg-hesap-bag{ min-width: 44px; justify-content: center; padding: 0 }
  .pg-alanlar{ order: 3; flex-basis: 100%; min-height: 46px; margin-inline: -12px; padding-inline: 4px;
    mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 22px), transparent) }
  .pg-uzun{ display: none } .pg-kisa{ display: inline }
  .pg-alt .pg-ic{ min-height: 0; flex-wrap: nowrap; width: calc(100% - 24px) }
  .pg-yer{ display: none }
  .pg-sekmeler{ margin-inline: -12px; padding-inline: 12px;
    mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 22px), transparent) }
}

@media (prefers-reduced-motion: reduce){
  .pg-alan::after, .pg-sekmeler a, .pg-hesap-bag{ transition: none }
}

}

/* Sayfaya özgü bağlantılar (eski menüden taşınanlar) */
@media screen{
  .pg-sayfa-eylem{ display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 10px }
  .pg-sayfa-eylem a{
    display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 10px;
    font: 600 14px var(--font-marka); color: #EFEAE0; text-decoration: none;
    box-shadow: inset 0 0 0 1px rgba(233,207,138,.3);
  }
  .pg-sayfa-eylem a:focus-visible{ outline: 2px solid #E9CF8A; outline-offset: 2px }
  @media (hover: hover) and (pointer: fine){ .pg-sayfa-eylem a:hover{ box-shadow: inset 0 0 0 1px rgba(233,207,138,.6); background: rgba(233,207,138,.06) } }
}
@media print{ .pg-sayfa-eylem{ display: none !important } }