/* =====================================================================
   LikedWin — Organik Hit "satın aldıktan sonra" sahnesi (ohs-*)
   ÖZEL BÖLÜM (extras/organik-hit) — markup: extra.php · zamanlama: extra.js
   Yalnız extras/registry.php'de eşleşen sayfalarda yüklenir.
   Gerektirir: site.css (token'lar). Gradyan YOK; tüm renkler token'dan,
   koyu tema kendiliğinden gelir. Sahnede tek istisna arama sonucu başlık
   mavisi (--ohs-link) — o da her iki tema için ayrı tanımlı.

   Durum sınıfları (kök .ohs üzerinde):
     .st-0 … .st-5  etkin adım      .is-final  sunucunun bastığı son kare
     .is-idle       ekran dışında (CSS animasyonları durur)
   ===================================================================== */

.ohs {
    --ohs-link: #1a0dab;
    /* Kutu yok: bölüm doğrudan sayfa zemininde (.cat-body) durur */
    margin-top: 64px;
    scroll-margin-top: calc(var(--header-h) + 24px);   /* hero bağlantısı sabit header'ın altına insin */
}

/* ---------------------------------------------------------------------
   HİZMET SAYFASI (hizmet.php): sahne sipariş alanının altında
   + hero rozetlerinin başındaki "Nasıl çalışır?" rozeti (.svc-tag--how)
   Rozet diğer hero rozetleriyle (order-panel.css .order-hero__tags .svc-tag)
   AYNI ölçüde; ayırt edilsin diye beyaz yerine koyu zemin + beyaz yazı.
   --------------------------------------------------------------------- */
.ohs-host { padding: 0 0 64px; background: var(--bg-soft); }
.ohs-host .ohs { margin-top: 0; }

.order-hero__tags .svc-tag--how {
    --tag: var(--ink-on-light);   /* diğer rozetler gibi beyaz hap; yazı + pul koyu */
    gap: 8px;
    padding-left: 7px;
    text-transform: uppercase;
}
/* Hizmet sayfasında hareket yok (kullanıcı isteği): nabız halkası ve
   hover kalkması kaldırıldı; yalnız hafif gölge ile tıklanabilir hissi */
.order-hero__tags .svc-tag--how:hover { box-shadow: 0 4px 12px rgba(16, 24, 40, .16); }
.order-hero__tags .svc-tag--how:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.svc-tag__play {
    position: relative;
    display: grid;
    place-items: center;
    width: 17px; height: 17px;
    border-radius: 50%;
    background: var(--hero-tag, var(--ink-on-light));   /* hero'da rozetlerle aynı renk */
}
.order-hero__tags .svc-tag--how .svc-tag__play i {
    margin-left: 1px;
    font-size: 7px;
    color: #fff;
}
@media (max-width: 720px) {
    .ohs-host { padding-bottom: 48px; }
    .order-hero__tags .svc-tag--how { padding-left: 6px; }
}

/* ---------------------------------------------------------------------
   HERO ROZET SATIRI BAĞLANTISI (kategori.php .cat-facts__how) → #nasil-calisir
   .cat-facts rozetlerinin kalıbını kullanır; ayırt edilsin diye zemini bir
   ton güçlü ve "pul" beyaz, oynat ikonu etrafında hafif nabız halkası.
   --------------------------------------------------------------------- */
.cat-facts li.cat-facts__how {
    padding: 0;
    border-color: color-mix(in srgb, var(--cat-ink) 38%, transparent);
    background: color-mix(in srgb, var(--cat-ink) 20%, transparent);
    transition: background var(--ease), border-color var(--ease);
}
.cat-facts li.cat-facts__how:hover {
    background: color-mix(in srgb, var(--cat-ink) 27%, transparent);
    border-color: color-mix(in srgb, var(--cat-ink) 52%, transparent);
}
.cat-facts__how a {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px 12px 15px;
    border-radius: inherit;
    color: var(--cat-ink);
}
.cat-facts__how a:focus-visible { outline: 2px solid var(--cat-ink); outline-offset: 3px; }
.cat-facts__how b {
    position: relative;
    background: #fff;
    color: var(--ink-on-light);
    font-size: 13px;
}
.cat-facts__how b i { margin-left: 2px; }   /* üçgen optik ortalama */
.cat-facts__how b::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    border: 2px solid #fff;
    animation: cat-how-pulse 2.2s ease-out infinite;
}
@keyframes cat-how-pulse {
    0%   { opacity: .7; transform: scale(1); }
    70%, 100% { opacity: 0; transform: scale(1.45); }
}
.cat-facts .cat-facts__how span {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--cat-ink);
}
.cat-facts__how small {
    font-size: 12px;
    font-weight: 500;
    color: color-mix(in srgb, var(--cat-ink) 78%, transparent);
}
.cat-facts__arrow {
    margin-left: auto;
    padding-left: 6px;
    font-size: 13px;
    opacity: .85;
    transition: transform var(--ease);
}
.cat-facts__how:hover .cat-facts__arrow { transform: translateY(3px); }

/* Mobil: rozetler 2 sütun; bağlantı üst satırın tamamını kaplar */
@media (max-width: 720px) {
    .cat-facts.has-lead .cat-facts__how { grid-column: 1 / -1; }
    .cat-facts__how a { padding: 10px 14px 10px 12px; gap: 10px; }
    .cat-facts .cat-facts__how span { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
    .cat-facts__how b::after { animation: none; }
    .cat-facts__arrow, .cat-facts li.cat-facts__how { transition: none; }
}

:root[data-theme="dark"] .ohs { --ohs-link: #9db8ff; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .ohs { --ohs-link: #9db8ff; }
}

/* ---------------------------------------------------------------------
   BAŞLIK
   --------------------------------------------------------------------- */
.ohs__head { max-width: 760px; margin-bottom: 28px; }
/* Masaüstünde başlık bloğu (rozet + başlık + açıklama) ortalı; tablet/mobil sola yaslı kalır */
@media (min-width: 961px) {
    .ohs__head { margin: 0 auto 28px; text-align: center; }
}
/* Rozet görünümü anasayfa bölüm rozetleriyle ORTAK: site.css "BÖLÜM ROZETLERİ" */
.ohs__title {
    margin: 14px 0 10px;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1.15;
    color: var(--ink);
}
.ohs__title em {
    font-style: normal;
    white-space: nowrap;
    color: var(--brand);
    /* Düz renk arka plan vurgusu (gradyan yok) */
    padding: 0 .24em .04em;
    border-radius: .24em;
    background: var(--brand-soft-2);
}
/* Başlık vurgusu kategori renginde (--cat-accent, hero gradyanının koyu ucu;
   yoksa marka mavisi). Koyu temada koyu renk okunmaz → beyaza doğru açılır. */
.ohs__title em {
    color: var(--cat-accent, var(--brand));
    background: color-mix(in srgb, var(--cat-accent, var(--brand)) 13%, transparent);
}
:root[data-theme="dark"] .ohs__title em {
    color: color-mix(in srgb, var(--cat-accent, var(--brand)) 55%, #fff);
    background: color-mix(in srgb, var(--cat-accent, var(--brand)) 26%, transparent);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .ohs__title em {
        color: color-mix(in srgb, var(--cat-accent, var(--brand)) 55%, #fff);
        background: color-mix(in srgb, var(--cat-accent, var(--brand)) 26%, transparent);
    }
}
.ohs__lead {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--muted);
}
.ohs__lead strong { color: var(--text); font-weight: 700; }

/* ---------------------------------------------------------------------
   GÖVDE: adım listesi + sahne
   --------------------------------------------------------------------- */
.ohs__body {
    display: grid;
    grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
    gap: 30px;
    align-items: start;
}

/* ---------- Adımlar ---------- */
.ohs__steps {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}
.ohs__step {
    position: relative;
    border: 1px solid transparent;
    border-radius: 14px;
    overflow: hidden;
    transition: background var(--ease), border-color var(--ease);
}
.ohs__step.is-on {
    border-color: var(--brand-line);
    background: var(--brand-soft);
}
.ohs__stepbtn {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    width: 100%;
    padding: 13px 14px 14px;
    border: 0;
    background: none;
    text-align: left;
    color: inherit;
}
.ohs__stepbtn:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; border-radius: 14px; }
.ohs__step:not(.is-on) .ohs__stepbtn:hover b { color: var(--ink); }

.ohs__num {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 30px; height: 30px;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    background: var(--surface);
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 800;
    color: var(--muted);
    transition: background var(--ease), color var(--ease), border-color var(--ease);
}
.ohs__num > * { grid-area: 1 / 1; transition: opacity var(--ease), transform var(--ease); }
.ohs__num i { font-size: 12px; opacity: 0; transform: scale(.4); }
.ohs__step.is-on .ohs__num { border-color: var(--brand); background: var(--brand); color: #fff; }
.ohs__step.is-done .ohs__num { border-color: var(--success); background: var(--success); color: #fff; }
.ohs__step.is-done .ohs__num span { opacity: 0; transform: scale(.4); }
.ohs__step.is-done .ohs__num i { opacity: 1; transform: none; }

.ohs__stxt { display: flex; flex-direction: column; min-width: 0; padding-top: 4px; }
.ohs__stxt b {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--muted);
    transition: color var(--ease);
}
.ohs__step.is-on .ohs__stxt b,
.ohs__step.is-done .ohs__stxt b { color: var(--ink); }
/* Açıklama yalnız etkin adımda açılır (display:none değil → ekran okuyucu hepsini okur) */
.ohs__stxt small {
    display: block;
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    opacity: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text);
    transition: max-height .45s cubic-bezier(.4, 0, .2, 1), opacity .3s ease, margin-top .3s ease;
}
.ohs__step.is-on .ohs__stxt small { max-height: 120px; margin-top: 5px; opacity: 1; }

.ohs__bar {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: transparent;
}
.ohs__bar i {
    display: block;
    height: 100%;
    background: var(--brand);
    transform: scaleX(0);
    transform-origin: left center;
}
.ohs__step:not(.is-on) .ohs__bar { display: none; }

/* ---------------------------------------------------------------------
   SAHNE
   --------------------------------------------------------------------- */
.ohs__stagewrap { min-width: 0; }
.ohs__stage { position: relative; }

.ohs__win {
    position: relative;
    border: 1px solid var(--line-strong);
    border-radius: 16px;
    background: var(--bg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

/* Tarayıcı üst çubuğu */
.ohs__chrome {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 44px;
    padding: 0 14px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-2);
}
.ohs__dots { display: inline-flex; gap: 6px; flex: 0 0 auto; }
.ohs__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.ohs__dots i:nth-child(1) { background: #ff5f57; }
.ohs__dots i:nth-child(2) { background: #febc2e; }
.ohs__dots i:nth-child(3) { background: #28c840; }
.ohs__addr {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 440px;
    height: 28px;
    padding: 0 12px;
    border-radius: var(--radius-pill);
    background: var(--bg);
    border: 1px solid var(--line);
    font-size: 12.5px;
    color: var(--muted);
}
.ohs__addr i { font-size: 10px; color: var(--success); }
.ohs__addr span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* Görünümler üst üste durur, etkin olan görünür */
.ohs__views { position: relative; height: 478px; }
.ohs-view {
    position: absolute;
    inset: 0;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .45s ease, transform .45s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .45s;
}
.ohs-view.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .45s ease .08s, transform .45s cubic-bezier(.4, 0, .2, 1) .08s, visibility 0s;
}

/* Ortak küçük parçalar */
.ohs-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}
.ohs-chip i { font-size: 10px; }
.ohs-chip--ok { background: var(--ok-bg); color: var(--ok-fg); border: 1px solid var(--ok-line); }
.ohs-chip--brand { background: var(--brand-soft); color: var(--brand); border: 1px solid var(--brand-line); }

.ohs-label {
    display: block;
    margin-bottom: 7px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--muted);
}

/* ---------- 1-2) Sipariş görünümü ---------- */
.ohs-order { display: flex; flex-direction: column; gap: 14px; }
.ohs-order__svc,
.ohs-report__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}
.ohs-order__ico {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 42px; height: 42px;
    border-radius: 11px;
    background: var(--solid-dark);
    color: #fff;
    font-size: 17px;
}
.ohs-order__name { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.ohs-order__name b {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 15.5px;
    font-weight: 800;
    color: var(--ink);
}
.ohs-order__name small {
    font-size: 12.5px;
    color: var(--muted);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ohs-qty { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ohs-qty__opt {
    display: grid;
    place-items: center;
    height: 40px;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    background: var(--surface);
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    transition: border-color var(--ease), background var(--ease), color var(--ease), transform .18s ease;
}
.ohs-qty__opt.is-dim { opacity: .45; }   /* direct: hizmetin olmayan süreleri */
.ohs-qty__opt.is-sel {
    border-color: var(--brand);
    background: var(--brand-soft);
    color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft-2);
}

.ohs-field {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 46px;
    padding: 0 14px;
    border: 1px solid var(--line-strong);
    border-radius: 11px;
    background: var(--surface);
    transition: border-color var(--ease), box-shadow var(--ease);
}
.ohs-field > i { flex: 0 0 auto; font-size: 13px; color: var(--muted-2); transition: color var(--ease); }
.ohs-field.is-focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft-2); }
.ohs-field.is-focus > i { color: var(--brand); }
.ohs-field__val {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
}
.ohs-field__ph {
    position: absolute;
    left: 40px;
    font-size: 14px;
    color: var(--muted-2);
    pointer-events: none;
}
.ohs-field.is-filled .ohs-field__ph,
.ohs-field.is-focus .ohs-field__ph { display: none; }

/* Yazı imleci: yalnız odaklı alanda yanıp söner */
.ohs-caret {
    display: none;
    width: 2px;
    height: 1.15em;
    margin-left: 1px;
    background: var(--brand);
    animation: ohs-blink 1s steps(1) infinite;
}
.ohs-field.is-focus .ohs-caret,
.ohs-q.is-focus .ohs-caret { display: inline-block; }
@keyframes ohs-blink { 50% { opacity: 0; } }

.ohs-order__foot {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}
.ohs-order__sum { margin-right: auto; font-size: 13.5px; color: var(--muted); white-space: nowrap; }
.ohs-order__sum b {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 19px;
    font-weight: 800;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.ohs-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 20px;
    border-radius: 11px;
    background: var(--brand);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    transition: transform .15s ease, background var(--ease);
}
:root[data-theme="dark"] .ohs-btn { color: #0f1320; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .ohs-btn { color: #0f1320; } }
.ohs-btn i { font-size: 12px; }
.ohs-btn.is-press { transform: scale(.95); background: var(--brand-dark); }

.ohs-toast {
    position: absolute;
    left: 50%;
    bottom: 22px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--solid-dark);
    color: #fff;
    font-size: 13.5px;
    white-space: nowrap;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transform: translate(-50%, 16px) scale(.96);
    transition: opacity .35s ease, transform .45s cubic-bezier(.2, .9, .3, 1.2);
    pointer-events: none;
}
.ohs-toast i { color: #3ad6a2; font-size: 17px; }
.ohs-toast.is-on { opacity: 1; transform: translate(-50%, 0) scale(1); }

/* ---------- 3 + 5) Arama / sonuç görünümü ---------- */
.ohs-search { display: flex; flex-direction: column; gap: 14px; }
.ohs-search__top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.ohs-who {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 4px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface);
    font-size: 12.5px;
    color: var(--muted);
    transition: opacity .3s ease, transform .3s ease;
}
.ohs-who__ava { display: block; width: 26px; height: 26px; border-radius: 50%; overflow: hidden; }
.ohs-who__ava svg, .ohs-who__ava img { width: 100%; height: 100%; object-fit: cover; }
.ohs-who b { color: var(--ink); font-weight: 700; }
.ohs-who.is-swap { opacity: 0; transform: translateY(-4px); }

.ohs-q {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 260px;
    min-width: 0;
    height: 42px;
    padding: 0 16px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-pill);
    background: var(--surface);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: border-color var(--ease), box-shadow var(--ease);
}
.ohs-q > i { font-size: 13px; color: var(--muted-2); }
.ohs-q.is-focus { border-color: var(--brand-line-2); box-shadow: 0 0 0 3px var(--brand-soft); }

.ohs-visits {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: var(--radius-pill);
    background: var(--ok-bg);
    border: 1px solid var(--ok-line);
    color: var(--ok-fg);
    font-size: 12.5px;
    font-weight: 600;
}
.ohs-visits b { font-weight: 800; font-variant-numeric: tabular-nums; }
.ohs-visits.is-bump { animation: ohs-bump .45s ease; }
@keyframes ohs-bump { 40% { transform: scale(1.08); } }

/* Sonuç listesi — sıra numarası DOM sırasından (CSS sayacı) gelir */
.ohs-serp {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: ohs-rank;
}
.ohs-res {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 12px;
    border: 1px solid transparent;
    border-radius: 12px;
    counter-increment: ohs-rank;
    transition: opacity .3s ease, transform .3s ease, background var(--ease), border-color var(--ease);
}
.ohs-res__rank {
    flex: 0 0 auto;
    width: 20px;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
    color: var(--muted-2);
    font-variant-numeric: tabular-nums;
}
.ohs-res__rank::before { content: counter(ohs-rank); }
.ohs-res__fav {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--surface-2);
    font-size: 11px;
    font-weight: 800;
    color: var(--muted);
}
.ohs-res__fav img { width: 16px; height: 16px; object-fit: contain; }
.ohs-res__body { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.ohs-res__body small { font-size: 11.5px; color: var(--muted); line-height: 1.3; }
.ohs-res__body b {
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ohs-link);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.ohs-res__snip { display: flex; gap: 6px; margin-top: 4px; }
.ohs-res__snip i { height: 5px; border-radius: 3px; background: var(--line); }
.ohs-res__snip i:first-child { width: 58%; }
.ohs-res__snip i:last-child { width: 26%; }

/* Bizim sonucumuz */
.ohs-res.is-me {
    z-index: 2;   /* tırmanışta rakip satırlarının üstünden geçsin */
    border-color: var(--brand-line-2);
    background: var(--brand-soft);
}
.ohs-res.is-me .ohs-res__rank { color: var(--brand); }
.ohs-res.is-me .ohs-res__fav { background: var(--surface); border-color: var(--brand-line); }
.ohs-res.is-hit { box-shadow: 0 0 0 3px var(--brand-soft-2); }
.ohs-res.is-hit .ohs-res__body b { text-decoration: underline; }

.ohs-res__up {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    padding: 4px 9px;
    border-radius: var(--radius-pill);
    background: var(--ok-bg);
    color: var(--ok-fg);
    font-size: 11.5px;
    font-weight: 800;
    opacity: 0;
    transform: scale(.7);
    transition: opacity .25s ease, transform .35s cubic-bezier(.2, .9, .3, 1.3);
}
.ohs-res__up i { font-size: 10px; }
.ohs-res__up.is-on { opacity: 1; transform: none; }

/* Arama yapılmadan önce liste gizli; sonra sırayla belirir */
.ohs-serp.is-empty .ohs-res { opacity: 0; transform: translateY(6px); }
.ohs-serp .ohs-res:nth-child(2) { transition-delay: .04s; }
.ohs-serp .ohs-res:nth-child(3) { transition-delay: .08s; }
.ohs-serp .ohs-res:nth-child(4) { transition-delay: .12s; }
.ohs-serp .ohs-res:nth-child(5) { transition-delay: .16s; }
.ohs-serp .ohs-res:nth-child(6) { transition-delay: .2s; }
/* Tırmanışta gecikme olmasın */
.ohs.st-5 .ohs-serp .ohs-res { transition-delay: 0s; }

/* Ziyaret kartı: kullanıcı siteye girince belirir. Rakip sonuçlarının
   üstüne biner — tıklanan kendi sonucumuz (altta) görünür kalsın. */
.ohs-visit {
    position: absolute;
    right: 18px;
    top: 74px;
    width: 300px;
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding: 14px;
    border: 1px solid var(--line-strong);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transform: translateY(18px) scale(.97);
    transition: opacity .3s ease, transform .4s cubic-bezier(.2, .9, .3, 1.15);
    pointer-events: none;
}
.ohs-visit.is-on { opacity: 1; transform: none; }
.ohs-visit__head { display: flex; align-items: center; gap: 8px; }
.ohs-visit__head img { width: 18px; height: 18px; object-fit: contain; }
.ohs-visit__head b { margin-right: auto; font-size: 13.5px; color: var(--ink); }
.ohs-visit__pages { display: flex; gap: 6px; flex-wrap: wrap; }
.ohs-visit__pages span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 9px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--muted-2);
    transition: color var(--ease), border-color var(--ease), background var(--ease);
}
.ohs-visit__pages span i { font-size: 10px; }
.ohs-visit__pages span.is-on { color: var(--brand); border-color: var(--brand-line); background: var(--brand-soft); }
.ohs-visit__foot { display: flex; align-items: center; gap: 10px; min-height: 22px; }
.ohs-visit__bar { flex: 1 1 auto; height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.ohs-visit__bar i {
    display: block;
    height: 100%;
    background: var(--success);
    transform: scaleX(0);
    transform-origin: left center;
}
.ohs-visit__ok {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    color: var(--ok-fg);
    opacity: 0;
    transition: opacity .25s ease;
}
.ohs-visit.is-ok .ohs-visit__ok { opacity: 1; }

/* Zafer şeridi (5. adım sonu) */
.ohs-win {
    position: absolute;
    left: 50%;
    bottom: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: 12px;
    background: var(--solid-dark);
    color: #fff;
    font-size: 14px;
    white-space: nowrap;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transform: translate(-50%, 16px) scale(.96);
    transition: opacity .35s ease, transform .5s cubic-bezier(.2, .9, .3, 1.25);
    pointer-events: none;
}
.ohs-win i { color: var(--amber); font-size: 17px; }
.ohs-win.is-on { opacity: 1; transform: translate(-50%, 0) scale(1); }

/* ---------- 4) Sitede gezinme: mini site ---------- */
.ohs-site { padding: 0; display: flex; flex-direction: column; }
.ohs-site__nav {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 0 0 auto;
    height: 48px;
    padding: 0 18px;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}
.ohs-site__logo {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-right: auto;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 800;
    color: var(--ink);
}
.ohs-site__logo img { width: 18px; height: 18px; object-fit: contain; }
.ohs-site__menu { display: inline-flex; gap: 4px; }
.ohs-site__menu span {
    position: relative;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--muted);
    transition: color var(--ease), background var(--ease);
}
.ohs-site__menu span.is-on { color: var(--brand); background: var(--brand-soft); }

.ohs-site__screen { position: relative; flex: 1 1 auto; overflow: hidden; }
.ohs-sp {
    position: absolute;
    inset: 0;
    padding: 16px 18px;
    overflow: hidden;
    opacity: 0;
    transform: translateX(14px);
    transition: opacity .35s ease, transform .4s cubic-bezier(.4, 0, .2, 1);
}
.ohs-sp.is-on { opacity: 1; transform: none; }
.ohs-sp__scroll { transition: transform 1.9s cubic-bezier(.45, .05, .25, 1); }
.ohs-sp__h {
    display: block;
    margin-bottom: 12px;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 800;
    color: var(--ink);
}

/* Metin yerine iskelet çizgileri */
.ohs-ln { display: block; width: 78%; height: 7px; border-radius: 4px; background: var(--line); }
.ohs-ln--m { width: 58%; }
.ohs-ln--s { width: 42%; }

.ohs-hero {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 20px;
    border-radius: 14px;
    background: var(--brand-soft);
}
.ohs-hero b {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--ink);
}
.ohs-hero .ohs-ln { background: var(--brand-line-2); }
.ohs-hero--alt { margin-top: 16px; background: var(--surface-2); }
.ohs-hero--alt b { font-size: 15px; }
.ohs-hero--alt .ohs-ln { background: var(--line-strong); }
.ohs-hero__btn {
    align-self: flex-start;
    margin-top: 4px;
    padding: 8px 14px;
    border-radius: 9px;
    background: var(--brand);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
}
:root[data-theme="dark"] .ohs-hero__btn { color: #0f1320; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .ohs-hero__btn { color: #0f1320; } }

.ohs-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.ohs-tile {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
}
.ohs-tile > .fa-solid {
    display: grid;
    place-items: center;
    width: 28px; height: 28px;
    margin-bottom: 2px;
    border-radius: 8px;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 12px;
}
.ohs-para { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; }

.ohs-svcs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ohs-svc {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    transition: border-color var(--ease), box-shadow var(--ease), transform .25s ease;
}
.ohs-svc > i:first-child {
    display: grid;
    place-items: center;
    width: 32px; height: 32px;
    border-radius: 9px;
    background: var(--solid-dark);
    color: #fff;
    font-size: 14px;
}
.ohs-svc b { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.ohs-svc.is-hover {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft-2);
    transform: translateY(-2px);
}

.ohs-prices { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ohs-prices li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--surface);
    transition: border-color var(--ease), background var(--ease);
}
.ohs-prices b { flex: 0 0 auto; font-size: 13px; font-weight: 700; color: var(--ink); }
.ohs-prices .ohs-ln { flex: 1 1 auto; width: auto; }
.ohs-prices span {
    flex: 0 0 auto;
    padding: 4px 10px;
    border-radius: 7px;
    border: 1px solid var(--line-strong);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--muted);
    transition: color var(--ease), border-color var(--ease);
}
.ohs-prices li.is-hover { border-color: var(--brand-line-2); background: var(--brand-soft); }
.ohs-prices li.is-hover span { color: var(--brand); border-color: var(--brand); }

/* Oturum paneli: kim geziyor, ne kadar süredir, ne yaptı */
.ohs-hud {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 3;
    width: 292px;
    padding: 12px;
    border: 1px solid var(--line-strong);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--shadow-lg);
}
.ohs-hud__head { display: flex; align-items: center; gap: 9px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.ohs-hud__head .ohs-who__ava { width: 30px; height: 30px; flex: 0 0 auto; }
.ohs-hud__who { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.ohs-hud__who b { font-size: 13px; color: var(--ink); }
.ohs-hud__who small { font-size: 11px; color: var(--muted); white-space: nowrap; }
.ohs-hud__time {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: var(--radius-pill);
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 11px;
}
.ohs-hud__time b { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ohs-hud__log {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 98px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}
.ohs-hud__log li {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
    transition: opacity .3s ease, transform .35s cubic-bezier(.2, .9, .3, 1.15);
}
.ohs-hud__log li i {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 26px; height: 26px;
    border-radius: 8px;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 11px;
}
.ohs-hud__log li.is-ok { color: var(--ok-fg); }
.ohs-hud__log li.is-ok i { background: var(--ok-bg); color: var(--ok-fg); }
.ohs-hud__log li.is-new { opacity: 0; transform: translateY(8px); }

/* ---------- 5) Görev raporu ---------- */
.ohs-report { display: flex; flex-direction: column; gap: 12px; }
.ohs-report__head .ohs-order__ico { background: var(--success); }
.ohs-report__head .ohs-chip { opacity: 0; transform: scale(.7); transition: opacity .25s ease, transform .35s cubic-bezier(.2, .9, .3, 1.3); }
.ohs-report__head .ohs-chip.is-on { opacity: 1; transform: none; }

.ohs-report__prog {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: 4px 12px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
}
.ohs-report__big {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.ohs-report__big b { font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.ohs-report__cap { font-size: 13px; color: var(--muted); }
.ohs-report__bar {
    grid-column: 1 / -1;
    height: 8px;
    margin-top: 8px;
    border-radius: 5px;
    background: var(--line);
    overflow: hidden;
}
.ohs-report__bar i {
    display: block;
    height: 100%;
    border-radius: 5px;
    background: var(--success);
    transform-origin: left center;
}

.ohs-sig { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ohs-sig li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    transition: opacity .35s ease, transform .4s cubic-bezier(.2, .9, .3, 1.1), border-color var(--ease);
}
.ohs-sig li > i {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 32px; height: 32px;
    border-radius: 9px;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 13px;
}
.ohs-sig li > span { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.ohs-sig b { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.ohs-sig small { font-size: 12px; color: var(--muted); }
.ohs-sig em { font-size: 17px; color: var(--success); }
.ohs-sig li.is-off { opacity: 0; transform: translateX(-10px); }

/* ---------- Sahte fare imleci ---------- */
.ohs-cursor {
    position: absolute;
    top: 0; left: 0;
    z-index: 5;
    width: 22px; height: 22px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
    will-change: transform;
}
.ohs-cursor svg {
    width: 100%; height: 100%;
    fill: #111;
    stroke: #fff;
    stroke-width: 1.4;
    stroke-linejoin: round;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3));
    transition: transform .12s ease;
}
.ohs-cursor.is-on { opacity: 1; }
.ohs-cursor.is-click svg { transform: scale(.82); }
/* Tıklama halkası */
.ohs-cursor::after {
    content: '';
    position: absolute;
    left: -9px; top: -9px;
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 2px solid var(--brand);
    opacity: 0;
    transform: scale(.3);
}
.ohs-cursor.is-click::after { animation: ohs-ring .5s ease-out; }
@keyframes ohs-ring {
    0%   { opacity: .9; transform: scale(.3); }
    100% { opacity: 0;  transform: scale(1.6); }
}

/* ---------- Alt yazı + not ---------- */
.ohs__caption { display: none; }
.ohs__note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 24px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--muted-2);
}
.ohs__note i { margin-top: 3px; font-size: 12px; }

/* =====================================================================
   DIRECT ZİYARET senaryosu (data-variant="direct")
   3. adım görev paneli (.ohs-tasks) · 6. adım istatistik (.ohs-stats)
   ===================================================================== */

/* ---------- 3) Görev paneli ---------- */
.ohs-tasks { display: flex; flex-direction: column; gap: 14px; }
.ohs-tasks .ohs-search__top { justify-content: space-between; }
.ohs-tasklist { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ohs-task {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    opacity: .55;
    transition: border-color var(--ease), background var(--ease), box-shadow var(--ease);
}
.ohs-task.is-me { opacity: 1; border-color: var(--brand-line-2); background: var(--brand-soft); }
.ohs-task.is-hit { box-shadow: 0 0 0 3px var(--brand-soft-2); }
.ohs-task__ico {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 36px; height: 36px;
    border-radius: 10px;
    background: var(--solid-dark);
    color: #fff;
    font-size: 15px;
}
.ohs-task.is-me .ohs-task__ico { background: var(--brand); }
:root[data-theme="dark"] .ohs-task.is-me .ohs-task__ico { color: #0f1320; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .ohs-task.is-me .ohs-task__ico { color: #0f1320; } }
.ohs-task__body { display: flex; flex-direction: column; gap: 5px; min-width: 0; margin-right: auto; }
.ohs-task__body b { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.ohs-task__body small {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ohs-task__body small i { font-size: 10px; }
.ohs-task__btn {
    flex: 0 0 auto;
    padding: 7px 13px;
    border-radius: 9px;
    border: 1px solid var(--line-strong);
    background: var(--surface);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    transition: transform .15s ease, background var(--ease), color var(--ease), border-color var(--ease);
}
.ohs-task.is-me .ohs-task__btn { border-color: var(--brand); background: var(--brand); color: #fff; }
:root[data-theme="dark"] .ohs-task.is-me .ohs-task__btn { color: #0f1320; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .ohs-task.is-me .ohs-task__btn { color: #0f1320; } }
.ohs-task__btn.is-press { transform: scale(.94); }
/* Görev yapıldı: düğmenin yerine "Siteye girdi" */
.ohs-task__done {
    display: none;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 6px 11px;
    border-radius: 9px;
    background: var(--ok-bg);
    border: 1px solid var(--ok-line);
    color: var(--ok-fg);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.ohs-task.is-done .ohs-task__btn { display: none; }
.ohs-task.is-done .ohs-task__done { display: inline-flex; }

.ohs-tasks__note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 2px 0 0;
    font-size: 12.5px;
    color: var(--muted);
}
.ohs-tasks__note i { font-size: 11px; color: var(--brand); }
/* Görev listesi üstte olduğu için ziyaret kartı altta açılır */
.ohs-tasks .ohs-visit { top: auto; bottom: 18px; }

/* ---------- 6) Ziyaretçi istatistikleri ---------- */
.ohs-stats { display: flex; flex-direction: column; gap: 14px; }
.ohs-stats__live i { font-size: 7px; }
/* Başlık rapor kalıbını paylaşır ama "Canlı" çipi rapordaki gibi sonradan belirmez */
.ohs-stats .ohs-report__head .ohs-chip { opacity: 1; transform: none; }

.ohs-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ohs-kpi {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
}
.ohs-kpi small { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.ohs-kpi b {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.ohs-kpi:first-child b { color: var(--ok-fg); }
.ohs-kpi em { font-style: normal; font-size: 11.5px; color: var(--muted-2); }

.ohs-chart {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 auto;
    min-height: 0;
    padding: 14px 16px 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
}
.ohs-chart__cap { font-size: 12px; font-weight: 700; color: var(--muted); }
.ohs-chart__bars {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
    flex: 1 1 auto;
    min-height: 120px;
}
.ohs-chart__col { display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 6px; min-height: 0; }
.ohs-chart__col i {
    display: block;
    height: var(--h);
    border-radius: 6px 6px 3px 3px;
    background: var(--line-strong);
    transform: scaleY(0);
    transform-origin: bottom center;
    transition: transform .7s cubic-bezier(.2, .8, .2, 1);
    transition-delay: calc(var(--i) * .09s);
}
.ohs-chart__col.is-up i { background: var(--brand); }
.ohs-chart__col small { font-size: 11px; font-weight: 600; text-align: center; color: var(--muted-2); }
.ohs-chart.is-grow .ohs-chart__col i { transform: scaleY(1); }

/* Direct'te zafer şeridi istatistik ekranının altında */
.ohs-stats .ohs-win i { color: #3ad6a2; }
.ohs.is-final .ohs-stats .ohs-win { opacity: 1; transform: translate(-50%, 0) scale(1); }

@media (max-width: 620px) {
    .ohs-task { gap: 10px; padding: 10px 11px; }
    .ohs-task__ico { width: 32px; height: 32px; font-size: 13px; }
    .ohs-task__body b { font-size: 12.5px; }
    .ohs-task__btn { padding: 6px 10px; font-size: 11.5px; }
    .ohs-task__done { padding: 5px 9px; font-size: 11px; }
    .ohs-tasks__note { font-size: 11.5px; }
    .ohs-tasks .ohs-visit { top: auto; bottom: 12px; }
    .ohs-kpis { gap: 6px; }
    .ohs-kpi { padding: 10px; }
    .ohs-kpi b { font-size: 17px; }
    .ohs-kpi small, .ohs-kpi em { font-size: 10.5px; }
    .ohs-chart__bars { gap: 6px; min-height: 100px; }
}

/* Sunucunun bastığı son kare (JS kapalı / hareket azaltma): site 1. sırada */
.ohs.is-final .ohs-who { display: none; }
.ohs.is-final .ohs-res__up { opacity: 1; transform: none; }
.ohs.is-final .ohs-win { opacity: 1; transform: translate(-50%, 0) scale(1); }
.ohs.is-final .ohs-report__head .ohs-chip { opacity: 1; transform: none; }

/* Ekran dışında CSS animasyonları durur */
.ohs.is-idle *, .ohs.is-idle *::before, .ohs.is-idle *::after { animation-play-state: paused !important; }

/* ---------------------------------------------------------------------
   DUYARLI
   --------------------------------------------------------------------- */
@media (max-width: 960px) {
    .ohs__body { grid-template-columns: minmax(0, 1fr); gap: 16px; }

    /* Adımlar: tek satır, 5 eşit numara + ilerleme çubuğu; metin sahnenin altında */
    .ohs__steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
    .ohs__step { border-radius: 12px; }
    .ohs__stepbtn { flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px 12px; }
    .ohs__stepbtn:focus-visible { border-radius: 12px; }
    .ohs__stxt { padding: 0; align-items: center; text-align: center; }
    .ohs__stxt b { font-size: 11.5px; line-height: 1.25; }
    .ohs__stxt small { display: none; }
    .ohs__step:not(.is-on) .ohs__stxt b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

    .ohs__caption {
        display: block;
        min-height: 3.2em;
        margin: 14px 2px 0;
        font-size: 14px;
        line-height: 1.6;
        color: var(--text);
        transition: opacity .22s ease, transform .22s ease;
    }
    .ohs__caption b { color: var(--ink); }
    .ohs__caption.is-swap { opacity: 0; transform: translateY(4px); }
}

@media (max-width: 620px) {
    .ohs { margin-top: 44px; }
    .ohs__head { margin-bottom: 18px; }
    .ohs__lead { font-size: 14.5px; }
    .ohs__stxt b { display: none !important; }
    .ohs__stepbtn { padding: 9px 2px 11px; }

    .ohs__chrome { height: 38px; padding: 0 10px; gap: 10px; }
    .ohs__dots i { width: 8px; height: 8px; }
    .ohs__addr { height: 25px; font-size: 11.5px; }

    .ohs__views { height: 470px; }
    .ohs-view { padding: 14px; }

    .ohs-qty { gap: 6px; }
    .ohs-qty__opt { height: 38px; font-size: 13px; }
    .ohs-order__svc .ohs-chip { display: none; }
    .ohs-field { height: 44px; padding: 0 12px; }
    .ohs-field__val { font-size: 13.5px; }
    .ohs-btn { padding: 11px 14px; font-size: 13px; }
    .ohs-order__sum { font-size: 12.5px; }
    .ohs-order__sum b { font-size: 17px; }
    .ohs-toast { bottom: 14px; font-size: 12.5px; }

    .ohs-search { gap: 12px; }
    /* Üst satır: kişi çipi + kısa sayaç yan yana, arama kutusu altta tam genişlik */
    .ohs-search__top { flex-wrap: wrap; gap: 8px; }
    .ohs-who { flex: 1 1 0; min-width: 0; font-size: 12px; }
    .ohs-who__txt { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .ohs-q { order: 2; flex-basis: 100%; height: 40px; font-size: 13.5px; }
    .ohs-visits { flex: 0 0 auto; margin-left: auto; font-size: 11.5px; padding: 6px 10px; gap: 6px; }
    .ohs-visits__o { display: none; }
    .ohs-res { gap: 9px; padding: 8px 8px; }
    .ohs-res__rank { width: 14px; }
    .ohs-res__fav { width: 24px; height: 24px; }
    .ohs-res__body b { font-size: 13px; }
    .ohs-res__snip { display: none; }
    .ohs-res__up { padding: 3px 7px; font-size: 11px; }
    .ohs-visit { left: 12px; right: 12px; top: 118px; width: auto; }
    .ohs-win { bottom: 12px; font-size: 13px; }

    .ohs-site__nav { height: 44px; padding: 0 12px; gap: 8px; }
    .ohs-site__logo { font-size: 13px; }
    .ohs-site__logo span { display: none; }   /* dar ekranda yalnız ikon; menü sığsın */
    .ohs-site__menu { gap: 2px; }
    .ohs-site__menu span { padding: 5px 7px; font-size: 11.5px; }
    .ohs-site__menu .ohs-site__contact { display: none; }
    .ohs-sp { padding: 12px; }
    .ohs-hero { padding: 15px; }
    .ohs-hero b { font-size: 16px; }
    .ohs-tiles { gap: 7px; margin-top: 10px; }
    .ohs-tile { padding: 10px; }
    .ohs-svcs { gap: 8px; }
    .ohs-svc { padding: 11px; }
    .ohs-svc b { font-size: 12.5px; }
    .ohs-prices li { padding: 10px 11px; gap: 9px; }
    .ohs-prices b { font-size: 12px; }
    .ohs-hud { left: 12px; right: 12px; bottom: 12px; width: auto; padding: 10px; }
    .ohs-hud__log { min-height: 64px; }
    .ohs-hud__log li:nth-last-child(n+3) { display: none; }   /* dar ekranda son 2 işlem */

    .ohs-report { gap: 12px; }
    .ohs-report__prog { padding: 13px; }
    .ohs-report__big b { font-size: 25px; }
    .ohs-sig li { padding: 9px 11px; gap: 10px; }
    .ohs-sig small { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .ohs *, .ohs *::before, .ohs *::after { transition: none !important; animation: none !important; }
}