/* Add sty/* ==========================================================================
   1. TEMEL AYARLAR VE DEĞİŞKENLER
   ========================================================================== */

/* Google Fonts'tan Quicksand, Nunito ve Special Elite fontlarını projemize dahil ediyoruz */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&family=Quicksand:wght@500;700&family=Special+Elite&display=swap');

/* :root seçicisi, tüm belgede geçerli olacak CSS değişkenleri tanımlamamızı sağlar.
   Bu, renkleri veya fontları tek bir yerden kolayca değiştirmemizi sağlar. */
:root {
    --font-primary: 'Nunito', sans-serif; /* Ana metinler için sıcak ve okunabilir font */
    --font-secondary: 'Quicksand', sans-serif; /* Başlıklar için daha oyuncu bir font */
    --font-handwriting: 'Special Elite', cursive; /* Hikayem sayfası için daktilo/el yazısı fontu */
    
    /* Projenin ruhunu yansıtan pastel renk paleti */
    --color-bg: #f8f9fa; /* Hafif kırık beyaz - Kağıt/tahta hissi */
    --color-text: #343a40; /* Koyu gri - Göz yormayan metin */
    --color-header-bg: #ffffff; /* Beyaz menü arkaplanı */
    --color-primary: #007bff; /* Ana Eylem Rengi (biraz daha canlı) */
    --color-secondary: #6c757d; /* İkincil Butonlar */
    --color-accent: #f3d582; /* Vurgu rengi (Pastel Sarı) */
    --color-card-bg: #ffffff; /* Kartların arkaplanı */
    --color-border: #e9ecef; /* İnce çizgiler için */

    --shadow-sm: 0 2px 4px rgba(0,0,0,0.05); /* Hafif gölge */
    --shadow-md: 0 4px 8px rgba(0,0,0,0.08); /* Belirgin gölge */
    --border-radius: 8px; /* Yuvarlatılmış köşeler */
}

/* Genel sıfırlama ve kutu modeli ayarı */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    font-family: var(--font-primary);
    background-color: var(--color-bg);
    color: var(--color-text);
    margin: 0;
    padding-top: 80px; /* Yapışkan menü yüksekliği kadar üstten boşluk */
    line-height: 1.6;
}

/* Ana içerik konteyneri: Sayfa içeriğini ortalar ve sınırlar */
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

h1, h2, h3 {
    font-family: var(--font-secondary);
    font-weight: 700;
}


/* ==========================================================================
   2. HEADER VE MENÜ ÇUBUĞU
   ========================================================================== */
.main-header {
    background-color: var(--color-header-bg);
    border-bottom: 1px solid var(--color-border);
    padding: 0 20px;
    position: fixed; /* Menüyü sayfa kaydırılsa bile yukarıda sabitler */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* Diğer tüm elemanların üzerinde olmasını sağlar */
    box-shadow: var(--shadow-sm);
}

.main-nav {
    display: flex;
    justify-content: space-between; /* Elemanları aralıklı hizalar: logo sola, linkler ortaya, eylemler sağa */
    align-items: center;
    height: 80px;
    max-width: 1200px;
    margin: 0 auto;
}

.nav-logo {
    font-family: var(--font-secondary);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
    text-decoration: none;
}

.nav-links {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 30px; /* Menü elemanları arasına boşluk */
}

.nav-links a {
    text-decoration: none;
    color: var(--color-secondary);
    font-weight: 500;
    transition: color 0.2s ease;
}

.nav-links a:hover {
    color: var(--color-primary);
}

.nav-actions .btn {
    padding: 8px 20px;
    background-color: var(--color-primary);
    color: white;
    text-decoration: none;
    border-radius: var(--border-radius);
    transition: background-color 0.2s ease;
}

.nav-actions .btn:hover {
    background-color: #0056b3;
}


/* ==========================================================================
   3. GENEL SAYFA BÖLÜMLERİ VE KARTLAR
   ========================================================================== */
section {
    padding: 60px 0;
    position: relative; /* İçeriğin arka planın üzerinde kalması için */
    z-index: 1;
}

section h2 {
    text-align: center;
    font-size: 2.2rem;
    margin-bottom: 40px;
}

.card {
    background-color: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: 25px;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
}

.card:hover {
    transform: translateY(-5px); /* Kartın üzerine gelince hafifçe yukarı kalkar */
    box-shadow: var(--shadow-md);
}

.card-tag {
    display: inline-block;
    background-color: var(--color-accent);
    color: #333;
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 15px;
}

.card h3 {
    margin-top: 0;
    margin-bottom: 10px;
}

.card p {
    flex-grow: 1; /* Paragrafın esneyerek kartı doldurmasını sağlar */
}

.card a {
    text-decoration: none;
    color: var(--color-primary);
    font-weight: 700;
    margin-top: 15px; /* İçerikle link arasına boşluk koyar */
}


/* ==========================================================================
   4. ÖZEL BÖLÜMLERİN STİLLERİ
   ========================================================================== */

/* Hoş Geldin Bölümü */
.welcome-section {
    text-align: center;
    padding: 80px 0;
}
.welcome-section h1 {
    font-size: 2.8rem;
    margin-bottom: 15px;
}
.welcome-section p {
    font-size: 1.2rem;
    color: var(--color-secondary);
    max-width: 600px;
    margin: 0 auto;
}

/* Öne Çıkan Araç Bölümü */
.featured-section {
    background-color: rgba(238, 244, 255, 0.8); /* Hafif mavi ve yarı şeffaf arkaplan */
    text-align: center;
}
.featured-section h2 {
    font-size: 2rem;
}
.featured-section .btn {
    padding: 12px 30px;
    font-size: 1.1rem;
    margin-top: 20px;
}

/* Son Eklenenler Bölümü */
.recent-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 sütunlu bir grid yapısı */
    gap: 30px; /* Sütunlar arası boşluk */
}

/* Öğretmenden Öğretmene Bölümü */
.articles-section {
    background-color: rgba(255, 255, 255, 0.8); /* Yarı şeffaf beyaz */
}

.articles-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 sütunlu yazı düzeni */
    gap: 40px;
}

/* Katkı Sun Bölümü */
.contribute-section {
    background-color: rgba(243, 213, 130, 0.8); /* Yarı şeffaf pastel sarı */
    text-align: center;
}
.contribute-section h2 { color: #333; }
.contribute-section p { color: #555; }


/* ==========================================================================
   5. FOOTER (ALT BİLGİ)
   ========================================================================== */
.main-footer {
    background-color: #26043b71; /* Pastel sarı */
    color: #333;
    padding: 50px 0;
    text-align: center;
    position: relative;
    z-index: 1;
}

.footer-links {
    margin-bottom: 20px;
}
.footer-links a {
    color: #f8f9fa;
    text-decoration: none;
    margin: 0 15px;
}
.footer-links a:hover {
    text-decoration: underline;
}

.footer-copyright p {
    margin: 0;
    font-size: 0.9rem;
    color: #adb5bd;
}


/* ==========================================================================
   6. RESPONSIVE (MOBİL UYUMLULUK)
   ========================================================================== */
@media (max-width: 992px) {
    .search-and-filter-container {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 768px) {
    .nav-links {
        display: none; /* Mobil cihazlarda menü linklerini gizle (hamburger menü için hazırlık) */
    }

    .recent-grid,
    .articles-grid,
    .tools-grid {
        grid-template-columns: 1fr; /* Mobilde kartları alt alta sırala */
    }

    .welcome-section h1 { font-size: 2rem; }
    section h2 { font-size: 1.8rem; }
}

/* ==========================================================================
   7. İNTERAKTİF ARKA PLAN
   ========================================================================== */
#interactive-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -10; /* Canvas'ı tüm içeriğin arkasına gönderir */
}

/* ==========================================================================
   8. HİKAYEM SAYFASI ÖZEL STİLLERİ
   ========================================================================== */

/* Sadece hikayem sayfasında geçerli olacak stiller */
.page-hikayem #interactive-bg {
    display: none; /* İnteraktif arka planı bu sayfada gizle */
}

.page-hikayem {
    /* Hafif dokulu bir ahşap masa arkaplanı */
    background-image: url('https://www.transparenttextures.com/patterns/wood-pattern.png');
    background-color: #f3f0e9;
}

.page-hikayem .main-header {
    position: fixed;
}

.page-hikayem .main-footer {
    position: relative; /* Arka plan resminin üzerinde kalmaları için */
    z-index: 10;
}

.story-section {
    padding: 80px 0;
}

.story-content {
    background-color: #fffdf7; /* Krem rengi kağıt */
    max-width: 750px;
    margin: 0 auto;
    padding: 50px 60px;
    border-radius: 3px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    font-family: var(--font-handwriting); /* Daktilo fontu */
    font-size: 1.2rem;
    line-height: 2;
    color: #403a3a;
    border-left: 3px solid #e4d9c7; /* Defterin sol kenarı hissi */
}

.story-content h2, .story-content h3 {
    font-family: var(--font-secondary);
    color: #333;
}

.story-list {
    list-style-type: none;
    padding-left: 20px;
    font-style: italic;
}

.story-realization {
    border-top: 1px dashed #ccc;
    border-bottom: 1px dashed #ccc;
    padding: 20px 0;
    margin: 30px 0;
    text-align: center;
    font-size: 1.4rem;
}

.story-conclusion {
    text-align: center;
    font-size: 1.5rem;
    margin-top: 40px;
    font-family: var(--font-secondary);
    font-weight: 700;
}

/* ==========================================================================
   9. ATÖLYE SAYFASI (DÖNEN KARTLAR)
   ========================================================================== */

.gallery-header {
    text-align: center;
    margin-bottom: 40px;
}

.gallery-header h2 {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.gallery-header p {
    font-size: 1.1rem;
    color: var(--color-secondary);
    max-width: 600px;
    margin: 0 auto;
}

.tools-grid {
    display: grid;
    /* Kartların minimum boyutunu 210px olarak güncelledik */
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 25px; /* Boşlukları biraz azalttık */
    margin-top: 40px;
}

.tool-card {
    background-color: transparent; /* Dış sarmalayıcı şeffaf olmalı */
    aspect-ratio: 1 / 1; /* Kartı kare yapar */
    perspective: 1000px; /* 3D dönüşüm için perspektif */
    cursor: pointer;
}

.tool-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    box-shadow: var(--shadow-sm);
    border-radius: var(--border-radius);
}

.tool-card:hover .tool-card-inner {
    transform: rotateY(180deg); /* Üzerine gelince iç kısmı 180 derece döndürür */
}

.card-front, .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari için */
    backface-visibility: hidden; /* Arkası dönük yüzü gizler */
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    text-align: center;
}

.card-front {
    background-color: var(--color-card-bg);
    color: var(--color-text);
}

.card-front h3 {
    font-size: 1.3rem; /* Yazı boyutunu küçülttük */
    margin: 0;
}

.card-back {
    background-color: #343a40; /* Arka yüzün rengi */
    color: white;
    transform: rotateY(180deg); /* Arka yüzü başlangıçta ters çevrilmiş tutar */
}

.card-back h4 {
    font-family: var(--font-secondary);
    font-size: 1.2rem; /* Yazı boyutunu daha da küçülttük */
    margin-top: 0;
    margin-bottom: 8px; /* Boşluğu azalttık */
}

.card-back .info-item {
    margin: 3px 0; /* Boşluğu azalttık */
    font-size: 0.8rem; /* Yazı boyutunu küçülttük */
}

.card-back .info-context {
    font-style: italic;
    font-size: 0.8rem; /* Yazı boyutunu küçülttük */
    color: #ced4da;
    margin-top: 8px; /* Boşluğu azalttık */
    padding-top: 8px; /* Boşluğu azalttık */
    border-top: 1px dashed rgba(255, 255, 255, 0.2);
    width: 90%; /* Genişliği sınırlayarak daha iyi görünmesini sağlar */
}

.card-back .btn {
    margin-top: 12px; /* Boşluğu azalttık */
    background-color: var(--color-accent);
    color: #333;
    padding: 6px 16px; /* Butonu küçülttük */
    border: none;
    text-decoration: none;
    border-radius: var(--border-radius);
    font-weight: 700;
    font-size: 0.8rem; /* Yazı boyutunu küçülttük */
}

.card-front h3 {
    font-size: 1.2rem; /* Yazı boyutunu küçülttük */
    margin: 0;
}

/* YENİ EKLENEN BÖLÜM: TÜM KARTLARDAKİ EMOJİLERİ BÜYÜTÜR */
.card-front .emoji {
    font-size: 4.5rem; /* Emojiyi büyütüyoruz */
    margin-bottom: 15px;
    text-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* ==========================================================================
   10. ATÖLYE SAYFASI - FİLTRELEME VE ARAMA
   ========================================================================== */

.search-and-filter-container {
    display: flex;
    flex-direction: column; /* Ana ekseni dikey yapar */
    gap: 25px; /* Gruplar arasına boşluk koyar */
    margin-bottom: 50px;
    padding: 25px;
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
}

.search-bar {
    width: 100%; /* Arama çubuğunun tam genişlikte olmasını sağlar */
}

.search-bar input {
    width: 100%;
    padding: 12px 20px;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    font-family: var(--font-primary);
    font-size: 1rem;
    transition: box-shadow 0.2s ease;
}

.search-bar input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
    border-color: var(--color-primary);
}

.filter-group {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Etiketleri sola hizalar */
    gap: 10px;
}

.filter-group label {
    font-weight: 700;
    font-family: var(--font-secondary);
    color: var(--color-text);
}

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.filter-btn {
    padding: 8px 16px;
    border: 1px solid var(--color-border);
    background-color: transparent;
    color: var(--color-secondary);
    border-radius: var(--border-radius);
    cursor: pointer;
    font-family: var(--font-primary);
    font-weight: 700;
    transition: all 0.2s ease;
}

.filter-btn:hover {
    background-color: var(--color-border);
    color: var(--color-text);
}

.filter-btn.active {
    background-color: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}
/* public/assets/css/style.css dosyasının en altına eklenecek */

/* --- YENİ NAVİGASYON DÜZENİ --- */

/* Açılan Menü Stilleri (Soldan Açılacak) */
.nav-links-wrapper {
    position: fixed;
    top: 0;
    left: -100%; /* Başlangıçta gizli */
    width: 300px;
    max-width: 80%;
    height: 100vh;
    background-color: #fff;
    box-shadow: 5px 0 15px rgba(0,0,0,0.1);
    transition: left 0.3s ease-in-out; 
    z-index: 1001;
}

.nav-links-wrapper.is-open {
    left: 0; /* Açıldığında sola yasla */
}

.nav-links {
    flex-direction: column;
    align-items: flex-start;
    padding: 80px 30px 30px 30px;
    gap: 20px;
}

.nav-links a {
    font-size: 1.2rem;
}

/* Ana Navigasyon Çubuğu (Flexbox ile Hizalama) */
.main-nav {
    display: flex;
    justify-content: space-between; /* Sol ve sağ tarafı iki uca yasla */
    align-items: center;
    width: 100%;
}

.nav-left {
    display: flex;
    align-items: center;
    gap: 15px; /* Hamburger menü ve logo arasına boşluk koy */
}

/* "Giriş Yap" butonu artık her zaman görünür */
.nav-actions {
   display: block;
}

/* Hamburger Menü Butonları */
.menu-toggle, .menu-toggle-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
}

.menu-toggle {
    display: block; /* Hamburger menü her zaman görünür */
}

.menu-toggle svg {
    fill: var(--color-text);
}

.menu-toggle-close {
    display: block;
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 2.5rem;
    color: var(--color-secondary);
}
/* public/assets/css/style.css dosyasının en altındaki logo stilleri */

.logo-group {
    display: flex;
    align-items: center;
    gap: 12px; /* Logo ile yazı arasına biraz daha boşluk */
    text-decoration: none;
}

.nav-logo-img {
    height: 90px; /* Yatay logo için yüksekliği biraz azaltmak daha şık durur */
    width: auto;  /* Genişlik otomatik ayarlansın */
}

.nav-logo-text {
    display: none; /* Yazıyı tamamen gizle */
}
/* public/assets/css/style.css dosyasının en altına eklenecek */

/* --- KULLANICI BİLGİLERİ STİLLERİ --- */

#user-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

#user-name {
    font-weight: 700;
    color: var(--color-text);
    white-space: nowrap; /* İsmin alt satıra kaymasını engelle */
}

.btn-logout {
    background-color: var(--color-secondary);
    color: white;
    padding: 8px 15px;
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-family: var(--font-primary);
    font-weight: 700;
    transition: background-color 0.2s ease;
}

.btn-logout:hover {
    background-color: #5a6268;
}

/* Her ihtimale karşı bir 'hidden' sınıfı */
.hidden {
    display: none !important;
}
/* Araç Kontrol Butonları */
.kontrol-btn {
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    width: 56px; /* 14 * 4 */
    height: 56px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem; /* 20px */
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(5px);
}

.kontrol-btn:hover {
    background-color: rgba(0, 0, 0, 0.8);
    transform: scale(1.1);
}

/* Favori butonu aktifken sarı renk */
.kontrol-btn.favori-aktif {
    color: #facc15; /* Tailwind yellow-400 */
}

/* Modal'ın gizli/görünür durumu için */
.hidden {
    display: none;
}
/* === FİHRİST SAYFASI (TABLO VE FİLTRE) === */
.fihrist-controls {
    display: flex;
    gap: 1rem;
    margin: 2rem auto;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 12px;
    max-width: 900px;
    justify-content: center;
    flex-wrap: wrap;
}

.fihrist-controls input,
.fihrist-controls select {
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    font-family: var(--font-primary);
    font-size: 1rem;
    flex-grow: 1;
}

.fihrist-controls input {
    min-width: 250px;
}
.fihrist-controls select {
    min-width: 180px;
}

.fihrist-tablo-container {
    overflow-x: auto;
    background-color: #fff;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    max-width: 1100px;
    margin: 0 auto;
}

#fihrist-tablosu {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

#fihrist-tablosu th,
#fihrist-tablosu td {
    padding: 12px 15px;
    border-bottom: 1px solid var(--color-border);
}

#fihrist-tablosu th {
    background-color: #f8f9fa;
    font-family: var(--font-secondary);
    font-weight: 700;
}

#fihrist-tablosu tbody tr:nth-of-type(even) {
    background-color: #f8f9fa;
}

#fihrist-tablosu tbody tr:hover {
    background-color: #e9ecef;
}

#fihrist-tablosu a {
    text-decoration: none;
    color: var(--color-primary);
    font-weight: 700;
}
#fihrist-tablosu a:hover {
    text-decoration: underline;
}
/* === ÜZERİNDE ÇALIŞILIYOR SAYFASI === */
.placeholder-section {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 60vh;
    padding: 2rem 0;
}

.placeholder-image {
    max-width: 100%;
    width: 400px;
    margin-bottom: 2rem;
    opacity: 0.8;
}

.placeholder-section h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.placeholder-section p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    color: var(--color-text-secondary);
}
/* === İÇERİK SAYFASI STİLLERİ (Yaklaşımımız vb.) === */
.content-section {
    padding: 4rem 0;
}
.content-header {
    text-align: center;
    margin-bottom: 3rem;
}
.content-header h2 {
    font-size: 3rem;
    margin-bottom: 1rem;
}
.content-header .subtitle {
    font-size: 1.25rem;
    max-width: 800px;
    margin: 0 auto;
    color: var(--color-text-secondary);
}

.content-body {
    max-width: 800px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.7);
    padding: 2.5rem;
    border-radius: 1rem;
    box-shadow: var(--shadow-md);
}

.content-block {
    margin-bottom: 2rem;
}
.content-block:last-child {
    margin-bottom: 0;
}

.content-block h3 {
    font-family: var(--font-secondary);
    font-size: 1.75rem;
    margin-bottom: 1rem;
    color: var(--color-primary);
    border-bottom: 2px solid var(--color-border);
    padding-bottom: 0.5rem;
}

.content-block p {
    font-size: 1.1rem;
    line-height: 1.8;
}
/* === KATKI SUN SAYFASI STİLLERİ === */
.contribution-container {
    display: flex;
    gap: 2.5rem;
    max-width: 1100px;
    margin: 0 auto;
    align-items: flex-start;
}

.contribution-form-wrapper {
    flex: 1;
    background: rgba(255, 255, 255, 0.7);
    padding: 2.5rem;
    border-radius: 1rem;
    box-shadow: var(--shadow-md);
}

.contribution-form-wrapper h3 {
    text-align: center;
    font-size: 1.75rem;
    margin-bottom: 2rem;
    font-family: var(--font-secondary);
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    font-family: var(--font-primary);
    font-size: 1rem;
}

.form-group textarea {
    resize: vertical;
}

.contribution-info {
    flex: 1;
    max-width: 450px;
}
.contribution-info h3 {
    font-size: 1.75rem;
    margin-bottom: 1.5rem;
    font-family: var(--font-secondary);
}

.info-block {
    background: rgba(255, 255, 255, 0.6);
    padding: 1.5rem;
    border-radius: 1rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--color-border);
}

.info-block h4 {
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
    color: var(--color-primary);
}

/* Mobil için düzenleme */
@media (max-width: 992px) {
    .contribution-container {
        flex-direction: column;
    }
    .contribution-info {
       max-width: 100%;
    }
}
/* === YENİ VE ŞIK GÖNDER BUTONU TASARIMI === */
.btn-submit {
    position: relative;
    width: 100%;
    height: 50px;
    padding: 0 1.5rem;
    border: 2px solid var(--color-primary);
    background-color: var(--color-primary);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: var(--border-radius);
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
}
.btn-submit:hover:not(:disabled) {
    background-color: #4c51bf;
    border-color: #4c51bf;
}
.btn-submit:disabled {
    cursor: wait;
}

.btn-submit-text {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Yüklenme (Loading) Durumu */
.btn-submit.is-loading .btn-submit-text {
    opacity: 0;
    transform: translateY(-10px);
}
.btn-submit-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    border: 3px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    animation: spin 1s linear infinite;
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
@keyframes spin {
    to { transform: translate(-50%, -50%) rotate(360deg) scale(1); }
}
.btn-submit.is-loading .btn-submit-loader {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

/* Başarı (Success) Durumu */
.btn-submit.is-success {
    background-color: #38a169;
    border-color: #38a169;
}
.btn-submit-check {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
}
.btn-submit.is-success .btn-submit-check {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    transition: all 0.4s ease-in-out;
}
.btn-submit-check-circle {
    stroke-dasharray: 151;
    stroke-dashoffset: 151;
    stroke: white;
    stroke-width: 3;
    fill: transparent;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.btn-submit-check-mark {
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    stroke: white;
    stroke-width: 3;
    stroke-linecap: round;
    animation: stroke 0.4s cubic-bezier(0.65, 0, 0.45, 1) 0.5s forwards;
}
@keyframes stroke {
    100% { stroke-dashoffset: 0; }
}
/* === İLETİŞİM SAYFASI STİLLERİ === */
.contact-container {
    display: flex;
    gap: 3rem;
    max-width: 900px;
    margin: 0 auto;
    align-items: flex-start;
}

.contact-form-wrapper {
    flex: 2;
    background: rgba(255, 255, 255, 0.7);
    padding: 2.5rem;
    border-radius: 1rem;
    box-shadow: var(--shadow-md);
}

.contact-alternatives {
    flex: 1;
    text-align: center;
    padding-top: 1rem;
}

.contact-alternatives h3 {
    font-family: var(--font-secondary);
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

.social-links {
    margin-bottom: 2rem;
}

.social-links a {
    color: var(--color-primary);
    font-size: 2rem;
    margin: 0 1rem;
    transition: color 0.3s ease, transform 0.3s ease;
}

.social-links a:hover {
    color: #4c51bf;
    transform: translateY(-3px);
}

.closing-note {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    background: rgba(255, 255, 255, 0.6);
    padding: 1rem;
    border-radius: var(--border-radius);
}

/* Form elemanları için ek stil */
.form-group select {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    font-family: var(--font-primary);
    font-size: 1rem;
    background-color: white;
}

/* Mobil için düzenleme */
@media (max-width: 768px) {
    .contact-container {
        flex-direction: column;
    }
}
/* === KONTROL PANELİ GARANTİ KURALI === */
/* Bu kural, kontrol panelinin ve bilgi modalının,
   diğer tüm sayfa içeriklerinin her zaman ÜSTÜNDE
   kalmasını sağlar. */

   #kontrol-butonlari {
    position: fixed;
    z-index: 9998; /* Çok yüksek bir z-index değeri */
}

#info-modal, .panel-overlay {
    z-index: 9999; /* Her şeyin üstünde */
}

.ayarlar-paneli {
    z-index: 10000; /* Ayarlar paneli en üstte olmalı */
}
/* Drawer içindeki nav-links her zaman görünsün */
.nav-links-wrapper .nav-links {
    display: flex !important;   /* mobildeki display:none'u ezer */
  }