/* Faces this component uses are declared here on purpose: the build
   prefixes each @font-face family and rewrites the usages to match, and a
   component that uses a family it does not declare gets no rewrite — the
   name resolves to nothing and the text falls back silently.
   latin-ext is what carries İ Ğ ğ Ş ş; latin carries ı. Both are required. */

/* Anton 400 — latin-ext */
@font-face {
  font-family: 'cc_pfQKlERh3P_VF372TVXNJ_Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/anton/v27/1Ptgg87LROyAm3K9-C8CSKlvPfE.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Anton 400 — latin */
@font-face {
  font-family: 'cc_pfQKlERh3P_VF372TVXNJ_Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/anton/v27/1Ptgg87LROyAm3Kz-C8CSKlv.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;
}

/* Geist Mono 400 — latin-ext */
@font-face {
  font-family: 'cc_pfQKlERh3P_VF372TVXNJ_Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/geistmono/v6/or3yQ6H-1_WfwkMZI_qYPLs1a-t7PU0AbeE9KK5a5Cl4PuCTfNjENg.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Geist Mono 400 — latin */
@font-face {
  font-family: 'cc_pfQKlERh3P_VF372TVXNJ_Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/geistmono/v6/or3yQ6H-1_WfwkMZI_qYPLs1a-t7PU0AbeE9KK5U5Cl4PuCTfNg.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;
}

/* Geist 400 — latin-ext */
@font-face {
  font-family: 'cc_pfQKlERh3P_VF372TVXNJ_Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/geist/v5/gyBhhwUxId8gMGYQMKR3pzfaWI_RnOMIlJna6VEdtaiLqoA.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Geist 400 — latin */
@font-face {
  font-family: 'cc_pfQKlERh3P_VF372TVXNJ_Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/geist/v5/gyBhhwUxId8gMGYQMKR3pzfaWI_RnOMImpna6VEdtaiL.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;
}

.cc_pfQKlERh3P_VF372TVXNJ .drop-countdown, .cc_pfQKlERh3P_VF372TVXNJ .drop-countdown * {
  box-sizing: border-box;
}

.cc_pfQKlERh3P_VF372TVXNJ .drop-countdown {
  width: 100%;
  padding: clamp(44px, 6vw, 72px) 20px;
  background: #2b45ff;
  color: #ffffff;
}

/* One column, then two from 768.
   auto-fit with minmax(300px, 1fr) split the row at about 636px of content —
   emergent rather than chosen, and it put the two-column layout into widths the
   type below is not scaled for. 768 is where this project's desktop starts, so
   the split and the type step happen together. The left track is the wider one:
   it carries prose, the right carries four numeric cells. */
.cc_pfQKlERh3P_VF372TVXNJ .drop-countdown__inner {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: center;
}

/* A grid item is min-width: auto, which means it refuses to shrink below its
   own content — one long word or one wide row and the track grows past the
   screen instead of wrapping, and the whole page scrolls sideways. Every column
   here has to be able to be narrower than what is in it. */
.cc_pfQKlERh3P_VF372TVXNJ .drop-countdown__col {
  min-width: 0;
}

@media (min-width: 768px) {
  .cc_pfQKlERh3P_VF372TVXNJ .drop-countdown__inner {
    grid-template-columns: 1.45fr 1fr;
    gap: 48px;
  }
}

.cc_pfQKlERh3P_VF372TVXNJ .drop-countdown__eyebrow {
  margin-bottom: 12px;
  font-family: 'cc_pfQKlERh3P_VF372TVXNJ_Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0.75;
}

.cc_pfQKlERh3P_VF372TVXNJ .drop-countdown__title {
  margin: 0 0 14px;
  font-family: 'cc_pfQKlERh3P_VF372TVXNJ_Anton', Impact, 'Arial Narrow', sans-serif;
  font-weight: 400;
  /* 8.4vw with a 28px floor: at 390px this is 33px, and the floor only takes
     over below ~333px. 36px flat was wider than "SİPARİŞTE" could be set at on
     a small phone, so the word ran past the padding.
     break-word is the backstop — Anton has no hyphenation and a Turkish
     compound that will not fit has to break somewhere inside the box. */
  font-size: clamp(28px, 8.4vw, 68px);
  overflow-wrap: break-word;
  /* 1.16, not 1.04: this line is "Her siparişte aynı standart" and uppercase
     Turkish carries about 1.14em of ink — İ rises 0.94em, Ş drops to -0.16em.
     1.04 clipped them. */
  line-height: 1.16;
  text-transform: uppercase;
}

.cc_pfQKlERh3P_VF372TVXNJ .drop-countdown__body {
  margin: 0;
  max-width: 44ch;
  font-family: 'cc_pfQKlERh3P_VF372TVXNJ_Geist', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
  text-wrap: pretty;
}

/* The left column's type steps up with the two-column layout. It is the lighter
   of the two columns by content — a label, a heading and one sentence against
   four cells and a card — so at one scale it ran short and the row's centring
   left the numbers floating beside white space. Sizing the prose is what
   balances the row; the numbers are already as large as they should be. */
@media (min-width: 768px) {
  .cc_pfQKlERh3P_VF372TVXNJ .drop-countdown__eyebrow {
    margin-bottom: 18px;
    font-size: 14px;
  }

  .cc_pfQKlERh3P_VF372TVXNJ .drop-countdown__title {
    margin: 0 0 22px;
    font-size: clamp(56px, 5.6vw, 88px);
  }

  /* No measure cap on desktop: the track is the measure. 38ch inside a track
     wider than that made the column narrow and tall at the same time — the
     heading wrapped to the track while the sentence wrapped to the cap, so the
     two disagreed about how wide the column was. */
  .cc_pfQKlERh3P_VF372TVXNJ .drop-countdown__body {
    max-width: none;
    font-size: 19px;
    line-height: 1.55;
  }
}

/* Two by two on a phone, four across from 768. Four cells over 350px of usable
   width is 78px each before padding, which is narrower than "7/24" wants to be
   set and narrower still than KARGO with 0.2em of tracking — so the row was
   either clipping or pushing the section wider than the screen. */
.cc_pfQKlERh3P_VF372TVXNJ .drop-countdown__clock {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 20px;
}

@media (min-width: 768px) {
  .cc_pfQKlERh3P_VF372TVXNJ .drop-countdown__clock {
    grid-template-columns: repeat(4, 1fr);
  }
}

.cc_pfQKlERh3P_VF372TVXNJ .drop-countdown__cell {
  min-width: 0;
  padding: 16px 8px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.24);
  text-align: center;
}

.cc_pfQKlERh3P_VF372TVXNJ .drop-countdown__value {
  font-family: 'cc_pfQKlERh3P_VF372TVXNJ_Anton', Impact, 'Arial Narrow', sans-serif;
  font-weight: 400;
  font-size: clamp(28px, 6vw, 44px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.cc_pfQKlERh3P_VF372TVXNJ .drop-countdown__label {
  margin-top: 8px;
  overflow-wrap: break-word;
  font-family: 'cc_pfQKlERh3P_VF372TVXNJ_Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* ─── The messages, between the copy and the numbers ──────────
 * One card at a time with a chevron either side, all on one line. The chevrons
 * flank the card rather than sitting above it because at this width there is
 * only ever one card visible — a control bar over a single item reads as
 * belonging to the section, not to the card it moves.
 */
/* It sits above the numbers now, so the space it owns is below it. The 16px
   that used to separate it from the body copy would have stacked on the gap the
   grid already provides above. */
.cc_pfQKlERh3P_VF372TVXNJ .drop-countdown__says {
  position: relative;
  margin-bottom: 20px;
}

/* A real scroller with snap points, not a transformed strip: the chevrons call
   scrollBy on the same element a phone flicks, so there is no position of ours
   to keep in step with the DOM and the count can change freely. */
.cc_pfQKlERh3P_VF372TVXNJ .drop-countdown__track {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Room for the card's shadow on every side. overflow-x: auto clips anything
     outside this box, so a shadow with nowhere to land is cut off in a straight
     line rather than fading — the card's radius survives but its shadow's does
     not. 14px clears the 10px offset plus most of the blur. */
  padding: 14px 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.cc_pfQKlERh3P_VF372TVXNJ .drop-countdown__track::-webkit-scrollbar {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .cc_pfQKlERh3P_VF372TVXNJ .drop-countdown__track { scroll-behavior: auto; }
}

/* flex:none, or the slides shrink to share the row instead of overflowing it
   and nothing scrolls at all. */
.cc_pfQKlERh3P_VF372TVXNJ .drop-countdown__slide {
  flex: none;
  width: 100%;
  scroll-snap-align: start;
}

/* Over the card, not beside it. Sitting in the row they cost 40px of column on
   each side — on a two-column band that is width the message itself needs, and
   it left the card visibly inset from the copy above it. Floated on top they
   cost nothing, and the card runs the full width of the column. */
.cc_pfQKlERh3P_VF372TVXNJ .drop-countdown__chev {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  /* No ring: on a phone the chevrons float over the card itself, and a circle
     drawn on top of the message read as a second object sitting on it. The
     glyph alone is enough of a control. */
  border: 0;
  background: transparent;
  color: #ffffff;
  cursor: pointer;
  transition: opacity 150ms ease;
}

.cc_pfQKlERh3P_VF372TVXNJ .drop-countdown__chev--prev { left: 0; }
.cc_pfQKlERh3P_VF372TVXNJ .drop-countdown__chev--next { right: 0; }

/* Hover brightens the glyph rather than filling a plate behind it — there is no
   plate any more, and a square of white on the card is not one. */
.cc_pfQKlERh3P_VF372TVXNJ .drop-countdown__chev:hover:not(:disabled) {
  opacity: 0.7;
}

/* Disabled rather than hidden: a control that disappears at the ends makes the
   row jump sideways, and the pair is the only thing saying this row moves. */
.cc_pfQKlERh3P_VF372TVXNJ .drop-countdown__chev:disabled {
  opacity: 0.35;
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  .cc_pfQKlERh3P_VF372TVXNJ .drop-countdown__chev { transition: none; }
}