/* /satin-al — v3 sipariş sihirbazı. h5.css'in üstüne gelir. Seçici ön eki: h5s- */
.h5s-hero{padding:calc(var(--h5-nav-h) + clamp(40px,7vh,84px)) var(--h5-pad) 0;
  background-image:linear-gradient(90deg,var(--h5-rule) 1px,transparent 1px);background-size:8.3333vw 100%}
.h5s-hero-meta{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font:600 11.5px var(--h5-mono);letter-spacing:.14em;text-transform:uppercase}
.h5s-hero-meta b{color:var(--h5-scream);font-weight:600}
.h5s-hero h1{margin-top:22px;font-weight:900;font-stretch:62%;font-size:clamp(52px,9.4vw,170px);line-height:.86;letter-spacing:-.035em;text-transform:uppercase}
.h5s-hero h1 em{font-style:normal;color:var(--h5-scream)}
.h5s-hero p{margin-top:20px;font:400 14px/1.65 var(--h5-mono);letter-spacing:.02em;max-width:56ch}

/* Adım rayı: 5 durak, etkin olan turuncu dolar */
.h5s-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-top:36px;border-top:1.5px solid var(--h5-ink);border-bottom:1.5px solid var(--h5-ink)}
.h5s-step{display:flex;align-items:center;gap:12px;padding:16px 14px;border-left:1.5px solid var(--h5-ink);font:600 11.5px var(--h5-mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(10,10,10,.55);transition:background-color .3s,color .3s}
.h5s-step:first-child{border-left:0}
.h5s-step i{font-style:normal;font-weight:900;font-stretch:62%;font-family:var(--h5-display);font-size:26px;letter-spacing:-.03em;color:transparent;-webkit-text-stroke:1.5px currentColor;line-height:1}
.h5s-step.is-active{background:var(--h5-scream);color:var(--h5-ink)}
.h5s-step.is-active i,.h5s-step.is-done i{color:var(--h5-ink);-webkit-text-stroke:0}
.h5s-step.is-done{color:var(--h5-ink)}
.h5s-step.is-done i::after{content:" ✓";font-size:14px;font-family:var(--h5-mono);vertical-align:middle}

/* Gövde: sol sipariş fişi (sabit), sağ adım paneli */
.h5s-body{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,5vw,80px);padding:clamp(40px,6vw,80px) var(--h5-pad) clamp(72px,9vw,140px);align-items:start}
.h5s-ticket{position:sticky;top:calc(var(--h5-nav-h) + 28px);border:1.5px solid var(--h5-ink);background:var(--h5-paper)}
.h5s-ticket-head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1.5px solid var(--h5-ink);font:600 11.5px var(--h5-mono);letter-spacing:.14em;text-transform:uppercase}
.h5s-ticket-head b{background:var(--h5-scream);padding:3px 8px;font-weight:600}
.h5s-ticket dl{margin:0}
.h5s-ticket .h5s-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;padding:13px 16px;border-bottom:1px solid rgba(10,10,10,.2);font:400 12.5px/1.5 var(--h5-mono);letter-spacing:.02em}
.h5s-ticket dt{text-transform:uppercase;letter-spacing:.12em;font-size:10.5px;color:rgba(10,10,10,.6);padding-top:2px;white-space:nowrap}
.h5s-ticket dd{text-align:right;font-weight:500;overflow-wrap:anywhere}
.h5s-ticket .h5s-row.is-empty dd{color:rgba(10,10,10,.35)}
.h5s-total{padding:18px 16px;display:flex;justify-content:space-between;align-items:end;gap:12px}
.h5s-total span{font:600 11px var(--h5-mono);letter-spacing:.14em;text-transform:uppercase;padding-bottom:6px}
.h5s-total b{font-weight:900;font-stretch:62%;font-size:clamp(34px,3.2vw,52px);line-height:.86;letter-spacing:-.03em;white-space:nowrap}
.h5s-ticket-foot{padding:12px 16px;border-top:1.5px dashed var(--h5-ink);font:400 11px/1.6 var(--h5-mono);color:rgba(10,10,10,.65)}
.h5s-ticket-foot a{border-bottom:1px solid currentColor}

/* Adım paneli */
.h5s-panel [data-step][hidden]{display:none}
.h5s-title{display:flex;align-items:baseline;gap:18px;margin-bottom:26px;padding-bottom:18px;border-bottom:1.5px solid var(--h5-ink)}
.h5s-title i{font-style:normal;font-weight:900;font-stretch:62%;font-size:clamp(44px,5vw,84px);line-height:.8;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px var(--h5-ink)}
.h5s-title h2{font-weight:800;font-stretch:88%;font-size:clamp(24px,2.6vw,40px);letter-spacing:-.03em;line-height:1.02}
.h5s-title small{margin-left:auto;font:500 11px var(--h5-mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(10,10,10,.6);white-space:nowrap}

/* Paket kartları */
.h5s-cards{display:grid;gap:16px}
.h5s-card{position:relative;border:1.5px solid var(--h5-ink);padding:24px 26px;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 28px;transition:background-color .25s,transform .3s var(--h5-ease);outline:none}
.h5s-card:hover,.h5s-card:focus-visible{transform:translate(-3px,-3px);box-shadow:3px 3px 0 var(--h5-ink)}
.h5s-card.is-selected{background:var(--h5-ink);color:var(--h5-paper)}
.h5s-card .h5s-flag{position:absolute;right:-1.5px;top:-1.5px;background:var(--h5-scream);color:var(--h5-ink);font:600 10.5px var(--h5-mono);letter-spacing:.12em;text-transform:uppercase;padding:6px 10px}
.h5s-card h3{font-weight:900;font-stretch:66%;font-size:clamp(30px,3.4vw,52px);line-height:.92;letter-spacing:-.03em;text-transform:uppercase}
.h5s-card .h5s-tag{margin-top:8px;font:400 12.5px var(--h5-mono);letter-spacing:.02em;opacity:.75}
.h5s-card .h5s-price{text-align:right;font-weight:900;font-stretch:62%;font-size:clamp(34px,4vw,64px);line-height:.86;letter-spacing:-.03em;white-space:nowrap}
.h5s-card .h5s-price small{display:block;margin-top:8px;font:500 11px var(--h5-mono);letter-spacing:.12em;text-transform:uppercase;opacity:.75}
.h5s-card ul{grid-column:1/-1;columns:2;column-gap:28px;border-top:1px solid rgba(128,128,128,.35);padding-top:14px;margin:4px 0 0}
.h5s-card li{break-inside:avoid;font:400 12.5px/1.5 var(--h5-mono);padding:5px 0;display:flex;gap:10px}
.h5s-card li::before{content:"+";color:var(--h5-scream);font-weight:600}
.h5s-card .h5s-pick{grid-column:1/-1;font:600 11.5px var(--h5-mono);letter-spacing:.12em;text-transform:uppercase}
.h5s-card.is-selected .h5s-pick{color:var(--h5-scream)}

/* Form parçaları */
.h5s-form{display:grid;gap:18px}
.h5s-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.h5s-field{display:grid;gap:8px;font:600 11px var(--h5-mono);letter-spacing:.12em;text-transform:uppercase}
.h5s-field input,.h5s-field textarea,.h5s-field select{width:100%;border:1.5px solid var(--h5-ink);background:var(--h5-paper);color:var(--h5-ink);font:400 15px var(--h5-display);padding:13px 14px;border-radius:0;letter-spacing:0;text-transform:none;transition:box-shadow .2s}
.h5s-field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--h5-ink) 50%),linear-gradient(135deg,var(--h5-ink) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.h5s-field input:focus,.h5s-field textarea:focus,.h5s-field select:focus{outline:none;box-shadow:3px 3px 0 var(--h5-scream)}
.h5s-field input::placeholder,.h5s-field textarea::placeholder{color:rgba(10,10,10,.4)}
.h5s-hint{font:400 12px/1.55 var(--h5-mono);letter-spacing:.02em;text-transform:none;color:rgba(10,10,10,.65)}
.h5s-legend{margin-top:10px;padding-top:18px;border-top:1.5px solid var(--h5-ink);font-weight:800;font-stretch:88%;font-size:22px;letter-spacing:-.03em}
.h5s-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.h5s-choice{position:relative;display:grid;gap:6px;border:1.5px solid var(--h5-ink);padding:16px 18px;cursor:pointer;transition:background-color .25s,color .25s}
.h5s-choice input{position:absolute;opacity:0;pointer-events:none}
.h5s-choice b{font-weight:800;font-stretch:88%;font-size:17px;letter-spacing:-.02em}
.h5s-choice span{font:400 12px/1.5 var(--h5-mono);opacity:.75}
.h5s-choice.is-selected{background:var(--h5-ink);color:var(--h5-paper)}
.h5s-radios{display:flex;gap:10px;flex-wrap:wrap}
.h5s-radios label{position:relative;border:1.5px solid var(--h5-ink);padding:10px 16px;font:600 12px var(--h5-mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.h5s-radios label.is-selected{background:var(--h5-ink);color:var(--h5-paper)}
.h5s-radios input{position:absolute;opacity:0;pointer-events:none}
.h5s-check{display:flex;gap:12px;align-items:flex-start;font:400 12.5px/1.55 var(--h5-mono);cursor:pointer}
.h5s-check input{width:18px;height:18px;margin-top:1px;accent-color:var(--h5-scream);flex:none}
.h5s-inline{display:flex;gap:12px;align-items:stretch}
.h5s-inline .h5s-field{flex:1}
.h5s-inline .h5-btn{align-self:end;height:48px;white-space:nowrap}
.h5s-status{border:1.5px solid var(--h5-ink);padding:14px 16px;font:400 12.5px/1.6 var(--h5-mono)}
.h5s-status.is-ok{background:var(--h5-ink);color:var(--h5-paper)}
.h5s-status.is-warn{background:#fff3ea;border-color:var(--h5-scream)}
.h5s-status.is-bad{background:var(--h5-scream);color:var(--h5-ink)}
.h5s-err{display:none;font:600 12.5px/1.5 var(--h5-mono);color:var(--h5-scream);border-left:3px solid var(--h5-scream);padding-left:12px}
.h5s-err.is-on{display:block}
.h5s-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.h5s-nav{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:28px;padding-top:22px;border-top:1.5px solid var(--h5-ink)}
.h5s-nav .h5-btn{height:52px;padding:0 26px;font-size:13.5px;border:0;cursor:pointer}
.h5s-nav .h5-btn:disabled{opacity:.35;cursor:not-allowed;transform:none;box-shadow:none}
.h5-btn.is-ghost{border:1.5px solid var(--h5-ink)}
button.h5-btn{cursor:pointer;border:0}

/* Özet tablosu */
.h5s-summary{border:1.5px solid var(--h5-ink)}
.h5s-summary .h5s-row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;padding:14px 18px;border-bottom:1px solid rgba(10,10,10,.2);font:400 13px/1.5 var(--h5-mono)}
.h5s-summary .h5s-row span{text-transform:uppercase;letter-spacing:.12em;font-size:11px;color:rgba(10,10,10,.6)}
.h5s-summary .h5s-row b{font-weight:500;overflow-wrap:anywhere}
.h5s-summary .h5s-total{border-top:1.5px solid var(--h5-ink)}
.h5s-note{margin-top:16px;font:400 12.5px/1.6 var(--h5-mono);color:rgba(10,10,10,.65)}

/* Teşekkür / tamam */
.h5s-done h2{font-weight:900;font-stretch:62%;font-size:clamp(48px,7vw,120px);line-height:.86;letter-spacing:-.035em;text-transform:uppercase}
.h5s-done h2 em{font-style:normal;color:var(--h5-scream)}
.h5s-done p{margin-top:18px;font:400 14px/1.65 var(--h5-mono)}
.h5s-ref{display:inline-block;margin-top:14px;background:var(--h5-ink);color:var(--h5-paper);font:600 16px var(--h5-mono);letter-spacing:.1em;padding:10px 16px}
.h5s-bank{margin-top:26px;border:1.5px solid var(--h5-ink)}
.h5s-bank .h5s-row{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;padding:13px 18px;border-bottom:1px solid rgba(10,10,10,.2);font:400 13px/1.5 var(--h5-mono)}
.h5s-bank .h5s-row span{text-transform:uppercase;letter-spacing:.12em;font-size:11px;color:rgba(10,10,10,.6)}
.h5s-bank .h5s-row b{font-weight:600;overflow-wrap:anywhere}
.h5s-bank .h5s-row:last-child{border-bottom:0;background:#fff3ea}
.h5s-done .h5s-nav{justify-content:flex-start}
.h5s-resume{margin:0 var(--h5-pad) 40px;padding:14px 18px;border:1.5px dashed var(--h5-ink);font:400 12.5px var(--h5-mono)}
.h5s-resume a{border-bottom:1px solid currentColor;font-weight:600}

@media (max-width:860px){
  .h5s-hero{padding-top:calc(var(--h5-nav-h) + 28px)}
  .h5s-hero h1{font-size:15vw}
  .h5s-steps{margin-top:24px}
  .h5s-step{flex-direction:column;gap:4px;padding:10px 4px;font-size:9px;letter-spacing:.06em;text-align:center}
  .h5s-step i{font-size:20px}
  .h5s-body{grid-template-columns:1fr;gap:22px;padding:24px var(--h5-pad) 72px}
  .h5s-ticket{position:static}
  .h5s-ticket .h5s-row,.h5s-ticket-foot{display:none}
  .h5s-ticket .h5s-total{padding:14px 16px}
  .h5s-ticket.is-open .h5s-row{display:grid}
  .h5s-ticket.is-open .h5s-ticket-foot{display:block}
  .h5s-grid,.h5s-choices{grid-template-columns:1fr}
  .h5s-card{grid-template-columns:1fr}
  .h5s-card .h5s-price{text-align:left}
  .h5s-card ul{columns:1}
  .h5s-inline{flex-direction:column}
  .h5s-inline .h5-btn{align-self:stretch;justify-content:center}
  .h5s-summary .h5s-row,.h5s-bank .h5s-row{grid-template-columns:1fr;gap:4px}
  .h5s-title{flex-wrap:wrap;gap:10px 14px}
  .h5s-title small{margin-left:0;width:100%}
  .h5s-nav .h5-btn{flex:1;justify-content:center}
}
.h5s-ticket-toggle{font:600 11px var(--h5-mono);letter-spacing:.12em;text-transform:uppercase;border:0;background:none;color:var(--h5-ink);cursor:pointer;padding:0;border-bottom:1.5px solid currentColor}
@media (min-width:861px){.h5s-ticket-toggle{display:none}}