/* ==========================================================================
   EK Takip — Hizmet detay (pages/service.css) · sınıf öneki: .svc-
   ========================================================================== */

.svc-page { padding: 28px 0 0; }
.svc-grid { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 32px; align-items: start; }
.svc-grid-bottom { margin-top: 56px; }
.svc-main { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.svc-side { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.svc-card { background: var(--ek-card); border: 1px solid var(--ek-border); border-radius: var(--ek-r-xl); padding: 24px; }
.svc-card-title { margin: 0 0 18px; font-family: var(--ek-font); font-size: 1.125rem; font-weight: 800; letter-spacing: -.01em; }
.svc-stars { display: inline-flex; gap: 3px; color: var(--ek-amber); font-size: .85rem; }
.svc-stars.sm { font-size: .72rem; gap: 2px; }

/* Pastel ikon kutuları */
.svc-ib-blue { background: rgba(31, 91, 255, .1); color: var(--ek-blue); }
.svc-ib-orange { background: rgba(255, 122, 26, .12); color: var(--ek-orange); }
.svc-ib-green { background: rgba(18, 183, 106, .12); color: var(--ek-success); }
.svc-ib-amber { background: rgba(255, 176, 32, .16); color: #F79009; }
.svc-ib-sky { background: rgba(45, 156, 255, .12); color: var(--ek-sky); }

/* ---------- Ürün başlığı ---------- */
.svc-head { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; column-gap: 20px; align-items: start; padding: 28px; border-radius: var(--ek-r-xl); background: var(--ek-card); border: 1px solid var(--ek-border); }
.svc-head-ic.has-img { overflow: hidden; background: #fff; box-shadow: 0 14px 28px rgba(7, 19, 48, .18); }
.svc-head-ic.has-img > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-head-ic { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 20px; font-size: 2rem; box-shadow: 0 14px 28px rgba(214, 41, 118, .3); margin-top: 10px; }
.svc-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 6px; background: var(--ek-subtle); color: var(--ek-blue); font-size: .6875rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.svc-badge-orange { background: rgba(255, 122, 26, .14); color: var(--ek-orange-600); }
.svc-title { margin: 0 0 8px; font-size: clamp(1.6rem, 1.1rem + 1.4vw, 1.94rem); line-height: 1.12; letter-spacing: -.03em; }
.svc-rating { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: .875rem; font-weight: 500; }
.svc-rating > b { font-weight: 800; }
.svc-rating-sep { width: 1px; height: 14px; background: var(--ek-border-strong); }
.svc-head-actions { display: flex; gap: 8px; }
.svc-head-actions .ek-iconbtn { width: 42px; height: 42px; font-size: 1.05rem; }
.svc-fav[aria-pressed="true"] { color: var(--ek-danger); border-color: rgba(240, 68, 56, .35); background: rgba(240, 68, 56, .06); }
.svc-desc { grid-column: 1 / -1; margin: 22px 0 18px; font-size: .97rem; line-height: 1.7; color: var(--ek-text-2); font-weight: 500; }
.svc-chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; }
.svc-chip { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 10px; font-size: .84rem; font-weight: 700; white-space: nowrap; }
.svc-chip.is-green { background: rgba(18, 183, 106, .1); color: var(--ek-success-600); }
.svc-chip.is-blue { background: rgba(31, 91, 255, .08); color: var(--ek-blue); }
.svc-chip.is-orange { background: rgba(255, 122, 26, .1); color: var(--ek-orange-600); }
.svc-chip.is-sky { background: rgba(45, 156, 255, .1); color: #1A86E8; }

/* ---------- Adımlar ---------- */
.svc-step-title { margin: 0 0 14px; font-family: var(--ek-font); font-size: 1.125rem; font-weight: 800; letter-spacing: -.01em; }
.svc-types { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; padding: 6px; border-radius: 18px; background: var(--ek-card); border: 1px solid var(--ek-border); }
.svc-types button { height: 44px; padding: 0 10px; border: 0; border-radius: 12px; background: none; color: var(--ek-text-2); font-weight: 600; font-size: .9375rem; white-space: nowrap; transition: all var(--ek-fast) var(--ek-ease); }
.svc-types button:hover { color: var(--ek-blue); background: var(--ek-tint); }
.svc-types button.active { background: var(--ek-grad-blue); color: #fff; font-weight: 700; box-shadow: var(--ek-shadow-blue); }

/* Paket kartları */
.svc-packs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.svc-pack { position: relative; display: flex; flex-direction: column; padding: 18px 18px 16px; border-radius: 20px; background: var(--ek-card); border: 1px solid var(--ek-border); cursor: pointer; transition: transform var(--ek-fast) var(--ek-ease), box-shadow var(--ek-fast) var(--ek-ease), border-color var(--ek-fast); }
.svc-pack:hover { transform: translateY(-3px); box-shadow: var(--ek-shadow-sm); border-color: var(--ek-border-strong); }
.svc-pack input { position: absolute; opacity: 0; pointer-events: none; }
.svc-pack-top { display: flex; flex-direction: column; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--ek-border); }
.svc-pack-qty { font-family: var(--ek-display); font-size: 1.75rem; font-weight: 700; line-height: 1.1; letter-spacing: -.03em; }
.svc-pack-top small, .svc-pack-foot small { font-size: .78rem; color: var(--ek-muted); font-weight: 500; }
.svc-pack-foot s { display: block; font-size: .8125rem; color: var(--ek-muted); font-weight: 500; }
.svc-pack-price { font-size: 1.15rem; font-weight: 800; white-space: nowrap; }
.svc-pack-foot small { white-space: nowrap; }
.svc-pack-radio { position: absolute; top: 18px; right: 18px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--ek-border-strong); background: var(--ek-card); transition: all var(--ek-fast); }
.svc-pack:has(input:checked) { border: 2px solid var(--ek-blue); padding: 17px 17px 15px; background: var(--ek-tint); box-shadow: 0 14px 30px rgba(31, 91, 255, .14); }
.svc-pack:has(input:checked) .svc-pack-radio { top: 17px; right: 17px; border: 0; background: var(--ek-blue); }
.svc-pack:has(input:checked) .svc-pack-radio::after { content: "\F26E"; font-family: "bootstrap-icons"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 1rem; }
.svc-pack:has(input:checked) .svc-pack-qty, .svc-pack:has(input:checked) .svc-pack-price { color: var(--ek-blue); }
.svc-pack:has(input:focus-visible) { box-shadow: var(--ek-ring); }
.svc-pack-flag { position: absolute; left: 16px; top: -10px; padding: 2px 8px; border-radius: 6px; background: var(--ek-grad-orange); color: #fff; font-size: .625rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; line-height: 1.5; }
.svc-pack-flag.is-green { background: var(--ek-success); }

/* Özel miktar */
.svc-custom { margin-top: 13px; padding: 22px; border-radius: 22px; background: var(--ek-card); border: 1px solid var(--ek-border); transition: border-color var(--ek-fast), box-shadow var(--ek-fast); }
.svc-custom.is-active { border: 2px solid var(--ek-blue); padding: 21px; background: var(--ek-tint); box-shadow: 0 14px 30px rgba(31, 91, 255, .12); }
.svc-custom-head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.svc-custom-head .ek-ibox { --s: 40px; border-radius: 12px; font-size: 1.05rem; }
.svc-custom-head b { font-size: 1rem; font-weight: 800; }
.svc-stepper { display: flex; align-items: stretch; height: 44px; border-radius: 13px; border: 1px solid var(--ek-border); background: var(--ek-card); overflow: hidden; }
.svc-stepper button { width: 42px; border: 0; background: var(--ek-bg); color: var(--ek-text); font-size: 1rem; transition: all var(--ek-fast); }
.svc-stepper button:hover { color: var(--ek-blue); background: var(--ek-subtle); }
.svc-stepper input { width: 88px; border: 0; border-inline: 1px solid var(--ek-border); background: none; text-align: center; font-weight: 800; font-size: .9375rem; color: var(--ek-text); outline: 0; }
.svc-stepper:focus-within { border-color: var(--ek-blue); box-shadow: var(--ek-ring); }
.svc-range { --p: 1.4%; width: 100%; height: 22px; margin: 0; background: none; -webkit-appearance: none; appearance: none; cursor: pointer; }
.svc-range::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: linear-gradient(90deg, #1747F0, #2D9CFF) 0 / var(--p) 100% no-repeat, var(--ek-subtle); }
.svc-range::-moz-range-track { height: 6px; border-radius: 99px; background: var(--ek-subtle); }
.svc-range::-moz-range-progress { height: 6px; border-radius: 99px; background: linear-gradient(90deg, #1747F0, #2D9CFF); }
.svc-range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: #fff; border: 4px solid var(--ek-blue); box-shadow: 0 4px 10px rgba(31, 91, 255, .35); transition: transform var(--ek-fast); }
.svc-range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 4px solid var(--ek-blue); box-shadow: 0 4px 10px rgba(31, 91, 255, .35); }
.svc-range:active::-webkit-slider-thumb { transform: scale(1.12); }
.svc-range:focus-visible { outline: none; }
.svc-range:focus-visible::-webkit-slider-thumb { box-shadow: var(--ek-ring); }
.svc-range-scale { display: flex; justify-content: space-between; margin-top: 8px; font-size: .75rem; color: var(--ek-muted); font-weight: 600; }

/* Hizmet özellikleri */
.svc-feat { display: flex; align-items: center; gap: 14px; height: 100%; padding: 12px 14px; border-radius: 14px; background: var(--ek-bg); }
.svc-feat-ic { width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center; border-radius: 10px; background: var(--ek-card); color: var(--ek-blue); box-shadow: var(--ek-shadow-xs); }
.svc-feat small { display: block; font-size: .78rem; color: var(--ek-muted); font-weight: 500; }
.svc-feat b { display: block; font-size: .9375rem; font-weight: 800; }

/* ---------- Sipariş kartı ---------- */
.svc-order { padding: 24px; box-shadow: var(--ek-shadow); }
.svc-sum { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; background: var(--ek-subtle); }
.svc-sum .ek-ibox { --s: 48px; border-radius: 14px; font-size: 1.35rem; }
.svc-sum b { display: block; font-size: 1rem; font-weight: 800; }
.svc-sum small { display: block; font-size: .78rem; color: var(--ek-muted); font-weight: 500; }
.svc-sum-price { color: var(--ek-blue); font-size: 1.15rem !important; white-space: nowrap; }
.svc-handle { display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 12px 0 6px; border-radius: 14px; border: 1px solid var(--ek-border); background: var(--ek-card); transition: border-color var(--ek-fast), box-shadow var(--ek-fast); }
.svc-handle:hover { border-color: var(--ek-border-strong); }
.svc-handle:focus-within, .svc-handle.is-valid { border: 2px solid var(--ek-blue); padding: 0 11px 0 5px; }
.svc-handle:focus-within { box-shadow: var(--ek-ring); }
.svc-handle.is-invalid { border: 2px solid var(--ek-danger); padding: 0 11px 0 5px; box-shadow: var(--ek-ring-danger); }
.svc-at { width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; border-radius: 10px; background: var(--ek-subtle); color: var(--ek-blue); font-weight: 800; }
.svc-handle-input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: var(--ek-text); font-weight: 600; font-size: 1rem; }
.svc-handle-input::placeholder { color: var(--ek-muted); font-weight: 500; font-size: .9rem; }
.svc-handle-state { display: none; font-size: 1.3rem; color: var(--ek-success); }
.svc-handle.is-valid .svc-handle-state, .svc-handle.is-loading .svc-handle-state { display: block; }
.svc-handle.is-loading .svc-handle-state { color: var(--ek-blue); }
.svc-found { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 12px 12px 12px 10px; border-radius: 14px; background: rgba(18, 183, 106, .08); border: 1px solid rgba(18, 183, 106, .35); animation: ekFade .25s var(--ek-ease); }
.svc-found[hidden] { display: none; }
.svc-found.is-loading { background: var(--ek-bg); border-color: var(--ek-border); }
.svc-found-av { width: 42px; height: 42px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; overflow: hidden; background: var(--ek-grad-blue); color: #fff; font-family: var(--ek-display); font-weight: 700; }
.svc-found-av img { width: 100%; height: 100%; object-fit: cover; }
.svc-found b { display: block; font-size: .9375rem; font-weight: 800; }
.svc-found small { display: block; font-size: .78rem; color: var(--ek-text-2); font-weight: 500; }
.svc-found .ek-badge { border-radius: 8px; padding: 4px 9px; }
.svc-note { display: flex; gap: 8px; margin: 10px 0 0; font-size: .75rem; line-height: 1.5; color: var(--ek-muted); font-weight: 500; }
.svc-note .bi { margin-top: 1px; }
.svc-extra { padding: 12px 14px; border-radius: 14px; gap: 12px; }
.svc-extra:has(input:checked) { padding: 11px 13px; }
.svc-extra b { display: block; font-size: .9375rem; font-weight: 800; line-height: 1.3; }
.svc-extra small { display: block; font-size: .75rem; color: var(--ek-muted); font-weight: 500; }
.svc-extra .svc-extra-price { font-size: .9375rem; white-space: nowrap; }
.svc-coupon { display: flex; gap: 8px; margin-top: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--ek-border); }
.svc-coupon-on { flex: 1; display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px; border-radius: 13px; background: var(--ek-bg); border: 1px solid var(--ek-border); }
.svc-coupon-on .bi { color: var(--ek-success); font-size: 1.05rem; }
.svc-coupon-on b { font-family: var(--ek-display); font-weight: 700; letter-spacing: .02em; }
.svc-coupon-on small { font-size: .78rem; color: var(--ek-success); font-weight: 700; }
.svc-coupon .form-control { min-height: 46px; text-transform: uppercase; }
.svc-coupon .btn-ek { --h: 46px; }
.svc-lines { padding-top: 14px; }
.svc-lines .ek-kv { padding: 4px 0; font-size: .9375rem; }
.svc-lines .ek-kv > span:first-child { font-weight: 500; }
.svc-lines .ek-kv > span:last-child { font-weight: 800; }
.svc-total { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 14px 0 20px; }
.svc-total b { display: block; font-size: 1.05rem; font-weight: 800; }
.svc-total small { display: block; font-size: .75rem; color: var(--ek-muted); font-weight: 500; }
.svc-total-v { font-family: var(--ek-display); font-size: 2.25rem !important; font-weight: 800 !important; line-height: 1; letter-spacing: -.035em; }
.svc-total-v.is-bump { animation: svcBump .35s var(--ek-ease); }
@keyframes svcBump { 40% { transform: scale(1.05); color: var(--ek-blue); } }
.svc-buy { --h: 56px; box-shadow: 0 14px 30px rgba(255, 122, 26, .32); }
.svc-minis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 20px; }
.svc-minis > div { display: flex; flex-direction: column; align-items: center; padding: 12px 6px; border-radius: 14px; background: var(--ek-bg); text-align: center; }
.svc-minis .bi { color: var(--ek-blue); font-size: 1rem; margin-bottom: 4px; }
.svc-minis small { font-size: .72rem; color: var(--ek-muted); font-weight: 500; }
.svc-minis b { font-size: .875rem; font-weight: 800; }
.svc-secure { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 16px 0 0; font-size: .78rem; color: var(--ek-text-2); font-weight: 600; }
.svc-secure .bi { color: var(--ek-success); }

.svc-help { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 22px; }
.svc-help .ek-ibox { --s: 44px; border-radius: 13px; }
.svc-help b { display: block; font-size: .9375rem; font-weight: 800; }
.svc-help small { display: block; font-size: .8125rem; color: var(--ek-text-2); font-weight: 500; }

/* ---------- Sekmeler ---------- */
.svc-tabs-card { padding: 0; overflow: hidden; }
.svc-tabs { gap: 28px; padding: 4px 28px 0; }
.svc-tabs > button { padding: 18px 4px 16px; font-size: .9375rem; }
.svc-tab-body { padding: 28px 32px 32px; }
.svc-prose-title { margin: 0 0 14px; font-size: clamp(1.25rem, 1rem + .6vw, 1.5rem); letter-spacing: -.02em; }
.svc-prose-sub { margin: 22px 0 12px; font-family: var(--ek-font); font-size: 1.0625rem; font-weight: 800; }
.svc-tab-body p { color: var(--ek-text-2); font-size: .9375rem; line-height: 1.75; font-weight: 500; }
.svc-checks { display: grid; gap: 10px; margin: 0 0 18px; padding: 0; list-style: none; font-size: .9375rem; font-weight: 500; }
.svc-checks li { position: relative; padding-left: 32px; }
.svc-checks li::before { content: "\F26E"; font-family: "bootstrap-icons"; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; background: var(--ek-subtle); color: var(--ek-blue); font-size: .95rem; }
.svc-safe { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; background: var(--ek-subtle); }
.svc-safe .ek-ibox { --s: 40px; border-radius: 12px; }
.svc-safe b { display: block; font-size: .9375rem; font-weight: 800; }
.svc-safe small { display: block; font-size: .8125rem; color: var(--ek-text-2); font-weight: 500; }
.svc-how { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.svc-how li { display: flex; gap: 14px; padding: 16px; border-radius: 16px; background: var(--ek-bg); }
.svc-how-n { width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: var(--ek-grad-blue); color: #fff; font-family: var(--ek-display); font-weight: 700; }
.svc-how b { display: block; font-weight: 800; }
.svc-how small { display: block; font-size: .875rem; color: var(--ek-text-2); font-weight: 500; line-height: 1.55; }
.svc-revs { display: grid; gap: 14px; }
.svc-rev { padding: 18px; border-radius: 18px; border: 1px solid var(--ek-border); }
.svc-rev header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.svc-rev header b { display: block; font-weight: 800; }
.svc-rev header small { font-size: .75rem; color: var(--ek-muted); font-weight: 600; }
.svc-rev p { margin: 0; }

/* ---------- Benzer hizmetler & puan ---------- */
.svc-similar { padding: 20px; }
.svc-similar > div a { color: var(--ek-blue); }
.svc-sim { display: flex; align-items: center; gap: 12px; padding: 10px 8px; margin: 0 -8px; border-radius: 14px; color: var(--ek-text); transition: background-color var(--ek-fast); }
.svc-sim:hover { background: var(--ek-tint); color: var(--ek-text); }
.svc-sim .ek-ibox { --s: 42px; border-radius: 12px; font-size: 1.05rem; }
.svc-sim b { display: block; font-size: .9375rem; font-weight: 800; line-height: 1.3; }
.svc-sim small { display: block; font-size: .75rem; color: var(--ek-muted); font-weight: 500; }
.svc-sim em { font-style: normal; color: var(--ek-blue); font-weight: 800; font-size: .8125rem; }
.svc-sim-go { width: 32px; height: 32px; flex-shrink: 0; display: grid; place-items: center; border-radius: 9px; background: var(--ek-bg); color: var(--ek-text-2); font-size: .8rem; transition: all var(--ek-fast); }
.svc-sim:hover .svc-sim-go { background: var(--ek-grad-blue); color: #fff; transform: translateX(2px); }
.svc-score { padding: 24px; border-radius: var(--ek-r-xl); background: var(--ek-ink-900); color: #fff; }
.svc-score-big { font-family: var(--ek-display); font-size: 3.4rem; font-weight: 800; line-height: .9; letter-spacing: -.04em; background: var(--ek-grad-orange); -webkit-background-clip: text; background-clip: text; color: transparent; }
.svc-score small { font-size: .8125rem; color: rgba(255, 255, 255, .85); font-weight: 600; margin-top: 4px; }
.svc-bars { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.svc-bars li { display: grid; grid-template-columns: 34px 1fr 40px; align-items: center; gap: 12px; font-size: .8125rem; font-weight: 700; }
.svc-bars li .bi { color: var(--ek-amber); font-size: .65rem; }
.svc-bars li b { text-align: right; font-weight: 700; }
.svc-bar { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.svc-bar i { display: block; height: 100%; min-width: 4px; border-radius: inherit; background: var(--ek-grad-blue); }

/* ---------- Mobil satın alma çubuğu ---------- */
.svc-buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1034; display: flex; align-items: center; gap: 14px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--ek-card) 96%, transparent); backdrop-filter: blur(14px); border-top: 1px solid var(--ek-border); box-shadow: 0 -12px 30px rgba(11, 31, 77, .1); }
.svc-buybar-total { display: flex; flex-direction: column; min-width: 0; }
.svc-buybar-total small { font-size: .75rem; color: var(--ek-muted); font-weight: 600; }
.svc-buybar-total s { margin-left: 4px; }
.svc-buybar-total b { font-family: var(--ek-display); font-size: 1.5rem; font-weight: 800; line-height: 1.1; letter-spacing: -.03em; }
.svc-buybar .btn-ek { flex: 1; --h: 54px; }

/* ---------- Karanlık tema ---------- */
[data-bs-theme="dark"] .svc-head-ic { box-shadow: none; }
[data-bs-theme="dark"] .svc-score { border: 1px solid var(--ek-border); }

/* ---------- Duyarlı ---------- */
@media (min-width: 1200px) {
  .svc-side .svc-order { position: sticky; top: calc(var(--ek-header-h) + 76px); }
}
@media (max-width: 1399.98px) {
  .svc-grid { grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; }
  .svc-types button { font-size: .84rem; padding: 0 6px; }
  .svc-pack { padding: 16px 14px 14px; }
  .svc-pack:has(input:checked) { padding: 15px 13px 13px; }
  .svc-pack-foot small { display: none; }
}
@media (max-width: 1199.98px) {
  .svc-grid { grid-template-columns: minmax(0, 1fr) 360px; }
  .svc-packs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-pack-foot small { display: inline; }
  .svc-types { display: flex; overflow-x: auto; scrollbar-width: none; }
  .svc-types::-webkit-scrollbar { display: none; }
  .svc-types button { flex: 1 0 auto; padding: 0 14px; }
}
@media (max-width: 991.98px) {
  .page-service .ek-bottomnav { display: none; }
  .svc-grid { grid-template-columns: 1fr; }
  .svc-grid-bottom { margin-top: 28px; }
  .svc-packs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .svc-order { box-shadow: none; }
  /* Mobilde sipariş kartı paket seçiminin hemen ardından gelsin */
  .svc-grid { display: flex; flex-direction: column; gap: 24px; }
  .svc-grid > .svc-main, .svc-grid > .svc-side { display: contents; }
  .svc-order { order: 1; }
  .svc-feats, .svc-help { order: 2; }
}
@media (max-width: 767.98px) {
  .svc-packs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .svc-head { grid-template-columns: 64px minmax(0, 1fr); padding: 20px; column-gap: 14px; border-radius: 24px; }
  .svc-head-ic { width: 64px; height: 64px; border-radius: 18px; font-size: 1.75rem; margin-top: 0; }
  .svc-head-actions { grid-column: 2; margin-top: 12px; }
  .svc-head-actions .ek-iconbtn { width: 36px; height: 36px; font-size: .95rem; border-radius: 11px; }
  .svc-head .svc-badge { display: none; }
  .svc-desc { margin: 14px 0 14px; font-size: .9375rem; }
  .svc-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -20px; padding-right: 20px; }
  .svc-chips::-webkit-scrollbar { display: none; }
  .svc-chip { height: 34px; font-size: .8rem; padding: 0 12px; }
  .svc-tabs { gap: 18px; padding: 0 16px; }
  .svc-tab-body { padding: 22px 18px 24px; }
}
@media (max-width: 575.98px) {
  .svc-page { padding-top: 16px; }
  .svc-main { gap: 22px; }
  .svc-title { font-size: 1.45rem; }
  .svc-head .svc-head-body { grid-column: 2; }
  .svc-rating { font-size: .8125rem; }
  .svc-rating-sep, .svc-rating > span:last-child { display: none; }
  .svc-types { background: none; border: 0; padding: 0; gap: 8px; }
  .svc-types button { height: 42px; border: 1px solid var(--ek-border); background: var(--ek-card); border-radius: 12px; }
  .svc-types button.active { border-color: transparent; }
  .svc-pack { padding: 14px 14px 12px; }
  .svc-pack:has(input:checked) { padding: 13px 13px 11px; }
  .svc-pack-top { border-bottom: 0; padding-bottom: 6px; margin-bottom: 4px; }
  .svc-pack-qty { font-size: 1.5rem; }
  .svc-pack-foot { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: baseline; gap: 6px; flex-wrap: wrap-reverse; }
  .svc-pack-foot s { font-size: .72rem; }
  .svc-pack-foot small[data-unit-label] { display: none; }
  .svc-pack-radio { top: 14px; right: 14px; }
  .svc-pack:has(input:checked) .svc-pack-radio { top: 13px; right: 13px; }
  .svc-custom { padding: 18px; }
  .svc-custom.is-active { padding: 17px; }
  .svc-custom-head { flex-wrap: wrap; }
  .svc-stepper { width: 100%; }
  .svc-stepper input { flex: 1; }
  .svc-card { padding: 18px; border-radius: 24px; }
  .svc-order { padding: 18px; }
  .svc-total-v { font-size: 2rem !important; }
  .svc-help .btn-ek { padding: 0 14px; }
}

/* ---------- Canlı mod (sunucu verisiyle) ---------- */
.svc-page [hidden], .svc-buybar[hidden], .svc-buybar [hidden] { display: none !important; }
.svc-page.is-loading .svc-grid { opacity: .55; pointer-events: none; transition: opacity .2s var(--ek-ease); }
.svc-types button { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.svc-err { display: flex; align-items: flex-start; gap: 6px; margin-top: 8px; font-size: .8125rem; line-height: 1.45; font-weight: 600; color: var(--ek-danger); }
.svc-err .bi { margin-top: 2px; }
.svc-comments { padding: 22px; border-radius: 22px; background: var(--ek-card); border: 1px solid var(--ek-border); }
.svc-comments .form-label small { font-size: .78rem; }
.svc-comments-input { min-height: 180px; resize: vertical; font-weight: 500; line-height: 1.6; }
.svc-comments-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; margin-top: 10px; font-size: .8125rem; font-weight: 600; color: var(--ek-muted); }
.svc-comments-foot b { color: var(--ek-blue); font-weight: 800; }
.svc-comments-foot b.is-bad { color: var(--ek-danger); }
.svc-coupon .svc-note { flex: 1; align-items: center; }
.svc-404 { text-align: center; padding: 56px 24px; margin-bottom: 40px; }
@media (max-width: 575.98px) {
  .svc-comments { padding: 18px; }
  .svc-404 { padding: 40px 18px; }
}
.svc-page.is-live .svc-pack-foot > span { flex-wrap: wrap; row-gap: 0; }
@media (max-width: 991.98px) {
  /* mobil sütun düzeninde (.svc-grid align-items:start) adımlar tam genişlik kalsın; tür şeridi kendi içinde kaysın */
  .svc-page.is-live .svc-grid > .svc-main > *, .svc-page.is-live .svc-grid > .svc-side > * { align-self: stretch; min-width: 0; }
}