/*
 * liste-paylas.css — Liste + Paylaş ORTAK bileşeni (06.10.2026 Sunai, iş 39). Eşi: js/liste-paylas.js
 * Yükleyenler: golden-product.php (iki düğme + pencere) · liste.php (pencere).
 * Tailwind derlemesine bağımsız (JIT tuzağı). Uyguno'da koyu tema yok → yalnız açık tema.
 * Renkler beyaz zemine göre AA: mürekkep #0f172a 17,8:1 · etiket #475569 7,6:1 · turuncu-koyu #c2410c beyaz metinle 5,2:1 ·
 * kazanç #15803d beyaz metinle 5,0:1 · etkileşimli kenar #7c8ba1 3,5:1.
 */

/* ================= Ürün sayfası: iki düğme ================= */
/* 39b: uzun etiket ("Alışveriş listesine ekle") → dar kapta alt alta, tam genişlik (metin kısalmaz, küçülmez).
   Karar İÇERİĞE değil KABIN genişliğine bağlı (container query): içerikle sarılsaydı yazı tipi geç yüklenince
   (ş/ğ → latin-ext) düğmeler yan yanadan alt altaya geçiyor, CLS 0,03–0,08 ölçüldü. Etiketler de iki etiketin
   genişini ayırır → eklenince genişlik değişmez. */
.urun-eylem {
  container-type: inline-size;
  display: grid;
  gap: 12px;
  margin-top: 4px;
}
.urun-eylem-dugmeler { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@container (min-width: 440px) {
  .urun-eylem-dugmeler { grid-template-columns: minmax(0, 1fr) auto; }
}
.urun-eylem--alt { margin-top: 20px; } /* görselsiz düzen: kartın altında */
.eylem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.eylem svg { width: 20px; height: 20px; flex: none; }
.eylem:focus-visible { outline: 2px solid #ea580c; outline-offset: 2px; }

.eylem--birincil { background: #c2410c; border-color: #c2410c; color: #fff; }
.eylem--birincil:hover { background: #9a3412; border-color: #9a3412; }
.eylem--birincil .ik-var { display: none; }
.eylem--birincil[aria-pressed="true"] { background: #15803d; border-color: #15803d; }
.eylem--birincil[aria-pressed="true"]:hover { background: #166534; border-color: #166534; }
.eylem--birincil[aria-pressed="true"] .ik-yok { display: none; }
.eylem--birincil[aria-pressed="true"] .ik-var { display: inline; }
/* İki etiket aynı hücrede üst üste: görünmeyen visibility:hidden → erişilebilir adda yok, ama genişliği ayırır */
.eylem-etiket { display: inline-grid; }
.eylem-etiket > span { grid-area: 1 / 1; }
.eylem-etiket .et-var { visibility: hidden; }
.eylem--birincil[aria-pressed="true"] .eylem-etiket .et-yok { visibility: hidden; }
.eylem--birincil[aria-pressed="true"] .eylem-etiket .et-var { visibility: visible; }

.eylem--ikincil { background: #fff; border-color: #7c8ba1; color: #0f172a; }
.eylem--ikincil:hover { background: #f8fafc; border-color: #475569; }

/* "Listende · Listeyi gör" — yer her zaman ayrılı (CLS 0) */
.eylem-durum {
  min-height: 24px;
  margin: 0;
  font-size: 14px;
  line-height: 24px;
  color: #475569;
}
.eylem-durum a {
  display: inline-block;
  min-height: 24px;
  color: #c2410c;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.eylem-durum a:focus-visible { outline: 2px solid #ea580c; outline-offset: 2px; border-radius: 4px; }

@media (min-width: 720px) {
  .urun-eylem { max-width: 560px; }
  /* Görselli düzen (urun-lupa.css): görsel 3 satırı kaplar, düğmeler sağ sütunda fiyatın altında */
  .urun-bas { grid-template-rows: auto 1fr auto; }
  .urun-bas > .urun-gorsel { grid-row: 1 / span 3; }
  .urun-bas > .urun-eylem { grid-column: 2; }
}

/* ================= Paylaş penceresi (<dialog>) ================= */
html.pp-acik { overflow: hidden; }
.pp {
  width: min(440px, calc(100% - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: #fff;
  color: #0f172a;
  box-shadow: 0 24px 60px rgb(15 23 42 / .28);
  overscroll-behavior: contain;
}
.pp::backdrop { background: rgb(15 23 42 / .5); }
.pp[open] { animation: pp-belir .2s ease-out; }
.pp-ic { padding: 16px 20px 20px; }
.pp-bas { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pp-bas h2 { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.3; }
.pp-kapat {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; margin-right: -10px;
  border: 0; border-radius: 999px; background: transparent; color: #475569; cursor: pointer;
}
.pp-kapat svg { width: 22px; height: 22px; }
.pp-kapat:hover { background: #f1f5f9; color: #0f172a; }
.pp-ozet {
  margin: 0 0 16px;
  font-size: 14px; line-height: 1.45; color: #475569;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pp-liste {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0; padding: 0; list-style: none;
}
.pp-liste [hidden] { display: none; }
.pp-k {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px;
  width: 100%; min-height: 92px; padding: 10px 4px;
  border: 1px solid transparent; border-radius: 14px; background: none;
  font: inherit; font-size: 13px; font-weight: 600; line-height: 1.25; color: #0f172a;
  text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.pp-k:hover { background: #fff7ed; border-color: #fdba74; }
.pp-k:focus-visible, .pp-kapat:focus-visible { outline: 2px solid #ea580c; outline-offset: 2px; }
.pp-ik {
  display: inline-grid; place-items: center; flex: none;
  width: 48px; height: 48px; border-radius: 50%;
  background: #f1f5f9; color: #0f172a;
  transition: background-color .15s ease, color .15s ease;
}
.pp-ik svg { width: 24px; height: 24px; }
.pp-k:hover .pp-ik { background: #ffedd5; color: #c2410c; }
.pp-k.is-tamam .pp-ik { background: #dcfce7; color: #15803d; }
.pp-durum { min-height: 20px; margin: 12px 0 0; font-size: 14px; color: #15803d; text-align: center; }
.pp-gizli, .pp-gizli-alan {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media (min-width: 720px) {
  .pp-liste { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Mobil: alttan açılan sayfa */
@media (max-width: 719px) {
  .pp {
    width: 100%;
    max-height: 88dvh;
    margin: auto 0 0;
    border-radius: 20px 20px 0 0;
  }
  .pp[open] { animation-name: pp-yukari; }
  .pp-ic { padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
}
@keyframes pp-belir { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@keyframes pp-yukari { from { transform: translateY(32px); opacity: .4; } to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .pp[open] { animation: none; }
  .eylem, .pp-k, .pp-ik { transition: none; }
}

/* ================= 69 · Ürün sayfası: ikon düğmeler + ipucu (07.10.2026 Sunai) =================
   Patron: "ana sayfadaki + gibi, yan yana, sadece ikon; üzerine gelince ne oldukları yazsın". Ana sayfa .sepet-ekle dili:
   44×44 (dokunma alanı = görünen alan), 12 px köşe, beyaz + #7c8ba1 kenar (3,46:1), mürekkep #0f172a (17,8:1).
   + üzerine gelince turuncu #c2410c (beyaz ikon 5,18:1) · listedeyken yeşil #15803d ✓ (5,02:1) · paylaş üzerine gelince #c2410c / #fff7ed.
   Boyut hiçbir durumda değişmez (ikonlar aynı hücrede üst üste) → CLS 0. Durum satırı geniş kapta düğmelerin YANINDA,
   dar kapta ALTINDA — karar kap genişliğinde (container query), içerikte değil (39b dersi). Yeri her zaman ayrılı.
   İpucu: mürekkep zemin + beyaz metin 14 px (17,8:1), düğmenin üstünde, başa hizalı (375 px'te sola taşmaz).
   WCAG 1.4.13: üzerine gelinebilir (8 px boşluğu ::before köprüsü kapatır) · kapatılabilir (Esc → js) · kalıcı (zamanlayıcı yok).
   Hover ipucu yalnız (hover: hover) cihazlarda; dokunmatikte yapışkan :hover ipucu açmaz. Eski .eylem kuralları DURUR
   (alarm kartı + liste.php + CF'deki eski ürün HTML'i kullanıyor). */
.ib-kat { display: grid; gap: 8px; align-items: center; }
@container (min-width: 380px) {
  .ib-kat { grid-template-columns: auto minmax(0, 1fr); gap: 16px; }
}
.ib-kat .eylem-durum { min-height: 24px; }
.ib-sira { display: flex; gap: 8px; }
.ib { position: relative; display: inline-flex; }
.ib-d {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #7c8ba1;
  border-radius: 12px;
  background: #fff;
  color: #0f172a;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.ib-d:focus-visible { outline: 3px solid #c2410c; outline-offset: 2px; }
.ib-ik { grid-area: 1 / 1; width: 20px; height: 20px; fill: currentColor; transition: transform .2s ease, opacity .2s ease; }
.ib-d--liste .ib-ik--tamam { opacity: 0; transform: scale(.6); }
@media (hover: hover) {
  .ib-d--liste:hover { background: #c2410c; border-color: #c2410c; color: #fff; }
  .ib-d--paylas:hover { background: #fff7ed; border-color: #c2410c; color: #c2410c; }
}
.ib-d--liste[aria-pressed="true"] { background: #15803d; border-color: #15803d; color: #fff; }
@media (hover: hover) {
  .ib-d--liste[aria-pressed="true"]:hover { background: #166534; border-color: #166534; }
}
.ib-d--liste[aria-pressed="true"] .ib-ik--arti { opacity: 0; transform: rotate(90deg) scale(.6); }
.ib-d--liste[aria-pressed="true"] .ib-ik--tamam { opacity: 1; transform: none; }

.ib-ipucu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 30;
  padding: 6px 10px;
  border-radius: 8px;
  background: #0f172a;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgb(15 23 42 / .22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
}
.ib-ipucu::before { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; } /* köprü: üzerine gelinebilir */
.ib-ipucu::after {
  content: ""; position: absolute; left: 17px; top: 100%;
  border: 5px solid transparent; border-top-color: #0f172a;
}
@media (hover: hover) {
  .ib:hover > .ib-ipucu { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity .15s ease .12s, transform .15s ease .12s, visibility 0s linear .12s; }
}
.ib-d:focus-visible + .ib-ipucu { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity .15s ease, transform .15s ease, visibility 0s; }
.ib.is-ipucu-kapali > .ib-ipucu { opacity: 0; visibility: hidden; pointer-events: none; transition: none; }

@media (prefers-reduced-motion: reduce) {
  .ib-d, .ib-ik, .ib-ipucu { transition: none !important; }
  .ib-ipucu { transform: none; }
}