/*!
 * DGR Web v14 — Teknoloji bandı (partials/tech-band.php, tech-band.js)
 * Footer'ın hemen üstünde başlıksız, sonsuz kayan grafit kutucuklar; aralarında kesikli hat ve kutudan kutuya
 * taşınan turuncu sinyal; kenarlarda maske ile solma. Tokenlı (koyu/aydınlık), şerit yönü her dilde LTR sabit.
 * Hareket: yalnız transform/opacity. Ekran dışında / sekme gizliyken / hover-odakta / duraklatılınca durur.
 * Reduced / data-motion="off": kopyalar gizlenir, liste ortalı statik sarılı satır olur.
 */

.tband {
    --tband-h: 64px;
    --tband-gap: 2.75rem;
    --tband-tile: color-mix(in srgb, var(--surface) 72%, var(--bg));
    position: relative;
    isolation: isolate;
    overflow: hidden;
    scroll-margin-top: calc(var(--header-h, 72px) + 1rem);
    padding-block: clamp(1rem, 2vw, 1.5rem);
    border-top: 1px solid var(--line);
    background: var(--bg);
    color: var(--text-3);
}

/* Bandın ortasından geçen çok soluk ışık hattı (kutucukların arkasında) */
.tband::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 50%;
    z-index: -1;
    height: 1px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--brand) 22%, transparent) 30%, color-mix(in srgb, var(--brand) 22%, transparent) 70%, transparent);
    opacity: 0.5;
}

.tband__viewport {
    direction: ltr;
    overflow: hidden;
    padding-block: 6px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.tband__track {
    display: flex;
    width: max-content;
    animation: tband-scroll var(--tband-dur, 48s) linear infinite;
    will-change: transform;
}

.tband.is-paused .tband__track {
    animation-play-state: paused;
}

@keyframes tband-scroll {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(var(--tband-shift, -50%), 0, 0); }
}

.tband__list {
    display: flex;
    flex: none;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tband__item {
    display: flex;
    flex: none;
    align-items: center;
}

/* ---- Kutucuk ---------------------------------------------------------- */

.tband__tile {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    height: var(--tband-h);
    min-width: 9.5rem;
    padding-inline: 1.15rem 1.35rem;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 14px;
    background:
        linear-gradient(var(--tband-tile), var(--tband-tile)) padding-box,
        linear-gradient(160deg, var(--line-2), var(--line) 45%, color-mix(in srgb, var(--brand) 16%, var(--line)) 100%) border-box;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 5%, transparent);
    color: var(--text-3);
    transition: transform 0.45s var(--ease-out), color 0.3s var(--ease), box-shadow 0.45s var(--ease-out);
}

/* Hover/sinyal parıltısı: ayrı katman, yalnız opacity değişir */
.tband__tile::after {
    content: "";
    position: absolute;
    inset: -1px;
    border: 1px solid color-mix(in srgb, var(--brand) 55%, transparent);
    border-radius: inherit;
    background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 70%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s var(--ease);
}

.tband__glyph {
    position: relative;
    flex: none;
    width: 28px;
    height: 28px;
    opacity: 0.85;
    transition: color 0.3s var(--ease), opacity 0.3s var(--ease);
}

.tband__name {
    position: relative;
    font-family: var(--font);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1;
    white-space: nowrap;
    color: var(--text-2);
    opacity: 0.8;
    transition: color 0.3s var(--ease), opacity 0.3s var(--ease);
}

/* Bilinmeyen ad: baş harfli rozet */
.tband__mono {
    position: relative;
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--line-2);
    border-radius: 8px;
    background: linear-gradient(150deg, color-mix(in srgb, var(--text) 8%, transparent), transparent 70%);
    font-family: var(--mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-2);
    transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.tband__mono::after {
    content: "";
    position: absolute;
    inset-block-end: -3px;
    inset-inline-end: -3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand);
    opacity: 0.55;
}

/* ---- Kesikli bağlantı hattı + sinyal ------------------------------------ */

.tband__wire {
    position: relative;
    flex: none;
    width: var(--tband-gap);
    height: 2px;
    background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--text-3) 55%, transparent) 0 3px, transparent 3px 7px);
}

/* uç noktalar (kutucuğa değen küçük portlar) */
.tband__wire::before,
.tband__wire::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 5px;
    height: 5px;
    margin-top: -2.5px;
    border-radius: 50%;
    background: var(--tband-tile);
    box-shadow: 0 0 0 1px var(--line-2);
}

.tband__wire::before { left: -3px; }
.tband__wire::after { right: -3px; }

.tband__wire > i {
    position: absolute;
    top: 50%;
    left: 0;
    width: 16px;
    height: 3px;
    margin-top: -1.5px;
    border-radius: 3px;
    background: linear-gradient(90deg, transparent, var(--brand) 70%, var(--accent));
    box-shadow: 0 0 8px var(--brand-glow);
    opacity: 0;
}

.tband__item.is-pulse .tband__wire > i {
    animation: tband-hop 0.8s var(--ease-io) both;
}

.tband__item.is-pulse .tband__wire::before {
    animation: tband-port 0.8s var(--ease) both;
}

@keyframes tband-hop {
    0% { opacity: 0; transform: translate3d(-4px, 0, 0); }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { opacity: 0; transform: translate3d(calc(var(--tband-gap) - 12px), 0, 0); }
}

@keyframes tband-port {
    0%, 100% { background: var(--tband-tile); }
    25% { background: var(--brand); }
}

/* Sinyal ulaştı: kutucuk kısa bir an yanar */
.tband__item.is-recv .tband__tile::after {
    animation: tband-recv 1.3s var(--ease);
}

.tband__item.is-recv .tband__glyph,
.tband__item.is-recv .tband__mono {
    animation: tband-recv-ink 1.3s var(--ease);
}

@keyframes tband-recv {
    0% { opacity: 0; }
    25% { opacity: 0.7; }
    100% { opacity: 0; }
}

@keyframes tband-recv-ink {
    0%, 100% { color: var(--text-3); }
    25% { color: var(--brand-600); }
}

/* ---- Hover (yalnız ince imleç): band durur, kutucuk canlanır -------------- */

@media (hover: hover) and (pointer: fine) {
    .tband:hover .tband__track {
        animation-play-state: paused;
    }

    .tband__tile:hover {
        transform: translate3d(0, -3px, 0);
        box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 8%, transparent), var(--shadow-glow);
    }

    .tband__tile:hover::after {
        opacity: 1;
    }

    .tband__tile:hover .tband__glyph {
        color: var(--brand);
        opacity: 1;
    }

    .tband__tile:hover .tband__mono {
        border-color: color-mix(in srgb, var(--brand) 55%, transparent);
        color: var(--brand-600);
    }

    .tband__tile:hover .tband__name {
        color: var(--text);
        opacity: 1;
    }
}

.tband:focus-within .tband__track {
    animation-play-state: paused;
}

/* ---- Duraklat / sürdür düğmesi (WCAG 2.2.2) ------------------------------ */

.tband__toggle {
    position: absolute;
    top: 50%;
    inset-inline-end: 0.6rem;
    z-index: 2;
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin-top: -15px;
    padding: 0;
    border: 1px solid var(--line-2);
    border-radius: 50%;
    background: var(--surface);
    color: var(--text-2);
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.tband__toggle[hidden] {
    display: none;
}

.tband__toggle:hover,
.tband__toggle:focus-visible {
    opacity: 1;
    color: var(--brand-600);
    border-color: color-mix(in srgb, var(--brand) 50%, transparent);
}

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

.tband__ico-play,
.tband__toggle[aria-pressed="true"] .tband__ico-pause {
    display: none;
}

.tband__toggle[aria-pressed="true"] .tband__ico-play {
    display: inline;
}

/* ---- Mobil: daha küçük kutucuklar ---------------------------------------- */

@media (max-width: 600px) {
    .tband {
        --tband-h: 50px;
        --tband-gap: 1.5rem;
        padding-block: 1rem;
    }

    .tband__tile {
        min-width: 7.25rem;
        gap: 0.5rem;
        padding-inline: 0.8rem 0.95rem;
        border-radius: 11px;
    }

    .tband__glyph,
    .tband__mono {
        width: 22px;
        height: 22px;
    }

    .tband__mono {
        border-radius: 6px;
        font-size: 0.6rem;
    }

    .tband__name {
        font-size: 0.8rem;
    }

    .tband__viewport {
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
        mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    }

    .tband__toggle {
        width: 26px;
        height: 26px;
        margin-top: -13px;
    }
}

/* ---- Hareketsiz: statik, ortalı, sarılı satır ---------------------------- */

@media (prefers-reduced-motion: reduce) {
    .tband__track { width: auto; animation: none; transform: none; will-change: auto; }
    .tband__list { flex: 1 1 auto; flex-wrap: wrap; justify-content: center; gap: 0.75rem; padding-inline: var(--gutter); }
    .tband__list--clone, .tband__wire, .tband__toggle, .tband::before { display: none; }
    .tband__viewport { -webkit-mask-image: none; mask-image: none; }
    .tband__tile, .tband__tile::after, .tband__glyph, .tband__name { transition: none; }
}

html[data-motion="off"] .tband__track { width: auto; animation: none; transform: none; will-change: auto; }
html[data-motion="off"] .tband__list { flex: 1 1 auto; flex-wrap: wrap; justify-content: center; gap: 0.75rem; padding-inline: var(--gutter); }
html[data-motion="off"] .tband__list--clone,
html[data-motion="off"] .tband__wire,
html[data-motion="off"] .tband__toggle,
html[data-motion="off"] .tband::before { display: none; }
html[data-motion="off"] .tband__viewport { -webkit-mask-image: none; mask-image: none; }