@font-face { font-family: "Google Sans"; font-weight: 400; font-display: swap; src: url(/yazi/latin-400.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: "Google Sans"; font-weight: 400; font-display: swap; src: url(/yazi/latin-ext-400.woff2) format("woff2"); unicode-range: U+0100-02AF, U+20A0-20C0; }
@font-face { font-family: "Google Sans"; font-weight: 600; font-display: swap; src: url(/yazi/latin-600.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: "Google Sans"; font-weight: 600; font-display: swap; src: url(/yazi/latin-ext-600.woff2) format("woff2"); unicode-range: U+0100-02AF, U+20A0-20C0; }

:root {
  --pembe: #F8ECE8;
  --pembe-koyu: #E9CFC8;
  --yil: #A87C72;
  --murekkep: #1A1413;
  --soluk: #6B5F5C;
  --kirmizi: #E73537;
  --kirmizi-koyu: #BE2224;
  --bordo: #1C0810;
  --beyaz: #FFFFFF;
  /* tüm bölümler aynı sol ve sağ kenara hizalanır; çok geniş ekranda içerik ortalanır */
  --kenar: max(clamp(16px, 4vw, 48px), calc((100% - 1560px) / 2));
  --boslugu: clamp(14px, 2vw, 24px);
}
* { box-sizing: border-box; }
html { background: var(--pembe); -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body { margin: 0; color: var(--murekkep); font: 400 16px/1.5 "Google Sans", system-ui, sans-serif; overflow-wrap: break-word; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
img, video { max-width: 100%; }
:focus-visible { outline: 3px solid var(--kirmizi); outline-offset: 2px; }
button, input { font: inherit; color: inherit; }

/* giriş */
.giris-govde { min-height: 100svh; display: grid; place-items: center; padding: 16px; }
.giris { width: min(360px, 100%); }
.giris-logo { height: 44px; display: block; }
.giris h1 { font-size: 20px; font-weight: 400; color: var(--soluk); margin: 10px 0 36px; }
.giris label { display: block; font-weight: 600; margin-bottom: 6px; }
.giris input { width: 100%; min-height: 48px; padding: 10px 14px; border: 1.5px solid var(--murekkep); border-radius: 10px; background: var(--beyaz); }
.giris button { width: 100%; min-height: 48px; margin-top: 16px; border: 0; border-radius: 10px; background: var(--kirmizi-koyu); color: var(--beyaz); font-weight: 600; cursor: pointer; }
.giris button:hover { background: var(--bordo); }
.hata { margin-top: 10px; color: var(--kirmizi-koyu); font-weight: 600; }

/* üst */
.ust { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px 20px; padding: 14px var(--kenar); background: var(--pembe); }
.marka { display: flex; align-items: center; gap: 10px; text-decoration: none; font-size: 18px; color: var(--soluk); }
.marka img { height: 26px; display: block; }
#arama { justify-self: end; width: 100%; max-width: 460px; min-height: 44px; padding: 8px 16px; border: 1.5px solid var(--pembe-koyu); border-radius: 999px; background: var(--beyaz); }
#arama:focus { border-color: var(--murekkep); outline: none; }
.ust form { margin: 0; }
.sessiz { min-height: 44px; border: 0; background: none; padding: 0; color: var(--soluk); cursor: pointer; white-space: nowrap; }
.sessiz:hover { color: var(--murekkep); text-decoration: underline; }

.filtreler { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px var(--kenar) 0; }
.filtreler[hidden] { display: none; }
.filtre { min-height: 40px; padding: 4px 14px; border: 1.5px solid var(--pembe-koyu); border-radius: 999px; background: none; cursor: pointer; white-space: nowrap; }
.filtre small { color: var(--soluk); font-size: 13px; margin-left: 4px; }
.filtre:hover { border-color: var(--murekkep); }
.filtre[aria-pressed="true"] { background: var(--murekkep); border-color: var(--murekkep); color: var(--beyaz); }
.filtre[aria-pressed="true"] small { color: var(--pembe-koyu); }

main { padding: 12px var(--kenar) 80px; }

/* ay: asıl imza. Dev ay adı rafın üstünde durur. */
.ay { margin-top: 20px; }
.ay-baslik { font-size: clamp(52px, 11vw, 148px); line-height: 1; font-weight: 600; letter-spacing: -0.045em; color: var(--kirmizi); }
.ay-baslik span { font-weight: 400; color: var(--yil); }

/* raf: sütunlar ekrana göre kendini ayarlar, her kart sütuna tam oturur */
.raf { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(130px, 100%), 1fr)); gap: 28px var(--boslugu); align-items: start; margin-top: 18px; padding-bottom: 24px; border-bottom: 3px solid var(--murekkep); }
.eser { display: block; min-width: 0; text-decoration: none; }
.eser.yatay { grid-column: 1 / -1; }
.onizleme { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 10px; background: var(--bordo); }
.eser.yatay .onizleme { aspect-ratio: 16 / 9; }
.eser h3 { margin-top: 10px; font-size: 16px; font-weight: 600; line-height: 1.25; }
.eser p { font-size: 14px; color: var(--soluk); }
.yazi-kart { display: flex; align-items: center; justify-content: center; padding: 16px; color: var(--pembe); text-align: center; overflow-wrap: anywhere; }

.bos { padding: 64px 0; font-size: 20px; }
.bos button { margin-top: 12px; }

/* detay */
.geri { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 6px; color: var(--soluk); }
.detay-baslik { font-size: clamp(28px, 5vw, 56px); line-height: 1.08; font-weight: 600; letter-spacing: -0.03em; max-width: 24ch; }
.detay-alt { margin-top: 10px; color: var(--soluk); max-width: 62ch; }

.detay { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 24px; }
.oynaticilar { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-flow: dense; gap: 24px var(--boslugu); align-items: start; }
.oynatici { min-width: 0; }
.oynatici.yatay { grid-column: 1 / -1; }
.oynatici video, .oynatici img { display: block; width: 100%; border-radius: 10px; background: var(--bordo); }
/* yatay telefonda ve kısa ekranlarda video ekrandan taşmaz */
.oynatici video, .oynatici img { max-height: 86svh; object-fit: contain; }
.dosya-satir { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.dosya-satir small { display: block; color: var(--soluk); }
.dugme { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 4px 16px; border: 0; border-radius: 999px; background: var(--kirmizi-koyu); color: var(--beyaz); font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; }
.dugme:hover { background: var(--bordo); }
.dugme.ikincil { background: none; color: var(--murekkep); box-shadow: inset 0 0 0 1.5px var(--murekkep); }
.dugme.ikincil:hover { background: var(--murekkep); color: var(--beyaz); }

.metinler { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--boslugu); align-content: start; min-width: 0; }
.metin-kart { min-width: 0; background: var(--beyaz); border-radius: 10px; padding: clamp(14px, 2vw, 20px); }
.metin-ust { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.metin-ust h2 { font-size: 15px; font-weight: 600; line-height: 1.3; min-width: 0; }
pre { margin: 0; font: inherit; font-size: 15px; white-space: pre-wrap; overflow-wrap: anywhere; }
details summary { cursor: pointer; font-weight: 600; min-height: 28px; }
details pre { margin-top: 12px; color: var(--soluk); font-size: 14px; }

/* birden çok medyada dikeyler yan yana iki sütun doldurur, sağda boşluk kalmaz */
@media (min-width: 560px) {
  .oynaticilar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detay.tek:not(:has(.yatay)) .oynaticilar { grid-template-columns: minmax(0, 1fr); }
}
/* tablet: tek dikey video metnin yanında durur */
@media (min-width: 720px) {
  .detay.tek:not(:has(.yatay)) { grid-template-columns: minmax(240px, 34%) minmax(0, 1fr); align-items: start; }
  .raf { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}
/* masaüstü: videolar solda, metinler sağda */
@media (min-width: 1100px) {
  .detay { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
  .detay.tek:not(:has(.yatay)) { grid-template-columns: minmax(300px, 400px) minmax(0, 760px); }
  .raf { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
}
/* telefon: arama alt satıra iner, üst şerit iki satır olur */
@media (max-width: 559px) {
  .ust { grid-template-columns: minmax(0, 1fr) auto; }
  #arama { grid-column: 1 / -1; grid-row: 2; max-width: none; }
}
/* dar telefon: tek dikey video ekranı kaplamasın, ortalı dursun */
@media (max-width: 719px) {
  .detay.tek:not(:has(.yatay)) .oynatici { width: min(100%, 400px); margin-inline: auto; }
  .detay.tek:not(:has(.yatay)) .oynaticilar { grid-template-columns: minmax(0, 1fr); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .onizleme { transition: transform .25s cubic-bezier(.16,1,.3,1); }
  .eser:hover .onizleme { transform: translateY(-6px); }
}
@media (hover: hover) {
  .eser:hover h3 { color: var(--kirmizi-koyu); }
}