/* ============================================================
   URUN KARTI — hm-pc (buyuk) + hm-pcs (kucuk/yatay)   v2
   Dosya: assets/css/urun-kart.css
   Yukleme sirasi: main.css → theme.css → header.css → hero.css
                   → stories.css → trust.css → kampanya.css → urun-kart.css
   v2: puan alani kaldirildi, tek rozet, yildiz favori, ozellik cipleri,
       makas ikonu, mobil bosluk duzeltmesi, container hizalamasi.
   ============================================================ */

/* ============================================================
   0) GLOBAL ICERIK GENISLIGI — tum bolumler ayni kenardan baslar
   Tema main.css'te .container icin daha genis bir deger (ve muhtemelen
   medya sorgusu) tanimli -> !important ile eziyoruz.
   ============================================================ */
.container{
    max-width:1320px!important;
    margin-left:auto!important;
    margin-right:auto!important;
}
@media (min-width:1200px){
  .container{max-width:1320px!important;}
}
@media (min-width:1400px){
  .container{max-width:1320px!important;}
}
@media (min-width:1600px){
  .container{max-width:1320px!important;}
}
.hm-trust__inner,
.hm-cc__inner{max-width:1320px;}


/* ============================================================
   1) BUYUK KART
   ============================================================ */
.hm-pc{
    font-family:var(--font);
    position:relative;
    display:flex;
    flex-direction:column;
    height:100%;
    background:#fff;
    border:1px solid var(--c-border);
    border-radius:var(--r-lg);
    overflow:hidden;
    margin-bottom:0;                      /* bosluk kolona veriliyor, asagi bak */
    transition:border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}

/* SATIR ARASI BOSLUK — karta degil KOLONA verilir.
   Sebep: .hm-pc height:100% oldugu icin kendi margin'i kolon yuksekligi
   icinde eriyor ve satirlar yapisik gorunuyor. */
.product-grid > [class*="col-"],
.product-grid-4 > [class*="col-"],
.row.product-grid > div,
.row.product-grid-4 > div{
    padding-bottom:var(--s3);             /* 24px */
}
.hm-pc:hover{
    border-color:var(--c-orange);
    box-shadow:0 10px 28px rgba(37,61,78,.10);
    transform:translateY(-3px);
}

/* ---------------- GORSEL ---------------- */
.hm-pc__media{position:relative;background:#fff;}

.hm-pc__imgwrap{
    display:block;
    aspect-ratio:1 / 1;
    max-height:300px;                 /* genis slaytlarda dev kare olusmasin */
    padding:var(--s2);
}
.hm-pc__imgwrap img{
    width:100%;height:100%;
    object-fit:contain;
    display:block;
    transition:transform .3s ease;
}
.hm-pc:hover .hm-pc__imgwrap img{transform:scale(1.04);}

.hm-pc__noimg{
    display:flex;align-items:center;justify-content:center;
    width:100%;height:100%;
    background:#F4F5F7;color:var(--c-muted);
    font-size:13px;font-weight:600;border-radius:var(--r-md);
}

/* ---------------- TEK ROZET ---------------- */
.hm-pc__badge{
    position:absolute;top:10px;left:10px;z-index:3;
    display:inline-block;
    padding:5px 10px;
    background:var(--c-orange);color:#fff;
    font-size:11.5px;font-weight:800;line-height:1;
    border-radius:var(--r-pill);
}
.hm-pc__badge--img{
    width:48px;height:48px;padding:0;background-color:transparent;
    background-size:contain;background-repeat:no-repeat;background-position:center;
    border-radius:0;
}

/* ---------------- FAVORI (yildiz) ---------------- */
.hm-pc__fav{
    position:absolute;top:10px;right:10px;z-index:3;
    display:flex;align-items:center;justify-content:center;
    width:34px;height:34px;padding:0;
    background:#fff;color:var(--c-slate);
    border:1px solid var(--c-border);
    border-radius:50%;
    cursor:pointer;
    transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.hm-pc__fav i{font-size:14px;line-height:1;}
.hm-pc__fav:hover,
.hm-pc__fav.aktif{background:var(--c-orange);color:#fff;border-color:var(--c-orange);}

/* ---------------- KESIM IKONU ---------------- */
/* NOT: sag altta urun fotograflarinda telefon damgasi var -> sol alta alindi */
.hm-pc__kesim{
    position:absolute;left:12px;bottom:12px;z-index:2;
    width:22px;height:22px;
    color:var(--c-orange);
    opacity:.85;
}
.hm-pc__kesim svg{
    width:100%;height:100%;display:block;
    fill:none;stroke:currentColor;stroke-width:1.9;
    stroke-linecap:round;stroke-linejoin:round;
}

/* ---------------- GOVDE ---------------- */
.hm-pc__body{
    display:flex;flex-direction:column;
    flex:1 1 auto;
    padding:0 var(--s2) var(--s2);
}

.hm-pc__title{
    margin:0 0 8px;
    font-size:14px;font-weight:700;line-height:1.35;
    letter-spacing:-.01em;
}
.hm-pc__title a{
    color:var(--c-slate);text-decoration:none;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    min-height:2.7em;
    transition:color .18s ease;
}
.hm-pc:hover .hm-pc__title a{color:var(--c-orange);}

/* ---------------- OZELLIK CIPLERI ---------------- */
.hm-pc__chips{
    display:flex;flex-wrap:wrap;gap:5px;
    margin:0 0 10px;
}
.hm-pc__chip{
    display:inline-block;
    padding:4px 9px;
    background:#F4F5F7;
    color:var(--c-muted);
    font-size:10.5px;font-weight:600;line-height:1.2;
    border-radius:var(--r-pill);
    white-space:nowrap;
}

/* ---------------- FIYAT ---------------- */
.hm-pc__price{
    display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;
    margin-top:auto;
}
.hm-pc__old{
    font-size:12.5px;font-weight:600;color:var(--c-muted);
    text-decoration:line-through;
}
.hm-pc__new{
    font-size:18px;font-weight:800;color:var(--c-orange);
    letter-spacing:-.02em;
}
.hm-pc__kdv{
    font-size:11px;font-weight:700;color:var(--c-muted);
    text-transform:uppercase;
}
.hm-pc__dahil{
    margin:2px 0 var(--s2);
    font-size:11.5px;font-weight:500;color:var(--c-muted);
}

/* ---------------- CTA ---------------- */
.hm-pc__btn{
    display:flex;align-items:center;justify-content:center;gap:8px;
    padding:11px var(--s2);
    background:var(--c-orange);
    color:#fff!important;
    font-size:13px;font-weight:700;
    text-decoration:none!important;
    border-radius:var(--r-md);
    transition:background .2s ease;
}
.hm-pc__btn svg{
    width:13px;height:13px;
    stroke:currentColor;fill:none;stroke-width:2.3;
    stroke-linecap:round;stroke-linejoin:round;
    transition:transform .2s ease;
}
.hm-pc:hover .hm-pc__btn{background:#E14A17;}
.hm-pc:hover .hm-pc__btn svg{transform:translateX(3px);}

.hm-pc__title a:focus-visible,
.hm-pc__btn:focus-visible,
.hm-pc__fav:focus-visible{outline:2px solid var(--c-orange);outline-offset:2px;}


/* ============================================================
   2) KUCUK / YATAY KART — hm-pcs
   ============================================================ */
.hm-pcs{
    font-family:var(--font);
    display:flex;align-items:center;gap:12px;
    height:100%;
    padding:10px;
    background:#fff;
    border:1px solid var(--c-border);
    border-radius:var(--r-md);
    transition:border-color .2s ease, box-shadow .2s ease;
}
.hm-pcs:hover{border-color:var(--c-orange);box-shadow:0 6px 18px rgba(37,61,78,.08);}

.hm-pcs__media{
    flex:0 0 auto;
    width:74px;height:74px;
    display:block;
    border-radius:var(--r-sm);
    overflow:hidden;background:#fff;
}
.hm-pcs__media img{width:100%;height:100%;object-fit:contain;display:block;}
.hm-pcs__noimg{
    display:flex;align-items:center;justify-content:center;
    width:100%;height:100%;background:#F4F5F7;
    color:var(--c-muted);font-size:10px;font-weight:600;text-align:center;
}

.hm-pcs__body{min-width:0;flex:1 1 auto;}
.hm-pcs__title{margin:0 0 6px;font-size:13px;font-weight:700;line-height:1.3;}
.hm-pcs__title a{
    color:var(--c-slate);text-decoration:none;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    transition:color .18s ease;
}
.hm-pcs:hover .hm-pcs__title a{color:var(--c-orange);}

.hm-pcs__price{display:flex;align-items:baseline;flex-wrap:wrap;gap:5px;}
.hm-pcs__old{font-size:11.5px;font-weight:600;color:var(--c-muted);text-decoration:line-through;}
.hm-pcs__new{font-size:15px;font-weight:800;color:var(--c-orange);letter-spacing:-.02em;}
.hm-pcs__kdv{font-size:10px;font-weight:700;color:var(--c-muted);text-transform:uppercase;}
.hm-pcs__dahil{margin-top:2px;font-size:10.5px;font-weight:500;color:var(--c-muted);}


/* ============================================================
   3) SLICK CAROUSEL (vitrin-2 / vitrin-3)
   ONEMLI: Bu carousel'lerde KART'IN KENDISI slayttir
   (<div class="hm-pc ... slick-slide">). Ayri bir sarmalayici YOK.
   Bu yuzden secici ".slick-slide .hm-pc" degil, ".hm-pc.slick-slide" olmali.
   ============================================================ */
.carausel-4-columns .slick-track,
.carausel-5-columns .slick-track{display:flex!important;align-items:stretch!important;}

/* kart = slayt olan durum */
.carausel-4-columns .hm-pc.slick-slide,
.carausel-5-columns .hm-pc.slick-slide,
.carausel-4-columns > .hm-pc,
.carausel-5-columns > .hm-pc{
    height:auto!important;
    float:none!important;
    margin:0 6px var(--s3)!important;   /* yatay bosluk + satir alti */
}

/* kart bir sarmalayici icinde ise (bazi temalarda) */
.carausel-4-columns .slick-slide > div,
.carausel-5-columns .slick-slide > div{height:100%;}
.carausel-4-columns .slick-slide .hm-pc,
.carausel-5-columns .slick-slide .hm-pc{margin:0 6px var(--s3);}

/* ------------------------------------------------------------
   OZGULLUK SAVASI — slick'in kendi kurali kartin flex duzenini
   eziyor:  .slick-initialized .slick-slide{display:block}  (0,2,0)
   benim    .hm-pc{display:flex}                            (0,1,0)
   Asagidaki blok her ihtimale karsi zorla geri aliyor.
   ------------------------------------------------------------ */
.slick-initialized .slick-slide.hm-pc,
.slick-slide.hm-pc,
.carausel-4-columns .hm-pc,
.carausel-5-columns .hm-pc{
    display:flex!important;
    flex-direction:column!important;
    height:auto!important;
    visibility:visible!important;
}

.slick-slide.hm-pc .hm-pc__media,
.carausel-4-columns .hm-pc .hm-pc__media,
.carausel-5-columns .hm-pc .hm-pc__media{
    flex:0 0 auto!important;
    width:100%!important;
}

.slick-slide.hm-pc .hm-pc__body,
.carausel-4-columns .hm-pc .hm-pc__body,
.carausel-5-columns .hm-pc .hm-pc__body{
    display:flex!important;
    flex-direction:column!important;
    flex:1 1 auto!important;
    width:100%!important;
    visibility:visible!important;
    opacity:1!important;
}


/* ------------------------------------------------------------
   VITRIN-2 sol promo gorseli (carousel kaldirildiktan sonra)
   ------------------------------------------------------------ */
.hm-vitrin-promo{
    display:block;
    width:100%;
    border-radius:var(--r-lg);
    overflow:hidden;
    line-height:0;
}
.hm-vitrin-promo img{
    width:100%;height:auto;display:block;
    transition:transform .3s ease;
}
.hm-vitrin-promo:hover img{transform:scale(1.03);}


/* ============================================================
   4) RESPONSIVE
   ============================================================ */
@media (max-width:1400px){
  .hm-pc__new{font-size:17px;}
  .hm-pc__title{font-size:13.5px;}
}

@media (max-width:991px){
  .hm-pcs__media{width:64px;height:64px;}
}

/* ---- MOBIL: 2'li grid bosluk duzeltmesi ----
   Tema kolon padding'ini sifirliyor olabilir. Bu yuzden bosluk hem kolona
   hem de kartin kendisine veriliyor -> hangisi tutarsa tutsun. ---- */
@media (max-width:767px){
  .product-grid,
  .product-grid-4,
  .row.product-grid,
  .row.product-grid-4{
      margin-left:-6px!important;
      margin-right:-6px!important;
  }
  .product-grid > [class*="col-"],
  .product-grid-4 > [class*="col-"],
  .row.product-grid > div,
  .row.product-grid-4 > div{
      padding-left:6px!important;
      padding-right:6px!important;
      padding-bottom:12px!important;
  }

  .hm-pc{
      border-radius:var(--r-md);
      margin:0!important;
  }
  .hm-pc:hover{transform:none;box-shadow:none;}

  .hm-pc__imgwrap{padding:10px;}
  .hm-pc__body{padding:0 10px 10px;}
  .hm-pc__title{font-size:12.5px;}
  .hm-pc__title a{min-height:2.6em;}

  .hm-pc__chips{gap:4px;margin-bottom:8px;}
  .hm-pc__chip{font-size:9.5px;padding:3px 7px;}
  /* dar ekranda 3. cip taşmasin */
  .hm-pc__chip:nth-child(3){display:none;}

  .hm-pc__new{font-size:15.5px;}
  .hm-pc__kdv{font-size:10px;}
  .hm-pc__dahil{font-size:10.5px;margin-bottom:10px;}
  .hm-pc__btn{padding:10px;font-size:12px;}

  .hm-pc__fav{width:30px;height:30px;top:8px;right:8px;}
  .hm-pc__badge{font-size:10.5px;padding:4px 8px;top:8px;left:8px;}
  .hm-pc__badge--img{width:40px;height:40px;}
  .hm-pc__kesim{width:18px;height:18px;right:10px;bottom:10px;}
}

@media (max-width:420px){
  .hm-pc__title{font-size:12px;}
  .hm-pc__new{font-size:14.5px;}
  .hm-pc__btn{font-size:11.5px;gap:6px;}
  .hm-pcs{padding:8px;gap:10px;}
  .hm-pcs__media{width:58px;height:58px;}
}

@media (prefers-reduced-motion: reduce){
  .hm-pc,.hm-pc__imgwrap img,.hm-pc__btn,.hm-pc__btn svg{transition:none;}
  .hm-pc:hover{transform:none;}
  .hm-pc:hover .hm-pc__imgwrap img{transform:none;}
}