/* ÜRETİLMİŞ DOSYA — elle düzenleme.
   Kaynak: music/inc/notfm-listen-modal.php, üretici: yeni/_build/notid.php */

    .fd-listen-overlay {
        position: fixed;
        inset: 0;
        overflow: hidden;
        /* Oynatıcı katmanının da üstünde. 4000 iken alt gezinme (9999) ve mini
         * oynatıcı (1000003) tam ekran modalin ÜSTÜNE çiziliyordu — modal
         * "tam ekran" olduğunu sanıyor ama altındaki çubuklar görünüyordu. Bir
         * modal her şeyi örtmeli; en yüksek mevcut katman 1000010. */
        z-index: 1000020;
        display: none;
        flex-direction: column;
        color: #fff;
        background: radial-gradient(125% 85% at 50% 0%, #2a1030 0%, #0b0c13 58%, #06070b 100%);
    }
    .fd-listen-overlay.is-open { display: flex; }

    /* Longhands, not the `overflow: hidden` shorthand: the shorthand also sets
     * overflow-x, which would undo the site-wide horizontal lock for exactly
     * as long as this modal is open. */
    body.fd-listen-locked { overflow-y: hidden; }

    .fd-listen-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 14px 14px 0;
        /* Notch and rounded corners on a phone; without this the close button
         * sits under the status bar on an iPhone in landscape. */
        padding-top: calc(14px + env(safe-area-inset-top, 0px));
    }
    .fd-listen-top {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        height: 44px;
        padding: 0 16px;
        border-radius: 999px;
        border: 1px solid rgba(255,255,255,.16);
        background: rgba(255,255,255,.07);
        color: rgba(255,255,255,.86);
        font-size: 13.5px;
        font-weight: 700;
        cursor: pointer;
        white-space: nowrap;
    }
    .fd-listen-top:hover { background: rgba(255,255,255,.12); color: #fff; }

    .fd-listen-close {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        border: 1px solid rgba(255,255,255,.16);
        background: rgba(255,255,255,.07);
        color: #fff;
        font-size: 20px;
        line-height: 1;
        cursor: pointer;
    }

    .fd-listen-shell {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 8px 24px calc(28px + env(safe-area-inset-bottom, 0px));
        text-align: center;
        overflow-y: auto;
        /* Required, not tidiness. With `overflow-y: auto` and `overflow-x`
         * left alone, CSS computes the `visible` axis to `auto` — so this
         * element was silently a horizontal scroll container, and the history
         * list could be dragged sideways inside it. */
        overflow-x: hidden;
        overflow-x: clip;
    }

    .fd-listen-h {
        font-size: clamp(20px, 5.4vw, 26px);
        font-weight: 800;
        margin: 0;
        letter-spacing: .01em;
    }
    .fd-listen-p {
        font-size: 14.5px;
        line-height: 1.55;
        color: rgba(255,255,255,.66);
        margin: 8px 0 0;
        max-width: 34ch;
    }
    /* The lede cycles while the visitor is deciding, so the screen keeps
     * explaining without four lines of text competing for the same glance.
     * A fixed height stops the button jumping when a longer line comes round. */
    .fd-listen-lede {
        min-height: 3.1em;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: opacity .35s ease;
    }
    .fd-listen-lede.is-fading { opacity: 0; }

    /* ---- the orb: idle button, listening indicator and progress ring ---- */
    .fd-orb-wrap {
        --orb: min(268px, 62vw);
        position: relative;
        width: var(--orb);
        height: var(--orb);
        margin: 26px 0 22px;
        display: grid;
        place-items: center;
    }

    .fd-orb {
        width: 100%;
        height: 100%;
        border: 0;
        border-radius: 50%;
        cursor: pointer;
        color: #fff;
        display: grid;
        place-items: center;
        gap: 8px;
        position: relative;
        z-index: 2;
        background: radial-gradient(circle at 34% 26%, #ff9a5e 0%, #ff4a66 46%, #c2124a 100%);
        box-shadow: 0 26px 70px rgba(255,74,102,.42), inset 0 0 0 1px rgba(255,255,255,.14);
        transition: transform .18s ease, box-shadow .18s ease;
    }
    .fd-orb:active { transform: scale(.97); }
    .fd-orb[disabled] { cursor: default; }

    /* Nothing written on the button. A giant microphone in the middle of a
     * pulsing circle already says press me, and a word inside it competes with
     * the one line of copy directly underneath that is actually doing the
     * explaining. */
    .fd-orb-glyph { font-size: clamp(62px, 17vw, 96px); line-height: 1; }

    /* `.fd-orb-wrap` is a grid with `place-items: center`, and box alignment
     * applies to absolutely positioned children too. An `inset`-only overlay is
     * therefore at the mercy of that alignment — it can shrink to its content
     * and be centred instead of filling its inset box, which is how the
     * countdown ring ended up smaller than the orb and off its centre.
     *
     * So none of these overlays uses `inset`. Each is given a definite width
     * and height plus a top/left, which no alignment property can override, and
     * the geometry stops depending on how a grid chooses to treat an
     * out-of-flow child. */
    .fd-orb-wave,
    .fd-orb-level {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    /* Expanding rings. Three of them, staggered, so the button reads as alive
     * before anyone touches it — that is what makes it findable at a glance. */
    .fd-orb-wave {
        border-radius: 50%;
        border: 2px solid rgba(255,74,102,.5);
        animation: fd-orb-wave 2.7s ease-out infinite;
        pointer-events: none;
        z-index: 1;
    }
    .fd-orb-wave:nth-of-type(2) { animation-delay: .9s; }
    .fd-orb-wave:nth-of-type(3) { animation-delay: 1.8s; }
    .fd-orb-wrap.is-live .fd-orb-wave { animation-duration: 1.5s; }

    @keyframes fd-orb-wave {
        0%   { transform: scale(1);    opacity: .55; }
        100% { transform: scale(1.62); opacity: 0; }
    }

    /* The countdown sits just outside the orb, not on it: drawn on the edge it
     * would be read as part of the button rather than as time running out.
     *
     * The -90° start is applied to the circle inside the SVG, about the exact
     * centre of the viewBox — not to this element. Rotating the element rotates
     * about its border box, so the drawing only stays put while that box is
     * perfectly square, and it silently skews the moment it is not. */
    .fd-orb-ring {
        position: absolute;
        top: -13px;
        left: -13px;
        width: calc(100% + 26px);
        height: calc(100% + 26px);
        z-index: 3;
        pointer-events: none;
        overflow: visible;
    }
    .fd-orb-ring circle { fill: none; stroke-width: 4; stroke-linecap: round; }
    .fd-orb-ring .bg { stroke: rgba(255,255,255,.10); }
    .fd-orb-ring .fg { stroke: #ffd166; transition: stroke-dashoffset .12s linear; }

    /* Live input level, drawn inside the orb while listening. */
    .fd-orb-level {
        display: none;
        align-items: center;
        justify-content: center;
        gap: 6px;
        z-index: 3;
        pointer-events: none;
    }
    .fd-orb-wrap.is-live .fd-orb-level { display: flex; }
    .fd-orb-wrap.is-live .fd-orb-glyph { display: none; }
    .fd-orb-level i {
        display: block;
        width: 6px;
        height: 12px;
        border-radius: 4px;
        background: rgba(255,255,255,.92);
        transition: height .09s ease-out;
    }

    /* ---- the rotating status line ---- */
    .fd-listen-status {
        font-size: clamp(15px, 4vw, 17px);
        font-weight: 700;
        min-height: 26px;
        letter-spacing: .01em;
        color: #fff;
        transition: opacity .22s ease;
    }
    .fd-listen-status.is-fading { opacity: 0; }

    .fd-listen-steps { list-style: none; margin: 4px 0 0; padding: 0; max-width: 34ch; text-align: left; }
    .fd-listen-steps li {
        display: flex;
        gap: 10px;
        align-items: flex-start;
        font-size: 13.5px;
        line-height: 1.5;
        color: rgba(255,255,255,.66);
        padding: 5px 0;
    }
    .fd-listen-steps b {
        flex: 0 0 22px;
        height: 22px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        font-size: 11.5px;
        background: rgba(255,74,102,.18);
        border: 1px solid rgba(255,74,102,.4);
        color: #ff9aab;
    }

    /* ---- the answer ---- */
    .fd-listen-cover {
        width: min(200px, 48vw);
        height: min(200px, 48vw);
        border-radius: 22px;
        object-fit: cover;
        margin: 10px 0 18px;
        border: 1px solid rgba(255,255,255,.14);
        background: rgba(255,255,255,.05);
        box-shadow: 0 26px 60px rgba(0,0,0,.55);
    }
    .fd-listen-track  { font-size: clamp(20px, 5.6vw, 26px); font-weight: 800; margin: 0 0 6px; }
    .fd-listen-artist { font-size: 15.5px; color: rgba(255,255,255,.72); margin: 0 0 6px; }
    .fd-listen-where  { font-size: 12.5px; color: rgba(255,255,255,.45); margin: 0 0 18px; }

    /* A small printed record of the capture. It is monospace and ruled because
     * that is what makes a list of facts read as evidence rather than as
     * telemetry — and every line on it is the visitor's own. */
    .fd-idcard {
        width: min(330px, 92%);
        margin: 0 0 22px;
        padding: 12px 14px 10px;
        border-radius: 12px;
        text-align: left;
        border: 1px solid rgba(255,255,255,.10);
        background: rgba(255,255,255,.035);
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: 11.5px;
        line-height: 1.75;
        color: rgba(255,255,255,.62);
    }
    .fd-idcard h4 {
        margin: 0 0 8px;
        font-size: 9.5px;
        letter-spacing: .22em;
        font-weight: 700;
        color: rgba(255,255,255,.34);
        border-bottom: 1px dashed rgba(255,255,255,.14);
        padding-bottom: 7px;
    }
    .fd-idcard dl { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 0 10px; margin: 0; }
    .fd-idcard dt { color: rgba(255,255,255,.34); letter-spacing: .06em; }
    /* An IPv6 address is longer than any phone is wide. */
    .fd-idcard dd { margin: 0; color: rgba(255,255,255,.82); overflow-wrap: anywhere; }
    .fd-idcard p {
        margin: 9px 0 0;
        padding-top: 8px;
        border-top: 1px dashed rgba(255,255,255,.14);
        font-size: 10.5px;
        line-height: 1.5;
        color: rgba(255,255,255,.34);
    }

    /* This is an <a>, so the page's own link styling reaches it on hover and
     * turns the label blue and underlined — it stops looking like a button at
     * exactly the moment someone is about to press it. Every link state is
     * therefore pinned here, not just the resting one. */
    .fd-listen-cta,
    .fd-listen-cta:link,
    .fd-listen-cta:visited,
    .fd-listen-cta:hover,
    .fd-listen-cta:active,
    .fd-listen-cta:focus {
        display: inline-block;
        border: 0;
        border-radius: 999px;
        /* Küçültüldü. Sonuç kartında asıl bakılan şey kapak ve ad; buton onlarla
         * boy yarıştırmamalı, sadece bulunabilir olmalı. */
        padding: 13px 30px;
        min-width: min(210px, 62vw);
        font-size: clamp(14.5px, 3.8vw, 16px);
        font-weight: 800;
        letter-spacing: .01em;
        cursor: pointer;
        text-decoration: none;
        color: #fff;
        background: linear-gradient(135deg, #ff4a66, #ff8a40);
        box-shadow: 0 16px 40px rgba(255,74,102,.38);
        transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
    }
    .fd-listen-cta:hover,
    .fd-listen-cta:focus-visible {
        transform: translateY(-2px);
        filter: brightness(1.06);
        box-shadow: 0 20px 48px rgba(255,74,102,.46);
        outline: none;
    }
    .fd-listen-cta:active { transform: translateY(0); }
    .fd-listen-ghost {
        margin-top: 12px;
        border-radius: 999px;
        padding: 13px 30px;
        font-size: 14.5px;
        font-weight: 700;
        cursor: pointer;
        color: rgba(255,255,255,.84);
        border: 1px solid rgba(255,255,255,.18);
        background: rgba(255,255,255,.05);
    }

    /* ---- the visitor's own list ---- */
    .fd-listen-link {
        margin-top: 16px;
        background: none;
        border: 0;
        color: rgba(255,255,255,.62);
        font-size: 13.5px;
        font-weight: 700;
        text-decoration: underline;
        text-underline-offset: 4px;
        cursor: pointer;
        padding: 6px 8px;
    }
    .fd-listen-link:hover { color: #fff; }

    /* The same lockup as the site header, at the head of the visitor's own
     * list — this screen is the one place in the modal that is theirs rather
     * than the machine's, and it should feel like part of notFM, not a system
     * dialog. Sized in its own right, not copied by class, because the header's
     * rules are tuned to a sticky bar this pane does not have. */
    .fd-hist-brand { margin: 2px 0 18px; text-align: center; }
    .fd-hist-brand img { display: block; width: min(184px, 52vw); height: auto; margin: 0 auto; }
    .fd-hist-brand span {
        display: block;
        margin-top: 6px;
        font-size: 8.5px;
        line-height: 1;
        font-weight: 800;
        letter-spacing: .26em;
        text-transform: uppercase;
        color: rgba(255,255,255,.5);
    }

    .fd-hist { width: min(620px, 100%); margin: 6px 0 0; }
    .fd-hist-row {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 13px 16px;
        border-radius: 16px;
        text-align: left;
        text-decoration: none;
        color: #fff;
        background: rgba(255,255,255,.05);
        border: 1px solid rgba(255,255,255,.08);
        margin-bottom: 8px;
    }
    .fd-hist-row:hover { background: rgba(255,255,255,.09); color: #fff; text-decoration: none; }
    .fd-hist-row img {
        width: 58px;
        height: 58px;
        border-radius: 12px;
        object-fit: cover;
        flex: 0 0 58px;
        background: rgba(255,255,255,.07);
    }
    .fd-hist-row .t { min-width: 0; flex: 1; }
    /* The row is fixed width and a title is not; without this the artist line
     * pushes the chevron off the card on a narrow phone. */
    .fd-hist-row .t b,
    .fd-hist-row .t span {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .fd-hist-row .t b { font-size: 15.5px; font-weight: 800; }
    .fd-hist-row .t span { font-size: 12.5px; color: rgba(255,255,255,.6); margin-top: 2px; }
    .fd-hist-row .t .w {
        font-size: 11px;
        color: rgba(255,255,255,.36);
        margin-top: 3px;
        letter-spacing: .02em;
    }
    .fd-hist-row i { color: rgba(255,255,255,.35); font-size: 13px; }

    /* Sits over the whole modal but never intercepts a tap — the result card
     * underneath it is a link, and confetti that swallows the click would be a
     * decoration that broke the feature. */
    .fd-confetti {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 10;
        pointer-events: none;
    }

    .fd-listen-pane { display: none; flex-direction: column; align-items: center; }
    .fd-listen-pane.is-on { display: flex; }

    /* The feature has a name, and this is the only place it is worth saying it.
     * Quiet on purpose: it labels the screen, it does not sell on it. */
    .fd-listen-brand {
        margin-top: 26px;
        font-size: 11.5px;
        font-weight: 700;
        letter-spacing: .18em;
        text-transform: uppercase;
        color: rgba(255,255,255,.34);
    }
    .fd-listen-brand b { color: rgba(255,255,255,.62); font-weight: 800; letter-spacing: .1em; }

    /* A pulse that cannot be switched off is a real problem for people who set
     * this preference for vestibular reasons. The orb stays red and obvious. */
    @media (prefers-reduced-motion: reduce) {
        .fd-orb-wave { animation: none; opacity: .35; }
        .fd-orb-level i { transition: none; }
    }


/* Üretici eki — bkz. _build/notid.php */
.fd-listen-overlay [hidden] { display: none !important; }