/* Genel Stil Ayarları başlad */
.grid {
    display: grid;
    gap: 1rem; /* Grid hücreleri arasında boşluk bırakır */
}
/* Genel Stil Ayarları bitti */

/* Tek sütun grid sistemi başladı */
.grid-cols-1 {
    grid-template-columns: 1fr; /* Grid içinde bir sütun oluşturur */
}
/* Tek sütun grid sistemi bitti */

/* Üç sütun grid sistemi başladı */
.grid-cols-3 {
    grid-template-columns: repeat(3, 1fr); /* Grid içinde ç eşit sütun oluşturur */
}
/* Üç sütun grid sistemi bitti */

/* Tam genişlik ayarı başladı */
.w-full {
    width: 100%; /* Elemanın genişliğini %100 yapar */
}
/* Tam genişlik ayarı bitti */

/* İç boşluk ayarı başladı */
.p-2 {
    padding: 0.5rem; /* Elemanın tüm kenarlarına 0.5rem iç boşluk ekler */
}
/* İç boşluk ayarı bitti */

/* Blok görünüm ayarı başladı */
.block {
    display: block; /* Eleman blok düzene getirir */
}
/* Blok görünüm ayarı bitti */

/* Kenarlık ayarı başladı */
.border {
    border: 1px solid #ccc; /* Elemanın çevresine 1px gri kenarlık ekler */
}
/* Kenarlık ayarı bitti */

/* Slate renkli kenarlık ayarı başladı */
.border-slate-200 {
    border-color: #e2e8f0; /* Elemanın kenarlık rengini slate (hafif gri-mavi) yapar */
}
/* Slate renkli kenarlık ayarı bitti */

/* Yuvarlak kenar ayarı başladı */
.rounded-lg {
    border-radius: 0.5rem; /* Köşelere 0.5rem yuvarlama ekler */
}
/* Yuvarlak kenar ayarı bitti */

/* Yazı boyutu ayarı başladı */
.text-base {
    font-size: 1rem; /* Yazı boyutunu 1rem olarak ayarlar */
}
/* Yazı boyutu ayarı bitti */

/* Metin ortalama ayarı başladı */
.text-center {
    text-align: center; /* Metni yatayda ortalar */
}
/* Metin ortalama ayarı bitti */

/* Buton Stilleri başladı */
.sira-bul-button {
    background-color: #007bff; /* Butonun arka plan rengini mavi yapar */
    color: white; /* Yazı rengini beyaz yapar */
    border: none; /* Kenarlık kaldırılır */
    padding: 10px 15px; /* Butona iç boşluk ekler */
    font-size: 16px; /* Yazı boyutunu 16px yapar */
    font-weight: bold; /* Yazıyı kalın yapar */
    border-radius: 6px; /* Köşelere yuvarlama ekler */
    cursor: pointer; /* Fare imlecini işaretçiye dönüştürür */
    width: 100%; /* Butonu tam genişlik yapar */
}
/* Buton Stilleri bitti */

/* Devre dışı buton stili başladı */
.sira-bul-button:disabled {
    background-color: #0056b3; /* Devre dışı olduğunda buton koyu mavi olur */
    cursor: not-allowed; /* Fare imlecini yasak işareti yapar */
}
/* Devre dışı buton stili bitti */

/* Captcha alanı stili başladı */
.captcha {
    display: flex; /* Flex düzen uygular */
    flex-direction: column; /* Elemanları dikey hizalar */
    align-items: center; /* Elemanları yatayda ortalar */
}
/* Captcha alanı stili bitti */

/* Form alanı stili başladı */
.form-area {
    display: grid; /* Grid düzen uygular */
    gap: 1rem; /* Grid elemanları arasında boşluk bırakır */
    grid-template-columns: 1fr; /* Tek sütun oluşturur */
    width: 100%; /* Elemanın genişliğini %100 yapar */
}
/* Form alanı stili bitti */

/* Form kontrol alanı stili başladı */
.form-control {
    width: 100%; /* Elemanı tam genişlik yapar */
    height: 40px; /* Yüksekliği 40px yapar */
    border: 1px solid #ddd; /* Kenarlğa açık gri renk ekler */
    border-radius: 6px; /* Köşelere yuvarlama ekler */
    font-size: 16px; /* Yazı boyutunu 16px yapar */
}
/* Form kontrol alanı stili bitti */

/* Form etiket stili başladı */
.form-label {
    flex: 0 0 100%; /* Etiket tam genişlik kaplar */
    font-weight: bold; /* Yazıyı kalın yapar */
    padding-bottom: 5px; /* Altına 5px boşluk brakır */
    display: block; /* Etiketi blok düzene getirir */
}
/* Form etiket stili bitti */

/* Form ikonu stili başladı */
.form-label i {
    margin-right: 5px; /* İkona sağdan 5px boşluk bırakır */
    font-size: 28px; /* İkon boyutunu 28px yapar */
    color: #007bff; /* İkon rengini mavi yapar */
    vertical-align: middle; /* İkonu ortalar */
}
/* Form ikonu stili bitti */

/* Form grup stili başladı */
.form-group {
    margin-bottom: 15px; /* Altına 15px boşluk bırakır */
}
/* Form grup stili bitti */

/* Responsive Ayarlar başladı */
@media (min-width: 1024px) {
    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, 1fr); /* 3 sütun oluşturur */
    }

    .lg\:flex-row {
        flex-direction: row; /* Flex elemanlarını yatay hizalar */
    }

    .captcha {
        flex-direction: row; /* Captcha elemanlarını yatay hizalar */
    }

    .form-area {
        grid-template-columns: repeat(3, 1fr); /* 3 sütun grid düzeni oluşturur */
    }
}
/* Responsive Ayarlar bitti */

/* Flex düzen stili başladı */
.flex {
    display: flex; /* Flex düzen uygular */
}
.flex-col {
    flex-direction: column; /* Elemanları dikey hizalar */
}
.items-center {
    align-items: center; /* Elemanları yatayda ortalar */
}
.justify-center {
    justify-content: center; /* Elemanları dikeyde ortalar */
}
/* Flex düzen stili bitti */



/* 31 BAŞLADI  */


/* Sonuç kartı düzeni başladı 31*/
.result-card {
    background-color: #ffffff; /* Beyaz arka plan rengi */
    border: 1px solid #d1d5db; /* Kenarlığa açık gri renk ekler */
    padding: 1rem; /* İç boşluk ekler */
    border-radius: 8px; /* Köşelere yuvarlama ekler */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Hafif gölge ekler */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Hover için animasyon */
}
/* Sonuç kartı düzeni bitti  */

/* Hover efekti başladı */
.result-card:hover {
    transform: translateY(-3px); /* Kartı yukarı kaydırır */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); /* Gölgeyi belirginleştirir */
}
/* Hover efekti bitti */

/* Kart içeriği düzeni başladı */
.result-card-content {
    display: flex; /* Flex düzen uygular */
    flex-direction: row; /* Elemanları yatay hizalar */
    gap: 1rem; /* Elemanlar arasında boşluk bırakır */
}
/* Kart içeriği düzeni bitti */

/* Rank bölümü düzeni başladı */
.result-rank {
    display: flex; /* Flex dzen uygular */
    align-items: center; /* Elemanları ortalar */
    justify-content: center; /* Elemanları yatayda ortalar */
    min-height: 3rem; /* Minimum yüksekliği 3rem yapar */
    height: 3rem; /* Yüksekliği 3rem yapar */
    min-width: 3rem; /* Minimum genişliği 3rem yapar */
    width: 3rem; /* Genişliği 3rem yapar */
    background-color: #027DC2; /* Arka plan rengini mavi yapar */
    border-radius: 50%; /* Tam yuvarlak bir şekil oluşturur */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Hafif gölge ekler */
}
/* Rank bölümü düzeni bitti */


/* Rank bölümü vurgulu daire stili başladı */
.result-rank.highlighted-circle {
    background-color: #006621; /* Arka plan rengini yeşil yapar */
}
/* Rank bölümü vurgulu daire stili bitti 31*/

/* Sonuç başlık düzeni başladı */
.result-title {
    padding-left: 12px;
    border-left: 4px solid #027DC2; /* Sol tarafa mavi bir kenarlık ekler */
}
/* Sonuç başlık düzeni bitti */

/* Vurgulu başlık düzeni başladı */
.result-title.highlighted-title {
    border-left: 4px solid #006621 !important; /* Sol kenarlığı yeşil yapar ve önem derecesini artırır */
}

.result-link {
    margin-top: 14px;
}
/* Vurgulu başlık düzeni bitti */

/* Sıra metni stili başladı */
.rank-text {
    color: #ffffff; /* Yazı rengini beyaz yapar */
    font-size: 1.25rem; /* Yazı boyutunu artırır */
    font-weight: bold; /* Yazıy kalın yapar */
}
/* Sıra metni stili bitti */


/* Başlık ve link düzeni başladı */
.result-details {
    margin-top: 14px;
}
.result-details .title-text {
    font-size: 1.125rem; /* Başlık yazı boyutunu ayarlar */
    color: #1A0DAB; /* Başlık rengini mavi yapar */
    font-weight: 400; /* Yazıyı orta kalınlıkta yapar */
    word-break: break-all !important;
    text-wrap: wrap;
}

.result-details .link-text {
    color: #006621; /* Link metni rengini yeşil yapar */
    font-size: 0.875rem; /* Yazı boyutunu küçültür */
    word-break: break-all !important;
    text-wrap: wrap;
}
/* Başlık ve link düzeni bitti */


/* 31 BİTTİ  */



/* Rank gösterge dairesi düzeni başladı */
.rank-indicator {
    height: 3rem; /* Yükseklik */
    width: 3rem; /* Genişlik */
    position: absolute; /* Bağıl konumlandırma */
    top: -1.5rem; /* Üstteki konum */
    left: 2%; /* Soldaki konum */
    transform: translateX(-50%); /* Ortalama */
    border-radius: 50%; /* Tam yuvarlak */
    display: flex; /* Flex düzen */
    justify-content: center; /* İçeriği yatay ortalar */
    align-items: center; /* İçeriği dikey ortalar */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Hafif gölge */
}
/* Rank gösterge dairesi düzeni bitti */

/* Pozitif rank göstergesi stili başladı */
.rank-indicator.positive {
    background-color: #22c55e; /* Yeşil arka plan */
    color: white; /* Beyaz yazı */
}
/* Pozitif rank göstergesi stili bitti */

/* Negatif rank göstergesi stili başladı */
.rank-indicator.negative {
    background-color: #ef4444; /* Kırmızı arka plan */
    color: white; /* Beyaz yazı */
}
/* Negatif rank göstergesi stili bitti */

/* Özellik kartı düzeni başladı */
.feature-card {
    background-color: #ffffff; /* Beyaz arka plan */
    border: 1px solid #d1d5db; /* Gri kenarlık */
    border-radius: 8px; /* Köşeleri yuvarla */
    padding: 1.5rem; /* İç boşluk ekler */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Hafif gölge ekler */
    margin-bottom: 20px; /* Altına boşluk bırakır */
}
/* Özellik kart düzeni bitti */

/* Özellik başlığı düzeni başladı */
.feature-header {
    display: flex; /* Flex düzen uygular */
    justify-content: center; /* Elemanları yatayda ortalar */
    align-items: center; /* Elemanları dikeyde ortalar */
    gap: 1rem; /* Elemanlar arası boluk */
    margin-bottom: 1rem; /* Altına boşluk bırakır */
}
.feature-header img {
    max-width: 25%; /* Görsel genişliğini sınırlar */
}
/* Özellik başlığı düzeni bitti */

/* Özellik öğesi düzeni başladı */
.feature-item {
    display: flex; /* Flex düzen uygular */
    align-items: center; /* Elemanları ortalar */
    gap: 1rem; /* Elemanlar arasında boşluk bırakır */
}
/* Özellik öğesi düzeni bitti */

/* lgili anahtar kelimeler düzeni başladı */
.related-keywords {
    background-color: #ffffff; /* Beyaz arka plan */
    border: 1px solid #d1d5db; /* Gri kenarlık */
    border-radius: 8px; /* Köşeleri yuvarla */
    padding: 1rem; /* İç boşluk ekler */
    text-align: center; /* Metni ortalar */
}
/* İlgili anahtar kelimeler düzeni bitti */

/* İlgili anahtar kelimeler başlığı düzeni başladı */
.related-keywords-header {
    display: flex; /* Flex düzen uygular */
    flex-direction: column; /* Elemanları dikey hizalar */
    justify-content: center; /* Elemanları ortalar */
    align-items: center; /* Elemanları yatayda ortalar */
    gap: 1rem; /* Elemanlar arasında boşluk bırakır */
}
/* İlgili anahtar kelimeler başlığı dzeni bitti */

/* Anahtar kelime öğesi stili başladı */
.keyword-item {
    padding: 0.5rem 1rem; /* Kenar boşluklarını ayarlar */
    font-size: 1rem; /* Yazı boyutunu ayarlar */
    border-top: 1px solid #e5e7eb; /* Üst kenarlık */
    color: #2563EB; /* Yazı rengi */
    transition: transform 0.2s ease, color 0.2s ease; /* Hover için animasyon */
}

.keyword-item:hover {
    transform: translateY(-2px); /* Hover sırasında yukarı kaydırır */
    color: #1D4ED8; /* Yazı rengini koyu mavi yapar */
}
/* Anahtar kelime öğesi stili bitti */



/* Responsive grid düzeni başladı */
.responsive-grid {
    display: grid; /* Grid düzen uygular */
    grid-template-columns: 1fr; /* Küçük ekranlar için tek sütun düzeni */
    gap: 1.5rem; /* Elemanlar arasında boşluk */
}

@media (min-width: 1024px) {
    .responsive-grid {
        grid-template-columns: repeat(12, 1fr); /* Büyük ekranlar için 12 sütun düzeni */
    }
}
/* Responsive grid düzeni bitti */

/* Organik sonuçlar düzeni başladı */
.organic-results {
    order: 2; /* Mobilde en sona yerleştirir */
    grid-column: span 12 / span 12; /* Küük ekranlarda tam genişlik kaplar */
    display: flex; /* Flex düzen uygular */
    flex-direction: column; /* Elemanları dikey hizalar */
    gap: 1rem; /* Elemanlar arasında boşluk bırakır */
}

@media (min-width: 1024px) {
    .organic-results {
        order: 1; /* Masaüstünde ilk sırada */
        grid-column: span 8 / span 8; /* Byük ekranlarda 8 sütun genişlik kaplar */
    }
}
/* Organik sonuçlar düzeni bitti */

/* Yan panel düzeni başladı */
.sidebar {
    order: 1; /* Mobilde ilk sırada */
    grid-column: span 12 / span 12; /* Mobilde tam genişlik kaplar */
}

@media (min-width: 1024px) {
    .sidebar {
        order: 2; /* Masaüstünde son sırada */
        grid-column: span 4 / span 4; /* Büyük ekranlarda 4 sütun genişlik kaplar */
    }
}
/* Yan panel düzeni bitti */

@media (max-width: 1024px) {
    .gizle {
        display: none;
    }
}


/* benim ayarlarım entegre */


/* benzer kelime css başladı */ 

/* Benzer Anahtar Kelimeler Konteyner */
.related-keywords-container {
    background-color: #ffffff;
    padding: 16px;
    border-radius: 16px;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
    border: 1px solid #d1d5db;
    margin-top: 24px;
    transition: all 0.3s ease-in-out;
}

.related-keywords-container:hover {
    transform: scale(1.05);
    box-shadow: 0 20px 25px rgba(0, 0, 0, 0.2);
}

/* Başlık */
.related-keywords-title {
    font-size: 1.5rem; /* Daha büyük yazı boyutu */
    font-weight: 600;
    color: #1f2937; /* Gray-800 */
    margin-bottom: 24px; /* Başlıkla altındaki çizgi arasında boşluk */
    text-align: center; /* Ortala */
    display: block; /* Çizgi ve başlık için düzenleme */
}

/* Çizgi */
.related-keywords-divider {
    width: 60%; /* Çizginin uzunluğu */
    height: 1px;
    background-color: #e5e7eb; /* Gray-200 */
    margin: 0 auto 16px auto; /* Ortala ve altına boşluk bırak */
}

/* Resim Ayarları */
.related-keywords-container img {
    max-width: 25%;
    height: auto;
    margin-bottom: 16px;
}

/* Anahtar Kelimeler Listesi */
.related-keywords-list {
    width: 100%;
}

.related-keyword-item {
    text-align: left;
    font-size: 18px;
    font-weight: 400;
    padding: 12px;
    border-top: 1px solid #9ca3af; /* Gray-400 */
    transition: transform 0.3s ease-in-out;
    color: #027BBF; /* Blue-500 */
    line-height: 1.75rem; /* 28px */
}

.related-keyword-item:hover {
    transform: scale(1.05);
    color: #1d4ed8; /* Blue-700 */
}

/* Responsive Tasarım */
@media (min-width: 768px) {
    .related-keywords-container {
        padding: 24px;
    }
    .related-keyword-item {
        font-size: 18px;
    }
}


.rank-info-body:hover {
    transform: scale(1.05);
}


/* benzer kelime css bitti  */ 



/* iconlu css sa taraf başladı */ 



/* Google Sıra Bulucu Konteyner */
.google-features-container {
    background-color: #ffffff;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
    border: 1px solid #d1d5db;
    margin-top: 24px;
    transition: all 0.3s ease-in-out;
}

.google-features-container:hover {
    transform: scale(1.05);
    box-shadow: 0 20px 25px rgba(0, 0, 0, 0.2);
}

/* Header */
.google-features-header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 16px;
}

.google-features-header img {
    max-width: 25%;
    height: auto;
}

/* Çizgi (Yeni Renk: #9ca3af) */
.google-features-divider {
    width: 100%; /* Çizginin uzunluğu */
    height: 1px;
    background-color: #9ca3af; /* Yeni renk: #9ca3af */
    margin: 16px auto; /* Ortala ve boşluk bırak */
    border: none; /* Kenarları kaldır */
}

/* Özellikler Listesi */
.google-features-list {
    margin-top: 16px;
}

.google-feature-item {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    transition: transform 0.3s ease-in-out;
}

.google-feature-item:hover {
    transform: scale(1.05);
}

.google-feature-icon {
    margin-right: 12px;
    font-size: 1.875rem;
    font-weight: bold;
    color: #1f2937;
}

.google-feature-item p {
    font-size: 1rem;
    color: #1f2937;
    line-height: 1.5rem;
}

/* Responsive Tasarım */
@media (min-width: 768px) {
    .google-features-container {
        padding: 32px;
    }
    .google-feature-item p {
        font-size: 1.125rem;
    }
}


/* iconlu css sağ taraf bitti */ 






/* PARMAK İŞARETİ CSS BAŞLADI */ 


/* Konum bilgi düzeni başladı */
.rank-info-text {
    position: relative; /* Bağıl konumlandırma */
    background-color: #ffffff; /* Beyaz arka plan */
    padding: 2rem; /* İç boşluk */
    border-radius: 1rem; /* Kşeleri yuvarla */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Hafif gölge */
    border: 1px solid #e5e7eb; /* Gri kenarlık */
    display: flex; /* Flex düzen */
    flex-direction: column; /* Elemanları dikey hizalar */
    align-items: center; /* Elemanları yatayda ortalar */
    justify-content: center; /* Elemanları dikeyde ortalar */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Hover için animasyon */
}

.rank-info-text:hover {
    transform: scale(1.05); /* Hover sırasında büyütür */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); /* Daha belirgin gölge */
}
/* Konum bilgi düzeni bitti */

/* Ana Kart Stili */
.rank-info-card {
    position: relative;
    background-color: #ffffff;
    padding: 1.5rem;
    border-radius: 1rem;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.rank-info-card:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

/* Üstteki Gradient Çizgi */
.gradient-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 8px;
    background: linear-gradient(to right, #3b82f6, #10b981, #14b8a6);
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    animation: pulse 1.5s infinite;
}

/* Parmaın Olduğu Bölüm */
.thumb-indicator {
    position: absolute;
    top: -20px;
    left: -15px;
    height: 50px;
    width: 50px;
    background-color: #22c55e;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transform: rotate(0deg);
    transition: transform 0.3s ease-in-out;
}

.rank-info-card:hover .thumb-indicator {
    transform: rotate(45deg);
}

/* Google Logosu */
.google-logo {
    height: 80px;
    margin-bottom: 1rem;
}

/* Metin Kartı */
.rank-info-text {
    text-align: center;
    padding: 1rem;
    background: linear-gradient(to bottom right, #fdfdfd, #f7f7f7);
    border: 1px solid #ccc;
    border-radius: 12px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-in-out;
}

.keyword-info {
    font-size: 1.25rem;
    color: #333;
    font-weight: bold;
    margin: 0;
}

.position-info {
    font-size: 1rem;
    color: #555;
    margin: 10px 0 0;
}

/* Gradient Animasyonu */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}



/* PARMAK İŞARETİ CSS BİTTİ */ 






/* sayfa ayırıcı css sayfa 2  sayfa 3 gibi her ilk 10 BAŞLADI  */ 



.custom-page-divider {
    margin: 25px 0;
    text-align: center;
    position: relative;
    width: 100%;
    font-family: Arial, sans-serif;
}

.custom-page-line {
    display: block;
    width: 100%;
    height: 4px; /* Çizgiyi kalınlaştırdık */
    background: linear-gradient(to right, #4285F4, #EA4335, #FBBC05, #34A853);
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 1;
}

.custom-page-label {
    display: inline-block;
    padding: 5px 20px;
    background-color: #fff;
    font-size: 18px;
    font-weight: bold;
    color: #333;
    z-index: 2;
    position: relative;
    border-radius: 50px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    letter-spacing: 1px;
}


/* sayfa ayırıcı css sayfa 2  sayfa 3 gibi her ilk 10 BİTTİ  */