/* =========================
   Temel değişkenler
   ========================= */
:root{
  --bg-1:#0b0f14;
  --bg-2:#121821;
  --ink:#e9eef5;
  --muted:#fff;
  --card:#141b25;
  --stroke:#1f2a37;
  --accent:#e10600;
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --glass: rgba(255,255,255,.08);
  --glass-2: rgba(255,255,255,.14);
}

/* Üst görsel kapsayıcı (wrapper ile hizalı) */
.top-logo-bar{
  max-width:1100px;    /* wrapper ile aynı genişlik */
  margin:0 auto;       /* ortala */
  padding:0;
}
.top-logo{
  display:block;
  width:100%;
  height:auto;
}

/* =========================================
   GOTHAM — ana aile
   (elindeki dosya adlarına göre eşleştirme)
   ========================================= */
@font-face{
  font-family: 'Gotham';
  src: local('Gotham Thin'), url('./assets/fonts/Gotham-Thin.otf') format('opentype'),
       url('./assets/fonts/GOTHAM-THIN.TTF') format('truetype');
  font-weight: 100; font-style: normal; font-display: swap;
}
@font-face{
  font-family: 'Gotham';
  src: local('Gotham Thin Italic'), url('./assets/fonts/Gotham-ThinItalic.otf') format('opentype'),
       url('./assets/fonts/GOTHAM-THINITALIC.TTF') format('truetype');
  font-weight: 100; font-style: italic; font-display: swap;
}

@font-face{
  font-family: 'Gotham';
  src: local('Gotham ExtraLight'), url('./assets/fonts/Gotham-ExtraLight.otf') format('opentype');
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face{
  font-family: 'Gotham';
  src: local('Gotham XLight Italic'), url('./assets/fonts/Gotham-XLightItalic.otf') format('opentype');
  font-weight: 200; font-style: italic; font-display: swap;
}

@font-face{
  font-family: 'Gotham';
  src: local('Gotham Light'), url('./assets/fonts/Gotham-Light.otf') format('opentype'),
       url('./assets/fonts/GOTHAM-LIGHT.TTF') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face{
  font-family: 'Gotham';
  src: local('Gotham Light Italic'), url('./assets/fonts/Gotham-LightItalic.otf') format('opentype'),
       url('./assets/fonts/GOTHAM-LIGHTITALIC.TTF') format('truetype');
  font-weight: 300; font-style: italic; font-display: swap;
}

@font-face{
  font-family: 'Gotham';
  src: local('Gotham Book'), url('./assets/fonts/Gotham-Book.otf') format('opentype'),
       url('./assets/fonts/GOTHAM-BOOK.TTF') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face{
  font-family: 'Gotham';
  src: local('Gotham Book Italic'), url('./assets/fonts/Gotham Book Italic.otf') format('opentype');
  font-weight: 400; font-style: italic; font-display: swap;
}

@font-face{
  font-family: 'Gotham';
  src: local('Gotham Medium'), url('./assets/fonts/Gotham-Medium.otf') format('opentype'),
       url('./assets/fonts/GOTHAM-MEDIUM.TTF') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face{
  font-family: 'Gotham';
  src: local('Gotham Medium Italic'), url('./assets/fonts/Gotham-MediumItalic.otf') format('opentype');
  font-weight: 500; font-style: italic; font-display: swap;
}

@font-face{
  font-family: 'Gotham';
  src: local('Gotham Bold'), url('./assets/fonts/Gotham-BoldItalic.otf') format('opentype'),
       url('./assets/fonts/GOTHAM-BOLD.TTF') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face{
  font-family: 'Gotham';
  src: local('Gotham Bold Italic'), url('./assets/fonts/Gotham-BoldItalic.otf') format('opentype'),
       url('./assets/fonts/GOTHAM-BOLDITALIC.TTF') format('truetype');
  font-weight: 700; font-style: italic; font-display: swap;
}

@font-face{
  font-family: 'Gotham';
  src: local('Gotham Black'), url('./assets/fonts/GOTHAM-BLACK.TTF') format('truetype');
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face{
  font-family: 'Gotham';
  src: local('Gotham Black Italic'), url('./assets/fonts/GOTHAM-BLACKITALIC.TTF') format('truetype');
  font-weight: 900; font-style: italic; font-display: swap;
}

/* Bazı paketlerde “Ultra” da var. Yoksa bu iki bloğu kaldır. */
@font-face{
  font-family: 'Gotham';
  src: local('Gotham Ultra'), url('./assets/fonts/Gotham-Ultra.otf') format('opentype'),
       url('./assets/fonts/GOTHAM-ULTRA.TTF') format('truetype');
  font-weight: 950; font-style: normal; font-display: swap;
}
@font-face{
  font-family: 'Gotham';
  src: local('Gotham UltraItalic'), url('./assets/fonts/Gotham-UltraItalic.otf') format('opentype'),
       url('./assets/fonts/GOTHAM-ULTRAITALIC.TTF') format('truetype');
  font-weight: 950; font-style: italic; font-display: swap;
}

/* =========================================
   GOTHAM NARROW — dar genişlikte aile
   ========================================= */
@font-face{
  font-family: 'Gotham Narrow';
  src: local('Gotham Narrow Light'), url('./assets/fonts/GothamNarrow-Light.otf') format('opentype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face{
  font-family: 'Gotham Narrow';
  src: local('Gotham Narrow Book'), url('./assets/fonts/GothamNarrow-Book.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face{
  font-family: 'Gotham Narrow';
  src: local('Gotham Narrow Medium'), url('./assets/fonts/GothamNarrow-Medium.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face{
  font-family: 'Gotham Narrow';
  src: local('Gotham Narrow Bold'), url('./assets/fonts/GothamNarrow-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* =========================================
   GOTHAM ROUNDED — yuvarlatılmış uçlar
   ========================================= */
@font-face{
  font-family: 'Gotham Rounded';
  src: local('Gotham Rounded Book'), url('./assets/fonts/gotham-rounded-book.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face{
  font-family: 'Gotham Rounded';
  src: local('Gotham Rounded Medium'), url('./assets/fonts/gotham-rounded-medium.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face{
  font-family: 'Gotham Rounded';
  src: local('Gotham Rounded Bold'), url('./assets/fonts/gotham-rounded-bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* =========================
   Reset / temel
   ========================= */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color:#fff;
  background: url('./bg-sample2.jpg') center/cover no-repeat fixed;
  min-height:100vh;
  background-color:#E0D6CA;
  font-family: 'Gotham', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
               'Helvetica Neue', Arial, sans-serif;
}
img{ max-width:100%; height:auto; display:block; }

/* =========================
   Sayfa yerleşimi
   ========================= */
.wrapper{
  max-width:1100px;
  margin-inline:auto;
  padding:0 20px 56px; /* üst 0: üst görsel tepeye yapışık */
}

/* =========================
   Header
   ========================= */
.header{
  margin:20px 0 20px;
  border-bottom:1px solid #000;
  padding-bottom:18px;
}
.header h1{
  color: #000;
  margin:0 0 6px;
  font-size:28px; font-weight:700; letter-spacing:.2px;
}
.lead{ margin:0; color:var(--muted); }

/* =========================
   Video grid ve kartlar
   ========================= */
/* -> Masaüstünde 2 sütun, mobilde 1 sütun */
.video-grid{
  display:grid;
  gap:24px; /* kartlar arası nefes */
  grid-template-columns: repeat(2, minmax(320px, 1fr));
  align-items:start;
}

/* Daha geniş ekranlarda kartlar nefes alsın */
@media (min-width: 1280px){
  .video-grid{ gap:28px; }
}

/* Tablet ve altı: tek sütun */
@media (max-width: 980px){
  .video-grid{
    grid-template-columns: 1fr;
  }
}

/* Kart estetiği */
.video-card{
  background:linear-gradient(180deg, rgba(224, 5, 5, 0.02), rgba(255,255,255,0));
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:14px;
  display:flex; flex-direction:column; gap:10px;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  height:100%;
}
.video-card:hover{
  transform:translateY(-2px);
  border-color: rgba(225,225,225,1);
  box-shadow:0 12px 38px rgba(0,0,0,.45);
}

/* Video oran kutusu */
.ratio{
  position:relative; width:100%; aspect-ratio:16/9; overflow:hidden;
  border-radius:12px; background:#0a0f13;
  border:1px solid rgba(255,255,255,.06);
  cursor:pointer; isolation:isolate;
}
.ratio video, .ratio iframe{
  position:absolute; inset:0; width:100%; height:100%; display:block; border:0;
  border-radius:12px;
}

/* Play rozeti */
.ratio .play-badge{
  position:absolute; inset:auto auto 12px 12px;
  display:inline-flex; align-items:center; gap:8px;
  background: var(--glass);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border:1px solid rgba(255,255,255,.2);
  border-radius:999px; padding:8px 12px; font-weight:600;
  box-shadow:0 6px 20px rgba(0,0,0,.35);
  transition:transform .2s ease, background .2s ease, border-color .2s ease;
  pointer-events:none;
}
.ratio:hover .play-badge{ transform:translateY(-2px); background:var(--glass-2); }
.ratio .play-badge svg{ width:16px; height:16px; flex:0 0 16px; }

/* Kart alt başlığı */
.caption {
  font-weight: 600;
  color: #000;
  letter-spacing: .2px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.caption::before {
  content: "";
  width: 20px;                /* logonun doğal genişliği */
  height: 23px;               /* logonun doğal yüksekliği */
  display: inline-block;
  background: url('https://images.chp.org.tr/logolar/chp/chp_logo_30x35.png')
              center/contain no-repeat;
  flex-shrink: 0;             /* esnemesin */
}
/* Footer */
.footer{
  margin-top:28px;
  color:#000;
  display:flex; justify-content:flex-end;
  border-top:1px solid rgba(255,255,255,.06);
  padding-top:16px;
}

/* =========================
   Lightbox
   ========================= */
.lightbox{
  position:fixed; inset:0; z-index:9999;
  display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.65);
  backdrop-filter: blur(6px) saturate(110%);
  -webkit-backdrop-filter: blur(6px) saturate(110%);
  padding:24px;
}
.lightbox[aria-hidden="false"]{ display:flex; }

.lb-content{
  position:relative;
  width:min(100%, 1100px);
  aspect-ratio:16/9;
  background:#000;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.12);
  animation:lbPop .18s ease-out;
}
.lb-content > *{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }

.lb-close{
  position:absolute; top:12px; right:12px; z-index:2;
  border:none; outline:none; cursor:pointer;
  background:var(--glass);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color:#fff; width:38px; height:38px; border-radius:999px;
  border:1px solid rgba(255,255,255,.2);
  display:grid; place-items:center;
  transition:transform .12s ease, background .2s ease, border-color .2s ease;
}
.lb-close:hover{ transform:translateY(-1px); background:var(--glass-2); border-color:rgba(255,255,255,.32); }
.lb-close svg{ width:18px; height:18px; }

@media (max-width:640px){
  .lightbox{ padding:12px; }
  .lb-close{ top:8px; right:8px; width:34px; height:34px; }
}

@media (prefers-reduced-motion: reduce){
  .lb-content{ animation:none; }
  .ratio:hover .play-badge{ transform:none; }
}

@keyframes lbPop{
  from{ transform:scale(.98); opacity:0; }
  to{ transform:scale(1); opacity:1); }
}

/* Lightbox açıkken scroll kilidi */
body.no-scroll{ overflow:hidden; }

/* Küçük ekran son rötuşlar */
@media (max-width:480px){
  .header h1{ font-size:22px; color:#000; }
  .wrapper{ padding:0 14px 42px; }
}
/* QR kartı için görsel stil */
.video-card.qr-card .ratio[data-type="qr"] {
  position: relative;
  display: block;
  border-radius: var(--radius, 16px);
  overflow: hidden;
  background: var(--card, #141b25);
  box-shadow: var(--shadow, 0 10px 30px rgba(0,0,0,.35));
  aspect-ratio: 16 / 9;
  transition: transform .2s ease, box-shadow .2s ease;
}

.video-card.qr-card .ratio[data-type="qr"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
}

.video-card.qr-card .ratio[data-type="qr"] img {
  width: 100%;
  height: 100%;
  object-fit: contain;         /* QR net görünsün */
  padding: 12px;               /* Kenarlardan biraz boşluk */
  background: var(--card, #141b25);
}

/* "program.chp.org.tr" rozeti */
.qr-badge {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--stroke, #1f2a37);
  background: var(--glass-2, rgba(255,255,255,.14));
  backdrop-filter: saturate(150%) blur(6px);
  color: var(--ink, #e9eef5);
  text-decoration: none;
  user-select: none;
  pointer-events: none; /* Link tıklamasını engellemez, sadece rozetin kendisi tıklanmaz */
}

.qr-badge svg {
  width: 18px;
  height: 18px;
}