/* ============================================================
   KAMPANYA KARTLARI (kategori promo) — hm-cc-*
   Dosya: assets/css/kampanya.css
   Yukleme sirasi: main.css → theme.css → header.css → hero.css
                   → stories.css → trust.css → kampanya.css
   Wireframe: acik gri kart + kare urun gorseli + H3 + aciklama + turuncu CTA
   ============================================================ */

.hm-cc{
    font-family:var(--font);
    padding:var(--s4) 0;                 /* 32px */
}
.hm-cc__inner{max-width:1320px;margin:0 auto;padding:0 var(--s2);}

/* bolum basligi (opsiyonel) */
.hm-cc__head{
    font-size:22px;font-weight:800;color:var(--c-slate);
    margin:0 0 var(--s3);letter-spacing:-.3px;
}

.hm-cc__grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:var(--s2);                       /* 16px */
}

/* col_md -> grid span (admin'deki genislik ayari korunur) */
.hm-cc__card--w2{grid-column:span 2;}
.hm-cc__card--w3{grid-column:span 3;}

/* ---------------- KART ---------------- */
.hm-cc__card{
    position:relative;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:var(--s2);
    padding:var(--s2);
    background:#F4F5F7;
    border:1px solid transparent;
    border-radius:var(--r-lg);           /* 16px */
    transition:background .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.hm-cc__card:hover{
    background:#EFF1F4;
    border-color:var(--c-border);
    box-shadow:0 8px 24px rgba(37,61,78,.08);
}

/* gorsel — kare, sabit oran (CLS yok) */
.hm-cc__media{
    flex:0 0 auto;
    width:112px;height:112px;
    border-radius:var(--r-md);           /* 12px */
    overflow:hidden;
    background:#fff;
}
.hm-cc__media img{
    width:100%;height:100%;
    object-fit:cover;display:block;
    transition:transform .3s ease;
}
.hm-cc__card:hover .hm-cc__media img{transform:scale(1.05);}

/* metin blogu */
.hm-cc__body{min-width:0;flex:1 1 auto;}

.hm-cc__title{
    margin:0 0 6px;
    font-size:19px;font-weight:800;line-height:1.25;
    letter-spacing:-.02em;
    color:var(--c-slate);
}
/* baslik linki: kart genelini tiklanabilir yapan "stretched link" */
.hm-cc__title a{
    color:inherit;text-decoration:none;
}
.hm-cc__title a::after{
    content:"";position:absolute;inset:0;border-radius:var(--r-lg);
}
.hm-cc__card:hover .hm-cc__title a{color:var(--c-orange);}

.hm-cc__desc{
    margin:0 0 var(--s2);
    font-size:13.5px;font-weight:500;line-height:1.45;
    color:var(--c-muted);
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

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

/* klavye erisimi */
.hm-cc__title a:focus-visible,
.hm-cc__btn:focus-visible{
    outline:2px solid var(--c-orange);outline-offset:2px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* 1366 */
@media (max-width:1400px){
  .hm-cc__inner{max-width:1200px;}
  .hm-cc__media{width:100px;height:100px;}
  .hm-cc__title{font-size:17.5px;}
  .hm-cc__desc{font-size:13px;}
}

/* tablet — 2 sutun */
@media (max-width:1199px){
  .hm-cc__grid{grid-template-columns:repeat(2,1fr);}
  .hm-cc__card--w3{grid-column:span 2;}
}

/* kucuk tablet / buyuk telefon — tek sutun */
@media (max-width:767px){
  .hm-cc{padding:var(--s3) 0;}
  .hm-cc__head{font-size:18px;margin-bottom:var(--s2);}
  .hm-cc__grid{grid-template-columns:1fr;gap:12px;}
  .hm-cc__card--w2,
  .hm-cc__card--w3{grid-column:span 1;}
  .hm-cc__media{width:92px;height:92px;}
  .hm-cc__title{font-size:16px;margin-bottom:4px;}
  .hm-cc__desc{font-size:12.5px;-webkit-line-clamp:2;margin-bottom:10px;}
  .hm-cc__btn{padding:10px 14px;font-size:13px;}
  .hm-cc__card:hover{box-shadow:none;}
}

/* 375 */
@media (max-width:420px){
  .hm-cc__card{padding:12px;gap:12px;}
  .hm-cc__media{width:80px;height:80px;}
  .hm-cc__title{font-size:15px;}
  .hm-cc__desc{font-size:12px;}
  .hm-cc__btn{width:100%;justify-content:center;}
}

@media (prefers-reduced-motion: reduce){
  .hm-cc__card,.hm-cc__media img,.hm-cc__btn,.hm-cc__btn svg{transition:none;}
  .hm-cc__card:hover .hm-cc__media img{transform:none;}
}