/* ==========================================================================================
   hastayuruteci.com — ŞEKER TEMA: "tatlı ve satış odaklı" katman (tema.css'ten SONRA yüklenir, 12.10.2026)
   Pastel şeker paleti (pembe · nane · tereyağı · gökyüzü), balon köşeler, 3B şeker düğmeler, çıkartma rozetleri,
   kayan kampanya şeridi, mobil alt çubuk, ürün sayfasında kaydırınca beliren sepet çubuğu.
   Kural: aciliyet/indirim yalnızca GERÇEK veriden (liste fiyatı, kargo ayarı) — sahte sayaç / "son 2 ürün" yok.
   Kontrast: --red #c2185b beyaz yazıyla 5.9; --ink #2b1530 kremde 15+; --mut #6a5670 kremde 5.6.
   ========================================================================================== */
:root {
  --paper: #fff7f3;
  --card: #ffffff;
  --ink: #2b1530;
  --ink-2: #4d3a52;
  --mut: #6a5670;
  --line: #f5e2ea;
  --line-2: #ecc9d8;
  --red: #c2185b;
  --red-d: #a01350;
  --red-deep: #4a0d33;
  --red-soft: #ffe6ef;
  --red-light: #ffadc9;
  --candy: #ff4f8b;
  --coral: #ff8a3d;
  --coral-d: #b8460c;
  --coral-soft: #fff1e6;
  --mint: #23a586;
  --mint-d: #127560;
  --mint-soft: #e2f7f0;
  --butter: #ffd84d;
  --butter-soft: #fff6cf;
  --sky: #7cc7ff;
  --sky-soft: #e6f4ff;
  --lilac: #b79cff;
  --lilac-soft: #f1ebff;
  --focus: #a01350;
  --r-xl: 34px;
  --r-lg: 26px;
  --r-md: 18px;
  --sh-soft: 0 1px 2px rgba(74, 13, 51, .04), 0 12px 30px -16px rgba(194, 24, 91, .22);
  --sh-lift: 0 2px 6px rgba(74, 13, 51, .05), 0 28px 50px -22px rgba(194, 24, 91, .38);
  --candy-grad: linear-gradient(180deg, #ff5d97 0%, #e3266f 55%, #c2185b 100%);
}
::selection { background: var(--candy); color: #fff; }
body { background: var(--paper); }
.pcard { --focus: #a01350; }

/* --- Düğmeler: 3B şeker --- */
.btn { border-radius: 99px; font-weight: 800; letter-spacing: -.005em; }
.btn-primary, .btn-candy { background: var(--candy-grad); color: #fff; border: 0; box-shadow: 0 5px 0 #8e0f45, 0 16px 26px -12px rgba(194, 24, 91, .65); text-shadow: 0 1px 0 rgba(120, 10, 55, .35); }
.btn-primary:hover, .btn-candy:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #8e0f45, 0 20px 30px -12px rgba(194, 24, 91, .7); }
.btn-primary:active:not(:disabled), .btn-candy:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 #8e0f45, 0 6px 14px -8px rgba(194, 24, 91, .6); }
.btn-wa { background: linear-gradient(180deg, #22c06b, #0f7a3c); border: 0; box-shadow: 0 5px 0 #09592b, 0 16px 26px -12px rgba(15, 122, 60, .6); }
.btn-wa:hover { background: linear-gradient(180deg, #22c06b, #0f7a3c); transform: translateY(-2px); box-shadow: 0 7px 0 #09592b, 0 20px 30px -12px rgba(15, 122, 60, .65); }
.btn-wa:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 #09592b; }
.btn-ghost { background: #fff; border: 2px solid var(--line-2); color: var(--ink); }
.btn-ghost:hover { border-color: var(--candy); color: var(--red-d); background: var(--red-soft); }
.btn-lg { min-height: 56px; padding: 17px 30px; font-size: 16px; }

/* --- Rozetler: çıkartma --- */
.badge { border-radius: 99px; letter-spacing: .04em; }
.badge-red, .badge-sale { background: var(--butter); color: #4a0d33; font-size: 12.5px; padding: 7px 11px; transform: rotate(-6deg); box-shadow: 0 3px 0 #e0b416, 0 8px 16px -8px rgba(74, 13, 51, .4); border: 2px solid #fff; }
.badge-ship { background: var(--mint-soft); color: var(--mint-d); border: 1.5px solid #bfe9dc; font-size: 10.5px; padding: 5px 9px; }
.badge-ship .ic { width: 12px; height: 12px; }
.badge-mut { background: #f1e7ec; color: var(--mut); }
.pcard-badges { right: 52px; }
@media (max-width: 560px) { .badge-ship { font-size: 9px; padding: 4px 7px; letter-spacing: .02em; gap: 3px; } .badge-ship .ic { width: 10px; height: 10px; } .badge-red, .badge-sale { font-size: 11px; padding: 5px 8px; } }

/* --- Kayan kampanya şeridi --- */
.topbar { background: linear-gradient(90deg, #4a0d33, #7b1450 50%, #4a0d33); color: #fff; overflow: hidden; }
.ticker { position: relative; overflow: hidden; min-height: 36px; display: flex; align-items: center; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.ticker-track { display: flex; width: max-content; animation: ticker 38s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-list { display: flex; flex: none; margin: 0; padding: 0; list-style: none; }
.ticker-list li { display: inline-flex; align-items: center; gap: 8px; padding: 0 18px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.ticker-list .ic { width: 15px; height: 15px; color: var(--butter); }
.ticker-heart { margin-left: 18px; color: var(--candy); font-size: 11px; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* --- Başlık / menü --- */
.hdr { background: rgba(255, 255, 255, .95); }
.hdr-search input { border: 2px solid var(--line-2); background: #fff; }
.hdr-search input:focus { border-color: var(--candy); box-shadow: 0 0 0 4px rgba(255, 79, 139, .15); }
.hdr-search-btn { background: var(--candy-grad); box-shadow: 0 3px 0 #8e0f45; }
.nav-link { border-radius: 99px; transition: background .2s, color .2s; }
.nav-link:hover, .nav-link.is-on { background: var(--red-soft); color: var(--red-d); }
#basketCount { background: var(--candy); color: #fff; }

/* --- Bölüm başlıkları --- */
.x-eyebrow { color: var(--red); }
.x-eyebrow::before { content: "♥"; width: auto; height: auto; background: none; color: var(--candy); font-size: 13px; letter-spacing: 0; }

/* --- Ana sayfa üst alan --- */
.x-hero { background:
  radial-gradient(rgba(255, 79, 139, .13) 1.4px, transparent 1.6px) 0 0 / 22px 22px,
  linear-gradient(160deg, #ffe3ee 0%, #fff1e6 45%, #e9f8f3 100%); }
.x-blob-1 { background: radial-gradient(circle, #ffb8d2 0%, transparent 70%); opacity: .7; }
.x-blob-2 { background: radial-gradient(circle, #ffe08a 0%, transparent 70%); opacity: .6; }
.x-grid { display: none; }
.x-chip { background: #fff; border: 2px solid #ffd3e3; box-shadow: 0 6px 16px -10px rgba(194, 24, 91, .4); }
.x-chip-dot { background: var(--mint); box-shadow: 0 0 0 4px rgba(35, 165, 134, .2); animation: hy-pulse 1.8s ease-in-out infinite; }
@keyframes hy-pulse { 50% { box-shadow: 0 0 0 8px rgba(35, 165, 134, 0); } }
.x-hero h1 em { color: var(--red); background: linear-gradient(transparent 60%, var(--butter) 60%, var(--butter) 92%, transparent 92%); padding: 0 .08em; border-radius: 4px; }
.x-hero-mascot { display: inline-block; width: 1.2em; height: 1.2em; vertical-align: -.2em; margin-left: .06em; animation: hy-bob 3.2s ease-in-out infinite; filter: drop-shadow(0 8px 10px rgba(194, 24, 91, .25)); }
@keyframes hy-bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-7px) rotate(3deg); } }
.x-deals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 22px; padding: 0; list-style: none; max-width: 560px; }
.x-deal { display: grid; gap: 1px; padding: 12px 10px 11px; border-radius: 20px; border: 2px solid #fff; box-shadow: 0 10px 22px -14px rgba(74, 13, 51, .5); text-align: center; min-width: 0; }
.x-deal small { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.x-deal b { font-size: clamp(16px, 2vw, 22px); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; overflow-wrap: anywhere; }
.x-deal span { font-size: 11.5px; font-weight: 700; }
.x-deal-price { background: var(--butter); color: #4a0d33; transform: rotate(-2deg); }
.x-deal-ship { background: var(--mint-soft); color: var(--mint-d); transform: rotate(1.5deg); }
.x-deal-fast { background: var(--sky-soft); color: #1f5d8c; transform: rotate(-1deg); }
.x-hero-facts li { background: rgba(255, 255, 255, .85); border: 2px solid #fff; }
.x-hero-facts .ic { background: var(--red-soft); color: var(--red); border-radius: 12px; }
.x-hero-facts a { color: var(--red-d); font-weight: 800; }
.x-stage { background: rgba(255, 255, 255, .8); border: 3px solid #fff; box-shadow: 0 30px 60px -28px rgba(194, 24, 91, .45); }
.x-stage-tabs button { border: 2px solid var(--line); }
.x-stage-tabs button[aria-selected="true"] { border-color: transparent; background: var(--candy-grad); }

/* --- Güven şeridi --- */
.trust-i { border: 2px solid var(--line); border-radius: 20px; }
.trust-i:nth-child(4n+1) .trust-ic { background: var(--red-soft); color: var(--red); }
.trust-i:nth-child(4n+2) .trust-ic { background: var(--mint-soft); color: var(--mint-d); }
.trust-i:nth-child(4n+3) .trust-ic { background: var(--butter-soft); color: #8a6400; }
.trust-i:nth-child(4n+4) .trust-ic { background: var(--lilac-soft); color: #5b3fb0; }
.trust-ic { border-radius: 14px; }

/* --- Durum kartları ve kategoriler: pastel sıralı renkler --- */
.x-need { border: 2px solid var(--line); }
.x-need:nth-child(6n+1) { background: linear-gradient(160deg, #fff, var(--red-soft)); }
.x-need:nth-child(6n+2) { background: linear-gradient(160deg, #fff, var(--mint-soft)); }
.x-need:nth-child(6n+3) { background: linear-gradient(160deg, #fff, var(--butter-soft)); }
.x-need:nth-child(6n+4) { background: linear-gradient(160deg, #fff, var(--sky-soft)); }
.x-need:nth-child(6n+5) { background: linear-gradient(160deg, #fff, var(--lilac-soft)); }
.x-need:nth-child(6n+6) { background: linear-gradient(160deg, #fff, var(--coral-soft)); }
.x-need::after { background: radial-gradient(circle, rgba(255, 79, 139, .18), transparent 70%); }
.x-need-ic { background: #fff; border: 2px solid var(--line); color: var(--red); border-radius: 16px; }
.x-need-m { color: var(--red-d); font-weight: 800; }
.x-cat { border: 2px solid var(--line); border-radius: var(--r-lg); }
.x-cat:hover { border-color: var(--red-light); }
.x-cat-3d { background: var(--butter); color: #4a0d33; }

/* --- Ürün kartı: satış odaklı --- */
.pcard { border: 2px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-soft); }
.pcard:hover { transform: translateY(-6px) rotate(-.4deg); border-color: var(--red-light); box-shadow: var(--sh-lift); }
.pcard-media { background: radial-gradient(85% 85% at 50% 35%, #fff 0%, #fff5f8 70%, #ffeef4 100%); border-bottom: 2px dashed var(--line); }
.pcard-media { overflow: hidden; min-height: 0; }
/* Portre (dikey) fotoğraf kare kutuyu uzatmasın: görsel kutuya sabitlenir */
.pcard-media img { position: absolute; inset: 14px; width: calc(100% - 28px); height: calc(100% - 28px); object-fit: contain; }
.pcard-badges { gap: 7px; }
.pcard-brand { color: var(--red); }
.pcard-foot { flex-direction: column; align-items: stretch; gap: 10px; }
.pcard-price { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.pcard-price .price { font-size: clamp(18px, 1.6vw, 21px); color: var(--red); }
.pcard-price .price-old { font-size: 12.5px; color: var(--mut); }
.pcard-stock { color: var(--mint-d); font-weight: 800; flex-basis: 100%; }
.pcard-add { width: 100%; height: 42px; border-radius: 99px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: var(--candy-grad); border: 0; color: #fff; font-size: 14px; font-weight: 800; box-shadow: 0 4px 0 #8e0f45, 0 10px 18px -10px rgba(194, 24, 91, .6); }
.pcard-add .ic { width: 17px; height: 17px; }
.pcard:hover .pcard-add:not(:disabled) { background: var(--candy-grad); color: #fff; }
.pcard-add:hover:not(:disabled) { transform: translateY(-2px); }
.pcard-add:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #8e0f45; }
.pcard-add:disabled { background: #efe3e9; color: var(--mut); box-shadow: none; opacity: 1; }
.pcard-add.is-done { background: linear-gradient(180deg, #2fc59e, #1a8f72); box-shadow: 0 4px 0 #0f6a54; }
.pcard-add.is-done .pcard-add-t { font-size: 0; }
.pcard-add.is-done .pcard-add-t::after { content: "Eklendi ✓"; font-size: 14px; }
.pc-tool { background: #fff; border: 2px solid var(--line); }
.pc-tool[aria-pressed="true"] { background: var(--candy); border-color: var(--candy); color: #fff; }

/* --- Sekmeler, çipler --- */
.ptabs-nav { border-bottom: 0; gap: 8px; padding: 2px 2px 8px; }
.ptabs-nav button { border: 2px solid var(--line); border-radius: 99px; margin-bottom: 0; padding: 10px 18px; font-size: 15px; background: #fff; }
.ptabs-nav button[aria-selected="true"] { background: var(--candy-grad); border-color: transparent; color: #fff; box-shadow: 0 4px 0 #8e0f45; }
.chip.is-on, .fchip.is-on { background: var(--candy); border-color: var(--candy); color: #fff; }

/* --- Ürün sayfası satın alma kutusu --- */
.price-box { background: linear-gradient(160deg, #fff, var(--red-soft)); border: 2px solid #ffd3e3; border-radius: 22px; }
.price-box .prc { color: var(--red); }
.ship-line b { color: var(--mint-d); }

/* Kaydırınca beliren sepet çubuğu (ürün sayfası) */
.sbuy { position: fixed; left: 0; right: 0; bottom: 0; z-index: 140; background: rgba(255, 255, 255, .97); border-top: 2px solid #ffd3e3; box-shadow: 0 -14px 30px -18px rgba(194, 24, 91, .45); transform: translateY(115%); transition: transform .35s cubic-bezier(.16, 1, .3, 1); padding-bottom: env(safe-area-inset-bottom); }
.sbuy.is-on { transform: translateY(0); }
.sbuy-in { display: flex; align-items: center; gap: 12px; min-height: 70px; }
.sbuy-img { width: 52px; height: 52px; object-fit: contain; border-radius: 14px; background: #fff; border: 2px solid var(--line); flex: none; }
.sbuy-t { display: grid; min-width: 0; flex: 1; line-height: 1.25; }
.sbuy-t b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sbuy-t span { font-size: 13px; color: var(--mut); }
.sbuy-t strong { font-size: 19px; color: var(--red); font-weight: 800; }
.sbuy .btn { flex: none; min-height: 48px; padding: 12px 20px; }
@media (max-width: 520px) { .sbuy-img, .sbuy-t b { display: none; } }
/* Çubuk açıkken yüzen düğmeler üstüne binmesin */
.wa-fab, .to-top { transition: bottom .35s cubic-bezier(.16, 1, .3, 1), opacity .25s, transform .25s; }
body.sbuy-on .wa-fab { bottom: 96px; }
body.sbuy-on .to-top { bottom: 96px; }

/* Mobil alt çubuk */
.mbar { display: none; }
@media (max-width: 899px) {
  .mbar { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 130; display: grid; grid-template-columns: repeat(4, 1fr); align-items: end; gap: 4px; padding: 6px; border-radius: 24px; background: rgba(255, 255, 255, .97); border: 2px solid #ffd3e3; box-shadow: 0 16px 34px -14px rgba(74, 13, 51, .45); }
  .mbar a { position: relative; display: grid; justify-items: center; gap: 2px; padding: 6px 2px; font-size: 11px; font-weight: 800; color: var(--ink-2); border-radius: 16px; }
  .mbar .ic { width: 21px; height: 21px; color: var(--red); }
  .mbar a i { position: absolute; top: 2px; right: calc(50% - 22px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--candy); color: #fff; font-size: 10.5px; font-style: normal; display: grid; place-items: center; }
  .mbar .mbar-wa { background: linear-gradient(180deg, #22c06b, #0f7a3c); color: #fff; box-shadow: 0 4px 0 #09592b; }
  .mbar .mbar-wa .ic { color: #fff; }
  body { padding-bottom: 86px; }
  .wa-fab { display: none; }
  .to-top { bottom: 96px; }
  body.page-product .mbar { display: none; }
  body.page-product { padding-bottom: 74px; }
  .x-deals { gap: 8px; }
}

/* --- Alt bilgi: dalgalı üst kenar --- */
.footer { position: relative; background: #2b1530; }
.footer::before { content: ""; position: absolute; left: 0; right: 0; top: -28px; height: 30px; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 30' preserveAspectRatio='none'%3E%3Cpath d='M0 30 Q15 0 30 15 T60 15 T90 15 T120 15 V30Z' fill='%232b1530'/%3E%3C/svg%3E") repeat-x 0 0 / 120px 30px; }

/* --- Hareket azaltma --- */
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
  .ticker { overflow-x: auto; }
  .ticker-list[aria-hidden="true"] { display: none; }
  .x-hero-mascot, .x-chip-dot { animation: none; }
  .pcard:hover { transform: none; }
  .sbuy { transition: none; }
}