html{overflow-y:auto;}
html,body{overflow-x:hidden;}
/* ==========================================================
   Karea - Sipariş Ver
   - 1) Konfigürasyon: sol sticky görsel + sağ panel
   - 2) Satın alma/Ödeme: gallery-main.png arkaplanlı kart
   ========================================================== */

:root{
  --kAccent:#ff3b1f;
  --kInk:#141414;
  --kMuted: rgba(20,20,20,.62);
  --kLine: rgba(0,0,0,.10);
  --kCard:#ffffff;
  --kSoft:#f5f5f2;
}

/* Fonts (local) */
@font-face{
  font-family:"Momo";
  src:url("../fonts/MomoTrustDisplay-Regular.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Nata";
  src:url("../fonts/NataSans-Regular.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Nata";
  src:url("../fonts/NataSans-Medium.ttf") format("truetype");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Nata";
  src:url("../fonts/NataSans-SemiBold.ttf") format("truetype");
  font-weight:600;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Nata";
  src:url("../fonts/NataSans-Bold.ttf") format("truetype");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Nata";
  src:url("../fonts/NataSans-ExtraBold.ttf") format("truetype");
  font-weight:800;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Nata";
  src:url("../fonts/NataSans-Black.ttf") format("truetype");
  font-weight:900;
  font-style:normal;
  font-display:swap;
}

/* page spacing */
.page--order .main{
  padding-top: 12px;
}

/* =========================
   1) CONFIG
   ========================= */
.ord{
  padding: 54px 0 40px;
  background: #fff;
}

.ord__grid{
  display:grid;
  grid-template-columns: 1fr 420px;
  gap: 22px;
  align-items: start;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 18px;
}

.ord__media{
  position: sticky;
  top: 92px; /* header yüksekliği için güvenli */
  height: calc(100vh - 110px);
  border-radius: 16px;
  overflow:hidden;
  background: #eee;
}

.ord__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

/* right panel */
.ordPanel{
  background:#fff;
  border-radius: 18px;
  padding: 12px;
}

.ord__right{ position: relative; }

.ordPanel__section{
  padding: 14px 12px;
}

.ordPanel__section + .ordPanel__section{
  border-top: 1px solid rgba(0,0,0,.06);
}

.ordH{
  margin: 0 0 6px;
  font-family: "Nata", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--kInk);
}

.ordP{
  margin: 0 0 10px;
  font-family: "Nata", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 10px;
  font-weight: 500;
  color: rgba(20,20,20,.55);
  line-height: 1.35;
}

.ordLabel{
  font-family: "Nata", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: rgba(20,20,20,.70);
  margin: 6px 0 8px;
}

.ordColors{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ordColor input{ position:absolute; opacity:0; pointer-events:none; }
.ordColor{
  position:relative;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  cursor:pointer;
}
.ordDot{
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.12);
}
.ordDot--orange{ background:#ff3b1f; }
.ordDot--blue{ background:#2f80ff; }
.ordDot--black{ background:#333; }
.ordDot--yellow{ background:#f3c94a; }
.ordDot--gray{ background:#cfd8dc; }
.ordDot--beige{ background:#d7c6b8; }

.ordColor input:checked + .ordDot{
  box-shadow: 0 0 0 2px rgba(255,59,31,.85), 0 0 0 1px rgba(0,0,0,.10) inset;
}

/* extras cards */
.ordExtras{ display:flex; flex-direction:column; gap: 10px; }

.ordExtra{
  width: 100%;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  background: #fff;
  padding: 14px 14px 14px;
  cursor:pointer;
  text-align:left;
}
.ordExtra.is-selected{
  border-color: rgba(255,59,31,.70);
  box-shadow: 0 0 0 3px rgba(255,59,31,.10);
}

/* Layout: icon top-left, badge/price top-right, title under icon, description below */
.ordExtra__row{
  display:grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 8px;
  align-items:start;
}

.ordExtra__icon{
  grid-column: 1;
  grid-row: 1;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: rgba(0,0,0,.04);
  display:grid;
  place-items:center;
  color: rgba(20,20,20,.70);
}
.ordExtra__icon svg{ width: 18px; height: 18px; display:block; }

.ordExtra__badge,
.ordExtra__price{
  grid-column: 2;
  grid-row: 1;
  justify-self:end;
  align-self:start;
  font-family: "Nata", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #ff3b1f;
}

.ordExtra__meta{
  grid-column: 1 / -1;
  grid-row: 2;
}

.ordExtra__title{
  font-family: "Momo", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--kInk);
  margin: 2px 0 6px;
}

.ordExtra__desc{
  font-family: "Nata", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: rgba(20,20,20,.55);
  line-height: 1.35;
}


/* delivery */
.ordDelivery{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(0,0,0,.02);
  border-radius: 16px;
  padding: 14px;
}

.ordDelivery__kicker{
  font-family:"Momo", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: rgba(20,20,20,.55);
}
.ordDelivery__price{
  font-family:"Nata", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: var(--kInk);
  margin-top: 2px;
}
.ordDelivery__sub{
  font-family:"Nata", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: rgba(20,20,20,.45);
  margin-top: 2px;
}

.ordDelivery__row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,.06);
}
.ordDelivery__muted{
  font-family:"Nata", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: rgba(20,20,20,.55);
}
.ordDelivery__strong{
  font-family:"Nata", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 10px;
  font-weight: 800;
  color: rgba(20,20,20,.72);
}

.ordDelivery__note{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0,0,0,.03);
  font-family:"Nata", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: rgba(20,20,20,.55);
}

.ordBtn{
  width: 100%;
  height: 44px;
  border-radius: 999px;
  border: 0;
  cursor:pointer;
  margin-top: 10px;
  font-family:"Nata", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 11px;
  font-weight: 800;
}
.ordBtn--ghost{
  background: rgba(0,0,0,.03);
  color: rgba(20,20,20,.68);
}
.ordBtn--primary{
  background: var(--kAccent);
  color:#fff;
}
.ordBtn--primary:active{ transform: translateY(1px); }

.ordLink{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 6px;
  margin-top: 10px;
  font-family:"Nata", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: rgba(20,20,20,.70);
  text-decoration:none;
}

/* =========================
   2) CHECKOUT
   ========================= */
.chk{
  position:relative;
  padding: 54px 16px 72px;
}
.chk__bg{
  position:absolute;
  inset:0;
  background: url("../public/siparis-ver-main.png") center / cover no-repeat;
  opacity: 1;
  z-index:0;
  pointer-events:none;
}

@media (min-width: 720px){
  .chk__bg{ position:fixed; inset:0; }
}
.chkWrap{
  position:relative;
  z-index:1;
  max-width: 980px;
  margin: 0 auto;
  display:grid;
  place-items:center;
}
.chkView{ display:none; }
.chkView.is-active{ display:block; width: 100%; }

.chkCard{
  width: min(860px, 100%);
  background: rgba(245,245,242,.96);
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 20px 50px rgba(0,0,0,.14);
}
.chkCard--wide{ width: min(980px, 100%); }

.chkTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 12px;
}
.chkTopRight{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap: 10px;
}
.chkTitle{
  font-family:"Momo", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 13px;
  font-weight: 900;
  color: rgba(20,20,20,.82);
}
.chkStep{
  font-family:"Nata", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 12px;
  font-weight: 900;
  color: rgba(20,20,20,.62);
}

.chkForm{ display:flex; flex-direction:column; gap: 14px; }

.chkBlock{
  background: rgba(255,255,255,.72);
  border-radius: 14px;
  padding: 14px;
  border: 1px solid rgba(0,0,0,.06);
}
.chkBlock__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.chkBlock__title{
  font-family:"Nata", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 11px;
  font-weight: 900;
  color: rgba(20,20,20,.78);
}

.chkRadioRow{ display:flex; gap: 16px; align-items:center; }
.chkRadio{
  display:flex;
  align-items:center;
  gap: 8px;
  font-family:"Nata", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: rgba(20,20,20,.66);
}
.chkRadio input{ accent-color: var(--kAccent); }

.chkGrid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.chkGrid3{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}

.chkField{ display:block; }
.chkLabel{
  display:flex;
  align-items:center;
  gap: 8px;
  margin: 0 0 6px;
  font-family:"Nata", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: rgba(20,20,20,.62);
}
.chkInput, .chkSelect{
  width: 100%;
  height: 42px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.10);
  background:#fff;
  padding: 0 12px;
  outline:none;
  font-family:"Nata", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: rgba(20,20,20,.68);
}
.chkInput::placeholder{ color: rgba(20,20,20,.38); }

.chkErr{
  display:none;
  margin-top: 6px;
  font-family:"Nata", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 10px;
  font-weight: 600;
  color:#c62828;
}
.chkField.has-error .chkErr{ display:block; }
.chkField.has-error .chkInput,
.chkField.has-error .chkSelect{
  border-color: rgba(198,40,40,.65);
  box-shadow: 0 0 0 3px rgba(198,40,40,.10);
}

.chkWarn{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,59,31,.07);
  color: rgba(20,20,20,.68);
  font-family:"Nata", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
}

.chkChecks{ display:flex; flex-direction:column; gap: 10px; margin-top: 8px; }
.chkCheck{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  font-family:"Nata", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: rgba(20,20,20,.62);
}
.chkCheck input{ margin-top: 2px; accent-color: var(--kAccent); }
.chkLink{
  color: rgba(47,128,255,.95);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.chkActions{
  display:flex;
  justify-content:flex-end;
}
.chkBtn{
  height: 44px;
  border-radius: 999px;
  border: 0;
  cursor:pointer;
  padding: 0 22px;
  font-family:"Nata", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 11px;
  font-weight: 900;
}
.chkBtn--primary{ background: var(--kAccent); color:#fff; }
.chkBtn--ghost{ background: rgba(0,0,0,.05); color: rgba(20,20,20,.70); }

/* info button */
.chkInfoBtn{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 0;
  background: rgba(0,0,0,.08);
  color: rgba(20,20,20,.70);
  cursor:pointer;
  font-family: "Nata", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 900;
  display:grid;
  place-items:center;
  line-height: 1;
}

/* payment step layout */
.payGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.payTitleRow{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap: 10px;
  margin-bottom: 10px;
}
.payTitle{
  font-family:"Nata", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 11px;
  font-weight: 900;
  color: rgba(20,20,20,.78);
}
.payAmount--left{ display:flex; align-items:center; gap:6px; }
.payAmount{
  font-family:"Nata", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 11px;
  font-weight: 900;
  color: rgba(20,20,20,.78);
}
.payAmount span{ color: var(--kAccent); }

.payMethods{
  display:flex;
  gap: 18px;
  flex-wrap: wrap;
  margin: 10px 0 12px;
}
.payRadio{
  display:flex;
  gap: 8px;
  align-items:center;
  font-family:"Nata", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: rgba(20,20,20,.66);
}
.payRadio input{ accent-color: var(--kAccent); }

.payRow2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Align payment fields (desktop) */
@media (min-width: 900px){
  .payGrid{ align-items:start; }
  .payLeft .chkField[data-field="cardName"]{ margin-top: 0; }

@media (min-width: 900px){
  .payLeft .chkField[data-field="cardName"]{ margin-top: 21px; }
  .payLeft .chkField[data-field="cardName"].has-error{ margin-top: 41px; }
  /* safety: if parent fieldset gets has-error */
  .payLeft.has-error .chkField[data-field="cardName"]{ margin-top: 41px; }
}

}

.payActions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-top: 4px;
}
.payActions__right{ display:flex; gap: 10px; align-items:center; }

/* success */
.okWrap{
  max-width: 920px;
  margin: 0 auto;
  text-align:center;
  padding: 60px 0 20px;
}
.okIcon{
  width: 120px;
  height: 120px;
  border-radius: 999px;
  background: rgba(0,0,0,.03);
  margin: 0 auto 14px;
  display:grid;
  place-items:center;
  overflow:hidden;
}
.okIcon img{ width: 68px; height: 68px; object-fit: contain; }
.okName{
  font-family:"Nata", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: rgba(20,20,20,.62);
  margin-bottom: 4px;
}
.okTitle{
  margin: 0 0 16px;
  font-family:"Nata", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 13px;
  font-weight: 900;
  color: rgba(20,20,20,.78);
}
.okBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 220px;
  height: 44px;
  border-radius: 999px;
  background: var(--kAccent);
  color:#fff;
  text-decoration:none;
  font-family:"Nata", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 11px;
  font-weight: 900;
}
.okInfo{
  max-width: 620px;
  margin: 14px auto 0;
  font-family:"Nata", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 11px;
  line-height: 1.5;
  color: rgba(20,20,20,.62);
}
.okFoot{
  max-width: 520px;
  margin: 16px auto 0;
  font-family:"Nata", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: rgba(20,20,20,.42);
  line-height: 1.45;
}

/* =========================
   MODAL + TOAST
   ========================= */

/* Global backdrop to dim + block background interaction when modal is open */
#kBackdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.30);
  display: none;
  z-index: 10000;
}
#kBackdrop.is-open{ display:block; }

/* ===== Modal interaction layer =====
   Use #kBackdrop to dim + block background.
   Keep modal content crisp white (do NOT dim the modal itself). */
.kModal{ pointer-events:none; }
.kModal__dialog, .kModal__close{ pointer-events:auto; }
/* Internal overlay is kept fully transparent; backdrop handles dimming */
.kModal__overlay{ background: transparent !important; }


.kModal{
  position: fixed;
  inset: 0;
  display:none;
  z-index: 10010;
}
.kModal.is-open{ display:block; }
/* In-panel summary modal (Ayrıntılı İncele): pin to right panel rect (JS sets top/left/width/height) */
.kModal.is-inpanel{
  position: fixed;
  inset: auto;
  border-radius: 18px;
  overflow: hidden;
  z-index: 10010;
}
.kModal.is-inpanel .kModal__overlay{ background: transparent; }
.kModal.is-inpanel .kModal__dialog{
  position: absolute;
  left: 0;
  top: 0;
  transform: none;
  width: 100%;
  height: 100%;
  border-radius: 18px;
  box-shadow: none;
  background: #fff;
  padding: 18px 18px 14px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.kModal.is-inpanel .kModal__close{
  z-index: 2;
}



.kModal__overlay{
  position:absolute;
  inset:0;
  background: transparent;
}

.kModal__dialog{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(640px, calc(100% - 28px));
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 22px 70px rgba(0,0,0,.30);
  padding: 18px 18px 14px;
}

.kModal__close{
  position:absolute;
  right: 12px;
  top: 10px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 0;
  background: rgba(0,0,0,.06);
  cursor:pointer;
  font-size: 18px;
  line-height: 1;
}

.kModal__content{
  padding: 8px 6px 6px;
}

.kModal__actions{
  display:flex;
  justify-content:flex-start;
  gap: 10px;
  padding: 10px 6px 2px;
}

/* Summary modal content (Ayrıntılı İncele) */
.mTitle{
  font-family:"Nata", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 14px;
  font-weight: 900;
  color: rgba(20,20,20,.92);
  margin: 2px 0 10px;
}
.mList{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 12px;
  background: rgba(0,0,0,.02);
}
.mRow{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  padding: 8px 0;
  font-family:"Nata", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 11px;
  font-weight: 800;
  color: rgba(20,20,20,.82);
}
.mRow span:last-child{ white-space:nowrap; }
.mRow--strong{
  font-weight: 900;
  font-size: 12px;
}
.mSep{
  height: 1px;
  background: rgba(0,0,0,.10);
  margin: 8px 0;
}
.mText{
  font-family:"Nata", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 10px;
  font-weight: 800;
  color: rgba(20,20,20,.55);
  padding: 2px 0 6px;
}

.mField{ margin-top:10px; }
.mLabel{
  display:block;
  font-family:"Nata", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:10px;
  font-weight:900;
  color:rgba(20,20,20,.65);
  margin:0 0 6px;
}
.mInput{
  width:100%;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.12);
  padding:0 14px;
  font-family:"Nata", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:14px;
  font-weight:900;
  letter-spacing:2px;
  background:#fff;
}
.mInput:focus{
  outline:none;
  border-color:rgba(255,72,0,.55);
  box-shadow:0 0 0 2px rgba(255,72,0,.12);
}
.mErr{
  font-family:"Nata", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:10px;
  font-weight:900;
  color:#d60000;
  margin-top:6px;
}
.mBtn{
  height: 40px;
  border-radius: 999px;
  border: 0;
  cursor:pointer;
  padding: 0 14px;
  font-family:"Nata", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 11px;
  font-weight: 900;
}
.mBtn--ghost{
  background: rgba(0,0,0,.06);
  color: rgba(20,20,20,.86);
}
.mBtn--primary{
  background: var(--kAccent);
  color: #fff;
}

.kToast{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%) translateY(10px);
  background: rgba(20,20,20,.92);
  color:#fff;
  border-radius: 12px;
  padding: 10px 12px;
  font-family:"Nata", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 11px;
  font-weight: 800;
  opacity: 0;
  pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 10000;
}
.kToast.is-show{ opacity: 1; transform: translateX(-50%) translateY(0); }

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 980px){
  .ord__grid{
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 0 14px;
  }
  .ord__media{
    position: relative;
    top: auto;
    height: 56vw;
    max-height: 420px;
  }
  .ordPanel{ padding: 10px; }
  .chkCard{ padding: 16px; }
  .chkGrid3{ grid-template-columns: 1fr 1fr; }
  .payGrid{ grid-template-columns: 1fr; }
}

@media (max-width: 520px){
  .chk{ padding: 36px 12px 56px; }
  .chkGrid2{ grid-template-columns: 1fr; }
  .chkGrid3{ grid-template-columns: 1fr; }
  .payRow2{ grid-template-columns: 1fr; }
  .payActions{ flex-direction: column; align-items: stretch; }
  .payActions__right{ width: 100%; }
  .chkBtn{ width: 100%; justify-content:center; }
  .kModal__dialog{ width: min(560px, calc(100% - 22px)); }
}


/* =========================
   NEW: requested updates
   ========================= */

/* Headings -> Momo 18 */
.ordH,
.chkTitle,
.payTitle,
.okTitle,
.chkBlock__title{
  font-family:'Momo', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size:18px;
  line-height:1.25;
}

/* Config full background (desktop) */
.ord{ position:relative; overflow:hidden; }
.ordBg {
    display: none;
    position: absolute;
    inset: 0;
    background: url('../public/gallery-main.jpg') center/cover no-repeat;
}
.ord__grid{ position:relative; z-index:1; }

@media (min-width: 900px){
  .ordBg{ display:block; }
  .ord__media{ opacity:0; pointer-events:none; } /* keep layout, hide the left image */
}

/* Brochure link -> button feel + icon */
.ordLink--btn{
  display:inline-flex;
  align-items:center;
  align-self:center;
  gap:10px;
  padding:12px 16px;
  border-radius:999px;
  background:rgba(0,0,0,.05);
  color:rgba(20,20,20,.78);
  font-weight:900;
  text-decoration:none;
  margin: 10px auto 0;
  width: fit-content;
  align-self: center;
}
.ordLink--btn:hover{ background:rgba(0,0,0,.08); }
.ordLink__ico{ display:inline-flex; }

/* Smooth step transitions */
.chkView{
  transition: opacity .25s ease, transform .25s ease;
  transform: translateY(10px);
  opacity:0;
}
.chkView.is-active{
  transform:none;
  opacity:1;
}
.chkBackBtn{
  margin:0 0 12px;
}
.chkTopRight .chkBackBtn{
  margin:0;
}

/* Inline phone + verify button */
.chkInline{
  display:flex;
  align-items:center;
  gap:10px;
}
.chkInline .chkInput{ flex:1; }

.chkVerifyBtn{
  height:46px;
  border-radius:999px;
  border:0;
  padding:0 14px;
  cursor:pointer;
  font-family:'Nata', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size:11px;
  font-weight:900;
  background:rgba(0,0,0,.06);
  color:rgba(20,20,20,.75);
  white-space:nowrap;
}
.chkVerifyBtn.is-ok{
  background:rgba(0,0,0,.10);
  color:rgba(20,20,20,.75);
  cursor:default;
}

/* TC checkbox alignment */
.chkField--tc{ justify-self:stretch; }
.chkCheck--inline{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:'Nata', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size:11px;
  font-weight:800;
  color:rgba(20,20,20,.70);
  margin:0 0 8px;
}
.chkField--tc .chkLabel{
  text-align:right;
}
.chkField--tc .chkInput{
  max-width:240px;
  margin-left:auto;
}

.chkInlineRow--tckn{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  flex-wrap:nowrap;
}
.chkInlineRow--tckn .chkInput{ flex:1 1 auto; min-width: 220px; }
.chkCheck--tckn{ margin:0; white-space:nowrap; flex:0 0 auto; }
/* Textareas */
.chkTextarea{
  min-height:96px;
  padding-top:12px;
  padding-bottom:12px;
  resize:vertical;
}

/* Other payments list */
.otherPays{
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid rgba(0,0,0,.08);
}
.otherPays__title{
  font-family:'Nata', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size:12px;
  font-weight:900;
  color:rgba(20,20,20,.72);
  margin:0 0 10px;
}
.otherPays__list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.otherPays__item{
  display:grid;
  grid-template-columns: minmax(0, 260px) max-content;
  align-items:baseline;
  column-gap:14px;
  row-gap:2px;
  font-family:'Nata', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size:12px;
  font-weight:800;
  color:rgba(20,20,20,.68);
}
.otherPays__label{
  line-height:1.25;
}
.otherPays__val{
  font-weight:900;
  color:rgba(20,20,20,.82);
  margin-left:0;
  white-space:nowrap;
  justify-self:start;
  text-align:left;
}

/* keep values aligned on very small widths */
@media (max-width: 420px){
  .otherPays__item{ grid-template-columns: 1fr auto; }
}



/* Success page: plain background + image size */
.chk.chk--plain{ background:#fff; }
.chk.chk--plain .chk__bg{ display:none; }
.okIcon img{ width:110px; max-width:110px; height:auto; }

.chkCorpOnly[aria-hidden="true"]{ display:none; }


@media (max-width:420px){
  .chkInlineRow--tckn{ flex-wrap:wrap; }
  .chkInlineRow--tckn .chkInput{ min-width: 100%; }
}

/* Turkish date picker */
.trDatePicker{
  position:absolute;
  z-index: 11000;
  display:none;
}
.trDatePicker.is-open{ display:block; }
.trDP__card{
  width: 280px;
  background: rgba(245,245,242,.98);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
  padding: 10px;
  border: 1px solid rgba(0,0,0,.08);
}
.trDP__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding: 4px 6px 8px;
}
.trDP__title{
  font-family: var(--font-momo), system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color:#202121;
}
.trDP__nav{
  width: 32px; height: 28px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.8);
  cursor:pointer;
  font-size: 18px;
  line-height: 1;
}
.trDP__dow{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap:4px;
  padding: 0 4px 6px;
  font-family: var(--font-nata), system-ui, sans-serif;
  font-size: 12px;
  color: rgba(32,33,33,.72);
  text-align:center;
}
.trDP__grid{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap:4px;
  padding: 0 4px 6px;
}
.trDP__day{
  height: 32px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.85);
  cursor:pointer;
  font-family: var(--font-nata), system-ui, sans-serif;
  font-size: 13px;
}
.trDP__day:hover{ background: rgba(255,255,255,.98); }
.trDP__day.is-sel{
  border-color: rgba(255,75,30,.65);
  box-shadow: 0 0 0 2px rgba(255,75,30,.18);
}
.trDP__day.is-empty{
  border-color: transparent;
  background: transparent;
  cursor: default;
}