/* =========================================
   ECEM – Ürün Bilgi Paneli (Temiz & Premium)
   Tek blok + 4 bölümlü görünüm
   - aralarda çizgi
   - ikon + renkli vurgu
   - mobil 2x2
   + Ürün Bilgileri başlığı kesilmez
   ========================================= */

.ecem-infobar{
  background:#fff;
  border:1px solid rgba(0,0,0,.09);
  border-radius:16px;

  padding:10px;
  padding-top:26px;            /* başlık için alan açıldı */
  margin:14px 0 18px 0;

  box-shadow:0 8px 18px rgba(0,0,0,.06);

  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));

  overflow:visible !important; /* başlık kesilmesin */
  position:relative;
}

/* kartlar */
.ecem-card{
  padding:12px 10px 12px 44px;
  position:relative;
  background:#fff;
  min-height:62px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* bölümler arası çizgiler */
.ecem-card:nth-child(odd){
  border-right:1px solid rgba(0,0,0,.07);
}
.ecem-card:nth-child(-n+2){
  border-bottom:1px solid rgba(0,0,0,.07);
}

/* başlık */
.ecem-label{
  font-size:11px;
  color:rgba(0,0,0,.55);
  font-weight:800;
  letter-spacing:.2px;
  margin-bottom:3px;
}

/* değer */
.ecem-value{
  font-size:13px;
  font-weight:950;
  color:#111;
  line-height:1.18;
  word-break:break-word;
}

/* sol renk şeridi */
.ecem-card:before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:4px;
  background:#ff6600;
}

/* ikon kutusu */
.ecem-card:after{
  content:"";
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  width:22px;
  height:22px;
  border-radius:10px;
  background-size:16px 16px;
  background-repeat:no-repeat;
  background-position:center center;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}

/* --------------------------
   Kart bazlı renk + ikonlar
   -------------------------- */

/* 1) Stok Kodu */
.ecem-card:nth-child(1):before{ background:#2563eb; }
.ecem-card:nth-child(1):after{
  background-color:rgba(37,99,235,.12);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='%232563eb' d='M4 7a3 3 0 0 1 3-3h2v2H7a1 1 0 0 0-1 1v2H4V7zm14-3a3 3 0 0 1 3 3v2h-2V7a1 1 0 0 0-1-1h-2V4h2zM4 15h2v2a1 1 0 0 0 1 1h2v2H7a3 3 0 0 1-3-3v-2zm16 0h2v2a3 3 0 0 1-3 3h-2v-2h2a1 1 0 0 0 1-1v-2zM8 11h8v2H8v-2z'/%3E%3C/svg%3E");
}

/* 2) Stok Adedi */
.ecem-card:nth-child(2):before{ background:#16a34a; }
.ecem-card:nth-child(2):after{
  background-color:rgba(22,163,74,.12);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='%2316a34a' d='M12 2a7 7 0 0 1 7 7c0 5-7 13-7 13S5 14 5 9a7 7 0 0 1 7-7Zm0 4a3 3 0 1 0 0 6a3 3 0 0 0 0-6Z'/%3E%3C/svg%3E");
}

/* 3) Kargo Ücreti */
.ecem-shipping-card:before{ background:#111; }
.ecem-shipping-card:after{
  background-color:rgba(0,0,0,.10);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='%23111' d='M3 7h13v10H3V7Zm14 3h3l1 2v5h-4V10Zm-2 9a2 2 0 1 1 4 0a2 2 0 0 1-4 0Zm-10 0a2 2 0 1 1 4 0a2 2 0 0 1-4 0Z'/%3E%3C/svg%3E");
}

/* 4) Ücretsiz Kargo */
.ecem-free-card:before{ background:#f59e0b; }
.ecem-free-card:after{
  background-color:rgba(245,158,11,.14);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='%23f59e0b' d='M12 2l3 7h7l-5.5 4l2 7L12 16l-6.5 4l2-7L2 9h7l3-7Z'/%3E%3C/svg%3E");
}

/* =========================================
   Ürün Bilgileri Başlık
   ========================================= */

.ecem-infobar::before{
  content:"Ürün Bilgileri";
  position:absolute;
  top:8px;
  left:14px;

  font-size:11px;
  font-weight:900;
  letter-spacing:.3px;
  text-transform:uppercase;

  color:rgba(0,0,0,.72);
  background:#fff;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}

/* Premium Glow */
.ecem-infobar::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:18px;
  z-index:-1;

  background:linear-gradient(
    135deg,
    rgba(37,99,235,.18),
    rgba(22,163,74,.18),
    rgba(245,158,11,.18)
  );

  filter:blur(14px);
  opacity:.7;
}

/* Hover */
.ecem-infobar{
  transition:box-shadow .2s ease, transform .2s ease;
}
.ecem-infobar:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 34px rgba(0,0,0,.09);
}

/* ---------------------------------
   Mobil (daha sıkı ama okunaklı)
   --------------------------------- */
@media(max-width:768px){

  .ecem-infobar{
    padding:8px;
    padding-top:24px;
    border-radius:14px;
  }

  .ecem-card{
    padding:10px 8px 10px 40px;
    min-height:58px;
  }

  .ecem-card:after{
    width:20px;
    height:20px;
    left:11px;
    border-radius:9px;
    background-size:15px 15px;
  }

  .ecem-label{ font-size:10px; }
  .ecem-value{ font-size:12px; }

  .ecem-infobar::before{
    top:6px;
    left:10px;
    font-size:10px;
    padding:4px 8px;
  }
}

/* =========================================
   ECEM – Ürün Kısa Açıklama Kutusu (BİR BAKIŞTA ÜRÜN)
   class: .detail-extra-info
   - Premium box + glow
   - Başlık etiketi + yıldırım SVG
   - İçerik hafif kalın
   - Mobil uyumlu
   ========================================= */

.detail-extra-info{
  position: relative;
  margin: 14px 0 18px 0;
  padding: 20px 16px 16px 16px;

  background: #fff;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);

  overflow: visible;
  line-height: 1.45;
  font-size: 13px;
  font-weight: 650;
  color: rgba(0,0,0,.82);

  transition: transform .2s ease, box-shadow .2s ease;
}

.detail-extra-info:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(0,0,0,.10);
}

/* üst etiket + yıldırım */
.detail-extra-info::before{
  content: "BİR BAKIŞTA ÜRÜN";
  position: absolute;
  top: -12px;
  left: 14px;

  background: #fff;
  padding: 6px 12px 6px 40px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);

  font-size: 11px;
  font-weight: 950;
  letter-spacing: .35px;
  text-transform: uppercase;
  color: rgba(0,0,0,.72);

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='%23f59e0b' d='M13 2L3 14h7l-1 8l12-14h-8l0-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px center;
  background-size: 18px 18px;
}

/* glow efekti */
.detail-extra-info::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 18px;
  z-index:-1;

  background: linear-gradient(
    135deg,
    rgba(37,99,235,.16),
    rgba(22,163,74,.16),
    rgba(245,158,11,.18)
  );

  filter: blur(14px);
  opacity: .75;
}

/* kutu içindeki yazılara düzen */
.detail-extra-info p{
  margin: 0 0 10px 0;
  font-weight: 650;
}
.detail-extra-info p:last-child{
  margin-bottom: 0;
}

/* kutu içindeki liste olursa güzel dursun */
.detail-extra-info ul{
  margin: 8px 0 0 18px;
  padding: 0;
}
.detail-extra-info li{
  margin-bottom: 6px;
  font-weight: 650;
}

/* ? Mobil uyum */
@media(max-width:768px){
  .detail-extra-info{
    padding: 18px 14px 14px 14px;
    font-size: 12.5px;
    border-radius: 14px;
  }

  .detail-extra-info::before{
    left: 10px;
    top: -11px;
    font-size: 10px;
    padding: 6px 10px 6px 36px;
    background-position: 10px center;
    background-size: 16px 16px;
  }
}

/* =========================================
   ECEM – Varyasyonlu ürünlerde gecikme hissi azaltma (CSS)
   - CSS ile AJAX hızlanmaz ama:
     ? Kaymayı önler
     ? Kutuyu asla gizlemez
     ? Geç gelirse loading efekti verir
   ========================================= */

.detail-extra-info{
  min-height: 60px;
}

/* içerik boşsa shimmer */
.detail-extra-info:empty{
  display:block;
  border-style:dashed;
  opacity:.55;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,.03),
    rgba(0,0,0,.08),
    rgba(0,0,0,.03)
  );
  background-size: 200% 100%;
  animation: ecemShimmer 1.1s infinite linear;
}

@keyframes ecemShimmer{
  0%{ background-position: 200% 0; }
  100%{ background-position: -200% 0; }
}