/* birimli — mobile first. Every product is a shelf label on a grey shelf; the cheapest one is the
   yellow label; a dark shelf rail separates the products still waiting for their label.
   Product images and logos always sit on white (packshots are shot on white). */
@font-face{font-family:"Barlow";src:url(fonts/Barlow-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Barlow";src:url(fonts/Barlow-SemiBold.woff2) format("woff2");font-weight:600 700;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(fonts/BarlowCondensed-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
:root{
 --shelf:#e9edf1; --label:#ffffff; --ink:#161b26; --muted:#5b6474; --line:#d5dbe2;
 --tag:#f5c518; --tag-ink:#161b26; --rail:#27303f; --link:#1f4fa3;
 --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100; --s5:#e87ba4; --s6:#008300; --s7:#4a3aa7; --s8:#e34948;
 --display:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
 --body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
 color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
 --shelf:#11151c; --label:#1b212b; --ink:#e8ebf0; --muted:#9aa3b2; --line:#2b3340;
 --tag:#e8b90f; --tag-ink:#141820; --rail:#4a5568; --link:#8fb2ff;
 --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500; --s5:#d55181; --s6:#2f9e2f; --s7:#9085e9; --s8:#e66767;
 color-scheme:dark}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--shelf);color:var(--ink);font:500 16px/1.45 var(--body);font-variant-numeric:lining-nums tabular-nums}
a{color:var(--link)}
:focus-visible{outline:3px solid var(--link);outline-offset:2px}
img{display:block;max-width:100%;height:auto}
h1,h2{font-family:var(--display);font-weight:700;line-height:1.05;margin:0;letter-spacing:-.005em;text-wrap:balance}
h1{font-size:2.3rem}
h2{font-size:1.75rem}
p{margin:0}
.wrap{max-width:560px;margin:0 auto;padding:0 16px 40px;display:grid;gap:28px}
.wrap>*{min-width:0}
.hint,.quiet{color:var(--muted);font-size:.92rem;margin-top:4px}
.chip{display:inline-block;font-size:.75rem;line-height:1.5;padding:0 7px;border-radius:99px;background:var(--shelf);color:var(--muted);white-space:nowrap}

/* top bar */
.bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;
 padding:10px 16px;padding-top:max(10px,env(safe-area-inset-top));background:color-mix(in srgb,var(--shelf) 88%,transparent);
 backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.mark{font-family:var(--display);font-weight:700;font-size:1.35rem;color:var(--ink);text-decoration:none;letter-spacing:-.01em}
.draft{font-size:.8rem;color:var(--muted)}
.brand{display:flex;flex-direction:column;line-height:1.1}
.slogan{font-size:.78rem;color:var(--muted);font-weight:500;margin-top:2px}
.back{display:inline-flex;align-items:center;gap:2px;color:var(--ink);text-decoration:none;font-weight:600;min-height:44px}
.back svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* intro: headline + the loop */
.intro{display:grid;gap:14px;padding-top:6px}
.loop{display:block;width:100%;aspect-ratio:1;border-radius:18px;background:#f3f4f2;object-fit:cover}

/* shelf labels (main ranking) */
.labels{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.lbl{display:grid;grid-template-columns:72px minmax(0,1fr) auto;grid-template-areas:"pic nm up" "pic mk up" "meter meter meter";
 column-gap:12px;row-gap:4px;align-items:center;padding:10px 12px 0;background:var(--label);border-radius:12px;color:inherit;text-decoration:none;overflow:hidden}
.lbl .pic{grid-area:pic;width:72px;height:72px;border-radius:8px;background:#fff;overflow:hidden;align-self:start}
.lbl .nm{grid-area:nm;font-weight:600;font-size:.95rem;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;align-self:end}
.lbl .mk{grid-area:mk;display:flex;flex-wrap:wrap;align-items:center;gap:6px;align-self:start}
.lbl .up{grid-area:up;text-align:right;line-height:1}
.lbl .up b{display:block;font-family:var(--display);font-weight:700;font-size:2.1rem;letter-spacing:-.01em}
.lbl .up small{font-size:.78rem;color:var(--muted)}
.lbl .meter{grid-area:meter;height:4px;margin:8px -12px 0;background:var(--line);position:relative}
.lbl .meter::after{content:"";position:absolute;inset:0 auto 0 0;width:calc(var(--w)*100%);background:var(--ink);opacity:.55}
.pk{font-weight:600;font-size:.9rem}
.plus{font-size:.8rem;color:var(--muted)}
.flag{display:none}
/* the cheapest: a bigger yellow label */
.lbl.champ{background:var(--tag);color:var(--tag-ink);grid-template-columns:112px minmax(0,1fr);grid-template-areas:"pic flag" "pic nm" "pic mk" "up up" "meter meter";padding:14px 14px 0}
.lbl.champ .pic{width:112px;height:112px}
.lbl.champ .flag{display:block;grid-area:flag;font-family:var(--display);font-weight:700;font-size:1.7rem;line-height:1;align-self:end;margin-bottom:2px}
.lbl.champ .nm{font-size:1.02rem;align-self:start}
.lbl.champ .up{text-align:left;margin-top:6px;display:flex;align-items:baseline;gap:6px}
.lbl.champ .up b{font-size:3.6rem}
.lbl.champ .up small{color:inherit;font-size:.95rem}
.lbl.champ .meter{background:color-mix(in srgb,var(--tag-ink) 18%,transparent)}
.lbl.champ .meter::after{background:var(--tag-ink);opacity:.8}
.lbl.champ .chip{background:color-mix(in srgb,var(--tag-ink) 12%,transparent);color:inherit}
.lbl.dim{opacity:.6}
@media (hover:hover){.lbl:hover .nm,.tile:hover .nm{text-decoration:underline}}

/* logos: always on white */
.logo{display:inline-flex;align-items:center;height:24px;padding:3px 7px;border-radius:6px;background:#fff;box-shadow:inset 0 0 0 1px #e3e7ec}
.logo img{height:16px;width:auto;max-width:72px}
.logo.dk{background:#161b26;box-shadow:none}
.logo.txt{font-size:.78rem;font-weight:600;color:#161b26}

/* the shelf rail: verified above, waiting below */
.rail{height:10px;border-radius:3px;background:var(--rail);margin:6px -4px 0}
.n{font-family:var(--body);font-weight:600;font-size:1rem;color:var(--muted);vertical-align:.25em}

/* waiting tiles */
.tiles{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.tile{display:grid;gap:5px;padding:6px 6px 8px;background:var(--label);border-radius:12px;color:inherit;text-decoration:none;height:100%;align-content:start}
.tile .pic{aspect-ratio:1;border-radius:8px;background:#fff;overflow:hidden}
.tile .pic img{width:100%;height:100%;object-fit:contain}
.tile .nm{font-size:.78rem;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.5em}
.tile .mk{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.tile .logo{height:20px;padding:2px 5px}.tile .logo img{height:13px}
.tile .pk{font-size:.82rem}
.chip.ak{white-space:normal;line-height:1.3;padding:1px 7px;background:color-mix(in srgb,var(--s8) 16%,transparent);color:var(--ink)}
.noimg{display:grid;place-items:center;width:100%;height:100%;color:#b8c0ca}
.noimg svg{width:55%;height:55%;fill:none;stroke:currentColor;stroke-width:1.4}

/* rules */
.rules{display:grid;gap:12px}
.rules ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.rules li{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:10px;align-items:center}
.rules li svg{grid-row:span 2;width:28px;height:28px;fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rules li span{color:var(--muted);font-size:.9rem}
.more{background:var(--label);border-radius:12px}
.more summary{cursor:pointer;padding:14px 16px;font-weight:600;list-style:none;display:flex;justify-content:space-between;align-items:center;min-height:48px}
.more summary::-webkit-details-marker{display:none}
.more summary::after{content:"+";font-size:1.4rem;line-height:1;color:var(--muted)}
.more[open] summary::after{content:"–"}
.src{padding:0 16px 16px;display:grid;gap:10px;font-size:.92rem}
.formula{font-family:var(--display);font-size:1.25rem;font-weight:700}
.foot{color:var(--muted);font-size:.8rem;padding-bottom:max(8px,env(safe-area-inset-bottom))}

/* product page */
.shot{margin:4px 0 0;background:#fff;border-radius:18px;overflow:hidden;aspect-ratio:1;max-width:420px;width:100%;justify-self:center}
.shot img{width:100%;height:100%;object-fit:contain}
.pname{font-size:2rem}
.hero-price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;background:var(--label);border-radius:14px;padding:12px 16px}
.hero-price.champ{background:var(--tag);color:var(--tag-ink)}
.hero-price .big{font-family:var(--display);font-weight:700;font-size:3.6rem;line-height:1}
.hero-price .big small{font-size:1.6rem}
.hero-price .per{font-weight:600}
.offers{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.offer{display:grid;grid-template-columns:auto minmax(0,1fr) auto 44px;align-items:center;gap:10px;background:var(--label);border-radius:12px;padding:8px 6px 8px 12px}
.offer .op{font-weight:600;line-height:1.2}
.offer .op small{display:block;font-weight:500;font-size:.78rem;color:var(--muted)}
.offer .op .chip{margin-left:6px}
.offer .ou{text-align:right;font-size:.85rem;color:var(--muted);white-space:nowrap}
.offer .ou b{font-family:var(--display);font-size:1.5rem;color:var(--ink)}
.offer.top{box-shadow:inset 0 0 0 2px var(--tag)}
.go{display:grid;place-items:center;width:44px;height:44px;color:var(--ink)}
.go svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.specs{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.specs li{background:var(--label);border-radius:12px;padding:10px;display:grid;gap:2px;justify-items:start}
.specs svg{width:24px;height:24px;fill:none;stroke:var(--muted);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:4px}
.specs b{font-family:var(--display);font-size:1.35rem;line-height:1.05;word-break:break-word}
.specs span{font-size:.75rem;color:var(--muted);line-height:1.2}
.bc svg{display:block;max-width:220px;height:auto;border-radius:4px}
.bc{margin:0}
.own{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.own img{border-radius:8px;aspect-ratio:1;object-fit:cover;width:100%}
.hist{list-style:none;margin:0;padding:0 16px 14px;display:grid;font-size:.88rem}
.hist li{display:grid;grid-template-columns:5.6rem minmax(0,1fr) auto;column-gap:10px;padding:7px 0;border-top:1px solid var(--line)}
.hist .t{color:var(--muted)}
.hist .v{text-align:right;font-weight:600}
.hist .u{grid-column:2 / -1;text-align:right;color:var(--muted);font-size:.8rem}

/* price-history chart: SVG lines, HTML labels */
.chart{margin:12px 0 10px;display:grid;gap:8px;background:var(--label);border-radius:12px;padding:12px 14px}
.plot{display:grid;grid-template-columns:2.8rem minmax(0,1fr);grid-template-rows:150px auto;column-gap:8px;row-gap:4px}
.yax{position:relative}
.yax span{position:absolute;right:0;transform:translateY(-50%);font-size:.75rem;color:var(--muted)}
.plot svg{display:block;width:100%;height:150px;overflow:visible}
.plot svg *{vector-effect:non-scaling-stroke}
.plot .grid line{stroke:var(--line);stroke-width:1}
/* T87: one market strong (ink line and daily dots), the rest thin and grey; the cheapest chip is the yellow one */
.plot .ser{fill:none;stroke:var(--muted);stroke-opacity:.35;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.plot .ser .pt{stroke-width:4}
.plot .ser.on{stroke:var(--ink);stroke-opacity:1;stroke-width:3}
.plot .ser.on .pt{stroke-width:8}
.xax{display:flex;justify-content:space-between;gap:8px;font-size:.75rem;color:var(--muted)}
/* one swipeable row of chips, cheapest first, so ten markets do not push the page down */
.pick{list-style:none;margin:0 -14px;padding:2px 28px 2px 14px;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
.pick::-webkit-scrollbar{display:none}
.pick li{flex:none}
.pick button{font:inherit;font-size:.85rem;line-height:1.2;color:var(--ink);background:none;border:1px solid var(--line);
 border-radius:999px;padding:7px 11px;min-height:36px;display:inline-flex;align-items:center;gap:6px;cursor:pointer;white-space:nowrap}
.pick button b{font-weight:600;color:var(--muted)}
.pick button.cheap{background:var(--tag);color:var(--tag-ink);border-color:var(--tag)}
.pick button.cheap b{color:var(--tag-ink)}
.pick button[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.chart .one{font-size:.85rem;color:var(--muted)}
section>h2+.chart{margin-top:12px}

/* wider screens: same column, more room */
@media (min-width:640px){
 .wrap{max-width:720px;gap:36px}
 h1{font-size:2.8rem}
 .intro{grid-template-columns:minmax(0,1fr) 300px;align-items:center;gap:24px}
 .tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
 .lbl{grid-template-columns:88px minmax(0,1fr) auto}
 .lbl .pic{width:88px;height:88px}
 .lbl.champ{grid-template-columns:150px minmax(0,1fr) auto;grid-template-areas:"pic flag up" "pic nm up" "pic mk up" "meter meter meter"}
 .lbl.champ .pic{width:150px;height:150px}
 .lbl.champ .up{margin:0;display:block;text-align:right}
 .specs{grid-template-columns:repeat(6,minmax(0,1fr))}
}
@media (min-width:960px){.tiles{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

/* top bar: the name and the "Ürünler" button (T77). The button is the hanging aisle sign of the shop: a dark
   sign that opens the aisle directory, one picture card per category with today's cheapest unit price. */
.bar.nav{display:block;padding:8px 16px;padding-top:max(8px,env(safe-area-inset-top))}
.bar.nav .in{position:relative;max-width:528px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px}
.bar:has(.aisle[open]){backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--shelf)}
.aisle summary{position:relative;z-index:2;list-style:none;cursor:pointer;display:flex;align-items:center;gap:7px;min-height:44px;
 padding:0 10px 0 12px;border-radius:8px;background:var(--rail);color:#fff;font:700 1.2rem/1 var(--display);letter-spacing:.01em;
 -webkit-user-select:none;user-select:none}
.aisle summary::-webkit-details-marker{display:none}
.aisle summary svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.aisle summary svg:last-child{width:18px;height:18px;transition:transform .15s}
.aisle[open] summary svg:last-child{transform:rotate(180deg)}
.aisle[open]::before{content:"";position:fixed;inset:0;z-index:1;background:color-mix(in srgb,#0d1118 40%,transparent)}
.aisles{position:absolute;z-index:2;top:calc(100% + 8px);left:-8px;right:-8px;max-height:calc(100dvh - 84px);overflow:auto;
 overscroll-behavior:contain;background:var(--shelf);border-radius:16px;padding:8px;box-shadow:0 18px 40px -12px rgba(8,12,20,.45);
 animation:drop .16s ease-out}
@keyframes drop{from{opacity:0;transform:translateY(-6px)}}
.aisles ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.aisle-card{display:grid;grid-template-columns:56px minmax(0,1fr);grid-template-areas:"pic an" "pic au";column-gap:12px;align-items:center;
 padding:8px 12px 8px 8px;background:var(--label);border-radius:12px;color:inherit;text-decoration:none;min-height:72px}
.aisle-card .pic{grid-area:pic;width:56px;height:56px;border-radius:8px;background:#fff;overflow:hidden;display:grid;place-items:center}
.aisle-card .pic img{width:100%;height:100%;object-fit:contain}
.aisle-card .noimg svg{width:30px;height:30px;fill:none;stroke:#5b6474;stroke-width:1.6}
.aisle-card .an{grid-area:an;align-self:end;font:700 1.3rem/1.05 var(--display)}
.aisle-card .au{grid-area:au;align-self:start;font-size:.82rem;color:var(--muted);margin-top:2px}
.aisle-card .au b{font-family:var(--display);font-size:1.05rem;color:var(--ink)}
.aisle-card[aria-current="page"]{box-shadow:inset 0 0 0 2px var(--ink)}
@media (hover:hover){.aisle-card:hover .an{text-decoration:underline}}
@media (prefers-reduced-motion:reduce){.aisles{animation:none}.aisle summary svg:last-child{transition:none}}
@media (min-width:640px){
 .bar.nav .in{max-width:688px}
 .aisles{left:auto;right:0;width:100%;padding:10px}
 .aisles ul{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
 .aisle-card{grid-template-columns:none;grid-template-areas:"pic" "an" "au";align-content:start;padding:8px 8px 12px;row-gap:6px;height:100%}
 .aisle-card .pic{width:100%;height:auto;aspect-ratio:1}
 .aisle-card .an{align-self:start;font-size:1.25rem}
}
@media (max-width:370px){.mark{font-size:1.15rem}}
h2 .n{font-size:.75rem;min-width:20px;text-align:center;padding:0 6px;border-radius:99px;background:var(--label);color:var(--ink)}

/* home */
.lead{font-size:1.15rem;color:var(--muted);margin-top:8px}
.cats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cat{display:grid;gap:6px;align-content:start;height:100%;padding:10px 10px 12px;background:var(--label);border-radius:16px;color:inherit;text-decoration:none}
.cat .pic{aspect-ratio:1;border-radius:10px;background:#fff;overflow:hidden}
.cat .pic img{width:100%;height:100%;object-fit:contain}
.cat .cn{font-family:var(--display);font-weight:700;font-size:1.45rem;line-height:1.05;margin-top:2px}
.cat .cu{line-height:1}
.cat .cu b{font-family:var(--display);font-size:2.6rem}
.cat .cu small{font-size:.85rem;color:var(--muted);margin-left:2px}
.cat .cs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:.8rem;color:var(--muted);line-height:1.25}
.cat .cs span:last-child{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cat .cgo{font-size:.8rem;font-weight:600;color:var(--link)}
.wrap>.loop{max-width:420px;justify-self:center}
.empty{background:var(--label);border-radius:12px;padding:16px;color:var(--muted);margin-top:14px}

/* product page: market-own brand */
.only{display:flex;align-items:center;gap:10px;background:var(--label);border-radius:12px;padding:10px 12px;font-weight:600}

/* loyalty-card price (Money): a tiny mark, the card-less price on the product page */
.mny{font-size:.62rem;font-weight:600;color:var(--muted);margin-left:3px;letter-spacing:.01em}
.lbl.champ .mny{color:inherit;opacity:.7}
.mnote{display:block;font-weight:500;font-size:.72rem;color:var(--muted)}
.only.soft{font-weight:500;color:var(--muted)}