/* ==========================================================================
   Fotoğraf görüntüleyici
   ========================================================================== */

.lb-overlay{
  position:fixed;inset:0;z-index:1000;
  background:rgba(18,12,8,.95);
  display:none;align-items:center;justify-content:center;
  opacity:0;transition:opacity .18s ease;
}
.lb-overlay.open{display:flex;opacity:1}

.lb-stage{
  display:flex;gap:24px;align-items:center;justify-content:center;
  width:100%;height:100%;padding:56px 72px;box-sizing:border-box;
}

.lb-imgwrap{
  flex:1;display:flex;align-items:center;justify-content:center;
  min-width:0;height:100%;
}
.lb-img{
  max-width:100%;max-height:100%;object-fit:contain;
  border-radius:10px;opacity:0;transition:opacity .2s ease;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}

.lb-side{
  width:330px;flex:0 0 330px;max-height:100%;
  display:flex;flex-direction:column;gap:12px;color:#fff;
}
.lb-caption{font-size:15.5px;line-height:1.6;font-weight:600}
.lb-caption:empty{display:none}
.lb-counter{font-size:12.5px;color:#b9a795;letter-spacing:.04em}

.lb-close,.lb-nav{
  position:absolute;background:rgba(255,255,255,.12);border:0;color:#fff;
  cursor:pointer;border-radius:50%;display:grid;place-items:center;
  transition:background .15s ease;z-index:2;
}
.lb-close{top:18px;right:20px;width:44px;height:44px;font-size:28px;line-height:1}
.lb-nav{top:50%;transform:translateY(-50%);width:52px;height:52px;font-size:34px;line-height:1}
.lb-prev{left:16px}
.lb-next{right:16px}
.lb-close:hover,.lb-nav:hover{background:rgba(255,255,255,.26)}

/* ------------------------------------------------------ sosyal bölüm */
.lb-social{
  display:flex;flex-direction:column;gap:12px;min-height:0;flex:1;
  border-top:1px solid rgba(255,255,255,.14);padding-top:14px;
}
.lb-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.lb-like{
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.12);border:0;color:#fff;
  padding:9px 16px;border-radius:99px;cursor:pointer;
  font-size:14px;font-weight:600;font-family:inherit;
}
.lb-like:hover{background:rgba(255,255,255,.22)}
.lb-like.on{background:rgba(224,90,90,.28)}
.lb-like .ic{font-size:16px}
.lb-download{
  color:#cbb9a6;font-size:13px;text-decoration:none;
  padding:9px 12px;border-radius:99px;background:rgba(255,255,255,.08);
}
.lb-download:hover{background:rgba(255,255,255,.18);color:#fff}

.lb-comments{flex:1;overflow-y:auto;min-height:60px;max-height:44vh}
.lb-cmt{padding:9px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.lb-cmt:last-child{border-bottom:0}
.lb-cmt-hd{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;margin-bottom:3px}
.lb-cmt-hd strong{color:#fff;font-weight:700}
.lb-cmt-hd span{color:#a08d7b}
.lb-cmt-bd{font-size:14px;line-height:1.55;color:#e7ded5;word-break:break-word}
.lb-empty,.lb-loading{color:#a08d7b;font-size:13.5px;padding:12px 0;text-align:center}

.lb-form{display:flex;gap:8px;align-items:flex-end}
.lb-form textarea{
  flex:1;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
  color:#fff;border-radius:10px;padding:10px 12px;font:inherit;font-size:14px;resize:none;
}
.lb-form textarea::placeholder{color:#a08d7b}
.lb-form textarea:focus{outline:none;border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.16)}
.lb-send{
  background:#e07a3f;border:0;color:#fff;border-radius:10px;
  padding:11px 16px;cursor:pointer;font:inherit;font-weight:700;font-size:14px;
}
.lb-send:hover{background:#c65f28}
.lb-send:disabled{opacity:.5;cursor:not-allowed}

/* --------------------------------------------------------- tıklanabilirlik */
[data-lb-group]{cursor:zoom-in;display:block}

/* Küçük resimlerin üzerindeki beğeni/yorum rozetleri */
.ph-meta{
  display:flex;gap:12px;align-items:center;font-size:12.5px;color:var(--mut, #7c6a5a);
  padding:6px 9px;
}
.ph-meta span{display:inline-flex;align-items:center;gap:4px}

@media (max-width:900px){
  .lb-stage{flex-direction:column;padding:56px 14px 18px;gap:14px}
  .lb-imgwrap{height:auto;max-height:52vh}
  .lb-side{width:100%;flex:1 1 auto}
  .lb-nav{width:44px;height:44px;font-size:28px}
  .lb-prev{left:6px}
  .lb-next{right:6px}
  .lb-comments{max-height:24vh}
}