/* ============================================================
   Omnichannel Sipariş bölümü (#siparis-merkezi)
   Trendyol · Yemeksepeti · Getir → tek Luma ekranı.
   base.css token'larını kullanır (--panel/--ink/--amber/--magenta[yeşil]).
   Giriş animasyonu için sitenin ortak .rv scroll-reveal sistemini kullanır;
   yalnız kablo akışı / paket hareketi / canlı nokta ambient (her zaman açık).
   ============================================================ */

.oc { position: relative; overflow: hidden; padding: clamp(4rem, 8vw, 7rem) 0; }

.oc-orb {
  position: absolute; z-index: 0; pointer-events: none;
  width: 46rem; height: 46rem; right: -14rem; top: -8rem;
  background: radial-gradient(closest-side, rgba(16,185,129,.14), transparent 70%);
  filter: blur(8px);
}

.oc-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.02fr .98fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}

/* ---------- copy ---------- */
.oc-eyebrow { display: flex; align-items: center; gap: .7rem; margin: 0 0 1.6rem; }
.oc-eyebrow > span:first-child {
  font-family: var(--font-display); font-size: .8rem; font-weight: 500;
  letter-spacing: .02em; color: var(--ink-dim);
}
.oc-tag-pill {
  display: inline-block; transform: skewX(-9deg);
  background: linear-gradient(180deg, var(--amber-hi), var(--amber));
  color: #241c00; padding: .34rem .8rem; border-radius: 7px;
  box-shadow: 0 6px 18px var(--glow);
}
.oc-tag-pill span {
  display: inline-block; transform: skewX(9deg);
  font-family: var(--font-display); font-size: .78rem; font-weight: 600; letter-spacing: .01em;
}

.oc-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.1rem, 4.6vw, 3.6rem); line-height: 1.02;
  letter-spacing: -.02em; margin: 0 0 1.5rem; text-wrap: balance;
}
.oc-title span { display: block; }
.oc-title .oc-hl { color: var(--magenta-hi); }

.oc-lead {
  max-width: 34rem; color: var(--ink-dim);
  font-size: clamp(1rem, 1.15vw, 1.1rem); line-height: 1.62; margin: 0 0 2rem;
}
.oc-lead b { color: var(--ink); font-weight: 600; }

.oc-chips { display: flex; flex-wrap: wrap; gap: .55rem; }
.oc-chip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .85rem .5rem .7rem; border: 1px solid var(--line);
  border-radius: 999px; background: rgba(255,255,255,.02);
  font-size: .84rem; font-weight: 600; color: var(--ink-dim);
}
.oc-chip i { width: 11px; height: 11px; border-radius: 4px; }
.oc-d-ty { background: #f27a1a; } .oc-d-ys { background: #fb0a52; }
.oc-d-gtr { background: #6c4bd8; } .oc-d-luma { background: var(--magenta-hi); }

/* ---------- visual stage ---------- */
.oc-stage { position: relative; width: 100%; max-width: 560px; margin-left: auto; aspect-ratio: 560 / 470; }

.oc-wires { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; }
.oc-wires path { fill: none; stroke-width: 2; stroke-dasharray: 6 7; opacity: .55; animation: oc-flow 1.6s linear infinite; }
@keyframes oc-flow { to { stroke-dashoffset: -26; } }
.oc-wires .oc-pkt { fill: #fff; }

/* Rozet genişliği en uzun etikete (`Yemeksepeti`) sabitlendi. Teller viewBox
   içinde x=150'den başlıyor (150/560 = %26.8) ve sahneyle birlikte ölçekleniyor;
   rozetler ise sabit px — yani ikisi farklı birimde. `min-width: 96px` iken
   "Getir" 96px'te kalıp telin ~50px gerisinde duruyor, "Yemeksepeti" ~128px ile
   tele değiyordu; üçü farklı x'te bittiği için sıra dağınık görünüyordu.
   min-width'i en uzun rozete çekmek üçünü de aynı hizada bitirir; `max-content`
   korunduğu için etiket metni uzarsa rozet yine büyüyebilir. */
.oc-src {
  position: absolute; z-index: 2; width: max-content; min-width: 8.5rem; max-width: 46%;
  display: flex; align-items: center; gap: .55rem; padding: .6rem .7rem;
  background: linear-gradient(180deg, #1b1b21, var(--panel));
  border: 1px solid var(--line); border-radius: 13px;
  box-shadow: 0 12px 26px rgba(0,0,0,.4);
}
.oc-src .oc-mk { width: 22px; height: 22px; border-radius: 7px; flex: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.oc-src .oc-nm { font-family: var(--font-display); font-size: .72rem; font-weight: 600; line-height: 1.1; white-space: nowrap; }
.oc-src.s1 { left: 0; top: 15%; } .oc-src.s2 { left: 0; top: 43.5%; } .oc-src.s3 { left: 0; top: 72%; }
.oc-mk.ty { background: linear-gradient(180deg, #ff9a44, #f27a1a); }
.oc-mk.ys { background: linear-gradient(180deg, #ff4e82, #fb0a52); }
.oc-mk.gtr { background: linear-gradient(180deg, #8b6cff, #6c4bd8); }

/* ---------- unified board ---------- */
.oc-board {
  position: absolute; z-index: 3; left: 33%; right: 0; top: 5%; bottom: 5%;
  background: linear-gradient(180deg, #16161b, #101014);
  border: 1px solid var(--line); border-radius: 20px;
  box-shadow: 0 30px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04);
  padding: 1rem 1rem .9rem; display: flex; flex-direction: column;
}
.oc-bhead { display: flex; align-items: center; justify-content: space-between; padding: .1rem .25rem .8rem; border-bottom: 1px solid rgba(255,255,255,.06); }
.oc-btitle { display: flex; align-items: center; gap: .5rem; font-family: var(--font-display); font-weight: 600; font-size: .9rem; }
.oc-btitle .g { width: 9px; height: 9px; border-radius: 50%; background: var(--magenta-hi); box-shadow: 0 0 0 4px rgba(16,185,129,.16); }
.oc-live { display: inline-flex; align-items: center; gap: .38rem; background: linear-gradient(180deg, var(--amber-hi), var(--amber)); color: #241c00; font-size: .68rem; font-weight: 700; padding: .28rem .55rem; border-radius: 999px; }
.oc-live i { width: 6px; height: 6px; border-radius: 50%; background: #241c00; animation: oc-pulse 1.4s ease-in-out infinite; }
@keyframes oc-pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.7); opacity: .4; } }

.oc-rows { display: flex; flex-direction: column; gap: .5rem; padding: .8rem .1rem; flex: 1; }
.oc-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .7rem; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.06); border-radius: 12px; padding: .6rem .7rem; }
.oc-row .oc-rmk { width: 30px; height: 30px; border-radius: 9px; flex: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.oc-rmk.ty { background: linear-gradient(180deg, #ff9a44, #f27a1a); }
.oc-rmk.ys { background: linear-gradient(180deg, #ff4e82, #fb0a52); }
.oc-rmk.gtr { background: linear-gradient(180deg, #8b6cff, #6c4bd8); }
.oc-rmk.luma { background: linear-gradient(180deg, var(--magenta-hi), var(--magenta)); }
.oc-row .oc-meta { min-width: 0; }
.oc-row .oc-ordno { font-size: .82rem; font-weight: 700; }
.oc-row .oc-sub { font-size: .7rem; color: var(--ink-faint); font-weight: 500; margin-top: .1rem; }
.oc-row .oc-end { display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; }
.oc-row .oc-price { font-size: .84rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.oc-stat { font-size: .62rem; font-weight: 700; padding: .16rem .5rem; border-radius: 999px; white-space: nowrap; }
.oc-stat.new { background: rgba(255,209,0,.16); color: var(--amber-hi); }
.oc-stat.prep { background: rgba(106,168,255,.15); color: #9cc2ff; }
.oc-stat.road { background: rgba(16,185,129,.16); color: var(--magenta-hi); }
.oc-stat.open { background: rgba(255,255,255,.07); color: var(--ink-dim); }

.oc-bfoot { display: flex; align-items: center; justify-content: space-between; background: linear-gradient(180deg, var(--magenta-hi), var(--magenta)); color: #04160d; border-radius: 13px; padding: .7rem .9rem; }
.oc-bfoot .fl { font-family: var(--font-display); font-size: .74rem; font-weight: 600; }
.oc-bfoot .fr { font-size: .95rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- responsive ---------- */
@media (max-width: 940px) {
  .oc-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .oc-stage { margin: 0 auto; max-width: 460px; }
  .oc-lead { max-width: none; }
}
@media (max-width: 460px) { .oc-row { grid-template-columns: auto 1fr auto; } }

/* Dar ekranda kaynak rozetleri birleşik panelin altına giriyordu.
   Sebep bir yüzde çelişkisi: rozet `.oc-src { left:0; max-width:46% }`,
   panel ise `.oc-board { left:33% }` — yani %13'lük kesişme tasarım gereği
   VAR. Panelin z-index'i (3) rozetlerinkinden (2) büyük olduğu için rozet
   panelin ALTINDA kalıyor ve `white-space: nowrap` taşan "Yemeksepeti"
   kırpılıyordu. Geniş ekranda göze batmıyor: sahne 460px iken %33 = 152px,
   rozetin ihtiyacı ~125px, sığıyor. 390px telefonda %33 = ~118px'e düşüp
   taşma başlıyor — hatanın yalnız mobilde görünmesinin sebebi bu.

   Çözüm rozetleri daraltmak değil, sahneyi telefonda akışa almak: bilgi
   taşıyan kısım panel; marka rozetleri zaten üstteki .oc-chips listesinde
   METİN olarak var ve sahnenin tamamı aria-hidden. position:static olunca
   panel yüksekliğini içeriğinden alır, böylece sabit aspect-ratio yüzünden
   kesilen son sipariş satırı da tam görünür. */
@media (max-width: 520px) {
  .oc-src, .oc-wires { display: none; }
  .oc-stage { aspect-ratio: auto; max-width: none; }
  .oc-board { position: static; }
}

@media (prefers-reduced-motion: reduce) {
  .oc-wires path, .oc-live i, .oc-wires .oc-pkt { animation: none !important; }
}