/** Shopify CDN: Minification failed

Line 6:63 Unexpected "?"

**/
Vereceğim CSS kodlarını bana Responsive haline getirir misin?


/* Base */
.wyw-wrapper{border:1px solid var(--color-border,#eee); padding:16px; border-radius:12px; background:var(--color-bg,#ffffff)}
.wyw-wrapper .wyw-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; flex-wrap:wrap}
.wyw-wrapper .wyw-title{font-size:18px; margin:0}
.wyw-wrapper .wyw-controls{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.wyw-wrapper .wyw-addall{background:#0067ff; color:#fff; border:none; border-radius:8px; padding:10px 14px; cursor:pointer; transition: background .2s ease, color .2s ease, opacity .2s ease}
.wyw-wrapper .wyw-total{font-weight:600}
.wyw-wrapper .wyw-list{display:flex; flex-direction:column; gap:10px}

/* Row: daha esnek grid yapısı */
.wyw-wrapper .wyw-row{
  display:grid;
  grid-template-columns:72px 1fr auto;
  gap:12px;
  align-items:center;
  padding:10px;
  border:1px solid #f0f0f0; border-radius:12px; background:#fff;
}
.wyw-wrapper .wyw-thumb{width:72px; height:72px; object-fit:cover; border-radius:8px; background:#fafafa}
.wyw-wrapper .wyw-title-sm{font-weight:600}
.wyw-wrapper .wyw-sub{opacity:.7; font-size:12px; margin-bottom:6px}

/* başlık tek satıra zorlanmasın — küçük ekranda kaydırma yapmasın */
.wyw-wrapper .wyw-title-sm{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  padding-bottom:10px;
}

/* Selector + inline stock */
.wyw-wrapper .wyw-opt{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

/* Sabit genişliği kaldır, küçük ekranda %100, genişte 240px’e kadar */
.wyw-wrapper .wyw-variant-btn{
  display:inline-flex; align-items:center; justify-content:space-between;
  gap:8px; padding:8px 12px; border:1px solid #e5e7eb; border-radius:10px; background:#fff;
  cursor:pointer; font-size:14px; line-height:22px; position:relative;
  flex:1 1 220px;                 /* esnek taban genişlik */
  min-width:0;                    /* metnin taşmasını engelle */
  min-height:40px;
  padding-right:32px;             /* ok için boşluk */
  max-width:240px;                /* geniş ekranda dengeli */
}
.wyw-wrapper .wyw-variant-btn::after{
  content:''; width:14px; height:14px; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-size:14px 14px; background-repeat:no-repeat; background-position:center;
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
}
.wyw-wrapper .wyw-variant-btn:disabled{ opacity:.5; cursor:not-allowed; }
.wyw-wrapper .wyw-stock-inline{ font-size:12px; color:#0a7a0a }
.wyw-wrapper .wyw-stock-inline.oos{ color:#b00020 }

/* Price & actions — dar ekranda alta inebilsin */
.wyw-wrapper .wyw-right{display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end}
.wyw-wrapper .wyw-price{min-width:72px; text-align:right; font-weight:600}
.wyw-wrapper .wyw-add{background:#0067ff; color:#fff; border:none; border-radius:8px; padding:8px 12px; cursor:pointer; transition: background .2s ease, color .2s ease, opacity .2s ease}
.wyw-wrapper .wyw-add.is-disabled,
.wyw-wrapper .wyw-add:disabled { background:#e5e7eb; color:#374151; opacity:1; box-shadow:none }
.wyw-wrapper .wyw-addall.is-disabled,
.wyw-wrapper .wyw-addall:disabled { background:#e5e7eb; color:#374151; opacity:1; box-shadow:none }

/* Qty control */
.wyw-wrapper .wyw-qty{display:inline-flex; align-items:center; border:1px solid #ddd; border-radius:8px; overflow:hidden}
.wyw-wrapper .wyw-qty.is-locked { opacity:.6; cursor:not-allowed }
.wyw-wrapper .wyw-qty-btn{background:#fff; border:none; width:32px; height:36px; cursor:pointer}
.wyw-wrapper .wyw-qty-btn:disabled { cursor:not-allowed }
.wyw-wrapper .wyw-qty-input{width:56px; text-align:center; border:none; outline:none; height:36px}
.wyw-wrapper .wyw-qty-input[disabled] { background:#fafafa }

/* Footnote */
.wyw-wrapper .wyw-note{font-size:12px; opacity:.7; margin-top:6px}

/* Modal */
.wyw-vp-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; z-index:9999 }
.wyw-vp-dialog{ width:min(560px, 92vw); max-height:85vh; background:#fff; border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.25); display:flex; flex-direction:column }
.wyw-vp-header{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid #eee }
.wyw-vp-title{ font-weight:700 }
.wyw-vp-close{ background:none; border:none; font-size:22px; line-height:1; cursor:pointer; width:34px; height:34px; border-radius:8px }
.wyw-vp-close:hover{ background:#f5f5f5 }
.wyw-vp-body{ padding:6px 8px 12px; overflow:auto }
.wyw-vp-list{ list-style:none; margin:0; padding:0 }
.wyw-vp-item{ padding:8px; border-radius:10px; cursor:pointer }
.wyw-vp-item + .wyw-vp-item{ margin-top:4px }
.wyw-vp-item:hover{ background:#f7f7f7 }
.wyw-vp-item.is-active{ background:#eef6ff }
.wyw-vp-row{ display:flex; align-items:center; gap:12px }
.wyw-vp-thumb{ width:36px; height:36px; border-radius:999px; object-fit:cover; background:#fafafa; border:1px solid #eee }
.wyw-vp-name{ font-size:14px }

/* Prevent page scroll when modal is open */
html.wyw-no-scroll, html.wyw-no-scroll body{ overflow:hidden !important }

/* --- Responsive --- */

/* Large tablet ve aşağısı: sağ blok gerektiğinde alta insin */
@media (max-width:1024px){
  .wyw-wrapper .wyw-row{
    grid-template-columns:72px 1fr;
    grid-auto-rows:auto;
  }
  .wyw-wrapper .wyw-right{
    grid-column:1 / -1;
    justify-content:space-between;   /* mobilde butonlar ayrışsın */
  }
}

/* Tablet: küçük görsel, daha sıkı boşluk */
@media (max-width:768px){
  .wyw-wrapper{ padding:14px }
  .wyw-wrapper .wyw-thumb{ width:60px; height:60px }
  .wyw-wrapper .wyw-price{ min-width:64px }
  .wyw-wrapper .wyw-opt{ gap:8px }
  .wyw-wrapper .wyw-variant-btn{ max-width:100%; }  /* satır genişliğini kullan */
}

/* 680px alti: mevcut kural + ekstra düzeltmeler */
@media (max-width:680px){
  .wyw-wrapper .wyw-row{ grid-template-columns:56px 1fr }
  .wyw-wrapper .wyw-right{ justify-self:end }
  .wyw-wrapper .wyw-title{ font-size:16px }
  .wyw-wrapper .wyw-controls{ width:100% }
}

/* 480px ve alti: elementler tam genişlik, taşma yok */
@media (max-width:480px){
  .wyw-wrapper{ padding:12px }
  .wyw-wrapper .wyw-head{ gap:8px }
  .wyw-wrapper .wyw-controls,
  .wyw-wrapper .wyw-right{ width:100%; justify-content:stretch }
  .wyw-wrapper .wyw-add,
  .wyw-wrapper .wyw-addall{ width:100%; text-align:center }
  .wyw-wrapper .wyw-price{ text-align:left; min-width:0 }
  .wyw-wrapper .wyw-qty{ width:100%; justify-content:space-between }
  .wyw-wrapper .wyw-opt{ width:100% }
  .wyw-wrapper .wyw-variant-btn{ flex:1 1 100%; max-width:100% } /* tam genişlik */
}

/* Hide subtitle under the main title */
.wyw-wrapper .wyw-sub { display: none !important; }

.wyw-vp-meta { display:flex; flex-direction:column; gap:2px; }
.wyw-vp-name { font-weight:600; line-height:1.2; }
.wyw-vp-stock { font-size:12px; opacity:.9; color:#0a7a0a; }
.wyw-vp-stock.oos { color:#b00020; opacity:1; }

/* Select (kapalı hal) */
.wyw-size{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  font:600 14px/1.3 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  padding:8px 34px 8px 12px;
  min-width:120px; height:36px; line-height:1.3;
  color:#111; background:#fff;
  border:1px solid #d9d9e3; border-radius:10px;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
  cursor:pointer; transition:border-color .15s, box-shadow .15s, background-color .15s;
  background-image:
    linear-gradient(45deg,transparent 50%,#666 50%),
    linear-gradient(135deg,#666 50%,transparent 50%);
  background-position:right 12px center, right 7px center;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
  max-width:100%;                  /* küçük ekranda taşma yok */
}
.wyw-size:hover{ background:#fafafa; border-color:#c9c9d3; }
.wyw-size:focus{
  outline:none; border-color:#8ab4f8;
  box-shadow:0 0 0 3px rgba(138,180,248,.35);
}
.wyw-size::-ms-expand{ display:none; }

/* Options görünümü (destekleyenler) */
.wyw-size option{
  font:500 14px/1.3 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  padding:8px 12px;
  color:#111;
}
.wyw-size option:hover{
  background:#f3f6ff !important; color:#111 !important;
}
.wyw-size option:checked{
  background:#e8f0fe !important; color:#111 !important; font-weight:700;
}
@supports (-webkit-touch-callout: none){
  .wyw-size option:checked{ background-color:#e8f0fe !important; }
}
.wyw-size::-webkit-scrollbar{ width:10px }
.wyw-size::-webkit-scrollbar-thumb{ background:#c9c9d3; border-radius:8px }
.wyw-size::-webkit-scrollbar-track{ background:transparent }

/* Firefox dikey hizası */
@-moz-document url-prefix(){
  .wyw-size{ padding-top:7px; padding-bottom:7px; }
}

.wyw-group { margin: 18px 0 8px; }
.wyw-group-head { display:flex; align-items:center; justify-content:space-between; margin: 8px 0; }
.wyw-group-title { margin: 0; font-size: 1.05rem; font-weight: 700; }
.wyw-group-ids { font-size: .85rem; color: #6b7280; }
.wyw-group-list { display:block; }

/* Varyanta göre grup gizleme */
.wyw-group.is-hidden { display:none; }

/* Group Title badge */
.wyw-gt-badge {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
  padding: 2px 10px;
  border-radius: 9999px;
  font-size: .85rem;
  font-weight: 600;
  background: #eef2ff;   /* açık mavi arka plan */
  color: #3730a3;        /* koyu mavi metin */
}
.wyw-gt-badge[hidden] { display: none !important; }

/* (zaten vardı ama hatırlatma) */
.wyw-group.is-hidden { display:none; }

/* Grup başlığını tamamen kaldır */
.wyw-group-head { display: none !important; }
/* Üst boşluğu azalt (isteğe bağlı) */
.wyw-group { margin-top: 0 !important; }


/* JS init bitene kadar bileşeni gizle */
.wyw-wrapper[data-boot="0"] { visibility: hidden; }


/* Bileşen tamamen hazır olana kadar görünmesin */
.wyw-wrapper[data-boot="0"] {
  visibility: hidden;
}

/* İsteğe bağlı: skeleton ekran */
.wyw-skeleton { display: block; padding: 16px; }
.wyw-skeleton .bar { height: 14px; margin: 10px 0; background: #eee; border-radius: 7px; overflow: hidden; position: relative; }
.wyw-skeleton .bar::after {
  content: "";
  position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.05), transparent);
  animation: wyw-shimmer 1.1s infinite;
}
@keyframes wyw-shimmer { 100% { transform: translateX(100%); } }


/* --- Add to cart & Add all disabled görünümü --- */
.wyw-add:disabled,
.wyw-add.is-disabled,
.wyw-addall:disabled,
.wyw-addall.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(0.6);
  background-color: #ccc !important;
  color: #777 !important;
  border-color: #bbb !important;
  pointer-events: none;
  transition: opacity 0.2s ease, filter 0.2s ease;
}

.wyw-add:not(:disabled):hover,
.wyw-addall:not(:disabled):hover {
  opacity: 0.9;
  filter: none;
}



/* Başlığı tek satıra zorlamayı kaldır: uzun isimler sarsın, layout bozulmasın */
.wyw-wrapper .wyw-title-sm{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;   /* was: nowrap */
  display: -webkit-box;
  -webkit-line-clamp: 2; /* mobilde iki satıra izin verelim */
  -webkit-box-orient: vertical;
}

/* Dar ekranlarda sağ blok (fiyat + qty + buton) %100 genişlikte hizalansın */
@media (max-width:680px){
  .wyw-wrapper .wyw-right{ width:100%; justify-content:space-between; }
  .wyw-wrapper .wyw-price{ text-align:left; }
}

/* Çok dar ekranlarda qty alanı akıcı olsun, input daralabilsin */
@media (max-width:480px){
  .wyw-wrapper .wyw-qty{ width:100%; }
  .wyw-wrapper .wyw-qty-input{ width:48px; min-width:48px; }
}