/* ══ Widget TikTok: „miejsca w kadrze" ═══════════════════════════════════
   Jeden arkusz dla calego serwisu, wczytywany w layoucie obok opinie.css.
   Stoi na hubie melexa, stronach tras, „o nas" i stronie glownej, wiec
   NICZEGO nie bierze z arkuszy tych stron: wlasny odstep sekcji, wlasny
   pojemnik, wlasna plakietka, kolory wpisane wprost, bez zmiennych --gold,
   ktore ma tylko melex.css. Czcionka dziedziczona: kazda strona ustawia
   Poppins na body.

   Widget odsyla do filmu, ale NIE laduje skryptu TikToka. Powod zmierzony:
   strony maja juz okolo 1 MB JavaScriptu, a oficjalne osadzenie doklada
   kilkaset kilobajtow i wlasne ramki. Okladka lezy u nas (73 kB webp),
   wiec widget dziala takze wtedy, gdy TikTok jest zablokowany.

   Wlasnosci logiczne (inline-start/end) wszedzie, gdzie polozenie zalezy
   od kierunku pisma. Centrowanie NIE zalezy od kierunku, wiec przycisk
   odtwarzania stoi na inset:0 + margin:auto, a nie na przesunieciu:
   przesuniecie odjezdzalo o szerokosc przycisku na /he i /ar. */

.tt-spot { background: #070b13; padding: 72px 32px; }
/* Strona glowna jest jasna: karta zostaje ciemna i stoi na jasnym jak
   wyrozniony blok. Cien mocniejszy, bo na jasnym tle slaby cien znika.
   Tlo sekcji NIE jest przezroczyste. Zmierzone: sasiednie sekcje (kontakt
   nad, blog pod) maja cieplą biel rgb(251,247,241), a body strony jest
   czysto biale, wiec przezroczysta sekcja pokazywala bialy pas wokol
   karty, widoczny jako szew na obu krawedziach. Kolor wpisany wprost,
   bo zmienna z tym odcieniem istnieje tylko w arkuszu strony glownej. */
.tt-spot--jasny { background: #fbf7f1; }
.tt-spot--jasny .tt-wrap { box-shadow: 0 24px 60px rgba(15, 23, 42, .18); }

.tt-inner { max-width: 1100px; margin: 0 auto; }

.tt-wrap {
    display: grid;
    grid-template-columns: minmax(250px, 320px) 1fr;
    gap: 48px;
    align-items: center;
    background: linear-gradient(140deg, #141c2b 0%, #0d1421 100%);
    border: 1px solid rgba(245, 158, 11, .22);
    border-radius: 24px;
    padding: 40px;
    color: #e2e8f0;
}

/* ── okladka w ksztalcie telefonu ─────────────────────────────────────── */
.tt-phone {
    position: relative;
    display: block;
    aspect-ratio: 9 / 16;
    border-radius: 22px;
    overflow: hidden;
    background: #0a0f1f;
    border: 1px solid rgba(255, 255, 255, .10);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .45);
    transition: transform .25s ease, box-shadow .25s ease;
    outline: none;
}
.tt-phone:hover { transform: translateY(-4px); box-shadow: 0 24px 56px rgba(0, 0, 0, .55); }
.tt-phone:focus-visible { box-shadow: 0 0 0 3px #f59e0b, 0 18px 44px rgba(0, 0, 0, .45); }
.tt-phone img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Dwie winiety w jednej warstwie: srodkowa pod przyciskiem odtwarzania
   (jasny kadr zjadal biala strzalke) i dolna pod paskiem odtwarzacza,
   zeby drobne napisy nie ginely na bruku. */
.tt-phone::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 50%, rgba(0, 0, 0, .40) 0%, rgba(0, 0, 0, 0) 60%),
        linear-gradient(180deg, rgba(0, 0, 0, .28) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .78) 100%);
}

/* plakietka w rogu kadru */
.tt-badge {
    position: absolute;
    inset-inline-start: 14px;
    top: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px 7px 9px;
    border-radius: 999px;
    background: rgba(10, 15, 31, .78);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.tt-badge svg { width: 13px; height: 13px; flex: 0 0 auto; }
/* arabski i hebrajski: wersalikow nie ma, rozstrzelenie psuje ligatury */
html[lang="ar"] .tt-badge, html[lang="he"] .tt-badge { letter-spacing: 0; text-transform: none; }

/* Przycisk odtwarzania.
   Kolo: inset:0 + margin:auto. Pierscien to DRUGI cien, nie obwodka, zeby
   nie powiekszal kola i nie psul wyliczonego srodka.
   Trojkat: zadnego marginesu korygujacego. Poprzednia wersja miala
   margin-inline-start: 4px przy ikonie 24 jednostek, czyli 16 procent
   szerokosci w prawo. Wyrownanie optyczne siedzi w samym ksztalcie:
   srodek ciezkosci trojkata lezy dokladnie w srodku viewBox. */
.tt-play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .45), 0 0 0 8px rgba(255, 255, 255, .13);
    display: grid;
    place-items: center;
    z-index: 2;
    transition: transform .22s ease, box-shadow .22s ease;
}
.tt-phone:hover .tt-play {
    transform: scale(1.06);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .5), 0 0 0 13px rgba(255, 255, 255, .18);
}
.tt-play svg { width: 27px; height: 27px; fill: #0a0f1f; display: block; }

.tt-handle {
    position: absolute;
    inset-inline-start: 14px;
    bottom: 58px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px 7px 9px;
    border-radius: 999px;
    background: rgba(10, 15, 31, .78);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: .84rem;
    font-weight: 600;
}
.tt-handle svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* pasek odtwarzacza: ozdoba, aria-hidden w znaczniku */
.tt-chrome {
    position: absolute;
    inset-inline: 14px;
    bottom: 14px;
    z-index: 2;
    color: rgba(255, 255, 255, .92);
}
/* display:block jest OBOWIAZKOWY. To <span>, czyli element liniowy, a na
   takim „height" nie robi nic: pasek mial zerowa wysokosc i widac bylo
   sama kropke bez linii. Kropki juz nie ma: przy pismie od prawej
   wystawala poza pasek, a projekt jej nie mial. */
.tt-track {
    display: block;
    position: relative;
    height: 3px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .30);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}
.tt-track::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 4%;
    border-radius: 3px;
    background: #f59e0b;
}
.tt-chrome-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 9px;
    font-size: .72rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}
.tt-chrome-row svg { width: 16px; height: 16px; fill: currentColor; }
.tt-chrome-icons { display: inline-flex; gap: 12px; }

/* ── prawa kolumna ────────────────────────────────────────────────────── */
.tt-body { text-align: start; min-width: 0; }

.tt-h2 { margin: 0 0 12px; font-size: clamp(1.5rem, 2.4vw, 2.05rem); line-height: 1.2; color: #fff; font-weight: 700; }
.tt-gold { color: #f59e0b; }
.tt-lead { margin: 0 0 22px; color: #94a3b8; line-height: 1.65; max-width: 54ch; }

/* trzy cechy w rzedzie, oddzielone cienka kreska */
.tt-chips {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
}
.tt-chip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 18px 4px 0;
    min-width: 0;
}
.tt-chip + .tt-chip { padding-inline-start: 18px; border-inline-start: 1px solid rgba(255, 255, 255, .10); }
.tt-chip-ic {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1px solid rgba(245, 158, 11, .45);
    background: rgba(245, 158, 11, .08);
}
.tt-chip-ic svg { width: 20px; height: 20px; fill: none; stroke: #f59e0b; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.tt-chip-t { display: block; color: #fff; font-weight: 600; font-size: .9rem; line-height: 1.25; }
.tt-chip-s { display: block; color: #94a3b8; font-size: .84rem; line-height: 1.3; }

/* lista: kazdy wiersz jako cichy pasek, numer w zlotym kolku */
.tt-list { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 6px; }
.tt-list li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 9px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .05);
    color: #e2e8f0;
    font-size: .97rem;
    line-height: 1.4;
}
.tt-num {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1.5px solid rgba(245, 158, 11, .65);
    color: #f59e0b;
    font-size: .82rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.tt-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.tt-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 15px 26px;
    border-radius: 999px;
    background: #f59e0b;
    color: #0a0f1f;
    font-weight: 700;
    font-size: .98rem;
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(245, 158, 11, .30);
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.tt-btn:hover, .tt-btn:focus-visible {
    background: #fbbf24;
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(245, 158, 11, .40);
    outline: none;
}
.tt-btn svg { width: 17px; height: 17px; fill: currentColor; flex: 0 0 auto; }
.tt-btn .tt-arrow { margin-inline-start: 4px; }
/* strzalka pokazuje kierunek czytania, wiec przy pismie od prawej odbijamy ja */
html[dir="rtl"] .tt-btn .tt-arrow { transform: scaleX(-1); }

/* ── ruch: kto prosi o spokoj, dostaje spokoj ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .tt-phone, .tt-play, .tt-btn { transition: none; }
    .tt-phone:hover, .tt-btn:hover { transform: none; }
    .tt-phone:hover .tt-play { transform: none; }
}

/* ── srednie ekrany: chipy w jednej kolumnie, zeby sie nie lamaly ─────── */
@media (max-width: 1080px) {
    .tt-chips { grid-template-columns: 1fr; gap: 6px; }
    .tt-chip { padding: 4px 0; }
    .tt-chip + .tt-chip { padding-inline-start: 0; border-inline-start: 0; }
}

/* ── telefon: jedna kolumna, WSZYSTKO wysrodkowane ─────────────────────── */
@media (max-width: 860px) {
    .tt-spot { padding: 52px 16px; }
    .tt-wrap { grid-template-columns: 1fr; gap: 26px; padding: 22px 18px 26px; border-radius: 20px; }
    .tt-phone { width: min(100%, 270px); margin-inline: auto; }
    .tt-body { text-align: center; }
    .tt-lead { margin-inline: auto; }

    /* Chipy: jeden waski blok na srodku, w nim wiersze ikona + tekst
       wyrownane do poczatku. Centrowanie kazdego chipa osobno dawalo
       ikony w trzech roznych miejscach, bo chipy maja rozna szerokosc. */
    .tt-chips { grid-template-columns: 1fr; gap: 10px; width: fit-content; max-width: 100%; margin-inline: auto; }
    .tt-chip { width: 100%; text-align: start; }

    .tt-list li { justify-content: center; text-align: center; }
    .tt-actions { justify-content: center; }
    .tt-btn { width: 100%; justify-content: center; max-width: 360px; }
}