apex

/* ================= Temel Ayarlar ================= */
:root {
–bg-color: #f0f4f8;
–text-color: #2d3436;
–menu-bg: #0984e3;
–menu-hover: #74b9ff;
–heading-color: #636e72;
–accent-color: #fd79a8;
–card-bg: #ffffff;
–card-shadow: rgba(0,0,0,0.12);
–transition-speed: 0.4s;
}

/* ================= Body ve Fontlar ================= */
body {
font-family: ‘Lato’, sans-serif;
background: var(–bg-color);
color: var(–text-color);
margin: 0;
padding: 0;
}
h1, h2, h3 {
font-family: ‘Playfair Display’, serif;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
transition: transform var(–transition-speed) ease, color var(–transition-speed) ease;
}

/* ================= Header ================= */
header {
height: 160px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 50px;
background: linear-gradient(135deg, #6c5ce7, #00cec9);
clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%);
box-shadow: 0 15px 45px var(–card-shadow);
}

/* ================= Menü ================= */
nav.main-nav {
display: flex;
gap: 40px;
font-family: ‘Montserrat’, sans-serif;
font-weight: 700;
}
nav.main-nav a {
color: #fff;
position: relative;
padding: 12px 0;
transition: color var(–transition-speed) ease;
}
nav.main-nav a::before {
content: ”;
position: absolute;
width: 0;
height: 2px;
background: var(–accent-color);
bottom: -5px;
left: 0;
transition: width var(–transition-speed) ease;
}
nav.main-nav a:hover::before {
width: 100%;
}
nav.main-nav a:hover {
color: var(–menu-hover);
}

/* ================= Post Kartları ================= */
.post-container {
background: var(–card-bg);
border-radius: 25px;
padding: 30px;
margin-bottom: 40px;
box-shadow: 0 20px 50px var(–card-shadow);
position: relative;
transition: transform var(–transition-speed) ease, box-shadow var(–transition-speed) ease;
}
.post-container:hover {
transform: translateY(-8px) rotate(-1deg);
box-shadow: 0 30px 60px rgba(0,0,0,0.2);
}
.post-container:hover h2::after {
content: ” → Detayları Oku”;
font-size: 14px;
color: var(–accent-color);
display: inline-block;
margin-left: 10px;
animation: fadeIn 0.4s forwards;
}
@keyframes fadeIn {
from {opacity:0;}
to {opacity:1;}
}

/* ================= Butonlar ================= */
button, .button, input[type=”submit”] {
padding: 15px 40px;
font-family: ‘Montserrat’, sans-serif;
font-weight: 700;
border: none;
border-radius: 25px 10px 25px 10px;
background: linear-gradient(135deg, #00cec9, #6c5ce7);
color: #fff;
cursor: pointer;
transition: transform var(–transition-speed) ease, background var(–transition-speed) ease;
}
button:hover, .button:hover, input[type=”submit”]:hover {
transform: scale(1.1) rotate(2deg);
background: linear-gradient(135deg, #6c5ce7, #fd79a8);
}

/* ================= Sidebar ================= */
.sidebar {
background: #dfe6e9;
border-radius: 20px;
padding: 30px;
}
.sidebar .widget-title {
font-weight: 700;
color: #0984e3;
}

/* ================= Footer ================= */
footer {
background: linear-gradient(135deg, #00cec9, #6c5ce7);
padding: 60px 20px;
text-align: center;
clip-path: polygon(0 20%, 100% 0%, 100% 100%, 0 100%);
color: #fff;
}
footer a {color:#fff; transition: color 0.3s;}
footer a:hover {color: var(–accent-color);}

/* ================= Kayan Başlıklar ================= */
.topic-marquee {
overflow:hidden;
white-space:nowrap;
background:#0984e3;
padding:18px 0;
border-radius:12px;
margin-bottom:30px;
}
.topic-marquee span {
display:inline-block;
padding-left:100%;
animation: scrollTopics 18s linear infinite;
font-weight:700;
color:#fff;
margin-right:60px;
transition: transform 0.3s, color 0.3s;
}
.topic-marquee span:hover {
transform: scale(1.2) rotate(-1deg);
color: #ffeaa7;
}
@keyframes scrollTopics {
0% {transform: translateX(0);}
100% {transform: translateX(-100%);}
}

/* ================= Responsive ================= */
@media(max-width:1024px){
nav.main-nav{ display:none; }
.post-container{ padding:25px; }
}
@media(max-width:768px){
.sidebar{ padding:20px; }
}