/* =================================================================
   AKSESUARLAR SAYFASI (aksesuarlar.html, 2026-10-29) — dört cihaz grubu, kare görselli eşit kartlar.
   Hero, yapışkan çubuk ve talep bandı urun.css'ten, talep vitrini urunler.css'ten; bu dosya yalnız sayfaya özgü düzeni ekler.
   Ölçüler rem (bkz. CLAUDE.md "Ölçekleme").
   ================================================================= */

/* ---------- Hero bandı: solda cihaz adı, sağda iki kelimelik slogan (kullanıcı 2026-10-31: aksesuar sayısı kalktı);
   ilgili gruba bağlantı; bandın sağında video duraklat düğmesi ---------- */
.aksbant-nav { flex: 1; min-width: 0; }
.aksbant { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.aksbant a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 100%; padding: 1.75rem 2rem 1.75rem 0; }
.aksbant li + li a { padding-left: 2rem; border-left: 1px solid rgba(255, 255, 255, .14); }
.aksbant__ad { font-family: var(--font-baslik); font-size: 2.25rem; font-weight: 700; line-height: 1; white-space: nowrap; color: #fff; transition: color .2s; }
/* Slogan: kelime başına bir satır, sağa yaslı, dikeyde ortalı */
.aksbant__slogan {
  width: min-content; text-align: right;
  font-family: var(--font-baslik); font-size: 1.125rem; font-weight: 600; line-height: 1.2; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .9); transition: color .2s;
}
.aksbant a:hover .aksbant__ad, .aksbant a:hover .aksbant__slogan { color: var(--xg-acik); }

/* ---------- Cihaz grubu ---------- */
.aksgrup { background: var(--kagit-2); }   /* yapışkan çubuk payı urun.css'teki scroll-padding-top'ta */
.aksgrup--acik { background: var(--kagit); }
.aksgrup__bas { display: grid; grid-template-columns: 12rem minmax(0, 1fr) 21rem; gap: 3rem; align-items: center; margin-bottom: 3rem; }
/* Cihaz vitrini (ve teklif kutusunun medyası): ürün kartlarıyla aynı koyu zemin ve spot ışık */
.aksgrup__vitrin { display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--yaricap); }
.aksgrup__vitrin, .akart--talep .akart__medya {
  background:
    radial-gradient(ellipse 46% 62% at 50% 58%, rgba(124, 155, 255, .5) 0%, rgba(var(--xg-rgb), .24) 44%, rgba(var(--xg-rgb), 0) 80%),
    var(--ink-2);
}
.aksgrup__vitrin img { width: 100%; height: 100%; object-fit: contain; padding: 1rem 0 0.75rem; }
.aksgrup__baslik { max-width: none; }   /* "Lixel L2 Pro Aksesuarları" tek satır (22ch sınırı iki satıra bölüyordu) */
.aksgrup__metin .bolum__giris { max-width: 46rem; margin-top: 1rem; }
.aksgrup__yan { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
.aksgrup__standart { padding-left: 1rem; border-left: 2px solid var(--xg); font-size: var(--fs-sm); line-height: 1.5; color: var(--soluk); }

/* ---------- Aksesuar kartları: 4 sütun, eşit yükseklik; teklif bağlantısı hep kartın dibinde ---------- */
.akartlar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
.akart {
  display: flex; flex-direction: column; overflow: hidden; scroll-margin-top: 1.5rem;
  background: var(--kagit); border: 1px solid var(--cizgi); border-radius: var(--yaricap);
}
.js .akart[data-belir] { transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s, opacity .7s var(--ease); }
.akart:hover, .js .akart.is-gorunur:hover { transform: translateY(-0.375rem); }
.akart:hover { border-color: rgba(var(--xg-rgb), .6); box-shadow: 0 1.5rem 3rem rgba(var(--ink-rgb), .14); }
.akart__medya { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--kagit-2); border-bottom: 1px solid var(--cizgi); }
.akart__medya--beyaz { background: #fff; }
/* Kart galerisi (2026-10-30): mağaza ürün galerisi kaydırmalı şeritte (scroll-snap; dokunmatikte parmakla), oklar fareyle üzerine gelince,
   dokunmatikte hep görünür; sayaç sağ altta. Fotoğrafa tıklayınca büyük galeri (js/aksesuarlar.js). */
.akart__iz { display: flex; width: 100%; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.akart__iz::-webkit-scrollbar { display: none; }
.akart__iz:focus-visible { outline: 2px solid var(--xg); outline-offset: -2px; }
.akart__slayt { flex: 0 0 100%; height: 100%; overflow: hidden; scroll-snap-align: start; cursor: zoom-in; }
.akart__gorsel, .akart__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.akart__gorsel { transition: transform .6s var(--ease); }
.akart:hover .akart__gorsel { transform: scale(1.04); }
.akart__ok {
  position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; margin-top: -1.25rem; border-radius: 50%;
  font-size: 1.125rem; color: var(--ink); background: rgba(255, 255, 255, .94); box-shadow: 0 0.25rem 1rem rgba(var(--ink-rgb), .18);
  opacity: 0; transition: opacity .2s, color .2s, background-color .2s;
}
.akart__ok--geri { left: 0.75rem; }
.akart__ok--ileri { right: 0.75rem; }
.akart__ok--geri .ikon, .galeri__ok--geri .ikon { transform: rotate(90deg); }
.akart__ok--ileri .ikon, .galeri__ok--ileri .ikon { transform: rotate(-90deg); }
.akart__medya:hover .akart__ok, .akart__ok:focus-visible { opacity: 1; }
.akart__ok:hover { color: #fff; background: var(--xg); }
.akart__ok:disabled { opacity: 0 !important; pointer-events: none; }
@media (hover: none) { .akart__ok { opacity: .92; } }
.akart__sayac {
  position: absolute; right: 0.875rem; bottom: 0.875rem; z-index: 1; padding: 0.25rem 0.625rem; border-radius: 2rem; pointer-events: none;
  font-family: var(--font-baslik); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; color: #fff; background: rgba(var(--ink-rgb), .7);
}
/* Resmî teknik sayfadaki durum: standart sette / isteğe bağlı */
.akart__durum {
  position: absolute; left: 0.875rem; top: 0.875rem; z-index: 1; padding: 0.25rem 0.75rem; border-radius: 2rem;
  font-family: var(--font-baslik); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink); background: rgba(255, 255, 255, .92); box-shadow: 0 0 0 1px rgba(var(--ink-rgb), .08);
}
.akart__durum--standart { color: #fff; background: var(--xg); box-shadow: none; }
.akart__govde { display: flex; flex: 1; flex-direction: column; padding: 1.375rem 1.5rem 1.5rem; }
.akart__tur { font-family: var(--font-baslik); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--xg); }
.akart__ad { margin-top: 0.25rem; font-family: var(--font-baslik); font-size: 1.625rem; font-weight: 700; line-height: 1.1; text-transform: uppercase; color: var(--ink); }
.akart__metin { margin-top: 0.625rem; font-size: var(--fs-sm); line-height: 1.55; color: var(--soluk); }
/* Özellik tablosu, paket içeriği ve teklif bağlantısı kartın dibinde: aynı satırdaki kartlarda alt çizgiler hizalı, boşluk açıklamanın altında */
.akart__alt { display: flex; flex-direction: column; margin-top: auto; }
.akart__ozellik { margin-top: 1.25rem; border-top: 1px solid var(--cizgi); }
.akart__ozellik div { display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.5rem; border-bottom: 1px solid var(--cizgi); font-size: var(--fs-sm); line-height: 1.4; }
.akart__ozellik dt { flex: none; max-width: 60%; color: var(--soluk); }
.akart__ozellik dd { text-align: right; font-weight: 600; color: var(--metin); }
.akart__paket { margin-top: 0.875rem; font-size: var(--fs-sm); }
.akart__paket summary {
  display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; list-style: none;
  font-family: var(--font-baslik); font-size: var(--fs-sm); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--metin);
}
.akart__paket summary::-webkit-details-marker { display: none; }
.akart__paket summary::after {
  content: ""; width: 0.5rem; height: 0.5rem; margin-top: -0.25rem; border-right: 2px solid var(--xg); border-bottom: 2px solid var(--xg);
  transform: rotate(45deg); transition: transform .2s var(--ease);
}
.akart__paket[open] summary::after { margin-top: 0.25rem; transform: rotate(-135deg); }
.akart__paket summary:hover { color: var(--xg); }
.akart__paket ul { display: flex; flex-direction: column; gap: 0.25rem; margin-top: 0.625rem; }
.akart__paket li { position: relative; padding-left: 1rem; line-height: 1.45; color: var(--soluk); }
.akart__paket li::before { content: ""; position: absolute; left: 0; top: .6em; width: 0.3125rem; height: 0.3125rem; border-radius: 50%; background: var(--xg); }
.akart__link { align-self: flex-start; margin-top: 1.25rem; font-size: var(--fs-sm); }

/* Teklif kutusu: üç kartlı grubu dörde tamamlar (yetim boşluk kalmasın); kartla aynı iskelet, koyu zemin, düğmeler dipte */
.akart--talep { background: var(--ink-2); border-color: var(--ink-2); }
.akart--talep .akart__medya { border-bottom-color: rgba(255, 255, 255, .08); }
.akart__vitrin { width: 100%; height: 100%; object-fit: contain; padding: 14% 12% 10%; transition: transform .6s var(--ease); }
.akart--talep:hover .akart__vitrin { transform: scale(1.04); }
.akart--talep .akart__tur { color: var(--xg-acik); }
.akart--talep .akart__ad { color: #fff; }
.akart--talep .akart__metin { color: rgba(255, 255, 255, .72); }
.akart__dugmeler { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: auto; padding-top: 1.5rem; }
/* Son sıradaki boş sütunları kaplar (L3: 5 kart → 3 sütun); genişken yatay: solda metin, sağda cihaz */
.akart--talep { grid-column: span var(--yayil, 1); }
.akart--genis { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.akart--genis .akart__medya { order: 2; height: 100%; aspect-ratio: auto; border-bottom: 0; border-left: 1px solid rgba(255, 255, 255, .08); }
.akart--genis .akart__govde { justify-content: center; padding: 3rem 3.5rem; }
.akart--genis .akart__ad { font-size: 2.5rem; }
.akart--genis .akart__metin { max-width: 32rem; margin-top: 1rem; font-size: var(--fs-lg); }
.akart--genis .akart__dugmeler { margin-top: 0; padding-top: 2rem; }
/* Yakında kutusu (L3 dron ve araç kiti): teklif kutusunun iskeleti; metnin üstünde büyük mavi rozet, altında ikonlu iki kit satırı */
.akart__yakinda {
  align-self: flex-start; margin-bottom: 1.5rem; padding: 0.625rem 1.375rem; border-radius: 2rem; line-height: 1;
  font-family: var(--font-baslik); font-size: 1.375rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: #fff; background: var(--xg); box-shadow: 0 0 0 0.375rem rgba(var(--xg-rgb), .2);
}
.akart__kitler { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .12); }
.akart__kit { display: flex; align-items: flex-start; gap: 1rem; }
.akart__kit-ikon {
  display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border-radius: var(--yaricap);
  color: var(--xg-acik); background: rgba(var(--xg-rgb), .14); box-shadow: inset 0 0 0 1px rgba(var(--xg-rgb), .35);
}
.akart__kit-ikon .ikon { width: 1.375rem; height: 1.375rem; }
.akart__kit p { font-size: var(--fs-sm); line-height: 1.5; color: rgba(255, 255, 255, .72); }
.akart__kit-ad { display: block; font-family: var(--font-baslik); font-size: var(--fs-base); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; }
.akart--genis .akart__kitler { max-width: 32rem; }

/* ---------- Büyük galeri penceresi (dialog): üstte ad ve sayaç, ortada beyaz sahne, altta küçük görseller ---------- */
.galeri {
  width: min(94vw, 68rem); max-width: none; max-height: 94vh; padding: 0; border: 0; border-radius: var(--yaricap); overflow: hidden;
  color: #fff; background: var(--ink); box-shadow: 0 2rem 6rem rgba(0, 0, 0, .5);
}
.galeri[open] { display: flex; flex-direction: column; }
.galeri::backdrop { background: rgba(5, 8, 18, .84); -webkit-backdrop-filter: blur(0.25rem); backdrop-filter: blur(0.25rem); }
html:has(.galeri[open]) { overflow: hidden; }
.galeri__ust { display: flex; align-items: center; gap: 1.25rem; padding: 0.875rem 1rem 0.875rem 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.galeri__baslik { flex: 1; min-width: 0; overflow: hidden; font-family: var(--font-baslik); font-size: 1.25rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; }
.galeri__sayac { font-family: var(--font-baslik); font-size: var(--fs-sm); letter-spacing: .06em; color: rgba(255, 255, 255, .7); }
.galeri__kapat {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%;
  font-size: 1.25rem; color: #fff; transition: background-color .2s, border-color .2s;
}
.galeri__kapat:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }
.galeri__sahne { position: relative; display: flex; flex: 1; min-height: 0; align-items: center; justify-content: center; background: #fff; touch-action: pan-y; }
.galeri__gorsel { height: min(68vh, 46rem); max-width: 100%; aspect-ratio: 1 / 1; }
.galeri__gorsel img, .galeri__gorsel video { display: block; width: 100%; height: 100%; object-fit: contain; }
.galeri__ok {
  position: absolute; top: 50%; display: grid; place-items: center; width: 3rem; height: 3rem; margin-top: -1.5rem; border-radius: 50%;
  font-size: 1.25rem; color: #fff; background: rgba(var(--ink-rgb), .78); transition: background-color .2s;
}
.galeri__ok:hover { background: var(--xg); }
.galeri__ok--geri { left: 1rem; }
.galeri__ok--ileri { right: 1rem; }
.galeri__kucukler { display: flex; gap: 0.5rem; padding: 0.875rem 1rem; overflow-x: auto; scrollbar-width: thin; }
.galeri__kucukler button {
  position: relative; display: block; flex: none; width: 4.5rem; height: 4.5rem; overflow: hidden; border-radius: 0.25rem; background: #fff;
  opacity: .55; outline: 2px solid transparent; outline-offset: -2px; transition: opacity .2s, outline-color .2s;
}
.galeri__kucukler button:hover, .galeri__kucukler button[aria-current] { opacity: 1; }
.galeri__kucukler button[aria-current] { outline-color: var(--xg); }
.galeri__kucukler img { width: 100%; height: 100%; object-fit: cover; }
.galeri__kucukler .ikon { position: absolute; left: 50%; top: 50%; width: 1.5rem; height: 1.5rem; margin: -0.75rem 0 0 -0.75rem; padding: 0.3rem; border-radius: 50%; color: #fff; background: rgba(var(--ink-rgb), .75); }

@media (prefers-reduced-motion: reduce) {
  .akart, .akart__gorsel, .akart__vitrin, .akart__ok, .js .akart[data-belir] { transition: none; }
  .akart:hover, .js .akart.is-gorunur:hover, .akart:hover .akart__gorsel, .akart--talep:hover .akart__vitrin { transform: none; }
}

/* ---------- Tablet / mobil ---------- */
@media (max-width: 1100px) {
  .aksbant { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aksbant li:nth-child(3) a { padding-left: 0; border-left: 0; }
  .aksbant li:nth-child(n+3) a { border-top: 1px solid rgba(255, 255, 255, .14); }
  .aksbant a { padding: 1.125rem 1.75rem 1.125rem 0; }
  .aksbant li + li a { padding-left: 1.75rem; }
  .aksbant li:nth-child(3) a { padding-left: 0; }
  .aksbant__ad { font-size: 1.875rem; }
  .akart__yakinda { margin-bottom: 1.125rem; font-size: 1.125rem; }
  .aksgrup__bas { grid-template-columns: 9rem minmax(0, 1fr); gap: 1.5rem 2rem; margin-bottom: 2.5rem; }
  .aksgrup__yan { grid-column: 1 / -1; }
  .akartlar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .akart--talep { grid-column: auto; }
  .akart--genis { display: flex; }
  .akart--genis .akart__medya { order: 0; height: auto; aspect-ratio: 1 / 1; border-left: 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .akart--genis .akart__govde { justify-content: flex-start; padding: 1.375rem 1.5rem 1.5rem; }
  .akart--genis .akart__ad { font-size: 1.625rem; }
  .akart--genis .akart__metin { margin-top: 0.625rem; font-size: var(--fs-sm); }
  .akart--genis .akart__dugmeler { margin-top: auto; padding-top: 1.5rem; }
}
@media (max-width: 640px) {
  /* Dar kutuda slogan adın altında, sola yaslı (kelime başına bir satır kalır) */
  .aksbant a { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.5rem; padding: 1rem 1rem 1rem 0; }
  .aksbant li + li a { padding-left: 1rem; }
  .aksbant li:nth-child(3) a { padding-left: 0; }
  .aksbant__ad { font-size: 1.375rem; }
  .aksbant__slogan { text-align: left; font-size: var(--fs-xs); }
  .aksgrup__bas { grid-template-columns: minmax(0, 1fr); }
  .aksgrup__vitrin { width: 8rem; }
  .akartlar { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .akart__ad { font-size: 1.5rem; }
  /* Telefonda galeri tam ekran */
  .galeri { width: 100vw; height: 100dvh; max-height: none; border-radius: 0; }
  .galeri__gorsel { width: 100%; height: auto; }
  .galeri__ok { width: 2.5rem; height: 2.5rem; margin-top: -1.25rem; }
  .galeri__ok--geri { left: 0.5rem; }
  .galeri__ok--ileri { right: 0.5rem; }
}