|
|
| 1. satır: |
1. satır: |
| /* ============================
| |
| HOMEPAGE SPECIFIC STYLES
| |
| ============================ */
| |
|
| |
|
| /* Homepage wrapper */
| |
| .fm-homepage {
| |
| max-width: 1400px;
| |
| margin: 0 auto;
| |
| }
| |
|
| |
| /* ============================
| |
| HERO BANNER
| |
| ============================ */
| |
| .hero-banner {
| |
| background: linear-gradient(
| |
| 135deg,
| |
| rgba(34, 178, 76, 0.15) 0%,
| |
| rgba(22, 27, 34, 0.95) 100%
| |
| );
| |
| border: 2px solid rgba(34, 178, 76, 0.3);
| |
| border-radius: var(--radius-xl);
| |
| padding: var(--space-3xl) var(--space-2xl);
| |
| margin-bottom: var(--space-2xl);
| |
| text-align: center;
| |
| box-shadow: var(--shadow-lg);
| |
| }
| |
|
| |
| .hero-icon {
| |
| font-size: 4rem;
| |
| margin-bottom: var(--space-xl);
| |
| filter: drop-shadow(0 4px 12px rgba(34, 178, 76, 0.3));
| |
| animation: float 3s ease-in-out infinite;
| |
| }
| |
|
| |
| @keyframes float {
| |
| 0%, 100% { transform: translateY(0); }
| |
| 50% { transform: translateY(-10px); }
| |
| }
| |
|
| |
| .hero-title {
| |
| font-size: 3rem;
| |
| font-weight: 800;
| |
| background: linear-gradient(135deg, #2ec75f, #22b24c);
| |
| -webkit-background-clip: text;
| |
| -webkit-text-fill-color: transparent;
| |
| background-clip: text;
| |
| margin: 0 0 var(--space-xl) 0;
| |
| letter-spacing: -0.02em;
| |
| border: none;
| |
| padding: 0;
| |
| }
| |
|
| |
| .hero-description {
| |
| font-size: var(--font-size-lg);
| |
| color: var(--fm-text-secondary);
| |
| max-width: 700px;
| |
| margin: 0 auto;
| |
| line-height: 1.8;
| |
| }
| |
|
| |
| /* ============================
| |
| QUICK START SECTION
| |
| ============================ */
| |
| .quick-start-section {
| |
| background: linear-gradient(
| |
| 135deg,
| |
| rgba(168, 85, 247, 0.12) 0%,
| |
| rgba(22, 27, 34, 0.9) 100%
| |
| );
| |
| border: 2px solid rgba(168, 85, 247, 0.25);
| |
| border-radius: var(--radius-xl);
| |
| padding: var(--space-2xl);
| |
| margin-bottom: var(--space-2xl);
| |
| box-shadow: var(--shadow-md);
| |
| }
| |
|
| |
| .section-header {
| |
| font-size: var(--font-size-2xl);
| |
| color: #a855f7;
| |
| margin: 0 0 var(--space-2xl) 0;
| |
| font-weight: 700;
| |
| display: flex;
| |
| align-items: center;
| |
| gap: var(--space-lg);
| |
| background: none;
| |
| border: none;
| |
| padding: 0;
| |
| }
| |
|
| |
| .section-icon {
| |
| font-size: 2.5rem;
| |
| }
| |
|
| |
| .quick-start-grid {
| |
| display: grid;
| |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
| |
| gap: var(--space-xl);
| |
| }
| |
|
| |
| .quick-card {
| |
| background: rgba(22, 27, 34, 0.8);
| |
| border: 1px solid rgba(255, 255, 255, 0.1);
| |
| border-radius: var(--radius-lg);
| |
| padding: var(--space-xl);
| |
| text-decoration: none;
| |
| display: block;
| |
| transition: all var(--transition-base);
| |
| cursor: pointer;
| |
| }
| |
|
| |
| .quick-card:hover {
| |
| transform: translateY(-8px);
| |
| border-color: rgba(34, 178, 76, 0.5);
| |
| box-shadow: 0 8px 24px rgba(34, 178, 76, 0.2);
| |
| text-shadow: none;
| |
| }
| |
|
| |
| .quick-card-icon {
| |
| font-size: 2.5rem;
| |
| margin-bottom: var(--space-lg);
| |
| }
| |
|
| |
| .quick-card-title {
| |
| color: var(--fm-green-primary);
| |
| margin: 0 0 var(--space-md) 0;
| |
| font-size: var(--font-size-xl);
| |
| font-weight: 700;
| |
| }
| |
|
| |
| .quick-card-desc {
| |
| color: var(--fm-text-muted);
| |
| font-size: var(--font-size-sm);
| |
| margin: 0;
| |
| line-height: 1.6;
| |
| }
| |
|
| |
| /* ============================
| |
| MAIN GRID LAYOUT
| |
| ============================ */
| |
| .main-grid {
| |
| display: grid;
| |
| grid-template-columns: 2fr 1fr;
| |
| gap: var(--space-2xl);
| |
| margin-bottom: var(--space-2xl);
| |
| }
| |
|
| |
| .main-content {
| |
| display: flex;
| |
| flex-direction: column;
| |
| gap: var(--space-2xl);
| |
| }
| |
|
| |
| /* ============================
| |
| CONTENT CARDS
| |
| ============================ */
| |
| .content-card {
| |
| border-radius: var(--radius-xl);
| |
| padding: var(--space-2xl);
| |
| box-shadow: var(--shadow-md);
| |
| transition: all var(--transition-base);
| |
| }
| |
|
| |
| .content-card:hover {
| |
| transform: translateY(-2px);
| |
| box-shadow: var(--shadow-lg);
| |
| }
| |
|
| |
| .card-blue {
| |
| background: linear-gradient(
| |
| 135deg,
| |
| rgba(59, 130, 246, 0.12) 0%,
| |
| rgba(22, 27, 34, 0.9) 100%
| |
| );
| |
| border: 2px solid rgba(59, 130, 246, 0.25);
| |
| }
| |
|
| |
| .card-blue:hover {
| |
| border-color: rgba(59, 130, 246, 0.4);
| |
| }
| |
|
| |
| .card-green {
| |
| background: linear-gradient(
| |
| 135deg,
| |
| rgba(34, 178, 76, 0.12) 0%,
| |
| rgba(22, 27, 34, 0.9) 100%
| |
| );
| |
| border: 2px solid rgba(34, 178, 76, 0.25);
| |
| }
| |
|
| |
| .card-green:hover {
| |
| border-color: rgba(34, 178, 76, 0.4);
| |
| }
| |
|
| |
| .card-header {
| |
| font-size: var(--font-size-2xl);
| |
| margin: 0 0 var(--space-xl) 0;
| |
| font-weight: 700;
| |
| display: flex;
| |
| align-items: center;
| |
| gap: var(--space-lg);
| |
| background: none;
| |
| border: none;
| |
| padding: 0;
| |
| }
| |
|
| |
| .card-blue .card-header {
| |
| color: #3b82f6;
| |
| }
| |
|
| |
| .card-green .card-header {
| |
| color: var(--fm-green-primary);
| |
| }
| |
|
| |
| .card-icon {
| |
| font-size: 2.5rem;
| |
| }
| |
|
| |
| /* ============================
| |
| SIDEBAR
| |
| ============================ */
| |
| .sidebar {
| |
| display: flex;
| |
| flex-direction: column;
| |
| gap: var(--space-xl);
| |
| }
| |
|
| |
| .sidebar-card {
| |
| background: rgba(22, 27, 34, 0.9);
| |
| border: 2px solid rgba(255, 255, 255, 0.1);
| |
| border-radius: var(--radius-lg);
| |
| padding: var(--space-xl);
| |
| box-shadow: var(--shadow-md);
| |
| transition: all var(--transition-base);
| |
| }
| |
|
| |
| .sidebar-card:hover {
| |
| box-shadow: var(--shadow-lg);
| |
| }
| |
|
| |
| .card-amber {
| |
| border-left: 5px solid #fbbf24;
| |
| }
| |
|
| |
| .card-cyan {
| |
| border-left: 5px solid #06b6d4;
| |
| }
| |
|
| |
| .card-pink {
| |
| border-left: 5px solid #ec4899;
| |
| }
| |
|
| |
| .card-gray {
| |
| border-left: 5px solid #64748b;
| |
| }
| |
|
| |
| .sidebar-header {
| |
| margin: 0 0 var(--space-lg) 0;
| |
| font-size: var(--font-size-xl);
| |
| font-weight: 700;
| |
| display: flex;
| |
| align-items: center;
| |
| gap: var(--space-md);
| |
| }
| |
|
| |
| .card-amber .sidebar-header {
| |
| color: #fbbf24;
| |
| }
| |
|
| |
| .card-cyan .sidebar-header {
| |
| color: #06b6d4;
| |
| }
| |
|
| |
| .card-pink .sidebar-header {
| |
| color: #ec4899;
| |
| }
| |
|
| |
| .card-gray .sidebar-header {
| |
| color: #94a3b8;
| |
| }
| |
|
| |
| .sidebar-icon {
| |
| font-size: 1.75rem;
| |
| }
| |
|
| |
| .sidebar-list {
| |
| list-style: none;
| |
| padding: 0;
| |
| margin: 0;
| |
| }
| |
|
| |
| .sidebar-list li {
| |
| margin: var(--space-sm) 0;
| |
| }
| |
|
| |
| .sidebar-list li a {
| |
| display: block;
| |
| padding: var(--space-md);
| |
| background: rgba(15, 20, 25, 0.5);
| |
| border: 1px solid rgba(255, 255, 255, 0.05);
| |
| border-left: 3px solid transparent;
| |
| border-radius: var(--radius-sm);
| |
| color: var(--fm-text-secondary);
| |
| font-weight: 500;
| |
| transition: all var(--transition-fast);
| |
| }
| |
|
| |
| .sidebar-list li a:hover {
| |
| background: rgba(34, 178, 76, 0.1);
| |
| border-left-color: var(--fm-green-primary);
| |
| color: var(--fm-green-bright);
| |
| transform: translateX(4px);
| |
| text-shadow: none;
| |
| }
| |
|
| |
| /* ============================
| |
| HOMEPAGE FOOTER
| |
| ============================ */
| |
| .homepage-footer {
| |
| margin-top: var(--space-3xl);
| |
| padding: var(--space-2xl);
| |
| border-top: 2px solid rgba(255, 255, 255, 0.12);
| |
| text-align: center;
| |
| color: var(--fm-text-muted);
| |
| font-size: var(--font-size-sm);
| |
| }
| |
|
| |
| .homepage-footer p {
| |
| margin: 0 0 var(--space-lg) 0;
| |
| }
| |
|
| |
| .footer-links {
| |
| margin-bottom: var(--space-md);
| |
| }
| |
|
| |
| .footer-links a {
| |
| color: var(--fm-green-primary);
| |
| font-weight: 600;
| |
| }
| |
|
| |
| .footer-year {
| |
| font-size: var(--font-size-xs);
| |
| font-style: italic;
| |
| color: var(--fm-text-tertiary);
| |
| }
| |
|
| |
| /* ============================
| |
| NAVBOX IN HOMEPAGE
| |
| ============================ */
| |
| .content-card .navbox {
| |
| margin: 0;
| |
| background: rgba(15, 20, 25, 0.6);
| |
| border: 1px solid rgba(79, 195, 247, 0.25);
| |
| }
| |
|
| |
| .content-card .navbox table {
| |
| background: transparent;
| |
| border: none;
| |
| margin: 0;
| |
| }
| |
|
| |
| .content-card .navbox tbody {
| |
| display: block;
| |
| }
| |
|
| |
| .content-card .navbox tr {
| |
| display: grid;
| |
| grid-template-columns: 180px 1fr;
| |
| gap: var(--space-lg);
| |
| padding: var(--space-lg);
| |
| border-bottom: 1px solid var(--fm-border-subtle);
| |
| align-items: start;
| |
| border-spacing: 0;
| |
| }
| |
|
| |
| .content-card .navbox tr:last-child {
| |
| border-bottom: none;
| |
| }
| |
|
| |
| .content-card .navbox th {
| |
| background: none;
| |
| color: var(--fm-green-primary);
| |
| font-weight: 600;
| |
| font-size: var(--font-size-sm);
| |
| padding: 0;
| |
| text-align: left;
| |
| border: none;
| |
| display: flex;
| |
| align-items: center;
| |
| gap: var(--space-sm);
| |
| }
| |
|
| |
| .content-card .navbox td {
| |
| padding: 0;
| |
| font-size: var(--font-size-sm);
| |
| border: none;
| |
| }
| |
|
| |
| .content-card .navbox a {
| |
| display: inline-block;
| |
| padding: var(--space-xs) var(--space-md);
| |
| margin: var(--space-xs);
| |
| background: rgba(79, 195, 247, 0.08);
| |
| border: 1px solid rgba(79, 195, 247, 0.15);
| |
| border-radius: var(--radius-sm);
| |
| color: var(--fm-text-secondary);
| |
| font-weight: 500;
| |
| transition: all var(--transition-fast);
| |
| }
| |
|
| |
| .content-card .navbox a:hover {
| |
| background: rgba(79, 195, 247, 0.15);
| |
| border-color: var(--fm-blue-accent);
| |
| color: var(--fm-blue-accent);
| |
| text-shadow: none;
| |
| transform: none;
| |
| }
| |
|
| |
| /* ============================
| |
| RESPONSIVE DESIGN
| |
| ============================ */
| |
| @media (max-width: 1200px) {
| |
| .main-grid {
| |
| grid-template-columns: 1fr;
| |
| }
| |
|
| |
| .sidebar {
| |
| display: grid;
| |
| grid-template-columns: repeat(2, 1fr);
| |
| gap: var(--space-xl);
| |
| }
| |
| }
| |
|
| |
| @media (max-width: 768px) {
| |
| .hero-title {
| |
| font-size: 2rem;
| |
| }
| |
|
| |
| .hero-description {
| |
| font-size: var(--font-size-base);
| |
| }
| |
|
| |
| .quick-start-grid {
| |
| grid-template-columns: 1fr;
| |
| }
| |
|
| |
| .sidebar {
| |
| grid-template-columns: 1fr;
| |
| }
| |
|
| |
| .content-card .navbox tr {
| |
| grid-template-columns: 1fr;
| |
| gap: var(--space-md);
| |
| }
| |
|
| |
| .content-card .navbox th {
| |
| padding-bottom: var(--space-sm);
| |
| border-bottom: 1px solid var(--fm-border-subtle);
| |
| }
| |
| }
| |
|
| |
| @media (max-width: 480px) {
| |
| .hero-banner {
| |
| padding: var(--space-2xl) var(--space-lg);
| |
| }
| |
|
| |
| .hero-icon {
| |
| font-size: 3rem;
| |
| }
| |
|
| |
| .hero-title {
| |
| font-size: 1.75rem;
| |
| }
| |
|
| |
| .section-header {
| |
| font-size: var(--font-size-xl);
| |
| flex-direction: column;
| |
| gap: var(--space-md);
| |
| text-align: center;
| |
| }
| |
|
| |
| .quick-start-section,
| |
| .content-card,
| |
| .sidebar-card {
| |
| padding: var(--space-xl);
| |
| }
| |
| }
| |
|
| |
| /* ============================
| |
| HIDE DEFAULT PAGE TITLE
| |
| ============================ */
| |
| body.page-Anasayfa .mw-page-title-main,
| |
| body.page-Main_Page .mw-page-title-main,
| |
| body.page-Anasayfa h1.firstHeading,
| |
| body.page-Main_Page h1.firstHeading {
| |
| display: none;
| |
| }
| |
|
| |
| /* ============================
| |
| ANIMATION
| |
| ============================ */
| |
| @keyframes fadeInUp {
| |
| from {
| |
| opacity: 0;
| |
| transform: translateY(20px);
| |
| }
| |
| to {
| |
| opacity: 1;
| |
| transform: translateY(0);
| |
| }
| |
| }
| |
|
| |
| .hero-banner,
| |
| .quick-start-section,
| |
| .content-card,
| |
| .sidebar-card {
| |
| animation: fadeInUp 0.5s ease-out backwards;
| |
| }
| |
|
| |
| .hero-banner { animation-delay: 0.1s; }
| |
| .quick-start-section { animation-delay: 0.2s; }
| |
| .content-card:nth-child(1) { animation-delay: 0.3s; }
| |
| .content-card:nth-child(2) { animation-delay: 0.4s; }
| |
| .sidebar-card:nth-child(1) { animation-delay: 0.35s; }
| |
| .sidebar-card:nth-child(2) { animation-delay: 0.4s; }
| |
| .sidebar-card:nth-child(3) { animation-delay: 0.45s; }
| |
| .sidebar-card:nth-child(4) { animation-delay: 0.5s; }
| |
|
| |
| @media (prefers-reduced-motion: reduce) {
| |
| .hero-banner,
| |
| .quick-start-section,
| |
| .content-card,
| |
| .sidebar-card {
| |
| animation: none;
| |
| }
| |
|
| |
| .hero-icon {
| |
| animation: none;
| |
| }
| |
| }
| |