/* css/home.css */

/* --- BAŞLIKLARIN HİZALANMASI --- */
.section-titles {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-top: 10px;
}

.title-left { 
    font-size: 18px; 
    font-weight: 700; 
    color: #fff; 
    margin: 0; 
}

.title-right { 
    font-size: 18px; 
    font-weight: 700; 
    color: #fff; 
    margin: 0; 
    width: 49%; /* Sağ başlığı tam grid kolonunun üzerine yaslar */
}

/* --- ASİMETRİK HERO GRID (BİREBİR REFERANS YAPI) --- */
.hero-layout {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 Eşit Sütun */
    grid-template-rows: 230px 170px;      /* Satır yükseklikleri */
    gap: 10px;
    height: 410px; /* Sabit yükseklik: Üst üste binmeyi engeller */
    margin-bottom: 50px;
}

/* 1. Büyük Kart (Sol Üst) */
.item-1 {
    grid-column: 1 / 3; 
    grid-row: 1 / 2;    
}

/* 6. Geniş Kart (Sağ Alt) */
.item-6 {
    grid-column: 3 / 5; 
    grid-row: 2 / 3;    
}

/* Diğer Küçük Kartlar */
.item-2 { grid-column: 1 / 2; grid-row: 2 / 3; }
.item-3 { grid-column: 2 / 3; grid-row: 2 / 3; }
.item-4 { grid-column: 3 / 4; grid-row: 1 / 2; }
.item-5 { grid-column: 4 / 5; grid-row: 1 / 2; }

/* --- GRID İÇİNDEKİ KART TASARIMI --- */
.hero-layout .film-card {
    height: 100%;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    background: #000;
    display: block;
    text-decoration: none;
}

.hero-layout .image-container {
    height: 100% !important;
    width: 100%;
}

.hero-layout .image-container img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important; /* Resimlerin yamulmasını önler */
    transition: transform 0.6s ease;
}

/* Hover'da Resim Efekti */
.hero-layout .film-card:hover .image-container img {
    transform: scale(1.1);
    opacity: 0.7;
}

/* Yazı Alanı (Overlay) */
.info-overlay {
    position: absolute;
    bottom: 0; 
    left: 0; 
    width: 100%;
    padding: 15px;
    background: linear-gradient(transparent, rgba(0,0,0,0.95));
    pointer-events: none;
    z-index: 5;
}

.info-overlay h3 {
    color: #fff;
    font-size: 14px;
    margin: 0 0 4px 0;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.info-overlay .sub-text {
    font-size: 11px;
    color: var(--accent); /* IMDB ve Tür bilgisini turkuaz yapar */
    font-weight: 600;
}

/* Sol Üst Etiket (Tarih/Yıl) */
.date-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(0,0,0,0.8);
    color: #fff;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
    z-index: 6;
}

/* --- DAİRESEL SON EKLENENLER (Mavi Animasyonlu) --- */
.daireler-section {
    width: 100%;
    margin-top: 20px;
    display: block;
}

.fragmanlar-row { 
    display: flex; 
    gap: 20px; 
    margin-top: 15px; 
    padding-bottom: 15px; 
    overflow-x: auto; 
    scrollbar-width: none; /* Firefox için scrollbar gizleme */
}

.fragmanlar-row::-webkit-scrollbar { display: none; } /* Chrome için scrollbar gizleme */

.circle-card { 
    text-align: center; 
    min-width: 95px; 
    transition: 0.3s; 
}

.circle-img-wrap { 
    width: 85px; 
    height: 85px; 
    margin: 0 auto 10px; 
    position: relative; 
}

.circle-img { 
    width: 100%; 
    height: 100%; 
    border-radius: 50%; 
    border: 2px solid var(--border); 
    padding: 3px; 
    object-fit: cover; 
    transition: all 0.3s ease; 
    background: var(--bg-content);
}

.circle-title { 
    font-size: 11px; 
    font-weight: 600; 
    color: var(--text-muted); 
    transition: 0.3s; 
    display: block; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}

/* MAVİ (TURKUAZ) HOVER ANİMASYONU */
.circle-card:hover .circle-img { 
    border-color: var(--accent); 
    box-shadow: 0 0 15px rgba(0, 207, 200, 0.4); 
    transform: scale(1.05); 
}

.circle-card:hover .circle-title { 
    color: var(--accent); 
}