/* =====================================================================
   Fırat Üniversitesi Sağlık Bilimleri Dergileri — v2 design (from the TJP redesign)
   Self-contained; lives alongside the original design under /v2/.
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
/* reserve the scrollbar space so the layout width doesn't shift between tabs
   (short "Most Accessed" vs long "Current Issue") */
html { scrollbar-gutter: stable; overflow-y: scroll; }
body { margin: 0; background: var(--c-bg); font-family: 'Poppins', system-ui, sans-serif; color: var(--c-text); }
img { max-width: 100%; display: block; }
a { color: inherit; }

/* ---- shared prose (About / Instructions / Article body) ---- */
/* Site-wide reading standard: body text 12px, section headings 14.5px (Poppins). */
.prose { color: var(--c-text-2); font-size: 12px; line-height: 1.75; }
.prose > :first-child { margin-top: 0; }
.prose h2 { font-size: 14.5px; color: var(--c-navy); font-weight: 700; margin: 26px 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--c-border); letter-spacing: -0.01em; }
.prose h3 { font-size: 14.5px; color: var(--c-navy); font-weight: 600; margin: 18px 0 6px; }
.prose p { margin: 0 0 13px; }
.prose a { color: var(--c-link); text-decoration: none; word-break: break-word; }
.prose a:hover { text-decoration: underline; }
.prose ul, .prose ol { margin: 0 0 14px; padding-left: 22px; }
.prose li { margin-bottom: 7px; }
.prose address { font-style: normal; line-height: 1.7; color: var(--c-text-3); }
.prose .note { background: var(--c-note-bg); border-left: 3px solid var(--c-mauve); padding: 11px 15px; border-radius: 8px; font-size: 13.5px; margin: 8px 0 14px; }
.prose .cite { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 8px; padding: 11px 14px; font-size: 13px; color: var(--c-text-4); margin: 0 0 12px; }

/* ---- hover / focus behaviours (design expressed these as style-hover) ---- */
.v2-toplink { opacity: .92; transition: opacity .15s; }
.v2-toplink:hover { opacity: 1; }

.v2-search { transition: border-color .2s, box-shadow .2s; }
.v2-search:focus-within { border-color: var(--c-navy); box-shadow: 0 0 0 3px rgba(44,63,118,.12); }

.v2-submit { transition: transform .14s, box-shadow .14s; }
.v2-submit:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(186,106,142,.44); }

.v2-nav__link { transition: background .15s, color .15s; }
.v2-nav__link:hover { background: rgba(255,255,255,.10); color: var(--c-white); }
.v2-nav__link.is-active { background: rgba(255,255,255,.16); color: var(--c-white); }

.v2-btn-dark { transition: transform .14s; }
.v2-btn-dark:hover { transform: translateY(-1px); }
.v2-btn-ghost { transition: background .14s; }
.v2-btn-ghost:hover { background: rgba(255,255,255,.18); }
.v2-btn-pink { transition: transform .14s; }
.v2-btn-pink:hover { transform: translateY(-1px); }

.v2-feature + .v2-feature { }
.v2-tab { transition: background .14s, color .14s; }

.v2-art-li { transition: border-color .16s, box-shadow .16s; }
.v2-art-li:hover { border-color: var(--c-pink-border); box-shadow: 0 6px 18px rgba(40,55,107,.08); }
.v2-art-link { transition: color .14s; }
.v2-art-link:hover { color: var(--c-link); }
.v2-actbtn { transition: background .14s, color .14s; }
.v2-actbtn:hover { background: var(--c-navy); color: var(--c-white); }
.v2-actbtn:hover svg { stroke: var(--c-white); }

.v2-seeall { transition: color .14s; }
.v2-seeall:hover { color: var(--c-pink); }
.v2-chip { transition: background .14s, color .14s; }
.v2-chip:hover { background: var(--c-navy); color: var(--c-white); }

.v2-card-lift { transition: transform .14s; }
.v2-card-lift:hover { transform: translateY(-2px); }

.v2-index-grid > a { min-width: 0; }
.v2-index-grid img { max-width: 100% !important; object-fit: contain; }
.v2-idxcard { transition: border-color .16s, box-shadow .16s, transform .16s; }
.v2-idxcard:hover { border-color: var(--c-pink-border); box-shadow: 0 10px 26px rgba(40,55,107,.10); transform: translateY(-2px); }

.v2-editorcard { transition: box-shadow .16s; min-width: 0; overflow: hidden; }
.v2-editorcard:hover { box-shadow: 0 6px 16px rgba(40,55,107,.10); }

.v2-issue-row { transition: color .14s; }
.v2-issue-row:hover { color: var(--c-pink); }
.v2-issue-row:hover .v2-issue-arrow { transform: translateX(3px); }
.v2-issue-arrow { transition: transform .14s; }

.v2-partner { transition: color .14s, border-color .14s; }
.v2-partner:hover { color: var(--c-navy); border-color: var(--c-partner-hover); }

.v2-formfield { transition: border-color .16s, box-shadow .16s; }
.v2-formfield:focus { border-color: var(--c-navy); box-shadow: 0 0 0 3px rgba(44,63,118,.10); outline: none; }
/* inputs have an intrinsic min width on iOS that breaks flex rows — force them to shrink */
input, textarea, select { min-width: 0; max-width: 100%; box-sizing: border-box; }
.v2-formfield, .v2-search, .v2-navsearch { min-width: 0; max-width: 100%; box-sizing: border-box; }
.v2-search input, .v2-navsearch input { min-width: 0; }

.v2-formrow { transition: border-color .14s, background .14s; }
.v2-formrow:hover { border-color: var(--c-pink-border); background: var(--c-row-hover); }

.v2-footlink { transition: color .15s; }
.v2-footlink:hover { color: var(--c-white); }

/* nav floats over the hero at the top (transparent → purple shows through);
   stays transparent when scrolled too — content shows through around the menu (no band) */
[data-header].is-scrolled { background: transparent; box-shadow: none; }
[data-header].is-scrolled .v2-headtop { box-shadow: none; }

/* archive: circular year badge + issue rows */
.v2-arch { display: flex; flex-direction: column; }
.v2-arch-row { display: flex; gap: 28px; align-items: flex-start; padding: 26px 4px; }
.v2-arch-row + .v2-arch-row { border-top: 1px solid var(--c-border); }
.v2-arch-year {
    flex: 0 0 90px; width: 90px; height: 90px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; font-weight: 700; color: var(--c-white);
    background: linear-gradient(135deg, var(--c-purple-2), var(--c-mauve));
    box-shadow: 0 6px 16px rgba(125,126,164,0.35);
}
.v2-arch-issues { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.v2-arch-issue {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    background: var(--c-surface); border: 1px solid var(--c-border); border-left: 4px solid var(--c-purple-2);
    border-radius: 12px; padding: 16px 22px; color: var(--c-text-2); font-weight: 600; font-size: 15px;
    text-decoration: none; transition: background .15s, box-shadow .15s, border-color .15s, transform .15s;
}
.v2-arch-issue:hover { background: var(--c-white); border-left-color: var(--c-mauve); box-shadow: 0 6px 18px rgba(40,55,107,0.10); transform: translateY(-2px); }
.v2-arch-issue__arrow { color: var(--c-purple-2); font-size: 20px; flex: 0 0 auto; transition: transform .15s, color .15s; }
.v2-arch-issue:hover .v2-arch-issue__arrow { color: var(--c-mauve); transform: translateX(3px); }
@media (max-width: 620px) {
    .v2-arch-row { flex-direction: column; align-items: center; gap: 14px; }
    .v2-arch-year { width: 72px; height: 72px; flex-basis: 72px; font-size: 19px; }
    .v2-arch-issues { width: 100%; }
}

/* 3D book mockup for the hero cover */
.v2-book {
    position: relative;
    width: 320px;
    max-width: 100%;
    transform: perspective(1700px) rotateY(-22deg) rotateX(3deg);
    transform-style: preserve-3d;
}
/* cap the hero cover so the slider stays compact (was column-wide = very tall) */
.v2-book { display: block; width: 244px; max-width: 100%; margin: 0 auto; }
.v2-book__cover {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 3px 7px 7px 3px;
    box-shadow: 0 26px 46px rgba(20,20,50,0.45);
    position: relative;
    z-index: 2;
}
/* hover reveal on the home cover — "View Issue" overlay (matches the login look) */
/* opacity lives here (not inline) so the :hover rule can override it — an inline
   opacity:0 would out-specify the class selector and the overlay would never show. */
.v2-book__ov {
    position: absolute; inset: 0;
    border-radius: 3px 7px 7px 3px;
    background: linear-gradient(135deg, rgba(148,62,72,0.86), rgba(110,23,57,0.92));
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    color: #fff; text-align: center;
    opacity: 0; transition: opacity .22s ease;
    z-index: 3;
}
.v2-book__ov span { font-size: 15px; font-weight: 700; letter-spacing: .01em; }
.v2-book:hover .v2-book__ov,
.v2-book:focus-visible .v2-book__ov { opacity: 1; }
/* fore-edge (the stacked pages) peeking out on the right */
.v2-book::after {
    content: "";
    position: absolute;
    top: 2%;
    bottom: 2%;
    right: -15px;
    width: 16px;
    z-index: 1;
    background: repeating-linear-gradient(to right,
        var(--c-page-edge) 0, var(--c-page-edge) 1px,
        var(--c-white) 1px, var(--c-white) 3px);
    transform: rotateY(32deg);
    transform-origin: left center;
    border-radius: 0 3px 3px 0;
    box-shadow: 2px 12px 18px rgba(0,0,0,0.20);
}
/* binding shadow down the spine (left edge) */
.v2-book::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 22px;
    z-index: 3;
    border-radius: 3px 0 0 3px;
    background: linear-gradient(to right, rgba(0,0,0,0.30), rgba(0,0,0,0.05) 55%, rgba(0,0,0,0));
}

/* hero slider (left side) — left-aligned; text starts where the publisher card's
   text starts (after the logo): features pad 20 + card pad 24 + logo 74 + gap 16 = 134px */
.v2-hslide { opacity: 0; visibility: hidden; transition: none; pointer-events: none; align-items: flex-start; text-align: left; padding-left: 200px; }
@media (max-width: 900px) { .v2-hslide { padding-left: 0; } }
.v2-hslide.is-active { opacity: 1; visibility: visible; transition: opacity .5s ease; pointer-events: auto; }
.v2-hero-arrow { transition: background .15s; }
.v2-hero-arrow:hover { background: rgba(255,255,255,0.28) !important; }
.v2-hdot { transition: background .15s; }
/* lift the dots above the Publisher card that overlaps the hero bottom on desktop */
.v2-hero-dots { bottom: 86px !important; }

/* publisher / related-journal band — floats up over the hero's bottom edge
   (Güncel look). Overlap only on desktop; on mobile the band flows normally
   because the mobile submission cards sit between it and the stacked hero. */
.v2-pubband-wrap { margin-top: -56px; }
@media (max-width: 1000px) {
    .v2-pubband-wrap { margin-top: 22px; }
}
@media (max-width: 720px) {
    .v2-pubband { grid-template-columns: 1fr !important; }
    .v2-pubband__rel { border-left: none !important; border-top: 1px solid var(--c-border) !important; }
}

@media (max-width: 1000px) { .v2-hero-dots { bottom: 16px !important; } }

/* "In This Issue" dropdown on the article page */
.v2-issue-dd summary::-webkit-details-marker { display: none; }
.v2-issue-dd summary::marker { content: ""; }
.v2-issue-dd__chev { transition: transform .2s ease; }
.v2-issue-dd[open] .v2-issue-dd__chev { transform: rotate(180deg); }
.v2-issue-dd__title:hover { color: var(--c-link); }

.v2-prose-link:hover { text-decoration: underline; }

/* The Publisher / Related-Journal band hugs its content and centers (original v2
   look). In the CMS, Bootstrap's border-box reset made it stretch full-width — this
   restores the snug, centered width that lines up with the hero content. */
.v2-features { width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; }

/* ---- responsive ---- */
.v2-mobile-toggle { display: none; }
/* show only on mobile / hide only on mobile (matches the 1000px stacking point) */
.v2-show-mobile { display: none; }
@media (max-width: 1000px) {
    .v2-show-mobile { display: block !important; }
    .v2-hide-mobile { display: none !important; }
}

/* Publisher / Related-journal band. Shown under the hero on desktop and after
   the Archive widget on mobile (two placements, same markup). On mobile let the
   card fill the width; on phones the two items stack, so the vertical
   border-left divider becomes a horizontal rule, logos are evened out, padding
   tightened and the long sub-line hidden — a clean two-row list. */
@media (max-width: 1000px) {
    .v2-features { width: auto !important; }
}
@media (max-width: 640px) {
    .v2-features { padding: 4px 6px !important; }
    .v2-features > div { padding: 15px 14px !important; gap: 14px !important; border-left: 0 !important; }
    .v2-features > div + div { border-top: 1px solid var(--c-border) !important; }
    .v2-features img { width: 58px !important; height: auto !important; }
    .v2-feat-sub { display: none !important; }
}

/* Grid children default to min-width:auto, so a wide element in the main column
   (a table, a long unbroken string) could force the track past its track size and
   shove the 280px sidebar off the page. min-width:0 lets the column shrink and its
   content scroll/wrap instead. */
.v2-article-grid > * { min-width: 0; }

/* Fixed floating social bar on the left (ported from the previous site). White
   circles with brand-coloured icons; on hover the circle fills with the brand
   colour and nudges out. Hidden on narrow screens so it never overlaps content. */
.v2-social-fixed {
    position: fixed; left: 12px; top: 50%; transform: translateY(-50%);
    z-index: 60; display: flex; flex-direction: column; gap: 14px;
}
.v2-social-ic {
    width: 42px; height: 42px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #fff; color: var(--brand, var(--c-navy));
    box-shadow: 0 2px 10px rgba(20,25,50,0.18);
    transition: background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.v2-social-ic:hover {
    background: var(--brand, var(--c-navy)); color: #fff;
    transform: translateX(4px) scale(1.06);
    box-shadow: 0 6px 18px rgba(20,25,50,0.28);
}
@media (max-width: 1200px) { .v2-social-fixed { display: none; } }

/* Issue cover: reveal the "Full Issue PDF" overlay on hover/focus. The whole
   cover is a link, so touch devices (no hover) still open the PDF on tap. */
.v2-coverpdf__ov { opacity: 0; transition: opacity .2s ease; }
.v2-coverpdf:hover .v2-coverpdf__ov,
.v2-coverpdf:focus-visible .v2-coverpdf__ov { opacity: 1; }

@media (max-width: 1000px) {
    .v2-grid-2col { grid-template-columns: 1fr !important; }
    /* one column: recentre the hero (desktop uses left-only padding + a
       right-aligned cover for the card-edge alignment, both off-centre here) */
    .v2-hero-grid { grid-template-columns: 1fr !important; padding-left: 20px !important; padding-right: 20px !important; text-align: center !important; }
    /* centre the cover and pull the "Son Sayı" badge back inside so it doesn't
       overflow the right edge (its desktop right:-46px sticks out of the 1-col cell) */
    .v2-coverwrap { justify-content: center !important; padding: 20px 18px !important; }
    .v2-badge { right: -6px !important; bottom: -6px !important; width: 92px !important; height: 92px !important; }
    .v2-features { grid-template-columns: repeat(2, 1fr) !important; }
    .v2-board-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .v2-index-grid { grid-template-columns: repeat(3, 1fr) !important; }
    .v2-archive-grid { grid-template-columns: 1fr !important; }
    .v2-archive-side { position: static !important; }
    .v2-aside-sticky { position: static !important; }
    /* stack the article sidebar under the content once it goes static, so the
       "In This Issue" card gets full width instead of a cramped 280px column */
    .v2-article-grid { grid-template-columns: 1fr !important; }
}

/* Hero: from here down all slides stack in one grid cell, so the slider height
   equals the TALLEST slide (fixed height — no jump when switching) instead of an
   absolute overlay with a fixed min-height that taller copy could overflow.
   Only the active slide is visible (opacity); the rest still reserve the space. */
@media (max-width: 1200px) {
    .v2-hero-slider { min-height: 0 !important; display: grid !important; }
    /* inactive slides are hidden instantly (visibility) so they never overlap the active
       one during the change; only the incoming slide fades in */
    .v2-hslide { position: relative !important; inset: auto !important; grid-area: 1 / 1 !important; display: flex !important; opacity: 0 !important; visibility: hidden !important; transition: none !important; pointer-events: none !important; padding-left: 0 !important; }
    .v2-hslide.is-active { opacity: 1 !important; visibility: visible !important; transition: opacity .4s ease !important; pointer-events: auto !important; }
    .v2-hero-dots { bottom: 16px !important; }
}

@media (max-width: 900px) {
    /* compact header: brand + hamburger; controls move into the dropdown menu */
    .v2-headrow { gap: 12px !important; padding-top: 10px !important; padding-bottom: 10px !important; }
    .v2-brand { flex: 1 1 0 !important; min-width: 0; gap: 12px !important; overflow: hidden; }
    .v2-brand__wordmark { height: 52px !important; }
    .v2-brand__title { font-size: 18px !important; line-height: 1.1 !important; }
    .v2-headctrls { display: none !important; }
    .v2-brand__issn { display: block !important; }
    .v2-navtoggle { display: flex !important; flex: 0 0 auto; }

    /* nav becomes a collapsible dropdown */
    .v2-navwrap { display: none; width: 100%; max-width: 100%; box-sizing: border-box; padding: 0 14px 14px !important; }
    .v2-navwrap.is-open { display: block; max-height: calc(100vh - 86px); overflow-y: auto; }
    .v2-nav { overflow: visible !important; padding: 6px 0 4px; }
    .v2-navsearch { display: flex !important; margin: 12px 12px 6px !important; }
    .v2-navissn { display: flex !important; }
    .v2-nav__list { flex-direction: column !important; align-items: stretch !important; padding: 6px 12px !important; gap: 2px; }
    .v2-nav__list li { align-items: stretch; min-width: 0; }
    .v2-nav__link { padding: 12px 14px !important; border-radius: 8px; }
    .v2-nav__link span { white-space: normal; }

    /* the negative overlap was for the desktop nav pill — reset it on mobile */
    .v2-hero, .v2-subhero { margin-top: 0 !important; }
    .v2-subhero > div { padding-top: 36px !important; }
    /* hero: tighter padding, smaller book */
    .v2-hero-grid { padding-top: 42px !important; padding-bottom: 58px !important; gap: 28px !important; }
    /* (slide stacking/height handled by the <=1200px grid-stack rule above) */
    .v2-book { width: 240px; }
    /* keep the cover + badge inside the screen (they were forcing extra width) */
    .v2-coverwrap { padding: 6px 14px !important; }
    .v2-badge { right: -8px !important; bottom: -8px !important; width: 84px !important; height: 84px !important; }
    .v2-badge span:first-child { font-size: 12px !important; }
    .v2-badge span:last-child { font-size: 9px !important; }
}

@media (max-width: 820px) {
    .v2-topbar-meta { display: none !important; }
}

@media (max-width: 640px) {
    .v2-features { grid-template-columns: 1fr !important; }
    .v2-board-grid { grid-template-columns: 1fr !important; }
    .v2-index-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .v2-editor-cards { grid-template-columns: 1fr !important; }
    .v2-contact-grid { grid-template-columns: 1fr !important; }
    .v2-h1 { font-size: 30px !important; }
    .v2-article-grid { grid-template-columns: 1fr !important; }
    /* editor/board cards: let the field/country badge wrap under the name */
    .v2-editorcard { flex-wrap: wrap; }
    .v2-editorcard > span:last-child { max-width: none !important; margin-top: 4px; }
}
/* safety: never allow horizontal scrolling on small screens */
@media (max-width: 900px) { html, body { overflow-x: hidden; } }

/* hero copy inset mirrors the cover's right inset; remove when the hero stacks */
@media (max-width: 1000px) { .v2-hero-copy { padding-left: 0 !important; } }