/* ===========================================================
   Halka açık site teması (koyu tema) — Bootstrap 5 üzerine.
   Bu dosya sadece index.php / photo.php tarafından kullanılır.
   Admin paneli bu dosyayı kullanmaz (bkz. assets/css/style.css).
   =========================================================== */

[data-bs-theme="dark"] {
    --bs-body-bg: #121212;
    --bs-body-color: #eaeaea;
    --bs-border-color: #2e2e2e;
    --bs-link-color: #c9a15a;
    --bs-link-hover-color: #dab876;
    --bs-secondary-color: #9c9c9c;
    --bs-tertiary-bg: #1b1b1b;
    --bs-emphasis-color: #ffffff;
}

:root {
    --yzey: #1b1b1b;
    --yzey-2: #222222;
    --kenar: #2e2e2e;
    --metin-soluk: #9c9c9c;
    --vurgu: #c9a15a;
    --vurgu-koyu: #a9803f;
    --hata: #e57373;
    --hata-bg: #3a1f1f;
    --basari: #81c995;
    --basari-bg: #1f3a24;
}

body { min-height: 100vh; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- Üst menü --- */
.site-navbar {
    background: rgba(18, 18, 18, .92);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--kenar);
    padding: .75rem 0;
}
.site-navbar-ic { max-width: 1500px; margin: 0 auto; padding-left: 1.5rem; padding-right: 1.5rem; }
.site-navbar .navbar-brand {
    font-weight: 700;
    font-size: 1.25rem;
    color: #fff;
    letter-spacing: .02em;
}
.site-arama-formu { gap: .5rem; }
.site-arama-formu input {
    min-width: 220px;
    background: var(--yzey);
    border-color: var(--kenar);
    color: #eaeaea;
}
.site-arama-formu input:focus {
    background: var(--yzey);
    color: #fff;
    border-color: var(--vurgu);
    box-shadow: 0 0 0 .2rem rgba(201, 161, 90, .25);
}
.site-arama-formu .btn { border-color: var(--kenar); }
.site-cikis-link {
    background: var(--vurgu);
    color: #1a1a1a;
    font-weight: 600;
    border: none;
    margin-left: 1rem;
    align-self: center;
    white-space: nowrap;
}
.site-cikis-link:hover { background: var(--vurgu-koyu); color: #1a1a1a; }
@media (max-width: 991px) {
    .site-cikis-link { margin-left: 0; margin-top: .5rem; align-self: start; }
}

/* --- Genel yerleşim --- */
.site-main { max-width: 1500px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
.site-footer { text-align: center; color: var(--metin-soluk); padding: 2.5rem 1rem; font-size: .85rem; border-top: 1px solid var(--kenar); margin-top: 3rem; }

/* --- Uyarılar --- */
.uyari { padding: .75rem 1rem; border-radius: 6px; margin-bottom: 1rem; font-size: .9rem; }
.uyari-hata { background: var(--hata-bg); color: var(--hata); border: 1px solid rgba(229, 115, 115, .35); }
.uyari-basari { background: var(--basari-bg); color: var(--basari); border: 1px solid rgba(129, 201, 149, .35); }
.ipucu { font-size: .85rem; color: var(--metin-soluk); margin-top: 1rem; }

/* --- Giriş (erişim şifresi) sayfası --- */
.giris-kutu {
    max-width: 380px;
    margin: 3rem auto;
    background: var(--yzey);
    border: 1px solid var(--kenar);
    border-radius: 10px;
    padding: 2rem 1.75rem;
    text-align: center;
}
.giris-kutu h1 { font-size: 1.3rem; margin-bottom: .5rem; }
.giris-kutu form { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.25rem; }
.giris-kutu input[type=password] {
    background: var(--yzey-2);
    border: 1px solid var(--kenar);
    color: #eaeaea;
    border-radius: 6px;
    padding: .6rem .75rem;
    font-size: 1rem;
    text-align: center;
}
.giris-kutu input[type=password]:focus {
    outline: none;
    border-color: var(--vurgu);
    box-shadow: 0 0 0 .2rem rgba(201, 161, 90, .25);
}

/* --- Filtre akordeonu --- */
.filtre-akordeon { margin-bottom: 1.5rem; }
.filtre-akordeon .accordion-item {
    background: var(--yzey);
    border: 1px solid var(--kenar);
    border-radius: 10px;
    overflow: hidden;
}
.filtre-akordeon .accordion-button {
    background: var(--yzey);
    color: #eee;
    font-weight: 600;
    box-shadow: none;
}
.filtre-akordeon .accordion-button:not(.collapsed) {
    background: var(--yzey-2);
    color: #fff;
    box-shadow: none;
}
.filtre-akordeon .accordion-button:focus { box-shadow: 0 0 0 .2rem rgba(201, 161, 90, .25); }
.filtre-akordeon .accordion-button::after { filter: invert(1) grayscale(1) brightness(1.6); }
.filtre-akordeon .accordion-body { background: var(--yzey); padding: 1.25rem 1.5rem; }

.filtre-rozet {
    background: var(--vurgu);
    color: #1a1a1a;
    font-size: .7rem;
    font-weight: 600;
    padding: .25rem .55rem;
    border-radius: 999px;
    margin-left: .5rem;
    vertical-align: middle;
}

.filtre-formu {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: start;
}
.filtre-formu label { display: flex; flex-direction: column; gap: .4rem; font-size: .85rem; color: var(--metin-soluk); }
.filtre-formu input[type=date],
.filtre-formu input[type=month] {
    background: var(--yzey-2);
    border: 1px solid var(--kenar);
    color: #eaeaea;
    border-radius: 6px;
    padding: .5rem .6rem;
    font-family: inherit;
}
.filtre-formu input[type=date]::-webkit-calendar-picker-indicator,
.filtre-formu input[type=month]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}

.filtre-sutun { display: flex; flex-direction: column; gap: .75rem; min-width: 190px; }
.filtre-tarih-sutunu { min-width: 170px; gap: 1rem; }
.filtre-kelime-sutunu { flex: 1 1 320px; min-width: 280px; }
.filtre-etiket { font-size: .85rem; color: var(--metin-soluk); }

.filtre-eylemler { display: flex; align-items: center; justify-content: flex-end; gap: .75rem; width: 100%; margin-top: .25rem; }

.kelime-kutu {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    max-height: 150px;
    overflow-y: auto;
    border: 1px solid var(--kenar);
    border-radius: 6px;
    padding: .5rem .65rem;
    min-width: 190px;
    background: var(--yzey-2);
}
.kelime-secenek { flex-direction: row !important; align-items: center; gap: .4rem; font-size: .85rem; color: #ddd; text-transform: capitalize; }
.kelime-secenek input { width: auto; accent-color: var(--vurgu); }

/* Anahtar kelimeler: tek sütun liste yerine, sabit sayıda sütuna
   bölünmüş (CSS multi-column) bir görünüm. flex-wrap yerine bunu
   kullanıyoruz çünkü konteyner dar kaldığında flex-wrap tek sütuna
   düşebiliyordu; "columns" sütun sayısını garantiler. */
.kelime-yayilmis {
    columns: 2;
    column-gap: 1.5rem;
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--kenar);
    border-radius: 6px;
    padding: .75rem 1rem;
    background: var(--yzey-2);
}
.kelime-yayilmis .kelime-secenek { break-inside: avoid; margin-bottom: .5rem; }

@media (min-width: 700px) {
    .kelime-yayilmis { columns: 3; }
}

/* --- Galeri ızgarası (kırpmasız, satır satır dolan grid) ---
   Not: Önceden CSS "column-count" (mozaik) kullanılıyordu ama bu, öğeleri
   soldan sağa değil önce bir sütunu tamamen doldurup sonra diğerine
   geçerek dizdiği için tarih sırasını görsel olarak bozuyordu. Bunun
   yerine satır satır (soldan sağa, yukarıdan aşağıya) dolan normal bir
   grid kullanılıyor; kırpma yapılmıyor, sadece sıra korunuyor. */
.galeri-izgara {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    align-items: start;
}
.galeri-karti {
    display: block;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    background: var(--yzey);
    border: 1px solid var(--kenar);
    color: inherit;
}
.galeri-karti:hover { text-decoration: none; border-color: #444; }
.galeri-karti img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform .35s ease;
}
.galeri-karti:hover img { transform: scale(1.035); }
.galeri-bilgi { padding: .6rem .75rem .7rem; text-align: center; }
.galeri-bilgi .alt-bilgi { display: block; font-size: .78rem; color: #ddd; margin-top: .2rem; text-transform: capitalize; }

@media (max-width: 992px) { .galeri-izgara { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .galeri-izgara { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .galeri-izgara { grid-template-columns: 1fr; } }

/* --- Sayfalama --- */
.sayfalama { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 1.25rem 0; }
.sayfalama a, .sayfalama-aktif, .sayfalama-nokta {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.3rem; height: 2.3rem; padding: 0 .5rem; border-radius: 6px; font-size: .9rem;
}
.sayfalama a { background: var(--yzey); border: 1px solid var(--kenar); color: #ddd; }
.sayfalama a:hover { background: var(--yzey-2); text-decoration: none; border-color: var(--vurgu); }
.sayfalama-aktif { background: var(--vurgu); color: #1a1a1a; font-weight: 600; }
.sayfalama-nokta { color: var(--metin-soluk); }

/* --- Fotoğraf detay sayfası --- */
.geri-link { margin-bottom: 1.25rem; }
.detay-izgara { display: grid; grid-template-columns: 2.2fr 1fr; gap: 2.5rem; }
.detay-gorsel {
    display: block;
    max-width: 100%;
    max-height: 80vh; /* dikey (portre) fotoğraflar ekranı taşmasın */
    width: auto;
    height: auto;
    object-fit: contain;
    margin: 0 auto;
    border-radius: 10px;
    cursor: zoom-in;
    border: 1px solid var(--kenar);
}
.detay-bilgi h1 { margin-top: 0; font-size: 1.5rem; }
.detay-nav { display: flex; justify-content: space-between; margin-top: 1.75rem; gap: .75rem; }
.detay-nav a, .detay-nav span {
    flex: 1;
    text-align: center;
    padding: .55rem .75rem;
    border-radius: 6px;
    border: 1px solid var(--kenar);
    background: var(--yzey);
    font-size: .85rem;
    color: #ddd;
}
.detay-nav a:hover { border-color: var(--vurgu); text-decoration: none; }
.detay-nav span { opacity: .35; }

.whatsapp-gonder { margin-top: .75rem; }
.whatsapp-gonder .btn {
    width: 100%;
    border-color: #25D366;
    color: #25D366;
}
.whatsapp-gonder .btn:hover { background: #25D366; color: #10130f; }

.exif-tablo { border-collapse: collapse; width: 100%; margin: 1rem 0; font-size: .9rem; }
.exif-tablo th { text-align: left; color: var(--metin-soluk); padding: .3rem .6rem .3rem 0; white-space: nowrap; vertical-align: top; font-weight: 500; }
.exif-tablo td { padding: .3rem 0; }
.exif-tablo td a { text-transform: capitalize; }

.etiket-listesi { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.etiket { background: var(--yzey-2); border: 1px solid var(--kenar); color: var(--vurgu); padding: .3rem .7rem; border-radius: 999px; font-size: .8rem; text-transform: capitalize; }
.etiket:hover { border-color: var(--vurgu); text-decoration: none; }

@media (max-width: 768px) {
    .detay-izgara { grid-template-columns: 1fr; }
}

/* Sayfalar arası (örn. slayt gösterisinde bir fotoğraftan diğerine geçerken)
   yumuşak bir geçiş animasyonu — bunu destekleyen tarayıcılarda (güncel
   Chrome/Edge) otomatik çapraz geçiş (crossfade) sağlar. Desteklemeyen
   tarayıcılarda hiçbir etkisi olmaz, sorun çıkarmaz. */
@view-transition {
    navigation: auto;
}

/* --- Lightbox (tam boyut görüntüleme + önceki/sonraki) --- */
body.kaydirma-kilitli { overflow: hidden; }

.lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .95);
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: 2.5rem 4.5rem 1rem;
    box-sizing: border-box;
}
.lightbox.acik { display: flex; }
.lightbox img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 4px;
    transition: opacity .25s ease;
}
/* Slayt gösterisi bir sonraki fotoğrafa geçmeden hemen önce kısa bir
   solma efekti (tarayıcı "view transition" desteklemese bile geçişi
   yumuşatır). */
.lightbox img.slayt-solma { opacity: 0; }

.lightbox-kapat, .lightbox-nav {
    position: fixed;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 1051;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lightbox-kapat:hover, .lightbox-nav:hover:not(:disabled) { background: rgba(255, 255, 255, .28); }
.lightbox-nav:disabled { opacity: .25; cursor: default; }

.lightbox-kapat { top: .75rem; right: .75rem; width: 2.4rem; height: 2.4rem; font-size: 1.6rem; line-height: 1; }
.lightbox-nav { top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; font-size: 1.5rem; }
.lightbox-prev { left: 1rem; }
.lightbox-next { right: 1rem; }

.lightbox-slayt-kontrol {
    position: fixed;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1051;
}
.lightbox-slayt-kontrol .btn {
    background: rgba(0, 0, 0, .5);
    border-color: rgba(255, 255, 255, .4);
    color: #fff;
    font-size: .85rem;
    padding: .5rem 1.1rem;
}
.lightbox-slayt-kontrol .btn:hover { background: rgba(255, 255, 255, .15); }

@media (max-width: 600px) {
    .lightbox { padding: 3.25rem .5rem 1rem; }
    .lightbox-nav { width: 2.5rem; height: 2.5rem; font-size: 1.2rem; }
    .lightbox-prev { left: .3rem; }
    .lightbox-next { right: .3rem; }
    .lightbox-slayt-kontrol { bottom: .75rem; }
}