/* ===== Vuetify renk teması (primary #1976d2) ===== */
.v-application a{color:#1976d2}.v-application .primary{background-color:#1976d2!important;border-color:#1976d2!important}.v-application .primary--text{color:#1976d2!important;caret-color:#1976d2!important}.v-application .primary.darken-1{background-color:#005eb6!important;border-color:#005eb6!important}.v-application .primary.darken-2{background-color:#00479b!important;border-color:#00479b!important}.v-application .secondary{background-color:#424242!important;border-color:#424242!important}.v-application .accent{background-color:#82b1ff!important;border-color:#82b1ff!important}.v-application .error{background-color:#ff5252!important;border-color:#ff5252!important}.v-application .info{background-color:#2196f3!important;border-color:#2196f3!important}.v-application .success{background-color:#4caf50!important;border-color:#4caf50!important}.v-application .warning{background-color:#fb8c00!important;border-color:#fb8c00!important}

/* ===== Statik mod düzeltmeleri (menü/drawer/mobil) ===== */
/* Sol menü: masaüstünde sabit açık, içerik sağa kaysın */
.v-navigation-drawer.static-drawer{transform:none!important;visibility:visible!important;width:256px}
@media (min-width:1264px){
  .v-navigation-drawer.static-drawer{transform:translateX(0)!important}
  main.v-main{padding-left:256px!important}
}
@media (max-width:1263.98px){
  .v-navigation-drawer.static-drawer{transform:translateX(-100%)!important}
  .v-navigation-drawer.static-drawer.is-open{transform:translateX(0)!important;box-shadow:0 8px 10px -5px rgba(0,0,0,.2),0 16px 24px 2px rgba(0,0,0,.14),0 6px 30px 5px rgba(0,0,0,.12)}
  main.v-main{padding-left:0!important}
  .static-scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:5;opacity:0;visibility:hidden;transition:opacity .2s}
  .static-scrim.is-open{opacity:1;visibility:visible}
}
@media (min-width:1264px){ .static-hamburger{display:none!important} }
/* başlık ¶ çapaları sadece hover'da görünsün (Wiki.js davranışı) */
.contents .toc-anchor{opacity:0;transition:opacity .15s}
.contents h1:hover .toc-anchor,.contents h2:hover .toc-anchor,.contents h3:hover .toc-anchor,.contents h4:hover .toc-anchor{opacity:.4}
.contents .toc-anchor:hover{opacity:1}
/* drawer scroll */
.v-navigation-drawer.static-drawer .v-navigation-drawer__content{height:calc(100vh - 56px);overflow-y:auto}
/* katlanır menü gizleme (injectCSS yedeği) */
.mad-collapsed{display:none!important}

/* ===== Sol menü scrollbar'ı menü tonuna uydur (gri yerine beyazımsı) ===== */
nav.v-navigation-drawer .v-navigation-drawer__content{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.45) transparent}
nav.v-navigation-drawer .v-navigation-drawer__content::-webkit-scrollbar{width:8px}
nav.v-navigation-drawer .v-navigation-drawer__content::-webkit-scrollbar-track{background:transparent}
nav.v-navigation-drawer .v-navigation-drawer__content::-webkit-scrollbar-thumb{background:rgba(255,255,255,.45);border-radius:4px}
nav.v-navigation-drawer .v-navigation-drawer__content::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.7)}

/* TOC (Sayfa İçeriği) anchor linkleri düz görünsün */
/* ===== Sayfa İçeriği (TOC) — orijinal Wiki.js gibi yumuşak gri, saf siyah değil ===== */
.page-toc-card{position:sticky;top:72px}                 /* kaydırınca ekranda kalsın */
.page-toc-card .v-list-item{text-decoration:none;min-height:34px;border-radius:6px;transition:background-color .18s ease,color .18s ease}
.page-toc-card .v-list-item__title{white-space:normal;line-height:1.35;color:rgba(0,0,0,.62)!important;font-size:.8125rem;font-weight:400;letter-spacing:.005em;transition:color .18s ease}
/* alt başlık (h3) — daha soluk, girintili */
.page-toc-card .caption.v-list-item__title{color:rgba(0,0,0,.46)!important;font-size:.78rem}
.page-toc-card .v-list-item .v-icon{color:rgba(0,0,0,.28)!important;transition:color .18s ease}
/* hover — yumuşak mavi geçiş */
.page-toc-card .v-list-item:hover{background:rgba(25,118,210,.08)}
.page-toc-card .v-list-item:hover .v-list-item__title{color:#1976d2!important}
.page-toc-card .v-list-item:hover .v-icon{color:#1976d2!important}

/* ===== Yumuşak kaydırma (TOC'a tıklayınca sert zıplama yerine akıcı geçiş) ===== */
html{scroll-behavior:smooth}
/* sabit üst bar (56px) başlığı örtmesin diye küçük pay — başlık neredeyse en üste gelir */
.contents h1[id],.contents h2[id],.contents h3[id],.contents h4[id]{scroll-margin-top:62px}

/* ===== Genel ince efektler ===== */
.contents a{transition:color .15s ease}
.page-toc-card{transition:box-shadow .2s ease}

/* ===== CLS (layout shift) azaltma — özellikle mobil ===== */
/* görseller boyutsuz yüklenip içeriği itmesin */
.contents img{max-width:100%;height:auto;display:block}
/* mobilde TOC kartı içeriğin üstünde durup yüklenince aşağıyı itmesin: gizle (masaüstünde aynen kalır) */
@media (max-width:959px){
  .page-col-sd{display:none!important}
  .page-toc-card{position:static}
}

/* ===== TOC aktif başlık (scrollspy) — bulunduğun bölüm mavi vurgulu ===== */
.page-toc-card .v-list-item.toc-active{background:rgba(25,118,210,.12)}
.page-toc-card .v-list-item.toc-active .v-list-item__title{color:#1976d2!important;font-weight:500}
.page-toc-card .v-list-item.toc-active .v-icon{color:#1976d2!important}


/* ===== Wiki.js injectCSS (özel kart/hero/kutu) ===== */
.contents {
  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  font-size: 15.5px;
  line-height: 1.8;
  color: #2c3e50;
  max-width: 900px
}
.contents h1 {
  font-size: 32px;
  font-weight: 700;
  color: #1a5276;
  margin-top: 8px;
  margin-bottom: 8px;
  letter-spacing: -.3px;
  border: none
}
.contents h2 {
  font-size: 22px;
  font-weight: 600;
  color: #1a5276;
  margin-top: 40px;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid #e8f0f8
}
.contents h3 {
  font-size: 17px;
  font-weight: 600;
  color: #2c3e50;
  margin-top: 28px;
  margin-bottom: 10px
}
.contents table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 24px 0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 8px rgba(0,0,0,.06);
  border: 1px solid #e8eef3
}
.contents table thead tr {
  background: linear-gradient(135deg,#1a5276 0,#2980b9 100%)
}
.contents table th {
  padding: 14px 18px;
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #fff;
  border: none;
  text-align: left
}
.contents table td {
  padding: 12px 18px;
  border-bottom: 1px solid #f0f4f8;
  font-size: 14px;
  color: #34495e
}
.contents table tbody tr:last-child td {
  border-bottom: none
}
.contents table tbody tr:nth-child(2n) {
  background: #f8fafe
}
.contents table tbody tr:hover {
  background: #eaf2fb;
  transition: background .2s ease
}
.contents blockquote {
  border-left: 4px solid #2980b9;
  background: linear-gradient(135deg,#eaf2fb 0,#f5f9ff 100%);
  padding: 16px 20px;
  margin: 20px 0;
  border-radius: 0 10px 10px 0;
  color: #2c3e50;
  font-size: 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,.04)
}
.contents blockquote strong {
  color: #1a5276
}
.contents blockquote p:first-child {
  margin-top: 0
}
.contents hr {
  border: none;
  height: 1px;
  background: linear-gradient(to right,transparent,#d5dfe8,transparent);
  margin: 36px 0
}
.contents a {
  color: #2980b9;
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: all .2s ease
}
.contents a:hover {
  color: #1a5276;
  border-bottom-color: #1a5276
}
.contents code {
  background: #f0f4f8;
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 13px;
  color: #c0392b;
  font-family: SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace
}
.contents pre {
  background: #1e2a3a;
  border-radius: 10px;
  padding: 20px;
  overflow-x: auto;
  box-shadow: 0 2px 12px rgba(0,0,0,.1)
}
.contents pre code {
  background: 0 0;
  color: #e8ecf1;
  padding: 0;
  font-size: 13px
}
.contents img {
  border-radius: 10px;
  box-shadow: 0 2px 16px rgba(0,0,0,.1);
  margin: 20px 0;
  max-width: 100%;
  border: 1px solid #e8eef3
}
.contents ol,
.contents ul {
  padding-left: 24px;
  margin: 12px 0
}
.contents li {
  margin: 6px 0;
  padding-left: 4px
}
.contents li::marker {
  color: #2980b9
}
.yt-features {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
  gap: 16px;
  margin: 24px 0
}
.yt-feature-card {
  border: 1px solid #e8eef3;
  border-radius: 12px;
  padding: 24px;
  background: linear-gradient(180deg,#fff 0,#f8fafe 100%);
  transition: all .3s ease;
  box-shadow: 0 1px 4px rgba(0,0,0,.04)
}
.yt-feature-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
  border-color: #2980b9
}
.yt-feature-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 14px
}
.yt-feature-card h4 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
  color: #1a5276
}
.yt-feature-card p {
  margin: 0;
  font-size: 13.5px;
  color: #5d6d7e;
  line-height: 1.6
}
.yt-steps {
  margin: 24px 0;
  position: relative
}
.yt-step {
  display: flex;
  gap: 20px;
  margin: 0 0 24px;
  position: relative
}
.yt-step-num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg,#1a5276,#2980b9);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(26,82,118,.25)
}
.yt-step-content {
  flex: 1;
  padding-top: 6px
}
.yt-step-content h4 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50
}
.yt-step-content p {
  margin: 0;
  font-size: 14px;
  color: #5d6d7e;
  line-height: 1.6
}
.yt-info-box {
  border-radius: 12px;
  padding: 20px 24px;
  margin: 20px 0;
  display: flex;
  gap: 16px;
  align-items: flex-start
}
.yt-info-box.tip {
  background: linear-gradient(135deg,#eaf7ee 0,#f0faf3 100%);
  border: 1px solid #27ae60;
  border-left: 4px solid #27ae60
}
.yt-info-box.warning {
  background: linear-gradient(135deg,#fef9e7 0,#fffdf5 100%);
  border: 1px solid #f39c12;
  border-left: 4px solid #f39c12
}
.yt-info-box.danger {
  background: linear-gradient(135deg,#fdedec 0,#fdf2f2 100%);
  border: 1px solid #e74c3c;
  border-left: 4px solid #e74c3c
}
.yt-info-box.info {
  background: linear-gradient(135deg,#eaf2fb 0,#f5f9ff 100%);
  border: 1px solid #2980b9;
  border-left: 4px solid #2980b9
}
.yt-info-box-icon {
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 2px
}
.yt-info-box-content {
  flex: 1
}
.yt-info-box-content strong {
  display: block;
  margin-bottom: 4px;
  font-size: 14px
}
.yt-info-box-content p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: #34495e
}
.yt-screenshot {
  border: 2px dashed #bdc3c7;
  border-radius: 12px;
  padding: 40px 24px;
  text-align: center;
  color: #95a5a6;
  font-size: 14px;
  margin: 20px 0;
  background: #fafbfc
}
.yt-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 24px 0
}
.yt-compare-item {
  border-radius: 12px;
  padding: 20px;
  border: 1px solid #e8eef3
}
.yt-compare-item.good {
  background: #f0faf3;
  border-color: #27ae60
}
.yt-compare-item.bad {
  background: #fdf2f2;
  border-color: #e74c3c
}
.yt-compare-item h4 {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 600
}
.yt-hero {
  background: linear-gradient(135deg,#1a5276 0,#2980b9 50%,#1a8a6a 100%);
  border-radius: 16px;
  padding: 40px 36px;
  color: #fff;
  margin: 0 0 32px;
  box-shadow: 0 4px 20px rgba(26,82,118,.2);
  position: relative;
  overflow: hidden
}
.yt-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: rgba(255,255,255,.05)
}
.yt-hero h2 {
  color: #fff;
  border: none;
  margin: 0 0 12px;
  font-size: 28px;
  padding: 0
}
.yt-hero p {
  color: rgba(255,255,255,.9);
  font-size: 15px;
  margin: 0;
  max-width: 600px;
  line-height: 1.7
}
.yt-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(140px,1fr));
  gap: 12px;
  margin: 24px 0
}
.yt-stat {
  text-align: center;
  padding: 20px 12px;
  border-radius: 12px;
  background: #f8fafe;
  border: 1px solid #e8eef3
}
.yt-stat-num {
  font-size: 28px;
  font-weight: 700;
  color: #1a5276;
  line-height: 1;
  margin-bottom: 6px
}
.yt-stat-label {
  font-size: 12px;
  color: #7f8c8d;
  text-transform: uppercase;
  letter-spacing: .5px
}
.yt-nav {
  display: flex;
  gap: 12px;
  margin: 40px 0 0;
  padding-top: 24px;
  border-top: 1px solid #e8eef3
}
.yt-nav a {
  flex: 1;
  padding: 16px 20px;
  border-radius: 12px;
  border: 1px solid #e8eef3;
  text-decoration: none;
  transition: all .2s ease;
  display: block
}
.yt-nav a:hover {
  border-color: #2980b9;
  box-shadow: 0 2px 8px rgba(41,128,185,.1);
  transform: translateY(-1px)
}
.yt-nav a .yt-nav-label {
  font-size: 12px;
  color: #95a5a6;
  margin-bottom: 4px
}
.yt-nav a .yt-nav-title {
  font-size: 15px;
  font-weight: 600;
  color: #1a5276
}
.yt-nav a.prev {
  text-align: left
}
.yt-nav a.next {
  text-align: right
}
.v-app-bar.primary {
  background: linear-gradient(135deg,#1a5276 0,#2980b9 100%)!important
}
.page-col-sd .v-card {
  border-radius: 10px!important;
  box-shadow: 0 1px 6px rgba(0,0,0,.05)!important
}
.v-breadcrumbs {
  font-size: 13px
}
.headline {
  font-size: 14px!important;
  color: #95a5a6!important
}
.yt-lightbox-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.85);
  z-index: 99999;
  cursor: zoom-out;
  justify-content: center;
  align-items: center;
  animation: ytLbIn .2s ease
}
.yt-lightbox-overlay.active {
  display: flex
}
@keyframes ytLbIn {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}
.yt-lightbox-overlay img {
  max-width: 92vw;
  max-height: 90vh;
  border-radius: 8px;
  box-shadow: 0 8px 40px rgba(0,0,0,.5);
  animation: ytLbZoom .25s ease
}
@keyframes ytLbZoom {
  from {
    transform: scale(.85);
    opacity: 0
  }
  to {
    transform: scale(1);
    opacity: 1
  }
}
.yt-lightbox-close {
  position: fixed;
  top: 16px;
  right: 20px;
  color: #fff;
  font-size: 32px;
  cursor: pointer;
  z-index: 100000;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  transition: background .2s
}
.yt-lightbox-close:hover {
  background: rgba(255,255,255,.3)
}
.contents img {
  cursor: zoom-in;
  transition: transform .2s ease,box-shadow .2s ease
}
.contents img:hover {
  transform: scale(1.01);
  box-shadow: 0 4px 20px rgba(0,0,0,.15)
}
.yt-lightbox-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.85);
  z-index: 99999;
  cursor: zoom-out;
  justify-content: center;
  align-items: center;
  animation: ytLbIn .25s ease
}
.yt-lightbox-overlay.active {
  display: flex
}
.yt-lightbox-overlay.closing {
  display: flex;
  animation: ytLbOut .25s ease forwards
}
.yt-lightbox-overlay.closing img {
  animation: ytLbZoomOut .25s ease forwards
}
@keyframes ytLbIn {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}
@keyframes ytLbOut {
  from {
    opacity: 1
  }
  to {
    opacity: 0
  }
}
@keyframes ytLbZoom {
  from {
    transform: scale(.85);
    opacity: 0
  }
  to {
    transform: scale(1);
    opacity: 1
  }
}
@keyframes ytLbZoomOut {
  from {
    transform: scale(1);
    opacity: 1
  }
  to {
    transform: scale(.85);
    opacity: 0
  }
}
.yt-lightbox-overlay img {
  max-width: 92vw;
  max-height: 90vh;
  border-radius: 8px;
  box-shadow: 0 8px 40px rgba(0,0,0,.5);
  animation: ytLbZoom .25s ease
}
.yt-lightbox-close {
  position: fixed;
  top: 16px;
  right: 20px;
  color: #fff;
  font-size: 32px;
  cursor: pointer;
  z-index: 100000;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  transition: background .2s
}
.yt-lightbox-close:hover {
  background: rgba(255,255,255,.3)
}
.contents img {
  cursor: zoom-in;
  transition: transform .2s ease,box-shadow .2s ease
}
.contents img:hover {
  transform: scale(1.01);
  box-shadow: 0 4px 20px rgba(0,0,0,.15)
}
.contents img.yt-no-zoom {
  cursor: pointer
}
.contents img.yt-no-zoom:hover {
  transform: none;
  box-shadow: 0 4px 20px rgba(0,0,0,.15)
}
.page-author-card-date {
  display: none
}
.v-subheader.mad-grp-header {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .3px;
  color: #fff!important;
  margin: 6px 8px;
  padding: 11px 14px;
  background: rgba(255,255,255,.1);
  border-left: 4px solid #fff;
  border-radius: 6px;
  transition: background .15s ease
}
.v-subheader.mad-grp-header:hover {
  background: rgba(255,255,255,.18)
}
.v-subheader.mad-grp-header.mad-open {
  background: rgba(255,255,255,.16)
}
.mad-grp-label {
  display: flex;
  align-items: center;
  gap: 10px
}
.mad-grp-icon {
  font-size: 20px;
  line-height: 1
}
.v-subheader.mad-grp-header::after {
  content: '\25BC';
  font-size: 11px;
  opacity: .85;
  transition: transform .2s ease
}
.v-subheader.mad-grp-header:not(.mad-open)::after {
  transform: rotate(-90deg)
}
.mad-collapsed {
  display: none!important
}