/* ==========================================================================
   DGR Web — Projeler sayfası ve proje pencereleri
   - Pencere: adres çubuğunda "yükleniyor" çizgisi, kenarda dolaşan ışık, "Siteyi gez" etiketi (ana sayfa + Projeler)
   - Projeler: arama, sektör süzgeci, sıralama, kart/liste görünümü, boş durum, "nasıl çalışır" şeridi
   Net kenarlar, düz dolgular; blur / backdrop-filter / yumuşak halo yok. Hareket: transform / opacity.
   ========================================================================== */

/* ---------- Pencere: adres çubuğu yükleniyor çizgisi ---------- */
.window__url {
    position: relative;
}

.window__lock {
    transition: color 0.4s var(--ease);
}

.window__load {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1.5px;
    background: linear-gradient(90deg, var(--brand-300), var(--brand));
    opacity: 0;
    transform: scaleX(0);
    transform-origin: 0 50%;
    pointer-events: none;
}

.window.is-loading .window__load {
    animation: win-load 1.15s var(--ease-io) both;
}

.window.is-loading .window__lock {
    color: var(--brand-600);
}

@keyframes win-load {
    0% { opacity: 1; transform: scaleX(0); }
    20% { opacity: 1; transform: scaleX(0.35); }
    72% { opacity: 1; transform: scaleX(1); }
    100% { opacity: 0; transform: scaleX(1); }
}

/* ---------- Pencere: kenarda dolaşan ışık (yalnızca proje kartlarında) ---------- */
.window__ring {
    display: none;
}

.pj-card .window__ring {
    position: absolute;
    inset: -1px;
    z-index: 3;
    display: block;
    padding: 1.5px;
    overflow: hidden;
    border-radius: 15px;
    pointer-events: none;
    opacity: 0;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    transition: opacity 0.45s var(--ease);
}

.pj-card .window__ring i {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150%;
    aspect-ratio: 1;
    background: conic-gradient(from 0deg, transparent 0 62%, color-mix(in srgb, var(--brand) 35%, transparent) 76%, var(--brand) 88%, #ffd9bf 93%, transparent 100%);
    transform: translate(-50%, -50%) rotate(0deg);
    animation: win-ring 3.6s linear infinite paused;
}

@keyframes win-ring {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Görünür alana girerken tek tur (dokunmatikte de; hover gerekmez) */
.pj-card .window.is-loading .window__ring {
    animation: win-ring-once 1.8s var(--ease) both;
}

.pj-card .window.is-loading .window__ring i {
    animation-play-state: running;
}

@keyframes win-ring-once {
    0% { opacity: 0; }
    20%, 60% { opacity: 0.9; }
    100% { opacity: 0; }
}

.pj-card .window:focus-visible .window__ring {
    opacity: 1;
}

.pj-card .window:focus-visible .window__ring i {
    animation-play-state: running;
}

@media (hover: hover) and (pointer: fine) {
    .pj-card .window:hover .window__ring {
        opacity: 1;
        animation: none;
    }

    .pj-card .window:hover .window__ring i {
        animation-play-state: running;
    }

    .pj-card .window:hover .window__load {
        animation: win-load 1.15s var(--ease-io) both;
    }

    .window:hover .window__lock {
        color: var(--brand-600);
    }

    /* Kartın altındaki yazı da hafifçe tepki verir */
    .work .pj-card__title {
        transition: color 0.3s var(--ease);
    }

    .pj-card:has(.window:hover) .pj-card__title {
        color: var(--brand-600);
    }
}


/* ---------- Pencere: "Siteyi gez" etiketi ---------- */
.window__tour {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #fff;
    background: var(--ink);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.25s var(--ease), transform 0.3s var(--ease);
    pointer-events: none;
}

.window__tour .icon {
    width: 0.9rem;
    height: 0.9rem;
}

.window:focus-visible .window__tour {
    opacity: 1;
    transform: none;
}

@media (hover: hover) and (pointer: fine) {
    .window:hover .window__tour {
        opacity: 1;
        transform: none;
    }
}

@media (hover: none) {
    .window--link .window__tour {
        opacity: 1;
        transform: none;
    }
}

/* ---------- Projeler: araç çubuğu ---------- */
.pj {
    padding-top: clamp(0.5rem, 2vw, 1.5rem);
}

.pj-tools {
    display: grid;
    gap: 1rem;
    margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
}

.pj-tools__row {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 0.75rem 1rem;
}

.pj-search {
    flex: 1 1 18rem;
}

.pj-search__label,
.pj-select label {
    display: block;
    margin-bottom: 0.35rem;
    font-family: var(--mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.pj-search__box,
.pj-select__box {
    position: relative;
    display: flex;
    align-items: center;
    height: 46px;
    border: 1px solid var(--line-2);
    border-radius: 12px;
    background: #fff;
    transition: border-color 0.2s var(--ease);
}

.pj-search__box:focus-within,
.pj-select__box:focus-within {
    border-color: var(--ink);
}

.pj-search__box > .icon {
    margin-left: 0.85rem;
    color: var(--muted);
}

.pj-search__box input,
.pj-select__box select {
    width: 100%;
    height: 100%;
    padding: 0 0.85rem;
    border: 0;
    border-radius: 12px;
    font: inherit;
    font-size: 0.98rem;
    color: var(--ink);
    background: transparent;
    outline: none;
}

.pj-search__box input::-webkit-search-cancel-button {
    cursor: pointer;
}

.pj-select__box select {
    appearance: none;
    min-width: 12rem;
    padding-right: 2.2rem;
    cursor: pointer;
}

.pj-select__box > .icon {
    position: absolute;
    right: 0.8rem;
    color: var(--muted);
    pointer-events: none;
}

.pj-view {
    display: flex;
    height: 46px;
    overflow: hidden;
    border: 1px solid var(--line-2);
    border-radius: 12px;
}

.pj-view__btn {
    position: relative;
    display: grid;
    place-items: center;
    width: 46px;
    border: 0;
    color: var(--ink);
    background: #fff;
    cursor: pointer;
    transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.pj-view__btn + .pj-view__btn {
    border-left: 1px solid var(--line-2);
}

.pj-view__btn[aria-pressed="true"] {
    color: #fff;
    background: var(--ink);
}

.pj-view__btn:focus-visible,
.pj-chip:focus-visible,
.pj-card__ask:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.pj-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.pj-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    height: 38px;
    padding: 0 0.9rem;
    border: 1px solid var(--line-2);
    border-radius: 10px;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ink);
    background: #fff;
    cursor: pointer;
    transition: color 0.2s var(--ease), background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.pj-chip span {
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--muted);
}

.pj-chip:hover {
    border-color: var(--ink);
}

.pj-chip[aria-pressed="true"] {
    color: #fff;
    border-color: var(--ink);
    background: var(--ink);
}

.pj-chip[aria-pressed="true"] span {
    color: #d8d8d8;
}

.pj-status {
    margin: 0;
    font-size: 0.9rem;
    color: var(--muted);
}

.pj-status b {
    color: var(--ink);
}

/* ---------- Projeler: kart / liste ---------- */
.pj-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
    gap: clamp(1.75rem, 3vw, 2.5rem) clamp(1.25rem, 2.5vw, 2rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.pj-card {
    display: grid;
    align-content: start;
    gap: 1.1rem;
}

.pj-card[hidden] {
    display: none;
}

.pj-card.is-in {
    animation: pj-in 0.45s var(--ease) both;
}

@keyframes pj-in {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

.pj-card__stage {
    position: relative;
}

.pj-card__cat {
    margin: 0 0 0.25rem;
    font-family: var(--mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand-600);
}

.pj-card__title {
    margin: 0;
    font-size: var(--fs-h3);
    font-weight: 700;
    letter-spacing: -0.02em;
    transition: color 0.25s var(--ease);
}

.pj-card__summary {
    margin: 0.5rem 0 0;
    color: var(--muted);
}

.pj-card__meta .tags {
    margin-top: 0.75rem;
}

.pj-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.1rem;
    margin-top: 1rem;
}

.pj-card__ask {
    position: relative;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--line-2);
    text-underline-offset: 4px;
}

.pj-card__ask:hover {
    text-decoration-color: var(--brand);
}

.pj-grid[data-view="list"] {
    grid-template-columns: 1fr;
    gap: 1rem;
}

.pj-grid[data-view="list"] .pj-card {
    grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
    align-items: center;
    gap: 1.5rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
}

.pj-empty {
    display: grid;
    justify-items: center;
    gap: 0.9rem;
    padding: 3rem 1rem;
    border: 1px dashed var(--line-2);
    border-radius: 16px;
    text-align: center;
}

.pj-empty p {
    margin: 0;
}

/* ---------- Nasıl çalışır ---------- */
.pj-how {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin: clamp(3rem, 6vw, 5rem) 0 0;
    padding: 0;
    list-style: none;
}

.pj-how li {
    display: grid;
    align-content: start;
    gap: 0.4rem;
    padding: 1.1rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
}

.pj-how__n {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-family: var(--mono);
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
    background: var(--brand-600);
}

.pj-how span:not(.pj-how__n) {
    font-size: 0.92rem;
    color: var(--muted);
}

@media (max-width: 900px) {
    .pj-how {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 719px) {
    .pj-grid[data-view="list"] .pj-card {
        grid-template-columns: 1fr;
    }

    .pj-how {
        grid-template-columns: 1fr;
    }

    .pj-select__box select {
        min-width: 0;
    }

    .pj-select,
    .pj-view {
        flex: 1 1 auto;
    }
}

/* ---------- Hareket seviyesi ---------- */
html[data-motion="off"] .window__load,
html[data-motion="off"] .pj-card .window__ring {
    display: none;
}

html[data-motion="off"] .pj-card,
html[data-motion="off"] .pj-card * {
    animation: none !important;
    transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .window__load,
    .pj-card .window__ring {
        display: none;
    }

    .pj-card {
        animation: none !important;
    }
}

.pj-empty[hidden],
.pj-grid[hidden] {
    display: none;
}

/* ==========================================================================
   Projeler sayfası: dolu zemin (kenar nesneleri), kart eğimi, koyu bant
   ========================================================================== */
.pj-hall {
    position: relative;
    overflow: clip;
    background:
        linear-gradient(to right, rgb(20 20 20 / 0.035) 1px, transparent 1px) 0 0 / 40px 40px,
        linear-gradient(to bottom, rgb(20 20 20 / 0.035) 1px, transparent 1px) 0 0 / 40px 40px,
        var(--bg);
}

.pj-hall > .container {
    position: relative;
    z-index: 2;
}

/* ---------- Kenar nesneleri (yalnızca geniş ekranda, içerik sütununun dışında) ---------- */
.pj-deco {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: none;
    pointer-events: none;
}

@media (min-width: 1360px) {
    .pj-deco {
        display: block;
    }
}

.pj-o {
    position: absolute;
    display: block;
    --pj-edge: max(2.25rem, calc(50% - var(--container) / 2 - 8.5rem));
}

.pj-o svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.pj-o__in {
    position: relative;
    display: block;
    filter: drop-shadow(3px 4px 0 rgb(20 20 20 / 0.1));
}

.pj-tag {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 50%;
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--line-2);
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    color: var(--ink);
    background: #fff;
    transform: translateX(-50%);
}

.pj-o--win    { top: 4%;  left: var(--pj-edge); width: 108px; rotate: -6deg; pointer-events: auto; }
.pj-o--tablet { top: 11%; right: var(--pj-edge); width: 96px; rotate: 6deg; }
.pj-o--checks { top: 27%; left: calc(var(--pj-edge) - 0.5rem); width: 128px; rotate: -3deg; }
.pj-o--chart  { top: 36%; right: var(--pj-edge); width: 104px; rotate: -4deg; }
.pj-o--ruler  { top: 51%; left: calc(var(--pj-edge) - 2.5rem); width: 170px; rotate: 82deg; }
.pj-o--bell   { top: 60%; right: calc(var(--pj-edge) - 0.5rem); width: 128px; rotate: 3deg; }
.pj-o--cursor { top: 80%; right: var(--pj-edge); width: 118px; rotate: -4deg; pointer-events: auto; }

@media (min-width: 1700px) {
    .pj-o { --pj-edge: max(2.25rem, calc(50% - var(--container) / 2 - 11rem)); }
    .pj-o--win { width: 132px; }
    .pj-o--checks { width: 150px; }
    .pj-o--tablet { width: 120px; }
    .pj-o--chart { width: 124px; }
    .pj-o--bell { width: 150px; }
}

.pj-checks {
    display: grid;
    gap: 0.4rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--line-2);
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ink);
    background: #fff;
}

.pj-checks b {
    font-size: 0.78rem;
}

.pj-checks span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pj-checks i {
    flex: none;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 10px no-repeat;
}

.pj-bell {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--line-2);
    border-radius: 12px;
    color: var(--brand-600);
    background: #fff;
}

.pj-bell svg {
    flex: none;
    width: 22px;
    height: 22px;
}

.pj-bell span {
    display: grid;
    line-height: 1.25;
}

.pj-bell b {
    font-size: 0.8rem;
    color: var(--ink);
}

.pj-bell small {
    font-size: 0.72rem;
    color: var(--muted);
}

.pj-chart {
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
}

.pj-deco.is-on .pj-chart {
    animation: pj-chart 6s var(--ease-io) infinite;
}

@keyframes pj-chart {
    0% { stroke-dashoffset: 1; }
    40%, 100% { stroke-dashoffset: 0; }
}

.pj-deco.is-on .pj-o__in {
    animation: pj-bob 7s var(--ease-io) infinite;
}

.pj-deco.is-on .pj-o--tablet .pj-o__in { animation-duration: 9s; animation-delay: -4s; }
.pj-deco.is-on .pj-o--bell .pj-o__in { animation-duration: 7s; animation-delay: -2s; }
.pj-deco.is-on .pj-o--checks .pj-o__in { animation-duration: 10s; animation-delay: -1s; }
.pj-deco.is-on .pj-o--cursor .pj-o__in { animation-duration: 6s; animation-delay: -3s; }

@keyframes pj-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-9px); }
}

/* ---------- Kart sahnesi: imleçle hafif eğim (yalnızca ince imleç) ---------- */
.pj-card__stage[data-tilt] {
    --rx: 0deg;
    --ry: 0deg;
    transition: transform 0.35s var(--ease);
}

.pj-card__stage[data-tilt].is-tilting {
    transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
    transition-duration: 0.12s;
}

/* ---------- Koyu bant ---------- */
.pj-band {
    position: relative;
    overflow: clip;
    padding: 0 0 clamp(4rem, 8vw, 6.5rem);
}

.pj-band__marquee {
    overflow: hidden;
    padding: clamp(1rem, 2vw, 1.5rem) 0;
    border-bottom: 1px solid rgb(255 255 255 / 0.12);
    background: var(--brand);
    color: #fff;
}

.pj-band__track {
    display: flex;
    width: max-content;
}

.pj-band__row {
    display: flex;
    flex: none;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pj-band__row li {
    display: flex;
    align-items: center;
    gap: clamp(1.2rem, 3vw, 2.4rem);
    padding-right: clamp(1.2rem, 3vw, 2.4rem);
    font-size: clamp(1.25rem, 0.8rem + 1.2vw, 1.9rem);
    font-weight: 650;
    letter-spacing: -0.03em;
    white-space: nowrap;
}

.pj-band__row li::after {
    content: "";
    width: 0.45em;
    height: 0.45em;
    border: 2px solid rgb(255 255 255 / 0.85);
    border-radius: 3px;
}

.pj-band.is-on .pj-band__track {
    animation: pj-marquee 42s linear infinite;
}

@keyframes pj-marquee {
    to { transform: translate3d(-50%, 0, 0); }
}

.pj-band__body {
    position: relative;
    z-index: 2;
    display: grid;
    justify-items: center;
    padding-top: clamp(3.5rem, 7vw, 5.5rem);
    text-align: center;
}

.pj-band__title {
    margin: 0;
    max-width: 18ch;
    font-size: clamp(2rem, 1.2rem + 2.6vw, 3rem);
    font-weight: 650;
    line-height: 1.1;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.pj-band__title span {
    color: var(--brand);
}

.pj-band__text {
    max-width: 34rem;
    margin: 1.1rem 0 0;
    font-size: 1.05rem;
    color: rgb(255 255 255 / 0.74);
}

.pj-band__cta {
    margin: 1.8rem 0 0;
}

/* Bandın iki yanında, metin sütununun dışında duran taslak kâğıtları */
.pj-band__sheet {
    position: absolute;
    z-index: 1;
    display: none;
    width: 130px;
    height: 165px;
    border-radius: 8px;
    pointer-events: none;
    background:
        linear-gradient(#ff5a1f, #ff5a1f) 14px 14px / 52px 9px no-repeat,
        linear-gradient(#e6ddd6, #e6ddd6) 14px 36px / 102px 6px no-repeat,
        linear-gradient(#e6ddd6, #e6ddd6) 14px 50px / 80px 6px no-repeat,
        linear-gradient(#ffd9c6, #ffd9c6) 14px 72px / 102px 52px no-repeat,
        linear-gradient(#e6ddd6, #e6ddd6) 14px 136px / 70px 6px no-repeat,
        #fff;
    box-shadow: 5px 6px 0 rgb(0 0 0 / 0.35);
}

.pj-band__sheet--a { left: max(1rem, calc(50% - var(--container) / 2 - 1rem)); top: 6rem; rotate: -8deg; }
.pj-band__sheet--b { right: max(1rem, calc(50% - var(--container) / 2 - 1rem)); bottom: 3rem; rotate: 6deg; }

@media (min-width: 1200px) {
    .pj-band__sheet { display: block; }
}

.pj-band.is-on .pj-band__sheet--a { animation: pj-bob 9s var(--ease-io) infinite; }
.pj-band.is-on .pj-band__sheet--b { animation: pj-bob 11s var(--ease-io) infinite reverse; }

/* ---------- Adım sahnesi: bitmiş örneğe bağlantı ---------- */
.pb__tour {
    position: relative;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.92rem;
    font-weight: 650;
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--brand);
    text-underline-offset: 4px;
}

.pb__tour:hover {
    color: var(--brand-600);
}

.pb__tour:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
}

/* ---------- Hareket seviyesi (nesneler, bant, kart eğimi) ---------- */
html[data-motion="calm"] .pj-band.is-on .pj-band__track,
html[data-motion="off"] .pj-band__track,
html[data-motion="off"] .pj-deco *,
html[data-motion="off"] .pj-band__sheet {
    animation: none !important;
}

html[data-motion="off"] .pj-card__stage[data-tilt],
html[data-motion="calm"] .pj-card__stage[data-tilt] {
    transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .pj-band__track,
    .pj-deco *,
    .pj-band__sheet {
        animation: none !important;
    }

    .pj-card__stage[data-tilt] {
        transform: none !important;
        transition: none !important;
    }

    .pj-band__marquee {
        overflow: visible;
    }

    .pj-band__track {
        width: auto;
    }

    .pj-band__row {
        flex-wrap: wrap;
        justify-content: center;
    }

    .pj-band__row + .pj-band__row {
        display: none;
    }
}

/* ==========================================================================
   Bir proje nasıl hayat bulur?
   ========================================================================== */
.pb {
    padding-top: clamp(1rem, 3vw, 2rem);
}

.pb__panel {
    display: grid;
    gap: clamp(1.25rem, 3vw, 2.25rem);
    max-width: 66rem;
    margin: 0 auto;
    padding: clamp(1rem, 3vw, 2rem);
    border: 1px solid var(--line);
    border-radius: 28px;
    background: #fff;
    box-shadow: 4px 5px 0 rgb(20 20 20 / 0.06);
}

/* Adım listesi */
.pb__steps {
    display: grid;
    gap: 0.3rem;
    counter-reset: none;
}

.pb__step {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.85rem;
    width: 100%;
    padding: 0.8rem 0.9rem;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 16px;
    background: transparent;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.25s, border-color 0.25s;
}

.pb__step:hover {
    background: var(--bg-soft);
}

.pb__step[aria-current="step"] {
    border-color: var(--brand-200);
    background: var(--brand-50);
}

.pb__step:focus-visible,
.pb__btn:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.pb__num {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--line-2);
    border-radius: 9px;
    background: #fff;
    font-family: var(--mono);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--muted);
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.pb__step[aria-current="step"] .pb__num {
    border-color: var(--brand-600);
    background: var(--brand-600);
    color: #fff;
}

.pb__step.is-done .pb__num {
    border-color: var(--brand-200);
    color: var(--brand-700);
}

.pb__body {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
    padding-top: 0.2rem;
}

.pb__name {
    font-weight: 600;
    color: var(--ink);
}

.pb__text {
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--muted);
}

/* Otomatik oynatma ilerlemesi (adımın altındaki ince çizgi) */
.pb__bar {
    position: absolute;
    right: 0.9rem;
    bottom: 0;
    left: 0.9rem;
    height: 2px;
    overflow: hidden;
    border-radius: 2px;
}

.pb__bar i {
    display: block;
    height: 100%;
    background: var(--brand);
    transform: scaleX(0);
    transform-origin: 0 50%;
}

.pb.is-auto .pb__step[aria-current="step"] .pb__bar i {
    animation: pb-prog var(--pb-dur, 4.6s) linear forwards;
}

.pb.is-hold .pb__step[aria-current="step"] .pb__bar i {
    animation-play-state: paused;
}

@keyframes pb-prog {
    to { transform: scaleX(1); }
}

/* Sağ: etiketler, sahne, açıklama, kontroller */
.pb__main {
    display: grid;
    align-content: start;
    gap: 0.9rem;
    min-width: 0;
}

.pb__labels {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.75rem;
    font-size: 0.9rem;
}

.pb__label {
    padding: 0.28rem 0.6rem;
    border: 1px solid var(--brand-200);
    border-radius: 999px;
    background: var(--brand-50);
    font-family: var(--mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand-700);
}

.pb__project {
    font-weight: 600;
}

.pb__note {
    margin-left: auto;
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    color: var(--muted);
}

.pb__desc {
    display: grid;
    gap: 0.15rem;
    min-height: 3.2em;
    font-size: 0.95rem;
    color: var(--muted);
}

.pb__desc b {
    color: var(--ink);
}

.pb__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.pb__controls[hidden] {
    display: none;
}

.pb__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-width: 42px;
    height: 42px;
    padding: 0 0.85rem;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    background: #fff;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--ink);
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}

.pb__btn .icon {
    width: 17px;
    height: 17px;
}

.pb__btn:hover {
    border-color: var(--ink);
}

.pb__btn:disabled {
    opacity: 0.45;
    cursor: default;
}

.pb__btn:disabled:hover {
    border-color: var(--line-2);
}

.pb__btn--play {
    min-width: 9.25rem;
    color: #fff;
    background: var(--ink);
    border-color: var(--ink);
}

.pb__btn--play:hover {
    background: var(--brand-700);
    border-color: var(--brand-700);
}

.pb__play-icon {
    display: grid;
}

.pb__play-icon .icon {
    grid-area: 1 / 1;
}

.pb__i-pause,
.pb__btn--play[aria-pressed="true"] .pb__i-play {
    opacity: 0;
}

.pb__btn--play[aria-pressed="true"] .pb__i-pause {
    opacity: 1;
}

.pb__count {
    padding: 0 0.35rem;
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--muted);
}

.pb__count b {
    color: var(--ink);
}

.pb__btn--text {
    margin-left: auto;
}

@media (min-width: 900px) {
    .pb__panel {
        grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
        align-items: start;
    }

    .pb__desc {
        display: none;
    }
}

@media (max-width: 899px) {
    /* Telefonda: sahne üstte, adımlar altta kompakt ızgara */
    .pb__steps {
        order: 2;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.35rem;
    }

    .pb__step {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        gap: 0.35rem;
        padding: 0.65rem 0.3rem 0.75rem;
        text-align: center;
    }

    .pb__body {
        padding-top: 0;
    }

    .pb__name {
        font-size: 0.8rem;
        line-height: 1.25;
    }

    .pb__text {
        display: none;
    }

    .pb__bar {
        right: 0.6rem;
        left: 0.6rem;
    }
}

@media (max-width: 420px) {
    .pb__btn--text span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .pb__btn--play {
        min-width: 6.5rem;
    }

    .pb__controls {
        gap: 0.4rem;
    }

    .pb__btn {
        min-width: 40px;
        height: 40px;
        padding: 0 0.7rem;
    }

    .pb__count {
        padding: 0;
    }
}


/* ---------- Sahne ---------- */
.pb__stage {
    --t: 0.7s;
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 11;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--bg-soft);
    container: pbstage / inline-size;
}

.pb-grid {
    position: absolute;
    inset: 0;
    background:
                linear-gradient(to right, rgb(20 20 20 / 0.05) 1px, transparent 1px) 0 0 / 4cqw 4cqw,
        linear-gradient(to bottom, rgb(20 20 20 / 0.05) 1px, transparent 1px) 0 0 / 4cqw 4cqw;
}

/* Masaüstü penceresi */
.pb-desk {
    position: absolute;
    top: 3.75cqw;
    left: 5cqw;
    width: 90cqw;
    border-radius: 1.6cqw;
    background: #fff;
    box-shadow: 0 0 0 1px rgb(20 20 20 / 0.08), 0.7cqw 0.9cqw 0 rgb(20 20 20 / 0.14);
    transform-origin: 0 0;
    transition: transform var(--t) var(--ease);
}

.pb-desk__bar {
    display: flex;
    align-items: center;
    gap: 1.2cqw;
    height: 5cqw;
    padding: 0 1.6cqw;
    border-bottom: 1px solid var(--line);
    border-radius: 1.6cqw 1.6cqw 0 0;
    background: #fbfbfb;
}

.pb-desk__dots {
    display: flex;
    gap: 0.7cqw;
}

.pb-desk__dots i {
    width: 1.15cqw;
    height: 1.15cqw;
    border-radius: 50%;
    background: #e3e3e3;
}

.pb-desk__url {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5cqw;
    flex: 1;
    max-width: 60%;
    height: 3cqw;
    margin: 0 auto;
    padding: 0 1.2cqw;
    overflow: hidden;
    border-radius: 0.8cqw;
    background: #f0f0f0;
    font-family: var(--mono);
    font-size: clamp(0.5rem, 1.45cqw, 0.72rem);
    color: var(--muted);
    white-space: nowrap;
    transform: translateX(-2.5cqw);
}

.pb-desk__lock {
    flex: none;
    width: 1.5cqw;
    min-width: 8px;
    height: auto;
    transition: color 0.4s;
}


.pb-desk__screen {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    border-radius: 0 0 1.6cqw 1.6cqw;
    background: #fff;
    container-type: inline-size;
}

.pb-blank,
.pb-wire,
.pb-design {
    position: absolute;
    inset: 0;
    display: block;
    transition: opacity var(--t) var(--ease);
}

.pb-blank {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 2cqw;
    background: #fff;
}

.pb-blank__box {
    width: 30cqw;
    height: 18cqw;
    border: 0.25cqw dashed var(--line-2);
    border-radius: 1.4cqw;
}

.pb-blank__text {
    font-family: var(--mono);
    font-size: clamp(0.55rem, 1.9cqw, 0.8rem);
    color: var(--faint);
}

/* Tel çerçeve: aynı önizleme, gri kutular */
.pb-wire .mock {
    --mk-bg: #f7f7f7;
    --mk-ink: #a3a3a3;
    --mk-accent: #cdcdcd;
    --mk-on: transparent;
    --mk-head: var(--font);
    --mk-line: rgb(0 0 0 / 0.08);
    --mk-c1: #e4e4e4;
    --mk-c2: #e4e4e4;
    --mk-c3: #e4e4e4;
}

.pb-wire .mock .mk-logo,
.pb-wire .mock .mk-kicker,
.pb-wire .mock .mk-h,
.pb-wire .mock .mk-h2,
.pb-wire .mock .mk-card__title,
.pb-wire .mock .mk-btn {
    border-radius: 0.6cqw;
    background: #dedede;
    color: transparent;
}

.pb-wire .mock .mk-h {
    width: fit-content;
}

.pb-wire .mock .mk-art,
.pb-wire .mock .mk-card__img {
    border: 0.25cqw dashed #c4c4c4;
    background:
        linear-gradient(to top right, transparent calc(50% - 0.12cqw), #cfcfcf calc(50% - 0.12cqw), #cfcfcf calc(50% + 0.12cqw), transparent calc(50% + 0.12cqw)),
        linear-gradient(to bottom right, transparent calc(50% - 0.12cqw), #cfcfcf calc(50% - 0.12cqw), #cfcfcf calc(50% + 0.12cqw), transparent calc(50% + 0.12cqw)),
        #efefef;
    box-shadow: none;
}

.pb-wire .mock .mk-art i {
    display: none;
}

.pb-wire .mock .mk-band {
    background: #d9d9d9;
}

/* Tasarım katmanı: öğeler sırayla yerine oturur */
.pb-design .mk-nav,
.pb-design .mk-copy > *,
.pb-design .mk-art,
.pb-design .mk-section,
.pb-design .mk-band {
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.pb-design .mk-copy > :nth-child(2) { transition-delay: 0.08s; }
.pb-design .mk-copy > :nth-child(3),
.pb-design .mk-copy > :nth-child(4) { transition-delay: 0.14s; }
.pb-design .mk-copy > :nth-child(5) { transition-delay: 0.22s; }
.pb-design .mk-art { transition-delay: 0.18s; }
.pb-design .mk-section { transition-delay: 0.3s; }
.pb-design .mk-band { transition-delay: 0.38s; }

/* Adım durumları */
.pb__stage:not([data-step="0"]) .pb-blank { opacity: 0; }
.pb__stage:not([data-step="1"]) .pb-wire { opacity: 0; }
.pb__stage[data-step="0"] .pb-design,
.pb__stage[data-step="1"] .pb-design { opacity: 0; }

.pb__stage[data-step="0"] .pb-design .mk-nav,
.pb__stage[data-step="0"] .pb-design .mk-copy > *,
.pb__stage[data-step="0"] .pb-design .mk-art,
.pb__stage[data-step="0"] .pb-design .mk-section,
.pb__stage[data-step="0"] .pb-design .mk-band,
.pb__stage[data-step="1"] .pb-design .mk-nav,
.pb__stage[data-step="1"] .pb-design .mk-copy > *,
.pb__stage[data-step="1"] .pb-design .mk-art,
.pb__stage[data-step="1"] .pb-design .mk-section,
.pb__stage[data-step="1"] .pb-design .mk-band {
    opacity: 0;
    transform: translate3d(0, 2.5cqw, 0);
    transition-delay: 0s;
}

/* Brief notları */
.pb-notes {
    position: absolute;
    top: 13cqw;
    right: 8cqw;
    display: grid;
    gap: 1.3cqw;
    width: 44cqw;
    padding: 2.6cqw 2.8cqw 3cqw;
    border-radius: 1.4cqw;
    background: #fff;
    box-shadow: 0 0 0 1px rgb(20 20 20 / 0.07), 0.7cqw 0.9cqw 0 rgb(20 20 20 / 0.14);
    font-size: clamp(0.56rem, 1.7cqw, 0.84rem);
    line-height: 1.35;
    color: var(--ink-soft);
    rotate: -1.5deg;
    transition: opacity 0.5s var(--ease), transform 0.6s var(--ease);
}

.pb-notes::before {
    content: "";
    position: absolute;
    top: -1.2cqw;
    left: 50%;
    width: 11cqw;
    height: 2.4cqw;
    margin-left: -5.5cqw;
    border-radius: 0.3cqw;
    background: color-mix(in srgb, var(--brand) 30%, transparent);
    rotate: 2deg;
}

.pb-notes__head {
    margin-bottom: 0.4cqw;
    padding-bottom: 1.2cqw;
    border-bottom: 1px dashed var(--line-2);
    font-family: var(--mono);
    font-size: clamp(0.52rem, 1.5cqw, 0.74rem);
    letter-spacing: 0.04em;
    color: var(--brand-700);
}

.pb-notes__row {
    position: relative;
    display: block;
    padding-left: 3.4cqw;
    transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}

.pb-notes__row b {
    font-weight: 600;
    color: var(--ink);
}

.pb-notes__row i {
    position: absolute;
    top: 0.25em;
    left: 0;
    width: 1em;
    height: 1em;
    border: 1.5px solid var(--brand);
    border-radius: 0.25em;
    background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 80% no-repeat;
}

.pb-notes__row:nth-child(3) { transition-delay: 0.25s; }
.pb-notes__row:nth-child(4) { transition-delay: 0.5s; }
.pb-notes__row:nth-child(5) { transition-delay: 0.75s; }
.pb-notes__row:nth-child(2) { transition-delay: 0s; }

.pb__stage:not([data-step="0"]) .pb-notes {
    opacity: 0;
    transform: translate3d(4cqw, -2cqw, 0) rotate(4deg);
}

.pb__stage:not([data-step="0"]) .pb-notes__row {
    opacity: 0;
    transform: translate3d(-1.5cqw, 0, 0);
    transition-delay: 0s;
}

/* Yapım listesi: sayfalar sırayla tamamlanır (adım 4) */
.pb-build {
    position: absolute;
    right: 3.5cqw;
    bottom: 3.5cqw;
    display: grid;
    align-content: start;
    gap: 1.6cqw;
    width: 46cqw;
    padding: 2.4cqw 2.8cqw 2.8cqw;
    border-radius: 1.6cqw;
    background: #fff;
    box-shadow: 0 0 0 1px rgb(20 20 20 / 0.08), 0.7cqw 0.9cqw 0 rgb(20 20 20 / 0.14);
    transition: opacity 0.5s var(--ease), transform 0.6s var(--ease);
}

.pb-build__head {
    display: flex;
    flex-direction: column;
    gap: 0.3cqw;
    padding-bottom: 1.4cqw;
    border-bottom: 1px dashed var(--line-2);
    font-size: clamp(0.58rem, 1.7cqw, 0.82rem);
}

.pb-build__head b {
    font-weight: 700;
    color: var(--ink);
}

.pb-build__head span {
    font-family: var(--mono);
    font-size: 0.82em;
    color: var(--muted);
}

.pb-build__rows {
    display: grid;
    gap: 1.5cqw;
}

.pb-build__row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 1.6cqw;
    row-gap: 0.5cqw;
    align-items: center;
    font-size: clamp(0.56rem, 1.6cqw, 0.78rem);
    font-weight: 600;
    color: var(--ink);
    transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}

.pb-build__ok {
    position: relative;
    grid-row: 1 / 3;
    width: 3cqw;
    height: 3cqw;
    border-radius: 50%;
    background: var(--brand);
}

.pb-build__ok::after {
    content: "";
    position: absolute;
    left: 30%;
    top: 24%;
    width: 38%;
    height: 22%;
    border-left: 0.5cqw solid #fff;
    border-bottom: 0.5cqw solid #fff;
    transform: rotate(-45deg);
}

.pb-build__name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pb-build__bar {
    display: block;
    height: 0.8cqw;
    overflow: hidden;
    border-radius: 1cqw;
    background: var(--brand-100);
}

.pb-build__bar i {
    display: block;
    height: 100%;
    background: var(--brand);
    transform-origin: 0 50%;
}

.pb-build__row:nth-child(1) { transition-delay: 0.25s; }
.pb-build__row:nth-child(2) { transition-delay: 0.45s; }
.pb-build__row:nth-child(3) { transition-delay: 0.65s; }
.pb-build__row:nth-child(4) { transition-delay: 0.85s; }
.pb-build__row:nth-child(5) { transition-delay: 1.05s; }

.pb__stage[data-step="3"] .pb-build__bar i {
    animation: pb-fillbar 1.1s var(--ease) both;
}

.pb__stage[data-step="3"] .pb-build__row:nth-child(2) .pb-build__bar i { animation-delay: 0.4s; }
.pb__stage[data-step="3"] .pb-build__row:nth-child(3) .pb-build__bar i { animation-delay: 0.8s; }
.pb__stage[data-step="3"] .pb-build__row:nth-child(4) .pb-build__bar i { animation-delay: 1.2s; }
.pb__stage[data-step="3"] .pb-build__row:nth-child(5) .pb-build__bar i { animation-delay: 1.6s; }

@keyframes pb-fillbar {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

.pb__stage:not([data-step="3"]) .pb-build {
    opacity: 0;
    transform: translate3d(0, 5cqw, 0);
}

.pb__stage:not([data-step="3"]) .pb-build__row {
    opacity: 0;
    transform: translate3d(-1.5cqw, 0, 0);
    transition-delay: 0s;
}

/* Uyumluluk: masaüstü küçülür, tablet ve telefon belirir */
.pb__stage[data-step="4"] .pb-desk {
    transform: translate3d(-1cqw, 19cqw, 0) scale(0.56);
}

.pb-dev {
    position: absolute;
    display: block;
    padding: 0.9cqw;
    border-radius: 2.4cqw;
    background: #1b1b1c;
    box-shadow: 0 0 0 1px rgb(0 0 0 / 0.3), 0.7cqw 0.9cqw 0 rgb(20 20 20 / 0.14);
    transition: opacity 0.6s var(--ease), transform var(--t) var(--ease);
}

.pb-dev--tab {
    top: 24cqw;
    left: 57cqw;
    width: 24cqw;
}

.pb-dev--phone {
    top: 31.5cqw;
    left: 84cqw;
    width: 12cqw;
    padding: 0.7cqw;
    border-radius: 2.2cqw;
}

.pb-dev__screen {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    border-radius: 1.5cqw;
    background: #fff;
    container-type: inline-size;
}

.pb-dev--phone .pb-dev__screen {
    aspect-ratio: 9 / 19;
    border-radius: 1.6cqw;
}

.pb__stage:not([data-step="4"]) .pb-dev {
    opacity: 0;
    transform: translate3d(0, 4cqw, 0) scale(0.96);
}

.pb__stage[data-step="4"] .pb-dev--tab { transition-delay: 0.2s; }
.pb__stage[data-step="4"] .pb-dev--phone { transition-delay: 0.35s; }

/* Duyarlı önizleme: aynı tasarım dar ekrana göre yeniden dizilir */
.pb-dev .mk-nav { padding: 5cqw 6cqw; }
.pb-dev .mk-logo { font-size: 5cqw; }
.pb-dev .mk-btn { font-size: 3.4cqw; padding: 2.2cqw 4.4cqw; }
.pb-dev .mk-btn--sm { display: none; }
.pb-dev .mk-hero { grid-template-columns: minmax(0, 1fr); gap: 6cqw; padding: 6cqw 6cqw 8cqw; }
.pb-dev .mk-kicker { font-size: 3cqw; }
.pb-dev .mk-h { font-size: 9cqw; }
.pb-dev .mk-line { height: 1.8cqw; margin-bottom: 2cqw; }
.pb-dev .mk-art { aspect-ratio: 4 / 3; }
.pb-dev .mk-h2 { font-size: 6cqw; }
.pb-dev .mk-section { padding: 6cqw; }
.pb-dev .mk-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pb-dev .mk-card__title { font-size: 3.6cqw; }
.pb-dev--tab .mk-links { gap: 3cqw; }
.pb-dev--tab .mk-links i { width: 7cqw; height: 1.4cqw; }
.pb-dev--phone .mk-links { display: none; }
.pb-dev--phone .mk-nav::after {
    content: "";
    width: 7cqw;
    height: 5cqw;
    background: linear-gradient(currentColor, currentColor) 0 0 / 100% 0.9cqw no-repeat, linear-gradient(currentColor, currentColor) 0 50% / 100% 0.9cqw no-repeat, linear-gradient(currentColor, currentColor) 0 100% / 100% 0.9cqw no-repeat;
    opacity: 0.5;
}
.pb-dev--phone .mk-h { font-size: 12cqw; }
.pb-dev--phone .mk-logo { font-size: 7cqw; }
.pb-dev--phone .mk-kicker { font-size: 4.4cqw; }
.pb-dev--phone .mk-btn { font-size: 5cqw; padding: 3cqw 6cqw; }
.pb-dev--phone .mk-cards { grid-template-columns: minmax(0, 1fr); }
.pb-dev--phone .mk-card__title { font-size: 5.6cqw; }

/* Tarama çizgisi ve onay rozeti */
.pb-dev__scan {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 2;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--brand) 20%, var(--brand) 80%, transparent);
    opacity: 0;
    pointer-events: none;
}

.pb-dev__ok {
    position: absolute;
    bottom: -1.2cqw;
    left: 50%;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
    padding: 0.3em 0.65em;
    border-radius: 999px;
    background: var(--brand-600);
    font-family: var(--mono);
    font-size: clamp(0.5rem, 1.35cqw, 0.68rem);
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, 30%) scale(0.6);
    transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}

.pb-dev__ok svg {
    width: 1.1em;
    height: 1.1em;
}

.pb-desk > .pb-dev__ok {
    bottom: -2.4cqw;
    font-size: clamp(0.6rem, 2.5cqw, 1.2rem);
}

.pb__stage[data-step="4"] .pb-dev__ok {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
}

.pb__stage[data-step="4"] .pb-desk > .pb-dev__ok { transition-delay: 1.15s; }
.pb__stage[data-step="4"] .pb-dev--tab .pb-dev__ok { transition-delay: 1.75s; }
.pb__stage[data-step="4"] .pb-dev--phone .pb-dev__ok { transition-delay: 2.35s; }

.pb__stage[data-step="4"] .pb-desk > .pb-dev__scan { animation: pb-scan 0.9s var(--ease-io) 0.35s both; }
.pb__stage[data-step="4"] .pb-dev--tab .pb-dev__scan { animation: pb-scan 0.9s var(--ease-io) 0.95s both; }
.pb__stage[data-step="4"] .pb-dev--phone .pb-dev__scan { animation: pb-scan 0.9s var(--ease-io) 1.55s both; }

.pb-desk > .pb-dev__scan {
    top: 5cqw;
}

@keyframes pb-scan {
    0% { opacity: 0; transform: translateY(0); }
    10% { opacity: 1; }
    85% { opacity: 1; }
    100% { opacity: 0; transform: translateY(var(--scan-h, 50cqw)); }
}

.pb-desk > .pb-dev__scan { --scan-h: 50cqw; }
.pb-dev--tab .pb-dev__scan { --scan-h: 31cqw; }
.pb-dev--phone .pb-dev__scan { --scan-h: 24cqw; }

/* Yayında */
.pb-desk__ring {
    position: absolute;
    inset: -2px;
    padding: 2px;
    overflow: hidden;
    border-radius: calc(1.6cqw + 2px);
    pointer-events: none;
    opacity: 0;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    transition: opacity 0.6s var(--ease);
}

.pb-desk__ring i {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150%;
    aspect-ratio: 1;
    background: conic-gradient(from 0deg, transparent 0 60%, color-mix(in srgb, var(--brand) 35%, transparent) 75%, var(--brand) 88%, #ffd9bf 93%, transparent 100%);
    transform: translate(-50%, -50%);
    animation: win-ring 4.5s linear infinite paused;
}

.pb__stage[data-step="5"] .pb-desk__ring {
    opacity: 1;
}

.pb__stage[data-step="5"] .pb-desk__ring i {
    animation-play-state: running;
}

.pb.is-hold .pb-desk__ring i,
.pb.is-hold .pb-live i::after,
.pb.is-hold .pb-build__bar i {
    animation-play-state: paused;
}

.pb__stage[data-step="5"] .pb-desk__lock {
    color: var(--brand-700);
}

.pb-live {
    position: absolute;
    bottom: 4.5cqw;
    left: 50%;
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    padding: 0.55em 0.6em 0.55em 0.95em;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 0 0 1px rgb(20 20 20 / 0.08), 0.7cqw 0.9cqw 0 rgb(20 20 20 / 0.14);
    font-size: clamp(0.62rem, 1.9cqw, 0.92rem);
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    transform: translate(-50%, 0);
    transition: opacity 0.5s var(--ease) 0.35s, transform 0.6s var(--ease) 0.35s;
}

.pb-live i {
    position: relative;
    width: 0.6em;
    height: 0.6em;
    border-radius: 50%;
    background: var(--brand);
}

.pb-live i::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--brand);
    animation: ping 2.4s var(--ease) infinite;
}

.pb-live b {
    padding: 0.25em 0.6em;
    border-radius: 999px;
    background: var(--brand-50);
    font-family: var(--mono);
    font-size: 0.85em;
    font-weight: 600;
    color: var(--brand-700);
}

.pb__stage:not([data-step="5"]) .pb-live {
    opacity: 0;
    transform: translate(-50%, 3cqw);
    transition-delay: 0s;
}

/* Telefonda sahne biraz daha uzun: yapım listesi ve notlar sığar */
@media (max-width: 599px) {
    .pb__stage {
        aspect-ratio: 16 / 12.5;
    }
}

/* Dar sahne (telefon): notlar ve yapım listesi daha geniş, yazılar okunur kalır */
@container pbstage (max-width: 520px) {
    .pb-desk {
        top: 8.5cqw;
    }

    .pb-dev--tab { top: 29cqw; }
    .pb-dev--phone { top: 36.5cqw; }

    .pb-notes {
        top: 9cqw;
        right: 6cqw;
        width: 70cqw;
        gap: 1.6cqw;
        padding: 3.4cqw 3.8cqw 4cqw;
    }

    .pb-build {
        right: 3cqw;
        bottom: 3cqw;
        width: 74cqw;
        gap: 2.4cqw;
    }
}