@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

/* Temel Sıfırlama ve Ayarlar */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: 'Poppins', sans-serif;
	background: linear-gradient(135deg, #ff7e5f, #feb47b, #ffcc5c, #86a8e7, #91eae4);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
    color: #fff;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;
}

@keyframes gradientBG { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

/* Header */
.site-header {
    padding: 0;
    background-color: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(5px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
}

.header-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    height: 90px;  /* Header yüksekliğini de artırdık */
    display: flex;
    align-items: center;
    justify-content: space-between; /* Logo sola, butonlar sağa */
}

.site-header .logo {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    background: transparent !important;
}

.site-header .logo img {
    max-height: 75px;
    height: auto;
    width: auto;
    display: block;
    transition: transform 0.3s ease;
    background: transparent !important;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
}

.site-header .logo .brand-text {
    font-family: 'Poppins', sans-serif;
    font-size: 1.8rem;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

@media (max-width: 576px) {
    .site-header .logo .brand-text {
        font-size: 1.4rem;
    }
}

.site-header .logo:hover img { transform: scale(1.05); }

/* Ensure all logo containers are transparent */
.logo-container,
.tool-logo,
.search-result-logo,
.random-button-logo {
    background: transparent !important;
}

/* Remove any background from images within logo containers */
.logo-container img,
.tool-logo img,
.search-result-logo img,
.random-button-logo img {
    background: transparent !important;
}

/* DEĞİŞİKLİK: Header Butonları */
.header-actions {
    display: flex;
    align-items: center;
    gap: 0.8rem; /* Butonlar arası boşluk */
}

.header-button {
    background-color: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 0.8rem 1.2rem;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    height: 42px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.header-button i { font-size: 1em; }
.header-button:hover {
    background-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.header-button span { /* Mobil için yazıyı gizleme (isteğe bağlı) */
     display: none; /* Varsayılan olarak gizli */
}

/* Ana İçerik Alanı Sarmalayıcısı */
.main-wrapper {
    display: flex;
    justify-content: center;
    padding: 2rem;
    gap: 2rem;
    flex-grow: 1;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

/* İçerik Alanı (Anasayfa ve Kategori) */
.content-area {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    min-width: 0;
    /* DEĞİŞİKLİK: Max-width ayarı daha dinamik */
    width: calc(100% - 160px - 160px - 4rem); /* Sol ve Sağ bölümler için yer */
}

/* Kategori Kolajı (Anasayfa) */
.category-collage {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Min boyutu düşürdük */
    gap: 1.2rem; /* Boşluğu azalttık */
    width: 100%;
}
.category-button {
    /* Stilleri aynı, belki min-height ayarlanabilir */
    min-height: 140px; /* Biraz küçülttük */
    /* ... diğer .category-button stilleri ... */
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background-color: rgba(255, 255, 255, 0.15); backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 15px;
    padding: 1.2rem 0.8rem; /* Padding ayarı */ text-align: center; color: #fff;
    text-decoration: none; transition: all 0.3s ease-in-out;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
	animation: fadeInScale 0.5s ease-out forwards;
	opacity: 1;
}
.category-button:nth-child(1) { animation-delay: 0.1s; } /* Delay'ler devam */
.category-button:nth-child(2) { animation-delay: 0.15s; }
.category-button:nth-child(3) { animation-delay: 0.2s; }
.category-button:nth-child(4) { animation-delay: 0.25s; }
.category-button:nth-child(5) { animation-delay: 0.3s; }
.category-button:nth-child(6) { animation-delay: 0.35s; }
.category-button:nth-child(7) { animation-delay: 0.4s; }
.category-button:nth-child(8) { animation-delay: 0.45s; }
.category-button:nth-child(9) { animation-delay: 0.5s; }
.category-button:nth-child(10) { animation-delay: 0.55s; }
.category-button:nth-child(11) { animation-delay: 0.6s; }
.category-button:nth-child(12) { animation-delay: 0.65s; }

@keyframes fadeInScale {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.category-button i { margin-bottom: 0.6rem; font-size: 1.8em; /* İkonu biraz büyüttük */ color: #fff; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); }
.category-button span { font-weight: 600; font-size: 0.95rem; }
.category-button:hover { transform: translateY(-5px) scale(1.03); background-color: rgba(255, 255, 255, 0.25); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); border-color: rgba(255, 255, 255, 0.4); }
.category-placeholder { /* İsteğe bağlı: Yedek kategorileri farklı göstermek için */
    opacity: 0.7;
    /* background-color: rgba(255, 255, 255, 0.1); */
}

/* Reklam Alanları - Geçici olarak devre dışı
.ad { 
    background-color: rgba(0, 0, 0, 0.2); 
    border-radius: 10px; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    padding: 1rem; 
    text-align: center; 
    color: rgba(255, 255, 255, 0.7); 
    font-size: 0.9rem; 
    border: 1px dashed rgba(255, 255, 255, 0.2); 
}
.ad p { font-weight: 600; margin-bottom: 0.5rem; }
.ad-left { width: 160px; height: 600px; flex-shrink: 0; position: sticky; top: 1rem; }
.ad-bottom { width: 100%; height: 90px; margin: 2rem 0; }
*/

/* DEĞİŞİKLİK: Yeni Rastgele Butonlar Bölümü Stilleri */
.random-buttons-section {
    width: 160px;
    flex-shrink: 0;
    background-color: rgba(0, 0, 0, 0.3);
	border-radius: 10px;
    padding: 1.5rem 1rem;
    border: 1px dashed rgba(255, 255, 255, 0.2);
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* Boşlukları artırdık */
}
.random-buttons-section h3 { text-align: center; font-size: 1.1rem; color: rgba(255, 255, 255, 0.9); margin-bottom: 0.5rem; }

#random-buttons-container {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* Butonlar arası boşluk */
    flex-grow: 1;
}

.random-button {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 10px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.85rem;
    line-height: 1.2;
    transition: all 0.3s ease;
    min-height: 42px;
    margin-bottom: 8px;
    width: 100%;
}

.random-button-logo {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 6px;
    background-color: rgba(0, 0, 0, 0.1);
    background: transparent; /* Tüm logo arka planlarını şeffaf yap */
}

.random-button span {
    flex: 1;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -moz-box;
    -moz-line-clamp: 2;
    -moz-box-orient: vertical;
    display: box;
    line-clamp: 2;
    box-orient: vertical;
    max-height: 2.4em; /* line-height * number of lines */
    line-height: 1.2;
}

#refresh-random-buttons { /* Yenile Butonu */
    background-color: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff; padding: 0.5rem; border-radius: 8px; cursor: pointer; font-weight: 600;
    transition: background-color 0.3s ease; display: flex; align-items: center; justify-content: center; gap: 0.4rem;
}
#refresh-random-buttons:hover { background-color: rgba(255, 255, 255, 0.2); }
/* DEĞİŞİKLİK BİTTİ */

/* --- YENİ: KATEGORİ SAYFASI STİLLERİ --- */
.category-page-content {
    width: 100%;
    margin: 0 auto;
}

.category-title {
    font-size: 2.2rem; /* 2rem'den artırdık */
    font-weight: 600;
    text-align: center;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.3);
}
.category-title i {
    font-size: 1.5rem; /* İkonu biraz küçülttük */
}

.tool-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Kart genişliği */
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.tool-card {
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 1.5rem;
    color: #fff;
    text-decoration: none;
    display: flex;
    gap: 1rem;
    align-items: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.tool-card:hover {
    background-color: rgba(255, 255, 255, 0.18);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}

.tool-icon {
    font-size: 2rem;
    flex-shrink: 0;
    width: 50px; /* Sabit ikon alanı */
    text-align: center;
    opacity: 0.8;
}

.tool-info h3 {
    font-size: 1.3rem; /* 1.1rem'den artırdık */
    font-weight: 600;
    margin-bottom: 0.3rem;
}

.tool-info p {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -moz-box;
    -moz-line-clamp: 2;
    -moz-box-orient: vertical;
    display: box;
    line-clamp: 2;
    box-orient: vertical;
    max-height: 2.4em; /* line-height * number of lines */
    line-height: 1.2;
}

.suggestions-section {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.suggestions-section h3 {
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 1.3rem;
    font-weight: 600;
}
.suggestions-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}
.suggestion-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    text-decoration: none;
    color: #fff;
    transition: all 0.3s ease;
}
.suggestion-logo {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
    background-color: rgba(255, 255, 255, 0.1);
    background: transparent; /* Tüm logo arka planlarını şeffaf yap */
}
.suggestion-info {
    flex: 1;
}
.suggestion-info h4 {
    font-size: 1rem;
    margin: 0 0 4px 0;
}
.suggestion-info p {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -moz-box;
    -moz-line-clamp: 2;
    -moz-box-orient: vertical;
    display: box;
    line-clamp: 2;
    box-orient: vertical;
    max-height: 2.4em; /* line-height * number of lines */
    line-height: 1.2;
}
.suggestion-card:hover {
    background-color: rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
}
/* --- KATEGORİ SAYFASI STİLLERİ BİTTİ --- */

/* Footer (Aynı Kalıyor) */
.site-footer {
    text-align: center;
    padding: 1rem;
    background-color: rgba(0, 0, 0, 0.2);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
}

/* Responsive Tasarım Güncellemeleri */
@media (min-width: 768px) { /* Orta boyut ve üstü için yazı göster */
    .header-button span {
        display: inline;
    }
}

@media (max-width: 1200px) {
    .main-wrapper { padding: 1.5rem; gap: 1.5rem; }
    .category-collage { gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
    .content-area { width: calc(100% - 160px - 160px - 3rem); }
}

@media (max-width: 992px) {
    .header-container { justify-content: space-between; } /* Butonlar sağda kalsın */
    .main-wrapper { flex-direction: column; align-items: center; }
    .ad-left { order: 3; width: 100%; height: 90px; position: static; }
    .random-buttons-section { order: 4; width: 100%; max-width: 400px; min-height: auto; /* Yüksekliği otomatik yap */ padding-bottom: 1.5rem; }
    #random-buttons-container {
        /* Butonlar yan yana dizildiği için */
         gap: 0.8rem;
    }
    .random-button {
        /* width: calc(50% - 0.4rem); */ /* Genişliği ayarlayabilirsin */
        padding: 0.5rem 0.6rem;
        min-height: 40px;
        gap: 6px;
    }
    .random-button-logo {
        width: 20px;
        height: 20px;
    }
     .random-button span {
         font-size: 0.85rem;
     }
    .content-area { order: 2; width: 100%; max-width: 100%; }
    .category-collage { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
    .category-button { min-height: 120px; padding: 1rem 0.8rem; }
    .tool-list { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
    .iframe-container {
        padding-top: 56.25%; /* 16:9 aspect ratio */
    }
}

@media (max-width: 576px) {
    .header-container { padding: 0 1rem; height: 80px; }  /* Yüksekliği artırdık */
    .site-header .logo img { max-height: 60px; }  /* Logo boyutunu artırdık */
    .header-button { padding: 0.5rem; } /* Sadece ikon sığsın diye */
    .header-button span { display: none; } /* Yazıyı kesin gizle */
    .header-actions { gap: 0.5rem; }

    .main-wrapper { padding: 1rem; gap: 1rem; }
    .category-collage { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 0.6rem; }
    .category-button { min-height: 100px; padding: 0.6rem 0.4rem; border-radius: 10px; }
    .category-button i { font-size: 1.2em; margin-bottom: 0.4rem; }
    .category-button span { font-size: 0.75rem; }
    .ad-left, .random-buttons-section, .ad-bottom { font-size: 0.8rem; }
    #random-buttons-container {
         gap: 0.6rem;
     }
    .random-button {
        /* width: calc(50% - 0.3rem); */
        min-height: 38px;
         gap: 5px;
    }
     .random-button-logo {
         width: 18px;
         height: 18px;
     }
     .random-button span {
         font-size: 0.8rem;
     }
    .category-title { font-size: 1.5rem; }
    .tool-list { grid-template-columns: 1fr; gap: 1rem;} /* Tek sütun */
    .tool-card { padding: 1rem; }
    .suggestions-list a { padding: 0.5rem 1rem; font-size: 0.8rem;}
    .iframe-container {
        padding-top: 56.25%; /* Keep 16:9 even on mobile */
    }
    .iframe-description {
        font-size: 0.85rem;
        padding: 0 0.5rem;
    }
}
/* --- YENİ: ARAMA MODAL STİLLERİ --- */
.modal {
    display: none; /* Varsayılan olarak gizli */
    position: fixed; /* Sayfada sabit kal */
    z-index: 1000; /* Diğer her şeyin üstünde */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* İçerik taşarsa scroll çıksın */
    background-color: rgba(0, 0, 0, 0.6); /* Yarı saydam siyah arka plan */
    backdrop-filter: blur(3px); /* Arka planı hafif bulanıklaştır */
    animation: fadeInModal 0.3s ease-out; /* Yumuşak açılış */
}

@keyframes fadeInModal {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-content {
    background-color: #2c3e50; /* Koyu tema */
    color: #ecf0f1; /* Açık renk yazı */
    margin: 10% auto; /* Ortala (üstten %10 boşluk) */
    padding: 25px 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    width: 90%;
    max-width: 600px; /* Maksimum genişlik */
    border-radius: 15px;
    position: relative;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.3);
    animation: slideInModal 0.4s ease-out; /* İçerik kayarak gelsin */
}

@keyframes slideInModal {
    from { transform: translateY(-30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}


.close-modal {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 32px;
    font-weight: bold;
    line-height: 1;
}

.close-modal:hover,
.close-modal:focus {
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

.modal-content h3 {
    margin-top: 0;
    margin-bottom: 1.5rem;
    text-align: center;
    font-size: 1.4rem;
    color: #fff;
}

#search-input {
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    font-size: 1rem;
    color: #fff;
    outline: none; /* Tıklama çerçevesini kaldır */
    transition: border-color 0.3s ease;
}

#search-input:focus {
    border-color: #86a8e7; /* Gradientten bir renk */
}

#search-results {
    max-height: 300px; /* Sonuçlar çok uzarsa scroll */
    overflow-y: auto;
    padding-right: 10px; /* Scroll bar için boşluk */
}

#search-results a {
    display: flex; /* Logo ve metni yan yana getir */
    align-items: center; /* Dikeyde ortala */
    gap: 10px; /* Logo ve metin arası boşluk */
    padding: 10px 15px;
    color: #ecf0f1;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: background-color 0.2s ease;
    font-size: 0.95rem;
}

#search-results a:last-child {
    border-bottom: none;
}

#search-results a:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

#search-results .no-results {
    color: #bdc3c7;
    padding: 15px;
    text-align: center;
    font-style: italic;
}

/* Arka plan scroll'unu engelle (Modal açıkken body'e eklenir) */
body.modal-open {
    overflow: hidden;
}

/* --- ARAMA MODAL STİLLERİ BİTTİ --- */
/* --- IFRAME SAYFASI STİLLERİ --- */
.iframe-page-content .category-title.iframe-title {
    margin-bottom: 1rem; /* Başlık altı boşluğu azalt */
}

.iframe-container {
    position: relative;
    width: 100%;
    /* height: 75vh; */ /* Yüksekliği ayarla - veya aspect-ratio kullan */
    padding-top: 65%; /* 16:9 Oranı için (height / width * 100) - Ayarlayabilirsin */
    overflow: hidden;
    border-radius: 10px; /* Kenarları yumuşat */
    background-color: rgba(0,0,0,0.2); /* Yüklenirken arka plan */
    margin-bottom: 1.5rem;
}

.iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none; /* Çerçeveyi kaldır */
}

.iframe-description {
    text-align: center;
    font-size: 0.95rem;
    opacity: 0.9;
    margin-bottom: 1.5rem;
    padding: 0 1rem;
}

/* Responsive Iframe */
 @media (max-width: 992px) {
    .iframe-container {
        padding-top: 56.25%; /* 16:9 aspect ratio */
    }
 }
 @media (max-width: 576px) {
    .iframe-container {
        padding-top: 56.25%; /* Keep 16:9 even on mobile */
    }
    .iframe-description {
        font-size: 0.85rem;
        padding: 0 0.5rem;
    }
 }
 /* --- YENİ/GÜNCELLENMİŞ STİLLER --- */

/* Kategori Sayfası Araç Kartı Logosu */
.tool-card .tool-logo {
    flex-shrink: 0;
    width: 75px; /* 50px'den 75px'e çıkardık */
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.1); /* Logo arkası hafif renk */
    border-radius: 8px; /* Yumuşak köşe */
    overflow: hidden; /* Taşan kısımları gizle */
    background: transparent; /* Logo container arka planlarını şeffaf yap */
}

.tool-card .tool-logo img {
    display: block;
    max-width: 100%; /* 80%'den 100%'e çıkardık */
    max-height: 100%;
    object-fit: contain; /* Oranı koruyarak sığdır */
    background: transparent; /* Tüm logo arka planlarını şeffaf yap */
}

/* Araç Sayfası Başlık Logosu (renderIframePage/renderVkiCalculator vb. içindeki) */
.category-title .tool-title-logo {
     height: 2rem; /* Başlık font boyutuyla orantılı */
     width: auto;
     margin-right: 0.8rem; /* Başlık yazısıyla arası */
     vertical-align: middle; /* Dikey hizalama */
     border-radius: 4px; /* Hafif köşe yuvarlama */
     /* background-color: rgba(255, 255, 255, 0.1); /* İsteğe bağlı arka plan */
     background: transparent; /* Tüm logo arka planlarını şeffaf yap */
}
/* Remove empty ruleset and replace with proper styling */
.category-title.iframe-title i,
.vki-calculator-container h2.category-title i {
    display: none; /* Hide icons when using logos */
}

/* Arama Sonuçları Logosu */
 #search-results a {
    /* display: block; yerine: */
    display: flex; /* Logo ve metni yan yana getir */
    align-items: center; /* Dikeyde ortala */
    gap: 10px; /* Logo ve metin arası boşluk */
    /* ... diğer #search-results a stilleri ... */
 }

 .search-result-logo {
     width: 30px; /* Küçük logo boyutu */
     height: 30px;
     flex-shrink: 0; /* Küçülmesin */
     object-fit: contain;
     border-radius: 4px;
     background-color: rgba(255, 255, 255, 0.05); /* Hafif arka plan */
     background: transparent; /* Tüm logo arka planlarını şeffaf yap */
 }

 #search-results a span { /* Arama sonucundaki metin */
     flex-grow: 1; /* Kalan alanı doldur */
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }

/* --- STİL GÜNCELLEMELERİ BİTTİ --- */
/* --- IFRAME SAYFASI STİLLERİ BİTTİ --- */
/* --- YENİ: VKİ HESAPLAMA ARACI STİLLERİ --- */
.vki-calculator-container {
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 15px;
    padding: 2rem 2.5rem;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    max-width: 800px; /* Hepsini aynı genişliğe getirdik */
    margin: 1rem auto; /* Ortala ve üst/alt boşluk */
    color: #fff;
}

.vki-calculator-container h2.category-title { /* Mevcut başlık stilini kullan ama özelleştir */
    font-size: 1.8rem;
    margin-bottom: 2rem;
}

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

.vki-form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    font-size: 0.95rem;
    opacity: 0.9;
}

.vki-form-group input[type="number"] {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    font-size: 1rem;
    color: #fff;
    outline: none;
    transition: border-color 0.3s ease, background-color 0.3s ease;
    appearance: textfield; /* Spin butonlarını gizle (isteğe bağlı) */
    -moz-appearance: textfield; /* Firefox için */
}
.vki-form-group input[type="number"]::-webkit-outer-spin-button,
.vki-form-group input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none; /* Chrome/Safari spin butonları gizle */
    margin: 0;
}


.vki-form-group input[type="number"]:focus {
    border-color: #86a8e7; /* Vurgu rengi */
    background-color: rgba(0, 0, 0, 0.25);
}

.vki-calculate-button {
    display: block;
    width: 100%;
    background: linear-gradient(135deg, #86a8e7, #91eae4); /* Buton gradient */
    color: #1a1a1a; /* Koyu yazı */
    border: none;
    padding: 14px 20px;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 2rem;
    box-shadow: 0 4px 15px rgba(134, 168, 231, 0.3);
}

.vki-calculate-button:hover {
    opacity: 0.9;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(134, 168, 231, 0.4);
}

#vki-result {
    margin-top: 2.5rem;
    padding: 1.5rem;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    text-align: center;
    border: 1px dashed rgba(255, 255, 255, 0.2);
    display: none; /* Başlangıçta gizli */
}
/* --- GÜNCELLENEN VKİ METRE STİLLERİ --- */
.vki-meter-container {
    margin: 2rem auto 1.5rem auto;
    max-width: 100%;
    padding: 0 10px;
}



/* DEĞİŞİKLİK: Eşit Genişlikler */
.vki-meter-segment.zayif { width: 25%; background-color: #86a8e7; }
.vki-meter-segment.normal { width: 25%; background-color: #91eae4; }
.vki-meter-segment.kilolu { width: 25%; background-color: #ffcc5c; }
.vki-meter-segment.obez { width: 25%; background-color: #ff7e5f; }

/* DEĞİŞİKLİK: Göstergeyi Çizgi Yapma ve Konumlandırma */
#vki-indicator {
    position: absolute;
    bottom: -2px;
    left: 0; /* JS ile ayarlanacak */
    width: 3px;
    height: 19px;
    background-color: #fff;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
    border-radius: 2px;
    transform: translateX(-50%);
    transition: left 0.5s ease-out;
    z-index: 2;
    opacity: 0;
}
#vki-indicator.show {
    opacity: 1;
}
.vki-meter {
    position: relative;
    width: 100%;
    height: 15px;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    margin-bottom: 0; /* Etiketler için boşluk kaldırıldı, label container'a eklendi */
}
.vki-meter-segment { height: 100%; }
.vki-meter-segment.zayif { width: 25%; background-color: #86a8e7; }
.vki-meter-segment.normal { width: 25%; background-color: #91eae4; }
.vki-meter-segment.kilolu { width: 25%; background-color: #ffcc5c; }
.vki-meter-segment.obez { width: 25%; background-color: #ff7e5f; }

.vki-meter-labels {
    display: flex; /* Flexbox kullan */
    justify-content: space-around; /* Eşit boşluk bırak (veya space-between) */
    padding: 0 5px; /* Kenarlardan hafif boşluk */
    font-size: 0.8rem;
    opacity: 0.8;
    margin-top: 4px; /* Metre ile arasına boşluk */
    height: auto; /* Yüksekliği kaldır */
    position: static; /* Absolute konumlandırmayı kaldır */
}

.vki-meter-labels span {
    flex: 1; /* Eşit yer kapla */
    text-align: center; /* Metni ortala */
    white-space: nowrap; /* Bölünmesin */
    /* position: absolute; Kaldırıldı */
    /* transform: translateX(-50%); Kaldırıldı */
    /* left: ...%; Kaldırıldı */
}

/* İsteğe bağlı: Etiketlere kendi segment renklerini verebiliriz */
.vki-meter-labels .label-zayif { color: #86a8e7; }
.vki-meter-labels .label-normal { color: #91eae4; }
.vki-meter-labels .label-kilolu { color: #ffcc5c; }
.vki-meter-labels .label-obez { color: #ff7e5f; }

/* Etiketleri doğru konumlara itmek için boşluklar */
/* İlk etiket (%25'e denk gelecek şekilde) */

/* --- VKİ METRE STİLLERİ BİTTİ --- */

#vki-result.show { /* Göstermek için class */
    display: block;
    animation: fadeInResult 0.5s ease-out;
	margin-top: 1.5rem; /* Metreden sonra daha az boşluk */
}

@keyframes fadeInResult {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}


#vki-result h3 {
    margin-top: 0;
    margin-bottom: 0.8rem;
    font-size: 1.3rem;
    color: #fff;
}

#vki-value {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    display: block;
    color: #91eae4; /* Vurgu rengi */
    text-shadow: 0 0 10px rgba(145, 234, 228, 0.5);
}

#vki-category {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    display: block;
}

/* Farklı VKİ kategorileri için renkler (isteğe bağlı) */
#vki-category.zayif { color: #86a8e7; }
#vki-category.normal { color: #91eae4; }
#vki-category.kilolu { color: #ffcc5c; }
#vki-category.obez { color: #ff7e5f; }

#vki-recommendation p {
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 0.5rem;
    opacity: 0.9;
}

#vki-recommendation p:last-child {
    margin-bottom: 0;
}

/* Hata Mesajı Stili */
.vki-error-message {
    color: #ff7e5f; /* Hata rengi */
    font-size: 0.9rem;
    text-align: center;
    margin-top: 1.5rem;
    display: none; /* Başlangıçta gizli */
}

/* --- VKİ HESAPLAMA ARACI STİLLERİ BİTTİ --- */

/* --- AI GÖRSEL OLUŞTURUCU STİLLERİ --- */
.ai-image-generator-container {
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 15px;
    padding: 2rem;
    max-width: 800px; /* Hepsini aynı genişliğe getirdik */
    margin: 1rem auto;
    color: #fff;
}

.ai-image-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 2rem;
}

.ai-image-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ai-image-form .form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}

.ai-image-form label {
    font-weight: 600;
    font-size: 0.95rem;
}

.ai-image-form textarea {
    padding: 12px 15px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    font-size: 1rem;
    color: #fff;
    min-height: 100px;
    resize: vertical;
}

.ai-image-form input[type="number"] {
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    font-size: 0.9rem;
    color: #fff;
}

.ai-image-form small {
    font-size: 0.8rem;
    opacity: 0.8;
}

.ai-image-form select {
    padding: 12px 15px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    font-size: 0.95rem;
    color: #fff;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
    transition: all 0.3s ease;
}

.ai-image-form select:hover {
    background-color: rgba(0, 0, 0, 0.25);
    border-color: rgba(255, 255, 255, 0.3);
}

.ai-image-form select:focus {
    outline: none;
    border-color: #86a8e7;
    box-shadow: 0 0 0 2px rgba(134, 168, 231, 0.2);
}

.generate-button {
    background: linear-gradient(135deg, #86a8e7, #91eae4);
    color: #1a1a1a;
    border: none;
    padding: 14px 20px;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 1rem;
    box-shadow: 0 4px 15px rgba(134, 168, 231, 0.3);
}

.generate-button:hover {
    opacity: 0.9;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(134, 168, 231, 0.4);
}

.result-container {
    margin-top: 2rem;
    text-align: center;
}

#generated-image {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* Loading Animasyonu Stilleri */
.result-container .loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: #fff;
    gap: 1rem;
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #86a8e7;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Mobil Duyarlı Tasarım */
@media (max-width: 576px) {
    .ai-image-generator-container {
        padding: 1.5rem;
        margin: 1rem;
    }

    .ai-image-form .form-row {
        grid-template-columns: 1fr;
    }
}

/* Password Generator Styles */
.password-container {
    max-width: 800px; /* Hepsini aynı genişliğe getirdik */
    margin: 0 auto;
    padding: 2rem;
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 15px;
}

.password-options {
    display: grid;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.password-length {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.password-length input[type="range"] {
    flex-grow: 1;
}

.password-length span {
    min-width: 3em;
    text-align: center;
}

.checkbox-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.checkbox-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

.password-result {
    position: relative;
    margin-bottom: 1.5rem;
}

.password-field {
    width: 100%;
    padding: 12px 15px;
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #fff;
    font-size: 1.1rem;
    font-family: monospace;
    margin-bottom: 0.5rem;
}

.copy-button {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
}

.copy-button:hover {
    background: rgba(255, 255, 255, 0.2);
}

.generate-button {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #86a8e7, #91eae4);
    border: none;
    border-radius: 8px;
    color: #1a1a1a;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s;
}

.generate-button:hover {
    transform: translateY(-2px);
}

.password-strength {
    margin-top: 1rem;
    text-align: center;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
}

.strength-meter {
    height: 4px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 2px;
    margin-top: 0.5rem;
    overflow: hidden;
}

.strength-meter div {
    height: 100%;
    width: 0;
    transition: width 0.3s, background-color 0.3s;
}

/* AI Görsel Üretici Sonuç Alanı */
.image-result {
    margin-top: 2rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    padding: 1rem;
    text-align: center;
}

.image-result img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    margin-bottom: 1rem;
}

.image-info {
    text-align: left;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
    font-size: 0.9rem;
}

.image-info p {
    margin: 0.5rem 0;
    opacity: 0.9;
}

.image-info p:first-child {
    margin-top: 0;
}

.image-info p:last-child {
    margin-bottom: 0;
}

.image-info strong {
    color: #91eae4;
}

/* Yeni UI elementleri için CSS stilleri */
.seed-input-group {
    display: flex;
    gap: 0.5rem;
}

.seed-input-group input {
    flex: 1;
}

.random-seed-button {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    border-radius: 6px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.random-seed-button:hover {
    background: rgba(255, 255, 255, 0.2);
}

.options-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
}

.variation-button {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.variation-button:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.2);
}

.variation-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.variation-button i {
    font-size: 0.9em;
}

/* Boyama Sayfası Üretici Stilleri */
.coloring-page-generator-container {
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 15px;
    padding: 2rem;
    max-width: 800px; /* Hepsini aynı genişliğe getirdik */
    margin: 1rem auto;
    color: #fff;
}

.tool-description {
    text-align: center;
    margin-bottom: 2rem;
    padding: 0 1rem;
}

.tool-description p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.tips-box {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    padding: 1.5rem;
    margin-top: 2rem;
}

.tips-box h4 {
    font-size: 1.1rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.tips-box h4 i {
    color: #ffcc5c;
}

.tips-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    text-align: left;
}

.tip-category {
    background: rgba(255, 255, 255, 0.05);
    padding: 1rem;
    border-radius: 8px;
}

.tip-category h5 {
    color: #91eae4;
    margin-bottom: 0.8rem;
    font-size: 0.9rem;
}

.tip-category span {
    display: inline-block;
    background: rgba(255, 255, 255, 0.1);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    margin: 0 4px 4px 0;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tip-category span:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.coloring-page-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 2rem;
}

.coloring-page-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.coloring-page-form label {
    font-weight: 600;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.coloring-page-form textarea {
    padding: 12px 15px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    font-size: 1rem;
    color: #fff;
    min-height: 100px;
    resize: vertical;
    transition: all 0.3s ease;
}

.coloring-page-form textarea:focus {
    border-color: #86a8e7;
    background-color: rgba(0, 0, 0, 0.25);
    outline: none;
}

.coloring-page-form small {
    font-size: 0.8rem;
    opacity: 0.8;
    line-height: 1.4;
}

.coloring-page-form .form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.coloring-page-form select {
    padding: 12px 15px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    font-size: 0.95rem;
    color: #fff;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
}

.coloring-page-form select:focus {
    border-color: #86a8e7;
    outline: none;
}

/* Yazdırma Stilleri */
@media print {
    body * {
        visibility: hidden;
    }
    
    #generated-image {
        visibility: visible;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: auto;
        max-width: 100%;
        max-height: 100%;
    }
    
    .header-container,
    .suggestions-section,
    .form-container,
    .image-info,
    .image-actions {
        display: none !important;
    }

    @page {
        size: auto;
        margin: 0;
    }
}

/* Mobil Duyarlı Tasarım */
@media (max-width: 576px) {
    .coloring-page-generator-container {
        padding: 1.5rem;
        margin: 1rem;
    }

    .tips-content {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .tip-category {
        padding: 0.8rem;
    }

    .coloring-page-form .form-row {
        grid-template-columns: 1fr;
    }
}

/* İndirme Butonu Stilleri */
.image-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin: 1rem 0;
}

.download-button {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
}

.download-button:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.download-button i {
    font-size: 1.1em;
}