/* AyleModa vitrin — yuvarlak kategoriler + ürün bantları (2026-11-12) */
:root{
  --ay-murdum:#6B2D4A;
  --ay-murdum-koyu:#4A1E33;
  --ay-gul:#E8C3BE;
  --ay-gul-acik:#F7E7E3;
  --ay-altin:#C9A96E;
  --ay-altin-koyu:#9C7A3C;
  --ay-krem:#FBF7F1;
  --ay-murekkep:#2A1F1A;
  --ay-gri:#7A6E66;
}

/* ── Yuvarlak kategori şeridi ───────────────────────── */
.ay-kat-serit{background:linear-gradient(180deg,#fff 0%,var(--ay-krem) 100%);padding:22px 0 14px;border-bottom:1px solid #F0E6DA}
.ay-kat-ic{position:relative;max-width:1280px;margin:0 auto;padding:0 16px}
.ay-kat-ray{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding:4px 4px 6px;-webkit-overflow-scrolling:touch}
.ay-kat-ray::-webkit-scrollbar{display:none}
.ay-kat{flex:0 0 auto;width:118px;display:flex;flex-direction:column;align-items:center;gap:10px;text-decoration:none;color:var(--ay-murekkep);scroll-snap-align:start}
.ay-kat-halka{position:relative;width:108px;height:108px;border-radius:50%;padding:4px;
  background:conic-gradient(from 210deg,var(--ay-altin),var(--ay-gul),var(--ay-murdum),var(--ay-altin));
  box-shadow:0 6px 18px rgba(107,45,74,.12);transition:transform .25s ease,box-shadow .25s ease}
.ay-kat-halka::after{content:"";position:absolute;inset:4px;border-radius:50%;border:3px solid #fff;pointer-events:none}
.ay-kat-halka img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;background:#fff}
.ay-kat-sembol{width:100%;height:100%;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--ay-gul-acik),#fff);color:var(--ay-murdum);font-size:1.9rem}
.ay-kat-indirim .ay-kat-sembol{background:linear-gradient(135deg,var(--ay-murdum),#9B3F68);color:#fff}
.ay-kat-ad{font-size:.84rem;font-weight:600;line-height:1.25;text-align:center;max-width:118px}
.ay-kat:hover .ay-kat-halka,.ay-kat:focus-visible .ay-kat-halka{transform:translateY(-3px) scale(1.03);box-shadow:0 12px 26px rgba(107,45,74,.22)}
.ay-kat.aktif .ay-kat-halka{background:var(--ay-murdum);box-shadow:0 0 0 3px var(--ay-gul-acik),0 10px 24px rgba(107,45,74,.28)}
.ay-kat.aktif .ay-kat-ad{color:var(--ay-murdum);font-weight:800}

/* oklar (kategori + bantlar ortak) */
.ay-ok{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;
  background:#fff;color:var(--ay-murekkep);font-size:1.25rem;line-height:1;box-shadow:0 6px 18px rgba(0,0,0,.14);transition:transform .2s}
.ay-ok:hover{transform:translateY(-50%) scale(1.08)}
.ay-ok[hidden]{display:none}
.ay-kat-ic .ay-ok{top:54px}
.ay-ok-sol{left:4px}.ay-ok-sag{right:4px}

/* kategori sayfasındaki şerit */
.ay-kat-serit.ay-kat-serit-kategori{background:#fff;padding:18px 0 10px}
.ay-kat-serit-kategori .ay-kat{width:100px}
.ay-kat-serit-kategori .ay-kat-halka{width:88px;height:88px}
.ay-kat-serit-kategori .ay-kat-ic .ay-ok,.ay-kat-serit-kategori .ay-ok{top:44px}

/* sayfa başlığı (ana sayfa h1) */
.ay-ana-baslik{max-width:1280px;margin:0 auto;padding:0 20px 2px;display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ay-ana-baslik h1{font-family:var(--font-serif,Georgia,serif);font-size:1.15rem;font-weight:700;color:var(--ay-murekkep);margin:0}
.ay-ana-baslik span{font-size:.82rem;color:var(--ay-gri)}

/* ── Ürün bantları ──────────────────────────────────── */
.ay-bant{padding:26px 16px}
.ay-bant[hidden]{display:none}
.ay-bant-ic{max-width:1280px;margin:0 auto;border-radius:28px;padding:30px 30px 34px;position:relative;overflow:hidden}
.ay-bant-ic::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.35) 1px,transparent 1.5px);background-size:22px 22px}
.ay-bant-bas{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.ay-bant-bas h2{font-family:var(--font-serif,Georgia,serif);font-size:2rem;line-height:1.15;margin:0 0 6px;font-weight:700;letter-spacing:-.01em}
.ay-bant-bas p{margin:0;font-size:.95rem;opacity:.85;color:inherit}
.ay-bant .ay-bant-bas h2{color:inherit}
.ay-bant-sag{display:flex;align-items:center;gap:18px}
.ay-bant-link{display:inline-flex;align-items:center;gap:8px;font-weight:700;text-decoration:none;padding:12px 22px;border-radius:999px;background:#fff;color:var(--ay-murekkep);box-shadow:0 6px 18px rgba(0,0,0,.1);transition:transform .2s}
.ay-bant-link:hover{transform:translateY(-2px)}
.ay-temizle{background:none;border:0;color:inherit;opacity:.85;text-decoration:underline;font-size:.86rem;cursor:pointer;padding:4px}
.ay-temizle:hover{opacity:1}

.ay-bant-koyu .ay-bant-ic{background:linear-gradient(120deg,var(--ay-murdum-koyu) 0%,var(--ay-murdum) 45%,#9B4A6E 100%);color:#fff}
.ay-bant-sicak .ay-bant-ic{background:linear-gradient(120deg,#F3DCC4 0%,var(--ay-gul) 50%,#E7B9A8 100%);color:var(--ay-murekkep)}
.ay-bant-sicak .ay-bant-ic::before{background-image:radial-gradient(rgba(255,255,255,.6) 1px,transparent 1.5px)}
.ay-bant-altin .ay-bant-ic{background:linear-gradient(120deg,#FBF3E6 0%,#F1DFC2 55%,#E6CBA0 100%);color:var(--ay-murekkep)}
.ay-bant-altin .ay-bant-ic::before{background-image:radial-gradient(rgba(255,255,255,.7) 1px,transparent 1.5px)}
.ay-bant-altin .ay-rozet{background:linear-gradient(135deg,var(--ay-altin),var(--ay-altin-koyu))}
.ay-bant-acik .ay-rozet{background:var(--ay-murdum)}
.ay-bant-yeni .ay-bant-ic{background:linear-gradient(120deg,#EADCF0 0%,#E3C3D8 50%,#D2A9C4 100%);color:var(--ay-murekkep)}
.ay-bant-yeni .ay-bant-ic::before{background-image:radial-gradient(rgba(255,255,255,.65) 1px,transparent 1.5px)}
.ay-bant-yeni .ay-rozet{background:linear-gradient(135deg,#8E5BA8,var(--ay-murdum))}
.ay-bant-yeni .ay-kart-fiyat strong{color:#7A3E86}
.ay-bant-acik .ay-bant-ic{background:var(--ay-krem);color:var(--ay-murekkep);border:1px solid #F0E6DA}

.ay-ray-kap{position:relative}
.ay-ray{position:relative;display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 2px 10px;-webkit-overflow-scrolling:touch}
.ay-ray::-webkit-scrollbar{display:none}
.ay-ray-kap .ay-ok-sol{left:-14px}.ay-ray-kap .ay-ok-sag{right:-14px}

/* kart */
.ay-kart{flex:0 0 calc((100% - 5*18px)/6);min-width:190px;scroll-snap-align:start;display:flex;flex-direction:column;background:#fff;border-radius:20px;overflow:hidden;
  text-decoration:none;color:var(--ay-murekkep);box-shadow:0 8px 22px rgba(42,31,26,.10);transition:transform .25s ease,box-shadow .25s ease}
.ay-kart:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(42,31,26,.16)}
.ay-kart-gorsel{position:relative;display:block;aspect-ratio:1/1;background:#F6F1EA;overflow:hidden}
.ay-kart-gorsel img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.ay-kart:hover .ay-kart-gorsel img{transform:scale(1.05)}
.ay-rozet{position:absolute;top:12px;left:12px;background:rgba(42,31,26,.88);color:#fff;font-size:.74rem;font-weight:700;padding:6px 12px;border-radius:999px;backdrop-filter:blur(4px)}
.ay-rozet-sicak{background:linear-gradient(135deg,#E2763A,#C8452E);text-transform:uppercase;letter-spacing:.02em;box-shadow:0 4px 12px rgba(200,69,46,.35)}
.ay-indirim{position:absolute;bottom:10px;left:10px;background:var(--ay-murdum);color:#fff;font-size:.74rem;font-weight:800;padding:5px 9px;border-radius:999px}
.ay-kart-govde{display:flex;flex-direction:column;gap:6px;padding:14px 16px 16px;flex:1}
.ay-kart-kat{font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ay-murdum)}
.ay-kart-ad{font-size:.95rem;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.ay-kart-fiyat{display:flex;align-items:baseline;gap:8px;margin-top:auto;padding-top:6px;flex-wrap:wrap}
.ay-kart-fiyat s{color:#A39A92;font-size:.85rem}
.ay-kart-fiyat strong{font-size:1.3rem;font-weight:800;color:var(--ay-murdum)}
.ay-bant-sicak .ay-kart-fiyat strong{color:#C8452E}
.ay-kart-not{font-size:.72rem;color:var(--ay-gri)}

@media (max-width:1100px){.ay-kart{flex-basis:calc((100% - 3*18px)/4)}}
@media (max-width:820px){
  .ay-bant{padding:18px 10px}
  .ay-bant-ic{padding:22px 16px 24px;border-radius:22px}
  .ay-bant-bas h2{font-size:1.5rem}
  .ay-kart{flex-basis:calc((100% - 14px)/2.3);min-width:150px}
  .ay-ray{gap:14px}
  .ay-ray-kap .ay-ok{display:none}
  .ay-kat{width:86px}.ay-kat-ad{font-size:.76rem;max-width:86px}
  .ay-kat-halka{width:80px;height:80px;padding:3px}
  .ay-kat-ic .ay-ok{display:none}
  .ay-kat-ray{gap:14px}
  .ay-kat-serit-kategori .ay-kat{width:80px}
  .ay-kat-serit-kategori .ay-kat-halka{width:72px;height:72px}
  .ay-kart-not{display:none}
  .ay-bant-bas{flex-wrap:nowrap;align-items:center;margin-bottom:16px}
  .ay-bant-bas h2{font-size:1.3rem;margin-bottom:2px}
  .ay-bant-bas p{font-size:.8rem}
  .ay-bant-sag{gap:8px;flex-shrink:0;flex-direction:column;align-items:flex-end}
  .ay-bant-link{padding:8px 14px;font-size:.82rem}
  .ay-temizle{font-size:.74rem}
  .ay-rozet{font-size:.66rem;padding:4px 9px;top:8px;left:8px}
  .ay-indirim{font-size:.68rem;bottom:8px;left:8px}
  .ay-kart-govde{padding:10px 12px 12px}
  .ay-kart-ad{font-size:.85rem}
  .ay-kart-fiyat strong{font-size:1.08rem}
  .ay-ana-baslik h1{font-size:1rem}
}
@media (prefers-reduced-motion:reduce){
  .ay-kat-halka,.ay-kart,.ay-kart-gorsel img,.ay-ok{transition:none}
}

/* ── Fırsatlar (Trendyol tarzı kampanya kartları) ─────── */
.ay-firsat{padding:30px 16px}
.ay-firsat-ic{max-width:1280px;margin:0 auto;background:#fff;border:1px solid #F0E3DC;border-radius:28px;padding:28px 30px 30px;box-shadow:0 10px 30px rgba(74,30,51,.06)}
.ay-firsat-bas{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.ay-firsat-bas h2{font-family:var(--font-serif,Georgia,serif);font-size:2rem;margin:0 0 6px;color:var(--ay-murekkep);display:flex;align-items:center;gap:12px}
.ay-firsat-bas p{margin:0;color:var(--ay-gri);font-size:.95rem}
.ay-f-alev{width:42px;height:42px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;font-size:1.1rem;color:#fff;background:linear-gradient(135deg,#F28C38,#D9422E);box-shadow:0 6px 14px rgba(217,66,46,.3)}
.ay-firsat .ay-bant-link{background:var(--ay-murekkep);color:#fff}
.ay-f-ray{gap:16px;padding-bottom:12px}
.ay-f-kart{flex:0 0 290px;min-height:206px;scroll-snap-align:start;position:relative;overflow:hidden;border-radius:20px;padding:18px 20px;display:flex;flex-direction:column;gap:4px;color:#fff;isolation:isolate}
.ay-f-kart::after{content:"";position:absolute;right:-40px;bottom:-50px;width:170px;height:170px;border-radius:50%;background:rgba(255,255,255,.12);z-index:-1}
.ay-f-kart::before{content:"";position:absolute;right:40px;top:-60px;width:110px;height:110px;border-radius:50%;background:rgba(255,255,255,.08);z-index:-1}
.ay-f-murdum{background:linear-gradient(135deg,#8A3A60 0%,var(--ay-murdum) 45%,var(--ay-murdum-koyu) 100%)}
.ay-f-sicak{background:linear-gradient(135deg,#F59A42 0%,#E5602F 50%,#C8382E 100%)}
.ay-f-altin{background:linear-gradient(135deg,#E2C48C 0%,var(--ay-altin) 50%,var(--ay-altin-koyu) 100%)}
.ay-f-gece{background:linear-gradient(135deg,#3A2531 0%,var(--ay-gece,#24131D) 100%)}
.ay-f-kupon{background:var(--ay-gul-acik);color:var(--ay-murekkep);border:2px dashed rgba(107,45,74,.35);
  -webkit-mask:radial-gradient(circle 12px at 0 58%,transparent 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 12px at 100% 58%,transparent 98%,#000) right/51% 100% no-repeat;
          mask:radial-gradient(circle 12px at 0 58%,transparent 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 12px at 100% 58%,transparent 98%,#000) right/51% 100% no-repeat}
.ay-f-kupon::after,.ay-f-kupon::before{background:rgba(107,45,74,.06)}
.ay-f-ust{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.ay-f-etiket{font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:rgba(255,255,255,.2);padding:5px 10px;border-radius:999px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:62%}
.ay-f-kupon .ay-f-etiket{background:var(--ay-murdum);color:#fff}
.ay-f-sure{font-size:.72rem;font-weight:700;background:rgba(0,0,0,.18);padding:5px 9px;border-radius:999px;white-space:nowrap}
.ay-f-kupon .ay-f-sure{background:#fff;color:var(--ay-murdum)}
.ay-f-deger{font-family:var(--font-serif,Georgia,serif);font-size:2.7rem;font-weight:800;line-height:1;display:flex;align-items:baseline;gap:8px;letter-spacing:-.02em}
.ay-f-deger small{font-family:var(--font-sans,Inter,sans-serif);font-size:.78rem;font-weight:800;letter-spacing:.08em;opacity:.9}
.ay-f-kupon .ay-f-deger{color:var(--ay-murdum)}
.ay-f-baslik{font-size:.98rem;font-weight:700;line-height:1.3;margin-top:4px}
.ay-f-alt{font-size:.78rem;opacity:.85}
.ay-f-alt-satir{margin-top:auto;padding-top:12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ay-f-kod{display:inline-flex;align-items:center;gap:8px;border:1.5px dashed var(--ay-murdum);background:#fff;border-radius:10px;padding:5px 6px 5px 12px}
.ay-f-kod b{font-family:ui-monospace,Menlo,monospace;font-size:.95rem;letter-spacing:.12em;color:var(--ay-murdum)}
.ay-f-kod button{border:0;border-radius:7px;background:var(--ay-murdum);color:#fff;font-size:.72rem;font-weight:700;padding:6px 9px;cursor:pointer}
.ay-f-kod-acik{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.6)}
.ay-f-kod-acik b{color:#fff}
.ay-f-kod-acik button{background:#fff;color:var(--ay-murdum)}
.ay-f-kod button.ok{background:#2E9D5B;color:#fff}
.ay-f-cta{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;font-weight:800;color:inherit;text-decoration:none;background:rgba(255,255,255,.2);padding:8px 13px;border-radius:999px;transition:background .2s}
.ay-f-cta:hover{background:rgba(255,255,255,.32);color:inherit}
.ay-f-altin,.ay-f-altin .ay-f-cta{color:#3B2A10}
.ay-firsat-urun{margin-top:24px;padding-top:22px;border-top:1px dashed #EADBD3}
.ay-firsat-alt-bas{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.ay-firsat-alt-bas h3{margin:0;font-size:1.15rem;font-weight:800;color:#C8382E;display:flex;align-items:center;gap:8px}
.ay-firsat-alt-bas a{font-weight:700;color:var(--ay-murdum);text-decoration:none;font-size:.9rem}
.ay-firsat .ay-ray-kap .ay-ok-sol{left:-18px}.ay-firsat .ay-ray-kap .ay-ok-sag{right:-18px}
.ay-firsat .ay-kart{box-shadow:0 4px 16px rgba(42,31,26,.08);border:1px solid #F3EAE4}
.ay-firsat .ay-indirim{background:linear-gradient(135deg,#F28C38,#D9422E);font-size:.8rem}
@media (max-width:820px){
  .ay-firsat{padding:18px 10px}
  .ay-firsat-ic{padding:20px 14px 22px;border-radius:22px}
  .ay-firsat-bas{flex-wrap:nowrap;align-items:center}
  .ay-firsat-bas h2{font-size:1.4rem;gap:8px}
  .ay-firsat-bas p{font-size:.78rem}
  .ay-f-alev{width:34px;height:34px;font-size:.95rem}
  .ay-firsat .ay-bant-link{padding:8px 12px;font-size:.78rem;flex-shrink:0}
  .ay-f-kart{flex-basis:78%;min-height:190px}
  .ay-f-deger{font-size:2.3rem}
  .ay-f-ust{flex-wrap:wrap;justify-content:flex-start}
  .ay-f-etiket{max-width:none}
}