/* =========================================================
   RITMA — Depo & Stok Yönetimi sayfası
   Ortak: assets/css/style.css

   Hero'nun ayrışma noktası: Demirbaş sayfasındaki kimlik kartı tek
   varlığın künyesiydi. Burada bir kalemin depolara DAĞILIMI (çubuklar)
   ve o dağılımı oluşturan HAREKETLER (koşan bakiye) var — "ne kadar"
   değil, "ne kadar, nerede ve neden".

   Hareket satırlarındaki Oto / Elle rozeti sayfanın ana ayrımını daha
   hero'da açıyor.
   ========================================================= */

/* =================== HERO =================== */
.dp-hero {
  position: relative;
  background: var(--bg-soft);
  min-height: 760px;
  padding: 0;
  overflow: hidden;
  display: flex;
  align-items: center
}

.hero-grid {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 760px;
  display: grid;
  grid-template-columns: minmax(0, 500px) minmax(0, 1fr);
  gap: 84px;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 40px
}

@media (min-width:1440px) {
  .hero-grid {
    gap: 96px
  }
}

@media (min-width:1680px) {
  .hero-grid {
    gap: 108px
  }
}

.hv-blob {
  position: absolute;
  top: -84px;
  right: -96px;
  width: 520px;
  height: 520px;
  border-radius: 52% 48% 56% 44% / 44% 52% 48% 56%;
  background: radial-gradient(circle closest-side at 50% 48%, rgba(244, 71, 11, .20), rgba(244, 71, 11, .07) 52%, rgba(255, 183, 128, .03) 74%, transparent 100%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0
}

.hero-copy {
  max-width: 620px;
  min-width: 0
}

.dp-hero h1 {
  margin-top: 0;
  text-wrap: balance;
  font-size: clamp(46px, 4.8vw, 64px);
  font-weight: 800;
  line-height: 1.05;
  color: var(--ink)
}

.dp-hero h1 .accent {
  color: var(--orange)
}

.dp-hero .lede {
  margin: 26px 0 0;
  max-width: 48ch;
  text-wrap: pretty;
  font-size: 18px;
  line-height: 1.66;
  color: var(--gray)
}

.dp-hero .lede b {
  color: var(--ink);
  font-weight: 750
}

.hero-actions {
  display: flex;
  gap: 16px;
  margin-top: 32px;
  flex-wrap: wrap
}

.hero-fine {
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 650;
  color: var(--gray-light)
}

.hero-fine svg {
  width: 19px;
  height: 19px;
  color: var(--deep);
  flex-shrink: 0
}

.hero-visual {
  position: relative;
  min-width: 0;
  z-index: 1
}

/* =================== STOK KARTI =================== */
.scard {
  border: 1px solid var(--border);
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--sh-lg);
  overflow: hidden
}

.sc-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 26px 20px;
  border-bottom: 1px solid var(--border)
}

.sc-kod {
  display: block;
  font-size: 11.5px;
  font-weight: 850;
  letter-spacing: .1em;
  color: var(--orange);
  font-variant-numeric: tabular-nums
}

.sc-ad {
  display: block;
  margin-top: 9px;
  font-size: 19px;
  font-weight: 850;
  letter-spacing: -.008em;
  color: var(--ink)
}

.sc-tur {
  display: block;
  margin-top: 5px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--gray-light)
}

.sc-toplam {
  text-align: right;
  flex-shrink: 0
}

.sc-toplam b {
  display: block;
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.014em;
  color: var(--ink);
  font-variant-numeric: tabular-nums
}

.sc-toplam span {
  display: block;
  margin-top: 6px;
  font-size: 11.5px;
  font-weight: 750;
  color: var(--gray-light)
}

/* --- depo dağılımı --- */
.sc-depo {
  padding: 20px 26px 22px;
  border-bottom: 1px solid var(--border)
}

.sd-baslik {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px
}

.sd-baslik span {
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--gray-light)
}

.sc-kritik {
  font-style: normal;
  border-radius: 7px;
  background: var(--deep-soft);
  padding: 4px 9px;
  font-size: 11.5px;
  font-weight: 850;
  color: var(--deep);
  font-variant-numeric: tabular-nums
}

.sd-row {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) 52px;
  gap: 14px;
  align-items: center;
  padding: 6px 0
}

.sd-ad {
  font-size: 12.5px;
  font-weight: 750;
  color: var(--gray);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.sd-track {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: var(--bg-gray);
  overflow: hidden
}

/* renk farkı derinlikten geliyor, parlaklıktan değil */
.sd-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--w);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--deep) 0, var(--deep-2) 100%)
}

.sd-adet {
  font-size: 13px;
  font-weight: 850;
  color: var(--ink);
  text-align: right;
  font-variant-numeric: tabular-nums
}

/* --- hareket defteri --- */
.sc-hareket {
  padding: 18px 26px 22px;
  background: var(--bg-soft)
}

.sh-baslik {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px
}

.sh-baslik span,
.sh-baslik em {
  font-style: normal;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--gray-light)
}

.sh-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto 54px 58px;
  gap: 10px;
  align-items: center;
  padding: 8px 0
}

.sh-row+.sh-row {
  border-top: 1px solid var(--border)
}

.sh-tarih {
  font-size: 11.5px;
  font-weight: 750;
  color: var(--gray-light);
  font-variant-numeric: tabular-nums
}

.sh-belge {
  min-width: 0
}

.sh-belge b {
  display: block;
  font-size: 12px;
  font-weight: 850;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.sh-belge em {
  display: block;
  margin-top: 3px;
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  color: var(--gray-light)
}

/* sayfanın ana ayrımı: hareket kendiliğinden mi oluştu, elle mi */
.sh-kaynak {
  border-radius: 6px;
  padding: 3px 7px;
  font-size: 10.5px;
  font-weight: 850;
  letter-spacing: .04em;
  white-space: nowrap
}

.sh-kaynak.is-oto {
  background: var(--deep);
  color: #fff
}

.sh-kaynak.is-elle {
  background: #fff;
  border: 1px solid var(--border);
  color: var(--gray)
}

.sh-miktar {
  font-size: 13px;
  font-weight: 900;
  text-align: right;
  font-variant-numeric: tabular-nums
}

.sh-miktar.is-giris {
  color: var(--deep)
}

.sh-miktar.is-cikis {
  color: var(--orange)
}

.sh-bakiye {
  font-size: 12.5px;
  font-weight: 800;
  text-align: right;
  color: var(--gray);
  font-variant-numeric: tabular-nums
}

/* =================== HERO FİGÜRÜ (K11) =================== */
.has-person {
  position: relative;
  overflow: hidden
}

.hero-person-layer,
.sec-person-layer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  pointer-events: none
}

.hero-person-layer>.wrap,
.sec-person-layer>.wrap {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end
}

.hero-person,
.sec-person {
  height: clamp(360px, 29vw, 450px);
  margin-right: clamp(-150px, -7.5vw, -56px)
}

.hero-person {
  height: clamp(430px, 44vw, 600px);
  margin-right: clamp(40px, 12vw, 210px)
}

.dp-kr .sec-person {
  height: clamp(500px, 40vw, 600px);
  margin-right: clamp(-24px, 3vw, 48px)
}

.hero-person>img,
.sec-person>img {
  display: block;
  width: auto;
  height: 100%
}

.ph-fig {
  height: 100%;
  width: clamp(240px, 20vw, 310px);
  border: 1px solid var(--orange-border);
  border-radius: 18px 18px 0 0;
  background: rgba(255, 255, 255, .78);
  padding: 22px 20px;
  display: grid;
  align-content: center;
  gap: 9px;
  text-align: center
}

.ph-fig b {
  font-size: 12.5px;
  font-weight: 850;
  color: var(--orange)
}

.ph-fig span {
  font-size: 12px;
  line-height: 1.6;
  font-weight: 650;
  color: var(--gray)
}

.ph-fig span b {
  font-weight: 850;
  color: var(--orange)
}

.ph-fig code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 10px;
  color: var(--gray-light);
  word-break: break-all
}

/* =================== KIRILIMLAR =================== */
@media (max-width:1080px) {
  .dp-hero {
    display: block;
    min-height: 0;
    padding: 52px 0
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 48px;
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0
  }

  .hero-copy {
    max-width: none
  }

  .hero-visual {
    max-width: 560px;
    margin: 0 auto;
    width: 100%
  }

  .hero-person {
    height: clamp(340px, 44vw, 430px);
    margin-right: 0
  }
}

@media (max-width:640px) {

  .sc-top,
  .sc-depo,
  .sc-hareket {
    padding-left: 20px;
    padding-right: 20px
  }

  .sc-toplam b {
    font-size: 25px
  }

  .sd-row {
    grid-template-columns: 96px minmax(0, 1fr) 46px;
    gap: 10px
  }

  .sh-row {
    grid-template-columns: 38px minmax(0, 1fr) auto 48px;
    row-gap: 2px
  }

  .sh-bakiye {
    grid-column: 4;
    grid-row: 2
  }
}

/* =========================================================
   BÖLÜM KABUĞU
   Stok hareketi soft · depo transfer beyaz · kritik deep · lot beyaz
   ========================================================= */
.sec-head {
  max-width: 780px
}

.sec-head .eyebrow {
  display: block;
  margin-bottom: 16px
}

.sec-center {
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
  text-align: center
}

.dp-tf,
.dp-lot {
  background: #fff
}

.dp-ss,
.dp-cta {
  background: var(--bg-soft)
}

/* =========================================================
   02 · STOK HAREKETİ — iki senaryo şeridi
   Sayfanın ana bilgisi bu. Metinle anlatmak yerine aynı üç durağı iki
   kez çizip stokun hangi adımda düştüğünü işaretlemek, farkı tek
   bakışta gösteriyor.
   ========================================================= */
.ss-list {
  margin-top: 54px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px
}

.ss {
  border-radius: 22px;
  background: var(--bg-soft);
  padding: 30px 34px 34px
}

.ss-head b {
  display: block;
  font-size: 19px;
  font-weight: 850;
  letter-spacing: -.008em;
  color: var(--ink)
}

.ss-head b::before {
  content: '';
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 10px;
  vertical-align: 1px
}

.ss.is-oto .ss-head b::before {
  background: var(--deep)
}

.ss.is-elle .ss-head b::before {
  background: var(--orange)
}

.ss-head span {
  display: block;
  margin-top: 9px;
  max-width: 62ch;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--gray);
  text-wrap: pretty
}

/* üç durak ve aralarındaki hat */
.ss-hat {
  position: relative;
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr))
}

.ss-hat::before {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  top: 7px;
  height: 2px;
  background: var(--border)
}

.ss-durak {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center
}

.ss-nokta {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--border)
}

.ss-ad {
  font-size: 14px;
  font-weight: 800;
  color: var(--gray-light)
}

.ss-durak.is-dusen .ss-ad {
  color: var(--ink)
}

.ss.is-oto .ss-durak.is-dusen .ss-nokta {
  background: var(--deep);
  border-color: var(--deep);
  box-shadow: 0 0 0 5px rgba(4, 39, 41, .1)
}

.ss.is-elle .ss-durak.is-dusen .ss-nokta {
  background: var(--orange);
  border-color: var(--orange);
  box-shadow: 0 0 0 5px rgba(244, 71, 11, .12)
}

.ss-rozet {
  border-radius: 7px;
  padding: 5px 10px;
  font-size: 11.5px;
  font-weight: 850;
  white-space: nowrap
}

.ss.is-oto .ss-rozet {
  background: var(--deep);
  color: #fff
}

.ss.is-elle .ss-rozet {
  background: var(--orange);
  color: #fff
}

.ss-not {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 30px;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.6;
  color: var(--gray)
}

.ss-not svg {
  width: 21px;
  height: 21px;
  color: var(--orange);
  flex-shrink: 0
}

/* =========================================================
   03 · TRANSFER — fiş ekranı
   ========================================================= */
.tf-grid {
  display: grid;
  grid-template-columns: minmax(0, 470px) minmax(0, 1fr);
  gap: 76px;
  align-items: center
}

.tf-copy,
.tf-visual {
  min-width: 0
}

.tf-notlar {
  margin-top: 38px;
  display: grid;
  gap: 22px
}

.tf-not {
  display: flex;
  align-items: flex-start;
  gap: 15px
}

.tf-not svg {
  width: 24px;
  height: 24px;
  color: var(--orange);
  flex-shrink: 0;
  margin-top: 2px
}

.tf-not b {
  display: block;
  font-size: 15.5px;
  font-weight: 800;
  color: var(--ink)
}

.tf-not span {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--gray)
}

.tf-fis {
  border: 1px solid var(--border);
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--sh-lg);
  overflow: hidden
}

.tf-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 26px;
  border-bottom: 1px solid var(--border)
}

.tf-no {
  font-size: 13px;
  font-weight: 850;
  letter-spacing: .06em;
  color: var(--ink);
  font-variant-numeric: tabular-nums
}

.tf-durum {
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  padding: 6px 13px;
  font-size: 11.5px;
  font-weight: 850
}

.tf-yon {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 24px 26px;
  border-bottom: 1px solid var(--border)
}

.tf-depo span {
  display: block;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--gray-light)
}

.tf-depo b {
  display: block;
  margin-top: 8px;
  font-size: 15.5px;
  font-weight: 850;
  color: var(--ink)
}

.tf-depo em {
  display: block;
  margin-top: 6px;
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-light)
}

.tf-depo.is-hedef em {
  color: var(--orange)
}

.tf-ok svg {
  width: 26px;
  height: 26px;
  color: var(--deep)
}

.tf-kalem {
  padding: 20px 26px 24px;
  background: var(--bg-soft)
}

.tf-kalem-baslik {
  display: block;
  margin-bottom: 12px;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--gray-light)
}

.tf-row {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 8px 0
}

.tf-row+.tf-row {
  border-top: 1px solid var(--border)
}

.tf-kod {
  font-size: 11.5px;
  font-weight: 850;
  color: var(--deep);
  font-variant-numeric: tabular-nums
}

.tf-ad {
  font-size: 13px;
  font-weight: 650;
  color: var(--gray);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.tf-adet {
  font-size: 12.5px;
  font-weight: 850;
  color: var(--ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums
}

/* =========================================================
   04 · KRİTİK SEVİYE — deep zemin
   ========================================================= */
.dp-kr {
  background: var(--deep);
  padding-bottom: 0
}

.kr-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: 60px;
  align-items: end;
  padding-bottom: 110px
}

.kr-copy {
  min-width: 0
}

.dp-kr .sec-h {
  color: #fff
}

.dp-kr .eyebrow {
  color: var(--orange)
}

.dp-kr .sec-p {
  color: rgba(255, 255, 255, .66)
}

.kr-panel {
  margin-top: 40px;
  max-width: 660px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .05);
  padding: 22px 26px 20px
}

.kr-baslik {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px
}

.kr-baslik span,
.kr-baslik em {
  font-style: normal;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45)
}

.kr-row {
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr) 90px 74px 62px;
  gap: 14px;
  align-items: center;
  padding: 11px 0
}

.kr-row+.kr-row {
  border-top: 1px solid rgba(255, 255, 255, .1)
}

.kr-kod {
  font-size: 11.5px;
  font-weight: 850;
  color: rgba(255, 255, 255, .55);
  font-variant-numeric: tabular-nums
}

.kr-ad {
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.kr-track {
  position: relative;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  overflow: hidden
}

.kr-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--w);
  border-radius: 999px;
  background: var(--orange)
}

.kr-say {
  font-size: 12.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, .55);
  text-align: right;
  font-variant-numeric: tabular-nums
}

.kr-say b {
  font-weight: 900;
  color: #fff
}

.kr-durum {
  font-size: 11px;
  font-weight: 850;
  text-align: right;
  white-space: nowrap
}

.kr-durum.is-kritik {
  color: var(--orange)
}

.kr-durum.is-sinir {
  color: rgba(255, 255, 255, .6)
}

.kr-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--orange);
  text-decoration: none
}

.kr-link .arrow {
  width: 16px;
  height: 16px;
  transition: transform .24s
}

.kr-link:hover .arrow {
  transform: translateX(4px)
}

.kr-space {
  min-height: 380px
}

/* =========================================================
   05 · LOT — parti şeridi
   ========================================================= */
.lot-list {
  margin-top: 54px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px
}

.lot {
  border: 1px solid var(--border);
  border-radius: 20px;
  background: #fff;
  padding: 24px 26px 22px
}

.lot-no {
  display: block;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .04em;
  color: var(--deep);
  font-variant-numeric: tabular-nums
}

.lot-satir {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0
}

.lot-satir+.lot-satir {
  border-top: 1px solid var(--border)
}

.lot-satir:first-of-type {
  margin-top: 16px;
  border-top: 1px solid var(--border)
}

.lot-satir span {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--gray-light)
}

.lot-satir b {
  font-size: 13.5px;
  font-weight: 850;
  color: var(--ink);
  text-align: right;
  font-variant-numeric: tabular-nums
}

.lot-durum {
  display: inline-block;
  margin-top: 16px;
  border-radius: 7px;
  background: var(--deep-soft);
  padding: 5px 10px;
  font-size: 11.5px;
  font-weight: 850;
  color: var(--deep)
}

/* tükenmiş parti geri çekiliyor: listede kalıyor ama öne çıkmıyor */
.lot.is-bitti {
  background: var(--bg-soft)
}

.lot.is-bitti .lot-no,
.lot.is-bitti .lot-satir b {
  color: var(--gray-light)
}

.lot.is-bitti .lot-durum {
  background: var(--bg-gray);
  color: var(--gray-light)
}

/* =========================================================
   06 · KİMLER KULLANIYOR + CTA
   Diğer çözüm sayfalarıyla birebir aynı; sayfalar arasında davranış
   farkı olmasın diye kopyalandı.
   ========================================================= */
.sector-list {
  margin: 28px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px 12px;
  flex-wrap: wrap
}

.sector-list span {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  padding: 9px 15px;
  font-size: 14px;
  font-weight: 760;
  line-height: 1;
  color: var(--gray);
  box-shadow: 0 14px 36px -32px rgba(20, 24, 31, .25)
}

.logo-marquee {
  width: 100%;
  max-width: 100%;
  margin: 72px 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)
}

.logo-track {
  display: flex;
  align-items: center;
  width: max-content;
  will-change: transform
}

.logo-set {
  display: flex;
  align-items: center;
  gap: 78px;
  flex: 0 0 auto;
  padding-right: 78px
}

.client-logo {
  flex-shrink: 0;
  opacity: .72;
  filter: grayscale(1);
  transition: opacity .2s, filter .2s
}

.client-logo:hover {
  opacity: 1;
  filter: grayscale(0)
}

.client-logo img {
  display: block;
  max-height: 46px;
  max-width: 190px;
  width: auto;
  height: auto;
  object-fit: contain
}

.testi-wrap {
  max-width: 820px;
  margin: 0 auto
}

.testi-stage {
  display: grid
}

.testi {
  grid-area: 1/1;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 26px;
  background: #fff;
  padding: 34px 36px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .55s ease, visibility .55s
}

.testi.is-on {
  opacity: 1;
  visibility: visible
}

.testi p {
  font-size: 20px;
  line-height: 1.55;
  font-weight: 650;
  color: var(--ink);
  letter-spacing: -.008em
}

.testi .tq {
  width: 30px;
  height: 30px;
  color: var(--deep);
  margin-bottom: 16px;
  display: block
}

.testi-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap
}

.testi-person {
  display: flex;
  align-items: center;
  gap: 13px
}

.testi-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg-gray)
}

.testi-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.testi-person b {
  display: block;
  font-size: 15.5px;
  font-weight: 850;
  color: var(--ink);
  line-height: 1.2
}

.testi-person>span>span {
  display: block;
  font-size: 13px;
  color: var(--gray);
  margin-top: 3px
}

.testi-logo img {
  display: block;
  max-height: 44px;
  max-width: 172px;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 1;
  filter: none
}

.testi-dots {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-top: 22px
}

.testi-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--border);
  cursor: pointer;
  transition: background .2s, width .2s
}

.testi-dot:hover {
  background-color: var(--gray-light)}

.testi-dot.is-on {
  width: 24px;
  border-radius: 999px;
  background: var(--deep)
}

.testi-dot:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px
}

.cta-band {
  margin-top: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: #fff;
  padding: 30px 34px
}

.cta-band b {
  max-width: 580px;
  font-size: 22px;
  font-weight: 850;
  line-height: 1.25;
  letter-spacing: -.008em;
  color: var(--ink)
}

.cta-band span {
  display: block;
  margin-top: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--gray)
}

.cta-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap
}

/* =========================================================
   KIRILIMLAR
   ========================================================= */
@media (max-width:1080px) {

  .tf-grid,
  .kr-grid {
    grid-template-columns: 1fr;
    gap: 48px
  }

  .kr-space {
    display: none
  }

  .kr-grid {
    padding-bottom: 400px
  }

  .lot-list {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .sec-person {
    height: clamp(360px, 56vw, 470px);
    margin-right: 0
  }
}

@media (max-width:760px) {
  .ss {
    padding: 24px 22px 28px
  }

  .ss-rozet {
    font-size: 10.5px;
    padding: 4px 7px;
    white-space: normal
  }

  .tf-yon {
    grid-template-columns: 1fr;
    justify-items: start
  }

  .tf-ok svg {
    transform: rotate(90deg)
  }

  .tf-row {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 2px
  }

  .tf-kod {
    grid-column: 1 / -1
  }

  .kr-row {
    grid-template-columns: minmax(0, 1fr) 74px 62px;
    row-gap: 6px
  }

  .kr-kod {
    grid-column: 1 / -1
  }

  .kr-track {
    grid-column: 1 / -1
  }

  .lot-list {
    grid-template-columns: 1fr
  }
}

/* yer tutucu koyu zeminde: açık zemin sürümünün tersi */
.dp-kr .ph-fig {
  border-color: rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .05)
}

.dp-kr .ph-fig span {
  color: rgba(255, 255, 255, .62)
}

.dp-kr .ph-fig code {
  color: rgba(255, 255, 255, .42)
}

/* hareket miktari hizasi */
.is-cikis {
  font-variant-numeric: tabular-nums
}

/* Yorum yüksekliği içeriğinden geliyor: gizli yorumlar akıştan çıkıyor,
   görünen yorum kendi boyunu alıyor. Üst üste bindirmede kutu en uzun
   yoruma göre boyutlanıyor, kısa yorumun altında boşluk kalıyordu. */
.testi-stage {
  display: block
}

.testi-stage .testi {
  display: none;
  opacity: 1;
  visibility: visible
}

.testi-stage .testi.is-on {
  display: block;
  animation: testiGir .4s ease both
}

@keyframes testiGir {
  from {
    opacity: 0;
    transform: translateY(6px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@media (prefers-reduced-motion: reduce) {
  .testi-stage .testi.is-on {
    animation: none
  }
}

/* Sekmeye tıklandığında bölüm sabit menünün altında kalmasın:
   menü 80 piksel, üstüne biraz nefes payı. */
section[id] {
  scroll-margin-top: 104px
}

/* Gelişmiş depo operasyonları */
.dp-hero-label { display:block; margin-bottom:20px; color:var(--deep); font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.subnav-wrap .subnav-in { gap:24px; }
.subnav-wrap .subnav { min-width:0; }
.subnav-wrap .subnav a { flex-shrink:0; }
.dp-ops { background:#fff; padding:100px 0; }
.dp-ops-soft { background:var(--bg-soft); }
.dp-ops-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:center; gap:80px; }
.dp-ops-copy { min-width:0; }
.dp-ops-copy > .eyebrow { display:block; margin-bottom:20px; color:var(--orange); font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.dp-ops .sec-h { text-wrap:balance; }
.dp-ops .sec-p { max-width:54ch; }
.dp-flow-demo { border:1px solid var(--border); border-radius:24px; background:#fff; box-shadow:var(--sh-sm); overflow:hidden; }
.dp-flow-options { display:flex; gap:8px; flex-wrap:wrap; padding:22px 26px; border-bottom:1px solid var(--border); }
.dp-flow-options button { padding:11px 18px; border:1px solid var(--border); border-radius:9px; background:#fff; color:var(--gray); font:inherit; font-size:13px; font-weight:750; cursor:pointer; transition:background .2s,color .2s; }
.dp-flow-options button:hover { background:var(--deep-soft); color:var(--deep); }
.dp-flow-options button[aria-pressed="true"] { background:var(--deep); border-color:var(--deep); color:#fff; }
.dp-flow-options button:focus-visible, .dp-text-link:focus-visible { outline:3px solid var(--orange); outline-offset:4px; }
.dp-flow-steps { display:flex; list-style:none; margin:0; padding:36px 28px 22px; gap:18px; }
.dp-flow-steps li { flex:1; position:relative; min-width:0; display:flex; flex-direction:column; gap:12px; padding:18px 12px; border:1px solid var(--border); border-radius:12px; background:var(--bg-soft); text-align:center; }
.dp-flow-steps li + li::before { content:"→"; position:absolute; left:-17px; top:43%; color:var(--gray-light); }
.dp-flow-steps li > span { font-size:11px; letter-spacing:.1em; color:var(--gray-light); }
.dp-flow-steps li > b { font-size:14px; color:var(--ink); }
.dp-flow-steps li.is-result { background:var(--deep-soft); border-color:#c6dcdc; }
.dp-flow-steps li.is-result > b { color:var(--deep); }
.dp-flow-caption { margin:0; padding:0 28px 28px; color:var(--gray); font-size:14px; line-height:1.7; }
.dp-example-note { padding:14px 24px; border-top:1px solid var(--border); color:var(--gray-light); font-size:11px; line-height:1.6; }
.dp-panel { min-width:0; background:#fff; border:1px solid var(--border); border-radius:22px; box-shadow:var(--sh-lg); overflow:hidden; }
.dp-panel-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:20px 24px; border-bottom:1px solid var(--border); }
.dp-panel-head > span:first-child { font-size:13px; color:var(--ink); font-weight:800; }
.dp-tag { display:inline-block; flex-shrink:0; padding:5px 9px; border-radius:6px; background:var(--deep-soft); color:var(--deep); font-size:10px; font-weight:750; }
.dp-tag.is-warning { background:#fff1e6; color:#9b430e; }
.dp-week { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; padding:24px; }
.dp-week > div { display:flex; flex-direction:column; gap:8px; padding:15px 5px; background:var(--bg-soft); border-radius:10px; text-align:center; color:var(--gray); }
.dp-week span, .dp-week small { font-size:11px; }
.dp-week b { font-size:26px; color:var(--ink); }
.dp-week > .is-active { background:var(--deep); color:#d5e6e6; }
.dp-week > .is-active b { color:#fff; }
.dp-panel-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 24px; padding:18px 0; border-top:1px solid var(--border); }
.dp-panel-row b { display:block; font-size:13px; color:var(--ink); }
.dp-panel-row small { display:block; margin-top:6px; color:var(--gray-light); font-size:12px; }
.dp-panel-foot { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; padding:18px 24px; background:var(--bg-soft); color:var(--gray); font-size:11px; }
.dp-panel-foot b { color:var(--deep); font-size:11px; }
.dp-ops-dark { background:var(--deep); }
.dp-ops-dark .sec-h { color:#fff; }
.dp-ops-dark .sec-p { color:#bed1d2; }
.dp-ops-dark .dp-ops-copy > .eyebrow { color:#ffad85; }
.dp-scan-code { display:flex; align-items:center; gap:16px; margin:24px; padding:18px; background:var(--deep-soft); border:1px solid #c6dcdc; border-radius:12px; }
.dp-barcode { flex-shrink:0; width:58px; height:36px; background:repeating-linear-gradient(90deg,var(--deep) 0 2px,transparent 2px 4px,var(--deep) 4px 5px,transparent 5px 8px,var(--deep) 8px 11px,transparent 11px 14px); }
.dp-scan-code small { display:block; color:var(--gray); font-size:11px; }
.dp-scan-code b { display:block; margin-top:6px; font-size:15px; color:var(--deep); letter-spacing:.04em; }
.dp-scan-check { margin-left:auto; color:var(--deep); font-size:24px; }
.dp-product-line { padding:0 24px; }
.dp-product-line b { display:block; font-size:18px; color:var(--ink); }
.dp-product-line > span { display:block; margin-top:9px; font-size:12px; color:var(--gray); }
.dp-progress { height:7px; border-radius:10px; background:#e8edef; overflow:hidden; }
.dp-progress > span { display:block; width:var(--dp-progress); height:100%; background:var(--orange); border-radius:inherit; }
.dp-pick-panel > .dp-progress { margin:18px 24px 24px; }
.dp-location { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:24px; border:1px solid var(--border); border-radius:12px; }
.dp-location > div { padding:15px 12px; text-align:center; }
.dp-location > div + div { border-left:1px solid var(--border); }
.dp-location small { display:block; color:var(--gray-light); font-size:11px; }
.dp-location b { display:block; color:var(--deep); font-size:24px; margin-top:7px; }

.dp-package-tree { padding:24px; }
.dp-package-main { display:flex; align-items:center; gap:16px; padding:18px; border:1px solid #c6dcdc; border-radius:12px; background:var(--deep-soft); }
.dp-package-main svg { width:48px; height:48px; flex-shrink:0; color:var(--deep); }
.dp-package-main small, .dp-package-main b { display:block; }
.dp-package-main small { color:var(--gray); font-size:11px; margin-bottom:7px; }
.dp-package-main b { color:var(--deep); font-size:16px; }
.dp-package-children { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:16px 0 0 24px; padding-left:18px; border-left:2px solid #c6dcdc; }
.dp-package-children > div { padding:15px; border:1px solid var(--border); border-radius:10px; }
.dp-package-children span { display:block; margin-bottom:12px; color:var(--orange); font-size:11px; font-weight:800; }
.dp-package-children b { display:block; color:var(--ink); font-size:13px; }
.dp-package-children small { display:block; margin-top:6px; color:var(--gray); font-size:11px; line-height:1.5; }
.dp-package-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--border); }
.dp-package-metrics > div { padding:18px 12px; text-align:center; }
.dp-package-metrics > div + div { border-left:1px solid var(--border); }
.dp-package-metrics small { display:block; font-size:10px; color:var(--gray-light); }
.dp-package-metrics b { display:block; margin-top:7px; color:var(--deep); font-size:23px; }
.dp-package-metrics em { font-size:11px; font-style:normal; font-weight:600; }
.dp-label-ready { color:var(--deep); font-weight:750; }
.dp-vehicle { display:flex; align-items:center; gap:20px; padding:24px; }
.dp-vehicle svg { width:74px; height:48px; color:var(--deep); flex-shrink:0; }
.dp-vehicle small { display:block; color:var(--gray); font-size:11px; }
.dp-vehicle b { display:block; color:var(--deep); font-size:23px; margin-top:7px; letter-spacing:.03em; }
.dp-load-meter { margin:0 24px 24px; }
.dp-load-meter > div:first-child { display:flex; justify-content:space-between; gap:12px; margin-bottom:10px; font-size:12px; color:var(--gray); }
.dp-load-meter b { color:var(--ink); }
.dp-load-meter .dp-progress > span { background:var(--deep); }
.dp-receipt-title { padding:24px; }
.dp-receipt-title small { display:block; color:var(--gray); font-size:11px; margin-bottom:7px; }
.dp-receipt-title b { color:var(--ink); font-size:18px; }
.dp-receipt-split { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:0 24px 24px; }
.dp-receipt-split > div { padding:22px 16px; border-radius:12px; background:var(--deep-soft); }
.dp-receipt-split > div + div { background:#fff1e6; }
.dp-receipt-split span { color:var(--gray); font-size:11px; }
.dp-receipt-split b { display:block; color:var(--deep); font-size:40px; margin:8px 0; line-height:1.2; }
.dp-receipt-split b small { font-size:12px; font-weight:600; }
.dp-receipt-split em { display:block; color:var(--gray); font-size:10px; font-style:normal; }
.dp-receipt-steps { list-style:none; display:flex; flex-wrap:wrap; gap:10px 16px; margin:0 24px 24px; padding:0; }
.dp-receipt-steps li { color:var(--gray); font-size:11px; }
.dp-receipt-steps span { color:var(--orange); font-weight:800; margin-right:6px; }
.dp-text-link { display:inline-flex; gap:12px; margin-top:22px; font-size:14px; font-weight:750; color:var(--deep); text-decoration:none; }
.dp-text-link:hover { color:var(--orange); }
.dp-trace-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:32px; }
.dp-trace-grid article { padding:26px; border:1px solid var(--border); border-radius:16px; background:#fff; }
.dp-trace-label { color:var(--orange); font-size:11px; font-weight:800; letter-spacing:.04em; }
.dp-trace-grid h3 { margin:14px 0 12px; color:var(--ink); font-size:20px; line-height:1.35; }
.dp-trace-grid p { margin:0; color:var(--gray); font-size:14px; line-height:1.7; }
@media (max-width:1080px) {
  .dp-ops-grid { gap:40px; }
  .subnav-wrap .subnav-brand { display:none; }
}
@media (max-width:900px) {
  .dp-ops { padding:76px 0; }
  .dp-ops-grid { grid-template-columns:1fr; gap:36px; }
  .dp-ops-grid .dp-ops-copy { grid-row:1; }
  .dp-ops-grid .dp-panel { width:100%; max-width:580px; justify-self:center; }
  .dp-trace-grid { grid-template-columns:1fr; gap:16px; }
  .dp-flow-steps { flex-wrap:wrap; }
  .dp-flow-steps li { flex:1 0 calc(33.333% - 18px); }
  .dp-flow-steps li:nth-child(4)::before { content:none; }
}
@media (max-width:540px) {
  .dp-ops { padding:60px 0; }
  .dp-hero-label { font-size:10px; }
  .dp-flow-options { padding:16px; gap:7px; }
  .dp-flow-options button { flex-grow:1; padding:10px 12px; font-size:11px; }
  .dp-flow-steps { padding:24px 16px 18px; gap:14px; }
  .dp-flow-steps li { flex-basis:calc(50% - 14px); padding:14px 8px; }
  .dp-flow-steps li > b { font-size:12px; }
  .dp-flow-steps li + li::before { content:none; }
  .dp-flow-steps li:nth-child(even)::before { content:"→"; left:-13px; }
  .dp-flow-caption { padding:0 16px 22px; font-size:13px; }
  .dp-panel-head { padding:18px; flex-wrap:wrap; }
  .dp-panel-head > span:first-child { font-size:12px; }
  .dp-week { padding:18px; gap:5px; }
  .dp-week > div { padding:12px 3px; }
  .dp-week b { font-size:23px; }
  .dp-week small { font-size:9px; }
  .dp-panel-row { margin:0 18px; }
  .dp-panel-row small { font-size:11px; }
  .dp-panel-foot, .dp-example-note { padding-left:18px; padding-right:18px; }
  .dp-scan-code { margin:18px; padding:14px; gap:10px; }
  .dp-barcode { width:42px; }
  .dp-scan-code b { font-size:13px; }
  .dp-product-line { padding:0 18px; }
  .dp-package-tree { padding:18px; }
  .dp-package-children { margin-left:8px; padding-left:12px; gap:8px; }
  .dp-package-children > div { padding:12px 10px; }
  .dp-receipt-title { padding:18px; }
  .dp-receipt-split { margin:0 18px 20px; gap:8px; }
  .dp-receipt-split > div { padding:18px 12px; }
  .dp-receipt-split b { font-size:34px; }
}


/* Operasyon Akışı tanıtımında bağımsız aşama seçimleri */
.dp-flow-settings { padding:22px 26px; border-bottom:1px solid var(--border); }
.dp-flow-settings-head { display:flex; align-items:baseline; flex-wrap:wrap; gap:8px 18px; margin-bottom:16px; }
.dp-flow-settings-head b { color:var(--ink); font-size:14px; }
.dp-flow-settings-head > span { color:var(--gray); font-size:12px; }
.dp-flow-switches { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.dp-flow-switches button { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px; border:1px solid var(--border); border-radius:10px; background:var(--bg-soft); color:var(--ink); font:inherit; font-size:12px; font-weight:700; cursor:pointer; }
.dp-flow-switches i { position:relative; display:block; flex-shrink:0; width:32px; height:19px; background:#cbd3d3; border-radius:20px; }
.dp-flow-switches i::after { content:""; position:absolute; top:3px; left:3px; width:13px; height:13px; background:#fff; border-radius:50%; }
.dp-flow-switches button[aria-checked="true"] i { background:var(--deep); }
.dp-flow-switches button[aria-checked="true"] i::after { left:16px; }
.dp-flow-switches button:focus-visible, .dp-flow-verify select:focus-visible { outline:3px solid var(--orange); outline-offset:3px; }
.dp-flow-verify { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-top:18px; }
.dp-flow-verify label { font-size:12px; color:var(--gray); }
.dp-flow-verify select { max-width:100%; padding:8px 30px 8px 12px; border:1px solid var(--border); border-radius:7px; background:#fff; color:var(--deep); font:inherit; font-size:12px; }
@media (max-width:760px) { .dp-flow-switches { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:540px) { .dp-flow-settings { padding:18px 16px; } }

/* Bölüm menüsü mobilde de kullanılabilir. */
.subnav-wrap .subnav { display:flex; justify-content:flex-start; }
section[id], header[id] { scroll-margin-top:174px; }
@media (max-width:760px) {
  .subnav-wrap .subnav-in { padding-top:0; padding-bottom:0; }
  .subnav-wrap .subnav { padding:10px 0; }
  .subnav-wrap .subnav a { font-size:12px; padding:8px 12px; }
}

/* Bölüm gezintisi: tüm başlıklar iki açılır grupta, yatay kaydırma yok. */
.subnav-wrap .dp-section-nav { overflow:visible; scrollbar-width:none; align-items:center; justify-content:flex-end; }
.dp-section-group { position:relative; }
.dp-section-group > summary {
  display:flex; align-items:center; justify-content:center; gap:8px; padding:9px 16px;
  border-radius:100px; list-style:none; cursor:pointer; color:var(--gray);
  font-size:14px; font-weight:600; white-space:nowrap;
}
.dp-section-group > summary::-webkit-details-marker { display:none; }
.dp-section-group > summary:hover { color:var(--ink); background:var(--bg-gray); }
.dp-section-group.is-active > summary { color:#fff; background:var(--ink); }
.dp-section-group > summary:focus-visible, .dp-section-nav a:focus-visible { outline:3px solid var(--orange); outline-offset:3px; }
.dp-section-caret { width:14px; height:14px; flex-shrink:0; transition:transform .15s; }
.dp-section-group[open] .dp-section-caret { transform:rotate(180deg); }
.dp-section-menu {
  position:absolute; top:calc(100% + 12px); left:0; z-index:1; width:230px; padding:8px;
  border:1px solid var(--border); border-radius:14px; background:#fff; box-shadow:var(--sh-lg);
}
.subnav-wrap .dp-section-menu a { display:block; padding:11px 13px; border-radius:8px; font-size:13px; white-space:normal; }
.dp-section-menu a + a { margin-top:2px; }
.dp-ss .ss { background:#fff; border:1px solid var(--border); }
@media (max-width:1080px) {
  .subnav-wrap .dp-section-nav { justify-content:flex-start; }
}
@media (max-width:640px) {
  .subnav-wrap .dp-section-nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
  .subnav-wrap .dp-section-nav > a { text-align:center; font-size:12px; padding:8px 10px; }
  .dp-section-group > summary { font-size:12px; padding:8px 10px; }
  .dp-section-group .dp-section-menu { left:0; width:min(230px,calc(100vw - 40px)); }
  .dp-section-group:nth-child(2) .dp-section-menu { left:auto; right:0; }
}
/* WMS giriş metni, akış örneğinin üzerinde ortalanır. */
#akis .sec-head { max-width:1000px; margin-bottom:40px; }
#akis .sec-p { max-width:72ch; margin-left:auto; margin-right:auto; }
@media (max-width:540px) { #akis .sec-head { margin-bottom:28px; } }
/* Özellik açıklamaları her operasyonun kendi düzenini taşır. */
.dp-plan-points, .dp-pick-points, .dp-pack-points, .dp-load-points, .dp-receive-points { margin-top:30px; }
.dp-plan-points h3, .dp-pack-points h3, .dp-load-points h3, .dp-receive-points h3 {
  margin:0; color:var(--ink); font-size:15.5px; font-weight:800; line-height:1.45;
}
.dp-plan-points p, .dp-pack-points p, .dp-load-points p, .dp-receive-points p {
  margin:7px 0 0; color:var(--gray); font-size:14px; line-height:1.65;
}
.dp-plan-focus { padding:20px 22px; background:#fff; border:1px solid var(--border); border-radius:14px; }
.dp-plan-title { display:flex; align-items:flex-start; gap:13px; }
.dp-plan-title > svg { width:25px; height:25px; margin-top:3px; flex-shrink:0; color:var(--orange); }
.dp-plan-label { display:block; margin-bottom:6px; color:var(--orange); font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.dp-plan-focus > p { margin-left:38px; }
.dp-plan-detail { display:grid; grid-template-columns:100px minmax(0,1fr); gap:18px; padding:18px 2px; border-bottom:1px solid var(--border); align-items:baseline; }
.dp-plan-detail > span { color:var(--deep); font-size:12px; font-weight:800; }
.dp-plan-detail > p { margin:0; }
.dp-pick-guard { display:flex; gap:16px; padding:20px; border:1px solid rgba(255,173,133,.3); border-radius:14px; background:rgba(255,255,255,.045); }
.dp-pick-guard > svg { width:30px; height:30px; color:#ffad85; flex-shrink:0; }
.dp-pick-points h3 { margin:0; color:#fff; font-size:15.5px; font-weight:800; line-height:1.45; }
.dp-pick-points p { margin:8px 0 0; color:#bed1d2; font-size:14px; line-height:1.65; }
.dp-pick-detail { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-top:24px; }
.dp-pick-detail > div + div { padding-left:24px; border-left:1px solid rgba(255,255,255,.16); }
.dp-pick-label { display:block; margin-bottom:10px; color:#ffad85; font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.dp-pack-spec { padding:0 0 22px; border-bottom:1px solid var(--border); }
.dp-pack-units { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.dp-pack-units > span { display:inline-flex; align-items:center; gap:14px; padding:7px 10px; border-radius:6px; background:var(--bg-soft); color:var(--gray); font-size:11px; }
.dp-pack-units b { color:var(--deep); font-size:12px; }
.dp-pack-label-note { display:flex; gap:14px; padding:22px 0; }
.dp-pack-label-note > svg { width:25px; height:25px; margin-top:2px; flex-shrink:0; color:var(--orange); }
.dp-pack-points .dp-pack-capacity { margin:0; padding:14px 16px; background:var(--orange-soft); border-left:3px solid var(--orange); border-radius:0 8px 8px 0; font-size:13px; }
.dp-pack-capacity > span { display:block; margin-bottom:4px; font-weight:800; color:var(--ink); }
.dp-load-modes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.dp-load-modes > div { min-width:0; padding:18px; background:#fff; border:1px solid var(--border); border-radius:12px; }
.dp-load-modes svg { display:block; width:28px; height:28px; margin-bottom:14px; color:var(--orange); }
.dp-load-mode-label { display:block; color:var(--gray-light); font-size:10px; font-weight:800; letter-spacing:.055em; text-transform:uppercase; margin-bottom:10px; }
.dp-load-modes h3 { font-size:15px; }
.dp-load-modes p { font-size:13px; }
.dp-load-ready { display:flex; gap:14px; margin-top:24px; }
.dp-load-ready > svg { margin-top:2px; width:24px; height:24px; flex-shrink:0; color:var(--orange); }
.dp-receive-points { list-style:none; padding:0; }
.dp-receive-points li { display:grid; grid-template-columns:38px minmax(0,1fr); gap:16px; position:relative; padding-bottom:24px; }
.dp-receive-points li:last-child { padding-bottom:0; }
.dp-receive-points li:not(:last-child)::before { content:""; position:absolute; left:18px; top:38px; bottom:0; width:1px; background:var(--border); }
.dp-receive-number { display:flex; align-items:center; justify-content:center; width:38px; height:38px; border:1px solid #c6dcdc; border-radius:50%; background:var(--deep-soft); font-size:11px; font-weight:800; color:var(--deep); }
.dp-receive-points li:last-child .dp-receive-number { background:var(--deep); color:#fff; border-color:var(--deep); }
.dp-receive-points h3 { margin-top:6px; }
/* Daha geniş metin sütunu transfer başlığını iki satırda tutar. */
@media (min-width:1081px) {
  .tf-grid { grid-template-columns:minmax(0,560px) minmax(0,1fr); gap:52px; }
}
@media (max-width:540px) {
  .dp-plan-detail { grid-template-columns:1fr; gap:6px; }
  .dp-plan-focus { padding:18px; }
  .dp-plan-focus > p { margin-left:0; }
  .dp-pick-guard { padding:18px; gap:12px; }
  .dp-pick-detail { grid-template-columns:1fr; gap:20px; }
  .dp-pick-detail > div + div { padding:20px 0 0; border-left:0; border-top:1px solid rgba(255,255,255,.16); }
  .dp-load-modes { grid-template-columns:1fr; }
  .dp-load-modes > div { padding:18px; }
}