/* =============================
       [TEMEL DEĞİŞKENLER
       ============================= */

      img {
        max-width: 100%;
        display: block;
        object-fit: cover;
      }

      /* =============================
       [TABS] – sabit sekme çubuğu
       ============================= */
      .tabs-wrap {
        position: sticky;
        top: 0;
        z-index: 40;
        background: #fff;
        border-bottom: 3px solid var(--border);
        /* border-bottom: 3px solid #7c3aed; */
      }
     .tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 25px 16px;
  overflow: visible;  /* scroll kapatıldı */
}

      .tab-btn {
        white-space: nowrap;
        padding: 10px 14px;
        border-radius: 999px;
        border: 2px solid var(--border);
        font-weight: 900;
        background: #fff;
        color: #4a3a77;
      }
      .tab-btn.active {
        background: linear-gradient(90deg, var(--accent), var(--accent-2));
        color: #fff;
        border-color: transparent;
        box-shadow: var(--shadow);
      }

      /* =============================
       [PANEL] – sekme içerikleri
       ============================= */
      section.panel {
        display: none;
        padding: 26px 0 0;
      }
      section.panel.active {
        display: block;
        animation: fade 0.22s ease;
      }
      @keyframes fade {
        from {
          opacity: 0.7;
          transform: translateY(6px);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }
      .h2 {
        margin: 0 0 10px;
        font: 900 24px/1.2 inherit;
        letter-spacing: 0.2px;
        background: linear-gradient(90deg, var(--accent), var(--accent-2));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        text-align: center;
      }
      .sub {
        margin: 0 0 16px;
        color: var(--muted);
        text-align: center;
      }

      /* =============================
       [GRID]
       ============================= */
      .grid {
        display: grid;
        gap: 16px;
        grid-template-columns: repeat(1, minmax(0, 1fr));
      }
      @media (min-width: 760px) {
        .grid {
          grid-template-columns: repeat(2, 1fr);
        }
      }
      @media (min-width: 1400px) {
        .grid {
          grid-template-columns: repeat(4, 1fr);
        }
      }

      
      /* // İNDİRİM KARTI // */
      .deal {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 10px;
        background: #fff;
        border: 3px solid var(--border);
        border-radius: 18px;
        box-shadow: var(--shadow);
        overflow: hidden;
        transition: 0.18s;
      }
      .deal:hover {
        transform: translateY(-3px);
        box-shadow: 0 22px 54px rgba(124, 58, 237, 0.18);
      }
      .deal .head {
        display: grid;
        grid-template-columns: 88px 1fr auto;
        gap: 12px;
        padding: 14px;
      }
      .deal .logo {
        width: 88px;
        height: 88px;
        border-radius: 16px;
        overflow: hidden;
        border: 1px solid var(--border);
      }
      .deal .name {
        margin: 2px 0 0;
        font: 900 18px/1.2 inherit;
      }
      .deal .cat {
        margin: 4px 0 0;
        color: var(--muted);
        font-size: 13px;
      }
      .deal .badge {
        align-self: start;
        padding: 7px 10px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 900;
        color: #fff;
        background: linear-gradient(90deg, var(--accent), var(--accent-2));
        box-shadow: 0 10px 20px rgba(124, 58, 237, 0.22);
      }
      .deal .desc {
        margin: 0 14px;
        color: var(--muted);
      }
      .deal .foot {
        display: flex;
        gap: 10px;
        align-items: center;
        justify-content: center;
        padding: 12px 14px 16px;
      }
      .deal .code {
        padding: 12px 14px;
        border-radius: 12px;
        background: #fff;
        border: 2px dashed var(--accent-2);
        font-weight: 900;
      }
      .deal .quota {
        margin-left: auto;
        color: var(--muted);
        font-size: 13px;
      }

      
      /* // ETKİNLİK FİLTRELER // */
      .filters {
        display: grid;
        gap: 14px;
        margin: 12px 0 18px;
      }
      .filters .row {
        display: grid;
        gap: 14px;
        grid-template-columns: repeat(1, 1fr);
      }
      @media (min-width: 720px) {
        .filters .row {
          grid-template-columns: repeat(3, 1fr);
        }
      }
      .field {
        display: flex;
        flex-direction: column;
        gap: 6px;
      }
      .field label {
        font: 800 14px/1.2 inherit;
        color: #5b4a88;
      }
      .field select,
      .field input {
        padding: 10px 12px;
        border: 2px solid var(--border);
        border-radius: 12px;
        outline: none;
        background: #fff;
      }
      .field select:focus,
      .field input:focus {
        box-shadow: 0 0 0 3px #ede7ff;
        border-color: #d8cdfa;
      }

      /* // ETKİNLİK KARTI // */
      .event {
        display: flex;
        flex-direction: column;
        background: #fff;
        border: 3px solid var(--border);
        border-radius: 18px;
        overflow: hidden;
        box-shadow: var(--shadow);
        transition: 0.18s;
        position: relative;
      }
      .event:hover {
        transform: translateY(-3px);
        box-shadow: 0 22px 54px rgba(124, 58, 237, 0.18);
      }
      .event .cover {
        aspect-ratio: 16/9;
        background: #eee;
      }
      .event .inner {
        padding: 12px 14px 64px 12px;
      }
      .event .title {
        margin: 0 0 6px;
        font: 900 18px/1.2 inherit;
      }
      .event .meta {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        color: var(--muted);
        font-size: 13px;
      }
      .event .actions {
        justify-content: center;
      }
      .tag {
        padding: 6px 10px;
        border-radius: 999px;
        border: 1px solid var(--border);
        background: #fff;
        font-weight: 800;
        font-size: 12px;
        color: #4a3a77;
      }
      .actions {
        display: flex;
        gap: 8px;
        margin-top: 10px;
      }
      .pill {
        display: inline-flex;
        align-items: center;
        height: 30px;
        padding: 0 12px;
        font: 800 12px/1 var(--font, inherit);
        border-radius: 12px;
        box-shadow: 0 8px 18px rgba(124, 58, 237, 0.18);
      }

      .date-tag {
        position: absolute;
        left: 14px;
        bottom: 14px;
        background: #f1eaff;
        color: #5e3ae6;
        border: 1px dashed #c9b9ff;
        text-transform: uppercase;
        letter-spacing: 0.4px;
      }

      .price-tag {
        position: absolute;
        right: 14px;
        bottom: 14px;
        background: linear-gradient(90deg, #7c3aed, #a78bfa);
        color: #fff;
        border: 0;
      }


      /* // ETKİNLİK FİLTRELER // */
      .filters {
        display: grid;
        gap: 14px;
        margin: 12px 0 18px;
      }
      .filters .row {
        display: grid;
        gap: 14px;
        grid-template-columns: repeat(1, 1fr);
      }
      @media (min-width: 720px) {
        .filters .row {
          grid-template-columns: repeat(3, 1fr);
        }
      }
      .field {
        display: flex;
        flex-direction: column;
        gap: 6px;
      }
      .field label {
        font: 800 14px/1.2 inherit;
        color: #5b4a88;
      }
      .field select,
      .field input {
        padding: 10px 12px;
        border: 2px solid var(--border);
        border-radius: 12px;
        outline: none;
        background: #fff;
      }
      .field select:focus,
      .field input:focus {
        box-shadow: 0 0 0 3px #ede7ff;
        border-color: #d8cdfa;
      }

     
      /* // Turnuva KARTI // */
     
/* .tr-filters {
  display: grid;
  gap: 14px;
  margin: 12px 0 18px;
}
.tr-filters .row {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 720px) {
  .tr-filters .row {
    grid-template-columns: repeat(3, 1fr);
  }
} */

/* Turnuva Kartı */
.t-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 3px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: 0.18s;
  position: relative;
}
.t-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 54px rgba(124, 58, 237, 0.18);
}
.t-card .cover {
  aspect-ratio: 16/9;
  background: #eee;
}
.t-card .inner {
  padding: 12px 14px 64px 12px;
}
.t-card .title {
  margin: 0 0 6px;
  font: 900 18px/1.2 inherit;
}
.t-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}
.t-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  justify-content: center;
}
.t-tag {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  font-weight: 800;
  font-size: 12px;
  color: #4a3a77;
}
.t-date-tag {
  position: absolute;
  left: 14px;
  bottom: 14px;
  background: #f1eaff;
  color: #5e3ae6;
  border: 1px dashed #c9b9ff;
}
.t-price-tag {
  position: absolute;
  right: 14px;
  bottom: 14px;
  background: linear-gradient(90deg, #7c3aed, #a78bfa);
  color: #fff;
}


/* Gezi Turu Kartı */
.t-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 3px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: 0.18s;
  position: relative;
}
.t-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 54px rgba(124, 58, 237, 0.18);
}
.t-card .cover {
  aspect-ratio: 16/9;
  background: #eee;
}
.t-card .inner {
  padding: 12px 14px 64px 12px;
}
.t-card .title {
  margin: 0 0 6px;
  font: 900 18px/1.2 inherit;
}
.t-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}
.t-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  justify-content: center;
}
.t-tag {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  font-weight: 800;
  font-size: 12px;
  color: #4a3a77;
}
.t-date-tag {
  position: absolute;
  left: 14px;
  bottom: 14px;
  background: #f1eaff;
  color: #5e3ae6;
  border: 1px dashed #c9b9ff;
}
.t-price-tag {
  position: absolute;
  right: 14px;
  bottom: 14px;
  background: linear-gradient(90deg, #7c3aed, #a78bfa);
  color: #fff;
}


/* Quiz Night kartı */


.t-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 3px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: 0.18s;
  position: relative;
}
.t-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 54px rgba(124, 58, 237, 0.18);
}
.t-card .cover {
  aspect-ratio: 16/9;
  background: #eee;
}
.t-card .inner {
  padding: 12px 14px 64px 12px;
}
.t-card .title {
  margin: 0 0 6px;
  font: 900 18px/1.2 inherit;
}
.t-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}
.t-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  justify-content: center;
}
.t-tag {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  font-weight: 800;
  font-size: 12px;
  color: #4a3a77;
}
.t-date-tag {
  position: absolute;
  left: 14px;
  bottom: 14px;
  background: #f1eaff;
  color: #5e3ae6;
  border: 1px dashed #c9b9ff;
}
.t-price-tag {
  position: absolute;
  right: 14px;
  bottom: 14px;
  background: linear-gradient(90deg, #7c3aed, #a78bfa);
  color: #fff;
}





      /* =============================
       [MODAL]
       ============================= */
  
      .modal-overlay {
        position: fixed;
        inset: 0;
        display: none;
        place-items: center;
        z-index: 1000;
        background: rgba(16, 12, 28, 0.55);
        backdrop-filter: blur(4px);
      }
      .modal {
        width: min(640px, 92vw);
        background: #fff;
        color: #111;
        border: 1px solid #e7e2ff;
        border-radius: 16px;
        box-shadow: 0 28px 64px rgba(0, 0, 0, 0.28);
        padding: 16px;
      }
      .modal .bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
      }
      .modal h3 {
        margin: 0;
        font: 900 18px/1.2 inherit;
      }
      .modal .actions {
        display: flex;
        justify-content: flex-end;
      }