:root{
    --turq-1:#22b7c6; --turq-2:#0f8ea3; --ink:#0e2f34; --text:#2c4246;
    --card:#fff; --ring:rgba(20,150,175,.16); --shadow:0 10px 26px rgba(0,0,0,.08);
    --radius:16px; --maxw:1200px;
  }
  *{box-sizing:border-box} html,body{margin:0}
  body{font:16px/1.7 "Segoe UI",Arial;color:var(--text);background:#f5fbfc}

  /* Banner (sol hizalı) */
  .page-banner{position:relative;min-height:280px;color:#fff;display:flex;align-items:center;
    background:radial-gradient(2000px 700px at 110% -10%, rgba(255,255,255,.18), transparent 60%),
               linear-gradient(102deg,var(--turq-1),var(--turq-2))}
  .banner-inner{width:100%;max-width:var(--maxw);margin:0 auto;padding:56px 24px 68px}
  .breadcrumb{display:block;font-size:12px;letter-spacing:1px;opacity:.9;margin-bottom:8px}
  .banner-title{margin:0 0 8px;font-weight:800;line-height:1.1;font-size:clamp(24px,3.6vw,42px);
    padding-left:14px;position:relative;text-align:left}
  .banner-title::before{content:"";position:absolute;left:0;top:10%;width:4px;height:80%;
    border-radius:4px;background:linear-gradient(180deg,#fff,#bff1f6)}
  .banner-sub{margin:0;max-width:62ch;opacity:.95;font-size:clamp(13px,1.6vw,16px);text-align:left}

  .wrap{max-width:var(--maxw);margin:40px auto 100px;padding:0 18px}
  .topbar{display:flex;align-items:center;gap:16px;justify-content:space-between;margin:0 0 18px}
  .topbar h2{margin:0;font-size:22px;color:var(--ink);letter-spacing:.3px;position:relative;padding-bottom:10px}
  .topbar h2::after{content:"";position:absolute;left:0;bottom:0;width:220px;height:2px;
    background:linear-gradient(90deg,#d9ecef,#8ed9e3,#d9ecef)}

  /* ==================== KONTROLLER ==================== */
  .controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}

  .chipset{
    display:flex; gap:8px; padding:8px; border-radius:18px;
    background:linear-gradient(180deg,#ffffff 60%, #eef7f8);
    border:1px solid var(--ring);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 4px 14px rgba(0,0,0,.05);
  }

  .pill{
    --bg:#ffffff; --fg:#175a66; --bd:rgba(22,159,190,.18);
    display:inline-flex; align-items:center; gap:8px;
    padding:10px 14px; border-radius:14px;
    background:var(--bg);
    color:var(--fg);
    border:1.5px solid var(--bd);
    box-shadow:
      0 2px 8px rgba(0,0,0,.04),
      inset 0 0 0 1px rgba(255,255,255,.6);
    font-size:13.5px; cursor:pointer; user-select:none;
    transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
  }
  .pill:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.08) }
  .pill:active{ transform:translateY(0) scale(.98) }
  .pill:focus-visible{ outline:3px solid #9ce6ef; outline-offset:2px }

  .pill.active{
    --bg:linear-gradient(135deg,#25becd,#0e8aa2);
    --fg:#fff; --bd:transparent;
    box-shadow:
      0 10px 18px rgba(15,140,160,.25),
      0 0 0 2px rgba(0,0,0,0) inset,
      0 0 0 1px rgba(255,255,255,.4) inset;
    position:relative;
  }
  .pill.active::after{
    content:""; position:absolute; left:10px; right:10px; bottom:-6px; height:3px; border-radius:2px;
    background:linear-gradient(90deg,#bdeef5,#3bb5bd,#0ea0a8); opacity:.9;
  }

  .dot{width:10px;height:10px;border-radius:50%;background:currentColor;display:inline-block;opacity:.9}
  .pill.active .dot{opacity:1;filter:drop-shadow(0 1px 0 rgba(0,0,0,.15))}

  .year-wrap{position:relative}
  .year{
    appearance:none; -webkit-appearance:none; -moz-appearance:none;
    padding:10px 36px 10px 12px; border-radius:14px; border:1.5px solid var(--ring);
    background:#fff; font-size:13.5px; color:#184b52;
    box-shadow:0 4px 12px rgba(0,0,0,.04), inset 0 1px 0 rgba(255,255,255,.8);
    transition:border-color .2s ease;
  }
  .year:focus{ outline:3px solid #9ce6ef; outline-offset:2px }
  .year-wrap::after{
    content:"▾"; position:absolute; right:10px; top:50%; transform:translateY(-52%);
    pointer-events:none; font-size:12px; color:#206974; opacity:.8;
  }

  .expo-grid{display:grid;gap:28px;grid-template-columns:repeat(3,1fr)}
  .expo-row{display:contents}
  .row-hidden{display:none !important}

  .expo-card{background:var(--card);border:1px solid var(--ring);border-radius:var(--radius);box-shadow:var(--shadow);
    overflow:hidden;display:flex;flex-direction:column;min-height:320px;position:relative}
  .expo-card.image .img,.expo-card.stand .img{flex:1 1 auto;min-height:320px;background:#eaf4f6 center/cover no-repeat}
  .expo-card.text{padding:22px 22px 26px;display:flex;align-items:flex-start}
  .expo-card.text p{margin:0;font-size:15px;color:#314a4e}
  .expo-card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;
    background:linear-gradient(90deg,#bdeef5 0,#3bb5bd 40%,#0ea0a8 100%);opacity:.85}

  .nores{margin:6px 0 0;text-align:right;font-size:13.5px;color:#0e6a75;display:none}
  .nores.show{display:block}

  @media(max-width:1100px){.expo-grid{grid-template-columns:1fr 1fr}}
  @media(max-width:700px){
    .expo-grid{grid-template-columns:1fr}
    .expo-card.image .img,.expo-card.stand .img{min-height:220px}
    .page-banner{min-height:230px}.banner-inner{padding:48px 18px 56px}
    .topbar{align-items:flex-start;gap:12px;flex-direction:column}
    .topbar h2::after{width:180px}
  }