/* Blog detail reading experience. Loaded only on the blog show page (pushed from the view). */
@layer pages {
    /* Reading progress */
    .nur-readprogress {
        position: fixed;
        inset: 0 0 auto 0;
        z-index: 120;
        height: 3px;
        pointer-events: none;
    }

    .nur-readprogress span {
        display: block;
        height: 100%;
        background: var(--nur-accent);
        transform: scaleX(0);
        transform-origin: left;
    }

    /* Compact hero on mobile */
    .nur-pagehero--article {
        padding-block: var(--nur-space-4) var(--nur-space-5);
    }

    .nur-pagehero--article h1 {
        font-size: var(--nur-text-2xl);
        line-height: 1.25;
    }

    .nur-articlemeta .nur-chip--static {
        color: var(--nur-ink);
    }

    .nur-articlemeta__comments {
        color: inherit;
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    .nur-blogshow__cover {
        max-height: 230px;
    }

    /* Summary box */
    .nur-blogshow__intro {
        display: grid;
        gap: var(--nur-space-2);
        padding: var(--nur-space-4);
        border-left: 4px solid var(--nur-accent);
        border-radius: var(--nur-radius-sm);
        background: var(--nur-surface-alt);
    }

    .nur-blogshow__intro .nur-blogshow__lead {
        color: var(--nur-ink);
        font-size: var(--nur-text-md);
    }

    /* Typography */
    .nur-article {
        max-width: 72ch;
        color: var(--nur-ink);
        font-size: 1.0625rem;
        line-height: 1.8;
        overflow-wrap: break-word;
    }

    .nur-article > * + * {
        margin-top: 1.1em;
    }

    .nur-article h2 {
        margin-top: 1.9em;
        font-size: var(--nur-text-2xl);
        line-height: 1.3;
    }

    .nur-article h3 {
        margin-top: 1.6em;
        font-size: var(--nur-text-xl);
        line-height: 1.35;
    }

    .nur-article h2,
    .nur-article h3 {
        scroll-margin-top: calc(var(--nur-header-h) + 16px);
    }

    .nur-article li + li {
        margin-top: 0.4em;
    }

    .nur-article blockquote {
        padding: var(--nur-space-3) var(--nur-space-4);
        border-left: 4px solid var(--nur-gold-500);
        border-radius: 0 var(--nur-radius-sm) var(--nur-radius-sm) 0;
        background: var(--nur-surface-alt);
        font-style: italic;
    }

    .nur-article a {
        text-underline-offset: 3px;
    }

    .nur-article img {
        height: auto;
        max-width: 100%;
        cursor: zoom-in;
    }

    .nur-article a img {
        cursor: pointer;
    }

    .nur-article figure {
        display: grid;
        gap: var(--nur-space-2);
    }

    .nur-article figcaption {
        color: var(--nur-ink-soft);
        font-size: var(--nur-text-sm);
        text-align: center;
    }

    .nur-table-scroll {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .nur-table-scroll table {
        min-width: 100%;
        border-collapse: collapse;
        font-size: var(--nur-text-sm);
    }

    .nur-table-scroll th,
    .nur-table-scroll td {
        padding: var(--nur-space-2) var(--nur-space-3);
        border: 1px solid var(--nur-line);
        text-align: left;
        vertical-align: top;
    }

    .nur-table-scroll th {
        background: var(--nur-surface-alt);
    }

    /* Heading anchor link */
    .nur-anchor {
        margin-left: 0.4em;
        color: var(--nur-gold-600);
        font-weight: 400;
        text-decoration: none;
        opacity: 0;
        transition: opacity 0.15s;
    }

    .nur-article h2:hover .nur-anchor,
    .nur-article h3:hover .nur-anchor,
    .nur-anchor:focus-visible,
    .nur-anchor[data-copied] {
        opacity: 1;
    }

    .nur-anchor[data-copied]::after {
        content: " Kopyalandı";
        font-size: var(--nur-text-xs);
    }

    @media (hover: none) {
        .nur-anchor {
            opacity: 0.5;
        }
    }

    /* Table of contents */
    .nur-toc ol {
        display: grid;
        gap: var(--nur-space-1);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .nur-toc a {
        display: block;
        padding: var(--nur-space-2) var(--nur-space-3);
        border-left: 3px solid transparent;
        border-radius: var(--nur-radius-sm);
        color: var(--nur-ink-soft);
        font-size: var(--nur-text-sm);
        line-height: 1.4;
    }

    .nur-toc a.is-active {
        border-left-color: var(--nur-accent);
        background: var(--nur-surface-alt);
        color: var(--nur-primary-strong);
        font-weight: 700;
    }

    .nur-toc__item--l3 {
        padding-left: var(--nur-space-4);
    }

    .nur-toc--inline {
        border: 1px solid var(--nur-line);
        border-radius: var(--nur-radius);
        background: var(--nur-surface);
    }

    .nur-toc--inline summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--nur-space-3);
        min-height: var(--nur-tap);
        padding: 0 var(--nur-space-4);
        font-weight: 700;
        cursor: pointer;
        list-style: none;
    }

    .nur-toc--inline summary::-webkit-details-marker {
        display: none;
    }

    .nur-toc--inline summary span {
        color: var(--nur-ink-soft);
        font-size: var(--nur-text-xs);
        font-weight: 500;
    }

    .nur-toc--inline ol {
        padding: 0 var(--nur-space-2) var(--nur-space-3);
    }

    .nur-toc--aside {
        display: none;
    }

    /* Related tours */
    .nur-blogtours {
        display: grid;
        gap: var(--nur-space-4);
        padding: var(--nur-space-4);
        border: 1px solid var(--nur-line);
        border-radius: var(--nur-radius-lg);
        background: var(--nur-surface-alt);
    }

    .nur-blogtours__head {
        display: grid;
        gap: var(--nur-space-1);
    }

    .nur-blogtours__head h2 {
        font-size: var(--nur-text-xl);
    }

    .nur-blogtours .nur-bloglink {
        justify-self: start;
    }

    /* Closing call box */
    .nur-blogcta {
        display: grid;
        gap: var(--nur-space-4);
        padding: var(--nur-space-5);
        border-radius: var(--nur-radius-lg);
        background: linear-gradient(135deg, var(--nur-navy-900), var(--nur-navy-700));
        color: #fff;
    }

    .nur-blogcta strong {
        font-size: var(--nur-text-xl);
    }

    .nur-blogcta p {
        margin-top: var(--nur-space-1);
        color: rgba(255, 255, 255, 0.82);
    }

    .nur-blogcta__actions {
        display: grid;
        gap: var(--nur-space-2);
    }

    /* Share */
    .nur-share .nur-chip {
        gap: var(--nur-space-2);
        cursor: pointer;
    }

    .nur-share .nur-chip[hidden] {
        display: none;
    }

    .nur-share .nur-chip svg {
        width: 18px;
        height: 18px;
        flex: none;
    }

    /* Collapsible comments */
    .nur-discussion {
        border: 1px solid var(--nur-line);
        border-radius: var(--nur-radius);
        background: var(--nur-surface);
    }

    .nur-discussion > summary {
        display: grid;
        gap: 2px;
        min-height: var(--nur-tap);
        padding: var(--nur-space-3) var(--nur-space-4);
        font-weight: 700;
        cursor: pointer;
        list-style: none;
    }

    .nur-discussion > summary::-webkit-details-marker {
        display: none;
    }

    .nur-discussion > summary small {
        color: var(--nur-ink-soft);
        font-weight: 400;
    }

    .nur-discussion[open] > summary {
        border-bottom: 1px solid var(--nur-line);
    }

    .nur-discussion > .nur-comments {
        padding: var(--nur-space-4);
    }

    .nur-discussion .nur-comments h2 {
        font-size: var(--nur-text-xl);
    }

    /* Mobile bottom bar (sits above the global tabbar) */
    .nur-readbar {
        position: fixed;
        inset: auto 0 calc(var(--nur-tabbar-h) + env(safe-area-inset-bottom)) 0;
        z-index: 55;
        display: flex;
        align-items: center;
        gap: var(--nur-space-2);
        padding: var(--nur-space-2) var(--nur-gutter);
        border-top: 1px solid var(--nur-line);
        background: var(--nur-surface);
        box-shadow: 0 -6px 20px rgba(10, 31, 71, 0.08);
        transform: translateY(150%);
        transition: transform 0.25s var(--nur-ease);
    }

    .nur-readbar[hidden] {
        display: none;
    }

    .nur-readbar.is-visible {
        transform: none;
    }

    .nur-readbar a,
    .nur-readbar button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--nur-space-2);
        min-height: var(--nur-tap);
        padding: 0 var(--nur-space-4);
        border: 1px solid var(--nur-line);
        border-radius: 999px;
        background: var(--nur-surface);
        color: var(--nur-primary);
        font-size: var(--nur-text-sm);
        font-weight: 700;
    }

    .nur-readbar svg {
        width: 20px;
        height: 20px;
    }

    .nur-readbar__primary {
        flex: 1;
        border-color: var(--nur-primary) !important;
        background: var(--nur-primary) !important;
        color: #fff !important;
    }

    /* Image zoom overlay */
    .nur-image-zoom {
        position: fixed;
        inset: 0;
        z-index: 200;
        display: grid;
        place-items: center;
        padding: var(--nur-space-4);
        background: rgba(10, 31, 71, 0.92);
        cursor: zoom-out;
    }

    .nur-image-zoom img {
        max-width: 100%;
        max-height: 100%;
        border-radius: var(--nur-radius-sm);
        object-fit: contain;
    }

    /* Related posts: horizontal scroll on mobile */
    @media (max-width: 767px) {
        .nur-section--alt .nur-bloggrid {
            display: flex;
            gap: var(--nur-space-3);
            margin-inline: calc(var(--nur-gutter) * -1);
            padding-inline: var(--nur-gutter);
            overflow-x: auto;
            scroll-snap-type: x mandatory;
        }

        .nur-section--alt .nur-bloggrid > .nur-post {
            flex: 0 0 78%;
            scroll-snap-align: start;
        }

        .nur-blogshow {
            padding-bottom: calc(var(--nur-tap) + var(--nur-space-4));
        }
    }

    @media (min-width: 640px) {
        .nur-blogcta__actions {
            display: flex;
            flex-wrap: wrap;
        }
    }

    @media (min-width: 768px) {
        .nur-pagehero--article {
            padding-block: var(--nur-space-6) var(--nur-space-7);
        }

        .nur-pagehero--article h1 {
            font-size: var(--nur-text-3xl);
        }

        .nur-blogshow__cover {
            max-height: none;
        }

        .nur-article {
            font-size: 1.125rem;
        }

        .nur-blogcta {
            grid-template-columns: 1fr auto;
            align-items: center;
        }
    }

    @media (min-width: 1024px) {
        .nur-toc--inline {
            display: none;
        }

        .nur-toc--aside {
            display: grid;
        }

        .nur-toc--aside ol {
            max-height: calc(100vh - 220px);
            overflow-y: auto;
        }

        .nur-blogshow__side {
            max-height: calc(100vh - 112px);
            overflow-y: auto;
        }

        .nur-readbar {
            display: none;
        }
    }
}