/* ==========================================================================
   ISSUES — dergi kapağı, sayı arşivi, sayı detayı, dijital sayı (flipbook)
   ========================================================================== */

/* ---------- Kapak (CSS ile) ---------- */
.mcover {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 6px;
  background: #18201F;
  color: #F3F1EC;
  container-type: inline-size;
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .08);
}
.mcover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.mcover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(12, 10, 8, .55), transparent 30%, transparent 55%, rgba(12, 10, 8, .8)); }
.mcover > span { position: absolute; z-index: 2; }
.mcover__mast {
  top: 3.5cqi; left: 5cqi; right: 5cqi;
  font-family: var(--font-display);
  font-size: 24cqi;
  font-weight: 300;
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  line-height: .85;
  letter-spacing: -.04em;
}
.mcover__mast b { font-weight: 300; color: #B07A62; }
.mcover__no { top: 5cqi; right: 5cqi; text-align: right; font-size: 3.2cqi; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; line-height: 1.4; }
.mcover__theme { top: 31cqi; left: 5cqi; padding: 1cqi 2.6cqi; border-radius: 99px; background: #1F5E5B; font-size: 3.4cqi; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.mcover__lines { left: 5cqi; right: 5cqi; bottom: 5cqi; display: flex; flex-direction: column; gap: 1.4cqi; font-size: 3.6cqi; font-weight: 600; }
.mcover__lines b { font-family: var(--font-display); font-size: 10cqi; font-weight: 400; line-height: 1; letter-spacing: -.02em; margin-bottom: 1.5cqi; }
.mcover__lines span::before { content: "— "; color: #B07A62; }

/* ---------- Sayı kartları ---------- */
.issues { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.issue { display: flex; flex-direction: column; gap: 16px; }
.issue__cover { display: block; border-radius: 6px; transition: box-shadow .4s ease; }
.issue__cover:hover .mcover { box-shadow: 0 40px 70px -26px rgba(0, 0, 0, .65), 0 0 0 2px var(--accent); }
.issue__cover.is-soon .mcover img { filter: grayscale(.85) brightness(.75); }
.issue__cover.is-soon .mcover::before { content: "Yakında"; position: absolute; z-index: 3; left: 50%; top: 50%; translate: -50% -50%; padding: 2cqi 5cqi; border: 1px solid rgba(244, 239, 230, .7); border-radius: 99px; font-size: 4cqi; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.issue__body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.issue__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.issue__title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; line-height: 1.1; }
.issue__title em { color: var(--accent); }
@media (max-width: 1000px) { .issues { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .issues { gap: 28px 14px; } .issue__title { font-size: 1.2rem; } }

/* ---------- Sayı detayı ---------- */
.issue-hero__grid { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: clamp(28px, 6vw, 96px); align-items: center; }
.issue-hero__cover { max-width: 460px; }
@media (max-width: 860px) { .issue-hero__grid { grid-template-columns: 1fr; } .issue-hero__cover { max-width: 320px; } }

.issue-toc { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.issue-toc a { display: grid; grid-template-columns: 4em 1fr; gap: 16px; padding-block: 18px; border-bottom: 1px solid var(--line); transition: background-color .3s; }
.issue-toc a:hover { background: var(--paper-2); }
.issue-toc__p { font-family: var(--font-display); font-size: 2rem; font-weight: 200; font-style: italic; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; padding-left: 6px; }
.issue-toc small { display: block; font-size: var(--fs-micro); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.issue-toc b { display: block; margin-block: 4px; font-family: var(--font-display); font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); font-weight: 400; line-height: 1.2; }
.issue-toc i { font-style: normal; font-size: var(--fs-small); color: var(--ink-2); }

.letter { max-width: 880px; }
.letter__body { columns: 2; column-gap: 40px; color: var(--ink-2); }
.letter__body p { margin-bottom: 1em; break-inside: avoid-column; }
.letter__sign { font-family: var(--font-display); font-size: 1.6rem; font-style: italic; color: var(--ink) !important; }
.letter__sign small { display: block; font-family: var(--font-body); font-size: var(--fs-micro); font-style: normal; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 700px) { .letter__body { columns: 1; } }

/* ---------- Dijital sayı (flipbook) ---------- */
.fb { position: relative; outline: none; }
.fb:focus-visible { outline: 2px solid var(--accent); outline-offset: 8px; border-radius: 8px; }
.fb__stage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 980px;
  margin-inline: auto;
  perspective: 2200px;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .25));
}
.fb__stage::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 40px; translate: -50% 0; background: linear-gradient(to right, transparent, rgba(0, 0, 0, .18) 48%, rgba(0, 0, 0, .25) 50%, rgba(0, 0, 0, .18) 52%, transparent); pointer-events: none; z-index: 3; }
.fb__page {
  position: relative;
  display: none;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #FAF9F6;
  color: #18201F;
  container-type: inline-size;
  backface-visibility: hidden;
}
.fb__page.is-left { display: block; grid-column: 1; border-radius: 6px 0 0 6px; transform-origin: right center; }
.fb__page.is-right { display: block; grid-column: 2; border-radius: 0 6px 6px 0; transform-origin: left center; }
.fb__page.flip-next { animation: fbNext .7s var(--ease-in-out) both; }
.fb__page.flip-prev { animation: fbPrev .7s var(--ease-in-out) both; }
@keyframes fbNext { from { transform: rotateY(-75deg); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes fbPrev { from { transform: rotateY(75deg); opacity: .4; } to { transform: none; opacity: 1; } }
.fb__page .mcover { border-radius: 0; box-shadow: none; height: 100%; }
.fb__page--text, .fb__page--quote { padding: 9cqi 8cqi; }
.fb__page--text h3 { font-family: "Fraunces", Georgia, serif; font-size: 8cqi; font-weight: 400; line-height: 1.05; margin-block: 2cqi 4cqi; }
.fb__page--text p { font-size: 3.6cqi; line-height: 1.6; color: #47504D; margin-bottom: 3cqi; }
.fb__page--text ol { list-style: none; padding: 0; display: grid; gap: 2.6cqi; font-size: 3.8cqi; }
.fb__page--text ol b { display: inline-block; min-width: 9cqi; font-family: "Fraunces", Georgia, serif; font-style: italic; color: #1F5E5B; }
.fb__sign { font-family: "Fraunces", Georgia, serif; font-style: italic; font-size: 5cqi !important; color: #18201F !important; }
.fb__page--quote { place-items: center; background: #1F5E5B; color: #F3F1EC; }
.fb__page--quote.is-left, .fb__page--quote.is-right { display: grid; }
.fb__page--quote p { font-family: "Fraunces", Georgia, serif; font-size: 8cqi; font-weight: 300; line-height: 1.15; }
.fb__page--quote em { color: #D9B77E; }
.fb__page--image img, .fb__page--ad img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fb__page--image::after, .fb__page--ad::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(12, 10, 8, .8), transparent 55%); }
.fb__over { position: absolute; z-index: 2; left: 7cqi; right: 7cqi; bottom: 7cqi; display: flex; flex-direction: column; gap: 1.5cqi; color: #F3F1EC; }
.fb__over small { font-size: 3cqi; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
.fb__over b { font-family: "Fraunces", Georgia, serif; font-size: 9cqi; font-weight: 400; line-height: 1.05; }
.fb__over span { font-size: 3.6cqi; opacity: .85; }
.fb__folio { position: absolute; bottom: 4cqi; right: 6cqi; font-size: 3cqi; font-weight: 700; color: #78807C; }
.fb__adlabel { position: absolute; z-index: 3; top: 4cqi; left: 5cqi; padding: .8cqi 2.2cqi; border-radius: 99px; background: rgba(244, 239, 230, .9); color: #47504D; font-size: 2.6cqi; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
/* PDF sayısı */
.fb--pdf .fb__page { aspect-ratio: var(--fb-ratio, 210 / 297); background: #FFFFFF; }
.fb--pdf .fb__stage { max-width: min(980px, (100svh - 170px) * 1.414); }
@media (max-width: 760px) { .fb--pdf .fb__stage { max-width: min(420px, (100svh - 150px) * .707); } }
.fb__page--pdf canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.fb__page--pdf .fb__folio { inset: 0; display: grid; place-items: center; font-size: 6cqi; color: #B9BDB8; }
.fb__page--pdf canvas ~ .fb__folio { display: none; }
.fb__status { padding: 80px 0; text-align: center; }
.fb__nav { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 24px; }
.fb__nav [data-fb-count] { min-width: 7ch; text-align: center; font-variant-numeric: tabular-nums; }
.fb__end { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin-top: 16px; padding: 14px 18px; border-radius: 14px; background: var(--paper-2); text-align: center; }
.fb__end[hidden] { display: none; }
.fb:fullscreen { display: grid; place-content: center; padding: 24px; background: #0B1311; }
.fb:fullscreen .fb__stage { width: min(96vw, calc((100vh - 120px) * 1.5)); max-width: none; }
.fb:fullscreen .fb__nav .meta, .fb:fullscreen .icon-btn { color: #F3F1EC; }
@media (max-width: 760px) {
  .fb__stage { grid-template-columns: 1fr; max-width: 420px; }
  .fb__stage::after { display: none; }
  .fb__page.is-left, .fb__page.is-right { grid-column: 1; border-radius: 6px; }
  .fb__page.is-right { display: none; }
  .fb__page.is-single { display: block; }
}