/* CampaignCountdown — geri sayımlı kampanya bölümü.
 *
 * KEREM dili: keskin köşe, tek vurgu, ince çizgi, mono etiket, Bricolage rakam.
 * Bölümün "olayı" dönen rakamlar — onlara alan ve ağırlık verildi.
 */

.cc_ud05zvg3_bD9pDwUL39 .cc {
  width: 100%;
  --cc-bg: #0D0D0D;
  --cc-fg: #FFFFFF;
  /* Çizgi ve zeminleri METİN renginden türetiyoruz: merchant paneli açık bir
     renk yaparsa bunlar da otomatik uyum sağlar, elle ayarlamak gerekmez. */
  --cc-line: color-mix(in srgb, var(--cc-fg) 16%, transparent);
  --cc-line-soft: color-mix(in srgb, var(--cc-fg) 9%, transparent);
  --cc-fill: color-mix(in srgb, var(--cc-fg) 5%, transparent);
}

.cc_ud05zvg3_bD9pDwUL39 .cc__inner {
  display: grid;
  /* İKİ sütunda da açık `minmax(0, …)`: içerik sütununun min-content genişliği
     (sabit görsel + daralmayan buton) yoksa görsel sütunundan yer çalar ve
     fotoğrafı ezer. */
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: stretch;
  background: var(--cc-bg);
}
.cc_ud05zvg3_bD9pDwUL39 .cc--nomedia .cc__inner { grid-template-columns: minmax(0, 1fr); }

/* --- görsel --- */
.cc_ud05zvg3_bD9pDwUL39 .cc__media { position: relative; overflow: hidden; background: var(--paper-2); min-height: clamp(420px, 46vw, 620px); }
.cc_ud05zvg3_bD9pDwUL39 .cc__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- panel --- */
.cc_ud05zvg3_bD9pDwUL39 .cc__panel {
  background: var(--cc-bg);
  color: var(--cc-fg);
  padding: clamp(30px, 4vw, 68px) clamp(22px, 3.6vw, 60px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(16px, 1.8vw, 24px);
  min-width: 0;
}

.cc_ud05zvg3_bD9pDwUL39 .cc__status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  opacity: .78;
}
.cc_ud05zvg3_bD9pDwUL39 .cc__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--cc-ac, var(--accent));
  animation: cc_ud05zvg3_bD9pDwUL39_cc-pulse 2.2s var(--ease) infinite;
}
@keyframes cc_ud05zvg3_bD9pDwUL39_cc-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .4; transform: scale(.8); }
}

.cc_ud05zvg3_bD9pDwUL39 .cc__title {
  font-family: var(--display);
  font-size: clamp(34px, 5vw, var(--ts-max, 76px));
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: .96;
  margin: 0;
  text-wrap: balance;
}
.cc_ud05zvg3_bD9pDwUL39 .cc__desc {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.65;
  margin: 0;
  max-width: 50ch;
  opacity: .7;
  text-wrap: pretty;
}

/* --- geri sayım --- */
.cc_ud05zvg3_bD9pDwUL39 .cc__countdown {
  margin-top: clamp(6px, 1vw, 14px);
  padding-top: clamp(18px, 2.2vw, 30px);
  border-top: 1px solid var(--cc-line);
}
.cc_ud05zvg3_bD9pDwUL39 .cc__units { display: flex; gap: clamp(18px, 3.4vw, 56px); align-items: flex-start; }
/* Masaüstünde etiket rakamın SAĞINDA, taban çizgisine oturuyor — sayı ile
   birim tek bir okuma birimi gibi duruyor ("31 gün"). Mobilde alt alta. */
.cc_ud05zvg3_bD9pDwUL39 .cc__unit {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
}

.cc_ud05zvg3_bD9pDwUL39 .cc__value {
  display: flex;
  font-family: var(--display);
  font-size: clamp(40px, 5.6vw, 84px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.03em;
  /* Sabit genişlikli rakamlar: sütun dönerken genişlik oynamasın. */
  font-variant-numeric: tabular-nums;
}

/* ===== ODOMETRE =====
   Her rakam 1em yüksekliğinde bir PENCERE; içinde 0–9 dikey şeridi duruyor.
   Şeridi `--d` hücre kadar yukarı çekince canlı rakam pencereye giriyor ve
   geçiş sırasında aradaki rakamlar önünden akıp geçiyor — gerçek bir sayaç
   hissi, sert bir değişim değil. Yalnızca `transform` değişiyor (GPU'da).
   Rakamlar ayrı sütunlar olduğu için sadece DEĞİŞEN sütun dönüyor: saniyenin
   birler basamağı her tik dönerken onlar basamağı yerinde duruyor. */
.cc_ud05zvg3_bD9pDwUL39 .cc__digit {
  display: inline-block;
  height: 1em;
  overflow: hidden;
  vertical-align: top;
  font-variant-numeric: tabular-nums;
}
.cc_ud05zvg3_bD9pDwUL39 .cc__digit-strip {
  display: flex;
  flex-direction: column;
  transform: translateY(calc(var(--d, 0) * -1em));
  /* Uzun easeOutQuint: yumuşak oturan bir dönüş, düz durmuyor. */
  transition: transform .72s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}
.cc_ud05zvg3_bD9pDwUL39 .cc__digit-cell { display: flex; align-items: center; justify-content: center; height: 1em; line-height: 1; }

.cc_ud05zvg3_bD9pDwUL39 .cc__unit-label {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: lowercase;
  opacity: .5;
}
.cc_ud05zvg3_bD9pDwUL39 .cc__expired {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  color: var(--cc-ac, var(--accent));
}

/* --- ürünler --- */
.cc_ud05zvg3_bD9pDwUL39 .cc__products { margin-top: clamp(16px, 2vw, 26px); }
.cc_ud05zvg3_bD9pDwUL39 .cc__products-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 12px;
}
.cc_ud05zvg3_bD9pDwUL39 .cc__products-title {
  display: inline-flex; align-items: center; gap: 10px; min-width: 0;
  font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cc_ud05zvg3_bD9pDwUL39 .cc__products-title::before {
  content: ""; flex: none; width: 22px; height: 1px;
  background: var(--cc-ac, var(--accent));
}

.cc_ud05zvg3_bD9pDwUL39 .cc__nav { display: flex; gap: 6px; flex: none; }
.cc_ud05zvg3_bD9pDwUL39 .cc__arrow {
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--cc-line); background: transparent; color: inherit;
  cursor: pointer;
  transition: border-color .25s var(--ease), background-color .25s var(--ease), opacity .25s var(--ease);
}
.cc_ud05zvg3_bD9pDwUL39 .cc__arrow:hover:not(:disabled) { border-color: var(--cc-ac, var(--accent)); background: var(--cc-fill); }
.cc_ud05zvg3_bD9pDwUL39 .cc__arrow:disabled { opacity: .28; cursor: default; }
.cc_ud05zvg3_bD9pDwUL39 .cc__arrow:focus-visible { outline: 2px solid var(--cc-ac, var(--accent)); outline-offset: 2px; }

/* Görüş alanı parçayı kırpıyor; parça slaytları yan yana diziyor ve tam %100'lük
   adımlarla kayıyor. Panel yüksekliği hiç büyümüyor, kaç ürün olursa olsun. */
.cc_ud05zvg3_bD9pDwUL39 .cc__viewport { overflow: hidden; border: 1px solid var(--cc-line-soft); background: var(--cc-fill); }
.cc_ud05zvg3_bD9pDwUL39 .cc__track {
  display: flex;
  transition: transform .62s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}
.cc_ud05zvg3_bD9pDwUL39 .cc__cell {
  flex: 0 0 100%;
  min-width: 0;
  /* Pasif slaytlar geri çekilip soluyor, aktif olan öne çıkıyor — kaymanın
     üstüne ince bir derinlik/odak katmanı. */
  opacity: .16;
  transform: scale(.94);
  transition: opacity .5s var(--ease), transform .62s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}
.cc_ud05zvg3_bD9pDwUL39 .cc__cell[data-active] { opacity: 1; transform: scale(1); }

/* Kartın içeriği slayt yerleşince hafifçe yükseliyor — kaymadan sonra kademeli,
   oturmuş bir giriş. */
.cc_ud05zvg3_bD9pDwUL39 .cc__cell .cc-row {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s var(--ease) .08s, transform .5s cubic-bezier(.22, 1, .36, 1) .08s;
}
.cc_ud05zvg3_bD9pDwUL39 .cc__cell[data-active] .cc-row { opacity: 1; transform: none; }

.cc_ud05zvg3_bD9pDwUL39 .cc__dots { display: flex; gap: 6px; margin-top: 12px; }
.cc_ud05zvg3_bD9pDwUL39 .cc__dot-i {
  width: 16px; height: 2px; background: var(--cc-line);
  transition: background-color .3s var(--ease), width .3s var(--ease);
}
.cc_ud05zvg3_bD9pDwUL39 .cc__dot-i.is-on { background: var(--cc-ac, var(--accent)); width: 28px; }

.cc_ud05zvg3_bD9pDwUL39 .cc__empty {
  margin: 0; font-family: var(--mono); font-size: 11px;
  text-transform: uppercase; opacity: .45;
}

/* --- mobil: görsel üstte --- */
@media (max-width: 900px) {
  .cc_ud05zvg3_bD9pDwUL39 .cc__inner, .cc_ud05zvg3_bD9pDwUL39 .cc--nomedia .cc__inner { grid-template-columns: minmax(0, 1fr); }
  .cc_ud05zvg3_bD9pDwUL39 .cc__media { min-height: 0; aspect-ratio: 16 / 10; }
  /* Dört birim telefonda da tek satırda kalsın; etiket rakamın ALTINA geçiyor
     çünkü yan yana dizince satır taşıyor. */
  .cc_ud05zvg3_bD9pDwUL39 .cc__units { gap: 0; justify-content: space-between; }
  .cc_ud05zvg3_bD9pDwUL39 .cc__unit { flex-direction: column; align-items: flex-start; gap: 7px; }
}

@media (max-width: 480px) {
  .cc_ud05zvg3_bD9pDwUL39 .cc__value { font-size: clamp(30px, 10vw, 46px); }
  .cc_ud05zvg3_bD9pDwUL39 .cc__unit-label { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .cc_ud05zvg3_bD9pDwUL39 .cc__dot { animation: none; }
  /* Rakam yerinde değişsin, yol almasın. */
  .cc_ud05zvg3_bD9pDwUL39 .cc__digit-strip, .cc_ud05zvg3_bD9pDwUL39 .cc__track, .cc_ud05zvg3_bD9pDwUL39 .cc__cell, .cc_ud05zvg3_bD9pDwUL39 .cc__cell .cc-row { transition: none; }
  .cc_ud05zvg3_bD9pDwUL39 .cc__cell { opacity: 1; transform: none; }
  .cc_ud05zvg3_bD9pDwUL39 .cc__cell .cc-row { opacity: 1; transform: none; }
}

/* TOKEN KÖPRÜ — bkz. global.css */
.cc_ud05zvg3_bD9pDwUL39 .cc__status, .cc_ud05zvg3_bD9pDwUL39 .cc__unit-label, .cc_ud05zvg3_bD9pDwUL39 .cc__expired, .cc_ud05zvg3_bD9pDwUL39 .cc__products-title, .cc_ud05zvg3_bD9pDwUL39 .cc__empty { letter-spacing: var(--ts-label-narrow-ls, .1em); }


/* ==========================================================================
 * ÜRÜN SATIRI (.cc-row)
 * Alt bileşenin (src/sub-components/CampaignProductRow) stilleri BURADA:
 * `src/sub-components/*` altındaki styles.css dosyaları derlemeye girmiyor.
 * ========================================================================== */

.cc_ud05zvg3_bD9pDwUL39 .cc-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px;
  color: inherit;
  text-decoration: none;
  min-width: 0;
}

.cc_ud05zvg3_bD9pDwUL39 .cc-row__media { flex: none; width: 76px; height: 76px; overflow: hidden; background: var(--cc-fill); display: block; }
.cc_ud05zvg3_bD9pDwUL39 .cc-row__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.cc_ud05zvg3_bD9pDwUL39 .cc-row:hover .cc-row__media img { transform: scale(1.05); }
.cc_ud05zvg3_bD9pDwUL39 .cc-row__media--empty { display: block; width: 100%; height: 100%; }

.cc_ud05zvg3_bD9pDwUL39 .cc-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cc_ud05zvg3_bD9pDwUL39 .cc-row__name {
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.3;
  /* Tek satır + üç nokta: uzun ad slaytı asla uzatamaz. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cc_ud05zvg3_bD9pDwUL39 .cc-row:hover .cc-row__name { text-decoration: underline; text-underline-offset: 3px; }
.cc_ud05zvg3_bD9pDwUL39 .cc-row__prices { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cc_ud05zvg3_bD9pDwUL39 .cc-row__price { font-family: var(--mono); font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
.cc_ud05zvg3_bD9pDwUL39 .cc-row__old { font-family: var(--mono); font-size: 12px; opacity: .42; font-variant-numeric: tabular-nums; }

/* Kazanç rozeti DOLGULU: koyu zeminde çerçeveli+renkli metin okunmuyordu. */
.cc_ud05zvg3_bD9pDwUL39 .cc-row__savings {
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  background: var(--cc-ac, var(--accent));
  color: var(--on-accent);
  padding: 4px 8px;
}

.cc_ud05zvg3_bD9pDwUL39 .cc-row__add {
  flex: none;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  padding: 13px 22px;
  border: 1px solid var(--cc-ac, var(--accent));
  background: var(--cc-ac, var(--accent));
  color: var(--on-accent);
  cursor: pointer;
  white-space: nowrap;
  transition: filter .2s var(--ease), transform .2s var(--ease), background-color .3s var(--ease);
}
.cc_ud05zvg3_bD9pDwUL39 .cc-row__add:hover { filter: brightness(1.08); transform: translateY(-1px); }
.cc_ud05zvg3_bD9pDwUL39 .cc-row__add:active { transform: translateY(0) scale(.97); }
.cc_ud05zvg3_bD9pDwUL39 .cc-row__add:disabled { opacity: .65; cursor: default; }
.cc_ud05zvg3_bD9pDwUL39 .cc-row__add.is-added { background: transparent; color: var(--cc-ac, var(--accent)); }
.cc_ud05zvg3_bD9pDwUL39 .cc-row__add:focus-visible { outline: 2px solid var(--cc-ac, var(--accent)); outline-offset: 2px; }

.cc_ud05zvg3_bD9pDwUL39 .cc-row__oos {
  flex: none;
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  opacity: .5;
  padding: 13px 16px;
  border: 1px solid var(--cc-line);
}

@media (max-width: 560px) {
  .cc_ud05zvg3_bD9pDwUL39 .cc-row { gap: 12px; padding: 12px; flex-wrap: wrap; }
  .cc_ud05zvg3_bD9pDwUL39 .cc-row__media { width: 62px; height: 62px; }
  .cc_ud05zvg3_bD9pDwUL39 .cc-row__add, .cc_ud05zvg3_bD9pDwUL39 .cc-row__oos { flex: 1 0 100%; text-align: center; padding: 12px; }
}

/* TOKEN KÖPRÜ — bkz. global.css */
.cc_ud05zvg3_bD9pDwUL39 .cc-row__savings, .cc_ud05zvg3_bD9pDwUL39 .cc-row__add, .cc_ud05zvg3_bD9pDwUL39 .cc-row__oos { letter-spacing: var(--ts-label-narrow-ls, .1em); }
.cc_ud05zvg3_bD9pDwUL39 .cc-row__price, .cc_ud05zvg3_bD9pDwUL39 .cc-row__old { letter-spacing: var(--ts-data-ls, .04em); }