/* public/assets/css/detail.css */
/* Listing detail page (ko*) – robust layout + gallery/thumb fixes */

:root{
  --bg:#0b0d12;
  --card:rgba(255,255,255,.04);
  --card2:rgba(255,255,255,.03);
  --stroke:rgba(255,255,255,.10);
  --stroke2:rgba(255,255,255,.14);
  --text:#e8edf7;
  --muted:rgba(232,237,247,.70);
  --shadow:0 18px 55px rgba(0,0,0,.45);
  --radius:18px;
  --radius2:14px;
  --yellow:#f5c542;
  --yellow2:#ffda62;
}

/* Page container safety */
.listingPage{
  color: var(--text);
}
.listingPage *{
  box-sizing: border-box;
}
.listingPage img{
  max-width: 100%;
  height: auto;
  display: block;
}

.card.is-premium{
  position: relative;
  border: 1px solid rgba(255, 204, 102, .45) !important;
  box-shadow:
    0 0 0 1px rgba(255, 204, 102, .18) inset,
    0 18px 55px rgba(0,0,0,.35);
}
.card.is-premium::before{
  content:"";
  position:absolute; inset:-1px;
  border-radius: 18px; /* kart radius'ına göre ayarla */
  pointer-events:none;
  background: radial-gradient(800px 220px at 25% 0%, rgba(255,204,102,.22), transparent 60%);
  mix-blend-mode: screen;
  opacity:.85;
}
.premiumBadge{
  position:absolute;
  top:10px; left:10px;
  z-index:3;
  padding:6px 10px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  letter-spacing:.3px;
  color:#111;
  background: linear-gradient(180deg, #ffd37a, #ffb84a);
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
}

/* Breadcrumbs */
.listingPage .crumbs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  font-size: 12.5px;
  color: var(--muted);
  margin: 10px 0 16px;
}
.listingPage .crumbs a{
  color: var(--text);
  text-decoration: none;
  opacity:.85;
}
.listingPage .crumbs a:hover{ opacity:1; }
.listingPage .crumbs .sep{ opacity:.55; }
.listingPage .crumbs .cur{ opacity:1; font-weight:700; }

/* 3-column layout */
.listingPage .koGrid{
  display:grid !important;
  grid-template-columns: minmax(280px, 420px) minmax(0, 1fr) minmax(240px, 320px);
  gap: 18px;
  align-items:start;
}
.listingPage .koLeft,
.listingPage .koMain,
.listingPage .koRight{
  min-width: 0;
}

/* Responsive collapse */
@media (max-width: 1100px){
  .listingPage .koGrid{
    grid-template-columns: minmax(260px, 380px) minmax(0, 1fr);
  }
  .listingPage .koRight{
    grid-column: 1 / -1;
  }
}
@media (max-width: 780px){
  .listingPage .koGrid{
    grid-template-columns: 1fr;
  }
  .listingPage .koLeft,
  .listingPage .koMain,
  .listingPage .koRight{
    grid-column: 1 / -1;
  }
}

/* Card base */
.listingPage .koCard{
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.028));
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
  overflow: hidden;
}

/* Gallery */
.listingPage .koGallery{
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.listingPage .koItemCard__img--big{
  height: 420px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: var(--radius2);
  overflow:hidden;
  background: rgba(0,0,0,.18);
  border: 1px solid var(--stroke);
}
.listingPage .koItemCard__img--big img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Thumbs (THIS fixes the “giant extra images” issue) */
.listingPage .koThumbs{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}
.listingPage .koThumb{
  width: 74px;
  height: 74px;
  border-radius: 12px;
  overflow:hidden;
  border: 1px solid var(--stroke);
  background: rgba(0,0,0,.18);
  padding: 0;
  cursor: pointer;
  display:block;
}
.listingPage .koThumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.listingPage .koThumb:hover{ border-color: var(--stroke2); }
.listingPage .koThumb:focus-visible{
  outline: 2px solid rgba(245,197,66,.75);
  outline-offset: 2px;
}

/* Item header under image */
.listingPage .koItemCard__name{
  margin-top: 12px;
  display:flex;
  flex-direction:column;
  gap: 4px;
}
.listingPage .koItemCard__title{
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .2px;
}
.listingPage .koItemCard__sub{
  font-size: 12.5px;
  color: var(--muted);
}

/* Stat list */
.listingPage .koStatList{
  margin-top: 12px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.listingPage .koStat{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  padding: 10px 10px;
}
.listingPage .koStat span{
  display:block;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 3px;
}
.listingPage .koStat b{
  font-size: 13px;
}

/* Props */
.listingPage .koPropsCard__head{
  font-weight: 900;
  letter-spacing: .2px;
  margin-bottom: 10px;
}
.listingPage .koProps{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.listingPage .koProp{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.03);
}
.listingPage .koProp span{ color: var(--muted); font-size: 12px; }
.listingPage .koProp b{ font-size: 12.5px; }

/* Main card */
.listingPage .koMainTop{
  display:flex;
  gap: 14px;
  justify-content:space-between;
  align-items:flex-start;
}
@media (max-width: 780px){
  .listingPage .koMainTop{ flex-direction:column; }
}
.listingPage .koTitle{
  margin: 0;
  font-size: 22px;
  font-weight: 950;
  letter-spacing: .2px;
}
.listingPage .koChips{
  margin-top: 8px;
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}
.listingPage .chip{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  color: var(--text);
  opacity: .92;
}
.listingPage .koPrice{
  margin-top: 10px;
  font-size: 26px;
  font-weight: 950;
  letter-spacing: .2px;
}
.listingPage .koCur{
  margin-left: 8px;
  font-size: 13px;
  font-weight: 800;
  color: var(--muted);
}
.listingPage .koDelivery{
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  padding: 10px 12px;
}

/* CTA button */
.listingPage .koCTA{ margin-top: 12px; }
.listingPage .koBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  text-decoration:none;
  border-radius: 14px;
  padding: 11px 14px;
  font-weight: 900;
  letter-spacing: .2px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: var(--text);
}
.listingPage .koBtn--yellow{
  background: linear-gradient(180deg, var(--yellow2), var(--yellow));
  color: #1a1200;
  border-color: rgba(0,0,0,.15);
}
.listingPage .koBtn--yellow:hover{
  filter: brightness(1.05);
}

/* Mini row */
.listingPage .koMiniRow{
  margin-top: 12px;
  display:flex;
  gap: 12px;
  flex-wrap:wrap;
  color: var(--muted);
  font-size: 12.5px;
}
.listingPage .koMini b{ color: var(--text); }

/* Share */
.listingPage .koShareBox{
  min-width: 180px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--radius2);
  padding: 10px;
}
.listingPage .koShareLabel{
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
}
.listingPage .koShare{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
}
.listingPage .koShareBtn{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  color: var(--text);
}
.listingPage .koShareBtn svg{
  width: 18px;
  height: 18px;
  fill: currentColor;
  opacity: .95;
}
.listingPage .koShareBtn:hover{ border-color: rgba(255,255,255,.18); }

/* Divider */
.listingPage .koHr{
  border:0;
  height:1px;
  margin: 14px 0;
  background: rgba(255,255,255,.08);
}

/* Description + meta */
.listingPage .koDesc h3{
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 900;
}
.listingPage .koDesc p{
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
  font-size: 13.5px;
}
.listingPage .koMetaLine{
  margin-top: 12px;
  display:flex;
  gap: 12px;
  flex-wrap:wrap;
}
.listingPage .koMeta{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  padding: 10px 12px;
  color: var(--muted);
  font-size: 12.5px;
}
.listingPage .koMeta span{ opacity: .9; margin-right: 6px; }
.listingPage .koMeta b{ color: var(--text); }

/* Comments */
.listingPage .koComments__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 12px;
}
.listingPage .koComments__head h3{
  margin: 0;
  font-size: 15px;
  font-weight: 950;
}
.listingPage .muted{ color: var(--muted); }

.listingPage .commentForm{
  margin-top: 10px;
  display:flex;
  gap: 10px;
  align-items:flex-start;
}
@media (max-width: 780px){
  .listingPage .commentForm{ flex-direction:column; }
}
.listingPage .commentForm textarea{
  flex:1;
  min-height: 84px;
  resize: vertical;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  color: var(--text);
  outline: none;
}
.listingPage .commentForm textarea:focus{
  border-color: rgba(245,197,66,.55);
}

.listingPage .commentList{
  margin-top: 12px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.listingPage .comment{
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.03);
  border-radius: 16px;
  padding: 10px 12px;
}
.listingPage .comment__top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 12px;
}
.listingPage .comment__user{
  color: var(--text);
  text-decoration:none;
  font-weight: 900;
}
.listingPage .comment__time{
  color: var(--muted);
  font-size: 12px;
  margin-left: 8px;
}
.listingPage .comment__body{
  margin-top: 8px;
  color: var(--muted);
  line-height: 1.6;
  font-size: 13px;
}
.listingPage .commentAdminBtns{
  display:flex;
  gap: 8px;
  align-items:center;
}

/* Seller card */
.listingPage .koSellerTop{
  display:flex;
  gap: 12px;
  align-items:flex-start;
}
.listingPage .koAvatar{
  width: 44px;
  height: 44px;
  position: relative;
}
.listingPage .koAvatar__inner{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 950;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}
.listingPage .koDot{
  position:absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  right: -2px;
  top: -2px;
  border: 2px solid rgba(0,0,0,.55);
}
.listingPage .koDot.on{ background: #2ee59d; }
.listingPage .koDot.off{ background: #ff5a6a; }

.listingPage .koSellerInfo{
  flex:1;
  min-width:0;
}
.listingPage .koSellerNameLink{
  display:inline-block;
  color: var(--text);
  font-weight: 950;
  text-decoration:none;
  max-width: 100%;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.listingPage .koSellerSub{
  margin-top: 4px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.4;
}
.listingPage .koSellerProfileLink a{
  display:inline-block;
  margin-top: 6px;
  color: rgba(245,197,66,.95);
  text-decoration:none;
  font-weight: 800;
}
.listingPage .koSellerProfileLink a:hover{ text-decoration: underline; }

.listingPage .koAsk{
  margin-left:auto;
  white-space:nowrap;
  text-decoration:none;
  font-weight: 950;
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(245,197,66,.12);
  border: 1px solid rgba(245,197,66,.25);
  color: rgba(245,197,66,.95);
}
.listingPage .koAsk:hover{
  background: rgba(245,197,66,.16);
  border-color: rgba(245,197,66,.32);
}

/* Placeholder */
.listingPage .ph{
  width: 100%;
  height: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--muted);
  font-weight: 900;
  letter-spacing:.2px;
}