/* SepetHilesi — her zaman beyaz zemin (koyu mod yok), sade, kadınlara yönelik yumuşak gül tonları. Tek ana renk: gül (kodu al / kampanyaya git). */
:root{
  --bg:#FFFFFF; --page:#FFF5F8; --soft:#FFEAF1; --soft-2:#FDE6EE; --ink:#2B1D2A; --muted:#75626F; --line:#F0DFE5;
  --rose:#D63A6B; --rose-hover:#BE2C5B; --rose-ink:#FFFFFF; --rose-soft:#FDE7EE;
  --good:#1E8A55; --good-bg:#E7F6EE; --mid:#9A6200; --mid-bg:#FFF4DE; --bad:#B42B33; --bad-bg:#FDECEC; --new:#6E5A68; --new-bg:#F4EEF2;
  --shadow:0 1px 2px rgba(43,29,42,.05), 0 10px 28px -16px rgba(214,58,107,.35);
  --f:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  color-scheme:light;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--f);font-size:16px;line-height:1.55}
.wrap{max-width:960px;margin:0 auto;padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
.narrow{max-width:720px}
button,input,select{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:2px solid var(--rose);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}

/* header */
.top{border-bottom:1px solid var(--line);background:var(--bg)}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:14px}
.logo{display:flex;align-items:center;gap:9px;text-decoration:none;font-weight:800;font-size:20px;letter-spacing:-.02em}
.logo b{color:var(--rose);font-weight:800}
.logo-mark{width:26px;height:18px;border-radius:5px;background:var(--rose);position:relative;flex:none}
.logo-mark::after{content:"";position:absolute;left:5px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--bg)}
.free-pill{font-size:13px;font-weight:700;color:var(--good);background:var(--good-bg);padding:5px 11px;border-radius:999px;white-space:nowrap}

/* hero */
.hero{padding-block:40px 6px}
.hero h1{font-weight:800;font-size:clamp(30px,6vw,46px);line-height:1.08;letter-spacing:-.03em;margin:0 0 12px;text-wrap:balance;max-width:20ch}
.lead{color:var(--muted);font-size:17px;margin:0;max-width:58ch}

.free{margin-top:22px;background:var(--soft);border:1px solid var(--line);border-radius:16px;padding:16px 18px;display:grid;gap:4px}
.free b{font-size:16px}
.free span{color:var(--muted);font-size:15px}

/* filters */
.filters{margin-top:28px;display:grid;gap:10px}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:8px 14px;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap}
.chip:hover{border-color:var(--rose)}
.chip[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.chips.stores .chip{font-weight:500}
.chips.stores .chip[aria-pressed=true]{background:var(--rose);border-color:var(--rose);color:var(--rose-ink)}

/* sections */
section{margin-top:30px}
h2{font-weight:800;font-size:22px;letter-spacing:-.02em;margin:0 0 4px}
.sub{color:var(--muted);font-size:14px;margin:0 0 14px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.empty{background:var(--soft);border-radius:14px;padding:16px;color:var(--muted);font-size:15px}
.notice{background:var(--mid-bg);border-radius:14px;padding:14px 16px;font-size:15px}

/* card */
.card{border:1px solid var(--line);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--bg);box-shadow:var(--shadow);min-width:0}
.card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.store{font-size:13px;font-weight:700;padding:3px 9px;border-radius:7px;background:var(--soft-2)}
.st{font-size:12px;font-weight:700;padding:3px 8px;border-radius:999px;white-space:nowrap}
.st-new{color:var(--new);background:var(--new-bg)} .st-good{color:var(--good);background:var(--good-bg)}
.st-mid{color:var(--mid);background:var(--mid-bg)} .st-bad{color:var(--bad);background:var(--bad-bg)}
.st-soon{color:var(--rose);background:var(--rose-soft)}
.card h3{margin:0;font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.cond{margin:0;font-size:14px;color:var(--muted)}
.meta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:13px;color:var(--muted)}
.meta a{color:var(--muted)}
.code-box{display:flex;align-items:center;justify-content:space-between;gap:10px;border:2px dashed var(--rose);border-radius:12px;padding:8px 8px 8px 14px;background:var(--rose-soft)}
.code{font-family:var(--f-mono);font-weight:700;font-size:20px;letter-spacing:.08em;overflow-wrap:anywhere}
.code.masked{color:var(--muted);letter-spacing:.14em}
.cta{display:flex;align-items:center;justify-content:center;gap:6px;background:var(--rose);color:var(--rose-ink);text-decoration:none;border-radius:11px;padding:12px 16px;font-weight:800;font-size:15px;border:0;cursor:pointer;text-align:center}
.cta:hover{background:var(--rose-hover)}
.cta.ghost{background:transparent;color:var(--rose);border:2px solid var(--rose)}
.cta.ghost:hover{background:var(--rose-soft)}
.code-box .cta{flex:none;padding:10px 14px}
.vote{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);margin-top:auto;padding-top:4px;border-top:1px solid var(--line)}
.vote span{flex:1;min-width:0;padding-top:8px}
.vote button{flex:none}
.vote button{margin-top:8px;border:1px solid var(--line);background:var(--bg);border-radius:8px;padding:4px 10px;cursor:pointer;font-size:13px;font-variant-numeric:tabular-nums}
.vote button[aria-pressed=true]{border-color:var(--ink);background:var(--soft)}

/* how, faq */
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;counter-reset:s}
.steps li{background:var(--soft);border-radius:14px;padding:16px;display:grid;gap:4px;counter-increment:s}
.steps li::before{content:counter(s);width:28px;height:28px;border-radius:50%;background:var(--rose);color:var(--rose-ink);display:grid;place-items:center;font-weight:800;font-size:14px;margin-bottom:6px}
.steps span{font-size:14px;color:var(--muted)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:14px 0;font-weight:700}
.faq p{margin:0 0 14px;color:var(--muted);font-size:15px;max-width:65ch}

/* footer */
.foot{margin-top:56px;border-top:1px solid var(--line);padding-block:26px 40px;font-size:13px;color:var(--muted)}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:12px}
.foot nav a{font-weight:600;color:var(--ink);text-decoration:none}
.foot nav a:hover{text-decoration:underline}
.foot p{margin:0 0 6px;max-width:70ch}

/* text pages */
.page{padding-block:36px 8px}
.page h1{font-size:clamp(28px,5vw,38px);font-weight:800;letter-spacing:-.03em;margin:0 0 14px}
.page h2{font-size:19px;margin:26px 0 6px}
.page p,.page li{color:var(--ink);font-size:16px;max-width:68ch}
.page p.muted{color:var(--muted)}
.page ul{padding-left:20px}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom, 0px));z-index:30;background:var(--ink);color:var(--bg);padding:11px 16px;border-radius:11px;font-size:14px;font-weight:600;max-width:calc(100% - 32px);text-align:center;box-shadow:0 8px 24px -8px rgba(0,0,0,.4)}

@media (max-width:640px){
  .hero{padding-block:26px 4px}
  .steps{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
a.chip{text-decoration:none;display:inline-block}

/* ---- Ortalı düzen ---- */
.hero{text-align:center}
.hero h1{margin-left:auto;margin-right:auto}
.lead{margin-left:auto;margin-right:auto}
.free{max-width:640px;margin-left:auto;margin-right:auto;text-align:center}
.chips{justify-content:safe center}
section > h2, section > .sub{text-align:center}
.sub{margin-left:auto;margin-right:auto;max-width:60ch}
.grid{grid-template-columns:repeat(auto-fit,minmax(280px,320px));justify-content:center}
.empty,.notice{text-align:center;max-width:640px;margin-left:auto;margin-right:auto}
.steps{max-width:900px;margin-left:auto;margin-right:auto}
.steps li{text-align:center;justify-items:center}
.faq details{max-width:720px;margin-left:auto;margin-right:auto}
.tips{max-width:640px;margin:0 auto;padding-left:20px}
.tips li{margin-bottom:8px}
.foot{text-align:center}
.foot nav{justify-content:center}
.foot p{margin-left:auto;margin-right:auto}
.page h1,.page h2,.page p.muted{text-align:center}
.page p,.page ul{margin-left:auto;margin-right:auto}
@media (max-width:640px){ .grid{grid-template-columns:1fr} }

/* ---- Sepet Divası ---- */
.diva{display:flex;flex-direction:column;align-items:center;gap:6px;margin:0 auto 14px}
.diva img{width:clamp(150px,30vw,210px);height:auto;max-width:100%;animation:diva-sway 3.2s ease-in-out infinite;transform-origin:50% 90%}
.bubble{position:relative;order:-1;margin:0;background:var(--ink);color:var(--bg);font-weight:700;font-size:16px;line-height:1.35;padding:10px 16px;border-radius:16px;max-width:340px}
.bubble b{color:#FF8DB3}
.bubble::after{content:"";position:absolute;left:50%;bottom:-8px;margin-left:-8px;border:8px solid transparent;border-bottom:0;border-top-color:var(--ink)}
@keyframes diva-sway{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
.diva-mini{width:64px;height:64px;display:block;margin:0 auto 6px}

/* ---- Ponçik arka plan: kalpler, papyonlar, parıltılar ---- */
body{background-color:var(--page);background-image:url("/bg.svg");background-size:260px 260px;background-attachment:fixed}
.top{background:color-mix(in srgb, var(--page) 90%, transparent);backdrop-filter:blur(6px)}
.card{background:var(--bg)}
@media (prefers-reduced-motion:reduce){body{background-attachment:scroll}}

/* ---- Ürün kategorileri ---- */
.cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:10px;max-width:880px;margin:14px auto 0}
.cat{display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;background:var(--bg);border:1.5px solid var(--line);border-radius:16px;padding:14px 8px 12px;box-shadow:var(--shadow);transition:transform .15s,border-color .15s}
.cat:hover{transform:translateY(-2px);border-color:var(--rose)}
.cat[aria-pressed=true]{border-color:var(--rose);background:var(--rose-soft)}
.cat-ic{font-size:30px;line-height:1.1}
.cat-lb{font-weight:800;font-size:15px;text-align:center}
.cat-n{font-size:12px;color:var(--muted)}
.picked{text-align:center;margin:26px auto 0;font-size:16px}
.picked a{color:var(--rose);font-weight:700}
.valid{margin:0;font-size:13px;color:var(--ink);background:var(--soft);border-radius:9px;padding:6px 10px}
@media (max-width:640px){ .cats{grid-template-columns:repeat(3,minmax(0,1fr))} .cat-ic{font-size:26px} .cat-lb{font-size:13px} }

.cat[aria-current=page]{border-color:var(--rose);background:var(--rose-soft)}
.cat-hero{font-size:56px;line-height:1;margin:4px 0 8px}
.cats-mini{max-width:880px}
.cats-mini .cat{padding:10px 6px}
.cats-mini .cat-ic{font-size:22px}
.cats-mini .cat-lb{font-size:13px}