/* static/css/index.css */

/* Genel Stil Ayarları */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Scrollbar gizleme (isteğe bağlı, genel site için) */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

body::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera*/
}

/* Toastify-JS CSS'ini buraya import ediyoruz */
/* Bu import sayesinde merge.html'den Toastify linkini kaldırdık */
@import url('https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css');

/* Araç Kartları Stili */
/* Bu stiller ana sayfadaki araç kartları için, merge.html'de kullanılmaz */
.tool-card {
    background-color: #ffffff; /* bg-white */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
    padding: 1.5rem; /* p-6 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none; /* Remove underline from links */
    color: #374151; /* Dark gray for text */
    border: 2px solid transparent; /* Varsayılan olarak şeffaf kenarlık */

    /* Geçiş efektleri için temel ayarlar */
    transition-property: transform, box-shadow, border-color, background-color, color; /* Tüm değişen özellikler için geçiş */
    transition-duration: 300ms; /* Geçiş süresi */
    transition-timing-function: ease-out; /* Geçiş zamanlama fonksiyonu */
}

.tool-card:hover {
    transform: translateY(-5px) scale(1.03); /* Hafifçe yukarı kaydır ve biraz büyüt */
    box-shadow: 0 15px 25px -5px rgba(0, 0, 0, 0.2), 0 5px 10px -5px rgba(0, 0, 0, 0.1); /* Daha belirgin gölge */
    border-color: #ef4444; /* Fare üzerine gelince kırmızı kenarlık (red-500) */
    background-color: #f3f4f6; /* Hafif gri arka plan (gray-100 gibi) */
    color: #dc2626; /* Başlık metin rengi (red-600) */
}

.tool-card p {
    font-size: 0.875rem; /* text-sm */
    color: #6b7280; /* text-gray-500 */
    margin-top: 0.5rem; /* mt-2 */
    transition: color 300ms ease-out; /* Paragraf metni için de renk geçişi */
}

.tool-card:hover p {
    color: #b91c1c; /* Daha koyu kırmızı metin (red-700 gibi) */
}


/* AUTH MODAL STILLERI */
/* Ana modal container'ı için - backdrop (arka plan) ve ortalama */
#authModal { 
    backdrop-filter: blur(8px); /* Arka planı bulanıklaştır */
    background-color: rgba(0, 0, 0, 0.5); /* Yarı şeffaf siyah overlay */
    /* Bu stiller Tailwind'de 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50' ile zaten tanımlanmıştır. */
    /* Ancak CSS dosyasında tekrar tanımlamak istersen buraya ekleyebilirsin. */
    /* Örneğin:
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    */
}

/* Modal kartının kendisi (içindeki beyaz kutu) */
.auth-card-modal {
    /* Senin gönderdiğin kod bu kısım için zaten iyiydi. */
    background-color: rgba(255, 255, 255, 0.92); /* Kartın arka planı */
    border-radius: 1rem; /* rounded-xl Tailwind karşılığı */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* shadow-2xl Tailwind karşılığı */
    overflow: hidden; 
    width: 100%;
    max-width: 28rem; /* max-w-md Tailwind karşılığı (448px) */
    border: 1px solid #e5e7eb; /* border border-gray-200 Tailwind karşılığı */
    position: relative; /* İçindeki kapatma butonu için */
}

/* Şifremi Unuttum Bölümü Stili (Auth modalın içindeki #forgotPasswordSection div'i için) */
/* Daha önceki kodda #forgotPasswordModal olarak geçiyordu, auth.js ile uyumlu olması için düzeltildi. */
/* Bu stil, auth-card-modal'ın zaten sağladığı padding ve hizalama sayesinde çok fazla ekstraya ihtiyaç duymamalı. */
/* Ancak eğer özel bir durum varsa buraya ekleyebiliriz. */
/* Şu anki HTML yapısında #forgotPasswordSection'ın kendi içinde p-8'i zaten var. */
/* Genel bir stil değişikliği gerekmedikçe ekstra CSS yazmaya gerek yok. */

/* Auth Background (Eğer hala kullanılıyorsa) */
/* Bu sınıf, Auth Modal'ın arka planı için değil, eğer başka bir yerde genel bir auth arka planı kullanılıyorsa geçerlidir. */
/* Genellikle bu tür bir görsel auth modal'ın arkasındaki genel sayfaya uygulanır. */
.auth-bg-modal {
    background-image: url('https://source.unsplash.com/random/1920x1080/?document,paper'); /* Arkaplan görseli */
    background-size: cover;
    background-position: center;
}

/* Form input ve button stilleri (Tailwind tarafından zaten uygulanıyorsa gerek yok) */
input[type="email"],
input[type="password"],
input[type="text"] {
    outline: none; 
    transition: all 0.2s ease-in-out;
}

input[type="email"]:focus,
input[type="password"]:focus,
input[type="text"]:focus {
    border-color: #ef4444; /* red-500 */
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25); /* focus:ring-2 focus:ring-red-500 karşılığı */
}

button[type="submit"] {
    transition: background-color 0.2s ease-in-out;
}