/* =====================================================================================================================
   GÖRSELLE ARA v2 (27.09.2026) — aracın kendi bileşenleri. tasarim.css (--yt- değişkenleri) + araclar.css (.yt-surukle,
   .yt-urun, .yt-benzerlik, .yt-iskelet, .yt-palet …) üzerine kurulur; yalnız .yt-ga- önekli sınıflar. 4 px ızgara;
   vurgu yalnız lacivert (--yt-l); kırmızı (--yt-cta) yalnız "Sepete ekle".
   ===================================================================================================================== */
.yt-ga [hidden] { display: none !important; }   /* flex/grid verilmiş öğelerde hidden özniteliği ezilmesin */
.yt-ga { background: var(--yt-l-zemin); }
.yt-ga-dizin { margin: 0 0 16px; }
.yt-ga-dizin__b { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; }
.yt-ga-dizin .yt-ilerleme { max-width: 360px; }

/* ------------------------------------------------------------------ 1-2: fotoğraf + seçenekler */
.yt-ga-izgara { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: 16px; align-items: start; }
.yt-ga-baslik { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; }
.yt-ga-adim { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: var(--yt-l); color: #fff; font-size: 13px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; }
.yt-ga-giris { display: flex; flex-direction: column; gap: 12px; }
.yt-ga-giris .yt-surukle { min-height: 240px; }
.yt-ga-dugmeler { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.yt-ga-dugmeler .yt-btn { height: 44px; }

/* kırpma: kutunun dışı gölgeyle karartılır (sahne taşmayı keser) */
.yt-ga-kirp { display: flex; flex-direction: column; gap: 12px; }
.yt-ga-sahne { position: relative; align-self: center; max-width: 100%; overflow: hidden; border-radius: var(--yt-r-o); background: #0f151e;
  line-height: 0; user-select: none; -webkit-user-select: none; }
.yt-ga-tuval { display: block; max-width: 100%; height: auto; }
.yt-ga-kutu { position: absolute; border: 2px solid #fff; box-shadow: 0 0 0 9999px rgba(15, 21, 30, .55); cursor: move; touch-action: none; }
.yt-ga-kutu::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .35) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255, 255, 255, .35) 1px, transparent 1px); background-size: 33.333% 33.333%; background-position: -1px -1px; pointer-events: none; }
.yt-ga-kutu:focus-visible { outline: 3px solid var(--yt-bag); outline-offset: 2px; }
.yt-ga-kirp.tum .yt-ga-kutu { box-shadow: none; border-style: dashed; }
.yt-ga-kirp.tum .yt-ga-tutamac { display: none; }
.yt-ga-tutamac { position: absolute; z-index: 1; width: 18px; height: 18px; background: #fff; border: 2px solid var(--yt-l); border-radius: 50%; touch-action: none; }
.yt-ga-tutamac::before { content: ""; position: absolute; inset: -13px; }   /* 44 px dokunma alanı */
.yt-ga-tutamac[data-kose="su"] { top: -10px; left: -10px; cursor: nwse-resize; }
.yt-ga-tutamac[data-kose="sa"] { top: -10px; right: -10px; cursor: nesw-resize; }
.yt-ga-tutamac[data-kose="au"] { bottom: -10px; left: -10px; cursor: nesw-resize; }
.yt-ga-tutamac[data-kose="aa"] { bottom: -10px; right: -10px; cursor: nwse-resize; }
.yt-ga-arac { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.yt-ga-alan-sec { display: flex; gap: 6px; }
.yt-ga-ayar { display: flex; gap: 4px; }
.yt-ga-arac [data-yt-ga-degistir] { margin-left: auto; }
.yt-ga-uyari { margin: 0; }

.yt-ga-alan { margin: 0; padding: 0; border: 0; min-width: 0; }
.yt-ga-alan legend { margin: 0 0 8px; border: 0; font-size: 13px; width: auto; }
.yt-ga-secenek { position: relative; margin: 0; font-weight: 400; }
.yt-ga-secenek:has(input:checked) { background: var(--yt-l-acik); border-color: var(--yt-l); color: var(--yt-l-koyu); font-weight: 600; }
.yt-ga-secenek:has(input:focus-visible), .yt-ga-kip:has(input:focus-visible) { outline: 2px solid var(--yt-bag); outline-offset: 2px; }
.yt-ga-sayi { font-size: 12px; font-weight: 400; color: var(--yt-m3); font-variant-numeric: tabular-nums; }
.yt-ga-kipler { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.yt-ga-kip { position: relative; display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 10px 12px; border: 1px solid var(--yt-cizgi-g);
  border-radius: var(--yt-r-o); background: var(--yt-beyaz); cursor: pointer; font-weight: 400; transition: border-color .15s ease, background-color .15s ease; }
.yt-ga-kip:hover { border-color: var(--yt-l); }
.yt-ga-kip:has(input:checked) { border-color: var(--yt-l); background: var(--yt-l-acik); box-shadow: inset 0 0 0 1px var(--yt-l); }
.yt-ga-kip__t { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--yt-l-koyu); }
.yt-ga-kip__a { font-size: 12px; line-height: 16px; color: var(--yt-m2); }
.yt-ga-ara-cubuk .yt-btn[aria-busy="true"] { opacity: .75; cursor: progress; }
.yt-ga-gizlilik { display: flex; gap: 8px; align-items: flex-start; }
.yt-ga-gizlilik i { margin-top: 2px; color: var(--yt-ok); }

.yt-ga-mobil-ara { display: none; }

/* ------------------------------------------------------------------ sonuç */
.yt-ga-sonuc-alan { margin-top: 32px; scroll-margin-top: 16px; }
.yt-ga-sonuc-alan:empty { display: none; }
.yt-ga-sonuc-alan [tabindex="-1"]:focus { outline: 0; }
.yt-ga-sorgu { display: flex; align-items: center; gap: 16px; margin: 0 0 12px; padding: 16px; background: var(--yt-beyaz); border: 1px solid var(--yt-cizgi);
  border-radius: var(--yt-r-o); box-shadow: var(--yt-g1); }
.yt-ga-sorgu__g { flex: 0 0 72px; width: 72px; height: 72px; border-radius: var(--yt-r-o); overflow: hidden; background: var(--yt-zemin); border: 1px solid var(--yt-cizgi);
  display: flex; align-items: center; justify-content: center; color: var(--yt-m3); font-size: 22px; }
.yt-ga-sorgu__g img, .yt-ga-sorgu__g canvas { width: 100%; height: 100%; object-fit: cover; display: block; }
.yt-ga-sorgu__b { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.yt-ga-sorgu__b .yt-bolum__t { font-size: 20px; line-height: 28px; }
.yt-ga-sorgu__a { margin: 0; font-size: 14px; line-height: 20px; color: var(--yt-m2); }
.yt-ga-sorgu__e { flex: 0 0 auto; align-self: flex-start; }
.yt-ga-palet { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.yt-ga-renkler { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.yt-ga-renk { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 2px 10px 2px 4px; border: 1px solid var(--yt-cizgi-g); border-radius: 999px;
  background: var(--yt-beyaz); color: var(--yt-m); font: inherit; font-size: 12px; line-height: 16px; cursor: pointer; }
.yt-ga-renk[disabled] { cursor: default; opacity: 1; }
.yt-ga-renk:not([disabled]):hover { border-color: var(--yt-l); }
.yt-ga-renk[aria-pressed="true"] { border-color: var(--yt-l); background: var(--yt-l-acik); font-weight: 600; color: var(--yt-l-koyu); }
.yt-ga-renk__n { width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.yt-ga-notlar { display: flex; flex-direction: column; gap: 4px; margin: 0 0 16px; }
.yt-ga-not { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 13px; line-height: 18px; color: var(--yt-m2); }
.yt-ga-not i { margin-top: 2px; color: var(--yt-l); width: 14px; text-align: center; }
.yt-ga-suzgec { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; padding: 12px 16px; background: var(--yt-beyaz); border: 1px solid var(--yt-cizgi);
  border-radius: var(--yt-r-o); }
.yt-ga-suzgec__s { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.yt-ga-suzgec__ad { flex: 0 0 56px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--yt-m3); }
.yt-ga-suzgec .yt-cip { min-height: 30px; padding: 4px 10px; font-size: 13px; }
.yt-ga-suzgec [data-yt-ga-temizle] { align-self: flex-start; }
.yt-ga-urunler .yt-urun__g { background: #fff; }
.yt-ga-urunler .yt-urun__g img { object-fit: contain; }
.yt-ga-kart[hidden] { display: none !important; }
.yt-ga-bant { margin-top: 2px; }
.yt-ga-bant--benzer .yt-benzerlik__cubuk > span { background: #5b6f8c; }
.yt-ga-bant--kismen { color: var(--yt-m2); }
.yt-ga-bant--kismen .yt-benzerlik__cubuk > span { background: #93a2b8; }
.yt-ga-kart__e { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.yt-ga-kart__bag { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 0 12px; margin-top: 4px; }
.yt-ga-kart__bag .yt-btn--metin { height: 28px; padding: 0; gap: 6px; font-size: 13px; }
.yt-ga-kart__bag .yt-btn--metin:hover, .yt-ga-kart__bag .yt-btn--metin:focus { background: transparent; text-decoration: underline; }
.yt-ga-kart__bag i { font-size: 12px; opacity: .8; }
.yt-ga-suz-bos { margin: 8px 0 0; font-size: 14px; color: var(--yt-m2); }
.yt-ga-daha { display: flex; justify-content: center; margin: 20px 0 0; }
.yt-ga-bos .yt-bos { padding: 32px 20px; }
.yt-ga-oneri { margin: 8px 0 0; padding: 0 0 0 18px; max-width: 60ch; text-align: left; font-size: 14px; line-height: 22px; color: var(--yt-m2); list-style: disc outside; }
.yt-ga-oneri li, .yt-ga-ipuclari li { display: list-item; list-style: inherit; }   /* tema li { list-style: none } veriyor */
.yt-ga-bos__e { justify-content: center; margin-top: 12px; }
.yt-ga-durum-notu p { margin: 0; }
.yt-ga-durum-notu__e { margin-top: 8px !important; }
.yt-ga-iskelet { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.yt-ga-iskelet li { display: flex; flex-direction: column; gap: 8px; padding: 0 0 12px; background: var(--yt-beyaz); border: 1px solid var(--yt-cizgi); border-radius: var(--yt-r-o); overflow: hidden; }
.yt-ga-iskelet .yt-iskelet--satir { margin: 0 12px; }

/* ------------------------------------------------------------------ örnekler + bilgi */
.yt-ga-alt { display: flex; flex-direction: column; gap: 32px; margin-top: 40px; }
.yt-ga-ornekler .yt-bolum { margin-top: 0; }
.yt-ga-ornek-liste { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.yt-ga .yt-ga-ornek { display: flex; flex-direction: column; height: 100%; background: var(--yt-beyaz); border: 1px solid var(--yt-cizgi); border-radius: var(--yt-r-o);
  overflow: hidden; color: var(--yt-m); text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease; }
.yt-ga .yt-ga-ornek:hover, .yt-ga .yt-ga-ornek:focus-visible { border-color: var(--yt-l); box-shadow: var(--yt-g2); text-decoration: none; }
.yt-ga-ornek__g { display: block; aspect-ratio: 4 / 3; background: var(--yt-zemin); overflow: hidden; }
.yt-ga-ornek__g img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yt-ga-ornek__t { display: block; padding: 8px 10px 10px; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--yt-l-koyu); }
.yt-ga-ornek.yukleniyor { opacity: .6; pointer-events: none; }
.yt-ga-bilgi .yt-adimlar > li strong { margin-bottom: 2px; }
.yt-ga-ipuclari { margin: 0; padding-left: 18px; list-style: disc outside; }
.yt-ga-ipuclari li + li { margin-top: 4px; }
.yt-ga-bildirim { position: fixed; left: 50%; bottom: 24px; z-index: 1050; transform: translateX(-50%); max-width: calc(100vw - 32px); padding: 12px 16px;
  border-radius: var(--yt-r-o); background: var(--yt-l-koyu); color: #fff; font-size: 14px; line-height: 20px; box-shadow: var(--yt-g3); }

/* ------------------------------------------------------------------ duyarlı */
@media (max-width: 1199px) { .yt-ga-ornek-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } .yt-ga-iskelet { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 991px) {
  .yt-ga-izgara { grid-template-columns: minmax(0, 1fr); }
  .yt-ga-iskelet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* telefonda "Ara" düğmesi kırpma sırasında ekranın altında sabit (yapışkan kap = form: iki kartı da kapsar) */
  .yt-ga-form.hazir .yt-ga-mobil-ara { display: block; position: sticky; bottom: 0; z-index: 5; margin: 12px -16px 0; padding: 12px 16px;
    background: rgba(255, 255, 255, .96); border-top: 1px solid var(--yt-cizgi); box-shadow: 0 -4px 12px rgba(31, 45, 66, .08); }
}
@media (max-width: 767px) {
  .yt-ga-sorgu { flex-wrap: wrap; padding: 12px; gap: 12px; }
  .yt-ga-sorgu__g { flex-basis: 56px; width: 56px; height: 56px; }
  .yt-ga-sorgu__b { flex-basis: calc(100% - 68px); }
  .yt-ga-sorgu__e { width: 100%; }
  .yt-ga-giris .yt-surukle { min-height: 180px; }
  .yt-ga-ornek-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yt-ga-arac [data-yt-ga-degistir] { margin-left: 0; }
}
@media (max-width: 479px) {
  .yt-ga-kipler { grid-template-columns: minmax(0, 1fr); }
  .yt-ga-kip { flex-direction: row; align-items: baseline; gap: 8px; }
  .yt-ga-kart__e .yt-btn--satin { width: 100%; }
}
/* dokunmatik cihaz: sürükle-bırak ve Ctrl+V anlamsız; kamera birincil eylem */
.yt-ga-dokunmatik { display: none; }
@media (hover: none) and (pointer: coarse) {
  .yt-ga-masaustu, .yt-ga-yapistir { display: none; }
  .yt-ga-dokunmatik { display: inline; }
  .yt-ga-dugmeler [data-yt-ga-kamera-ac] { background: var(--yt-l); border-color: var(--yt-l); color: #fff; }
}
@media (max-width: 767px) {
  .yt-ga-suzgec__s { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .yt-ga-suzgec__s::-webkit-scrollbar { display: none; }
  .yt-ga-suzgec__ad { flex: 0 0 auto; margin-right: 4px; }
  .yt-ga-suzgec .yt-cip { flex: 0 0 auto; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .yt-ga-kip, .yt-ga .yt-ga-ornek { transition: none; } }