/* Muzisyen Kahvesi — ana sayfa bilesenleri: ilk ekranin rol dugmeleri ve "yeni acildi" notu, uc adimin altindaki
   baglanti, kadro, tur ve mekan turu kartlari; gorsel kaynaklari sayfasi.
   Yalniz bu sayfalar yukler (sayfa_ust 'ek_stil'). Token'lar ve kurallar ortak stilden gelir (stil.css). */

/* ilk ekran: her dugmenin ustunde kimin icin oldugu */
.kapak-yollar { display: grid; gap: 1.25rem; margin-top: 2rem; }
.kapak-yol { display: grid; gap: .5rem; justify-items: stretch; }
.kapak-yol-kim { font-size: .6875rem; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; color: var(--etiket); background: transparent; }
.kapak-yol .dugme, .kapak-yol .dugme-ikincil { justify-content: space-between; }
.kapak-not { max-width: 34rem; margin: 1.75rem 0 0; padding: .875rem 1rem; font-size: .875rem; line-height: 1.6; color: var(--murekkep-yumusak); background: var(--cam); border: 1px solid var(--cizgi); border-radius: var(--r); }
.foto-im.satir-ici { position: static; display: inline-block; margin: 0 .125rem; vertical-align: .1em; border: 1px solid var(--cizgi-orta); }
.konum-git { display: inline-flex; align-items: center; min-height: var(--dokunma); font-size: .8125rem; color: var(--murekkep); background: transparent; text-decoration: underline; text-underline-offset: .3em; }
.konum-git::after { content: " \2192"; white-space: pre; }
.konum-git:hover { color: var(--kil-koyu); }

/* kadro kartlari: fotograf ustunde alta dogru koyulasan perde, krem yazi */
.kadro-izgara { display: grid; gap: 1rem; }
.kadro-kart { position: relative; display: block; overflow: hidden; color: var(--krem); background: var(--murekkep); border-radius: var(--r-buyuk); text-decoration: none; }
.kadro-kart img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .6s var(--gecis); }
.kadro-kart:hover img { transform: scale(1.03); }
.kadro-kart-govde { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: .25rem; padding: 3rem 1.25rem 1.125rem; background-image: linear-gradient(180deg, var(--perde-yok), var(--perde-yazi)); }
.kadro-kart-ad { font-family: var(--serif); font-size: 1.75rem; font-weight: 300; line-height: 1.1; letter-spacing: -.02em; color: var(--krem); background: transparent; }
.kadro-kart-not { font-size: .8125rem; line-height: 1.45; color: var(--tas); background: transparent; }

/* tur kartlari: dar ekranda yatay kayan serit */
.tur-bas { margin: 2.5rem 0 1rem; font-size: 1.1875rem; }
.tur-serit { display: flex; gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--kenar)); padding: 0 var(--kenar) .25rem; }
.tur-serit::-webkit-scrollbar { display: none; }
.tur-kart { flex: none; display: grid; gap: .5rem; width: 8.5rem; scroll-snap-align: start; text-decoration: none; }
.tur-kart-gorsel { display: block; overflow: hidden; aspect-ratio: 4 / 5; background: var(--krem-koyu); border-radius: var(--r-buyuk); }
.tur-kart img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--gecis); }
.tur-kart:hover img { transform: scale(1.04); }
.tur-kart-yazi { display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-style: italic; font-size: 2.5rem; color: var(--kil-koyu); background: var(--krem-koyu); }
.tur-kart-ad { font-size: .875rem; line-height: 1.3; }
.tur-kart:hover .tur-kart-ad { text-decoration: underline; text-underline-offset: .25em; }

/* mekan turu kartlari: fotografin kosesinde kisa aciklama */
.mekan-izgara { display: grid; gap: 1.75rem 1.25rem; }
.mekan-kart { display: grid; gap: .375rem; align-content: start; text-decoration: none; }
.mekan-kart-gorsel { position: relative; display: block; overflow: hidden; margin-bottom: .375rem; background: var(--tas); border-radius: var(--r-buyuk); }
.mekan-kart img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s var(--gecis); }
.mekan-kart:hover img { transform: scale(1.03); }
.kose-not { position: absolute; left: .625rem; bottom: .625rem; padding: .2rem .55rem; font-size: .6875rem; line-height: 1.4; letter-spacing: .04em; color: var(--murekkep); background: var(--krem-cam); border-radius: var(--r-kucuk); }
.mekan-kart-ad { font-family: var(--serif); font-size: 1.25rem; line-height: 1.2; letter-spacing: -.01em; }
.mekan-kart:hover .mekan-kart-ad { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.mekan-kart-not { font-size: .875rem; line-height: 1.55; color: var(--murekkep-yumusak); background: transparent; }

/* gorsel kaynaklari sayfasi */
.kaynak-gruplar { display: grid; gap: 2rem; margin-top: 1.5rem; }
.kaynak-grup h3 { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: 1.25rem; }
.kaynak-grup .ornek-im { margin: 0; }
.kaynak-liste { margin: .75rem 0 0; padding-left: 1.25rem; font-size: .875rem; line-height: 1.6; color: var(--murekkep-yumusak); background: transparent; }
.kaynak-liste li + li { margin-top: .375rem; }
.kaynak-liste a, .kaynak-satir a { text-decoration: underline; text-underline-offset: .2em; overflow-wrap: anywhere; }
.kaynak-baslik { color: var(--murekkep); background: transparent; }
.kaynak-liste a[rel~="license"], .kaynak-satir a[rel~="license"] { white-space: nowrap; }
.kaynak-izgara { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 1.75rem 1.25rem; margin: 1.5rem 0 0; padding: 0; }
.kaynak-izgara img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: .625rem; border-radius: var(--r); background: var(--tas); }
.kaynak-izgara .etiket { margin-bottom: .25rem; }
.kaynak-satir { margin: 0; font-size: .8125rem; line-height: 1.55; color: var(--murekkep-yumusak); background: transparent; }

@media (min-width: 40rem) {
  .kapak-yollar { grid-template-columns: repeat(2, max-content); gap: 1.5rem 2rem; align-items: end; }
  .kapak-yol { justify-items: start; }
  .kadro-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kadro-kart img { aspect-ratio: 4 / 5; }
  .mekan-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kaynak-gruplar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 3rem; }
}
@media (min-width: 48rem) {
  .tur-serit { flex-wrap: wrap; overflow: visible; gap: 1.25rem 1rem; margin-inline: 0; padding: 0; }
  .tur-kart { width: 9.25rem; }
}
@media (min-width: 60rem) {
  .kadro-izgara { gap: 1.25rem; }
  .kadro-kart img { aspect-ratio: 4 / 3; }
  .mekan-izgara { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kaynak-gruplar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}