/* RTC Tarihçe - Buffer Fix Split Version */

@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

.mulish-<uniquifier> {
	font-family: "Mulish", sans-serif;
	font-optical-sizing: auto;
	font-weight: <weight>;
	font-style: normal;
}
body {
	font-family: "Mulish", serif;
}
* {
	box-sizing: border-box;
}
.rtc-wrap {
	position:relative;
	display:block;
	width:100%;
	height:1067px;
	padding:0;
	background: 
    /* Sol üst köşedeki canlı mavi parlama */
    radial-gradient(circle at 20% 20%, rgba(0, 50, 240, 0.4) 0%, transparent 50%),
    /* Sağ ortadaki yumuşak gece mavisi parlama */
    radial-gradient(circle at 80% 50%, rgba(0, 30, 160, 0.5) 0%, transparent 60%),
    /* Arka planın genel koyu lacivert tonu */
    linear-gradient(135deg, #0a1931 0%, #000414 100%);
	overflow:hidden;
}
.rtc-scene {
	position:absolute;
	left:50%;
	top:0;
	width:1600px;
	height:1600px;
	transform:translateX(-50%) scale(1);
	transform-origin:top center;
	/*background:url('common/images/1bg.png') center/cover no-repeat;*/
	background:url(../images/1bg2.png) center/cover no-repeat;
	
	overflow:hidden;
	isolation:isolate;
}
.rtc-scene::after {
	content:'';
	position:absolute;
	inset:0;
	pointer-events:none;
	/*background:radial-gradient(circle at center, transparent 0 32%, rgba(1, 8, 45, .08) 74%, rgba(1, 8, 45, .16) 100%);*/
	z-index:1;
}
:root {
	--spin:116s;
	--cx:800px;
	--cy:640px;
}
.molecule-stage {
	position:absolute;
	left:var(--cx);
	top:var(--cy);
	width:910px;
	height:910px;
	transform:translate(-50%, -50%) scale(0.94);
	z-index:4;
	pointer-events:none;
	transform-origin:center center;
}
.glow {
	position:absolute;
	inset:0;
	border-radius:50%;
	mix-blend-mode:screen;
	opacity:.18;
	filter:blur(24px);
	transition:opacity .35s ease, filter .35s ease;
}
.glow.nco {
	background:radial-gradient(circle at 74% 18%, rgba(76, 151, 255, .95), transparent 12%), radial-gradient(circle at 82% 54%, rgba(76, 151, 255, .9), transparent 11%), radial-gradient(circle at 52% 10%, rgba(76, 151, 255, .72), transparent 10%);
}
.glow.polyester {
	background:radial-gradient(circle at 21% 71%, rgba(129, 229, 54, .95), transparent 13%), radial-gradient(circle at 13% 53%, rgba(255, 163, 12, .9), transparent 10%);
}
.glow.polyether {
	background:radial-gradient(circle at 73% 76%, rgba(24, 219, 232, .95), transparent 13%), radial-gradient(circle at 58% 86%, rgba(24, 219, 232, .82), transparent 10%);
}
.glow.uv {
	background:radial-gradient(circle at 16% 24%, rgba(197, 97, 255, .96), transparent 13%), radial-gradient(circle at 10% 39%, rgba(197, 97, 255, .8), transparent 10%);
}
.ring-rotator {
	position:absolute;
	inset:0;
	animation:ringSpin var(--spin) linear infinite;
}
@keyframes ringSpin {
	from {
	transform:rotate(0deg);
}
to {
	transform:rotate(360deg);
}
}
.ring-img, .ring-pulse {
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:contain;
	object-position:center;
}
.ring-img {
	filter:drop-shadow(0 0 14px rgba(91, 166, 255, .18)) saturate(1.08);
}
.ring-pulse {
	mix-blend-mode:screen;
	opacity:.46;
	filter:blur(1.4px) brightness(1.07) saturate(1.08);
	animation:ringPulse 3.2s ease-in-out infinite;
}
@keyframes ringPulse {
0%, 100% {
transform:scale(1);
opacity:.38;
}
50% {
transform:scale(1.018);
opacity:.62;
}
}
.center-liquid {
	position:absolute;
	left:50%;
	top:50%;
	width:505px;
	transform:translate(-50%, -50%);
	z-index:5;
	filter:drop-shadow(0 0 16px rgba(157, 212, 255, .24));
	animation:liquidSpin var(--spin) linear infinite;
	transform-origin:center center;
}
@keyframes liquidSpin {
from {
transform:translate(-50%, -50%) rotate(0deg);
}
to {
	transform:translate(-50%, -50%) rotate(360deg);
}
}
.center-logo {
	position:absolute;
	left:50%;
	top:49.5%;
	width:180px;
	transform:translate(-50%, -50%);
	z-index:6;
	filter:drop-shadow(0 2px 10px rgba(0, 0, 0, .22));
}
.timeline-orbit {
	position:absolute;
	left:var(--cx);
	top:var(--cy);
	width:1040px;
	height:1040px;
	transform:translate(-50%, -50%) scale(0.94);
	transform-origin:center center;
	z-index:10;
	pointer-events:none;
	animation:orbitSpin var(--spin) linear infinite;
}
@keyframes orbitSpin {
from {
transform:translate(-50%, -50%) scale(0.94) rotate(0deg);
}
to {
	transform:translate(-50%, -50%) scale(0.94) rotate(360deg);
}
}
.timeline-item {
	position:absolute;
	left:50%;
	top:50%;
	width:290px;
	pointer-events:auto;
	z-index:12;
--c:#fff;
--tx:0px;
--ty:0px;
	transform:translate(-50%, -50%) translate(var(--tx), var(--ty));
}
.timeline-item .content {
	position:relative;
	transform-origin:center center;
	animation:counterSpin var(--spin) linear infinite;
transition:transform .3s ease, filter .3s ease;
}
@keyframes counterSpin {
from {
transform:rotate(0deg);
}
to {
	transform:rotate(-360deg);
}
}
.timeline-item:hover {
	z-index:80;
}
.timeline-item:hover .content {
	transform:scale(1.03);
	filter:drop-shadow(0 6px 14px rgba(0, 0, 0, .28)) drop-shadow(0 0 16px color-mix(in srgb, var(--c) 78%, white 22%));
}
.timeline-item .year {
	display:inline-block;
	font-size:54px;
	font-weight:800;
	line-height:1;
	color:var(--c);
	margin-bottom:8px;
	text-shadow:0 4px 10px rgba(0, 0, 0, .35), 0 0 14px rgba(255, 255, 255, .08);
	filter:drop-shadow(0 3px 8px rgba(0, 0, 0, .28));
}
.timeline-item .desc {
	max-height:0;
	overflow:hidden;
	opacity:0;
	transform:translateY(10px);
transition:max-height .35s ease, opacity .35s ease, transform .35s ease;
	color:#fff;
	font-size:17px;
	line-height:1.45;
}
.timeline-item:hover .desc {
	max-height:220px;
	opacity:1;
	transform:translateY(0);
}
.timeline-item .titlebox {
	position:relative;
}
.timeline-item[data-segment="nco"] {
--c:#63a5ff;
}
.timeline-item[data-segment="polyester"] {
--c:#95e94c;
}
.timeline-item[data-segment="polyether"] {
--c:#17dbe7;
}
.timeline-item[data-segment="uv"] {
--c:#c76bff;
}
.connector {
	position:absolute;
	inset:0;
	pointer-events:none;
	z-index:-1;
}
.connector-line {
	position:absolute;
	left:0;
	top:0;
	width:var(--line-l);
	border-top:2px dotted var(--c);
	opacity:.58;
	transform-origin:left center;
	transform:rotate(var(--line-a));
	filter:drop-shadow(0 0 6px var(--c));
transition:width .3s ease, opacity .3s ease, filter .3s ease;
}
.connector-dot {
	position:absolute;
	left:var(--dot-l);
	top:var(--dot-t);
	width:8px;
	height:8px;
	border-radius:50%;
	background:var(--c);
	box-shadow:0 0 12px var(--c), 0 0 20px rgba(255, 255, 255, .18);
transition:transform .3s ease, box-shadow .3s ease;
}
.timeline-item:hover .connector-line {
	width:calc(var(--line-l) + 18px);
	opacity:1;
	filter:drop-shadow(0 0 10px var(--c)) drop-shadow(0 0 18px var(--c));
}
.timeline-item:hover .connector-dot {
	transform:scale(1.6);
	box-shadow:0 0 14px var(--c), 0 0 26px var(--c), 0 0 34px rgba(255, 255, 255, .25);
}
.timeline-item .desc {
	display:none;
}
.year-preview {
	position:absolute;
	opacity:0;
	visibility:hidden;
	pointer-events:none;
	transform:translateY(8px) scale(.96);
 transition:opacity .28s ease, transform .28s ease, visibility .28s ease;
	z-index:25;
}
.year-preview img {
	display:block;
	width:480px;
	max-width:none;
	height:auto;
	border-radius:18px;
	filter:drop-shadow(0 10px 22px rgba(0, 0, 0, .38)) drop-shadow(0 2px 8px rgba(0, 0, 0, .28));
}
.timeline-item:hover .year-preview {
	opacity:1;
	visibility:visible;
	transform:translateY(0) scale(1);
}
.item-2009 .year-preview {
	left:-112px;
	top:96px;
}
.item-2012 .year-preview {
	right:86px;
	top:110px;
}
.item-2014 .year-preview {
	right:110px;
	top:42px;
}
.item-2015 .year-preview {
	right:-50px;
	top:88px;
}
.item-2017 .year-preview {
	left:-92px;
	top:112px;
}
.item-2018 .year-preview {
	left:-8px;
	top:112px;
}
.item-2022 .year-preview {
	left:6px;
	top:36px;
}
.item-2025 .year-preview {
	left:-22px;
	top:118px;
}
@media (max-width: 900px) {
 .year-preview img {
width:300px;
max-width:none;
border-radius:14px;
}
 .item-2009 .year-preview {
left:-34px;
top:62px;
}
 .item-2012 .year-preview {
right:26px;
top:72px;
}
 .item-2014 .year-preview {
right:28px;
top:28px;
}
 .item-2015 .year-preview {
right:28px;
top:28px;
}
 .item-2017 .year-preview {
left:-30px;
top:64px;
}
 .item-2018 .year-preview {
left:2px;
top:64px;
}
 .item-2022 .year-preview {
left:2px;
top:24px;
}
 .item-2025 .year-preview {
left:0px;
top:72px;
}
}
.item-2009 {
--tx:40px;
--ty:-444px;
--line-l:92px;
--line-a:112deg;
--dot-l:-30px;
--dot-t:72px;
}
.item-2009 .connector {
	left:-18px;
	top:96px;
}
.item-2012 {
--tx:296px;
--ty:-352px;
--line-l:102px;
--line-a:118deg;
--dot-l:-45px;
--dot-t:85px;
	width:320px;
}
.item-2012 .connector {
	left:-14px;
	top:112px;
}
.item-2014 {
--tx:460px;
--ty:0px;
--line-l:94px;
--line-a:179deg;
--dot-l:-98px;
--dot-t:-4px;
	width:255px;
}
.item-2014 .connector {
	left:-8px;
	top:92px;
}
.item-2015 {
--tx:352px;
--ty:296px;
--line-l:104px;
--line-a:215deg;
--dot-l:-92px;
--dot-t:-64px;
	width:320px;
}
.item-2015 .connector {
	left:-12px;
	top:74px;
}
.item-2017 {
--tx:0px;
--ty:420px;
--line-l:102px;
--line-a:258deg;
--dot-l:-22px;
--dot-t:-100px;
	width:330px;
}
.item-2017 .connector {
	left:24px;
	top:-4px;
}
.item-2018 {
--tx:-296px;
--ty:352px;
--line-l:88px;
--line-a:-34deg;
--dot-l:70px;
--dot-t:-56px;
	width:250px;
}
.item-2018 .connector {
	left:194px;
	top:4px;
}
.item-2022 {
--tx:-458px;
--ty:40px;
--line-l:112px;
--line-a:0deg;
--dot-l:106px;
--dot-t:-4px;
	width:320px;
}
.item-2022 .connector {
	left:198px;
	top:88px;
}
.item-2025 {
--tx:-352px;
--ty:-296px;
--line-l:98px;
--line-a:46deg;
--dot-l:72px;
--dot-t:68px;
	width:320px;
}
.item-2025 .connector {
	left:206px;
	top:120px;
}
.rtc-scene.segment-active-nco .glow.nco, .rtc-scene.segment-active-polyester .glow.polyester, .rtc-scene.segment-active-polyether .glow.polyether, .rtc-scene.segment-active-uv .glow.uv {
	opacity:.50;
	filter:blur(16px);
}
.info-note {
	position:absolute;
	left:40px;
	bottom:36px;
	font-size:11px;
	color:rgba(255, 255, 255, .72);
	background:rgba(4, 16, 70, .34);
	backdrop-filter:blur(6px);
	padding:8px 10px;
	border-radius:10px;
	border:1px solid rgba(124, 172, 255, .14);
	z-index:12;
}
.legend-panel {
	position:absolute;
	left:0px;
	bottom:40px;
	width:430px;
	z-index:11;
	pointer-events:none;
	filter:drop-shadow(0 4px 16px rgba(0, 0, 0, .28));
}
.legend-panel img {
	display:block;
	width:100%;
	height:auto;
	object-fit:contain;
}
 @media (max-width: 900px) {
}
 @media (max-width: 900px) {
 .timeline-orbit {
transform:translate(-50%, -50%) scale(.70);
animation:orbitSpinMobile var(--spin) linear infinite;
}
 @keyframes orbitSpinMobile {
from {
transform:translate(-50%, -50%) scale(.70) rotate(0deg);
}
to {
transform:translate(-50%, -50%) scale(.70) rotate(360deg);
}
}
 .molecule-stage {
transform:translate(-50%, -50%) scale(.76);
}
 .timeline-item .year {
font-size:38px;
}
 .timeline-item .desc {
font-size:14px;
}
 .center-liquid {
width:420px;
}
 .center-logo {
width:162px;
top:51.4%;
}
 .legend-panel {
width:280px;
left:0px;
bottom:0px;
}
}
 @media (max-width: 900px) {
}
.rtc-history-title {
	position:absolute;
	left:50%;
	top:28px;
	transform:translateX(-50%);
	z-index:999;
	color:#ffffff;
	font-size:44px;
	font-weight:900;
	letter-spacing:2px;
	line-height:1;
	text-align:center;
	text-shadow:
 0 6px 18px rgba(0, 0, 0, .55), 0 0 18px rgba(90, 160, 255, .38), 0 0 36px rgba(90, 160, 255, .18);
	pointer-events:none;
}
 @media (max-width: 900px) {
 .rtc-history-title {
 top:16px;
 font-size:32px;
 letter-spacing:1px;
}
}

/* 2012, 2014 ve 2015 hover görselleri daha büyük */
/*.item-2012 .year-preview img,
.item-2014 .year-preview img,
.item-2015 .year-preview img{
  width:540px;
}*/

@media (max-width: 900px) {
 .item-2012 .year-preview img, .item-2014 .year-preview img, .item-2015 .year-preview img {
 width:340px;
}
}
/* V4 - Responsive'de tarihlerin daima düz kalması için timeline dönüşü JS ile kontrol edilir */
.timeline-orbit {
	animation:none !important;
}
.timeline-item .content {
	animation:none !important;
	transform:rotate(0deg) scale(1);
	transform-origin:center center !important;
 transition:filter .3s ease;
}
/* Eski hover transform kuralı varsa JS dönüşünü bozmasın */
.timeline-item:hover .content {
	transform:none;
}

/* Mobilde eski orbit/counter kuralları devre dışı */
@media (max-width: 900px) {
 .timeline-orbit {
 animation:none !important;
}
 .timeline-item .content {
 animation:none !important;
 transform-origin:center center !important;
}
}
.item-2026 {
--tx:-185px;
--ty:-465px;
--line-l:96px;
--line-a:72deg;
--dot-l:78px;
--dot-t:82px;
	width:370px;
}
.item-2026 .connector {
	left:238px;
	top:112px;
}
.item-2026 .year-preview {
	left:34px;
	top:116px;
}

/*.item-2026 .year-preview img{ width:540px;}*/

@media (max-width: 900px) {
 .item-2026 .year-preview {
left:4px;
top:72px;
}
 .item-2026 .year-preview img {
 width:340px;
}
}
/* FINAL: Başlık görseli büyütüldü, alt yapı ortak merkezden aşağı alındı */
.rtc-history-title {
	top:8px !important;
	width:100%;
	font-size:0 !important;
	line-height:0 !important;
}
.rtc-history-title img {
	display:block;
	width:430px;
	max-width:82vw;
	height:auto;
	margin:0 auto;
	object-fit:contain;
	filter:drop-shadow(0 6px 18px rgba(0, 0, 0, .28));
}
 @media (max-width: 900px) {
 .rtc-history-title {
 top:8px !important;
}
 .rtc-history-title img {
 width:310px;
 max-width:78vw;
}
}
