/* ===================================================
   KAMAN UBYO 2026 - DARK AGENCY (KOYU AJANS) TEMA
=================================================== */

html { scroll-behavior: smooth; }

body {
    font-family: 'Montserrat', sans-serif;
    background-color: #0f1218; /* Koyu lacivert/siyah arka plan */
    color: #cbd5e1; /* Açık gri/beyaz metin */
    margin: 0;
    padding: 0;
    line-height: 1.7;
}

/* ---------------------------------------------------
   SABİT ÜST MENÜ (Dark Mode)
--------------------------------------------------- */
.ust-sabit-bar {
    position: fixed;
    top: 0; left: 0; width: 100%;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 50px;
    box-sizing: border-box;
    background-color: #0f1218; /* Menü arka planı koyu */
    border-bottom: 1px solid #1e2532; /* Altına ince şık bir çizgi */
    transition: 0.3s;
}

.logo-alan h1 {
    color: #ffffff;
    font-size: 1.4rem;
    font-weight: 800;
    margin: 0;
    letter-spacing: 1px;
    text-transform: lowercase; /* Ajans tarzı küçük harf logo */
}

.logo-alan span {
    color: #ffb703; /* Altın sarısı vurgu */
    font-size: 0.85rem;
    font-weight: 500;
    display: block;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 3px;
}

.ana-menu ul {
    list-style: none; display: flex; gap: 30px; margin: 0; padding: 0;
}

.ana-menu a {
    text-decoration: none;
    color: #94a3b8; /* Pasif menü linkleri gri */
    font-weight: 500;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: 0.2s ease;
}

.ana-menu a:hover, .ana-menu a.aktif {
    color: #ffb703; /* Üzerine gelince sarı parlar */
}

/* ---------------------------------------------------
   YENİ GİRİŞ EKRANI (Ajans Stili İkiye Bölünmüş)
--------------------------------------------------- */
.karanlik-giris-alani {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
    max-width: 1200px;
    margin: 150px auto 100px auto;
    padding: 0 40px;
}

.giris-metin-kismi { flex: 1; }
.giris-gorsel-kismi { flex: 1; text-align: right; }

.giris-gorsel-kismi img {
    width: 100%;
    border-radius: 15px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.6);
}

.rozet {
    display: inline-block;
    border: 1px solid rgba(255, 183, 3, 0.3);
    background-color: rgba(255, 183, 3, 0.05);
    color: #ffb703;
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 25px;
    letter-spacing: 1px;
}

.karanlik-giris-alani h1 {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 20px 0;
    color: #ffffff;
}

.sari-metin { color: #ffb703; }

.karanlik-giris-alani p {
    color: #94a3b8;
    font-size: 1.1rem;
    margin-bottom: 40px;
    max-width: 90%;
}

.buton-grubu { display: flex; gap: 20px; }

.btn-sari {
    background-color: #ffb703;
    color: #0f1218;
    font-weight: 700;
    padding: 14px 35px;
    border-radius: 8px;
    text-decoration: none;
    transition: 0.3s;
}

.btn-sari:hover { background-color: #e0a000; }

.btn-saydam {
    background-color: transparent;
    color: #ffffff;
    font-weight: 600;
    padding: 14px 35px;
    border-radius: 8px;
    text-decoration: none;
    border: 1px solid #334155;
    transition: 0.3s;
}

.btn-saydam:hover {
    border-color: #ffb703;
    color: #ffb703;
}

/* ---------------------------------------------------
   İÇERİK ALANI (Tarih, Nüfus vb. Alt Sayfalar)
--------------------------------------------------- */
.alt-sayfa-icerik {
    max-width: 900px; 
    margin: 140px auto 80px auto; 
    padding: 0 20px;
}

.bilgi-kutusu {
    border: none; 
    padding: 0;
}

.bilgi-kutusu h2 {
    color: #ffffff;
    font-size: 3.5rem; 
    font-weight: 800;
    margin-bottom: 30px;
    letter-spacing: -1px;
    line-height: 1.1;
}

.bilgi-kutusu p {
    font-size: 1.15rem;
    color: #cbd5e1;
    margin-bottom: 25px;
}

h3 {
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
    margin-top: 60px;
    margin-bottom: 20px;
}

/* ---------------------------------------------------
   YAN YANA METİN VE GÖRSEL DÜZENİ (Sol Metin - Sağ Resim)
--------------------------------------------------- */
.icerik-satiri {
    display: flex;
    align-items: center; 
    justify-content: space-between;
    gap: 50px; 
    margin-bottom: 60px; 
}

.metin-kismi { flex: 1; }

.gorsel-kismi {
    flex: 0 0 45%; 
    text-align: right;
}

.gorsel-kismi img, 
.gorsel-kismi video, 
.gorsel-kismi iframe {
    width: 100%;
    height: auto;
    border-radius: 8px; /* Resimlere hafif yumuşak köşe */
    box-shadow: 0 10px 30px rgba(0,0,0,0.8); /* Koyu temaya uygun derin gölge */
    border: 1px solid #1e2532; /* Resim etrafına çok ince çerçeve */
}

.gorsel-kismi .medya-aciklama {
    display: block;
    margin-top: 15px;
    font-size: 0.85rem;
    color: #64748b;
    text-align: left;
}

/* ---------------------------------------------------
   MODERN TABLO TASARIMI (Dark Mode Uyumlu)
--------------------------------------------------- */
.tablo-kapsayici {
    width: 100%;
    overflow-x: auto;
    margin: 40px 0;
}

.modern-tablo {
    width: 100%;
    border-collapse: collapse;
    font-size: 1rem;
    background-color: #131822; /* Tablo arka planı */
    border-radius: 8px;
    overflow: hidden;
}

.modern-tablo thead tr {
    background-color: #1e2532; /* Tablo başlık arka planı */
    color: #ffffff;
    text-align: left;
}

.modern-tablo th, .modern-tablo td {
    padding: 18px 20px;
    border-bottom: 1px solid #1e2532; /* Çizgiler koyu gri */
    color: #cbd5e1;
}

.modern-tablo tbody tr:hover {
    background-color: #171c26; /* Satırın üzerine gelince hafif aydınlanma */
}

/* KAMAN SATIRI (Koyu Temada Sarı Vurgu) */
.kaman-vurgu {
    background-color: rgba(255, 183, 3, 0.05) !important;
    border-left: 4px solid #ffb703; 
    font-weight: 700;
    color: #ffb703 !important;
}

/* ---------------------------------------------------
   DÖRT MEVSİM KARTLARI (Dark Mode Uyumlu)
--------------------------------------------------- */
.mevsimler-izgarasi {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    gap: 15px; 
    margin-top: 30px;
}

.mevsim-kart {
    background-color: #171c26; /* Kart arka planı koyu */
    padding: 40px 20px;
    text-align: center;
    border-radius: 8px;
    border: 1px solid #1e2532;
    transition: all 0.3s ease;
}

.mevsim-kart:hover {
    background-color: #1e2532; 
    transform: translateY(-5px); /* Üzerine gelince çok hafif yukarı kalkar */
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}

.mevsim-ikon {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.mevsim-kart h4 {
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 10px 0;
    text-transform: uppercase;
}

.mevsim-kart p {
    font-size: 0.95rem;
    color: #94a3b8;
    margin: 0;
}

/* ===================================================
   MOBİL UYUM (TELEFON VE TABLET EKRANLARI İÇİN)
=================================================== */
@media (max-width: 768px) {
    
    /* Üst Menü */
    .ust-sabit-bar {
        flex-direction: column; 
        padding: 15px 10px;
        gap: 15px;
    }
    .logo-alan { text-align: center; }
    .ana-menu ul {
        flex-wrap: wrap; 
        justify-content: center;
        gap: 10px 15px;
    }
    .ana-menu a { font-size: 0.85rem; }

    /* Yeni Giriş Ekranı */
    .karanlik-giris-alani { flex-direction: column; text-align: center; padding: 0 20px; margin-top: 180px; }
    .giris-metin-kismi p { margin: 0 auto 30px auto; }
    .buton-grubu { justify-content: center; flex-wrap: wrap; }
    .karanlik-giris-alani h1 { font-size: 2.5rem; }

    /* İçerik Sayfaları */
    .alt-sayfa-icerik {
        margin-top: 180px; 
        padding: 0 15px;
    }
    .bilgi-kutusu h2 {
        font-size: 2.2rem;
        margin-bottom: 20px;
    }
    h3 { font-size: 1.5rem; }
    .bilgi-kutusu p { font-size: 1rem; }

    /* Yan Yana Resim/Metin (Mobilde alt alta) */
    .icerik-satiri {
        flex-direction: column; 
        gap: 20px;
    }
    .gorsel-kismi {
        flex: 1;
        width: 100%;
    }

    /* Tablolar */
    .tablo-kapsayici {
        overflow-x: auto;
        margin: 20px 0;
    }
    .modern-tablo th, .modern-tablo td {
        padding: 12px 10px;
        font-size: 0.9rem;
    }
    
    /* 4 Mevsim Kartları */
    .mevsimler-izgarasi {
        grid-template-columns: repeat(1, 1fr); /* Telefonda 4'ü alt alta dizilir */
    }
}


/* ===================================================
   VİDEOLU ANA SAYFA ORTALAMA VE ANİMASYONLAR
=================================================== */

/* 1. Yazıları Tekrar Videonun Ortasına Almak İçin */
.video-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.arka-plan-video {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover;
    z-index: -2;
}

.video-karartma {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(15, 18, 24, 0.6); /* Koyu temaya uygun şık karartma */
    z-index: -1;
}

.merkez-icerik {
    text-align: center;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px; 
}

/* 2. Ana Başlık Görünümü */
.logo-buyuk h1 {
    font-size: 5.5rem;
    font-weight: 900;
    margin: 0;
    color: #ffffff;
    text-shadow: 2px 4px 15px rgba(0,0,0,0.8);
}

.bir-kere-animasyon {
    font-size: 1.4rem;
    font-weight: 600;
    color: #ffb703; /* Altın sarısı alt başlık */
    text-shadow: 2px 2px 10px rgba(0,0,0,0.8);
    margin-top: 15px;
    letter-spacing: 2px;
}

/* ================= ANİMASYONLAR ================= */

/* A. 3 Saniyede Bir Tekrar Eden "KAMAN UBYO 2026" */
.tekrar-animasyon span {
    display: inline-block;
    opacity: 0; /* Başlangıçta hepsi görünmez */
}

@keyframes kelimeGelsin {
    0% { opacity: 0; transform: translateX(-50px); }
    10% { opacity: 1; transform: translateX(0); } /* Ekrana girer */
    45% { opacity: 1; transform: translateX(0); } /* Ekranda kalır */
    55% { opacity: 0; transform: translateX(50px); } /* Sağdan çıkar */
    100% { opacity: 1; } /* Animasyonun geri kalanı (yaklaşık 3.5 saniye) boş bekler */
}

/* Süreleri kaydırarak sırayla gelmelerini sağladık */
.kelime-1 { animation: kelimeGelsin 7s infinite 0s; }
.kelime-2 { animation: kelimeGelsin 7s infinite 0.4s; }
.kelime-3 { animation: kelimeGelsin 7s infinite 0.8s; }


/* B. Sadece Bir Kere Gelen Alt Başlık */
.bir-kere-animasyon span {
    display: inline-block;
    opacity: 0; /* Başlangıçta görünmez */
}

@keyframes birKereGelsin {
    0% { opacity: 0; transform: translateX(-30px); }
    100% { opacity: 1; transform: translateX(0); }
}

/* Sırayla gelip ekranda kalırlar (forwards komutu sayesinde silinmezler) */
.parca-1 { animation: birKereGelsin 1s ease forwards 0.5s; }
.parca-2 { animation: birKereGelsin 1s ease forwards 1.5s; }
.parca-3 { animation: birKereGelsin 1s ease forwards 2.5s; }


/* C. Sürekli Yanıp Sönen (Nabız Atan) Buton */
.dikkat-cekici-buton {
    background-color: #ffb703;
    color: #0f1218;
    font-weight: 800;
    font-size: 1.2rem;
    padding: 18px 60px;
    border-radius: 40px;
    text-decoration: none;
    letter-spacing: 2px;
    margin-top: 30px;
    animation: butonParlama 2s infinite; /* 2 saniyede bir kalp gibi atar */
    transition: 0.3s;
}

.dikkat-cekici-buton:hover {
    background-color: #ffffff;
    color: #0f1218;
    animation: none; /* Fareyle üzerine gelince titreme dursun */
    transform: scale(1.05);
}

@keyframes butonParlama {
    0% { box-shadow: 0 0 0 0 rgba(255, 183, 3, 0.8); transform: scale(1); }
    50% { box-shadow: 0 0 25px 15px rgba(255, 183, 3, 0); transform: scale(1.05); } /* Büyür ve sarı ışık saçar */
    100% { box-shadow: 0 0 0 0 rgba(255, 183, 3, 0); transform: scale(1); }
}

/* Mobil ekranlar için dev yazıları biraz küçültme */
@media (max-width: 768px) {
    .logo-buyuk h1 { font-size: 2.5rem; }
    .bir-kere-animasyon { font-size: 1rem; }
}

/* ===================================================
   DİJİTAL REHBER KUTULU LOGO TASARIMI (DÜZELTİLMİŞ)
=================================================== */
.ajans-logo {
    display: flex;
    align-items: center;
    gap: 15px; /* Kutu ile KAMANUBYO2026 yazısı arasındaki boşluk */
    text-decoration: none;
}

/* Kutunun Kendisi (Esnek Dikdörtgen) */
.logo-kutu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: transparent; /* İçi boş, sadece çerçeve sarı */
    color: #ffb703; /* Altın sarısı yazı */
    border: 2px solid #ffb703; /* Altın sarısı çerçeve */
    border-radius: 8px; /* Hafif yuvarlak köşeler */
    font-size: 0.9rem;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    
    /* EN ÖNEMLİ KISIM: Sabit genişlik yok, kelimeye göre esner */
    padding: 8px 18px; 
    white-space: nowrap; /* Yazının alt satıra düşmesini engeller, tek satırda tutar */
    
    box-shadow: 0 0 10px rgba(255, 183, 3, 0.3);
    transition: all 0.4s ease;
    letter-spacing: 1px;
}

/* Yanındaki KAMANUBYO2026 Yazısı */
.logo-metin {
    color: #ffffff; /* Temiz beyaz yazı */
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase; /* Harfleri büyük yapar */
    text-shadow: 2px 2px 10px rgba(0,0,0,0.8);
}

/* Fareyle Üzerine Gelince Çalışacak Animasyon */
.ajans-logo:hover .logo-kutu {
    background-color: #ffb703; /* Kutunun içi sarı dolar */
    color: #0f1218; /* Yazı siyah olur */
    box-shadow: 0 0 20px rgba(255, 183, 3, 0.8);
    transform: scale(1.05); /* Kutuyu hafifçe büyütür */
}

.ajans-logo:hover .logo-metin {
    color: #ffb703; /* Yanındaki beyaz yazı sarıya döner */
    transition: 0.3s;
}

/* Fareyle Logonun Üzerine Gelince Çalışacak Animasyon */
.ajans-logo:hover .logo-kutu {
    background-color: #ffb703; /* Kutu tamamen sarı olur */
    color: #0f1218; /* İçindeki K harfi siyah olur */
    box-shadow: 0 0 20px rgba(255, 183, 3, 0.8); /* Parlama artar */
    transform: rotate(-10deg) scale(1.1); /* Hafifçe büyür ve sola yatar */
}

.ajans-logo:hover .logo-metin {
    color: #ffb703;
    transition: 0.3s;
}

/* ===================================================
   GİRİŞ VE ÜYE OL SAYFASI TASARIMI (GLASSMORPHISM)
=================================================== */

.giris-body {
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.form-merkez {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 120px 20px 40px 20px; /* Üst menü boşluğu */
    z-index: 10;
}

.form-konteyner {
    display: flex;
    gap: 30px;
    max-width: 900px;
    width: 100%;
    position: relative;
}

/* Cam Efektli Form Kartları */
.form-kart {
    flex: 1;
    background: rgba(20, 24, 32, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 40px;
    text-align: center;
    box-shadow: 0 15px 35px rgba(0,0,0,0.5);
    transition: 0.3s;
}

.vurgulu-kart {
    border-color: rgba(255, 183, 3, 0.3); /* Üye ol kartı hafif sarımsı */
}

.form-kart:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 183, 3, 0.6);
}

.form-kart h2 {
    color: #ffffff;
    font-size: 1.8rem;
    font-weight: 800;
    margin: 0 0 10px 0;
}

.form-kart p {
    color: #94a3b8;
    font-size: 0.9rem;
    margin: 0 0 30px 0;
}

/* İnput (Metin Kutusu) Tasarımı */
.input-grup {
    margin-bottom: 20px;
}

.input-grup input {
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid #475569;
    padding: 15px 20px;
    border-radius: 10px;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    box-sizing: border-box;
    transition: 0.3s;
    outline: none;
}

.input-grup input:focus {
    border-color: #ffb703;
    background: rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 10px rgba(255, 183, 3, 0.2);
}

/* Buton Tasarımları */
.form-buton {
    width: 100%;
    padding: 15px;
    border: 1px solid #475569;
    background: transparent;
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.3s;
    margin-top: 10px;
}

.form-buton:hover {
    background: #ffffff;
    color: #0f1218;
}

.form-buton-sari {
    background: #ffb703;
    color: #0f1218;
    border: none;
}

.form-buton-sari:hover {
    background: #e0a000;
    transform: scale(1.02);
}

/* Mobilde Alt Alta Gösterme */
@media (max-width: 768px) {
    .form-konteyner {
        flex-direction: column;
    }
}
/* Referans kutu */
.kutu{
    position: relative !important;
}

/* Çarpı */
.kutu2 .kapat{
    position: absolute !important;

    top: -35px !important;
    right: -35px !important;

    color: #ffae00 !important;
    text-decoration: none !important;

    font-size: 55px !important;
    font-weight: 900 !important;
    line-height: 1 !important;

    cursor: pointer !important;
    z-index: 9999 !important;

    transition: all .25s ease !important;
}

/* Hover */
.kutu2 .kapat:hover{
    color: white !important;
    transform: scale(1.15) !important;
}

/* Tıklayınca */
.kutu2 .kapat:active{
    color: white !important;
    transform: scale(.95) !important;
}

.giris-link{
    color: orange !important;
    font-weight: bold;
    transition: .3s ease;
}

.giris-link:hover{
    color: white !important;
}
.video-alani{
    width: 55%;
}

.video-alani iframe{
    width: 100%;
    height: 400px;
    border: none;
    border-radius: 18px;
    display: block;
}