/* Caffolia vitrin — ürün, set ve yazı kartları
   Kaynak: onaylı sunumv2 tasarımı (kurulum/tasarim-referans).  */

/* ========================================================= 9. ÜRÜN KARTI */
.urun-izgara{display:grid;gap:clamp(14px,1.5vw,22px)}
.urun-izgara--5{grid-template-columns:repeat(5,1fr)}
.urun-izgara--4{grid-template-columns:repeat(4,1fr)}
.urun-izgara--esnek{grid-template-columns:repeat(auto-fill,minmax(236px,1fr))}

.urun-kart{
  position:relative;display:flex;flex-direction:column;
  background:var(--kart);border:1px solid var(--cizgi);border-radius:var(--r-m);
  overflow:hidden;transition:transform var(--gecis),box-shadow var(--gecis);
}
.urun-kart:hover{transform:translateY(-5px);box-shadow:var(--golge-m)}
.urun-kart__gorsel{position:relative;display:block;aspect-ratio:4/5;background:var(--kart)}
.urun-kart__gorsel img{width:100%;height:100%;object-fit:cover;
  transition:transform .55s cubic-bezier(.4,.14,.3,1)}
.urun-kart:hover .urun-kart__gorsel img{transform:scale(1.045)}

.urun-kart__govde{
  display:flex;flex-direction:column;gap:6px;flex:1;
  padding:clamp(14px,1.5vw,20px);border-top:1px solid var(--cizgi);
}
.urun-kart__ad{font-size:.99rem;font-weight:600;letter-spacing:-.008em;line-height:1.3}
.urun-kart__not{font-size:.8rem;line-height:1.5;color:var(--metin-2)}
.urun-kart__alt{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:12px}
.urun-kart__fiyat{font-size:1.08rem;font-weight:700;letter-spacing:-.01em}
.urun-kart__eski{margin-left:7px;font-size:.84rem;font-weight:500;color:var(--metin-2);text-decoration:line-through}

/* daire ok — koleksiyon kartı */
.daire-ok{
  display:grid;place-items:center;width:38px;height:38px;flex:none;
  border:1px solid var(--cizgi);border-radius:var(--r-tam);color:var(--metin);
  transition:background-color var(--gecis),color var(--gecis),border-color var(--gecis),transform var(--gecis);
}
.daire-ok svg{width:15px;height:15px}
.urun-kart:hover .daire-ok,.yazi-kart:hover .daire-ok{
  background:var(--kahve-800);border-color:var(--kahve-800);color:var(--krem);transform:rotate(-45deg);
}

/* kalp */
.kalp{
  position:absolute;top:12px;right:12px;z-index:2;display:grid;place-items:center;
  width:38px;height:38px;border-radius:var(--r-tam);
  background:rgba(255,255,255,.82);backdrop-filter:blur(6px);
  border:1px solid var(--cizgi);color:var(--metin);
  transition:background-color var(--gecis),color var(--gecis),transform var(--gecis);
}
.kalp svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6}
.kalp:hover{transform:scale(1.08);background:#fff}
.kalp[aria-pressed="true"]{background:var(--bordo-800);border-color:var(--bordo-800);color:#fff}
.kalp[aria-pressed="true"] svg{fill:currentColor;stroke:currentColor}

.urun-kart__sepet{
  margin-top:14px;padding:13px 18px;border-radius:var(--r-s);
  background:var(--kahve-800);color:var(--metin-ac);
  font-size:.88rem;font-weight:600;
  display:flex;align-items:center;justify-content:center;gap:9px;
  transition:background-color var(--gecis);
}
.urun-kart__sepet svg{width:16px;height:16px}
.urun-kart__sepet:hover{background:var(--bordo-800)}
.urun-kart__sepet[data-eklendi="1"]{background:#2F5233}

/* ======================================================== 9b. LEZZET SETLERİ
   Referans: _gelen/01-tasarim/paketli ürün nasıl göründüğü.png */
.setler{background:var(--zemin-2);border-block:1px solid var(--cizgi)}
.setler__tepe{align-items:flex-start}
.setler__tepe p{margin-top:10px;font-size:.98rem;color:var(--metin-2);max-width:46ch}
.setler__araclar{display:flex;align-items:center;gap:14px}
.serit-ok{
  display:grid;place-items:center;width:42px;height:42px;flex:none;
  border:1px solid var(--cizgi);border-radius:var(--r-tam);color:var(--metin);
  background:var(--beyaz);
  transition:background-color var(--gecis),color var(--gecis),border-color var(--gecis),opacity var(--gecis);
}
.serit-ok svg{width:16px;height:16px}
.serit-ok:hover:not(:disabled){background:var(--kahve-800);border-color:var(--kahve-800);color:var(--krem)}
.serit-ok:disabled{opacity:.34;cursor:default}
.serit-ok[hidden]{display:none}

.set-serit{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.4vw,18px)}

.set-kart{
  display:flex;flex-direction:column;
  padding:clamp(18px,1.8vw,24px);
  background:#FCFAF6;border:1px solid var(--cizgi);border-radius:var(--r-m);
  transition:transform var(--gecis),box-shadow var(--gecis);
}
.set-kart:hover{transform:translateY(-4px);box-shadow:var(--golge-m)}
.set-kart__ad{font-size:1.06rem;font-weight:700;letter-spacing:-.012em;text-align:center}
.set-kart__ozet{
  margin-top:7px;font-size:.84rem;line-height:1.5;color:var(--metin-2);
  text-align:center;min-height:2.52em;
}
.set-kart__gorsel{display:block;margin:clamp(12px,1.4vw,18px) 0}
.set-kart__gorsel img{width:100%;height:auto;aspect-ratio:760/905;object-fit:contain}

.set-kart__liste{display:flex;flex-direction:column;gap:9px;margin-bottom:auto}
.set-kart__liste li{display:flex;align-items:flex-start;gap:9px;font-size:.86rem;line-height:1.45}
.set-kart__liste svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--bordo-800)}

.set-kart__fiyat{
  display:flex;align-items:baseline;justify-content:center;gap:10px;
  margin:clamp(16px,1.8vw,22px) 0 14px;
}
.set-kart__fiyat b{font-size:1.32rem;font-weight:700;letter-spacing:-.015em;color:var(--bordo-700)}
.set-kart__eski{font-size:.92rem;color:var(--metin-2);text-decoration:line-through}
.set-kart .dugme{padding-block:13px;font-size:.92rem}

.set-serit--tam{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}

@media (max-width:1024px){
  .set-serit:not(.set-serit--tam){
    display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:6px;margin-inline:calc(-1*clamp(16px,4vw,40px));
    padding-inline:clamp(16px,4vw,40px);
    scrollbar-width:none;
  }
  .set-serit:not(.set-serit--tam)::-webkit-scrollbar{display:none}
  .set-serit:not(.set-serit--tam) .set-kart{flex:0 0 clamp(250px,58vw,310px);scroll-snap-align:start}
}
@media (max-width:640px){
  .setler__tepe{flex-direction:column;align-items:stretch}
  .setler__araclar{justify-content:space-between}
  .set-serit:not(.set-serit--tam) .set-kart{flex-basis:clamp(240px,78vw,300px)}
  .set-serit--tam{grid-template-columns:1fr}
}

/* =============================================================== 13. BLOG */
.blog__izgara{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px)}
.yazi-kart{
  display:flex;align-items:stretch;gap:0;background:var(--zemin-2);
  border:1px solid var(--cizgi);border-radius:var(--r-m);overflow:hidden;
  transition:transform var(--gecis),box-shadow var(--gecis);
}
.yazi-kart:hover{transform:translateY(-4px);box-shadow:var(--golge-m)}
.yazi-kart__gorsel{flex:0 0 33%;max-width:150px;position:relative;background:var(--kart)}
.yazi-kart__gorsel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.yazi-kart__govde{
  display:flex;flex-direction:column;gap:7px;flex:1;min-width:0;
  padding:clamp(16px,1.7vw,22px);
}
.yazi-kart__ad{font-size:1rem;font-weight:600;line-height:1.35;letter-spacing:-.008em}
.yazi-kart__not{font-size:.82rem;color:var(--metin-2);line-height:1.5}
.yazi-kart__alt{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:12px}
.yazi-kart__sure{font-size:.78rem;color:var(--metin-2)}