/* ============================================================================
   site-ui.css — site-wide UI corrections layered on top of the News360 theme.

   Loaded on every page, after the theme + skin stylesheets, so these rules win
   without editing vendor CSS. Article-only reading rules live in
   reading-experience.css instead.
   ========================================================================== */

/* --- 1. Author monogram ---------------------------------------------------
   Fallback avatar used by <x-author-avatar> while there is no real photo.
   Sized by the --monogram-size custom property the component sets inline. */
.author-monogram {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--monogram-size, 130px);
    height: var(--monogram-size, 130px);
    border-radius: 50%;
    background-color: var(--bg-color, #5608e0);
    color: #fff;
    font-size: calc(var(--monogram-size, 130px) * 0.38);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: none;
    user-select: none;
    flex: 0 0 auto;
}

/* The header avatar sits on a patterned strip; a ring keeps it readable. */
.author-media .author-monogram {
    border: 3px solid #fff;
}

/* Real photo: fill the circular container completely (Sprint 68). The theme's
   `img { height: auto; max-width: 100% }` ignores the width/height attributes,
   which left a portrait sitting small in the top-left corner of the circle.
   These rules override that so any aspect ratio is centre-cropped to a full
   circle on both desktop and mobile. The container already clips (overflow
   hidden), so nothing spills. */
.rx-author-avatar,
.author-media .rx-author-avatar,
.author-social-media .rx-author-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
    display: block;
}

/* --- 2. Newsletter (footer) ------------------------------------------------
   Uses the theme's own .subscribe-form styling, which was written for a DARK
   surface (its inputs are already color:#fff) — so it sits naturally in the
   footer. Only the pieces the theme styled for its light modal are re-tuned
   here; the theme's custom checkbox (input + label:before) is left to do its
   own drawing. */
/* Two-column footer: brand block left, newsletter right. On tablet/phone the
   columns stack, so the newsletter gets a divider instead of a side border. */
.rx-footer-social {
    margin-top: 22px;
}
.rx-newsletter {
    padding: 0;
}
@media (min-width: 992px) {
    .rx-newsletter-col {
        padding-left: 40px;
        border-left: 1px solid rgba(255, 255, 255, 0.12);
    }
    /* Left block reads left-aligned next to the form, not centred. */
    .rx-footer-brand .footer-link,
    .rx-footer-brand .social-icon {
        text-align: left;
    }
    .rx-footer-brand .footer-logo {
        text-align: left;
    }
    .rx-newsletter .sub-title {
        text-align: left !important;
    }
    /* A footer sign-up, not a landing block: cap the width so the field does
       not stretch across the whole column on wide screens. */
    .rx-newsletter {
        max-width: 360px;
    }
}
@media (max-width: 991px) {
    .rx-newsletter-col {
        margin-top: 40px;
        padding-top: 40px;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }
}
/* Compact by design: this is a footer utility, not a hero block. The theme's
   modal sizing (50px inputs, big title) is scaled down here. */
.rx-newsletter .sub-title .title {
    color: #fff;
    font-size: 18px;
    line-height: 1.3;
    margin-bottom: 6px;
    letter-spacing: 0;
}
.rx-newsletter .sub-title p {
    color: #9a9a9f;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 14px;
}
/* Transparent field on the dark surface, matching the theme's white text. */
.rx-newsletter input.form-control {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
    height: 42px;
    padding: 8px 14px;
    font-size: 14px;
}
.rx-newsletter input.form-control::placeholder {
    color: #8a8a90;
}
.rx-newsletter input.form-control:focus {
    border-color: rgba(255, 255, 255, 0.55);
}
.rx-newsletter .form-group {
    margin-bottom: 12px;
}
.rx-newsletter .btn {
    height: 42px;
    padding: 0 18px;
    font-size: 13px;
    line-height: 42px;
}

/* Inline result of the AJAX submit — replaces the full page reload. */
.rx-newsletter__msg {
    margin-bottom: 12px;
    padding: 9px 12px;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.45;
}
.rx-newsletter__msg.is-ok {
    background: rgba(46, 160, 67, 0.15);
    border: 1px solid rgba(46, 160, 67, 0.5);
    color: #7ee2a8;
}
.rx-newsletter__msg.is-error {
    background: rgba(220, 53, 69, 0.12);
    border: 1px solid rgba(220, 53, 69, 0.45);
    color: #f1a3aa;
}

/* Consent row. The theme draws the box via `input[type=checkbox] + label:before`
   and centres it vertically; for a two-line consent sentence pin it to the first
   line instead so it reads as a normal checkbox. */
.rx-newsletter__consent {
    margin-bottom: 18px;
}
.rx-newsletter__consent label {
    color: #9a9a9f;
    font-size: 13px;
    line-height: 1.55;
    font-weight: 400;
    margin-bottom: 0;
    cursor: pointer;
    text-align: left;
}
/* Specificity must beat the theme's own `input[type=checkbox] + label::before`
   and its `:checked + label::after`, which both vertically centre on the whole
   label — otherwise the tick would jump away from the box on a two-line text. */
.rx-newsletter__consent input[type=checkbox] + label:before,
.rx-newsletter__consent input[type=checkbox] + label:after,
.rx-newsletter__consent input[type=checkbox]:checked + label:before,
.rx-newsletter__consent input[type=checkbox]:checked + label:after {
    top: 9px;
    transform: none;
    -webkit-transform: none;
}
.rx-newsletter__consent a {
    color: #fff;
    text-decoration: underline;
}
/* Keyboard users must see focus even though the real input is visually hidden. */
.rx-newsletter__consent input:focus-visible + label:before {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* --- 3. Instagram strip ----------------------------------------------------
   Square crop on every screen, so live API images and manually uploaded ones
   sit on the same grid regardless of their real aspect ratio. */
.insta-post-carousel .rx-insta-img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
}

/* Honeypot: removed from the visual and accessibility trees, but still a real,
   fillable field for bots. Not display:none — some bots skip hidden inputs. */
.rx-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- 4. Accessibility (Sprint 64) — additive, no visual redesign -----------
   The search trigger is now a <button>; strip the UA button chrome so it looks
   exactly like the old link did. */
.rx-search-trigger {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

/* Keyboard-operable dropdowns: the theme opens sub-menus on :hover only, which
   a keyboard user can never trigger. Mirror the theme's reveal on :focus-within
   so tabbing into a parent opens its menu. Desktop only (theme handles <=991 via
   the .open toggle). No layout or visual change to the menu itself. */
@media (min-width: 992px) {
    .header-nav .nav > li:focus-within > .sub-menu,
    .header-nav .nav > li:focus-within > .mega-menu {
        opacity: 1;
        visibility: visible;
        margin-top: 0;
    }
}

/* Visible focus for keyboard users on every interactive chrome element. Uses
   :focus-visible so mouse clicks are unaffected — only keyboard focus shows the
   ring. Colour is the brand purple already used across the theme. */
.rx-search-trigger:focus-visible,
.header-nav .nav > li > a:focus-visible,
.header-nav .nav > li .sub-menu li > a:focus-visible,
.dlab-quik-search button:focus-visible,
.site-footer a:focus-visible,
.dlab-post-title a:focus-visible,
.post-title a:focus-visible,
a.btn:focus-visible,
.scroltop:focus-visible {
    outline: 2px solid var(--bg-color, #5608e0);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Sub-menus must never spill off-screen. The theme adds .left near the right
   edge; this is the CSS safety net so an opened menu always stays reachable. */
.header-nav .nav > li > .sub-menu {
    max-width: calc(100vw - 24px);
    overflow-x: hidden;
}

/* --- 5. Home featured grid (Sprint 68) -------------------------------------
   The three big cards on the home page were overflowing the viewport: the row
   sat directly under a full-bleed section with no container, so its negative
   margins pushed the first card off-screen and produced a horizontal scrollbar.
   The Blade now wraps the row in .container-fluid; these rules fix the REAL
   causes (unconstrained flex children, unclamped titles, stretched images)
   rather than hiding the symptom with body overflow-x. */

/* Flex/grid children default to min-width:auto, which lets a wide child (a long
   title or an image) push the row past the viewport. Zeroing it lets the column
   shrink to its share. Every card clips, so a stray element cannot spill. */
.rx-featured .row > [class*="col-"] {
    min-width: 0;
}
.rx-featured .blog-card {
    overflow: hidden;
    max-width: 100%;
}

/* Consistent media size per card. Fixed ratios keep the row from growing when one
   image is tall, and object-fit stops any image from stretching.

   THE RATIO IS THE COVER'S OWN, 1200/630 (Sprint 80).

   It used to be 16/10 here and 16/9 below, which cost 96px off EACH SIDE of every
   cover — measured, not guessed. That was affordable while covers were wordless
   background texture. Since Sprint 75 the headline is drawn into those pixels, so
   the crop stopped eating texture and started eating the design: the artwork's
   130px margin arrived on screen as 34px and long headlines looked jammed against
   the edge. The PO's words were "görseller niye tam sığmadı".

   Matching the ratio to the source is the fix that needs no safe-area guesswork —
   an image displayed at the ratio it was drawn at cannot lose anything.

   It also keeps the side column flush with the main card for free. With both at
   the same ratio, two stacked half-width cells come to exactly the main card's
   height: (W/4)/R × 2 = (W/2)/R. The earlier fix for that gap survives untouched. */
.rx-featured .dlab-post-media {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: #f0f0f2;
}
.rx-featured-main .dlab-post-media {
    aspect-ratio: 1200 / 630;
}
.rx-featured-cell .dlab-post-media {
    aspect-ratio: 1200 / 630;
}

/* Side column: bottom edge flush with the main card, no white strip.

   Two causes, and the ratios were only the second one.

   The theme gives every .blog-card `margin-bottom: 30px`. The left column pays
   that once; the right column pays it twice, because it stacks two rows of
   cards. That alone leaves ~30px unaccounted for at the bottom right.

   On top of it the fixed ratios cannot line up: the main card is 16/10 of half
   the container (0.625W tall) while two rows of half-width 16/9 cells come to
   0.5625W. Tweaking the cell ratio to close the difference is guesswork, since
   the gutter and the card margins are part of the sum.

   So above the breakpoint where the two columns sit side by side: drop the card
   margins (the row carries the section's bottom spacing instead), and let the
   side be a grid whose two rows split whatever height the main card sets. The
   cell media stretches rather than holding a ratio — images are object-fit:cover
   so they simply crop less. Below the breakpoint the columns stack and the fixed
   ratios are the right tool again. */
@media (min-width: 1200px) {
    /* Spacing moves from each card to the block, so it is paid once. */
    .rx-featured .blog-card {
        margin-bottom: 0;
    }
    .rx-featured .container-fluid > .row {
        margin-bottom: 30px;
    }

    .rx-featured-side {
        display: flex;
    }
    /* The grid container's height comes from the flex stretch, which the main
       card wins: with the media set to height:100% the side's own content
       height is ~0, so it can never be the one that sets the row height. */
    .rx-featured-side > .row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 1fr;
        row-gap: 4px; /* matches the 2+2px horizontal gutter sp4 produces */
        flex: 1 1 auto;
    }
    /* Grid places these now; the Bootstrap column widths would fight it. */
    .rx-featured-side > .row > .rx-featured-cell {
        flex: none;
        width: auto;
        max-width: none;
        min-height: 0;
    }
    .rx-featured-side .blog-card {
        height: 100%;
    }
    .rx-featured-side .dlab-post-media {
        aspect-ratio: auto;
        height: 100%;
        /* Only reachable if the stretch above fails; an over-short cell beats
           an invisible one. Never fires at these widths. */
        min-height: 140px;
    }
    /* An odd number of posts would otherwise leave a hole in the last row. */
    .rx-featured-side > .row > .rx-featured-cell:last-child:nth-child(odd) {
        grid-column: span 2;
    }
}
.rx-featured .dlab-post-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* A gradient behind the overlaid title so white text stays readable over any
   image, and so the text block never depends on the image being dark.

   top/transform/width are RESET, not merely overridden. The theme centres this
   block with `top:50%; left:50%; transform:translate(-50%,-50%); width:100%`.
   Re-anchoring it with left/right/bottom alone left that transform in place, so
   the block was pinned to the card's width and then shifted half a card to the
   left and half its height up — which clipped the first half of every headline
   against the card's `overflow:hidden`. That is why titles read as
   "…Yayına Almak: VPS," instead of starting at "Kişisel". */
.rx-featured .overlay-post .blog-card-info {
    position: absolute;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    transform: none;
    padding: 20px;
    /* Lighter than it was: the only thing left to protect is the date. */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.08) 60%, transparent 100%);

    /* The theme pushed this block's content down with `margin-bottom:auto` on the
       CATEGORY PILL — so the pill was the spacer. Hiding the pill (the cover shows
       the category now) took it out of the flex flow, its auto margin stopped
       pushing anything, and the date jumped to the top of the card, straight over
       the category printed in the image. Anchoring the column itself does not care
       which children are hidden. */
    justify-content: flex-end;

    /* Nothing in here is interactive any more.
       `.overlay-post.left .blog-card-info` is height:100%, so this block covers the
       whole card and used to be clickable only because the title inside it was a
       link. With the title hidden it became a transparent lid that swallowed every
       click — the card looked like a link and did nothing. */
    pointer-events: none;
}

/* The theme's own scrim was the second lid (Sprint 80).

   `.blog-card.overlay-post::after` is a full-card darkening layer — 100% × 100%,
   `z-index: 2`, three background variants for left/center/plain. It exists purely
   so white text stays readable over a bright photo.

   Pseudo-elements take pointer events like anything else, and this one sits at the
   SAME z-index as the card's link while being painted later (generated content of
   the card, drawn after the card's children). Later wins at equal z-index, so every
   click on a featured card landed on a decoration.

   Making the info block non-interactive earlier only lifted the first lid. This was
   underneath it, which is why the cards still did nothing when pressed. A layer
   whose entire job is to tint pixels has no business receiving a click. */
.blog-card.overlay-post::after {
    pointer-events: none;
}

/* The click target: the whole card.

   The markup wraps the image in an anchor, but `.rx-featured .dlab-post-media img`
   is absolutely positioned, so the anchor had almost no box of its own and there
   was barely anything to hit even before the overlay covered it. Stretching the
   anchor over the media makes the entire cover the link, which is what a card that
   looks like one should be. */
.rx-featured .dlab-post-media > a {
    position: absolute;
    inset: 0;
    display: block;
    z-index: 2;
}

/*
   The cover carries the category and the headline itself now (Sprint 75).

   Covers used to be wordless because the theme paints both over the card in HTML,
   so a title in the image appeared twice. That constraint forced the artwork down
   to faint background texture and produced the covers the PO rightly called
   childish. Reversing it — headline in the pixels, HTML copy hidden — is what let
   the design become typographic.

   HIDDEN, NOT DELETED. The markup keeps the <h2>/<h4> and the category, because
   they are what a screen reader announces and what a crawler reads; an image
   cannot do either job. `clip-path` with a 1px box is the accessible-hiding
   pattern: off-screen positioning would still be found by find-in-page, and
   `display:none` would take it away from assistive tech too.

   The date stays visible: it is the one thing the cover does not show.

   NOT SCOPED TO ONE GRID (Sprint 80). This was written for `.rx-featured` alone,
   and the home page's "Son Yazılar" masonry had overlay cards too — so every
   second card there printed the headline a second time, on top of a cover that
   already said it, overlapping and unreadable.

   The fact behind the rule is global: every cover comes from CoverArtFactory and
   every one of them draws its own headline. So the selector follows the CARD TYPE
   rather than the block it happens to sit in, and a third grid added later
   inherits the fix instead of needing a third copy of it.

   The masonry no longer uses overlay cards at all — that grid went to a single
   card style later the same sprint, because two alternating heights left holes in
   the layout. Its half of this selector is therefore dormant, and kept on purpose:
   the day an overlay card appears in that grid again, the doubling does not.

   Boxed cards are untouched. They print the title BELOW the image rather than over
   it, so the repetition reads as a caption instead of a collision, and that text is
   the card's actual link and the thing a reader scans.
*/
.rx-featured .overlay-post .blog-card-info .title,
.rx-featured .overlay-post .blog-card-info .dlab-post-meta,
.blog-masonary .overlay-post .blog-card-info .title,
.blog-masonary .overlay-post .blog-card-info .dlab-post-meta {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/*
   …and the masonry overlay card has to stay clickable after that (Sprint 80).

   Hiding the title removes the only link inside the overlay, so the info block
   becomes a transparent lid sitting over the image anchor: the card would look
   like a link and do nothing when pressed. Exactly the complaint the featured
   grid drew earlier ("tıklayınca içeriğe gitmiyor").

   The block carries only text now, so nothing in it needs to receive a click.
*/
.blog-masonary .overlay-post .blog-card-info {
    pointer-events: none;
}

/* …except the date, which the theme still shows and which must not swallow the
   card's own link either — it inherits the rule above, so this only restores the
   media anchor as the click target across the whole card. */
.blog-masonary .overlay-post .dlab-post-media > a {
    position: absolute;
    inset: 0;
    display: block;
    z-index: 2;
}

.blog-masonary .overlay-post .dlab-post-media {
    position: relative;
}

/* Titles wrap inside the card and are clamped, so a long headline cannot grow
   the whole grid or overflow its card. */
.rx-featured .blog-card-info .title {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    word-break: break-word;
}
.rx-featured-main .blog-card-info .title {
    -webkit-line-clamp: 3;
    line-clamp: 3;
    font-size: clamp(20px, 2.2vw, 34px);
    line-height: 1.25;
    margin-bottom: 6px;
}
/* Three lines, not two: at two lines these headlines were cut mid-phrase
   ("…AI Sağlayıcısı Kullanmak:…"), which is the readability complaint the clamp
   was supposed to prevent. A 16/9 cell is ~197px tall and badge + 3 lines + date
   comes to ~112px, so the third line costs nothing. */
.rx-featured-cell .blog-card-info .title {
    -webkit-line-clamp: 3;
    line-clamp: 3;
    font-size: clamp(15px, 1.3vw, 20px);
    line-height: 1.3;
    margin-bottom: 4px;
}

/* On a single column the big card no longer needs to tower over the page.

   Still the cover's own ratio (Sprint 80). 16/9 was shorter than 1200/630 and would
   have cropped the sides here too — and phone width is where a cropped headline is
   least readable, not most. 1.905 is already flatter than 16/9, so the card does not
   tower either way. */
@media (max-width: 575px) {
    .rx-featured-main .dlab-post-media,
    .rx-featured-cell .dlab-post-media {
        aspect-ratio: 1200 / 630;
    }
}

/* Belt-and-braces: no home section may push the page sideways. This targets the
   real offenders (full-bleed rows) rather than masking overflow on <body>. */
.page-content .section-full {
    max-width: 100%;
    overflow-x: clip;
}