:root {
        --bg: #fff;
        --text: #222;
        --muted: #6f6f7a;
        --border: #ececf6;
        --accent: #7c3aed;
        --accent-2: #a78bfa;
        --accent-soft: #f6f3ff;
        --radius: 14px;
        --shadow: 0 10px 28px rgba(124, 58, 237, 0.12);
      }
    
    .nav {
        position: sticky;
        top: 0;
        z-index: 50;
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: saturate(180%) blur(10px);
        /* border-bottom: 5px solid var(--border);  */
        border-bottom: 3px solid #7c3aed;
      }
      .nav .row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        min-height: 75px;
      }
      .brand {
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 900;
        letter-spacing: 0.2px;
        padding: 8px 0;
        border-radius: 12px;
       font-size: 17px;
      }
      .brand .logo {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        background: conic-gradient(
          from 210deg,
          var(--accent),
          var(--accent-2),
          var(--accent)
        );
        box-shadow: var(--shadow);
       margin-left: 15px;
      }
      .brand span {
        background: linear-gradient(90deg, var(--accent), var(--accent-2));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }

      /* ---- Üst menü ---- */
      .menu {
        display: flex;
        align-items: center;
        gap: 18px;
        margin: 0;
        padding: 0;
      }
      .menu li {
        list-style: none;
        position: relative;
      }
      .menu > li > a {
        position: relative;
        padding: 10px 8px;
        font-weight: 800;
        color: #3a3651;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 17px;
      }
      .menu > li > a::after {
        content: "";
        position: absolute;
        left: 10px;
        right: 10px;
        bottom: 6px;
        height: 2px;
        background: linear-gradient(90deg, var(--accent), var(--accent-2));
        transform: scaleX(0);
        transform-origin: left;
        transition: 0.25s;
        border-radius: 999px;
      }
      .menu > li > a:hover::after {
        transform: scaleX(1);
      }
      .menu .map {
        font-size: 18px;
      }

      /* Alt menü */
      .menu .sub {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        min-width: 260px;
        background: #fff;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        padding: 8px;
        display: none;
        z-index: 60;
      }
      .menu li.has-sub:hover > .sub,
      .menu li.has-sub:focus-within > .sub {
        display: block;
      }
      .menu .sub a {
        display: block;
        padding: 10px 12px;
        border-radius: 10px;
        font-weight: 600;
        color: #463a75;
      }
      .menu .sub a:hover {
        background: var(--accent-soft);
        color: var(--accent);
      }
      .menu > li > a.caret::after {
        content: "▾";
        font-size: 12px;
        transform: translateY(1px);
        opacity: 0.7;
        margin-left: 4px;
      }

      .cta {
        display: flex;
        align-items: center;
        gap: 10px;
         margin-right: 15px;
      }
      .btn {
        appearance: none;
        border: 1px solid var(--border);
        background: #fff;
        color: var(--accent);
        font-weight: 800;
        padding: 10px 14px;
        border-radius: 12px;
        transition: 0.2s;
       
      }
      .btn:hover {
        box-shadow: var(--shadow);
      }
      .btn.primary {
        background: linear-gradient(90deg, var(--accent), var(--accent-2));
        color: #fff;
        border-color: transparent;
        box-shadow: var(--shadow);
      }
      .hamb {
        display: none;
        border: 1px solid var(--border);
        background: #fff;
        border-radius: 10px;
        padding: 10px;
        cursor: pointer;
      }
      .hamb span {
        display: block;
        width: 20px;
        height: 2px;
        background: #4a3a77;
        margin: 4px 0;
        border-radius: 2px;
        transition: 0.2s;
      }

      .drawer {
        display: none;
      }
      .drawer.open {
        display: block;
      }
      .drawer .panel {
        padding: 10px 0 16px;
        border-top: 1px solid var(--border);
        display: grid;
        gap: 8px;
      }
      .drawer .panel a {
        padding: 10px 8px;
        border-radius: 10px;
      }
      .drawer .panel a:hover {
        background: var(--accent-soft);
      }

      /* Mobil alt menü (details) */
      .drawer .mob-sub {
        padding: 6px 2px;
      }
      .drawer .mob-sub > summary {
        cursor: pointer;
        padding: 10px 8px;
        border-radius: 10px;
        font-weight: 700;
        color: #3a3651;
        list-style: none;
      }
      .drawer .mob-sub[open] > summary {
        background: var(--accent-soft);
        color: var(--accent);
      }
      .drawer .mob-sub-list {
        display: grid;
        gap: 6px;
        padding: 8px 8px 6px 14px;
      }
      .drawer .mob-sub-list a {
        padding: 8px 10px;
        border-radius: 10px;
      }
      .drawer .mob-sub-list a:hover {
        background: var(--accent-soft);
      }

      @media (max-width: 1000px) {
        .menu,
        .cta {
          display: none;
        }
        .hamb {
          display: block;
        }
      }

      :root{
  --tab-text: #5a3caa;         
  --tab-border: var(--border);
  --tab-bg: #ffffff;           
  --tab-hover: #ebe7ff;        
  --tab-shadow: 0 10px 28px rgba(124,58,237,.12);
}

.tabs-wrap{
  border-bottom: 1px solid var(--border);
  background: #fff;
}

.tabs{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 60px;
  overflow-x: auto;            /* mobilde yatay kaydır */
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.tabs::-webkit-scrollbar{ height: 0; } 

.tab-btn{
  appearance: none;
  scroll-snap-align: start;
  border: 1.6px solid var(--tab-border);
  background: var(--tab-bg);
  color: var(--tab-text);
  font-weight: 800;
  font-size: 14.5px;
  padding: 10px 14px;
  line-height: 1;
  border-radius: 999px;
  cursor: pointer;
  transition: .18s ease;
  white-space: nowrap;
}
.tab-btn:hover{
  background: var(--tab-hover);
  border-color: color-mix(in oklab, var(--accent) 35%, var(--tab-border));
  transform: translateY(-1px);
}

/* Aktif sekme – */
.tab-btn.active{
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color: #fff;
  border-color: transparent;
  box-shadow: var(--tab-shadow);
}

/* Klavye odak halkası */
.tab-btn:focus-visible{
  outline: 3px solid color-mix(in oklab, var(--accent) 25%, transparent);
  outline-offset: 2px;
  border-color: transparent;
}

/* responsive */
@media (max-width: 640px){
  .tab-btn{ font-size: 13.5px; padding: 9px 12px; }
}
      
 /* 1. İndirim Kartları */
      /* .deal {
        display: grid;
        grid-template-columns: 72px 1fr;
        gap: 12px;
        align-items: center;
      }
      .deal .logo {
        width: 72px;
        height: 72px;
        border-radius: 16px;
        overflow: hidden;
        background: #eee;
      }
      .deal .logo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }
      .deal .top {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        align-items: center;
      }
      .code-row {
        display: flex;
        gap: 8px;
        align-items: center;
        margin-top: 8px;
      }
      .code {
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        padding: 10px 12px;
        border: 1px dashed #cfc8ff;
        background: var(--accent-soft);
        border-radius: 12px;
      }
      .left-quota {
        margin-left: auto;
        color: #6b6491;
        font-size: 13px;
      } */