.search-box-wrapper {
      margin-bottom: 15px;
    }
    .select2-container .select2-selection--single {
      height: 42px !important;
      border-radius: 8px;
      border: 1px solid #ccc;
      padding: 8px 12px;
    }
    .select2-selection__rendered {
      line-height: 26px !important;
      font-size: 14px;
    }
    .select2-selection__arrow {
      height: 36px !important;
      right: 6px !important;
    }
  


    :root{
      --bg:#ffffff; --ink:#222; --muted:#757575; --brand:#D96041; --brand-weak:#F8F4E0;
      --row:#F7F7F7; --line:#eee; --chip:#f1f1f1;
    }
    *{box-sizing:border-box}
    .scroll-hint{display: none;}
    body{padding-bottom: 80px;margin:0;background:var(--bg);color:var(--ink);font:14px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial}
    a{color:inherit;text-decoration:none}
    .wrap{max-width:1200px;margin:0 auto;padding:16px}
    header{display:flex;align-items:center;gap:16px;margin-bottom:16px}
    header .logo{display:flex;align-items:center;gap:10px}
    header .logo img{height:36px;width:auto}
    header h1{font-size:18px;margin:0;color:var(--muted);font-weight:600}

    .layout{display:grid;grid-template-columns:260px 1fr;gap:16px}
    @media (max-width:980px){.layout{grid-template-columns:1fr}}

    /* Filtre paneli */
    .filters{border:1px solid var(--line);border-radius:10px;padding:12px;background:#fff;position:sticky;top:12px}
    .filters h3{margin:8px 0 12px;font-size:15px}
    .filter{margin-bottom:14px}
    .filter label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}
    .filter select,.filter input{width:100%;padding:8px;border:1px solid var(--line);border-radius:8px;background:#fff}
    .filter .row{display:flex;gap:8px}
    .filter .row input{flex:1}

    .filter-toggle{
      display:none;
      margin-bottom:12px;
      padding:10px 14px;
      border:0;border-radius:8px;
      background:var(--brand);color:#fff;font-weight:700;
      cursor:pointer;
    }

    /* Liste - desktop */
    .list{border:1px solid var(--line);border-radius:10px;background:#fff;overflow:hidden}
    .list .thead,.list .row{
      display:grid;
      grid-template-columns: minmax(280px,2fr) 140px 140px 100px 100px 100px 90px;
      align-items:center
    }
    .list .thead{background:#fafafa;font-weight:600;border-bottom:1px solid var(--line)}
    .list .thead div{padding:10px 12px;font-size:13px;color:#555}
    .list .row{border-bottom:1px solid var(--line)}
    .list .row:nth-child(even){background:var(--row)}
    .cell{padding:10px 12px}

    .namecell{display:flex;gap:12px;align-items:center}
    .namecell .thumb{flex:0 0 72px;    height: 100px;
      min-width: 83px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:8px;background:#fff;overflow:hidden}
      .namecell .thumb img{max-width:100%;max-height:100%}
      .namecell .meta{min-width:0}
      .namecell .title{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
      .namecell .vtag{display:inline-block;margin-top:4px;padding:3px 8px;border-radius:999px;background:var(--chip);font-size:12px;color:#444}

      .price a{display:block}
      .price strong{display:block;font-size:14px}
      .price span{display:block;margin-top:4px;font-size:11px;color:var(--muted)}

      .chip{display:inline-block;padding:5px 8px;border-radius:8px;background:var(--chip);font-size:12px;font-weight:600}
      .muted{color:var(--muted)}

      /* Puan dairesi */
      .scorewrap{display:flex;justify-content:center}
      .score{
        --p:0;
        width:70px;height:70px;border-radius:50%;
        background:conic-gradient(var(--brand) calc(var(--p)*1%), var(--brand-weak) 0);
        display:flex;align-items:center;justify-content:center;
      }
      .score span{
        width:54px;height:54px;border-radius:50%;background:#fff;
        display:flex;align-items:center;justify-content:center;
        font-weight:700;font-size:18px;
      }

      .pager {
        display:flex;
        justify-content:center;
        gap:6px;
        padding:14px;
        margin-top:20px;
      }

      .pager a, .pager span {
        min-width:34px;
        height:34px;
        border:1px solid #ddd;
        border-radius:8px;
        display:flex;
        align-items:center;
        justify-content:center;
        padding:0 10px;
        font-size:14px;
        background:#fff;
      }

      .pager .active {
        background:var(--brand);
        border-color:var(--brand);
        color:#fff;
        font-weight:600;
      }

      /* Mobil görünüm */
      @media (max-width:980px){
        .filter-toggle{display:block}
        .filters{display:none;position:static;margin-bottom:16px}
        .filters.open{display:block}

        .list .thead{display:none}
        .list .row{
          display:flex;flex-direction:row;align-items:flex-start;
          padding:12px;border-bottom:1px solid var(--line);
          position:relative
        }
        .list .row .cell{padding:6px}
        .list .row .thumb{flex:0 0 100px;height:100px;    max-width: 50px;}
        .list .row .meta{flex:1}
        .list .row .meta .title{white-space:normal}
        .list .row .chip{margin-right:8px;margin-top:6px}
        .scorewrap{position:absolute;top:8px;left:0px}
        .list .thead div:nth-child(6){
          display:none;
        }
        .scroll-hint{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    position:sticky;

    top:62px;

    z-index:20;

    margin:0 0 8px;

    padding:10px 12px;

    background:#fff3ed;

    border:1px solid #f1c7b8;

    border-radius:10px;

    color:#b94322;

    font-size:14px;

    font-weight:800;

    box-shadow:0 2px 8px rgba(0,0,0,.06);

  }

  .scroll-hint::before,

  .scroll-hint::after{

    content:"⇆";

    font-size:18px;

    font-weight:900;

  }

  .list{

    animation: tableHintMove 1.1s ease-in-out .5s 2;

  }
  .list::after{

    content:"";

    position:absolute;

    top:0;

    right:0;

    width:38px;

    height:100%;

    pointer-events:none;

    background:linear-gradient(to left, rgba(217,96,65,.18), transparent);

  }

  @keyframes tableHintMove {

    0%   { transform: translateX(0); }

    25%  { transform: translateX(-10px); }

    50%  { transform: translateX(10px); }

    75%  { transform: translateX(-6px); }

    100% { transform: translateX(0); }

  }
      }
      .meta .title{
        font-size:14px;
        line-height:1.3;
        white-space:normal;
      }
      @media (max-width:980px){
        .score{width:42px;height:42px}
        .score span{width:32px;height:32px;font-size:12px}
      }
/* Mobilde scrollable tablo */
@media(max-width:768px){
  .list{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    position:relative;
  }
  .list::-webkit-scrollbar{display:none;}

  .list .thead{
    display:flex;
    min-width:700px;  /* tüm kolonlar yan yana */
    background:#f7f7f7;
    font-size:12px;
    font-weight:600;
    border-bottom:1px solid var(--line);
  }
  .list .thead div{
    flex:0 0 auto;
    min-width:120px;
    padding:8px;
    white-space:nowrap;
  }
  .list .thead div:first-child{width:240px;} /* Ürün Adı daha geniş */

  .list .row{
    display:flex;
    min-width:750px; /* aynı genişlik başlıkla */
    border-bottom:1px solid var(--line);
  }
  .list .cell{
    flex:0 0 auto;
    min-width:120px;
    padding:10px 8px;
    white-space:nowrap;
  }
  .list .cell:first-child{width:240px;} /* isim alanı daha geniş */

}

.topnav {
  background:#fff;
  border-bottom:1px solid #eee;
  box-shadow:0 1px 4px rgba(0,0,0,.05);
  position:sticky;top:0;z-index:1000;
}
.topnav .container {
  width:1200px;
  padding:8px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between; /* Logo sola, menü sağa */
}
.topnav .brand {
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  color:#222;
  font-size:15px;
  text-decoration:none;
}
.topnav .brand img { display:block }

.topnav nav ul {
  margin:0;
  padding:0;
  display:flex;
  gap:18px;
  list-style:none;
}
.topnav nav a {
  color:#444;
  font-size:14px;
  text-decoration:none;
  padding:6px 0;
}
.topnav nav a:hover { color:#D96041 }

/* Menü butonu (mobilde görünür) */
.menu-toggle {
  display:none;
  font-size:22px;
  background:none;
  border:0;
  cursor:pointer;
  margin-left:auto;
}

@media(max-width:768px){
  .menu-toggle { display:block }
  .topnav nav {
    display:none;
    position:absolute;
    top:56px;right:12px;
    background:#fff;
    border:1px solid #eee;
    border-radius:8px;
    padding:10px;
    box-shadow:0 2px 6px rgba(0,0,0,.1);
  }
  .topnav nav ul { flex-direction:column; gap:10px }
  .topnav.open nav { display:block }
}
.compare-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #d3542e;
  color: #fff;
  display: flex;
  align-items: center;
  padding: 8px 16px;
  z-index: 1000;
  box-shadow: 0 -2px 6px rgba(0,0,0,0.2);
}

.compare-title {
  font-weight: bold;
  margin-right: 12px;
}

.compare-items {
  display: flex;
  flex: 1;
  gap: 8px;
}

.compare-items img {
  width: 40px;
  height: 60px;
  object-fit: contain;
  border: 1px solid #fff;
  border-radius: 4px;
  background: #fff;
  padding: 2px;
}

.compare-btn, .compare-clear {
  margin-left: 8px;
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.compare-btn {
  background: #fff;
  color: #d3542e;
  font-weight: bold;
}

.compare-clear {
  background: #333;
  color: #fff;
}
.compare-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  color: #333;
  font-size: 14px;
  font-weight: 500;
  padding: 4px 0;
}

.compare-btn .compare-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #d3542e;
  color: #fff;
  font-size: 16px;
  line-height: 20px;
  font-weight: bold;
}

.compare-btn:hover .compare-icon {
  background: #a8321a;
}
.list .compare-btn {
  font-size: 12px;
  color: #555;
  font-weight: 400;
}
.list .compare-btn .compare-icon {
  width: 18px;
  height: 18px;
  font-size: 14px;
}
.list .compare-btn.active {
  color: #2e7d32;
  font-weight: 600;
}
.list .compare-btn.active .compare-icon {
  background: #2e7d32;
}
.brand-list {
  max-height: 300px; /* çok marka varsa scroll */
  overflow-y: auto;
  border: 1px solid #ddd;
  padding: 12px;
  border-radius: 8px;
  background: #fafafa;
}

.brand-item {
  display: block;
  padding: 6px 0;
  font-size: 15px;
  cursor: pointer;
}

.brand-item input {
  margin-right: 8px;
  cursor: pointer;
}
/* Checkbox filtre container */
.checkbox-group {
  border: 1px solid #ddd;
  background: #fafafa;
  padding: 12px;
  border-radius: 8px;
  max-height: 260px;
  overflow-y: auto;
}

/* Her bir satır */
.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 14px;
  cursor: pointer;
}

/* Checkbox'ın kendisi */
.checkbox-row input[type="checkbox"] {
  width: auto !important;
  height: auto !important;
  margin: 0;
}
.sort-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  cursor: pointer;
  color: #444;
  text-decoration: none;
  position: relative;
}

/* Pasif ikon (hover olmadan gizli) */
.sort-icon {
  opacity: 0;
  font-size: 12px;
  transition: opacity 0.2s;
  color: #999;
}

/* Hover olduğunda ikon göster */
.sort-link:hover .sort-icon {
  opacity: 1;
}

/* Aktif sıralama (ikon her zaman görünür ve renkli) */
.sort-icon.active {
  opacity: 1 !important;
  color: var(--brand, #0A74DA);
  font-weight: bold;
}
.seo-content {
  max-width: 900px;
  margin: 40px auto 0;
  padding: 24px 28px;
  background: #fafafa;
  border-top: 1px solid #eee;
  font-size: 14px;
  line-height: 1.6;
  color: #444;
}

.seo-content h2 {
  font-size: 18px;
  margin-bottom: 12px;
  color: #222;
}

.seo-content h3 {
  font-size: 15px;
  margin: 18px 0 8px;
  color: #333;
}

.seo-content p {
  margin-bottom: 10px;
}

.seo-content ul {
  margin: 8px 0 0 18px;
  padding: 0;
}

.seo-content li {
  margin-bottom: 6px;
  font-size: 13.5px;
}

/* Mobilde daha da kompakt */
@media (max-width: 768px) {
  .seo-content {
    padding: 18px 16px;
    font-size: 13.5px;
  }

  .seo-content h2 {
    font-size: 16px;
  }

  .seo-content h3 {
    font-size: 14px;
  }
}
.filters{

  border:1px solid var(--line);

  border-radius:12px;

  padding:14px;

  background:#fff;

  position:sticky;

  top:84px;

  height:fit-content;

}

.filters h3{

  margin:0 0 14px;

  font-size:16px;

  color:#111827;

}

@media (max-width:980px){

  .filters{

    display:none;

    position:static;

    top:auto;

    margin-bottom:16px;

  }

  .filters.open{

    display:block;

  }

}

.filter{

  margin-bottom:16px;

}

.filter > label{

  display:block;

  font-size:13px;

  font-weight:700;

  color:#374151;

  margin-bottom:8px;

}

/* normal inputs */

.filter select,

.filter input[type="text"],

.filter input[type="number"]{

  width:100%;

  padding:10px 12px;

  border:1px solid #d1d5db;

  border-radius:8px;

  background:#fff;

  color:#111827;

  font-size:14px;

}

.filter select:focus,

.filter input[type="text"]:focus,

.filter input[type="number"]:focus{

  outline:none;

  border-color:var(--brand);

  box-shadow:0 0 0 3px rgba(217,96,65,.12);

}

.filter .row{

  display:flex;

  gap:8px;

}

.filter .row input{

  flex:1;

  min-width:0;

}

/* checkbox groups */

.checkbox-group{

  border:1px solid #d1d5db;

  background:#fff;

  border-radius:10px;

  max-height:260px;

  overflow-y:auto;

  padding:6px;

}

.checkbox-row{

  display:flex;

  align-items:center;

  gap:10px;

  padding:8px 10px;

  margin:0;

  border-radius:8px;

  cursor:pointer;

  font-size:14px;

  font-weight:500;

  line-height:1.35;

  color:#111827 !important;

  background:transparent;

}

.checkbox-row:hover{

  background:#f9fafb;

}

.checkbox-row input[type="checkbox"]{

  flex:0 0 16px;

  width:16px !important;

  height:16px !important;

  margin:0 !important;

  accent-color:var(--brand);

}

.checkbox-row.is-checked{

  background:var(--brand-soft);

  color:var(--brand-dark) !important;

  font-weight:700;

}

#brandSearch{

  margin-bottom:8px;

}

#brandSearch::placeholder{

  color:#9ca3af;

}
/* Layout shell is managed by assets/css/site-shell.css. */