/* Cream — Ana ekran manzarası (seascape.js ile) */
.sc { position: absolute; z-index: 0; left: 0; right: 0; top: 40%; height: 50%; pointer-events: none; opacity: 0; transition: opacity 2.4s ease;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 34%), linear-gradient(90deg, rgba(0, 0, 0, .34) 0%, rgba(0, 0, 0, .44) 26%, #000 42%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(180deg, transparent 0%, #000 34%), linear-gradient(90deg, rgba(0, 0, 0, .34) 0%, rgba(0, 0, 0, .44) 26%, #000 42%);
    mask-composite: intersect; }
.sc.on { opacity: 1; }
.sc svg { display: block; width: 100%; height: 100%; }
#anasayfa > .section-fit-content, #anasayfa > .wrap { position: relative; z-index: 1; }

/* gökyüzü */
.sc .cl { fill: #FCEBD3; opacity: .85; }
.sc .cl-2 { fill: #F8DDB9; opacity: .7; }
.sc-clouds { animation: scCloud 90s ease-in-out infinite alternate; }
@keyframes scCloud { to { transform: translateX(70px); } }
.sc-sun { animation: scSun 18s ease-in-out infinite alternate; }
@keyframes scSun { from { transform: translateY(-5px); } to { transform: translateY(7px); } }
.sc-birds path { fill: none; stroke: #8B6A5A; stroke-width: 1.4; stroke-linecap: round; opacity: .55; }
.sc-birds { animation: scBirds 40s linear infinite; }
@keyframes scBirds { from { transform: translate(-40px, 6px); } 50% { transform: translate(40px, -6px); } to { transform: translate(-40px, 6px); } }

/* Çanakkale Şehitler Abidesi */
.sc-abide .ab-lit { fill: #8E6F60; }
.sc-abide .ab-sh { fill: #6B4D41; }
.sc-abide .ab-in { fill: #5A3E33; opacity: .55; }
.sc-abide .ab-tree { fill: #7A5A4B; }
.sc-abide .ab-hill { fill: #98735F; }

/* "Dur Yolcu" anıtı */
.sc-dur { opacity: .86; }
.sc-dur .dy-clear { fill: #B99780; opacity: .32; }
.sc-dur .dy-w, .sc-dur .dy-man, .sc-dur .dy-t { fill: #F8EEDF; }
.sc-dur .dy-limb { fill: none; stroke: #F8EEDF; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.sc-dur .dy-leg { stroke-width: 3.8; }
.sc-dur .dy-foot { stroke-width: 2.6; }
.sc-dur .dy-rifle { fill: none; stroke: #F8EEDF; stroke-width: 2; stroke-linecap: round; }
.sc-dur .dy-bayo { fill: none; stroke: #F8EEDF; stroke-width: 1.1; stroke-linecap: round; }
.sc-dur .dy-t { font-family: "Manrope", system-ui, sans-serif; font-weight: 800; font-size: 15.5px; letter-spacing: 1.6px; }
.sc-dur .dy-l { fill: none; stroke: #F8EEDF; stroke-width: 2.2; stroke-dasharray: 16 3.4 9 3.4 21 3.4 12 3.4 17 3.4; opacity: .85; }
.sc-dur .dy-l2 { stroke-dasharray: 11 3.4 19 3.4 8 3.4 24 3.4 13 3.4; }
.sc-dur .dy-flame { fill: #D0543F; }
.sc-dur .dy-flame2 { fill: #E4805E; }
.sc-dur .dy-base { fill: #F8EEDF; }
.sc-dur .dy-pole { fill: none; stroke: #F1E6D7; stroke-width: 1.1; }
.sc-dur .dy-cloth { fill: #D23F35; }
.sc-dur .dy-wave { transform-box: fill-box; transform-origin: 0 50%; animation: dyWave 3.4s ease-in-out infinite; }
@keyframes dyWave { 50% { transform: skewY(3deg) scaleX(.95); } }

/* deniz */
.sc-hor { stroke: #E7A774; stroke-width: 1; opacity: .7; }
.sc .wv { fill: none; stroke: #FFF8EE; stroke-linecap: round; opacity: .4; animation: scWave 9s ease-in-out infinite alternate; animation-delay: var(--wd); }
@keyframes scWave { from { transform: translateX(calc(var(--wa) * -1)); opacity: .18; } to { transform: translateX(var(--wa)); opacity: .55; } }
.sc .gl { fill: none; stroke: #FFE3B0; stroke-width: 2.2; stroke-linecap: round; animation: scGlit 2.8s ease-in-out infinite; animation-delay: var(--gd); }
@keyframes scGlit { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
.sc-foam { fill: none; stroke: #FFFBF4; stroke-width: 2; opacity: .8; animation: scFoam 7s ease-in-out infinite alternate; }
@keyframes scFoam { from { transform: translate(-30px, 2px); opacity: .5; } to { transform: translate(30px, -2px); opacity: .9; } }

/* gemiler: arkadan öne doğru atmosferik perspektif */
.ship .hull, .ship .sup, .ship .fun, .ship .ct { fill: var(--sh, #5A3E33); }
.ship .ct-a { opacity: .78; } .ship .ct-b { opacity: .9; } .ship .ct-c { opacity: .66; }
.ship .sup { fill: var(--sh2, #6E5044); }
.ship .sl { fill: var(--sl, #F8EBD9); stroke: var(--sh, #5A3E33); stroke-width: 1.2; stroke-linejoin: round; }
.ship .sl-2 { fill: var(--sl2, #EFD7BA); }
.ship .mast, .ship .trim { fill: none; stroke: var(--sh, #5A3E33); stroke-width: 1.6; stroke-linecap: round; }
.ship .trim { stroke: #E9B886; stroke-width: 1.2; opacity: .55; }
.ship .win { fill: none; stroke: #FFE7C2; stroke-width: 2; stroke-dasharray: 3 3; opacity: .7; }
.ship .stripe { fill: none; stroke: #E9B886; stroke-width: 2.4; }
.ship .wake { fill: none; stroke: #FFF8EE; stroke-width: 1.6; stroke-linecap: round; opacity: .55; stroke-dasharray: 14 6 4 8; }
.ship .refl { opacity: .14; }
.ship--far { --sh: #A88A7A; --sh2: #B49787; --sl: #F3E2CF; --sl2: #EAD3BA; opacity: .75; }
.ship--mid { --sh: #82634F; --sh2: #927261; opacity: .88; }
.ship--near { --sh: #5E4135; --sh2: #6F5146; }
.ship .bob { animation: scBob 4.2s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.ship--mid .bob { animation-duration: 5s; } .ship--far .bob { animation: none; }
@keyframes scBob { 50% { transform: translateY(1.2px) rotate(.6deg); } }

/* TCG Anadolu ve balıkçı teknesi ayrıntıları */
.ship .flag { fill: #C8463B; }
.ship .buoy { fill: #E0703F; }
.ship-anadolu { --sh: #6F5A52; --sh2: #7D6A61; }
.ship-fishing .hull { fill: #4A342D; } .ship-fishing .trim { stroke: #C9584A; stroke-width: 1.4; opacity: .9; }
.ship-fishing .fsail { fill: #F4E6D0; stroke: #6E5145; stroke-width: .9; stroke-linejoin: round; }
.ship-fishing .cab { fill: #EFE2CF; } .ship-fishing .cabroof { fill: #5C4238; } .ship-fishing .cabwin { fill: #6E5145; }
.ship-fishing .mast { stroke: #4A342D; stroke-width: 1.4; }
.ship-fishing .lamp { fill: #FFE2A0; }
.ship--shore .bob { animation-duration: 3.2s; }

/* tur gemisi: ışıl ışıl */
.ship-cruise { --sh: #6E5248; --sh2: #8A6C60; }
.ship .lt { fill: none; stroke: #FFE6A6; stroke-width: 3; stroke-linecap: round; stroke-dasharray: .1 3.6; animation: scLights 3.4s ease-in-out infinite; }
.ship .lt-1 { animation-delay: -1.1s; } .ship .lt-2 { animation-delay: -2.2s; }
.ship .port { stroke-width: 2.2; stroke-dasharray: .1 5; }
.ship .garland { stroke-width: 2.4; stroke-dasharray: .1 5; stroke: #FFF1C8; }
.ship .lts { filter: drop-shadow(0 0 1.5px #FFD98A) drop-shadow(0 0 5px rgba(255, 196, 92, .85)); }
@keyframes scLights { 0%, 100% { opacity: .8; } 45% { opacity: 1; } 62% { opacity: .6; } }
.ship .refl .lts { filter: none; opacity: .8; }

@media (max-width: 767px) {
    .sc { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%); mask-image: linear-gradient(180deg, transparent 0%, #000 30%); }
}
@media (prefers-reduced-motion: reduce) {
    .sc, .sc * { animation: none !important; transition: none !important; }
    .sc { opacity: 1; }
}

/* Çapa: gemi hızı butonu (seascape.js) */
.sc-spd { position: absolute; z-index: 3; right: clamp(12px, 2.2vw, 28px); top: 70%; display: inline-flex; align-items: center; gap: 0;
    height: 38px; min-width: 38px; padding: 0 9px; border: 1px solid rgba(201, 162, 115, .55); border-radius: 999px; cursor: pointer;
    color: #5A3E33; background: rgba(251, 245, 236, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    box-shadow: 0 4px 14px rgba(74, 46, 38, .12); opacity: .62; font: 800 12.5px/1 "Manrope", system-ui, sans-serif; letter-spacing: .02em;
    transition: opacity .3s ease, background .3s ease, color .3s ease, box-shadow .3s ease, gap .3s ease, transform .2s ease; -webkit-tap-highlight-color: transparent; }
.sc-spd::before { content: ""; position: absolute; inset: -4px; border-radius: inherit; } /* geniş dokunma alanı */
.sc-spd:hover, .sc-spd:focus-visible, .sc-spd.is-on, .sc-spd.peek { opacity: 1; background: rgba(251, 245, 236, .9); box-shadow: 0 6px 18px rgba(74, 46, 38, .18); }
.sc-spd:active { transform: scale(.94); }
.sc-spd:focus-visible { outline: 2px solid #C9A273; outline-offset: 3px; }
.sc-spd-ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.sc-spd-x { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .3s ease; }
.sc-spd.is-on { gap: 6px; color: #F8EEDF; background: rgba(90, 62, 51, .88); border-color: rgba(201, 162, 115, .8); }
.sc-spd.is-on .sc-spd-x { max-width: 3em; }
.sc-spd.spin .sc-spd-ic { animation: scAnchor .6s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes scAnchor { 0% { transform: rotate(0); } 40% { transform: rotate(-24deg); } 100% { transform: rotate(0); } }
.sc[data-speed="4"] .ship .wake, .sc[data-speed="8"] .ship .wake { opacity: .8; stroke-width: 2.2; }
.sc[data-speed="4"] .ship .bob { animation-duration: 2.4s; }
.sc[data-speed="8"] .ship .bob { animation-duration: 1.4s; }
.sc[data-speed="8"] .ship .wake { stroke-dasharray: 22 5 6 6; }
@media (prefers-reduced-motion: reduce) { .sc-spd { display: none; } }

/* Hızlanınca gelen ek gemiler: tek renk silüet, hız düşünce kaybolur */
.sc .xtra { opacity: 0; transition: opacity 1.4s ease; }
.sc[data-speed="2"] .xtra-2, .sc[data-speed="4"] .xtra-2, .sc[data-speed="8"] .xtra-2,
.sc[data-speed="4"] .xtra-4, .sc[data-speed="8"] .xtra-4, .sc[data-speed="8"] .xtra-8 { opacity: 1; }
.ship--sil.ship--far { --sh: #A88A7A; } .ship--sil.ship--mid { --sh: #7E5F4E; } .ship--sil.ship--near { --sh: #5A3E33; }

/* Çapa ipucu: üzerine gelince harf harf dalgalanarak açılır */
.sc-spd-tip { position: absolute; right: calc(100% + 10px); top: 50%; pointer-events: none; white-space: nowrap;
    padding: 7px 12px; border-radius: 999px; color: #F8EEDF; background: rgba(90, 62, 51, .92); box-shadow: 0 6px 16px rgba(74, 46, 38, .2);
    font: 700 12px/1 "Manrope", system-ui, sans-serif; letter-spacing: .01em;
    opacity: 0; transform: translate(10px, -50%) scale(.9); transform-origin: right center;
    transition: opacity .25s ease, transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.sc-spd-tip::after { content: ""; position: absolute; right: -4px; top: 50%; width: 8px; height: 8px; margin-top: -4px; background: inherit; transform: rotate(45deg); border-radius: 1px; }
.sc-spd-tip-in > span { display: inline-block; }
.sc-spd:hover .sc-spd-tip, .sc-spd:focus-visible .sc-spd-tip, .sc-spd.peek .sc-spd-tip { opacity: 1; transform: translate(0, -50%) scale(1); }
.sc-spd:hover .sc-spd-tip-in > span, .sc-spd:focus-visible .sc-spd-tip-in > span, .sc-spd.peek .sc-spd-tip-in > span {
    animation: scTipIn .45s cubic-bezier(.3, 1.6, .5, 1) both, scTipWave 1.8s ease-in-out infinite;
    animation-delay: calc(var(--i) * 22ms), calc(.5s + var(--i) * 60ms); }
@keyframes scTipIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes scTipWave { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-2.5px); } }
.sc-spd:hover .sc-spd-ic, .sc-spd.peek .sc-spd-ic { animation: scSway 1.6s ease-in-out infinite; transform-origin: 50% 20%; }
.sc-spd.spin:hover .sc-spd-ic { animation: scAnchor .6s cubic-bezier(.3, 1.5, .5, 1), scSway 1.6s ease-in-out .6s infinite; }
@keyframes scSway { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }
.sc-spd.is-on .sc-spd-tip { background: rgba(251, 245, 236, .95); color: #5A3E33; }
@media (hover: none) { .sc-spd:hover .sc-spd-tip { opacity: 0; } .sc-spd.peek .sc-spd-tip { opacity: 1; } }

/* Silüet gemiler (seascape-ships.js) */
.ship--sil { --cut: rgba(250, 232, 212, .5); }
.ship--sil .h { fill: var(--sh); }
.ship--sil .l { fill: none; stroke: var(--sh); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ship--sil .f { fill: none; stroke: var(--sh); stroke-width: .7; stroke-linecap: round; opacity: .85; }
.ship--sil .c { fill: none; stroke: var(--cut); stroke-width: 1; stroke-linecap: butt; }
.ship--sil.ship--near { --cut: rgba(250, 232, 212, .42); }
.ship--sil.ship--far .c, .ship--sil.ship--far .f { opacity: .6; }
.ship--sil .lamp { fill: #FFE6A6; }
.ship--sil .lamp.blink { animation: silBlink 1.6s steps(1) infinite; }
@keyframes silBlink { 50% { opacity: .15; } }
.ship--sil .lt.ltw { stroke-width: 1.7; stroke-dasharray: 2.4 1.8; stroke-linecap: butt; }
.ship--sil .lt.deck { stroke-width: 1.6; stroke-dasharray: .1 7; }
.ship--sil .sil-flag { transform-box: fill-box; transform-origin: 0 50%; animation: dyWave 2.6s ease-in-out infinite; }
.ship--sil .refl .lts { filter: none; }
.ship--sil .cf { fill: var(--cut); }

/* Basılı tut = 2x (Reels gibi) */
.sc-hold { position: absolute; z-index: 4; left: 50%; top: 60%; display: inline-flex; align-items: center; gap: 3px;
    padding: 8px 14px 8px 15px; border-radius: 999px; pointer-events: none; color: #FFF8EE; background: rgba(42, 25, 21, .55);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 6px 20px rgba(42, 25, 21, .25);
    font: 800 14px/1 "Manrope", system-ui, sans-serif; letter-spacing: .02em;
    opacity: 0; transform: translate(-50%, -50%) scale(.8); transition: opacity .2s ease, transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.sc-hold.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.sc-hold b { margin-right: 5px; font-weight: 800; }
.sc-hold i { width: 0; height: 0; border-style: solid; border-width: 5.5px 0 5.5px 8px; border-color: transparent transparent transparent currentColor; opacity: .3; }
.sc-hold.on i { animation: scHoldArrow 1s ease-in-out infinite; }
.sc-hold.on i:nth-of-type(2) { animation-delay: .16s; } .sc-hold.on i:nth-of-type(3) { animation-delay: .32s; }
@keyframes scHoldArrow { 0%, 100% { opacity: .25; } 35% { opacity: 1; } }
.hero.sc-holding, .hero.sc-holding * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.sc[data-speed] .ship .bob { transition: none; }
@media (prefers-reduced-motion: reduce) { .sc-hold { display: none; } }