/* =========================================
   1. PREMIUM FONT & DEĞİŞKENLER
   ========================================= */
   @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;700;800&display=swap');

   :root {
       --font-main: 'Outfit', sans-serif;
       --glass-border: rgba(255, 255, 255, 0.2);
       --glass-bg: rgba(255, 255, 255, 0.05);
       --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
       --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
       --accent-color: #764ba2;
       --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   }
   
   body.light-mode {
       --text-main: #2d3748;
       --text-muted: #718096;
       --bg-overlay: rgba(255, 255, 255, 0.6);
       --card-bg: rgba(255, 255, 255, 0.65);
       --nav-bg: rgba(255, 255, 255, 0.7);
       --input-bg: rgba(255, 255, 255, 0.5);
   }
   
   body.dark-mode {
       --text-main: #ffffff;
       --text-muted: #a0aec0;
       --bg-overlay: rgba(17, 25, 40, 0.75);
       --card-bg: rgba(30, 41, 59, 0.7);
       --nav-bg: rgba(15, 23, 42, 0.6);
       --input-bg: rgba(0, 0, 0, 0.2);
   }
   
   /* =========================================
      2. HAREKETLİ ARKA PLAN (LAVA EFEKTİ)
      ========================================= */
   body {
       margin: 0;
       font-family: var(--font-main);
       color: var(--text-main);
       overflow-x: hidden;
       min-height: 100vh;
       background-color: #0f172a;
   }
   
   .animated-bg {
       position: fixed;
       top: 0; left: 0; width: 100vw; height: 100vh;
       z-index: -1;
       background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
       background-size: 400% 400%;
       animation: gradientBG 15s ease infinite;
   }
   
   .animated-bg::after {
       content: '';
       position: absolute; top: 0; left: 0; width: 100%; height: 100%;
       background: var(--bg-overlay);
       backdrop-filter: blur(30px);
   }
   
   @keyframes gradientBG {
       0% { background-position: 0% 50%; }
       50% { background-position: 100% 50%; }
       100% { background-position: 0% 50%; }
   }
   
   * { box-sizing: border-box; }
   


   /* =========================================
   10. GİRİŞ & KAYIT SAYFALARI (ÖZEL TASARIM)
   ========================================= */

/* Sayfayı ortalamak için wrapper */
.auth-wrapper {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    position: relative;
    z-index: 1;
}

/* Kart Tasarımı (Ezme) */
.auth-container {
    background: rgba(255, 255, 255, 0.1); /* Çok şeffaf */
    backdrop-filter: blur(20px); /* Güçlü buzlu cam */
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    width: 100%;
    max-width: 420px;
    padding: 3rem 2.5rem;
    border-radius: 24px;
    text-align: center;
    margin: 0; /* Margin auto'yu iptal et */
}

/* Logo ve Başlık */
.auth-header {
    margin-bottom: 2rem;
}

.auth-logo {
    height: 60px;
    width: auto;
    margin-bottom: 15px;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
    animation: floatLogo 3s ease-in-out infinite;
}

@keyframes floatLogo {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.auth-header h2 {
    font-size: 2rem;
    font-weight: 800;
    margin: 0;
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -1px;
}

.auth-header p {
    color: var(--text-muted);
    margin-top: 5px;
    font-size: 0.95rem;
}

/* Alt Linkler */
.auth-footer {
    margin-top: 2rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.auth-footer a {
    color: var(--accent-color);
    font-weight: 700;
    text-decoration: none;
    transition: 0.3s;
}

.auth-footer a:hover {
    text-decoration: underline;
    color: #9f7aea; /* Daha açık mor */
}
   /* =========================================
      3. GLASSMORPHISM SINIFLARI
      ========================================= */
   .glass {
       background: var(--nav-bg);
       backdrop-filter: blur(16px);
       -webkit-backdrop-filter: blur(16px);
       border: 1px solid var(--glass-border);
       box-shadow: var(--glass-shadow);
   }
   
   /* =========================================
      4. NAVBAR (YÜZEN TASARIM)
      ========================================= */
   .navbar {
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 0.8rem 2rem;
       margin: 1.5rem 2rem;
       border-radius: 20px;
       position: sticky;
       top: 20px;
       z-index: 1000;
   }
   
   .nav-brand {
       display: flex;
       align-items: center;
       gap: 15px;
   }
   
   .nav-logo {
       height: 45px;
       filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
       transition: transform 0.3s;
   }
   .nav-logo:hover { transform: rotate(10deg) scale(1.1); }
   
   .nav-brand h1 {
       font-size: 1.8rem;
       font-weight: 800;
       background: var(--primary-gradient);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       margin: 0;
       letter-spacing: -1px;
   }
   
   .nav-actions { display: flex; align-items: center; gap: 15px; }
   
   .user-badge {
       display: flex; align-items: center; gap: 8px;
       padding: 8px 16px;
       border-radius: 30px;
       font-size: 0.9rem;
       font-weight: 600;
   }
   
   .status-dot {
       width: 8px; height: 8px;
       background-color: #48bb78;
       border-radius: 50%;
       box-shadow: 0 0 10px #48bb78;
   }
   
   /* Navbar Butonları (Glass Style) */
   .glass-btn {
       background: rgba(255, 255, 255, 0.15);
       backdrop-filter: blur(10px);
       border: 1px solid rgba(255, 255, 255, 0.3);
       color: var(--text-main);
       padding: 10px 20px;
       border-radius: 15px;
       font-weight: 600;
       cursor: pointer;
       transition: var(--transition);
       display: flex; align-items: center; justify-content: center;
   }

   .glass-btn:hover {
       background: rgba(255, 255, 255, 0.3);
       transform: translateY(-2px);
       box-shadow: 0 5px 15px rgba(0,0,0,0.1);
   }

   .btn-icon { 
       padding: 8px; 
       border-radius: 50%; 
       width: 40px; height: 40px; 
       font-size: 1.2rem;
   }
   
   /* =========================================
      5. ANA İÇERİK VE IZGARA
      ========================================= */
   main {
       max-width: 1200px;
       margin: 4rem auto;
       padding: 0 20px;
   }
   
   .list-header {
       display: flex;
       justify-content: space-between;
       align-items: flex-end;
       margin-bottom: 3rem;
   }
   
   .list-header h2 {
       font-size: 2.5rem;
       font-weight: 700;
       margin: 0;
       text-shadow: 0 2px 10px rgba(0,0,0,0.1);
   }
   
   #portfolio-grid {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
       gap: 2.5rem;
   }
   
   /* =========================================
      6. PORTFOLYO KARTLARI (3D EFFECT)
      ========================================= */
   .portfolio-card {
       background: var(--card-bg);
       backdrop-filter: blur(12px);
       border: 1px solid var(--glass-border);
       border-radius: 20px;
       padding: 0;
       overflow: hidden;
       transition: all 0.4s ease;
       position: relative;
       box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1);
       display: flex;
       flex-direction: column;
   }
   
   .portfolio-card::before {
       content: '';
       position: absolute; top: 0; left: 0; width: 100%; height: 5px;
       background: var(--primary-gradient);
   }
   
   .portfolio-card:hover {
       transform: translateY(-10px) scale(1.02);
       box-shadow: 0 20px 40px rgba(0,0,0,0.2);
       border-color: rgba(255,255,255,0.5);
   }
   
   .card-content { padding: 2rem; flex-grow: 1; }
   
   .card-content h3 {
       font-size: 1.5rem;
       margin: 0 0 0.5rem 0;
       font-weight: 700;
       background: -webkit-linear-gradient(45deg, var(--text-main), var(--text-muted));
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
   }
   
   /* --- YENİ GELİŞMİŞ KART BUTONLARI --- */
   .card-actions {
       padding: 1.2rem;
       background: rgba(0,0,0,0.02);
       border-top: 1px solid var(--glass-border);
       display: flex;
       gap: 8px;
       flex-wrap: wrap;
   }

   .action-btn {
       flex: 1;
       padding: 10px 15px;
       border-radius: 12px;
       font-size: 0.85rem;
       font-weight: 600;
       color: var(--text-main);
       background: rgba(255, 255, 255, 0.6);
       border: 1px solid rgba(0,0,0,0.05);
       cursor: pointer;
       transition: 0.3s ease;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       min-width: 80px;
   }

   /* Düzenle: Mavi */
   .btn-edit:hover {
       background: #4f46e5; color: white;
       box-shadow: 0 5px 15px rgba(79, 70, 229, 0.3);
       border-color: #4f46e5; transform: translateY(-2px);
   }

   /* PDF: Turuncu */
   .btn-pdf:hover {
       background: #ea580c; color: white;
       box-shadow: 0 5px 15px rgba(234, 88, 12, 0.3);
       border-color: #ea580c; transform: translateY(-2px);
   }

   /* Paylaş: Yeşil */
   .btn-share:hover {
       background: #059669; color: white;
       box-shadow: 0 5px 15px rgba(5, 150, 105, 0.3);
       border-color: #059669; transform: translateY(-2px);
   }

   /* Sil: Kırmızı */
   .btn-delete { color: #e11d48; background: rgba(225, 29, 72, 0.1); border-color: rgba(225, 29, 72, 0.2); }
   .btn-delete:hover {
       background: #e11d48; color: white;
       box-shadow: 0 5px 15px rgba(225, 29, 72, 0.3);
       transform: translateY(-2px);
   }
   
   /* =========================================
      7. ANA BUTONLAR & FORMLAR
      ========================================= */
   /* Genel Buton Ayarı */
   button {
       font-family: var(--font-main);
       border: none; outline: none;
   }

   /* Primary (Kaydet / Yeni Oluştur) */
   .btn-primary {
       background: var(--primary-gradient);
       color: white;
       padding: 14px 32px;
       border-radius: 50px;
       font-weight: 700;
       font-size: 1rem;
       cursor: pointer;
       box-shadow: 0 10px 25px rgba(118, 75, 162, 0.4);
       position: relative; overflow: hidden; z-index: 1;
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   }
   
   .btn-primary::before {
       content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
       background: linear-gradient(135deg, #764ba2 0%, #667eea 100%); /* Ters gradyan */
       z-index: -1; transition: opacity 0.4s ease; opacity: 0;
   }

   .btn-primary:hover::before { opacity: 1; }
   .btn-primary:hover {
       transform: translateY(-3px);
       box-shadow: 0 15px 35px rgba(118, 75, 162, 0.6);
   }
   
   .full-width { width: 100%; margin-top: 15px; }
   
   input, textarea, select {
       background: var(--input-bg);
       border: 2px solid rgba(255, 255, 255, 0.1);
       border-radius: 12px;
       color: var(--text-main);
       padding: 15px;
       font-size: 1rem;
       font-family: var(--font-main);
       transition: 0.3s;
       width: 100%;
       box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
   }
   
   input:focus, textarea:focus {
       border-color: var(--accent-color);
       background: rgba(255,255,255,0.2);
       outline: none;
       box-shadow: 0 0 0 4px rgba(118, 75, 162, 0.1);
   }
   
   .form-group { margin-bottom: 1.5rem; }
   .form-group label { display: block; margin-bottom: 8px; font-weight: 600; font-size: 0.9rem; }
   .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
   
   /* =========================================
      8. ŞABLON SEÇİMİ (VISUAL CARDS)
      ========================================= */
   .template-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
       gap: 15px;
       margin-top: 10px;
   }
   
   .template-option { cursor: pointer; position: relative; }
   .template-option input { display: none; }
   
   .template-card {
       border: 2px solid transparent;
       border-radius: 12px;
       padding: 5px;
       text-align: center;
       transition: 0.3s;
       background: rgba(255,255,255,0.3);
   }
   
   .template-option input:checked + .template-card {
       border-color: var(--accent-color);
       background: white;
       transform: scale(1.05);
       box-shadow: 0 10px 25px rgba(118, 75, 162, 0.2);
   }
   
    /* =========================================
   10. GİRİŞ & KAYIT SAYFALARI (DÜZELTİLMİŞ)
   ========================================= */

.auth-wrapper {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    position: relative;
    z-index: 1;
}

.auth-container {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    width: 100%;
    max-width: 400px; /* Genişliği sabitledik */
    padding: 2.5rem;
    border-radius: 24px;
    text-align: center;
}

.auth-header { margin-bottom: 1.5rem; }

.auth-logo {
    height: 50px;
    width: auto;
    margin-bottom: 10px;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
}

.auth-header h2 {
    font-size: 1.8rem;
    font-weight: 800;
    margin: 0;
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.auth-header p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-top: 5px;
}

/* --- GOOGLE BUTONU (ÖZEL TASARIM) --- */
.btn-google {
    background-color: white;
    color: #333;
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: 0.3s;
    margin-bottom: 1.5rem;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.btn-google:hover {
    background-color: #f9fafb;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* --- AYIRICI (VEYA ÇİZGİSİ) --- */
.auth-divider {
    display: flex;
    align-items: center;
    margin: 1.5rem 0;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 500;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.2); /* Çizgi rengi */
}

.auth-divider span { padding: 0 10px; }

/* Input Düzeni */
.auth-container input {
    margin-bottom: 0; /* Margin'i form-group yönetiyor */
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.auth-container .form-group { margin-bottom: 1rem; }

.auth-footer {
    margin-top: 1.5rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.auth-footer a {
    color: var(--accent-color);
    font-weight: 700;
    text-decoration: none;
}

   .template-name { font-size: 0.8rem; font-weight: 700; display: block; margin-top: 5px; }
   
   /* Mini CSS çizimleri */
   .preview-classic, .preview-modern, .preview-minimalist, .preview-creative {
       height: 60px; border-radius: 8px; position: relative; overflow: hidden; background: #e2e8f0;
   }
   /* Detaylar önceki CSS ile benzer mantıkta, sadece boyutlar uyarlandı */
   .preview-classic::before { content:''; position:absolute; top:0; left:0; width:100%; height:30%; background:#2c3e50; }
   .preview-modern::before { content:''; position:absolute; top:0; left:0; width:30%; height:100%; background:#2c3e50; }
   .preview-minimalist::before { content:''; position:absolute; top:40%; left:20%; width:60%; height:2px; background:#999; }
   .preview-creative::before { content:''; position:absolute; top:0; right:0; border-width:0 40px 40px 0; border-style:solid; border-color:transparent #ff7675 transparent transparent; }
   
   /* =========================================
      9. MODAL
      ========================================= */
   .modal-overlay {
       position: fixed; top: 0; left: 0; width: 100%; height: 100%;
       background: rgba(0, 0, 0, 0.7);
       backdrop-filter: blur(8px);
       z-index: 2000;
       display: flex; justify-content: center; align-items: center;
       animation: fadeIn 0.3s;
   }
   @keyframes fadeIn { from{opacity:0} to{opacity:1} }
   
   .modal-content {
       padding: 2.5rem;
       width: 95%; max-width: 600px; max-height: 90vh;
       overflow-y: auto;
       border-radius: 24px;
       box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
   }
   .modal-close {
       position: absolute; top: 20px; right: 20px;
       font-size: 2rem; border: none; background: transparent; 
       color: var(--text-main); cursor: pointer;
   }
   
   /* Scrollbar */
   ::-webkit-scrollbar { width: 8px; }
   ::-webkit-scrollbar-track { background: transparent; }
   ::-webkit-scrollbar-thumb { background: var(--accent-color); border-radius: 10px; }
   /* --- NAVBAR KULLANICI RESMİ --- */
.nav-user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 8px;
    border: 2px solid white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
/* =================================================================
   📱 RESPONSIVE TASARIM (MOBİL & TABLET UYUMLULUĞU)
   ================================================================= */

/* --- TABLET VE MOBİL GENEL (992px altı) --- */
@media (max-width: 992px) {
    main {
        padding: 0 15px;
        margin: 2rem auto;
    }

    .navbar {
        margin: 1rem;
        padding: 0.8rem 1.2rem;
    }
}

/* --- MOBİL CİHAZLAR (768px altı) --- */
@media (max-width: 768px) {
    
    /* 1. NAVBAR DÜZENLEMESİ */
    .navbar {
        flex-direction: column; /* Alt alta diz */
        gap: 15px;
        border-radius: 16px;
        padding: 1rem;
    }

    .nav-brand {
        width: 100%;
        justify-content: center; /* Logoyu ortala */
    }

    .nav-actions {
        width: 100%;
        justify-content: space-between; /* Butonları yay */
        gap: 10px;
    }

    /* Mobilde "Hoş geldin İsim" yazısını gizle, sadece resim kalsın (Yer tasarrufu) */
    #user-welcome {
        display: none;
    }
    
    .user-badge {
        padding: 5px; /* Küçült */
        border-radius: 50%;
        width: 40px; height: 40px;
        justify-content: center;
    }
    
    .nav-user-avatar { margin: 0; } /* Resim ortalansın */

    /* 2. ANA LİSTE VE BAŞLIKLAR */
    .list-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        margin-bottom: 2rem;
    }

    .list-header h2 {
        font-size: 2rem; /* Başlığı biraz küçült */
    }

    .list-header button {
        width: 100%; /* "Yeni Oluştur" butonu tam genişlik olsun */
        justify-content: center;
    }

    /* 3. PORTFOLYO KARTLARI (Tek Sütun) */
    #portfolio-grid {
        grid-template-columns: 1fr; /* Tek sütun yap */
        gap: 1.5rem;
    }

    .portfolio-card {
        transform: none !important; /* Mobilde hover efektini kapat (performans için) */
    }

    /* 4. MODAL (Tam Ekran Hissi) */
    .modal-content {
        padding: 1.5rem;
        width: 95%;
        border-radius: 16px;
        max-height: 85vh; /* Mobilde klavye açılınca taşmasın */
    }

    /* Form Gridlerini Tek Sütuna İndir */
    .form-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    /* Şablon Seçimi - Mobilde 2'li Izgara */
    .template-grid {
        grid-template-columns: 1fr 1fr; 
    }

    /* 5. GİRİŞ & KAYIT EKRANLARI */
    .auth-container {
        padding: 2rem 1.5rem;
        border-radius: 20px;
    }
    
    .auth-header h2 { font-size: 1.5rem; }
    
    /* Input yazı boyutunu 16px yap (iOS zoom'u engeller) */
    input, textarea, select {
        font-size: 16px; 
    }
}

/* --- ÇOK KÜÇÜK TELEFONLAR (380px altı) --- */
@media (max-width: 380px) {
    .nav-brand h1 { font-size: 1.4rem; }
    .btn-logout { padding: 8px 12px; font-size: 0.8rem; }
    .template-grid { grid-template-columns: 1fr; } /* Şablonlar tekli olsun */
}