/* ==========================================================================
   benomtech TEMASI (P1) - varliklar/sayfa-siparis_destek.css
   (kayit anahtari: sayfa_siparis_destek_css; slug 'siparis_destek' =
   siparis_destek + siparis_destek_takip + siparis_destek_sonuc; slug
   v1.7.219 siparis destek yayininda Aktif.php'ye eklendi).
   Kaynak parca: siparis_destek.css (tamami).

   OZGULLUK: cekirdegin sd_stil.php stil blogu govde icinde, bu dosyadan
   SONRA basilir; esit ozgullukte cekirdek kazanir. Bu yuzden her kural
   #MainDiv.bs-sd-sayfa onekli. Cekirdegin tek !important'i
   .bs-sd-gizli{display:none}: burada display hicbir yerde !important degil.
   ONEKLER: G = #MainDiv.bs-sd-sayfa (uc sayfa) | F = G #bsSdForm (form ici)
   | W = G:has(#bsSdForm) (yalniz sihirbaz 2 sutun yerlesimi) | T = Trendyol
   secili turuncu vurgu. :has() yoksa yalniz W/T duser.
   Turkce content metinleri CSS kacisiyla. Yasak desenler YOK.
   ========================================================================== */


/* ---------------------------------------------------------------------------
 * 1) GENEL (G) — sayfa zemini, kart, form alanlari, dugmeler, uyarilar
 * ------------------------------------------------------------------------ */
#MainDiv.bs-sd-sayfa {
  background: transparent;          /* canli: govde #f5f5f5 (site_style body); cekirdek #f7f8fa */
  padding-bottom: 40px;
}
#MainDiv.bs-sd-sayfa .bs-sd-kart {  /* canli .support-card + .card-body */
  border: 0;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
  padding: 30px;
}
#MainDiv.bs-sd-sayfa .bs-sd-kart-baslik {
  font-size: 20px;
  margin-bottom: 8px;
}
#MainDiv.bs-sd-sayfa .form-control {
  min-height: 48px;
  border-radius: 12px;
}
#MainDiv.bs-sd-sayfa textarea.form-control {
  min-height: 140px;
  resize: vertical;
}
#MainDiv.bs-sd-sayfa .alert {
  border-radius: 12px;
}
/* Bootstrap .btn-primary / .btn-secondary / .btn-success karsiliklari */
#MainDiv.bs-sd-sayfa .button-blue {
  background-color: #007bff;
  border-color: #007bff;
  color: #fff;
  border-radius: 12px;
}
#MainDiv.bs-sd-sayfa .button-blue:hover {
  background-color: #0069d9;
  border-color: #0062cc;
  color: #fff;
}
#MainDiv.bs-sd-sayfa .button-green {
  background-color: #28a745;
  border-color: #28a745;
  color: #fff;
  border-radius: 12px;
}
#MainDiv.bs-sd-sayfa .button-green:hover {
  background-color: #218838;
  border-color: #1e7e34;
  color: #fff;
}
#MainDiv.bs-sd-sayfa .button-grey-out {
  border-radius: 12px;
}

/* ---------------------------------------------------------------------------
 * 2) SIHIRBAZ YERLESIMI (W) — canli: .container > .row > col-lg-8 (form karti)
 *    + col-lg-4 (Talep Takibi karti). Toplam 1140px, 750 + 30 + 360.
 *    .bs-sd-ust display:contents ile acilir; h1 / aciklama / baglanti dogrudan
 *    izgara ogesi olur. Sol kartin beyaz zemini W::after (satir 1-4 boyunca),
 *    "Siparis Sonrasi Destek" rozeti W::before.
 * ------------------------------------------------------------------------ */
#MainDiv.bs-sd-sayfa:has(#bsSdForm) {
  display: grid;
  grid-template-columns: minmax(0, 750fr) minmax(0, 360fr);
  grid-template-rows: auto auto auto auto;
  column-gap: 30px;
  align-items: start;
  box-sizing: border-box;
  padding: 40px max(15px, calc((100% - 1140px) / 2));
}
#MainDiv.bs-sd-sayfa:has(#bsSdForm) > .bs-sd-ust {
  display: contents;
}
/* sol kart zemini */
#MainDiv.bs-sd-sayfa:has(#bsSdForm)::after {
  content: "";
  grid-column: 1;
  grid-row: 1 / 5;
  align-self: stretch;
  z-index: 0;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
  pointer-events: none;
}
/* rozet: canli .wizard-badge — metin: "Sipariş Sonrası Destek" */
#MainDiv.bs-sd-sayfa:has(#bsSdForm)::before {
  content: "Sipari\00015F  Sonras\000131  Destek";
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  z-index: 1;
  margin: 30px 30px 10px;
  padding: 6px 14px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #333;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}
/* baslik: canli .wizard-title (28px, sola dayali). Gorunen metin canlidaki gibi
   "Sipariş Destek Formu" — title "Sipariş Destek" kalir (canli ile ayni). */
#MainDiv.bs-sd-sayfa:has(#bsSdForm) .bs-sd-baslik {
  grid-column: 1;
  grid-row: 2;
  z-index: 1;
  margin: 0 30px 8px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  color: #212529;
  text-align: left;
}
#MainDiv.bs-sd-sayfa:has(#bsSdForm) .bs-sd-baslik::after {
  content: " Formu";
}
#MainDiv.bs-sd-sayfa:has(#bsSdForm) .bs-sd-aciklama {
  grid-column: 1;
  grid-row: 3;
  z-index: 1;
  max-width: none;
  margin: 0 30px 25px;
  font-size: 15px;
  line-height: 1.5;
  color: #666;
  text-align: left;
}
#MainDiv.bs-sd-sayfa:has(#bsSdForm) > .bs-sd-kap {
  grid-column: 1;
  grid-row: 4;
  z-index: 1;
  max-width: none;
  margin: 0;
  padding: 0 30px 30px;
}
/* form kendi kart cercevesini birakir — zemin W::after'da */
#MainDiv.bs-sd-sayfa:has(#bsSdForm) #bsSdForm.bs-sd-kart {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* Sag kart: "Talep Takibi" — canli .tracking-card. Cekirdekte yalniz baglanti var
   ("Talebimi takip et" -> siparis-destek/takip/ ; uyede "Taleplerim"). Baslik ve
   aciklama sozde ogelerle; baglanti tam genislik mavi dugme; altindaki bilgi kutusu
   (canli .alert-info) baglantinin ::after'i. */
#MainDiv.bs-sd-sayfa:has(#bsSdForm) .bs-sd-ust-baglanti {
  grid-column: 2;
  grid-row: 1 / 5;
  align-self: start;
  z-index: 1;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 24px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
  font-size: 15px;
  text-align: left;
}
#MainDiv.bs-sd-sayfa:has(#bsSdForm) .bs-sd-ust-baglanti::before {
  content: "Talep Takibi";
  margin-bottom: 6px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: #212529;
}
#MainDiv.bs-sd-sayfa:has(#bsSdForm) .bs-sd-ust-baglanti::after {
  content: "A\0000E7 t\000131 \00011F \000131 n\000131 z destek talebinin g\0000FC ncel durumunu ve ma\00011F aza yan\000131 tlar\000131 n\000131  g\0000F6 r\0000FC nt\0000FC leyin.";
  order: 1;
  margin-bottom: 14px;
  line-height: 1.5;
  color: #666;
}
#MainDiv.bs-sd-sayfa:has(#bsSdForm) .bs-sd-ust-baglanti a {
  order: 2;
  position: relative;
  z-index: 0;
  display: block;
  color: #fff;
  font-size: 16px;
  line-height: 38px;
  text-align: center;
  text-decoration: none;
}
#MainDiv.bs-sd-sayfa:has(#bsSdForm) .bs-sd-ust-baglanti a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 38px;
  z-index: -1;
  background: #007bff;
  border-radius: 4px;
  transition: background-color .15s ease;
}
#MainDiv.bs-sd-sayfa:has(#bsSdForm) .bs-sd-ust-baglanti a:hover,
#MainDiv.bs-sd-sayfa:has(#bsSdForm) .bs-sd-ust-baglanti a:focus {
  color: #fff;
  text-decoration: none;
}
#MainDiv.bs-sd-sayfa:has(#bsSdForm) .bs-sd-ust-baglanti a:hover::before {
  background: #0069d9;
}
#MainDiv.bs-sd-sayfa:has(#bsSdForm) .bs-sd-ust-baglanti a::after {
  content: "Butona t\000131 klad\000131 \00011F \000131 n\000131 zda talep detay ve yaz\000131 \00015F ma ekran\000131 na y\0000F6 nlendirilirsiniz.";
  display: block;
  margin-top: 16px;
  padding: 12px 16px;
  background: #d1ecf1;
  border: 1px solid #bee5eb;
  border-radius: 4px;
  color: #0c5460;
  font-size: 15px;
  line-height: 1.5;
  text-align: left;
}

/* ---------------------------------------------------------------------------
 * 3) ADIM GOSTERGESI (F) — canli .step-indicator: 42px yuvarlak + altta etiket.
 *    Cekirdek metni "1. Satış Kanalı" tek metin dugumu: gizlenir (font-size:0),
 *    yuvarlak data-adim'den, etiket canlidaki kisa adlarla sozde ogeden gelir.
 * ------------------------------------------------------------------------ */
#MainDiv.bs-sd-sayfa #bsSdForm .bs-sd-adimlar {
  gap: 8px;
  align-items: flex-start;
  margin-bottom: 25px;
}
#MainDiv.bs-sd-sayfa #bsSdForm .bs-sd-adim-n {
  flex: 0 0 auto;
  min-width: 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-top: 0;
  padding-top: 0;
  font-size: 0;
  line-height: 0;
  color: #9ca3af;
}
#MainDiv.bs-sd-sayfa #bsSdForm .bs-sd-adim-n::before {
  content: attr(data-adim);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 2px solid transparent;
  box-sizing: border-box;
  background: #e9ecef;
  color: #666;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  transition: all .25s ease;
}
#MainDiv.bs-sd-sayfa #bsSdForm .bs-sd-adim-n::after {
  margin-top: 5px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  color: #9ca3af;
  transition: color .25s ease;
}
#MainDiv.bs-sd-sayfa #bsSdForm .bs-sd-adim-n[data-adim="1"]::after { content: "Platform"; }
#MainDiv.bs-sd-sayfa #bsSdForm .bs-sd-adim-n[data-adim="2"]::after { content: "Sipari\00015F "; }
#MainDiv.bs-sd-sayfa #bsSdForm .bs-sd-adim-n[data-adim="3"]::after { content: "\0000DC r\0000FC nler"; }
#MainDiv.bs-sd-sayfa #bsSdForm .bs-sd-adim-n[data-adim="4"]::after { content: "Sorun"; }
#MainDiv.bs-sd-sayfa #bsSdForm .bs-sd-adim-n.aktif::before {
  background: #0d6efd;
  color: #fff;
  transform: scale(1.05);
}
#MainDiv.bs-sd-sayfa #bsSdForm .bs-sd-adim-n.aktif::after { color: #0d6efd; }
#MainDiv.bs-sd-sayfa #bsSdForm .bs-sd-adim-n.tamam::before {
  background: #198754;
  color: #fff;
}
#MainDiv.bs-sd-sayfa #bsSdForm .bs-sd-adim-n.tamam::after { color: #198754; }

/* adim basligi / aciklamasi: canli .step-box-title (20px) / .step-box-desc */
#MainDiv.bs-sd-sayfa #bsSdForm .bs-sd-adim-baslik {
  margin-bottom: 8px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}
#MainDiv.bs-sd-sayfa #bsSdForm .bs-sd-adim-aciklama {
  margin-bottom: 22px;
  font-size: 15px;
  color: #666;
}

/* ---------------------------------------------------------------------------
 * 4) SATIS KANALI KARTLARI (F) — canli .marketplace-options / .marketplace-label
 * ------------------------------------------------------------------------ */
#MainDiv.bs-sd-sayfa #bsSdForm .bs-sd-kanallar {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
#MainDiv.bs-sd-sayfa #bsSdForm .bs-sd-kanal {
  gap: 10px;
  min-height: 72px;
  padding: 14px 16px;
  border: 2px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(13, 110, 253, .03);
  font-weight: 600;
  color: #212529;
  user-select: none;
  transition: .2s ease;
}
#MainDiv.bs-sd-sayfa #bsSdForm .bs-sd-kanal.secili {
  border-color: #0d6efd;
  background: linear-gradient(90deg, #eaf1ff 0%, #f8fbff 100%);
  color: #0d6efd;
  box-shadow: 0 4px 16px rgba(13, 110, 253, .10);
}
#MainDiv.bs-sd-sayfa #bsSdForm .bs-sd-kanal:hover {
  border-color: #93c5fd;
  background: #f0f7ff;
  color: #1d4ed8;
}
/* radyo: genel style.css "input{-webkit-appearance:none}" yerli radyoyu GORUNMEZ
   yapiyor (onizlemede daire yok) — canli .custom-radio gibi elle ciz. */
#MainDiv.bs-sd-sayfa #bsSdForm .bs-sd-kanal input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin: 0 10px 0 0;
  border: 2px solid #b6c2d2;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}
#MainDiv.bs-sd-sayfa #bsSdForm .bs-sd-kanal input[type="radio"]:checked {
  border-color: #0d6efd;
  background: radial-gradient(circle, #fff 0 5px, #0d6efd 5.5px);
}
#MainDiv.bs-sd-sayfa #bsSdForm .bs-sd-kanal input[type="radio"]:focus-visible {
  outline: 2px solid #93c5fd;
  outline-offset: 2px;
}
/* site kanali: canli images/benomtech.png logosu. Burada sitenin KENDI logosu
   (ayarlar logo dosyasi; staging + canli header/footer'da ayni yol). Logo dosyasi
   panelden degisirse bu yol guncellenmeli (bkz. .md). */
#MainDiv.bs-sd-sayfa #bsSdForm .bs-sd-kanal input[value="site"] ~ i,
#MainDiv.bs-sd-sayfa #bsSdForm .bs-sd-kanal input[value="trendyol"] ~ i {
  display: none;
}
#MainDiv.bs-sd-sayfa #bsSdForm .bs-sd-kanal input[value="site"] ~ span {
  display: block;
  width: 132px;
  height: 40px;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
  color: transparent;
  background: url("/images/logo/66145-627-Benomtech_2025.svg") left center / contain no-repeat;
}
/* Trendyol: canli images/trendyol.png (kucuk harf kelime marka + turuncu ".com").
   Gorsel bagimliligi olmadan yazi ile yaklasilir (dosya yoksa kart bos kalmasin). */
#MainDiv.bs-sd-sayfa #bsSdForm .bs-sd-kanal input[value="trendyol"] ~ span {
  position: relative;
  padding-right: 2px;
  font-size: 27px;
  font-weight: 500;
  line-height: 40px;
  letter-spacing: -.01em;
  text-transform: lowercase;
  color: #333;
}
#MainDiv.bs-sd-sayfa #bsSdForm .bs-sd-kanal input[value="trendyol"] ~ span::after {
  content: ".com";
  position: absolute;
  top: -7px;
  right: 0;
  padding: 2px 3px;
  transform: rotate(-4deg);
  border-radius: 2px;
  background: #f27a1a;
  color: #fff;
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
}
/* Trendyol karti: canlida ilk sirada ve secilmeden de hafif turuncu
   (.marketplace-options .marketplace-label:first-child). Etiketin kendisinde kanal
   sinifi yok — :has ile radyonun degerinden secilir. */
#MainDiv.bs-sd-sayfa #bsSdForm .bs-sd-kanal:has(> input[value="trendyol"]) {
  order: -1;
  border-color: #fbc99a;
  background: linear-gradient(135deg, #fffaf6 0%, #fff 100%);
}
#MainDiv.bs-sd-sayfa #bsSdForm .bs-sd-kanal:has(> input[value="trendyol"]):hover {
  border-color: #f27a1a;
  box-shadow: 0 4px 14px rgba(242, 122, 26, .12);
}
/* diger pazaryerleri (panelde acilirsa): ikon kalir, mavi ton */
#MainDiv.bs-sd-sayfa #bsSdForm .bs-sd-kanal i {
  color: #6b7280;
}

/* ---------------------------------------------------------------------------
 * 5) URUN SECIMI (F, 3. adim) — canli .product-select-box. Cekirdek .bs-sd-urun'e
 *    secili sinifi koymuyor; secim :has(input:checked) ile. Onay kutusu da genel
 *    appearance:none yuzunden gorunmuyordu — elle cizilir.
 * ------------------------------------------------------------------------ */
#MainDiv.bs-sd-sayfa #bsSdForm .bs-sd-urun {
  gap: 12px;
  margin-bottom: 12px;
  padding: 6px 12px 6px 8px;
  border: 2px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
  transition: all .2s ease;
}
#MainDiv.bs-sd-sayfa #bsSdForm .bs-sd-urun:hover {
  border-color: #b6d4fe;
}
#MainDiv.bs-sd-sayfa #bsSdForm .bs-sd-urun:has(input:checked) {
  border-color: #0d6efd;
  background: #eaf1ff;
  box-shadow: 0 2px 8px rgba(13, 110, 253, .08);
}
#MainDiv.bs-sd-sayfa #bsSdForm .bs-sd-urun input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin: 0 0 0 4px;
  border: 2px solid #b6c2d2;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}
#MainDiv.bs-sd-sayfa #bsSdForm .bs-sd-urun input[type="checkbox"]:checked {
  border-color: #0d6efd;
  background: #0d6efd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center / 14px no-repeat;
}
#MainDiv.bs-sd-sayfa #bsSdForm .bs-sd-urun img {
  width: 64px;
  height: 64px;
  border: 1px solid #eee;
  border-radius: 10px;
  background: #fff;
}
#MainDiv.bs-sd-sayfa #bsSdForm .bs-sd-urun > div > div:first-child {
  font-weight: 600;
  color: #222;
}
#MainDiv.bs-sd-sayfa #bsSdForm .bs-sd-urun-adet {
  margin-top: 2px;
  font-size: 13px;
  color: #666;
}

/* ---------------------------------------------------------------------------
 * 6) SORUN + GORSELLER (F, 4. adim) — canli sayac (yesil kalin) ve onizleme (88px)
 * ------------------------------------------------------------------------ */
#MainDiv.bs-sd-sayfa #bsSdForm .bs-sd-not:has(> .bs-sd-sayac) {
  text-align: right;
  font-weight: 700;
  color: #198754;
}
#MainDiv.bs-sd-sayfa #bsSdForm .bs-sd-onizleme {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
#MainDiv.bs-sd-sayfa #bsSdForm .bs-sd-onizleme div {
  width: auto;
  height: 88px;
  overflow: hidden;
  border: 1px solid #eee;
  border-radius: 10px;
  background: #fff;
}
#MainDiv.bs-sd-sayfa #bsSdForm .bs-sd-onizleme img {
  border: 0;
  border-radius: 0;
}
#MainDiv.bs-sd-sayfa #bsSdForm .bs-sd-onizleme button {
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  line-height: 22px;
  border: 0;
  border-radius: 50%;
  background: rgba(220, 53, 69, .88);
  color: #fff;
  font-size: 15px;
}
#MainDiv.bs-sd-sayfa #bsSdForm .bs-sd-onizleme button:hover {
  background: #dc3545;
}

/* ---------------------------------------------------------------------------
 * 7) DUGMELER (F) — canli .wizard-actions: ustte ince cizgi, sola dayali,
 *    min 120px, 12px kose, 16px yazi; Geri = gri dolu (btn-secondary)
 * ------------------------------------------------------------------------ */
#MainDiv.bs-sd-sayfa #bsSdForm .bs-sd-dugmeler {
  justify-content: flex-start;
  gap: 10px;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}
#MainDiv.bs-sd-sayfa #bsSdForm .bs-sd-dugmeler .button-2x {
  min-width: 120px;
  padding: 10px 18px;
  border-radius: 12px;
  font-size: 16px;
  line-height: 1.5;
  transition: transform .2s ease, background-color .15s ease;
}
#MainDiv.bs-sd-sayfa #bsSdForm .bs-sd-dugmeler .button-2x:hover {
  transform: translateY(-1px);
}
#MainDiv.bs-sd-sayfa #bsSdForm .bs-sd-dugmeler .bs-sd-geri {
  background-color: #6c757d;
  border-color: #6c757d;
  color: #fff;
}
#MainDiv.bs-sd-sayfa #bsSdForm .bs-sd-dugmeler .bs-sd-geri:hover {
  background-color: #5a6268;
  border-color: #545b62;
  color: #fff;
}
#MainDiv.bs-sd-sayfa #bsSdForm .bs-sd-sonuc.alert {
  border-radius: 12px;
}

/* ---------------------------------------------------------------------------
 * 8) TRENDYOL SECILINCE turuncu vurgu (canli .support-card.ty-theme) — yalniz :has
 * ------------------------------------------------------------------------ */
#MainDiv.bs-sd-sayfa:has(#bsSdForm input[name="kanal"][value="trendyol"]:checked)::after {
  border-top: 4px solid #f27a1a;
  box-shadow: 0 10px 40px rgba(242, 122, 26, .13);
}
#MainDiv.bs-sd-sayfa:has(#bsSdForm input[name="kanal"][value="trendyol"]:checked)::before {
  background: #fde4c9;
  color: #d96610;
}
#MainDiv.bs-sd-sayfa #bsSdForm:has(input[name="kanal"][value="trendyol"]:checked) .bs-sd-adim-n.aktif::before {
  background: #f27a1a;
  box-shadow: 0 4px 12px rgba(242, 122, 26, .35);
}
#MainDiv.bs-sd-sayfa #bsSdForm:has(input[name="kanal"][value="trendyol"]:checked) .bs-sd-adim-n.aktif::after {
  color: #f27a1a;
}
#MainDiv.bs-sd-sayfa #bsSdForm:has(input[name="kanal"][value="trendyol"]:checked) .bs-sd-kanal.secili {
  border-color: #f27a1a;
  background: linear-gradient(90deg, #fff5ed 0%, #fffaf6 100%);
  color: #d96610;
  box-shadow: 0 4px 16px rgba(242, 122, 26, .13);
}
#MainDiv.bs-sd-sayfa #bsSdForm:has(input[name="kanal"][value="trendyol"]:checked) .bs-sd-kanal input[type="radio"]:checked {
  border-color: #f27a1a;
  background: radial-gradient(circle, #fff 0 5px, #f27a1a 5.5px);
}
#MainDiv.bs-sd-sayfa #bsSdForm:has(input[name="kanal"][value="trendyol"]:checked) .bs-sd-urun:has(input:checked) {
  border-color: #f27a1a;
  background: #fff5ed;
  box-shadow: 0 2px 8px rgba(242, 122, 26, .10);
}
#MainDiv.bs-sd-sayfa #bsSdForm:has(input[name="kanal"][value="trendyol"]:checked) .form-control:focus {
  border-color: #f27a1a;
  box-shadow: 0 0 0 3px rgba(242, 122, 26, .18);
}
#MainDiv.bs-sd-sayfa #bsSdForm:has(input[name="kanal"][value="trendyol"]:checked) .bs-sd-dugmeler {
  border-top-color: #fde4c9;
}
#MainDiv.bs-sd-sayfa #bsSdForm:has(input[name="kanal"][value="trendyol"]:checked) .bs-sd-dugmeler .bs-sd-ileri,
#MainDiv.bs-sd-sayfa #bsSdForm:has(input[name="kanal"][value="trendyol"]:checked) .bs-sd-dugmeler .bs-sd-gonder {
  background-color: #f27a1a;
  border-color: #f27a1a;
  color: #fff;
  box-shadow: 0 6px 18px rgba(242, 122, 26, .30);
}
#MainDiv.bs-sd-sayfa #bsSdForm:has(input[name="kanal"][value="trendyol"]:checked) .bs-sd-dugmeler .bs-sd-ileri:hover,
#MainDiv.bs-sd-sayfa #bsSdForm:has(input[name="kanal"][value="trendyol"]:checked) .bs-sd-dugmeler .bs-sd-gonder:hover {
  background-color: #d96610;
  border-color: #d96610;
}

/* ---------------------------------------------------------------------------
 * 9) TAKIP / SONUC sayfalari (ayni sayfa turu) — yalniz yazisma balonlari canli
 *    siparis-destek-takip.php (chat-board / chat-item) tonlarina
 * ------------------------------------------------------------------------ */
#MainDiv.bs-sd-sayfa .bs-sd-mesajlar {
  padding: 14px;
  background: #eaf2ff;
  border: 1px solid #d9e7ff;
  border-radius: 16px;
}
#MainDiv.bs-sd-sayfa .bs-sd-mesaj {
  border-radius: 14px;
  box-shadow: 0 4px 10px rgba(15, 23, 42, .05);
}
#MainDiv.bs-sd-sayfa .bs-sd-mesaj-musteri {
  background: #d7ebff;
  border: 1px solid #b8dcff;
}
#MainDiv.bs-sd-sayfa .bs-sd-mesaj-magaza {
  background: #fff;
  border: 1px solid #e2e8f0;
}
#MainDiv.bs-sd-sayfa .bs-sd-mesaj-sistem {
  background: #fffbeb;
  border: 1px solid #fde68a;
  box-shadow: none;
}

/* ---------------------------------------------------------------------------
 * 10) DUYARLI — canli col-lg kirilimi (992px): Talep Takibi formun ALTINA;
 *     576px alti (canli @media 576): kart ici 20px, baslik 24px, dugmeler tam genislik
 * ------------------------------------------------------------------------ */
@media (max-width: 991.98px) {
  #MainDiv.bs-sd-sayfa:has(#bsSdForm) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto auto;
    padding: 40px 15px;
  }
  #MainDiv.bs-sd-sayfa:has(#bsSdForm) .bs-sd-ust-baglanti {
    grid-column: 1;
    grid-row: 5;
    margin-top: 20px;
  }
}
@media (max-width: 576px) {
  #MainDiv.bs-sd-sayfa .bs-sd-kart {
    padding: 20px;
  }
  #MainDiv.bs-sd-sayfa:has(#bsSdForm)::before {
    margin: 20px 20px 10px;
  }
  #MainDiv.bs-sd-sayfa:has(#bsSdForm) .bs-sd-baslik {
    margin: 0 20px 8px;
    font-size: 24px;
  }
  #MainDiv.bs-sd-sayfa:has(#bsSdForm) .bs-sd-aciklama {
    margin: 0 20px 20px;
  }
  #MainDiv.bs-sd-sayfa:has(#bsSdForm) > .bs-sd-kap {
    padding: 0 20px 20px;
  }
  #MainDiv.bs-sd-sayfa:has(#bsSdForm) .bs-sd-ust-baglanti {
    padding: 20px;
  }
  #MainDiv.bs-sd-sayfa #bsSdForm .bs-sd-adimlar {
    gap: 4px;
  }
  #MainDiv.bs-sd-sayfa #bsSdForm .bs-sd-adim-n {
    min-width: 54px;
  }
  #MainDiv.bs-sd-sayfa #bsSdForm .bs-sd-dugmeler {
    flex-direction: column;
  }
  #MainDiv.bs-sd-sayfa #bsSdForm .bs-sd-dugmeler .button-2x {
    width: 100%;
  }
}