/* 
   KADİM2 OFFICIAL BRANDING CSS
   Premium Icy Blue SaaS-Style Aesthetic
*/

:root {
	--bg-dark: #02050a;
	--kadim-cyan: #7cf1ff; 
	--kadim-blue: #2c83b9; 
	--kadim-deep: #0a192f;
	--text-gray: #b0b8c8;
	--ice-glow: rgba(124, 241, 255, 0.4);
	--kadim-blue-glow: rgba(44, 131, 185, 0.5);
	--glass-bg: rgba(8, 25, 45, 0.7);
	--premium-gradient: linear-gradient(135deg, var(--kadim-blue) 0%, var(--kadim-cyan) 100%);
}

/* Global Reset & Body */
html { scroll-behavior: smooth; }
body {
	background: #020408 !important;
	background-image: 
		radial-gradient(circle at 50% 0%, rgba(44, 131, 185, 0.15) 0%, transparent 50%),
		radial-gradient(circle at 100% 100%, rgba(124, 241, 255, 0.05) 0%, transparent 40%),
		#02050a !important;
	background-attachment: fixed !important;
	color: #fff;
	font-family: 'Montserrat', sans-serif;
	margin: 0; padding: 0;
	line-height: 1.6;
}

/* Custom Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-dark); }
::-webkit-scrollbar-thumb { background: var(--kadim-blue); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--kadim-cyan); }

/* Common Components */

/* --- FOOTER --- */
.kadim-footer {
	background: #02050a; padding: 80px 0 30px 0; border-top: 1px solid rgba(124, 241, 255, 0.1);
	color: var(--text-gray); position: relative; overflow: hidden;
}
.kadim-footer::before {
	content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
	width: 80%; height: 1px; background: linear-gradient(90deg, transparent, var(--kadim-cyan), transparent);
}
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 60px; margin-bottom: 60px; }
.footer-col h4 { color: #fff; font-size: 16px; font-weight: 900; text-transform: uppercase; margin-bottom: 25px; letter-spacing: 1px; }
.footer-about p { line-height: 1.8; font-size: 14px; margin-bottom: 25px; }
.footer-logo img { height: 45px; margin-bottom: 20px; filter: drop-shadow(0 0 10px var(--ice-glow)); }

.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 12px; }
.footer-links a { color: var(--text-gray); text-decoration: none; font-size: 14px; transition: 0.3s; cursor: pointer; }
.footer-links a:hover { color: var(--kadim-cyan); padding-left: 5px; }

.footer-contact li { display: flex; align-items: flex-start; gap: 15px; margin-bottom: 20px; font-size: 14px; }
.footer-contact .icon { color: var(--kadim-cyan); min-width: 20px; }

.footer-socials { display: flex; gap: 15px; margin-top: 25px; }
.social-link {
	width: 40px; height: 40px; border-radius: 10px; background: rgba(255,255,255,0.05);
	display: flex; align-items: center; justify-content: center; color: #fff;
	border: 1px solid rgba(124, 241, 255, 0.1); transition: 0.3s; text-decoration: none !important;
}
.social-link:hover { background: var(--kadim-cyan); color: #02050a; transform: translateY(-3px); box-shadow: 0 5px 15px var(--ice-glow); }

.footer-bottom {
	border-top: 1px solid rgba(255,255,255,0.05); padding-top: 30px;
	display: flex; justify-content: space-between; align-items: center; font-size: 13px;
}
.payment-icons { display: flex; gap: 10px; opacity: 0.5; filter: grayscale(1); transition: 0.3s; }
.payment-icons:hover { opacity: 1; filter: grayscale(0); }

@media (max-width: 991px) {
	.footer-grid { grid-template-columns: 1fr; gap: 40px; text-align: center; }
	.footer-contact li { justify-content: center; }
	.footer-socials { justify-content: center; }
	.footer-bottom { flex-direction: column; gap: 20px; text-align: center; }
}

/* --- TOP BAR --- */
.rosso-top-bar {
	position: fixed; top: 0; left: 0; width: 100%; z-index: 10000;
	background: rgba(2, 5, 10, 0.7);
	backdrop-filter: blur(20px);
	border-bottom: 1px solid rgba(124, 241, 255, 0.15);
	text-align: center; padding: 10px 0;
	box-shadow: 0 10px 40px rgba(0,0,0,0.8);
	display: flex; justify-content: center; align-items: center; gap: 20px;
}
.top-bar-item { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 13px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.top-bar-item span.icon { color: var(--kadim-cyan); font-size: 10px; filter: drop-shadow(0 0 5px var(--kadim-cyan)); }

.top-bar-link { 
	display: inline-block; background: var(--premium-gradient); color: #02050a !important; padding: 6px 22px; border-radius: 50px;
	font-weight: 900; text-decoration: none !important; transition: 0.3s; 
	box-shadow: 0 0 20px var(--ice-glow); border: 1px solid #fff; font-size: 12px;
}
.top-bar-link:hover { transform: scale(1.05); box-shadow: 0 0 30px var(--kadim-cyan); }

/* --- SIDE MENU (LEFT) --- */
.sol_menu { position: fixed; top: 50%; transform: translateY(-50%); left: 30px; z-index: 10001; }
.sol_menu ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 15px; }

.nav-item {
	display: flex; align-items: center; text-decoration: none !important;
	background: var(--glass-bg); backdrop-filter: blur(15px);
	border: 1px solid rgba(124, 241, 255, 0.1); border-radius: 50px;
	width: 60px; height: 60px; padding: 0; overflow: hidden;
	transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	box-shadow: 0 10px 30px rgba(0,0,0,0.5); position: relative;
}

.nav-item .icon-box {
	min-width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;
	color: var(--kadim-cyan); transition: 0.3s;
}

.nav-item .icon-box svg { width: 26px; height: 26px; filter: drop-shadow(0 0 8px var(--ice-glow)); }

.nav-label {
	color: #fff; font-size: 13px; font-weight: 800; letter-spacing: 1px;
	padding-right: 25px; white-space: nowrap; opacity: 0; transform: translateX(-10px); transition: 0.4s ease;
}

.nav-item:hover { width: 190px; background: rgba(10, 25, 45, 0.9); border-color: var(--kadim-cyan); box-shadow: 0 0 30px var(--ice-glow); }
.nav-item:hover .icon-box { transform: rotate(360deg); color: #fff; }
.nav-item:hover .nav-label { opacity: 1; transform: translateX(0); }

/* Item Specific Colors/Glows */
.nav-item.home:hover { box-shadow: 0 0 30px rgba(44, 131, 185, 0.6); }
.nav-item.register:hover { box-shadow: 0 0 30px rgba(124, 241, 255, 0.6); }
.nav-item.whatsapp:hover { box-shadow: 0 0 30px rgba(37, 211, 102, 0.4); }
.nav-item.whatsapp:hover .icon-box { color: #25d366; }
.nav-item.discord:hover { box-shadow: 0 0 30px rgba(114, 137, 218, 0.4); }
.nav-item.discord:hover .icon-box { color: #7289da; }

/* --- CTA BUTTONS --- */
.bottom-cta-btn {
	display: inline-block; position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 999999;
	background: var(--premium-gradient); color: #02050a; padding: 18px 60px; border-radius: 50px; border: none;
	font-size: 18px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; text-decoration: none;
	box-shadow: 0 15px 40px rgba(0,0,0,0.6), 0 0 30px var(--ice-glow);
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.bottom-cta-btn:hover { color: #02050a; transform: translateX(-50%) translateY(-10px) scale(1.05); box-shadow: 0 25px 50px rgba(0,0,0,0.8), 0 0 50px var(--kadim-cyan); text-decoration: none; }

/* --- MODALS --- */
.modal { text-align: center; padding: 0 !important; }
.modal:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -4px; }
.modal-dialog { display: inline-block; text-align: left; vertical-align: middle; width: 100%; max-width: 600px; margin: 20px auto !important; }

.modal-content.rosso-modal {
	background: rgba(2, 5, 10, 0.95) !important; backdrop-filter: blur(20px) !important;
	border: 1px solid var(--kadim-blue) !important; border-radius: 20px !important; color: #fff !important;
	box-shadow: 0 0 100px rgba(0,0,0,1), 0 0 30px var(--ice-glow) !important;
	position: relative; overflow: visible;
}
.modal-content.rosso-modal .modal-header { border-bottom: 1px solid rgba(124, 241, 255, 0.1); padding: 30px; position: relative; }
.modal-content.rosso-modal .modal-title { color: var(--kadim-cyan); font-weight: 900; text-transform: uppercase; font-size: 24px; letter-spacing: 1px; }
.modal-content.rosso-modal .close { color: #fff; opacity: 0.8; font-size: 28px; transition: 0.3s; margin-top: -5px; }
.modal-content.rosso-modal .close:hover { color: var(--kadim-cyan); opacity: 1; transform: rotate(90deg); }
.modal-content.rosso-modal .modal-body { padding: 35px; font-size: 15px; line-height: 1.8; color: #d0d5e0; }
.modal-content.rosso-modal b { color: var(--kadim-cyan); }

/* --- VIDEO POPUP --- */
.video-thumbnail-box { position: relative; cursor: pointer; border-radius: 8px; overflow: hidden; border: 2px solid var(--kadim-cyan); box-shadow: 0 15px 40px rgba(0,0,0,0.9); transition: all 0.3s ease; }
.video-thumbnail-box:hover img { transform: scale(1.05); }
.video-thumbnail-box:hover .video-overlay { background: rgba(0,0,0,0.3); }
.video-thumbnail-box:hover .play-icon { transform: scale(1.1); filter: drop-shadow(0px 0px 25px var(--kadim-cyan)); }

/* --- UI COMPONENTS --- */
.rewards-title { font-size: 42px; margin-bottom: 10px; color: #fff; font-weight: 900; text-transform: uppercase; text-shadow: 0 0 20px var(--ice-glow); padding: 0 20px; }
.rewards-desc { color: var(--text-gray); font-size: 16px; max-width: 800px; margin: 0 auto; line-height: 1.7; }
@media (max-width: 768px) { .rewards-title { font-size: 28px; } }

.rosso-divider { width: 60%; max-width: 800px; height: 1px; margin: 80px auto; background: linear-gradient(90deg, transparent 0%, var(--kadim-blue) 50%, transparent 100%); position: relative; }
.rosso-divider::after { content: '✦'; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); color: var(--kadim-cyan); font-size: 20px; background: #02050a; padding: 0 20px; text-shadow: 0 0 15px var(--kadim-cyan); }

/* WIKI / INFO BLOCKS */
.wiki-container { max-width: 1300px; margin: 80px auto; padding: 0 120px; text-align: center; }
@media (max-width: 1600px) { .wiki-container { padding: 0 100px; } }
@media (max-width: 1200px) { .wiki-container { padding: 0 40px; } }
@media (max-width: 1024px) { .wiki-container { padding: 0 20px; } }

.wiki-item {
	display: flex; align-items: center; justify-content: space-between;
	background: var(--glass-bg); border: 1px solid rgba(124, 241, 255, 0.1); border-radius: 25px;
	box-shadow: 0 30px 60px rgba(0,0,0,0.5); overflow: hidden; transition: 0.6s; margin: 0 auto 70px auto; 
	backdrop-filter: blur(20px); max-width: 1100px; width: 100%;
}
.wiki-item:hover { border-color: var(--kadim-cyan); box-shadow: 0 40px 80px var(--ice-glow); transform: translateY(-10px); }
.wiki-item:nth-child(even) { flex-direction: row-reverse; }
.wiki-img-wrapper { flex: 0 0 50%; padding: 40px; }
.wiki-img-wrapper img { width: 100%; border-radius: 15px; border: 1px solid rgba(124, 241, 255, 0.2); box-shadow: 0 20px 50px rgba(0,0,0,0.8); transition: 0.8s; }
.wiki-content { flex: 0 0 50%; padding: 40px 60px; text-align: left; position: relative; }
.wiki-content p { color: #fff; font-size: 16px; line-height: 1.8; margin-bottom: 25px; opacity: 0.9; }

.wiki-collapse-toggle {
	display: flex; justify-content: space-between; align-items: center;
	color: var(--kadim-cyan); font-size: 24px; font-weight: 900;
	text-transform: uppercase; text-decoration: none !important;
	padding: 20px 30px; border-bottom: 2px solid rgba(124, 241, 255, 0.2);
	margin-bottom: 25px; transition: 0.3s; cursor: pointer;
}
@media (max-width: 768px) { .wiki-collapse-toggle { font-size: 18px; padding: 15px 20px; } }
.wiki-collapse-toggle:hover { color: #fff; border-color: var(--kadim-cyan); }
.wiki-toggle-icon { font-size: 14px; transition: 0.4s; }
.wiki-collapse-toggle:not(.collapsed) .wiki-toggle-icon { transform: rotate(180deg); }

/* GRIDS & CARDS */
.odul-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 25px; margin-top: 30px; text-align: left; }
.odul-card {
	background: var(--glass-bg); border: 1px solid rgba(124, 241, 255, 0.1); border-left: 4px solid var(--kadim-blue);
	border-radius: 12px; padding: 30px; box-shadow: 0 15px 40px rgba(0,0,0,0.5); transition: 0.3s;
}
.odul-liste { list-style: none; padding: 0; margin: 0; }
.odul-liste li { color: #d0d5e0; font-size: 15px; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; }
.odul-liste li span { color: #fff; font-weight: 900; font-size: 18px; text-shadow: 0 0 10px var(--kadim-cyan); }

.yayinci-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-bottom: 30px; }
.yayinci-card {
	background: var(--glass-bg); border: 1px solid rgba(124, 241, 255, 0.1); border-radius: 20px; padding: 25px 15px;
	text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.4); transition: 0.3s;
}
.yayinci-img { width: 90px; height: 90px; border-radius: 50%; border: 3px solid var(--kadim-blue); margin: 0 auto 15px auto; object-fit: cover; box-shadow: 0 0 20px var(--ice-glow); transition: 0.3s; }
.yayinci-name { color: #fff; font-size: 14px; font-weight: 800; text-transform: uppercase; margin: 0 0 10px 0; }
.yayinci-badge { display: inline-block; background: var(--premium-gradient); color: #02050a; font-size: 10px; font-weight: 900; padding: 4px 12px; border-radius: 6px; }

.bento-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; margin-bottom: 30px; }
.bento-card { background: var(--glass-bg); border: 1px solid rgba(124, 241, 255, 0.15); border-radius: 20px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.6); transition: all 0.5s; }
.bento-header { height: 180px; overflow: hidden; position: relative; }
.bento-bg { width: 100%; height: 100%; background-size: cover; background-position: center; transition: 0.8s; }
.bento-body { padding: 30px; }
.bento-title { color: var(--kadim-cyan); font-size: 18px; font-weight: 900; text-transform: uppercase; margin-bottom: 15px; }
.bento-desc { color: #b0c0d0; font-size: 14px; line-height: 1.8; }

/* ACCORDION */
.rosso-accordion .panel { background: var(--glass-bg) !important; backdrop-filter: blur(15px); border: 1px solid rgba(124, 241, 255, 0.1) !important; border-radius: 15px !important; margin-bottom: 15px; overflow: hidden; }
.rosso-accordion .panel-heading { padding: 0; background: transparent !important; }
.rosso-accordion .panel-title a { display: block; padding: 22px 30px; color: #fff !important; font-size: 16px; font-weight: 700; text-decoration: none !important; position: relative; transition: 0.3s; }
.rosso-accordion .panel-title a:hover { background: rgba(44, 131, 185, 0.15); color: var(--kadim-cyan) !important; }
.rosso-accordion .panel-body { border-top: 1px solid rgba(124, 241, 255, 0.1) !important; padding: 25px 30px; color: #b0c0d0; line-height: 1.8; }

/* RESPONSIVE COMMON */
@media (max-width: 768px) {
	.wiki-item { flex-direction: column !important; }
	.wiki-img-wrapper, .wiki-content { flex: 0 0 100%; width: 100%; padding: 25px; }
	.odul-grid, .bento-grid, .yayinci-grid { grid-template-columns: 1fr !important; }
}