/* Foody İmex — bayi paneline özgü sınıflar (sihirbaz, doluluk, teklif listesi, mesajlar). Tema değişkenleri site.css'te.
   Kaynak: Claude Design dışa aktarımı wwwroot/panel.html (#pf-wizard bölümü); satır içi stiller buraya sınıf olarak taşındı.
   Değişken genişlikler (doluluk çubukları) w-0…w-100, palet ızgarası cols-N / rows-N sınıflarıyla çizilir. */

/* ---- Kabuk: koyu üst şerit + sayfa zemini ---------------------------------------------------------------------- */
.pf-page { min-height: 100vh; background: #f1f0ee; }
.pf-topbar { background: var(--ink); color: var(--white); }
.pf-topbar__row { padding: 10px 26px; min-height: 56px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.pf-topbar__logo { background: var(--white); padding: 5px 8px; border-radius: 3px; display: flex; align-items: center; }
.pf-topbar__logo img { height: 30px; width: auto; }
.pf-topbar__label { font-family: var(--font-head); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: #f3f2f2; font-weight: 700; }
.pf-topbar__user { margin-inline-start: auto; display: flex; align-items: center; gap: 12px; }
.pf-topbar__mail { font-size: 13px; color: var(--muted-3); }
.pf-topbar__logout { font-family: var(--font-head); font-weight: 600; font-size: 13px; padding: 8px 16px; background: transparent; border: 1px solid rgba(255, 255, 255, 0.32); border-radius: var(--pill); color: var(--white); }
.pf-topbar__logout:hover { background: rgba(255, 255, 255, 0.14); border-color: var(--white); color: var(--white); }

/* Tasarımda bayi alanının bütün metni büyük harftir (#pf-wizard kuralı). */
.pf-main { max-width: 1360px; margin: 0 auto; padding: 26px 26px 80px; }
.pf-main, .pf-main button, .pf-main input, .pf-main textarea, .pf-main select, .pf-main a { text-transform: uppercase; }
.pf-main ::placeholder { text-transform: uppercase; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }

/* ---- Başlık, dil, gezinti şeridi ------------------------------------------------------------------------------- */
.pf-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; flex-wrap: wrap; margin-bottom: 20px; }
.pf-head__kicker { font-family: var(--font-head); font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--indigo); margin-bottom: 8px; }
.pf-head__title { font-family: var(--font-head); font-weight: 700; font-size: 30px; letter-spacing: -0.02em; margin: 0; }
.pf-langs { display: flex; border: 1px solid rgba(28, 27, 25, 0.18); border-radius: var(--pill); overflow: hidden; background: var(--white); }
.pf-langs__btn { font-family: var(--font-head); font-weight: 700; font-size: 11.5px; letter-spacing: 0.06em; padding: 7px 10px; border: none; cursor: pointer; background: var(--white); color: var(--muted); }
.pf-langs__btn.is-on { background: var(--green); color: var(--white); }

.pf-nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 0 auto 16px; max-width: 1100px; }
.pf-nav__btn { display: flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-head); font-weight: 700; font-size: 12.5px; letter-spacing: 0.04em; padding: 11px 16px; background: var(--white); border: 1px solid rgba(28, 27, 25, 0.2); border-radius: var(--pill); color: var(--ink-2); white-space: nowrap; }
.pf-nav__btn:hover { color: var(--green); border-color: var(--green); }
.pf-nav__btn.is-on, .pf-nav__btn.is-on:hover { background: var(--green); border-color: var(--green); color: var(--white); }
.pf-nav__icon { width: 16px; height: 16px; }
.pf-nav__btn.is-on .pf-nav__icon { filter: brightness(0) invert(1); }
.pf-nav__count { font-feature-settings: 'tnum'; unicode-bidi: isolate; opacity: 0.8; }
.pf-nav__pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--red); flex: none; animation: pfPulse 1s ease-in-out infinite; }
.pf-nav__btn.is-on .pf-nav__pulse { background: var(--white); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5); }
.pf-nav__badge { font-family: var(--font-head); font-weight: 700; font-size: 11px; color: var(--white); background: var(--red); padding: 2px 8px; border-radius: var(--pill); font-feature-settings: 'tnum'; unicode-bidi: isolate; animation: pfPulse 1s ease-in-out infinite; }
@keyframes pfPulse { 0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(208, 18, 27, 0.65); } 50% { opacity: 0.55; transform: scale(1.22); box-shadow: 0 0 0 7px rgba(208, 18, 27, 0); } }

/* ---- Adım şeridi ---------------------------------------------------------------------------------------------- */
.pf-steps { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-bottom: 22px; }
.pf-step { display: flex; align-items: flex-start; gap: 6px; padding: 10px 8px; min-width: 0; border: 1px solid rgba(28, 27, 25, 0.12); border-radius: 14px; cursor: pointer; background: var(--white); text-align: start; }
.pf-step.is-on { background: var(--green); border-color: var(--green); box-shadow: 0 6px 18px rgba(10, 107, 50, 0.22); }
.pf-step.is-done { border-color: rgba(10, 107, 50, 0.35); }
.pf-step.is-future { background: var(--paper-2); opacity: 0.7; cursor: not-allowed; }
.pf-step__no { width: 20px; height: 20px; border-radius: 50%; background: #e6e3de; color: #a5a19d; display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 700; font-size: 10.5px; font-feature-settings: 'tnum'; unicode-bidi: isolate; flex: none; margin-top: 1px; }
.pf-step.is-on .pf-step__no { background: rgba(255, 255, 255, 0.22); color: var(--white); }
.pf-step.is-done .pf-step__no { background: var(--green); color: var(--white); }
.pf-step__text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; min-width: 0; }
.pf-step__label { font-family: var(--font-head); font-weight: 700; font-size: 11.5px; color: var(--ink); max-width: 100%; white-space: normal; word-break: break-word; }
.pf-step__value { font-size: 10.5px; color: var(--muted-3); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.pf-step.is-on .pf-step__label { color: var(--white); }
.pf-step.is-on .pf-step__value { color: rgba(255, 255, 255, 0.82); }
.pf-step.is-future .pf-step__label { color: #b0aca7; }
.pf-step.is-future .pf-step__value { color: #c4c0bc; }

/* ---- Kart, seçenek, düğme ------------------------------------------------------------------------------------- */
.pf-card { background: var(--white); border: 1px solid rgba(28, 27, 25, 0.12); border-radius: 4px; padding: 30px 32px 34px; }
.pf-card--top { border-top: 3px solid var(--green); }
.pf-card--sent { padding: 38px 40px 42px; }
.pf-card--load { padding: 20px 26px 24px; }
.pf-card--summary { padding: 20px 22px 22px; }
.pf-card--inset { margin-top: 18px; background: var(--paper); }
.pf-card--flush { padding: 0; overflow: hidden; }
.pf-card--favs { padding: 24px 26px 28px; border-radius: 8px; }
.pf-card--dash { padding: 24px 26px; display: flex; flex-direction: column; align-items: flex-start; }
.pf-card__title { font-family: var(--font-head); font-weight: 700; font-size: 22px; margin: 0 0 6px; }
.pf-card__title--tight { margin: 0 0 5px; }
.pf-card__title--sm { font-size: 19px; margin: 0 0 5px; }
.pf-card__title--xl { font-size: 26px; margin: 0 0 10px; }
.pf-card__lead { font-size: 14.5px; color: var(--muted); margin: 0 0 22px; line-height: 1.6; }
.pf-card__lead--narrow { font-size: 14px; max-width: 76ch; margin: 0 0 18px; }
.pf-card__lead--tight { font-size: 14px; margin: 0 0 14px; }
.pf-stack { display: grid; gap: 12px; }
.pf-stack--lg { gap: 20px; align-items: start; }
.pf-warnbox { font-size: 14px; color: var(--amber); background: #fdf6ea; border: 1px solid rgba(160, 111, 36, 0.3); border-radius: 6px; padding: 12px 14px; margin-bottom: 14px; line-height: 1.5; }
.pf-err { margin-top: 14px; font-size: 13px; color: var(--red); }
.pf-err--tight { margin-top: 10px; }
.pf-err--block { margin: 0 0 14px; }

.pf-grid { display: grid; gap: 14px; }
.pf-grid--branch { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.pf-grid--transport { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.pf-grid--pallet { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.pf-grid--incoterm { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.pf-grid--currency { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }

.pf-option { width: 100%; text-align: start; display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border: 1px solid rgba(28, 27, 25, 0.16); border-radius: 16px; background: var(--white); cursor: pointer; color: var(--ink); }
.pf-option.is-on { border-color: var(--green); background: var(--green-bg); }
.pf-option--card { display: block; padding: 20px 20px 22px; }
.pf-option--compact { gap: 12px; padding: 14px 16px; border-radius: 12px; }
.pf-radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #c4c0bc; background: transparent; margin-top: 2px; flex: none; }
.pf-radio--sm { width: 16px; height: 16px; margin-top: 0; }
.pf-option.is-on .pf-radio { border-color: var(--green); background: var(--green); }
.pf-option__title { display: block; font-family: var(--font-head); font-weight: 700; font-size: 16px; margin-bottom: 4px; }
.pf-option__label { display: block; font-family: var(--font-head); font-weight: 600; font-size: 16px; margin-bottom: 3px; }
.pf-option__label--sm { font-size: 14.5px; margin-bottom: 2px; }
.pf-option__hint { display: block; font-size: 13.5px; color: var(--muted); }
.pf-option__hint--sm { font-size: 12.5px; }
.pf-option__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.pf-option__big { font-family: var(--font-head); font-weight: 700; font-size: 17px; }
.pf-option__specs { display: block; font-size: 13.5px; color: var(--muted-2); line-height: 1.6; font-feature-settings: 'tnum'; unicode-bidi: isolate; }
.pf-option__note { display: block; font-size: 12.5px; color: var(--muted-3); margin-top: 10px; line-height: 1.5; }
.pf-subsection { margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(28, 27, 25, 0.1); }
.pf-subsection__title { font-family: var(--font-head); font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.pf-subsection__lead { font-size: 13.5px; color: var(--muted); margin: 0 0 14px; line-height: 1.55; }

.pf-actions { display: flex; gap: 10px; margin-top: 24px; }
.pf-actions--wrap { flex-wrap: wrap; }
.pf-actions--tight { margin-top: 14px; }
.pf-actions--first { margin: 0 0 16px; gap: 9px; }
/* Sihirbaz adımının hata cümlesi: düğmelerin ardında sabit yer — görünüp kaybolurken düğmeler kaymaz. */
.pf-actions__msg { align-self: center; flex: 1 1 220px; min-width: 0; font-size: 13px; line-height: 1.4; color: var(--red); }
.pf-actions__msg:empty { display: none; }
.pf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-head); font-weight: 600; font-size: 14px; padding: 11px 18px; border-radius: var(--pill); border: 1px solid transparent; cursor: pointer; white-space: nowrap; text-decoration: none; background: var(--white); color: var(--ink-2); }
.pf-btn--primary, .pf-btn--primary:hover { background: var(--green); border-color: var(--green); color: var(--white); }
.pf-btn--ghost { background: var(--white); border-color: rgba(28, 27, 25, 0.2); color: var(--ink-2); }
.pf-btn--ghost:hover { border-color: var(--green); color: var(--green); }
.pf-btn--outline, .pf-btn--outline:hover { background: var(--white); border-color: var(--green); color: var(--green); font-weight: 700; }
.pf-btn--danger, .pf-btn--danger:hover { background: var(--red); border-color: var(--red); color: var(--white); }
.pf-btn--danger-outline, .pf-btn--danger-outline:hover { background: var(--white); border-color: var(--red); color: #8f0d14; font-weight: 700; }
.pf-btn--muted, .pf-btn--muted:hover { background: var(--muted-3); border-color: var(--muted-3); color: var(--white); cursor: not-allowed; }
.pf-btn--disabled, .pf-btn--disabled:hover { background: #c4c0bc; border-color: #c4c0bc; color: var(--white); cursor: not-allowed; }
.pf-btn--shadow { font-weight: 700; font-size: 13.5px; padding: 12px 22px; box-shadow: 0 5px 14px rgba(10, 107, 50, 0.26); }
.pf-btn--lg { font-size: 15px; padding: 13px 26px; }
.pf-btn--sm { font-size: 13px; padding: 10px 16px; }
.pf-btn--xs { font-size: 12px; font-weight: 700; padding: 8px 14px; }
.pf-btn--tall { min-height: 44px; font-weight: 700; font-size: 13.5px; padding: 12px 24px; }
.pf-btn--block { width: 100%; padding-left: 0; padding-right: 0; }
.pf-btn[disabled] { opacity: 0.6; cursor: not-allowed; }
.pf-btn__icon { width: 15px; height: 15px; }
.pf-btn__icon--white { filter: brightness(0) invert(1); }
.pf-x { width: 30px; height: 30px; flex: none; border: 1px solid rgba(28, 27, 25, 0.16); border-radius: var(--pill); background: var(--white); cursor: pointer; color: #8f0d14; font-size: 15px; line-height: 1; }
.pf-x--placeholder { visibility: hidden; }

/* ---- Yükleme simülasyonu -------------------------------------------------------------------------------------- */
.pf-load__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.pf-load__who { display: flex; align-items: center; gap: 12px; }
.pf-load__icon { width: 42px; height: 42px; border-radius: 50%; background: var(--green-bg); border: 1px solid rgba(10, 107, 50, 0.28); display: flex; align-items: center; justify-content: center; flex: none; }
.pf-load__icon img { width: 22px; height: 22px; }
.pf-load__names { display: flex; flex-direction: column; gap: 2px; }
.pf-load__kicker { font-family: var(--font-head); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-3); }
.pf-load__name { font-family: var(--font-head); font-weight: 700; font-size: 15px; color: var(--ink); unicode-bidi: isolate; }
.pf-load__stats { display: flex; align-items: baseline; gap: 14px; }
.pf-load__count { font-family: var(--font-head); font-size: 13px; font-weight: 700; font-feature-settings: 'tnum'; unicode-bidi: isolate; }
.pf-load__pct { font-family: var(--font-head); font-weight: 700; font-size: 30px; line-height: 1; letter-spacing: -0.02em; font-feature-settings: 'tnum'; unicode-bidi: isolate; }
.pf-load__count.is-ok, .pf-load__pct.is-ok { color: var(--green); }
.pf-load__count.is-warn, .pf-load__pct.is-warn { color: var(--amber); }
.pf-load__count.is-over, .pf-load__pct.is-over { color: var(--red); }
.pf-load__count.is-none, .pf-load__pct.is-none { color: var(--muted-3); }
.pf-load__note { font-size: 14.5px; color: var(--muted-2); margin-top: 14px; line-height: 1.55; }
.pf-load__warn { margin-top: 10px; font-size: 13px; color: var(--amber); line-height: 1.5; }

.pf-truck { display: flex; align-items: flex-end; gap: 6px; }
.pf-box { display: flex; align-items: stretch; gap: 6px; }
.pf-cargo { flex: 1; position: relative; border: 2px solid #45423f; background: linear-gradient(180deg, #fbfaf9 0%, #f1efec 100%); overflow: hidden; box-shadow: inset 0 3px 10px rgba(28, 27, 25, 0.08); }
.pf-cargo--truck { height: 92px; border-radius: 4px; }
.pf-cargo--box { height: 96px; border-radius: 3px; }
.pf-cargo__glow { position: absolute; right: 0; top: 0; bottom: 0; transition: width 0.9s cubic-bezier(0.22, 0.8, 0.3, 1); }
.pf-cargo__glow.is-ok { background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(10, 107, 50, 0.26) 100%); }
.pf-cargo__glow.is-warn { background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(160, 111, 36, 0.28) 100%); }
.pf-cargo__glow.is-over { background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(208, 18, 27, 0.3) 100%); }
.pf-cargo__glow.is-none { background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(139, 135, 131, 0.2) 100%); }
.pf-truck__cab { width: 58px; height: 76px; border: 2px solid #45423f; border-radius: 4px 12px 3px 3px; background: linear-gradient(180deg, #f7f6f4 0%, #e6e3de 100%); position: relative; flex: none; }
.pf-truck__window { position: absolute; left: 7px; top: 8px; right: 7px; height: 24px; border: 2px solid #45423f; border-radius: 3px; background: #cfe0d5; }
.pf-truck__light { position: absolute; left: 7px; bottom: 8px; width: 14px; height: 5px; border-radius: 3px; background: #45423f; }
.pf-box__door { width: 12px; border: 2px solid #45423f; background: #eeece8; flex: none; }
.pf-box__door--start { border-right: none; border-radius: 4px 0 0 4px; }
.pf-box__door--end { border-left: none; border-radius: 0 4px 4px 0; }
.pf-wheels { display: flex; gap: 12px; }
.pf-wheels--truck { padding: 6px 20px 0; }
.pf-wheels--box { padding: 6px 40px 0; }
.pf-wheel { width: 15px; height: 15px; border: 2px solid #45423f; border-radius: 50%; background: var(--white); }
.pf-wheels__gap { flex: 1; }
.pf-wheels__cab { width: 22px; }

.pf-cells { position: absolute; inset: 7px; display: grid; gap: 3px; direction: rtl; }
.rows-2 { grid-template-rows: repeat(2, 1fr); }
.rows-3 { grid-template-rows: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.cols-5 { grid-template-columns: repeat(5, 1fr); }
.cols-6 { grid-template-columns: repeat(6, 1fr); }
.cols-7 { grid-template-columns: repeat(7, 1fr); }
.cols-8 { grid-template-columns: repeat(8, 1fr); }
.cols-9 { grid-template-columns: repeat(9, 1fr); }
.cols-10 { grid-template-columns: repeat(10, 1fr); }
.cols-11 { grid-template-columns: repeat(11, 1fr); }
.cols-12 { grid-template-columns: repeat(12, 1fr); }
.cols-13 { grid-template-columns: repeat(13, 1fr); }
.cols-14 { grid-template-columns: repeat(14, 1fr); }
.pf-cell { position: relative; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(28, 27, 25, 0.1); border-radius: 1px; background: rgba(28, 27, 25, 0.055); transition: background 0.5s ease, border-color 0.5s ease; overflow: hidden; }
.pf-cell.is-off { background: rgba(28, 27, 25, 0.02); border-color: rgba(28, 27, 25, 0.05); }
.pf-cell.is-on { border-color: rgba(255, 255, 255, 0.42); }
.pf-cell.is-on.is-ok { background: var(--green); }
.pf-cell.is-on.is-warn { background: var(--amber); }
.pf-cell.is-on.is-over { background: var(--red); }
.pf-cell.is-on.is-none { background: var(--muted-3); }
.pf-cell__no { font-family: var(--font-head); font-weight: 700; font-size: 11px; color: #a5a19d; font-feature-settings: 'tnum'; unicode-bidi: isolate; z-index: 1; }
.pf-cell.is-on .pf-cell__no { color: rgba(255, 255, 255, 0.85); }
.pf-cell__slat { position: absolute; left: 1px; right: 1px; bottom: 1px; height: 3px; background: rgba(28, 27, 25, 0.12); }
.pf-cell.is-on .pf-cell__slat { background: rgba(255, 255, 255, 0.5); }
.pf-loose { position: absolute; inset: 7px; direction: rtl; display: flex; align-items: stretch; }
.pf-loose__bar { position: relative; border-radius: 6px; overflow: hidden; transition: width 0.9s cubic-bezier(0.22, 0.8, 0.3, 1); }

.pf-meters { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 34px; margin-top: 18px; }
.pf-meter__head { display: flex; justify-content: space-between; font-size: 15px; font-weight: 600; color: var(--ink-2); margin-bottom: 7px; font-feature-settings: 'tnum'; unicode-bidi: isolate; }
.pf-meter__track { height: 12px; background: #e6e3dd; border-radius: var(--pill); overflow: hidden; }
.pf-meter__bar { height: 100%; transition: width 0.85s cubic-bezier(0.22, 0.8, 0.3, 1); }
.pf-meter__bar.is-ok, .pf-loose__bar.is-ok { background: var(--green); }
.pf-meter__bar.is-warn, .pf-loose__bar.is-warn { background: var(--amber); }
.pf-meter__bar.is-over, .pf-loose__bar.is-over { background: var(--red); }
.pf-loose__bar.is-none { background: var(--muted-3); }
.pf-kgbox { margin-top: 12px; padding: 12px 16px; background: #f7f5f2; border-radius: 6px; font-size: 14.5px; color: var(--muted-2); line-height: 1.65; }
.pf-kgbox__total { font-weight: 700; color: var(--ink); }
.pf-over { margin-top: 14px; border: 1px solid var(--red); border-radius: 3px; padding: 12px 14px; font-size: 13px; color: #8f0d14; line-height: 1.55; }

/* Değişken genişlik (yüzde) sınıfları. */
.w-0{width:0%}.w-1{width:1%}.w-2{width:2%}.w-3{width:3%}.w-4{width:4%}.w-5{width:5%}.w-6{width:6%}.w-7{width:7%}.w-8{width:8%}.w-9{width:9%}
.w-10{width:10%}.w-11{width:11%}.w-12{width:12%}.w-13{width:13%}.w-14{width:14%}.w-15{width:15%}.w-16{width:16%}.w-17{width:17%}.w-18{width:18%}.w-19{width:19%}
.w-20{width:20%}.w-21{width:21%}.w-22{width:22%}.w-23{width:23%}.w-24{width:24%}.w-25{width:25%}.w-26{width:26%}.w-27{width:27%}.w-28{width:28%}.w-29{width:29%}
.w-30{width:30%}.w-31{width:31%}.w-32{width:32%}.w-33{width:33%}.w-34{width:34%}.w-35{width:35%}.w-36{width:36%}.w-37{width:37%}.w-38{width:38%}.w-39{width:39%}
.w-40{width:40%}.w-41{width:41%}.w-42{width:42%}.w-43{width:43%}.w-44{width:44%}.w-45{width:45%}.w-46{width:46%}.w-47{width:47%}.w-48{width:48%}.w-49{width:49%}
.w-50{width:50%}.w-51{width:51%}.w-52{width:52%}.w-53{width:53%}.w-54{width:54%}.w-55{width:55%}.w-56{width:56%}.w-57{width:57%}.w-58{width:58%}.w-59{width:59%}
.w-60{width:60%}.w-61{width:61%}.w-62{width:62%}.w-63{width:63%}.w-64{width:64%}.w-65{width:65%}.w-66{width:66%}.w-67{width:67%}.w-68{width:68%}.w-69{width:69%}
.w-70{width:70%}.w-71{width:71%}.w-72{width:72%}.w-73{width:73%}.w-74{width:74%}.w-75{width:75%}.w-76{width:76%}.w-77{width:77%}.w-78{width:78%}.w-79{width:79%}
.w-80{width:80%}.w-81{width:81%}.w-82{width:82%}.w-83{width:83%}.w-84{width:84%}.w-85{width:85%}.w-86{width:86%}.w-87{width:87%}.w-88{width:88%}.w-89{width:89%}
.w-90{width:90%}.w-91{width:91%}.w-92{width:92%}.w-93{width:93%}.w-94{width:94%}.w-95{width:95%}.w-96{width:96%}.w-97{width:97%}.w-98{width:98%}.w-99{width:99%}
.w-100{width:100%}

/* ---- Ürün adımı: katalog ve kalemler -------------------------------------------------------------------------- */
.pf-products { display: grid; grid-template-columns: minmax(340px, 1fr) minmax(340px, 1fr); gap: 20px; align-items: stretch; }
.pf-panel { background: var(--white); border: 1px solid rgba(28, 27, 25, 0.12); border-radius: 4px; overflow: hidden; height: 560px; display: flex; flex-direction: column; }
.pf-panel__head { padding: 20px 22px 18px; border-bottom: 1px solid rgba(28, 27, 25, 0.1); flex: none; }
.pf-panel__title { font-family: var(--font-head); font-weight: 700; font-size: 19px; margin: 0 0 6px; }
.pf-panel__lead { font-size: 13.5px; color: var(--muted); line-height: 1.55; margin: 0 0 14px; }
.pf-panel__body { flex: 1; min-height: 0; overflow: auto; }
.pf-panel__bar { padding: 16px 20px; border-bottom: 1px solid rgba(28, 27, 25, 0.1); display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex: none; flex-wrap: wrap; }
.pf-panel__bartitle { font-family: var(--font-head); font-weight: 700; font-size: 16px; }
.pf-panel__barcount { font-family: var(--font-head); font-size: 12.5px; color: var(--muted-3); font-feature-settings: 'tnum'; unicode-bidi: isolate; }
.pf-search { width: 100%; font-size: 14.5px; padding: 11px 13px; border: 1px solid rgba(28, 27, 25, 0.18); border-radius: 3px; background: var(--paper); }
.pf-search--round { font-size: 14px; padding: 11px 16px; border-radius: var(--pill); margin-bottom: 16px; }
.pf-favquick { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(28, 27, 25, 0.1); }
.pf-favquick__title { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; font-family: var(--font-head); font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted-3); }
.pf-favquick__title img { width: 13px; height: 13px; opacity: 0.6; }
.pf-favquick__chips { display: flex; gap: 7px; flex-wrap: wrap; }
.pf-chip { display: flex; align-items: center; gap: 7px; max-width: 210px; padding: 6px 12px 6px 6px; background: var(--green-bg); border: 1px solid rgba(10, 107, 50, 0.3); border-radius: var(--pill); cursor: pointer; color: var(--ink); }
.pf-chip:hover { background: var(--green); color: var(--white); }
.pf-chip__name { font-family: var(--font-head); font-weight: 600; font-size: 12px; color: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-thumb { width: 56px; height: 56px; object-fit: contain; background: var(--paper); border: 1px solid rgba(28, 27, 25, 0.1); border-radius: 3px; }
.pf-thumb--chip { width: 26px; height: 26px; background: var(--white); border: none; border-radius: var(--pill); flex: none; }
.pf-thumb--sm { width: 44px; height: 44px; }
.pf-thumb--md { width: 48px; height: 48px; border-radius: 4px; }
.pf-thumb--lg { width: 72px; height: 72px; background: var(--white); border-radius: 4px; }
.pf-prow { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; padding: 14px 22px; border-bottom: 1px solid rgba(28, 27, 25, 0.07); }
.pf-prow__name { font-family: var(--font-head); font-weight: 600; font-size: 15px; line-height: 1.3; }
.pf-prow__meta { font-size: 12.5px; color: var(--muted-3); font-feature-settings: 'tnum'; unicode-bidi: isolate; }
.pf-prow__logi { font-size: 12.5px; color: var(--muted-2); font-feature-settings: 'tnum'; unicode-bidi: isolate; }
.pf-prow__actions { display: flex; gap: 7px; align-items: center; }
.pf-prow__unit { font-size: 12px; color: var(--muted-3); }
.pf-qty { width: 68px; font-size: 14px; padding: 9px; border: 1px solid rgba(28, 27, 25, 0.18); border-radius: 3px; text-align: end; background: var(--paper); }
.pf-star { width: 34px; height: 34px; flex: none; background: var(--white); border: 1px solid rgba(10, 107, 50, 0.4); border-radius: var(--pill); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.pf-star img { width: 15px; height: 15px; filter: opacity(0.45); }
.pf-star.is-on { background: var(--green); }
.pf-star.is-on img { filter: brightness(0) invert(1); }
.pf-empty { flex: 1; display: flex; align-items: center; justify-content: center; padding: 30px 24px; text-align: center; color: var(--muted-3); font-size: 13.5px; line-height: 1.55; }
.pf-empty--inline { padding: 20px; }
.pf-more { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 22px 22px; }
.pf-more__label { font-family: var(--font-head); font-size: 12px; color: var(--muted-3); font-feature-settings: 'tnum'; unicode-bidi: isolate; }
.pf-lrow { display: grid; grid-template-columns: 44px 1fr 30px; gap: 12px; align-items: start; padding: 14px 18px; border-bottom: 1px solid rgba(28, 27, 25, 0.07); font-feature-settings: 'tnum'; unicode-bidi: isolate; }
.pf-lrow__main { display: grid; gap: 9px; }
.pf-lrow__name { font-family: var(--font-head); font-weight: 600; font-size: 14.5px; line-height: 1.35; }
.pf-lrow__meta { font-size: 12px; color: var(--muted-3); }
.pf-lrow__meta--warn { color: var(--red); margin-top: 2px; }
.pf-lrow__qty { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pf-lrow__unit { font-size: 12px; color: var(--muted-3); }
.pf-lrow__kg { font-family: var(--font-head); font-size: 12.5px; font-weight: 700; color: var(--ink-2); margin-inline-start: auto; }
.pf-stepper { display: flex; align-items: center; border: 1px solid rgba(28, 27, 25, 0.18); border-radius: var(--pill); overflow: hidden; background: var(--white); }
.pf-stepper__btn { width: 30px; height: 32px; border: none; background: transparent; cursor: pointer; color: var(--green); font-family: var(--font-head); font-weight: 700; font-size: 16px; }
.pf-stepper__input { width: 58px; height: 32px; border: none; border-left: 1px solid rgba(28, 27, 25, 0.12); border-right: 1px solid rgba(28, 27, 25, 0.12); text-align: center; font-family: var(--font-head); font-weight: 700; font-size: 14px; background: var(--paper); }
.pf-total { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 14px 20px; background: var(--paper); border-top: 1px solid rgba(28, 27, 25, 0.1); font-family: var(--font-head); font-weight: 700; font-size: 14px; font-feature-settings: 'tnum'; unicode-bidi: isolate; flex: none; }

/* ---- Özet ---------------------------------------------------------------------------------------------------- */
.pf-summary__title { font-family: var(--font-head); font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-3); margin-bottom: 12px; }
.pf-summary__title--spaced { margin-top: 16px; }
.pf-summary { display: grid; gap: 8px; font-size: 14px; color: var(--muted-2); width: 100%; }
.pf-summary__row { display: flex; justify-content: space-between; gap: 12px; }
.pf-summary__val { color: var(--ink); unicode-bidi: isolate; text-align: end; }
.pf-summary__row--strong { font-family: var(--font-head); font-weight: 700; font-size: 15px; color: var(--ink); font-feature-settings: 'tnum'; unicode-bidi: isolate; }
.pf-summary__row--first { border-top: 1px solid rgba(28, 27, 25, 0.1); padding-top: 9px; }
.pf-hint { font-size: 12.5px; color: var(--muted-3); margin-top: 10px; line-height: 1.5; }
.pf-savednote { margin-top: 10px; font-family: var(--font-head); font-size: 12.5px; font-weight: 600; color: var(--green); unicode-bidi: isolate; }

/* ---- Teslim şekli, varış, para birimi, not -------------------------------------------------------------------- */
.pf-inco { display: grid; justify-items: center; gap: 5px; padding: 13px 7px 14px; border: 1px solid rgba(28, 27, 25, 0.16); border-radius: 12px; background: var(--white); cursor: pointer; }
.pf-inco.is-on { border-color: var(--green); background: var(--green-bg); }
.pf-inco__icon { width: 19px; height: 19px; filter: grayscale(1) opacity(0.5); }
.pf-inco.is-on .pf-inco__icon { filter: none; }
.pf-inco__code { font-family: var(--font-head); font-weight: 700; font-size: 13.5px; color: var(--ink); unicode-bidi: isolate; }
.pf-inco.is-on .pf-inco__code { color: var(--green); }
.pf-inco__name { font-size: 10.5px; color: var(--muted); text-align: center; line-height: 1.3; text-wrap: pretty; }
.pf-inco__freight { font-family: var(--font-head); font-size: 9.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted-3); text-align: center; line-height: 1.3; }
.pf-inco__freight.is-freight { color: var(--amber); }
.pf-destfields { margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(28, 27, 25, 0.1); display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.pf-field { display: grid; gap: 6px; }
.pf-field--note { margin-top: 22px; }
.pf-field__label { font-family: var(--font-head); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-3); }
.pf-input { width: 100%; font-size: 14.5px; padding: 11px 13px; border: 1px solid rgba(28, 27, 25, 0.2); border-radius: 6px; background: var(--paper); color: var(--ink); }
.pf-input.is-bad { border-color: var(--red); }
.pf-input--area { resize: vertical; line-height: 1.5; }
.pf-cur { display: grid; justify-items: center; gap: 4px; padding: 12px 8px 13px; border: 1px solid rgba(28, 27, 25, 0.16); border-radius: 12px; background: var(--white); cursor: pointer; color: var(--ink); }
.pf-cur.is-on { border-color: var(--green); background: var(--green-bg); color: var(--green); }
.pf-cur__sym { font-family: var(--font-head); font-weight: 700; font-size: 17px; unicode-bidi: isolate; }
.pf-cur__code { font-family: var(--font-head); font-weight: 700; font-size: 13px; unicode-bidi: isolate; }
.pf-cur__name { font-size: 10.5px; color: var(--muted); text-align: center; line-height: 1.3; text-wrap: pretty; }

/* ---- Onay penceresi ------------------------------------------------------------------------------------------- */
.pf-modal { position: fixed; inset: 0; background: rgba(20, 24, 20, 0.55); display: flex; align-items: center; justify-content: center; z-index: 60; padding: 20px; }
.pf-modal__box { background: var(--white); border-radius: 6px; width: 100%; max-width: 460px; padding: 26px 28px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); }
.pf-modal__title { font-family: var(--font-head); font-weight: 700; font-size: 17px; margin-bottom: 10px; }
.pf-modal__body { font-size: 14px; color: var(--muted-2); line-height: 1.6; margin: 0 0 20px; }
.pf-modal__box .pf-field--note { margin: 0 0 18px; }
.pf-modal__actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

/* ---- Onaylı proforma bandı ------------------------------------------------------------------------------------ */
.pf-banner { background: var(--green-bg); border: 1px solid var(--green); border-inline-start: 4px solid var(--green); border-radius: 4px; padding: 18px 22px 20px; }
.pf-banner__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.pf-banner__head img { width: 20px; height: 20px; }
.pf-banner__title { font-family: var(--font-head); font-weight: 700; font-size: 17px; color: var(--green); }
.pf-banner__rows { display: grid; gap: 9px; }
.pf-banner__row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; background: var(--white); border: 1px solid rgba(10, 107, 50, 0.28); border-radius: 3px; padding: 12px 16px; }
.pf-banner__no { display: block; font-family: var(--font-head); font-weight: 700; font-size: 15px; unicode-bidi: isolate; }
.pf-banner__when { display: block; font-size: 12.5px; color: var(--muted); font-feature-settings: 'tnum'; unicode-bidi: isolate; }
.pf-banner__note { font-size: 13px; color: var(--muted-2); margin-top: 12px; line-height: 1.55; }

/* ---- Proforma listesi ----------------------------------------------------------------------------------------- */
.pf-list { background: var(--white); border: 1px solid rgba(28, 27, 25, 0.12); border-radius: 4px; overflow: hidden; }
.pf-list--top { border-top: 3px solid var(--green); }
.pf-list__head { padding: 24px 26px 18px; border-bottom: 1px solid rgba(28, 27, 25, 0.1); display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.pf-list__head--sm { padding: 20px 24px 16px; }
.pf-list__lead { font-size: 13.5px; color: var(--muted); margin: 0; line-height: 1.55; max-width: 80ch; }
.pf-list__empty { padding: 46px 26px; text-align: center; color: var(--muted-3); font-size: 14px; line-height: 1.6; }
.pf-mrow { display: grid; grid-template-columns: minmax(200px, 1fr) auto auto; gap: 16px; align-items: center; padding: 18px 26px; border-bottom: 1px solid rgba(28, 27, 25, 0.07); }
.pf-mrow__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pf-mrow__no { font-family: var(--font-head); font-weight: 700; font-size: 16px; font-feature-settings: 'tnum'; unicode-bidi: isolate; }
.pf-mrow__meta { font-size: 12.5px; color: var(--muted-2); margin-top: 5px; unicode-bidi: isolate; }
.pf-mrow__sub { font-size: 12.5px; color: var(--muted-3); margin-top: 3px; font-feature-settings: 'tnum'; unicode-bidi: isolate; }
.pf-mrow .pf-x { width: 34px; height: 34px; }
.pf-badge { font-family: var(--font-head); font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--white); padding: 3px 10px; border-radius: var(--pill); background: var(--muted-3); }
.pf-badge.st-new { background: var(--red); }
.pf-badge.st-approved { background: var(--green); }
.pf-badge.st-closed, .pf-badge.st-draft { background: var(--muted-3); }

/* ---- Teklif sayfası ------------------------------------------------------------------------------------------- */
.pf-backlink { font-family: var(--font-head); font-weight: 600; font-size: 13px; color: var(--green); }
.pf-sent__body { font-size: 15.5px; color: var(--muted-2); line-height: 1.65; margin: 0 0 24px; }
.pf-receipt { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 26px; }
.pf-receipt__cell { border: 1px solid rgba(28, 27, 25, 0.12); border-radius: 4px; padding: 16px 16px 18px; }
.pf-receipt__k { font-family: var(--font-head); font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-3); margin-bottom: 7px; }
.pf-receipt__v { font-family: var(--font-head); font-weight: 700; font-size: 17px; font-feature-settings: 'tnum'; unicode-bidi: isolate; }
.pf-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 20px; }
.pf-fact { display: flex; flex-direction: column; gap: 3px; }
.pf-fact--wide { grid-column: 1 / -1; }
.pf-fact__k { font-family: var(--font-head); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-3); }
.pf-fact__v { font-size: 14.5px; color: var(--ink); unicode-bidi: isolate; }
.pf-fact__v--text { white-space: pre-wrap; line-height: 1.55; }
.pf-lock { background: var(--green-bg); border: 1px solid var(--green); border-inline-start: 4px solid var(--green); border-radius: 4px; padding: 22px 26px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.pf-lock__title { font-family: var(--font-head); font-weight: 700; font-size: 18px; color: var(--green); margin-bottom: 5px; }
.pf-lock__note { font-size: 13.5px; color: var(--muted-2); line-height: 1.55; max-width: 70ch; }
.pf-lock--review { background: #fdf6ea; border-color: rgba(160, 111, 36, 0.45); border-inline-start-color: var(--amber); }
.pf-lock--review .pf-lock__title { color: var(--amber); }
.pf-confirm { background: var(--white); border: 1px solid rgba(28, 27, 25, 0.14); border-radius: 4px; padding: 20px 24px; }
.pf-confirm .pf-field--note { margin-top: 16px; }
.pf-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 14px; color: var(--ink); line-height: 1.5; }
.pf-check input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--green); flex: none; }
.pf-donenote { background: var(--green-bg); border: 1px solid var(--green); border-radius: 4px; padding: 16px 20px; font-size: 13.5px; color: var(--green); font-weight: 600; }
.pf-donenote--muted { background: var(--paper-2); border-color: var(--line); color: var(--muted-2); }
.pf-tablewrap { overflow-x: auto; }
.pf-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pf-table th { font-family: var(--font-head); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-3); text-align: start; padding: 12px 18px; border-bottom: 1px solid rgba(28, 27, 25, 0.1); background: var(--paper); white-space: nowrap; }
.pf-table td { padding: 12px 18px; border-bottom: 1px solid rgba(28, 27, 25, 0.07); vertical-align: middle; }
.pf-table .is-num { text-align: end; font-feature-settings: 'tnum'; unicode-bidi: isolate; white-space: nowrap; }
.pf-table__product { display: flex; align-items: center; gap: 12px; }
.pf-table__name { font-family: var(--font-head); font-weight: 600; font-size: 14px; line-height: 1.35; }
.pf-table__meta { font-size: 12px; color: var(--muted-3); }
.pf-totals { padding: 14px 20px 18px; display: grid; gap: 8px; max-width: 420px; margin-inline-start: auto; font-size: 14px; color: var(--muted-2); }

/* ---- Favoriler ------------------------------------------------------------------------------------------------ */
.pf-results { display: grid; gap: 6px; max-height: 300px; overflow: auto; border: 1px solid rgba(28, 27, 25, 0.12); border-radius: 6px; padding: 10px; margin-bottom: 22px; }
.pf-results__none { padding: 14px 10px; font-size: 13.5px; color: var(--muted-3); }
.pf-rrow { display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; padding: 8px 10px; border-bottom: 1px solid rgba(28, 27, 25, 0.06); }
.pf-rrow__text { min-width: 0; }
.pf-rrow__name { display: block; font-family: var(--font-head); font-weight: 600; font-size: 14px; line-height: 1.3; }
.pf-rrow__meta { display: block; font-size: 12px; color: var(--muted-3); font-feature-settings: 'tnum'; unicode-bidi: isolate; }
.pf-favtoggle { font-family: var(--font-head); font-weight: 700; font-size: 12.5px; padding: 9px 16px; background: var(--white); border: 1px solid var(--green); border-radius: var(--pill); color: var(--green); cursor: pointer; white-space: nowrap; }
.pf-favtoggle.is-on { background: var(--green); color: var(--white); }
.pf-emptybox { border: 1px dashed rgba(28, 27, 25, 0.22); border-radius: 8px; padding: 40px 24px; text-align: center; }
.pf-emptybox__icon { width: 48px; height: 48px; border-radius: 50%; background: var(--green-bg); border: 1px solid rgba(10, 107, 50, 0.28); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.pf-emptybox__icon img { width: 20px; height: 20px; }
.pf-emptybox__text { font-size: 14px; color: var(--muted); line-height: 1.6; max-width: 54ch; margin: 0 auto; }
.pf-favgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.pf-favcard { display: grid; grid-template-columns: 72px 1fr; gap: 13px; align-items: center; border: 1px solid rgba(28, 27, 25, 0.12); border-radius: 6px; padding: 12px 14px; background: var(--paper); }
.pf-favcard__body { min-width: 0; display: grid; gap: 4px; }
.pf-favcard__name { font-family: var(--font-head); font-weight: 600; font-size: 14px; line-height: 1.3; }
.pf-favcard__meta { font-size: 12px; color: var(--muted-3); font-feature-settings: 'tnum'; unicode-bidi: isolate; }
.pf-favcard__logi { font-size: 12px; color: var(--muted-2); font-feature-settings: 'tnum'; unicode-bidi: isolate; }
.pf-favcard__actions { display: flex; gap: 7px; margin-top: 4px; align-items: center; }

/* ---- Mesajlar ------------------------------------------------------------------------------------------------- */
.pf-chat { background: var(--white); border: 1px solid rgba(28, 27, 25, 0.12); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }
.pf-chat__head { padding: 16px 22px; border-bottom: 1px solid rgba(28, 27, 25, 0.1); }
.pf-chat__title { font-family: var(--font-head); font-weight: 700; font-size: 18px; }
.pf-chat__lead { font-size: 13px; color: var(--muted); margin-top: 4px; }
.pf-chat__body { display: flex; flex-direction: column; gap: 12px; padding: 20px 22px; min-height: 300px; max-height: 480px; overflow: auto; background: var(--paper); }
.pf-chat__none { font-size: 13.5px; color: var(--muted-3); text-align: center; padding: 40px 10px; }
.pf-chat__compose { display: flex; gap: 10px; align-items: flex-end; padding: 16px 22px 20px; border-top: 1px solid rgba(28, 27, 25, 0.1); }
.pf-chat__input { flex: 1; font-size: 14px; padding: 11px 14px; border: 1px solid rgba(28, 27, 25, 0.18); border-radius: 12px; background: var(--paper); resize: vertical; }
.pf-bubble-row { display: flex; justify-content: flex-start; }
.pf-bubble-row.is-own { justify-content: flex-end; }
.pf-bubble { max-width: 78%; background: var(--white); color: var(--ink); border: 1px solid rgba(28, 27, 25, 0.14); border-radius: 12px; padding: 11px 15px 12px; }
.pf-bubble.is-own { background: var(--green); color: var(--white); border-color: var(--green); }
.pf-bubble__text { font-size: 14px; line-height: 1.55; white-space: pre-wrap; }
.pf-bubble__meta { font-size: 11.5px; color: var(--muted-3); margin-top: 6px; font-feature-settings: 'tnum'; unicode-bidi: isolate; }
.pf-bubble.is-own .pf-bubble__meta { color: rgba(255, 255, 255, 0.8); }

/* ---- Ana sayfa ------------------------------------------------------------------------------------------------ */
.pf-dash { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.pf-dash__kicker { font-family: var(--font-head); font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--indigo); margin-bottom: 10px; }
.pf-dash__company { font-family: var(--font-head); font-weight: 700; font-size: 20px; line-height: 1.25; }
.pf-dash__contact { font-size: 13px; color: var(--muted-3); margin: 4px 0 12px; word-break: break-word; }
.pf-dash__unread { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 600; font-size: 15px; margin-bottom: 4px; }

/* ---- Telefon genişliği (tasarımın max-width: 820px kuralları) ------------------------------------------------- */
@media (max-width: 1024px) {
  .pf-dash { grid-template-columns: 1fr; }
  .pf-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .pf-topbar__row { gap: 10px; padding: 10px 16px; }
  .pf-topbar__user { margin-inline-start: 0; width: 100%; justify-content: space-between; }
  .pf-main { padding: 18px 12px 60px; overflow-x: hidden; max-width: 100vw; }
  .pf-head__title { font-size: 22px; }
  .pf-card__title { font-size: 18px; }
  .pf-card { padding: 22px 18px 24px; }
  .pf-card--sent { padding: 24px 18px 26px; }
  .pf-card--flush { padding: 0; }
  .pf-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pf-nav__btn { width: 100%; padding: 9px 10px; font-size: 11px; white-space: normal; text-align: center; line-height: 1.2; }
  .pf-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .pf-step { padding: 6px 4px; gap: 3px; }
  .pf-step__no { width: 15px; height: 15px; font-size: 9px; }
  .pf-step__label { font-size: 8.5px; line-height: 1.05; }
  .pf-step__value { font-size: 7.5px; }
  .pf-grid--branch, .pf-grid--transport, .pf-grid--pallet, .pf-destfields, .pf-products, .pf-favgrid { grid-template-columns: minmax(0, 1fr); }
  .pf-grid--incoterm { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .pf-inco { padding: 12px 4px 13px; }
  .pf-inco__code { font-size: 12px; }
  .pf-inco__freight { font-size: 8.5px; line-height: 1.15; }
  .pf-inco__icon { width: 18px; height: 18px; }
  .pf-grid--currency { gap: 6px; }
  .pf-panel { height: auto; max-height: 60vh; }
  .pf-mrow { grid-template-columns: minmax(0, 1fr); padding: 14px 16px; }
  .pf-mrow .pf-x--placeholder { display: none; }
  .pf-prow { grid-template-columns: 56px 1fr; }
  .pf-prow__actions { grid-column: 1 / -1; flex-wrap: wrap; margin-top: 8px; }
  .pf-qty { width: 56px; }
  .pf-panel__lead { display: none; }
  .pf-actions { flex-wrap: wrap; }
  .pf-receipt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-bubble { max-width: 90%; }
  .pf-chat__compose { flex-direction: column; align-items: stretch; }
}