/* fonts are self-hosted (OFL), so no visitor request reaches Google before consent */
@font-face { font-family: "Jersey 15"; font-style: normal; font-weight: 400; font-display: swap; src: url("fontlar/jersey-15-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Jersey 15"; font-style: normal; font-weight: 400; font-display: swap; src: url("fontlar/jersey-15-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fontlar/space-grotesk-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fontlar/space-grotesk-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Design approach from portfolio/DESIGN.md, "The Manual":
   square-cut surfaces, hairline rules, flat at rest, pressable shadows on CTAs,
   springy curve for play, Jersey 15 (pixel, owner pick) for the title, headings and button labels; Space Grotesk for everything else,
   including numbers and small labels.
   Palette and layout are bakkaldle's own. Red is the functional voice, gold is the one CTA.
   Dark only. All copy is lowercase. No emoji anywhere: icons are inline svg. */
:root {
  --zemin: #1d1915;
  --kart: #2a241e;
  --murekkep: #f3ebdd;
  --soluk: #b3a490;
  --kirmizi: #d7262e;
  --yesil: #2e8b47;
  --sari: #f2b632;
  --uzak: #d7262e;
  --cizgi: #3d352c;
  --yesil-acik: #5cc27a; /* green text on the dark field (AA); --yesil is for fills */
  --yay: cubic-bezier(0.34, 1.56, 0.64, 1); /* the Manual's springy curve */
  --ekran: "Jersey 15", "Space Grotesk", sans-serif; /* pixel face with real lowercase and Turkish glyphs (owner pick) */
  color-scheme: dark; /* dark only, by design */
}

* { box-sizing: border-box; }
/* one screen, no scrolling: everything vertical scales with dvh, and the product photo gives up height last */
body {
  margin: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--zemin);
  color: var(--murekkep);
  font: 1rem/1.625 "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
}
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--kirmizi); outline-offset: 2px; }

/* Pressable: a hard offset shadow at rest, the element sinks into it on press. */
.basilir {
  --derinlik: 4px;
  border: 2px solid var(--murekkep);
  border-radius: 0;
  box-shadow: var(--derinlik) var(--derinlik) 0 0 var(--murekkep);
  transition: transform 0.35s var(--yay), box-shadow 0.35s var(--yay);
}
@media (hover: hover) {
  .basilir:hover { transform: translate(-2px, -2px); box-shadow: calc(var(--derinlik) + 2px) calc(var(--derinlik) + 2px) 0 0 var(--murekkep); }
}
.basilir:active {
  transform: translate(var(--derinlik), var(--derinlik));
  box-shadow: 0 0 0 0 var(--murekkep);
  transition-duration: 0.06s;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 460px;
  width: 100%;
  margin: 0 auto;
  /* one rhythm: the same air (--hava) above the buttons, between their shadow and the stripe, and below the stripe */
  --hava: clamp(8px, 1.9dvh, 16px);
  --serit: 8px;
  padding: var(--hava) 16px calc(var(--hava) + 3px + var(--serit)); /* 3px = the buttons' offset shadow */
  position: relative;
  flex: none;
}
/* bakkal awning, square-cut: 21 equal segments whatever the width, red at both ends */
header::after {
  content: "";
  position: absolute;
  inset: auto 16px 0;
  height: var(--serit);
  background: linear-gradient(90deg, var(--kirmizi) 50%, #fff 50%) 0 0 / calc(100% / 10.5) 100%;
}
h1, h2 {
  font-family: var(--ekran);
  font-weight: 400; /* Jersey 15 has one weight; synthetic bold would blur the pixels */
  letter-spacing: 0.03em; /* pixel faces need air */
  line-height: 0.95;
}
h1 { margin: 0; font-size: clamp(2.5rem, 11vw, 3.25rem); color: var(--kirmizi); }
h1 span, h2 span { color: var(--murekkep); }
.ikon {
  width: 44px;
  height: 44px;
  --derinlik: 3px;
  background: var(--kart);
  color: var(--murekkep);
  font-family: var(--ekran);
  font-size: 1.7rem;
  font-weight: 400;
}

main {
  max-width: 460px;
  width: 100%;
  margin: 0 auto;
  padding: clamp(8px, 1.9dvh, 16px) 16px clamp(8px, 2.2dvh, 24px); /* top matches the header's --hava */
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1.5dvh, 14px);
}
main > * { flex-shrink: 0; }

/* Product: a manual figure. Flat, hairline, square. */
#urun {
  margin: 0;
  padding: clamp(8px, 1.5dvh, 12px) 18px clamp(10px, 2dvh, 16px);
  flex-shrink: 1; /* the only part that gives up height, through its photo */
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-top: 2px solid var(--kirmizi);
  text-align: center;
}
#etiket {
  margin: 0;
  font-size: 0.75rem; /* pixel type is unreadable this small (Pixel Restraint Rule) */
  font-weight: 700;
  letter-spacing: 0.28em;
  color: var(--soluk);
}
/* Photo plate: packshots are shot on light backgrounds, so they sit on the cream ink tone, square-cut. */
#urun-resim {
  margin: clamp(6px, 1.4dvh, 12px) 0 0;
  flex: 0 1 150px;
  min-height: 48px;
  display: flex;
  justify-content: center;
}
#urun-resim[hidden] { display: none; }
#urun-img {
  height: 100%;
  width: auto;
  max-width: 100%;
  aspect-ratio: 1;
  padding: clamp(4px, 1.2dvh, 10px);
  background: var(--murekkep);
  object-fit: contain;
  display: block;
}
#urun-ad { font-weight: 700; font-size: 1.6rem; line-height: 1.25; margin: 22px 0 14px; }
#urun-resim:not([hidden]) + #urun-ad { font-size: clamp(1rem, 2.6dvh, 1.2rem); line-height: 1.2; margin: clamp(4px, 1dvh, 10px) 0 0; }
#ipucu { margin: 4px 0 0; font-size: 0.85rem; line-height: 1.4; color: var(--soluk); }
#ipucu strong { color: var(--murekkep); }

/* chain logos inline in text: a small cream tile, square-cut, sized to the line */
.zincir-logo {
  height: 1.25em;
  width: auto;
  max-width: 6em;
  padding: 2px 4px;
  vertical-align: -0.35em;
  background: var(--murekkep);
  object-fit: contain;
}
/* owner: BİM, A101 and Şok logos sit straight on the dark field; Migros shows only its M in text.
   The rest keep the cream tile in running text because their colours vanish on dark. */
.zincir-logo:is([data-zincir="bim"], [data-zincir="a101"], [data-zincir="sok"], [data-zincir="migros"]) {
  background: none;
}

#durum { margin: 0; text-align: center; font-weight: 700; min-height: 1.6em; }


/* Guesses: a numbered catalog with hairline rules. */
#tahminler {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(3px, 0.7dvh, 6px);
  counter-reset: sira;
}
#tahminler li {
  counter-increment: sira;
  display: grid;
  grid-template-columns: 2.25rem 1fr 64px;
  gap: 6px;
  height: clamp(26px, 5dvh, 40px);
}
#tahminler li::before {
  content: counter(sira);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--soluk);
}
#tahminler li:not(.dolu)::after {
  content: "";
  grid-column: 2 / -1;
  border: 1px dashed var(--cizgi);
}
.tutar, .ok {
  display: grid;
  place-items: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.tutar { background: var(--kart); border: 1px solid var(--cizgi); }
.ok { color: #fff; }
.ok svg { width: 20px; height: 20px; }
.ikon svg { width: 20px; height: 20px; }
.ok.uzak { background: var(--uzak); }
.ok.yakin { background: var(--sari); color: #2a2118; }
.ok.tamam { background: var(--yesil); }

#tahmin-form { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; }
#tahmin-form[hidden] { display: none; }
.para {
  display: grid;
  place-items: center;
  width: 44px;
  background: var(--murekkep);
  color: var(--zemin);
  font-weight: 700;
}
#tahmin {
  min-width: 0;
  padding: clamp(6px, 1.2dvh, 10px) 12px;
  border: 1px solid var(--cizgi);
  border-radius: 0;
  background: var(--kart);
  color: var(--murekkep);
  font: inherit;
  font-size: 1.05rem; /* >=16px so iOS does not zoom */
}
#tahmin:focus-visible { outline-offset: 2px; }
#tahmin-form button, dialog form button {
  padding: 6px 16px;
  background: var(--kirmizi);
  color: #fff;
  font-family: var(--ekran);
  font-size: 1.45rem;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.04em;
}
/* The one gold moment: sharing, the game's conversion point. */
.paylas {
  --derinlik: 6px;
  padding: clamp(6px, 1.6dvh, 14px);
  margin-right: 6px; /* room for the shadow */
  background: var(--sari);
  color: #2a2118;
  font-family: var(--ekran);
  font-size: 1.75rem;
  font-weight: 400;
  letter-spacing: 0.04em;
}

#bildirim {
  position: fixed;
  inset: 10px auto auto 50%; /* top edge: clears the share button and an open dialog's title */
  margin: 0;
  border: 0;
  translate: -50% 0;
  padding: 10px 16px;
  background: var(--murekkep);
  color: var(--zemin);
  font-weight: 700;
  z-index: 10;
  animation: cik 0.35s var(--yay);
}

/* dialogs scale with the viewport too, so even the 7-chain result fits without scrolling */
dialog {
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100dvh - 24px);
  font-size: clamp(0.78rem, 2.2dvh, 1rem);
  line-height: 1.45;
  border: 1px solid var(--cizgi);
  border-top: 2px solid var(--kirmizi);
  border-radius: 0;
  padding: clamp(12px, 3dvh, 22px);
  background: var(--kart);
  color: var(--murekkep);
}
dialog[open] { animation: cik 0.35s var(--yay); }
/* pixel-game pause screen: the game behind blurs and dims */
dialog::backdrop { background: rgb(12 10 8 / 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* price dialog: a pixel-game result box that pops in on stepped frames */
#sonuc {
  border: 4px solid var(--murekkep);
  box-shadow: 8px 8px 0 0 var(--kirmizi);
  width: min(400px, calc(100vw - 40px));
}
#sonuc[open] { animation: piksel-ac 0.32s steps(5, end) both; }
@keyframes piksel-ac { from { transform: scale(0.6); opacity: 0; } }
/* breakdown: label left, value right, hairline-ruled */
#sonuc-ozet { margin: 4px 0 0; border-top: 1px solid var(--cizgi); }
#sonuc-ozet div { display: flex; justify-content: space-between; gap: 12px; padding: clamp(3px, 0.9dvh, 8px) 2px; border-bottom: 1px solid var(--cizgi); }
#sonuc-ozet dt { color: var(--soluk); }
#sonuc-ozet dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
/* the table: full logos, every row on white (owner), cheapest rows framed in green */
#sonuc .zincir-logo { background: none; padding: 0; }
#zincirler { width: 100%; margin-top: 10px; border-collapse: separate; border-spacing: 0 clamp(4px, 0.9dvh, 12px); font-variant-numeric: tabular-nums; }
/* white and the green frame sit on the whole row, so there's no seam between cells */
#zincirler tr { background: #fff; }
#zincirler th, #zincirler td { padding: clamp(3px, 0.9dvh, 13px) 15px; color: #2a2118; }
#zincirler th { text-align: left; font-weight: 400; box-shadow: 1px 0 0 #fff; } /* covers the sub-pixel seam between cells when scaled */
#zincirler td { text-align: right; font-weight: 700; }
#zincirler .zincir-logo { height: clamp(1.4em, 3.4dvh, 1.7em); max-width: 8em; vertical-align: middle; }
/* pixel-game selection: a chunky black frame outside the row (owner pick) */
#zincirler tr.ucuz { outline: 5px solid #000; outline-offset: 0; }
#zincirler tr.ucuz td { font-size: 1.1em; }
#fiyatlar-ac { padding: clamp(4px, 1.3dvh, 12px); background: var(--kart); color: var(--murekkep); font-family: var(--ekran); font-size: 1.6rem; margin-right: 6px; }
#sonuc-baslik { font-size: clamp(1.8rem, 5.5dvh, 2.6rem); }
/* verdict colour: green when right, red when wrong; icon and title share it */
#sonuc[data-hukum="dogru"] :is(#hukum, #sonuc-baslik) { color: var(--yesil-acik); }
#sonuc[data-hukum="yanlis"] :is(#hukum, #sonuc-baslik) { color: var(--kirmizi); }
#hukum { width: clamp(32px, 7dvh, 64px); height: clamp(32px, 7dvh, 64px); margin: 0 auto clamp(2px, 1dvh, 8px); }
#hukum svg { display: block; width: 100%; height: 100%; }
#sonuc[open] #hukum { animation: piksel-ac 0.4s steps(4, end) 0.15s both; }
/* browsers without the popover API would show the empty toast box and canvas; hide them there */
@supports not selector(:popover-open) { [popover] { display: none; } }
/* confetti layer: full screen, above everything, never catches clicks */
#konfeti { position: fixed; inset: 0; width: 100vw; height: 100vh; margin: 0; padding: 0; border: 0; background: none; pointer-events: none; image-rendering: pixelated; }
#sonuc .paylas { font-size: 1.75em; line-height: 1.1; display: block; width: calc(100% - 6px); margin-top: 10px; }
dialog h2 { margin: 0 0 clamp(6px, 1.6dvh, 14px); color: var(--kirmizi); font-size: clamp(1.6rem, 4.6dvh, 2.1rem); text-align: center; }
dialog h3 { font-size: 1em; margin: clamp(8px, 2dvh, 18px) 0 clamp(4px, 1dvh, 8px); padding-top: clamp(6px, 1.4dvh, 12px); border-top: 1px solid var(--cizgi); }
dialog p { margin: clamp(4px, 1.2dvh, 14px) 0; }
dialog ul { padding-left: 20px; margin: clamp(4px, 1.2dvh, 14px) 0; }
dialog li { margin-bottom: clamp(2px, 0.6dvh, 6px); }
dialog form { text-align: center; margin-top: clamp(8px, 2dvh, 18px); }
/* help examples (idea from costcodle's "examples"): a real guess row, then what it means */
.ornekler { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(6px, 1.4dvh, 12px); }
.ornekler li { margin: 0; display: grid; grid-template-columns: 9.5em 1fr; gap: 10px; align-items: center; }
.ornek { display: grid; grid-template-columns: 1fr 2.6em; gap: 5px; height: 2.2em; }
.ornek .ok svg { width: 1.1em; height: 1.1em; }
.ornekler p { margin: 0; line-height: 1.3; }
/* tiles drop in one after another when the dialog opens, like the game's own guesses */
#nasil[open] .ornek .ok { animation: dus 0.45s var(--yay) both; }
#nasil[open] .ornekler li:nth-child(1) .ok { animation-delay: 0.25s; }
#nasil[open] .ornekler li:nth-child(2) .ok { animation-delay: 0.45s; }
#nasil[open] .ornekler li:nth-child(3) .ok { animation-delay: 0.65s; }

#sayilar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0; text-align: center; }
#sayilar dd { margin: 0; font-size: 2rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; order: -1; }
#sayilar div { display: flex; flex-direction: column; }
#sayilar dt { font-size: 0.8rem; color: var(--soluk); }
#dagilim { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
#dagilim li { display: flex; gap: 8px; align-items: center; }
#dagilim li span:first-child { width: 1ch; font-weight: 700; }
.cubuk {
  padding: 0 8px;
  background: var(--soluk);
  color: var(--kart); /* white on dark-mode soluk fails AA */
  font-weight: 700;
  text-align: right;
}
.cubuk.bugun { background: var(--yesil); color: #fff; }

/* motion: springy for play, never on long text */
.yeni .tutar, .yeni .ok { animation: dus 0.45s var(--yay) both; }
.yeni .ok { animation-delay: 0.08s; }
.salla { animation: salla 0.4s ease-in-out; }
@keyframes dus { from { transform: translateY(-8px) scale(0.92); opacity: 0; } }
@keyframes cik { from { transform: translateY(6px) scale(0.97); opacity: 0; } }
@keyframes salla {
  25% { transform: translateX(-6px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-3px); }
}
/* desktop: costcodle's layout (docs/evidence/costcodle-load.png): a narrow centered column,
   a compact product card, and a thin footer bar crediting the data source */
#altbilgi { display: none; }
@media (min-width: 768px) and (min-height: 561px) {
  header { max-width: 344px; }
  h1 { font-size: 2.75rem; }
  main { max-width: 350px; padding-block: clamp(8px, 1.9dvh, 16px) 8px; gap: clamp(6px, 1.2dvh, 14px); }
  #tahmin { padding-block: 6px; }
  #tahminler { gap: 5px; }
  #tahminler li { height: 33px; }
  #altbilgi { display: flex; align-items: center; gap: 6px; flex: none; padding: 2px 12px; border-top: 2px solid var(--cizgi); font-size: 0.85rem; color: var(--soluk); }
  #altbilgi img { width: 16px; height: 16px; }
}

/* landscape phones: too short for one column, so the product sits left and the game right */
@media (orientation: landscape) and (max-height: 560px) {
  header, main { max-width: 760px; }
  main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: repeat(4, auto) 1fr;
    align-content: start;
    column-gap: 16px;
  }
  #urun { grid-area: 1 / 1 / -1 / 2; align-self: start; max-height: 100%; }
  main > :not(#urun) { grid-column: 2; }
  #urun-resim { flex: none; height: clamp(48px, 34dvh, 150px); }
  #tahminler li { height: clamp(22px, 6.4dvh, 40px); }
  #nasil { width: min(640px, calc(100vw - 32px)); } /* wider means fewer wrapped lines */
  /* result: verdict and share left, the chain table right */
  #sonuc { width: min(720px, calc(100vw - 40px)); }
  #sonuc[open] { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, auto) 1fr; column-gap: 24px; }
  #sonuc > :not(#zincirler) { grid-column: 1; }
  #zincirler { grid-area: 1 / 2 / -1 / 3; align-self: center; margin: 0; }
  #sonuc .paylas { align-self: end; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}