.history {position: relative; isolation: isolate; overflow: hidden; color: #fff; padding: 84px 0 76px; background: #0a1f47;}
.history__bg {position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #0a1c42 0%, #16346a 30%, #3d4f85 46%, #9a6a86 56%, #e88f5e 62%, #1d4479 63%, #12305f 75%, #081a3c 100%);}
.history__bg::after {content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7, 24, 58, .92) 0%, rgba(7, 24, 58, .7) 40%, rgba(7, 24, 58, .25) 75%, rgba(7, 24, 58, .1) 100%);}
.history__sun {position: absolute; left: 74%; top: 61%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 214, 160, .95) 0%, rgba(255, 160, 90, .55) 25%, rgba(255, 120, 80, .15) 55%, transparent 70%); filter: blur(2px); animation: sunGlow 6s ease-in-out infinite;}
.history__sun::after {content: ""; position: absolute; left: 50%; top: 50%; width: 420px; height: 90px; transform: translate(-50%, 10px); background: radial-gradient(ellipse at center, rgba(255, 170, 110, .35), transparent 70%);}
.history__stars {position: absolute; inset: 0 0 50% 0; background-image: radial-gradient(1px 1px at 12% 20%, rgba(255,255,255,.7), transparent), radial-gradient(1px 1px at 28% 12%, rgba(255,255,255,.5), transparent), radial-gradient(1.5px 1.5px at 46% 26%, rgba(255,255,255,.6), transparent), radial-gradient(1px 1px at 63% 9%, rgba(255,255,255,.6), transparent), radial-gradient(1px 1px at 82% 18%, rgba(255,255,255,.5), transparent), radial-gradient(1.5px 1.5px at 92% 32%, rgba(255,255,255,.4), transparent), radial-gradient(1px 1px at 55% 38%, rgba(255,255,255,.35), transparent); animation: twinkle 5s ease-in-out infinite alternate;}
.history__ship {position: absolute; left: 87%; top: 48%; width: clamp(140px, 12vw, 210px); fill: #0b1834; stroke: #0b1834; opacity: .92; animation: bob 6s ease-in-out infinite;}
.history__waves {position: absolute; left: 0; right: 0; bottom: 0; height: 40%; width: 100%; overflow: visible;}
.history__waves .w1 {fill: rgba(30, 72, 130, .45); animation: waveShift 11s ease-in-out infinite;}
.history__waves .w2 {fill: rgba(16, 48, 100, .55); animation: waveShift2 14s ease-in-out infinite;}
.history__waves .w3 {fill: rgba(8, 26, 62, .75); animation: waveShift 17s ease-in-out infinite;}
.history__inner {position: relative;}
.history__head {display: grid; grid-template-columns: auto 1fr; gap: 20px 70px; align-items: end; margin-bottom: 56px;}
.history__title {color: #fff; font-family: var(--font-head); font-weight: 500; font-size: clamp(34px, 3.8vw, 54px); letter-spacing: -.01em;}
.history__lead {font-size: clamp(15px, 1.3vw, 19px); color: rgba(255,255,255,.9); max-width: 470px; line-height: 1.5; padding-bottom: 8px;}
.tline-wrap {position: relative;}
.tline {position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px;}
.tline::before,
.tline::after {content: ""; position: absolute; top: 12px; left: 12px; height: 2px; border-radius: 2px;}
.tline::before {right: 0; background: rgba(255,255,255,.28);}
.tline::after {width: calc((100% + 24px) * .8 * var(--progress, 0)); background: linear-gradient(90deg, #8fd0fb, #fff); box-shadow: 0 0 12px rgba(143, 208, 251, .8); transition: width 1.4s var(--ease-out);}
.tl {position: relative; z-index: 1;}
.tl__btn {display: grid; justify-items: start; gap: 14px; color: #fff; text-align: left; border-radius: 10px;}
.tl__dot {width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #0e2a5a; border: 2px solid rgba(255,255,255,.9); box-shadow: 0 0 0 5px rgba(143, 208, 251, .12); transition: transform .4s var(--ease), box-shadow .4s, background .3s;}
.tl__dot::after {content: ""; width: 10px; height: 10px; border-radius: 50%; background: #8fd0fb; box-shadow: 0 0 10px #8fd0fb; transition: transform .3s;}
.tl__year {font-family: var(--font-head); font-size: clamp(26px, 2.4vw, 34px); font-weight: 600; line-height: 1; letter-spacing: -.01em; transition: color .3s, transform .4s var(--ease);}
.tl__body {margin-top: 12px; padding-right: 8px; transition: transform .4s var(--ease);}
.tl__body h3 {color: #fff; font-family: var(--font-head); font-size: 16px; font-weight: 600; margin-bottom: 6px;}
.tl__body p {font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.78);}
.tl:hover .tl__dot,
.tl.is-active .tl__dot {transform: scale(1.18); background: #1e9bf0; box-shadow: 0 0 0 8px rgba(30, 155, 240, .22), 0 0 30px rgba(143, 208, 251, .8);}
.tl:hover .tl__dot::after,
.tl.is-active .tl__dot::after {background: #fff; transform: scale(.8);}
.tl:hover .tl__year,
.tl.is-active .tl__year {color: #8fd0fb; transform: translateX(3px);}
.tl:hover .tl__body,
.tl.is-active .tl__body {transform: translateX(3px);}
.tl.is-active .tl__body p {color: #fff;}
.tline__ship {position: absolute; top: -22px; left: 0; width: 28px; height: 28px; display: grid; place-items: center; color: #fff; transform: translateX(var(--ship-x, 0px)); transition: transform 1.2s var(--ease-out); pointer-events: none;}
.history__foot {display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 52px; flex-wrap: wrap;}
.history__stats {display: flex; gap: 28px; font-size: 13px; color: rgba(255,255,255,.75);}
.history__stats b {display: block; font-family: var(--font-head); font-size: 24px; color: #fff;}
.history__bg {background: none;}
.history--scene .history__bg {background: linear-gradient(180deg, #0a1c42 0%, #16346a 30%, #3d4f85 46%, #9a6a86 56%, #e88f5e 62%, #1d4479 63%, #12305f 75%, #081a3c 100%);}
.history__bg::after {display: none;}
.history__overlay {position: absolute; inset: 0; z-index: 1;}
.history__sun,
.history__stars,
.history__ship,
.history__waves {z-index: 0;}
.history--image .history__overlay {z-index: 1;}
.history--image .history__ship,
.history--image .history__waves {z-index: 2;}
.tline::after {background: linear-gradient(90deg, var(--tl-line, #8fd0fb), #fff);}
.tl__dot::after {background: var(--tl-line, #8fd0fb); box-shadow: 0 0 10px var(--tl-line, #8fd0fb);}
.tl.is-active .tl__year,
.tl:hover .tl__year {color: var(--tl-line, #8fd0fb);}
.tl__more {display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .45s var(--ease), opacity .35s var(--ease), margin .35s;}
.tl__more > p {overflow: hidden; color: rgba(255,255,255,.92); font-size: 14px; line-height: 1.55;}
.tl:hover .tl__more,
.tl.is-open .tl__more,
.tl:focus-within .tl__more {grid-template-rows: 1fr; opacity: 1; margin-top: 4px;}
.tl__body p {margin: 0;}
.tl__body > p {color: rgba(255,255,255,.72);}
.tl:hover .tl__body > p,
.tl.is-open .tl__body > p {color: #fff;}
.tline {align-items: start;}
@media (max-width: 1100px) {
.tline {grid-template-columns: repeat(5, minmax(150px, 1fr));}
.tline-wrap {overflow-x: auto; padding: 28px 4px 10px; margin-top: -28px; scrollbar-width: thin;}
.history__head {grid-template-columns: 1fr; gap: 10px;}
}
@media (max-width: 767px) {
.history {padding: 60px 0 56px;}
.history__head {margin-bottom: 30px;}
.history__bg::after {background: linear-gradient(180deg, rgba(7, 24, 58, .85) 0%, rgba(7, 24, 58, .65) 50%, rgba(7, 24, 58, .9) 100%);}
.history__ship {left: 52%; top: 16%; width: 200px; opacity: .5;}
.history__sun {left: 72%; top: 24%;}
.tline-wrap {overflow: visible; padding: 0; margin: 0;}
.tline {grid-template-columns: 1fr; gap: 22px; padding-left: 0;}
.tline::before {top: 12px; bottom: 12px; left: 12px; right: auto; width: 2px; height: auto;}
.tline::after {top: 12px; left: 12px; width: 2px; height: calc((100% - 24px) * var(--progress, 0)); transition: height 1.4s var(--ease-out);}
.tl {display: grid; grid-template-columns: auto 1fr; column-gap: 16px;}
.tl__btn {display: contents;}
.tl__dot {grid-row: 1 / span 2;}
.tl__year {font-size: 24px; align-self: center;}
.tl__body {grid-column: 2; margin-top: 4px;}
.tline__ship {display: none;}
.history__foot {flex-direction: column; align-items: flex-start;}
}
@media (max-width: 767px) {
.tl__more {grid-template-rows: 0fr;}
}
.elementor-widget-sonay-history {width: 100%;}
.tline__ship .ic {width: 20px; height: 20px; filter: drop-shadow(0 0 6px rgba(143,208,251,.9));}

/* ---- v3 çizim: Tarihçe — gemi ikonu aktif noktanın ÜZERİNDE, başlık ile alt başlık aynı hizada ---- */
.history__head {grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 40px; row-gap: 0; align-items: center;}
.history__head > div {display: contents;}
.history__head .eyebrow {grid-column: 1 / -1; grid-row: 1;}
.history__head .history__title {grid-column: 1; grid-row: 2; margin: 0;}
.history__head .history__lead {grid-column: 2; grid-row: 2; align-self: center; margin: 0; padding: 2px 0 2px 32px; border-left: 1px solid rgba(255, 255, 255, .35); max-width: 520px;}
.tline__ship {top: -38px;}
@media (max-width: 1100px) {
.history__head {grid-template-columns: 1fr; row-gap: 10px;}
.history__head .history__lead {grid-column: 1; grid-row: 3; padding: 0; border-left: 0;}
}