.products-page { color: #111; }
.navbar-line .nav-link[aria-current="page"] { text-decoration: underline; text-underline-offset: 12px; }
.products-hero { position: relative; height: min(49vw, 780px); min-height: 420px; background: #333; }
.products-hero-image { width: 100%; height: 100%; object-fit: cover; }
.products-hero-caption { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgb(0 0 0 / 40%); }
.products-hero h1 { width: min(450px, calc(100% - 32px)); min-width: 0; min-height: 160px; display: grid; place-content: center; margin: 0; padding: 24px 40px; background: url('../images/MASAUSTU/IKONLAR-SABLONLAR/SLIDER-YAZI-SABLON.svg') center / contain no-repeat; color: #fff; font-size: 28px; font-weight: 400; line-height: 1.15; text-align: center; letter-spacing: 1px; }
.products-scroll { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); }
.products-scroll img { width: 32px; height: 32px; }
.products-navigation { position: fixed; top: 128px; right: 28px; width: 210px; z-index: 20; }
.products-navigation ul { list-style: none; padding: 0; margin: 0; scrollbar-width: none; }
.products-navigation ul::-webkit-scrollbar { display: none; }
.products-navigation li { margin-bottom: 3px; }
.products-navigation a { display: block; padding: 8px 12px; font-size: 14px; line-height: 1.25; color: #555; background: #f0f0f0; text-decoration: none; transition: background .15s, color .15s; }
.products-navigation a:hover, .products-navigation a:focus-visible, .products-navigation a[aria-current="true"] { background: #111; color: #fff; }
.product-section { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 80px 0; border-bottom: 1px solid #eee; scroll-margin-top: 24px; }
.product-section:last-child { border-bottom: 0; }
.product-section-reverse .product-image-column { order: -1; }
.product-copy-column { display: grid; align-items: center; }
.product-section-reverse .product-copy-column { padding-right: 250px; }
.product-copy { position: relative; width: min(100%, 560px); min-height: 650px; margin: auto; padding: 50px 30px 50px 125px; display: flex; align-items: center; }
.product-copy::before { content: ''; position: absolute; left: 50px; top: 0; bottom: 0; width: 245px; background: url('../images/MASAUSTU/IKONLAR-SABLONLAR/METIN-YAZI-SABLON.svg') center / 100% 100% no-repeat; pointer-events: none; }
.product-side-title { position: absolute; left: 16px; top: 50%; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl; white-space: nowrap; font-size: 48px; line-height: 1; }
.product-description { position: relative; width: 100%; background: #fff; padding: 24px 0; font-size: 14px; line-height: 1.45; }
.product-description h2 { font-size: 17px; font-weight: 600; line-height: 1.3; margin-bottom: 14px; }
.product-description p { margin-bottom: 14px; }
.product-description ul { padding-left: 18px; margin: 0; }
.product-description li { margin-bottom: 4px; }
.product-image-column { min-width: 0; background: #f4f4f4; }
.product-image-column img { display: block; width: 100%; height: 100%; min-height: 650px; object-fit: cover; }
.product-section-reverse .product-copy { width: 100%; padding-left: 95px; padding-right: 15px; margin-left: 0; }
.product-section-reverse .product-copy::before { left: 40px; width: 210px; }
.product-section-reverse .product-side-title { left: 6px; }
@media (min-width: 1600px) { .product-copy { margin-right: 80px; } .product-section-reverse .product-copy { margin-left: 80px; margin-right: auto; } }
@media (max-width: 1199px) {
    .products-navigation { position: sticky; top: 0; right: auto; width: 100%; padding: 8px 16px; background: #fff; }
    .products-navigation ul { display: flex; gap: 5px; overflow-x: auto; }
    .products-navigation li { flex: 0 0 auto; margin: 0; }
    .products-navigation a { font-size: 13px; white-space: nowrap; padding: 10px; }
    .product-section-reverse .product-copy-column { padding-right: 0; }
    .product-section { gap: 20px; padding: 56px 0; }
    .product-copy { padding-left: 100px; padding-right: 24px; min-height: 620px; }
    .product-copy::before { left: 42px; width: 200px; }
    .product-side-title { font-size: 38px; left: 14px; }
    .product-description { font-size: 13px; }
    .product-image-column img { min-height: 620px; }
}
@media (max-width: 991px) {
    .products-navigation { display: block; position: fixed; top: 18%; right: 37px; width: 106px; padding: 0; background: transparent; visibility: hidden; pointer-events: none; }
    .products-navigation.is-visible { visibility: visible; pointer-events: auto; }
    .products-navigation ul { display: block; overflow: visible; }
    .products-navigation li { margin-bottom: 5px; }
    .products-navigation a { min-height: 24px; display: flex; align-items: center; border: 0; font-size: 10px; line-height: 1.2; white-space: normal; padding: 5px 10px; color: #212529; background: #f1f2f2; }
    .products-navigation a[aria-current="true"] { background: #000; }
    .products-hero { height: 55vw; min-height: 380px; }
    .product-section { grid-template-columns: 1fr; gap: 24px; padding: 40px 0; scroll-margin-top: 70px; }
    .product-section .product-image-column { order: -1; margin: 0 16px; }
    .product-image-column img { height: auto; min-height: 0; aspect-ratio: 1.3; object-fit: cover; }
    .product-copy { width: min(100%, 600px); min-height: 520px; padding: 30px 28px 30px 110px; }
    .product-description { font-size: 15px; }
}
@media (max-width: 575px) {
    .products-hero { height: 115vw; min-height: 400px; max-height: 620px; }
    .products-hero h1 { font-size: 21px; padding: 20px 28px; min-height: 130px; }
    .product-copy { min-height: 620px; padding-left: 84px; padding-right: 22px; }
    .product-copy::before { left: 38px; width: 160px; }
    .product-side-title { font-size: 34px; left: 12px; }
    .product-description { font-size: 14px; }
    .product-description h2 { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Keep vertical section labels centered on the vessel outline at every size. */
.product-copy { --product-outline-left: 50px; }
.product-section-reverse .product-copy { --product-outline-left: 40px; }
.product-copy::before { left: var(--product-outline-left); }
.product-copy .product-side-title { left: var(--product-outline-left); transform: translate(-50%, -50%) rotate(180deg); }
.product-section-reverse .product-side-title { left: 6px; transform: translateY(-50%) rotate(180deg); }
@media (max-width: 1199px) { .product-copy { --product-outline-left: 42px; } }
@media (max-width: 575px) { .product-copy { --product-outline-left: 38px; } }

@media (max-width: 991px) {
    .product-copy::before, .product-side-title { display: none; }
    .product-section .product-copy { width: 100%; min-height: 0; margin: 0; padding: 0 28px; }
    .product-description { padding: 0; font-size: 15px; line-height: 1.55; }
    .product-description h2 { font-size: 22px; margin-bottom: 16px; }
}