/* =====================================================================
   LikedWin — /hizmetler (tüm platformlar)
   İşaretleme: hizmetler.php · Davranış: assets/js/hizmetler.js
   Gradyan YOK; renkler site.css token'larından (koyu tema kendiliğinden).
   Platform rengi karta satır içinden gelir: --pc (zemin/ikon), --pc-ink
   (yazı/çizgi — siyah markalarda temaya göre --ink'e döner).
   Animasyonlar yalnız .hz-js varken (JS çalıştıysa) gizli başlar; JS
   yoksa her şey olduğu gibi görünür.
   ===================================================================== */

/* ---------- Hero ---------- */
.hz-hero { padding: 44px 0 34px; border-bottom: 1px solid var(--line); background: var(--bg-soft); }
.hz-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: center;
    gap: 44px;
}
/* Platform ikon yığını — iç içe karolar. Üzerine gelinen öne çıkar ve adını
   ipucu balonunda gösterir; SAĞINDAKİLER biraz sağa kayar (solundakiler yerinde). */
.hz-stack { display: inline-flex; align-items: center; padding: 8px 0 0 8px; }
.hz-stack__ico,
.hz-stack__more {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    margin-left: -8px;
    border: 2.5px solid var(--bg-soft);
    border-radius: 11px;
    font-size: 15px;
    translate: 0 0;
    transition: translate .35s cubic-bezier(.3, .8, .25, 1), scale .35s cubic-bezier(.3, 1.5, .5, 1);
}
.hz-stack__ico { z-index: calc(10 - var(--s, 0)); background: var(--pc); color: #fff; }
.hz-stack__ico.is-light { color: var(--ink-on-light); }
.hz-stack__more { z-index: 1; background: var(--surface); color: var(--ink); font-size: 10.5px; font-weight: 800; cursor: default; box-shadow: inset 0 0 0 1px var(--line-strong); }
.hz-stack__ico:hover,
.hz-stack__ico:focus-visible { z-index: 20; scale: 1.1; translate: 0 -3px; outline: none; }
.hz-stack__ico:hover ~ *,
.hz-stack__ico:focus-visible ~ * { translate: 12px 0; }
/* İpucu balonu — ok işareti yok. site.css'teki header ipucu kuralı [data-tip]'i
   kullandığı için burada ayrı nitelik (data-hz-tip) şart; aynısı olursa iki kural
   çakışır ve balon ikonun altına ezilir. */
.hz-stack [data-hz-tip]::after {
    content: attr(data-hz-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    z-index: 5;
    padding: 5px 10px;
    border-radius: 8px;
    background: var(--solid-dark);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, 4px) scale(.94);
    transition: opacity .18s ease, transform .22s cubic-bezier(.3, 1.4, .5, 1);
}
.hz-stack [data-hz-tip]:hover::after,
.hz-stack [data-hz-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0) scale(1); }
/* Giriş: karolar soldan sırayla gelir (yalnız JS varken) */
.hz-js .hz-stack__ico, .hz-js .hz-stack__more { opacity: 0; transform: translateX(-10px) scale(.8); }
.hz-js.hz-ready .hz-stack__ico, .hz-js.hz-ready .hz-stack__more {
    opacity: 1; transform: none;
    transition: opacity .4s ease calc(var(--s, 0) * 60ms), transform .55s cubic-bezier(.3, 1.4, .5, 1) calc(var(--s, 0) * 60ms),
                translate .35s cubic-bezier(.3, .8, .25, 1), scale .35s cubic-bezier(.3, 1.5, .5, 1);
}

.hz-title {
    margin: 18px 0 12px;
    max-width: 560px;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: clamp(30px, 3.8vw, 42px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.025em;
    color: var(--ink);
}
.hz-sub { margin: 0; max-width: 500px; color: var(--muted); font-size: 15.5px; line-height: 1.65; }
.hz-sub strong { color: var(--ink); font-weight: 700; }

/* Teslim edilen etkileşim — tek rakam kutusu. Sayaç bitince kalp bir kez atar (JS → .is-done). */
.hz-proof {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin-top: 22px;
    padding: 10px 16px 10px 10px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: 0 12px 26px -22px rgba(16, 24, 40, .35);
}
.hz-proof__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    flex: none;
    border-radius: 10px;
    background: var(--pink-bg);
    color: var(--pink-fg);
    font-size: 15px;
}
.hz-proof.is-done .hz-proof__ico i { animation: hzBeat .9s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes hzBeat { 0%, 100% { transform: scale(1); } 25% { transform: scale(1.28); } 45% { transform: scale(.92); } 65% { transform: scale(1.12); } }
.hz-proof__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hz-proof__num {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 21px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.02em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.hz-proof__label { font-size: 12px; font-weight: 600; color: var(--muted); }

/* Arama kartı */
.hz-finder {
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--surface);
    box-shadow: 0 24px 50px -32px rgba(16, 24, 40, .35);
}
.hz-search {
    position: relative;
    display: flex;
    align-items: center;
    height: 54px;
    border: 1.5px solid var(--line-strong);
    border-radius: 14px;
    background: var(--bg);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.hz-search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.hz-search__icon { width: 48px; text-align: center; color: var(--muted-2); font-size: 16px; transition: color .2s ease, transform .3s cubic-bezier(.3, 1.4, .5, 1); }
.hz-search:focus-within .hz-search__icon { color: var(--brand); transform: scale(1.1) rotate(-8deg); }
.hz-search__input {
    flex: 1; min-width: 0; height: 100%;
    border: 0; outline: 0; background: none;
    color: var(--ink);
    font: inherit; font-size: 16px; font-weight: 500;
    -webkit-appearance: none; appearance: none;
}
.hz-search__input::placeholder { color: var(--muted-2); }
.hz-search__input::-webkit-search-cancel-button { display: none; }
.hz-search__clear {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; margin-right: 10px;
    border: 0; border-radius: 9px;
    background: var(--surface-2); color: var(--muted);
    cursor: pointer;
    animation: hzPop .3s cubic-bezier(.3, 1.6, .5, 1);
}
.hz-search__clear[hidden] { display: none; }
.hz-search__clear:hover { color: var(--ink); }
@keyframes hzPop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }

.hz-finder__label {
    margin: 16px 2px 10px;
    font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
    color: var(--muted-2);
}
.hz-quick { display: flex; flex-wrap: wrap; gap: 8px; }
.hz-quick__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 13px 0 11px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--bg-soft);
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease;
}
.hz-quick__item i { color: var(--pc-ink); font-size: 13px; transition: transform .3s cubic-bezier(.3, 1.4, .5, 1); }
.hz-quick__item:hover {
    border-color: color-mix(in srgb, var(--pc-ink) 45%, var(--line));
    background: var(--surface);
    color: var(--ink);
    transform: translateY(-2px);
}
.hz-quick__item:hover i { transform: scale(1.18) rotate(-8deg); }

/* ---------- Gövde ---------- */
.hz-body { padding: 30px 0 72px; }
.hz-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}
.hz-count { margin: 0; font-size: 14px; color: var(--muted); }
.hz-count b { display: inline-block; min-width: 1ch; color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.hz-count b.is-bump { animation: hzBump .35s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes hzBump { 0% { transform: translateY(-5px); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* Sıralama — kayan gösterge */
.hz-sort {
    position: relative;
    display: inline-flex;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--bg-soft);
}
.hz-sort__ind {
    position: absolute;
    top: 4px; bottom: 4px; left: 0;
    width: var(--sw, 0px);
    border-radius: 9px;
    background: var(--surface);
    box-shadow: 0 1px 3px rgba(16, 24, 40, .12), 0 0 0 1px var(--line);
    transform: translateX(var(--sx, 4px));
    transition: transform .38s cubic-bezier(.3, .9, .25, 1), width .38s cubic-bezier(.3, .9, .25, 1);
}
.hz-sort__btn {
    position: relative;
    z-index: 1;
    height: 32px;
    padding: 0 14px;
    border: 0;
    border-radius: 9px;
    background: none;
    color: var(--muted);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: color .2s ease;
}
.hz-sort__btn:hover { color: var(--ink); }
.hz-sort__btn.is-active { color: var(--ink); }
.hz-sort__fire { margin-right: 3px; color: var(--muted-2); font-size: 11.5px; transition: color .25s ease, transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.hz-sort__btn.is-active .hz-sort__fire,
.hz-sort__btn:hover .hz-sort__fire { color: #f97316; }
.hz-sort__btn.is-active .hz-sort__fire { transform: scale(1.15); }
/* JS yoksa gösterge yerine etkin düğme zemini */
html:not(.hz-js) .hz-sort__btn.is-active { background: var(--surface); }

/* Platform ızgarası */
.hz-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
.hz-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
    isolation: isolate;
    transition: border-color .25s ease, box-shadow .3s ease, transform .3s cubic-bezier(.3, .8, .25, 1);
}
/* Platform renginde hafif zemin (hover'da belirir) */
.hz-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: color-mix(in srgb, var(--pc) 6%, transparent);
    opacity: 0;
    transition: opacity .3s ease;
}
/* Sol üst köşede platform renginde ince şerit — hover'da uzar */
.hz-card::after {
    content: '';
    position: absolute;
    left: 18px; top: -1px;
    width: 28px; height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--pc);
    transition: width .45s cubic-bezier(.3, .8, .25, 1);
}
.hz-card:hover,
.hz-card:focus-within {
    border-color: color-mix(in srgb, var(--pc-ink) 40%, var(--line));
    box-shadow: 0 22px 40px -26px color-mix(in srgb, var(--pc) 55%, transparent);
    transform: translateY(-4px);
}
.hz-card:hover::before,
.hz-card:focus-within::before { opacity: 1; }
.hz-card:hover::after,
.hz-card:focus-within::after { width: calc(100% - 36px); }

/* Kartın tamamı platform sayfasına gider; çipler kendi bağlantısıyla üstte */
.hz-card__link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.hz-card__link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.hz-card__top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.hz-card__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px; height: 48px;
    flex: none;
    border-radius: 14px;
    background: var(--pc);
    color: #fff;
    font-size: 21px;
    overflow: hidden;
    transition: transform .45s cubic-bezier(.3, 1.5, .5, 1);
}
.hz-card__ico.is-light { color: var(--ink-on-light); }
.hz-card__ico img { width: 100%; height: 100%; object-fit: cover; }
.hz-card:hover .hz-card__ico { transform: rotate(-8deg) scale(1.08); }
.hz-card__id { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.hz-card__name {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 16.5px; font-weight: 800; letter-spacing: -.01em; color: var(--ink);
}
.hz-card__meta { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.hz-card__go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    flex: none;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--muted);
    font-size: 12px;
    transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.hz-card__go i { transform: rotate(-45deg); transition: transform .35s cubic-bezier(.3, 1.4, .5, 1); }
.hz-card:hover .hz-card__go { background: var(--pc); border-color: var(--pc); color: #fff; }
.hz-card:hover .hz-card__go i { transform: rotate(0); }

/* Öne çıkan hizmet çipleri */
.hz-card__svcs { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; }
.hz-svc {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font-size: 12.5px;
    font-weight: 600;
    transition: border-color .2s ease, color .2s ease, background .2s ease, transform .2s ease;
}
.hz-svc span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Platformunda en çok sipariş alan hizmet(ler): turuncu alev (hizmetler.php → $hot); çipin üzerine gelince hafifçe titrer */
.hz-svc__hot { flex: none; color: #f97316; font-size: 10.5px; transform-origin: 50% 90%; }
a.hz-svc:hover .hz-svc__hot { animation: hzFlame .6s ease-in-out infinite alternate; }
@keyframes hzFlame { from { transform: rotate(-8deg) scale(1); } to { transform: rotate(6deg) scale(1.18); } }
.hz-svc mark { background: none; color: var(--pc-ink); font-weight: 800; }
a.hz-svc:hover {
    border-color: var(--pc-ink);
    color: var(--pc-ink);
    background: var(--surface);
    transform: translateY(-1px);
}
.hz-svc--more { color: var(--muted); background: var(--bg-soft); border-style: dashed; }
.hz-card__svcs.is-swap .hz-svc { animation: hzChipIn .35s cubic-bezier(.2, .9, .25, 1) both; animation-delay: calc(var(--c, 0) * 40ms); }
@keyframes hzChipIn { from { opacity: 0; transform: translateY(6px) scale(.94); } to { opacity: 1; transform: none; } }

/* Arama sonucu yok */
.hz-empty[hidden] { display: none; }
.hz-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 54px 20px;
    border: 1px dashed var(--line-strong);
    border-radius: 20px;
    text-align: center;
    animation: hzFade .35s ease both;
}
.hz-empty__ico {
    display: grid; place-items: center;
    width: 52px; height: 52px; margin-bottom: 8px;
    border-radius: 16px;
    background: var(--brand-soft); color: var(--brand);
    font-size: 19px;
    animation: hzWiggle 1.6s ease-in-out infinite;
}
@keyframes hzWiggle { 0%, 60%, 100% { transform: none; } 70% { transform: rotate(-12deg); } 80% { transform: rotate(10deg); } 90% { transform: rotate(-4deg); } }
@keyframes hzFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.hz-empty__title { font-size: 16px; color: var(--ink); }
.hz-empty__text { font-size: 14px; color: var(--muted); }
.hz-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 14px; }

/* Düğmeler */
.hz-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: 12px;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
}
.hz-btn:active { transform: scale(.97); }
.hz-btn i { font-size: 12px; transition: transform .25s ease; }
.hz-btn:hover i { transform: translateX(3px); }
.hz-btn--primary { background: var(--brand); color: #fff; }
.hz-btn--primary:hover { background: var(--brand-dark); }
:root[data-theme="dark"] .hz-btn--primary { background: #3f5cff; }
:root[data-theme="dark"] .hz-btn--primary:hover { background: #5570ff; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .hz-btn--primary { background: #3f5cff; }
    :root:not([data-theme]) .hz-btn--primary:hover { background: #5570ff; }
}
.hz-btn--ghost { border-color: var(--line-strong); background: var(--surface); color: var(--ink); }
.hz-btn--ghost:hover { border-color: var(--brand-line-2); color: var(--brand); }

/* Alt çağrı kartı */
.hz-cta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 30px;
    padding: 20px 22px;
    border: 1px solid var(--brand-line);
    border-radius: 18px;
    background: var(--brand-soft);
}
.hz-cta__ico {
    display: grid; place-items: center;
    width: 46px; height: 46px; flex: none;
    border-radius: 14px;
    background: var(--surface); color: var(--brand);
    font-size: 18px;
}
.hz-cta__text { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.hz-cta__text b { font-size: 15.5px; color: var(--ink); }
.hz-cta__text small { font-size: 13px; color: var(--muted); }

/* ---------- Giriş animasyonları (yalnız JS varken) ---------- */
.hz-js .hz-rise { opacity: 0; transform: translateY(14px); }
.hz-js.hz-ready .hz-rise {
    opacity: 1; transform: none;
    transition: opacity .6s ease calc(var(--d, 0) * 90ms), transform .7s cubic-bezier(.2, .9, .25, 1) calc(var(--d, 0) * 90ms);
}
.hz-js .hz-quick__item { opacity: 0; transform: translateY(8px) scale(.96); }
.hz-js.hz-ready .hz-quick__item {
    opacity: 1; transform: none;
    transition: opacity .45s ease calc(320ms + var(--d, 0) * 55ms), transform .5s cubic-bezier(.3, 1.4, .5, 1) calc(320ms + var(--d, 0) * 55ms),
                border-color .2s ease, background .2s ease, color .2s ease;
}
.hz-js.hz-ready .hz-quick__item:hover { transform: translateY(-2px); transition-delay: 0s; }

/* Kartlar kaydırınca sırayla belirir (--rd: JS satırdaki sıraya göre verir) */
.hz-js .hz-card:not(.is-in),
.hz-js [data-hz-reveal]:not(.is-in) { opacity: 0; transform: translateY(22px) scale(.98); }
.hz-js .hz-card.is-in,
.hz-js [data-hz-reveal].is-in {
    animation: hzCardIn .6s cubic-bezier(.2, .9, .25, 1) backwards;   /* "both" olsaydı bitişte transform'u kilitler, hover kalkması çalışmazdı */
    animation-delay: var(--rd, 0ms);
}
@keyframes hzCardIn { from { opacity: 0; transform: translateY(22px) scale(.98); } to { opacity: 1; transform: none; } }
/* Filtrede gizlenen kart: küçülerek söner, sonra JS display:none verir */
.hz-card.is-leaving { animation: hzCardOut .22s ease forwards !important; pointer-events: none; }
@keyframes hzCardOut { to { opacity: 0; transform: scale(.94); } }
.hz-card[hidden] { display: none; }

/* ---------- Duyarlı ---------- */
@media (max-width: 1080px) {
    .hz-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hz-hero__grid { gap: 28px; }
}
@media (max-width: 860px) {
    .hz-hero { padding: 30px 0 26px; }
    .hz-hero__grid { grid-template-columns: 1fr; }
    .hz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .hz-grid { grid-template-columns: 1fr; gap: 10px; }
    .hz-card { padding: 15px; gap: 12px; }
    .hz-card__ico { width: 44px; height: 44px; font-size: 19px; border-radius: 13px; }
    .hz-toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
    .hz-sort { display: flex; }
    .hz-sort__btn { flex: 1; padding: 0 8px; }
    .hz-finder { padding: 14px; border-radius: 18px; }
    .hz-search { height: 50px; }
    .hz-quick__item { height: 34px; font-size: 12.5px; }
    .hz-quick__item:nth-child(n+5) { display: none; }   /* telefonda 4 kısayol yeter */
    .hz-cta { flex-direction: column; align-items: flex-start; }
    .hz-cta .hz-btn { width: 100%; }
    .hz-proof__num { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .hz-js .hz-rise, .hz-js .hz-quick__item, .hz-js .hz-card, .hz-js [data-hz-reveal], .hz-js .hz-stack__ico, .hz-js .hz-stack__more { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
    .hz-svc__hot, .hz-stack__ico, .hz-stack__more, .hz-proof__ico i, .hz-empty__ico, .hz-card__svcs.is-swap .hz-svc { animation: none !important; }
    .hz-card, .hz-card__ico, .hz-card__go i, .hz-sort__ind { transition: none !important; }
}