/* Kurtuluş Bildirgesi sayfası (templates/pages/tr/kurtulus-bildirgesi.php).
   Sitenin üst menüsü ve alt bilgisi header.php/footer.php'den gelir; buradaki her kural
   .kb-sayfa ya da .kb-* / .a4-* altında kalır, site menüsünü etkilemez.

   2026-10-30: A4 broşürlerine (YM-A4.pdf, KB-A4.pdf) göre yeniden yazıldı. Her bölüm bir
   "sayfa" kartı: üstte PDF'in başlıklı bandı, ortada metin (masaüstünde iki sütun),
   altta geniş fotoğraf. Yazı tipi PDF'teki Mona Sans. */
.kb-sayfa{
  --kb-red:#db353b;   /* PDF'in kırmızısı */
  --kb-bordo:#6e1d26;
  --kb-text:#1f1f1f;
  --navy:#273248;
  font-family:'Mona Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color:var(--kb-text);
  background:#f4f1ec;
  padding:0 0 2rem;
}
.kb-col{ max-width:1060px; margin:0 auto; }

/* Okuma ilerleme çubuğu */
.kb-ilerleme{
  position:fixed; left:0; top:0; height:3px; width:0;
  background:linear-gradient(90deg, var(--kb-red), #ff7a7f);
  z-index:1100; transition:width .1s linear;
}

/* Ekran okuyucuya açık, görünmez başlık (başlık banttaki görselde yazılı) */
.a4-gizli{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ====== SAYFA KARTI ====== */
.a4{
  background:#fff;
  overflow:hidden;
  margin:0 0 1.25rem;
}
.a4-bant, .a4-foto{ margin:0; position:relative; }
.a4-bant img, .a4-foto img{ display:block; width:100%; height:auto; }

/* Metin: PDF'teki gibi düz paragraflar, vurgular rengiyle ve kalınlığıyla */
.a4-metin{
  padding:1.6rem 1.25rem 2rem;
  font-size:1.04rem;
  line-height:1.62;
}
.a4-metin p{ margin:0 0 .85rem; }
.a4-kirmizi{ color:var(--kb-red); font-weight:900; font-style:italic; }
.a4-kalin{ font-weight:800; }
.a4-koyu{ font-weight:900; font-style:italic; }
.a4-son{ color:var(--kb-red); font-weight:900; margin-top:.4rem !important; }
/* Slogan: kalın italik, altında PDF'teki kırmızı çizgi */
.a4-slogan{ font-weight:900; font-style:italic; letter-spacing:.01em; line-height:2.1; margin-top:1.1rem !important; }
.a4-slogan span{
  background:linear-gradient(transparent 70%, var(--kb-red) 70%, var(--kb-red) 88%, transparent 88%);
  padding:0 .15rem;
}

/* Fotoğraf: geniş şerit, Katıl düğmesi alt ortada */
.a4-foto--katil::after{
  content:""; position:absolute; inset:auto 0 0 0; height:55%;
  background:linear-gradient(transparent, rgba(0,0,0,.5)); pointer-events:none;
}
.kb-katil{
  position:absolute; z-index:1; left:50%; bottom:1.1rem; transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.8rem 1.4rem; border-radius:999px;
  background:#fff; color:var(--kb-red);
  font-weight:800; font-size:clamp(.85rem, 2.6vw, 1.05rem);
  letter-spacing:.05em; text-transform:uppercase; text-decoration:none; white-space:nowrap;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.kb-katil:hover, .kb-katil:focus-visible{ background:var(--kb-red); color:#fff; transform:translateX(-50%) translateY(-2px); }

/* Telefon: bölümler arasında boşluk yok; metin bitince fotoğraf hemen başlar,
   fotoğraftan sonra ikinci bölümün bandı doğrudan gelir (bej aralık ve fazla beyaz yok) */
@media (max-width:767.98px){
  .kb-video{ margin-bottom:0; }
  .a4{ margin:0; }
  .a4 + .a4{ margin-top:14px; }   /* iki fotoğraf (mektup fotoğrafı / bildirge bandı) arası kısa ayraç */
  .a4-metin{ padding:1.4rem 1.25rem 1.25rem; }
  .a4-metin > :last-child{ margin-bottom:0; }
  .kb-son{ background:#fff; padding:1.5rem 1.25rem 1.75rem; }
}

/* Tablet ve üstü: PDF gibi iki sütun */
@media (min-width:768px){
  .kb-sayfa{ padding:1.75rem 1.25rem 2.5rem; }
  .a4{ border-radius:18px; box-shadow:0 16px 44px rgba(39,50,72,.12); margin-bottom:2.25rem; }
  .a4-metin{
    columns:2; column-gap:2.75rem;
    padding:2.4rem 2.6rem 2.6rem;
    font-size:1.02rem;
  }
  .a4-metin p{ break-inside:avoid; }
  .kb-katil{ bottom:1.75rem; padding:.95rem 1.9rem; }
}
@media (min-width:1100px){
  .a4-metin{ padding:3rem 3.5rem 3.2rem; column-gap:3.5rem; font-size:1.06rem; }
}

/* ====== VİDEO (en üstte, başlıksız; bordo çerçeve) ====== */
.kb-video{
  background:radial-gradient(120% 90% at 50% 0%, #8a2530 0%, var(--kb-bordo) 55%, #4f141b 100%);
  padding:1rem;
  margin-bottom:1.25rem;
}
.kb-video-cerceve{
  position:relative; max-width:960px; margin:0 auto;
  aspect-ratio:16/9; border-radius:14px; overflow:hidden; background:#000;
  box-shadow:0 18px 50px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.08);
}
.kb-video-cerceve iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.kb-video-kapak{ position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; cursor:pointer; background:#000; }
.kb-video-kapak img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s ease, filter .3s ease; filter:brightness(.82);
}
.kb-video-kapak::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.45) 100%);
}
.kb-video-oynat{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:76px; height:76px; border-radius:50%; z-index:1;
  display:flex; align-items:center; justify-content:center;
  background:var(--kb-red); color:#fff; font-size:1.6rem; padding-left:5px;
  box-shadow:0 10px 30px rgba(219,53,59,.55), 0 0 0 8px rgba(255,255,255,.18);
  transition:transform .25s ease, box-shadow .25s ease;
}
.kb-video-kapak:hover img, .kb-video-kapak:focus-visible img{ transform:scale(1.03); filter:brightness(.95); }
.kb-video-kapak:hover .kb-video-oynat, .kb-video-kapak:focus-visible .kb-video-oynat{
  transform:translate(-50%,-50%) scale(1.08);
  box-shadow:0 12px 34px rgba(219,53,59,.7), 0 0 0 12px rgba(255,255,255,.22);
}
.kb-video-kapak:focus-visible{ outline:3px solid #fff; outline-offset:-3px; }
@media (min-width:768px){
  .kb-video{ border-radius:18px; padding:1.5rem; margin-bottom:2.25rem; }
  .kb-video-oynat{ width:92px; height:92px; font-size:1.9rem; }
}

/* ====== PAYLAŞ ====== */
.kb-son{ padding:1.25rem 1.25rem 1.5rem; text-align:center; }
.kb-paylas{ display:flex; justify-content:center; align-items:center; gap:10px; flex-wrap:wrap; }
.kb-son-baslik{ margin:0 0 .9rem; font-weight:800; font-size:1.05rem; color:var(--kb-text); }
.kb-paylas .d-none{ display:none; }
.kb-paylas-wa{ color:#25d366 !important; }
.kb-paylas a, .kb-paylas button{
  width:42px; height:42px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid #e6dcdc; background:#fff; color:var(--navy);
  text-decoration:none; font-size:16px; cursor:pointer;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
/* Sitedeki Font Awesome 6.4.0'da X logosu yok: yalnız "X" yazısı */
.kb-x{ font-weight:900; font-size:15px; font-family:'Mona Sans', sans-serif; }
.kb-paylas a:hover, .kb-paylas button:hover{ background:var(--kb-red); color:#fff; border-color:var(--kb-red); transform:translateY(-2px); }

@media (prefers-reduced-motion:reduce){
  .kb-ilerleme, .kb-katil, .kb-paylas a, .kb-paylas button, .kb-video-kapak img, .kb-video-oynat{ transition:none; }
}