:root {
  --ui-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.container {
    width: 90%;
    max-width: 1200px;
    padding: 20px;
    box-sizing: border-box;
}
.home-wrapper{
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1100;
}
/* Basit başlık - minimal */
.page-title { color: #fff; font-size: 1.2rem; margin: 0; }

/* Tanımla bir değişken, site genelinde aynı font zincirini kullan */

/* Eğer caption'larda farklı bir font-family zaten varsa ve onla tam örtüşmesini istersen, */
/* caption içinde kullanılan font-family değerini buraya kopyalayarak değiştir. */

/* Galeri: 2 sütun; geniş ekranda 2 sütun, dar ekranda 1 sütun */
.gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    align-items: start;
    margin-bottom: 18px;
}
@media (max-width: 700px) {
    .gallery { grid-template-columns: 1fr; }
}

/* Tüm foto kartı tıklanabilir; düzen: dikey (frame üstte, caption altta) */
.photo-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

/* Çerçeve: kesin 1:1 oran - modern tarayıcılar için aspect-ratio kullanıldı.
   Eğer eski tarayıcılar desteklenmezse padding-top yöntemi alternatif olarak düşünülebilir. */
.photo-frame {
    width: 100%;
    aspect-ratio: 1 / 1; /* kare */
    border-radius: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    box-shadow: 0 60px 120px rgba(0,0,0,0.25);

    /* year-box ile uyumlu şeffaf yeşil arka plan */
    background-color: rgba(22, 160, 133, 0.7);
    /* isteğe bağlı daha koyu sınır: (ana sayfa year-box'ta border yoktu, ama istersen ekleyebilirsin) */
    border: 20px solid rgba(22,160,133,0.9);
}

/* İçerideki resim: kapsayıcıya sığacak şekilde */
.photo-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* fill kareyi estetikçe doldurur; object-fit:contain istersen değiştir */
    display: block;
}

/* Hover efekt: hafif kaldırma */
.photo-card:hover .photo-frame {
    transform: translateY(-6px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.35);
}

/* Caption: çerçevenin hemen altında, ortalanmış */
.photo-caption {
    display: inline-block;        /* içeriğe göre genişlik alır */
    margin: 10px auto 0;          /* çerçevenin hemen altında ortalanmış */
    padding: 8px 14px;            /* buton gibi iç boşluk */
    background: rgba(22,160,133,0.85); /* year-box ile uyumlu şeffaf-yeşil */
    color: #ffffff;
    font-weight: 700;
    font-size: 0.98rem;
    border-radius: 999px;         /* pill / buton şekli */
    border: 2px solid rgba(22,160,133,0.95); /* hafif iç sınır */
    box-shadow: 0 6px 12px rgba(0,0,0,0.18);
    text-align: center;
    transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
    user-select: none;
    -webkit-user-select: none;
}

/* Caption metninin küçük ekranlarda daha okunaklı olması */
@media (max-width:420px){
    .photo-caption { font-size: 0.95rem; padding: 4px 2px; }
}

/* Boş durum mesajı */
.empty-msg {
    grid-column: 1 / -1;
    text-align:center;
    padding:40px 8px;
    background: rgba(0,0,0,0.35);
    border-radius:12px;
    color:#fff;
}

/* Link visited/underline engelle ve metin rengini sabitle */
a.photo-card, a.photo-card:link, a.photo-card:visited, a.photo-card:hover, a.photo-card:active {
    color: #ffffff !important;
    text-decoration: none !important;
    -webkit-text-decoration-skip: none;
    text-decoration-skip-ink: none;
}
.photo-card:hover .photo-caption {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(0,0,0,0.28);
}
@media (max-width: 420px) {
    .photo-caption {
        padding: 6px 10px;
        font-size: 0.85rem;
    }
}
.back-button {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: rgba(22, 160, 133, 0.7);
    color: #fff;
    font-size: 0.75em;
    padding: 10px 20px;
    border-radius: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    z-index: 10;
}
/* --- ZORUNLU 2 SUTUNLU GALERİ (ASPECT-RATIO 1:1) --- */
.gallery {
    display: grid;
    /* Her zaman 2 sütun; sütunlar daraldıkça küçülsün.
       minmax(120px, 1fr) ile sütunların aşırı küçülmesini biraz sınırlandırıyoruz.
       İstersen 100px / 140px gibi değeri değiştir. */
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    gap: 12px;            /* aradaki boşluk (dar ekranda azaltılabilir) */
    align-items: start;
    margin-bottom: 18px;
}

/* Kare (1:1) çerçeve, görsel içerik esnek şekilde küçülsün */
.photo-card { display:flex; flex-direction:column; align-items:center; text-decoration:none; color:inherit; }
.photo-frame {
    width: 100%;
    aspect-ratio: 1 / 1;         /* kesin kare */
    border-radius: 10px;
    overflow: hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    box-shadow: 0 6px 12px rgba(0,0,0,0.25);

    background-color: rgba(22, 160, 133, 0.7);
    border: 2px solid rgba(22,160,133,0.9);
}

/* Resim kutuyu kaplasın ve küçüldüğünde düzgün kalsın */
.photo-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* veya 'contain' istersen değiştir */
    display: block;
}

/* Hover efekti (hafif yükseltme) */
.photo-card:hover .photo-frame {
    transform: translateY(-6px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.35);
}

/* Caption: çerçevenin hemen altında ortalanmış */
.photo-caption {
    margin-top: 8px;
    text-align: center;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.98rem;
    width: 100%;
    padding: 4px;
}

/* Dar ekranlarda (küçük telefon) caption ve gap'i küçült */
@media (max-width: 420px) {
    .gallery { gap: 8px; }
    .photo-caption { font-size: 0.85rem; padding: 3px; }
}
/* --- Galeri: daha geniş spacing ve 2 sütun sabit --- */
.gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    gap: 32px;      /* <- aradaki boşluğu büyüttüm (önce 12/18 idi) */
    align-items: start;
    margin-bottom: 18px;
}

/* Foto kartı düzeni (aynı) */
.photo-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

/* Kare çerçeve */
.photo-frame {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    overflow: hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    box-shadow: 0 6px 12px rgba(0,0,0,0.25);

    background-color: rgba(22, 160, 133, 0.7);
    border: 2px solid rgba(22,160,133,0.9);
    /* İçerik ile çerçeve arasında hafif boşluk istersen padding ekle:
       padding: 6px;  (isteğe bağlı) */
}

/* Resim doldurma davranışı */
.photo-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Hover efekti */
.photo-card:hover .photo-frame {
    transform: translateY(-6px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.35);
}

/* --- Caption: buton-badge, fakat FULL-WIDTH OLMAYACAK --- */
/* IMPORTANT: burada width:100% veya display:block kullanılmaz; inline-block ile içeriğe göre boyut alır */
.photo-caption {
    display: inline-block;            /* içerik kadar genişlik alır, full width olmaz */
    margin: 10px auto 0;              /* ortalanır */
    padding: 8px 14px;
    background: rgba(22,160,133,0.85);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.98rem;
    border-radius: 999px;
    border: 2px solid rgba(22,160,133,0.95);
    box-shadow: 0 6px 12px rgba(0,0,0,0.18);
    text-align: center;
    transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
    user-select: none;
    max-width: calc(100% - 40px);     /* çok uzun metinlerde kenarlara taşmayı engeller */
    white-space: nowrap;               /* metin tek satırda kalsın (istersen kaldır) */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Hover efekt: badge hafif yukarı kalksın */
.photo-card:hover .photo-caption {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(0,0,0,0.28);
}

/* Dar ekranlarda spacing ve font küçültme */
@media (max-width: 420px) {
    .gallery { gap: 18px; }             /* çok dar ekranlarda gap biraz küçülsün ama iki sütun kalsın */
    .photo-caption { padding: 6px 10px; font-size: 0.85rem; }
}


.page-title {
    display: inline-block;
    background: rgba(22, 160, 133, 0.85); /* year-box ile aynı yeşil ton */
    color: #ffffff;                        /* beyaz yazı */
    padding: 12px 26px;                    /* biraz daha geniş padding */
    border-radius: 180px;
    font-weight: 800;
    font-size: 2.35rem;                    /* büyütülmüş yazı boyutu */
    box-shadow: 0 8px 18px rgba(0,0,0,0.30);
    text-align: center;
    line-height: 1;
    border: 1px solid rgba(255,255,255,0.06);
    font-family: var(--ui-font);
}

/* Mobilde biraz küçültme ama yine belirgin kalsın */
@media (max-width: 420px) {
    .page-title {
        padding: 10px 16px;
        font-size: 1.15rem;
        border-radius: 14px;
    }
}