/* ============================================================
   YKM TEKNE GALERİ LİGHTBOX v4
   Yerinde açılan overlay — sayfa kaymaz
   Tüm tekneler için geçerli
   ============================================================ */

/* Lightbox ana kapsayıcı — her şeyin önünde */
#ykm-boat-lb {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 2147483647 !important; /* maksimum z-index */
  display: flex !important;
  flex-direction: column;
  background: #04080f;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .26s ease, visibility .26s ease;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

#ykm-boat-lb.ybl-open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Scroll kilitli body sınıfı */
body.ybl-locked {
  overflow: hidden !important;
  overscroll-behavior: none;
}

/* ── ÜST BAR ── */
.ybl-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .7rem 1.3rem;
  background: rgba(4, 8, 18, .97);
  border-bottom: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
  gap: 1rem;
}
.ybl-boat-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: #C9A84C;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ybl-counter {
  font-size: .68rem;
  color: rgba(255,255,255,.5);
  font-weight: 600;
  letter-spacing: .1em;
  white-space: nowrap;
  background: rgba(255,255,255,.07);
  padding: .22rem .7rem;
  border-radius: 20px;
  flex-shrink: 0;
}
.ybl-actions {
  display: flex;
  gap: .4rem;
  align-items: center;
  flex-shrink: 0;
}
.ybl-btn {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.65);
  width: 34px; height: 34px;
  border-radius: 8px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .16s, color .16s;
  font-family: inherit;
}
.ybl-btn:hover { background: rgba(255,255,255,.16); color: #fff; }

.ybl-close {
  background: rgba(201,168,76,.12);
  border: 1px solid rgba(201,168,76,.3);
  color: #C9A84C;
  width: 34px; height: 34px;
  border-radius: 8px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .16s, color .16s;
  font-family: inherit;
}
.ybl-close:hover { background: #C9A84C; color: #0A1628; }

/* ── GÖRSEL ALANI ── */
.ybl-stage {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #04080f;
  user-select: none;
  -webkit-user-select: none;
}

.ybl-img-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 5.5rem;
}

#ybl-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 3px;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
  will-change: transform, opacity;
}

/* Slide animasyonları */
#ybl-img.slide-in-right {
  animation: yblRight .3s cubic-bezier(.22,.61,.36,1) both;
}
#ybl-img.slide-in-left {
  animation: yblLeft .3s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes yblRight {
  from { transform: translateX(52px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes yblLeft {
  from { transform: translateX(-52px); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

/* Loader */
.ybl-loader {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.ybl-ring {
  width: 36px; height: 36px;
  border: 3px solid rgba(201,168,76,.18);
  border-top-color: #C9A84C;
  border-radius: 50%;
  animation: yblSpin .6s linear infinite;
}
@keyframes yblSpin { to { transform: rotate(360deg); } }

/* ── NAVİGASYON OKLARI ── */
.ybl-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(10,22,40,.72);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  width: 50px; height: 76px;
  border-radius: 10px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .18s, transform .18s;
  z-index: 5;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: inherit;
}
.ybl-nav:hover {
  background: rgba(201,168,76,.9);
  border-color: transparent;
  transform: translateY(-50%) scale(1.05);
}
.ybl-nav:active { transform: translateY(-50%) scale(.97); }
.ybl-prev { left: .9rem; }
.ybl-next { right: .9rem; }

/* ── ALT PANEL ── */
.ybl-bottom {
  background: rgba(4,8,18,.97);
  border-top: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Thumbnail şeridi */
.ybl-thumbs {
  display: flex;
  gap: 5px;
  padding: .6rem 1.1rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(201,168,76,.3) transparent;
  -webkit-overflow-scrolling: touch;
  justify-content: safe center;
}
.ybl-thumbs::-webkit-scrollbar { height: 3px; }
.ybl-thumbs::-webkit-scrollbar-thumb { background: rgba(201,168,76,.35); border-radius: 2px; }

.ybl-thumb {
  flex-shrink: 0;
  width: 66px; height: 48px;
  border-radius: 5px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid rgba(255,255,255,.1);
  opacity: .45;
  transition: opacity .18s, border-color .18s, transform .18s;
}
.ybl-thumb:hover { opacity: .75; transform: translateY(-1px); }
.ybl-thumb-active {
  border-color: #C9A84C !important;
  opacity: 1 !important;
  transform: translateY(-2px) !important;
}
.ybl-thumb img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* Dots */
.ybl-dots {
  display: flex;
  justify-content: center;
  gap: 5px;
  padding: 0 1rem .55rem;
}
.ybl-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  cursor: pointer;
  transition: background .18s, transform .18s;
  border: none;
  padding: 0;
}
.ybl-dot.active { background: #C9A84C; transform: scale(1.5); }

/* Fotoğraf alt açıklaması */
.ybl-caption {
  text-align: center;
  font-size: .65rem;
  color: rgba(255,255,255,.28);
  padding: 0 1rem .5rem;
  letter-spacing: .04em;
  min-height: 1em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── KART HOVER OVERLAY ── */
.fc-img[data-boat],
.yc-img-wrap[data-boat-open] { cursor: zoom-in; }

.fc-img[data-boat]::after {
  content: attr(data-label);
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(10,22,40,.88) 0%, transparent 100%);
  color: rgba(255,255,255,.8);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 1.4rem .8rem .5rem;
  display: flex; align-items: flex-end;
  opacity: 0;
  transition: opacity .22s;
  pointer-events: none;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
}
.fc-img[data-boat]:hover::after { opacity: 1; }

.fc-photo-count {
  position: absolute;
  bottom: .6rem; left: .6rem;
  background: rgba(10,22,40,.8);
  color: #C9A84C;
  font-size: .6rem;
  letter-spacing: .1em;
  font-weight: 700;
  padding: .25rem .55rem;
  border-radius: 4px;
  display: flex; align-items: center; gap: .3rem;
  pointer-events: none;
  font-family: 'Montserrat', sans-serif;
  z-index: 3;
}

/* ── MOBİL ── */
@media (max-width: 768px) {
  .ybl-nav { width: 40px; height: 58px; }
  .ybl-prev { left: .35rem; }
  .ybl-next { right: .35rem; }
  .ybl-img-wrap { padding: .8rem 3.5rem; }
  .ybl-thumbs { padding: .5rem .7rem; }
  .ybl-thumb { width: 52px; height: 38px; }
  .ybl-topbar { padding: .58rem .9rem; }
  .ybl-boat-name { font-size: .92rem; }
  .ybl-caption { display: none; }
}
@media (max-width: 480px) {
  .ybl-img-wrap { padding: .6rem 2.8rem; }
  .ybl-thumb { width: 44px; height: 32px; }
  .ybl-nav { width: 34px; height: 50px; }
}