/* AI FAB & Sheet */
.ai-fab{position:fixed; right:14px; bottom:14px; z-index:50; width:56px; height:56px; border-radius:999px; border:1px solid var(--line); background:#111; color:#fff; font-size:24px; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px rgba(0,0,0,.25); cursor:pointer; user-select:none}
.ai-fab:active{transform:translateY(1px)}
.ai-sheet{position:fixed; inset:0; z-index:49; display:none; align-items:flex-end; background:rgba(0,0,0,.35)}
.ai-sheet.open{display:flex}
.ai-panel{width:100%; max-height:78svh; overflow:auto; background:var(--surface); border-radius:16px 16px 0 0; display:flex; flex-direction:column}
.ai-head{position:sticky; top:0; background:var(--surface); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px}
.ai-title{font-weight:800}
.ai-close{border:1px solid var(--line); background:var(--surface); border-radius:999px; padding:6px 10px; font-weight:900; cursor:pointer}

.ai-body{padding:10px 12px; display:flex; flex-direction:column; gap:10px}
.ai-msg{display:flex; gap:8px}
.ai-msg .b{max-width:85%; padding:10px 12px; border:1px solid var(--line); border-radius:14px; background:var(--surface)}
.ai-me{justify-content:flex-end}
.ai-me .b{background:#111; color:#fff; border-color:#111}
.ai-bot .b{background:var(--soft)}
.ai-chips{display:flex; gap:8px; flex-wrap:wrap; margin-top:6px}
.ai-chip{border:1px solid var(--line); background:var(--surface); border-radius:999px; padding:6px 10px; font-weight:700; font-size:13px; cursor:pointer}
.ai-cards{display:grid; grid-template-columns:1fr; gap:8px; margin-top:8px}
.ai-card{display:flex; gap:8px; border:1px solid var(--line); border-radius:12px; padding:8px; align-items:center; background:var(--surface)}
.ai-card img{width:64px; height:64px; object-fit:cover; border-radius:10px; background:#f4f4f4}
.ai-card .t{font-weight:800; font-size:14px}
.ai-card .p{font-weight:900; margin-top:2px}
.ai-actions{display:flex; gap:8px; margin-top:6px}
.ai-btn{border:1px solid var(--line); border-radius:999px; background:var(--surface); padding:6px 10px; font-weight:700; cursor:pointer}
.ai-like{font-size:12px; color:#6b7280; display:flex; gap:6px; align-items:center}

.ai-foot{position:sticky; bottom:0; background:var(--surface); border-top:1px solid var(--line); display:flex; gap:6px; padding:10px 12px}
#aiInput{flex:1; padding:10px 12px; border:1px solid var(--line); border-radius:999px; font-size:15px; outline:none; background:var(--surface); color:var(--fg)}
#aiMic.listening{background:#111; color:#fff; border-color:#111}
.ai-tags{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.ai-tag{font-size:11px;padding:2px 8px;border-radius:999px;background:#f2f2f2}


/* === AI grid (küçük kartlar, görsel üstte, altına isim+fiyat) === */
.ai-cards{
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important; /* küçük kutular */
  gap: 10px !important;
  margin-top: 8px;
}

@media (max-width: 360px){
  .ai-cards{
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
  }
}

.ai-card{
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  padding: 0 !important;
  gap: 0 !important;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  cursor: pointer; /* karta tıklayınca da aç */
}

.ai-card img{
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;         /* kare ve küçük görünüm */
  object-fit: cover;
  display: block;
  background: #f4f4f4;
}

.ai-card .meta{ padding: 6px 8px 8px; }
.ai-card .t{
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 3px;
  display: -webkit-box;
  -webkit-line-clamp: 2;        /* uzun isimler 2 satırda kesilsin */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ai-card .p{
  font-size: 13px;
  font-weight: 800;
  opacity: .95;
}

/* Kalp (favori) — görselin üstünde */
.ai-heart{
  position: absolute;
  top: 6px; right: 6px;
  width: 26px; height: 26px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
  cursor: pointer;
  user-select: none;
}
.ai-heart span{ font-size: 14px; line-height: 1; }
.ai-heart.on span{ color: #e11d48; } /* dolu kalp rengi */

/* Gruplar için başlık */
.ai-group{ margin: 8px 0 14px; }
.ai-group h4{
  margin: 6px 2px 8px;
  font-size: 14px;
  font-weight: 800;
  opacity: .85;
}

/* Bu görünümde buton/etiketleri gizliyoruz */
.ai-card .ai-actions,
.ai-card .ai-tags{ display: none !important; }




/* === Birden fazla seçenek (bundle) için kapsayıcı === */
/* Bundle (grup) kutuları: sadece toplam göster */
.ai-bundles{ display:flex; flex-direction:column; gap:12px; margin-top:8px; }
.ai-bundle{ border:1px solid var(--line); border-radius:12px; background:var(--surface); box-shadow:0 2px 8px rgba(0,0,0,.06); padding:8px; }
.ai-bundle .head{ display:flex; align-items:center; justify-content:flex-end; margin:2px 2px 6px; }
.ai-bundle .sum{ font-size:13px; }
.ai-bundle .sum .lab{ opacity:.65; font-weight:700; margin-right:6px; }
.ai-bundle .sum .val{ font-weight:900; }


/* === Küçük kart grid === */
.ai-cards.small {
    --thumb: 92px; /* görsel kenar – daha küçük istersen 88 yap */
    --meta: 60px; /* isim+fiyat için ayrılan alan */
    --gap: 8px;
    display: grid !important;
    grid-template-columns: repeat(auto-fill, var(--thumb)) !important; /* sabit genişlik */
    gap: var(--gap) !important;
    justify-content: start; /* sağda boşluk kalırsa normale bırak */
}

/* Küçük kart grid – sabit kolon genişliği */
.ai-cards.small{
  --thumb: 92px;   /* görsel kenar – daha küçük istersen 88 yap */
  --meta: 60px;    /* isim+fiyat için ayrılan alan */
  --gap: 8px;

  display: grid !important;
  grid-template-columns: repeat(auto-fill, var(--thumb)) !important; /* sabit genişlik */
  gap: var(--gap) !important;
  justify-content: start; /* sağda boşluk kalırsa normale bırak */
}

/* Kart yüksekliği: görsel + metin alanı (kesilmeyi önler) */
.ai-card{
  height: calc(var(--thumb) + var(--meta)) !important;
  padding: 0 !important;
  gap: 0 !important;
  border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--surface);
  position: relative;
}
.ai-card img{
  width: 100% !important;
  height: var(--thumb) !important;   /* görsel yüksekliğini kilitle */
  object-fit: cover;
  display: block; cursor: pointer; background:#f4f4f4;
}
.ai-card .meta{
  min-height: var(--meta);
  padding: 6px 6px 8px;
  display: flex; flex-direction: column; justify-content: center;
}
.ai-card .t{
  font-size: 12px; line-height: 1.2;
  margin-bottom: 3px; font-weight: 700;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ai-card .p{ font-size: 12px; font-weight: 800; opacity: .95; }

/* 2 satır sınırı: sabit kart yüksekliğine göre güvenli kes */
.ai-cards.tworows{
  max-height: calc((var(--thumb) + var(--meta)) * 2 + var(--gap)) !important;
  overflow: clip; /* uyumsuz tarayıcıda hidden da olur */
}

/* Favori kalp */
.ai-heart{
  position:absolute; top:6px; right:6px; width:24px; height:24px; border-radius:999px;
  background:rgba(255,255,255,.92); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,.12);
  cursor:pointer; user-select:none;
}
.ai-heart span{ font-size:14px; line-height:1; }
.ai-heart.on span{ color:#e11d48; }

/* Bu görünümde eski buton/etiketleri gizle */
.ai-card .ai-actions, .ai-card .ai-tags{ display:none !important; }
/* Bundle: başlık satırını kaldır, minik rozet kullan */
.ai-bundle{ 
  position: relative; 
  border:1px solid var(--line); 
  border-radius:12px; 
  background:var(--surface); 
  box-shadow:0 2px 8px rgba(0,0,0,.06); 
  padding:8px; 
  /* rozet üstte kalacak; grid'e çarpışmasın diye biraz üst boşluk */
  padding-top: 28px; 
}

/* üst sağ köşede küçük toplam rozeti */
.ai-bundle .sum-pill{
  position:absolute; top:6px; right:8px;
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; line-height:1;
  background:rgba(0,0,0,.06);
  border:1px solid var(--line); 
  padding:4px 8px; 
  border-radius:999px;
}
.ai-bundle .sum-pill .lab{ opacity:.65; font-weight:700; }
.ai-bundle .sum-pill .val{ font-weight:900; }


/* === Adete göre düzenler === */
.ai-cards.layout-1{           /* 1 ürün: büyük ve ortalı */
  display:flex !important;
  justify-content:center !important;
  gap:12px !important;
}
.ai-cards.layout-1 .ai-card{
  width:min(520px, 92vw) !important;
}
.ai-cards.layout-1 .ai-card.size-lg .t{ font-size:16px }
.ai-cards.layout-1 .ai-card.size-lg .p{ font-size:15px }

/* 2 ürün: orta boy, ortalı 2 sütun */
.ai-cards.layout-2{
  display:grid !important;
  grid-template-columns: repeat(2, minmax(180px, 1fr)) !important;
  gap:12px !important;
  max-width:min(760px, 94vw) !important;
  margin:0 auto !important;
}
.ai-cards.layout-2 .ai-card.size-md .t{ font-size:14px }
.ai-cards.layout-2 .ai-card.size-md .p{ font-size:13px }

/* 4 ürün: tek satırda 4 sütun (genişlik yetmezse responsive düşer) */
.ai-cards.layout-4{
  display:grid !important;
  grid-template-columns: repeat(4, minmax(140px, 1fr)) !important;
  gap:10px !important;
}

/* 5+ ürün: 4 sütunlu grid, 5. otomatik alt satıra geçer */
.ai-cards.layout-grid{
  display:grid !important;
  grid-template-columns: repeat(4, minmax(140px, 1fr)) !important;
  gap:10px !important;
}

/* Kart boyutu nüansları (varsa metin boyutlarını yumuşatalım) */
.ai-card.size-sm .t{ font-size:13px }
.ai-card.size-sm .p{ font-size:13px }

/* Mobil/mini ekran düzeltmeleri (isteğe bağlı) */
@media (max-width: 720px){
  .ai-cards.layout-4,
  .ai-cards.layout-grid{
    grid-template-columns: repeat(2, minmax(140px, 1fr)) !important;
  }
}



/* === AI Kullanım Talimatı (Help) - v2 === */
.ai-helpbox{
  position: sticky; top: 0;
  z-index: 3;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  margin: 4px 0 8px;
}
.ai-helpbox .row{ display:flex; align-items:center; gap:8px; justify-content:space-between; }
.ai-helpbox .title{ font-weight:900; font-size:14px; display:flex; align-items:center; gap:6px; }
.ai-helpbox .title::before{ content:"❔"; opacity:.75; }
.ai-helpbox .toggle{
  border:1px solid var(--line); border-radius:999px;
  background: var(--surface); font-weight:800; cursor:pointer;
  padding:4px 8px; font-size:12px;
}
.ai-helpbox .body{ margin-top:8px; font-size:13px; line-height:1.35; }
.ai-helpbox .hint{ color:#6b7280; margin-top:6px; }

.ai-helpbox .exgrid{ display:grid; grid-template-columns: 1fr 1fr; gap:6px; margin-top:8px; }
@media (max-width:520px){ .ai-helpbox .exgrid{ grid-template-columns:1fr; } }

.ai-helpbox .ex{
  border:1px solid var(--line); border-radius:10px; background:var(--surface);
  padding:8px; cursor:pointer; font-weight:600;
}
.ai-helpbox .ex small{ display:block; color:#6b7280; font-weight:600; margin-top:2px }

/* Uyarı kutusu */
.ai-helpbox .learn{
  margin-top:8px;
  background:#fff7ed;              /* sıcak uyarı tonu */
  border:1px solid #fde68a;
  border-radius:10px;
  padding:8px;
  font-size:12px;
  color:#92400e;
}

/* Gizli mod: gövde kapanır ama başlık görünür kalır */
.ai-helpbox.collapsed{ padding:6px 10px; }
.ai-helpbox.collapsed .body{ display:none; }


/* === FAB yeni görünüm + dikkat animasyonu === */
.ai-fab{
  position:fixed; right:14px; bottom:14px; z-index:50;
  width:60px; height:60px; border-radius:999px;
  border:1px solid var(--line);
  background: radial-gradient(120% 120% at 30% 20%, #2b2b2b, #111);
  color:#fff; font-size:26px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 24px rgba(0,0,0,.28);
  cursor:pointer; user-select:none;
}
.ai-fab:active{ transform: translateY(1px); }
.ai-fab .ai-fab-emoji{ display:block; transform-origin:70% 70%; }

/* Dikkat modu (ilk girişte): el sallasın + hafif pulse */
.ai-fab.attention::after{
  content:""; position:absolute; inset:-8px; border-radius:999px;
  border:2px solid rgba(255,255,255,.18);
  animation: fabPulse 2.2s ease-out infinite;
}
.ai-fab.attention .ai-fab-emoji{ animation: wave 1.8s ease-in-out infinite; }

/* Animasyonlar */
@keyframes wave{
  0%{ transform: rotate(0deg); }
  10%{ transform: rotate(14deg); }
  20%{ transform: rotate(-8deg); }
  30%{ transform: rotate(14deg); }
  40%{ transform: rotate(-4deg); }
  50%{ transform: rotate(10deg); }
  60%,100%{ transform: rotate(0deg); }
}
@keyframes fabPulse{
  0%{ opacity:.75; transform: scale(1); }
  100%{ opacity:0; transform: scale(1.35); }
}

/* İlk kullanım koçu (baloncuk) */
.ai-fab-coach{
  position:fixed; right:14px; bottom:84px; z-index:60;
  max-width:280px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.16);
  padding:10px 12px;
  font-size:13px; line-height:1.35;
  display:none;
}
.ai-fab-coach.show{ display:block; animation: coachIn .18s ease-out; }
@keyframes coachIn{ from{ transform: translateY(6px); opacity:0; } to{ transform: none; opacity:1; } }
.ai-fab-coach .t{ font-weight:900; margin-bottom:4px; }
.ai-fab-coach .s{ opacity:.9; }
.ai-fab-coach .x{
  position:absolute; top:6px; right:6px;
  border:1px solid var(--line); background:var(--surface);
  border-radius:999px; width:22px; height:22px; line-height:20px;
  font-size:12px; cursor:pointer;
}

/* Balon oku */
.ai-fab-coach::after{
  content:""; position:absolute; right:16px; bottom:-8px;
  border-width:8px 8px 0 8px; border-style:solid;
  border-color: var(--surface) transparent transparent transparent;
  filter: drop-shadow(0 -1px 0 var(--line));
}

/* Hareket kısıtlı tercihine saygı */
@media (prefers-reduced-motion: reduce){
  .ai-fab.attention::after, .ai-fab.attention .ai-fab-emoji{ animation:none !important; }
  .ai-fab-coach.show{ animation:none !important; }
}






/* === Instagram floating buton === */
.ig-fab{
  position: fixed;
  left: 14px; bottom: 14px;       /* konum: sol-alt köşe */
  z-index: 1;                    /* ai-fab (50) üstünde kalsın */
  width: 56px; height: 56px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.15);
  background: radial-gradient(120% 120% at 30% 20%, #fd5949, #d6249f 60%, #285AEB 100%);
  transition: transform .15s ease, box-shadow .15s ease, opacity .2s ease;
}
.ig-fab:hover{ transform: translateY(-1px) scale(1.03); box-shadow: 0 12px 28px rgba(0,0,0,.32); }
.ig-fab:active{ transform: translateY(0) scale(.99); }

/* Küçük ekranlarda AI koç balonu ile çakışmayı azaltmak için hafif yukarı al */
@media (max-width: 420px){
  .ig-fab{ right: 14px; }
}

/* İstersen sağ-üst/sol-üst yapmak için:
   .ig-fab{ top:14px; bottom:auto; right:14px; left:auto; } gibi konumları değiştir. */