[data-hero-carousel-root] {
    --hero-nav-size: clamp(40px, 3.2vw, 56px);
}

[data-hero-carousel-root] :is(.hero-nav-prev, .hero-nav-next) {
    color: #fff;
}

[data-hero-carousel-root] :is(.hero-nav-prev, .hero-nav-next) svg {
    width: var(--hero-nav-size);
    height: var(--hero-nav-size);
    color: inherit;
}

/* AirPods-inspired hero scale: compact, confident and content-case aware. */
[data-hero-slide-title] {
    max-width: 15ch;
    margin-inline: auto;
    padding-block: .04em .12em;
    font-family: "Google Sans Flex", sans-serif;
    font-size: clamp(42px, 7.2vw, 72px);
    font-weight: 300;
    line-height: 1.02;
    letter-spacing: -.025em;
    text-transform: none;
    text-wrap: balance;
}

@media (min-width: 1280px) {
    .hero-field .hero-title-container {
        top: 50%;
        translate: -50% -50%;
    }

    [data-hero-slide-title] {
        max-width: none;
        font-size: clamp(58px, 4.4vw, 76px);
        line-height: 1.02;
        white-space: nowrap;
        text-wrap: nowrap;
    }
}

/* Keep the long technology statement in the same editorial type system. */
.technology-intro-copy {
    max-width: min(34ch, calc(100vw - 80px));
    margin-inline: auto;
    font-family: "Google Sans Flex", sans-serif;
    font-size: clamp(56px, 4.6vw, 76px);
    font-weight: 500;
    line-height: 1.06;
    letter-spacing: -.025em;
    color: #fff;
    text-wrap: balance;
}

.technology-intro-text {
    --technology-fill-progress: 0%;
    position: relative;
    display: inline-block;
    color: rgb(255 255 255 / 28%);
}

.technology-intro-text::after {
    position: absolute;
    inset: 0;
    color: #fff;
    content: attr(data-technology-text);
    clip-path: inset(0 calc(100% - var(--technology-fill-progress)) 0 0);
    pointer-events: none;
}

.technology-intro-text[data-technology-lines-ready="true"]::after {
    content: none;
}

.technology-intro-line {
    position: relative;
    display: block;
    width: max-content;
    max-width: 100%;
    margin-inline: auto;
}

.technology-intro-line::after {
    position: absolute;
    inset: 0;
    color: #fff;
    content: attr(data-technology-text);
    clip-path: inset(0 clamp(0%, calc(var(--technology-line-end) - var(--technology-fill-progress)), 100%) 0 0);
    pointer-events: none;
}

/* The video overlay follows the casing chosen in the content panel. */
[data-technology-overlay-title] {
    text-transform: none;
}

/* The light banner setting needs dark foregrounds, including the hover copy. */
[data-hero-content-theme="light"] .hero-title-carousel .swiper-slide > div,
[data-hero-content-theme="light"] .hero-text-carousel .swiper-slide > p,
[data-hero-content-theme="light"] .hero-button-carousel p {
    color: #181819;
}

[data-hero-content-theme="light"] .hero-button-carousel a {
    --template-color: #181819 !important;
    --primary-color: #181819 !important;
    background-color: rgb(255 255 255 / 92%);
    border-radius: 999px;
}

[data-hero-content-theme="light"] :is(.hero-nav-prev, .hero-nav-next) {
    color: #181819;
    background-color: transparent;
    border-color: transparent;
    border-radius: 50%;
}

[data-hero-content-theme="light"] :is(.hero-nav-prev, .hero-nav-next) rect:not(.hero-nav-progress) {
    fill: rgb(255 255 255 / 92%);
    stroke-opacity: .3;
}

/*
 * Keep every surface annotation on the same 1630 x 768 design stage as the
 * artwork. Viewport-relative gutters and the old 1280-1480px zoom changed the
 * coordinate system independently from the implant, which made the labels
 * collide on shorter notebook screens.
 */
.video-content-stack {
    zoom: 1;
}

/*
 * The stage is the type scale too. Every annotation is placed in percentages
 * of this box, so sizing the copy in viewport units let it drift away from its
 * leader line whenever the window was not 1630 x 768 - and the breakpoint jumps
 * at 1280/1536px rewrapped the labels mid-resize. Container units keep the copy
 * locked to the artwork at every resolution.
 */
[data-surface-stage] {
    container-type: inline-size;
}

/*
 * The microscope circle sits near the top of the stage, which on short desktop
 * windows lands under the fixed header (top bar plus the 83px nav pill, ~137px).
 * Drop the circle, its leader and its paragraph together so the group keeps its
 * shape. 8% of the stage is enough on a roomy window; when the stage nearly
 * fills the viewport there is no gap left above it, so add back whatever the
 * header still covers. The stage is `min(100vw, 1630px)` wide on a 1630 x 768
 * ratio, so its height is `min(47.12vw, 768px)` and it is centred in the svh.
 */
[data-surface-stage] {
    --surface-stage-height: min(47.12vw, 768px);
    --surface-header-drop: max(0px, calc(146px - (100svh - var(--surface-stage-height)) / 2 - 0.08 * var(--surface-stage-height)));
}

[data-surface-stage] [data-surface-circle] {
    top: 8%;
    margin-top: var(--surface-header-drop);
}

[data-surface-stage] [data-surface-connector] {
    top: 58%;
    margin-top: var(--surface-header-drop);
}

/*
 * The label is rendered as three explicit lines: "b-TCP," / "a-TCP ve" /
 * "TTCP fazlari" (or its English equivalent). The narrow anchor column leaves
 * room for the leader while each line sizes to its content, so platform font
 * metrics cannot reflow the group.
 */
[data-surface-stat] {
    position: absolute;
    top: 69.4%;
    left: 2%;
    width: 6%;
}

[data-surface-stat] > p:first-child,
[data-surface-stage] [data-surface-stat-label] {
    font-size: 1.1cqw;
}

/* Fixed line boxes make the annotation identical across font renderers. */
[data-surface-stat-line] {
    display: block;
    width: max-content;
    white-space: nowrap;
}

[data-surface-stat] [data-video-count] {
    margin-top: 0.7cqw;
    font-size: 4.2cqw;
    white-space: nowrap;
}

[data-surface-stage] [data-surface-stat-value] {
    font-size: 5.15cqw;
}

/*
 * A short rise off the end of "b-TCP," and then a long horizontal into the
 * ring, mirroring the leader on the 65% side. The box maps 0-100 in the SVG
 * onto 5.3-11% across and 68.2-71% down the stage, so "M2.6 87.9L22.8 7.1
 * H97.2" leaves the copy at 5.45%, 70.66% - just past the first line - and
 * stops at 10.84%, 68.4%: 0.9 of the ring radius at 287 degrees, well inside
 * the dark segment, which runs from 180 to 315.
 */
[data-surface-stat-leader] {
    top: 68.2%;
    left: 5.3%;
    width: 5.7%;
    height: 2.8%;
}

[data-surface-stage] [data-surface-description] {
    /* The connector starts at 58%; its vertical bar's centre is at 70.75%. */
    top: 70.75%;
    margin-top: var(--surface-header-drop);
    transform: translateY(-50%);
    right: auto;
    left: 71%;
    width: 25%;
    font-size: 1.35cqw;
}

[data-surface-stage] [data-surface-description] p {
    font-size: inherit;
}

/* Match the reference title-to-implant scale within the lower-left lockup. */
[data-last-video-stage] {
    container-type: inline-size;
}

[data-last-video-title] {
    /* Flex prevents adjacent reveal-line margins from collapsing. */
    display: flex;
    flex-direction: column;
    gap: 0;
    top: 57%;
    left: 6%;
    width: 35%;
    font-family: "Google Sans Flex", sans-serif;
    font-size: 3.8cqw;
    font-weight: 600;
    line-height: 1;
    letter-spacing: normal;
}

[data-last-video-title-line] {
    font: inherit;
    padding-block: .04em .12em;
    margin-block: -.08em;
}

/* Digital ecosystem product cards: reference-sized art and a white backdrop. */
#planet-popup {
    --planet-popup-fill: rgb(0 0 0 / 60%);
    --planet-popup-glow: rgb(245 130 32 / 20%);
    width: min(440px, calc(100vw - 40px));
    isolation: isolate;
}

#planet-popup [data-planet-popup-surface] {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    overflow: visible;
    fill: var(--planet-popup-fill);
    stroke: var(--planet-popup-glow);
    /* One silhouette prevents border, glow and translucent-fill seams. */
    filter: drop-shadow(0 0 9px var(--planet-popup-glow)) drop-shadow(0 24px 32px rgb(0 0 0 / 40%));
}

[data-planet-popup-card] {
    display: grid;
    min-height: 92px;
    grid-template-columns: 156px minmax(0, 1fr);
    align-items: center;
    gap: 24px;
    padding: 24px;
    border: 1px solid transparent;
    border-radius: 28px;
    background: transparent;
}

[data-planet-popup-figure] {
    position: relative;
    width: 156px;
    height: 164px;
}

[data-planet-popup-figure]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #fff;
}

#planet-popup-img {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: translateY(8px);
}

[data-planet-popup-copy] {
    min-width: 0;
    font-family: "Google Sans Flex", sans-serif;
    letter-spacing: normal;
    overflow-wrap: break-word;
    white-space: normal;
}

[data-planet-popup-copy] p {
    white-space: pre-line;
}

#planet-popup-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    color: #f58220;
}

#planet-popup-desc {
    margin: 14px 0 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.18;
    color: rgb(255 255 255 / 74%);
}

#planet-popup[data-no-image] [data-planet-popup-card] {
    grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 500px) {
    [data-planet-popup-card] {
        grid-template-columns: 120px minmax(0, 1fr);
        gap: 18px;
        padding: 20px;
    }

    [data-planet-popup-figure] {
        width: 120px;
        height: 128px;
    }
}