/* Martian Mono — SIL Open Font License 1.1 */
@font-face {
  font-family: "Martian Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url(fonts/martian-mono-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: "Martian Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url(fonts/martian-mono-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02D9,U+02DB,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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* Fişek Gazoz — tokens */
:root {
  --ink: #1D1430;
  --krem: #FFF6E9;
  --mor-gece: #2A1E4F;
  --fusya: #C31A4F;
  --limon: #FFD23F;
  --portakal: #FF7A1A;
  --mint: #3ECFA5;
  --radius: 20px;
  --font-display: 'Martian Mono', ui-monospace, Menlo, monospace;
  --font-mono: 'Martian Mono', ui-monospace, Menlo, monospace;
}

/* base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; }

body {
  margin: 0;
  background: var(--mor-gece);
  color: var(--krem);
  overflow-x: clip;
  transition: background-color .25s ease;
  font-family: var(--font-mono);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
@media (prefers-reduced-motion: reduce) {
  body { transition: none; }
}

img { max-width: 100%; display: block; }
a { color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }

h1, h2, .aroma-ad { font-family: var(--font-display); font-weight: 800; margin: 0; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--krem);
  color: var(--ink);
  padding: 10px 16px;
  border-radius: var(--radius);
  z-index: 20;
  text-decoration: none;
  font-weight: 700;
}
.skip-link:focus {
  left: 12px;
  top: 12px;
}

/* sticky mini header — ink bg / krem text (buttons pair) */
.site-header {
  position: sticky;
  top: 12px;
  z-index: 5;
  display: flex;
  justify-content: center;
  padding: 0 16px;
}
.nav {
  width: 100%;
  max-width: 640px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--ink);
  color: var(--krem);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: 10px 18px;
}
.brand {
  font-family: var(--font-display);
  font-weight: 700;
  text-decoration: none;
  color: var(--krem);
  font-size: 1rem;
  letter-spacing: .04em;
}
.nav-links {
  display: flex;
  gap: 18px;
}
.nav-links a {
  text-decoration: none;
  color: var(--krem);
  font-weight: 600;
  font-size: .9rem;
}
.nav-links a:hover,
.nav-links a:focus-visible,
.brand:hover,
.brand:focus-visible {
  text-decoration: underline;
}

/* fizz field — pure CSS, no JS */
.fizz {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.fizz i {
  position: absolute;
  bottom: -40px;
  left: var(--x);
  width: var(--s);
  height: var(--s);
  border: 2px solid rgba(255, 255, 255, .35);
  background: rgba(255, 255, 255, .08);
  border-radius: 50%;
  animation: yuksel var(--d) linear infinite;
  animation-delay: var(--g);
}
.fizz b {
  position: absolute;
  bottom: -160px;
  left: var(--x);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: rgba(255, 255, 255, .5);
  filter: blur(6px);
  opacity: .08;
  animation: yuksel var(--d) linear infinite;
  animation-delay: var(--g);
}
@keyframes yuksel {
  to { transform: translateY(-110vh); }
}
@media (prefers-reduced-motion: reduce) {
  .fizz i, .fizz b {
    animation: none;
    bottom: auto;
    top: var(--y, 40%);
  }
  .fizz i { opacity: .35; }
  .fizz b { opacity: .08; }
}

/* marquee */
.marquee { width: 100vw; overflow: hidden; white-space: nowrap; }
.marquee-ic { display: inline-block; animation: kayar 14s linear infinite; }
@media (prefers-reduced-motion: reduce) { .marquee-ic { animation: none; } }
@keyframes kayar { to { transform: translateX(-50%); } }
.marquee-ic span {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 5vw, 2.5rem);
  text-transform: uppercase;
  letter-spacing: .03em;
  padding-right: .6em;
  opacity: .55;
}

/* hero */
#hero {
  background: var(--mor-gece);
  color: var(--krem);
  min-height: 100svh;
  text-align: center;
  padding: 96px 20px 64px;
  overflow: hidden;
}
.hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  max-width: 720px;
  margin: 0 auto;
}
#hero h1 {
  font-size: clamp(2.5rem, 10vw, 5.5rem);
  letter-spacing: .01em;
}
.tagline {
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  margin: 0;
  max-width: 32ch;
}
.sise-fan {
  position: relative;
  height: clamp(180px, 26vw, 300px);
  width: 100%;
  max-width: 420px;
  margin: 8px auto;
}
.sise-fan img {
  position: absolute;
  bottom: 0;
  left: 50%;
  height: 100%;
  width: auto;
  max-width: min(180px, 38vw);
  transform-origin: bottom center;
}
.sise-fan img:nth-child(1) { transform: translateX(-185%) rotate(-8deg); z-index: 1; }
.sise-fan img:nth-child(2) { transform: translateX(-95%) rotate(-3deg); z-index: 2; }
.sise-fan img:nth-child(3) { transform: translateX(-5%) rotate(3deg); z-index: 3; }
.sise-fan img:nth-child(4) { transform: translateX(85%) rotate(8deg); z-index: 4; }
.cue {
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: .9rem;
  letter-spacing: .05em;
  margin: 0;
}

/* aroma sections — edge-bleed two-zone layout */
.aroma {
  background: var(--bg);
  color: var(--fg);
  min-height: 100svh;
  position: relative;
  overflow: clip;
  display: flex;
  align-items: center;
  padding: 96px 20px;
}
#visne     { --bg: var(--fusya);    --fg: var(--krem); }
#limon     { --bg: var(--limon);    --fg: var(--ink); }
#portakal  { --bg: var(--portakal); --fg: var(--ink); }
#nane      { --bg: var(--mint);     --fg: var(--ink); }

.aroma-inner {
  position: relative;
  z-index: 1;
  width: 100%;
}
.metin {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 16px;
  max-width: 480px;
}

/* .sise-kanat is the edge-positioning WRAPPER (translate lives here only) —
   img.sise keeps its own .reveal entrance + bob animation untouched. */
.sise-kanat {
  position: absolute;
  top: 50%;
  height: 60svh;
  z-index: 0;
}
.sise-kanat--right { right: 0; transform: translate(40%, -50%); }
.sise-kanat--left  { left: 0;  transform: translate(-40%, -50%); }
@media (min-width: 760px) {
  .sise-kanat { height: 110svh; }
  .sise-kanat--right { transform: translate(48%, -50%); }
  .sise-kanat--left  { transform: translate(-48%, -50%); }
}

.sise {
  height: 100%;
  width: auto;
}
@media (prefers-reduced-motion: no-preference) {
  html.js .sise.reveal {
    opacity: 0;
    transform: translateY(-40px);
  }
  html.js .sise.reveal.in {
    opacity: 1;
    transform: none;
    animation: dus .6s cubic-bezier(.34, 1.56, .64, 1), sallan 4s .6s ease-in-out infinite alternate;
  }
}
@keyframes dus {
  from { transform: translateY(-40px); }
  to { transform: translateY(0); }
}
@keyframes sallan {
  from { transform: translateY(0) rotate(-1.5deg); }
  to { transform: translateY(-10px) rotate(1.5deg); }
}

.aroma-ad {
  font-size: clamp(2.25rem, 11vw, 4.25rem);
  text-transform: uppercase;
  line-height: 1;
  width: max-content;
  white-space: nowrap;
}
@media (min-width: 760px) {
  .aroma-ad { font-size: clamp(2.5rem, 4.6vw, 3.4rem); }
}
.aroma-ad span:nth-child(odd) {
  display: inline-block;
  transform: translateY(0);
}
.aroma-ad span:nth-child(even) {
  display: inline-block;
  transform: translateY(-0.06em);
}

.tek-satir {
  font-size: clamp(1.05rem, 2.5vw, 1.3rem);
  margin: 0;
  max-width: 38ch;
}

.rozetler {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-start;
  margin: 4px 0;
}
.rozet {
  background: #fff;
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 999px;
  transform: rotate(var(--tilt, -4deg));
  padding: 6px 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .01em;
}

/* nutrition sticker — same white/ink/border/radius sticker language as .rozet;
   rotate lives on the CARD wrapper only, never on individual letters */
.besin {
  background: #fff;
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  transform: rotate(var(--tilt, -2deg));
  padding: 10px 14px 12px;
  width: min(260px, 100%);
  margin: 4px 0;
}
.besin table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
}
.besin caption {
  caption-side: top;
  text-align: left;
  font-weight: 700;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  margin-bottom: 8px;
}
.besin caption .alt {
  font-weight: 300;
  text-transform: none;
  letter-spacing: 0;
  font-size: .7rem;
}
.besin th,
.besin td {
  font-weight: 300;
  font-size: .78rem;
  text-align: left;
  padding: 3px 0;
  white-space: nowrap;
}
.besin td { text-align: right; }
.besin tbody tr + tr th,
.besin tbody tr + tr td {
  border-top: 1px solid rgba(29, 20, 48, .15);
}

@media (min-width: 760px) {
  #visne .metin, #portakal .metin { margin-right: auto; }
  #limon .metin, #nane .metin { margin-left: auto; }
}

.kunye {
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: .85rem;
  letter-spacing: .02em;
  margin: 4px 0 0;
}

/* karışımlar — mixology cards, mor-gece bg via same section-scoped --bg/--fg pattern.
   Dedicated class (not .aroma) so it skips the edge-bleed bottle layout entirely. */
.karisim {
  background: var(--bg);
  color: var(--fg);
  min-height: 100svh;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 96px 20px;
}
#karisimlar { --bg: var(--mor-gece); --fg: var(--krem); }

.karisim-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  max-width: 900px;
  margin: 0 auto;
}

/* heading reuses the dot-safe letter-wobble technique (translateY-only, no rotate)
   but with its own sizing/wrap rules — .aroma-ad's nowrap is single-word-only and
   would overflow this two-word heading at narrow viewports. Each word's letters
   sit in a .kelime wrapper (display:inline-block + white-space:nowrap) so the only
   break opportunity is the real space between words — adjacent per-letter spans
   with no wrapper are themselves a break opportunity (same issue .aroma-ad hit). */
.karisim-ad {
  font-size: clamp(2rem, 7vw, 3.5rem);
  text-transform: uppercase;
  line-height: 1.15;
}
.karisim-ad .kelime {
  display: inline-block;
  white-space: nowrap;
}
.karisim-ad .kelime span:nth-child(odd) {
  display: inline-block;
  transform: translateY(0);
}
.karisim-ad .kelime span:nth-child(even) {
  display: inline-block;
  transform: translateY(-0.06em);
}

.karisim-kartlar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  width: 100%;
}
@media (min-width: 760px) {
  .karisim-kartlar { grid-template-columns: repeat(3, 1fr); }
}

/* card — same white/ink/border/radius sticker language as .besin/.rozet */
.karisim-kart {
  background: #fff;
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  transform: rotate(var(--tilt, -2deg));
  padding: 20px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.karisim-kart h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: .01em;
  margin: 0;
}
.karisim-kart .oran,
.karisim-kart .servis {
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: .85rem;
  margin: 0;
}
.karisim-kart .punch {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .95rem;
  margin: 8px 0 0;
}
@media (prefers-reduced-motion: no-preference) {
  html.js .karisim-kart.reveal {
    opacity: 0;
    transform: translateY(20px) rotate(var(--tilt, -2deg));
    transition: opacity .5s ease, transform .5s ease;
  }
  html.js .karisim-kart.reveal.in {
    opacity: 1;
    transform: rotate(var(--tilt, -2deg));
  }
}

/* tail */
.tail {
  background: var(--mor-gece);
  color: var(--krem);
  min-height: 100svh;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 96px 20px;
}
.tail-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 560px;
  margin: 0 auto;
}
.tail-inner h2 {
  font-size: clamp(2rem, 7vw, 3.5rem);
  text-transform: uppercase;
}
.tail-inner p {
  margin: 0;
  max-width: 40ch;
}
.iletisim {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 8px;
}
.iletisim a {
  text-decoration: none;
  font-weight: 600;
}
.iletisim a:hover,
.iletisim a:focus-visible {
  text-decoration: underline;
}
.sosyal {
  display: flex;
  gap: 12px;
}
.sosyal a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 2px solid var(--krem);
  border-radius: 50%;
}
.sosyal svg { width: 18px; height: 18px; }

.copy {
  font-size: .8rem;
  margin-top: 12px;
}