/* =============================================================================
   FlipbookEmbed component styling — page-flipping book reader.
   Used by /tuzuk and /vizyonbelgesi pages. Loaded via inline <link> at the
   top of those pages (same pattern as page-index.css / page-orgutlenme.css).
   ============================================================================= */

.tdp-flipbook {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

/* The frame is what fullscreen targets, so it owns its own background
   (not the iframe) — fullscreen iframes lose their parent's bg. */
.tdp-flipbook-frame {
  position: relative;
  width: 100%;
  /* 16:10 desktop — fits two pages side-by-side as a real book spread. */
  aspect-ratio: 16 / 10;
  background: #1a1a2e;
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.18),
    0 4px 12px rgba(0, 0, 0, 0.08);
  isolation: isolate;
}

.tdp-flipbook-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #1a1a2e;
}

/* Mobile single-page tighter aspect so font stays readable. */
@media (max-width: 767px) {
  .tdp-flipbook-frame {
    aspect-ratio: 3 / 4;
    border-radius: 12px;
  }
}

/* Fullscreen reset — when the wrapper enters fullscreen, drop the
   border-radius so the white corners don't show against black bars. */
.tdp-flipbook-frame:fullscreen {
  aspect-ratio: auto;
  height: 100vh;
  width: 100vw;
  border-radius: 0;
}

/* ───── Action bar ───── */
.tdp-flipbook-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
}

.tdp-flipbook-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-radius: 10px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease,
    background 0.15s ease, color 0.15s ease;
  border: 1.5px solid transparent;
}

.tdp-flipbook-btn-primary {
  background: #c41e3a;
  color: #fff;
  box-shadow: 0 6px 16px rgba(196, 30, 58, 0.28);
}
.tdp-flipbook-btn-primary:hover {
  background: #a51730;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(196, 30, 58, 0.36);
  color: #fff;
}

.tdp-flipbook-btn-outline {
  background: #fff;
  color: #1a1a2e;
  border-color: #e5e7eb;
}
.tdp-flipbook-btn-outline:hover {
  background: #f8f9fb;
  border-color: #c41e3a;
  color: #c41e3a;
  transform: translateY(-1px);
  text-decoration: none;
}

/* Tablet+small-phone: keep buttons horizontal but tighten copy. */
@media (max-width: 575px) {
  .tdp-flipbook-btn {
    padding: 10px 14px;
    font-size: 11px;
    flex: 1 1 calc(50% - 5px);
    justify-content: center;
  }
  .tdp-flipbook-actions { gap: 8px; }
}
/* Real-phone narrow: stack buttons vertically so each is full-width
   tappable. Avoids 3-button cramming on 320px iPhone SE. */
@media (max-width: 380px) {
  .tdp-flipbook-btn {
    flex: 1 1 100%;
  }
}

/* ───── /tuzuk + /vizyonbelgesi shared page polish ─────────────────────── */
/* Tüzük sidebar mobile fix — inline `position: sticky` makes the side
   panel hover over the article content on phone-stacked layouts.
   Override below the lg breakpoint where the sidebar drops under the
   main column. */
@media (max-width: 991px) {
  .tdp-tuzuk-sidebar {
    position: static !important;
    top: auto !important;
    margin-top: 32px;
  }
}

/* Tüzük madde card padding squeeze on phones. */
@media (max-width: 575px) {
  .tdp-tuzuk-madde {
    padding: 18px 18px !important;
  }
  .tdp-tuzuk-madde h4 {
    font-size: 16px !important;
  }
  .tdp-tuzuk-madde p {
    font-size: 14px !important;
    line-height: 1.65 !important;
  }
}

/* Vizyon pillar cards — equal heights via flex on the row, regardless
   of which Bootstrap col combo wraps them. Pairs with flex column on
   the inner card so the body push the call to action down evenly. */
.tdp-vizyon-pillars {
  display: flex;
  flex-wrap: wrap;
}
.tdp-vizyon-pillars > [class*="col-"] {
  display: flex;
}
.tdp-vizyon-pillar {
  display: flex;
  flex-direction: column;
  width: 100%;
}
@media (max-width: 575px) {
  .tdp-vizyon-pillar {
    padding: 24px 22px !important;
  }
}

/* Vizyon CTA strip — Bootstrap row breakpoints stack cleanly at md
   without the orphan caused by lg-only sizing. */
@media (max-width: 991px) {
  .tdp-vizyon-cta-row {
    text-align: center;
  }
  .tdp-vizyon-cta-row .tdp-vizyon-cta-btn {
    margin-top: 8px;
  }
}